vue2-client 1.22.2 → 1.22.3

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

@@ -0,0 +1,585 @@
+<script setup>
+import { ref, watch, onMounted } from 'vue'
+import { 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: 'id' },
+  displayKey: { type: String, default: 'itemName' },
+  descriptionKey: { type: String, default: 'itemCode' },
+  groupKey: { type: String, default: 'category' },
+  groupLabelKey: { type: String, default: 'categoryName' },
+  groupCountKey: { type: String, default: 'itemCount' },
+  groupItemsKey: { type: String, default: 'items' },
+  leftTitle: { type: String, default: '' },
+  rightTitle: { type: String, default: '' },
+  allText: { type: String, default: 'All' },
+  leftWidth: { type: String, default: '324px' },
+  rightWidth: { type: String, default: '324px' },
+  height: { type: String, default: '143px' },
+  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 isDev = () => props.env !== 'prod'
+
+const totalCount = ref(0)
+
+watch(() => props.value, (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 = []
+
+    if (props.data && Array.isArray(props.data)) {
+      data = props.data
+    } else if (props.logicName) {
+      data = await loadByLogic()
+    } else if (props.queryParamsName || props.configName) {
+      await loadByConfig()
+      return
+    }
+
+    parseData(data)
+    if (props.initialValue.length > 0) {
+      localValue.value = [...props.initialValue]
+    }
+    totalCount.value = localDataSource.value.length
+    emit('loaded', {
+      dataSource: localDataSource.value,
+      groupDataSource: localGroupDataSource.value
+    })
+  } catch (e) {
+    console.error('[XTransfer] Load error:', e)
+  } finally {
+    loading.value = false
+  }
+}
+
+const loadByConfig = () => {
+  return new Promise((resolve) => {
+    const configName = props.queryParamsName || props.configName
+    getConfigByName(configName, props.serverName, async (config) => {
+      if (!config) {
+        loading.value = false
+        resolve()
+        return
+      }
+
+      if (config.logicName) {
+        const data = await loadByLogicWithConfig(config)
+        parseData(data)
+        if (props.initialValue.length > 0) {
+          localValue.value = [...props.initialValue]
+        }
+        totalCount.value = localDataSource.value.length
+        emit('loaded', {
+          dataSource: localDataSource.value,
+          groupDataSource: localGroupDataSource.value
+        })
+      } else if (config.data && Array.isArray(config.data)) {
+        parseData(config.data)
+      }
+
+      loading.value = false
+      resolve()
+    }, isDev())
+  })
+}
+
+const loadByLogicWithConfig = async (config) => {
+  const logic = config.logicName || props.logicName
+  const params = config.parameter || props.parameter
+  const server = config.serverName || props.serverName
+
+  try {
+    const res = await runLogic(logic, params, server, isDev())
+    if (res) {
+      return Array.isArray(res) ? res : (res.data || res.result || [])
+    }
+  } catch (e) {
+    console.error('[XTransfer] logic error:', e)
+  }
+  return []
+}
+
+const loadByLogic = async () => {
+  try {
+    const res = await runLogic(props.logicName, props.parameter, props.serverName, isDev())
+    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 firstItem = data[0]
+  const hasGroup = firstItem && (firstItem[props.groupKey] || firstItem[props.groupLabelKey])
+
+  if (hasGroup) {
+    localGroupDataSource.value = data.map(group => ({
+      key: group[props.rowKey] || group.key,
+      label: group[props.groupLabelKey] || group.label || '未命名',
+      count: group[props.groupCountKey] || (group[props.groupItemsKey]?.length || 0),
+      items: transformItems(group[props.groupItemsKey] || group.items || []),
+      _rawData: group
+    }))
+
+    localDataSource.value = []
+    data.forEach(group => {
+      const items = group[props.groupItemsKey] || group.items || []
+      localDataSource.value.push(...transformItems(items))
+    })
+  } else {
+    localDataSource.value = transformItems(data)
+    localGroupDataSource.value = []
+  }
+}
+
+const transformItems = (items) => {
+  if (!items || !Array.isArray(items)) return []
+
+  return items.map((item, index) => ({
+    key: String(getNestedValue(item, props.rowKey) || item.key || `item-${index}`),
+    title: String(getNestedValue(item, props.displayKey) || item.title || `选项${index + 1}`),
+    description: props.descriptionKey ? String(getNestedValue(item, props.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 (props.disabled) return
+  if (!localValue.value.includes(key)) {
+    localValue.value = [...localValue.value, key]
+    emitChange()
+  }
+}
+
+const removeItem = (key) => {
+  if (props.disabled) return
+  localValue.value = localValue.value.filter(k => k !== key)
+  emitChange()
+}
+
+const selectAll = () => {
+  if (props.disabled) return
+  const allKeys = localDataSource.value.map(item => item.key)
+  localValue.value = [...allKeys]
+  emitChange()
+}
+
+const clearAll = () => {
+  if (props.disabled) 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 || ''
+}
+
+defineExpose({
+  loadData,
+  getSelectedData,
+  getSelectedKeys: () => [...localValue.value],
+  clear: clearAll,
+  setValue: (keys) => { localValue.value = keys }
+})
+
+onMounted(() => {
+  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" :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"></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"></span>
+              </div>
+            </template>
+            <a-empty v-if="localDataSource.length === 0 && !loading" />
+          </div>
+        </div>
+
+        <div class="transfer-actions">
+          <div class="transfer-action-right">
+            <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>
+          <div class="transfer-action-left">
+            <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>
+
+        <div class="transfer-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"></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>
+.x-transfer-component {
+  width: 100%;
+}
+
+.x-transfer-container {
+  display: flex;
+  flex-direction: row;
+  gap: 12px;
+  align-items: flex-start;
+  width: 100%;
+}
+
+.transfer-panel {
+  width: 324px;
+  height: 143px;
+  border-radius: 6px;
+  opacity: 1;
+  box-sizing: border-box;
+  border: 1px solid #E5E9F0;
+  background: #fff;
+  flex: 0 0 auto;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.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-size: 14px;
+  color: #313131;
+}
+
+.panel-count {
+  font-size: 12px;
+  color: #313131;
+  background: #f0f0f0;
+  padding: 0 8px;
+  border-radius: 10px;
+}
+
+.panel-count.selected {
+  background: #1890ff;
+  color: #fff;
+}
+
+.panel-body {
+  padding: 0;
+  overflow-y: auto;
+  flex: 1;
+  min-height: 0;
+}
+
+.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-size: 14px;
+  color: #313131;
+  flex-shrink: 0;
+}
+
+.item-desc {
+  font-size: 12px;
+  color: #94979E;
+  margin-left: 8px;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.item-arrow {
+  width: 6px;
+  height: 10px;
+  background: #94979E;
+  flex-shrink: 0;
+  margin-left: auto;
+}
+
+.item-arrow.left-arrow {
+  transform: rotate(180deg);
+  margin-left: 0;
+  margin-right: auto;
+}
+
+.selected-item {
+  background: #fff;
+}
+
+.selected-item:hover {
+  background: #f5f5f5;
+}
+
+.transfer-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.transfer-action-right,
+.transfer-action-left {
+  width: 68px;
+  height: 70px;
+  border: 1px solid #E5E9F0;
+  border-radius: 6px;
+  background: #FFFFFF;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.action-row {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+}
+
+.action-text {
+  font-size: 14px;
+  color: #313131;
+}
+
+.action-arrow {
+  width: 10px;
+  height: 12px;
+  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;
+}
+
+.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-size: 14px;
+  color: #313131;
+}
+
+.group-count {
+  font-size: 12px;
+  color: #94979E;
+}
+
+.group-items {
+  border: 1px solid #E5E9F0;
+  border-radius: 6px;
+  overflow: hidden;
+  margin: 0 12px 12px 12px;
+}
+</style>