供应商账款

src/api/finance.js

@@ -27,6 +27,33 @@ export function getCustomerInvoiceInfo (params) {
   })
 }
 
+// 供应商账款列表
+export function getSupplierList (params) {
+  return request({
+    url: request.adornUrl(`/biz-service/finance/supplier/list`),
+    method: 'get',
+    params: params
+  })
+}
+
+// 供应商账款明细
+export function getSupplierAccountInfo (params) {
+  return request({
+    url: request.adornUrl(`/biz-service/finance/supplier/account/info`),
+    method: 'get',
+    params: params
+  })
+}
+
+// 供应商开票明细
+export function getSupplierInvoiceInfo (params) {
+  return request({
+    url: request.adornUrl(`/biz-service/finance/supplier/invoice/info`),
+    method: 'get',
+    params: params
+  })
+}
+
 // 报销申请列表
 export function getExpenseList (params) {
   return request({

src/views/modules/finance/customer-account-list.vue

@@ -97,7 +97,7 @@
       </el-pagination>
     </template>
     <!-- 弹窗, 新增 / 修改 -->
-    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @onChose="onClose"/>
+    <add-or-update v-if="addOrUpdateVisible" @refreshDataList="getDataList" ref="addOrUpdate" @onChose="onClose"/>
   </div>
 </template>
 

src/views/modules/finance/supplier-account-add-or-update.vue

@@ -0,0 +1,238 @@
+<template>
+  <div>
+      <div class="my-title">{{ !id ? '新增': formDisable ? '详情' : '修改' }}</div>
+      <div style="margin-top: 20px"></div>
+      <el-form :model="dataForm" :rules="dataRule" ref="dataForm" :disabled="formDisable" label-width="auto">
+        <el-row class="my-row">
+          <el-col :span="8">
+            <el-form-item label="账款编码" prop="customerAccountCode">
+              <el-input v-model="dataForm.customerAccountCode" :disabled="true" placeholder="系统自动生成"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8" >
+            <el-form-item label="账款类型" prop="type">
+              <el-select v-model="dataForm.type" filterable placeholder="请选择">
+                <el-option
+                  v-for="item in typeState"
+                  :key="item.code"
+                  :label="item.value"
+                  :value="item.code">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8" >
+            <el-form-item label="合同号" prop="contractNumber">
+              <el-input v-model="dataForm.contractNumber" placeholder=""></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row class="my-row">
+          <el-col :span="8">
+            <el-form-item label="收付款时间" prop="receivedPaidTime">
+              <el-date-picker
+                v-model="dataForm.receivedPaidTime"
+                type="date"
+                value-format="yyyy-MM-dd">
+              </el-date-picker>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8" >
+            <el-form-item label="币种" prop="currency">
+              <el-select v-model="dataForm.currency" filterable placeholder="请选择">
+                <el-option
+                  v-for="item in currencyType"
+                  :key="item.code"
+                  :label="item.value"
+                  :value="item.code">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8" >
+            <el-form-item label="收付款金额" prop="receivedPaidAmount">
+              <el-input v-model="dataForm.receivedPaidAmount"  placeholder=""></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row class="my-row">
+          <el-col :span="15">
+            <el-form-item label="备注说明" prop="notes">
+              <el-input type="textarea" 
+                v-model="dataForm.notes" 
+                :rows="4" 
+                maxlength="300"
+                show-word-limit 
+                placeholder="备注说明"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row class="my-row">
+          <upload-component :title="'附件'" :accept="'*'" :file-obj-list="fileList" @uploadSuccess="uploadSuccess"/>
+        </el-row>
+         
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="onChose">取消</el-button>
+        <el-button v-if="!formDisable" type="primary" @click="dataFormSubmit()">确定</el-button>
+      </span>
+  </div>
+</template>
+
+<script>
+import uploadComponent from '../common/upload-component'
+export default {
+  name: 'supplier-account-add-or-update',
+  components: {
+    uploadComponent
+  },
+  data () {
+    return {
+      visible: false,
+      formDisable: false,
+      dataList: [],
+      fileList: [],
+      id: 0,
+      dataForm: {},
+      optionsType: [],
+      optionsApplier: [],
+      materialDetails: [],
+      optionsCus: [], // 客户下拉列表
+      customerInfo: {},
+      customerVisible: false,
+      customerLoading: false,
+      totalAmount: 0,
+      dataRule: {
+        type: [{ required: true, message: '账款类型不能为空', trigger: 'blur' }],
+        contractNumber: [{ required: true, message: '合同号不能为空', trigger: 'blur' }],
+        receivedPaidTime: [{ required: true, message: '收付款时间不能为空', trigger: 'blur' }],
+        receivedPaidAmount: [{ required: true, message: '收付款金额不能为空', trigger: 'blur' }],
+        currency: [{ required: true, message: '币种不能为空', trigger: 'blur' }]
+      },
+      typeState: [ // 账款类别映射关系
+        {
+          code: '1',
+          value: '采购付款'
+        },
+        {
+          code: '2',
+          value: '采购退款'
+        }
+      ],
+      currencyType: [ // 币种映射关系
+        {
+          code: '1',
+          value: '人民币'
+        }
+      ]
+    }
+  },
+  watch: {
+  },
+  methods: {
+    onChose () {
+      console.log(5555)
+      this.$emit('onChose')
+    },
+    async init (id, supplierAccount, supplierId, formDisable) {
+      this.visible = true
+      this.id = id || 0
+      this.formDisable = formDisable
+      this.fileList = []
+      if (id && supplierAccount) {
+        this.dataForm = {
+          supplierAccountId: id,
+          supplierAccountCode: supplierAccount.supplierAccountCode,
+          type: supplierAccount.type,
+          contractNumber: supplierAccount.contractNumber,
+          receivedPaidTime: supplierAccount.receivedPaidTime,
+          currency: supplierAccount.currency,
+          receivedPaidAmount: supplierAccount.receivedPaidAmount,
+          notes: supplierAccount.notes
+        }
+        supplierAccount.attachList && supplierAccount.attachList.forEach((item) => {
+          this.fileList.push({
+            name: item.fileName,
+            url: item.url,
+            id: item.url
+          })
+        })
+      }
+      this.dataForm.supplierId = supplierId
+      // await getCustomer().then(({data}) => {
+      //   if (data && data.code === '200') {
+      //     this.optionsCus = data.data
+      //   }
+      // })
+      // if (!id) return
+      // await getSaleInvoiceDetail(this.id).then(({data}) => {
+      //   if (data && data.code === '200') {
+      //     this.dataForm = data.data
+      //     // 文件列表
+      //     this.fileList = []
+      //     if (data.data.attachList) {
+      //       data.data.attachList.forEach((item) => {
+      //         this.fileList.push({
+      //           name: item.fileName,
+      //           url: item.url,
+      //           id: item.url
+      //         })
+      //       })
+      //     }
+      //   }
+      // })
+    },
+    validateField (type) {
+      this.$refs.dataForm.validateField(type)
+    },
+    // 表单提交
+    dataFormSubmit () {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          // 添加附件
+          let fList = this.fileList
+          if (fList.length > 0) {
+            this.dataForm.attachList = []
+            for (let i = 0; i < fList.length; i++) {
+              this.dataForm.attachList.push({
+                fileName: fList[i].name,
+                url: fList[i].url
+              })
+            }
+          } else {
+            this.$message.error('请上传文件')
+            return
+          }
+          // let finSalesInvoice = {finSalesInvoice: this.dataForm}
+          this.$http({
+            url: !this.id ? this.$http.adornUrl(`/biz-service/finance/supplier/account/save`) : this.$http.adornUrl(`/biz-service/finance/supplier/account/update`),
+            method: 'post',
+            data: this.$http.adornData(this.dataForm)
+          }).then(({data}) => {
+            if (data && data.code === '200') {
+              this.$message({
+                message: '操作成功',
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.onChose()
+                  this.$emit('refreshDataList')
+                }
+              })
+            } else {
+              this.$message.error(data.msg)
+            }
+          })
+        }
+      })
+    },
+    uploadSuccess (fileList) {
+      this.fileList = fileList
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/modules/finance/supplier-account-list.vue

@@ -0,0 +1,224 @@
+<template>
+  <div class="supplier-account-list">
+    <template v-if="!detailVisible && !addOrUpdateVisible">
+      <el-form :inline="true" :model="dataForm" @keyup.enter.native="search()">
+        <el-form-item label="合同号">
+          <el-input v-model="dataForm.contractNumber" placeholder="合同号" clearable/>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="search()">查询</el-button>
+          <el-button v-if="isAuth('finance:purchase-invoice:save')" type="primary" @click="addOrUpdateHandle(0, false)">新增收付款</el-button>
+        </el-form-item>
+      </el-form>
+      <el-table
+        :data="dataList"
+        border
+        v-loading="dataListLoading"
+        style="width: 100%;">
+        <el-table-column
+          label="序号"
+          type="index"
+          width="50"
+          align="center">
+        </el-table-column>
+        <el-table-column
+          prop="customerAccountCode"
+          header-align="center"
+          align="center"
+          min-width="120"
+          :show-tooltip-when-overflow="true"
+          label="账款编码">
+        </el-table-column>
+        <el-table-column
+          prop="type"
+          :formatter="typeFormat"
+          header-align="center"
+          align="center"
+          label="账款类别">
+        </el-table-column>
+        <el-table-column
+          prop="contractName"
+          header-align="center"
+          align="center"
+          min-width="120"
+          label="合同名称">
+        </el-table-column>
+        <el-table-column
+          prop="contractNumber"
+          header-align="center"
+          align="center"
+          min-width="120"
+          :show-tooltip-when-overflow="true"
+          label="合同号">
+        </el-table-column>
+        <el-table-column
+          prop="receivedPaidAmount"
+          header-align="center"
+          align="center"
+          width="200"
+          :show-tooltip-when-overflow="true"
+          label="收付款金额">
+        </el-table-column>
+        <el-table-column
+          prop="receivedPaidTime"
+          header-align="center"
+          :show-tooltip-when-overflow="true"
+          align="center"
+          label="收付款时间">
+        </el-table-column>
+        <el-table-column
+          prop="notes"
+          header-align="center"
+          align="center"
+          min-width="180"
+          :show-tooltip-when-overflow="true"
+          label="备注">
+        </el-table-column>
+        <el-table-column
+          fixed="right"
+          header-align="center"
+          align="center"
+          width="150"
+          label="操作">
+          <template slot-scope="scope">
+            <el-button v-if="true" type="text" size="small" @refreshDataList="getDataList" @click="addOrUpdateHandle(scope.row.supplierAccountId, scope.row, true)">详情</el-button>
+            <el-button v-if="true" type="text" size="small" @refreshDataList="getDataList" @click="addOrUpdateHandle(scope.row.supplierAccountId, scope.row, false)">编辑</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        @size-change="sizeChangeHandle"
+        @current-change="currentChangeHandle"
+        :current-page="pageIndex"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="pageSize"
+        :total="totalPage"
+        layout="total, sizes, prev, pager, next, jumper">
+      </el-pagination>
+    </template>
+    <!-- 弹窗, 新增 / 修改 -->
+    <add-or-update v-if="addOrUpdateVisible" @refreshDataList="getDataList" ref="addOrUpdate" @onChose="onClose"/>
+  </div>
+</template>
+
+<script>
+  import { getSupplierAccountInfo } from '@/api/finance'
+  import AddOrUpdate from './supplier-account-add-or-update'
+  export default {
+    name: 'supplier-account',
+    components: {
+      AddOrUpdate
+    },
+    props: {
+      supplierId: {
+        type: [Number, String],
+        default: 0
+      }
+    },
+    data () {
+      return {
+        detailVisible: false,
+        addOrUpdateVisible: false,
+        dataForm: {
+          contractNumber: ''
+        },
+        options: [],
+        dataList: [],
+        pageIndex: 1,
+        pageSize: 10,
+        totalPage: 0,
+        dataListLoading: false,
+        dataListSelections: [],
+        typeState: [ // 账款类别映射关系
+          {
+            code: '1',
+            value: '采购付款'
+          },
+          {
+            code: '2',
+            value: '采购退款'
+          }
+        ]
+      }
+    },
+    created () {
+      this.getDataList()
+    },
+    methods: {
+      onClose () {
+        console.log(3333)
+        this.addOrUpdateVisible = false
+        this.detailVisible = false
+        this.$emit('changeDetailShow', false)
+      },
+      // 查询
+      search () {
+        this.pageIndex = 1
+        this.getDataList()
+      },
+      // 获取数据列表
+      getDataList () {
+        console.log(this.supplierId, 'uuuuu')
+        this.dataListLoading = true
+        let params = {
+          'current': this.pageIndex,
+          'size': this.pageSize,
+          'supplierId': this.supplierId,
+          'contractNumber': this.dataForm.contractNumber
+        }
+        getSupplierAccountInfo(params).then(({data}) => {
+          if (data && data.code === '200') {
+            this.dataList = data.data.records
+            this.totalPage = Number(data.data.total)
+          } else {
+            this.dataList = []
+            this.totalPage = 0
+          }
+          this.dataListLoading = false
+        })
+      },
+      // 每页数
+      sizeChangeHandle (val) {
+        this.pageSize = val
+        this.pageIndex = 1
+        this.getDataList()
+      },
+      // 当前页
+      currentChangeHandle (val) {
+        this.pageIndex = val
+        this.getDataList()
+      },
+      // 多选
+      selectionChangeHandle (val) {
+        this.dataListSelections = val
+      },
+      // 转换属性“级别”
+      typeFormat (row) {
+        for (let i = 0; i < this.typeState.length; i++) {
+          if (this.typeState[i].code === String(row.type)) {
+            return this.typeState[i].value
+          }
+        }
+      },
+      detailHandle (id) {
+        this.detailVisible = true
+        // this.$nextTick(() => {
+        //   this.$refs.detail.init(id)
+        // })
+      },
+      // 新增/修改
+      addOrUpdateHandle (id, supplierAccount, disable) {
+        console.log(supplierAccount)
+        this.addOrUpdateVisible = true
+        this.$nextTick(() => {
+          this.$refs.addOrUpdate.init(id, supplierAccount, this.supplierId, disable)
+        })
+        this.$emit('changeDetailShow', true)
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

src/views/modules/finance/supplier-detail.vue

@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <el-tabs v-show="!detailShow" v-model="activeName" @tab-click="handleClick">
+      <el-tab-pane label="账款明细" name="account"></el-tab-pane>
+      <el-tab-pane label="开票明细" name="invoice"></el-tab-pane>
+    </el-tabs>
+    <span slot="footer" class="dialog-footer">
+        <el-button @click="onChose">取消</el-button>
+    </span>
+    <!-- 弹窗, 新增 / 修改 -->
+  <account-list v-if="activeName === 'account' && supplierId" ref="accountList" :supplier-id="supplierId" @changeDetailShow="changeDetailShow"/>
+  <invoice-list v-if="activeName === 'invoice' && supplierId" ref="InvoiceList" :supplier-id="supplierId" @changeDetailShow="changeDetailShow"/>
+  </div>
+  
+</template>
+
+<script>
+  import AccountList from './supplier-account-list'
+  import InvoiceList from './supplier-invoice-list'
+  export default {
+    name: 'supplier-detail',
+    components: {
+      AccountList, InvoiceList
+    },
+    data () {
+      return {
+        activeName: 'account',
+        detailShow: false,
+        supplierId: 0
+      }
+    },
+    methods: {
+      onChose () {
+        console.log(1111)
+        this.$emit('onChose')
+      },
+      async init (supplierId) {
+        this.supplierId = supplierId
+      },
+      handleClick (tab, event) {
+        // console.log(tab, event)
+      },
+      changeDetailShow (flag) {
+        console.log(flag)
+        this.detailShow = flag
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

src/views/modules/finance/supplier-invoice-list.vue

@@ -0,0 +1,236 @@
+<template>
+  <div class="supplier-invoice-list">
+    <template v-if="!detailVisible">
+      <el-form :inline="true" :model="dataForm" @keyup.enter.native="search()">
+        <el-form-item label="发票号">
+          <el-input v-model="dataForm.invoiceNumber" placeholder="发票号" clearable/>
+        </el-form-item>
+        <el-form-item label="开票日期">
+          <el-date-picker
+            v-model="dataForm.createTime"
+            type="date"
+            value-format="yyyy-MM-dd">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="search()">查询</el-button>
+        </el-form-item>
+      </el-form>
+      <el-table
+        :data="dataList"
+        border
+        v-loading="dataListLoading"
+        style="width: 100%;">
+        <el-table-column
+          label="序号"
+          type="index"
+          width="50"
+          align="center">
+        </el-table-column>
+        <el-table-column
+          prop="code"
+          header-align="center"
+          align="center"
+          min-width="120"
+          :show-tooltip-when-overflow="true"
+          label="发票编码">
+        </el-table-column>
+        <el-table-column
+          prop="type"
+          :formatter="typeFormat"
+          header-align="center"
+          align="center"
+          label="发票类型">
+        </el-table-column>
+        <el-table-column
+          prop="createTime"
+          header-align="center"
+          align="center"
+          min-width="120"
+          label="开票日期">
+        </el-table-column>
+        <el-table-column
+          prop="typeCode"
+          header-align="center"
+          align="center"
+          min-width="120"
+          label="发票类别代码">
+        </el-table-column>
+        <el-table-column
+          prop="invoiceNumber"
+          header-align="center"
+          align="center"
+          min-width="120"
+          label="发票号">
+        </el-table-column>
+        <el-table-column
+          prop="creatorName"
+          header-align="center"
+          align="center"
+          min-width="120"
+          label="开票人">
+        </el-table-column>
+        <el-table-column
+          prop="invoiceAmount"
+          header-align="center"
+          align="center"
+          min-width="120"
+          label="发票金额">
+        </el-table-column>
+        <el-table-column
+          prop="notes"
+          header-align="center"
+          align="center"
+          min-width="180"
+          :show-tooltip-when-overflow="true"
+          label="备注">
+        </el-table-column>
+        <el-table-column
+          fixed="right"
+          header-align="center"
+          align="center"
+          width="150"
+          label="操作">
+          <template slot-scope="scope">
+            <el-button v-if="true" type="text" size="small" @click="detailHandle(scope.row.customerAccountId, scope.row, true)">详情</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        @size-change="sizeChangeHandle"
+        @current-change="currentChangeHandle"
+        :current-page="pageIndex"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="pageSize"
+        :total="totalPage"
+        layout="total, sizes, prev, pager, next, jumper">
+      </el-pagination>
+    </template>
+    <!-- 弹窗, 新增 / 修改 -->
+    <!-- <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @onChose="onClose"/> -->
+  </div>
+</template>
+
+<script>
+  import { getSupplierInvoiceInfo } from '@/api/finance'
+  export default {
+    name: 'supplier-invoice-list',
+    components: {
+    },
+    props: {
+      supplierId: {
+        type: [Number, String],
+        default: 0
+      }
+    },
+    data () {
+      return {
+        detailVisible: false,
+        addOrUpdateVisible: false,
+        dataForm: {
+          contractNumber: ''
+        },
+        options: [],
+        dataList: [],
+        pageIndex: 1,
+        pageSize: 10,
+        totalPage: 0,
+        dataListLoading: false,
+        dataListSelections: [],
+        typeState: [ // 发票类型映射关系
+          {
+            code: '1',
+            value: '增值税专用发票'
+          },
+          {
+            code: '2',
+            value: '增值税普通发票'
+          },
+          {
+            code: '3',
+            value: '形式发票'
+          }
+        ]
+      }
+    },
+    created () {
+      this.getDataList()
+    },
+    methods: {
+      onClose () {
+        console.log(3333)
+        this.addOrUpdateVisible = false
+        this.detailVisible = false
+        this.$emit('changeDetailShow', false)
+      },
+      // 查询
+      search () {
+        this.pageIndex = 1
+        this.getDataList()
+      },
+      // 获取数据列表
+      getDataList () {
+        this.dataListLoading = true
+        let params = {
+          'current': this.pageIndex,
+          'size': this.pageSize,
+          'supplierId': this.supplierId,
+          'invoiceNumber': this.dataForm.invoiceNumber,
+          'createTime': this.dataForm.createTime
+        }
+        getSupplierInvoiceInfo(params).then(({data}) => {
+          if (data && data.code === '200') {
+            this.dataList = data.data.records
+            this.totalPage = Number(data.data.total)
+          } else {
+            this.dataList = []
+            this.totalPage = 0
+          }
+          this.dataListLoading = false
+        })
+      },
+      // 每页数
+      sizeChangeHandle (val) {
+        this.pageSize = val
+        this.pageIndex = 1
+        this.getDataList()
+      },
+      // 当前页
+      currentChangeHandle (val) {
+        this.pageIndex = val
+        this.getDataList()
+      },
+      // 多选
+      selectionChangeHandle (val) {
+        this.dataListSelections = val
+      },
+      // 转换属性“级别”
+      typeFormat (row) {
+        for (let i = 0; i < this.typeState.length; i++) {
+          if (this.typeState[i].code === String(row.type)) {
+            return this.typeState[i].value
+          }
+        }
+      },
+      detailHandle (id) {
+        this.detailVisible = true
+        // this.$nextTick(() => {
+        //   this.$refs.detail.init(id)
+        // })
+      },
+      // 新增/修改
+      addOrUpdateHandle (id, customerAccount, disable) {
+        console.log(customerAccount)
+        this.addOrUpdateVisible = true
+        this.$nextTick(() => {
+          this.$refs.addOrUpdate.init(id, customerAccount, this.customerId, disable)
+        })
+        this.$emit('changeDetailShow', true)
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

src/views/modules/finance/supplier.vue

@@ -0,0 +1,215 @@
+<template>
+  <div class="customer">
+    <template v-if="!detailVisible">
+      <el-form :inline="true" :model="dataForm" @keyup.enter.native="search()">
+        <el-form-item label="供应商名称">
+          <el-input v-model="dataForm.supplierName" placeholder="供应商名称" clearable/>
+        </el-form-item>
+        <el-form-item label="客户级别">
+          <el-select
+            v-model="dataForm.level"
+            remote
+            clearable
+            placeholder="请选择">
+            <el-option
+              v-for="item in options"
+              :key="item.code"
+              :label="item.value"
+              :value="item.code">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="search()">查询</el-button>
+        </el-form-item>
+      </el-form>
+      <el-table
+        :data="dataList"
+        border
+        v-loading="dataListLoading"
+        style="width: 100%;">
+        <el-table-column
+          label="序号"
+          type="index"
+          width="50"
+          align="center">
+        </el-table-column>
+        <el-table-column
+          prop="supplierName"
+          header-align="center"
+          align="center"
+          min-width="120"
+          :show-tooltip-when-overflow="true"
+          label="供应商名称">
+        </el-table-column>
+        <el-table-column
+          prop="level"
+          :formatter="levelFormat"
+          header-align="center"
+          align="center"
+          label="级别">
+        </el-table-column>
+        <el-table-column
+          prop="contact"
+          header-align="center"
+          align="center"
+          min-width="120"
+          label="对接业务员">
+        </el-table-column>
+        <el-table-column
+          prop="paidAmount"
+          header-align="center"
+          align="center"
+          min-width="120"
+          label="已付金额">
+        </el-table-column>
+        <el-table-column
+          prop="notPaidAmount"
+          header-align="center"
+          align="center"
+          width="200"
+          :show-tooltip-when-overflow="true"
+          label="待付金额">
+        </el-table-column>
+        <el-table-column
+          prop="invoicedAmount"
+          header-align="center"
+          align="center"
+          label="已开票金额">
+        </el-table-column>
+        <el-table-column
+          prop="notes"
+          header-align="center"
+          align="center"
+          min-width="180"
+          :show-tooltip-when-overflow="true"
+          label="备注">
+        </el-table-column>
+        <el-table-column
+          fixed="right"
+          header-align="center"
+          align="center"
+          width="150"
+          label="操作">
+          <template slot-scope="scope">
+            <el-button v-if="true" type="text" size="small" @click="detailHandle(scope.row.supplierId)">详情</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        @size-change="sizeChangeHandle"
+        @current-change="currentChangeHandle"
+        :current-page="pageIndex"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="pageSize"
+        :total="totalPage"
+        layout="total, sizes, prev, pager, next, jumper">
+      </el-pagination>
+    </template>
+    <!-- 弹窗, 新增 / 修改 -->
+    <supplier-detail v-if="detailVisible" ref="detail" @onChose="onChose"/>
+  </div>
+</template>
+
+<script>
+  import supplierDetail from './supplier-detail'
+  import { getLevel } from '@/api/cus'
+  import { getSupplierList } from '@/api/finance'
+  export default {
+    name: 'supplier',
+    components: {
+      supplierDetail
+    },
+    data () {
+      return {
+        detailVisible: false,
+        dataForm: {
+          supplierName: '',
+          level: ''
+        },
+        options: [],
+        dataList: [],
+        pageIndex: 1,
+        pageSize: 10,
+        totalPage: 0,
+        dataListLoading: false,
+        dataListSelections: []
+      }
+    },
+    created () {
+      this.getLevel()
+      this.getDataList()
+    },
+    methods: {
+      onChose () {
+        this.addOrUpdateVisible = false
+        this.detailVisible = false
+      },
+      // 查询
+      search () {
+        this.pageIndex = 1
+        this.getDataList()
+      },
+      getLevel () {
+        getLevel().then(({data}) => {
+          if (data && data.code === '200') {
+            this.options = data.data
+          }
+        })
+      },
+      // 获取数据列表
+      getDataList () {
+        this.dataListLoading = true
+        let params = {
+          'current': this.pageIndex,
+          'size': this.pageSize,
+          'supplierName': this.dataForm.supplierName,
+          'level': this.dataForm.level
+        }
+        getSupplierList(params).then(({data}) => {
+          if (data && data.code === '200') {
+            this.dataList = data.data.records
+            this.totalPage = Number(data.data.total)
+          } else {
+            this.dataList = []
+            this.totalPage = 0
+          }
+          this.dataListLoading = false
+        })
+      },
+      // 每页数
+      sizeChangeHandle (val) {
+        this.pageSize = val
+        this.pageIndex = 1
+        this.getDataList()
+      },
+      // 当前页
+      currentChangeHandle (val) {
+        this.pageIndex = val
+        this.getDataList()
+      },
+      // 多选
+      selectionChangeHandle (val) {
+        this.dataListSelections = val
+      },
+      // 转换属性“级别”
+      levelFormat (row) {
+        for (let i = 0; i < this.options.length; i++) {
+          if (this.options[i].code === row.level) {
+            return this.options[i].value
+          }
+        }
+      },
+      detailHandle (id) {
+        this.detailVisible = true
+        this.$nextTick(() => {
+          this.$refs.detail.init(id)
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>