Merge pull request 'fix : 修复标签关闭bug, 表格组件列配置, 完善用户管理页面' (#28) from dj into master

Reviewed-on: http://git.feashow.cn/feashow/SmartOpsWeb/pulls/28
This commit is contained in:
2024-09-14 08:45:04 +00:00
17 changed files with 537 additions and 587 deletions

View File

@@ -4,7 +4,7 @@
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SmartOpsWeb</title>
<title>智能语音服务系统</title>
</head>
<body>
<div id="app"></div>

View File

@@ -10,7 +10,7 @@
"dependencies": {
"axios": "^1.4.0",
"echarts": "^5.4.2",
"element-plus": "^2.3.5",
"element-plus": "^2.6.0",
"highlight.js": "9.18.5",
"js-cookie": "^3.0.5",
"nprogress": "^0.2.0",

View File

@@ -31,7 +31,6 @@ const props = defineProps({
const tagConfig = ref({})
const filterDict = (data, value) => {
console.log(value + "aaa",!data || !value)
if (!data || value == null) return
if (data instanceof Array) {
if (value == true || value == false) {

View File

@@ -10,7 +10,6 @@ export const hasPerm = (el, binding, vnode) => {
const hasPermission = permisstions.some(permission => {
return allPermission === permission || permissiosFlag.includes(permission)
})
console.log(hasPermission);
if (!hasPermission) {
el.parentNode && el.parentNode.removeChild(el)
}

View File

@@ -62,7 +62,6 @@ const filterSchma = computed(()=>{
})
})
console.log(filterSchma.value, 'filterSchma');
const validate = async () => {
let validObj = {}

View File

@@ -0,0 +1,62 @@
<template>
<el-dialog v-model="localDialogParams.localVisited" :title="localDialogParams.localTitle" :width="localDialogParams.localWidth+'px'">
<fvForm :schema="localDialogParams.localFormSchema" @getInstance="(e)=>baseForm = e" label-position="right" :rules="localDialogParams.localFormRules"></fvForm>
<template #footer>
<span>
<el-button @click="handleCancel">取消</el-button>
<el-button type="primary" @click="handleSubmit">确定</el-button>
</span>
</template>
</el-dialog>
</template>
<script setup>
const emits = defineEmits(['getInstance'])
const props = defineProps({
isVisited: {
type: Boolean,
default: true
},
title: {
type: Boolean,
default: true
},
width: {
type: String,
default: '700'
},
formSchema: {
type: Function,
default: ()=>{}
},
formRules: {
type: Object,
default: {}
}
})
const baseForm = ref()
const localDialogParams = ref({})
watchEffect(()=>{
localDialogParams.value.localVisited = props.isVisited
localDialogParams.value.localTitle = props.title
localDialogParams.value.localWidth = props.width
localDialogParams.value.localFormSchema = props.formSchema
localDialogParams.value.localFormRules = props.formRules
})
const getFormInstance=()=>{
return baseForm.value
}
const handleCancel=()=>{
emits('dialogCancel')
}
const handleSubmit=()=>{
emits('dialogSubmit',baseForm.value)
}
defineExpose({
getFormInstance
})
</script>
<style scoped>
</style>

View File

@@ -15,7 +15,7 @@ const props = defineProps({
default: []
},
modelValue: {
type: [Number, String],
type: [Number, String, Boolean],
default: ''
},
cacheKey: {

View File

@@ -28,7 +28,8 @@
</template>
</el-form-item>
</el-col>
<el-col :span="filterConfig.length % 4 == 0 ? 4 : 6" class="btn-col">
<!-- class="btn-col"-->
<el-col :span="filterConfig.length % 4 == 0 ? 4 : 6" :offset="1">
<el-form-item>
<el-button v-if="searchConfig.length>=4" link type="primary" @click="showMore = !showMore">
{{ showMore ? '收起' : '展开' }}
@@ -65,21 +66,25 @@ const filterConfig = computed(()=>{
return arr.length >= 4 && showMore.value ? arr : arr.slice(0, 3)
})
console.log(filterConfig.value, 'filterConfig');
// 搜索功能表单元素默认值
const setDefaultFormValues = () => {
filterConfig.value.forEach(item=>{
form.value[item.prop] = item.props.defaultValue || null
})
}
// const setDefaultFormValues = () => {
// filterConfig.value.forEach(item => {
// form.value[item.prop] = item.props?.defaultValue || null
// })
// }
watchEffect(()=>{
if(filterConfig.value.length) {
setDefaultFormValues()
watchEffect(() => {
if (filterConfig.value.length) {
// setDefaultFormValues()
}
})
const elChange = () => {
setTimeout(() => {
getValues()
}, 500)
}
const getValues = () => {
emits('search', form.value)
return form.value
@@ -88,7 +93,7 @@ const getValues = () => {
//重置
const handleReset = () => {
form.value = {}
setDefaultFormValues()
// setDefaultFormValues()
emits('search', form.value)
}

View File

@@ -2,16 +2,56 @@
<div class="fv-table-container">
<!-- 表格头部按钮 -->
<div class="fv-table-btn" v-if="tableConfig.btns">
<div class="table-head-btn">
<el-button
v-for="btn in tableConfig.btns"
:key="btn.key"
:type="btn.type || ''"
:color="btn.color || ''"
v-perm="btn.auth || ['*:*:*']"
@click="handleClickBtns(btn.key)"
>
{{ btn.name }}
</el-button>
</div>
</div>
<!-- 列显示配置 -->
<div v-if="isSettingCol" style="float: right">
<!-- <el-button v-if="tableConfig.export && tableConfig.export.open" @click="exportTable" color="#DED0B2"-->
<!-- style="margin-bottom: 10px">导出-->
<!-- </el-button>-->
<el-tooltip effect="dark" content="列配置" placement="bottom">
<el-button ref="buttonRef" link>
<el-icon size="18">
<Setting/>
</el-icon>
</el-button>
</el-tooltip>
<el-popover
placement="bottom"
:width="200"
ref="popoverRef"
:virtual-ref="buttonRef"
virtual-triggering
trigger="click">
<div class="col-setting-checkall">
<el-checkbox label="列展示" v-model="localData.allColShow" :indeterminate="localData.indeterminate"
@change="changeIsShowAll"></el-checkbox>
</div>
<div class="col-setting-list">
<el-checkbox-group v-model="localData.checkGroup" @change="changeColShow">
<el-space direction="vertical" alignment="flex-start" :size="0">
<el-checkbox
v-for="item in tableConfig.columns"
:key="item.prop"
:label="item.label"
:value="item.prop"
/>
</el-space>
</el-checkbox-group>
</div>
</el-popover>
</div>
<!-- 表格部分 -->
<div class="fv-table">
<el-table
@@ -19,7 +59,6 @@
v-loading="localData.loading"
:row-key="tableConfig?.rowKey || 'id'"
v-bind="$attrs"
table-layout="fixed"
:show-overflow-tooltip="true"
highlight-current-row
@selection-change="selectionChange"
@@ -30,7 +69,7 @@
ref="tableInstance"
>
<template #default>
<fvTableColumn v-for="column in tableConfig.columns" :key="column.prop" :columns="column">
<fvTableColumn v-for="column in localData.columns" :key="column.prop" :columns="column">
<template v-if="column?.slots?.header" #[column?.slots?.header]="params">
<slot :name="column?.slots?.header" v-bind="params || {}"></slot>
</template>
@@ -62,8 +101,9 @@
</template>
<script setup>
import { ElMessage } from 'element-plus';
import { ElMessage,ElNotification } from 'element-plus';
import { requestList } from '../../api/common';
// import {exportExcel} from "@/utils/export-excel";
const props = defineProps({
//表格配置
@@ -80,10 +120,31 @@ const props = defineProps({
pagination: {
type: Boolean,
default: true
},
// 是否显示列配置
isSettingCol: {
type: Boolean,
default: true
}
})
const tableInstance = ref()
const buttonRef = ref()
const popoverRef = ref()
const exportTable = () => {
const $e = tableInstance.value.$el
let $table = $e.querySelector('.el-table__fixed')
if (!$table) {
$table = $e
}
let fileName = ""
if (props.tableConfig.export && props.tableConfig.export) {
fileName = props.tableConfig.export.fileName
}
exportExcel($table, Object.keys(localData.list[0]), fileName)
}
const localData = reactive({
list: [], // 表格数据
@@ -92,32 +153,104 @@ const localData = reactive({
pageNum: 1
},
total: 0,
loading: false
loading: false,
// 列展示设置
columns: [],
allColShow: true, // 默认全部列都展示
indeterminate: false,
checkGroup: []
})
const emits = defineEmits(['headBtnClick', 'selectionChange', 'rowClick', 'rowDblclick', 'getBaseQuery', 'cellClick'])
const emits = defineEmits(['headBtnClick', 'selectionChange', 'rowClick', 'rowDblclick', 'getBaseQuery', 'cellClick', 'getTotal'])
const handleClickBtns = (key) => {
emits('headBtnClick', key)
}
const filterColumns = () => {
localData.columns = props.tableConfig.columns.map(item => {
if (item.prop) {
return {
...item
}
}
})
}
const changeIsShowAll = (val) => {
if (val) {
filterColumns()
localData.indeterminate = false
localData.checkGroup = props.tableConfig.columns.map(item => item.prop)
} else {
localData.columns.length = 0
localData.checkGroup.length = 0
localData.indeterminate = false
}
}
const changeColShow = (val) => {
if (val.length == props.tableConfig.columns.length) {
localData.indeterminate = false
localData.allColShow = true
} else if (val.length !== props.tableConfig.columns.length && val.length != 0) {
localData.allColShow = false
localData.indeterminate = true
} else {
localData.indeterminate = false
localData.allColShow = false
}
const template = []
props.tableConfig.columns.forEach(item => {
val.forEach(v => {
if (item.prop == v) {
template.push(item)
}
})
})
localData.columns = template
}
filterColumns()
const getList = async () => {
const { api, params } = props.tableConfig
const queryParmas = {...localData.query, ...params}
if(api) {
localData.loading = true
try {
const { code, data, msg } = await requestList(api, queryParmas)
if ( code === 1000 ) {
const {code, data, msg} = await requestList(api, queryParmas).then(res=>{
// console.log(res)
return res
})
// console.log(code,data,msg)
if (code === 1000) {
if (data.rows) {
localData.list = data.rows
} else {
localData.list = data
}
localData.total = data.total
emits('getTotal', localData.total)
localData.loading = false
} else {
ElMessage.error(msg)
ElNotification({
title: '提示',
message: msg,
type: 'error'
})
localData.loading = false
}
} catch (error) {
ElMessage.error('请求数据失败')
console.log("error",error)
if (!error){
return
}
ElNotification({
title: '提示',
message: '请求数据失败',
type: 'error'
})
localData.loading = false
}
} else {
@@ -154,13 +287,11 @@ const handleCurrentChange = (val) => {
getList()
}
// watchEffect(()=>{
// if(!props.tableConfig.api) {
// localData.list = props.data
// }else {
// getList()
// }
// })
watchEffect(() => {
if (localData.allColShow) {
localData.checkGroup = props.tableConfig.columns.map(item => item.prop)
}
})
//刷新
const refresh = ({resetPage=false}={}) => {
resetPage ? localData.query.pageNum = 1 : null
@@ -184,5 +315,30 @@ onMounted(() => {
</script>
<style lang="scss" scoped>
.col-setting-checkall {
border-bottom: 1px solid rgb(210, 210, 213);
}
.col-setting-list {
max-height: 45vh;
overflow-y: auto;
}
.table-head-btn {
display: flex;
justify-content: flex-start;
align-items: center;
}
.fv-table-btn {
display: flex;
justify-content: space-between;
align-content: center;
}
.fv-table {
:deep(.el-tooltip) {
width: 100% !important;
}
}
</style>

View File

@@ -49,7 +49,7 @@ import { isVNode } from 'vue'
if(column && column?.formatter) {
return column.formatter(row, column, value, $index) || '--'
}
return value ? value.toString() : '--'
return value !== null && value !== undefined ? value.toString() : '--'
}
</script>

View File

@@ -1,7 +1,7 @@
<template>
<!-- 有子菜单 -->
<template v-for="item in menuItem" :key="item.path">
<el-sub-menu v-if="item?.children?.length>0 && !item.hidden" :index="item.path">
<el-sub-menu v-if="checkMenuItem(item)" :index="item.path">
<template #title>
<svg-icon :name="item.icon"/>
<span>{{ item.title }}</span>
@@ -17,7 +17,9 @@
</a>
</div>
<div v-else>
<svg-icon :name="item.icon"/>
<el-icon>
<svg-icon :name="item.icon" class="menu-item-icon"/>
</el-icon>
<span>{{ item.title }}</span>
</div>
</template>
@@ -44,5 +46,19 @@ const handleGo = (path) => {
}
}
const checkMenuItem = (item) => {
let children = item.children
let childState = false;
if (children){
for (let child of children) {
if (!child.hidden) {
childState = true
break
}
}
}
return item?.children?.length>0 && !item.hidden && childState
}
</script>

View File

@@ -4,7 +4,7 @@
<div>
<router-link
v-for="item in tagsViewStore.visitedViews"
:key="item.path" :to="{ path: item.path }" class="tag"
:key="item.path" :to="{ path: item.path, query: item.query }" class="tag"
:class="isActive(item) ? 'active' : ''"
@click.prevent
@contextmenu.prevent.native="openMenu(item, $event)">
@@ -83,7 +83,7 @@ init()
border: 1px solid darkgray;
font-size: 13px;
margin-right: 8px;
border-radius: 4px;
border-radius: 6px;
background-color: #fff;
}

View File

@@ -35,13 +35,12 @@ export const useProcessStore = defineStore('process', () => {
}
const addProcess = (val) => {
console.log("添加节点成功")
processData.value.process.push(val)
}
const delProcess = (delNode) => {
processData.value.process.splice(processData.value.process.indexOf(delNode), 1)
console.log("删除数据")
console.log(processData.value.process)
// console.log("删除数据")
// console.log(processData.value.process)
}
const getDesign = () => {
@@ -60,7 +59,7 @@ export const useProcessStore = defineStore('process', () => {
const getFormMap = () => {
//表单映射对象
const map = new Map();
processData.value.formItems.forEach(item => itemToMap(map, item))
processData.value.formItems?.forEach(item => itemToMap(map, item))
return map
}

View File

@@ -1,20 +1,21 @@
import { defineStore } from "pinia";
import { ref } from "vue";
import { useRouter } from "vue-router";
import { useRouter, useRoute } from "vue-router";
export const useTagsView = defineStore('tagsView',()=>{
const router = useRouter()
const route = useRoute()
//已显示的标签页list
const visitedViews = ref([])
//添加标签页面
const addVisitedViews = ({path,meta}) => {
const addVisitedViews = ({path,meta,query}) => {
if(visitedViews.value.length == 0) {
visitedViews.value.push({path,meta})
visitedViews.value.push({path,meta,query})
}else {
const paths = visitedViews.value.map(item => item.path)
if(paths.includes(path) == false) {
visitedViews.value.push({path,meta})
visitedViews.value.push({path,meta,query})
}
}
}
@@ -32,17 +33,31 @@ export const useTagsView = defineStore('tagsView',()=>{
toLastTagView(visitedViews)
}
//删除当前标签页并跳转到指定路由
const delViewAndGoView = (path) => {
visitedViews.value.forEach((item,index)=>{
if(item.path == route.path) {
visitedViews.value.splice(index,1)
}
})
router.push(path)
}
//删除其他标签页
const delOtherVisitedViews = ({path,meta}) => {
const delOtherVisitedViews = ({path,meta,query}) => {
visitedViews.value = []
visitedViews.value.push({path,meta})
visitedViews.value.push({path,meta,query})
toLastTagView(visitedViews)
}
//路由到末尾标签页
const toLastTagView = (view) => {
const lastTagView = view.value.slice(-1)[0]
router.push(lastTagView.path)
router.push({path: lastTagView.path, query: lastTagView.query})
}
const removeAllTagView = () => {
visitedViews.value.length = 0
}
return {
@@ -50,5 +65,7 @@ export const useTagsView = defineStore('tagsView',()=>{
addVisitedViews,
delVisitedViews,
delOtherVisitedViews,
delViewAndGoView,
removeAllTagView
}
})

View File

@@ -32,8 +32,14 @@ serveice.interceptors.response.use(response=>{
return response.data
},error=>{
let response = error.response
if (!response) {
return Promise.reject()
}
const status = response.status;
switch(status) {
if (!status) {
return Promise.reject()
}
switch (status) {
case 401:
ElMessageBox.confirm('登录状态已过期,请重新登录','系统提示',{
confirmButtonText: '重新登录',

View File

@@ -6,7 +6,7 @@
:rules="rules"
label-width="70px"
>
<h3>工单管理系统</h3>
<h3>智能语音服务系统</h3>
<el-form-item prop="username" label="账号">
<el-input v-model="loginForm.username" :prefix-icon="User" ></el-input>
</el-form-item>

View File

@@ -1,318 +1,76 @@
<template>
<div class="layout">
<div class="layout-left" style="width: 20%;border:none;">
<el-form :model="queryDept" @submit.prevent>
<el-form-item prop="dictType">
<el-input v-model="queryDept.deptName" placeholder="请输入部门名称" :prefix-icon="Search"
clearable @clear="handleSearchDept" @input="handleSearchDept"></el-input>
</el-form-item>
</el-form>
<div class="scrollbar-user scrollbar-dict">
<el-tree :data="deptList" :props="deptProps" empty-text="" node-key="value" default-expand-all
highlight-current :expand-on-click-node="false"
@node-click="handle">
<template #default="{ node, data }">
{{ node.label }}
</template>
</el-tree>
</div>
</div>
<div class="layout-right">
<el-form :model="queryParams" class="query-form" inline ref="userForm">
<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 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 label="创建时间" prop="dateValue">
<el-config-provider>
<el-date-picker
v-model="dateValue"
type="datetimerange"
:shortcuts="shortcuts"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="YYYY-MM-DD HH:mm:ss"
/>
</el-config-provider>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="getList" :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>
</div>
<div class="table">
<el-table
:data="list"
row-key="userId"
:lazy="true"
v-loading="loading"
:header-cell-style="{'background':'#f5f5f8'}"
v-tabh
>
<el-table-column label="序号" type="index" align="center" width="60"/>
<!-- <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="deptName" 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="handleEdit(scope.row.userId)" 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"/>
<el-dialog v-model="isVisited" :title="title" width="700px">
<el-form :model="form" ref="formInstance" label-width="80px" :rules="rules">
<el-row>
<el-col :span="12">
<el-form-item label="用户名称" prop="userName">
<el-input v-model="form.userName" placeholder="请输入用户名称"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="用户昵称" prop="nickName">
<el-input v-model="form.nickName" placeholder="请输入用户昵称"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="用户性别" prop="sex">
<el-select v-model="form.sex"
placeholder="请选择用户性别"
style="width: 250px" filterable>
<el-option
v-for="item in cacheStore.getDict('user_sex')"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="用户密码" prop="password">
<el-input
v-model="form.password"
type="password"
placeholder="请输入密码"
show-password
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="归属部门" prop="deptId">
<el-tree-select
ref="treeSelect"
v-model="form.deptId"
:data="deptList"
:props="deptProps"
value-key="value"
check-strictly
:render-after-expand="false"
@node-click=""
style="width: 250px"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="手机号码" prop="phoneNumber">
<el-input v-model="form.phoneNumber" 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="user in cacheStore.getDict('normal_disable')" :key="user.value"
:label="user.value">
{{ user.label }}
</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="岗位" prop="postIds">
<el-select
v-model="form.postIds"
multiple
placeholder="请选择岗位"
style="width: 250px" filterable
>
<div v-if="title=='新增用户'">
<el-option
v-for="item in postList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</div>
<div v-else>
<el-option
v-for="item in form.postList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</div>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="角色" prop="roleIds">
<el-select v-model="form.roleIds"
multiple
placeholder="请选择角色"
style="width: 250px" filterable>
<div v-if="title=='新增用户'">
<el-option
v-for="item in roleList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</div>
<div v-else>
<el-option
v-for="item in form.roleList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</div>
</el-select>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="备注" prop="remark">
<el-input
type="textarea"
:rows="3"
maxlength="255"
show-word-limit
placeholder="请输入内容"
v-model="form.remark">
</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>
</div>
<fvSearchForm :searchConfig="searchConfig" @search="search"></fvSearchForm>
<fvTable ref="tableIns" :tableConfig="tableConfig" @headBtnClick="headBtnClick"></fvTable>
<fvFormDialog v-if="showAddOrEditUserDialog" ref="formDialogRef" :title="title" :form-schema="formSchema" :form-rules="formRules" @dialogCancel="handleCancel" @dialogSubmit="handleSubmit"></fvFormDialog>
</template>
<script setup>
import {Search, Refresh, Plus, Edit, Delete} from "@element-plus/icons-vue";
import {defineProps} from "vue";
import {getRoleOption} from "@/api/role/role";
import {getUserList, getUserDetail, addUser, editUser,deleteUser} from "@/api/user/user";
import {getDeptList} from "@/api/dept/dept";
import {getSelectOption} from "@/api/post/post";
import {ElMessage, ElMessageBox} from "element-plus";
import {getUserDetail, addUser, editUser} from "@/api/user/user";
import {ElMessage} from "element-plus";
import {useCacheStore} from "@/stores/cache.js";
import Tag from '@/components/Tag.vue'
import Paging from "@/components/pagination/index.vue";
const cacheStore = useCacheStore();
//查询参数
const queryDept = reactive({
deptName: ""
});
const queryParams = reactive({
deptId: "",
userName: "",
phoneNumber: "",
state: "",
startTime: "",
endTime: ""
});
const userForm = ref();
const list = ref([]);
const total = ref([]);
//页面信息
const pageInfo = reactive({
pageNum: 1,
pageSize: 10
});
const loading = ref(true);
const treeSelect = ref();
const postList = ref([]);
const roleList = ref([]);
const deptList = ref([]);
const deptProps = reactive({
value: "deptId",
label: "deptName"
});
const props = defineProps({
value: {
type: Array,
default: () => {
return [];
}
}
});
const form = ref({
// user: [],
// postIds: "",
// roleIds: "",
roleList: [],
postList: []
});
const formInstance = ref();
const isVisited = ref(false);
const title = ref("");
const rules = reactive({
const tableIns = ref()
const formDialogRef = ref()
const showAddOrEditUserDialog = ref(false)
const searchConfig = reactive([
{
label: '用户名称',
prop: 'requirementName',
props: {
placeholder: '请输入用户名称查询',
clearable: true,
checkStrictly: true
},
component: 'el-input',
},
{
label: '手机号码',
prop: 'requirementName',
props: {
placeholder: '请输入手机号码查询',
clearable: true,
checkStrictly: true
},
component: 'el-input',
},
])
const tableConfig = reactive({
columns: [
{
prop: 'index',
type: 'index',
label: '序号',
align: 'center',
width: 80,
},
{
prop: 'userName',
label: '登录账号',
align: 'center'
},
{
prop: 'nickName',
label: '用户姓名',
align: 'center'
},
{
prop: 'phoneNumber',
label: '手机号码',
align: 'center'
},
{
prop: 'workOrderTime',
label: '电子邮箱',
align: 'center',
},
],
api: '/user',
params: {},
btns: [
{name: '导入', key: 'add', type: 'primary'},
]
})
const formRules = reactive({
nickName: [
{required: true, message: "请输入用户昵称", trigger: "blur"}
],
@@ -323,199 +81,128 @@ const rules = reactive({
{required: true, message: "请输入用户密码", trigger: "blur"}
]
});
const dateValue = ref();
const shortcuts = [
const formSchema = computed(() => {
return [
{
text: "上周",
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
return [start, end];
label: '登录账号',
prop: 'userName',
component: 'el-input',
colProps: {
span: 24
},
props: {
placeholder: '请输入登录账号',
clearable: true,
// type: 'textarea',
// rows: 3
}
},
{
text: "上月",
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
return [start, end];
label: '用户姓名',
prop: 'nickName',
component: 'el-input',
colProps: {
span: 24
},
props: {
placeholder: '请输入用户姓名',
clearable: true,
}
},
{
text: "三月前",
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
return [start, end];
label: '用户性别',
prop: 'sex',
component: 'el-input',
colProps: {
span: 24
},
props: {
placeholder: '请输入用户性别',
clearable: true,
}
},
{
label: '用户密码',
prop: 'password',
component: 'el-input',
colProps: {
span: 24
},
props: {
placeholder: '请输入用户密码',
clearable: true,
},
},
{
label: '手机号码',
prop: 'phoneNumber',
component: 'el-input',
colProps: {
span: 24
},
props: {
placeholder: '请输入手机号码',
clearable: true,
},
},
{
label: '电子邮箱',
prop: 'email',
component: 'el-input',
colProps: {
span: 24
},
props: {
placeholder: '请输入电子邮箱',
clearable: true,
},
},
]
})
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 headBtnClick = (key) => {
switch (key) {
case 'add':
handleAdd()
break;
}
];
//获取部门数据
const getDepartmentList = async () => {
let params = {
...queryDept
};
//获取部门信息
getDeptList(params).then(res => {
if (res.code === 1000) {
deptList.value = res.data;
} else {
ElMessage.error(res.msg);
}
});
};
//获取用户数据
const getList = async () => {
let params = {
...queryParams,
...pageInfo
};
const date = dateValue.value
if (date !== undefined && date !== null) {
params.startTime = date[0]
params.endTime = date[1]
}
loading.value = true
getUserList(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);
}
});
};
const getRole = () => {
getRoleOption().then(res => {
if (res.code === 1000) {
roleList.value = res.data;
}
});
};
const getPost= async () => {
getSelectOption().then(res => {
if (res.code === 1000) {
postList.value = res.data;
}
})
}
//搜索部门
const handleSearchDept = () => {
getDepartmentList();
};
//点击部门节点筛选数据
const handle = (node) => {
queryParams.deptId = node.deptId;
getList();
};
//用户搜索重置
const handleReset = () => {
dateValue.value = [];
userForm.value.resetFields();
getList();
};
const restForm = () => {
form.value = {
roleList: [],
postList: [],
userName: null,
nickName: null,
deptId: null,
phoneNumber: null,
email: null,
password: null,
sex: null,
state: "1",
postIds: [],
roleIds: [],
remark: null,
};
};
//新增用户
const handleAdd = () => {
rules.password[0].required = true
restForm();
getRole();
getPost()
title.value = "新增用户";
isVisited.value = true;
nextTick(()=>{
// 清空校验
formInstance.value.clearValidate()
})
// showAddOrEditUserDialog.value = true
// formRules.value.password[0].required = true
// restForm();
// title.value = "新增用户";
// nextTick(()=>{
// // 清空校验
// formDialogRef.value.getFormInstance().clearValidate()
// formDialogRef.value.getFormInstance().resetFields()
// })
};
//修改用户
const handleEdit = (userId) => {
restForm();
getRole();
getPost()
//查看详情
getUserDetail(userId).then(res => {
if (res.code === 1000) {
rules.password[0].required = false
form.value = res.data.user;
form.value.roleIds = res.data.roleIds;
form.value.postIds = res.data.postIds;
form.value.roleList = res.data.roleList;
form.value.postList = res.data.postList;
title.value = "修改用户";
isVisited.value = true;
nextTick(()=>{
// 清空校验
formInstance.value.clearValidate()
})
}
});
};
//删除功能
const handleDelete = (userId) => {
// ElMessageBox.confirm(`确认删除用户名称为${row.userName}的数据吗?`, "系统提示", {
// confirmButtonText: "确定",
// cancelButtonText: "取消",
// type: "warning"
// }).then(() => {
deleteUser(userId).then(res => {
if (res.code === 1000) {
ElMessage.success(res.msg);
getList();
} else {
ElMessage.error(res.msg);
}
});
// });
};
//取消
const handleCancel = () => {
restForm();
isVisited.value = false;
// restForm();
showAddOrEditUserDialog.value = false;
};
//提交
const handleSubmit = async (formInstance) => {
if (!formInstance) return;
formInstance.validate(async (valid) => {
if (!valid) return;
if (title.value === "新增用户") {
addUser(form.value).then(res => {
addUser(userForm.value).then(res => {
if (res.code === 1000) {
ElMessage.success(res.msg);
getList();
isVisited.value = false;
} else {
ElMessage.error(res.msg);
}
});
} else {
editUser(form.value).then(res => {
if (res.code === 1000) {
ElMessage.success(res.msg);
getList();
isVisited.value = false;
} else {
ElMessage.error(res.msg);
@@ -525,17 +212,22 @@ const handleSubmit = async (formInstance) => {
})
}
//切换每页显示条数
const handleSizeChange = (val) => {
pageInfo.pageSize = val;
getList();
};
const userForm = ref({});
const formInstance = ref();
const isVisited = ref(false);
const title = ref("");
// const restForm = () => {
// userForm.value = {
// userName: null,
// nickName: null,
// phoneNumber: null,
// email: null,
// password: null,
// sex: null,
// state: "1",
// };
// };
//点击页码进行分页功能
const handleCurrentChange = (val) => {
pageInfo.pageNum = val;
getList();
};
getDepartmentList();
getList();
</script>