Web/admin-sjzx
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

安装 luckyexcel 修改菜单文件位置

Browse Source
This commit is contained in:
GGJ
2024-03-26 16:34:58 +08:00
parent cc1edc0e96
commit 668fbed3ef
28 changed files with 5311 additions and 229 deletions
Download Patch File Download Diff File Expand all files Collapse all files

188
src/views/system/auth/department/index.vue Normal file
View File

@@ -0,0 +1,188 @@
<template>
<div class="default-main">
<div class="custom-table-header">
<div class="title">部门列表</div>
<el-input
v-model="tableStore.table.params.searchValue"
style="width: 240px"
placeholder="请输入部门名称"
class="ml10"
clearable
@input="search"
/>
</div>
<Table />
<PopupForm ref="popupFormRef" @init="tableStore.index()"></PopupForm>
<PopupPoint ref="popupPointRef"></PopupPoint>
</div>
</template>
<script setup lang="ts">
import { ref, nextTick, inject, provide, watch, onMounted } from 'vue'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import PopupForm from './popupForm.vue'
import PopupPoint from './popupPoint.vue'
import { deleteDept, selectPid } from '@/api/user-boot/dept'
import { ElMessage, ElMessageBox } from 'element-plus'
defineOptions({
name: 'auth/department'
})
const popupFormRef = ref()
const popupPointRef = ref()
let originData: any[]
const tableStore = new TableStore({
publicHeight: 60,
showPage: false,
url: '/user-boot/dept/deptTree',
method: 'POST',
column: [
{
title: '名称',
field: 'name',
align: 'left',
treeNode: true
},
{ title: '区域', field: 'areaName', align: 'center' },
{
title: '类型',
field: 'type',
align: 'center',
render: 'renderFormatter',
renderFormatter: data => {
const typeArr = ['非自定义', 'web自定义', 'App自定义', 'Web测试']
return typeArr[data.type] || '/'
}
},
{
title: '描述',
field: 'remark',
align: 'center',
render: 'renderFormatter',
renderFormatter: data => {
return data.remark || '/'
}
},
{
title: '状态',
field: 'state',
align: 'center',
render: 'renderFormatter',
renderFormatter: data => {
return data.state === 1 ? '正常' : '删除'
}
},
{
title: '操作',
align: 'center',
width: '180',
render: 'buttons',
buttons: [
{
name: 'edit',
text: '新增',
type: 'primary',
icon: 'el-icon-Plus',
render: 'basicButton',
click: row => {
popupFormRef.value.open('新增部门', {
pid: row.id,
pArea: row.area
})
}
},
{
name: 'edit',
text: '编辑',
type: 'primary',
icon: 'el-icon-EditPen',
render: 'basicButton',
click: row => {
popupFormRef.value.open('编辑部门', {
...row
})
}
},
{
name: 'del',
text: '删除',
type: 'danger',
icon: 'el-icon-Delete',
render: 'basicButton',
click: (row: any) => {
if (row.children.length > 0) {
ElMessageBox.confirm('该部门有子部门，是否确认删除', '提示', {
confirmButtonText: '确认删除',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deleteDept([row.id]).then(response => {
ElMessage.success('删除成功')
tableStore.index()
})
})
} else {
deleteDept([row.id]).then(response => {
ElMessage.success('删除成功')
tableStore.index()
})
}
}
},
{
name: 'edit',
text: '绑定监测点',
type: 'primary',
icon: 'el-icon-Plus',
render: 'basicButton',
disabled: (row: any) => {
return row.children.length > 0
},
click: row => {
popupPointRef.value.open( row)
}
}
]
}
],
loadCallback: () => {
originData = JSON.parse(JSON.stringify(tableStore.table.data))
tableStore.table.data.forEach((item: any) => {
item.stateName = item.state === 1 ? '正常' : '删除'
item.remark = item.remark || '/'
})
nextTick(() => {
tableStore.table.ref?.setAllTreeExpand(true)
})
}
})
provide('tableStore', tableStore)
onMounted(() => {
tableStore.index()
})
const addMenu = () => {}
const search = () => {
tableStore.table.data = filterData(JSON.parse(JSON.stringify(originData)))
nextTick(() => {
tableStore.table.ref?.setAllTreeExpand(true)
})
}
// 过滤
const filterData = (arr: treeData[]): treeData[] => {
if (!tableStore.table.params.searchValue) {
return arr
}
return arr.filter((item: treeData) => {
if (item.name!.includes(tableStore.table.params.searchValue)) {
return true
} else if (item.children?.length > 0) {
item.children = filterData(item.children)
return item.children.length > 0
} else {
return false
}
})
}
</script>

148
src/views/system/auth/department/popupForm.vue Normal file
View File

