selfAudit.vue 33 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930
  1. <template>
  2. <div class="p-2">
  3. <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
  4. <div v-show="showSearch" class="mb-[10px]">
  5. <el-card shadow="hover">
  6. <el-form ref="queryFormRef" :model="queryParams" label-width="90px">
  7. <el-row :gutter="20">
  8. <el-col :span="6">
  9. <el-form-item label="商品编号" prop="productNo">
  10. <el-input v-model="queryParams.productNo" placeholder="请输入商品编号" clearable @keyup.enter="handleQuery" />
  11. </el-form-item>
  12. </el-col>
  13. <el-col :span="6">
  14. <el-form-item label="商品名称" prop="itemName">
  15. <el-input v-model="queryParams.itemName" placeholder="请输入商品名称" clearable @keyup.enter="handleQuery" />
  16. </el-form-item>
  17. </el-col>
  18. <el-col :span="6">
  19. <el-form-item label="商品品牌" prop="brandId">
  20. <el-select
  21. v-model="queryParams.brandId"
  22. placeholder="请输入品牌名称搜索"
  23. filterable
  24. remote
  25. clearable
  26. :remote-method="handleBrandSearch"
  27. :loading="brandLoading"
  28. style="width: 100%"
  29. @keyup.enter="handleQuery"
  30. >
  31. <el-option v-for="item in brandOptions" :key="item.id" :label="item.brandName" :value="item.id" />
  32. </el-select>
  33. </el-form-item>
  34. </el-col>
  35. <el-col :span="6">
  36. <el-form-item label="上下架状态" prop="productStatus">
  37. <el-select v-model="queryParams.productStatus" placeholder="请选择" clearable>
  38. <el-option label="已上架" :value="1" />
  39. <el-option label="下架" :value="0" />
  40. <el-option label="上架中" :value="2" />
  41. <el-option label="驳回上架" :value="3" />
  42. </el-select>
  43. </el-form-item>
  44. </el-col>
  45. </el-row>
  46. <el-row :gutter="20">
  47. <el-col :span="6">
  48. <el-form-item label="商品类型" prop="bottomCategoryId">
  49. <el-tree-select
  50. v-model="queryParams.bottomCategoryId"
  51. :data="categoryOptions"
  52. :props="{ value: 'id', label: 'label', children: 'children' } as any"
  53. value-key="id"
  54. placeholder="请选择商品类型"
  55. clearable
  56. check-strictly
  57. />
  58. </el-form-item>
  59. </el-col>
  60. <el-col :span="18">
  61. <el-form-item label="商品分类">
  62. <category-cascade-select
  63. ref="categoryCascadeRef"
  64. v-model:top-category-id="queryParams.topCategoryId"
  65. v-model:medium-category-id="queryParams.mediumCategoryId"
  66. v-model:bottom-category-id="queryParams.bottomCategoryId"
  67. />
  68. </el-form-item>
  69. </el-col>
  70. </el-row>
  71. <el-row>
  72. <el-col :span="24" class="text-left">
  73. <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
  74. <el-button icon="Refresh" @click="resetQuery">重置</el-button>
  75. </el-col>
  76. </el-row>
  77. </el-form>
  78. </el-card>
  79. </div>
  80. </transition>
  81. <!-- 统计信息区域 -->
  82. <el-card shadow="never" class="mb-[10px]">
  83. <div class="flex items-center text-sm text-gray-600">
  84. <span>商品总数: </span>
  85. <span class="text-blue-600 mx-1"
  86. >总=<span class="text-red-600">{{ statistics.total || 0 }}</span
  87. >条</span
  88. >
  89. <span class="mx-2">【上架/总数({{ statistics.onSale || 0 }}/{{ statistics.total || 0 }})】</span>
  90. <span class="mx-2"
  91. >审核状态: 待审核<span class="text-red-600">{{ statistics.waitAudit || 0 }}</span
  92. >条,通过<span class="text-green-600">{{ statistics.auditPass || 0 }}</span
  93. >条,驳回<span class="text-orange-600">{{ statistics.auditReject || 0 }}</span
  94. >条</span
  95. >
  96. <span class="mx-2"
  97. >上下架状态: 已上架<span class="text-green-600">{{ statistics.onSale || 0 }}</span
  98. >条,下架<span class="text-gray-600">{{ statistics.offSale || 0 }}</span
  99. >条</span
  100. >
  101. <div class="ml-auto flex gap-2">
  102. <el-button plain icon="Download" @click="handleExport">导出</el-button>
  103. <el-button circle icon="Refresh" @click="getList"></el-button>
  104. </div>
  105. </div>
  106. </el-card>
  107. <el-card shadow="never">
  108. <!-- 批量操作工具栏 -->
  109. <div class="mb-2 flex items-center gap-2">
  110. <span class="text-sm text-gray-500">已选 <span class="text-blue-600 font-bold">{{ selectedRows.length }}</span> 条</span>
  111. <el-button type="success" plain size="small" icon="Check" @click="handleBatchAudit">批量审核通过</el-button>
  112. <el-button type="danger" plain size="small" icon="Close" @click="handleBatchReject">批量驳回</el-button>
  113. </div>
  114. <el-table v-loading="loading" border :data="baseList" @selection-change="handleSelectionChange">
  115. <el-table-column type="selection" width="55" align="center" />
  116. <el-table-column label="入池名称" align="center" prop="name" width="100" fixed="left"/>
  117. <el-table-column label="商品编号" align="center" prop="productNo" width="120" >
  118. <template #default="scope">
  119. <el-link type="primary" @click="handleView(scope.row)">{{ scope.row.productNo }}</el-link>
  120. </template>
  121. </el-table-column>
  122. <el-table-column label="商品图片" align="center" prop="productImage" width="100">
  123. <template #default="scope">
  124. <image-preview :src="scope.row.productImage" :width="60" :height="60" />
  125. </template>
  126. </el-table-column>
  127. <el-table-column label="商品信息" align="center" min-width="250">
  128. <template #default="scope">
  129. <div class="text-left">
  130. <div style="white-space: normal; word-break: break-all; line-height: 1.4">{{ scope.row.itemName }}</div>
  131. <div class="text-gray-500" style="font-size: 12px">品牌: {{ scope.row.brandName || '-' }}</div>
  132. <div class="text-gray-500" style="font-size: 12px">分类: {{ scope.row.topCategoryName+'-'+scope.row.mediumCategoryName+'-'+ scope.row.bottomCategoryName}}</div>
  133. </div>
  134. </template>
  135. </el-table-column>
  136. <el-table-column label="单位" align="center" width="100">
  137. <template #default="scope">
  138. <div class="text-left">
  139. <div class="text-gray-500" style="font-size: 12px">单位: {{ scope.row.unitName || '-' }}</div>
  140. <div class="text-gray-500" style="font-size: 12px">起订量: {{ scope.row.minOrderQuantity || '-' }}</div>
  141. </div>
  142. </template>
  143. </el-table-column>
  144. <el-table-column label="价格信息" align="center" width="120">
  145. <template #default="scope">
  146. <div class="text-left" style="font-size: 12px">
  147. <div>
  148. <span class="text-gray-500">市场价:</span>
  149. <span class="text-red-500">¥{{ scope.row.marketPrice || '0.00' }}</span>
  150. </div>
  151. <div>
  152. <span class="text-gray-500">官网价:</span>
  153. <span class="text-red-500">¥{{ scope.row.memberPrice || '0.00' }}</span>
  154. </div>
  155. <div>
  156. <span class="text-gray-500">最低价:</span>
  157. <span class="text-red-500">¥{{ scope.row.minSellingPrice || '0.00' }}</span>
  158. </div>
  159. </div>
  160. </template>
  161. </el-table-column>
  162. <el-table-column label="采购信息" align="center" width="150">
  163. <template #default="scope">
  164. <div class="text-left" style="font-size: 12px">
  165. <div>
  166. <span class="text-gray-500">采购价:</span>
  167. <span>¥{{ scope.row.purchasingPrice || '0.00' }}</span>
  168. </div>
  169. <div>
  170. <span class="text-gray-500">暂估毛利率:</span>
  171. <span>{{ scope.row.memberPrice ? (((scope.row.memberPrice - (scope.row.purchasingPrice || 0)) / scope.row.memberPrice) * 100).toFixed(2) : '0.00' }}%</span>
  172. </div>
  173. </div>
  174. </template>
  175. </el-table-column>
  176. <el-table-column label="商品类型" align="center" width="140">
  177. <template #default="scope">
  178. <div class="text-left" style="font-size: 12px">
  179. <div>
  180. <span class="text-gray-500">总库存:</span>
  181. <span>{{ scope.row.totalInventory ?? '-' }}</span>
  182. </div>
  183. <div>
  184. <span class="text-gray-500">可用库存:</span>
  185. <span>{{ scope.row.nowInventory ?? '-' }}</span>
  186. </div>
  187. <div>
  188. <span class="text-gray-500">虚拟库存:</span>
  189. <span>{{ scope.row.virtualInventory ?? '-' }}</span>
  190. </div>
  191. </div>
  192. </template>
  193. </el-table-column>
  194. <el-table-column label="是否自营" align="center" width="80">
  195. <template #default="scope">
  196. <span v-if="scope.row.isSelf === 1">是</span>
  197. <span v-else-if="scope.row.isSelf === 0">否</span>
  198. <span v-else>-</span>
  199. </template>
  200. </el-table-column>
  201. <el-table-column label="上下架状态" align="center" prop="productStatus" width="100">
  202. <template #default="scope">
  203. <el-tag v-if="scope.row.productStatus === 1" type="success">已上架</el-tag>
  204. <el-tag v-else-if="scope.row.productStatus === 0" type="warning">下架</el-tag>
  205. <el-tag v-else-if="scope.row.productStatus === 2" type="info">上架中</el-tag>
  206. <el-tag v-else type="info">未知</el-tag>
  207. </template>
  208. </el-table-column>
  209. <el-table-column label="申请类型" align="center" prop="type" width="100">
  210. <template #default="scope">
  211. <el-tag v-if="scope.row.type === 0" type="success">新增</el-tag>
  212. <el-tag v-else-if="scope.row.type === 1" type="warning">移出</el-tag>
  213. <el-tag v-else type="info">未知</el-tag>
  214. </template>
  215. </el-table-column>
  216. <el-table-column label="操作" align="center" width="150" fixed="right">
  217. <template #default="scope">
  218. <div class="flex gap-1 justify-center">
  219. <el-link type="primary" :underline="false" @click="handleViewDetail(scope.row)">查看</el-link>
  220. <el-link type="success" :underline="false" @click="handleAudit(scope.row)">审核</el-link>
  221. <el-link type="danger" :underline="false" @click="handleReject(scope.row)">驳回</el-link>
  222. </div>
  223. </template>
  224. </el-table-column>
  225. </el-table>
  226. <!-- 游标分页控制 -->
  227. <pagination
  228. v-show="baseList.length > 0"
  229. v-model:page="queryParams.pageNum"
  230. v-model:limit="queryParams.pageSize"
  231. v-model:way="queryParams.way"
  232. :cursor-mode="true"
  233. :has-more="hasMore"
  234. @pagination="getList"
  235. />
  236. </el-card>
  237. <!-- 产品详情抽屉 -->
  238. <product-detail-drawer
  239. v-model="detailDrawer.visible"
  240. :id="detailDrawer.id"
  241. />
  242. <!-- 库存修改弹框 -->
  243. <el-dialog v-model="inventoryDialog.visible" title="修改库存" width="500px" :close-on-click-modal="false">
  244. <div v-loading="inventoryDialog.loading">
  245. <el-form ref="inventoryFormRef" :model="inventoryForm" :rules="inventoryRules" label-width="110px">
  246. <el-form-item label="虚拟库存" prop="virtualInventory">
  247. <el-input-number
  248. v-model="inventoryForm.virtualInventory"
  249. :min="0"
  250. :precision="0"
  251. controls-position="right"
  252. style="width: 100%"
  253. placeholder="请输入虚拟库存"
  254. />
  255. </el-form-item>
  256. </el-form>
  257. </div>
  258. <template #footer>
  259. <el-button @click="inventoryDialog.visible = false">取消</el-button>
  260. <el-button type="primary" :loading="inventoryDialog.submitLoading" @click="submitInventory">确定</el-button>
  261. </template>
  262. </el-dialog>
  263. </div>
  264. </template>
  265. <script setup name="Base" lang="ts">
  266. import ProductDetailDrawer from './ProductDetailDrawer.vue';
  267. import {
  268. getBase,
  269. delBase,
  270. brandList,
  271. updateBase,
  272. categoryTree,
  273. shelfReview,
  274. changeProductType,
  275. getProductStatusCount
  276. } from '@/api/product/base';
  277. import { selectPoolAuditProductPage, audit, batchAudit } from '@/api/product/poolAudit';
  278. import { ProductListVO } from '@/api/product/poolAudit/types';
  279. import { generatePPT } from '@/utils/pptPlugin';
  280. import { addProductSelf } from '@/api/product/productSelf';
  281. import { addProductExquisite } from '@/api/product/productExquisite';
  282. import { PriceInventoryForm } from '@/api/product/priceInventory/types';
  283. import { BaseVO, BaseQuery, BaseForm, StatusCountVo } from '@/api/product/base/types';
  284. import { BrandVO } from '@/api/product/brand/types';
  285. import { listBrand } from '@/api/product/brand';
  286. import { categoryTreeVO } from '@/api/product/category/types';
  287. import { useRoute, useRouter } from 'vue-router';
  288. const { proxy } = getCurrentInstance() as ComponentInternalInstance;
  289. const router = useRouter();
  290. const route = useRoute();
  291. const baseList = ref<ProductListVO[]>([]);
  292. const buttonLoading = ref(false);
  293. const loading = ref(true);
  294. const showSearch = ref(true);
  295. const ids = ref<Array<string | number>>([]);
  296. const selectedRows = ref<ProductListVO[]>([]);
  297. const single = ref(true);
  298. const multiple = ref(true);
  299. const total = ref(0);
  300. const categoryOptions = ref<categoryTreeVO[]>([]);
  301. const brandOptions = ref<BrandVO[]>([]);
  302. const brandLoading = ref(false);
  303. let brandSearchTimer: ReturnType<typeof setTimeout> | null = null;
  304. const hasMore = ref(true); // 是否还有更多数据
  305. // 页面历史记录,存储每页的第一个id和最后一个id,用于支持双向翻页
  306. const pageHistory = ref([]);
  307. // 分类相关
  308. const categoryCascadeRef = ref();
  309. // 统计信息
  310. const statistics = ref<StatusCountVo>({
  311. total: 0,
  312. onSale: 0,
  313. offSale: 0,
  314. waitAudit: 0,
  315. auditPass: 0,
  316. auditReject: 0
  317. });
  318. const queryFormRef = ref<ElFormInstance>();
  319. const baseFormRef = ref<ElFormInstance>();
  320. const dialog = reactive<DialogOption>({
  321. visible: false,
  322. title: ''
  323. });
  324. const initFormData: BaseForm = {
  325. id: undefined,
  326. productNo: undefined,
  327. itemName: undefined,
  328. brandId: undefined,
  329. topCategoryId: undefined,
  330. mediumCategoryId: undefined,
  331. bottomCategoryId: undefined,
  332. unitId: undefined,
  333. productImage: undefined,
  334. isSelf: undefined,
  335. productReviewStatus: undefined,
  336. homeRecommended: undefined,
  337. categoryRecommendation: undefined,
  338. cartRecommendation: undefined,
  339. recommendedProductOrder: undefined,
  340. isPopular: undefined,
  341. isNew: undefined,
  342. productStatus: undefined,
  343. remark: undefined
  344. };
  345. const data = reactive<PageData<BaseForm, BaseQuery>>({
  346. form: { ...initFormData },
  347. queryParams: {
  348. pageNum: 1,
  349. pageSize: 10,
  350. productNo: undefined,
  351. itemName: undefined,
  352. brandId: undefined,
  353. productTag: undefined,
  354. purchaseNature: undefined,
  355. supplierType: undefined,
  356. supplierNature: undefined,
  357. projectOrg: undefined,
  358. topCategoryId: undefined,
  359. mediumCategoryId: undefined,
  360. bottomCategoryId: undefined,
  361. isSelf: 1,
  362. productReviewStatus: undefined,
  363. productStatus: undefined,
  364. lastSeenId: undefined, // 游标分页的lastSeenId
  365. way: undefined,
  366. params: {}
  367. },
  368. rules: {
  369. productNo: [{ required: true, message: '产品编号不能为空', trigger: 'blur' }],
  370. itemName: [{ required: true, message: '项目名称不能为空', trigger: 'blur' }],
  371. brandId: [{ required: true, message: '品牌id不能为空', trigger: 'blur' }],
  372. topCategoryId: [{ required: true, message: '顶级分类id不能为空', trigger: 'blur' }],
  373. mediumCategoryId: [{ required: true, message: '中级分类id不能为空', trigger: 'blur' }],
  374. bottomCategoryId: [{ required: true, message: '底层分类id不能为空', trigger: 'blur' }],
  375. unitId: [{ required: true, message: '单位id不能为空', trigger: 'blur' }],
  376. productImage: [{ required: true, message: '产品图片URL不能为空', trigger: 'blur' }],
  377. productReviewStatus: [{ required: true, message: '产品审核状态 0=待采购审核,1=审核通过,2=驳回,3=待营销审核不能为空', trigger: 'change' }],
  378. homeRecommended: [{ required: true, message: '首页推荐:1=推荐,0=不推荐不能为空', trigger: 'blur' }],
  379. categoryRecommendation: [{ required: true, message: '分类推荐:1=推荐,0=不推荐不能为空', trigger: 'blur' }],
  380. cartRecommendation: [{ required: true, message: '购物车推荐:1=推荐,0=不推荐不能为空', trigger: 'blur' }],
  381. recommendedProductOrder: [{ required: true, message: '推荐产品顺序不能为空', trigger: 'blur' }],
  382. isPopular: [{ required: true, message: '是否热门:1=是,0=否不能为空', trigger: 'blur' }],
  383. isNew: [{ required: true, message: '是否新品:1=是,0=否不能为空', trigger: 'blur' }],
  384. remark: [{ required: true, message: '备注不能为空', trigger: 'blur' }]
  385. }
  386. });
  387. const { queryParams, form, rules } = toRefs(data);
  388. /** 查询产品基础信息列表 */
  389. const getList = async () => {
  390. loading.value = true;
  391. try {
  392. initRouteParams();
  393. const params = { ...queryParams.value };
  394. const currentPageNum = queryParams.value.pageNum;
  395. // 第一页不需要游标参数
  396. if (currentPageNum === 1) {
  397. delete params.lastSeenId;
  398. delete params.way;
  399. } else {
  400. // way参数:0=上一页,1=下一页
  401. if (queryParams.value.way === 0) {
  402. // 上一页:使用目标页(即当前显示页)的firstId
  403. const nextPageHistory = pageHistory.value[currentPageNum];
  404. if (nextPageHistory) {
  405. params.firstSeenId = nextPageHistory.firstId;
  406. params.way = 0;
  407. }
  408. } else {
  409. // 下一页:使用前一页的lastId作为lastSeenId
  410. const prevPageHistory = pageHistory.value[currentPageNum - 1];
  411. if (prevPageHistory) {
  412. params.lastSeenId = prevPageHistory.lastId;
  413. params.way = 1;
  414. }
  415. }
  416. }
  417. const res = await selectPoolAuditProductPage({ ...params, poolType: 0 }); // 自营产品池
  418. baseList.value = res.rows || [];
  419. // 判断是否还有更多数据
  420. hasMore.value = baseList.value.length === queryParams.value.pageSize;
  421. // 记录当前页的第一个id和最后一个id
  422. if (baseList.value.length > 0) {
  423. const firstItem = baseList.value[0];
  424. const lastItem = baseList.value[baseList.value.length - 1];
  425. //如果长度小于currentPageNum则创建
  426. if (pageHistory.value.length <= currentPageNum) {
  427. pageHistory.value[currentPageNum] = {
  428. firstId: firstItem.id,
  429. lastId: lastItem.id
  430. };
  431. }
  432. }
  433. total.value = res.total || 0;
  434. } catch (error) {
  435. console.error('获取列表失败:', error);
  436. } finally {
  437. loading.value = false;
  438. }
  439. };
  440. /** 取消按钮 */
  441. const cancel = () => {
  442. reset();
  443. dialog.visible = false;
  444. };
  445. /** 初始化路由参数 */
  446. const initRouteParams = () => {
  447. // 从路由参数中获取筛选条件
  448. if (route.query.productReviewStatus) {
  449. queryParams.value.productReviewStatus = Number(route.query.productReviewStatus);
  450. }
  451. if (route.query.brandName) {
  452. queryParams.value.brandName = route.query.brandName as string;
  453. }
  454. if (route.query.bottomCategoryId) {
  455. queryParams.value.bottomCategoryId = route.query.bottomCategoryId as string;
  456. }
  457. if (route.query.isSelf) {
  458. queryParams.value.isSelf = Number(route.query.isSelf);
  459. }
  460. if (route.query.productCategory) {
  461. queryParams.value.productCategory = Number(route.query.productCategory);
  462. }
  463. };
  464. /** 表单重置 */
  465. const reset = () => {
  466. form.value = { ...initFormData };
  467. baseFormRef.value?.resetFields();
  468. };
  469. /** 搜索按钮操作 */
  470. const handleQuery = () => {
  471. // 同步查询参数到游标分页参数
  472. queryParams.value = {
  473. ...queryParams.value,
  474. pageNum: 1,
  475. productNo: queryParams.value.productNo,
  476. itemName: queryParams.value.itemName,
  477. brandName: queryParams.value.brandName,
  478. bottomCategoryId: queryParams.value.bottomCategoryId,
  479. isSelf: queryParams.value.isSelf,
  480. productReviewStatus: queryParams.value.productReviewStatus,
  481. productStatus: queryParams.value.productStatus,
  482. lastSeenId: undefined
  483. };
  484. pageHistory.value = []; // 重置页面历史
  485. getList();
  486. };
  487. /** 重置按钮操作 */
  488. const resetQuery = () => {
  489. queryFormRef.value?.resetFields();
  490. // 手动重置分类字段
  491. queryParams.value.topCategoryId = undefined;
  492. queryParams.value.mediumCategoryId = undefined;
  493. queryParams.value.bottomCategoryId = undefined;
  494. categoryCascadeRef.value?.reset();
  495. queryParams.value.lastSeenId = undefined;
  496. pageHistory.value = []; // 重置页面历史
  497. handleQuery();
  498. };
  499. /** 多选框选中数据 */
  500. const handleSelectionChange = (selection: ProductListVO[]) => {
  501. ids.value = selection.map((item) => item.id);
  502. selectedRows.value = selection;
  503. single.value = selection.length != 1;
  504. multiple.value = !selection.length;
  505. };
  506. /** 新增按钮操作 */
  507. const handleAdd = () => {
  508. router.push('/product/base/add');
  509. };
  510. /** 产品详情抽屉 */
  511. const detailDrawer = reactive({
  512. visible: false,
  513. id: undefined as string | number | undefined
  514. });
  515. /** 查看产品详情 */
  516. const handleViewDetail = (row: ProductListVO) => {
  517. detailDrawer.id = row.id;
  518. detailDrawer.visible = true;
  519. };
  520. /** 修改按钮操作 */
  521. const handleUpdate = async (row?: BaseVO) => {
  522. const _id = row?.id || ids.value[0];
  523. router.push(`/product/base/edit/${_id}`);
  524. };
  525. /** 删除按钮操作 */
  526. const handleDelete = async (row?: BaseVO) => {
  527. const _ids = row?.id || ids.value;
  528. await proxy?.$modal.confirm('是否确认删除产品基础信息编号为"' + _ids + '"的数据项?').finally(() => (loading.value = false));
  529. await delBase(_ids);
  530. proxy?.$modal.msgSuccess('删除成功');
  531. await getList();
  532. };
  533. /** 导出按钮操作 */
  534. const handleExport = async () => {
  535. // 检查是否有选中的商品
  536. if (ids.value.length === 0) {
  537. proxy?.$modal.msgWarning('请先选择要导出的商品');
  538. return;
  539. }
  540. // 获取选中商品的完整信息
  541. const selectedProducts = baseList.value.filter(item => ids.value.includes(item.id));
  542. if (selectedProducts.length === 0) {
  543. proxy?.$modal.msgWarning('未找到选中的商品信息');
  544. return;
  545. }
  546. // 转换为 generatePPT 需要的格式
  547. const products = selectedProducts.map(item => ({
  548. image: item.productImage || item.productImageUrl || '',
  549. name: item.itemName || '',
  550. code: item.productNo || '',
  551. spec: item.specification || item.packagingSpec || '-',
  552. price: item.minSellingPrice || item.memberPrice || 0
  553. }));
  554. // 默认模板配置
  555. const template = {
  556. name: '商品展示方案',
  557. title: '商品展示方案',
  558. themeColor: '#C00000',
  559. itemsPerPage: 1, // 每页1个商品,展示更详细
  560. cover: '',
  561. logo: ''
  562. };
  563. try {
  564. proxy?.$modal.loading('正在生成PPT...');
  565. await generatePPT(template, products);
  566. proxy?.$modal.closeLoading();
  567. proxy?.$modal.msgSuccess('PPT导出成功');
  568. } catch (error) {
  569. proxy?.$modal.closeLoading();
  570. console.error('PPT导出失败:', error);
  571. proxy?.$modal.msgError('PPT导出失败');
  572. }
  573. };
  574. /** 查看商品详情 */
  575. const handleView = (row: BaseVO) => {
  576. const url = `https://item.xiaoluwebsite.xyz/item?id=${row.id}`;
  577. window.open(url, '_blank');
  578. };
  579. /** 上下架操作 */
  580. const handleShelf = async (row: BaseVO) => {
  581. const isOnShelf = row.productStatus === 1;
  582. const action = isOnShelf ? '下架' : '上架';
  583. await proxy?.$modal.confirm(`确认${action}该商品吗?`);
  584. try {
  585. // 上架:状态改为2(上架中),下架:状态改为0(下架)
  586. const productStatus = isOnShelf ? 0 : 2;
  587. await shelfReview({
  588. id: row.id,
  589. productStatus: productStatus,
  590. shelfComments: `${action}操作`
  591. });
  592. proxy?.$modal.msgSuccess(`${action}成功`);
  593. await getList();
  594. } catch (error) {
  595. console.error(`${action}失败:`, error);
  596. proxy?.$modal.msgError(`${action}失败`);
  597. }
  598. };
  599. /** 库存修改弹框 */
  600. const inventoryDialog = reactive({
  601. visible: false,
  602. loading: false,
  603. submitLoading: false
  604. });
  605. const inventoryFormRef = ref<ElFormInstance>();
  606. const inventoryForm = reactive<PriceInventoryForm>({
  607. productId: undefined,
  608. totalInventory: undefined,
  609. nowInventory: undefined,
  610. virtualInventory: undefined
  611. });
  612. const inventoryRules = {
  613. totalInventory: [{ required: true, message: '总库存不能为空', trigger: 'blur' }],
  614. nowInventory: [{ required: true, message: '当前可用库存不能为空', trigger: 'blur' }],
  615. virtualInventory: [{ required: true, message: '虚拟库存不能为空', trigger: 'blur' }]
  616. };
  617. /** 打开库存修改弹框 */
  618. const handleSupply = async (row: BaseVO) => {
  619. inventoryForm.id = row.id;
  620. inventoryForm.totalInventory = undefined;
  621. inventoryForm.nowInventory = undefined;
  622. inventoryForm.virtualInventory = undefined;
  623. inventoryDialog.loading = true;
  624. inventoryDialog.visible = true;
  625. try {
  626. const res = await getBase(row.id);
  627. if (res.data) {
  628. inventoryForm.totalInventory = res.data.totalInventory;
  629. inventoryForm.nowInventory = res.data.nowInventory;
  630. inventoryForm.virtualInventory = res.data.virtualInventory;
  631. }
  632. } catch (error) {
  633. console.error('获取库存信息失败:', error);
  634. } finally {
  635. inventoryDialog.loading = false;
  636. }
  637. };
  638. /** 提交库存修改 */
  639. const submitInventory = async () => {
  640. await inventoryFormRef.value?.validate();
  641. inventoryDialog.submitLoading = true;
  642. try {
  643. await updateBase({ ...inventoryForm });
  644. proxy?.$modal.msgSuccess('库存修改成功');
  645. inventoryDialog.visible = false;
  646. await getList();
  647. } catch (error) {
  648. console.error('库存修改失败:', error);
  649. proxy?.$modal.msgError('库存修改失败');
  650. } finally {
  651. inventoryDialog.submitLoading = false;
  652. }
  653. };
  654. /** 停售操作 */
  655. const handleDiscontinue = async (row: BaseVO) => {
  656. await proxy?.$modal.confirm('确认停售该商品吗?停售后商品将无法正常售卖。');
  657. try {
  658. // 调用停售API,将商品类型改为3(停售商品)
  659. await changeProductType({
  660. id: row.id,
  661. productCategory: 3
  662. });
  663. proxy?.$modal.msgSuccess('停售成功');
  664. await getList();
  665. } catch (error) {
  666. console.error('停售失败:', error);
  667. proxy?.$modal.msgError('停售失败');
  668. }
  669. };
  670. /** 加入自营池操作 */
  671. const handleAddToSelfPool = async (row: BaseVO) => {
  672. await proxy?.$modal.confirm('确认将该商品加入自营池吗?');
  673. try {
  674. await addProductSelf({ productId: row.id, auditStatus: 1 });
  675. proxy?.$modal.msgSuccess('加入自营池成功');
  676. await getList();
  677. } catch (error) {
  678. console.error('加入自营池失败:', error);
  679. proxy?.$modal.msgError('加入自营池失败');
  680. }
  681. };
  682. /** 加入精品池操作 */
  683. const handleAddToExquisitePool = async (row: BaseVO) => {
  684. await proxy?.$modal.confirm('确认将该商品加入精品池吗?');
  685. try {
  686. await addProductExquisite({ productId: row.id, auditStatus: 1 });
  687. proxy?.$modal.msgSuccess('加入精品池成功');
  688. await getList();
  689. } catch (error) {
  690. console.error('加入精品池失败:', error);
  691. proxy?.$modal.msgError('加入精品池失败');
  692. }
  693. };
  694. /** 批量审核通过 */
  695. const handleBatchAudit = async () => {
  696. if (selectedRows.value.length === 0) {
  697. proxy?.$modal.msgWarning('请先选择要审核的商品');
  698. return;
  699. }
  700. // 过滤没有 poolAuditId 的行
  701. const validRows = selectedRows.value.filter((r) => r.poolAuditId);
  702. if (validRows.length === 0) {
  703. proxy?.$modal.msgWarning('所选商品均未关联入池单,无法审核');
  704. return;
  705. }
  706. await proxy?.$modal.confirm(`确认批量审核通过所选 ${validRows.length} 个商品吗?`);
  707. try {
  708. // 按 poolAuditId 分组
  709. const groups = new Map<string | number, Array<string | number>>();
  710. for (const row of validRows) {
  711. const pid = row.poolAuditId!;
  712. if (!groups.has(pid)) groups.set(pid, []);
  713. groups.get(pid)!.push((row as any).productId ?? row.id);
  714. }
  715. await Promise.all(
  716. Array.from(groups.entries()).map(([poolAuditId, productIds]) =>
  717. batchAudit({ poolAuditId, productIds, auditStatus: 2 })
  718. )
  719. );
  720. proxy?.$modal.msgSuccess(`批量审核通过成功(共 ${validRows.length} 条)`);
  721. await getList();
  722. } catch (error) {
  723. console.error('批量审核失败:', error);
  724. }
  725. };
  726. /** 批量驳回 */
  727. const handleBatchReject = async () => {
  728. if (selectedRows.value.length === 0) {
  729. proxy?.$modal.msgWarning('请先选择要驳回的商品');
  730. return;
  731. }
  732. const validRows = selectedRows.value.filter((r) => r.poolAuditId);
  733. if (validRows.length === 0) {
  734. proxy?.$modal.msgWarning('所选商品均未关联入池单,无法驳回');
  735. return;
  736. }
  737. try {
  738. const { value: reason } = await ElMessageBox.prompt(
  739. `已选 ${validRows.length} 个商品,请输入驳回原因`,
  740. '批量驳回',
  741. {
  742. confirmButtonText: '确定',
  743. cancelButtonText: '取消',
  744. inputPlaceholder: '请输入驳回原因',
  745. inputValidator: (val) => (val && val.trim() ? true : '驳回原因不能为空')
  746. }
  747. );
  748. // 按 poolAuditId 分组
  749. const groups = new Map<string | number, Array<string | number>>();
  750. for (const row of validRows) {
  751. const pid = row.poolAuditId!;
  752. if (!groups.has(pid)) groups.set(pid, []);
  753. groups.get(pid)!.push((row as any).productId ?? row.id);
  754. }
  755. await Promise.all(
  756. Array.from(groups.entries()).map(([poolAuditId, productIds]) =>
  757. batchAudit({ poolAuditId, productIds, auditStatus: 3, reason: reason.trim() })
  758. )
  759. );
  760. proxy?.$modal.msgSuccess(`批量驳回成功(共 ${validRows.length} 条)`);
  761. await getList();
  762. } catch (error: any) {
  763. if (error !== 'cancel') {
  764. console.error('批量驳回失败:', error);
  765. }
  766. }
  767. };
  768. /** 审核通过 */
  769. const handleAudit = async (row: ProductListVO) => {
  770. if (!row.poolAuditId) {
  771. proxy?.$modal.msgWarning('该商品未关联入池单,无法审核');
  772. return;
  773. }
  774. await proxy?.$modal.confirm(`确认审核通过商品"${row.itemName}"吗?`);
  775. try {
  776. await audit({
  777. poolAuditId: row.poolAuditId,
  778. productIds: [row.productId],
  779. auditStatus: 2
  780. });
  781. proxy?.$modal.msgSuccess('审核通过成功');
  782. await getList();
  783. } catch (error) {
  784. console.error('审核失败:', error);
  785. }
  786. };
  787. /** 驳回 */
  788. const handleReject = async (row: ProductListVO) => {
  789. if (!row.poolAuditId) {
  790. proxy?.$modal.msgWarning('该商品未关联入池单,无法驳回');
  791. return;
  792. }
  793. try {
  794. const { value: reason } = await ElMessageBox.prompt('请输入驳回原因', '驳回', {
  795. confirmButtonText: '确定',
  796. cancelButtonText: '取消',
  797. inputPlaceholder: '请输入驳回原因',
  798. inputValidator: (val) => (val && val.trim() ? true : '驳回原因不能为空')
  799. });
  800. await audit({
  801. poolAuditId: row.poolAuditId,
  802. productIds: [row.productId],
  803. auditStatus: 3,
  804. reason: reason.trim()
  805. });
  806. proxy?.$modal.msgSuccess('驳回成功');
  807. await getList();
  808. } catch (error: any) {
  809. if (error !== 'cancel') {
  810. console.error('驳回失败:', error);
  811. }
  812. }
  813. };
  814. /** 跳转到商品审核页面 */
  815. const handleGoReview = () => {
  816. router.push({
  817. path: '/product/base/review',
  818. query: {
  819. productReviewStatus: 1 // 默认显示待审核的商品
  820. }
  821. });
  822. };
  823. /** 查询分类树 */
  824. const getCategoryTree = async () => {
  825. const res = await categoryTree();
  826. categoryOptions.value = res.data || [];
  827. };
  828. /** 加载品牌选项(默认100条) */
  829. const loadBrandOptions = async (keyword?: string) => {
  830. brandLoading.value = true;
  831. try {
  832. const res = await listBrand({ pageNum: 1, pageSize: 100, brandName: keyword });
  833. brandOptions.value = res.rows || [];
  834. } catch (error) {
  835. console.error('加载品牌列表失败:', error);
  836. } finally {
  837. brandLoading.value = false;
  838. }
  839. };
  840. /** 品牌远程搜索(防抖) */
  841. const handleBrandSearch = (query: string) => {
  842. if (brandSearchTimer) clearTimeout(brandSearchTimer);
  843. brandSearchTimer = setTimeout(() => {
  844. loadBrandOptions(query || undefined);
  845. }, 300);
  846. };
  847. /** 获取统计信息 */
  848. const getStatistics = async () => {
  849. try {
  850. const res = await getProductStatusCount();
  851. if (res.data) {
  852. statistics.value = res.data;
  853. }
  854. } catch (error) {
  855. console.error('获取统计信息失败:', error);
  856. }
  857. };
  858. onMounted(() => {
  859. getList();
  860. getStatistics();
  861. loadBrandOptions();
  862. });
  863. </script>