feat(product-manage): 更新产品列表编辑功能

- 新增 updateRow 接口用于更新产品信息- 重构 EditDrawer 组件，实现产品信息编辑功能
-优化 DataTable 组件，支持编辑后刷新
- 更新主页面逻辑，统一获取所有选项数据

src/utils/useResponse.ts

@@ -1,7 +1,7 @@
 /**
  * 请求响应处理
- * @param parameter 请求参数
  * @param requestApi 请求接口
+ * @param parameter 请求参数
  * @param loadingOrOptions ref-loading | vxe-loading (ref | obj)
  */
 export async function useResponse(

src/views/product-manage/product-list/api.ts

@@ -11,6 +11,14 @@ export function getTableData(query: any) {
   });
 }
 
+export function updateRow(body: any) {
+  return request({
+    url: apiPrefix + body.id + '/',
+    method: 'PUT',
+    data: body
+  });
+}
+
 export function getGroupOptions() {
   return request({
     url: apiPrefix + 'tags/',
@@ -18,11 +26,15 @@ export function getGroupOptions() {
   });
 }
 
-export function getBrandsOptions(query: any) {
+export function getBrandsOptions() {
   return request({
     url: apiPrefix + 'brands/',
+  });
+}
+export function getShopOptions() {
+  return request({
+    url: '/api/choice/marketplace_shops/select/',
     method: 'GET',
-    params: query
   });
 }
 

src/views/product-manage/product-list/component/DataTable.vue

@@ -228,7 +228,7 @@ defineExpose({ fetchList });
       <DataTableSlot :key="row.id" :field="col.field" :row="row" @edit-row="handleEdit" @handle-notice="handleNotice" />
     </template>
   </vxe-grid>
-  <EditDrawer v-if="editOpen" v-model="editOpen" :row-data="rowData" />
+  <EditDrawer v-if="editOpen" v-model="editOpen" :row-data="rowData" @refresh="handleRefresh" />
   <NoticeDialog v-if="dialogVisible" v-model="dialogVisible" :row-data="rowData" />
 </template>
 

src/views/product-manage/product-list/component/EditDrawer.vue

@@ -6,67 +6,74 @@
  */
 
 import { ElMessage, FormInstance, FormRules } from 'element-plus';
+import { Finished } from '@element-plus/icons-vue';
+import * as api from '../api';
 
 
-const loading = ref(false);
+const shopOptions = <Ref>inject('shopOptions');
+const groupOptions = <Ref>inject('groupOptions');
+
+const btnLoading = ref(false);
+
 const editOpen = defineModel({ default: false });
-const { rowData } = defineProps<{
-  rowData: object;
-}>();
+
+const props = defineProps({
+  rowData: Object
+});
+const { rowData } = props;
 
 const emit = defineEmits([ 'refresh' ]);
 
 onBeforeMount(() => {
-  // replaceCol();
   console.log('rowData=> ', rowData);
 });
 
 interface RuleForm {
-  operatorName: any,
-  country: any
+  sku: any,
+  shop_name: any,
+  shop_id: any,
+  tag: any,
+  show_price: any,
+  activity_price: any,
+  minimum_price: any,
 }
 
 const ruleFormRef = ref<FormInstance>();
 const ruleForm = reactive<RuleForm>({
-  operatorName: '',
-  country: ''
+  sku: rowData?.sku,
+  shop_name: rowData?.shop_name,
+  shop_id: rowData?.shop_id,
+  tag: rowData?.tag,
+  show_price: rowData?.show_price,
+  activity_price: rowData?.activity_price,
+  minimum_price: rowData?.minimum_price
 });
 
-const rules = reactive<FormRules<RuleForm>>({
-  operatorName: [
-    { message: 'Please input operator name', trigger: 'blur' }
-  ]
-
-});
+const rules = reactive<FormRules<RuleForm>>({});
 
 const submitForm = async (formEl: FormInstance | undefined) => {
   if (!formEl) return;
   await formEl.validate(async (valid, fields) => {
     if (valid) {
-      // await useResponse({ id: gridOptions.data[0].id, partial: 1, formData: ruleForm }, api.updateShopDetail, loading);
-      editOpen.value = false;
-      ElMessage.success('编辑成功');
-      emit('refresh');
+      const body = {
+        id: rowData?.id,
+        ...ruleForm,
+      }
+      try {
+        const res = await useResponse( api.updateRow, body, btnLoading);
+        if (res && res.code == 2000) {
+          editOpen.value = false;
+          ElMessage.success('编辑成功');
+          emit('refresh');
+        }
+      } catch (error) {
+        console.error('Error==>', error);
+      }
     } else {
       console.log('error submit!', fields);
     }
   });
 };
-
-const resetForm = (formEl: FormInstance | undefined) => {
-  if (!formEl) return;
-  formEl.resetFields();
-};
-
-// function replaceCol() {
-//   const result = Object.keys(ruleForm).reduce((acc, key) => {
-//     if (key in gridOptions.data[0]) {
-//       acc[key] = gridOptions.data[0][key];
-//     }
-//     return acc;
-//   }, {} as { [key: string]: any });
-//   Object.assign(ruleForm, result);
-// }
 </script>
 
 <template>
@@ -82,25 +89,35 @@ const resetForm = (formEl: FormInstance | undefined) => {
         class="mx-2.5 mt-2.5"
         label-width="auto"
         status-icon>
-      <el-form-item label="运营" prop="operatorName">
-        <el-input v-model="ruleForm.operatorName"/>
+      <el-form-item label="SKU" prop="sku">
+        <el-input v-model="ruleForm.sku" />
       </el-form-item>
-
-      <el-form-item label="国家" prop="country">
-        <!--<el-select v-model="ruleForm.country" placeholder="请选择线路">-->
-        <!--  <el-option-->
-        <!--      v-for="item in rowData.country"-->
-        <!--      :key="item"-->
-        <!--      :label="item"-->
-        <!--      :value="item">-->
-        <!--  </el-option>-->
-        <!--</el-select>-->
+      <el-form-item label="店 铺" prop="shop_name">
+        <el-select v-model="ruleForm.shop_name">
+          <el-option v-for="item in shopOptions" :key="item.id" :label="item.name" :value="item.id" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="分 组" prop="tag">
+        <el-select v-model="ruleForm.tag">
+          <el-option v-for="item in groupOptions" :label="item.tag" :value="item.tag" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="展示价格" prop="show_price">
+        <el-input v-model="ruleForm.show_price" />
+      </el-form-item>
+      <el-form-item label="平时活动售价" prop="activity_price">
+        <el-input v-model="ruleForm.activity_price" />
+      </el-form-item>
+      <el-form-item label="最低活动售价" prop="minimum_price">
+        <el-input v-model="ruleForm.minimum_price" />
       </el-form-item>
       <el-form-item>
         <el-divider />
-        <div class="flex flex-1 justify-center">
-          <el-button :loading="loading" type="primary" @click="submitForm(ruleFormRef)">确 定</el-button>
-          <el-button @click="resetForm(ruleFormRef)">重 置</el-button>
+        <div class="flex flex-1 justify-end">
+          <el-button :icon="Finished" :loading="btnLoading" plain type="primary" @click="submitForm(ruleFormRef)">
+            确 定
+          </el-button>
+          <!--<el-button @click="resetForm(ruleFormRef)">重 置</el-button>-->
         </div>
       </el-form-item>
     </el-form>

src/views/product-manage/product-list/index.vue

@@ -38,20 +38,30 @@ provide('query-parameter', formInline);
 
 const groupOptions: any = ref([]);
 const brandsOptions: any = ref([]);
+const shopOptions: any = ref([]);
+
+provide('groupOptions', groupOptions);
+provide('brandsOptions', brandsOptions);
+provide('shopOptions', shopOptions);
 
 onBeforeMount(() => {
-  fetchGroupOptions();
-  fetchBrandsOptions();
+  fetchAllOptions();
 });
 
-async function fetchGroupOptions() {
-  const res = await useResponse(api.getGroupOptions);
-  groupOptions.value = res.data;
-}
+async function fetchAllOptions() {
+  try {
+    const [ groupRes, brandsRes, shopRes ] = await Promise.all([
+      useResponse(api.getGroupOptions),
+      useResponse(api.getBrandsOptions),
+      useResponse(api.getShopOptions)
+    ]);
 
-async function fetchBrandsOptions() {
-  const res = await useResponse(api.getBrandsOptions);
-  brandsOptions.value = res.data;
+    groupOptions.value = groupRes.data;
+    brandsOptions.value = brandsRes.data;
+    shopOptions.value = shopRes.data;
+  } catch (error) {
+    console.error('Error fetching options: ', error);
+  }
 }
 
 async function handleQuery() {