meixioacomponent 0.3.26 → 0.3.29

package/src/component/test.vue

@@ -0,0 +1,960 @@
+<template>
+  <base-dialog
+    ref="dialog"
+    :modal="true"
+    :title="`验证邮箱`"
+    :isDestroy="true"
+    :appendToBody="true"
+    :contentHeight="`200px`"
+    @destroy="destroy"
+  >
+    <div class="dialog-content" slot="dialog-content">
+      <div class="verify-email-wrap">
+        <span class="des-text">
+          请填写新的邮箱地址，邮箱填写完成后点击发送电子邮件，系统会发送一封邮件到新的邮箱地址，请输入邮件中的验证码验证您的邮箱。
+        </span>
+        <base-form
+          :footer="false"
+          :rules="rules"
+          :rowNumber="1"
+          ref="baseForm"
+          v-model="formList"
+          :labelWidth="`70px`"
+          :labelPosition="`left`"
+          @formSubmit="formSubmit"
+        >
+          <template v-slot:form-verifyCode="data">
+            <el-input
+              size="medium"
+              prefix-icon="el-icon-postcard"
+              v-model.number="data.scope[1].value"
+            >
+              <div class="code-button_wrap" slot="suffix">
+                <el-button
+                  type="info"
+                  size="mini"
+                  slot="suffix"
+                  :disabled="downButtonDisable"
+                  @click="onHandleStartDown"
+                >
+                  获取验证码
+                </el-button>
+              </div>
+            </el-input>
+          </template>
+        </base-form>
+      </div>
+    </div>
+    <base-button-handle
+      slot="dialog-footer"
+      :size="`mini`"
+      :config="buttonConfig"
+    ></base-button-handle>
+  </base-dialog>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      formList: [],
+      downTriger: null,
+      downNumber: 120,
+      test: true,
+      rules: {
+        email: [
+          {
+            // validator: elementValidate.validateEmail,
+            required: true,
+            message: '请输入邮箱',
+            trigger: 'blur',
+          },
+        ],
+
+        verifyCode: [
+          {
+            required: true,
+            trigger: 'blur',
+            message: '请输入验证码',
+          },
+        ],
+      },
+    }
+  },
+
+  created() {
+    const { email } = this.$props
+    this.formList = [
+      {
+        value: email,
+        key: 'email',
+        type: 'input',
+        label: '邮箱',
+      },
+      {
+        value: '',
+        key: 'verifyCode',
+        type: 'template',
+        label: '验证码',
+      },
+    ]
+
+    setTimeout(() => {
+      this.test = false
+    }, 5000)
+  },
+  mounted() {
+    this.$refs.dialog.showDialog()
+  },
+  computed: {
+    downButtonDisable() {
+      return this.trigger || !this.formList[0].value
+    },
+    buttonConfig() {
+      return [
+        {
+          text: '发送验证码',
+          type: 'primary',
+          loading: this.test,
+          click: () => {
+            this.$refs.baseForm.onSubmit()
+          },
+        },
+        {
+          text: '取消验证',
+          type: 'info',
+          click: () => {},
+        },
+      ]
+    },
+  },
+  props: {
+    email: {},
+  },
+  methods: {
+    destroy() {
+      this.$destroy()
+    },
+    formSubmit() {
+      const result = this.$refs.baseForm.returnFormValue()
+      //   submitAccountInfo(result).then((res) => {
+      console.log(result)
+      this.$message.success('操作成功')
+      //   })
+    },
+    onHandleStartDown() {},
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.verify-email-wrap {
+  width: 100%;
+  height: 200px;
+
+  .des-text {
+    display: inline-block;
+    margin-bottom: var(--margin-4);
+    color: var(--font-color-s);
+    font-size: var(--font-size-base);
+  }
+  .code-button_wrap {
+    top: 50%;
+    right: 0px;
+    position: absolute;
+    transform: translateY(-50%);
+  }
+}
+</style>
+
+<!-- <template>
+  <base-drawer
+    :size="800"
+    ref="drawer"
+    :modal="true"
+    :header="true"
+    :direction="`rtl`"
+    :title="`单位信息`"
+    :appendToBody="true"
+    :wrapperClosable="false"
+  >
+    <div class="company-info-drawer-content" slot="drawer-content">
+      <base-form-wrap
+        :rowNumber="2"
+        :labelWidth="`155px`"
+        :rules="businessInfo.rules"
+        :formTitle="businessInfo.title"
+        :formList="businessInfo.formList"
+      >
+        <template v-slot:formslot-businessLicenseFile="data">
+          <div class="upload-wrap" style="height: 100px">
+            <base-upload-item
+              :disabled="true"
+              :shape="`pro`"
+              :fileType="`img`"
+              @uploadEd="uploadEd"
+              :uploadType="`single`"
+              v-model="test"
+            >
+            </base-upload-item>
+          </div>
+        </template>
+      </base-form-wrap>
+    </div>
+  </base-drawer>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      connecter: null,
+      backInfo: null,
+      formApiData: null,
+      businessInfo: null,
+      test: [],
+    };
+  },
+  created() {
+    // let _companyInfo = companyInfo();
+
+    this.businessInfo = {
+      title: "经营信息",
+      rules: {
+        legalPerson: [
+          {
+            required: true,
+            message: "请输入法人名称",
+            trigger: "blur",
+          },
+        ],
+        idCard: [
+          {
+            required: true,
+            message: "请输入法人身份证",
+            trigger: "blur",
+          },
+        ],
+        businessLicense: [
+          {
+            required: true,
+            message: "请输入营业执照号",
+            trigger: "blur",
+          },
+        ],
+
+        businessLicenseFile: [
+          {
+            required: true,
+            message: "请上传营业执照电子版",
+            trigger: "blur",
+          },
+        ],
+      },
+      formList: [
+        {
+          value: "2022-05-02 22:00:00",
+          key: "legalPerson",
+          type: "time",
+          label: "法人名称",
+        },
+        {
+          value: "",
+          key: "idCard",
+          type: "input",
+          label: "法人身份证",
+        },
+        {
+          value: "",
+          key: "businessLicense",
+          type: "input",
+          label: "营业执照号",
+        },
+        {
+          value:
+            "businessLicenseFilebusinessLicenseFilebusinessLicenseFilebusinessLicenseFilebusinessLicenseFilebusinessLicenseFilebusinessLicenseFilebusinessLicenseFile",
+          key: "businessLicenseFile",
+          type: "template",
+          label: "营业执照电子版",
+        },
+      ],
+    };
+    // this.connecter = _companyInfo.contactInfo;
+    // this.backInfo = _companyInfo.bankInfo;
+    // this.getCompanyInfoFromCompanyId();
+  },
+  mounted() {
+    this.$refs.drawer.openDrawer();
+  },
+  props: {
+    companyId: null,
+  },
+  methods: {
+    uploadEd() {},
+    async getCompanyInfoFromCompanyId() {
+      const { companyId } = this.$props;
+      this.formApiData = await GetCompanyInfoFromCompanyId(companyId);
+      let arr = ["businessInfo", "connecter", "backInfo"];
+      for (let i = 0; i < arr.length; i++) {
+        assembleData(this[`${arr[i]}`].formList, this.formApiData);
+      }
+      console.log(this.businessInfo);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.company-info-drawer-content {
+  padding: var(--padding-4);
+  box-sizing: border-box;
+}
+</style> -->
+
+<!-- <template>
+  <div class="page-table-wrap" ref="pageTableWrap">
+    <base-pro-table
+      :align="`left`"
+      v-model="keyWords"
+      :height="pageHeight"
+      :isAverageWidth="false"
+      :pageProps="pageProps"
+      :pageConfig="pageConfig"
+      :screenList="screenList"
+      :httpRequire="httpRequire"
+      :tableConfig="tableConfig"
+      :headerConfig="headerConfig"
+      :totalPropsList="totalPropsList"
+      :proScreenConfig="proScreenConfig"
+    > -->
+<!-- 表格头部插槽 -->
+<!-- <template>
+        <base-icon
+          :color="`m`"
+          :event="true"
+          slot="prefix"
+          :name="`icon-bangzhu`"
+        ></base-icon>
+
+        <template slot="headerExtend">
+          <el-button type="primary" size="medium">新建客户</el-button>
+          <el-button type="info" plain size="small">查重</el-button>
+        </template>
+
+        <el-dropdown slot="suffix" trigger="click">
+          <el-button
+            type="info"
+            size="small"
+            icon="el-icon-more"
+            class="dropdown-button"
+            plain
+          ></el-button>
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item>黄金糕</el-dropdown-item>
+            <el-dropdown-item>狮子头</el-dropdown-item>
+            <el-dropdown-item>螺蛳粉</el-dropdown-item>
+            <el-dropdown-item>双皮奶</el-dropdown-item>
+            <el-dropdown-item>蚵仔煎</el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+      </template> -->
+
+<!-- 自定义模板列 -->
+<!-- <template v-slot:name="data"> template-{{ data.scope }} </template>
+      <template v-slot:address="data"> template-{{ data.scope }} </template> -->
+<!-- </base-pro-table>
+  </div>
+</template> -->
+
+<!-- <script>
+export default {
+  data() {
+    return {
+      // 当前页面高度
+      pageHeight: null,
+      tableConfig: [],
+
+      headerConfig: {
+        headerText: "测试表格",
+      },
+
+      totalPropsList: [],
+
+      keyWords: "",
+      /* 快捷的筛选 类似于tag */
+      screenList: {
+        index: 0,
+        list: [
+          { value: "all", label: "全部合同", key: "_all" },
+          { value: "me", label: "我负责的合同", key: "_me" },
+          {
+            value: "subordinate",
+            label: "下属负责的合同",
+            key: "_subordinate",
+          },
+        ],
+      },
+
+      /* 高级筛选的配置 */
+      proScreenConfig: [
+        {
+          key: "accountBank",
+          value: "",
+          type: "time",
+        },
+        {
+          key: "firmName",
+          value: "",
+          type: "input",
+        },
+        {
+          key: "contactName",
+          value: "",
+          type: "select",
+          selectList: [
+            {
+              label: "测试1",
+              value: 1,
+            },
+            { label: "测试2", value: 2 },
+            { label: "测试3", value: 3 },
+            { label: "测试4", value: 4 },
+          ],
+        },
+      ],
+
+      // 分页属性
+      /* 分页属性 */
+      pageProps: {
+        pageSize: 15,
+        pageNum: 1,
+        total: 100,
+      },
+      //  分页配置
+      pageConfig: {
+        size: "pageSize",
+        page: "pageNum",
+        total: "total",
+      },
+    };
+  },
+  created() {
+    this.tableConfig = [
+      {
+        width: 120,
+        lock: false,
+        label: "操作",
+        template: false,
+        key: "accountBank",
+        screen: true,
+      },
+      {
+        label: "单位名称",
+        key: "firmName",
+        lock: false,
+        width: 150,
+        template: false,
+        screen: true,
+      },
+      {
+        label: "合同名称",
+        key: "pactName",
+        lock: false,
+        width: 150,
+        template: false,
+        color: "warn",
+      },
+      {
+        label: "联系人名称",
+        key: "contactName",
+        lock: false,
+        width: 150,
+        screen: true,
+        template: false,
+      },
+      {
+        label: "快递单号",
+        key: "courierNumber",
+        lock: false,
+        width: 199,
+      },
+      {
+        label: "审核状态",
+        key: "status",
+        lock: false,
+        width: 280,
+        template: false,
+      },
+      {
+        label: "签署时间",
+        key: "gmtCreate",
+        lock: false,
+        width: 280,
+        template: false,
+      },
+    ];
+  },
+  mounted() {
+    this.pageHeight = this.$refs.pageTableWrap.clientHeight;
+  },
+  components: {},
+  methods: {
+    async httpRequire(screenCofig) {
+      let result = null;
+      try {
+        result = await test(screenCofig);
+        this.pageProps.total = result.total;
+      } catch (error) {
+        return new Promise((resolve, reject) => {
+          this.pageProps.total = 0;
+          resolve([]);
+        });
+      }
+      return new Promise((resolve, reject) => {
+        resolve(result.rows);
+      });
+    },
+    rowClick(row) {
+      console.log(row);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.page-table-wrap {
+  width: 100%;
+  height: 100%;
+  background: inherit;
+}
+</style> -->
+
+<!-- 普通表单 -->
+<!-- <template>
+  <div class="add-company-step-two-wrap">
+    <base-form
+      :footer="false"
+      :rules="rules"
+      :rowNumber="1"
+      @onCancel="onCancel"
+      v-model="formList"
+      :labelWidth="`200px`"
+      :labelPosition="`right`"
+      @formSubmit="formSubmit"
+    >
+      <template v-slot:form-businessLicense="data">
+  
+        <div class="upload-wrap">
+          <base-upload-item
+            :shape="`pro`"
+            :fileType="`img`"
+            @uploadEd="uploadEd"
+            :uploadType="`single`"
+            v-model="data.scope[3].value"
+          >
+          </base-upload-item>
+        </div>
+      </template>
+      <template v-slot:form-idPositive="data">
+  
+        <div class="upload-wrap">
+          <base-upload-item
+            :shape="`pro`"
+            :fileType="`img`"
+            @uploadEd="uploadEd"
+            :uploadType="`single`"
+            v-model="data.scope[4].value"
+          >
+          </base-upload-item>
+        </div>
+      </template>
+      <template v-slot:form-idBack="data">
+     
+        <div class="upload-wrap">
+          <base-upload-item
+            :shape="`pro`"
+            :fileType="`img`"
+            @uploadEd="uploadEd"
+            :uploadType="`single`"
+            v-model="data.scope[5].value"
+          >
+          </base-upload-item>
+        </div>
+      </template>
+    </base-form>
+  </div>
+</template> -->
+
+<!-- <script>
+export default {
+  data() {
+    return {
+      formList: [
+        {
+          value: "",
+          key: "companyName",
+          type: "input",
+          label: "企业名称",
+        },
+        {
+          value: "",
+          key: "companyAddress",
+          type: "area",
+          label: "通讯地址",
+        },
+        {
+          value: "",
+          key: "companyDetail",
+          type: "textarea",
+          label: "详细地址",
+        },
+        {
+          value: [],
+          key: "businessLicense",
+          type: "template",
+          label: "营业执照正面彩照",
+        },
+        {
+          value: [],
+          key: "idPositive",
+          type: "template",
+          label: "法人身份证人像照",
+        },
+        {
+          value: [],
+          key: "idBack",
+          type: "template",
+          label: "法人身份证国徽照",
+        },
+      ],
+      rules: {
+        companyName: [
+          {
+            required: true,
+            message: "请输入企业名称",
+            trigger: "blur",
+          },
+        ],
+        companyAddress: [
+          {
+            required: true,
+            message: "请输入通讯地址",
+            trigger: "blur",
+          },
+        ],
+        companyDetail: [
+          {
+            required: true,
+            message: "请输入详细地址",
+            trigger: "blur",
+          },
+        ],
+        businessLicense: [
+          {
+            required: true,
+            message: "请上传营业彩照",
+            trigger: "blur",
+          },
+        ],
+        idPositive: [
+          {
+            required: true,
+            message: "请上传法人身份证人像照",
+            trigger: "blur",
+          },
+        ],
+        idBack: [
+          {
+            required: true,
+            message: "请上传法人身份证国徽照",
+            trigger: "blur",
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    onCancel() {},
+    formSubmit() {},
+    uploadEd(value) {
+      console.log(value);
+      console.log(this.formList);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.add-company-step-two-wrap {
+  width: 60%;
+  height: 100%;
+  overflow-y: auto;
+  .upload-wrap {
+    width: 100%;
+    height: 170px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    /deep/ .base-upload-item-wrap {
+      margin: 0px;
+    }
+  }
+}
+</style> -->
+
+<!-- 上传表单 -->
+<!-- <template>
+  <base-dialog-form
+    ref="dialogFormVue"
+    :title="`测试表格`"
+    :labelWidth="`150px`"
+    :rulesList="rulesList"
+    v-model="formArray"
+    :disables="disables"
+    :modallAppendToBody="false"
+    :footerHandleConfig="footerHandleConfig"
+  ></base-dialog-form>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      // 表单验证
+      formArray: [
+        {
+          key: "test1",
+          formTitle: "基本信息",
+          formList: [
+            {
+              value: "签约行业",
+              key: "test1",
+              type: "input",
+              disabled: true,
+              label: "商机名称",
+            },
+            {
+              key: "test9",
+              type: "radio",
+              value: 1,
+              label: "客户地址",
+              list: [
+                {
+                  label: "1",
+                  value: 1,
+                },
+                {
+                  label: "2",
+                  value: 2,
+                },
+              ],
+            },
+            {
+              key: "test2",
+              type: "input",
+              disabled: false,
+              label: "客户名称",
+              value: "河南郑州建设股份有限公司 ",
+              click: (formItem) => {
+                console.log(formItem);
+              },
+            },
+            {
+              key: "test3",
+              type: "input",
+              disabled: false,
+              value: 17490,
+              color: "warn",
+              label: "商机金额",
+            },
+            {
+              value: "",
+              key: "test4",
+              type: "time",
+              disabled: false,
+              label: "预计成交日期",
+            },
+            {
+              value: "",
+              key: "test5",
+              type: "time",
+              disabled: false,
+              label: "下次联系时间",
+            },
+            {
+              value: [2],
+              key: "test6",
+              type: "select",
+              disabled: false,
+              label: "商机状态组",
+              multipleLimit: 2,
+              useStore: "testSelectStore",
+            },
+            {
+              value: 2,
+              key: "test7",
+              type: "select",
+              disabled: false,
+              label: "商机阶段",
+              useStore: "testSelectStore",
+            },
+            {
+              value: "",
+              key: "test8",
+              type: "textarea",
+              disabled: false,
+              label: "备注",
+            },
+          ],
+        },
+        {
+          key: "test2",
+          formTitle: "基本信息",
+          formList: [
+            {
+              value: "签约行业",
+              key: "test1",
+              type: "input",
+              disabled: true,
+              label: "商机名称",
+            },
+            {
+              key: "test2",
+              type: "input",
+              disabled: false,
+              label: "客户名称",
+              value: "河南郑州建设股份有限公司 ",
+              click: (formItem) => {
+                console.log(formItem);
+              },
+            },
+            {
+              key: "test3",
+              type: "input",
+              disabled: false,
+              value: 17490,
+              color: "warn",
+              label: "商机金额",
+            },
+            {
+              value: "",
+              key: "test4",
+              type: "time",
+              disabled: false,
+              label: "预计成交日期",
+            },
+            {
+              value: "",
+              key: "test5",
+              type: "time",
+              disabled: false,
+              label: "下次联系时间",
+            },
+            {
+              value: [2],
+              key: "test6",
+              type: "select",
+              disabled: false,
+              label: "商机状态组",
+              multipleLimit: 2,
+              useStore: "testSelectStore",
+            },
+            {
+              value: 2,
+              key: "test7",
+              type: "select",
+              disabled: false,
+              label: "商机阶段",
+              useStore: "testSelectStore",
+            },
+            {
+              value: "",
+              key: "test8",
+              type: "textarea",
+              disabled: false,
+              label: "备注",
+            },
+          ],
+        },
+        {
+          key: "test3",
+          formTitle: "测试活动图片",
+          formType: "upload",
+          max: 3,
+          formList: [
+            {
+              value: [],
+              key: "test1",
+              label: "图片上传",
+            },
+          ],
+        },
+      ],
+      rulesList: {},
+      footerHandleConfig: [],
+      disables: {},
+    };
+  },
+
+  created() {
+    //
+    this.disables = {
+      test9: {
+        effects: [
+          {
+            key: "test1",
+            type: "hide",
+            fn: this.hideMenuTypeOfButton,
+          },
+        ],
+      },
+    };
+    this.footerHandleConfig = [
+      {
+        text: "取消",
+        type: "info",
+        plain: true,
+        click: () => {
+          // this.dialogProscreenConfirm(false);
+          this.$destroy();
+        },
+      },
+      {
+        text: "确定",
+        type: "primary",
+        plain: false,
+        click: async () => {
+          // this.dialogProscreenConfirm(true);
+          let result = await this.$refs.dialogFormVue.checkValidate();
+          if (result) {
+            console.log(this.$refs.dialogFormVue.getFormValue());
+          }
+        },
+      },
+    ];
+
+    this.rulesList = {
+      test1: {
+        test1: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
+        test2: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
+        test3: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
+        test4: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
+        test5: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
+        test9: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
+      },
+    };
+  },
+  mounted() {
+    this.$refs.dialogFormVue.showDialog();
+  },
+  components: {},
+  props: { index: {} },
+  methods: {
+    hideMenuTypeOfButton(val) {
+      return val == 1;
+    },
+  },
+};
+</script>
+
+<style></style> -->