diff --git a/src/api/produceData/index.js b/src/api/produceData/index.js
index 3f01035..427ba52 100644
--- a/src/api/produceData/index.js
+++ b/src/api/produceData/index.js
@@ -31,18 +31,10 @@ export function getProduceDataDetail(data){
   })
 }
 
-// export function cockpitDataMonitor(data) {
-//   return request({
-//     url: '/ip/prod-output/cockpitDataMonitor',
-//     method: 'post',
-//     data: data
-//   })
-// }
-
-export function cockpitDataMonitor(query) {
+export function cockpitDataMonitor(data) {
   return request({
-    url: 'https://restapi.amap.com/v3/weather/weatherInfo?key=95bdbdc1c387a170105f84cd416c4c9f&city=110108',
-    method: 'get',
-    query: query
+    url: '/ip/prod-output/cockpitDataMonitor',
+    method: 'post',
+    data: data
   })
 }
diff --git a/src/assets/icons/svg/orgTreeIcon.svg b/src/assets/icons/svg/orgTreeIcon.svg
new file mode 100644
index 0000000..247a5ae
--- /dev/null
+++ b/src/assets/icons/svg/orgTreeIcon.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>菜单</title>
+    <g id="10系统管理" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="用户管理" transform="translate(-284.000000, -164.000000)" fill-rule="nonzero">
+            <g id="编组-7" transform="translate(284.000000, 162.000000)">
+                <g id="菜单" transform="translate(0.000000, 2.000000)">
+                    <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="16" height="16"></rect>
+                    <path d="M3.00057813,4.49926562 L13.0025156,4.49926562 C13.2786563,4.49926562 13.5025156,4.27540625 13.5025156,3.99926563 C13.5025156,3.723125 13.2786563,3.49926563 13.0025156,3.49926563 L3.00057813,3.49926563 C2.7244375,3.49926563 2.50057813,3.723125 2.50057813,3.99926563 C2.50057813,4.27540625 2.7244375,4.49926562 3.00057813,4.49926562 Z M3.0004375,8.48703125 L12.9786875,8.48703125 C13.2548281,8.48703125 13.4786875,8.26317187 13.4786875,7.98703125 C13.4786875,7.71089062 13.2548281,7.48703125 12.9786875,7.48703125 L3.0004375,7.48703125 C2.72429687,7.48703125 2.5004375,7.71089062 2.5004375,7.98703125 C2.5004375,8.26317187 2.72429687,8.48703125 3.0004375,8.48703125 Z M13.0025156,11.4969063 L3.00057813,11.4969063 C2.7244375,11.4969063 2.50057813,11.7207656 2.50057813,11.9969063 C2.50057813,12.2730469 2.7244375,12.4969063 3.00057813,12.4969063 L13.0025156,12.4969063 C13.2786563,12.4969063 13.5025156,12.2730469 13.5025156,11.9969063 C13.5025156,11.7207656 13.2786563,11.4969063 13.0025156,11.4969063 L13.0025156,11.4969063 Z" id="形状" fill="#373738"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/orgTreeIcon2.svg b/src/assets/icons/svg/orgTreeIcon2.svg
new file mode 100644
index 0000000..a43bd80
--- /dev/null
+++ b/src/assets/icons/svg/orgTreeIcon2.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="127.000000pt" height="127.000000pt" viewBox="0 0 127.000000 127.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,127.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M520 831 c-19 -10 -48 -35 -64 -55 -25 -30 -31 -48 -34 -100 -8 -122
+69 -206 188 -206 119 0 196 84 188 205 -5 74 -36 123 -98 155 -51 26 -133 26
+-180 1z m137 -32 c67 -25 111 -99 98 -165 -8 -45 -57 -100 -101 -114 -100 -33
+-209 62 -190 165 12 62 82 124 143 125 12 0 34 -5 50 -11z"/>
+</g>
+</svg>
diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index 11d9c3d..f3c0b35 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -123,7 +123,7 @@ aside {
 
 //main-container全局样式
 .app-container {
-  padding: 16px;
+  // padding: 16px;
 }
 
 .components-container {
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
index 44fc12f..1845d89 100644
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@@ -17,20 +17,20 @@
 </template>
 
 <script>
-import iframeToggle from "./IframeToggle/index"
+import iframeToggle from "./IframeToggle/index";
 
 export default {
-  name: 'AppMain',
+  name: "AppMain",
   components: { iframeToggle },
   computed: {
     cachedViews() {
-      return this.$store.state.tagsView.cachedViews
+      return this.$store.state.tagsView.cachedViews;
     },
     key() {
-      return this.$route.path
-    }
-  }
-}
+      return this.$route.path;
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
@@ -45,7 +45,7 @@ export default {
   // background-color: #fff;
 }
 
-.fixed-header+.app-main {
+.fixed-header + .app-main {
   padding-top: 56px;
 }
 
@@ -57,7 +57,7 @@ export default {
     flex-direction: column;
   }
 
-  .fixed-header+.app-main {
+  .fixed-header + .app-main {
     padding-top: 90px;
   }
 }
diff --git a/src/main.js b/src/main.js
index 1baa77b..f481d95 100644
--- a/src/main.js
+++ b/src/main.js
@@ -56,6 +56,9 @@ Vue.prototype.DICT_TYPE = DICT_TYPE;
 Vue.prototype.handleTree = handleTree;
 Vue.prototype.addBeginAndEndTime = addBeginAndEndTime;
 Vue.prototype.divide = divide;
+Vue.prototype.tableHeight = function (n) {
+	return window.innerHeight - n;
+};
 
 // 全局组件挂载
 Vue.component("DictTag", DictTag);
diff --git a/src/mixins/tableHeightMixin.js b/src/mixins/tableHeightMixin.js
new file mode 100644
index 0000000..ad23d16
--- /dev/null
+++ b/src/mixins/tableHeightMixin.js
@@ -0,0 +1,20 @@
+export default {
+	data() {
+		return {
+			tableH: this.tableHeight(260),
+		};
+	},
+	created() {
+		this.tableH = this?.heightNum ? this.tableHeight(this.heightNum) : this.tableHeight(260);
+		window.addEventListener('resize', this._setTableHeight);
+	},
+	destroyed() {
+		window.removeEventListener('resize', this._setTableHeight);
+	},
+	methods: {
+		_setTableHeight() {
+			this.tableH = this?.heightNum ? this.tableHeight(this.heightNum) : this.tableHeight(260);
+			// this.tableH = this.tableHeight(260);
+		},
+	},
+};
diff --git a/src/views/copilot/factoryData/index.vue b/src/views/copilot/factoryData/index.vue
index c0c0d1d..a757306 100644
--- a/src/views/copilot/factoryData/index.vue
+++ b/src/views/copilot/factoryData/index.vue
@@ -129,13 +129,12 @@ export default {
       this.companyName = obj.companyName;
     },
     getMes1() {
-      // cockpitDataMonitor({
-      //   factorys: ["1"],
-      //   date: 4,
-      // }).then((res) => {
-      //   console.log(res);
-      // });
-      cockpitDataMonitor().then((res) => {});
+      cockpitDataMonitor({
+        factorys: [1],
+        date: 4,
+      }).then((res) => {
+        console.log(res);
+      });
     },
   },
 };
diff --git a/src/views/system/components/statusBtn.vue b/src/views/system/components/statusBtn.vue
new file mode 100644
index 0000000..14dda42
--- /dev/null
+++ b/src/views/system/components/statusBtn.vue
@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <span class="dot" :class="injectData.status === 1 ? 'red' : 'green'"></span>
+    <span>{{ state }}</span>
+  </div>
+</template>
+<script>
+export default {
+  name: "StatusBtn",
+  props: {
+    injectData: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  computed: {
+    state() {
+      return this.injectData.status === 1 ? "停用" : "启用";
+    },
+  },
+};
+</script>
+<style scoped>
+.dot {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 3px;
+  vertical-align: middle;
+  margin-right: 8px;
+}
+.green {
+  background: #10dc76;
+}
+.red {
+  background: #ff5656;
+}
+</style>
diff --git a/src/views/system/post/assets/images/Qian.png b/src/views/system/post/assets/images/Qian.png
new file mode 100644
index 0000000..07e4170
Binary files /dev/null and b/src/views/system/post/assets/images/Qian.png differ
diff --git a/src/views/system/post/assets/images/arrow.png b/src/views/system/post/assets/images/arrow.png
new file mode 100644
index 0000000..a1aa06f
Binary files /dev/null and b/src/views/system/post/assets/images/arrow.png differ
diff --git a/src/views/system/post/assets/images/factory-icon.png b/src/views/system/post/assets/images/factory-icon.png
new file mode 100644
index 0000000..0f90ed8
Binary files /dev/null and b/src/views/system/post/assets/images/factory-icon.png differ
diff --git a/src/views/system/post/assets/images/tree-icon-2.png b/src/views/system/post/assets/images/tree-icon-2.png
new file mode 100644
index 0000000..e9e5801
Binary files /dev/null and b/src/views/system/post/assets/images/tree-icon-2.png differ
diff --git a/src/views/system/post/components/InPageLeftNav.vue b/src/views/system/post/components/InPageLeftNav.vue
new file mode 100644
index 0000000..20f4cf3
--- /dev/null
+++ b/src/views/system/post/components/InPageLeftNav.vue
@@ -0,0 +1,445 @@
+<template>
+  <div class="in-page-left-nav" style="overflow: hidden">
+    <div
+      class="factory-list__selector"
+      style="margin: 20px 12px"
+      title="株洲中建材光电材料有限公司"
+      @mouseenter="factoryListOpen = true"
+      @mouseleave="factoryListOpen = false"
+    >
+      <img src="./../assets/images/arrow.png" class="arrow" alt="" />
+      <div class="factory-list__content">{{ currentFactory.label }}</div>
+      <div class="factory-list__wrapper" :class="{ open: factoryListOpen }">
+        <ul
+          class="factory-list"
+          v-if="sidebarContent.length"
+          @click.capture="factoryClickHandler"
+        >
+          <li
+            v-for="fc in sidebarContent"
+            :key="fc.id"
+            class="factory-list__item"
+            :class="{ 'is-current': fc.id == currentFactory?.id }"
+          >
+            <span :data-value="fc.id">
+              {{ fc.label }}
+            </span>
+            <svg-icon
+              v-if="fc.id == currentFactory?.id"
+              icon-class="Confirm"
+              style="height: 14px; width: 14px"
+            />
+          </li>
+        </ul>
+        <div v-else style="color: #0008; width: 128px; text-align: center">
+          - 无 -
+        </div>
+      </div>
+    </div>
+    <!-- side bar  -->
+    <div class="side-bar__left" style="width: 100%; height: 100%">
+      <!-- <el-tree
+        class="custom-tree-class"
+        :data="currentFactory?.children"
+        :props="treeProps"
+        :empty-text="''"
+        icon-class="custom-icon-class"
+        @node-click="handleSidebarItemClick"
+      >
+      </el-tree> -->
+      <el-menu
+        default-active="2"
+        class="el-menu-vertical-demo"
+        @open="handleOpen"
+        @close="handleClose"
+      >
+        <el-submenu index="1">
+          <template slot="title">
+            <svg-icon
+              style="
+                font-size: 18px;
+                margin-right: 10px;
+                vertical-align: middle;
+              "
+              icon-class="orgTreeIcon"
+            />
+            <span>导航一</span>
+          </template>
+          <el-menu-item index="1-1"
+            ><svg-icon
+              style="
+                font-size: 18px;
+                margin-right: 10px;
+                vertical-align: middle;
+              "
+              icon-class="orgTreeIcon2"
+            />选项1</el-menu-item
+          >
+          <el-menu-item index="1-2"
+            ><svg-icon
+              style="
+                font-size: 18px;
+                margin-right: 10px;
+                vertical-align: middle;
+              "
+              icon-class="orgTreeIcon2"
+            />选项2</el-menu-item
+          >
+          <el-menu-item index="1-3"
+            ><svg-icon
+              style="
+                font-size: 18px;
+                margin-right: 10px;
+                vertical-align: middle;
+              "
+              icon-class="orgTreeIcon2"
+            />选项3</el-menu-item
+          >
+          <el-submenu index="1-4">
+            <template slot="title">
+              <svg-icon
+                style="
+                  font-size: 18px;
+                  margin-right: 10px;
+                  vertical-align: middle;
+                "
+                icon-class="orgTreeIcon"
+              />选项4</template
+            >
+            <el-menu-item index="1-4-1">
+              <svg-icon
+                style="
+                  font-size: 18px;
+                  margin-right: 10px;
+                  vertical-align: middle;
+                "
+                icon-class="orgTreeIcon2"
+              />选项1</el-menu-item
+            >
+          </el-submenu>
+        </el-submenu>
+        <el-menu-item index="2">
+          <svg-icon
+            style="font-size: 18px; margin-right: 10px; vertical-align: middle"
+            icon-class="orgTreeIcon"
+          />
+          <span slot="title">导航二</span>
+        </el-menu-item>
+      </el-menu>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "InpageLeftNav",
+  components: {},
+  props: {},
+  data() {
+    return {
+      factoryListOpen: false,
+      currentFactory: {
+        label: "点我选择设备",
+        id: null,
+        children: [],
+      },
+      treeProps: {
+        children: "children",
+        label: "label",
+      },
+      sidebarContent: [
+        {
+          id: 1,
+          label: "招商局",
+          children: [
+            {
+              label: "招商局地产",
+              children: [
+                {
+                  label: 1,
+                },
+              ],
+            },
+            {
+              label: "招商局商业",
+            },
+            {
+              label: "招商局物流",
+            },
+          ],
+        },
+        {
+          id: 2,
+          label: "株洲中建材光电材料有限公司",
+          children: [
+            {
+              label: "保利地产",
+            },
+            {
+              label: "保利投资",
+            },
+          ],
+        },
+        {
+          id: 3,
+          label: "中国建材集团",
+          children: [
+            {
+              label: "凯盛集团",
+            },
+            {
+              label: "蚌埠研究院",
+            },
+          ],
+        },
+      ],
+      queryParams: {
+        equipmentId: null,
+        lineId: null,
+        sectionId: null,
+        productId: null,
+      },
+    };
+  },
+  computed: {},
+  methods: {
+    /** 暴露给外部，用于更新sidebarContent */
+    async updateSidebarContent(id, url) {
+      // TODO
+      const { code, data } = await this.$axios({
+        url: (url || "/api/quality/deviceParameters") + `/${id}`,
+        method: "get",
+      });
+      if (code === 0) {
+        this.getTree(data);
+      }
+    },
+    /** 点击工厂名称 */
+    factoryClickHandler(event) {
+      this.currentFactory = {
+        label: "加载中...",
+        id: null,
+        children: [],
+      };
+      this.factoryListOpen = false;
+      const fcId = event.target.dataset.value;
+      this.handleSidebarItemClick({ id: fcId, type: "工厂" });
+      this.currentFactory = this.sidebarContent.find((item) => item.id == fcId);
+    },
+    /** 点击某一具体工厂或产线，或工段或设备 */
+    handleSidebarItemClick({ label, id, type }) {
+      this.equipmentId = id;
+      console.log("label clicked!", label, id, type);
+      switch (type) {
+        case "设备":
+          this.queryParams.equipmentId = id;
+          break;
+        case "工段":
+          this.queryParams.equipmentId = null;
+          this.queryParams.sectionId = id;
+          break;
+        case "产线":
+          this.queryParams.equipmentId = null;
+          this.queryParams.sectionId = null;
+          this.queryParams.lineId = id;
+          break;
+        case "工厂":
+          this.queryParams.equipmentId = null;
+          this.queryParams.sectionId = null;
+          this.queryParams.lineId = null;
+          break;
+      }
+    },
+    buildTree(data) {
+      data.forEach((factory) => {
+        this.$set(factory, "label", factory.name);
+        this.$set(factory, "type", "工厂");
+        delete factory.name;
+        factory.children?.forEach((line) => {
+          this.$set(line, "label", line.name);
+          this.$set(line, "type", "产线");
+          delete line.name;
+          line.children?.forEach((ws) => {
+            this.$set(ws, "label", ws.name);
+            this.$set(ws, "type", "工段");
+            delete ws.name;
+            ws.children?.forEach((eq) => {
+              this.$set(eq, "label", eq.name);
+              this.$set(eq, "type", "设备");
+              delete eq.name;
+            });
+          });
+        });
+      });
+    },
+
+    async getTree(data) {
+      // '@/api/quality/deviceParameters'
+      // const res = await getTreeData({ id: id });
+      this.buildTree(data);
+      this.sidebarContent = data;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.in-page-left-nav {
+  display: inline-block;
+  background: #fff;
+  height: calc(100vh - 120px - 8px);
+  width: 256px;
+  border-radius: 8px;
+  padding: 0;
+  vertical-align: top;
+}
+
+.factory-list__selector {
+  position: relative;
+  height: 36px;
+  font-size: 16px;
+  line-height: 36px;
+  padding-left: 28px;
+  background: url(../assets/images/factory-icon.png) 0px 4px no-repeat;
+  background-size: 26px 26px;
+  padding-right: 16px;
+  .arrow {
+    position: absolute;
+    right: 0;
+    top: 13px;
+  }
+}
+
+.factory-list__selector:hover {
+  cursor: pointer;
+  color: #0008;
+}
+
+.factory-list__selector::after {
+  /* content: ''; */
+  position: absolute;
+  top: 16px;
+  right: 12px;
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  /* background: #5c5c5c; */
+  border-color: #000;
+  border-width: 4px;
+  border-style: solid;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+}
+
+.factory-list__selector:hover::after {
+  /* cursor: pointer; */
+  border-left-color: #0008;
+}
+.factory-list__content {
+  height: 36px;
+  overflow: hidden; /* 确保超出容器的内容会被隐藏 */
+  white-space: nowrap; /* 防止文本自动换行 */
+  text-overflow: ellipsis; /* 使用省略号表示文本被截断 */
+}
+.factory-list__wrapper {
+  visibility: hidden;
+  position: absolute;
+  background: #fff;
+  box-shadow: 0 0 32px 10px #0002;
+  border-radius: 8px;
+  top: 36px;
+  // left: 90px;
+  /* max-width: 128px; */
+  height: auto;
+  width: 200px;
+  white-space: nowrap;
+  overflow: hidden;
+  /* transition: all 0.3s ease-out; */
+  z-index: 1000;
+}
+
+.factory-list__wrapper.open {
+  visibility: visible;
+}
+
+ul,
+li {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.factory-list {
+  color: #0008;
+  max-height: 240px;
+  overflow-y: auto;
+}
+
+.factory-list__item {
+  font-size: 16px;
+  line-height: 1;
+  padding: 8px 16px 8px 16px;
+  min-width: 128px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.factory-list__item:hover,
+.factory-list__item.is-current {
+  background: #e3efff;
+  color: #0b58ff;
+}
+
+/* .factory-list__item.is-current::after {
+	content: '√';
+	position: absolute;
+	top: 8px;
+	right: 16px;
+	font-weight: bold;
+} */
+</style>
+
+<style>
+.custom-tree-class .el-tree-node__content {
+  width: 100%;
+  height: auto !important;
+  padding: 8px 12px !important;
+}
+
+.custom-tree-class .el-tree-node__content:hover {
+  background: #e3efff;
+}
+
+.custom-tree-class .el-tree-node__children .el-tree-node__content {
+  padding: 8px 18px !important;
+}
+
+.custom-tree-class
+  .el-tree-node__children
+  .el-tree-node__children
+  .el-tree-node__content {
+  padding: 8px 24px !important;
+}
+
+.custom-icon-class {
+  margin-right: 8px;
+  width: 20px;
+  height: 20px;
+  background: url("../assets/images/Qian.png") center center / contain no-repeat;
+}
+
+.custom-icon-class.el-tree-node__expand-icon.expanded {
+  transform: unset;
+}
+
+.el-tree-node__children .custom-icon-class {
+  background: url("../assets/images/tree-icon-2.png") 100% / contain no-repeat;
+}
+
+.el-tree-node__children .el-tree-node__children .custom-icon-class {
+  background: unset;
+}
+</style>
diff --git a/src/views/system/post/components/SearchBarTop.vue b/src/views/system/post/components/SearchBarTop.vue
new file mode 100644
index 0000000..778b28e
--- /dev/null
+++ b/src/views/system/post/components/SearchBarTop.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="search-bar-top">
+    <el-form :inline="true">
+      <span class="blue-block"></span>
+      <span class="org-name">组织名称</span>
+      <el-form-item label="用户名">
+        <el-input placeholder="用户名" size="small"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" size="small" @click="onSearch"
+          >查询</el-button
+        >
+        <span class="separateStyle"></span>
+        <el-button type="success" size="small" plain @click="addNew"
+          >新增</el-button
+        >
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+<script>
+export default {
+  name: "SearchBarTop",
+  data() {
+    return {
+      userName: "",
+    };
+  },
+  mounted() {},
+  methods: {
+    onSearch() {
+      console.log("查询");
+      this.$emit("emitFun", { btn: "onSearch", userName: this.userName });
+    },
+    addNew() {
+      console.log("新增");
+      this.$emit("emitFun", { btn: "addNew" });
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.search-bar-top {
+  font-size: 14px;
+  .blue-block {
+    display: inline-block;
+    width: 4px;
+    height: 15px;
+    background-color: #0b58ff;
+    border-radius: 1px;
+    margin-right: 8px;
+    vertical-align: middle;
+  }
+  .org-name {
+    display: inline-block;
+    height: 36px;
+    line-height: 36px;
+    margin-right: 10px;
+    font-size: 14px;
+    color: #606266;
+    font-weight: 700;
+  }
+  .el-form--inline .el-form-item {
+    display: inline-block;
+    margin-right: 10px;
+    vertical-align: top;
+    margin-bottom: 16px;
+  }
+  .separateStyle {
+    display: inline-block;
+    width: 1px;
+    height: 24px;
+    background: #e8e8e8;
+    vertical-align: middle;
+    margin: 0 8px;
+  }
+}
+</style>
diff --git a/src/views/system/post/index.vue b/src/views/system/post/index.vue
index 628cee7..fc6f5df 100644
--- a/src/views/system/post/index.vue
+++ b/src/views/system/post/index.vue
@@ -1,243 +1,162 @@
 <template>
-  <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="岗位编码" prop="code">
-        <el-input v-model="queryParams.code" placeholder="请输入岗位编码" clearable @keyup.enter.native="handleQuery"/>
-      </el-form-item>
-      <el-form-item label="岗位名称" prop="name">
-        <el-input v-model="queryParams.name" placeholder="请输入岗位名称" clearable @keyup.enter.native="handleQuery"/>
-      </el-form-item>
-      <el-form-item label="状态" prop="status">
-        <el-select v-model="queryParams.status" placeholder="岗位状态" clearable>
-          <el-option v-for="dict in statusDictDatas" :key="parseInt(dict.value)" :label="dict.label" :value="parseInt(dict.value)"/>
-        </el-select>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
-
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
-                   v-hasPermi="['system:post:create']">新增</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
-                   v-hasPermi="['system:post:export']">导出</el-button>
-      </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
-
-    <el-table v-loading="loading" :data="postList">
-      <el-table-column label="岗位编号" align="center" prop="id" />
-      <el-table-column label="岗位编码" align="center" prop="code" />
-      <el-table-column label="岗位名称" align="center" prop="name" />
-      <el-table-column label="岗位排序" align="center" prop="sort" />
-      <el-table-column label="状态" align="center" prop="status">
-        <template v-slot="scope">
-          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status"/>
-        </template>
-      </el-table-column>
-      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
-        <template v-slot="scope">
-          <span>{{ parseTime(scope.row.createTime) }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template v-slot="scope">
-          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
-                     v-hasPermi="['system:post:update']">修改</el-button>
-          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
-                     v-hasPermi="['system:post:delete']">删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
-                @pagination="getList"/>
-
-    <!-- 添加或修改岗位对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="岗位名称" prop="name">
-          <el-input v-model="form.name" placeholder="请输入岗位名称" />
-        </el-form-item>
-        <el-form-item label="岗位编码" prop="code">
-          <el-input v-model="form.code" placeholder="请输入编码名称" />
-        </el-form-item>
-        <el-form-item label="岗位顺序" prop="sort">
-          <el-input-number v-model="form.sort" controls-position="right" :min="0" />
-        </el-form-item>
-        <el-form-item label="岗位状态" prop="status">
-          <el-radio-group v-model="form.status">
-            <el-radio v-for="dict in statusDictDatas" :key="parseInt(dict.value)" :label="parseInt(dict.value)">
-              {{dict.label}}</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item label="备注" prop="remark">
-          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
-      </div>
-    </el-dialog>
+  <div class="user-manager">
+    <InPageLeftNav />
+    <div
+      class="table-area"
+      :class="{
+        'table-area-w': sidebar.opened,
+        'table-area-ws': !sidebar.opened,
+      }"
+    >
+      <SearchBarTop @emitFun="emitFun" />
+      <!-- 列表 -->
+      <base-table
+        :page="queryParams.pageNo"
+        :limit="queryParams.pageSize"
+        :table-props="tableProps"
+        :table-data="list"
+        :max-height="tableH"
+      >
+        <method-btn
+          v-if="tableBtn.length"
+          slot="handleBtn"
+          :width="120"
+          label="操作"
+          :method-list="tableBtn"
+          @clickBtn="handleClick"
+        />
+      </base-table>
+      <pagination
+        :page.sync="queryParams.pageNo"
+        :limit.sync="queryParams.pageSize"
+        :total="total"
+        @pagination="getList"
+      />
+    </div>
   </div>
 </template>
 
 <script>
-import { listPost, getPost, delPost, addPost, updatePost, exportPost } from "@/api/system/post";
-
-import {CommonStatusEnum} from '@/utils/constants'
-import { getDictDatas, DICT_TYPE } from '@/utils/dict'
-
+import { mapGetters } from "vuex";
+import InPageLeftNav from "./components/InPageLeftNav";
+import SearchBarTop from "./components/SearchBarTop";
+import tableHeightMixin from "@/mixins/tableHeightMixin";
+import { listUser } from "@/api/system/user";
+const tableProps = [
+  {
+    prop: "username",
+    label: "用户名",
+    minWidth: 120,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "email",
+    label: "邮箱",
+    minWidth: 150,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "mobile",
+    label: "手机号",
+    minWidth: 120,
+  },
+  {
+    prop: "deptName",
+    label: "组织",
+    minWidth: 120,
+  },
+  {
+    prop: "role",
+    label: "角色名称",
+  },
+  {
+    prop: "workno",
+    label: "工号",
+  },
+  {
+    prop: "status",
+    label: "状态",
+  },
+  {
+    prop: "remark",
+    label: "备注",
+    showOverflowtooltip: true,
+  },
+];
 export default {
   name: "SystemPost",
+  components: { InPageLeftNav, SearchBarTop },
+  mixins: [tableHeightMixin],
+  computed: {
+    ...mapGetters(["sidebar"]),
+  },
   data() {
     return {
-      // 遮罩层
-      loading: true,
-      // 导出遮罩层
-      exportLoading: false,
-      // 显示搜索条件
-      showSearch: true,
-      // 总条数
-      total: 0,
-      // 岗位表格数据
-      postList: [],
-      // 弹出层标题
-      title: "",
-      // 是否显示弹出层
-      open: false,
       // 查询参数
       queryParams: {
         pageNo: 1,
-        pageSize: 10,
-        code: undefined,
-        name: undefined,
-        status: undefined
+        pageSize: 20,
+        name: null,
+        status: null,
+        planFinishTime: [],
       },
-      // 表单参数
-      form: {},
-      // 表单校验
-      rules: {
-        name: [
-          { required: true, message: "岗位名称不能为空", trigger: "blur" }
-        ],
-        code: [
-          { required: true, message: "岗位编码不能为空", trigger: "blur" }
-        ],
-        sort: [
-          { required: true, message: "岗位顺序不能为空", trigger: "blur" }
-        ]
-      },
-
-      // 枚举
-      CommonStatusEnum: CommonStatusEnum,
-      // 数据字典
-      statusDictDatas: getDictDatas(DICT_TYPE.COMMON_STATUS)
+      total: 0,
+      tableProps,
+      list: [{ username: "111" }],
+      tableBtn: [
+        {
+          type: "authorization",
+          btnName: "授权",
+        },
+        {
+          type: "edit",
+          btnName: "编辑",
+        },
+        {
+          type: "delete",
+          btnName: "删除",
+        },
+      ],
     };
   },
   created() {
     this.getList();
   },
   methods: {
-    /** 查询岗位列表 */
+    /** 查询用户列表 */
     getList() {
-      this.loading = true;
-      listPost(this.queryParams).then(response => {
-        this.postList = response.data.list;
+      listUser(this.queryParams).then((response) => {
+        this.list = response.data.list;
         this.total = response.data.total;
-        this.loading = false;
       });
     },
-    // 取消按钮
-    cancel() {
-      this.open = false;
-      this.reset();
+    emitFun(val) {
+      if (val.btn === "onSearch") {
+        this.queryParams.pageNo = 1;
+        this.getList();
+      } else {
+      }
     },
-    // 表单重置
-    reset() {
-      this.form = {
-        id: undefined,
-        code: undefined,
-        name: undefined,
-        sort: 0,
-        status: CommonStatusEnum.ENABLE,
-        remark: undefined
-      };
-      this.resetForm("form");
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageNo = 1;
-      this.getList();
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.resetForm("queryForm");
-      this.handleQuery();
-    },
-    /** 新增按钮操作 */
-    handleAdd() {
-      this.reset();
-      this.open = true;
-      this.title = "添加岗位";
-    },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.reset();
-      const id = row.id
-      getPost(id).then(response => {
-        this.form = response.data;
-        this.open = true;
-        this.title = "修改岗位";
-      });
-    },
-    /** 提交按钮 */
-    submitForm: function() {
-      this.$refs["form"].validate(valid => {
-        if (valid) {
-          if (this.form.id !== undefined) {
-            updatePost(this.form).then(response => {
-              this.$modal.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            });
-          } else {
-            addPost(this.form).then(response => {
-              this.$modal.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            });
-          }
-        }
-      });
-    },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      const ids = row.id;
-      this.$modal.confirm('是否确认删除岗位编号为"' + ids + '"的数据项?').then(function() {
-          return delPost(ids);
-        }).then(() => {
-          this.getList();
-          this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
-    },
-    /** 导出按钮操作 */
-    handleExport() {
-      const queryParams = this.queryParams;
-      this.$modal.confirm('是否确认导出所有岗位数据项?').then(() => {
-          this.exportLoading = true;
-          return exportPost(queryParams);
-        }).then(response => {
-          this.$download.excel(response, '岗位数据.xls');
-          this.exportLoading = false;
-      }).catch(() => {});
-    }
-  }
+    handleClick() {},
+  },
 };
 </script>
+<style lang="scss" scoped>
+.user-manager {
+  display: flex;
+  .table-area {
+    display: inline-block;
+    height: calc(100vh - 120px - 8px);
+    background-color: #fff;
+    margin-left: 8px;
+    border-radius: 8px;
+    padding: 8px;
+  }
+  .table-area-w {
+    width: calc(100vw - 542px);
+  }
+  .table-area-ws {
+    width: calc(100vw - 348px);
+  }
+}
+</style>
diff --git a/src/views/system/post/index1.vue b/src/views/system/post/index1.vue
new file mode 100644
index 0000000..628cee7
--- /dev/null
+++ b/src/views/system/post/index1.vue
@@ -0,0 +1,243 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="岗位编码" prop="code">
+        <el-input v-model="queryParams.code" placeholder="请输入岗位编码" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="岗位名称" prop="name">
+        <el-input v-model="queryParams.name" placeholder="请输入岗位名称" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-select v-model="queryParams.status" placeholder="岗位状态" clearable>
+          <el-option v-for="dict in statusDictDatas" :key="parseInt(dict.value)" :label="dict.label" :value="parseInt(dict.value)"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
+                   v-hasPermi="['system:post:create']">新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
+                   v-hasPermi="['system:post:export']">导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="postList">
+      <el-table-column label="岗位编号" align="center" prop="id" />
+      <el-table-column label="岗位编码" align="center" prop="code" />
+      <el-table-column label="岗位名称" align="center" prop="name" />
+      <el-table-column label="岗位排序" align="center" prop="sort" />
+      <el-table-column label="状态" align="center" prop="status">
+        <template v-slot="scope">
+          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template v-slot="scope">
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+                     v-hasPermi="['system:post:update']">修改</el-button>
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
+                     v-hasPermi="['system:post:delete']">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
+                @pagination="getList"/>
+
+    <!-- 添加或修改岗位对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="岗位名称" prop="name">
+          <el-input v-model="form.name" placeholder="请输入岗位名称" />
+        </el-form-item>
+        <el-form-item label="岗位编码" prop="code">
+          <el-input v-model="form.code" placeholder="请输入编码名称" />
+        </el-form-item>
+        <el-form-item label="岗位顺序" prop="sort">
+          <el-input-number v-model="form.sort" controls-position="right" :min="0" />
+        </el-form-item>
+        <el-form-item label="岗位状态" prop="status">
+          <el-radio-group v-model="form.status">
+            <el-radio v-for="dict in statusDictDatas" :key="parseInt(dict.value)" :label="parseInt(dict.value)">
+              {{dict.label}}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listPost, getPost, delPost, addPost, updatePost, exportPost } from "@/api/system/post";
+
+import {CommonStatusEnum} from '@/utils/constants'
+import { getDictDatas, DICT_TYPE } from '@/utils/dict'
+
+export default {
+  name: "SystemPost",
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 导出遮罩层
+      exportLoading: false,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 岗位表格数据
+      postList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 10,
+        code: undefined,
+        name: undefined,
+        status: undefined
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        name: [
+          { required: true, message: "岗位名称不能为空", trigger: "blur" }
+        ],
+        code: [
+          { required: true, message: "岗位编码不能为空", trigger: "blur" }
+        ],
+        sort: [
+          { required: true, message: "岗位顺序不能为空", trigger: "blur" }
+        ]
+      },
+
+      // 枚举
+      CommonStatusEnum: CommonStatusEnum,
+      // 数据字典
+      statusDictDatas: getDictDatas(DICT_TYPE.COMMON_STATUS)
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询岗位列表 */
+    getList() {
+      this.loading = true;
+      listPost(this.queryParams).then(response => {
+        this.postList = response.data.list;
+        this.total = response.data.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: undefined,
+        code: undefined,
+        name: undefined,
+        sort: 0,
+        status: CommonStatusEnum.ENABLE,
+        remark: undefined
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNo = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加岗位";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const id = row.id
+      getPost(id).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改岗位";
+      });
+    },
+    /** 提交按钮 */
+    submitForm: function() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.id !== undefined) {
+            updatePost(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addPost(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ids = row.id;
+      this.$modal.confirm('是否确认删除岗位编号为"' + ids + '"的数据项?').then(function() {
+          return delPost(ids);
+        }).then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      const queryParams = this.queryParams;
+      this.$modal.confirm('是否确认导出所有岗位数据项?').then(() => {
+          this.exportLoading = true;
+          return exportPost(queryParams);
+        }).then(response => {
+          this.$download.excel(response, '岗位数据.xls');
+          this.exportLoading = false;
+      }).catch(() => {});
+    }
+  }
+};
+</script>
diff --git a/src/views/system/role/components/dataAuth.vue b/src/views/system/role/components/dataAuth.vue
new file mode 100644
index 0000000..abb4fc2
--- /dev/null
+++ b/src/views/system/role/components/dataAuth.vue
@@ -0,0 +1,162 @@
+<template>
+  <el-form :model="form" label-width="80px">
+    <el-form-item label="角色名称">
+      <el-input v-model="form.name" :disabled="true" />
+    </el-form-item>
+    <el-form-item label="角色标识">
+      <el-input v-model="form.code" :disabled="true" />
+    </el-form-item>
+    <el-form-item label="权限范围">
+      <el-select v-model="form.dataScope" style="width: 100%">
+        <el-option
+          v-for="item in dataScopeDictDatas"
+          :key="parseInt(item.value)"
+          :label="item.label"
+          :value="parseInt(item.value)"
+        ></el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item
+      label="数据权限"
+      v-show="form.dataScope === SysDataScopeEnum.DEPT_CUSTOM"
+    >
+      <el-checkbox
+        :checked="!form.deptCheckStrictly"
+        @change="handleCheckedTreeConnect($event, 'dept')"
+        >父子联动(选中父节点，自动选择子节点)</el-checkbox
+      >
+      <el-checkbox
+        v-model="deptExpand"
+        @change="handleCheckedTreeExpand($event, 'dept')"
+        >展开/折叠</el-checkbox
+      >
+      <el-checkbox
+        v-model="deptNodeAll"
+        @change="handleCheckedTreeNodeAll($event, 'dept')"
+        >全选/全不选</el-checkbox
+      >
+      <el-tree
+        class="tree-border"
+        :data="deptOptions"
+        show-checkbox
+        default-expand-all
+        ref="dept"
+        node-key="id"
+        :check-strictly="form.deptCheckStrictly"
+        empty-text="加载中，请稍后"
+        :props="defaultProps"
+      ></el-tree>
+    </el-form-item>
+  </el-form>
+</template>
+<script>
+import { SystemDataScopeEnum } from "@/utils/constants";
+import { getRole } from "@/api/system/role";
+import { listSimpleDepts } from "@/api/system/dept";
+import { DICT_TYPE, getDictDatas } from "@/utils/dict";
+import { assignRoleDataScope } from "@/api/system/permission";
+export default {
+  name: "DataAuth",
+  data() {
+    return {
+      form: {
+        id: undefined,
+        name: undefined,
+        code: undefined,
+        deptIds: [],
+        dataScope: undefined,
+        deptCheckStrictly: false,
+      },
+      deptExpand: true,
+      deptNodeAll: false,
+      // 部门列表
+      deptOptions: [], // 部门属性结构
+      depts: [], // 部门列表
+      defaultProps: {
+        label: "name",
+        children: "children",
+      },
+      // 枚举
+      SysDataScopeEnum: SystemDataScopeEnum,
+      // 数据字典
+      dataScopeDictDatas: getDictDatas(DICT_TYPE.SYSTEM_DATA_SCOPE),
+    };
+  },
+  methods: {
+    init(id) {
+      this.form.id = id;
+      getRole(id).then((res) => {
+        this.form.name = res.data.name;
+        this.form.code = res.data.code;
+        this.form.dataScope = res.data.dataScope;
+        // 获得部门列表
+        listSimpleDepts().then((response) => {
+          // 处理 deptOptions 参数
+          this.deptOptions = [];
+          this.deptOptions.push(...this.handleTree(response.data, "id"));
+          this.depts = response.data;
+          this.$refs.dept.setCheckedKeys(res.data.dataScopeDeptIds, false);
+        });
+      });
+    },
+    submitForm() {
+      if (this.form.id !== undefined) {
+        assignRoleDataScope({
+          roleId: this.form.id,
+          dataScope: this.form.dataScope,
+          dataScopeDeptIds:
+            this.form.dataScope !== SystemDataScopeEnum.DEPT_CUSTOM
+              ? []
+              : this.$refs.dept.getCheckedKeys(),
+        }).then((response) => {
+          this.$modal.msgSuccess("修改成功");
+          this.$emit("successSubmitd");
+        });
+      }
+    },
+    formClear() {
+      this.deptExpand = true;
+      this.deptNodeAll = false;
+      this.form = {
+        id: undefined,
+        name: undefined,
+        code: undefined,
+        deptIds: [],
+        dataScope: undefined,
+        deptCheckStrictly: false,
+      };
+    },
+    // 树权限（父子联动）
+    handleCheckedTreeConnect(value, type) {
+      if (type === "menu") {
+        this.form.menuCheckStrictly = value;
+      } else if (type === "dept") {
+        this.form.deptCheckStrictly = !value;
+      }
+    },
+    // 树权限（展开/折叠）
+    handleCheckedTreeExpand(value, type) {
+      if (type === "menu") {
+        let treeList = this.menuOptions;
+        for (let i = 0; i < treeList.length; i++) {
+          this.$refs.menu.store.nodesMap[treeList[i].id].expanded = value;
+        }
+      } else if (type === "dept") {
+        let treeList = this.deptOptions;
+        for (let i = 0; i < treeList.length; i++) {
+          this.$refs.dept.store.nodesMap[treeList[i].id].expanded = value;
+        }
+      }
+    },
+    // 树权限（全选/全不选）
+    handleCheckedTreeNodeAll(value, type) {
+      if (type === "menu") {
+        this.$refs.menu.setCheckedNodes(value ? this.menuOptions : []);
+      } else if (type === "dept") {
+        // this.$refs.dept.setCheckedNodes(value ? this.deptOptions: []);
+        this.$refs.dept.setCheckedNodes(value ? this.depts : []);
+      }
+    },
+  },
+};
+</script>
diff --git a/src/views/system/role/components/menuAuth.vue b/src/views/system/role/components/menuAuth.vue
new file mode 100644
index 0000000..3311708
--- /dev/null
+++ b/src/views/system/role/components/menuAuth.vue
@@ -0,0 +1,146 @@
+<template>
+  <el-form :model="form" label-width="80px">
+    <el-form-item label="角色名称">
+      <el-input v-model="form.name" :disabled="true" />
+    </el-form-item>
+    <el-form-item label="角色标识">
+      <el-input v-model="form.code" :disabled="true" />
+    </el-form-item>
+    <el-form-item label="菜单权限">
+      <el-checkbox
+        v-model="menuExpand"
+        @change="handleCheckedTreeExpand($event, 'menu')"
+        >展开/折叠</el-checkbox
+      >
+      <el-checkbox
+        v-model="menuNodeAll"
+        @change="handleCheckedTreeNodeAll($event, 'menu')"
+        >全选/全不选</el-checkbox
+      >
+      <el-tree
+        class="tree-border"
+        :data="menuOptions"
+        show-checkbox
+        ref="menu"
+        node-key="id"
+        :check-strictly="form.menuCheckStrictly"
+        empty-text="加载中，请稍后"
+        :props="defaultProps"
+      ></el-tree>
+    </el-form-item>
+  </el-form>
+</template>
+<script>
+import { getRole } from "@/api/system/role";
+import { SystemDataScopeEnum } from "@/utils/constants";
+import { assignRoleMenu, listRoleMenus } from "@/api/system/permission";
+import { DICT_TYPE, getDictDatas } from "@/utils/dict";
+import { listSimpleMenus } from "@/api/system/menu";
+export default {
+  name: "MenuAuth",
+  data() {
+    return {
+      form: {
+        id: undefined,
+        name: undefined,
+        code: undefined,
+        menuIds: [],
+        menuCheckStrictly: true,
+      },
+      // 菜单列表
+      menuOptions: [],
+      menuExpand: false,
+      menuNodeAll: false,
+      SysDataScopeEnum: SystemDataScopeEnum,
+      // 数据字典
+      dataScopeDictDatas: getDictDatas(DICT_TYPE.SYSTEM_DATA_SCOPE),
+      defaultProps: {
+        label: "name",
+        children: "children",
+      },
+    };
+  },
+  methods: {
+    init(id) {
+      this.form.id = id;
+      getRole(id).then((res) => {
+        this.form.name = res.data.name;
+        this.form.code = res.data.code;
+        listSimpleMenus().then((response) => {
+          // 处理 menuOptions 参数
+          this.menuOptions = [];
+          this.menuOptions.push(...this.handleTree(response.data, "id"));
+          // 获取角色拥有的菜单权限
+          listRoleMenus(id).then((response) => {
+            // 设置为严格，避免设置父节点自动选中子节点，解决半选中问题
+            this.form.menuCheckStrictly = true;
+            // 设置选中
+            this.$refs.menu.setCheckedKeys(response.data);
+            // 设置为非严格，继续使用半选中
+            this.form.menuCheckStrictly = false;
+          });
+        });
+      });
+    },
+    submitForm() {
+      if (this.form.id !== undefined) {
+        assignRoleMenu({
+          roleId: this.form.id,
+          menuIds: [
+            ...this.$refs.menu.getCheckedKeys(),
+            ...this.$refs.menu.getHalfCheckedKeys(),
+          ],
+        }).then((response) => {
+          this.$modal.msgSuccess("修改成功");
+          this.$emit("successSubmitm");
+        });
+      }
+    },
+    formClear() {
+      if (this.$refs.menu !== undefined) {
+        this.$refs.menu.setCheckedKeys([]);
+      }
+      this.menuExpand = false;
+      this.menuNodeAll = false;
+      this.form = {
+        id: undefined,
+        name: undefined,
+        code: undefined,
+        menuIds: [],
+        menuCheckStrictly: true,
+      };
+    },
+    // 树权限（父子联动）
+    handleCheckedTreeConnect(value, type) {
+      if (type === "menu") {
+        this.form.menuCheckStrictly = value;
+      } else if (type === "dept") {
+        this.form.deptCheckStrictly = !value;
+      }
+    },
+    // 树权限（展开/折叠）
+    handleCheckedTreeExpand(value, type) {
+      if (type === "menu") {
+        let treeList = this.menuOptions;
+        for (let i = 0; i < treeList.length; i++) {
+          this.$refs.menu.store.nodesMap[treeList[i].id].expanded = value;
+        }
+      } else if (type === "dept") {
+        let treeList = this.deptOptions;
+        for (let i = 0; i < treeList.length; i++) {
+          this.$refs.dept.store.nodesMap[treeList[i].id].expanded = value;
+        }
+      }
+    },
+    // 树权限（全选/全不选）
+    handleCheckedTreeNodeAll(value, type) {
+      if (type === "menu") {
+        this.$refs.menu.setCheckedNodes(value ? this.menuOptions : []);
+      } else if (type === "dept") {
+        // this.$refs.dept.setCheckedNodes(value ? this.deptOptions: []);
+        this.$refs.dept.setCheckedNodes(value ? this.depts : []);
+      }
+    },
+  },
+};
+</script>
diff --git a/src/views/system/role/components/roleAdd.vue b/src/views/system/role/components/roleAdd.vue
new file mode 100644
index 0000000..26de73b
--- /dev/null
+++ b/src/views/system/role/components/roleAdd.vue
@@ -0,0 +1,129 @@
+<template>
+  <el-form ref="form" :rules="rules" label-width="100px" :model="form">
+    <el-row>
+      <el-col :span="24">
+        <el-form-item label="角色编码" prop="code">
+          <el-input v-model="form.code"></el-input>
+        </el-form-item>
+      </el-col>
+      <el-col :span="24">
+        <el-form-item label="角色名称" prop="name">
+          <el-input v-model="form.name"></el-input>
+        </el-form-item>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="12">
+        <el-form-item label="角色顺序" prop="sort">
+          <el-input-number
+            v-model="form.sort"
+            controls-position="right"
+            :min="1"
+            :max="999999999"
+            style="width: 100%"
+          ></el-input-number>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="状态" prop="status" v-if="isEdit">
+          <el-switch v-model="form.status"> </el-switch>
+        </el-form-item>
+      </el-col>
+      <el-col :span="24">
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark"></el-input>
+        </el-form-item>
+      </el-col>
+    </el-row>
+  </el-form>
+</template>
+<script>
+import { addRole, getRole, updateRole } from "@/api/system/role";
+export default {
+  name: "RoleAdd",
+  data() {
+    return {
+      form: {
+        id: "",
+        code: "",
+        name: "",
+        sort: 1,
+        status: 0,
+        remark: "",
+      },
+      isEdit: false, //是否是编辑
+      rules: {
+        code: [
+          { required: true, message: "角色编码不能为空", trigger: "blur" },
+        ],
+        name: [
+          { required: true, message: "角色名称不能为空", trigger: "blur" },
+        ],
+        sort: [{ required: true }],
+      },
+    };
+  },
+  methods: {
+    init(id) {
+      if (id) {
+        this.isEdit = true;
+        this.form.id = id;
+        getRole(id).then((res) => {
+          if (res.code === 0) {
+            this.form.id = res.data.id;
+            this.form.code = res.data.code;
+            this.form.name = res.data.name;
+            this.form.sort = res.data.sort;
+            this.form.remark = res.data.remark;
+            this.form.status = res.data.status ? false : true;
+          }
+        });
+      } else {
+        this.isEdit = false;
+        this.form.id = "";
+      }
+    },
+    submitForm() {
+      this.$refs["form"].validate((valid) => {
+        if (valid) {
+          if (this.isEdit) {
+            //编辑
+            updateRole({
+              id: this.form.id,
+              code: this.form.code,
+              name: this.form.name,
+              sort: this.form.sort,
+              remark: this.form.remark,
+              status: this.form.status ? 0 : 1,
+            }).then((res) => {
+              if (res.code === 0) {
+                this.$modal.msgSuccess("操作成功");
+                this.$emit("successSubmit");
+              }
+            });
+          } else {
+            addRole({
+              code: this.form.code,
+              name: this.form.name,
+              sort: this.form.sort,
+              remark: this.form.remark,
+              status: 0,
+            }).then((res) => {
+              if (res.code === 0) {
+                this.$modal.msgSuccess("操作成功");
+                this.$emit("successSubmit");
+              }
+            });
+          }
+        } else {
+          return false;
+        }
+      });
+    },
+    formClear() {
+      this.$refs.form.resetFields();
+      this.isEdit = false;
+    },
+  },
+};
+</script>
diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue
index 0cc9fb5..729b17e 100644
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -1,250 +1,174 @@
 <template>
   <div class="app-container">
-    <doc-alert title="功能权限" url="https://doc.iocoder.cn/resource-permission" />
-    <doc-alert title="数据权限" url="https://doc.iocoder.cn/data-permission" />
-    <el-form :model="queryParams" ref="queryForm" v-show="showSearch" :inline="true">
-      <el-form-item label="角色名称" prop="name">
-        <el-input v-model="queryParams.name" placeholder="请输入角色名称" clearable size="small" style="width: 240px"
-                  @keyup.enter.native="handleQuery"/>
-      </el-form-item>
-      <el-form-item label="角色标识" prop="code">
-        <el-input v-model="queryParams.code" placeholder="请输入角色标识" clearable size="small" style="width: 240px"
-                  @keyup.enter.native="handleQuery"/>
-      </el-form-item>
-      <el-form-item label="状态" prop="status">
-        <el-select v-model="queryParams.status" placeholder="角色状态" clearable size="small" style="width: 240px">
-          <el-option v-for="dict in statusDictDatas" :key="parseInt(dict.value)" :label="dict.label" :value="parseInt(dict.value)"/>
-        </el-select>
-      </el-form-item>
-      <el-form-item label="创建时间" prop="createTime">
-        <el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
-                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
+    <!-- <doc-alert
+      title="功能权限"
+      url="https://doc.iocoder.cn/resource-permission"
+    />
+    <doc-alert title="数据权限" url="https://doc.iocoder.cn/data-permission" /> -->
+    <!-- 搜索工作栏 -->
+    <search-bar
+      :formConfigs="formConfig"
+      ref="searchBarForm"
+      @headBtnClick="buttonClick"
+    />
+    <!-- 列表 -->
+    <base-table
+      :page="queryParams.pageNo"
+      :limit="queryParams.pageSize"
+      :table-props="tableProps"
+      :table-data="list"
+      :max-height="tableH"
+    >
+      <method-btn
+        v-if="tableBtn.length"
+        slot="handleBtn"
+        :width="230"
+        label="操作"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <pagination
+      :page.sync="queryParams.pageNo"
+      :limit.sync="queryParams.pageSize"
+      :total="total"
+      @pagination="getList"
+    />
 
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
-                   v-hasPermi="['system:role:create']">新增</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
-                   v-hasPermi="['system:role:export']">导出</el-button>
-      </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
-
-    <el-table v-loading="loading" :data="roleList">
-      <el-table-column label="角色编号" prop="id" width="120" />
-      <el-table-column label="角色名称" prop="name" :show-overflow-tooltip="true" width="150" />
-      <el-table-column label="角色标识" prop="code" :show-overflow-tooltip="true" width="150" />
-      <el-table-column label="角色类型" prop="type" width="80">
-        <template v-slot="scope">
-          <dict-tag :type="DICT_TYPE.SYSTEM_ROLE_TYPE" :value="scope.row.type"/>
-        </template>
-      </el-table-column>
-      <el-table-column label="显示顺序" prop="sort" width="100" />
-      <el-table-column label="状态" align="center" width="100">
-        <template v-slot="scope">
-          <el-switch v-model="scope.row.status" :active-value="0" :inactive-value="1" @change="handleStatusChange(scope.row)"/>
-        </template>
-      </el-table-column>
-      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
-        <template v-slot="scope">
-          <span>{{ parseTime(scope.row.createTime) }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template v-slot="scope">
-          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
-                     v-hasPermi="['system:role:update']">修改</el-button>
-          <el-button size="mini" type="text" icon="el-icon-circle-check" @click="handleMenu(scope.row)"
-                     v-hasPermi="['system:permission:assign-role-menu']">菜单权限</el-button>
-          <el-button size="mini" type="text" icon="el-icon-circle-check" @click="handleDataScope(scope.row)"
-                     v-hasPermi="['system:permission:assign-role-data-scope']">数据权限</el-button>
-          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
-                     v-hasPermi="['system:role:delete']">删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
-                @pagination="getList"/>
-
-    <!-- 添加或修改角色配置对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="角色名称" prop="name">
-          <el-input v-model="form.name" placeholder="请输入角色名称" />
-        </el-form-item>
-        <el-form-item label="角色标识" prop="code">
-          <el-input v-model="form.code" placeholder="请输入角色标识" />
-        </el-form-item>
-        <el-form-item label="角色顺序" prop="sort">
-          <el-input-number v-model="form.sort" controls-position="right" :min="0" />
-        </el-form-item>
-        <el-form-item label="备注">
-          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
-      </div>
-    </el-dialog>
-
-    <!-- 分配角色的数据权限对话框 -->
-    <el-dialog title="分配数据权限" :visible.sync="openDataScope" width="500px" append-to-body>
-      <el-form :model="form" label-width="80px">
-        <el-form-item label="角色名称">
-          <el-input v-model="form.name" :disabled="true" />
-        </el-form-item>
-        <el-form-item label="角色标识">
-          <el-input v-model="form.code" :disabled="true" />
-        </el-form-item>
-        <el-form-item label="权限范围">
-          <el-select v-model="form.dataScope">
-            <el-option
-              v-for="item in dataScopeDictDatas"
-              :key="parseInt(item.value)"
-              :label="item.label"
-              :value="parseInt(item.value)"
-            ></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="数据权限" v-show="form.dataScope === SysDataScopeEnum.DEPT_CUSTOM">
-          <el-checkbox :checked="!form.deptCheckStrictly" @change="handleCheckedTreeConnect($event, 'dept')">父子联动(选中父节点，自动选择子节点)</el-checkbox>
-          <el-checkbox v-model="deptExpand" @change="handleCheckedTreeExpand($event, 'dept')">展开/折叠</el-checkbox>
-          <el-checkbox v-model="deptNodeAll" @change="handleCheckedTreeNodeAll($event, 'dept')">全选/全不选</el-checkbox>
-          <el-tree
-            class="tree-border"
-            :data="deptOptions"
-            show-checkbox
-            default-expand-all
-            ref="dept"
-            node-key="id"
-            :check-strictly="form.deptCheckStrictly"
-            empty-text="加载中，请稍后"
-            :props="defaultProps"
-          ></el-tree>
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitDataScope">确 定</el-button>
-        <el-button @click="cancelDataScope">取 消</el-button>
-      </div>
-    </el-dialog>
-
-    <!-- 分配角色的菜单权限对话框 -->
-    <el-dialog :title="title" :visible.sync="openMenu" width="500px" append-to-body>
-      <el-form :model="form" label-width="80px">
-        <el-form-item label="角色名称">
-          <el-input v-model="form.name" :disabled="true" />
-        </el-form-item>
-        <el-form-item label="角色标识">
-          <el-input v-model="form.code" :disabled="true" />
-        </el-form-item>
-        <el-form-item label="菜单权限">
-          <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')">展开/折叠</el-checkbox>
-          <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')">全选/全不选</el-checkbox>
-          <el-tree class="tree-border" :data="menuOptions" show-checkbox ref="menu" node-key="id"
-              :check-strictly="form.menuCheckStrictly" empty-text="加载中，请稍后" :props="defaultProps"></el-tree>
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitMenu">确 定</el-button>
-        <el-button @click="cancelMenu">取 消</el-button>
-      </div>
-    </el-dialog>
+    <!-- 新增&编辑 -->
+    <base-dialog
+      :dialogTitle="addOrEditTitle"
+      :dialogVisible="centervisible"
+      @cancel="handleCancel"
+      @confirm="handleConfirm"
+      :before-close="handleCancel"
+      width="50%"
+    >
+      <role-add ref="roleAdd" @successSubmit="successSubmit" />
+    </base-dialog>
+    <!-- 菜单权限 -->
+    <base-dialog
+      dialogTitle="分配菜单权限"
+      :dialogVisible="menuVisible"
+      @cancel="handleCancelm"
+      @confirm="handleConfirmm"
+      :before-close="handleCancelm"
+      width="50%"
+    >
+      <menu-auth ref="menuAuth" @successSubmitm="successSubmitm" />
+    </base-dialog>
+    <!-- 数据权限 -->
+    <base-dialog
+      dialogTitle="分配数据权限"
+      :dialogVisible="dataVisible"
+      @cancel="handleCanceld"
+      @confirm="handleConfirmd"
+      :before-close="handleCanceld"
+      width="50%"
+    >
+      <data-auth ref="dataAuth" @successSubmitd="successSubmitd" />
+    </base-dialog>
   </div>
 </template>
 
 <script>
-import {
-  addRole,
-  changeRoleStatus,
-  delRole,
-  exportRole,
-  getRole,
-  listRole,
-  updateRole
-} from "@/api/system/role";
-import {listSimpleMenus} from "@/api/system/menu";
-import {assignRoleMenu, listRoleMenus, assignRoleDataScope} from "@/api/system/permission";
-import {listSimpleDepts} from "@/api/system/dept";
-import {CommonStatusEnum, SystemDataScopeEnum} from "@/utils/constants";
-import {DICT_TYPE, getDictDatas} from "@/utils/dict";
-
+import { delRole, listRole } from "@/api/system/role";
+import tableHeightMixin from "@/mixins/tableHeightMixin";
+import RoleAdd from "./components/roleAdd";
+import MenuAuth from "./components/menuAuth";
+import DataAuth from "./components/dataAuth";
+import statusBtn from "./../components/statusBtn.vue";
+const tableProps = [
+  {
+    prop: "code",
+    label: "角色编码",
+    minWidth: 140,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "name",
+    label: "角色名称",
+    minWidth: 140,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "status",
+    label: "状态",
+    minWidth: 100,
+    subcomponent: statusBtn,
+  },
+  {
+    prop: "remark",
+    label: "角色描述",
+    minWidth: 140,
+    showOverflowtooltip: true,
+  },
+];
 export default {
   name: "SystemRole",
+  mixins: [tableHeightMixin],
+  components: { RoleAdd, MenuAuth, DataAuth },
   data() {
     return {
-      // 遮罩层
-      loading: true,
-      // 导出遮罩层
-      exportLoading: false,
-      // 显示搜索条件
-      showSearch: true,
-      // 总条数
-      total: 0,
-      // 角色表格数据
-      roleList: [],
-      // 弹出层标题
-      title: "",
-      // 是否显示弹出层
-      open: false,
-      // 是否显示弹出层（数据权限）
-      openDataScope: false,
-      // 是否显示弹出层（菜单权限）
-      openMenu: false,
-      menuExpand: false,
-      menuNodeAll: false,
-      deptExpand: true,
-      deptNodeAll: false,
-      // 菜单列表
-      menuOptions: [],
-      // 部门列表
-      deptOptions: [], // 部门属性结构
-      depts: [], // 部门列表
-      // 查询参数
+      formConfig: [
+        {
+          type: "input",
+          label: "角色名称",
+          placeholder: "角色名称",
+          param: "name",
+        },
+        {
+          type: "button",
+          btnName: "查询",
+          name: "search",
+          color: "primary",
+        },
+        {
+          type: "separate",
+        },
+        {
+          type: "button",
+          btnName: "新增",
+          name: "add",
+          color: "success",
+          plain: true,
+        },
+      ],
       queryParams: {
         pageNo: 1,
-        pageSize: 10,
-        name: undefined,
-        code: undefined,
-        status: undefined,
-        createTime: []
+        pageSize: 20,
+        name: "",
       },
-      // 表单参数
-      form: {},
-      defaultProps: {
-        label: "name",
-        children: "children"
-      },
-      // 表单校验
-      rules: {
-        name: [
-          { required: true, message: "角色名称不能为空", trigger: "blur" }
-        ],
-        code: [
-          { required: true, message: "角色标识不能为空", trigger: "blur" }
-        ],
-        sort: [
-          { required: true, message: "角色顺序不能为空", trigger: "blur" }
-        ]
-      },
-
-      // 枚举
-      SysCommonStatusEnum: CommonStatusEnum,
-      SysDataScopeEnum: SystemDataScopeEnum,
-      // 数据字典
-      roleTypeDictDatas: getDictDatas(DICT_TYPE.SYSTEM_ROLE_TYPE),
-      statusDictDatas: getDictDatas(DICT_TYPE.COMMON_STATUS),
-      dataScopeDictDatas: getDictDatas(DICT_TYPE.SYSTEM_DATA_SCOPE)
+      tableProps,
+      list: [],
+      tableBtn: [
+        {
+          type: "menuAuth",
+          btnName: "菜单权限",
+          // showTip: "新增工单",
+        },
+        {
+          type: "dataAuth",
+          btnName: "数据权限",
+          // showTip: "新增工单",
+        },
+        {
+          type: "edit",
+          btnName: "编辑",
+        },
+        {
+          type: "delete",
+          btnName: "删除",
+        },
+      ],
+      addOrEditTitle: "",
+      centervisible: false,
+      // 菜单权限
+      menuVisible: false,
+      // 数据权限
+      dataVisible: false,
+      // 总条数
+      total: 0,
     };
   },
   created() {
@@ -253,243 +177,109 @@ export default {
   methods: {
     /** 查询角色列表 */
     getList() {
-      this.loading = true;
-      listRole(this.queryParams).then(
-        response => {
-          this.roleList = response.data.list;
-          this.total = response.data.total;
-          this.loading = false;
-        }
-      );
-    },
-    // 角色状态修改
-    handleStatusChange(row) {
-      // 此时，row 已经变成目标状态了，所以可以直接提交请求和提示
-      let text = row.status === CommonStatusEnum.ENABLE ? "启用" : "停用";
-      this.$modal.confirm('确认要"' + text + '""' + row.name + '"角色吗?').then(function() {
-          return changeRoleStatus(row.id, row.status);
-        }).then(() => {
-          this.$modal.msgSuccess(text + "成功");
-        }).catch(function() {
-          // 异常时，需要将 row.status 状态重置回之前的
-          row.status = row.status === CommonStatusEnum.ENABLE ? CommonStatusEnum.DISABLE
-              : CommonStatusEnum.ENABLE;
-        });
-    },
-    // 取消按钮
-    cancel() {
-      this.open = false;
-      this.reset();
-    },
-    // 取消按钮（数据权限）
-    cancelDataScope() {
-      this.openDataScope = false;
-      this.reset();
-    },
-    // 取消按钮（菜单权限）
-    cancelMenu() {
-      this.openMenu = false;
-      this.reset();
-    },
-    // 表单重置
-    reset() {
-      if (this.$refs.menu !== undefined) {
-        this.$refs.menu.setCheckedKeys([]);
-      }
-      this.menuExpand = false;
-      this.menuNodeAll = false;
-      this.deptExpand = true;
-      this.deptNodeAll = false;
-      this.form = {
-        id: undefined,
-        name: undefined,
-        code: undefined,
-        sort: 0,
-        deptIds: [],
-        menuIds: [],
-        dataScope: undefined,
-        deptCheckStrictly: false,
-        menuCheckStrictly: true,
-        remark: undefined
-      };
-      this.resetForm("form");
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageNo = 1;
-      this.getList();
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.resetForm("queryForm");
-      this.handleQuery();
-    },
-    // 树权限（展开/折叠）
-    handleCheckedTreeExpand(value, type) {
-      if (type === 'menu') {
-        let treeList = this.menuOptions;
-        for (let i = 0; i < treeList.length; i++) {
-          this.$refs.menu.store.nodesMap[treeList[i].id].expanded = value;
-        }
-      } else if (type === 'dept') {
-        let treeList = this.deptOptions;
-        for (let i = 0; i < treeList.length; i++) {
-          this.$refs.dept.store.nodesMap[treeList[i].id].expanded = value;
-        }
-      }
-    },
-    // 树权限（全选/全不选）
-    handleCheckedTreeNodeAll(value, type) {
-      if (type === 'menu') {
-        this.$refs.menu.setCheckedNodes(value ? this.menuOptions: []);
-      } else if (type === 'dept') {
-        // this.$refs.dept.setCheckedNodes(value ? this.deptOptions: []);
-        this.$refs.dept.setCheckedNodes(value ? this.depts: []);
-      }
-    },
-    // 树权限（父子联动）
-    handleCheckedTreeConnect(value, type) {
-      if (type === 'menu') {
-        this.form.menuCheckStrictly = value;
-      } else if (type === 'dept') {
-        this.form.deptCheckStrictly = !value;
-      }
-    },
-    /** 新增按钮操作 */
-    handleAdd() {
-      this.reset();
-      this.open = true;
-      this.title = "添加角色";
-    },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.reset();
-      const id = row.id
-      getRole(id).then(response => {
-        this.form = response.data;
-        this.open = true;
-        this.title = "修改角色";
+      listRole(this.queryParams).then((response) => {
+        this.list = response.data.list;
+        this.total = response.data.total;
       });
     },
-    /** 分配菜单权限操作 */
-    handleMenu(row) {
-      this.reset();
-      const id = row.id
-      // 处理了 form 的角色 name 和 code 的展示
-      this.form.id = id;
-      this.form.name = row.name;
-      this.form.code = row.code;
-      // 打开弹窗
-      this.openMenu = true;
-      // 获得菜单列表
-      listSimpleMenus().then(response => {
-        // 处理 menuOptions 参数
-        this.menuOptions = [];
-        this.menuOptions.push(...this.handleTree(response.data, "id"));
-        // 获取角色拥有的菜单权限
-        listRoleMenus(id).then(response => {
-          // 设置为严格，避免设置父节点自动选中子节点，解决半选中问题
-          this.form.menuCheckStrictly = true
-          // 设置选中
-          this.$refs.menu.setCheckedKeys(response.data);
-          // 设置为非严格，继续使用半选中
-          this.form.menuCheckStrictly = false
-        })
-      });
-
-    },
-    /** 分配数据权限操作 */
-    handleDataScope(row) {
-      this.reset();
-      // 处理了 form 的角色 name 和 code 的展示
-      this.form.id = row.id;
-      this.form.name = row.name;
-      this.form.code = row.code;
-      // 打开弹窗
-      this.openDataScope = true;
-      // 获得部门列表
-      listSimpleDepts().then(response => {
-        // 处理 deptOptions 参数
-        this.deptOptions = [];
-        this.deptOptions.push(...this.handleTree(response.data, "id"));
-        this.depts = response.data;
-        // this.deptIds = response.data.map(x => x.id);
-        // 获得角色拥有的数据权限
-        getRole(row.id).then(response => {
-          this.form.dataScope = response.data.dataScope;
-          this.$refs.dept.setCheckedKeys(response.data.dataScopeDeptIds, false);
-        });
-      });
-    },
-    /** 提交按钮 */
-    submitForm: function() {
-      this.$refs["form"].validate(valid => {
-        if (valid) {
-          if (this.form.id !== undefined) {
-            updateRole(this.form).then(response => {
-              this.$modal.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            });
-          } else {
-            addRole(this.form).then(response => {
-              this.$modal.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            });
-          }
-        }
-      });
-    },
-    /** 提交按钮（数据权限） */
-    submitDataScope: function() {
-      if (this.form.id !== undefined) {
-        assignRoleDataScope({
-          roleId: this.form.id,
-          dataScope: this.form.dataScope,
-          dataScopeDeptIds: this.form.dataScope !== SystemDataScopeEnum.DEPT_CUSTOM ? [] :
-              this.$refs.dept.getCheckedKeys()
-        }).then(response => {
-          this.$modal.msgSuccess("修改成功");
-          this.openDataScope = false;
-          this.getList();
+    buttonClick(val) {
+      console.log(val);
+      if (val.btnName === "search") {
+        this.queryParams.pageNo = 1;
+        this.getList();
+      } else {
+        this.addOrEditTitle = "新增";
+        this.centervisible = true;
+        this.$nextTick(() => {
+          this.$refs.roleAdd.init();
         });
       }
     },
-    /** 提交按钮（菜单权限） */
-    submitMenu: function() {
-      if (this.form.id !== undefined) {
-        assignRoleMenu({
-          roleId: this.form.id,
-          menuIds: [...this.$refs.menu.getCheckedKeys(), ...this.$refs.menu.getHalfCheckedKeys()]
-        }).then(response => {
-          this.$modal.msgSuccess("修改成功");
-          this.openMenu = false;
-          this.getList();
-        });
+    handleClick(val) {
+      switch (val.type) {
+        case "edit":
+          this.addOrEditTitle = "编辑";
+          this.centervisible = true;
+          this.$nextTick(() => {
+            this.$refs.roleAdd.init(val.data.id);
+          });
+          break;
+        case "delete":
+          this.handleDelete(val.data);
+          break;
+        case "menuAuth":
+          this.menuVisible = true;
+          this.$nextTick(() => {
+            this.$refs.menuAuth.init(val.data.id);
+          });
+          break;
+        default:
+          this.dataVisible = true;
+          this.$nextTick(() => {
+            this.$refs.dataAuth.init(val.data.id);
+          });
       }
     },
     /** 删除按钮操作 */
     handleDelete(row) {
-      const ids = row.id || this.ids;
-      this.$modal.confirm('是否确认删除角色编号为"' + ids + '"的数据项?').then(function() {
-          return delRole(ids);
-        }).then(() => {
+      this.$modal
+        .confirm('是否确认删除角色名称为"' + row.name + '"的数据项?')
+        .then(function () {
+          return delRole(row.id);
+        })
+        .then(() => {
+          this.queryParams.pageNo = 1;
           this.getList();
           this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
+        })
+        .catch(() => {});
     },
-    /** 导出按钮操作 */
-    handleExport() {
-      const queryParams = this.queryParams;
-      this.$modal.confirm('是否确认导出所有角色数据项?').then(function() {
-          this.exportLoading = true;
-          return exportRole(queryParams);
-        }).then(response => {
-          this.$download.excel(response, '角色数据.xls');
-          this.exportLoading = false;
-      }).catch(() => {});
-    }
-  }
+    // 新增取消
+    handleCancel() {
+      this.$refs.roleAdd.formClear();
+      this.centervisible = false;
+      this.addOrEditTitle = "";
+    },
+    handleConfirm() {
+      this.$refs.roleAdd.submitForm();
+    },
+    successSubmit() {
+      this.handleCancel();
+      this.getList();
+    },
+    // 菜单权限
+    handleCancelm() {
+      this.$refs.menuAuth.formClear();
+      this.menuVisible = false;
+    },
+    handleConfirmm() {
+      this.$refs.menuAuth.submitForm();
+    },
+    successSubmitm() {
+      this.handleCancelm();
+      this.getList();
+    },
+    // 数据权限
+    handleCanceld() {
+      this.$refs.dataAuth.formClear();
+      this.dataVisible = false;
+    },
+    handleConfirmd() {
+      this.$refs.dataAuth.submitForm();
+    },
+    successSubmitd() {
+      this.handleCanceld();
+      this.getList();
+    },
+  },
 };
 </script>
+<style lang="scss" scoped>
+.app-container {
+  width: 100%;
+  height: calc(100vh - 120px - 8px);
+  background-color: #fff;
+  border-radius: 8px;
+  padding: 8px;
+}
+</style>