v3.14.0 更新；【新增】EasyExcel重磅升级为FastExcel;【新增】使用最强Argon2算法作为密码存储;【新增】大家吐槽的数据字典改为可重复;【新增】前端布局再增加多种样式;

2026-01-16 06:06:03 +08:00 · 2025-03-12 21:30:24 +08:00
parent e74f179a91
commit fecb3a9d81
207 changed files with 4260 additions and 2019 deletions
--- a/smart-admin-web-javascript/src/components/support/table-operator/index.vue
+++ b/smart-admin-web-javascript/src/components/support/table-operator/index.vue
@@ -38,7 +38,7 @@
 <script setup>
  import _ from 'lodash';
  import { tableColumnApi } from '/@/api/support/table-column-api';
-  import { onMounted, ref, watch } from 'vue';
+  import { onMounted, ref, watch, reactive } from 'vue';
  import SmartTableColumnModal from './smart-table-column-modal.vue';
  import { message } from 'ant-design-vue';
  import { mergeColumn } from './smart-table-column-merge';
@@ -66,8 +66,16 @@
  const emit = defineEmits(['update:modelValue']);

  // 原始表格列数据（复制一份最原始的columns集合，以供后续各个地方使用）
-  let originalColumn = _.cloneDeep(props.modelValue);
-
+  let originalColumn = reactive(_.cloneDeep(props.modelValue));
+  watch(
+    () => props.modelValue,
+    (value) => {
+      originalColumn = value;
+    },
+    {
+      deep: true,
+    }
+  );
  onMounted(buildUserTableColumns);

  //构建用户的数据列
