✨ feat<任务列表>: 新增店铺信息详情页

src/views/reportManage/TaskManage/components/shopInformation.vue

@@ -0,0 +1,115 @@
+<script lang="ts" setup>
+/**
+ * @Name: shopInformation.vue
+ * @Description: 店铺信息详情页
+ * @Author: xinyan
+ */
+
+import Selector from '/@/views/reportManage/dataCenter/normalDisplay/components/Selector/index.vue';
+import { shopInfoColumns } from '/@/views/reportManage/TaskManage/utils/columns';
+import { VxeGridListeners } from 'vxe-table';
+import { onMounted, ref } from 'vue';
+import { getTasks } from '/@/views/reportManage/TaskManage/api';
+
+const selectorRef = ref(null);
+const filter = ref({}); // 筛选条件
+
+const gridOptions = reactive({
+  border: 'inner',
+  height: 930,
+  loading: false,
+  round: true,
+  rowConfig: {
+    isHover: true,
+  },
+  pagerConfig: {
+    enabled: true,
+    total: 20,
+    currentPage: 1,
+    pageSize: 20,
+    pageSizes: [10, 20, 30],
+  },
+  columns: shopInfoColumns,
+  data: [],
+});
+
+const gridEvents: VxeGridListeners<RowVO> = {
+  pageChange({ currentPage, pageSize }) {
+    if (gridOptions.pagerConfig) {
+      gridOptions.pagerConfig.currentPage = currentPage;
+      gridOptions.pagerConfig.pageSize = pageSize;
+      getTaskList();
+    }
+  },
+};
+
+// 获取任务列表
+async function getTaskList() {
+  try {
+    gridOptions.loading = true;
+    const response = await getTasks({
+      page: gridOptions.pagerConfig.currentPage,
+      limit: gridOptions.pagerConfig.pageSize,
+      ...filter.value,
+    });
+    gridOptions.data = response.data;
+    gridOptions.pagerConfig.total = response.total;
+  } catch (error) {
+    console.error('Error fetching task data:', error);
+  } finally {
+    gridOptions.loading = false;
+  }
+}
+
+// 筛选器变化
+function filteredDataChange(newList) {
+  filter.value = newList.value;
+  if (selectorRef.value) {
+    if (gridOptions.pagerConfig) {
+      gridOptions.pagerConfig.currentPage = 1;
+    }
+    getTaskList(newList.value);
+  }
+}
+
+// 表格样式
+const cellStyle = () => {
+  return {
+    fontSize: '12px',
+    fontWeight: '600',
+  };
+};
+
+const headerCellStyle = () => {
+  return {
+    fontSize: '14px',
+  };
+};
+
+onMounted(() => {
+  getTaskList();
+  //fetchOperationSelect();
+});
+</script>
+
+<template>
+  <div>
+    <el-card class=" my-3 mx-8" shadow="hover">
+      <Selector ref="selectorRef" :showOperationSearch="true" @update:filteredData="filteredDataChange" />
+    </el-card>
+  </div>
+  <el-card class="mx-8" shadow="hover">
+    <vxe-grid ref="xGrid" :cell-style="cellStyle" :header-cell-style="headerCellStyle" stripe
+              v-bind="gridOptions"
+              v-on="gridEvents"></vxe-grid>
+  </el-card>
+
+</template>
+
+<style scoped>
+.el-card {
+  border: none;
+  box-shadow: none;
+}
+
+</style>

src/views/reportManage/TaskManage/utils/columns.ts

@@ -1,5 +1,6 @@
 import { ref } from 'vue';
 
