ts
ts
import { userApi } from "@/api/user/user";
import {ref,reactive} from 'vue';
import cloneDeep from 'lodash/cloneDeep';
import { ElMessageBox ,ElMessage} from "element-plus";
export function index(){
/**
* 空表单
*/
const EmptyFrom:userType = {
id: 0,
name: "",
password: "",
iStatus: 3,
memo: "",
create_time: "",
}
const FormData = ref<userType>()
/**
* 弹窗标题
*/
const DialogTitle = ref("");
/**
* 表格数据
*/
const TableData = ref<userType[]>()
/**
* 搜索框form表单
*/
const SearchData = ref<userType>(cloneDeep(EmptyFrom));
/**
* 分页查询数据载体
*/
const PaginationData = ref({ PageNum: 1, PageSize: 10 });
/**
* 列表总数
*/
const Total = ref(0);
/**
* 弹窗标识 false关闭，true打开
*/
const DialogViewFlag = ref(false);
/**
* 弹窗数据
*/
const DialogFormData = ref<userType>(cloneDeep(EmptyFrom));
/**
* 获取列表数据
*/
const FunGetList = async()=>{
try{
const request = await userApi.getList({Pagination:PaginationData.value,data:SearchData.value});
PaginationData.value = {
PageNum: request.data.pageNum,
PageSize: request.data.pageSize
};
TableData.value = request.data.items
Total.value = request.data.total
}catch(error){
}
}
/**
* 获取列表数据，（用来测试的）
*/
const FunGetListText = async()=>{
try{
const request = await userApi.getList({Pagination:PaginationData.value,data:EmptyFrom});
console.log("request:",request);
PaginationData.value = cloneDeep({
PageNum: request.data.pageNum,
PageSize: request.data.pageSize
}) as any
TableData.value = request.data.items
Total.value = request.data.total
}catch(error){
}
}
/**
* 打开弹窗,通过id获取每条记录
* @param Param 每条记录的id
*/
const FunOpenDialog = (Param:any) =>{
DialogViewFlag.value = true;
DialogFormData.value = cloneDeep(Param);
if(Param.id == 0){
DialogTitle.value = "新增用户"
DialogFormData.value.create_time = getCurrentTime()
}else{
DialogTitle.value = "编辑用户"
}
}
/**
* 关闭弹窗
*/
const FunCloseDialog = ()=>{
DialogViewFlag.value = false;
DialogFormData.value = cloneDeep(EmptyFrom);
}
/**
* 弹窗表单的提交，id为0是新增，id为其他是修改
*/
const FunSubmit = async()=>{
// console.log("弹窗表单数据",DialogFormData.value);
try{
if(DialogFormData.value?.id == 0){
await userApi.add(DialogFormData.value);
}else{
await userApi.Edit(DialogFormData.value);
}
DialogViewFlag.value = false;
FunGetList();
ElMessage.success("成功操作");
}catch(error){}
}
/**
* 每条的删除按钮
* @param Param scope.row,每条记录的信息
*/
const FunDelete = async(Param:any)=>{
try{
await userApi.del(Param);
FunGetList();
} catch(error){}
}
/**
* 监听页码变化
* @param val 输入页码
*/
// 监听页码变化
const FunhandleCurrentChange = async(val: number) => {
PaginationData.value = { PageNum: val, PageSize: PaginationData.value.PageSize }
// Pagination.value.PageNum = val;
await FunGetList();
};
/**
*
* @param val 输入的每页大小
* 监听每页条数变化
*/
const FunhandleSizeChange = async(val: number) => {
PaginationData.value = { PageNum: PaginationData.value.PageNum, PageSize: val }
// Pagination.value.PageSize = val;
await FunGetList();
};
/**
* 重置搜索框数据
*/
const FunReSetSearchData = ()=>{
SearchData.value = cloneDeep(EmptyFrom)
}
/**
* 重置弹窗表单数据
*/
const FunReSetDialogFormData = ()=>{
DialogFormData.value = cloneDeep(EmptyFrom)
}
/**
* 获取当前时间 yyyy-mm-ddThh:MM:ss
* @returns
*/
function getCurrentTime(): string {
const now = new Date()
const pad = (n: number, len: number = 2) => String(n).padStart(len, '0')
const year = now.getFullYear()
const month = pad(now.getMonth() + 1)
const day = pad(now.getDate())
const hours12 = pad(now.getHours() % 12 || 12) // 12小时制
const minutes = pad(now.getMinutes())
const seconds = pad(now.getSeconds())
const milliseconds = pad(now.getMilliseconds(), 3)
return `${year}-${month}-${day}T${hours12}:${minutes}:${seconds}.${milliseconds}`
}
return {
TableData,
SearchData,
PaginationData,
DialogTitle,
Total,
DialogViewFlag,
DialogFormData,
EmptyFrom,
FunGetList,
FunOpenDialog,
FunSubmit,
FunGetListText,
FunhandleSizeChange,
FunhandleCurrentChange,
FunReSetSearchData,
FunCloseDialog,
FunReSetDialogFormData,
FunDelete,
}
}
export interface userType {
id: number;
name: string;
password: string;
iStatus: number;
memo: string;
create_time: string;
}
export interface paginationType {
PageNum:number;
PageSize:number;
}
export interface SearchDataType {
Pagination:paginationType;
list:userType;
}vue
vue
<template>
<!--搜索框-->
<el-row>
<el-col>
<el-card style="" shadow="never">
<el-form inline="true" :model="SearchData" >
<el-form-item label="名字">
<el-input v-model="SearchData.name" />
</el-form-item>
<el-form-item label="状态">
<el-select v-model="SearchData.iStatus" placeholder="请选择" width="100" style="width:200px">
<el-option label="禁用" :value="0" />
<el-option label="启用" :value="1" />
<el-option label="请选择" :value="3" ></el-option>
</el-select>
</el-form-item>
<el-form-item label="备注">
<el-input v-model="SearchData.memo" />
</el-form-item>
<el-form-item >
<el-button type="plain" @click="FunReSetSearchData">重置</el-button>
<el-button type="primary" @click="FunGetList">搜索</el-button>
</el-form-item>
</el-form>
</el-card>
</el-col>
</el-row>
<!--中间按钮-->
<el-row>
<el-col>
<el-button type="primary" @click="FunGetListText">获取数据</el-button>
<el-button type="primary" @click="FunOpenDialog(EmptyFrom)">新增</el-button>
</el-col>
</el-row>
<!--表格-->
<el-row>
<el-col :span="24">
<el-table :data="TableData" border style="width: 100%;max-height: 400px;" height="400px" >
<el-table-column fixed="left" label="名字" prop="name" width="200" align="center" />
<el-table-column label="密码" prop="password" width="200" align="center"/>
<el-table-column label="状态" prop="iStatus" width="200" align="center">
<template #default="scope" >
<template v-if="scope.row.iStatus ==1"><el-text class="mx-1" type="success">启用</el-text></template>
<template v-else > <el-text class="mx-1" type="info">禁用</el-text></template>
</template>
</el-table-column>
<el-table-column label="备注" prop="memo" min-width="180" align="center" show-overflow-tooltip />
<el-table-column label="创建时间" prop="create_time" width="200" align="center">
<template #default="scope"
>
{{ scope.row.create_time.split("T")[0] }} {{ scope.row.create_time.split("T")[1] }}
</template>
</el-table-column>
<el-table-column label="操作" align="center" fixed="right" width="180" >
<template #default="scope">
<div style="display: flex;justify-content: center;width: 100%; gap: 8px;">
<el-button @click="FunOpenDialog(scope.row)" type="success" size="small">编辑</el-button>
<el-popconfirm
confirm-button-text="是"
confirm-button-type="warning"
cancel-button-text="否"
:title="`你确定要删除用户 ${scope.row.name} 吗？`"
placement="top-end"
@confirm="FunDelete(scope.row)"
>
<template #reference>
<el-button type="danger" size="small">删除</el-button>
</template>
</el-popconfirm>
</div>
</template>
</el-table-column>
</el-table>
</el-col>
</el-row>
<!--分页-->
<el-row>
<el-col>
<el-pagination
:current-page=" PaginationData.PageNum"
:page-size="PaginationData.PageSize"
:page-sizes="[1,2,3,4,5,6,7,8,9,10, 20, 50, 100]"
:total="Total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="FunhandleSizeChange"
@current-change="FunhandleCurrentChange"
style="margin-top: 20px; justify-content: flex-end;"
/>
</el-col>
</el-row>
<!--弹窗-->
<el-row>
<el-col>
<el-dialog
v-model="DialogViewFlag"
:title="DialogTitle"
width="700"
:close-on-click-modal="false"
>
<el-form :model="DialogFormData" label-width="auto" label-position="right" >
<el-form-item label="名字">
<el-input v-model="DialogFormData.name" />
</el-form-item>
<el-form-item label="密码">
<el-input v-model="DialogFormData.password" />
</el-form-item>
<el-form-item label="状态">
<el-select v-model="DialogFormData.iStatus" placeholder="请选择" width="100" style="width:200px">
<el-option label="禁用" :value="0" />
<el-option label="启用" :value="1" />
<el-option label="请选择" :value="3" ></el-option>
</el-select>
</el-form-item>
<el-form-item label="创建时间">
<el-date-picker
v-model="DialogFormData.create_time"
type="datetime"
placeholder="创建时间"
format="YYYY/MM/DD HH:mm:ss"
value-format="YYYY-MM-DDTHH:mm:ss"
readonly
/>
</el-form-item>
<el-form-item label="备注">
<el-input v-model="DialogFormData.memo" />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="FunCloseDialog">取消</el-button>
<el-button @click="FunReSetDialogFormData" v-if="DialogFormData.id == 0" >重置</el-button>
<el-button type="primary" @click="FunSubmit">
提交
</el-button>
</div>
</template>
</el-dialog>
</el-col>
</el-row>
</template>
<script lang="ts" setup>
import {index} from '@/views/UserOneVue/index.ts';
import Dialog from '../User/components/Dialog.vue';
import { onMounted } from 'vue';
const {
TableData,
SearchData,
PaginationData,
Total,
DialogViewFlag,
DialogFormData,
EmptyFrom,
DialogTitle,
FunGetList,
FunOpenDialog,
FunCloseDialog,
FunReSetSearchData,
FunSubmit,
FunDelete,
FunGetListText,
FunhandleCurrentChange,
FunhandleSizeChange,
FunReSetDialogFormData,
}=index();
onMounted(()=>{
FunGetList();
})
</script>