vue2-client 1.22.3 → 1.22.4

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

@@ -1,585 +0,0 @@
-<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>