|
|
@@ -1,29 +1,35 @@
|
|
|
<template>
|
|
|
<div class="global-variable">
|
|
|
<div class="condition">
|
|
|
- <el-form :inline="true" :model="formInline" class="demo-form-inline">
|
|
|
- <el-form-item label="单位名称:">
|
|
|
+ <el-form
|
|
|
+ :inline="true"
|
|
|
+ :model="formInline"
|
|
|
+ class="demo-form-inline"
|
|
|
+ ref="ruleForm"
|
|
|
+ :rules="rules"
|
|
|
+ >
|
|
|
+ <el-form-item label="菜单名称:" prop="permissionName">
|
|
|
<el-input
|
|
|
- v-model="formInline.user"
|
|
|
- placeholder="请输入单位名称"
|
|
|
+ v-model="formInline.permissionName"
|
|
|
+ placeholder="请输入菜单名称"
|
|
|
size="small"
|
|
|
></el-input>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="状态:">
|
|
|
+ <el-form-item label="状态:" prop="permissionState">
|
|
|
<el-select
|
|
|
- v-model="formInline.region"
|
|
|
+ v-model="formInline.permissionState"
|
|
|
placeholder="选择状态"
|
|
|
size="small "
|
|
|
>
|
|
|
<el-option label="启用" value="1"></el-option>
|
|
|
- <el-option label="停用" value="2"></el-option>
|
|
|
+ <el-option label="停用" value="0"></el-option>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
<el-form-item>
|
|
|
<el-button type="primary" @click="onSubmit" size="small"
|
|
|
>查询</el-button
|
|
|
>
|
|
|
- <el-button @click="reset" size="small">重置</el-button>
|
|
|
+ <el-button @click="reset('ruleForm')" size="small">重置</el-button>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
</div>
|
|
|
@@ -32,46 +38,57 @@
|
|
|
<el-button type="primary" @click="newnuedialog" size="small"
|
|
|
>新增</el-button
|
|
|
>
|
|
|
+ <el-button type="primary" @click="toggleExpandAll" size="small">{{
|
|
|
+ defaultExpandAll ? "收起" : "展开"
|
|
|
+ }}</el-button>
|
|
|
</div>
|
|
|
<el-table
|
|
|
+ v-loading="loading"
|
|
|
class="center-align-table"
|
|
|
:data="tableData"
|
|
|
border
|
|
|
- :cell-style="rowStyle"
|
|
|
stripe
|
|
|
- row-key="id"
|
|
|
- default-expand-all
|
|
|
+ row-key="permissionId"
|
|
|
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
|
|
+ ref="table"
|
|
|
>
|
|
|
- <el-table-column fixed prop="name" align="center" label="单位名称">
|
|
|
+ <el-table-column prop="permissionName" label="菜单名称">
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="" align="center" label="类型"> </el-table-column>
|
|
|
-
|
|
|
- <el-table-column prop="abnormal" label="排序" width="80">
|
|
|
+ <el-table-column
|
|
|
+ prop="permissionType"
|
|
|
+ label="类型"
|
|
|
+ width="100"
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
<template slot-scope="scope">
|
|
|
- <el-button
|
|
|
- v-if="scope.row.abnormal == 1"
|
|
|
- @click="particulars(scope.row)"
|
|
|
- type="text"
|
|
|
- size="small"
|
|
|
- >10</el-button
|
|
|
- >
|
|
|
- <span v-else>/</span>
|
|
|
+ <span>{{ scope.row.permissionType == 1 ? "菜单" : "功能" }}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
|
|
|
- <el-table-column prop="" align="center" label="权限标识" width="100">
|
|
|
+ <el-table-column
|
|
|
+ prop="permissionSort"
|
|
|
+ label="排序"
|
|
|
+ width="80"
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column prop="permissionCode" label="权限标识" align="center">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="permissionUrl" label="路径" align="center">
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="" align="center" label="路径"> </el-table-column>
|
|
|
- <el-table-column prop="" align="center" label="状态"> </el-table-column>
|
|
|
<el-table-column
|
|
|
- prop="transition"
|
|
|
+ prop="permissionState"
|
|
|
+ label="状态"
|
|
|
align="center"
|
|
|
- fixed="right"
|
|
|
- label="操作"
|
|
|
- width="200"
|
|
|
+ width="80"
|
|
|
>
|
|
|
<template slot-scope="scope">
|
|
|
+ <span>{{ scope.row.permissionState === 1 ? "启用" : "停用" }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column fixed="right" label="操作" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
<el-button @click="compile(scope.row)" type="text" size="small"
|
|
|
>编辑</el-button
|
|
|
>
|
|
|
@@ -79,8 +96,8 @@
|
|
|
>新增</el-button
|
|
|
>
|
|
|
<el-button
|
|
|
- v-if="scope.row.transition == 1"
|
|
|
- @click="start(scope.row)"
|
|
|
+ v-if="scope.row.permissionState === 0"
|
|
|
+ @click="updateState(scope.row, 1)"
|
|
|
type="text"
|
|
|
size="small"
|
|
|
>启用</el-button
|
|
|
@@ -88,7 +105,7 @@
|
|
|
<el-button
|
|
|
v-else
|
|
|
style="color: #666"
|
|
|
- @click="stop(scope.row)"
|
|
|
+ @click="updateState(scope.row, 0)"
|
|
|
type="text"
|
|
|
size="small"
|
|
|
>停用</el-button
|
|
|
@@ -103,188 +120,191 @@
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
- <div class="pagination-container">
|
|
|
- <el-pagination
|
|
|
- :page-size="10"
|
|
|
- :pager-count="11"
|
|
|
- layout="total, prev, pager, next"
|
|
|
- :total="35"
|
|
|
- >
|
|
|
- </el-pagination>
|
|
|
- </div>
|
|
|
</div>
|
|
|
|
|
|
- <!-- 弹出层 -->
|
|
|
- <!-- 新增 -->
|
|
|
- <el-dialog :title="title" :visible.sync="nuedialog" width="380px">
|
|
|
- <el-form ref="newform" :rules="rules" :model="newform" label-width="90px">
|
|
|
- <el-form-item label="单位名称:" prop="unit">
|
|
|
- <el-input v-model="newform.unit" size="small"></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="所属省:" prop="province">
|
|
|
- <el-select
|
|
|
- v-model="newform.province"
|
|
|
- placeholder="请选择"
|
|
|
+ <!-- 新增编辑弹出层 -->
|
|
|
+ <el-dialog :title="title" :visible.sync="unusualdialog" width="500px">
|
|
|
+ <div v-loading="loadingView" class="views">
|
|
|
+ <el-tabs type="border-card" class="tabs" v-model="activeName">
|
|
|
+ <el-tab-pane label="目录" name="1"
|
|
|
+ ><EditMenu
|
|
|
+ ref="addList"
|
|
|
+ :activeName="activeName"
|
|
|
+ :tableData="tableData"
|
|
|
+ :checkId="checkId"
|
|
|
+ :title="title"
|
|
|
+ @updateList="updateList"
|
|
|
+ />
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="菜单" name="2"
|
|
|
+ ><EditMenu
|
|
|
+ ref="addMenu"
|
|
|
+ :activeName="activeName"
|
|
|
+ :tableData="tableData"
|
|
|
+ :checkId="checkId"
|
|
|
+ :title="title"
|
|
|
+ @updateList="updateList"
|
|
|
+ :row="row"
|
|
|
+ /></el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button
|
|
|
+ @click="
|
|
|
+ () => {
|
|
|
+ this.$refs.addMenu.cancel();
|
|
|
+ this.loadingView = false;
|
|
|
+ this.unusualdialog = false;
|
|
|
+ this.checkId = '';
|
|
|
+ }
|
|
|
+ "
|
|
|
size="small"
|
|
|
+ >取 消</el-button
|
|
|
>
|
|
|
- <el-option label="区域一" value="shanghai"></el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="所属市:" prop="city">
|
|
|
- <el-select v-model="newform.city" placeholder="请选择" size="small">
|
|
|
- <el-option label="区域一" value="shanghai"></el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="备注:">
|
|
|
- <el-input
|
|
|
- v-model="newform.name"
|
|
|
- size="small"
|
|
|
- type="textarea"
|
|
|
- ></el-input>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- <span slot="footer" class="dialog-footer">
|
|
|
- <el-button @click="nuedialog = false" size="small">取 消</el-button>
|
|
|
- <el-button type="primary" @click="newly" size="small">确 定</el-button>
|
|
|
- </span>
|
|
|
- </el-dialog>
|
|
|
-
|
|
|
- <!-- 风场数量 -->
|
|
|
- <el-dialog title="风场数量" :visible.sync="unusualdialog" width="1000px">
|
|
|
- <el-table
|
|
|
- class="center-align-table"
|
|
|
- :data="tableData"
|
|
|
- border
|
|
|
- :cell-style="rowStyle"
|
|
|
- stripe
|
|
|
- >
|
|
|
- <!-- Table Columns -->
|
|
|
- <el-table-column fixed prop="name" align="center" label="风场名称">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="" align="center" label="所在省">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="" align="center" label="所在市">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="" align="center" label="海拔高度" width="80">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="" align="center" label="经度" width="80">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="" align="center" label="纬度" width="80">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="" align="center" label="额定容量">
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
-
|
|
|
- <div class="pagination-container">
|
|
|
- <el-pagination
|
|
|
- :page-size="10"
|
|
|
- :pager-count="11"
|
|
|
- layout="total, prev, pager, next"
|
|
|
- :total="35"
|
|
|
- >
|
|
|
- </el-pagination>
|
|
|
+ <el-button type="primary" @click="editAuthMenu" size="small"
|
|
|
+ >确 定</el-button
|
|
|
+ >
|
|
|
+ </span>
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import {
|
|
|
+ addMenuFn,
|
|
|
+ deleteMenuFn,
|
|
|
+ updateMenuFn,
|
|
|
+ getAllMenu,
|
|
|
+} from "@/api/system";
|
|
|
+import EditMenu from "./components/editDialog.vue";
|
|
|
export default {
|
|
|
+ components: {
|
|
|
+ EditMenu,
|
|
|
+ },
|
|
|
data() {
|
|
|
return {
|
|
|
+ activeName: "1",
|
|
|
+ title: "",
|
|
|
+ loadingView: false,
|
|
|
+ defaultExpandAll: true,
|
|
|
+ row: {},
|
|
|
rules: {
|
|
|
- unit: [{ required: true, message: "请填写单位名称", trigger: "blur" }],
|
|
|
- province: [{ required: true, message: "请选择省", trigger: "change" }],
|
|
|
- city: [{ required: true, message: "请选择省", trigger: "change" }],
|
|
|
+ roleId: { permissionName: "change" },
|
|
|
+ userName: { permissionState: "blur" },
|
|
|
},
|
|
|
+ loading: false,
|
|
|
formInline: {
|
|
|
- user: "",
|
|
|
- region: "",
|
|
|
+ permissionName: "",
|
|
|
+ permissionState: "",
|
|
|
},
|
|
|
- tableData: [
|
|
|
- {
|
|
|
- id: 1,
|
|
|
- name: "王小虎",
|
|
|
- transition: "1",
|
|
|
- },
|
|
|
- {
|
|
|
- id: 3,
|
|
|
- name: "王小虎",
|
|
|
- abnormal: "1",
|
|
|
- transition: "0",
|
|
|
- children: [
|
|
|
- {
|
|
|
- id: 31,
|
|
|
-
|
|
|
- name: "王小虎",
|
|
|
-
|
|
|
- abnormal: "1",
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- ],
|
|
|
- nuedialog: false,
|
|
|
+ tableData: [],
|
|
|
unusualdialog: false,
|
|
|
- newform: {
|
|
|
- unit: "",
|
|
|
- province: "",
|
|
|
- city: "",
|
|
|
- descr: "",
|
|
|
- },
|
|
|
- title: "新增",
|
|
|
- warningShown: false,
|
|
|
+ checkId: "",
|
|
|
};
|
|
|
},
|
|
|
+ created() {
|
|
|
+ this.getTableList();
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ tableData: {
|
|
|
+ handler(newData) {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.setExpandAll(this.defaultExpandAll);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ immediate: true,
|
|
|
+ deep: true,
|
|
|
+ },
|
|
|
+ },
|
|
|
methods: {
|
|
|
- rowStyle() {
|
|
|
- return "text-align:center";
|
|
|
+ toggleExpandAll() {
|
|
|
+ this.defaultExpandAll = !this.defaultExpandAll;
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.setExpandAll(this.defaultExpandAll);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ setExpandAll(expand) {
|
|
|
+ const table = this.$refs.table;
|
|
|
+ if (table) {
|
|
|
+ this.tableData.forEach((row) => {
|
|
|
+ table.toggleRowExpansion(row, expand);
|
|
|
+ if (row.children) {
|
|
|
+ row.children.forEach((child) => {
|
|
|
+ table.toggleRowExpansion(child, expand);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async getTableList() {
|
|
|
+ try {
|
|
|
+ this.loading = true;
|
|
|
+ const result = await getAllMenu({ ...this.formInline });
|
|
|
+ this.tableData = result.data;
|
|
|
+ this.loading = false;
|
|
|
+ } catch (error) {
|
|
|
+ this.$message({
|
|
|
+ type: "error",
|
|
|
+ message: "请检查是否连接网络",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //弹框确定按钮
|
|
|
+ editAuthMenu() {
|
|
|
+ if (this.activeName === "1") {
|
|
|
+ this.$refs.addList.submit();
|
|
|
+ this.checkId = "";
|
|
|
+ //目录
|
|
|
+ } else {
|
|
|
+ //菜单
|
|
|
+ this.$refs.addMenu.submit();
|
|
|
+ this.checkId = "";
|
|
|
+ }
|
|
|
+ },
|
|
|
+ updateList() {
|
|
|
+ console.log("updateList");
|
|
|
+ this.getTableList();
|
|
|
+ this.unusualdialog = false;
|
|
|
},
|
|
|
-
|
|
|
// 查询
|
|
|
onSubmit() {
|
|
|
- console.log("submit!");
|
|
|
+ this.getTableList();
|
|
|
},
|
|
|
// 重置
|
|
|
- reset() {
|
|
|
- this.formInline.user = "";
|
|
|
- this.formInline.region = "";
|
|
|
- },
|
|
|
- // 新增
|
|
|
- newly() {
|
|
|
- this.nuedialog = false;
|
|
|
- },
|
|
|
-
|
|
|
- //异常详情
|
|
|
- particulars(row) {
|
|
|
- this.unusualdialog = true;
|
|
|
+ reset(formName) {
|
|
|
+ this.$refs[formName].resetFields();
|
|
|
+ this.getTableList();
|
|
|
},
|
|
|
// 编辑
|
|
|
compile(row) {
|
|
|
- this.nuedialog = true;
|
|
|
+ this.unusualdialog = true;
|
|
|
+ this.activeName = "2";
|
|
|
+ this.checkId = row.permissionId;
|
|
|
+ this.row = row;
|
|
|
this.title = "编辑";
|
|
|
},
|
|
|
// 新增子级
|
|
|
newcomer(row) {
|
|
|
- this.nuedialog = true;
|
|
|
+ this.unusualdialog = true;
|
|
|
+ this.checkId = row.permissionId;
|
|
|
+ this.activeName = "2";
|
|
|
this.title = "新增";
|
|
|
},
|
|
|
- // 启用
|
|
|
- start(row) {},
|
|
|
- // 停用
|
|
|
- stop(row) {},
|
|
|
- // 删除
|
|
|
- deleted(row) {
|
|
|
- if (row.transition === "0") {
|
|
|
- if (!this.warningShown) {
|
|
|
+ // 启用/停用
|
|
|
+ updateState(row, state) {
|
|
|
+ updateMenuFn({ permissionId: row.permissionId, pstat: state })
|
|
|
+ .then((res) => {
|
|
|
this.$message({
|
|
|
- type: "error",
|
|
|
- message: "该项处于停用状态，无法删除！",
|
|
|
+ message: "状态更新成功",
|
|
|
+ type: "success",
|
|
|
});
|
|
|
- this.warningShown = true; // 设置警告消息已经显示过了的标志位为true
|
|
|
- }
|
|
|
- return;
|
|
|
- }
|
|
|
+ this.getTableList();
|
|
|
+ })
|
|
|
+ .catch(() => {});
|
|
|
+ },
|
|
|
|
|
|
+ // 删除
|
|
|
+ deleted(row) {
|
|
|
this.$confirm("此操作将永久删除该文件，是否继续？", "提示", {
|
|
|
confirmButtonText: "确定",
|
|
|
cancelButtonText: "取消",
|
|
|
@@ -292,10 +312,15 @@ export default {
|
|
|
})
|
|
|
.then(() => {
|
|
|
// 执行删除操作
|
|
|
- this.$message({
|
|
|
- type: "success",
|
|
|
- message: "删除成功！",
|
|
|
- });
|
|
|
+ deleteMenuFn({ permissionId: row.permissionId })
|
|
|
+ .then(() => {
|
|
|
+ this.$message({
|
|
|
+ type: "success",
|
|
|
+ message: "删除成功！",
|
|
|
+ });
|
|
|
+ this.getTableList();
|
|
|
+ })
|
|
|
+ .catch(() => {});
|
|
|
})
|
|
|
.catch(() => {
|
|
|
// 取消删除
|
|
|
@@ -305,9 +330,10 @@ export default {
|
|
|
});
|
|
|
});
|
|
|
},
|
|
|
-
|
|
|
+ //新增菜单目录
|
|
|
newnuedialog() {
|
|
|
- this.nuedialog = true;
|
|
|
+ this.unusualdialog = true;
|
|
|
+ this.activeName = "1";
|
|
|
this.title = "新增";
|
|
|
},
|
|
|
},
|
liujiejie