t20-common-lib 0.14.9 → 0.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "t20-common-lib",
-  "version": "0.14.9",
+  "version": "0.15.0",
   "description": "T20",
   "private": false,
   "main": "dist/index.js",

package/packages/dynamic-form/index.js

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

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

@@ -0,0 +1,66 @@
+<!--
+ * @Author: yanshuang yanshuang@nstc.com.cn
+ * @Date: 2023-09-05 10:13:07
+ * @LastEditors: yanshuang yanshuang@nstc.com.cn
+ * @LastEditTime: 2023-09-15 11:52:16
+ * @FilePath: \投资理财\gts-invest_web\invset\src\views\dynamicForms\components\Amount.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<!--
+* @fileName  Amount
+* @filePath  E:\code\jiuhengxing\T20\gts-invest_web 投资理财\invset\src\views\dynamicForms\components\Amount.vue
+* @author wanghailing
+* @date 2023-08-14 13:42:15
+* @description  参数1
+!-->
+<template>
+  <N20-input-number
+    :max="items.elementType == 'RATE' ? 999.999999 : 9999999999999.99"
+    :min="0.0"
+    :type="items.elementType == 'RATE' ? 'rate' : 'money'"
+    :is-clearable="true"
+    v-model="_value"
+    :placeholder="$attrs.placeholder ? $attrs.placeholder : '请输入' | $l"
+    v-bind="$attrs"
+    v-on="$listeners"
+    @change="changeFn"
+  />
+</template>
+
+<script>
+export default {
+  name: 'Amount',
+  props: {
+    value: {
+      type: [String, Number],
+      defalut: ''
+    },
+    items: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  computed: {
+    _value: {
+      get() {
+        return this.value
+      },
+      set(value) {
+        this.$emit('input', [null, undefined].includes(value) ? null : value)
+      }
+    }
+  },
+  data(vm) {
+    return {
+      type: 'money'
+    }
+  },
+  watch: {},
+  methods: {
+    changeFn(val) {
+      this.$emit('change')
+    }
+  }
+}
+</script>
+<style scoped lang="scss"></style>

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

@@ -0,0 +1,72 @@
+<!--
+ * @Author: yanshuang yanshuang@nstc.com.cn
+ * @Date: 2023-09-05 10:13:08
+ * @LastEditors: yanshuang yanshuang@nstc.com.cn
+ * @LastEditTime: 2023-10-09 13:38:45
+ * @FilePath: \投资理财\gts-invest_web\invset\src\views\dynamicForms\components\AmountRange.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<!--
+* @fileName  Amount
+* @filePath  E:\code\jiuhengxing\T20\gts-invest_web 投资理财\invset\src\views\dynamicForms\components\Amount.vue
+* @author wanghailing
+* @date 2023-08-14 13:42:15
+* @description  参数1
+!-->
+<template>
+  <N20-input-number-range
+    :max="items.elementType == 'RATE_RANGE' ?999.99:9999999999999.99"
+    :min="0.00"
+    :start-value.sync="_value1"
+    :end-value.sync="_value2"
+    :type="items.elementType == 'RATE_RANGE' ? 'rate' : 'money' "
+    :is-clearable="true"
+    v-bind="$attrs"
+  />
+</template>
+
+<script>
+export default {
+  name: 'amountRange',
+  props: {
+    value: {
+      type: [String, Number],
+      defalut: "",
+    },
+    items: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    // 计算属性
+    _value1: {
+      get() {
+        if (this.value) {
+          return this.value.split(",")[0];
+        }
+        return "";
+      },
+      set(val) {
+        this.$emit("input", `${val},${this._value2 || this._value2===0?this._value2 : ''}`);
+      },
+    },
+    _value2: {
+      get() {
+        if (this.value) {
+          return this.value.split(",")[1];
+        }
+        return "";
+      },
+      set(val) {
+        this.$emit("input", `${this._value1},${val || val===0?val : ''}`);
+      },
+    },
+  },
+}
+</script>
+<style scoped lang='scss'>
+</style>

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

@@ -0,0 +1,63 @@
+<template>
+  <div>
+    <el-checkbox-group v-model="_value" v-bind="$attrs" v-on="$listeners">
+      <el-checkbox
+        :label="item.value"
+        v-for="(item, index) in (items.options || [])"
+        :key="index"
+        >{{ $l(item.label) }}</el-checkbox
+      >
+    </el-checkbox-group>
+  </div>
+</template>
+<script>
+export default {
+  name: "Checkbox",
+  props: {
+    value: {
+      type: [Array, String],
+      defalut: () => [],
+    },
+    items: {
+      type: Object,
+      defalut: () => {
+        return {
+          options: [],
+        };
+      },
+    },
+  },
+  methods: {
+    changeTime(value=[]) {
+      let temp = [];
+      for (let i of value) {
+        let res = (this.items.options || []).find((row) => row.value === i);
+        if (res) temp.push(res?.label);
+      }
+      this.$emit(`update:label`, temp.join(","));
+    },
+  },
+  computed: {
+    _value: {
+      get() {
+        let valueList = this.value || []
+        let value = (this.items.options || []).filter(item=>{
+          return valueList.findIndex(row=>row===item.value)>-1
+        })
+        let valuer = value.map(item=>item.value)
+        this.changeTime(valuer);
+        return valuer || [];
+      },
+      set(value) {
+        this.changeTime(value);
+        this.$emit("input", value || []);
+      },
+    },
+  },
+  mounted() {
+  },
+  data() {
+    return {};
+  },
+};
+</script>

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

@@ -0,0 +1,126 @@
+<!--
+* @fileName  DMY
+* @filePath  E:\code\jiuhengxing\T20\gts-invest_web 投资理财\invset\src\views\dynamicForms\components\DMY.vue
+* @author wanghailing
+* @date 2023-08-15 11:05:24
+* @description  参数1
+!-->
+<template>
+  <div class="DMY">
+    <el-input
+      class="DMY-input"
+      clearable
+      v-title
+      :show-overflow-tooltip="true"
+      :maxlength="$attrs.maxlength ? $attrs.maxlength : 64"
+      v-model.number="value1"
+      :placeholder="$attrs.placeholder ? $attrs.placeholder : '请输入' | $l"
+      :key="items.prop"
+      v-bind="$attrs"
+    />
+    <el-select
+      v-model="value2"
+      class="DMY-select"
+      :placeholder="$attrs.placeholder2 ? $attrs.placeholder2 : $l('请选择')"
+      v-title
+      v-bind="$attrs"
+    >
+      <el-option
+        v-for="item in periodUnitList"
+        :key="item.code"
+        :label="item.name | $l"
+        :value="item.code"
+      />
+    </el-select>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    // 父辈向子辈传参
+    value: {
+      type: String,
+      defalut: ",D",
+    },
+    items: Object
+  },
+  name: "DMY",
+  data() {
+    return {
+      periodUnitList: [
+        {
+          "code": "D",
+          "name": "天"
+        },
+        {
+          "code": "M",
+          "name": "月"
+        },
+        {
+          "code": "Y",
+          "name": "年"
+        }
+      ]
+    };
+  },
+  created() {
+    // 实例被创建之后执行代码
+  },
+  computed: {
+    // 计算属性
+    value1: {
+      get() {
+        if (this.value && ['D', 'M', 'Y'].includes(this.value.slice(-1))) {
+          return this.value.slice(0, -1);
+        } else if (this.value && !['D', 'M', 'Y'].includes(this.value.slice(-1))) {
+          return this.value;
+        }
+        return "";
+      },
+      set(val) {
+        this.$emit("input", `${val}${this.value2}`);
+      },
+    },
+    value2: {
+      get() {
+        if (this.value && ['D', 'M', 'Y'].includes(this.value.slice(-1))) {
+          return this.value.slice(-1);
+        } else if (this.value && !['D', 'M', 'Y'].includes(this.value.slice(-1))) {
+          return "";
+        }
+        return "D";
+      },
+      set(val) {
+        this.$emit("input", `${this.value1}${val}`);
+      },
+    },
+  },
+  components: {
+    // 组件的引用
+  },
+  methods: {
+    // 方法
+  },
+  mounted() {
+    // 页面进入时加载内容
+  },
+  watch: {
+    // 监测变化
+  },
+};
+</script>
+<style scoped>
+.DMY {
+  width: 100%;
+}
+.DMY .DMY-input {
+  width: 134px;
+}
+.DMY .DMY-input ::v-deep .el-input__inner {
+  width: 134px !important;
+}
+.DMY .DMY-select {
+  width: 80px;
+}
+</style>

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

