123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496 |
- <template>
- <div class="app-container">
- <div class="setting_title">账户管理</div>
- <el-divider></el-divider>
- <div class="mymain-container">
- <div class="btn-group clearfix">
- <div class="fl">
- <el-button size="small" type="primary" icon="el-icon-plus" @click="addOrEdit('add')">新增账户</el-button>
- </div>
- <div class="fr">
- <el-select v-model="screenForm.role" placeholder="全部" size="small" style="width: 120px; margin-right: 10px;"
- @change="getListByScreen">
- <el-option label="全部角色" value=""></el-option>
- <el-option :label="item.name" :value="item.adminRoleId" v-for="(item, index) in roleList"
- :key="index"></el-option>
- </el-select>
- <el-select v-model="screenForm.status" placeholder="全部" size="small" style="width: 120px; margin-right: 10px;"
- @change="getListByScreen">
- <el-option label="全部状态" value=""></el-option>
- <el-option :label="item.label" :value="item.value" v-for="(item, index) in select_status"
- :key="index"></el-option>
- </el-select>
- <el-input placeholder="请输入内容" v-model="screenForm.keyword" size="small" style="width: 180px;">
- <el-button slot="append" icon="el-icon-search" size="small" @click="getListByScreen"></el-button>
- </el-input>
- </div>
- </div>
- <div class="table">
- <el-table v-loading="listLoading" :data="dataList" element-loading-text="Loading" border fit highlight-current-row
- stripe>
- <el-table-column align="center" label="序号" type="index" width="50"></el-table-column>
- <el-table-column align="center" label="账号" prop="userName" min-width="120"></el-table-column>
- <el-table-column align="center" label="用户名" prop="nickName" min-width="120"></el-table-column>
- <el-table-column align="center" label="角色" prop="roleName" min-width="100"></el-table-column>
- <el-table-column align="center" label="创建时间" prop="createTime" min-width="160"></el-table-column>
- <el-table-column align="center" label="最后登录时间" prop="lastLoginTime" min-width="160"></el-table-column>
- <el-table-column align="center" label="状态" class-name="status-col">
- <template slot-scope="scope">
- <el-tag :type="scope.row.status ? 'success' : 'danger'">{{ scope.row.status ? '正常' : '冻结' }}</el-tag>
- </template>
- </el-table-column>
- <el-table-column align="center" label="操作" min-width="160">
- <template slot-scope="scope">
- <el-popconfirm v-if="scope.row.status" style="margin-right: 10px;" title="确定冻结吗?"
- @confirm="changeStatus(scope.row.adminUserId, 0)">
- <el-button slot="reference" type="text">冻结</el-button>
- </el-popconfirm>
- <el-popconfirm v-else style="margin-right: 10px;" title="确定恢复吗?"
- @confirm="changeStatus(scope.row.adminUserId, 1)">
- <el-button slot="reference" type="text">恢复</el-button>
- </el-popconfirm>
- <el-button type="text" @click="addOrEdit('edit', scope.row.adminUserId)">编辑</el-button>
- <el-button type="text" @click="handleReset(scope.row.adminUserId)">重置密码</el-button>
- </template>
- </el-table-column>
- </el-table>
- </div>
- <div class="pagination clearfix">
- <div class="fr">
- <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
- :page-sizes="[10, 20, 30, 50]" :page-size="10" layout="total, sizes, prev, pager, next, jumper"
- :total="listTotal">
- </el-pagination>
- </div>
- </div>
- </div>
- <!-- 重置密码 -->
- <el-dialog title="重置密码" :visible.sync="resetFormVisible" :show-close="false" width="40%"
- :close-on-click-modal="false">
- <el-form ref="resetForm" :model="resetForm" :rules="resetFormRules" label-position="left" label-width="100px">
- <el-form-item label="输入新密码" prop="newPassword">
- <el-input v-model="resetForm.newPassword" ref="password1" autocomplete="off" placeholder="请输入新密码"
- :type="passwordType1"></el-input>
- <span class="show-pwd" @click="showPwd(1)">
- <svg-icon :icon-class="passwordType1 === 'password' ? 'eye' : 'eye-open'" />
- </span>
- </el-form-item>
- <el-form-item label="确认密码" prop="confirmPassword">
- <el-input v-model="resetForm.confirmPassword" ref="password2" autocomplete="off" placeholder="请再次输入新密码"
- :type="passwordType2"></el-input>
- <span class="show-pwd" @click="showPwd(2)">
- <svg-icon :icon-class="passwordType2 === 'password' ? 'eye' : 'eye-open'" />
- </span>
- </el-form-item>
- </el-form>
- <div slot="footer" class="dialog-footer">
- <el-button @click="cancelResetForm">取 消</el-button>
- <el-button type="primary" @click="submitResetForm">确 定</el-button>
- </div>
- </el-dialog>
- <!-- 新增编辑账户 -->
- <el-dialog :title="addFormType == 'add' ? '新增账户' : '编辑账户'" :visible.sync="addFormVisible" :show-close="false"
- width="500px" :close-on-click-modal="false">
- <el-form ref="addForm" :model="addForm" :rules="addFormRules" label-position="left" label-width="120px">
- <el-form-item label="账号" prop="account">
- <el-input v-model="addForm.account" autocomplete="off" placeholder="请输入账号"></el-input>
- </el-form-item>
- <el-form-item label="用户名" prop="nickName">
- <el-input v-model="addForm.nickName" autocomplete="off" placeholder="请输入用户名"></el-input>
- </el-form-item>
- <el-form-item label="角色组" prop="role">
- <el-select v-model="addForm.role" placeholder="请选择角色组" style="width: 100%;">
- <el-option :label="item.name" :value="item.adminRoleId" v-for="(item, index) in roleList"
- :key="index"></el-option>
- </el-select>
- </el-form-item>
- <el-form-item label="网点" prop="adminWebsitId">
- <el-cascader style="width: 100%" :options="departmentList"
- :props="{ checkStrictly: true, value: 'websitId', label: 'name' }" v-model="addForm.adminWebsitId" clearable>
- </el-cascader>
- </el-form-item>
- <el-form-item label="密码" prop="newPassword">
- <el-input v-model="addForm.newPassword" ref="password1" autocomplete="off" placeholder="请输入密码"
- :type="passwordType1"></el-input>
- <span class="show-pwd" @click="showPwd(1)">
- <svg-icon :icon-class="passwordType1 === 'password' ? 'eye' : 'eye-open'" />
- </span>
- </el-form-item>
- <el-form-item label="确认密码" prop="confirmPassword">
- <el-input v-model="addForm.confirmPassword" ref="password2" autocomplete="off" placeholder="请再次输入密码"
- :type="passwordType2"></el-input>
- <span class="show-pwd" @click="showPwd(2)">
- <svg-icon :icon-class="passwordType2 === 'password' ? 'eye' : 'eye-open'" />
- </span>
- </el-form-item>
- <el-form-item label="是否公众号通知" prop="pubNotice">
- <el-switch v-model="addForm.pubNotice" active-color="#13ce66" inactive-color="#ff4949">
- </el-switch>
- </el-form-item>
- </el-form>
- <div slot="footer" class="dialog-footer">
- <el-button @click="cancelAddForm">取 消</el-button>
- <el-button type="primary" @click="submitAddForm">确 定</el-button>
- </div>
- </el-dialog>
- </div>
- </template>
- <script>
- import { getAccountList, getRoleList, changeAccountStatus, resetPassword, addAccount, editAccount, getUserInfo, getDepartmentList, getMerchantList } from '@/api/setting'
- export default {
- data() {
- var validatePass = (rule, value, callback) => {
- if (value === '') {
- callback(new Error('请输入新密码'));
- } else if (value && value.length < 6) {
- callback(new Error('密码长度至少6位'));
- } else {
- if (this.resetForm.confirmPassword !== '') {
- this.$refs.resetForm.validateField('confirmPassword');
- }
- callback();
- }
- };
- var validatePass2 = (rule, value, callback) => {
- if (value === '') {
- callback(new Error('请再次输入密码'));
- } else if (value !== this.resetForm.newPassword) {
- callback(new Error('两次输入密码不一致'));
- } else {
- callback();
- }
- };
- var validatePass3 = (rule, value, callback) => {
- if (value === '') {
- callback(new Error('请输入新密码'));
- } else if (value && value.length < 6) {
- callback(new Error('密码长度至少6位'));
- } else {
- if (this.addForm.confirmPassword !== '') {
- this.$refs.addForm.validateField('confirmPassword');
- }
- callback();
- }
- };
- var validatePass4 = (rule, value, callback) => {
- if (value === '') {
- callback(new Error('请再次输入密码'));
- } else if (value !== this.addForm.newPassword) {
- callback(new Error('两次输入密码不一致'));
- } else {
- callback();
- }
- };
- return {
- dataList: null, // 列表数据
- listLoading: true, // 列表加载loading
- screenForm: { // 筛选表单数据
- role: '', // 角色
- status: '', // 状态
- keyword: '', // 关键词
- },
- select_status: [ // 筛选字段 - 状态
- { label: '正常', value: true },
- { label: '冻结', value: false }
- ],
- currentPage: 1, // 当前页码
- pageSize: 10, // 每页数量
- listTotal: 0, // 列表总数
- roleList: [], // 角色列表
- departmentList: [], // 部门列表
- props: {
- multiple: true,
- value: 'id',
- label: 'name',
- children: 'children',
- },
- merchantList: [], // 商户列表
- resetId: null,
- resetFormVisible: false,
- resetForm: {
- newPassword: '', // 新密码
- confirmPassword: '', // 确认密码
- },
- resetFormRules: {
- newPassword: [
- { required: true, validator: validatePass, trigger: 'blur' }
- ],
- confirmPassword: [
- { required: true, validator: validatePass2, trigger: 'blur' }
- ],
- },
- editId: null,
- addFormType: 'add',
- addFormVisible: false,
- addForm: {
- account: '', // 账号
- nickName: '', // 用户名
- role: '', // 角色组
- adminWebsitId: '',
- newPassword: '', // 新密码
- confirmPassword: '', // 确认密码
- pubNotice: true,
- },
- addFormRules: {
- account: [
- { required: true, message: '请输入账号', trigger: 'blur' }
- ],
- nickName: [
- { required: true, message: '请输入用户名', trigger: 'blur' }
- ],
- role: [
- { required: true, message: '请选择角色组', trigger: 'change' }
- ],
- adminWebsitId: [
- { required: true, message: '请选择网点', trigger: 'change' }
- ],
- newPassword: [
- { required: true, validator: validatePass3, trigger: 'blur' }
- ],
- confirmPassword: [
- { required: true, validator: validatePass4, trigger: 'blur' }
- ],
- },
- passwordType1: 'password',
- passwordType2: 'password',
- }
- },
- async created() {
- await this.getRoleList();
- if (this.$route.query.type) {
- let index = this.$findElem(this.roleList, 'name', '企业负责人');
- this.screenForm.role = this.roleList[index].adminRoleId;
- }
- this.getList();
- },
- watch: {
- 'addForm.role'() {
- if (this.addForm.role) {
- let index = this.$findElem(this.roleList, 'adminRoleId', this.addForm.role);
- }
- }
- },
- methods: {
- getList() {
- this.listLoading = true;
- let params = {
- roleId: this.screenForm.role,
- status: this.screenForm.status,
- userName: this.screenForm.keyword,
- pageNum: this.currentPage,
- pageSize: this.pageSize,
- ...(() => {
- if (this.$route.query.companyWechatId) {
- return {
- companyWechatId: this.$route.query.companyWechatId
- }
- }
- return {}
- })(),
- };
- getAccountList(params).then(res => {
- this.dataList = res.data.records;
- this.listTotal = res.data.total;
- this.listLoading = false;
- })
- },
- // 筛选后重新获取列表
- getListByScreen() {
- this.currentPage = 1;
- this.getList();
- },
- // 获取角色列表
- async getRoleList() {
- const result = await new Promise((resolve, reject) => {
- getRoleList({ pageNum: 1, pageSize: 1000 }).then(res => {
- this.roleList = res.data.records;
- resolve(res.data);
- }).catch(res => {
- resolve([]);
- })
- })
- return result;
- },
- // 获取部门列表
- async getDepartmentList() {
- const result = await new Promise((resolve, reject) => {
- getDepartmentList().then(res => {
- resolve(res.data);
- }).catch(res => {
- resolve([]);
- })
- })
- return result;
- },
- // 更改每页数量
- handleSizeChange(val) {
- this.pageSize = val;
- this.currentPage = 1;
- this.getList();
- },
- // 更改当前页
- handleCurrentChange(val) {
- this.currentPage = val;
- this.getList();
- },
- // 操作 - 更改状态(type: 禁用0,启用1)
- changeStatus(id, type) {
- type = type ? true : false
- changeAccountStatus({ adminUserId: id, status: type }).then(res => {
- this.getList();
- this.$successMsg();
- })
- },
- // 显示隐藏密码
- showPwd(num) {
- if (num == 1) {
- if (this.passwordType1 === 'password') {
- this.passwordType1 = ''
- } else {
- this.passwordType1 = 'password'
- }
- this.$nextTick(() => {
- this.$refs.password1.focus()
- })
- }
- if (num == 2) {
- if (this.passwordType2 === 'password') {
- this.passwordType2 = ''
- } else {
- this.passwordType2 = 'password'
- }
- this.$nextTick(() => {
- this.$refs.password2.focus()
- })
- }
- },
- // 重置密码
- handleReset(id) {
- this.resetId = id;
- this.resetFormVisible = true;
- },
- // 取消重置密码
- cancelResetForm() {
- this.resetFormVisible = false;
- this.passwordType1 = 'password';
- this.passwordType2 = 'password';
- this.$refs.resetForm.resetFields();
- },
- // 提交重置密码
- submitResetForm() {
- this.$refs.resetForm.validate((valid) => {
- if (valid) {
- let params = {
- password: this.resetForm.newPassword,
- adminUserId: this.resetId
- }
- resetPassword(params).then(res => {
- this.cancelResetForm();
- this.getList();
- this.$successMsg();
- })
- }
- })
- },
- // 新增编辑 账户
- async addOrEdit(type, id) {
- this.addFormType = type;
- this.addFormVisible = true;
- this.departmentList = await this.getDepartmentList();
- if (type == 'edit') {
- this.editId = id;
- getUserInfo({ adminUserId: id }).then(res => {
- this.addForm = {
- account: res.data.userName,
- role: res.data.roleId,
- nickName: res.data.nickName,
- pubNotice: res.data.pubNotice,
- adminWebsitId: res.data.adminWebsitId
- }
- })
- }
- },
- // 取消 新增编辑账户
- cancelAddForm() {
- this.addFormVisible = false;
- this.passwordType1 = 'password';
- this.passwordType2 = 'password';
- this.$refs.addForm.resetFields();
- },
- // 提交 新增编辑账户
- submitAddForm() {
- this.$refs.addForm.validate((valid) => {
- if (valid) {
- let adminWebsitId = null
- if (this.addForm.adminWebsitId instanceof Array) {
- adminWebsitId = this.addForm.adminWebsitId[this.addForm.adminWebsitId.length - 1]
- } else {
- adminWebsitId = this.addForm.adminWebsitId
- }
- let params = {
- userName: this.addForm.account,
- nickName: this.addForm.nickName,
- roleId: this.addForm.role,
- adminWebsitId: adminWebsitId,
- password: this.addForm.newPassword,
- pubNotice: this.addForm.pubNotice,
- }
- if (this.addFormType == 'edit') {
- params.adminUserId = this.editId;
- editAccount(params).then(res => {
- this.cancelAddForm();
- this.getList();
- this.$successMsg('编辑成功');
- })
- } else {
- addAccount(params).then(res => {
- this.cancelAddForm();
- this.getList();
- this.$successMsg('新增成功');
- })
- }
- }
- })
- },
- }
- }
- </script>
- <style scoped lang="scss">
- .show-pwd {
- position: absolute;
- right: 15px;
- top: 0;
- font-size: 16px;
- cursor: pointer;
- user-select: none;
- }
- </style>
|