rmLayGaoujU9O46l603ccl_plm-vue/src/views/modules/sys/menu.vue

<template>
  <div class="mod-menu">
    <el-form :inline="true" :model="dataForm">
      <el-form-item>
        <el-button v-if="isAuth('sys:menu:save')" type="primary" @click="addOrUpdateHandle()">{{buttons.add || '新增'}}</el-button>
      </el-form-item>
    </el-form>

    <el-table
      :data="dataList"
      row-key="menuId"
      border
      style="width: 100%; ">
      <el-table-column
        prop="name"
        header-align="center"
        min-width="150"
        :label="buttons.name||'名称'" >
      </el-table-column>
      <el-table-column
        prop="parentName"
        header-align="center"
        align="center"
        width="120"
        :label="buttons.parentName||'上级菜单'">
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        :label="buttons.icon||'图标'">
        <template slot-scope="scope">
          <icon-svg :name="scope.row.icon || ''"></icon-svg>
        </template>
      </el-table-column>
      <el-table-column
        prop="type"
        header-align="center"
        align="center"
        :label="buttons.type||'类型'">
        <template slot-scope="scope">

          <el-link v-if="scope.row.type === 0" type="success">目录</el-link>
          <el-link v-else-if="scope.row.type === 1" size="small" type="success">{{buttons.menu||'菜单'}}菜单</el-link>
          <el-link v-else-if="scope.row.type === 2" size="small" type="info">{{buttons.button||'按钮'}}</el-link>
        </template>
      </el-table-column>
      <el-table-column
        prop="orderNum"
        header-align="center"
        align="center"
        :label="buttons.orderNum||'排序号'">
      </el-table-column>
      <el-table-column
        prop="url"
        header-align="center"
        align="center"
        width="150"
        :show-overflow-tooltip="true"
        :label="buttons.url||'菜单URL'">
      </el-table-column>
      <el-table-column
        prop="perms"
        header-align="center"
        align="center"
        width="150"
        :show-overflow-tooltip="true"
        :label="buttons.perms||'授权标识'">
      </el-table-column>
      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        width="150"
        :label="buttons.cz||'操作'">
        <template slot-scope="scope">
          <a v-if="isAuth('sys:menu:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.menuId)">{{buttons.edit||'修改'}}</a>
          <a v-if="isAuth('sys:menu:delete')" type="text" size="small" @click="deleteHandle(scope.row.menuId)">{{buttons.delete||'删除'}}</a>
          <a  type="text" size="small" @click="addOrUpdateLanguage(scope.row.menuId)">{{buttons.language||'语言'}}</a>
          <a v-if="isAuth('sys:oss:all') && scope.row.type === 1 " type="text" size="small" @click="helpFileList(scope.row.menuId)">
            {{buttons.helpFile || '帮助文档'}}</a>
        </template>
      </el-table-column>
    </el-table>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList" v-drag></add-or-update>
    <MenuLanguage v-if="menuLanguageVisible" ref="menuLanguageAdd" @refreshDataList="getDataList" v-drag ></MenuLanguage>

    <FileList ref="helpFileList" v-if="helpFileVisible"></FileList>
  </div>
</template>

<script>
  import AddOrUpdate from './menu-add-or-update'
  import MenuLanguage from './menu-language'
  import FileList from '../common/file-list'
  import { treeDataTranslate } from '@/utils'
  import {
    searchFunctionButtonList,
  } from "@/api/sysLanguage.js"
  export default {
    data () {
      return {
       // height: 450,
        dataForm: {},
        dataList: [],
        dataListLoading: false,
        addOrUpdateVisible: false,
        menuLanguageVisible: false,
        helpFileVisible:false,
        buttons: {
          cz: '操作',
          add: '添加',
          edit: '编辑',
          delete: '删除',
          name:'名称',
          parentName:'上级菜单',
          icon:'图标',
          type:'类型',
          menu:'菜单',
          button:'按钮',
          orderNum:'排序号',
          url:'菜单URL',
          perms:'授权标识',
          helpFile : '帮助文档',
          language:'语言'
        },
      }
    },
    components: {
      AddOrUpdate,
      MenuLanguage,
      FileList
    },
    activated () {
      this.getDataList()
    },
    mounted() {
      this.$nextTick(()=>{
        this.height = window.innerHeight ;
      })
    },
    methods: {
      // 获取button的词典
      getFunctionButtonList() {
        let queryButton = {
          functionId: this.$route.meta.menuId,
          tableId: '*',
          languageCode: this.$i18n.locale,
          objectType: 'button'
        }
        searchFunctionButtonList(queryButton).then(({data}) => {
          if (data.code == 0 && data.data) {
            this.buttons = data.data
          }
        })
      },
      // 帮助文档列表
      helpFileList(val){
        let fileMappingDto = {
          fileId:'',
          fileType:'功能帮助文档',
          orderRef1:val,
          orderRef2: '*',
          orderRef3: '*',
        }
        this.helpFileVisible = true;
        this.$nextTick(() => {
          this.$refs.helpFileList.init(fileMappingDto)
        })
      },
      // 获取数据列表
      getDataList () {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/sys/menu/list/'+this.$i18n.locale),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({data}) => {
          this.dataList = treeDataTranslate(data, 'menuId')
          this.dataListLoading = false
        })
      },
      // 新增 / 修改
      addOrUpdateHandle (id) {
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init(id)
        })
      },
      // 语言编辑
      addOrUpdateLanguage (id) {
        this.menuLanguageVisible = true
        this.$nextTick(() => {
          this.$refs.menuLanguageAdd.init(id)
        })
      },
      // 删除
      deleteHandle (id) {
        this.$confirm(`确定对进行[删除]操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl(`/sys/menu/delete/${id}`),
            method: 'post',
            data: this.$http.adornData()
          }).then(({data}) => {
            if (data && data.code === 0) {
               this.$message.success('操作成功')
              this.getDataList()
            } else {
              this.$message.error(data.msg)
            }
          })
        }).catch(() => {})
      }
    },
    created(){
      this.getFunctionButtonList()
    }
  }
</script>