style(DataTable): 移除自定义列；评论详情-编辑弹窗改为抽屉

src/views/product-manage/comment-detail/component/DataTable.vue

@@ -218,7 +218,7 @@ defineExpose({ fetchList });
 					<Refresh />
 				</el-icon>
 			</el-button>
-			<el-button circle class="mr-3 toolbar-btn" @click="handleDownload">
+			<el-button circle class="toolbar-btn" @click="handleDownload">
 				<el-icon>
 					<Download />
 				</el-icon>

src/views/product-manage/comment-detail/component/EditLabelDialog.vue

@@ -1,25 +1,24 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 /**
  * @Name: EditLabelDialog.vue
- * @Description: 负面标签-编辑弹窗
+ * @Description: 负面标签-编辑
  * @Author: xinyan
  */
 import { Close, Finished } from '@element-plus/icons-vue';
 import { ElMessage, FormInstance, FormRules } from 'element-plus';
 import { useResponse } from '/@/utils/useResponse';
 import * as api from '../api';
-import { updateNegativeTags } from '../api';
 
 const props = defineProps({
 	editData: <any>Object,
 	rowData: <any>Object,
 });
-const { editData , rowData } = props;
+const { editData, rowData } = props;
 
 const loading = ref(false);
 
 const editOpen = defineModel({ default: false });
-const editDialog = <Ref>useTemplateRef('editDialog');
+const editDrawer = <Ref>useTemplateRef('editDrawer');
 
 const emit = defineEmits(['refresh']);
 
@@ -60,9 +59,8 @@ const submitForm = async (formEl: FormInstance | undefined) => {
 	});
 };
 
