xinyilu/NurseStationOperateUI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改

Browse Source
This commit is contained in:
曹辉 2023-02-23 09:55:35 +08:00
parent 1ff0df4043
commit bf334de587
1 changed files with 91 additions and 187 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

278
src/views/system/user/index.vue
View File

@ -25,7 +25,7 @@
@node-click="handleNodeClick"
/>
</div>
</el-col> -->
</el-col>-->
<!--用户数据-->
<el-col :span="24" :xs="24">
<el-form
@ -81,16 +81,8 @@
></el-date-picker>
</el-form-item>
<el-form-item>
<el-button
type="primary"
icon="el-icon-search"
size="mini"
@click="handleQuery"
>搜索</el-button
>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
>重置</el-button
>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
@ -103,8 +95,7 @@
size="mini"
@click="handleAdd"
v-hasPermi="['system:user:add']"
>新增</el-button
>
>新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button
@ -115,8 +106,7 @@
:disabled="single"
@click="handleUpdate"
v-hasPermi="['system:user:edit']"
>修改</el-button
>
>修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button
@ -127,8 +117,7 @@
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['system:user:remove']"
>删除</el-button
>
>删除</el-button>
</el-col>
<!-- <el-col :span="1.5">
<el-button
@ -149,19 +138,11 @@
@click="handleExport"
v-hasPermi="['system:user:export']"
>导出</el-button>
</el-col> -->
<right-toolbar
:showSearch.sync="showSearch"
@queryTable="getList"
:columns="columns"
></right-toolbar>
</el-col>-->
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
</el-row>
<el-table
v-loading="loading"
:data="userList"
@selection-change="handleSelectionChange"
>
<el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="50" align="center" />
<el-table-column
label="用户编号"
@ -195,12 +176,7 @@
v-if="columns[4].visible"
width="120"
/>
<el-table-column
label="状态"
align="center"
key="status"
v-if="columns[5].visible"
>
<el-table-column label="状态" align="center" key="status" v-if="columns[5].visible">
<template slot-scope="scope">
<el-switch
v-model="scope.row.status"
@ -234,16 +210,14 @@
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['system:user:edit']"
>修改</el-button
>
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['system:user:remove']"
>删除</el-button
>
>删除</el-button>
<el-dropdown
size="mini"
@command="(command) => handleCommand(command, scope.row)"
@ -257,14 +231,12 @@
command="handleResetPwd"
icon="el-icon-key"
v-hasPermi="['system:user:resetPwd']"
>重置密码</el-dropdown-item
>
>重置密码</el-dropdown-item>
<el-dropdown-item
command="handleAuthRole"
icon="el-icon-circle-check"
v-hasPermi="['system:user:edit']"
>分配角色</el-dropdown-item
>
>分配角色</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
@ -280,18 +252,13 @@
/>
</el-col>
</el-row>
<!-- 添加或修改用户配置对话框 -->
<el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-row>
<el-col :span="12">
<el-form-item label="用户昵称" prop="nickName">
<el-input
v-model="form.nickName"
placeholder="请输入用户昵称"
maxlength="30"
/>
<el-input v-model="form.nickName" placeholder="请输入用户昵称" maxlength="30" />
</el-form-item>
</el-col>
<el-col :span="12">
@ -310,48 +277,28 @@
<el-form-item label="归属部门" prop="deptId">
<treeselect v-model="form.deptId" :options="deptOptions" :show-count="true" placeholder="请选择归属部门" />
</el-form-item>
</el-col> -->
</el-col>-->
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="手机号码" prop="phonenumber">
<el-input
v-model="form.phonenumber"
placeholder="请输入手机号码"
maxlength="11"
/>
<el-input v-model="form.phonenumber" placeholder="请输入手机号码" maxlength="11" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="邮箱" prop="email">
<el-input
v-model="form.email"
placeholder="请输入邮箱"
maxlength="50"
/>
<el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item
v-if="form.userId == undefined"
label="用户名称"
prop="userName"
>
<el-input
v-model="form.userName"
placeholder="请输入用户名称"
maxlength="30"
/>
<el-form-item v-if="form.userId == undefined" label="用户名称" prop="userName">
<el-input v-model="form.userName" placeholder="请输入用户名称" maxlength="30" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
v-if="form.userId == undefined"
label="用户密码"
prop="password"
>
<el-form-item v-if="form.userId == undefined" label="用户密码" prop="password">
<el-input
v-model="form.password"
placeholder="请输入用户密码"
@ -364,20 +311,14 @@
</el-row>
<el-row>
<el-col :span="12">
<!-- multiple -->
<el-form-item label="护理站" prop="nurseStationIds">
<el-select
v-model="form.nurseStationIds"
placeholder="请选择护理站"
v-loadmore="loadMore"
>
<el-select v-model="form.nurseStationIds" placeholder="请选择护理站" multiple>
<el-option
v-for="item in nurseStationlist"
:key="item.id"
:label="item.nurseStationName"
:value="item.id"
>
</el-option>
></el-option>
</el-select>
</el-form-item>
</el-col>
@ -388,8 +329,7 @@
v-for="dict in dict.type.sys_normal_disable"
:key="dict.value"
:label="dict.value"
>{{ dict.label }}</el-radio
>
>{{ dict.label }}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
@ -407,14 +347,10 @@
></el-option>
</el-select>
</el-form-item>
</el-col> -->
</el-col>-->
<el-col :span="12">
<el-form-item label="角色">
<el-select
v-model="form.roleIds"
multiple
placeholder="请选择角色"
>
<el-select v-model="form.roleIds" multiple placeholder="请选择角色">
<el-option
v-for="item in roleOptions"
:key="item.roleId"
@ -429,11 +365,7 @@
<el-row>
<el-col :span="24">
<el-form-item label="备注">
<el-input
v-model="form.remark"
type="textarea"
placeholder="请输入内容"
></el-input>
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
</el-form-item>
</el-col>
</el-row>
@ -443,14 +375,8 @@
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<!-- 用户导入对话框 -->
<el-dialog
:title="upload.title"
:visible.sync="upload.open"
width="400px"
append-to-body
>
<el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
<el-upload
ref="upload"
:limit="1"
@ -464,11 +390,13 @@
drag
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<div class="el-upload__text">
将文件拖到此处，或
<em>点击上传</em>
</div>
<div class="el-upload__tip text-center" slot="tip">
<div class="el-upload__tip" slot="tip">
<el-checkbox v-model="upload.updateSupport" />
是否更新已经存在的用户数据
<el-checkbox v-model="upload.updateSupport" />是否更新已经存在的用户数据
</div>
<span>仅允许导入xls、xlsx格式文件。</span>
<el-link
@ -476,8 +404,7 @@
:underline="false"
style="font-size: 12px; vertical-align: baseline"
@click="importTemplate"
>下载模板</el-link
>
>下载模板</el-link>
</div>
</el-upload>
<div slot="footer" class="dialog-footer">
@ -487,7 +414,6 @@
</el-dialog>
</div>
</template>
<script>
import {
listUser,
@ -496,7 +422,7 @@ import {
addUser,
updateUser,
resetUserPwd,
changeUserStatus,
changeUserStatus
} from "@/api/system/user";
import { getToken } from "@/utils/auth";
import { treeselect } from "@/api/system/dept";
@ -545,7 +471,7 @@ export default {
form: {},
defaultProps: {
children: "children",
label: "label",
label: "label"
},
// 用户导入参数
upload: {
@ -560,7 +486,7 @@ export default {
// 设置上传的请求头部
headers: { Authorization: "Bearer " + getToken() },
// 上传的地址
url: process.env.VUE_APP_BASE_API + "/system/user/importData",
url: process.env.VUE_APP_BASE_API + "/system/user/importData"
},
// 查询参数
queryParams: {
@ -569,12 +495,12 @@ export default {
userName: undefined,
phonenumber: undefined,
status: undefined,
deptId: undefined,
deptId: undefined
},
// 查询参数
nurseStationqueryParams: {
pageNum: 1,
pageSize: 50,
pageSize: 999,
areaCode: null,
userId: null,
nurseStationCode: null,
@ -589,7 +515,7 @@ export default {
dutyPerson: null,
dutyPhone: null,
stationPictureUrl: null,
sort: null,
sort: null
},
// 列信息
columns: [
@ -599,7 +525,7 @@ export default {
{ key: 3, label: `部门`, visible: true },
{ key: 4, label: `手机号码`, visible: true },
{ key: 5, label: `状态`, visible: true },
{ key: 6, label: `创建时间`, visible: true },
{ key: 6, label: `创建时间`, visible: true }
],
// 表单校验
rules: {
@ -609,14 +535,14 @@ export default {
min: 2,
max: 20,
message: "用户名称长度必须介于 2 和 20 之间",
trigger: "blur",
},
trigger: "blur"
}
],
// nurseStationIds: [
// { required: true, message: "护理站不能为空", trigger: "blur" },
// ],
nickName: [
{ required: true, message: "用户昵称不能为空", trigger: "blur" },
{ required: true, message: "用户昵称不能为空", trigger: "blur" }
],
password: [
{ required: true, message: "用户密码不能为空", trigger: "blur" },
@ -624,70 +550,53 @@ export default {
min: 5,
max: 20,
message: "用户密码长度必须介于 5 和 20 之间",
trigger: "blur",
},
trigger: "blur"
}
],
email: [
{
type: "email",
message: "请输入正确的邮箱地址",
trigger: ["blur", "change"],
},
trigger: ["blur", "change"]
}
],
phonenumber: [
{
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: "请输入正确的手机号码",
trigger: "blur",
},
],
},
trigger: "blur"
}
]
}
};
},
watch: {
// 根据名称筛选部门树
deptName(val) {
this.$refs.tree.filter(val);
},
}
},
created() {
this.getList();
this.getTreeselect();
this.listinfo();
this.getConfigKey("sys.user.initPassword").then((response) => {
this.getConfigKey("sys.user.initPassword").then(response => {
this.initPassword = response.msg;
});
},
methods: {
listinfo() {
list(this.nurseStationqueryParams).then((res) => {
list(this.nurseStationqueryParams).then(res => {
console.log(res);
this.nurseStationlist = res.rows;
this.total2 = res.total;
});
},
loadMore() {
var a = Math.ceil(this.total2 / 10);
console.log(this.nurseStationlist.length);
if (this.nurseStationlist.length + 1 >= this.total2) {
} else {
if (this.nurseStationqueryParams.pageNum >= a) {
} else {
this.nurseStationqueryParams.pageNum++;
list(this.nurseStationqueryParams).then((res) => {
console.log(res);
res.rows.forEach((e) => {
this.nurseStationlist.push(e);
});
});
}
}
},
/** 查询用户列表 */
getList() {
this.loading = true;
listUser(this.addDateRange(this.queryParams, this.dateRange)).then(
(response) => {
response => {
this.userList = response.rows;
this.total = response.total;
this.loading = false;
@ -696,7 +605,7 @@ export default {
},
/** 查询部门下拉树结构 */
getTreeselect() {
treeselect().then((response) => {
treeselect().then(response => {
this.deptOptions = response.data;
});
},
@ -715,13 +624,13 @@ export default {
let text = row.status === "0" ? "启用" : "停用";
this.$modal
.confirm('确认要"' + text + '""' + row.userName + '"用户吗？')
.then(function () {
.then(function() {
return changeUserStatus(row.userId, row.status);
})
.then(() => {
this.$modal.msgSuccess(text + "成功");
})
.catch(function () {
.catch(function() {
row.status = row.status === "0" ? "1" : "0";
});
},
@ -744,7 +653,7 @@ export default {
status: "0",
remark: undefined,
postIds: [],
roleIds: [],
roleIds: []
};
this.resetForm("form");
},
@ -761,7 +670,7 @@ export default {
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map((item) => item.userId);
this.ids = selection.map(item => item.userId);
this.single = selection.length != 1;
this.multiple = !selection.length;
},
@ -782,7 +691,7 @@ export default {
handleAdd() {
this.reset();
this.getTreeselect();
getUser().then((response) => {
getUser().then(response => {
this.postOptions = response.posts;
this.roleOptions = response.roles;
this.open = true;
@ -795,13 +704,16 @@ export default {
this.reset();
this.getTreeselect();
const userId = row.userId || this.ids;
getUser(userId).then((response) => {
getUser(userId).then(response => {
this.form = response.data;
if (!this.form.nurseStationIds) {
this.form.nurseStationIds = ''
if (this.form.nurseStationIds) {
this.form.nurseStationIds = this.form.nurseStationIds.split(",");
this.form.nurseStationIds = this.form.nurseStationIds.map(e => {
return (e = Number(e));
});
// this.form.nurseStationIds = [];
} else {
this.form.nurseStationIds = Number(this.form.nurseStationIds);
// this.form.nurseStationIds = Number(this.form.nurseStationIds);
}
// if (
// !this.form.nurseStationIds ||
@ -809,10 +721,7 @@ export default {
// this.form.nurseStationIds.length == 0
// ) {getList
// } else {
// this.form.nurseStationIds = this.form.nurseStationIds.split(",");
// this.form.nurseStationIds = this.form.nurseStationIds.map((e) => {
// return (e = Number(e));
// });
// }
console.log(this.form);
this.postOptions = response.posts;
@ -826,60 +735,55 @@ export default {
},
/** 重置密码按钮操作 */
handleResetPwd(row) {
this.$prompt('请输入"' + row.userName + '"的新密码', "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
closeOnClickModal: false,
inputPattern: /^.{5,20}$/,
inputErrorMessage: "用户密码长度必须介于 5 和 20 之间",
inputErrorMessage: "用户密码长度必须介于 5 和 20 之间"
})
.then(({ value }) => {
resetUserPwd(row.userId, value).then((response) => {
resetUserPwd(row.userId, value).then(response => {
this.$modal.msgSuccess("修改成功，新密码是：" + value);
});
})
.catch(() => { });
.catch(() => {});
},
/** 分配角色操作 */
handleAuthRole: function (row) {
handleAuthRole: function(row) {
const userId = row.userId;
this.$router.push("/system/user-auth/role/" + userId);
},
/** 提交按钮 */
submitForm: function () {
this.$refs["form"].validate((valid) => {
submitForm: function() {
console.log(this.form);
this.$refs["form"].validate(valid => {
if (valid) {
// this.form.nurseStationIds = this.form.nurseStationIds.join(",");
// this.form.nurseStationIds = JSON.stringify(this.form.nurseStationIds);
// var obj = [];
// obj.push(this.form.nurseStationIds);
// console.log(obj)
// this.form.nurseStationIds = obj;
if (this.form.userId != undefined) {
if (!this.form.nurseStationIds) {
this.form.nurseStationIds = null
updateUser(this.form).then((response) => {
this.form.nurseStationIds = null;
updateUser(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
// console.log('bbb',this.form)
});
} else {
this.form.nurseStationIds = Number(this.form.nurseStationIds);
updateUser(this.form).then((response) => {
// this.form.nurseStationIds = Number(this.form.nurseStationIds);
this.form.nurseStationIds = this.form.nurseStationIds.join(",");
updateUser(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
// console.log('bbb',this.form)
});
}
} else {
addUser(this.form).then((response) => {
addUser(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
@ -893,21 +797,21 @@ export default {
const userIds = row.userId || this.ids;
this.$modal
.confirm("是否确认删除此用户？")
.then(function () {
.then(function() {
return delUser(userIds);
})
.then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
})
.catch(() => { });
.catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
this.download(
"system/user/export",
{
...this.queryParams,
...this.queryParams
},
`user_${new Date().getTime()}.xlsx`
);
@ -936,8 +840,8 @@ export default {
this.$refs.upload.clearFiles();
this.$alert(
"<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
response.msg +
"</div>",
response.msg +
"</div>",
"导入结果",
{ dangerouslyUseHTMLString: true }
);
@ -946,7 +850,7 @@ export default {
// 提交上传文件
submitFileForm() {
this.$refs.upload.submit();
},
},
}
}
};
</script>