|
|
@@ -1,112 +1,92 @@
|
|
|
-<!-- -->
|
|
|
<template>
|
|
|
- <div class="hc-layout-box user-page">
|
|
|
- <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>
|
|
|
- <template #extra>
|
|
|
- <el-input v-model="searchForm.queryValue" placeholder="请输入" clearable />
|
|
|
- <el-button color=" #4b4b4b" type="primary" class="ml-2">
|
|
|
- <hc-icon name="search" class="text-white" />
|
|
|
- <span class="text-white">搜索</span>
|
|
|
- </el-button>
|
|
|
- </template>
|
|
|
- <hc-table
|
|
|
- class="user-page-table"
|
|
|
- is-check
|
|
|
- :column="tableColumn"
|
|
|
- :datas="tableData"
|
|
|
-
|
|
|
- @selection-change="tableSelectionChange"
|
|
|
- >
|
|
|
- <template #action="{ row }">
|
|
|
- <el-link type="success" @click="rowEditClick(row)"> <hc-icon name="edit" />编辑</el-link>
|
|
|
- <el-link type="success" @click="rowDelClick(row)"> <hc-icon name="delete-bin-2" />删除</el-link>
|
|
|
- </template>
|
|
|
- </hc-table>
|
|
|
- <template #action>
|
|
|
- <HcPages :pages="searchForm" @change="pageChange" />
|
|
|
+ <hc-card :scrollbar="false" action-size="lg" class="user-page">
|
|
|
+ <template #header>
|
|
|
+ <div class="relative w-[300px]">
|
|
|
+ <hc-search-input v-model="searchForm.queryValue" text="搜索" @search="searchClick" />
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template #extra>
|
|
|
+ <el-button color="#20C98B" type="primary" @click="addClick">
|
|
|
+ <hc-icon class="text-white" name="add" />
|
|
|
+ <span class="text-white">新增</span>
|
|
|
+ </el-button>
|
|
|
+ <el-button :disabled="tableCheckedKeys.length === 0" color="#FF6C6C" @click="rowDelClick">
|
|
|
+ <hc-icon class="text-white" name="delete-bin-2" />
|
|
|
+ <span class="text-white">删除</span>
|
|
|
+ </el-button>
|
|
|
+ <el-button v-yes-com:[refreshPassword] :disabled="tableCheckedKeys.length === 0" type="info" 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 class="text-white" name="download" />
|
|
|
+ <span class="text-white">导出</span>
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ <hc-table :column="tableColumn" :datas="tableData" class="user-page-table" is-check @selection-change="tableSelectionChange">
|
|
|
+ <template #action="{ row }">
|
|
|
+ <el-link type="success" @click="rowEditClick(row)">
|
|
|
+ <hc-icon name="edit" />编辑
|
|
|
+ </el-link>
|
|
|
+ <el-link type="success" @click="rowDelClick(row)">
|
|
|
+ <hc-icon name="delete-bin-2" />删除
|
|
|
+ </el-link>
|
|
|
</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>
|
|
|
+ </hc-table>
|
|
|
+ <template #action>
|
|
|
+ <hc-pages :pages="searchForm" @change="pageChange" />
|
|
|
+ </template>
|
|
|
|
|
|
- <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>
|
|
|
+ <!-- 新增编辑 -->
|
|
|
+ <hc-dialog v-model="addModal" title="新增" widths="50rem">
|
|
|
+ <hc-icon class="font-bold" name="user" style="font-size: 18px;" />
|
|
|
+ <span class="font-bold">基础信息</span>
|
|
|
+ <el-divider style="margin-top: 10px;" />
|
|
|
+ <el-form :inline="true" :model="baseForm" :rules="baseFormRules" label-width="auto">
|
|
|
+ <div class="hc-form-item">
|
|
|
+ <el-form-item label="登陆账户:" prop="user">
|
|
|
+ <el-input v-model="baseForm.user" clearable placeholder="请输入" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="密码:" prop="password">
|
|
|
+ <el-input v-model="baseForm.password" clearable placeholder="请输入" 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" clearable placeholder="请输入" />
|
|
|
+ </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>
|
|
|
+ </hc-card>
|
|
|
</template>
|
|
|
|
|
|
- <script setup>
|
|
|
- import { ref, watch } from 'vue'
|
|
|
- import { HcDelMsg } from 'hc-vue3-ui'
|
|
|
- const tableColumn = [
|
|
|
- { key: 'key1', name: '登陆账户', align:'center' },
|
|
|
- { key: 'key2', name: '用户名', align:'center' },
|
|
|
- { key: 'key3', name: '角色', align:'center' },
|
|
|
- { key: 'action', name: '操作', align:'center' },
|
|
|
- ]
|
|
|
- const tableData = ref([
|
|
|
- { key1: 'admin', key2: 'xxx', key3: '超级管理员' },
|
|
|
- { key1: '13028304756', key2: 'aaa', key3: '角色' },
|
|
|
- ])
|
|
|
+<script setup>
|
|
|
+import { ref } from 'vue'
|
|
|
+import { HcDelMsg } from 'hc-vue3-ui'
|
|
|
+
|
|
|
+const tableColumn = [
|
|
|
+ { key: 'key1', name: '登陆账户', align: 'center' },
|
|
|
+ { key: 'key2', name: '用户名', align: 'center' },
|
|
|
+ { key: 'key3', name: '角色', align: 'center' },
|
|
|
+ { key: 'action', name: '操作', align: 'center', width: '140' },
|
|
|
+]
|
|
|
+const tableData = ref([
|
|
|
+ { key1: 'admin', key2: 'xxx', key3: '超级管理员' },
|
|
|
+ { key1: '13028304756', key2: 'aaa', key3: '角色' },
|
|
|
+])
|
|
|
|
|
|
- const addModal = ref(false)
|
|
|
- const addClick = ()=>{
|
|
|
- addModal.value = true
|
|
|
- }
|
|
|
- const baseForm = ref({
|
|
|
- user:'',
|
|
|
- username: '',
|
|
|
- password: '',
|
|
|
- role: '',
|
|
|
- })
|
|
|
- const baseFormRules = {
|
|
|
+const addModal = ref(false)
|
|
|
+const addClick = () => {
|
|
|
+ addModal.value = true
|
|
|
+}
|
|
|
+const baseForm = ref({ user: '', username: '', password: '', role: '' })
|
|
|
+const baseFormRules = {
|
|
|
user: {
|
|
|
required: true,
|
|
|
trigger: 'blur',
|
|
|
@@ -129,15 +109,18 @@
|
|
|
},
|
|
|
}
|
|
|
const tableCheckedKeys = ref([])
|
|
|
- //多选事件
|
|
|
+//多选事件
|
|
|
const tableSelectionChange = (rows) => {
|
|
|
tableCheckedKeys.value = rows
|
|
|
}
|
|
|
//搜索表单
|
|
|
-const searchForm = ref({
|
|
|
- queryValue: null, current: 1, size: 20, total: 0,
|
|
|
-})
|
|
|
-const getTableData = ()=>{
|
|
|
+const searchForm = ref({ queryValue: null, current: 1, size: 20, total: 0 })
|
|
|
+
|
|
|
+const searchClick = () => {
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+const getTableData = () => {
|
|
|
|
|
|
}
|
|
|
//分页被点击
|
|
|
@@ -146,14 +129,14 @@ const pageChange = ({ current, size }) => {
|
|
|
searchForm.value.size = size
|
|
|
getTableData()
|
|
|
}
|
|
|
-const rowEditClick = (row)=>{
|
|
|
+const rowEditClick = (row) => {
|
|
|
addModal.value = true
|
|
|
baseForm.value = row
|
|
|
}
|
|
|
-const rowDelClick = ()=>{
|
|
|
- HcDelMsg( async ( resolve) => {
|
|
|
- // await removeContractTreeNode()
|
|
|
- resolve() //关闭弹窗的回调
|
|
|
+const rowDelClick = () => {
|
|
|
+ HcDelMsg(async (resolve) => {
|
|
|
+ // await removeContractTreeNode()
|
|
|
+ resolve() //关闭弹窗的回调
|
|
|
})
|
|
|
}
|
|
|
const refreshPassword = async (_, resolve) => {
|
|
|
@@ -164,32 +147,11 @@ 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 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>
|
