lsun 协议管理-树结构修改

src/views/material/lease/protocol/index.vue

@@ -37,7 +37,8 @@
           icon="el-icon-plus"
           size="mini"
           @click="handleAdd"
-        >新增</el-button
+        >新增
+        </el-button
         >
       </el-col>
       <el-col :span="1.5">
@@ -80,7 +81,6 @@
       </el-table-column>
 
 
-
       <el-table-column label="附件图片" align="center" width="180">
         <template slot-scope="scope">
           <el-button
@@ -137,21 +137,37 @@
       <el-form ref="form" :model="form" :rules="rules" label-width="120px">
         <el-row>
           <el-col :span="12">
+            <!--            <el-form-item label="租赁单位" prop="unitId">-->
+            <!--              <el-select-->
+            <!--                v-model="form.unitId"-->
+            <!--                filterable-->
+            <!--                placeholder="请选择租赁单位"-->
+            <!--                style="width: 100%"-->
+            <!--              >-->
+            <!--                <el-option-->
+            <!--                  v-for="item in unitList"-->
+            <!--                  :key="item.unitId"-->
+            <!--                  :label="item.unitName"-->
+            <!--                  :value="item.unitId"-->
+            <!--                ></el-option>-->
+            <!--              </el-select>-->
+            <!--            </el-form-item>-->
             <el-form-item label="租赁单位" prop="unitId" >
-              <el-select
+              <el-cascader
-                v-model="form.unitId"
+                v-model="unitId"
+                :show-all-levels="false"
+                :options="uniteList"
+                :props="selectTreeProps"
                 filterable
+                clearable
+                collapse-tags
+                @change="uniteChange"
                 placeholder="请选择租赁单位"
-                style="width: 100%"
+                style="width: 100%;"
-              >
+              ></el-cascader>
-                <el-option
-                  v-for="item in unitList"
-                  :key="item.unitId"
-                  :label="item.unitName"
-                  :value="item.unitId"
-                ></el-option>
-              </el-select>
             </el-form-item>
+
+
           </el-col>
 
           <el-col :span="12">
@@ -167,7 +183,21 @@
 
         <el-row>
           <el-col :span="12">
-            <el-form-item label="租赁工程" prop="proId">
+            <el-form-item label="租赁工程" prop="projectId">
+              <el-cascader
+                v-model="projectId"
+                :show-all-levels="false"
+                :options="projectList"
+                :props="selectTreeProps"
+                filterable
+                clearable
+                collapse-tags
+                @change="projectChange"
+                placeholder="请选择租赁工程"
+                style="width: 100%;"
+              ></el-cascader>
+            </el-form-item>
+            <!--            <el-form-item label="租赁工程" prop="proId">
                           <el-select
                             v-model="form.proId"
                             filterable
@@ -181,7 +211,7 @@
                               :value="item.proId"
                             ></el-option>
                           </el-select>
-            </el-form-item>
+                        </el-form-item>-->
           </el-col>
 
 
@@ -250,7 +280,7 @@
         <el-row>
           <el-col :span="12">
             <el-form-item label="租赁单位类型">
-              <el-select v-model="form.protocol" placeholder="请选择租赁单位类型" clearable>
+              <el-select style="width: 100%;" v-model="form.protocol" placeholder="请选择租赁单位类型" clearable>
                 <el-option label="内部单位" value="1"></el-option>
                 <el-option label="外部单位" value="2"></el-option>
               </el-select>
@@ -361,13 +391,24 @@
 </template>
 
 <script>
-import { getListAgreement,getAgreementDetail,editAgreement,addAgreement,delAgreement,deleteFile, getUnitList, getProjectList, } from "@/api/lease/protocol";
+import {
+  getListAgreement,
+  getAgreementDetail,
+  editAgreement,
+  addAgreement,
+  delAgreement,
+  deleteFile,
+  getUnitList,
+  getProjectList,
+} from "@/api/lease/protocol";
 import {imgUpLoadThree, fileUpLoad} from '@/api/system/upload'
 import {downloadFile, downloadFileData} from '@/utils/download'
 import {getToken} from '@/utils/auth'
 import {Base64} from 'js-base64'
 import {forEach} from 'jszip';
 import {listUser} from "@/api/system/user";
