jiangping
2024-06-20 09da100729793848bc01b51f7b05ca3f1e7ec64f
company/src/components/system/menu/OperaMenuComWindow.vue
@@ -9,7 +9,7 @@
        <p class="tip" v-if="form.parent != null && form.id == null">为 <em>{{parentName}}</em> 新建子菜单</p>
        <el-form :model="form" ref="form" :rules="rules">
            <el-form-item label="上级菜单" prop="parentId">
                <MenuSelect v-if="visible" type="1" v-model="form.parentId" placeholder="请选择上级菜单" :exclude-id="excludeMenuId" clearable :inline="false"/>
                <MenuSelect v-if="visible" :type="form.type" v-model="form.parentId" placeholder="请选择上级菜单" :exclude-id="excludeMenuId" clearable :inline="false"/>
            </el-form-item>
            <el-form-item label="菜单名称" prop="name" required>
                <el-input v-model="form.name" placeholder="请输入菜单名称" v-trim maxlength="50"/>
@@ -32,75 +32,76 @@
</template>
<script>
    import BaseOpera from '@/components/base/BaseOpera'
    import GlobalWindow from '@/components/common/GlobalWindow'
    import MenuSelect from '@/components/common/MenuSelect'
    import icons from '@/utils/icons'
    export default {
        name: 'OperaMenuWindow',
        extends: BaseOpera,
        components: { MenuSelect, GlobalWindow },
        data () {
            return {
                icons,
                // 上级菜单名称
                parentName: '',
                // 需排除选择的菜单ID
                excludeMenuId: null,
                // 表单数据
                form: {
                    id: null,
                    parentId: null,
                    name: '',
                    path: '',
                    icon: '',
                    remark: '',
                    type: '1'
                },
                // 验证规则
                rules: {
                    name: [
                        { required: true, message: '请输入菜单名称' }
                    ]
                }
            }
        },
        methods: {
            /**
import BaseOpera from '@/components/base/BaseOpera'
import GlobalWindow from '@/components/common/GlobalWindow'
import MenuSelect from '@/components/common/MenuSelect'
import icons from '@/utils/icons'
export default {
  name: 'OperaMenuWindow',
  extends: BaseOpera,
  components: { MenuSelect, GlobalWindow },
  data () {
    return {
      icons,
      // 上级菜单名称
      parentName: '',
      // 需排除选择的菜单ID
      excludeMenuId: null,
      // 表单数据
      form: {
        id: null,
        parentId: null,
        name: '',
        path: '',
        icon: '',
        remark: '',
        type: '1'
      },
      // 验证规则
      rules: {
        name: [
          { required: true, message: '请输入菜单名称' }
        ]
      }
    }
  },
  methods: {
    /**
             * @title: 窗口标题
             * @target: 编辑的菜单对象
             * @parent: 新建时的上级菜单
             */
            open (title, target, parent) {
                this.title = title
                this.visible = true
                // 新建,menu为空时表示新建菜单
                if (target == null) {
                    this.excludeMenuId = null
                    this.$nextTick(() => {
                        this.$refs.form.resetFields()
                        this.form.id = null
                        this.form.type = parent.type
                        this.form.parentId = parent == null ? null : parent.id
                        this.parentName = parent == null ? null : parent.name
                    })
                    return
                }
                // 编辑
                this.$nextTick(() => {
                    this.excludeMenuId = target.id
                    for (const key in this.form) {
                        this.form[key] = target[key]
                    }
                })
            }
        },
        created () {
            this.config({
                api: '/system/menu'
            })
    open (title, target, parent, type) {
      this.title = title
      this.visible = true
      this.form.type = type || 1
      // 新建,menu为空时表示新建菜单
      if (target == null) {
        this.excludeMenuId = null
        this.$nextTick(() => {
          this.$refs.form.resetFields()
          this.form.id = null
          this.form.type = parent != null ? parent.type : (type || 1)
          this.form.parentId = parent == null ? null : parent.id
          this.parentName = parent == null ? null : parent.name
        })
        return
      }
      // 编辑
      this.$nextTick(() => {
        this.excludeMenuId = target.id
        for (const key in this.form) {
          this.form[key] = target[key]
        }
      })
    }
  },
  created () {
    this.config({
      api: '/system/menu'
    })
  }
}
</script>
<style scoped lang="scss">