feat(credit): 添加赊账客户导入功能

- 新增 importCreditUsers API 接口用于导入赊账客户数据
- 在信用用户管理页面增加导入按钮和导入弹窗组件
- 实现拖拽上传和文件校验逻辑
- 添加导入模板下载链接
- 支持 Excel 文件格式(.xls/.xlsx)导入
- 实现批量导入数据处理和错误提示
- 更新搜索组件支持关键词搜索功能
- 优化表格数据加载逻辑,支持搜索参数传递
- 移除冗余的查询相关代码和状态变量
- 完善导入弹窗的 loading 状态管理和关闭逻辑
This commit is contained in:
2025-12-15 14:43:49 +08:00
parent 1856a611ce
commit 0e489ec35f
13 changed files with 1379 additions and 65 deletions

View File

@@ -103,3 +103,24 @@ export async function getCreditUser(id: number) {
}
return Promise.reject(new Error(res.data.message));
}
/**
* 导入赊账客户
*/
export async function importCreditUsers(file: File) {
const formData = new FormData();
formData.append('file', file);
const res = await request.post<ApiResult<unknown>>(
'/credit/credit-user/import',
formData,
{
headers: {
'Content-Type': 'multipart/form-data'
}
}
);
if (res.data.code === 0) {
return res.data.message;
}
return Promise.reject(new Error(res.data.message));
}

View File

@@ -0,0 +1,93 @@
<!-- 赊账客户导入弹窗 -->
<template>
<ele-modal
:width="520"
:footer="null"
title="赊账客户批量导入"
:visible="visible"
@update:visible="updateVisible"
>
<a-spin :spinning="loading">
<a-upload-dragger
accept=".xls,.xlsx"
:show-upload-list="false"
:customRequest="doUpload"
style="padding: 24px 0; margin-bottom: 16px"
>
<p class="ant-upload-drag-icon">
<cloud-upload-outlined />
</p>
<p class="ant-upload-hint">将文件拖到此处或点击上传</p>
</a-upload-dragger>
</a-spin>
<div class="ele-text-center">
<span>只能上传xlsxlsx文件</span>
<a :href="templateUrl" download="赊账客户导入模板.xlsx">
下载导入模板
</a>
</div>
</ele-modal>
</template>
<script lang="ts" setup>
import { computed, ref } from 'vue';
import { message } from 'ant-design-vue/es';
import { CloudUploadOutlined } from '@ant-design/icons-vue';
import { importCreditUsers } from '@/api/credit/creditUser';
import { API_BASE_URL } from '@/config/setting';
const emit = defineEmits<{
(e: 'done'): void;
(e: 'update:visible', visible: boolean): void;
}>();
defineProps<{
// 是否打开弹窗
visible: boolean;
}>();
// 导入请求状态
const loading = ref(false);
// 模板下载地址,保持与当前接口域名一致
const templateUrl = computed(() => {
const base =
(localStorage.getItem('ApiUrl') || API_BASE_URL || '').replace(/\/$/, '');
return `${base}/credit/credit-user/import/template`;
});
/* 上传 */
const doUpload = ({ file }) => {
if (
![
'application/vnd.ms-excel',
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
].includes(file.type)
) {
message.error('只能选择 excel 文件');
return false;
}
if (file.size / 1024 / 1024 > 10) {
message.error('大小不能超过 10MB');
return false;
}
loading.value = true;
importCreditUsers(file)
.then((msg) => {
loading.value = false;
message.success(msg);
updateVisible(false);
emit('done');
})
.catch((e) => {
loading.value = false;
message.error(e.message);
});
return false;
};
/* 更新 visible */
const updateVisible = (value: boolean) => {
emit('update:visible', value);
};
</script>

View File

