角色管理页面

src/views/system/role.vue

@@ -1,11 +1,236 @@
+<!--  -->
 <template>
-    <div>角色管理</div>
+    <div class="hc-layout-box">
+        <hc-card :scrollbar="false" action-size="lg">
+            <template #header>
+                <el-button color="#20C98B" type="primary" @click="addClick">
+                    <hc-icon name="add" class="text-white" />
+                    <span class="text-white">新增</span>
+                </el-button>
+            
+                <el-button color="#FF6C6C" :disabled="tableCheckedKeys.length === 0" @click="rowDelClick">
+                    <hc-icon name="delete-bin-2" class="text-white" />
+                    <span class="text-white">删除</span>
+                </el-button>
+            </template>
+            <hc-table 
+                is-check
+                :column="tableColumn"
+                :datas="tableData" 
+                :header-row-style="tableHeaderRowStyle"
+                @selection-change="tableSelectionChange"
+            >
+                <template #action="{ row }">
+                    <el-link type="success" @click="rowEditClick(row)">   <hc-icon name="edit" />编辑</el-link>
+                    <el-link type="danger" @click="rowDelClick(row)">  <hc-icon name="delete-bin-2" />删除</el-link>
+                </template>
+            </hc-table>
+            <template #action>
+                <HcPages :pages="searchForm" @change="pageChange" />
+            </template>
+        </hc-card>
+    </div>
+    <hc-dialog v-model="addModal" title="新增" widths="50rem">
+        <hc-icon name="user" style="font-size: 18px;" class="font-bold" />
+        <span class="font-bold">基础信息</span>
+                 
+        <el-divider style="margin-top: 10px;" />
+        <el-form :inline="true" :model="baseForm" label-width="auto" :rules="baseFormRules">
+            <div class="hc-form-item">
+                <el-form-item label="角色名称:" prop="user">
+                    <el-input v-model="baseForm.user" placeholder="请输入" clearable />
+                </el-form-item>
+            </div>
+        </el-form>
+        <hc-icon name="user-settings" style="font-size: 18px;" class="font-bold" />
+        <span class="font-bold">权限设置</span>
+        <el-divider style="margin-top: 10px;" />
+        <el-tree
+            ref="treeRef"
+            style="max-width: 600px"
+            :data="data"
+            show-checkbox
+            default-expand-all
+            node-key="id"
+            highlight-current
+            :props="defaultProps"
+        />
+    </hc-dialog>
 </template>
+   
+   <script setup>
+   import { ref, watch } from 'vue'
+   import { HcDelMsg } from 'hc-vue3-ui'
+   const tableColumn = [
+       { key: 'key1', name: '角色名称' },
+    
+       { key: 'action', name: '操作' },
+   ]
+   const tableData = ref([
+       { key1: 'admin', key2: 'xxx', key3: '超级管理员' },
+       { key1: '13028304756', key2: 'aaa', key3: '角色' },
+   ])
+   //设置表头行的样式
+   const tableHeaderRowStyle = ({ row, rowIndex }) => {
+       // --el-table-header-bg-color 是表格,表头行的背景色
+       return '--el-table-header-bg-color: #4b4b4b;  color: white;'
+   }
+   const addModal = ref(false)
+   const addClick = ()=>{
+       addModal.value = true
+   }
+   const baseForm = ref({
+     user:'',
+     username: '',
+     password: '',
+     role: '',
+   })
+   const baseFormRules = {
+    user: {
+        required: true,
+        trigger: 'blur',
+        message: '请输入登陆账户',
+    },
+    password: {
+        required: true,
+        trigger: 'blur',
+        message: '请输入密码',
+    },
+    username: {
+        required: true,
+        trigger: 'blur',
+        message: '请输入用户名',
+    },
+    role: {
+        required: true,
+        trigger: 'blur',
+        message: '请选择角色',
+    },
+}
+const tableCheckedKeys = ref([])
+ //多选事件
+const tableSelectionChange = (rows) => {
+    tableCheckedKeys.value = rows
+}
+//搜索表单
+const searchForm = ref({
+    queryValue: null, current: 1, size: 20, total: 0,
+})
+const getTableData = ()=>{
+    
+}
+//分页被点击
+const pageChange = ({ current, size }) => {
+    searchForm.value.current = current
+    searchForm.value.size = size
+    getTableData()
+}
+const rowEditClick = (row)=>{
+    addModal.value = true
+    baseForm.value = row
+}
+const rowDelClick = ()=>{
+    HcDelMsg( async ( resolve) => {
+            // await removeContractTreeNode()
+            resolve() //关闭弹窗的回调
+    })
+}
+const refreshPassword = async (_, resolve) => {
+    //这里可以写一些操作
+    resolve() //这个一定要存在，否则不会关闭弹窗
+}
+const exportClick = async (_, resolve) => {
+    //这里可以写一些操作
+    resolve() //这个一定要存在，否则不会关闭弹窗
+}
+const roleOptions = ref([ {
+    value: 'Option1',
+    label: 'Option1',
+  },
+  {
+    value: 'Option2',
+    label: 'Option2',
+  },
+  {
+    value: 'Option3',
+    label: 'Option3',
+  },
+  {
+    value: 'Option4',
+    label: 'Option4',
+  },
+  {
+    value: 'Option5',
+    label: 'Option5',
+  }])
+
+  const treeRef = ref(null)
+
 
-<script setup>
 
-</script>
 
-<style scoped lang="scss">
 
-</style>
+const defaultProps = {
+  children: 'children',
+  label: 'label',
+}
+
+const data = [
+  {
+    id: 1,
+    label: 'Level one 1',
+    children: [
+      {
+        id: 4,
+        label: 'Level two 1-1',
+        children: [
+          {
+            id: 9,
+            label: 'Level three 1-1-1',
+          },
+          {
+            id: 10,
+            label: 'Level three 1-1-2',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    id: 2,
+    label: 'Level one 2',
+    children: [
+      {
+        id: 5,
+        label: 'Level two 2-1',
+      },
+      {
+        id: 6,
+        label: 'Level two 2-2',
+      },
+    ],
+  },
+  {
+    id: 3,
+    label: 'Level one 3',
+    children: [
+      {
+        id: 7,
+        label: 'Level two 3-1',
+      },
+      {
+        id: 8,
+        label: 'Level two 3-2',
+      },
+    ],
+  },
+]
+</script>
+
+ <style lang='scss' scoped>
+.hc-layout-box{
+    position: relative;
+    height: 100%;
+    width: 100%;
+}
+</style>