vue2-client 1.22.3 → 1.22.4

package/.history/src/base-client/components/his/XTransfer/XTransfer_20260511171138.vue

@@ -1,787 +0,0 @@
-  <script setup>
-  import { ref, computed, watch, onMounted } from 'vue'
-  import { query, runLogic, getConfigByName } from '@vue2-client/services/api/common'
-
-  const props = defineProps({
-    // 配置名称 - 用于通过 getConfigByName 获取配置
-    queryParamsName: { type: String, default: '' },
-    configName: { type: String, default: '' },
-    // 服务名
-    serverName: { type: String, default: 'af-his' },
-    // 直接属性（优先级高于 config）
-    logicName: { type: String, default: '' },
-    parameter: { type: Object, default: () => ({}) },
-    rowKey: { type: String, default: 'key' },
-    displayKey: { type: String, default: 'title' },
-    descriptionKey: { type: String, default: '' },
-    groupKey: { type: String, default: 'group' },
-    groupLabelKey: { type: String, default: 'label' },
-    groupCountKey: { type: String, default: 'count' },
-    groupItemsKey: { type: String, default: 'items' },
-    leftTitle: { type: String, default: '' },
-    rightTitle: { type: String, default: '' },
-    allText: { type: String, default: 'All' },
-    addHint: { type: String, default: '双击添加' },
-    removeHint: { type: String, default: '双击移除' },
-    leftWidth: { type: String, default: '260px' },
-    rightWidth: { type: String, default: '260px' },
-    height: { type: String, default: '300px' },
-    initialValue: { type: Array, default: () => [] },
-    disabled: { type: Boolean, default: false },
-    // 静态数据
-    data: { type: Array, default: null },
-    // config 对象
-    config: { type: Object, default: null },
-    // 环境
-    env: { type: String, default: 'prod' }
-  })
-
-  const emit = defineEmits(['update:value', 'change', 'loaded'])
-
-  const loading = ref(false)
-  const localValue = ref([])
-  const localDataSource = ref([])
-  const localGroupDataSource = ref([])
-  const localConfig = ref(null)
-
-  // 是否是开发环境
-  const isDev = computed(() => props.env === 'prod' ? false : true)
-
-  // 获取配置值（支持多层级）
-  const getConfig = (key, defaultValue) => {
-    // 1. 优先从 config 对象读取
-    if (props.config && props.config[key] !== undefined) {
-      return props.config[key]
-    }
-    // 2. 从本地配置读取
-    if (localConfig.value && localConfig.value[key] !== undefined) {
-      return localConfig.value[key]
-    }
-    // 3. 从直接属性读取
-    if (props[key] !== undefined) {
-      return props[key]
-    }
-    return defaultValue
-  }
-
-  // UI 配置
-  const logicName = computed(() => getConfig('logicName', props.logicName || ''))
-  const queryParamsName = computed(() => getConfig('queryParamsName', props.queryParamsName || props.configName || ''))
-  const parameter = computed(() => getConfig('parameter', props.parameter || {}))
-  const pageSize = computed(() => getConfig('pageSize', 500))
-
-  // 默认宽度和高度
-  const leftWidth = computed(() => getConfig('leftWidth', '324px'))
-  const rightWidth = computed(() => getConfig('rightWidth', '324px'))
-  const height = computed(() => getConfig('height', '143px'))
-  const allText = computed(() => getConfig('allText', 'All'))
-  const addHint = computed(() => getConfig('addHint', '双击添加'))
-  const removeHint = computed(() => getConfig('removeHint', '双击移除'))
-  const leftTitle = computed(() => getConfig('leftTitle', ''))
-  const rightTitle = computed(() => getConfig('rightTitle', ''))
-  const disabled = computed(() => getConfig('disabled', false))
-  const initialValue = computed(() => getConfig('initialValue', []))
-
-  const totalCount = computed(() => localDataSource.value.length)
-
-  // 监听外部 value 变化
-  watch(() => getConfig('value', undefined), (newVal) => {
-    if (newVal !== undefined && JSON.stringify(newVal) !== JSON.stringify(localValue.value)) {
-      localValue.value = [...newVal]
-    }
-  }, { immediate: true })
-
-  watch(localValue, (newVal) => {
-    emit('update:value', newVal)
-  })
-
-  // ============ 数据加载 ============
-  const loadData = async () => {
-    loading.value = true
-    try {
-      let data = []
-
-      // 1. 优先使用静态 data 属性
-      if (props.data && Array.isArray(props.data)) {
-        console.log('[XTransfer] using props.data')
-        data = props.data
-      }
-      // 2. 使用 logicName 直接加载
-      else if (logicName.value) {
-        console.log('[XTransfer] using logicName:', logicName.value)
-        data = await loadByLogic()
-      }
-      // 3. 使用 queryParamsName 获取配置后再加载
-      else if (queryParamsName.value) {
-        console.log('[XTransfer] using queryParamsName:', queryParamsName.value)
-        await loadByConfig()
-        // loadByConfig 会设置 localConfig 并重新触发 loadData
-        return
-      }
-
-      parseData(data)
-
-      if (initialValue.value.length > 0) {
-        localValue.value = [...initialValue.value]
-      }
-
-      emit('loaded', {
-        dataSource: localDataSource.value,
-        groupDataSource: localGroupDataSource.value
-      })
-    } catch (e) {
-      console.error('[XTransfer] Load error:', e)
-    } finally {
-      loading.value = false
-    }
-  }
-
-  // 通过 queryParamsName 获取配置
-  const loadByConfig = () => {
-    return new Promise((resolve, reject) => {
-      console.log('[XTransfer] getConfigByName:', queryParamsName.value, props.serverName)
-      getConfigByName(queryParamsName.value, props.serverName, async (config) => {
-        console.log('[XTransfer] config loaded:', config)
-        if (!config) {
-          console.error('[XTransfer] config is null')
-          loading.value = false
-          resolve()
-          return
-        }
-
-        // 保存配置
-        localConfig.value = config
-
-        // 用配置中的 logicName 加载数据
-        if (config.logicName) {
-          try {
-            const data = await loadByLogicWithConfig(config)
-            parseData(data)
-            if (initialValue.value.length > 0) {
-              localValue.value = [...initialValue.value]
-            }
-            emit('loaded', {
-              dataSource: localDataSource.value,
-              groupDataSource: localGroupDataSource.value
-            })
-          } catch (e) {
-            console.error('[XTransfer] Load error:', e)
-          }
-        } else if (config.data && Array.isArray(config.data)) {
-          parseData(config.data)
-        }
-
-        loading.value = false
-        resolve()
-      }, isDev.value)
-    })
-  }
-
-  // 使用配置的 logicName 加载数据
-  const loadByLogicWithConfig = async (config) => {
-    const logic = config.logicName || logicName.value
-    const params = config.parameter || parameter.value
-    const server = config.serverName || props.serverName
-
-    console.log('[XTransfer] loadByLogic:', logic, params, server)
-
-    try {
-      const res = await runLogic(logic, params, server, isDev.value)
-      console.log('[XTransfer] logic result:', res)
-      if (res) {
-        return Array.isArray(res) ? res : (res.data || res.result || [])
-      }
-    } catch (e) {
-      console.error('[XTransfer] logic error:', e)
-    }
-    return []
-  }
-
-  // 直接使用 logicName 加载数据
-  const loadByLogic = async () => {
-    const logic = logicName.value
-    const params = parameter.value
-    const server = props.serverName
-
-    console.log('[XTransfer] loadByLogic:', logic, params, server)
-
-    try {
-      const res = await runLogic(logic, params, server, isDev.value)
-      console.log('[XTransfer] logic result:', res)
-      if (res) {
-        return Array.isArray(res) ? res : (res.data || res.result || [])
-      }
-    } catch (e) {
-      console.error('[XTransfer] logic error:', e)
-    }
-    return []
-  }
-
-  // ============ 数据解析 ============
-  const parseData = (data) => {
-    if (!data || !Array.isArray(data)) {
-      localDataSource.value = []
-      localGroupDataSource.value = []
-      return
-    }
-
-    const rowKey = getConfig('rowKey', 'key')
-    const displayKey = getConfig('displayKey', 'title')
-    const descriptionKey = getConfig('descriptionKey', '')
-    const groupKey = getConfig('groupKey', 'group')
-    const groupLabelKey = getConfig('groupLabelKey', 'label')
-    const groupCountKey = getConfig('groupCountKey', 'count')
-    const groupItemsKey = getConfig('groupItemsKey', 'items')
-
-    const firstItem = data[0]
-    const hasGroup = firstItem && (firstItem[groupKey] || firstItem[groupLabelKey])
-
-    console.log('[XTransfer] parseData hasGroup:', hasGroup)
-
-    if (hasGroup) {
-      localGroupDataSource.value = data.map(group => ({
-        key: group[rowKey] || group.key,
-        label: group[groupLabelKey] || group.label || '未命名',
-        count: group[groupCountKey] || (group[groupItemsKey]?.length || 0),
-        items: transformItems(group[groupItemsKey] || group.items || []),
-        _rawData: group
-      }))
-
-      localDataSource.value = []
-      data.forEach(group => {
-        const items = group[groupItemsKey] || group.items || []
-        localDataSource.value.push(...transformItems(items))
-      })
-    } else {
-      localDataSource.value = transformItems(data)
-      localGroupDataSource.value = []
-    }
-  }
-
-  const transformItems = (items) => {
-    if (!items || !Array.isArray(items)) return []
-
-    const rowKey = getConfig('rowKey', 'key')
-    const displayKey = getConfig('displayKey', 'title')
-    const descriptionKey = getConfig('descriptionKey', '')
-
-    return items.map((item, index) => ({
-      key: String(getNestedValue(item, rowKey) || item.key || `item-${index}`),
-      title: String(getNestedValue(item, displayKey) || item.title || `选项${index + 1}`),
-      description: descriptionKey ? String(getNestedValue(item, descriptionKey) || '') : '',
-      disabled: item.disabled === true,
-      _rawData: item
-    }))
-  }
-
-  const getNestedValue = (obj, path) => {
-    if (!path || !obj) return null
-    return path.split('.').reduce((acc, part) => {
-      if (acc === null || acc === undefined) return null
-      return acc[part]
-    }, obj)
-  }
-
-  // ============ 交互操作 ============
-  const addItem = (key) => {
-    if (disabled.value) return
-    if (!localValue.value.includes(key)) {
-      localValue.value = [...localValue.value, key]
-      emitChange()
-    }
-  }
-
-  const removeItem = (key) => {
-    if (disabled.value) return
-    localValue.value = localValue.value.filter(k => k !== key)
-    emitChange()
-  }
-
-  const selectAll = () => {
-    if (disabled.value) return
-    const allKeys = localDataSource.value.map(item => item.key)
-    localValue.value = [...allKeys]
-    emitChange()
-  }
-
-  const clearAll = () => {
-    if (disabled.value) return
-    localValue.value = []
-    emitChange()
-  }
-
-  const emitChange = () => {
-    emit('change', {
-      value: localValue.value,
-      data: getSelectedData()
-    })
-  }
-
-  const getSelectedData = () => {
-    return localValue.value.map(key => {
-      const item = localDataSource.value.find(d => d.key === key)
-      return item?._rawData
-    }).filter(Boolean)
-  }
-
-  const getItemTitle = (key) => {
-    const item = localDataSource.value.find(d => d.key === key)
-    return item?.title || key
-  }
-
-  const getItemDesc = (key) => {
-    const item = localDataSource.value.find(d => d.key === key)
-    return item?.description || ''
-  }
-
-  // 暴露方法
-  const init = (config) => {
-    console.log('[XTransfer] init with config:', config)
-    if (config) {
-      localConfig.value = config
-      loadData()
-    }
-  }
-
-  const refresh = () => {
-    loadData()
-  }
-
-  defineExpose({
-    loadData,
-    init,
-    refresh,
-    getSelectedData,
-    getSelectedKeys: () => [...localValue.value],
-    clear: clearAll,
-    setValue: (keys) => { localValue.value = keys }
-  })
-
-  onMounted(() => {
-    console.log('[XTransfer] mounted, queryParamsName:', props.queryParamsName, 'logicName:', props.logicName)
-    loadData()
-  })
-
-  // 监听配置变化
-  watch(() => [props.queryParamsName, props.logicName, props.config, props.data], () => {
-    loadData()
-  }, { deep: true })
-  </script>
-
-  <template>
-    <div class="x-transfer-component">
-      <a-spin :spinning="loading">
-        <div class="x-transfer-container">
-          <!-- 左侧：可选项列表 -->
-          <div class="transfer-panel left-panel" :style="{ width: leftWidth }">
-            <div class="panel-header">
-              <span v-if="leftTitle" class="panel-title">{{ leftTitle }}</span>
-            </div>
-            <div class="panel-body" :style="{ maxHeight: height }">
-              <!-- 分组列表 -->
-              <template v-if="localGroupDataSource.length > 0">
-                <div
-                  v-for="group in localGroupDataSource"
-                  :key="group.key"
-                  class="group-section"
-                >
-                  <div class="group-label-row">
-                    <span class="group-label">{{ group.label }}</span>
-                    <span class="group-count" v-if="group.count > 0">{{ group.count }}</span>
-                  </div>
-                  <div class="group-items">
-                    <div
-                      v-for="item in group.items"
-                      :key="item.key"
-                      class="item-row"
-                      :class="{ selected: localValue.includes(item.key) }"
-                      :title="item.title"
-                      @dblclick="addItem(item.key)"
-                    >
-                      <span class="item-title">{{ item.title }}</span>
-                      <span v-if="item.description" class="item-desc">{{ item.description }}</span>
-                      <span class="item-arrow">
-                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                          <path d="M9 18l6-6-6-6"/>
-                        </svg>
-                      </span>
-                    </div>
-                  </div>
-                </div>
-              </template>
-
-              <!-- 简单列表 -->
-              <template v-else>
-                <div
-                  v-for="item in localDataSource"
-                  :key="item.key"
-                  class="item-row"
-                  :class="{ selected: localValue.includes(item.key) }"
-                  :title="item.title"
-                  @dblclick="addItem(item.key)"
-                >
-                  <span class="item-title">{{ item.title }}</span>
-                  <span v-if="item.description" class="item-desc">{{ item.description }}</span>
-                  <span class="item-arrow">
-                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                      <path d="M9 18l6-6-6-6"/>
-                    </svg>
-                  </span>
-                </div>
-              </template>
-
-              <a-empty v-if="localDataSource.length === 0 && !loading" />
-            </div>
-          </div>
-
-          <!-- 中间：操作按钮 -->
-          <div class="transfer-actions">
-            <div class="action-row">
-              <span class="action-text">{{ allText }}</span>
-              <span
-                class="action-arrow"
-                :class="{ disabled: disabled || totalCount === 0 }"
-                @click="selectAll"
-              >
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                  <path d="M9 18l6-6-6-6"/>
-                </svg>
-              </span>
-            </div>
-            <div class="action-row">
-              <span class="action-text">{{ allText }}</span>
-              <span
-                class="action-arrow left"
-                :class="{ disabled: disabled || localValue.length === 0 }"
-                @click="clearAll"
-              >
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                  <path d="M15 18l-6-6 6-6"/>
-                </svg>
-              </span>
-            </div>
-          </div>
-
-          <!-- 右侧：已选列表 -->
-          <div class="transfer-panel right-panel" :style="{ width: rightWidth }">
-            <div class="panel-header">
-              <span v-if="rightTitle" class="panel-title">{{ rightTitle }}</span>
-              <span class="panel-count selected" v-if="localValue.length > 0">{{ localValue.length }}</span>
-            </div>
-            <div class="panel-body" :style="{ maxHeight: height }">
-              <div
-                v-for="key in localValue"
-                :key="key"
-                class="item-row selected-item"
-                :title="getItemTitle(key)"
-                @dblclick="removeItem(key)"
-              >
-                <span class="item-arrow left-arrow">
-                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                    <path d="M15 18l-6-6 6-6"/>
-                  </svg>
-                </span>
-                <span class="item-title">{{ getItemTitle(key) }}</span>
-                <span v-if="getItemDesc(key)" class="item-desc">{{ getItemDesc(key) }}</span>
-              </div>
-              <a-empty v-if="localValue.length === 0" />
-            </div>
-          </div>
-        </div>
-      </a-spin>
-    </div>
-  </template>
-
-  <style scoped>
-  /* 思源黑体字体 */
-  @font-face {
-    font-family: 'Source Han Sans';
-    src: local('Source Han Sans'),
-        local('思源黑体'),
-        local('Noto Sans CJK SC'),
-        local('Microsoft YaHei'),
-        local('SimHei');
-    font-weight: normal;
-  }
-
-  .x-transfer-component {
-    width: 100%;
-    font-family: 'Source Han Sans', 'Noto Sans CJK SC', 'Microsoft YaHei', sans-serif;
-  }
-
-  .x-transfer-container {
-    display: flex !important;
-    flex-direction: row !important;
-    gap: 12px;
-    align-items: flex-start;
-    width: 100%;
-  }
-
-  .transfer-panel {
-    width: 324px;
-    height: 143px;
-    border: 1px solid #E5E9F0;
-    border-radius: 6px;
-    background: #fff;
-    flex: 0 0 auto;
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .panel-header {
-    padding: 0 12px;
-    background: #fafafa;
-    border-bottom: 1px solid #E5E9F0;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    height: 37px;
-    box-sizing: border-box;
-    flex-shrink: 0;
-  }
-
-  .panel-title {
-    font-family: 'Source Han Sans', 'Noto Sans CJK SC', 'Microsoft YaHei', sans-serif;
-    font-size: 16px;
-    font-weight: normal;
-    line-height: 37px;
-    letter-spacing: 0em;
-    font-feature-settings: "kern" on;
-    color: #313131;
-  }
-
-  .panel-count {
-    font-family: 'Source Han Sans', 'Noto Sans CJK SC', 'Microsoft YaHei', sans-serif;
-    font-size: 16px;
-    font-weight: normal;
-    line-height: 37px;
-    letter-spacing: 0em;
-    font-feature-settings: "kern" on;
-    color: #313131;
-    background: #f0f0f0;
-    padding: 0 8px;
-    border-radius: 10px;
-  }
-
-  .panel-count.selected {
-    background: #1890ff;
-    color: #fff;
-  }
-
-  .hint {
-    font-family: 'Source Han Sans', 'Noto Sans CJK SC', 'Microsoft YaHei', sans-serif;
-    font-size: 16px;
-    font-weight: normal;
-    line-height: 37px;
-    letter-spacing: 0em;
-    font-feature-settings: "kern" on;
-    color: #94979E;
-    width: 100%;
-    text-align: center;
-  }
-
-  /* 中间操作区域 */
-  .transfer-actions {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    gap: 8px;
-    width: 68px;
-    height: 143px;
-    flex-shrink: 0;
-    border: 1px solid #E5E9F0;
-    border-radius: 6px;
-    background: #FFFFFF;
-    box-sizing: border-box;
-  }
-
-  .action-row {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 6px;
-  }
-
-  .action-text {
-    font-family: 'Source Han Sans', 'Noto Sans CJK SC', 'Microsoft YaHei', sans-serif;
-    font-size: 16px;
-    font-weight: normal;
-    line-height: 37px;
-    letter-spacing: 0em;
-    font-feature-settings: "kern" on;
-    color: #313131;
-    text-align: center;
-  }
-
-  .action-arrow {
-    width: 9.51px;
-    height: 12.26px;
-    color: #94979E;
-    flex-shrink: 0;
-    cursor: pointer;
-    transition: opacity 0.2s;
-  }
-
-  .action-arrow.left {
-    transform: rotate(180deg);
-  }
-
-  .action-arrow:hover {
-    opacity: 0.7;
-  }
-
-  .action-arrow.disabled {
-    opacity: 0.3;
-    cursor: not-allowed;
-  }
-
-  .action-arrow.disabled:hover {
-    opacity: 0.3;
-  }
-
-  .panel-body {
-    padding: 0;
-    overflow-y: auto;
-    flex: 1;
-    min-height: 0;
-  }
-
-  .group-section {
-    margin-bottom: 12px;
-  }
-
-  .group-section:last-child {
-    margin-bottom: 0;
-  }
-
-  .group-label-row {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    padding: 0 12px;
-    height: 37px;
-    box-sizing: border-box;
-  }
-
-  .group-label {
-    font-family: 'Source Han Sans', 'Noto Sans CJK SC', 'Microsoft YaHei', sans-serif;
-    font-size: 16px;
-    font-weight: normal;
-    line-height: 37px;
-    letter-spacing: 0em;
-    font-feature-settings: "kern" on;
-    color: #313131;
-  }
-
-  .group-count {
-    font-family: 'Source Han Sans', 'Noto Sans CJK SC', 'Microsoft YaHei', sans-serif;
-    font-size: 16px;
-    font-weight: normal;
-    line-height: 37px;
-    letter-spacing: 0em;
-    color: #94979E;
-  }
-
-  .group-items {
-    border: 1px solid #E5E9F0;
-    border-radius: 6px;
-    overflow: hidden;
-    margin: 0 12px 12px 12px;
-  }
-
-  .item-row {
-    padding: 0 12px;
-    border-bottom: 1px solid #E5E9F0;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    transition: background-color 0.15s;
-    user-select: none;
-    height: 37px;
-    box-sizing: border-box;
-  }
-
-  .item-row:last-child {
-    border-bottom: none;
-  }
-
-  .item-row:hover {
-    background: #f5f5f5;
-  }
-
-  .item-row.selected {
-    background: #e6f7ff;
-  }
-
-  .item-row.selected:hover {
-    background: #bae7ff;
-  }
-
-  .item-title {
-    font-family: 'Source Han Sans', 'Noto Sans CJK SC', 'Microsoft YaHei', sans-serif;
-    font-size: 16px;
-    font-weight: normal;
-    line-height: 37px;
-    letter-spacing: 0em;
-    font-feature-settings: "kern" on;
-    color: #313131;
-    flex-shrink: 0;
-  }
-
-  .item-desc {
-    font-family: 'Source Han Sans', 'Noto Sans CJK SC', 'Microsoft YaHei', sans-serif;
-    font-size: 16px;
-    font-weight: normal;
-    line-height: 37px;
-    letter-spacing: 0em;
-    color: #94979E;
-    margin-left: 8px;
-    flex: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  /* 数据项箭头 */
-  .item-arrow {
-    width: 16px;
-    height: 16px;
-    color: #94979E;
-    flex-shrink: 0;
-    margin-left: auto;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .item-arrow svg {
-    width: 100%;
-    height: 100%;
-  }
-
-  .item-arrow.left-arrow {
-    margin-left: 0;
-    margin-right: 8px;
-  }
-
-  .remove-icon {
-    color: #94979E;
-    font-weight: normal;
-    margin-right: 4px;
-    flex-shrink: 0;
-    font-family: 'Source Han Sans', 'Noto Sans CJK SC', 'Microsoft YaHei', sans-serif;
-    font-size: 16px;
-    line-height: 37px;
-  }
-
-  .selected-item {
-    background: #fff;
-    border-color: #E5E9F0;
-  }
-
-  .selected-item:hover {
-    background: #f5f5f5 !important;
-  }
-  </style>