fpsys/src/views/base/components/popup/MenuEdit.vue

<template>
<el-dialog
  v-loading="loading"
  :show-close="false"
  :close-on-click-modal="false"
  :visible.sync="isShow"
  :title="this.curType === 'edit' ? '编辑节点' : '添加节点'"
  :fullscreen="false"
  width="470px"
  custom-class="xl-dialog"
  center>
  <base-form style="width:400px" :data="formData" ref="ruleForm" :isInline="false" labelWidth="120px">
    <div slot="footer">
      <el-button class="xl-form-btn t2" @click="close">关 闭</el-button>
      <el-button class="xl-form-btn t1" @click="close('confirm')">确定</el-button>
    </div>
  </base-form>
</el-dialog>
</template>
<script>
export default {
  props: {
    isShow: Boolean,
    curObj: Object,
    curType: String,
  },
  inject: ['parentData'],
  mixins,
  data() {
    return {
      formData: [],
      loading: true
    }
  },
  watch: {
    isShow: function(val) {
      if (val) {
        let params = {}
        if (this.curType === 'edit') {
          params = {...this.curObj}
          let parentIdArr = JSON.parse(JSON.stringify(params.ids))
          if (params.ids && params.ids.length > 1) {
            parentIdArr.pop()
            params.parentIdArr = parentIdArr
          }
        }
        if (this.curType === 'add') {
          params = {
            parentName: this.curObj.name,
            perm_status: '1', 
            perm_type: '2',
            menu_hidden: '1',
            parentIdArr: this.curObj.ids
          }
        }
        this.getDef(params)
      }
    }
  },
  methods: {
    typeChange () {
      let params = {...this.$refs.ruleForm.baseForm}
      this.getDef(params)
    },
    getDef (params) {
      let newParams = {...params}
      if (!newParams.method) newParams.method = 'POST'
      if (params.perm_type && params.perm_type === '1') {
        this.formData = [
          {label: '上级节点', key: 'parentIdArr', type: 'cascader', options: this.parentData.curData, props: { checkStrictly: true }},
          {label: '节点类型', key: 'perm_type', type: 'select', options: this.$dictData.perm_type, rules: 1, changeHandle: this.typeChange},
          {label: '目录名称', key: 'name', rules: 1},
          {label: '目录路径', key: 'path', rules: 1},
          {label: '目录排序', key: 'sort'},
          {label: '状态', key: 'perm_status', type: 'select', clearable: false, options: this.$dictData.perm_status},
        ]
      } else if (params.perm_type && params.perm_type === '2') {
        this.formData = [
          {label: '上级节点', key: 'parentIdArr', type: 'cascader', options: this.parentData.curData, props: { checkStrictly: true }},
          {label: '节点类型', key: 'perm_type', type: 'select', options: this.$dictData.perm_type, rules: 1, changeHandle: this.typeChange},
          {label: '菜单名称', key: 'name', rules: 1},
          {label: '菜单路径', key: 'path', rules: 1},
          {label: '菜单排序', key: 'sort'},
          {label: '菜单栏', key: 'menu_hidden', type: 'select', clearable: false, options: this.$dictData.show_hidden},
          {label: '状态', key: 'perm_status', type: 'select', clearable: false, options: this.$dictData.perm_status},
        ]
      } else {
        this.formData = [
          {label: '上级节点', key: 'parentIdArr', type: 'cascader', options: this.parentData.curData, props: { checkStrictly: true }},
          {label: '节点类型', key: 'perm_type', type: 'select', options: this.$dictData.perm_type, rules: 1, changeHandle: this.typeChange},
          {label: '接口名称', key: 'name', rules: 1},
          {label: '接口路径', key: 'route', rules: 1},
          {label: '提交方式', key: 'method', rules: 1},
          {label: '状态', key: 'perm_status', type: 'select', clearable: false, options: this.$dictData.perm_status},
        ]
      }
      this.setDefaultValue(newParams)
    },
    close (str) {
      if (str === 'confirm') {
        this.$refs['ruleForm'].$refs['baseForm'].validate((valid) => {
          if (valid) {
            const oldform = this.$refs.ruleForm.baseForm
            let params = {...oldform}
            let str = 'admpermissionsadd'
            params.p_id = params.parentIdArr[params.parentIdArr.length - 1]
            delete params.parentIdArr
            if (!params.sort) delete params.sort
            if(this.curType === 'edit') {
              // params.p_id = this.curObj.p_id
              params.id = this.curObj.id
              str = 'admpermissionsedit'
            }
            this.$api.base[str](params).then(data => {
              this.$msgs('保存成功！')
              this.$emit('close', params)
              // this.setDefaultValue()
            })
          }
        })
      } else {
        this.$emit('close')
        this.setDefaultValue()
      }
    }
  }
}
</script>