+// 任务管理表格列
 export const taskColumns = ref([
   { type: 'checkbox', width: 50 },
   {
@@ -94,7 +95,14 @@ export const taskColumns = ref([
     align: 'center',
     minWidth: 110
   },
-  { field: 'address', title: '公司地址',editRender: {}, slots: { edit: 'address_edit' }, align: 'center', minWidth: 95 },
+  {
+    field: 'address',
+    title: '公司地址',
+    editRender: {},
+    slots: { edit: 'address_edit' },
+    align: 'center',
+    minWidth: 95
+  },
   {
     field: 'juridicalPerson',
     title: '公司法人',
@@ -135,10 +143,131 @@ export const taskColumns = ref([
     align: 'center',
     minWidth: 115
   },
-  { field: 'vatNumber', title: 'VAT税号', editRender: {},slots: { edit: 'vatNumber_edit' }, align: 'center', minWidth: 95 },
-  { field: 'vatCompany', title: 'VAT税号公司名称', editRender: {},slots: { edit: 'vatCompany_edit' }, align: 'center', minWidth: 135 },
+  {
+    field: 'vatNumber',
+    title: 'VAT税号',
+    editRender: {},
+    slots: { edit: 'vatNumber_edit' },
+    align: 'center',
+    minWidth: 95
+  },
+  {
+    field: 'vatCompany',
+    title: 'VAT税号公司名称',
+    editRender: {},
+    slots: { edit: 'vatCompany_edit' },
+    align: 'center',
+    minWidth: 135
+  },
 
   { field: 'status', title: '状态', slots: { default: 'status_default' }, align: 'center', minWidth: 89 },
-  { title: '操作', minWidth: 108, slots: { default: 'operate' },fixed: 'right' },
+  { title: '操作', minWidth: 108, slots: { default: 'operate' }, fixed: 'right' },
 ]);
 
+export const shopInfoColumns = ref([
+  {
+    field: 'platformNumber',
+    title: '平台编号',
+    minWidth: 87
+  },
+  {
+    field: 'platformName',
+    title: '平台名称',
+    align: 'center',
+    minWidth: 138, isEditing: false
+  },
+  {
+    field: 'country',
+    title: '国家',
+    minWidth: 85,
+    align: 'center'
+  },
+  {
+    field: 'brandName',
+    title: '品牌',
+    align: 'center',
+    minWidth: 89,
+  },
+  {
+    field: 'user_name',
+    title: '填写人',
+    align: 'center',
+    minWidth: 104
+  },
+  {
+    field: 'operater',
+    title: '运营',
+    align: 'center',
+    minWidth: 104
+  },
+  {
+    field: 'currencyCode',
+    title: '平台币种',
+    align: 'center',
+    minWidth: 90
+  },
+  {
+    field: 'currencyCodePlatform',
+    title: '回款/余额币种',
+    minWidth: 120,
+    align: 'center'
+  },
+  {
+    field: 'platform',
+    title: '平台',
+    align: 'center',
+    minWidth: 89
+  },
+  { field: 'line', title: '线路', align: 'center', minWidth: 89 },
+  { field: 'ipaddress', title: 'IP地址', minWidth: 135 },
+  {
+    field: 'company',
+    title: '注册公司',
+    align: 'center',
+    minWidth: 98
+  },
+  {
+    field: 'companyEnglishName',
+    title: '公司英文名称',
+    align: 'center',
+    minWidth: 110
+  },
+  {
+    field: 'address',
+    title: '公司地址',
+    align: 'center',
+    minWidth: 95
+  },
+  {
+    field: 'juridicalPerson',
+    title: '公司法人',
+    align: 'center',
+    minWidth: 95
+  },
+  {
+    field: 'juridicalPersonCreditCard',
+    title: '法人信用卡',
+    align: 'center',
+    minWidth: 105
+  },
+  {
+    field: 'juridicalPersonCreditCardAddress',
+    title: '信用卡地址',
+    align: 'center',
+    minWidth: 105
+  },
+  {
+    field: 'receivablesAccount',
+    title: '收款账号',
+    align: 'center',
+    minWidth: 95
+  },
+  {
+    field: 'receivablesAccountCompany',
+    title: '收款账号公司',
+    align: 'center',
+    minWidth: 115
+  },
+  { field: 'vatNumber', title: 'VAT税号', align: 'center', minWidth: 95 },
+  { field: 'vatCompany', title: 'VAT税号公司名称', align: 'center', minWidth: 135 },
+]);