整体样式修改

ali

2024-09-03 0ae83a895e80a4b9777a27f613d721a7e5e2ac18

 energy_management_ui/src/views/system/menu/index.vue

@@ -1,7 +1,12 @@
<template>
  <div>
    <basic-container>
      <el-form class="special-form" label-width="73px" :model="queryParams" ref="queryForm">
      <el-form
        class="special-form"
        label-width="73px"
        :model="queryParams"
        ref="queryForm"
      >
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item label="菜单名称">
@@ -16,7 +21,13 @@
          </el-col>
          <el-col :span="6">
            <el-form-item label="状态">
              <el-select v-model="queryParams.visible" placeholder="菜单状态" clearable size="small" style="width: 100%">
              <el-select
                v-model="queryParams.visible"
                placeholder="菜单状态"
                clearable
                size="small"
                style="width: 100%"
              >
                <el-option
                    v-for="dict in visibleOptions"
                    :key="dict.dictValue"
@@ -28,8 +39,20 @@
          </el-col>
          <el-col :span="12">
            <el-form-item class="operation">
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
              <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['system:menu:add']">
              <el-button
                type="primary"
                icon="el-icon-search"
                size="mini"
                @click="handleQuery"
                >搜索</el-button
              >
              <el-button
                type="primary"
                icon="el-icon-plus"
                size="mini"
                @click="handleAdd"
                v-hasPermi="['system:menu:add']"
              >
                新增
              </el-button>
            </el-form-item>
@@ -45,24 +68,59 @@
          :height="height"
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      >
        <el-table-column prop="menuName" label="菜单名称" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column
          prop="menuName"
          label="菜单名称"
          align="left"
          min-width="180"
        ></el-table-column>
        <el-table-column prop="icon" label="图标" align="center" width="100px">
          <template slot-scope="scope">
            <svg-icon :icon-class="scope.row.icon"/>
          </template>
        </el-table-column>
        <el-table-column prop="orderNum" label="排序" width="60px"></el-table-column>
        <el-table-column prop="perms" label="权限标识" width="130px" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="component" label="组件路径" width="180px" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="visible" label="可见" :formatter="visibleFormat" width="80px"></el-table-column>
        <el-table-column label="创建时间" align="center" prop="createTime" width="180">
        <el-table-column
          prop="orderNum"
          label="排序"
          width="60px"
        ></el-table-column>
        <el-table-column
          prop="perms"
          label="权限标识"
          width="130px"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          prop="component"
          label="组件路径"
          width="180px"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          prop="visible"
          label="可见"
          :formatter="visibleFormat"
          width="80px"
        ></el-table-column>
        <el-table-column
          label="创建时间"
          align="center"
          prop="createTime"
          width="180"
        >
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="180" class-name="small-padding fixed-width">
        <el-table-column
          label="操作"
          align="center"
          width="240"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button size="mini"
            <el-button
              size="mini"
                       type="text"
                       icon="el-icon-edit"
                       @click="handleUpdate(scope.row)"
@@ -120,7 +178,12 @@
                    @show="$refs['iconSelect'].reset()"
                >
                  <IconSelect ref="iconSelect" @selected="selected"/>
                  <el-input slot="reference" v-model="form.icon" placeholder="点击选择图标" readonly>
                  <el-input
                    slot="reference"
                    v-model="form.icon"
                    placeholder="点击选择图标"
                    readonly
                  >
                    <svg-icon
                        v-if="form.icon"
                        slot="prefix"
@@ -128,19 +191,30 @@
                        class="el-input__icon"
                        style="height: 32px;width: 16px;"
                    />
                    <i v-else slot="prefix" class="el-icon-search el-input__icon"/>
                    <i
                      v-else
                      slot="prefix"
                      class="el-icon-search el-input__icon"
                    />
                  </el-input>
                </el-popover>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="菜单名称" prop="menuName">
                <el-input v-model="form.menuName" placeholder="请输入菜单名称"/>
                <el-input
                  v-model="form.menuName"
                  placeholder="请输入菜单名称"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="显示排序" prop="orderNum">
                <el-input-number v-model="form.orderNum" controls-position="right" :min="0"/>
                <el-input-number
                  v-model="form.orderNum"
                  controls-position="right"
                  :min="0"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
