128 lines
		
	
	
		
			4.1 KiB
		
	
	
	
		
			Plaintext
		
	
	
			
		
		
	
	
			128 lines
		
	
	
		
			4.1 KiB
		
	
	
	
		
			Plaintext
		
	
	
| <template>
 | |
|   <base-model :config="model_cfg">
 | |
|     <template slot="dialog-body">
 | |
|       <el-form ref="menuForm" :model="form" label-width="110px" size="small" :rules="rules">
 | |
|         <el-form-item label="MenuName" prop="MenuName">
 | |
|           <el-input v-model="form.MenuName" />
 | |
|         </el-form-item>
 | |
|         <el-form-item label="Route Name">
 | |
|           <el-input v-model="form.RouteName" />
 | |
|         </el-form-item>
 | |
|         <el-form-item label="Component">
 | |
|           <el-input v-model="form.Component" />
 | |
|         </el-form-item>
 | |
|         <el-form-item label="Redirect">
 | |
|           <el-input v-model="form.Redirect" />
 | |
|         </el-form-item>
 | |
|         <el-form-item label="Path">
 | |
|           <el-input v-model="form.Path" />
 | |
|         </el-form-item>
 | |
|         <el-form-item label="Title">
 | |
|           <el-input v-model="form.MetaTitle" />
 | |
|         </el-form-item>
 | |
|         <el-form-item label="Breadcrumb">
 | |
|           <el-switch
 | |
|             v-model="form.MetaBreadcrumb"
 | |
|             :active-value="1"
 | |
|             :inactive-value="0"
 | |
|             active-color="#13ce66"
 | |
|             inactive-color="#ff4949"
 | |
|           />
 | |
|         </el-form-item>
 | |
|         <el-form-item label="Icon">
 | |
|           <el-select v-model="form.MetaIcon">
 | |
|             <el-option
 | |
|               v-for="(value,index) in iconOptions"
 | |
|               :key="index"
 | |
|               :label="value"
 | |
|               :value="value"
 | |
|             />
 | |
|           </el-select>
 | |
|         </el-form-item>
 | |
|         <el-form-item label="Active Menu">
 | |
|           <el-input v-model="form.MetaActiveMenu" />
 | |
|         </el-form-item>
 | |
|         <el-form-item label="Function Name">
 | |
|           <el-input v-model="form.FunctionName" />
 | |
|         </el-form-item>
 | |
|         <el-form-item label="Description">
 | |
|           <el-input v-model="form.Note" />
 | |
|         </el-form-item>
 | |
|         <el-form-item label="Hidden">
 | |
|           <el-switch
 | |
|             v-model="form.Hidden"
 | |
|             :active-value="1"
 | |
|             :inactive-value="0"
 | |
|             active-color="#13ce66"
 | |
|             inactive-color="#ff4949"
 | |
|           />
 | |
|         </el-form-item>
 | |
|         <el-form-item label="Show Order">
 | |
|           <el-input v-model="form.ShowOrder" type="number" />
 | |
|         </el-form-item>
 | |
|         <el-form-item label="Status">
 | |
|           <el-switch
 | |
|             v-model="form.Status"
 | |
|             :active-value="1"
 | |
|             :inactive-value="0"
 | |
|             active-color="#13ce66"
 | |
|             inactive-color="#ff4949"
 | |
|           />
 | |
|         </el-form-item>
 | |
|       </el-form>
 | |
|     </template>
 | |
|     <template slot="dialog-footer">
 | |
|       <el-button :disabled="loading" size="small" type="primary" @click="model_cfg.visible = false">Cancel</el-button>
 | |
|       <el-button size="small" type="primary" :loading="loading" @click="handleSave()">Save</el-button>
 | |
|     </template>
 | |
|   </base-model>
 | |
| 
 | |
| </template>
 | |
| <script>
 | |
| import { addOrUpdateMenu } from '@/api/admin'
 | |
| import { model_cfg } from '../menu'
 | |
| import BaseModel from '@/components/BaseModel'
 | |
| export default {
 | |
|   components: { BaseModel },
 | |
|   props: {
 | |
|     form: {
 | |
|       type: Object,
 | |
|       default() {
 | |
|         return {}
 | |
|       }
 | |
|     }
 | |
|   },
 | |
|   data() {
 | |
|     return {
 | |
|       model_cfg,
 | |
|       iconOptions: ['dashboard', 'user', 'trial', 'statistics', 'financials', 'dictionary', 'admin'],
 | |
|       rules: { MenuName: [{ required: true, message: 'Please specify', trigger: 'blur' }] },
 | |
|       loading: false
 | |
|     }
 | |
|   },
 | |
|   methods: {
 | |
|     handleSave() {
 | |
|       this.$refs.menuForm.validate(valid => {
 | |
|         if (!valid) return
 | |
|         this.model_cfg.showClose = false
 | |
|         const param = JSON.parse(JSON.stringify(this.form))
 | |
|         param.MetaBreadcrumb = !!param.MetaBreadcrumb
 | |
|         param.Hidden = !!param.Hidden
 | |
|         this.loading = true
 | |
|         addOrUpdateMenu(param).then(res => {
 | |
|           const message = param.Id ? 'Updated successfully' : 'Appended successfully'
 | |
|           param.Id = res.Result
 | |
|           this.$message.success(message)
 | |
|           this.$emit('close', param)
 | |
|           this.loading = false
 | |
|           this.model_cfg.showClose = true
 | |
|         }).catch(() => {
 | |
|           this.loading = false
 | |
|           this.model_cfg.showClose = true
 | |
|         })
 | |
|       })
 | |
|     }
 | |
|   }
 | |
| }
 | |
| </script>
 |