@@ -7,36 +7,81 @@
</template>
<span>添加</span>
</a-button>
<a-button class="ele-btn-icon" @click="openImport">
<template #icon>
<CloudUploadOutlined />
</template>
<span>导入</span>
</a-button>
<a-button
danger
class="ele-btn-icon"
:disabled="!selection?.length"
@click="remove"
>
<template #icon>
<DeleteOutlined />
</template>
<span>批量删除</span>
</a-button>
<a-input-search
allow-clear
v-model:value="keywords"
placeholder="请输入关键词"
style="width: 220px"
@search="handleSearch"
@pressEnter="handleSearch"
/>
</a-space>
</template>
<script lang="ts" setup>
import { PlusOutlined } from '@ant-design/icons-vue';
import type { GradeParam } from '@/api/user/grade/model';
import { watch } from 'vue';
import { computed, ref } from 'vue';
import {
PlusOutlined,
CloudUploadOutlined,
DeleteOutlined
} from '@ant-design/icons-vue';
import type { CreditUser, CreditUserParam } from '@/api/credit/creditUser/model';
const props = withDefaults(
defineProps<{
// 选中的角色
selection?: [];
selection?: CreditUser[];
}>(),
{}
{
selection: () => []
}
);
const emit = defineEmits<{
(e: 'search', where?: GradeParam): void;
(e: 'search', where?: CreditUserParam): void;
(e: 'add'): void;
(e: 'remove'): void;
(e: 'batchMove'): void;
(e: 'importData'): void;
}>();
const keywords = ref('');
const selection = computed(() => props.selection || []);
// 新增
const add = () => {
emit('add');
};
watch(
() => props.selection,
() => {}
);
// 搜索
const handleSearch = () => {
emit('search', { keywords: keywords.value });
};
// 导入
const openImport = () => {
emit('importData');
};
// 批量删除
const remove = () => {
emit('remove');
};
</script>

View File

