'init'

src/views/RoleManager/index.vue

@@ -0,0 +1,201 @@
+<!--
+ * @Date: 2020-12-15 15:36:52
+ * @LastEditors: gtz
+ * @LastEditTime: 2022-06-13 09:47:14
+ * @FilePath: \mt-bus-fe\src\views\RoleManager\index.vue
+ * @Description:
+-->
+<template>
+  <div class="app-container">
+    <head-form
+      :form-config="headFormConfig"
+      @headBtnClick="btnClick"
+    />
+    <base-table
+      :top-btn-config="topBtnConfig"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      @clickTopBtn="clickTopBtn"
+    >
+      <method-btn
+        slot="handleBtn"
+        :width="trueWidth"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <pagination v-show="total > 0" :total="total" :page.sync="listQuery.current" :limit.sync="listQuery.size" @pagination="getList" />
+    <add-form :visible.sync="showDialog" @done="getList" />
+    <edit-form :visible.sync="showEditDialog" :target-info="{id: curEditId}" @done="getList" />
+    <menu-empower ref="empowerRef" :visible.sync="empowerDialog" @done="getList" />
+  </div>
+</template>
+
+<script>
+import basicData from '@/filters/basicData'
+import HeadForm from '@/components/basicData/HeadForm'
+import i18n from '@/lang'
+const topBtnConfig = [
+  {
+    type: 'add',
+    btnName: 'btn.add'
+  }
+]
+// edit here
+const tableBtn = [{
+  type: 'edit',
+  btnName: 'btn.edit'
+}, {
+  type: 'EmPower',
+  btnName: i18n.t('roleManage.roleEmPower')
+}, {
+  type: 'delete',
+  btnName: 'btn.delete'
+}
+]
+const tableProps = [{
+  prop: 'code',
+  label: i18n.t('roleManage.roleCode'),
+  align: 'center'
+}, {
+  prop: 'name',
+  label: i18n.t('roleManage.roleName'),
+  align: 'center'
+}, {
+  prop: 'enabled',
+  label: i18n.t('roleManage.status'),
+  align: 'center',
+  filter: basicData('enableState')
+},
+// {
+//   prop: 'category',
+//   label: i18n.t('roleManage.roleType'),
+//   align: 'center',
+//   filter: basicData('roleType')
+// },
+{
+  prop: 'remark',
+  label: i18n.t('roleManage.remark'),
+  align: 'center'
+}]
+import AddForm from './AddForm'
+import EditForm from './EditForm'
+import menuEmpower from './menuEmpower'
+import BaseTable from '@/components/BaseTable'
+// edit here
+import { getRoleList, deleteRole } from '@/api/role'
+
+import Pagination from '@/components/Pagination'
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+export default {
+  name: 'RoleManager',
+  components: { Pagination, BaseTable, MethodBtn, AddForm, EditForm, HeadForm, menuEmpower },
+  props: {},
+  data() {
+    return {
+      topBtnConfig,
+      tableBtn,
+      tableProps,
+      list: [],
+      total: 0,
+      trueWidth: 120,
+      listLoading: true,
+      showDialog: false,
+      curEditId: null,
+      showEditDialog: false,
+      empowerDialog: false,
+      listQuery: {
+        current: 1,
+        size: 20
+      },
+      headFormConfig: [
+        {
+          type: 'input',
+          label: i18n.t('module.basicData.visual.keyword'),
+          placeholder: this.$t('roleManage.roleName'),
+          param: 'keyName'
+        },
+        {
+          type: 'button',
+          btnName: 'btn.search',
+          name: 'search',
+          color: 'primary'
+        }
+      ],
+      headFormValue: {}
+    }
+  },
+  created() {
+    this.getList()
+  },
+  mounted() {},
+  methods: {
+    handleClick(raw) {
+      switch (raw.type) {
+        case 'delete':
+          this.$confirm(i18n.t('deleteMsgBox.content'), i18n.t('deleteMsgBox.hint'), {
+            confirmButtonText: i18n.t('btn.confirm'),
+            cancelButtonText: i18n.t('btn.cancel'),
+            type: 'warning'
+          }).then(async() => {
+            // 走接口
+            const result = await deleteRole({
+              id: raw.data.id
+            })
+            if (result.code === 0) {
+              this.$message({
+                type: 'success',
+                message: i18n.t('deleteMsgBox.doneMsg')
+              })
+              this.getList()
+            }
+          })
+          break
+        case 'edit':
+          this.showEditDialog = true
+          this.curEditId = raw.data.id
+          break
+        case 'EmPower':
+          this.empowerRole(raw.data.id)
+          break
+      }
+    },
+    async getList() {
+      this.listLoading = true
+      this.listQuery.name = this.headFormValue.keyName
+      // edit here
+      const res = await getRoleList(this.listQuery)
+      if (res.code === 0) {
+        this.list = res.data
+        // this.total = res.data.total
+        this.listLoading = false
+      }
+    },
+    // 新增 / 修改
+    addNew() {
+      this.showDialog = true
+    },
+    empowerRole(id) {
+      this.empowerDialog = true
+      this.$nextTick(() => {
+        this.$refs.empowerRef.init(id)
+      })
+    },
+    btnClick(val) {
+      this.headFormValue = val
+      // 如果点击的是搜索栏的其他按钮在这里继续写判断
+      if (this.headFormValue.btnName === 'search') {
+        this.getList()
+      }
+    },
+    clickTopBtn(val) {
+      if (val === 'add') {
+        this.addNew()// 新增
+      }
+    }
+  }
+}
+</script>