|
@@ -10,11 +10,11 @@
|
|
<hc-icon class="text-white" name="add" />
|
|
<hc-icon class="text-white" name="add" />
|
|
<span class="text-white">新增</span>
|
|
<span class="text-white">新增</span>
|
|
</el-button>
|
|
</el-button>
|
|
- <el-button :disabled="tableCheckedKeys.length === 0" color="#FF6C6C" @click="rowDelClick">
|
|
|
|
|
|
+ <el-button :disabled="tableCheckedKeys.length === 0" color="#FF6C6C" :loading="batchDelLoad" @click="batchDelClick">
|
|
<hc-icon class="text-white" name="delete-bin-2" />
|
|
<hc-icon class="text-white" name="delete-bin-2" />
|
|
<span class="text-white">删除</span>
|
|
<span class="text-white">删除</span>
|
|
</el-button>
|
|
</el-button>
|
|
- <el-button v-yes-com:[refreshPassword] :disabled="tableCheckedKeys.length === 0" type="info" yes-com-text="是否重置密码为 123456">
|
|
|
|
|
|
+ <el-button v-yes-com:[refreshPassword1] :disabled="tableCheckedKeys.length === 0" type="info" yes-com-text="是否重置密码为 123456">
|
|
<hc-icon name="refresh" />
|
|
<hc-icon name="refresh" />
|
|
<span>重置密码</span>
|
|
<span>重置密码</span>
|
|
</el-button>
|
|
</el-button>
|
|
@@ -23,7 +23,7 @@
|
|
<span class="text-white">导出</span>
|
|
<span class="text-white">导出</span>
|
|
</el-button>
|
|
</el-button>
|
|
</template>
|
|
</template>
|
|
- <hc-table :column="tableColumn" :datas="tableData" class="user-page-table" is-check @selection-change="tableSelectionChange">
|
|
|
|
|
|
+ <hc-table :column="tableColumn" :datas="tableData" class="user-page-table" is-check :loading="tableLoading" @selection-change="tableSelectionChange">
|
|
<template #action="{ row }">
|
|
<template #action="{ row }">
|
|
<el-link type="success" @click="rowEditClick(row)">
|
|
<el-link type="success" @click="rowEditClick(row)">
|
|
<hc-icon name="edit" />编辑
|
|
<hc-icon name="edit" />编辑
|
|
@@ -38,27 +38,33 @@
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<!-- 新增编辑 -->
|
|
<!-- 新增编辑 -->
|
|
- <hc-dialog v-model="addModal" title="新增" widths="50rem">
|
|
|
|
|
|
+ <hc-dialog v-model="addModal" :title="modalTitle" widths="50rem" :loading="addsaveLoading" @save="modalSave">
|
|
<hc-icon class="font-bold" name="user" style="font-size: 18px;" />
|
|
<hc-icon class="font-bold" name="user" style="font-size: 18px;" />
|
|
<span class="font-bold">基础信息</span>
|
|
<span class="font-bold">基础信息</span>
|
|
<el-divider style="margin-top: 10px;" />
|
|
<el-divider style="margin-top: 10px;" />
|
|
- <el-form :inline="true" :model="baseForm" :rules="baseFormRules" label-width="auto">
|
|
|
|
|
|
+ <el-form ref="formRef" :inline="true" :model="baseForm" :rules="baseFormRules" label-width="auto">
|
|
<div class="hc-form-item">
|
|
<div class="hc-form-item">
|
|
- <el-form-item label="登陆账户:" prop="user">
|
|
|
|
- <el-input v-model="baseForm.user" clearable placeholder="请输入" />
|
|
|
|
|
|
+ <el-form-item label="登陆账户:" prop="account">
|
|
|
|
+ <el-input v-model="baseForm.account" clearable placeholder="请输入" />
|
|
</el-form-item>
|
|
</el-form-item>
|
|
<el-form-item label="密码:" prop="password">
|
|
<el-form-item label="密码:" prop="password">
|
|
<el-input v-model="baseForm.password" clearable placeholder="请输入" show-password type="password" />
|
|
<el-input v-model="baseForm.password" clearable placeholder="请输入" show-password type="password" />
|
|
</el-form-item>
|
|
</el-form-item>
|
|
</div>
|
|
</div>
|
|
<div class="hc-form-item">
|
|
<div class="hc-form-item">
|
|
- <el-form-item label="用户名:" prop="username">
|
|
|
|
- <el-input v-model="baseForm.username" clearable placeholder="请输入" />
|
|
|
|
|
|
+ <el-form-item label="用户名:" prop="realName">
|
|
|
|
+ <el-input v-model="baseForm.realName" clearable placeholder="请输入" />
|
|
</el-form-item>
|
|
</el-form-item>
|
|
- <el-form-item label="角色:" prop="role">
|
|
|
|
- <el-select v-model="baseForm.role" placeholder="请选择">
|
|
|
|
- <el-option v-for="item in roleOptions" :key="item.value" :label="item.label" :value="item.value" />
|
|
|
|
- </el-select>
|
|
|
|
|
|
+ <el-form-item label="角色:" prop="roleId">
|
|
|
|
+ <!-- <el-option v-for="item in roleOptions" :key="item.value" :label="item.label" :value="item.value" /> -->
|
|
|
|
+ <el-tree-select
|
|
|
|
+ v-model="roleIdArr"
|
|
|
|
+ :props="defaultProps"
|
|
|
|
+ :data="roleOptions"
|
|
|
|
+ multiple
|
|
|
|
+ :render-after-expand="false"
|
|
|
|
+ style="width: 240px"
|
|
|
|
+ />
|
|
</el-form-item>
|
|
</el-form-item>
|
|
</div>
|
|
</div>
|
|
</el-form>
|
|
</el-form>
|
|
@@ -67,27 +73,33 @@
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
<script setup>
|
|
-import { ref } from 'vue'
|
|
|
|
|
|
+import { onMounted, ref } from 'vue'
|
|
import { HcDelMsg } from 'hc-vue3-ui'
|
|
import { HcDelMsg } from 'hc-vue3-ui'
|
|
|
|
+import { arrToId, formValidate, getArrValue, getObjValue } from 'js-fast-way'
|
|
|
|
+import { add, getList, getUser, remove, resetPassword, update } from '~api/system/user.js'
|
|
|
|
+import { getRoleTree } from '~api/system/role.js'
|
|
|
|
|
|
|
|
+onMounted(()=>{
|
|
|
|
+ getTableData()
|
|
|
|
+})
|
|
const tableColumn = [
|
|
const tableColumn = [
|
|
- { key: 'key1', name: '登陆账户', align: 'center' },
|
|
|
|
- { key: 'key2', name: '用户名', align: 'center' },
|
|
|
|
- { key: 'key3', name: '角色', align: 'center' },
|
|
|
|
|
|
+ { key: 'account', name: '登陆账户', align: 'center' },
|
|
|
|
+ { key: 'realName', name: '用户名', align: 'center' },
|
|
|
|
+ { key: 'roleName', name: '角色', align: 'center' },
|
|
{ key: 'action', name: '操作', align: 'center', width: '140' },
|
|
{ key: 'action', name: '操作', align: 'center', width: '140' },
|
|
]
|
|
]
|
|
-const tableData = ref([
|
|
|
|
- { key1: 'admin', key2: 'xxx', key3: '超级管理员' },
|
|
|
|
- { key1: '13028304756', key2: 'aaa', key3: '角色' },
|
|
|
|
-])
|
|
|
|
|
|
+const tableData = ref([])
|
|
|
|
+const tableLoading = ref(false)
|
|
|
|
|
|
const addModal = ref(false)
|
|
const addModal = ref(false)
|
|
const addClick = () => {
|
|
const addClick = () => {
|
|
|
|
+ modalTitle.value = '新增'
|
|
addModal.value = true
|
|
addModal.value = true
|
|
|
|
+ getRoleOptions()
|
|
}
|
|
}
|
|
-const baseForm = ref({ user: '', username: '', password: '', role: '' })
|
|
|
|
|
|
+const baseForm = ref({ account: '', realName: '', password: '', roleId: '' })
|
|
const baseFormRules = {
|
|
const baseFormRules = {
|
|
- user: {
|
|
|
|
|
|
+ account: {
|
|
required: true,
|
|
required: true,
|
|
trigger: 'blur',
|
|
trigger: 'blur',
|
|
message: '请输入登陆账户',
|
|
message: '请输入登陆账户',
|
|
@@ -97,12 +109,12 @@ const baseFormRules = {
|
|
trigger: 'blur',
|
|
trigger: 'blur',
|
|
message: '请输入密码',
|
|
message: '请输入密码',
|
|
},
|
|
},
|
|
- username: {
|
|
|
|
|
|
+ realName: {
|
|
required: true,
|
|
required: true,
|
|
trigger: 'blur',
|
|
trigger: 'blur',
|
|
message: '请输入用户名',
|
|
message: '请输入用户名',
|
|
},
|
|
},
|
|
- role: {
|
|
|
|
|
|
+ roleId: {
|
|
required: true,
|
|
required: true,
|
|
trigger: 'blur',
|
|
trigger: 'blur',
|
|
message: '请选择角色',
|
|
message: '请选择角色',
|
|
@@ -120,8 +132,18 @@ const searchClick = () => {
|
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
-const getTableData = () => {
|
|
|
|
-
|
|
|
|
|
|
+const getTableData = async () => {
|
|
|
|
+ tableLoading.value = true
|
|
|
|
+ const { error, code, data } = await getList({
|
|
|
|
+ ...searchForm.value,
|
|
|
|
+ })
|
|
|
|
+ tableLoading.value = false
|
|
|
|
+ if (!error && code === 200) {
|
|
|
|
+ tableData.value = getArrValue(data['records'])
|
|
|
|
+ } else {
|
|
|
|
+ tableData.value = []
|
|
|
|
+ }
|
|
|
|
+
|
|
}
|
|
}
|
|
//分页被点击
|
|
//分页被点击
|
|
const pageChange = ({ current, size }) => {
|
|
const pageChange = ({ current, size }) => {
|
|
@@ -129,29 +151,123 @@ const pageChange = ({ current, size }) => {
|
|
searchForm.value.size = size
|
|
searchForm.value.size = size
|
|
getTableData()
|
|
getTableData()
|
|
}
|
|
}
|
|
-const rowEditClick = (row) => {
|
|
|
|
|
|
+const modalTitle = ref('新增')
|
|
|
|
+const rowEditClick = async (row) => {
|
|
|
|
+ modalTitle.value = '编辑'
|
|
|
|
+ getRoleOptions().then()
|
|
addModal.value = true
|
|
addModal.value = true
|
|
- baseForm.value = row
|
|
|
|
|
|
+ roleIdArr.value = row.roleId.split(',')
|
|
|
|
+ const { error, code, data } = await getUser( row.id)
|
|
|
|
+ if (!error && code === 200) {
|
|
|
|
+ baseForm.value = getObjValue(data)
|
|
|
|
+ } else {
|
|
|
|
+ baseForm.value = {}
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+const batchDelClick = ()=>{
|
|
|
|
+ let ids = arrToId(tableCheckedKeys.value)
|
|
|
|
+ HcDelMsg(async (resolve) => {
|
|
|
|
+ await removeUser(ids)
|
|
|
|
+ resolve() //关闭弹窗的回调
|
|
|
|
+ })
|
|
|
|
+
|
|
}
|
|
}
|
|
-const rowDelClick = () => {
|
|
|
|
|
|
+const batchDelLoad = ref(false)
|
|
|
|
+const rowDelClick = (row) => {
|
|
HcDelMsg(async (resolve) => {
|
|
HcDelMsg(async (resolve) => {
|
|
- // await removeContractTreeNode()
|
|
|
|
|
|
+ await removeUser(row.id)
|
|
resolve() //关闭弹窗的回调
|
|
resolve() //关闭弹窗的回调
|
|
})
|
|
})
|
|
}
|
|
}
|
|
-const refreshPassword = async (_, resolve) => {
|
|
|
|
|
|
+const removeUser = async (ids) => {
|
|
|
|
+ const { error, code, msg } = await remove(
|
|
|
|
+ ids,
|
|
|
|
+ )
|
|
|
|
+ if (!error && code === 200) {
|
|
|
|
+ window?.$message?.success('删除成功')
|
|
|
|
+ getTableData()
|
|
|
|
+ } else {
|
|
|
|
+ window.$message.error(msg ?? '操作失败')
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+const refreshPassword1 = async (_, resolve) => {
|
|
|
|
+ if (tableCheckedKeys.value.length !== 1) {
|
|
|
|
+ return
|
|
|
|
+ }
|
|
//这里可以写一些操作
|
|
//这里可以写一些操作
|
|
|
|
+ await resetPasswordClick(tableCheckedKeys.value[0].id)
|
|
resolve() //这个一定要存在,否则不会关闭弹窗
|
|
resolve() //这个一定要存在,否则不会关闭弹窗
|
|
}
|
|
}
|
|
|
|
+const resetPasswordClick = async (id)=>{
|
|
|
|
+ const { error, code, msg } = await resetPassword(
|
|
|
|
+ id,
|
|
|
|
+ )
|
|
|
|
+ if (!error && code === 200) {
|
|
|
|
+ window?.$message?.success(msg)
|
|
|
|
+ getTableData()
|
|
|
|
+ } else {
|
|
|
|
+ window.$message.error(msg ?? '操作失败')
|
|
|
|
+ }
|
|
|
|
+}
|
|
const exportClick = async (_, resolve) => {
|
|
const exportClick = async (_, resolve) => {
|
|
//这里可以写一些操作
|
|
//这里可以写一些操作
|
|
resolve() //这个一定要存在,否则不会关闭弹窗
|
|
resolve() //这个一定要存在,否则不会关闭弹窗
|
|
}
|
|
}
|
|
-const roleOptions = ref([
|
|
|
|
- { value: 'Option1', label: 'Option1' },
|
|
|
|
- { value: 'Option2', label: 'Option2' },
|
|
|
|
- { value: 'Option3', label: 'Option3' },
|
|
|
|
- { value: 'Option4', label: 'Option4' },
|
|
|
|
- { value: 'Option5', label: 'Option5' },
|
|
|
|
-])
|
|
|
|
|
|
+const formRef = ref(null)
|
|
|
|
+const roleIdArr = ref([])
|
|
|
|
+const addsaveLoading = ref(false)
|
|
|
|
+const modalSave = async ()=>{
|
|
|
|
+ const isValidate = await formValidate(formRef.value)
|
|
|
|
+ if (!isValidate) return false
|
|
|
|
+
|
|
|
|
+ addsaveLoading.value = true
|
|
|
|
+ console.log(baseForm.value, 'baseForm.value')
|
|
|
|
+
|
|
|
|
+ if (modalTitle.value === '编辑') {
|
|
|
|
+ const { error, code, msg } = await update({
|
|
|
|
+ ...baseForm.value,
|
|
|
|
+ roleId:roleIdArr.value.join(','),
|
|
|
|
+ })
|
|
|
|
+ //判断状态
|
|
|
|
+ addsaveLoading.value = false
|
|
|
|
+ if (!error && code === 200) {
|
|
|
|
+ window?.$message?.success(msg)
|
|
|
|
+ getTableData()
|
|
|
|
+ } else {
|
|
|
|
+ window.$message.error(msg ?? '操作失败')
|
|
|
|
+ }
|
|
|
|
+ } else {
|
|
|
|
+ const { error, code, msg } = await add({
|
|
|
|
+ ...baseForm.value,
|
|
|
|
+ roleId:roleIdArr.value.join(','),
|
|
|
|
+
|
|
|
|
+ })
|
|
|
|
+ //判断状态
|
|
|
|
+ addsaveLoading.value = false
|
|
|
|
+ if (!error && code === 200) {
|
|
|
|
+ window?.$message?.success(msg)
|
|
|
|
+ getTableData()
|
|
|
|
+ } else {
|
|
|
|
+ window.$message.error(msg ?? '操作失败')
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+}
|
|
|
|
+const roleOptions = ref([])
|
|
|
|
+const defaultProps = {
|
|
|
|
+ children: 'children',
|
|
|
|
+ label: 'title',
|
|
|
|
+}
|
|
|
|
+const getRoleOptions = async () => {
|
|
|
|
+ const { error, code, data } = await getRoleTree('000000')
|
|
|
|
+ if (!error && code === 200) {
|
|
|
|
+ roleOptions.value = getArrValue(data)
|
|
|
|
+ console.log(roleOptions.value, 'roleOptions.value')
|
|
|
|
+ } else {
|
|
|
|
+ roleOptions.value = []
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+}
|
|
</script>
|
|
</script>
|