From b34fbeffb0d128b75ec0a91acf7fe8ac3816c597 Mon Sep 17 00:00:00 2001 From: Tcsm <1377977403@qq.com> Date: 星期二, 18 七月 2023 20:15:38 +0800 Subject: [PATCH] 新增个人记事本按钮 --- ruoyi-ui/src/views/self/show.vue | 297 +++++++++++++++++++++++++++++++++++++++++++++++----------- 1 files changed, 238 insertions(+), 59 deletions(-) diff --git a/ruoyi-ui/src/views/self/show.vue b/ruoyi-ui/src/views/self/show.vue index f042745..e4a3978 100644 --- a/ruoyi-ui/src/views/self/show.vue +++ b/ruoyi-ui/src/views/self/show.vue @@ -6,7 +6,16 @@ class="el-icon-top" ></el-button> </el-backtop> - <h1 style="font-size:21px;padding-top:30px">涓汉绠�鍘�</h1> + <h1 style="font-size:21px;padding-top:30px;display: flex;justify-content: space-between;align-items: center;"> + <span>涓汉绠�鍘�</span> + <div style="display: flex; align-items: center;"> + <el-button size="mini" type="text" @click="toMemo"> + <div class="form" ><el-icon style="padding-right:110px;"></el-icon> + <span class="text" style="width: 69px;height: 26px;font-size: 16px; + font-family: Microsoft YaHei-Regular, Microsoft YaHei; color: #EBA4AA;">涓汉璁颁簨鏈�</span></div> + </el-button> + </div> + </h1> <el-divider /> <!-- 鍩烘湰淇℃伅--> <h2 style="font-size:16px">鍩烘湰淇℃伅</h2> @@ -44,8 +53,17 @@ <el-form ref="elForm" :model="individualList" :rules="rules" size="medium" label-position="left"> <el-row :span="5"> <el-form-item label="鎬у埆" prop="sex" label-width="40px"> - <el-input v-model="individualList.sex === 1 ? '鐢�':'濂�' " placeholder="" clearable :style="{width: '100%'}" :disabled="dsb"> - </el-input> +<!-- <el-input v-model="individualList.sex === 1 ? '鐢�':'濂�' " placeholder="" clearable :style="{width: '100%'}" :disabled="dsb">--> +<!-- </el-input>--> + <template v-if="!isEditing"> + <el-input v-model="individualList.sex === 1 ? '鐢�':'濂�'" placeholder="" clearable :style="{width: '100%'}" :disabled="dsb"></el-input> + </template> + <template v-else> + <el-select v-model="individualList.sex" placeholder="璇烽�夋嫨鎬у埆" clearable :style="{width: '100%'}"> + <el-option label="鐢�" value="1"></el-option> + <el-option label="濂�" value="0"></el-option> + </el-select> + </template> </el-form-item> </el-row> <el-row :span="5"> @@ -76,8 +94,18 @@ </el-row> <el-row :span="5"> <el-form-item label="濠氬Щ鐘跺喌" prop="maritalStatus" label-width="70px"> - <el-input v-model="individualList.maritalStatus === 1 ? '宸插':'鏈'" placeholder="" clearable :style="{width: '100%'}" :disabled="dsb"> - </el-input> + <template v-if="!isEditing" > + <el-input v-if="individualList.maritalStatus===0" placeholder="鏈"></el-input> + <el-input v-if="individualList.maritalStatus===1" placeholder="宸插"></el-input> + <el-input v-if="individualList.maritalStatus===2" placeholder="绂诲"></el-input> + </template> + <template v-else> + <el-select v-model="individualList.maritalStatus" placeholder="璇烽�夋嫨鎬у埆" clearable :style="{width: '100%'}"> + <el-option label="鏈" value="0"></el-option> + <el-option label="宸插" value="1"></el-option> + <el-option label="绂诲" value="2"></el-option> + </el-select> + </template> </el-form-item> </el-row> @@ -88,44 +116,38 @@ <div style="padding-left:30px;padding-top:30px"> <el-col :span="6" :data="individualList"> <div class="block" :model="individualList" > - <el-col v-model="individualList.url" prop="url"> - <el-avatar shape="square" :size=200 > + <el-col v-model="individualList.img" prop="img"> + <el-avatar shape="square" style="width: 200px;height: 150px;" > <el-image - :src="'http://47.93.189.255:8080/'+ individualList.url" + :src="'http://47.93.189.255:8080/'+ individualList.img" :fit="fit" + style="width: 100%;height: 100%;" ></el-image> </el-avatar> - </el-col> +<!-- <el-upload--> +<!-- action="#"--> +<!-- list-type="picture-card"--> +<!-- multiple--> +<!-- :http-request="requestUpload"--> +<!-- :file-list="fileList"--> +<!-- >--> +<!-- <i slot="default" class="el-icon-plus"></i>--> +<!-- <div slot="file" slot-scope="{file}">--> +<!-- <img--> +<!-- class="el-upload-list__item-thumbnail"--> +<!-- :src="file.url"--> +<!-- alt=""--> +<!-- style="width: 147px; height: 147px"--> +<!-- fit="cover"--> +<!-- :preview-src-list="[file.url]"--> +<!-- >--> +<!-- </div>--> +<!-- </el-upload>--> + </el-col> </div> </el-col> - - <!-- <el-row>--> - <!--<!– <el-table border style="width: 100%">–>--> - <!--<!– <el-table-column–>--> - <!--<!– prop="img"–>--> - <!--<!– v-model="individualList.img"–>--> - <!--<!– placeholder=""–>--> - <!--<!– width="180">–>--> - <!--<!– <template slot-scope="scope">–>--> - <!--<!– <img :src="scope.row.src" style="width:100px;height:50px;"/>–>--> - <!--<!– </template>–>--> - <!--<!– </el-table-column>–>--> - - <!--<!– </el-table>–>--> - <!--<!– <el-upload :class="{uoloadSty:showBtnDealImg,disUoloadSty:noneBtnImg}"–>--> - <!--<!– ref="ref1"–>--> - <!--<!– action=""–>--> - <!--<!– :file-list="fileList"–>--> - <!--<!– list-type="picture-card"–>--> - <!--<!– accept="image/*"–>--> - <!--<!– :auto-upload="false"–>--> - <!--<!– :multiple="false"–>--> - <!--<!– :limit="limitCountImg">–>--> - <!--<!– <i class="el-icon-plus"></i>–>--> - <!--<!– </el-upload>–>--> - <!-- </el-row>--> </div> <div style="padding-left:30px;padding-top:30px" > @@ -137,6 +159,7 @@ v-if="isShow" v-hasPermi="['system:role:edit']" >缂栬緫</el-button> + <el-button v-if="isShow_2" type="primary" @click="submitForm" :disabled="dsb">瀹屾垚</el-button> <br> <el-button type="primary" @@ -144,7 +167,10 @@ v-hasPermi="['family:note:export']" >瀵煎嚭</el-button> <br> - <el-button v-if="isShow_2" type="primary" @click="submitForm" :disabled="dsb">瀹屾垚</el-button> + <el-button + type="primary" + v-hasPermi="['family:note:export']" + >鎵撳嵃</el-button> </el-row> </el-container> @@ -221,14 +247,45 @@ </div> </template> <el-table v-loading="loading" :data="experienceList" @selection-change="handleSelectionChange" :row-class-name="tableRowClassName" style="background: #FFEFF2; border-radius: 14px 14px 14px 14px;"> - <el-table-column label="寮�濮嬫棩鏈�" prop="startDate" sortable width="300" align="center" > - <template slot-scope="scope">{{scope.row.startDate? scope.row.startDate: '鈥斺�斺�斺��'}}</template> + <el-table-column label="寮�濮嬫棩鏈�" prop="startDate" sortable width="250" align="center" > + <template slot-scope="scope"> + <template v-if="!scope.row.isEdit"> + {{ scope.row.startDate }} + </template> + <template v-else> + <el-input v-model="scope.row.startDate"></el-input> + </template> + </template> + </el-table-column> + <el-table-column label="缁撴潫鏃ユ湡" prop="endDate" sortable width="250" align="center" > + <template slot-scope="scope"> + <template v-if="!scope.row.isEdit"> + {{ scope.row.endDate }} + </template> + <template v-else> + <el-input v-model="scope.row.endDate"></el-input> + </template> + </template> </el-table-column> <el-table-column label="涓昏瀛︿範缁忓巻銆佸伐浣滃崟浣嶅強浠昏亴鎯呭喌" prop="content" sortable width="350" align="center" > - <template slot-scope="scope">{{scope.row.content? scope.row.content: '鈥斺�斺�斺��'}}</template> + <template slot-scope="scope"> + <template v-if="!scope.row.isEdit"> + {{ scope.row.content }} + </template> + <template v-else> + <el-input v-model="scope.row.content"></el-input> + </template> + </template> </el-table-column> <el-table-column label="璇佹槑浜�" prop="witness" sortable width="300" align="center" > - <template slot-scope="scope">{{scope.row.witness? scope.row.witness: '鈥斺�斺�斺��'}}</template> + <template slot-scope="scope"> + <template v-if="!scope.row.isEdit"> + {{ scope.row.witness }} + </template> + <template v-else> + <el-input v-model="scope.row.witness"></el-input> + </template> + </template> </el-table-column> <!-- 鎿嶄綔--> <el-table-column label="鎿嶄綔" align="center" class-name="small-padding fixed-width"> @@ -238,9 +295,15 @@ size="mini" type="text" icon="el-icon-edit" - @click="showDialog1" + v-if="!editStatus[scope.row.id]" + @click="editRow(scope.row)" v-hasPermi="['system:role:edit']" >淇敼</el-button> + <el-button size="mini" + type="text" + v-if="editStatus[scope.row.id]" + @click="saveRow(scope.row)" + >淇濆瓨</el-button> <el-button size="mini" type="text" @@ -351,6 +414,9 @@ <el-table-column label="璇佷欢鍚嶇О" prop="cerName" sortable width="280" align="center" > <template slot-scope="scope">{{scope.row.cerName? scope.row.cerName: '鈥斺�斺�斺��'}}</template> </el-table-column> + <el-table-column label="璇佷欢绫诲瀷" prop="type" sortable width="280" align="center" > + <template slot-scope="scope">{{ getSrc(scope.row.type) }}</template> + </el-table-column> <el-table-column label="鎸佹湁鎯呭喌" prop="ownStatus" sortable width="280" align="center" > <template slot-scope="scope">{{scope.row.ownStatus? scope.row.ownStatus: '鈥斺�斺�斺��'}}</template> </el-table-column> @@ -372,9 +438,11 @@ size="mini" type="text" icon="el-icon-edit" - @click="handleAdd" + v-if="scope.row.isEdit" + @click="handleEdit" v-hasPermi="['system:role:edit']" >淇敼</el-button> + <el-button v-if="scope.row.isEdit" @click="saveRow(scope.row)">淇濆瓨</el-button> <el-button size="mini" type="text" @@ -472,9 +540,9 @@ <div v-if="item.term === '缁撳鍚�'"> {{item.content}}</div> </el-tab-pane> </el-tabs> - <el-button size='mini' type="text" class="btn_autobiography" @click="showDialog('autobiography')" style='position: absolute;right:10px;top:5px;'> - <sapn v-html="'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'"></sapn> - </el-button> +<!-- <el-button size='mini' type="text" class="btn_autobiography" @click="showDialog('autobiography')" style='position: absolute;right:10px;top:5px;'>--> +<!-- <sapn v-html="'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'"></sapn>--> +<!-- </el-button>--> </div> </div> @@ -492,6 +560,9 @@ <el-form ref="elForm1" :model="formDat" :rules="rules" size="medium" label-width="140px"> <el-form-item label="寮�濮嬫棩鏈�" prop="startDate"> <el-input v-model="formDat.startDate" type='date' placeholder='閫夋嫨鏃ユ湡' clearable :style="{width: '100%'}" ></el-input> + </el-form-item> + <el-form-item label="缁撴潫鏃ユ湡" prop="endDate"> + <el-input v-model="formDat.endDate" type='date' placeholder='閫夋嫨鏃ユ湡' clearable :style="{width: '100%'}" ></el-input> </el-form-item> <el-form-item label="涓昏瀛︿範缁忓巻銆佸伐浣滃崟浣嶅強浠昏亴鎯呭喌" prop="content"> <el-input v-model="formDat.content" type="textarea" :rows="5" placeholder="璇疯緭鍏ヤ富瑕佸涔犵粡鍘嗐�佸伐浣滃崟浣嶅強浠昏亴鎯呭喌" clearable :style="{width: '100%'}" > @@ -547,6 +618,12 @@ <el-form-item label="璇佷欢鍚嶇О" prop="cerName"> <el-input v-model="formDat.cerName" placeholder="璇疯緭鍏ヨ瘉浠跺悕绉�" clearable :style="{width: '100%'}" > </el-input> + </el-form-item> + <el-form-item label="璇佷欢绫诲瀷" prop="type"> + <el-select v-model="formDat.type" placeholder="璇烽�夋嫨绫诲瀷" clearable :style="{width: '100%'}" > + <el-option v-for="(item, index) in typeOption" :key="index" :label="item.label" :value="item.value" + ></el-option> + </el-select> </el-form-item> <el-form-item label="鎸佹湁鎯呭喌" prop="ownStatus"> <el-input v-model="formDat.ownStatus" placeholder="璇疯緭鍏ユ寔鏈夋儏鍐�" clearable :style="{width: '100%'}" > @@ -679,12 +756,16 @@ //澶村儚涓婁紶 showBtnDealImg:true, noneBtnImg:false, - limitCountImg:1,//涓婁紶鍥剧墖鐨勬渶澶ф暟閲� + //涓婁紶鍥剧墖鐨勬渶澶ф暟閲� + limitCountImg:1, //涓汉淇℃伅鏁版嵁 individualList:[], - fit:['fill'], + isEditing: false, + // fit:['fill'], // 涓汉缁忓巻鏁版嵁 experienceList: [], + // isEdit:true, + editStatus: {}, //瀹跺涵鎴愬憳鍏崇郴鏁版嵁 relationList:[], //鍑哄叆澧冭瘉浠舵儏鍐� @@ -773,6 +854,7 @@ id:undefined, userId:undefined, startDate:undefined, + endDate:undefined, content:undefined, witness:undefined, remark: undefined, @@ -783,6 +865,7 @@ otherPosition:undefined, otherPolitical:undefined, //鎸佹湁鍑哄叆澧冭瘉浠舵儏鍐� + type:undefined, cerName:undefined, validityDate:undefined, ownStatus:undefined, @@ -880,6 +963,11 @@ message: '璇疯緭鍏ヨ捣濮嬫棩鏈�', trigger: 'blur' }], + endDate: [{ + // required: true, + message: '璇疯緭鍏ョ粨鏉熸棩鏈�', + trigger: 'blur' + }], content: [{ // required: true, message: '璇疯緭鍏�', @@ -892,12 +980,25 @@ }], }, - typeOptions: [], + typeOptions:[], + typeOption: [{ + value:'鎶ょ収', + label:'鎶ょ収' + },{ + value:'閫氳璇�', + label:'閫氳璇�' + },{ + value:'韬唤璇�', + label:'韬唤璇�' + }], }; }, created() { this.getList(); this.getAutobiographyInfor() + // this.experienceList.forEach(item => { + // this.$set(this.editStatus, item.id, false); + // }); }, methods: { // 鍙栨秷鎸夐挳 @@ -933,7 +1034,18 @@ return "statistics-warning-row"; } }, - + //璇佷欢绫诲埆 + getSrc(type) { + if (type === '鎶ょ収'){ + return '鎶ょ収' + }else if(type === '閫氳璇�'){ + return '閫氳璇�' + }else if(type === '韬唤璇�'){ + return '韬唤璇�' + }else { + return '鈥斺�斺�斺�斺�斺��' + } + }, /** 鏌ヨ瑙掕壊鍒楄〃 */ getList() { @@ -1006,7 +1118,6 @@ //鍥剧墖鐨勪笂浼犲強涓婁紶鎸夐挳闅愯棌 - // 鍙栨秷鎸夐挳 cancel() { this.open = false; @@ -1018,6 +1129,7 @@ this.reset(); }, + //涓汉鍩烘湰淇℃伅 submitForm() { let ul = this.fileList.map(function (elem){ return elem.url.replace(process.env.VUE_APP_BASE_TRUE_API,"") @@ -1029,7 +1141,7 @@ this.$refs['elForm'].validate(valid => { if (valid) { - if (this.individualList.id !== undefined) { + if (this.individualList.userId !== undefined) { updateIndividual(this.individualList).then(response => { this.$modal.msgSuccess("淇敼鎴愬姛"); // this.open = false; @@ -1041,6 +1153,41 @@ } } }) + // 鍒锋柊椤甸潰 + window.location.reload(); + }, + //涓昏缁忓巻 + editRow(row) { + this.$set(row, 'isEdit', true); + this.$set(this.editStatus, row.id, true); + }, + saveRow(row) { + // 鍦ㄨ繖閲屽鐞嗕繚瀛樹慨鏀瑰悗鐨勬暟鎹殑閫昏緫锛屽彲浠ュ彂閫佺粰鍚庣淇濆瓨 + let ul = this.fileList.map(function (elem){ + return elem.url.replace(process.env.VUE_APP_BASE_TRUE_API,"") + }).join(",") + let uls = this.fileListOther.map(function (elem){ + return elem.url.replace(process.env.VUE_APP_BASE_TRUE_API,"") + }).join(",") + this.experienceList.url = ul+","+uls + + this.$refs['elForm'].validate(valid => { + if (valid) { + if (this.experienceList.id !== undefined) { + updateExperience(this.experienceList).then(response => { + this.$modal.msgSuccess("淇敼鎴愬姛"); + // this.open = false; + // this.btn=false + + }); + } else { + this.$modal.msgSuccess("淇敼澶辫触"); + + } + } + }) + this.$set(row, 'isEdit', false); + this.$set(this.editStatus, row.id, false); }, // 琛ㄥ崟閲嶇疆 reset() { @@ -1091,6 +1238,11 @@ // this.title = "娣诲姞涓汉淇℃伅"; // }, + //涓汉璁颁簨鏈� + toMemo(row){ + const id = row.userId; + this.$router.push("/self/self/memo/" + id); + }, /** 鏌ョ湅璇︾粏淇℃伅 */ handleCheck(row){ @@ -1141,8 +1293,9 @@ this.btn = true this.isShow=false this.isShow_2=true + this.isEditing=true + // this.isEdit=false }, - //淇敼鎸夐挳 /** 鏂板鎸夐挳鎿嶄綔 */ handleAdd() { this.reset(); @@ -1180,6 +1333,10 @@ }); } }); + // 娓呯┖formDat瀵硅薄鐨勬暟鎹� + Object.keys(this.formDat).forEach(key => { + this.formDat[key] = ''; + }); }, submitDataScope2: function() { @@ -1199,6 +1356,10 @@ this.getList(); }); } + }); + // 娓呯┖formDat瀵硅薄鐨勬暟鎹� + Object.keys(this.formDat).forEach(key => { + this.formDat[key] = ''; }); }, submitDataScope4: function() { @@ -1220,6 +1381,10 @@ }); } }); + // 娓呯┖formDat瀵硅薄鐨勬暟鎹� + Object.keys(this.formDat).forEach(key => { + this.formDat[key] = ''; + }); }, submitDataScope5: function() { @@ -1240,6 +1405,10 @@ }); } }); + // 娓呯┖formDat瀵硅薄鐨勬暟鎹� + Object.keys(this.formDat).forEach(key => { + this.formDat[key] = ''; + }); }, submitDataScope6: function() { @@ -1259,6 +1428,10 @@ this.getList(); }); } + }); + // 娓呯┖formDat瀵硅薄鐨勬暟鎹� + Object.keys(this.formDat).forEach(key => { + this.formDat[key] = ''; }); }, @@ -1286,6 +1459,8 @@ }, + //淇敼涓昏缁忓巻 + /** 鍒犻櫎涓汉缁忓巻鎸夐挳鎿嶄綔 */ handleExperienceDelete(row) { const Ids = row.id || this.ids; @@ -1299,7 +1474,7 @@ /** 鍒犻櫎鎴愬憳鍏崇郴鎸夐挳鎿嶄綔 */ handleRelationDelete(row) { const Ids = row.id || this.ids; - this.$modal.confirm('鏄惁纭鍒犻櫎鏁版嵁椤癸紵'+Ids).then(function() { + this.$modal.confirm('鏄惁纭鍒犻櫎鏁版嵁椤癸紵').then(function() { return delRelation(Ids); }).then(() => { this.getList(); @@ -1319,7 +1494,7 @@ /** 鍒犻櫎鍑哄浗锛堝锛夋儏鍐垫寜閽搷浣� */ handleAbroadDelete(row) { const Ids = row.id || this.ids; - this.$modal.confirm('鏄惁纭鍒犻櫎鏁版嵁椤癸紵'+Ids).then(function() { + this.$modal.confirm('鏄惁纭鍒犻櫎鏁版嵁椤癸紵').then(function() { return delAbroad(Ids); }).then(() => { this.getList(); @@ -1372,23 +1547,27 @@ justify-content: space-between; } .btn_autobiography{ - background:center no-repeat url('src/assets/icons/add1.png') ; + background:center no-repeat url('../../assets/icons/add1.png') ; } .button { - background:center no-repeat url('src/assets/icons/add1.png') ; + background:center no-repeat url('../../assets/icons/add1.png') ; margin-left: 69.5vw; } .button2 { - background: center no-repeat url('src/assets/icons/add1.png') ; + background: center no-repeat url('../../assets/icons/add1.png') ; margin-left: 66vw; } .button4 { - background: center no-repeat url('src/assets/icons/add1.png') ; + background: center no-repeat url('../../assets/icons/add1.png') ; margin-left: 69.5vw; } .button5 { - background:center no-repeat url('src/assets/icons/add1.png') ; + background:center no-repeat url('../../assets/icons/add1.png') ; margin-left: 71vw; } +.form{ + background:center/11% no-repeat url('../../assets/icons/form.png') ; + +} </style> -- Gitblit v1.9.1