n20-common-lib 1.2.41 → 1.3.0

package/src/components/NstcG6Components/Form/List.vue

@@ -0,0 +1,146 @@
+<template>
+  <div class="form-base-wrapper">
+    <template v-for="(item, idx) in config">
+      <template v-if="Array.isArray(item)">
+        <div
+          :key="'inlineItem' + idx"
+          class="form-group"
+        >
+          <template v-for="(iItem, index) in item">
+            <BaseItem
+              v-if="iItem.renderable !== false"
+
+              :key="iItem.mold + '-' + (iItem.prop ? iItem.prop : (idx + '-' + index))"
+
+              v-model="value"
+              :formData="formData"
+
+              :class="[
+                'form-item',
+                `form-item-${iItem.mold}`,
+                {
+                  'form-item-link': iItem.link && ((Array.isArray(iItem.link) && iItem.link.some(link => link.mold)) || iItem.link.mold)
+                },
+                `form-item-${iItem.mold}-${iItem.prop ? iItem.prop : idx + '-' + index}`
+              ]"
+
+              :popper-class="popperClass"
+
+              :item="iItem"
+              :resets.sync="resets"
+              :disableds="disableds"
+
+              :loading="loading"
+              :show-mode="showMode"
+
+              @after-leave="val => $emit('after-leave', val)"
+              @query-click="$emit('query-click')"
+              @add-click="$emit('add-click')"
+              @other-click="$emit('other-click')"
+              @enter-click="$emit('enter-click')"
+              @tree-node-click="(data, node) => $emit('tree-node-click', iItem.queryKey, data, node)"
+            />
+          </template>
+        </div>
+      </template>
+
+      <template v-else>
+        <BaseItem
+          v-if="item.renderable !== false"
+
+          :key="item.mold + '-' + (item.prop ? item.prop : idx)"
+
+          v-model="value"
+          :formData="formData"
+
+          :class="[
+            'form-item',
+            `form-item-${item.mold}`,
+            {
+              'form-item-link': item.link && ((Array.isArray(item.link) && item.link.some(link => link.mold)) || item.link.mold)
+            },
+            `form-item-${item.mold}-${item.prop ? item.prop : idx}`
+          ]"
+
+          :popper-class="popperClass"
+
+          :item="item"
+          :resets.sync="resets"
+          :disableds="disableds"
+
+          :loading="loading"
+
+          :from="from"
+          :show-mode="showMode"
+
+          @after-leave="val => $emit('after-leave', val)"
+          @query-click="$emit('query-click')"
+          @add-click="$emit('add-click')"
+          @other-click="$emit('other-click')"
+          @enter-click="$emit('enter-click')"
+          @tree-node-click="(data, node) => $emit('tree-node-click', iItem.queryKey, data, node)"
+        />
+      </template>
+    </template>
+  </div>
+</template>
+
+<script>
+
+import BaseItem from './Item'
+
+export default {
+  name: 'FormCustomBaseList',
+
+  components: {
+    BaseItem
+  },
+
+  inheritAttrs: false,
+
+  props: {
+    formData: {
+      type: Object,
+      default: () => ({})
+    },
+    from: {
+      type: String,
+      default: null,
+    },
+    config: {
+      type: Array,
+      default: () => ([])
+    },
+
+    loading: {
+      default: false,
+      type: Boolean
+    },
+    popperClass: {
+      type: String,
+      default: ''
+    },
+
+    resets: {
+      default: () => ({}),
+      type: Object
+    },
+
+    disableds: {
+      default: () => ({}),
+      type: Object
+    },
+
+    value: {
+      default: () => ({}),
+      type: Object
+    },
+
+    // 显示模式
+    showMode: {
+      type: String,
+      default: ''
+    }
+  },
+}
+</script>

