src/api/cus.js

@@ -108,3 +108,11 @@ export function getStatList (param) {
     params: param
   })
 }
+
+// 客户详情
+export function getCustomerInfo (customerId) {
+  return request({
+    url: request.adornUrl(`/biz-service/cusCustomer/info/${customerId}`),
+    method: 'get'
+  })
+}

src/api/finance.js

@@ -18,6 +18,42 @@ export function getCustomerAccountInfo (params) {
   })
 }
 
+// 客户账款开票明细
+export function getCustomerInvoiceInfo (params) {
+  return request({
+    url: request.adornUrl(`/biz-service/finance/customer/invoice/info`),
+    method: 'get',
+    params: 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({
@@ -52,3 +88,37 @@ export function updateExpense (data) {
     data: data
   })
 }
+
+// 销售发票列表
+export function getSaleInvoiceList (params) {
+  return request({
+    url: request.adornUrl(`/biz-service/finance/invoice/list`),
+    method: 'get',
+    params: params
+  })
+}
+
+// 销售发票详情
+export function getSaleInvoiceDetail (id) {
+  return request({
+    url: request.adornUrl(`/biz-service/finance/invoice/info/${id}`),
+    method: 'get'
+  })
+}
+
+// 采购发票列表
+export function getPurchaseInvoiceList (params) {
+  return request({
+    url: request.adornUrl(`/biz-service/purchase/invoice/list`),
+    method: 'get',
+    params: params
+  })
+}
+
+// 采购发票详情
+export function getPurchaseInvoiceDetail (id) {
+  return request({
+    url: request.adornUrl(`/biz-service/purchase/invoice/info/${id}`),
+    method: 'get'
+  })
+}

src/api/sale.js

@@ -163,6 +163,14 @@ export function getSupplierList (params) {
   })
 }
 
+// 供应商名称列表
+export function getSupplierNameList () {
+  return request({
+    url: request.adornUrl(`/biz-service/supplier/name/list`),
+    method: 'get'
+  })
+}
+
 // 供应商详情
 export function getSupplierDetail (id) {
   return request({

src/views/modules/finance/customer-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: 'customer-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, customerAccount, customerId, formDisable) {
+      this.visible = true
+      this.id = id || 0
+      this.formDisable = formDisable
+      this.fileList = []
+      if (id && customerAccount) {
+        this.dataForm = {
+          customerAccountId: id,
+          customerAccountCode: customerAccount.customerAccountCode,
+          type: customerAccount.type,
+          contractNumber: customerAccount.contractNumber,
+          receivedPaidTime: customerAccount.receivedPaidTime,
+          currency: customerAccount.currency,
+          receivedPaidAmount: customerAccount.receivedPaidAmount,
+          notes: customerAccount.notes
+        }
+        customerAccount.attachList && customerAccount.attachList.forEach((item) => {
+          this.fileList.push({
+            name: item.fileName,
+            url: item.url,
+            id: item.url
+          })
+        })
+      }
+      this.dataForm.customerId = customerId
+      // 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/customer/account/save`) : this.$http.adornUrl(`/biz-service/finance/customer/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/customer-account-list.vue

@@ -0,0 +1,233 @@
+<template>
+  <div class="customer-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.customerAccountId, scope.row, true)">详情</el-button>
+            <el-button v-if="true" type="text" size="small" @refreshDataList="getDataList" @click="addOrUpdateHandle(scope.row.customerAccountId, 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 { getCustomerAccountInfo } from '@/api/finance'
+  import AddOrUpdate from './customer-account-add-or-update'
+  export default {
+    name: 'customer-account',
+    components: {
+      AddOrUpdate
+    },
+    props: {
+      customerId: {
+        type: [Number, String],
+        default: 0
+      }
+    },
+    data () {
+      return {
+        detailVisible: false,
+        addOrUpdateVisible: false,
+        dataForm: {
+          contractNumber: ''
+        },
+        newCustomerId: 0,
+        options: [],
+        dataList: [],
+        pageIndex: 1,
+        pageSize: 10,
+        totalPage: 0,
+        dataListLoading: false,
+        dataListSelections: [],
+        typeState: [ // 账款类别映射关系
+          {
+            code: '1',
+            value: '订单收款'
+          },
+          {
+            code: '2',
+            value: '订单退款'
+          }
+        ]
+      }
+    },
+    created () {
+      this.getDataList()
+    },
+    watch: {
+      customerId: {
+        handler (newVal, oldVal) {
+          this.newCustomerId = newVal
+        },
+        immediate: true
+      }
+    },
+    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.customerId, 'uuuuu')
+        this.dataListLoading = true
+        let params = {
+          'current': this.pageIndex,
+          'size': this.pageSize,
+          'customerId': this.newCustomerId,
+          'contractNumber': this.dataForm.contractNumber
+        }
+        getCustomerAccountInfo(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/customer-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' && customerId" ref="accountList" :customer-id="customerId" @changeDetailShow="changeDetailShow"/>
+  <invoice-list v-if="activeName === 'invoice' && customerId" ref="InvoiceList" :customer-id="customerId" @changeDetailShow="changeDetailShow"/>
+  </div>
+  
+</template>
+
+<script>
+  import AccountList from './customer-account-list'
+  import InvoiceList from './customer-invoice-list'
+  export default {
+    name: 'customer-detail',
+    components: {
+      AccountList, InvoiceList
+    },
+    data () {
+      return {
+        activeName: 'account',
+        detailShow: false,
+        customerId: 0
+      }
+    },
+    methods: {
+      onChose () {
+        console.log(1111)
+        this.$emit('onChose')
+      },
+      async init (customerId) {
+        this.customerId = customerId
+      },
+      handleClick (tab, event) {
+        // console.log(tab, event)
+      },
+      changeDetailShow (flag) {
+        console.log(flag)
+        this.detailShow = flag
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,236 @@
+<template>
+  <div class="customer-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 { getCustomerInvoiceInfo } from '@/api/finance'
+  export default {
+    name: 'customer-invoice-list',
+    components: {
+    },
+    props: {
+      customerId: {
+        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,
+          'customerId': this.customerId,
+          'invoiceNumber': this.dataForm.invoiceNumber,
+          'createTime': this.dataForm.createTime
+        }
+        getCustomerInvoiceInfo(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/customer.vue

@@ -91,7 +91,7 @@
           width="150"
           label="操作">
           <template slot-scope="scope">
-            <!-- <el-button v-if="true" type="text" size="small" @click="detailHandle(scope.row.customerId)">详情</el-button> -->
+            <el-button v-if="true" type="text" size="small" @click="detailHandle(scope.row.customerId)">详情</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -106,18 +106,18 @@
       </el-pagination>
     </template>
     <!-- 弹窗, 新增 / 修改 -->
-    <account-info v-if="detailVisible" ref="detail" @onChose="onChose"/>
+    <customer-detail v-if="detailVisible" ref="detail" @onChose="onChose"/>
   </div>
 </template>
 
 <script>
-  import AccountInfo from './customer-account-info'
+  import customerDetail from './customer-detail'
   import { getLevel } from '@/api/cus'
   import { getCustomerList } from '@/api/finance'
   export default {
     name: 'customer',
     components: {
-      AccountInfo
+      customerDetail
     },
     data () {
       return {

src/views/modules/finance/purchase-invoice-add-or-update.vue

@@ -0,0 +1,316 @@
+<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="code">
+              <el-input v-model="dataForm.code" :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="typeCode">
+              <el-input v-model="dataForm.typeCode" placeholder=""></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row class="my-row">
+          <el-col :span="8">
+            <el-form-item label="发票号" prop="invoiceNumber">
+              <el-input v-model="dataForm.invoiceNumber"  placeholder=""></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="开票电话" prop="phone">
+              <el-input v-model="dataForm.phone"  placeholder=""></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8" >
+            <el-form-item label="发票金额" prop="invoiceAmount">
+              <el-input v-model="dataForm.invoiceAmount"  placeholder=""></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+         
+        <el-row class="my-row">
+          <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="supplierId">
+              <el-select
+                v-model="dataForm.supplierId"
+                remote
+                @change="cusChange"
+                clearable
+                placeholder="请选择">
+                <el-option
+                  v-for="item in optionsCus"
+                  :key="item.supplierId"
+                  :label="item.supplierName"
+                  :value="item.supplierId">
+                </el-option>
+              </el-select>
+            </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>
+        <div v-loading="supplierLoading">
+        <h4>客户信息</h4>
+         <el-row class="my-row">
+          <el-col :span="8">
+            <el-form-item label="发票抬头" prop="invoiceTitle">
+              <el-input v-model="dataForm.invoiceTitle" :value="supplierInfo.invoiceTitle" disabled></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="企业税号" prop="taxNumber">
+              <el-input v-model="dataForm.taxNumber" :value="supplierInfo.taxNumber" disabled></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="开户银行" prop="bank">
+              <el-input v-model="dataForm.bank" :value="supplierInfo.bank" disabled></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row class="my-row">
+          <el-col :span="8">
+            <el-form-item label="银行账号" prop="account">
+              <el-input v-model="dataForm.account" :value="supplierInfo.account" disabled></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="电话" prop="tel">
+              <el-input v-model="dataForm.tel" :value="supplierInfo.tel" disabled></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="传真" prop="fax">
+              <el-input v-model="dataForm.fax" :value="supplierInfo.fax" disabled></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        </div>
+         
+      </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 { getSupplierNameList, getSupplierDetail } from '@/api/sale'
+  import { getPurchaseInvoiceDetail } from '@/api/finance'
+  import uploadComponent from '../common/upload-component'
+  export default {
+    name: 'purchase-invoice-add-or-update',
+    components: {
+      uploadComponent
+    },
+    data () {
+      return {
+        visible: false,
+        formDisable: false,
+        dataList: [],
+        fileList: [],
+        id: 0,
+        dataForm: {},
+        optionsType: [],
+        optionsApplier: [],
+        materialDetails: [],
+        optionsCus: [], // 供应商下拉列表
+        supplierInfo: {},
+        supplierVisible: false,
+        supplierLoading: false,
+        totalAmount: 0,
+        dataRule: {
+          type: [{ required: true, message: '发票类型不能为空', trigger: 'blur' }],
+          typeCode: [{ required: true, message: '发票类别代码不能为空', trigger: 'blur' }],
+          invoiceNumber: [{ required: true, message: '发票号不能为空', trigger: 'blur' }],
+          phone: [{ required: true, message: '开票电话不能为空', trigger: 'blur' }],
+          currency: [{ required: true, message: '币种不能为空', trigger: 'blur' }],
+          invoiceAmount: [{ required: true, message: '发票金额不能为空', trigger: 'blur' }],
+          supplierId: [{ required: true, message: '供应商不能为空', trigger: 'blur' }]
+        },
+        typeState: [ // 发票类型映射关系
+          {
+            code: '1',
+            value: '增值税专用发票'
+          },
+          {
+            code: '2',
+            value: '增值税普通发票'
+          },
+          {
+            code: '3',
+            value: '形式发票'
+          }
+        ],
+        currencyType: [ // 币种映射关系
+          {
+            code: '1',
+            value: '人民币'
+          }
+        ]
+      }
+    },
+    watch: {
+      'dataForm.customerId' (value) {
+        this.optionsCus.forEach(v => {
+          if (v.supplierId === value) {
+            this.dataForm.supplierName = v.supplierName
+          }
+        })
+      }
+    },
+    methods: {
+      onChose () {
+        this.$emit('onChose')
+      },
+      async init (id, formDisable) {
+        this.visible = true
+        this.id = id || 0
+        this.formDisable = formDisable
+        await getSupplierNameList().then(({data}) => {
+          if (data && data.code === '200') {
+            this.optionsCus = data.data
+          }
+        })
+        if (!id) return
+        await getPurchaseInvoiceDetail(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
+                })
+              })
+            }
+          }
+        })
+        await this.cusChange()
+      },
+      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
+            }
+            // 添加客户信息
+            if (this.dataForm.supplierId && this.supplierInfo) {
+              Object.assign(this.dataForm, this.supplierInfo)
+            }
+            // let finSalesInvoice = {finSalesInvoice: this.dataForm}
+            this.$http({
+              url: !this.id ? this.$http.adornUrl(`/biz-service/purchase/invoice/save`) : this.$http.adornUrl(`/biz-service/purchase/invoice/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
+      },
+      // 客户选中切换
+      cusChange () {
+        if (!this.dataForm.supplierId) {
+          this.supplierInfo = {}
+          this.supplierVisible = false
+        }
+        this.customerloading = true
+        getSupplierDetail(this.dataForm.supplierId).then(({data}) => {
+          if (data && data.code === '200') {
+            let supplierInfo = data.data
+            this.supplierInfo = {
+              invoiceTitle: supplierInfo.invoiceTitle,
+              taxNumber: supplierInfo.taxNumber,
+              bank: supplierInfo.bank,
+              account: supplierInfo.account,
+              tel: supplierInfo.tel,
+              fax: supplierInfo.fax
+            }
+          }
+          this.supplierloading = false
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

src/views/modules/finance/purchase-invoice.vue

@@ -0,0 +1,274 @@
+<template>
+  <!-- 采购发票管理 -->
+  <div class="purchase-invoice">
+    <template v-if="!addOrUpdateVisible">
+      <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" placeholder="开票日期"
+            value-format="yyyy-MM-dd"
+            clearable></el-date-picker>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="search()">查询</el-button>
+        </el-form-item>
+      </el-form>
+      <div style="margin-bottom:15px">
+        <el-button v-if="isAuth('finance:purchase-invoice:save')" type="primary" @click="addOrUpdateHandle(0, false)">新增发票</el-button>
+      </div>
+      <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"
+          :show-tooltip-when-overflow="true"
+          label="采购发票编码">
+        </el-table-column>
+        <el-table-column
+          prop="supplierName"
+          header-align="center"
+          align="center"
+          label="客户名称">
+        </el-table-column>
+        <el-table-column
+          prop="type"
+          header-align="center"
+          align="center"
+          min-width="120"
+          :show-tooltip-when-overflow="true"
+          :formatter="formatTypeState"
+          label="发票类型">
+        </el-table-column>
+        <el-table-column
+          prop="typeCode"
+          header-align="center"
+          align="center"
+          label="发票类别代码">
+        </el-table-column>
+        <el-table-column
+          prop="invoiceNumber"
+          header-align="center"
+          align="center"
+          label="发票号">
+        </el-table-column>
+        <el-table-column
+          prop="phone"
+          header-align="center"
+          align="center"
+          label="开票电话">
+        </el-table-column>
+        <el-table-column
+          prop="invoiceAmount"
+          header-align="center"
+          align="center"
+          label="发票金额">
+        </el-table-column>
+        <el-table-column
+          prop="currency"
+          header-align="center"
+          align="center"
+          :formatter="formatCurrencyType"
+          label="币种">
+        </el-table-column>
+        <el-table-column
+          prop="attachList"
+          header-align="center"
+          align="center"
+          min-width="120"
+          label="发票附件">
+          <template slot-scope="scope">
+            <div v-for="(item, index) in scope.row.attachList" style="display: inline">
+              <span v-if="index > 0">,</span>
+              <a :key="item.fileName + index" type="primary" href="#" @click="previewFile(item.fileName, item.url)">{{ item.fileName }}</a>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="creatorName"
+          header-align="center"
+          align="center"
+          label="开票人">
+        </el-table-column>
+        <el-table-column
+          prop="createTime"
+          header-align="center"
+          align="center"
+          :show-tooltip-when-overflow="true"
+          label="开票日期">
+        </el-table-column>
+        <el-table-column
+          prop="notes"
+          header-align="center"
+          align="center"
+          min-width="50"
+          :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="isAuth('finance:purchase-invoice:info')" type="text" size="small" @click="addOrUpdateHandle(scope.row.purchaseInvoiceId, true)">详情</el-button>
+            <el-button v-if="isAuth('finance:purchase-invoice:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.purchaseInvoiceId, 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" ref="addOrUpdate" @onChose="onChose"/>
+    <!-- 文件预览 -->
+    <preview-component v-if="previewVisible" ref="preview"/>
+  </div>
+</template>
+
+<script>
+  import AddOrUpdate from './purchase-invoice-add-or-update'
+  import PreviewComponent from '../common/preview-component'
+  import { getPurchaseInvoiceList } from '@/api/finance'
+
+  export default {
+    name: 'purchaseInvoice',
+    components: {
+      AddOrUpdate, PreviewComponent
+    },
+    data () {
+      return {
+        addOrUpdateVisible: false,
+        previewVisible: false,
+        dataForm: {
+          invoiceNumber: '',
+          createTime: ''
+        },
+        options: [],
+        dataList: [],
+        pageIndex: 1,
+        pageSize: 10,
+        totalPage: 0,
+        dataListLoading: false,
+        dataListSelections: [],
+        typeState: [ // 发票类型映射关系
+          {
+            code: '1',
+            value: '增值税专用发票'
+          },
+          {
+            code: '2',
+            value: '增值税普通发票'
+          },
+          {
+            code: '3',
+            value: '形式发票'
+          }
+        ],
+        currencyType: [ // 币种映射关系
+          {
+            code: '1',
+            value: '人民币'
+          }
+        ]
+      }
+    },
+    created () {
+      this.getDataList()
+    },
+    methods: {
+      onChose () {
+        this.addOrUpdateVisible = false
+      },
+      // 查询
+      search () {
+        this.pageIndex = 1
+        this.getDataList()
+      },
+      // 获取数据列表
+      getDataList () {
+        this.dataListLoading = true
+        let params = {
+          'current': this.pageIndex,
+          'size': this.pageSize
+        }
+        Object.assign(params, this.dataForm)
+        delete params.createTime
+        getPurchaseInvoiceList(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
+      },
+      // 格式化审批状态
+      formatTypeState (row) {
+        if (!row.type) return ''
+        const item1 = this.typeState.find((item) => item.code === row.type.toString())
+        return item1 ? item1.value : ''
+      },
+      // 格式化币种
+      formatCurrencyType (row) {
+        if (!row.type) return ''
+        const item1 = this.currencyType.find((item) => item.code === row.currency.toString())
+        return item1 ? item1.value : ''
+      },
+      // 预览
+      previewFile (fileName, url) {
+        this.previewVisible = true
+        this.$nextTick(() => {
+          this.$refs.preview.init(fileName, url)
+        })
+      },
+      // 新增/修改
+      addOrUpdateHandle (id, disable) {
+        this.addOrUpdateVisible = true
+        this.$nextTick(() => {
+          this.$refs.addOrUpdate.init(id, disable)
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

src/views/modules/finance/sale-invoice-add-or-update.vue

@@ -0,0 +1,309 @@
+<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="code">
+              <el-input v-model="dataForm.code" :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="typeCode">
+              <el-input v-model="dataForm.typeCode" placeholder=""></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row class="my-row">
+          <el-col :span="8">
+            <el-form-item label="发票号" prop="invoiceNumber">
+              <el-input v-model="dataForm.invoiceNumber"  placeholder=""></el-input>
+            </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="invoiceAmount">
+              <el-input v-model="dataForm.invoiceAmount"  placeholder=""></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row class="my-row">
+          <el-col :span="8">
+          <el-form-item label="客户名称" prop="customerId">
+            <el-select
+              v-model="dataForm.customerId"
+              remote
+              @change="cusChange"
+              clearable
+              placeholder="请选择">
+              <el-option
+                v-for="item in optionsCus"
+                :key="item.customerId"
+                :label="item.customerName"
+                :value="item.customerId">
+              </el-option>
+            </el-select>
+          </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>
+        <div v-loading="customerLoading">
+        <h4>客户信息</h4>
+         <el-row class="my-row">
+          <el-col :span="8">
+            <el-form-item label="发票抬头" prop="invoiceTitle">
+              <el-input v-model="dataForm.invoiceTitle" :value="customerInfo.invoiceTitle" disabled></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="企业税号" prop="taxNumber">
+              <el-input v-model="dataForm.taxNumber" :value="customerInfo.taxNumber" disabled></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="开户银行" prop="bank">
+              <el-input v-model="dataForm.bank" :value="customerInfo.bank" disabled></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row class="my-row">
+          <el-col :span="8">
+            <el-form-item label="银行账号" prop="account">
+              <el-input v-model="dataForm.account" :value="customerInfo.account" disabled></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="电话" prop="tel">
+              <el-input v-model="dataForm.tel" :value="customerInfo.tel" disabled></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="传真" prop="fax">
+              <el-input v-model="dataForm.fax" :value="customerInfo.fax" disabled></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        </div>
+         
+      </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 { getSaleInvoiceDetail } from '@/api/finance'
+  import { getCustomer, getCustomerInfo } from '@/api/cus'
+  import uploadComponent from '../common/upload-component'
+  export default {
+    name: 'sale-invoice-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' }],
+          typeCode: [{ required: true, message: '发票类别代码不能为空', trigger: 'blur' }],
+          invoiceNumber: [{ required: true, message: '发票号不能为空', trigger: 'blur' }],
+          currency: [{ required: true, message: '币种不能为空', trigger: 'blur' }],
+          invoiceAmount: [{ required: true, message: '发票金额不能为空', trigger: 'blur' }],
+          customerId: [{ required: true, message: '客户不能为空', trigger: 'blur' }]
+        },
+        typeState: [ // 发票类型映射关系
+          {
+            code: '1',
+            value: '增值税专用发票'
+          },
+          {
+            code: '2',
+            value: '增值税普通发票'
+          },
+          {
+            code: '3',
+            value: '形式发票'
+          }
+        ],
+        currencyType: [ // 币种映射关系
+          {
+            code: '1',
+            value: '人民币'
+          }
+        ]
+      }
+    },
+    watch: {
+      'dataForm.customerId' (value) {
+        this.optionsCus.forEach(v => {
+          if (v.customerId === value) {
+            this.dataForm.customerName = v.customerName
+          }
+        })
+      }
+    },
+    methods: {
+      onChose () {
+        this.$emit('onChose')
+      },
+      async init (id, formDisable) {
+        this.visible = true
+        this.id = id || 0
+        this.formDisable = formDisable
+        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
+                })
+              })
+            }
+          }
+        })
+        await this.cusChange()
+      },
+      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
+            }
+            // 添加客户信息
+            if (this.dataForm.customerId && this.customerInfo) {
+              Object.assign(this.dataForm, this.customerInfo)
+            }
+            // let finSalesInvoice = {finSalesInvoice: this.dataForm}
+            this.$http({
+              url: !this.id ? this.$http.adornUrl(`/biz-service/finance/invoice/save`) : this.$http.adornUrl(`/biz-service/finance/invoice/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
+      },
+      // 客户选中切换
+      cusChange () {
+        if (!this.dataForm.customerId) {
+          this.customerInfo = {}
+          this.customerVisible = false
+        }
+        this.customerloading = true
+        getCustomerInfo(this.dataForm.customerId).then(({data}) => {
+          if (data && data.code === '200') {
+            let customerInfo = data.data
+            this.customerInfo = {
+              invoiceTitle: customerInfo.invoiceTitle,
+              taxNumber: customerInfo.taxNumber,
+              bank: customerInfo.bank,
+              account: customerInfo.account,
+              tel: customerInfo.tel,
+              fax: customerInfo.fax
+            }
+          }
+          this.customerloading = false
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

src/views/modules/finance/sale-invoice.vue

@@ -0,0 +1,274 @@
+<template>
+  <!-- 销售发票管理 -->
+  <div class="sale-invoice">
+    <template v-if="!addOrUpdateVisible">
+      <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" placeholder="开票日期"
+            value-format="yyyy-MM-dd"
+            clearable></el-date-picker>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="search()">查询</el-button>
+        </el-form-item>
+      </el-form>
+      <div style="margin-bottom:15px">
+        <el-button v-if="isAuth('finance:sale-invoice:save')" type="primary" @click="addOrUpdateHandle(0, false)">新增发票</el-button>
+      </div>
+      <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"
+          :show-tooltip-when-overflow="true"
+          label="销售发票编码">
+        </el-table-column>
+        <el-table-column
+          prop="customerName"
+          header-align="center"
+          align="center"
+          label="客户名称">
+        </el-table-column>
+        <el-table-column
+          prop="type"
+          header-align="center"
+          align="center"
+          min-width="120"
+          :show-tooltip-when-overflow="true"
+          :formatter="formatTypeState"
+          label="发票类型">
+        </el-table-column>
+        <el-table-column
+          prop="typeCode"
+          header-align="center"
+          align="center"
+          label="发票类别代码">
+        </el-table-column>
+        <el-table-column
+          prop="invoiceNumber"
+          header-align="center"
+          align="center"
+          label="发票号">
+        </el-table-column>
+        <el-table-column
+          prop="invoiceTitle"
+          header-align="center"
+          align="center"
+          label="发票抬头">
+        </el-table-column>
+        <el-table-column
+          prop="invoiceAmount"
+          header-align="center"
+          align="center"
+          label="发票金额">
+        </el-table-column>
+        <el-table-column
+          prop="currency"
+          header-align="center"
+          align="center"
+          :formatter="formatCurrencyType"
+          label="币种">
+        </el-table-column>
+        <el-table-column
+          prop="attachList"
+          header-align="center"
+          align="center"
+          min-width="120"
+          label="发票附件">
+          <template slot-scope="scope">
+            <div v-for="(item, index) in scope.row.attachList" style="display: inline">
+              <span v-if="index > 0">,</span>
+              <a :key="item.fileName + index" type="primary" href="#" @click="previewFile(item.fileName, item.url)">{{ item.fileName }}</a>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="creatorName"
+          header-align="center"
+          align="center"
+          label="开票人">
+        </el-table-column>
+        <el-table-column
+          prop="createTime"
+          header-align="center"
+          align="center"
+          :show-tooltip-when-overflow="true"
+          label="开票日期">
+        </el-table-column>
+        <el-table-column
+          prop="notes"
+          header-align="center"
+          align="center"
+          min-width="50"
+          :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="isAuth('finance:sale-invoice:info')" type="text" size="small" @click="addOrUpdateHandle(scope.row.salesInvoiceId, true)">详情</el-button>
+            <el-button v-if="isAuth('finance:sale-invoice:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.salesInvoiceId, 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" ref="addOrUpdate" @onChose="onChose"/>
+    <!-- 文件预览 -->
+    <preview-component v-if="previewVisible" ref="preview"/>
+  </div>
+</template>
+
+<script>
+  import AddOrUpdate from './sale-invoice-add-or-update'
+  import PreviewComponent from '../common/preview-component'
+  import { getSaleInvoiceList } from '@/api/finance'
+
+  export default {
+    name: 'saleInvoice',
+    components: {
+      AddOrUpdate, PreviewComponent
+    },
+    data () {
+      return {
+        addOrUpdateVisible: false,
+        previewVisible: false,
+        dataForm: {
+          invoiceNumber: '',
+          createTime: ''
+        },
+        options: [],
+        dataList: [],
+        pageIndex: 1,
+        pageSize: 10,
+        totalPage: 0,
+        dataListLoading: false,
+        dataListSelections: [],
+        typeState: [ // 发票类型映射关系
+          {
+            code: '1',
+            value: '增值税专用发票'
+          },
+          {
+            code: '2',
+            value: '增值税普通发票'
+          },
+          {
+            code: '3',
+            value: '形式发票'
+          }
+        ],
+        currencyType: [ // 币种映射关系
+          {
+            code: '1',
+            value: '人民币'
+          }
+        ]
+      }
+    },
+    created () {
+      this.getDataList()
+    },
+    methods: {
+      onChose () {
+        this.addOrUpdateVisible = false
+      },
+      // 查询
+      search () {
+        this.pageIndex = 1
+        this.getDataList()
+      },
+      // 获取数据列表
+      getDataList () {
+        this.dataListLoading = true
+        let params = {
+          'current': this.pageIndex,
+          'size': this.pageSize
+        }
+        Object.assign(params, this.dataForm)
+        delete params.createTime
+        getSaleInvoiceList(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
+      },
+      // 格式化审批状态
+      formatTypeState (row) {
+        if (!row.type) return ''
+        const item1 = this.typeState.find((item) => item.code === row.type.toString())
+        return item1 ? item1.value : ''
+      },
+      // 格式化币种
+      formatCurrencyType (row) {
+        if (!row.type) return ''
+        const item1 = this.currencyType.find((item) => item.code === row.currency.toString())
+        return item1 ? item1.value : ''
+      },
+      // 预览
+      previewFile (fileName, url) {
+        this.previewVisible = true
+        this.$nextTick(() => {
+          this.$refs.preview.init(fileName, url)
+        })
+      },
+      // 新增/修改
+      addOrUpdateHandle (id, disable) {
+        this.addOrUpdateVisible = true
+        this.$nextTick(() => {
+          this.$refs.addOrUpdate.init(id, disable)
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

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>