n20-common-lib 1.3.46 → 1.3.49

package/nstc-g6/components/Form/A_DEMO/index.vue

@@ -1,803 +1,803 @@
-<template>
-  <div class="query-from">
-    <el-input v-model="testValue" type="number"></el-input>
-    <el-divider content-position="left">测试输入框的大小</el-divider>
-    <el-date-picker
-      v-model="value1"
-      type="daterange"
-      range-separator="-"
-      start-placeholder="开始日期"
-      end-placeholder="结束日期"
-      style="margin-right: 10px"
-    >
-    </el-date-picker>
-    <el-date-picker
-      v-model="value1"
-      type="daterange"
-      range-separator="-"
-      start-placeholder="开始日期"
-      end-placeholder="结束日期"
-      class="nstc-input-small"
-    >
-    </el-date-picker>
-    <el-divider content-position="left">普通表单</el-divider>
-    <NstcCustom
-      v-model="queryCondition"
-      label-width="140px"
-      :config="config_1"
-      :reset.sync="reset"
-      pureable
-      @change="handleChange"
-      @query="handleQuery"
-    />
-    <el-divider content-position="left"
-      >保留小数点后六位 赋值 有isMoney</el-divider
-    >
-    <el-input
-      v-model="item_number"
-      v-nstc-number="{ min: -1, precision: 6, isMoney: true }"
-      type="number"
-      :disabled="isDisabled"
-      placeholder="输入金额"
-      clearable
-    />
-    <!-- <el-divider content-position="left">没有关闭</el-divider>
-      <el-input
-      v-model="item_"
-      v-nstc-number="{ min: -1, precision: 6, isMoney: true }"
-      type="number"
-      :disabled="isDisabled"
-      placeholder="输入金额"
-    /> -->
-    <el-divider content-position="left"
-      >不赋值 保留小数点后六位 没有isMoney</el-divider
-    >
-    <el-input
-      v-model="item_number_2"
-      v-nstc-number="{ min: -1, precision: 6 }"
-      type="number"
-      :disabled="isDisabled"
-      placeholder="输入金额"
-      clearable
-    />
-    <el-divider content-position="left"
-      >赋值 保留小数点后两位 没有isMoney</el-divider
-    >
-    <el-input
-      v-model="item_number_1"
-      v-nstc-number="{ min: -1, precision: 2 }"
-      type="number"
-      :disabled="isDisabled"
-      placeholder="输入金额"
-      clearable
-    />
-    <!-- {{ varietyAmount1 }} -->
-    <div style="padding-top: 20px">
-      <el-button
-        type="primary"
-        @click="textDisable"
-        class="nstc-g6-common-btn-1 nstc-g6-common-btn-size-b"
-        >disabled状态切换</el-button
-      >
-    </div>
-    <el-divider content-position="left">登记类表单</el-divider>
-    <el-form
-      :model="ruleForm"
-      :rules="rules"
-      ref="ruleForm"
-      label-width="100px"
-      class="demo-ruleForm"
-    >
-      <el-form-item label="活动名称" prop="name">
-        <el-input
-          v-model="ruleForm.name"
-          v-nstc-number="{ min: 1, precision: 2, isMoney: true }"
-          type="number"
-          placeholder="输入金额"
-        ></el-input>
-        {{ ruleForm }}
-      </el-form-item>
-      <el-form-item label="活动名称" prop="name1">
-        <el-input
-          v-model="ruleForm.name1"
-          v-nstc-number="{ min: 1, precision: 2, isMoney: true }"
-          @blur="ssss(ruleForm.name1)"
-          type="number"
-          placeholder="输入金额"
-        ></el-input>
-        {{ ruleForm }}
-      </el-form-item>
-    </el-form>
-    <NstcExpandCollapse v-model="isCollapse" title="测试">
-      <!--      <template v-slot:title>-->
-      <!--        <span>我是好人</span>-->
-      <!--      </template>-->
-      <div>测试</div>
-    </NstcExpandCollapse>
-
-    <NstcFormGroup
-      ref="formGroup_2"
-      :key="formKey"
-      :config="config_2"
-      :label-width="125"
-      :reset.sync="reset_2"
-      @change="handleChange"
-      @query="handleQuery"
-      @reset="handleReset"
-    />
-
-    <el-divider content-position="left">自定义多列表单</el-divider>
-    <NstcCustom
-      v-model="queryCondition"
-      label-width="140px"
-      :config="config_3"
-      :reset.sync="reset"
-      pureable
-      @change="handleChange"
-      @query="handleQuery"
-    />
-
-    <el-divider content-position="left">原生表单</el-divider>
-    <OriginalForm />
-  </div>
-</template>
-
-<script>
-import NstcCustom from '../index'
-import NstcExpandCollapse from '../../ExpandCollapse'
-import request from '@/utils/request'
-import { SUPPORT_TYPE } from '../configs'
-import NstcFormGroup from '^/FormGroup/src/main'
-import OriginalForm from '^/Form/A_DEMO/component/originalForm'
-
-const types = SUPPORT_TYPE.map((item, index) => ({
-  label: index + 1 + '',
-  value: index + 1 + ''
-}))
-const types1 = SUPPORT_TYPE.map((item) => ({ label: item + 1, value: item }))
-const types2 = SUPPORT_TYPE.map((item) => ({ label: item + 2, value: item }))
-let id = 0
-
-// 配置示例
-const config_1 = [
-  [
-    {
-      mold: 'input',
-      name: '项目名称',
-      width: 200,
-      prop: 'searchContent',
-      placeholder: '请输入项目名称'
-    },
-    {
-      mold: 'input',
-      name: '金额',
-      prop: 'money',
-      placeholder: '请输入金额',
-      unit: '元'
-    }
-  ],
-  [
-    {
-      mold: 'input',
-      name: '项目名称',
-      width: 200,
-      prop: 'searchContent1',
-      placeholder: '请输入项目名称'
-    },
-    {
-      mold: 'input',
-      name: '金额',
-      prop: 'money1',
-      placeholder: '请输入金额',
-      numberRule: { min: 0, precision: 6 }
-    }
-  ],
-  [
-    {
-      mold: 'querybutton'
-    }
-  ]
-]
-const config_2 = [
-  {
-    title: '开证成本',
-    formConfig: [
-      [
-        {
-          mold: 'input',
-          name: '开证费率',
-          prop: 'openRate',
-          class: ['nstc-rate-num'],
-          unit: '%',
-          numberRule: { max: 100, min: 0, precision: 6 },
-          isRequired: true
-        },
-        {
-          mold: 'input',
-          name: '可以输入负数',
-          prop: 'issueFee',
-          numberRule: { min: -9999999, precision: 2, isMoney: true }
-        }
-      ],
-      [
-        {
-          mold: 'input',
-          name: '综合成本',
-          prop: 'synCost'
-        },
-        {
-          mold: 'selectindialog',
-          name: '金融机构',
-          title: '金融机构',
-          prop: 'openRate',
-          placeholder: '请选择',
-          labelKey: 'relCorpFullName',
-          valueKey: 'relCorpId',
-          formLabelWidth: 96,
-          formConfig: [
-            {
-              mold: 'input',
-              name: '单位名称',
-              prop: 'relCorpFullName',
-              width: '180px'
-            },
-            {
-              mold: 'input',
-              name: '组织编号',
-              prop: 'relCorpNo',
-              width: '180px'
-            }
-          ],
-          columns: [
-            {
-              label: '组织编号',
-              prop: 'relCorpNo'
-            },
-            {
-              label: '单位中文名称',
-              prop: 'relCorpFullName'
-            },
-            {
-              label: '单位简称',
-              prop: 'relCorpName'
-            },
-            {
-              label: '单位类型',
-              prop: 'relCorpType'
-            }
-          ]
-        }
-      ],
-      [
-        {
-          mold: 'input',
-          name: '开证费率',
-          prop: 'openRate',
-          class: ['nstc-rate-num'],
-          unit: '%',
-          numberRule: { max: 100, min: 0, precision: 6 },
-          isRequired: true
-        },
-        {
-          mold: 'select',
-          name: '金融机构',
-          prop: 'e',
-          isRequired: true,
-          remote: true,
-          filterable: true,
-          httpMethod: 'get',
-          valueKey: 'cnapsNo',
-          labelKey: 'branchBankName',
-          query: 'branchBankName',
-          lazyLoad: true,
-          url: '/api/nstc-mdm/1.0/branchBank',
-          pageMode: 'special',
-          pageCurrentKey: 'page.current',
-          pageSizeKey: 'page.size'
-        }
-      ],
-      [
-        {
-          mold: 'input',
-          name: '开证费率',
-          prop: 'openRate',
-          class: ['nstc-rate-num'],
-          unit: '%',
-          numberRule: { max: 100, min: 0, precision: 6 },
-          isRequired: true
-        },
-        {
-          mold: 'select',
-          name: '测试分类',
-          prop: 'f_1',
-          options: [
-            { label: '111', value: '1212' },
-            { label: '222', value: '1212111' }
-          ]
-        }
-      ],
-      [
-        {
-          mold: 'datepicker',
-          name: '开始日',
-          prop: 'k_2',
-          isRequired: true
-        },
-        {
-          mold: 'select',
-          name: '测试分类11',
-          prop: 'cs_1',
-          options: [
-            { label: '111', value: 1 },
-            { label: '222', value: 2 }
-          ]
-        }
-      ],
-      [
-        {
-          mold: 'inputwithunit',
-          name: '期限',
-          prop: 'k_3',
-          default: [null, 3],
-          options: [
-            { label: '年', value: 3 },
-            { label: '月', value: 2 },
-            { label: '天', value: 1 }
-          ],
-          isRequired: true
-        },
-        {
-          mold: 'select',
-          name: '测试分类22',
-          prop: 'cs_2',
-          disabled: true,
-          isRequired: false,
-          options: [
-            { label: '333', value: 3 },
-            { label: '444', value: 4 }
-          ]
-        }
-      ],
-      [
-        {
-          mold: 'inputwithunit',
-          name: '期限',
-          prop: 'k_3',
-          default: [null, 3],
-          options: [
-            { label: '年', value: 3 },
-            { label: '月', value: 2 },
-            { label: '天', value: 1 }
-          ],
-          isRequired: true
-        },
-        {
-          mold: 'nstcselecttree',
-          name: '单位下拉树',
-          prop: 'y_3',
-          url: '/api/nstc-mdm/1.0/unit',
-          nodeKey: 'unitNo',
-          queryKey: 'unitName',
-          defaultProps: { children: 'children', label: 'unitName' },
-          params: { resultType: 1 }
-        }
-      ],
-      [
-        {
-          mold: 'input',
-          type: 'textarea',
-          class: 'nstc-form-only-one',
-          name: '独占一行',
-          prop: 'memo',
-          maxLength: '128'
-        }
-      ]
-    ]
-  },
-  {
-    title: '附件信息',
-    formConfig: [
-      [
-        {
-          mold: 'nstcfileupload',
-          prop: 'attchFileList'
-        }
-      ]
-    ]
-  }
-]
-const config_3 = [
-  {
-    mold: 'input',
-    name: '项目名称',
-    width: 200,
-    prop: 'searchContent',
-    placeholder: '请输入项目名称'
-  },
-  {
-    mold: 'input',
-    name: '金额',
-    prop: 'money',
-    placeholder: '请输入金额',
-    unit: '元'
-  },
-  {
-    mold: 'datepicker',
-    name: '选择时间',
-    width: 180,
-    prop: 'date',
-    placeholder: '请选择时间'
-  },
-  {
-    mold: 'cascader',
-    name: '级联选择器',
-    width: 220,
-    prop: 'cascader',
-    placeholder: '请选择哦',
-    props: {
-      checkStrictly: true,
-      multiple: true,
-      lazy: true,
-      lazyLoad(node, resolve) {
-        const { level } = node
-        setTimeout(() => {
-          const nodes = Array.from({ length: level + 1 }).map((item) => ({
-            value: item.id || ++id,
-            label: `选项${id}`,
-            leaf: level >= 2
-          }))
-          // 通过调用resolve将子节点数据返回，通知组件数据加载完成
-          resolve(nodes)
-        }, 1000)
-      }
-    }
-  },
-  {
-    mold: 'radio',
-    name: '选择城市',
-    width: 300,
-    prop: 'city',
-    // type: 'button',
-    options: [
-      {
-        label: '上海',
-        value: '上海'
-      },
-      {
-        label: '北京',
-        value: '北京',
-        disabled: true
-      },
-      {
-        label: '广州',
-        value: '广州'
-      },
-      {
-        label: '深圳',
-        value: '深圳'
-      }
-    ]
-  },
-  {
-    mold: 'checkbox',
-    name: '多选框',
-    width: 300,
-    prop: 'checkbox',
-    // type: 'button',
-    options: [
-      {
-        label: '复选框 A',
-        value: '复选框 A'
-      },
-      {
-        label: '复选框 B',
-        value: '复选框 B',
-        disabled: true
-      },
-      {
-        label: '复选框 C',
-        value: '复选框 C'
-      }
-    ]
-  },
-  {
-    mold: 'upload',
-    name: '上传附件',
-    width: 180,
-    prop: 'file'
-  },
-  // 联动1 组件位于同一行// 1 对 多
-  {
-    mold: 'select',
-    name: '类别',
-    prop: 'mode',
-    width: 90,
-    multiple: false,
-    clearable: false,
-    default: null,
-    options: types,
-
-    // 联动关键字
-    link: [
-      {
-        mold: 'select', // 指定mold 将渲染至同一块区域
-        prop: 'districts',
-        name: '行政区',
-        width: 160,
-        clearable: false,
-        handler: function (val) {
-          // 在 handlers 根据逻辑 返回default 和 options 可避免不必要的渲染
-          return +val === 1
-            ? {
-                default: 'input',
-                options: types1
-              }
-            : {
-                default: 'select',
-                options: types2
-              }
-        }
-      },
-      {
-        mold: 'select',
-        prop: 'plateIds',
-        width: 160,
-        clearable: false,
-        handler: function (val) {
-          return +val === 2
-            ? {
-                default: 'input',
-                options: types2
-              }
-            : {
-                default: 'select',
-                options: types1
-              }
-        }
-      }
-    ]
-  },
-  // 联动2  组件位于不同行 显示隐藏
-  {
-    mold: 'select',
-    prop: 'wuyeTypes',
-    // width: 180,
-    name: '物业类型',
-    multiple: false,
-    clearable: false,
-    default: null,
-    options: types,
-    link: [
-      {
-        prop: 'houseTypeIds',
-        handler: async function (val) {
-          return +val === 1
-            ? {
-                renderable: true,
-                default: 'input',
-                options: types1
-              }
-            : {
-                renderable: false,
-                default: '',
-                options: []
-              }
-        }
-      },
-      {
-        prop: 'buildingFormGroups',
-        handler: async function (val) {
-          return +val === 2
-            ? {
-                renderable: true,
-                default: ['input', 'select'],
-                options: types2
-              }
-            : {
-                renderable: false,
-                default: ['input', 'select'],
-                options: []
-              }
-        }
-      }
-    ]
-  },
-  {
-    mold: 'select',
-    prop: 'houseTypeIds',
-    name: '套型',
-    clearable: false,
-    default: 'input',
-    options: types1
-  },
-  {
-    mold: 'select',
-    prop: 'buildingFormGroups',
-    name: '建筑形态',
-    clearable: false,
-    multiple: true,
-    default: ['input', 'select'],
-    options: types2
-  },
-  {
-    name: '查询',
-    mold: 'querybutton'
-  }
-]
-
-export default {
-  name: 'FormCustomDemo',
-
-  components: {
-    NstcCustom,
-    NstcFormGroup,
-    OriginalForm,
-    NstcExpandCollapse
-  },
-
-  data() {
-    return {
-      ruleForm: {},
-      rules: {
-        name: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
-        name1: [{ required: true, message: '请输入活动名称', trigger: 'blur' }]
-      },
-      varietyAmount: '',
-      varietyAmount1: '',
-      config_1,
-      config_2,
-      config_3,
-      reset: false,
-      reset_2: false,
-      formKey: new Date().getTime(),
-      queryCondition: {},
-      value1: [],
-      testValue: null,
-      isCollapse: false,
-      unwatchs: [],
-      model: [],
-      //====
-      isDisabled: false,
-      item_number: '12457.8700',
-      item_number_1: '7984556.54',
-      item_number_2: '',
-      item_: '12132132.54',
-      tableData: [
-        {
-          date: '2016-05-02',
-          name: '王小虎',
-          address: '1235646654'
-        },
-        {
-          date: '2016-05-04',
-          name: '王小虎',
-          address: '798455654'
-        },
-        {
-          date: '2016-05-01',
-          name: '王小虎',
-          address: '7566256.3'
-        },
-        {
-          date: '2016-05-03',
-          name: '王小虎',
-          address: '775555666.33'
-        }
-      ]
-    }
-  },
-
-  created() {
-    // const that = this
-    this.$nextTick(() => {
-      const that = this
-      this.unwatchs.push(
-        this.$watch(
-          function () {
-            return this.model.length ? this.model[0][`cs_1`] : null
-          },
-          {
-            immediate: true,
-            handler(val) {
-              that.config_2[0].formConfig[5][1].disabled = val !== 2
-              that.config_2[0].formConfig[5][1].isRequired = val === 2
-              // that.formKey = new Date().getTime()
-            }
-          }
-        )
-      )
-    })
-  },
-  mounted() {
-    this.varietyAmount1 = this.tableData[0].address
-  },
-  watch: {
-    queryCondition: function (newVal) {
-      console.log(newVal)
-    }
-  },
-
-  methods: {
-    textDisable() {
-      this.isDisabled = !this.isDisabled
-    },
-    ssss() {
-      // if (!val) {
-      //   this.ruleForm.name1 = 1;
-      // }
-      console.log(this.ruleForm.name1, 'ruleForm.name1')
-    },
-    handleReset() {},
-    handleChange(val) {
-      this.model = val
-      console.log(val)
-    },
-
-    async handleQuery(model) {
-      console.log('model', model)
-      try {
-        // do something;
-        // eg：
-
-        // 验证
-        // await this.validate()
-        // 请求
-        await request.post('/api/xxx', { ...model })
-
-        // 必须保留
-        return Promise.resolve
-      } catch (err) {
-        console.error(err)
-        // deal error
-
-        // 必须保留
-        return Promise.reject
-      }
-    },
-    getRule(config) {
-      let rules
-      rules = config
-        .reduce((prev, next) => [...prev, ...next.formConfig], [])
-        .reduce(
-          (prev, next) => [...prev, ...(Array.isArray(next) ? next : [next])],
-          []
-        )
-        .reduce((prev, next) => {
-          if (next.link) {
-            const links = next.link.filter((item) => !!item.mold)
-
-            return [...prev, next, ...links]
-          }
-
-          return [...prev, next]
-        }, [])
-        .filter((item) => item.isRequired)
-        .reduce((res, curr) => {
-          const isInput =
-            curr.mold === 'input' ||
-            curr.prop === 'dueDate' ||
-            'lastShipmentDate'
-
-          return {
-            ...res,
-            [curr.prop]: {
-              required: true,
-              message: `请${isInput ? '输入' : '选择'}${curr.name}`,
-              trigger: isInput ? 'blur' : 'change'
-              // whitespace: isInput || undefined,
-              // ...isInput
-              //   ? {
-              //     transform(val) {
-              //       return typeof val === 'string' ? val.trim() : val
-              //     }
-              //   }
-              //   : {}
-            }
-          }
-        }, {})
-      return rules
-    }
-  }
-}
-</script>
-
+<template>
+  <div class="query-from">
+    <el-input v-model="testValue" type="number"></el-input>
+    <el-divider content-position="left">测试输入框的大小</el-divider>
+    <el-date-picker
+      v-model="value1"
+      type="daterange"
+      range-separator="-"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      style="margin-right: 10px"
+    >
+    </el-date-picker>
+    <el-date-picker
+      v-model="value1"
+      type="daterange"
+      range-separator="-"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      class="nstc-input-small"
+    >
+    </el-date-picker>
+    <el-divider content-position="left">普通表单</el-divider>
+    <NstcCustom
+      v-model="queryCondition"
+      label-width="140px"
+      :config="config_1"
+      :reset.sync="reset"
+      pureable
+      @change="handleChange"
+      @query="handleQuery"
+    />
+    <el-divider content-position="left"
+      >保留小数点后六位 赋值 有isMoney</el-divider
+    >
+    <el-input
+      v-model="item_number"
+      v-nstc-number="{ min: -1, precision: 6, isMoney: true }"
+      type="number"
+      :disabled="isDisabled"
+      placeholder="输入金额"
+      clearable
+    />
+    <!-- <el-divider content-position="left">没有关闭</el-divider>
+      <el-input
+      v-model="item_"
+      v-nstc-number="{ min: -1, precision: 6, isMoney: true }"
+      type="number"
+      :disabled="isDisabled"
+      placeholder="输入金额"
+    /> -->
+    <el-divider content-position="left"
+      >不赋值 保留小数点后六位 没有isMoney</el-divider
+    >
+    <el-input
+      v-model="item_number_2"
+      v-nstc-number="{ min: -1, precision: 6 }"
+      type="number"
+      :disabled="isDisabled"
+      placeholder="输入金额"
+      clearable
+    />
+    <el-divider content-position="left"
+      >赋值 保留小数点后两位 没有isMoney</el-divider
+    >
+    <el-input
+      v-model="item_number_1"
+      v-nstc-number="{ min: -1, precision: 2 }"
+      type="number"
+      :disabled="isDisabled"
+      placeholder="输入金额"
+      clearable
+    />
+    <!-- {{ varietyAmount1 }} -->
+    <div style="padding-top: 20px">
+      <el-button
+        type="primary"
+        @click="textDisable"
+        class="nstc-g6-common-btn-1 nstc-g6-common-btn-size-b"
+        >disabled状态切换</el-button
+      >
+    </div>
+    <el-divider content-position="left">登记类表单</el-divider>
+    <el-form
+      :model="ruleForm"
+      :rules="rules"
+      ref="ruleForm"
+      label-width="100px"
+      class="demo-ruleForm"
+    >
+      <el-form-item label="活动名称" prop="name">
+        <el-input
+          v-model="ruleForm.name"
+          v-nstc-number="{ min: 1, precision: 2, isMoney: true }"
+          type="number"
+          placeholder="输入金额"
+        ></el-input>
+        {{ ruleForm }}
+      </el-form-item>
+      <el-form-item label="活动名称" prop="name1">
+        <el-input
+          v-model="ruleForm.name1"
+          v-nstc-number="{ min: 1, precision: 2, isMoney: true }"
+          @blur="ssss(ruleForm.name1)"
+          type="number"
+          placeholder="输入金额"
+        ></el-input>
+        {{ ruleForm }}
+      </el-form-item>
+    </el-form>
+    <NstcExpandCollapse v-model="isCollapse" title="测试">
+      <!--      <template v-slot:title>-->
+      <!--        <span>我是好人</span>-->
+      <!--      </template>-->
+      <div>测试</div>
+    </NstcExpandCollapse>
+
+    <NstcFormGroup
+      ref="formGroup_2"
+      :key="formKey"
+      :config="config_2"
+      :label-width="125"
+      :reset.sync="reset_2"
+      @change="handleChange"
+      @query="handleQuery"
+      @reset="handleReset"
+    />
+
+    <el-divider content-position="left">自定义多列表单</el-divider>
+    <NstcCustom
+      v-model="queryCondition"
+      label-width="140px"
+      :config="config_3"
+      :reset.sync="reset"
+      pureable
+      @change="handleChange"
+      @query="handleQuery"
+    />
+
+    <el-divider content-position="left">原生表单</el-divider>
+    <OriginalForm />
+  </div>
+</template>
+
+<script>
+import NstcCustom from '../index'
+import NstcExpandCollapse from '../../ExpandCollapse'
+import request from '@/utils/request'
+import { SUPPORT_TYPE } from '../configs'
+import NstcFormGroup from '^/FormGroup/src/main'
+import OriginalForm from '^/Form/A_DEMO/component/originalForm'
+
+const types = SUPPORT_TYPE.map((item, index) => ({
+  label: index + 1 + '',
+  value: index + 1 + ''
+}))
+const types1 = SUPPORT_TYPE.map((item) => ({ label: item + 1, value: item }))
+const types2 = SUPPORT_TYPE.map((item) => ({ label: item + 2, value: item }))
+let id = 0
+
+// 配置示例
+const config_1 = [
+  [
+    {
+      mold: 'input',
+      name: '项目名称',
+      width: 200,
+      prop: 'searchContent',
+      placeholder: '请输入项目名称'
+    },
+    {
+      mold: 'input',
+      name: '金额',
+      prop: 'money',
+      placeholder: '请输入金额',
+      unit: '元'
+    }
+  ],
+  [
+    {
+      mold: 'input',
+      name: '项目名称',
+      width: 200,
+      prop: 'searchContent1',
+      placeholder: '请输入项目名称'
+    },
+    {
+      mold: 'input',
+      name: '金额',
+      prop: 'money1',
+      placeholder: '请输入金额',
+      numberRule: { min: 0, precision: 6 }
+    }
+  ],
+  [
+    {
+      mold: 'querybutton'
+    }
+  ]
+]
+const config_2 = [
+  {
+    title: '开证成本',
+    formConfig: [
+      [
+        {
+          mold: 'input',
+          name: '开证费率',
+          prop: 'openRate',
+          class: ['nstc-rate-num'],
+          unit: '%',
+          numberRule: { max: 100, min: 0, precision: 6 },
+          isRequired: true
+        },
+        {
+          mold: 'input',
+          name: '可以输入负数',
+          prop: 'issueFee',
+          numberRule: { min: -9999999, precision: 2, isMoney: true }
+        }
+      ],
+      [
+        {
+          mold: 'input',
+          name: '综合成本',
+          prop: 'synCost'
+        },
+        {
+          mold: 'selectindialog',
+          name: '金融机构',
+          title: '金融机构',
+          prop: 'openRate',
+          placeholder: '请选择',
+          labelKey: 'relCorpFullName',
+          valueKey: 'relCorpId',
+          formLabelWidth: 96,
+          formConfig: [
+            {
+              mold: 'input',
+              name: '单位名称',
+              prop: 'relCorpFullName',
+              width: '180px'
+            },
+            {
+              mold: 'input',
+              name: '组织编号',
+              prop: 'relCorpNo',
+              width: '180px'
+            }
+          ],
+          columns: [
+            {
+              label: '组织编号',
+              prop: 'relCorpNo'
+            },
+            {
+              label: '单位中文名称',
+              prop: 'relCorpFullName'
+            },
+            {
+              label: '单位简称',
+              prop: 'relCorpName'
+            },
+            {
+              label: '单位类型',
+              prop: 'relCorpType'
+            }
+          ]
+        }
+      ],
+      [
+        {
+          mold: 'input',
+          name: '开证费率',
+          prop: 'openRate',
+          class: ['nstc-rate-num'],
+          unit: '%',
+          numberRule: { max: 100, min: 0, precision: 6 },
+          isRequired: true
+        },
+        {
+          mold: 'select',
+          name: '金融机构',
+          prop: 'e',
+          isRequired: true,
+          remote: true,
+          filterable: true,
+          httpMethod: 'get',
+          valueKey: 'cnapsNo',
+          labelKey: 'branchBankName',
+          query: 'branchBankName',
+          lazyLoad: true,
+          url: '/api/nstc-mdm/1.0/branchBank',
+          pageMode: 'special',
+          pageCurrentKey: 'page.current',
+          pageSizeKey: 'page.size'
+        }
+      ],
+      [
+        {
+          mold: 'input',
+          name: '开证费率',
+          prop: 'openRate',
+          class: ['nstc-rate-num'],
+          unit: '%',
+          numberRule: { max: 100, min: 0, precision: 6 },
+          isRequired: true
+        },
+        {
+          mold: 'select',
+          name: '测试分类',
+          prop: 'f_1',
+          options: [
+            { label: '111', value: '1212' },
+            { label: '222', value: '1212111' }
+          ]
+        }
+      ],
+      [
+        {
+          mold: 'datepicker',
+          name: '开始日',
+          prop: 'k_2',
+          isRequired: true
+        },
+        {
+          mold: 'select',
+          name: '测试分类11',
+          prop: 'cs_1',
+          options: [
+            { label: '111', value: 1 },
+            { label: '222', value: 2 }
+          ]
+        }
+      ],
+      [
+        {
+          mold: 'inputwithunit',
+          name: '期限',
+          prop: 'k_3',
+          default: [null, 3],
+          options: [
+            { label: '年', value: 3 },
+            { label: '月', value: 2 },
+            { label: '天', value: 1 }
+          ],
+          isRequired: true
+        },
+        {
+          mold: 'select',
+          name: '测试分类22',
+          prop: 'cs_2',
+          disabled: true,
+          isRequired: false,
+          options: [
+            { label: '333', value: 3 },
+            { label: '444', value: 4 }
+          ]
+        }
+      ],
+      [
+        {
+          mold: 'inputwithunit',
+          name: '期限',
+          prop: 'k_3',
+          default: [null, 3],
+          options: [
+            { label: '年', value: 3 },
+            { label: '月', value: 2 },
+            { label: '天', value: 1 }
+          ],
+          isRequired: true
+        },
+        {
+          mold: 'nstcselecttree',
+          name: '单位下拉树',
+          prop: 'y_3',
+          url: '/api/nstc-mdm/1.0/unit',
+          nodeKey: 'unitNo',
+          queryKey: 'unitName',
+          defaultProps: { children: 'children', label: 'unitName' },
+          params: { resultType: 1 }
+        }
+      ],
+      [
+        {
+          mold: 'input',
+          type: 'textarea',
+          class: 'nstc-form-only-one',
+          name: '独占一行',
+          prop: 'memo',
+          maxLength: '128'
+        }
+      ]
+    ]
+  },
+  {
+    title: '附件信息',
+    formConfig: [
+      [
+        {
+          mold: 'nstcfileupload',
+          prop: 'attchFileList'
+        }
+      ]
+    ]
+  }
+]
+const config_3 = [
+  {
+    mold: 'input',
+    name: '项目名称',
+    width: 200,
+    prop: 'searchContent',
+    placeholder: '请输入项目名称'
+  },
+  {
+    mold: 'input',
+    name: '金额',
+    prop: 'money',
+    placeholder: '请输入金额',
+    unit: '元'
+  },
+  {
+    mold: 'datepicker',
+    name: '选择时间',
+    width: 180,
+    prop: 'date',
+    placeholder: '请选择时间'
+  },
+  {
+    mold: 'cascader',
+    name: '级联选择器',
+    width: 220,
+    prop: 'cascader',
+    placeholder: '请选择哦',
+    props: {
+      checkStrictly: true,
+      multiple: true,
+      lazy: true,
+      lazyLoad(node, resolve) {
+        const { level } = node
+        setTimeout(() => {
+          const nodes = Array.from({ length: level + 1 }).map((item) => ({
+            value: item.id || ++id,
+            label: `选项${id}`,
+            leaf: level >= 2
+          }))
+          // 通过调用resolve将子节点数据返回，通知组件数据加载完成
+          resolve(nodes)
+        }, 1000)
+      }
+    }
+  },
+  {
+    mold: 'radio',
+    name: '选择城市',
+    width: 300,
+    prop: 'city',
+    // type: 'button',
+    options: [
+      {
+        label: '上海',
+        value: '上海'
+      },
+      {
+        label: '北京',
+        value: '北京',
+        disabled: true
+      },
+      {
+        label: '广州',
+        value: '广州'
+      },
+      {
+        label: '深圳',
+        value: '深圳'
+      }
+    ]
+  },
+  {
+    mold: 'checkbox',
+    name: '多选框',
+    width: 300,
+    prop: 'checkbox',
+    // type: 'button',
+    options: [
+      {
+        label: '复选框 A',
+        value: '复选框 A'
+      },
+      {
+        label: '复选框 B',
+        value: '复选框 B',
+        disabled: true
+      },
+      {
+        label: '复选框 C',
+        value: '复选框 C'
+      }
+    ]
+  },
+  {
+    mold: 'upload',
+    name: '上传附件',
+    width: 180,
+    prop: 'file'
+  },
+  // 联动1 组件位于同一行// 1 对 多
+  {
+    mold: 'select',
+    name: '类别',
+    prop: 'mode',
+    width: 90,
+    multiple: false,
+    clearable: false,
+    default: null,
+    options: types,
+
+    // 联动关键字
+    link: [
+      {
+        mold: 'select', // 指定mold 将渲染至同一块区域
+        prop: 'districts',
+        name: '行政区',
+        width: 160,
+        clearable: false,
+        handler: function (val) {
+          // 在 handlers 根据逻辑 返回default 和 options 可避免不必要的渲染
+          return +val === 1
+            ? {
+                default: 'input',
+                options: types1
+              }
+            : {
+                default: 'select',
+                options: types2
+              }
+        }
+      },
+      {
+        mold: 'select',
+        prop: 'plateIds',
+        width: 160,
+        clearable: false,
+        handler: function (val) {
+          return +val === 2
+            ? {
+                default: 'input',
+                options: types2
+              }
+            : {
+                default: 'select',
+                options: types1
+              }
+        }
+      }
+    ]
+  },
+  // 联动2  组件位于不同行 显示隐藏
+  {
+    mold: 'select',
+    prop: 'wuyeTypes',
+    // width: 180,
+    name: '物业类型',
+    multiple: false,
+    clearable: false,
+    default: null,
+    options: types,
+    link: [
+      {
+        prop: 'houseTypeIds',
+        handler: async function (val) {
+          return +val === 1
+            ? {
+                renderable: true,
+                default: 'input',
+                options: types1
+              }
+            : {
+                renderable: false,
+                default: '',
+                options: []
+              }
+        }
+      },
+      {
+        prop: 'buildingFormGroups',
+        handler: async function (val) {
+          return +val === 2
+            ? {
+                renderable: true,
+                default: ['input', 'select'],
+                options: types2
+              }
+            : {
+                renderable: false,
+                default: ['input', 'select'],
+                options: []
+              }
+        }
+      }
+    ]
+  },
+  {
+    mold: 'select',
+    prop: 'houseTypeIds',
+    name: '套型',
+    clearable: false,
+    default: 'input',
+    options: types1
+  },
+  {
+    mold: 'select',
+    prop: 'buildingFormGroups',
+    name: '建筑形态',
+    clearable: false,
+    multiple: true,
+    default: ['input', 'select'],
+    options: types2
+  },
+  {
+    name: '查询',
+    mold: 'querybutton'
+  }
+]
+
+export default {
+  name: 'FormCustomDemo',
+
+  components: {
+    NstcCustom,
+    NstcFormGroup,
+    OriginalForm,
+    NstcExpandCollapse
+  },
+
+  data() {
+    return {
+      ruleForm: {},
+      rules: {
+        name: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
+        name1: [{ required: true, message: '请输入活动名称', trigger: 'blur' }]
+      },
+      varietyAmount: '',
+      varietyAmount1: '',
+      config_1,
+      config_2,
+      config_3,
+      reset: false,
+      reset_2: false,
+      formKey: new Date().getTime(),
+      queryCondition: {},
+      value1: [],
+      testValue: null,
+      isCollapse: false,
+      unwatchs: [],
+      model: [],
+      //====
+      isDisabled: false,
+      item_number: '12457.8700',
+      item_number_1: '7984556.54',
+      item_number_2: '',
+      item_: '12132132.54',
+      tableData: [
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '1235646654'
+        },
+        {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '798455654'
+        },
+        {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '7566256.3'
+        },
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '775555666.33'
+        }
+      ]
+    }
+  },
+
+  created() {
+    // const that = this
+    this.$nextTick(() => {
+      const that = this
+      this.unwatchs.push(
+        this.$watch(
+          function () {
+            return this.model.length ? this.model[0][`cs_1`] : null
+          },
+          {
+            immediate: true,
+            handler(val) {
+              that.config_2[0].formConfig[5][1].disabled = val !== 2
+              that.config_2[0].formConfig[5][1].isRequired = val === 2
+              // that.formKey = new Date().getTime()
+            }
+          }
+        )
+      )
+    })
+  },
+  mounted() {
+    this.varietyAmount1 = this.tableData[0].address
+  },
+  watch: {
+    queryCondition: function (newVal) {
+      console.log(newVal)
+    }
+  },
+
+  methods: {
+    textDisable() {
+      this.isDisabled = !this.isDisabled
+    },
+    ssss() {
+      // if (!val) {
+      //   this.ruleForm.name1 = 1;
+      // }
+      console.log(this.ruleForm.name1, 'ruleForm.name1')
+    },
+    handleReset() {},
+    handleChange(val) {
+      this.model = val
+      console.log(val)
+    },
+
+    async handleQuery(model) {
+      console.log('model', model)
+      try {
+        // do something;
+        // eg：
+
+        // 验证
+        // await this.validate()
+        // 请求
+        await request.post('/api/xxx', { ...model })
+
+        // 必须保留
+        return Promise.resolve
+      } catch (err) {
+        console.error(err)
+        // deal error
+
+        // 必须保留
+        return Promise.reject
+      }
+    },
+    getRule(config) {
+      let rules
+      rules = config
+        .reduce((prev, next) => [...prev, ...next.formConfig], [])
+        .reduce(
+          (prev, next) => [...prev, ...(Array.isArray(next) ? next : [next])],
+          []
+        )
+        .reduce((prev, next) => {
+          if (next.link) {
+            const links = next.link.filter((item) => !!item.mold)
+
+            return [...prev, next, ...links]
+          }
+
+          return [...prev, next]
+        }, [])
+        .filter((item) => item.isRequired)
+        .reduce((res, curr) => {
+          const isInput =
+            curr.mold === 'input' ||
+            curr.prop === 'dueDate' ||
+            'lastShipmentDate'
+
+          return {
+            ...res,
+            [curr.prop]: {
+              required: true,
+              message: `请${isInput ? '输入' : '选择'}${curr.name}`,
+              trigger: isInput ? 'blur' : 'change'
+              // whitespace: isInput || undefined,
+              // ...isInput
+              //   ? {
+              //     transform(val) {
+              //       return typeof val === 'string' ? val.trim() : val
+              //     }
+              //   }
+              //   : {}
+            }
+          }
+        }, {})
+      return rules
+    }
+  }
+}
+</script>
+