gcs-ui-lib 1.0.1

package/packages/StreamRefill/src/main.vue

@@ -0,0 +1,335 @@
+<template>
+  <div>
+    <el-form :model="formData" ref="formRef" v-if="!readOnly">
+      <el-table
+        class="t-box"
+        ref="t-box"
+        :data="formData.tableData"
+        :max-height="tableHeight"
+        :size="size"
+        border
+        header-align="center"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column
+          v-if="selection"
+          type="selection"
+          width="62"
+          align="center"
+        />
+        <el-table-column
+          type="index"
+          width="56"
+          fixed="left"
+          :label="$l('序号')"
+          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-bind="item"
+          min-width="250"
+          :show-overflow-tooltip="false"
+        >
+          <template slot="header">
+            <span class="req-h" v-if="headerProps.includes(item.prop)">*</span>
+            {{ $l(item.label) }}
+            <el-tooltip
+              class="item"
+              v-if="item.fieldDescription"
+              effect="dark"
+              :content="item.fieldDescription"
+              placement="top-start"
+            >
+              <i class="n20-icon-xinxitishi"></i>
+            </el-tooltip>
+          </template>
+          <template slot-scope="{ $index, row }">
+            <el-form-item
+              :prop="`tableData.${$index}.${item.prop}`"
+              :rules="[
+                {
+                  required: _requireProps.includes(item.prop),
+                  trigger: ['blur', 'change'],
+                  message: '请输入/选择' + item.label,
+                },
+              ]"
+            >
+              <component
+                v-model="row[item.prop]"
+                :is="item.type"
+                :items="item"
+              />
+            </el-form-item>
+          </template>
+        </el-table-column>
+        <TableSetSize :size.sync="size" @resize="(el) => (sizeBind = el)" />
+      </el-table>
+    </el-form>
+    <FillTable
+      v-else
+      :data="tableData"
+      :columns="AllColumns"
+      :max-height="tableHeight"
+      :showSetsize="true"
+      :cell-default="true"
+    />
+  </div>
+</template>
+
+<script>
+import { TableSetSize, Table } from "n20-common-lib";
+import { getCustomSettingFieldFormList, getMdmDataDoc } from "@/api/setting";
+import { deepClone, amountFormat } from "@/utils";
+const context = require.context("./components/", true, /\.vue$/);
+const cmps = {};
+context.keys().forEach((key) => {
+  const component = context(key).default;
+  cmps[component.name] = component;
+});
+const typeMap = {
+  text: "FillInput",
+  date: "FillDate",
+  bigDecimal: "FillBigDecimal",
+  select: "FillSelect",
+  multiSelect: "FillMultiSelect",
+};
+export default {
+  name: "NstcStreamRefill",
+  props: {
+    //特殊需求-表头显示必填，但提交不校验
+    specialRequireProps: {
+      type: Array,
+      default: () => [],
+    },
+    //必填字段(传入该字段的prop，依该字段为主，后端不生效)
+    requireProps: {
+      type: Array,
+      default: () => [],
+    },
+    readOnly: {
+      type: Boolean,
+      default: false,
+    },
+    columns: {
+      type: Array,
+      default: () => [],
+    },
+    tableData: {
+      type: Array,
+      default: () => [{}],
+    },
+    selection: {
+      type: Boolean,
+      default: false,
+    },
+    tableHeight: {
+      type: Number,
+      default: 400,
+    },
+    axiosParams: {
+      type: Object,
+      default: () => {
+        return {
+          documentNo: "ptms_record_attr",
+          modelNo: "PTMS",
+          groupNo: "extend",
+        };
+      },
+    },
+  },
+  components: {
+    TableSetSize,
+    FillTable: Table,
+    ...cmps,
+  },
+  data() {
+    return {
+      Header: [],
+      customRequireProps: [],
+      formData: {
+        tableData: [],
+      },
+      size: "small",
+      sizeBind: {},
+      exFields: [],
+      typeCodeList: [],
+    };
+  },
+  computed: {
+    AllColumns() {
+      let temp = [
+        {
+          type: "index",
+          label: "序号",
+          width: "56",
+          align: "center",
+          static: "pre",
+        },
+        ...this._columns,
+        ...this.exFields,
+      ];
+      return temp.map((item) => {
+        delete item.slotName;
+        return { ...item };
+      });
+    },
+    headerProps() {
+      return [
+        ...this.specialRequireProps,
+        ...this.requireProps,
+        ...this.customRequireProps,
+      ];
+    },
+    _requireProps() {
+      return [...this.requireProps, ...this.customRequireProps];
+    },
+    _columns: {
+      get() {
+        return this.columns;
+      },
+    },
+  },
+  watch: {
+    tableData: {
+      handler() {
+        this.formData.tableData = this.tableData;
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    async init() {
+      let res = await getCustomSettingFieldFormList(this.axiosParams);
+      this.exFields = [];
+      let temp = res?.find((i) => i.groupNo == this.axiosParams.groupNo) || {};
+      let Field = temp.fieldSettings || [];
+      let exField = (temp.fieldExtendSettings || []).filter((i) => i.isEnabled);
+      //获取固定分组数据必填字段
+      this.setFieldHeader(Field);
+      //获取拓展字段分组数据必填字段
+      this.setExTHeader(exField);
+    },
+    setFieldHeader(Field) {
+      for (let i of Field) {
+        if (i.isRequired) this.customRequireProps.push(i.fieldNo);
+      }
+      //设置固定字段的必填
+      this.Header = this.columns.map((item) => {
+        let t = Field.find((i) => i.fieldNo == item.prop);
+        return {
+          ...item,
+          label: t ? t.fieldName : item.label,
+        };
+      });
+    },
+    async setExTHeader(exField) {
+      let tempFild = [];
+      for (let item of exField) {
+        if (item.isRequired) this.customRequireProps.push(item.fieldNo);
+        tempFild.push({
+          ...item,
+          label: item.fieldName,
+          minWidth: 250,
+          align: "center",
+          prop: item.fieldNo,
+          multiple: item.fieldProperty == "multiSelect",
+          type: typeMap[item.fieldProperty] || "FillInput",
+          "show-overflow-tooltip": true,
+        });
+        if (item.fieldDocKey) {
+          this.typeCodeList.push(item.fieldDocKey);
+        }
+      }
+      let res = await getMdmDataDoc({
+        typeCodeList: this.typeCodeList,
+      });
+      this.exFields = tempFild.map((item) => {
+        if (item.fieldProperty == "bigDecimal") {
+          item.align = 'right'
+          item.render = (h, row) => {
+            return <span>{amountFormat(row[item.fieldNo])}</span>;
+          };
+        }
+        if (item.fieldDocKey) {
+          let list = res.list.filter((i) => i.typeCode == item.fieldDocKey);
+          item.options = list.map((i) => ({
+            label: i.name,
+            value: i.code,
+          }));
+        }
+        return item;
+      });
+      await this.$nextTick();
+      this.clearValidate();
+    },
+    handleSelectionChange(val) {
+      this.$emit("selection-change", val);
+    },
+    async clearValidate() {
+      await this.$nextTick();
+      this.$refs.formRef?.clearValidate();
+    },
+    validate() {
+      return new Promise((resolve, reject) => {
+        // 模拟异步操作（如网络请求、定时器）
+        this.$refs.formRef.validate((valid) => {
+          if (valid) {
+            let props = this.exFields
+              .filter((item) => item.type == "FillMultiSelect")
+              .map((item) => item.prop);
+            let temp = deepClone(this.formData.tableData);
+            temp.forEach((item) => {
+              for (let i of props) {
+                if (Array.isArray(item[i])) {
+                  item[i] = item[i]?.join(",") || "";
+                }
+              }
+            });
+            resolve(temp);
+          } else {
+            reject(null); // 失败时调用 reject
+          }
+        });
+      });
+    },
+  },
+  activated() {},
+};
+</script>
+
+<style scoped></style>

package/packages/Trade/index.js

@@ -0,0 +1,7 @@
+import NstcTrade from './src/main'
+
+NstcTrade.install = function(Vue) {
+    Vue.component(NstcTrade.name, NstcTrade)
+}
+
+export default NstcTrade