@@ -168,7 +176,8 @@
  // 将弹窗修改的列数据，赋值给原表格 列数组
  function updateColumn(changeColumnArray) {
    //合并列
-    const newColumns = mergeColumn(_.cloneDeep(originalColumn), changeColumnArray);
+    let obj = mergeColumn(_.cloneDeep(originalColumn), changeColumnArray);
+    const newColumns = obj.newColumns;
    emit(
      'update:modelValue',
      newColumns.filter((e) => e.showFlag)
--- a/smart-admin-web-javascript/src/components/support/table-operator/smart-table-column-merge.js
+++ b/smart-admin-web-javascript/src/components/support/table-operator/smart-table-column-merge.js
@@ -1,12 +1,12 @@
-/* 
-  *  表格列设置
-  * 
-  * @Author:    1024创新实验室-主任：卓大 
-  * @Date:      2022-08-26 23:45:51 
-  * @Wechat:    zhuda1024 
-  * @Email:     lab1024@163.com 
-  * @Copyright  1024创新实验室 （ https://1024lab.net ），Since 2012 
-  */
+/*
+ *  表格列设置
+ *
+ * @Author:    1024创新实验室-主任：卓大
+ * @Date:      2022-08-26 23:45:51
+ * @Wechat:    zhuda1024
+ * @Email:     lab1024@163.com
+ * @Copyright  1024创新实验室 （ https://1024lab.net ），Since 2012
+ */

 import _ from 'lodash';

@@ -16,6 +16,7 @@ import _ from 'lodash';
 * @param {*} userTableColumnArray
 */
 export function mergeColumn(originalTableColumnArray, userTableColumnArray) {
+  let saveFlag = false;
  if (!userTableColumnArray) {
    return originalTableColumnArray;
  }
@@ -40,8 +41,13 @@ export function mergeColumn(originalTableColumnArray, userTableColumnArray) {
    if (userColumn) {
      fontColumn.sort = userColumn.sort;
      fontColumn.showFlag = userColumn.showFlag;
-      if (userColumn.width) {
-        fontColumn.width = userColumn.width;
+      if (fontColumn.dragAndDropFlag) {
+        saveFlag = true;
+        delete fontColumn.dragAndDropFlag;
+      } else {
+        if (userColumn.width) {
+          fontColumn.width = userColumn.width;
+        }
      }
    }
    newColumns.push(fontColumn);
@@ -50,5 +56,8 @@ export function mergeColumn(originalTableColumnArray, userTableColumnArray) {

  //第三步：前端列进行排序
  newColumns = _.sortBy(newColumns, (e) => e.sort);
-  return newColumns;
+  return {
+    newColumns,
+    saveFlag,
+  };
 }
--- a/smart-admin-web-javascript/src/components/support/table-operator/smart-table-column-modal.vue
+++ b/smart-admin-web-javascript/src/components/support/table-operator/smart-table-column-modal.vue
@@ -9,46 +9,70 @@
  *
 -->
 <template>
-  <a-modal :width="700" :open="visible" title="设置列" :destroyOnClose="true" :closable="false">
-    <a-alert type="info" show-icon class="smart-margin-bottom10">
-      <template #icon><smile-outlined /></template>
-      <template #message> 可以通过拖拽行直接修改顺序哦；（ <pushpin-outlined />为固定列，不可拖拽 ）</template>
-    </a-alert>
-    <a-table
-      id="smartTableColumnModalTable"
-      rowKey="columnKey"
-      row-class-name="column-row"
-      :columns="tableColumns"
-      :dataSource="tableData"
-      :rowSelection="{ checkStrictly: false, selectedRowKeys: selectedRowKeyList, onChange: onSelectChange }"
-      :pagination="false"
-      size="small"
-      bordered
-    >
-      <template #bodyCell="{ text, record, index, column }">
-        <template v-if="column.dataIndex === 'title'">
-          <a-button type="text" :class="record.fixed ? '' : 'handle'" size="small" style="width: 100%; text-align: left">
-            <template #icon v-if="!record.fixed"> <drag-outlined /> </template>
-            <template #icon v-if="record.fixed"> <pushpin-outlined /> </template>
-            {{ text }}
-          </a-button>
+  <a-modal :width="800" :open="visible" title="设置列" :destroyOnClose="true" :closable="false">
+    <div v-if="!tableId">
+      <a-alert type="error" show-icon class="smart-margin-bottom10">
+        <template #message> 您尚未设置 TableOperator 组件的 tableId</template>
+      </a-alert>
+      <a-alert type="error" class="smart-margin-bottom10">
+        <template #message>
+          1. 请在 src\constants\support\table-id-const.js 中配置 tableId 常量
+          <br />
+          <br />
+          2. 在自己的业务表格页面组件中使用如下：
+          <br />
+          导入: import { TABLE_ID_CONST } from '/@/constants/support/table-id-const';
+          <br />
+          使用: {{ '<TableOperator v-model="columns" :tableId="TABLE_ID_CONST.BUSINESS.XXX" :refresh="queryData" />' }}
+          <br />
+          <br />
+          3. 具体用法可参考员工管理
        </template>
-        <template v-if="column.dataIndex === 'width'">
-          <a-input-number v-model:value="record.width" style="width: 90px; margin-left: 10px; margin-right: 3px" size="small" />px
+      </a-alert>
+    </div>
+    <div v-else>
+      <a-alert type="info" show-icon class="smart-margin-bottom10">
+        <template #icon><smile-outlined /></template>
+        <template #message> 可以通过拖拽行直接修改顺序哦；（ <pushpin-outlined />为固定列，不可拖拽 ）</template>
+      </a-alert>
+      <a-table
+        id="smartTableColumnModalTable"
+        rowKey="columnKey"
+        row-class-name="column-row"
+        :columns="tableColumns"
+        :dataSource="tableData"
+        :rowSelection="{ checkStrictly: false, selectedRowKeys: selectedRowKeyList, onChange: onSelectChange }"
+        :pagination="false"
+        size="small"
+        bordered
+      >
+        <template #bodyCell="{ text, record, index, column }">
+          <template v-if="column.dataIndex === 'title'">
+            <a-button type="text" :class="record.fixed ? '' : 'handle'" size="small" style="width: 100%; text-align: left">
+              <template #icon>
+                <drag-outlined v-if="!record.fixed" />
+                <pushpin-outlined v-else />
+              </template>
+              {{ text }}
+            </a-button>
+          </template>
+          <template v-if="column.dataIndex === 'width'">
+            <a-input-number v-model:value="record.width" style="width: 90px; margin-left: 10px; margin-right: 3px" size="small" />px
+          </template>
+          <template v-if="column.dataIndex === 'operate'">
+            <div class="smart-table-operate" v-if="!record.fixed">
+              <a-button @click="up(index)" v-show="index > 0" type="link" class="handle" size="small" style="margin-right: 12px"> 上移 </a-button>
+              <a-button @click="down(index)" type="link" class="handle" size="small" v-show="index !== tableData.length - 1"> 下移</a-button>
+            </div>
+          </template>
        </template>
-        <template v-if="column.dataIndex === 'operate'">
-          <div class="smart-table-operate" v-if="!record.fixed">
-            <a-button @click="up(index)" v-show="index > 0" type="link" class="handle" size="small" style="margin-right: 12px"> 上移 </a-button>
-            <a-button @click="down(index)" type="link" class="handle" size="small" v-show="index !== tableData.length - 1"> 下移</a-button>
-          </div>
-        </template>
-      </template>
-    </a-table>
+      </a-table>
+    </div>

    <template #footer>
      <a-button key="back" @click="hide">取消</a-button>
-      <a-button key="submit" type="primary" :loading="submitLoading" @click="save">保存</a-button>
-      <a-button key="back" :loading="submitLoading" @click="reset" danger style="margin-left: 20px">恢复默认</a-button>
+      <a-button v-if="tableId" key="submit" type="primary" :loading="submitLoading" @click="save">保存</a-button>
+      <a-button v-if="tableId" key="back" :loading="submitLoading" @click="reset" danger style="margin-left: 20px">恢复默认</a-button>
    </template>
  </a-modal>
 </template>
@@ -67,7 +91,7 @@
  defineExpose({ show });

  // ---------------- 显示 / 隐藏 --------------------
-  let tableId = 1;
+  let tableId = null;
  const visible = ref(false);
  //显示
  function show(columns, showTableId) {
@@ -80,9 +104,12 @@
  function hide() {
    visible.value = false;
  }
-
+  const saveFlag = ref(false);
  //获取用户的列数据
  async function getUserTableColumns(tableId, columns) {
+    if (!tableId) {
+      return;
+    }
    SmartLoading.show();
    let userTableColumnArray = [];
    try {
@@ -101,14 +128,18 @@
    }

    //根据前端列和后端列构建新的列数据
-    tableData.value = mergeColumn(columns, userTableColumnArray);
-
+    let obj = mergeColumn(columns, userTableColumnArray);
+    tableData.value = obj.newColumns;
+    saveFlag.value = obj.saveFlag;
    //将已经显示的展示出来
    for (const item of tableData.value) {
      if (item.showFlag) {
        selectedRowKeyList.value.push(item.columnKey);
      }
    }
+    if (saveFlag.value) {
+      save(false);
+    }

    nextTick(() => {
      initDrag();
@@ -226,7 +257,7 @@
  }

  //保存
-  async function save() {
+  async function save(closeFlag = true) {
    submitLoading.value = true;
    try {
      let columnList = [];
@@ -250,9 +281,11 @@
        columnList,
      });

-      message.success('保存成功');
      emit('change', columnList);
-      hide();
+      if (closeFlag) {
+        message.success('保存成功');
+        hide();
+      }
    } catch (e) {
      smartSentry.captureError(e);
    } finally {