n20-common-lib 1.2.43 → 1.3.0

package/src/components/NstcG6Components/Form/configsSecond.js

@@ -0,0 +1,161 @@
+/**
+ * [important] 请添加支持组件的类型的同时， 指定组件引入 和 对应组件默认状态值
+ */
+
+// const DatepickerCustom = () => import('./DatepickerCustom')
+// const InputCustom = () => import('./InputCustom')
+// const IntervalinputCustom = () => import('./IntervalinputCustom')
+// const AutocompleteCustom = () => import('./AutocompleteCustom')
+// const SelectCustom = () => import('./SelectCustom')
+// const SelectindialogCustom = () => import('./SelectindialogCustom')
+// const UploadCustom = () => import('./UploadCustom')
+// const RadioCustom = () => import('./RadioCustom')
+// const CheckboxCustom = () => import('./CheckboxCustom')
+// const CascaderCustom = () => import('./CascaderCustom')
+// const TextCustom = () => import('./TextCustom')
+// const nstcuploadCustom = () => import('../Upload/src/main')
+// const FormItemTips = () => ('../FormCreate/component/FormItemTips')
+// const FormTooltips = () => ('../FormCreate/component/FormTooltips')
+// const nstcselecttreeCustom = () => import('../SelectTree/src/main')
+
+
+import DatepickerCustom from './DatepickerCustom'
+import InputCustom from './InputCustom'
+import IntervalinputCustom from './IntervalinputCustom'
+import AutocompleteCustom from './AutocompleteCustom'
+import SelectCustom from './SelectCustom'
+import UploadCustom from './UploadCustom'
+import RadioCustom from './RadioCustom'
+import CheckboxCustom from './CheckboxCustom'
+import CascaderCustom from './CascaderCustom'
+import TextCustom from './TextCustom'
+import nstcuploadCustom from '^/Upload/src/main'
+import nstcselecttreeCustom from '^/SelectTree/src/main'
+import nstcselecttreeListCustom from '^/SelectTreeList/src/main'
+import nstcfileuploadCustom from '^/FileUpload/src/main'
+
+
+
+// 定义支持的类型
+export const SUPPORT_TYPE = [
+  'datepicker',
+  'input',
+  'intervalinput',
+  'autocomplete',
+  'select',
+  'selectindialog',
+  'upload',
+  'radio',
+  'checkbox',
+  'cascader',
+  'text',
+  'nstcupload',
+  'nstcselecttree',
+  'nstcselecttreelist',
+  'nstcfileupload'
+]
+
+// 支持的类型对应的组件
+export const components = {
+  SelectCustom,
+  DatepickerCustom,
+  InputCustom,
+  IntervalinputCustom,
+  AutocompleteCustom,
+  UploadCustom,
+  RadioCustom,
+  CheckboxCustom,
+  CascaderCustom,
+  TextCustom,
+  nstcuploadCustom,
+  nstcselecttreeCustom,
+  nstcselecttreeListCustom,
+  nstcfileuploadCustom
+}
+
+
+// 支持的类型对应的默认值
+export function getDefaultValue({ mold, multiple, type, default: def }) {
+  let _def
+  mold = mold.replace(/ /g, '')
+  switch (mold) {
+    case 'select':
+    case 'selectindialog':
+    case 'nstcBankBanchTree':
+      _def = {
+        value: isEmpty(def) ? multiple ? [] : null : def
+      }
+      break
+
+    case 'input':
+    case 'autocomplete':
+    case 'text':
+    case 'nstcselecttree':
+    case 'nstcselecttreelist':
+      _def = {
+        value: isEmpty(def) ? '' : def
+      }
+      break
+
+    case 'upload':
+      _def = {
+        value: isEmpty(def)
+          ? multiple
+            ? []
+            : null
+          : multiple
+            ? [...def]
+            : def
+      }
+      break
+
+    case 'checkbox':
+    case 'cascader':
+    case 'intervalinput':
+    case 'nstcupload':
+    case 'nstcfileupload':
+      _def = {
+        value: isEmpty(def) ? [] : [...def]
+      }
+      break
+
+    case 'radio':
+      _def = {
+        value: isEmpty(def) ? null : def
+      }
+      break
+
+    case 'datewmqy':
+    case 'datepicker':
+      _def = {
+        value: type && type.includes('range')
+          ? isEmpty(def) ? [] : [...def]
+          : isEmpty(def) ? null : def
+      }
+      break
+
+    case 'switch':
+      _def = {
+        value: isEmpty(def) ? false : def
+      }
+      break
+
+    case 'querybutton':
+    case 'addbutton':
+    case 'otherbutton':
+      _def = null
+      break
+
+    default:
+      alert(`未匹配到符合该类型Second-${mold}的功能,请联系开发人员`)
+      _def = null
+      break
+  }
+
+  return _def
+}
+
+export function isEmpty(def) {
+  return def === null || def === undefined
+}
+

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

