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">
           补录信息
@@ -94,15 +93,13 @@
           </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-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-form-item label="房地产交易价格：">
               <div style="display:flex">
                 <el-input v-model="ruleForm.fdcq2.qjjg" style="width:500%"></el-input>
@@ -225,8 +222,7 @@
         <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,18 +286,33 @@
   </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 },
+  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'
+
+  export default {
+    components: { qlrCommonTable, tdytTable, Treeselect },
     computed: {
       ...mapGetters(["dictData", "flag"]),
     },
-  data() {
+    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,
@@ -317,13 +325,13 @@ export default {
         rules: {},
       };
     },
-  created() {
+    created () {
       this.loadData();
     },
-  mounted() {},
+    mounted () { },
     methods: {
-    loadData() {
-        console.log("房地产权",this.propsParam);
+      loadData () {
+        console.log("房地产权", this.propsParam);
         init(this.propsParam.bsmRepair).then((res) => {
           if (res.code == 200) {
 
@@ -340,24 +348,24 @@ export default {
         });
       },
       // 更新土地用途信息
-    upDateTdytxxList(val) {
-      console.log("VAL",val);
+      upDateTdytxxList (val) {
+        console.log("VAL", val);
         this.ruleForm.tdytqxList && (this.ruleForm.tdytqxList = _.cloneDeep(val));
         this.key++;
       },
       // 更新权利人信息
-    upDateQlrxxList(val) {
+      upDateQlrxxList (val) {
         this.ruleForm.qlrList && (this.ruleForm.qlrList = _.cloneDeep(val));
         this.czrOptions = this.ruleForm.qlrList;
         this.key++;
       },
       // 更新义务人信息
-    upDateYwrxxList(val) {
+      upDateYwrxxList (val) {
         this.ruleForm.ywrList && (this.ruleForm.ywrList = _.cloneDeep(val));
         this.key++;
       },
-    onSubmit() {
-      console.log("this.ruleForm大信息",this.ruleForm);
+      onSubmit () {
+        console.log("this.ruleForm大信息", this.ruleForm);
         if (this.ruleForm.qlrList.length == 0) {
           this.$message({
             showClose: true,
@@ -413,9 +421,12 @@ export default {
         });
       },
     },
-};
+  };
 </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>