From 2a389d383a9872157f7bc961f216ad010d24d29b Mon Sep 17 00:00:00 2001 From: Admin <978517621@qq.com> Date: 星期二, 05 七月 2022 16:45:26 +0800 Subject: [PATCH] 修改页面 --- src/views/specialWorkSystem/approvalProcess/reportTypeSetting/index.vue | 98 ++++++++++++++++++++++++++++++++++++------------- 1 files changed, 72 insertions(+), 26 deletions(-) diff --git a/src/views/specialWorkSystem/approvalProcess/reportTypeSetting/index.vue b/src/views/specialWorkSystem/approvalProcess/reportTypeSetting/index.vue index 9ce2841..94627cb 100644 --- a/src/views/specialWorkSystem/approvalProcess/reportTypeSetting/index.vue +++ b/src/views/specialWorkSystem/approvalProcess/reportTypeSetting/index.vue @@ -6,23 +6,23 @@ </el-row> <el-row> <el-table :data="tableData" border style="width: 100%"> - <el-table-column prop="id" label="标识" width="180" /> + <el-table-column type="index" label="标识" width="100"/> <el-table-column prop="type" label="上报数据类型名称" width="180" /> <el-table-column prop="founder" label="创建人"/> <el-table-column prop="createTime" label="创建时间" width="180" /> <el-table-column prop="editor" label="最新编辑人" width="180" /> - <el-table-column prop="editorTime" label="最新编辑时间" /> + <el-table-column prop="editeTime" label="最新编辑时间" /> <el-table-column fixed="right" label="操作" width="180"> - <template #default> - <el-button link type="primary" size="small">编辑</el-button> - <el-button link type="danger" size="small">删除</el-button> + <template #default="scope"> + <el-button link type="primary" size="small" @click="editeRow(scope.$index,scope.row)">编辑</el-button> + <el-button link type="danger" size="small" @click="deleteRow(scope.$index)">删除</el-button> </template> </el-table-column> </el-table> </el-row> - <el-dialog v-model="dialogAddForm" title="新建上报类型"> - <el-form :model="reportForm" label-width="120px"> - <el-form-item label="上报数据类型"> + <el-dialog v-model="dialogAddForm" title="新建上报类型" @close="dialogColse"> + <el-form :model="reportForm" label-width="120px" ref="ruleFormRef" :rules="addRules"> + <el-form-item label="上报数据类型" prop="type"> <el-select v-model="reportForm.type" placeholder="选择上报数据类型"> <el-option label="上报审批意见" value="上报审批意见" /> <el-option label="上报气体监测数据" value="上报气体监测数据" /> @@ -30,17 +30,17 @@ </el-select> </el-form-item> <el-form-item label="创建人"> - <el-select v-model="reportForm.founder" placeholder="选择创建人"> + <el-select v-model="reportForm.founder" property="founder" placeholder="选择创建人"> <el-option label="创建人1" value="创建人1" /> <el-option label="创建人2" value="创建人2" /> </el-select> </el-form-item> - <el-form-item label="最新编辑人"> + <el-form-item label="最新编辑人" prop="editor"> <el-input v-model="reportForm.editor" /> </el-form-item> <el-form-item> - <el-button type="primary" @click="onSubmitAddForm" size="default">确认</el-button> - <el-button size="default">取消</el-button> + <el-button type="primary" @click="onSubmitAddForm(ruleFormRef)" size="default">确认</el-button> + <el-button size="default" @click="dialogAddForm = false">取消</el-button> </el-form-item> </el-form> </el-dialog> @@ -54,7 +54,7 @@ import { initBackEndControlRoutes } from '/@/router/backEnd'; import {useUserInfo} from "/@/stores/userInfo"; import { Session } from '/@/utils/storage'; - import { ElMessage } from 'element-plus' + import { FormInstance, FormRules } from 'element-plus' let global: any = { homeChartOne: null, homeChartTwo: null, @@ -68,52 +68,93 @@ interface type { } + interface User { + type: string, + founder: string, + editor: string + } export default defineComponent({ name: 'reportTypeSetting', setup() { const userInfo = useUserInfo() const { userInfos } = storeToRefs(userInfo); const state = reactive<stateType>({}); - const tableData = [ + const tableData =reactive([ { - id: '0', type: '上报审批意见', founder: '', createTime: '', editor: '', - editorTime: '' + editeTime: '' }, { - id: '1', type: '上报气体检测数据', founder: '', createTime: '', editor: '', - editorTime: '' + editeTime: '' }, { - id: '2', type: '上报安全措施确认', founder: '', createTime: '', editor: '', - editorTime: '' + editeTime: '' } - ]; + ]) const dialogAddForm = ref(false); - const reportForm = reactive({ - id: '', + const rowIndex = ref(-1) + const reportForm = ref({ type: '', founder: '', createTime: '', editor: '', - editorTime: '' + editeTime: '' }) const addReport = ()=>{ dialogAddForm.value = true }; - const onSubmitAddForm = () => { - console.log('submit!') + const ruleFormRef = ref<FormInstance>() + const addRules = reactive<FormRules>({ + type:[{required: true, message: '该内容不能为空',trigger:'blur'}], + founder:[{required: true, message: '该内容不能为空',trigger:'blur'}], + editor:[{required: true, message: '该内容不能为空',trigger:'blur'}] + }) + const onSubmitAddForm = async (formEl: FormInstance | undefined) => { + if (!formEl) return + await formEl.validate((valid, fields) => { + if (valid) { + if(rowIndex.value == -1){ + reportForm.value.createTime = new Date().toLocaleString() + reportForm.value.editeTime = new Date().toLocaleString() + tableData.push(reportForm.value) + }else{ + tableData[rowIndex.value] = reportForm.value + } + dialogAddForm.value = false + } else { + console.log('error submit!', fields) + } + }) + } + const editeRow = (index: number, row: User) =>{ + dialogAddForm.value = true + rowIndex.value = index + reportForm.value = JSON.parse(JSON.stringify(row)) + reportForm.value.editeTime = new Date().toLocaleString() + } + const deleteRow = (index)=>{ + tableData.splice( index,1) + } + const dialogColse = () =>{ + reportForm.value = { + type: '', + founder: '', + createTime: '', + editor: '', + editeTime: '' + } + rowIndex.value = -1 } // 折线图 const renderMenu = async (value: string) => { @@ -126,6 +167,11 @@ tableData, dialogAddForm, reportForm, + ruleFormRef, + addRules, + dialogColse, + editeRow, + deleteRow, addReport, onSubmitAddForm, ...toRefs(state), -- Gitblit v1.9.2