From fac4262763e61454a8c2b8cd3e420a5645edd77e Mon Sep 17 00:00:00 2001
From: duan <duanduanduan.com>
Date: Thu, 4 Aug 2022 15:44:05 +0800
Subject: [PATCH] =?UTF-8?q?feat(src/views/user/role):=20=E5=AE=8C=E6=88=90?=
 =?UTF-8?q?=20=E8=A7=92=E8=89=B2=E4=BF=A1=E6=81=AF=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E5=89=8D=E7=AB=AF=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/user/role/index.vue | 250 +++++++++++++++++++++++++++++++++-
 1 file changed, 247 insertions(+), 3 deletions(-)

diff --git a/src/views/user/role/index.vue b/src/views/user/role/index.vue
index 709727b..a0189bd 100644
--- a/src/views/user/role/index.vue
+++ b/src/views/user/role/index.vue
@@ -1,13 +1,257 @@
 <template>
-  <h1>角色信息</h1>
+  <div class="main-container">
+    <div class="title">角色信息</div>
+    <div class="header">
+      <el-button type="primary" plain @click="handleAddRole"><i class="el-icon-plus" />新增角色</el-button>
+      <div class="header-right">
+        <el-button icon="el-icon-delete" circle @click="handleDel" />
+        <el-button icon="el-icon-refresh" circle @click="handleRefresh" />
+      </div>
+    </div>
+    <el-table
+      :data="tableData"
+      :header-cell-style="headerStyle"
+      height="460"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column
+        type="selection"
+        width="55"
+        align="center"
+      />
+      <el-table-column
+        prop="date"
+        label="角色代码"
+        align="center"
+      />
+      <el-table-column
+        prop="name"
+        label="角色名"
+        align="center"
+      />
+      <el-table-column
+        show-overflow-tooltip
+        prop="address"
+        label="系统权限"
+        align="center"
+      />
+      <el-table-column
+        prop="address"
+        label="角色名"
+        align="center"
+      />
+      <el-table-column
+        prop="address"
+        label="操作"
+        align="center"
+      >
+        <template slot-scope="scope">
+          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div style="text-align: center">
+      <el-pagination
+        layout="prev, pager, next"
+        :current-page.sync="page"
+        :total="total"
+        :page-size.sync="page_size"
+        hide-on-single-page
+        @current-change="pageChange"
+      />
+    </div>
+    <el-dialog :visible.sync="dialogVisible" :title="title" @close="onClose">
+      <el-row class="form-container" :gutter="15">
+        <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
+          <el-col :span="12">
+            <el-form-item label="角色代码" prop="field101">
+              <el-input v-model="formData.field101" placeholder="请输入角色代码" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="角色名" prop="field102">
+              <el-input v-model="formData.field102" placeholder="请输入角色名" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="14">
+            <el-form-item label="系统权限" prop="field103">
+              <el-checkbox-group v-model="formData.field103" size="medium">
+                <el-checkbox
+                  v-for="(item, index) in field103Options"
+                  :key="index"
+                  :label="item.value"
+                  :disabled="item.disabled"
+                >{{ item.label }}</el-checkbox>
+              </el-checkbox-group>
+            </el-form-item>
+          </el-col>
+          <el-col :span="14">
+            <el-form-item label="终端权限" prop="field104">
+              <el-checkbox-group v-model="formData.field104" size="medium">
+                <el-checkbox
+                  v-for="(item, index) in field104Options"
+                  :key="index"
+                  :label="item.value"
+                  :disabled="item.disabled"
+                >{{ item.label }}</el-checkbox>
+              </el-checkbox-group>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="具体描述" prop="field105">
+              <el-input
+                v-model="formData.field105"
+                type="textarea"
+                placeholder="请输入具体描述"
+                :autosize="{minRows: 4, maxRows: 4}"
+                :style="{width: '100%'}"
+              />
+            </el-form-item>
+          </el-col>
+        </el-form>
+      </el-row>
+      <div slot="footer" style="text-align: center">
+        <el-button @click="close">取消</el-button>
+        <el-button type="primary" @click="handelConfirm">确定</el-button>
+      </div>
+    </el-dialog>
+  </div>
 </template>
 
 <script>
 export default {
-  name: 'Role'
+  name: 'Role',
+  data() {
+    return {
+      page: 1,
+      page_size: 15,
+      total: 0,
+      title: '',
+      dialogVisible: false,
+      tableData: [{}],
+      headerStyle: { 'background': '#E6E6E6' },
+      multipleSelection: [],
+      formData: {
+        field101: undefined,
+        field102: undefined,
+        field103: [],
+        field104: [],
+        field105: undefined
+      },
+      rules: {
+        field101: [{
+          required: true,
+          message: '请输入角色代码',
+          trigger: 'blur'
+        }],
+        field102: [{
+          required: true,
+          message: '请输入角色名',
+          trigger: 'blur'
+        }],
+        field103: [],
+        field104: [],
+        field105: []
+      },
+      field103Options: [{
+        'label': '选项一',
+        'value': 1
+      }, {
+        'label': '选项二',
+        'value': 2
+      }],
+      field104Options: [{
+        'label': '选项一',
+        'value': 1
+      }, {
+        'label': '选项二',
+        'value': 2
+      }]
+    }
+  },
+  methods: {
+    pageChange(page) {
+      this.page = page
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val
+    },
+    handleAddRole() {
+      this.title = '添加角色'
+      this.dialogVisible = true
+    },
+    handleDel() {
+      if (this.multipleSelection.length === 0) {
+        this.$message.warning('请选择需要删除的角色')
+        return
+      }
+      this.$confirm('确定要删除角色“陈小红”吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$message({
+          type: 'success',
+          message: '删除成功!'
+        })
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消删除'
+        })
+      })
+    },
+    handleRefresh() {
+
+    },
+    handleEdit() {
+      this.title = '编辑角色'
+      this.dialogVisible = true
+    },
+    onClose() {
+      this.$refs['elForm'].resetFields()
+    },
+    close() {
+      this.dialogVisible = false
+    },
+    handelConfirm() {
+      this.$refs['elForm'].validate(valid => {
+        if (!valid) return
+        this.close()
+      })
+    }
+  }
 }
 </script>
-
 <style scoped>
+>>>.el-dialog__body{
+  margin-right: 50px;
+}
+</style>
 
+<style lang="scss" scoped>
+.main-container{
+  min-height:calc(100vh - 12rem) ;
+  padding: 1rem;
+  margin: 1rem;
+  background: white;
+  .title{
+    font-size: 20px;
+    font-weight: bold;
+    color: #000000;
+  }
+  .header{
+    margin: 1rem 0 1rem 0;
+    .el-input{
+      width: 9.375rem;
+      margin-right: 1rem;
+    }
+    .el-select {
+      margin-right: 1rem;
+    }
+    .header-right{
+      float: right;
+    }
+  }
+}
 </style>