| | |
| | | <el-row :gutter="20"> |
| | | <!--搜索与添加区域--> |
| | | <el-col :span="6"> |
| | | <el-input :placeholder= "$t('langUsernamePlaceholder')" v-model="queryInfo.username" clearable @clear="getUserList"> |
| | | <el-input :placeholder="$t('langUsernamePlaceholder')" v-model="queryInfo.username" clearable |
| | | @clear="getUserList"> |
| | | </el-input> |
| | | </el-col> |
| | | <el-col :span="6"> |
| | | <el-input :placeholder="$t('langEmailPlaceholder')" v-model="queryInfo.email" clearable @clear="getUserList"> |
| | | <el-input :placeholder="$t('langEmailPlaceholder')" v-model="queryInfo.email" clearable @clear="getUserList"> |
| | | </el-input> |
| | | </el-col> |
| | | <!--搜索按钮--> |
| | |
| | | <el-table-column :label="$t('langCreateTime')" prop="createTime"></el-table-column> |
| | | <el-table-column :label="$t('langDisabled')"> |
| | | <template slot-scope="scope"> |
| | | <el-switch |
| | | :active-value="0" |
| | | :inactive-value="1" |
| | | v-model="scope.row.state" |
| | | @change="stateChange(scope.row)"> |
| | | <el-switch :active-value="0" :inactive-value="1" v-model="scope.row.state" @change="stateChange(scope.row)"> |
| | | </el-switch> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="操作"> |
| | | <template slot-scope="scope"> |
| | | <el-button type="primary" icon="el-icon-refresh" @click="resetPassword(scope.row)"> |
| | | |
| | | {{ $t('resetPassword') }} |
| | | </el-button> |
| | | </template> |
| | | </el-table-column> |
| | | <template slot-scope="scope"> |
| | | <el-button type="primary" icon="el-icon-refresh" @click="resetPassword(scope.row)"> |
| | | |
| | | {{ $t('resetPassword') }} |
| | | </el-button> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column :label="$t('langAction')"> |
| | | <template slot-scope="scope"> |
| | | <!--修改--> |
| | | <el-tooltip effect="dark" :content="$t('langEdit')" placement="top" :enterable="false"> |
| | | <el-button type="primary" icon="el-icon-edit" size="mini" |
| | | @click="showEditDialog(scope.row.id)"></el-button> |
| | | <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.id)"></el-button> |
| | | </el-tooltip> |
| | | <!--删除--> |
| | | <el-tooltip effect="dark" :content="$t('langDelete')" placement="top" :enterable="false"> |
| | | <el-button type="danger" icon="el-icon-delete" size="mini" |
| | | @click="removeUserById(scope.row)"></el-button> |
| | | <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeUserById(scope.row)"></el-button> |
| | | </el-tooltip> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | <!--分页区域--> |
| | | <el-pagination |
| | | @size-change="handleSizeChange" |
| | | @current-change="handleCurrentChange" |
| | | :current-page="queryInfo.pageNum" |
| | | :page-sizes="[6, 12, 18, 24]" |
| | | :page-size="queryInfo.pageSize" |
| | | :total="userList.total" |
| | | |
| | | :pager-count="7" |
| | | :layout="layout" |
| | | > |
| | | </el-pagination> |
| | | <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" |
| | | :current-page="queryInfo.pageNum" :page-sizes="[6, 12, 18, 24]" :page-size="queryInfo.pageSize" |
| | | :total="userList.total" :pager-count="7" :layout="layout"> |
| | | </el-pagination> |
| | | </el-card> |
| | | <!--添加用户的对话框--> |
| | | <el-dialog |
| | | :title="$t('langAddUserTitle')" |
| | | :visible.sync="addDialogVisible" |
| | | width="50%" |
| | | @close="addDialogClosed"> |
| | | <el-dialog :title="$t('langAddUserTitle')" :visible.sync="addDialogVisible" width="50%" @close="addDialogClosed"> |
| | | <!--内容主体区域--> |
| | | <el-form :model="addUserForm" :rules="addUserRules" ref="addUserRef" label-width="100px"> |
| | | <el-form-item :label="$t('langUsername')" prop="username" > |
| | | <el-input v-model="addUserForm.username" ></el-input> |
| | | <el-form-item :label="$t('langUsername')" prop="username"> |
| | | <el-input v-model="addUserForm.username"></el-input> |
| | | </el-form-item> |
| | | <el-form-item :label="$t('langPassword')" prop="password" > |
| | | <el-form-item :label="$t('langPassword')" prop="password"> |
| | | <el-input v-model="addUserForm.password" type="password"></el-input> |
| | | </el-form-item> |
| | | <el-form-item :label="$t('langEmail')" prop="email"> |
| | | <el-input v-model="addUserForm.email"></el-input> |
| | | </el-form-item> |
| | | |
| | | |
| | | |
| | | <el-form-item :label="$t('langState')" prop="state"> |
| | | <el-select v-model="addUserForm.state" > |
| | | <el-option v-for="(item,index) in options" |
| | | :key="index" |
| | | :value="item.value" |
| | | :label="item.label"> |
| | | <el-select v-model="addUserForm.state"> |
| | | <el-option v-for="(item, index) in options" :key="index" :value="item.value" :label="item.label"> |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | |
| | | <el-form-item :label="$t('role')" prop="roleId"> |
| | | <el-select filterable v-model="addUserForm.roleId" :placeholder="$t('langSelect')" > |
| | | <el-option v-for="item in roleList" |
| | | :key="item.id" |
| | | :value="item.id" |
| | | :label="item.name"> |
| | | <el-select filterable v-model="addUserForm.roleId" :placeholder="$t('langSelect')"> |
| | | <el-option v-for="item in roleList" :key="item.id" :value="item.id" :label="item.name"> |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | |
| | | </span> |
| | | </el-dialog> |
| | | <!--修改用户的对话框--> |
| | | <el-dialog |
| | | :title="$t('langEditUserTitle')" |
| | | :visible.sync="editDialogVisible" |
| | | width="50%"> |
| | | <el-dialog :title="$t('langEditUserTitle')" :visible.sync="editDialogVisible" width="50%"> |
| | | <!--内容主体区域--> |
| | | <el-form :model="editUserForm" :rules="addUserRules" ref="addCategoryRef" label-width="100px"> |
| | | <el-form-item :label="$t('langUsername')" prop="username"> |
| | | <el-input v-model="editUserForm.username" disabled></el-input> |
| | | </el-form-item> |
| | | <el-form-item :label="$t('role')" prop="roleId"> |
| | | <el-select filterable v-model="editUserForm.roleId" :placeholder="$t('langSelect')" > |
| | | <el-option v-for="item in roleList" |
| | | :key="item.id" |
| | | :value="item.id" |
| | | :label="item.name"> |
| | | <el-select filterable v-model="editUserForm.roleId" :placeholder="$t('langSelect')"> |
| | | <el-option v-for="item in roleList" :key="item.id" :value="item.id" :label="item.name"> |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | |
| | | <el-input v-model="editUserForm.email"></el-input> |
| | | </el-form-item> |
| | | <el-form-item :label="$t('langDisabled')" prop="state"> |
| | | <el-select v-model="editUserForm.state" > |
| | | <el-option v-for="(item,index) in options" |
| | | :key="index" |
| | | :value="item.value" |
| | | :label="item.label"> |
| | | <el-select v-model="editUserForm.state"> |
| | | <el-option v-for="(item, index) in options" :key="index" :value="item.value" :label="item.label"> |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | |
| | | |
| | | |
| | | <script> |
| | | import {getById, removeById, saveOrUpdate, selectPage,resetPass} from "../../api/user"; |
| | | import {select} from "../../api/role"; |
| | | import { getById, removeById, saveOrUpdate, selectPage, resetPass } from "../../api/user"; |
| | | import { select } from "../../api/role"; |
| | | |
| | | import LanguageMixin from '../../lang/LanguageMixin' |
| | | export default { |
| | | name: "User", |
| | | mixins: [LanguageMixin], |
| | | |
| | | data() { |
| | | data () { |
| | | return { |
| | | layout: 'total, sizes, prev, pager, next, jumper', |
| | | queryInfo: { |
| | |
| | | editUserForm: { |
| | | |
| | | roleId: null, |
| | | name:null, |
| | | roleid:null, |
| | | name: null, |
| | | roleid: null, |
| | | }, |
| | | // 添加分类的验证规则 |
| | | addUserRules: { |
| | | roleId: null, |
| | | username: [ |
| | | {required: true, message: '请输入用户名', trigger: 'blur'}, |
| | | {min: 5, max: 15, message: '长度在 5 到 15 个字符', trigger: 'blur'} |
| | | { required: true, message: '请输入用户名', trigger: 'blur' }, |
| | | { min: 5, max: 15, message: '长度在 5 到 15 个字符', trigger: 'blur' } |
| | | ], |
| | | password: [ |
| | | {required: true, message: '请输入密码', trigger: 'blur'}, |
| | | {min: 5, max: 15, message: '长度在 5 到 15 个字符', trigger: 'blur'} |
| | | { required: true, message: '请输入密码', trigger: 'blur' }, |
| | | { min: 5, max: 15, message: '长度在 5 到 15 个字符', trigger: 'blur' } |
| | | ], |
| | | email: [ |
| | | {required: true, message: '请输入邮箱', trigger: 'blur'}, |
| | | {type: 'email', message: '请输入正确格式的邮箱地址', trigger: 'blur'} |
| | | { required: true, message: '请输入邮箱', trigger: 'blur' }, |
| | | { type: 'email', message: '请输入正确格式的邮箱地址', trigger: 'blur' } |
| | | ] |
| | | }, |
| | | // 控制添加用户弹框的显示和隐藏 |
| | |
| | | // 控制修改用户弹框的显示和隐藏 |
| | | editDialogVisible: false, |
| | | options: [ |
| | | {label: '正常', value: 1}, |
| | | {label: '禁用', value: 0} |
| | | { label: '正常', value: 1 }, |
| | | { label: '禁用', value: 0 } |
| | | ], |
| | | roleList: [], |
| | | } |
| | | }, |
| | | created() { |
| | | created () { |
| | | this.getUserList(); |
| | | }, |
| | | methods: { |
| | | getUserList() { |
| | | getUserList () { |
| | | selectPage(this.queryInfo).then(res => { |
| | | this.userList.records = res.data.records; |
| | | this.userList.total = res.data.total |
| | | }); |
| | | |
| | | // test().then(res => { |
| | | // console.log(res.data) |
| | | // }); |
| | | // const data6 = [ |
| | | // { id: 32, deviceName: 'Device 7', address: 'Address 1' }, |
| | | // { id: 33, deviceName: 'Device 8', address: 'Address 2' }, |
| | | |
| | | // ]; |
| | | // test().then(res => { |
| | | // console.log(res.data) |
| | | // }); |
| | | // const data6 = [ |
| | | // { id: 32, deviceName: 'Device 7', address: 'Address 1' }, |
| | | // { id: 33, deviceName: 'Device 8', address: 'Address 2' }, |
| | | |
| | | // testup(data6).then(res => { |
| | | // console.log(res.data); |
| | | // }); |
| | | |
| | | // call({ |
| | | // id: 1, |
| | | // name: 12345 |
| | | // }).then(res => { |
| | | // console.log(res.data); |
| | | // }); |
| | | // ]; |
| | | |
| | | // testup(data6).then(res => { |
| | | // console.log(res.data); |
| | | // }); |
| | | |
| | | // call({ |
| | | // id: 1, |
| | | // name: 12345 |
| | | // }).then(res => { |
| | | // console.log(res.data); |
| | | // }); |
| | | |
| | | }, |
| | | |
| | | showAddDialog() { |
| | | |
| | | showAddDialog () { |
| | | this.addDialogVisible = true; |
| | | select().then(res => { |
| | | this.roleList = res.data; |
| | | }); |
| | | select().then(res => { |
| | | this.roleList = res.data; |
| | | }); |
| | | }, |
| | | // stateChange(info) { |
| | | // saveOrUpdate(info).then(() => { |
| | | // this.$message.success("更新状态成功") |
| | | // }); |
| | | // }, |
| | | stateChange(info) { |
| | | saveOrUpdate(info).then(() => { |
| | | const successMessage = this.$t('updateSuccessMessage'); |
| | | this.$message.success(successMessage); |
| | | }); |
| | | }, |
| | | resetPassword(info) { |
| | | this.$confirm('确认重置密码为默认值吗?', '重置密码', { |
| | | confirmButtonText: '确定', |
| | | cancelButtonText: '取消', |
| | | type: 'warning', |
| | | }) |
| | | .then(() => { |
| | | resetPass(info).then(() => { |
| | | this.$message.success('密码已重置为默认值'); |
| | | stateChange (info) { |
| | | saveOrUpdate(info).then(() => { |
| | | const successMessage = this.$t('updateSuccessMessage'); |
| | | this.$message.success(successMessage); |
| | | }); |
| | | }) |
| | | .catch(() => { |
| | | // 用户取消重置密码操作 |
| | | }); |
| | | }, |
| | | showEditDialog(id) { |
| | | getById({id: id}).then(res => { |
| | | }, |
| | | resetPassword (info) { |
| | | this.$confirm('确认重置密码为默认值吗?', '重置密码', { |
| | | confirmButtonText: '确定', |
| | | cancelButtonText: '取消', |
| | | type: 'warning', |
| | | }) |
| | | .then(() => { |
| | | resetPass(info).then(() => { |
| | | this.$message.success('密码已重置为默认值'); |
| | | }); |
| | | }) |
| | | .catch(() => { |
| | | // 用户取消重置密码操作 |
| | | }); |
| | | }, |
| | | showEditDialog (id) { |
| | | getById({ id: id }).then(res => { |
| | | this.editUserForm = res.data; |
| | | this.editDialogVisible = true; |
| | | }); |
| | | |
| | | |
| | | |
| | | select().then(res => { |
| | | this.roleList = res.data; |
| | | }); |
| | | this.roleList = res.data; |
| | | }); |
| | | }, |
| | | removeUserById(user) { |
| | | removeUserById (user) { |
| | | // 弹框询问用户是否删除分类 |
| | | this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', { |
| | | confirmButtonText: '确定', |
| | | cancelButtonText: '取消', |
| | | type: 'warning' |
| | | }).then(() => { |
| | | removeById({id: user.id}).then(() => { |
| | | removeById({ id: user.id }).then(() => { |
| | | // 重新获取分类列表 |
| | | this.getUserList(); |
| | | this.$message.success("删除用户成功"); |
| | |
| | | this.$message.info('已取消删除'); |
| | | }); |
| | | }, |
| | | handleSizeChange(newSize) { |
| | | handleSizeChange (newSize) { |
| | | this.queryInfo.pageSize = newSize; |
| | | this.getUserList() |
| | | }, |
| | | handleCurrentChange(newPage) { |
| | | handleCurrentChange (newPage) { |
| | | this.queryInfo.pageNum = newPage; |
| | | this.getUserList() |
| | | }, |
| | | addDialogClosed() { |
| | | addDialogClosed () { |
| | | this.$refs['addUserRef'].resetFields(); |
| | | }, |
| | | addUser() { |
| | | addUser () { |
| | | this.$refs.addUserRef.validate(async valid => { |
| | | if (!valid) return; |
| | | saveOrUpdate(this.addUserForm).then(() => { |
| | |
| | | }); |
| | | }) |
| | | }, |
| | | editUserInfo() { |
| | | editUserInfo () { |
| | | this.$refs.addCategoryRef.validate(async valid => { |
| | | if (!valid) return; |
| | | |
| | | |
| | | saveOrUpdate(this.editUserForm).then(() => { |
| | | const 修改用户成功 = this.$t('修改用户成功'); |
| | | this.$message.success(修改用户成功); |