feat(price-approval): 新增货币代码获取功能和成本选择功能

- 在 api.ts 中添加 getCurrencyCodeOptions 方法获取货币代码选项
- 在 AddPage.vue 中实现货币代码选项的获取和展示
- 优化成本选择逻辑，添加成本重新选择功能
- 调整表格列配置，将复选框改为单选框
- 优化数据加载逻辑，只在数据存在时加载列配置

src/views/price-approval/Columns.ts

@@ -42,7 +42,7 @@ export const CostDetailColumns = [
 ];
 
 export const CostSelectColumns = [
-	{ type: 'checkbox', minWidth: 50, align: 'center' },
+	{ type: 'radio', minWidth: 50, align: 'center' },
 	{ field: 'description', title: '描 述', minWidth: 200, align: 'center', showOverflow: true },
 	{ field: 'station', title: '地 区', minWidth: 100, align: 'center', showOverflow: true },
 	{ field: 'platform', title: '平 台', minWidth: 100, align: 'center', showOverflow: true },

src/views/price-approval/api.ts

@@ -1,9 +1,10 @@
 import { request } from '/@/utils/service';
 
 
+const prefix = '/api/pricing/price_cost/';
 export function getTableData(query: any) {
   return request({
-    url: '/api/pricing/price_cost/',
+    url: prefix,
     method: 'GET',
     params: query
   });
@@ -11,8 +12,31 @@ export function getTableData(query: any) {
 
 export function getCostOptions(query: any) {
   return request({
-    url: '/api/pricing/price_cost/box/',
+    url: prefix+ 'box/',
     method: 'GET',
     params: query
   });
 }
+
+export function getCurrencyCodeOptions() {
+  return request({
+    url: prefix + 'currency_code/',
+    method: 'GET',
+  });
+}
+
+export function postSupplyCreate(body: any) {
+  return request({
+    url: '/api/pricing/price_product_supply/',
+    method: 'POST',
+    data: body
+  });
+}
+
+export function postDirectCreate(body: any) {
+  return request({
+    url: '/api/pricing/price_product_direct/',
+    method: 'POST',
+    data: body
+  });
+}

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

@@ -1,6 +1,6 @@
 import { request } from '/@/utils/service';
 
-const apiPrefix = '/api/pricing/price_cost/';
+const apiPrefix = '/api/pricing/price_product_supply/';
 
 export function getTableData(query: any) {
 	return request({

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

@@ -10,8 +10,6 @@ import { ElMessage } from 'element-plus';
 import { usePagination } from '/@/utils/usePagination';
 import { useTableData } from '/@/utils/useTableData';
 import DataTableSlot from './DataTableSlot.vue';
-import { downloadFile } from '/@/utils/service';
-import { uesDownloadFile } from '/@/utils/useDownload';
 import PermissionButton from '/src/components/PermissionButton/index.vue';
 import ImportButton from '/src/components/ImportButton/index.vue';
 import VerticalDivider from '/src/components/VerticalDivider/index.vue';
@@ -25,9 +23,9 @@ import { CostDetailColumns, SupplyCheckColumns_Regular } from '/@/views/price-ap
 const router = useRouter();
 
 interface Parameter {
-	description: string;
-	platform: string;
-	station: string;
+  description: string;
+  platform: string;
+  station: string;
 }
 
 const queryParameter: Parameter | undefined = inject('query-parameter');
@@ -87,19 +85,17 @@ onMounted(() => {
 });
 
 async function fetchList(isQuery = false) {
-	if (isQuery) {
-		gridOptions.pagerConfig.page = 1;
-	}
-
-	gridOptions.data = [];
-	gridOptions.columns = [];
+  if (isQuery) {
+    gridOptions.pagerConfig.page = 1;
+  }
 
-	const query = {
+  gridOptions.data = [];
+  gridOptions.columns = [];
 
-	};
+  const query = {};
 
   await useTableData(api.getTableData, query, gridOptions);
-  await gridRef.value.loadColumn(SupplyCheckColumns_Regular);
+  if (gridOptions && gridOptions.data?.length) await gridRef.value.loadColumn(SupplyCheckColumns_Regular);
   gridOptions.showHeader = Boolean(gridOptions.data?.length);
 }
 
@@ -154,49 +150,49 @@ function selectAllChangeEvent({ checked }: any) {
 }
 
 function handleCreate() {
-  router.push({ name: 'AddPage', query: { type: 'supply' } });
+  router.push({ path: '/addPage', query: { type: 'supply' } });
 }
 
 function handleEdit(row: any) {
-	editOpen.value = true;
-	rowData.value = row;
+  editOpen.value = true;
+  rowData.value = row;
 }
 
 async function singleDelete(row: any) {
-	const res = await useResponse(api.deleteRow, row);
-	if (res.code === 2000) {
-		ElMessage.error({ message: '已删除!', plain: true, icon: 'Delete' });
-		handleRefresh();
-	}
+  const res = await useResponse(api.deleteRow, row);
+  if (res.code === 2000) {
+    ElMessage.error({ message: '已删除!', plain: true, icon: 'Delete' });
+    handleRefresh();
+  }
 }
 
 function downloadTemplate() {
-	// const url = '/api/choice/reviews_monitor/import_data/';
-	// const fileName = '审批查看(供货)模板.xlsx';
-	//
-	// if (url) {
-	// 	downloadFile({
-	// 		url,
-	// 		method: 'GET',
-	// 		filename: fileName,
-	// 	});
-	// } else {
-	// 	console.error('未知的模板类型:', templateType.value);
-	// }
+  // const url = '/api/choice/reviews_monitor/import_data/';
+  // const fileName = '审批查看(供货)模板.xlsx';
+  //
+  // if (url) {
+  // 	downloadFile({
+  // 		url,
+  // 		method: 'GET',
+  // 		filename: fileName,
+  // 	});
+  // } else {
+  // 	console.error('未知的模板类型:', templateType.value);
+  // }
 }
 
 const gridEvents = {
-	custom({ type }: any) {
-		if (type == 'confirm') {
-			fetchList();
-		}
-	},
+  custom({ type }: any) {
+    if (type == 'confirm') {
+      fetchList();
+    }
+  }
 };
 
-function cellStyle(){
-	return{
-		fontWeight:500,
-	}
+function cellStyle() {
+  return {
+    fontWeight: 500
+  };
 }
 
 defineExpose({ fetchList });
@@ -285,12 +281,12 @@ defineExpose({ fetchList });
 
 <style scoped>
 .toolbar-btn {
-	width: 34px;
-	height: 34px;
-	font-size: 18px;
+  width: 34px;
+  height: 34px;
+  font-size: 18px;
 }
 
 :deep(.custom-el-input .el-select__wrapper) {
-	border-radius: 20px;
+  border-radius: 20px;
 }
 </style>

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

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 /**
  * @Name: DataTableSlot.vue
  * @Description:
@@ -6,62 +6,63 @@
  */
 
 import { hasPermission } from '/@/utils/hasPermission';
-import { Delete, InfoFilled, Key, Operation, View } from '@element-plus/icons-vue';
+import { Delete, InfoFilled, Operation } from '@element-plus/icons-vue';
 import PermissionButton from '/@/components/PermissionButton/index.vue';
 
+
 const props = defineProps<{
-	row: any;
-	field: any;
+  row: any;
+  field: any;
 }>();
 const { row, field } = props;
 
 const emit = defineEmits([ 'edit-row', 'handle-delete', 'handle-manage', 'show-detail' ]);
 
 function handleEdit() {
-	emit('edit-row', row);
+  emit('edit-row', row);
 }
 
 function onConfirm() {
-	emit('handle-delete', row);
+  emit('handle-delete', row);
 }
 
 </script>
 
 <template>
-	<div class="font-medium">
-		<div v-if="field === 'operate'">
-			<div class="flex justify-center gap-2">
-				<div v-if="hasPermission('SkuAttrUpdate')">
-					<PermissionButton circle plain type="warning" @click="handleEdit">
-						<el-icon>
-							<Operation />
-						</el-icon>
-					</PermissionButton>
-				</div>
-				<div v-if="hasPermission('SkuAttrDelete')">
-					<el-popconfirm :icon="InfoFilled" icon-color="#626AEF" title="你确定要删除此项吗?" width="220"
-												 @confirm="onConfirm">
-						<template #reference>
-							<PermissionButton circle plain type="danger">
-								<el-icon>
-									<Delete />
-								</el-icon>
-							</PermissionButton>
-						</template>
-						<template #actions="{ confirm, cancel }">
-							<el-button size="small" @click="cancel">No!</el-button>
-							<el-button size="small" type="danger" @click="confirm"> Yes?</el-button>
-						</template>
-					</el-popconfirm>
-				</div>
-			</div>
-		</div>
-		<div v-else>
-			{{ row[field] || '-' }}
-		</div>
-	</div>
+  <div class="font-medium">
+    <div v-if="field === 'operate'">
+      <div class="flex justify-center gap-2">
+        <div v-if="hasPermission('SkuAttrUpdate')">
+          <PermissionButton circle plain type="warning" @click="handleEdit">
+            <el-icon>
+              <Operation />
+            </el-icon>
+          </PermissionButton>
+        </div>
+        <div v-if="hasPermission('SkuAttrDelete')">
+          <el-popconfirm :icon="InfoFilled" icon-color="#626AEF" title="你确定要删除此项吗?" width="220"
+                         @confirm="onConfirm">
+            <template #reference>
+              <PermissionButton circle plain type="danger">
+                <el-icon>
+                  <Delete />
+                </el-icon>
+              </PermissionButton>
+            </template>
+            <template #actions="{ confirm, cancel }">
+              <el-button size="small" @click="cancel">No!</el-button>
+              <el-button size="small" type="danger" @click="confirm"> Yes?</el-button>
+            </template>
+          </el-popconfirm>
+        </div>
+      </div>
+    </div>
+    <div v-else>
+      {{ row[field] || '-' }}
+    </div>
+  </div>
 </template>
 
 <style scoped>
 
-</style>
+</style>

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

@@ -6,19 +6,24 @@
  */
 
 import { FormInstance, FormRules } from 'element-plus';
-import { Finished, RefreshLeft, Select } from '@element-plus/icons-vue';
+import { CirclePlusFilled, Finished, RefreshLeft, Select } from '@element-plus/icons-vue';
 import SelectDrawer from './SelectDrawer.vue';
+import { useResponse } from '/@/utils/useResponse';
+import * as api from '../api';
+import { getCurrencyCodeOptions, postDirectCreate } from '../api';
 
 
 const route = useRoute();
 const routeQuery: any = ref(route.query);
 
+const currencyCodeOptions = ref([]);
+
 const loading = ref(false);
 
 const isShow = ref(false);
 
 interface RuleForm {
-  country: any;
+  country_code: any;
   platform: any;
   sku: any;
   weight: any;
@@ -36,7 +41,7 @@ interface RuleForm {
 
 const ruleFormRef = ref<FormInstance>();
 const ruleForm = reactive<RuleForm>({
-  country: '',
+  country_code: '',
   platform: '',
   sku: '',
   weight: '',
@@ -55,7 +60,7 @@ const ruleForm = reactive<RuleForm>({
 const rules = reactive<FormRules<RuleForm>>({
   sku: [ { required: true, message: '请输入SKU', trigger: 'blur' } ],
   platform: [ { required: true, message: '请输入平台', trigger: 'blur' } ],
-  country: [ { 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' } ]
@@ -63,9 +68,13 @@ const rules = reactive<FormRules<RuleForm>>({
 
 const submitForm = async (formEl: FormInstance | undefined) => {
   if (!formEl) return;
-  await formEl.validate((valid, fields) => {
+  await formEl.validate(async (valid, fields) => {
     if (valid) {
-      console.log('submit!');
+      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);
     }
@@ -77,9 +86,23 @@ const resetForm = (formEl: FormInstance | undefined) => {
   formEl.resetFields();
 };
 
+onBeforeMount(() => {
+  fetchCurrencyCodeOptions();
+});
+
+async function fetchCurrencyCodeOptions() {
+  const res = await useResponse(api.getCurrencyCodeOptions);
+  currencyCodeOptions.value = res.data.currency_code;
+}
+
 function showSelectDrawer() {
   isShow.value = true;
 }
+
+function getCheckId(id: any) {
+  ruleForm.cost = id.value;
+}
+
 </script>
 
 <template>
@@ -93,12 +116,11 @@ function showSelectDrawer() {
       <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>
+                 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">
-                <el-input v-model="ruleForm.country" placeholder="请输入国家" />
+              <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">
@@ -121,7 +143,7 @@ function showSelectDrawer() {
             <el-col :span="6">
               <el-form-item class="font-medium" label="货币代码" prop="currency_code">
                 <el-select v-model="ruleForm.currency_code" placeholder="请选择货币代码">
-                  <el-option label="1" value="1"></el-option>
+                  <el-option v-for="item in currencyCodeOptions" :label="item" :value="item" />
                 </el-select>
               </el-form-item>
             </el-col>
@@ -154,19 +176,32 @@ function showSelectDrawer() {
             </el-col>
             <el-col :span="6">
               <el-form-item class="font-medium" label="成 本" prop="cost">
-                <el-button :icon="Select" class="w-full" plain type="primary" @click="showSelectDrawer">选 择</el-button>
+                <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-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">
-                <el-input v-model="ruleForm.country" placeholder="请输入国家" />
+              <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">
@@ -189,7 +224,7 @@ function showSelectDrawer() {
             <el-col :span="6">
               <el-form-item class="font-medium" label="货币代码" prop="currency_code">
                 <el-select v-model="ruleForm.currency_code" placeholder="请选择货币代码">
-                  <el-option label="1" value="1"></el-option>
+                  <el-option v-for="item in currencyCodeOptions" :label="item" :value="item" />
                 </el-select>
               </el-form-item>
             </el-col>
@@ -222,9 +257,21 @@ function showSelectDrawer() {
             </el-col>
             <el-col :span="6">
               <el-form-item class="font-medium" label="成 本" prop="cost">
-                <el-button :icon="Select" class="w-full" plain type="primary" @click="showSelectDrawer">
+                <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>
@@ -237,7 +284,8 @@ function showSelectDrawer() {
         </div>
       </template>
     </el-card>
-    <SelectDrawer v-if="isShow" v-model="isShow" :title="routeQuery.type === 'supply' ? '供货' : '直销'" />
+    <SelectDrawer v-if="isShow" v-model="isShow" :title="routeQuery.type === 'supply' ? '供货' : '直销'"
+                  @sendCheckId="getCheckId" />
   </div>
 </template>
 

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

@@ -9,11 +9,10 @@ import { hasPermission } from '/@/utils/hasPermission';
 import { Plus, Refresh } from '@element-plus/icons-vue';
 import VerticalDivider from '/@/components/VerticalDivider/index.vue';
 import PermissionButton from '/@/components/PermissionButton/index.vue';
-import DataTableSlot from '/@/views/price-approval/cost-detail/component/DataTableSlot.vue';
 import { usePagination } from '/@/utils/usePagination';
 import { useTableData } from '/@/utils/useTableData';
 import * as api from '../api';
-import { CostDetailColumns, CostSelectColumns } from '/@/views/price-approval/Columns';
+import { CostSelectColumns } from '/@/views/price-approval/Columns';
 import { useResponse } from '/@/utils/useResponse';
 import CreateDialog from '/@/views/price-approval/cost-detail/component/CreateDialog.vue';
 
@@ -26,6 +25,10 @@ const props = defineProps({
 });
 const { rowData, title } = props;
 
+const emit = defineEmits(['sendCheckId']);
+
+const editDrawer = ref();
+
 const queryRow = reactive<any>({});
 
 const platformOptions = ref([]);
@@ -36,6 +39,8 @@ const createOpen = ref(false);
 
 const { tableOptions, handlePageChange } = usePagination(fetchList);
 
+const checkedId = ref(null);
+
 const gridRef = ref();
 const gridOptions: any = reactive({
   size: 'mini',
@@ -55,6 +60,9 @@ const gridOptions: any = reactive({
   rowConfig: {
     isHover: true
   },
+  radioConfig: {
+    strict: false
+  },
   pagerConfig: {
     total: tableOptions.value.total,
     page: tableOptions.value.page,
@@ -69,6 +77,11 @@ const gridOptions: any = reactive({
   data: ''
 });
 
+onBeforeMount(() => {
+  fetchList();
+  fetchOptions();
+});
+
 async function fetchList(isQuery = false) {
   if (isQuery) {
     gridOptions.pagerConfig.page = 1;
@@ -84,7 +97,7 @@ async function fetchList(isQuery = false) {
   };
 
   await useTableData(api.getTableData, query, gridOptions);
-  await gridRef.value.loadColumn(CostSelectColumns);
+  if (gridOptions && gridOptions.data?.length) await gridRef.value.loadColumn(CostSelectColumns);
   gridOptions.showHeader = Boolean(gridOptions.data?.length);
 }
 
@@ -102,10 +115,16 @@ async function fetchOptions() {
   stationOptions.value = resp.station_list;
 }
 
-onBeforeMount(() => {
-  fetchList();
-  fetchOptions();
-});
+function radioChangeEvent({ row }: any) {
+  checkedId.value = row.id;
+  if (checkedId.value) {
+    emit('sendCheckId', checkedId);
+    editDrawer.value.handleClose();
+  }
+}
+
+defineExpose({ editDrawer });
+
 </script>
 
 <template>
@@ -121,6 +140,7 @@ onBeforeMount(() => {
         style="background-color:#F3F4FB;">
       <div class="px-5 mb-5">
         <el-card class="border-none mt-2">
+          <!-- 查询条件 -->
           <div class="flex flex-1">
             <div class="w-full whitespace-nowrap">
               <el-row :gutter="20" style="margin-bottom: 5px">
@@ -150,7 +170,7 @@ onBeforeMount(() => {
             </div>
           </div>
           <el-divider />
-          <vxe-grid ref="gridRef" class="z-0" v-bind="gridOptions">
+          <vxe-grid ref="gridRef" class="z-0" v-bind="gridOptions" @radio-change="radioChangeEvent">
             <template #toolbar_buttons>
               <div class="flex gap-2">
                 <PermissionButton v-if="hasPermission('ReviewCreate')" :icon="Plus" plain round type="primary"

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

@@ -103,9 +103,7 @@ async function fetchList(isQuery = false) {
   };
 
   await useTableData(api.getTableData, query, gridOptions);
-  if (gridOptions && gridOptions.data?.length) {
-    await gridRef.value.loadColumn(DirectSalesCheckColumns_Special);
-  }
+  if (gridOptions && gridOptions.data?.length) await gridRef.value.loadColumn(DirectSalesCheckColumns_Special);
   gridOptions.showHeader = Boolean(gridOptions.data?.length);
 }
 
@@ -134,7 +132,7 @@ async function handleDownload() {
 }
 
 function handleCreate() {
-  router.push({ name: 'AddPage', query: { type: 'direct' } });
+  router.push({ path: '/addPage', query: { type: 'direct' } });
 }
 
 function handleEdit(row: any) {

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

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 /**
  * @Name: DataTableSlot.vue
  * @Description: 审批查看（直接销售）数据表格插槽
@@ -6,13 +6,14 @@
  */
 
 import { hasPermission } from '/@/utils/hasPermission';
-import { Delete, InfoFilled, Key, Operation, View } from '@element-plus/icons-vue';
+import { Delete, InfoFilled, Operation } from '@element-plus/icons-vue';
 import PermissionButton from '/@/components/PermissionButton/index.vue';
 import { useCountryInfoStore } from '/@/stores/countryInfo';
 
+
 const props = defineProps<{
-	row: any;
-	field: any;
+  row: any;
+  field: any;
 }>();
 const { row, field } = props;
 
@@ -23,55 +24,55 @@ const country = countryInfoStore.Countries.find(c => c.code == row.country_code)
 const color = country ? country.color : '#3875F6';
 
 function handleEdit() {
-	emit('edit-row', row);
+  emit('edit-row', row);
 }
 
 function onConfirm() {
-	emit('handle-delete', row);
+  emit('handle-delete', row);
 }
 
 </script>
 
 <template>
-	<div class="font-medium">
-		<div v-if="field === 'operate'">
-			<div class="flex justify-center gap-2">
-				<div v-if="hasPermission('SkuAttrUpdate')">
-					<PermissionButton circle plain type="warning" @click="handleEdit">
-						<el-icon>
-							<Operation />
-						</el-icon>
-					</PermissionButton>
-				</div>
-				<div v-if="hasPermission('SkuAttrDelete')">
-					<el-popconfirm :icon="InfoFilled" icon-color="#626AEF" title="你确定要删除此项吗?" width="220"
-												 @confirm="onConfirm">
-						<template #reference>
-							<PermissionButton circle plain type="danger">
-								<el-icon>
-									<Delete />
-								</el-icon>
-							</PermissionButton>
-						</template>
-						<template #actions="{ confirm, cancel }">
-							<el-button size="small" @click="cancel">No!</el-button>
-							<el-button size="small" type="danger" @click="confirm"> Yes?</el-button>
-						</template>
-					</el-popconfirm>
-				</div>
-			</div>
-		</div>
-		<div v-else-if="field === 'country_code'">
-			<el-tag :disable-transitions="true" :style="{ color: color, borderColor: color }" effect="plain" round>
-				{{ country ? country.name : '-' }}
-			</el-tag>
-		</div>
-		<div v-else>
-			{{ row[field] || '-' }}
-		</div>
-	</div>
+  <div class="font-medium">
+    <div v-if="field === 'operate'">
+      <div class="flex justify-center gap-2">
+        <div v-if="hasPermission('SkuAttrUpdate')">
+          <PermissionButton circle plain type="warning" @click="handleEdit">
+            <el-icon>
+              <Operation />
+            </el-icon>
+          </PermissionButton>
+        </div>
+        <div v-if="hasPermission('SkuAttrDelete')">
+          <el-popconfirm :icon="InfoFilled" icon-color="#626AEF" title="你确定要删除此项吗?" width="220"
+                         @confirm="onConfirm">
+            <template #reference>
+              <PermissionButton circle plain type="danger">
+                <el-icon>
+                  <Delete />
+                </el-icon>
+              </PermissionButton>
+            </template>
+            <template #actions="{ confirm, cancel }">
+              <el-button size="small" @click="cancel">No!</el-button>
+              <el-button size="small" type="danger" @click="confirm"> Yes?</el-button>
+            </template>
+          </el-popconfirm>
+        </div>
+      </div>
+    </div>
+    <div v-else-if="field === 'country_code'">
+      <el-tag :disable-transitions="true" :style="{ color: color, borderColor: color }" effect="plain" round>
+        {{ country ? country.name : '-' }}
+      </el-tag>
+    </div>
+    <div v-else>
+      {{ row[field] || '-' }}
+    </div>
+  </div>
 </template>
 
 <style scoped>
 
-</style>
+</style>

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

@@ -19,139 +19,140 @@ const editOpen = defineModel({ default: false });
 const editDrawer = <Ref>useTemplateRef('editDrawer');
 
 const props: any = defineProps({
-	rowData: Object,
+  rowData: Object
 });
 const { rowData } = props;
 
-const emit = defineEmits(['refresh']);
+const emit = defineEmits([ 'refresh' ]);
 
 interface RuleForm {
-	sku: string;
-	weight: string;
-	platform: string;
-	country_code:string;
-	currency_code: string;
-	estimated_cost: string;
-	price_show: string;
-	price_daily: string;
-	price_min: string;
-	final_cost: string;
-	sales_mode: string;
-	cost: string;
+  sku: string;
+  weight: string;
+  platform: string;
+  country_code: string;
+  currency_code: string;
+  estimated_cost: string;
+  price_show: string;
+  price_daily: string;
+  price_min: string;
+  final_cost: string;
+  sales_mode: string;
+  cost: string;
 }
 
 const ruleFormRef = ref<FormInstance>();
 const ruleForm = reactive<RuleForm>({
-	sku: rowData.sku,
-	weight: rowData.weight,
-	platform: rowData.platform,
-	country_code:rowData.country_code,
-	currency_code: rowData.currency_code,
-	estimated_cost: rowData.estimated_cost,
-	price_show: rowData.price_show,
-	price_daily: rowData.price_daily,
-	price_min: rowData.price_min,
-	final_cost: rowData.final_cost,
-	sales_mode: rowData.sales_mode,
-	cost: rowData.cost,
+  sku: rowData.sku,
+  weight: rowData.weight,
+  platform: rowData.platform,
+  country_code: rowData.country_code,
+  currency_code: rowData.currency_code,
+  estimated_cost: rowData.estimated_cost,
+  price_show: rowData.price_show,
+  price_daily: rowData.price_daily,
+  price_min: rowData.price_min,
+  final_cost: rowData.final_cost,
+  sales_mode: rowData.sales_mode,
+  cost: rowData.cost
 });
 
 const rules = reactive<FormRules<RuleForm>>({});
 
 const submitForm = async (formEl: FormInstance | undefined) => {
-	if (!formEl) return;
-	await formEl.validate(async (valid, fields) => {
-		if (valid) {
-			try {
-				const res = await useResponse(api.updateRow, { id: rowData?.id, ...ruleForm }, btnLoading);
-				if (res && res.code == 2000) {
-					editOpen.value = false;
-					ElMessage.success({ message: '编辑成功', plain: true, icon: 'Operation' });
-					emit('refresh');
-				}
-			} catch (error) {
-				console.error('Error==>', error);
-			}
-		} else {
-			console.log('error submit!', fields);
-		}
-	});
+  if (!formEl) return;
+  await formEl.validate(async (valid, fields) => {
+    if (valid) {
+      try {
+        const res = await useResponse(api.updateRow, { id: rowData?.id, ...ruleForm }, btnLoading);
+        if (res && res.code == 2000) {
+          editOpen.value = false;
+          ElMessage.success({ message: '编辑成功', plain: true, icon: 'Operation' });
+          emit('refresh');
+        }
+      } catch (error) {
+        console.error('Error==>', error);
+      }
+    } else {
+      console.log('error submit!', fields);
+    }
+  });
 };
 
 function closeDrawer() {
-	editDrawer.value.handleClose();
+  editDrawer.value.handleClose();
 }
 </script>
 
 <template>
-	<div class="drawer-container">
-		<el-drawer
-			ref="editDrawer"
-			v-model="editOpen"
-			:close-on-click-modal="false"
-			:close-on-press-escape="false"
-			: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-item class="font-medium" label="SKU" prop="sku">
-					<el-input v-model="ruleForm.sku" placeholder="请输入SKU" />
-				</el-form-item>
-				<el-form-item class="font-medium" label="重量(KG)" prop="weight">
-					<el-input v-model="ruleForm.weight" placeholder="请输入重量"></el-input>
-				</el-form-item>
-				<el-form-item class="font-medium" label="平 台" prop="platform">
-					<el-input v-model="ruleForm.platform" placeholder="请输入平台"></el-input>
-				</el-form-item>
-				<el-form-item class="font-medium" label="国 家" prop="country_code">
-					<el-select v-model="ruleForm.currency_code" placeholder="请选择货币代码">
-						<el-option v-for="item in countryOptions" :key="item" :label="item" :value="item"></el-option>
-					</el-select>
-				</el-form-item>
-				<el-form-item class="font-medium" label="货币代码" prop="currency_code">
-					<el-input v-model="ruleForm.currency_code" placeholder="请输入货币代码"></el-input>
-				</el-form-item>
-				<el-form-item class="font-medium" label="预估硬件成本" prop="estimated_cost">
-					<el-input v-model="ruleForm.estimated_cost" placeholder="请输入预估硬件成本"></el-input>
-				</el-form-item>
-				<el-form-item class="font-medium" label="展示价格(外币)" prop="price_show">
-					<el-input v-model="ruleForm.price_show" placeholder="请输入展示价格(外币)"></el-input>
-				</el-form-item>
-				<el-form-item class="font-medium" label="日常活动售价(外币)" prop="price_daily">
-					<el-input v-model="ruleForm.price_daily" placeholder="请输入展示价格(外币)"></el-input>
-				</el-form-item>
-				<el-form-item class="font-medium" label="最低售价(外币)" prop="price_min">
-					<el-input v-model="ruleForm.price_min" placeholder="请输入最低售价(外币)"></el-input>
-				</el-form-item>
-				<el-form-item class="font-medium" label="尾程费用(外币)" prop="final_cost">
-					<el-input v-model="ruleForm.final_cost" placeholder="请输入尾程费用(外币)"></el-input>
-				</el-form-item>
-				<el-form-item class="font-medium" label="销售模式" prop="sales_mode">
-					<el-input v-model="ruleForm.sales_mode" 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-form-item>
-				<el-form-item>
-					<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>
-					</div>
-				</el-form-item>
-			</el-form>
-		</el-drawer>
-	</div>
+  <div class="drawer-container">
+    <el-drawer
+        ref="editDrawer"
+        v-model="editOpen"
+        :close-on-click-modal="false"
+        :close-on-press-escape="false"
+        :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-item class="font-medium" label="SKU" prop="sku">
+          <el-input v-model="ruleForm.sku" placeholder="请输入SKU" />
+        </el-form-item>
+        <el-form-item class="font-medium" label="重量(KG)" prop="weight">
+          <el-input v-model="ruleForm.weight" placeholder="请输入重量"></el-input>
+        </el-form-item>
+        <el-form-item class="font-medium" label="平 台" prop="platform">
+          <el-input v-model="ruleForm.platform" placeholder="请输入平台"></el-input>
+        </el-form-item>
+        <el-form-item class="font-medium" label="国 家" prop="country_code">
+          <el-select v-model="ruleForm.currency_code" placeholder="请选择货币代码">
+            <el-option v-for="item in countryOptions" :key="item" :label="item" :value="item"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item class="font-medium" label="货币代码" prop="currency_code">
+          <el-input v-model="ruleForm.currency_code" placeholder="请输入货币代码"></el-input>
+        </el-form-item>
+        <el-form-item class="font-medium" label="预估硬件成本" prop="estimated_cost">
+          <el-input v-model="ruleForm.estimated_cost" placeholder="请输入预估硬件成本"></el-input>
+        </el-form-item>
+        <el-form-item class="font-medium" label="展示价格(外币)" prop="price_show">
+          <el-input v-model="ruleForm.price_show" placeholder="请输入展示价格(外币)"></el-input>
+        </el-form-item>
+        <el-form-item class="font-medium" label="日常活动售价(外币)" prop="price_daily">
+          <el-input v-model="ruleForm.price_daily" placeholder="请输入展示价格(外币)"></el-input>
+        </el-form-item>
+        <el-form-item class="font-medium" label="最低售价(外币)" prop="price_min">
+          <el-input v-model="ruleForm.price_min" placeholder="请输入最低售价(外币)"></el-input>
+        </el-form-item>
+        <el-form-item class="font-medium" label="尾程费用(外币)" prop="final_cost">
+          <el-input v-model="ruleForm.final_cost" placeholder="请输入尾程费用(外币)"></el-input>
+        </el-form-item>
+        <el-form-item class="font-medium" label="销售模式" prop="sales_mode">
+          <el-input v-model="ruleForm.sales_mode" 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-form-item>
+        <el-form-item>
+          <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>
+          </div>
+        </el-form-item>
+      </el-form>
+    </el-drawer>
+  </div>
 </template>
 
 <style scoped>
 .drawer-container :deep(.el-drawer__header) {
-	border-bottom: none;
-	font-weight: 500;
+  border-bottom: none;
+  font-weight: 500;
 }
 
 .drawer-container :deep(.el-drawer__title) {
-	font-size: 18px;
+  font-size: 18px;
 }
 </style>