gcs-ui-lib 1.0.1

package/packages/DynamicForm/src/components/LazySelect.vue

@@ -0,0 +1,311 @@
+<template>
+  <span>
+    <N20-select-lazy
+      v-model="_value"
+      :filter-method="filterFn"
+      @scroll-bottom="getNextList"
+      class="input-w"
+      filterable
+      :clearable="items.clearable ? items.clearable : true"
+      v-bind="$attrs"
+      @change="changeFn"
+    >
+      <el-option
+        v-for="item in options"
+        v-title="item.label"
+        :style="{
+          'max-width': $attrs['show-overflow-tooltip'] ? '224px' : 'none',
+        }"
+        :show-overflow-tooltip="true"
+        class="text-ellipsis"
+        :key="item.value + items.prop"
+        :label="item.label | $l"
+        :value="item.value"
+      >
+        {{ labelKey ? item._label : item.label | $l }}
+      </el-option>
+    </N20-select-lazy>
+  </span>
+</template>
+
+<script>
+/* 各属性，方法参考el-select */
+import {dayjs, SelectLazy as N20SelectLazy} from "n20-common-lib";
+import {getDataForGet, getDataForPost} from "@/api/common";
+
+export default {
+  name: "SelectLazy",
+  components: {N20SelectLazy},
+  props: {
+    value: {
+      type: String,
+      default: "",
+    },
+    items: {
+      type: Object,
+      default: () => {
+        return {
+          options: [],
+        };
+      },
+    },
+    variable: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+    label: {
+      type: String,
+      default: "",
+    },
+  },
+  computed: {
+    _value: {
+      get() {
+        return this.value || this.label;
+      },
+      set(value) {
+        if (["", null, undefined].includes(value)) {
+          this.$emit(`update:label`, "");
+          this.$emit("input", "");
+          return;
+        }
+        let res = this.getName(value);
+        if (!res.length) {
+          this.$emit(`update:label`, value);
+        } else {
+          this.$emit(`update:label`, res.join(","));
+          this.$emit("input", value);
+        }
+      },
+    },
+    labelKey() {
+      return (
+        this.items?.api?.labelKey.includes(",") ||
+        this.items?.api?.labelKey.includes("{")
+      );
+    },
+    // 判断数据类型，格式化回显数据
+    valueType() {
+      return typeof this.value;
+    },
+  },
+  data() {
+    return {
+      options: null,
+      query: "",
+      current: 1,
+      total: 0,
+      requestBody: {},
+      useDefault: true,
+    };
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    getName(value) {
+      let temp = [];
+      if (Array.isArray(value)) {
+        for (let i of value) {
+          let res = (this.options || []).find((row) => row.value === i);
+          // 如果label显示的2个字段，则取第一个字段的值
+          if (res)
+            temp.push(res[this.items?.api?.labelKey.split(",")[0] || "label"]);
+        }
+      } else {
+        let res = (this.options || []).find((row) => row.value === value);
+        if (res){
+        const regex = /\{label:(.*?)\}/;
+        const match = this.items?.api?.labelKey.match(regex);
+        if(match && match.length > 1){
+          const label = match[1];
+          temp.push(res[label]);
+        }else{
+          temp.push(res[this.items?.api?.labelKey.split(",")[0] || "label"]);
+        }
+      }
+      }
+      return temp;
+    },
+    init(status) {
+      if (!this.items?.api?.apiUrl || !this.items?.api?.requestMethod) {
+        this.options = JSON.parse(this.items.options) || [];
+        return;
+      }
+      this.setRequestBody();
+      if (["GET", "get"].includes(this.items?.api?.requestMethod)) {
+        getDataForGet(
+          this.items?.api?.apiUrl,
+          this.requestBody,
+          this.$attrs.headers
+        ).then((res) => {
+          this.setValue(res, status);
+        });
+      }
+      if (["POST", "post"].includes(this.items?.api?.requestMethod)) {
+        getDataForPost(
+          this.items?.api?.apiUrl,
+          this.requestBody,
+          this.$attrs.headers
+        ).then((res) => {
+          this.setValue(res, status);
+        });
+      }
+    },
+    setValue(res, status) {
+      let temp =
+        (this.items?.api?.dataProp
+          ? new Function("res", `return res.${this.items?.api?.dataProp}`)(res)
+          : res.data) || [];
+      temp = temp?.map((item) => {
+        if (this.items?.api?.labelKey.includes(",")) {
+          let keyArr = this.items?.api?.labelKey.split(",");
+          let label = "";
+          keyArr.map((key, index) => {
+            if (index === keyArr.length - 1) {
+              label += item[key];
+            } else {
+              label += item[key] + " ";
+            }
+          });
+          item._label = label;
+          item.label = item[keyArr[0]];
+        } else if (
+          this.items?.api?.labelKey &&
+          this.items?.api?.labelKey.includes("{")
+        ) {
+          let regex = /\{([^}]+)\}/g;
+          item._label = this.items?.api?.labelKey.replace(
+              regex,
+              (match, p1) => {
+                if (p1.includes("label:")) {
+                  item.label = item[p1.replace("label:", "")];
+                  return item[p1.replace("label:", "")];
+                }
+                return item[p1];
+              }
+          );
+        } else {
+          item.label = item[this.items?.api?.labelKey || "label"];
+        }
+        if (this.items?.api?.valueKey.includes(",")) {
+          let keyArr = this.items?.api?.valueKey.split(",");
+          let value = "";
+          keyArr.map((key, index) => {
+            if (index === keyArr.length - 1) {
+              value += item[key];
+            } else {
+              value += item[key] + ",";
+            }
+          });
+          item.value = value;
+        } else {
+          item.value = item[this.items?.api?.valueKey || "value"];
+        }
+        if (this.valueType === "string") {
+          item.value = String(item.value);
+        }
+        if (this.valueType === "number") {
+          item.value = Number(item.value);
+        }
+        return item;
+      });
+      this.useDefault = false;
+      if (status) {
+        this.options = [...this.options, ...temp];
+      } else {
+        this.options = temp;
+      }
+      this.total = res?.total || 0;
+      let select = this.options.find(
+        (item) => item[this.items?.api?.valueKey || "value"] === this.query
+      );
+      if (!select) return;
+      this.$emit("change", select);
+    },
+    setRequestBody() {
+      let page = {};
+      if (!this.items?.api?.page?.reqKey) {
+        page = {
+          [this.items?.api?.page?.size]: 20,
+          [this.items?.api?.page?.current]: this.current,
+        };
+      } else if (this.items?.api?.page?.reqKey) {
+        page = {
+          [this.items?.api?.page?.reqKey]: {
+            [this.items?.api?.page?.size]: 20,
+            [this.items?.api?.page?.current]: this.current,
+          },
+        };
+      }
+      if (!this.items?.api?.page?.size) {
+        page = {};
+      }
+      // 模糊搜索关键字查询
+      let searchObj = JSON.parse(
+        this.items?.api?.reqKeys ? this.items?.api?.reqKeys : "{}"
+      );
+      Object.keys(searchObj).map((t) => {
+        searchObj[t] = this.changVariable(searchObj[t]);
+        if (
+          Object.prototype.toString.call(searchObj[t]) === "[object String]" &&
+          searchObj[t].includes(".")
+        ) {
+          let [key, subkey] = searchObj[t].split(".");
+          this.$attrs.formData[key] &&
+            (searchObj[t] = this.$attrs.formData[key][subkey]);
+        }
+      });
+      // 接口请求参数
+      this.requestBody = {
+        ...(this.items?.api?.data || {}),
+        ...searchObj,
+        ...page,
+      };
+    },
+    filterFn(val) {
+      this.query = val;
+      if (
+        JSON.parse(this.items?.api?.reqKeys ? this.items?.api?.reqKeys : "{}")
+          .canInput
+      ) {
+        this.$emit("input", "");
+        this.$emit(`update:label`, val);
+      }
+      this.init();
+    },
+    getNextList() {
+      if (!this.items?.api?.page?.size) {
+        return;
+      }
+      if (this.current * 20 > this.total) return;
+      this.current += 1;
+      this.init(true);
+    },
+    changeFn(val) {
+      let item = this.options.find((t) => t.value == val);
+      this.$emit("change", item);
+    },
+    changVariable(val) {
+      if (val === "${inputValue}")
+        return this.useDefault
+          ? this.items?.api?.defaultInputValue || this._value || ""
+          : this.query;
+      if (!val) {
+        return val || "";
+      }
+      let str = String(val);
+      if (str === "${nowDate}") {
+        return dayjs().format("YYYY-MM-DD");
+      }
+      if (str && str.includes("$")) {
+        let key = str.replace("${", "").replace("}", "");
+        return this.variable[key] || "";
+      }
+      return val || "";
+    },
+  },
+};
+</script>

