<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 :xl="5" :lg="7" :md="8" :sm="24">
<a-form-item label="事故单号">
<j-input placeholder="请输入事故单号" v-model="queryParam.accidentNumber"></j-input>
</a-form-item>
</a-col>
<a-col :xl="5" :lg="7" :md="8" :sm="24">
<a-form-item label="单据状态">
<a-select placeholder="" v-model="queryParam.state" mode="multiple">
<a-select-option value="">请选择</a-select-option>
<a-select-option value="1">未处理</a-select-option>
<a-select-option value="2">已通知</a-select-option>
<a-select-option value="3">已反馈通知</a-select-option>
<a-select-option value="4">已推送</a-select-option>
<a-select-option value="5">已提交</a-select-option>
<a-select-option value="6">已完结</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :xl="5" :lg="7" :md="8" :sm="24">
<a-form-item label="财务备注">
<j-input placeholder="请输入财务备注" v-model="queryParam.financeRemark"></j-input>
</a-form-item>
</a-col>
<a-col :xl="5" :lg="7" :md="8" :sm="24">
<a-form-item label="计划单号">
<!-- <j-dict-select-tag placeholder="请选择业务员" v-model="queryParam.businessPeople" dictCode="sys_user,realname,username"/> -->
<j-input placeholder="请输入计划单号" v-model="queryParam.planNumber"></j-input>
</a-form-item>
</a-col>
<!-- <template v-if="toggleSearchStatus"> -->
<a-col :xl="4" :lg="7" :md="8" :sm="24">
<a-form-item label="责任单位">
<j-input placeholder="请输入责任单位" v-model="queryParam.responsibilityCompany"></j-input>
</a-form-item>
</a-col>
<a-col :xl="5" :lg="7" :md="8" :sm="24">
<a-form-item label="填报人">
<j-search-select-tag v-model="queryParam.informant" placeholder=""
dict="sys_user,realname,realname" @search="searchName" :multiple="true"/>
<!-- <j-dict-select-tag placeholder="请选择填报人" v-model="queryParam.informant" dictCode="sys_user ,realname,username"/> -->
</a-form-item>
</a-col>
<a-col :xl="5" :lg="7" :md="8" :sm="24">
<a-form-item label="处理人">
<j-search-select-tag v-model="queryParam.processor" placeholder=""
dict="sys_user,realname,username" @search="searchName" :multiple="true"/>
<!-- <j-dict-select-tag placeholder="请选择填报人" v-model="queryParam.informant" dictCode="sys_user ,realname,username"/> -->
</a-form-item>
</a-col>
<a-col :xl="5" :lg="7" :md="8" :sm="24">
<a-form-item label="是否处理">
<a-select placeholder="" v-model="queryParam.handle">
<a-select-option value="">请选择</a-select-option>
<a-select-option value="是">是</a-select-option>
<a-select-option value="否">否</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :xl="5" :lg="7" :md="8" :sm="24">
<a-form-item label="质量事故单主题">
<j-input placeholder="请输入质量事故单主题" v-model="queryParam.accidentTheme"></j-input>
</a-form-item>
</a-col>
<!-- </template> -->
<a-col :xl="4" :lg="7" :md="8" :sm="24">
<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>
<!-- 查询区域-END -->
<!-- 操作按钮区域 -->
<div class="table-operator">
<!-- <a-button @click="handleAdd" 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">
<a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</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
ref="table"
size="middle"
bordered
rowKey="id"
:columns="columns"
:dataSource="dataSource"
:pagination="ipagination"
:loading="loading"
:scroll="{x: 1500,y:400}"
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
@change="handleTableChange">
<template slot="htmlSlot" slot-scope="text">
<div v-html="text"></div>
</template>
<template slot="imgSlot" slot-scope="text">
<span v-if="!text" style="font-size: 12px;font-style: italic;">无此图片</span>
<img v-else :src="getImgView(text)" height="25px" alt="图片不存在" style="max-width:80px;font-size: 12px;font-style: italic;"/>
</template>
<template slot="fileSlot" slot-scope="text">
<span v-if="!text" style="font-size: 12px;font-style: italic;">无此文件</span>
<a-button
v-else
:ghost="true"
type="primary"
icon="download"
size="small"
@click="uploadFile(text)">
下载
</a-button>
</template>
<span slot="state" slot-scope="text, record">
<span v-if="record.state =='6'">已完结</span>
<span v-if="record.state =='5'">已提交</span>
<span v-if="record.state =='4'">已推送</span>
<span v-if="record.state =='3'">已反馈通知</span>
<span v-if="record.state =='2'">已通知</span>
<span v-if="record.state =='1'">未处理</span>
</span>
<span slot="action" slot-scope="text, record">
<a @click="handleEdit(record,'edit')" v-if="record.state!=='6'">编辑</a>
<a-divider type="vertical" v-if="record.state!=='6'"/>
<a @click="handleEdit(record,'detail')">详情</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-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
<a>删除</a>
</a-popconfirm>
</a-menu-item>
</a-menu>
</a-dropdown> -->
</span>
</a-table>
</div>
<incidentTicket-modal ref="modalForm" @ok="modalFormOk" @close='loadData'></incidentTicket-modal>
<incidentTicket-modal-detail ref="IncidentTicketModalDetail" @ok="modalFormOk" @close='loadData'></incidentTicket-modal-detail>
</a-card>
</template>
<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import JSearchSelectTag from '@/components/dict/JSearchSelectTag'
import IncidentTicketModal from './modules/IncidentTicketModal'
import IncidentTicketModalDetail from './modules/IncidentTicketModalDetail'
import JDictSelectTag from '@/components/dict/JDictSelectTag.vue'
import {filterMultiDictText} from '@/components/dict/JDictSelectUtil'
import {filterObj, cloneObject, pushIfNotExist } from '@/utils/util'
import JEllipsis from '@/components/jeecg/JEllipsis'
import JInput from '@/components/jeecg/JInput'
import moment from 'moment'
export default {
name: "IncidentTicketList",
mixins:[JeecgListMixin],
components: {
JDictSelectTag,
IncidentTicketModal,
IncidentTicketModalDetail,
JSearchSelectTag,
JEllipsis,
JInput,
moment
},
data () {
let ellipsis = (v, l ) => <j-ellipsis value={v} length={l} /> // 省略
return {
description: '森_工厂质量事故单-主表管理页面',
// 表头
columns: [
{
title:'日期',
align:"center",
ellipsis: true,
dataIndex: 'accidentData',
width:100
},
{
title:'质量事故单号',
align:"center",
customRender: (t) => ellipsis(t),
dataIndex: 'accidentNumber',
width:120
},
{
title:'通知人',
align:"center",
dataIndex: 'noticerUser',
customRender: (t) => ellipsis(t,3),
width:80,
},
{
title:'财务备注',
align:"center",
dataIndex: 'financeRemark',
customRender: (t) => ellipsis(t,15),
width:250,
},
{
title:'账套号',
align:"center",
ellipsis: true,
dataIndex: 'acSetNo',
width:80
},
{
title:'U8发票号',
align:"center",
dataIndex: 'u8Invoices',
customRender: (t) => ellipsis(t,8),
width:100,
},
{
title:'责任单位',
align:"center",
// customRender: (t) => ellipsis(t),
dataIndex: 'responsibilityCompany',
width:100,
},
{
title:'总金额',
align:"center",
dataIndex: 'totalMoney',
width:100
},
{
title:'质量事故单主题',
align:"center",
customRender: (t) => ellipsis(t,12),
dataIndex: 'accidentTheme',
width:200,
ellipsis: true,
},
{
title:'责任人1',
align:"center",
dataIndex: 'responsibilityPerson1',
width:90
},
{
title:'责任人2',
align:"center",
dataIndex: 'responsibilityPerson2',
width:90
},
{
title:'责任人3',
align:"center",
dataIndex: 'responsibilityPerson3',
width:90
},
{
title:'填报人',
align:"center",
dataIndex: 'informant',
width:90
},
{
title:'计划单号',
align:"center",
dataIndex: 'planNumber',
customRender: (t) => ellipsis(t,9),
width:100
},
{
title:'款号',
align:"center",
dataIndex: 'styleNumber',
customRender: (t) => ellipsis(t,7),
width:100
},
{
title:'状态',
align:"center",
dataIndex: 'state',
fixed:"right",
scopedSlots: { customRender: 'state' },
width:120
},
{
title: '操作',
dataIndex: 'action',
align:"center",
scopedSlots: { customRender: 'action' },
fixed:"right",
width:135
}
],
url: {
list: "/oa/incidentTicket/list",
delete: "/oa/incidentTicket/delete",
deleteBatch: "/oa/incidentTicket/deleteBatch",
exportXlsUrl: "/oa/incidentTicket/exportXls",
importExcelUrl: "oa/incidentTicket/importExcel",
},
ipagination: {
current: 1,
pageSize: 100,
pageSizeOptions: ['10', '20', '30','100'],
showTotal: (total, range) => {
return range[0] + "-" + range[1] + " 共" + total + "条"
},
showQuickJumper: true,
showSizeChanger: true,
total: 0
},
dictOptions:{},
dataSource:[]
}
},
created(){
this.dataSource.push({accidentTheme:''})
},
watch:{
dataSource:{
immediate:true,
handler(newVlue) {
newVlue.map(item=>{
item.accidentData = moment(item.accidentData).format('YYYY-MM-DD');
if(item.u8Invoices=='null'){
item.u8Invoices = ''
}
})
},
}
},
computed: {
importExcelUrl: function(){
return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
}
},
methods: {
getQueryParams() {
this.toggleSearchStatus = false
var param = Object.assign({}, this.queryParam, null);
param.field = this.getQueryField();
param.pageNo = this.ipagination.current;
param.pageSize = this.ipagination.pageSize;
param.state = (param.state&¶m.state!=='')?param.state.toString():"";
param.informant =(param.informant&¶m.informant!=='')?param.informant.toString():"";
param.processor = (param.processor&¶m.processor!=='')?param.processor.toString():"";
return filterObj(param);
},
initDictConfig(){
},
handleEdit(record,data){
if(data =='edit'){
this.$refs.modalForm.visible = true
this.$refs.modalForm.getHeaderList(record.id)
// this.$refs.modalForm.defultMethods = 'edit'
}else{
this.$refs.IncidentTicketModalDetail.visible = true
this.$refs.IncidentTicketModalDetail.showFooter = true
this.$refs.IncidentTicketModalDetail.getHeaderList(record.id)
}
}
}
}
</script>
<style scoped lang="less">
@import '~@assets/less/common.less';
/deep/ .ant-table td {
// white-space: break-spaces !important;
word-break: break-word;
}
/deep/ .ant-table-tbody .ant-table-row td{
padding-top: 8px !important ;
padding-bottom: 8px !important;
}
/deep/ .ant-table-thead > tr, .ant-table-tbody > tr {
height: 0px !important;
}
/deep/ .ant-table-thead > tr > th, .ant-table-tbody > tr > td {
padding: 8px 16px !important;
}
</style>