style:字典增加下拉框组件

@@ -10,6 +10,7 @@
   "dependencies": {
     "@antv/g2": "^4.2.8",
     "@babel/polyfill": "^7.12.1",
+    "@riophae/vue-treeselect": "^0.4.0",
     "axios": "^0.21.1",
     "bpmn-js": "^7.4.0",
     "bpmn-js-properties-panel": "^0.37.2",

 <!--
  * @Description:
  * @Autor: renchao
- * @LastEditTime: 2023-05-25 08:59:02
+ * @LastEditTime: 2023-06-25 15:52:42
 -->
 <template>
   <!-- 受理信息 -->
@@ -13,8 +13,7 @@
       ref="ruleForm"
       :label-position="flag ? 'top' : ''"
       :inline="flag"
-      label-width="127px"
-    >
+      label-width="127px">
       <div class="slxx_con" v-if="isShow" :class="flag ? 'formMarginBot0' : ''">
         <div class="slxx_title title-block">
           补录信息
@@ -38,7 +37,7 @@
           </el-col>
         </el-row>
         <div class="slxx_title title-block">
-         房地产权（独幢、层、套、间房屋）
+          房地产权（独幢、层、套、间房屋）
           <div class="triangle"></div>
         </div>
         <el-row :gutter="10">
@@ -52,7 +51,7 @@
               <el-input v-model="ruleForm.qlxx.ywh"></el-input>
             </el-form-item>
           </el-col>
-           <el-col :span="8">
+          <el-col :span="8">
             <el-form-item label="上手业务号：">
               <el-input v-model="ruleForm.qlxx.ssywh"></el-input>
             </el-form-item>
@@ -66,10 +65,10 @@
           </el-col>
           <el-col :span="8">
             <el-form-item label="登记类型：">
-               <el-select v-model="ruleForm.qlxx.djlx">
-                  <el-option v-for="item in dictData['A21']" :key="item.dcode" :label="item.dname" :value="item.dcode">
-                  </el-option>
-                </el-select>
+              <el-select v-model="ruleForm.qlxx.djlx">
+                <el-option v-for="item in dictData['A21']" :key="item.dcode" :label="item.dname" :value="item.dcode">
+                </el-option>
+              </el-select>
             </el-form-item>
           </el-col>
           <el-col :span="8">
@@ -77,35 +76,33 @@
               <el-input v-model="ruleForm.qlxx.zl"></el-input>
             </el-form-item>
           </el-col>
-           <el-col :span="8">
+          <el-col :span="8">
             <el-form-item label="土地使用权人：">
               <el-input v-model="ruleForm.fdcq2.tdsyqr"></el-input>
             </el-form-item>
           </el-col>
-             <el-col :span="8">
+          <el-col :span="8">
             <el-form-item label="独用土地面积：">
               <el-input v-model="ruleForm.fdcq2.dytdmj"></el-input>
             </el-form-item>
           </el-col>
-           <el-col :span="8">
+          <el-col :span="8">
             <el-form-item label="分摊土地面积：">
               <el-input v-model="ruleForm.fdcq2.fttdmj"></el-input>
             </el-form-item>
           </el-col>
-           <el-col :span="8">
-           <!-- 下拉框 -->
-            <el-form-item label="土地性质：">
-                 <el-select v-model="ruleForm.fdcq2.jedw">
-                  <el-option v-for="item in dictData['A45']" :key="item.dcode" :label="item.dname" :value="item.dcode">
-                  </el-option>
-                </el-select>
+          <el-col :span="8">
+            <!-- 下拉框 -->
+            <el-form-item label="土地性质：" style="margin-bottom:3px">
+              <treeselect v-model="ruleForm.fdcq2.jedw" placeholder=""
+                :normalizer="normalizer"
+                :show-count="true" :options="dictData['A45']" />
             </el-form-item>
           </el-col>
-           <el-col :span="8">
-
+          <el-col :span="8">
             <el-form-item label="房地产交易价格：">
-               <div style="display:flex">
-               <el-input v-model="ruleForm.fdcq2.qjjg" style="width:500%"></el-input>
+              <div style="display:flex">
+                <el-input v-model="ruleForm.fdcq2.qjjg" style="width:500%"></el-input>
                 <el-select v-model="ruleForm.fdcq2.jedw">
                   <el-option v-for="item in dictData['A57']" :key="item.dcode" :label="item.dname" :value="item.dcode">
                   </el-option>
@@ -113,38 +110,38 @@
               </div>
             </el-form-item>
           </el-col>
-           <el-col :span="8">
+          <el-col :span="8">
             <el-form-item label="规划用途：">
-               <el-select v-model="ruleForm.fdcq2.ghyt">
-                  <el-option v-for="item in dictData['A17']" :key="item.dcode" :label="item.dname" :value="item.dcode">
-                  </el-option>
-                </el-select>
+              <el-select v-model="ruleForm.fdcq2.ghyt">
+                <el-option v-for="item in dictData['A17']" :key="item.dcode" :label="item.dname" :value="item.dcode">
+                </el-option>
+              </el-select>
             </el-form-item>
           </el-col>
-           <el-col :span="8">
+          <el-col :span="8">
             <el-form-item label="批准用途：">
               <el-input v-model="ruleForm.fdcq2.pzyt"></el-input>
             </el-form-item>
           </el-col>
-           <el-col :span="8">
+          <el-col :span="8">
             <el-form-item label="实际用途：">
               <el-input v-model="ruleForm.fdcq2.sjyt"></el-input>
             </el-form-item>
           </el-col>
-           <el-col :span="8">
+          <el-col :span="8">
             <el-form-item label="房屋性质：">
               <el-select v-model="ruleForm.fdcq2.fwxz">
-                  <el-option v-for="item in dictData['A19']" :key="item.dcode" :label="item.dname" :value="item.dcode">
-                  </el-option>
-                </el-select>
+                <el-option v-for="item in dictData['A19']" :key="item.dcode" :label="item.dname" :value="item.dcode">
+                </el-option>
+              </el-select>
             </el-form-item>
           </el-col>
           <el-col :span="8">
             <el-form-item label="房屋结构：">
               <el-select v-model="ruleForm.fdcq2.fwjg">
-                  <el-option v-for="item in dictData['A46']" :key="item.dcode" :label="item.dname" :value="item.dcode">
-                  </el-option>
-                </el-select>
+                <el-option v-for="item in dictData['A46']" :key="item.dcode" :label="item.dname" :value="item.dcode">
+                </el-option>
+              </el-select>
             </el-form-item>
           </el-col>
           <el-col :span="8">
@@ -205,14 +202,14 @@
           </el-col>
         </el-row>
         <el-row>
-           <el-col :span="24">
+          <el-col :span="24">
             <el-form-item label="登记原因：">
               <el-input v-model="ruleForm.fdcq2.djyy"></el-input>
             </el-form-item>
           </el-col>
         </el-row>
-         <el-row>
-           <el-col :span="24">
+        <el-row>
+          <el-col :span="24">
             <el-form-item label="附记：">
               <el-input v-model="ruleForm.fdcq2.fj"></el-input>
             </el-form-item>
@@ -222,11 +219,10 @@
           土地用途
           <div class="triangle"></div>
         </div>
-         <tdytTable
+        <tdytTable
           :tableData="ruleForm.tdytqxList"
           @upDateQlrxxList="upDateTdytxxList"
-          :viewtype="$route.query.viewtype"
-        />
+          :viewtype="$route.query.viewtype" />
         <div class="slxx_title title-block">
           权利人信息
           <div class="triangle"></div>
@@ -236,8 +232,7 @@
             <el-form-item label="共有方式：">
               <el-radio-group
                 :disabled="$route.query.viewtype == 0"
-                v-model="ruleForm.qlxx.gyqk"
-              >
+                v-model="ruleForm.qlxx.gyqk">
                 <el-radio label="0">单独所有</el-radio>
                 <el-radio label="1">共同共有</el-radio>
                 <el-radio label="2">按份所有</el-radio>
@@ -267,8 +262,7 @@
           @upDateQlrxxList="upDateQlrxxList"
           :key="key"
           :viewtype="$route.query.viewtype"
-          :gyfs="ruleForm.qlxx.gyfs"
-        />
+          :gyfs="ruleForm.qlxx.gyfs" />
 
         <div v-if="ruleForm.ywrList && ruleForm.ywrList.length > 0">
           <div class="slxx_title title-block">
@@ -280,8 +274,7 @@
             :tableData="ruleForm.ywrList"
             :key="key"
             @upDateQlrxxList="upDateYwrxxList"
-            :viewtype="$route.query.viewtype"
-          />
+            :viewtype="$route.query.viewtype" />
         </div>
       </div>
       <el-row class="btn" v-if="!$route.query.viewtype && ableOperation">
@@ -293,129 +286,147 @@
   </div>
 </template>
 <script>
-import { mapGetters } from "vuex";
-import { Init, saveData } from "@/api/workflow/jsydsyqFlow.js";
-import { init } from "@/api/djbbl.js";
-import qlrCommonTable from "@/views/workflow/components/qlrCommonTable";
-import tdytTable from "@/views/workflow/components/tdytTable";
-export default {
-  components: { qlrCommonTable,tdytTable },
-  computed: {
-    ...mapGetters(["dictData", "flag"]),
-  },
-  data() {
-    return {
-      //表单是否可操作
-      propsParam: this.$attrs,
-      ableOperation: true,
-      key: 0,
-      isShow: false,
-      disabled: true,
-      czrOptions: [],
-      ruleForm: {},
-      //传递参数\
-      rules: {},
-    };
-  },
-  created() {
-    this.loadData();
-  },
-  mounted() {},
-  methods: {
-    loadData() {
-        console.log("房地产权",this.propsParam);
-      init(this.propsParam.bsmRepair).then((res) => {
-        if (res.code == 200) {
+  import { mapGetters } from "vuex";
+  import { Init, saveData } from "@/api/workflow/jsydsyqFlow.js";
+  import { init } from "@/api/djbbl.js";
+  import qlrCommonTable from "@/views/workflow/components/qlrCommonTable";
+  import tdytTable from "@/views/workflow/components/tdytTable";
+  // import the component
+  import Treeselect from '@riophae/vue-treeselect'
+  // import the styles
+  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
 
-          this.ruleForm = res.result;
-          this.isShow = true;
-          // this.tableData = res.result;
-          // if (this.tableData.length < datas.columns().emptycolNum) {
-          //   this.emptycolNum =
-          //     datas.columns().emptycolNum - this.tableData.length;
-          // } else {
-          //   this.emptycolNum = 0;
-          // }
-        }
-      });
+  export default {
+    components: { qlrCommonTable, tdytTable, Treeselect },
+    computed: {
+      ...mapGetters(["dictData", "flag"]),
     },
-      // 更新土地用途信息
-    upDateTdytxxList(val) {
-      console.log("VAL",val);
-      this.ruleForm.tdytqxList && (this.ruleForm.tdytqxList = _.cloneDeep(val));
-      this.key++;
-    },
-    // 更新权利人信息
-    upDateQlrxxList(val) {
-      this.ruleForm.qlrList && (this.ruleForm.qlrList = _.cloneDeep(val));
-      this.czrOptions = this.ruleForm.qlrList;
-      this.key++;
+    data () {
+      return {
+        // 键名转换，方法默认是label和children进行树状渲染
+        normalizer (node) { //方法
+          if (node.children == null || node.children == 'null') {
+            delete node.children;
+          }
+          return {
+            id: node.dcode,
+            label: node.dname
+          }
+        },
+        //表单是否可操作
+        propsParam: this.$attrs,
+        ableOperation: true,
+        key: 0,
+        isShow: false,
+        disabled: true,
+        czrOptions: [],
+        ruleForm: {},
+        //传递参数\
+        rules: {},
+      };
     },
-    // 更新义务人信息
-    upDateYwrxxList(val) {
-      this.ruleForm.ywrList && (this.ruleForm.ywrList = _.cloneDeep(val));
-      this.key++;
+    created () {
+      this.loadData();
     },
-    onSubmit() {
-      console.log("this.ruleForm大信息",this.ruleForm);
-      if (this.ruleForm.qlrList.length == 0) {
-        this.$message({
-          showClose: true,
-          message: "请确认权利人信息",
-          type: "error",
-        });
-        return false;
-      }
+    mounted () { },
+    methods: {
+      loadData () {
+        console.log("房地产权", this.propsParam);
+        init(this.propsParam.bsmRepair).then((res) => {
+          if (res.code == 200) {
 
-      if (this.ruleForm.qlxx.gyfs == "0") {
-        if (this.ruleForm.qlrList.length > 1) {
+            this.ruleForm = res.result;
+            this.isShow = true;
+            // this.tableData = res.result;
+            // if (this.tableData.length < datas.columns().emptycolNum) {
+            //   this.emptycolNum =
+            //     datas.columns().emptycolNum - this.tableData.length;
+            // } else {
+            //   this.emptycolNum = 0;
+            // }
+          }
+        });
+      },
+      // 更新土地用途信息
+      upDateTdytxxList (val) {
+        console.log("VAL", val);
+        this.ruleForm.tdytqxList && (this.ruleForm.tdytqxList = _.cloneDeep(val));
+        this.key++;
+      },
+      // 更新权利人信息
+      upDateQlrxxList (val) {
+        this.ruleForm.qlrList && (this.ruleForm.qlrList = _.cloneDeep(val));
+        this.czrOptions = this.ruleForm.qlrList;
+        this.key++;
+      },
+      // 更新义务人信息
+      upDateYwrxxList (val) {
+        this.ruleForm.ywrList && (this.ruleForm.ywrList = _.cloneDeep(val));
+        this.key++;
+      },
+      onSubmit () {
+        console.log("this.ruleForm大信息", this.ruleForm);
+        if (this.ruleForm.qlrList.length == 0) {
           this.$message({
             showClose: true,
-            message: "共有方式：单独所有，权利人只能是一个人",
+            message: "请确认权利人信息",
             type: "error",
           });
           return false;
         }
-        this.ruleForm.qlrList[0].sfczr = "1";
-      }
-      if (this.ruleForm.qlxx.gyfs == "1") {
-        //是否分别持证
-        if (this.ruleForm.qlxx.sqfbcz == "1") {
-          //是
-          this.ruleForm.qlrList.forEach((item, index) => {
-            item.sfczr = "1";
-          });
-        } else {
-          this.ruleForm.qlrList.forEach((item, index) => {
-            if (item.zjh == this.ruleForm.czr) {
-              item.sfczr = "1";
-            } else {
-              item.sfczr = "0";
-            }
-          });
+
+        if (this.ruleForm.qlxx.gyfs == "0") {
+          if (this.ruleForm.qlrList.length > 1) {
+            this.$message({
+              showClose: true,
+              message: "共有方式：单独所有，权利人只能是一个人",
+              type: "error",
+            });
+            return false;
+          }
+          this.ruleForm.qlrList[0].sfczr = "1";
         }
-      }
-      saveData(this.ruleForm).then((res) => {
-        if (res.code === 200) {
-          this.$message({
-            showClose: true,
-            message: "保存成功！",
-            type: "success",
-          });
-          this.$store.dispatch("user/refreshPage", true);
-        } else {
-          this.$message({
-            showClose: true,
-            message: res.message,
-            type: "error",
-          });
+        if (this.ruleForm.qlxx.gyfs == "1") {
+          //是否分别持证
+          if (this.ruleForm.qlxx.sqfbcz == "1") {
+            //是
+            this.ruleForm.qlrList.forEach((item, index) => {
+              item.sfczr = "1";
+            });
+          } else {
+            this.ruleForm.qlrList.forEach((item, index) => {
+              if (item.zjh == this.ruleForm.czr) {
+                item.sfczr = "1";
+              } else {
+                item.sfczr = "0";
+              }
+            });
+          }
         }
-      });
+        saveData(this.ruleForm).then((res) => {
+          if (res.code === 200) {
+            this.$message({
+              showClose: true,
+              message: "保存成功！",
+              type: "success",
+            });
+            this.$store.dispatch("user/refreshPage", true);
+          } else {
+            this.$message({
+              showClose: true,
+              message: res.message,
+              type: "error",
+            });
+          }
+        });
+      },
     },
-  },
-};
+  };
 </script>
 <style scoped lang="scss">
-@import "~@/styles/public.scss";
-@import "~@/styles/slxx/slxx.scss";
+  @import "~@/styles/public.scss";
+  @import "~@/styles/slxx/slxx.scss";
+  /deep/.vue-treeselect__menu-container {
+    transition: 0.3s !important;
+  }
 </style>