<template> <a-card size="small" :bordered="false" class="salesManagementList-wrap"> <a-spin :spinning="spinning" tip="Loading..."> <!-- 搜索条件 --> <div ref="tableSearch" class="table-page-search-wrapper"> <a-form layout="inline"> <a-row :gutter="15"> <a-col :md="6" :sm="24"> <a-form-item label="费用单号" :label-col="{ span:7 }" :wrapper-col="{ span:17}"> <a-input id="salesManagementList-expenseAccountNo" v-model.trim="queryParam.expenseAccountNo" allowClear placeholder="请输入销售单号"/> </a-form-item> </a-col> <a-col :md="4" :sm="24"> <a-form-item label="申请人" :label-col="{ span:7 }" :wrapper-col="{ span:17}"> <employee style="width: 100%;" id="salesManagementList-Employee" v-model="queryParam.applyPersonSn"></employee> </a-form-item> </a-col> <a-col :md="4" :sm="24"> <a-form-item label="费用类型"> <expenseType id="salesManagementList-expenseType" :changeOnSelect="true" v-model="expenseTypes" @change="expenseChange" placeholder="请选择费用类型" ></expenseType> </a-form-item> </a-col> <a-col :md="4" :sm="24"> <a-form-item label="费用发生月份"> <a-month-picker placeholder="请选择月份" locale="zh-cn" v-model="queryParam.expenseDate" @change="onChange" :disabled-date="disabledDate" style="width: 100%;"/> </a-form-item> </a-col> <template v-if="advanced"> <a-col :md="6" :sm="24"> <a-form-item label="主题"> <a-input id="salesManagementList-title" v-model.trim="queryParam.title" allowClear placeholder="请输入主题"/> </a-form-item> </a-col> <a-col :md="4" :sm="24"> <a-form-item label="打印状态"> <v-select v-model="queryParam.printStatus" ref="printStatus" id="pushOrder-printStatus" code="PRINT_STATUS" placeholder="请选择打印状态" allowClear></v-select> </a-form-item> </a-col> <a-col :md="4" :sm="24"> <a-form-item label="状态"> <v-select v-model="queryParam.state" ref="state" id="salesManagementList-state" code="EXPENSE_STATE" placeholder="请选择状态" allowClear></v-select> </a-form-item> </a-col> </template> <a-col :md="6" :sm="24"> <span class="table-page-search-submitButtons"> <a-button type="primary" :disabled="disabled" @click="searchForm">查询</a-button> <a-button style="margin-left: 8px" :disabled="disabled" @click="resetSearchForm()">重置</a-button> <a @click="advanced=!advanced" style="margin-left: 8px"> {{ advanced ? '收起' : '展开' }} <a-icon :type="advanced ? 'up' : 'down'"/> </a> </span> </a-col> </a-row> </a-form> </div> <!-- 操作按钮 --> <div class="table-operator"> <a-button type="primary" class="button-error" v-if="$hasPermissions('B_eRNew')" @click="handleEdit()">新增</a-button> <a-button type="primary" :loading="spinning" @click="handlePlPrint()" ghost>批量打印</a-button> <span style="margin-left: 8px"> <template v-if="rowSelectionInfo && rowSelectionInfo.selectedRowKeys.length>0">{{ `已选 ${rowSelectionInfo.selectedRowKeys.length} 项` }}</template> </span> </div> <!-- 列表 --> <s-table class="sTable fixPagination" ref="table" :row-selection="$hasPermissions('B_eRPrint')?{ columnWidth: '4%', getCheckboxProps: record => ({ props: { disabled: false } })}:null" @rowSelection="rowSelectionFun" :style="{ height: tableHeight+70.5+'px' }" size="small" :rowKey="(record) => record.id" :columns="columns" :data="loadData" :scroll="{ y: tableHeight }" :defaultLoadData="false" bordered> <!-- 单号 --> <template slot="expenseAccountNo" slot-scope="text, record"> <span v-if="$hasPermissions('B_eRdetail')" class="link-bule" @click="handleDetail(record)">{{ record.expenseAccountNo }}</span> <div v-else>{{ record.expenseAccountNo||'--' }}</div> </template> <!-- 总数量 --> <template slot="totalQty" slot-scope="text, record"> {{ record.totalQty }} </template> <!-- 费用类型 --> <template slot="expenseType" slot-scope="text, record"> <div>{{ record.expenseTypeName || '--' }}<span v-if="record.expenseType2">/{{ record.expenseTypeName2 || '--' }}</span></div> </template> <!-- 操作 --> <template slot="action" slot-scope="text, record"> <a-button v-if="record.state=='WAIT_SUBMIT'&&$hasPermissions('B_ERtEdit')" size="small" type="link" class="button-info" @click="handleEdit(record)" > 编辑 </a-button> <a-button v-if="record.state=='WAIT_SUBMIT'&&$hasPermissions('B_ERDel')" size="small" type="link" class="button-error" @click="handleDel(record)" > 删除 </a-button> <a-button v-if="record.state!='WAIT_SUBMIT'&&$hasPermissions('B_ERAudit')" size="small" type="link" class="button-info" @click="handleSH(record)" > 审核进度 </a-button> <a-button v-if="record.state=='AUDIT_REJECT'" size="small" type="link" class="button-info" @click="againEdit(record)" > 再次编辑 </a-button> <!-- <span v-if="record.state=='AUDIT_REJECT' || record.state=='AUDIT_PASS'">--</span> --> </template> </s-table> </a-spin> <!-- 审核进度 --> <verifyModal v-drag :openModal="openModal" :itemSn="itemSn" @close="openModal=false"></verifyModal> <!-- 新增 --> <baseDataModal :show="openBaseModal" @close="openBaseModal=false"></baseDataModal> <!-- 打印预览 --> <previewModal ref="printModal" @printOk="printOk"></previewModal> </a-card> </template> <script> import { commonMixin } from '@/utils/mixin' import locale from 'ant-design-vue/es/date-picker/locale/zh_CN' import moment from 'moment' import subarea from '@/views/common/subarea.js' import employee from './employee.js' import { STable, VSelect } from '@/components' import verifyModal from './verifyModal.vue' import previewModal from './previewModal.vue' import expenseType from '@/views/common/expenseType.js' import { getBatchLastProcessInstance } from '@/api/financeBook' import { expenseAccountList, expenseAccountDelete, expenseAccountAgainEdit, expenseAcctDetailFindList } from '@/api/expenseManagement' import baseDataModal from './baseDataModal.vue' export default { name: 'ExpenseReimbursementList', mixins: [commonMixin], components: { STable, VSelect, subarea, verifyModal, baseDataModal, employee, expenseType, previewModal }, data () { let _this=this return { locale, spinning: false, advanced: false, // 高级搜索 展开/关闭 disabled: false, // 查询、重置按钮是否可操作 openModal: false, // 审核进度弹框是否显示 openBaseModal: false, // 基础信息新建 itemSn: '', // 费用单sn tableHeight: 0, expenseTypes: [], // 查询参数 queryParam: { expenseDate: moment().format('YYYY-MM'), // 月份 expenseAccountNo: '', // 费用单号 title: '', // 主题 expenseType: undefined, // 费用类型 expenseType2: undefined, // 费用类型2 printStatus: undefined, // 打印状态 state: undefined // 状态 }, columns: [ { title: '序号', dataIndex: 'no', width: '4%', align: 'center' }, { title: '费用单号', width: '8%', align: 'center', scopedSlots: { customRender: 'expenseAccountNo' } }, { title: '申请人', dataIndex: 'applyPersonName', width: '6%', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true }, { title: '申请部门', dataIndex: 'applyDepartmentName', width: '8%', align: 'left', customRender: function (text) { return text || '--' } }, { title: '费用类型', scopedSlots: { customRender: 'expenseType' }, width: '8%', align: 'left' }, { title: '费用发生月份', dataIndex: 'expenseDate', width: '6%', align: 'center', customRender: function (text) { return moment(text).format('YYYY年MM月') || '--' } }, { title: '主题', dataIndex: 'title', width: '10%', align: 'left', customRender: function (text) { return text || '--' }, ellipsis: true }, { title: '合计金额', dataIndex: 'applyExpenseTotal', width: '6%', align: 'right', customRender: function (text) { return ((text || text == 0) ? _this.toThousands(text) : '--') } }, { title: '创建时间', dataIndex: 'createDate', width: '8%', align: 'center', customRender: function (text) { return text || '--' } }, { title: '审核时间', dataIndex: 'finishDate', width: '8%', align: 'center', customRender: function (text, record) { return record.state == 'AUDIT_REJECT' || record.state == 'AUDIT_PASS' ? text : '--' } }, { title: '打印状态', dataIndex: 'printStatusDictValue', width: '6%', align: 'center', customRender: function (text) { return text || '--' } }, { title: '状态', dataIndex: 'stateDictValue', width: '6%', align: 'center', customRender: function (text) { return text || '--' } }, { title: '操作', scopedSlots: { customRender: 'action' }, width: '10%', align: 'center' } ], // 加载数据方法 必须为 Promise 对象 loadData: parameter => { this.disabled = true this.spinning = true delete parameter.tableId delete parameter.index const params = Object.assign(parameter, this.queryParam) if (params.expenseDate) { params.expenseDate = params.expenseDate + '-01' } return expenseAccountList(params).then(res => { let data if (res.status == 200) { data = res.data const no = (data.pageNo - 1) * data.pageSize for (var i = 0; i < data.list.length; i++) { data.list[i].no = no + i + 1 data.list[i].content = data.list[i].content ? data.list[i].content.replace(/\n+/, '\n').split('\n') : '' } this.disabled = false } this.spinning = false return data }) }, rowSelectionInfo: null // 批量选择的数据 } }, methods: { // 表格选中项 rowSelectionFun (obj) { this.rowSelectionInfo = obj || null }, printOk(res){ this.spinning = false if(res&&res.status == 200){ this.$refs.table.refresh() } }, // 批量打印 async handlePlPrint () { const _this = this const rows = _this.rowSelectionInfo && _this.rowSelectionInfo.selectedRows || [] const slen = rows.length if (!_this.rowSelectionInfo || (_this.rowSelectionInfo && slen < 1)) { _this.$message.warning('请在列表勾选后再进行批量操作!') return false } this.spinning = true const pageData = [] const businessSnList = [] for(let i=0;i<rows.length;i++){ // 费用明细 const fyListData = await expenseAcctDetailFindList({ expenseAccountSn: rows[i].expenseAccountSn }).then(res => res.data) // 审核明细,待提交状态不获取 if(rows[i].state != 'WAIT_SUBMIT'){ businessSnList.push(rows[i].expenseAccountSn) } pageData.push({ expenseInfo: rows[i], fyListData: fyListData, spListData: [] }) } // 获取审核进度信息 const spListData = await getBatchLastProcessInstance({ 'businessType': 'EXPENSES', 'businessSnList': businessSnList }).then(res => res.data) pageData.map(item => { const sp = spListData[item.expenseInfo.expenseAccountSn] item.spListData = sp ? sp.taskVOList : [] }) console.log(pageData) this.$refs.printModal.setData(pageData) }, onChange (date, dateString) { this.queryParam.expenseDate = dateString }, disabledDate (current) { return current && current > moment().endOf('day') }, expenseChange (val, opts) { console.log(val, opts) this.expenseTypes = val || [] this.queryParam.expenseType = val && val[0] ? val[0] : '' this.queryParam.expenseType2 = val && val[1] ? val[1] : '' }, // 详情 handleDetail (row) { this.$router.push({ name: 'expenseReimbursementListDetail', params: { sn: row.expenseAccountSn } }) }, // 新增、编辑 handleEdit (row) { if (row && row.expenseAccountSn) { this.$router.push({ name: 'expenseReimbursementEdit', params: { sn: row.expenseAccountSn } }) } else { this.openBaseModal = true } }, // 删除 handleDel (row) { const _this = this this.$confirm({ title: '提示', content: '确认要删除吗?', centered: true, closable: true, onOk () { _this.spinning = true expenseAccountDelete({ expenseAccountSn: row.expenseAccountSn }).then(res => { if (res.status == 200) { _this.$message.success(res.message) _this.$refs.table.refresh() _this.spinning = false } else { _this.spinning = false } }) } }) }, // 审核进度 handleSH (row) { this.openModal = true this.itemSn = row.expenseAccountSn }, // 再次编辑 againEdit (row) { const _this = this this.$confirm({ title: '操作提示', content: '系统将自动生成一个新的费用报销单,与原审核不通过的单据内容相同。您可以对新单据进行编辑、提交等操作,原单据保持不变,确认操作吗?', centered: true, closable: true, onOk () { _this.spinning = true expenseAccountAgainEdit({ expenseAccountSn: row.expenseAccountSn }).then(res => { if (res.status == 200) { _this.$message.success(res.message) _this.resetSearchForm() } _this.spinning = false }) } }) }, searchForm(){ this.$refs.table.refresh(true) this.$refs.table.clearSelected() }, // 重置 resetSearchForm () { this.queryParam = { expenseDate: '', // 月份 expenseAccountNo: '', // 费用单号 title: '', // 主题 expenseType: undefined, // 费用类型 expenseType2: undefined, // 费用类型2 state: undefined, // 状态 applyPersonSn: undefined } this.expenseTypes = [] this.searchForm() }, pageInit () { const _this = this this.$nextTick(() => { // 页面渲染完成后的回调 _this.setTableH() }) }, setTableH () { const tableSearchH = this.$refs.tableSearch.offsetHeight this.tableHeight = window.innerHeight - tableSearchH - 220 } }, watch: { advanced (newValue, oldValue) { const _this = this this.$nextTick(() => { // 页面渲染完成后的回调 _this.setTableH() }) }, '$store.state.app.winHeight' (newValue, oldValue) { // 窗口变更时,需同时更改表格高度 this.setTableH() } }, mounted () { if (!this.$store.state.app.isNewTab) { // 页签刷新时调用 this.pageInit() this.resetSearchForm() } }, activated () { // 如果是新页签打开,则重置当前页面 if (this.$store.state.app.isNewTab) { this.pageInit() this.resetSearchForm() } // 仅刷新列表,不重置页面 if (this.$store.state.app.updateList) { this.pageInit() this.$refs.table.refresh() } }, beforeRouteEnter (to, from, next) { next(vm => {}) } } </script> <style lang="less"> .salesManagementList-wrap{ .sTable{ .badge-con-t{ .ant-badge-count{ transform: scale(0.8); font-size: 13px; } } } } </style>