修改客户管理样式

src/views/houseSelfCollect/customerManagement.vue

@@ -4,61 +4,32 @@
     <BaseHeaderLayout :leftSpan="12">
       <template slot="left">
         <ws-button type="primary" @click="getCustomer()">获取客户</ws-button>
-        <ws-button type="primary" @click="createCustomer(1)"
-          >创建新客户</ws-button
-        >
+        <ws-button type="primary" @click="createCustomer(1)">创建新客户</ws-button>
       </template>
       <template slot="right">
-        <ws-input
-          v-model="searchKeyWord"
-          placeholder="可按姓名、手机号查找"
-          clearable
-          maxlength="500"
-          type="input"
-        ></ws-input>
-        <ws-button class="find" type="primary" @click="find()"
-          ><img
-            width="16"
-            height="16"
-            style="
+        <ws-input v-model="searchKeyWord" placeholder="可按姓名、手机号查找" clearable maxlength="500" type="input"></ws-input>
+        <ws-button class="find" type="primary" @click="find()"><img width="16" height="16" style="
               vertical-align: text-top;
               position: relative;
               top: 0px;
               left: -8px;
-            "
-            src="../../../public/img/sousuo.png"
-            alt=""
-        /></ws-button>
+            " src="../../../public/img/sousuo.png" alt="" /></ws-button>
       </template>
     </BaseHeaderLayout>
     <div class="seach">
       <div class="search-right">
         <!-- <ws-button @click="getCustomer()">获取客户</ws-button> -->
-        <el-dialog
-          title="客户扫码"
-          :visible.sync="customerDialogVisible"
-          width="30%"
-        >
+        <el-dialog title="客户扫码" :visible.sync="customerDialogVisible" width="30%">
           <div id="qrcode"></div>
         </el-dialog>
         <!-- <ws-button @click="createCustomer()">创建新客户</ws-button> -->
-        <el-dialog
-          title="创建新客户"
-          :visible.sync="creatNewCustomerDialogVisible"
-          width="50%"
-        >
+        <el-dialog title="创建新客户" :visible.sync="creatNewCustomerDialogVisible" width="50%">
           <customerManagementAdd></customerManagementAdd>
         </el-dialog>
       </div>
     </div>
 
-    <el-table
-      :data="customertList"
-      style="width: 100%; margin-top: 20px"
-      ref="customertList"
-      border
-      height="780"
-    >
+    <el-table :data="customertList" style="width: 100%; margin-top: 20px" ref="customertList" border height="780">
       <el-table-column type="index" label="序号">
         <template scope="scope">
           <span v-if="scope.$index < 9">0{{ scope.$index + 1 }}</span>
@@ -70,211 +41,177 @@
       <el-table-column prop="bankCard" label="银行卡号"></el-table-column>
       <el-table-column prop="bankDeposit" label="开户行"></el-table-column>
       <el-table-column prop="payeeName" label="收款人"></el-table-column>
-      <el-table-column
-        prop="authenticationStatus"
-        label="状态"
-      ></el-table-column>
-      <el-table-column prop="address" label="操作">
+      <el-table-column prop="authenticationStatus" label="状态"></el-table-column>
+      <el-table-column prop="address" label="操作" width="300">
         <template slot-scope="scope">
-          <img
-            width="16"
-            height="16"
-            style="vertical-align: text-top; margin: 0 6px"
-            src="../../../public/img/chakan.png"
-            @click="createCustomer(scope.row, 2)"
-            v-hasPermission="
-              `contractManagement.buyContract.buyContractInfo.view`
-            "
-            alt
-          />
-          <img
-            width="17"
-            height="16"
-            style="vertical-align: text-top; margin: 0 6px"
-            src="../../../public/img/bianji.png"
-            @click="createCustomer(scope.row, 3)"
-            v-hasPermission="
-              `contractManagement.buyContract.buyContractInfo.edit`
-            "
-            alt
-          />
-          <img
-            width="16"
-            height="17"
-            style="
-              vertical-align: text-top;
-              position: relative;
-              top: -1px;
-              margin: 0 6px;
-            "
-            src="../../../public/img/shanchu.png"
-            v-hasPermission="
-              `contractManagement.buyContract.buyContractInfo.delete`
-            "
-            @click="handleDelete(scope.row)"
-            alt
-          />
+          <el-button size="mini" @click="createCustomer(scope.row, 2)">查看</el-button>
+          <el-button size="mini" @click="createCustomer(scope.row, 3)">编辑</el-button>
+          <el-button size="mini" type="danger" @click="handleDelete(scope.row, '')">删除</el-button>
         </template>
       </el-table-column>
     </el-table>
     <div style="text-align: center">
-      <el-pagination
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-        :current-page="currentPage"
-        :page-size="deptCircularPage.pageSize"
-        layout="total, sizes, prev, pager, next, jumper"
-        :total="deptBudgetTotal"
-      >
+      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
+        :page-size="deptCircularPage.pageSize" layout="total, sizes, prev, pager, next, jumper"
+        :total="deptBudgetTotal">
       </el-pagination>
     </div>
   </div>
 </template>
 <script>
