udi-spms-vue/src/views/system/param/helpSettings.vue

<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="mini" :inline="true" v-show="showSearch" label-width="68px">


      <el-form-item label="菜单名称:" prop="menuName" label-width="80px">
        <el-input
          v-model="queryParams.menuName"
          placeholder="请输入菜单名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="状态:" prop="status">
        <el-select v-model="queryParams.status" style="width: 90%" placeholder="状态">
          <el-option label="启用" value="1"></el-option>
          <el-option label="禁用" value="0"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button-group>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          <el-button
            type="primary" icon="el-icon-plus"  @click="addMenu"
          >新增
          </el-button>
        </el-button-group>
      </el-form-item>


    </el-form>
    <el-table ref="tables" v-loading="loading" :data="list"
               border>
      <el-table-column label="序号" type="index"></el-table-column>
      <el-table-column label="组件路径" align="center" prop="menuKey"/>
      <el-table-column label="菜单名称" align="center" prop="menuName"/>

      <el-table-column label="状态" align="center" prop="status" width="130">
        <template slot-scope="scope">
          <el-tag>{{ statusMap[scope.row.status] }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="备注" align="center" prop="remark" />

      <el-table-column label="修改日期" align="center" prop="updateTime">
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="handleView(scope.row,scope.index)"
          >编辑
          </el-button>

          <el-button
            type="text"
            @click="deleteMenu(scope.row.id)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.page"
      :limit.sync="queryParams.limit"
      @pagination="getList"
    />


    <el-dialog
      :title="formMap[formName]"
      :visible.sync="addMenuVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="60%"
      v-if="addMenuVisible"
      append-to-body
      @close='closeLocalDialog'
    >
      <addhelpSettings
        :closeDialog="closeLocalDialog"
        :from="form"
        :formName="formName"
      ></addhelpSettings>
    </el-dialog>

  </div>
</template>

<script>
 import {list} from "@/api/system/sysMenuHelp";
 import addhelpSettings from "@/views/system/param/addhelpSettings";
 import {deleteMenuHelp} from "@/api/system/sysMenuHelp";



 export default {
  name: "Operlog",
  dicts: ['sys_oper_type', 'sys_common_status'],
  data() {
    return {
      statusMap: {
        0: "禁用",
        1: "启用"
      },
      formName: 1,
      formMap: {
        1: "新增菜单",
        2: "编辑菜单",
      },
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      list: [],
      // 是否显示弹出层
      open: false,
      // 日期范围
      dateRange: [],
      // 表单参数
      form: {},
      // 查询参数
      addMenuVisible:false,
      queryParams: {
        page: 1,
        limit: 10,
        menuName: "",
        status: null
      }
    };
  },
  created() {
    this.getList();
  },

  components: {
    addhelpSettings
  },
  methods: {
    /** 查询登录日志 */
    getList() {
      this.loading = true;

      list(this.queryParams).then(response => {
          this.list = response.data.list;
          this.total = response.data.total;
          this.loading = false;
        }
      );
    },
    // 操作日志类型字典翻译
    typeFormat(row, column) {
      return this.selectDictLabel(this.dict.type.sys_oper_type, row.businessType);
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.page = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      let queryParams= {
          page: 1,
          limit: 10,
          menuName: "",
          status: null
      }
      this.getList();

    },
    deleteMenu(row){
      let params={id:row}
      deleteMenuHelp(params).then((res) =>{
        if(res.code === 20000){
          this.$message.success("删除成功")
          this.getList();
        }
      })
    },

    /** 编辑按钮操作 */
    handleView(row) {
      debugger
      this.addMenuVisible=true;
      this.formName=2;
      this.form = row;
    },

    addMenu(){
      this.addMenuVisible=true;
      this.form={};
    },
    closeLocalDialog(){
      this.addMenuVisible=false;
    },



  }
};
</script>