@@ -0,0 +1,8 @@
+import NstcForm from './Component'
+
+NstcForm.install = function(Vue) {
+  Vue.component(NstcForm.name, NstcForm)
+}
+
+// 导出该组件
+export default NstcForm

package/src/components/NstcG6Components/Form/index.scss

@@ -0,0 +1,29 @@
+.form-custom {
+  &-horizontal {
+    .form-item {
+      display: inline-block;
+      vertical-align: bottom;
+    }
+  }
+
+  &-vertical {
+  }
+  .form-item-link .el-form-item__content {
+    display: flex;
+    flex-wrap: wrap;
+    overflow: hidden;
+    .form-item-link-child {
+      //flex: 1;
+      margin-bottom: 0;
+    }
+  }
+  .form-item-name-link {
+    color: #606266;
+    padding: 0 8px;
+    font-weight: 700;
+  }
+}
+
+.form-custom .el-form-item--mini.el-form-item {
+  margin-bottom: 24px;
+}

package/src/components/NstcG6Components/Form/payeePersonSelect/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\NstcSelectSubject\index.js
+ */
+import NstcPayeePerson from "./src/main.vue";
+
+NstcPayeePerson.install = function(Vue) {
+  Vue.component(NstcPayeePerson.name, NstcPayeePerson);
+};
+
+export default NstcPayeePerson;

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

@@ -0,0 +1,164 @@
+<!--
+ * @Author: your name
+ * @Date: 2022-03-06 14:36:22
+ * @LastEditTime: 2022-03-06 15:18:40
+ * @LastEditors: Please set LastEditors
+ * @Description: 客商/付款方（输入+下拉+弹窗）
+ * @FilePath: \payee\src\components\SelectInputMerchant.vue
+-->
+<template>
+  <NstcInputAndDialog v-model="_value" ref="select" @input="chnageInput" v-bind="bindProps" :table-form="formSearch" :format-params="formatParams" :format-data="formatData" @show-dialog="onShowDialog">
+    <div class="form-wrap">
+      <el-form inline :model="formSearch">
+        <el-form-item label="所属单位">
+          <el-input v-model="formSearch.unitCode" placeholder="请输入" maxlength="64" clearable />
+        </el-form-item>
+        <el-form-item label="客商名称">
+          <el-input v-model="formSearch.relCorpFullName" placeholder="请输入" maxlength="64" clearable />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="searchClick">{{$t(`common.query`)}}</el-button>
+          <el-button class="nstc-g6-common-btn-3" @click="queryReset">{{$t(`common.reset`)}}</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+  </NstcInputAndDialog>
+</template>
+
+<script>
+import NstcInputAndDialog from '^/Form/InputAndDialog/src/main.vue'
+export default {
+  components: {
+    NstcInputAndDialog
+  },
+  props: {
+    value: String,
+    params: {
+      type: Object,
+      default: () => ({})
+    },
+    unitName: {
+      type: String,
+      default: ""
+    }
+  },
+
+  data() {
+    return {
+      formSearch: {
+        unitCode: "",
+        relCorpFullName: ""
+      },
+      bindProps: {},
+      unitProps: {},
+      chMapper: {}
+    };
+  },
+
+  computed: {
+    _value: {
+      set(val) {
+        
+      },
+      get() {
+        return this.value;
+      }
+    }
+  },
+
+  watch: {
+    unitName() {
+      this.setUnitProps();
+    }
+  },
+
+  created() {
+    this.setBindProps();
+    this.setUnitProps();
+  },
+
+  methods: {
+    chnageInput(val) {
+      this.value = val
+    },
+    setBindProps() {
+      let chMapper = {
+        title: "选择客商",
+        noselectmsg: "请选择客商"
+      };
+      let props = {
+        columns: [
+          { prop: "relCorpNo", label: "客商编号" },
+          { prop: "relCorpFullName", label: "客商中文名称" },
+          { prop: "boundary", label: "境内外" }
+        ],
+        url: "/api/nstc-mdm/1.0/supplierRelation",
+        params: { supplierType: 0, useStatus: 0 },
+        rowKey: "relCorpNo",
+        valueKey: "relCorpNo",
+        labelKey: "relCorpFullName",
+        allowCreate: true,
+        chMapper: chMapper,
+        lazyLoad: true,
+        width: '1800px'
+      };
+      this.chMapper = chMapper;
+      this.bindProps = props;
+    },
+
+    setUnitProps() {
+      let props = {
+        url: "/bems/1.0/unit",
+        nodeKey: "unitNo",
+        label: this.unitName,
+        queryKey: "unitName",
+        disabled: true,
+        clearable: true,
+        class: "unit-tree",
+        params: { resultType: 1 },
+        defaultProps: { children: "children", label: "unitName" }
+      };
+      this.unitProps = props;
+    },
+
+    formatData(d) {
+      return {
+        data: d.list,
+        total: d.total
+      };
+    },
+    formatParams(d) {
+      return {
+        ...d,
+        unitCode: '',
+      }
+    },
+
+    unitChange() {},
+
+    onShowDialog() {
+      this.queryReset();
+    },
+
+    searchClick() {
+      this.$refs.select.queryTableData();
+    },
+
+    queryReset() {
+      this.formSearch = {
+        unitCode: 997,
+        relCorpFullName: ""
+      };
+      if(!this.formatParams.unitCode) {
+        this.$message({
+          type: 'warning',
+          message: this.$t(`请先选择收款单位`)
+        })
+      }
+    }
+  }
+};
+</script>
+
+<style>
+</style>

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

