154 lines
3.7 KiB
Vue
154 lines
3.7 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';
|
|
|
|
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 }) => (
|
|
<div class="w-40 flex flex-row justify-evenly">
|
|
<t-button onClick={() => editUser(row)}>编辑</t-button>
|
|
<t-button onClick={() => deleteUser(row)}>删除</t-button>
|
|
</div>
|
|
),
|
|
},
|
|
]);
|
|
|
|
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;
|
|
console.log(store.currentForm.province);
|
|
form.value?.setProvinceIndexByName(store.currentForm.province);
|
|
console.log(store.currentForm);
|
|
store.showEditPeople = true;
|
|
}
|
|
|
|
function deleteUser(_row: TableRowData) {
|
|
store.deletePeople(_row.id);
|
|
console.log(_row);
|
|
}
|
|
|
|
function pageChange(x: { current: number; pageSize: number }) {
|
|
if (pagination.value) {
|
|
pagination.value.current = x.current;
|
|
pagination.value.pageSize = x.pageSize;
|
|
store.getPeopleList();
|
|
}
|
|
console.log(store.pagination);
|
|
}
|
|
|
|
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>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="less"></style>
|