style:字典增加下拉框组件

renchao@pashanhoo.com
Showing 2 changed files with 170 additions and 158 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">
          补录信息
@@ -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-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 v-for="item in dictData['A21']" :key="item.dcode" :label="item.dname" :value="item.dcode">
-                  </el-option>
+                </el-option>
-                </el-select>
+              </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-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-col :span="8">
            <el-form-item label="房地产交易价格：">
-               <div style="display:flex">
+              <div style="display:flex">
-               <el-input v-model="ruleForm.fdcq2.qjjg" style="width:500%"></el-input>
+                <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-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 v-for="item in dictData['A17']" :key="item.dcode" :label="item.dname" :value="item.dcode">
-                  </el-option>
+                </el-option>
-                </el-select>
+              </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 v-for="item in dictData['A19']" :key="item.dcode" :label="item.dname" :value="item.dcode">
-                  </el-option>
+                </el-option>
-                </el-select>
+              </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 v-for="item in dictData['A46']" :key="item.dcode" :label="item.dname" :value="item.dcode">
-                  </el-option>
+                </el-option>
-                </el-select>
+              </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-row>
-           <el-col :span="24">
+          <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 { 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'
-  computed: {
+  // import the styles
-    ...mapGetters(["dictData", "flag"]),
+  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
-  },
-  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) {
-          this.ruleForm = res.result;
+  export default {
-          this.isShow = true;
+    components: { qlrCommonTable, tdytTable, Treeselect },
-          // this.tableData = res.result;
+    computed: {
-          // if (this.tableData.length < datas.columns().emptycolNum) {
+      ...mapGetters(["dictData", "flag"]),
-          //   this.emptycolNum =
-          //     datas.columns().emptycolNum - this.tableData.length;
-          // } else {
-          //   this.emptycolNum = 0;
-          // }
-        }
-      });
    },
-      // 更新土地用途信息
+    data () {
-    upDateTdytxxList(val) {
+      return {
-      console.log("VAL",val);
+        // 键名转换，方法默认是label和children进行树状渲染
-      this.ruleForm.tdytqxList && (this.ruleForm.tdytqxList = _.cloneDeep(val));
+        normalizer (node) { //方法
-      this.key++;
+          if (node.children == null || node.children == 'null') {
-    },
+            delete node.children;
-    // 更新权利人信息
+          }
-    upDateQlrxxList(val) {
+          return {
-      this.ruleForm.qlrList && (this.ruleForm.qlrList = _.cloneDeep(val));
+            id: node.dcode,
-      this.czrOptions = this.ruleForm.qlrList;
+            label: node.dname
-      this.key++;
+          }
+        },
+        //表单是否可操作
+        propsParam: this.$attrs,
+        ableOperation: true,
+        key: 0,
+        isShow: false,
+        disabled: true,
+        czrOptions: [],
+        ruleForm: {},
+        //传递参数\
+        rules: {},
+      };
    },
-    // 更新义务人信息
+    created () {
-    upDateYwrxxList(val) {
+      this.loadData();
-      this.ruleForm.ywrList && (this.ruleForm.ywrList = _.cloneDeep(val));
-      this.key++;
    },
-    onSubmit() {
+    mounted () { },
-      console.log("this.ruleForm大信息",this.ruleForm);
+    methods: {
-      if (this.ruleForm.qlrList.length == 0) {
+      loadData () {
-        this.$message({
+        console.log("房地产权", this.propsParam);
-          showClose: true,
+        init(this.propsParam.bsmRepair).then((res) => {
-          message: "请确认权利人信息",
+          if (res.code == 200) {
-          type: "error",
-        });
-        return false;
-      }
-      if (this.ruleForm.qlxx.gyfs == "0") {
+            this.ruleForm = res.result;
-        if (this.ruleForm.qlrList.length > 1) {
+            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 == "0") {
-      if (this.ruleForm.qlxx.gyfs == "1") {
+          if (this.ruleForm.qlrList.length > 1) {
-        //是否分别持证
+            this.$message({
-        if (this.ruleForm.qlxx.sqfbcz == "1") {
+              showClose: true,
-          //是
+              message: "共有方式：单独所有，权利人只能是一个人",
-          this.ruleForm.qlrList.forEach((item, index) => {
+              type: "error",
-            item.sfczr = "1";
+            });
-          });
+            return false;
-        } else {
+          }
-          this.ruleForm.qlrList.forEach((item, index) => {
+          this.ruleForm.qlrList[0].sfczr = "1";
-            if (item.zjh == this.ruleForm.czr) {
-              item.sfczr = "1";
-            } else {
-              item.sfczr = "0";
-            }
-          });
        }
-      }
+        if (this.ruleForm.qlxx.gyfs == "1") {
-      saveData(this.ruleForm).then((res) => {
+          //是否分别持证
-        if (res.code === 200) {
+          if (this.ruleForm.qlxx.sqfbcz == "1") {
-          this.$message({
+            //是
-            showClose: true,
+            this.ruleForm.qlrList.forEach((item, index) => {
-            message: "保存成功！",
+              item.sfczr = "1";
-            type: "success",
+            });
-          });
+          } else {
-          this.$store.dispatch("user/refreshPage", true);
+            this.ruleForm.qlrList.forEach((item, index) => {
-        } else {
+              if (item.zjh == this.ruleForm.czr) {
-          this.$message({
+                item.sfczr = "1";
-            showClose: true,
+              } else {
-            message: res.message,
+                item.sfczr = "0";
-            type: "error",
+              }
-          });
+            });
+          }
        }
-      });
+        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/public.scss";
-@import "~@/styles/slxx/slxx.scss";
+  @import "~@/styles/slxx/slxx.scss";
+  /deep/.vue-treeselect__menu-container {
+    transition: 0.3s !important;
+  }
 </style>