-function cancelDialog() {
-	resetForm(ruleFormRef.value);
-	editDialog.value.visible = false;
+function closeDrawer() {
+	editDrawer.value.handleClose();
 }
 
 const resetForm = (formEl: FormInstance | undefined) => {
@@ -72,31 +70,38 @@ const resetForm = (formEl: FormInstance | undefined) => {
 </script>
 
 <template>
-	<el-dialog
-		ref="editDialog"
-		v-model="editOpen"
-		:close-on-click-modal="false"
-		:close-on-press-escape="false"
-		:title="`负面标签 - 编辑 `"
-		style="width: 35%"
-	>
-		<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" class="mx-2.5 mt-5" label-width="auto" status-icon>
-			<el-row :gutter="20">
-				<el-col :span="24">
-					<el-form-item class="font-medium" label="原始标签" prop="raw_label">
-						<el-input v-model="ruleForm.raw_label" type="textarea" maxlength="150" show-word-limit :autosize="{ minRows: 2, maxRows: 4 }"/>
-					</el-form-item>
-					<el-form-item class="font-medium" label="类别" prop="kind">
-						<el-input v-model="ruleForm.kind" type="textarea" maxlength="150" show-word-limit/>
-					</el-form-item>
-				</el-col>
-			</el-row>
-		</el-form>
-		<template #footer>
-			<el-button :icon="Close" @click="cancelDialog">取 消</el-button>
-			<el-button :icon="Finished" :loading="loading" type="primary" @click="submitForm(ruleFormRef)">确 定</el-button>
-		</template>
-	</el-dialog>
+	<div class="drawer-container">
+		<el-drawer
+			ref="editDrawer"
+			v-model="editOpen"
+			:close-on-click-modal="false"
+			:close-on-press-escape="false"
+			:title="`负面标签 - 编辑 `"
+			style="width: 25%"
+		>
+			<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" class="mx-2.5 mt-5" label-width="auto" status-icon label-position="top">
+				<el-row :gutter="20">
+					<el-col :span="24">
+						<el-form-item class="font-medium" label="原始标签" prop="raw_label">
+							<el-input v-model="ruleForm.raw_label" :autosize="{ minRows: 2, maxRows: 4 }" maxlength="150" show-word-limit type="textarea" />
+						</el-form-item>
+						<el-form-item class="font-medium" label="类别" prop="kind">
+							<el-input v-model="ruleForm.kind" maxlength="150" show-word-limit type="textarea" />
+						</el-form-item>
+					</el-col>
+				</el-row>
+				<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></style>

src/views/product-manage/comment-detail/component/NegativeLabel.vue

@@ -151,7 +151,7 @@ onMounted(() => {
               </div>
             </template>
             <template #operate="{ row }">
-              <div class="flex justify-center gap-2">
+              <div class="flex justify-center ">
 								<PermissionButton circle plain type="warning" size="small" @click="handleEdit(row)">
 									<el-icon>
 										<Operation />

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

@@ -55,7 +55,7 @@ const gridOptions: any = reactive({
   },
   toolbarConfig: {
     size: 'large',
-    custom: true,
+    // custom: true,
     slots: {
       buttons: 'toolbar_buttons',
       tools: 'toolbar_tools'
@@ -314,7 +314,7 @@ defineExpose({ fetchList });
       <!--    @confirm="handleDownload"-->
       <!--&gt;-->
       <!--  <template #reference>-->
-      <el-button circle class="mr-3 toolbar-btn" @click="handleDownload">
+      <el-button circle class="toolbar-btn" @click="handleDownload">
         <el-icon>
           <Download />
         </el-icon>

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

@@ -53,7 +53,7 @@ const gridOptions: any = reactive({
   },
   toolbarConfig: {
     size: 'large',
-    custom: true,
+    // custom: true,
     slots: {
       buttons: 'toolbar_buttons',
       tools: 'toolbar_tools'
@@ -308,7 +308,7 @@ defineExpose({ fetchList });
           <Refresh />
         </el-icon>
       </el-button>
-      <el-button circle class="mr-3 toolbar-btn" @click="handleDownload">
+      <el-button circle class="toolbar-btn" @click="handleDownload">
         <el-icon>
           <Download />
         </el-icon>

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

@@ -55,7 +55,7 @@ const gridOptions: any = reactive({
   },
   toolbarConfig: {
     size: 'large',
-    custom: true,
+    // custom: true,
     slots: {
       buttons: 'toolbar_buttons',
       tools: 'toolbar_tools'
@@ -302,7 +302,7 @@ defineExpose({ fetchList });
           <Refresh />
         </el-icon>
       </el-button>
-      <el-button circle class="mr-3 toolbar-btn" @click="handleDownload">
+      <el-button circle class="toolbar-btn" @click="handleDownload">
         <el-icon>
           <Download />
         </el-icon>

src/views/sku-manage/company-sku/component/DataTable.vue

@@ -45,7 +45,7 @@ const gridOptions: any = reactive({
   },
   toolbarConfig: {
     size: 'large',
-    custom: true,
+    // custom: true,
     slots: {
       tools: 'toolbar_tools',
       buttons: 'toolbar_buttons'
@@ -240,7 +240,7 @@ defineExpose({ fetchList });
     </template>
     <!-- 工具栏右侧 -->
     <template #toolbar_tools>
-      <el-button circle class="toolbar-btn mr-3" @click="handleRefresh">
+      <el-button circle class="toolbar-btn" @click="handleRefresh">
         <el-icon>
           <Refresh />
         </el-icon>

src/views/sku-manage/product-attribute/component/DataTable.vue

@@ -46,7 +46,7 @@ const gridOptions: any = reactive({
   },
   toolbarConfig: {
     size: 'large',
-    custom: true,
+    // custom: true,
     slots: {
       tools: 'toolbar_tools',
       buttons: 'toolbar_buttons'
@@ -156,7 +156,7 @@ defineExpose({ fetchList });
     </template>
     <!-- 工具栏右侧 -->
     <template #toolbar_tools>
-      <el-button circle class="toolbar-btn mr-3" @click="handleRefresh">
+      <el-button circle class="toolbar-btn" @click="handleRefresh">
         <el-icon>
           <Refresh />
         </el-icon>

src/views/sku-manage/product-brand/component/DataTable.vue

@@ -41,7 +41,7 @@ const gridOptions: any = reactive({
   },
   toolbarConfig: {
     size: 'large',
-    custom: true,
+    // custom: true,
     slots: {
       tools: 'toolbar_tools',
       buttons: 'toolbar_buttons'
@@ -138,7 +138,7 @@ defineExpose({ fetchList });
     </template>
     <!-- 工具栏右侧 -->
     <template #toolbar_tools>
-      <el-button circle class="toolbar-btn mr-3" @click="handleRefresh">
+      <el-button circle class="toolbar-btn" @click="handleRefresh">
         <el-icon>
           <Refresh />
         </el-icon>

src/views/sku-manage/product-category/component/DataTable.vue

@@ -43,7 +43,7 @@ const gridOptions: any = reactive({
   },
   toolbarConfig: {
     size: 'large',
-    custom: true,
+    // custom: true,
     slots: {
       tools: 'toolbar_tools',
       buttons: 'toolbar_buttons'
@@ -148,7 +148,7 @@ defineExpose({ fetchList });
     </template>
     <!-- 工具栏右侧 -->
     <template #toolbar_tools>
-      <el-button circle class="mr-3 toolbar-btn" @click="handleRefresh">
+      <el-button circle class="toolbar-btn" @click="handleRefresh">
         <el-icon>
           <Refresh />
         </el-icon>

src/views/store-manage/market-store/component/DataTable.vue

@@ -39,7 +39,7 @@ const gridOptions: any = reactive({
   },
   toolbarConfig: {
     size: 'large',
-    custom: true,
+    // custom: true,
     slots: {
       tools: 'toolbar_tools'
     }
@@ -102,7 +102,7 @@ defineExpose({ fetchList });
   <vxe-grid ref="gridRef" v-bind="gridOptions">
     <!-- 工具栏右侧 -->
     <template #toolbar_tools>
-      <el-button circle class="mr-3 toolbar-btn" @click="handleRefresh">
+      <el-button circle class="toolbar-btn" @click="handleRefresh">
         <el-icon>
           <Refresh />
         </el-icon>

src/views/store-manage/online-merchandise/component/DataTable.vue

@@ -44,7 +44,7 @@ const gridOptions: any = reactive({
   },
   toolbarConfig: {
     size: 'large',
-    custom: true,
+    // custom: true,
     slots: {
       tools: 'toolbar_tools'
     }
@@ -145,7 +145,7 @@ defineExpose({ fetchList });
           <Refresh />
         </el-icon>
       </el-button>
-			<el-button circle class="mr-3 toolbar-btn" @click="handleDownload">
+			<el-button circle class="toolbar-btn" @click="handleDownload">
 				<el-icon>
 					<Download />
 				</el-icon>