n20-common-lib 1.3.4 → 1.3.7

package/src/components/NstcG6Components/NstcForm/A_DEMO/index.vue

@@ -1,796 +0,0 @@
-<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>