-import {
-  getCustomerManage,
-  getCustomerDelete,
-} from '@/model/houseSelfCollect/index'
-import QRCode from 'qrcodejs2'
-import customerManagementAdd from './customerManagementAdd.vue'
-export default {
-  components: {
-    customerManagementAdd,
-  },
-  watch: {},
-  data() {
-    return {
-      searchKeyWord: '',
-      customerDialogVisible: false,
-      creatNewCustomerDialogVisible: false,
-      customertList: [],
-      currentPage: 1,
-      pageSize: 10,
-      deptBudgetTotal: 0,
-      deptCircularPage: {},
-    }
-  },
-  activated() {
-    this.getList()
-  },
-  methods: {
-    find() {
-      this.getList()
-    },
-    //获取客户
-    getCustomer() {
-      this.customerDialogVisible = true
-      this.$nextTick(function () {
-        document.getElementById('qrcode').innerHTML = ''
-        let qrcode = new QRCode('qrcode', {
-          width: 150,
-          height: 150,
-          text: 'https://www.baidu.com',
-          colorDark: '#109dff',
-          colorLight: '#d9d9d9',
-        })
-      })
-    },
-    //创建客户
-    createCustomer(row, num) {
-      let type = num
-      this.$router.push({
-        name: 'customerManagementAdd',
-        query: { types: type, id: row.id },
-      })
+  import {
+    getCustomerManage,
+    getCustomerDelete,
+  } from '@/model/houseSelfCollect/index'
+  import QRCode from 'qrcodejs2'
+  import customerManagementAdd from './customerManagementAdd.vue'
+  export default {
+    components: {
+      customerManagementAdd,
     },
-    handleSizeChange(val) {
-      console.log(`每页 ${val} 条`)
-      this.pageSize = val
-      this.getList()
+    watch: {},
+    data() {
+      return {
+        searchKeyWord: '',
+        customerDialogVisible: false,
+        creatNewCustomerDialogVisible: false,
+        customertList: [],
+        currentPage: 1,
+        pageSize: 10,
+        deptBudgetTotal: 0,
+        deptCircularPage: {},
+      }
     },
-    handleCurrentChange(val) {
-      this.currentPage = val
-      console.log(`当前页: ${val}`)
+    activated() {
       this.getList()
     },
-
-    handleEdit(row) {
-      this.$router.push({
-        name: 'customerManagementEdit',
-        query: {
-          id: row.id,
-        },
-      })
-    },
-    handleDelete(row) {
-      this.$confirm('确定删除该客户？', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning',
-      })
-        .then(() => {
-          getCustomerDelete({
-            compId: sessionStorage.getItem('ws-pf_compId'),
-            id: row.id,
+    methods: {
+      find() {
+        this.getList()
+      },
+      //获取客户
+      getCustomer() {
+        this.customerDialogVisible = true
+        this.$nextTick(function() {
+          document.getElementById('qrcode').innerHTML = ''
+          let qrcode = new QRCode('qrcode', {
+            width: 150,
+            height: 150,
+            text: 'https://www.baidu.com',
+            colorDark: '#109dff',
+            colorLight: '#d9d9d9',
           })
-            .toPromise()
-            .then((response) => {
-              this.$message.success('删除成功')
-              this.getList()
-            })
         })
-        .catch(() => {
-          return false
+      },
+      //创建客户
+      createCustomer(row, num) {
+        let type = num
+        this.$router.push({
+          name: 'customerManagementAdd',
+          query: {
+            types: type,
+            id: row.id
+          },
         })
-    },
-    getList() {
-      getCustomerManage({
-        compId: sessionStorage.getItem('ws-pf_compId'),
-        currentPage: this.currentPage,
-        pageSize: this.pageSize,
-        searchKeyWord: this.searchKeyWord,
-        warehouseName:this.warehouseName
-      })
-        .toPromise()
-        .then((response) => {
-          this.customertList = response.records
-          this.deptBudgetTotal = response.total
+      },
+      handleSizeChange(val) {
+        console.log(`每页 ${val} 条`)
+        this.pageSize = val
+        this.getList()
+      },
+      handleCurrentChange(val) {
+        this.currentPage = val
+        console.log(`当前页: ${val}`)
+        this.getList()
+      },
+
+      handleEdit(row) {
+        this.$router.push({
+          name: 'customerManagementEdit',
+          query: {
+            id: row.id,
+          },
         })
+      },
+      handleDelete(row) {
+        this.$confirm('确定删除该客户？', '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning',
+          })
+          .then(() => {
+            getCustomerDelete({
+                compId: sessionStorage.getItem('ws-pf_compId'),
+                id: row.id,
+              })
+              .toPromise()
+              .then((response) => {
+                this.$message.success('删除成功')
+                this.getList()
+              })
+          })
+          .catch(() => {
+            return false
+          })
+      },
+      getList() {
+        getCustomerManage({
+            compId: sessionStorage.getItem('ws-pf_compId'),
+            currentPage: this.currentPage,
+            pageSize: this.pageSize,
+            searchKeyWord: this.searchKeyWord,
+            warehouseName: this.warehouseName
+          })
+          .toPromise()
+          .then((response) => {
+            this.customertList = response.records
+            this.deptBudgetTotal = response.total
+          })
+      },
     },
-  },
-}
+  }
 </script>
 <style lang="scss" scoped>
-.seach {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+  .seach {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
 
-  .find {
-    width: 32px;
+    .find {
+      width: 32px;
+    }
+
+    .search-left {
+      display: flex;
+    }
   }
 
-  .search-left {
-    display: flex;
+  .ws-info-table {
+    border: none;
+  }
+
+  .ws-info-table .el-form-item {
+    width: 50%;
+    border: none;
+  }
+
+  /deep/.ws-info-table .el-form-item .el-form-item__label {
+    width: 30%;
+    text-align: center;
+    background: #ffffff;
+    color: #8890b1;
+  }
+
+  /deep/.ws-info-table .el-form-item .el-form-item__content {
+    border: none;
+  }
+
+  /deep/.el-table .el-table__header .cell,
+  .el-table .el-table__body .cell {
+    text-align: center;
+  }
+
+  /deep/.el-table--enable-row-transition .el-table__body td {
+    text-align: center;
   }
-}
-.ws-info-table {
-  border: none;
-}
-.ws-info-table .el-form-item {
-  width: 50%;
-  border: none;
-}
-/deep/.ws-info-table .el-form-item .el-form-item__label {
-  width: 30%;
-  text-align: center;
-  background: #ffffff;
-  color: #8890b1;
-}
-/deep/.ws-info-table .el-form-item .el-form-item__content {
-  border: none;
-}
-/deep/.el-table .el-table__header .cell,
-.el-table .el-table__body .cell {
-  text-align: center;
-}
-/deep/.el-table--enable-row-transition .el-table__body td {
-  text-align: center;
-}
 </style>

src/views/houseSelfCollect/customerManagementAdd.vue

@@ -6,252 +6,84 @@
         <h2 class="bg-left titleup">{{ trader }}粮商</h2>
       </el-col>
       <el-col :span="12" class="bg-right">
-        <el-button class="bg-bottom" type="primary" size="small" @click="cancel"
-          ><img
-            width="6"
-            height="10"
-            style="vertical-align: bottom; margin-right: 3px"
-            src="../../../public/img/lujing.png"
-            alt=""
-          />返回</el-button
-        >
+        <el-button class="bg-bottom" type="primary" size="small" @click="cancel"><img width="6" height="10"
+            style="vertical-align: bottom; margin-right: 3px" src="../../../public/img/lujing.png" alt="" />返回
+        </el-button>
       </el-col>
     </el-row>
     <div class="unload">
       <ws-form ref="customerList" :model="customerList" label-width="120px">
         <ws-info-table>
           <div style="display: flex; width: 100%; text-align: center">
-            <div v-if="switchType == 1" style="width: 50%; margin: 0 auto">
-              上传身份证正面
-              <el-upload
-                action="https://www.zthymaoyi.com/upload/admin"
-                :limit="1"
-                list-type="picture-card"
-                :on-preview="handlePictureCardPreview"
-                :on-remove="handleRemove"
-                :auto-upload="true"
-                :on-success="upLoadSuccess1"
-                :disabled="disabled"
-              >
-                <i class="el-icon-plus"></i>
+            <div style="width: 330px; margin: 0 auto">
+              <div class="unload-img">上传身份证正面</div>
+              <el-upload class="avatar-uploader avatar-uploader1" action="https://www.zthymaoyi.com/upload/admin"
+                :show-file-list="false" :on-success="upLoadSuccess1" :disabled="disabled">
+                <img v-if="imageUrl1" :src="imageUrl1" class="avatar">
+                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
               </el-upload>
             </div>
-            <div
-              style="width: 50%; margin: 0 auto"
-              :class="identityUp"
-              v-if="switchType == 2 || switchType == 3"
-            >
-              上传身份证正面
-              <el-upload
-                action="https://www.zthymaoyi.com/upload/admin"
-                :limit="1"
-                list-type="picture-card"
-                :on-preview="handlePictureCardPreview"
-                :on-remove="
-                  (file) => {
-                    handleRemove(file, 1)
-                  }
-                "
-                :auto-upload="true"
-                :on-success="upLoadSuccess1"
-                :disabled="disabled"
-                :file-list="identityImgUp"
-              >
-                <i class="el-icon-plus"></i>
+            <div style="width: 330px; margin: 0 auto">
+
+              <div class="unload-img">上传身份证反面</div>
+              <el-upload class="avatar-uploader avatar-uploader2" action="https://www.zthymaoyi.com/upload/admin"
+                :show-file-list="false" :on-success="upLoadSuccess2" :disabled="disabled">
+                <img v-if="imageUrl2" :src="imageUrl2" class="avatar">
+                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
               </el-upload>
             </div>
-            <div v-if="switchType == 1" style="width: 50%; margin: 0 auto">
-              上传身份证反面
-              <el-upload
-                action="https://www.zthymaoyi.com/upload/admin"
-                :limit="1"
-                list-type="picture-card"
-                :on-preview="handlePictureCardPreview"
-                :on-remove="handleRemove"
-                :auto-upload="true"
-                :on-success="upLoadSuccess2"
-                :disabled="disabled"
-              >
-                <i class="el-icon-plus"></i>
+          </div>
+
+          <div style="display: flex; width: 100%; text-align: center">
+            <div style="width:330px; margin: 0 auto">
+              <div class="unload-img">上传银行卡正面</div>
+              <el-upload class="avatar-uploader avatar-uploader3" action="https://www.zthymaoyi.com/upload/admin"
+                :show-file-list="false" :on-success="bankSuccess1" :disabled="disabled">
+                <img v-if="imageUrl3" :src="imageUrl3" class="avatar">
+                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
               </el-upload>
             </div>
-            <div
-              style="width: 50%; margin: 0 auto"
-              v-if="switchType == 2 || switchType == 3"
-              :class="identityLow"
-            >
-              上传身份证反面
-              <el-upload
-                action="https://www.zthymaoyi.com/upload/admin"
-                :limit="1"
-                list-type="picture-card"
-                :on-preview="handlePictureCardPreview"
-                :on-remove="
-                  (file) => {
-                    handleRemove(file, 2)
-                  }
-                "
-                :auto-upload="true"
-                :on-success="upLoadSuccess2"
-                :disabled="disabled"
-                :file-list="identityImgLow"
-              >
-                <i class="el-icon-plus"></i>
+            <div style="width:330px; margin: 0 auto">
+              <div class="unload-img">上传银行卡反面</div>
+              <el-upload class="avatar-uploader avatar-uploader4" action="https://www.zthymaoyi.com/upload/admin"
+                :show-file-list="false" :on-success="bankSuccess2" :disabled="disabled">
+                <img v-if="imageUrl4" :src="imageUrl4" class="avatar">
+                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
               </el-upload>
             </div>
           </div>
 
-          <ws-form-item label="姓名" span="1" prop="customerName">
-            <ws-input
-              v-model="customerList.customerName"
-              placeholder="请输入姓名"
-              maxlength="100"
-              size="small"
-              :disabled="disabled"
-            />
+          <ws-form-item label="姓名" span="1" prop="customerName" label-width="80px">
+            <ws-input v-model="customerList.customerName" placeholder="请输入姓名" maxlength="100" size="small"
+              :disabled="disabled" />
           </ws-form-item>
           <ws-form-item label="身份证号" span="1" prop="customerNumberCard">
-            <ws-input
-              v-model="customerList.customerNumberCard"
-              placeholder="请输入身份证号"
-              maxlength="100"
-              size="small"
-              :disabled="disabled"
-            />
+            <ws-input v-model="customerList.customerNumberCard" placeholder="请输入身份证号" maxlength="100" size="small"
+              :disabled="disabled" />
           </ws-form-item>
-          <div style="display: flex; width: 100%; text-align: center">
-            <div style="width: 50%; margin: 0 auto" v-if="switchType == 1">
-              上传银行卡正面
-              <el-upload
-                action="https://www.zthymaoyi.com/upload/admin"
-                :limit="1"
-                list-type="picture-card"
-                :on-preview="handlePictureCardPreview"
-                :on-remove="handleRemove1"
-                :auto-upload="true"
-                :on-success="bankSuccess1"
-                :disabled="disabled"
-              >
-                <i class="el-icon-plus"></i>
-              </el-upload>
-            </div>
-            <div
-              style="width: 50%; margin: 0 auto"
-              v-if="switchType == 2 || switchType == 3"
-              :class="bankUps"
-            >
-              上传银行卡正面
-              <el-upload
-                action="https://www.zthymaoyi.com/upload/admin"
-                :limit="1"
-                list-type="picture-card"
-                :on-preview="handlePictureCardPreview"
-                :on-remove="
-                  (file) => {
-                    handleRemove1(file, 1)
-                  }
-                "
-                :auto-upload="true"
-                :on-success="bankSuccess1"
-                :disabled="disabled"
-                :file-list="bankImgUp"
-              >
-                <i class="el-icon-plus"></i>
-              </el-upload>
-            </div>
-            <div style="width: 50%; margin: 0 auto" v-if="switchType == 1">
-              上传银行卡反面
-              <el-upload
-                action="https://www.zthymaoyi.com/upload/admin"
-                :limit="1"
-                list-type="picture-card"
-                :on-preview="handlePictureCardPreview"
-                :on-remove="handleRemove1"
-                :auto-upload="true"
-                :on-success="bankSuccess2"
-                :disabled="disabled"
-              >
-                <i class="el-icon-plus"></i>
-              </el-upload>
-            </div>
-            <div
-              style="width: 50%; margin: 0 auto"
-              v-if="switchType == 2 || switchType == 3"
-              :class="bankLows"
-            >
-              上传银行卡反面
-              <el-upload
-                action="https://www.zthymaoyi.com/upload/admin"
-                :limit="1"
-                list-type="picture-card"
-                :on-preview="handlePictureCardPreview"
-                :on-remove="
-                  (file) => {
-                    handleRemove1(file, 2)
-                  }
-                "
-                :auto-upload="true"
-                :on-success="bankSuccess2"
-                :disabled="disabled"
-                :file-list="bankImgLow"
-              >
-                <i class="el-icon-plus"></i>
-              </el-upload>
-            </div>
-          </div>
           <ws-form-item label="银行卡号" span="1" prop="bankCard">
-            <ws-input
-              v-model="customerList.bankCard"
-              placeholder="请输入银行卡号"
-              maxlength="100"
-              size="small"
-              :disabled="disabled"
-            />
+            <ws-input v-model="customerList.bankCard" placeholder="请输入银行卡号" maxlength="100" size="small"
+              :disabled="disabled" />
           </ws-form-item>
           <ws-form-item label="开户行" span="1" prop="bankDeposit">
-            <ws-input
-              v-model="customerList.bankDeposit"
-              placeholder="请输入开户行"
-              maxlength="100"
-              size="small"
-              :disabled="disabled"
-            />
+            <ws-input v-model="customerList.bankDeposit" placeholder="请输入开户行" maxlength="100" size="small"
+              :disabled="disabled" />
           </ws-form-item>
           <ws-form-item label="开户支行" span="1" prop="bankDepositBranch">
-            <ws-input
-              v-model="customerList.bankDepositBranch"
-              placeholder="请输入开户支行"
-              maxlength="100"
-              size="small"
-              :disabled="disabled"
-            />
+            <ws-input v-model="customerList.bankDepositBranch" placeholder="请输入开户支行" maxlength="100" size="small"
+              :disabled="disabled" />
           </ws-form-item>
           <ws-form-item label="收款人姓名" span="1" prop="payeeName">
-            <ws-input
-              v-model="customerList.payeeName"
-              placeholder="请输入收款人姓名"
-              maxlength="100"
-              size="small"
-              :disabled="disabled"
-            />
+            <ws-input v-model="customerList.payeeName" placeholder="请输入收款人姓名" maxlength="100" size="small"
+              :disabled="disabled" />
           </ws-form-item>
           <ws-form-item label="收款人身份证号" span="1" prop="payeeNumberCard">
-            <ws-input
-              v-model="customerList.payeeNumberCard"
-              placeholder="请输入收款人身份证号"
-              maxlength="100"
-              size="small"
-              :disabled="disabled"
-            />
+            <ws-input v-model="customerList.payeeNumberCard" placeholder="请输入收款人身份证号" maxlength="100" size="small"
+              :disabled="disabled" />
           </ws-form-item>
           <ws-form-item label="手机号" span="1" prop="customerPhone">
-            <ws-input
-              v-model="customerList.customerPhone"
-              placeholder="请输入手机号"
-              maxlength="100"
-              size="small"
-              :disabled="disabled"
-            />
+            <ws-input v-model="customerList.customerPhone" placeholder="请输入手机号" maxlength="100" size="small"
+              :disabled="disabled" />
           </ws-form-item>
           <!-- 验证码 -->
           <!-- <el-form-item prop="veriCode" :label="$t('login.register08')">
@@ -274,389 +106,469 @@
                 >{{ $t('login.retry') }}({{ count }})s</ws-button
               >
             </div>
-          </div> 
+          </div>
         </el-form-item> -->
           <ws-form-item label="联系地址" span="1" prop="compAddress">
-            <ws-input
-              v-model="customerList.compAddress"
-              placeholder="请输入联系地址"
-              maxlength="100"
-              size="small"
-              :disabled="disabled"
-            />
+            <ws-input v-model="customerList.compAddress" placeholder="请输入联系地址" maxlength="100" size="small"
+              :disabled="disabled" />
           </ws-form-item>
         </ws-info-table>
         <div class="but">
-          <el-button
-            type="primary"
-            @click="commit"
-            v-if="switchType == 1 || switchType == 3"
-            >提交</el-button
-          >
-          <el-button type="primary" @click="cancel" v-if="switchType == 2"
-            >关闭</el-button
-          >
+          <el-button type="primary" @click="commit" v-if="switchType == 1 || switchType == 3">提交</el-button>
+          <el-button type="primary" @click="cancel" v-if="switchType == 2">关闭</el-button>
         </div>
       </ws-form>
     </div>
   </div>
 </template>
 <script>
-import {
-  customerAdd,
-  customerIdentity,
-  getCustomerLook,
-  CustomerEdit,
-  getIdentity,
-  getBank
-} from '@/model/houseSelfCollect/index'
-
-export default {
-  components: {},
-  watch: {},
-  data() {
-    return {
-      dialogImageUrl: '',
-      dialogVisible: false,
-      customerList: {
-        customerName:"",
-        customerNumberCard:"",
-        bankCard:"",
-        bankDeposit:"",
-      },
-      disabledFlag: true,
-      disabled: false,
-      identity: [],
-      bank: [],
-      trader: '新增',
-      switchType: '',
-      identityImgUp: [
-        {
-          url: '',
+  import {
+    customerAdd,
+    customerIdentity,
+    getCustomerLook,
+    CustomerEdit,
+    getIdentity,
+    getBank
+  } from '@/model/houseSelfCollect/index'
+
+  export default {
+    components: {},
+    watch: {},
+    data() {
+      return {
+        imageUrl1: "",
+        imageUrl2: "",
+        imageUrl3: "",
+        imageUrl4: "",
+        dialogImageUrl: '',
+        dialogVisible: false,
+        customerList: {
+          customerName: "",
+          customerNumberCard: "",
+          bankCard: "",
+          bankDeposit: "",
         },
-      ],
-      identityImgLow: [
-        {
+        disabledFlag: true,
+        disabled: false,
+        identity: [],
+        bank: [],
+        trader: '新增',
+        switchType: '',
+        identityImgUp: [{
           url: '',
-        },
-      ],
-      bankImgUp: [
-        {
+        }, ],
+        identityImgLow: [{
           url: '',
-        },
-      ],
-      bankImgLow: [
-        {
+        }, ],
+        bankImgUp: [{
           url: '',
-        },
-      ],
-      identityUp: 'up',
-      identityLow: 'low',
-      bankUps: 'bankUp',
-      bankLows: 'bankLow',
-    }
-  },
-  activated() {
-    this.switchType = this.$route.query.types
-    if (this.$route.query.types == null) {
-      this.switchType = 1
-    }
-    let id = this.$route.query.id
-    if (this.switchType == 2) {
-      this.disabled = true
-      this.trader = '查看'
-      this.getList(id)
-    } else if (this.switchType == 3) {
-      this.disabled = false
-      this.trader = '编辑'
-      this.getList(id)
-    }
-  },
-  methods: {
-    handleRemove(file, index) {
-      if (index == 1) {
-        this.identityUp = ''
-      } else if (index == 2) {
-        this.identityLow = ''
+        }, ],
+        bankImgLow: [{
+          url: '',
+        }, ],
+        identityUp: 'up',
+        identityLow: 'low',
+        bankUps: 'bankUp',
+        bankLows: 'bankLow',
+      }
+    },
+    activated() {
+      this.switchType = this.$route.query.types
+      if (this.$route.query.types == null) {
+        this.switchType = 1
+        this.imageUrl1=""
+        this.imageUrl2=""
+        this.imageUrl3=""
+        this.imageUrl4=""
+        this.customerList={}
+      }
+      let id = this.$route.query.id
+      if (this.switchType == 2) {
+        this.disabled = true
+        this.trader = '查看'
+        this.getList(id)
+      } else if (this.switchType == 3) {
+        this.disabled = false
+        this.trader = '编辑'
+        this.getList(id)
       }
+    },
+    methods: {
+      handleRemove(file, index) {
+        if (index == 1) {
+          this.identityUp = ''
+        } else if (index == 2) {
+          this.identityLow = ''
+        }
 
-      if (this.switchType == 3) {
-        for (let i = 0; i < this.identity.length; i++) {
-          if (file.url == this.identity[i]) {
-            this.identity.splice(i, 1, '')
+        if (this.switchType == 3) {
+          for (let i = 0; i < this.identity.length; i++) {
+            if (file.url == this.identity[i]) {
+              this.identity.splice(i, 1, '')
+            }
           }
-        }
-      } else if (this.switchType == 1) {
-        for (let i = 0; i < this.identity.length; i++) {
-          if (file.response.url == this.identity[i]) {
-            this.identity.splice(i, 1, '')
+        } else if (this.switchType == 1) {
+          for (let i = 0; i < this.identity.length; i++) {
+            if (file.response.url == this.identity[i]) {
+              this.identity.splice(i, 1, '')
+            }
           }
         }
-      }
-    },
-    handleRemove1(file, index) {
-      if (index == 1) {
-        this.bankUps = ''
-      } else if (index == 2) {
-        this.bankLows = ''
-      }
-      if (this.switchType == 3) {
-        for (let i = 0; i < this.bank.length; i++) {
-          if (file.url == this.bank[i]) {
-            this.bank.splice(i, 1, '')
-          }
+      },
+      handleRemove1(file, index) {
+        if (index == 1) {
+          this.bankUps = ''
+        } else if (index == 2) {
+          this.bankLows = ''
         }
-      } else if (this.switchType == 1) {
-        for (let i = 0; i < this.bank.length; i++) {
-          if (file.response.url == this.bank[i]) {
-            this.bank.splice(i, 1, '')
+        if (this.switchType == 3) {
+          for (let i = 0; i < this.bank.length; i++) {
+            if (file.url == this.bank[i]) {
+              this.bank.splice(i, 1, '')
+            }
+          }
+        } else if (this.switchType == 1) {
+          for (let i = 0; i < this.bank.length; i++) {
+            if (file.response.url == this.bank[i]) {
+              this.bank.splice(i, 1, '')
+            }
           }
         }
-      }
-    },
-    handlePictureCardPreview(file) {
-      this.dialogImageUrl = file.url
-      this.dialogVisible = true
-    },
-    // 发送验证码
-    toSend() {
-      if (this.registerForm.linkmanPhone) {
-        if (validUserCellPhone(this.registerForm.linkmanPhone)) {
-          this.disabledFlag = false
-          clearInterval(this.timer)
-          this.timer = null
-          const TIME_COUNT = 60
-          if (!this.timer) {
-            this.count = TIME_COUNT
-            this.verification = false
-            let data = {
-              mobilePhone: this.registerForm.linkmanPhone,
+      },
+      handlePictureCardPreview(file) {
+        this.dialogImageUrl = file.url
+        this.dialogVisible = true
+      },
+      // 发送验证码
+      toSend() {
+        if (this.registerForm.linkmanPhone) {
+          if (validUserCellPhone(this.registerForm.linkmanPhone)) {
+            this.disabledFlag = false
+            clearInterval(this.timer)
+            this.timer = null
+            const TIME_COUNT = 60
+            if (!this.timer) {
+              this.count = TIME_COUNT
+              this.verification = false
+              let data = {
+                mobilePhone: this.registerForm.linkmanPhone,
+              }
+              sendRegisterCode(data)
+                .toPromise()
+                .then((res) => {
+                  this.timer = setInterval(() => {
+                    if (this.count > 0 && this.count <= TIME_COUNT) {
+                      this.count--
+                    } else {
+                      this.verification = true
+                      clearInterval(this.timer)
+                      this.timer = null
+                    }
+                  }, 1000)
+                })
+                .catch((err) => {
+                  this.verification = true
+                })
             }
-            sendRegisterCode(data)
-              .toPromise()
-              .then((res) => {
-                this.timer = setInterval(() => {
-                  if (this.count > 0 && this.count <= TIME_COUNT) {
-                    this.count--
-                  } else {
-                    this.verification = true
-                    clearInterval(this.timer)
-                    this.timer = null
-                  }
-                }, 1000)
-              })
-              .catch((err) => {
-                this.verification = true
-              })
+          } else {
+            EventBus.$emit('error', this.$t('login.registerVerif09'))
           }
         } else {
-          EventBus.$emit('error', this.$t('login.registerVerif09'))
+          EventBus.$emit('error', this.$t('login.registerVerif05'))
         }
-      } else {
-        EventBus.$emit('error', this.$t('login.registerVerif05'))
-      }
-    },
-    cancel() {
-      this.$router.push({ path: 'customerManagement' })
-    },
-    upLoadSuccess1(e) {
-      this.identityUp = 'up'
-      this.identity[0] = e.url
-      getIdentity({personImg:e.url})
-        .toPromise()
-        .then((response) => {
-          if(response.recPerson != "" ){
-             this.customerList.customerName = response.recPerson
-          }
-          if(response.recPersonNo != ""){
-             this.customerList.customerNumberCard = response.recPersonNo
-          }
+      },
+      cancel() {
+        this.$router.push({
+          path: 'customerManagement'
         })
-    },
-    upLoadSuccess2(e) {
-      this.identityLow = 'low'
-      this.identity[1] = e.url
-      getIdentity({personImg:e.url})
-        .toPromise()
-        .then((response) => {
-          if(response.recPerson != "" ){
-             this.customerList.customerName = response.recPerson
-          }
-          if(response.recPersonNo != ""){
-             this.customerList.customerNumberCard = response.recPersonNo
+      },
+      upLoadSuccess1(e) {
+        debugger
+        this.identityUp = 'up'
+        this.identity[0] = e.url
+        this.imageUrl1 = e.url
+        getIdentity({
+            personImg: e.url
+          })
+          .toPromise()
+          .then((response) => {
+            if (response.recPerson != "") {
+              this.customerList.customerName = response.recPerson
+            }
+            if (response.recPersonNo != "") {
+              this.customerList.customerNumberCard = response.recPersonNo
+            }
+          })
+      },
+      upLoadSuccess2(e) {
+        this.identityLow = 'low'
+        this.identity[1] = e.url
+        this.imageUrl2 = e.url
+        getIdentity({
+            personImg: e.url
+          })
+          .toPromise()
+          .then((response) => {
+            if (response.recPerson != "") {
+              this.customerList.customerName = response.recPerson
+            }
+            if (response.recPersonNo != "") {
+              this.customerList.customerNumberCard = response.recPersonNo
 
-          }
-        })
-    },
-    bankSuccess1(e) {
-      this.bankUps = 'bankUp'
-      this.bank[0] = e.url
-        getBank({bankImg:e.url})
-        .toPromise()
-        .then((response) => {
-          if(response.bankNo  ){
-             this.customerList.bankCard = response.bankNo
-          }
-          if(response.bankName ){
-             this.customerList.bankDeposit = response.bankName
-          }
-        })
-    },
-    bankSuccess2(e) {
-      this.bankLows = 'bankLow'
-      this.bank[1] = e.url
-       getBank({bankImg:e.url})
-        .toPromise()
-        .then((response) => {
-          if(response.bankNo  ){
-             this.customerList.bankCard = response.bankNo
-          }
-          if(response.bankName ){
-             this.customerList.bankDeposit = response.bankName
-          }
-        })
-    },
-    commit() {
-      this.customerList.compId = sessionStorage.getItem('ws-pf_compId')
-      this.customerList.cardAddressUrl = this.identity.toString()
-      this.customerList.payeeAddressUrl = this.bank.toString()
-      this.customerList.customerTypeFlag = 1
-      this.customerList.customerType = '个人'
-      if (this.switchType == 1) {
-        this.$confirm('确定提交客户信息？', '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning',
-        })
-          .then(() => {
-            customerAdd(this.customerList)
-              .toPromise()
-              .then((response) => {
-                // this.customerList.id = response
-                // customerIdentity(this.customerList)
-                //   .toPromise()
-                //   .then((response) => {
-                //     this.$message.success('添加成功')
-                //     this.$router.push({ path: 'customerManagement' })
-                //   })
-                this.$router.go(-1)
-              })
+            }
           })
-          .catch(() => {
-            return false
+      },
+      bankSuccess1(e) {
+        this.bankUps = 'bankUp'
+        this.bank[0] = e.url
+        this.imageUrl3 = e.url
+        getBank({
+            bankImg: e.url
           })
-      } else if (this.switchType == 3) {
-        this.$confirm('确定修改客户信息？', '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning',
-        })
-          .then(() => {
-            CustomerEdit(this.customerList)
-              .toPromise()
-              .then((response) => {
-                this.$message.success('修改成功')
-                this.$router.push({ path: 'customerManagement' })
-              })
+          .toPromise()
+          .then((response) => {
+            if (response.bankNo) {
+              this.customerList.bankCard = response.bankNo
+            }
+            if (response.bankName) {
+              this.customerList.bankDeposit = response.bankName
+            }
           })
-          .catch(() => {
-            return false
+      },
+      bankSuccess2(e) {
+        this.bankLows = 'bankLow'
+        this.bank[1] = e.url
+        this.imageUrl4 = e.url
+        getBank({
+            bankImg: e.url
           })
-      }
-    },
-    getList(ids) {
-      getCustomerLook({ id: ids,authenticationStatusKey: 7 })
-        .toPromise()
-        .then((response) => {
-          this.customerList = response
-          this.identity = this.customerList.cardAddressUrl.split(',')
-          this.identityImgUp[0].url = this.identity[0]
-          this.identityImgLow[0].url = this.identity[1]
-          this.bank = this.customerList.payeeAddressUrl.split(',')
-          this.bankImgUp[0].url = this.bank[0]
-          this.bankImgLow[0].url = this.bank[1]
-        })
+          .toPromise()
+          .then((response) => {
+            if (response.bankNo) {
+              this.customerList.bankCard = response.bankNo
+            }
+            if (response.bankName) {
+              this.customerList.bankDeposit = response.bankName
+            }
+          })
+      },
+      commit() {
+        this.customerList.compId = sessionStorage.getItem('ws-pf_compId')
+        this.customerList.cardAddressUrl = this.identity.toString()
+        this.customerList.payeeAddressUrl = this.bank.toString()
+        this.customerList.customerTypeFlag = 1
+        this.customerList.customerType = '个人'
+        if (this.switchType == 1) {
+          this.$confirm('确定提交客户信息？', '提示', {
+              confirmButtonText: '确定',
+              cancelButtonText: '取消',
+              type: 'warning',
+            })
+            .then(() => {
+              customerAdd(this.customerList)
+                .toPromise()
+                .then((response) => {
+                  // this.customerList.id = response
+                  // customerIdentity(this.customerList)
+                  //   .toPromise()
+                  //   .then((response) => {
+                  //     this.$message.success('添加成功')
+                  //     this.$router.push({ path: 'customerManagement' })
+                  //   })
+                  this.$router.go(-1)
+                })
+            })
+            .catch(() => {
+              return false
+            })
+        } else if (this.switchType == 3) {
+          this.$confirm('确定修改客户信息？', '提示', {
+              confirmButtonText: '确定',
+              cancelButtonText: '取消',
+              type: 'warning',
+            })
+            .then(() => {
+              CustomerEdit(this.customerList)
+                .toPromise()
+                .then((response) => {
+                  this.$message.success('修改成功')
+                  this.$router.push({
+                    path: 'customerManagement'
+                  })
+                })
+            })
+            .catch(() => {
+              return false
+            })
+        }
+      },
+      getList(ids) {
+        getCustomerLook({
+            id: ids,
+            authenticationStatusKey: 7
+          })
+          .toPromise()
+          .then((response) => {
+            this.customerList = response
+            this.identity = this.customerList.cardAddressUrl.split(',')
+            // this.identityImgUp[0].url = this.identity[0]
+            // this.identityImgLow[0].url = this.identity[1]
+            this.bank = this.customerList.payeeAddressUrl.split(',')
+            // this.bankImgUp[0].url = this.bank[0]
+            // this.bankImgLow[0].url = this.bank[1]
+            this.imageUrl1=this.identity[0]
+                this.imageUrl2=this.identity[1]
+                    this.imageUrl3=this.bank[0]
+                        this.imageUrl4=this.bank[1]
+          })
+      },
     },
-  },
-}
+  }
 </script>
 <style lang="scss" scoped>
-.center {
-  background: #f6f7fc;
+  .avatar-uploader1 {
+    background: url('../../../public/img/identityup.png');
+  }
+
+  .avatar-uploader2 {
+    background: url('../../../public/img/identitylow.png');
+  }
+
+  .avatar-uploader3 {
+    background: url('../../../public/img/bankup.png');
+  }
+
+  .avatar-uploader4 {
+    background: url('../../../public/img/banklow.png');
+  }
+/deep/.el-upload{
+  height: 200px;
 }
+  .avatar-uploader {
+    background-size: 100% 100%;
+  }
+
+  .avatar-uploader .el-upload {
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .avatar-uploader .el-upload:hover {
+    border-color: #409EFF;
+  }
+
+  .avatar-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+    width: 178px;
+    height: 178px;
+    line-height: 178px;
+    text-align: center;
+  }
 
-.seach {
-  display: flex;
-  align-items: center;
+  .avatar {
+      width: 330px;
+      height: 103%;
+    display: block;
+  }
 
-  .find {
-    width: 32px;
+  .center {
+    background: #f6f7fc;
   }
 
-  .search-left {
+  .seach {
     display: flex;
+    align-items: center;
+
+    .find {
+      width: 32px;
+    }
+
+    .search-left {
+      display: flex;
+    }
   }
-}
 
-.ws-info-table {
-  border: none;
-  width: 50%;
-  margin: 0 auto;
-}
-.ws-info-table .el-form-item {
-  width: 50%;
-  border: none;
-}
-/deep/.ws-info-table .el-form-item .el-form-item__label {
-  width: 30%;
-  text-align: center;
-  background: #ffffff;
-  font-size: 14px;
-  color: #8890b1;
-}
-/deep/.ws-info-table .el-form-item .el-form-item__content {
-  border: none;
-}
-.bg-left {
-  padding-left: 30px;
-}
-.bg-right {
-  padding-right: 10px;
-  text-align: right;
-}
-.bg-bottom {
-  margin: 15px 0px;
-}
-.titleup {
-  position: relative;
-}
-.titleup::before {
-  content: '';
-  display: inline-block;
-  width: 5px;
-  height: 30px;
-  background: #5473e8;
-  position: absolute;
-  left: 0;
-}
-.unload {
-  background: #ffffff;
-  padding-top: 20px;
-}
-.but {
-  text-align: center;
-  margin: 20px auto;
-}
-/deep/.up .el-upload--picture-card {
-  display: none;
-}
-/deep/.low .el-upload--picture-card {
-  display: none;
-}
-/deep/.bankUp .el-upload--picture-card {
-  display: none;
-}
-/deep/.bankLow .el-upload--picture-card {
-  display: none;
-}
+  .ws-info-table {
+    border: none;
+    width: 80%;
+    margin: 0 auto;
+  }
+
+  .ws-info-table .el-form-item {
+    width: 50%;
+    border: none;
+  }
+
+  /deep/.ws-info-table .el-form-item .el-form-item__label {
+    width: 30%;
+    text-align: center;
+    background: #ffffff;
+    font-size: 14px;
+    color: #8890b1;
+  }
+
+  /deep/.ws-info-table .el-form-item .el-form-item__content {
+    border: none;
+  }
+
+  .bg-left {
+    padding-left: 30px;
+  }
+
+  .bg-right {
+    padding-right: 10px;
+    text-align: right;
+  }
+
+  .bg-bottom {
+    margin: 15px 0px;
+  }
+
+  .titleup {
+    position: relative;
+  }
+
+  .titleup::before {
+    content: '';
+    display: inline-block;
+    width: 5px;
+    height: 30px;
+    background: #5473e8;
+    position: absolute;
+    left: 0;
+  }
+
+  .unload {
+    background: #ffffff;
+    padding-top: 20px;
+  }
+
+  .but {
+    text-align: center;
+    margin: 20px auto;
+  }
+
+  /deep/.up .el-upload--picture-card {
+    display: none;
+  }
+
+  /deep/.low .el-upload--picture-card {
+    display: none;
+  }
+
+  /deep/.bankUp .el-upload--picture-card {
+    display: none;
+  }
+
+  /deep/.bankLow .el-upload--picture-card {
+    display: none;
+  }
+
+  .unload-img {
+    margin: 20px 0;
+  }
 </style>

src/views/houseSelfCollect/inspectionManagement.vue

@@ -243,13 +243,11 @@ export default {
 
     },
     getList() {
-     
-
       getinspectList({
         compId: sessionStorage.getItem('ws-pf_compId'),
         currentPage: this.currentPage,
         pageSize: this.pageSize,
-        searchKeyWord: this.searchKeyWord,
+        searchKeyWord: (this.searchKeyWord).toUpperCase(),
         warehouseName: this.warehouseName,
       })
         .toPromise()