fix : 修复实施图片
This commit is contained in:
@@ -1,165 +1,165 @@
|
||||
<template>
|
||||
<fvSearchForm :searchConfig="searchConfig" @search="search" style="margin-left: 16px" ></fvSearchForm>
|
||||
<fvTable ref="tableIns" :tableConfig="tableConfig" @headBtnClick="headBtnClick"
|
||||
@selectionChange="selectionChange"></fvTable>
|
||||
<user-picker :multiple="true" ref="whiteUserRef" title="请选择人员"
|
||||
v-model:value="whiteUserList" @ok="whiteUserPickerOk"/>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import UserPicker from "@/views/workflow/process/common/UserPicker.vue";
|
||||
import {addWhiteUser, delWhiteUser} from "@/api/user/user";
|
||||
import {ElMessage} from "element-plus";
|
||||
const tableIns = ref()
|
||||
const router = useRouter()
|
||||
const whiteUserRef = ref()
|
||||
const whiteUserList = ref([])
|
||||
const selectUser = ref([])
|
||||
const searchConfig = ref([
|
||||
{
|
||||
label: '名称',
|
||||
prop: 'name',
|
||||
component:'el-input',
|
||||
props: {
|
||||
placeholder: '请输入名称',
|
||||
clearable: true,
|
||||
filterable: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '电话',
|
||||
prop: 'phone',
|
||||
component:'el-input',
|
||||
props: {
|
||||
placeholder: '请输入电话',
|
||||
clearable: true,
|
||||
filterable: true,
|
||||
},
|
||||
},
|
||||
])
|
||||
const tableConfig = reactive({
|
||||
columns: [
|
||||
{
|
||||
type: 'selection',
|
||||
prop: 'selection',
|
||||
},
|
||||
{
|
||||
prop: 'index',
|
||||
type: 'index',
|
||||
label: '序号',
|
||||
align: 'center',
|
||||
width:60,
|
||||
index: index => {
|
||||
return (tableIns.value.getQuery().pageNum - 1) * tableIns.value.getQuery().pageSize + index + 1
|
||||
}
|
||||
},
|
||||
{
|
||||
prop: 'name',
|
||||
label: '名称',
|
||||
align: 'center',
|
||||
width: 150
|
||||
},
|
||||
{
|
||||
prop: 'phone',
|
||||
label: '手机号码',
|
||||
align: 'center',
|
||||
width: 150
|
||||
},
|
||||
{
|
||||
prop: 'companyName',
|
||||
label: '公司名称',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'accountType',
|
||||
label: '主次账号',
|
||||
align: 'center',
|
||||
showOverflowTooltip: false,
|
||||
currentRender: ({row, index}) => (<Tag dictType={'account_type'} value={row.accountType}/>)
|
||||
},
|
||||
{
|
||||
prop: 'oper',
|
||||
label: '操作',
|
||||
align: 'center',
|
||||
showOverflowTooltip: false,
|
||||
currentRender: ({row, index}) => {
|
||||
return (
|
||||
<div style={{width: '100%'}}>
|
||||
{
|
||||
<popover-delete name={row.name} type={'审批白名单'} btnType={'danger'}
|
||||
onDelete={() => deleteWhiteUser(row)}/>
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
],
|
||||
api: '/admin/approve/white/list',
|
||||
params: {},
|
||||
btns: [
|
||||
{name: '新增', key: 'add', color: '#DED0B2'},
|
||||
{name: '删除', key: 'del', type:'danger'},
|
||||
]
|
||||
})
|
||||
const whiteUserPickerOk = (userList) => {
|
||||
whiteUserList.value = userList.map(item => item.id)
|
||||
addUser()
|
||||
}
|
||||
const addUser=async () => {
|
||||
const res = await addWhiteUser({
|
||||
userIds: whiteUserList.value
|
||||
})
|
||||
console.log('res',res)
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success('新增成功')
|
||||
tableIns.value.refresh()
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
}
|
||||
const search = (val) => {
|
||||
tableConfig.params = val
|
||||
tableIns.value.refresh()
|
||||
}
|
||||
const selectionChange = (data) => {
|
||||
selectUser.value=data.map(item=>item.userId)
|
||||
}
|
||||
const headBtnClick = (key) => {
|
||||
switch (key) {
|
||||
case 'add':
|
||||
handleAddWhiteUser()
|
||||
break;
|
||||
case 'del':
|
||||
handleDeleteWhiteUser(selectUser.value)
|
||||
break;
|
||||
}
|
||||
}
|
||||
const handleAddWhiteUser = () => {
|
||||
whiteUserRef.value.showUserPicker()
|
||||
}
|
||||
const handleDeleteWhiteUser = async (user) => {
|
||||
// if (selectUser.value.length === 0) {
|
||||
// ElMessage.warning('请选择要删除的用户')
|
||||
// return
|
||||
// }
|
||||
const res = await delWhiteUser({
|
||||
userIds: user
|
||||
})
|
||||
console.log('res',res)
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success('删除成功')
|
||||
tableIns.value.refresh()
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
}
|
||||
const deleteWhiteUser=(row)=>{
|
||||
console.log('row',row)
|
||||
handleDeleteWhiteUser([row.userId])
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
<template>
|
||||
<fvSearchForm :searchConfig="searchConfig" @search="search" style="margin-left: 16px" ></fvSearchForm>
|
||||
<fvTable ref="tableIns" :tableConfig="tableConfig" @headBtnClick="headBtnClick"
|
||||
@selectionChange="selectionChange"></fvTable>
|
||||
<user-picker :multiple="true" ref="whiteUserRef" title="请选择人员"
|
||||
v-model:value="whiteUserList" @ok="whiteUserPickerOk"/>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import UserPicker from "@/views/workflow/process/common/UserPicker.vue";
|
||||
import {addWhiteUser, delWhiteUser} from "@/api/user/user";
|
||||
import {ElMessage} from "element-plus";
|
||||
const tableIns = ref()
|
||||
const router = useRouter()
|
||||
const whiteUserRef = ref()
|
||||
const whiteUserList = ref([])
|
||||
const selectUser = ref([])
|
||||
const searchConfig = ref([
|
||||
{
|
||||
label: '名称',
|
||||
prop: 'name',
|
||||
component:'el-input',
|
||||
props: {
|
||||
placeholder: '请输入名称',
|
||||
clearable: true,
|
||||
filterable: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '电话',
|
||||
prop: 'phone',
|
||||
component:'el-input',
|
||||
props: {
|
||||
placeholder: '请输入电话',
|
||||
clearable: true,
|
||||
filterable: true,
|
||||
},
|
||||
},
|
||||
])
|
||||
const tableConfig = reactive({
|
||||
columns: [
|
||||
{
|
||||
type: 'selection',
|
||||
prop: 'selection',
|
||||
},
|
||||
{
|
||||
prop: 'index',
|
||||
type: 'index',
|
||||
label: '序号',
|
||||
align: 'center',
|
||||
width:60,
|
||||
index: index => {
|
||||
return (tableIns.value.getQuery().pageNum - 1) * tableIns.value.getQuery().pageSize + index + 1
|
||||
}
|
||||
},
|
||||
{
|
||||
prop: 'name',
|
||||
label: '名称',
|
||||
align: 'center',
|
||||
width: 150
|
||||
},
|
||||
{
|
||||
prop: 'phone',
|
||||
label: '手机号码',
|
||||
align: 'center',
|
||||
width: 150
|
||||
},
|
||||
{
|
||||
prop: 'companyName',
|
||||
label: '公司名称',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'accountType',
|
||||
label: '主次账号',
|
||||
align: 'center',
|
||||
showOverflowTooltip: false,
|
||||
currentRender: ({row, index}) => (<Tag dictType={'account_type'} value={row.accountType}/>)
|
||||
},
|
||||
{
|
||||
prop: 'oper',
|
||||
label: '操作',
|
||||
align: 'center',
|
||||
showOverflowTooltip: false,
|
||||
currentRender: ({row, index}) => {
|
||||
return (
|
||||
<div style={{width: '100%'}}>
|
||||
{
|
||||
<popover-delete name={row.name} type={'审批白名单'} btnType={'danger'}
|
||||
onDelete={() => deleteWhiteUser(row)}/>
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
],
|
||||
api: '/admin/approve/white/list',
|
||||
params: {},
|
||||
btns: [
|
||||
{name: '新增', key: 'add', color: '#DED0B2'},
|
||||
{name: '删除', key: 'del', type:'danger'},
|
||||
]
|
||||
})
|
||||
const whiteUserPickerOk = (userList) => {
|
||||
whiteUserList.value = userList.map(item => item.id)
|
||||
addUser()
|
||||
}
|
||||
const addUser=async () => {
|
||||
const res = await addWhiteUser({
|
||||
userIds: whiteUserList.value
|
||||
})
|
||||
console.log('res',res)
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success('新增成功')
|
||||
tableIns.value.refresh()
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
}
|
||||
const search = (val) => {
|
||||
tableConfig.params = val
|
||||
tableIns.value.refresh()
|
||||
}
|
||||
const selectionChange = (data) => {
|
||||
selectUser.value=data.map(item=>item.userId)
|
||||
}
|
||||
const headBtnClick = (key) => {
|
||||
switch (key) {
|
||||
case 'add':
|
||||
handleAddWhiteUser()
|
||||
break;
|
||||
case 'del':
|
||||
handleDeleteWhiteUser(selectUser.value)
|
||||
break;
|
||||
}
|
||||
}
|
||||
const handleAddWhiteUser = () => {
|
||||
whiteUserRef.value.showUserPicker()
|
||||
}
|
||||
const handleDeleteWhiteUser = async (user) => {
|
||||
// if (selectUser.value.length === 0) {
|
||||
// ElMessage.warning('请选择要删除的用户')
|
||||
// return
|
||||
// }
|
||||
const res = await delWhiteUser({
|
||||
userIds: user
|
||||
})
|
||||
console.log('res',res)
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success('删除成功')
|
||||
tableIns.value.refresh()
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
}
|
||||
const deleteWhiteUser=(row)=>{
|
||||
console.log('row',row)
|
||||
handleDeleteWhiteUser([row.userId])
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,314 +1,314 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form :model="queryParams" ref="queryForm" class="search-form select-form"
|
||||
style="margin-top: 18px;margin-left: 16px">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-form-item label="参数名称" prop="configName">
|
||||
<el-input v-model="queryParams.configName" placeholder="请输入参数名称" clearable @keyup.enter.native="getList"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="5" :offset="1">
|
||||
<el-form-item label="参数键名" prop="configKey">
|
||||
<el-input v-model="queryParams.configKey" placeholder="请输入参数键名" clearable @keyup.enter.native="getList"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="5" :offset="1">
|
||||
<el-form-item label="系统内置" prop="configType">
|
||||
<el-select v-model="queryParams.configType" placeholder="请选择系统内置" clearable filterable remote @change="getList">
|
||||
<el-option
|
||||
v-for="dict in cacheStore.getDict('yes_no')"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6" :offset="1">
|
||||
<el-form-item>
|
||||
<el-button color="#DED0B2" @click="getList" :icon="Search">搜索</el-button>
|
||||
<el-button @click="handleReset" :icon="Refresh">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div class="query-btn">
|
||||
<el-button color="#DED0B2" v-perm="['admin:config:add']" @click="handleAdd">新增</el-button>
|
||||
<el-button type="danger" v-perm="['admin:config:del']" @click="handleMoreDelete(configIds,configNameList)"
|
||||
:disabled="disabled">删除
|
||||
</el-button>
|
||||
<!-- <el-button type="warning" v-perm="['admin:config:export']" @click="handleExport" :icon="Download" plain>导出-->
|
||||
<!-- </el-button>-->
|
||||
</div>
|
||||
<div class="fv-table">
|
||||
<el-table
|
||||
:data="list"
|
||||
row-key="configId"
|
||||
:lazy="true"
|
||||
ref="singleTable"
|
||||
v-loading="loading"
|
||||
@select="handleSelect"
|
||||
v-tabh
|
||||
>
|
||||
<el-table-column type="selection" width="55"/>
|
||||
<el-table-column label="序号" type="index" width="60" align="center"/>
|
||||
<el-table-column prop="configName" label="参数名称" align="center"/>
|
||||
<el-table-column prop="configKey" label="参数键名" align="center"/>
|
||||
<el-table-column prop="configValue" label="参数键值" align="center"/>
|
||||
<el-table-column prop="configType" label="系统内置" align="center">
|
||||
<template #default="scope">
|
||||
<tag dict-type="yes_no" :value="scope.row.configType"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="remark" label="备注" align="center"/>
|
||||
<el-table-column label="操作" align="center">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" size="mini" v-perm="['admin:config:edit']"
|
||||
@click="handleEdit(scope.row.configId)" link>编辑
|
||||
</el-button>
|
||||
<popover-delete :name="scope.row.dsName" :type="'参数配置表'" :perm="['admin:config:del']"
|
||||
@delete="handleDelete(scope.row.configId)"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<paging :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize" :page-sizes="[10, 20, 30, 40,50]"
|
||||
:total="total" @changeSize="handleSizeChange" @goPage="handleCurrentChange"/>
|
||||
|
||||
<el-dialog v-model="isVisited" :title="title" width="900px">
|
||||
<el-form :model="form" ref="formInstance" :rules="formRules" label-width="100px" class="dialog-form">
|
||||
<el-row>
|
||||
<el-col :span="11">
|
||||
<el-form-item label="参数名称" prop="configName">
|
||||
<el-input v-model="form.configName" placeholder="请输入参数名称"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11" :offset="2">
|
||||
<el-form-item label="参数键名" prop="configKey">
|
||||
<el-input v-model="form.configKey" placeholder="请输入参数键名"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11">
|
||||
<el-form-item label="参数键值" prop="configValue">
|
||||
<el-input v-model="form.configValue" placeholder="请输入参数值"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11" :offset="2">
|
||||
<el-form-item label="系统内置" prop="configType">
|
||||
<el-select v-model="form.configType" placeholder="请选择系统内置" clearable filterable>
|
||||
<el-option
|
||||
v-for="dict in cacheStore.getDict('yes_no')"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11">
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" placeholder="请输备注"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span>
|
||||
<el-button @click="handleCancel">取消</el-button>
|
||||
<el-button type="primary" @click="handleSubmit(formInstance)">确定</el-button>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {getConfigList, getConfigDetails, addConfig, editConfig, delConfig} from "@/api/system/config";
|
||||
import {Search, Refresh, Delete, Plus, Edit, Download} from '@element-plus/icons-vue'
|
||||
import {ElMessage, ElMessageBox} from "element-plus";
|
||||
import {useCacheStore} from '@/stores/cache.js'
|
||||
import Paging from "@/components/pagination/index.vue";
|
||||
|
||||
const cacheStore = useCacheStore()
|
||||
import Tag from '@/components/Tag.vue'
|
||||
import {downLoadExcel} from "@/utils/downloadZip";
|
||||
//查询参数
|
||||
const queryParams = reactive({
|
||||
configName: '',
|
||||
configKey: '',
|
||||
configType: undefined,
|
||||
})
|
||||
//页面信息
|
||||
const pageInfo = reactive({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
})
|
||||
const disabled = ref(true)
|
||||
const list = ref([])
|
||||
const queryForm = ref([])
|
||||
const configIds = ref([])
|
||||
const configNameList = ref([])
|
||||
const loading = ref(true)
|
||||
const total = ref()
|
||||
const title = ref('')
|
||||
const isVisited = ref(false)
|
||||
const form = ref()
|
||||
const formInstance = ref()
|
||||
const formRules = ref({
|
||||
configName: [
|
||||
{required: true, message: "参数名称不能为空", trigger: "blur"},
|
||||
],
|
||||
configKey: [
|
||||
{required: true, message: "参数键名不能为空", trigger: "blur"},
|
||||
],
|
||||
configValue: [
|
||||
{required: true, message: "参数键值不能为空", trigger: "blur"},
|
||||
],
|
||||
configType: [
|
||||
{required: true, message: "系统内置不能为空", trigger: "change"},
|
||||
],
|
||||
})
|
||||
|
||||
//重置搜索
|
||||
const handleReset = () => {
|
||||
queryForm.value.resetFields()
|
||||
getList()
|
||||
}
|
||||
//获取数据
|
||||
const getList = async () => {
|
||||
let params = {
|
||||
...queryParams,
|
||||
...pageInfo
|
||||
}
|
||||
loading.value = true
|
||||
getConfigList(params).then(res => {
|
||||
if (res.code === 1000) {
|
||||
list.value = res.data.rows
|
||||
total.value = res.data.total
|
||||
loading.value = false
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
//重置from表单
|
||||
const restFrom = () => {
|
||||
form.value = {
|
||||
configName: null,
|
||||
configKey: null,
|
||||
configValue: null,
|
||||
configType: null,
|
||||
remark: null
|
||||
}
|
||||
}
|
||||
//取消
|
||||
const handleCancel = () => {
|
||||
restFrom()
|
||||
isVisited.value = false
|
||||
}
|
||||
//提交
|
||||
const handleSubmit = async (instance) => {
|
||||
if (!instance) return
|
||||
instance.validate(async (valid) => {
|
||||
if (!valid) return
|
||||
if (title.value === '新增参数配置表') {
|
||||
addConfig(form.value).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg)
|
||||
getList()
|
||||
isVisited.value = false
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
editConfig(form.value).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg)
|
||||
getList()
|
||||
isVisited.value = false
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
//添加
|
||||
const handleAdd = async () => {
|
||||
restFrom()
|
||||
title.value = "新增参数配置表"
|
||||
isVisited.value = true
|
||||
nextTick(() => {
|
||||
// 清空校验
|
||||
formInstance.value.clearValidate()
|
||||
})
|
||||
}
|
||||
//修改
|
||||
const handleEdit = async (configId) => {
|
||||
restFrom()
|
||||
getConfigDetails(configId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
form.value = res.data
|
||||
title.value = "编辑参数配置表"
|
||||
isVisited.value = true
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
nextTick(() => {
|
||||
// 清空校验
|
||||
formInstance.value.clearValidate()
|
||||
})
|
||||
}
|
||||
//导出excel
|
||||
const handleExport = () => {
|
||||
downLoadExcel('/admin/config/export', {...queryParams})
|
||||
}
|
||||
|
||||
//勾选table数据行的 Checkbox
|
||||
const handleSelect = async (selection) => {
|
||||
if (selection.length !== 0) {
|
||||
disabled.value = false
|
||||
configIds.value = selection.map(item => item.configId).join()
|
||||
configNameList.value = selection.map(item => item.configName).join()
|
||||
} else {
|
||||
disabled.value = true
|
||||
}
|
||||
}
|
||||
|
||||
//切换每页显示条数
|
||||
const handleSizeChange = async (val) => {
|
||||
pageInfo.pageSize = val
|
||||
await getList()
|
||||
}
|
||||
|
||||
//点击页码进行分页功能
|
||||
const handleCurrentChange = async (val) => {
|
||||
pageInfo.pageNum = val
|
||||
await getList()
|
||||
}
|
||||
const handleMoreDelete = (configId, configName) => {
|
||||
ElMessageBox.confirm(`确认删除名称为${configName}的参数配置表吗?`, '系统提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
handleDelete(configId)
|
||||
})
|
||||
}
|
||||
//删除
|
||||
const handleDelete = async (configId) => {
|
||||
delConfig(configId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg)
|
||||
getList()
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
getList()
|
||||
</script>
|
||||
<template>
|
||||
<div>
|
||||
<el-form :model="queryParams" ref="queryForm" class="search-form select-form"
|
||||
style="margin-top: 18px;margin-left: 16px">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-form-item label="参数名称" prop="configName">
|
||||
<el-input v-model="queryParams.configName" placeholder="请输入参数名称" clearable @keyup.enter.native="getList"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="5" :offset="1">
|
||||
<el-form-item label="参数键名" prop="configKey">
|
||||
<el-input v-model="queryParams.configKey" placeholder="请输入参数键名" clearable @keyup.enter.native="getList"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="5" :offset="1">
|
||||
<el-form-item label="系统内置" prop="configType">
|
||||
<el-select v-model="queryParams.configType" placeholder="请选择系统内置" clearable filterable remote @change="getList">
|
||||
<el-option
|
||||
v-for="dict in cacheStore.getDict('yes_no')"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6" :offset="1">
|
||||
<el-form-item>
|
||||
<el-button color="#DED0B2" @click="getList" :icon="Search">搜索</el-button>
|
||||
<el-button @click="handleReset" :icon="Refresh">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div class="query-btn">
|
||||
<el-button color="#DED0B2" v-perm="['admin:config:add']" @click="handleAdd">新增</el-button>
|
||||
<el-button type="danger" v-perm="['admin:config:del']" @click="handleMoreDelete(configIds,configNameList)"
|
||||
:disabled="disabled">删除
|
||||
</el-button>
|
||||
<!-- <el-button type="warning" v-perm="['admin:config:export']" @click="handleExport" :icon="Download" plain>导出-->
|
||||
<!-- </el-button>-->
|
||||
</div>
|
||||
<div class="fv-table">
|
||||
<el-table
|
||||
:data="list"
|
||||
row-key="configId"
|
||||
:lazy="true"
|
||||
ref="singleTable"
|
||||
v-loading="loading"
|
||||
@select="handleSelect"
|
||||
v-tabh
|
||||
>
|
||||
<el-table-column type="selection" width="55"/>
|
||||
<el-table-column label="序号" type="index" width="60" align="center"/>
|
||||
<el-table-column prop="configName" label="参数名称" align="center"/>
|
||||
<el-table-column prop="configKey" label="参数键名" align="center"/>
|
||||
<el-table-column prop="configValue" label="参数键值" align="center"/>
|
||||
<el-table-column prop="configType" label="系统内置" align="center">
|
||||
<template #default="scope">
|
||||
<tag dict-type="yes_no" :value="scope.row.configType"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="remark" label="备注" align="center"/>
|
||||
<el-table-column label="操作" align="center">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" size="mini" v-perm="['admin:config:edit']"
|
||||
@click="handleEdit(scope.row.configId)" link>编辑
|
||||
</el-button>
|
||||
<popover-delete :name="scope.row.dsName" :type="'参数配置表'" :perm="['admin:config:del']"
|
||||
@delete="handleDelete(scope.row.configId)"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<paging :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize" :page-sizes="[10, 20, 30, 40,50]"
|
||||
:total="total" @changeSize="handleSizeChange" @goPage="handleCurrentChange"/>
|
||||
|
||||
<el-dialog v-model="isVisited" :title="title" width="900px">
|
||||
<el-form :model="form" ref="formInstance" :rules="formRules" label-width="100px" class="dialog-form">
|
||||
<el-row>
|
||||
<el-col :span="11">
|
||||
<el-form-item label="参数名称" prop="configName">
|
||||
<el-input v-model="form.configName" placeholder="请输入参数名称"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11" :offset="2">
|
||||
<el-form-item label="参数键名" prop="configKey">
|
||||
<el-input v-model="form.configKey" placeholder="请输入参数键名"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11">
|
||||
<el-form-item label="参数键值" prop="configValue">
|
||||
<el-input v-model="form.configValue" placeholder="请输入参数值"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11" :offset="2">
|
||||
<el-form-item label="系统内置" prop="configType">
|
||||
<el-select v-model="form.configType" placeholder="请选择系统内置" clearable filterable>
|
||||
<el-option
|
||||
v-for="dict in cacheStore.getDict('yes_no')"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11">
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" placeholder="请输备注"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span>
|
||||
<el-button @click="handleCancel">取消</el-button>
|
||||
<el-button type="primary" @click="handleSubmit(formInstance)">确定</el-button>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {getConfigList, getConfigDetails, addConfig, editConfig, delConfig} from "@/api/system/config";
|
||||
import {Search, Refresh, Delete, Plus, Edit, Download} from '@element-plus/icons-vue'
|
||||
import {ElMessage, ElMessageBox} from "element-plus";
|
||||
import {useCacheStore} from '@/stores/cache.js'
|
||||
import Paging from "@/components/pagination/index.vue";
|
||||
|
||||
const cacheStore = useCacheStore()
|
||||
import Tag from '@/components/Tag.vue'
|
||||
import {downLoadExcel} from "@/utils/downloadZip";
|
||||
//查询参数
|
||||
const queryParams = reactive({
|
||||
configName: '',
|
||||
configKey: '',
|
||||
configType: undefined,
|
||||
})
|
||||
//页面信息
|
||||
const pageInfo = reactive({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
})
|
||||
const disabled = ref(true)
|
||||
const list = ref([])
|
||||
const queryForm = ref([])
|
||||
const configIds = ref([])
|
||||
const configNameList = ref([])
|
||||
const loading = ref(true)
|
||||
const total = ref()
|
||||
const title = ref('')
|
||||
const isVisited = ref(false)
|
||||
const form = ref()
|
||||
const formInstance = ref()
|
||||
const formRules = ref({
|
||||
configName: [
|
||||
{required: true, message: "参数名称不能为空", trigger: "blur"},
|
||||
],
|
||||
configKey: [
|
||||
{required: true, message: "参数键名不能为空", trigger: "blur"},
|
||||
],
|
||||
configValue: [
|
||||
{required: true, message: "参数键值不能为空", trigger: "blur"},
|
||||
],
|
||||
configType: [
|
||||
{required: true, message: "系统内置不能为空", trigger: "change"},
|
||||
],
|
||||
})
|
||||
|
||||
//重置搜索
|
||||
const handleReset = () => {
|
||||
queryForm.value.resetFields()
|
||||
getList()
|
||||
}
|
||||
//获取数据
|
||||
const getList = async () => {
|
||||
let params = {
|
||||
...queryParams,
|
||||
...pageInfo
|
||||
}
|
||||
loading.value = true
|
||||
getConfigList(params).then(res => {
|
||||
if (res.code === 1000) {
|
||||
list.value = res.data.rows
|
||||
total.value = res.data.total
|
||||
loading.value = false
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
//重置from表单
|
||||
const restFrom = () => {
|
||||
form.value = {
|
||||
configName: null,
|
||||
configKey: null,
|
||||
configValue: null,
|
||||
configType: null,
|
||||
remark: null
|
||||
}
|
||||
}
|
||||
//取消
|
||||
const handleCancel = () => {
|
||||
restFrom()
|
||||
isVisited.value = false
|
||||
}
|
||||
//提交
|
||||
const handleSubmit = async (instance) => {
|
||||
if (!instance) return
|
||||
instance.validate(async (valid) => {
|
||||
if (!valid) return
|
||||
if (title.value === '新增参数配置表') {
|
||||
addConfig(form.value).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg)
|
||||
getList()
|
||||
isVisited.value = false
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
editConfig(form.value).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg)
|
||||
getList()
|
||||
isVisited.value = false
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
//添加
|
||||
const handleAdd = async () => {
|
||||
restFrom()
|
||||
title.value = "新增参数配置表"
|
||||
isVisited.value = true
|
||||
nextTick(() => {
|
||||
// 清空校验
|
||||
formInstance.value.clearValidate()
|
||||
})
|
||||
}
|
||||
//修改
|
||||
const handleEdit = async (configId) => {
|
||||
restFrom()
|
||||
getConfigDetails(configId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
form.value = res.data
|
||||
title.value = "编辑参数配置表"
|
||||
isVisited.value = true
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
nextTick(() => {
|
||||
// 清空校验
|
||||
formInstance.value.clearValidate()
|
||||
})
|
||||
}
|
||||
//导出excel
|
||||
const handleExport = () => {
|
||||
downLoadExcel('/admin/config/export', {...queryParams})
|
||||
}
|
||||
|
||||
//勾选table数据行的 Checkbox
|
||||
const handleSelect = async (selection) => {
|
||||
if (selection.length !== 0) {
|
||||
disabled.value = false
|
||||
configIds.value = selection.map(item => item.configId).join()
|
||||
configNameList.value = selection.map(item => item.configName).join()
|
||||
} else {
|
||||
disabled.value = true
|
||||
}
|
||||
}
|
||||
|
||||
//切换每页显示条数
|
||||
const handleSizeChange = async (val) => {
|
||||
pageInfo.pageSize = val
|
||||
await getList()
|
||||
}
|
||||
|
||||
//点击页码进行分页功能
|
||||
const handleCurrentChange = async (val) => {
|
||||
pageInfo.pageNum = val
|
||||
await getList()
|
||||
}
|
||||
const handleMoreDelete = (configId, configName) => {
|
||||
ElMessageBox.confirm(`确认删除名称为${configName}的参数配置表吗?`, '系统提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
handleDelete(configId)
|
||||
})
|
||||
}
|
||||
//删除
|
||||
const handleDelete = async (configId) => {
|
||||
delConfig(configId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg)
|
||||
getList()
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
getList()
|
||||
</script>
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
export const getInfoById = (id) => {
|
||||
return request({
|
||||
url: `/admin/mosr/department/info/${id}`,
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
|
||||
export const setDeptInfo = (data) => {
|
||||
return request({
|
||||
url: '/admin/mosr/department/leader',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
import request from '@/utils/request'
|
||||
|
||||
export const getInfoById = (id) => {
|
||||
return request({
|
||||
url: `/admin/mosr/department/info/${id}`,
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
|
||||
export const setDeptInfo = (data) => {
|
||||
return request({
|
||||
url: '/admin/mosr/department/leader',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
@@ -1,25 +1,25 @@
|
||||
<template>
|
||||
<el-button type="primary" link >
|
||||
{{ modelValue || '请选择' }}
|
||||
</el-button>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch, watchEffect } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
|
||||
// const emit = defineEmits('update: modelValue')
|
||||
|
||||
const localText = ref('')
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
<template>
|
||||
<el-button type="primary" link >
|
||||
{{ modelValue || '请选择' }}
|
||||
</el-button>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch, watchEffect } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
|
||||
// const emit = defineEmits('update: modelValue')
|
||||
|
||||
const localText = ref('')
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,148 +1,148 @@
|
||||
<template>
|
||||
<baseTitle title="基础信息"></baseTitle>
|
||||
<fv-Form :schema="schema" @getInstance="(e)=>form = e"></fv-Form>
|
||||
<UserPicker ref="usrPickershipIds" @ok="editshipIds"></UserPicker>
|
||||
<UserPicker ref="usrPickerHeadIds" @ok="editheadIds"></UserPicker>
|
||||
<UserPicker ref="usrPickerDeputyIds" @ok="editdeputyIds"></UserPicker>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { getInfoById, setDeptInfo } from './api'
|
||||
import UserPicker from '../../workflow/process/common/UserPicker.vue';
|
||||
import Ttsup from './components/ToolToShowUserPicker.vue'
|
||||
import { reactive, ref } from 'vue';
|
||||
const route = useRoute()
|
||||
|
||||
const form = ref()
|
||||
const usrPickershipIds = ref()
|
||||
const usrPickerHeadIds = ref()
|
||||
const usrPickerDeputyIds = ref()
|
||||
|
||||
const departmentChargeLeadershipNames = ref()
|
||||
const departmentHeadNames = ref()
|
||||
const departmentalDeputyNames = ref()
|
||||
|
||||
const departmentChargeLeadershipIds = ref()
|
||||
|
||||
const departmentHeadIds = ref()
|
||||
|
||||
const departmentalDeputyIds = ref()
|
||||
|
||||
const schema = reactive([
|
||||
{
|
||||
label: '部门名字：',
|
||||
prop: 'departmentName',
|
||||
},
|
||||
{
|
||||
label: '部门标志：',
|
||||
prop: 'departmentMark'
|
||||
},
|
||||
{
|
||||
label: '部门分管领导：',
|
||||
prop: 'departmentChargeLeadershipIds',
|
||||
component: ()=><Ttsup modelValue={departmentChargeLeadershipNames.value} onClick={()=>{usrPickershipIds.value.showUserPicker()} } />
|
||||
},
|
||||
{
|
||||
label: '部门负责人：',
|
||||
prop: 'departmentHeadIds',
|
||||
component: ()=><Ttsup modelValue={departmentHeadNames.value} onClick={()=>{usrPickerHeadIds.value.showUserPicker()} } />
|
||||
},
|
||||
{
|
||||
label: '部门副职用户：',
|
||||
prop: 'departmentalDeputyIds',
|
||||
component: ()=><Ttsup modelValue={departmentalDeputyNames.value} onClick={()=>{departmentalDeputyIds.value.showUserPicker()} } />
|
||||
},
|
||||
{
|
||||
label: '创建时间：',
|
||||
prop: 'createTime'
|
||||
}
|
||||
])
|
||||
|
||||
const getInfo = async () => {
|
||||
const { data } = await getInfoById(route.query.id)
|
||||
// console.log("🚀 ~ getInfo ~ res:", data)
|
||||
const params = {
|
||||
createTime: data.createTime,
|
||||
departmentMark: data.departmentMark,
|
||||
departmentName: data.departmentName
|
||||
}
|
||||
departmentChargeLeadershipIds.value = data.departmentChargeLeadershipIds
|
||||
departmentHeadIds.value = data.departmentHeadIds
|
||||
departmentalDeputyIds.value = data.departmentalDeputyIds
|
||||
params.departmentChargeLeadershipIds = formatIdsToNames(data.departmentChargeLeadershipIds, data.departmentChargeLeadershipInfo, 'userId', 'nickName')
|
||||
departmentChargeLeadershipNames.value = params.departmentChargeLeadershipIds
|
||||
params.departmentHeadIds = formatIdsToNames(data.departmentHeadIds, data.departmentHeadInfo, 'userId', 'nickName')
|
||||
departmentHeadNames.value = params.departmentHeadIds
|
||||
params.departmentalDeputyIds = formatIdsToNames(data.departmentalDeputyIds, data.departmentalDeputyInfo, 'userId', 'nickName')
|
||||
departmentalDeputyNames.value = params.departmentalDeputyIds
|
||||
form.value.setValues(params)
|
||||
|
||||
}
|
||||
|
||||
|
||||
const formatIdsToNames = (ids, infoList, key, viewKey) => {
|
||||
const resArr = []
|
||||
if(!ids?.length) return
|
||||
ids.forEach(item=>{
|
||||
infoList.forEach(v=>{
|
||||
item == v[key] && resArr.push(v[viewKey])
|
||||
})
|
||||
})
|
||||
return resArr.join(',')
|
||||
}
|
||||
|
||||
const editshipIds = (list) => {
|
||||
// console.log("🚀 ~ editshipIds ~ list:", list)
|
||||
const arr = list.map(item=>item.name)
|
||||
departmentChargeLeadershipIds.value = list.map(item=>item.id)
|
||||
departmentChargeLeadershipNames.value = arr.join(',')
|
||||
setDeptmentInfo({
|
||||
departmentChargeLeadershipIds: departmentChargeLeadershipIds.value,
|
||||
departmentalDeputyIds: departmentalDeputyIds.value,
|
||||
departmentHeadIds: departmentHeadIds.value
|
||||
})
|
||||
}
|
||||
|
||||
const editheadIds = (list) => {
|
||||
// console.log("🚀 ~ editshipIds ~ list:", list)
|
||||
const arr = list.map(item=>item.name)
|
||||
departmentHeadIds.value = list.map(item=>item.id)
|
||||
departmentHeadNames.value = arr.join(',')
|
||||
setDeptmentInfo({
|
||||
departmentChargeLeadershipIds: departmentChargeLeadershipIds.value,
|
||||
departmentalDeputyIds: departmentalDeputyIds.value,
|
||||
departmentHeadIds: departmentHeadIds.value
|
||||
})
|
||||
}
|
||||
|
||||
const editdeputyIds = (list) => {
|
||||
// console.log("🚀 ~ editshipIds ~ list:", list)
|
||||
const arr = list.map(item=>item.name)
|
||||
departmentalDeputyIds.value = list.map(item=>item.id)
|
||||
departmentalDeputyNames.value = arr.join(',')
|
||||
setDeptmentInfo({
|
||||
departmentChargeLeadershipIds: departmentChargeLeadershipIds.value,
|
||||
departmentalDeputyIds: departmentalDeputyIds.value,
|
||||
departmentHeadIds: departmentHeadIds.value
|
||||
})
|
||||
}
|
||||
|
||||
const setDeptmentInfo = async ({ departmentChargeLeadershipIds = [], departmentHeadIds = [], departmentalDeputyIds = []}) => {
|
||||
|
||||
const params = {
|
||||
departmentChargeLeadershipIds,
|
||||
departmentHeadIds,
|
||||
departmentalDeputyIds,
|
||||
departmentId: route.query.id
|
||||
}
|
||||
const res = await setDeptInfo(params)
|
||||
// console.log(res.data);
|
||||
}
|
||||
|
||||
getInfo()
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
<template>
|
||||
<baseTitle title="基础信息"></baseTitle>
|
||||
<fv-Form :schema="schema" @getInstance="(e)=>form = e"></fv-Form>
|
||||
<UserPicker ref="usrPickershipIds" @ok="editshipIds"></UserPicker>
|
||||
<UserPicker ref="usrPickerHeadIds" @ok="editheadIds"></UserPicker>
|
||||
<UserPicker ref="usrPickerDeputyIds" @ok="editdeputyIds"></UserPicker>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { getInfoById, setDeptInfo } from './api'
|
||||
import UserPicker from '../../workflow/process/common/UserPicker.vue';
|
||||
import Ttsup from './components/ToolToShowUserPicker.vue'
|
||||
import { reactive, ref } from 'vue';
|
||||
const route = useRoute()
|
||||
|
||||
const form = ref()
|
||||
const usrPickershipIds = ref()
|
||||
const usrPickerHeadIds = ref()
|
||||
const usrPickerDeputyIds = ref()
|
||||
|
||||
const departmentChargeLeadershipNames = ref()
|
||||
const departmentHeadNames = ref()
|
||||
const departmentalDeputyNames = ref()
|
||||
|
||||
const departmentChargeLeadershipIds = ref()
|
||||
|
||||
const departmentHeadIds = ref()
|
||||
|
||||
const departmentalDeputyIds = ref()
|
||||
|
||||
const schema = reactive([
|
||||
{
|
||||
label: '部门名字：',
|
||||
prop: 'departmentName',
|
||||
},
|
||||
{
|
||||
label: '部门标志：',
|
||||
prop: 'departmentMark'
|
||||
},
|
||||
{
|
||||
label: '部门分管领导：',
|
||||
prop: 'departmentChargeLeadershipIds',
|
||||
component: ()=><Ttsup modelValue={departmentChargeLeadershipNames.value} onClick={()=>{usrPickershipIds.value.showUserPicker()} } />
|
||||
},
|
||||
{
|
||||
label: '部门负责人：',
|
||||
prop: 'departmentHeadIds',
|
||||
component: ()=><Ttsup modelValue={departmentHeadNames.value} onClick={()=>{usrPickerHeadIds.value.showUserPicker()} } />
|
||||
},
|
||||
{
|
||||
label: '部门副职用户：',
|
||||
prop: 'departmentalDeputyIds',
|
||||
component: ()=><Ttsup modelValue={departmentalDeputyNames.value} onClick={()=>{departmentalDeputyIds.value.showUserPicker()} } />
|
||||
},
|
||||
{
|
||||
label: '创建时间：',
|
||||
prop: 'createTime'
|
||||
}
|
||||
])
|
||||
|
||||
const getInfo = async () => {
|
||||
const { data } = await getInfoById(route.query.id)
|
||||
// console.log("🚀 ~ getInfo ~ res:", data)
|
||||
const params = {
|
||||
createTime: data.createTime,
|
||||
departmentMark: data.departmentMark,
|
||||
departmentName: data.departmentName
|
||||
}
|
||||
departmentChargeLeadershipIds.value = data.departmentChargeLeadershipIds
|
||||
departmentHeadIds.value = data.departmentHeadIds
|
||||
departmentalDeputyIds.value = data.departmentalDeputyIds
|
||||
params.departmentChargeLeadershipIds = formatIdsToNames(data.departmentChargeLeadershipIds, data.departmentChargeLeadershipInfo, 'userId', 'nickName')
|
||||
departmentChargeLeadershipNames.value = params.departmentChargeLeadershipIds
|
||||
params.departmentHeadIds = formatIdsToNames(data.departmentHeadIds, data.departmentHeadInfo, 'userId', 'nickName')
|
||||
departmentHeadNames.value = params.departmentHeadIds
|
||||
params.departmentalDeputyIds = formatIdsToNames(data.departmentalDeputyIds, data.departmentalDeputyInfo, 'userId', 'nickName')
|
||||
departmentalDeputyNames.value = params.departmentalDeputyIds
|
||||
form.value.setValues(params)
|
||||
|
||||
}
|
||||
|
||||
|
||||
const formatIdsToNames = (ids, infoList, key, viewKey) => {
|
||||
const resArr = []
|
||||
if(!ids?.length) return
|
||||
ids.forEach(item=>{
|
||||
infoList.forEach(v=>{
|
||||
item == v[key] && resArr.push(v[viewKey])
|
||||
})
|
||||
})
|
||||
return resArr.join(',')
|
||||
}
|
||||
|
||||
const editshipIds = (list) => {
|
||||
// console.log("🚀 ~ editshipIds ~ list:", list)
|
||||
const arr = list.map(item=>item.name)
|
||||
departmentChargeLeadershipIds.value = list.map(item=>item.id)
|
||||
departmentChargeLeadershipNames.value = arr.join(',')
|
||||
setDeptmentInfo({
|
||||
departmentChargeLeadershipIds: departmentChargeLeadershipIds.value,
|
||||
departmentalDeputyIds: departmentalDeputyIds.value,
|
||||
departmentHeadIds: departmentHeadIds.value
|
||||
})
|
||||
}
|
||||
|
||||
const editheadIds = (list) => {
|
||||
// console.log("🚀 ~ editshipIds ~ list:", list)
|
||||
const arr = list.map(item=>item.name)
|
||||
departmentHeadIds.value = list.map(item=>item.id)
|
||||
departmentHeadNames.value = arr.join(',')
|
||||
setDeptmentInfo({
|
||||
departmentChargeLeadershipIds: departmentChargeLeadershipIds.value,
|
||||
departmentalDeputyIds: departmentalDeputyIds.value,
|
||||
departmentHeadIds: departmentHeadIds.value
|
||||
})
|
||||
}
|
||||
|
||||
const editdeputyIds = (list) => {
|
||||
// console.log("🚀 ~ editshipIds ~ list:", list)
|
||||
const arr = list.map(item=>item.name)
|
||||
departmentalDeputyIds.value = list.map(item=>item.id)
|
||||
departmentalDeputyNames.value = arr.join(',')
|
||||
setDeptmentInfo({
|
||||
departmentChargeLeadershipIds: departmentChargeLeadershipIds.value,
|
||||
departmentalDeputyIds: departmentalDeputyIds.value,
|
||||
departmentHeadIds: departmentHeadIds.value
|
||||
})
|
||||
}
|
||||
|
||||
const setDeptmentInfo = async ({ departmentChargeLeadershipIds = [], departmentHeadIds = [], departmentalDeputyIds = []}) => {
|
||||
|
||||
const params = {
|
||||
departmentChargeLeadershipIds,
|
||||
departmentHeadIds,
|
||||
departmentalDeputyIds,
|
||||
departmentId: route.query.id
|
||||
}
|
||||
const res = await setDeptInfo(params)
|
||||
// console.log(res.data);
|
||||
}
|
||||
|
||||
getInfo()
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
|
||||
@@ -1,109 +1,109 @@
|
||||
<template>
|
||||
<el-form :model="queryParams" inline class="query-form" ref="queryInstance">
|
||||
<el-form-item label="部门编码" prop="departmentCode">
|
||||
<el-input v-model="queryParams.departmentCode" placeholder="请输入部门编码" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="部门标志" prop="departmentMark">
|
||||
<el-input v-model="queryParams.departmentMark" placeholder="请输入部门标志" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="部门名称" prop="departmentName">
|
||||
<el-input v-model="queryParams.departmentName" placeholder="请输入部门名称" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button color="#DED0B2" @click="getList" :icon="Search">搜索</el-button>
|
||||
<el-button @click="handleReset(queryInstance)" :icon="Refresh">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="table-header-btn">
|
||||
<el-button color="#DED0B2" @click="handleExpand" :icon="Sort">{{ isExpand ? '全部收起' : '全部展开' }}</el-button>
|
||||
</div>
|
||||
<el-table
|
||||
:data="list"
|
||||
ref="tableTree"
|
||||
:default-expand-all="isExpand"
|
||||
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
||||
row-key="departmentId"
|
||||
:lazy="true"
|
||||
v-loading="loading"
|
||||
@expand-change="expandChange"
|
||||
@cell-click="cellClick"
|
||||
v-tabh
|
||||
>
|
||||
<el-table-column prop="departmentMark" label="部门标志"/>
|
||||
<el-table-column prop="departmentCode" label="部门编码"/>
|
||||
<el-table-column prop="departmentName" label="部门名称"/>
|
||||
<el-table-column prop="matrix" label="矩阵审批">
|
||||
<template #default="scope">
|
||||
<el-tag :type="scope.row.matrix?'success':'danger'"> {{scope.row.matrix?'完备':'缺失'}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间"/>
|
||||
<el-table-column prop="oper" label="操作">
|
||||
<template #default="{ row }">
|
||||
<el-button type="primary" v-perm="['admin:department:update']" link @click="goEdit(row.departmentId)">编辑</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {Search, Refresh,Sort} from "@element-plus/icons-vue";
|
||||
import {getDepartmentList} from "@/api/subsidiary";
|
||||
import { useRouter } from "vue-router";
|
||||
const queryInstance = ref()
|
||||
const queryParams = reactive({
|
||||
departmentCode: '',
|
||||
departmentMark: '',
|
||||
departmentName: ''
|
||||
})
|
||||
const router = useRouter()
|
||||
const loading = ref(true)
|
||||
const isExpand = ref(true)
|
||||
const list = ref([])
|
||||
const tableTree = ref()
|
||||
const cellClick = (row,column) => {
|
||||
if ("operation" !== column.property){
|
||||
tableTree.value.toggleRowExpansion(row)
|
||||
}
|
||||
}
|
||||
const handleExpand = () => {
|
||||
isExpand.value = !isExpand.value
|
||||
expandChange(list.value, isExpand)
|
||||
getList()
|
||||
}
|
||||
//展开收缩封装函数
|
||||
const expandChange = (data, isExpansion) => {
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
tableTree.value.toggleRowExpansion(data[i], isExpansion);
|
||||
if (data[i].children !== null) {
|
||||
expandChange(data[i].children, isExpansion);
|
||||
}
|
||||
}
|
||||
}
|
||||
const handleReset = (instance) => {
|
||||
if (!instance) return
|
||||
instance.resetFields()
|
||||
getList()
|
||||
}
|
||||
const getList = () => {
|
||||
loading.value = true
|
||||
getDepartmentList(queryParams).then(res => {
|
||||
list.value = res.data
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
|
||||
const goEdit = (id) => {
|
||||
router.push({
|
||||
name: 'Mosrdeptedit',
|
||||
query: {
|
||||
id
|
||||
}
|
||||
})
|
||||
}
|
||||
getList()
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
<template>
|
||||
<el-form :model="queryParams" inline class="query-form" ref="queryInstance">
|
||||
<el-form-item label="部门编码" prop="departmentCode">
|
||||
<el-input v-model="queryParams.departmentCode" placeholder="请输入部门编码" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="部门标志" prop="departmentMark">
|
||||
<el-input v-model="queryParams.departmentMark" placeholder="请输入部门标志" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="部门名称" prop="departmentName">
|
||||
<el-input v-model="queryParams.departmentName" placeholder="请输入部门名称" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button color="#DED0B2" @click="getList" :icon="Search">搜索</el-button>
|
||||
<el-button @click="handleReset(queryInstance)" :icon="Refresh">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="table-header-btn">
|
||||
<el-button color="#DED0B2" @click="handleExpand" :icon="Sort">{{ isExpand ? '全部收起' : '全部展开' }}</el-button>
|
||||
</div>
|
||||
<el-table
|
||||
:data="list"
|
||||
ref="tableTree"
|
||||
:default-expand-all="isExpand"
|
||||
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
||||
row-key="departmentId"
|
||||
:lazy="true"
|
||||
v-loading="loading"
|
||||
@expand-change="expandChange"
|
||||
@cell-click="cellClick"
|
||||
v-tabh
|
||||
>
|
||||
<el-table-column prop="departmentMark" label="部门标志"/>
|
||||
<el-table-column prop="departmentCode" label="部门编码"/>
|
||||
<el-table-column prop="departmentName" label="部门名称"/>
|
||||
<el-table-column prop="matrix" label="矩阵审批">
|
||||
<template #default="scope">
|
||||
<el-tag :type="scope.row.matrix?'success':'danger'"> {{scope.row.matrix?'完备':'缺失'}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间"/>
|
||||
<el-table-column prop="oper" label="操作">
|
||||
<template #default="{ row }">
|
||||
<el-button type="primary" v-perm="['admin:department:update']" link @click="goEdit(row.departmentId)">编辑</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {Search, Refresh,Sort} from "@element-plus/icons-vue";
|
||||
import {getDepartmentList} from "@/api/subsidiary";
|
||||
import { useRouter } from "vue-router";
|
||||
const queryInstance = ref()
|
||||
const queryParams = reactive({
|
||||
departmentCode: '',
|
||||
departmentMark: '',
|
||||
departmentName: ''
|
||||
})
|
||||
const router = useRouter()
|
||||
const loading = ref(true)
|
||||
const isExpand = ref(true)
|
||||
const list = ref([])
|
||||
const tableTree = ref()
|
||||
const cellClick = (row,column) => {
|
||||
if ("operation" !== column.property){
|
||||
tableTree.value.toggleRowExpansion(row)
|
||||
}
|
||||
}
|
||||
const handleExpand = () => {
|
||||
isExpand.value = !isExpand.value
|
||||
expandChange(list.value, isExpand)
|
||||
getList()
|
||||
}
|
||||
//展开收缩封装函数
|
||||
const expandChange = (data, isExpansion) => {
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
tableTree.value.toggleRowExpansion(data[i], isExpansion);
|
||||
if (data[i].children !== null) {
|
||||
expandChange(data[i].children, isExpansion);
|
||||
}
|
||||
}
|
||||
}
|
||||
const handleReset = (instance) => {
|
||||
if (!instance) return
|
||||
instance.resetFields()
|
||||
getList()
|
||||
}
|
||||
const getList = () => {
|
||||
loading.value = true
|
||||
getDepartmentList(queryParams).then(res => {
|
||||
list.value = res.data
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
|
||||
const goEdit = (id) => {
|
||||
router.push({
|
||||
name: 'Mosrdeptedit',
|
||||
query: {
|
||||
id
|
||||
}
|
||||
})
|
||||
}
|
||||
getList()
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
||||
@@ -1,330 +1,330 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form :model="queryParams" inline class="query-form" ref="queryInstance">
|
||||
<el-form-item label="部门名称" prop="deptName">
|
||||
<el-input v-model="queryParams.deptName" placeholder="请输入部门名称" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="state">
|
||||
<el-select v-model="queryParams.state" placeholder="部门状态" clearable filterable>
|
||||
<el-option
|
||||
v-for="item in cacheStore.getDict('normal_disable')"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="getList" :icon="Search">搜索</el-button>
|
||||
<el-button type="primary" @click="handleReset(queryInstance)" :icon="Refresh">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="table-header-btn">
|
||||
<el-button type="primary" @click="handleAdd" :icon="Plus">新增</el-button>
|
||||
<el-button type="info" @click="handleExpand" :icon="Sort">{{ isExpand ? '全部收起' : '全部展开' }}</el-button>
|
||||
</div>
|
||||
<el-table
|
||||
:data="list"
|
||||
ref="tableTree"
|
||||
:default-expand-all="isExpand"
|
||||
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
||||
row-key="deptId"
|
||||
:lazy="true"
|
||||
v-loading="loading"
|
||||
@expand-change="expandChange"
|
||||
@cell-click="cellClick"
|
||||
v-tabh
|
||||
>
|
||||
<el-table-column prop="deptName" label="部门名称"/>
|
||||
<el-table-column prop="orderNum" label="排序" width="60px"/>
|
||||
<el-table-column prop="state" label="状态">
|
||||
<template #default="scope">
|
||||
<tag dict-type="normal_disable" :value="scope.row.state"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间"/>
|
||||
<el-table-column label="操作" prop="operation">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" size="mini" @click="handleAddLine(scope.row.deptId)" link>新增</el-button>
|
||||
<el-button type="primary" size="mini" @click="handleEdit(scope.row.deptId)" link>修改</el-button>
|
||||
<popover-delete v-if="scope.row.parentId!==0" :name="scope.row.deptName" :type="'部门'"
|
||||
@delete="handleDelete(scope.row.deptId)"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-dialog v-model="isVisited" :title="title" width="700px">
|
||||
<el-form :model="form" ref="formInstance" label-width="90px" :rules="rules">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="上级部门" prop="parentId">
|
||||
<div v-if="form.parentId==0&&title=='修改部门'">
|
||||
<el-input v-model="form.deptName" placeholder="请输入部门名称" disabled style="width: 560px"></el-input>
|
||||
</div>
|
||||
<el-tree-select
|
||||
v-else
|
||||
ref="treeSelect"
|
||||
v-model="form.parentId"
|
||||
placeholder="请选择上级部门"
|
||||
:data="deptList"
|
||||
:props="deptProps"
|
||||
value-key="value"
|
||||
check-strictly
|
||||
:render-after-expand="false"
|
||||
style="width: 560px"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="部门名称" prop="deptName">
|
||||
<el-input v-model="form.deptName" placeholder="请输入部门名称"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="显示排序" prop="orderNum">
|
||||
<el-input-number v-model="form.orderNum" style="width: 230px"></el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="负责人" prop="leader">
|
||||
<el-input v-model="form.leader" placeholder="请输入负责人"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="联系电话" prop="phone">
|
||||
<el-input v-model="form.phone" placeholder="请输入联系电话"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="邮箱" prop="email">
|
||||
<el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="状态" prop="state">
|
||||
<el-radio-group v-model="form.state" size="mini">
|
||||
<el-radio v-for="dept in cacheStore.getDict('normal_disable')" :key="dept.value"
|
||||
:label="dept.value">
|
||||
{{ dept.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span>
|
||||
<el-button @click="handleDataCancel">取消</el-button>
|
||||
<el-button type="primary" @click="handleSubmit(formInstance)">确定</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {Search, Refresh, Plus, Sort} from "@element-plus/icons-vue";
|
||||
import {useCacheStore} from '@/stores/cache.js'
|
||||
import {getDeptList, getDeptOption,addDept, deleteDept, editDept, getDeptDetail, getDeptExcludeOption} from "@/api/dept/dept";
|
||||
import {ElMessage, ElMessageBox} from "element-plus";
|
||||
import Tag from '@/components/Tag.vue'
|
||||
|
||||
const cacheStore = useCacheStore()
|
||||
const queryInstance = ref()
|
||||
const queryParams = reactive({
|
||||
deptName: '',
|
||||
state: ''
|
||||
})
|
||||
const loading = ref(true)
|
||||
const list = ref([])
|
||||
const tableTree = ref()
|
||||
const isExpand = ref(true)
|
||||
const isVisited = ref(false);
|
||||
const title = ref();
|
||||
const form = ref();
|
||||
const formInstance = ref();
|
||||
const rules = reactive({
|
||||
parentId: [
|
||||
{required: true, message: '请选择上级部门', trigger: 'blur'},
|
||||
],
|
||||
deptName: [
|
||||
{required: true, message: '请输入部门名称', trigger: 'blur'},
|
||||
],
|
||||
orderNum: [
|
||||
{required: true, message: '请选择显示顺序', trigger: 'blur'},
|
||||
]
|
||||
})
|
||||
const deptList = ref([]);
|
||||
const deptProps = reactive({
|
||||
value: "value",
|
||||
label: "label"
|
||||
});
|
||||
//获取部门option
|
||||
const getDepartmentList = async () => {
|
||||
//获取部门信息
|
||||
getDeptOption().then(res => {
|
||||
if (res.code === 1000) {
|
||||
deptList.value = res.data;
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
};
|
||||
//获取修改时的option
|
||||
const getEditOption = (deptId) => {
|
||||
getDeptExcludeOption(deptId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
deptList.value = res.data;
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
const getList = async () => {
|
||||
loading.value = true
|
||||
getDeptList(queryParams).then(res => {
|
||||
if (res.code === 1000) {
|
||||
list.value = res.data
|
||||
loading.value = false
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
})
|
||||
}
|
||||
const getDetail = (deptId) => {
|
||||
getDeptDetail(deptId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
// console.log(res.data)
|
||||
if (title.value == "行内新增部门") {
|
||||
form.value.parentId = res.data.deptId
|
||||
} else {
|
||||
form.value = res.data;
|
||||
}
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
const handleReset = (instance) => {
|
||||
if (!instance) return
|
||||
instance.resetFields()
|
||||
getList()
|
||||
}
|
||||
const restForm = () => {
|
||||
form.value = {
|
||||
leaderId: 0,
|
||||
parentId: '',
|
||||
deptName: null,
|
||||
orderNum: 0,
|
||||
state: '1',
|
||||
leader: null,
|
||||
phone: null,
|
||||
email: null
|
||||
};
|
||||
};
|
||||
|
||||
const cellClick = (row,column) => {
|
||||
if ("operation" !== column.property){
|
||||
tableTree.value.toggleRowExpansion(row)
|
||||
}
|
||||
}
|
||||
|
||||
//添加功能
|
||||
const handleAdd = () => {
|
||||
restForm();
|
||||
getDepartmentList()
|
||||
title.value = "新增部门";
|
||||
isVisited.value = true;
|
||||
nextTick(()=>{
|
||||
// 清空校验
|
||||
formInstance.value.clearValidate()
|
||||
})
|
||||
};
|
||||
const handleAddLine = (deptId) => {
|
||||
restForm();
|
||||
getDepartmentList()
|
||||
title.value = "行内新增部门";
|
||||
isVisited.value = true;
|
||||
getDetail(deptId)
|
||||
nextTick(()=>{
|
||||
// 清空校验
|
||||
formInstance.value.clearValidate()
|
||||
})
|
||||
}
|
||||
//编辑部门
|
||||
const handleEdit = (deptId) => {
|
||||
restForm();
|
||||
getEditOption(deptId)
|
||||
getDetail(deptId)
|
||||
title.value = "修改部门";
|
||||
isVisited.value = true;
|
||||
nextTick(()=>{
|
||||
// 清空校验
|
||||
formInstance.value.clearValidate()
|
||||
})
|
||||
}
|
||||
|
||||
const handleExpand = () => {
|
||||
isExpand.value = !isExpand.value
|
||||
expandChange(list.value, isExpand)
|
||||
getList()
|
||||
}
|
||||
//展开收缩封装函数
|
||||
const expandChange = (data, isExpansion) => {
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
tableTree.value.toggleRowExpansion(data[i], isExpansion);
|
||||
if (data[i].children !== null) {
|
||||
expandChange(data[i].children, isExpansion);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//删除功能
|
||||
const handleDelete = (deptId) => {
|
||||
deleteDept(deptId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg);
|
||||
getList();
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleDataCancel = () => {
|
||||
restForm();
|
||||
isVisited.value = false;
|
||||
};
|
||||
|
||||
const handleSubmit = async (formInstance) => {
|
||||
if (!formInstance) return;
|
||||
formInstance.validate(async (valid) => {
|
||||
if (!valid) return;
|
||||
if (title.value == "新增部门") {
|
||||
addDept(form.value).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg);
|
||||
getList();
|
||||
isVisited.value = false;
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
editDept(form.value).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg);
|
||||
getList();
|
||||
isVisited.value = false;
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
getList()
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
<template>
|
||||
<div>
|
||||
<el-form :model="queryParams" inline class="query-form" ref="queryInstance">
|
||||
<el-form-item label="部门名称" prop="deptName">
|
||||
<el-input v-model="queryParams.deptName" placeholder="请输入部门名称" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="state">
|
||||
<el-select v-model="queryParams.state" placeholder="部门状态" clearable filterable>
|
||||
<el-option
|
||||
v-for="item in cacheStore.getDict('normal_disable')"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="getList" :icon="Search">搜索</el-button>
|
||||
<el-button type="primary" @click="handleReset(queryInstance)" :icon="Refresh">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="table-header-btn">
|
||||
<el-button type="primary" @click="handleAdd" :icon="Plus">新增</el-button>
|
||||
<el-button type="info" @click="handleExpand" :icon="Sort">{{ isExpand ? '全部收起' : '全部展开' }}</el-button>
|
||||
</div>
|
||||
<el-table
|
||||
:data="list"
|
||||
ref="tableTree"
|
||||
:default-expand-all="isExpand"
|
||||
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
||||
row-key="deptId"
|
||||
:lazy="true"
|
||||
v-loading="loading"
|
||||
@expand-change="expandChange"
|
||||
@cell-click="cellClick"
|
||||
v-tabh
|
||||
>
|
||||
<el-table-column prop="deptName" label="部门名称"/>
|
||||
<el-table-column prop="orderNum" label="排序" width="60px"/>
|
||||
<el-table-column prop="state" label="状态">
|
||||
<template #default="scope">
|
||||
<tag dict-type="normal_disable" :value="scope.row.state"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间"/>
|
||||
<el-table-column label="操作" prop="operation">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" size="mini" @click="handleAddLine(scope.row.deptId)" link>新增</el-button>
|
||||
<el-button type="primary" size="mini" @click="handleEdit(scope.row.deptId)" link>修改</el-button>
|
||||
<popover-delete v-if="scope.row.parentId!==0" :name="scope.row.deptName" :type="'部门'"
|
||||
@delete="handleDelete(scope.row.deptId)"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-dialog v-model="isVisited" :title="title" width="700px">
|
||||
<el-form :model="form" ref="formInstance" label-width="90px" :rules="rules">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="上级部门" prop="parentId">
|
||||
<div v-if="form.parentId==0&&title=='修改部门'">
|
||||
<el-input v-model="form.deptName" placeholder="请输入部门名称" disabled style="width: 560px"></el-input>
|
||||
</div>
|
||||
<el-tree-select
|
||||
v-else
|
||||
ref="treeSelect"
|
||||
v-model="form.parentId"
|
||||
placeholder="请选择上级部门"
|
||||
:data="deptList"
|
||||
:props="deptProps"
|
||||
value-key="value"
|
||||
check-strictly
|
||||
:render-after-expand="false"
|
||||
style="width: 560px"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="部门名称" prop="deptName">
|
||||
<el-input v-model="form.deptName" placeholder="请输入部门名称"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="显示排序" prop="orderNum">
|
||||
<el-input-number v-model="form.orderNum" style="width: 230px"></el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="负责人" prop="leader">
|
||||
<el-input v-model="form.leader" placeholder="请输入负责人"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="联系电话" prop="phone">
|
||||
<el-input v-model="form.phone" placeholder="请输入联系电话"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="邮箱" prop="email">
|
||||
<el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="状态" prop="state">
|
||||
<el-radio-group v-model="form.state" size="mini">
|
||||
<el-radio v-for="dept in cacheStore.getDict('normal_disable')" :key="dept.value"
|
||||
:label="dept.value">
|
||||
{{ dept.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span>
|
||||
<el-button @click="handleDataCancel">取消</el-button>
|
||||
<el-button type="primary" @click="handleSubmit(formInstance)">确定</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {Search, Refresh, Plus, Sort} from "@element-plus/icons-vue";
|
||||
import {useCacheStore} from '@/stores/cache.js'
|
||||
import {getDeptList, getDeptOption,addDept, deleteDept, editDept, getDeptDetail, getDeptExcludeOption} from "@/api/dept/dept";
|
||||
import {ElMessage, ElMessageBox} from "element-plus";
|
||||
import Tag from '@/components/Tag.vue'
|
||||
|
||||
const cacheStore = useCacheStore()
|
||||
const queryInstance = ref()
|
||||
const queryParams = reactive({
|
||||
deptName: '',
|
||||
state: ''
|
||||
})
|
||||
const loading = ref(true)
|
||||
const list = ref([])
|
||||
const tableTree = ref()
|
||||
const isExpand = ref(true)
|
||||
const isVisited = ref(false);
|
||||
const title = ref();
|
||||
const form = ref();
|
||||
const formInstance = ref();
|
||||
const rules = reactive({
|
||||
parentId: [
|
||||
{required: true, message: '请选择上级部门', trigger: 'blur'},
|
||||
],
|
||||
deptName: [
|
||||
{required: true, message: '请输入部门名称', trigger: 'blur'},
|
||||
],
|
||||
orderNum: [
|
||||
{required: true, message: '请选择显示顺序', trigger: 'blur'},
|
||||
]
|
||||
})
|
||||
const deptList = ref([]);
|
||||
const deptProps = reactive({
|
||||
value: "value",
|
||||
label: "label"
|
||||
});
|
||||
//获取部门option
|
||||
const getDepartmentList = async () => {
|
||||
//获取部门信息
|
||||
getDeptOption().then(res => {
|
||||
if (res.code === 1000) {
|
||||
deptList.value = res.data;
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
};
|
||||
//获取修改时的option
|
||||
const getEditOption = (deptId) => {
|
||||
getDeptExcludeOption(deptId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
deptList.value = res.data;
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
const getList = async () => {
|
||||
loading.value = true
|
||||
getDeptList(queryParams).then(res => {
|
||||
if (res.code === 1000) {
|
||||
list.value = res.data
|
||||
loading.value = false
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
})
|
||||
}
|
||||
const getDetail = (deptId) => {
|
||||
getDeptDetail(deptId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
// console.log(res.data)
|
||||
if (title.value == "行内新增部门") {
|
||||
form.value.parentId = res.data.deptId
|
||||
} else {
|
||||
form.value = res.data;
|
||||
}
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
const handleReset = (instance) => {
|
||||
if (!instance) return
|
||||
instance.resetFields()
|
||||
getList()
|
||||
}
|
||||
const restForm = () => {
|
||||
form.value = {
|
||||
leaderId: 0,
|
||||
parentId: '',
|
||||
deptName: null,
|
||||
orderNum: 0,
|
||||
state: '1',
|
||||
leader: null,
|
||||
phone: null,
|
||||
email: null
|
||||
};
|
||||
};
|
||||
|
||||
const cellClick = (row,column) => {
|
||||
if ("operation" !== column.property){
|
||||
tableTree.value.toggleRowExpansion(row)
|
||||
}
|
||||
}
|
||||
|
||||
//添加功能
|
||||
const handleAdd = () => {
|
||||
restForm();
|
||||
getDepartmentList()
|
||||
title.value = "新增部门";
|
||||
isVisited.value = true;
|
||||
nextTick(()=>{
|
||||
// 清空校验
|
||||
formInstance.value.clearValidate()
|
||||
})
|
||||
};
|
||||
const handleAddLine = (deptId) => {
|
||||
restForm();
|
||||
getDepartmentList()
|
||||
title.value = "行内新增部门";
|
||||
isVisited.value = true;
|
||||
getDetail(deptId)
|
||||
nextTick(()=>{
|
||||
// 清空校验
|
||||
formInstance.value.clearValidate()
|
||||
})
|
||||
}
|
||||
//编辑部门
|
||||
const handleEdit = (deptId) => {
|
||||
restForm();
|
||||
getEditOption(deptId)
|
||||
getDetail(deptId)
|
||||
title.value = "修改部门";
|
||||
isVisited.value = true;
|
||||
nextTick(()=>{
|
||||
// 清空校验
|
||||
formInstance.value.clearValidate()
|
||||
})
|
||||
}
|
||||
|
||||
const handleExpand = () => {
|
||||
isExpand.value = !isExpand.value
|
||||
expandChange(list.value, isExpand)
|
||||
getList()
|
||||
}
|
||||
//展开收缩封装函数
|
||||
const expandChange = (data, isExpansion) => {
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
tableTree.value.toggleRowExpansion(data[i], isExpansion);
|
||||
if (data[i].children !== null) {
|
||||
expandChange(data[i].children, isExpansion);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//删除功能
|
||||
const handleDelete = (deptId) => {
|
||||
deleteDept(deptId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg);
|
||||
getList();
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleDataCancel = () => {
|
||||
restForm();
|
||||
isVisited.value = false;
|
||||
};
|
||||
|
||||
const handleSubmit = async (formInstance) => {
|
||||
if (!formInstance) return;
|
||||
formInstance.validate(async (valid) => {
|
||||
if (!valid) return;
|
||||
if (title.value == "新增部门") {
|
||||
addDept(form.value).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg);
|
||||
getList();
|
||||
isVisited.value = false;
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
editDept(form.value).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg);
|
||||
getList();
|
||||
isVisited.value = false;
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
getList()
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
|
||||
@@ -1,353 +1,353 @@
|
||||
<template>
|
||||
<el-form :model="queryParams" class="query-form" inline ref="roleForm">
|
||||
<el-form-item label="当前菜单" prop="userName">
|
||||
<el-tag >{{menuName}}</el-tag>
|
||||
</el-form-item>
|
||||
<el-form-item label="角色名称" prop="roleName">
|
||||
<el-input
|
||||
v-model="queryParams.roleName"
|
||||
placeholder="请输入角色名称"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="角色标识符" prop="roleKey">
|
||||
<el-input
|
||||
v-model="queryParams.roleKey"
|
||||
placeholder="请输入角色标识符"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="searchRole" :icon="Search">搜索</el-button>
|
||||
<el-button @click="handleReset" :icon="Refresh">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="table-header-btn">
|
||||
<el-button type="primary" @click="handleAdd" :icon="Plus">添加角色</el-button>
|
||||
<el-button type="primary" @click="handleBack" :icon="RefreshLeft" plain>返回</el-button>
|
||||
<el-button type="danger" @click="handleCancelAll" :icon="CircleClose" plain>全部取消</el-button>
|
||||
<el-button type="danger" @click="handleMoreCancelAuthorization(cancelRoleIds,roleNames)" :icon="CircleClose" plain :disabled="moreCancelDisabled">批量取消</el-button>
|
||||
<el-button type="danger" @click="handleDeleteMenu" :icon="Delete" plain v-if="showDeleteCurrent">删除当前菜单</el-button>
|
||||
</div>
|
||||
<div class="table">
|
||||
<el-table
|
||||
:data="list"
|
||||
row-key="roleId"
|
||||
:lazy="true"
|
||||
ref="table"
|
||||
v-loading="loading"
|
||||
@select="handleSelect"
|
||||
v-tabh
|
||||
>
|
||||
<el-table-column type="selection" width="55" fixed="left" />
|
||||
<el-table-column label="序号" type="index" align="center" width="60"/>
|
||||
<el-table-column prop="roleName" label="角色名称" align="center"/>
|
||||
<el-table-column prop="roleKey" label="角色标识符" align="center"/>
|
||||
<el-table-column prop="dataScope" label="数据范围" align="center">
|
||||
<template #default="scope">
|
||||
<el-text v-if="scope.row.dataScope == '1'">所有数据权限</el-text>
|
||||
<el-text v-if="scope.row.dataScope == '2'">自定义数据权限</el-text>
|
||||
<el-text v-if="scope.row.dataScope == '3'">本部门数据权限</el-text>
|
||||
<el-text v-if="scope.row.dataScope == '4'">本部门及以下数据权限</el-text>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="roleSort" label="显示顺序" align="center" width="100px"/>
|
||||
<el-table-column prop="state" label="状态" align="center">
|
||||
<template #default="scope">
|
||||
<tag dict-type="normal_disable" :value="scope.row.state"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" align="center" width="180px"/>
|
||||
<el-table-column label="操作" align="center" fixed="right">
|
||||
<template #default="scope">
|
||||
<popover-delete :name="scope.row.roleName" :type="'角色'" :btn-text="'取消授权'"
|
||||
@delete="handleCancelAuthorization([scope.row.roleId])"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<paging :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize" :page-sizes="[10, 20, 30, 40,50]"
|
||||
:total="total" @changeSize="handleSizeChange" @goPage="handleCurrentChange"/>
|
||||
<el-dialog v-model="isVisited" :title="title" width="830px">
|
||||
<el-form :model="query" class="query-form" inline ref="formInstance">
|
||||
<el-form-item label="角色名称" prop="roleName">
|
||||
<el-input
|
||||
v-model="query.roleName"
|
||||
placeholder="请输入角色名称"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="角色标识符" prop="roleKey">
|
||||
<el-input
|
||||
v-model="query.roleKey"
|
||||
placeholder="请输入角色标识符"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="getExcludeRole" :icon="Search">搜索</el-button>
|
||||
<el-button @click="handleDialogReset" :icon="Refresh">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="table">
|
||||
<el-table
|
||||
:data="roleList"
|
||||
row-key="roleId"
|
||||
:lazy="true"
|
||||
v-loading="dialogLoading"
|
||||
@select="handleDialogSelect"
|
||||
>
|
||||
<el-table-column type="selection" width="55" fixed="left" />
|
||||
<el-table-column label="序号" type="index" align="center" width="60"/>
|
||||
<el-table-column prop="roleName" label="角色名称" align="center"/>
|
||||
<el-table-column prop="roleKey" label="角色标识符" align="center"/>
|
||||
<el-table-column prop="dataScope" label="数据范围" align="center">
|
||||
<template #default="scope">
|
||||
<el-text v-if="scope.row.dataScope == '1'">所有数据权限</el-text>
|
||||
<el-text v-if="scope.row.dataScope == '2'">自定义数据权限</el-text>
|
||||
<el-text v-if="scope.row.dataScope == '3'">本部门数据权限</el-text>
|
||||
<el-text v-if="scope.row.dataScope == '4'">本部门及以下数据权限</el-text>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="roleSort" label="显示顺序" align="center" width="100px"/>
|
||||
<el-table-column prop="state" label="状态" align="center">
|
||||
<template #default="scope">
|
||||
<tag dict-type="normal_disable" :value="scope.row.state"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" align="center" width="180px"/>
|
||||
<el-table-column label="操作" align="center" fixed="right">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" size="mini"
|
||||
@click="handleSubmit(scope.row.roleId)" link>添加
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<paging :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize" :page-sizes="[10, 20, 30, 40,50]"
|
||||
:total="dialogTotal" @changeSize="handleSizeChangeDialog" @goPage="handleCurrentChangeDialog"/>
|
||||
|
||||
<template #footer>
|
||||
<span>
|
||||
<el-button @click="handleCancel">取消</el-button>
|
||||
<el-button type="primary" @click="handleSubmit(roleIds)" :disabled="dialogDisabled">批量添加</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {Plus, Search, Refresh, RefreshLeft,CircleClose,Delete} from "@element-plus/icons-vue";
|
||||
import {ElMessage, ElMessageBox} from "element-plus";
|
||||
import {getRoleInfoByMenuId,getRoleExcludeMenuId,unbindAllRole,cancelAuthorization,bindRoleAndMenu} from "@/api/role/role"
|
||||
import {useRouter} from "vue-router";
|
||||
import Tag from '@/components/Tag.vue'
|
||||
import Paging from "@/components/pagination/index.vue";
|
||||
import {delMenu} from "@/api/system/menuman";
|
||||
import {useTagsView} from '@/stores/tagsview.js'
|
||||
const router = useRouter();
|
||||
const tagsViewStore = useTagsView()
|
||||
const menuId = reactive(router.currentRoute.value.params.menuId)
|
||||
const menuName = reactive(router.currentRoute.value.params.menuName)
|
||||
const roleForm = ref();
|
||||
const table = ref();
|
||||
const title = ref('添加角色');
|
||||
const list = ref([]);
|
||||
const roleList = ref([]);
|
||||
const total = ref([]);
|
||||
const dialogTotal = ref([]);
|
||||
const moreCancelDisabled = ref(true);
|
||||
const dialogDisabled = ref(true);
|
||||
const loading = ref(true);
|
||||
const dialogLoading = ref(true);
|
||||
const showDeleteCurrent = ref(false);
|
||||
const roleNames = ref([]);
|
||||
const cancelRoleIds = ref([]);
|
||||
const roleIds = ref([]);
|
||||
const queryParams = reactive({
|
||||
roleName: "",
|
||||
roleKey: ""
|
||||
});
|
||||
const query = reactive({
|
||||
roleName: "",
|
||||
roleKey: ""
|
||||
});
|
||||
const pageInfo = reactive({
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
});
|
||||
const formInstance = ref();
|
||||
const isVisited = ref(false);
|
||||
const form = ref();
|
||||
//角色搜索重置
|
||||
const handleReset = () => {
|
||||
roleForm.value.resetFields();
|
||||
searchRole();
|
||||
};
|
||||
const handleDialogReset = () => {
|
||||
formInstance.value.resetFields();
|
||||
getExcludeRole();
|
||||
};
|
||||
//根据菜单id获取角色信息
|
||||
const searchRole = async () => {
|
||||
let params = {
|
||||
menuId: menuId,
|
||||
...queryParams,
|
||||
...pageInfo
|
||||
};
|
||||
loading.value = true
|
||||
getRoleInfoByMenuId(params).then(res => {
|
||||
if (res.code === 1000) {
|
||||
showDeleteCurrent.value = res.data.rows.length === 0;
|
||||
list.value = res.data.rows;
|
||||
total.value = res.data.total;
|
||||
loading.value = false;
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
};
|
||||
//获取添加弹窗的角色
|
||||
const getExcludeRole = async () => {
|
||||
let params = {
|
||||
menuId: menuId,
|
||||
...query,
|
||||
...pageInfo
|
||||
};
|
||||
dialogLoading.value = true;
|
||||
getRoleExcludeMenuId(params).then(res => {
|
||||
if (res.code === 1000) {
|
||||
roleList.value = res.data.rows;
|
||||
dialogTotal.value = res.data.total;
|
||||
dialogLoading.value = false;
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
//添加角色
|
||||
const handleAdd = () => {
|
||||
getExcludeRole()
|
||||
isVisited.value = true
|
||||
dialogDisabled.value = true
|
||||
}
|
||||
//全部取消授权
|
||||
const handleCancelAll = () => {
|
||||
ElMessageBox.confirm(`确认全部取消授权吗?`, "系统提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(() => {
|
||||
unbindAllRole(menuId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg);
|
||||
searchRole()
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
//取消授权
|
||||
const handleCancelAuthorization = (roleId) => {
|
||||
cancelAuthorization(menuId, roleId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg);
|
||||
moreCancelDisabled.value=true
|
||||
searchRole()
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
//批量取消授权
|
||||
const handleMoreCancelAuthorization = (cancelUserIds, userName) => {
|
||||
ElMessageBox.confirm(`确认取消授权名称为"${userName}"的角色吗?`, "系统提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(() => {
|
||||
handleCancelAuthorization(cancelUserIds)
|
||||
})
|
||||
}
|
||||
const handleBack=()=>{
|
||||
tagsViewStore.delVisitedViews(router.currentRoute.value.path)
|
||||
router.push('/system/menu')
|
||||
}
|
||||
//删除当前菜单
|
||||
const handleDeleteMenu=()=>{
|
||||
ElMessageBox.confirm(`确认删除名称为"${menuName}"的菜单吗?`, "系统提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(() => {
|
||||
delMenu(menuId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg)
|
||||
tagsViewStore.delVisitedViews(router.currentRoute.value.path)
|
||||
router.push('/system/menu')
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
//取消
|
||||
const handleCancel = () => {
|
||||
isVisited.value = false;
|
||||
};
|
||||
|
||||
const handleSelect = (selection) => {
|
||||
if (selection.length !== 0) {
|
||||
moreCancelDisabled.value = false;
|
||||
cancelRoleIds.value=selection.map(item=>item.roleId)
|
||||
roleNames.value=selection.map(item=>item.roleName).join()
|
||||
} else {
|
||||
moreCancelDisabled.value = true;
|
||||
}
|
||||
}
|
||||
const handleDialogSelect = (selection) => {
|
||||
if (selection.length !== 0) {
|
||||
dialogDisabled.value = false;
|
||||
roleIds.value=selection.map(item=>item.roleId)
|
||||
} else {
|
||||
dialogDisabled.value = true;
|
||||
}
|
||||
}
|
||||
//添加角色
|
||||
const handleSubmit = (roleId) => {
|
||||
bindRoleAndMenu(menuId,roleId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg);
|
||||
searchRole()
|
||||
isVisited.value = false
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
//切换每页显示条数
|
||||
const handleSizeChange = (val) => {
|
||||
pageInfo.pageSize = val;
|
||||
searchRole();
|
||||
};
|
||||
const handleSizeChangeDialog = (val) => {
|
||||
pageInfo.pageSize = val;
|
||||
getExcludeRole();
|
||||
};
|
||||
|
||||
//点击页码进行分页功能
|
||||
const handleCurrentChange = (val) => {
|
||||
pageInfo.pageNum = val;
|
||||
searchRole();
|
||||
};
|
||||
const handleCurrentChangeDialog = (val) => {
|
||||
pageInfo.pageNum = val;
|
||||
getExcludeRole();
|
||||
};
|
||||
|
||||
searchRole()
|
||||
</script>
|
||||
<template>
|
||||
<el-form :model="queryParams" class="query-form" inline ref="roleForm">
|
||||
<el-form-item label="当前菜单" prop="userName">
|
||||
<el-tag >{{menuName}}</el-tag>
|
||||
</el-form-item>
|
||||
<el-form-item label="角色名称" prop="roleName">
|
||||
<el-input
|
||||
v-model="queryParams.roleName"
|
||||
placeholder="请输入角色名称"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="角色标识符" prop="roleKey">
|
||||
<el-input
|
||||
v-model="queryParams.roleKey"
|
||||
placeholder="请输入角色标识符"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="searchRole" :icon="Search">搜索</el-button>
|
||||
<el-button @click="handleReset" :icon="Refresh">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="table-header-btn">
|
||||
<el-button type="primary" @click="handleAdd" :icon="Plus">添加角色</el-button>
|
||||
<el-button type="primary" @click="handleBack" :icon="RefreshLeft" plain>返回</el-button>
|
||||
<el-button type="danger" @click="handleCancelAll" :icon="CircleClose" plain>全部取消</el-button>
|
||||
<el-button type="danger" @click="handleMoreCancelAuthorization(cancelRoleIds,roleNames)" :icon="CircleClose" plain :disabled="moreCancelDisabled">批量取消</el-button>
|
||||
<el-button type="danger" @click="handleDeleteMenu" :icon="Delete" plain v-if="showDeleteCurrent">删除当前菜单</el-button>
|
||||
</div>
|
||||
<div class="table">
|
||||
<el-table
|
||||
:data="list"
|
||||
row-key="roleId"
|
||||
:lazy="true"
|
||||
ref="table"
|
||||
v-loading="loading"
|
||||
@select="handleSelect"
|
||||
v-tabh
|
||||
>
|
||||
<el-table-column type="selection" width="55" fixed="left" />
|
||||
<el-table-column label="序号" type="index" align="center" width="60"/>
|
||||
<el-table-column prop="roleName" label="角色名称" align="center"/>
|
||||
<el-table-column prop="roleKey" label="角色标识符" align="center"/>
|
||||
<el-table-column prop="dataScope" label="数据范围" align="center">
|
||||
<template #default="scope">
|
||||
<el-text v-if="scope.row.dataScope == '1'">所有数据权限</el-text>
|
||||
<el-text v-if="scope.row.dataScope == '2'">自定义数据权限</el-text>
|
||||
<el-text v-if="scope.row.dataScope == '3'">本部门数据权限</el-text>
|
||||
<el-text v-if="scope.row.dataScope == '4'">本部门及以下数据权限</el-text>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="roleSort" label="显示顺序" align="center" width="100px"/>
|
||||
<el-table-column prop="state" label="状态" align="center">
|
||||
<template #default="scope">
|
||||
<tag dict-type="normal_disable" :value="scope.row.state"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" align="center" width="180px"/>
|
||||
<el-table-column label="操作" align="center" fixed="right">
|
||||
<template #default="scope">
|
||||
<popover-delete :name="scope.row.roleName" :type="'角色'" :btn-text="'取消授权'"
|
||||
@delete="handleCancelAuthorization([scope.row.roleId])"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<paging :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize" :page-sizes="[10, 20, 30, 40,50]"
|
||||
:total="total" @changeSize="handleSizeChange" @goPage="handleCurrentChange"/>
|
||||
<el-dialog v-model="isVisited" :title="title" width="830px">
|
||||
<el-form :model="query" class="query-form" inline ref="formInstance">
|
||||
<el-form-item label="角色名称" prop="roleName">
|
||||
<el-input
|
||||
v-model="query.roleName"
|
||||
placeholder="请输入角色名称"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="角色标识符" prop="roleKey">
|
||||
<el-input
|
||||
v-model="query.roleKey"
|
||||
placeholder="请输入角色标识符"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="getExcludeRole" :icon="Search">搜索</el-button>
|
||||
<el-button @click="handleDialogReset" :icon="Refresh">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="table">
|
||||
<el-table
|
||||
:data="roleList"
|
||||
row-key="roleId"
|
||||
:lazy="true"
|
||||
v-loading="dialogLoading"
|
||||
@select="handleDialogSelect"
|
||||
>
|
||||
<el-table-column type="selection" width="55" fixed="left" />
|
||||
<el-table-column label="序号" type="index" align="center" width="60"/>
|
||||
<el-table-column prop="roleName" label="角色名称" align="center"/>
|
||||
<el-table-column prop="roleKey" label="角色标识符" align="center"/>
|
||||
<el-table-column prop="dataScope" label="数据范围" align="center">
|
||||
<template #default="scope">
|
||||
<el-text v-if="scope.row.dataScope == '1'">所有数据权限</el-text>
|
||||
<el-text v-if="scope.row.dataScope == '2'">自定义数据权限</el-text>
|
||||
<el-text v-if="scope.row.dataScope == '3'">本部门数据权限</el-text>
|
||||
<el-text v-if="scope.row.dataScope == '4'">本部门及以下数据权限</el-text>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="roleSort" label="显示顺序" align="center" width="100px"/>
|
||||
<el-table-column prop="state" label="状态" align="center">
|
||||
<template #default="scope">
|
||||
<tag dict-type="normal_disable" :value="scope.row.state"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" align="center" width="180px"/>
|
||||
<el-table-column label="操作" align="center" fixed="right">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" size="mini"
|
||||
@click="handleSubmit(scope.row.roleId)" link>添加
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<paging :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize" :page-sizes="[10, 20, 30, 40,50]"
|
||||
:total="dialogTotal" @changeSize="handleSizeChangeDialog" @goPage="handleCurrentChangeDialog"/>
|
||||
|
||||
<template #footer>
|
||||
<span>
|
||||
<el-button @click="handleCancel">取消</el-button>
|
||||
<el-button type="primary" @click="handleSubmit(roleIds)" :disabled="dialogDisabled">批量添加</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {Plus, Search, Refresh, RefreshLeft,CircleClose,Delete} from "@element-plus/icons-vue";
|
||||
import {ElMessage, ElMessageBox} from "element-plus";
|
||||
import {getRoleInfoByMenuId,getRoleExcludeMenuId,unbindAllRole,cancelAuthorization,bindRoleAndMenu} from "@/api/role/role"
|
||||
import {useRouter} from "vue-router";
|
||||
import Tag from '@/components/Tag.vue'
|
||||
import Paging from "@/components/pagination/index.vue";
|
||||
import {delMenu} from "@/api/system/menuman";
|
||||
import {useTagsView} from '@/stores/tagsview.js'
|
||||
const router = useRouter();
|
||||
const tagsViewStore = useTagsView()
|
||||
const menuId = reactive(router.currentRoute.value.params.menuId)
|
||||
const menuName = reactive(router.currentRoute.value.params.menuName)
|
||||
const roleForm = ref();
|
||||
const table = ref();
|
||||
const title = ref('添加角色');
|
||||
const list = ref([]);
|
||||
const roleList = ref([]);
|
||||
const total = ref([]);
|
||||
const dialogTotal = ref([]);
|
||||
const moreCancelDisabled = ref(true);
|
||||
const dialogDisabled = ref(true);
|
||||
const loading = ref(true);
|
||||
const dialogLoading = ref(true);
|
||||
const showDeleteCurrent = ref(false);
|
||||
const roleNames = ref([]);
|
||||
const cancelRoleIds = ref([]);
|
||||
const roleIds = ref([]);
|
||||
const queryParams = reactive({
|
||||
roleName: "",
|
||||
roleKey: ""
|
||||
});
|
||||
const query = reactive({
|
||||
roleName: "",
|
||||
roleKey: ""
|
||||
});
|
||||
const pageInfo = reactive({
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
});
|
||||
const formInstance = ref();
|
||||
const isVisited = ref(false);
|
||||
const form = ref();
|
||||
//角色搜索重置
|
||||
const handleReset = () => {
|
||||
roleForm.value.resetFields();
|
||||
searchRole();
|
||||
};
|
||||
const handleDialogReset = () => {
|
||||
formInstance.value.resetFields();
|
||||
getExcludeRole();
|
||||
};
|
||||
//根据菜单id获取角色信息
|
||||
const searchRole = async () => {
|
||||
let params = {
|
||||
menuId: menuId,
|
||||
...queryParams,
|
||||
...pageInfo
|
||||
};
|
||||
loading.value = true
|
||||
getRoleInfoByMenuId(params).then(res => {
|
||||
if (res.code === 1000) {
|
||||
showDeleteCurrent.value = res.data.rows.length === 0;
|
||||
list.value = res.data.rows;
|
||||
total.value = res.data.total;
|
||||
loading.value = false;
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
};
|
||||
//获取添加弹窗的角色
|
||||
const getExcludeRole = async () => {
|
||||
let params = {
|
||||
menuId: menuId,
|
||||
...query,
|
||||
...pageInfo
|
||||
};
|
||||
dialogLoading.value = true;
|
||||
getRoleExcludeMenuId(params).then(res => {
|
||||
if (res.code === 1000) {
|
||||
roleList.value = res.data.rows;
|
||||
dialogTotal.value = res.data.total;
|
||||
dialogLoading.value = false;
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
//添加角色
|
||||
const handleAdd = () => {
|
||||
getExcludeRole()
|
||||
isVisited.value = true
|
||||
dialogDisabled.value = true
|
||||
}
|
||||
//全部取消授权
|
||||
const handleCancelAll = () => {
|
||||
ElMessageBox.confirm(`确认全部取消授权吗?`, "系统提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(() => {
|
||||
unbindAllRole(menuId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg);
|
||||
searchRole()
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
//取消授权
|
||||
const handleCancelAuthorization = (roleId) => {
|
||||
cancelAuthorization(menuId, roleId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg);
|
||||
moreCancelDisabled.value=true
|
||||
searchRole()
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
//批量取消授权
|
||||
const handleMoreCancelAuthorization = (cancelUserIds, userName) => {
|
||||
ElMessageBox.confirm(`确认取消授权名称为"${userName}"的角色吗?`, "系统提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(() => {
|
||||
handleCancelAuthorization(cancelUserIds)
|
||||
})
|
||||
}
|
||||
const handleBack=()=>{
|
||||
tagsViewStore.delVisitedViews(router.currentRoute.value.path)
|
||||
router.push('/system/menu')
|
||||
}
|
||||
//删除当前菜单
|
||||
const handleDeleteMenu=()=>{
|
||||
ElMessageBox.confirm(`确认删除名称为"${menuName}"的菜单吗?`, "系统提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(() => {
|
||||
delMenu(menuId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg)
|
||||
tagsViewStore.delVisitedViews(router.currentRoute.value.path)
|
||||
router.push('/system/menu')
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
//取消
|
||||
const handleCancel = () => {
|
||||
isVisited.value = false;
|
||||
};
|
||||
|
||||
const handleSelect = (selection) => {
|
||||
if (selection.length !== 0) {
|
||||
moreCancelDisabled.value = false;
|
||||
cancelRoleIds.value=selection.map(item=>item.roleId)
|
||||
roleNames.value=selection.map(item=>item.roleName).join()
|
||||
} else {
|
||||
moreCancelDisabled.value = true;
|
||||
}
|
||||
}
|
||||
const handleDialogSelect = (selection) => {
|
||||
if (selection.length !== 0) {
|
||||
dialogDisabled.value = false;
|
||||
roleIds.value=selection.map(item=>item.roleId)
|
||||
} else {
|
||||
dialogDisabled.value = true;
|
||||
}
|
||||
}
|
||||
//添加角色
|
||||
const handleSubmit = (roleId) => {
|
||||
bindRoleAndMenu(menuId,roleId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg);
|
||||
searchRole()
|
||||
isVisited.value = false
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
//切换每页显示条数
|
||||
const handleSizeChange = (val) => {
|
||||
pageInfo.pageSize = val;
|
||||
searchRole();
|
||||
};
|
||||
const handleSizeChangeDialog = (val) => {
|
||||
pageInfo.pageSize = val;
|
||||
getExcludeRole();
|
||||
};
|
||||
|
||||
//点击页码进行分页功能
|
||||
const handleCurrentChange = (val) => {
|
||||
pageInfo.pageNum = val;
|
||||
searchRole();
|
||||
};
|
||||
const handleCurrentChangeDialog = (val) => {
|
||||
pageInfo.pageNum = val;
|
||||
getExcludeRole();
|
||||
};
|
||||
|
||||
searchRole()
|
||||
</script>
|
||||
|
||||
@@ -1,468 +1,468 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form :model="queryParams" class="search-form select-form" ref="queryInstance"
|
||||
style="margin-top: 18px;margin-left: 16px">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-form-item label="菜单名称" prop="menuName">
|
||||
<el-input v-model="queryParams.menuName" placeholder="请输入菜单名称" clearable @keyup.enter.native="getList"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="5" :offset="1">
|
||||
<el-form-item label="状态" prop="state">
|
||||
<el-select v-model="queryParams.state" placeholder="请选择菜单状态" clearable remote filterable style="width: 100%" @change="getList">
|
||||
<el-option v-for="item in cacheStore.getDict('normal_disable')" :key="item.value" :label="item.label"
|
||||
:value="item.value"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6" :offset="1">
|
||||
<el-form-item>
|
||||
<el-button color="#DED0B2" @click="getList" :icon="Search">搜索</el-button>
|
||||
<el-button @click="handleReset(queryInstance)" :icon="Refresh">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div class="table-header-btn">
|
||||
<el-button color="#DED0B2" @click="handleAdd" v-perm="['admin:menu:add']">新增</el-button>
|
||||
<el-button type="" color="#DED0B2" @click="handleExpand" :icon="Sort">{{ isExpand ? '全部收起' : '全部展开' }}</el-button>
|
||||
</div>
|
||||
|
||||
<el-table :data="list" ref="tableTree" :default-expand-all="isExpand"
|
||||
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }" row-key="menuId" :lazy="true"
|
||||
@cell-click="cellClick"
|
||||
v-loading="loading" v-tabh>
|
||||
<el-table-column prop="menuName" label="菜单名称"/>
|
||||
<el-table-column prop="icon" label="图标" width="60px">
|
||||
<template #default="scope">
|
||||
<!-- <el-icon>-->
|
||||
<!-- <component :is="scope.row.icon" />-->
|
||||
<!-- </el-icon>-->
|
||||
<svg-icon :name="scope.row.icon" :class-name="'black-icon'"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="orderNum" label="排序" width="60px"/>
|
||||
<el-table-column prop="perms" label="权限标识"/>
|
||||
<el-table-column prop="component" label="组件路径"/>
|
||||
<el-table-column prop="path" label="路由地址"/>
|
||||
<el-table-column prop="state" label="状态" width="80px">
|
||||
<template #default="scope">
|
||||
<tag dict-type="normal_disable" :value="scope.row.state"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间"/>
|
||||
<el-table-column label="操作" prop="operation" align="right">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" v-if="scope.row.menuType!=='B'" @click="handleAdd(scope.row)" link
|
||||
v-perm="['admin:menu:add']">新增
|
||||
</el-button>
|
||||
<el-button type="primary" @click="handleEdit(scope.row.menuId)" link v-perm="['admin:menu:edit']">修改
|
||||
</el-button>
|
||||
<!-- <el-button type="primary" @click="handleAssignRoles(scope.row)" link>分配角色</el-button> -->
|
||||
<popover-delete :name="scope.row.menuName" :type="'菜单'" @delete="handleDel(scope.row.menuId)"
|
||||
:perm="['admin:menu:del']"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<el-dialog v-model="isVisited" :title="title" width="700px">
|
||||
<el-form :model="form" :rules="formRules" ref="formInstance">
|
||||
<el-form-item label="上级菜单">
|
||||
<el-tree-select v-model="form.parentId" :data="menuOpt" style="width: 100%;"
|
||||
:filter-node-method="filterNodeMethod" clearable filterable :check-strictly="true"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="菜单类型">
|
||||
<el-radio-group v-model="form.menuType">
|
||||
<el-radio
|
||||
v-for="item in cacheStore.getDict('menu_type')"
|
||||
:label="item.value" :key="item.value">
|
||||
{{ item.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="菜单图标">
|
||||
<template #label>
|
||||
<div style="display: flex;align-items: center">
|
||||
<span style="margin-right: 5px">菜单图标</span>
|
||||
<svg-icon v-if="form.icon" :name="form.icon" :class-name="'middle-icon'"/>
|
||||
</div>
|
||||
</template>
|
||||
<icon-select :active-icon="form.icon" @getSelectIcon="getSelectIcon"/>
|
||||
</el-form-item>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="菜单名称" prop="menuName" required>
|
||||
<el-input v-model="form.menuName" placeholder=""></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11" :offset="1">
|
||||
<el-form-item label="显示顺序" prop="orderNum" required>
|
||||
<el-input-number v-model="form.orderNum" controls-position="right"></el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="是否外链">
|
||||
<el-radio-group v-model="form.isFrame">
|
||||
<el-radio v-for="item in cacheStore.getDict('is_frame')"
|
||||
:label="item.value"
|
||||
:key="item.value">
|
||||
{{ item.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11" :offset="1" v-if="form.menuType === 'B'">
|
||||
<el-form-item label="权限字符" prop="perms" required>
|
||||
<el-input v-model="form.perms"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11" :offset="1" v-if="form.menuType !== 'B'">
|
||||
<el-form-item label="路由地址" prop="path" required>
|
||||
<el-input v-model="form.path"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row v-if="form.menuType === 'M'">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="组件路径" prop="component" required>
|
||||
<el-input v-model="form.component"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="11" :offset="1">
|
||||
<el-form-item label="权限字符" prop="perms" required>
|
||||
<el-input v-model="form.perms"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row v-if="form.menuType === 'M'">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="路由参数">
|
||||
<el-input v-model="form.pathParams"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11" :offset="1" v-if="form.menuType !== 'B'">
|
||||
<el-form-item label="是否缓存">
|
||||
<el-radio-group v-model="form.isCache">
|
||||
<el-radio v-for="item in cacheStore.getDict('is_cache')"
|
||||
:label="item.value" :key="item.value">
|
||||
{{ item.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12" v-if="form.menuType !== 'B'">
|
||||
<el-form-item label="显示状态">
|
||||
<el-radio-group v-model="form.visible">
|
||||
<el-radio v-for="item in cacheStore.getDict('show_hide')" :label="item.value"
|
||||
:key="item.value">
|
||||
{{ item.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11" :offset="1" v-if="form.menuType !== 'B'">
|
||||
<el-form-item label="菜单状态">
|
||||
<el-radio-group v-model="form.state">
|
||||
<el-radio v-for="item in cacheStore.getDict('normal_disable')" :label="item.value"
|
||||
:key="item.value">
|
||||
{{ item.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="handleCancel">取消</el-button>
|
||||
<el-button type="primary" @click="handleSubmit(formInstance)">
|
||||
确定
|
||||
</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {getMenuList, getMenuInfo, getMenuOpt, addMenu, editMenu, delMenu} from '@/api/system/menuman.js'
|
||||
import {Plus, Sort} from '@element-plus/icons-vue'
|
||||
import {ElMessage, ElMessageBox} from 'element-plus'
|
||||
import {useCacheStore} from '@/stores/cache.js'
|
||||
import Tag from '@/components/Tag.vue'
|
||||
import SvgIcon from '@/components/svgIcon/index.vue'
|
||||
import IconSelect from '@/components/iconSelect/index.vue'
|
||||
import PopoverDelete from "@/components/PopoverDelete.vue";
|
||||
import {Refresh, Search} from '@element-plus/icons-vue'
|
||||
|
||||
const cacheStore = useCacheStore()
|
||||
const queryParams = reactive({
|
||||
menuName: undefined,
|
||||
state: undefined
|
||||
})
|
||||
const queryInstance = ref()
|
||||
const loading = ref(true)
|
||||
const list = ref([])
|
||||
const tableTree = ref()
|
||||
const isExpand = ref(true)
|
||||
const isVisited = ref(false)
|
||||
const title = ref('')
|
||||
const form = ref({
|
||||
parentId: '',
|
||||
menuType: 'B',
|
||||
icon: '',
|
||||
menuName: '',
|
||||
orderNum: 0,
|
||||
visible: '0',
|
||||
state: '1',
|
||||
isCache: '0',
|
||||
isFrame: '0', //是否外链
|
||||
perms: '',
|
||||
pathParams: '',
|
||||
path: '',
|
||||
component: ''
|
||||
})
|
||||
const formRules = ref({
|
||||
menuName: [{required: true, message: '请输入菜单名称', trigger: 'blur'}],
|
||||
orderNum: [{required: true, message: '请输入显示顺序', trigger: 'blur'}],
|
||||
component: [{required: true, message: '请输入组件路径', trigger: 'blur'}],
|
||||
perms: [{required: true, message: '请输入权限字符', trigger: 'blur'}],
|
||||
path: [{required: true, message: '请输入路由地址', trigger: 'blur'}],
|
||||
})
|
||||
const formInstance = ref()
|
||||
const menuOpt = ref([])
|
||||
const router = useRouter()
|
||||
const getSelectIcon = (val) => {
|
||||
form.value.icon = val
|
||||
}
|
||||
|
||||
|
||||
const getList = async () => {
|
||||
loading.value = true
|
||||
getMenuList(queryParams).then(res => {
|
||||
if (res.code === 1000) {
|
||||
list.value = res.data
|
||||
loading.value = false
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const handleReset = (instance) => {
|
||||
if (!instance) return
|
||||
instance.resetFields()
|
||||
getList()
|
||||
}
|
||||
const restFrom = () => {
|
||||
form.value = {
|
||||
parentId: '',
|
||||
menuType: 'B',
|
||||
icon: '',
|
||||
menuName: '',
|
||||
orderNum: 0,
|
||||
visible: '1',
|
||||
state: '1',
|
||||
isCache: '0',
|
||||
isFrame: '0', //是否外链
|
||||
perms: '',
|
||||
pathParams: '',
|
||||
path: '',
|
||||
component: ''
|
||||
}
|
||||
}
|
||||
|
||||
const cellClick = (row, column) => {
|
||||
if ("operation" !== column.property) {
|
||||
tableTree.value.toggleRowExpansion(row)
|
||||
}
|
||||
}
|
||||
|
||||
const handleAdd = async (row) => {
|
||||
title.value = '新增菜单'
|
||||
restFrom()
|
||||
if (row.menuId !== undefined) {
|
||||
await getMenuInfo(row.menuId).then(res => {
|
||||
form.value.parentId = res.data.menuId
|
||||
})
|
||||
}
|
||||
await getMenuOpt().then(res => {
|
||||
menuOpt.value = [{
|
||||
value: 0,
|
||||
label: "一级目录",
|
||||
children: res.data
|
||||
}]
|
||||
})
|
||||
isVisited.value = true
|
||||
nextTick(() => {
|
||||
// 清空校验
|
||||
formInstance.value.clearValidate()
|
||||
})
|
||||
}
|
||||
const handleExpand = () => {
|
||||
isExpand.value = !isExpand.value
|
||||
expandChange(list.value, isExpand)
|
||||
getList()
|
||||
}
|
||||
//展开收缩封装函数
|
||||
const expandChange = (data, isExpansion) => {
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
tableTree.value.toggleRowExpansion(data[i], isExpansion);
|
||||
if (data[i].children !== null) {
|
||||
expandChange(data[i].children, isExpansion);
|
||||
}
|
||||
}
|
||||
}
|
||||
//分配角色
|
||||
const handleAssignRoles = (row) => {
|
||||
router.push('/menu-auth/role/' + row.menuId + '/' + row.menuName)
|
||||
}
|
||||
const handleEdit = async (menuId) => {
|
||||
title.value = '修改菜单'
|
||||
restFrom()
|
||||
await getMenuInfo(menuId).then(res => {
|
||||
if (res.data.isFrame == false) {
|
||||
res.data.isFrame = '0'
|
||||
} else {
|
||||
res.data.isFrame = '1'
|
||||
}
|
||||
if (res.data.isCache == false) {
|
||||
res.data.isCache = '0'
|
||||
} else {
|
||||
res.data.isCache = '1'
|
||||
}
|
||||
form.value = {...res.data}
|
||||
})
|
||||
await getMenuOpt(menuId).then(res => {
|
||||
menuOpt.value = [{
|
||||
value: 0,
|
||||
label: "一级目录",
|
||||
children: res.data
|
||||
}]
|
||||
})
|
||||
isVisited.value = true
|
||||
nextTick(() => {
|
||||
// 清空校验
|
||||
formInstance.value.clearValidate()
|
||||
})
|
||||
}
|
||||
|
||||
const handleDel = (menuId) => {
|
||||
delMenu(menuId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg)
|
||||
getList()
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const handleSubmit = async (instance) => {
|
||||
if (!instance) return
|
||||
instance.validate(async (valid, fields) => {
|
||||
if (!valid) return
|
||||
form.value.isFrame = form.value.isFrame !== '0';
|
||||
form.value.isCache = form.value.isCache !== '0';
|
||||
if (title.value === '新增菜单') {
|
||||
await addMenu(form.value).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg)
|
||||
getList()
|
||||
isVisited.value = false
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
await editMenu(form.value).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg)
|
||||
getList()
|
||||
isVisited.value = false
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const filterNodeMethod = (value, data) => data.label.includes(value)
|
||||
|
||||
const handleCancel = () => {
|
||||
form.value = {
|
||||
parentId: '',
|
||||
menuType: 'D',
|
||||
icon: '',
|
||||
menuName: '',
|
||||
orderNum: 0,
|
||||
visible: '0',
|
||||
state: '1',
|
||||
isCache: '0',
|
||||
isFrame: '0', //是否外链
|
||||
perms: '',
|
||||
pathParams: '',
|
||||
path: '',
|
||||
component: ''
|
||||
}
|
||||
isVisited.value = false
|
||||
}
|
||||
|
||||
getList()
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.select-form {
|
||||
.el-select {
|
||||
|
||||
.el-select__wrapper {
|
||||
.el-select__suffix::before {
|
||||
content: "";
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border: solid #a8abb2;
|
||||
border-width: 0 0 1px 1px;
|
||||
transform: translate(-50%, -50%) rotate(-45deg);
|
||||
}
|
||||
}
|
||||
|
||||
.is-focused {
|
||||
.el-select__suffix::before {
|
||||
margin-top: 10px;
|
||||
transform: translate(-50%, -50%) rotate(-225deg) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.el-input-number {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.el-tree-select {
|
||||
:deep(.el-select) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-table__header) {
|
||||
.is-leaf:first-child {
|
||||
.cell {
|
||||
margin-left: 5px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-table__body) {
|
||||
.el-table__cell:first-child {
|
||||
.cell {
|
||||
margin-left: -13px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div>
|
||||
<el-form :model="queryParams" class="search-form select-form" ref="queryInstance"
|
||||
style="margin-top: 18px;margin-left: 16px">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-form-item label="菜单名称" prop="menuName">
|
||||
<el-input v-model="queryParams.menuName" placeholder="请输入菜单名称" clearable @keyup.enter.native="getList"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="5" :offset="1">
|
||||
<el-form-item label="状态" prop="state">
|
||||
<el-select v-model="queryParams.state" placeholder="请选择菜单状态" clearable remote filterable style="width: 100%" @change="getList">
|
||||
<el-option v-for="item in cacheStore.getDict('normal_disable')" :key="item.value" :label="item.label"
|
||||
:value="item.value"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6" :offset="1">
|
||||
<el-form-item>
|
||||
<el-button color="#DED0B2" @click="getList" :icon="Search">搜索</el-button>
|
||||
<el-button @click="handleReset(queryInstance)" :icon="Refresh">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div class="table-header-btn">
|
||||
<el-button color="#DED0B2" @click="handleAdd" v-perm="['admin:menu:add']">新增</el-button>
|
||||
<el-button type="" color="#DED0B2" @click="handleExpand" :icon="Sort">{{ isExpand ? '全部收起' : '全部展开' }}</el-button>
|
||||
</div>
|
||||
|
||||
<el-table :data="list" ref="tableTree" :default-expand-all="isExpand"
|
||||
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }" row-key="menuId" :lazy="true"
|
||||
@cell-click="cellClick"
|
||||
v-loading="loading" v-tabh>
|
||||
<el-table-column prop="menuName" label="菜单名称"/>
|
||||
<el-table-column prop="icon" label="图标" width="60px">
|
||||
<template #default="scope">
|
||||
<!-- <el-icon>-->
|
||||
<!-- <component :is="scope.row.icon" />-->
|
||||
<!-- </el-icon>-->
|
||||
<svg-icon :name="scope.row.icon" :class-name="'black-icon'"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="orderNum" label="排序" width="60px"/>
|
||||
<el-table-column prop="perms" label="权限标识"/>
|
||||
<el-table-column prop="component" label="组件路径"/>
|
||||
<el-table-column prop="path" label="路由地址"/>
|
||||
<el-table-column prop="state" label="状态" width="80px">
|
||||
<template #default="scope">
|
||||
<tag dict-type="normal_disable" :value="scope.row.state"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间"/>
|
||||
<el-table-column label="操作" prop="operation" align="right">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" v-if="scope.row.menuType!=='B'" @click="handleAdd(scope.row)" link
|
||||
v-perm="['admin:menu:add']">新增
|
||||
</el-button>
|
||||
<el-button type="primary" @click="handleEdit(scope.row.menuId)" link v-perm="['admin:menu:edit']">修改
|
||||
</el-button>
|
||||
<!-- <el-button type="primary" @click="handleAssignRoles(scope.row)" link>分配角色</el-button> -->
|
||||
<popover-delete :name="scope.row.menuName" :type="'菜单'" @delete="handleDel(scope.row.menuId)"
|
||||
:perm="['admin:menu:del']"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<el-dialog v-model="isVisited" :title="title" width="700px">
|
||||
<el-form :model="form" :rules="formRules" ref="formInstance">
|
||||
<el-form-item label="上级菜单">
|
||||
<el-tree-select v-model="form.parentId" :data="menuOpt" style="width: 100%;"
|
||||
:filter-node-method="filterNodeMethod" clearable filterable :check-strictly="true"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="菜单类型">
|
||||
<el-radio-group v-model="form.menuType">
|
||||
<el-radio
|
||||
v-for="item in cacheStore.getDict('menu_type')"
|
||||
:label="item.value" :key="item.value">
|
||||
{{ item.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="菜单图标">
|
||||
<template #label>
|
||||
<div style="display: flex;align-items: center">
|
||||
<span style="margin-right: 5px">菜单图标</span>
|
||||
<svg-icon v-if="form.icon" :name="form.icon" :class-name="'middle-icon'"/>
|
||||
</div>
|
||||
</template>
|
||||
<icon-select :active-icon="form.icon" @getSelectIcon="getSelectIcon"/>
|
||||
</el-form-item>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="菜单名称" prop="menuName" required>
|
||||
<el-input v-model="form.menuName" placeholder=""></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11" :offset="1">
|
||||
<el-form-item label="显示顺序" prop="orderNum" required>
|
||||
<el-input-number v-model="form.orderNum" controls-position="right"></el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="是否外链">
|
||||
<el-radio-group v-model="form.isFrame">
|
||||
<el-radio v-for="item in cacheStore.getDict('is_frame')"
|
||||
:label="item.value"
|
||||
:key="item.value">
|
||||
{{ item.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11" :offset="1" v-if="form.menuType === 'B'">
|
||||
<el-form-item label="权限字符" prop="perms" required>
|
||||
<el-input v-model="form.perms"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11" :offset="1" v-if="form.menuType !== 'B'">
|
||||
<el-form-item label="路由地址" prop="path" required>
|
||||
<el-input v-model="form.path"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row v-if="form.menuType === 'M'">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="组件路径" prop="component" required>
|
||||
<el-input v-model="form.component"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="11" :offset="1">
|
||||
<el-form-item label="权限字符" prop="perms" required>
|
||||
<el-input v-model="form.perms"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row v-if="form.menuType === 'M'">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="路由参数">
|
||||
<el-input v-model="form.pathParams"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11" :offset="1" v-if="form.menuType !== 'B'">
|
||||
<el-form-item label="是否缓存">
|
||||
<el-radio-group v-model="form.isCache">
|
||||
<el-radio v-for="item in cacheStore.getDict('is_cache')"
|
||||
:label="item.value" :key="item.value">
|
||||
{{ item.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12" v-if="form.menuType !== 'B'">
|
||||
<el-form-item label="显示状态">
|
||||
<el-radio-group v-model="form.visible">
|
||||
<el-radio v-for="item in cacheStore.getDict('show_hide')" :label="item.value"
|
||||
:key="item.value">
|
||||
{{ item.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11" :offset="1" v-if="form.menuType !== 'B'">
|
||||
<el-form-item label="菜单状态">
|
||||
<el-radio-group v-model="form.state">
|
||||
<el-radio v-for="item in cacheStore.getDict('normal_disable')" :label="item.value"
|
||||
:key="item.value">
|
||||
{{ item.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="handleCancel">取消</el-button>
|
||||
<el-button type="primary" @click="handleSubmit(formInstance)">
|
||||
确定
|
||||
</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {getMenuList, getMenuInfo, getMenuOpt, addMenu, editMenu, delMenu} from '@/api/system/menuman.js'
|
||||
import {Plus, Sort} from '@element-plus/icons-vue'
|
||||
import {ElMessage, ElMessageBox} from 'element-plus'
|
||||
import {useCacheStore} from '@/stores/cache.js'
|
||||
import Tag from '@/components/Tag.vue'
|
||||
import SvgIcon from '@/components/svgIcon/index.vue'
|
||||
import IconSelect from '@/components/iconSelect/index.vue'
|
||||
import PopoverDelete from "@/components/PopoverDelete.vue";
|
||||
import {Refresh, Search} from '@element-plus/icons-vue'
|
||||
|
||||
const cacheStore = useCacheStore()
|
||||
const queryParams = reactive({
|
||||
menuName: undefined,
|
||||
state: undefined
|
||||
})
|
||||
const queryInstance = ref()
|
||||
const loading = ref(true)
|
||||
const list = ref([])
|
||||
const tableTree = ref()
|
||||
const isExpand = ref(true)
|
||||
const isVisited = ref(false)
|
||||
const title = ref('')
|
||||
const form = ref({
|
||||
parentId: '',
|
||||
menuType: 'B',
|
||||
icon: '',
|
||||
menuName: '',
|
||||
orderNum: 0,
|
||||
visible: '0',
|
||||
state: '1',
|
||||
isCache: '0',
|
||||
isFrame: '0', //是否外链
|
||||
perms: '',
|
||||
pathParams: '',
|
||||
path: '',
|
||||
component: ''
|
||||
})
|
||||
const formRules = ref({
|
||||
menuName: [{required: true, message: '请输入菜单名称', trigger: 'blur'}],
|
||||
orderNum: [{required: true, message: '请输入显示顺序', trigger: 'blur'}],
|
||||
component: [{required: true, message: '请输入组件路径', trigger: 'blur'}],
|
||||
perms: [{required: true, message: '请输入权限字符', trigger: 'blur'}],
|
||||
path: [{required: true, message: '请输入路由地址', trigger: 'blur'}],
|
||||
})
|
||||
const formInstance = ref()
|
||||
const menuOpt = ref([])
|
||||
const router = useRouter()
|
||||
const getSelectIcon = (val) => {
|
||||
form.value.icon = val
|
||||
}
|
||||
|
||||
|
||||
const getList = async () => {
|
||||
loading.value = true
|
||||
getMenuList(queryParams).then(res => {
|
||||
if (res.code === 1000) {
|
||||
list.value = res.data
|
||||
loading.value = false
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const handleReset = (instance) => {
|
||||
if (!instance) return
|
||||
instance.resetFields()
|
||||
getList()
|
||||
}
|
||||
const restFrom = () => {
|
||||
form.value = {
|
||||
parentId: '',
|
||||
menuType: 'B',
|
||||
icon: '',
|
||||
menuName: '',
|
||||
orderNum: 0,
|
||||
visible: '1',
|
||||
state: '1',
|
||||
isCache: '0',
|
||||
isFrame: '0', //是否外链
|
||||
perms: '',
|
||||
pathParams: '',
|
||||
path: '',
|
||||
component: ''
|
||||
}
|
||||
}
|
||||
|
||||
const cellClick = (row, column) => {
|
||||
if ("operation" !== column.property) {
|
||||
tableTree.value.toggleRowExpansion(row)
|
||||
}
|
||||
}
|
||||
|
||||
const handleAdd = async (row) => {
|
||||
title.value = '新增菜单'
|
||||
restFrom()
|
||||
if (row.menuId !== undefined) {
|
||||
await getMenuInfo(row.menuId).then(res => {
|
||||
form.value.parentId = res.data.menuId
|
||||
})
|
||||
}
|
||||
await getMenuOpt().then(res => {
|
||||
menuOpt.value = [{
|
||||
value: 0,
|
||||
label: "一级目录",
|
||||
children: res.data
|
||||
}]
|
||||
})
|
||||
isVisited.value = true
|
||||
nextTick(() => {
|
||||
// 清空校验
|
||||
formInstance.value.clearValidate()
|
||||
})
|
||||
}
|
||||
const handleExpand = () => {
|
||||
isExpand.value = !isExpand.value
|
||||
expandChange(list.value, isExpand)
|
||||
getList()
|
||||
}
|
||||
//展开收缩封装函数
|
||||
const expandChange = (data, isExpansion) => {
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
tableTree.value.toggleRowExpansion(data[i], isExpansion);
|
||||
if (data[i].children !== null) {
|
||||
expandChange(data[i].children, isExpansion);
|
||||
}
|
||||
}
|
||||
}
|
||||
//分配角色
|
||||
const handleAssignRoles = (row) => {
|
||||
router.push('/menu-auth/role/' + row.menuId + '/' + row.menuName)
|
||||
}
|
||||
const handleEdit = async (menuId) => {
|
||||
title.value = '修改菜单'
|
||||
restFrom()
|
||||
await getMenuInfo(menuId).then(res => {
|
||||
if (res.data.isFrame == false) {
|
||||
res.data.isFrame = '0'
|
||||
} else {
|
||||
res.data.isFrame = '1'
|
||||
}
|
||||
if (res.data.isCache == false) {
|
||||
res.data.isCache = '0'
|
||||
} else {
|
||||
res.data.isCache = '1'
|
||||
}
|
||||
form.value = {...res.data}
|
||||
})
|
||||
await getMenuOpt(menuId).then(res => {
|
||||
menuOpt.value = [{
|
||||
value: 0,
|
||||
label: "一级目录",
|
||||
children: res.data
|
||||
}]
|
||||
})
|
||||
isVisited.value = true
|
||||
nextTick(() => {
|
||||
// 清空校验
|
||||
formInstance.value.clearValidate()
|
||||
})
|
||||
}
|
||||
|
||||
const handleDel = (menuId) => {
|
||||
delMenu(menuId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg)
|
||||
getList()
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const handleSubmit = async (instance) => {
|
||||
if (!instance) return
|
||||
instance.validate(async (valid, fields) => {
|
||||
if (!valid) return
|
||||
form.value.isFrame = form.value.isFrame !== '0';
|
||||
form.value.isCache = form.value.isCache !== '0';
|
||||
if (title.value === '新增菜单') {
|
||||
await addMenu(form.value).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg)
|
||||
getList()
|
||||
isVisited.value = false
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
await editMenu(form.value).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg)
|
||||
getList()
|
||||
isVisited.value = false
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const filterNodeMethod = (value, data) => data.label.includes(value)
|
||||
|
||||
const handleCancel = () => {
|
||||
form.value = {
|
||||
parentId: '',
|
||||
menuType: 'D',
|
||||
icon: '',
|
||||
menuName: '',
|
||||
orderNum: 0,
|
||||
visible: '0',
|
||||
state: '1',
|
||||
isCache: '0',
|
||||
isFrame: '0', //是否外链
|
||||
perms: '',
|
||||
pathParams: '',
|
||||
path: '',
|
||||
component: ''
|
||||
}
|
||||
isVisited.value = false
|
||||
}
|
||||
|
||||
getList()
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.select-form {
|
||||
.el-select {
|
||||
|
||||
.el-select__wrapper {
|
||||
.el-select__suffix::before {
|
||||
content: "";
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border: solid #a8abb2;
|
||||
border-width: 0 0 1px 1px;
|
||||
transform: translate(-50%, -50%) rotate(-45deg);
|
||||
}
|
||||
}
|
||||
|
||||
.is-focused {
|
||||
.el-select__suffix::before {
|
||||
margin-top: 10px;
|
||||
transform: translate(-50%, -50%) rotate(-225deg) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.el-input-number {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.el-tree-select {
|
||||
:deep(.el-select) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-table__header) {
|
||||
.is-leaf:first-child {
|
||||
.cell {
|
||||
margin-left: 5px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-table__body) {
|
||||
.el-table__cell:first-child {
|
||||
.cell {
|
||||
margin-left: -13px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,158 +1,158 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form :model="queryParams" inline class="query-form" ref="queryInstance">
|
||||
<el-form-item label="状态" prop="state">
|
||||
<el-select v-model="queryParams.state" placeholder="请选择状态" clearable filterable>
|
||||
<el-option label="未读" value="0"/>
|
||||
<el-option label="已读" value="1"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="getList" :icon="Search">搜索</el-button>
|
||||
<el-button type="primary" @click="handleReset" :icon="Refresh">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="table">
|
||||
<el-table
|
||||
:data="list"
|
||||
row-key="noticeId"
|
||||
:lazy="true"
|
||||
v-loading="loading"
|
||||
v-tabh
|
||||
>
|
||||
<el-table-column label="序号" type="index" align="center" width="60"/>
|
||||
<el-table-column prop="noticeTitle" label="公告标题" align="center"/>
|
||||
<el-table-column prop="state" label="阅读状态" align="center">
|
||||
<template #default="scope">
|
||||
<tag dict-type="read_state" :value="scope.row.state"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" size="mini" @click="handleViewDetails(scope.row.noticeId)" link>详情
|
||||
</el-button>
|
||||
<popover-delete :name="scope.row.noticeTitle" :type="'通知公告'"
|
||||
@delete="handleDelete(scope.row.noticeId)"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<paging :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize" :page-sizes="[10, 20, 30, 40,50]"
|
||||
:total="total" @changeSize="handleSizeChange" @goPage="handleCurrentChange"/>
|
||||
<!--详情弹窗-->
|
||||
<el-dialog v-model="isViewVisited" title="通知公告详情" width="1200px" @close="handleCloseDialog">
|
||||
<el-form :model="viewForm" label-width="100px">
|
||||
<el-row>
|
||||
<el-col :span="24" class="title-block">
|
||||
<!-- <el-form-item label="公告标题 :" prop="noticeTitle">-->
|
||||
<el-text class="title">{{ viewForm.noticeTitle }}</el-text>
|
||||
<!-- </el-form-item>-->
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<!-- <el-form-item label="公告内容 :" prop="noticeContent">-->
|
||||
<el-text v-if="viewForm.contentType == 'text'">{{ viewForm.noticeContent }}</el-text>
|
||||
<span v-else v-html="viewForm.noticeContent"></span>
|
||||
<!-- </el-form-item>-->
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {ElMessage, ElMessageBox} from "element-plus";
|
||||
import {getNotifyList, getNotifyDetail, deleteSingleNotify} from "@/api/notice/notify";
|
||||
import {View, Delete, Search, Refresh} from "@element-plus/icons-vue";
|
||||
import {useRouter} from "vue-router";
|
||||
import Paging from "@/components/pagination/index.vue";
|
||||
|
||||
const queryParams = reactive({
|
||||
state: null
|
||||
})
|
||||
const router = useRouter()
|
||||
const loading = ref(true)
|
||||
const list = ref([])
|
||||
const total = ref([]);
|
||||
const isViewVisited = ref(false);
|
||||
const viewForm = ref();
|
||||
const pageInfo = reactive({
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
});
|
||||
|
||||
//重置搜索
|
||||
const handleReset = () => {
|
||||
getList()
|
||||
}
|
||||
const getList = async () => {
|
||||
let params = {
|
||||
cluster: "notice",
|
||||
...queryParams,
|
||||
...pageInfo
|
||||
};
|
||||
loading.value = true
|
||||
getNotifyList(params).then(res => {
|
||||
if (res.code === 1000) {
|
||||
list.value = res.data.rows;
|
||||
total.value = res.data.total;
|
||||
loading.value = false;
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
}).catch(err => {
|
||||
loading.value = false;
|
||||
})
|
||||
};
|
||||
//查看详情
|
||||
const handleViewDetails = (noticeId) => {
|
||||
getNotifyDetail(noticeId).then(res => {
|
||||
// bellSocket.value.searchNotifyList()
|
||||
isViewVisited.value = true
|
||||
viewForm.value = res.data
|
||||
})
|
||||
}
|
||||
//关闭详情弹窗
|
||||
const handleCloseDialog = () => {
|
||||
isViewVisited.value = false
|
||||
}
|
||||
//删除单个消息
|
||||
const handleDelete = (noticeId) => {
|
||||
deleteSingleNotify(noticeId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg)
|
||||
getList()
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
};
|
||||
//切换每页显示条数
|
||||
const handleSizeChange = (val) => {
|
||||
pageInfo.pageSize = val;
|
||||
getList();
|
||||
};
|
||||
|
||||
//点击页码进行分页功能
|
||||
const handleCurrentChange = (val) => {
|
||||
pageInfo.pageNum = val;
|
||||
getList();
|
||||
};
|
||||
getList()
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.title-block {
|
||||
text-align: center;
|
||||
padding-bottom: 30px;
|
||||
|
||||
.title {
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.tox-tinymce-aux {
|
||||
z-index: 5000 !important;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div>
|
||||
<el-form :model="queryParams" inline class="query-form" ref="queryInstance">
|
||||
<el-form-item label="状态" prop="state">
|
||||
<el-select v-model="queryParams.state" placeholder="请选择状态" clearable filterable>
|
||||
<el-option label="未读" value="0"/>
|
||||
<el-option label="已读" value="1"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="getList" :icon="Search">搜索</el-button>
|
||||
<el-button type="primary" @click="handleReset" :icon="Refresh">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="table">
|
||||
<el-table
|
||||
:data="list"
|
||||
row-key="noticeId"
|
||||
:lazy="true"
|
||||
v-loading="loading"
|
||||
v-tabh
|
||||
>
|
||||
<el-table-column label="序号" type="index" align="center" width="60"/>
|
||||
<el-table-column prop="noticeTitle" label="公告标题" align="center"/>
|
||||
<el-table-column prop="state" label="阅读状态" align="center">
|
||||
<template #default="scope">
|
||||
<tag dict-type="read_state" :value="scope.row.state"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" size="mini" @click="handleViewDetails(scope.row.noticeId)" link>详情
|
||||
</el-button>
|
||||
<popover-delete :name="scope.row.noticeTitle" :type="'通知公告'"
|
||||
@delete="handleDelete(scope.row.noticeId)"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<paging :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize" :page-sizes="[10, 20, 30, 40,50]"
|
||||
:total="total" @changeSize="handleSizeChange" @goPage="handleCurrentChange"/>
|
||||
<!--详情弹窗-->
|
||||
<el-dialog v-model="isViewVisited" title="通知公告详情" width="1200px" @close="handleCloseDialog">
|
||||
<el-form :model="viewForm" label-width="100px">
|
||||
<el-row>
|
||||
<el-col :span="24" class="title-block">
|
||||
<!-- <el-form-item label="公告标题 :" prop="noticeTitle">-->
|
||||
<el-text class="title">{{ viewForm.noticeTitle }}</el-text>
|
||||
<!-- </el-form-item>-->
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<!-- <el-form-item label="公告内容 :" prop="noticeContent">-->
|
||||
<el-text v-if="viewForm.contentType == 'text'">{{ viewForm.noticeContent }}</el-text>
|
||||
<span v-else v-html="viewForm.noticeContent"></span>
|
||||
<!-- </el-form-item>-->
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {ElMessage, ElMessageBox} from "element-plus";
|
||||
import {getNotifyList, getNotifyDetail, deleteSingleNotify} from "@/api/notice/notify";
|
||||
import {View, Delete, Search, Refresh} from "@element-plus/icons-vue";
|
||||
import {useRouter} from "vue-router";
|
||||
import Paging from "@/components/pagination/index.vue";
|
||||
|
||||
const queryParams = reactive({
|
||||
state: null
|
||||
})
|
||||
const router = useRouter()
|
||||
const loading = ref(true)
|
||||
const list = ref([])
|
||||
const total = ref([]);
|
||||
const isViewVisited = ref(false);
|
||||
const viewForm = ref();
|
||||
const pageInfo = reactive({
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
});
|
||||
|
||||
//重置搜索
|
||||
const handleReset = () => {
|
||||
getList()
|
||||
}
|
||||
const getList = async () => {
|
||||
let params = {
|
||||
cluster: "notice",
|
||||
...queryParams,
|
||||
...pageInfo
|
||||
};
|
||||
loading.value = true
|
||||
getNotifyList(params).then(res => {
|
||||
if (res.code === 1000) {
|
||||
list.value = res.data.rows;
|
||||
total.value = res.data.total;
|
||||
loading.value = false;
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
}).catch(err => {
|
||||
loading.value = false;
|
||||
})
|
||||
};
|
||||
//查看详情
|
||||
const handleViewDetails = (noticeId) => {
|
||||
getNotifyDetail(noticeId).then(res => {
|
||||
// bellSocket.value.searchNotifyList()
|
||||
isViewVisited.value = true
|
||||
viewForm.value = res.data
|
||||
})
|
||||
}
|
||||
//关闭详情弹窗
|
||||
const handleCloseDialog = () => {
|
||||
isViewVisited.value = false
|
||||
}
|
||||
//删除单个消息
|
||||
const handleDelete = (noticeId) => {
|
||||
deleteSingleNotify(noticeId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg)
|
||||
getList()
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
};
|
||||
//切换每页显示条数
|
||||
const handleSizeChange = (val) => {
|
||||
pageInfo.pageSize = val;
|
||||
getList();
|
||||
};
|
||||
|
||||
//点击页码进行分页功能
|
||||
const handleCurrentChange = (val) => {
|
||||
pageInfo.pageNum = val;
|
||||
getList();
|
||||
};
|
||||
getList()
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.title-block {
|
||||
text-align: center;
|
||||
padding-bottom: 30px;
|
||||
|
||||
.title {
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.tox-tinymce-aux {
|
||||
z-index: 5000 !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,430 +1,430 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form :model="queryParams" inline class="query-form" ref="queryInstance">
|
||||
<el-form-item label="公告标题" prop="noticeTitle">
|
||||
<el-input v-model="queryParams.noticeTitle" placeholder="请输入公告标题" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="公告类型" prop="noticeType">
|
||||
<el-select v-model="queryParams.noticeType" placeholder="请选择公告类型" clearable filterable>
|
||||
<el-option label="通知" value="1"/>
|
||||
<el-option label="公告" value="2"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="内容类型" prop="contentType">
|
||||
<el-select v-model="queryParams.contentType" placeholder="请选择内容类型" clearable filterable>
|
||||
<el-option label="富文本" value="html"/>
|
||||
<el-option label="文本" value="text"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="发送类型" prop="sendType">
|
||||
<el-select v-model="queryParams.sendType" placeholder="请输入发送类型" filterable clearable>
|
||||
<el-option
|
||||
v-for="item in sendTypeOption"
|
||||
:key="item.value"
|
||||
:label="item.name"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="getList" :icon="Search">搜索</el-button>
|
||||
<el-button type="primary" @click="handleReset" :icon="Refresh">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="table-header-btn">
|
||||
<el-button type="primary" @click="handleAdd" :icon="Plus">新增</el-button>
|
||||
</div>
|
||||
<div class="table">
|
||||
<el-table
|
||||
:data="list"
|
||||
row-key="noticeId"
|
||||
:lazy="true"
|
||||
v-loading="loading"
|
||||
v-tabh
|
||||
>
|
||||
<el-table-column label="序号" type="index" align="center" width="60"/>
|
||||
<el-table-column prop="noticeTitle" label="公告标题" align="center"/>
|
||||
<el-table-column prop="noticeType" label="公告类型" align="center">
|
||||
<template #default="scope">
|
||||
<tag dict-type="notice_type" :value="scope.row.noticeType"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="contentType" label="内容类型" align="center">
|
||||
<template #default="scope">
|
||||
<tag dict-type="content_type" :value="scope.row.contentType"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="sendType" label="发送类型" align="center">
|
||||
<template #default="scope">
|
||||
{{ getSendTypeOptionItem(scope.row.sendType) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" align="center"/>
|
||||
<el-table-column label="操作" align="center">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" size="mini" @click="handleViewDetails(scope.row)" link>详情
|
||||
</el-button>
|
||||
<popover-delete :name="scope.row.noticeTitle" :type="'公告'"
|
||||
@delete="handleDelete(scope.row.noticeId)"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<paging :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize" :page-sizes="[10, 20, 30, 40,50]"
|
||||
:total="total" @changeSize="handleSizeChange" @goPage="handleCurrentChange"/>
|
||||
<!--新增弹窗-->
|
||||
<el-dialog v-model="isVisited" title="新增公告" width="800px">
|
||||
<el-form :model="form" ref="formInstance" label-width="80px" :rules="rules">
|
||||
<el-row>
|
||||
<el-col :span="11">
|
||||
<el-form-item label="公告标题" prop="noticeTitle">
|
||||
<el-input v-model="form.noticeTitle" placeholder="请输入公告标题"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11" :offset="2">
|
||||
<el-form-item label="公告类型" prop="noticeType">
|
||||
<el-radio-group v-model="form.noticeType" size="mini">
|
||||
<el-radio v-for="notice in cacheStore.getDict('notice_type')" :key="notice.value"
|
||||
:label="notice.value">
|
||||
{{ notice.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11">
|
||||
<el-form-item label="发送类型" prop="sendType">
|
||||
<el-select v-model="form.sendType" placeholder="发送类型" filterable clearable
|
||||
@change="handleChangeSendType($event)" style="width: 268px">
|
||||
<el-option
|
||||
v-for="item in sendTypeOption"
|
||||
:key="item.value"
|
||||
:label="item.name"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11" :offset="2" v-if="form.sendType!=='all'">
|
||||
<el-form-item label="发送对象" prop="senderIds">
|
||||
<el-tree-select
|
||||
v-if="form.sendType==='dept'"
|
||||
ref="treeSelect"
|
||||
v-model="form.senderIds"
|
||||
placeholder="请选择发送对象"
|
||||
:data="deptList"
|
||||
:props="deptProps"
|
||||
value-key="value"
|
||||
check-strictly
|
||||
:render-after-expand="false"
|
||||
style="width: 268px"
|
||||
filterable clearable multiple
|
||||
/>
|
||||
<el-select v-else v-model="form.senderIds" placeholder="请选择发送对象"
|
||||
filterable clearable multiple style="width: 268px">
|
||||
<el-option
|
||||
v-for="item in senderIdsOption"
|
||||
:key="form.sendType==='role'?item.value:item.userId"
|
||||
:label="form.sendType==='role'?item.label:item.userName"
|
||||
:value="form.sendType==='role'?item.value:item.userId">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11" :offset="2">
|
||||
<el-form-item label="内容类型" prop="contentType">
|
||||
<el-radio-group v-model="form.contentType" size="mini">
|
||||
<el-radio label="html">富文本</el-radio>
|
||||
<el-radio label="text">文本</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11">
|
||||
<el-form-item v-if="form.contentType=='text'" label="公告内容" prop="noticeContent">
|
||||
<el-input v-model="form.noticeContent" placeholder="请输入公告内容"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item v-if="form.contentType=='html'" label="公告内容" prop="noticeContent">
|
||||
<Tinymce image-url="/notice/file" file-url="/notice/file" v-model:value="form.noticeContent"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span>
|
||||
<el-button @click="handleCancel">取消</el-button>
|
||||
<el-button type="primary" @click="handleSubmit(formInstance)">确定</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!--详情弹窗-->
|
||||
<el-dialog v-model="isViewVisited" title="公告详情" width="1200px">
|
||||
<el-form :model="viewForm" label-width="100px">
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="公告标题 :" prop="noticeTitle">
|
||||
<el-text>{{ viewForm.noticeTitle }}</el-text>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="发送类型 :" prop="sendType">
|
||||
<el-text>{{ getSendTypeOptionItem(viewForm.sendType) }}</el-text>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="发送对象 :" prop="senders">
|
||||
<div v-for="sender in viewForm.senders">
|
||||
<el-text>{{ sender }}</el-text>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="公告类型 :" prop="noticeType">
|
||||
<tag dict-type="notice_type" :value="viewForm.noticeType"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="内容类型 :" prop="contentType">
|
||||
<tag dict-type="content_type" :value="viewForm.contentType"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="公告内容 :" prop="noticeContent">
|
||||
<el-text v-if="viewForm.contentType == 'text'">{{ viewForm.noticeContent }}</el-text>
|
||||
<span v-else v-html="viewForm.noticeContent"></span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {Search, Refresh, Plus, View, Delete} from "@element-plus/icons-vue";
|
||||
import {useCacheStore} from '@/stores/cache.js'
|
||||
import {ElMessage, ElMessageBox} from "element-plus";
|
||||
import {addNotice, deleteNotice, getNoticeList, getNoticeDetail} from "@/api/notice/notice";
|
||||
import {getRoleOption} from "@/api/role/role";
|
||||
import {getDeptOption} from "@/api/dept/dept";
|
||||
import Tinymce from "@/components/Tinymce.vue";
|
||||
import {getUserList} from "@/api/user/user";
|
||||
import Paging from "@/components/pagination/index.vue";
|
||||
|
||||
const queryParams = reactive({
|
||||
noticeTitle: '',
|
||||
noticeType: '',
|
||||
contentType: '',
|
||||
sendType: '',
|
||||
state: ''
|
||||
})
|
||||
const queryInstance = ref()
|
||||
const cacheStore = useCacheStore()
|
||||
const loading = ref(true)
|
||||
const sendTypeOption = ref([
|
||||
{
|
||||
name: '用户',
|
||||
value: 'user'
|
||||
},
|
||||
{
|
||||
name: '角色',
|
||||
value: 'role'
|
||||
},
|
||||
{
|
||||
name: '部门',
|
||||
value: 'dept'
|
||||
},
|
||||
{
|
||||
name: '全发',
|
||||
value: 'all'
|
||||
}
|
||||
])
|
||||
const senderIdsOption = ref([])
|
||||
const deptList = ref([]);
|
||||
const deptProps = reactive({
|
||||
value: "value",
|
||||
label: "label"
|
||||
});
|
||||
const list = ref([])
|
||||
const isVisited = ref(false);
|
||||
const isViewVisited = ref(false);
|
||||
const viewForm = ref();
|
||||
const form = ref();
|
||||
const content = ref();
|
||||
const formInstance = ref();
|
||||
const total = ref([]);
|
||||
const pageInfo = reactive({
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
});
|
||||
const rules = reactive({
|
||||
noticeTitle: [{required: true, message: '请输入公告标题', trigger: 'blur'}],
|
||||
// noticeContent: [{required: true, message: '请输入公告内容', trigger: 'blur'}],
|
||||
contentType: [{required: true, message: '请输入内容类型', trigger: 'blur'}],
|
||||
noticeType: [{required: true, message: '请选择公告类型', trigger: 'blur'}],
|
||||
sendType: [{required: true, message: '请选择发送类型', trigger: 'blur'}],
|
||||
senderIds: [{required: true, message: '请选择发送对象', trigger: 'blur'}],
|
||||
})
|
||||
|
||||
const handleChangeSendType = (e) => {
|
||||
if (e === 'user') {
|
||||
getUser()
|
||||
} else if (e === 'role') {
|
||||
getRole()
|
||||
} else if (e === 'dept') {
|
||||
getDepartmentOption()
|
||||
} else if (e === 'all') {
|
||||
|
||||
}
|
||||
}
|
||||
//获取用户list
|
||||
const getUser = async () => {
|
||||
getUserList().then(res => {
|
||||
if (res.code === 1000) {
|
||||
senderIdsOption.value = res.data.rows;
|
||||
}
|
||||
});
|
||||
};
|
||||
//获取角色option
|
||||
const getRole = async () => {
|
||||
getRoleOption().then(res => {
|
||||
if (res.code === 1000) {
|
||||
senderIdsOption.value = res.data;
|
||||
}
|
||||
});
|
||||
};
|
||||
//获取部门option
|
||||
const getDepartmentOption = async () => {
|
||||
getDeptOption().then(res => {
|
||||
if (res.code === 1000) {
|
||||
deptList.value = res.data;
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
};
|
||||
const getSendTypeOptionItem = (sendType) => {
|
||||
for (let item of sendTypeOption.value) {
|
||||
if (item.value === sendType) {
|
||||
return item.name;
|
||||
}
|
||||
}
|
||||
return "";
|
||||
};
|
||||
|
||||
//重置搜索
|
||||
const handleReset = () => {
|
||||
queryInstance.value.resetFields()
|
||||
getList()
|
||||
}
|
||||
const getList = async () => {
|
||||
let params = {
|
||||
...queryParams,
|
||||
...pageInfo
|
||||
};
|
||||
loading.value = true
|
||||
getNoticeList(params).then(res => {
|
||||
if (res.code === 1000) {
|
||||
list.value = res.data.rows;
|
||||
total.value = res.data.total;
|
||||
loading.value = false;
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
}).catch(err => {
|
||||
loading.value = false;
|
||||
})
|
||||
};
|
||||
//查看公告详情
|
||||
const handleViewDetails = async (row) => {
|
||||
getNoticeDetail(row.noticeId).then(res => {
|
||||
isViewVisited.value = true
|
||||
viewForm.value = res.data
|
||||
})
|
||||
}
|
||||
|
||||
//删除
|
||||
const handleDelete = async (noticeId) => {
|
||||
// ElMessageBox.confirm(`确认删除名称为${row.noticeTitle}的公告吗?`, '系统提示', {
|
||||
// confirmButtonText: '确定',
|
||||
// cancelButtonText: '取消',
|
||||
// type: 'warning'
|
||||
// }).then(() => {
|
||||
deleteNotice(noticeId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg)
|
||||
getList()
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
// })
|
||||
}
|
||||
const restForm = () => {
|
||||
form.value = {
|
||||
action: 'SEND',
|
||||
noticeTitle: null,
|
||||
noticeContent: null,
|
||||
noticeType: "1",
|
||||
sendType: null,
|
||||
contentType: 'html',
|
||||
state: "1",
|
||||
senderIds: [],
|
||||
cluster: 'notice'
|
||||
};
|
||||
};
|
||||
//新增公告
|
||||
const handleAdd = () => {
|
||||
restForm();
|
||||
isVisited.value = true;
|
||||
nextTick(() => {
|
||||
// 清空校验
|
||||
formInstance.value.clearValidate()
|
||||
})
|
||||
};
|
||||
|
||||
//取消
|
||||
const handleCancel = () => {
|
||||
restForm();
|
||||
isVisited.value = false;
|
||||
};
|
||||
//提交
|
||||
const handleSubmit = async (formInstance) => {
|
||||
if (!formInstance) return;
|
||||
formInstance.validate(async (valid) => {
|
||||
if (!valid) return;
|
||||
if(form.value.sendType==='all'){
|
||||
form.value.senderIds=['0']
|
||||
}
|
||||
addNotice(form.value).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg);
|
||||
getList();
|
||||
isVisited.value = false;
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
//切换每页显示条数
|
||||
const handleSizeChange = (val) => {
|
||||
pageInfo.pageSize = val;
|
||||
getList();
|
||||
};
|
||||
|
||||
//点击页码进行分页功能
|
||||
const handleCurrentChange = (val) => {
|
||||
pageInfo.pageNum = val;
|
||||
getList();
|
||||
};
|
||||
getList()
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.tox-tinymce-aux {
|
||||
z-index: 5000 !important;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div>
|
||||
<el-form :model="queryParams" inline class="query-form" ref="queryInstance">
|
||||
<el-form-item label="公告标题" prop="noticeTitle">
|
||||
<el-input v-model="queryParams.noticeTitle" placeholder="请输入公告标题" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="公告类型" prop="noticeType">
|
||||
<el-select v-model="queryParams.noticeType" placeholder="请选择公告类型" clearable filterable>
|
||||
<el-option label="通知" value="1"/>
|
||||
<el-option label="公告" value="2"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="内容类型" prop="contentType">
|
||||
<el-select v-model="queryParams.contentType" placeholder="请选择内容类型" clearable filterable>
|
||||
<el-option label="富文本" value="html"/>
|
||||
<el-option label="文本" value="text"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="发送类型" prop="sendType">
|
||||
<el-select v-model="queryParams.sendType" placeholder="请输入发送类型" filterable clearable>
|
||||
<el-option
|
||||
v-for="item in sendTypeOption"
|
||||
:key="item.value"
|
||||
:label="item.name"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="getList" :icon="Search">搜索</el-button>
|
||||
<el-button type="primary" @click="handleReset" :icon="Refresh">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="table-header-btn">
|
||||
<el-button type="primary" @click="handleAdd" :icon="Plus">新增</el-button>
|
||||
</div>
|
||||
<div class="table">
|
||||
<el-table
|
||||
:data="list"
|
||||
row-key="noticeId"
|
||||
:lazy="true"
|
||||
v-loading="loading"
|
||||
v-tabh
|
||||
>
|
||||
<el-table-column label="序号" type="index" align="center" width="60"/>
|
||||
<el-table-column prop="noticeTitle" label="公告标题" align="center"/>
|
||||
<el-table-column prop="noticeType" label="公告类型" align="center">
|
||||
<template #default="scope">
|
||||
<tag dict-type="notice_type" :value="scope.row.noticeType"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="contentType" label="内容类型" align="center">
|
||||
<template #default="scope">
|
||||
<tag dict-type="content_type" :value="scope.row.contentType"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="sendType" label="发送类型" align="center">
|
||||
<template #default="scope">
|
||||
{{ getSendTypeOptionItem(scope.row.sendType) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" align="center"/>
|
||||
<el-table-column label="操作" align="center">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" size="mini" @click="handleViewDetails(scope.row)" link>详情
|
||||
</el-button>
|
||||
<popover-delete :name="scope.row.noticeTitle" :type="'公告'"
|
||||
@delete="handleDelete(scope.row.noticeId)"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<paging :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize" :page-sizes="[10, 20, 30, 40,50]"
|
||||
:total="total" @changeSize="handleSizeChange" @goPage="handleCurrentChange"/>
|
||||
<!--新增弹窗-->
|
||||
<el-dialog v-model="isVisited" title="新增公告" width="800px">
|
||||
<el-form :model="form" ref="formInstance" label-width="80px" :rules="rules">
|
||||
<el-row>
|
||||
<el-col :span="11">
|
||||
<el-form-item label="公告标题" prop="noticeTitle">
|
||||
<el-input v-model="form.noticeTitle" placeholder="请输入公告标题"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11" :offset="2">
|
||||
<el-form-item label="公告类型" prop="noticeType">
|
||||
<el-radio-group v-model="form.noticeType" size="mini">
|
||||
<el-radio v-for="notice in cacheStore.getDict('notice_type')" :key="notice.value"
|
||||
:label="notice.value">
|
||||
{{ notice.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11">
|
||||
<el-form-item label="发送类型" prop="sendType">
|
||||
<el-select v-model="form.sendType" placeholder="发送类型" filterable clearable
|
||||
@change="handleChangeSendType($event)" style="width: 268px">
|
||||
<el-option
|
||||
v-for="item in sendTypeOption"
|
||||
:key="item.value"
|
||||
:label="item.name"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11" :offset="2" v-if="form.sendType!=='all'">
|
||||
<el-form-item label="发送对象" prop="senderIds">
|
||||
<el-tree-select
|
||||
v-if="form.sendType==='dept'"
|
||||
ref="treeSelect"
|
||||
v-model="form.senderIds"
|
||||
placeholder="请选择发送对象"
|
||||
:data="deptList"
|
||||
:props="deptProps"
|
||||
value-key="value"
|
||||
check-strictly
|
||||
:render-after-expand="false"
|
||||
style="width: 268px"
|
||||
filterable clearable multiple
|
||||
/>
|
||||
<el-select v-else v-model="form.senderIds" placeholder="请选择发送对象"
|
||||
filterable clearable multiple style="width: 268px">
|
||||
<el-option
|
||||
v-for="item in senderIdsOption"
|
||||
:key="form.sendType==='role'?item.value:item.userId"
|
||||
:label="form.sendType==='role'?item.label:item.userName"
|
||||
:value="form.sendType==='role'?item.value:item.userId">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11" :offset="2">
|
||||
<el-form-item label="内容类型" prop="contentType">
|
||||
<el-radio-group v-model="form.contentType" size="mini">
|
||||
<el-radio label="html">富文本</el-radio>
|
||||
<el-radio label="text">文本</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11">
|
||||
<el-form-item v-if="form.contentType=='text'" label="公告内容" prop="noticeContent">
|
||||
<el-input v-model="form.noticeContent" placeholder="请输入公告内容"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item v-if="form.contentType=='html'" label="公告内容" prop="noticeContent">
|
||||
<Tinymce image-url="/notice/file" file-url="/notice/file" v-model:value="form.noticeContent"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span>
|
||||
<el-button @click="handleCancel">取消</el-button>
|
||||
<el-button type="primary" @click="handleSubmit(formInstance)">确定</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!--详情弹窗-->
|
||||
<el-dialog v-model="isViewVisited" title="公告详情" width="1200px">
|
||||
<el-form :model="viewForm" label-width="100px">
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="公告标题 :" prop="noticeTitle">
|
||||
<el-text>{{ viewForm.noticeTitle }}</el-text>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="发送类型 :" prop="sendType">
|
||||
<el-text>{{ getSendTypeOptionItem(viewForm.sendType) }}</el-text>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="发送对象 :" prop="senders">
|
||||
<div v-for="sender in viewForm.senders">
|
||||
<el-text>{{ sender }}</el-text>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="公告类型 :" prop="noticeType">
|
||||
<tag dict-type="notice_type" :value="viewForm.noticeType"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="内容类型 :" prop="contentType">
|
||||
<tag dict-type="content_type" :value="viewForm.contentType"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="公告内容 :" prop="noticeContent">
|
||||
<el-text v-if="viewForm.contentType == 'text'">{{ viewForm.noticeContent }}</el-text>
|
||||
<span v-else v-html="viewForm.noticeContent"></span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {Search, Refresh, Plus, View, Delete} from "@element-plus/icons-vue";
|
||||
import {useCacheStore} from '@/stores/cache.js'
|
||||
import {ElMessage, ElMessageBox} from "element-plus";
|
||||
import {addNotice, deleteNotice, getNoticeList, getNoticeDetail} from "@/api/notice/notice";
|
||||
import {getRoleOption} from "@/api/role/role";
|
||||
import {getDeptOption} from "@/api/dept/dept";
|
||||
import Tinymce from "@/components/Tinymce.vue";
|
||||
import {getUserList} from "@/api/user/user";
|
||||
import Paging from "@/components/pagination/index.vue";
|
||||
|
||||
const queryParams = reactive({
|
||||
noticeTitle: '',
|
||||
noticeType: '',
|
||||
contentType: '',
|
||||
sendType: '',
|
||||
state: ''
|
||||
})
|
||||
const queryInstance = ref()
|
||||
const cacheStore = useCacheStore()
|
||||
const loading = ref(true)
|
||||
const sendTypeOption = ref([
|
||||
{
|
||||
name: '用户',
|
||||
value: 'user'
|
||||
},
|
||||
{
|
||||
name: '角色',
|
||||
value: 'role'
|
||||
},
|
||||
{
|
||||
name: '部门',
|
||||
value: 'dept'
|
||||
},
|
||||
{
|
||||
name: '全发',
|
||||
value: 'all'
|
||||
}
|
||||
])
|
||||
const senderIdsOption = ref([])
|
||||
const deptList = ref([]);
|
||||
const deptProps = reactive({
|
||||
value: "value",
|
||||
label: "label"
|
||||
});
|
||||
const list = ref([])
|
||||
const isVisited = ref(false);
|
||||
const isViewVisited = ref(false);
|
||||
const viewForm = ref();
|
||||
const form = ref();
|
||||
const content = ref();
|
||||
const formInstance = ref();
|
||||
const total = ref([]);
|
||||
const pageInfo = reactive({
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
});
|
||||
const rules = reactive({
|
||||
noticeTitle: [{required: true, message: '请输入公告标题', trigger: 'blur'}],
|
||||
// noticeContent: [{required: true, message: '请输入公告内容', trigger: 'blur'}],
|
||||
contentType: [{required: true, message: '请输入内容类型', trigger: 'blur'}],
|
||||
noticeType: [{required: true, message: '请选择公告类型', trigger: 'blur'}],
|
||||
sendType: [{required: true, message: '请选择发送类型', trigger: 'blur'}],
|
||||
senderIds: [{required: true, message: '请选择发送对象', trigger: 'blur'}],
|
||||
})
|
||||
|
||||
const handleChangeSendType = (e) => {
|
||||
if (e === 'user') {
|
||||
getUser()
|
||||
} else if (e === 'role') {
|
||||
getRole()
|
||||
} else if (e === 'dept') {
|
||||
getDepartmentOption()
|
||||
} else if (e === 'all') {
|
||||
|
||||
}
|
||||
}
|
||||
//获取用户list
|
||||
const getUser = async () => {
|
||||
getUserList().then(res => {
|
||||
if (res.code === 1000) {
|
||||
senderIdsOption.value = res.data.rows;
|
||||
}
|
||||
});
|
||||
};
|
||||
//获取角色option
|
||||
const getRole = async () => {
|
||||
getRoleOption().then(res => {
|
||||
if (res.code === 1000) {
|
||||
senderIdsOption.value = res.data;
|
||||
}
|
||||
});
|
||||
};
|
||||
//获取部门option
|
||||
const getDepartmentOption = async () => {
|
||||
getDeptOption().then(res => {
|
||||
if (res.code === 1000) {
|
||||
deptList.value = res.data;
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
};
|
||||
const getSendTypeOptionItem = (sendType) => {
|
||||
for (let item of sendTypeOption.value) {
|
||||
if (item.value === sendType) {
|
||||
return item.name;
|
||||
}
|
||||
}
|
||||
return "";
|
||||
};
|
||||
|
||||
//重置搜索
|
||||
const handleReset = () => {
|
||||
queryInstance.value.resetFields()
|
||||
getList()
|
||||
}
|
||||
const getList = async () => {
|
||||
let params = {
|
||||
...queryParams,
|
||||
...pageInfo
|
||||
};
|
||||
loading.value = true
|
||||
getNoticeList(params).then(res => {
|
||||
if (res.code === 1000) {
|
||||
list.value = res.data.rows;
|
||||
total.value = res.data.total;
|
||||
loading.value = false;
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
}).catch(err => {
|
||||
loading.value = false;
|
||||
})
|
||||
};
|
||||
//查看公告详情
|
||||
const handleViewDetails = async (row) => {
|
||||
getNoticeDetail(row.noticeId).then(res => {
|
||||
isViewVisited.value = true
|
||||
viewForm.value = res.data
|
||||
})
|
||||
}
|
||||
|
||||
//删除
|
||||
const handleDelete = async (noticeId) => {
|
||||
// ElMessageBox.confirm(`确认删除名称为${row.noticeTitle}的公告吗?`, '系统提示', {
|
||||
// confirmButtonText: '确定',
|
||||
// cancelButtonText: '取消',
|
||||
// type: 'warning'
|
||||
// }).then(() => {
|
||||
deleteNotice(noticeId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg)
|
||||
getList()
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
// })
|
||||
}
|
||||
const restForm = () => {
|
||||
form.value = {
|
||||
action: 'SEND',
|
||||
noticeTitle: null,
|
||||
noticeContent: null,
|
||||
noticeType: "1",
|
||||
sendType: null,
|
||||
contentType: 'html',
|
||||
state: "1",
|
||||
senderIds: [],
|
||||
cluster: 'notice'
|
||||
};
|
||||
};
|
||||
//新增公告
|
||||
const handleAdd = () => {
|
||||
restForm();
|
||||
isVisited.value = true;
|
||||
nextTick(() => {
|
||||
// 清空校验
|
||||
formInstance.value.clearValidate()
|
||||
})
|
||||
};
|
||||
|
||||
//取消
|
||||
const handleCancel = () => {
|
||||
restForm();
|
||||
isVisited.value = false;
|
||||
};
|
||||
//提交
|
||||
const handleSubmit = async (formInstance) => {
|
||||
if (!formInstance) return;
|
||||
formInstance.validate(async (valid) => {
|
||||
if (!valid) return;
|
||||
if(form.value.sendType==='all'){
|
||||
form.value.senderIds=['0']
|
||||
}
|
||||
addNotice(form.value).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg);
|
||||
getList();
|
||||
isVisited.value = false;
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
//切换每页显示条数
|
||||
const handleSizeChange = (val) => {
|
||||
pageInfo.pageSize = val;
|
||||
getList();
|
||||
};
|
||||
|
||||
//点击页码进行分页功能
|
||||
const handleCurrentChange = (val) => {
|
||||
pageInfo.pageNum = val;
|
||||
getList();
|
||||
};
|
||||
getList()
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.tox-tinymce-aux {
|
||||
z-index: 5000 !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,268 +1,268 @@
|
||||
<template>
|
||||
<div class="organization-layout">
|
||||
<div class="layout-left">
|
||||
<div class="candidate" v-loading="loading">
|
||||
<el-input v-model="filterText" clearable placeholder="输入公司或部门名称进行搜索" @input="searchOrganizateData" style="margin-bottom: 15px">
|
||||
</el-input>
|
||||
<el-scrollbar>
|
||||
<div class="tree scrollbar-dict">
|
||||
<el-tree :data="dataList" ref="treeRef" :props="defaultProps" empty-text="" node-key="value"
|
||||
:default-expanded-keys="expandedKeys"
|
||||
:filter-node-method="filterNode"
|
||||
@node-click="handleClick">
|
||||
<template #default="{ node, data }">
|
||||
<div class="tree-node">
|
||||
<div style="display: flex;align-items: center;padding: 3px 0;"
|
||||
:class="data.value === selectNodeKey ? 'highlight': ''">
|
||||
<svg-icon name="oran" v-if="data.type===0" class-name="oran-icon"/>
|
||||
<el-icon v-else-if="data.type===1" :color="data.matrix?'#67C23A':'#fa3534'"
|
||||
style="margin-right: 4px;">
|
||||
<FolderOpened/>
|
||||
</el-icon>
|
||||
{{ data.organizationalStructureName }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-tree>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-right">
|
||||
<depart-component v-if="showDept" v-model:value="deptId"/>
|
||||
<company-detail v-if="showCompany" v-model:value="companyId"></company-detail>
|
||||
<!-- <department v-if="selectItem.type===2" :id="selectItem.value"></department>-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import SvgIcon from '@/components/svgIcon/index.vue'
|
||||
import {ElNotification} from "element-plus";
|
||||
import {getOrganizationStructure, getOrganizationStructureTree} from "@/api/workflow/process-user";
|
||||
import DepartComponent from "@/components/organizationalStructure/Department.vue";
|
||||
import CompanyDetail from "@/components/organizationalStructure/CompanyDetail.vue";
|
||||
|
||||
const queryType = reactive({
|
||||
chooseName: ""
|
||||
});
|
||||
const deptId = ref(0);
|
||||
const companyId = ref(0);
|
||||
const showDept = ref(false);
|
||||
const filterText = ref('')
|
||||
const showCompany = ref(false);
|
||||
let selectItem = reactive({
|
||||
type: -1,
|
||||
value: "0"
|
||||
});
|
||||
const loading = ref(false);
|
||||
const dataList = ref([]);
|
||||
const treeRef = ref()
|
||||
const selectNodeKey = ref("")
|
||||
const expandedKeys = ref([]);
|
||||
const defaultProps = {
|
||||
value: "value",
|
||||
label: "organizationalStructureName",
|
||||
children: "children",
|
||||
isLeaf: (data) => {
|
||||
}
|
||||
};
|
||||
const emit = defineEmits();
|
||||
|
||||
const _value = computed({
|
||||
get() {
|
||||
return props.value;
|
||||
},
|
||||
set(val) {
|
||||
emit("input", val);
|
||||
}
|
||||
});
|
||||
|
||||
const getList = () => {
|
||||
let params = {
|
||||
chooseId: 0,
|
||||
type: 0,
|
||||
chooseName: queryType.chooseName
|
||||
}
|
||||
selectItem = {
|
||||
type: -1,
|
||||
value: "0"
|
||||
};
|
||||
getOrganizationStructureTree(params).then(res => {
|
||||
dataList.value = res.data;
|
||||
});
|
||||
};
|
||||
const init = () => {
|
||||
selectItem = {
|
||||
type: -1,
|
||||
value: "0"
|
||||
};
|
||||
dataList.value = [];
|
||||
expandedKeys.value = [];
|
||||
queryType.chooseName = ""
|
||||
getList();
|
||||
};
|
||||
watch(filterText.value, (val) => {
|
||||
treeRef.value.filter(val)
|
||||
})
|
||||
const searchOrganizateData=(val)=>{
|
||||
treeRef.value.filter(val)
|
||||
}
|
||||
const filterNode = (value, data) => {
|
||||
if (!value) return true
|
||||
return data.organizationalStructureName.includes(value);
|
||||
}
|
||||
|
||||
|
||||
async function handleLoad(node, resolve, reject) {
|
||||
// let data = node.data
|
||||
// let params
|
||||
// if (data.organizationalStructureId) {
|
||||
// params = {
|
||||
// chooseId: data.organizationalStructureId,
|
||||
// type: data.type
|
||||
// }
|
||||
// } else {
|
||||
// params = {
|
||||
// chooseId: 0,
|
||||
// type: 0,
|
||||
// }
|
||||
// }
|
||||
// let result = await getOrganizationStructure(params).then(res => {
|
||||
// return res.data
|
||||
// })
|
||||
// resolve(result)
|
||||
}
|
||||
|
||||
const handleClick = (item, data) => {
|
||||
selectNodeKey.value = item.value
|
||||
if (item.type === 1) {
|
||||
showDept.value = false
|
||||
showCompany.value = false
|
||||
nextTick(() => {
|
||||
showDept.value = true
|
||||
})
|
||||
deptId.value = item.organizationalStructureId
|
||||
} else {
|
||||
showDept.value = false
|
||||
showCompany.value = false
|
||||
nextTick(() => {
|
||||
showCompany.value = true
|
||||
})
|
||||
companyId.value = item.organizationalStructureId
|
||||
}
|
||||
selectItem = item;
|
||||
};
|
||||
init()
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.highlight {
|
||||
color: black; //节点的字体颜色
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
$containWidth: 550px;
|
||||
.organization-layout {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.layout-left {
|
||||
width: $containWidth;
|
||||
//border: 1px solid #ebeef5;
|
||||
padding: 10px;
|
||||
margin-top: 5px;
|
||||
|
||||
.candidate {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
width: $containWidth;
|
||||
//height: 80%;
|
||||
//border: 1px solid #e8e8e8;
|
||||
|
||||
:deep(.el-input) {
|
||||
height: 40px;
|
||||
|
||||
.el-input__inner, .el-input-group__append {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.scrollbar-dict {
|
||||
border: 1px solid #ebeef5;
|
||||
//min-height: 30vh;
|
||||
//height: 60vh;
|
||||
height: calc(100vh - 250px);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
// 滚动条轨道
|
||||
&::-webkit-scrollbar-track {
|
||||
background: rgb(239, 239, 239);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
// 小滑块
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: rgba(80, 81, 82, 0.29);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.el-tree--highlight-current
|
||||
.el-tree-node.is-current
|
||||
> .el-tree-node__content {
|
||||
// 设置颜色
|
||||
background-color: rgba(135, 206, 235, 0.2); // 透明度为0.2的skyblue，作者比较喜欢的颜色
|
||||
color: #409eff; // 节点的字体颜色
|
||||
font-weight: bold; // 字体加粗
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.layout-right {
|
||||
flex: 1;
|
||||
//width: 70%;
|
||||
//border: 1px solid #ebeef5;
|
||||
margin-left: 30px;
|
||||
padding: 0 10px;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.tree) {
|
||||
.el-tree-node__content {
|
||||
height: 34px;
|
||||
|
||||
.tree-node {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.el-scrollbar .el-scrollbar__wrap {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
float: right;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 16px;
|
||||
background-color: #efefef;
|
||||
}
|
||||
|
||||
</style>
|
||||
<template>
|
||||
<div class="organization-layout">
|
||||
<div class="layout-left">
|
||||
<div class="candidate" v-loading="loading">
|
||||
<el-input v-model="filterText" clearable placeholder="输入公司或部门名称进行搜索" @input="searchOrganizateData" style="margin-bottom: 15px">
|
||||
</el-input>
|
||||
<el-scrollbar>
|
||||
<div class="tree scrollbar-dict">
|
||||
<el-tree :data="dataList" ref="treeRef" :props="defaultProps" empty-text="" node-key="value"
|
||||
:default-expanded-keys="expandedKeys"
|
||||
:filter-node-method="filterNode"
|
||||
@node-click="handleClick">
|
||||
<template #default="{ node, data }">
|
||||
<div class="tree-node">
|
||||
<div style="display: flex;align-items: center;padding: 3px 0;"
|
||||
:class="data.value === selectNodeKey ? 'highlight': ''">
|
||||
<svg-icon name="oran" v-if="data.type===0" class-name="oran-icon"/>
|
||||
<el-icon v-else-if="data.type===1" :color="data.matrix?'#67C23A':'#fa3534'"
|
||||
style="margin-right: 4px;">
|
||||
<FolderOpened/>
|
||||
</el-icon>
|
||||
{{ data.organizationalStructureName }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-tree>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-right">
|
||||
<depart-component v-if="showDept" v-model:value="deptId"/>
|
||||
<company-detail v-if="showCompany" v-model:value="companyId"></company-detail>
|
||||
<!-- <department v-if="selectItem.type===2" :id="selectItem.value"></department>-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import SvgIcon from '@/components/svgIcon/index.vue'
|
||||
import {ElNotification} from "element-plus";
|
||||
import {getOrganizationStructure, getOrganizationStructureTree} from "@/api/workflow/process-user";
|
||||
import DepartComponent from "@/components/organizationalStructure/Department.vue";
|
||||
import CompanyDetail from "@/components/organizationalStructure/CompanyDetail.vue";
|
||||
|
||||
const queryType = reactive({
|
||||
chooseName: ""
|
||||
});
|
||||
const deptId = ref(0);
|
||||
const companyId = ref(0);
|
||||
const showDept = ref(false);
|
||||
const filterText = ref('')
|
||||
const showCompany = ref(false);
|
||||
let selectItem = reactive({
|
||||
type: -1,
|
||||
value: "0"
|
||||
});
|
||||
const loading = ref(false);
|
||||
const dataList = ref([]);
|
||||
const treeRef = ref()
|
||||
const selectNodeKey = ref("")
|
||||
const expandedKeys = ref([]);
|
||||
const defaultProps = {
|
||||
value: "value",
|
||||
label: "organizationalStructureName",
|
||||
children: "children",
|
||||
isLeaf: (data) => {
|
||||
}
|
||||
};
|
||||
const emit = defineEmits();
|
||||
|
||||
const _value = computed({
|
||||
get() {
|
||||
return props.value;
|
||||
},
|
||||
set(val) {
|
||||
emit("input", val);
|
||||
}
|
||||
});
|
||||
|
||||
const getList = () => {
|
||||
let params = {
|
||||
chooseId: 0,
|
||||
type: 0,
|
||||
chooseName: queryType.chooseName
|
||||
}
|
||||
selectItem = {
|
||||
type: -1,
|
||||
value: "0"
|
||||
};
|
||||
getOrganizationStructureTree(params).then(res => {
|
||||
dataList.value = res.data;
|
||||
});
|
||||
};
|
||||
const init = () => {
|
||||
selectItem = {
|
||||
type: -1,
|
||||
value: "0"
|
||||
};
|
||||
dataList.value = [];
|
||||
expandedKeys.value = [];
|
||||
queryType.chooseName = ""
|
||||
getList();
|
||||
};
|
||||
watch(filterText.value, (val) => {
|
||||
treeRef.value.filter(val)
|
||||
})
|
||||
const searchOrganizateData=(val)=>{
|
||||
treeRef.value.filter(val)
|
||||
}
|
||||
const filterNode = (value, data) => {
|
||||
if (!value) return true
|
||||
return data.organizationalStructureName.includes(value);
|
||||
}
|
||||
|
||||
|
||||
async function handleLoad(node, resolve, reject) {
|
||||
// let data = node.data
|
||||
// let params
|
||||
// if (data.organizationalStructureId) {
|
||||
// params = {
|
||||
// chooseId: data.organizationalStructureId,
|
||||
// type: data.type
|
||||
// }
|
||||
// } else {
|
||||
// params = {
|
||||
// chooseId: 0,
|
||||
// type: 0,
|
||||
// }
|
||||
// }
|
||||
// let result = await getOrganizationStructure(params).then(res => {
|
||||
// return res.data
|
||||
// })
|
||||
// resolve(result)
|
||||
}
|
||||
|
||||
const handleClick = (item, data) => {
|
||||
selectNodeKey.value = item.value
|
||||
if (item.type === 1) {
|
||||
showDept.value = false
|
||||
showCompany.value = false
|
||||
nextTick(() => {
|
||||
showDept.value = true
|
||||
})
|
||||
deptId.value = item.organizationalStructureId
|
||||
} else {
|
||||
showDept.value = false
|
||||
showCompany.value = false
|
||||
nextTick(() => {
|
||||
showCompany.value = true
|
||||
})
|
||||
companyId.value = item.organizationalStructureId
|
||||
}
|
||||
selectItem = item;
|
||||
};
|
||||
init()
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.highlight {
|
||||
color: black; //节点的字体颜色
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
$containWidth: 550px;
|
||||
.organization-layout {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.layout-left {
|
||||
width: $containWidth;
|
||||
//border: 1px solid #ebeef5;
|
||||
padding: 10px;
|
||||
margin-top: 5px;
|
||||
|
||||
.candidate {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
width: $containWidth;
|
||||
//height: 80%;
|
||||
//border: 1px solid #e8e8e8;
|
||||
|
||||
:deep(.el-input) {
|
||||
height: 40px;
|
||||
|
||||
.el-input__inner, .el-input-group__append {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.scrollbar-dict {
|
||||
border: 1px solid #ebeef5;
|
||||
//min-height: 30vh;
|
||||
//height: 60vh;
|
||||
height: calc(100vh - 250px);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
// 滚动条轨道
|
||||
&::-webkit-scrollbar-track {
|
||||
background: rgb(239, 239, 239);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
// 小滑块
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: rgba(80, 81, 82, 0.29);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.el-tree--highlight-current
|
||||
.el-tree-node.is-current
|
||||
> .el-tree-node__content {
|
||||
// 设置颜色
|
||||
background-color: rgba(135, 206, 235, 0.2); // 透明度为0.2的skyblue，作者比较喜欢的颜色
|
||||
color: #409eff; // 节点的字体颜色
|
||||
font-weight: bold; // 字体加粗
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.layout-right {
|
||||
flex: 1;
|
||||
//width: 70%;
|
||||
//border: 1px solid #ebeef5;
|
||||
margin-left: 30px;
|
||||
padding: 0 10px;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.tree) {
|
||||
.el-tree-node__content {
|
||||
height: 34px;
|
||||
|
||||
.tree-node {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.el-scrollbar .el-scrollbar__wrap {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
float: right;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 16px;
|
||||
background-color: #efefef;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -1,347 +1,347 @@
|
||||
<template>
|
||||
<el-form :model="queryParams" class="query-form" inline ref="userForm">
|
||||
<el-form-item label="当前岗位" prop="userName">
|
||||
<el-tag >{{postName}}</el-tag>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户名称" prop="userName">
|
||||
<el-input
|
||||
v-model="queryParams.userName"
|
||||
placeholder="请输入用户名称"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号码" prop="phoneNumber">
|
||||
<el-input
|
||||
v-model="queryParams.phoneNumber"
|
||||
placeholder="请输入手机号码"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="searchUser" :icon="Search">搜索</el-button>
|
||||
<el-button @click="handleReset" :icon="Refresh">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="table-header-btn">
|
||||
<el-button type="primary" @click="handleAdd" :icon="Plus">添加用户</el-button>
|
||||
<el-button type="primary" @click="handleBack" :icon="RefreshLeft" plain>返回</el-button>
|
||||
<el-button type="danger" @click="handleCancelAll" :icon="CircleClose" plain>全部取消</el-button>
|
||||
<el-button type="danger" @click="handleMoreCancelAuthorization(cancelUserIds,userNames)" :icon="CircleClose" plain
|
||||
:disabled="moreCancelDisabled">批量取消
|
||||
</el-button>
|
||||
<el-button type="danger" @click="handleDeletePost" :icon="Delete" plain v-if="showDeleteCurrent">删除当前岗位</el-button>
|
||||
</div>
|
||||
<div class="table">
|
||||
<el-table
|
||||
:data="list"
|
||||
row-key="userId"
|
||||
:lazy="true"
|
||||
ref="table"
|
||||
v-loading="loading"
|
||||
@select="handleSelect"
|
||||
v-tabh
|
||||
>
|
||||
<el-table-column type="selection" width="55"/>
|
||||
<el-table-column prop="userName" label="用户名称" align="center"/>
|
||||
<el-table-column prop="nickName" label="用户昵称" align="center"/>
|
||||
<el-table-column prop="email" label="邮箱" align="center"/>
|
||||
<el-table-column prop="phoneNumber" label="手机号码" align="center"/>
|
||||
<el-table-column prop="state" label="状态" align="center">
|
||||
<template #default="scope">
|
||||
<tag dict-type="normal_disable" :value="scope.row.state"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" align="center" width="180px"/>
|
||||
<el-table-column label="操作" align="center">
|
||||
<template #default="scope">
|
||||
<popover-delete :name="scope.row.userName" :type="'用户'" :btn-text="'取消授权'"
|
||||
@delete="handleCancelAuthorization([scope.row.userId])"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<paging :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize" :page-sizes="[10, 20, 30, 40,50]"
|
||||
:total="total" @changeSize="handleSizeChange" @goPage="handleCurrentChange"/>
|
||||
<el-dialog v-model="isVisited" :title="title" width="830px">
|
||||
<el-form :model="query" class="query-form" inline ref="formInstance">
|
||||
<el-form-item label="用户名称" prop="userName">
|
||||
<el-input
|
||||
v-model="query.userName"
|
||||
placeholder="请输入用户名称"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号码" prop="phoneNumber">
|
||||
<el-input
|
||||
v-model="query.phoneNumber"
|
||||
placeholder="请输入手机号码"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="getExcludeUser" :icon="Search">搜索</el-button>
|
||||
<el-button @click="handleDialogReset" :icon="Refresh">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="table">
|
||||
<el-table
|
||||
:data="userList"
|
||||
row-key="userId"
|
||||
:lazy="true"
|
||||
ref="dialogTable"
|
||||
v-loading="dialogLoading"
|
||||
@select="handleDialogSelect"
|
||||
>
|
||||
<el-table-column type="selection" width="55"/>
|
||||
<el-table-column prop="userName" label="用户名称" align="center"/>
|
||||
<el-table-column prop="nickName" label="用户昵称" align="center"/>
|
||||
<el-table-column prop="email" label="邮箱" align="center"/>
|
||||
<el-table-column prop="phoneNumber" label="手机号码" align="center"/>
|
||||
<el-table-column prop="state" label="状态" align="center">
|
||||
<template #default="scope">
|
||||
<tag dict-type="normal_disable" :value="scope.row.state"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" align="center" width="180px"/>
|
||||
<el-table-column label="操作" align="center">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" size="mini"
|
||||
@click="handleSubmit([scope.row.userId])" link>添加
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<paging :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize" :page-sizes="[10, 20, 30, 40,50]"
|
||||
:total="dialogTotal" @changeSize="handleSizeChangeDialog" @goPage="handleCurrentChangeDialog"/>
|
||||
|
||||
<template #footer>
|
||||
<span>
|
||||
<el-button @click="handleCancel">取消</el-button>
|
||||
<el-button type="primary" @click="handleSubmit(userIds)" :disabled="dialogDisabled">批量添加</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {Plus, Search, Refresh, RefreshLeft, Delete, CircleClose} from "@element-plus/icons-vue";
|
||||
import {ElMessage, ElMessageBox} from "element-plus";
|
||||
import {
|
||||
getUserInfoByPostId,
|
||||
cancelPostAndUserAuthorization,
|
||||
unbindAllUserByPost,
|
||||
getUserExcludePostId,
|
||||
postBindUser
|
||||
} from "@/api/user/user";
|
||||
import {useRouter} from "vue-router";
|
||||
import Tag from '@/components/Tag.vue'
|
||||
import Paging from "@/components/pagination/index.vue";
|
||||
import {useTagsView} from '@/stores/tagsview.js'
|
||||
import {deletePost} from "@/api/post/post";
|
||||
|
||||
const tagsViewStore = useTagsView()
|
||||
const router = useRouter();
|
||||
const postId = reactive(router.currentRoute.value.params.postId)
|
||||
const postName = reactive(router.currentRoute.value.params.postName)
|
||||
const userForm = ref();
|
||||
const table = ref();
|
||||
const title = ref('添加用户');
|
||||
const dialogTable = ref();
|
||||
const list = ref([]);
|
||||
const userList = ref([]);
|
||||
const total = ref([]);
|
||||
const dialogTotal = ref([]);
|
||||
const userIds = ref([]);
|
||||
const userNames = ref([]);
|
||||
const cancelUserIds = ref([]);
|
||||
const moreCancelDisabled = ref(true);
|
||||
const dialogDisabled = ref(true);
|
||||
const loading = ref(true);
|
||||
const dialogLoading = ref(true);
|
||||
const showDeleteCurrent = ref(false);
|
||||
const queryParams = reactive({
|
||||
userName: "",
|
||||
phoneNumber: ""
|
||||
});
|
||||
const query = reactive({
|
||||
userName: "",
|
||||
phoneNumber: ""
|
||||
});
|
||||
const pageInfo = reactive({
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
});
|
||||
const formInstance = ref();
|
||||
const isVisited = ref(false);
|
||||
const form = ref();
|
||||
|
||||
//用户搜索重置
|
||||
const handleReset = () => {
|
||||
userForm.value.resetFields();
|
||||
searchUser();
|
||||
};
|
||||
const handleDialogReset = () => {
|
||||
formInstance.value.resetFields();
|
||||
getExcludeUser();
|
||||
};
|
||||
//根据角色id获取用户信息
|
||||
const searchUser = async () => {
|
||||
let params = {
|
||||
// postId: postId,
|
||||
...queryParams,
|
||||
...pageInfo
|
||||
};
|
||||
loading.value = true
|
||||
getUserInfoByPostId(postId, params).then(res => {
|
||||
if (res.code === 1000) {
|
||||
showDeleteCurrent.value = res.data.rows.length === 0;
|
||||
list.value = res.data.rows;
|
||||
total.value = res.data.total;
|
||||
loading.value = false;
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
};
|
||||
//获取添加弹窗的用户
|
||||
const getExcludeUser = async () => {
|
||||
let params = {
|
||||
// postId: postId,
|
||||
...query,
|
||||
...pageInfo
|
||||
};
|
||||
dialogLoading.value = true;
|
||||
getUserExcludePostId(postId, params).then(res => {
|
||||
if (res.code === 1000) {
|
||||
userList.value = res.data.rows;
|
||||
dialogTotal.value = res.data.total;
|
||||
dialogLoading.value = false;
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
//添加用户
|
||||
const handleAdd = () => {
|
||||
getExcludeUser()
|
||||
isVisited.value = true
|
||||
dialogDisabled.value = true
|
||||
}
|
||||
const handleBack = () => {
|
||||
tagsViewStore.delVisitedViews(router.currentRoute.value.path)
|
||||
router.push('/system/post')
|
||||
}
|
||||
//全部取消授权
|
||||
const handleCancelAll = () => {
|
||||
ElMessageBox.confirm(`确认全部取消授权吗?`, "系统提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(() => {
|
||||
unbindAllUserByPost(postId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg);
|
||||
searchUser()
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
const handleSelect = (selection) => {
|
||||
if (selection.length !== 0) {
|
||||
moreCancelDisabled.value = false;
|
||||
cancelUserIds.value = selection.map(item => item.userId)
|
||||
userNames.value = selection.map(item => item.userName).join()
|
||||
} else {
|
||||
moreCancelDisabled.value = true;
|
||||
}
|
||||
}
|
||||
//取消授权
|
||||
const handleCancelAuthorization = (userIds) => {
|
||||
cancelPostAndUserAuthorization(userIds, postId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg);
|
||||
moreCancelDisabled.value = true
|
||||
searchUser()
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
//批量取消授权
|
||||
const handleMoreCancelAuthorization = (cancelUserIds, userName) => {
|
||||
ElMessageBox.confirm(`确认取消授权名称为"${userName}"的用户吗?`, "系统提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(() => {
|
||||
handleCancelAuthorization(cancelUserIds)
|
||||
})
|
||||
}
|
||||
//删除当前岗位
|
||||
const handleDeletePost = () => {
|
||||
ElMessageBox.confirm(`确认删除名称为"${postName}"的岗位吗?`, "系统提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(() => {
|
||||
deletePost(postId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg)
|
||||
tagsViewStore.delVisitedViews(router.currentRoute.value.path)
|
||||
router.push('/system/post')
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
//取消
|
||||
const handleCancel = () => {
|
||||
isVisited.value = false;
|
||||
};
|
||||
|
||||
const handleDialogSelect = (selection) => {
|
||||
if (selection.length !== 0) {
|
||||
dialogDisabled.value = false;
|
||||
userIds.value = selection.map(item => item.userId)
|
||||
} else {
|
||||
dialogDisabled.value = true;
|
||||
}
|
||||
}
|
||||
const handleSubmit = (userIds) => {
|
||||
postBindUser(userIds, postId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg);
|
||||
searchUser()
|
||||
isVisited.value = false
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
//切换每页显示条数
|
||||
const handleSizeChange = (val) => {
|
||||
pageInfo.pageSize = val;
|
||||
searchUser();
|
||||
};
|
||||
const handleSizeChangeDialog = (val) => {
|
||||
pageInfo.pageSize = val;
|
||||
getExcludeUser();
|
||||
};
|
||||
|
||||
//点击页码进行分页功能
|
||||
const handleCurrentChange = (val) => {
|
||||
pageInfo.pageNum = val;
|
||||
searchUser();
|
||||
};
|
||||
const handleCurrentChangeDialog = (val) => {
|
||||
pageInfo.pageNum = val;
|
||||
getExcludeUser();
|
||||
};
|
||||
|
||||
searchUser()
|
||||
</script>
|
||||
<template>
|
||||
<el-form :model="queryParams" class="query-form" inline ref="userForm">
|
||||
<el-form-item label="当前岗位" prop="userName">
|
||||
<el-tag >{{postName}}</el-tag>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户名称" prop="userName">
|
||||
<el-input
|
||||
v-model="queryParams.userName"
|
||||
placeholder="请输入用户名称"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号码" prop="phoneNumber">
|
||||
<el-input
|
||||
v-model="queryParams.phoneNumber"
|
||||
placeholder="请输入手机号码"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="searchUser" :icon="Search">搜索</el-button>
|
||||
<el-button @click="handleReset" :icon="Refresh">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="table-header-btn">
|
||||
<el-button type="primary" @click="handleAdd" :icon="Plus">添加用户</el-button>
|
||||
<el-button type="primary" @click="handleBack" :icon="RefreshLeft" plain>返回</el-button>
|
||||
<el-button type="danger" @click="handleCancelAll" :icon="CircleClose" plain>全部取消</el-button>
|
||||
<el-button type="danger" @click="handleMoreCancelAuthorization(cancelUserIds,userNames)" :icon="CircleClose" plain
|
||||
:disabled="moreCancelDisabled">批量取消
|
||||
</el-button>
|
||||
<el-button type="danger" @click="handleDeletePost" :icon="Delete" plain v-if="showDeleteCurrent">删除当前岗位</el-button>
|
||||
</div>
|
||||
<div class="table">
|
||||
<el-table
|
||||
:data="list"
|
||||
row-key="userId"
|
||||
:lazy="true"
|
||||
ref="table"
|
||||
v-loading="loading"
|
||||
@select="handleSelect"
|
||||
v-tabh
|
||||
>
|
||||
<el-table-column type="selection" width="55"/>
|
||||
<el-table-column prop="userName" label="用户名称" align="center"/>
|
||||
<el-table-column prop="nickName" label="用户昵称" align="center"/>
|
||||
<el-table-column prop="email" label="邮箱" align="center"/>
|
||||
<el-table-column prop="phoneNumber" label="手机号码" align="center"/>
|
||||
<el-table-column prop="state" label="状态" align="center">
|
||||
<template #default="scope">
|
||||
<tag dict-type="normal_disable" :value="scope.row.state"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" align="center" width="180px"/>
|
||||
<el-table-column label="操作" align="center">
|
||||
<template #default="scope">
|
||||
<popover-delete :name="scope.row.userName" :type="'用户'" :btn-text="'取消授权'"
|
||||
@delete="handleCancelAuthorization([scope.row.userId])"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<paging :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize" :page-sizes="[10, 20, 30, 40,50]"
|
||||
:total="total" @changeSize="handleSizeChange" @goPage="handleCurrentChange"/>
|
||||
<el-dialog v-model="isVisited" :title="title" width="830px">
|
||||
<el-form :model="query" class="query-form" inline ref="formInstance">
|
||||
<el-form-item label="用户名称" prop="userName">
|
||||
<el-input
|
||||
v-model="query.userName"
|
||||
placeholder="请输入用户名称"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号码" prop="phoneNumber">
|
||||
<el-input
|
||||
v-model="query.phoneNumber"
|
||||
placeholder="请输入手机号码"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="getExcludeUser" :icon="Search">搜索</el-button>
|
||||
<el-button @click="handleDialogReset" :icon="Refresh">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="table">
|
||||
<el-table
|
||||
:data="userList"
|
||||
row-key="userId"
|
||||
:lazy="true"
|
||||
ref="dialogTable"
|
||||
v-loading="dialogLoading"
|
||||
@select="handleDialogSelect"
|
||||
>
|
||||
<el-table-column type="selection" width="55"/>
|
||||
<el-table-column prop="userName" label="用户名称" align="center"/>
|
||||
<el-table-column prop="nickName" label="用户昵称" align="center"/>
|
||||
<el-table-column prop="email" label="邮箱" align="center"/>
|
||||
<el-table-column prop="phoneNumber" label="手机号码" align="center"/>
|
||||
<el-table-column prop="state" label="状态" align="center">
|
||||
<template #default="scope">
|
||||
<tag dict-type="normal_disable" :value="scope.row.state"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" align="center" width="180px"/>
|
||||
<el-table-column label="操作" align="center">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" size="mini"
|
||||
@click="handleSubmit([scope.row.userId])" link>添加
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<paging :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize" :page-sizes="[10, 20, 30, 40,50]"
|
||||
:total="dialogTotal" @changeSize="handleSizeChangeDialog" @goPage="handleCurrentChangeDialog"/>
|
||||
|
||||
<template #footer>
|
||||
<span>
|
||||
<el-button @click="handleCancel">取消</el-button>
|
||||
<el-button type="primary" @click="handleSubmit(userIds)" :disabled="dialogDisabled">批量添加</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {Plus, Search, Refresh, RefreshLeft, Delete, CircleClose} from "@element-plus/icons-vue";
|
||||
import {ElMessage, ElMessageBox} from "element-plus";
|
||||
import {
|
||||
getUserInfoByPostId,
|
||||
cancelPostAndUserAuthorization,
|
||||
unbindAllUserByPost,
|
||||
getUserExcludePostId,
|
||||
postBindUser
|
||||
} from "@/api/user/user";
|
||||
import {useRouter} from "vue-router";
|
||||
import Tag from '@/components/Tag.vue'
|
||||
import Paging from "@/components/pagination/index.vue";
|
||||
import {useTagsView} from '@/stores/tagsview.js'
|
||||
import {deletePost} from "@/api/post/post";
|
||||
|
||||
const tagsViewStore = useTagsView()
|
||||
const router = useRouter();
|
||||
const postId = reactive(router.currentRoute.value.params.postId)
|
||||
const postName = reactive(router.currentRoute.value.params.postName)
|
||||
const userForm = ref();
|
||||
const table = ref();
|
||||
const title = ref('添加用户');
|
||||
const dialogTable = ref();
|
||||
const list = ref([]);
|
||||
const userList = ref([]);
|
||||
const total = ref([]);
|
||||
const dialogTotal = ref([]);
|
||||
const userIds = ref([]);
|
||||
const userNames = ref([]);
|
||||
const cancelUserIds = ref([]);
|
||||
const moreCancelDisabled = ref(true);
|
||||
const dialogDisabled = ref(true);
|
||||
const loading = ref(true);
|
||||
const dialogLoading = ref(true);
|
||||
const showDeleteCurrent = ref(false);
|
||||
const queryParams = reactive({
|
||||
userName: "",
|
||||
phoneNumber: ""
|
||||
});
|
||||
const query = reactive({
|
||||
userName: "",
|
||||
phoneNumber: ""
|
||||
});
|
||||
const pageInfo = reactive({
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
});
|
||||
const formInstance = ref();
|
||||
const isVisited = ref(false);
|
||||
const form = ref();
|
||||
|
||||
//用户搜索重置
|
||||
const handleReset = () => {
|
||||
userForm.value.resetFields();
|
||||
searchUser();
|
||||
};
|
||||
const handleDialogReset = () => {
|
||||
formInstance.value.resetFields();
|
||||
getExcludeUser();
|
||||
};
|
||||
//根据角色id获取用户信息
|
||||
const searchUser = async () => {
|
||||
let params = {
|
||||
// postId: postId,
|
||||
...queryParams,
|
||||
...pageInfo
|
||||
};
|
||||
loading.value = true
|
||||
getUserInfoByPostId(postId, params).then(res => {
|
||||
if (res.code === 1000) {
|
||||
showDeleteCurrent.value = res.data.rows.length === 0;
|
||||
list.value = res.data.rows;
|
||||
total.value = res.data.total;
|
||||
loading.value = false;
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
};
|
||||
//获取添加弹窗的用户
|
||||
const getExcludeUser = async () => {
|
||||
let params = {
|
||||
// postId: postId,
|
||||
...query,
|
||||
...pageInfo
|
||||
};
|
||||
dialogLoading.value = true;
|
||||
getUserExcludePostId(postId, params).then(res => {
|
||||
if (res.code === 1000) {
|
||||
userList.value = res.data.rows;
|
||||
dialogTotal.value = res.data.total;
|
||||
dialogLoading.value = false;
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
//添加用户
|
||||
const handleAdd = () => {
|
||||
getExcludeUser()
|
||||
isVisited.value = true
|
||||
dialogDisabled.value = true
|
||||
}
|
||||
const handleBack = () => {
|
||||
tagsViewStore.delVisitedViews(router.currentRoute.value.path)
|
||||
router.push('/system/post')
|
||||
}
|
||||
//全部取消授权
|
||||
const handleCancelAll = () => {
|
||||
ElMessageBox.confirm(`确认全部取消授权吗?`, "系统提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(() => {
|
||||
unbindAllUserByPost(postId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg);
|
||||
searchUser()
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
const handleSelect = (selection) => {
|
||||
if (selection.length !== 0) {
|
||||
moreCancelDisabled.value = false;
|
||||
cancelUserIds.value = selection.map(item => item.userId)
|
||||
userNames.value = selection.map(item => item.userName).join()
|
||||
} else {
|
||||
moreCancelDisabled.value = true;
|
||||
}
|
||||
}
|
||||
//取消授权
|
||||
const handleCancelAuthorization = (userIds) => {
|
||||
cancelPostAndUserAuthorization(userIds, postId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg);
|
||||
moreCancelDisabled.value = true
|
||||
searchUser()
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
//批量取消授权
|
||||
const handleMoreCancelAuthorization = (cancelUserIds, userName) => {
|
||||
ElMessageBox.confirm(`确认取消授权名称为"${userName}"的用户吗?`, "系统提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(() => {
|
||||
handleCancelAuthorization(cancelUserIds)
|
||||
})
|
||||
}
|
||||
//删除当前岗位
|
||||
const handleDeletePost = () => {
|
||||
ElMessageBox.confirm(`确认删除名称为"${postName}"的岗位吗?`, "系统提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(() => {
|
||||
deletePost(postId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg)
|
||||
tagsViewStore.delVisitedViews(router.currentRoute.value.path)
|
||||
router.push('/system/post')
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
//取消
|
||||
const handleCancel = () => {
|
||||
isVisited.value = false;
|
||||
};
|
||||
|
||||
const handleDialogSelect = (selection) => {
|
||||
if (selection.length !== 0) {
|
||||
dialogDisabled.value = false;
|
||||
userIds.value = selection.map(item => item.userId)
|
||||
} else {
|
||||
dialogDisabled.value = true;
|
||||
}
|
||||
}
|
||||
const handleSubmit = (userIds) => {
|
||||
postBindUser(userIds, postId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg);
|
||||
searchUser()
|
||||
isVisited.value = false
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
//切换每页显示条数
|
||||
const handleSizeChange = (val) => {
|
||||
pageInfo.pageSize = val;
|
||||
searchUser();
|
||||
};
|
||||
const handleSizeChangeDialog = (val) => {
|
||||
pageInfo.pageSize = val;
|
||||
getExcludeUser();
|
||||
};
|
||||
|
||||
//点击页码进行分页功能
|
||||
const handleCurrentChange = (val) => {
|
||||
pageInfo.pageNum = val;
|
||||
searchUser();
|
||||
};
|
||||
const handleCurrentChangeDialog = (val) => {
|
||||
pageInfo.pageNum = val;
|
||||
getExcludeUser();
|
||||
};
|
||||
|
||||
searchUser()
|
||||
</script>
|
||||
|
||||
@@ -1,260 +1,260 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form :model="queryParams" class="query-form" inline ref="queryInstance">
|
||||
<el-form-item label="岗位名称" prop="postName">
|
||||
<el-input v-model="queryParams.postName" placeholder="请输入岗位名称" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="岗位编码" prop="postCode">
|
||||
<el-input v-model="queryParams.postCode" placeholder="请输入岗位编码" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="state">
|
||||
<el-select v-model="queryParams.state" placeholder="岗位状态" clearable filterable>
|
||||
<el-option
|
||||
v-for="item in cacheStore.getDict('normal_disable')"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="getList" :icon="Search">搜索</el-button>
|
||||
<el-button type="primary" @click="handleReset(queryInstance)" :icon="Refresh">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="table-header-btn">
|
||||
<el-button type="primary" @click="handleAdd" :icon="Plus">新增</el-button>
|
||||
<!-- <el-button type="info" @click="handleExpand" :icon="Sort">{{ isExpand ? '全部收起' : '全部展开' }}</el-button>-->
|
||||
</div>
|
||||
<div class="table">
|
||||
<el-table
|
||||
:data="list"
|
||||
row-key="postId"
|
||||
:lazy="true"
|
||||
v-loading="loading"
|
||||
v-tabh
|
||||
>
|
||||
<el-table-column label="序号" type="index" align="center" width="60"/>
|
||||
<el-table-column prop="postName" label="岗位名称"/>
|
||||
<el-table-column prop="postCode" label="岗位编码"/>
|
||||
<el-table-column prop="postSort" label="排序" width="60px"/>
|
||||
<el-table-column prop="state" label="状态">
|
||||
<template #default="scope">
|
||||
<tag dict-type="normal_disable" :value="scope.row.state"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间"/>
|
||||
<el-table-column label="操作">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" size="mini" @click="handleEdit(scope.row.postId)" link>修改</el-button>
|
||||
<el-button type="primary" size="mini" @click="handleAssignedUser(scope.row)" link>分配用户
|
||||
</el-button>
|
||||
<popover-delete v-if="scope.row.parentId!==0" :name="scope.row.postName" :type="'岗位'"
|
||||
@delete="handleDelete(scope.row.postId)"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<paging :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize" :page-sizes="[10, 20, 30, 40,50]"
|
||||
:total="total" @changeSize="handleSizeChange" @goPage="handleCurrentChange"/>
|
||||
<el-dialog v-model="isVisited" :title="title" width="600px">
|
||||
<el-form :model="form" ref="formInstance" label-width="100px" :rules="rules">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="岗位名称" prop="postName">
|
||||
<el-input v-model="form.postName" placeholder="请输入岗位名称"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="岗位编码" prop="postCode">
|
||||
<el-input v-model="form.postCode" placeholder="请输入岗位编码"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11">
|
||||
<el-form-item label="显示顺序" prop="postSort">
|
||||
<el-input-number v-model="form.postSort"></el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="状态" prop="state">
|
||||
<el-radio-group v-model="form.state" size="mini">
|
||||
<el-radio v-for="post in cacheStore.getDict('normal_disable')" :key="post.value"
|
||||
:label="post.value">
|
||||
{{ post.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span>
|
||||
<el-button @click="handleCancel">取消</el-button>
|
||||
<el-button type="primary" @click="handleSubmit(formInstance)">确定</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {useCacheStore} from '@/stores/cache.js'
|
||||
import {Search, Refresh, Plus} from "@element-plus/icons-vue";
|
||||
import {getPostList, addPost, deletePost, editPost, getPostDetail} from "@/api/post/post";
|
||||
import Tag from '@/components/Tag.vue'
|
||||
import {ElMessage, ElMessageBox} from "element-plus";
|
||||
import Paging from "@/components/pagination/index.vue";
|
||||
import {useRouter} from "vue-router";
|
||||
const router = useRouter()
|
||||
const cacheStore = useCacheStore()
|
||||
const queryInstance = ref()
|
||||
const queryParams = reactive({
|
||||
postName: '',
|
||||
postCode: '',
|
||||
state: ''
|
||||
})
|
||||
const pageInfo = reactive({
|
||||
pageSize: 10,
|
||||
pageNum: 1
|
||||
})
|
||||
const total = ref()
|
||||
const isVisited = ref(false);
|
||||
const loading = ref(true)
|
||||
const list = ref([])
|
||||
const title = ref();
|
||||
const form = ref();
|
||||
const formInstance = ref();
|
||||
const rules = reactive({
|
||||
postName: [
|
||||
{required: true, message: '请输入岗位名称', trigger: 'blur'},
|
||||
],
|
||||
postCode: [
|
||||
{required: true, message: '请输入岗位编码', trigger: 'blur'},
|
||||
],
|
||||
// postSort: [
|
||||
// {required: true, message: '请选择显示顺序', trigger: 'blur'},
|
||||
// ]
|
||||
})
|
||||
const getList = async () => {
|
||||
loading.value = true
|
||||
getPostList({
|
||||
...queryParams,
|
||||
...pageInfo
|
||||
}).then(res => {
|
||||
if (res.code === 1000) {
|
||||
res.data.rows = res.data.rows.sort((a, b) => {
|
||||
return a.postSort - b.postSort
|
||||
})
|
||||
total.value = res.data.total;
|
||||
list.value = res.data.rows
|
||||
loading.value = false
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
})
|
||||
}
|
||||
const handleReset = (instance) => {
|
||||
if (!instance) return
|
||||
instance.resetFields()
|
||||
getList()
|
||||
}
|
||||
const restForm = () => {
|
||||
form.value = {
|
||||
postName: null,
|
||||
postCode: null,
|
||||
postSort: 0,
|
||||
state: '1'
|
||||
};
|
||||
};
|
||||
//添加功能
|
||||
const handleAdd = () => {
|
||||
restForm();
|
||||
getList()
|
||||
title.value = "新增岗位";
|
||||
isVisited.value = true;
|
||||
};
|
||||
//修改功能
|
||||
const handleEdit = (postId) => {
|
||||
restForm();
|
||||
//查看详情
|
||||
getPostDetail(postId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
console.log('岗位详情', res.data)
|
||||
form.value = res.data
|
||||
title.value = "修改岗位";
|
||||
isVisited.value = true;
|
||||
}
|
||||
})
|
||||
};
|
||||
//分配用户
|
||||
const handleAssignedUser = (row) => {
|
||||
//路由跳转，携带参数
|
||||
router.push('/post-auth/user/' + row.postId+'/'+ row.postName)
|
||||
}
|
||||
//删除功能
|
||||
const handleDelete = (postId) => {
|
||||
// ElMessageBox.confirm(`确认删除名称为${row.postName}的数据吗?`, "系统提示", {
|
||||
// confirmButtonText: "确定",
|
||||
// cancelButtonText: "取消",
|
||||
// type: "warning"
|
||||
// }).then(() => {
|
||||
deletePost(postId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg);
|
||||
getList();
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
// });
|
||||
};
|
||||
|
||||
//切换每页显示条数
|
||||
const handleSizeChange = (val) => {
|
||||
pageInfo.pageSize = val
|
||||
getList()
|
||||
}
|
||||
//点击页码进行分页功能
|
||||
const handleCurrentChange = (val) => {
|
||||
pageInfo.pageNum = val
|
||||
getList()
|
||||
}
|
||||
//取消操作
|
||||
const handleCancel = () => {
|
||||
restForm();
|
||||
isVisited.value = false;
|
||||
};
|
||||
|
||||
const handleSubmit = async (formInstance) => {
|
||||
if (!formInstance) return;
|
||||
formInstance.validate(async (valid) => {
|
||||
if (!valid) return;
|
||||
if (title.value == "新增岗位") {
|
||||
addPost(form.value).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg);
|
||||
getList();
|
||||
isVisited.value = false;
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
editPost(form.value).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg);
|
||||
getList();
|
||||
isVisited.value = false;
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
getList()
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
<template>
|
||||
<div>
|
||||
<el-form :model="queryParams" class="query-form" inline ref="queryInstance">
|
||||
<el-form-item label="岗位名称" prop="postName">
|
||||
<el-input v-model="queryParams.postName" placeholder="请输入岗位名称" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="岗位编码" prop="postCode">
|
||||
<el-input v-model="queryParams.postCode" placeholder="请输入岗位编码" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="state">
|
||||
<el-select v-model="queryParams.state" placeholder="岗位状态" clearable filterable>
|
||||
<el-option
|
||||
v-for="item in cacheStore.getDict('normal_disable')"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="getList" :icon="Search">搜索</el-button>
|
||||
<el-button type="primary" @click="handleReset(queryInstance)" :icon="Refresh">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="table-header-btn">
|
||||
<el-button type="primary" @click="handleAdd" :icon="Plus">新增</el-button>
|
||||
<!-- <el-button type="info" @click="handleExpand" :icon="Sort">{{ isExpand ? '全部收起' : '全部展开' }}</el-button>-->
|
||||
</div>
|
||||
<div class="table">
|
||||
<el-table
|
||||
:data="list"
|
||||
row-key="postId"
|
||||
:lazy="true"
|
||||
v-loading="loading"
|
||||
v-tabh
|
||||
>
|
||||
<el-table-column label="序号" type="index" align="center" width="60"/>
|
||||
<el-table-column prop="postName" label="岗位名称"/>
|
||||
<el-table-column prop="postCode" label="岗位编码"/>
|
||||
<el-table-column prop="postSort" label="排序" width="60px"/>
|
||||
<el-table-column prop="state" label="状态">
|
||||
<template #default="scope">
|
||||
<tag dict-type="normal_disable" :value="scope.row.state"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间"/>
|
||||
<el-table-column label="操作">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" size="mini" @click="handleEdit(scope.row.postId)" link>修改</el-button>
|
||||
<el-button type="primary" size="mini" @click="handleAssignedUser(scope.row)" link>分配用户
|
||||
</el-button>
|
||||
<popover-delete v-if="scope.row.parentId!==0" :name="scope.row.postName" :type="'岗位'"
|
||||
@delete="handleDelete(scope.row.postId)"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<paging :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize" :page-sizes="[10, 20, 30, 40,50]"
|
||||
:total="total" @changeSize="handleSizeChange" @goPage="handleCurrentChange"/>
|
||||
<el-dialog v-model="isVisited" :title="title" width="600px">
|
||||
<el-form :model="form" ref="formInstance" label-width="100px" :rules="rules">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="岗位名称" prop="postName">
|
||||
<el-input v-model="form.postName" placeholder="请输入岗位名称"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="岗位编码" prop="postCode">
|
||||
<el-input v-model="form.postCode" placeholder="请输入岗位编码"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11">
|
||||
<el-form-item label="显示顺序" prop="postSort">
|
||||
<el-input-number v-model="form.postSort"></el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="状态" prop="state">
|
||||
<el-radio-group v-model="form.state" size="mini">
|
||||
<el-radio v-for="post in cacheStore.getDict('normal_disable')" :key="post.value"
|
||||
:label="post.value">
|
||||
{{ post.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span>
|
||||
<el-button @click="handleCancel">取消</el-button>
|
||||
<el-button type="primary" @click="handleSubmit(formInstance)">确定</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {useCacheStore} from '@/stores/cache.js'
|
||||
import {Search, Refresh, Plus} from "@element-plus/icons-vue";
|
||||
import {getPostList, addPost, deletePost, editPost, getPostDetail} from "@/api/post/post";
|
||||
import Tag from '@/components/Tag.vue'
|
||||
import {ElMessage, ElMessageBox} from "element-plus";
|
||||
import Paging from "@/components/pagination/index.vue";
|
||||
import {useRouter} from "vue-router";
|
||||
const router = useRouter()
|
||||
const cacheStore = useCacheStore()
|
||||
const queryInstance = ref()
|
||||
const queryParams = reactive({
|
||||
postName: '',
|
||||
postCode: '',
|
||||
state: ''
|
||||
})
|
||||
const pageInfo = reactive({
|
||||
pageSize: 10,
|
||||
pageNum: 1
|
||||
})
|
||||
const total = ref()
|
||||
const isVisited = ref(false);
|
||||
const loading = ref(true)
|
||||
const list = ref([])
|
||||
const title = ref();
|
||||
const form = ref();
|
||||
const formInstance = ref();
|
||||
const rules = reactive({
|
||||
postName: [
|
||||
{required: true, message: '请输入岗位名称', trigger: 'blur'},
|
||||
],
|
||||
postCode: [
|
||||
{required: true, message: '请输入岗位编码', trigger: 'blur'},
|
||||
],
|
||||
// postSort: [
|
||||
// {required: true, message: '请选择显示顺序', trigger: 'blur'},
|
||||
// ]
|
||||
})
|
||||
const getList = async () => {
|
||||
loading.value = true
|
||||
getPostList({
|
||||
...queryParams,
|
||||
...pageInfo
|
||||
}).then(res => {
|
||||
if (res.code === 1000) {
|
||||
res.data.rows = res.data.rows.sort((a, b) => {
|
||||
return a.postSort - b.postSort
|
||||
})
|
||||
total.value = res.data.total;
|
||||
list.value = res.data.rows
|
||||
loading.value = false
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
})
|
||||
}
|
||||
const handleReset = (instance) => {
|
||||
if (!instance) return
|
||||
instance.resetFields()
|
||||
getList()
|
||||
}
|
||||
const restForm = () => {
|
||||
form.value = {
|
||||
postName: null,
|
||||
postCode: null,
|
||||
postSort: 0,
|
||||
state: '1'
|
||||
};
|
||||
};
|
||||
//添加功能
|
||||
const handleAdd = () => {
|
||||
restForm();
|
||||
getList()
|
||||
title.value = "新增岗位";
|
||||
isVisited.value = true;
|
||||
};
|
||||
//修改功能
|
||||
const handleEdit = (postId) => {
|
||||
restForm();
|
||||
//查看详情
|
||||
getPostDetail(postId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
console.log('岗位详情', res.data)
|
||||
form.value = res.data
|
||||
title.value = "修改岗位";
|
||||
isVisited.value = true;
|
||||
}
|
||||
})
|
||||
};
|
||||
//分配用户
|
||||
const handleAssignedUser = (row) => {
|
||||
//路由跳转，携带参数
|
||||
router.push('/post-auth/user/' + row.postId+'/'+ row.postName)
|
||||
}
|
||||
//删除功能
|
||||
const handleDelete = (postId) => {
|
||||
// ElMessageBox.confirm(`确认删除名称为${row.postName}的数据吗?`, "系统提示", {
|
||||
// confirmButtonText: "确定",
|
||||
// cancelButtonText: "取消",
|
||||
// type: "warning"
|
||||
// }).then(() => {
|
||||
deletePost(postId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg);
|
||||
getList();
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
// });
|
||||
};
|
||||
|
||||
//切换每页显示条数
|
||||
const handleSizeChange = (val) => {
|
||||
pageInfo.pageSize = val
|
||||
getList()
|
||||
}
|
||||
//点击页码进行分页功能
|
||||
const handleCurrentChange = (val) => {
|
||||
pageInfo.pageNum = val
|
||||
getList()
|
||||
}
|
||||
//取消操作
|
||||
const handleCancel = () => {
|
||||
restForm();
|
||||
isVisited.value = false;
|
||||
};
|
||||
|
||||
const handleSubmit = async (formInstance) => {
|
||||
if (!formInstance) return;
|
||||
formInstance.validate(async (valid) => {
|
||||
if (!valid) return;
|
||||
if (title.value == "新增岗位") {
|
||||
addPost(form.value).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg);
|
||||
getList();
|
||||
isVisited.value = false;
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
editPost(form.value).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg);
|
||||
getList();
|
||||
isVisited.value = false;
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
getList()
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
|
||||
@@ -1,345 +1,345 @@
|
||||
<template>
|
||||
<el-form :model="queryParams" class="query-form" inline ref="userForm">
|
||||
<el-form-item label="当前角色" prop="userName">
|
||||
<el-tag >{{roleName}}</el-tag>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户名称" prop="userName">
|
||||
<el-input
|
||||
v-model="queryParams.userName"
|
||||
placeholder="请输入用户名称"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号码" prop="phoneNumber">
|
||||
<el-input
|
||||
v-model="queryParams.phoneNumber"
|
||||
placeholder="请输入手机号码"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="searchUser" :icon="Search">搜索</el-button>
|
||||
<el-button @click="handleReset" :icon="Refresh">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="table-header-btn">
|
||||
<el-button type="primary" @click="handleAdd" :icon="Plus">添加用户</el-button>
|
||||
<el-button type="primary" @click="handleBack" :icon="RefreshLeft" plain>返回</el-button>
|
||||
<el-button type="danger" @click="handleCancelAll" :icon="CircleClose" plain>全部取消</el-button>
|
||||
<el-button type="danger" @click="handleMoreCancelAuthorization(cancelUserIds,userNames)" :icon="CircleClose" plain
|
||||
:disabled="moreCancelDisabled">批量取消
|
||||
</el-button>
|
||||
<el-button type="danger" @click="handleDeleteRole" :icon="Delete" plain v-if="showDeleteCurrent">删除当前角色</el-button>
|
||||
</div>
|
||||
<div class="table">
|
||||
<el-table
|
||||
:data="list"
|
||||
row-key="userId"
|
||||
:lazy="true"
|
||||
ref="table"
|
||||
v-loading="loading"
|
||||
@select="handleSelect"
|
||||
v-tabh
|
||||
>
|
||||
<el-table-column type="selection" width="55"/>
|
||||
<el-table-column prop="userName" label="用户名称" align="center"/>
|
||||
<el-table-column prop="nickName" label="用户昵称" align="center"/>
|
||||
<el-table-column prop="email" label="邮箱" align="center"/>
|
||||
<el-table-column prop="phoneNumber" label="手机号码" align="center"/>
|
||||
<el-table-column prop="state" label="状态" align="center">
|
||||
<template #default="scope">
|
||||
<tag dict-type="normal_disable" :value="scope.row.state"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" align="center" width="180px"/>
|
||||
<el-table-column label="操作" align="center">
|
||||
<template #default="scope">
|
||||
<popover-delete :name="scope.row.userName" :type="'用户'" :btn-text="'取消授权'"
|
||||
@delete="handleCancelAuthorization([scope.row.userId])"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<paging :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize" :page-sizes="[10, 20, 30, 40,50]"
|
||||
:total="total" @changeSize="handleSizeChange" @goPage="handleCurrentChange"/>
|
||||
<el-dialog v-model="isVisited" :title="title" width="830px">
|
||||
<el-form :model="query" class="query-form" inline ref="formInstance">
|
||||
<el-form-item label="用户名称" prop="userName">
|
||||
<el-input
|
||||
v-model="query.userName"
|
||||
placeholder="请输入用户名称"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号码" prop="phoneNumber">
|
||||
<el-input
|
||||
v-model="query.phoneNumber"
|
||||
placeholder="请输入手机号码"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="getExcludeUser" :icon="Search">搜索</el-button>
|
||||
<el-button @click="handleDialogReset" :icon="Refresh">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="table">
|
||||
<el-table
|
||||
:data="userList"
|
||||
row-key="userId"
|
||||
:lazy="true"
|
||||
ref="dialogTable"
|
||||
v-loading="dialogLoading"
|
||||
@select="handleDialogSelect"
|
||||
>
|
||||
<el-table-column type="selection" width="55"/>
|
||||
<el-table-column prop="userName" label="用户名称" align="center"/>
|
||||
<el-table-column prop="nickName" label="用户昵称" align="center"/>
|
||||
<el-table-column prop="email" label="邮箱" align="center"/>
|
||||
<el-table-column prop="phoneNumber" label="手机号码" align="center"/>
|
||||
<el-table-column prop="state" label="状态" align="center">
|
||||
<template #default="scope">
|
||||
<tag dict-type="normal_disable" :value="scope.row.state"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" align="center" width="180px"/>
|
||||
<el-table-column label="操作" align="center">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" size="mini"
|
||||
@click="handleSubmit(scope.row.userId)" link>添加
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<paging :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize" :page-sizes="[10, 20, 30, 40,50]"
|
||||
:total="dialogTotal" @changeSize="handleSizeChangeDialog" @goPage="handleCurrentChangeDialog"/>
|
||||
|
||||
<template #footer>
|
||||
<span>
|
||||
<el-button @click="handleCancel">取消</el-button>
|
||||
<el-button type="primary" @click="handleSubmit(userIds)" :disabled="dialogDisabled">批量添加</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {Plus, Search, Refresh, RefreshLeft, CircleClose, Delete} from "@element-plus/icons-vue";
|
||||
import {ElMessage, ElMessageBox} from "element-plus";
|
||||
import {getUserByRoleId, cancelAuthorization, getUserExcludeRoleId, unbindAllUser, roleBindUser} from "@/api/user/user";
|
||||
import {useRouter} from "vue-router";
|
||||
import Tag from '@/components/Tag.vue'
|
||||
import Paging from "@/components/pagination/index.vue";
|
||||
import {useTagsView} from '@/stores/tagsview.js'
|
||||
import {deleteRole} from "@/api/role/role";
|
||||
|
||||
const tagsViewStore = useTagsView()
|
||||
const router = useRouter();
|
||||
const roleId = reactive(router.currentRoute.value.params.roleId)
|
||||
const roleName = reactive(router.currentRoute.value.params.roleName)
|
||||
const userForm = ref();
|
||||
const table = ref();
|
||||
const title = ref('添加用户');
|
||||
const dialogTable = ref();
|
||||
const list = ref([]);
|
||||
const userList = ref([]);
|
||||
const total = ref([]);
|
||||
const dialogTotal = ref([]);
|
||||
const userIds = ref([]);
|
||||
const userNames = ref([]);
|
||||
const cancelUserIds = ref([]);
|
||||
const moreCancelDisabled = ref(true);
|
||||
const dialogDisabled = ref(true);
|
||||
const loading = ref(true);
|
||||
const dialogLoading = ref(true);
|
||||
const showDeleteCurrent = ref(false);
|
||||
const queryParams = reactive({
|
||||
userName: "",
|
||||
phoneNumber: ""
|
||||
});
|
||||
const query = reactive({
|
||||
userName: "",
|
||||
phoneNumber: ""
|
||||
});
|
||||
const pageInfo = reactive({
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
});
|
||||
const formInstance = ref();
|
||||
const isVisited = ref(false);
|
||||
const form = ref();
|
||||
|
||||
//用户搜索重置
|
||||
const handleReset = () => {
|
||||
userForm.value.resetFields();
|
||||
searchUser();
|
||||
};
|
||||
const handleDialogReset = () => {
|
||||
formInstance.value.resetFields();
|
||||
getExcludeUser();
|
||||
};
|
||||
//根据角色id获取用户信息
|
||||
const searchUser = async () => {
|
||||
let params = {
|
||||
...queryParams,
|
||||
...pageInfo
|
||||
};
|
||||
loading.value = true
|
||||
getUserByRoleId(roleId, params).then(res => {
|
||||
if (res.code === 1000) {
|
||||
showDeleteCurrent.value = res.data.rows.length === 0;
|
||||
list.value = res.data.rows;
|
||||
total.value = res.data.total;
|
||||
loading.value = false;
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
};
|
||||
//获取添加弹窗的用户
|
||||
const getExcludeUser = async () => {
|
||||
let params = {
|
||||
// roleId: roleId,
|
||||
...query,
|
||||
...pageInfo
|
||||
};
|
||||
dialogLoading.value = true;
|
||||
getUserExcludeRoleId(roleId, params).then(res => {
|
||||
if (res.code === 1000) {
|
||||
userList.value = res.data.rows;
|
||||
dialogTotal.value = res.data.total;
|
||||
dialogLoading.value = false;
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
//添加用户
|
||||
const handleAdd = () => {
|
||||
getExcludeUser()
|
||||
isVisited.value = true
|
||||
dialogDisabled.value = true
|
||||
}
|
||||
const handleBack = () => {
|
||||
tagsViewStore.delVisitedViews(router.currentRoute.value.path)
|
||||
router.push('/system/role')
|
||||
}
|
||||
//全部取消授权
|
||||
const handleCancelAll = () => {
|
||||
ElMessageBox.confirm(`确认全部取消授权吗?`, "系统提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(() => {
|
||||
unbindAllUser(roleId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg);
|
||||
searchUser()
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
const handleSelect = (selection) => {
|
||||
if (selection.length !== 0) {
|
||||
moreCancelDisabled.value = false;
|
||||
cancelUserIds.value = selection.map(item => item.userId)
|
||||
userNames.value = selection.map(item => item.userName).join()
|
||||
} else {
|
||||
moreCancelDisabled.value = true;
|
||||
}
|
||||
}
|
||||
//单个取消授权
|
||||
const handleCancelAuthorization = (userIds) => {
|
||||
cancelAuthorization({
|
||||
id: roleId,
|
||||
ids: userIds,
|
||||
}).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg);
|
||||
moreCancelDisabled.value = true
|
||||
searchUser()
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
//批量取消授权
|
||||
const handleMoreCancelAuthorization = (cancelUserIds, userName) => {
|
||||
ElMessageBox.confirm(`确认取消授权名称为"${userName}"的用户吗?`, "系统提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(() => {
|
||||
handleCancelAuthorization(cancelUserIds)
|
||||
})
|
||||
}
|
||||
const handleDeleteRole = () => {
|
||||
ElMessageBox.confirm(`确认删除名称为"${roleName}"的角色吗?`, "系统提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(() => {
|
||||
deleteRole(roleId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg)
|
||||
tagsViewStore.delVisitedViews(router.currentRoute.value.path)
|
||||
router.push('/system/role')
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
//取消
|
||||
const handleCancel = () => {
|
||||
isVisited.value = false;
|
||||
};
|
||||
|
||||
const handleDialogSelect = (selection) => {
|
||||
if (selection.length !== 0) {
|
||||
dialogDisabled.value = false;
|
||||
userIds.value = selection.map(item => item.userId)
|
||||
} else {
|
||||
dialogDisabled.value = true;
|
||||
}
|
||||
}
|
||||
const handleSubmit = (userIds) => {
|
||||
roleBindUser({
|
||||
id: roleId,
|
||||
ids: userIds,
|
||||
}).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg);
|
||||
searchUser()
|
||||
isVisited.value = false
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
//切换每页显示条数
|
||||
const handleSizeChange = (val) => {
|
||||
pageInfo.pageSize = val;
|
||||
searchUser();
|
||||
};
|
||||
const handleSizeChangeDialog = (val) => {
|
||||
pageInfo.pageSize = val;
|
||||
getExcludeUser();
|
||||
};
|
||||
|
||||
//点击页码进行分页功能
|
||||
const handleCurrentChange = (val) => {
|
||||
pageInfo.pageNum = val;
|
||||
searchUser();
|
||||
};
|
||||
const handleCurrentChangeDialog = (val) => {
|
||||
pageInfo.pageNum = val;
|
||||
getExcludeUser();
|
||||
};
|
||||
|
||||
searchUser()
|
||||
</script>
|
||||
<template>
|
||||
<el-form :model="queryParams" class="query-form" inline ref="userForm">
|
||||
<el-form-item label="当前角色" prop="userName">
|
||||
<el-tag >{{roleName}}</el-tag>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户名称" prop="userName">
|
||||
<el-input
|
||||
v-model="queryParams.userName"
|
||||
placeholder="请输入用户名称"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号码" prop="phoneNumber">
|
||||
<el-input
|
||||
v-model="queryParams.phoneNumber"
|
||||
placeholder="请输入手机号码"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="searchUser" :icon="Search">搜索</el-button>
|
||||
<el-button @click="handleReset" :icon="Refresh">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="table-header-btn">
|
||||
<el-button type="primary" @click="handleAdd" :icon="Plus">添加用户</el-button>
|
||||
<el-button type="primary" @click="handleBack" :icon="RefreshLeft" plain>返回</el-button>
|
||||
<el-button type="danger" @click="handleCancelAll" :icon="CircleClose" plain>全部取消</el-button>
|
||||
<el-button type="danger" @click="handleMoreCancelAuthorization(cancelUserIds,userNames)" :icon="CircleClose" plain
|
||||
:disabled="moreCancelDisabled">批量取消
|
||||
</el-button>
|
||||
<el-button type="danger" @click="handleDeleteRole" :icon="Delete" plain v-if="showDeleteCurrent">删除当前角色</el-button>
|
||||
</div>
|
||||
<div class="table">
|
||||
<el-table
|
||||
:data="list"
|
||||
row-key="userId"
|
||||
:lazy="true"
|
||||
ref="table"
|
||||
v-loading="loading"
|
||||
@select="handleSelect"
|
||||
v-tabh
|
||||
>
|
||||
<el-table-column type="selection" width="55"/>
|
||||
<el-table-column prop="userName" label="用户名称" align="center"/>
|
||||
<el-table-column prop="nickName" label="用户昵称" align="center"/>
|
||||
<el-table-column prop="email" label="邮箱" align="center"/>
|
||||
<el-table-column prop="phoneNumber" label="手机号码" align="center"/>
|
||||
<el-table-column prop="state" label="状态" align="center">
|
||||
<template #default="scope">
|
||||
<tag dict-type="normal_disable" :value="scope.row.state"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" align="center" width="180px"/>
|
||||
<el-table-column label="操作" align="center">
|
||||
<template #default="scope">
|
||||
<popover-delete :name="scope.row.userName" :type="'用户'" :btn-text="'取消授权'"
|
||||
@delete="handleCancelAuthorization([scope.row.userId])"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<paging :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize" :page-sizes="[10, 20, 30, 40,50]"
|
||||
:total="total" @changeSize="handleSizeChange" @goPage="handleCurrentChange"/>
|
||||
<el-dialog v-model="isVisited" :title="title" width="830px">
|
||||
<el-form :model="query" class="query-form" inline ref="formInstance">
|
||||
<el-form-item label="用户名称" prop="userName">
|
||||
<el-input
|
||||
v-model="query.userName"
|
||||
placeholder="请输入用户名称"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号码" prop="phoneNumber">
|
||||
<el-input
|
||||
v-model="query.phoneNumber"
|
||||
placeholder="请输入手机号码"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="getExcludeUser" :icon="Search">搜索</el-button>
|
||||
<el-button @click="handleDialogReset" :icon="Refresh">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="table">
|
||||
<el-table
|
||||
:data="userList"
|
||||
row-key="userId"
|
||||
:lazy="true"
|
||||
ref="dialogTable"
|
||||
v-loading="dialogLoading"
|
||||
@select="handleDialogSelect"
|
||||
>
|
||||
<el-table-column type="selection" width="55"/>
|
||||
<el-table-column prop="userName" label="用户名称" align="center"/>
|
||||
<el-table-column prop="nickName" label="用户昵称" align="center"/>
|
||||
<el-table-column prop="email" label="邮箱" align="center"/>
|
||||
<el-table-column prop="phoneNumber" label="手机号码" align="center"/>
|
||||
<el-table-column prop="state" label="状态" align="center">
|
||||
<template #default="scope">
|
||||
<tag dict-type="normal_disable" :value="scope.row.state"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" align="center" width="180px"/>
|
||||
<el-table-column label="操作" align="center">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" size="mini"
|
||||
@click="handleSubmit(scope.row.userId)" link>添加
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<paging :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize" :page-sizes="[10, 20, 30, 40,50]"
|
||||
:total="dialogTotal" @changeSize="handleSizeChangeDialog" @goPage="handleCurrentChangeDialog"/>
|
||||
|
||||
<template #footer>
|
||||
<span>
|
||||
<el-button @click="handleCancel">取消</el-button>
|
||||
<el-button type="primary" @click="handleSubmit(userIds)" :disabled="dialogDisabled">批量添加</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {Plus, Search, Refresh, RefreshLeft, CircleClose, Delete} from "@element-plus/icons-vue";
|
||||
import {ElMessage, ElMessageBox} from "element-plus";
|
||||
import {getUserByRoleId, cancelAuthorization, getUserExcludeRoleId, unbindAllUser, roleBindUser} from "@/api/user/user";
|
||||
import {useRouter} from "vue-router";
|
||||
import Tag from '@/components/Tag.vue'
|
||||
import Paging from "@/components/pagination/index.vue";
|
||||
import {useTagsView} from '@/stores/tagsview.js'
|
||||
import {deleteRole} from "@/api/role/role";
|
||||
|
||||
const tagsViewStore = useTagsView()
|
||||
const router = useRouter();
|
||||
const roleId = reactive(router.currentRoute.value.params.roleId)
|
||||
const roleName = reactive(router.currentRoute.value.params.roleName)
|
||||
const userForm = ref();
|
||||
const table = ref();
|
||||
const title = ref('添加用户');
|
||||
const dialogTable = ref();
|
||||
const list = ref([]);
|
||||
const userList = ref([]);
|
||||
const total = ref([]);
|
||||
const dialogTotal = ref([]);
|
||||
const userIds = ref([]);
|
||||
const userNames = ref([]);
|
||||
const cancelUserIds = ref([]);
|
||||
const moreCancelDisabled = ref(true);
|
||||
const dialogDisabled = ref(true);
|
||||
const loading = ref(true);
|
||||
const dialogLoading = ref(true);
|
||||
const showDeleteCurrent = ref(false);
|
||||
const queryParams = reactive({
|
||||
userName: "",
|
||||
phoneNumber: ""
|
||||
});
|
||||
const query = reactive({
|
||||
userName: "",
|
||||
phoneNumber: ""
|
||||
});
|
||||
const pageInfo = reactive({
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
});
|
||||
const formInstance = ref();
|
||||
const isVisited = ref(false);
|
||||
const form = ref();
|
||||
|
||||
//用户搜索重置
|
||||
const handleReset = () => {
|
||||
userForm.value.resetFields();
|
||||
searchUser();
|
||||
};
|
||||
const handleDialogReset = () => {
|
||||
formInstance.value.resetFields();
|
||||
getExcludeUser();
|
||||
};
|
||||
//根据角色id获取用户信息
|
||||
const searchUser = async () => {
|
||||
let params = {
|
||||
...queryParams,
|
||||
...pageInfo
|
||||
};
|
||||
loading.value = true
|
||||
getUserByRoleId(roleId, params).then(res => {
|
||||
if (res.code === 1000) {
|
||||
showDeleteCurrent.value = res.data.rows.length === 0;
|
||||
list.value = res.data.rows;
|
||||
total.value = res.data.total;
|
||||
loading.value = false;
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
};
|
||||
//获取添加弹窗的用户
|
||||
const getExcludeUser = async () => {
|
||||
let params = {
|
||||
// roleId: roleId,
|
||||
...query,
|
||||
...pageInfo
|
||||
};
|
||||
dialogLoading.value = true;
|
||||
getUserExcludeRoleId(roleId, params).then(res => {
|
||||
if (res.code === 1000) {
|
||||
userList.value = res.data.rows;
|
||||
dialogTotal.value = res.data.total;
|
||||
dialogLoading.value = false;
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
//添加用户
|
||||
const handleAdd = () => {
|
||||
getExcludeUser()
|
||||
isVisited.value = true
|
||||
dialogDisabled.value = true
|
||||
}
|
||||
const handleBack = () => {
|
||||
tagsViewStore.delVisitedViews(router.currentRoute.value.path)
|
||||
router.push('/system/role')
|
||||
}
|
||||
//全部取消授权
|
||||
const handleCancelAll = () => {
|
||||
ElMessageBox.confirm(`确认全部取消授权吗?`, "系统提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(() => {
|
||||
unbindAllUser(roleId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg);
|
||||
searchUser()
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
const handleSelect = (selection) => {
|
||||
if (selection.length !== 0) {
|
||||
moreCancelDisabled.value = false;
|
||||
cancelUserIds.value = selection.map(item => item.userId)
|
||||
userNames.value = selection.map(item => item.userName).join()
|
||||
} else {
|
||||
moreCancelDisabled.value = true;
|
||||
}
|
||||
}
|
||||
//单个取消授权
|
||||
const handleCancelAuthorization = (userIds) => {
|
||||
cancelAuthorization({
|
||||
id: roleId,
|
||||
ids: userIds,
|
||||
}).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg);
|
||||
moreCancelDisabled.value = true
|
||||
searchUser()
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
//批量取消授权
|
||||
const handleMoreCancelAuthorization = (cancelUserIds, userName) => {
|
||||
ElMessageBox.confirm(`确认取消授权名称为"${userName}"的用户吗?`, "系统提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(() => {
|
||||
handleCancelAuthorization(cancelUserIds)
|
||||
})
|
||||
}
|
||||
const handleDeleteRole = () => {
|
||||
ElMessageBox.confirm(`确认删除名称为"${roleName}"的角色吗?`, "系统提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(() => {
|
||||
deleteRole(roleId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg)
|
||||
tagsViewStore.delVisitedViews(router.currentRoute.value.path)
|
||||
router.push('/system/role')
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
//取消
|
||||
const handleCancel = () => {
|
||||
isVisited.value = false;
|
||||
};
|
||||
|
||||
const handleDialogSelect = (selection) => {
|
||||
if (selection.length !== 0) {
|
||||
dialogDisabled.value = false;
|
||||
userIds.value = selection.map(item => item.userId)
|
||||
} else {
|
||||
dialogDisabled.value = true;
|
||||
}
|
||||
}
|
||||
const handleSubmit = (userIds) => {
|
||||
roleBindUser({
|
||||
id: roleId,
|
||||
ids: userIds,
|
||||
}).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg);
|
||||
searchUser()
|
||||
isVisited.value = false
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
//切换每页显示条数
|
||||
const handleSizeChange = (val) => {
|
||||
pageInfo.pageSize = val;
|
||||
searchUser();
|
||||
};
|
||||
const handleSizeChangeDialog = (val) => {
|
||||
pageInfo.pageSize = val;
|
||||
getExcludeUser();
|
||||
};
|
||||
|
||||
//点击页码进行分页功能
|
||||
const handleCurrentChange = (val) => {
|
||||
pageInfo.pageNum = val;
|
||||
searchUser();
|
||||
};
|
||||
const handleCurrentChangeDialog = (val) => {
|
||||
pageInfo.pageNum = val;
|
||||
getExcludeUser();
|
||||
};
|
||||
|
||||
searchUser()
|
||||
</script>
|
||||
|
||||
@@ -1,268 +1,268 @@
|
||||
<template>
|
||||
<div v-loading="loading">
|
||||
<baseTitle title="角色信息录入"></baseTitle>
|
||||
<fvForm :schema="schame" @getInstance="getInstance" :rules="rules"></fvForm>
|
||||
<div class="assign-menu-title" >
|
||||
<baseTitle title="分配菜单"></baseTitle>
|
||||
<fvSelect
|
||||
:options="localData.tempRoleOpt"
|
||||
v-model="localData.tempRoleSelect"
|
||||
style="width: 200px;"
|
||||
placeholder="请选择模版角色"
|
||||
@change="roleTempChange"
|
||||
/>
|
||||
</div>
|
||||
<fvCheckbox :options="localData.checkOptions" v-model="localData.checkList" @change="checkBoxChange" />
|
||||
<el-input v-model="localData.filterText" placeholder="请输入关键词" style="width: 400px;" />
|
||||
<div class="menu-assign">
|
||||
<el-tree
|
||||
ref="menuTree"
|
||||
:data="localData.menuData"
|
||||
:filter-node-method="filterMenu"
|
||||
:props="localData.menuTreeProps"
|
||||
:check-strictly="!localData.checkStrictly"
|
||||
show-checkbox
|
||||
node-key="value"
|
||||
@check-change="checkChange"
|
||||
/>
|
||||
</div>
|
||||
<div class="oper-page-btn">
|
||||
<el-button color="#DED0B2" @click="handleSubmit">提交</el-button>
|
||||
<el-button @click="handleBack">返回</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { useTagsView } from '@/stores/tagsview.js'
|
||||
import { useAuthStore } from '@/stores/userstore.js'
|
||||
import fvRadio from '@/fvcomponents/fvRadio/index.vue'
|
||||
import { ElLoading, ElNotification } from 'element-plus';
|
||||
import { getMenuOptRole } from '@/api/system/menuman.js'
|
||||
import { getRoleDetail, operate, getTemRoleOption } from "@/api/role/role";
|
||||
|
||||
const tagsViewStore = useTagsView()
|
||||
const authStore = useAuthStore()
|
||||
const route = useRoute()
|
||||
|
||||
const form = ref(null)
|
||||
const menuTree = ref(null)
|
||||
const loading = ref(false)
|
||||
|
||||
const isExpand = ref('展开')
|
||||
const isAllChose = ref('全选')
|
||||
const localData = reactive({
|
||||
filterText: '',
|
||||
menuData: [],
|
||||
menuTreeProps: {
|
||||
value: "value",
|
||||
label: 'label',
|
||||
children: 'children'
|
||||
},
|
||||
checkStrictly: true,
|
||||
checkList: ['3'],
|
||||
checkOptions: [
|
||||
{
|
||||
label: isExpand.value,
|
||||
value: '1'
|
||||
},
|
||||
{
|
||||
label: isAllChose.value,
|
||||
value: '2'
|
||||
},
|
||||
{
|
||||
label: '父子联动',
|
||||
value: '3'
|
||||
},
|
||||
],
|
||||
tempRoleOpt: [],
|
||||
tempRoleSelect: ''
|
||||
})
|
||||
|
||||
const schame = computed(()=>{
|
||||
let arr = [
|
||||
{
|
||||
label: '角色名称',
|
||||
prop: 'roleName',
|
||||
component: 'el-input',
|
||||
props: {
|
||||
placeholder: '请输入'
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '角色标识',
|
||||
prop: 'roleKey',
|
||||
component: 'el-input',
|
||||
props: {
|
||||
placeholder: '请输入'
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '显示顺序',
|
||||
prop: 'roleSort',
|
||||
component: 'el-input',
|
||||
props: {
|
||||
placeholder: '请输入',
|
||||
type: 'number'
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '状态',
|
||||
prop: 'state',
|
||||
component: markRaw(fvRadio),
|
||||
props: {
|
||||
cacheKey: 'normal_disable'
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '是否为模版',
|
||||
prop: 'template',
|
||||
component: markRaw(fvRadio),
|
||||
props: {
|
||||
options: [
|
||||
{ label: '是', value: true },
|
||||
{ label: '否', value: false },
|
||||
]
|
||||
}
|
||||
},
|
||||
]
|
||||
return !authStore.roles.includes('superAdmin') ? arr.slice(0, arr.length - 1) : arr
|
||||
})
|
||||
|
||||
const rules = reactive({
|
||||
roleName: [{required: true, message: '请输入', trigger: 'change'}],
|
||||
roleKey: [{required: true, message: '请输入', trigger: 'change'}],
|
||||
roleSort: [{required: true, message: '请输入', trigger: 'change'}],
|
||||
})
|
||||
|
||||
const getInstance = (e) => {
|
||||
form.value = e
|
||||
}
|
||||
|
||||
const init = async () => {
|
||||
form.value.setValues({state: '1', template: false})
|
||||
const res = await getTemRoleOption()
|
||||
localData.tempRoleOpt = res.data
|
||||
const { data } = await getMenuOptRole(0)
|
||||
localData.menuData = data.menuOption
|
||||
// localData.checked = data.checked
|
||||
}
|
||||
|
||||
const getInfo = async () => {
|
||||
if(!route.query.id) return
|
||||
const { data } = await getRoleDetail(route.query.id)
|
||||
data.menuIds.forEach(key=>{
|
||||
menuTree.value.setChecked(key, true, false)
|
||||
})
|
||||
form.value.setValues(data)
|
||||
}
|
||||
|
||||
const roleTempChange = async (val) => {
|
||||
try {
|
||||
loading.value = true
|
||||
const { data } = await getRoleDetail(val.value)
|
||||
data.menuIds.forEach(key=>{
|
||||
menuTree.value.setChecked(key, true, false)
|
||||
})
|
||||
delete data.roleId
|
||||
delete data.roleName
|
||||
delete data.roleKey
|
||||
form.value.setValues(data)
|
||||
loading.value = false
|
||||
} catch (error) {
|
||||
loading.value = false
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const filterMenu = (value, data) => {
|
||||
if(!value) return true
|
||||
return data.menuName.includes(value)
|
||||
}
|
||||
|
||||
const checkChange = (data) => {
|
||||
// 获取已选
|
||||
const checkedKeys = menuTree.value.getCheckedKeys()
|
||||
// 获取半选
|
||||
const halfCheckedKeys = menuTree.value.getHalfCheckedKeys()
|
||||
return [...checkedKeys, ...halfCheckedKeys]
|
||||
}
|
||||
|
||||
const checkBoxChange = (val) => {
|
||||
localData.checkStrictly = val.includes('3')
|
||||
let nodes = menuTree.value.store.nodesMap
|
||||
if (val.includes('1')) {
|
||||
for (const node in nodes) {
|
||||
nodes[node].expanded = true;
|
||||
}
|
||||
isExpand.value = '折叠'
|
||||
} else {
|
||||
for (const node in nodes) {
|
||||
nodes[node].expanded = false;
|
||||
}
|
||||
isExpand.value = '展开'
|
||||
}
|
||||
if (val.includes('2')) {
|
||||
menuTree.value.setCheckedNodes(localData.menuData)
|
||||
isAllChose.value = '不全选'
|
||||
} else {
|
||||
menuTree.value.setCheckedNodes([])
|
||||
isAllChose.value = '全选'
|
||||
}
|
||||
}
|
||||
|
||||
const handleSubmit = async () => {
|
||||
const loading = ElLoading.service({fullscreen: true})
|
||||
const { isValidate } = await form.value.validate()
|
||||
if(!isValidate){
|
||||
loading.close()
|
||||
return Promise.reject()
|
||||
}
|
||||
const values = form.value.getValues()
|
||||
values.menuIds = checkChange()
|
||||
operate(values).then(res=>{
|
||||
ElNotification({
|
||||
title: route.query.isAdd ? '新增' : '编辑',
|
||||
message: res.msg,
|
||||
type: res.code === 1000 ? 'success' : 'error'
|
||||
})
|
||||
loading.close()
|
||||
res.code === 1000 ? tagsViewStore.delViewAndGoView('/system/role') : null
|
||||
}).finally(()=>{
|
||||
loading.close()
|
||||
})
|
||||
}
|
||||
|
||||
const handleBack = () => {
|
||||
history.back()
|
||||
}
|
||||
|
||||
watch(localData, (val)=>{
|
||||
menuTree.value.filter(val.filterText)
|
||||
})
|
||||
|
||||
onMounted( async ()=>{
|
||||
loading.value = true
|
||||
await init()
|
||||
if(route.query.id) {
|
||||
await getInfo()
|
||||
}
|
||||
loading.value = false
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.assign-menu-title {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
>div:first-child {
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
.menu-assign {
|
||||
width: 400px;
|
||||
max-height: 500px;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div v-loading="loading">
|
||||
<baseTitle title="角色信息录入"></baseTitle>
|
||||
<fvForm :schema="schame" @getInstance="getInstance" :rules="rules"></fvForm>
|
||||
<div class="assign-menu-title" >
|
||||
<baseTitle title="分配菜单"></baseTitle>
|
||||
<fvSelect
|
||||
:options="localData.tempRoleOpt"
|
||||
v-model="localData.tempRoleSelect"
|
||||
style="width: 200px;"
|
||||
placeholder="请选择模版角色"
|
||||
@change="roleTempChange"
|
||||
/>
|
||||
</div>
|
||||
<fvCheckbox :options="localData.checkOptions" v-model="localData.checkList" @change="checkBoxChange" />
|
||||
<el-input v-model="localData.filterText" placeholder="请输入关键词" style="width: 400px;" />
|
||||
<div class="menu-assign">
|
||||
<el-tree
|
||||
ref="menuTree"
|
||||
:data="localData.menuData"
|
||||
:filter-node-method="filterMenu"
|
||||
:props="localData.menuTreeProps"
|
||||
:check-strictly="!localData.checkStrictly"
|
||||
show-checkbox
|
||||
node-key="value"
|
||||
@check-change="checkChange"
|
||||
/>
|
||||
</div>
|
||||
<div class="oper-page-btn">
|
||||
<el-button color="#DED0B2" @click="handleSubmit">提交</el-button>
|
||||
<el-button @click="handleBack">返回</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { useTagsView } from '@/stores/tagsview.js'
|
||||
import { useAuthStore } from '@/stores/userstore.js'
|
||||
import fvRadio from '@/fvcomponents/fvRadio/index.vue'
|
||||
import { ElLoading, ElNotification } from 'element-plus';
|
||||
import { getMenuOptRole } from '@/api/system/menuman.js'
|
||||
import { getRoleDetail, operate, getTemRoleOption } from "@/api/role/role";
|
||||
|
||||
const tagsViewStore = useTagsView()
|
||||
const authStore = useAuthStore()
|
||||
const route = useRoute()
|
||||
|
||||
const form = ref(null)
|
||||
const menuTree = ref(null)
|
||||
const loading = ref(false)
|
||||
|
||||
const isExpand = ref('展开')
|
||||
const isAllChose = ref('全选')
|
||||
const localData = reactive({
|
||||
filterText: '',
|
||||
menuData: [],
|
||||
menuTreeProps: {
|
||||
value: "value",
|
||||
label: 'label',
|
||||
children: 'children'
|
||||
},
|
||||
checkStrictly: true,
|
||||
checkList: ['3'],
|
||||
checkOptions: [
|
||||
{
|
||||
label: isExpand.value,
|
||||
value: '1'
|
||||
},
|
||||
{
|
||||
label: isAllChose.value,
|
||||
value: '2'
|
||||
},
|
||||
{
|
||||
label: '父子联动',
|
||||
value: '3'
|
||||
},
|
||||
],
|
||||
tempRoleOpt: [],
|
||||
tempRoleSelect: ''
|
||||
})
|
||||
|
||||
const schame = computed(()=>{
|
||||
let arr = [
|
||||
{
|
||||
label: '角色名称',
|
||||
prop: 'roleName',
|
||||
component: 'el-input',
|
||||
props: {
|
||||
placeholder: '请输入'
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '角色标识',
|
||||
prop: 'roleKey',
|
||||
component: 'el-input',
|
||||
props: {
|
||||
placeholder: '请输入'
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '显示顺序',
|
||||
prop: 'roleSort',
|
||||
component: 'el-input',
|
||||
props: {
|
||||
placeholder: '请输入',
|
||||
type: 'number'
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '状态',
|
||||
prop: 'state',
|
||||
component: markRaw(fvRadio),
|
||||
props: {
|
||||
cacheKey: 'normal_disable'
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '是否为模版',
|
||||
prop: 'template',
|
||||
component: markRaw(fvRadio),
|
||||
props: {
|
||||
options: [
|
||||
{ label: '是', value: true },
|
||||
{ label: '否', value: false },
|
||||
]
|
||||
}
|
||||
},
|
||||
]
|
||||
return !authStore.roles.includes('superAdmin') ? arr.slice(0, arr.length - 1) : arr
|
||||
})
|
||||
|
||||
const rules = reactive({
|
||||
roleName: [{required: true, message: '请输入', trigger: 'change'}],
|
||||
roleKey: [{required: true, message: '请输入', trigger: 'change'}],
|
||||
roleSort: [{required: true, message: '请输入', trigger: 'change'}],
|
||||
})
|
||||
|
||||
const getInstance = (e) => {
|
||||
form.value = e
|
||||
}
|
||||
|
||||
const init = async () => {
|
||||
form.value.setValues({state: '1', template: false})
|
||||
const res = await getTemRoleOption()
|
||||
localData.tempRoleOpt = res.data
|
||||
const { data } = await getMenuOptRole(0)
|
||||
localData.menuData = data.menuOption
|
||||
// localData.checked = data.checked
|
||||
}
|
||||
|
||||
const getInfo = async () => {
|
||||
if(!route.query.id) return
|
||||
const { data } = await getRoleDetail(route.query.id)
|
||||
data.menuIds.forEach(key=>{
|
||||
menuTree.value.setChecked(key, true, false)
|
||||
})
|
||||
form.value.setValues(data)
|
||||
}
|
||||
|
||||
const roleTempChange = async (val) => {
|
||||
try {
|
||||
loading.value = true
|
||||
const { data } = await getRoleDetail(val.value)
|
||||
data.menuIds.forEach(key=>{
|
||||
menuTree.value.setChecked(key, true, false)
|
||||
})
|
||||
delete data.roleId
|
||||
delete data.roleName
|
||||
delete data.roleKey
|
||||
form.value.setValues(data)
|
||||
loading.value = false
|
||||
} catch (error) {
|
||||
loading.value = false
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const filterMenu = (value, data) => {
|
||||
if(!value) return true
|
||||
return data.menuName.includes(value)
|
||||
}
|
||||
|
||||
const checkChange = (data) => {
|
||||
// 获取已选
|
||||
const checkedKeys = menuTree.value.getCheckedKeys()
|
||||
// 获取半选
|
||||
const halfCheckedKeys = menuTree.value.getHalfCheckedKeys()
|
||||
return [...checkedKeys, ...halfCheckedKeys]
|
||||
}
|
||||
|
||||
const checkBoxChange = (val) => {
|
||||
localData.checkStrictly = val.includes('3')
|
||||
let nodes = menuTree.value.store.nodesMap
|
||||
if (val.includes('1')) {
|
||||
for (const node in nodes) {
|
||||
nodes[node].expanded = true;
|
||||
}
|
||||
isExpand.value = '折叠'
|
||||
} else {
|
||||
for (const node in nodes) {
|
||||
nodes[node].expanded = false;
|
||||
}
|
||||
isExpand.value = '展开'
|
||||
}
|
||||
if (val.includes('2')) {
|
||||
menuTree.value.setCheckedNodes(localData.menuData)
|
||||
isAllChose.value = '不全选'
|
||||
} else {
|
||||
menuTree.value.setCheckedNodes([])
|
||||
isAllChose.value = '全选'
|
||||
}
|
||||
}
|
||||
|
||||
const handleSubmit = async () => {
|
||||
const loading = ElLoading.service({fullscreen: true})
|
||||
const { isValidate } = await form.value.validate()
|
||||
if(!isValidate){
|
||||
loading.close()
|
||||
return Promise.reject()
|
||||
}
|
||||
const values = form.value.getValues()
|
||||
values.menuIds = checkChange()
|
||||
operate(values).then(res=>{
|
||||
ElNotification({
|
||||
title: route.query.isAdd ? '新增' : '编辑',
|
||||
message: res.msg,
|
||||
type: res.code === 1000 ? 'success' : 'error'
|
||||
})
|
||||
loading.close()
|
||||
res.code === 1000 ? tagsViewStore.delViewAndGoView('/system/role') : null
|
||||
}).finally(()=>{
|
||||
loading.close()
|
||||
})
|
||||
}
|
||||
|
||||
const handleBack = () => {
|
||||
history.back()
|
||||
}
|
||||
|
||||
watch(localData, (val)=>{
|
||||
menuTree.value.filter(val.filterText)
|
||||
})
|
||||
|
||||
onMounted( async ()=>{
|
||||
loading.value = true
|
||||
await init()
|
||||
if(route.query.id) {
|
||||
await getInfo()
|
||||
}
|
||||
loading.value = false
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.assign-menu-title {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
>div:first-child {
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
.menu-assign {
|
||||
width: 400px;
|
||||
max-height: 500px;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,307 +1,307 @@
|
||||
<template>
|
||||
<fvSearchForm :searchConfig="searchConfig" @search="search" style="margin-left: 16px"></fvSearchForm>
|
||||
<fvTable ref="tableIns" :tableConfig="tableConfig" @headBtnClick="headBtnClick"></fvTable>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import fvSelect from '@/fvcomponents/fvSelect/index.vue'
|
||||
import Tag from '@/components/Tag.vue'
|
||||
import { ElMessageBox, ElNotification } from 'element-plus';
|
||||
import { deleteRole } from "@/api/role/role";
|
||||
import { useAuthStore } from '@/stores/userstore.js'
|
||||
import {getSubCompOpt} from "@/api/user/user";
|
||||
|
||||
const authStore = useAuthStore()
|
||||
const router = useRouter()
|
||||
|
||||
const shortcuts = [
|
||||
{
|
||||
text: '上周',
|
||||
value: () => {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
|
||||
return [start, end]
|
||||
},
|
||||
},
|
||||
{
|
||||
text: '上月',
|
||||
value: () => {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
|
||||
return [start, end]
|
||||
},
|
||||
},
|
||||
{
|
||||
text: '三月前',
|
||||
value: () => {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
|
||||
return [start, end]
|
||||
},
|
||||
},
|
||||
]
|
||||
|
||||
const searchConfig = ref([
|
||||
{
|
||||
label: '公司名称',
|
||||
prop: 'subCompanyId',
|
||||
component: 'el-tree-select',
|
||||
props: {
|
||||
placeholder: '请选择公司名称',
|
||||
clearable: true,
|
||||
data: [],
|
||||
filterable: true,
|
||||
checkStrictly: true,
|
||||
remote: true
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '角色名称',
|
||||
prop: 'roleName',
|
||||
component: 'el-input',
|
||||
props: {
|
||||
placeholder: '请输入角色名称',
|
||||
clearable: true
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '权限字符',
|
||||
prop: 'roleKey',
|
||||
component: 'el-input',
|
||||
props: {
|
||||
placeholder: '请输入权限字符',
|
||||
clearable: true
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '状态',
|
||||
prop: 'state',
|
||||
component: shallowRef(fvSelect),
|
||||
props: {
|
||||
placeholder: '请选择状态',
|
||||
clearable: true,
|
||||
cacheKey: 'normal_disable',
|
||||
remote: true,
|
||||
filterable: true
|
||||
}
|
||||
},
|
||||
// {
|
||||
// label: '登录时间',
|
||||
// prop: 'dateValue',
|
||||
// component: 'el-date-picker',
|
||||
// props: {
|
||||
// placeholder: '请选择',
|
||||
// clearable: true,
|
||||
// type: 'datetimerange',
|
||||
// startPlaceholder: '开始日期',
|
||||
// endPlaceholder: '结束日期',
|
||||
// valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
||||
// shortcuts: shortcuts
|
||||
// }
|
||||
// },
|
||||
])
|
||||
|
||||
const tableIns = ref()
|
||||
|
||||
const auths = {
|
||||
edit: ['admin:role:edit'],
|
||||
del: ['admin:role:del'],
|
||||
add: ['admin:role:add'],
|
||||
}
|
||||
|
||||
const tableConfig = reactive({
|
||||
columns: [
|
||||
{
|
||||
prop: 'index',
|
||||
type: 'index',
|
||||
label: '序号',
|
||||
align: 'center',
|
||||
width:85,
|
||||
index: index => {
|
||||
return (tableIns.value.getQuery().pageNum - 1) * tableIns.value.getQuery().pageSize + index + 1
|
||||
}
|
||||
},
|
||||
{
|
||||
prop: 'roleName',
|
||||
label: '角色名称',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'roleKey',
|
||||
label: '角色权限',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'companyName',
|
||||
label: '公司名称',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'template',
|
||||
label: '是否为模版角色',
|
||||
align: 'center',
|
||||
width:150,
|
||||
showOverflowTooltip: false,
|
||||
currentRender: ({row, index}) => (<Tag dictType={'yes_no'} value={row.template ? '1' : '0'} />)
|
||||
},
|
||||
{
|
||||
prop: 'roleSort',
|
||||
label: '显示顺序',
|
||||
align: 'center',
|
||||
width:100,
|
||||
},
|
||||
{
|
||||
prop: 'state',
|
||||
label: '状态',
|
||||
showOverflowTooltip: false,
|
||||
align: 'center',
|
||||
width:100,
|
||||
currentRender: ({row, index}) => (<Tag dictType={'normal_disable'} value={row.state} />)
|
||||
},
|
||||
{
|
||||
prop: 'oper',
|
||||
label: '操作',
|
||||
align: 'center',
|
||||
fixed: 'right',
|
||||
width:150,
|
||||
showOverflowTooltip: false,
|
||||
currentRender: ({row, index}) => {
|
||||
let btn = [{label: '修改', auth: auths.edit, func: ()=>handleEdit(row) , type: 'primary'}]
|
||||
// btn.push(
|
||||
// {
|
||||
// label: '分配用户',
|
||||
// auth: auths.edit,
|
||||
// func: ()=>handleAssign(row),
|
||||
// type: 'primary'
|
||||
// }
|
||||
// )
|
||||
if(authStore.roles.includes('superAdmin')) {
|
||||
btn.push({label: '删除', auth: auths.del, func: ()=>handleDel(row) , type: 'danger'})
|
||||
} else if(!row.template) {
|
||||
btn.push({label: '删除', auth: auths.del, func: ()=>handleDel(row) , type: 'danger'})
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
{
|
||||
btn.map(item=>(
|
||||
<el-button
|
||||
type={item.type}
|
||||
v-perm={item.auth}
|
||||
onClick={()=>item.func()}
|
||||
link
|
||||
>
|
||||
{item.label}
|
||||
</el-button>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
)
|
||||
},
|
||||
}
|
||||
],
|
||||
api: '/admin/role',
|
||||
btns: [{name: '新增', key: 'add', auth: auths.add, color:"#DED0B2"}],
|
||||
params: {}
|
||||
})
|
||||
|
||||
const search = (val) => {
|
||||
let obj = {...val}
|
||||
if(obj.dateValue) {
|
||||
obj.startTime = obj.dateValue[0]
|
||||
obj.endTime = obj.dateValue[1]
|
||||
delete obj.dateValue
|
||||
}
|
||||
tableConfig.params = obj
|
||||
tableIns.value.refresh()
|
||||
}
|
||||
|
||||
|
||||
const handleAdd = () => {
|
||||
router.push({
|
||||
name: 'Roleadd',
|
||||
query: {
|
||||
isAdd: 1
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const handleEdit = (row) => {
|
||||
router.push({
|
||||
name: 'Roleedit',
|
||||
query: {
|
||||
id: row.roleId
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const handleAssign = (row) => {
|
||||
|
||||
}
|
||||
|
||||
const handleDel = (row) => {
|
||||
// if (!(row.template && authStore.roles.includes('superAdmin'))) {
|
||||
// ElNotification({
|
||||
// title: '提示',
|
||||
// message: '模版角色只能由超级管理员删除!',
|
||||
// type: 'warning'
|
||||
// })
|
||||
// return
|
||||
// }
|
||||
|
||||
ElMessageBox.confirm('确定删除该条数据吗?', '确定删除', {
|
||||
type: 'warning',
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消'
|
||||
}).then(async res => {
|
||||
const { code, msg } = await deleteRole(row.roleId)
|
||||
ElNotification({
|
||||
title: '删除',
|
||||
message: msg,
|
||||
type: code === 1000 ? 'success' : 'error'
|
||||
})
|
||||
tableIns.value.refresh()
|
||||
}).catch(()=>{})
|
||||
}
|
||||
|
||||
const headBtnClick = (key) => {
|
||||
switch(key) {
|
||||
case 'add': handleAdd()
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
const init = async () => {
|
||||
if(!authStore.roles.includes('superAdmin')) {
|
||||
searchConfig.value = searchConfig.value.slice(1)
|
||||
}
|
||||
searchConfig.value = searchConfig.value
|
||||
const res = await getSubCompOpt()
|
||||
searchConfig.value.find(item=>item.prop == 'subCompanyId').props.data = res.data
|
||||
}
|
||||
init()
|
||||
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
:deep(.el-table__header) {
|
||||
.is-leaf:first-child {
|
||||
.cell {
|
||||
margin-left: -25px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-table__body) {
|
||||
.el-table__cell:first-child {
|
||||
.cell {
|
||||
margin-left: -13px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.el-col-5:nth-child(4).el-col-offset-1){
|
||||
margin-left: 35px !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<fvSearchForm :searchConfig="searchConfig" @search="search" style="margin-left: 16px"></fvSearchForm>
|
||||
<fvTable ref="tableIns" :tableConfig="tableConfig" @headBtnClick="headBtnClick"></fvTable>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import fvSelect from '@/fvcomponents/fvSelect/index.vue'
|
||||
import Tag from '@/components/Tag.vue'
|
||||
import { ElMessageBox, ElNotification } from 'element-plus';
|
||||
import { deleteRole } from "@/api/role/role";
|
||||
import { useAuthStore } from '@/stores/userstore.js'
|
||||
import {getSubCompOpt} from "@/api/user/user";
|
||||
|
||||
const authStore = useAuthStore()
|
||||
const router = useRouter()
|
||||
|
||||
const shortcuts = [
|
||||
{
|
||||
text: '上周',
|
||||
value: () => {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
|
||||
return [start, end]
|
||||
},
|
||||
},
|
||||
{
|
||||
text: '上月',
|
||||
value: () => {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
|
||||
return [start, end]
|
||||
},
|
||||
},
|
||||
{
|
||||
text: '三月前',
|
||||
value: () => {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
|
||||
return [start, end]
|
||||
},
|
||||
},
|
||||
]
|
||||
|
||||
const searchConfig = ref([
|
||||
{
|
||||
label: '公司名称',
|
||||
prop: 'subCompanyId',
|
||||
component: 'el-tree-select',
|
||||
props: {
|
||||
placeholder: '请选择公司名称',
|
||||
clearable: true,
|
||||
data: [],
|
||||
filterable: true,
|
||||
checkStrictly: true,
|
||||
remote: true
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '角色名称',
|
||||
prop: 'roleName',
|
||||
component: 'el-input',
|
||||
props: {
|
||||
placeholder: '请输入角色名称',
|
||||
clearable: true
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '权限字符',
|
||||
prop: 'roleKey',
|
||||
component: 'el-input',
|
||||
props: {
|
||||
placeholder: '请输入权限字符',
|
||||
clearable: true
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '状态',
|
||||
prop: 'state',
|
||||
component: shallowRef(fvSelect),
|
||||
props: {
|
||||
placeholder: '请选择状态',
|
||||
clearable: true,
|
||||
cacheKey: 'normal_disable',
|
||||
remote: true,
|
||||
filterable: true
|
||||
}
|
||||
},
|
||||
// {
|
||||
// label: '登录时间',
|
||||
// prop: 'dateValue',
|
||||
// component: 'el-date-picker',
|
||||
// props: {
|
||||
// placeholder: '请选择',
|
||||
// clearable: true,
|
||||
// type: 'datetimerange',
|
||||
// startPlaceholder: '开始日期',
|
||||
// endPlaceholder: '结束日期',
|
||||
// valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
||||
// shortcuts: shortcuts
|
||||
// }
|
||||
// },
|
||||
])
|
||||
|
||||
const tableIns = ref()
|
||||
|
||||
const auths = {
|
||||
edit: ['admin:role:edit'],
|
||||
del: ['admin:role:del'],
|
||||
add: ['admin:role:add'],
|
||||
}
|
||||
|
||||
const tableConfig = reactive({
|
||||
columns: [
|
||||
{
|
||||
prop: 'index',
|
||||
type: 'index',
|
||||
label: '序号',
|
||||
align: 'center',
|
||||
width:85,
|
||||
index: index => {
|
||||
return (tableIns.value.getQuery().pageNum - 1) * tableIns.value.getQuery().pageSize + index + 1
|
||||
}
|
||||
},
|
||||
{
|
||||
prop: 'roleName',
|
||||
label: '角色名称',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'roleKey',
|
||||
label: '角色权限',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'companyName',
|
||||
label: '公司名称',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'template',
|
||||
label: '是否为模版角色',
|
||||
align: 'center',
|
||||
width:150,
|
||||
showOverflowTooltip: false,
|
||||
currentRender: ({row, index}) => (<Tag dictType={'yes_no'} value={row.template ? '1' : '0'} />)
|
||||
},
|
||||
{
|
||||
prop: 'roleSort',
|
||||
label: '显示顺序',
|
||||
align: 'center',
|
||||
width:100,
|
||||
},
|
||||
{
|
||||
prop: 'state',
|
||||
label: '状态',
|
||||
showOverflowTooltip: false,
|
||||
align: 'center',
|
||||
width:100,
|
||||
currentRender: ({row, index}) => (<Tag dictType={'normal_disable'} value={row.state} />)
|
||||
},
|
||||
{
|
||||
prop: 'oper',
|
||||
label: '操作',
|
||||
align: 'center',
|
||||
fixed: 'right',
|
||||
width:150,
|
||||
showOverflowTooltip: false,
|
||||
currentRender: ({row, index}) => {
|
||||
let btn = [{label: '修改', auth: auths.edit, func: ()=>handleEdit(row) , type: 'primary'}]
|
||||
// btn.push(
|
||||
// {
|
||||
// label: '分配用户',
|
||||
// auth: auths.edit,
|
||||
// func: ()=>handleAssign(row),
|
||||
// type: 'primary'
|
||||
// }
|
||||
// )
|
||||
if(authStore.roles.includes('superAdmin')) {
|
||||
btn.push({label: '删除', auth: auths.del, func: ()=>handleDel(row) , type: 'danger'})
|
||||
} else if(!row.template) {
|
||||
btn.push({label: '删除', auth: auths.del, func: ()=>handleDel(row) , type: 'danger'})
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
{
|
||||
btn.map(item=>(
|
||||
<el-button
|
||||
type={item.type}
|
||||
v-perm={item.auth}
|
||||
onClick={()=>item.func()}
|
||||
link
|
||||
>
|
||||
{item.label}
|
||||
</el-button>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
)
|
||||
},
|
||||
}
|
||||
],
|
||||
api: '/admin/role',
|
||||
btns: [{name: '新增', key: 'add', auth: auths.add, color:"#DED0B2"}],
|
||||
params: {}
|
||||
})
|
||||
|
||||
const search = (val) => {
|
||||
let obj = {...val}
|
||||
if(obj.dateValue) {
|
||||
obj.startTime = obj.dateValue[0]
|
||||
obj.endTime = obj.dateValue[1]
|
||||
delete obj.dateValue
|
||||
}
|
||||
tableConfig.params = obj
|
||||
tableIns.value.refresh()
|
||||
}
|
||||
|
||||
|
||||
const handleAdd = () => {
|
||||
router.push({
|
||||
name: 'Roleadd',
|
||||
query: {
|
||||
isAdd: 1
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const handleEdit = (row) => {
|
||||
router.push({
|
||||
name: 'Roleedit',
|
||||
query: {
|
||||
id: row.roleId
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const handleAssign = (row) => {
|
||||
|
||||
}
|
||||
|
||||
const handleDel = (row) => {
|
||||
// if (!(row.template && authStore.roles.includes('superAdmin'))) {
|
||||
// ElNotification({
|
||||
// title: '提示',
|
||||
// message: '模版角色只能由超级管理员删除!',
|
||||
// type: 'warning'
|
||||
// })
|
||||
// return
|
||||
// }
|
||||
|
||||
ElMessageBox.confirm('确定删除该条数据吗?', '确定删除', {
|
||||
type: 'warning',
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消'
|
||||
}).then(async res => {
|
||||
const { code, msg } = await deleteRole(row.roleId)
|
||||
ElNotification({
|
||||
title: '删除',
|
||||
message: msg,
|
||||
type: code === 1000 ? 'success' : 'error'
|
||||
})
|
||||
tableIns.value.refresh()
|
||||
}).catch(()=>{})
|
||||
}
|
||||
|
||||
const headBtnClick = (key) => {
|
||||
switch(key) {
|
||||
case 'add': handleAdd()
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
const init = async () => {
|
||||
if(!authStore.roles.includes('superAdmin')) {
|
||||
searchConfig.value = searchConfig.value.slice(1)
|
||||
}
|
||||
searchConfig.value = searchConfig.value
|
||||
const res = await getSubCompOpt()
|
||||
searchConfig.value.find(item=>item.prop == 'subCompanyId').props.data = res.data
|
||||
}
|
||||
init()
|
||||
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
:deep(.el-table__header) {
|
||||
.is-leaf:first-child {
|
||||
.cell {
|
||||
margin-left: -25px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-table__body) {
|
||||
.el-table__cell:first-child {
|
||||
.cell {
|
||||
margin-left: -13px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.el-col-5:nth-child(4).el-col-offset-1){
|
||||
margin-left: 35px !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@@ -1,88 +1,88 @@
|
||||
<template>
|
||||
<el-form :model="queryParams" inline class="query-form" ref="queryInstance">
|
||||
<el-form-item label="子公司编码" prop="companyCode">
|
||||
<el-input v-model="queryParams.companyCode" placeholder="请输入子公司编码" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="子公司全称" prop="companyDesc">
|
||||
<el-input v-model="queryParams.companyDesc" placeholder="请输入子公司全称" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="子公司简称" prop="companyName">
|
||||
<el-input v-model="queryParams.companyName" placeholder="请输入子公司简称" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button color="#DED0B2" @click="getList" :icon="Search">搜索</el-button>
|
||||
<el-button @click="handleReset(queryInstance)" :icon="Refresh">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="table-header-btn">
|
||||
<el-button color="#DED0B2" @click="handleExpand" :icon="Sort">{{ isExpand ? '全部收起' : '全部展开' }}</el-button>
|
||||
</div>
|
||||
<el-table
|
||||
:data="list"
|
||||
ref="tableTree"
|
||||
:default-expand-all="isExpand"
|
||||
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
||||
row-key="subCompanyId"
|
||||
:lazy="true"
|
||||
v-loading="loading"
|
||||
@expand-change="expandChange"
|
||||
@cell-click="cellClick"
|
||||
v-tabh
|
||||
>
|
||||
<el-table-column prop="companyDesc" label="子公司全称"/>
|
||||
<el-table-column prop="companyCode" label="子公司编码"/>
|
||||
<el-table-column prop="companyName" label=" 子公司简称"/>
|
||||
<el-table-column prop="createTime" label="创建时间"/>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {Search, Refresh,Sort} from "@element-plus/icons-vue";
|
||||
import {getSubCompanyList} from "@/api/subsidiary";
|
||||
const queryInstance = ref()
|
||||
const queryParams = reactive({
|
||||
companyCode: '',
|
||||
companyDesc: '',
|
||||
companyName: ''
|
||||
})
|
||||
const loading = ref(true)
|
||||
const list = ref([])
|
||||
const tableTree = ref()
|
||||
const isExpand = ref(true)
|
||||
const cellClick = (row,column) => {
|
||||
if ("operation" !== column.property){
|
||||
tableTree.value.toggleRowExpansion(row)
|
||||
}
|
||||
}
|
||||
const handleExpand = () => {
|
||||
isExpand.value = !isExpand.value
|
||||
expandChange(list.value, isExpand)
|
||||
getList()
|
||||
}
|
||||
//展开收缩封装函数
|
||||
const expandChange = (data, isExpansion) => {
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
tableTree.value.toggleRowExpansion(data[i], isExpansion);
|
||||
if (data[i].children !== null) {
|
||||
expandChange(data[i].children, isExpansion);
|
||||
}
|
||||
}
|
||||
}
|
||||
const handleReset = (instance) => {
|
||||
if (!instance) return
|
||||
instance.resetFields()
|
||||
getList()
|
||||
}
|
||||
const getList = () => {
|
||||
loading.value = true
|
||||
getSubCompanyList(queryParams).then(res => {
|
||||
list.value = res.data
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
getList()
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
<template>
|
||||
<el-form :model="queryParams" inline class="query-form" ref="queryInstance">
|
||||
<el-form-item label="子公司编码" prop="companyCode">
|
||||
<el-input v-model="queryParams.companyCode" placeholder="请输入子公司编码" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="子公司全称" prop="companyDesc">
|
||||
<el-input v-model="queryParams.companyDesc" placeholder="请输入子公司全称" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="子公司简称" prop="companyName">
|
||||
<el-input v-model="queryParams.companyName" placeholder="请输入子公司简称" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button color="#DED0B2" @click="getList" :icon="Search">搜索</el-button>
|
||||
<el-button @click="handleReset(queryInstance)" :icon="Refresh">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="table-header-btn">
|
||||
<el-button color="#DED0B2" @click="handleExpand" :icon="Sort">{{ isExpand ? '全部收起' : '全部展开' }}</el-button>
|
||||
</div>
|
||||
<el-table
|
||||
:data="list"
|
||||
ref="tableTree"
|
||||
:default-expand-all="isExpand"
|
||||
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
||||
row-key="subCompanyId"
|
||||
:lazy="true"
|
||||
v-loading="loading"
|
||||
@expand-change="expandChange"
|
||||
@cell-click="cellClick"
|
||||
v-tabh
|
||||
>
|
||||
<el-table-column prop="companyDesc" label="子公司全称"/>
|
||||
<el-table-column prop="companyCode" label="子公司编码"/>
|
||||
<el-table-column prop="companyName" label=" 子公司简称"/>
|
||||
<el-table-column prop="createTime" label="创建时间"/>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {Search, Refresh,Sort} from "@element-plus/icons-vue";
|
||||
import {getSubCompanyList} from "@/api/subsidiary";
|
||||
const queryInstance = ref()
|
||||
const queryParams = reactive({
|
||||
companyCode: '',
|
||||
companyDesc: '',
|
||||
companyName: ''
|
||||
})
|
||||
const loading = ref(true)
|
||||
const list = ref([])
|
||||
const tableTree = ref()
|
||||
const isExpand = ref(true)
|
||||
const cellClick = (row,column) => {
|
||||
if ("operation" !== column.property){
|
||||
tableTree.value.toggleRowExpansion(row)
|
||||
}
|
||||
}
|
||||
const handleExpand = () => {
|
||||
isExpand.value = !isExpand.value
|
||||
expandChange(list.value, isExpand)
|
||||
getList()
|
||||
}
|
||||
//展开收缩封装函数
|
||||
const expandChange = (data, isExpansion) => {
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
tableTree.value.toggleRowExpansion(data[i], isExpansion);
|
||||
if (data[i].children !== null) {
|
||||
expandChange(data[i].children, isExpansion);
|
||||
}
|
||||
}
|
||||
}
|
||||
const handleReset = (instance) => {
|
||||
if (!instance) return
|
||||
instance.resetFields()
|
||||
getList()
|
||||
}
|
||||
const getList = () => {
|
||||
loading.value = true
|
||||
getSubCompanyList(queryParams).then(res => {
|
||||
list.value = res.data
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
getList()
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
||||
@@ -1,308 +1,308 @@
|
||||
<template>
|
||||
<div v-loading="loading">
|
||||
<baseTitle :title="'用户信息录入'"></baseTitle>
|
||||
<fvForm :schema="schame" @getInstance="getInstance" :rules="rules"></fvForm>
|
||||
<div class="oper-page-btn">
|
||||
<el-button color="#DED0B2" @click="handleSubmit">提交</el-button>
|
||||
<el-button @click="handleBack">返回</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import {ElLoading, ElMessageBox, ElNotification} from 'element-plus';
|
||||
import {useTagsView} from '@/stores/tagsview.js'
|
||||
import {useAuthStore} from '@/stores/userstore.js'
|
||||
import {useCacheStore} from "@/stores/cache.js";
|
||||
import {
|
||||
getDeptOpt,
|
||||
getSubCompOpt,
|
||||
getRolesOpt,
|
||||
getJobOpt,
|
||||
getUserDetail,
|
||||
operate,
|
||||
judgeIsSameRole
|
||||
} from '@/api/user/user.js'
|
||||
|
||||
const tagsViewStore = useTagsView()
|
||||
const authStore = useAuthStore()
|
||||
const cacheStore = useCacheStore();
|
||||
const route = useRoute()
|
||||
const form = ref(null)
|
||||
const currentRoleArray = ref([])
|
||||
const loading = ref(false)
|
||||
const localData = reactive({
|
||||
subCompanyIdOpt: [],
|
||||
departmentIdOpt: [],
|
||||
roleOpt: [],
|
||||
jobOpt: []
|
||||
})
|
||||
const openChangeRoleDialog = (selectRoleId, data) => {
|
||||
ElMessageBox.confirm(`${getRoleName(selectRoleId)} 角色存在对应人员：${data[selectRoleId][0].nickName}，您确定要替换为 ${form.value.getValues().nickName}?`, "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(async () => {
|
||||
|
||||
}).catch((action) => {
|
||||
if (action == 'cancel') {
|
||||
form.value.getValues().roleIds = form.value.getValues().roleIds.filter(roleItem => roleItem != selectRoleId);
|
||||
}
|
||||
})
|
||||
}
|
||||
const schame = computed(() => {
|
||||
let arr = [
|
||||
{
|
||||
label: '公司',
|
||||
prop: 'subCompanyId',
|
||||
component: 'el-tree-select',
|
||||
props: {
|
||||
placeholder: '请输入',
|
||||
clearable: true,
|
||||
filterable: true,
|
||||
checkStrictly: true,
|
||||
data: localData.subCompanyIdOpt,
|
||||
disabled: route.query.userType == 0 ? true : false
|
||||
},
|
||||
on: {
|
||||
change: async (val) => {
|
||||
const {data} = await getDeptOpt({subCompanyId: val})
|
||||
localData.departmentIdOpt = data
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '归属部门',
|
||||
prop: 'departmentId',
|
||||
component: 'el-tree-select',
|
||||
props: {
|
||||
placeholder: '请选择',
|
||||
clearable: true,
|
||||
data: localData.departmentIdOpt,
|
||||
filterable: true,
|
||||
checkStrictly: true,
|
||||
disabled: route.query.userType == 0 ? true : false
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '用户账号',
|
||||
prop: 'userName',
|
||||
component: 'el-input',
|
||||
props: {
|
||||
placeholder: '请输入',
|
||||
disabled: route.query.userType == 0 ? true : false
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '用户昵称',
|
||||
prop: 'nickName',
|
||||
component: 'el-input',
|
||||
props: {
|
||||
placeholder: '请输入',
|
||||
disabled: route.query.userType == 0 ? true : false
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '用户密码',
|
||||
prop: 'password',
|
||||
component: 'el-input',
|
||||
props: {
|
||||
placeholder: '请输入',
|
||||
type: 'password',
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '岗位',
|
||||
prop: 'jobId',
|
||||
component: 'el-tree-select',
|
||||
props: {
|
||||
placeholder: '请选择',
|
||||
filterable: true,
|
||||
checkStrictly: true,
|
||||
data: localData.jobOpt,
|
||||
disabled: route.query.userType == 0 ? true : false
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '角色',
|
||||
prop: 'roleIds',
|
||||
component: 'el-tree-select',
|
||||
props: {
|
||||
placeholder: '请选择',
|
||||
multiple: true,
|
||||
data: localData.roleOpt
|
||||
},
|
||||
on: {
|
||||
change: async (val) => {
|
||||
const {code, data} = await judgeIsSameRole(form.value.getValues().userId)
|
||||
if (code === 1000) {
|
||||
// console.log('currentRoleArray.value', currentRoleArray.value)
|
||||
// console.log('data,val', data, val)
|
||||
let selectRoleLast = val[val?.length - 1]
|
||||
if (currentRoleArray.value.length !== 0) {//当前用户存在角色
|
||||
currentRoleArray.value?.forEach(currentItem => {
|
||||
console.log('currentItem', currentItem, data[currentItem], form.value.getValues().userId)
|
||||
//当前用户已经选择科创部对接人/财务对接人时移除角色不出现替换弹窗
|
||||
if (currentItem && data[currentItem] && data[currentItem].length > 0 && data[currentItem][0].userId == form.value.getValues().userId) {
|
||||
console.log('已选择对接人')
|
||||
//选择两个对接人
|
||||
if (data[selectRoleLast]?.length > 0 && data[selectRoleLast][0].userId !== form.value.getValues().userId) {
|
||||
console.log('选择两个对接人')
|
||||
openChangeRoleDialog(selectRoleLast, data)
|
||||
}
|
||||
} else {
|
||||
//当前用户未选择对接人
|
||||
if (data[selectRoleLast]?.length > 0) {
|
||||
openChangeRoleDialog(selectRoleLast, data)
|
||||
}
|
||||
}
|
||||
})
|
||||
} else {//当前用户未分配角色
|
||||
if (data[selectRoleLast]?.length > 0) {
|
||||
openChangeRoleDialog(selectRoleLast, data)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '性别',
|
||||
prop: 'sex',
|
||||
component: 'el-tree-select',
|
||||
props: {
|
||||
placeholder: '请选择',
|
||||
data: cacheStore.getDict('user_sex'),
|
||||
disabled: route.query.userType == 0 ? true : false
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '帐号状态',
|
||||
prop: 'state',
|
||||
component: 'el-tree-select',
|
||||
props: {
|
||||
placeholder: '请选择',
|
||||
data: cacheStore.getDict('normal_disable'),
|
||||
disabled: route.query.userType == 0 ? true : false
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '手机号码',
|
||||
prop: 'mobile',
|
||||
component: 'el-input',
|
||||
props: {
|
||||
placeholder: '请输入',
|
||||
disabled: route.query.userType == 0 ? true : false
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '邮箱',
|
||||
prop: 'email',
|
||||
component: 'el-input',
|
||||
props: {
|
||||
placeholder: '请输入',
|
||||
disabled: route.query.userType == 0 ? true : false
|
||||
}
|
||||
},
|
||||
]
|
||||
let editArr = []
|
||||
if (!route.query.isAdd) {
|
||||
arr.forEach(item => {
|
||||
if (item.prop != 'password') {
|
||||
editArr.push(item)
|
||||
}
|
||||
})
|
||||
return !authStore.roles.includes('superAdmin') ? editArr.slice(1) : editArr
|
||||
}
|
||||
return !authStore.roles.includes('superAdmin') ? arr.slice(1) : arr
|
||||
})
|
||||
|
||||
const rules = reactive({
|
||||
userName: [{required: true, message: '请输入', trigger: 'change'}],
|
||||
nickName: [{required: true, message: '请输入', trigger: 'change'}],
|
||||
password: [{required: true, message: '请输入', trigger: 'change'}],
|
||||
departmentId: [{required: true, message: '请选择', trigger: 'change'}],
|
||||
subCompanyId: [{required: true, message: '请选择', trigger: 'change'}],
|
||||
jobId: [{required: true, message: '请选择', trigger: 'change'}],
|
||||
roleIds: [{required: true, message: '请选择', trigger: 'change'}],
|
||||
sex: [{required: true, message: '请选择', trigger: 'change'}],
|
||||
state: [{required: true, message: '请选择', trigger: 'change'}],
|
||||
})
|
||||
const getRoleName = (roleId) => {
|
||||
console.log('roleId', roleId, localData.roleOpt, localData.roleOpt.filter(item => item.value == roleId))
|
||||
return localData.roleOpt.filter(item => item.value == roleId)[0].label
|
||||
}
|
||||
const getInstance = (e) => {
|
||||
form.value = e
|
||||
}
|
||||
|
||||
const init = async () => {
|
||||
const reqList = [
|
||||
getDeptOpt(),
|
||||
getSubCompOpt(),
|
||||
getRolesOpt(),
|
||||
getJobOpt()
|
||||
]
|
||||
const resAll = await Promise.all(reqList)
|
||||
localData.departmentIdOpt = resAll[0].data
|
||||
localData.subCompanyIdOpt = resAll[1].data
|
||||
localData.roleOpt = resAll[2].data
|
||||
localData.jobOpt = resAll[3].data
|
||||
}
|
||||
|
||||
const getInfo = async () => {
|
||||
if (!route.query.id) return
|
||||
// 获取详情数据
|
||||
const {data} = await getUserDetail(route.query.id)
|
||||
if (data.subCompanyId) {
|
||||
const res = await getDeptOpt({subCompanyId: data.subCompanyId})
|
||||
localData.departmentIdOpt = res.data
|
||||
}
|
||||
nextTick(() => {
|
||||
form.value.setValues(data)
|
||||
currentRoleArray.value = form.value.getValues().roleIds
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
const handleSubmit = async () => {
|
||||
const loading = ElLoading.service({fullscreen: true})
|
||||
const {isValidate} = await form.value.validate()
|
||||
if (!isValidate) {
|
||||
loading.close()
|
||||
return Promise.reject()
|
||||
}
|
||||
const values = form.value.getValues()
|
||||
operate(values, route.query.userType).then(res => {
|
||||
ElNotification({
|
||||
title: route.query.isAdd ? '新增' : '编辑',
|
||||
message: res.msg,
|
||||
type: res.code === 1000 ? 'success' : 'error'
|
||||
})
|
||||
loading.close()
|
||||
res.code === 1000 ? tagsViewStore.delViewAndGoView('/system/user') : null
|
||||
}).catch(() => {
|
||||
loading.close()
|
||||
}).finally(() => {
|
||||
loading.close()
|
||||
})
|
||||
}
|
||||
|
||||
const handleBack = () => {
|
||||
history.back()
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
loading.value = true
|
||||
await init()
|
||||
if (!route.query.isAdd) {
|
||||
await getInfo()
|
||||
}
|
||||
loading.value = false
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
<template>
|
||||
<div v-loading="loading">
|
||||
<baseTitle :title="'用户信息录入'"></baseTitle>
|
||||
<fvForm :schema="schame" @getInstance="getInstance" :rules="rules"></fvForm>
|
||||
<div class="oper-page-btn">
|
||||
<el-button color="#DED0B2" @click="handleSubmit">提交</el-button>
|
||||
<el-button @click="handleBack">返回</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import {ElLoading, ElMessageBox, ElNotification} from 'element-plus';
|
||||
import {useTagsView} from '@/stores/tagsview.js'
|
||||
import {useAuthStore} from '@/stores/userstore.js'
|
||||
import {useCacheStore} from "@/stores/cache.js";
|
||||
import {
|
||||
getDeptOpt,
|
||||
getSubCompOpt,
|
||||
getRolesOpt,
|
||||
getJobOpt,
|
||||
getUserDetail,
|
||||
operate,
|
||||
judgeIsSameRole
|
||||
} from '@/api/user/user.js'
|
||||
|
||||
const tagsViewStore = useTagsView()
|
||||
const authStore = useAuthStore()
|
||||
const cacheStore = useCacheStore();
|
||||
const route = useRoute()
|
||||
const form = ref(null)
|
||||
const currentRoleArray = ref([])
|
||||
const loading = ref(false)
|
||||
const localData = reactive({
|
||||
subCompanyIdOpt: [],
|
||||
departmentIdOpt: [],
|
||||
roleOpt: [],
|
||||
jobOpt: []
|
||||
})
|
||||
const openChangeRoleDialog = (selectRoleId, data) => {
|
||||
ElMessageBox.confirm(`${getRoleName(selectRoleId)} 角色存在对应人员：${data[selectRoleId][0].nickName}，您确定要替换为 ${form.value.getValues().nickName}?`, "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(async () => {
|
||||
|
||||
}).catch((action) => {
|
||||
if (action == 'cancel') {
|
||||
form.value.getValues().roleIds = form.value.getValues().roleIds.filter(roleItem => roleItem != selectRoleId);
|
||||
}
|
||||
})
|
||||
}
|
||||
const schame = computed(() => {
|
||||
let arr = [
|
||||
{
|
||||
label: '公司',
|
||||
prop: 'subCompanyId',
|
||||
component: 'el-tree-select',
|
||||
props: {
|
||||
placeholder: '请输入',
|
||||
clearable: true,
|
||||
filterable: true,
|
||||
checkStrictly: true,
|
||||
data: localData.subCompanyIdOpt,
|
||||
disabled: route.query.userType == 0 ? true : false
|
||||
},
|
||||
on: {
|
||||
change: async (val) => {
|
||||
const {data} = await getDeptOpt({subCompanyId: val})
|
||||
localData.departmentIdOpt = data
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '归属部门',
|
||||
prop: 'departmentId',
|
||||
component: 'el-tree-select',
|
||||
props: {
|
||||
placeholder: '请选择',
|
||||
clearable: true,
|
||||
data: localData.departmentIdOpt,
|
||||
filterable: true,
|
||||
checkStrictly: true,
|
||||
disabled: route.query.userType == 0 ? true : false
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '用户账号',
|
||||
prop: 'userName',
|
||||
component: 'el-input',
|
||||
props: {
|
||||
placeholder: '请输入',
|
||||
disabled: route.query.userType == 0 ? true : false
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '用户昵称',
|
||||
prop: 'nickName',
|
||||
component: 'el-input',
|
||||
props: {
|
||||
placeholder: '请输入',
|
||||
disabled: route.query.userType == 0 ? true : false
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '用户密码',
|
||||
prop: 'password',
|
||||
component: 'el-input',
|
||||
props: {
|
||||
placeholder: '请输入',
|
||||
type: 'password',
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '岗位',
|
||||
prop: 'jobId',
|
||||
component: 'el-tree-select',
|
||||
props: {
|
||||
placeholder: '请选择',
|
||||
filterable: true,
|
||||
checkStrictly: true,
|
||||
data: localData.jobOpt,
|
||||
disabled: route.query.userType == 0 ? true : false
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '角色',
|
||||
prop: 'roleIds',
|
||||
component: 'el-tree-select',
|
||||
props: {
|
||||
placeholder: '请选择',
|
||||
multiple: true,
|
||||
data: localData.roleOpt
|
||||
},
|
||||
on: {
|
||||
change: async (val) => {
|
||||
const {code, data} = await judgeIsSameRole(form.value.getValues().userId)
|
||||
if (code === 1000) {
|
||||
// console.log('currentRoleArray.value', currentRoleArray.value)
|
||||
// console.log('data,val', data, val)
|
||||
let selectRoleLast = val[val?.length - 1]
|
||||
if (currentRoleArray.value.length !== 0) {//当前用户存在角色
|
||||
currentRoleArray.value?.forEach(currentItem => {
|
||||
console.log('currentItem', currentItem, data[currentItem], form.value.getValues().userId)
|
||||
//当前用户已经选择科创部对接人/财务对接人时移除角色不出现替换弹窗
|
||||
if (currentItem && data[currentItem] && data[currentItem].length > 0 && data[currentItem][0].userId == form.value.getValues().userId) {
|
||||
console.log('已选择对接人')
|
||||
//选择两个对接人
|
||||
if (data[selectRoleLast]?.length > 0 && data[selectRoleLast][0].userId !== form.value.getValues().userId) {
|
||||
console.log('选择两个对接人')
|
||||
openChangeRoleDialog(selectRoleLast, data)
|
||||
}
|
||||
} else {
|
||||
//当前用户未选择对接人
|
||||
if (data[selectRoleLast]?.length > 0) {
|
||||
openChangeRoleDialog(selectRoleLast, data)
|
||||
}
|
||||
}
|
||||
})
|
||||
} else {//当前用户未分配角色
|
||||
if (data[selectRoleLast]?.length > 0) {
|
||||
openChangeRoleDialog(selectRoleLast, data)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '性别',
|
||||
prop: 'sex',
|
||||
component: 'el-tree-select',
|
||||
props: {
|
||||
placeholder: '请选择',
|
||||
data: cacheStore.getDict('user_sex'),
|
||||
disabled: route.query.userType == 0 ? true : false
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '帐号状态',
|
||||
prop: 'state',
|
||||
component: 'el-tree-select',
|
||||
props: {
|
||||
placeholder: '请选择',
|
||||
data: cacheStore.getDict('normal_disable'),
|
||||
disabled: route.query.userType == 0 ? true : false
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '手机号码',
|
||||
prop: 'mobile',
|
||||
component: 'el-input',
|
||||
props: {
|
||||
placeholder: '请输入',
|
||||
disabled: route.query.userType == 0 ? true : false
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '邮箱',
|
||||
prop: 'email',
|
||||
component: 'el-input',
|
||||
props: {
|
||||
placeholder: '请输入',
|
||||
disabled: route.query.userType == 0 ? true : false
|
||||
}
|
||||
},
|
||||
]
|
||||
let editArr = []
|
||||
if (!route.query.isAdd) {
|
||||
arr.forEach(item => {
|
||||
if (item.prop != 'password') {
|
||||
editArr.push(item)
|
||||
}
|
||||
})
|
||||
return !authStore.roles.includes('superAdmin') ? editArr.slice(1) : editArr
|
||||
}
|
||||
return !authStore.roles.includes('superAdmin') ? arr.slice(1) : arr
|
||||
})
|
||||
|
||||
const rules = reactive({
|
||||
userName: [{required: true, message: '请输入', trigger: 'change'}],
|
||||
nickName: [{required: true, message: '请输入', trigger: 'change'}],
|
||||
password: [{required: true, message: '请输入', trigger: 'change'}],
|
||||
departmentId: [{required: true, message: '请选择', trigger: 'change'}],
|
||||
subCompanyId: [{required: true, message: '请选择', trigger: 'change'}],
|
||||
jobId: [{required: true, message: '请选择', trigger: 'change'}],
|
||||
roleIds: [{required: true, message: '请选择', trigger: 'change'}],
|
||||
sex: [{required: true, message: '请选择', trigger: 'change'}],
|
||||
state: [{required: true, message: '请选择', trigger: 'change'}],
|
||||
})
|
||||
const getRoleName = (roleId) => {
|
||||
console.log('roleId', roleId, localData.roleOpt, localData.roleOpt.filter(item => item.value == roleId))
|
||||
return localData.roleOpt.filter(item => item.value == roleId)[0].label
|
||||
}
|
||||
const getInstance = (e) => {
|
||||
form.value = e
|
||||
}
|
||||
|
||||
const init = async () => {
|
||||
const reqList = [
|
||||
getDeptOpt(),
|
||||
getSubCompOpt(),
|
||||
getRolesOpt(),
|
||||
getJobOpt()
|
||||
]
|
||||
const resAll = await Promise.all(reqList)
|
||||
localData.departmentIdOpt = resAll[0].data
|
||||
localData.subCompanyIdOpt = resAll[1].data
|
||||
localData.roleOpt = resAll[2].data
|
||||
localData.jobOpt = resAll[3].data
|
||||
}
|
||||
|
||||
const getInfo = async () => {
|
||||
if (!route.query.id) return
|
||||
// 获取详情数据
|
||||
const {data} = await getUserDetail(route.query.id)
|
||||
if (data.subCompanyId) {
|
||||
const res = await getDeptOpt({subCompanyId: data.subCompanyId})
|
||||
localData.departmentIdOpt = res.data
|
||||
}
|
||||
nextTick(() => {
|
||||
form.value.setValues(data)
|
||||
currentRoleArray.value = form.value.getValues().roleIds
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
const handleSubmit = async () => {
|
||||
const loading = ElLoading.service({fullscreen: true})
|
||||
const {isValidate} = await form.value.validate()
|
||||
if (!isValidate) {
|
||||
loading.close()
|
||||
return Promise.reject()
|
||||
}
|
||||
const values = form.value.getValues()
|
||||
operate(values, route.query.userType).then(res => {
|
||||
ElNotification({
|
||||
title: route.query.isAdd ? '新增' : '编辑',
|
||||
message: res.msg,
|
||||
type: res.code === 1000 ? 'success' : 'error'
|
||||
})
|
||||
loading.close()
|
||||
res.code === 1000 ? tagsViewStore.delViewAndGoView('/system/user') : null
|
||||
}).catch(() => {
|
||||
loading.close()
|
||||
}).finally(() => {
|
||||
loading.close()
|
||||
})
|
||||
}
|
||||
|
||||
const handleBack = () => {
|
||||
history.back()
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
loading.value = true
|
||||
await init()
|
||||
if (!route.query.isAdd) {
|
||||
await getInfo()
|
||||
}
|
||||
loading.value = false
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
|
||||
@@ -1,149 +1,149 @@
|
||||
<template>
|
||||
<div style="padding: 0 30px">
|
||||
<baseTitle title="设置代理"></baseTitle>
|
||||
<el-form ref="userForm" :model="agentInfoForm" label-width="85px">
|
||||
<el-row gutter="30">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="被代理人" prop="nickName">
|
||||
<span>{{ agentInfoForm.nickName }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="代理人" prop="" required>
|
||||
<el-button style="margin-right: 10px" color="#DED0B2" @click="handleShowAgentDialog">
|
||||
{{ agentUserList?.length !== 0 ? '更改' : '请选择' }}
|
||||
</el-button>
|
||||
<div v-for="item in agentUserList" :key="item.id" style="margin-right: 5px">
|
||||
{{ item.name }}
|
||||
</div>
|
||||
<user-picker :multiple="false" ref="agentSettingUserPickerRef" title="请选择代理人"
|
||||
v-model:value="agentUserList" @ok="agentUserPickerOk"
|
||||
@cancelOrClear="agentUserPickerOk"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="代理状态" prop="agentState">
|
||||
<Tag dictType="agent_state" :value="agentInfoForm.agentState"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="开始时间" prop="agentStartTime">
|
||||
<el-config-provider>
|
||||
<el-date-picker
|
||||
v-model="agentInfoForm.agentStartTime"
|
||||
type="datetime"
|
||||
placeholder="请选择开始时间"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
/>
|
||||
</el-config-provider>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="结束时间" prop="agentEndTime" :title="!agentInfoForm.agentStartTime?'请先选择开始时间!':''">
|
||||
<el-config-provider>
|
||||
<el-date-picker
|
||||
v-model="agentInfoForm.agentEndTime"
|
||||
type="datetime"
|
||||
placeholder="请选择结束时间"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
:disabled="!agentInfoForm.agentStartTime"
|
||||
:disabled-date="disabledAgentEndTime"
|
||||
/>
|
||||
</el-config-provider>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-form-item>
|
||||
<el-button color="#DED0B2" @click="handleSubmitAgent" style="margin-left: 16px">提交</el-button>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {ElNotification} from "element-plus";
|
||||
import UserPicker from "@/views/workflow/process/common/UserPicker.vue";
|
||||
|
||||
import {editAgentInfo, getAgentInfo} from "@/api/user/user";
|
||||
|
||||
const agentUserList = ref([])
|
||||
const agentInfoForm = ref({});
|
||||
const agentSettingUserPickerRef = ref()
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
localStorage.removeItem('originallySelectedList')
|
||||
const userId = ref(route.query.userId)
|
||||
|
||||
const getUserAgentInfo = async () => {
|
||||
await getAgentInfo(userId.value).then(res => {
|
||||
if (res.code === 1000) {
|
||||
agentInfoForm.value = res.data
|
||||
if(res.data.agentUserId) {
|
||||
agentUserList.value = [
|
||||
{
|
||||
id: res.data.agentUserId,
|
||||
name: res.data.agentNickName,
|
||||
companyName: res.data.agentCompanyName,
|
||||
}
|
||||
]
|
||||
}
|
||||
} else {
|
||||
ElNotification({
|
||||
title: '提示',
|
||||
message: res.msg,
|
||||
type: 'error'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
const disabledAgentEndTime = (time) => {
|
||||
return time.getTime() <= new Date(agentInfoForm.value.agentStartTime) - 1 * 24 * 3600 * 1000
|
||||
}
|
||||
|
||||
const handleShowAgentDialog = () => {
|
||||
agentSettingUserPickerRef.value.showUserPicker()
|
||||
}
|
||||
|
||||
const agentUserPickerOk = (userList) => {
|
||||
agentUserList.value = userList
|
||||
}
|
||||
|
||||
const handleSubmitAgent = () => {
|
||||
let agentUserId = ''
|
||||
if (agentUserList.value && agentUserList.value.length > 0) {
|
||||
agentUserId = agentUserList.value[0]?.id
|
||||
} else {
|
||||
ElNotification({
|
||||
title: '提示',
|
||||
message: '请选择代理人!',
|
||||
type: 'error'
|
||||
})
|
||||
return;
|
||||
}
|
||||
let agentParams = {
|
||||
userId: userId.value,
|
||||
agentUserId: agentUserId,
|
||||
agentStartTime: agentInfoForm.value.agentStartTime,
|
||||
agentEndTime: agentInfoForm.value.agentEndTime
|
||||
}
|
||||
console.info("🚀 ~method:agentParams -----", agentParams)
|
||||
editAgentInfo(agentParams).then(res => {
|
||||
ElNotification({
|
||||
title: '提示',
|
||||
message: res.msg,
|
||||
type: res.code === 1000 ? 'success' : 'error'
|
||||
})
|
||||
if (res.code === 1000) {
|
||||
router.push({name: 'User'})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getUserAgentInfo()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
<template>
|
||||
<div style="padding: 0 30px">
|
||||
<baseTitle title="设置代理"></baseTitle>
|
||||
<el-form ref="userForm" :model="agentInfoForm" label-width="85px">
|
||||
<el-row gutter="30">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="被代理人" prop="nickName">
|
||||
<span>{{ agentInfoForm.nickName }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="代理人" prop="" required>
|
||||
<el-button style="margin-right: 10px" color="#DED0B2" @click="handleShowAgentDialog">
|
||||
{{ agentUserList?.length !== 0 ? '更改' : '请选择' }}
|
||||
</el-button>
|
||||
<div v-for="item in agentUserList" :key="item.id" style="margin-right: 5px">
|
||||
{{ item.name }}
|
||||
</div>
|
||||
<user-picker :multiple="false" ref="agentSettingUserPickerRef" title="请选择代理人"
|
||||
v-model:value="agentUserList" @ok="agentUserPickerOk"
|
||||
@cancelOrClear="agentUserPickerOk"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="代理状态" prop="agentState">
|
||||
<Tag dictType="agent_state" :value="agentInfoForm.agentState"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="开始时间" prop="agentStartTime">
|
||||
<el-config-provider>
|
||||
<el-date-picker
|
||||
v-model="agentInfoForm.agentStartTime"
|
||||
type="datetime"
|
||||
placeholder="请选择开始时间"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
/>
|
||||
</el-config-provider>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="结束时间" prop="agentEndTime" :title="!agentInfoForm.agentStartTime?'请先选择开始时间!':''">
|
||||
<el-config-provider>
|
||||
<el-date-picker
|
||||
v-model="agentInfoForm.agentEndTime"
|
||||
type="datetime"
|
||||
placeholder="请选择结束时间"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
:disabled="!agentInfoForm.agentStartTime"
|
||||
:disabled-date="disabledAgentEndTime"
|
||||
/>
|
||||
</el-config-provider>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-form-item>
|
||||
<el-button color="#DED0B2" @click="handleSubmitAgent" style="margin-left: 16px">提交</el-button>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {ElNotification} from "element-plus";
|
||||
import UserPicker from "@/views/workflow/process/common/UserPicker.vue";
|
||||
|
||||
import {editAgentInfo, getAgentInfo} from "@/api/user/user";
|
||||
|
||||
const agentUserList = ref([])
|
||||
const agentInfoForm = ref({});
|
||||
const agentSettingUserPickerRef = ref()
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
localStorage.removeItem('originallySelectedList')
|
||||
const userId = ref(route.query.userId)
|
||||
|
||||
const getUserAgentInfo = async () => {
|
||||
await getAgentInfo(userId.value).then(res => {
|
||||
if (res.code === 1000) {
|
||||
agentInfoForm.value = res.data
|
||||
if(res.data.agentUserId) {
|
||||
agentUserList.value = [
|
||||
{
|
||||
id: res.data.agentUserId,
|
||||
name: res.data.agentNickName,
|
||||
companyName: res.data.agentCompanyName,
|
||||
}
|
||||
]
|
||||
}
|
||||
} else {
|
||||
ElNotification({
|
||||
title: '提示',
|
||||
message: res.msg,
|
||||
type: 'error'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
const disabledAgentEndTime = (time) => {
|
||||
return time.getTime() <= new Date(agentInfoForm.value.agentStartTime) - 1 * 24 * 3600 * 1000
|
||||
}
|
||||
|
||||
const handleShowAgentDialog = () => {
|
||||
agentSettingUserPickerRef.value.showUserPicker()
|
||||
}
|
||||
|
||||
const agentUserPickerOk = (userList) => {
|
||||
agentUserList.value = userList
|
||||
}
|
||||
|
||||
const handleSubmitAgent = () => {
|
||||
let agentUserId = ''
|
||||
if (agentUserList.value && agentUserList.value.length > 0) {
|
||||
agentUserId = agentUserList.value[0]?.id
|
||||
} else {
|
||||
ElNotification({
|
||||
title: '提示',
|
||||
message: '请选择代理人!',
|
||||
type: 'error'
|
||||
})
|
||||
return;
|
||||
}
|
||||
let agentParams = {
|
||||
userId: userId.value,
|
||||
agentUserId: agentUserId,
|
||||
agentStartTime: agentInfoForm.value.agentStartTime,
|
||||
agentEndTime: agentInfoForm.value.agentEndTime
|
||||
}
|
||||
console.info("🚀 ~method:agentParams -----", agentParams)
|
||||
editAgentInfo(agentParams).then(res => {
|
||||
ElNotification({
|
||||
title: '提示',
|
||||
message: res.msg,
|
||||
type: res.code === 1000 ? 'success' : 'error'
|
||||
})
|
||||
if (res.code === 1000) {
|
||||
router.push({name: 'User'})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getUserAgentInfo()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
||||
@@ -1,420 +1,420 @@
|
||||
<template>
|
||||
<fvSearchForm ref="form" :searchConfig="searchConfig" @search="search" style="margin-left: 16px"></fvSearchForm>
|
||||
<!-- <fvTable ref="tableIns" :tableConfig="tableConfig" @headBtnClick="headBtnClick"></fvTable>-->
|
||||
<div class="table-header-btn">
|
||||
<el-button color="#DED0B2" @click="handleAdd" v-perm="['admin:user:add']" >新增</el-button>
|
||||
</div>
|
||||
<div class="fv-table">
|
||||
<el-table
|
||||
:data="list"
|
||||
row-key="userId"
|
||||
:lazy="true"
|
||||
v-loading="loading"
|
||||
v-tabh
|
||||
>
|
||||
<el-table-column label="序号" type="index" align="center" width="80">
|
||||
<template #default="scope">
|
||||
{{(pageInfo.pageNum - 1) * pageInfo.pageSize + scope.$index + 1}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column prop="userId" label="用户编号" align="center"/>-->
|
||||
<el-table-column prop="userName" label="用户账号" align="center"/>
|
||||
<el-table-column prop="nickName" label="用户名称" align="center"/>
|
||||
<el-table-column prop="subCompanyName" label="公司名称" align="center"/>
|
||||
<el-table-column prop="jobActivityDesc" label="岗位名称" align="center"/>
|
||||
<el-table-column prop="departmentName" label="部门" align="center"/>
|
||||
<el-table-column prop="mobile" label="手机号码" align="center"/>
|
||||
<el-table-column prop="accountType" label="主次账号" align="center" width="100">
|
||||
<template #default="scope">
|
||||
<Tag dictType="account_type" :value="scope.row.accountType"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="state" label="状态" align="center" width="80">
|
||||
<template #default="scope">
|
||||
<tag dict-type="normal_disable" :value="scope.row.state"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" align="center" width="180px"/>
|
||||
<el-table-column label="操作" align="center" width="180">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" v-perm="auths.edit"
|
||||
@click="handleEdit(scope.row)" link>编辑
|
||||
</el-button>
|
||||
<el-button type="primary" v-perm="auths.agentSetting"
|
||||
@click="handleAgentSetting(scope.row)" link>设置代理
|
||||
</el-button>
|
||||
<el-button type="danger" v-if="scope.row.userType != 0" v-perm="auths.del"
|
||||
@click="handleDel(scope.row)" link>删除
|
||||
</el-button>
|
||||
<el-button type="primary" v-if="scope.row.accountType == 0" v-perm="auths.bindUser"
|
||||
@click="handleBindAccount(scope.row)" link>绑定账号
|
||||
</el-button>
|
||||
<!-- <popover-delete :name="scope.row.userName" :type="'用户'"-->
|
||||
<!-- @delete="handleDelete(scope.row.userId)"/>-->
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<paging :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize" :page-sizes="[10, 20, 30, 40,50]"
|
||||
:total="total" @changeSize="handleSizeChange" @goPage="handleCurrentChange"/>
|
||||
<user-picker :multiple="true" ref="userPicker" title="请选择次账号" v-model:value="userList" @ok="selected"/>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import Tag from '@/components/Tag.vue'
|
||||
import fvSelect from '@/fvcomponents/fvSelect/index.vue'
|
||||
import UserPicker from "@/views/workflow/process/common/UserPicker.vue";
|
||||
import {useAuthStore} from '@/stores/userstore.js'
|
||||
import {getDeptOpt, getSubCompOpt, bindAccount, getBindAccount,getMosrUserList} from '@/api/user/user.js';
|
||||
import {ElMessageBox, ElNotification} from 'element-plus';
|
||||
|
||||
import Paging from "@/components/pagination/index.vue";
|
||||
const authStore = useAuthStore()
|
||||
const router = useRouter()
|
||||
|
||||
const searchConfig = ref([
|
||||
{
|
||||
label: '公司名称',
|
||||
prop: 'subCompanyId',
|
||||
component: 'el-tree-select',
|
||||
props: {
|
||||
placeholder: '请选择公司名称',
|
||||
clearable: true,
|
||||
data: [],
|
||||
filterable: true,
|
||||
checkStrictly: true,
|
||||
remote: true
|
||||
},
|
||||
on: {
|
||||
change: async (val) => {
|
||||
const {data} = await getDeptOpt({subCompanyId: val})
|
||||
searchConfig.value.find(item => item.prop == 'departmentId').props.data = data
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '部门名称',
|
||||
prop: 'departmentId',
|
||||
component: 'el-tree-select',
|
||||
props: {
|
||||
placeholder: '请选择部门名称',
|
||||
clearable: true,
|
||||
data: [],
|
||||
filterable: true,
|
||||
checkStrictly: true,
|
||||
remote: true
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '用户名称',
|
||||
prop: 'nickName',
|
||||
component: 'el-input',
|
||||
props: {
|
||||
placeholder: '请输入用户名称',
|
||||
clearable: true
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '用户账号',
|
||||
prop: 'userName',
|
||||
component: 'el-input',
|
||||
props: {
|
||||
placeholder: '请输入用户账号',
|
||||
clearable: true
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '状态',
|
||||
prop: 'state',
|
||||
component: shallowRef(fvSelect),
|
||||
props: {
|
||||
placeholder: '请选择状态',
|
||||
cacheKey: 'normal_disable',
|
||||
clearable: true,
|
||||
remote: true,
|
||||
filterable: true
|
||||
}
|
||||
},
|
||||
])
|
||||
//页面信息
|
||||
const pageInfo = reactive({
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
});
|
||||
const list = ref([]);
|
||||
const tableIns = ref()
|
||||
const total = ref()
|
||||
const loading = ref(false)
|
||||
const currentId = ref('')
|
||||
const userList = ref([])
|
||||
const userPicker = ref()
|
||||
const auths = {
|
||||
edit: ['admin:user:edit'],
|
||||
del: ['admin:user:del'],
|
||||
add: ['admin:user:add'],
|
||||
bindUser: ['admin:bind:account'],
|
||||
agentSetting: ['admin:user:agentSetting'],
|
||||
}
|
||||
|
||||
const tableConfig = reactive({
|
||||
columns: [
|
||||
{
|
||||
prop: 'index',
|
||||
type: 'index',
|
||||
label: '序号',
|
||||
align: 'center',
|
||||
width: 85,
|
||||
index: index => {
|
||||
return (tableIns.value.getQuery().pageNum - 1) * tableIns.value.getQuery().pageSize + index + 1
|
||||
}
|
||||
},
|
||||
{
|
||||
prop: 'userName',
|
||||
label: '用户账号',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: 'nickName',
|
||||
label: '用户名称',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: 'subCompanyName',
|
||||
label: '公司名称',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: 'jobActivityDesc',
|
||||
label: '岗位名称',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: 'departmentName',
|
||||
label: '部门',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: 'mobile',
|
||||
label: '手机号码',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: 'accountType',
|
||||
label: '主次账号',
|
||||
align: 'center',
|
||||
width: 100,
|
||||
showOverflowTooltip: false,
|
||||
currentRender: ({row, index}) => (<Tag dictType={'account_type'} value={row.accountType}/>)
|
||||
},
|
||||
{
|
||||
prop: 'state',
|
||||
label: '状态',
|
||||
width: 80,
|
||||
align: 'center',
|
||||
showOverflowTooltip: false,
|
||||
currentRender: ({row, index}) => (<Tag dictType={'normal_disable'} value={row.state}/>)
|
||||
},
|
||||
{
|
||||
prop: 'createTime',
|
||||
label: '创建时间',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: 'oper',
|
||||
label: '操作',
|
||||
fixed: 'right',
|
||||
width: 180,
|
||||
align: 'center',
|
||||
showOverflowTooltip: false,
|
||||
currentRender: ({row, index}) => {
|
||||
return (
|
||||
<div>
|
||||
<el-button type="primary" v-perm={auths.edit} link onClick={() => handleEdit(row)}>编辑</el-button>
|
||||
<el-button type="primary" v-perm={auths.agentSetting} link onClick={() => handleAgentSetting(row)}>设置代理
|
||||
</el-button>
|
||||
{
|
||||
row.userType != 0 ?
|
||||
<el-button type="danger" v-perm={auths.del} link onClick={() => handleDel(row)}>删除</el-button> :
|
||||
null
|
||||
}
|
||||
{
|
||||
row.accountType == 0 ?
|
||||
<el-button type="primary" v-perm={auths.bindUser} link
|
||||
onClick={() => handleBindAccount(row)}>绑定账号</el-button> :
|
||||
null
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
],
|
||||
api: '/admin/mosr/user',
|
||||
params: {},
|
||||
btns: [
|
||||
{name: '新增', color: "#DED0B2", auth: ['admin:user:add'], key: 'add'}
|
||||
]
|
||||
})
|
||||
|
||||
const search = (val) => {
|
||||
tableConfig.params = {...val}
|
||||
// tableIns.value.refresh()
|
||||
getList()
|
||||
}
|
||||
|
||||
//切换每页显示条数
|
||||
const handleSizeChange = (val) => {
|
||||
pageInfo.pageSize = val;
|
||||
getList();
|
||||
};
|
||||
|
||||
//点击页码进行分页功能
|
||||
const handleCurrentChange = (val) => {
|
||||
pageInfo.pageNum = val;
|
||||
getList();
|
||||
};
|
||||
//获取用户数据
|
||||
const getList = async () => {
|
||||
let params = {
|
||||
...tableConfig.params,
|
||||
...pageInfo
|
||||
};
|
||||
loading.value = true
|
||||
getMosrUserList(params).then(res => {
|
||||
|
||||
if (res.code === 1000) {
|
||||
list.value = res.data.rows;
|
||||
total.value = res.data.total;
|
||||
loading.value = false;
|
||||
}else{
|
||||
ElNotification({
|
||||
title: '提示',
|
||||
message: res.msg,
|
||||
type: 'error'
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
getList()
|
||||
const handleAgentSetting = (row) => {
|
||||
router.push({
|
||||
name: 'AgentSetting',
|
||||
query: {
|
||||
userId: row.userId,
|
||||
}
|
||||
})
|
||||
}
|
||||
const init = async () => {
|
||||
// console.log(authStore.roles,'userinfo');
|
||||
if (!authStore.roles.includes('superAdmin')) {
|
||||
searchConfig.value = searchConfig.value.slice(1)
|
||||
}else{
|
||||
const res = await getSubCompOpt()
|
||||
searchConfig.value.find(item => item.prop == 'subCompanyId').props.data = res.data
|
||||
}
|
||||
const {data} = await getDeptOpt()
|
||||
searchConfig.value.find(item => item.prop == 'departmentId').props.data = data
|
||||
// searchConfig.value = searchConfig.value
|
||||
// const res = await getSubCompOpt()
|
||||
// searchConfig.value.find(item => item.prop == 'subCompanyId').props.data = res.data
|
||||
}
|
||||
|
||||
init()
|
||||
|
||||
const handleAdd = () => {
|
||||
router.push({
|
||||
name: 'Useradd',
|
||||
query: {
|
||||
isAdd: 1
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const handleEdit = (row) => {
|
||||
router.push({
|
||||
name: 'Useredit',
|
||||
query: {
|
||||
id: row.userId,
|
||||
userType: row.userType
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const handleDel = (row) => {
|
||||
ElMessageBox.confirm('确定删除该条数据吗?', '确定删除', {
|
||||
type: 'warning',
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消'
|
||||
}).then(async res => {
|
||||
// const { code } = await
|
||||
}).catch(() => {
|
||||
})
|
||||
}
|
||||
const handleBindAccount = (row) => {
|
||||
currentId.value = row.userId
|
||||
getBindAccount(row.userId).then(res => {
|
||||
if (res.code != 1000) {
|
||||
ElNotification({
|
||||
title: '提示',
|
||||
message: res.msg,
|
||||
type: 'error'
|
||||
})
|
||||
} else {
|
||||
userList.value = res.data
|
||||
nextTick(() => {
|
||||
userPicker.value.showUserPicker()
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
const selected = (select) => {
|
||||
let userInfoList = []
|
||||
for (let val of select) {
|
||||
let userInfo = {
|
||||
id: val.id,
|
||||
name: val.name
|
||||
}
|
||||
userInfoList.push(userInfo)
|
||||
}
|
||||
userList.value = userInfoList
|
||||
let ids = userList.value.map(item => item.id)
|
||||
let params = {
|
||||
id: currentId.value,
|
||||
ids: ids
|
||||
}
|
||||
bindAccount(params).then(res => {
|
||||
ElNotification({
|
||||
title: '提示',
|
||||
message: res.msg,
|
||||
type: res.code === 1000 ? 'success' : 'error'
|
||||
})
|
||||
})
|
||||
}
|
||||
const headBtnClick = (key) => {
|
||||
switch (key) {
|
||||
case 'add':
|
||||
handleAdd()
|
||||
break;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
:deep(.el-table__header) {
|
||||
.is-leaf:first-child {
|
||||
.cell {
|
||||
margin-left: -20px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-table__body) {
|
||||
.el-table__cell:first-child {
|
||||
.cell {
|
||||
margin-left: -10px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-col-5:nth-child(4).el-col-offset-1) {
|
||||
margin-left: 35px !important;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<fvSearchForm ref="form" :searchConfig="searchConfig" @search="search" style="margin-left: 16px"></fvSearchForm>
|
||||
<!-- <fvTable ref="tableIns" :tableConfig="tableConfig" @headBtnClick="headBtnClick"></fvTable>-->
|
||||
<div class="table-header-btn">
|
||||
<el-button color="#DED0B2" @click="handleAdd" v-perm="['admin:user:add']" >新增</el-button>
|
||||
</div>
|
||||
<div class="fv-table">
|
||||
<el-table
|
||||
:data="list"
|
||||
row-key="userId"
|
||||
:lazy="true"
|
||||
v-loading="loading"
|
||||
v-tabh
|
||||
>
|
||||
<el-table-column label="序号" type="index" align="center" width="80">
|
||||
<template #default="scope">
|
||||
{{(pageInfo.pageNum - 1) * pageInfo.pageSize + scope.$index + 1}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column prop="userId" label="用户编号" align="center"/>-->
|
||||
<el-table-column prop="userName" label="用户账号" align="center"/>
|
||||
<el-table-column prop="nickName" label="用户名称" align="center"/>
|
||||
<el-table-column prop="subCompanyName" label="公司名称" align="center"/>
|
||||
<el-table-column prop="jobActivityDesc" label="岗位名称" align="center"/>
|
||||
<el-table-column prop="departmentName" label="部门" align="center"/>
|
||||
<el-table-column prop="mobile" label="手机号码" align="center"/>
|
||||
<el-table-column prop="accountType" label="主次账号" align="center" width="100">
|
||||
<template #default="scope">
|
||||
<Tag dictType="account_type" :value="scope.row.accountType"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="state" label="状态" align="center" width="80">
|
||||
<template #default="scope">
|
||||
<tag dict-type="normal_disable" :value="scope.row.state"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" align="center" width="180px"/>
|
||||
<el-table-column label="操作" align="center" width="180">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" v-perm="auths.edit"
|
||||
@click="handleEdit(scope.row)" link>编辑
|
||||
</el-button>
|
||||
<el-button type="primary" v-perm="auths.agentSetting"
|
||||
@click="handleAgentSetting(scope.row)" link>设置代理
|
||||
</el-button>
|
||||
<el-button type="danger" v-if="scope.row.userType != 0" v-perm="auths.del"
|
||||
@click="handleDel(scope.row)" link>删除
|
||||
</el-button>
|
||||
<el-button type="primary" v-if="scope.row.accountType == 0" v-perm="auths.bindUser"
|
||||
@click="handleBindAccount(scope.row)" link>绑定账号
|
||||
</el-button>
|
||||
<!-- <popover-delete :name="scope.row.userName" :type="'用户'"-->
|
||||
<!-- @delete="handleDelete(scope.row.userId)"/>-->
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<paging :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize" :page-sizes="[10, 20, 30, 40,50]"
|
||||
:total="total" @changeSize="handleSizeChange" @goPage="handleCurrentChange"/>
|
||||
<user-picker :multiple="true" ref="userPicker" title="请选择次账号" v-model:value="userList" @ok="selected"/>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import Tag from '@/components/Tag.vue'
|
||||
import fvSelect from '@/fvcomponents/fvSelect/index.vue'
|
||||
import UserPicker from "@/views/workflow/process/common/UserPicker.vue";
|
||||
import {useAuthStore} from '@/stores/userstore.js'
|
||||
import {getDeptOpt, getSubCompOpt, bindAccount, getBindAccount,getMosrUserList} from '@/api/user/user.js';
|
||||
import {ElMessageBox, ElNotification} from 'element-plus';
|
||||
|
||||
import Paging from "@/components/pagination/index.vue";
|
||||
const authStore = useAuthStore()
|
||||
const router = useRouter()
|
||||
|
||||
const searchConfig = ref([
|
||||
{
|
||||
label: '公司名称',
|
||||
prop: 'subCompanyId',
|
||||
component: 'el-tree-select',
|
||||
props: {
|
||||
placeholder: '请选择公司名称',
|
||||
clearable: true,
|
||||
data: [],
|
||||
filterable: true,
|
||||
checkStrictly: true,
|
||||
remote: true
|
||||
},
|
||||
on: {
|
||||
change: async (val) => {
|
||||
const {data} = await getDeptOpt({subCompanyId: val})
|
||||
searchConfig.value.find(item => item.prop == 'departmentId').props.data = data
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '部门名称',
|
||||
prop: 'departmentId',
|
||||
component: 'el-tree-select',
|
||||
props: {
|
||||
placeholder: '请选择部门名称',
|
||||
clearable: true,
|
||||
data: [],
|
||||
filterable: true,
|
||||
checkStrictly: true,
|
||||
remote: true
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '用户名称',
|
||||
prop: 'nickName',
|
||||
component: 'el-input',
|
||||
props: {
|
||||
placeholder: '请输入用户名称',
|
||||
clearable: true
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '用户账号',
|
||||
prop: 'userName',
|
||||
component: 'el-input',
|
||||
props: {
|
||||
placeholder: '请输入用户账号',
|
||||
clearable: true
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '状态',
|
||||
prop: 'state',
|
||||
component: shallowRef(fvSelect),
|
||||
props: {
|
||||
placeholder: '请选择状态',
|
||||
cacheKey: 'normal_disable',
|
||||
clearable: true,
|
||||
remote: true,
|
||||
filterable: true
|
||||
}
|
||||
},
|
||||
])
|
||||
//页面信息
|
||||
const pageInfo = reactive({
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
});
|
||||
const list = ref([]);
|
||||
const tableIns = ref()
|
||||
const total = ref()
|
||||
const loading = ref(false)
|
||||
const currentId = ref('')
|
||||
const userList = ref([])
|
||||
const userPicker = ref()
|
||||
const auths = {
|
||||
edit: ['admin:user:edit'],
|
||||
del: ['admin:user:del'],
|
||||
add: ['admin:user:add'],
|
||||
bindUser: ['admin:bind:account'],
|
||||
agentSetting: ['admin:user:agentSetting'],
|
||||
}
|
||||
|
||||
const tableConfig = reactive({
|
||||
columns: [
|
||||
{
|
||||
prop: 'index',
|
||||
type: 'index',
|
||||
label: '序号',
|
||||
align: 'center',
|
||||
width: 85,
|
||||
index: index => {
|
||||
return (tableIns.value.getQuery().pageNum - 1) * tableIns.value.getQuery().pageSize + index + 1
|
||||
}
|
||||
},
|
||||
{
|
||||
prop: 'userName',
|
||||
label: '用户账号',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: 'nickName',
|
||||
label: '用户名称',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: 'subCompanyName',
|
||||
label: '公司名称',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: 'jobActivityDesc',
|
||||
label: '岗位名称',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: 'departmentName',
|
||||
label: '部门',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: 'mobile',
|
||||
label: '手机号码',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: 'accountType',
|
||||
label: '主次账号',
|
||||
align: 'center',
|
||||
width: 100,
|
||||
showOverflowTooltip: false,
|
||||
currentRender: ({row, index}) => (<Tag dictType={'account_type'} value={row.accountType}/>)
|
||||
},
|
||||
{
|
||||
prop: 'state',
|
||||
label: '状态',
|
||||
width: 80,
|
||||
align: 'center',
|
||||
showOverflowTooltip: false,
|
||||
currentRender: ({row, index}) => (<Tag dictType={'normal_disable'} value={row.state}/>)
|
||||
},
|
||||
{
|
||||
prop: 'createTime',
|
||||
label: '创建时间',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: 'oper',
|
||||
label: '操作',
|
||||
fixed: 'right',
|
||||
width: 180,
|
||||
align: 'center',
|
||||
showOverflowTooltip: false,
|
||||
currentRender: ({row, index}) => {
|
||||
return (
|
||||
<div>
|
||||
<el-button type="primary" v-perm={auths.edit} link onClick={() => handleEdit(row)}>编辑</el-button>
|
||||
<el-button type="primary" v-perm={auths.agentSetting} link onClick={() => handleAgentSetting(row)}>设置代理
|
||||
</el-button>
|
||||
{
|
||||
row.userType != 0 ?
|
||||
<el-button type="danger" v-perm={auths.del} link onClick={() => handleDel(row)}>删除</el-button> :
|
||||
null
|
||||
}
|
||||
{
|
||||
row.accountType == 0 ?
|
||||
<el-button type="primary" v-perm={auths.bindUser} link
|
||||
onClick={() => handleBindAccount(row)}>绑定账号</el-button> :
|
||||
null
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
],
|
||||
api: '/admin/mosr/user',
|
||||
params: {},
|
||||
btns: [
|
||||
{name: '新增', color: "#DED0B2", auth: ['admin:user:add'], key: 'add'}
|
||||
]
|
||||
})
|
||||
|
||||
const search = (val) => {
|
||||
tableConfig.params = {...val}
|
||||
// tableIns.value.refresh()
|
||||
getList()
|
||||
}
|
||||
|
||||
//切换每页显示条数
|
||||
const handleSizeChange = (val) => {
|
||||
pageInfo.pageSize = val;
|
||||
getList();
|
||||
};
|
||||
|
||||
//点击页码进行分页功能
|
||||
const handleCurrentChange = (val) => {
|
||||
pageInfo.pageNum = val;
|
||||
getList();
|
||||
};
|
||||
//获取用户数据
|
||||
const getList = async () => {
|
||||
let params = {
|
||||
...tableConfig.params,
|
||||
...pageInfo
|
||||
};
|
||||
loading.value = true
|
||||
getMosrUserList(params).then(res => {
|
||||
|
||||
if (res.code === 1000) {
|
||||
list.value = res.data.rows;
|
||||
total.value = res.data.total;
|
||||
loading.value = false;
|
||||
}else{
|
||||
ElNotification({
|
||||
title: '提示',
|
||||
message: res.msg,
|
||||
type: 'error'
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
getList()
|
||||
const handleAgentSetting = (row) => {
|
||||
router.push({
|
||||
name: 'AgentSetting',
|
||||
query: {
|
||||
userId: row.userId,
|
||||
}
|
||||
})
|
||||
}
|
||||
const init = async () => {
|
||||
// console.log(authStore.roles,'userinfo');
|
||||
if (!authStore.roles.includes('superAdmin')) {
|
||||
searchConfig.value = searchConfig.value.slice(1)
|
||||
}else{
|
||||
const res = await getSubCompOpt()
|
||||
searchConfig.value.find(item => item.prop == 'subCompanyId').props.data = res.data
|
||||
}
|
||||
const {data} = await getDeptOpt()
|
||||
searchConfig.value.find(item => item.prop == 'departmentId').props.data = data
|
||||
// searchConfig.value = searchConfig.value
|
||||
// const res = await getSubCompOpt()
|
||||
// searchConfig.value.find(item => item.prop == 'subCompanyId').props.data = res.data
|
||||
}
|
||||
|
||||
init()
|
||||
|
||||
const handleAdd = () => {
|
||||
router.push({
|
||||
name: 'Useradd',
|
||||
query: {
|
||||
isAdd: 1
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const handleEdit = (row) => {
|
||||
router.push({
|
||||
name: 'Useredit',
|
||||
query: {
|
||||
id: row.userId,
|
||||
userType: row.userType
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const handleDel = (row) => {
|
||||
ElMessageBox.confirm('确定删除该条数据吗?', '确定删除', {
|
||||
type: 'warning',
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消'
|
||||
}).then(async res => {
|
||||
// const { code } = await
|
||||
}).catch(() => {
|
||||
})
|
||||
}
|
||||
const handleBindAccount = (row) => {
|
||||
currentId.value = row.userId
|
||||
getBindAccount(row.userId).then(res => {
|
||||
if (res.code != 1000) {
|
||||
ElNotification({
|
||||
title: '提示',
|
||||
message: res.msg,
|
||||
type: 'error'
|
||||
})
|
||||
} else {
|
||||
userList.value = res.data
|
||||
nextTick(() => {
|
||||
userPicker.value.showUserPicker()
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
const selected = (select) => {
|
||||
let userInfoList = []
|
||||
for (let val of select) {
|
||||
let userInfo = {
|
||||
id: val.id,
|
||||
name: val.name
|
||||
}
|
||||
userInfoList.push(userInfo)
|
||||
}
|
||||
userList.value = userInfoList
|
||||
let ids = userList.value.map(item => item.id)
|
||||
let params = {
|
||||
id: currentId.value,
|
||||
ids: ids
|
||||
}
|
||||
bindAccount(params).then(res => {
|
||||
ElNotification({
|
||||
title: '提示',
|
||||
message: res.msg,
|
||||
type: res.code === 1000 ? 'success' : 'error'
|
||||
})
|
||||
})
|
||||
}
|
||||
const headBtnClick = (key) => {
|
||||
switch (key) {
|
||||
case 'add':
|
||||
handleAdd()
|
||||
break;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
:deep(.el-table__header) {
|
||||
.is-leaf:first-child {
|
||||
.cell {
|
||||
margin-left: -20px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-table__body) {
|
||||
.el-table__cell:first-child {
|
||||
.cell {
|
||||
margin-left: -10px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-col-5:nth-child(4).el-col-offset-1) {
|
||||
margin-left: 35px !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user