直接上代码了没什么可讲的,主要是用到
row-key="id"
:expand-row-keys="expands
@row-click="handleRowClick"
javascript
<template>
<div class="ele-body">
<el-card shadow="never">
<!-- 数据表格 -->
<ele-pro-table
ref="table"
:columns="columns"
:datasource="datasource"
height="calc(100vh - 266px)"
tool-class="ele-toolbar-form"
:toolkit="[]"
cache-key="recordTable"
row-key="id"
:expand-row-keys="expands"
@row-click="handleRowClick"
highlight-current-row
@current-change="handleCurrentChange"
>
<template v-slot:toolbar>
<!-- 搜索表单 -->
<rectify-search @search="reload"> </rectify-search>
</template>
<!-- 展开内容 -->
<template v-slot:expand="{ row }">
<el-table :data="row.riskList" :show-header="true">
<el-table-column label="序号" type="index" width="50">
</el-table-column>
<el-table-column label="不符合项描述" show-overflow-tooltip>
<template v-slot="{ row }">
<span>
{{ row.problemDescription }}
</span>
</template>
</el-table-column>
<el-table-column label="整改截止日期" width="130">
<template v-slot="{ row }">
<div>{{ $util.toDateString(row.endDate, 'yyyy-MM-dd') }}</div>
</template>
</el-table-column>
<el-table-column label="不符合项" show-overflow-tooltip>
<template v-slot="{ row }">
<span>
{{
'【' +
row.checkMasterName +
'】' +
row.checkItemCode +
' ' +
row.checkItemName
}}
</span>
</template>
</el-table-column>
<el-table-column label="整改状态" width="110" show-overflow-tooltip>
<template v-slot="{ row }">
<el-tag size="small" type="primary" :disable-transitions="true">
{{ getDictName('rectify_status', row.rectifyStatus) }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="回执内容" width="230">
<template v-slot="{ row }">
<span>
{{ row.receiptDescription }}
</span>
</template>
</el-table-column>
<el-table-column label="操作" width="240" align="center">
<template v-slot="{ row }">
<el-link
type="primary"
:underline="false"
icon="el-icon-search"
@click="openEdit(row)"
>
查看
</el-link>
<el-link
v-if="row.rectifyStatus < 1"
type="primary"
:underline="false"
icon="el-icon-_retrieve"
@click="toCorrect(row)"
>
纠正回执
</el-link>
<!-- <el-link
v-if="row.rectifyStatus != 0"
type="primary"
:underline="false"
icon="el-icon-_retrieve"
>
已回执
</el-link> -->
</template>
</el-table-column>
</el-table>
</template>
<template v-slot:superviseType="{ row }">
{{ getDictName('supervise_type', row.superviseType) }}
</template>
<!-- 操作列 -->
<template v-slot:action="{ row }">
<el-link
type="primary"
:underline="false"
icon="el-icon-search"
@click="openSheetAll(row)"
>
查看
</el-link>
</template>
</ele-pro-table>
</el-card>
<rectify-edit :visible.sync="showEdit" :data="current"></rectify-edit>
<rectify-correct-edit
:visible.sync="showCorrectEdit"
:data="currentCorrect"
@done="reload"
></rectify-correct-edit>
</div>
</template>
<script>
import rectifyEdit from './components/rectify-edit.vue';
import rectifyCorrectEdit from './components/rectify-correct-edit.vue';
import rectifySearch from './components/rectify-search.vue';
import { pageDisposalOrders } from '@/api/disposal/disposal-order';
export default {
name: 'rectify',
components: {
rectifySearch,
rectifyCorrectEdit,
rectifyEdit
},
data() {
return {
showEdit: false,
showCorrectEdit: false,
columns: [
{
width: 45,
type: 'expand',
columnKey: 'expand',
align: 'center',
slot: 'expand'
},
{
prop: 'code',
label: '处置单编号',
sortable: 'custom',
showOverflowTooltip: true,
width: 220
},
{
prop: 'orderType',
label: '任务类型',
showOverflowTooltip: true,
minWidth: 110,
slot: 'orderType',
formatter: (_row, _column, cellValue) => {
return this.$globalDictName('order_type', cellValue);
}
},
{
prop: 'superviseType',
label: '监督方式',
sortable: 'custom',
slot: 'superviseType',
minWidth: 140
},
{
prop: 'orgName',
label: '监督站',
sortable: 'custom',
showOverflowTooltip: true,
minWidth: 140
},
{
prop: 'unitCode',
label: '生产单位',
sortable: 'custom',
showOverflowTooltip: true,
width: 180,
formatter: (_row, _column, cellValue) => {
return this.$globalOrgName(cellValue);
}
},
{
prop: 'description',
label: '任务描述',
sortable: 'custom',
showOverflowTooltip: true,
minWidth: 140
},
{
prop: 'findDate',
label: '监督日期',
sortable: 'custom',
showOverflowTooltip: true,
width: 180,
formatter: (_row, _column, cellValue) => {
return this.$util.toDateString(cellValue, 'yyyy-MM-dd');
}
}
],
current: {},
currentCorrect: {},
expands: [],
currentRow: null
};
},
created() {},
methods: {
handleRowClick(row) {
if (this.expands.includes(row.id)) {
this.expands = this.expands.filter((val) => val !== row.id);
} else {
this.expands = [];
this.expands.push(row.id);
}
},
handleCurrentChange(val) {
this.currentRow = val;
},
/* 表格数据源 */
datasource({ page, limit, where, order }) {
let statusList = null; //'(0,-1,-2)';
return pageDisposalOrders({
...where,
...order,
page,
limit,
auditStatus: 0,
rectifyStatus: 0,
statusIds: statusList
});
// return data;
},
getDictName(type, code) {
return this.$globalDictName(type, code);
},
/* 刷新表格 */
reload(where) {
this.$refs.table.reload({ where: where });
},
/* 打开所有记录 */
openEdit(row) {
this.current = row;
this.showEdit = true;
},
toCorrect(row) {
this.currentCorrect = row;
this.showCorrectEdit = true;
}
}
};
</script>