package/packages/DynamicForm/src/components/RadioGroup.vue

@@ -0,0 +1,43 @@
+<template>
+  <el-radio-group v-model="_value" v-bind="$attrs" v-on="$listeners">
+    <el-radio
+      :label="String(item.value)"
+      v-for="(item, index) in JSON.parse(this.items.options || '[]')"
+      :key="index"
+      >{{ item.label | $l }}</el-radio
+    >
+  </el-radio-group>
+</template>
+<script>
+export default {
+  name: "Radio",
+  props: {
+    value: {
+      type: [String,Number],
+      default: "1",
+    },
+    items: {
+      type: Object,
+      default: () => {
+        return {
+          options: [],
+        };
+      },
+    },
+  },
+  computed: {
+    _value: {
+      get() {
+        let res = JSON.parse(this.items.options || "[]").find((row) => row.value == this.value);
+        this.$emit(`update:label`, res?.label);
+        return String(this.value);
+      },
+      set(value) {
+        let res = JSON.parse(this.items.options || "[]").find((row) => row.value == value);
+        this.$emit(`update:label`, res?.label);
+        this.$emit("input", String(value));
+      },
+    },
+  },
+};
+</script>

package/packages/DynamicForm/src/components/Rate.vue

@@ -0,0 +1,57 @@
+<!--
+* @fileName  Rate
+* @filePath  E:\code\jiuhengxing\T20\gts-invest_web 投资理财\invset\src\views\dynamicForms\components\Rate.vue
+* @author wanghailing
+* @date 2023-08-14 13:43:43
+* @description  参数1
+!-->
+<template>
+  <InputNumber
+    :max="999.999999"
+    :min="0"
+    :type="type"
+    :is-clearable="true"
+    v-model="_value"
+    :d-num="6"
+    suffix="‰"
+    :placeholder="$attrs.placeholder ? $attrs.placeholder : '请输入' | $l"
+    v-bind="$attrs"
+    v-on="$listeners"
+  />
+</template>
+
+<script>
+import {InputNumber} from "n20-common-lib";
+
+export default {
+  name: 'Rate',
+  components: {InputNumber},
+  props: {
+    value: {
+      type: [String, Number],
+      default: "",
+    },
+    items: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  computed: {
+    _value: {
+      get() {
+        return this.value;
+      },
+      set(value) {
+        this.$emit("input", value);
+      },
+    },
+  },
+  data() {
+    return {
+      type: "rate",
+    };
+  },
+}
+</script>
+<style scoped lang='scss'>
+</style>

package/packages/DynamicForm/src/components/Select.vue

@@ -0,0 +1,307 @@
+<template>
+  <el-select
+    class="input-w"
+    v-model="_value"
+    :placeholder="$attrs.placeholder ? $attrs.placeholder : '请选择' | $l"
+    :multiple="items.multiple || false"
+    :filterable="items.filterable || true"
+    :key="items.prop"
+    v-bind="$attrs"
+    :disabled="disabled"
+    @change="changeFn"
+    :clearable="items.clearable ? items.clearable : true"
+    :filter-method="$attrs['filter-method'] || filterMethod"
+    @clear="clearFn"
+    @click.native="clickFn"
+  >
+    <el-option
+      v-for="item in options"
+      v-title="item.label"
+      :style="{
+        'max-width': $attrs['show-overflow-tooltip'] ? '224px' : 'none',
+      }"
+      :show-overflow-tooltip="true"
+      class="text-ellipsis"
+      :key="item.value + items.prop"
+      :label="item.label | $l"
+      :value="item.value"
+    >
+      {{ labelKey ? item._label : item.label | $l }}
+    </el-option>
+  </el-select>
+</template>
+<script>
+import clickoutside from "element-ui/src/utils/clickoutside";
+import { getDataForPost, getDataForGet } from "@/api/common";
+export default {
+  name: "CustomSelect",
+  props: {
+    value: {
+      type: [String, Array, Number],
+      default: undefined,
+    },
+    disabled: {
+      type: [Boolean, Array, Number],
+      default: false,
+    },
+    items: {
+      type: Object,
+      default: () => {
+        return {
+          options: [],
+        };
+      },
+    },
+    variable: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+    label: {
+      type: String,
+      default: "",
+    },
+    formData: Object
+  },
+  directives: {
+    clickoutside,
+  },
+  computed: {
+    _value: {
+      get() {
+        return this.value || this.label;
+      },
+      set(value) {
+        if (["", null, undefined].includes(value)) {
+          this.$emit(`update:label`, "");
+          this.$emit("input", "");
+          return;
+        }
+        let res = this.getName(value);
+        if (res.length == 0) {
+          this.$emit(`update:label`, value);
+        } else {
+          this.$emit(`update:label`, res.join(","));
+          this.$emit("input", value);
+        }
+      },
+    },
+    labelKey() {
+      return (
+        this.items?.api?.labelKey.includes(",") ||
+        this.items?.api?.labelKey.includes("{")
+      );
+    },
+    // 判断数据类型，格式化回显数据
+    valueType() {
+      return typeof this.value;
+    },
+  },
+  data() {
+    return {
+      options: [],
+      optionsCopy: [],
+    };
+  },
+  mounted() {
+    // this.$nextTick(() => {
+    //   this.init();
+    // });
+    // this.init();
+  },
+  watch: {
+    variable: {
+      handler(newVal, oldVal) {
+        let doc = [
+          "payCountry",
+          "bankNo",
+          "recBankNo",
+          "currencyNo",
+          "recCountry",
+          "countryNo",
+        ];
+        let flag = true;
+        for (let i of doc) {
+          if (
+            !newVal[i] &&
+            this.items?.api?.reqKeys.includes('${' + i + '}')
+          ) {
+            flag = false;
+          }
+        }
+        flag && this.init();
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
+  methods: {
+    getName(value) {
+      let temp = [];
+      if (Array.isArray(value)) {
+        for (let i of value) {
+          let res = (this.options || []).find((row) => row.value === i);
+          // 如果label显示的2个字段，则取第一个字段的值
+          if (res) temp.push(res["label"]);
+        }
+      } else {
+        let res = (this.options || []).find((row) => row.value === value);
+        if (res) temp.push(res["label"]);
+      }
+      return temp;
+    },
+    changeFn(val) {
+      let item = this.options.find((t) => t.value == val);
+      this.$emit("change", item);
+    },
+    init() {
+      // this._value = this.items.defaultValue
+      if (!this.items?.api?.apiUrl || !this.items?.api?.requestMethod) {
+        this.options = JSON.parse(this.items.options || "{}") || [];
+        this.optionsCopy = JSON.parse(this.items.options || "{}") || [];
+        return;
+      }
+      let searchObj = JSON.parse(this.items?.api?.reqKeys || "{}");
+      Object.keys(searchObj).map((t) => {
+        searchObj[t] = this.changVariable(searchObj[t]);
+      });
+      if (["GET", "get"].includes(this.items?.api?.requestMethod)) {
+        getDataForGet(
+          this.items?.api?.apiUrl,
+          searchObj || {},
+          this.$attrs.headers
+        ).then((res) => {
+          this.setValue(res);
+        });
+      }
+      if (["POST", "post"].includes(this.items?.api?.requestMethod)) {
+        getDataForPost(
+          this.items?.api?.apiUrl,
+          searchObj || {},
+          this.$attrs.headers
+        ).then((res) => {
+          this.setValue(res);
+        });
+      }
+    },
+    setValue(res) {
+      this.options = (res.data || res || []).map((item) => {
+        if (
+          this.items?.api?.labelKey.includes(",") &&
+          !this.items?.api?.labelKey.includes("{")
+        ) {
+          let keyArr = this.items?.api?.labelKey.split(",");
+          let label = "";
+          keyArr.map((key, index) => {
+            if (index == keyArr.length - 1) {
+              label += item[key];
+            } else {
+              label += item[key] + " ";
+            }
+          });
+          item._label = label;
+          item.label = item[keyArr[0]];
+        } else if (
+          this.items?.api?.labelKey &&
+          this.items?.api?.labelKey.includes("{")
+        ) {
+          let regex = /\{([^}]+)\}/g;
+          var modifiedStr = this.items?.api?.labelKey.replace(
+            regex,
+            (match, p1) => {
+              if (p1.includes("label:")) {
+                item.label = item[p1.replace("label:", "")];
+                return item[p1.replace("label:", "")];
+              }
+              return item[p1];
+            }
+          );
+          item._label = modifiedStr;
+        } else {
+          item.label = item[this.items?.api?.labelKey || "label"];
+        }
+        if (this.items?.api?.valueKey.includes(",")) {
+          let keyArr = this.items?.api?.valueKey.split(",");
+          let value = "";
+          keyArr.map((key, index) => {
+            if (index == keyArr.length - 1) {
+              value += item[key];
+            } else {
+              value += item[key] + ",";
+            }
+          });
+          item.value = value;
+        } else {
+          item.value = item[this.items?.api?.valueKey || "value"];
+        }
+        if (this.valueType == "string") {
+          item.value = String(item.value);
+        }
+        if (this.valueType == "number") {
+          item.value = Number(item.value);
+        }
+        return item;
+      });
+      this.optionsCopy = this.options;
+      let name = this.getName(this._value);
+      if (name.length == 0) {
+        this.$emit(`update:label`, this._value);
+      } else {
+        this.$emit(`update:label`, name.join(","));
+        this.$emit("input", this._value);
+      }
+      if (
+        this.options &&
+        this.options.length == 1 &&
+        this.items.prop == "paymentWay"
+      ) {
+        // 若只有一个付款方式需要自动带出
+        const valueKey = this.items?.api?.valueKey;
+        this._value = this.options[0][valueKey];
+      }
+      this.$emit("selectInit",this.optionsCopy)
+    },
+    filterMethod(val) {
+      if (
+        JSON.parse(this.items?.api?.reqKeys ? this.items?.api?.reqKeys : "{}")
+          .canInput
+      ) {
+        this.$emit("input", "");
+        this.$emit(`update:label`, val);
+      }
+      if (val || val == 0) {
+        this.options = this.optionsCopy.filter((item) => {
+          if (item.label.includes(val)) {
+            return true;
+          }
+        });
+        return;
+      }
+      this.options = this.optionsCopy;
+    },
+    clickFn() {
+      if (this.options.length < 1) {
+        this.options = this.optionsCopy;
+      }
+    },
+    clearFn() {
+      this.options = this.optionsCopy;
+    },
+    changVariable(val) {
+      if (!val) {
+        return val || "";
+      }
+      let str = String(val);
+      if (str == "${nowDate}") {
+        return dayjs().format("YYYY-MM-DD");
+      }
+      if (str && str.includes("$")) {
+        let key = str.replace("${", "").replace("}", "");
+        return this.variable[key] || "";
+      }
+      return val || "";
+    },
+  },
+};
+</script>