package/src/components/NstcG6Components/Form/ListSecond.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="form-base-wrapper">
+    <template v-for="(item, idx) in config">
+      <template v-if="Array.isArray(item)">
+        <div
+          :key="'inlineItem' + idx"
+          class="form-group"
+        >
+          <template v-for="(iItem, index) in item">
+            <BaseItem
+              v-if="iItem.renderable !== false"
+
+              :key="iItem.mold + '-' + (iItem.prop ? iItem.prop : (idx + '-' + index))"
+
+              v-model="value"
+
+              :class="[
+                'form-item',
+                `form-item-${iItem.mold}`,
+                {
+                  'form-item-link': iItem.link && ((Array.isArray(iItem.link) && iItem.link.some(link => link.mold)) || iItem.link.mold)
+                },
+                `form-item-${iItem.mold}-${iItem.prop ? iItem.prop : idx + '-' + index}`
+              ]"
+
+              :popper-class="popperClass"
+
+              :item="iItem"
+              :resets.sync="resets"
+              :disableds="disableds"
+
+              :loading="loading"
+
+              @after-leave="val => $emit('after-leave', val)"
+              @query-click="$emit('query-click')"
+              @add-click="$emit('add-click')"
+              @other-click="$emit('other-click')"
+              @enter-click="$emit('enter-click')"
+            />
+          </template>
+        </div>
+      </template>
+
+      <template v-else>
+        <BaseItem
+          v-if="item.renderable !== false"
+
+          :key="item.mold + '-' + (item.prop ? item.prop : idx)"
+
+          v-model="value"
+
+          :class="[
+            'form-item',
+            `form-item-${item.mold}`,
+            {
+              'form-item-link': item.link && ((Array.isArray(item.link) && item.link.some(link => link.mold)) || item.link.mold)
+            },
+            `form-item-${item.mold}-${item.prop ? item.prop : idx}`
+          ]"
+
+          :popper-class="popperClass"
+
+          :item="item"
+          :resets.sync="resets"
+          :disableds="disableds"
+
+          :loading="loading"
+
+          :from="from"
+
+          @after-leave="val => $emit('after-leave', val)"
+          @query-click="$emit('query-click')"
+          @add-click="$emit('add-click')"
+          @other-click="$emit('other-click')"
+          @enter-click="$emit('enter-click')"
+        />
+      </template>
+    </template>
+  </div>
+</template>
+
+<script>
+
+import BaseItem from './ItemSecond'
+
+export default {
+  name: 'FormCustomBaseList',
+
+  components: {
+    BaseItem
+  },
+
+  inheritAttrs: false,
+
+  props: {
+    from: {
+      type: String,
+      default: null,
+    },
+    config: {
+      type: Array,
+      default: () => ([])
+    },
+
+    loading: {
+      default: false,
+      type: Boolean
+    },
+    popperClass: {
+      type: String,
+      default: ''
+    },
+
+    resets: {
+      default: () => ({}),
+      type: Object
+    },
+
+    disableds: {
+      default: () => ({}),
+      type: Object
+    },
+
+    value: {
+      default: () => ({}),
+      type: Object
+    }
+  }
+}
+</script>

package/src/components/NstcG6Components/Form/RadioCustom/index.vue

