storlead-centre-platform/ui/sp-user-center/src/components/detailCommon/workOrder.vue

<template>
    <div class="nav_detail">
        <Table
            ref="workOrderTable"
            :tableParams="tableParams"
            :btnRole="btnRole"
            :right-btn="[]"
        >
			<template #left>
                <el-button type="danger">删除</el-button>
            </template>
        </Table>
    </div>
</template>

<script setup lang="ts">
import { listOrder, delOrder } from '@/api/order';
import { ElButton } from 'element-plus';
import { OrderVO, OrderQuery } from '@/api/order/types';
import Table from '@/components/Table/index.vue'
import { tableTypes } from '@/components/Table/types'

const props = defineProps({
	resourceTypeId: {
		type: String
	}
})

const btnRole = ref([
    { type: 'remove', hasPermi: `order:order:remove` },
    { type: 'export', hasPermi: `order:order:export` },
]);

const tableParams = reactive<tableTypes<OrderQuery, OrderVO>>({
	tableColumn: [
        { show: true, label: '工单编号', prop: 'id' },
		{ show: true, label: '工单标题', prop: 'title' },
        { show: true, label: '发起人员', prop: 'ownerByName' },
		{ show: true, label: '处理人员', prop: 'ownerByName' },
		{ show: true, label: '发起时间', prop: 'createTime' },
		{ show: true, label: '工单状态', prop: 'orderStatusName' },
		{ show: true, label: '评论记录', prop: '' },
		{
			show: true, label: '操作', width: 150, prop: 'operation', disabledMove: true, render: ({ column }: { column: OrderVO }) => {
				return [
					h(ElButton, { link: true, type: 'primary', onClick: () => { handleDetail(column) } }, '详情')
				]
			}
		},
	],
	queryParams: {
		customerId: props.resourceTypeId,
	},
	listFn: listOrder,
	delFn: delOrder,
	keyId: 'id'
})

const { queryParams } = toRefs(tableParams);

// 工单详情
const router = useRouter();
const handleDetail = (data: OrderVO) => {
	router.push('/work_order/detail?id=' + data.id)
}
</script>