微型课程优化

This commit is contained in:
zhanglipeng 2021-08-12 21:57:39 +08:00
parent 4efdee0ea1
commit a89cf3ce01
2 changed files with 115 additions and 119 deletions

View File

@ -152,30 +152,12 @@ export default {
margin: 10px 0; margin: 10px 0;
} }
} }
.box-card-case {
margin: 0;
font-size: 14px;
font-weight: 700;
display: flex;
align-items: center;
&::before {
content: "";
margin-right: 8px;
width: 4px;
height: 14px;
background: #2c3e50;
}
&.mr {
margin: 10px 0;
}
}
.box-card-info {
font-size: 14px;
font-weight: 700;
}
.pad-left { .pad-left {
padding-left: 15px; padding-left: 15px;
text-align: center; text-align: center;
font-size: 20px;
font-weight: 700;
line-height: 40px;
} }
// //
div { div {
@ -192,6 +174,6 @@ div {
} }
.tree { .tree {
overflow:auto; overflow:auto;
max-height: 300px; max-height: 600px;
} }
</style> </style>

View File

@ -11,9 +11,12 @@
size="small" size="small"
prefix-icon="el-icon-search" prefix-icon="el-icon-search"
/> />
<div class="head-container tree">
<el-tree <el-tree
v-if=" v-if="
deptOptions && deptOptions.length >= 1 && deptOptions[0].children deptOptions &&
deptOptions.length >= 1 &&
deptOptions[0].children
" "
:data="deptOptions" :data="deptOptions"
:props="defaultProps" :props="defaultProps"
@ -23,10 +26,12 @@
default-expand-all default-expand-all
@node-click="handleNodeClick" @node-click="handleNodeClick"
/> />
<h3 class="one-user" v-else> <h3 class="one-user" v-else>
{{ deptOptions[0] && deptOptions[0].label }} {{ deptOptions[0] && deptOptions[0].label }}
</h3> </h3>
</div> </div>
</div>
</el-col> </el-col>
<!--用户数据--> <!--用户数据-->
<el-col :span="20" :xs="24"> <el-col :span="20" :xs="24">
@ -146,7 +151,12 @@
:data="userList" :data="userList"
@selection-change="handleSelectionChange" @selection-change="handleSelectionChange"
> >
<el-table-column :selectable="isShow" type="selection" width="40" align="center" /> <el-table-column
:selectable="isShow"
type="selection"
width="40"
align="center"
/>
<!-- <el-table-column label="用户编号" align="center" prop="userId" /> --> <!-- <el-table-column label="用户编号" align="center" prop="userId" /> -->
<el-table-column <el-table-column
fixed fixed
@ -416,15 +426,15 @@ import {
exportUser, exportUser,
resetUserPwd, resetUserPwd,
changeUserStatus, changeUserStatus,
importTemplate importTemplate,
} from '@/api/system/user'; } from "@/api/system/user";
import { getToken } from '@/utils/auth'; import { getToken } from "@/utils/auth";
import { treeselect } from '@/api/system/dept'; import { treeselect } from "@/api/system/dept";
import Treeselect from '@riophae/vue-treeselect'; import Treeselect from "@riophae/vue-treeselect";
import '@riophae/vue-treeselect/dist/vue-treeselect.css'; import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default { export default {
name: 'User', name: "User",
components: { Treeselect }, components: { Treeselect },
data() { data() {
return { return {
@ -441,7 +451,7 @@ export default {
// //
userList: null, userList: null,
// //
title: '', title: "",
// //
deptOptions: [], deptOptions: [],
// //
@ -467,23 +477,23 @@ export default {
// //
form: {}, form: {},
defaultProps: { defaultProps: {
children: 'children', children: "children",
label: 'label' label: "label",
}, },
// //
upload: { upload: {
// //
open: false, open: false,
// //
title: '', title: "",
// //
isUploading: false, isUploading: false,
// //
updateSupport: 0, updateSupport: 0,
// //
headers: { Authorization: 'Bearer ' + getToken() }, 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: { queryParams: {
@ -491,7 +501,7 @@ export default {
pageSize: 10, pageSize: 10,
userName: undefined, userName: undefined,
status: undefined, status: undefined,
deptId: undefined deptId: undefined,
}, },
// //
rules: { rules: {
@ -499,38 +509,38 @@ export default {
{ {
required: true, required: true,
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: '请输入正确的手机号码', message: "请输入正确的手机号码",
trigger: 'blur' trigger: "blur",
} },
], ],
nickName: [ nickName: [
{ required: true, message: '用户昵称不能为空', trigger: 'blur' } { required: true, message: "用户昵称不能为空", trigger: "blur" },
], ],
deptId: [ deptId: [
{ required: true, message: '归属部门不能为空', trigger: 'blur' } { required: true, message: "归属部门不能为空", trigger: "blur" },
], ],
password: [ password: [
{ required: true, message: '用户密码不能为空', trigger: 'blur' } { required: true, message: "用户密码不能为空", trigger: "blur" },
] ],
} },
}; };
}, },
watch: { watch: {
// //
deptName(val) { deptName(val) {
this.$refs.tree.filter(val); this.$refs.tree.filter(val);
} },
}, },
created() { created() {
this.getList(); this.getList();
this.getTreeselect(); this.getTreeselect();
this.getDicts('sys_normal_disable').then(response => { this.getDicts("sys_normal_disable").then((response) => {
this.statusOptions = response.data; this.statusOptions = response.data;
}); });
this.getDicts('sys_user_sex').then(response => { this.getDicts("sys_user_sex").then((response) => {
this.sexOptions = response.data; this.sexOptions = response.data;
}); });
this.getConfigKey('sys.user.initPassword').then(response => { this.getConfigKey("sys.user.initPassword").then((response) => {
this.initPassword = response.msg; this.initPassword = response.msg;
}); });
}, },
@ -547,7 +557,7 @@ export default {
getList() { getList() {
this.loading = true; this.loading = true;
listUser(this.addDateRange(this.queryParams, this.dateRange)).then( listUser(this.addDateRange(this.queryParams, this.dateRange)).then(
response => { (response) => {
this.userList = response.rows; this.userList = response.rows;
this.total = response.total; this.total = response.total;
this.loading = false; this.loading = false;
@ -556,7 +566,7 @@ export default {
}, },
/** 查询部门下拉树结构 */ /** 查询部门下拉树结构 */
getTreeselect() { getTreeselect() {
treeselect().then(response => { treeselect().then((response) => {
this.deptOptions = response.data; this.deptOptions = response.data;
//console.log(this.deptOptions); //console.log(this.deptOptions);
}); });
@ -573,24 +583,24 @@ export default {
}, },
// //
handleStatusChange(row) { handleStatusChange(row) {
let text = row.status === '0' ? '启用' : '停用'; let text = row.status === "0" ? "启用" : "停用";
this.$confirm( this.$confirm(
'确认要"' + text + '""' + row.userName + '"用户吗?', '确认要"' + text + '""' + row.userName + '"用户吗?',
'警告', "警告",
{ {
confirmButtonText: '确定', confirmButtonText: "确定",
cancelButtonText: '取消', cancelButtonText: "取消",
type: 'warning' type: "warning",
} }
) )
.then(function() { .then(function () {
return changeUserStatus(row.userId, row.status); return changeUserStatus(row.userId, row.status);
}) })
.then(() => { .then(() => {
this.msgSuccess(text + '成功'); this.msgSuccess(text + "成功");
}) })
.catch(function() { .catch(function () {
row.status = row.status === '0' ? '1' : '0'; row.status = row.status === "0" ? "1" : "0";
}); });
}, },
// //
@ -607,12 +617,12 @@ export default {
nickName: undefined, nickName: undefined,
password: undefined, password: undefined,
sex: undefined, sex: undefined,
status: '0', status: "0",
remark: undefined, remark: undefined,
postIds: [], postIds: [],
roleIds: [] roleIds: [],
}; };
this.resetForm('form'); this.resetForm("form");
}, },
/** 搜索按钮操作 */ /** 搜索按钮操作 */
handleQuery() { handleQuery() {
@ -622,12 +632,12 @@ export default {
/** 重置按钮操作 */ /** 重置按钮操作 */
resetQuery() { resetQuery() {
this.dateRange = []; this.dateRange = [];
this.resetForm('queryForm'); this.resetForm("queryForm");
this.handleQuery(); this.handleQuery();
}, },
// //
handleSelectionChange(selection) { handleSelectionChange(selection) {
this.ids = selection.map(item => item.userId); this.ids = selection.map((item) => item.userId);
this.single = selection.length != 1; this.single = selection.length != 1;
this.multiple = !selection.length; this.multiple = !selection.length;
}, },
@ -635,18 +645,18 @@ export default {
handleAdd() { handleAdd() {
this.reset(); this.reset();
this.getTreeselect(); this.getTreeselect();
getUser().then(response => { getUser().then((response) => {
this.postOptions = response.posts; this.postOptions = response.posts;
this.roleOptions = response.roles; this.roleOptions = response.roles;
//console.log("school="+response.isSchool); //console.log("school="+response.isSchool);
if (response.isSchool == '0') { if (response.isSchool == "0") {
this.isSchool = true; this.isSchool = true;
this.kindergartenOptions = response.kindergartens; this.kindergartenOptions = response.kindergartens;
} else { } else {
this.isSchool = false; this.isSchool = false;
} }
this.open = true; this.open = true;
this.title = '添加用户'; this.title = "添加用户";
this.form.password = this.initPassword; this.form.password = this.initPassword;
}); });
}, },
@ -655,7 +665,7 @@ export default {
this.reset(); this.reset();
this.getTreeselect(); this.getTreeselect();
const userId = row.userId || this.ids; const userId = row.userId || this.ids;
getUser(userId).then(response => { getUser(userId).then((response) => {
this.form = response.data; this.form = response.data;
this.postOptions = response.posts; this.postOptions = response.posts;
this.roleOptions = response.roles; this.roleOptions = response.roles;
@ -663,27 +673,27 @@ export default {
this.form.roleIds = response.roleIds; this.form.roleIds = response.roleIds;
this.form.deptIds = response.kindergartenIds; this.form.deptIds = response.kindergartenIds;
//console.log("school="+response.isSchool); //console.log("school="+response.isSchool);
if (response.isSchool == '0') { if (response.isSchool == "0") {
this.isSchool = true; this.isSchool = true;
this.kindergartenOptions = response.kindergartens; this.kindergartenOptions = response.kindergartens;
} else { } else {
this.isSchool = false; this.isSchool = false;
} }
this.open = true; this.open = true;
this.title = '修改用户'; this.title = "修改用户";
this.form.password = ''; this.form.password = "";
}); });
}, },
/** 重置密码按钮操作 */ /** 重置密码按钮操作 */
handleResetPwd(row) { handleResetPwd(row) {
this.$prompt('请输入"' + row.userName + '"的新密码', '提示', { this.$prompt('请输入"' + row.userName + '"的新密码', "提示", {
confirmButtonText: '确定', confirmButtonText: "确定",
cancelButtonText: '取消' cancelButtonText: "取消",
}) })
.then(({ value }) => { .then(({ value }) => {
resetUserPwd(row.userId, value).then(response => { resetUserPwd(row.userId, value).then((response) => {
if (response.code === 200) { if (response.code === 200) {
this.msgSuccess('修改成功,新密码是:' + value); this.msgSuccess("修改成功,新密码是:" + value);
} else { } else {
this.msgError(response.msg); this.msgError(response.msg);
} }
@ -692,13 +702,13 @@ export default {
.catch(() => {}); .catch(() => {});
}, },
/** 提交按钮 */ /** 提交按钮 */
submitForm: function() { submitForm: function () {
this.$refs['form'].validate(valid => { this.$refs["form"].validate((valid) => {
if (valid) { if (valid) {
if (this.form.userId != undefined) { if (this.form.userId != undefined) {
updateUser(this.form).then(response => { updateUser(this.form).then((response) => {
if (response.code === 200) { if (response.code === 200) {
this.msgSuccess('修改成功'); this.msgSuccess("修改成功");
this.open = false; this.open = false;
this.getList(); this.getList();
} else { } else {
@ -706,9 +716,9 @@ export default {
} }
}); });
} else { } else {
addUser(this.form).then(response => { addUser(this.form).then((response) => {
if (response.code === 200) { if (response.code === 200) {
this.msgSuccess('新增成功'); this.msgSuccess("新增成功");
this.open = false; this.open = false;
this.getList(); this.getList();
} else { } else {
@ -724,46 +734,46 @@ export default {
const userIds = row.userId || this.ids; const userIds = row.userId || this.ids;
this.$confirm( this.$confirm(
'是否确认删除用户编号为"' + userIds + '"的数据项?', '是否确认删除用户编号为"' + userIds + '"的数据项?',
'警告', "警告",
{ {
confirmButtonText: '确定', confirmButtonText: "确定",
cancelButtonText: '取消', cancelButtonText: "取消",
type: 'warning' type: "warning",
} }
) )
.then(function() { .then(function () {
return delUser(userIds); return delUser(userIds);
}) })
.then(() => { .then(() => {
this.getList(); this.getList();
this.msgSuccess('删除成功'); this.msgSuccess("删除成功");
}) })
.catch(function() {}); .catch(function () {});
}, },
/** 导出按钮操作 */ /** 导出按钮操作 */
handleExport() { handleExport() {
const queryParams = this.queryParams; const queryParams = this.queryParams;
this.$confirm('是否确认导出所有用户数据项?', '警告', { this.$confirm("是否确认导出所有用户数据项?", "警告", {
confirmButtonText: '确定', confirmButtonText: "确定",
cancelButtonText: '取消', cancelButtonText: "取消",
type: 'warning' type: "warning",
}) })
.then(function() { .then(function () {
return exportUser(queryParams); return exportUser(queryParams);
}) })
.then(response => { .then((response) => {
this.download(response.msg); this.download(response.msg);
}) })
.catch(function() {}); .catch(function () {});
}, },
/** 导入按钮操作 */ /** 导入按钮操作 */
handleImport() { handleImport() {
this.upload.title = '用户导入'; this.upload.title = "用户导入";
this.upload.open = true; this.upload.open = true;
}, },
/** 下载模板操作 */ /** 下载模板操作 */
importTemplate() { importTemplate() {
importTemplate().then(response => { importTemplate().then((response) => {
this.download(response.msg); this.download(response.msg);
}); });
}, },
@ -776,14 +786,14 @@ export default {
this.upload.open = false; this.upload.open = false;
this.upload.isUploading = false; this.upload.isUploading = false;
this.$refs.upload.clearFiles(); this.$refs.upload.clearFiles();
this.$alert(response.msg, '导入结果', { dangerouslyUseHTMLString: true }); this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
this.getList(); this.getList();
}, },
// //
submitFileForm() { submitFileForm() {
this.$refs.upload.submit(); this.$refs.upload.submit();
} },
} },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -821,4 +831,8 @@ export default {
.no-margin ::v-deep.el-form-item__content { .no-margin ::v-deep.el-form-item__content {
margin: 0 !important; margin: 0 !important;
} }
.tree {
overflow: auto;
max-height: 1200px;
}
</style> </style>