feat(shopDealerApply): 添加经销商申请功能

- 新增经销商申请相关接口和模型
- 实现经销商申请列表、搜索和编辑功能
- 添加管理员用户添加接口- 更新用户模型,增加推荐人ID字段
- 在角色接口中添加租户ID请求头
- 简化登录和注册页面代码
- 新增经销商申请相关的搜索和编辑组件
This commit is contained in:
2025-09-06 00:58:29 +08:00
parent 23143552f0
commit f5a1686de1
18 changed files with 982 additions and 327 deletions

View File

@@ -1,6 +1,6 @@
VITE_APP_NAME=后台管理(开发环境)
#VITE_API_URL=http://127.0.0.1:9200/api
VITE_SERVER_API_URL=http://127.0.0.1:8000/api
#VITE_SERVER_API_URL=http://127.0.0.1:8000/api
#VITE_API_URL=https://cms-api.s209.websoft.top/api

View File

@@ -8,9 +8,7 @@ import type { ShopDealerApply, ShopDealerApplyParam } from './model';
export async function pageShopDealerApply(params: ShopDealerApplyParam) {
const res = await request.get<ApiResult<PageResult<ShopDealerApply>>>(
'/shop/shop-dealer-apply/page',
{
params
}
{params}
);
if (res.data.code === 0) {
return res.data.data;
@@ -24,9 +22,7 @@ export async function pageShopDealerApply(params: ShopDealerApplyParam) {
export async function listShopDealerApply(params?: ShopDealerApplyParam) {
const res = await request.get<ApiResult<ShopDealerApply[]>>(
'/shop/shop-dealer-apply',
{
params
}
{params}
);
if (res.data.code === 0 && res.data.data) {
return res.data.data;

View File

@@ -6,6 +6,8 @@ import type { PageParam } from '@/api';
export interface ShopDealerApply {
// 主键ID
applyId?: number;
// 类型
type?: number;
// 用户ID
userId?: number;
// 姓名

View File

@@ -25,7 +25,10 @@ export async function listRoles(params?: RoleParam) {
const res = await request.get<ApiResult<Role[]>>(
SERVER_API_URL + '/system/role',
{
params
params,
headers: {
'TenantId': 10560
}
}
);
if (res.data.code === 0 && res.data.data) {

View File

@@ -92,6 +92,21 @@ export async function addUser(data: User) {
return Promise.reject(new Error(res.data.message));
}
/**
* 添加管理员用户
* @param data
*/
export async function addAdminUser(data: User) {
const res = await request.post<ApiResult<unknown>>(
SERVER_API_URL + '/system/user/addAdminUser',
data
);
if (res.data.code === 0) {
return res.data.message;
}
return Promise.reject(new Error(res.data.message));
}
/**
* 修改用户
*/

View File

@@ -127,6 +127,8 @@ export interface User {
value?: number;
// 关注数量
followers?: number;
// 推荐人ID
dealerId?: number;
}
/**

View File

@@ -33,6 +33,7 @@ export const REPEATABLE_TABS: string[] = [];
export const WHITE_LIST: string[] = [
'/login',
'/register',
'/dealer/register',
'/forget',
'/wx-work-login',
'/token-login',

View File

@@ -1,20 +1,20 @@
<template>
<div
:class="[
:class="[
'login-wrapper',
['', 'login-form-right', 'login-form-left'][direction]
]"
:style="{
:style="{
backgroundImage: 'url(' + config?.loginBgImg + ')'
}"
>
<div class="logo-login" v-if="config?.siteName">
<img
:src="
:src="
config.sysLogo ||
'https://oss.wsdns.cn/20240822/0252ad4ed46449cdafe12f8d3d96c2ea.svg'
"
class="logo"
class="logo"
/>
<h4>{{ config.siteName }}</h4>
</div>
@@ -23,22 +23,23 @@
}}
</div>
<a-form
ref="formRef"
:model="form"
:rules="rules"
class="login-form ele-bg-white"
ref="formRef"
:model="form"
:rules="rules"
class="login-form ele-bg-white"
>
<div class="login-title flex justify-center items-center px-12">
<h4
class="title-btn"
>注册</h4
class="title-btn"
>邀请注册</h4
>
</div>
<template v-if="loginType === 'account'">
<!-- 邀请信息显示 -->
<div v-if="inviterId" style="margin-bottom: 16px; padding: 12px; background: #f6ffed; border: 1px solid #b7eb8f; border-radius: 4px;">
<div v-if="inviterId"
style="margin-bottom: 16px; padding: 12px; background: #f6ffed; border: 1px solid #b7eb8f; border-radius: 4px;">
<div style="color: #52c41a; font-size: 14px;">
<check-circle-outlined style="margin-right: 4px;" />
<check-circle-outlined style="margin-right: 4px;"/>
您正在通过邀请链接注册注册成功后将自动建立推荐关系
</div>
</div>
@@ -74,53 +75,6 @@
</a-button>
</div>
</a-form-item>
<a-form-item name="companyName">
<div class="flex">
<a-input
allow-clear
size="large"
placeholder="公众号|小程序名称"
v-model:value="form.companyName"
>
</a-input>
<a-button
class="ele-btn-icon"
size="large"
style="margin-left: 10px; width: 137px"
@click="openMapPicker"
>
<AimOutlined />选取
</a-button>
</div>
</a-form-item>
<!-- <a-form-item name="companyName">-->
<!-- <a-input-->
<!-- allow-clear-->
<!-- size="large"-->
<!-- :maxlength="11"-->
<!-- v-model:value="form.companyName"-->
<!-- :placeholder="`请输入店铺名称`"-->
<!-- />-->
<!-- </a-form-item>-->
<!-- <a-form-item name="email">-->
<!-- <a-input-->
<!-- allow-clear-->
<!-- size="large"-->
<!-- v-model:value="form.email"-->
<!-- :placeholder="`(选填)请输入电子邮箱`"-->
<!-- />-->
<!-- </a-form-item>-->
<a-form-item name="category">
<industry-select
v-model:value="form.category"
valueField="label"
allow-clear
size="large"
placeholder="所属行业"
class="ele-fluid"
@change="onIndustry"
/>
</a-form-item>
<a-form-item>
<a-checkbox v-model:checked="form.remember">
同意 <a href="https://website.websoft.top/xieyi/01.html" target="_blank">服务协议及隐私政策</a>
@@ -128,26 +82,25 @@
</a-form-item>
<a-form-item>
<a-button
block
size="large"
type="primary"
:disabled="!form.remember"
:loading="loading"
@click="submit"
block
size="large"
type="primary"
:disabled="!form.remember"
:loading="loading"
@click="submit"
>
注册
</a-button>
<div class="register text-center pt-5"><a @click="push('/login')">已有账号立即登录</a></div>
</a-form-item>
</template>
<template v-if="loginType === 'sms'">
<a-form-item name="phone">
<a-input
allow-clear
size="large"
:maxlength="11"
v-model:value="form.phone"
:placeholder="`请输入手机号码`"
allow-clear
size="large"
:maxlength="11"
v-model:value="form.phone"
:placeholder="`请输入手机号码`"
>
<template #addonBefore> +86</template>
</a-input>
@@ -155,17 +108,17 @@
<a-form-item name="code">
<div class="login-input-group">
<a-input
placeholder="请输入验证码"
v-model:value="form.code"
size="large"
:maxlength="6"
allow-clear
@pressEnter="onLoginBySms"
placeholder="请输入验证码"
v-model:value="form.code"
size="large"
:maxlength="6"
allow-clear
@pressEnter="onLoginBySms"
/>
<a-button
class="login-captcha"
:disabled="!!countdownTime"
@click="openImgCodeModal"
class="login-captcha"
:disabled="!!countdownTime"
@click="openImgCodeModal"
>
<span v-if="!countdownTime">发送验证码</span>
<span v-else>已发送 {{ countdownTime }} s</span>
@@ -174,11 +127,11 @@
</a-form-item>
<a-form-item>
<a-button
block
size="large"
type="primary"
:loading="loading"
@click="onLoginBySms"
block
size="large"
type="primary"
:loading="loading"
@click="onLoginBySms"
>
{{ loading ? t('login.loading') : t('login.login') }}
</a-button>
@@ -193,30 +146,30 @@
</div>
<!-- 编辑弹窗 -->
<a-modal
:width="340"
:footer="null"
title="发送验证码"
v-model:visible="visible"
:width="340"
:footer="null"
title="发送验证码"
v-model:visible="visible"
>
<div class="login-input-group" style="margin-bottom: 16px">
<a-input
v-model:value="imgCode"
:maxlength="5"
size="large"
placeholder="请输入图形验证码"
allow-clear
@pressEnter="sendCode"
v-model:value="imgCode"
:maxlength="5"
size="large"
placeholder="请输入图形验证码"
allow-clear
@pressEnter="sendCode"
/>
<a-button class="login-captcha">
<img alt="" :src="captcha" @click="changeCaptcha"/>
</a-button>
</div>
<a-button
block
size="large"
type="primary"
:loading="codeLoading"
@click="sendCode"
block
size="large"
type="primary"
:loading="codeLoading"
@click="sendCode"
>
立即发送
</a-button>
@@ -240,11 +193,10 @@ import {useI18n} from 'vue-i18n';
import {useRouter} from 'vue-router';
import {getTenantId} from '@/utils/domain';
import {Form, message} from 'ant-design-vue';
import { AimOutlined, CheckCircleOutlined, CloseCircleOutlined } from '@ant-design/icons-vue';
import { storeToRefs } from 'pinia';
import {CheckCircleOutlined} from '@ant-design/icons-vue';
import {storeToRefs} from 'pinia';
import {goHomeRoute, cleanPageTabs} from '@/utils/page-tab-util';
import {loginBySms, getCaptcha} from '@/api/passport/login';
import { CenterPoint } from 'ele-admin-pro/es/ele-map-picker/types';
import {TEMPLATE_ID, THEME_STORE_NAME} from '@/config/setting';
import {sendSmsCaptcha} from '@/api/passport/login';
import useFormData from '@/utils/use-form-data';
@@ -252,16 +204,16 @@ import {FormInstance} from 'ant-design-vue/es/form';
import {configWebsiteField} from '@/api/cms/cmsWebsiteField';
import {Config} from '@/api/cms/cmsWebsiteField/model';
import {phoneReg} from 'ele-admin-pro';
import {push} from "@/utils/common";
import {useThemeStore} from "@/store/modules/theme";
import {CmsWebsite} from "@/api/cms/cmsWebsite/model";
import {createCmsWebSite} from "@/api/layout";
import { bindUserReferee } from '@/api/user/referee';
import {addAdminUser} from "@/api/system/user";
import {User} from "@/api/system/user/model";
import {listRoles} from "@/api/system/role";
const useForm = Form.useForm;
const {currentRoute} = useRouter();
const {t} = useI18n();
const { locale } = useI18n();
const {locale} = useI18n();
// 登录框方向, 0 居中, 1 居右, 2 居左
const direction = ref(0);
@@ -273,106 +225,12 @@ const loginType = ref('account');
const config = ref<Config>();
// 是否开启响应式布局
const themeStore = useThemeStore();
const { darkMode } = storeToRefs(themeStore);
const {darkMode} = storeToRefs(themeStore);
// 配置信息
const {form} = useFormData<CmsWebsite>({
// 站点ID
websiteId: undefined,
// 网站名称
websiteName: undefined,
// 网站标识
websiteCode: undefined,
// 网站LOGO
websiteIcon: undefined,
// 网站LOGO
websiteLogo: undefined,
// 网站LOGO(深色模式)
websiteDarkLogo: undefined,
// 网站类型
websiteType: undefined,
// 网站关键词
keywords: undefined,
// 域名前缀
prefix: undefined,
// 绑定域名
domain: undefined,
// 全局样式
style: undefined,
// 后台管理地址
adminUrl: undefined,
// 应用版本 10标准版 20专业版 30永久授权
version: undefined,
// 服务到期时间
expirationTime: undefined,
// 模版ID
templateId: TEMPLATE_ID,
// 行业类型(父级)
industryParent: undefined,
// 行业类型(子级)
industryChild: undefined,
// 企业ID
companyId: undefined,
// 所在国家
country: undefined,
// 所在省份
province: undefined,
// 所在城市
city: undefined,
// 所在辖区
region: undefined,
// 经度
longitude: undefined,
// 纬度
latitude: undefined,
// 街道地址
address: undefined,
// 联系电话
phone: undefined,
// 电子邮箱
email: undefined,
// ICP备案号
icpNo: undefined,
// 公安备案
policeNo: undefined,
// 备注
comments: undefined,
// 是否推荐
recommend: undefined,
// 是否运行中
running: undefined,
// 状态 0未开通 1运行中 2维护中 3已关闭 4已欠费停机 5违规关停
status: undefined,
// 维护说明
statusText: undefined,
// 关闭说明
statusClose: undefined,
// 全局样式
styles: undefined,
// 语言
lang: undefined,
// 排序号
sortNumber: undefined,
// 用户ID
userId: undefined,
// 是否删除, 0否, 1是
deleted: undefined,
// 租户id
tenantId: undefined,
// 创建时间
createTime: undefined,
// 修改时间
updateTime: undefined,
// 网站配置
config: undefined,
// 短信验证码
smsCode: undefined,
// 短信验证码
code: undefined,
// 是否管理员
isSuperAdmin: true,
// 企业名称
companyName: undefined,
const {form} = useFormData<User>({
phone: '',
isAdmin: true
});
// 验证码 base64 数据
@@ -498,105 +356,88 @@ const goHome = () => {
localStorage.removeItem(THEME_STORE_NAME);
};
const onIndustry = (item: any) => {
form.industryParent = item[0];
form.industryChild = item[1];
form.category = `${item[0]}/${item[1]}`;
};
/* 打开位置选择 */
const openMapPicker = () => {
showMap.value = true;
};
/* 地图选择后回调 */
const onDone = (location: CenterPoint) => {
if (location) {
console.log(location);
form.companyName = `${location.name}`;
form.province = `${location.city?.province}`;
form.city = `${location.city?.city}`;
form.region = `${location.city?.district}`;
form.address = `${location.address}`;
form.longitude = `${location.lng}`;
form.latitude = `${location.lat}`;
}
showMap.value = false;
};
const onLoginBySms = () => {
if (!formRef.value) {
return;
}
formRef.value
.validate()
.then(() => {
loading.value = true;
form.code = form.smsCode?.toLowerCase();
loginBySms(form)
.then((msg) => {
message.success(msg);
loading.value = false;
resetFields();
cleanPageTabs();
goHome();
})
.catch((e: Error) => {
message.error(e.message);
loading.value = false;
});
})
.catch(() => {
});
.validate()
.then(() => {
loading.value = true;
form.code = form.smsCode?.toLowerCase();
loginBySms(form)
.then((msg) => {
message.success(msg);
loading.value = false;
resetFields();
cleanPageTabs();
goHome();
})
.catch((e: Error) => {
message.error(e.message);
loading.value = false;
});
})
.catch(() => {
});
};
/* 保存编辑 */
const submit = () => {
const submit = async () => {
if (!formRef.value) {
return;
}
formRef.value
.validate()
.then(() => {
loading.value = true;
.validate()
.then(() => {
loading.value = true;
// addShopDealerUser({
// ...form,
// dealerId: Number(dealerId.value),
// }).then((data) => {
// console.log(data);
// });
// 普通注册流程
createCmsWebSite(form)
.then(async (msg) => {
// 如果有邀请人,注册成功后建立推荐关系
if (inviterId.value) {
try {
const userId = localStorage.getItem('UserId');
if (userId) {
await bindUserReferee({
dealerId: inviterId.value,
userId: Number(userId),
level: 1
});
message.success('注册成功,已建立推荐关系');
}
} catch (e) {
console.error('建立推荐关系失败:', e);
// 不影响注册流程,只是推荐关系建立失败
}
}
setTimeout(() => {
// 登录成功
message.success(msg);
loading.value = false;
resetFields();
cleanPageTabs();
goHome();
}, 2000)
})
.catch(() => {
message.error('该手机号码已经被注册');
loading.value = false;
});
})
.catch(() => {
});
// createCmsWebSite(form)
// .then(async (msg) => {
// // 如果有邀请人,注册成功后建立推荐关系
// if (inviterId.value) {
// try {
// const userId = localStorage.getItem('UserId');
// if (userId) {
// await bindUserReferee({
// dealerId: inviterId.value,
// userId: Number(userId),
// level: 1
// });
// message.success('注册成功,已建立推荐关系');
// }
// } catch (e) {
// console.error('建立推荐关系失败:', e);
// // 不影响注册流程,只是推荐关系建立失败
// }
// }
//
// setTimeout(() => {
// // 登录成功
// message.success(msg);
// loading.value = false;
// resetFields();
// cleanPageTabs();
// goHome();
// }, 2000)
// })
// .catch(() => {
// message.error('该手机号码已经被注册');
// loading.value = false;
// });
})
.catch(() => {
});
};
/* 获取图形验证码 */
@@ -608,17 +449,17 @@ const changeCaptcha = () => {
});
// 这里演示的验证码是后端返回base64格式的形式, 如果后端地址直接是图片请参考忘记密码页面
getCaptcha()
.then((data) => {
captcha.value = data.base64;
// 实际项目后端一般会返回验证码的key而不是直接返回验证码的内容, 登录用key去验证, 你可以根据自己后端接口修改
text.value = data.text;
// 自动回填验证码, 实际项目去掉这个
// form.code = data.text;
// resetFields();
})
.catch((e) => {
message.error(e.message);
});
.then((data) => {
captcha.value = data.base64;
// 实际项目后端一般会返回验证码的key而不是直接返回验证码的内容, 登录用key去验证, 你可以根据自己后端接口修改
text.value = data.text;
// 自动回填验证码, 实际项目去掉这个
// form.code = data.text;
// resetFields();
})
.catch((e) => {
message.error(e.message);
});
};
// 首次加载
@@ -634,21 +475,21 @@ onMounted(() => {
});
watch(
currentRoute,
() => {
// 解析二级域名获取租户ID
const tenantId = getTenantId();
if (tenantId) {
form.tenantId = Number(tenantId);
showTenantId.value = false;
}
const tid = localStorage.getItem('TenantId');
if (tid) {
form.tenantId = Number(tid);
showTenantId.value = false;
}
},
{immediate: true}
currentRoute,
() => {
// 解析二级域名获取租户ID
const tenantId = getTenantId();
if (tenantId) {
form.tenantId = Number(tenantId);
showTenantId.value = false;
}
const tid = localStorage.getItem('TenantId');
if (tid) {
form.tenantId = Number(tid);
showTenantId.value = false;
}
},
{immediate: true}
);
</script>

View File

@@ -0,0 +1,219 @@
<!-- 搜索表单 -->
<template>
<div class="search-container">
<!-- 搜索表单 -->
<a-form
:model="searchForm"
layout="inline"
class="search-form"
@finish="handleSearch"
>
<a-form-item label="申请人姓名">
<a-input
v-model:value="searchForm.realName"
placeholder="请输入申请人姓名"
allow-clear
style="width: 160px"
/>
</a-form-item>
<a-form-item label="手机号码">
<a-input
v-model:value="searchForm.mobile"
placeholder="请输入手机号码"
allow-clear
style="width: 160px"
/>
</a-form-item>
<a-form-item label="申请方式">
<a-select
v-model:value="searchForm.applyType"
placeholder="全部方式"
allow-clear
style="width: 120px"
>
<a-select-option :value="10">需要审核</a-select-option>
<a-select-option :value="20">免审核</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="审核状态">
<a-select
v-model:value="searchForm.applyStatus"
placeholder="全部状态"
allow-clear
style="width: 120px"
>
<a-select-option :value="10">待审核</a-select-option>
<a-select-option :value="20">审核通过</a-select-option>
<a-select-option :value="30">审核驳回</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="申请时间">
<a-range-picker
v-model:value="searchForm.dateRange"
style="width: 240px"
/>
</a-form-item>
<a-form-item>
<a-space>
<a-button type="primary" html-type="submit" class="ele-btn-icon">
<template #icon>
<SearchOutlined />
</template>
搜索
</a-button>
<a-button @click="resetSearch">
重置
</a-button>
</a-space>
</a-form-item>
</a-form>
<!-- 操作按钮 -->
<div class="action-buttons">
<a-space>
<!-- <a-button type="primary" @click="add" class="ele-btn-icon">-->
<!-- <template #icon>-->
<!-- <PlusOutlined />-->
<!-- </template>-->
<!-- 新增申请-->
<!-- </a-button>-->
<a-button
type="primary"
ghost
:disabled="!selection?.length"
@click="batchApprove"
class="ele-btn-icon"
>
<template #icon>
<CheckOutlined />
</template>
批量通过
</a-button>
<a-button
:disabled="!selection?.length"
@click="exportData"
class="ele-btn-icon"
>
<template #icon>
<ExportOutlined />
</template>
导出数据
</a-button>
</a-space>
</div>
</div>
</template>
<script lang="ts" setup>
import { reactive } from 'vue';
import {
PlusOutlined,
SearchOutlined,
CheckOutlined,
ExportOutlined
} from '@ant-design/icons-vue';
import type { ShopDealerApplyParam } from '@/api/shop/shopDealerApply/model';
import dayjs from 'dayjs';
const props = withDefaults(
defineProps<{
// 选中的数据
selection?: any[];
}>(),
{
selection: () => []
}
);
const emit = defineEmits<{
(e: 'search', where?: ShopDealerApplyParam): void;
(e: 'add'): void;
(e: 'batchApprove'): void;
(e: 'export'): void;
}>();
// 搜索表单
const searchForm = reactive<any>({
realName: '',
mobile: '',
applyType: undefined,
applyStatus: undefined,
dateRange: undefined
});
// 搜索
const handleSearch = () => {
const searchParams: ShopDealerApplyParam = {};
if (searchForm.realName) {
searchParams.realName = searchForm.realName;
}
if (searchForm.mobile) {
searchParams.mobile = searchForm.mobile;
}
if (searchForm.applyType) {
searchParams.applyType = searchForm.applyType;
}
if (searchForm.applyStatus) {
searchParams.applyStatus = searchForm.applyStatus;
}
if (searchForm.dateRange && searchForm.dateRange.length === 2) {
searchParams.startTime = dayjs(searchForm.dateRange[0]).format('YYYY-MM-DD');
searchParams.endTime = dayjs(searchForm.dateRange[1]).format('YYYY-MM-DD');
}
emit('search', searchParams);
};
// 重置搜索
const resetSearch = () => {
searchForm.realName = '';
searchForm.mobile = '';
searchForm.applyType = undefined;
searchForm.applyStatus = undefined;
searchForm.dateRange = undefined;
emit('search', {});
};
// 新增
const add = () => {
emit('add');
};
// 批量通过
const batchApprove = () => {
emit('batchApprove');
};
// 导出数据
const exportData = () => {
emit('export');
};
</script>
<style lang="less" scoped>
.search-container {
background: #fff;
padding: 16px;
border-radius: 6px;
margin-bottom: 16px;
.search-form {
margin-bottom: 16px;
:deep(.ant-form-item) {
margin-bottom: 8px;
}
}
.action-buttons {
border-top: 1px solid #f0f0f0;
padding-top: 16px;
}
}
</style>

View File

@@ -0,0 +1,272 @@
<!-- 编辑弹窗 -->
<template>
<ele-modal
:width="600"
:visible="visible"
:maskClosable="false"
:maxable="maxable"
:title="isUpdate ? '编辑企业' : '新增企业'"
:body-style="{ paddingBottom: '28px' }"
@update:visible="updateVisible"
@ok="save"
>
<a-form
ref="formRef"
:model="form"
:rules="rules"
:label-col="{ span: 4 }"
:wrapper-col="{ span: 18 }"
>
<a-form-item label="企业名称" name="realName">
<a-input
placeholder="请输入企业名称"
v-model:value="form.realName"
/>
</a-form-item>
<a-form-item label="入市状态" name="applyStatus">
<a-select v-model:value="form.applyStatus" placeholder="请选择入市状态" @change="handleStatusChange">
<a-select-option :value="10">
<a-tag>未入市</a-tag>
<span style="margin-left: 8px;">未入市</span>
</a-select-option>
<a-select-option :value="20">
<a-tag color="success">已入市</a-tag>
<span style="margin-left: 8px;">已入市</span>
</a-select-option>
</a-select>
</a-form-item>
</a-form>
</ele-modal>
</template>
<script lang="ts" setup>
import { ref, reactive, watch } from 'vue';
import { Form, message } from 'ant-design-vue';
import dayjs from 'dayjs';
import { assignObject } from 'ele-admin-pro';
import { addShopDealerApply, updateShopDealerApply } from '@/api/shop/shopDealerApply';
import { ShopDealerApply } from '@/api/shop/shopDealerApply/model';
import { FormInstance } from 'ant-design-vue/es/form';
// 是否是修改
const isUpdate = ref(false);
const useForm = Form.useForm;
const props = defineProps<{
// 弹窗是否打开
visible: boolean;
// 修改回显的数据
data?: ShopDealerApply | null;
}>();
const emit = defineEmits<{
(e: 'done'): void;
(e: 'update:visible', visible: boolean): void;
}>();
// 提交状态
const loading = ref(false);
// 是否显示最大化切换按钮
const maxable = ref(true);
// 表格选中数据
const formRef = ref<FormInstance | null>(null);
// 表单数据
const form = reactive<ShopDealerApply>({
applyId: undefined,
type: 3,
userId: undefined,
realName: '',
mobile: '',
refereeId: undefined,
applyType: 10,
applyTime: undefined,
applyStatus: 10,
auditTime: undefined,
rejectReason: '',
tenantId: undefined,
createTime: undefined,
updateTime: undefined
});
/* 更新visible */
const updateVisible = (value: boolean) => {
emit('update:visible', value);
};
// 表单验证规则
const rules = reactive({
realName: [
{
required: true,
message: '请输入企业名称',
trigger: 'blur'
}
],
applyStatus: [
{
required: true,
message: '请选择审核状态',
trigger: 'change'
}
]
});
const { resetFields } = useForm(form, rules);
/* 处理审核状态变化 */
const handleStatusChange = (value: number) => {
// 当状态改为审核通过或驳回时,自动设置审核时间为当前时间
if ((value === 20 || value === 30) && !form.auditTime) {
form.auditTime = dayjs();
}
// 当状态改为待审核时,清空审核时间和驳回原因
if (value === 10) {
form.auditTime = undefined;
form.rejectReason = '';
}
};
/* 保存编辑 */
const save = () => {
if (!formRef.value) {
return;
}
// 动态验证规则
const validateFields: string[] = ['userId', 'realName', 'mobile', 'applyStatus'];
// 如果是驳回状态,需要验证驳回原因
if (form.applyStatus === 30) {
validateFields.push('rejectReason');
}
// 如果是审核通过或驳回状态,需要验证审核时间
if (form.applyStatus === 20 || form.applyStatus === 30) {
validateFields.push('auditTime');
}
formRef.value
.validate(validateFields)
.then(() => {
loading.value = true;
const formData = {
...form
};
// 处理时间字段转换 - 转换为ISO字符串格式
if (formData.applyTime) {
if (dayjs.isDayjs(formData.applyTime)) {
formData.applyTime = formData.applyTime.format('YYYY-MM-DD HH:mm:ss');
} else if (typeof formData.applyTime === 'number') {
formData.applyTime = dayjs(formData.applyTime).format('YYYY-MM-DD HH:mm:ss');
}
}
if (formData.auditTime) {
if (dayjs.isDayjs(formData.auditTime)) {
formData.auditTime = formData.auditTime.format('YYYY-MM-DD HH:mm:ss');
} else if (typeof formData.auditTime === 'number') {
formData.auditTime = dayjs(formData.auditTime).format('YYYY-MM-DD HH:mm:ss');
}
}
// 当审核状态为通过或驳回时,确保有审核时间
if ((formData.applyStatus === 20 || formData.applyStatus === 30) && !formData.auditTime) {
formData.auditTime = dayjs().format('YYYY-MM-DD HH:mm:ss');
}
// 当状态为待审核时,清空审核时间
if (formData.applyStatus === 10) {
formData.auditTime = undefined;
}
const saveOrUpdate = isUpdate.value ? updateShopDealerApply : addShopDealerApply;
saveOrUpdate(formData)
.then((msg) => {
loading.value = false;
message.success(msg);
updateVisible(false);
emit('done');
})
.catch((e) => {
loading.value = false;
message.error(e.message);
});
})
.catch(() => {});
};
watch(
() => props.visible,
(visible) => {
if (visible) {
if (props.data) {
assignObject(form, props.data);
// 处理时间字段 - 确保转换为dayjs对象
if (props.data.applyTime) {
form.applyTime = dayjs(props.data.applyTime);
}
if (props.data.auditTime) {
form.auditTime = dayjs(props.data.auditTime);
}
isUpdate.value = true;
} else {
// 重置为默认值
Object.assign(form, {
applyId: undefined,
userId: undefined,
realName: '',
mobile: '',
refereeId: undefined,
applyType: 10,
applyTime: dayjs(),
applyStatus: 10,
auditTime: undefined,
rejectReason: '',
tenantId: undefined,
createTime: undefined,
updateTime: undefined
});
isUpdate.value = false;
}
} else {
resetFields();
}
},
{ immediate: true }
);
</script>
<style lang="less" scoped>
:deep(.ant-divider-horizontal.ant-divider-with-text-left) {
margin: 24px 0 16px 0;
.ant-divider-inner-text {
padding: 0 16px 0 0;
}
}
:deep(.ant-form-item) {
margin-bottom: 16px;
}
:deep(.ant-radio) {
display: flex;
align-items: center;
margin-bottom: 8px;
.ant-radio-inner {
margin-right: 8px;
}
}
:deep(.ant-select-selection-item) {
display: flex;
align-items: center;
}
</style>

View File

@@ -0,0 +1,307 @@
<template>
<a-page-header :title="getPageTitle()" @back="() => $router.go(-1)">
<a-card :bordered="false">
<!-- 表格 -->
<ele-pro-table
ref="tableRef"
row-key="applyId"
:columns="columns"
:datasource="datasource"
class="sys-org-table"
:scroll="{ x: 1300 }"
:where="defaultWhere"
:customRow="customRow"
cache-key="proSystemShopDealerApplyTable"
>
<template #toolbar>
<a-space>
<a-button type="primary" class="ele-btn-icon" @click="openEdit()">
<template #icon>
<plus-outlined/>
</template>
<span>添加</span>
</a-button>
<a-button class="ele-btn-icon" @click="openImport()">
<template #icon>
<cloud-upload-outlined/>
</template>
<span>导入</span>
</a-button>
<!-- <a-button class="ele-btn-icon" @click="exportData()" :loading="exportLoading">-->
<!-- <template #icon>-->
<!-- <download-outlined/>-->
<!-- </template>-->
<!-- <span>导出</span>-->
<!-- </a-button>-->
<a-input-search
allow-clear
v-model:value="searchText"
placeholder="请输入关键词"
@search="reload"
@pressEnter="reload"
/>
</a-space>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'applyStatus'">
<span class="text-green-500" v-if="record.applyStatus == 20">已入市</span>
<span class="text-gray-300" v-else>未入市</span>
</template>
<template v-if="column.key === 'action'">
<div>
<a @click="openEdit(record)">修改</a>
<a-divider type="vertical"/>
<a-popconfirm
placement="topRight"
title="确定要删除此用户吗?"
@confirm="remove(record)"
>
<a class="ele-text-danger">删除</a>
</a-popconfirm>
</div>
</template>
</template>
</ele-pro-table>
</a-card>
<!-- 编辑弹窗 -->
<ShopDealerApplyEdit
v-model:visible="showEdit"
:data="current"
:organization-list="data"
@done="reload"
/>
</a-page-header>
</template>
<script lang="ts" setup>
import {ref, reactive, watch} from 'vue';
import {message} from 'ant-design-vue/es';
import {
PlusOutlined,
CloudUploadOutlined,
} from '@ant-design/icons-vue';
import type {EleProTable} from 'ele-admin-pro/es';
import type {
DatasourceFunction,
ColumnItem
} from 'ele-admin-pro/es/ele-pro-table/types';
import {messageLoading} from 'ele-admin-pro/es';
import ShopDealerApplyEdit from './components/shopDealerApplyEdit.vue';
import {toDateString} from 'ele-admin-pro';
import {utils, writeFile} from 'xlsx';
import dayjs from 'dayjs';
import {Organization} from '@/api/system/organization/model';
import {getPageTitle} from "@/utils/common";
import router from "@/router";
import {listShopDealerApply, pageShopDealerApply, removeShopDealerApply} from "@/api/shop/shopDealerApply";
import {ShopDealerApply, ShopDealerApplyParam} from "@/api/shop/shopDealerApply/model";
// 加载状态
const loading = ref(true);
// 树形数据
const data = ref<Organization[]>([]);
// 树展开的key
const expandedRowKeys = ref<number[]>([]);
// 树选中的key
const selectedRowKeys = ref<number[]>([]);
// 表格选中数据
const selection = ref<ShopDealerApply[]>([]);
// 当前编辑数据
const current = ref<ShopDealerApply | null>(null);
// 是否显示编辑弹窗
const showEdit = ref(false);
// 是否显示用户导入弹窗
const showImport = ref(false);
// 导出加载状态
const exportLoading = ref(false);
const searchText = ref('');
// 表格实例
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
// 表格列配置
const columns = ref<ColumnItem[]>([
// {
// title: 'ID',
// dataIndex: 'userId',
// width: 90,
// showSorterTooltip: false
// },
{
title: '企业名称',
dataIndex: 'realName',
align: 'center',
showSorterTooltip: false
},
{
title: '入市情况',
dataIndex: 'applyStatus',
key: 'applyStatus',
align: 'center',
sorter: true
},
{
title: '创建时间',
dataIndex: 'createTime',
sorter: true,
align: 'center',
showSorterTooltip: false,
ellipsis: true,
customRender: ({text}) => toDateString(text, 'yyyy-MM-dd HH:mm:ss')
},
{
title: '操作',
key: 'action',
width: 180,
fixed: 'right',
align: 'center'
}
]);
// 默认搜索条件
const defaultWhere = reactive({
username: '',
nickname: ''
});
// 表格数据源
const datasource: DatasourceFunction = ({
page,
limit,
where,
orders
}) => {
where = {};
where.keywords = searchText.value;
where.type = 3;
return pageShopDealerApply({page, limit, ...where, ...orders});
};
/* 搜索 */
const reload = (where?: ShopDealerApplyParam) => {
selection.value = [];
tableRef?.value?.reload({where});
};
/* 打开编辑弹窗 */
const openEdit = (row?: ShopDealerApply) => {
current.value = row ?? null;
showEdit.value = true;
};
/* 打开编辑弹窗 */
const openImport = () => {
showImport.value = true;
};
/* 导出数据 */
const exportData = async () => {
exportLoading.value = true;
try {
// 定义表头
const array: (string | number)[][] = [
[
'ID',
'企业名称',
'联系方式',
'入市状态',
'创建时间'
]
];
// 构建查询参数,使用当前搜索条件
const params = {
keywords: searchText.value,
isAdmin: 0
};
// 获取用户列表数据
const list = await listShopDealerApply(params);
if (!list || list.length === 0) {
message.warning('没有数据可以导出');
exportLoading.value = false;
return;
}
// 将数据转换为Excel行
list.forEach((user: ShopDealerApply) => {
array.push([
`${user.applyId || ''}`,
`${user.realName || ''}`,
`${user.mobile || ''}`,
`${user.applyStatus === 20 ? '通过' : '未通过'}`,
`${user.createTime || ''}`
]);
});
// 生成Excel文件
const sheetName = `导出企业入市${dayjs(new Date()).format('YYYYMMDD')}`;
const workbook = {
SheetNames: [sheetName],
Sheets: {}
};
const sheet = utils.aoa_to_sheet(array);
workbook.Sheets[sheetName] = sheet;
// 设置列宽
sheet['!cols'] = [
];
message.loading('正在生成Excel文件...', 0);
setTimeout(() => {
writeFile(workbook, `${sheetName}.xlsx`);
exportLoading.value = false;
message.destroy();
message.success(`成功导出 ${list.length} 条记录`);
}, 1000);
} catch (error: any) {
exportLoading.value = false;
message.error(error.message || '导出失败');
}
};
/* 删除单个 */
const remove = (row: ShopDealerApply) => {
const hide = messageLoading('请求中..', 0);
removeShopDealerApply(row.applyId)
.then((msg) => {
hide();
message.success(msg);
reload();
})
.catch((e) => {
hide();
message.error(e.message);
});
};
/* 自定义行属性 */
const customRow = (record: ShopDealerApply) => {
return {
// 行点击事件
onClick: () => {
// console.log(record);
},
// 行双击事件
onDblclick: () => {
openEdit(record);
}
};
};
watch(
() => router.currentRoute.value.query,
() => {},
{immediate: true}
);
</script>
<script lang="ts">
export default {
name: 'ShopDealerApplyRs'
};
</script>

View File

@@ -319,7 +319,6 @@ const datasource: DatasourceFunction = ({
where.roleId = filters.roles;
where.keywords = searchText.value;
where.isAdmin = 0;
where.type = 1;
return pageUsers({page, limit, ...where, ...orders});
};

View File

@@ -119,8 +119,6 @@ const props = defineProps<{
inviterId?: number; // 邀请人ID当前登录用户ID
}>();
const router = useRouter();
// 二维码类型
const qrCodeType = ref<'web' | 'miniprogram'>('web');
// 小程序码URL