t20-common-lib 0.10.9 → 0.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "t20-common-lib",
-  "version": "0.10.9",
+  "version": "0.11.0",
   "description": "T20",
   "private": false,
   "main": "dist/index.js",

package/packages/dynamic-descriptions/src/main.vue

@@ -3,7 +3,7 @@
     <DraggableFab 
       v-if="showConfigBtn"
       title="配置显示列" 
-      @click="$emit('open-config')"
+      @click="showColumnConfig"
     />
     
     <div v-for="panel in panels" :key="panel.key">
@@ -37,16 +37,28 @@
         </template>
       </N20-expandable-pane>
     </div>
+    <DynamicDescriptionsConfig
+      ref="showColumn"
+      :dialogVisible.sync="showColumnVisible"
+      :check-columns="checkedColumns"
+      :columns="allColumns"
+      :columns-groups="columnGroups"
+      :auto-save="!!pageId"
+      :page-id="pageId"
+      @setColumns="handleSetColumns"
+    />
   </div>
 </template>
 
 <script>
 import DraggableFab from '../../draggable-fab/src/main.vue'
+import DynamicDescriptionsConfig from '../../dynamic-descriptions-config/src/main.vue'
 
 export default {
   name: 'DynamicDescriptions',
   components: {
-    DraggableFab
+    DraggableFab,
+    DynamicDescriptionsConfig
   },
   props: {
     panels: {
@@ -60,6 +72,98 @@ export default {
     showConfigBtn: {
       type: Boolean,
       default: true
+    },
+    pageId: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      showColumnVisible: false,
+      checkedColumns: []
+    }
+  },
+  created() {
+    this.checkedColumns = this.allColumns || []
+  },
+  mounted() {
+    if (this.pageId) {
+      this.getColumns()
+    }
+  },
+  computed: {
+    columnGroups() {
+      return this.panels.map(p => ({
+        groupId: p.key,
+        groupName: p.title,
+        type: p.type
+      }))
+    },
+    allColumns() {
+      let cols = []
+      this.panels.forEach(panel => {
+        const items = panel.fields || panel.columns || []
+        items.forEach(item => {
+          let isVisible = true
+          if (typeof item.visible === 'function') {
+            isVisible = item.visible(this.formData)
+          } else if (typeof item.visible === 'boolean') {
+            isVisible = item.visible
+          }
+
+          if (isVisible) {
+            cols.push({
+              ...item,
+              groupId: panel.key,
+              sourceGroup: panel.key,
+              configLabel: item.label
+            })
+          }
+        })
+      })
+      return cols
+    },
+    processedFormData() {
+      const newFormData = JSON.parse(JSON.stringify(this.formData))
+      
+      // Ensure target groups exist in newFormData for object types
+      this.displayPanels.forEach(p => {
+         if (p.type === 'object' && !newFormData[p.key]) {
+             newFormData[p.key] = {}
+         }
+      })
+      
+      this.checkedColumns.forEach(col => {
+        // Only handle object fields that have moved to a different group
+        if (col.sourceGroup && col.groupId && col.sourceGroup !== col.groupId) {
+           // We assume sourceGroup refers to a key in formData
+           if (this.formData[col.sourceGroup]) {
+             const val = this.formData[col.sourceGroup][col.prop]
+             // Assign to the new location so the component can find it
+             if (newFormData[col.groupId]) {
+                 newFormData[col.groupId][col.prop] = val
+             }
+           }
+        }
+      })
+      
+      return newFormData
+    },
+    displayPanels() {
+      return this.panels.map(panel => {
+        const panelItems = this.checkedColumns.filter(col => col.groupId === panel.key)
+        
+        if (panelItems.length === 0) return null
+
+        const newPanel = { ...panel }
+        if (panel.type === 'object') {
+          newPanel.fields = panelItems
+        } else {
+          newPanel.columns = panelItems
+        }
+        return newPanel
+      }).filter(p => p !== null)
     }
   },
   methods: {
@@ -215,6 +319,24 @@ export default {
       window.removeEventListener('mousemove', this.onDrag)
       window.removeEventListener('mouseup', this.stopDrag)
     },
+    getColumns() {
+      this.$refs.showColumn.getColumns().then((list) => {
+        if (list && list.length > 0) {
+          this.checkedColumns = list
+        } else {
+          this.checkedColumns = this.allColumns
+        }
+      })
+    },
+    showColumnConfig() {
+      if (!this.checkedColumns || this.checkedColumns.length === 0) {
+        this.checkedColumns = [...this.allColumns]
+      }
+      this.showColumnVisible = true
+    },
+    handleSetColumns(newColumns) {
+      this.checkedColumns = newColumns
+    }
   }
 }
 </script>

package/packages/dynamic-descriptions-config/index.js

@@ -0,0 +1,8 @@
+import DynamicDescriptionsConfig from './src/main';
+
+/* istanbul ignore next */
+DynamicDescriptionsConfig.install = function(Vue) {
+  Vue.component(DynamicDescriptionsConfig.name, DynamicDescriptionsConfig);
+};
+
+export default DynamicDescriptionsConfig;

package/packages/dynamic-descriptions-config/src/main.vue

@@ -0,0 +1,474 @@
+<template>
+  <el-dialog
+    :visible.sync="visible"
+    :title="title"
+    width="900px"
+    :close-on-click-modal="false"
+    append-to-body
+    custom-class="local-show-column-dialog"
+  >
+    <div class="dialog-content">
+      <!-- Left Side: Checkboxes -->
+      <div class="left-panel">
+        <div class="panel-header">
+          <span>可选字段</span>
+          <el-link type="primary" :underline="false" @click="selectAll" class="header-action">全选</el-link>
+        </div>
+        <div class="panel-body">
+          <div v-for="group in columnsGroups" :key="group.groupId" class="group-section">
+            <div class="group-title">{{ group.groupName }}</div>
+            <div class="group-items">
+              <el-checkbox
+                v-for="col in getGroupColumns(group.groupId)"
+                :key="col.prop"
+                :label="col.label"
+                :value="isChecked(col)"
+                @change="(val) => handleCheckChange(val, col)"
+              >
+                {{ col.label }}
+              </el-checkbox>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Right Side: Draggable Hierarchy -->
+      <div class="right-panel">
+        <div class="panel-header">
+          <span>当前选定项 (可拖拽排序)</span>
+          <el-link type="primary" :underline="false" @click="clearAll" class="header-action">清空</el-link>
+        </div>
+        <div class="panel-body">
+          <div v-for="group in localGroups" :key="group.groupId" class="drag-group-section">
+            <div class="group-title-bar">
+              <span class="font-bold">{{ group.groupName }}</span>
+              <span class="count-badge">{{ group.children.length }}</span>
+            </div>
+            
+            <draggable
+              v-model="group.children"
+              :group="getDragGroup(group)"
+              animation="200"
+              class="drag-area"
+              ghost-class="ghost"
+            >
+              <div v-for="element in group.children" :key="element.prop" class="drag-item">
+                <div class="item-content">
+                  <i class="el-icon-rank drag-handle"></i>
+                  <span class="item-label" :title="element.label">{{ element.configLabel || element.label }}</span>
+                </div>
+                <i class="el-icon-close close-btn" @click="removeColumn(element)"></i>
+              </div>
+            </draggable>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">取 消</el-button>
+      <el-button type="primary" @click="confirm">确 定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import draggable from 'vuedraggable'
+import request from '@/utils/request'
+
+
+export default {
+  name: 'DynamicDescriptionsConfig',
+  components: { draggable },
+  props: {
+    dialogVisible: Boolean,
+    title: { type: String, default: '配置显示列' },
+    columns: { type: Array, default: () => [] },
+    checkColumns: { type: Array, default: () => [] },
+    columnsGroups: { type: Array, default: () => [] },
+    pageId: { type: String, default: undefined },
+    autoSave: { type: Boolean, default: false },
+    labelKey: { type: String, default: 'label' },
+    isFilter: { type: Boolean, default: false },
+    isExport: { type: Boolean, default: false }
+  },
+  data() {
+    return {
+      localGroups: [],
+      userNo: sessionStorage.getItem('userNo')
+    }
+  },
+  computed: {
+    visible: {
+      get() { return this.dialogVisible },
+      set(val) { this.$emit('update:dialogVisible', val) }
+    }
+  },
+  watch: {
+    dialogVisible(val) {
+      if (val) {
+        this.init()
+      }
+    }
+  },
+  methods: {
+    init() {
+      // Initialize local structure
+      this.localGroups = this.columnsGroups.map(g => ({
+        ...g,
+        children: []
+      }))
+
+      // Populate with checkColumns based on their CURRENT groupId (or original if matching)
+      // Note: checkColumns may contain items with updated groupIds from previous drags
+      this.checkColumns.forEach(col => {
+        // Try to find the group this column currently claims to belong to
+        let group = this.localGroups.find(g => g.groupId === col.groupId)
+        
+        // If not found (rare, or config changed), fallback to original define in 'columns'
+        if (!group) {
+             const originalDef = this.columns.find(c => c.prop === col.prop)
+             if (originalDef) {
+                 group = this.localGroups.find(g => g.groupId === originalDef.groupId)
+             }
+        }
+
+        if (group) {
+          group.children.push({ ...col })
+        }
+      })
+    },
+    getGroupColumns(groupId) {
+      return this.columns.filter(c => c.groupId === groupId)
+    },
+    isChecked(col) {
+      for (const group of this.localGroups) {
+        if (group.children.some(child => child.prop === col.prop)) return true
+      }
+      return false
+    },
+    handleCheckChange(val, col) {
+      if (val) {
+        // Find original group to add to
+        const targetGroup = this.localGroups.find(g => g.groupId === col.groupId)
+        if (targetGroup) {
+          targetGroup.children.push({ ...col })
+        }
+      } else {
+        // Remove from wherever it is
+        for (const group of this.localGroups) {
+          const idx = group.children.findIndex(child => child.prop === col.prop)
+          if (idx !== -1) {
+            group.children.splice(idx, 1)
+            return
+          }
+        }
+      }
+    },
+    removeColumn(col) {
+      this.handleCheckChange(false, col)
+    },
+    getDragGroup(group) {
+      // Object groups share the 'object-groups' name allowing transfer
+      // Array groups are isolated with unique names
+      if (group.type === 'object') {
+        return 'object-groups'
+      }
+      return 'group-' + group.groupId
+    },
+    selectAll() {
+       this.localGroups.forEach(g => g.children = [])
+       this.columns.forEach(col => {
+          const group = this.localGroups.find(g => g.groupId === col.groupId)
+          if(group) group.children.push({...col})
+       })
+    },
+    clearAll() {
+       this.localGroups.forEach(g => g.children = [])
+    },
+    confirm() {
+      const result = []
+      this.localGroups.forEach(group => {
+        group.children.forEach(child => {
+          // Update groupId to reflect the current group
+          result.push({
+            ...child,
+            groupId: group.groupId
+          })
+        })
+      })
+
+      if (!this.isExport && this.autoSave) {
+        this.saveColumns(result)
+      }
+
+      this.$emit('setColumns', result)
+      this.visible = false
+    },
+    saveColumns(list) {
+      let columns = saveTransform(list, this.labelKey, this.isFilter)
+      request({
+        url: '/bems/prod_1.0/user/pageHabit',
+        method: 'post',
+        data: {
+          userNo: this.userNo,
+          pageId: this.pageId,
+          showStructure: JSON.stringify(columns)
+        },
+        loading: false
+      })
+    },
+    getColumns(pageId) {
+      return getColumns(pageId || this.pageId, this.userNo, this.columns, this.labelKey)
+    }
+  }
+}
+
+function saveTransform(list, labelKey, isFilter) {
+  let listN = []
+  if (!isFilter) {
+    list.forEach((c) => {
+      const extra = c.groupId ? { groupId: c.groupId } : {}
+      if (c.prop && !c.children && !c.isNew && !c.width) {
+        listN.push({ _colKey: 'prop', _colVal: c.prop, ...extra })
+      } else if (c.type && ['selection', 'index', 'expand'].includes(c.type)) {
+        listN.push({ _colKey: 'type', _colVal: c.type, ...extra })
+      } else {
+        let sFn = false
+        for (let k in c) {
+          if (typeof c[k] === 'function') sFn = true
+        }
+        if (sFn && c[labelKey]) {
+          listN.push({ _colKey: labelKey, _colVal: c[labelKey], ...extra })
+        } else {
+          listN.push(c)
+        }
+      }
+    })
+  } else {
+    list.forEach((c) => {
+      if (c.value) {
+        listN.push({ _colKey: 'value', _colVal: c.value })
+      } else if (c.startValue) {
+        listN.push({ _colKey: 'startValue', _colVal: c.startValue })
+      } else if (c.startDate) {
+        listN.push({ _colKey: 'startDate', _colVal: c.startDate })
+      } else {
+        listN.push(c)
+      }
+    })
+  }
+  return listN
+}
+
+function getTransform(list, columnsT, labelKey = 'label') {
+  let columns = []
+  list.forEach((d) => {
+    if (typeof d === 'string') {
+      let column = columnsT.find((c) => c[labelKey] === d)
+      column && columns.push(column)
+    } else if (typeof d === 'object') {
+      if (d._colKey) {
+        let column = columnsT.find((c) => c[d._colKey] === d._colVal)
+        if (column) {
+          let newCol = { ...column }
+          if (d.groupId) {
+            newCol.groupId = d.groupId
+          }
+          columns.push(newCol)
+        }
+      } else {
+        columns.push(d)
+      }
+    }
+  })
+  return columns
+}
+
+export function getColumns(pageId, userNo, columnsT, labelKey = 'label') {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/bems/prod_1.0/user/pageHabit/list',
+      method: 'post',
+      data: {
+        userNo: userNo,
+        pageId: pageId
+      },
+      loading: false
+    })
+      .then((res) => {
+        const data = res.data || res
+        if (data) {
+          let _data = data
+          if (typeof data === 'string') {
+             try {
+                _data = JSON.parse(data)
+             } catch(e) { console.error(e) }
+          }
+          if (_data && _data.length > 0) {
+            let columns = getTransform(_data, columnsT, labelKey)
+            return resolve(columns)
+          }
+        }
+        return resolve(null)
+      })
+      .catch((err) => {
+        reject(err)
+      })
+  })
+}
+</script>
+
+<style scoped lang="scss">
+.dialog-content {
+  display: flex;
+  height: 500px;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+}
+
+.left-panel, .right-panel {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.left-panel {
+  border-right: 1px solid #dcdfe6;
+}
+
+.panel-header {
+  padding: 10px 15px;
+  background-color: #f5f7fa;
+  border-bottom: 1px solid #ebeef5;
+  font-weight: bold;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.panel-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 10px;
+}
+
+.header-action {
+  font-size: 12px;
+}
+
+.group-section {
+  margin-bottom: 15px;
+}
+
+.group-title {
+  font-weight: bold;
+  margin-bottom: 8px;
+  color: #303133;
+}
+
+.group-items {
+  display: flex;
+  flex-direction: column;
+  .el-checkbox {
+    margin-left: 0 !important;
+    margin-bottom: 5px;
+    margin-right: 0;
+  }
+}
+
+.drag-group-section {
+  margin-bottom: 15px;
+  border: 1px dashed #e4e7ed;
+  border-radius: 4px;
+  padding: 5px;
+  
+  &:hover {
+    border-color: #409EFF;
+  }
+}
+
+.group-title-bar {
+  display: flex;
+  justify-content: space-between;
+  padding: 5px 10px;
+  background: #fafafa;
+  margin-bottom: 5px;
+  border-radius: 2px;
+}
+
+.font-bold {
+  font-weight: 600;
+  color: #606266;
+}
+
+.count-badge {
+  color: #909399;
+  font-size: 12px;
+}
+
+.drag-area {
+  min-height: 40px; 
+}
+
+.drag-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 10px;
+  background-color: #fff;
+  border: 1px solid #ebeef5;
+  margin-bottom: 4px;
+  border-radius: 4px;
+  cursor: move;
+  transition: all 0.2s;
+
+  &:hover {
+    border-color: #c6e2ff;
+    background-color: #ecf5ff;
+    
+    .close-btn {
+      opacity: 1;
+    }
+  }
+}
+
+.item-content {
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+}
+
+.drag-handle {
+  color: #909399;
+  margin-right: 8px;
+  cursor: move;
+}
+
+.item-label {
+  font-size: 13px;
+  color: #606266;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.close-btn {
+  color: #f56c6c;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.2s;
+  padding: 2px;
+  
+  &:hover {
+    background-color: #fef0f0;
+    border-radius: 50%;
+  }
+}
+
+.ghost {
+  opacity: 0.5;
+  background: #c8ebfb;
+}
+</style>

