From 1c141330187ca025f6861f1d931fa235992cf852 Mon Sep 17 00:00:00 2001
From: Your Name <123456>
Date: 星期三, 27 七月 2022 15:16:36 +0800
Subject: [PATCH] 更新

---
 src/views/specialWorkSystem/afterWorkManagement/workTicketCheck/index.vue |  259 +++++++++++++++++++++++++++++----------------------
 1 files changed, 145 insertions(+), 114 deletions(-)

diff --git a/src/views/specialWorkSystem/afterWorkManagement/workTicketCheck/index.vue b/src/views/specialWorkSystem/afterWorkManagement/workTicketCheck/index.vue
index cba6e83..35df32c 100644
--- a/src/views/specialWorkSystem/afterWorkManagement/workTicketCheck/index.vue
+++ b/src/views/specialWorkSystem/afterWorkManagement/workTicketCheck/index.vue
@@ -31,14 +31,15 @@
 					<el-table-column type="selection" width="55" />
 					<el-table-column property="id" label="作业证编号" width="200" sortable/>
 					<el-table-column property="cardName" label="作业证名称" width="180" />
-					<el-table-column property="checkinTime" label="抽检日期" sortable/>
-					<el-table-column property="name" label="抽检人"/>
+					<el-table-column property="worker" label="抽检人"/>
+					<el-table-column property="checkTime" label="抽检时间" sortable/>
 					<el-table-column property="result" label="抽检结果"/>
 					<el-table-column property="remark" label="抽检意见"/>
-					<el-table-column fixed="right" label="操作" width="180">
+					<el-table-column fixed="right" label="操作" align="center" width="250">
 						<template #default="scope">
-							<el-button link type="primary" size="small" @click="viewRecord(scope.row)">查看</el-button>
-							<el-button link type="danger" size="small" @click="deleteRecord(scope.row)">删除</el-button>
+							<el-button link type="primary" size="small" :icon="View" @click="viewRecord(scope.row)">查看</el-button>
+							<el-button link type="primary" size="small" :icon="Edit" @click="editRecord(scope.$index ,scope.row)">修改</el-button>
+							<el-button link type="danger" size="small" :icon="Delete" @click="deleteRecord(scope.$index)">删除</el-button>
 						</template>
 					</el-table-column>
 				</el-table>
@@ -58,7 +59,7 @@
 			</div>
 		</div>
 		</el-scrollbar>
-		<el-dialog v-model="dialogDetails" title="作业票抽检" @close="dialogColse">
+		<el-dialog v-model="dialogDetails" title="作业票抽检">
 			<el-form :model="details" label-width="120px">
 				<el-form-item label="作业证编号">
 					<el-input
@@ -69,7 +70,7 @@
 				</el-form-item>
 				<el-form-item label="抽检人">
 					<el-input
-							v-model="details.name"
+							v-model="details.worker"
 							class="input-with-select"
 							readonly
 					/>
@@ -83,7 +84,7 @@
 				</el-form-item>
 				<el-form-item label="抽检时间">
 					<el-input
-							v-model="details.checkinTime"
+							v-model="details.checkTime"
 							class="input-with-select"
 							readonly
 					/>
@@ -96,11 +97,11 @@
 				</el-form-item>
 			</el-form>
 		</el-dialog>
-		<el-dialog v-model="dialogAddRecord" title="新建作业票抽检" @close="dialogColse">
-			<el-form :model="AddRecord" label-width="120px">
-				<el-form-item label="作业证编号">
+		<el-dialog v-model="dialogAddRecord" title="作业票抽检编辑" @close="closeAdd">
+			<el-form :model="addRecord" label-width="120px" ref="addRef" :rules="addRules">
+				<el-form-item label="作业证编号" prop="id">
 					<el-input
-							v-model="AddRecord.id"
+							v-model="addRecord.id"
 							class="input-with-select"
 					>
 						<template #append>
@@ -108,9 +109,9 @@
 						</template>
 					</el-input>
 				</el-form-item>
-				<el-form-item label="作业证名称">
+				<el-form-item label="作业证名称" prop="cardName">
 					<el-input
-							v-model="AddRecord.cardName"
+							v-model="addRecord.cardName"
 							class="input-with-select"
 					>
 						<template #append>
@@ -118,9 +119,9 @@
 						</template>
 					</el-input>
 				</el-form-item>
-				<el-form-item label="抽检人">
+				<el-form-item label="抽检人" prop="worker">
 					<el-input
-							v-model="AddRecord.name"
+							v-model="addRecord.worker"
 							class="input-with-select"
 					>
 						<template #append>
