<template>
|
<a-card :bordered="false">
|
<!-- 查询区域 -->
|
<div class="table-page-search-wrapper">
|
<a-form layout="inline" @keyup.enter.native="searchQuery">
|
<a-row :gutter="24">
|
|
<a-col :md='6' :sm='12'>
|
<a-form-item label='项目编号'>
|
<j-search-select-tag
|
placeholder='请输入或选择项目编号'
|
v-model='queryParam.xmbh'
|
dict='pro_project,xmbh,id'
|
:async='true'>
|
</j-search-select-tag>
|
</a-form-item>
|
</a-col>
|
|
<a-col :md='6' :sm='12'>
|
<a-form-item label='项目名称'>
|
<j-search-select-tag
|
placeholder='请输入或选择项目名称'
|
v-model='queryParam.xmmc'
|
dict='pro_project,xmmc,id'
|
:pageSize='10000'
|
:async='true'>
|
</j-search-select-tag>
|
</a-form-item>
|
</a-col>
|
|
|
<template v-if="toggleSearchStatus">
|
|
</template>
|
|
<a-col :md="6" :sm="8">
|
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
|
<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
|
<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
|
<a @click="handleToggleSearch" style="margin-left: 8px">
|
{{ toggleSearchStatus ? '收起' : '展开' }}
|
<a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
|
</a>
|
</span>
|
</a-col>
|
|
</a-row>
|
</a-form>
|
</div>
|
|
<!-- 操作按钮区域 -->
|
<div class="table-operator" style="border-top: 5px">
|
<a-button @click='openPaymentProjectModal' type='primary' icon='plus'>新增发放</a-button>
|
<a-button type="primary" icon="download" @click="handleExportXls('奖金发放信息')">导出</a-button>
|
<a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
|
<a-button type="primary" icon="import">导入</a-button>
|
</a-upload>
|
<a-dropdown v-if="selectedRowKeys.length > 0">
|
<a-menu slot="overlay" @click="handleMenuClick">
|
<a-menu-item key="1">
|
<a-icon type="delete" @click="batchDel"/>
|
删除
|
</a-menu-item>
|
</a-menu>
|
<a-button style="margin-left: 8px">
|
批量操作
|
<a-icon type="down"/>
|
</a-button>
|
</a-dropdown>
|
|
</div>
|
|
<!-- table区域-begin -->
|
<div>
|
<div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
|
<i class="anticon anticon-info-circle ant-alert-icon"></i>已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
|
<a style="margin-left: 24px" @click="onClearSelected">清空</a>
|
</div>
|
|
<a-table
|
style='height: 500px'
|
:scroll="{ x: 1200 }"
|
ref="table"
|
bordered
|
size="middle"
|
rowKey="id"
|
:columns="columns"
|
:dataSource="dataSource"
|
:pagination="ipagination"
|
:loading="loading"
|
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
|
@change="handleTableChange"
|
@expand='handleExpand'>
|
|
<!-- 字符串超长截取省略号显示-->
|
<span slot="esContent5" slot-scope="text">
|
<j-ellipsis :value="text" :length="5" />
|
</span>
|
<span slot="esContent10" slot-scope="text">
|
<j-ellipsis :value="text" :length="10" />
|
</span>
|
<span slot="esContent15" slot-scope="text">
|
<j-ellipsis :value="text" :length="15" />
|
</span>
|
<span slot="esContent20" slot-scope="text">
|
<j-ellipsis :value="text" :length="20" />
|
</span>
|
|
<span slot="action" slot-scope="text, record">
|
<a @click="goToPage(record)" >维护</a>
|
<a-divider type="vertical" />
|
<a-dropdown>
|
<a class="ant-dropdown-link">
|
更多 <a-icon type="down"/>
|
</a>
|
<a-menu slot="overlay">
|
<a-menu-item>
|
<a href="javascript:;" @click="handleDetail(record)">详情</a>
|
</a-menu-item>
|
|
<a-menu-item>
|
<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
|
<a>删除</a>
|
</a-popconfirm>
|
</a-menu-item>
|
|
</a-menu>
|
</a-dropdown>
|
</span>
|
|
|
</a-table>
|
</div>
|
<!-- table区域-end -->
|
<!-- 选择奖金发放项目 -->
|
<payment-project-modal ref='paymentProjectModal' @ok='paymentProjectOk'></payment-project-modal>
|
<!-- 添加奖金发放记录 -->
|
<bonus-payment-modal ref="modalForm" @ok="modalFormOk"></bonus-payment-modal>
|
|
|
</a-card>
|
</template>
|
|
<script>
|
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
|
import PaymentProjectModal from '@views/bonus/modules/PaymentProjectModal'
|
import BonusPaymentModal from '@views/bonus/modules/BonusPaymentModal'
|
export default {
|
name: 'BonusPaymentList',
|
mixins: [JeecgListMixin],
|
components:{
|
BonusPaymentModal,
|
PaymentProjectModal
|
},
|
data(){
|
return{
|
description: '这是用户管理页面',
|
queryParam: {},
|
columns: [
|
{
|
title: '序号',
|
dataIndex: '',
|
key:'rowIndex',
|
width:60,
|
align:"center",
|
customRender:function (t,r,index) {
|
return parseInt(index)+1;
|
}
|
},
|
{
|
title: '项目名称',
|
align: "center",
|
dataIndex: 'xmmc',
|
width: 240,
|
sorter: true,
|
scopedSlots: { customRender: 'esContent15' },
|
},
|
{
|
title: '负责人',
|
align: "center",
|
width: 100,
|
dataIndex: 'fzr_dictText',
|
},
|
|
{
|
title: '奖励类型',
|
align: "center",
|
width: 100,
|
dataIndex: 'type_dictText',
|
},
|
{
|
title: '发放进度',
|
align: "center",
|
width: 100,
|
dataIndex: 'ffjd_dictText',
|
scopedSlots: { customRender: 'esContent5' },
|
},
|
{
|
title: '创建时间',
|
align: 'center',
|
width: 120,
|
dataIndex: 'createTime',
|
customRender: (text) => {
|
return text.substring(0,10)
|
}
|
},
|
|
|
{
|
title: '定额',
|
align: 'center',
|
width: 60,
|
dataIndex: 'de',
|
customRender: (text) => {
|
let re = ''
|
if (text == 0 || text == null) {
|
re = '否'
|
} else {
|
re = '是'
|
}
|
return re
|
}
|
},
|
{
|
title: '技术分类',
|
align: 'center',
|
width: 100,
|
dataIndex: 'jsfl_dictText',
|
customRender: (text) => {
|
if(!text){
|
return '-'
|
}else {
|
return text
|
}
|
}
|
},
|
{
|
title: '销售额',
|
align: 'center',
|
width: 100,
|
dataIndex: 'xse',
|
customRender: (text) => {
|
if(!text){
|
return '-'
|
}else {
|
return text
|
}
|
}
|
},
|
{
|
title: '奖金系数',
|
align: 'center',
|
width: 80,
|
dataIndex: 'tcxs',
|
customRender: (text) => {
|
if(!text){
|
return '-'
|
}else {
|
return text
|
}
|
}
|
},
|
{
|
title: '定额奖金',
|
align: 'center',
|
width: 100,
|
dataIndex: 'dejj',
|
customRender: (text) => {
|
if(!text){
|
return '-'
|
}else {
|
return text
|
}
|
}
|
},
|
{
|
title: '核算奖金',
|
align: 'center',
|
width: 100,
|
dataIndex: 'sjjj',
|
customRender: (text) => {
|
if(!text){
|
return '-'
|
}else {
|
return text
|
}
|
}
|
},
|
|
{
|
title: '操作',
|
dataIndex: 'action',
|
fixed:'right',
|
scopedSlots: {customRender: 'action'},
|
align: "center",
|
width: 170
|
}
|
|
],
|
|
url: {
|
list: '/bon/payment/list',
|
delete: '/bon/payment/delete',
|
deleteBatch: '/bon/payment/deleteBatch',
|
exportXlsUrl: '/bon/payment/exportXls',
|
importExcelUrl: 'bon/payment/importExcel'
|
},
|
}
|
},
|
methods:{
|
handleMenuClick(e) {
|
if (e.key == 1) {
|
this.batchDel();
|
}
|
},
|
onSyncFinally({isToLocal}) {
|
// 同步到本地时刷新下数据
|
if (isToLocal) {
|
this.loadData()
|
}
|
},
|
goToPage(record){
|
//根据不同类型
|
switch (record.type) {
|
case 1:
|
this.$router.push({path:"/bon/sc",query:{xmbh:record.xmbh}})
|
break
|
case 2:
|
this.$router.push({path:"/bon/kh",query:{xmbh:record.xmbh}})
|
break
|
case 3:
|
this.$router.push({path:"/bon/xm",query:{xmbh:record.xmbh}})
|
break
|
case 4:
|
this.$router.push({path:"/bon/gx",query:{xmbh:record.xmbh}})
|
break
|
}
|
|
},
|
searchReset() {
|
this.queryParam = { }
|
this.loadData(1)
|
},
|
//打开选择发放奖金项目列表窗口
|
openPaymentProjectModal(){
|
this.$refs.paymentProjectModal.show()
|
|
},
|
//完成选择发放奖金项目
|
paymentProjectOk(project){
|
console.info(project)
|
let record = {}
|
record.pro = project.id
|
record.xmmc = project.xmmc
|
record.xmbh = project.xmbh
|
record.fzr = project.xmfzr
|
record.xmcy = project.xmcy
|
this.handleAdd(record)
|
},
|
handleAdd: function (record) {
|
this.$refs.modalForm.edit(record);
|
this.$refs.modalForm.title = "新增";
|
this.$refs.modalForm.disableSubmit = false;
|
},
|
//外table展开关闭
|
handleExpand(expanded, record){
|
this.expandedRowKeys = []
|
this.innerData = []
|
if (expanded === true) {
|
if (!record.id) return false
|
this.expandedRowKeys.push(record.id)
|
//查询内table数据
|
// this.queryInnerData()
|
}
|
}
|
},
|
computed: {
|
importExcelUrl: function(){
|
return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
|
}
|
},
|
}
|
</script>
|
|
<style scoped>
|
@import '~@assets/less/common.less';
|
</style>
|
