多选下拉树修改

zhaojiale

2022-08-09 4b709c7eeafe8dfb3a3f838cbde57d6d12cc96c1

 src/views/contingencyManagement/panManagement/component/openAdd.vue

@@ -13,15 +13,14 @@
                  <el-form-item label="适用部门" prop="responsibleDepartment">
                     <el-tree-select
                        v-model="ruleForm.responsibleDepartment"
                        :data="data"
                        multiple
                        :render-after-expand="false"
                        :data="newTreeList"
                        class="w100"
                        :props="propse"
                        clearable
                show-checkbox
                check-strictly
                check-on-click-node
                placeholder="请选择"
                        multiple
                        :render-after-expand="false"
                        show-checkbox
                        placeholder="请选择"
                     />
                     <el-divider />
                  </el-form-item>
@@ -29,10 +28,10 @@
               <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                  <el-form-item label="预案类型" prop="type">
                     <el-select v-model="ruleForm.type" class="w100" placeholder="请选择">
                        <el-option label="综合应急预案" value="综合应急预案"></el-option>
                        <el-option label="现场处置方案" value="现场处置方案"></el-option>
                        <el-option label="专项应急预案" value="专项应急预案"></el-option>
                        <el-option label="其他预案" value="其他预案"></el-option>
                        <el-option label="综合应急预案" value="1"></el-option>
                        <el-option label="现场处置方案" value="2"></el-option>
                        <el-option label="专项应急预案" value="3"></el-option>
                        <el-option label="其他预案" value="4"></el-option>
                     </el-select>
                  </el-form-item>
               </el-col>
@@ -47,9 +46,9 @@
               <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                  <el-form-item label="预案级别" prop="level">
                     <el-select v-model="ruleForm.level" class="w100" placeholder="请选择">
                        <el-option label="公司级" value="公司级"></el-option>
                        <el-option label="分厂级" value="分厂级"></el-option>
                        <el-option label="车间级" value="车间级"></el-option>
                        <el-option label="公司级" value="1"></el-option>
                        <el-option label="分厂级" value="2"></el-option>
                        <el-option label="车间级" value="3"></el-option>
                     </el-select>
                  </el-form-item>
               </el-col>
@@ -66,12 +65,13 @@
                  <el-form-item label="编写部门" prop="authorDeptId">
                     <el-tree-select
                        v-model="ruleForm.authorDeptId"
                        check-strictly
                        :data="data"
                        :data="newTreeList"
                        class="w100"
                        :props="propse"
                        clearable
                        multiple
                        :render-after-expand="false"
                        show-checkbox
                        placeholder="请选择"
                     />
                  </el-form-item>
@@ -209,24 +209,40 @@
      const releaseDate = ref('');
      // 上传附件
      const fileList = ref<UploadUserFile[]>([]);
      //部门树
      const department = () => {
         goalManagementApi()
            .getTreedepartment()
            .then((res) => {
               if (res.data.code == 200) {
            data.value = res.data.data;
               } else {
                  ElMessage.error(res.data.msg);
               }
            });
      };
      const treeSelect = ref();
      // const trees = ref();
      //el-tree-select回显
      const propse = {
         label: 'depName',
         children: 'children',
         value: 'depId',
      };
      const newTreeList = [];
      //得到部门树
      const department = async () => {
         await goalManagementApi()
               .getTreedepartment()
               .then((res) => {
                  if (res.data.code == 200) {
                     data.value = res.data.data;
                     getTreeList(res.data.data, newTreeList);
                     console.log('newList',newTreeList)
                  } else {
                     ElMessage.error(res.data.msg);
                  }
               });
      };
      // 递归树状数据且修改字段名
      const getTreeList = (treeList, newTreeList) => {
         treeList.map((c) => {
            let tempData = {
               depName: c.depName,
               value: c.depId,
               children: [],
            };
            if (c.children && c.children.length > 0) {
               tempData.children = [];
               getTreeList(c.children, tempData.children);
            }
            newTreeList.push(tempData);
         });
      };
      onMounted(() => {
         department();
@@ -371,7 +387,7 @@
         data,
         Search,
         releaseDate,
         treeSelect,
         // treeSelect,
         // trees,
         propse,
         department,
@@ -394,6 +410,7 @@
         ruleForm,
         resetForm,
         onUser,
         newTreeList
      };
   },
});