346 lines
11 KiB
Vue
346 lines
11 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<div class="area-left">
|
|
<div class="al-top">
|
|
<el-divider direction="vertical" />
|
|
<span>区域架构</span>
|
|
</div>
|
|
<div class="al-tree">
|
|
<div class="boxShadow" @click="active = list[0].id; crud.title = '区域'" />
|
|
<el-tree default-expand-all :data="list" :indent="20" icon-class="#"
|
|
:props="{ children: 'children', label: 'label' }" @node-click="handleNodeClick">
|
|
<template slot-scope="{node,data}">
|
|
<div style="width:100%;" class="treeData"
|
|
:class="{ activeBlue: active === data.id, activeIndent: node.level === 3 || node.level === 4 }"
|
|
@click="handleTool(node, data)">
|
|
<div v-if="node.level !== 1" class="dashedBox">
|
|
<div class="firstBox" />
|
|
<div :class="{ dashshow: data.last }" />
|
|
</div>
|
|
<div v-if="node.level !== 3">
|
|
<svg-icon v-if="active !== data.id" style="width: 1rem;height: 1rem;opacity: 0.8;"
|
|
:icon-class="node.level === 1 ? 'gongsi' : 'tree-table'" />
|
|
<svg-icon v-else style="width: 1rem;height: 1rem;opacity: 0.8;"
|
|
:icon-class="node.level === 1 ? 'gongsilanse' : 'tree-table'" />
|
|
</div>
|
|
<div :title="data.label">{{ data.label }}</div>
|
|
</div>
|
|
</template>
|
|
</el-tree>
|
|
</div>
|
|
</div>
|
|
<div class="area-right">
|
|
<!--工具栏-->
|
|
<div class="head-container">
|
|
<div>
|
|
<el-button v-permission="permission.add" class="filter-item" size="mini" type="primary"
|
|
icon="el-icon-plus" @click="crud.toAdd">
|
|
添加{{ crud.title }}
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
<!--表单渲染-->
|
|
<el-dialog append-to-body :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0"
|
|
:title="crud.status.title" width="30%">
|
|
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
|
|
<el-row :gutter="10">
|
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
|
<el-form-item :label="`${crud.title}名称`" prop="name">
|
|
<el-input v-model="form.name" :placeholder="`请输入${crud.title}名称`"/>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
<div slot="footer" class="dialog-footer" style="margin-top: -30px;">
|
|
<el-button type="text" @click="crud.cancelCU">取消</el-button>
|
|
<el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">新增</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
<!--表格渲染-->
|
|
<el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;">
|
|
<el-table-column :show-overflow-tooltip="true" prop="name" :label="`${crud.title}名称`" />
|
|
<el-table-column :show-overflow-tooltip="true" prop="num" :label="`${crud.title === '区域' ? '景区' : '人员'}数量`" />
|
|
<el-table-column v-if="checkPer(['admin', 'area:edit', 'area:del'])" label="操作" width="115" align="center"
|
|
fixed="right">
|
|
<template slot-scope="scope">
|
|
<udOperation :data="scope.row" :permission="permission" />
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<!--分页组件-->
|
|
<pagination />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import crudArea from '@/api/system/area'
|
|
import udOperation from '@crud/UD.operation'
|
|
import pagination from '@crud/Pagination'
|
|
import CRUD, { presenter, header, form, crud } from '@crud/crud'
|
|
const defaultForm = { id: null, name: null, type: 'area' }
|
|
export default {
|
|
name: 'Area',
|
|
components: { udOperation, pagination },
|
|
cruds() {
|
|
return CRUD({ title: '区域', url: '/aerocraftAdminApi/emArea', crudMethod: { ...crudArea }, optShow: { add: true } })
|
|
},
|
|
mixins: [presenter(), header(), form(defaultForm), crud()],
|
|
data() {
|
|
return {
|
|
permission: {
|
|
add: ['admin', 'area:add'],
|
|
edit: ['admin', 'area:edit'],
|
|
del: ['admin', 'area:del']
|
|
},
|
|
active: '',
|
|
rules: {
|
|
'name': [
|
|
{ required: true, message: `名称不能为空`, trigger: 'blur' },
|
|
],
|
|
},
|
|
list: [],
|
|
// {
|
|
// id: 1,
|
|
// label: '爱尚云',
|
|
// children: [{
|
|
// id: 2,
|
|
// label: '北京区域',
|
|
// children: []
|
|
// },
|
|
// {
|
|
// id: 3,
|
|
// label: '上海区域',
|
|
// children: []
|
|
// },
|
|
// {
|
|
// id: 4,
|
|
// label: '深圳区域',
|
|
// children: []
|
|
// },
|
|
// {
|
|
// id: 5,
|
|
// label: '广州区域',
|
|
// children: [{
|
|
// id: 6,
|
|
// label: '白云山景区',
|
|
// children: []
|
|
// }, {
|
|
// id: 7,
|
|
// label: '白水寨景区',
|
|
// children: []
|
|
// }, {
|
|
// id: 8,
|
|
// label: '越秀公园景区',
|
|
// children: []
|
|
// }]
|
|
// }]
|
|
// }],
|
|
parentId: '',
|
|
parentName: '',
|
|
parentArr: []
|
|
}
|
|
},
|
|
async created() {
|
|
const id = await this.getTree()
|
|
},
|
|
methods: {
|
|
// 节点点击
|
|
handleNodeClick(data) {
|
|
console.log(data)
|
|
},
|
|
handleTool(node, data) {
|
|
const id = node.level === 4 ? data.parentId : data.id
|
|
this.active = data.id
|
|
console.log(node, 'node', data)
|
|
this.$set(this, 'parentArr', [{
|
|
parentId: data.parentId,
|
|
parentName: data.parentName
|
|
}])
|
|
const type = node.level === 1
|
|
this.crud.title = type ? '区域' : '景区'
|
|
this.form.type = type ? 'area' : 'spot'
|
|
// console.log(this.parentArr, 'parentArr')
|
|
// this.getList(id)
|
|
},
|
|
[CRUD.HOOK.beforeRefresh](crud, form) {
|
|
crud.query.current = crud.page.page;
|
|
},
|
|
getTree() {
|
|
return new Promise(resolve => {
|
|
// tree().then(res => {
|
|
// console.log(res)
|
|
const res = this.list
|
|
const setLast = (data, parentId, parentName, level) => {
|
|
if (data === null) return
|
|
return data.map((item, key) => {
|
|
if (data.length - 1 === key) {
|
|
return {
|
|
last: true,
|
|
...item,
|
|
children: setLast(item.children, item.id, item.label, level + 1),
|
|
parentId,
|
|
parentName,
|
|
level
|
|
}
|
|
} else {
|
|
return {
|
|
last: false,
|
|
...item,
|
|
children: setLast(item.children, item.id, item.label, level + 1),
|
|
parentId,
|
|
parentName,
|
|
level
|
|
}
|
|
}
|
|
})
|
|
}
|
|
console.log(res)
|
|
|
|
this.list = setLast(res, '', '', 1)
|
|
this.active = this.active || this.list[0].id
|
|
let arr = []
|
|
const setSelectList = (data) => {
|
|
data.forEach((item) => {
|
|
arr = [...arr, item]
|
|
if (item.children) {
|
|
setSelectList(item.children)
|
|
}
|
|
})
|
|
}
|
|
setSelectList(this.list)
|
|
this.selectList = arr.filter(item => item.level !== 4)
|
|
console.log(this.list, 'this.list', arr)
|
|
resolve(this.active)
|
|
})
|
|
// })
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.boxShadow {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 40px;
|
|
z-index: 1000;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.app-container {
|
|
background-color: #f0f2f5;
|
|
display: flex;
|
|
align-items: stretch;
|
|
gap: 20px;
|
|
min-height: 90vh;
|
|
|
|
&>>>.el-tree-node__label {
|
|
font-size: 16px !important;
|
|
}
|
|
|
|
.area-left,
|
|
.area-right {
|
|
background: #FFFFFF;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.area-left {
|
|
width: 244px;
|
|
padding: 20px;
|
|
|
|
.al-top {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
color: #333333;
|
|
|
|
&::v-deep .el-divider--vertical {
|
|
width: 4.5px;
|
|
height: 23px;
|
|
background-color: #4f5de6;
|
|
margin-left: auto;
|
|
}
|
|
}
|
|
|
|
.al-tree {
|
|
margin-top: 20px;
|
|
position: relative;
|
|
}
|
|
}
|
|
|
|
.area-right {
|
|
padding: 33px 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
flex: 1;
|
|
}
|
|
}
|
|
|
|
.area-left>>>.el-tree-node__content:hover,
|
|
.area-left>>>.el-tree-node__content:focus {
|
|
background: #EDEEFC;
|
|
/* color:#4f5de6; */
|
|
}
|
|
|
|
.area-left>>>.el-tree-node__content {
|
|
position: relative;
|
|
/* padding:12px 9px; */
|
|
height: 40px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.treeData {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 14px;
|
|
gap: 5px;
|
|
}
|
|
|
|
.activeBlue {
|
|
color: #4f5de6;
|
|
/* background: #EDEEFC;
|
|
width:100%;
|
|
height:40px;
|
|
border-radius: 5px; */
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.activeBlue:after {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
z-index: 10;
|
|
display: block;
|
|
content: '';
|
|
background: #4f6de61a;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.dashedBox {
|
|
height: 40px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.dashedBox>div {
|
|
flex: 1;
|
|
width: 15px;
|
|
border-left: 1px dashed #ddd;
|
|
}
|
|
|
|
.dashedBox .firstBox {
|
|
border-bottom: 1px dashed #ddd;
|
|
}
|
|
|
|
.dashshow {
|
|
border: none !important;
|
|
}
|
|
|
|
.activeIndent {
|
|
padding-left: 10px;
|
|
}
|
|
</style>
|