加强网站建设的建议,wordpress自动创建子站,网页游戏制作过程的,vue做单页面网站//分析原因是从列表中拿到的数据直接复制去修改就涉及到堆里变的内容是一样的#xff0c;直接复制其实只是把引用地址赋值给变量了#xff0c;解决方法是 浅复制和深复制。!-- 审批流程管理 --
templatediv stylefloat: left; width: 250px;backgr…//分析原因是从列表中拿到的数据直接复制去修改就涉及到堆里变的内容是一样的直接复制其实只是把引用地址赋值给变量了解决方法是 浅复制和深复制。!-- 审批流程管理 --
templatediv stylefloat: left; width: 250px;background: #fff;height: calc(100vh - 174px);!-- Tree name审批流程列表 :TreeTreedata/ --Tree name审批流程列表 :TreeTreedata childfunTreefun//divdiv refbodiv stylefloat: left; width: calc(100% - 260px);margin-left: 10px;background: #fff;height: calc(100vh - 174px);div stylefont-size: 14px; font-weight: 600; height: 50px; border-bottom: 1px solid #eee;line-height: 50px; padding-left: 10px; 审批流程设置 - 提审合同范本/divdiv refelstepel-row stylefont-size: 14px; width: calc(100% - 20px);margin-top: 10px;padding: 10px 0px; margin-left: 10px;border: 1px solid #e0e0e0 ; line-height: 30px;el-col :span24el-steps :active100 align-center el-step :titleitem.nodeName v-for(item , index) in tableData :keyindextemplate v-slot:titlespan stylecolor: #444;{{ item.nodeName }}/span /templatetemplate v-slot:descriptionp v-forit in item.list :keyit stylecolor: #999;span v-ifit.type 1{{ it.receiverPostNames }}/span span v-else{{ getIntDictOptions(sl_system_person_type).find(its its.value it.receiverProject)?.label }}/span /p/template/el-step!-- el-step titleStep 2 descriptionSome description /el-step titleStep 3 descriptionSome description / --/el-steps/el-col/el-row/divel-table :datatableData stylewidth: calc(100% - 20px); margin-top: 10px; margin-left: 10px; overflow: auto; :style{height:tableheightpx}el-table-column show-overflow-tooltiptrue propname width150 typeindex label排序 /el-table-column show-overflow-tooltiptrue propnodeName label节点名称 /el-table-column show-overflow-tooltiptrue proplist label节点人员 template #defaultscope div v-for(item ,inx ) in scope.row?.list :keyitem styleline-height: 30px; div v-ifinx scope.row?.list.length - 1 styleborder-bottom: 1px solid #F1F1F1;div v-ifitem.type 1 {{ item.receiverPostNames }}/div div v-else{{ getIntDictOptions(sl_system_person_type).find(it it.value item.receiverProject)?.label }}!-- {{ item.receiverProject }} --/div /divdiv v-elsediv v-ifitem.type 1 {{ item.receiverPostNames }}/div div v-else{{ getIntDictOptions(sl_system_person_type).find(it it.value item.receiverProject)?.label }}!-- {{ item.receiverProject }} --/div /div/div/template/el-table-column el-table-column show-overflow-tooltiptrue propname label人员类型 template #defaultscope div v-for(it , inx ) in scope.row.list :keyit styleline-height: 30px;div v-ifinx scope.row?.list.length - 1 styleborder-bottom: 1px solid #F1F1F1;{{ getIntDictOptions(sl_system_operate_type).find(item item.value it.type)?.label }}/divdiv v-else{{ getIntDictOptions(sl_system_operate_type).find(item item.value it.type)?.label }}/div/div/template/el-table-columnel-table-column show-overflow-tooltiptrue propdate label操作 width150 template #defaultscopespan v-ifscope.row.nodeName 发起人 stylecolor: #1890FF;cursor: pointer; clickbjfqr(scope.row.id) 编辑emsp;emsp;/span span v-ifscope.row.nodeName ! 完成scope.row.nodeName ! 发起人 stylecolor: #1890FF;cursor: pointer; clickxgjdfun(scope.row) 编辑emsp;emsp;/span span v-ifscope.row.nodeName ! 完成scope.row.nodeName ! 发起人 stylecolor: #1890FF;cursor: pointer; clickdelfun(scope.row)emsp;删除emsp;/span/template/el-table-column/el-tableel-rowel-col :span24el-button typeprimary plain stylewidth: calc(100% - 20px); margin-left: 10px; margin-top: 10px;border: 1px dashed; clicknewfun()emsp;新增节点/el-button/el-col/el-row/divel-dialogv-modeldialognewtitle新增节点width30% el-row stylefont-size: 14px; width: calc(100% - 20px);margin-left: 10px; margin-top: 10px;border: 1px solid #e0e0e0 ; line-height: 50px;el-col :span6emsp;*节点名称:/el-colel-col :span18 el-input v-modeljdpar.nodeName placeholder请输入节点名称 style width: calc(100% - 40px); margin-left: 8px; sizesmall//el-col/el-rowel-row stylefont-size: 14px; width: calc(100% - 20px);margin-left: 10px; margin-top: 10px;border: 1px solid #e0e0e0 ; line-height: 50px;el-col :span6emsp;*人员类型:/el-colel-col :span18 el-select v-modeljdpar.approversCreateReqVOList[0].type classm-2 placeholder指定岗位 sizesmall changezdgwfunel-optionv-foritem in getIntDictOptions(sl_system_operate_type):keyitem.value:labelitem.label:valueitem.value//el-select/el-colel-col :span6emsp;*节点人员:/el-colel-col :span6 v-showiszdgw trueel-select v-modelbmop classm-2 placeholder请选择部门 sizesmall changebmidfunel-optionv-foritem in bmops:keyitem.value:labelitem.label:valueitem.value//el-select/el-colel-col :span6 v-showiszdgw trueel-select v-modelgwop classm-2 placeholder请选择岗位 sizesmall changegwidfunel-optionv-foritem in gwops:keyitem.value:labelitem.label:valueitem.value//el-select/el-colel-col :span6 v-showiszdgw trueel-select v-modeluser classm-2 placeholder请选择人员 sizesmallel-optionv-foritem in users:keyitem.value:labelitem.label:valueitem.value//el-select/el-colel-col :span18 v-showiszdgw false el-button sizesmall stylemargin: 0px 10px; v-for(dict,index) in getIntDictOptions(sl_system_person_type) :keydict clickkcfun(index,dict.value) :typegsxmid dict.value?primary: plain{{dict.label}}/el-button/el-col/el-rowtemplate #footerspan classdialog-footerel-button clickdialognew false取消/el-buttonel-button typeprimary clicknewjd确定/el-button/span/template/el-dialogel-dialogv-modeldialogxgtitle修改节点width30% el-row stylefont-size: 14px; width: calc(100% - 20px);margin-left: 10px; margin-top: 10px;border: 1px solid #e0e0e0 ; line-height: 50px;el-col :span6emsp;节点名称:/el-colel-col :span18 el-input v-modelbjrow.nodeName placeholder请输入节点名称 style width: calc(100% - 40px); margin-left: 8px; sizesmall//el-col/el-rowel-row stylefont-size: 14px; width: calc(100% - 20px);margin-left: 10px; margin-top: 10px;border: 1px solid #e0e0e0 ; line-height: 50px;el-col :span6emsp;人员类型:/el-colel-col :span18 el-select v-modelbjrow.list[0].type classm-2 placeholder指定岗位 sizesmall changezdgwfunxgel-optionv-foritem in getIntDictOptions(sl_system_operate_type):keyitem.value:labelitem.label:valueitem.value//el-select/el-colel-col :span6emsp;*节点人员:/el-colel-col :span6 v-showiszdgw trueel-select v-modelbmop classm-2 placeholder请选择部门 sizesmall changebmidfunel-optionv-foritem in bmops:keyitem.value:labelitem.label:valueitem.value//el-select/el-colel-col :span6 v-showiszdgw trueel-select v-modelgwop classm-2 placeholder请选择岗位 sizesmall changegwidfunel-optionv-foritem in gwops:keyitem.value:labelitem.label:valueitem.value//el-select/el-colel-col :span6 v-showiszdgw trueel-select v-modeluser classm-2 placeholder请选择人员 sizesmallel-optionv-foritem in users:keyitem.value:labelitem.label:valueitem.value //el-select/el-colel-col :span18 v-showiszdgw falseel-button sizesmall stylemargin: 0px 10px; v-for(dict,index) in getIntDictOptions(sl_system_person_type) :keydict clickbjkcfun(index,dict.value) :typebjrow?.list[0].receiverProject dict.value?primary: plain{{dict.label}}/el-button/el-col/el-rowtemplate #footerspan classdialog-footerel-button clickdialogxg false取消/el-buttonel-button typeprimary clickbjdifun确定/el-button/span/template/el-dialogel-dialogv-modeldialogdeltitle温馨提示width30% br/br/span emsp;ensp; el-icon color#F00CircleCloseFilled //el-icon 确定要删除span stylecolor: #028CFF;当前节点/span 吗/spanbr/br/template #footerspan classdialog-footerel-button clickdialogdel false取消/el-buttonel-button typeprimary clickdeldofun确定/el-button/span/template/el-dialogel-dialogv-modeldialogfqrtitle编辑发起人width60% el-table :datatablefqr stylewidth: calc(100% - 20px); margin-left: 10px; height: calc(100vh - 580px);el-table-column show-overflow-tooltiptrue typeindex width150 label序号/el-table-column show-overflow-tooltiptrue propreceiverPostNames label节点人员 template #defaultscope divspan v-ifscope.row.type 1{{ scope.row.receiverPostNames }}/span span v-else{{ getIntDictOptions(sl_system_person_type).find(it it.value scope.row.receiverProject)?.label }}/span /div/template/el-table-column el-table-column show-overflow-tooltiptrue propname label人员类型 template #defaultscope span {{ getIntDictOptions(sl_system_operate_type).find(item item.value scope.row.type)?.label }}/span/template/el-table-columnel-table-column show-overflow-tooltiptrue propdate label操作 width150 template #defaultscope span stylecolor: #1890FF;cursor: pointer; clickxgryfun(scope.row) 编辑emsp;emsp;/span span stylecolor: #1890FF;cursor: pointer; clickdelryfun(scope.row)emsp;删除emsp;/span/template/el-table-column/el-tableel-button typeprimary plain stylewidth: calc(100% - 20px); margin-left: 10px; margin-top: 10px;border: 1px dashed; clicknewfqrfun()emsp;新增人员/el-buttontemplate #footerspan classdialog-footerel-button clickfqrfun取消/el-buttonel-button typeprimary clickfqrfun确定/el-button/span/template/el-dialogel-dialogv-modeldialogrytitle新增人员width30% el-row stylefont-size: 14px; width: calc(100% - 20px);margin-left: 10px; margin-top: 10px;border: 1px solid #e0e0e0 ; line-height: 50px;el-col :span6emsp;人员类型:/el-colel-col :span18 el-select v-modelbjrow.type classm-2 placeholder指定岗位 sizesmall changezdgwfunel-optionv-foritem in getIntDictOptions(sl_system_operate_type):keyitem.value:labelitem.label:valueitem.value//el-select/el-colel-col :span6emsp;*节点人员:/el-colel-col :span6 v-showiszdgw trueel-select v-modelbmop classm-2 placeholder请选择部门 sizesmall changebmidfunel-optionv-foritem in bmops:keyitem.value:labelitem.label:valueitem.value//el-select/el-colel-col :span6 v-showiszdgw trueel-select v-modelgwop classm-2 placeholder请选择岗位 sizesmall changegwidfunel-optionv-foritem in gwops:keyitem.value:labelitem.label:valueitem.value//el-select/el-colel-col :span6 v-showiszdgw trueel-select v-modeluser classm-2 placeholder请选择人员 sizesmallel-optionv-foritem in users:keyitem.value:labelitem.label:valueitem.value//el-select/el-colel-col :span18 v-showiszdgw falseel-button sizesmall stylemargin: 0px 10px; v-for(dict,index) in getIntDictOptions(sl_system_person_type) :keydict clickkcfun(index,dict.value) :typegsxmid dict.value?primary: plain{{dict.label}}/el-button/el-col/el-rowtemplate #footerspan classdialog-footerel-button clickdialogry false取消/el-buttonel-button typeprimary clicknewryqdfun确定/el-button/span/template/el-dialogel-dialogv-modeldialogxgrytitle修改人员width30% el-row stylefont-size: 14px; width: calc(100% - 20px);margin-left: 10px; margin-top: 10px;border: 1px solid #e0e0e0 ; line-height: 50px;el-col :span6emsp;人员类型:/el-colel-col :span18 el-select v-modelbjrow.type classm-2 placeholder指定岗位 sizesmall changezdgwfunxgel-optionv-foritem in getIntDictOptions(sl_system_operate_type):keyitem.value:labelitem.label:valueitem.value//el-select/el-colel-col :span6emsp;*节点人员:/el-colel-col :span6 v-showiszdgw trueel-select v-modelbmop classm-2 placeholder请选择部门 sizesmall changebmidfunel-optionv-foritem in bmops:keyitem.value:labelitem.label:valueitem.value//el-select/el-colel-col :span6 v-showiszdgw trueel-select v-modelgwop classm-2 placeholder请选择岗位 sizesmall changegwidfunel-optionv-foritem in gwops:keyitem.value:labelitem.label:valueitem.value//el-select/el-colel-col :span6 v-showiszdgw trueel-select v-modeluser classm-2 placeholder请选择人员 sizesmallel-optionv-foritem in users:keyitem.value:labelitem.label:valueitem.value//el-select/el-colel-col :span18 v-showiszdgw falseel-button sizesmall stylemargin: 0px 10px; v-for(dict,index) in getIntDictOptions(sl_system_person_type) :keydict clickbjryfun(index,dict.value) :typebjrow.receiverProject dict.value?primary: plain{{dict.label}}/el-button/el-col/el-rowtemplate #footerspan classdialog-footerel-button clickdialogxgry false取消/el-buttonel-button typeprimary clickbjrydifun确定/el-button/span/template/el-dialogel-dialogv-modeldialogdelrytitle温馨提示width30% br/br/span emsp;ensp; el-icon color#F00CircleCloseFilled //el-icon 确定要删除span stylecolor: #028CFF;ensp;当前接收人员ensp;/span 吗/spanbr/br/template #footerspan classdialog-footerel-button clickdialogdelry false取消/el-buttonel-button typeprimary clickdelryqfun确定/el-button/span/template/el-dialog
/template
script langts setup
import Tree from ./Tree.vue
import { ref ,onMounted} from vue
import * as jk from /api/DigitalManagementSystem/systemManagement
import { getIntDictOptions } from /utils/dict//approversupdateconst xgryfun async (row){bjrow.value {...row};if(row.type 1){iszdgw.value true;}else{iszdgw.value false;}const getDepts await jk.notificationtypegetDepts();bmops.value await jk.replaceidname(getDepts);console.log(bmops.value);bmop.value row.receiverPost.split(,)[0]*1;const getPostsByDeptId await jk.notificationtypegetPostsByDeptId({id:row.receiverPost.split(,)[0]*1});gwops.value await jk.replaceidname(getPostsByDeptId);gwop.value row.receiverPost.split(,)[1]*1;const UsersByPostId await jk.getUsersByPostId({id:row.receiverPost.split(,)[1]*1});users.value await jk.replaceidnickname(UsersByPostId);user.value row.receiverPost.split(,)[2]*1;console.log(row);dialogxgry.value true;}
const dialogxgry ref(false);
const bjrydifun async (){bjrow.value.receiverPost bmop.value,gwop.value,user.value;const data await jk.approversupdate(bjrow.value);bjfqr(ryrowid);getdata(deptId);dialogxgry.value false;
}const dialogdelry ref(false);
var delid ;
const delryfun async (row) {delid row.id;dialogdelry.value true;}
const delryqfun async (){const data await jk.approversdelete({id:delid});bjfqr(ryrowid);getdata(deptId);dialogdelry.value false;
}const dialogry ref(false);
const newfqrfun (){dialogry.value true;
}
const newryqdfunasync (){let par {nodeId:ryrowid,type:bjrow.value.type,receiverPost:bmop.value,gwop.value,user.value,receiverProject: gsxmid.value,}
const data await jk.approverscreate(par);
console.log(data);
bjfqr(ryrowid);
getdata(deptId);
dialogry.value false;
}const tablefqr ref([]);
const dialogfqr ref(false);
const fqrfunasync (){getdata(deptId);dialogfqr.value false;
}var ryrowid ;
const bjfqrasync (rowid){ryrowid rowid;tablefqr.value await jk.approversgetByNodeId({nodeId:rowid});dialogfqr.value true;
}
const bjkcfun(i,val){bjrow.value.list[0].receiverProject val;
}
const bjryfun(i,val){bjrow.value.receiverProject val;
}
const zdgwfunxg(val){if(val 1){iszdgw.value true;}else{iszdgw.value false;}
}const bjdifun async (){let par {id:bjrow.value.id,processId:bjrow.value.processId,nodeName:bjrow.value.nodeName,approversUpdateReqVOS:[{nodeId:bjrow.value.list[0].nodeId,type:bjrow.value.list[0].type,receiverPost:bmop.value,gwop.value,user.value,receiverProject:bjrow.value.list[0].receiverProject,id:bjrow.value.list[0].id,}]}const operateupdate await jk.nodeupdate(par);console.log(operateupdate);dialogxg.value false;getdata(deptId);
}const bjrow ref({})const xgjdfunasync (row){let asd {...row};asd.list {...toRaw(asd.list)};console.log(asd);bjrow.value JSON.parse(JSON.stringify(asd));if(row.list[0].type 1){iszdgw.value true;}else{iszdgw.value false;}const getDepts await jk.notificationtypegetDepts();bmops.value await jk.replaceidname(getDepts);console.log(bmops.value);bmop.value row.list[0].receiverPost.split(,)[0]*1;const getPostsByDeptId await jk.notificationtypegetPostsByDeptId({id:row.list[0].receiverPost.split(,)[0]*1});gwops.value await jk.replaceidname(getPostsByDeptId);gwop.value row.list[0].receiverPost.split(,)[1]*1;const UsersByPostId await jk.getUsersByPostId({id:row.list[0].receiverPost.split(,)[1]*1});users.value await jk.replaceidnickname(UsersByPostId);user.value row.list[0].receiverPost.split(,)[2]*1;dialogxg.value true;
}var rowid ;
const deldofun async (){await jk.nodedelete({id:rowid});dialogdel.value false;getdata(deptId);
}const bmops ref([])
const bmop ref()const gwops ref([])
const gwop ref()const users ref([])
const user ref()
var gsxmid ref(getIntDictOptions(sl_system_person_type)[0].value);
const kcfun(i,val){gsxmid.value val;
}const jdpar ref({processId:,nodeName:,sortOrder:0,approversCreateReqVOList:[{nodeId:,type:1,receiverPost:bmop.value,gwop.value,user.value,receiverProject: gsxmid.value,}]
})
const newjd async (){jdpar.value.approversCreateReqVOList[0].receiverPost bmop.value,gwop.value,user.value;jdpar.value.approversCreateReqVOList[0].receiverProject gsxmid.value;jdpar.value.processId deptId;const data await jk.nodecreate(jdpar.value);getdata(deptId);dialognew.value false;
}
const iszdgw ref(true);
const zdgwfun(val){if(val 1){iszdgw.value true;}else{iszdgw.value false;}
}const bmidfunasync (val){let getPostsByDeptId await jk.notificationtypegetPostsByDeptId({id:val});gwops.value await jk.replaceidname(getPostsByDeptId);gwop.value gwops.value[0].value *1;gwidfun(gwop.value);
}
const gwidfunasync (val){let UsersByPostId await jk.getUsersByPostId({id:val});users.value await jk.replaceidnickname(UsersByPostId);user.value users.value[0].value*1;
}const Treedata: Tree[] ref();
const tableData ref([]);
const dialognew ref(false);
const newfun(){jdpar.value.approversCreateReqVOList[0].type 1;iszdgw.value true;innitxl();dialognew.value true;
}const dialogxg ref(false);const dialogdel ref(false);
var rowid ;
const delfun(row){rowid row.id;dialogdel.value true;}var deptId
const Treefun(id){deptId id;console.log(---------id)getdata(deptId);
}const elstep ref(null)
const bodiv ref(null)
const tableheight ref(500);onMounted(async () {const data await jk.typetypeTree();
// console.log(data);Treedata.value jk.replaceNameWithLabel(data);deptId Treedata.value[0].children[0].id;getdata(deptId);innitxl();window.onresize function () {let headerHeight bodiv.value.clientHeight;let tagsHeight elstep.value.clientHeight;tableheight.value headerHeight - tagsHeight - 120;}})
const innitxl async (){const getDepts await jk.notificationtypegetDepts();bmops.value await jk.replaceidname(getDepts);console.log(bmops.value);bmop.value bmops.value[0].value;const getPostsByDeptId await jk.notificationtypegetPostsByDeptId({id:bmops.value[0].value});gwops.value await jk.replaceidname(getPostsByDeptId);gwop.value gwops.value[0].value;const UsersByPostId await jk.getUsersByPostId({id:gwops.value[0].value});users.value await jk.replaceidnickname(UsersByPostId);user.value users.value[0].value;jdpar.value.approversCreateReqVOList[0].receiverPost bmop.value,gwop.value,user.value;}const getdataasync (id){console.log(---------)tableData.value await jk.nodelistByTypeId({id:id});console.log(tableData.value)}
onUpdated(() {let headerHeight bodiv.value.clientHeight;let tagsHeight elstep.value.clientHeight;tableheight.value headerHeight - tagsHeight - 120;// 在组件更新之后执行的代码});interface Tree {id: numberlabel: stringchildren?: Tree[]
}/script//浅复制{...data}
//深复制 bjrow.value JSON.parse(JSON.stringify(asd));
