11/16

src/views/main/UserEmail/addForm.vue

@@ -11,26 +11,10 @@
       <a-form :form="form">
         <a-row>
           <a-col :span="8">
-            <a-form-item label="类型" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
-              <!-- <a-input
-                placeholder="请选择类型"
-                v-decorator="['typeCode', { rules: [{ required: true, message: '请输入EDI类型！' }] }]"
-              /> -->
-              <a-select
-                placeholder="请选择类型"
-                v-decorator="['typeCode', { rules: [{ required: true, message: '请选择类型！' }] }]"
-              >
-                <a-select-option v-for="item in TypeData" :key="item.code" :value="item.code">
-                  {{ item.value }}
-                </a-select-option>
-              </a-select>
-            </a-form-item>
-          </a-col>
-          <a-col :span="8">
-            <a-form-item label="账号" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
+            <a-form-item label="邮箱账号" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
               <a-input
-                placeholder="请输入账号"
-                v-decorator="['account', { rules: [{ required: true, message: '请输入账号！' }] }]"
+                placeholder="请输入邮箱账号"
+                v-decorator="['mailAccount', { rules: [{ required: true, message: '请输入邮箱账号！' }] }]"
               />
             </a-form-item>
           </a-col>
@@ -42,9 +26,74 @@
               />
             </a-form-item>
           </a-col>
-          <a-col :span="19">
-            <a-form-item label="备注" :labelCol="labelCol2" :wrapperCol="wrapperCol2" has-feedback>
-              <a-input placeholder="请输入备注" v-decorator="['remark']" />
+          <a-col :span="8">
+            <a-form-item label="使用IMAP4" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
+              <a-switch
+                :style="{ marginRight: '50px' }"
+                checked-children="开"
+                un-checked-children="关"
+                v-model="form2.useImap"
+                @change="FnCangeImap"
+              />
+            </a-form-item>
+          </a-col>
+          <a-col :span="8">
+            <a-form-item label="收件服务器" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
+              <a-input
+                placeholder="请输入收件服务器"
+                v-decorator="['receiveServer', { rules: [{ required: true, message: '请输入收件服务器！' }] }]"
+              />
+            </a-form-item>
+          </a-col>
+          <a-col :span="8">
+            <a-form-item label="收件端口" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
+              <a-input
+                placeholder="请输入收件端口"
+                v-decorator="['receivePort', { rules: [{ required: true, message: '请输入收件端口！' }] }]"
+              />
+            </a-form-item>
+          </a-col>
+          <a-col :span="8">
+            <a-form-item label="收件SSL" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
+              <a-switch
+                :style="{ marginRight: '50px' }"
+                checked-children="开"
+                un-checked-children="关"
+                v-model="form2.receiveSSL"
+                @change="FnChangeReceive"
+              />
+            </a-form-item>
+          </a-col>
+          <a-col :span="8">
+            <a-form-item label="发件服务器" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
+              <a-input
+                placeholder="请输入发件服务器"
+                v-decorator="['smtpServer', { rules: [{ required: true, message: '请输入发件服务器！' }] }]"
+              />
+            </a-form-item>
+          </a-col>
+          <a-col :span="8">
+            <a-form-item label="发件端口" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
+              <a-input
+                placeholder="请输入发件端口"
+                v-decorator="['smtpPort', { rules: [{ required: true, message: '请输入发件端口！' }] }]"
+              />
+            </a-form-item>
+          </a-col>
+          <a-col :span="8">
+            <a-form-item label="发件SSL" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
+              <a-switch
+                :style="{ marginRight: '50px' }"
+                checked-children="开"
+                un-checked-children="关"
+                @change="FnChangeSmtp"
+                v-model="form2.smtpSSL"
+              />
+            </a-form-item>
+          </a-col>
+          <a-col :span="8">
+            <a-form-item label="显示名" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
+              <a-input placeholder="请输入显示名" v-decorator="['showName']" />
             </a-form-item>
           </a-col>
         </a-row>
