<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> &nbsp;
				<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>