在vue3项目中编辑的时候,解决对话框里边的数据和列表中的数据联动了。深复制

//分析原因是从列表中拿到的数据直接复制去修改就涉及到堆里变的内容是一样的,直接复制其实只是把引用地址赋值给变量了,解决方法是 浅复制和深复制。



<!-- 审批流程管理 -->
<template>
  <div style="float: left; width: 250px;background: #fff;height: calc(100vh - 174px);">
    <!-- <Tree name="审批流程列表" :Tree="Treedata"/> -->
    <Tree name="审批流程列表"  :Tree="Treedata" @childfun="Treefun"/>
  </div>

  <div   ref="bodiv" style="float: left; width: calc(100% - 260px);margin-left: 10px;background: #fff;height:  calc(100vh - 174px);">
    <div style="font-size: 14px; font-weight: 600; height: 50px; border-bottom: 1px solid #eee;line-height: 50px; padding-left: 10px;">  
      审批流程设置 - 提审合同范本
    </div>
        <div ref="elstep">
              <el-row    style="font-size: 14px; width: calc(100% - 20px);margin-top: 10px;padding: 10px 0px; margin-left: 10px;border: 1px solid #e0e0e0 ; line-height: 30px;">
                <el-col :span="24">
                    <el-steps :active="100" align-center  >
                          <el-step :title="item.nodeName"  v-for="(item , index) in tableData"  :key="index">
                            <template v-slot:title>
                                  <span style="color: #444;">
                                    {{ item.nodeName }}
                                  </span>   
                              
                            </template>
                            <template v-slot:description>
                                <p v-for="it in item.list" :key="it" style="color: #999;">
                                  <span v-if="it.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 title="Step 2" description="Some description" />
                          <el-step title="Step 3" description="Some description" /> -->
                    </el-steps>

                  
                </el-col>
              </el-row>
        </div>
    <el-table :data="tableData"  style="width: calc(100% - 20px); margin-top: 10px; margin-left: 10px; overflow: auto;"  :style="{height:tableheight+'px'}">
       
        <el-table-column show-overflow-tooltip="true" prop="name" width="150" type="index" label="排序"  />
        <el-table-column show-overflow-tooltip="true" prop="nodeName" label="节点名称" />
        <el-table-column show-overflow-tooltip="true" prop="list" label="节点人员" >
          <template #default="scope" >
                <div v-for="(item ,inx ) in scope.row?.list"  :key="item" style="line-height: 30px;" >
                  <div v-if="inx <  scope.row?.list.length - 1" style="border-bottom: 1px solid #F1F1F1;">
                    <div v-if="item.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 v-else>
                    <div v-if="item.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-tooltip="true" prop="name" label="人员类型" >
          <template #default="scope" >
                <div v-for="(it , inx ) in scope.row.list"  :key="it"  style="line-height: 30px;">
                  <div v-if="inx <  scope.row?.list.length - 1" style="border-bottom: 1px solid #F1F1F1;">
                     {{ getIntDictOptions('sl_system_operate_type').find(item => item.value === it.type)?.label }}
                  </div>
                   <div v-else>{{ getIntDictOptions('sl_system_operate_type').find(item => item.value === it.type)?.label }}</div>
                </div>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip="true" prop="date" label="操作" width="150" >
          <template  #default="scope">
            <span v-if="scope.row.nodeName == '发起人'" style="color: #1890FF;cursor: pointer;" @click="bjfqr(scope.row.id)" >编辑&emsp;&emsp;</span> 
            <span v-if="scope.row.nodeName != '完成'&&scope.row.nodeName != '发起人'" style="color: #1890FF;cursor: pointer;" @click="xgjdfun(scope.row)" >编辑&emsp;&emsp;</span> 
            <span v-if="scope.row.nodeName != '完成'&&scope.row.nodeName != '发起人'" style="color: #1890FF;cursor: pointer;" @click="delfun(scope.row)">&emsp;删除&emsp;</span>
          </template>
        </el-table-column>
      </el-table>

    <el-row>
    <el-col :span="24">
      <el-button type="primary" plain style="width: calc(100% - 20px); margin-left: 10px; margin-top: 10px;border: 1px dashed;" @click="newfun()">+&emsp;新增节点</el-button>
    </el-col>
    </el-row>
  </div>
  
  
  <el-dialog
    v-model="dialognew"
    title="新增节点"
    width="30%" >

    <el-row style="font-size: 14px; width: calc(100% - 20px);margin-left: 10px; margin-top: 10px;border: 1px solid #e0e0e0 ; line-height: 50px;">
      <el-col :span="6">&emsp;*节点名称:</el-col>
      <el-col :span="18"> 
        <el-input v-model="jdpar.nodeName" placeholder="请输入节点名称"  style=" width: calc(100% - 40px); margin-left: 8px; " size="small"/>
      </el-col>
    </el-row>

    <el-row style="font-size: 14px; width: calc(100% - 20px);margin-left: 10px; margin-top: 10px;border: 1px solid #e0e0e0 ; line-height: 50px;">
      <el-col :span="6">&emsp;*人员类型:</el-col>
      <el-col :span="18"> 
        <el-select v-model="jdpar.approversCreateReqVOList[0].type" class="m-2" placeholder="指定岗位" size="small" @change="zdgwfun">
          <el-option
            v-for="item in getIntDictOptions('sl_system_operate_type')"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-col>
      <el-col :span="6">&emsp;*节点人员:</el-col>
      <el-col :span="6" v-show="iszdgw == true">
        <el-select v-model="bmop" class="m-2" placeholder="请选择部门" size="small"  @change="bmidfun">
          <el-option
            v-for="item in bmops"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-col>
      <el-col :span="6" v-show="iszdgw == true">
        <el-select v-model="gwop" class="m-2" placeholder="请选择岗位" size="small"  @change="gwidfun">
          <el-option
            v-for="item in gwops"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-col>
      <el-col :span="6" v-show="iszdgw == true">
        <el-select v-model="user" class="m-2" placeholder="请选择人员" size="small">
          <el-option
            v-for="item in users"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-col>
      <el-col :span="18" v-show="iszdgw == false" >
       <el-button  size="small"  style="margin: 0px 10px;" v-for="(dict,index) in getIntDictOptions('sl_system_person_type')" :key="dict"  @click="kcfun(index,dict.value)"  :type="gsxmid == dict.value?'primary':''" plain>{{dict.label}}</el-button>
        
      </el-col>
    </el-row>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialognew = false">取消</el-button>
        <el-button type="primary" @click="newjd">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>


  
  <el-dialog
    v-model="dialogxg"
    title="修改节点"
    width="30%" >

    <el-row style="font-size: 14px; width: calc(100% - 20px);margin-left: 10px; margin-top: 10px;border: 1px solid #e0e0e0 ; line-height: 50px;">
      <el-col :span="6">&emsp;节点名称:</el-col>
      <el-col :span="18"> 
        <el-input v-model="bjrow.nodeName" placeholder="请输入节点名称"  style=" width: calc(100% - 40px); margin-left: 8px; " size="small"/>
      </el-col>
    </el-row>
    <el-row style="font-size: 14px; width: calc(100% - 20px);margin-left: 10px; margin-top: 10px;border: 1px solid #e0e0e0 ; line-height: 50px;">
      <el-col :span="6">&emsp;人员类型:</el-col>
      <el-col :span="18"> 
        <el-select v-model="bjrow.list[0].type" class="m-2" placeholder="指定岗位" size="small" @change="zdgwfunxg">
          <el-option
            v-for="item in getIntDictOptions('sl_system_operate_type')"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-col>
      <el-col :span="6">&emsp;*节点人员:</el-col>
      <el-col :span="6" v-show="iszdgw == true">
        <el-select v-model="bmop" class="m-2" placeholder="请选择部门" size="small"  @change="bmidfun">
          <el-option
            v-for="item in bmops"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-col>
      <el-col :span="6" v-show="iszdgw == true">
        <el-select v-model="gwop" class="m-2" placeholder="请选择岗位" size="small" @change="gwidfun">
          <el-option
            v-for="item in gwops"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-col>
      <el-col :span="6" v-show="iszdgw == true">
        <el-select v-model="user" class="m-2" placeholder="请选择人员" size="small">
          <el-option
            v-for="item in users"
            :key="item.value"
            :label="item.label"
            :value="item.value"   
          />
        </el-select>
      </el-col>
      <el-col :span="18" v-show="iszdgw == false">
       <el-button  size="small"  style="margin: 0px 10px;"  v-for="(dict,index) in getIntDictOptions('sl_system_person_type')" :key="dict"  @click="bjkcfun(index,dict.value)"  :type="bjrow?.list[0].receiverProject == dict.value?'primary':''" plain>{{dict.label}}</el-button>
        
      </el-col>
      
    </el-row>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogxg = false">取消</el-button>
        <el-button type="primary" @click="bjdifun">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>

  
  <el-dialog
    v-model="dialogdel"
    title="温馨提示!"
    width="30%" >
    <br/><br/>
    <span >&emsp;&ensp; <el-icon color="#F00"><CircleCloseFilled /></el-icon> 确定要删除<span style="color: #028CFF;">当前节点</span> 吗?</span>
    <br/><br/>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogdel = false">取消</el-button>
        <el-button type="primary" @click="deldofun">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>

  
  <el-dialog
    v-model="dialogfqr"
    title="编辑发起人"
    width="60%" >
          <el-table :data="tablefqr" style="width: calc(100% - 20px); margin-left: 10px;  height: calc(100vh - 580px);">
            
            <el-table-column show-overflow-tooltip="true" type="index" width="150" label="序号"/>

            <el-table-column show-overflow-tooltip="true" prop="receiverPostNames" label="节点人员" >
                    <template #default="scope" >
                      <div>
                          <span v-if="scope.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-tooltip="true" prop="name" label="人员类型" >
              <template #default="scope" >
                <span >{{ getIntDictOptions('sl_system_operate_type').find(item => item.value === scope.row.type)?.label }}</span>
              </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip="true" prop="date" label="操作" width="150" >
              <template #default="scope" >
                <span style="color: #1890FF;cursor: pointer;" @click="xgryfun(scope.row)" >编辑&emsp;&emsp;</span> <span style="color: #1890FF;cursor: pointer;" @click="delryfun(scope.row)">&emsp;删除&emsp;</span>
              </template>
            </el-table-column>
          </el-table>
       
          <el-button type="primary" plain style="width: calc(100% - 20px); margin-left: 10px; margin-top: 10px;border: 1px dashed;" @click="newfqrfun()">+&emsp;新增人员</el-button>
    
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="fqrfun">取消</el-button>
        <el-button type="primary" @click="fqrfun">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>





  <el-dialog
    v-model="dialogry"
    title="新增人员"
    width="30%" >
    <el-row style="font-size: 14px; width: calc(100% - 20px);margin-left: 10px; margin-top: 10px;border: 1px solid #e0e0e0 ; line-height: 50px;">
      <el-col :span="6">&emsp;人员类型:</el-col>
      <el-col :span="18"> 
        <el-select v-model="bjrow.type" class="m-2" placeholder="指定岗位" size="small" @change="zdgwfun">
          <el-option
            v-for="item in getIntDictOptions('sl_system_operate_type')"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-col>
      <el-col :span="6">&emsp;*节点人员:</el-col>
      <el-col :span="6" v-show="iszdgw == true">
        <el-select v-model="bmop" class="m-2" placeholder="请选择部门" size="small"  @change="bmidfun">
          <el-option
            v-for="item in bmops"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-col>
      <el-col :span="6" v-show="iszdgw == true">
        <el-select v-model="gwop" class="m-2" placeholder="请选择岗位" size="small"  @change="gwidfun">
          <el-option
            v-for="item in gwops"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-col>
      <el-col :span="6" v-show="iszdgw == true">
        <el-select v-model="user" class="m-2" placeholder="请选择人员" size="small">
          <el-option
            v-for="item in users"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-col>
      <el-col :span="18" v-show="iszdgw == false">
       <el-button  size="small"  style="margin: 0px 10px;" v-for="(dict,index) in getIntDictOptions('sl_system_person_type')" :key="dict"  @click="kcfun(index,dict.value)"  :type="gsxmid == dict.value?'primary':''" plain>{{dict.label}}</el-button>
        
      </el-col>
    </el-row>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogry = false">取消</el-button>
        <el-button type="primary" @click="newryqdfun">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>

  
  <el-dialog
    v-model="dialogxgry"
    title="修改人员"
    width="30%" >
    <el-row style="font-size: 14px; width: calc(100% - 20px);margin-left: 10px; margin-top: 10px;border: 1px solid #e0e0e0 ; line-height: 50px;">
      <el-col :span="6">&emsp;人员类型:</el-col>
      <el-col :span="18"> 
        <el-select v-model="bjrow.type" class="m-2" placeholder="指定岗位" size="small" @change="zdgwfunxg">
          <el-option
            v-for="item in getIntDictOptions('sl_system_operate_type')"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-col>
      <el-col :span="6">&emsp;*节点人员:</el-col>
      <el-col :span="6" v-show="iszdgw == true">
        <el-select v-model="bmop" class="m-2" placeholder="请选择部门" size="small"  @change="bmidfun">
          <el-option
            v-for="item in bmops"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-col>
      <el-col :span="6" v-show="iszdgw == true">
        <el-select v-model="gwop" class="m-2" placeholder="请选择岗位" size="small" @change="gwidfun">
          <el-option
            v-for="item in gwops"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-col>
      <el-col :span="6" v-show="iszdgw == true">
        <el-select v-model="user" class="m-2" placeholder="请选择人员" size="small">
          <el-option
            v-for="item in users"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-col>
      <el-col :span="18" v-show="iszdgw == false">
       <el-button  size="small"  style="margin: 0px 10px;"  v-for="(dict,index) in getIntDictOptions('sl_system_person_type')" :key="dict"  @click="bjryfun(index,dict.value)"  :type="bjrow.receiverProject == dict.value?'primary':''" plain>{{dict.label}}</el-button>
        
      </el-col>
      
    </el-row>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogxgry = false">取消</el-button>
        <el-button type="primary" @click="bjrydifun">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>


  <el-dialog
    v-model="dialogdelry"
    title="温馨提示!"
    width="30%" >
    <br/><br/>
    <span >&emsp;&ensp; <el-icon color="#F00"><CircleCloseFilled /></el-icon> 确定要删除<span style="color: #028CFF;">&ensp;当前接收人员&ensp;</span> 吗?</span>
    <br/><br/>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogdelry = false">取消</el-button>
        <el-button type="primary" @click="delryqfun">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import Tree from './Tree.vue'
