<style>
</style>
<template>
<div class="flexOne">
<div class="query-box">
<ul>
<li>
<span><em>名称</em><el-input v-model='msg.ActionName' class="permiss-input" placeholder="请输入内容"></el-input></span>
</li>
<li>
<span><em>状态</em><el-select v-model="msg.ActionStatus" placeholder="请选择">
<el-option label="不限" value="-1"></el-option>
<el-option label="开启" value="0"></el-option>
<el-option label="关闭" value="1"></el-option>
</el-select>
</span>
</li>
<li>
<input type="button" class="hollowFixedBtn" name="" id="" value="查询" @click="resetPageIndex(),getList()" />
<input type="button" @click="outerVisible = true,dialogTitle='新增功能菜单',clearMessage();" class="normalBtn" value="新增" />
</li>
</ul>
</div>
<table class="singeRowTable" border="0" cellspacing="0" cellpadding="0">
<tr>
<th width="300">名称</th>
<th>功能编码</th>
<th width="300">菜单地址</th>
<th>状态</th>
<th width="400">备注</th>
<th width="100">排序</th>
<th width="100">操作</th>
</tr>
<tr v-for="(item,index) in DataList">
<td>{{item.ActionName}}</td>
<td>{{item.ActionCode}}</td>
<td>{{item.MenuUrl}}</td>
<td>{{item.ActionStatus==0?'开启':'关闭'}}</td>
<td>
{{item.Remarks}}
</td>
<td>
{{item.Sort}}
</td>
<td>
<el-row>
<el-tooltip class="item" effect="dark" content="修改" placement="top-start">
<el-button @click="outerVisible = true,dialogTitle='修改功能菜单',updateData(index,item.Id)" type="primary" icon="el-icon-edit" circle></el-button>
</el-tooltip>
</el-row>
</td>
</tr>
</table>
<el-pagination
background
@current-change="handleCurrentChange"
:current-page.sync="currentPage"
layout="total,prev, pager, next, jumper"
:page-size=msg.pageSize
:total='total'>
</el-pagination>
<el-dialog custom-class='w750' :title="dialogTitle" :visible.sync="outerVisible" center :before-close="closeChangeMachie">
<el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="120px" >
<table class="layerNoIcon">
<tr>
<td>
<el-form-item label="名称" prop="ActionName">
<el-input maxlength='50' class='w200' type="text" v-model="addMsg.ActionName" :placeholder="$t('pub.pleaseImport')"></el-input>
</el-form-item>
</td>
<td>
<el-form-item label="功能编码" prop="ActionCode">
<el-input maxlength='50' class='w200' type="text" v-model="addMsg.ActionCode" :placeholder="$t('pub.pleaseImport')"></el-input>
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="菜单URL" prop="MenuUrl">
<el-input maxlength='50' class='w200' type="text" v-model="addMsg.MenuUrl" :placeholder="$t('pub.pleaseImport')"></el-input>
</el-form-item>
</td>
<td>
<el-form-item label="排序" prop='Sort'>
<el-input maxlength='50' class='w200' @keyup.native="checkInteger(addMsg,'Sort')" type="text" v-model="addMsg.Sort" :placeholder="$t('pub.pleaseImport')"></el-input>
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="备注">
<el-input maxlength='200' class='w200' type="textarea" v-model="addMsg.Remarks" :placeholder="$t('pub.pleaseImport')"></el-input>
</el-form-item>
</td>
<td>
<el-form-item label="状态">
<el-switch v-model="addMsg.ActionStatus" active-value="0" inactive-value="1"></el-switch>
</el-form-item>
</td>
</tr>
</table>
</el-form>
<div slot="footer" class="dialog-footer">
<button class="hollowFixedBtn" @click="outerVisible = false,resetForm('addMsg'),getList()">{{$t('pub.cancelBtn')}}</button>
<button class="normalBtn" type="primary" @click="submitForm('addMsg'),getList()">{{$t('pub.saveBtn')}}</button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
dialogTitle: '',
DataList: '',
total: 0,
pageSize: '',
currentPage: 1,
thisColor: '#E95252',
predefineColors: [
'#ff4500',
'#ff8c00',
'#ffd700',
'#90ee90',
'#00ced1',
'#1e90ff',
'#c71585',
],
outerVisible: false,
addStatus: [{
value: '0',
label: '开启'
}, {
value: '1',
label: '关闭'
}],
msg: { //列表查询请求数据
"pageIndex": 1,
'pageSize': 15,
'ActionName': '',
'ParentId': '',
'ActionStatus': '0',
},
addMsg: {
'Id':'0',
'ActionName': '',
'ActionCode': '',
'MenuUrl': '',
'ActionStatus': '0',
'Sort':0,
'Remarks':''
},
rules:{
Sort:[
{ required: true, message: '请输入排序', trigger: 'blur' }
],
ActionName:[
{ required: true, message: '请输入菜单名称', trigger: 'blur' }
],
ActionCode:[
{ required: true, message: '请输入功能编码', trigger: 'blur' }
],
MenuUrl:[
{ required: true, message: '请输入菜单地址', trigger: 'blur' }
],
},
currentUpdateIndex:-1
}
},
mounted() {
this.getList();
},
methods: {
getList() { //列表查询
this.apipost('admin_get_SysMenuGetActionPageList', this.msg, res => {
if(res.data.resultCode == 1) {
this.DataList = res.data.data.pageData;
this.total = res.data.data.count;
}
}, err => {})
},
addData() { //新增数据
this.apipost('admin_post_SysMenuSetAction', this.addMsg, res => {
if(res.data.resultCode == 1){
this.outerVisible=false;
this.$message.success(res.data.message)
this.getList();
}else{
this.$message.error(res.data.message);
}
}, err => {})
},
updateData(index,id) { //修改
this.apipost('admin_get_SysMenuGetAction',{MenuId:id},res=>{
let updateList=res.data.data
this.addMsg.Id=id
this.addMsg.ActionName=updateList.ActionName
this.addMsg.ActionCode=updateList.ActionCode
this.addMsg.Sort=updateList.Sort.toString()
this.addMsg.Remarks=updateList.Remarks
this.addMsg.MenuUrl=updateList.MenuUrl
this.addMsg.ActionStatus=updateList.ActionStatus.toString()
this.currentUpdateIndex=index
},err=>{})
this.currentUpdateIndex=index
},
handleCurrentChange(val) {
this.msg.pageIndex = val;
this.getList();
},
clearMessage() {
this.addMsg = {
'ActionCode':'',
'ActionName': '',
'MenuUrl': '',
'Remarks': '',
'Sort': '0',
'ActionStatus': '0',
}
},
resetPageIndex() {
this.msg.pageIndex = 1
this.currentPage = 1
},
submitForm(addMsg) {//提交创建、修改表单
this.$refs[addMsg].validate((valid) => {
if (valid) {
this.addData()
} else {
return false;
}
});
},
closeChangeMachie(done){//弹出框关闭初始化弹框内表单
done();
this.resetForm('addMsg');
},
resetForm(formName) {//弹出框取消 初始化谈框内表单
this.$refs[formName].resetFields();
}
}
}
</script>