新增客户资金管理模块

src/api/V2/customerFundManagement/index.js

@@ -0,0 +1,18 @@
+
+//客户列表查看
+export const API_GET_CUSTOMERINFO_LOOK = '/customerInfo/selectCustomerInfo'
+
+//查看客户信息
+export const API_GET_LOOK_CUSTOMERINFO = '/customerInfo/getCustomerInfo'
+
+// 添加客户
+export const API_POST_ADDCUSTOMERINFO = '/customerInfo/api/addCustomerInfo'
+
+// 编辑
+export const API_POST_EDITCUSTOMERINFO = '/customerInfo/api/modifyCustomerInfo'
+
+// 删除
+export const API_POST_DELCUSTOMERINFO = '/customerInfo/deleteCustomerInfo'
+
+//识别银行卡
+export const API_GET_CUSTOMER_GETBANK = '/driverViewInfo/bankShibie'

src/lang/zh.js

@@ -524,6 +524,10 @@ export default {
     warehouseManagementPutOutLook: '查看',
     //客户管理
     customerList: '客户管理',
+    //客户管理
+    customerFundList: '客户资金管理',
+    customerFundEdit:'客户管理编辑',
+    customerFundAdd:'客户管理添加',
     //采购管理
     purchasingManagement: '采购业务管理',
     procurementPlanList: '采购计划',

src/model/customerFundManagement/index.js

@@ -0,0 +1,35 @@
+import { errorCatcher, errorHandle, filter } from 'base-core-lib'
+import { appRx } from '../defalutConfig/indexRx'
+import {
+    API_GET_CUSTOMERINFO_LOOK,
+    API_POST_ADDCUSTOMERINFO,
+    API_POST_EDITCUSTOMERINFO,
+    API_POST_DELCUSTOMERINFO,
+    API_GET_CUSTOMER_GETBANK,
+    API_GET_LOOK_CUSTOMERINFO
+} from '@/api/V2/customerFundManagement'
+// import { app } from 'electron'
+
+// 客户管理列表
+export const getCustomerList = appRx.get(API_GET_CUSTOMERINFO_LOOK, errorCatcher, errorHandle, filter)
+
+// 查看客户信息
+export const lookCustomer = appRx.get(API_GET_LOOK_CUSTOMERINFO, errorCatcher, errorHandle, filter)
+
+// 添加客户
+export const addCustomer = appRx.post(API_POST_ADDCUSTOMERINFO, errorCatcher, errorHandle, filter)
+
+// 编辑
+export const editCustomerInfo = appRx.post(API_POST_EDITCUSTOMERINFO, errorCatcher, errorHandle, filter)
+
+// 删除客户
+export const delCustomerInfo = appRx.post(API_POST_DELCUSTOMERINFO, errorCatcher, errorHandle, filter)
+
+//银行卡识别
+export const getBank = appRx.get(API_GET_CUSTOMER_GETBANK, errorCatcher, errorHandle, filter)
+
+
+
+
+
+

src/views/customerFundManagement/component/router/router.js

@@ -0,0 +1,63 @@
+import Layout from '@/layout/index';
+
+const customerFundManagementRouter = {
+    path: '/customerFundManagement',
+    component: Layout,
+    redirect: { name: 'customerFundList' },
+    name: 'customerFundList',
+    alwaysShow: true, // will always show the root menu
+    meta: {
+      title: 'customerFundList',
+    //   module: 'customerManagement.customer.customerInfo',
+      icon: '-kehuguanli'
+    },
+    children: [
+        //客户资金管理列表
+      {
+        path: 'customerFundList',
+        component: () =>
+          import(/* webpackChunkName: "applDetail" */ '@/views/customerFundManagement/customerFundList'),
+        name: 'customerFundList',
+        meta: {
+          title: 'customerFundList',
+          shortcutEntrance: 'customerFundList',
+        //   module: 'customerManagement.customerFundManagement.customerInfo',
+          permissicon: [],
+          keepAlive: true
+        },
+         hidden: true
+      },
+          //客户资金管理编辑
+    {
+        path: 'customerFundEdit',
+        component: () =>
+          import(/* webpackChunkName: "applDetail" */ '@/views/customerFundManagement/customerFundEdit'),
+        name: 'customerFundEdit',
+        meta: {
+          title: 'customerFundEdit',
+          shortcutEntrance: 'customerFundManagement',
+        //   module: 'customerFundManagement.buyContract.buyContractInfo.edit',
+          permissicon: [],
+          keepAlive: true
+        },
+        hidden: true
+      },
+      //客户资金管理添加
+      {
+        path: 'customerFundAdd',
+        component: () =>
+          import(/* webpackChunkName: "applDetail" */ '@/views/customerFundManagement/customerFundAdd'),
+        name: 'customerFundAdd',
+        meta: {
+          title: 'customerFundAdd',
+          shortcutEntrance: 'customerFundManagement',
+        //   module: 'customerFundManagement.buyContract.buyContractInfo.add',
+          permissicon: [],
+          keepAlive: true
+          // module: 'procurement.sparepart.applDetail'
+        },
+        hidden: true
+      },
+  ],
+};
+export default customerFundManagementRouter;  

src/views/customerFundManagement/customerFundAdd.vue

@@ -0,0 +1,575 @@
+<!--客户管理添加-->
+<template>
+  <div class="center">
+    <el-row>
+      <el-col :span="12">
+        <h2 class="bg-left titleup">创建客户</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-col>
+    </el-row>
+    <div class="unload">
+      <ws-form ref="customerList" :model="customerList" label-width="120px">
+        <ws-info-table>
+          <!--合同类型-->
+          <ws-form-item label="客户类型" span="1" class="readonly">
+            <el-radio v-model="customerList.customerType" label="企业客户"
+              >企业客户</el-radio
+            >
+            <el-radio v-model="customerList.customerType" label="个人客户"
+              >个人客户</el-radio
+            >
+          </ws-form-item>
+          <ws-form-item
+            label="公司名称"
+            span="1"
+            prop="compName"
+            label-width="80px"
+            v-if="customerList.customerType == '企业客户'"
+          >
+            <ws-input
+              v-model="customerList.compName"
+              placeholder="请输入公司名称"
+              maxlength="15"
+              size="small"
+              :disabled="disabled"
+            />
+          </ws-form-item>
+          <ws-form-item
+            label="客户姓名"
+            span="1"
+            prop="customerName"
+            label-width="80px"
+            v-if="customerList.customerType == '个人客户'"
+          >
+            <ws-input
+              v-model="customerList.customerName"
+              placeholder="请输入客户姓名"
+              maxlength="15"
+              size="small"
+              :disabled="disabled"
+            />
+          </ws-form-item>
+          <ws-form-item label="联系电话" span="1" prop="customerPhone">
+            <ws-input
+              type="number"
+              @mousewheel.native.prevent
+              v-model="customerList.customerPhone"
+              placeholder="请输入联系电话"
+              maxlength="11"
+              size="small"
+              :disabled="disabled"
+            />
+          </ws-form-item>
+          <ws-form-item label="定金" span="1" prop="totalDeposit">
+            <ws-input
+              type="number"
+              @mousewheel.native.prevent
+              v-model="customerList.totalDeposit"
+              placeholder="请输入定金"
+              maxlength="11"
+              size="small"
+              :disabled="disabled"
+            />
+          </ws-form-item>
+          <ws-form-item label="预付金" span="1" prop="advancePayment">
+            <ws-input
+              type="number"
+              @mousewheel.native.prevent
+              v-model="customerList.advancePayment"
+              placeholder="请输入预付金"
+              maxlength="11"
+              size="small"
+              :disabled="disabled"
+            />
+          </ws-form-item>
+          <ws-form-item label="保证金" span="1" prop="securityDeposit">
+            <ws-input
+              type="number"
+              @mousewheel.native.prevent
+              v-model="customerList.securityDeposit"
+              placeholder="请输入保证金"
+              maxlength="11"
+              size="small"
+              :disabled="disabled"
+            />
+          </ws-form-item>
+          <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: 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="bankCard">
+            <ws-input
+              type="number"
+              @mousewheel.native.prevent
+              v-model="customerList.bankCard"
+              placeholder="请输入银行卡号"
+              maxlength="19"
+              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-form-item>
+          <ws-form-item label="开户支行" span="1" prop="bankDepositBranch">
+            <ws-input
+              v-if="bankInput"
+              v-model="customerList.bankDepositBranch"
+              placeholder="请输入开户支行"
+              maxlength="100"
+              size="small"
+              :disabled="disabled"
+            />
+            <ws-select
+              v-else
+              v-model="customerList.bankDepositBranch"
+              placeholder="请输入开户支行"
+              :disabled="disabled"
+            >
+              <ws-option
+                v-for="item in bankList"
+                :key="item"
+                :label="item"
+                :value="item"
+              />
+            </ws-select>
+            <el-button
+              type="primary"
+              @click="bankInputChange"
+              v-if="switchType != 2"
+              >{{ bankText }}</el-button
+            >
+          </ws-form-item>
+          <ws-form-item label="收款人姓名" span="1" prop="payeeName">
+            <ws-input
+              v-model="customerList.payeeName"
+              placeholder="请输入收款人姓名"
+              maxlength="15"
+              size="small"
+              :disabled="disabled"
+            />
+          </ws-form-item>
+        </ws-info-table>
+        <div class="but">
+          <el-button type="primary" @click="commit">提交</el-button>
+        </div>
+      </ws-form>
+    </div>
+  </div>
+</template>
+<script>
+import {
+  addCustomer,
+  getBank,
+} from '@/model/customerFundManagement/index'
+
+export default {
+  components: {},
+  watch: {},
+  data() {
+    return {
+      imageUrl1: '',
+      imageUrl2: '',
+      imageUrl3: '',
+      imageUrl4: '',
+      dialogImageUrl: '',
+      dialogVisible: false,
+      customerList: {
+        customerName: '',
+        customerNumberCard: '',
+        bankCard: '',
+        bankDeposit: '',
+      },
+      disabledFlag: true,
+      disabled: false,
+      identity: [],
+      bank: [],
+      trader: '新增',
+      switchType: '',
+      identityImgUp: [
+        {
+          url: '',
+        },
+      ],
+      identityImgLow: [
+        {
+          url: '',
+        },
+      ],
+      bankImgUp: [
+        {
+          url: '',
+        },
+      ],
+      bankImgLow: [
+        {
+          url: '',
+        },
+      ],
+      identityUp: 'up',
+      identityLow: 'low',
+      bankUps: 'bankUp',
+      bankLows: 'bankLow',
+      sendDisabled: false,
+      bankList: [],
+      bankInput: false,
+      bankText: '手动填写',
+    }
+  },
+  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 = {}
+    }
+  },
+  methods: {
+    bankInputChange() {
+      this.bankInput = !this.bankInput
+      if (this.bankInput) {
+        this.bankText = '自动识别'
+      } else {
+        this.bankText = '手动填写'
+      }
+    },
+    cancel() {
+      this.customerList = {}
+      this.$router.push({
+        path: 'customerFundList',
+      })
+    },
+    bankSuccess1(e) {
+      this.bankUps = 'bankUp'
+      this.bank[0] = e.url
+      this.imageUrl3 = e.url
+      getBank({
+        bankImg: e.url,
+      })
+        .toPromise()
+        .then((response) => {
+          if (response.bankNameZhihang.length > 0) {
+            this.bankList = response.bankNameZhihang
+          }
+          if (response.bankNo) {
+            this.$set(this.customerList, 'bankCard', response.bankNo)
+          }
+          if (response.bankName) {
+            this.$set(this.customerList, 'bankDeposit', response.bankName)
+          }
+        })
+    },
+    bankSuccess2(e) {
+      this.bankLows = 'bankLow'
+      this.bank[1] = e.url
+      this.imageUrl4 = e.url
+      getBank({
+        bankImg: e.url,
+      })
+        .toPromise()
+        .then((response) => {
+          if (response.bankNameZhihang) {
+            this.bankList = response.bankNameZhihang
+          }
+          if (response.bankNo) {
+            this.$set(this.customerList, 'bankCard', response.bankNo)
+          }
+          if (response.bankName) {
+            this.$set(this.customerList, 'bankDeposit', response.bankName)
+          }
+        })
+    },
+    commit() {
+      if (!this.imageUrl3) {
+        this.$message({
+          message: '请上传银行卡正面',
+          type: 'warning',
+        })
+        return
+      }
+      if (
+        !this.customerList.customerName &&
+        this.customerList.customerType == '个人客户'
+      ) {
+        this.$message({
+          message: '请输入客户姓名',
+          type: 'warning',
+        })
+        return
+      }
+      if (
+        !this.customerList.compName &&
+        this.customerList.customerType == '企业客户'
+      ) {
+        this.$message({
+          message: '请输入公司名称',
+          type: 'warning',
+        })
+        return
+      }
+      if (!this.customerList.bankCard) {
+        this.$message({
+          message: '请输入输入银行卡号',
+          type: 'warning',
+        })
+        return
+      }
+      if (!this.customerList.bankDeposit) {
+        this.$message({
+          message: '请输入开户行',
+          type: 'warning',
+        })
+        return
+      }
+      if (!this.customerList.bankDepositBranch) {
+        this.$message({
+          message: '请输入开户支行',
+          type: 'warning',
+        })
+        return
+      }
+      if (!this.customerList.customerPhone) {
+        this.$message({
+          message: '请输入手机号',
+          type: 'warning',
+        })
+        return
+      }
+      if (this.customerList.customerPhone.length != 11) {
+        this.$message({
+          message: '输入的手机号有误，请重新输入',
+          type: 'warning',
+        })
+        return
+      }
+      this.customerList.compId = sessionStorage.getItem('ws-pf_compId')
+
+      this.$confirm('确定提交客户信息？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      })
+        .then(() => {
+          this.customerList.cardAddressUrl = this.identity.toString()
+          this.customerList.payeeAddressUrl = this.bank.toString()
+          // this.customerList.customerTypeFlag = this.customerTypeFlag
+          // this.customerList.customerType = this.customerType
+          addCustomer(this.customerList)
+            .toPromise()
+            .then((response) => {
+              this.$message.success('添加成功')
+              this.customerList = {}
+              this.$router.go(-1)
+            })
+        })
+        .catch(() => {
+          return false
+        })
+    },
+  },
+}
+</script>
+<style lang="scss" scoped>
+.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;
+}
+
+.avatar {
+  width: 330px;
+  height: 103%;
+  display: block;
+}
+
+.center {
+  background: #f6f7fc;
+}
+
+.seach {
+  display: flex;
+  align-items: center;
+
+  .find {
+    width: 32px;
+  }
+
+  .search-left {
+    display: flex;
+  }
+}
+
+.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;
+}
+
+.veriCode {
+  margin: 0 9px;
+}
+.jiaoYan {
+  display: flex;
+  width: 50%;
+  padding: 0 9px;
+}
+/deep/.jiaoYan .el-input__inner {
+  width: 100%;
+}
+</style>

