From f2a44bae17300adf473b89d30c85d399b5d050fd Mon Sep 17 00:00:00 2001 From: value <z1292839451@163.com> Date: 星期六, 23 九月 2023 10:33:44 +0800 Subject: [PATCH] 9.21 --- src/components/view/standard-table/target.vue | 159 ++++++++++++++++++++++++++++++++++++++++++++-------- 1 files changed, 133 insertions(+), 26 deletions(-) diff --git a/src/components/view/standard-table/target.vue b/src/components/view/standard-table/target.vue index 7dcfe2a..bc836e1 100644 --- a/src/components/view/standard-table/target.vue +++ b/src/components/view/standard-table/target.vue @@ -1,34 +1,52 @@ <template> <div class="standard"> - <div> - <el-table ref="table" :data="tableData" row-key="rowId" border max-height="675" + <div style="width: 100%;height: 68vh;overflow-x: auto;"> + <el-table ref="multipleTable" :data="tableData" row-key="rowId" border height="calc(90vh - 200px)" + @select-all="selectAll" @select="selectTr" @selection-change="handleSelectionChange" default-expand-all :tree-props="{children: 'children', hasChildren: 'hasChildren'}"> - <el-table-column type="selection" width="55"></el-table-column> - <el-table-column type="index" width="60" label="搴忓彿"></el-table-column> - <el-table-column prop="tfather" label="宸ュ簭"> + <el-table-column type="selection" width="55"></el-table-column> + <el-table-column type="index" width="60" label="搴忓彿"></el-table-column> + <el-table-column prop="tfather" label="宸ュ簭" width="200" :resizable="false"> <template slot-scope="scope"> - <el-tag type="primay" v-if="scope.row.tfather != null">01</el-tag> + <el-tag class="tag" type="primary" v-if="scope.row.tfather != null">01</el-tag> <span>{{scope.row.tfather}}</span> </template> </el-table-column> - <el-table-column prop="tname" label="宸ヨ壓鍚嶇О"> + <el-table-column prop="tname" label="宸ヨ壓鍚嶇О" width="200" :resizable="false"> <template slot-scope="scope"> - <el-tag type="success" v-if="scope.row.tname != null">02</el-tag> + <el-tag type="success" v-if="scope.row.tname != null" class="tag">02</el-tag> <span>{{scope.row.tname}}</span> </template> </el-table-column> - <el-table-column prop="pname" label="鎸囨爣鍚嶇О"> + <el-table-column prop="pfather" label="椤圭洰" width="200" :resizable="false"> <template slot-scope="scope"> - <el-tag type="info" color="#faf2ff" v-if="scope.row.pname != null"> - <span style="color: #e1affb">03</span> + <el-tag type="info" color="#faf2ff" v-if="scope.row.pfather != null" class="tag"> + <span style="color: #e1affb">03</span> </el-tag> + <span>{{scope.row.pfather}}</span> + </template> + </el-table-column> + <el-table-column prop="pname" label="鎸囨爣鍚嶇О" width="200" :resizable="false"> + <template slot-scope="scope"> <span>{{scope.row.pname}}</span> </template> </el-table-column> - <el-table-column prop="unit" label="鍗曚綅"></el-table-column> - <el-table-column prop="internal" label="鍐呮帶鍊�"></el-table-column> - <el-table-column prop="required" label="鏍囧噯鍊�"></el-table-column> + <el-table-column prop="unit" label="鍗曚綅" :resizable="false"></el-table-column> + <el-table-column prop="internal" label="鍐呮帶鍊�" :resizable="false"> + <template slot-scope="scope"> + <el-input v-model="scope.row.internal" + v-if="scope.row.pname != null" size="small" + @blur="updateVal(scope.row)"></el-input> + </template> + </el-table-column> + <el-table-column prop="required" label="鏍囧噯鍊�" :resizable="false"> + <template slot-scope="scope"> + <el-input v-model="scope.row.required" + v-if="scope.row.pname != null" size="small" + @blur="updateVal(scope.row)"></el-input> + </template> + </el-table-column> </el-table> </div> </div> @@ -38,31 +56,120 @@ export default { data() { return { + tnameWidth:200, + pfatherWidth:200, selects: [], + deleteList:[], + isAllSelect:false, } }, props:['tableData','tableType'], - created() {}, - mounted() {}, + created() { + }, + mounted() { + + }, methods: { - handleSelectionChange(val) { - this.selects = val; - }, - aaaa(){ - console.log("aaaaa----",this.targetData); + // 琛ㄦ牸鏍戝叏閮ㄩ�変腑閰嶇疆 + // 鍏ㄩ��/鍙栨秷閫夋搷浣� + selectAll(val) { + this.isAllSelect = !this.isAllSelect; + let data = this.tableData; + this.toggleSelect(data, this.isAllSelect, "all"); + }, + //閫夋嫨鏌愯 + selectTr(selection, row) { + console.log("sss---",selection,row); + this.$set(row, "isChecked", !row.isChecked); + this.$nextTick(() => { + this.isAllSelect = row.isChecked; + this.toggleSelect(row, row.isChecked, "tr"); + }); + }, + //閫掑綊瀛愮骇 + toggleSelect(data, flag, type) { + console.log("閫掑綊瀛愮骇---",data,flag,type); + if (type === "all") { + if (data.length > 0) { + data.forEach((item) => { + this.toggleSelection(item, flag); + if (item.children && item.children.length > 0) { + this.toggleSelect(item.children, flag, type); + } + }); + } + } else { + if (data.children && data.children.length > 0) { + data.children.forEach((item) => { + item.isChecked = !item.isChecked; + this.$refs.multipleTable.toggleRowSelection(item, flag); + this.toggleSelect(item, flag, type); + }); + } } + }, + //鏀瑰彉閫変腑 + toggleSelection(row, flag) { + console.log("鏀瑰彉閫変腑---",row,flag); + this.$set(row, "isChecked", flag); + this.$nextTick(() => { + if (flag) { + this.$refs.multipleTable.toggleRowSelection(row, flag); + } else { + this.$refs.multipleTable.clearSelection(); + } + }); + }, + handleSelectionChange(val) { + this.deleteList = []; + val.forEach((v) => { + this.searchIdFun(v); + }); + this.$emit("childData",this.deleteList); + }, + //閫掑綊鏌ユ壘閫変腑鏁版嵁id + searchIdFun(data){ + let obj = data; + if(obj.children != undefined){ + this.searchIdFun(obj.children); + }else{ + this.deleteList.push(obj.pid); + } + }, + // 琛ㄦ牸鏍戝叏閮ㄩ�変腑閰嶇疆 缁撴潫 + updateVal(row){ + this.$axios.post(this.$api.url.productWrite,{ + id : row.pid, + internal : row.internal, + required : row.required + }).then(res=>{ + this.$message.success(res.message); + }).catch(error=>{ + }) + }, } } </script> <style scoped> .expand-button { - cursor: pointer; - color: #1890ff; -} + cursor: pointer; + color: #1890ff; + } .standard { width: 100%; height: 100%; + } + .tag{ + line-height:24px; + text-align:center; + width:36px; + height:24px; + + border-radius:12px; + } + .tag:nth-child(1){ + margin-left:20px; } </style> <style> @@ -98,8 +205,8 @@ /* .standard .el-table__body { height: 100%; } */ - .standard .el-table .el-table__row:not([class*="el-table__row--level-"]) td:nth-child(3){ + /* .standard .el-table .el-table__row:not([class*="el-table__row--level-"]) td:nth-child(3){ padding-left: 23px !important; - } + } */ </style> \ No newline at end of file -- Gitblit v1.9.3