dy-admin-manager/src/views/setSilder/addSilder.vue

<template>
  <div class="m-container">
    <!-- <h2><div class="squrt"></div>侧边栏管理
    </h2> -->
    <div class="m-core slider-container">
      <div style="position: fixed; z-index: 100; top: 155px;left: 245px;right: 30px">
        <el-input placeholder="请输入关键词" v-model="keyword" clearable>
          <el-button
            v-permission="'menu/add'"
            @click='onOperation("create")'
            slot="append"
          >添加按钮</el-button>
        </el-input>
      </div>
      <div class="tableWrap">
        <el-table :data="tableList"
              style="width: 100%;margin-bottom: 20px;margin-top: 40px;"
              row-key="id"
              border
              :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
          <el-table-column width="300px"
                          prop="name"
                          label="菜单名称">
          </el-table-column>
          <el-table-column prop="id"
                          width="100px"
                          label="元素ID">
          </el-table-column>
          <el-table-column label="菜单类型"
                          width="100px">
            <template slot-scope="scope">
              {{ scope.row.type == 1 ? '按钮' : '菜单' }}
            </template>
          </el-table-column>
          <el-table-column prop="sort"
                          width="100px"
                          label="排序">
          </el-table-column>
          <el-table-column prop="path"
                          label="文件路径">
          </el-table-column>
          <el-table-column prop="parentPermission"
                          label="高亮路径">
          </el-table-column>
          <el-table-column prop="permission"
                          label="接口权限">
          </el-table-column>
          <el-table-column prop="memo"
                          label="页面权限">
          </el-table-column>
          <el-table-column prop="hid"
                          width="100px"
                          label="是否隐藏">
            <template slot-scope="scope">
              {{ scope.row.hid == 1 ? '隐藏' : '不隐藏' }}
            </template>
          </el-table-column>
          <el-table-column width="100px"
                          label="是否缓存">
            <template slot-scope="scope">
              <div>
                {{ parseInt(scope.row.keepAlive)  == '0' ? '缓存' : '不缓存' }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button @click="onOperation('update', scope.row)" v-permission="'menu/update'"
                        type="text">修改</el-button>
              <el-button @click="onDelete(scope.row)" v-permission="'menu/del'"
                        type="text">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-dialog title="侧边栏管理"
               :close-on-click-modal="false"
               :visible.sync="branchStatus"
               default-expand-all
               @close="onFormClose('ruleForm')"
               width="500px">
      <el-form :model="form"
               :rules="rules"
               ref="ruleForm">
        <el-form-item label="菜单类型"
                      :label-width="formLabelWidth">
          <el-select v-model.trim.number="form.type" style="width: 100% !important;">
            <el-option label="菜单"
                       :value="0"></el-option>
            <el-option label="按钮"
                       :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="菜单名"
                      prop="name"
                      :label-width="formLabelWidth">
          <el-input v-model.trim="form.name"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="文件路径"
                      prop="path"
                      v-if="form.type == 0"
                      :label-width="formLabelWidth">
          <el-input v-model.trim="form.path"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="接口权限"
                      prop="permission"
                      :label-width="formLabelWidth">
          <el-input v-model.trim="form.permission"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="页面权限"
                      prop="memo"
                      :label-width="formLabelWidth">
          <el-input v-model.trim="form.memo"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="高亮路径"
                      v-if="form.type == 0"
                      :label-width="formLabelWidth">
          <el-input v-model.trim="form.parentPermission"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="组件名"
                      prop="component"
                      v-if="form.type == 0"
                      :label-width="formLabelWidth">
          <el-input v-model.trim="form.component"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="父元素ID"
                      prop="parentId"
                      :label-width="formLabelWidth">
          <el-cascader v-model="form.parentId"
                       style="width:100%"
                       :options="cascaderList"
                       :props="optionProps"></el-cascader>
        </el-form-item>
        <el-form-item label="是否隐藏"
                      :label-width="formLabelWidth">
          <el-select v-model.trim="form.hid" style="width: 100% !important;">
            <el-option label="否"
                       :value="0"></el-option>
            <el-option label="是"
                       :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否缓存"
                      :label-width="formLabelWidth">
          <el-select v-model.trim="form.keepAlive" style="width: 100% !important;">
            <el-option label="是"
                       :value="0"></el-option>
            <el-option label="否"
                      :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序"
                      :label-width="formLabelWidth">
          <el-input v-model.trim="form.sort"
                    autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="branchStatus = false">取 消</el-button>
        <el-button @click="onBranchSubmit"
                   type="primary">确 定</el-button>
      </span>
    </el-dialog>
    </div>
  </div>
</template>
<script>
import { addSilder, getSilder, deleteSilder, resetSilder } from '@/api/silder'
import { debounce } from 'lodash'
export default {
  name: 'addSilder',
  data () {
    return {
      keyword: '',
      tableListFilter: [],
      tableList: [], // 数据列表
      cascaderList: [], // 父级元素
      formLabelWidth: '100px',
      branchStatus: false,
      operationType: 'create',
      form: {
        name: null,
        path: null,
        permission: null,
        parentId: null,
        sort: 1,
        component: null,
        hid: 0,
        type: 0,
        parentPermission: null,
        keepAlive: 1
      },
      rules: {
        name: [{ required: true, message: "请输入菜单名", trigger: "blur" }],
        path: [{ required: true, message: "请输入文件路径", trigger: "blur" }],
        component: [{ required: true, message: "请输入组件名", trigger: "blur" }],
        permission: [{ required: true, message: "请输入接口权限", trigger: "blur" }],
        memo: [{ required: true, message: "请输入页面权限", trigger: "blur" }],
        parentId: [{ required: true, message: "请输入父元素ID", trigger: "blur" }],
      },
      optionProps: {
        value: 'id',
        label: 'name',
        children: 'children',
        checkStrictly: true
      }
    }
  },
  mounted () {
    this.lookSilder() // 查询
  },
  methods: {
    /**
     * {
        path:'/teamDetail',
        component: 'Layout',
        name:'业务管理',
        sysMenus:[
          // 乐团管理
          // 小课管理
          // 老师管理
          // 学员管理
        ]
      }
     */
    filterList(list, key) {
      return list.filter(item => {
        const isVisible = (
          (item.name || '').indexOf(key) > -1 ||
          (item.memo || '').indexOf(key) > -1 ||
          (item.memo || '').indexOf(key) > -1 ||
          (item.permission || '').indexOf(key) > -1
        )
        const child = this.filterList(item.children || [], key)
        return isVisible || child.length
      })
    },
    onOperation (type, row) {
      this.branchStatus = true
      this.operationType = type
      if (type == 'update') {
        this.form = {
          name: row.name,
          path: row.path,
          permission: row.permission,
          parentId: row.parentId,
          sort: row.sort,
          component: row.component,
          id: row.id,
          hid: row.hid,
          type: Number(row.type),
          parentPermission: row.parentPermission,
          keepAlive: Number(row.keepAlive),
          memo: row.memo
        }
      }
    },
    onBranchSubmit (type) {
      // ruleForm
      this.$refs["ruleForm"].validate(valid => {
        if (valid) {
          let form = this.form

          if (this.operationType == 'create') {
            addSilder({
              path: form.path,
              component: form.component,
              name: form.name,
              permission: form.permission,
              sort: form.sort,
              parentId: form.parentId.pop(),
              hid: form.hid,
              type: form.type,
              parentPermission: form.parentPermission,
              keepAlive: form.keepAlive,
              memo: form.memo
            }).then(res => {
              if (res.code == 200) {
                this.$message.success('添加成功')
                this.lookSilder()
                this.branchStatus = false
              }
            })
          } else if (this.operationType == 'update') {
            if(typeof form.parentId === 'object') {
              form.parentId = form.parentId.pop()
            }
            resetSilder(form).then(res => {
              if (res.code == 200) {
                this.$message.success('修改成功')
                this.lookSilder()
                this.branchStatus = false
              }
            })
          }
        } else {
          return false;
        }
      });

    },

    lookSilder () {
      getSilder().then(res => {
        if (res.code != 200) return
        this.tableList = this.setTableData(res.data)
        this.cascaderList = this.setTableData(res.data)
        this.cascaderList.unshift({
          id: 0,
          name: '根结点',
          children: []
        })
      })
    },
    setTableData (result) {
      let list = []
      list = result.map(res => {
        let tempList = {}
        tempList = {
          id: res.id,
          name: res.name,
          type: res.type,
          path: res.path,
          permission: res.permission,
          icon: res.icon,
          parentId: res.parentId,
          component: res.component,
          sort: res.sort,
          hid: res.hid,
          type: res.type,
          keepAlive: res.keepAlive,
          parentPermission: res.parentPermission,
          memo: res.memo
        }
        if (res.sysMenus && res.sysMenus.length > 0) {
          tempList.children = this.setTableData(res.sysMenus)
        }
        return tempList
      })
      return list
    },
    onDelete (row) { // 删除左则菜单
      deleteSilder(row.id).then(res => {
        if (res.code == 200) {
          this.$message.success('删除成功')
          this.lookSilder()
          this.branchStatus = false
        }
      })
    },
    onFormClose (formName) { // 关闭弹窗重置验证
      this.form = {
        name: null,
        path: null,
        permission: null,
        parentId: null,
        sort: 1,
        component: null,
        hid: 0,
        type: 0,
        parentPermission: null,
        keepAlive: 1
      }
      this.$refs[formName].resetFields()
    }

  },
}
</script>
<style lang="scss">
.slider-container {
  background: #fff;
  padding: 20px;
  .el-table {
    margin-top: 20px;
  }
}
</style>