1

unimall-admin/src/api/collectionPayment.js

@@ -14,61 +14,70 @@ import Qs from 'qs'
 //   })
 // }
 export function listCollectionPayment(query) {
-  return request({
-    method: 'post',
-    data: Qs.stringify({
-      _gp: 'admin.collectionpayment',
-      _mt: 'list',
-      page: query.page,
-      limit: query.limit,
-      CollectionPaymentDTO: JSON.stringify(query.type)
+    return request({
+        method: 'post',
+        data: Qs.stringify({
+            _gp: 'admin.collectionpayment',
+            _mt: 'list',
+            page: query.page,
+            limit: query.limit,
+            CollectionPaymentDTO: JSON.stringify(query.type)
+        })
     })
-  })
 }
 
 export function createCollectionPayment(data) {
-  return request({
-    method: 'post',
-    data: Qs.stringify({
-      _gp: 'admin.collectionpayment',
-      _mt: 'create',
-      CollectionPaymentDTO: JSON.stringify(data)
+    return request({
+        method: 'post',
+        data: Qs.stringify({
+            _gp: 'admin.collectionpayment',
+            _mt: 'create',
+            CollectionPaymentDTO: JSON.stringify(data)
+        })
     })
-  })
 }
 
 export function updateCollectionPayment(data) {
-  return request({
-    method: 'post',
-    data: Qs.stringify({
-      _gp: 'admin.collectionpayment',
-      _mt: 'edit',
-      CollectionPaymentDTO: JSON.stringify(data)
+    return request({
+        method: 'post',
+        data: Qs.stringify({
+            _gp: 'admin.collectionpayment',
+            _mt: 'edit',
+            CollectionPaymentDTO: JSON.stringify(data)
+        })
     })
-  })
 }
 
 export function importWord(data) {
-  return request({
-    method: 'post',
-    data: Qs.stringify({
-      _gp: 'admin.collectionpayment',
-      _mt: 'createAll',
-      CollectionPaymentDTO: JSON.stringify(data)
+    return request({
+        method: 'post',
+        data: Qs.stringify({
+            _gp: 'admin.collectionpayment',
+            _mt: 'createAll',
+            CollectionPaymentDTO: JSON.stringify(data)
+        })
     })
-  })
 }
 
 export function exportXlsx(data) {
-  return request({
-    method: 'post',
-    data: Qs.stringify({
-      _gp: 'admin.collectionpayment',
-      _mt: 'export',
-      CollectionPaymentDTO: JSON.stringify(data),
-      response: 'blob'
+    return request({
+        method: 'post',
+        data: Qs.stringify({
+            _gp: 'admin.collectionpayment',
+            _mt: 'export',
+            CollectionPaymentDTO: JSON.stringify(data),
+            response: 'blob'
+        })
     })
-  })
 }
 
-// export const exportXlsx ='/contractCostInfo/payment'
+export function listcustomer(query) {
+    return request({
+        method: 'get',
+        params: {
+            _gp: 'admin.customerinfo',
+            _mt: 'customerList'
+
+        }
+    })
+}

unimall-admin/src/api/customerInfo.js

@@ -0,0 +1,48 @@
+import request from '@/utils/request'
+import Qs from 'qs'
+
+export function listCustomerInfo(query) {
+    return request({
+        method: 'post',
+        params: {
+            _gp: 'admin.customerinfo',
+            _mt: 'list',
+            page: query.page,
+            limit: query.limit,
+            ...query
+        }
+    })
+}
+
+export function createCustomerInfo(data) {
+    return request({
+        method: 'post',
+        data: Qs.stringify({
+            _gp: 'admin.customerinfo',
+            _mt: 'create',
+            CustomerInfoDTO: JSON.stringify(data)
+        })
+    })
+}
+
+export function updateCustomerInfo(data) {
+    return request({
+        method: 'post',
+        data: Qs.stringify({
+            _gp: 'admin.customerinfo',
+            _mt: 'edit',
+            CustomerInfoDTO: JSON.stringify(data)
+        })
+    })
+}
+
+export function deleteCustomerInfo(id) {
+    return request({
+        method: 'post',
+        params: {
+            _gp: 'admin.customerinfo',
+            _mt: 'delete',
+            id: id
+        }
+    })
+}

unimall-admin/src/router/route.json

@@ -60,6 +60,18 @@
                 "name": "customerBilling",
                 "page": "/customerBilling/customerBillingInfo"
             },
+            {
+                "path": "customerInfo",
+                "meta": {
+                    "noCache": true,
+                    "perms": [
+                        ""
+                    ],
+                    "title": "客户管理"
+                },
+                "name": "customerInfo",
+                "page": "/customerInfo/customerInfo"
+            },
             {
                 "path": "customerBillingInfoadd",
                 "meta": {

unimall-admin/src/views/collectionPayment/collectionPayment.vue

@@ -2,13 +2,21 @@
   <div class="app-container">
     <!-- 查询和其他操作 -->
     <div class="filter-container">
-      <el-input
+      <!-- <el-input
         v-model="listQuery.type.receivingWithdrawingPeople"
         clearable
         class="filter-item"
         size="small"
         style="width: 200px;"
-        placeholder="请输入收款人姓名" />
+        placeholder="请输入收款人姓名" /> -->
+      <el-select
+        v-model="listQuery.type.receivingWithdrawingPeople"
+        placeholder="请选择付款人"
+        style="margin:0 20px;"
+        clearable
+        size="small">
+        <el-option v-for="item in khList" :label="item.customer" :value="item.customer" :key="item.id"/>
+      </el-select>
       <!-- <el-input v-model="listQuery.type.receivingWithdrawingRegion" clearable class="filter-item" size="small"
                 style="width: 200px;" placeholder="请输入收款地" /> -->
 
@@ -117,7 +125,7 @@
       <!-- <el-form-item label="操作人" prop="updatePeople">
                     <el-input v-model="dataForm.updatePeople" />
                 </el-form-item> -->
-      <el-table-column align="center" label="操作" class-name="small-padding" width="250px">
+      <el-table-column align="center" label="操作" class-name="small-padding" width="200px">
         <template slot-scope="scope">
           <el-button
             v-permission="['collectionPayment:collectionpayment:edit']"
@@ -158,7 +166,15 @@
           <el-input v-model="dataForm.id" />
         </el-form-item>
         <el-form-item label="付款人" prop="receivingWithdrawingPeople">
-          <el-input v-model="dataForm.receivingWithdrawingPeople" />
+          <el-select
+            v-model="dataForm.receivingWithdrawingPeople"
+            :disabled="textMap[dialogStatus]=='编辑'"
+            placeholder="请选择付款人"
+            clearable
+            size="small">
+            <el-option v-for="item in khList" :label="item.customer" :value="item.customer" :key="item.id"/>
+          </el-select>
+          <!-- <el-input v-model="dataForm.receivingWithdrawingPeople" :disabled="textMap[dialogStatus]=='编辑'"/> -->
         </el-form-item>
         <el-form-item label="收款地" prop="receivingWithdrawingRegion">
           <!-- <el-input v-model="dataForm.receivingWithdrawingRegion" /> -->
@@ -181,10 +197,10 @@
             style="width: 100%;"/>
         </el-form-item>
         <el-form-item label="金额（欧元）" prop="deductionEuro">
-          <el-input v-model="dataForm.deductionEuro" />
+          <el-input v-model="dataForm.deductionEuro" :disabled="textMap[dialogStatus]=='编辑'"/>
         </el-form-item>
         <el-form-item label="金额（人民币）" prop="deductionRmb">
-          <el-input v-model="dataForm.deductionRmb" />
+          <el-input v-model="dataForm.deductionRmb" :disabled="textMap[dialogStatus]=='编辑'"/>
         </el-form-item>
         <el-form-item label="备注1" prop="remarks">
           <el-input v-model="dataForm.remarks" />
@@ -220,7 +236,8 @@ import {
   createCollectionPayment,
   updateCollectionPayment,
   deleteCollectionPayment,
-  exportXlsx
+  exportXlsx,
+  listcustomer
 } from '@/api/collectionPayment'
 // import {
 //     exportXlsx
@@ -233,6 +250,8 @@ export default {
   components: { Pagination },
   data() {
     return {
+      khList: [],
+      khList1: [],
       typeList: [{
         value: '0',
         label: '正常单据'
@@ -435,6 +454,21 @@ export default {
               _this.excelFreightspace.push(obj)
               _this.isAllowExport = true
             }
+            for (let i = 0; i < _this.khList.length; i++) {
+              _this.khList1.push(_this.khList[i].receivingWithdrawingPeople)
+            }
+            if (!_this.khList1.includes(obj.receivingWithdrawingPeople)) {
+              _this.isAllowExport = false
+              _this.$notify({
+                title: '失败',
+                message: '导入失败，导入数据中客户不存在，请重新编辑',
+                type: 'error'
+              })
+              return
+            } else {
+              _this.excelFreightspace.push(obj)
+              _this.isAllowExport = true
+            }
           })
           if (_this.excelFreightspace && _this.isAllowExport) {
             importWord(_this.excelFreightspace).then((response) => {
@@ -523,6 +557,13 @@ export default {
           this.total = 0
           this.listLoading = false
         })
+      listcustomer().then(response => {
+        console.log(response)
+        this.khList = response.data.data
+      })
+        .catch(() => {
+
+        })
     },
     handleFilter() {
       this.listQuery.page = 1

unimall-admin/src/views/collectionPayment/collectionPayment1.vue

@@ -107,7 +107,7 @@
           {{ scope.row.status == 1 ? '已作废' : '' }}</template>
       </el-table-column>
       <el-table-column align="center" label="操作人" prop="updatePeople" />
-      <el-table-column align="center" label="操作" class-name="small-padding fixed-width">
+      <el-table-column align="center" label="操作" class-name="small-padding" width="200px">
         <template slot-scope="scope">
           <el-button
             v-permission="['collectionPayment:collectionpayment:edit']"

unimall-admin/src/views/customerBilling/customerBillingInfo.vue

@@ -8,21 +8,22 @@
         size="small"
         style="width: 200px;"
         placeholder="请输入编号" />
-      <el-input
+      <el-select
         v-model="listQuery.type.customer"
+        placeholder="请选择客户"
+        style="margin:0 20px;"
         clearable
-        class="filter-item"
-        size="small"
-        style="width: 200px;"
-        placeholder="请输入客户" />
-      <el-select v-model="listQuery.type.status" size="small" clearable placeholder="请选择收款状态">
+        size="small">
+        <el-option v-for="item in khList" :label="item.customer" :value="item.customer" :key="item.customer"/>
+      </el-select>
+      <!-- <el-select v-model="listQuery.type.status" size="small" clearable placeholder="请选择收款状态">
         <el-option
           v-for="item in skList"
           :label="item.label"
           :value="item.value"
           :key="item.value"
         />
-      </el-select>
+      </el-select> -->
       <el-select
         v-model="listQuery.type.businessType"
         placeholder="请选择单据类型"
@@ -102,23 +103,23 @@
       </el-table-column>
       <el-table-column align="center" label="装车日期" prop="closingDate" />
       <el-table-column align="center" label="应付金额" prop="amountIng" />
-      <el-table-column align="center" label="已付金额" prop="amountPaid" />
-      <el-table-column align="center" label="未付金额" prop="unpaidAmount" />
+      <!-- <el-table-column align="center" label="已付金额" prop="amountPaid" /> -->
+      <!-- <el-table-column align="center" label="未付金额" prop="unpaidAmount" /> -->
       <el-table-column align="center" label="备注1" prop="remarks" />
       <el-table-column align="center" label="备注2" prop="remark" />
-      <el-table-column align="center" label="状态" prop="status">
-        <template slot-scope="scope">
-          <span v-if="scope.row.status==1">
-            未收款
-          </span>
-          <span v-if="scope.row.status==2">
-            部分收款
-          </span>
-          <span v-if="scope.row.status==3">
-            已收款
-          </span>
-        </template>
-      </el-table-column>
+      <!-- <el-table-column align="center" label="状态" prop="status"> -->
+      <!-- <template slot-scope="scope">
+        <span v-if="scope.row.status==1">
+          未收款
+        </span>
+        <span v-if="scope.row.status==2">
+          部分收款
+        </span>
+        <span v-if="scope.row.status==3">
+          已收款
+        </span>
+      </template>
+      </el-table-column> -->
       <el-table-column align="center" label="操作" class-name="small-padding" width="250px">
         <template slot-scope="scope">
           <el-button
@@ -170,21 +171,21 @@
         <el-form-item label="装车日期" prop="closingDate">
           <el-input v-model="dataForm.closingDate" />
         </el-form-item>
-        <el-form-item label="已付金额" prop="amountPaid">
+        <!-- <el-form-item label="已付金额" prop="amountPaid">
           <el-input v-model="dataForm.amountPaid" />
-        </el-form-item>
-        <el-form-item label="未付金额" prop="unpaidAmount">
+        </el-form-item> -->
+        <!-- <el-form-item label="未付金额" prop="unpaidAmount">
           <el-input v-model="dataForm.unpaidAmount" />
-        </el-form-item>
+        </el-form-item> -->
         <el-form-item label="备注1" prop="remarks">
           <el-input v-model="dataForm.remarks" />
         </el-form-item>
         <el-form-item label="备注2" prop="remark">
           <el-input v-model="dataForm.remark" />
         </el-form-item>
-        <el-form-item label="状态" prop="status">
+        <!-- <el-form-item label="状态" prop="status">
           <el-input v-model="dataForm.status" />
-        </el-form-item>
+        </el-form-item> -->
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button @click="dialogFormVisible = false">取消</el-button>
@@ -205,22 +206,18 @@ import {
   deleteCustomerBillingInfo,
   exportXlsx
 } from '@/api/customerBillingInfo'
+import {
+  listcustomer
+} from '@/api/collectionPayment'
 import Pagination from '@/components/Pagination'
 export default {
   name: 'CustomerBillingInfo',
   components: { Pagination },
   data() {
     return {
-      khList: [
-        {
-          value: '小李',
-          label: '小李'
-        },
-        {
-          value: '小李',
-          label: '小张'
-        }
-      ],
+      isAllowExport: true,
+      khList: [],
+      khList1: [],
       skList: [
         {
           value: 1,
@@ -355,10 +352,24 @@ export default {
             obj.cost = v.合计成本
             obj.sendComp = v.发货公司
             obj.carTeam = v.车队
-
-            _this.excelFreightspace.push(obj)
+            for (let i = 0; i < _this.khList.length; i++) {
+              _this.khList1.push(_this.khList[i].customer)
+            }
+            if (!_this.khList1.includes(obj.customer)) {
+              _this.isAllowExport = false
+              _this.$notify({
+                title: '失败',
+                message: '导入失败，导入数据中客户不存在，请重新编辑',
+                type: 'error'
+              })
+              return
+            } else {
+              _this.excelFreightspace.push(obj)
+              _this.isAllowExport = true
+            }
+            // _this.excelFreightspace.push(obj)
           })
-          if (_this.excelFreightspace) {
+          if (_this.excelFreightspace && _this.isAllowExport) {
             importWord(_this.excelFreightspace).then((response) => {
               if (response.status == '200') {
                 _this.$notify({
@@ -490,6 +501,13 @@ export default {
           this.total = 0
           this.listLoading = false
         })
+      listcustomer().then(response => {
+        console.log(response)
+        this.khList = response.data.data
+      })
+        .catch(() => {
+
+        })
     },
     handleFilter() {
       this.listQuery.page = 1
@@ -500,7 +518,7 @@ export default {
         id: undefined
       }
     },
-    handleLook(row) { debugger
+    handleLook(row) {
       this.$router.push({
         path: 'customerBillingInfolook',
         query: {

unimall-admin/src/views/customerBilling/customerBillingInfoadd.vue

@@ -27,7 +27,15 @@
           <el-input v-model="dataForm.payNo" class="input-width" />
         </el-form-item>
         <el-form-item label="客户:" prop="customer" style="margin-right:50px">
-          <el-input v-model="dataForm.customer" :disabled="isJz" class="input-width"/>
+          <el-select
+            v-model="dataForm.customer"
+            :disabled="isJz"
+            placeholder="请选择客户"
+            clearable
+            size="small">
+            <el-option v-for="item in khList" :label="item.customer" :value="item.customer" :key="item.customer"/>
+          </el-select>
+          <!-- <el-input v-model="dataForm.customer" :disabled="isJz" class="input-width"/> -->
         </el-form-item>
         <el-form-item label="单据类型:" prop="businessType" style="margin-right:50px">
           <el-select
@@ -57,19 +65,19 @@
         <el-form-item label="应付金额:" prop="amountIng" style="margin-right:50px">
           <el-input v-model="dataForm.amountIng" class="input-width" @input="priceChange"/>
         </el-form-item>
-        <el-form-item label="已付金额:" prop="amountPaid" style="margin-right:50px">
+        <!-- <el-form-item label="已付金额:" prop="amountPaid" style="margin-right:50px">
           <el-input v-model="dataForm.amountPaid" class="input-width" @input="priceChange"/>
-        </el-form-item>
-        <el-form-item label="未付金额:" prop="unpaidAmount" style="margin-right:50px">
+        </el-form-item> -->
+        <!-- <el-form-item label="未付金额:" prop="unpaidAmount" style="margin-right:50px">
           <el-input v-model="dataForm.unpaidAmount" class="input-width" disabled/>
-        </el-form-item>
+        </el-form-item> -->
         <el-form-item label="备注1:" prop="remarks" style="margin-right:50px">
           <el-input v-model="dataForm.remarks" class="input-width" />
         </el-form-item>
         <el-form-item label="备注2:" prop="remark" style="margin-right:50px">
           <el-input v-model="dataForm.remark" class="input-width" />
         </el-form-item>
-        <el-form-item label="状态：" prop="status" style="margin-right:50px">
+        <!-- <el-form-item label="状态：" prop="status" style="margin-right:50px">
           <el-select v-model="dataForm.status" placeholder="请选择收款状态" clearable class="input-width">
             <el-option
               v-for="item in skList"
@@ -78,7 +86,7 @@
               :key="item.value"
             />
           </el-select>
-        </el-form-item>
+        </el-form-item> -->
       </div>
       <div class="small-title" style="font-size: 16px">详情</div>
       <div style="display:flex">
@@ -193,7 +201,7 @@
         </el-table-column>
         <el-table-column align="center" label="合计应收" prop="pricePayable">
           <template slot-scope="scope">
-            <el-input v-model="scope.row.pricePayable" />
+            <el-input v-model="scope.row.pricePayable" @input="hjys(scope.row.pricePayable)"/>
           </template>
         </el-table-column>
         <el-table-column align="center" label="合计成本" prop="cost">
@@ -281,12 +289,17 @@ import {
   updateCustomerBillingInfo,
   deleteCustomerBillingInfo
 } from '@/api/customerBillingInfo'
+import {
+  listcustomer
+} from '@/api/collectionPayment'
 import Pagination from '@/components/Pagination'
 export default {
   name: 'CustomerBillingInfo',
   components: { Pagination },
   data() {
     return {
+      khList: [],
+      khList1: [],
       fileList: [],
       appendixIdsAdd: '',
       excelFreightspace: [],
@@ -342,8 +355,8 @@ export default {
       },
       dataForm: {
         id: undefined,
-        amountPaid: '0',
-        amountIng: '0'
+        amountPaid: 0,
+        amountIng: 0
 
       },
       dialogFormVisible: false,
@@ -359,8 +372,18 @@ export default {
   created() {
     // this.getList()
     this.list = []
+    listcustomer().then(response => {
+      console.log(response)
+      this.khList = response.data.data
+    })
+      .catch(() => {
+
+      })
   },
   methods: {
+    hjys(val) { debugger
+      this.dataForm.amountIng+=Number(val)
+    },
     priceChange() {
       if (this.dataForm.amountIng&&this.dataForm.amountPaid) {
         this.dataForm.unpaidAmount = Number(this.dataForm.amountIng) - Number(this.dataForm.amountPaid)

unimall-admin/src/views/customerBilling/customerBillingInfoedit.vue

@@ -49,21 +49,21 @@
           />
         </el-form-item>
         <el-form-item label="应付金额:" prop="amountIng" style="margin-right:50px">
-          <el-input v-model="dataForm.amountIng" class="input-width" @input="priceChange"/>
+          <el-input v-model="dataForm.amountIng" :disabled="true" class="input-width" @input="priceChange"/>
         </el-form-item>
-        <el-form-item label="已付金额:" prop="amountPaid" style="margin-right:50px">
+        <!-- <el-form-item label="已付金额:" prop="amountPaid" style="margin-right:50px">
           <el-input v-model="dataForm.amountPaid" class="input-width" @input="priceChange"/>
-        </el-form-item>
-        <el-form-item label="未付金额:" prop="unpaidAmount" style="margin-right:50px">
+        </el-form-item> -->
+        <!-- <el-form-item label="未付金额:" prop="unpaidAmount" style="margin-right:50px">
           <el-input v-model="dataForm.unpaidAmount" :disabled="true" class="input-width"/>
-        </el-form-item>
+        </el-form-item> -->
         <el-form-item label="备注1:" prop="remarks" style="margin-right:50px">
           <el-input v-model="dataForm.remarks" class="input-width"/>
         </el-form-item>
         <el-form-item label="备注2:" prop="remark" style="margin-right:50px">
           <el-input v-model="dataForm.remark" class="input-width"/>
         </el-form-item>
-        <el-form-item label="状态：" prop="status" style="margin-right:50px">
+        <!-- <el-form-item label="状态：" prop="status" style="margin-right:50px">
           <el-select v-model="dataForm.status" clearable placeholder="请选择收款状态" class="input-width">
             <el-option
               v-for="item in skList"
@@ -72,7 +72,7 @@
               :key="item.value"
             />
           </el-select>
-        </el-form-item>
+        </el-form-item> -->
       </div>
       <div class="small-title" style="font-size: 16px">详情</div>
       <!-- <el-button style="margin-bottom:20px" @click="addDetail">添加</el-button> -->
@@ -167,7 +167,7 @@
         </el-table-column>
         <el-table-column align="center" label="合计应收" prop="pricePayable">
           <template slot-scope="scope">
-            <el-input v-model="scope.row.pricePayable" />
+            <el-input v-model="scope.row.pricePayable" :disabled="true"/>
           </template>
         </el-table-column>
         <el-table-column align="center" label="合计成本" prop="cost">

unimall-admin/src/views/customerBilling/customerBillingInfolook.vue

@@ -57,19 +57,19 @@
         <el-form-item label="应付金额:" prop="amountIng" style="margin-right:50px">
           <el-input v-model="dataForm.amountIng" :disabled="true" class="input-width"/>
         </el-form-item>
-        <el-form-item label="已付金额:" prop="amountPaid" style="margin-right:50px">
+        <!-- <el-form-item label="已付金额:" prop="amountPaid" style="margin-right:50px">
           <el-input v-model="dataForm.amountPaid" :disabled="true" class="input-width"/>
         </el-form-item>
         <el-form-item label="未付金额:" prop="unpaidAmount" style="margin-right:50px">
           <el-input v-model="dataForm.unpaidAmount" :disabled="true" class="input-width"/>
-        </el-form-item>
+        </el-form-item> -->
         <el-form-item label="备注1:" prop="remarks" style="margin-right:50px">
           <el-input v-model="dataForm.remarks" :disabled="true" class="input-width"/>
         </el-form-item>
         <el-form-item label="备注2:" prop="remark" style="margin-right:50px">
           <el-input v-model="dataForm.remark" :disabled="true" class="input-width"/>
         </el-form-item>
-        <el-form-item label="状态：" prop="status" style="margin-right:50px">
+        <!-- <el-form-item label="状态：" prop="status" style="margin-right:50px">
           <el-select v-model="dataForm.status" :disabled="true" clearable placeholder="请选择收款状态" class="input-width">
             <el-option
               v-for="item in skList"
@@ -78,7 +78,7 @@
               :key="item.value"
             />
           </el-select>
-        </el-form-item>
+        </el-form-item> -->
       </div>
       <div class="small-title" style="font-size: 16px">详情</div>
       <!-- <el-button style="margin-bottom:20px" @click="addDetail">添加</el-button> -->

unimall-admin/src/views/customerInfo/customerInfo.vue

@@ -0,0 +1,241 @@
+<template>
+  <div class="app-container">
+    <!-- 查询和其他操作 -->
+    <div class="filter-container">
+      <el-input
+        v-model="listQuery.customer"
+        clearable
+        class="filter-item"
+        size="small"
+        style="width: 200px;"
+        placeholder="请输入客户"
+      />
+      <el-button v-permission="['customerInfo:customerinfo:list']" class="filter-item" type="primary" size="mini" icon="el-icon-search" @click="handleFilter">查找</el-button>
+      <el-button v-permission="['customerInfo:customerinfo:create']" class="filter-item" type="primary" size="mini" icon="el-icon-edit" @click="handleCreate">添加</el-button>
+    </div>
+
+    <!-- 查询结果 -->
+    <el-table
+      v-loading="listLoading"
+      :data="list"
+      size="small"
+      element-loading-text="正在查询中。。。"
+      border
+      fit
+      highlight-current-row
+    >
+      <el-table-column align="center" label="客户" prop="customer" />
+      <el-table-column align="center" label="应付金额" prop="amountPayable" />
+      <el-table-column align="center" label=" 已付金额" prop="unpaidAmount" />
+      <el-table-column align="center" label="余额" prop="syAmount" />
+      <!-- <el-table-column align="center" label="状态" prop="status" /> -->
+      <el-table-column align="center" label="操作" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <!-- <el-button v-permission="['customerInfo:customerinfo:edit']" type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button> -->
+          <el-button v-permission="['customerInfo:customerinfo:delete']" type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="listQuery.page"
+      :limit.sync="listQuery.limit"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改对话框 -->
+    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
+      <el-form
+        ref="dataForm"
+        :rules="rules"
+        :model="dataForm"
+        status-icon
+        label-position="left"
+        label-width="100px"
+        style="width: 400px; margin-left:50px;"
+      >
+        <el-form-item label="id" prop="id" hidden>
+          <el-input v-model="dataForm.id" />
+        </el-form-item>
+        <el-form-item label="客户" prop="customer">
+          <el-input v-model="dataForm.customer" />
+        </el-form-item>
+        <el-form-item label="应付金额" prop="amountPayable">
+          <el-input v-model="dataForm.amountPayable" :disabled="textMap[dialogStatus]=='编辑'"/>
+        </el-form-item>
+        <el-form-item label="已付金额" prop="unpaidAmount">
+          <el-input v-model="dataForm.unpaidAmount" />
+        </el-form-item>
+        <el-form-item label="余额" prop="syAmount">
+          <el-input v-model="dataForm.syAmount" :disabled="textMap[dialogStatus]=='编辑'"/>
+        </el-form-item>
+        <!-- <el-form-item label="状态" prop="status">
+          <el-input v-model="dataForm.status" />
+        </el-form-item> -->
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">取消</el-button>
+        <el-button v-if="dialogStatus=='create'" :loading="submiting" type="primary" @click="createData">确定</el-button>
+        <el-button v-else :loading="submiting" type="primary" @click="updateData">确定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  listCustomerInfo,
+  createCustomerInfo,
+  updateCustomerInfo,
+  deleteCustomerInfo
+} from '@/api/customerInfo'
+import Pagination from '@/components/Pagination'
+export default {
+  name: 'CustomerInfo',
+  components: { Pagination },
+  data() {
+    return {
+      list: null,
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        page: 1,
+        limit: 20
+      },
+      dataForm: {
+        id: undefined
+      },
+      dialogFormVisible: false,
+      submiting: false,
+      dialogStatus: '',
+      textMap: {
+        update: '编辑',
+        create: '创建'
+      },
+      rules: {
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    getList() {
+      this.listLoading = true
+      listCustomerInfo(this.listQuery).then(response => {
+        this.list = response.data.data.items
+        this.total = response.data.data.total
+        this.listLoading = false
+      })
+        .catch(() => {
+          this.list = []
+          this.total = 0
+          this.listLoading = false
+        })
+    },
+    handleFilter() {
+      this.listQuery.page = 1
+      this.getList()
+    },
+    resetForm() {
+      this.dataForm = {
+        id: undefined
+      }
+    },
+    handleCreate() {
+      this.resetForm()
+      this.dialogStatus = 'create'
+      this.dialogFormVisible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].clearValidate()
+      })
+    },
+    createData() {
+      this.$refs['dataForm'].validate(valid => {
+        if (valid) {
+          this.submiting = true
+          createCustomerInfo(this.dataForm).then(response => {
+            this.list.unshift(response.data.data)
+            this.dialogFormVisible = false
+            this.$notify.success({
+              title: '成功',
+              message: '添加成功'
+            })
+            this.submiting = false
+          })
+            .catch(response => {
+              this.$notify.error({
+                title: '失败',
+                message: response.data.errmsg
+              })
+              this.submiting = false
+            })
+        }
+      })
+    },
+    handleUpdate(row) {
+      this.dataForm = Object.assign({}, row)
+      this.dialogStatus = 'update'
+      this.dialogFormVisible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].clearValidate()
+      })
+    },
+    updateData() {
+      this.$refs['dataForm'].validate(valid => {
+        if (valid) {
+          this.submiting = true
+          updateCustomerInfo(this.dataForm).then(() => {
+            for (const v of this.list) {
+              if (v.id === this.dataForm.id) {
+                const index = this.list.indexOf(v)
+                this.list.splice(index, 1, this.dataForm)
+                break
+              }
+            }
+            this.dialogFormVisible = false
+            this.submiting = false
+            this.$notify.success({
+              title: '成功',
+              message: '更新成功'
+            })
+          })
+            .catch(response => {
+              this.$notify.error({
+                title: '失败',
+                message: response.data.errmsg
+              })
+              this.submiting = false
+            })
+        }
+      })
+    },
+    handleDelete(row) {
+      this.$confirm('此操作将永久删除该记录---' + row.id + '---, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        deleteCustomerInfo(row.id).then(response => {
+          this.$notify.success({
+            title: '成功',
+            message: '删除成功'
+          })
+          const index = this.list.indexOf(row)
+          this.list.splice(index, 1)
+        })
+          .catch(response => {
+            this.$notify.error({
+              title: '失败',
+              message: response.data.errmsg
+            })
+          })
+      }).catch(() => {
+        return false
+      })
+    }
+  }
+}
+</script>