vue vue

vue vue

<template><div><el-table:data="tableData"ref="singleTable"highlight-current-rowborderrow-key="index"class="load_table"><el-table-column min-width="100%" label="序号" align="center"><template slot-scope="scope"> Step{{scope.$index+1}} </template></el-table-column><el-table-columnprop="id"min-width="100%"label="id"align="center"></el-table-column><el-table-columnlabel="名称"prop="nameList"min-width="100%"align="center"><template slot-scope="scope"><div @click="w)"><el-inputsize="mini"type="textarea"readonlyautosizev-model=&#w.nameList"placeholder=""/></div></template></el-table-column><el-table-columnprop="name"min-width="100%"label="姓名"align="center"></el-table-column><el-table-column label="操作" width="260" fixed="right"><template slot-scope="scope"><el-buttontype="text"size="small"icon="el-icon-plus"@click="w, scope.$index)">新增</el-button><el-buttontype="text"size="small"icon="el-icon-delete":disabled="tableData.length <= 1"@click="w, scope.$index)">删除</el-button><el-buttontype="text"size="small"icon="el-icon-document-copy"@click="w, scope.$index)">复制</el-button></template></el-table-column></el-table><!-- 树形选择 --><el-dialogtitle="选择"class="selectModal"v-if="TreesShow":visible.sync="TreesShow":close-on-click-modal="false"width="30%"><div class="treeList"><el-tree:data="dependancyItTree"ref="dataTrees"node-key="Code"show-checkboxdefault-expand-all:props="defaultProps":expand-on-click-node="false"highlight-current@check="getCurrentNode"></el-tree></div><span slot="footer" class="dialog-footer"><el-button @click="TreesShow = false" size="small">取消</el-button><el-button type="primary" @click="confirm" size="small">确认</el-button></span></el-dialog></div>
</template><script>
import Sortable from "sortablejs";export default {data() {return {tableData: [{id: 1,name: "123",nameList: null,nameCode: null,},{id: 2,name: "张三",nameList: null,nameCode: null,},{id: 3,name: "张三",nameList: null,nameCode: null,},{id: 4,name: "张三",nameList: null,nameCode: null,},{id: 6,name: "张三",nameList: null,nameCode: null,},{id: 7,name: "张三",nameList: null,nameCode: null,},],TreesShow: false,row: {},ruleForm: {menuIdsisEditor: null,},dependancyItTree: [{Children: [{Children: [{Children: [],Code: "2111011043270072",AddTime: "2021-11-01 10:43:27",AddUser: "SYSTEM",UpdateTime: "2021-11-01 10:43:27",DeleteState: 0,Modifier: "SYSTEM",LocationName: "BO-001 Company Code",ParentCode: "2111011043270070",NodeIndex: 3,IsLastNode: 1,NodeSort: 0,DataDomain: "Legal Data",DataCategory: "Reference Master Data",},{Children: [],Code: "2111011043270078",AddTime: "2021-11-01 10:43:27",AddUser: "SYSTEM",UpdateTime: "2021-11-01 10:43:27",DeleteState: 0,Modifier: "SYSTEM",LocationName: "BO-002 G/L Account Master",ParentCode: "2111011043270070",NodeIndex: 3,IsLastNode: 1,NodeSort: 0,DataDomain: "Legal Data",DataCategory: "Operation Master Data",},{Children: [],Code: "2111011043270084",AddTime: "2021-11-01 10:43:27",AddUser: "SYSTEM",UpdateTime: "2021-11-01 10:43:27",DeleteState: 0,Modifier: "SYSTEM",LocationName: "BO-003 Inspection Plan",ParentCode: "2111011043270070",NodeIndex: 3,IsLastNode: 1,NodeSort: 0,DataDomain: "Quality Data",DataCategory: "Transaction Data",},{Children: [],Code: "2111011043270090",AddTime: "2021-11-01 10:43:27",AddUser: "SYSTEM",UpdateTime: "2021-11-01 10:43:27",DeleteState: 0,Modifier: "SYSTEM",LocationName: "BO-004 MM Schedule Lines",ParentCode: "2111011043270070",NodeIndex: 3,IsLastNode: 1,NodeSort: 0,DataDomain: "Logistic Data",DataCategory: "Transaction Data",},{Children: [],Code: "2111011043270096",AddTime: "2021-11-01 10:43:27",AddUser: "SYSTEM",UpdateTime: "2021-11-01 10:43:27",DeleteState: 0,Modifier: "SYSTEM",LocationName: "BO-005 Vendor Master",ParentCode: "2111011043270070",NodeIndex: 3,IsLastNode: 1,NodeSort: 0,DataDomain: "Purchasing Data",DataCategory: "Operation Master Data",},{Children: [],Code: "2111011043270102",AddTime: "2021-11-01 10:43:27",AddUser: "SYSTEM",UpdateTime: "2021-11-01 10:43:27",DeleteState: 0,Modifier: "SYSTEM",LocationName: "BO-006 Material Master Data",ParentCode: "2111011043270070",NodeIndex: 3,IsLastNode: 1,NodeSort: 0,DataDomain: "Product Data",DataCategory: "Operation Master Data",},{Children: [],Code: "2111011043270108",AddTime: "2021-11-01 10:43:27",AddUser: "SYSTEM",UpdateTime: "2021-11-01 10:43:27",DeleteState: 0,Modifier: "SYSTEM",LocationName: "BO-007 Customer Demand",ParentCode: "2111011043270070",NodeIndex: 3,IsLastNode: 1,NodeSort: 0,DataDomain: "Business Partner Data",DataCategory: "Transaction Data",},{Children: [],Code: "2111011043270114",AddTime: "2021-11-01 10:43:27",AddUser: "SYSTEM",UpdateTime: "2021-11-01 10:43:27",DeleteState: 0,Modifier: "SYSTEM",LocationName: "BO-008 Customer Master Data",ParentCode: "2111011043270070",NodeIndex: 3,IsLastNode: 1,NodeSort: 0,DataDomain: "Sales Data",DataCategory: "Operation Master Data",},{Children: [],Code: "2111011043270120",AddTime: "2021-11-01 10:43:27",AddUser: "SYSTEM",UpdateTime: "2021-11-01 10:43:27",DeleteState: 0,Modifier: "SYSTEM",LocationName: "BO-009 Production Order",ParentCode: "2111011043270070",NodeIndex: 3,IsLastNode: 1,NodeSort: 0,DataDomain: "Manufacturing Data",DataCategory: "Transaction Data",},{Children: [],Code: "2111011043270126",AddTime: "2021-11-01 10:43:27",AddUser: "SYSTEM",UpdateTime: "2021-11-01 10:43:27",DeleteState: 0,Modifier: "SYSTEM",LocationName: "BO-010 Bill of Material",ParentCode: "2111011043270070",NodeIndex: 3,IsLastNode: 1,NodeSort: 0,DataDomain: "Engineering Data",DataCategory: "Transaction Data",},{Children: [],Code: "2111011043270132",AddTime: "2021-11-01 10:43:27",AddUser: "SYSTEM",UpdateTime: "2021-11-01 10:43:27",DeleteState: 0,Modifier: "SYSTEM",LocationName: "BO-011 WBS element",ParentCode: "2111011043270070",NodeIndex: 3,IsLastNode: 1,NodeSort: 0,DataDomain: "Project Management Data",DataCategory: "Transaction Data",},{Children: [],Code: "2111011043270138",AddTime: "2021-11-01 10:43:27",AddUser: "SYSTEM",UpdateTime: "2021-11-01 10:43:27",DeleteState: 0,Modifier: "SYSTEM",LocationName: "BO-012 Personnel Number",ParentCode: "2111011043270070",NodeIndex: 3,IsLastNode: 1,NodeSort: 0,DataDomain: "HR Data",DataCategory: "Transaction Data",},],Code: "2111011043270070",AddTime: "2021-11-01 10:43:27",AddUser: "SYSTEM",UpdateTime: "2021-11-03 16:10:57",DeleteState: 0,Modifier: "CAL3CNG",LocationName: "2570",ParentCode: "2111011043270069",NodeIndex: 2,IsLastNode: 0,NodeSort: 0,DataDomain: "",DataCategory: "",},],Code: "2111011043270069",AddTime: "2021-11-01 10:43:27",AddUser: "SYSTEM",UpdateTime: "2021-11-01 10:43:27",DeleteState: 0,Modifier: "SYSTEM",LocationName: "RBCC",ParentCode: "0",NodeIndex: 1,IsLastNode: 0,NodeSort: 0,DataDomain: null,DataCategory: null,},],defaultProps: {children: "Children",label: "LocationName",},};},components: {},mounted() {this.tableData = this.tableData.map((item, i) => {return {id: item.id,name: item.name,index: i,};});this.dragSort();},methods: {//表格拖动排序dragSort() {const el = this.$refs.singleTable.$el.querySelectorAll(".el-table__body-wrapper > table > tbody")[0];this.sortable = ate(el, {onEnd: (e) => {//onEnd是结束拖拽时触发，onUpdate是列表内元素顺序更新的时候触发，更多请看文末配置项//e.oldIndex为拖动一行原来的位置&#wIndex为拖动后新的位置const targetRow = this.tableData.splice(e.oldIndex, 1)[0];this.tableData.wIndex, 0, targetRow);// let dragId = this.wIndex].index;//拖动行的id// let oneId,twoId// //拖动行的前一行// if( this.wIndex-1]){// 	oneId = this.wIndex-1].index;// }else {// 	oneId = ""// }// //拖动行的后一行// if( this.wIndex+1]){// 	twoId = this.wIndex+1].index;}// else {// 	twoId = ""// }// console.log("拖动行："+dragId);// console.log("前一行："+oneId);// console.log("后一行："+twoId);//然后就可以发送请求了......},});},/*** 弹框*/tree(row) {this.TreesShow = w = row;if (row.nameCode) {let arrCode = row.nameCode.split(",");// 级联默认选中this.$nextTick(function () {arrCode.forEach((item) => {this.$refs.dataTrees.setChecked(item, true, false);});});}},/*** 确认事件* @type data Data Mapping 文本字段* @type it Dependancy 文本字段*/confirm(type) {this.tableData = this.tableData.map(item => {if (item.index === w.index) {w}return item})this.TreesShow = false;},/*** 树形选中回调*/getCurrentNode(nodeObj, SelectedObj) {let LocationName = [];if (SelectedObj.checkedNodes) {LocationName = SelectedObj.checkedNodes.map((item) => item.LocationName).join("; ");}uIdsisEditor = this.$CheckedKeys().concat(this.$HalfCheckedKeys());w = {...w,nameCode: uIdsisEditor.join(","),nameList: LocationName ? LocationName : "",};},/*** 新增* @row 当前列* @index 索引*/handAdd(row, index) {let obj = { id: null, name: "这是新增的", nameList: null, nameCode:null,index: this.tableData.length };this.tableData.splice(index + 1, 0, obj);},/*** 删除* @row 当前列* @index 索引*/handDelete(row, index) {this.tableData.splice(index, 1);},/*** 复制* @row 当前列* @index 索引*/handCopy(row, index) {let obj = { ...row };const newArr = at()newArr.splice(index + 1, 0, obj);this.tableData = newArr.map((item,index) => {return {...item,index,}})},},
};
</script><style lang="scss" scoped>
</style>