<template>
<div class="p-2">
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
<div v-show="showSearch" id="search_div" class="mb-[10px]">
<el-card shadow="hover">
<el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="70px">
<el-form-item label="活动名称" prop="">
<el-input v-model="queryParams.activityName" class="inputWidth" placeholder="请输入活动名称" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="挑选玩友" prop="">
<el-select v-model="queryParams.isSelected" class="inputWidth" placeholder="请选择是否挑选玩友" clearable>
<el-option label="是" :value="1" />
<el-option label="否" :value="0" />
</el-select>
</el-form-item>
<el-form-item label="发布状态" prop="">
<el-select v-model="queryParams.status" class="inputWidth" placeholder="请选择发布状态" clearable>
<el-option v-for="dict in note_publish_list" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
<el-button v-hasPermi="['system:article:add']" type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
<!-- <el-button v-hasPermi="['system:article:edit']" type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()"-->
<!-- >编辑</el-button-->
<!-- >-->
<!-- <el-button v-hasPermi="['system:article:remove']" type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()"-->
<!-- >删除</el-button-->
<!-- >-->
</el-form-item>
</el-form>
</el-card>
</div>
</transition>
<el-table v-loading="loading" :height="autoTableHeight" :data="activityList" border @selection-change="handleSelectionChange">
<!-- <el-table-column type="selection" width="55" align="center" />-->
<el-table-column v-if="true" label="ID" align="center" prop="id" fixed width="180px" />
<el-table-column label="活动名称" align="center" fixed prop="activityName" width="180px" />
<el-table-column label="活动描述" align="center" fixed prop="activityDescription" width="180px" show-overflow-tooltip />
<el-table-column label="活动图片" align="center" prop="" />
<el-table-column label="活动人数" align="center" prop="activityUserCount" />
<el-table-column label="报名人数" align="center" prop="registrationCount">
<template #default="scope">
<el-button type="primary" link @click="registrationCountnum(scope.row)">{{ scope.row.registrationCount }}</el-button>
</template>
</el-table-column>
<el-table-column label="挑选玩友" align="center" prop="isSelected">
<template #default="scope">
<div>{{ scope.row.isSelected == 1 ? '是' : '否' }}</div>
</template>
</el-table-column>
<el-table-column label="活动时间" align="center" prop="activityTime" width="180px" />
<el-table-column label="报名截止时间" align="center" prop="registrationDeadline" width="180px" />
<el-table-column label="发布者地址" align="center" prop="publisherAddress" width="180px" show-overflow-tooltip />
<el-table-column label="活动地点" align="center" prop="activityLocation" width="180px" show-overflow-tooltip />
<el-table-column label="收费方式" align="center" prop="paymentMethod" width="100px">
<template #default="scope">
<div>{{ scope.row.paymentMethod == 1 ? '发起人收款' : '免费' }}</div>
</template>
</el-table-column>
<el-table-column label="活动流程" align="center" prop="" width="100px">
<template #default="scope">
<el-button link type="primary" @click="handleUpdate(scope.row, 3)">查看详情</el-button>
</template>
</el-table-column>
<el-table-column label="问答" align="center" prop="" width="100px">
<template #default="scope">
<el-button link type="primary" @click="wendalist(scope.row)">查看详情</el-button>
</template>
</el-table-column>
<el-table-column label="发布状态" align="center" prop="status" width="100px">
<template #default="scope">
<el-tag v-if="scope.row.status == 0" type="info">未发布</el-tag>
<el-tag v-if="scope.row.status == 1" type="warning">草稿</el-tag>
<el-tag v-if="scope.row.status == 2" type="success">审核中</el-tag>
<el-tag v-if="scope.row.status == 3" type="primary">已发布</el-tag>
</template>
</el-table-column>
<el-table-column label="发布时间" align="center" prop="publishTime" />
<el-table-column label="发布人员" align="center" prop="publishName" />
<el-table-column label="操作人员" align="center" prop="updateName" />
<el-table-column label="操作时间" align="center" prop="updateTime" width="180px" />
<el-table-column label="操作" align="center" width="150px" fixed="right" class-name="small-padding fixed-width">
<template #default="scope">
<el-button
v-if="scope.row.status == 0 || scope.row.status == 1"
v-hasPermi="['system:article:edit']"
link
type="primary"
@click="handleUpdate(scope.row, 1)"
>编辑</el-button
>
<el-button v-if="scope.row.status == 0" v-hasPermi="['system:article:edit']" link type="primary" @click="saveupdate(scope.row, 1)"
>发布</el-button
>
<el-button v-if="scope.row.status == 3" v-hasPermi="['system:article:edit']" link type="primary" @click="saveupdate(scope.row, 2)"
>撤销发布</el-button
>
<el-button
v-if="scope.row.status == 0 || scope.row.status == 1"
v-hasPermi="['system:article:remove']"
link
type="primary"
@click="handleDelete(scope.row)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
id="table_page"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
:total="total"
@pagination="getList"
/>
<!-- 添加或修改活动信息对话框 -->
<el-dialog v-model="dialog.visible" :title="dialog.title" width="60%" append-to-body>
<el-form ref="activityFormRef" :model="form" :rules="rules" label-width="120px">
<el-form-item label="活动名称" prop="activityName">
<el-input v-model="form.activityName" placeholder="请输入活动名称" style="width: 300px" />
</el-form-item>
<el-form-item label="活动描述" prop="activityDescription">
<el-input v-model="form.activityDescription" placeholder="请输入活动描述" style="width: 500px" autosize type="textarea" />
</el-form-item>
<el-form-item label="活动人数" prop="activityUserCount">
<el-input
v-model="form.activityUserCount"
placeholder="请输入活动人数"
style="width: 300px"
oninput="value=value.replace(/[^\d.]/g,'')"
/>人
</el-form-item>
<div style="display: flex">
<el-form-item label="活动时间" prop="activityTime">
<el-date-picker
v-model="form.activityTime"
format="YYYY/MM/DD HH:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss"
type="datetime"
placeholder="请选择活动时间"
/>
</el-form-item>
<el-form-item label="报名截至时间" prop="registrationDeadline">
<el-date-picker
v-model="form.registrationDeadline"
format="YYYY/MM/DD HH:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss"
type="datetime"
placeholder="请选择报名截至时间"
/>
</el-form-item>
</div>
<div v-if="dialog.visible" style="display: flex" class="maplist">
<Map :title="'发布者地址'" :datas="Mapvalue" @model-value="getMapValue"></Map>
<Map :title="'活动地点'" :datas="Mapvaluetwo" @model-value="getMapValueTwo"></Map>
</div>
<el-form-item label="收费方式" prop="paymentMethod">
<el-radio-group v-model="form.paymentMethod">
<el-radio :value="1">发起人收款</el-radio>
<el-radio :value="0">免费</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="挑选玩友" prop="isSelected">
<el-radio-group v-model="form.isSelected">
<el-radio :value="1">挑选</el-radio>
<el-radio :value="0">不挑选</el-radio>
</el-radio-group>
<span style="margin-left: 30px; font-size: 12px; color: #707070">勾选后，发起人需要逐个审核报名者，确认是否通过报名</span>
</el-form-item>
<el-form-item label="活动流程">
<el-button type="primary" @click="addlisttiam">添加流程</el-button>
</el-form-item>
<div v-for="(item, index) in listdatatime">
<div style="display: flex; align-items: center">
<el-form-item label="时间">
<el-date-picker
v-model="item.activityTime"
format="YYYY/MM/DD HH:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss"
type="datetime"
placeholder="请选择行程时间"
/>
</el-form-item>
<el-form-item label="计划的活动内容">
<el-input v-model="item.planContent" placeholder="请输入计划的活动内容" style="width: 300px" />
</el-form-item>
<el-button type="primary" link icon="Delete" style="margin-bottom: 18px" @click="dellistdata(index)"></el-button>
</div>
</div>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</template>
</el-dialog>
<!-- 查看活动流程 -->
<el-dialog v-model="seedialog.visible" :title="seedialog.title" width="60%" append-to-body>
<el-form ref="activityFormRef" :model="form" :rules="rules" label-width="120px">
<el-form-item label="活动名称">
<div>{{ form.activityName }}</div>
</el-form-item>
<el-form-item label="活动描述">
<div>{{ form.activityDescription }}</div>
</el-form-item>
<el-form-item label="活动人数">
<div>{{ form.activityUserCount }}人</div>
</el-form-item>
<div style="display: flex">
<el-form-item label="活动时间">
<div>{{ form.activityTime }}</div>
</el-form-item>
<el-form-item label="报名截至时间">
<div>{{ form.registrationDeadline }}</div>
</el-form-item>
</div>
<div style="display: flex">
<el-form-item label="发布者地址">
<div>{{ form.publisherAddress }}</div>
</el-form-item>
<el-form-item label="活动地点">
<div>{{ form.activityLocation }}</div>
</el-form-item>
</div>
<el-form-item label="收费方式">
<el-radio-group v-model="form.paymentMethod" disabled>
<el-radio :value="1">发起人收款</el-radio>
<el-radio :value="0">免费</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="挑选玩友">
<el-radio-group v-model="form.isSelected" disabled>
<el-radio :value="1">挑选</el-radio>
<el-radio :value="0">不挑选</el-radio>
</el-radio-group>
<span style="margin-left: 30px; font-size: 12px; color: #707070">勾选后，发起人需要逐个审核报名者，确认是否通过报名</span>
</el-form-item>
<el-form-item label="活动流程"> </el-form-item>
<div v-for="(item, index) in listdatatime">
<div style="display: flex; align-items: center">
<el-form-item label="时间">
<div>{{ item.activityTime }}</div>
</el-form-item>
<el-form-item label="计划的活动内容">
<div>{{ item.planContent }}</div>
</el-form-item>
</div>
</div>
</el-form>
</el-dialog>
<!-- 问答弹窗-->
<el-dialog v-model="wendadialog.visible" title="问答" width="40%" append-to-body>
<div v-for="item in Answeringlist" style="line-height: 30px; padding: 0 20px">
<div style="display: flex; justify-content: space-between">
<div style="font-weight: 600; font-size: 14px">Q:{{ item.declaration }}</div>
<div style="font-size: 12px">{{ item.quserName }} {{ item.createTime }}</div>
</div>
<div style="font-size: 12px">A:{{ item.answer }}</div>
</div>
<pagination
v-show="Answeringtotal > 0"
id="table_page"
v-model:page="queryAnswerings.pageNum"
v-model:limit="queryAnswerings.pageSize"
:total="Answeringtotal"
@pagination="wendalistid"
/>
</el-dialog>
<!-- 报名人数弹窗-->
<el-dialog v-model="numdialog.visible" title="报名人数" width="60%" append-to-body>
<el-table v-loading="loading" :height="autoTableHeight" :data="activityUsersListarr">
<el-table-column v-if="true" label="序号" align="center" prop="id" fixed width="80px" />
<el-table-column label="昵称" align="center" fixed prop="nickname" width="180px" />
<el-table-column label="头像" align="center" fixed prop="avatar" width="80px" />
<el-table-column label="性别" align="center" prop="sex">
<template #default="scope">
<dict-tag :options="sys_user_sex" :value="scope.row.sex" />
</template>
</el-table-column>
<el-table-column label="报名宣言" align="center" prop="declaration" show-overflow-tooltip />
<el-table-column label="介绍照片" align="center" prop="introducePhoto" />
<el-table-column label="微信号" align="center" prop="wechat" />
<el-table-column label="报名时间" align="center" prop="createTime" width="180px" />
<el-table-column label="报名结果" align="center" prop="status" width="180px">
<template #default="scope">
<el-tag v-if="scope.row.status == 1" type="info">通过</el-tag>
<el-tag v-if="scope.row.status == 0" type="primary">待挑选</el-tag>
<!-- <el-tag v-if="scope.row.status == 3" type="primary">拒绝</el-tag>-->
</template>
</el-table-column>
</el-table>
<pagination
v-show="activityUserstotal > 0"
id="table_page"
v-model:page="queryUsers.pageNum"
v-model:limit="queryUsers.pageSize"
:total="activityUserstotal"
@pagination="registrationCountnumlist"
/>
</el-dialog>
</div>
</template>
<script setup name="Activity" lang="ts">
import {
listActivity,
getActivity,
delActivity,
addActivity,
updateActivity,
activityprocess,
activityAnsweringlist,
activityUsersList
} from '@/api/manage/activity';
import { ActivityVO, ActivityQuery, ActivityForm } from '@/api/manage/activity/types';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { dy_banned_handling_method, sys_user_sex, dy_banned_ban_reason, dy_user_ban_days } = toRefs<any>(
proxy?.useDict('dy_banned_handling_method', 'sys_user_sex', 'dy_banned_ban_reason', 'dy_user_ban_days')
);
import { Search } from '@element-plus/icons-vue';
const activityList = ref<ActivityVO[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref<Array<string | number>>([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const Answeringtotal = ref(0);
const activityUserstotal = ref(0);
const queryUsersactivityId = ref('');
const listdatatime = ref([{ activityTime: '', planContent: '' }]);
const Answeringlist = ref([]);
const activityUsersListarr = ref([]);
const queryFormRef = ref<ElFormInstance>();
const publisherAddress = ref({});
const Mapvalue = ref({});
const Mapvaluetwo = ref({});
const note_publish_list = ref([
{ label: '已发布', value: 3 },
{ label: '审核中', value: 2 },
{ label: '未发布', value: 0 },
{ label: '草稿', value: 1 }
]);
const activityFormRef = ref<ElFormInstance>();
const getMapValue = (value: any) => {
// console.log(value, 'wwwwwwwwwww');
// publisherAddress.value = value;
//发布者地址
form.value.publisherAddress = value.address;
form.value.publisherLongitude = value.longitude;
form.value.publisherLatitude = value.latitude;
};
const getMapValueTwo = (value: any) => {
//活动地址
console.log(value.address);
form.value.activityLocation = value.address;
form.value.activityLongitude = value.longitude;
form.value.activityLatitude = value.latitude;
};
const dialog = reactive<DialogOption>({
visible: false,
title: ''
});
const seedialog = reactive<DialogOption>({
visible: false,
title: '活动流程'
});
const wendadialog = reactive<DialogOption>({
visible: false
});
const numdialog = reactive<DialogOption>({
visible: false
});
const initFormData: ActivityForm = {
id: undefined,
activityName: undefined,
activityDescription: undefined,
sortNum: undefined,
activityUserCount: undefined,
registrationCount: undefined,
isSelected: undefined,
activityTime: undefined,
registrationDeadline: undefined,
publisherAddress: undefined,
activityLocation: undefined,
paymentMethod: undefined,
status: undefined
};
const queryAnswerings = {
pageNum: 1,
pageSize: 10,
activityId: undefined
};
const queryUsers = {
pageNum: 1,
pageSize: 10,
activityId: undefined
};
const data = reactive<PageData<ActivityForm, ActivityQuery>>({
form: { ...initFormData },
queryParams: {
pageNum: 1,
pageSize: 10,
activityName: undefined,
activityDescription: undefined,
sortNum: undefined,
activityUserCount: undefined,
registrationCount: undefined,
isSelected: undefined,
activityTime: undefined,
registrationDeadline: undefined,
publisherAddress: undefined,
activityLocation: undefined,
paymentMethod: undefined,
status: undefined,
params: {}
},
rules: {
id: [{ required: true, message: '唯一标识ID不能为空', trigger: 'blur' }],
activityName: [{ required: true, message: '活动名称不能为空', trigger: 'blur' }],
activityDescription: [{ required: true, message: '活动描述不能为空', trigger: 'blur' }],
sortNum: [{ required: true, message: '排序顺序不能为空', trigger: 'blur' }],
activityUserCount: [{ required: true, message: '活动人数不能为空', trigger: 'blur' }],
registrationCount: [{ required: true, message: '报名人数不能为空', trigger: 'blur' }],
isSelected: [{ required: true, message: '挑选玩友 0-不挑选 1-挑选不能为空', trigger: 'blur' }],
activityTime: [{ required: true, message: '活动时间不能为空', trigger: 'blur' }],
registrationDeadline: [{ required: true, message: '报名截止时间不能为空', trigger: 'blur' }],
// publisherAddress: [{ required: true, message: '发布者地址不能为空', trigger: 'blur' }],
// activityLocation: [{ required: true, message: '活动地点不能为空', trigger: 'blur' }],
paymentMethod: [{ required: true, message: '收费方式 0-免费 1-发起人收款不能为空', trigger: 'blur' }],
status: [{ required: true, message: '发布状态 0-未发布 1-审核中 2-发布不能为空', trigger: 'change' }]
}
});
const { queryParams, form, rules } = toRefs(data);
/** 查询活动信息列表 */
const getList = async () => {
loading.value = true;
const res = await listActivity(queryParams.value);
activityList.value = res.rows;
total.value = res.total;
loading.value = false;
};
/** 取消按钮 */
const cancel = () => {
reset();
dialog.visible = false;
};
/** 表单重置 */
const reset = () => {
form.value = { ...initFormData };
activityFormRef.value?.resetFields();
};
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.value.pageNum = 1;
getList();
};
/** 重置按钮操作 */
const resetQuery = () => {
queryParams.value.status = '';
queryParams.value.isSelected = '';
queryParams.value.activityName = '';
queryFormRef.value?.resetFields();
handleQuery();
};
/** 多选框选中数据 */
const handleSelectionChange = (selection: ActivityVO[]) => {
ids.value = selection.map((item) => item.id);
single.value = selection.length != 1;
multiple.value = !selection.length;
};
/** 新增按钮操作 */
const handleAdd = () => {
reset();
dialog.visible = true;
listdatatime.value = [{ activityTime: '', planContent: '' }];
Mapvalue.value = {
address: '',
longitude: '',
latitude: ''
};
Mapvaluetwo.value = {
address:'',
longitude: '',
latitude: ''
};
dialog.title = '添加活动信息';
};
// 发布撤销发布
const saveupdate = async (row?: ActivityVO, type) => {
const _id = row?.id || ids.value[0];
const res = await getActivity(_id);
const arr = await activityprocess({ activityId: _id });
Object.assign(form.value, res.data);
form.value.status = type == 1 ? 2 : 0;
const test = type == 1 ? '发布' : '撤销发布';
const _ids = row?.activityName || ids.value;
await proxy?.$modal.confirm('是否确认' + test + '活动信息编号为' + _ids + '的数据项？').finally(() => (loading.value = false));
await updateActivity(form.value).finally(() => (buttonLoading.value = false));
proxy?.$modal.msgSuccess(test + '成功');
await getList();
// await updateActivity(form.value).finally(() => (buttonLoading.value = false));
};
/** 修改按钮操作 */
const handleUpdate = async (row?: ActivityVO, type) => {
reset();
const _id = row?.id || ids.value[0];
const res = await getActivity(_id);
const arr = await activityprocess({ activityId: _id });
console.log(arr);
// = arr.data;
Object.assign(form.value, res.data);
// Object.assign(listdatatime.value, arr.data);
Mapvalue.value = {
address: res.data.publisherAddress,
longitude: res.data.publisherLongitude,
latitude: res.data.publisherLatitude
};
Mapvaluetwo.value = {
address: res.data.activityLocation,
longitude: res.data.activityLongitude,
latitude: res.data.activityLatitude
};
listdatatime.value = arr.data;
if (type == 3) {
seedialog.visible = true;
} else {
dialog.visible = true;
dialog.title = '修改活动信息';
}
};
/** 提交按钮 */
const submitForm = () => {
console.log(form.value);
// return;
form.value.dyActivityProcessList = listdatatime.value;
console.log(form.value);
// return
activityFormRef.value?.validate(async (valid: boolean) => {
if (valid) {
buttonLoading.value = true;
if (form.value.id) {
await updateActivity(form.value).finally(() => (buttonLoading.value = false));
} else {
await addActivity(form.value).finally(() => (buttonLoading.value = false));
}
proxy?.$modal.msgSuccess('操作成功');
dialog.visible = false;
await getList();
}
});
};
/** 删除按钮操作 */
const handleDelete = async (row?: ActivityVO) => {
const _ids = row?.activityName || ids.value;
await proxy?.$modal.confirm('是否确认删除活动信息编号为"' + _ids + '"的数据项？').finally(() => (loading.value = false));
await delActivity(_ids);
proxy?.$modal.msgSuccess('删除成功');
await getList();
};
/** 导出按钮操作 */
const handleExport = () => {
proxy?.download(
'manage/activity/export',
{
...queryParams.value
},
`activity_${new Date().getTime()}.xlsx`
);
};
// 添加流程
const addlisttiam = () => {
listdatatime.value.push({ activityTime: '', planContent: '' });
};
// 删除流程
const dellistdata = (index) => {
listdatatime.value.splice(index, 1);
};
//问答弹窗
const wendalist = async (row) => {
queryUsersactivityId.value = row.id;
wendalistid(queryUsersactivityId.value);
};
const wendalistid = async () => {
queryAnswerings.activityId = queryUsersactivityId.value;
const res = await activityAnsweringlist(queryAnswerings);
console.log(res);
Answeringlist.value = res.rows;
Answeringtotal.value = res.total;
wendadialog.visible = true;
};
//报名人数弹窗
const registrationCountnum = async (row) => {
queryUsersactivityId.value = row.id;
registrationCountnumlist(queryUsersactivityId.value);
};
const registrationCountnumlist = async () => {
queryUsers.activityId = queryUsersactivityId.value;
const res = await activityUsersList(queryUsers);
activityUsersListarr.value = res.rows;
activityUserstotal.value = res.total;
numdialog.visible = true;
};
//查看活动流程
const chakanhandle = async (row?: ActivityVO) => {};
onMounted(() => {
getList();
});
</script>
<style scoped>
.maplist {
div {
width: 50%;
}
}
</style>