设备档案卡级联选择弹窗界面

src/views/component/selectType.vue

@@ -0,0 +1,196 @@
+<template>
+<div style="padding:5% 0;">
+  <van-row >
+  <van-col span="9" style="text-align:right;font-size:14px;color:#666" >使用说明书分类</van-col>
+  <van-col span="15">
+    <van-row @click="clickPicker">
+      <van-col span="21" style="font-size:14px;color:#aaa;padding-left:5% ;">{{pickerCol==''?"请选择":pickerCol==null?"请选择":pickerCol}}</van-col>
+      <van-col span="3">
+         <van-icon name="arrow" color="#aaa" />
+      </van-col>
+    </van-row>
+    <van-popup v-model="showPopup"  position="bottom" style="height:50%;width:100%;">
+      <van-picker
+          ref="cascader"
+          v-model="cascaderData"
+          item-height="60%"
+          :columns="columns"
+          :props="props"
+          :disabled="readonly"
+          show-toolbar
+          style="margin-top:0%;"
+          @cancel="showPopup=false"
+          @confirm="onConfirm"
+  >
+      </van-picker>
+    </van-popup>
+  </van-col>
+</van-row>
+</div>
+</template>
+<script>
+import curdPost from '@/business/platform/form/utils/custom/joinCURD.js'
+// import Json from '@/business/platform/serv/components/json.vue'
+import TreeUtils from '@/utils/tree'
+export default {
+  props: {
+    value: { // value
+      type: [String, Number, Object, Array],
+      default() {
+        return this.multiple ? [] : {}
+      }
+    },
+    // 所有字段数据,(包含主主子表)
+    formData: [Object, Array],
+    field: {
+      type: Object,
+      required: true
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    readonlyStyle: {
+      type: String,
+      default: 'text'
+    }
+  },
+  data() {
+    const { first, second } = this.$store.getters.level
+    const levelInfos = second || first
+    return {
+      showPopup: false,
+      pickerCol: '',
+      props: {
+        value: 'ID_', label: 'name_', children: 'children'
+      },
+      levelInfos,
+      cascaderData: [],
+      options: []
+    }
+  },
+  computed: {
+    columns() {
+      function buildColumns(items, level = 0) {
+        return items.map(item => {
+          const column = { text: `${item.name_} ${item.children && item.children.length ? `(${item.children.length})` : ''}`,
+            value: item.value || item.ID_ }
+          if (item.children && item.children.length && level < MAX_DEPTH) {
+            column.children = buildColumns(item.children, level + 1)
+          }
+          return column
+        })
+      }
+      // 设定递归的最大深度，根据实际情况调整
+      const MAX_DEPTH = 3
+      // 确保options已定义且不为空
+      if (this.options && this.options.length) {
+        return buildColumns(this.options)
+      } else {
+        return []
+      }
+      // const formatted = this.options.map((item) => {
+      //   // 这里简化处理，实际可能需要递归处理多级
+      //   return {
+      //     text: `${item.name_} ${item.children ? `(${item.children.length})` : ''}`,
+      //     value: item.value
+      //   }
+      // })
+      // return formatted
+    }
+  },
+  watch: {
+    value: {
+      handler(val, oldVal) {
+        if (val) {
+          if (typeof val === 'string') {
+            this.cascaderData = val.split(',')
+          } else {
+            this.cascaderData = val
+          }
+        } else {
+          this.cascaderData = []
+        }
+      },
+      immediate: true
+    }
+    // readonly: {
+    //     handler: function (val, oldVal) {
+    //         // console.log('65 formData', this.formData)
+    //         // console.log('65 readonly', val)
+    //         console.log('65 readonlyStyle', this.readonlyStyle)
+    //     },
+    //     immediate: true
+    // }
+  },
+  async created() {
+    await this.getCascaderOptions()
+  },
+  methods: {
+    // 点击确定
+    onConfirm(value, index) {
+      console.log('点击确定获取到的数据', value, index)
+      // 数组
+      this.showPopup = false
+      this.pickerCol = value.join('/')
+      const authorityBuMen = []
+      const authority = JSON.parse(this.options[index[0]].AUTHORITY_NAME)
+      const wenJianXiLeiArrs = value.map(item => item.replace(/\s*\(\d+\)\s*/g, ''))
+      // 组件本身字段的回填值
+      const arrayId = this.$refs['cascader'].getValues()
+      const arrId = arrayId.map(item => item.value)
+      this.$emit('update:value', arrId)
+      this.$emit(
+        'change-data',
+        'guiDangLuJingXinX',
+        JSON.stringify({
+          wenJianXiLei: wenJianXiLeiArrs.join(' / '),
+          xiLeiId: arrId[arrId.length - 1],
+          quanXianLeiXing: authority.chaYue })
+      )
+      this.$emit('change-data', 'wenJianXiLei', wenJianXiLeiArrs.join(' / '))
+      this.$emit('change-data', 'xiLeiId', arrId[arrId.length - 1])
+      this.$emit('change-data', 'quanXianLeiXing', authority.chaYue)
+      for (var i of authority.buMen) {
+        if (i[0] === this.levelInfos || i[1] === this.levelInfos) {
+          authorityBuMen.push(i[i.length - 1])
+        }
+      }
+      this.$emit(
+        'change-data',
+        'quanXianXinXi',
+        authorityBuMen.join(',')
+      )
+      this.$emit('change-data', 'zhuanYeBuMen', authorityBuMen.join(','))
+      this.$emit('change-data', 'guiShu', authorityBuMen.join(','))
+    },
+
+    // 点击级联选择出现
+    clickPicker() {
+      this.showPopup = true
+    },
+    // 获取文件分类信息
+    async getCascaderOptions() {
+      const sql = `select *FROM ibps_cat_type WHERE  authority_name like '%${this.levelInfos}%' ORDER BY sn_ ASC`
+      curdPost('sql', sql).then((res) => {
+        if (res.state === 200) {
+          const datas = res.variables.data
+          this.sqlDatas = datas
+          if (datas.length > 0) {
+            this.options = this.toTree(datas)
+          }
+        }
+      })
+    },
+    toTree(data) {
+      return TreeUtils.transformToTreeFormat(data, {
+        idKey: 'ID_',
+        pIdKey: 'PARENT_ID_',
+        childrenKey: 'children'
+      })
+    }
+  }
+}
+</script>
+<style scoped lang="scss"></style>
+