feat(product-monitor): 添加删除功能并优化表格展示

- 新增 deleteRow 函数实现删除功能
- 在 DataTable 组件中集成删除功能，包括弹窗确认和刷新列表
- 优化产品监控和产品列表的表格列固定
- 更新 DataTableSlot 组件，使用 el-popconfirm 实现删除确认弹窗

src/views/product-manage/product-list/ColumnsTsx.tsx

@@ -2,11 +2,11 @@ export const productColumns = [
   { type: 'checkbox', minWidth: 50, align: 'center', fixed: 'left' },
   // { type: 'seq', title: 'No.', minWidth: 60, align: 'center' },
   {
-    field: 'is_monitor', title: '监控管理', minWidth: 90, align: 'center',
+    field: 'is_monitor', title: '监控管理', minWidth: 90, align: 'center', fixed: 'left',
     slots: { default: 'is_monitor' }
   },
   {
-    field: 'product_info', title: '商品信息', minWidth: 240, align: 'center',
+    field: 'product_info', title: '商品信息', minWidth: 240, align: 'center', fixed: 'left',
     slots: { default: 'product_info' }
   },
   {

src/views/product-manage/product-monitor/ColumnsTsx.tsx

@@ -2,7 +2,7 @@ export const productColumns = [
   { type: 'checkbox', minWidth: 50, align: 'center', fixed: 'left' },
   // { type: 'seq', title: 'No.', minWidth: 60, align: 'center', fixed: 'left' },
   {
-    field: 'product_info', title: '商品信息', minWidth: 240, align: 'center',
+    field: 'product_info', title: '商品信息', minWidth: 240, align: 'center', fixed: 'left',
     slots: { default: 'product_info' }
   },
   {

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

@@ -44,6 +44,14 @@ export function updateRow(body: any) {
   });
 }
 
+export function deleteRow(body: any) {
+  return request({
+    url: apiPrefix + `reviews_monitor/${body.id}/` ,
+    method: 'DELETE',
+    data: body
+  });
+}
+
 export function updateShopDetail(body: any) {
   return request({
     url: apiPrefix + `${ body.id }/`,

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

@@ -13,6 +13,8 @@ import ImportButton from '/src/components/ImportButton/index.vue';
 import VerticalDivider from '/src/components/VerticalDivider/index.vue';
 import { productColumns } from '../ColumnsTsx';
 import DataTableSlot from '/@/views/product-manage/product-monitor/component/DataTableSlot.vue';
+import { deleteRow } from '../api';
+import { ElMessage } from 'element-plus';
 
 
 interface Parameter {
@@ -34,7 +36,7 @@ const { tableOptions, handlePageChange } = usePagination(fetchList);
 
 const gridRef = ref();
 const gridOptions: any = reactive({
-  size: "mini",
+  size: 'mini',
   border: false,
   round: true,
   stripe: true,
@@ -78,7 +80,7 @@ const dialogVisible = ref(false);
 
 const templateType = ref();
 
-onMounted( () => {
+onMounted(() => {
   fetchList();
 });
 
@@ -145,9 +147,12 @@ function handleEdit(row: any) {
   rowData.value = row;
 }
 
-function singleDelete(row: any) {
-  // dialogVisible.value = true;
-  rowData.value = row;
+async function singleDelete(row: any) {
+  const res = await useResponse(api.deleteRow, row);
+  if (res.code === 2000) {
+    ElMessage.success({ message: '删除成功', plain: true });
+    handleRefresh();
+  }
 }
 
 function downloadTemplate() {
@@ -159,9 +164,9 @@ defineExpose({ fetchList });
 </script>
 
 <template>
-  <vxe-grid ref="gridRef" v-bind="gridOptions"
-            :auto-resize="true"
+  <vxe-grid ref="gridRef" :auto-resize="true"
             :sync-resize="true"
+            v-bind="gridOptions"
             @checkbox-change="selectChangeEvent"
             @checkbox-all="selectAllChangeEvent">
     <template #toolbar_buttons>

src/views/product-manage/product-monitor/component/DataTableSlot.vue

@@ -6,7 +6,7 @@
  */
 
 import { useCountryInfoStore } from '/@/stores/countryInfo';
-import { Delete, Operation } from '@element-plus/icons-vue';
+import { Delete, InfoFilled, Operation } from '@element-plus/icons-vue';
 import PermissionButton from '/@/components/PermissionButton/index.vue';
 import ProductInfo from '/@/views/product-manage/product-list/component/ProductInfo.vue';
 import { getTagType } from '/@/utils/useTagColor';
@@ -28,11 +28,17 @@ const color = country ? country.color : '#3875F6';
 const statusText = row.status === 1 ? '在售' : '停售';
 const statusType = row.status === 1 ? 'success' : 'info';
 
-function handleEdit(row: any) {
+const clicked = ref(false)
+
+function onCancel(val) {
+  console.log('val=> ', val);
+}
+
+function handleEdit() {
   emit('edit-row', row);
 }
 
-function handleDelete(row: any) {
+function onConfirm() {
   emit('handle-delete', row);
 }
 </script>
@@ -130,16 +136,39 @@ function handleDelete(row: any) {
     </div>
     <div v-else-if="field === 'operate'">
       <div class="flex justify-center gap-2">
-        <PermissionButton circle plain type="warning" @click="handleEdit(row)">
+        <PermissionButton circle plain type="warning" @click="handleEdit()">
           <el-icon>
             <Operation />
           </el-icon>
         </PermissionButton>
-        <PermissionButton circle plain type="danger" @click="handleDelete(row)">
-          <el-icon>
-            <Delete />
-          </el-icon>
-        </PermissionButton>
+        
+
+        <el-popconfirm
+            width="220"
+            :icon="InfoFilled"
+            icon-color="#626AEF"
+            title="你确定要删除此项吗?"
+            @cancel="onCancel"
+            @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
+                type="danger"
+                size="small"
+                @click="confirm"
+            >
+              Yes?
+            </el-button>
+          </template>
+        </el-popconfirm>
       </div>
     </div>
     <div v-else>