From 3c40f5e98cbeaf554cf0245d4f528063f0b9db69 Mon Sep 17 00:00:00 2001 From: Admin <978517621@qq.com> Date: 星期二, 05 七月 2022 15:24:47 +0800 Subject: [PATCH] 添加修改页面 --- src/views/specialWorkSystem/approvalProcess/addApproveProcess/index.vue | 105 ++++++++++++++++++++++++++++++++++++++++------------ 1 files changed, 81 insertions(+), 24 deletions(-) diff --git a/src/views/specialWorkSystem/approvalProcess/addApproveProcess/index.vue b/src/views/specialWorkSystem/approvalProcess/addApproveProcess/index.vue index 0e834a1..b0cda9b 100644 --- a/src/views/specialWorkSystem/approvalProcess/addApproveProcess/index.vue +++ b/src/views/specialWorkSystem/approvalProcess/addApproveProcess/index.vue @@ -6,30 +6,30 @@ </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="step" label="环节名称" width="180" /> <el-table-column prop="type" 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="rules"> + <el-form-item label="环节名称" prop="step"> <el-select v-model="reportForm.step" placeholder="选择环节名称"> <el-option label="作业负责人审批" value="作业负责人审批" /> <el-option label="作业负责人审批2" value="作业负责人审批2" /> <el-option label="作业负责人审批3" value="作业负责人审批3" /> </el-select> </el-form-item> - <el-form-item label="审核类型"> + <el-form-item label="审核类型" prop="type"> <el-select v-model="reportForm.type" placeholder="选择审核类型"> <el-option label="上报审批意见" value="上报审批意见" /> <el-option label="上报气体检测数据" value="上报气体检测数据" /> @@ -40,8 +40,8 @@ <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> @@ -56,6 +56,8 @@ import {useUserInfo} from "/@/stores/userInfo"; import { Session } from '/@/utils/storage'; import { ElMessage } from 'element-plus' + import type { FormInstance, FormRules } from 'element-plus' + let global: any = { homeChartOne: null, homeChartTwo: null, @@ -69,52 +71,100 @@ interface type { } + interface User { + step: string, + type: string, + createTime: 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', step: '作业负责人审批', type: '', createTime: '', editor: '', - editorTime: '' + editeTime: '' }, { - id: '1', step: '作业负责人审批', type: '', createTime: '', editor: '', - editorTime: '' + editeTime: '' }, { - id: '2', step: '作业负责人审批', type: '', createTime: '', editor: '', - editorTime: '' + editeTime: '' } - ]; + ]); const dialogAddForm = ref(false); - const reportForm = reactive({ - id: '', + const rowIndex = ref(-1) + const reportForm = ref({ step: '', type: '', createTime: '', editor: '', - editorTime: '' + editeTime: '' }) const addApprove = ()=>{ dialogAddForm.value = true }; - const onSubmitAddForm = () => { - console.log('submit!') + const ruleFormRef = ref<FormInstance>() + const rules = reactive<FormRules>({ + step:[{required: true, message: '该内容不能为空',trigger:'blur'}], + type:[{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 + } + + // reportForm.value = { + // step: '', + // type: '', + // createTime: '', + // editor: '', + // editeTime: '' + // } + 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 = { + step: '', + type: '', + createTime: '', + editor: '', + editeTime: '' + } + rowIndex.value = -1 } // 折线图 const renderMenu = async (value: string) => { @@ -127,6 +177,12 @@ tableData, dialogAddForm, reportForm, + ruleFormRef, + rules, + rowIndex, + dialogColse, + editeRow, + deleteRow, addApprove, onSubmitAddForm, ...toRefs(state), @@ -139,6 +195,7 @@ $homeNavLengh: 8; .home-container { overflow: hidden; + background: #fff; padding: 40px; height: 100%; .el-row{ -- Gitblit v1.9.2