@@ -0,0 +1,50 @@
+<template>
+  <div :style="{minWidth:$attrs.isShowAuto?'310px':'224px'}">
+    <N20-date-picker
+      v-model="_value"
+      class="input-w"
+      placeholder="请选择"
+      :type="$attrs.type ? $attrs.type : 'date'"
+      :value-format="$attrs.valueFormat ? $attrs.valueFormat : 'yyyy-MM-dd'"
+      v-bind="$attrs"
+      v-on="$listeners"
+    />
+    <el-tooltip v-if="$attrs.isShowtoolTip" effect="dark" :content="$l($attrs.toolTip)" 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: "Date",
+  props: {
+    value: {
+      type: String,
+      defalut: "",
+    },
+  },
+  computed: {
+    _value: {
+      get() {
+        return this.value;
+      },
+      set(value) {
+        this.$emit("input", value);
+      },
+    },
+  },
+  data(vm) {
+    return {
+      setDateRange: {
+        disabledDate: vm.disabledDateCur
+      }
+    };
+  },
+  mounted() {},
+  methods: {
+    disabledDateCur(time){
+      return this.disabledDate(time,this)
+    }
+  },
+};
+</script>

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

@@ -0,0 +1,46 @@
+<template>
+  <N20-date-picker-por
+    :start-date.sync="startDate"
+    :end-date.sync="endDate"
+    type="daterange"
+    @change="changeTime"
+    :value-format="$attrs['value-format'] ? $attrs['value-format'] : 'yyyy-MM-dd'"
+    v-bind="$attrs"
+    v-on="$listeners"
+  />
+</template>
+<script>
+export default {
+  name: "DateRange",
+  props: {
+    value: {
+      type: [Array,String],
+      defalut: () => [],
+    },
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    startDate() {
+      if (this.value) {
+        return this.value.split(",")[0];
+      }
+      return "";
+    },
+    endDate() {
+      if (this.value) {
+        return this.value.split(",")[1];
+      }
+      return "";
+    },
+  },
+  methods: {
+    changeTime(val) {
+      this.$emit("input", val ? `${val[0]},${val[1]}` : '');
+    },
+  },
+  watch: {
+  },
+};
+</script>

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

