From 4cdc481a49d767e945ccf2f1b7b6ac8173bc6886 Mon Sep 17 00:00:00 2001
From: Jin-Yanhong <820877998@qq.com>
Date: Thu, 3 Aug 2023 16:21:59 +0800
Subject: [PATCH] update Crud component

---
 src/assets/style/reset.less         |  36 ++---
 src/components/Crud/index.vue       | 214 +++++++++++++++++++++-------
 src/components/Crud/setFormRules.js |  16 +++
 src/views/System/Dicts.vue          |  32 +++--
 4 files changed, 211 insertions(+), 87 deletions(-)
 create mode 100644 src/components/Crud/setFormRules.js

diff --git a/src/assets/style/reset.less b/src/assets/style/reset.less
index 9b5e41e..e4fe8d7 100644
--- a/src/assets/style/reset.less
+++ b/src/assets/style/reset.less
@@ -8,11 +8,15 @@ body {
 a {
 	color: @color-light;
 	text-decoration: none;
+	transition: @during-link;
 
 	&:hover {
-		transition: @during-link;
 		.color.link.hover();
 	}
+
+	&:visited {
+		.color.link.visited();
+	}
 }
 
 p,
@@ -21,35 +25,23 @@ h2,
 h3,
 h4,
 h5,
-h6,
-dl,
-ul {
+h6 {
 	.noGap();
+}
 
-	dt,
-	dd,
-	li {
-		list-style: none;
-		.noGap();
-	}
+dl,
+dt,
+dd,
+ul,
+li {
+	.noGap();
+	list-style: none;
 }
 
 img {
 	display: inline-block;
 }
 
-.el-Btn {
-	width: calc(100% - 10px);
-	margin-bottom: 10px !important;
-	margin-top: 0 !important;
-	margin-left: 0 !important;
-	margin-right: 0 !important;
-}
-
-.el-Btn:nth-last-child(1) {
-	margin: 0 !important;
-}
-
 .el-tabs__nav-wrap::after {
 	z-index: 0 !important;
 }
\ No newline at end of file
diff --git a/src/components/Crud/index.vue b/src/components/Crud/index.vue
index ceaee8a..d37fb63 100644
--- a/src/components/Crud/index.vue
+++ b/src/components/Crud/index.vue
@@ -1,83 +1,187 @@
 <script lang="jsx">
-import { h } from 'vue';
-import { ElButton, ElPagination, ElTable, ElTableColumn, ElIcon } from 'element-plus';
-import { Search } from '@element-plus/icons-vue';
+import { h, nextTick } from 'vue';
+import { ElButton, ElPagination, ElTable, ElTableColumn, ElIcon, ElDialog, ElForm } from 'element-plus';
+import { Search, Delete, Edit, Plus } from '@element-plus/icons-vue';
+import { formRules } from './setFormRules';
+
+const formStatus = {
+	update: 'update',
+	create: 'create',
+};
 
 export default {
 	name: 'Crud',
-	props: ['api'],
 	render() {
-		const tableRowData = [
-			{
-				date: '2016-05-03',
-				name: 'Tom',
-				address: 'No. 189, Grove St, Los Angeles',
-			},
-			{
-				date: '2016-05-02',
-				name: 'Tom',
-				address: 'No. 189, Grove St, Los Angeles',
-			},
-		];
-		const defaultSlot = this.$slots.default().map(column => {
-			return column;
-		});
+		const { tableName, toCreate, toDelete, toUpdate, toQuery, pageCurrentChange, pageSizeChange, toSubmit } = this;
+		let { status, pager, dialogVisible, tableRowData } = this;
+
+		const columns = this.$slots?.column();
 
-		const { toCreate, toDelete, toUpdate, toQuery } = this;
+		const columnsList = columns && columns instanceof Array ? columns : [];
+
+		const columnSlots = columnsList.concat(
+			<ElTableColumn label='操作'>
+				{{
+					default: ({ row, $index }) => (
+						<div>
+							<ElButton size='small' type='warning' icon={() => <ElIcon>{() => <Edit />}</ElIcon>} onClick={() => toUpdate(row, $index)}>
+								{() => '更新'}
+							</ElButton>
+							<ElButton size='small' type='danger' icon={() => <ElIcon>{() => <Delete />}</ElIcon>} onClick={() => toDelete(row, $index)}>
+								{() => '删除'}
+							</ElButton>
+						</div>
+					),
+				}}
+			</ElTableColumn>
+		);
 
 		return h(
 			'div',
 			{ class: ['Crud'] },
 			<div>
 				<div>
-					<div class='marginT'>
-						<ElButton size='small' type='' onClick={toCreate}>
-							{{ default: () => '新增' }}
-						</ElButton>
-						<ElButton type='danger' onClick={toDelete}>
-							{{ default: () => '删除' }}
-						</ElButton>
-						<ElButton type='' onClick={toUpdate}>
-							{{ default: () => '更新' }}
-						</ElButton>
-						<ElButton type='danger' icon={{ default: () => <Search /> }} onClick={toQuery}>
-							{{ default: () => '查询' }}
-						</ElButton>
-					</div>
+					<ElButton type='success' icon={() => <ElIcon>{() => <Plus />}</ElIcon>} onClick={toCreate}>
+						{() => '新增'}
+					</ElButton>
+					<ElButton type='danger' icon={() => <ElIcon>{() => <Delete />}</ElIcon>} onClick={toDelete}>
+						{() => '删除'}
+					</ElButton>
+					<ElButton type='warning' icon={() => <ElIcon>{() => <Edit />}</ElIcon>} onClick={toUpdate}>
+						{() => '更新'}
+					</ElButton>
+					<ElButton type='primary' icon={() => <ElIcon>{() => <Search />}</ElIcon>} onClick={toQuery}>
+						{() => '查询'}
+					</ElButton>
+				</div>
 
-					<div class='marginT'>
-						<ElTable ref='table' data={tableRowData}>
-							{{
-								default: defaultSlot,
-							}}
+				<div class='marginT'>
+					<ElTable ref='table' data={tableRowData} border>
+						{() => columnSlots}
+					</ElTable>
+				</div>
 
-							<ElTableColumn>
-								<ElButton type='' onClick={toUpdate}>
-									{{ default: () => '修改' }}
+				<div class='marginT flex'>
+					<span style='flex: 1' />
+					<ElPagination small background layout='total, sizes, prev, pager, next, jumper' pageSize={pager.size} currentPage={pager.current} total={pager.total} onUpdate:current-page={pageCurrentChange} onUpdate:page-size={pageSizeChange} />
+				</div>
+
+				<ElDialog
+					appendToBody
+					title={(status == formStatus.create ? '新增' : '编辑') + ' ' + tableName}
+					modelValue={dialogVisible}
+					onUpdate:modelValue={$event => {
+						this.dialogVisible = $event;
+					}}
+				>
+					{{
+						default: () => (
+							<ElForm ref='ruleForm' model={this.currentItem} rules={this.formRules}>
+								{() => this.$slots.form(this.currentItem)}
+							</ElForm>
+						),
+						footer: () => (
+							<span>
+								<ElButton size='small' type='' onClick={() => (this.dialogVisible = false)}>
+									{() => '取消'}
 								</ElButton>
-								<ElButton type='' onClick={toUpdate}>
-									{{ default: () => '删除' }}
+								<ElButton size='small' type='primary' onClick={toSubmit}>
+									{() => '确认'}
 								</ElButton>
-							</ElTableColumn>
-						</ElTable>
-					</div>
-				</div>
-				<div class='marginT'>
-					<ElPagination small layout='prev, pager, next' total={30} />
-				</div>
+							</span>
+						),
+					}}
+				</ElDialog>
 			</div>
 		);
 	},
 	data() {
 		return {
-			//
+			tableRowData: [
+				{
+					date: '2016-05-03',
+					name: 'Tom',
+					state: 'California',
+					city: 'Los Angeles',
+					address: 'No. 189, Grove St, Los Angeles',
+					zip: 'CA 90036',
+					tag: 'Home',
+				},
+				{
+					date: '2016-05-04',
+					name: 'Tom',
+					state: 'California',
+					city: 'Los Angeles',
+					address: 'No. 189, Grove St, Los Angeles',
+					zip: 'CA 90036',
+					tag: 'Home',
+				},
+			],
+			query: {},
+			pager: {
+				size: 10,
+				total: 100,
+				current: 1,
+			},
+			dialogVisible: false,
+			status: formStatus.create,
+			currentItem: {},
+			formRules: {},
 		};
 	},
+	props: {
+		tableName: {
+			type: String,
+			required: true,
+			default: '',
+		},
+	},
+	created() {
+		this.setFormRules();
+	},
 	methods: {
-		toCreate() {},
-		toDelete() {},
-		toUpdate() {},
+		async resetFormFields(callback) {
+			await nextTick(() => {
+				this.$refs.ruleForm.resetFields();
+
+				for (const key in this.currentItem) {
+					if (Object.hasOwnProperty.call(this.currentItem, key)) {
+						this.currentItem[key] = undefined;
+					}
+				}
+			})
+				.then(() => {
+					callback();
+				})
+				.catch(err => {
+					console.log('Crud resetFormFields Error:', err.message);
+				});
+		},
+		setFormRules() {
+			const columns = this.$slots?.column();
+			const columnsList = columns && columns instanceof Array ? columns : [];
+			columnsList.forEach(column => (this.currentItem[column.props.prop] = undefined));
+			this.formRules = formRules(this.currentItem);
+		},
+		toCreate() {
+			this.dialogVisible = true;
+			this.resetFormFields(() => {
+				this.status = formStatus.create;
+			});
+		},
+		toDelete(row) {},
+		toUpdate(row) {
+			this.dialogVisible = true;
+			this.resetFormFields(() => {
+				this.status = formStatus.update;
+				this.currentItem = JSON.parse(JSON.stringify(row));
+			});
+		},
 		toQuery() {},
+		toReload() {},
+		pageCurrentChange() {},
+		pageSizeChange() {},
+		toSubmit() {},
 	},
 };
 </script>
diff --git a/src/components/Crud/setFormRules.js b/src/components/Crud/setFormRules.js
new file mode 100644
index 0000000..33b66f2
--- /dev/null
+++ b/src/components/Crud/setFormRules.js
@@ -0,0 +1,16 @@
+const rules = {
+	date: [{ required: true, message: 'Date不能为空', trigger: ['blur', 'change'] }],
+	name: [{ required: true, message: 'Name不能为空', trigger: ['blur', 'change'] }],
+	state: [{ required: true, message: 'State不能为空', trigger: ['blur', 'change'] }],
+	city: [{ required: true, message: 'City不能为空', trigger: ['blur', 'change'] }],
+	address: [{ required: true, message: 'Address不能为空', trigger: ['blur', 'change'] }],
+	zip: [{ required: true, message: 'Zip不能为空', trigger: ['blur', 'change'] }],
+};
+
+export function formRules(form) {
+	let rule = {};
+	Object.keys(form).forEach(key => {
+		rule[key] = rules[key];
+	});
+	return rule;
+}
diff --git a/src/views/System/Dicts.vue b/src/views/System/Dicts.vue
index d516c68..dbcdc3b 100644
--- a/src/views/System/Dicts.vue
+++ b/src/views/System/Dicts.vue
@@ -1,22 +1,34 @@
 <template>
 	<div class="view">
-		<Crud api="abc">
-			<ElTableColumn prop="date" label="Date" width="180"></ElTableColumn>
-			<ElTableColumn prop="date" label="Date" width="180"></ElTableColumn>
-			<ElTableColumn prop="date" label="Date" width="180"></ElTableColumn>
-			<ElTableColumn prop="date" label="Date" width="180"></ElTableColumn>
-			<ElTableColumn prop="date" label="Date" width="180"></ElTableColumn>
-			<ElTableColumn prop="date" label="Date" width="180"></ElTableColumn>
-			<ElTableColumn prop="date" label="Date" width="180"></ElTableColumn>
+		<Crud tableName="字典项">
+			<!-- <template #column> -->
+			<template v-slot:column>
+				<el-table-column prop="date" label="Date" />
+				<el-table-column prop="name" label="Name" />
+				<el-table-column prop="state" label="State" />
+				<el-table-column prop="city" label="City" />
+				<el-table-column prop="address" label="Address" />
+				<el-table-column prop="zip" label="Zip" />
+			</template>
+			<template v-slot:form="form">
+				<el-form-item label="Date" prop="date">
+					<el-input v-model="form.date" />
+				</el-form-item>
+				<el-form-item label="Name" prop="name">
+					<el-input v-model="form.name" />
+				</el-form-item>
+				<el-form-item label="Address" prop="address">
+					<el-input v-model="form.address" />
+				</el-form-item>
+			</template>
 		</Crud>
 	</div>
 </template>
 
 <script lang="ts" setup>
 import { ref } from 'vue';
-import { tableColumnProps } from '@/types/index';
-import { ElTableColumn } from 'element-plus';
 import Crud from '@/components/Crud/index.vue';
+
 defineOptions({
 	name: 'SystemDicts',
 });