|
|
@@ -3,7 +3,12 @@ import { computed, ref } from 'vue';
|
|
|
import { NButton, NImage, NInputNumber, NSelect } from 'naive-ui';
|
|
|
import dayjs from 'dayjs';
|
|
|
import { fetchGetAllStoreList } from '@/service/api/goods/desk-category';
|
|
|
-import { fetchGetAllChannelList, fetchGetGoodsList, fetchImportGoods } from '@/service/api/goods/store-goods';
|
|
|
+import {
|
|
|
+ fetchGetAllChannelList,
|
|
|
+ fetchGetGoodsList,
|
|
|
+ fetchImportGoods,
|
|
|
+ fetchSetUpChannels
|
|
|
+} from '@/service/api/goods/store-goods';
|
|
|
import { areAllItemsAllFieldsFilled } from '@/utils/zt';
|
|
|
import { useTable } from '@/components/zt/Table/hooks/useTable';
|
|
|
import type { ModalMethods } from '@/components/zt/Modal/types';
|
|
|
@@ -11,6 +16,9 @@ import SvgIcon from '@/components/custom/svg-icon.vue';
|
|
|
import { useModal } from '@/components/zt/Modal/hooks/useModal';
|
|
|
type Price = { channelId: number | undefined; channelProdPrice: number; id: number };
|
|
|
const importTemplateRef = ref<ModalMethods>();
|
|
|
+const options = ref<Api.goods.Channel[]>([]);
|
|
|
+const TypeName = ['C端用户', '企业用户', 'B端用户'];
|
|
|
+
|
|
|
const columns: NaiveUI.TableColumn<Api.goods.ShopSku>[] = [
|
|
|
{
|
|
|
type: 'selection',
|
|
|
@@ -59,7 +67,7 @@ const columns: NaiveUI.TableColumn<Api.goods.ShopSku>[] = [
|
|
|
},
|
|
|
render: row => {
|
|
|
const nameList = row.channelProdList?.map(it => it.shopName);
|
|
|
- return <div>{nameList?.join(',')}</div>;
|
|
|
+ return <div>{nameList?.join(',') || '--'}</div>;
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
@@ -74,6 +82,7 @@ const columns: NaiveUI.TableColumn<Api.goods.ShopSku>[] = [
|
|
|
align: 'center',
|
|
|
width: 120,
|
|
|
render: row => {
|
|
|
+ if (!row.channelProdList?.length) return '--';
|
|
|
if (row.channelProdList) return <div>{row.channelProdList[0].purchasePrice}</div>;
|
|
|
return '--';
|
|
|
}
|
|
|
@@ -84,6 +93,7 @@ const columns: NaiveUI.TableColumn<Api.goods.ShopSku>[] = [
|
|
|
align: 'center',
|
|
|
width: 150,
|
|
|
render: row => {
|
|
|
+ if (!row.channelProdList?.length) return '--';
|
|
|
if (row.channelProdList) return <div>{row.channelProdList[0].deliveryPrice}</div>;
|
|
|
return '--';
|
|
|
}
|
|
|
@@ -92,19 +102,18 @@ const columns: NaiveUI.TableColumn<Api.goods.ShopSku>[] = [
|
|
|
key: 'name',
|
|
|
title: '销售渠道及价格',
|
|
|
align: 'center',
|
|
|
- width: 150,
|
|
|
+ width: 250,
|
|
|
render: row => {
|
|
|
return row.channelProdList?.map(it => {
|
|
|
return (
|
|
|
<div>
|
|
|
- {it.channelName} : {it.channelProdPrice}
|
|
|
+ {TypeName[Number(it.channelId) - 1]} ({it.channelName || '--'}) : {it.channelProdPrice || '--'}
|
|
|
</div>
|
|
|
);
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
];
|
|
|
-const options = ref<Api.goods.Channel[]>([]);
|
|
|
const PriceColumns: NaiveUI.TableColumn<Price>[] = [
|
|
|
{
|
|
|
title: '销售渠道',
|
|
|
@@ -118,8 +127,28 @@ const PriceColumns: NaiveUI.TableColumn<Price>[] = [
|
|
|
labelField="channelName"
|
|
|
valueField="id"
|
|
|
value={row.channelId}
|
|
|
+ clearable
|
|
|
onUpdate:value={value => {
|
|
|
- row.channelId = Number(value);
|
|
|
+ options.value.map(it => {
|
|
|
+ if (it.id == row.channelId) {
|
|
|
+ it.disabled = false;
|
|
|
+ }
|
|
|
+ return it;
|
|
|
+ });
|
|
|
+ row.channelId = value ? Number(value) : undefined;
|
|
|
+ }}
|
|
|
+ onUpdate:show={value => {
|
|
|
+ options.value.map(it => {
|
|
|
+ if (it.id == row.channelId) {
|
|
|
+ if (value) {
|
|
|
+ it.disabled = false;
|
|
|
+ }
|
|
|
+ if (!value) {
|
|
|
+ it.disabled = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return it;
|
|
|
+ });
|
|
|
}}
|
|
|
></NSelect>
|
|
|
);
|
|
|
@@ -146,7 +175,7 @@ const PriceColumns: NaiveUI.TableColumn<Price>[] = [
|
|
|
{
|
|
|
title: () => {
|
|
|
return (
|
|
|
- <div onClick={() => handleAddPrice()}>
|
|
|
+ <div onClick={() => handleAddPrice()} class={'w-full flex items-center justify-center'}>
|
|
|
<SvgIcon
|
|
|
icon={'proicons:add-square'}
|
|
|
class={'cursor-pointer text-24px'}
|
|
|
@@ -157,9 +186,10 @@ const PriceColumns: NaiveUI.TableColumn<Price>[] = [
|
|
|
},
|
|
|
key: 'action',
|
|
|
width: 80,
|
|
|
+ align: 'center',
|
|
|
render: row => {
|
|
|
return (
|
|
|
- <div onClick={() => handleDelPrice(row.id)}>
|
|
|
+ <div onClick={() => handleDelPrice(row.id)} class={'w-full flex items-center justify-center'}>
|
|
|
<SvgIcon
|
|
|
icon={'proicons:subtract-square'}
|
|
|
class={'cursor-pointer text-24px'}
|
|
|
@@ -172,7 +202,7 @@ const PriceColumns: NaiveUI.TableColumn<Price>[] = [
|
|
|
];
|
|
|
const PriceData = ref<Price[]>([]);
|
|
|
const selectData = ref<Api.goods.ShopSku>();
|
|
|
-const [registerTable, { getTableCheckedRowKeys }] = useTable({
|
|
|
+const [registerTable, { getTableCheckedRowKeys, refresh, getTableData }] = useTable({
|
|
|
searchFormConfig: {
|
|
|
schemas: [
|
|
|
{
|
|
|
@@ -204,7 +234,10 @@ const [registerTable, { getTableCheckedRowKeys }] = useTable({
|
|
|
}
|
|
|
});
|
|
|
|
|
|
-const [registerModalPrice, { openModal: openPriceModal, setSubLoading: setSubModalLoding }] = useModal({
|
|
|
+const [
|
|
|
+ registerModalPrice,
|
|
|
+ { openModal: openPriceModal, setSubLoading: setSubModalLoding, closeModal: closePriceModal }
|
|
|
+] = useModal({
|
|
|
title: '设置渠道及价格',
|
|
|
width: 800,
|
|
|
height: 300
|
|
|
@@ -213,6 +246,9 @@ const [registerModalPrice, { openModal: openPriceModal, setSubLoading: setSubMod
|
|
|
const isDisabledExport = computed(() => {
|
|
|
return !getTableCheckedRowKeys().length;
|
|
|
});
|
|
|
+const tableData = computed(() => {
|
|
|
+ return getTableData();
|
|
|
+});
|
|
|
|
|
|
async function handleSubmitImport(file: File) {
|
|
|
const { error } = await fetchImportGoods({ file });
|
|
|
@@ -229,7 +265,10 @@ function handleModalPrice(row: Api.goods.ShopSku) {
|
|
|
openPriceModal();
|
|
|
}
|
|
|
function handleAddPrice() {
|
|
|
- if (PriceData.value.length == 3) return;
|
|
|
+ if (PriceData.value.length == 3) {
|
|
|
+ window.$message?.error('最多只能添加3条数据');
|
|
|
+ return;
|
|
|
+ }
|
|
|
PriceData.value.push({
|
|
|
channelId: undefined,
|
|
|
channelProdPrice: 1,
|
|
|
@@ -240,7 +279,7 @@ function handleDelPrice(id: number) {
|
|
|
PriceData.value = PriceData.value.filter(item => item.id != id);
|
|
|
}
|
|
|
|
|
|
-function handleSubmitPrice() {
|
|
|
+async function handleSubmitPrice() {
|
|
|
setSubModalLoding(false);
|
|
|
if (!PriceData.value.length) {
|
|
|
window.$message?.error('最少填写一条数据');
|
|
|
@@ -251,7 +290,27 @@ function handleSubmitPrice() {
|
|
|
return;
|
|
|
}
|
|
|
setSubModalLoding(true);
|
|
|
-
|
|
|
+ const form = {
|
|
|
+ shopId: selectData.value?.shopId,
|
|
|
+ skuId: selectData.value?.skuId,
|
|
|
+ purchasePrice: selectData.value?.channelProdList?.length ? selectData.value.channelProdList[0].purchasePrice : null,
|
|
|
+ deliveryPrice: selectData.value?.channelProdList?.length ? selectData.value.channelProdList[0].deliveryPrice : null,
|
|
|
+ setChannelPriceDtoList: PriceData.value.map(item => {
|
|
|
+ return {
|
|
|
+ channelId: item.channelId,
|
|
|
+ channelProdPrice: item.channelProdPrice
|
|
|
+ };
|
|
|
+ })
|
|
|
+ };
|
|
|
+ const { error } = await fetchSetUpChannels(form);
|
|
|
+ if (!error) {
|
|
|
+ closePriceModal();
|
|
|
+ refresh();
|
|
|
+ PriceData.value = [];
|
|
|
+ options.value.map(it => (it.disabled = false));
|
|
|
+ } else {
|
|
|
+ setSubModalLoding(false);
|
|
|
+ }
|
|
|
console.log(PriceData.value, 'asdsad');
|
|
|
}
|
|
|
async function getData() {
|
|
|
@@ -272,7 +331,7 @@ getData();
|
|
|
<template #prefix>
|
|
|
<NSpace>
|
|
|
<NButton size="small" @click="openImportModal">导入商品销售渠道及价格</NButton>
|
|
|
- <NButton size="small">导出全部</NButton>
|
|
|
+ <NButton size="small" :disabled="tableData.length == 0">导出全部</NButton>
|
|
|
<NButton size="small" :disabled="isDisabledExport">导出选中数据</NButton>
|
|
|
<NButton size="small">修改记录</NButton>
|
|
|
</NSpace>
|