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>
 |