@@ -0,0 +1,148 @@
<template>
<el-dialog class="cn-operate-dialog" v-model="dialogVisible" :title="title">
<el-scrollbar>
<el-form :inline="false" :model="form" label-width="120px" :rules="rules" ref="formRef">
<el-form-item label="部门编号:" prop="code">
<el-input v-model="form.code" placeholder="请输入部门编号"></el-input>
</el-form-item>
<el-form-item class="top" label="部门名称:" prop="name">
<el-input v-model="form.name" placeholder="请输入部门名称"></el-input>
</el-form-item>
<el-form-item class="top" label="部门类型:" prop="type">
<el-select v-model="form.type" placeholder="选择部门类型" style="width: 100%">
<el-option
v-for="item in customDeptOption"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item class="top" label="子类型:" prop="specialType">
<el-select v-model="form.specialType" placeholder="选择子类型" style="width: 100%">
<el-option
v-for="item in ziDeptOption"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item class="top" label="部门区域:" prop="area">
<el-select v-model="form.area" placeholder="选择子类型" style="width: 100%">
<el-option
v-for="item in areaOption"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item class="top" label="部门排序:" prop="sort">
<el-input v-model="form.sort" placeholder="请输入部门排序"></el-input>
</el-form-item>
<el-form-item class="top" label="部门描述:">
<el-input v-model="form.remark" :rows="2" type="textarea" placeholder="请输入部门描述"></el-input>
</el-form-item>
</el-form>
</el-scrollbar>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="submit">确认</el-button>
</span>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import { ref, inject } from 'vue'
import { reactive } from 'vue'
import { ElMessage } from 'element-plus'
import TableStore from '@/utils/tableStore' // 若不是列表页面弹框可删除
import { getAreaTree, getPidAreaByAreaId,addDept,updateDept } from '@/api/user-boot/dept'
const dialogVisible = ref(false)
const title = ref('')
const tableStore = inject('tableStore') as TableStore
const formRef = ref()
// 注意不要和表单ref的命名冲突
const form = reactive<anyObj>({
area: '',
name: '',
pid: -1,
remark: '',
sort: 100,
type: 0,
code: '',
specialType: 0,
id:''
})
const originForm = { ...form }
const rules = {
parentName: [{ required: true, message: '请选择父节点', trigger: 'blur' }],
code: [{ required: true, message: '请输入部门编号', trigger: 'blur' }],
name: [{ required: true, message: '请输选择部门名称', trigger: 'blur' }],
type: [{ required: true, message: '请输选择部门类型', trigger: 'blur' }],
specialType: [{ required: true, message: '请输选择部门子类型', trigger: 'blur' }],
sort: [{ required: true, message: '请输入部门排序', trigger: 'blur' }],
area: [{ required: true, message: '请选择部门区域', trigger: 'blur' }]
}
const customDeptOption = [
{ value: 0, label: '非自定义' },
{ value: 1, label: 'web自定义' },
{ value: 2, label: 'App自定义' },
{ value: 3, label: 'web测试' }
]
const ziDeptOption = [
{ label: '非本部', value: 0 },
{ label: '本部', value: 1 }
]
const areaOption = ref<any>([])
const open = (text: string, data: anyObj) => {
console.log(data)
title.value = text
dialogVisible.value = true
if (data.id) {
// 表单赋值
for (let key in form) {
form[key] = data[key]
}
getPidAreaByAreaId({
id: data.area,
type: 0
}).then((res: any) => {
areaOption.value = res.data
})
} else {
// 在此处恢复默认表单
for (let key in form) {
form[key] = originForm[key]
if (data[key]) {
form[key] = data[key]
}
}
getAreaTree({
id: data.pArea,
type: 0
}).then((res: any) => {
areaOption.value = res.data
})
}
}
const submit = () => {
formRef.value.validate(async (valid: boolean) => {
if (valid) {
if (form.id) {
await updateDept(form)
} else {
await addDept(form)
}
ElMessage.success('保存成功')
tableStore.index()
dialogVisible.value = false
}
})
}
defineExpose({ open })
</script>

262
src/views/system/auth/department/popupPoint.vue Normal file
View File

