style:字典增加下拉框组件

renchao@pashanhoo.com
Showing 2 changed files with 50 additions and 38 deletions
package.json
src/views/djbworkflow/djbBook/components/blxxtabs/fdcq.vue
--- a/package.json
View file @447d5cd
+++ b/package.json
View file @447d5cd
@@ -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",
--- a/src/views/djbworkflow/djbBook/components/blxxtabs/fdcq.vue
View file @447d5cd
+++ b/src/views/djbworkflow/djbBook/components/blxxtabs/fdcq.vue
View file @447d5cd
 <!--
 * @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-form-item label="土地性质：" style="margin-bottom:3px">
-                 <el-select v-model="ruleForm.fdcq2.jedw">
+              <treeselect v-model="ruleForm.fdcq2.jedw" placeholder=""
-                  <el-option v-for="item in dictData['A45']" :key="item.dcode" :label="item.dname" :value="item.dcode">
+                :normalizer="normalizer"
-                  </el-option>
+                :show-count="true" :options="dictData['A45']" />
-                </el-select>
            </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 { mapGetters } from "vuex";
-import { Init, saveData } from "@/api/workflow/jsydsyqFlow.js";
+  import { Init, saveData } from "@/api/workflow/jsydsyqFlow.js";
-import { init } from "@/api/djbbl.js";
+  import { init } from "@/api/djbbl.js";
-import qlrCommonTable from "@/views/workflow/components/qlrCommonTable";
+  import qlrCommonTable from "@/views/workflow/components/qlrCommonTable";
-import tdytTable from "@/views/workflow/components/tdytTable";
+  import tdytTable from "@/views/workflow/components/tdytTable";
-export default {
+  // import the component
-  components: { qlrCommonTable,tdytTable },
+  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() {
+      loadData () {
-        console.log("房地产权",this.propsParam);
+        console.log("房地产权", this.propsParam);
        init(this.propsParam.bsmRepair).then((res) => {
          if (res.code == 200) {
@@ -340,24 +348,24 @@ export default {
        });
      },
      // 更新土地用途信息
-    upDateTdytxxList(val) {
+      upDateTdytxxList (val) {
-      console.log("VAL",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() {
+      onSubmit () {
-      console.log("this.ruleForm大信息",this.ruleForm);
+        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/public.scss";
-@import "~@/styles/slxx/slxx.scss";
+  @import "~@/styles/slxx/slxx.scss";
+  /deep/.vue-treeselect__menu-container {
+    transition: 0.3s !important;
+  }
 </style>