@@ -0,0 +1,194 @@
+<template>
+  <div>
+    <N20-input-search
+      class="input-w"
+      clearable
+      v-title
+      :select="items.api.reqKeys.isSelect"
+      :show-overflow-tooltip="true"
+      :suffix-icon="items.api.icon || 'el-icon-zoom-in'"
+      :maxlength="$attrs.maxlength ? $attrs.maxlength : 64"
+      v-model="_value"
+      :placeholder="'请选择' | $l"
+      :key="items.prop"
+      @search="showDialog"
+      @change="changeFn"
+      @blur="changValue"
+      @clear="clearFn"
+      v-bind="$attrs"
+      default-first-option
+    >
+    </N20-input-search>
+    <el-tooltip v-if="$attrs.isShowtoolTip" effect="dark" :content="$l($attrs.toolTip)" placement="top">
+      <i
+        class="n20-icon-xinxitishi m-l-ss"
+        style="color: var(--color-text-secondary); position: absolute; top: 10px; left: 224px;"
+      ></i>
+    </el-tooltip>
+    <component
+      :is="items.api.reqKeys.dialogName"
+      v-if="visible"
+      :visible.sync="visible"
+      :formData="formData"
+      @change="changeData"
+    ></component>
+  </div>
+</template>
+<script>
+import dayjs from 'dayjs'
+import { getDataForPost, getDataForGet } from '../utils/request'
+export default {
+  name: 'Dialog',
+  props: {
+    value: {
+      type: [String, Number],
+      defalut: ''
+    },
+    groupProp: {
+      type: [String],
+      defalut: ''
+    },
+    items: Object,
+    formData: Object,
+    variable: Object
+  },
+  data() {
+    return {
+      visible: false,
+      options: []
+    }
+  },
+  computed: {
+    _value: {
+      get() {
+        return this.value
+      },
+      set(value) {
+        this.$emit('input', value)
+      }
+    },
+    curOptions() {
+      if (!this.items.api.reqKeys.beforeShow) {
+        return this.options
+      }
+      if (!this.formData[this.groupProp][this.items.api.reqKeys.beforeShow]) {
+        return []
+      } else {
+        return this.options
+      }
+    },
+    labelKey() {
+      return this.items?.api?.labelKey.includes(',') || this.items?.api?.labelKey.includes('{')
+    }
+  },
+  components: {
+    // 组件的引用
+  },
+  mounted() {
+    this.init()
+  },
+  methods: {
+    changValue(e) {
+      let value = e.target.value
+      // 之前有带出来的值的话，在手动输入后，之前带出来的值清空；如果之前的值是输入的值，则不执行这步操作；
+      if (
+        this.items.api.reqKeys.isSelect &&
+        !this.options.find(t => t.label == value) &&
+        this.options.find(t => t.label == this._value) &&
+        value != this._value
+      ) {
+        this._value = value
+        this.$emit('change', {})
+        return
+      }
+      if (value) {
+        this._value = value
+      }
+    },
+    async changeData(obj) {
+      this.visible = false
+      this.$emit('dialogChange', obj || {})
+    },
+    showDialog() {
+      console.log(this.items.api.reqKeys.dialogName, '9999')
+      this.visible = true
+    },
+    clearFn() {
+      this.visible = false
+    },
+    async changeFn(val) {
+      let item = Array.isArray(this.options) ? this.options.find(t => t.value == val) : {}
+      this.$emit('change', item || {})
+    },
+    async init() {
+      if (!this.items?.api?.apiUrl || !this.items?.api?.requestMethod) {
+        this.options = this.items.options || '{}' || []
+        return
+      }
+      if (!this.items.api.reqKeys.isSelect) {
+        return
+      }
+      let res = null
+      let searchObj = this.items?.api?.reqKeys || '{}'
+      Object.keys(searchObj).map(t => {
+        searchObj[t] = this.changVariable(searchObj[t])
+      })
+
+      ;['GET', 'get'].includes(this.items?.api?.requestMethod) &&
+        (res = await getDataForGet(this.items?.api?.apiUrl, searchObj || {}))
+      ;['POST', 'post'].includes(this.items?.api?.requestMethod) &&
+        (res = await getDataForPost(this.items?.api?.apiUrl, searchObj || {}))
+      this.options = (
+        (this.items?.api?.dataProp ? new Function('res', `return res.${this.items?.api?.dataProp}`)(res) : res.data) ||
+        []
+      ).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']
+        }
+        item.value = item[this.items?.api?.valueKey || 'value']
+        return item
+      })
+    },
+    changVariable(val) {
+      if (!val) {
+        return val || ''
+      }
+      let str = String(val)
+      if (str == '${nowDate}') {
+        return dayjs().format('YYYY-MM-DD')
+      }
+      if (Object.prototype.toString.call(val) == '[object String]' && val.includes('.')) {
+        let [key, subkey] = val.split('.')
+        return this.formData[key][subkey]
+      }
+      if (str && str.includes('$')) {
+        let key = str.replace('${', '').replace('}', '')
+        return this.variable[key] || ''
+      }
+      return val || ''
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,41 @@
+<template>
+ <div :style="{minWidth:$attrs.isShowAuto?'310px':'224px'}">
+  <el-input
+    class="input-w"
+    clearable
+    v-title
+    :show-overflow-tooltip="true"
+    :maxlength="$attrs.maxlength ? $attrs.maxlength : 64"
+    v-model="_value"
+    :placeholder="$attrs.placeholder ? $attrs.placeholder : '请输入' | $l"
+    :key="items.prop"
+    v-on="$listeners"
+    v-bind="$attrs"
+  />
+  <el-tooltip v-if="$attrs.isShowtoolTip" effect="dark" :content="$l($attrs.toolTip)" 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: "Input",
+  props: {
+    value: {
+      type: [String,Number],
+      defalut: "",
+    },
+    items: Object,
+  },
+  computed: {
+    _value: {
+      get() {
+        return this.value;
+      },
+      set(value) {
+        this.$emit("input", value);
+      },
+    },
+  },
+};
+</script>