父页面（左右结构布局，构成：表格和弹窗组件、左边目录）
<template>
<div style="height:100%;display:flex">
<div class="leftshuxing">
<left-list @cliitem="handleitem" @reload="reload" class="leftlist"></left-list>
</div>
<div class="rightdrig">
<div class="gr-datagrid-notitle">
<data-grid ref="dataGrid" @editFun="editFun" @deleteFun="deleteFun" @addFun="addFun" />
</div>
<gr-dialog :dialogVisible.sync="dialogVisible" :dialogOptions="dialogOptions" :dialogContentComponent="dialogContentComponent" :data="dialogData" :show="show" />
</div>
</div>
</template>
<script>
import dataGrid from '@/components/grid/zzqx-gn/index.vue'
import grDialog from '@/components/common/dialog/index.vue'
import leftList from '@/components/grid/zzqx-gn/leftList.vue'
import { mapState } from 'vuex'
export default {
data() {
return {
dialogOptions: {},
dialogVisible: false,
dialogContentComponent: null,
dialogData: {},
show: true
}
},
components: {
dataGrid,
grDialog,
leftList
},
computed: mapState(['chooseId', 'chooseData']),
methods: {
reload(prame) {
this.$refs.dataGrid.load(prame)
},
addFun(data) {
this.show = true
this.dialogVisible = true
this.dialogOptions = {
'700px',
title: '增加功能',
saveBtn: '提交'
}
this.dialogContentComponent = () =>
import('@/components/dialog/zzqx-gn/add-gn.vue')
},
editFun() {
if (this.chooseData.length !== 1) {
this.$message.warning('请选择一个功能菜单后操作')
return
}
this.data = this.chooseData[0]
this.show = true
this.dialogVisible = true
this.dialogOptions = {
'700px',
title: '修改功能',
saveBtn: '提交'
}
this.dialogContentComponent = () =>
import('@/components/dialog/zzqx-gn/edit-gn.vue')
},
deleteFun(node, data) {
if (!this.chooseData.length) {
this.$message({
message: '请选择数据进行操作',
type: 'warning'
})
return
}
var prame = []
this.chooseData.forEach((element) => {
prame.push({ dxid: element.dxid })
})
this.$confirm('是否确定删除该数据?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
center: true
})
.then(() => {
// 删除
this.api.post(
this,
'delete_gn',
() => {
this.$message.success('删除成功')
this.dialogVisible = false // 关闭弹窗
this.reload({ dxid: this.chooseId }) // 刷新数据
},
prame
)
})
.catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
})
})
},
handleitem(val) {
this.$refs.dataGrid.load({ dxid: val.dxid })
}
}
}
</script>
<style lang="scss">
.general-wrap .rightdrig .gr-datagrid-notitle {
border-bottom: none;
}
.gr-datagrid .gr-tag ::v-deep .el-collapse {
margin: 0 22px 0 18px !important;
}
.leftshuxing {
300px;
background: #fff;
margin: 3px 0 3px 5px;
}
.rightdrig {
overflow: hidden;
flex: 1;
.gr-datagrid-notitle {
height: 90%;
height: calc(100% - 45px);
background: #fff;
margin: 3px 0 3px 5px;
padding: 0 17px;
border-bottom: solid 1px #d9d9d9;
.gr-tag {
line-height: 46px;
.data-title {
background: url('~@/assets/data-title.png') no-repeat center left;
padding-left: 20px;
font-size: 14px;
}
.el-button--primary {
color: #fff;
background: #409eff;
border-color: #409eff;
margin-left: 15px;
}
.el-button--primary:hover {
background-color: rgb(193, 218, 243);
border-color: rgb(121, 184, 248);
color: #000;
}
}
}
}
</style>
目录
<template>
<ul :style="{height:heightstyle + 'px'}">
<li v-for="(val, ind) of list" :key=ind @click="handlecli(val, ind)" :class="[ind == itemindex ? 'chose':null]">
<span>{{val.mc}}</span>
</li>
</ul>
</template>
<script>
export default {
data() {
return {
heightstyle: 500,
list: null,
itemindex: 0
}
},
created() {
this.heightstyle = document.body.clientHeight - 100
this.load()
},
methods: {
handlecli(val, ind) {
this.$emit('cliitem', val)
this.$store.state.chooseId = this.list[ind].dxid
this.itemindex = ind
},
load(param) {
this.api.get(this, 'system_left_zxt', this.result, param)
},
result(data) {
this.list = data
this.$store.state.chooseId = this.list[0].dxid
this.handlecli(this.list[0], 0)
}
}
}
</script>
<style scoped lang="scss">
ul {
padding: 10px;
overflow-y: auto;
box-sizing: border-box;
margin-top: 3px;
}
li {
padding: 2px 4px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
}
li:hover {
color: #3083f2;
background-color: #f5f7fa;
}
li.chose {
color: #3083f2;
background-color: #f5f7fa;
}
</style>
表格
<template>
<div>
<search @searchSubmit="searchSubmit"></search> // 放在父页面一样
<div class="gr-tag">
<span class="data-title">功能管理</span>
<el-button type="primary" size="mini" @click="addFun">增加</el-button>
<el-button type="success" size="mini" @click="editFun">编辑</el-button>
<el-button type="info" size="mini" @click="jiny" v-if="chooseData[0] && chooseData[0].sfjy === '1'">禁用</el-button>
<el-button type="warning" size="mini" @click="kaiq" v-else>开启</el-button>
<el-button type="danger" size="mini" @click="deleteFun">删除</el-button>
</div>
<el-table @selection-change="changeCheckbox" ref="multipleTable" :data="tableData" stripe borders style="100%" :height="height" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" row-key="dxid">
<el-table-column type="selection" width="42"/>
<el-table-column prop="mc" label="功能名称" width="230"></el-table-column>
<el-table-column prop="icon" show-overflow-tooltip label="ICON">
<template slot-scope="scope">
{{scope.row.icon || '无'}}
</template>
</el-table-column>
<el-table-column :formatter="changeLx" prop="lx" label="类型">
</el-table-column>
<el-table-column prop="sfjy" label="是否禁用">
<template slot-scope="scope" >
<span :style="{ color: scope.row.sfjy == 0 ? 'red' : '' }">
{{scope.row.sfjy == 0 ? '是' : '否'}}
</span>
</template>
</el-table-column>
<el-table-column show-overflow-tooltip prop="ms" label="描述">
<template slot-scope="scope">
{{scope.row.ms || '无'}}
</template>
</el-table-column>
<el-table-column prop="cjsj" label="创建时间" show-overflow-tooltip></el-table-column>
</el-table>
</div>
</template>
<script>
import index from './index.js'
export default index
</script>
<style lang="scss">
.el-checkbox__input.is-checked .el-checkbox__inner {
background-color: #409eff;
border-color: #409eff;
}
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
background-color: #409eff;
border-color: #409eff;
}
.el-table td {
padding: 8px 0;
}
.el-tooltip__popper {
font-size: 14px;
max- 50%;
}
</style>
表格逻辑
import { mapState } from 'vuex'
export default {
data() {
return {
dxid: '',
currentPage: 1,
pagePize: 15,
tableData: [],
height: 500,
total: 0,
canshu: {},
currentRow: []
}
},
computed: mapState(['chooseId', 'chooseData']),
created() {
this.height = document.body.clientHeight - 110
},
methods: {
changeCheckbox(val) {
this.$store.state.chooseData = val
},
addFun() {
this.$emit('addFun')
},
editFun() {
this.$emit('editFun')
},
kaiq() {
if (this.chooseData.length !== 1) {
this.$message.warning('请选择一个功能菜单后操作')
return
}
this.chooseData[0].sfjy = '1'
this.api.post(this, 'edit_gn', () => {
this.$message.success('开启成功')
}, this.chooseData[0])
},
jiny() {
if (this.chooseData.length !== 1) {
this.$message.warning('请选择一个功能菜单后操作')
return
}
this.chooseData[0].sfjy = '0'
this.api.post(this, 'edit_gn', () => {
this.$message.success('已禁用')
}, this.chooseData[0])
},
deleteFun() {
this.$emit('deleteFun')
},
load(param) {
this.dxid = param.dxid
this.$store.state.chooseData = []
this.api.get(this, 'system_zxt_menu', this.result, param)
},
result(data) {
this.total = data.length
this.tableData = this.gettree(data)
},
gettree(data) {
var dataList = data
function fn(data, sjdxid) {
var result = []
var temp
for (var i in data) {
if (data[i].sjdxid === sjdxid) {
result.push(data[i])
temp = fn(data, data[i].dxid)
if (temp.length > 0) {
data[i].children = temp
}
}
}
return result
}
return fn(dataList, this.dxid)
},
changeLx(row) {
switch (row.lx) {
case '1':
return '平台'
case '2':
return '外链'
case '3':
return '弹窗'
case '4':
return 'iframe'
case '5':
return 'map点位绘制'
case '6':
return '服务调用'
case '7':
return 'map线、面绘制'
case '8':
return 'map面绘制'
case '9':
return 'map ICON替换'
}
},
indexMethod(index) {
return this.pageInfo.limit * (this.pageInfo.start - 1) + 1 + index
}
}
}
import组件内容（分了新增和编辑操作，看情况可合并）
新增操作（两个文件差别在逻辑不同）
<template>
<el-form :model="dataForm" label-width="110px" ref="dataForm" size="mini" :rules="rules" style="margin-right: 20px" :inline="true" label-position="right">
<el-form-item label="功能名称" prop="mc">
<el-input v-model="dataForm.mc" style="200px"></el-input>
</el-form-item>
<el-form-item label="访问路径" prop="fwlj">
<el-input v-model="dataForm.fwlj" style="200px"></el-input>
</el-form-item>
<el-form-item label="是否管理" prop="mrxs">
<el-select filterable v-model="dataForm.mrxs" placeholder="是否管理" style="200px">
<el-option label="是" value="1"></el-option>
<el-option label="否" value="0"></el-option>
</el-select>
</el-form-item>
<el-form-item label="icon" prop="icon">
<el-input v-model="dataForm.ICON" style="200px"></el-input>
</el-form-item>
<el-form-item label="描述" prop="ms">
<el-input v-model="dataForm.ms" style="200px"></el-input>
</el-form-item>
<el-form-item label="显示顺序" prop="xssx">
<el-input v-model="dataForm.xssx" style="200px"></el-input>
</el-form-item>
<el-form-item label="类型" prop="lx">
<el-select v-model="dataForm.lx" placeholder="选择类型" style="200px">
<el-option v-for="li in lxlist" :key="li.id" :label="li.label" :value="li.value"></el-option>
</el-select>
</el-form-item>
<!-- <el-form-item label="是否禁用" prop="sfjy">
<el-select filterable v-model="dataForm.sfjy" placeholder="是否禁用" style="200px">
<el-option label="是" value="1"></el-option>
<el-option label="否" value="0"></el-option>
</el-select>
</el-form-item> -->
<el-form-item label="上级对象" prop="sjdxid">
<el-select v-model="dataForm.sjdxid" filterable placeholder="选择上级对象" style="200px">
<el-option label="无上级菜单" value="" key=""></el-option>
<el-option :label="item.mc" :value="item.dxid" v-for="(item,index) in funList" :key="index"></el-option>
</el-select>
</el-form-item>
</el-form>
</template>
<script>
import { mapState } from 'vuex'
export default {
data() {
return {
funList: [],
dataForm: {
mc: '',
fwlj: '',
mrxs: '',
ICON: '',
sfjy: '0',
lx: '',
xssx: '',
sjc: '{datetime}',
cjsj: '{datetime}',
dxid: '{uuid}',
sjdxid: ''
},
lxlist: [
{ label: '平台', value: '1' },
{ label: '外链', value: '2' },
{ label: '弹窗', value: '3' },
{ label: 'iframe', value: '4' },
{ label: 'map点位绘制', value: '5' },
{ label: 'map服务调用', value: '6' },
{ label: 'map线、面绘制', value: '7' },
{ label: 'map面绘制', value: '8' },
{ label: 'map ICON替换', value: '9' }
],
rules: {
mrxs: [
{ required: true, message: '请选择是否默认显示', trigger: 'blur' }
],
mc: [
{ required: true, message: '请输入功能名称', trigger: 'blur' }
],
fwlj: [
{ required: true, message: '请输入访问路径', trigger: 'blur' }
],
xssx: [
{ required: true, message: '请输入显示顺序', trigger: 'blur' }
],
lx: [
{ required: true, message: '请输入类型', trigger: 'blur' }
],
sfjy: [
{ required: true, message: '请选择是否禁用', trigger: 'blur' }
]
}
}
},
computed: mapState(['chooseData', 'chooseId']),
methods: {
result(data) {
this.funList = data
},
submitForm(that) {
this.$refs.dataForm.validate(valid => {
if (!valid) {
return false
}
this.api.post(this, 'add_gn', () => {
this.$message.success('新增成功')
that.modalClose() // 关闭弹窗
that.$parent.reload({ dxid: this.chooseId })
}, this.dataForm)
})
},
resetForm() {
this.$refs.dataForm.resetFields()
}
},
created() {
for (const key in this.data) {
this.dataForm[key] = this.data[key]
}
this.api.get(this, 'gn_list', this.result)
if (this.chooseData.length) {
this.dataForm.sjdxid = this.chooseData[0].dxid
} else {
this.dataForm.sjdxid = this.chooseId
}
}
// ###编辑操作(不同于编辑的地方)
// methods: {
// submitForm(that) {
// this.$refs.dataForm.validate(valid => {
// if (!valid) {
// return false
// }
// this.api.post(this, 'edit_gn', () => {
// this.$message.success('更新成功')
// that.modalClose() // 关闭弹窗
// that.$parent.reload({ dxid: this.chooseId })
// }, this.dataForm)
// })
// }
// },
// created() {
// this.dataForm = Object.assign({ }, this.chooseData[0])
// this.api.get(this, 'gn_list', this.result)
//
}
</script>
查询条件
index.vue
<template>
<el-form :inline="true" :model="formInline" size="mini" class="gr-form-search" @submit.native.prevent>
<el-form-item label="用户名">
<el-input clearable v-model="formInline.userName" placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item label="开始时间" prop="startTime">
<el-date-picker v-model="formInline.startTime" type="datetime" format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm" style="200px" placeholder="选择日期时间">
</el-date-picker>
</el-form-item>
<el-form-item label="结束时间" prop="endTime">
<el-date-picker v-model="formInline.endTime" type="datetime" format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm" style="200px" placeholder="选择日期时间">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button>
</el-form-item>
</el-form>
</template>
<script>
import index from './index.js'
export default index
</script>
index.js
export default {
data() {
return {
formInline: {
userName: '',
startTime: '',
endTime: ''
}
}
},
mounted() {
this.onSubmit()
},
methods: {
onSubmit() {
var data = Object.assign({}, this.formInline)
this.$emit('searchSubmit', data)
}
}
}
增加查询组件，父页面相对应增加方法
load(param) {
this.api.get(this, 'getsslist', this.result, param)
},
searchSubmit(data = this.canshu) {
if (data === undefined) data = {}
data.pageSize = this.pagePize
data.pageNum = this.currentPage
this.canshu = data
this.loading = true
this.load(data)
},
searchResult(data) {
this.load(data)
}
弹窗组成文件含index.vue、index.js、directives.js
index.vue
<template>
<el-dialog :title="dialogOptions.title" :visible.sync="dialogVisible" :width="dialogOptions.width" :before-close="handleClose" v-dialogDrag>
<component ref="childFunx" :is="dialogContentComponent" :data="data" :typeSelectData="typeSelectData" :roomSelectData="roomSelectData" :day="day"></component>
<span slot="footer" class="dialog-footer" v-if="show">
<el-button @click="resetForm()">重置</el-button>
<el-button type="primary" @click="submitForm()">{{dialogOptions.saveBtn}}</el-button>
<el-button type="danger" v-if="showDel" @click="deleteDate">删除</el-button>
</span>
</el-dialog>
</template>
<script>
import grDialog from './index.js'
export default grDialog
</script>
<style lang="scss">
.el-dialog {
border-radius: 8px;
.el-dialog__header {
border-radius: 8px 8px 0 0;
background: #4991f0;
padding: 8px 15px;
.el-dialog__headerbtn {
top: 12px;
}
.el-dialog__title {
font-size: 18px;
color: #fff;
}
.el-icon-close:before {
color: #fff;
}
}
.el-dialog__body {
padding: 25px 15px 5px 15px;
}
.el-dialog__footer {
text-align: center;
padding-top: 0;
}
.el-button--primary {
color: #fff;
background-color: #409eff;
border-color: #409eff;
}
.el-button:hover {
background-color: rgb(193, 218, 243);
border-color: rgb(121, 184, 248);
color: #000;
}
}
.el-message-box {
.el-button--primary,
.el-button--primary:active {
color: #fff;
background: #409eff;
border-color: #409eff;
}
.el-button:hover {
background-color: rgb(193, 218, 243);
border-color: rgb(121, 184, 248);
color: #000;
}
}
</style>
index.js
import './directives.js'
export default {
props: {
dialogVisible: {
type: Boolean,
default: false
},
modal: {
type: Boolean,
default: true
},
dialogOptions: {
type: Object,
default: { title: '', saveBtn: '保存', '30%', isre: false }
},
data: { type: [Object, Array], default: () => { } },
dialogContentComponent: { type: Function },
show: { type: Boolean, default: true },
showDel: { type: Boolean, default: false },
typeSelectData: { type: Array, default: () => [] },
roomSelectData: { type: Array, default: () => [] },
day: { type: String, default: '' }
},
methods: {
resetForm() {
this.$refs.childFunx.resetForm()
},
submitForm() {
this.$refs.childFunx.submitForm(this)
},
deleteDate() {
this.$refs.childFunx.deleteDate(this)
},
modalClose() {
this.$emit('update:dialogVisible', false) // 直接修改父组件的属性
},
reLoad() {
this.$parent.reload()
},
handleClose(done) {
this.$confirm('确认关闭？')
.then(_ => {
this.modalClose()
})
.catch(_ => { })
}
}
}
directives.js(一个拖动功能)
import Vue from 'vue'
Vue.directive('dialogDrag', {
bind(el, binding, vnode, oldVnode) {
const dialogHeaderEl = el.querySelector('.el-dialog__header')
const dragDom = el.querySelector('.el-dialog')
dialogHeaderEl.style.cursor = 'move'
// 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)
dialogHeaderEl.onmousedown = (e) => {
// 鼠标按下，计算当前元素距离可视区的距离
const disX = e.clientX - dialogHeaderEl.offsetLeft
const disY = e.clientY - dialogHeaderEl.offsetTop
// 获取到的值带px 正则匹配替换
let styL, styT
// 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
if (sty.left.includes('%')) {
styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100)
styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100)
} else {
styL = +sty.left.replace(/px/g, '')
styT = +sty.top.replace(/px/g, '')
}
document.onmousemove = function(e) {
// 通过事件委托，计算移动的距离
const l = e.clientX - disX
const t = e.clientY - disY
// 移动当前元素
dragDom.style.left = `${l + styL}px`
dragDom.style.top = `${t + styT}px`
// 将此时的位置传出去
// binding.value({x:e.pageX,y:e.pageY})
}
document.onmouseup = function(e) {
document.onmousemove = null
document.onmouseup = null
}
}
}
})
// v-dialogDragWidth: 弹窗宽度拖大 拖小
Vue.directive('dialogDragWidth', {
bind(el, binding, vnode, oldVnode) {
const dragDom = binding.value.$el.querySelector('.el-dialog')
el.onmousedown = (e) => {
// 鼠标按下，计算当前元素距离可视区的距离
const disX = e.clientX - el.offsetLeft
document.onmousemove = function(e) {
e.preventDefault() // 移动时禁用默认事件
// 通过事件委托，计算移动的距离
const l = e.clientX - disX
dragDom.style.width = `${l}px`
}
document.onmouseup = function(e) {
document.onmousemove = null
document.onmouseup = null
}
}
}
}
)