From 6227519a1bd9007aedae11b77b0b3b1851837c38 Mon Sep 17 00:00:00 2001
From: 闫增涛 <1829501689@qq.com>
Date: 星期四, 03 七月 2025 14:41:04 +0800
Subject: [PATCH] 仿真测试页面，模型三位投影模块布局1修改
---
src/views/system/userManage.vue | 299 +++++++++++++++++++++++++++++++++++++++++++----------------
1 files changed, 215 insertions(+), 84 deletions(-)
diff --git a/src/views/system/userManage.vue b/src/views/system/userManage.vue
index 3d69e2f..bad16b5 100644
--- a/src/views/system/userManage.vue
+++ b/src/views/system/userManage.vue
@@ -1,7 +1,7 @@
<template>
<div class="user-manage">
<div class="flex jc-sb ai-c">
- <div class="addBox">
+ <div class="addBox" @click="addBtn">
<el-icon><Plus /></el-icon>
<span>鏂板缓</span>
</div>
@@ -26,12 +26,19 @@
class="roverTable"
>
<el-table-column prop="index" label="搴忓彿" width="60" />
- <el-table-column prop="userName" label="鐢ㄦ埛濮撳悕" />
- <el-table-column prop="name" label="鐢ㄦ埛鍚�" />
- <el-table-column prop="state" label="鐘舵��" />
+ <el-table-column prop="name" label="鐢ㄦ埛濮撳悕" />
+ <el-table-column prop="loginName" label="鐢ㄦ埛鍚�" />
+ <el-table-column prop="state" label="鐘舵��">
+ <template #default="scope">
+ <span v-if="scope.row.isEnable" style="color: rgb(46, 236, 21)"
+ >宸插惎鐢�</span
+ >
+ <span v-else style="color: rgb(255, 30, 0)">宸茬鐢� </span>
+ </template>
+ </el-table-column>
<el-table-column prop="role" label="绫诲瀷" />
- <el-table-column prop="creatTime" label="鍒涘缓鏃堕棿" />
- <el-table-column label="鎿嶄綔" width="220" >
+ <el-table-column prop="createDate" label="鍒涘缓鏃堕棿" />
+ <el-table-column label="鎿嶄綔" width="220">
<template #default="scope">
<el-button size="small" @click="update(scope.row)">
缂栬緫
@@ -56,12 +63,69 @@
@current-change="handleCurrentChange"
/>
</div>
+ <el-dialog
+ v-model="dialogFormVisible"
+ :title="dialogTitle"
+ width="500"
+ @close="closeDialog(formRef)"
+ >
+ <el-form
+ :model="form"
+ ref="formRef"
+ :rules="formRules"
+ label-width="140px"
+ >
+ <el-form-item label="鐢ㄦ埛鍚�" prop="loginName">
+ <el-input
+ v-model="form.loginName"
+ autocomplete="off"
+ placeholder="璇疯緭鍏�"
+ style="width: 240px"
+ />
+ </el-form-item>
+ <el-form-item label="濮撳悕" prop="name">
+ <el-input
+ v-model="form.name"
+ autocomplete="off"
+ placeholder="璇疯緭鍏�"
+ style="width: 240px"
+ />
+ </el-form-item>
+ <el-form-item label="瀵嗙爜" prop="password">
+ <el-input
+ v-model="form.password"
+ autocomplete="off"
+ placeholder="璇疯緭鍏�"
+ style="width: 240px"
+ show-password
+ />
+ </el-form-item>
+ <el-form-item label="纭瀵嗙爜" prop="confirmPassword">
+ <el-input
+ v-model="form.confirmPassword"
+ autocomplete="off"
+ placeholder="璇疯緭鍏�"
+ style="width: 240px"
+ show-password
+ />
+ </el-form-item>
+ </el-form>
+ <template #footer>
+ <div class="dialog-footer">
+ <el-button @click="closeDialog(formRef)">鍙栨秷</el-button>
+ <el-button type="primary" @click="submitBtn(formRef)">
+ 纭畾
+ </el-button>
+ </div>
+ </template>
+ </el-dialog>
</div>
</template>
<script setup lang="ts">
-import { ref, onMounted } from "vue";
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { ref, onMounted, reactive, inject, watch } from "vue";
+import { ElMessage, ElMessageBox, FormInstance, FormRules } from "element-plus";
+const MG: any = inject("MG");
const searchValue = ref();
const tableData = ref([]);
@@ -69,88 +133,154 @@
const currentPage = ref(4);
const pageSize = ref(100);
const background = ref(true);
-
-onMounted(() => {
- getUserData();
+const dialogFormVisible = ref(false);
+const dialogTitle = ref();
+const form = reactive({
+ name: "",
+ password: "",
+ loginName: "",
+ confirmPassword: "",
});
-const getUserData =() =>{
- let list=[
- {
- index: 1,
- userName:'',
- name:'',
- state:'',
- role:'',
- creatTime:'',
- },
- {
- index: 2,
- userName:'',
- name:'',
- state:'',
- role:'',
- creatTime:'',
- },
- {
- index: 3,
- userName:'',
- name:'',
- state:'',
- role:'',
- creatTime:'',
- },
- ]
- tableData.value = list
+const formRef = ref<FormInstance>();
+import { curStoreInfo } from "@/store/index";
+const seleStore = curStoreInfo();
+watch(
+ () => seleStore.departmentInfo, // 鐩戝惉 reactive 瀵硅薄锛堥粯璁ゆ繁搴︾洃鍚級
+ (newVal) => {
+ if (newVal) {
+ getUserData();
+ }
+ }
+);
+
+const closeDialog = (formEl: FormInstance | undefined) => {
+ if (!formEl) return;
+ formEl.resetFields();
+ dialogFormVisible.value = false;
+};
+
+const submitBtn = async (formEl: FormInstance | undefined) => {
+ if (!formEl) return;
+ await formEl.validate(async (valid, fields) => {
+ if (valid) {
+ const body = {
+ ...form,
+ state: "Normal",
+ type: "Normal",
+ source: "",
+ info: "",
+ departmentId: seleStore.departmentInfo.id,
+ };
+ delete body.confirmPassword;
+ const res = await MG.dps5.NewUser(body);
+ console.log(res);
+ if (res) {
+ ElMessage({
+ message: "鏂板缓鐢ㄦ埛鎴愬姛",
+ type: "success",
+ });
+ getUserData();
+ dialogFormVisible.value = false;
+ }
+ }
+ });
+};
+
+interface formInfo {
+ name: string;
+ refCode: string;
+ password: string;
+ confirmPassword: string;
+ loginName: string;
}
+
+// 鑷畾涔夊瘑鐮佹牎楠岃鍒�
+const validatePassword = (rule, value, callback) => {
+ if (value === "") {
+ callback(new Error("璇疯緭鍏ュ瘑鐮�"));
+ } else if (value.length < 6) {
+ callback(new Error("瀵嗙爜闀垮害涓嶈兘灏戜簬6浣�"));
+ } else {
+ if (form.confirmPassword !== "") {
+ // 濡傛灉纭瀵嗙爜宸茶緭鍏ワ紝瑙﹀彂纭瀵嗙爜鐨勯噸鏂伴獙璇�
+ formRef.value.validateField("confirmPassword", () => null);
+ }
+ callback();
+ }
+};
+
+// 鑷畾涔夌‘璁ゅ瘑鐮佹牎楠岃鍒�
+const validateConfirmPassword = (rule, value, callback) => {
+ if (value === "") {
+ callback(new Error("璇峰啀娆¤緭鍏ュ瘑鐮�"));
+ } else if (value !== form.password) {
+ callback(new Error("涓ゆ杈撳叆鐨勫瘑鐮佷笉涓�鑷�!"));
+ } else {
+ callback();
+ }
+};
+const formRules = reactive<FormRules<formInfo>>({
+ loginName: [{ required: true, message: "鐢ㄦ埛鍚嶄笉鑳戒负绌�", trigger: "blur" }],
+ name: [{ required: true, message: "濮撳悕涓嶈兘涓虹┖", trigger: "blur" }],
+ password: [{ required: true, validator: validatePassword, trigger: "blur" }],
+ confirmPassword: [
+ { required: true, validator: validateConfirmPassword, trigger: "blur" },
+ ],
+});
+
+const getUserData = async () => {
+ const body = {
+ departmentId: seleStore.departmentInfo.id,
+ filterList: [],
+ searchList: [],
+ sort: {
+ field: "CreateDate",
+ subSorts: [],
+ type: "Desc",
+ },
+ start: 0,
+ size: 9999,
+ };
+ const res = await MG.dps5.GetDepartmentUserList(body);
+ tableData.value = res.datas;
+};
const handleCurrentChange = (val: number) => {
console.log(`current page: ${val}`);
};
-
+//鏂板鐢ㄦ埛
+const addBtn = () => {
+ dialogFormVisible.value = true;
+ dialogTitle.value = "鏂板鐢ㄦ埛";
+};
// 缂栬緫
-const update = (row) =>{
-
-}
+const update = (row) => {};
//绂佺敤
-const goDisable = (row) =>{
- ElMessageBox.confirm(
- '纭畾瑕佺鐢ㄨ鐢ㄦ埛?',
- 'Warning',
- {
- confirmButtonText: '纭畾',
- cancelButtonText: '鍙栨秷',
- type: 'warning',
- }
- )
+const goDisable = (row) => {
+ ElMessageBox.confirm("纭畾瑕佺鐢ㄨ鐢ㄦ埛?", "Warning", {
+ confirmButtonText: "纭畾",
+ cancelButtonText: "鍙栨秷",
+ type: "warning",
+ })
.then(() => {
- console.log(row)
-
+ console.log(row);
})
- .catch(() => {
-
- })
-
-}
+ .catch(() => {});
+};
//鍒犻櫎
-const goDelete = () =>{
- ElMessageBox.confirm(
- '纭畾瑕佸垹闄よ鐢ㄦ埛?',
- 'Warning',
- {
- confirmButtonText: '纭畾',
- cancelButtonText: '鍙栨秷',
- type: 'warning',
- }
- )
+const goDelete = () => {
+ ElMessageBox.confirm("纭畾瑕佸垹闄よ鐢ㄦ埛?", "Warning", {
+ confirmButtonText: "纭畾",
+ cancelButtonText: "鍙栨秷",
+ type: "warning",
+ })
.then(() => {
- console.log(row)
+ console.log(row);
})
- .catch(() => {
-
- })
-}
+ .catch(() => {});
+};
</script>
<style lang="less" scoped>
@@ -161,16 +291,17 @@
display: flex;
align-items: center;
color: #409eff;
+ cursor: pointer;
}
-.list{
- margin-top:20px;
+.list {
+ margin-top: 20px;
}
.rover-pagination-block {
- height: 60px;
- display: flex;
- justify-content: flex-end;
- background-color: #fff;
- padding: 0 10px;
- box-sizing: border-box;
- }
+ height: 60px;
+ display: flex;
+ justify-content: flex-end;
+ background-color: #fff;
+ padding: 0 10px;
+ box-sizing: border-box;
+}
</style>
--
Gitblit v1.9.1