角色管理:

1. 表格渲染
2. 分页功能
公司信息
1. 表单渲染

src/api/setting.js

@@ -0,0 +1,20 @@
+import request from '@/utils/request'
+
+/**
+ * 获取公司信息
+ * **/
+export function getCompanyInfo(companyId) {
+  return request({
+    url: `/company/${companyId}`
+  })
+}
+
+/**
+ * 获取角色列表
+ * ***/
+export function getRoleList(params) {
+  return request({
+    url: '/sys/role',
+    params
+  })
+}

src/store/getters.js

@@ -12,7 +12,7 @@ const getters = {
   device: state => state.app.device,
   token: state => state.user.token,
   name: state => state.user.userInfo.username,
-  staffPhoto: state => state.userInfo.staffPhoto
-
+  staffPhoto: state => state.user.userInfo.staffPhoto,
+  companyId: state => state.user.userInfo.companyId
 }
 export default getters

src/views/setting/index.vue

@@ -14,10 +14,10 @@
               >新增角色</el-button>
             </el-row>
             <!-- 表格 -->
-            <el-table border="">
-              <el-table-column label="序号" width="120" />
-              <el-table-column label="角色名称" width="240" />
-              <el-table-column label="描述" />
+            <el-table border="" :data="list">
+              <el-table-column label="序号" type="index" align="center" width="120" />
+              <el-table-column label="角色名称" prop="name" align="center" width="240" />
+              <el-table-column label="描述" prop="description" align="center" />
               <el-table-column label="操作">
                 <el-button size="small" type="success">分配权限</el-button>
                 <el-button size="small" type="primary">编辑</el-button>
@@ -27,7 +27,7 @@
             <!-- 分页组件 -->
             <el-row type="flex" justify="center" align="middle" style="height: 60px">
               <!-- 分页组件 -->
-              <el-pagination layout="prev,pager,next" />
+              <el-pagination :page-sizes="[5, 10, 20, 50]" layout="total,sizes,prev,pager,next,jumper" :total="page.total" @current-change="currentChange" @size-change="sizeChange" />
             </el-row>
           </el-tab-pane>
           <el-tab-pane label="公司信息">
@@ -39,16 +39,16 @@
             />
             <el-form label-width="120px" style="margin-top:50px">
               <el-form-item label="公司名称">
-                <el-input disabled style="width:400px" />
+                <el-input v-model="formData.name" disabled style="width:400px" />
               </el-form-item>
               <el-form-item label="公司地址">
-                <el-input disabled style="width:400px" />
+                <el-input v-model="formData.companyAddress" disabled style="width:400px" />
               </el-form-item>
               <el-form-item label="邮箱">
-                <el-input disabled style="width:400px" />
+                <el-input v-model="formData.mailbox" disabled style="width:400px" />
               </el-form-item>
               <el-form-item label="备注">
-                <el-input type="textarea" :rows="3" disabled style="width:400px" />
+                <el-input v-model="formData.remarks" type="textarea" :rows="3" disabled style="width:400px" />
               </el-form-item>
             </el-form>
           </el-tab-pane>
@@ -60,8 +60,68 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
+import { getCompanyInfo, getRoleList } from '@/api/setting'
 export default {
-
+  data() {
+    return {
+      // 公司信息表单
+      formData: {
+        name: '',
+        companyAddress: '',
+        mailbox: '',
+        remarks: ''
+      },
+      // 员工列表
+      list: [],
+      // 分页信息
+      page: {
+        page: 1, // 当前页码
+        pagesize: 10, // 每页长度
+        total: 0 // 总条数
+      }
+    }
+  },
+  computed: {
+    ...mapGetters(['companyId'])
+  },
+  created() {
+    this.getCompanyInfo()
+    this.getRoleList()
+  },
+  methods: {
+    // 获取公司信息
+    async getCompanyInfo() {
+      this.formData = await getCompanyInfo(this.companyId)
+      // 隐藏信息
+      this.formData = {
+        name: '123',
+        companyAddress: '456',
+        mailbox: '789',
+        remarks: '987'
+      }
+    },
+    // 获取员工信息
+    async getRoleList() {
+      const { total, rows } = await getRoleList(this.page)
+      // 每次修改, page都是一个新的对象, 能保证页面重新渲染
+      this.page = {
+        ...this.page,
+        total
+      }
+      this.list = rows
+    },
+    // 翻页
+    currentChange(newPage) {
+      this.page.page = newPage
+      this.getRoleList()
+    },
+    // 每次条数设置
+    sizeChange(newSize) {
+      this.page.pagesize = newSize
+      this.getRoleList()
+    }
+  }
 }
 </script>