import { ref ,onMounted} from 'vue'
import * as jk from '@/api/DigitalManagementSystem/systemManagement'
import { getIntDictOptions } from '@/utils/dict'



//approversupdate

const 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 newryqdfun=async ()=>{

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 fqrfun=async ()=>{
  
  getdata(deptId);
  dialogfqr.value = false;
}

var ryrowid = "";
const bjfqr=async (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 xgjdfun=async (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 bmidfun=async (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 gwidfun=async (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 getdata=async (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: number
  label: string
  children?: Tree[]
}


</script>




//浅复制{...data}
//深复制    bjrow.value = JSON.parse(JSON.stringify(asd));

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/95627.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

yolov8使用C++推理的流程及注意事项

1.下载yolov8项目源码GitHub - ultralytics/ultralytics: NEW - YOLOv8 &#x1f680; in PyTorch > ONNX > OpenVINO > CoreML > TFLite 2.下载opencvReleases - OpenCV,建议版本>4.7.0,选择下载源码&#xff0c; windows版本由于使用的编译器与我们所使用的m…

DP读书:鲲鹏处理器 架构与编程(十三)操作系统内核与云基础软件

操作系统内核与云基础软件 鲲鹏软件构成硬件特定软件 鲲鹏软件构成硬件特定软件1. Boot Loader2. SBSA 与 SBBR3. UEFI4. ACPI 操作系统内核Linux系统调用Linux进程调度Linux内存管理Linux虚拟文件系统Linux网络子系统Linux进程间通信Linux可加载内核模块Linux设备驱动程序Linu…

open cv快速入门系列---数字图像基础

目录 一、数字图像基础 1.1 数字图像和图像单位 1.2 区分图片分辨率与屏幕分辨率 1.3 图像的灰度与灰度级 1.4 图像的深度 1.5 二值图像、灰度图像与彩色图像 1.6 通道数 二、数字图像处理 2.1 图像噪声及其消除 2.2 数字图像处理技术 2.2.1 图像变换 2.2.2 图像增强…

同创永益入选首批“金融数字韧性与混沌工程实践试点机构”

8月16日下午&#xff0c;由北京国家金融科技认证中心、北京国家金融标准化研究院联合主办的“传递信任 服务发展”金融科技标准认证生态大会在太原成功举办。中国金融电子化集团有限公司党委书记、董事长周逢民&#xff0c;中国科学院院士冯登国&#xff0c;中国工商银行首席技…

哲讯科技携手无锡华启动SCM定制化项目,共谋数字化转型之路

无锡华光座椅弹簧有限公司启动SCM定制化项目 近日&#xff0c;无锡华光座椅弹簧有限公司顺利举行了SCM定制化项目的启动会。本次启动会作为该项目实施的重要里程碑&#xff0c;吸引了双方项目组核心成员的共同参与&#xff0c;并见证了项目的正式启动。 无锡华光座椅弹簧有限公…

uni-app开发小程序,radio单选按钮,点击可以选中,再次点击可以取消

一、实现效果&#xff1a; 二、代码实现&#xff1a; 不适用官方的change方法&#xff0c;自己定义点击方法。 动态判断定义的值是否等于遍历的值进行回显&#xff0c;如果和上一次点击的值一样&#xff0c;就把定义的值改为null <template><view><radio-group&…

kafka调优配置

Kafka生产者核心参数配置 来源于尚硅谷 参数名称描述bootstrap.servers生产者连接集群所需的broker地址清单。例如hadoop102:9092,hadoop103:9092,hadoop104:9092&#xff0c;可以设置1个或者多个&#xff0c;中间用逗号隔开。注意这里并非需要所有的broker地址&#xff0c;因…

Linux 常用命令 2

Linux 常用命令 2 1、组和权限管理1.1、ls 指令1.2、chown 指令1.3、chgrp 指令1.4、chmod 指令1.5、chown 指令1.6、chgrp 指令 2、crond 任务调度2.1、crontab2.2、时间格式2.3、脚本无法执行问题2.4、案例 3、进程管理3.1、ps 指令3.2、kill 和 killall 指令3.3、pstree 指令…

QSqlDatabase(2)实例,QTableView显示数据库表数据

目录 前言 1、实现的功能 2、具体的代码实现 前言 想了解QSqlDatabase基本知识的&#xff0c;以及增删改查的用法&#xff0c;可以浏览上一篇文章&#xff1a; QSqlDatabase&#xff08;1&#xff09;基本接口&#xff0c;以及(增删改除)的简单实例_Ivy_belief的博客-CSDN…

电脑识别不了固态硬盘怎么办?

在使用固态硬盘时&#xff0c;可能会出现电脑无法识别的情况&#xff0c;这时我们就无法使用固态硬盘中的数据。那么&#xff0c;电脑识别不了固态硬盘怎么办&#xff1f; 为什么电脑识别不了固态硬盘&#xff1f; 一般来说&#xff0c;电脑识别不了固态硬盘是因为以下3个原因…

HTML及CSS入门及精通

前言 HTML&#xff08;超文本标记语言&#xff09;和CSS&#xff08;层叠样式表&#xff09;是构建网页的两个基本技术。HTML用于定义网页的结构和内容&#xff0c;而CSS用于控制网页的样式和布局。本教程将介绍HTML和CSS的入门知识&#xff0c;并逐步引导您掌握更高级的技巧和…

css元素定位:通过元素的标签或者元素的id、class属性定位

前言 大部分人在使用selenium定位元素时&#xff0c;用的是xpath元素定位方式&#xff0c;因为xpath元素定位方式基本能解决定位的需求。xpath元素定位方式更直观&#xff0c;更好理解一些。 css元素定位方式往往被忽略掉了&#xff0c;其实css元素定位方式也有它的价值&…

CVE-2023-36874 Windows错误报告服务本地权限提升漏洞分析

CVE-2023-36874 Windows错误报告服务本地权限提升漏洞分析 漏洞简介 Windows错误报告服务在提交错误报告前会创建wermgr.exe进程&#xff0c;而攻击者使用特殊手法欺骗系统创建伪造的wermgr.exe进程&#xff0c;从而以system权限执行代码。 影响版本 Windows10 1507 * Wind…

液体神经网络LLN:通过动态信息流彻底改变人工智能

巴乌米克泰吉 一、说明 在在人工智能领域&#xff0c;神经网络已被证明是解决复杂问题的非常强大的工具。多年来&#xff0c;研究人员不断寻求创新方法来提高其性能并扩展其能力。其中一种方法是液体神经网络&#xff08;LNN&#xff09;的概念&#xff0c;这是一个利用动态计算…

LLMs之Code:SQLCoder的简介、安装、使用方法之详细攻略

LLMs之Code&#xff1a;SQLCoder的简介、安装、使用方法之详细攻略 目录 SQLCoder的简介 1、结果 2、按问题类别的结果 SQLCoder的安装 1、硬件要求 2、下载模型权重 3、使用SQLCoder 4、Colab中运行SQLCoder 第一步&#xff0c;配置环境 第二步&#xff0c;测试 第…

华为云云服务器评测|基于华为云云耀云服务器L实例开展性能评测,例如 MySQL、Clickhouse、Elasticsearch等等

在当今云计算时代&#xff0c;越来越多的企业和个人开始选择将应用部署在云服务器上&#xff0c;以便更好地满足高性能、可靠性和可扩展性等需求。而华为云云耀云服务器L实例不仅提供了高性能和可靠性的计算和存储资源&#xff0c;而且具有灵活和高效的成本控制&#xff0c;深受…

Spring Boot框架以及它的优势

文章目录 介绍1. **简化配置**2. **快速启动**3. **自动配置**4. **集成第三方库和框架**5. **微服务支持**6. **内嵌式数据库支持**7. **健康监控和管理**8. **可插拔的开发工具**9. **丰富的社区和生态系统**10. **良好的测试支持&#xff1a;** 核心特性**1. 依赖注入&#…

WSL Opencv with_ffmpeg conan1.60.0

我是ubuntu18. self.options[“opencv”].with_ffmpeg True 关键是gcc版本需要conan支持&#xff0c;比如我的是&#xff1a; compilergcc compiler.version7.5 此外还需要安装系统所需库&#xff1a; https://qq742971636.blog.csdn.net/article/details/132559789 甚至来…

自然语言处理-NLP

目录 自然语言处理-NLP 致命密码&#xff1a;一场关于语言的较量 自然语言处理的发展历程 兴起时期 符号主义时期 连接主义时期 深度学习时期 自然语言处理技术面临的挑战 语言学角度 同义词问题 情感倾向问题 歧义性问题 对话/篇章等长文本处理问题 探索自然语言…

RV64和ARM64栈结构差异

RV64和ARM64栈结构差异 1 RV64和ARM64栈结构差异示意图1.1 RV64和ARM64寄存器介绍1.1.1 RV64寄存器1.1.2 ARM64寄存器 1.2 RV64和ARM64栈结构差异示意图 2 RV64和ARM64栈使用示例2.1 测试的程序2.2 RV64反汇编的汇编程序2.3 ARM64反汇编的汇编程序2.4 RV64和ARM64测试程序的栈结…
最新文章