feat(sku-manage):完善公司 SKU 页面

- 更新 API 调用路径
- 调整表格列配置, 完善功能细节
- 优化表格组件
- 修正部分title

src/views/sku-manage/Columns.ts

@@ -1,5 +1,5 @@
 export const AttributeColumns = [
-  { type: 'seq', title: 'No.', width: 60, align: 'center', fixed: 'left' },
+  { type: 'seq', title: 'No.', width: 70, align: 'center', fixed: 'left' },
   {
     field: 'name', title: '属性名称', align: 'center', fixed: 'left',
     slots: { default: 'name' }
@@ -23,28 +23,28 @@ export const AttributeColumns = [
 ];
 
 export const ProductBrandColumns = [
-  { type: 'seq', title: 'No.', width: 60, align: 'center', fixed: 'left' },
+  { type: 'seq', title: 'No.', width: 70, align: 'center', fixed: 'left' },
   { field: 'brand_name', title: '品牌名称',  align: 'center', fixed: 'left',
     slots: { default: 'brand_name' }
   },
   {
-    field: 'update_datetime', title: '更新时间', width: 180, align: 'center',
+    field: 'update_datetime', title: '更新时间', align: 'center',
     slots: { default: 'update_datetime' }
   },
-  { field: 'create_datetime', title: '创建时间', width: 180,  align: 'center', slots: { default: 'create_datetime' } },
+  { field: 'create_datetime', title: '创建时间', align: 'center', slots: { default: 'create_datetime' } },
   {
-    field: 'operate', title: '操 作', align: 'center', fixed: 'right',
+    field: 'operate', title: '操 作', width: 100 ,align: 'center', fixed: 'right',
     slots: { default: 'operate' }
   }
 ];
 
 export const ProductCategoryColumns = [
-  { type: 'seq', title: 'No.', width: 60, align: 'center', fixed: 'left' },
+  { type: 'seq', title: 'No.', width: 70, align: 'center', fixed: 'left' },
   { field: 'name', title: '种类名称',  align: 'center', fixed: 'left',
     slots: { default: 'name' }
   },
   {
-    field: 'main', title: '主属性', align: 'center', width: 480,
+    field: 'main', title: '主属性', align: 'center', width: 500,
     slots: { default: 'main' }
   },
   {
@@ -57,7 +57,39 @@ export const ProductCategoryColumns = [
   },
   { field: 'create_datetime', title: '创建时间',  align: 'center', slots: { default: 'create_datetime' } },
   {
-    field: 'operate', title: '操 作', align: 'center', fixed: 'right',
+    field: 'operate', title: '操 作', width: 100, align: 'center', fixed: 'right',
+    slots: { default: 'operate' }
+  }
+];
+
+export const CompanySkuColumns = [
+  { type: 'seq', title: 'No.', width: 70, align: 'center', fixed: 'left' },
+  { field: 'sku', title: 'SKU', width: 'auto', align: 'center', fixed: 'left',
+    slots: { default: 'sku' }
+  },
+  {
+    field: 'brand', title: '品牌名称', align: 'center', width: 'auto',
+    slots: { default: 'brand' }
+  },
+  {
+    field: 'kind', title: '种 类', align: 'center', width: 'auto',
+    slots: { default: 'kind' }
+  },
+  {
+    field: 'version_feature', title: '版本特性', align: 'center', minWidth: 'auto',
+    slots: { default: 'version_feature' }
+  },
+  {
+    field: 'status', title: '状 态', width: 100, align: 'center',
+    slots: { default: 'status' }
+  },
+  {
+    field: 'update_datetime', title: '更新时间', width: 170, align: 'center',
+    slots: { default: 'update_datetime' }
+  },
+  { field: 'create_datetime', title: '创建时间', width: 170, align: 'center', slots: { default: 'create_datetime' } },
+  {
+    field: 'operate', title: '操 作', width: 100, align: 'center', fixed: 'right',
     slots: { default: 'operate' }
   }
 ];

src/views/sku-manage/company-sku/api.ts

@@ -27,7 +27,7 @@ export function getKindOptions() {
 
 export function deleteRow(query: any) {
   return request({
-    url: apiPrefix + query.id + '/',
+    url: '/api/cms/sku/' + query + '/',
     method: 'DELETE',
     params: query
   });

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

@@ -1,16 +1,15 @@
 <script lang="ts" setup>
 /**
  * @Name: Table.vue
- * @Description: 产品属性表格
+ * @Description: 公司SKU表格
  * @Author: Cheney
  */
 
-import { ElMessage } from 'element-plus';
-import { Download, InfoFilled, Refresh, Plus } from '@element-plus/icons-vue';
+import { Plus, Refresh } from '@element-plus/icons-vue';
 import { usePagination } from '/@/utils/usePagination';
 import { useTableData } from '/@/utils/useTableData';
 import { useResponse } from '/@/utils/useResponse';
-import { AttributeColumns } from '/@/views/sku-manage/Columns';
+import { CompanySkuColumns } from '/@/views/sku-manage/Columns';
 import PermissionButton from '/@/components/PermissionButton/index.vue';
 import DataTableSlot from './DataTableSlot.vue';
 import EditDrawer from './EditDrawer.vue';
@@ -20,12 +19,9 @@ import CreateDialog from '/src/views/sku-manage/product-attribute/component/Crea
 
 
 interface Parameter {
-  country: string,
-  shop: string,
-  region: string,
-  delivery: string,
+  brandName: string,
   status: string,
-  asin: string,
+  kind: string,
   sku: string
 }
 
@@ -45,7 +41,7 @@ const gridOptions: any = reactive({
   customConfig: {
     // mode: 'drawer',
     // immediate: true,
-    storage: true,
+    storage: true
   },
   toolbarConfig: {
     size: 'large',
@@ -90,17 +86,14 @@ async function fetchList() {
   gridOptions.columns = [];
 
   const query = {
-    asin: queryParameter?.asin,
-    sku: queryParameter?.sku,
-    country_code: queryParameter?.country,
-    shop_id: queryParameter?.shop,
-    region: queryParameter?.region,
-    delivery: queryParameter?.delivery,
-    status: queryParameter?.status
+    brand: queryParameter?.brandName,
+    kind: queryParameter?.kind,
+    status: queryParameter?.status,
+    sku__contains: queryParameter?.sku,
   };
 
   await useTableData(api.getTableData, query, gridOptions);
-  await gridRef.value.loadColumn(AttributeColumns);
+  await gridRef.value.loadColumn(CompanySkuColumns);
   gridOptions.showHeader = Boolean(gridOptions.data?.length);
 }
 
@@ -114,11 +107,11 @@ function handleEdit(row: any) {
 }
 
 function handleCreate() {
-	createOpen.value = true;
+  createOpen.value = true;
 }
 
 async function singleDelete(row: any) {
-  const res = await useResponse(api.deleteRow, row);
+  const res = await useResponse(api.deleteRow, row.id);
   if (res.code === 2000) {
     ElMessage.success({ message: '删除成功', plain: true });
     handleRefresh();
@@ -126,13 +119,13 @@ async function singleDelete(row: any) {
 }
 
 const gridEvents = {
-  custom ({ type }: any) {
+  custom({ type }: any) {
     // console.log(`点击 ${type}`)
     if (type == 'confirm') {
       fetchList();
     }
   }
-}
+};
 
 defineExpose({ fetchList });
 </script>
@@ -140,7 +133,7 @@ defineExpose({ fetchList });
 <template>
   <vxe-grid ref="gridRef" v-bind="gridOptions" v-on="gridEvents">
     <template #toolbar_buttons>
-      <PermissionButton type="primary" :icon="Plus" plain round @click="handleCreate">新 增</PermissionButton>
+      <PermissionButton :icon="Plus" plain round type="primary" @click="handleCreate">新 增</PermissionButton>
     </template>
     <!-- 工具栏右侧 -->
     <template #toolbar_tools>
@@ -160,13 +153,13 @@ defineExpose({ fetchList });
       />
     </template>
     <!-- 自定义列插槽 -->
-    <template v-for="col in AttributeColumns" #[`${col.field}`]="{ row }">
+    <template v-for="col in CompanySkuColumns" #[`${col.field}`]="{ row }">
       <DataTableSlot :key="row.id" :field="col.field" :row="row" @edit-row="handleEdit" @handle-delete="singleDelete" />
     </template>
   </vxe-grid>
   <EditDrawer v-if="editOpen" v-model="editOpen" :row-data="rowData" @refresh="handleRefresh" />
   <NoticeDialog v-if="dialogVisible" v-model="dialogVisible" :row-data="rowData" />
-	<CreateDialog v-if="createOpen" v-model="createOpen" @refresh="fetchList" />
+  <CreateDialog v-if="createOpen" v-model="createOpen" @refresh="fetchList" />
 </template>
 
 <style scoped>

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

@@ -1,12 +1,14 @@
 <script lang="ts" setup>
 /**
  * @Name: DataTableSlot.vue
- * @Description: 产品属性-单元格插槽
+ * @Description: 公司SKU-单元格插槽
  * @Author: Cheney
  */
 
-import { Delete, InfoFilled, Operation } from '@element-plus/icons-vue';
+import { Delete, DocumentCopy, InfoFilled, Operation } from '@element-plus/icons-vue';
 import PermissionButton from '/@/components/PermissionButton/index.vue';
+import { getTagType } from '/@/utils/useTagColor';
+import { handleCopy } from '/@/utils/useCopyText';
 
 
 const props = defineProps<{
@@ -62,6 +64,28 @@ function onConfirm() {
         </el-popconfirm>
       </div>
     </div>
+    <div v-else-if="field === 'sku'" class="flex flex-nowrap">
+      {{ row.sku }}
+      <el-button :disabled="!row.sku" :icon="DocumentCopy" class="ml-2 cursor-pointer" link
+                 @click="handleCopy(row.sku || '')">
+      </el-button>
+    </div>
+    <div v-else-if="field === 'brand'">
+      <el-tag :disable-transitions="true" :type=getTagType(row.brand.brand_name) effect="plain" round>
+        {{ row.brand.brand_name }}
+      </el-tag>
+    </div>
+    <div v-else-if="field === 'kind'">
+      <el-tag :disable-transitions="true" :type=getTagType(row.kind.name) effect="plain" round>
+        {{ row.kind.name }}
+      </el-tag>
+    </div>
+    <div v-else-if="field === 'status'">
+      <el-tag :disable-transitions="true"
+              :type="row.status === 1 ? 'warning' : 'success'">
+        {{ row.status === 1 ? '草稿' : '已发布' }}
+      </el-tag>
+    </div>
     <div v-else>
       {{ row[field] }}
     </div>

src/views/sku-manage/company-sku/index.vue

@@ -31,7 +31,7 @@ provide('query-parameter', formInline);
 const brandOptions: any = ref([]);
 const kindOptions: any = ref([]);
 const statusOptions: any = ref([
-  { key: 1, name: '草 稿' },
+  { key: 1, name: '草稿' },
   { key: 3, name: '已发布' }
 ]);