@@ -0,0 +1,262 @@
<template>
<el-dialog
class="cn-operate-dialog statistical-type-binding"
v-model="dialogVisible"
title="绑定监测点"
style="width: 1040px"
>
<el-scrollbar style="padding-right: 0" v-loading="loading">
<div class="box">
<div class="box-left">
<el-tree
ref="leftTree"
style="width: 100%; height: 100%"
:props="props"
:data="fromDataValue"
:default-expanded-keys="leftDefaultExpandedKeys"
show-checkbox
node-key="id"
@check="leftCheckChange"
/>
</div>
<div class="box-center">
<el-button
style="margin-left: 0"
class="mt20"
type="primary"
icon="el-icon-ArrowRight"
@click="bind"
:disabled="fromData.length === 0"
>
绑定
</el-button>
<el-button
style="margin-left: 0"
icon="el-icon-ArrowLeft"
class="mt20"
type="primary"
@click="unbind"
:disabled="toData.length === 0"
>
解绑
</el-button>
</div>
<div class="box-right">
<el-tree
ref="rightTree"
style="width: 100%; height: 100%"
:props="props"
:data="toDataValue"
:default-expanded-keys="rightDefaultExpandedKeys"
show-checkbox
node-key="id"
@check="rightCheckChange"
/>
</div>
</div>
</el-scrollbar>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="submit">确认</el-button>
</span>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { CascaderValue, ElMessage } from 'element-plus'
import { getDeptBindDeptLineTree } from '@/api/user-boot/terminalTree'
import { deptBindLine } from '@/api/user-boot/deptLine'
defineOptions({
name: 'govern/setting/statisticalType/binding'
})
const pid = ref('')
const binData = reactive({
deptId: '',
deptType: '',
id: '',
type: 0
})
const dialogVisible = ref(false)
const loading = ref(false)
const leftTree = ref()
const rightTree = ref()
const fromData = ref<treeData[]>([])
const fromDataValue = ref<treeData[]>([])
const leftDefaultExpandedKeys = ref<string[]>([])
const toData = ref<treeData[]>([])
const toDataValue = ref<treeData[]>([])
const rightDefaultExpandedKeys = ref<string[]>([])
const props = {
label: 'name',
value: 'id',
children: 'children'
}
const getExpandedKeys = (originArr: treeData[]) => {
let arr: string[] = []
const call = (originArr: treeData[]) => {
originArr.forEach((item: treeData) => {
if (item.level === 6) {
arr.push(item.id as string)
} else {
call(item.children)
}
})
}
call(originArr)
return arr
}
const init = () => {
loading.value = true
getDeptBindDeptLineTree(binData).then(res => {
fromData.value = []
fromDataValue.value = res.data[0]?.nothingBindTree || []
toData.value = []
toDataValue.value = res.data[0]?.myselfBindTree || []
leftDefaultExpandedKeys.value = getExpandedKeys(fromDataValue.value)
rightDefaultExpandedKeys.value = getExpandedKeys(toDataValue.value)
loading.value = false
})
}
// 左侧源数据选中事件
const leftCheckChange = (e: any) => {
fromData.value = leftTree.value.getCheckedNodes().filter((item: any) => {
return item.level === 6
})
}
// 右侧目标数据选中事件
const rightCheckChange = (e: any) => {
toData.value = rightTree.value.getCheckedNodes().filter((item: any) => {
return item.level === 6
})
}
// 定义一个函数来创建映射
const createMapping = (data: treeData[], key: 'pid' | 'id') => {
const map = new Map<string, treeData[]>()
data.forEach((item: treeData) => {
const list = map.get(item[key]) || []
list.push(item)
map.set(item[key], list)
})
return map
}
// 定义一个函数来添加子节点
const addChildren = (data: treeData[], map: Map<string, treeData[]>) => {
data.forEach((item: treeData) => {
if (item.level === 3) {
let children =
map.get(item.id as string)?.filter((child: treeData) => {
return !item.children.find(child2 => (child.id as string) === child2.id)
}) || []
item.children.push(...children)
} else {
addChildren(item.children, map)
}
})
}
// 定义一个函数来过滤子节点
const filterChildren = (data: treeData[], map: Map<string, treeData[]>) => {
data.forEach((item: treeData) => {
if (item.level === 3) {
const childrenIds = map.get(item.id as string)?.map(child => child.id as string) || []
item.children = item.children.filter(child => !childrenIds.includes(child.id as string))
} else {
filterChildren(item.children, map)
}
})
}
const bind = () => {
const map = createMapping(fromData.value, 'pid')
filterChildren(fromDataValue.value, map)
addChildren(toDataValue.value, map)
rightDefaultExpandedKeys.value = getExpandedKeys(toDataValue.value)
fromData.value = []
leftTree.value.setCheckedKeys([])
}
const unbind = () => {
const map = createMapping(toData.value, 'pid')
filterChildren(toDataValue.value, map)
addChildren(fromDataValue.value, map)
toData.value = []
rightTree.value.setCheckedKeys([])
leftDefaultExpandedKeys.value = getExpandedKeys(fromDataValue.value)
}
const open = (row: any) => {
console.log(row)
dialogVisible.value = true
binData.deptId = row.id
binData.deptType = row.type
binData.id = row.area
init()
}
const submit = async () => {
deptBindLine({
id: binData.deptId,
ids: getExpandedKeys(toDataValue.value)
}).then(() => {
ElMessage.success('绑定成功')
dialogVisible.value = false
})
}
defineExpose({ open })
</script>
<style lang="scss">
.statistical-type-binding-button-group {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
.statistical-type-binding {
.box {
display: flex;
width: 1000px;
height: calc(60vh - 95px);
margin: 0 auto;
text-align: left;
.box-center {
display: flex;
align-items: center;
width: 100px;
padding-top: 20px;
margin: 0 20px;
flex-direction: column;
}
.box-right,
.box-left {
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
flex: 1;
.el-cascader-menu {
padding-right: 0;
.el-scrollbar__wrap {
height: 100%;
}
}
.el-cascader-panel {
height: 100%;
.el-cascader-menu__list {
height: 100% !important;
}
}
}
}
}
</style>