优化表格列设置

smart-admin-web/javascript-ant-design-vue3/src/components/support/table-operator/index.vue

@@ -66,7 +66,15 @@
   // 原始表格列数据（复制一份最原始的columns集合，以供后续各个地方使用）
   let originalColumn = _.cloneDeep(props.modelValue);
 
-  onMounted(buildUserTableColumns);
+  onMounted(() => {
+    buildUserTableColumns();
+    // 监听全屏事件 解决按下 ESC 退出全屏 fullScreenFlag 未改变导致下次第一下点击全屏无效的问题
+    addEventListener('fullscreenchange', (event) => {
+      if (document.fullscreenElement === null) {
+        fullScreenFlag.value = false;
+      }
+    });
+  });
 
   //构建用户的数据列
   async function buildUserTableColumns() {

smart-admin-web/javascript-ant-design-vue3/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-modal :width="800" :open="visible" title="设置列" :destroyOnClose="true" :closable="false">
-    <a-alert type="info" show-icon class="smart-margin-bottom10">
+    <div v-if="!tableId">
-      <template #icon><smile-outlined /></template>
+      <a-alert type="error" show-icon class="smart-margin-bottom10">
-      <template #message> 可以通过拖拽行直接修改顺序哦；（ <pushpin-outlined />为固定列，不可拖拽 ）</template>
+        <template #message> 您尚未设置 TableOperator 组件的 tableId</template>
-    </a-alert>
+      </a-alert>
-    <a-table
+      <a-alert type="error" class="smart-margin-bottom10">
-      id="smartTableColumnModalTable"
+        <template #message>
-      rowKey="columnKey"
+          1. 请在 src\constants\support\table-id-const.js 中配置 tableId 常量
-      row-class-name="column-row"
+          <br />
-      :columns="tableColumns"
+          <br />
-      :dataSource="tableData"
+          2. 在自己的业务表格页面组件中使用如下：
-      :rowSelection="{ checkStrictly: false, selectedRowKeys: selectedRowKeyList, onChange: onSelectChange }"
+          <br />
-      :pagination="false"
+          导入: import { TABLE_ID_CONST } from '/@/constants/support/table-id-const';
-      size="small"
+          <br />
-      bordered
+          使用: {{ '<TableOperator v-model="columns" :tableId="TABLE_ID_CONST.BUSINESS.XXX" :refresh="queryData" />' }}
-    >
+          <br />
-      <template #bodyCell="{ text, record, index, column }">
+          <br />
-        <template v-if="column.dataIndex === 'title'">
+          3. 具体用法可参考员工管理
-          <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>
         </template>
-        <template v-if="column.dataIndex === 'width'">
+      </a-alert>
-          <a-input-number v-model:value="record.width" style="width: 90px; margin-left: 10px; margin-right: 3px" size="small" />px
+    </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'">
+      </a-table>
-          <div class="smart-table-operate" v-if="!record.fixed">
+    </div>
-            <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>
 
     <template #footer>
       <a-button key="back" @click="hide">取消</a-button>
-      <a-button key="submit" type="primary" :loading="submitLoading" @click="save">保存</a-button>
+      <a-button v-if="tableId" 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="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) {
@@ -83,6 +107,9 @@
 
   //获取用户的列数据
   async function getUserTableColumns(tableId, columns) {
+    if (!tableId) {
+      return;
+    }
     SmartLoading.show();
     let userTableColumnArray = [];
     try {