@@ -0,0 +1,185 @@
+<!--
+ * @Author: your name
+ * @Date: 2022-01-13 11:06:47
+ * @LastEditTime: 2022-01-13 17:11:38
+ * @LastEditors: Please set LastEditors
+ * @Description: 科目选择
+ * @FilePath: NstcSelectSubject.vue
+-->
+<template>
+  <SelectAndDialog v-if="bindProps" v-model="_value"  ref="select" v-bind="bindProps" :table-form="formSearch" :format-data="formatData" :format-params="formatParams" @show-dialog="onShowDialog">
+    <div class="form-wrap">
+      <el-form inline :model="formSearch">
+          <el-form-item :label="'所属单位'">
+            <el-input
+              :placeholder="'请输入'"
+              v-model="formSearch.unitName"
+              maxlength="60"
+              disabled
+              clearable
+            >
+            </el-input>
+          </el-form-item>
+          <el-form-item :label="'客商类型'">
+              <el-select v-model="formSearch.supplierType" disabled placeholder="请选择" clearable>
+                <el-option 
+                  v-for="item in supplierTypeList" 
+                  :key="item.value" 
+                  :label="item.label" 
+                  :value="item.value">
+                </el-option>
+              </el-select>
+          </el-form-item>
+          <el-form-item :label="'客商名称'">
+            <el-input
+              :placeholder="'请输入'"
+              v-model="formSearch.relCorpFullName"
+              maxlength="60"
+              clearable
+            >
+            </el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary"  class="nstc-g6-common-btn-1" @click="searchClick">{{$t(`common_w_0034`)}}</el-button>
+            <el-button style="margin-left:8px;" class="nstc-g6-common-btn-3" @click="queryReset">{{
+              $t(`common_w_0037`)
+            }}</el-button>
+          </el-form-item>
+        </el-form>
+    </div>
+  </SelectAndDialog>
+</template>
+
+<script>
+import request from "@/utils/request";
+import SelectAndDialog from "^/Form/SelectAndDialog/src/main.vue";
+export default {
+  name: "NstcPayeePerson",
+  components: { SelectAndDialog },
+  props: {
+    value: [String, Object],
+    queryConf: {
+      type: Object,
+      default: () => {}
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    dialogParams: {
+      type: Object,
+      default: () => {}
+    },
+    formatData: {
+      type: Function,
+      default: (d) => d,
+    },
+    formatParams: {
+      type: Function,
+      default: (d) => d,
+    },
+    chMapper: {
+      type: Object,
+      default: () => ({
+        title: "选择付款人",
+        plcInput: "请输入",
+        plcSelect: "请选择",
+        noselectmsg: "请选择付款人"
+      }),
+    },
+  },
+  data() {
+    return {
+      showText: "",
+      formSearch: {
+        unitCode: "",
+        unitName: "",
+        supplierType: 0,
+        relCorpFullName: ""
+      },
+      supplierTypeList: [
+        {
+          label: '账户',
+          value: 0
+        },
+        {
+          label: '供应商',
+          value: 1
+        }
+      ],
+      showDialog: false,
+      columns: [],
+      options: [],
+      inputHovering: false,
+      remoteQuery: "",
+      bindProps: {},
+      
+    };
+  },
+  wacth: {
+  },
+  computed: {
+    _value: {
+      set(val) {
+        this.$emit("input", val);
+      },
+      get() {
+        return this.value;
+      },
+    },
+  },
+  created() {
+    // 选择弹窗的参数传递
+    console.log('this.formSearch', this.dialogParams)
+    this.formSearch.unitCode = this.dialogParams.unitCode
+     this.formSearch.unitName = this.dialogParams.unitName
+    this.bindProps = {...this.queryConf, chMapper: this.chMapper} 
+    
+    console.log('this.payeePerson====', this.bindProps)
+  },
+  mounted() {},
+  methods: {
+    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 { data, total };
+    },
+
+
+    onShowDialog() {
+      this.queryReset();
+    },
+
+    searchClick() {
+      this.$refs.select.queryTableData();
+    },
+
+    queryReset() {
+      this.formSearch = {
+        unitCode: "",
+        unitName: "",
+        supplierType: 0,
+        relCorpFullName: ""
+      };
+      this.formSearch.unitCode = this.dialogParams.unitCode
+      this.formSearch.unitName = this.dialogParams.unitName
+    },
+  },
+};
+</script>
+
+<style>
+.search-btn {
+  color: #c0c4cc;
+  position: absolute;
+  right: 5px;
+  top: -1px;
+}
+</style>

