价格审批、买家之声问题修改

src/views/customers-voice/Columns.ts

@@ -1,16 +1,55 @@
+import XEUtils from 'xe-utils';
+
 export const CustomerVoiceColumns = [
 	{ type: 'seq', title: '序 号', width: 50, align: 'center' },
 	// { field: 'img', title: '图片', minWidth: 300, align: 'center', showOverflow: true, slots: { default: 'img' } },
 	// { field: 'asin', title: '标题asin', minWidth: 'auto', align: 'center', showOverflow: true,  },
 	{ field: 'product_info', title: '产品信息', width: 280, align: 'center', slots: { default: 'product_info' } },
-	{ field: 'sku', title: 'SKU', minWidth: 'auto', align: 'center', showOverflow: true,  },
-	{ field: 'country_code', title: '国家', minWidth: 'auto', align: 'center', showOverflow: true,  slots: { default: 'country_code' },},
-	{ field: 'fulfillment_channel', title: '渠道', minWidth: 'auto', align: 'center', showOverflow: true,  },
-	{ field: 'ncx_rate', title: 'NCX率', minWidth: 'auto', align: 'center', showOverflow: true,  slots: { default: 'ncx_rate' } },
-	{ field: 'ncx_count', title: 'NCX订单', minWidth: 'auto', align: 'center', showOverflow: true,  },
-	{ field: 'order_count', title: '所有订单', minWidth: 'auto', align: 'center', showOverflow: true,  },
-	{ field: 'all_score', title: '星级', minWidth: 'auto', align: 'center', showOverflow: true, slots: { default: 'all_score' } },
-	{ field: 'return_record_rate', title: '退货率', minWidth: 'auto', align: 'center', showOverflow: true, slots: { default:'return_record_rate' } },
-	{ field: 'last_updated_date', title: '最近更新', minWidth: 'auto', align: 'center', showOverflow: true,  },
-	{ field: 'operate', title: '详情', fixed: 'right', align: 'center', width: 90, slots: { default: 'operate' } }
-]
+	{ field: 'sku', title: 'SKU', minWidth: 'auto', align: 'center', showOverflow: true },
+	{
+		field: 'country_code',
+		title: '国家',
+		minWidth: 'auto',
+		align: 'center',
+		showOverflow: true,
+		slots: { default: 'country_code' },
+	},
+	{ field: 'fulfillment_channel', title: '渠道', minWidth: 'auto', align: 'center', showOverflow: true },
+	{
+		field: 'ncx_rate',
+		title: 'NCX率',
+		minWidth: 'auto',
+		align: 'center',
+		showOverflow: true,
+		slots: { default: 'ncx_rate' },
+	},
+	{ field: 'ncx_count', title: 'NCX订单', minWidth: 'auto', align: 'center', showOverflow: true },
+	{ field: 'order_count', title: '所有订单', minWidth: 'auto', align: 'center', showOverflow: true },
+	{
+		field: 'all_score',
+		title: '星级',
+		minWidth: 'auto',
+		align: 'center',
+		showOverflow: true,
+		slots: { default: 'all_score' },
+	},
+	{
+		field: 'return_record_rate',
+		title: '退货率',
+		minWidth: 'auto',
+		align: 'center',
+		showOverflow: true,
+		slots: { default: 'return_record_rate' },
+	},
+	{
+		field: 'last_updated_date',
+		title: '最近更新',
+		minWidth: 'auto',
+		align: 'center',
+		showOverflow: true,
+		formatter({ cellValue }) {
+			return XEUtils.toDateString(cellValue, 'yyyy-MM-dd');
+		},
+	},
+	{ field: 'operate', title: '详情', fixed: 'right', align: 'center', width: 90, slots: { default: 'operate' } },
+];

src/views/customers-voice/components/DataTableSlot.vue

@@ -28,8 +28,18 @@ const url = computed(() => {
 	return `https://${endpoint}/dp/${row.asin}`;
 });
 
+// const ncx_rate = computed(() => {
+// 	return row.ncx_count / row.order_count;
+// });
+
 const ncx_rate = computed(() => {
-	return row.ncx_count / row.total_count;
+	if (row.ncx_count != null &&
+		row.order_count != null &&
+		row.order_count > 0) {
+		return (row.ncx_count / row.order_count) * 100;
+
+	}
+	return null; // 或者返回其他占位符
 });
 
 function handleShow() {
@@ -56,7 +66,7 @@ function handleShow() {
 			</div>
 		</div>
 		<div v-else-if="field === 'ncx_rate'">
-			{{ ncx_rate || '-' }}
+			{{  ncx_rate?ncx_rate+'%':'-' }}
 		</div>
 		<div v-else-if="field === 'product_info'">
 			<div class="flex justify-start items-center font-medium">

src/views/customers-voice/components/show-detail/components/DataDisplay.vue

@@ -51,7 +51,7 @@ function createGridOptions() {
 			page: 1,
 			limit: 10, // 每页条数
 		},
-		columns: [{ field: 'comment', title: '评论内容', align: 'center', width: 500 }],
+		columns: [{ field: 'comment', title: '评论内容', width: 500, slots: { default: 'commentSlot' } }],
 		data: [] as Comment[],
 	});
 }
