179 lines
4.2 KiB
Vue
179 lines
4.2 KiB
Vue
<script setup lang="tsx">
|
|
import SuperTable from '~/components/SuperTable.vue';
|
|
import type { TableProps, TableRowData } from 'tdesign-vue-next';
|
|
import PeopleForm from '~/pages/base/index/peopleManage/components/PeopleForm.vue';
|
|
import { TButton } from '#components';
|
|
const store = usePeopleStore();
|
|
|
|
const { peopleList, pagination, situation } = storeToRefs(usePeopleStore());
|
|
|
|
const columns = ref<TableProps['columns']>([
|
|
{
|
|
colKey: 'index',
|
|
title: '序号',
|
|
cell: (_, { rowIndex }: { rowIndex: number }) => (
|
|
<div>
|
|
{(pagination.value!.current! - 1) * pagination.value!.pageSize! +
|
|
rowIndex +
|
|
1}
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
colKey: 'date',
|
|
title: '日期',
|
|
},
|
|
{
|
|
colKey: 'name',
|
|
title: '姓名',
|
|
},
|
|
{
|
|
colKey: 'province',
|
|
title: '省份',
|
|
},
|
|
{
|
|
colKey: 'city',
|
|
title: '市区',
|
|
},
|
|
{
|
|
colKey: 'address',
|
|
title: '地址',
|
|
},
|
|
{
|
|
colKey: 'zip',
|
|
title: '邮编',
|
|
},
|
|
{
|
|
colKey: 'operator',
|
|
title: '操作',
|
|
cell: (_, { row }) =>
|
|
h('div', { class: 'w-40 flex flex-row justify-evenly' }, [
|
|
h(
|
|
TButton,
|
|
{
|
|
onClick: () => editUser(row),
|
|
},
|
|
{ default: () => '编辑' },
|
|
),
|
|
h(
|
|
TButton,
|
|
{
|
|
onClick: () => showDeleteUserDialog(row),
|
|
},
|
|
{ default: () => '删除' },
|
|
),
|
|
]),
|
|
},
|
|
]);
|
|
|
|
onMounted(async () => {
|
|
await store.getPeopleList();
|
|
});
|
|
|
|
onMounted(async () => {
|
|
await store.getTotal();
|
|
});
|
|
|
|
function editUser(row: TableRowData) {
|
|
if (form.value) form.value.resetForm();
|
|
store.currentForm = {
|
|
...peopleList.value.find((e) => e.id === row.id)!,
|
|
} as PeopleInfo;
|
|
form.value?.setProvinceIndexByName(store.currentForm.province);
|
|
store.showEditPeople = true;
|
|
}
|
|
|
|
const showDeleteDialog = ref(false);
|
|
let deleteRowId = 0;
|
|
|
|
function showDeleteUserDialog(row: TableRowData) {
|
|
deleteRowId = row.id;
|
|
showDeleteDialog.value = true;
|
|
}
|
|
|
|
function deleteUser() {
|
|
showDeleteDialog.value = false;
|
|
store.deletePeople(deleteRowId);
|
|
}
|
|
|
|
async function pageChange(x: { current: number; pageSize: number }) {
|
|
if (pagination.value) {
|
|
pagination.value.current = x.current;
|
|
pagination.value.pageSize = x.pageSize;
|
|
await store.getPeopleList();
|
|
}
|
|
}
|
|
|
|
async function doSearch() {
|
|
await usePeopleStore().getTotal();
|
|
await usePeopleStore().getPeopleList();
|
|
}
|
|
|
|
const form: Ref<typeof PeopleForm | null> = ref(null);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="p-6">
|
|
<div class="flex justify-between p-4">
|
|
<t-button
|
|
@click="
|
|
() => {
|
|
if (form) form.resetForm();
|
|
store.showAddPeople = true;
|
|
}
|
|
"
|
|
>添加新人员</t-button
|
|
>
|
|
<t-input
|
|
v-model="situation"
|
|
placeholder="搜索"
|
|
clearable
|
|
class="max-w-60"
|
|
@change="doSearch"
|
|
>
|
|
<template #suffixIcon>
|
|
<search-icon :style="{ cursor: 'pointer' }" />
|
|
</template>
|
|
</t-input>
|
|
</div>
|
|
<super-table
|
|
v-model:pagination="pagination"
|
|
:data="peopleList"
|
|
:columns="columns"
|
|
:loading="false"
|
|
@page-change="pageChange"
|
|
></super-table>
|
|
<t-dialog
|
|
:visible="store.showAddPeople || store.showEditPeople"
|
|
:close-btn="true"
|
|
:confirm-btn="store.showAddPeople ? '添加' : '修改'"
|
|
cancel-btn="取消"
|
|
@confirm="form?.submit"
|
|
@close="
|
|
() => {
|
|
store.showAddPeople = false;
|
|
store.showEditPeople = false;
|
|
}
|
|
"
|
|
>
|
|
<template #header>{{
|
|
store.showAddPeople ? '添加新人员' : '修改人员信息'
|
|
}}</template>
|
|
<template #body>
|
|
<people-form ref="form" />
|
|
</template>
|
|
</t-dialog>
|
|
<t-dialog
|
|
v-model:visible="showDeleteDialog"
|
|
header="你确定吗？"
|
|
width="40%"
|
|
:confirm-on-enter="true"
|
|
:on-confirm="deleteUser"
|
|
>
|
|
此操作将永久删除该人员，确定吗？
|
|
</t-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="less"></style>
|