客户选择组件添加筛选条件、花名册可以图片上传可以上传文件问题解决

src/components/workClientInfoSelect/WorkClientInfoSelectDialog.vue

@@ -9,11 +9,50 @@
      class="clientDialog"
     :visible.sync="visible">
     <el-container style="height: 500px">
-      <el-header style="text-align: left; font-size: 12px;height:30px">
-        <el-form size="small" :inline="true" ref="searchForm" :model="searchForm" @keyup.enter.native="refreshList()" @submit.native.prevent>
+      <el-header style="text-align: left; font-size: 12px; height: auto; line-height: 30px">
+        <el-form size="small" height="30px" :inline="true" ref="searchForm" :model="searchForm" @keyup.enter.native="refreshList()" @submit.native.prevent>
             <el-form-item prop="name">
               <el-input size="small" v-model="searchForm.name" placeholder="客户姓名" clearable></el-input>
             </el-form-item>
+            <el-form-item prop="uscCode">
+              <el-input size="small" v-model="searchForm.uscCode" placeholder="统一社会信用代码" clearable></el-input>
+            </el-form-item>
+            <el-form-item prop="areaId">
+              <SelectTree
+                ref="area"
+                :props="{
+                        value: 'id',             // ID字段名
+                        label: 'name',         // 显示名称
+                        children: 'children'    // 子级字段名
+                      }"
+                placeholder="请选择所在区域"
+                size="small"
+                url="/sys/area/treeData"
+                :value="searchForm.areaId"
+                :clearable="true"
+                :accordion="true"
+                @getValue="(value) => {searchForm.areaId=value}"/>
+            </el-form-item>
+            <el-form-item prop="companyType">
+              <el-select size="small" v-model="searchForm.companyType" placeholder="请选择客户性质"  style="width: 100%;">
+                <el-option
+                  v-for="item in $dictUtils.getDictList('customer_nature')"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item prop="companyIndustry">
+              <el-select size="small" v-model="searchForm.companyIndustry" placeholder="请选择所在行业"  style="width: 100%;">
+                <el-option
+                  v-for="item in $dictUtils.getDictList('industry')"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
 
             <el-form-item>
               <el-button  type="primary" @click="refreshList()" size="small" icon="el-icon-search">查询</el-button>
@@ -22,8 +61,9 @@
           </el-form>
       </el-header>
 
-      <el-main>
+      <el-main style="padding-top: 0px">
         <el-table
+          :stripe="true"
           :data="dataList"
           v-loading="loading"
           size="small"
@@ -31,8 +71,8 @@
           ref="clientTable"
           @selection-change="selectionChangeHandle"
           @sort-change="sortChangeHandle"
-          height="calc(100% - 40px)"
-          style="width: 100%;">
+          height="calc(100% - 80px)"
+          max-height="calc(100%)">
           <el-table-column
             header-align="center"
             align="center"
@@ -99,11 +139,16 @@
 </template>
 
 <script>
+  import SelectTree from '@/components/treeSelect/treeSelect.vue'
   export default {
     data () {
       return {
         searchForm: {
-          name: ''
+          name: '',
+          areaId: '',
+          uscCode: '',
+          companyType: '',
+          companyIndustry: ''
         },
         filterText: '',
         dataListAllSelections: [],   // 所有选中的数据包含跨页数据
@@ -125,6 +170,9 @@
         default: () => { return [] }
       }
     },
+    components: {
+      SelectTree
+    },
     watch: {
     },
     methods: {

src/utils/common.js

@@ -1,3 +1,4 @@
+import { Message } from 'element-ui'
  /* eslint-disable */
 // @ts-nocheck
 const STORAGE_USER_KEY = 'STORAGE_USER_KEY'
@@ -211,6 +212,26 @@ export default {
       sex = '1'
     }
     return {age, sex, birth}
+  },
+  /**
+   * 判断一个文件的类型是否是图片
+   * 目前用于给'el-upload'图片上传的':before-upload'属性使用,不是图片的话会上传失败并发出提示
+   * @param file
+   * @returns {boolean}
+   */
+  isPic (file) {
+    let isJPG = true
+    if (this.isEmpty(file.type)) {
+      isJPG = false
+      Message.error('上传图片只能是 JPG/PNG/GIF/BMP 格式')
+      return isJPG
+    }
+    if (file.type !== 'image/jpeg' && file.type !== 'image/jpg' && file.type !== 'image/png' && file.type !== 'image/gif' && file.type !== 'image/bmp') {
+      isJPG = false
+      Message.error('上传图片只能是 JPG/PNG/GIF/BMP 格式')
+      return isJPG
+    }
+    return isJPG
   }
 
 }

