<template> <div class="app
-container"> <el
-form :model="queryParams" ref="queryForm" size="small" :inline="true" v
-show="showSearch"> <el
-form
-item label="状态" prop="status"> <el
-select v
-model="queryParams.status"> <el
-option v
-for="dict in dict.type.status" :key="dict.value" :label="dict.label" :value="dict.value" /> </el
-select> </el
-form
-item> <el
-form
-item label="排查时间" prop="regDate"> <el
-date
-picker v
-model="regDate" type="daterange" range
-separator="至" start
-placeholder="开始日期" end
-placeholder="结束日期" /> </el
-form
-item> <el
-form
-item> <el
-button type="primary" icon="el
-icon
-search" size="mini" @click="handleQuery">搜索</el
-button> <el
-button icon="el
-icon
-refresh" size="mini" @click="resetQuery">重置</el
-button> </el
-form
-item> </el
-form> <el
-row :gutter="10" class="mb8"> <el
-col :span="1.5"> <el
-button type="primary" plain icon="el
-icon
-plus" size="mini" @click="handleAdd" v
-hasPermi="['safety:
pitfall:record:add']">新增</el
-button> </el
-col> <el
-col :span="1.5"> <el
-button type="success" plain icon="el
-icon
-edit" size="mini" :disabled="single" @click="handleUpdate" v
-hasPermi="['safety:
pitfall:record:edit']">修改</el
-button> </el
-col> <el
-col :span="1.5"> <el
-button type="danger" plain icon="el
-icon
-delete" size="mini" :disabled="multiple" @click="handleDelete" v
-hasPermi="['safety:
pitfall:record:remove']">删除</el
-button> </el
-col> <el
-col :span="1.5"> <el
-button type="warning" plain icon="el
-icon
-download" size="mini" @click="handleExport" v
-hasPermi="['safety:
pitfall:record:export']">导出</el
-button> </el
-col> <right
-t
oolbar :showSearch.sync="showSearch" @queryTable="getList"></right
-t
oolbar> </el
-row> <el
-table v
-loading="loading" :data="RECORDList" @selection
-change="handleSelectionChange"> <el
-table
-column type="selection" width="55" align="center" /> <!
-- <el
-table
-column label="记录ID" align="center" prop="recordId" />
--> <!
-- <el
-table
-column label="任务ID" align="center" prop="taskId" />
--> <!
-- <el
-table
-column label="企业ID" align="center" prop="enterpriseId" />
--> <!
-- <el
-table
-column label="企业名称" align="center" prop="companyName"> <template slot
-scope="scope"> <el
-button type="text" @click="$ emit('tap', scope.row)">{{ scope.row.companyName }}</el
-button> </template>
-->
<el
-button type=“text” @click=“handleMore(scope.row)”>
{{ scope.row.riskEventName }}
<el
-button size=“mini” type=“text” icon=“el
-icon
-s
-promotion” @click="
ParseError: KaTeX parse error: Expected '}', got 'E
OF' at end
of input: …: { companyId: store.getters.companyId },
})
" v
-hasPermi=“[‘safety:
pitfall:record:edit’]”>整改
<el
-button size=“mini” type=“text” icon=“el
-icon
-edit” @click=“handleUpdate(scope.row)”
v
-hasPermi=“[‘safety:
pitfall:record:edit’]”>修改
<el
-button size=“mini” type=“text” icon=“el
-icon
-delete” @click=“handleDelete(scope.row)”
v
-hasPermi=“[‘safety:
pitfall:record:remove’]”>删除
<pagination v
-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" /> <!
-- 添加或修改隐患排查任务记录对话框
--> <el
-dialog :title="title" :visible.sync="open" width="500px" append
-to
-body> <el
-form ref="form" :model="form" :rules="rules" size="small" label
-width="150px"> <el
-form
-item label="任务名称" prop="taskId"> <el
-select v
-model="form.taskId" clearable filterable> <el
-option v
-for="dict in taskList" :key="dict.taskId" :label="dict.riskEventName" :value="dict.taskId" /> </el
-select> </el
-form
-item> <el
-form
-item label="状态" prop="status"> <el
-select v
-model="form.status"> <el
-option v
-for="dict in dict.type.status" :key="dict.value" :label="dict.label" :value="dict.value" /> </el
-select> </el
-form
-item> <el
-form
-item label="负责人名称" prop="userName"> <el
-input v
-model="form.userName" /> </el
-form
-item> <el
-form
-item label="排查时间" prop="createTime"> <el
-date
-picker v
-model="form.createTime" type="datetime" value
-format="yyyy
-MM
-dd HH:mm:ss" placeholder="选择日期" /> </el
-form
-item> </el
-form> <div slot="f
ooter" class="dialog
-f
ooter"> <el
-button type="primary" @click="submitForm">确 定</el
-button> <el
-button @click="cancel">取 消</el
-button> </div> </el
-dialog> <!
-- 关联行业详情
--> <el
-drawer :title="detail.title" :visible.sync="detail.show" direction="rtl"> <div style="margin: 0 20px"> <el
-descriptions :column="1" size='small' border> <el
-descriptions
-item label="任务名称"> {{ detail.record.riskEventName }} </el
-descriptions
-item> <el
-descriptions
-item label="企业名称"> <el
-button type="text" size="small" @click=" $ router.push('/safety/enterprise/' + detail.record.companyId) "> {{ detail.record.companyName }} </el
-button> </el
-descriptions
-item> <el
-descriptions
-item label="风险分析单元"> {{ detail.record.riskUnit }} </el
-descriptions
-item> <el
-descriptions
-item label="管控措施分类"> {{ detail.record.controlCategory }} </el
-descriptions
-item> <el
-descriptions
-item label="管控措施描述"> {{ detail.record.controlDesc }} </el
-descriptions
-item> <el
-descriptions
-item label="排查内容"> {{ detail.record.inspectionContent }} </el
-descriptions
-item> <el
-descriptions
-item label="巡检周期"> {{ detail.record.inspectionCycle }} </el
-descriptions
-item> <el
-descriptions
-item label="工作日类型"> <dict
-tag :options="dict.type.workday_type" :value="detail.record.workdayType" /> </el
-descriptions
-item> <el
-descriptions
-item label="工作开始时间"> {{ detail.record.workEndTime }} </el
-descriptions
-item> <el
-descriptions
-item label="工作结束时间"> {{ detail.record.workEndTime }} </el
-descriptions
-item> <el
-descriptions
-item label="任务类型"> <dict
-tag :options="dict.type.task_type" :value="detail.record.taskType" /> </el
-descriptions
-item> <el
-descriptions
-item label="包保任务对应项"> {{ detail.record.relatedItem }} </el
-descriptions
-item> <el
-descriptions
-item label="状态"> <dict
-tag :options="dict.type.status" :value="detail.record.status" /> </el
-descriptions
-item> <el
-descriptions
-item label="创建时间"> {{ detail.record.createTime }} </el
-descriptions
-item> <el
-descriptions
-item label="更新时间"> {{ detail.record.updateTime }} </el
-descriptions
-item> </el
-descriptions> </div> </el
-drawer> </div> </template> <script> import dayjs from "dayjs"; import { listRECORD, getRECORD, delRECORD, addRECORD, updateRECORD, } from "@/api/system/riskInspectionTaskRecord"; import { taskList } from "@/api/system/TASK"; export default { name: "record", dicts: ["status"], data() { return { // 遮罩层 loading: true, // 选中数组 ids: [], // 非单个禁用 single: true, // 非多个禁用 multiple: true, // 显示搜索条件 showSearch: true, // 总条数 total: 0, // 隐患排查任务记录表格数据 RECORDList: [], // 关联任务列表 taskList: [], // 弹出层标题 title: "", // 是否显示弹出层 open: false, regDate: [], // 查询参数 queryParams: { pageNum: 1, pageSize: 10, taskId: null, enterpriseId: null, enterpriseName: null, riskEventName: null, userId: null, userName: null, status: null, createTime: null, }, // 表单参数 form: {}, // 表单校验 rules: { taskId: [ { required: true, message: "任务ID不能为空", trigger: "blur" }, ], enterpriseId: [ { required: true, message: "企业ID不能为空", trigger: "blur" }, ], enterpriseName: [ { required: true, message: "企业名称不能为空", trigger: "blur" }, ], riskEventName: [ { required: true, message: "风险事件名称不能为空", trigger: "blur" }, ], // userId: [ // { required: true, message: "负责人id不能为空", trigger: "blur" } // ], // userName: [ // { required: true, message: "负责人名称不能为空", trigger: "blur" } // ], }, detail: { show: false, title: "详情", record: {}, }, }; }, async created() { await this.getTaskList(); this.getList(); }, methods: { handleMore({ riskEventName, taskId }) { const record = this.taskList.find((item) => item.taskId === taskId); this.detail = { show: true, title: riskEventName + "详情", record, }; }, getTaskList() { return new Promise((resolve, reject) => { taskList().then((response) => { this.taskList = response.data; resolve(); }); }); }, /** 查询隐患排查任务记录列表 */ getList() { this.loading = true; listRECORD(this.queryParams).then((response) => { this.RECORDList = response.rows; console.log(this.RECORDList) this.total = response.total; this.loading = false; }); }, // 取消按钮 cancel() { this.open = false; this.reset(); }, // 表单重置 reset() { this.form = { recordId: null, taskId: null, enterpriseId: null, enterpriseName: null, riskEventName: null, userId: null, userName: null, status: null, createTime: null, }; this.resetForm("form"); }, /** 搜索按钮操作 */ handleQuery() { this.queryParams.pageNum = 1; const [startTime, endTime] = this.regDate; this.queryParams.createStartTime = startTime ? dayjs(startTime).start
Of("day").format("YYYY
-MM
-DD HH:mm:ss") : null; this.queryParams.createEndTime = endTime ? dayjs(endTime).end
Of("day").format("YYYY
-MM
-DD HH:mm:ss") : null; this.getList(); }, /** 重置按钮操作 */ resetQuery() { this.regDate = [] this.resetForm("queryForm"); this.handleQuery(); }, // 多选框选中数据 handleSelectionChange(selection) { this.ids = selection.map((item) => item.recordId); this.single = selection.length !== 1; this.multiple = !selection.length; }, /** 新增按钮操作 */ handleAdd() { this.reset(); this.open = true; this.title = "添加隐患排查任务记录"; }, /** 修改按钮操作 */ handleUpdate(row) { this.reset(); const recordId = row.recordId || this.ids; getRECORD(recordId).then((response) => { this.form = response.data; this.open = true; this.title = "修改隐患排查任务记录"; }); }, /** 提交按钮 */ submitForm() { this.$ refs["form"].validate((valid) => { if (valid) { if (this.form.recordId != null) { updateRECORD(this.form).then((response) => { this.$ modal.msgSuccess("修改成功"); this.open = false; this.getList(); }); } else { addRECORD(this.form).then((response) => { this.$ modal.msgSuccess("新增成功"); this.open = false; this.getList(); }); } } }); }, /** 删除按钮操作 */ handleDelete(row) { const recordIds = row.recordId || this.ids; this.$ modal .confirm( '是否确认删除隐患排查任务记录编号为"' + recordIds + '"的数据项？' ) .then(function () { return delRECORD(recordIds); }) .then(() => { this.getList(); this.$ modal.msgSuccess("删除成功"); }) .catch(() => { }); }, /** 导出按钮操作 */ handleExport() { if (this.RECORDList.length === 0) { this.$ modal.msgWarning("没有数据可导出"); return; } try { const XLSX = require("xlsx"); // 明确指定需要导出的字段及对应的中文表头 const exportFields = [ { key: 'riskEventName', label: '任务名称' }, { key: 'userName', label: '负责人名称' }, { key: 'status', label: '状态' }, { key: 'createTime', label: '排查时间' }, ]; // 生成表头 const headers = exportFields.map(field => field.label); // 生成数据行 const rows = this.RECORDList.map(item => { return exportFields.map(field => { // 处理可能不存在的字段或null值 const value = item[field.key] || ''; // 特殊处理日期格式（根据实际需要调整） if (field.key === 'regDate' && value) { return dayjs(value).format('YYYY
-MM
-DD'); } return value; }); }); // 合并表头和数据 const exportData = [headers, ...rows]; // 创建 workb
ook 和 worksheet const wb = XLSX.utils.b
ook_new(); const ws = XLSX.utils.aoa_to_sheet(exportData); // 设置列宽（可选） const colWidths = [ { wch: 40 }, { wch: 25 }, { wch: 15 }, { wch: 30 }, ]; ws['!cols'] = colWidths; XLSX.utils.b
ook_append_sheet(wb, ws, "排查任务记录"); XLSX.writeFile(wb, `排查任务记录_${new Date().getTime()}.xlsx`); } catch (error) { console.error("导出失败:", error); this.$ modal.msgError("导出失败，请稍后重试"); } } }, }; </script>前端哪里需要改能解决上面那个报错
本文探讨了随着硬件发展变化，传统面向对象编程(OOP)面临的挑战及如何结合面向数据设计(DOD)来优化内存使用，提高游戏开发效率。文章强调了理解底层细节的重要性，并提出在逻辑组织和硬件运行间寻找平衡。
扫一扫
491
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
