332 lines
8.3 KiB
Vue
332 lines
8.3 KiB
Vue
<script lang="ts" setup>
|
|
import {reactive, ref, onMounted} from "vue";
|
|
import {FormInstance} from "ant-design-vue";
|
|
import {useAuthority} from "@/utils/Authority";
|
|
import AppIcon from "@/core/components/AppIcon.vue";
|
|
import Info from "./Info.vue";
|
|
import Tools from "@/core/utils/Tools";
|
|
import PageContainer from "@/core/components/PageContainer.vue";
|
|
import TableCurd from "@/core/components/curd/TableCurd.vue";
|
|
import MemberService from "@/services/base/MemberService";
|
|
import AppConsts from "@/utils/AppConsts";
|
|
import router from "@/core/router";
|
|
|
|
defineOptions({name: "base_member"});
|
|
|
|
const columns: any = [
|
|
{
|
|
fieldName: "number",
|
|
title: "编号",
|
|
show: true,
|
|
width: "",
|
|
sorter: true,
|
|
dataIndex: "number"
|
|
},
|
|
{
|
|
fieldName: "photo",
|
|
title: "头像",
|
|
show: true,
|
|
width: "",
|
|
sorter: false,
|
|
dataIndex: "photo"
|
|
},
|
|
{
|
|
fieldName: "name",
|
|
title: "会员名称",
|
|
show: true,
|
|
width: "",
|
|
sorter: true,
|
|
dataIndex: "name"
|
|
},
|
|
{
|
|
fieldName: "phone",
|
|
title: "联系电话",
|
|
show: true,
|
|
width: "",
|
|
sorter: true,
|
|
dataIndex: "phone"
|
|
},
|
|
{
|
|
fieldName: "sex",
|
|
title: "性别",
|
|
show: true,
|
|
width: "",
|
|
sorter: true,
|
|
dataIndex: "sex"
|
|
},
|
|
{
|
|
fieldName: "birthday",
|
|
title: "生日",
|
|
show: true,
|
|
width: "",
|
|
sorter: true,
|
|
dataIndex: "birthday"
|
|
},
|
|
{
|
|
fieldName: "operatorName",
|
|
title: "用户名称",
|
|
show: true,
|
|
width: "",
|
|
sorter: true,
|
|
dataIndex: "operatorName"
|
|
},
|
|
{
|
|
fieldName: "lastModificationTime",
|
|
title: "更新时间",
|
|
show: false,
|
|
width: "",
|
|
sorter: true,
|
|
dataIndex: "lastModificationTime"
|
|
},
|
|
{
|
|
fieldName: "creationTime",
|
|
title: "创建时间",
|
|
show: true,
|
|
width: "",
|
|
sorter: true,
|
|
dataIndex: "creationTime"
|
|
},
|
|
{
|
|
fieldName: "id",
|
|
title: "操作",
|
|
show: true,
|
|
width: "",
|
|
sorter: false,
|
|
dataIndex: "id"
|
|
}
|
|
];
|
|
|
|
const state = reactive({
|
|
search: {
|
|
state: false,
|
|
vm: {
|
|
name: undefined,
|
|
},
|
|
sort: [] as any[],
|
|
},
|
|
loading: false,
|
|
page: 1,
|
|
size: 10,
|
|
total: 100,
|
|
columns: columns,
|
|
data: [] as any,
|
|
});
|
|
|
|
//权限
|
|
const power = useAuthority();
|
|
//表格
|
|
const refTableCurd = ref<InstanceType<typeof TableCurd>>();
|
|
//表单操作对象
|
|
const refInfo = ref<InstanceType<typeof Info>>();
|
|
//检索表单
|
|
const refSearchForm = ref<FormInstance>();
|
|
|
|
/**
|
|
* 初始化
|
|
*/
|
|
onMounted(() => {
|
|
findList();
|
|
});
|
|
|
|
/**
|
|
*获取数据
|
|
*/
|
|
async function findList() {
|
|
try {
|
|
state.loading = true;
|
|
const result = await MemberService.findList(state.page, state.size, state.search.vm, state.search.sort);
|
|
state.loading = false;
|
|
if (result.code != 200) return;
|
|
state.page = result.data.page;
|
|
state.size = result.data.size;
|
|
state.total = result.data.total;
|
|
// state.columns = result.data.columns;
|
|
state.data = result.data.dataSource;
|
|
} catch (error) {
|
|
state.loading = false;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 删除数据
|
|
* @param id
|
|
*/
|
|
async function deleteList(id?: string) {
|
|
let ids: string[] = [];
|
|
if (id) {
|
|
ids.push(id);
|
|
} else {
|
|
ids = refTableCurd.value?.getSelectedRowKeys() ?? [];
|
|
}
|
|
|
|
if (ids.length == 0) return Tools.message.error("请选择要删除的行!");
|
|
|
|
try {
|
|
state.loading = true;
|
|
const result = await MemberService.deleteList(ids);
|
|
state.loading = false;
|
|
if (result.code != 200) return;
|
|
Tools.message.success("删除成功!");
|
|
findList();
|
|
} catch (error) {
|
|
state.loading = false;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 导出excel
|
|
*/
|
|
function exportExcel() {
|
|
MemberService.exportExcel(state.search.vm, state.search.sort);
|
|
}
|
|
|
|
/**
|
|
* 处理头像
|
|
* @param photo
|
|
*/
|
|
function handlePhoto(photo: string) {
|
|
if (photo) {
|
|
var photoArray = JSON.parse(photo);
|
|
return AppConsts.domainServerApi + (photoArray.length > 0 ? photoArray[0].url : "");
|
|
}
|
|
|
|
return undefined;
|
|
}
|
|
|
|
/**
|
|
* 跳转详情
|
|
* @param row
|
|
*/
|
|
function jumpDetails(row: any) {
|
|
router.push(`/base/member/details/${row.id}/${row.name}`);
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<PageContainer>
|
|
<TableCurd
|
|
ref="refTableCurd"
|
|
v-model:config="state"
|
|
@change="
|
|
(changeTable) => {
|
|
state.page = changeTable.pagination.current ?? 1;
|
|
state.size = changeTable.pagination.pageSize ?? state.size;
|
|
state.search.sort = changeTable.sorter instanceof Array ? [...changeTable.sorter] : [changeTable.sorter];
|
|
findList();
|
|
}
|
|
"
|
|
@show-size-change="
|
|
({ current, size }) => {
|
|
state.page = current == 0 ? 1 : current;
|
|
state.size = size;
|
|
findList();
|
|
}
|
|
"
|
|
>
|
|
<!-- search -->
|
|
<template #search>
|
|
<a-form ref="refSearchForm" :model="state.search.vm" v-if="power.search">
|
|
<a-row :gutter="[16, 0]">
|
|
<a-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
|
|
<a-form-item class="mb-0" name="name" label="名称">
|
|
<a-input v-model:value="state.search.vm.name" placeholder="名称"/>
|
|
</a-form-item>
|
|
</a-col>
|
|
<!--button-->
|
|
<a-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="text-right">
|
|
<a-space :size="8">
|
|
<a-button
|
|
@click="
|
|
state.page = 1;
|
|
refSearchForm?.resetFields();
|
|
findList();
|
|
"
|
|
>
|
|
重置
|
|
</a-button>
|
|
<a-button
|
|
type="primary"
|
|
@click="
|
|
state.page = 1;
|
|
findList();
|
|
"
|
|
>
|
|
查询
|
|
</a-button>
|
|
</a-space>
|
|
</a-col>
|
|
</a-row>
|
|
</a-form>
|
|
</template>
|
|
<!-- toolbar-left -->
|
|
<template #toolbar-left>
|
|
<a-button @click="state.search.state = !state.search.state" v-if="power.search">
|
|
<div v-if="state.search.state">
|
|
<AppIcon name="UpOutlined"/> 收起
|
|
</div>
|
|
<div v-else>
|
|
<AppIcon name="DownOutlined"/> 展开
|
|
</div>
|
|
</a-button>
|
|
<a-button type="primary" @click="() => refInfo?.open()" v-if="power.insert">
|
|
<template #icon>
|
|
<AppIcon name="PlusOutlined"/>
|
|
</template>
|
|
新建
|
|
</a-button>
|
|
<a-popconfirm title="您确定要删除?" @confirm="deleteList()" okText="确定" cancelText="取消" v-if="power.delete">
|
|
<a-button type="primary" danger>
|
|
<template #icon>
|
|
<AppIcon name="DeleteOutlined"/>
|
|
</template>
|
|
批量删除
|
|
</a-button>
|
|
</a-popconfirm>
|
|
</template>
|
|
<!-- toolbar-right -->
|
|
<template #toolbar-right>
|
|
<a-dropdown>
|
|
<template #overlay>
|
|
<a-menu>
|
|
<a-menu-item key="1" @click="exportExcel()">导出 Excel</a-menu-item>
|
|
</a-menu>
|
|
</template>
|
|
<a-button> 更多
|
|
<AppIcon name="ellipsis-outlined"/>
|
|
</a-button>
|
|
</a-dropdown>
|
|
</template>
|
|
|
|
<!--列插槽-->
|
|
<template #photo="item">
|
|
<a-table-column v-bind="item">
|
|
<!-- 头像自定义列 -->
|
|
<template #default="{ record }">
|
|
<img :src="handlePhoto(record.photo)" width="35" height="35" :alt="record.name"/>
|
|
</template>
|
|
</a-table-column>
|
|
</template>
|
|
<template #id="item">
|
|
<!-- 操作 -->
|
|
<a-table-column v-bind="item" v-if="power.update || power.delete">
|
|
<template #default="{ record }">
|
|
<template v-if="power.update">
|
|
<a href="javascript:void(0)" @click="jumpDetails(record)">详情</a>
|
|
</template>
|
|
<a-divider type="vertical"/>
|
|
<a href="javascript:;" @click="() => refInfo?.open(record.id)" v-if="power.update">编辑</a>
|
|
<a-divider type="vertical"/>
|
|
<a-popconfirm title="您确定要删除?" @confirm="deleteList(record.id)" okText="确定" cancelText="取消"
|
|
v-if="power.delete">
|
|
<a class="text-danger">删除</a>
|
|
</a-popconfirm>
|
|
</template>
|
|
</a-table-column>
|
|
</template>
|
|
|
|
</TableCurd>
|
|
<!-- Info -->
|
|
<Info ref="refInfo" :onSuccess="() => findList()"/>
|
|
</PageContainer>
|
|
</template>
|