用户管理页面

src/views/system/user.vue

@@ -1,11 +1,191 @@
+<!--  -->
 <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>
+                <el-button v-yes-com:[refreshPassword] type="info" :disabled="tableCheckedKeys.length === 0" yes-com-text="是否重置密码为 123456">
+                    <hc-icon name="refresh" />
+                    <span>重置密码</span>
+                </el-button>
+                <el-button v-yes-com:[exportClick] color="#6CC2FF" yes-com-text="确定导出用户数据?">
+                    <hc-icon name="download" 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>
+                <el-form-item label="密码:" prop="password">
+                    <el-input v-model="baseForm.password" placeholder="请输入" clearable show-password type="password" />
+                </el-form-item>
+            </div>
+            <div class="hc-form-item">
+                <el-form-item label="用户名:" prop="username">
+                    <el-input v-model="baseForm.username" placeholder="请输入" clearable />
+                </el-form-item>
+                <el-form-item label="角色:" prop="role">
+                    <el-select
+                        v-model="baseForm.role"
+                        placeholder="请选择"
+                    >
+                        <el-option
+                            v-for="item in roleOptions"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value"
+                        />
+                    </el-select>
+                </el-form-item>
+            </div>
+        </el-form>
+    </hc-dialog>
 </template>
-
-<script setup>
-
+   
+   <script setup>
+   import { ref, watch } from 'vue'
+   import { HcDelMsg } from 'hc-vue3-ui'
+   const tableColumn = [
+       { key: 'key1', name: '登陆账户' },
+       { key: 'key2', name: '用户名' },
+       { key: 'key3', 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',
+  }])
 </script>
 
-<style scoped lang="scss">
-
-</style>
+ <style lang='scss' scoped>
+.hc-layout-box{
+    position: relative;
+    height: 100%;
+    width: 100%;
+}
+</style>