t20-common-lib 0.14.8 → 0.15.0

package/packages/dynamic-form/src/components/InputNumber.vue

@@ -0,0 +1,66 @@
+<template>
+  <N20-input-number
+    :max="999999999999.99"
+    :type="type"
+    :is-clearable="true"
+    :format="_dNum"
+    v-model="_value"
+    :d-num="dnum"
+    placeholder="请输入"
+    :suffix="_suffix"
+  />
+</template>
+<script>
+export default {
+  name: "InputNumber",
+  props: {
+    value: {
+      type: [String, Number],
+      defalut: "",
+    },
+    items: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  computed: {
+    _value: {
+      get() {
+        return this.value;
+      },
+      set(value) {
+        this.$emit("input", value);
+      },
+    },
+    _dNum() {
+      if (this.items.format == "money") {
+        return "0,0.00";
+      }
+      if (this.items.format == "rate") {
+        this.type = "rate";
+
+        let dnum = this.items.dNum.split(".")[1];
+        this.dnum = dnum.split("").length;
+        return this.items.dNum;
+      }
+      if (this.items.format == "float") {
+        let dnum = this.items.dNum.split(".")[1];
+        this.dnum = dnum.split("").length;
+        return this.items.dNum;
+      }
+    },
+    _suffix() {
+      if (this.items.format == "rate") {
+        return this.items.suffix ? this.items.suffix : "%";
+      }
+      return "";
+    },
+  },
+  data() {
+    return {
+      type: "money",
+      dnum: 4,
+    };
+  },
+};
+</script>

package/packages/dynamic-form/src/components/InputNumberRange.vue

@@ -0,0 +1,44 @@
+<template>
+  <N20-input-number-range
+    :startValue.sync="startValue"
+    :endValue.sync="endValue"
+    @change="changeTime"
+  />
+</template>
+<script>
+export default {
+  name: "InputNumberRange",
+  props: {
+    value: {
+      type: [Array],
+      defalut:()=>[],
+    },
+  },
+  data() {
+    return {
+      startValue: "",
+      endValue: "",
+    };
+  }, 
+  methods: {
+    changeTime() {
+      this.$emit("update:label", this.startValue + "~" + this.endValue);
+      this.$emit("input", [this.startValue, this.endValue]);
+    },
+  },
+  watch: {
+    value: {
+      handler(val) {
+        if (val) {
+          const [s, e] = val || ["", ""];
+          this.startValue = s;
+          this.endValue = e;
+          this.$emit("update:label", this.startValue + "~" + this.endValue);
+        }
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
+};
+</script>

package/packages/dynamic-form/src/components/LazySelect.vue

@@ -0,0 +1,265 @@
+<template>
+  <N20-select-lazy
+    v-model="_value"
+    :filter-method="(val) => filterFn(val)"
+    @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>
+</template>
+
+<script>
+import dayjs from 'dayjs'
+/* 各属性，方法参考el-select */
+import { getDataForPost, getDataForGet } from '../utils/request'
+export default {
+  name: "SelectLazy",
+  props: {
+    value: {
+      type: String,
+      defalut: "",
+    },
+    items: {
+      type: Object,
+      defalut: () => {
+        return {
+          options: [],
+        };
+      },
+    },
+    variable: {
+      type: Object,
+      defalut: () => {
+        return {};
+      },
+    },
+    label: {
+      type: String,
+      defalut: "",
+    },
+  },
+  computed: {
+    _value: {
+      get() {
+        return !['', null, undefined].includes(this.value) ? 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: null,
+      query: "",
+      current: 1,
+      total: 0,
+      requestBody: {},
+      useDefaule: 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) temp.push(res[this.items?.api?.labelKey.split(",")[0] || 'label']);
+      }
+      return temp
+      this.$emit(`update:label`, temp.join(","));
+    },
+    async init(status) {
+      if (!this.items?.api?.apiUrl || !this.items?.api?.requestMethod) {
+        this.options = this.items.options || [];
+        return;
+      }
+      let res = null;
+      await this.setRequestBody();
+
+      ["GET", "get"].includes(this.items?.api?.requestMethod) &&
+        (res = await getDataForGet(
+          this.items?.api?.apiUrl,
+          this.requestBody,
+          this.$attrs.headers
+        ));
+
+      ["POST", "post"].includes(this.items?.api?.requestMethod) &&
+        (res = await getDataForPost(
+          this.items?.api?.apiUrl,
+          this.requestBody,
+          this.$attrs.headers
+        ));
+      
+      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;
+          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.useDefaule = false
+      if (status) {
+        this.options = [...this.options, ...temp];
+      } else {
+        this.options = temp;
+      }
+      this.total = res?.total || 0;
+    },
+    async 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(JSON.stringify(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;
+      this.useDefaule = false
+      if ((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.useDefaule ? (this.items?.api?.defaultInputValue || this.label ||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/dynamic-form/src/components/RadioGroup.vue

@@ -0,0 +1,60 @@
+<template>
+  <div>
+    <el-radio-group v-model="_value" v-bind="$attrs" v-on="$listeners">
+      <el-radio :label="item.value" v-for="(item, index) in _options || []" :key="index">
+        {{ item.label }}
+        <el-tooltip v-if="item.isShowtoolTip" effect="dark" :content="item.toolTip" placement="top">
+          <i class="n20-icon-xinxitishi m-l-ss" style="color: var(--color-text-secondary);"></i>
+        </el-tooltip>
+      </el-radio>
+    </el-radio-group>
+    <el-tooltip v-if="$attrs.showTipAfter" effect="dark" :content="$attrs.afterTipContent" placement="top">
+      <i class="n20-icon-xinxitishi m-l-ss" style="color: var(--color-text-secondary); position: absolute; top: 10px;"></i>
+    </el-tooltip>
+  </div>
+</template>
+<script>
+export default {
+  name: 'RadioGroup',
+  props: {
+    value: {
+      type: [String, Number],
+      defalut: '1'
+    },
+    items: {
+      type: Object,
+      defalut: () => {
+        return {
+          options: []
+        }
+      }
+    }
+  },
+  computed: {
+    _value: {
+      get() {
+        let res = (this.items.options || []).find(row => row.value == this.value)
+        this.$emit(`update:label`, res?.label)
+        return this.value
+      },
+      set(value) {
+        let res = (this.items.options || []).find(row => row.value == value)
+        this.$emit(`update:label`, res?.label)
+        this.$emit('input', value)
+      }
+    },
+    _options: {
+      get() {
+        return this.items.options.filter(row => row.isShow)
+      }
+    }
+  },
+  watch: {
+    value: {
+      handler(val) {
+        this._value = val
+      }
+    }
+  }
+}
+</script>

package/packages/dynamic-form/src/components/Rate.vue

@@ -0,0 +1,53 @@
+<!--
+* @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>
+  <N20-input-number
+    :max="999.999999"
+    :min="0"
+    :type="type"
+    :is-clearable="true"
+    v-model="_value"
+    :d-num="6"
+    :placeholder="$attrs.placeholder ? $attrs.placeholder : '请输入' | $l"
+    v-bind="$attrs"
+    v-on="$listeners"
+  />
+</template>
+
+<script>
+export default {
+  name: 'Rate',
+  props: {
+    value: {
+      type: [String, Number],
+      defalut: "",
+    },
+    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/dynamic-form/src/components/Select.vue

@@ -0,0 +1,212 @@
+<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 dayjs from 'dayjs'
+import clickoutside from 'element-ui/src/utils/clickoutside'
+import { getDataForPost, getDataForGet } from '../utils/request'
+export default {
+  name: "Select",
+  props: {
+    value: {
+      type: [String,Array,Number],
+      defalut: undefined,
+    },
+    disabled: {
+      type: [Boolean,Array,Number],
+      defalut: false,
+    },
+    items: {
+      type: Object,
+      defalut: () => {
+        return {
+          options: [],
+        };
+      },
+    },
+    variable: {
+      type: Object,
+      defalut: () => {
+        return {};
+      },
+    },
+    label: {
+      type: String,
+      defalut: "",
+    }
+  },
+  directives: {
+    clickoutside
+  },
+  computed: {
+    _value: {
+      get() {
+        return !['', null, undefined].includes(this.value) ?  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
+    }
+  },
+  watch: {
+    items: {
+      handler(newVal) {
+        this.init()
+      },
+      deep: true,
+      immediate: true,
+    }
+  },
+  data() {
+    return {
+      options: [],
+      optionsCopy: [],
+    };
+  },
+  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['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)
+    },
+    async init() {
+      // 1、JSON模板中有自定义的取自定义的options
+      if (!this.items?.api?.apiUrl || !this.items?.api?.requestMethod) {
+        this.options = (this.items.options || {}) || [];
+        this.optionsCopy = (this.items.options || {}) || [];
+        return;
+      }
+      // 2、JSON模板中没有自定义的取接口的options，取api中接口获取options
+      let searchObj = this.items?.api?.reqKeys || {}
+      let headerConfig = this.items?.api?.headerConfig || {};
+      let res = null;
+      ["GET", "get"].includes(this.items?.api?.requestMethod) &&
+        (res = await getDataForGet(
+          this.items?.api?.apiUrl,
+          (searchObj || {}),
+          headerConfig
+          // this.$attrs.headers
+        ));
+
+      ["POST", "post"].includes(this.items?.api?.requestMethod) &&
+        (res = await getDataForPost(
+          this.items?.api?.apiUrl,
+          (searchObj || {}),
+          headerConfig
+          // this.$attrs.headers
+        ));
+      ;
+      this.options = ((this.items?.api?.dataProp ? new Function('res', `return res.${this.items?.api?.dataProp}`)(res) : (res.data)) || []).map((item) => {
+        item.label = item[this.items?.api?.labelKey || "label"];
+        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;
+    },
+    filterMethod(val) {
+      if ((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>