vue2-client 1.22.2 → 1.22.3

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

@@ -0,0 +1,739 @@
+<template>
+  <div class="x-transfer-wrapper">
+    <div class="transfer-header">
+      <slot name="title">
+        <span class="header-title">{{ title }}</span>
+      </slot>
+    </div>
+    <div class="transfer-content">
+      <div class="x-transfer-component">
+        <a-spin :spinning="loading">
+          <div class="x-transfer-container">
+            <!-- 左侧：可选项列表 -->
+            <div class="transfer-panel left-panel">
+              <div class="panel-header" v-if="showLeftHeader">
+                <span class="panel-title">{{ leftTitle }}</span>
+              </div>
+              <div class="panel-body">
+                <!-- 分组列表 -->
+                <template v-if="localGroupDataSource.length > 0">
+                  <div
+                    v-for="group in localGroupDataSource"
+                    :key="group.key"
+                    class="group-section"
+                  >
+                    <div class="group-label-row" @click="toggleGroup(group.key)">
+                      <span class="group-label">{{ group.label }}</span>
+                      <a-icon
+                        type="right"
+                        class="item-icon icon-right"
+                        @click.stop="addGroupItems(group)"
+                      />
+                    </div>
+                    <div class="group-items" v-show="isGroupExpanded(group.key)">
+                      <div
+                        v-for="item in group.items"
+                        :key="item.key"
+                        class="item-row item-row-left"
+                        :class="{ selected: localValue.includes(item.key) }"
+                        :title="item.title"
+                        @dblclick="addItem(item.key)"
+                      >
+                        <span class="item-title">{{ item.title }}</span>
+                        <a-icon type="right" class="item-icon icon-right" @click.stop="addItem(item.key)"/>
+                      </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>
+                    <a-icon type="right" class="item-icon icon-right" @click.stop="addItem(item.key)"/>
+                  </div>
+                </template>
+
+                <a-empty v-if="localDataSource.length === 0 && !loading"/>
+              </div>
+            </div>
+
+            <!-- 中间：操作按钮容器（上下结构） -->
+            <div class="transfer-actions">
+              <div class="action-box" @click="selectAll">
+                <span class="action-text">{{ allText }}</span>
+                <a-icon type="right"/>
+              </div>
+              <div class="action-box" @click="clearAll">
+                <span class="action-text">{{ allText }}</span>
+                <a-icon type="left"/>
+              </div>
+            </div>
+
+            <!-- 右侧：已选列表 -->
+            <div class="transfer-panel right-panel">
+              <div class="panel-header" v-if="showRightHeader">
+                <span v-if="rightTitle" class="panel-title">{{ rightTitle }}</span>
+              </div>
+              <div class="panel-body">
+                <div
+                  v-for="key in localValue"
+                  :key="key"
+                  class="item-row selected-item"
+                  :title="getItemTitle(key)"
+                  @dblclick="removeItem(key)"
+                >
+                  <a-icon type="left" class="item-icon icon-left" @click.stop="removeItem(key)"/>
+                  <span class="item-title">{{ getItemTitle(key) }}</span>
+                </div>
+                <a-empty v-if="localValue.length === 0"/>
+              </div>
+            </div>
+          </div>
+        </a-spin>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted } from 'vue'
+import { query, runLogic, getConfigByName } from '@vue2-client/services/api/common'
+
+const props = defineProps({
+  queryParamsName: { type: String, default: '' },
+  configName: { type: String, default: '' },
+  serverName: { type: String, default: 'af-his' },
+  logicName: { type: String, default: '' },
+  parameter: { type: Object, default: () => ({}) },
+  rowKey: { type: String, default: 'key' },
+  displayKey: { type: String, default: 'title' },
+  groupKey: { type: String, default: 'group' },
+  groupLabelKey: { type: String, default: 'label' },
+  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: '双击移除' },
+  initialValue: { type: Array, default: () => [] },
+  disabled: { type: Boolean, default: false },
+  data: { type: Array, default: null },
+  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 expandedGroups = ref([])
+
+const isDev = computed(() => props.env === 'prod' ? false : true)
+
+const getConfig = (key, defaultValue) => {
+  if (props.config && props.config[key] !== undefined) {
+    return props.config[key]
+  }
+  if (localConfig.value && localConfig.value[key] !== undefined) {
+    return localConfig.value[key]
+  }
+  if (props[key] !== undefined) {
+    return props[key]
+  }
+  return defaultValue
+}
+
+const logicName = computed(() => getConfig('logicName', props.logicName || ''))
+const queryParamsName = computed(() => getConfig('queryParamsName', props.queryParamsName || props.configName || ''))
+const parameter = computed(() => getConfig('parameter', props.parameter || {}))
+
+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 title = computed(() => getConfig('title', ''))
+const initialValue = computed(() => getConfig('initialValue', []))
+
+const showLeftHeader = computed(() => !!leftTitle.value)
+const showRightHeader = computed(() => !!rightTitle.value)
+
+const totalCount = computed(() => localDataSource.value.length)
+
+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 {
+    await loadByConfig()
+  } catch (e) {
+    console.error('[XTransfer] Load error:', e)
+  } finally {
+    loading.value = false
+  }
+}
+
+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
+
+      if (config.logicName) {
+        try {
+          const result = await loadByLogicWithConfig(config)
+          const { data, initialValue: logicInitialValue } = result
+
+          parseData(data)
+
+          const initValue = logicInitialValue.length > 0 ? logicInitialValue : initialValue.value
+          if (initValue.length > 0) {
+            localValue.value = [...initValue]
+          }
+
+          emit('loaded', {
+            dataSource: localDataSource.value,
+            groupDataSource: localGroupDataSource.value,
+            initialValue: initValue
+          })
+        } catch (e) {
+          console.error('[XTransfer] Load error:', e)
+        }
+      } else if (config.data && Array.isArray(config.data)) {
+        parseData(config.data)
+        if (initialValue.value.length > 0) {
+          localValue.value = [...initialValue.value]
+        }
+      }
+
+      loading.value = false
+      resolve()
+    }, isDev.value)
+  })
+}
+
+const parseData = (data) => {
+  if (!data || !Array.isArray(data)) {
+    localDataSource.value = []
+    localGroupDataSource.value = []
+    return
+  }
+
+  const rowKey = getConfig('rowKey', 'key')
+  const displayKey = getConfig('displayKey', 'title')
+  const groupKey = getConfig('groupKey', 'group')
+  const groupLabelKey = getConfig('groupLabelKey', 'label')
+  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, index) => ({
+      key: group[rowKey] || group.key || `group-${index}`,
+      label: group[groupLabelKey] || group.label || '未命名',
+      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 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 === null || res === undefined) {
+      return { data: [], initialValue: [] }
+    }
+
+    if (Array.isArray(res)) {
+      return { data: res, initialValue: [] }
+    }
+
+    if (typeof res === 'object') {
+      return {
+        data: res.data || res.result || [],
+        initialValue: res.initialValue || res.selected || res.defaultValue || []
+      }
+    }
+
+    return { data: [], initialValue: [] }
+  } catch (e) {
+    console.error('[XTransfer] logic error:', e)
+    return { data: [], initialValue: [] }
+  }
+}
+
+const transformItems = (items) => {
+  if (!items || !Array.isArray(items)) return []
+
+  const rowKey = getConfig('rowKey', 'key')
+  const displayKey = getConfig('displayKey', 'title')
+
+  return items.map((item, index) => ({
+    key: String(getNestedValue(item, rowKey) || item.key || `item-${index}`),
+    title: String(getNestedValue(item, displayKey) || item.title || `选项${index + 1}`),
+    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 addGroupItems = (group) => {
+  if (disabled.value) return
+  const keys = group.items.map(item => item.key)
+  const newKeys = keys.filter(key => !localValue.value.includes(key))
+  if (newKeys.length > 0) {
+    localValue.value = [...localValue.value, ...newKeys]
+    emitChange()
+  }
+}
+
+const toggleGroup = (groupKey) => {
+  const index = expandedGroups.value.indexOf(groupKey)
+  if (index > -1) {
+    expandedGroups.value.splice(index, 1)
+  } else {
+    expandedGroups.value.push(groupKey)
+  }
+}
+
+const isGroupExpanded = (groupKey) => {
+  return expandedGroups.value.includes(groupKey)
+}
+
+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 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>
+
+<style scoped>
+.x-transfer-wrapper {
+  width: 100%;
+  height: 189px;
+  border: none;
+  background: transparent;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+}
+
+.transfer-header {
+  height: 41px;
+  display: flex;
+  align-items: center;
+  padding-left: 24px;
+  flex-shrink: 0;
+  box-sizing: border-box;
+}
+
+.transfer-content {
+  flex: 1;
+  padding-left: 99px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: flex-start;
+}
+
+.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: 0px;
+  align-items: flex-start;
+  width: 100%;
+  height: 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;
+  padding: 4px 0px 4px 8px;
+}
+
+.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;
+  gap: 3px;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.action-box {
+  width: 68px;
+  height: 78px;
+  border-radius: 6px;
+  opacity: 1;
+  background: #FFFFFF;
+  box-sizing: border-box;
+  border: 1px solid #E5E9F0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  margin: 3px 5px;
+}
+
+.action-box + .action-box {
+  margin-top: 0;
+}
+
+.action-text {
+  font-family: 'Source Han Sans', 'Noto Sans CJK SC', 'Microsoft YaHei', sans-serif;
+  font-size: 16px;
+  font-weight: normal;
+  line-height: 1;
+  letter-spacing: 0em;
+  font-feature-settings: "kern" on;
+  color: #313131;
+}
+
+.action-arrow {
+  width: 9.51px;
+  height: 12.26px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.action-arrow svg {
+  width: 100%;
+  height: 100%;
+}
+
+.action-arrow.left {
+  transform: rotate(180deg);
+}
+
+.action-box:hover {
+  opacity: 0.7;
+}
+
+.action-box.disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+.panel-body {
+  padding: 0;
+  overflow-y: auto;
+  flex: 1;
+  min-height: 100%;
+}
+
+.group-section:last-child {
+  margin-bottom: 0;
+}
+
+.group-label-row {
+  display: flex;
+  align-items: center;
+  height: 37px;
+  line-height: 37px;
+  padding: 0 8px;  /* 添加左右内边距 */
+  box-sizing: border-box;
+}
+
+.group-label {
+  font-family: 'Source Han Sans';
+  font-size: 16px;
+  font-weight: normal;
+  letter-spacing: 0em;
+  font-feature-settings: "kern" on;
+  color: #313131;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.group-items {
+  overflow: hidden;
+}
+
+.item-row {
+  border-bottom: 1px solid #E5E9F0;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  transition: background-color 0.15s;
+  user-select: none;
+  height: 23px;
+  line-height: 23px;
+  box-sizing: border-box;
+}
+
+.item-row-left {
+  padding-left: 12px;
+}
+
+.item-row:last-child {
+  border-bottom: none;
+}
+
+.item-row.selected {
+  color: #0057FE;
+}
+
+.item-title {
+  font-family: 'Source Han Sans';
+  font-size: 16px;
+  font-weight: normal;
+  line-height: 37px;
+  letter-spacing: 0em;
+  font-feature-settings: "kern" on;
+  flex: 1;
+  color: #313131;
+  flex-shrink: 0;
+}
+
+.item-desc {
+  font-family: 'Source Han Sans';
+  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-icon {
+  font-size: 16px;
+  color: #94979E;
+  flex-shrink: 0;
+}
+
+.icon-left {
+  margin-right: 17px;
+}
+
+.icon-right {
+  margin-right: 9px;
+}
+
+.selected-item {
+  background: #fff;
+  border-color: #E5E9F0;
+}
+
+.selected-item:hover {
+  background: #f5f5f5 !important;
+}
+
+*::-webkit-scrollbar {
+  width: 5px;
+}
+
+*::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+*::-webkit-scrollbar-thumb {
+  background: #E5E5E5;
+  border-radius: 25px;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  background: #D0D0D0;
+}
+
+* {
+  scrollbar-width: thin;
+  scrollbar-color: #E5E5E5 transparent;
+}
+</style>