package/src/utils/request.js

@@ -0,0 +1,84 @@
+import axios from 'axios'
+import { Message } from 'element-ui'
+function randomString(num) {
+  num = num || 32
+  var t = ''
+  t = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'
+
+  const a = t.length
+  let n = ''
+  for (let i = 0; i < num; i++) n += t.charAt(Math.floor(Math.random() * a))
+  return n
+}
+// 创建 axios 实例
+const service = axios.create({
+  baseURL: '/',
+  timeout: 10000 // 设置请求超时时间
+})
+
+// 请求拦截器
+service.interceptors.request.use(
+  config => {
+    // 可在此处添加认证头，例如 Token
+    const token = sessionStorage.getItem('token')
+    if (token) {
+      config.headers = {
+        Authorization: `Bearer ${token}`,
+        charset: 'utf-8',
+        lang: 'zh_CN',
+        timestamp: Date.now(),
+        requestKey: randomString(16),
+        OperationDesc: 'yYarJp'
+      }
+
+    }
+    return config
+  },
+  error => {
+    // 对请求错误做些什么
+    console.error('Request Error:', error) // for debug
+    return Promise.reject(error)
+  }
+)
+
+// 响应拦截器
+service.interceptors.response.use(
+  /**
+   * 如果您想获取诸如 http 头或状态之类的 http 信息
+   * 请返回 response => response
+   */
+
+  /**
+   * 通过自定义代码确定请求状态
+   * 这里只是一个例子
+   * 您也可以通过 HTTP 状态码来判断状态
+   */
+  response => {
+    const res = response.data
+
+    // 后端自定义的成功码不为 200 或 0，则判定为错误。
+    if (res.code !== 200 && res.code !== 0) {
+      Message({
+        message: res.msg || 'Error',
+        type: 'error',
+        duration: 5 * 1000
+      })
+      return Promise.reject(new Error(res.msg || 'Error'))
+    } else {
+      // 成功则直接返回数据
+      return res
+    }
+  },
+  error => {
+    // 处理 HTTP 网络错误
+    console.error('Response Error:', error) // for debug
+    Message({
+      message: error.message,
+      type: 'error',
+      duration: 5 * 1000
+    })
+    return Promise.reject(error)
+  }
+)
+
+export default service