package/src/components/NstcG6Components/Form/readme.txt

@@ -0,0 +1,4 @@
+之所以创建Second:
+原因： form 引用 SelectindialogCustom
+       然而： SelectindialogCustom 有引用 form
+       导致循环引用

package/src/components/NstcG6Components/FormGroup/index.js

@@ -0,0 +1,8 @@
+import NstcFormGroup from './src/main';
+
+/* istanbul ignore next */
+NstcFormGroup.install = function(Vue) {
+    Vue.component(NstcFormGroup.name, NstcFormGroup);
+};
+
+export default NstcFormGroup;

package/src/components/NstcG6Components/FormGroup/src/demo/config.js

@@ -0,0 +1,23 @@
+const config = [
+    {
+        title: '基本信息11',
+        formConfig: [
+            {
+                mold: 'inputwithunit',
+                name:'期限',
+                prop: 'termDay',
+                isSingle: true,
+                default: ['', 3],
+                options: [
+                  { label: '年', value: 3 },
+                  { label: '月', value: 2 },
+                  { label: '日', value: 1 }
+                ],
+                isRequired: true
+              },
+        ]
+    },
+
+]
+
+export default config

package/src/components/NstcG6Components/FormGroup/src/demo/index.vue

@@ -0,0 +1,85 @@
+<template>
+  <FormGroup
+      ref="formGroupCustom"
+      :config="config"
+      :anchor-point="true"
+      :is-fix="true"
+      :custom-submit="true"
+      :add-anchor-point="addAnchorPoint"
+      :show-mode="showMode"
+      @change="handleChange"
+      @query="handleQuery"
+      @reset="handleReset"
+      class="nstc-wrap-input-hover"
+  >
+    <template v-slot:after>
+      <a :id="`#nstc-form-group-${addAnchorPoint[0].anchorPoint}`"></a>
+      <NstcExpandCollapse title="附件信息">
+        <NstcFileUpload
+            v-model="attachFileList"
+            url="/api/nstc-gdt/1.0/file"
+            style="margin: 0 14px"
+        />
+      </NstcExpandCollapse>
+    </template>
+
+    <!--  自定义提交按钮   -->
+    <template v-slot:submit>
+      <el-button type="primary" class="nstc-g6-common-btn-1" @click="customSubmit('submit')">提交</el-button>
+      <el-button class="nstc-g6-common-btn-1" @click="customSubmit('save')">保存</el-button>
+      <el-button class="nstc-g6-common-btn-1">维护计划</el-button>
+    </template>
+  </FormGroup>
+</template>
+
+<script>
+import FormGroup from '../main'
+import NstcFileUpload from '../../../FileUpload'
+import NstcExpandCollapse from '../../../ExpandCollapse'
+import Config from './config'
+export default {
+  name: 'Demo',
+
+  components: {
+    FormGroup,
+    NstcFileUpload,
+    NstcExpandCollapse
+  },
+
+  data() {
+    return {
+      config: JSON.parse(JSON.stringify(Config)),
+      attachFileList: [],
+      addAnchorPoint: [
+        { title: '附件信息', anchorPoint: new Date().getTime() }
+      ],
+      model: {},
+      showMode: ''
+    }
+  },
+
+  created() {
+    setTimeout(() => {
+      this.$refs[`formGroupCustom`].setModel(0, { searchContent: '测试项目' })
+    }, 30)
+  },
+
+  methods: {
+    customSubmit() {
+      this.$refs[`formGroupCustom`].handleQuery('submit')
+    },
+    handleChange(model) {
+      this.model = model
+    },
+    handleReset() {},
+    handleQuery(model, type) {
+      console.log('提交事件', model, type)
+      return Promise.resolve()
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>