analysis/src/views/system/user.vue

<!--  -->
<template>
    <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>
   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 lang='scss' scoped>
.hc-layout-box{
    position: relative;
    height: 100%;
    width: 100%;
}
</style>