@@ -128,34 +129,30 @@
 						</template>
 					</el-input>
 				</el-form-item>
-				<el-form-item label="抽检结果">
-					<el-select v-model="AddRecord.result">
+				<el-form-item label="抽检时间" prop="checkTime">
+					<el-date-picker v-model="addRecord.checkTime" type="datetime" format="YYYY/MM/DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" placeholder="Select date and time"/>
+				</el-form-item>
+				<el-form-item label="抽检结果" prop="result">
+					<el-select v-model="addRecord.result">
 						<el-option label="合格" value="合格" />
 						<el-option label="不合格" value="不合格" />
 					</el-select>
 				</el-form-item>
-				<el-form-item label="抽检时间">
-					<el-date-picker
-							v-model="AddRecord.checkinTime"
-							type="datetime"
-							placeholder="请选择"
-					/>
-				</el-form-item>
 				<el-form-item label="抽检意见">
-					<el-input v-model="AddRecord.remark" type="textarea"/>
+					<el-input v-model="addRecord.remark" type="textarea"/>
 				</el-form-item>
 				<el-form-item>
-					<el-button type="warning" @click="dialogDetails = false" size="default" plain>取消</el-button>
-					<el-button type="primary" @click="addRecord" size="default">确认</el-button>
+					<el-button type="warning" @click="dialogAddRecord = false" size="default" plain>取消</el-button>
+					<el-button type="primary" @click="confirmAddRecord(addRef)" size="default" v-throttle>确认</el-button>
 				</el-form-item>
 			</el-form>
 		</el-dialog>
-		<el-dialog v-model="deleteDialog" title="提示" width="30%" center>
+		<el-dialog v-model="deleteDialog" title="提示" width="30%" center @close="indexClear">
 			<span>您确定要删除该条记录吗?</span>
 			<template #footer>
 		  <span class="dialog-footer">
-			<el-button type="primary" @click="conFirmDelete" size="default">确认</el-button>
-			<el-button @click="deleteDialog = false" size="default">取消</el-button>
+			  <el-button @click="deleteDialog = false" size="default">取消</el-button>
+			<el-button type="primary" @click="conFirmDelete" size="default" v-throttle>确认</el-button>
 		  </span>
 			</template>
 		</el-dialog>
@@ -168,8 +165,9 @@
 	import { initBackEndControlRoutes } from '/@/router/backEnd';
 	import {useUserInfo} from "/@/stores/userInfo";
 	import { Session } from '/@/utils/storage';
-	import { Edit, Plus, Delete, Refresh, Search, Download } from '@element-plus/icons-vue'
+	import { Edit, View, Plus, Delete, Refresh, Search, Download } from '@element-plus/icons-vue'
 	import { ElTable } from 'element-plus'
