refactor(price-approval): 重构商品添加页面

- 将 AddPage.vue 从 approval-review-supply 组件中移出，放入 components 目录
- 更新 DataTable.vue 中的路由跳转，使用新的 AddPage 路由
- 新增 SelectDrawer.vue 组件用于成本选择
- 调整 AddPage.vue 结构，集成新的成本选择功能

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

@@ -155,7 +155,7 @@ function selectAllChangeEvent({ checked }: any) {
 }
 
 function handleCreate() {
-  router.push({ name: 'SupplyAddPage', query: { type: 'supply' } });
+  router.push({ name: 'AddPage', query: { type: 'supply' } });
 }
 
 function handleEdit(row: any) {

src/views/price-approval/approval-review-supply/index.vue

@@ -10,7 +10,7 @@ import { RefreshLeft, Search } from '@element-plus/icons-vue';
 import { useResponse } from '/@/utils/useResponse';
 import { useTemplateRef } from 'vue';
 import * as api from './api';
-import DataTable from './component/DataTable.vue';
+import DataTable from '/@/views/price-approval/approval-review-supply/components/DataTable.vue';
 import { useTableHeight } from '/@/utils/useTableHeight';
 
 

src/views/price-approval/approval-review-supply/component/AddPage.vue → src/views/price-approval/components/AddPage.vue

@@ -7,11 +7,16 @@
 
 import { FormInstance, FormRules } from 'element-plus';
 import { Finished, RefreshLeft, Select } from '@element-plus/icons-vue';
+import SelectDrawer from './SelectDrawer.vue';
 
 
 const route = useRoute();
 const routeQuery: any = ref(route.query);
 
+const loading = ref(false);
+
+const isShow = ref(false);
+
 interface RuleForm {
   country: any;
   platform: any;
@@ -56,8 +61,6 @@ const rules = reactive<FormRules<RuleForm>>({
   estimated_cost: [ { required: true, message: '请输入预估成本', trigger: 'blur' } ]
 });
 
-const loading = ref(false);
-
 const submitForm = async (formEl: FormInstance | undefined) => {
   if (!formEl) return;
   await formEl.validate((valid, fields) => {
@@ -73,6 +76,10 @@ const resetForm = (formEl: FormInstance | undefined) => {
   if (!formEl) return;
   formEl.resetFields();
 };
+
+function showSelectDrawer() {
+  isShow.value = true;
+}
 </script>
 
 <template>
@@ -80,7 +87,7 @@ const resetForm = (formEl: FormInstance | undefined) => {
     <el-card class="h-full" style="color: rgba(0, 0, 0, 0.88);">
       <template #header>
       <span class="text-lg">
-        商品添加 -- {{ routeQuery.type === 'supply' ? '供货' : '直销' }}
+        商品添加 --> {{ routeQuery.type === 'supply' ? '供货' : '直销' }}
       </span>
       </template>
       <div class="w-full">
@@ -147,7 +154,7 @@ const resetForm = (formEl: FormInstance | undefined) => {
             </el-col>
             <el-col :span="6">
               <el-form-item class="font-medium" label="成 本" prop="cost">
-                <el-button v-model="ruleForm.cost" :icon="Select" class="w-full" plain type="primary">选 择</el-button>
+                <el-button :icon="Select" class="w-full" plain type="primary" @click="showSelectDrawer">选 择</el-button>
               </el-form-item>
             </el-col>
           </el-row>
@@ -215,7 +222,9 @@ const resetForm = (formEl: FormInstance | undefined) => {
             </el-col>
             <el-col :span="6">
               <el-form-item class="font-medium" label="成 本" prop="cost">
-                <el-button v-model="ruleForm.cost" :icon="Select" class="w-full" plain type="primary">选 择</el-button>
+                <el-button :icon="Select" class="w-full" plain type="primary" @click="showSelectDrawer">
+                  选 择
+                </el-button>
               </el-form-item>
             </el-col>
           </el-row>
@@ -228,6 +237,7 @@ const resetForm = (formEl: FormInstance | undefined) => {
         </div>
       </template>
     </el-card>
+    <SelectDrawer v-if="isShow" v-model="isShow" :title="routeQuery.type === 'supply' ? '供货' : '直销'" />
   </div>
 </template>
 

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

@@ -0,0 +1,78 @@
+<script lang="ts" setup>/**
+ * @Name: SelectDrawer.vue
+ * @Description: 成本选择抽屉
+ * @Author: Cheney
+ */
+
+const isShow = defineModel({ default: false });
+
+const props = defineProps({
+  rowData: <any>Object,
+  title: String
+});
+const { rowData, title } = props;
+
+const queryRow = reactive<any>({});
+
+const platformOptions = ref([]);
+</script>
+
+<template>
+  <div class="drawer-container">
+    <el-drawer
+        ref="editDrawer"
+        v-model="isShow"
+        :destroy-on-close="true"
+        :show-close="false"
+        :title="`商品添加 --> ${title} --> 成本选择`"
+        direction="btt"
+        size="70%"
+        style="background-color:#F3F4FB;">
+      <div class="sticky top-0" style="background-color:#F3F4FB; min-height: 20px;"></div>
+      <div class="px-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">
+                <el-col :span="5">
+                  <div class="flex items-center">
+                    <span class="mr-2">描 述</span>
+                    <el-input v-model="queryRow.description" clearable placeholder="请输入SKU" />
+                  </div>
+                </el-col>
+                <el-col :span="5" class="flex">
+                  <div class="flex items-center">
+                    <span class="mr-2">地 区</span>
+                    <el-select v-model="queryRow.station" clearable placeholder="请选择地区">
+                      <el-option></el-option>
+                    </el-select>
+                  </div>
+                </el-col>
+                <el-col :span="5">
+                  <div class="flex items-center">
+                    <span class="mr-2">平 台</span>
+                    <el-select v-model="queryRow.platform" placeholder="请选择平台">
+                      <el-option v-for="item in platformOptions" :key="item" :label="item" :value="item"></el-option>
+                    </el-select>
+                  </div>
+                </el-col>
+              </el-row>
+            </div>
+          </div>
+        </el-card>
+      </div>
+
+    </el-drawer>
+  </div>
+</template>
+
+<style scoped>
+.drawer-container :deep(.el-drawer__header) {
+  border-bottom: none;
+  font-weight: 500;
+}
+
+.drawer-container :deep(.el-drawer__title) {
+  font-size: 18px;
+}
+</style>

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

@@ -159,7 +159,7 @@ function selectAllChangeEvent({ checked }: any) {
 }
 
 function handleCreate() {
-  router.push({ name: 'SupplyAddPage', query: { type: 'direct' } });
+  router.push({ name: 'AddPage', query: { type: 'direct' } });
 }
 
 function handleEdit(row: any) {