src/views/customerFundManagement/customerFundEdit.vue

@@ -0,0 +1,594 @@
+<!--客户管理编辑-->
+<template>
+  <div class="center">
+    <el-row>
+      <el-col :span="12">
+        <h2 class="bg-left titleup">编辑客户信息</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-col>
+    </el-row>
+    <div class="unload">
+      <ws-form ref="customerList" :model="customerList" label-width="120px">
+        <ws-info-table>
+          <!--合同类型-->
+          <ws-form-item label="客户类型" span="1" class="readonly">
+            <el-radio v-model="customerList.customerType" label="企业客户"
+              >企业客户</el-radio
+            >
+            <el-radio v-model="customerList.customerType" label="个人客户"
+              >个人客户</el-radio
+            >
+          </ws-form-item>
+          <ws-form-item
+            label="公司名称"
+            span="1"
+            prop="compName"
+            label-width="80px"
+            v-if="customerList.customerType == '企业客户'"
+          >
+            <ws-input
+              v-model="customerList.compName"
+              placeholder="请输入公司名称"
+              maxlength="15"
+              size="small"
+              :disabled="disabled"
+            />
+          </ws-form-item>
+          <ws-form-item
+            label="客户姓名"
+            span="1"
+            prop="customerName"
+            label-width="80px"
+            v-if="customerList.customerType == '个人客户'"
+          >
+            <ws-input
+              v-model="customerList.customerName"
+              placeholder="请输入客户姓名"
+              maxlength="15"
+              size="small"
+              :disabled="disabled"
+            />
+          </ws-form-item>
+          <ws-form-item label="联系电话" span="1" prop="customerPhone">
+            <ws-input
+              type="number"
+              @mousewheel.native.prevent
+              v-model="customerList.customerPhone"
+              placeholder="请输入联系电话"
+              maxlength="11"
+              size="small"
+              :disabled="disabled"
+            />
+          </ws-form-item>
+          <ws-form-item label="定金" span="1" prop="totalDeposit">
+            <ws-input
+              type="number"
+              @mousewheel.native.prevent
+              v-model="customerList.totalDeposit"
+              placeholder="请输入定金"
+              maxlength="11"
+              size="small"
+              :disabled="disabled"
+            />
+          </ws-form-item>
+          <ws-form-item label="预付金" span="1" prop="advancePayment">
+            <ws-input
+              type="number"
+              @mousewheel.native.prevent
+              v-model="customerList.advancePayment"
+              placeholder="请输入预付金"
+              maxlength="11"
+              size="small"
+              :disabled="disabled"
+            />
+          </ws-form-item>
+          <ws-form-item label="保证金" span="1" prop="securityDeposit">
+            <ws-input
+              type="number"
+              @mousewheel.native.prevent
+              v-model="customerList.securityDeposit"
+              placeholder="请输入保证金"
+              maxlength="11"
+              size="small"
+              :disabled="disabled"
+            />
+          </ws-form-item>
+          <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: 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="bankCard">
+            <ws-input
+              type="number"
+              @mousewheel.native.prevent
+              v-model="customerList.bankCard"
+              placeholder="请输入银行卡号"
+              maxlength="19"
+              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-form-item>
+          <ws-form-item label="开户支行" span="1" prop="bankDepositBranch">
+            <ws-input
+              v-if="bankInput"
+              v-model="customerList.bankDepositBranch"
+              placeholder="请输入开户支行"
+              maxlength="100"
+              size="small"
+              :disabled="disabled"
+            />
+            <ws-select
+              v-else
+              v-model="customerList.bankDepositBranch"
+              placeholder="请输入开户支行"
+              :disabled="disabled"
+            >
+              <ws-option
+                v-for="item in bankList"
+                :key="item"
+                :label="item"
+                :value="item"
+              />
+            </ws-select>
+            <el-button
+              type="primary"
+              @click="bankInputChange"
+              v-if="switchType != 2"
+              >{{ bankText }}</el-button
+            >
+          </ws-form-item>
+          <ws-form-item label="收款人姓名" span="1" prop="payeeName">
+            <ws-input
+              v-model="customerList.payeeName"
+              placeholder="请输入收款人姓名"
+              maxlength="15"
+              size="small"
+              :disabled="disabled"
+            />
+          </ws-form-item>
+        </ws-info-table>
+        <div class="but">
+          <el-button type="primary" @click="commit">提交</el-button>
+        </div>
+      </ws-form>
+    </div>
+  </div>
+</template>
+<script>
+import {
+  editCustomerInfo,
+  lookCustomer,
+  getBank,
+} from '@/model/customerFundManagement/index'
+
+export default {
+  components: {},
+  watch: {},
+  data() {
+    return {
+      imageUrl3: '',
+      imageUrl4: '',
+      dialogImageUrl: '',
+      dialogVisible: false,
+      customerList: {
+        customerName: '',
+        customerNumberCard: '',
+        bankCard: '',
+        bankDeposit: '',
+      },
+      disabledFlag: true,
+      disabled: false,
+      identity: [],
+      bank: [],
+      trader: '新增',
+      switchType: '',
+      identityImgUp: [
+        {
+          url: '',
+        },
+      ],
+      identityImgLow: [
+        {
+          url: '',
+        },
+      ],
+      bankImgUp: [
+        {
+          url: '',
+        },
+      ],
+      bankImgLow: [
+        {
+          url: '',
+        },
+      ],
+      identityUp: 'up',
+      identityLow: 'low',
+      bankUps: 'bankUp',
+      bankLows: 'bankLow',
+      sendDisabled: false,
+      bankList: [],
+      bankInput: false,
+      bankText: '手动填写',
+    }
+  },
+  activated() {
+    this.loaddata()
+
+    this.showType = this.isShow
+    this.imageUrl3 = ''
+    this.imageUrl4 = ''
+    this.customerList = {}
+  },
+  methods: {
+    bankInputChange() {
+      this.bankInput = !this.bankInput
+      if (this.bankInput) {
+        this.bankText = '自动识别'
+      } else {
+        this.bankText = '手动填写'
+      }
+    },
+    cancel() {
+      this.customerList = {}
+      this.$router.push({
+        path: 'customerFundList',
+      })
+    },
+    bankSuccess1(e) {
+      this.bankUps = 'bankUp'
+      this.bank[0] = e.url
+      this.imageUrl3 = e.url
+      getBank({
+        bankImg: e.url,
+      })
+        .toPromise()
+        .then((response) => {
+          if (response.bankNameZhihang.length > 0) {
+            this.bankList = response.bankNameZhihang
+          }
+          if (response.bankNo) {
+            this.$set(this.customerList, 'bankCard', response.bankNo)
+          }
+          if (response.bankName) {
+            this.$set(this.customerList, 'bankDeposit', response.bankName)
+          }
+        })
+    },
+    bankSuccess2(e) {
+      this.bankLows = 'bankLow'
+      this.bank[1] = e.url
+      this.imageUrl4 = e.url
+      getBank({
+        bankImg: e.url,
+      })
+        .toPromise()
+        .then((response) => {
+          if (response.bankNameZhihang) {
+            this.bankList = response.bankNameZhihang
+          }
+          if (response.bankNo) {
+            this.$set(this.customerList, 'bankCard', response.bankNo)
+          }
+          if (response.bankName) {
+            this.$set(this.customerList, 'bankDeposit', response.bankName)
+          }
+        })
+    },
+    loaddata() {
+      lookCustomer({ id: this.$route.query.id })
+        .toPromise()
+        .then((response) => {
+          this.customerList = response
+          this.bank = this.customerList.payeeAddressUrl.split(',')
+          this.imageUrl3 = this.bank[0]
+          this.imageUrl4 = this.bank[1]
+          getBank({
+            bankImg: this.bank[0],
+          })
+            .toPromise()
+            .then((response) => {
+              if (response.bankNameZhihang.length > 0) {
+                this.bankList = response.bankNameZhihang
+              }
+              if (response.bankNo) {
+                this.$set(this.customerList, 'bankCard', response.bankNo)
+              }
+              if (response.bankName) {
+                this.$set(this.customerList, 'bankDeposit', response.bankName)
+              }
+            })
+        })
+    },
+    commit() {
+      if (!this.imageUrl3) {
+        this.$message({
+          message: '请上传银行卡正面',
+          type: 'warning',
+        })
+        return
+      }
+      if (
+        !this.customerList.customerName &&
+        this.customerList.customerType == '个人客户'
+      ) {
+        this.$message({
+          message: '请输入客户姓名',
+          type: 'warning',
+        })
+        return
+      }
+      if (
+        !this.customerList.compName &&
+        this.customerList.customerType == '企业客户'
+      ) {
+        this.$message({
+          message: '请输入公司名称',
+          type: 'warning',
+        })
+        return
+      }
+      if (!this.customerList.bankCard) {
+        this.$message({
+          message: '请输入输入银行卡号',
+          type: 'warning',
+        })
+        return
+      }
+      if (!this.customerList.bankDeposit) {
+        this.$message({
+          message: '请输入开户行',
+          type: 'warning',
+        })
+        return
+      }
+      if (!this.customerList.bankDepositBranch) {
+        this.$message({
+          message: '请输入开户支行',
+          type: 'warning',
+        })
+        return
+      }
+      if (!this.customerList.customerPhone) {
+        this.$message({
+          message: '请输入手机号',
+          type: 'warning',
+        })
+        return
+      }
+      if (this.customerList.customerPhone.length != 11) {
+        this.$message({
+          message: '输入的手机号有误，请重新输入',
+          type: 'warning',
+        })
+        return
+      }
+      this.customerList.compId = sessionStorage.getItem('ws-pf_compId')
+
+      this.$confirm('确定修改客户信息？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      })
+        .then(() => {
+          this.customerList.cardAddressUrl = this.identity.toString()
+          this.customerList.payeeAddressUrl = this.bank.toString()
+          editCustomerInfo(this.customerList)
+            .toPromise()
+            .then((response) => {
+              this.$message.success('编辑成功')
+              this.customerList = {}
+              this.$router.go(-1)
+            })
+        })
+        .catch(() => {
+          return false
+        })
+    },
+  },
+}
+</script>
+<style lang="scss" scoped>
+.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;
+}
+
+.avatar {
+  width: 330px;
+  height: 103%;
+  display: block;
+}
+
+.center {
+  background: #f6f7fc;
+}
+
+.seach {
+  display: flex;
+  align-items: center;
+
+  .find {
+    width: 32px;
+  }
+
+  .search-left {
+    display: flex;
+  }
+}
+
+.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;
+}
+
+.veriCode {
+  margin: 0 9px;
+}
+.jiaoYan {
+  display: flex;
+  width: 50%;
+  padding: 0 9px;
+}
+/deep/.jiaoYan .el-input__inner {
+  width: 100%;
+}
+</style>