@@ -0,0 +1,73 @@
+<template>
+  <el-radio-group
+    v-model="_value"
+    v-bind="$attrs"
+    :style="{width:parseFloat(width) + 'px'}"
+    v-on="$listeners"
+  >
+    <template v-for="item in options">
+      <el-radio-button
+        v-if="type === 'button'"
+        :key="item.value"
+        :label="item.value"
+        :disabled="item.disabled"
+      >
+        {{ item.label }}
+      </el-radio-button>
+      <el-radio
+        v-else
+        :key="item.value"
+        :label="item.value"
+        :disabled="item.disabled"
+        :border="type === 'border'"
+      >
+        {{ item.label }}
+      </el-radio>
+    </template>
+  </el-radio-group>
+</template>
+
+<script>
+export default {
+  name: 'RadioCustom',
+
+  props: {
+    value: {
+      type: [Boolean, String, Number, Array],
+      default: null
+    },
+
+    type: {
+      default: 'normal',
+      validator: function(val) {
+        return ['normal', 'border', 'button'].includes(val)
+      }
+    },
+
+    width: {
+      type: [String, Number],
+      default: ''
+    },
+
+    options: {
+      type: Array,
+      default: () => []
+    }
+  },
+
+  computed: {
+    _value: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

package/src/components/NstcG6Components/Form/SelectAccount/index.js

@@ -0,0 +1,15 @@
+/*
+ * @Author: your name
+ * @Date: 2022-01-13 10:45:13
+ * @LastEditTime: 2022-01-13 10:46:45
+ * @LastEditors: your name
+ * @Description: 选择账号输入弹窗
+ * @FilePath: \nstc_g6_common\packages\Form\SelectAccount\index.js
+ */
+import NstcSelectAccount from "./src/main.vue";
+
+NstcSelectAccount.install = function(Vue) {
+  Vue.component(NstcSelectAccount.name, NstcSelectAccount);
+};
+
+export default NstcSelectAccount;

package/src/components/NstcG6Components/Form/SelectAccount/src/demo/index.vue

@@ -0,0 +1,58 @@
+<!--
+ * @Author: your name
+ * @Date: 2022-01-13 15:40:30
+ * @LastEditTime: 2022-01-13 17:18:30
+ * @LastEditors: Please set LastEditors
+ * @Description: 账号选择弹窗
+ * @FilePath: \settle\src\cmmon-components\demo.vue
+-->
+<template>
+<div>
+  {{ selectOpt }}
+  <NstcSelectAccount v-model="account" :ch-mapper="labelconf" :query-conf="accountConf" :agencyOptionsConf="agencyOptionsConf"  :selectOpt="selectOpt" @confirm="confirm"/>
+</div>
+</template>
+
+<script>
+import NstcSelectAccount from "../main.vue";
+export default {
+  components: { NstcSelectAccount },
+  data() {
+    return {
+      account: "",
+      accountConf: {
+        url: "http://192.168.20.109:8080/api/nstc-tss/1.0/settle/account/list",
+        defaultParam: {
+          diabledValue:'001', // 开户机构由外部带入diaabled
+        },
+      },
+      selectOpt: {},
+      labelconf: {
+        title: "选择账号",
+        plcInput: "请输入",
+        plcSelect: "请选择",
+        noselectmsg: "请选择账号",
+        accountAgencyLabel: "开户机构",
+        accountLabel: "账号",
+        accountNameLabel: "账户名",
+        accountNameTableLabel:"户名",
+      },
+      agencyOptionsConf:{
+        url: "/api/nstc-tss/1.0/common/drop/organ",
+        method: "GET",
+        defaultParam: {
+          // orgName:''
+        }
+      },
+    };
+  },
+  methods:{
+    confirm(opt) {
+      console.log(opt,'----------opt')
+    },
+  }
+};
+</script>
+
+<style>
+</style>

package/src/components/NstcG6Components/Form/SelectAccount/src/main.vue

@@ -0,0 +1,283 @@
+<!--
+ * @Author: your name
+ * @Date: 2022-01-13 11:06:47
+ * @LastEditTime: 2022-02-21 14:24:07
+ * @LastEditors: Please set LastEditors
+ * @Description: 选择账户
+ * @FilePath: NstcSelectCashFlow.vue
+-->
+<template>
+  <SelectAndDialog v-model="_value" ref="select" v-bind="bindProps" :lazyLoad="true" :table-form="formSearch" :format-data="formatData" :format-params="formatParams" @show-dialog="onShowDialog" @comfirm="selectOption">
+    <div class="form-wrap">
+      <el-form inline :model="formSearch" :label-width="labelWidth">
+        <el-row>
+          <el-col :span="8">
+            <el-form-item :label="chMapper.accountAgencyLabel">
+              <el-select :placeholder="chMapper.plcSelect" v-model="formSearch.brNo" filterable clearable :disabled="queryConf.defaultParam.diabledValue?true:false">
+                <el-option v-for="item in agencyOptionsArr" :key="item.orgNo" :label="item.orgName" :value="item.orgNo">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item :label="chMapper.accountLabel">
+              <el-input :placeholder="chMapper.plcInput" v-model="formSearch.accountNo" maxlength="64" clearable></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="20">
+            <el-form-item :label="chMapper.accountNameLabel">
+              <el-input :placeholder="chMapper.plcInput" v-model="formSearch.accountName" maxlength="64" clearable></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="4">
+            <div class="search-btn">
+              <el-button type="primary" class="nstc-g6-common-btn-1" @click="searchClick">{{$t(`common_w_0034`)}}</el-button>
+              <el-button class="nstc-g6-common-btn-3" style="margin-left:8px;" @click="queryReset">{{$t(`common_w_0037`)}}</el-button>
+            </div>
+          </el-col>
+        </el-row>
+      </el-form>
+    </div>
+  </SelectAndDialog>
+</template>
+
+<script>
+import request from "@/utils/request";
+import SelectAndDialog from "^/Form/SelectAndDialog/src/main.vue";
+export default {
+  name: "NstcSelectAccount",
+  components: { SelectAndDialog },
+  props: {
+    value: String,
+    queryConf: {
+      type: Object,
+      default: () => {}
+    },
+    agencyOptionsConf: {
+      type: Object,
+      default: () => {}
+    },
+    filterData: {
+      type: Function,
+      default: (d) => d
+    },
+    valueKey: {
+      type: String,
+      default: "accountNo"
+    },
+    labelKey: {
+      type: String,
+      default: "accountNo"
+    },
+    rowKey: {
+      type: String,
+      default: "accountId"
+    },
+    optionKey: {
+      type: String,
+      default: "subjectNo"
+    },
+    labelWidth: {
+      type: String,
+      default: "80px"
+    },
+    chMapper: {
+      type: Object,
+      default: () => ({
+        title: "选择账号",
+        plcInput: "请输入",
+        plcSelect: "请输入或选择",
+        noselectmsg: "请选择账号",
+        accountAgencyLabel: "开户机构",
+        accountLabel: "账号",
+        accountNameLabel: "账户名",
+        accountNameTableLabel: "户名"
+      })
+    },
+
+    // 重新查询下拉数据
+    requery: {
+      default: false,
+      type: Boolean
+    }
+  },
+  data() {
+    return {
+      formSearch: {
+        brNo: "",
+        accountNo: "",
+        accountName: ""
+      },
+      showDialog: false,
+      inputHovering: false,
+      columns: [],
+      agencyOptionsArr:[],
+      options: [],
+      remoteQuery: "",
+      searchObj:{
+        brNo: "",
+        accountNo: "",
+        accountName:""
+      },
+      bindProps: {},
+      agencyOptionsArr: []
+    };
+  },
+  computed: {
+    _value: {
+      set(val) {
+        this.$emit("input", val);
+      },
+      get() {
+        return this.value;
+      }
+    }
+  },
+
+  watch: {
+    // requery(val) {
+    //   if (val) {
+    //     this.$refs.select.queryAllData();
+    //   }
+    // },
+    // 'queryConf.defaultParam':{
+    //   handler:function(data) {
+    //     console.log(data,'------------')
+    //     this.$refs.select.queryAllData();
+    //   },
+    //   deep:true
+    // }
+  },
+
+  created() {
+    let url = "/api/nstc-tss/1.0/settle/account/list";
+    let props = {
+      columns: [
+        { prop: "accountNo", label: this.chMapper.accountLabel, align: "center" },
+        { prop: "accountName", label: this.chMapper.accountNameTableLabel, align: "center" },
+        { prop: "brName", label: this.chMapper.accountAgencyLabel, align: "center" }
+      ],
+      url: this.queryConf.url || url,
+      params: this.queryConf.defaultParam || {},
+      httpMethod: this.queryConf.httpMethod || "POST",
+      rowKey: this.rowKey,
+      valueKey: this.valueKey,
+      labelKey: this.labelKey,
+      chMapper: this.chMapper,
+    };
+    this.bindProps = props;
+  },
+
+  methods: {
+    async agencyOptions() {
+      let defaultParam = this.agencyOptionsConf.defaultParam;
+      let res = await this.queryOptionsApi(defaultParam);
+      this.agencyOptionsArr = res;
+    },
+
+    queryOptionsApi(param) {
+      const { url, method } = this.agencyOptionsConf;
+      let body = method === "POST" ? "data" : "params";
+      let reqConf = { url, method };
+      reqConf[body] = param;
+      return request(reqConf);
+    },
+
+    // formatParams(pageParam) {
+    //   const { size, current } = pageParam;
+    //   let defaultParam = this.quryMergeConf.defaultParam;
+    //   let param = this.searchObj;
+    //   let page = { "pageSize": size, "pageNo": current };
+    //   if (this.queryConf.method == "POST") {
+    //     page = { page: { size, current } };
+    //   }
+    //   return { ...param,...defaultParam, ...page };
+    // },
+    formatParams(params) {
+      console.log(params,'----------params')
+      let size = 20;
+      let current = 1;
+      if (params["page.size"]) {
+        size = params["page.size"];
+        current = params["page.current"];
+      }
+      if (params.page && params.page.size) {
+        size = params.page.size;
+        current = params.page.current;
+      }
+      let page = { "pageSize": size, "pageNo": current };
+      if(params.diabledValue&&!(params.brNo)) {
+        params.brNo = params.diabledValue
+      }
+      return { ...params, ...page };
+    },
+
+    formatData(res) {
+      let data = [],
+        total = 0;
+      if (res && !res.total && Array.isArray(res)) {
+        data = res;
+        total = res.length;
+      } else if (res && res.total && res.list) {
+        data = res.list || [];
+        total = res.total;
+      }
+      return this.filterData({ data, total });
+    },
+
+    searchBtnClick(event) {
+      this.queryReset();
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.searchClick();
+      });
+    },
+
+    // searchClick() {
+    //   let formSearch = this.formSearch
+    //   this.searchObj = JSON.parse(JSON.stringify(formSearch));
+    //   this.$refs.dialog.queryData("searchbtn");
+    // },
+
+
+    onShowDialog() {
+      this.queryReset();
+      this.agencyOptions();
+    },
+
+    searchClick() {
+      this.$refs.select.queryTableData();
+    },
+
+    // 返回选中对象
+    selectOption (values, opt) {
+      if (this.$attrs.selectOpt) {
+        this.$emit('confirm',opt)
+        this.$attrs.selectOpt["item"] = opt;
+      }
+    },
+
+    queryReset() {
+      this.formSearch = {
+        brNo: this.queryConf.defaultParam.diabledValue,
+        accountNo: "",
+        accountName: ""
+      };
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.search-btn {
+  color: #c0c4cc;
+  position: absolute;
+  right: 5px;
+  top: 0px;
+}
+.form-wrap ::v-deep .el-input__suffix-inner .el-input__icon {
+  line-height: 32px;
+}
+</style>