@@ -1,55 +1,59 @@
<template>
<a-page-header :title="getPageTitle()" @back="() => $router.go(-1)">
<a-card :bordered="false" :body-style="{ padding: '16px' }">
<ele-pro-table
ref="tableRef"
row-key="id"
:columns="columns"
:datasource="datasource"
:customRow="customRow"
tool-class="ele-toolbar-form"
class="sys-org-table"
>
<template #toolbar>
<search
@search="reload"
:selection="selection"
@add="openEdit"
@remove="removeBatch"
@batchMove="openMove"
/>
<a-card :bordered="false" :body-style="{ padding: '16px' }">
<ele-pro-table
ref="tableRef"
row-key="id"
:columns="columns"
:datasource="datasource"
:customRow="customRow"
tool-class="ele-toolbar-form"
class="sys-org-table"
v-model:selection="selection"
>
<template #toolbar>
<search
@search="reload"
:selection="selection"
@add="openEdit"
@remove="removeBatch"
@batchMove="openMove"
@importData="openImport"
/>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'image'">
<a-image :src="record.image" :width="50" />
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'image'">
<a-image :src="record.image" :width="50" />
</template>
<template v-if="column.key === 'status'">
<a-tag v-if="record.status === 0" color="green">显示</a-tag>
<a-tag v-if="record.status === 1" color="red">隐藏</a-tag>
</template>
<template v-if="column.key === 'action'">
<a-space>
<a @click="openEdit(record)">修改</a>
<a-divider type="vertical" />
<a-popconfirm
title="确定要删除此记录吗?"
@confirm="remove(record)"
>
<a class="ele-text-danger">删除</a>
</a-popconfirm>
</a-space>
</template>
<template v-if="column.key === 'status'">
<a-tag v-if="record.status === 0" color="green">显示</a-tag>
<a-tag v-if="record.status === 1" color="red">隐藏</a-tag>
</template>
</ele-pro-table>
</a-card>
<template v-if="column.key === 'action'">
<a-space>
<a @click="openEdit(record)">修改</a>
<a-divider type="vertical" />
<a-popconfirm
title="确定要删除此记录吗?"
@confirm="remove(record)"
>
<a class="ele-text-danger">删除</a>
</a-popconfirm>
</a-space>
</template>
</template>
</ele-pro-table>
</a-card>
<!-- 编辑弹窗 -->
<CreditUserEdit v-model:visible="showEdit" :data="current" @done="reload" />
<!-- 编辑弹窗 -->
<CreditUserEdit v-model:visible="showEdit" :data="current" @done="reload" />
<!-- 导入弹窗 -->
<CreditUserImport v-model:visible="showImport" @done="reload" />
</a-page-header>
</template>
<script lang="ts" setup>
import { createVNode, ref, computed } from 'vue';
import { createVNode, ref } from 'vue';
import { message, Modal } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import type { EleProTable } from 'ele-admin-pro';
@@ -61,6 +65,7 @@
import Search from './components/search.vue';
import {getPageTitle} from '@/utils/common';
import CreditUserEdit from './components/creditUserEdit.vue';
import CreditUserImport from './components/credit-user-import.vue';
import { pageCreditUser, removeCreditUser, removeBatchCreditUser } from '@/api/credit/creditUser';
import type { CreditUser, CreditUserParam } from '@/api/credit/creditUser/model';
@@ -73,24 +78,30 @@
const current = ref<CreditUser | null>(null);
// 是否显示编辑弹窗
const showEdit = ref(false);
// 是否显示导入弹窗
const showImport = ref(false);
// 是否显示批量移动弹窗
const showMove = ref(false);
// 加载状态
const loading = ref(true);
// 搜索关键词
const searchText = ref('');
// 表格数据源
const datasource: DatasourceFunction = ({
page,
limit,
where,
where = {},
orders,
filters
}) => {
const params: CreditUserParam = { ...where };
if (filters) {
where.status = filters.status;
(params as any).status = filters.status;
}
if (!params.keywords && searchText.value) {
params.keywords = searchText.value;
}
return pageCreditUser({
...where,
...params,
...orders,
page,
limit
@@ -263,8 +274,12 @@
/* 搜索 */
const reload = (where?: CreditUserParam) => {
if (where && Object.prototype.hasOwnProperty.call(where, 'keywords')) {
searchText.value = where.keywords ?? '';
}
const targetWhere = where ?? { keywords: searchText.value || undefined };
selection.value = [];
tableRef?.value?.reload({ where: where });
tableRef?.value?.reload({ where: targetWhere });
};
/* 打开编辑弹窗 */
@@ -273,6 +288,11 @@
showEdit.value = true;
};
/* 打开导入弹窗 */
const openImport = () => {
showImport.value = true;
};
/* 打开批量移动弹窗 */
const openMove = () => {
showMove.value = true;
@@ -320,11 +340,6 @@
});
};
/* 查询 */
const query = () => {
loading.value = true;
};
/* 自定义行属性 */
const customRow = (record: CreditUser) => {
return {
@@ -338,7 +353,6 @@
}
};
};
query();
</script>
<script lang="ts">

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,88 @@
<!-- 经销商申请批量导入弹窗 -->
<template>
<ele-modal
:width="520"
:footer="null"
title="经销商申请批量导入"
:visible="visible"
@update:visible="updateVisible"
>
<a-spin :spinning="loading">
<a-upload-dragger
accept=".xls,.xlsx"
:show-upload-list="false"
:customRequest="doUpload"
style="padding: 24px 0; margin-bottom: 16px"
>
<p class="ant-upload-drag-icon">
<cloud-upload-outlined />
</p>
<p class="ant-upload-hint">将文件拖到此处或点击上传</p>
</a-upload-dragger>
</a-spin>
<div class="ele-text-center">
<span>只能上传xlsxlsx文件</span>
<a
href="https://cms-api.websoft.top/api/shop/shop-dealer-apply/import/template"
download="经销商申请导入模板.xlsx"
>
下载导入模板
</a>
</div>
</ele-modal>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { message } from 'ant-design-vue/es';
import { CloudUploadOutlined } from '@ant-design/icons-vue';
import { importShopDealerApplies } from '@/api/shop/shopDealerApply';
const emit = defineEmits<{
(e: 'done'): void;
(e: 'update:visible', visible: boolean): void;
}>();
defineProps<{
// 是否打开弹窗
visible: boolean;
}>();
// 导入请求状态
const loading = ref(false);
/* 上传 */
const doUpload = ({ file }) => {
if (
![
'application/vnd.ms-excel',
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
].includes(file.type)
) {
message.error('只能选择 excel 文件');
return false;
}
if (file.size / 1024 / 1024 > 10) {
message.error('大小不能超过 10MB');
return false;
}
loading.value = true;
importShopDealerApplies(file)
.then((msg) => {
loading.value = false;
message.success(msg);
updateVisible(false);
emit('done');
})
.catch((e) => {
loading.value = false;
message.error(e.message);
});
return false;
};
/* 更新 visible */
const updateVisible = (value: boolean) => {
emit('update:visible', value);
};
</script>

