gcs-ui-lib 1.0.1

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

@@ -0,0 +1,18 @@
+<template>
+  <Trade :config="config"></Trade>
+</template>
+
+<script>
+import Trade from "../main.vue"; // 真正使用的时候不用导入 已全局use
+export default {
+  name: "trade",
+  components: {
+    Trade, // 真正使用的时候不用导入 已全局use
+  },
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style lang="scss" scoped></style>

package/packages/BranchBank/src/main.vue

@@ -0,0 +1,97 @@
+<!--
+ * @Author: your name
+ * @Date: 2022-03-02 09:41:41
+ * @LastEditTime: 2023-12-05 17:10:15
+ * @LastEditors: 龚珂 gongke@nstc.com.cn
+ * @Description: 支付网点-支持下拉懒加载、模糊查询、支行名和联行号拼接展示
+ * @FilePath: \gcs-rec_web\payee-web\payee\src\components\branchBank.vue
+-->
+<template>
+  <CLSelectLazy
+    v-model="branchBankNo"
+    :filter-method="filterFn"
+    @scroll-bottom="getNextList"
+    v-on="$listeners"
+    v-bind="$attrs"
+    :placeholder="$l('请选择')"
+    @change="handleChange"
+  >
+    <el-option
+      v-for="item in branchBankList"
+      :key="item.cnapsNo"
+      :label="item['branchBankName']"
+      :value="item[valueKey]"
+    >
+    {{'(' + item.cnapsNo + ')' + item.branchBankName}}
+    </el-option>
+  </CLSelectLazy>
+</template>
+
+<script>
+import { getBranchData } from "@/api/common.js";
+import {SelectLazy} from 'n20-common-lib'
+export default {
+  name: "NstcBranchBank",
+  components: {
+    CLSelectLazy:SelectLazy
+  },
+  props: {
+    value: {
+      type: [String, Array],
+      default: "",
+    },
+    valueKey: {
+      type: String,
+      default: "cnapsNo",
+    },
+  },
+  data() {
+    return {
+      branchBankList: [],
+      branchBankPage: {
+        "page.current": 1,
+        "page.size": 20,
+        searchKey: "",
+      },
+    };
+  },
+  computed: {
+    branchBankNo: {
+      get() {
+        return this.value;
+      },
+      set(val) {
+        this.$emit("input", val);
+      },
+    },
+  },
+  mounted() {
+    this.init();
+  },
+
+  methods: {
+    async init() {
+      const res = await getBranchData(this.branchBankPage);
+      this.branchBankList = res?.list || [];
+    },
+    async filterFn(val) {
+      this.branchBankPage["page.size"] = 20;
+      this.branchBankPage.searchKey = val;
+      const res = await getBranchData(this.branchBankPage);
+      this.branchBankList = res?.list || [];
+    },
+    async getNextList() {
+      this.branchBankPage["page.size"] += 20;
+      const res = await getBranchData(this.branchBankPage);
+      this.branchBankList = res?.list || [];
+    },
+    handleChange(e){
+      const bank = this.branchBankList.find((item) => item.cnapsNo === e);
+      this.$emit("set-name", bank.branchBankName);
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

package/packages/ConfigurableForm/index.js

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

package/packages/ConfigurableForm/src/components/config.js

@@ -0,0 +1,63 @@
+/**
+ * 字段属性配置文件
+ * 定义不同字段类型对应的组件属性配置
+ */
+
+// 字段属性配置映射
+export const fieldPropsConfig = {
+  text: {
+    type: "text",
+    clearable: true,
+    fieldTypeMapping: "el-input",
+    default: "",
+  },
+
+  date: {
+    type: "date",
+    format: "yyyy-MM-dd",
+    "value-format": "yyyy-MM-dd",
+    clearable: true,
+    fieldTypeMapping: "el-date-picker",
+    default: null,
+  },
+
+  bigdecimal: {
+    controls: true,
+    precision: 2,
+    isClearable: true,
+    min: 0,
+    max: 999999999999.99,
+    fieldTypeMapping: "cl-input-number",
+    default: "",
+  },
+
+  select: {
+    clearable: true,
+    filterable: true,
+    fieldTypeMapping: "el-select",
+    default: "",
+  },
+
+  multiselect: {
+    multiple: true,
+    clearable: true,
+    filterable: true,
+    "collapse-tags": true,
+    fieldTypeMapping: "el-select",
+    default: "",
+  },
+};
+
+// 字段占位符配置
+export const fieldPlaceholderConfig = {
+  select: "请选择",
+  multiselect: "请选择",
+  date: "请选择",
+  text: "请输入",
+  bigdecimal: "请输入",
+};
+
+// 默认配置
+export const defaultFieldProps = {
+  clearable: true,
+};

package/packages/ConfigurableForm/src/components/detail.vue

@@ -0,0 +1,158 @@
+<template>
+  <div class="configurable-form-detail">
+    <ClDescriptions :column="3">
+      <template v-if="extendAbled.length > 0">
+        <template v-for="field in extendAbled">
+          <el-descriptions-item
+            v-if="field.isEnabled === 1"
+            :key="field.fieldNo"
+            :labelStyle="labelStyle"
+          >
+            <div
+              slot="label"
+              v-title="field.fieldName"
+              class="text-ellipsis"
+              show-overflow-tooltip="true"
+            >
+              {{ field.fieldName }}
+            </div>
+            <slot
+              name="field"
+              :field="field"
+              :value="getFieldDisplayValue(field)"
+              :old-value="getFieldOldValue(field)"
+            >
+              <!-- 默认插槽内容 -->
+              <div
+                v-title="getFieldDisplayValue(field)"
+                :show-overflow-tooltip="true"
+                class="text-ellipsis"
+              >
+                {{ getFieldDisplayValue(field) || "--" }}
+              </div>
+            </slot>
+          </el-descriptions-item>
+        </template>
+      </template>
+      <!-- 当没有数据时，提供一个空的占位项 -->
+      <el-descriptions-item v-else>
+        <div slot="label">暂无数据</div>
+        <div>--</div>
+      </el-descriptions-item>
+    </ClDescriptions>
+  </div>
+</template>
+
+<script>
+import { Descriptions } from "n20-common-lib";
+export default {
+  name: "Detail",
+  components: {
+    ClDescriptions: Descriptions,
+  },
+  props: {
+    formData: {
+      type: Object,
+      default: () => ({}),
+    },
+    extendFields: {
+      type: Array,
+      default: () => [],
+    },
+    labelStyle: {
+      type: String,
+      default: "",
+    },
+    fieldDifferences: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  computed: {
+    extendAbled() {
+      return this.extendFields.filter((field) => field.isEnabled === 1);
+    },
+  },
+  methods: {
+    // 格式化字段值
+    formatFieldValue(value, field) {
+      if (!value && value !== 0) {
+        return "";
+      }
+
+      // 根据字段类型格式化显示值
+      const property = field.fieldProperty?.toLowerCase();
+
+      switch (property) {
+        case "date":
+          // 日期格式化
+          return this.formatDate(value);
+        case "bigdecimal":
+          // 数字格式化
+          return this.formatNumber(value);
+        case "select":
+        case "multiselect":
+          // 下拉框直接显示label（因为存储的就是label）
+          return value;
+        default:
+          return value;
+      }
+    },
+
+    // 获取字段显示值
+    getFieldDisplayValue(field) {
+      const value = this.formData[field.fieldNo];
+      return this.formatFieldValue(value, field);
+    },
+
+    // 获取字段的旧值
+    getFieldOldValue(field) {
+      const oldValue = this.fieldDifferences?.oldValue?.[field.fieldNo];
+      return this.formatFieldValue(oldValue, field);
+    },
+
+    // 格式化日期
+    formatDate(value) {
+      if (!value) return "";
+      // 如果已经是格式化的日期字符串，直接返回
+      if (typeof value === "string" && value.includes("-")) {
+        return value;
+      }
+      // 如果是时间戳，转换为日期格式
+      try {
+        const date = new Date(value);
+        return date.toISOString().split("T")[0];
+      } catch (error) {
+        return value;
+      }
+    },
+
+    // 格式化数字
+    formatNumber(value) {
+      if (!value && value !== 0) return "";
+      const num = parseFloat(value);
+      if (isNaN(num)) return value;
+      const fixedNum = num.toFixed(2);
+
+      const [integerPart, decimalPart] = fixedNum.split(".");
+
+      const integerWithThousand = integerPart.replace(
+        /\B(?=(\d{3})+(?!\d))/g,
+        ","
+      );
+
+      return `${integerWithThousand}.${decimalPart}`;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.configurable-form-detail {
+  .text-ellipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+</style>

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

@@ -0,0 +1,279 @@
+<template>
+  <div class="configurable-form-example">
+    <div class="configurable-form-example__header">
+      <h2>动态表单示例</h2>
+      <el-form>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="单据编号:">
+              <el-input v-model="documentNo" placeholder="请输入单据编号" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="模块编号:">
+              <el-input v-model="modelNo" placeholder="请输入模块编号" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <el-button type="primary" @click="handleSubmit">提交表单</el-button>
+      <el-button @click="handleReset">重置表单</el-button>
+      <el-button @click="handleValidate">验证表单</el-button>
+    </div>
+
+    <div >
+      <!-- 动态表单组件 -->
+      <configurable-form
+        ref="configurableForm"
+        v-model="formData"
+        :document-no="documentNo"
+        :model-no="modelNo"
+        @extend-length="extendLength"
+      >
+        <!-- <template #label="{ field, fieldName }">
+          <div class="custom-label">
+            <span>{{ fieldName }}</span>
+          </div>
+        </template>
+
+        <template #field="{ field, value, oldValue }">
+          <template v-if="oldValue">
+            <div class="custom-field">
+              <div v-title="value" class="field-value m-b-ss text-ellipsis">
+                <span class="after-color">{{ value || "--" }}</span>
+              </div>
+              <div
+                v-if="field.fieldDescription"
+                class="text-ellipsis flex-box flex-v"
+                :show-overflow-tooltip="true"
+              >
+                <span class="before-color text-ellipsis">{{ oldValue }}</span>
+                <el-tooltip content="123" placement="top">
+                  <i class="n20-icon-xinxitishi m-l-ss color-placeholder"></i>
+                </el-tooltip>
+              </div>
+            </div>
+          </template>
+          <template v-else>
+            <span>{{ value || "--" }}</span>
+          </template>
+        </template> -->
+      </configurable-form>
+    </div>
+
+    <div class="configurable-form-example__footer">
+      <h3>表单数据:</h3>
+      <pre>{{ JSON.stringify(formData, null, 2) }}</pre>
+    </div>
+  </div>
+</template>
+
+<script>
+import ConfigurableForm from "../main.vue";
+
+export default {
+  name: "ConfigurableFormExample",
+  components: {
+    ConfigurableForm,
+  },
+  data() {
+    return {
+      documentNo: "open_account",
+      modelNo: "AIMS",
+      extendLength: 0,
+      formData: {
+        textExtend1: "通知账户",
+      },
+      fieldDifferences: {
+        fieldName: "jsonExtend",
+        fieldDescription: null,
+        differenceType: 2,
+        oldValue: {
+          id: 133,
+          accountId: 3734,
+          fmId: null,
+          textExtend1: "活期账户",
+          textExtend2: null,
+          textExtend3: null,
+          textExtend4: null,
+          textExtend5: null,
+          textExtend6: null,
+          textExtend7: null,
+          textExtend8: null,
+          numberExtend1: null,
+          dateExtend1: null,
+          createTime: "2025-09-17 09:17:51",
+          updateTime: "2025-09-17 09:17:51",
+        },
+        newValue: {
+          id: 134,
+          accountId: null,
+          fmId: 6285,
+          textExtend1: "通知账户",
+          textExtend2: null,
+          textExtend3: null,
+          textExtend4: null,
+          textExtend5: null,
+          textExtend6: null,
+          textExtend7: null,
+          textExtend8: null,
+          numberExtend1: null,
+          dateExtend1: null,
+          createTime: "2025-09-17 09:18:26",
+          updateTime: "2025-09-17 09:18:26",
+        },
+        elements: null,
+        children: {
+          differenceType: 2,
+          oldValue: {
+            id: 133,
+            accountId: 3734,
+            fmId: null,
+            textExtend1: "活期账户",
+            textExtend2: null,
+            textExtend3: null,
+            textExtend4: null,
+            textExtend5: null,
+            textExtend6: null,
+            textExtend7: null,
+            textExtend8: null,
+            numberExtend1: null,
+            dateExtend1: null,
+            createTime: "2025-09-17 09:17:51",
+            updateTime: "2025-09-17 09:17:51",
+          },
+          newValue: {
+            id: 134,
+            accountId: null,
+            fmId: 6285,
+            textExtend1: "通知账户",
+            textExtend2: null,
+            textExtend3: null,
+            textExtend4: null,
+            textExtend5: null,
+            textExtend6: null,
+            textExtend7: null,
+            textExtend8: null,
+            numberExtend1: null,
+            dateExtend1: null,
+            createTime: "2025-09-17 09:18:26",
+            updateTime: "2025-09-17 09:18:26",
+          },
+          children: [
+            {
+              fieldName: "textExtend1",
+              fieldDescription: null,
+              differenceType: 2,
+              oldValue: "活期账户",
+              newValue: "通知账户",
+              elements: null,
+              children: null,
+            },
+          ],
+        },
+      },
+    };
+  },
+  methods: {
+    // 提交表单
+    async handleSubmit() {
+      try {
+        const data = await this.$refs.configurableForm.validate();
+        console.log("表单数据:", data);
+        this.$message.success("表单验证通过");
+      } catch (errors) {
+        console.error("表单验证失败:", errors);
+        this.$message.error("表单验证失败，请检查输入");
+      }
+    },
+
+    // 重置表单
+    handleReset() {
+      this.$refs.configurableForm.resetForm();
+      this.$message.success("表单已重置");
+    },
+
+    // 验证表单
+    async handleValidate() {
+      try {
+        await this.$refs.configurableForm.validate();
+        this.$message.success("表单验证通过");
+      } catch (errors) {
+        this.$message.error("表单验证失败");
+      }
+    },
+
+    handleFieldChange(field) {},
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.configurable-form-example {
+  padding: 20px;
+
+  &__header {
+    background: #f5f7fa;
+    padding: 20px;
+    border-radius: 4px;
+    margin-bottom: 20px;
+
+    h2 {
+      margin: 0 0 16px 0;
+      color: #303133;
+    }
+
+    .el-button {
+      margin-right: 10px;
+    }
+  }
+
+  &__content {
+    border: 1px solid #dcdfe6;
+    border-radius: 4px;
+    margin-bottom: 20px;
+  }
+
+  &__footer {
+    background: #f9f9f9;
+    padding: 16px;
+    border-radius: 4px;
+
+    h3 {
+      margin: 0 0 12px 0;
+      color: #606266;
+    }
+
+    pre {
+      background: #fff;
+      border: 1px solid #e4e7ed;
+      border-radius: 4px;
+      padding: 12px;
+      margin: 0;
+      font-size: 12px;
+      color: #606266;
+    }
+  }
+}
+// 自定义标签样式
+// .custom-label {
+//   display: flex;
+//   align-items: center;
+//   font-weight: 600;
+//   color: #303133;
+
+//   .label-icon {
+//     margin-right: 6px;
+//     font-size: 14px;
+//   }
+
+//   .label-text {
+//     flex: 1;
+//   }
+
+//   .required {
+//     color: #f56c6c;
+//     margin-left: 4px;
+//   }
+// }
+</style>