<template>
|
<a-form-model style="margin-top: 8px" :rules="rules" ref="ruleMenuForm" :model="saveData">
|
<a-modal title="编辑-菜单" destroyOnClose :visible="visible" @cancel="handleCancel">
|
<a-row :gutter="1">
|
<a-col :span="12">
|
<a-form-model-item key="name" v-bind="formLayout" label="名称" prop="name">
|
<a-input placeholder="请输入" v-model="saveData.name"/>
|
</a-form-model-item>
|
</a-col>
|
<a-col :span="12">
|
<a-form-model-item key="id" v-bind="formLayout" label="父菜单" prop="parent_id">
|
<!-- @change="handleChange"-->
|
<a-select v-model="saveData.parent_id" style="width: 120px" placeholder="选择父菜单" allow-clear>
|
<a-select-option v-for="item in parentData" :value="item.id" :key="item.id">
|
{{item.name}}
|
</a-select-option>
|
</a-select>
|
</a-form-model-item>
|
</a-col>
|
</a-row>
|
<a-row :gutter="1">
|
<a-col :span="12">
|
<a-form-model-item key="order" v-bind="formLayout" label="顺序" prop="order" >
|
<a-input placeholder="请输入" v-model="saveData.order"/>
|
</a-form-model-item>
|
</a-col>
|
<a-col :span="12">
|
<a-form-model-item key="url" v-bind="formLayout" label="路径" prop="url">
|
<a-input placeholder="请输入" v-model="saveData.url"/>
|
</a-form-model-item>
|
</a-col>
|
</a-row>
|
|
<a-row :gutter="1">
|
<a-col :span="12">
|
<a-form-model-item key="desc" v-bind="formLayout" label="备注" prop="desc">
|
<a-input placeholder="请输入" v-model="saveData.desc"/>
|
</a-form-model-item>
|
</a-col>
|
</a-row>
|
<template slot="footer">
|
<a-button key="cancel" @click="handleCancel">
|
取消
|
</a-button>
|
<a-button key="forward" type="primary" @click="handleOk">
|
完成
|
</a-button>
|
</template>
|
</a-modal>
|
</a-form-model>
|
</template>
|
|
<script lang="ts">
|
import {
|
Component,
|
Prop,
|
Vue,
|
Emit,
|
Model,
|
Watch,
|
} from 'vue-property-decorator';
|
import {
|
State,
|
Mutation,
|
namespace,
|
} from 'vuex-class';
|
|
import { get, post } from "@/util/request";
|
|
@Component({
|
components: {},
|
})
|
export default class UpdateTaskForm extends Vue {
|
|
private rules: any = {
|
name: [
|
{ required: true, message: '角色名称' }
|
],
|
order: [
|
{ required: true, message: '角色名称' }
|
],
|
url: [
|
{ required: true, message: '角色名称' }
|
],
|
|
}
|
@Prop({
|
type: Boolean,
|
default: false,
|
})
|
private visible!: boolean;
|
|
@Prop({
|
type: Object,
|
default() {
|
return {};
|
},
|
})
|
private record!: any;
|
|
private saveData:any = {
|
name: '',
|
parent_id: '',
|
order: '',
|
url: '',
|
desc: ''
|
};
|
|
private form: any = null;
|
|
private parentData: any[] = [];
|
|
private formVals1: any = {
|
target: '0',
|
template: '0',
|
type: '1',
|
time: '',
|
frequency: 'month',
|
};
|
|
private currentStep: number = 0;
|
|
private formLayout = {
|
labelCol: {
|
span: 7,
|
},
|
wrapperCol: {
|
span: 13,
|
},
|
};
|
|
private handleBackward(): void {
|
this.currentStep--;
|
}
|
|
// private handleNext(): void {
|
// this.form.validateFields((err: any, fieldsValue: any) => {
|
// if (err) {
|
// return;
|
// }
|
// this.formVals1 = { ...this.formVals1, ...fieldsValue };
|
// this.currentStep++;
|
// });
|
// }
|
|
private handleCancel(): void {
|
this.updateVisible(false);
|
}
|
|
@Watch('visible')
|
private watchVisible(newVal: boolean,oldVal: boolean) {
|
if (newVal) {
|
this.saveData.name = this.record.name
|
this.saveData.order = this.record.order
|
this.saveData.url = this.record.url
|
if (this.record.parentId === 0) {
|
this.saveData.parent_id = undefined
|
this.record.parentId = undefined
|
}else {
|
this.saveData.parent_id = this.record.parentId
|
}
|
|
if (this.record.desc) {
|
this.saveData.desc = this.record.desc
|
}else {
|
this.saveData.desc = ''
|
}
|
}
|
}
|
|
private handleOk(): void {
|
this.$refs.ruleMenuForm.validate((valid: any) => {
|
if (valid) {
|
if(this.saveData.name || this.saveData.order || this.saveData.url || this.saveData.desc || (this.saveData.parent_id === undefined)){
|
if(this.record.parentId !== this.saveData.parent_id || this.record.name !== this.saveData.name || this.record.order !== this.saveData.order || this.record.url !== this.saveData.url || this.record.desc !== this.saveData.desc){
|
post('manageMenu/updateManageMenuById', {
|
name:this.saveData.name === this.record.name ? null : this.saveData.name,
|
desc:this.saveData.desc === this.record.desc ? null : this.saveData.desc,
|
id:this.record.id,
|
url:this.saveData.url === this.record.url ? null : this.saveData.url,
|
parent_id:this.saveData.parent_id === this.record.parentId ? null : this.saveData.parent_id === undefined ? 0 : this.saveData.parent_id,
|
order:this.saveData.order === this.record.order ? null : this.saveData.order
|
})
|
.then((res) => {
|
if (res.data.code === 0) {
|
this.updateVisible(false);
|
this.onOk();
|
this.$message.success(res.data.message)
|
}else if (res.data.code !== 0) {
|
this.$message.warning(res.data.message)
|
}
|
})
|
.catch((err)=>{
|
console.log(err);
|
})
|
|
}else{
|
this.$message.warning('未修改')
|
}
|
}
|
} else {
|
console.log('error submit!!');
|
return false;
|
}
|
});
|
|
|
|
}
|
|
@Emit('ok')
|
private onOk() {
|
|
}
|
|
private loadRuleData() {
|
get('manageMenu/getManageMenuList',{
|
current: 1,
|
size: 100
|
})
|
.then((res) => {
|
this.parentData = []
|
for (let i = 0; i < res.data.data.length; i++) {
|
if(!res.data.data[i].parent_name){
|
this.parentData.push(res.data.data[i])
|
}
|
}
|
// this.dataSource = res.data.data;
|
})
|
.catch((err)=>{
|
console.log(err)
|
})
|
}
|
|
private updateVisible(visible: boolean): void {
|
this.$emit('update:visible', visible);
|
}
|
|
private mounted(): void {
|
this.currentStep = 0;
|
this.loadRuleData()
|
}
|
|
|
|
@Watch('record', {
|
immediate: true,
|
deep: true,
|
})
|
private recordChange(value: any, oldValue: any): void {
|
this.formVals1 = {
|
...value,
|
...this.formVals1,
|
};
|
this.currentStep = 0;
|
}
|
|
}
|
</script>
|