View File

@@ -0,0 +1,280 @@
<!-- 编辑弹窗 -->
<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="dealerName">
<a-input
placeholder="请输入企业名称"
v-model:value="form.dealerName"
/>
</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,
dealerName: '',
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({
dealerName: [
{
required: true,
message: '请输入经销商名称',
trigger: 'blur'
}
],
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,310 @@
<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"
/>
<!-- 导入弹窗 -->
<ShopDealerApplyImport v-model:visible="showImport" @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 ShopDealerApplyImport from './components/shop-dealer-apply-import.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: 'dealerName',
align: 'dealerName',
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

@@ -0,0 +1,68 @@
<template>
<a-table :columns="columns" :data-source="data" :pagination="false">
<template #bodyCell="{ column, text }">
</template>
<template #footer>
<div class="text-red-500 gap-3">
<div>登录账号u_{{ loginUser.userId }}</div>
<div>初始密码123456</div>
</div>
</template>
</a-table>
</template>
<script lang="ts" setup>
import {computed, ref} from 'vue';
import {useUserStore} from "@/store/modules/user";
import {CmsWebsite} from "@/api/cms/cmsWebsite/model";
import {getSiteInfo} from "@/api/layout";
const userStore = useUserStore();// 当前用户信息
const loginUser = computed(() => userStore.info ?? {});
const website = ref<CmsWebsite>()
const columns = [
{
title: '仓库名称',
dataIndex: 'name',
key: 'name',
},
{
title: '仓库地址',
className: 'column-money',
dataIndex: 'url',
key: 'url',
},
{
title: '备注',
dataIndex: 'comments',
},
];
const data = [
{
key: '1',
name: '服务端',
url: 'https://git.websoft.top/gxwebsoft/mp-java.git',
comments: '基于 Spring Boot + MyBatis Plus 的企业级后端API服务',
},
{
key: '2',
name: '管理端',
url: 'https://code.websoft.top/gxwebsoft/mp-vue.git',
comments: '基于 Vue 3 + Ant Design Vue 的企业级后台管理系统',
},
{
key: '3',
name: '应用端',
url: 'https://git.websoft.top/gxwebsoft/template-10559.git',
comments: '基于 Taro + React + TypeScript 的跨平台小程序应用',
},
];
const reload = async () => {
website.value = await getSiteInfo();
};
reload()
</script>

View File

@@ -0,0 +1,68 @@
<template>
<a-table :columns="columns" :data-source="data" :pagination="false">
<template #bodyCell="{ column, text }">
</template>
<template #footer>
<div class="text-red-500 gap-3">
<div>登录账号u_{{ loginUser.userId }}</div>
<div>初始密码123456</div>
</div>
</template>
</a-table>
</template>
<script lang="ts" setup>
import {computed, ref} from 'vue';
import {useUserStore} from "@/store/modules/user";
import {CmsWebsite} from "@/api/cms/cmsWebsite/model";
import {getSiteInfo} from "@/api/layout";
const userStore = useUserStore();// 当前用户信息
const loginUser = computed(() => userStore.info ?? {});
const website = ref<CmsWebsite>()
const columns = [
{
title: '名称',
dataIndex: 'name',
key: 'name',
},
{
title: '内容',
className: 'column-money',
dataIndex: 'url',
key: 'url',
},
{
title: '备注',
dataIndex: 'comments',
},
];
const data = [
{
key: '1',
name: '服务端',
url: 'https://git.websoft.top/gxwebsoft/mp-java.git',
comments: '基于 Spring Boot + MyBatis Plus 的企业级后端API服务',
},
{
key: '2',
name: '管理端',
url: 'https://code.websoft.top/gxwebsoft/mp-vue.git',
comments: '基于 Vue 3 + Ant Design Vue 的企业级后台管理系统',
},
{
key: '3',
name: '应用端',
url: 'https://git.websoft.top/gxwebsoft/template-10559.git',
comments: '基于 Taro + React + TypeScript 的跨平台小程序应用',
},
];
const reload = async () => {
website.value = await getSiteInfo();
};
reload()
</script>

View File

@@ -0,0 +1,28 @@
<template>
<a-descriptions>
<a-descriptions-item label="公网IP">
<a-tag>1.14.159.185</a-tag>
</a-descriptions-item>
<a-descriptions label="服务器厂商">
<a-tag>阿里云</a-tag>
</a-descriptions>
<a-descriptions-item label="到期时间">
<a-tag>2025-09-01 00:00:00</a-tag>
</a-descriptions-item>
<a-descriptions-item label="面板">
<div class="flex flex-col gap-2">
<a-tag>https://1.14.159.185:9000/cproot/</a-tag>
<a-tag>vo0wowwj</a-tag>
<a-tag>LWM6B5NbAP</a-tag>
</div>
</a-descriptions-item>
</a-descriptions>
</template>
<script lang="ts" setup>
import {computed} from 'vue';
import {useUserStore} from "@/store/modules/user";
const userStore = useUserStore();// 当前用户信息
const loginUser = computed(() => userStore.info ?? {});
</script>

View File

@@ -0,0 +1,46 @@
<template>
<a-descriptions v-if="website">
<a-descriptions label="系统名称">
<a-tag>{{ website?.appName }}</a-tag>
</a-descriptions>
<a-descriptions-item label="后台管理">
<a-tag>https://mp.websoft.top</a-tag>
</a-descriptions-item>
<a-descriptions-item label="API">
<a-tag>https://cms-api.websoft.top/api</a-tag>
</a-descriptions-item>
<a-descriptions-item label="租户ID">
<a-tag>{{ website.appId }}</a-tag>
</a-descriptions-item>
<a-descriptions-item label="超管账号">
<a-tag>superAdmin</a-tag>
<a-tag>vo0wowwj</a-tag>
</a-descriptions-item>
<a-descriptions-item label="域名" v-if="website?.domain">
<a-tag>{{ website?.domain }}</a-tag>
</a-descriptions-item>
<a-descriptions-item label="到期时间">
<a-tag>{{ website?.expirationTime }}</a-tag>
</a-descriptions-item>
<!-- <a-descriptions-item label="开发">-->
<!-- {{ website }}-->
<!-- </a-descriptions-item>-->
</a-descriptions>
</template>
<script lang="ts" setup>
import {computed, ref} from 'vue';
import {useUserStore} from "@/store/modules/user";
import {getSiteInfo} from "@/api/layout";
import {CmsWebsite} from "@/api/cms/cmsWebsite/model";
const userStore = useUserStore();// 当前用户信息
const loginUser = computed(() => userStore.info ?? {});
const website = ref<CmsWebsite>()
const reload = async () => {
website.value = await getSiteInfo();
};
reload()
</script>

View File

@@ -0,0 +1,34 @@
<template>
<a-page-header :title="getPageTitle()" @back="() => $router.go(-1)">
<a-card title="租户信息" style="margin-bottom: 20px">
<template #extra>
<a-button>编辑</a-button>
</template>
<TenantInfo/>
</a-card>
<a-card title="服务器信息" style="margin-bottom: 20px">
<ServerInfo/>
</a-card>
<a-card title="源代码" style="margin-bottom: 20px">
<CodeInfo/>
</a-card>
<a-card title="其他信息" style="margin-bottom: 20px">
<ParamInfo />
</a-card>
</a-page-header>
</template>
<script lang="ts" setup>
import {getPageTitle, push} from "@/utils/common";
import TenantInfo from './components/TenantInfo.vue'
import ServerInfo from './components/ServerInfo.vue'
import CodeInfo from "./components/CodeInfo.vue";
import ParamInfo from "./components/ParamInfo.vue";
</script>
<script lang="ts">
export default {
name: 'SystemDeveloper'
};
</script>