imeik-bizui 2.2.0 → 2.2.1

package/dist/bizui/api/applycenter.js

@@ -238,3 +238,20 @@ export function getExpertsPageQuery(data) {
     data
   })
 }
+
+/**
+ * 获取费用承担部门
+ * @param {*} data
+ * @returns
+ */
+export function queryBudgetDepartManage(data) {
+  return request({
+    url: '/application-center-admin/data/exchange/queryBudgetDepartManage',
+    method: 'post',
+    params: {
+      tagModel: 'APPLY',
+      tagCode: 'al-fxssqxmbh'
+    },
+    data
+  })
+}

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

@@ -0,0 +1,373 @@
+<template>
+  <div :class="isView ? 'inline' : 'w-full'">
+    <div v-if="isView">
+      <ImDiffText v-if="attrs.showDiff" :show-diff="attrs.showDiff" :old-value="myValueName" :no-absolute="true" :new-value="newMyValueName" />
+      <span v-else :title="myValueName">{{ myValueName || '-' }}</span>
+    </div>
+    <el-cascader
+      v-else
+      :key="keyValue"
+      v-model="myValue"
+      class="department-cascader"
+      v-bind="$attrs"
+      :collapse-tags="!attrs.showAllTag"
+      :props="cascaderProps"
+      :options="options"
+      :show-all-levels="!!attrs.showAllLevels"
+      :disabled="!!attrs.disabled"
+      :size="attrs.size || ''"
+      clearable
+      filterable
+      @change="onChange"
+      v-on="listeners"
+    />
+  </div>
+</template>
+
+<script>
+// 引入获取部门数据的接口
+import { queryBudgetDepartManage } from '../../api/applycenter.js'
+export default {
+  name: 'FieldCostBearDepartmentSelect',
+  props: {
+    value: {
+      type: String,
+      default: ''
+    },
+    // 用于接收外部传递扩展配置，如显示方式、默认值、选择器特性
+    attrs: {
+      type: Object,
+      default() {
+        return {}
+      }
+    },
+    // 代理事件监听，如input、change等
+    listeners: {
+      type: Object,
+      default() {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      keyValue: 0,
+      myValue: undefined,
+      options: [],
+      defaultDepartment: undefined
+    }
+  },
+  computed: {
+    /**
+     * 是否多选
+     */
+    isMultiple() {
+      return !!this.attrs.multiple
+    },
+
+    /**
+     * 级联选择器props
+     */
+    cascaderProps() {
+      return {
+        label: 'dicName',
+        value: 'dicValue',
+        children: 'subRegin',
+        expandTrigger: 'click',
+        checkStrictly: !!this.attrs.checkStrictly,
+        emitPath: false,
+        multiple: this.isMultiple
+      }
+    },
+
+    /**
+     * 是否只展示文字
+     */
+    isView() {
+      return this.attrs.isView
+    },
+
+    /**
+     * 差异值
+     */
+    diffValue() {
+      return this.attrs.diffValue
+    },
+
+    /**
+     * 显示值
+     */
+    myValueName() {
+      return this.getDisplayValue(this.myValue, 'dicName')
+    },
+
+    /**
+     * 差异值显示值
+     */
+    newMyValueName() {
+      return this.getDisplayValue(this.diffValue, 'dicName')
+    },
+
+    /**
+     * 显示值orgCode
+     */
+    myValueOrgCode() {
+      return this.getDisplayValue(this.myValue, 'orgCode')
+    }
+  },
+  watch: {
+    // 监听options变化，刷新组件（保持选项和渲染同步）
+    options: {
+      handler() {
+        this.keyValue++
+      }
+    },
+    // 监听value（外部v-model变化），同步myValue
+    value: {
+      immediate: true,
+      handler() {
+        this.setMyValue()
+      }
+    },
+    'attrs.branchJson': {
+      handler(newVal, oldVal) {
+        if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
+          this.getOptions()
+        }
+      }
+    },
+    'attrs.values': {
+      handler(newVal, oldVal) {
+        if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
+          this.getOptions()
+        }
+      }
+    },
+    'attrs.dataRangeType': {
+      handler() {
+        this.getOptions()
+      }
+    },
+    // 监听默认选中模式
+    'attrs.default': {
+      immediate: true,
+      handler(newVal, oldVal) {
+        // 如果默认选中“我的部门”，且无初始值，则设为默认部门
+        if (newVal) {
+          if (newVal !== oldVal && newVal === '2' && !this.value) {
+            this.myValue = this.defaultDepartment
+          } else {
+            !this.isView && (this.myValue = undefined)
+          }
+          this.getOptions(() => {
+            this.onChange()
+          })
+        }
+      }
+    },
+    // 监听特定默认值触发
+    'attrs.defaultValue': {
+      immediate: true,
+      handler(newVal, oldVal) {
+        // 若启用“指定部门”并且当前没值，则设为该默认
+        if (newVal && newVal !== oldVal && this.attrs.default === '3' && !this.value) {
+          this.myValue = newVal
+          this.getOptions(() => {
+            this.onChange()
+          })
+        }
+      }
+    }
+  },
+  created() {
+    if (!this.options?.length) {
+      this.getOptions()
+    }
+  },
+  methods: {
+    /**
+     * 查找目标value在树节点中的完整路径name
+     */
+    findParent(data, target, result) {
+      for (const item of data) {
+        if (item.dicValue === target) {
+          result.unshift(item.dicName)
+          return true
+        }
+        if (item.subRegin?.length) {
+          const isFind = this.findParent(item.subRegin, target, result)
+          if (isFind) {
+            result.unshift(item.dicName)
+            return true
+          }
+        }
+      }
+      return false
+    },
+
+    /**
+     * 获取单选时的完整部门路径
+     */
+    getAllLabel(value) {
+      const result = []
+      this.findParent(this.options, value, result)
+      result.shift() // 移除第一个根节点
+      return result[result.length - 1] || ''
+    },
+
+    /**
+     * 递归查找树节点中某个value对应的属性值
+     * @param arr 树形数组
+     * @param val 查找的dicValue
+     * @param field 要获取的属性名 ('dicName' 或 'orgCode')
+     */
+    findNodeValue(arr, val, field) {
+      for (const item of arr) {
+        if (item.dicValue === val) {
+          return item[field]
+        }
+        if (item.subRegin?.length) {
+          const result = this.findNodeValue(item.subRegin, val, field)
+          if (result !== undefined) {
+            return result
+          }
+        }
+      }
+    },
+
+    /**
+     * 获取显示值（支持多选/单选，支持不同字段）
+     */
+    getDisplayValue(value, field) {
+      if (!value) return ''
+
+      if (this.isMultiple) {
+        if (!Array.isArray(value) || !value.length) return ''
+        return value
+          .map((item) => {
+            if (field === 'dicName') {
+              return this.findNodeValue(this.options, item, 'dicName') || ''
+            }
+            return this.findNodeValue(this.options, item, 'dicValue') || ''
+          })
+          .filter(Boolean)
+          .join(',')
+      } else {
+        if (field === 'dicName') {
+          return this.getAllLabel(value)
+        }
+        return this.findNodeValue(this.options, value, 'dicValue') || ''
+      }
+    },
+
+    setMyValue() {
+      if (!this.value) {
+        this.myValue = undefined
+        return
+      }
+      try {
+        // 如果是字符串且包含逗号，转换为数组
+        if (typeof this.value === 'string' && this.isMultiple) {
+          this.myValue = this.value.split(',').filter(Boolean)
+        } else {
+          this.myValue = this.isMultiple ? (Array.isArray(this.value) ? [...this.value] : [this.value]) : this.value
+        }
+      } catch (error) {
+        this.myValue = undefined
+      }
+    },
+
+    getOptions(callback) {
+      queryBudgetDepartManage({})
+        .then((res) => {
+          if (res.code === 200) {
+            const resData = res.data || {}
+            console.log('resData', resData)
+            this.options = this.formatData(resData.tagBudgetDeptLists) || []
+            this.defaultDepartment = resData.userBudgetDepartment || undefined
+            callback && callback()
+          } else {
+            this.$message.error(res.message)
+          }
+        })
+        .catch((error) => {
+          this.$message.error(error.message || '获取部门数据失败')
+        })
+    },
+
+    formatData(data) {
+      for (let i = 0; i < data.length; i++) {
+        const item = data[i]
+        if (item.subRegin && item.subRegin.length === 0) {
+          delete item.subRegin
+        }
+        if (item.subRegin && item.subRegin.length > 0) {
+          item.subRegin = this.formatData(item.subRegin)
+        }
+      }
+      return data
+    },
+
+    /**
+     * 派发事件
+     */
+    emitEvents(value) {
+      const eventData = {
+        detailName: this.myValueName,
+        detailOrgCode: this.myValueOrgCode
+      }
+      console.log('emitEvents', value, eventData)
+      this.$emit('input', value, eventData)
+      this.$emit('change', value, eventData)
+    },
+
+    /**
+     * 部门选择发生变化后调用
+     */
+    onChange() {
+      // 清空筛选输入
+      if (this.$refs.select) {
+        this.$refs.select.inputValue = ''
+        if (this.isMultiple && !this.myValue?.length) {
+          this.$refs.select.selectedLabel = ''
+        }
+      }
+
+      // 没有部门名时，重置v-model
+      if (!this.myValueName) {
+        this.myValue = undefined
+      }
+
+      // 处理输出值
+      const outputValue = this.myValue ? (this.isMultiple ? this.myValue.join(',') : this.myValue) : ''
+
+      // 如果数据还没加载，异步加载后再派发事件
+      if (!this.options?.length) {
+        this.getOptions(() => {
+          this.emitEvents(outputValue)
+        })
+      } else {
+        this.emitEvents(outputValue)
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.department-cascader {
+  width: 100%;
+
+  ::v-deep {
+    .el-cascader__tags {
+      align-items: center;
+    }
+    .el-cascader__search-input {
+      display: inline-block;
+      width: 10px;
+      flex: unset;
+      min-width: 10px;
+      margin-left: 15px;
+    }
+  }
+}
+</style>