价格审批修改

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

@@ -88,7 +88,7 @@ async function handlePageChange(option: string, gridOptions: any) {
 
 function cellStyle() {
 	return {
-		fontSize: '14px',
+		fontSize: '13px',
 		color: '#666',
 		fontWeight: 600,
 	};
@@ -129,7 +129,18 @@ onMounted(() => {
 									<el-col :span="12"> 评论日期:{{ row.date }}</el-col>
 								</el-row>
 							</div>
-							<div class="text-s mt-1 mb-1">{{ row.comment }}</div>
+							<el-tooltip
+								:content="row.comment"
+								:disabled="row.comment.length <= 80"
+								:show-after="350"
+								effect="dark"
+								placement="top"
+								popper-class="custom-tooltip"
+							>
+								<span class="content-ellipsis">
+									{{ row.comment }}
+								</span>
+							</el-tooltip>
 						</template>
 					</vxe-grid>
 				</div>
@@ -159,7 +170,18 @@ onMounted(() => {
 									<el-col :span="12"> 评论日期:{{ row.date }}</el-col>
 								</el-row>
 							</div>
-							<div class="text-s mt-1 mb-1">{{ row.comment }}</div>
+							<el-tooltip
+								:content="row.comment"
+								:disabled="row.comment.length <= 80"
+								:show-after="350"
+								effect="dark"
+								placement="top"
+								popper-class="custom-tooltip"
+							>
+								<span class="content-ellipsis">
+									{{ row.comment }}
+								</span>
+							</el-tooltip>
 						</template>
 					</vxe-grid>
 				</div>
@@ -202,12 +224,19 @@ onMounted(() => {
 											<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-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>
+							<el-tooltip
+								:content="row.content"
+								:disabled="row.content.length <= 80"
+								:show-after="350"
+								effect="dark"
+								placement="top"
+								popper-class="custom-tooltip"
+							>
+								<span class="content-ellipsis">{{ row.content }}</span>
+							</el-tooltip>
 						</template>
 					</vxe-grid>
 				</div>
@@ -216,7 +245,7 @@ onMounted(() => {
 	</div>
 </template>
 
-<style scoped>
+<style lang="scss">
 .title {
 	display: flex;
 	flex-direction: column;
@@ -231,4 +260,19 @@ onMounted(() => {
 	align-items: center; /* 垂直居中对齐 */
 }
 
+.content-ellipsis {
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: 3; /* 显示的行数 */
+	overflow: hidden;
+	text-overflow: ellipsis;
+	max-height: 4.5em; /* 根据字号和行高设置最大高度 */
+	line-height: 1.5em; /* 控制行高，与你的内容相匹配 */
+}
+
+.custom-tooltip {
+	max-width: 350px; /* 设置最大宽度 */
+	white-space: pre-wrap; /* 允许文本换行 */
+	word-wrap: break-word; /* 处理长单词换行 */
+}
 </style>

src/views/price-approval/Columns.ts

@@ -79,7 +79,6 @@ export const CostSelectColumns = [
 		slots: { default: 'price_supply_rate' }},
 ];
 
-
 export const SupplyCheckColumns_Regular = [
 	{ type: 'seq', title: '序 号', width: 50, align: 'center' },
 	{ field: 'sku', title: 'SKU', minWidth: 300, align: 'center', showOverflow: true,  },
@@ -93,10 +92,10 @@ export const SupplyCheckColumns_Regular = [
 ]
 
 export const SupplyCheckColumns_Special = [
-	{ type: 'seq', title: '序 号', width: 50, align: 'center' },
-	{ field: 'sku', title: 'SKU', minWidth: 300, align: 'center', showOverflow: true},
-	{ field: 'platform', title: '平 台', width: 'auto', align: 'center', showOverflow: true, },
-	{ field: 'country_code', title: '国 家', width: 'auto', align: 'center', showOverflow: true,slots: { default: 'country_code' },},
+	{ type: 'seq', title: '序 号', width: 50, align: 'center' ,fixed: 'left'},
+	{ field: 'sku', title: 'SKU', width: 'auto', align: 'center', showOverflow: true,fixed: 'left'},
+	{ field: 'platform', title: '平 台', width: 'auto', align: 'center', showOverflow: true,fixed: 'left' },
+	{ field: 'country_code', title: '国 家', width: 'auto', align: 'center', showOverflow: true,slots: { default: 'country_code' },fixed: 'left'},
 	{ field: 'currency_code', title: '货币代码', width: 'auto', align: 'center', showOverflow: true,slots: { default: 'currency_code' },},
 	{ field: 'estimated_cost', title: '预估硬件成本', width: 'auto', align: 'center', showOverflow: true ,slots: { default: 'estimated_cost' },},
 	{ field: 'weight', title: '重量(KG)', width: 'auto', align: 'center', showOverflow: true,slots: { default: 'weight' },},
@@ -148,10 +147,10 @@ export const DirectSalesCheckColumns_Regular = [
 ]
 
 export const DirectSalesCheckColumns_Special = [
-	{ type: 'seq', title: '序 号', width: 50, align: 'center' },
-	{ field: 'sku', title: 'SKU', minWidth: 300, align: 'center', showOverflow: true},
-	{ field: 'platform', title: '平 台', width: 'auto', align: 'center', showOverflow: true, },
-	{ field: 'country_code', title: '国 家', width: 'auto', align: 'center', showOverflow: true,slots: { default: 'country_code' },},
+	{ type: 'seq', title: '序 号', width: 50, align: 'center' ,fixed: 'left'},
+	{ field: 'sku', title: 'SKU',width: 'auto',align: 'center', showOverflow: true,fixed: 'left'},
+	{ field: 'platform', title: '平 台', width: 'auto', align: 'center', showOverflow: true,fixed: 'left'},
+	{ field: 'country_code', title: '国 家', width: 'auto', align: 'center', showOverflow: true,slots: { default: 'country_code' },fixed: 'left'},
 	{ field: 'currency_code', title: '货币代码', width: 'auto', align: 'center', showOverflow: true,slots: { default: 'currency_code' },},
 	{ field: 'estimated_cost', title: '预估硬件成本', width: 'auto', align: 'center', showOverflow: true ,slots: { default: 'estimated_cost' },},
 	{ field: 'weight', title: '重量(KG)', width: 'auto', align: 'center', showOverflow: true,slots: { default: 'weight' },},

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

@@ -174,7 +174,7 @@ const gridEvents = {
 
 function cellStyle() {
   return {
-    fontWeight: 500,
+    fontWeight: 600,
   };
 }
 

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

@@ -6,12 +6,12 @@
  */
 
 import { ElMessage, FormInstance, FormRules } from 'element-plus';
-import { Close, Finished } from '@element-plus/icons-vue';
+import { Close, Finished, Select } from '@element-plus/icons-vue';
 import { useResponse } from '/@/utils/useResponse';
 import * as api from '../api';
 import { getCountryOptions, getCurrencyCodeOptions } from '/@/views/price-approval/api';
 import { useCountryInfoStore } from '/@/stores/countryInfo';
-
+import SelectDrawer from '/@/views/price-approval/components/SelectDrawer.vue';
 
 const countryOptions = ref([]);
 const btnLoading = ref(false);
@@ -23,15 +23,18 @@ const editDrawer = <Ref>useTemplateRef('editDrawer');
 const currencyCodeOptions = ref([]);
 
 const props: any = defineProps({
-	rowData: Object
+	rowData: Object,
 });
 const { rowData } = props;
 
-const emit = defineEmits([ 'refresh' ]);
+const emit = defineEmits(['refresh']);
 
 const countryInfoStore = useCountryInfoStore();
 const country = countryInfoStore.Countries.find((c) => c.code === rowData.country_code);
 
+const isShow = ref(false);
+const costType = ref('');
+
 interface RuleForm {
 	sku: string;
 	weight: string;
@@ -60,15 +63,15 @@ const ruleForm = reactive<RuleForm>({
 	price_min: rowData.price_min,
 	final_cost: rowData.final_cost,
 	sales_mode: rowData.sales_mode,
-	cost: rowData.cost
+	cost: rowData.cost,
 });
 
 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' } ],
-	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' }],
+	estimated_cost: [{ required: true, message: '请输入预估成本', trigger: 'blur' }],
 });
 
 onBeforeMount(() => {
@@ -109,6 +112,15 @@ async function fetchCountryOptions() {
 	countryOptions.value = res.data.country_code;
 }
 
+function showSelectDrawer(type: string) {
+	costType.value = type;
+	isShow.value = true;
+}
+
+function getCheckId(id: any) {
+	ruleForm.cost = id.value;
+}
+
 function closeDrawer() {
 	editDrawer.value.handleClose();
 }
@@ -124,8 +136,7 @@ function closeDrawer() {
 			:title="`审批查看（直销） - 编辑 `"
 			size="30%"
 		>
-			<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" class="mx-2.5 mt-7" label-position="top"
-							 label-width="auto" status-icon>
+			<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" class="mx-2.5 mt-7" label-position="top" label-width="auto" status-icon>
 				<el-row :gutter="20">
 					<el-col :span="12">
 						<el-form-item class="font-medium" label="SKU" prop="sku">
@@ -171,7 +182,17 @@ function closeDrawer() {
 							<el-input v-model="ruleForm.final_cost" placeholder="请输入尾程费用(外币)"></el-input>
 						</el-form-item>
 						<el-form-item class="font-medium" label="成本" prop="cost">
-							<el-input v-model="ruleForm.cost" placeholder="请输入成本"></el-input>
+							<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('supply')"> 重新选择</el-button>
+									</template>
+								</el-input>
+							</div>
 						</el-form-item>
 					</el-col>
 				</el-row>
@@ -179,13 +200,13 @@ function closeDrawer() {
 					<el-divider />
 					<div class="flex flex-1 justify-end">
 						<el-button :icon="Close" @click="closeDrawer">取 消</el-button>
-						<el-button :icon="Finished" :loading="btnLoading" type="primary" @click="submitForm(ruleFormRef)"> 确 定
-						</el-button>
+						<el-button :icon="Finished" :loading="btnLoading" type="primary" @click="submitForm(ruleFormRef)"> 确 定 </el-button>
 					</div>
 				</el-form-item>
 			</el-form>
 		</el-drawer>
 	</div>
+	<SelectDrawer v-if="isShow" v-model="isShow" :title="costType ==='supply' ? '供货' : '直销'" @sendCheckId="getCheckId" />
 </template>
 
 <style scoped>

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

@@ -209,7 +209,9 @@ function getCheckId(id: any) {
 					<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-select v-model="ruleForm.country_code" placeholder="请选择国家">
+									<el-option v-for="item in countryOptions" :label="item" :value="item"></el-option>
+								</el-select>
 							</el-form-item>
 						</el-col>
 						<el-col :span="6">

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

@@ -134,7 +134,7 @@ defineExpose({ editDrawer });
         v-model="isShow"
         :destroy-on-close="true"
         :show-close="false"
-        :title="`商品添加 --> ${title} --> 成本选择`"
+        :title="`审批查看( ${title}) --> 成本选择`"
         direction="btt"
         size="80%"
         style="background-color:#F3F4FB;">

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

@@ -6,11 +6,12 @@
  */
 
 import { ElMessage, FormInstance, FormRules } from 'element-plus';
-import { Close, Finished } from '@element-plus/icons-vue';
+import { Close, Finished, Select } from '@element-plus/icons-vue';
 import { useResponse } from '/@/utils/useResponse';
 import * as api from '../api';
 import { getCountryOptions, getCurrencyCodeOptions } from '/@/views/price-approval/api';
 import { useCountryInfoStore } from '/@/stores/countryInfo';
+import SelectDrawer from '/@/views/price-approval/components/SelectDrawer.vue';
 
 
 const countryOptions = ref([]);
@@ -32,6 +33,9 @@ const emit = defineEmits([ 'refresh' ]);
 const countryInfoStore = useCountryInfoStore();
 const country = countryInfoStore.Countries.find((c) => c.code === rowData.country_code);
 
+const isShow = ref(false);
+const costType = ref('');
+
 interface RuleForm {
   sku: string;
   weight: string;
@@ -109,6 +113,15 @@ async function fetchCountryOptions() {
 	countryOptions.value = res.data.country_code;
 }
 
+function showSelectDrawer(type: string) {
+	costType.value = type;
+	isShow.value = true;
+}
+
+function getCheckId(id: any) {
+	ruleForm.cost = id.value;
+}
+
 function closeDrawer() {
   editDrawer.value.handleClose();
 }
@@ -171,7 +184,17 @@ function closeDrawer() {
 						<el-input v-model="ruleForm.final_cost" placeholder="请输入尾程费用(外币)"></el-input>
 					</el-form-item>
 						<el-form-item class="font-medium" label="成本" prop="cost">
-							<el-input v-model="ruleForm.cost" placeholder="请输入成本"></el-input>
+							<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('direct')"> 重新选择</el-button>
+									</template>
+								</el-input>
+							</div>
 						</el-form-item>
 					</el-col>
 				</el-row>
@@ -186,6 +209,7 @@ function closeDrawer() {
       </el-form>
     </el-drawer>
   </div>
+	<SelectDrawer v-if="isShow" v-model="isShow" :title="costType ==='supply' ? '供货' : '直销'" @sendCheckId="getCheckId" />
 </template>
 
 <style scoped>