| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286 |
- import { BasicColumn, FormSchema } from '/@/components/Table';
- import { h } from 'vue';
- // import { Ref } from 'vue';
- // import dayjs from 'dayjs';
- // 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 const columns: BasicColumn[] = [
- {
- title: '煤矿名称',
- dataIndex: 'mineName',
- width: 250,
- },
- {
- title: '煤矿简称',
- dataIndex: 'mineNameAbbr',
- width: 150,
- ifShow: false,
- },
- {
- title: '生产状态',
- dataIndex: 'gjMineStatus',
- 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,
- },
- ];
- // 4. 查询表单配置(下拉框改为动态options)
- export const searchFormSchema: FormSchema[] = [
- {
- field: 'deptId',
- label: '煤矿名称',
- component: 'Input',
- colProps: { span: 6 },
- groupName: '常规查询',
- slot: 'mine-cascader',
- },
- {
- field: 'goafId',
- label: '密闭名称',
- component: 'Input',
- colProps: { span: 6 },
- groupName: '常规查询',
- slot: 'goaf-select',
- },
- // 启用生产状态下拉框(动态options)
- {
- field: 'gjMineStatus',
- label: '生产状态',
- component: 'JDictSelectTag',
- componentProps: {
- dictCode: 'mineProStatus',
- placeholder: '请选择生产状态',
- },
- colProps: { span: 6 },
- },
- {
- field: 'mineLinkStatus',
- label: '在线状态',
- component: 'Select',
- componentProps: {
- options: [
- { label: '离线', value: '0' },
- { label: '在线', value: '1' },
- ],
- },
- colProps: { span: 6 },
- groupName: '常规查询',
- show: false,
- },
- ];
- export const topFormSchema: FormSchema[] = [
- {
- field: 'mineName',
- label: '煤矿名称',
- component: 'Input',
- componentProps: {},
- },
- {
- field: 'devicePos',
- label: '密闭名称',
- component: 'Input',
- componentProps: {},
- },
- ];
- /** 弹框表单配置 */
- export const formSchema: FormSchema[] = [
- {
- field: 'queTitle',
- label: '问题简述',
- component: 'Input',
- required: true,
- rules: [
- { required: true, message: '请输入问题简述', trigger: 'blur' },
- { max: 100, message: '问题简述长度不能超过100个字符', trigger: 'blur' },
- ],
- },
- {
- field: 'startTime',
- label: '开始时间',
- component: 'DatePicker',
- componentProps: {
- showTime: true,
- format: 'YYYY-MM-DD HH:mm:ss',
- },
- required: true,
- rules: [{ required: true, message: '请选择开始时间', trigger: 'blur' }],
- },
- {
- field: 'endTime',
- label: '结束时间',
- component: 'DatePicker',
- componentProps: {
- showTime: true,
- format: 'YYYY-MM-DD HH:mm:ss',
- },
- required: true,
- rules: [{ required: true, message: '请选择结束时间', trigger: 'blur' }],
- },
- {
- field: 'queCon',
- label: '问题描述',
- component: 'InputTextArea',
- componentProps: {
- rows: 4,
- maxlength: 500,
- showCount: true,
- },
- // componentProps: {
- // //是否禁用
- // disabled: false,
- // },
- required: true,
- rules: [
- { required: true, message: '请输入问题描述', trigger: 'blur' },
- { max: 500, message: '问题描述长度不能超过500个字符', trigger: 'blur' },
- ],
- },
- {
- label: '密闭墙问题照片',
- field: 'queFileUrls',
- component: 'JImageUpload',
- componentProps: {
- //按钮显示文字
- text: '图片上传',
- //支持两种基本样式picture和picture-card
- listType: 'picture-card',
- //用于控制文件上传的业务路径,默认temp
- bizPath: 'webfile',
- //是否禁用
- disabled: false,
- //最大上传数量
- fileMax: 9,
- },
- colProps: {
- span: 6,
- },
- },
- {
- label: '密闭墙确认照片',
- field: 'okQueFileUrls',
- component: 'JImageUpload',
- componentProps: {
- //按钮显示文字
- text: '图片上传',
- //支持两种基本样式picture和picture-card
- listType: 'picture-card',
- //用于控制文件上传的业务路径,默认temp
- bizPath: 'webfile',
- //是否禁用
- disabled: false,
- //最大上传数量
- fileMax: 9,
- },
- colProps: {
- span: 6,
- },
- },
- // {
- // field: 'param',
- // label: '参数',
- // component: 'Input',
- // required: true,
- // rules: [
- // { required: true, message: '请输入参数', trigger: 'blur' },
- // { max: 200, message: '参数长度不能超过200个字符', trigger: 'blur' },
- // ],
- // },
- ];
- export const exportFormSchema: FormSchema[] = [
- {
- field: 'startTime',
- label: '开始时间',
- component: 'DatePicker',
- componentProps: {
- showTime: true,
- format: 'YYYY-MM-DD HH:mm:ss',
- },
- required: true,
- rules: [{ required: true, message: '请选择开始时间', trigger: 'blur' }],
- },
- {
- field: 'endTime',
- label: '结束时间',
- component: 'DatePicker',
- componentProps: {
- showTime: true,
- format: 'YYYY-MM-DD HH:mm:ss',
- },
- required: true,
- rules: [{ required: true, message: '请选择结束时间', trigger: 'blur' }],
- },
- ];
|