@zengqiao@菜单

dmp-edge-ai/src/service/MenuService.js

@@ -57,3 +57,15 @@ export function deleteMenu(menuId) {
    method: 'get'
  })
}
/**
 * 修改状态
 * @param userId
 */
export function changeStatus(data) {
  return request({
    url: `/menu/changeStatus`,
    method: 'post',
    data
  })
}

dmp-edge-ai/src/utils/constant.js

@@ -23,9 +23,9 @@ export const VisibleStatus = createEnum({
 * @type {{getDescFromValue, options, getDesc}}
 */
export const MenuType = createEnum({
  CONTENT: [1, '目录'],
  MENU: [0, '菜单'],
  BUTTON: [2, '按钮']
  CONTENT: ['1', '目录'],
  MENU: ['0', '菜单'],
  BUTTON: ['2', '按钮']
})
/**

dmp-edge-ai/src/views/system/menu/components/BaseDialog.vue

@@ -0,0 +1,200 @@
<template>
  <el-dialog :title="title" class="common-modal" :visible.sync="dialogVisible" width="68.75%" @open="initData">
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-row>
        <el-col :span="10" :offset="2">
          <el-row>
            <el-col>
              <el-form-item label="菜单名称" prop="menuName">
                <el-input v-model.trim="form.menuName" placeholder="请输入菜单名称"></el-input>
              </el-form-item>
              <el-form-item label="菜单类型" prop="menuType">
                <el-radio-group v-model="form.menuType">
                  <el-radio v-for="item in MenuType.options" :key="'type' + item[0]" :label="item[0]">
                    {{ item[1] }}
                  </el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="内外链地址" prop="linkUrl" v-if="form.menuType === MenuType.MENU">
                <el-input v-model.trim="form.linkUrl" placeholder="请输入内外链地址"></el-input>
              </el-form-item>
              <el-form-item label="排序" prop="menuSort">
                <el-input-number v-model="form.menuSort" :min="1"></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="10">
          <el-row>
            <el-col>
              <el-form-item label="上级菜单" prop="parentOrganizeId">
                <el-select
                  v-model="form.parentMenuId"
                  style="width: 100%"
                  clearable
                  :disabled="modalType === ModalType.EDIT"
                >
                  <el-option v-for="item in content" :key="item.menuId" :label="item.menuName" :value="item.menuId">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="打开方式" prop="iframeFlag" v-if="form.menuType === MenuType.MENU">
                <el-radio-group v-model="form.iframeFlag">
                  <el-radio v-for="item in IframeFlag.options" :key="'iframe' + item[0]" :label="item[0]">
                    {{ item[1] }}
                  </el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="图标" prop="menuIcon" v-if="form.menuType === MenuType.CONTENT">
                <el-input v-model.trim="form.menuIcon" placeholder="请选择或输入图标">
                  <el-button slot="append" icon="el-icon-setting"></el-button>
                </el-input>
              </el-form-item>
              <el-form-item label="是否可见" prop="hiddenFlag">
                <el-radio-group v-model="form.hiddenFlag">
                  <el-radio v-for="item in VisibleStatus.options" :key="'status' + item[0]" :label="item[0]">
                    {{ item[1] }}
                  </el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button v-if="!submitLoading" type="primary" @click="submit(modalType)">提交</el-button>
      <el-button v-else type="primary" :loading="submitLoading">提交中</el-button>
      <el-button @click="dialogVisible = false">关闭并返回</el-button>
    </span>
  </el-dialog>
</template>
<script>
import * as MenuService from '@/service/MenuService'
import { ModalType, VisibleStatus, MenuType, IframeFlag } from '@/utils/constant'
export default {
  name: 'BaseDialog',
  props: {
    menuId: {
      type: [Number, String]
    },
    show: {
      type: Boolean,
      required: true,
      default: false
    },
    menuList: {
      type: Array,
      required: true,
      default: () => []
    }
  },
  data() {
    this.VisibleStatus = VisibleStatus
    this.MenuType = MenuType
    this.IframeFlag = IframeFlag
    this.ModalType = ModalType
    // 组织树形下拉组件映射配置
    this.selectTreeConfig = {
      id: 'menuId',
      label: 'menuName',
      children: 'children'
    }
    return {
      form: {
        menuName: '',
        menuType: '',
        parentMenuId: '',
        iframeFlag: '',
        linkUrl: '',
        menuIcon: '',
        menuSort: '1',
        hiddenFlag: VisibleStatus.YES
      },
      rules: {
        menuName: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
        menuType: [{ required: true, message: '请选择菜单类型', trigger: 'change' }],
        iframeFlag: [{ required: true, message: '请选择打开方式', trigger: 'change' }],
        linkUrl: [{ required: true, message: '请输入内外链地址', trigger: 'change' }],
        menuIcon: [{ required: true, message: '请选择或输入图标', trigger: 'blur' }]
      },
      modalType: ModalType.ADD,
      submitLoading: false
    }
  },
  computed: {
    dialogVisible: {
      set(val) {
        this.$emit('update:show', val)
      },
      get() {
        return this.show
      }
    },
    title() {
      return this.modalType === ModalType.ADD ? '新增菜单' : '编辑菜单'
    },
    content() {
      return this.menuList.filter((item) => item.menuType === MenuType.CONTENT)
    }
  },
  methods: {
    /**
     * 初始化模态框
     */
    initData() {
      this.$refs.form && this.$refs.form.resetFields()
      this.form = {
        menuName: '',
        menuType: '',
        parentMenuId: '',
        iframeFlag: '',
        linkUrl: '',
        menuIcon: '',
        menuSort: '1',
        hiddenFlag: VisibleStatus.YES
      }
      if (this.menuId) {
        // 编辑
        this.modalType = ModalType.EDIT
        MenuService.getMenuInfo(this.menuId).then((res) => {
          this.form = { ...res, ...{ parentMenuId: res.parentMenuId === '0' ? '' : res.parentMenuId } }
          Reflect.deleteProperty(this.form, 'createDate')
          Reflect.deleteProperty(this.form, 'doneDate')
        })
      } else {
        // 新增
        this.modalType = ModalType.ADD
      }
    },
    submit(type) {
      this.$refs['form'].validate(async (valid) => {
        if (!valid) {
          return
        }
        const params = { ...this.form }
        if (this.form.parentMenuId === '') {
          params.parentMenuId = '0'
        }
        this.submitLoading = true
        try {
          if (type === ModalType.ADD) {
            // 新增
            await MenuService.add(params)
          } else {
            // 编辑
            await MenuService.edit(params)
          }
          this.dialogVisible = false
          this.$emit('refresh')
        } finally {
          this.submitLoading = false
        }
      })
    }
  }
}
</script>
<style scoped lang="scss"></style>

