|
@@ -1,482 +0,0 @@
|
|
|
-<template>
|
|
|
|
|
- <div id="accountManagement">
|
|
|
|
|
- <table-list
|
|
|
|
|
- :tableSets="tableSet"
|
|
|
|
|
- :tableData="tableData"
|
|
|
|
|
- :navText="navText"
|
|
|
|
|
- :loading="loading"
|
|
|
|
|
- @addClick="addClick"
|
|
|
|
|
- >
|
|
|
|
|
- <template slot="btn" slot-scope="props">
|
|
|
|
|
- <el-button type="text" @click="addClick(props.scope.row, 0)"
|
|
|
|
|
- >修改</el-button
|
|
|
|
|
- >
|
|
|
|
|
- <el-button type="text" @click="del(props.scope.row)">删除</el-button>
|
|
|
|
|
- </template>
|
|
|
|
|
- </table-list>
|
|
|
|
|
- <pagination
|
|
|
|
|
- :total="total"
|
|
|
|
|
- :pageSize="pageSize"
|
|
|
|
|
- :currentPage="currentPage"
|
|
|
|
|
- @handleSizeChange="handleSizeChange"
|
|
|
|
|
- @handleCurrentChange="handleCurrentChange"
|
|
|
|
|
- />
|
|
|
|
|
- <el-dialog
|
|
|
|
|
- :visible.sync="dialogVisible"
|
|
|
|
|
- width="560px"
|
|
|
|
|
- :show-close="false"
|
|
|
|
|
- :close-on-click-modal="false"
|
|
|
|
|
- @close="onClose"
|
|
|
|
|
- @closed="loadingClose"
|
|
|
|
|
- >
|
|
|
|
|
- <div slot="title" class="hearders">
|
|
|
|
|
- <div class="leftTitle">
|
|
|
|
|
- {{ statusPop === 1 ? "添加" : statusPop === 0 ? "修改" : "详情" }}
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="rightBoxs">
|
|
|
|
|
- <img src="@/assets/images/Close@2x.png" alt="" @click="close" />
|
|
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div>
|
|
|
|
|
- <el-form
|
|
|
|
|
- label-position="right"
|
|
|
|
|
- label-width="110px"
|
|
|
|
|
- :model="listData"
|
|
|
|
|
- :rules="rules"
|
|
|
|
|
- ref="listData"
|
|
|
|
|
- >
|
|
|
|
|
- <el-form-item label="账号名称" prop="userName">
|
|
|
|
|
- <el-input
|
|
|
|
|
- v-model="listData.userName"
|
|
|
|
|
- placeholder="请输入账号名称"
|
|
|
|
|
- clearable
|
|
|
|
|
- :style="{ width: '100%' }"
|
|
|
|
|
- >
|
|
|
|
|
- </el-input>
|
|
|
|
|
- </el-form-item>
|
|
|
|
|
- <el-form-item
|
|
|
|
|
- label="账号密码"
|
|
|
|
|
- :prop="statusPop === 1 ? 'password' : ''"
|
|
|
|
|
- >
|
|
|
|
|
- <el-input
|
|
|
|
|
- v-model="listData.password"
|
|
|
|
|
- placeholder="请输入账号密码"
|
|
|
|
|
- clearable
|
|
|
|
|
- :style="{ width: '100%' }"
|
|
|
|
|
- >
|
|
|
|
|
- </el-input>
|
|
|
|
|
- </el-form-item>
|
|
|
|
|
- <el-form-item label="真实姓名" prop="nickName">
|
|
|
|
|
- <el-input
|
|
|
|
|
- v-model="listData.nickName"
|
|
|
|
|
- placeholder="请输入真实姓名"
|
|
|
|
|
- clearable
|
|
|
|
|
- :style="{ width: '100%' }"
|
|
|
|
|
- >
|
|
|
|
|
- </el-input>
|
|
|
|
|
- </el-form-item>
|
|
|
|
|
- <el-form-item label="手机号码" prop="phonenumber">
|
|
|
|
|
- <el-input
|
|
|
|
|
- v-model="listData.phonenumber"
|
|
|
|
|
- placeholder="请输入手机号码"
|
|
|
|
|
- clearable
|
|
|
|
|
- :style="{ width: '100%' }"
|
|
|
|
|
- >
|
|
|
|
|
- </el-input>
|
|
|
|
|
- </el-form-item>
|
|
|
|
|
- <el-form-item label="邮箱" prop="email">
|
|
|
|
|
- <el-input
|
|
|
|
|
- v-model="listData.email"
|
|
|
|
|
- placeholder="请输入邮箱"
|
|
|
|
|
- clearable
|
|
|
|
|
- :style="{ width: '100%' }"
|
|
|
|
|
- >
|
|
|
|
|
- </el-input>
|
|
|
|
|
- </el-form-item>
|
|
|
|
|
- <el-form-item label="角色名称" prop="roleIds">
|
|
|
|
|
- <el-select
|
|
|
|
|
- multiple
|
|
|
|
|
- v-model="listData.roleIds"
|
|
|
|
|
- placeholder="请选择角色名称"
|
|
|
|
|
- clearable
|
|
|
|
|
- :style="{ width: '100%' }"
|
|
|
|
|
- >
|
|
|
|
|
- <el-option
|
|
|
|
|
- v-for="(item, index) in roleList"
|
|
|
|
|
- :key="index"
|
|
|
|
|
- :label="item.roleName"
|
|
|
|
|
- :value="item.roleId"
|
|
|
|
|
- :disabled="item.disabled"
|
|
|
|
|
- ></el-option>
|
|
|
|
|
- </el-select>
|
|
|
|
|
- </el-form-item>
|
|
|
|
|
- <el-form-item label="状态" prop="status">
|
|
|
|
|
- <el-radio-group v-model="listData.status" size="medium">
|
|
|
|
|
- <el-radio
|
|
|
|
|
- v-for="(item, index) in statusOptions"
|
|
|
|
|
- :key="index"
|
|
|
|
|
- :label="item.value"
|
|
|
|
|
- :disabled="item.disabled"
|
|
|
|
|
- >{{ item.label }}</el-radio
|
|
|
|
|
- >
|
|
|
|
|
- </el-radio-group>
|
|
|
|
|
- </el-form-item>
|
|
|
|
|
- </el-form>
|
|
|
|
|
- </div>
|
|
|
|
|
- <span slot="footer" class="dialog-footer">
|
|
|
|
|
- <el-button @click="close">取 消</el-button>
|
|
|
|
|
- <el-button
|
|
|
|
|
- type="primary"
|
|
|
|
|
- v-if="statusPop !== 2"
|
|
|
|
|
- :loading="disabledBtn"
|
|
|
|
|
- @click="submit('listData')"
|
|
|
|
|
- >确 定</el-button
|
|
|
|
|
- >
|
|
|
|
|
- </span>
|
|
|
|
|
- </el-dialog>
|
|
|
|
|
- </div>
|
|
|
|
|
-</template>
|
|
|
|
|
-
|
|
|
|
|
-<script>
|
|
|
|
|
-import { mapGetters } from "vuex";
|
|
|
|
|
-import searchBox from "@/components/searchBox";
|
|
|
|
|
-import tableList from "@/components/tableList";
|
|
|
|
|
-import pagination from "@/components/pagination";
|
|
|
|
|
-export default {
|
|
|
|
|
- name: "AccountManagement",
|
|
|
|
|
- components: { searchBox, tableList, pagination },
|
|
|
|
|
- data() {
|
|
|
|
|
- return {
|
|
|
|
|
- disabledBtn: false,
|
|
|
|
|
- loading: false, //当前表单加载是否加载动画
|
|
|
|
|
- navText: {
|
|
|
|
|
- title: "账号管理",
|
|
|
|
|
- index: 0,
|
|
|
|
|
- ch: "条",
|
|
|
|
|
- num: false,
|
|
|
|
|
- choice: true,
|
|
|
|
|
- addHide: false,
|
|
|
|
|
- backFatherBtn: {
|
|
|
|
|
- status: false,
|
|
|
|
|
- title: "未定义",
|
|
|
|
|
- },
|
|
|
|
|
- },
|
|
|
|
|
- // 表单
|
|
|
|
|
- tableSet: [
|
|
|
|
|
- {
|
|
|
|
|
- label: "角色名称",
|
|
|
|
|
- prop: "roleName",
|
|
|
|
|
- hidden: true,
|
|
|
|
|
- },
|
|
|
|
|
- {
|
|
|
|
|
- label: "真实姓名",
|
|
|
|
|
- prop: "userName",
|
|
|
|
|
- hidden: true,
|
|
|
|
|
- },
|
|
|
|
|
- {
|
|
|
|
|
- label: "手机号码",
|
|
|
|
|
- prop: "telphone",
|
|
|
|
|
- hidden: true,
|
|
|
|
|
- },
|
|
|
|
|
- // {
|
|
|
|
|
- // label: "邮箱",
|
|
|
|
|
- // prop: "email",
|
|
|
|
|
- // hidden: true,
|
|
|
|
|
- // },
|
|
|
|
|
- {
|
|
|
|
|
- label: "状态",
|
|
|
|
|
- prop: "status",
|
|
|
|
|
- hidden: true,
|
|
|
|
|
- scope: "status",
|
|
|
|
|
- },
|
|
|
|
|
- ],
|
|
|
|
|
- listData: {},
|
|
|
|
|
- rules: {
|
|
|
|
|
- userName: [
|
|
|
|
|
- {
|
|
|
|
|
- required: true,
|
|
|
|
|
- message: "请输入账号名称",
|
|
|
|
|
- trigger: "blur",
|
|
|
|
|
- },
|
|
|
|
|
- ],
|
|
|
|
|
- password: [
|
|
|
|
|
- {
|
|
|
|
|
- required: true,
|
|
|
|
|
- message: "请输入账号密码",
|
|
|
|
|
- trigger: "blur",
|
|
|
|
|
- },
|
|
|
|
|
- ],
|
|
|
|
|
- nickName: [
|
|
|
|
|
- {
|
|
|
|
|
- required: true,
|
|
|
|
|
- message: "请输入真实姓名",
|
|
|
|
|
- trigger: "blur",
|
|
|
|
|
- },
|
|
|
|
|
- ],
|
|
|
|
|
- phonenumber: [
|
|
|
|
|
- {
|
|
|
|
|
- required: false,
|
|
|
|
|
- message: "请输入手机号码",
|
|
|
|
|
- trigger: "blur",
|
|
|
|
|
- },
|
|
|
|
|
- {
|
|
|
|
|
- pattern: /^1[34578]\d{9}$/,
|
|
|
|
|
- message: "请输入正确手机号",
|
|
|
|
|
- trigger: "blur",
|
|
|
|
|
- },
|
|
|
|
|
- ],
|
|
|
|
|
- email: [
|
|
|
|
|
- {
|
|
|
|
|
- required: false,
|
|
|
|
|
- message: "请输入邮箱",
|
|
|
|
|
- trigger: "blur",
|
|
|
|
|
- },
|
|
|
|
|
- ],
|
|
|
|
|
- roleIds: [
|
|
|
|
|
- {
|
|
|
|
|
- required: true,
|
|
|
|
|
- message: "请选择角色名称",
|
|
|
|
|
- trigger: "change",
|
|
|
|
|
- },
|
|
|
|
|
- ],
|
|
|
|
|
- status: [
|
|
|
|
|
- {
|
|
|
|
|
- required: true,
|
|
|
|
|
- message: "状态不能为空",
|
|
|
|
|
- trigger: "change",
|
|
|
|
|
- },
|
|
|
|
|
- ],
|
|
|
|
|
- },
|
|
|
|
|
- statusOptions: [
|
|
|
|
|
- {
|
|
|
|
|
- label: "启用",
|
|
|
|
|
- value: 1,
|
|
|
|
|
- },
|
|
|
|
|
- {
|
|
|
|
|
- label: "关闭",
|
|
|
|
|
- value: 0,
|
|
|
|
|
- },
|
|
|
|
|
- ],
|
|
|
|
|
- statusPop: 1,
|
|
|
|
|
- dialogVisible: false,
|
|
|
|
|
- listData: {},
|
|
|
|
|
- tableData: [], //表单数据
|
|
|
|
|
- total: 0, //一共多少条
|
|
|
|
|
- pageSize: 10, //每页多少条数据
|
|
|
|
|
- currentPage: 1, //当前页码
|
|
|
|
|
- };
|
|
|
|
|
- },
|
|
|
|
|
- computed: { ...mapGetters(["roleList"]) },
|
|
|
|
|
- mounted() {
|
|
|
|
|
- this.search();
|
|
|
|
|
- },
|
|
|
|
|
- methods: {
|
|
|
|
|
- loadingClose() {
|
|
|
|
|
- this.disabledBtn = false;
|
|
|
|
|
- },
|
|
|
|
|
- search(v) {
|
|
|
|
|
- this.loading = true;
|
|
|
|
|
- var data = {
|
|
|
|
|
- statusArray: "0,1",
|
|
|
|
|
- pageSize: this.pageSize,
|
|
|
|
|
- pageNum: this.currentPage,
|
|
|
|
|
- };
|
|
|
|
|
- this.$api
|
|
|
|
|
- .obtainUserList(data)
|
|
|
|
|
- .then((res) => {
|
|
|
|
|
- this.tableData = res.rows;
|
|
|
|
|
- this.total = res.total;
|
|
|
|
|
- })
|
|
|
|
|
- .finally(() => {
|
|
|
|
|
- this.loading = false;
|
|
|
|
|
- });
|
|
|
|
|
- },
|
|
|
|
|
- init() {
|
|
|
|
|
- this.search();
|
|
|
|
|
- },
|
|
|
|
|
- addClick(v, int) {
|
|
|
|
|
- if (v === undefined) {
|
|
|
|
|
- this.statusPop = 1;
|
|
|
|
|
- this.listData = {
|
|
|
|
|
- status: 1,
|
|
|
|
|
- };
|
|
|
|
|
- } else {
|
|
|
|
|
- this.statusPop = int;
|
|
|
|
|
- this.listData = JSON.parse(JSON.stringify(v));
|
|
|
|
|
- }
|
|
|
|
|
- this.$nextTick(() => {
|
|
|
|
|
- this.$refs.listData.clearValidate();
|
|
|
|
|
- });
|
|
|
|
|
- this.dialogVisible = true;
|
|
|
|
|
- },
|
|
|
|
|
- del(v) {
|
|
|
|
|
- this.$confirm("此操作将删除该岗位, 是否继续?", "提示", {
|
|
|
|
|
- confirmButtonText: "确定",
|
|
|
|
|
- cancelButtonText: "取消",
|
|
|
|
|
- type: "warning",
|
|
|
|
|
- })
|
|
|
|
|
- .then(() => {
|
|
|
|
|
- // var data = JSON.parse(JSON.stringify(v));
|
|
|
|
|
- // data.menuIds = [];
|
|
|
|
|
- // data.status = "-1";
|
|
|
|
|
- var data = {
|
|
|
|
|
- userId: v.userId,
|
|
|
|
|
- status: -1,
|
|
|
|
|
- userName: v.userName,
|
|
|
|
|
- roleIds: [],
|
|
|
|
|
- };
|
|
|
|
|
- this.$api.editUser(data).then((res) => {
|
|
|
|
|
- if (res.code === 200) {
|
|
|
|
|
- this.$message.success("删除成功");
|
|
|
|
|
- this.search();
|
|
|
|
|
- this.dialogVisible = false;
|
|
|
|
|
- }
|
|
|
|
|
- });
|
|
|
|
|
- })
|
|
|
|
|
- .catch(() => {
|
|
|
|
|
- this.$message({
|
|
|
|
|
- type: "info",
|
|
|
|
|
- message: "已取消删除",
|
|
|
|
|
- });
|
|
|
|
|
- });
|
|
|
|
|
- },
|
|
|
|
|
- onClose() {
|
|
|
|
|
- this.$refs["listData"].resetFields();
|
|
|
|
|
- },
|
|
|
|
|
- close() {
|
|
|
|
|
- this.dialogVisible = false;
|
|
|
|
|
- },
|
|
|
|
|
- submit(formName) {
|
|
|
|
|
- this.$refs[formName].validate((valid) => {
|
|
|
|
|
- if (!valid) return;
|
|
|
|
|
- this.disabledBtn = true;
|
|
|
|
|
- if (this.listData.userId) {
|
|
|
|
|
- this.$api
|
|
|
|
|
- .editUser(this.listData)
|
|
|
|
|
- .then((res) => {
|
|
|
|
|
- this.$message.success("修改成功");
|
|
|
|
|
- this.search();
|
|
|
|
|
- this.close();
|
|
|
|
|
- })
|
|
|
|
|
- .catch(() => {
|
|
|
|
|
- this.disabledBtn = false;
|
|
|
|
|
- });
|
|
|
|
|
- } else {
|
|
|
|
|
- this.$api
|
|
|
|
|
- .addUser(this.listData)
|
|
|
|
|
- .then((res) => {
|
|
|
|
|
- this.$message.success("新增成功");
|
|
|
|
|
- this.search();
|
|
|
|
|
- this.close();
|
|
|
|
|
- })
|
|
|
|
|
- .catch(() => {
|
|
|
|
|
- this.disabledBtn = false;
|
|
|
|
|
- });
|
|
|
|
|
- }
|
|
|
|
|
- });
|
|
|
|
|
- },
|
|
|
|
|
- handleSizeChange(v) {
|
|
|
|
|
- this.pageSize = v;
|
|
|
|
|
- this.currentPage = 1;
|
|
|
|
|
- this.search();
|
|
|
|
|
- },
|
|
|
|
|
- handleCurrentChange(v) {
|
|
|
|
|
- this.currentPage = v;
|
|
|
|
|
- this.search();
|
|
|
|
|
- },
|
|
|
|
|
- },
|
|
|
|
|
-};
|
|
|
|
|
-</script>
|
|
|
|
|
-
|
|
|
|
|
-<style lang="less" scoped>
|
|
|
|
|
-/deep/.el-button {
|
|
|
|
|
- border-radius: 8px;
|
|
|
|
|
-}
|
|
|
|
|
-/deep/.el-dialog {
|
|
|
|
|
- border-radius: 8px;
|
|
|
|
|
- .el-dialog__header {
|
|
|
|
|
- padding: 0;
|
|
|
|
|
- .hearders {
|
|
|
|
|
- height: 40px;
|
|
|
|
|
- display: flex;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
- justify-content: space-between;
|
|
|
|
|
- padding: 0px 18px 0px 20px;
|
|
|
|
|
- border-bottom: 1px solid #e2e2e2;
|
|
|
|
|
- .leftTitle {
|
|
|
|
|
- font-size: 14px;
|
|
|
|
|
- font-weight: bold;
|
|
|
|
|
- color: #2f4378;
|
|
|
|
|
- }
|
|
|
|
|
- .rightBoxs {
|
|
|
|
|
- display: flex;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
- img {
|
|
|
|
|
- width: 14px;
|
|
|
|
|
- height: 14px;
|
|
|
|
|
- margin-left: 13px;
|
|
|
|
|
- cursor: pointer;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- .el-dialog__footer {
|
|
|
|
|
- padding: 0;
|
|
|
|
|
- .dialog-footer {
|
|
|
|
|
- padding: 0px 40px;
|
|
|
|
|
- height: 70px;
|
|
|
|
|
- border-top: 1px solid #e2e2e2;
|
|
|
|
|
- display: flex;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
- justify-content: flex-end;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
-}
|
|
|
|
|
-.imgBox {
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- // height: 210px;
|
|
|
|
|
- border: 1px solid #e2e2e2;
|
|
|
|
|
- border-radius: 8px;
|
|
|
|
|
- padding: 8px 8px 3px;
|
|
|
|
|
- display: flex;
|
|
|
|
|
- flex-direction: column;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
- .imgLabel {
|
|
|
|
|
- flex: 1;
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- border: 1px dotted #e2e2e2;
|
|
|
|
|
- color: #999;
|
|
|
|
|
- font-size: 14px;
|
|
|
|
|
- cursor: pointer;
|
|
|
|
|
- border-radius: 8px;
|
|
|
|
|
- .msPhoto {
|
|
|
|
|
- display: flex;
|
|
|
|
|
- justify-content: center;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
- max-width: 100%;
|
|
|
|
|
- max-height: 270px;
|
|
|
|
|
- img {
|
|
|
|
|
- max-width: 100%;
|
|
|
|
|
- max-height: 270px;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- .imgbbx {
|
|
|
|
|
- display: flex;
|
|
|
|
|
- flex-direction: column;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
- justify-content: center;
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- height: 100%;
|
|
|
|
|
- i {
|
|
|
|
|
- font-weight: bold;
|
|
|
|
|
- margin: 14px 0;
|
|
|
|
|
- font-size: 24px;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- p {
|
|
|
|
|
- margin: 5px 0px;
|
|
|
|
|
- }
|
|
|
|
|
-}
|
|
|
|
|
-</style>
|
|
|
|
|
-
|
|
|