微调-调整日期组件

This commit is contained in:
2024-10-22 14:47:25 +08:00
parent 97d6329d82
commit 0d25e477d7
15 changed files with 586 additions and 554 deletions

View File

@@ -1,9 +1,9 @@
<template>
<div class='table-box'>
<ProTable
ref='proTable'
:columns='columns'
:data='userData'
ref='proTable'
:columns='columns'
:data='userData'
>
<!-- 表格 header 按钮 -->
<template #tableHeader='scope'>
@@ -26,11 +26,11 @@
</template>
</ProTable>
</div>
<single-column ref='singleColumn' />
<double-column ref='doubleColumn' />
<single-column ref='singleColumn' />
<double-column ref='doubleColumn' />
</template>
<script setup lang='tsx' name='useProTable'>
import { ref ,reactive} from 'vue'
import { ref, reactive } from 'vue'
import { User } from '@/api/user/interface'
import { useHandleData } from '@/hooks/useHandleData'
import { useDownload } from '@/hooks/useDownload'
@@ -43,6 +43,7 @@ import userDataList from '@/api/user/userData'
import { useDictStore } from '@/stores/modules/dict'
import SingleColumn from '@/views/demo/proTable/singleColumn.vue'
import DoubleColumn from '@/views/demo/proTable/doubleColumn.vue'
const dictStore = useDictStore()
import {
getUserList,
@@ -54,6 +55,8 @@ import {
getUserStatus,
} from '@/api/user/user'
import { ElMessageBox } from 'element-plus'
import router from '@/routers'
const userData = userDataList
const singleColumn = ref()
const doubleColumn = ref()
@@ -88,7 +91,7 @@ const columns = reactive<ColumnProps<User.ResUserList>[]>([
prop: 'username',
label: '姓名',
width: 120,
search: { el: 'input'},
search: { el: 'input' },
},
{
prop: 'gender',
@@ -105,11 +108,11 @@ const columns = reactive<ColumnProps<User.ResUserList>[]>([
// 自定义 search 显示内容
render: ({ searchParam }) => {
return (
<div class='flx-center'>
<el-input vModel_trim={searchParam.minAge} placeholder='最小年龄' />
<span class='mr10 ml10'>-</span>
<el-input vModel_trim={searchParam.maxAge} placeholder='最大年龄' />
</div>
<div class='flx-center'>
<el-input vModel_trim={searchParam.minAge} placeholder='最小年龄' />
<span class='mr10 ml10'>-</span>
<el-input vModel_trim={searchParam.maxAge} placeholder='最大年龄' />
</div>
)
},
},
@@ -125,19 +128,19 @@ const columns = reactive<ColumnProps<User.ResUserList>[]>([
fieldNames: { label: 'userLabel', value: 'userStatus' },
render: scope => {
return (
<>
{BUTTONS.value.status ? (
<el-switch
model-value={scope.row.status}
active-text={scope.row.status ? '启用' : '禁用'}
active-value={1}
inactive-value={0}
onClick={() => changeStatus(scope.row)}
/>
) : (
<el-tag type={scope.row.status ? 'success' : 'danger'}>{scope.row.status ? '启用' : '禁用'}</el-tag>
)}
</>
<>
{BUTTONS.value.status ? (
<el-switch
model-value={scope.row.status}
active-text={scope.row.status ? '启用' : '禁用'}
active-value={1}
inactive-value={0}
onClick={() => changeStatus(scope.row)}
/>
) : (
<el-tag type={scope.row.status ? 'success' : 'danger'}>{scope.row.status ? '启用' : '禁用'}</el-tag>
)}
</>
)
},
},
@@ -156,8 +159,9 @@ const columns = reactive<ColumnProps<User.ResUserList>[]>([
])
// 删除用户信息
const deleteAccount = async (params: User.ResUserList) => {
await useHandleData(deleteUser, { id: [params.id] }, `删除【${params.username}】用户`)
proTable.value?.getTableList()
// await useHandleData(deleteUser, { id: [params.id] }, `删除【${params.username}】用户`)
// proTable.value?.getTableList()
router.push('/plan/autoTest')
}
// 批量删除用户信息
const batchDelete = async (id: string[]) => {
@@ -169,7 +173,7 @@ const batchDelete = async (id: string[]) => {
const resetPass = async (params: User.ResUserList) => {
// await useHandleData(resetUserPassWord, { id: params.id }, `重置【${params.username}】用户密码`)
// proTable.value?.getTableList()
doubleColumn.value.open("双列弹出框")
doubleColumn.value.open('双列弹出框')
}
// 切换用户状态
const changeStatus = async (row: User.ResUserList) => {
@@ -182,7 +186,7 @@ const changeStatus = async (row: User.ResUserList) => {
// 导出用户列表
const downloadFile = async () => {
ElMessageBox.confirm('确认导出用户数据?', '温馨提示', { type: 'warning' }).then(() =>
useDownload(exportUserInfo, '用户列表', proTable.value?.searchParam),
useDownload(exportUserInfo, '用户列表', proTable.value?.searchParam),
)
}
// 批量添加用户
@@ -198,6 +202,6 @@ const batchAdd = () => {
}
// 打开 drawer(新增、查看、编辑)
const openDrawer = (title: string, row: Partial<User.ResUserList> = {}) => {
singleColumn.value.open("单列弹出框")
singleColumn.value.open('单列弹出框')
}
</script>