src/views/customerFundManagement/customerFundList.vue

@@ -0,0 +1,537 @@
+//客户管理
+<template>
+  <div>
+    <BaseHeaderLayout :leftSpan="8">
+      <template slot="left"> </template>
+      <template slot="left">
+        <ws-input
+          v-model="searchKeyWord"
+          placeholder="可按客户名称、电话查找"
+          clearable
+          maxlength="500"
+          type="input"
+          class="findValue"
+        ></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: -2px;
+            "
+            src="../../../public/img/sousuo.png"
+            alt=""
+        /></ws-button>
+
+        <!--添加客户-->
+        <ws-button type="primary" @click="customerAdd()"
+          ><img
+            width="13"
+            height="13"
+            style="
+              vertical-align: text-top;
+              position: relative;
+              top: 2px;
+              left: -4px;
+            "
+            src="../../../public/img/header-add.png"
+            alt=""
+          />创建客户</ws-button
+        >
+      </template>
+      <!-- v-hasPermission="`contractManagement.buyContract.buyContractInfo.add`" -->
+    </BaseHeaderLayout>
+    <div>
+      <el-table
+        class="wenzi"
+        :data="customerList.records"
+        style="width: 100%"
+        height="680"
+      >
+        <el-table-column prop="index" label="序号" width="80">
+          <template scope="scope">
+            <span v-if="scope.$index < 9">0{{ scope.$index + 1 }}</span>
+            <span v-else>{{ scope.$index + 1 }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="customerType" label="客户类型" width="80"></el-table-column>
+        <el-table-column prop="compName" label="企业名称" width="200"></el-table-column>
+        <el-table-column prop="customerName" label="客户姓名" width="100"></el-table-column>
+        <el-table-column prop="customerPhone" label="电话" width="100"> </el-table-column>
+        <el-table-column prop="totalDeposit" label="定金(元)" width="100"></el-table-column>
+        <el-table-column prop="advancePayment" label="预付金(元)" width="100"></el-table-column>
+        <el-table-column prop="securityDeposit" label="保证金(元)" width="100"></el-table-column>
+        <el-table-column prop="bankCard" label="账号"> </el-table-column>
+        <el-table-column prop="bankDeposit" label="开户行" width="200">
+          <template slot-scope="scope">
+            {{ scope.row.bankDeposit }} - {{ scope.row.bankDepositBranch }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="payeeName" label="收款人姓名"> </el-table-column>
+        <el-table-column prop="seller" label="操作" width="150">
+          <template slot-scope="scope">
+            <el-button
+              size="medium"
+              type="text"
+              class="record"
+              @click="customerEdit(scope.row)"
+              >编辑</el-button
+            >
+            <el-button
+              size="medium"
+              type="text"
+              class="record"
+              @click="customerDel(scope.row)"
+              >删除</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+      <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 {
+  getCustomerList,
+  delCustomerInfo,
+} from '@/model/customerFundManagement/index'
+import Pagination from '@/components/Pagination'
+import WsUpload from '@/components/WsUpload'
+
+export default {
+  name: 'viewSpareMoney',
+  components: {
+    WsUpload,
+    Pagination,
+  },
+  watch: {
+    vesselId(val) {
+      this.getList()
+    },
+    isShow(val) {
+      this.showType = val
+    },
+  },
+  data() {
+    return {
+      //弹出框
+      dialogViewSpareMoney: false,
+      dialogApproveFormVisible: false,
+      // 船舶类型
+      monetaryKey: null,
+      // 表格显示数据
+      tableDate: [],
+      // 是否显示
+      showType: true,
+      // 年
+      year: '',
+      currentPage: 1,
+      pageSize: 10,
+      deptBudgetTotal: 0,
+      searchKeyWord: '',
+      contractType: 2,
+      searchType: 1,
+      // 提交类型
+      submitType: true,
+      size: 10,
+      spanArr: [],
+      id: '',
+      money: '',
+      compId: sessionStorage.getItem('ws-pf_compId'),
+      deptCircularPage: {},
+      customerList: [],
+      deptBudgetList: {},
+      pickerBeginDateBefore: {
+        disabledDate: (time) => {
+          return time.getTime() > Date.now()
+        },
+      },
+      accessoryTFs: false,
+      customerInfo: {
+        id: '',
+        compId: '',
+        flag: '',
+        money: '',
+        totalDeposit: 0,
+      },
+      totalDeposit: 0,
+    }
+  },
+  activated() {
+    this.getList()
+    this.showType = this.isShow
+  },
+  methods: {
+    //查看//传参
+    nocomplete(row) {
+      this.$router.push({
+        name: 'vehicleDispatchingview',
+        query: {
+          id: row.id,
+        },
+      })
+    },
+    dateFormat(fmt, date) {
+      let ret
+      const opt = {
+        'Y+': date.getFullYear().toString(), // 年
+        'm+': (date.getMonth() + 1).toString(), // 月
+        'd+': date.getDate().toString(), // 日
+        'H+': date.getHours().toString(), // 时
+        // "M+": date.getMinutes().toString(),         // 分
+        // "S+": date.getSeconds().toString()          // 秒
+        // 有其他格式化字符需求可以继续添加，必须转化成字符串
+      }
+      for (let k in opt) {
+        ret = new RegExp('(' + k + ')').exec(fmt)
+        if (ret) {
+          fmt = fmt.replace(
+            ret[1],
+            ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, '0')
+          )
+        }
+      }
+      return fmt
+    },
+    customerAdd() {
+      this.$router.push({
+        path: 'customerFundAdd',
+      })
+    },
+    customerEdit(row) {
+      this.$router.push({
+        name: 'customerFundEdit',
+        query: {
+          id: row.id,
+        },
+      })
+    },
+    customerDel(row) {
+      this.$confirm(`客户信息删除后不可恢复，是否确定删除？`, {
+        cancelButtonText: '取消',
+        confirmButtonText: '确定',
+        type: 'warning',
+      })
+        .then(() => {
+          delCustomerInfo({
+            id: row.id,
+          })
+            .toPromise()
+            .then((response) => {
+              this.$notify.success({
+                title: '成功',
+                message: '删除成功',
+              })
+              this.getList()
+            })
+            .catch((response) => {})
+        })
+        .catch(() => {
+          return false
+        })
+    },
+    handleClose() {
+      this.accessoryTFs = false
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`)
+      this.pageSize = val
+      this.getList()
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val
+      console.log(`当前页: ${val}`)
+      this.getList()
+    },
+    changestatus(state) {
+      this.searchType = state
+      this.getList()
+    },
+    whether(row) {
+      row.identification = 'true'
+    },
+    //列表查询
+    getList() {
+      getCustomerList({
+        compId: sessionStorage.getItem('ws-pf_compId'),
+        currentPage: this.currentPage,
+        pageSize: this.pageSize,
+        searchKeyWord: this.searchKeyWord,
+        customerTypeFlag: this.customerTypeFlag,
+      })
+        .toPromise()
+        .then((response) => {
+          for (var i = 0; i < response.records.length; i++) {
+            response.records[i].identification = 'false'
+          }
+          this.customerList = response
+          this.deptCircularPage.currentPage = response.current
+          this.deptCircularPage.pageSize = response.size
+          this.deptBudgetTotal = response.total
+        })
+    },
+    find() {
+      this.currentPage = 1
+      this.getList()
+    },
+  },
+}
+</script>
+<style lang="scss" scoped>
+.connert {
+  width: 90%;
+  margin: 0 auto;
+}
+.vertical-text-left {
+  width: 62px;
+  text-align: right;
+}
+.el-button--primary {
+  background-color: #5878e8;
+  border-color: #5878e8;
+}
+.el-button--primary {
+  background-color: #5878e8;
+  color: #fff;
+}
+.el-button--default {
+  color: #8890b1;
+  border-color: #e8eaf1;
+}
+/deep/.base_header_layout .grid-content.right .find.el-button--primary {
+  width: 30px;
+  margin-left: 0;
+  border-top-left-radius: 0px;
+  border-bottom-left-radius: 0px;
+}
+/deep/.findValue .el-input__inner {
+  border-top-right-radius: 0px;
+  border-bottom-right-radius: 0px;
+}
+//操作按钮
+.record,
+.adjustment {
+  display: inline-block;
+  color: #5878e8;
+  padding: 0 4px !important;
+  position: relative;
+  font-size: 14px;
+}
+.record:after {
+  position: absolute;
+  content: '';
+  display: block;
+  top: 5px;
+  right: -2px;
+  width: 1px;
+  height: 12px;
+  background: #e9ecf7;
+}
+//状态样式
+.executory,
+.inExecution,
+.done {
+  width: 6px;
+  height: 6px;
+  display: inline-block;
+  border-radius: 50%;
+  position: relative;
+  top: -1px;
+  font-size: 14px;
+}
+.executory {
+  background: #ff9f24;
+}
+.inExecution {
+  background: #5878e8;
+}
+.done {
+  background: #50cad4;
+}
+.putstorage.el-button--default,
+.deliverystorage.el-button--default {
+  border-color: #8890b1;
+  background-color: #fff;
+  color: #8890b1;
+}
+/deep/.el-table td,
+/deep/.el-table th.is-leaf {
+  border-right: 1px solid #e9ecf7;
+  text-align: center;
+}
+/deep/.el-table tr td:first-child,
+/deep/.el-table tr th.is-leaf:first-child {
+  border-left: 1px solid #e9ecf7;
+}
+.record,
+.adjustment {
+  display: inline-block;
+  color: #5878e8;
+  padding: 0 4px !important;
+  position: relative;
+}
+.record:after {
+  position: absolute;
+  content: '';
+  display: block;
+  top: 5px;
+  right: -2px;
+  width: 1px;
+  height: 12px;
+  background: #e9ecf7;
+}
+.el-row {
+  height: 60px;
+}
+.base_header_layout .grid-content {
+  margin-top: 80px;
+}
+.el-input--small .el-input__inner {
+  margin-left: 20px;
+}
+.dialog-footer {
+  margin-top: 33px;
+}
+.el-range-editor--small.el-input__inner {
+  height: 32px;
+  margin: 0 10px;
+}
+/deep/.el-pagination {
+  text-align: center;
+  white-space: nowrap;
+  padding: 2px 5px;
+  color: #303133;
+  font-weight: 700;
+  margin-bottom: 20px;
+}
+.el-select {
+  width: 30%;
+  margin-right: 10px;
+}
+/deep/.zengjia .el-textarea__inner {
+  display: block;
+  padding: 13px 9px;
+  line-height: 0.5;
+  box-sizing: border-box;
+  width: 80%;
+  font-size: inherit;
+  color: #606266;
+  background-color: #fff;
+  background-image: none;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  margin-left: 180px;
+  margin-top: 10px;
+}
+
+/deep/.xiugai .el-textarea__inner {
+  display: block;
+  padding: 13px 17px;
+  line-height: 0.5;
+  box-sizing: border-box;
+  width: 105%;
+  font-size: inherit;
+  color: #606266;
+  background-color: #fff;
+  background-image: none;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+  margin-left: 95px;
+}
+
+/deep/.tuihui .el-textarea__inner {
+  display: block;
+  padding: 13px 9px;
+  line-height: 0.5;
+  box-sizing: border-box;
+  width: 80%;
+  font-size: inherit;
+  color: #606266;
+  background-color: #fff;
+  background-image: none;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  margin-left: 180px;
+  margin-top: 10px;
+}
+/deep/.dingjin {
+  width: 98px;
+  margin-left: 30px;
+  margin-bottom: -37px;
+  padding-top: 20px;
+}
+/deep/.el-textarea__inner {
+  display: block;
+  padding: 13px 17px;
+  line-height: 0.5;
+  box-sizing: border-box;
+  width: 90%;
+  font-size: inherit;
+  color: #606266;
+  background-color: #fff;
+  background-image: none;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+  margin-left: 155px;
+  margin-top: 10px;
+}
+/deep/.addprice {
+  width: 98px;
+  margin-left: 50px;
+}
+/deep/.returnprice {
+  width: 98px;
+  margin-left: 50px;
+}
+/deep/.yuan {
+  width: 10px;
+  margin-left: 150%;
+  margin-top: -32px;
+}
+/deep/.addpricejine {
+  width: 98px;
+  margin-left: 50px;
+  margin-bottom: -37px;
+  padding-top: 20px;
+}
+/deep/.returnpricejine {
+  width: 98px;
+  margin-left: 50px;
+  margin-bottom: -37px;
+  padding-top: 20px;
+}
+/deep/.typeselect .el-input__inner {
+  color: #8890b1;
+}
+/deep/.yifudingjin {
+  margin-left: 135px;
+  width: 70px;
+  margin-top: -19px;
+}
+.inputChenge {
+  width: 50%;
+  display: inline-flex;
+}
+.inputs {
+  margin: 0 auto;
+}
+/deep/.ketuidingjin {
+  margin-left: 135px;
+  width: 70px;
+  margin-top: -19px;
+}
+</style>