feat: #0000 新增编辑用户管理弹窗

src/views/setting/user/index.vue

@@ -16,10 +16,10 @@
 								:current-node-key="''"
 								:highlight-current="true"
 								:expand-on-click-node="false"
-								@node-click="roleClick"
 								:props="defaultProps"
 								default-expand-all
 								:filter-node-method="filterNode"
+								@node-click="roleClick"
 							/>
 						</el-main>
 					</el-container>
@@ -36,12 +36,12 @@
 							ref="tableRef"
 							v-model:searchParams="tableOpts.searchParams"
 							v-bind="tableOpts"
-							:columns="activeColumns"
 							v-model:curRow="tableOpts.curRow"
 							v-model:checked-options="checkedColumns"
+							:columns="activeColumns"
 						>
 							<template #toolLeft>
-								<el-button type="primary">
+								<el-button type="primary" @click="addHandler">
 									<el-icon class="btn-icon">
 										<Plus />
 									</el-icon>
@@ -60,8 +60,8 @@
 							</template>
 
 							<template #statusSlot="scope">
-								<status-indicator pulse type="success" v-if="scope.row.status === 1"></status-indicator>
-								<status-indicator pulse type="danger" v-else></status-indicator>
+								<status-indicator v-if="scope.row.status === 1" pulse type="success"></status-indicator>
+								<status-indicator v-else pulse type="danger"></status-indicator>
 							</template>
 
 							<template #actionSlot="">
@@ -71,7 +71,7 @@
 									</el-icon>
 								</el-tooltip>
 								<el-divider direction="vertical"></el-divider>
-								<el-popconfirm title="确定删除吗？">
+								<el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row)">
 									<template #reference>
 										<el-icon class="ibt0">
 											<Delete />
@@ -84,16 +84,107 @@
 				</el-container>
 			</el-container>
 		</el-card>
+
+		<LeFormConfigDialog
+			v-if="visible"
+			ref="dialogUserRef"
+			v-model="visible"
+			:title="`${isCreate ? '新增' : '编辑'}用户`"
+			width="600px"
+			:form-data="activeData"
+			:form-options="formOptions"
+			@submit="submitHandler"
+		/>
 	</div>
 </template>
 <script lang="tsx" setup>
 import role from '@/api/system/role'
 import user from '@/api/system/user'
 import { nextTick, ref, watch } from 'vue'
-import { ElTree } from 'element-plus'
+import { ElMessage, ElTree } from 'element-plus'
 import { useTablePage } from '@/hooks/useTablePage'
 import { Plus, Delete } from '@element-plus/icons-vue'
 import StatusIndicator from '@/components/StatusIndicator'
+const visible = ref(false) // 弹窗显示隐藏
+const isCreate = ref(true)
+const activeData = ref({})
+const formOptions = ref({
+	forms: [
+		{
+			prop: 'custName',
+			label: '登录账号',
+			itemType: 'input',
+			placeholder: '用于登录系统',
+			rules: [{ required: true, message: '请输入登录账号', trigger: 'blur' }]
+		},
+		{
+			prop: 'custName1',
+			label: '登录密码',
+			itemType: 'input',
+			rules: [{ required: true, message: '请输入登录密码', trigger: 'blur' }]
+		},
+		{
+			prop: 'custName2',
+			label: '确认密码',
+			itemType: 'input',
+			rules: [{ required: true, message: '请再次输入密码', trigger: 'blur' }]
+		},
+		{
+			prop: 'custName3',
+			label: '昵称',
+			itemType: 'input',
+		},
+		{
+			prop: 'custName4',
+			label: '姓名',
+			itemType: 'input',
+		},
+		{
+			prop: 'custName5',
+			label: '性别',
+			itemType: 'radio',
+			options: [
+				{ value: '0', label: '男' },
+				{ value: '1', label: '女' }
+			]
+		},
+		{
+			prop: 'switch',
+			// label: '状态',
+			t_label: '状态',
+			itemType: 'switch',
+			slots: {
+				label: 'slot_label_test',
+			},
+			activeText: '是',
+			inactiveText: '否',
+			change(value, options, params) {
+				console.warn('dataType change  value, options, params', value, options, params)
+			}
+		},
+		{
+			prop: 'select多选',
+			label: '所属角色',
+			itemType: 'select',
+			multiple: true,
+			collapseTags: true,
+			maxCollapseTags: 1,
+			filterable: true,
+			itemWidth: '200px',
+			options: [
+				{ value: '类型one', label: '类型一' },
+				{ value: '类型two', label: '类型二' },
+				{ value: '类型three', label: '类型三' }
+			]
+		}
+	],
+	labelWidth: 120,
+	span: 30,
+	showResetBtn: true,
+	formConfig: {
+		submitLoading: false
+	}
+})
 const showGroupLoading = ref(false)
 const groupFilterText = ref('')
 const treeRef = ref<InstanceType<typeof ElTree>>()
@@ -122,6 +213,7 @@ const getGroup = async () => {
 // 左侧菜单点击
 const roleClick = data => {
 	console.log(data.id, 'data.id')
+	// queryList()
 	// 刷新右侧的表格
 }
 
@@ -245,6 +337,25 @@ const { searchData, tableOpts, checkedColumns, activeColumns } = useTablePage(
 	}
 )
 
+// 删除
+const table_del = (row) => {
+	// 删除
+}
+
+//批量删除
+const batch_del = () => {}
+
+// 弹窗事件
+const submitHandler = params => {
+	ElMessage.success(`${isCreate.value ? '新增' : '修改'}成功~`)
+}
+
+const addHandler = () => {
+	isCreate.value = true
+	activeData.value = {}
+	visible.value = true
+}
+
 nextTick(() => {
 	getGroup()
 	queryList()