src/views/common/RosterSelectDialog.vue

@@ -55,6 +55,7 @@
 
       <el-main>
         <el-table
+          stripe="true"
           :data="dataList"
           v-loading="loading"
           size="small"

src/views/modules/roster/RosterForm.vue

@@ -29,6 +29,7 @@
                   :on-success="(response, file, fileList) => {
                     return handleAvatarSuccess(response, file, fileList, null, 'head')
                   }"
+                  :before-upload="checkIsPic"
                 >
                   <img style="width: 150px; height: 150px; line-height: 150px" v-if="inputForm.headshotLsUrl" :src="inputForm.headshotLsUrl"/>
                   <i v-else class="el-icon-plus avatar-uploader-icon"></i>
@@ -146,6 +147,7 @@
                 :on-success="(response, file, fileList) => {
                     return handleAvatarSuccess(response, file, fileList, null, 'front')
                   }"
+                  :before-upload="checkIsPic"
                 >
 <!--                :before-upload="beforeAvatarUpload"-->
                   <img v-if="inputForm.certificatesFrontLsUrl"
@@ -172,6 +174,7 @@
                 :on-success="(response, file, fileList) => {
                     return handleAvatarSuccess(response, file, fileList, null, 'back')
                   }"
+                  :before-upload="checkIsPic"
                 >
                   <img v-if="inputForm.certificatesBackLsUrl"
                        style="width: 150px; height: 150px; line-height: 150px"
@@ -593,6 +596,7 @@
                     :on-success="(response, file, fileList) => {
                     return handleAvatarSuccess(response, file, fileList, index_bank, 'bank')
                   }"
+                    :before-upload="checkIsPic"
                   >
                     <img v-if="inputForm.rosterBankCardsDTOList[index_bank].payrollCardPicLsUrl"
                          style="width: 150px; height: 150px; line-height: 150px"
@@ -712,6 +716,7 @@
                     :on-success="(response, file, fileList) => {
                     return handleAvatarSuccess(response, file, fileList, index_educate, 'educate_first')
                   }"
+                    :before-upload="checkIsPic"
                   >
                     <img v-if="inputForm.rosterEducateDTOList[index_educate].educationCertFirstLsUrl"
                          style="width: 150px; height: 150px; line-height: 150px"
@@ -737,6 +742,7 @@
                     :on-success="(response, file, fileList) => {
                     return handleAvatarSuccess(response, file, fileList, index_educate, 'educate_second')
                   }"
+                    :before-upload="checkIsPic"
                   >
                     <img v-if="inputForm.rosterEducateDTOList[index_educate].educationCertSecondLsUrl"
                          style="width: 150px; height: 150px; line-height: 150px"
@@ -887,6 +893,7 @@
                     :on-success="(response, file, fileList) => {
                     return handleAvatarSuccess(response, file, fileList, index_family, 'family')
                   }"
+                    :before-upload="checkIsPic"
                   >
                     <img v-if="inputForm.rosterFamilyDTOList[index_family].birthCertificateLsUrl"
                          style="width: 150px; height: 150px; line-height: 150px"
@@ -1609,6 +1616,9 @@
         } else {
           callback()
         }
+      },
+      checkIsPic (file) {
+        return this.commonJS.isPic(file)
       }
     }
   }