108 lines
3.5 KiB
Vue
108 lines
3.5 KiB
Vue
<template>
|
|
<PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
|
|
<BasicTable @register="registerTable" @fetch-success="onFetchSuccess" :searchInfo="searchInfo">
|
|
<template #toolbar>
|
|
<!-- <a-button type="primary" @click="handleCreate"> 新增 </a-button> -->
|
|
<PermissionBtn @btnEvent="onBtnClicked"></PermissionBtn>
|
|
</template>
|
|
<template #bodyCell="{ column, record }">
|
|
<template v-if="column.key === 'action'">
|
|
<TableAction :actions="[
|
|
{
|
|
label:'详情',
|
|
onClick: handleDetail.bind(null, record),
|
|
}
|
|
]" />
|
|
</template>
|
|
</template>
|
|
</BasicTable>
|
|
</PageWrapper>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { reactive } from 'vue'
|
|
import { BasicTable, useTable, TableAction } from '@/components/Table';
|
|
import { PageWrapper } from '@/components/Page';
|
|
import { getLoadMyUncompletedPage } from '@/api/sys/WFTask'
|
|
import { Tag, Switch } from 'ant-design-vue';
|
|
const searchInfo = reactive < Recordable > ({});
|
|
const [registerTable, { reload, expandAll, getSelectRows, clearSelectedRowKeys }] = useTable({
|
|
api: getLoadMyUncompletedPage,
|
|
columns: [
|
|
{
|
|
title: '任务',
|
|
dataIndex: 'unitName',
|
|
},
|
|
{
|
|
title: '标题',
|
|
dataIndex: 'processTitle',
|
|
},
|
|
{
|
|
title: '状态',
|
|
dataIndex: 'isUrge',
|
|
width: 80,
|
|
customRender: ({ record }) => {
|
|
if (record.isUrge == '1') {
|
|
const color = 'ref';
|
|
const text = '催办';
|
|
return h(Tag, { color: color }, () => text);
|
|
} else {
|
|
const color = 'green';
|
|
const text = '正常';
|
|
return h(Tag, { color: color }, () => text);
|
|
}
|
|
|
|
|
|
},
|
|
},
|
|
{
|
|
title: '提交人',
|
|
dataIndex: 'processUserName',
|
|
},
|
|
{
|
|
title: '创建时间',
|
|
dataIndex: 'createDate',
|
|
},
|
|
|
|
],
|
|
rowKey: 'id',
|
|
formConfig: {
|
|
labelWidth: 120,
|
|
schemas: [
|
|
{
|
|
field: '[StartDate, EndDate]',
|
|
label: '日期范围',
|
|
component: 'RangePicker',
|
|
componentProps: {
|
|
format: 'YYYY-MM-DD',
|
|
placeholder: ['开始日期', '结束日期'],
|
|
},
|
|
colProps: { span: 8 },
|
|
},
|
|
{
|
|
field: 'keyWord',
|
|
label: '关键字',
|
|
component: 'Input',
|
|
colProps: { span: 8 },
|
|
},
|
|
],
|
|
},
|
|
useSearchForm: true,
|
|
showTableSetting: true,
|
|
bordered: true,
|
|
handleSearchInfoFn(info) {
|
|
return info;
|
|
},
|
|
actionColumn: {
|
|
width: 100,
|
|
title: '操作',
|
|
dataIndex: 'action',
|
|
// slots: { customRender: 'action' },
|
|
},
|
|
});
|
|
function handleDetail(record){
|
|
console.log(record)
|
|
}
|
|
|
|
|
|
</script> |