From 41b20b89eb03e1a7e52e7e31ce3fd3f240f67c46 Mon Sep 17 00:00:00 2001
From: Your Name <123456>
Date: 星期一, 04 七月 2022 11:17:21 +0800
Subject: [PATCH] '菜单'
---
.env.development | 2
/dev/null | 202 ---------------
src/views/system/user/index.vue | 153 +++++++----
src/api/user/index.ts | 27 ++
src/views/doublePreventSystem/riskLevelManage/productionDevice/index.vue | 26 +-
src/api/doubleProventSystem/productionDevice/index.ts | 0
src/views/system/user/component/userDialog.vue | 221 +++++++++++++++++
src/views/doublePreventSystem/riskLevelManage/productionDevice/components/productionDeviceDialog.vue | 76 +++++
src/views/doublePreventSystem/riskLevelManage/safetyRiskSpaceImg/index.vue | 13 +
src/views/system/menu/component/menuDialog.vue | 4
10 files changed, 444 insertions(+), 280 deletions(-)
diff --git a/.env.development b/.env.development
index 0c99294..5d83d16 100644
--- a/.env.development
+++ b/.env.development
@@ -2,6 +2,6 @@
ENV = 'development'
# 本地环境接口地址
-VITE_API_URL = 'http://192.168.0.35:8008'
+VITE_API_URL = 'http://192.168.0.8:8008'
# VITE_API_URL = 'http://192.168.0.8:8008'
diff --git a/src/api/productionDevice/index.ts b/src/api/doubleProventSystem/productionDevice/index.ts
similarity index 100%
rename from src/api/productionDevice/index.ts
rename to src/api/doubleProventSystem/productionDevice/index.ts
diff --git a/src/api/user/index.ts b/src/api/user/index.ts
new file mode 100644
index 0000000..33f1ead
--- /dev/null
+++ b/src/api/user/index.ts
@@ -0,0 +1,27 @@
+import request from '/@/utils/request';
+
+export function userApi() {
+ return {
+ getUserList: (data: any) => {
+ return request({
+ url: `/account/page/list`,
+ method: 'post',
+ data:data
+ });
+ },
+ addUser: (data: object) => {
+ return request({
+ url: `/account/add`,
+ method: 'post',
+ data:data
+ });
+ },
+ modUser: (data: object) => {
+ return request({
+ url: `/account/mod`,
+ method: 'post',
+ data:data
+ });
+ },
+ };
+}
diff --git a/src/views/doublePreventSystem/riskLevelManage/productionDevice/components/productionDeviceDialog.vue b/src/views/doublePreventSystem/riskLevelManage/productionDevice/components/productionDeviceDialog.vue
new file mode 100644
index 0000000..e612004
--- /dev/null
+++ b/src/views/doublePreventSystem/riskLevelManage/productionDevice/components/productionDeviceDialog.vue
@@ -0,0 +1,76 @@
+<template>
+ <div class="system-add-menu-container">
+ <el-dialog :title="title" v-model="isShowProductionDeviceDialog" width="769px">
+ <el-form :model="ruleForm" size="default" label-width="80px">
+ <el-row :gutter="35">
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="生产装置名称">
+ <el-input v-model="roleForm.produceDeviceName" placeholder="请输入生产装置名称" clearable></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="所属部门">
+ <el-select v-model="roleForm.depName" placeholder="请选择所属部门" clearable filterable></el-select>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
+ <el-form-item label="风险等级">
+ <el-select v-model="roleForm.riskLevel" placeholder="请选择风险等级"clearable filterable></el-select>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
+ <el-form-item label="区域位置">
+ <el-input v-model="roleForm.location" type="textarea" placeholder="请输入区域位置" maxlength="150"></el-input>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ </el-form>
+ <template #footer>
+ <span class="dialog-footer">
+ <el-button @click="onCancel" size="default">取 消</el-button>
+ <el-button type="primary" @click="onSubmit" size="default">确 实</el-button>
+ </span>
+ </template>
+ </el-dialog>
+ </div>
+</template>
+
+<script lang="ts">
+ interface stateType{
+ isShowProductionDeviceDialog:Boolean,
+ productionDeviceForm:{
+ produceDeviceName: string,
+ depName: number | null,
+ riskLevel: number | null,
+ location: string,
+ }
+ }
+ import { reactive, toRefs } from 'vue'
+ export default {
+ name: "productionDeviceDialog",
+ setup() {
+ const state = reactive<stateType>({
+ isShowProductionDeviceDialog: false,
+ productionDeviceForm: {
+ produceDeviceName: '',
+ depName: null,
+ riskLevel: null,
+ location: '',
+ },
+ });
+
+ const openProductionDeviceDialog = () => {
+ state.isShowProductionDeviceDialog = true;
+ };
+
+ return{
+ ...toRefs(state),
+ openProductionDeviceDialog,
+ };
+ }
+ }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/doublePreventSystem/riskLevelManage/productionDevice/index.vue b/src/views/doublePreventSystem/riskLevelManage/productionDevice/index.vue
index 76f4724..8eb64d1 100644
--- a/src/views/doublePreventSystem/riskLevelManage/productionDevice/index.vue
+++ b/src/views/doublePreventSystem/riskLevelManage/productionDevice/index.vue
@@ -13,7 +13,7 @@
<el-icon>
<ele-FolderAdd />
</el-icon>
- 新增角色
+ 新增装置
</el-button>
</div>
<el-table :data="productionDeviceData.data" style="width: 100%">
@@ -36,15 +36,15 @@
</el-table-column>
</el-table>
</el-card>
- <roleDialog ref="roleDialogRef" @refreshRoleList="initRoleTableData"/>
+ <productionDeviceDialog ref="productionDeviceDialogRef" @refreshRoleList="initRoleTableData"/>
</div>
</template>
<script lang="ts">
import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
- import roleDialog from '/@/views/system/role/component/roleDialog.vue';
- import {productionDeviceApi} from "/@/api/productionDevice";
+ import productionDeviceDialog from './components/productionDeviceDialog.vue';
+ import {productionDeviceApi} from "/@/api/doubleProventSystem/productionDevice";
// 定义接口来定义对象的类型
interface TableData {
@@ -74,9 +74,9 @@
export default defineComponent({
name: 'productionDevice',
- components: { roleDialog },
+ components: { productionDeviceDialog },
setup() {
- const roleDialogRef = ref();
+ const productionDeviceDialogRef = ref();
const state = reactive<TableDataState>({
productionDeviceData: {
data: [],
@@ -105,9 +105,9 @@
})
}
};
- // 打开新增角色弹窗
+ // 打开生产装置弹窗
const onOpenDialogRef = (type: string, value: any) => {
- roleDialogRef.value.openDialog(type, value);
+ productionDeviceDialogRef.value.openProductionDeviceDialog(type, value);
};
// 删除角色
const onRowDel = (row: any) => {
@@ -124,11 +124,11 @@
}
// 分页改变
const onHandleSizeChange = (val: number) => {
- state.productionDeviceData.param.pageSize = val;
+ state.productionDeviceData.params.pageSize = val;
};
// 分页改变
const onHandleCurrentChange = (val: number) => {
- state.productionDeviceData.param.pageNum = val;
+ state.productionDeviceData.params.pageIndex = val;
};
// 页面加载时
onMounted(() => {
@@ -136,13 +136,13 @@
});
return {
onRowDel,
- roleDialog,
handleSearch,
- roleDialogRef,
onOpenDialogRef,
- initProductionDeviceTableData,
onHandleSizeChange,
onHandleCurrentChange,
+ productionDeviceDialog,
+ productionDeviceDialogRef,
+ initProductionDeviceTableData,
...toRefs(state),
};
},
diff --git a/src/views/doublePreventSystem/riskLevelManage/safetyRiskSpaceImg/index.vue b/src/views/doublePreventSystem/riskLevelManage/safetyRiskSpaceImg/index.vue
new file mode 100644
index 0000000..db27c8a
--- /dev/null
+++ b/src/views/doublePreventSystem/riskLevelManage/safetyRiskSpaceImg/index.vue
@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+ export default {
+ name: "index"
+ }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/system/menu/component/menuDialog.vue b/src/views/system/menu/component/menuDialog.vue
index 500a948..0517bac 100644
--- a/src/views/system/menu/component/menuDialog.vue
+++ b/src/views/system/menu/component/menuDialog.vue
@@ -132,7 +132,7 @@
isAffix: false, // 是否固定
isLink: '', // 外链/内嵌时链接地址（http:xxx.com），开启外链条件，`1、isLink: 链接地址不为空`
isIframe: false, // 是否内嵌，开启条件，`1、isIframe:true 2、isLink：链接地址不为空`
- roles: '', // 权限标识，取角色管理
+ roles: [], // 权限标识，取角色管理
},
btnPower: '', // 菜单类型为按钮时，权限标识
},
@@ -176,7 +176,7 @@
isAffix: false,
isLink: '',
isIframe: false,
- roles: '',
+ roles: [],
},
btnPower: '',
}
diff --git a/src/views/system/user/component/addUser.vue b/src/views/system/user/component/addUser.vue
deleted file mode 100644
index 4a78153..0000000
--- a/src/views/system/user/component/addUser.vue
+++ /dev/null
@@ -1,200 +0,0 @@
-<template>
- <div class="system-add-user-container">
- <el-dialog title="新增用户" v-model="isShowDialog" width="769px">
- <el-form :model="ruleForm" size="default" label-width="90px">
- <el-row :gutter="35">
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="账户名称">
- <el-input v-model="ruleForm.userName" placeholder="请输入账户名称" clearable></el-input>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="用户昵称">
- <el-input v-model="ruleForm.userNickname" placeholder="请输入用户昵称" clearable></el-input>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="关联角色">
- <el-select v-model="ruleForm.roleSign" placeholder="请选择" clearable class="w100">
- <el-option label="超级管理员" value="admin"></el-option>
- <el-option label="普通用户" value="common"></el-option>
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="部门">
- <el-cascader
- :options="deptData"
- :props="{ checkStrictly: true, value: 'deptName', label: 'deptName' }"
- placeholder="请选择部门"
- clearable
- class="w100"
- v-model="ruleForm.department"
- >
- <template #default="{ node, data }">
- <span>{{ data.deptName }}</span>
- <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
- </template>
- </el-cascader>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="手机号">
- <el-input v-model="ruleForm.phone" placeholder="请输入手机号" clearable></el-input>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="邮箱">
- <el-input v-model="ruleForm.email" placeholder="请输入" clearable></el-input>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="性别">
- <el-select v-model="ruleForm.sex" placeholder="请选择" clearable class="w100">
- <el-option label="男" value="男"></el-option>
- <el-option label="女" value="女"></el-option>
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="账户密码">
- <el-input v-model="ruleForm.password" placeholder="请输入" type="password" clearable></el-input>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="账户过期">
- <el-date-picker v-model="ruleForm.overdueTime" type="date" placeholder="请选择" class="w100"> </el-date-picker>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="用户状态">
- <el-switch v-model="ruleForm.status" inline-prompt active-text="启" inactive-text="禁"></el-switch>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
- <el-form-item label="用户描述">
- <el-input v-model="ruleForm.describe" type="textarea" placeholder="请输入用户描述" maxlength="150"></el-input>
- </el-form-item>
- </el-col>
- </el-row>
- </el-form>
- <template #footer>
- <span class="dialog-footer">
- <el-button @click="onCancel" size="default">取 消</el-button>
- <el-button type="primary" @click="onSubmit" size="default">新 增</el-button>
- </span>
- </template>
- </el-dialog>
- </div>
-</template>
-
-<script lang="ts">
-import { reactive, toRefs, onMounted, defineComponent } from 'vue';
-
-// 定义接口来定义对象的类型
-interface DeptData {
- deptName: string;
- createTime: string;
- status: boolean;
- sort: number | string;
- describe: string;
- id: number;
- children?: DeptData[];
-}
-interface UserState {
- isShowDialog: boolean;
- ruleForm: {
- userName: string;
- userNickname: string;
- roleSign: string;
- department: any;
- phone: string;
- email: string;
- sex: string;
- password: string;
- overdueTime: string;
- status: boolean;
- describe: string;
- };
- deptData: Array<DeptData>;
-}
-
-export default defineComponent({
- name: 'systemAddUser',
- setup() {
- const state = reactive<UserState>({
- isShowDialog: false,
- ruleForm: {
- userName: '', // 账户名称
- userNickname: '', // 用户昵称
- roleSign: '', // 关联角色
- department: [], // 部门
- phone: '', // 手机号
- email: '', // 邮箱
- sex: '', // 性别
- password: '', // 账户密码
- overdueTime: '', // 账户过期
- status: true, // 用户状态
- describe: '', // 用户描述
- },
- deptData: [], // 部门数据
- });
- // 打开弹窗
- const openDialog = () => {
- state.isShowDialog = true;
- };
- // 关闭弹窗
- const closeDialog = () => {
- state.isShowDialog = false;
- };
- // 取消
- const onCancel = () => {
- closeDialog();
- };
- // 新增
- const onSubmit = () => {
- closeDialog();
- };
- // 初始化部门数据
- const initTableData = () => {
- state.deptData.push({
- deptName: 'vueNextAdmin',
- createTime: new Date().toLocaleString(),
- status: true,
- sort: Math.random(),
- describe: '顶级部门',
- id: Math.random(),
- children: [
- {
- deptName: 'IT外包服务',
- createTime: new Date().toLocaleString(),
- status: true,
- sort: Math.random(),
- describe: '总部',
- id: Math.random(),
- },
- {
- deptName: '资本控股',
- createTime: new Date().toLocaleString(),
- status: true,
- sort: Math.random(),
- describe: '分部',
- id: Math.random(),
- },
- ],
- });
- };
- // 页面加载时
- onMounted(() => {
- initTableData();
- });
- return {
- openDialog,
- closeDialog,
- onCancel,
- onSubmit,
- ...toRefs(state),
- };
- },
-});
-</script>
diff --git a/src/views/system/user/component/editUser.vue b/src/views/system/user/component/editUser.vue
deleted file mode 100644
index b7a0793..0000000
--- a/src/views/system/user/component/editUser.vue
+++ /dev/null
@@ -1,202 +0,0 @@
-<template>
- <div class="system-edit-user-container">
- <el-dialog title="修改用户" v-model="isShowDialog" width="769px">
- <el-form :model="ruleForm" size="default" label-width="90px">
- <el-row :gutter="35">
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="账户名称">
- <el-input v-model="ruleForm.userName" placeholder="请输入账户名称" clearable></el-input>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="用户昵称">
- <el-input v-model="ruleForm.userNickname" placeholder="请输入用户昵称" clearable></el-input>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="关联角色">
- <el-select v-model="ruleForm.roleSign" placeholder="请选择" clearable class="w100">
- <el-option label="超级管理员" value="admin"></el-option>
- <el-option label="普通用户" value="common"></el-option>
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="部门">
- <el-cascader
- :options="deptData"
- :props="{ checkStrictly: true, value: 'deptName', label: 'deptName' }"
- placeholder="请选择部门"
- clearable
- class="w100"
- v-model="ruleForm.department"
- >
- <template #default="{ node, data }">
- <span>{{ data.deptName }}</span>
- <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
- </template>
- </el-cascader>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="手机号">
- <el-input v-model="ruleForm.phone" placeholder="请输入手机号" clearable></el-input>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="邮箱">
- <el-input v-model="ruleForm.email" placeholder="请输入" clearable></el-input>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="性别">
- <el-select v-model="ruleForm.sex" placeholder="请选择" clearable class="w100">
- <el-option label="男" value="男"></el-option>
- <el-option label="女" value="女"></el-option>
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="账户密码">
- <el-input v-model="ruleForm.password" placeholder="请输入" type="password" clearable></el-input>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="账户过期">
- <el-date-picker v-model="ruleForm.overdueTime" type="date" placeholder="请选择" class="w100"> </el-date-picker>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="用户状态">
- <el-switch v-model="ruleForm.status" inline-prompt active-text="启" inactive-text="禁"></el-switch>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
- <el-form-item label="用户描述">
- <el-input v-model="ruleForm.describe" type="textarea" placeholder="请输入用户描述" maxlength="150"></el-input>
- </el-form-item>
- </el-col>
- </el-row>
- </el-form>
- <template #footer>
- <span class="dialog-footer">
- <el-button @click="onCancel" size="default">取 消</el-button>
- <el-button type="primary" @click="onSubmit" size="default">修 改</el-button>
- </span>
- </template>
- </el-dialog>
- </div>
-</template>
-
-<script lang="ts">
-import { reactive, toRefs, onMounted, defineComponent } from 'vue';
-
-// 定义接口来定义对象的类型
-interface DeptData {
- deptName: string;
- createTime: string;
- status: boolean;
- sort: number | string;
- describe: string;
- id: number;
- children?: DeptData[];
-}
-interface RuleFormRow {
- userName: string;
- userNickname: string;
- roleSign: string;
- department: any;
- phone: string;
- email: string;
- sex: string;
- password: string;
- overdueTime: string;
- status: boolean;
- describe: string;
-}
-interface UserState {
- isShowDialog: boolean;
- ruleForm: RuleFormRow;
- deptData: Array<DeptData>;
-}
-
-export default defineComponent({
- name: 'systemEditUser',
- setup() {
- const state = reactive<UserState>({
- isShowDialog: false,
- ruleForm: {
- userName: '', // 账户名称
- userNickname: '', // 用户昵称
- roleSign: '', // 关联角色
- department: [], // 部门
- phone: '', // 手机号
- email: '', // 邮箱
- sex: '', // 性别
- password: '', // 账户密码
- overdueTime: '', // 账户过期
- status: true, // 用户状态
- describe: '', // 用户描述
- },
- deptData: [], // 部门数据
- });
- // 打开弹窗
- const openDialog = (row: RuleFormRow) => {
- state.ruleForm = row;
- state.isShowDialog = true;
- };
- // 关闭弹窗
- const closeDialog = () => {
- state.isShowDialog = false;
- };
- // 取消
- const onCancel = () => {
- closeDialog();
- };
- // 新增
- const onSubmit = () => {
- closeDialog();
- };
- // 初始化部门数据
- const initTableData = () => {
- state.deptData.push({
- deptName: 'vueNextAdmin',
- createTime: new Date().toLocaleString(),
- status: true,
- sort: Math.random(),
- describe: '顶级部门',
- id: Math.random(),
- children: [
- {
- deptName: 'IT外包服务',
- createTime: new Date().toLocaleString(),
- status: true,
- sort: Math.random(),
- describe: '总部',
- id: Math.random(),
- },
- {
- deptName: '资本控股',
- createTime: new Date().toLocaleString(),
- status: true,
- sort: Math.random(),
- describe: '分部',
- id: Math.random(),
- },
- ],
- });
- };
- // 页面加载时
- onMounted(() => {
- initTableData();
- });
- return {
- openDialog,
- closeDialog,
- onCancel,
- onSubmit,
- ...toRefs(state),
- };
- },
-});
-</script>
diff --git a/src/views/system/user/component/userDialog.vue b/src/views/system/user/component/userDialog.vue
new file mode 100644
index 0000000..5500677
--- /dev/null
+++ b/src/views/system/user/component/userDialog.vue
@@ -0,0 +1,221 @@
+<template>
+ <div class="system-add-user-container">
+ <el-dialog :title="title" v-model="isShowUserDialog" width="769px">
+ <el-form :model="userForm" size="default" label-width="90px">
+ <el-row :gutter="35">
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="账户名称">
+ <el-input v-model="userForm.username" placeholder="请输入账户名称" clearable></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="用户昵称">
+ <el-input v-model="userForm.realName" placeholder="请输入用户昵称" clearable></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="关联角色">
+ <el-select v-model="userForm.roleId" placeholder="请选择" clearable class="w100">
+ <el-option
+ v-for="item in roleData"
+ :key="item.id"
+ :label="item.name"
+ :value="item.id"
+ >
+ </el-option>
+ </el-select>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="部门">
+ <el-cascader
+ :options="departmentData"
+ :props="{ emitPath: false, checkStrictly: true, value: 'id', label: 'name' }"
+ placeholder="请选择部门"
+ clearable
+ class="w100"
+ v-model="userForm.depId"
+ >
+ </el-cascader>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="手机号">
+ <el-input v-model="userForm.phone" placeholder="请输入手机号" clearable></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="邮箱">
+ <el-input v-model="userForm.email" placeholder="请输入" clearable></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="性别">
+ <el-select v-model="userForm.sex" placeholder="请选择" clearable class="w100">
+ <el-option
+ v-for="item in sexList"
+ :key="item.id"
+ :value="item.id"
+ :label="item.name"
+ >
+ </el-option>
+ </el-select>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="账户密码">
+ <el-input v-model="userForm.password" placeholder="请输入" type="password" clearable></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="账户过期">
+ <el-date-picker v-model="userForm.expireTime" type="date" placeholder="请选择" class="w100"> </el-date-picker>
+ </el-form-item>
+ </el-col>
+<!-- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">-->
+<!-- <el-form-item label="用户状态">-->
+<!-- <el-switch v-model="userForm.status" inline-prompt active-value = 1 inactive-value= 0 active-text="启" inactive-text="禁"></el-switch>-->
+<!-- </el-form-item>-->
+<!-- </el-col>-->
+ </el-row>
+ </el-form>
+ <template #footer>
+ <span class="dialog-footer">
+ <el-button @click="isShowUserDialog = !isShowUserDialog" size="default">取 消</el-button>
+ <el-button type="primary" @click="onSubmit" size="default">新 增</el-button>
+ </span>
+ </template>
+ </el-dialog>
+ </div>
+</template>
+
+<script lang="ts">
+import { reactive, toRefs, onMounted, defineComponent } from 'vue';
+import { ElMessageBox, ElMessage } from 'element-plus';
+import {userApi} from "/@/api/user";
+
+// 定义接口来定义对象的类型
+interface DeptData {
+}
+interface roleData{
+
+}
+interface sexData{
+
+}
+interface UserState {
+ title:string,
+ isShowUserDialog: boolean;
+ userForm: {
+ username: string;
+ realName: string;
+ roleId: number | null;
+ depId: number | null;
+ phone: string;
+ email: string;
+ sex: number | null;
+ password: string;
+ expireTime: string;
+ status: number;
+ };
+ departmentData: Array<DeptData>;
+ roleData: Array<roleData>;
+ sexList:Array<sexData>,
+}
+
+export default defineComponent({
+ name: 'user',
+ setup(props,context) {
+ const state = reactive<UserState>({
+ title:'',
+ isShowUserDialog: false,
+ userForm: {
+ username: '', // 账户名称
+ realName: '', // 用户昵称
+ roleId: null, // 关联角色
+ depId:null, // 部门
+ phone: '', // 手机号
+ email: '', // 邮箱
+ sex: null, // 性别
+ password: '', // 账户密码
+ expireTime: '', // 账户过期
+ status: 1, // 用户状态
+ },
+ departmentData: [], // 部门数据
+ roleData:[],//角色数据
+ sexList:[{id:1,name:'男'},{id:0,name:'女'}]
+ });
+ // 打开弹窗
+ const openDialog = (type: string,value: any,departmentList:[], roleList: []) => {
+ state.isShowUserDialog = true;
+ state.departmentData = departmentList;
+ state.roleData = roleList;
+ if(type === '新增'){
+ state.title = '新增用户'
+ state.userForm = {
+ username: '',
+ realName: '',
+ roleId: null,
+ depId: null,
+ phone: '',
+ email: '',
+ sex: null,
+ password: '',
+ expireTime: '',
+ status: 1,
+ }
+ }else{
+ state.title = '修改用户'
+ state.userForm = JSON.parse(JSON.stringify(value))
+ }
+ };
+
+
+ // 新增修改
+ const onSubmit = async () => {
+ if(state.title === '新增用户'){
+ let res = await userApi().addUser(state.userForm)
+ if(res.data.code === '200'){
+ ElMessage({
+ type:'success',
+ message:'用户新增成功',
+ duration:2000
+ })
+ state.isShowUserDialog = false;
+ context.emit('getUserList')
+ }else{
+ ElMessage({
+ type:'warning',
+ message:res.data.msg
+ })
+ }
+ }else{
+ let res = await userApi().modUser(state.userForm)
+ if(res.data.code === '200'){
+ ElMessage({
+ type:'success',
+ message:'用户修改成功',
+ duration:2000
+ })
+ state.isShowUserDialog = false;
+ context.emit('getUserList')
+ }else{
+ ElMessage({
+ type:'warning',
+ message:res.data.msg
+ })
+ }
+ }
+ };
+
+ // 页面加载时
+ onMounted(() => {
+ });
+ return {
+ openDialog,
+ onSubmit,
+ ...toRefs(state),
+ };
+ },
+});
+</script>
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index a120c59..c4123dd 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -9,19 +9,20 @@
</el-icon>
查询
</el-button>
- <el-button size="default" type="success" class="ml10" @click="onOpenAddUser">
+ <el-button size="default" type="success" class="ml10" @click="onOpenUserDialog('新增','')">
<el-icon>
<ele-FolderAdd />
</el-icon>
新增用户
</el-button>
</div>
- <el-table :data="tableData.data" style="width: 100%">
+ <el-table :data="userTableData.data" style="width: 100%">
<el-table-column type="index" label="序号" width="60" />
- <el-table-column prop="userName" label="账户名称" show-overflow-tooltip></el-table-column>
- <el-table-column prop="userNickname" label="用户昵称" show-overflow-tooltip></el-table-column>
- <el-table-column prop="roleSign" label="关联角色" show-overflow-tooltip></el-table-column>
- <el-table-column prop="department" label="部门" show-overflow-tooltip></el-table-column>
+ <el-table-column prop="username" label="账户名称" show-overflow-tooltip></el-table-column>
+ <el-table-column prop="realName" label="用户昵称" show-overflow-tooltip></el-table-column>
+ <el-table-column prop="sex" label="性别" show-overflow-tooltip></el-table-column>
+ <el-table-column prop="role.name" label="关联角色" show-overflow-tooltip></el-table-column>
+ <el-table-column prop="department.name" label="部门" show-overflow-tooltip></el-table-column>
<el-table-column prop="phone" label="手机号" show-overflow-tooltip></el-table-column>
<el-table-column prop="email" label="邮箱" show-overflow-tooltip></el-table-column>
<el-table-column prop="status" label="用户状态" show-overflow-tooltip>
@@ -30,11 +31,10 @@
<el-tag type="info" v-else>禁用</el-tag>
</template>
</el-table-column>
- <el-table-column prop="describe" label="用户描述" show-overflow-tooltip></el-table-column>
- <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column>
+ <el-table-column prop="gmtCreate" label="创建时间" show-overflow-tooltip></el-table-column>
<el-table-column label="操作" width="100">
<template #default="scope">
- <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenEditUser(scope.row)">修改</el-button>
+ <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenUserDialog('修改',scope.row)">修改</el-button>
<el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onRowDel(scope.row)">删除</el-button>
</template>
</el-table-column>
@@ -45,24 +45,25 @@
class="mt15"
:pager-count="5"
:page-sizes="[10, 20, 30]"
- v-model:current-page="tableData.param.pageNum"
+ v-model:current-page="userTableData.listQuery.pageIndex"
background
- v-model:page-size="tableData.param.pageSize"
+ v-model:page-size="userTableData.listQuery.pageSize"
layout="total, sizes, prev, pager, next, jumper"
- :total="tableData.total"
+ :total="userTableData.total"
>
</el-pagination>
</el-card>
- <AddUer ref="addUserRef" />
- <EditUser ref="editUserRef" />
+ <userDialog ref="userRef" @getUserList = "initUserTableData"/>
</div>
</template>
<script lang="ts">
import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
-import AddUer from '/@/views/system/user/component/addUser.vue';
-import EditUser from '/@/views/system/user/component/editUser.vue';
+import userDialog from '/@/views/system/user/component/userDialog.vue';
+import {userApi} from "/@/api/user";
+import {departmentApi} from "/@/api/department";
+import {useRoleApi} from "/@/api/role";
// 定义接口来定义对象的类型
interface TableDataRow {
@@ -79,96 +80,124 @@
describe: string;
createTime: string;
}
+interface DepartmentDataRow{
+
+}
interface TableDataState {
- tableData: {
+ userTableData: {
data: Array<TableDataRow>;
total: number;
loading: boolean;
- param: {
- pageNum: number;
+ listQuery: {
+ searchParams:{
+ username:string,
+ realName:string,
+ },
+ pageIndex: number;
pageSize: number;
};
};
+ departmentList:[];
+ roleList:[];
}
export default defineComponent({
name: 'systemUser',
- components: { AddUer, EditUser },
+ components: { userDialog },
setup() {
- const addUserRef = ref();
- const editUserRef = ref();
+ const userRef = ref();
const state = reactive<TableDataState>({
- tableData: {
+ userTableData: {
data: [],
total: 0,
loading: false,
- param: {
- pageNum: 1,
+ listQuery: {
+ searchParams:{
+ username:'',
+ realName:'',
+ },
+ pageIndex: 1,
pageSize: 10,
},
},
+ departmentList:[],
+ roleList:[],
});
// 初始化表格数据
- const initTableData = () => {
- const data: Array<TableDataRow> = [];
- for (let i = 0; i < 2; i++) {
- data.push({
- userName: i === 0 ? 'admin' : 'test',
- userNickname: i === 0 ? '我是管理员' : '我是普通用户',
- roleSign: i === 0 ? 'admin' : 'common',
- department: i === 0 ? ['vueNextAdmin', 'IT外包服务'] : ['vueNextAdmin', '资本控股'],
- phone: '12345678910',
- email: 'vueNextAdmin@123.com',
- sex: '女',
- password: '123456',
- overdueTime: new Date(),
- status: true,
- describe: i === 0 ? '不可删除' : '测试用户',
- createTime: new Date().toLocaleString(),
- });
+ const initUserTableData = async () => {
+ let res = await userApi().getUserList(state.userTableData.listQuery)
+ if(res.data.code === '200'){
+ state.userTableData.data = res.data.data;
+ state.userTableData.total = res.data.data.length;
+ }else{
+ ElMessage({
+ type:'warning',
+ message:res.data.msg
+ })
}
- state.tableData.data = data;
- state.tableData.total = state.tableData.data.length;
};
- // 打开新增用户弹窗
- const onOpenAddUser = () => {
- addUserRef.value.openDialog();
+
+ const getDepartmentData = async () => {
+ let res = await departmentApi().getDepartmentList()
+ if(res.data.code === '200'){
+ state.departmentList = res.data.data
+ }else{
+ ElMessage({
+ type:'warning',
+ message:res.data.msg
+ })
+ }
+ }
+
+ const getRoleData = async () => {
+ let res = await useRoleApi().getRoleList()
+ if(res.data.code === '200'){
+ state.roleList = res.data.data
+ }else{
+ ElMessage({
+ type:'warning',
+ message:res.data.msg
+ })
+ }
+ }
+
+ // 打开新增修改用户弹窗
+ const onOpenUserDialog = (type: string,value: any) => {
+ userRef.value.openDialog(type, value, state.departmentList,state.roleList);
};
- // 打开修改用户弹窗
- const onOpenEditUser = (row: TableDataRow) => {
- editUserRef.value.openDialog(row);
- };
+
// 删除用户
const onRowDel = (row: TableDataRow) => {
ElMessageBox.confirm(`此操作将永久删除账户名称：“${row.userName}”，是否继续?`, '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
- })
- .then(() => {
+ }).then(() => {
ElMessage.success('删除成功');
- })
- .catch(() => {});
+ }).catch(() => {});
};
// 分页改变
const onHandleSizeChange = (val: number) => {
- state.tableData.param.pageSize = val;
+ state.userTableData.listQuery.pageSize = val;
+ initUserTableData()
};
// 分页改变
const onHandleCurrentChange = (val: number) => {
- state.tableData.param.pageNum = val;
+ state.userTableData.listQuery.pageSize = val;
+ initUserTableData()
};
// 页面加载时
onMounted(() => {
- initTableData();
+ initUserTableData();
+ getDepartmentData();
+ getRoleData();
});
return {
- addUserRef,
- editUserRef,
- onOpenAddUser,
- onOpenEditUser,
+ userRef,
+ onOpenUserDialog,
onRowDel,
onHandleSizeChange,
+ initUserTableData,
onHandleCurrentChange,
...toRefs(state),
};
--
Gitblit v1.9.2