meixioacomponent 0.3.27 → 0.3.30

package/src/component/test.vue

@@ -1,4 +1,173 @@
-<template>
+<!-- <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"
@@ -140,9 +309,9 @@ export default {
   padding: var(--padding-4);
   box-sizing: border-box;
 }
-</style>
+</style> -->
 
-<!-- <template>
+<template>
   <div class="page-table-wrap" ref="pageTableWrap">
     <base-pro-table
       :align="`left`"
@@ -157,9 +326,9 @@ export default {
       :headerConfig="headerConfig"
       :totalPropsList="totalPropsList"
       :proScreenConfig="proScreenConfig"
-    > -->
-<!-- 表格头部插槽 -->
-<!-- <template>
+    >
+      <!-- 表格头部插槽 -->
+      <template>
         <base-icon
           :color="`m`"
           :event="true"
@@ -188,16 +357,17 @@ export default {
             <el-dropdown-item>蚵仔煎</el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
-      </template> -->
+      </template>
 
-<!-- 自定义模板列 -->
-<!-- <template v-slot:name="data"> template-{{ data.scope }} </template>
-      <template v-slot:address="data"> template-{{ data.scope }} </template> -->
-<!-- </base-pro-table>
+      <!-- 自定义模板列 -->
+      <template v-slot:name="data">template-{{ data.scope }}</template>
+      <template v-slot:address="data">template-{{ data.scope }}</template>
+    </base-pro-table>
   </div>
-</template> -->
+</template>
 
-<!-- <script>
+<script>
+import tableTable from '../test'
 export default {
   data() {
     return {
@@ -206,22 +376,22 @@ export default {
       tableConfig: [],
 
       headerConfig: {
-        headerText: "测试表格",
+        headerText: '测试表格',
       },
 
       totalPropsList: [],
 
-      keyWords: "",
+      keyWords: '',
       /* 快捷的筛选 类似于tag */
       screenList: {
         index: 0,
         list: [
-          { value: "all", label: "全部合同", key: "_all" },
-          { value: "me", label: "我负责的合同", key: "_me" },
+          { value: 'all', label: '全部合同', key: '_all' },
+          { value: 'me', label: '我负责的合同', key: '_me' },
           {
-            value: "subordinate",
-            label: "下属负责的合同",
-            key: "_subordinate",
+            value: 'subordinate',
+            label: '下属负责的合同',
+            key: '_subordinate',
           },
         ],
       },
@@ -229,27 +399,27 @@ export default {
       /* 高级筛选的配置 */
       proScreenConfig: [
         {
-          key: "accountBank",
-          value: "",
-          type: "time",
+          key: 'accountBank',
+          value: '',
+          type: 'time',
         },
         {
-          key: "firmName",
-          value: "",
-          type: "input",
+          key: 'firmName',
+          value: '',
+          type: 'input',
         },
         {
-          key: "contactName",
-          value: "",
-          type: "select",
+          key: 'contactName',
+          value: '',
+          type: 'select',
           selectList: [
             {
-              label: "测试1",
+              label: '测试1',
               value: 1,
             },
-            { label: "测试2", value: 2 },
-            { label: "测试3", value: 3 },
-            { label: "测试4", value: 4 },
+            { label: '测试2', value: 2 },
+            { label: '测试3', value: 3 },
+            { label: '测试4', value: 4 },
           ],
         },
       ],
@@ -263,93 +433,93 @@ export default {
       },
       //  分页配置
       pageConfig: {
-        size: "pageSize",
-        page: "pageNum",
-        total: "total",
+        size: 'pageSize',
+        page: 'pageNum',
+        total: 'total',
       },
-    };
+    }
   },
   created() {
     this.tableConfig = [
       {
         width: 120,
         lock: false,
-        label: "操作",
+        label: '操作',
         template: false,
-        key: "accountBank",
+        key: 'accountBank',
         screen: true,
       },
       {
-        label: "单位名称",
-        key: "firmName",
+        label: '单位名称',
+        key: 'firmName',
         lock: false,
         width: 150,
         template: false,
         screen: true,
       },
       {
-        label: "合同名称",
-        key: "pactName",
+        label: '合同名称',
+        key: 'pactName',
         lock: false,
         width: 150,
         template: false,
-        color: "warn",
+        color: 'warn',
       },
       {
-        label: "联系人名称",
-        key: "contactName",
+        label: '联系人名称',
+        key: 'contactName',
         lock: false,
         width: 150,
         screen: true,
         template: false,
       },
       {
-        label: "快递单号",
-        key: "courierNumber",
+        label: '快递单号',
+        key: 'courierNumber',
         lock: false,
         width: 199,
       },
       {
-        label: "审核状态",
-        key: "status",
+        label: '审核状态',
+        key: 'status',
         lock: false,
         width: 280,
         template: false,
       },
       {
-        label: "签署时间",
-        key: "gmtCreate",
+        label: '签署时间',
+        key: 'gmtCreate',
         lock: false,
         width: 280,
         template: false,
       },
-    ];
+    ]
   },
   mounted() {
-    this.pageHeight = this.$refs.pageTableWrap.clientHeight;
+    this.pageHeight = this.$refs.pageTableWrap.clientHeight
   },
   components: {},
   methods: {
     async httpRequire(screenCofig) {
-      let result = null;
+      let result = null
       try {
-        result = await test(screenCofig);
-        this.pageProps.total = result.total;
+        // result = await test(screenCofig)
+        this.pageProps.total = 20
       } catch (error) {
         return new Promise((resolve, reject) => {
-          this.pageProps.total = 0;
-          resolve([]);
-        });
+          this.pageProps.total = 0
+          resolve([])
+        })
       }
       return new Promise((resolve, reject) => {
-        resolve(result.rows);
-      });
+        resolve(tableTable)
+      })
     },
     rowClick(row) {
-      console.log(row);
+      console.log(row)
     },
   },
-};
+}
 </script>
 
 <style lang="less" scoped>
@@ -358,7 +528,7 @@ export default {
   height: 100%;
   background: inherit;
 }
-</style> -->
+</style>
 
 <!-- 普通表单 -->
 <!-- <template>

package/src/test.js

@@ -0,0 +1,13 @@
+import { reactive } from "vue"
+
+
+let tableTable = reactive([{ firmName: 1 },
+{ firmName: 2 },
+{ firmName: 3 },
+{ firmName: 4 },
+{ firmName: 5 },
+{ firmName: 6 },
+{ firmName: 7 },])
+
+
+export default tableTable;