修改保税区进出口值选取的数据问题

src/views/TOTEXP/index.vue

@@ -181,22 +181,37 @@
     <!-- 添加或修改保税区进出口总值数据对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="580px" :close-on-click-modal="false" append-to-body>
       <el-form :ref="'form'" :model="form" :rules="rules" label-width="80px">
-        <el-form-item prop="deptId" label-width="120px" label="保税区名称">
-          <el-select
-            v-model="form.deptId"
-            filterable
-            default-first-option
-            clearable
-            placeholder="请选择保税区"
-            style="width: 100%;"
-          >
-            <el-option
-              v-for="item in deptList"
-              :key="item.deptId"
-              :label="item.deptName"
-              :value="item.deptId"
-            >
-            </el-option>
+        <el-form-item prop="deptId" label-width="120px" label="部门">
+<!--          <el-select-->
+<!--            v-model="form.deptId"-->
+<!--            filterable-->
+<!--            default-first-option-->
+<!--            clearable-->
+<!--            placeholder="请选择保税区"-->
+<!--            @change="formDeptSelect"-->
+<!--            style="width: 100%;"-->
+<!--          >-->
+<!--            <el-option-->
+<!--              v-for="item in deptList"-->
+<!--              :key="item.deptId"-->
+<!--              :label="item.deptName"-->
+<!--              :value="item.deptId"-->
+<!--            >-->
+<!--            </el-option>-->
+<!--          </el-select>-->
+
+          <el-select v-model="form.deptId" filterable default-first-option style="width: 100%;" @change="formDeptSelect" placeholder="请选择部门">
+            <el-option-group
+              v-for="group in deptGroupOptions"
+              :key="group.label"
+              :label="group.label">
+              <el-option
+                v-for="item in group.options"
+                :key="item.id"
+                :label="item.deptName"
+                :value="item.deptId">
+              </el-option>
+            </el-option-group>
           </el-select>
         </el-form-item>
         <el-form-item prop="year" label-width="120px" label="年份">
@@ -228,10 +243,12 @@
           >
           </el-cascader>
         </el-form-item> -->
-        <el-form-item prop="level" label-width="120px" label="级别">
+        <el-form-item v-show="form.level" prop="level" label-width="120px" label="级别">
           <el-select
             v-model="form.level"
             clearable
+            disabled
+            style="width: 100%;"
             placeholder="请选择级别"
           >
             <el-option
@@ -294,6 +311,11 @@ export default {
       TOTEXPList: [],
       // 保税区列表
       deptList: [],
+      // 部门列表分组
+      deptGroupOptions: [
+        {label: '地级市', options: [{deptId: '12312', deptName: 'aaa'}]},
+        {label: '保税区', options: [{dept: '12312', deptName: '12321'}]},
+      ],
       // 近年年份列表
       nearYearList: [],
       // 弹出层标题
@@ -331,14 +353,15 @@ export default {
 
       },
       option:[
-      {
-        value:4,
-        label: '市级'
-      },
-      {
-        value:2,
-        label: '保税区'
-      },]
+        {
+          value:4,
+          label: '市级'
+        },
+        {
+          value:2,
+          label: '保税区'
+        },
+      ]
     };
   },
   created() {
@@ -363,6 +386,7 @@ export default {
         // this.deptList = response.data;
         // 过滤type  === 2 或 4 的部门数据
         this.deptList = response.data.filter(item => item.type === 2 || item.type === 4);
+        this.buildDeptGroupOptions();
         this.loading = false;
       });
     },
@@ -380,6 +404,20 @@ export default {
 
       this.nearYearList = nearYearArr;
     },
+    // 部门选择器
+    formDeptSelect() {
+      console.log('部门id', this.form.deptId)
+      // 寻找deptId 对应的部门
+      let dept = this.deptList.filter(item => item.deptId === this.form.deptId)[0]
+      // 根据部门 的 type 赋值给level
+      this.form.level = dept.type
+    },
+    // 构造部门分组
+    buildDeptGroupOptions() {
+      // 计算第一层
+      this.deptGroupOptions[0].options = this.deptList.filter(item => item.type === 4);
+      this.deptGroupOptions[1].options = this.deptList.filter(item => item.type === 2);
+    },
     // 取消按钮
     cancel() {
       this.open = false;