+import {getListProject, getListUnite} from "@/api/lease/apply";
+
 export default {
   name: "supplier",
   data() {
@@ -405,6 +446,22 @@ export default {
       totalTwo: 0,
       // 租赁单位数据
       unitList: [],
+      //租赁单位
+      uniteList: [],
+      selectTreeProps: {
+        children: "children",
+        label: "name",
+        // multiple: false,
+        value: "id",
+        // multiple: true,
+      },
+      unitId: null,
+      projectId: null,
+      maForm: {
+        unitId: undefined,
+        projectId: undefined
+      },
+
       // 工程数据
       projectList: [],
       // 施工记录表格数据
@@ -442,15 +499,15 @@ export default {
         unitId: [
           {
             required: true,
-            message: '租赁单位不能为空',
+            message: "请选择租赁单位",
-            trigger: 'blur',
+            trigger: "blur",
           },
         ],
-        proId: [
+        projectId: [
           {
             required: true,
-            message: '租赁工程不能为空',
+            message: "请选择租赁工程",
-            trigger: 'blur',
+            trigger: "blur",
           },
         ],
 
@@ -495,7 +552,6 @@ export default {
   },
   methods: {
 
-
     //提交时循环fileList 获取raw文件
     async getFileData() {
       const fileTwo = []
@@ -656,17 +712,42 @@ export default {
 
     //获取单位类型 ,getUnitList, getProjectList
     async getUnitList() {
-      getUnitList({}).then((response) => {
+      // getUnitList({}).then((response) => {
-        this.unitList = response.data
+      //   this.unitList = response.data
-      })
+      // })
+      getListUnite({projectId: null}).then((response) => {
+        this.uniteList = response.data;
+      });
     },
 
     async getProjectList() {
-      getProjectList({}).then((response) => {
+      // getProjectList({}).then((response) => {
-        this.projectList = response.data
+      //   this.projectList = response.data
-      })
+      // })
+      getListProject({unitId: null}).then((response) => {
+        this.projectList = response.data;
+      });
     },
 
+    uniteChange(val) {
+      // this.projectList = [];
+      if (val && val.length > 0) {
+        this.maForm.unitId = this.unitId[this.unitId.length - 1];
+      } else if (val && val.length == 0) {
+        this.maForm.unitId = "";
+      }
+
+    },
+
+    projectChange(val) {
+      if (val && val.length > 0) {
+        this.maForm.projectId = this.projectId[this.projectId.length - 1];
+      } else if (val && val.length == 0) {
+        this.maForm.projectId = "";
+      }
+    },
+
+
     /** 新增按钮操作 */
     handleAdd() {
       this.reset()
@@ -688,7 +769,19 @@ export default {
       var id = row.agreementId;
       getAgreementDetail(id).then((response) => {
         this.form = response.data;
-        this.form.proId = response.data.projectId;
+
+
+        this.maForm.unitId = response.data.unitId;
+        this.maForm.projectId = response.data.projectId;
+
+        this.unitId = this.treeParentsById(this.uniteList, this.maForm.unitId);
+        this.projectId = this.treeParentsById(
+          this.projectList,
+          this.maForm.projectId
+        );
+
+
+        console.log(this.maForm)
         if (response.data.bmFileInfos != null) {
           this.businessLicenseListTemp = response.data.bmFileInfos;
           this.businessLicenseListTemp.forEach(item => {
@@ -749,7 +842,14 @@ export default {
       var id = row.agreementId;
       getAgreementDetail(id).then((response) => {
         this.form = response.data;
-        this.form.proId = response.data.projectId;
+        this.maForm.unitId = response.data.unitId;
+        this.maForm.projectId = response.data.projectId;
+
+        this.unitId = this.treeParentsById(this.uniteList, this.maForm.unitId);
+        this.projectId = this.treeParentsById(
+          this.projectList,
+          this.maForm.projectId
+        );
         if (response.data.bmFileInfos != null) {
           this.businessLicenseListTemp = response.data.bmFileInfos;
           this.businessLicenseListTemp.forEach(item => {
@@ -774,6 +874,12 @@ export default {
     // 表单重置
     reset() {
       this.form = {};
+      this.unitId = null;
+      this.projectId = null;
+      this.maForm = {
+        unitId: undefined,
+        projectId: undefined
+      };
       this.resetForm("form");
     },
 
@@ -788,10 +894,18 @@ export default {
 
     //** 提交按钮 */
     submitForm() {
+      this.form.unitId = this.maForm.unitId;
+      this.form.projectId = this.maForm.projectId;
+
       this.$refs["form"].validate(async valid => {
-        this.form.projectId = this.form.proId;
+        console.log("this.maForm", this.maForm)
+        console.log("this.form", this.form)
+        // this.form.projectId = this.form.proId;
         if (valid) {
           if (this.form.agreementId != undefined) {
+            this.form.projectName =null;
+            this.form.unitName =null;
+            // this.form.fileName =null;
             const reqData = new FormData();
             if (this.businessLicenseListTemp.length != 0) {
               await this.getImaUploadEdit(),
@@ -938,7 +1052,8 @@ export default {
           this.$modal.msgSuccess('删除成功')
           this.getList()
         })
-        .catch(() => {})
+        .catch(() => {
+        })
     },
 
     handleExport() {
@@ -953,6 +1068,24 @@ export default {
       this.getList();
     },
 
+    //单位，工程树结构数据获取父
+    treeParentsById(list, id) {
+      for (let i in list) {
+        if (list[i].id == id) {
+          //查询到就返回该数组对象的value
+          return [list[i].id];
+        }
+        if (list[i].children) {
+          let node = this.treeParentsById(list[i].children, id);
+          if (node !== undefined) {
+            //查询到把父节把父节点加到数组前面
+            node.unshift(list[i].id);
+            return node;
+          }
+        }
+      }
+    },
+
   }
 };
 </script>
@@ -963,37 +1096,46 @@ export default {
   align-items: center;
   justify-content: center;
 }
+
 .deviceCode {
   margin-top: 10px;
   padding-bottom: 20px;
   font-size: 18px;
 }
+
 ::v-deep.el-table .fixed-width .el-button--mini {
   width: 60px !important;
   margin-bottom: 10px;
 }
+
 //隐藏图片上传框的css
 ::v-deep.disabled {
   .el-upload--picture-card {
     display: none;
   }
 }
+
 ::v-deep .el-upload-list--picture-card {
   display: flex;
 }
+
 ::v-deep .el-upload-list__item {
   margin-bottom: 20px;
   overflow: revert;
 }
+
 ::v-deep .el-upload-list__item-actions {
   overflow: hidden;
 }
+
 .upload-demo {
   display: flex;
 }
+
 .el-upload-list__item-thumbnail {
   height: 145px !important;
 }
+
 .picture-card-container {
   width: 100%;
   height: 100%;
@@ -1002,6 +1144,7 @@ export default {
   align-items: center;
   position: relative;
 }
+
 .picture-card {
   width: 100%;
   height: 100%;
@@ -1010,6 +1153,7 @@ export default {
   // border: 1px solid  #ddd;
   // border-radius: 4px;
 }
+
 .file-name {
   width: 90%;
   white-space: nowrap;
@@ -1023,6 +1167,7 @@ export default {
   color: #333;
   z-index: 999999;
 }
+
 .file-overlay {
   position: absolute;
   top: 0;