@@ -152,18 +226,29 @@
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item v-if="form.menuType != 'F'" label="路由地址" prop="path">
              <el-form-item
                v-if="form.menuType != 'F'"
                label="路由地址"
                prop="path"
              >
                <el-input v-model="form.path" placeholder="请输入路由地址"/>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="form.menuType == 'C'">
              <el-form-item label="组件路径" prop="component">
                <el-input v-model="form.component" placeholder="请输入组件路径"/>
                <el-input
                  v-model="form.component"
                  placeholder="请输入组件路径"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item v-if="form.menuType != 'M'" label="权限标识">
                <el-input v-model="form.perms" placeholder="请权限标识" maxlength="50"/>
                <el-input
                  v-model="form.perms"
                  placeholder="请权限标识"
                  maxlength="50"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
@@ -179,8 +264,15 @@
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item v-if="form.menuType != 'F'" label="页面参数" prop="parameter">
                <el-input v-model="form.parameter" placeholder="请输入页面参数"/>
              <el-form-item
                v-if="form.menuType != 'F'"
                label="页面参数"
                prop="parameter"
              >
                <el-input
                  v-model="form.parameter"
                  placeholder="请输入页面参数"
                />
              </el-form-item>
            </el-col>
          </el-row>
@@ -195,11 +287,18 @@
</template>

<script>
import {listMenu, getMenu, treeselect, delMenu, addMenu, updateMenu} from "@/api/system/menu";
import {
  listMenu,
  getMenu,
  treeselect,
  delMenu,
  addMenu,
  updateMenu
} from "@/api/system/menu";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import IconSelect from "@/components/IconSelect";
import mixins from '@/layout/mixin/getHeight';
import mixins from "@/layout/mixin/getHeight";

export default {
  name: "Menu",
@@ -247,10 +346,10 @@
  methods: {
    setCharts() {
      this.bodyStyle ={
        height:window.innerHeight - 210+ 'px',
        overflow: 'hidden'
      }
      this.height = window.innerHeight - 270
        height: window.innerHeight - 210 + "px",
        overflow: "hidden"
      };
      this.height = window.innerHeight - 270;
    },
    // 选择图标
    selected(name) {
@@ -268,7 +367,7 @@
    getTreeselect() {
      treeselect().then(response => {
        this.menuOptions = [];
        const menu = {id: 0, label: '主类目', children: []};
        const menu = { id: 0, label: "主类目", children: [] };
        menu.children = response.data;
        this.menuOptions.push(menu);
      });
@@ -353,30 +452,43 @@
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.$confirm('是否确认删除名称为"' + row.menuName + '"的数据项?', "警告", {
      this.$confirm(
        '是否确认删除名称为"' + row.menuName + '"的数据项?',
        "警告",
        {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        }
      )
        .then(function() {
        return delMenu(row.menuId);
      }).then(() => {
        })
        .then(() => {
        this.getList();
        this.msgSuccess("删除成功");
      }).catch(function () {
      });
        })
        .catch(function() {});
    }
  }
};
</script>
<style lang="scss" scoped>
.el-table td, .el-table th {
.el-table td,
.el-table th {
  text-align: left !important;
}

.el-form-item {
  margin-bottom: 0;
}
.special-form {
  @import "~@/assets/styles/common-table-form.scss";
}

::v-deep {
  .vue-treeselect__control {
    background: rgb(54, 108, 185, 0.2);
    background-color: rgb(54, 108, 185, 0.2);
    border: 1px solid #366cb9;
    color: #fff;
  }
}
</style>