gcs-ui-lib 1.2.23 → 1.2.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gcs-ui-lib",
-  "version": "1.2.23",
+  "version": "1.2.25",
   "private": false,
   "main": "./lib/gcs-ui-lib.common.js",
   "scripts": {

package/packages/StreamRefill/src/demo/index.vue

@@ -1,13 +1,28 @@
 <template>
   <div>
+    <div class="flex-box flex-c flex-v m-b-s">
+      <el-button size="mini" @click="showColumnVisible = true">{{ '显示列' | $l }}</el-button>
+    </div>
+    <cl-show-column
+      ref="showColumn"
+      :dialog-visible.sync="showColumnVisible"
+      :check-columns="checkColumns"
+      :columns="TableHeader"
+      label-key="label"
+      :auto-save="false"
+      :page-id="showColumnPageId"
+      :fixed-count="2"
+      @setColumns="setChange"
+    />
     <Trade
       ref="fillList"
       :selection="true"
       :columns="columns"
       :tableData="tableData"
+      @columns-change="handleColumnsChange"
     >
       <!-- 管理单位 -->
-      <template slot="businessTypeNo" slot-scope="{ scope }">
+      <template slot="manageUnitNo" slot-scope="{ scope }">
         fffffffff
       </template>
     </Trade>
@@ -18,15 +33,16 @@
 </template>
 
 <script>
-import { TableOperateColumn } from "n20-common-lib";
+import { TableOperateColumn, ShowColumn } from "n20-common-lib";
 import { $l } from "n20-common-lib/src/utils/i18n";
 import {amountFormat} from "@/utils/index"
-import Trade from "../main.vue"; // 真正使用的时候不用导入 已全局use
+import Trade from "../main.vue";
 export default {
   name: "trade",
   components: {
     TableOperateColumn,
-    Trade, // 真正使用的时候不用导入 已全局use
+    ShowColumn,
+    Trade,
   },
   data() {
     return {
@@ -94,40 +110,6 @@ export default {
           isRplsChange: false,
         },
       ],
-      btnList: [
-        {
-          // 根据权限和当前行数据显示
-          label: "置顶",
-          tip: "提示信息",
-          // disabled: true, // 显示但禁用
-          isHas: (row) => row.state == "0",
-          command: "zd",
-        },
-        {
-          // 根据函数返回值显示
-          label: "取消销户登记",
-          isHas: (row) => row.state != "0",
-          command: "qxxfdj",
-          type: "danger",
-        },
-        {
-          // 一直显示的
-          label: "销户登记",
-          command: "xfdj",
-        },
-        {
-          // 根据权限显示的
-          label: "销户申请",
-          isHas: "user-web0001",
-          command: "xfsq",
-        },
-        {
-          // 根据权限组显示的
-          label: "初始化余额",
-          isHas: ["user-web0001", "user-web00012"],
-          command: "cshye",
-        },
-      ],
       columns: [
         {
           label: $l("金额"),
@@ -136,9 +118,6 @@ export default {
           align: "right",
           minWidth: "190",
           "show-overflow-tooltip": true,
-          render(h, row) {
-            return <span>{amountFormat(row.amount)}</span>;
-          },
         },
         {
           label: $l("所属管理单位"),
@@ -147,9 +126,6 @@ export default {
           align: "left",
           minWidth: "230",
           "show-overflow-tooltip": true,
-          render(h, row) {
-            return <span>{row.manageUnitName || "--"}</span>;
-          },
         },
         {
           label: $l("款项类别"),
@@ -158,9 +134,6 @@ export default {
           align: "center",
           minWidth: "144",
           "show-overflow-tooltip": true,
-          render(h, row) {
-            return <span>{row.paymentCategoryName || "--"}</span>;
-          },
         },
         {
           label: $l("部门"),
@@ -169,11 +142,7 @@ export default {
           align: "center",
           minWidth: "144",
           "show-overflow-tooltip": true,
-          render(h, row) {
-            return <span>{row.departmentName || "--"}</span>;
-          },
         },
-
         {
           label: $l("预算科目"),
           prop: "budgetAccountName",
@@ -197,9 +166,6 @@ export default {
           align: "right",
           minWidth: "190",
           "show-overflow-tooltip": true,
-          render(h, row) {
-            return <span>{amountFormat(row.budgetExecAmount) || "--"}</span>;
-          },
         },
         {
           label: $l("资金计划"),
@@ -216,9 +182,6 @@ export default {
           align: "center",
           minWidth: "144",
           "show-overflow-tooltip": true,
-          render(h, row) {
-            return <span>{row.cashFlowName || "--"}</span>;
-          },
         },
         {
           label: $l("客商"),
@@ -227,9 +190,6 @@ export default {
           align: "center",
           minWidth: "144",
           "show-overflow-tooltip": true,
-          render(h, row) {
-            return <span>{row.customName || "--"}</span>;
-          },
         },
         {
           label: $l("备注"),
@@ -240,9 +200,44 @@ export default {
           "show-overflow-tooltip": true,
         },
       ],
+      mergedColumns: [],
+      showColumnVisible: false,
+      showColumnPageId: "stream_refill_demo",
     };
   },
+  computed: {
+    // 显示列列表
+    TableHeader() {
+      const sourceList = this.mergedColumns.length ? this.mergedColumns : this.columns;
+      return sourceList.map((item) => ({
+        ...item,
+        label: item.label || item.prop,
+      }));
+    },
+    // 显示列勾选状态
+    checkColumns() {
+      const savedColumns = this.$refs.fillList?.displayColumns;
+      const baseColumns = this.mergedColumns.length ? this.mergedColumns : this.columns;
+      
+      if (!savedColumns?.length) {
+        return baseColumns;
+      }
+
+      const savedProps = new Set(savedColumns.map(c => c.prop));
+      const newColumns = baseColumns.filter(c => !savedProps.has(c.prop));
+      return [...savedColumns, ...newColumns];
+    },
+  },
   methods: {
+    // 显示列设置回调 - 将显示列设置同步回表格
+    setChange(list) {
+      this.$refs.fillList.setColumns(list);
+      this.showColumnVisible = false;
+    },
+    // 接收合并后的列配置
+    handleColumnsChange(columns) {
+      this.mergedColumns = columns;
+    },
     async submit() {
       let v_1 = await this.$refs.fillList?.validate();
       debugger;

package/packages/StreamRefill/src/main.vue

@@ -26,38 +26,8 @@
           align="center"
         />
         <el-table-column
-          v-for="item in _columns"
-          :key="item.prop"
-          v-bind="item"
-          header-align="center"
-          min-width="250"
-          :show-overflow-tooltip="false"
-        >
-          <template slot="header">
-            <span class="req-h" v-if="headerProps.includes(item.prop)">*</span>
-            {{ $l(item.label) }}
-          </template>
-          <template slot-scope="{ $index, row, column }">
-            <el-form-item
-              :prop="`tableData.${$index}.${item.prop}`"
-              :rules="[
-                {
-                  required: _requireProps.includes(item.prop),
-                  trigger: ['blur', 'change'],
-                  message: '请输入/选择' + item.label,
-                },
-              ]"
-            >
-              <slot
-                :name="item.slotName"
-                :scope="{ $index, row, column, item }"
-              ></slot>
-            </el-form-item>
-          </template>
-        </el-table-column>
-        <el-table-column
-          v-for="item in exFields"
-          :key="item.prop"
+          v-for="(item, index) in displayColumns"
+          :key="`${item.prop}-${index}`"
           v-bind="item"
           header-align="center"
           min-width="250"
@@ -67,8 +37,8 @@
             <span class="req-h" v-if="headerProps.includes(item.prop)">*</span>
             {{ $l(item.label) }}
             <el-tooltip
-              class="item"
               v-if="item.fieldDescription"
+              class="item"
               effect="dark"
               :content="item.fieldDescription"
               placement="top-start"
@@ -76,7 +46,7 @@
               <i class="n20-icon-xinxitishi"></i>
             </el-tooltip>
           </template>
-          <template slot-scope="{ $index, row }">
+          <template slot-scope="{ $index, row, column }">
             <el-form-item
               :prop="`tableData.${$index}.${item.prop}`"
               :rules="[
@@ -87,7 +57,15 @@
                 },
               ]"
             >
+              <!-- 固定列使用插槽（通过 prop 判断） -->
+              <slot
+                v-if="_isFixedColumn(item.prop)"
+                :name="item.slotName"
+                :scope="{ $index, row, column, item }"
+              ></slot>
+              <!-- 扩展列使用组件 -->
               <component
+                v-else
                 v-model="row[item.prop]"
                 :disabled="disabled || row['disabled']"
                 :is="item.type"
@@ -191,6 +169,7 @@ export default {
       sizeBind: {},
       exFields: [],
       typeCodeList: [],
+      displayColumns: [], // 显示列配置
     };
   },
   computed: {
@@ -227,6 +206,15 @@ export default {
         return this.columns;
       },
     },
+    mergedColumns() {
+      return [...this._columns, ...this.exFields].map((item) => {
+        const { slotName, ...rest } = item;
+        return {
+          ...rest,
+          label: item.label || item.prop,
+        };
+      });
+    },
   },
   watch: {
     tableData: {
@@ -236,11 +224,24 @@ export default {
       deep: true,
       immediate: true,
     },
+    mergedColumns: {
+      handler(newVal) {
+        if (!this.displayColumns.length && newVal.length) {
+          this.displayColumns = newVal;
+        }
+        this.$emit("columns-change", newVal);
+      },
+      immediate: true,
+    },
   },
   mounted() {
     this.init();
   },
   methods: {
+    // 判断是否为固定列（通过 prop 是否在传入的 columns 中判断）
+    _isFixedColumn(prop) {
+      return this._columns.some((col) => col.prop === prop);
+    },
     async init() {
       let res = await getCustomSettingFieldFormList(this.axiosParams);
       this.exFields = [];
@@ -275,6 +276,7 @@ export default {
           minWidth: 250,
           align: "center",
           prop: item.fieldNo,
+          slotName: item.fieldNo, // 扩展字段使用 fieldNo 作为 slotName
           multiple: item.fieldProperty == "multiSelect",
           type: typeMap[item.fieldProperty] || "FillInput",
           "show-overflow-tooltip": true,
@@ -304,6 +306,7 @@ export default {
       });
       await this.$nextTick();
       this.clearValidate();
+      this.$emit("columns-change", this.mergedColumns);
     },
     handleSelectionChange(val) {
       this.$emit("selection-change", val);
@@ -335,6 +338,17 @@ export default {
         });
       });
     },
+    setColumns(columns) {
+      // 确保每列都有 label 属性用于显示
+      this.displayColumns = columns.map((col) => ({
+        ...col,
+        label: col.label || col.label2 || col.prop,
+      }));
+      this.$forceUpdate();
+      this.$nextTick(() => {
+        this.$refs['t-box']?.doLayout();
+      });
+    },
   },
   activated() {},
 };