| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177 |
- import { BasicColumn, FormSchema } from '/@/components/Table';
- import { h } from 'vue';
- import { Ref } from 'vue';
- // 1. 颜色映射(固定规则,可根据业务调整)
- export const colorHexMap: Record<string, string> = {
- blue: '#1890ff',
- green: '#208840',
- gold: '#faad14',
- red: '#f5222d',
- gray: '#8c8c8c',
- black: '#000000',
- };
- // 2. 定义动态映射的类型(供外部传入)
- export type ProductionStatusMap = Record<string | number, {
- label: string;
- value: number | string;
- color: string;
- }>;
- // 3. 生成表格列(支持传入动态映射)
- export function getColumns(dynamicStatusMap: Ref<ProductionStatusMap>) {
- const columns: BasicColumn[] = [
- {
- title: '煤矿名称',
- dataIndex: 'mineName',
- width: 250,
- },
- {
- title: '煤矿简称',
- dataIndex: 'mineNameAbbr',
- width: 150,
- },
- {
- title: '生产状态',
- dataIndex: 'mineProStatus',
- width: 120,
- customRender: ({ record }) => {
- // 空值/异常值处理
- const status = record.mineProStatus;
- // 从动态映射中取值,兜底未知状态
- const { label, color } = dynamicStatusMap.value[status] || {
- label: '-',
- };
- return h('span', {
- style: { color: colorHexMap[color] }
- }, label);
- },
- },
- {
- title: '在线状态',
- dataIndex: 'mineLinkStatus',
- width: 100,
- customRender: ({ record }) => {
- const status = record.mineLinkStatus;
- if (status === undefined || status === null) {
- return h('span', { style: { color: colorHexMap.black } }, '/');
- }
- const text = status === 1 ? '在线' : '离线';
- const textColor = status === 1 ? colorHexMap.green : colorHexMap.red;
- return h('span', { style: { color: textColor } }, text);
- },
- },
- {
- title: '质量问题详情',
- dataIndex: 'queJson',
- width: 400,
- ellipsis: true,
- slots: { customRender: 'queJson' },
- },
- {
- title: '当前状态',
- dataIndex: 'isOk',
- width: 100,
- customRender: ({ record }) => {
- const status = record.isOk;
- const text = status ? '已解决' : '未解决';
- const textColor = status ? colorHexMap.green : colorHexMap.red;
- return h('span', { style: { color: textColor } }, text);
- },
- },
- {
- title: '处理时间',
- dataIndex: 'updateTime',
- width: 180,
- },
- ];
- return columns;
- }
- // 4. 查询表单配置(下拉框改为动态options)
- export function getSearchFormSchema(dynamicStatusOptions: Ref<{ label: string; value: string | number }[]>) {
- const searchFormSchema: FormSchema[] = [
- {
- field: 'mineCode',
- label: '煤矿名称',
- component: 'MineCascader',
- colProps: { span: 6 },
- groupName: '常规查询',
- },
- // 启用生产状态下拉框(动态options)
- {
- field: 'productionStatus',
- label: '生产状态',
- component: 'Select',
- componentProps: {
- // 动态绑定下拉选项
- options: dynamicStatusOptions,
- },
- colProps: { span: 6 },
- groupName: '常规查询',
- },
- {
- field: 'mineLinkStatus',
- label: '在线状态',
- component: 'Select',
- componentProps: {
- options: [
- { label: '离线', value: '0' },
- { label: '在线', value: '1' },
- ],
- },
- colProps: { span: 6 },
- groupName: '常规查询',
- },
- ];
- return searchFormSchema;
- }
- export const topFormSchema: FormSchema[] = [
- {
- field: 'mineCode',
- label: '煤矿名称',
- component: 'MineCascader',
- required: true,
- },
- ];
- /** 弹框表单配置 */
- export const formSchema = [
- {
- field: 'goafName',
- label: '工作面名称',
- component: 'Input',
- },
- {
- field: 'queCon',
- label: '问题描述',
- component: 'Input',
- },
- {
- field: 'startTime',
- label: '开始时间',
- component: 'DatePicker',
- componentProps: {
- showTime: true,
- format: 'YYYY-MM-DD HH:mm:ss',
- },
- required: true,
- },
- {
- field: 'endTime',
- label: '结束时间',
- component: 'DatePicker',
- componentProps: {
- showTime: true,
- format: 'YYYY-MM-DD HH:mm:ss',
- },
- required: true,
- },
- {
- field: 'param',
- label: '参数',
- component: 'Input',
- required: true,
- },
- ];
|