imeik-bizui 2.2.5 → 2.2.7

package/dist/bizui/api/tagcenter.js

@@ -11,4 +11,15 @@ export function queryTagList(params) {
     method: 'get',
     params
   })
-}
+}
+
+/**
+ * 获取省市区
+ */
+export function getRegionData(params) {
+  return request({
+    url: '/tagcenter-admin/dictionary/queryCityTree',
+    method: 'get',
+    params
+  })
+}

package/dist/bizui/src/CommonRegionCascader/index.vue

@@ -0,0 +1,258 @@
+<!--
+  区域级联选择器组件
+
+  用途：
+  1. 支持区域级联选择
+  2. 支持单选和多选
+  3. 支持展开收起
+  4. 支持指定某个区域节点
+  5. 支持指定某个区域节点以后是否展示根节点
+
+  属性说明：
+  value: 选择器的值
+  multiple: 是否多选
+  emitPath: 是否返回选中节点的完整路径
+  expandTrigger: 次级菜单的展开方式
+  checkStrictly: 是否严格的遵守父子节点不互相关联
+  isView: 是否仅展示文字
+  level: 指定层级，字符串类型，需要注意的是省对应的是‘2’
+  placeholder: 占位符
+  ...attrs: 其他属性会透传给el-cascader
+  props: 级联选择器配置 默认值为：
+  {
+    label: 'name',
+    value: 'code',
+    children: 'subRegin',
+    expandTrigger: 'hover',
+    checkStrictly: true,
+    emitPath: false,
+    multiple: false
+  }
+
+  使用示例：
+  <CommonRegionCascader
+    v-model="formConfig.props.regionCodes"
+    multiple
+    :show-all-levels="false"
+  ></CommonRegionCascader>
+-->
+<template>
+  <el-cascader v-if="!isView" v-model="myValue" :props="props" :options="options" :placeholder="placeholder" clearable filterable v-bind="$attrs" @change="handleChange"></el-cascader>
+  <div v-else>{{ myLabel || '-' }}</div>
+</template>
+
+<script>
+import { getRegionData } from '../../api/tagcenter'
+
+export default {
+  name: 'RegionCascader',
+  props: {
+    value: {
+      type: [String, Array],
+      default: undefined
+    },
+    placeholder: {
+      type: String,
+      default: '请选择'
+    },
+    level: {
+      type: String,
+      default: undefined
+    },
+    checkStrictly: {
+      type: Boolean,
+      default: true
+    },
+    emitPath: {
+      type: Boolean,
+      default: false
+    },
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    props: {
+      type: Object,
+      default() {
+        return {
+          label: 'name',
+          value: 'code',
+          children: 'subRegin',
+          expandTrigger: 'hover',
+          checkStrictly: this.checkStrictly,
+          emitPath: this.emitPath,
+          multiple: this.multiple
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      myValue: undefined,
+      options: []
+    }
+  },
+  computed: {
+    isView() {
+      return this.$attrs.isView
+    },
+    myLabel() {
+      return this.getLabel(this.options, this.myValue)
+    }
+  },
+  watch: {
+    value: {
+      immediate: true,
+      handler() {
+        this.setMyValue()
+      }
+    }
+  },
+  created() {
+    this.getOptions()
+  },
+  methods: {
+    setMyValue() {
+      try {
+        this.myValue = JSON.parse(JSON.stringify(this.value))
+      } catch (error) {
+        this.myValue = undefined
+      }
+    },
+
+    getOptions() {
+      getRegionData({}).then((res) => {
+        if (res.code === 200) {
+          this.options = res.data || []
+          this.formatData(this.options)
+        }
+      })
+    },
+
+    formatData(regionData) {
+      for (let i = 0; i < regionData.length; i++) {
+        const item = regionData[i]
+        if (this.level && this.level === item.level) {
+          delete item.subRegin
+          continue
+        }
+        if (item.subRegin && item.subRegin.length === 0) {
+          delete item.subRegin
+        }
+        if (item.subRegin && item.subRegin.length > 0) {
+          this.formatData(item.subRegin)
+        }
+      }
+    },
+    /**
+     * 根据值获取标签文本
+     * @param {Array} options - 选项列表
+     * @param {String|Array} value - 选中的值，可能是单个值、数组或路径数组
+     * @returns {String} 标签文本
+     */
+    getLabel(options, value) {
+      if (!value || !options || options.length === 0) {
+        return ''
+      }
+
+      // 如果 value 是数组（可能是多选或路径数组）
+      if (Array.isArray(value)) {
+        // 如果数组为空
+        if (value.length === 0) {
+          return ''
+        }
+
+        // 判断是否是路径数组（emitPath为true时，value是路径数组，如['110000', '110100', '110101']）
+        // 路径数组的第一个元素是省份code，最后一个元素是选中的code
+        if (this.emitPath && value.length > 0) {
+          // 路径数组，需要找到路径上所有节点的名称
+          const labels = []
+          let currentOptions = options
+
+          for (let i = 0; i < value.length; i++) {
+            const code = value[i]
+            const item = this.findItemByCode(currentOptions, code)
+            if (item) {
+              labels.push(item.name)
+              if (item.subRegin && i < value.length - 1) {
+                currentOptions = item.subRegin
+              }
+            } else {
+              break
+            }
+          }
+
+          return labels.join(' / ')
+        } else {
+          // 多选情况，value是code数组
+          const labels = []
+          value.forEach((code) => {
+            const label = this.findLabelByCode(options, code)
+            if (label) {
+              labels.push(label)
+            }
+          })
+          return labels.join(', ')
+        }
+      } else {
+        // 单选情况，value是单个code
+        return this.findLabelByCode(options, value) || ''
+      }
+    },
+    /**
+     * 根据code在options中查找对应的名称
+     * @param {Array} options - 选项列表
+     * @param {String} code - 要查找的code
+     * @returns {String} 对应的名称
+     */
+    findLabelByCode(options, code) {
+      if (!code || !options || options.length === 0) {
+        return ''
+      }
+
+      for (let i = 0; i < options.length; i++) {
+        const item = options[i]
+        if (item.code === code) {
+          return item.name
+        }
+        if (item.subRegin && item.subRegin.length > 0) {
+          const result = this.findLabelByCode(item.subRegin, code)
+          if (result) {
+            return result
+          }
+        }
+      }
+      return ''
+    },
+    /**
+     * 根据code在options中查找对应的项
+     * @param {Array} options - 选项列表
+     * @param {String} code - 要查找的code
+     * @returns {Object} 对应的项
+     */
+    findItemByCode(options, code) {
+      if (!code || !options || options.length === 0) {
+        return null
+      }
+
+      for (let i = 0; i < options.length; i++) {
+        const item = options[i]
+        if (item.code === code) {
+          return item
+        }
+        if (item.subRegin && item.subRegin.length > 0) {
+          const result = this.findItemByCode(item.subRegin, code)
+          if (result) {
+            return result
+          }
+        }
+      }
+      return null
+    },
+    handleChange() {
+      this.$emit('input', this.myValue)
+      this.$emit('change', this.myValue)
+    }
+  }
+}
+</script>