企业管理--联系人管理页面

src/components/BusinessModules/BusinessSelect.vue

@@ -0,0 +1,113 @@
+<template>
+  <j-modal
+      :title="title"
+      :width="width"
+      :visible="visible"
+      :confirmLoading="confirmLoading"
+      switchFullscreen
+      @ok="handleOk"
+      @cancel="handleCancel"
+      cancelText="关闭">
+    <div class="table-page-search-wrapper">
+      <a-form layout="inline" @keyup.enter.native="searchQuery">
+        <a-row>
+          <a-col :xl="6" :lg="7" :md="8" :sm="24">
+            <a-form-item>
+              <a-input placeholder="请输入企业名称" v-model="queryParam.businessName"></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :xl="6" :lg="7" :md="8" :sm="24">
+            <span class="table-page-search-submitButtons">
+              <a-button type="primary" icon="search" @click="searchQuery">查询</a-button>
+              <a-button icon="reload">重置</a-button>
+            </span>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+    <div>
+      <a-table
+          ref="table"
+          size="middle"
+          bordered
+          rowKey="id"
+          :columns="columns"
+          :dataSource="dataSource"
+          :pagination="ipagination"
+          :loading="loading"
+          :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
+          @change="handleTableChange"
+          class="j-table-force-nowrap">
+        <template slot="htmlSlot" slot-scope="text">
+          <div v-html="text"></div>
+        </template>
+        <template slot="imgSlot" slot-scope="text">
+          <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
+          <img v-else :src="getImgView(text)" height="25px" alt=""
+               style="max-width:80px;font-size: 12px;font-style: italic;"/>
+        </template>
+        <template slot="fileSlot" slot-scope="text,record">
+          <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
+          <j-ellipsis @click.native="uploadFile(record.chargeNoticeFileId)" style="color:#219AFF;cursor: pointer"
+                      :value="text" :length="20"/>
+        </template>
+      </a-table>
+    </div>
+  </j-modal>
+</template>
+
+<script>
+import { JeroListMixin } from '@/mixins/JeroListMixin'
+
+export default {
+  name: 'BusinessSelect',
+  mixins: [JeroListMixin],
+  data() {
+    return {
+      title: '选择企业',
+      width: 800,
+      visible: false,
+      confirmLoading: false,
+      url: {
+        list: '',
+        delete: '',
+        deleteBatch: '',
+        exportXlsUrl: '',
+        importExcelUrl: '',
+        exportTemplateUrl: ''
+      },
+      columns: [
+        {
+          title: '序号',
+          dataIndex: '',
+          key: 'rowIndex',
+          width: 60,
+          align: 'center',
+          customRender: function (t, r, index) {
+            return parseInt(index) + 1
+          }
+        }, {
+          title: '企业名称',
+          align: 'center',
+          dataIndex: ''
+        }
+      ]
+    }
+  },
+  methods: {
+    handleOk() {
+
+    },
+    handleCancel() {
+      this.close()
+    },
+    close() {
+      this.visible = false
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import '~@assets/less/common.less';
+</style>

src/components/page/GlobalLayout.vue

@@ -659,7 +659,7 @@ body {
     .ant-form-item {
       display: flex;
       margin-bottom: 24px;
-      margin-right: 0;
+      margin-right: 10px;
 
       .ant-form-item-control-wrapper {
         flex: 1 1;

src/mixins/JeroListMixin.js

@@ -24,7 +24,7 @@ export const JeroListMixin = {
       ipagination:{
         current: 1,
         pageSize: 10,
-        pageSizeOptions: ['2','10', '20', '30'],
+        pageSizeOptions: ['10', '20', '30', '50'],
         showTotal: (total, range) => {
           return range[0] + "-" + range[1] + " 共" + total + "条"
         },

src/views/businessManagement/BusinessManagement.vue

@@ -6,13 +6,12 @@
         <a-row>
           <a-col :xl="6" :lg="7" :md="8" :sm="24">
             <a-form-item label="企业名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
-              <!--              v-model="queryParam.businessName"-->
+              <a-input placeholder="请输入企业名称" v-model="queryParam.businessName"></a-input>
-              <a-input placeholder="请输入企业名称"></a-input>
             </a-form-item>
           </a-col>
           <a-col :xl="6" :lg="7" :md="8" :sm="24">
             <span class="table-page-search-submitButtons">
-              <a-button type="primary" icon="search">查询</a-button>
+              <a-button type="primary" icon="search" @click="searchQuery">查询</a-button>
               <a-button icon="reload">重置</a-button>
             </span>
           </a-col>
@@ -66,18 +65,18 @@
         </span>
       </a-table>
     </div>
-    <business-mangement-modules ref="modalForm"></business-mangement-modules>
+    <business-mangement-module ref="modalForm"></business-mangement-module>
   </a-card>
 </template>
 
 <script>
 import { JeroListMixin } from '@/mixins/JeroListMixin'
 import JEllipsis from '@comp/jero/JEllipsis'
-import BusinessMangementModules from '@views/businessManagement/modules/BusinessMangementModules'
+import BusinessMangementModule from '@views/businessManagement/modules/BusinessMangementModule'
 
 export default {
   name: 'BusinessManagement',
-  components: { JEllipsis, BusinessMangementModules },
+  components: { JEllipsis, BusinessMangementModule },
   mixins: [JeroListMixin],
   data() {
     return {
@@ -144,6 +143,6 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="less">
 @import '~@assets/less/common.less';
 </style>

src/views/businessManagement/ContactManagement.vue

@@ -0,0 +1,162 @@
+<template>
+  <a-card :bordered="false">
+    <!--    查询区域-start -->
+    <div class="table-page-search-wrapper">
+      <a-form layout="inline" @keyup.enter.native="searchQuery">
+        <a-row>
+          <a-col :xl="6" :lg="7" :md="8" :sm="24">
+            <a-form-item label="姓名" :labelCol="labelCol" :wrapperCol="wrapperCol">
+              <a-input placeholder="请输入姓名" v-model="queryParam.contactName"></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :xl="6" :lg="7" :md="8" :sm="24">
+            <a-form-item label="企业名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
+              <a-input placeholder="请输入企业名称" v-model="queryParam.businessName"></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :xl="6" :lg="7" :md="8" :sm="24">
+            <a-form-item label="手机号" :labelCol="labelCol" :wrapperCol="wrapperCol">
+              <a-input placeholder="请输入手机号" v-model="queryParam.phone"></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :xl="6" :lg="7" :md="8" :sm="24">
+            <span class="table-page-search-submitButtons">
+              <a-button type="primary" icon="search" @click="searchQuery">查询</a-button>
+              <a-button icon="reload">重置</a-button>
+            </span>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+    <!--    查询区域-end-->
+
+    <!--    操作按钮区域-->
+    <div class="table-operator">
+      <a-button type="primary" icon="plus" @click="handleAdd">新增</a-button>
+      <a-button type="primary" icon="import">导入</a-button>
+      <a-button type="primary" icon="export">导出</a-button>
+      <a-button type="primary" icon="download">下载模板</a-button>
+      <a-button type="danger" icon="delete">批量删除</a-button>
+    </div>
+    <!--    操作按钮区域-end-->
+
+    <!--    table表格区域-->
+    <div>
+      <a-table
+          ref="table"
+          size="middle"
+          bordered
+          rowKey="id"
+          :columns="columns"
+          :scroll="{x: 1000}"
+          :dataSource="dataSource"
+          :pagination="ipagination"
+          :loading="loading"
+          :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
+          @change="handleTableChange"
+          class="j-table-force-nowrap">
+        <template slot="htmlSlot" slot-scope="text">
+          <div v-html="text"></div>
+        </template>
+        <template slot="imgSlot" slot-scope="text">
+          <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
+          <img v-else :src="getImgView(text)" height="25px" alt=""
+               style="max-width:80px;font-size: 12px;font-style: italic;"/>
+        </template>
+        <template slot="fileSlot" slot-scope="text,record">
+          <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
+          <j-ellipsis @click.native="uploadFile(record.chargeNoticeFileId)" style="color:#219AFF;cursor: pointer"
+                      :value="text" :length="20"/>
+        </template>
+
+        <span slot="action" class="action-span-cell" slot-scope="text, record">
+          <a @click="handleEdit(record)">编辑</a>
+          <a @click="handleDelete(record.id)">删除</a>
+        </span>
+      </a-table>
+    </div>
+    <contact-management-module ref="modalForm"></contact-management-module>
+  </a-card>
+</template>
+
+<script>
+import { JeroListMixin } from '@/mixins/JeroListMixin'
+import ContactManagementModule from '@views/businessManagement/modules/ContactManagementModule'
+
+export default {
+  name: 'ContactManagement',
+  components: { ContactManagementModule },
+  mixins: [JeroListMixin],
+  data() {
+    return {
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 5 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 10 }
+      },
+      url: {
+        list: '',
+        delete: '',
+        deleteBatch: '',
+        exportXlsUrl: '',
+        importExcelUrl: '',
+        exportTemplateUrl: ''
+      },
+      columns: [
+        {
+          title: '序号',
+          dataIndex: '',
+          key: 'rowIndex',
+          width: 60,
+          align: 'center',
+          customRender: function (t, r, index) {
+            return parseInt(index) + 1
+          }
+        }, {
+          title: '姓名',
+          align: 'center',
+          width: 160,
+          dataIndex: ''
+        }, {
+          title: '性别',
+          align: 'center',
+          width: 80,
+          dataIndex: ''
+        }, {
+          title: '职务',
+          align: 'center',
+          width: 160,
+          dataIndex: ''
+        }, {
+          title: '手机号',
+          align: 'center',
+          dataIndex: ''
+        }, {
+          title: '创建时间',
+          align: 'center',
+          dataIndex: ''
+        }, {
+          title: '企业名称',
+          align: 'center',
+          width: 140,
+          dataIndex: ''
+        }, {
+          title: '操作',
+          dataIndex: 'action',
+          align: 'center',
+          fixed: 'right',
+          width: 160,
+          scopedSlots: { customRender: 'action' }
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import '~@assets/less/common.less';
+</style>

src/views/businessManagement/modules/BusinessMangementModule.vue

@@ -36,8 +36,8 @@
             </a-form-item>
           </a-col>
           <a-col :xl="12" :sm="24">
-            <a-form-item label="邮编" :labelCol="labelCol" :wrapperCol="wrapperCol" class="form-item-postcode">
+            <a-form-item label="邮政编码" :labelCol="labelCol" :wrapperCol="wrapperCol" class="form-item-postcode">
-              <a-input placeholder="请输入邮编"
+              <a-input placeholder="请输入邮政编码"
                        v-decorator="['postcode',validatorRules.postcode]"
                        :maxLength='50'
                        @change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
@@ -96,9 +96,10 @@
 <script>
 import { postcode } from '@/utils/validate'
 import pick from 'lodash.pick'
+import { httpAction } from '@api/manage'
 
 export default {
-  name: 'BusinessMangementModules',
+  name: 'BusinessMangementModule',
   data() {
     return {
       title: '操作',
@@ -131,6 +132,10 @@ export default {
         postcode: {
           rules: [{ validator: this.checkPostcode }]
         }
+      },
+      url: {
+        add: '',
+        edit: ''
       }
     }
   },
@@ -155,28 +160,28 @@ export default {
       // 触发表单验证
       this.form.validateFields((err, values) => {
         if (!err) {
-          // let httpurl = ''
+          let httpurl = ''
-          // let method = ''
+          let method = ''
-          // if (!this.model.id) {
+          if (!this.model.id) {
-          //   httpurl += this.url.add
+            httpurl += this.url.add
-          //   method = 'post'
+            method = 'post'
-          // } else {
+          } else {
-          //   httpurl += this.url.edit
+            httpurl += this.url.edit
-          //   method = 'put'
+            method = 'put'
-          // }
+          }
-          // const formData = Object.assign(this.model, values)
+          const formData = Object.assign(this.model, values)
-          // console.log('表单提交数据', formData)
+          console.log('表单提交数据', formData)
-          // httpAction(httpurl, formData, method).then((res) => {
+          httpAction(httpurl, formData, method).then((res) => {
-          //   if (res.success) {
+            if (res.success) {
-          //     that.$message.success(res.message)
+              that.$message.success(res.message)
-          //     that.$emit('ok')
+              that.$emit('ok')
-          //     that.close()
+              that.close()
-          //   } else {
+            } else {
-          //     that.$message.warning(res.message)
+              that.$message.warning(res.message)
-          //   }
+            }
-          // }).finally(() => {
+          }).finally(() => {
-          //   that.confirmLoading = false
+            that.confirmLoading = false
-          // })
+          })
         }
       })
     },

src/views/businessManagement/modules/ContactManagementModule.vue

@@ -0,0 +1,277 @@
+<template>
+  <j-modal
+      :title="title"
+      :width="width"
+      :visible="visible"
+      :confirmLoading="confirmLoading"
+      switchFullscreen
+      @ok="handleOk"
+      @cancel="handleCancel"
+      cancelText="关闭">
+    <a-form :form="form">
+      <a-row>
+        <a-col :xl="12" :sm="24">
+          <a-form-item label="企业名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
+            <div @click="chooseBusiness">
+              <a-select placeholder="请选择企业"
+                        v-decorator="['businessName',validatorRules.businessName]"
+                        :maxLength='50'
+                        @change="e => {e.target.value = (e.target.value + '').trim()}"></a-select>
+            </div>
+          </a-form-item>
+        </a-col>
+        <a-col :xl="12" :sm="24">
+          <a-form-item label="姓名" :labelCol="labelCol" :wrapperCol="wrapperCol">
+            <a-input placeholder="请输入姓名"
+                     v-decorator="['name',validatorRules.name]"
+                     :maxLength='50'
+                     @change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row>
+        <a-col :xl="12" :sm="24">
+          <a-form-item label="性别" :labelCol="labelCol" :wrapperCol="wrapperCol">
+            <a-select placeholder="请选择性别"
+                      v-decorator="['sex']"
+                      :maxLength='50'
+                      @change="e => {e.target.value = (e.target.value + '').trim()}"></a-select>
+          </a-form-item>
+        </a-col>
+        <a-col :xl="12" :sm="24">
+          <a-form-item label="职务" :labelCol="labelCol" :wrapperCol="wrapperCol">
+            <a-input placeholder="请输入职务"
+                     :maxLength='50'
+                     @change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row>
+        <a-col :xl="12" :sm="24">
+          <a-form-item label="手机号" :labelCol="labelCol" :wrapperCol="wrapperCol">
+            <a-input placeholder="请输入手机号"
+                     v-decorator="['phone',validatorRules.phone]"
+                     :maxLength='50'
+                     @change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
+          </a-form-item>
+        </a-col>
+        <a-col :xl="12" :sm="24">
+          <a-form-item label="邮箱" :labelCol="labelCol" :wrapperCol="wrapperCol">
+            <a-input placeholder="请输入邮箱"
+                     v-decorator="['mail',validatorRules.mail]"
+                     :maxLength='50'
+                     @change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row>
+        <a-col :xl="12" :sm="24">
+          <a-form-item label="通讯地址" :labelCol="labelCol" :wrapperCol="wrapperCol">
+            <a-input placeholder="请输入通讯地址"
+                     :maxLength='50'
+                     v-decorator="['mailingAddress',validatorRules.mailingAddress]"
+                     @change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
+          </a-form-item>
+        </a-col>
+        <a-col :xl="12" :sm="24">
+          <a-form-item label="邮政编码" :labelCol="labelCol" :wrapperCol="wrapperCol" class="form-item-postcode">
+            <a-input placeholder="请输入邮政编码"
+                     :maxLength='50'
+                     v-decorator="['postcode',validatorRules.postcode]"
+                     @change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
+            <a class="search-postcode" href="https://www.youbianku.com" target="_blank">查询邮编</a>
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row>
+        <a-col>
+          <a-form-item label="备注" :labelCol="remarksLabelCol" :wrapperCol="remarksWrapperCol">
+            <a-textarea
+                placeholder="请输入备注"
+                :auto-size="{ minRows: 3, maxRows: 6 }"
+                :maxLength='200'
+                @change="e => {e.target.value = (e.target.value + '').trim()}"/>
+          </a-form-item>
+        </a-col>
+      </a-row>
+    </a-form>
+    <business-select ref="businessSelect"></business-select>
+  </j-modal>
+</template>
+
+<script>
+import pick from 'lodash.pick'
+import { httpAction } from '@api/manage'
+import BusinessSelect from '@comp/BusinessModules/BusinessSelect'
+import { postcode, phoneReg, isEmail } from '@/utils/validate'
+
+export default {
+  name: 'ContactManagementModule',
+  components: { BusinessSelect },
+  data() {
+    return {
+      title: '操作',
+      width: 800,
+      visible: false,
+      confirmLoading: false,
+      form: this.$form.createForm(this),
+      model: {},
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 6 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 18 }
+      },
+      remarksLabelCol: {
+        xs: { span: 24 },
+        sm: { span: 3 }
+      },
+      remarksWrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 21 }
+      },
+      url: {
+        add: '',
+        edit: ''
+      },
+      validatorRules: {
+        businessName: {
+          rules: [{ required: true, message: '请选择企业' }],
+          validateTrigger: 'blur'
+        },
+        name: {
+          rules: [{ required: true, message: '请输入姓名' }],
+          validateTrigger: 'blur'
+        },
+        phone: {
+          rules: [{ required: true, validator: this.checkPhone }],
+          validateTrigger: 'blur'
+        },
+        mail: {
+          rules: [{ required: true, validator: this.checkMail }],
+          validateTrigger: 'blur'
+        },
+        postcode: {
+          rules: [{ required: true, validator: this.checkPostcode }],
+          validateTrigger: 'blur'
+        },
+        mailingAddress: {
+          rules: [{ required: true, message: '请输入通讯地址' }],
+          validateTrigger: 'blur'
+        }
+      }
+    }
+  },
+  methods: {
+    add() {
+      this.edit({})
+    },
+    edit(record) {
+      this.form.resetFields()
+      this.model = Object.assign({}, record)
+      this.visible = true
+      this.$nextTick(() => {
+        this.form.setFieldsValue(pick(this.model, 'approvalDocumentNumber', 'dateYear', 'chargeNoticeName', 'chargeNoticeFileId'))
+      })
+    },
+    close() {
+      this.$emit('close')
+      this.visible = false
+    },
+    handleOk() {
+      const that = this
+      // 触发表单验证
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          let httpurl = ''
+          let method = ''
+          if (!this.model.id) {
+            httpurl += this.url.add
+            method = 'post'
+          } else {
+            httpurl += this.url.edit
+            method = 'put'
+          }
+          const formData = Object.assign(this.model, values)
+          console.log('表单提交数据', formData)
+          httpAction(httpurl, formData, method).then((res) => {
+            if (res.success) {
+              that.$message.success(res.message)
+              that.$emit('ok')
+              that.close()
+            } else {
+              that.$message.warning(res.message)
+            }
+          }).finally(() => {
+            that.confirmLoading = false
+          })
+        }
+      })
+    },
+    handleCancel() {
+      this.close()
+    },
+    /**
+     * 打开选择企业的对话框
+     */
+    chooseBusiness() {
+      this.$refs.businessSelect.visible = true
+    },
+    /**
+     * 手机号校验
+     * @param rules
+     * @param value
+     * @param callback
+     */
+    checkPhone(rules, value, callback) {
+      if (phoneReg(value)) {
+        callback()
+      } else {
+        callback('请填写正确手机号')
+      }
+    },
+    /**
+     * 邮箱校验
+     * @param rules
+     * @param value
+     * @param callback
+     */
+    checkMail(rules, value, callback) {
+      if (isEmail(value)) {
+        callback()
+      } else {
+        callback('请填写正确邮箱')
+      }
+    },
+    /**
+     * 邮政编码校验
+     * @param rules
+     * @param value
+     * @param callback
+     */
+    checkPostcode(rules, value, callback) {
+      if (postcode(value)) {
+        callback()
+      } else {
+        callback('请输入正确格式的邮编')
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.form-item-postcode {
+  margin-bottom: 0;
+}
+
+.search-postcode {
+  color: #0090ff;
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+</style>