xg_reimbursement_vue/src/views/modules/reimbursementSys/reimbursementList.vue

<template>

  <div class="page">
    <el-form size="small" :inline="true"  class="query-form" ref="searchForm" :model="searchForm"  @keyup.enter.native="refreshList()" @submit.native.prevent>
      <el-form-item prop="businessCode">
        <el-input size="small"  v-model="searchForm.businessCode"   placeholder="业务编号"   clearable></el-input>
      </el-form-item>
      <el-form-item prop="invoiceNumber">
        <el-input size="small"  v-model="searchForm.invoiceNumber"   placeholder="发票号码"   clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button  type="primary" @click="refreshList()" size="small" icon="el-icon-search">查询</el-button>
        <el-button @click="resetSearch()" size="small" icon="el-icon-refresh-right">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="bg-white top">
      <vxe-toolbar :refresh="{query: refreshList}" export print custom>
        <template #buttons>
          <el-row>
            <el-upload style="float: left"
                       class="upload-demo"
                       :on-success="uploadSuccess"
                       :show-file-list="false"
                       :before-upload="beforeUpload"
                       :action="`${$http.BASE_URL}/reimbursement/uploadFile`"
                       multiple
                       list-type="picture">
              <el-button size="small"
                         icon="el-icon-upload"
                         type="primary">点击上传</el-button>
            </el-upload>


            <el-button style="margin-left: 10px" v-if="hasPermission('reimbursement:del')" :disabled="$refs.xTree && $refs.xTree.getCheckboxRecords().length === 0" type="danger" size="small" icon="el-icon-delete" @click="del()" plain>删除</el-button>

          </el-row>

        </template>
      </vxe-toolbar>
      <div style="height: calc(100% - 80px);">
        <vxe-table
          ref="xTree"
          border="inner"
          auto-resize
          resizable
          height="auto"
          row-id="id"
          size="small"
          show-header-overflow
          show-overflow
          highlight-hover-row
          :print-config="{}"
          :export-config="{}"
          :tree-config="{expandAll: true}"
          :loading="loading"
          :checkbox-config="{labelField: ''}"
          :data="dataList">
          <vxe-column type="checkbox" width="40px"> </vxe-column>
          <vxe-column  width="140px" title="业务编号"  field="businessCode"  align="left" tree-node >
            <template slot-scope="scope">
              <el-link  type="primary" :underline="false" v-if="scope.row.parentId == '0'" @click="view(scope.row.id)">{{scope.row.businessCode}}</el-link>
              <span v-else></span>
            </template>
          </vxe-column>
          <vxe-column  width="100px" title="发票代码" field="invoiceCode" align="center" ></vxe-column>
          <vxe-column  width="100px" title="发票号码" field="invoiceNumber" align="center"></vxe-column>
          <vxe-column  width="100px" title="金额" field="money" align="center"></vxe-column>
          <vxe-column  width="100px" title="税额" field="tax" align="center"></vxe-column>
          <vxe-column  width="100px" title="收入" field="income" align="center"></vxe-column>
          <vxe-column  width="100px" title="报销比例" field="reimbursementRatio" align="center"></vxe-column>
          <vxe-column  width="200px" title="购方企业名称" field="firmName" align="center"></vxe-column>
          <vxe-column  width="100px" title="开票日期" field="makeTime" align="center"></vxe-column>
          <vxe-column  width="150px" title="商品名称" field="name" align="center"></vxe-column>
          <vxe-column  width="100px" title="申请人" field="proposer" align="center"></vxe-column>
          <vxe-column  width="100px" title="合伙人" field="partner" align="center"></vxe-column>
          <vxe-column  width="100px" title="业务类型" field="businessType" align="center"></vxe-column>
          <vxe-column  width="100px" title="收款日期" field="gatheringTime" align="center"></vxe-column>



          <vxe-column title="操作" width="300px" fixed="right" align="center">
            <template slot-scope="scope">
              <el-button v-if="hasPermission('reimbursement:edit') && scope.row.businessCode==='' && scope.row.parentId === '0'" type="text" icon="el-icon-edit" size="small" @click="editBusiness(scope.row.id)">修改业务编码</el-button>
              <el-button v-if="hasPermission('reimbursement:edit') && scope.row.businessCode !== '' && !scope.row.reimbursementRatio && scope.row.parentId === '0'" type="text" icon="el-icon-edit" size="small" @click="editBusinessRatio(scope.row.id)">编辑报销比例</el-button>
              <el-button v-if="hasPermission('reimbursementBusiness:add') && scope.row.businessCode !== '' && scope.row.reimbursementRatio && scope.row.parentId === '0'" type="text" icon="el-icon-plus" size="small" @click="addBusinessInfo(scope.row.id, scope.row.businessCode)">业务报销</el-button>
              <el-button v-if="hasPermission('reimbursementBusiness:view') && scope.row.businessCode !== '' && scope.row.reimbursementRatio && scope.row.parentId === '0'" type="text" icon="el-icon-view" size="small" @click="viewBusinessInfo(scope.row.id)">业务报销详情</el-button>
              <el-button v-if="hasPermission('reimbursement:view') && scope.row.parentId !== '0'" type="text" icon="el-icon-view" size="small" @click="viewInvoice(scope.row.id)">查看发票详情</el-button>
              <el-button v-if="hasPermission('reimbursement:edit') && scope.row.parentId !== '0' && !scope.row.gatheringTime" type="text" icon="el-icon-edit" size="small" @click="editInvoice(scope.row.id)">发票收款</el-button>
              <el-button v-if="hasPermission('reimbursement:del') && scope.row.parentId === '0'" type="text" icon="el-icon-delete" size="small" @click="delBusiness(scope.row.id)">删除</el-button>
              <el-button v-if="hasPermission('reimbursement:del') && scope.row.parentId !== '0'" type="text" icon="el-icon-delete" size="small" @click="delInvoice(scope.row.id)">删除</el-button>
            </template>
          </vxe-column>
        </vxe-table>
        <vxe-pager
          background
          size="small"
          :current-page="tablePage.currentPage"
          :page-size="tablePage.pageSize"
          :total="tablePage.total"
          :page-sizes="[10, 20, 100, 1000, {label: '全量数据', value: 1000000}]"
          :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
          @page-change="currentChangeHandle">
        </vxe-pager>
      </div>
    </div>
    <!-- 弹窗, 新增 / 修改 -->
    <reimbursementForm ref="reimbursementForm" @refreshDataList="refreshList"></reimbursementForm>
    <reimbursementRatioForm ref="reimbursementRatioForm" @refreshDataList="refreshList"></reimbursementRatioForm>
    <reimbursementBusinessForm ref="reimbursementBusinessForm" @refreshDataList="refreshList"></reimbursementBusinessForm>
    <reimbursementBusinessList ref="reimbursementBusinessList" @refreshDataList="refreshList"></reimbursementBusinessList>
    <reimbursementInvoiceForm ref="reimbursementInvoiceForm" @refreshDataList="refreshList"></reimbursementInvoiceForm>
  </div>