+	import { FormInstance, FormRules } from 'element-plus'
 	let global: any = {
 		homeChartOne: null,
 		homeChartTwo: null,
@@ -183,89 +181,113 @@
 	interface type {
 
 	}
-	// export default defineComponent({
-	// 	name: 'workCheckinRecord',
-	// 	setup() {
-			const userInfo = useUserInfo()
-			const { userInfos } = storeToRefs(userInfo);
-			const state  = reactive<stateType>({});
-			const currentPage = ref(1)
-			const pageSize = ref(10)
-			const handleSizeChange = (val: number) => {
-				console.log(`${val} items per page`)
+	const userInfo = useUserInfo()
+	const { userInfos } = storeToRefs(userInfo);
+
+	// 分页
+	const currentPage = ref(1)
+	const pageSize = ref(10)
+
+	// 判断编辑和新增
+	const chosenIndex = ref(-1)
+
+	const handleSizeChange = (val: number) => {
+		console.log(`${val} items per page`)
+	}
+	const handleCurrentChange = (val: number) => {
+		console.log(`current page: ${val}`)
+	}
+	const tableData = reactive(
+			[
+			{
+				id: '11011',
+				cardName: '动火作业证',
+				checkTime: '2021-04-22 15:21:31',
+				worker: '吴海涛',
+				result: '合格',
+				remark: '没意见'
+			},
+			{
+				id: '11012',
+				cardName: '动火作业证',
+				checkTime: '2021-04-22 15:21:31',
+				worker: '吴沈峰',
+				result: '合格',
+				remark: '有点意见'
+			},
+		]
+	)
+	const addRef = ref<FormInstance>()
+	const addRules = reactive<FormRules>({
+		id:[{required: true, message: '该内容不能为空',trigger:'blur'}],
+		cardName:[{required: true, message: '该内容不能为空',trigger:'blur'}],
+		worker:[{required: true, message: '该内容不能为空',trigger:'blur'}],
+		result:[{required: true, message: '该内容不能为空',trigger:'blur'}],
+		checkTime:[{required: true, message: '该内容不能为空',trigger:'blur'}]
+	})
+
+	const dialogDetails = ref(false)
+	const dialogAddRecord = ref(false)
+	const deleteDialog = ref(false)
+	const addRecord = ref({})
+	const details = ref({})
+
+	// 查看记录
+	const viewRecord = (row) =>{
+		details.value = JSON.parse(JSON.stringify(row))
+		dialogDetails.value = true
+	}
+
+	// 删除记录
+	const deleteRecord = (index) =>{
+		chosenIndex.value = index
+		deleteDialog.value = true
+	}
+
+	// 弹窗确认删除记录
+	const conFirmDelete = ()=> {
+		tableData.splice(chosenIndex.value,1)
+		deleteDialog.value = false
+	}
+
+	// 弹窗确认新增记录
+	const confirmAddRecord = async (formEl: FormInstance | undefined) =>{
+		if (!formEl) return
+		await formEl.validate((valid, fields) => {
+			if (valid) {
+				if(chosenIndex.value == -1){
+					tableData.unshift(addRecord.value)
+				}else{
+					tableData[chosenIndex.value] = addRecord.value
+				}
+				dialogAddRecord.value =false
+			} else {
+				console.log('error submit!', fields)
 			}
-			const handleCurrentChange = (val: number) => {
-				console.log(`current page: ${val}`)
-			}
-			const tableData = ref(
-					[
-					{
-						id: '11011',
-						cardName: '动火作业证',
-						checkinTime: '2021-04-22 15:21:31',
-						name: '吴海涛',
-						result: '合格',
-						remark: '没意见'
-					},
-					{
-						id: '11012',
-						cardName: '动火作业证',
-						checkinTime: '2021-04-22 15:21:31',
-						name: '吴沈峰',
-						result: '合格',
-						remark: '有点意见'
-					},
-				]
-			)
-			const dialogDetails = ref(false)
-			const dialogAddRecord = ref(false)
-			const deleteDialog = ref(false)
-			const AddRecord = ref({})
-			const details = ref({})
-			const viewRecord = (row) =>{
-				details.value = JSON.parse(JSON.stringify(row))
-				dialogDetails.value = true
-			}
-			const deleteRecord = (row) =>{
-				deleteDialog.value = true
-			}
-			const conFirmDelete = (row)=> {
-				console.log(row,'row')
-				details.value = JSON.parse(JSON.stringify(row))
-				console.log(details,'details')
-				dialogDetails.value = true
-			}
-			// 折线图
-			const renderMenu = async (value: string) => {
-				Session.set('projectId',value)
-				userInfos.value.projectId = value
-				await initBackEndControlRoutes();
-			};
-			// return {
-			// 	renderMenu,
-			// 	multipleTableRef,
-			// 	tableData,
-			// 	currentPage,
-			// 	pageSize,
-			// 	dialogDetails,
-			// 	details,
-			// 	deleteDialog,
-			// 	dialogAddRecord,
-			// 	viewRecord,
-			// 	deleteRecord,
-			// 	handleSizeChange,
-			// 	handleCurrentChange,
-			// 	Plus,
-			// 	Edit,
-			// 	Delete,
-			// 	Search,
-			// 	Download,
-			// 	handleSelectionChange,
-			// 	Refresh,
-			// 	...toRefs(state),
-			// };
-	// 	},
-	// });
+		})
+
+	}
+	// 新增弹窗关闭时的数据初始化处理
+	const closeAdd =()=>{
+		addRecord.value={}
+		chosenIndex.value = -1
+	}
+	const indexClear = ()=>{
+		chosenIndex.value = -1
+	}
+
+	// 修改编辑记录
+	const editRecord =(index, row)=>{
+		dialogAddRecord.value = true
+		chosenIndex.value = index
+		addRecord.value = JSON.parse(JSON.stringify(row))
+	}
+	// 折线图
+	const renderMenu = async (value: string) => {
+		Session.set('projectId',value)
+		userInfos.value.projectId = value
+		await initBackEndControlRoutes();
+	};
 </script>
 
 <style scoped lang="scss">
@@ -336,4 +358,13 @@
 			}
 		}
 	}
+	.el-input{
+		width: 100% !important;
+	}
+	.el-date-editor::v-deep{
+		width: 100%;
+	}
+	.el-select{
+		width: 100%;
+	}
 </style>

--
Gitblit v1.9.2