动态多维表头

src/views/lowdesign/general/components/useRenderVxeColumn.tsx

@@ -266,6 +266,32 @@ export const useRenderVxeColumn = (useType = 'table') => {
           </el-popover>
         )
       }
+    },
+    LowButton: {
+      default: (renderOpts, { row, column }) => {
+        const { buttonText, disabled } = renderOpts
+        const isDisabled = typeof disabled === 'function' ? disabled(row) : disabled
+        if (isDisabled) return <span style="color: #c0c4cc;">-</span>
+        return <span style="color: #409eff; cursor: pointer;">{buttonText || '操作'}</span>
+      },
+      edit: (renderOpts, { row, column }) => {
+        const { buttonText, buttonType, buttonSize, disabled } = renderOpts
+        const isDisabled = typeof disabled === 'function' ? disabled(row) : disabled
+        return (
+          <el-button
+            type={buttonType || 'primary'}
+            size={buttonSize || 'small'}
+            disabled={isDisabled}
+            onClick={() => {
+              if (renderOpts.events && renderOpts.events.click) {
+                renderOpts.events.click(row)
+              }
+            }}
+          >
+            {buttonText || '操作'}
+          </el-button>
+        )
+      }
     }
   }
   for (const key in lowControl) {

src/views/lowdesign/reportDesign/components/TableInfo.vue

@@ -40,6 +40,65 @@
       </template>
     </template>
   </DesignPopup>
+  <!-- 固定列行配置弹窗 -->
+  <DesignPopup
+    v-model="fixedColumnDialog.visible"
+    title="配置固定列内容"
+    width="600px"
+    :is-footer="true"
+    :handleClose="handleFixedColumnClose"
+  >
+    <template #default>
+      <div style="padding: 20px;">
+        <el-alert
+          title="提示"
+          type="info"
+          :closable="false"
+          style="margin-bottom: 20px;"
+        >
+          为该固定列的每一行配置不同的显示内容。点击"添加行"按钮增加新行，输入内容后保存。
+        </el-alert>
+        
+        <div style="margin-bottom: 15px;">
+          <ElButton type="primary" @click="addFixedColumnRow" size="small">
+            <Icon icon="ep:plus" />
+            添加行
+          </ElButton>
+        </div>
+        
+        <div v-if="fixedColumnDialog.rows.length === 0" style="text-align: center; padding: 40px; color: #909399;">
+          暂无配置，请点击"添加行"按钮添加内容
+        </div>
+        
+        <div v-else style="max-height: 400px; overflow-y: auto;">
+          <div
+            v-for="(row, index) in fixedColumnDialog.rows"
+            :key="index"
+            style="display: flex; align-items: center; margin-bottom: 10px;"
+          >
+            <span style="width: 80px; color: #606266;">第 {{ index + 1 }} 行：</span>
+            <ElInput
+              v-model="row.value"
+              placeholder="请输入该行显示的内容"
+              style="flex: 1; margin-right: 10px;"
+            />
+            <ElButton
+              type="danger"
+              size="small"
+              @click="removeFixedColumnRow(index)"
+              :icon="Delete"
+            >
+              删除
+            </ElButton>
+          </div>
+        </div>
+      </div>
+    </template>
+    <template #footer>
+      <ElButton @click="handleFixedColumnCancel">取 消</ElButton>
+      <ElButton type="primary" @click="handleFixedColumnSave">确 定</ElButton>
+    </template>
+  </DesignPopup>
 </template>
 
 <script setup lang="ts">
@@ -49,6 +108,7 @@ import { tableInfoOption, dicObj } from '../designData'
 import { formattingLengStr } from '@/utils/lowDesign'
 import { cloneDeep } from 'lodash-es'
 import * as DictDataApi from '@/api/system/dict/dict.type'
+import { Delete } from '@element-plus/icons-vue'
 
 defineOptions({ name: 'TableInfo' })
 const message = useMessage()
@@ -86,6 +146,14 @@ const tabsRef = ref()
 // 父字段引用
 const parentFieldMap = ref(new Map())
 
+// 固定列行配置弹窗
+const fixedColumnDialog = ref({
+  visible: false,
+  currentRow: null as any,
+  rows: [] as Array<{ value: string }>,
+  originalValue: '' // 保存原始值，用于取消时恢复
+})
+
 const fieldList = computed(() => {
   let dicData: Array<{ label: string; value: string; type: string }> = []
   infoData.value.basics.forEach((item) => {
@@ -223,6 +291,61 @@ const addSubFieldRow = (parentField, parentRowIndex) => {
   })
 }
 
+// 打开固定列行配置弹窗
+const openFixedColumnDialog = (row) => {
+  fixedColumnDialog.value.currentRow = row
+  // 保存原始值
+  fixedColumnDialog.value.originalValue = row.fixedColumnValue || ''
+  
+  // 将字符串转换为数组：按逗号分割
+  let rowsArray = []
+  if (row.fixedColumnValue && typeof row.fixedColumnValue === 'string' && row.fixedColumnValue.trim() !== '') {
+    rowsArray = row.fixedColumnValue.split(',').map(value => ({ value: value }))
+  }
+  fixedColumnDialog.value.rows = rowsArray
+  fixedColumnDialog.value.visible = true
+}
+
+// 添加固定列行
+const addFixedColumnRow = () => {
+  fixedColumnDialog.value.rows.push({ value: '' })
+}
+
+// 删除固定列行
+const removeFixedColumnRow = (index) => {
+  fixedColumnDialog.value.rows.splice(index, 1)
+}
+
+// 取消固定列配置
+const handleFixedColumnCancel = () => {
+  // 恢复原始值
+  if (fixedColumnDialog.value.currentRow) {
+    fixedColumnDialog.value.currentRow.fixedColumnValue = fixedColumnDialog.value.originalValue
+  }
+  fixedColumnDialog.value.visible = false
+}
+
+// 处理弹窗关闭（X按钮或遮罩层）
+const handleFixedColumnClose = (done: () => void) => {
+  // 恢复原始值
+  if (fixedColumnDialog.value.currentRow) {
+    fixedColumnDialog.value.currentRow.fixedColumnValue = fixedColumnDialog.value.originalValue
+  }
+  done()
+}
+
+// 保存固定列配置
+const handleFixedColumnSave = () => {
+  if (fixedColumnDialog.value.currentRow) {
+    // 将数组转换为字符串：使用逗号拼接
+    const rowValues = fixedColumnDialog.value.rows.map(row => row.value)
+    fixedColumnDialog.value.currentRow.fixedColumnValue = rowValues.join(',')
+    
+    message.success(`已保存固定列"${fixedColumnDialog.value.currentRow.fieldName}"的行配置（共${fixedColumnDialog.value.rows.length}行）`)
+  }
+  fixedColumnDialog.value.visible = false
+}
+
 const initEditInfoData = () => {
   const data = tableInfoOption.formattingInitData(props.editInfoData)
   const fieldList: any[] = []
@@ -285,9 +408,9 @@ onMounted(() => {
   
   // 设置父字段下拉选项
   const updateParentFieldOptions = () => {
-    // 获取所有parentFieldCode为空的字段作为可选父字段
+    // 获取所有parentFieldCode为空且非固定列的字段作为可选父字段
     const parentFieldOptions = infoData.value.basics
-      .filter(field => !field.parentFieldCode && field.fieldCode && field.fieldName)
+      .filter(field => !field.parentFieldCode && field.fieldCode && field.fieldName && field.isFixedColumn !== 'Y')
       .map(field => ({
         label: `${field.fieldName}`,
         value: field.fieldCode
@@ -461,6 +584,41 @@ onMounted(() => {
   // 初始化父字段选项
   updateParentFieldOptions()
   
+  // 添加固定列选项的change事件处理
+  tableInfoOption.infoColumn.fieldColumn.isFixedColumn.editRender.events = {
+    change: (row) => {
+      if (row.isFixedColumn === 'Y') {
+        // 固定列不能有父字段
+        if (row.parentFieldCode) {
+          handleParentFieldClear(row)
+        }
+        // 固定列不能有子字段
+        if (row.hasChildren === 'Y') {
+          row.hasChildren = 'N'
+          // 清除所有子字段的父子关系
+          infoData.value.basics.forEach(field => {
+            if (field.parentFieldCode === row.fieldCode) {
+              handleParentFieldClear(field)
+            }
+          })
+        }
+      } else {
+        // 取消固定列时清空固定列内容
+        row.fixedColumnValue = ''
+      }
+      updateParentFieldOptions()
+    }
+  }
+  
+  // 添加固定列内容配置按钮的点击事件
+  tableInfoOption.infoColumn.fieldColumn.fixedColumnValue.editRender.events = {
+    click: (row) => {
+      if (row.isFixedColumn === 'Y') {
+        openFixedColumnDialog(row)
+      }
+    }
+  }
+  
   // 设置字典Code的下拉选项
   DictDataApi.getSimpleDictTypeList().then((dicData) => {
     const dicObj = {}

src/views/lowdesign/reportDesign/designData.ts

@@ -152,6 +152,8 @@ const infoColumn = {
     parentFieldName: { title: '父字段名称', width: 120, editRender: { name: 'LowSelect', dicData: [], filterable: true, clearable: true } },
     labelI18n: { title: '国际化配置', width: 140, editRender: { name: 'LowMonacoEditorInput', events: {} } },
     fieldType: { title: '字段类型', minWidth: 100, editRender: { name: 'LowSelect', verifyEdit: true, dicData: dicObj.fieldType, dicObj: getDicObj('fieldType') } },
+    isFixedColumn: { title: '固定列', width: 75, align: "center", editRender: { name: 'LowCheckbox' } },
+    fixedColumnValue: { title: '固定列内容', width: 110, align: "center", editRender: { name: 'LowButton', disabled: (row) => row.isFixedColumn !== 'Y', buttonText: '配置内容', buttonType: 'primary', buttonSize: 'small', events: {} } },
     queryIsDb: { title: '接口查询', width: 75, align: "center", editRender: { name: 'LowCheckbox' } },
     queryIsWeb: { title: '查询控件', width: 75, align: "center", editRender: { name: 'LowCheckbox' } },
     queryMode: { title: '查询模式', width: 130, editRender: { name: 'LowSelect', verifyEdit: true, dicData: dicObj.queryMode, dicObj: getDicObj('queryMode') } },
@@ -161,6 +163,7 @@ const infoColumn = {
     isDimension: { title: '是否维度', width: 75, align: "center", editRender: { name: 'LowCheckbox' } },
     
     isShowSort: { title: '是否排序', width: 75, align: "center", editRender: { name: 'LowCheckbox' } },
+    isDynamicGroup: { title: '动态分组', width: 75, align: "center", editRender: { name: 'LowCheckbox' } },
     hasChildren: { title: '子字段', width: 90, align: "center", editRender: { name: 'LowButton', disabled: (row) => row.isSubField === true, buttonText: '添加子字段', buttonType: 'primary', buttonSize: 'small' } },
   },
 }
@@ -179,6 +182,10 @@ for (const key in infoColumn) {
       if (!keys.includes('hasChildren')) {
         keys.push('hasChildren')
       }
+      // 确保固定列内容字段被包含
+      if (!keys.includes('fixedColumnValue')) {
+        keys.push('fixedColumnValue')
+      }
     }
     infoApiKey[apiKey[key]] = keys
   }
@@ -187,7 +194,7 @@ for (const key in infoColumn) {
 //默认值
 const infoDefaultData = {
   basics: {
-    fieldCode: '', fieldName: '', parentFieldName: '', labelI18n: '', fieldType: 'String', queryIsDb: 'N', queryIsWeb: 'N', queryMode: 'LIKE', dictCode: '', isExport: 'Y', isShowSort: 'N', isAmount: '', isDimension: '', hasChildren: 'N', isSubField: false, parentFieldId: '', parentFieldCode: '',
+    fieldCode: '', fieldName: '', parentFieldName: '', labelI18n: '', fieldType: 'String', isFixedColumn: 'N', fixedColumnValue: '', queryIsDb: 'N', queryIsWeb: 'N', queryMode: 'LIKE', dictCode: '', isExport: 'Y', isShowSort: 'N', isAmount: '', isDimension: '', isDynamicGroup: 'N', hasChildren: 'N', isSubField: false, parentFieldId: '', parentFieldCode: '',
   },
 }