@@ -86,10 +86,10 @@ async function handlePageChange(option: string, gridOptions: any) {
 	}
 }
 
-function cellStyle(){
+function cellStyle() {
 	return {
 		fontSize: '14px',
-		color:'#666',
+		color: '#666',
 		fontWeight: 600,
 	};
 }
@@ -109,7 +109,7 @@ onMounted(() => {
 			<el-col :span="8">
 				<div class="title">
 					<div class="font-semibold italic mb-2">退货评论</div>
-					<vxe-grid v-bind="returnGridOptions" :cell-style="cellStyle">
+					<vxe-grid :cell-style="cellStyle" v-bind="returnGridOptions">
 						<template #empty>
 							<el-empty description="暂无数据" />
 						</template>
@@ -122,6 +122,15 @@ onMounted(() => {
 								@page-change="() => handlePageChange('return_negative_comment', returnGridOptions)"
 							/>
 						</template>
+						<template #commentSlot="{ row }">
+							<div class="text-gray-500 text-xs mt-1 mb-3">
+								<el-row>
+									<el-col :span="12"> 订单编号:{{ row.order_id }}</el-col>
+									<el-col :span="12"> 评论日期:{{ row.date }}</el-col>
+								</el-row>
+							</div>
+							<div class="text-s mt-1 mb-1">{{ row.comment }}</div>
+						</template>
 					</vxe-grid>
 				</div>
 			</el-col>
@@ -151,7 +160,7 @@ onMounted(() => {
 			<el-col :span="8">
 				<div class="title">
 					<div class="font-semibold italic mb-2">评价评论</div>
-					<vxe-grid v-bind="reviewGridOptions">
+					<vxe-grid :cell-style="cellStyle" v-bind="reviewGridOptions">
 						<template #empty>
 							<el-empty description="暂无数据" />
 						</template>
@@ -164,6 +173,33 @@ onMounted(() => {
 								@page-change="() => handlePageChange('review_negative_comment', reviewGridOptions)"
 							/>
 						</template>
+						<template #commentSlot="{ row }">
+							<div class="text-gray-500 text-xs mb-3">
+								<el-row>
+									<el-col :span="12" class="d-flex align-items-center">
+										<div class="flex">
+											<el-tooltip v-if="row.score > 0" :content="row.score" effect="dark" placement="top" show-after="350">
+												<div class="flex items-center">
+													<div class="font-semibold italic">评分 :</div>
+													<el-rate
+														v-if="row.score > 0"
+														v-model="row.score"
+														:colors="['#FF0000', '#FF9900', '#67C23A']"
+														disabled
+														text-color="#1e293b"
+													/>
+												</div>
+											</el-tooltip>
+											<span v-else>评分: {{ row.score }}</span>
+										</div>
+									</el-col>
+									<el-col :span="12" class="d-flex align-items-center">
+										评论日期: {{ row.review_date }}
+									</el-col>
+								</el-row>
+							</div>
+							<div class="text-s mt-1 mb-1">{{ row.content }}</div>
+						</template>
 					</vxe-grid>
 				</div>
 			</el-col>
@@ -177,4 +213,13 @@ onMounted(() => {
 	flex-direction: column;
 	align-items: center;
 }
+
+.d-flex {
+	display: flex;
+}
+
+.align-items-center {
+	align-items: center; /* 垂直居中对齐 */
+}
+
 </style>

src/views/customers-voice/components/show-detail/components/LineChart.vue

@@ -159,7 +159,7 @@ function removeResize() {
 	<el-card v-loading="loading" class="border-none mt-5">
 		<div class=" flex items-center">
 			<span class="font-semibold italic mr-2">时间范围:</span>
-			<el-select v-model="week" style="width: 100px" @change="loadData">
+			<el-select v-model="week" style="width: 100px" @change="initLine">
 				<el-option label="一周" value="1"></el-option>
 				<el-option label="两周" value="2"></el-option>
 				<el-option label="四周" value="4"></el-option>

src/views/customers-voice/components/show-detail/components/TitleCard.vue

@@ -19,7 +19,12 @@ const url = computed(() => {
 });
 
 const ncx_rate = computed(() => {
-	return rowData.ncx_count / rowData.total_count;
+	if (rowData.ncx_count != null &&
+		rowData.order_count != null &&
+		rowData.order_count > 0) {
+		return (rowData.ncx_count / rowData.order_count) * 100;
+	}
+	return null; // 或者返回其他占位符
 });
 </script>
 
@@ -74,10 +79,10 @@ const ncx_rate = computed(() => {
 							<div class="font-semibold italic">NCX订单 : {{ rowData.ncx_count || '-' }}</div>
 						</el-col>
 						<el-col :span="3">
-							<div class="font-semibold italic">NCX率 : {{ ncx_rate || '-' }}</div>
+							<div class="font-semibold italic">NCX率 : {{ ncx_rate?ncx_rate+'%':'-' }}</div>
 						</el-col>
 						<el-col :span="3">
-							<div class="font-semibold italic">退货率 : {{ rowData.return_record_rate || '-' }}</div>
+							<div class="font-semibold italic">退货率 : {{ rowData.return_record_rate*100 +'%'|| '-' }}</div>
 						</el-col>
 						<el-col :span="6">
 							<div class="font-semibold italic">最近更新 : {{ rowData.last_updated_date || '-' }}</div>

src/views/customers-voice/index.vue

@@ -6,7 +6,7 @@
  */
 
 import VerticalDivider from '/src/components/VerticalDivider/index.vue';
-import { Delete, RefreshLeft, Search } from '@element-plus/icons-vue';
+import { RefreshLeft, Search } from '@element-plus/icons-vue';
 import { useTemplateRef } from 'vue';
 import { useTableHeight } from '/@/utils/useTableHeight';
 import DataTable from '/@/views/customers-voice/components/DataTable.vue';
@@ -22,7 +22,7 @@ const resetLoading = ref(false);
 
 const formInline = reactive<any>({
 	asin: '',
-	date: [new Date(new Date().setDate(new Date().getDate() - 7)), new Date()],
+	date: [new Date(new Date().setDate(new Date().getDate() - 30)), new Date()],
 });
 provide('query-parameter', formInline);
 
@@ -34,11 +34,15 @@ async function handleQuery() {
 
 async function resetParameter() {
 	formInline.asin = '';
-	formInline.date = [new Date(new Date().setDate(new Date().getDate() - 7)), new Date()];
+	formInline.date = [new Date(new Date().setDate(new Date().getDate() - 30)), new Date()];
 	resetLoading.value = true;
 	await tableRef.value?.fetchList(true);
 	resetLoading.value = false;
 }
+
+const disabledDate = (time: Date) => {
+	return time.getTime() > Date.now();
+};
 </script>
 
 <template>
@@ -61,15 +65,17 @@ async function resetParameter() {
 									</el-input>
 								</div>
 							</el-col>
-							<el-col :span="5">
+							<el-col :span="6">
 								<div class="flex items-center">
 									<span class="mr-2">日期</span>
 									<el-date-picker
 										v-model="formInline.date"
+										:disabled-date="disabledDate"
 										end-placeholder="结束日期"
 										range-separator="至"
 										start-placeholder="开始日期"
 										type="daterange"
+										:clearable="false"
 									/>
 								</div>
 							</el-col>

src/views/price-approval/api.ts

@@ -25,6 +25,13 @@ export function getCurrencyCodeOptions() {
   });
 }
 
+export function getCountryOptions() {
+  return request({
+    url: prefix + 'country_code',
+    method: 'GET',
+  });
+}
+
 export function postSupplyCreate(body: any) {
   return request({
     url: '/api/pricing/price_product_supply/',

src/views/price-approval/approval-review-supply/api.ts

@@ -14,7 +14,10 @@ export function updateRow(body: any) {
 	return request({
 		url: apiPrefix + body.id + '/',
 		method: 'PUT',
-		data: body
+		data: body,
+		params: {
+			partial: 1
+		}
 	});
 }
 

src/views/price-approval/approval-review-supply/components/DataTableSlot.vue

@@ -19,7 +19,7 @@ const { row, field } = props;
 const emit = defineEmits(['edit-row', 'handle-delete', 'handle-manage', 'show-detail']);
 
 const countryInfoStore = useCountryInfoStore();
-const country = countryInfoStore.Countries.find((c) => c.name == row.country_code);
+const country = countryInfoStore.Countries.find((c) => c.code == row.country_code);
 const color = country ? country.color : '#3875F6';
 
 const currency = countryInfoStore.CurrencyCodes.find((c) => c.code == row.currency_code);

src/views/price-approval/approval-review-supply/components/EditDrawer.vue

@@ -9,11 +9,11 @@ import { ElMessage, FormInstance, FormRules } from 'element-plus';
 import { Close, Finished } from '@element-plus/icons-vue';
 import { useResponse } from '/@/utils/useResponse';
 import * as api from '../api';
-import { getCurrencyCodeOptions } from '/@/views/price-approval/api';
+import { getCountryOptions, getCurrencyCodeOptions } from '/@/views/price-approval/api';
+import { useCountryInfoStore } from '/@/stores/countryInfo';
 
 
-const countryOptions = <Ref>inject('countryOptions');
-console.log("=>(EditDrawer.vue:16) countryOptions", countryOptions);
+const countryOptions = ref([]);
 const btnLoading = ref(false);
 
 const editOpen = defineModel({ default: false });
@@ -29,6 +29,9 @@ const { rowData } = props;
 
 const emit = defineEmits([ 'refresh' ]);
 
+const countryInfoStore = useCountryInfoStore();
+const country = countryInfoStore.Countries.find((c) => c.code === rowData.country_code);
+
 interface RuleForm {
 	sku: string;
 	weight: string;
@@ -49,7 +52,7 @@ const ruleForm = reactive<RuleForm>({
 	sku: rowData.sku,
 	weight: rowData.weight,
 	platform: rowData.platform,
-	country_code: rowData.country_code,
+	country_code: country ? country.name : rowData.country_code,
 	currency_code: rowData.currency_code,
 	estimated_cost: rowData.estimated_cost,
 	price_show: rowData.price_show,
@@ -97,6 +100,15 @@ const submitForm = async (formEl: FormInstance | undefined) => {
 	});
 };
 
+onBeforeMount(() => {
+	fetchCountryOptions();
+});
+
+async function fetchCountryOptions() {
+	const res = await useResponse(getCountryOptions);
+	countryOptions.value = res.data.country_code;
+}
+
 function closeDrawer() {
 	editDrawer.value.handleClose();
 }

src/views/price-approval/components/AddPage.vue

@@ -11,283 +11,285 @@ import SelectDrawer from './SelectDrawer.vue';
 import { useResponse } from '/@/utils/useResponse';
 import * as api from '../api';
 
-
 const route = useRoute();
 const routeQuery: any = ref(route.query);
 
 const currencyCodeOptions = ref([]);
+const countryOptions = ref([]);
 
 const loading = ref(false);
 
 const isShow = ref(false);
 
 interface RuleForm {
-  country_code: any;
-  platform: any;
-  sku: any;
-  weight: any;
-  currency_code: any;
-  price_market_ref: any;
-  estimated_cost: any;
-  final_cost: any;
-  price_market: any;
-  price_supply: any;
-  cost: any;
-  price_show: any;
-  price_daily: any;
-  price_min: any;
+	country_code: any;
+	platform: any;
+	sku: any;
+	weight: any;
+	currency_code: any;
+	price_market_ref: any;
+	estimated_cost: any;
+	final_cost: any;
+	price_market: any;
+	price_supply: any;
+	cost: any;
+	price_show: any;
+	price_daily: any;
+	price_min: any;
 }
 
 const ruleFormRef = ref<FormInstance>();
 const ruleForm = reactive<RuleForm>({
-  country_code: '',
-  platform: '',
-  sku: '',
-  weight: '',
-  currency_code: '',
-  price_market_ref: '',
-  estimated_cost: '',
-  final_cost: '',
-  price_market: '',
-  price_supply: '',
-  cost: '',
-  price_show: '',
-  price_daily: '',
-  price_min: ''
+	country_code: '',
+	platform: '',
+	sku: '',
+	weight: '',
+	currency_code: '',
+	price_market_ref: '',
+	estimated_cost: '',
+	final_cost: '',
+	price_market: '',
+	price_supply: '',
+	cost: '',
+	price_show: '',
+	price_daily: '',
+	price_min: '',
 });
 
 const rules = reactive<FormRules<RuleForm>>({
-  sku: [ { required: true, message: '请输入SKU', trigger: 'blur' } ],
-  platform: [ { required: true, message: '请输入平台', trigger: 'blur' } ],
-  country_code: [ { required: true, message: '请输入国家', trigger: 'blur' } ],
-  currency_code: [ { required: true, message: '请选择货币代码', trigger: 'change' } ],
-  price_supply: [ { required: true, message: '请输入供货价', trigger: 'blur' } ],
-  estimated_cost: [ { required: true, message: '请输入预估成本', trigger: 'blur' } ]
+	sku: [{ required: true, message: '请输入SKU', trigger: 'blur' }],
+	platform: [{ required: true, message: '请输入平台', trigger: 'blur' }],
+	country_code: [{ required: true, message: '请输入国家', trigger: 'blur' }],
+	currency_code: [{ required: true, message: '请选择货币代码', trigger: 'change' }],
+	price_supply: [{ required: true, message: '请输入供货价', trigger: 'blur' }],
+	estimated_cost: [{ required: true, message: '请输入预估成本', trigger: 'blur' }],
 });
 
 const submitForm = async (formEl: FormInstance | undefined) => {
-  if (!formEl) return;
-  await formEl.validate(async (valid, fields) => {
-    if (valid) {
-      const res = await useResponse(routeQuery.type === 'supply' ? api.postSupplyCreate : api.postDirectCreate, ruleForm, loading);
-      if (res.code === 2000) {
-        ElMessage.success({ message: res.msg, plain: true, icon: CirclePlusFilled });
-        resetForm(formEl);
-      }
-    } else {
-      console.log('error submit!', fields);
-    }
-  });
+	if (!formEl) return;
+	await formEl.validate(async (valid, fields) => {
+		if (valid) {
+			const res = await useResponse(routeQuery.type === 'supply' ? api.postSupplyCreate : api.postDirectCreate, ruleForm, loading);
+			if (res.code === 2000) {
+				ElMessage.success({ message: res.msg, plain: true, icon: CirclePlusFilled });
+				resetForm(formEl);
+			}
+		} else {
+			console.log('error submit!', fields);
+		}
+	});
 };
 
 const resetForm = (formEl: FormInstance | undefined) => {
-  if (!formEl) return;
-  formEl.resetFields();
+	if (!formEl) return;
+	formEl.resetFields();
 };
 
 onBeforeMount(() => {
-  fetchCurrencyCodeOptions();
+	fetchCurrencyCodeOptions();
+	fetchCountryOptions();
 });
 
 async function fetchCurrencyCodeOptions() {
-  const res = await useResponse(api.getCurrencyCodeOptions);
-  currencyCodeOptions.value = res.data.currency_code;
+	const res = await useResponse(api.getCurrencyCodeOptions);
+	currencyCodeOptions.value = res.data.currency_code;
+}
+
+async function fetchCountryOptions() {
+	const res = await useResponse(api.getCountryOptions);
+	countryOptions.value = res.data.country_code;
 }
 
 function showSelectDrawer() {
-  isShow.value = true;
+	isShow.value = true;
 }
 
 function getCheckId(id: any) {
-  ruleForm.cost = id.value;
+	ruleForm.cost = id.value;
 }
-
 </script>
 
 <template>
-  <div class="p-5">
-    <el-card class="h-full" style="color: rgba(0, 0, 0, 0.88);">
-      <template #header>
-      <span class="text-lg">
-        商品添加 --> {{ routeQuery.type === 'supply' ? '供货' : '直销' }}
-      </span>
-      </template>
-      <div class="w-full">
-        <!-- 供货 -->
-        <el-form v-if="routeQuery.type === 'supply'" ref="ruleFormRef" :model="ruleForm" :rules="rules" class="mx-2.5"
-                 label-position="top" label-width="auto" status-icon>
-          <el-row :gutter="20">
-            <el-col :span="6">
-              <el-form-item class="font-medium" label="国 家" prop="country_code">
-                <el-input v-model="ruleForm.country_code" placeholder="请输入国家" />
-              </el-form-item>
-            </el-col>
-            <el-col :span="6">
-              <el-form-item class="font-medium" label="平 台" prop="platform">
-                <el-input v-model="ruleForm.platform" placeholder="请输入平台" />
-              </el-form-item>
-            </el-col>
-            <el-col :span="6">
-              <el-form-item class="font-medium" label="SKU" prop="sku">
-                <el-input v-model="ruleForm.sku" placeholder="请输入SKU" />
-              </el-form-item>
-            </el-col>
-            <el-col :span="6">
-              <el-form-item class="font-medium" label="重 量(KG)" prop="weight">
-                <el-input v-model="ruleForm.weight" placeholder="请输入重量" />
-              </el-form-item>
-            </el-col>
-          </el-row>
-          <el-row :gutter="20">
-            <el-col :span="6">
-              <el-form-item class="font-medium" label="货币代码" prop="currency_code">
-                <el-select v-model="ruleForm.currency_code" placeholder="请选择货币代码">
-                  <el-option v-for="item in currencyCodeOptions" :label="item" :value="item" />
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="6">
-              <el-form-item class="font-medium" label="卖场参考价" prop="price_market_ref">
-                <el-input v-model="ruleForm.price_market_ref" placeholder="请输入卖场参考价" />
-              </el-form-item>
-            </el-col>
-            <el-col :span="6">
-              <el-form-item class="font-medium" label="预估硬件成本" prop="estimated_cost">
-                <el-input v-model="ruleForm.estimated_cost" placeholder="请输入预估硬件成本" />
-              </el-form-item>
-            </el-col>
-            <el-col :span="6">
-              <el-form-item class="font-medium" label="尾段成本" prop="final_cost">
-                <el-input v-model="ruleForm.final_cost" placeholder="请输入尾段成本" />
-              </el-form-item>
-            </el-col>
-          </el-row>
-          <el-row :gutter="20" style="margin-bottom: 5px;">
-            <el-col :span="6">
-              <el-form-item class="font-medium" label="卖场价(不含VAT)" prop="price_market">
-                <el-input v-model="ruleForm.price_market" placeholder="请输入卖场价" />
-              </el-form-item>
-            </el-col>
-            <el-col :span="6">
-              <el-form-item class="font-medium" label="供货价" prop="price_supply">
-                <el-input v-model="ruleForm.price_supply" placeholder="请输入供货价" />
-              </el-form-item>
-            </el-col>
-            <el-col :span="6">
-              <el-form-item class="font-medium" label="成 本" prop="cost">
-                <el-button v-if="!ruleForm.cost" :icon="Select" class="w-full" plain type="primary" @click="showSelectDrawer">
-                  选 择
-                </el-button>
-                <div v-else class="flex flex-1">
-                  <el-input v-model="ruleForm.cost" :disabled="true">
-                    <template #prepend>
-                      <i class="bi bi-cash-coin" style="color: #67C23A; font-size: 20px;"></i>
-                    </template>
-                    <template #append>
-                      <el-button style="color: #E6A23C" @click="showSelectDrawer">
-                        重新选择
-                      </el-button>
-                    </template>
-                  </el-input>
-                </div>
-              </el-form-item>
-            </el-col>
-          </el-row>
-        </el-form>
-        <!-- 直销 -->
-        <el-form v-else ref="ruleFormRef" :model="ruleForm" :rules="rules" class="mx-2.5" label-position="top" label-width="auto"
-                 status-icon>
-          <el-row :gutter="20">
-            <el-col :span="6">
-              <el-form-item class="font-medium" label="国 家" prop="country_code">
-                <el-input v-model="ruleForm.country_code" placeholder="请输入国家" />
-              </el-form-item>
-            </el-col>
-            <el-col :span="6">
-              <el-form-item class="font-medium" label="平 台" prop="platform">
-                <el-input v-model="ruleForm.platform" placeholder="请输入平台" />
-              </el-form-item>
-            </el-col>
-            <el-col :span="6">
-              <el-form-item class="font-medium" label="SKU" prop="sku">
-                <el-input v-model="ruleForm.sku" placeholder="请输入SKU" />
-              </el-form-item>
-            </el-col>
-            <el-col :span="6">
-              <el-form-item class="font-medium" label="重 量(KG)" prop="weight">
-                <el-input v-model="ruleForm.weight" placeholder="请输入重量" />
-              </el-form-item>
-            </el-col>
-          </el-row>
-          <el-row :gutter="20">
-            <el-col :span="6">
-              <el-form-item class="font-medium" label="货币代码" prop="currency_code">
-                <el-select v-model="ruleForm.currency_code" placeholder="请选择货币代码">
-                  <el-option v-for="item in currencyCodeOptions" :label="item" :value="item" />
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="6">
-              <el-form-item class="font-medium" label="展示价格" prop="price_show">
-                <el-input v-model="ruleForm.price_show" placeholder="请输入展示价格" />
-              </el-form-item>
-            </el-col>
-            <el-col :span="6">
-              <el-form-item class="font-medium" label="日常活动售价" prop="price_daily">
-                <el-input v-model="ruleForm.price_daily" placeholder="请输入日常活动售价" />
-              </el-form-item>
-            </el-col>
-            <el-col :span="6">
-              <el-form-item class="font-medium" label="最低活动价" prop="price_min">
-                <el-input v-model="ruleForm.price_min" placeholder="请输入最低活动价" />
-              </el-form-item>
-            </el-col>
-          </el-row>
-          <el-row :gutter="20" style="margin-bottom: 5px;">
-            <el-col :span="6">
-              <el-form-item class="font-medium" label="预估硬件成本" prop="estimated_cost">
-                <el-input v-model="ruleForm.estimated_cost" placeholder="请输入预估成本" />
-              </el-form-item>
-            </el-col>
-            <el-col :span="6">
-              <el-form-item class="font-medium" label="尾段成本" prop="final_cost">
-                <el-input v-model="ruleForm.final_cost" placeholder="请输入尾段成本" />
-              </el-form-item>
-            </el-col>
-            <el-col :span="6">
-              <el-form-item class="font-medium" label="成 本" prop="cost">
-                <el-button v-if="!ruleForm.cost" :icon="Select" class="w-full" plain type="primary" @click="showSelectDrawer">
-                  选 择
-                </el-button>
-                <div v-else class="flex flex-1">
-                  <el-input v-model="ruleForm.cost" :disabled="true">
-                    <template #prepend>
-                      <i class="bi bi-cash-coin" style="color: #67C23A"></i>
-                    </template>
-                    <template #append>
-                      <el-button style="color: #E6A23C" @click="showSelectDrawer">
-                        重新选择
-                      </el-button>
-                    </template>
-                  </el-input>
-                </div>
-              </el-form-item>
-            </el-col>
-          </el-row>
-        </el-form>
-      </div>
-      <template #footer>
-        <div class="flex justify-end">
-          <el-button :icon="RefreshLeft" @click="resetForm(ruleFormRef)">重 置</el-button>
-          <el-button :icon="Finished" :loading="loading" type="primary" @click="submitForm(ruleFormRef)">确 定</el-button>
-        </div>
-      </template>
-    </el-card>
-    <SelectDrawer v-if="isShow" v-model="isShow" :title="routeQuery.type === 'supply' ? '供货' : '直销'"
-                  @sendCheckId="getCheckId" />
-  </div>
+	<div class="p-5">
+		<el-card class="h-full" style="color: rgba(0, 0, 0, 0.88)">
+			<template #header>
+				<span class="text-lg"> 商品添加 --> {{ routeQuery.type === 'supply' ? '供货' : '直销' }} </span>
+			</template>
+			<div class="w-full">
+				<!-- 供货 -->
+				<el-form
+					v-if="routeQuery.type === 'supply'"
+					ref="ruleFormRef"
+					:model="ruleForm"
+					:rules="rules"
+					class="mx-2.5"
+					label-position="top"
+					label-width="auto"
+					status-icon
+				>
+					<el-row :gutter="20">
+						<el-col :span="6">
+							<el-form-item class="font-medium" label="国 家" prop="country_code">
+								<el-select v-model="ruleForm.country_code" placeholder="请选择国家">
+									<el-option v-for="item in countryOptions" :label="item" :value="item"></el-option>
+								</el-select>
+								<!--<el-input v-model="ruleForm.country_code" placeholder="请输入国家" />-->
+							</el-form-item>
+						</el-col>
+						<el-col :span="6">
+							<el-form-item class="font-medium" label="平 台" prop="platform">
+								<el-input v-model="ruleForm.platform" placeholder="请输入平台" />
+							</el-form-item>
+						</el-col>
+						<el-col :span="6">
+							<el-form-item class="font-medium" label="SKU" prop="sku">
+								<el-input v-model="ruleForm.sku" placeholder="请输入SKU" />
+							</el-form-item>
+						</el-col>
+						<el-col :span="6">
+							<el-form-item class="font-medium" label="重 量(KG)" prop="weight">
+								<el-input v-model="ruleForm.weight" placeholder="请输入重量" />
+							</el-form-item>
+						</el-col>
+					</el-row>
+					<el-row :gutter="20">
+						<el-col :span="6">
+							<el-form-item class="font-medium" label="货币代码" prop="currency_code">
+								<el-select v-model="ruleForm.currency_code" placeholder="请选择货币代码">
+									<el-option v-for="item in currencyCodeOptions" :label="item" :value="item" />
+								</el-select>
+							</el-form-item>
+						</el-col>
+						<el-col :span="6">
+							<el-form-item class="font-medium" label="卖场参考价" prop="price_market_ref">
+								<el-input v-model="ruleForm.price_market_ref" placeholder="请输入卖场参考价" />
+							</el-form-item>
+						</el-col>
+						<el-col :span="6">
+							<el-form-item class="font-medium" label="预估硬件成本" prop="estimated_cost">
+								<el-input v-model="ruleForm.estimated_cost" placeholder="请输入预估硬件成本" />
+							</el-form-item>
+						</el-col>
+						<el-col :span="6">
+							<el-form-item class="font-medium" label="尾段成本" prop="final_cost">
+								<el-input v-model="ruleForm.final_cost" placeholder="请输入尾段成本" />
+							</el-form-item>
+						</el-col>
+					</el-row>
+					<el-row :gutter="20" style="margin-bottom: 5px">
+						<el-col :span="6">
+							<el-form-item class="font-medium" label="卖场价(不含VAT)" prop="price_market">
+								<el-input v-model="ruleForm.price_market" placeholder="请输入卖场价" />
+							</el-form-item>
+						</el-col>
+						<el-col :span="6">
+							<el-form-item class="font-medium" label="供货价" prop="price_supply">
+								<el-input v-model="ruleForm.price_supply" placeholder="请输入供货价" />
+							</el-form-item>
+						</el-col>
+						<el-col :span="6">
+							<el-form-item class="font-medium" label="成 本" prop="cost">
+								<el-button v-if="!ruleForm.cost" :icon="Select" class="w-full" plain type="primary" @click="showSelectDrawer"> 选 择 </el-button>
+								<div v-else class="flex flex-1">
+									<el-input v-model="ruleForm.cost" :disabled="true">
+										<template #prepend>
+											<i class="bi bi-cash-coin" style="color: #67c23a; font-size: 20px"></i>
+										</template>
+										<template #append>
+											<el-button style="color: #e6a23c" @click="showSelectDrawer"> 重新选择 </el-button>
+										</template>
+									</el-input>
+								</div>
+							</el-form-item>
+						</el-col>
+					</el-row>
+				</el-form>
+				<!-- 直销 -->
+				<el-form v-else ref="ruleFormRef" :model="ruleForm" :rules="rules" class="mx-2.5" label-position="top" label-width="auto" status-icon>
+					<el-row :gutter="20">
+						<el-col :span="6">
+							<el-form-item class="font-medium" label="国 家" prop="country_code">
+								<el-input v-model="ruleForm.country_code" placeholder="请输入国家" />
+							</el-form-item>
+						</el-col>
+						<el-col :span="6">
+							<el-form-item class="font-medium" label="平 台" prop="platform">
+								<el-input v-model="ruleForm.platform" placeholder="请输入平台" />
+							</el-form-item>
+						</el-col>
+						<el-col :span="6">
+							<el-form-item class="font-medium" label="SKU" prop="sku">
+								<el-input v-model="ruleForm.sku" placeholder="请输入SKU" />
+							</el-form-item>
+						</el-col>
+						<el-col :span="6">
+							<el-form-item class="font-medium" label="重 量(KG)" prop="weight">
+								<el-input v-model="ruleForm.weight" placeholder="请输入重量" />
+							</el-form-item>
+						</el-col>
+					</el-row>
+					<el-row :gutter="20">
+						<el-col :span="6">
+							<el-form-item class="font-medium" label="货币代码" prop="currency_code">
+								<el-select v-model="ruleForm.currency_code" placeholder="请选择货币代码">
+									<el-option v-for="item in currencyCodeOptions" :label="item" :value="item" />
+								</el-select>
+							</el-form-item>
+						</el-col>
+						<el-col :span="6">
+							<el-form-item class="font-medium" label="展示价格" prop="price_show">
+								<el-input v-model="ruleForm.price_show" placeholder="请输入展示价格" />
+							</el-form-item>
+						</el-col>
+						<el-col :span="6">
+							<el-form-item class="font-medium" label="日常活动售价" prop="price_daily">
+								<el-input v-model="ruleForm.price_daily" placeholder="请输入日常活动售价" />
+							</el-form-item>
+						</el-col>
+						<el-col :span="6">
+							<el-form-item class="font-medium" label="最低活动价" prop="price_min">
+								<el-input v-model="ruleForm.price_min" placeholder="请输入最低活动价" />
+							</el-form-item>
+						</el-col>
+					</el-row>
+					<el-row :gutter="20" style="margin-bottom: 5px">
+						<el-col :span="6">
+							<el-form-item class="font-medium" label="预估硬件成本" prop="estimated_cost">
+								<el-input v-model="ruleForm.estimated_cost" placeholder="请输入预估成本" />
+							</el-form-item>
+						</el-col>
+						<el-col :span="6">
+							<el-form-item class="font-medium" label="尾段成本" prop="final_cost">
+								<el-input v-model="ruleForm.final_cost" placeholder="请输入尾段成本" />
+							</el-form-item>
+						</el-col>
+						<el-col :span="6">
+							<el-form-item class="font-medium" label="成 本" prop="cost">
+								<el-button v-if="!ruleForm.cost" :icon="Select" class="w-full" plain type="primary" @click="showSelectDrawer"> 选 择 </el-button>
+								<div v-else class="flex flex-1">
+									<el-input v-model="ruleForm.cost" :disabled="true">
+										<template #prepend>
+											<i class="bi bi-cash-coin" style="color: #67c23a"></i>
+										</template>
+										<template #append>
+											<el-button style="color: #e6a23c" @click="showSelectDrawer"> 重新选择 </el-button>
+										</template>
+									</el-input>
+								</div>
+							</el-form-item>
+						</el-col>
+					</el-row>
+				</el-form>
+			</div>
+			<template #footer>
+				<div class="flex justify-end">
+					<el-button :icon="RefreshLeft" @click="resetForm(ruleFormRef)">重 置</el-button>
+					<el-button :icon="Finished" :loading="loading" type="primary" @click="submitForm(ruleFormRef)">确 定 </el-button>
+				</div>
+			</template>
+		</el-card>
+		<SelectDrawer v-if="isShow" v-model="isShow" :title="routeQuery.type === 'supply' ? '供货' : '直销'" @sendCheckId="getCheckId" />
+	</div>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>

src/views/price-approval/direct-sales/api.ts

@@ -14,7 +14,10 @@ export function updateRow(body: any) {
 	return request({
 		url: apiPrefix + body.id + '/',
 		method: 'PUT',
-		data: body
+		data: body,
+		params: {
+			partial: 1
+		}
 	});
 }
 

src/views/price-approval/direct-sales/component/DataTableSlot.vue

@@ -20,7 +20,7 @@ const { row, field } = props;
 const emit = defineEmits(['edit-row', 'handle-delete', 'handle-manage', 'show-detail']);
 
 const countryInfoStore = useCountryInfoStore();
-const country = countryInfoStore.Countries.find((c) => c.name == row.country_code);
+const country = countryInfoStore.Countries.find((c) => c.code == row.country_code);
 const color = country ? country.color : '#626AEF';
 
 const currency = countryInfoStore.CurrencyCodes.find((c) => c.code == row.currency_code);

src/views/price-approval/direct-sales/component/EditDrawer.vue

@@ -9,11 +9,11 @@ import { ElMessage, FormInstance, FormRules } from 'element-plus';
 import { Close, Finished } from '@element-plus/icons-vue';
 import { useResponse } from '/@/utils/useResponse';
 import * as api from '../api';
-import { getCurrencyCodeOptions } from '/@/views/price-approval/api';
+import { getCountryOptions, getCurrencyCodeOptions } from '/@/views/price-approval/api';
+import { useCountryInfoStore } from '/@/stores/countryInfo';
 
 
-const countryOptions = <Ref>inject('countryOptions');
-console.log("=>(EditDrawer.vue:16) countryOptions", countryOptions);
+const countryOptions = ref([]);
 const btnLoading = ref(false);
 
 const editOpen = defineModel({ default: false });
@@ -29,6 +29,9 @@ const { rowData } = props;
 
 const emit = defineEmits([ 'refresh' ]);
 
+const countryInfoStore = useCountryInfoStore();
+const country = countryInfoStore.Countries.find((c) => c.code === rowData.country_code);
+
 interface RuleForm {
   sku: string;
   weight: string;
@@ -49,7 +52,7 @@ const ruleForm = reactive<RuleForm>({
   sku: rowData.sku,
   weight: rowData.weight,
   platform: rowData.platform,
-  country_code: rowData.country_code,
+  country_code: country ? country.name : rowData.country_code,
   currency_code: rowData.currency_code,
   estimated_cost: rowData.estimated_cost,
   price_show: rowData.price_show,
@@ -97,6 +100,15 @@ const submitForm = async (formEl: FormInstance | undefined) => {
   });
 };
 
+onBeforeMount(() => {
+	fetchCountryOptions();
+});
+
+async function fetchCountryOptions() {
+	const res = await useResponse(getCountryOptions);
+	countryOptions.value = res.data.country_code;
+}
+
 function closeDrawer() {
   editDrawer.value.handleClose();
 }