v3-lab-web/src/views/systemManagement/smallProgramConfig/smallProgramMenu/index.vue

<template>
  <div class="app-container smallProgramMenu">
    <div class="page-container menuPage">
      <div class="page-form-title-box">
        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
          <el-form-item label="" prop="menuName">
            <el-input
              v-model="queryParams.menuName"
              placeholder="请输入菜单名称"
              clearable
              size="small"
            />
          </el-form-item>
          <p class="page-inquire-common-style-button" @click="handleQuery">查询</p>
          <p class="page-reset-common-style-button" @click="resetQuery">重置</p>
          <p class="page-submit-common-style-button"
             style="float: right;"
             @click="handleAdd"
             v-hasPermiRouter="['system:menu:add']"
          >新增</p>
        </el-form>
      </div>
      <div class="page-content-box">
        <el-table class="table-box" border
                  v-loading="loading"
                  :data="menuList"
                  row-key="menuId"
                  :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        >
          <el-table-column prop="menuName" label="菜单名称" :show-overflow-tooltip="true" width="300"></el-table-column>
          <el-table-column prop="perms" label="权限标识" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="path" label="路由标识" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="menuType" label="类型" width="100">
            <template slot-scope="scope">
              <span>{{scope.row.menuType==0?'目录':(scope.row.menuType==1?'菜单':(scope.row.menuType==2?'按钮':''))}}</span>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" align="center" prop="createTime" width="300">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180"
                           v-if="tableButtonType">
            <template slot-scope="scope">
              <div class="table-button-box">
                <p class="table-button-null"></p>
                <p class="table-button-p"
                   v-if="scope.row.level<6"
                   @click="handleAdd(scope.row)"
                   v-hasPermiRouter="['system:menu:add']"
                >新增</p>
                <p class="table-button-p"
                   @click="handleUpdate(scope.row)"
                   v-hasPermiRouter="['system:menu:edit']"
                >修改</p>
                <p class="table-button-p"
                   @click="handleDelete(scope.row)"
                   v-hasPermiRouter="['system:menu:del']"
                >删除</p>
                <p class="table-button-null"></p>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 添加或修改菜单对话框 -->
    <el-dialog :title="title" v-if="open" :visible.sync="open" width="680px" append-to-body :close-on-click-modal="false">
      <el-form ref="dialog-form" :model="form" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="上级菜单">
              <treeselect
                style="width:500px;"
                v-model="form.parentId"
                :options="menuOptions"
                :normalizer="normalizer"
                :show-count="true"
                placeholder="选择上级菜单"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="菜单类型" prop="menuType">
              <el-radio-group v-model="form.menuType" >
                <el-radio
                  v-for="item in menuTypeList"
                  :disabled="item.disabled"
                  :label="item.label">
                  {{item.value}}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="菜单名称" prop="menuName">
              <el-input v-model="form.menuName" placeholder="请输入菜单名称" maxlength="12" style="width:200px;" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item v-if="form.menuType != '2'" prop="path">
              <span slot="label">
                <el-tooltip content="路由标识用于匹配小程序静态路由地址需要与小程序一致" placement="top">
                <i class="el-icon-question" style="color:#999;"></i>
                </el-tooltip>
                路由标识
              </span>
              <el-input v-model="form.path" placeholder="请输入路由地址" maxlength="40" style="width:180px;"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item>
              <el-input v-model="form.perms" placeholder="请输入权限标识" maxlength="40" style="width:200px;"/>
              <span slot="label">
                <el-tooltip content="控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasPermiRouter('system:user:list')`)" placement="top">
                <i class="el-icon-question" style="color:#999;"></i>
                </el-tooltip>
                权限字符
              </span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer dialog-footer-box">
        <p class="dialog-footer-button-null"></p>
        <p class="dialog-footer-button-info" @click="cancel">取消</p>
        <p class="dialog-footer-button-primary" @click="submitForm">确定</p>
        <p class="dialog-footer-button-null"></p>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import { appletMenuList, appletMenuTree, appletMenuAdd, appletMenuUpdate, appletMenuDelete, appletMenuDetail } from "@/api/systemManagement/index";
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import IconSelect from "@/components/IconSelect";
  export default {
    name: 'smallProgramMenu',
    components: { Treeselect, IconSelect },
    data () {
      return {
        tableButtonType:this.hasPermiDom(['system:menu:add','system:menu:edit','system:menu:detail','system:menu:del']),
        // 遮罩层
        loading: false,
        // 显示搜索条件
        showSearch: true,
        // 菜单表格树数据
        menuList:[],
        menuTypeList:[
          {label:1,value:'菜单',disabled:false,},
          {label:2,value:'按钮',disabled:false,},
        ],
        // 菜单树选项
        menuOptions: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          menuName: undefined,
          visible: undefined
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          menuName: [
            { required: true, message: "请输入菜单名称", trigger: "blur" },
            { required: true, message: "请输入菜单名称", validator: this.spaceJudgment, trigger: "blur" }
          ],
          menuType: [
            { required: true, message: "请选择类型", trigger: "blur" },
          ],
          path: [
            { required: true, message: "请输入路由", trigger: "blur" },
            { required: true, message: "请输入路由", validator: this.spaceJudgment, trigger: "blur" }
          ]
        }
      }
    },
    created(){
      this.getList();
    },
    mounted(){

    },
    methods:{
      /** 查询菜单列表 */
      getList() {
        this.loading = true
        appletMenuList({}).then(response => {
          this.menuList = this.handleTree(response.data, "menuId");
          this.loading = false
        });
      },
      /** 转换菜单数据结构 */
      normalizer(node) {
        if (node.children && !node.children.length) {
          delete node.children;
        }
        return {
          id: node.menuId,
          label: node.menuName,
          children: node.children
        };
      },
      /** 查询菜单下拉树结构 */
      getTreeselect() {
        appletMenuList({}).then(response => {
          this.menuOptions = [];
          const menu = { menuId: 0, menuName: '主类目', children: [] };
          menu.children = this.handleTree(response.data, "menuId");
          this.menuOptions.push(menu);
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          menuId: undefined,
          parentId: 0,
          menuName: undefined,
          menuType: "",
          orderNum: undefined,
          isFrame: false,
          isCache: true,
          visible: true,
          status: true,
          isRequired: false
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },

      /** 新增按钮操作 */
      handleAdd(row) {
        this.reset();
        this.getTreeselect();
        if (row != null && row.menuId) {
          this.form.parentId = row.menuId;
        } else {
          this.form.parentId = 0;
        }
        this.open = true;
        this.title = "添加";
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        this.getTreeselect();
        appletMenuDetail({menuId:row.menuId}).then(response => {
          this.form = response.data;
          this.open = true;
          this.title = "修改";
        });
      },
      /** 提交按钮 */
      submitForm: function() {
        this.$refs["dialog-form"].validate(valid => {
          if (valid) {
            let obj = JSON.parse(JSON.stringify(this.form))
            if (obj.menuId != undefined) {
              appletMenuUpdate(obj).then(response => {
                this.msgSuccess(response.message);
                this.open = false;
                this.getList();
              });
            } else {
              appletMenuAdd(obj).then(response => {
                this.msgSuccess(response.message);
                this.open = false;
                this.getList();
              });
            }
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        this.$confirm('是否确认删除?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return appletMenuDelete({menuId:row.menuId});
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        }).catch(() => {});
      }
    },
  }
</script>
<style scoped lang="scss">
  .smallProgramMenu{

  }
</style>