数据分析平台菜单

epmet-oper-web/src/views/modules/workPc/dataMenu.vue

@@ -0,0 +1,125 @@
+<template>
+  <el-card shadow="never"
+           class="aui-card--fill">
+    <div class="mod-sys__menu">
+      <el-form :inline="true"
+               :model="dataForm"
+               @keyup.enter.native="getDataList()">
+        <el-form-item>
+          <el-button type="primary"
+                     @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
+        </el-form-item>
+      </el-form>
+      <el-table v-loading="dataListLoading"
+                :data="dataList"
+                row-key="id"
+                border
+                :height="tableHeight"
+                style="width: 100%;">
+        <el-table-column prop="name"
+                         :label="$t('menu.name')"
+                         header-align="center"
+                         min-width="150"></el-table-column>
+        <el-table-column prop="icon"
+                         :label="$t('menu.icon')"
+                         header-align="center"
+                         align="center">
+          <template slot-scope="scope">
+            <svg class="icon-svg"
+                 aria-hidden="true">
+              <use :xlink:href="`#${scope.row.icon}`"></use>
+            </svg>
+          </template>
+        </el-table-column>
+        <el-table-column prop="type"
+                         :label="$t('menu.type')"
+                         header-align="center"
+                         align="center">
+          <template slot-scope="scope">
+            <el-tag v-if="scope.row.type === 0"
+                    size="small">{{ $t('menu.type0') }}</el-tag>
+            <el-tag v-else
+                    size="small"
+                    type="info">{{ $t('menu.type1') }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="sort"
+                         :label="$t('menu.sort')"
+                         header-align="center"
+                         align="center"></el-table-column>
+        <el-table-column prop="url"
+                         :label="$t('menu.url')"
+                         header-align="center"
+                         align="center"
+                         width="150"
+                         :show-overflow-tooltip="true"></el-table-column>
+        <el-table-column prop="permissions"
+                         :label="$t('menu.permissions')"
+                         header-align="center"
+                         align="center"
+                         width="150"
+                         :show-overflow-tooltip="true"></el-table-column>
+        <el-table-column :label="$t('handle')"
+                         fixed="right"
+                         header-align="center"
+                         align="center"
+                         width="150">
+          <template slot-scope="scope">
+            <el-button type="text"
+                       size="small"
+                       @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button>
+            <el-button type="text"
+                       size="small"
+                       @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
+            <el-button type="text"
+                       size="small"
+                       @click="showCustomerMenu(scope.row.id)">{{ '客户配置' }}</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <!-- 弹窗, 新增 / 修改 -->
+      <add-or-update v-if="addOrUpdateVisible"
+                     ref="addOrUpdate"
+                     :tableName="'data_menu'"
+                     @refreshDataList="getDataList"></add-or-update>
+      <!-- 客户菜单配置 -->
+      <customer-add-or-update ref="customerForm"
+                              @refreshDataList="getDataList"></customer-add-or-update>
+    </div>
+  </el-card>
+</template>
+
+<script>
+import mixinViewModule from '@/mixins/view-module'
+import AddOrUpdate from './menu-add-or-update'
+import { mapGetters } from 'vuex'
+import CustomerAddOrUpdate from './customer-add-or-update'
+export default {
+  mixins: [mixinViewModule],
+  data () {
+    return {
+      mixinViewModuleOptions: {
+        getDataListURL: '/gov/access/menu/list',
+        deleteURL: '/gov/access/menu'
+      },
+      customerFormVisible: false,
+      dataForm: {"tableName":'data_menu'}
+    }
+  },
+  components: {
+    AddOrUpdate, CustomerAddOrUpdate
+  },
+  computed: {
+    tableHeight () {
+      // return this.resolution === 'small' ? this.clientHeight - 210 : this.clientHeight - 220
+      return this.clientHeight - 210
+    },
+    ...mapGetters(['clientHeight', 'resolution']),
+  },
+  methods: {
+    showCustomerMenu (tableId) {
+      this.$refs['customerForm'].init(tableId)
+    }
+  }
+}
+</script>

epmet-oper-web/src/views/modules/workPc/menu-add-or-update.vue

@@ -114,7 +114,8 @@ export default {
         resourceList: [],
         permissions: '',
         sort: 0,
-        icon: ''
+        icon: '',
+        tableName: ''
       }
     }
   },
@@ -130,6 +131,12 @@ export default {
       }
     }
   },
+  props: {
+    tableName:{
+      type:String,
+      default:'gov_menu'
+    }
+  },
   watch: {
     'dataForm.type' (val) {
       this.$refs['dataForm'].clearValidate()
@@ -137,6 +144,7 @@ export default {
   },
   methods: {
     init () {
+      this.dataForm.tableName = this.tableName
       this.visible = true
       this.$nextTick(() => {
         this.$refs['dataForm'].resetFields()

epmet-oper-web/src/views/modules/workPc/menu.vue

@@ -80,6 +80,7 @@
       <!-- 弹窗, 新增 / 修改 -->
       <add-or-update v-if="addOrUpdateVisible"
                      ref="addOrUpdate"
+                     :tableName="'gov_menu'"
                      @refreshDataList="getDataList"></add-or-update>
       <!-- 客户菜单配置 -->
       <customer-add-or-update ref="customerForm"
@@ -101,7 +102,8 @@ export default {
         getDataListURL: '/gov/access/menu/list',
         deleteURL: '/gov/access/menu'
       },
-      customerFormVisible: false
+      customerFormVisible: false,
+      dataForm: {"tableName":'gov_menu'}
     }
   },
   components: {