n20-common-lib 1.3.9 → 1.3.12

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

@@ -0,0 +1,796 @@
+<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>
+<style lang="less" scoped>
+</style>