</template>
<script>
import ReimbursementSys from '@/api/reimbursementSys/reimbursementSysService'
import XEUtils from 'xe-utils'
import reimbursementForm from './reimbursementForm'
import reimbursementRatioForm from './reimbursementRatioForm'
import reimbursementInvoiceForm from './reimbursementInvoiceForm'
import reimbursementBusinessForm from './reimbursementBusinessForm'
import reimbursementBusinessList from './reimbursementBusinessList'
export default {
  data () {
    return {
      dataList: [],
      searchForm: {
        businessCode: '',
        invoiceNumber: '',
        reimbursementRatio: ''
      },
      tablePage: {
        total: 0,
        currentPage: 1,
        pageSize: 10,
        orders: [{column: 'a.create_date', asc: false}]
      },
      loading: false
    }
  },
  components: {
    reimbursementForm,
    reimbursementRatioForm,
    reimbursementInvoiceForm,
    reimbursementBusinessForm,
    reimbursementBusinessList
  },
  ReimbursementSys: null,
  created () {
    this.reimbursementSys = new ReimbursementSys()
  },
  activated () {
    this.refreshList()
  },
  methods: {
    // 获取数据列表
    refreshList () {
      this.loading = true
      this.reimbursementSys.treeData({
        'current': this.tablePage.currentPage,
        'size': this.tablePage.pageSize,
        'orders': this.tablePage.orders,
        ...this.searchForm
      }).then(({data}) => {
        this.dataList = data
        this.tablePage.total = data.total
        this.handleSearch()
        this.loading = false
      })
    },
    beforeUpload (file) {
      const isExcel = file.name.indexOf('.xls') >= 0 || file.name.indexOf('.xlsx') >= 0
      const isLt2M = file.size / 1024 / 1024 < 1
      if (!isExcel) {
        this.$message.error('只能上传xls、xlsx文件!')
        return false
      }
      if (!isLt2M) {
        this.$message.error('上传文件大小不能超过 10MB!')
        return false
      }
      this.loading = true
      return true
    },
    handleSearch () {
      let name = XEUtils.toValueString(this.searchForm.businessCode).trim()
      let options = { children: 'children' }
      let searchProps = ['name']
      this.dataList = XEUtils.searchTree(
        this.dataList.records, item => searchProps.some(key => XEUtils.toValueString(item[key]).indexOf(name) >= -1), options)
      this.$nextTick(() => {
        this.$refs.xTree.setAllTreeExpand(true)
      })
    },
    resetSearch () {
      this.$refs.searchForm.resetFields()
      this.refreshList()
    },
    uploadSuccess (res, file) {
      if (res.success) {
        this.$message.success({dangerouslyUseHTMLString: true,
          message: res.message})
        this.refreshList()
      } else {
        this.$message.error(res.message)
        this.refreshList()
      }
    },
    // 当前页
    currentChangeHandle ({ currentPage, pageSize }) {
      this.tablePage.currentPage = currentPage
      this.tablePage.pageSize = pageSize
      this.refreshList()
    },
    // 修改
    editBusiness (id) {
      this.$refs.reimbursementForm.init('editBusiness', {id: id, parent: {id: '', name: ''}})
    },
    // 修改
    editBusinessRatio (id) {
      this.$refs.reimbursementRatioForm.init('editBusinessRatio', {id: id, parent: {id: '', name: ''}})
    },
    // 修改
    addBusinessInfo (id, businessCode) {
      this.$refs.reimbursementBusinessForm.init('addBusinessInfo', {id: '', businessCodeId: id, businessCode: businessCode, parent: {id: '', name: ''}})
    },
    // 查看业务报销详情
    viewBusinessInfo (id) {
      this.$router.push({path: `/reimbursementSys/reimbursementBusinessList`, query: {id: id, title: '业务报销详情'}})
    },
    // 修改发票信息
    editInvoice (id) {
      this.$refs.reimbursementInvoiceForm.init('editInvoice', {id: id, parent: {id: '', name: ''}})
    },
    // 查看
    view (id) {
      this.$refs.reimbursementForm.init('view', {id: id, parent: {id: '', name: ''}})
    },
    // 查看发票信息
    viewInvoice (id) {
      this.$refs.reimbursementInvoiceForm.init('viewInvoice', {id: id, parent: {id: '', name: ''}})
    },
    // 删除
    delBusiness (id) {
      let ids = id || this.$refs.xTree.getCheckboxRecords().map(item => {
        return item.id
      }).join(',')
      this.$confirm(`确定删除该记录吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        this.reimbursementSys.deleteBusiness(ids).then(({data}) => {
          this.loading = false
          this.$message({
            message: data,
            type: 'success',
            duration: 1500
          })
          this.refreshList()
        })
      })
    },
    // 删除
    delInvoice (id) {
      let ids = id || this.$refs.xTree.getCheckboxRecords().map(item => {
        return item.id
      }).join(',')
      this.$confirm(`确定删除该记录吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        this.reimbursementSys.deleteInvoice(ids).then(({data}) => {
          this.loading = false
          this.$message({
            message: data,
            type: 'success',
            duration: 1500
          })
          this.refreshList()
        })
      })
    },
    // 删除
    del (id) {
      let ids = id || this.$refs.xTree.getCheckboxRecords().map(item => {
        return item.id
      }).join(',')
      this.$confirm(`确定删除该记录吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        this.reimbursementSys.delete(ids).then(({data}) => {
          this.loading = false
          this.$message({
            message: data,
            type: 'success',
            duration: 1500
          })
          this.refreshList()
        })
      })
    }
  }

}
</script>