dmp-edge-ai/src/views/system/menu/index.vue

@@ -23,14 +23,7 @@
        <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
      </div>
      <el-table
        :data="tableData"
        border
        row-key="menuId"
        default-expand-all
        :header-cell-style="headerStyle"
        @selection-change="handleSelectionChange"
      >
      <el-table :data="tableData" border row-key="menuId" default-expand-all :header-cell-style="headerStyle">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="菜单名称" prop="menuName" width="180"></el-table-column>
        <el-table-column label="菜单类型" prop="menuType" width="80">
@@ -54,8 +47,8 @@
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="{ row }">
            <a class="table-option" @click="changeState(row)">
          <template slot-scope="{ row, $index }">
            <a class="table-option" @click="changeState(row, $index)">
              {{ row.hiddenFlag === VisibleStatus.YES ? VisibleStatus.getDesc('NO') : VisibleStatus.getDesc('YES') }}
            </a>
            <a class="table-option" @click="edit(row)">编辑</a>
@@ -64,6 +57,8 @@
        </el-table-column>
      </el-table>
    </div>
    <!--新建/编辑菜单模态框-->
    <base-dialog :show.sync="baseVisible" :menuId="menuId" :menuList="tableData" @refresh="search"> </base-dialog>
  </div>
</template>
@@ -74,7 +69,8 @@ import { VisibleStatus, MenuType, IframeFlag } from '@/utils/constant'
export default {
  name: 'Menu',
  components: {
    PageHeader
    PageHeader,
    BaseDialog: () => import('./components/BaseDialog')
  },
  data() {
    this.VisibleStatus = VisibleStatus
@@ -91,24 +87,73 @@ export default {
        menuType: '',
        hiddenFlag: ''
      },
      tableData: []
      tableData: [],
      menuId: '',
      baseVisible: false
    }
  },
  methods: {
    addMenu() {
      console.log(111)
      this.menuId = ''
      this.baseVisible = true
    },
    changeState(row) {
      console.log(row.status)
    changeState(row, index) {
      const { menuId, hiddenFlag } = row
      const text = hiddenFlag === VisibleStatus.YES ? VisibleStatus.getDesc('NO') : VisibleStatus.getDesc('YES')
      this.$confirm(`您确定${text}该菜单吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true
            instance.confirmButtonText = '执行中...'
            const params = {
              menuId,
              hiddenFlag: hiddenFlag === VisibleStatus.YES ? VisibleStatus.NO : VisibleStatus.YES
            }
            MenuService.changeStatus(params)
              .then(() => {
                this.tableData[index].hiddenFlag = params.hiddenFlag
                done()
              })
              .finally(() => {
                instance.confirmButtonText = '确定'
                instance.confirmButtonLoading = false
              })
          } else {
            done()
          }
        }
      })
    },
    edit(row) {
      console.log(row)
      this.menuId = row.menuId
      this.baseVisible = true
    },
    deleteItem(row) {
      console.log(row)
    },
    handleSelectionChange(val) {
      console.log(val)
      this.$confirm(`您确定删除该菜单吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true
            instance.confirmButtonText = '删除中...'
            MenuService.deleteMenu(row.menuId)
              .then(() => {
                this.search()
                done()
              })
              .finally(() => {
                instance.confirmButtonText = '确定'
                instance.confirmButtonLoading = false
              })
          } else {
            done()
          }
        }
      })
    },
    search() {
      this.getMenuList()

dmp-edge-ai/src/views/system/organize/components/BaseDialog.vue

@@ -111,7 +111,7 @@ export default {
      }
    },
    title() {
      return this.modalType === ModalType.ADD ? '新增角色' : '编辑角色'
      return this.modalType === ModalType.ADD ? '新增部门' : '编辑部门'
    }
  },
  methods: {