@@ -79,37 +128,36 @@ export default {
       typeData: [],
       visible: false,
       confirmLoading: false,
-      form: this.$form.createForm(this)
+      form: this.$form.createForm(this),
+      form2: { useImap: false, receiveSSL: false, smtpSSL: false }
     }
   },
   mounted() {
     sysDictDataPage({ pageNo: 1, pageSize: 999, typeId: '349716496130117' }).then(res => {
       this.TypeData = res.data.rows
-      console.log(this.TypeData)
     })
   },
   methods: {
+    FnChangeSmtp(value) {
+      // this.form.getFieldsValue()
+      console.log(value, this.$form.createForm(this))
+    },
+    FnChangeReceive(value) {
+      console.log(value)
+    },
+    FnCangeImap() {
+      console.log(value)
+    },
     // 初始化方法
     add(record) {
       this.visible = true
-      this.typeData = [
-        {
-          code: 10,
-          name: '收货人'
-        },
-        {
-          code: 20,
-          name: '发货人'
-        },
-        {
-          code: 30,
-          name: '通知人'
-        },
-        {
-          code: 40,
-          name: '第二通知人'
-        }
-      ]
+      this.typeData = []
+      this.form2 = { useImap: false, receiveSSL: false, smtpSSL: false }
+      setTimeout(() => {
+        this.form.setFieldsValue({
+          receivePort: 110
+        })
+      }, 100)
     },
     /**
      * 提交表单
@@ -152,3 +200,8 @@ export default {
   }
 }
 </script>
+<style lang="less" scoped>
+/deep/ .ant-switch > .ant-form-item-children-icon {
+  display: none !important;
+}
+</style>

src/views/main/UserEmail/editForm.vue

@@ -11,22 +11,10 @@
       <a-form :form="form">
         <a-row>
           <a-col :span="8">
-            <a-form-item label="类型" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
-              <a-select
-                placeholder="请选择类型"
-                v-decorator="['typeCode', { rules: [{ required: true, message: '请选择类型！' }] }]"
-              >
-                <a-select-option v-for="item in TypeData" :key="item.code" :value="item.code">
-                  {{ item.value }}
-                </a-select-option>
-              </a-select>
-            </a-form-item>
-          </a-col>
-          <a-col :span="8">
-            <a-form-item label="账号" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
+            <a-form-item label="邮箱账号" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
               <a-input
-                placeholder="请输入账号"
-                v-decorator="['account', { rules: [{ required: true, message: '请输入账号！' }] }]"
+                placeholder="请输入邮箱账号"
+                v-decorator="['mailAccount', { rules: [{ required: true, message: '请输入邮箱账号！' }] }]"
               />
             </a-form-item>
           </a-col>
@@ -38,9 +26,73 @@
               />
             </a-form-item>
           </a-col>
-          <a-col :span="19">
-            <a-form-item label="备注" :labelCol="labelCol2" :wrapperCol="wrapperCol2" has-feedback>
-              <a-input placeholder="请输入备注" v-decorator="['remark']" />
+          <a-col :span="8">
+            <a-form-item label="使用IMAP4" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
+              <a-switch
+                :style="{ marginRight: '50px' }"
+                checked-children="开"
+                un-checked-children="关"
+                v-decorator="['useImap']"
+              />
+            </a-form-item>
+          </a-col>
+          <a-col :span="8">
+            <a-form-item label="收件服务器" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
+              <a-input
+                placeholder="请输入收件服务器"
+                v-decorator="['receiveServer', { rules: [{ required: true, message: '请输入收件服务器！' }] }]"
+              />
+            </a-form-item>
+          </a-col>
+          <a-col :span="8">
+            <a-form-item label="收件端口" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
+              <a-input
+                placeholder="请输入收件端口"
+                v-decorator="['receivePort', { rules: [{ required: true, message: '请输入收件端口！' }] }]"
+              />
+            </a-form-item>
+          </a-col>
+          <a-col :span="8">
+            <a-form-item label="收件SSL" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
+              <a-switch
+                :style="{ marginRight: '50px' }"
+                checked-children="开"
+                un-checked-children="关"
+                v-decorator="['receiveSSL']"
+                @change="FnChangeReceive"
+              />
+            </a-form-item>
+          </a-col>
+          <a-col :span="8">
+            <a-form-item label="发件服务器" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
+              <a-input
+                placeholder="请输入发件服务器"
+                v-decorator="['smtpServer', { rules: [{ required: true, message: '请输入发件服务器！' }] }]"
+              />
+            </a-form-item>
+          </a-col>
+          <a-col :span="8">
+            <a-form-item label="发件端口" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
+              <a-input
+                placeholder="请输入发件端口"
+                v-decorator="['smtpPort', { rules: [{ required: true, message: '请输入发件端口！' }] }]"
+              />
+            </a-form-item>
+          </a-col>
+          <a-col :span="8">
+            <a-form-item label="发件SSL" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
+              <a-switch
+                :style="{ marginRight: '50px' }"
+                checked-children="开"
+                un-checked-children="关"
+                v-decorator="['smtpSSL']"
+                @change="FnChangeSmtp"
+              />
+            </a-form-item>
+          </a-col>
+          <a-col :span="8">
+            <a-form-item label="显示名" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
+              <a-input placeholder="请输入显示名" v-decorator="['showName']" />
             </a-form-item>
           </a-col>
         </a-row>
@@ -82,10 +134,15 @@ export default {
   mounted() {
     sysDictDataPage({ pageNo: 1, pageSize: 999, typeId: '349716496130117' }).then(res => {
       this.TypeData = res.data.rows
-      console.log(this.TypeData)
     })
   },
   methods: {
+    FnChangeSmtp(value) {
+      console.log(value)
+    },
+    FnChangeReceive(value) {
+      console.log(value)
+    },
     // 初始化方法
     edit(record) {
       this.data = record
@@ -95,10 +152,16 @@ export default {
       this.typeData = typeOption.filters['dictData']('edi_type')
       setTimeout(() => {
         this.form.setFieldsValue({
-          typeCode: record.typeCode,
-          account: record.account,
+          mailAccount: record.mailAccount,
           password: record.password,
-          remark: record.remark
+          useImap: record.useImap,
+          receiveServer: record.receiveServer,
+          receivePort: record.receivePort,
+          receiveSSL: record.receiveSSL,
+          smtpServer: record.smtpServer,
+          smtpPort: record.smtpPort,
+          smtpSSL: record.smtpSSL,
+          showName: record.showName
         })
         console.log(this.form.getFieldsValue())
       }, 100)

src/views/main/UserEmail/index.vue

@@ -35,7 +35,7 @@
       <vxe-toolbar>
         <template #buttons>
           <a-button type="primary" icon="plus" @click="$refs.addForm.add()">
-            新增邮箱
+            新增邮箱账号
           </a-button>
         </template>
       </vxe-toolbar>
@@ -113,28 +113,58 @@ export default {
       ColumnsQuery: [],
       columns: [
         {
-          title: '类型',
+          title: '邮箱账号',
           align: 'center',
           width: '100',
-          dataIndex: 'typeCode'
+          dataIndex: 'mailAccount'
         },
         {
-          title: '账号',
+          title: '密码',
           align: 'center',
           width: '80',
-          dataIndex: 'account'
+          dataIndex: 'password'
         },
         {
-          title: '密码',
+          title: '使用IMAP4',
+          align: 'center',
+          width: '100',
+          dataIndex: 'useImap'
+        },
+        {
+          title: '收件服务器',
+          align: 'center',
+          width: '100',
+          dataIndex: 'receiveServer'
+        },
+        {
+          title: '收件端口',
           align: 'center',
           width: '80',
-          dataIndex: 'password'
+          dataIndex: 'receivePort'
+        },
+        {
+          title: '收件SSL',
+          align: 'center',
+          width: '80',
+          dataIndex: 'receiveSSL'
+        },
+        {
+          title: '发件服务器',
+          align: 'center',
+          width: '100',
+          dataIndex: 'smtpServer'
+        },
+        {
+          title: '发件端口',
+          align: 'center',
+          width: '80',
+          dataIndex: 'smtpPort'
         },
         {
-          title: '备注',
+          title: '发件SSL',
           align: 'center',
           width: '80',
-          dataIndex: 'remark'
+          dataIndex: 'smtpSSL'
         }
       ],
       tstyle: { 'padding-bottom': '0px', 'margin-bottom': '10px' },
@@ -147,7 +177,6 @@ export default {
     this.init()
     sysDictDataPage({ pageNo: 1, pageSize: 999, typeId: '349716496130117' }).then(res => {
       this.TypeData = res.data.rows
-      console.log(this.TypeData)
     })
   },
   methods: {