微调-调整日期组件
This commit is contained in:
@@ -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>
|
||||
Reference in New Issue
Block a user