提交 f53333be authored 作者: 龙菲's avatar 龙菲

用户管理

上级 58c0704a
......@@ -159,18 +159,11 @@ export default {
},
async handleSubmit() {
// debugger
// console.log(this.dialogForm);
// return
let params = JSON.parse(JSON.stringify(this.dialogForm));
// 回填文件
let file = this.$refs.pdf.getFiles();
let formData = new FormData();
// console.log("file", file);
// return
// debugger;
if (file[0].status == "ready") {
// debugger;
formData.append("files", file[0].raw);
let upLoadRes = await uploadFile(formData);
if (upLoadRes.code == 0) {
......
<template>
<el-dialog
:visible.sync="dialogVisible"
:visible="dialogVisible"
width="40%"
style="height: 98%"
:before-close="handleClose"
......@@ -13,80 +13,54 @@
</div>
<div class="dialog-content">
<el-form :model="dialogForm" class="basic-info">
<el-form-item label="博物馆名称" :label-width="formLabelWidth">
<el-form-item label="账号" :label-width="formLabelWidth">
<el-input
v-model="dialogForm.name"
v-model="dialogForm.username"
autocomplete="off"
placeholder="请输入博物馆名称"
placeholder="请输入用户名"
clearable
></el-input>
</el-form-item>
<!-- <el-form-item label="所属部门" :label-width="formLabelWidth">
<el-form-item label="密码" :label-width="formLabelWidth">
<el-input
v-model="dialogForm.password"
autocomplete="off"
type="password"
placeholder="请输入密码"
clearable
></el-input>
</el-form-item>
<el-form-item label="手机号" :label-width="formLabelWidth">
<el-input
v-model="dialogForm.phone"
autocomplete="off"
placeholder="请输入手机号"
clearable
></el-input>
</el-form-item>
<el-form-item label="真实姓名" :label-width="formLabelWidth">
<el-input
v-model="dialogForm.realName"
autocomplete="off"
placeholder="请输入真实姓名"
clearable
></el-input>
</el-form-item>
<el-form-item label="所属部门" :label-width="formLabelWidth">
<el-cascader
style="width: 100%"
v-model="dialogForm.pid"
v-model="dialogForm.deptId"
:options="orgTreeData"
:props="optionProps"
placeholder="请选择所属部门"
:key="pidModalKey"
disabled
>
</el-cascader>
</el-form-item> -->
<el-form-item label="所属地" :label-width="formLabelWidth">
<el-cascader
style="width: 100%"
v-model="dialogForm.regionCode"
:options="regionTree"
:props="regionOptionProps"
placeholder="请选择所属地"
:key="regionCodeModalKey"
:key="deptId"
>
</el-cascader>
</el-form-item>
<el-row :gutter="5">
<el-col :span="12">
<el-form-item label="经度" :label-width="formLabelWidth">
<el-input
style="width: 100%"
v-model="dialogForm.longitude"
autocomplete="off"
placeholder="请输入经度"
></el-input>
</el-form-item>
</el-col>
<el-col :span="12"
><el-form-item label="纬度" :label-width="formLabelWidth">
<el-input
v-model="dialogForm.latitude"
autocomplete="off"
placeholder="请输入纬度"
></el-input> </el-form-item
></el-col>
</el-row>
<el-form-item label="状态" :label-width="formLabelWidth">
<el-switch v-model="status"> </el-switch>
</el-form-item>
<el-form-item label="博物馆封面" :label-width="formLabelWidth">
<ManualUploader
:files="faceImage"
:fileLimit="1"
:fileSize="50"
listType="picture-card"
:fileType="['png', 'jpeg', 'jpg']"
ref="museumFaceImage"
/>
</el-form-item>
<el-form-item label="简介" :label-width="formLabelWidth">
<el-input
type="textarea"
placeholder="请输入博物馆简介"
v-model="dialogForm.intro"
maxlength="600"
show-word-limit
>
</el-input>
</el-form-item>
</el-form>
</div>
<div class="dialog-footer">
......@@ -99,11 +73,10 @@
</template>
<script>
import { addMuseum, editMuseum } from "@/api/org";
import { addLiterature, editLiterature } from "@/api/literature";
import ManualUploader from "@/components/Uploader/ManualUploader.vue";
import { mapGetters } from "vuex";
import { uploadV1 } from "@/utils/file";
import { deleteFiles } from "@/api/file";
import { uploadFile } from "@/utils/file";
export default {
name: "InfoEditDialog",
components: {
......@@ -118,97 +91,55 @@ export default {
type: Object,
default: () => ({}),
},
orgTreeData: {
type: Array,
orgTreeData:{
type: Object,
default: () => [],
},
}
},
computed: {
...mapGetters(["userInfo"]),
dialogVisible: {
get: function () {
return this.visible;
},
set: function () {},
},
title() {
if (this.dialogForm.id) {
return "修改博物馆信息";
if (this.dialogForm.literatureId) {
return "修改文献";
} else {
return "添加博物馆";
return "添加文献";
}
},
},
watch: {
dialogVisible(value) {
if (value) {
// 判断是否本地
this.loadRegionTree();
}
},
form: {
handler: function (value) {
let that = this;
that.dialogForm = JSON.parse(JSON.stringify(value));
that.dialogForm = JSON.parse(JSON.stringify(value));
// 编辑状态
if (that.dialogForm.id) {
if (that.dialogForm.literatureId) {
// 回填状态
that.status = Boolean(Number(that.dialogForm.status));
// 回填封面
if (this.dialogForm.faceImage) {
that.faceImage = [
{
name: this.dialogForm.name + "封面.png",
url:
this.dialogForm.faceImagePressUrl ||
this.dialogForm.faceImageUrl,
fileId: this.dialogForm.faceImage,
},
];
// 回填文件
if (that.dialogForm.files) {
that.files = that.dialogForm.files;
}
// 编辑状态下禁用当前所属地之下的节点
}
},
immediate: true,
deep: true,
},
orgTreeData: {
visible: {
handler: function (value) {
if (value && value.length > 0) {
if (value.length > 0 && !this.dialogForm.id) {
this.dialogForm.pid = value[0].id; //新增状态下,将所属部门默认填写为树结构根节点
}
}
this.dialogVisible = value;
},
immediate: true,
deep: true,
},
status(value) {
console.log(value);
immediate: true,
},
},
data() {
return {
dialogForm: {},
formLabelWidth: "100px",
optionProps: {
value: "id",
label: "name",
children: "children",
checkStrictly: true, //单选选择任意一级选项
},
regionOptionProps: {
value: "code",
label: "name",
children: "children",
checkStrictly: true, //单选选择任意一级选项
},
regionTree: [],
status: false,
pidModalKey: 0,
regionCodeModalKey: 0,
faceImage: [],
parentPid: null, //博物馆根节点id
files: [], //文献文件
dialogVisible: false,
};
},
methods: {
......@@ -224,66 +155,32 @@ export default {
this.faceImage = [];
},
loadRegionTree() {
let parentId = "";
this.$store.dispatch("org/getSysRegionTreeData", parentId).then((res) => {
this.regionTree = res;
loopTree(this.regionTree);
function loopTree(arr) {
if (arr && arr.length > 0) {
arr.forEach((item) => {
if (item.children && item.children.length == 0) {
delete item.children;
} else {
loopTree(item.children);
}
});
}
}
});
},
async handleSubmit() {
let params = { ...this.dialogForm };
let deleteFileArr = [];
// 回填图片
let file = this.$refs.museumFaceImage.getFiles();
if (file.length > 0) {
let formData = new FormData();
switch (file[0].status) {
case "ready":
formData.append("faceImage", file[0].raw);
let upLoadRes = await uploadV1(formData);
if (upLoadRes.code == 0) {
params.faceImage = upLoadRes.data[0].fileId;
} else {
this.$message.error("上传失败!:" + upLoadRes.data.msg);
}
deleteFileArr.push(this.dialogForm.faceImage);
break;
case "success":
params.faceImage = file[0].fileId;
break;
let params = JSON.parse(JSON.stringify(this.dialogForm));
// 回填文件
let file = this.$refs.pdf.getFiles();
let formData = new FormData();
if (file[0].status == "ready") {
formData.append("files", file[0].raw);
let upLoadRes = await uploadFile(formData);
if (upLoadRes.code == 0) {
params.pdfFile = upLoadRes.data[0].fileId;
} else {
this.$message.error("上传失败!:" + upLoadRes.data.msg);
}
} else {
params.faceImage = "";
}
// 处理行政区划
if (params.regionCode instanceof Array) {
params.regionCode = params.regionCode[params.regionCode.length - 1];
} else if (file[0].status == "success") {
params.pdfFile = file[0].fileId;
}
// 处理所属部门
params.pid = this.regionTree[0].regionId;
// 处理状态
// 修改状态
params.status = this.status ? 1 : 0;
if (this.dialogForm.id) {
let res = await editMuseum(params);
deleteFiles(deleteFileArr);
if (params.literatureId) {
let res = await editLiterature(params);
if (res.code == 0) {
this.$message.success("修改成功!");
this.reload();
}
} else {
let res = await addMuseum(params);
let res = await addLiterature(params);
if (res.code == 0) {
this.$message.success("添加成功!");
this.reload();
......@@ -291,16 +188,16 @@ export default {
}
},
reload() {
this.$emit("refresh", true); //需要重新获取orgTree
this.$emit("refresh");
this.$emit("handleClose");
this.faceImage = [];
this.files = [];
},
handleClose(done) {
this.$confirm("确认关闭?")
.then((_) => {
done();
this.$emit("handleClose");
this.faceImage = [];
this.files = [];
})
.catch((_) => {});
},
......@@ -328,35 +225,10 @@ export default {
flex: 1;
margin-right: 48px;
}
.relate {
flex: 1;
}
}
.dialog-footer {
display: flex;
justify-content: flex-end;
}
.upload-box {
background-color: #fbfdff;
border: 1px dashed #c0ccda;
border-radius: 6px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 148px;
height: 148px;
line-height: 146px;
vertical-align: top;
text-align: center;
margin: 0 8px 8px 0;
i {
font-size: 28px;
color: #8c939d;
}
}
.video-lists {
display: flex;
}
</style>
\ No newline at end of file
......@@ -19,6 +19,13 @@ export const title = [{
label: "手机号",
columnAlign: 'center',
},
{
prop: "status",
label: "状态",
columnAlign: 'center',
isStatus: true,
width: 100
},
]
export const operates = {
......
<!-- -->
<template>
<div class='users app-container'>
<div class="users app-container">
<el-row :gutter="16">
<el-col :span="4">
<el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick" default-expand-all></el-tree>
<el-tree
:data="treeData"
:props="defaultProps"
@node-click="handleNodeClick"
default-expand-all
:expand-on-click-node="false"
></el-tree>
</el-col>
<el-col :span="20">
<div class="top-bar">
<SearchBar :config="searchConfig" @search="search" @reset="reset" />
<el-button type="primary" @click.native="handleOperation({ type: 'add' })" icon="el-icon-s-promotion">
发布</el-button>
<el-button
type="primary"
@click.native="handleOperation({ type: 'add' })"
icon="el-icon-s-promotion"
>
新增</el-button
>
</div>
<TablePage :data="list.records" :tableTitle="tableTitle" :operates="tableOperates">
<TablePage
:data="list.records"
:tableTitle="tableTitle"
:operates="tableOperates"
>
<template v-slot:status="data">
<el-popconfirm :title="getStatusTitle(data.scope.status)" @onConfirm="handleChangeStatus(data.scope)">
<el-switch slot="reference" :value="Boolean(Number(data.scope.status))"></el-switch>
<el-popconfirm
:title="getStatusTitle(data.scope.status)"
@onConfirm="handleChangeStatus(data.scope)"
>
<el-switch
slot="reference"
:value="Boolean(Number(data.scope.status))"
></el-switch>
</el-popconfirm>
</template>
<template v-slot:operates="scope">
<TableOperation :operations="tableOperations" :rawData="scope.scope.row" @handleOperation="handleOperation">
<TableOperation
:operations="tableOperations"
:rawData="scope.scope.row"
@handleOperation="handleOperation"
>
</TableOperation>
</template>
</TablePage>
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page="Number(list.current)" :page-sizes="[10, 20, 40, 50]" :page-size="Number(list.size)"
layout="total, sizes, prev, pager, next, jumper" :total="Number(list.total)" class="pagination">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="Number(list.current)"
:page-sizes="[10, 20, 40, 50]"
:page-size="Number(list.size)"
layout="total, sizes, prev, pager, next, jumper"
:total="Number(list.total)"
class="pagination"
>
</el-pagination>
</el-col>
</el-row>
<InfoEditDialog
:visible="dialogVisible"
:form="form"
:orgTreeData="treeData"
@handleClose="handleClose"
@refresh="loadData"
/>
</div>
</template>
<script>
import TablePage from "@/components/Table/TablePage.vue";
import TableOperation from "@/components/Table/TableOperation.vue";
import SearchBar from "@/components/SearchBar";
import { title, operates, operations } from "./config";
import { getDeptTree, getUserList } from '@/api/user'
export default {
components: {
TablePage,
TableOperation,
SearchBar
// InfoEditDialog,
import TablePage from "@/components/Table/TablePage.vue";
import TableOperation from "@/components/Table/TableOperation.vue";
import SearchBar from "@/components/SearchBar";
import { title, operates, operations } from "./config";
import { getDeptTree, getUserList } from "@/api/user";
export default {
components: {
TablePage,
TableOperation,
SearchBar,
// InfoEditDialog,
},
computed: {
tableTitle() {
return title;
},
computed: {
tableTitle() {
return title;
},
tableOperates() {
return operates;
tableOperates() {
return operates;
},
tableOperations() {
return operations;
},
},
data() {
return {
treeData: [],
defaultProps: {
children: "children",
label: "label",
},
tableOperations() {
return operations;
list: {
records: [],
size: 10,
current: 1,
total: 0,
},
},
data() {
return {
treeData: [
],
defaultProps: {
children: 'children',
label: 'label'
searchConfig: [
{
prop: "username",
type: "input",
label: "用户名",
},
list: {
records: [],
size: 10,
current: 1,
total: 0,
{
prop: "nickName",
type: "input",
label: "昵称",
},
searchConfig: [
{
prop: "username",
type: "input",
label: "用户名",
},
{
prop: "nickName",
type: "input",
label: "昵称",
},
],
],
currentDeptNo: null,
form: {
username: "", //用户名
nickname: "", //昵称
password: "", //密码
phone: "", //手机号
realName: "", //真实姓名
deptNo: "",
},
};
},
mounted() {
this.loadTreeData();
},
methods: {
// 加载树结构数据
async loadTreeData() {
const res = await getDeptTree();
console.log(111, res);
if (res.code == 0) {
this.treeData = res.data;
this.currentDeptNo = this.treeData[0].deptNo;
this.loadListData();
}
},
// 加载表格数据
async loadListData() {
var params = {
page: this.list.current,
limit: this.list.size,
deptNo: this.currentDeptNo,
};
const res = await getUserList(params);
if (res.code == 0) {
this.list = res.data;
}
},
mounted() {
this.loadTreeData()
this.loadListData()
async search(form) {
var params = {
page: this.list.current,
limit: this.list.size,
deptNo: this.currentDeptNo,
...form,
};
const res = await getUserList(params);
if (res.code == 0) {
this.list = res.data;
}
},
reset() {
this.loadListData();
},
methods: {
// 加载树结构数据
async loadTreeData() {
const res = await getDeptTree()
console.log(111, res);
if (res.code == 0) {
this.treeData = res.data
}
},
// 加载表格数据
async loadListData() {
var params = {
page: this.list.current,
limit: this.list.size,
};
const res = await getUserList(params)
if (res.code == 0) {
this.list = res.data;
}
},
async search(form) {
var params = {
page: this.list.current,
limit: this.list.size,
...form,
};
const res = await getUserList(params)
if (res.code == 0) {
this.list = res.data;
}
},
reset() {
this.loadListData();
},
handleNodeClick(e) {
console.log(e);
},
// 改变页容量
handleSizeChange(value) {
this.list.size = value;
this.loadListData();
},
handleNodeClick(e) {
console.log(e);
const { deptNo } = e;
this.currentDeptNo = deptNo;
this.loadListData();
},
// 改变页容量
handleSizeChange(value) {
this.list.size = value;
this.loadListData();
},
// 改变当前显示页
handleCurrentChange(value) {
this.list.current = value;
this.loadListData();
},
// 改变当前显示页
handleCurrentChange(value) {
this.list.current = value;
this.loadListData();
},
async handleOperation(value, row) {
console.log("handleOperation", value, row);
switch (value.type) {
case "add":
// this.drawerVisible = true;
break;
case "edit":
// this.form = row;
// this.drawerVisible = true;
break;
case "delete":
// let deleteRes = await deleteLt([row.literatureId]);
// if (deleteRes.code == 0) {
// this.$message.success("删除成功!");
// this.loadData();
// }
break;
}
},
async handleOperation(value, row) {
console.log("handleOperation", value, row);
switch (value.type) {
case "add":
this.dialogVisible = true;
break;
case "edit":
// this.form = row;
this.dialogVisible = true;
break;
case "delete":
// let deleteRes = await deleteLt([row.literatureId]);
// if (deleteRes.code == 0) {
// this.$message.success("删除成功!");
// this.loadData();
// }
break;
}
},
};
},
};
</script>
<style lang="scss" scoped>
.top-bar {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.top-bar {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.pagination {
margin: 16px;
}
.pagination {
margin: 16px;
}
.el-button {
margin-bottom: 22px;
}
.el-button {
margin-bottom: 22px;
}
</style>
\ No newline at end of file
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论