Merge branch 'lmy' of http://119.78.67.12/git/root/ops_2024_vue into hd

src/views/regionalSpotManage/components/addProduct.vue

 <script lang="ts" setup>
-import { ref, computed } from 'vue';
-import { message } from 'ant-design-vue';
-import {
-  Input,
-  Button,
-} from 'ant-design-vue';
-import { RightOutlined, LeftOutlined } from '@ant-design/icons-vue';
-const emit = defineEmits(['close'])
-import {
-  regionalSpotManageBrandListApi,
-  regionalSpotManageGetAreaListApi,
-  regionalSpotManageOpsAddProductApi
-} from '/@/api/regionalSpotManage';
-import { getAuthCache } from '/@/utils/auth';
-const userInfo: any = getAuthCache('USER__INFO__')
-const ghsCode = userInfo.supplier.ghsCode
-let searchBrand = ref('')
-let searchItemNo = ref('')
-let searchBrandList = ref<any[]>([])
-const handleSearch = async (value) => {
-  const res = await regionalSpotManageBrandListApi({brand: value});
-  if (res.code === 20000) {
-    searchBrandList.value = res.data
-  } else {
-    searchBrandList.value = []
-  }
-}
-const closeModal = () => {
-  emit('close', false)
-}
-const leftData = ref<any[]>([])
-const leftColumns = [
-  { title: '商品名称', dataIndex: 'productName', key: 'productName', width: '25%', align: 'center'},
-  { title: '品牌', dataIndex: 'brand', key: 'brand', width: '25%', align: 'center'},
-  { title: '货号', dataIndex: 'goodsNo', key: 'goodsNo', width: '20%', align: 'center'},
-  { title: '规格', dataIndex: 'spec', key: 'spec', width: '20%', align: 'center'},
-]
-const pagination = ref({
-  size: 'small',
-  pageSize: 10,
-  current: 1,
-  total: 0,
-  showTotal: total => `共 ${total} 条`,
-  hideOnSinglePage: false,
-  showQuickJumper: true,
-  showSizeChanger: true,
-  pageSizeOptions: ['10', '20', '30', '50', '100'],
-  onChange: (current) => {
-    pagination.value.current = current
-    getLeftData()
-  },
-  onShowSizeChange: (size) => {
-    pagination.value.pageSize = size
-    getLeftData()
-  }
-})
-const getLeftData = () => {
-  leftData.value = [
+  import { ref, computed } from 'vue';
+  import { message } from 'ant-design-vue';
+  import { Input, Button } from 'ant-design-vue';
+  import { RightOutlined, LeftOutlined } from '@ant-design/icons-vue';
+  const emit = defineEmits(['close']);
+  import {
+    regionalSpotManageBrandListApi,
+    regionalSpotManageGetAreaListApi,
+    regionalSpotManageOpsAddProductApi,
+  } from '/@/api/regionalSpotManage';
+  import { getAuthCache } from '/@/utils/auth';
+  const userInfo: any = getAuthCache('USER__INFO__');
+  const ghsCode = userInfo.supplier.ghsCode;
+  let searchBrand = ref('');
+  let searchItemNo = ref('');
+  let searchBrandList = ref<any[]>([]);
+  const handleSearch = async (value) => {
+    const res = await regionalSpotManageBrandListApi({ brand: value });
+    if (res.code === 20000) {
+      searchBrandList.value = res.data;
+    } else {
+      searchBrandList.value = [];
+    }
+  };
+  const closeModal = () => {
+    emit('close', false);
+  };
+  const leftData = ref<any[]>([]);
+  const leftColumns = [
     {
-      productName: '测试产品1',
-      brand: '测试品牌1',
-      goodsNo: '213651',
-      spec: '100ml',
-      sysid: '1'
+      title: '商品名称',
+      dataIndex: 'productName',
+      key: 'productName',
+      width: '25%',
+      align: 'center',
     },
-    {
-      productName: '测试产品2',
-      brand: '测试品牌2',
-      goodsNo: '213652',
-      spec: '100ml',
-      sysid: '2'
+    { title: '品牌', dataIndex: 'brand', key: 'brand', width: '25%', align: 'center' },
+    { title: '货号', dataIndex: 'goodsNo', key: 'goodsNo', width: '20%', align: 'center' },
+    { title: '规格', dataIndex: 'spec', key: 'spec', width: '20%', align: 'center' },
+  ];
+  const pagination = ref({
+    size: 'small',
+    pageSize: 10,
+    current: 1,
+    total: 0,
+    showTotal: (total) => `共 ${total} 条`,
+    hideOnSinglePage: false,
+    showQuickJumper: true,
+    showSizeChanger: true,
+    pageSizeOptions: ['10', '20', '30', '50', '100'],
+    onChange: (current) => {
+      pagination.value.current = current;
+      getLeftData();
+    },
+    onShowSizeChange: (size) => {
+      pagination.value.pageSize = size;
+      getLeftData();
     },
+  });
+  const getLeftData = () => {
+    leftData.value = [
+      {
+        productName: '测试产品1',
+        brand: '测试品牌1',
+        goodsNo: '213651',
+        spec: '100ml',
+        sysid: '1',
+      },
+      {
+        productName: '测试产品2',
+        brand: '测试品牌2',
+        goodsNo: '213652',
+        spec: '100ml',
+        sysid: '2',
+      },
+      {
+        productName: '测试产品3',
+        brand: '测试品牌3',
+        goodsNo: '213653',
+        spec: '100ml',
+        sysid: '3',
+      },
+      {
+        productName: '测试产品4',
+        brand: '测试品牌4',
+        goodsNo: '213654',
+        spec: '100ml',
+        sysid: '4',
+      },
+      {
+        productName: '测试产品5',
+        brand: '测试品牌5',
+        goodsNo: '213655',
+        spec: '100ml',
+        sysid: '5',
+        choice: true,
+      },
+      {
+        productName: '测试产品6',
+        brand: '测试品牌6',
+        goodsNo: '213656',
+        spec: '100ml',
+        sysid: '6',
+        choice: true,
+      },
+    ];
+    if (rightData.value.length > 0) {
+      for (let i = 0; i < rightData.value.length; i++) {
+        if (
+          leftData.value.findIndex(
+            (v) =>
+              v.brand + v.goodsNo + v.spec ===
+              rightData.value[i].brand + rightData.value[i].goodsNo + rightData.value[i].spec,
+          ) !== -1
+        ) {
+          leftData.value.find(
+            (v) =>
+              v.brand + v.goodsNo + v.spec ===
+              rightData.value[i].brand + rightData.value[i].goodsNo + rightData.value[i].spec,
+          ).choice = true;
+        }
+      }
+    }
+    leftData.value = [...leftData.value];
+    pagination.value.total = leftData.value.length;
+  };
+  let selectedRowKeys = ref<any[]>([]);
+  let selectedRows = ref<any[]>([]);
+  const rowSelection = computed(() => {
+    return {
+      selectedRowKeys: selectedRowKeys.value,
+      onChange: (RowKeys, Rows) => {
+        selectedRowKeys.value = RowKeys;
+        selectedRows.value = Rows;
+      },
+      getCheckboxProps: (record) => ({
+        disabled: record.choice === true,
+      }),
+    };
+  });
+  const toRight = () => {
+    console.log(selectedRows.value);
+    let arr = JSON.parse(JSON.stringify(selectedRows.value));
+    rightData.value = [...arr, ...rightData.value];
+    for (let i = 0; i < selectedRows.value.length; i++) {
+      if (
+        leftData.value.findIndex(
+          (v) =>
+            v.brand + v.goodsNo + v.spec ===
+            selectedRows.value[i].brand +
+              selectedRows.value[i].goodsNo +
+              selectedRows.value[i].spec,
+        ) !== -1
+      ) {
+        leftData.value.find(
+          (v) =>
+            v.brand + v.goodsNo + v.spec ===
+            selectedRows.value[i].brand +
+              selectedRows.value[i].goodsNo +
+              selectedRows.value[i].spec,
+        ).choice = true;
+      }
+    }
+    leftData.value = [...leftData.value];
+    selectedRowKeys.value = [];
+    selectedRows.value = [];
+  };
+  const rightData = ref<any[]>([]);
+  const rightSelectedRowKeys = ref<any[]>([]);
+  const rightSelectedRows = ref<any[]>([]);
+  const rightRowSelection = computed(() => {
+    return {
+      selectedRowKeys: rightSelectedRowKeys.value,
+      onChange: (RowKeys, Rows) => {
+        rightSelectedRowKeys.value = RowKeys;
+        rightSelectedRows.value = Rows;
+      },
+    };
+  });
+  const toLeft = () => {
+    for (let i = 0; i < rightSelectedRows.value.length; i++) {
+      if (
+        leftData.value.findIndex(
+          (v) =>
+            v.brand + v.goodsNo + v.spec ===
+            rightSelectedRows.value[i].brand +
+              rightSelectedRows.value[i].goodsNo +
+              rightSelectedRows.value[i].spec,
+        ) !== -1
+      ) {
+        leftData.value.find(
+          (v) =>
+            v.brand + v.goodsNo + v.spec ===
+            rightSelectedRows.value[i].brand +
+              rightSelectedRows.value[i].goodsNo +
+              rightSelectedRows.value[i].spec,
+        ).choice = false;
+        rightData.value.splice(
+          rightData.value.findIndex(
+            (v) =>
+              v.brand + v.goodsNo + v.spec ==
+              rightSelectedRows.value[i].brand +
+                rightSelectedRows.value[i].goodsNo +
+                rightSelectedRows.value[i].spec,
+          ),
+          1,
+        );
+      } else {
+        rightData.value.splice(
+          rightData.value.findIndex(
+            (v) =>
+              v.brand + v.goodsNo + v.spec ==
+              rightSelectedRows.value[i].brand +
+                rightSelectedRows.value[i].goodsNo +
+                rightSelectedRows.value[i].spec,
+          ),
+          1,
+        );
+      }
+    }
+    leftData.value = [...leftData.value];
+    rightData.value = [...rightData.value];
+    rightSelectedRowKeys.value = [];
+    rightSelectedRows.value = [];
+  };
+  const rowClassName = () => {
+    return 'table-back';
+  };
+  let loading = ref(false);
+  let addressLoading = ref(false);
+  const goNext = async () => {
+    if (!rightData.value.length) return message.error('请先选择商品');
+    addressVisible.value = true;
+    addressLoading.value = true;
+    const res = await regionalSpotManageGetAreaListApi({});
+    if (res.code === 20000) {
+      areaList.value = res.data;
+    } else {
+      areaList.value = [];
+    }
+    addressLoading.value = false;
+  };
+  // ==================================================
+  const confirmLoading = ref(false);
+  const addressVisible = ref(false);
+  const checkboxValue = ref([]);
+  const areaList = ref<any[]>([
     {
-      productName: '测试产品3',
-      brand: '测试品牌3',
-      goodsNo: '213653',
-      spec: '100ml',
-      sysid: '3'
+      id: '0',
+      provinceId: '0',
+      province: '北京市',
+      cityId: 0,
+      city: '市辖区',
+      creator: '',
+      creationTime: '',
     },
     {
-      productName: '测试产品4',
-      brand: '测试品牌4',
-      goodsNo: '213654',
-      spec: '100ml',
-      sysid: '4'
+      id: '1',
+      provinceId: '1',
+      province: '河北省',
+      cityId: 1,
+      city: '保定市',
+      creator: '',
+      creationTime: '',
     },
     {
-      productName: '测试产品5',
-      brand: '测试品牌5',
-      goodsNo: '213655',
-      spec: '100ml',
-      sysid: '5',
-      choice: true
+      id: '2',
+      provinceId: '2',
+      province: '河北省',
+      cityId: 2,
+      city: '石家庄市',
+      creator: '',
+      creationTime: '',
     },
     {
-      productName: '测试产品6',
-      brand: '测试品牌6',
-      goodsNo: '213656',
-      spec: '100ml',
-      sysid: '6',
-      choice: true
-    }
-  ]
-  if (rightData.value.length > 0) {
-    for (let i = 0; i < rightData.value.length; i++) {
-      if (leftData.value.findIndex((v) => v.brand + v.goodsNo + v.spec === rightData.value[i].brand + rightData.value[i].goodsNo + rightData.value[i].spec) !== -1) {
-        leftData.value.find((v) => v.brand + v.goodsNo + v.spec === rightData.value[i].brand + rightData.value[i].goodsNo + rightData.value[i].spec).choice = true
-      }
-    }
-  }
-  leftData.value = [...leftData.value]
-  pagination.value.total = leftData.value.length
-}
-let selectedRowKeys = ref<any[]>([])
-let selectedRows = ref<any[]>([])
-const rowSelection = computed(() => {
-  return {
-    selectedRowKeys: selectedRowKeys.value,
-    onChange: (RowKeys, Rows) => {
-      selectedRowKeys.value = RowKeys
-      selectedRows.value = Rows
+      id: '3',
+      provinceId: '3',
+      province: '河北省',
+      cityId: 3,
+      city: '秦皇岛市',
+      creator: '',
+      creationTime: '',
     },
-    getCheckboxProps: (record) => ({
-      disabled: record.choice === true,
-    }),
-  }
-})
-const toRight = () => {
-  console.log(selectedRows.value);
-  let arr = JSON.parse(JSON.stringify(selectedRows.value))
-  rightData.value = [...arr, ...rightData.value]
-  for (let i = 0; i < selectedRows.value.length; i++) {
-    if (leftData.value.findIndex((v) => v.brand + v.goodsNo + v.spec === selectedRows.value[i].brand + selectedRows.value[i].goodsNo + selectedRows.value[i].spec) !== -1) {
-      leftData.value.find((v) => v.brand + v.goodsNo + v.spec === selectedRows.value[i].brand + selectedRows.value[i].goodsNo + selectedRows.value[i].spec).choice = true
-    }
-  }
-  leftData.value = [...leftData.value]
-  selectedRowKeys.value = []
-  selectedRows.value = []
-}
-const rightData = ref<any[]>([])
-const rightSelectedRowKeys = ref<any[]>([])
-const rightSelectedRows = ref<any[]>([])
-const rightRowSelection = computed(() => {
-  return {
-    selectedRowKeys: rightSelectedRowKeys.value,
-    onChange: (RowKeys, Rows) => {
-      rightSelectedRowKeys.value = RowKeys
-      rightSelectedRows.value = Rows
+    {
+      id: '4',
+      provinceId: '4',
+      province: '河北省',
+      cityId: 3,
+      city: '承德市',
+      creator: '',
+      creationTime: '',
     },
-  }
-})
-const toLeft = () => {
-  for (let i = 0; i < rightSelectedRows.value.length; i++) {
-    if (leftData.value.findIndex((v) => v.brand + v.goodsNo + v.spec === rightSelectedRows.value[i].brand + rightSelectedRows.value[i].goodsNo + rightSelectedRows.value[i].spec) !== -1) {
-      leftData.value.find((v) => v.brand + v.goodsNo + v.spec === rightSelectedRows.value[i].brand + rightSelectedRows.value[i].goodsNo + rightSelectedRows.value[i].spec).choice = false
-      rightData.value.splice(
-        rightData.value.findIndex((v) => v.brand + v.goodsNo + v.spec == rightSelectedRows.value[i].brand + rightSelectedRows.value[i].goodsNo + rightSelectedRows.value[i].spec),
-        1
-      )
+  ]);
+  const handleCancel = () => {
+    addressVisibleClose();
+  };
+  const goPrevious = () => {
+    addressVisibleClose();
+  };
+  const addressVisibleClose = () => {
+    addressVisible.value = false;
+    checkboxValue.value = [];
+  };
+  const confirm = async () => {
+    if (!checkboxValue.value.length) return message.error('请选择现货区域');
+    const param = ref<{ [key: string]: any }>({
+      products: [],
+      areas: '',
+    });
+    param.value.products = rightData.value.map((v) => {
+      return {
+        goodsNo: v.goodsNo,
+        brand: v.brand,
+        spec: v.spec,
+        ghscode: ghsCode,
+      };
+    });
+    param.value.areas = checkboxValue.value.join;
+    console.log(param.value);
+    confirmLoading.value = true;
+    const res = await regionalSpotManageOpsAddProductApi(param.value);
+    if (res.code === 20000) {
+      message.success('新增成功');
+      addressVisibleClose();
+      emit('close', false);
     } else {
-      rightData.value.splice(
-        rightData.value.findIndex((v) => v.brand + v.goodsNo + v.spec == rightSelectedRows.value[i].brand + rightSelectedRows.value[i].goodsNo + rightSelectedRows.value[i].spec),
-        1
-      )
+      message.error(res.message);
     }
-  }
-  leftData.value = [...leftData.value]
-  rightData.value = [...rightData.value]
-  rightSelectedRowKeys.value = []
-  rightSelectedRows.value = []
-}
-const rowClassName = () => {
-  return 'table-back'
-}
-let loading = ref(false)
-let addressLoading = ref(false)
-const goNext = async () => {
-  if(!rightData.value.length) return message.error('请先选择商品');
-  addressVisible.value = true
-  addressLoading.value = true
-  const res = await regionalSpotManageGetAreaListApi({});
-  if (res.code === 20000) {
-    areaList.value = res.data
-  } else {
-    areaList.value = []
-  }
-  addressLoading.value = false
-}
-// ==================================================
-const confirmLoading = ref(false)
-const addressVisible = ref(false)
-const checkboxValue = ref([])
-const areaList = ref<any[]>([
-  {
-    "id": "0",
-    "provinceId": "0",
-    "province": '北京市',
-    "cityId": 0,
-    "city": '市辖区',
-    "creator": '',
-    "creationTime": ''
-  },
-  {
-    "id": "1",
-    "provinceId": "1",
-    "province": '河北省',
-    "cityId": 1,
-    "city": '保定市',
-    "creator": '',
-    "creationTime": ''
-  },
-  {
-    "id": "2",
-    "provinceId": "2",
-    "province": '河北省',
-    "cityId": 2,
-    "city": '石家庄市',
-    "creator": '',
-    "creationTime": ''
-  },
-  {
-    "id": "3",
-    "provinceId": "3",
-    "province": '河北省',
-    "cityId": 3,
-    "city": '秦皇岛市',
-    "creator": '',
-    "creationTime": ''
-  },
-  {
-    "id": "4",
-    "provinceId": "4",
-    "province": '河北省',
-    "cityId": 3,
-    "city": '承德市',
-    "creator": '',
-    "creationTime": ''
-  }
-])
-const handleCancel = () => {
-  addressVisibleClose()
-}
-const goPrevious = () => {
-  addressVisibleClose()
-}
-const addressVisibleClose = () => {
-  addressVisible.value = false
-  checkboxValue.value = []
-}
-const confirm = async () => {
-  if(!checkboxValue.value.length) return message.error('请选择现货区域')
-  const param = ref<{ [key: string]: any }>({
-    products: [],
-    areas: ''
-  }) 
-  param.value.products = rightData.value.map(v => {
-    return {
-      goodsNo: v.goodsNo,
-      brand: v.brand,
-      spec: v.spec,
-      ghscode: ghsCode
-    }
-  })
-  param.value.areas = checkboxValue.value.join
-  console.log(param.value);
-  confirmLoading.value = true
-  const res = await regionalSpotManageOpsAddProductApi(param.value);
-  if (res.code === 20000) {
-    message.success('新增成功')
-    addressVisibleClose()
-    emit('close', false)
-  } else {
-    message.error(res.message)
-  }
-  confirmLoading.value = false
-}
+    confirmLoading.value = false;
+  };
 </script>
 
 <template>
-  <a-modal :visible="true" title="新增区域现货商品" :width="1200" @cancel="closeModal" :maskClosable="false" :keyboard="false">
+  <a-modal
+    :visible="true"
+    title="新增区域现货商品"
+    :width="1200"
+    @cancel="closeModal"
+    :maskClosable="false"
+    :keyboard="false"
+  >
     <template #footer>
       <a-button key="back" @click="closeModal">取消</a-button>
       <a-button key="submit" type="primary" :loading="loading" @click="goNext">下一步</a-button>
@@ -297,14 +357,24 @@ const confirm = async () => {
         :not-found-content="null"
         @search="handleSearch"
       >
-        <a-select-option v-for="item in searchBrandList" :key="item.value" :label="item.label" :value="item.value">
+        <a-select-option
+          v-for="item in searchBrandList"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
           {{ item.label }}
         </a-select-option>
       </a-select>
       <span style="margin-left: 15px">货号：</span>
-      <Input v-model:value="searchItemNo" allow-clear placeholder="请输入货号" style="width: 200px" />
-      <Button style="margin-left:10px">重置</Button>
-      <Button @click="getLeftData" type="primary" style="margin-left:10px">查询</Button>
+      <Input
+        v-model:value="searchItemNo"
+        allow-clear
+        placeholder="请输入货号"
+        style="width: 200px"
+      />
+      <Button style="margin-left: 10px">重置</Button>
+      <Button @click="getLeftData" type="primary" style="margin-left: 10px">查询</Button>
     </div>
     <div class="main">
       <div class="left">
@@ -333,16 +403,16 @@ const confirm = async () => {
         </div>
       </div>
       <div class="operate">
-        <div style="margin-top: 200px;display:flex">
+        <div style="margin-top: 200px; display: flex">
           <a-button
             @click="toLeft"
             type="primary"
             :disabled="rightSelectedRowKeys.length === 0"
-            style="display: block; margin-bottom: 10px;margin-right:10px"
+            style="display: block; margin-bottom: 10px; margin-right: 10px"
           >
-          <template #icon>
-            <LeftOutlined />
-          </template>
+            <template #icon>
+              <LeftOutlined />
+            </template>
           </a-button>
           <a-button
             @click="toRight"
@@ -370,13 +440,20 @@ const confirm = async () => {
             :scroll="{ x: false, y: 280 }"
             :rowClassName="rowClassName"
             :row-selection="rightRowSelection"
-          >
-          </a-table>
+          />
         </div>
       </div>
     </div>
   </a-modal>
-  <a-modal v-model:visible="addressVisible" title="新增区域现货商品" @cancel="handleCancel" @ok="confirm" :width="1200" :maskClosable="false" :keyboard="false">
+  <a-modal
+    v-model:visible="addressVisible"
+    title="新增区域现货商品"
+    @cancel="handleCancel"
+    @ok="confirm"
+    :width="1200"
+    :maskClosable="false"
+    :keyboard="false"
+  >
     <template #footer>
       <a-button :loading="confirmLoading" @click="handleCancel">取消</a-button>
       <a-button :loading="confirmLoading" @click="goPrevious">上一步</a-button>
@@ -384,10 +461,12 @@ const confirm = async () => {
     </template>
     <a-alert type="warning">
       <template #message>
-        <span style="color: red">特别提醒：</span>北京市-直辖市；天津市-直辖市。本次设置为，北京市-直辖市；四川省-成都市。提交后，商品现货区域将更新为 北京市-直辖市；天津市-直辖市；四川省-成都市。
+        <span style="color: red">特别提醒：</span
+        >北京市-直辖市；天津市-直辖市。本次设置为，北京市-直辖市；四川省-成都市。提交后，商品现货区域将更新为
+        北京市-直辖市；天津市-直辖市；四川省-成都市。
       </template>
     </a-alert>
-    <a-spin v-if="addressLoading" style="height: 150px;width: 100%;line-height: 150px" />
+    <a-spin v-if="addressLoading" style="height: 150px; width: 100%; line-height: 150px" />
     <div v-else>
       <p style="margin-top: 15px">选择现货区域：</p>
       <a-checkbox-group v-model:value="checkboxValue" style="width: 100%">
@@ -402,46 +481,46 @@ const confirm = async () => {
 </template>
 
 <style lang="less" scoped>
-.main {
-  display: flex;
-  justify-content: space-around;
-  width: 100%;
-  margin-top: 15px;
-  .left {
-    width: 45%;
-    border: 1px solid #ddd;
-    height: 450px;
-    .header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 0 10px;
-      height: 60px;
-      background: #F3F6F9
+  .main {
+    display: flex;
+    justify-content: space-around;
+    width: 100%;
+    margin-top: 15px;
+    .left {
+      width: 45%;
+      border: 1px solid #ddd;
+      height: 450px;
+      .header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0 10px;
+        height: 60px;
+        background: #f3f6f9;
+      }
     }
-  }
-  .right {
-    width: 45%;
-    border: 1px solid #ddd;
-    height: 450px;
-    .header {
+    .right {
+      width: 45%;
+      border: 1px solid #ddd;
+      height: 450px;
+      .header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0 10px;
+        height: 60px;
+        background: #f3f6f9;
+      }
+    }
+    .operate {
+      width: 10%;
+      height: 450px;
       display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 0 10px;
-      height: 60px;
-      background: #F3F6F9
+      justify-content: center;
+      align-content: center;
     }
   }
-  .operate {
-    width: 10%;
-    height: 450px;
-    display: flex;
-    justify-content: center;
-    align-content: center;
+  /deep/.table-back {
+    background-color: #fff;
   }
-}
-/deep/.table-back {
-  background-color: #fff;
-}
-</style>
+</style>
\ No newline at end of file

src/views/regionalSpotManage/components/list.vue

 <script lang="ts" setup>
-import { ref, onMounted } from 'vue';
-import {
-  Form,
-  FormItem,
-  Input,
-  Button,
-  Select,
-  SelectOption,
-  Row,
-  Col,
-  message,
-} from 'ant-design-vue';
-import { UploadOutlined } from '@ant-design/icons-vue';
-import { useRouter } from 'vue-router';
-import { getAuthCache } from '/@/utils/auth';
-import {
-  regionalSpotManageBrandListApi,
-  regionalSpotManageListApi,
-  regionalSpotManageGetAreaListApi,
-  regionalSpotManageGetGhsAreaListApi,
-  regionalSpotManageOpsDeleteProductApi,
-  regionalSpotManageOpsEditProductApi,
-  regionalSpotManageUploadOpsProductApi
-} from '/@/api/regionalSpotManage';
-import addProductModal from './addProduct.vue'
-const config = import.meta.env
-const userInfo: any = getAuthCache('USER__INFO__')
-const ghsCode = userInfo.supplier.ghsCode
-const router = useRouter();
-const list = ref<any[]>([])
-onMounted(async () => {
-  getList()
-  getAllAreaList()
-});
-const searchForm = ref<{
-  brandList: any;
-  goodsNo: any;
-  areaIds: any;
-  types: any;
-}>({
-  brandList: [],
-  goodsNo: '',
-  areaIds: [],
-  types: []
-});
-const areaIdsOption = ref([
-  { label: '区域1', value: '区域1' },
-  { label: '区域2', value: '区域2' },
-])
-const typesOption = ref([
-  { label: '组1', value: '组1' },
-  { label: '组2', value: '组2' },
-])
-let searchBrandList = ref<any[]>([])
-const handleSearch = async (value) => {
-  const res = await regionalSpotManageBrandListApi({brand: value});
-  if (res.code === 20000) {
-    searchBrandList.value = res.data
-  } else {
-    searchBrandList.value = []
-  }
-}
-let listLoading = ref(false)
-const pagination = ref({
-  pageSize: 10,
-  current: 1,
-  total: 0,
-  showTotal: total => `共 ${total} 条`,
-  hideOnSinglePage: false,
-  showQuickJumper: true,
-  showSizeChanger: true,
-  pageSizeOptions: ['10', '20', '30', '50', '100'],
-  onChange: (current) => {
-    pagination.value.current = current
-    getList()
-  },
-  onShowSizeChange: (size) => {
-    pagination.value.pageSize = size
-    getList()
-  }
-})
-const getList = async () => {
-  const pager = ref({
-    pageIndex: 1,
-    pageSize: 10
-  })
-  const param = ref({
-    ...searchForm.value,
-    ...pager.value
-  })
-  param.value.areaIds = param.value.areaIds ? param.value.areaIds : []
-  param.value.types = param.value.types ? param.value.types : []
-  listLoading.value = true
-  const res = await regionalSpotManageListApi(param.value);
-  if (res.code === 20000) {
-    list.value = res.data
-    pagination.value.total = res.data[0].total
-  } else {
-    list.value = []
-    pagination.value.total = 0
-  }
-  listLoading.value = false
-  list.value = [
-    {
-      productName: '测试商品',
-      brand: '测试品牌',
-      goodsNo: '45641',
-      spec: '100ml',
-      productStatus: '上架',
-      sysid: '1'
+  import { ref, onMounted } from 'vue';
+  import {
+    Form,
+    FormItem,
+    Input,
+    Button,
+    Select,
+    SelectOption,
+    Row,
+    Col,
+    message,
+  } from 'ant-design-vue';
+  import { UploadOutlined } from '@ant-design/icons-vue';
+  import { useRouter } from 'vue-router';
+  import { getAuthCache } from '/@/utils/auth';
+  import {
+    regionalSpotManageBrandListApi,
+    regionalSpotManageListApi,
+    regionalSpotManageGetAreaListApi,
+    regionalSpotManageGetGhsAreaListApi,
+    regionalSpotManageOpsDeleteProductApi,
+    regionalSpotManageOpsEditProductApi,
+    regionalSpotManageUploadOpsProductApi,
+  } from '/@/api/regionalSpotManage';
+  import addProductModal from './addProduct.vue';
+  const config = import.meta.env;
+  const userInfo: any = getAuthCache('USER__INFO__');
+  const ghsCode = userInfo.supplier.ghsCode;
+  const router = useRouter();
+  const list = ref<any[]>([]);
+  onMounted(async () => {
+    getList();
+    getAllAreaList();
+  });
+  const searchForm = ref<{
+    brandList: any;
+    goodsNo: any;
+    areaIds: any;
+    types: any;
+  }>({
+    brandList: [],
+    goodsNo: '',
+    areaIds: [],
+    types: [],
+  });
+  const areaIdsOption = ref([
+    { label: '区域1', value: '区域1' },
+    { label: '区域2', value: '区域2' },
+  ]);
+  const typesOption = ref([
+    { label: '组1', value: '组1' },
+    { label: '组2', value: '组2' },
+  ]);
+  let searchBrandList = ref<any[]>([]);
+  const handleSearch = async (value) => {
+    const res = await regionalSpotManageBrandListApi({ brand: value });
+    if (res.code === 20000) {
+      searchBrandList.value = res.data;
+    } else {
+      searchBrandList.value = [];
+    }
+  };
+  let listLoading = ref(false);
+  const pagination = ref({
+    pageSize: 10,
+    current: 1,
+    total: 0,
+    showTotal: (total) => `共 ${total} 条`,
+    hideOnSinglePage: false,
+    showQuickJumper: true,
+    showSizeChanger: true,
+    pageSizeOptions: ['10', '20', '30', '50', '100'],
+    onChange: (current) => {
+      pagination.value.current = current;
+      getList();
     },
-    {
-      productName: 'ffff',
-      brand: 'fff',
-      goodsNo: 'fff',
-      spec: 'ff',
-      productStatus: '上架',
-      sysid: '2'
+    onShowSizeChange: (size) => {
+      pagination.value.pageSize = size;
+      getList();
+    },
+  });
+  const getList = async () => {
+    const pager = ref({
+      pageIndex: 1,
+      pageSize: 10,
+    });
+    const param = ref({
+      ...searchForm.value,
+      ...pager.value,
+    });
+    param.value.areaIds = param.value.areaIds ? param.value.areaIds : [];
+    param.value.types = param.value.types ? param.value.types : [];
+    listLoading.value = true;
+    const res = await regionalSpotManageListApi(param.value);
+    if (res.code === 20000) {
+      list.value = res.data;
+      pagination.value.total = res.data[0].total;
+    } else {
+      list.value = [];
+      pagination.value.total = 0;
     }
-  ]
-}
-const onRset = () => {
-  searchForm.value.brandList = []
-  searchForm.value.goodsNo = ''
-  searchForm.value.areaIds = []
-  searchForm.value.types = []
-  getList()
-}
-const onSearch = () => {
-  pagination.value.pageSize = 1
-  getList()
-}
+    listLoading.value = false;
+    list.value = [
+      {
+        productName: '测试商品',
+        brand: '测试品牌',
+        goodsNo: '45641',
+        spec: '100ml',
+        productStatus: '上架',
+        sysid: '1',
+      },
+      {
+        productName: 'ffff',
+        brand: 'fff',
+        goodsNo: 'fff',
+        spec: 'ff',
+        productStatus: '上架',
+        sysid: '2',
+      },
+    ];
+  };
+  const onRset = () => {
+    searchForm.value.brandList = [];
+    searchForm.value.goodsNo = '';
+    searchForm.value.areaIds = [];
+    searchForm.value.types = [];
+    getList();
+  };
+  const onSearch = () => {
+    pagination.value.pageSize = 1;
+    getList();
+  };
 
-let showModal = ref(false)
-const addProduct = () => {
-  showModal.value = true
-}
-// 关闭新增商品弹窗
-const closeVisible = (val) => {
-  showModal.value = val
-}
+  let showModal = ref(false);
+  const addProduct = () => {
+    showModal.value = true;
+  };
+  // 关闭新增商品弹窗
+  const closeVisible = (val) => {
+    showModal.value = val;
+  };
 
-let curItem = ref<{ [key: string]: any }>({});
+  let curItem = ref<{ [key: string]: any }>({});
 
-// =========查看区域现货 statr ===========
-const loading1 = ref(false)
-const visible = ref(false)
-const regionalSpotGoods = ref([])
-const viewCurrent = async (val) => {
-  curItem.value = val
-  visible.value = true
-  const param = ref<{ [key: string]: any }>({
-    products: [{
-      goodsNo: val.goodsNo,
-      brand: val.brand,
-      spec: val.spec,
-      ghscode: ghsCode
-    }],
-  })
-  console.log(param.value);
-  loading1.value = true
-  const result = await getAreaList(param.value)
-  regionalSpotGoods.value = result
-  loading1.value = false
-}
-const getAreaList = async (param) => {
-  const res = await regionalSpotManageGetGhsAreaListApi(param);
-  if (res.code === 20000) {
-    return res.data
-  } else {
-    return []
-  }
-}
-// ==========查看区域现货 end =============
+  // =========查看区域现货 statr ===========
+  const loading1 = ref(false);
+  const visible = ref(false);
+  const regionalSpotGoods = ref([]);
+  const viewCurrent = async (val) => {
+    curItem.value = val;
+    visible.value = true;
+    const param = ref<{ [key: string]: any }>({
+      products: [
+        {
+          goodsNo: val.goodsNo,
+          brand: val.brand,
+          spec: val.spec,
+          ghscode: ghsCode,
+        },
+      ],
+    });
+    console.log(param.value);
+    loading1.value = true;
+    const result = await getAreaList(param.value);
+    regionalSpotGoods.value = result;
+    loading1.value = false;
+  };
+  const getAreaList = async (param) => {
+    const res = await regionalSpotManageGetGhsAreaListApi(param);
+    if (res.code === 20000) {
+      return res.data;
+    } else {
+      return [];
+    }
+  };
+  // ==========查看区域现货 end =============
 
-let selectedRowKeys = ref([])
-let selectedRows = ref<any[]>([])
-const onSelectChange = (Keys, Rows) => {
-  selectedRowKeys.value = Keys
-  selectedRows.value = Rows
-}
-// ===============增加区域 start=======================
-let addVisible = ref(false)
-let addAreaLoading = ref(false)
-let addCheckboxValue = ref(['0'])
-const addArea = async (row) => {
-  curItem.value = row
-  addVisible.value = true
-  addAreaLoading.value = true
-  const param = ref<{ [key: string]: any }>({
-    products: [{
-      goodsNo: row.goodsNo,
-      brand: row.brand,
-      spec: row.spec,
-      ghscode: ghsCode
-    }],
-  })
-  const result = await getAreaList(param.value)
-  delAreaList.value = result
-  const curArr = delAreaList.value.map(it => it.id)
-  for (const k of allAreaList.value) {
-    if (curArr.includes(k.id)) {
-      addCheckboxValue.value.push(k.id)
-      k.disabled = true
+  let selectedRowKeys = ref([]);
+  let selectedRows = ref<any[]>([]);
+  const onSelectChange = (Keys, Rows) => {
+    selectedRowKeys.value = Keys;
+    selectedRows.value = Rows;
+  };
+  // ===============增加区域 start=======================
+  let addVisible = ref(false);
+  let addAreaLoading = ref(false);
+  let addCheckboxValue = ref(['0']);
+  const addArea = async (row) => {
+    curItem.value = row;
+    addVisible.value = true;
+    addAreaLoading.value = true;
+    const param = ref<{ [key: string]: any }>({
+      products: [
+        {
+          goodsNo: row.goodsNo,
+          brand: row.brand,
+          spec: row.spec,
+          ghscode: ghsCode,
+        },
+      ],
+    });
+    const result = await getAreaList(param.value);
+    delAreaList.value = result;
+    const curArr = delAreaList.value.map((it) => it.id);
+    for (const k of allAreaList.value) {
+      if (curArr.includes(k.id)) {
+        addCheckboxValue.value.push(k.id);
+        k.disabled = true;
+      }
     }
-  }
-  addAreaLoading.value = false
-}
-const addVisibleCancel = () => {
-  addVisible.value = false
-  addCheckboxValue.value = []
-}
-let confirmAddLoading = ref(false)
-const confirmAddArea = async () => {
-  const param = ref<{ [key: string]: any }>({
-    products: [{
-      goodsNo: curItem.value.goodsNo,
-      brand: curItem.value.brand,
-      spec: curItem.value.spec,
-      ghscode: ghsCode
-    }],
-    areas: addCheckboxValue.value.join
-  })
-  confirmAddLoading.value = true
-  const res = await regionalSpotManageOpsEditProductApi(param.value);
-  if (res.success) {
-    message.success('添加区域成功')
-  } else {
-    message.error(res.message)
-  }
-  confirmAddLoading.value = false
-}
-// ===============增加区域 end=======================
+    addAreaLoading.value = false;
+  };
+  const addVisibleCancel = () => {
+    addVisible.value = false;
+    addCheckboxValue.value = [];
+  };
+  let confirmAddLoading = ref(false);
+  const confirmAddArea = async () => {
+    const param = ref<{ [key: string]: any }>({
+      products: [
+        {
+          goodsNo: curItem.value.goodsNo,
+          brand: curItem.value.brand,
+          spec: curItem.value.spec,
+          ghscode: ghsCode,
+        },
+      ],
+      areas: addCheckboxValue.value.join,
+    });
+    confirmAddLoading.value = true;
+    const res = await regionalSpotManageOpsEditProductApi(param.value);
+    if (res.success) {
+      message.success('添加区域成功');
+    } else {
+      message.error(res.message);
+    }
+    confirmAddLoading.value = false;
+  };
+  // ===============增加区域 end=======================
 
-// ================区域现货商品删除 start=====================
-let delVisible = ref(false)
-let delLoading = ref(false)
-let deleteNum = ref(0)
-let radioValue = ref(1)
-let delAreaList = ref<any[]>([
-  {
-    "id": "0",
-    "provinceId": "0",
-    "province": '北京市',
-    "cityId": 0,
-    "city": '市辖区',
-    "creator": '',
-    "creationTime": ''
-  },
-  {
-    "id": "1",
-    "provinceId": "1",
-    "province": '河北省',
-    "cityId": 1,
-    "city": '保定市',
-    "creator": '',
-    "creationTime": ''
-  },
-])//已添加的区域
-let delCheckboxValue = ref([])
-const del = async (val) => {
-  curItem.value = val
-  deleteNum.value = 1
-  delVisible.value = true
-  const param = ref<{ [key: string]: any }>({
-    products: [{
-      goodsNo: val.goodsNo,
-      brand: val.brand,
-      spec: val.spec,
-      ghscode: ghsCode
-    }],
-  })
-  console.log(param.value);
-  // delLoading.value = true
-  // const result = await getAreaList(param.value)
-  // delAreaList.value = result
-  // delLoading.value = false
-}
-const delVisibleCancel = () => {
-  delVisible.value = false
-  deleteNum.value = 0
-  radioValue.value = 1
-  delCheckboxValue.value = []
-  isBatchDel.value = false
-}
-let delConfirLoading = ref(false)
-const confirmDel = async () => {
-  if(radioValue.value === 2 && !delCheckboxValue.value.length) return message.error('请选择需要删除的现货区域')
-  const param = ref<{ [key: string]: any }>({
-    products: [],
-    areas: '',
-    isAll: false
-  })
-  if (isBatchDel.value) {
-    param.value.products = selectedRows.value.map(v => {
+  // ================区域现货商品删除 start=====================
+  let delVisible = ref(false);
+  let delLoading = ref(false);
+  let deleteNum = ref(0);
+  let radioValue = ref(1);
+  let delAreaList = ref<any[]>([
+    {
+      id: '0',
+      provinceId: '0',
+      province: '北京市',
+      cityId: 0,
+      city: '市辖区',
+      creator: '',
+      creationTime: '',
+    },
+    {
+      id: '1',
+      provinceId: '1',
+      province: '河北省',
+      cityId: 1,
+      city: '保定市',
+      creator: '',
+      creationTime: '',
+    },
+  ]); //已添加的区域
+  let delCheckboxValue = ref([]);
+  const del = async (val) => {
+    curItem.value = val;
+    deleteNum.value = 1;
+    delVisible.value = true;
+    const param = ref<{ [key: string]: any }>({
+      products: [
+        {
+          goodsNo: val.goodsNo,
+          brand: val.brand,
+          spec: val.spec,
+          ghscode: ghsCode,
+        },
+      ],
+    });
+    console.log(param.value);
+    // delLoading.value = true
+    // const result = await getAreaList(param.value)
+    // delAreaList.value = result
+    // delLoading.value = false
+  };
+  const delVisibleCancel = () => {
+    delVisible.value = false;
+    deleteNum.value = 0;
+    radioValue.value = 1;
+    delCheckboxValue.value = [];
+    isBatchDel.value = false;
+  };
+  let delConfirLoading = ref(false);
+  const confirmDel = async () => {
+    if (radioValue.value === 2 && !delCheckboxValue.value.length)
+      return message.error('请选择需要删除的现货区域');
+    const param = ref<{ [key: string]: any }>({
+      products: [],
+      areas: '',
+      isAll: false,
+    });
+    if (isBatchDel.value) {
+      param.value.products = selectedRows.value.map((v) => {
+        return {
+          goodsNo: v.goodsNo,
+          brand: v.brand,
+          spec: v.spec,
+          ghscode: ghsCode,
+        };
+      });
+    } else {
+      param.value.products = [
+        {
+          goodsNo: curItem.value.goodsNo,
+          brand: curItem.value.brand,
+          spec: curItem.value.spec,
+          ghscode: ghsCode,
+        },
+      ];
+    }
+    if (radioValue.value === 1) {
+      param.value.isAll = true;
+      param.value.areas = delAreaList.value.map((v) => v.id);
+    } else if (radioValue.value === 2) {
+      param.value.areas = delCheckboxValue.value;
+    }
+    delConfirLoading.value = true;
+    const res = await regionalSpotManageOpsDeleteProductApi(param.value);
+    if (res.success) {
+      message.success('删除成功');
+    } else {
+      message.success(res.message);
+    }
+    delConfirLoading.value = false;
+  };
+  // 批量删除
+  let isBatchDel = ref(false);
+  const batchDel = () => {
+    if (!selectedRowKeys.value.length) return message.error('请勾选商品');
+    isBatchDel.value = true;
+    deleteNum.value = selectedRows.value.length;
+    delVisible.value = true;
+    const param = ref<{ [key: string]: any }>({
+      products: [],
+    });
+    param.value.products = selectedRows.value.map((v) => {
       return {
         goodsNo: v.goodsNo,
         brand: v.brand,
         spec: v.spec,
-        ghscode: ghsCode
-      }
-    })
-  } else {
-    param.value.products = [{
-      goodsNo: curItem.value.goodsNo,
-      brand: curItem.value.brand,
-      spec: curItem.value.spec,
-      ghscode: ghsCode
-    }]
-  }
-  if (radioValue.value === 1) {
-    param.value.isAll = true
-    param.value.areas = delAreaList.value.map(v => v.id)
-  } else if (radioValue.value === 2) {
-    param.value.areas = delCheckboxValue.value
-  }
-  delConfirLoading.value = true
-  const res = await regionalSpotManageOpsDeleteProductApi(param.value);
-  if (res.success) {
-    message.success('删除成功')
-  } else {
-    message.success(res.message)
-  }
-  delConfirLoading.value = false
-}
-// 批量删除
-let isBatchDel = ref(false)
-const batchDel = () => {
-  if(!selectedRowKeys.value.length) return message.error('请勾选商品')
-  isBatchDel.value = true
-  deleteNum.value = selectedRows.value.length
-  delVisible.value = true
-  const param = ref<{ [key: string]: any }>({
-    products: []
-  })
-  param.value.products = selectedRows.value.map(v => {
-    return {
-      goodsNo: v.goodsNo,
-      brand: v.brand,
-      spec: v.spec,
-      ghscode: ghsCode
-    }
-  })
-  // delLoading.value = true
-  // const result = await getAreaList(param.value)
-  // delAreaList.value = result
-  // delLoading.value = false
-}
-// ================区域现货商品删除 end=====================
+        ghscode: ghsCode,
+      };
+    });
+    // delLoading.value = true
+    // const result = await getAreaList(param.value)
+    // delAreaList.value = result
+    // delLoading.value = false
+  };
+  // ================区域现货商品删除 end=====================
 
-let allAreaList = ref<any[]>([
-  {
-    "id": "0",
-    "provinceId": "0",
-    "province": '北京市',
-    "cityId": 0,
-    "city": '市辖区',
-    "creator": '',
-    "creationTime": '',
-    disabled: true,
-  },
-  {
-    "id": "1",
-    "provinceId": "1",
-    "province": '河北省',
-    "cityId": 1,
-    "city": '保定市',
-    "creator": '',
-    "creationTime": ''
-  },
-  {
-    "id": "2",
-    "provinceId": "2",
-    "province": '河北省',
-    "cityId": 2,
-    "city": '石家庄市',
-    "creator": '',
-    "creationTime": ''
-  },
-  {
-    "id": "3",
-    "provinceId": "3",
-    "province": '河北省',
-    "cityId": 3,
-    "city": '秦皇岛市',
-    "creator": '',
-    "creationTime": ''
-  },
-  {
-    "id": "4",
-    "provinceId": "4",
-    "province": '河北省',
-    "cityId": 3,
-    "city": '承德市',
-    "creator": '',
-    "creationTime": ''
-  }
-])
-const getAllAreaList = async () => {
-  const res = await regionalSpotManageGetAreaListApi({});
-  if (res.success) {
-    allAreaList.value = res.data
-  } else {
-    allAreaList.value = []
-  }
-}
+  let allAreaList = ref<any[]>([
+    {
+      id: '0',
+      provinceId: '0',
+      province: '北京市',
+      cityId: 0,
+      city: '市辖区',
+      creator: '',
+      creationTime: '',
+      disabled: true,
+    },
+    {
+      id: '1',
+      provinceId: '1',
+      province: '河北省',
+      cityId: 1,
+      city: '保定市',
+      creator: '',
+      creationTime: '',
+    },
+    {
+      id: '2',
+      provinceId: '2',
+      province: '河北省',
+      cityId: 2,
+      city: '石家庄市',
+      creator: '',
+      creationTime: '',
+    },
+    {
+      id: '3',
+      provinceId: '3',
+      province: '河北省',
+      cityId: 3,
+      city: '秦皇岛市',
+      creator: '',
+      creationTime: '',
+    },
+    {
+      id: '4',
+      provinceId: '4',
+      province: '河北省',
+      cityId: 3,
+      city: '承德市',
+      creator: '',
+      creationTime: '',
+    },
+  ]);
+  const getAllAreaList = async () => {
+    const res = await regionalSpotManageGetAreaListApi({});
+    if (res.success) {
+      allAreaList.value = res.data;
+    } else {
+      allAreaList.value = [];
+    }
+  };
 
-// =====================批量导入 start=======================
-let productExcelList = ref<any[]>([])
-let importVisible = ref(false)
-const impotrCheckboxValue = ref([])
-const batchImport = () => {
-  importVisible.value = true
-  allAreaList.value.forEach(v => {
-    v.disabled = false
-  })
-}
-const productExcelBeforeUpload = (file, fileList) => {
-  const isLt8M = file.size / 1024 / 1024 <= 8
-  const extension = file.name.substring(file.name.lastIndexOf('.') + 1)
-  if (!isLt8M) {
-    message.error('上传文件大小不能超过 8MB!')
-    return false
-  }
-  if (extension !== 'xls' && extension !== 'xlsx') {
-    message.error('只能上传excel的文件')
-    return false
-  }
-  let curFileList = [...fileList]
-  curFileList = curFileList.slice(-1)
-  productExcelList.value = curFileList
-  return false
-}
-const productExcelRemove = () => {
-  productExcelList.value = []
-}
-const downLoad = () => {
-  window.open(config.VITE_GLOB_API_URL, '_blank')
-}
-let importLoading = ref(false)
-const confirmImport = async () => {
-  if(!productExcelList.value.length) return message.error('请上传文件')
-  if(!impotrCheckboxValue.value.length) return message.error('请选择现货区域')
-  const param: FormData = new FormData();
-  param.append('ghsCode', ghsCode)
-  param.append('file', productExcelList.value[0])
-  param.append('areaIds', impotrCheckboxValue.value.join(','))
-  importLoading.value = true
-  const res = await regionalSpotManageUploadOpsProductApi(param);
-  if (res.code === 20000) {
-    message.success('批量导入成功')
-  } else {
-    message.error(res.message)
-  }
-  importLoading.value = false
-}
-const importCancel = () => {
-  importVisible.value = false
-  impotrCheckboxValue.value = []
-  productExcelList.value = []
-}
-// =====================批量导入 end=======================
-const goTaskCenter = () => {
-  router.push({
-    path: '/taskCenter'
-  })
-}
+  // =====================批量导入 start=======================
+  let productExcelList = ref<any[]>([]);
+  let importVisible = ref(false);
+  const impotrCheckboxValue = ref([]);
+  const batchImport = () => {
+    importVisible.value = true;
+    allAreaList.value.forEach((v) => {
+      v.disabled = false;
+    });
+  };
+  const productExcelBeforeUpload = (file, fileList) => {
+    const isLt8M = file.size / 1024 / 1024 <= 8;
+    const extension = file.name.substring(file.name.lastIndexOf('.') + 1);
+    if (!isLt8M) {
+      message.error('上传文件大小不能超过 8MB!');
+      return false;
+    }
+    if (extension !== 'xls' && extension !== 'xlsx') {
+      message.error('只能上传excel的文件');
+      return false;
+    }
+    let curFileList = [...fileList];
+    curFileList = curFileList.slice(-1);
+    productExcelList.value = curFileList;
+    return false;
+  };
+  const productExcelRemove = () => {
+    productExcelList.value = [];
+  };
+  const downLoad = () => {
+    window.open(config.VITE_GLOB_API_URL, '_blank');
+  };
+  let importLoading = ref(false);
+  const confirmImport = async () => {
+    if (!productExcelList.value.length) return message.error('请上传文件');
+    if (!impotrCheckboxValue.value.length) return message.error('请选择现货区域');
+    const param: FormData = new FormData();
+    param.append('ghsCode', ghsCode);
+    param.append('file', productExcelList.value[0]);
+    param.append('areaIds', impotrCheckboxValue.value.join(','));
+    importLoading.value = true;
+    const res = await regionalSpotManageUploadOpsProductApi(param);
+    if (res.code === 20000) {
+      message.success('批量导入成功');
+    } else {
+      message.error(res.message);
+    }
+    importLoading.value = false;
+  };
+  const importCancel = () => {
+    importVisible.value = false;
+    impotrCheckboxValue.value = [];
+    productExcelList.value = [];
+  };
+  // =====================批量导入 end=======================
+  const goTaskCenter = () => {
+    router.push({
+      path: '/taskCenter',
+    });
+  };
 </script>
 
 <template>
   <div>
     <div class="body-box">
-      <Form :model="searchForm" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" class="top-search">
+      <Form
+        :model="searchForm"
+        :label-col="{ span: 6 }"
+        :wrapper-col="{ span: 18 }"
+        class="top-search"
+      >
         <Row :gutter="20">
           <Col :xxl="4" :xl="6" :lg="8" :sm="12" :xs="24">
-          <FormItem label="品牌名称" name="brandList">
-            <!-- <Input v-model:value="searchForm.brandList" allow-clear placeholder="请输入品牌名称" /> -->
-            <a-select
-              v-model:value="searchForm.brandList"
-              show-search
-              mode="multiple"
-              placeholder="请输入品牌名称"
-              style="width: 100%"
-              :default-active-first-option="false"
-              :show-arrow="false"
-              :filter-option="false"
-              :not-found-content="null"
-              @search="handleSearch"
-            >
-              <a-select-option v-for="item in searchBrandList" :key="item.value" :label="item.label" :value="item.value">
-                {{ item.label }}
-              </a-select-option>
-            </a-select>
-          </FormItem>
+            <FormItem label="品牌名称" name="brandList">
+              <!-- <Input v-model:value="searchForm.brandList" allow-clear placeholder="请输入品牌名称" /> -->
+              <a-select
+                v-model:value="searchForm.brandList"
+                show-search
+                mode="multiple"
+                placeholder="请输入品牌名称"
+                style="width: 100%"
+                :default-active-first-option="false"
+                :show-arrow="false"
+                :filter-option="false"
+                :not-found-content="null"
+                @search="handleSearch"
+              >
+                <a-select-option
+                  v-for="item in searchBrandList"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                  {{ item.label }}
+                </a-select-option>
+              </a-select>
+            </FormItem>
           </Col>
           <Col :xxl="4" :xl="6" :lg="8" :sm="12" :xs="24">
-          <FormItem label="货号" name="goodsNo">
-            <Input v-model:value="searchForm.goodsNo" allow-clear placeholder="请输入货号" />
-          </FormItem>
+            <FormItem label="货号" name="goodsNo">
+              <Input v-model:value="searchForm.goodsNo" allow-clear placeholder="请输入货号" />
+            </FormItem>
           </Col>
           <Col :xxl="4" :xl="6" :lg="8" :sm="12" :xs="24">
-          <FormItem label="现货区域" name="areaIds">
-            <Select v-model:value="searchForm.areaIds" allowClear mode="multiple" placeholder="请选择现货区域" style="width: 100%">
-              <SelectOption v-for="(item, index) in areaIdsOption" :key="index" :value="item.value">{{ item.label }}</SelectOption>
-            </Select>
-          </FormItem>
+            <FormItem label="现货区域" name="areaIds">
+              <Select
+                v-model:value="searchForm.areaIds"
+                allowClear
+                mode="multiple"
+                placeholder="请选择现货区域"
+                style="width: 100%"
+              >
+                <SelectOption
+                  v-for="(item, index) in areaIdsOption"
+                  :key="index"
+                  :value="item.value"
+                  >{{ item.label }}</SelectOption
+                >
+              </Select>
+            </FormItem>
           </Col>
           <Col :xxl="4" :xl="6" :lg="8" :sm="12" :xs="24">
-          <FormItem label="商品分组" name="types">
-            <Select v-model:value="searchForm.types" allowClear mode="multiple" placeholder="请选择商品分组" style="width: 100%">
-              <SelectOption v-for="(item, index) in typesOption" :key="index" :value="item.value">{{ item.label }}</SelectOption>
-            </Select>
-          </FormItem>
+            <FormItem label="商品分组" name="types">
+              <Select
+                v-model:value="searchForm.types"
+                allowClear
+                mode="multiple"
+                placeholder="请选择商品分组"
+                style="width: 100%"
+              >
+                <SelectOption
+                  v-for="(item, index) in typesOption"
+                  :key="index"
+                  :value="item.value"
+                  >{{ item.label }}</SelectOption
+                >
+              </Select>
+            </FormItem>
           </Col>
-          <Col :span="24" style="display: flex;justify-content: space-between;">
+          <Col :span="24" style="display: flex; justify-content: space-between">
             <div>
               <Button type="primary" style="margin: 0 5px" @click="onSearch">查询</Button>
               <Button style="margin: 0 5px" @click="onRset">重置</Button>
@@ -525,94 +568,121 @@ const goTaskCenter = () => {
           </Col>
         </Row>
       </Form>
-      <a-table 
+      <a-table
         :data-source="list"
         :loading="listLoading"
         bordered
         :pagination="pagination"
-        :rowKey="(record) => record.sysid" 
-        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange, columnWidth: 65 }"
+        :rowKey="(record) => record.sysid"
+        :row-selection="{
+          selectedRowKeys: selectedRowKeys,
+          onChange: onSelectChange,
+          columnWidth: 65,
+        }"
         style="margin-top: 15px"
-        >
+      >
         <a-table-column title="商品名称" align="center" :width="100">
-          <template v-slot="{record}">
+          <template v-slot="{ record }">
             {{ record.productName }}
           </template>
         </a-table-column>
         <a-table-column title="品牌" align="center" :width="100">
-          <template v-slot="{record}">
+          <template v-slot="{ record }">
             {{ record.brand }}
           </template>
         </a-table-column>
         <a-table-column title="货号" align="center" :width="100">
-          <template v-slot="{record}">
+          <template v-slot="{ record }">
             {{ record.goodsNo }}
           </template>
         </a-table-column>
         <a-table-column title="规格" align="center" :width="100">
-          <template v-slot="{record}">
+          <template v-slot="{ record }">
             {{ record.spec }}
           </template>
         </a-table-column>
         <a-table-column title="当前现货区域" align="center" :width="100">
-          <template v-slot="{record}">
+          <template v-slot="{ record }">
             <Button type="link" @click="viewCurrent(record)">查看区域现货</Button>
           </template>
         </a-table-column>
         <a-table-column title="上架状态" align="center" :width="100">
-          <template v-slot="{record}">
+          <template v-slot="{ record }">
             {{ record.productStatus }}
           </template>
         </a-table-column>
         <a-table-column title="操作" align="center" :width="200">
-          <template v-slot="{record}">
+          <template #default="{ record }">
             <Button type="link" @click="addArea(record)">增加区域</Button>
             <Button type="link" style="margin-left: 5px" @click="del(record)">删除</Button>
           </template>
         </a-table-column>
       </a-table>
     </div>
-    <addProductModal v-if="showModal" @close="closeVisible"></addProductModal>
-    <a-modal v-model:visible="visible" title="商品可提供现货区域查看" :width="600" @ok="visible = false" :footer="null" :maskClosable="false" okText="提交">
+    <addProductModal v-if="showModal" @close="closeVisible" />
+    <a-modal
+      v-model:visible="visible"
+      title="商品可提供现货区域查看"
+      :width="600"
+      @ok="visible = false"
+      :footer="null"
+      :maskClosable="false"
+      okText="提交"
+    >
       <div style="margin-top: -35px">商品名称：{{ curItem.productName }}</div>
       <div>商品品牌：{{ curItem.brand }}</div>
       <div>商品货号：{{ curItem.goodsNo }}</div>
       <div>商品规格：{{ curItem.spec }}</div>
-      <a-table 
+      <a-table
         :data-source="regionalSpotGoods"
         bordered
         :loading="loading1"
         :pagination="false"
-        :rowKey="(record) => record.sysid" 
+        :rowKey="(record) => record.sysid"
         style="margin-top: 15px"
-        >
+      >
         <a-table-column title="区域" align="center" :width="100">
-          <template v-slot="{record}">
-            {{ record.provinceName }}-{{ record.cityName }}
-          </template>
+          <template v-slot="{ record }"> {{ record.provinceName }}-{{ record.cityName }} </template>
         </a-table-column>
         <a-table-column title="添加时间" align="center" :width="100">
-          <template v-slot="{record}">
+          <template v-slot="{ record }">
             {{ record.createTime }}
           </template>
         </a-table-column>
         <a-table-column title="添加人" align="center" :width="100">
-          <template v-slot="{record}">
+          <template v-slot="{ record }">
             {{ record.createName }}
           </template>
         </a-table-column>
       </a-table>
     </a-modal>
     <!-- 删除 -->
-    <a-modal v-model:visible="delVisible" title="区域现货商品删除" :width="650" :maskClosable="false" :keyboard="false" @cancel="delVisibleCancel" @ok="confirmDel" :confirmLoading="delConfirLoading" okText="提交">
-      <p>您已选中 <span style="color: #1684FC">{{ deleteNum }}条</span> 商品</p>
-      <a-spin v-if="delLoading" style="height: 150px;width: 100%;line-height: 150px" />
-      <p v-else>选择需要删除的现货区域：
+    <a-modal
+      v-model:visible="delVisible"
+      title="区域现货商品删除"
+      :width="650"
+      :maskClosable="false"
+      :keyboard="false"
+      @cancel="delVisibleCancel"
+      @ok="confirmDel"
+      :confirmLoading="delConfirLoading"
+      okText="提交"
+    >
+      <p
+        >您已选中 <span style="color: #1684fc">{{ deleteNum }}条</span> 商品</p
+      >
+      <a-spin v-if="delLoading" style="height: 150px; width: 100%; line-height: 150px" />
+      <p v-else
+        >选择需要删除的现货区域：
         <a-radio-group v-model:value="radioValue">
           <a-radio :value="1">全部区域</a-radio>
           <a-radio :value="2">部分区域</a-radio>
         </a-radio-group>
-        <a-checkbox-group v-model:value="delCheckboxValue" :disabled="radioValue === 1" style="width: 100%;margin-top: 15px">
+        <a-checkbox-group
+          v-model:value="delCheckboxValue"
+          :disabled="radioValue === 1"
+          style="width: 100%; margin-top: 15px"
+        >
           <a-row>
             <a-col :span="6" v-for="(item, index) in delAreaList" :key="index">
               <a-checkbox :value="item.id">{{ item.province }}-{{ item.city }}</a-checkbox>
@@ -622,7 +692,16 @@ const goTaskCenter = () => {
       </p>
     </a-modal>
     <!-- 增加区域 -->
-    <a-modal v-model:visible="addVisible" title="现货商品增加区域" :width="700" :maskClosable="false" @cancel="addVisibleCancel" @ok="confirmAddArea" okText="提交" :confirmLoading="confirmAddLoading">
+    <a-modal
+      v-model:visible="addVisible"
+      title="现货商品增加区域"
+      :width="700"
+      :maskClosable="false"
+      @cancel="addVisibleCancel"
+      @ok="confirmAddArea"
+      okText="提交"
+      :confirmLoading="confirmAddLoading"
+    >
       <div style="margin-top: -35px">商品名称：{{ curItem.productName }}</div>
       <div>商品品牌：{{ curItem.brand }}</div>
       <div>商品货号：{{ curItem.goodsNo }}</div>
@@ -631,19 +710,33 @@ const goTaskCenter = () => {
       <a-checkbox-group v-model:value="addCheckboxValue" style="width: 100%">
         <a-row>
           <a-col :span="6" v-for="(item, index) in allAreaList" :key="index">
-            <a-checkbox :value="item.id" :disabled="item.disabled">{{ item.province }}-{{ item.city }}</a-checkbox>
+            <a-checkbox :value="item.id" :disabled="item.disabled"
+              >{{ item.province }}-{{ item.city }}</a-checkbox
+            >
           </a-col>
         </a-row>
       </a-checkbox-group>
     </a-modal>
     <!-- 批量导入 -->
-    <a-modal v-model:visible="importVisible" title="区域现货商品批量导入" :width="700" :maskClosable="false" okText="提交" @ok="confirmImport" @cancel="importCancel" :confirmLoading="importLoading">
+    <a-modal
+      v-model:visible="importVisible"
+      title="区域现货商品批量导入"
+      :width="700"
+      :maskClosable="false"
+      okText="提交"
+      @ok="confirmImport"
+      @cancel="importCancel"
+      :confirmLoading="importLoading"
+    >
       <a-alert type="warning">
         <template #message>
-          <span style="color: red">特别提醒：</span>若商品之前已设置现货区域，则本次设置为在之前设置基础上新增。例如，原来商品设置为 北京市-直辖市；天津市-直辖市。本次设置为，北京市-直辖市；四川省-成都市。提交后，商品现货区域将更新为 北京市-直辖市；天津市-直辖市；四川省-成都市。
+          <span style="color: red">特别提醒：</span
+          >若商品之前已设置现货区域，则本次设置为在之前设置基础上新增。例如，原来商品设置为
+          北京市-直辖市；天津市-直辖市。本次设置为，北京市-直辖市；四川省-成都市。提交后，商品现货区域将更新为
+          北京市-直辖市；天津市-直辖市；四川省-成都市。
         </template>
       </a-alert>
-      <div style="margin-top: 15px;display: flex;align-items: center">
+      <div style="margin-top: 15px; display: flex; align-items: center">
         <span>上传商品文件：</span>
         <a-upload
           accept=".xls,.xlsx"
@@ -651,7 +744,7 @@ const goTaskCenter = () => {
           :before-upload="productExcelBeforeUpload"
           @remove="productExcelRemove"
         >
-          <a-button><upload-outlined></upload-outlined>上传文件</a-button>
+          <a-button><upload-outlined />上传文件</a-button>
         </a-upload>
         <span style="margin-left: 15px">
           下载
@@ -659,10 +752,12 @@ const goTaskCenter = () => {
         </span>
       </div>
       <p style="margin-top: 15px">选择现货区域：</p>
-      <a-checkbox-group v-model:value="impotrCheckboxValue" style="width: 100%;">
+      <a-checkbox-group v-model:value="impotrCheckboxValue" style="width: 100%">
         <a-row>
           <a-col :span="6" v-for="(item, index) in allAreaList" :key="index">
-            <a-checkbox :value="item.id" :disabled="item.disabled">{{ item.province }}-{{ item.city }}</a-checkbox>
+            <a-checkbox :value="item.id" :disabled="item.disabled"
+              >{{ item.province }}-{{ item.city }}</a-checkbox
+            >
           </a-col>
         </a-row>
       </a-checkbox-group>
@@ -671,9 +766,9 @@ const goTaskCenter = () => {
 </template>
 
 <style lang="less" scoped>
-.body-box {
-  .top-search {
-    margin-top: 15px;
+  .body-box {
+    .top-search {
+      margin-top: 15px;
+    }
   }
-}
 </style>

src/views/regionalSpotManage/components/upLoadTask.vue

 <script lang="ts" setup>
-import { ref, onMounted } from 'vue';
-import {
-  message,
-} from 'ant-design-vue';
-const config = import.meta.env
-import {
-  taskCenterQueryListApi,
-  taskCenterRevokeExcelUploadApi,
-} from '/@/api/regionalSpotManage';
-onMounted(async () => {
-  getList()
-});
-let list = ref<any[]>([])
-let listLoading = ref(false)
-const downLoad = (url) => {
-  window.open(config.VITE_GLOB_API_URL + '/system/excelFile/' + url, '_blank')
-}
-const downloadFail = (record) => {
-  if(record.failNum === 0) return
-  let href = config.VITE_GLOB_API_URL + '/excel/excelNew/fail/download?sysid=' + record.sysid+'&type='+record.type.slice(2,6)
-  window.open(href,'blank')
-}
-const cancel = async (record) => {
-  const param = ref<{ [key: string]: any }>({
-    sysid: record.sysid
-  })
-  const res = await taskCenterRevokeExcelUploadApi(param.value)
-  if (res.code === 20000) {
-    message.success('操作成功')
-    getList()
-  } else {
-    message.error(res.message)
-  }
-}
-const getList = async () => {
-  listLoading.value = true
-  const res = await taskCenterQueryListApi({type:0})
-  if (res.code === 20000) {
-    list.value = res.data
-  } else {
-    list.value = []
-  }
-  listLoading.value = false
-}
+  import { ref, onMounted } from 'vue';
+  import { message } from 'ant-design-vue';
+  const config = import.meta.env;
+  import {
+    taskCenterQueryListApi,
+    taskCenterRevokeExcelUploadApi,
+  } from '/@/api/regionalSpotManage';
+  onMounted(async () => {
+    getList();
+  });
+  let list = ref<any[]>([]);
+  let listLoading = ref(false);
+  const downLoad = (url) => {
+    window.open(config.VITE_GLOB_API_URL + '/system/excelFile/' + url, '_blank');
+  };
+  const downloadFail = (record) => {
+    if (record.failNum === 0) return;
+    let href =
+      config.VITE_GLOB_API_URL +
+      '/excel/excelNew/fail/download?sysid=' +
+      record.sysid +
+      '&type=' +
+      record.type.slice(2, 6);
+    window.open(href, 'blank');
+  };
+  const cancel = async (record) => {
+    const param = ref<{ [key: string]: any }>({
+      sysid: record.sysid,
+    });
+    const res = await taskCenterRevokeExcelUploadApi(param.value);
+    if (res.code === 20000) {
+      message.success('操作成功');
+      getList();
+    } else {
+      message.error(res.message);
+    }
+  };
+  const getList = async () => {
+    listLoading.value = true;
+    const res = await taskCenterQueryListApi({ type: 0 });
+    if (res.code === 20000) {
+      list.value = res.data;
+    } else {
+      list.value = [];
+    }
+    listLoading.value = false;
+  };
 </script>
 
 <template>
   <div>
     <a-button @click="getList" type="primary">刷新数据</a-button>
   </div>
-  <a-table 
+  <a-table
     :data-source="list"
     :loading="listLoading"
     bordered
-    :rowKey="(record) => record.sysid" 
+    :rowKey="(record) => record.sysid"
     style="margin-top: 15px"
-    >
+  >
     <a-table-column title="操作时间" align="center" :width="100">
-      <template v-slot="{record}">
+      <template #default="{ record }">
         {{ record.createTime }}
       </template>
     </a-table-column>
     <a-table-column title="类型" align="center" :width="100">
-      <template v-slot="{record}">
+      <template #default="{ record }">
         {{ record.type }}
       </template>
     </a-table-column>
     <a-table-column title="状态" align="center" :width="100">
-      <template v-slot="{record}">
-        <p>{{ record.isRevoke ? '已撤销' : record.status == 0 ? '待进行':(record.status == 1 ? '进行中':'已完成') }}</p>
+      <template #default="{ record }">
+        <p>{{
+          record.isRevoke
+            ? '已撤销'
+            : record.status == 0
+            ? '待进行'
+            : record.status == 1
+            ? '进行中'
+            : '已完成'
+        }}</p>
       </template>
     </a-table-column>
     <a-table-column title="操作数据" align="center" :width="100">
-      <template v-slot="{record}">
+      <template #default="{ record }">
         {{ record.sproductNumpec }}
       </template>
     </a-table-column>
     <a-table-column title="成功数据" align="center" :width="100">
-      <template v-slot="{record}">
+      <template #default="{ record }">
         {{ record.successNum }}
       </template>
     </a-table-column>
     <a-table-column title="错误数据" align="center" :width="100">
-      <template v-slot="{record}">
+      <template #default="{ record }">
         {{ record.failNum }}
       </template>
     </a-table-column>
     <a-table-column title="操作人" align="center" :width="100">
-      <template v-slot="{record}">
+      <template #default="{ record }">
         {{ record.createName }}
       </template>
     </a-table-column>
     <a-table-column title="操作" align="center" :width="200">
-      <template v-slot="{record}">
+      <template #default="{ record }">
         <Button type="link" @click="downLoad(record.fileUrl)">下载源文件</Button>
-        <Button type="link" v-if="record.failNum" @click="downloadFail(record)">下载错误数据</Button>
-        <Button type="link" v-if="record.status == 0 && !record.isRevoke" @click="cancel(record)">撤销</Button>
+        <Button type="link" v-if="record.failNum" @click="downloadFail(record)"
+          >下载错误数据</Button
+        >
+        <Button type="link" v-if="record.status == 0 && !record.isRevoke" @click="cancel(record)"
+          >撤销</Button
+        >
       </template>
     </a-table-column>
   </a-table>
 </template>
 
-<style lang="less" scoped>
-
-</style>
+<style lang="less" scoped></style>

src/views/regionalSpotManage/taskCenter.vue

 <script lang="ts" setup>
-import { ref } from 'vue';
-import uploadTask from './components/upLoadTask.vue'
-import downLoadTask from './components/downLoadTask.vue'
-import platformProBatch from './components/platformProBatch.vue'
-const activeKey = ref('1')
-const callback = (val) => {
-  activeKey.value = val
-}
+  import { ref } from 'vue';
+  import uploadTask from './components/upLoadTask.vue';
+  import downLoadTask from './components/downLoadTask.vue';
+  import platformProBatch from './components/platformProBatch.vue';
+  const activeKey = ref('1');
+  const callback = (val) => {
+    activeKey.value = val;
+  };
 </script>
 
 <template>
   <a-tabs @change="callback" v-model:activeKey="activeKey">
     <a-tab-pane key="1" tab="上传任务数据">
-      <uploadTask v-if="activeKey === '1'"></uploadTask>
+      <uploadTask v-if="activeKey === '1'" />
     </a-tab-pane>
     <a-tab-pane key="2" tab="下载任务数据" force-render>
-      <downLoadTask v-if="activeKey === '2'"></downLoadTask>
+      <downLoadTask v-if="activeKey === '2'" />
     </a-tab-pane>
     <a-tab-pane key="3" tab="平台商品批量">
-      <platformProBatch v-if="activeKey === '3'"></platformProBatch>
+      <platformProBatch v-if="activeKey === '3'" />
     </a-tab-pane>
   </a-tabs>
 </template>
 
-<style lang="less" scoped>
-
-</style>
+<style lang="less" scoped></style>

types/global.d.ts

@@ -52,6 +52,13 @@ declare global {
   declare interface WheelEvent {
     path?: EventTarget[];
   }
+
+  interface ImportMeta {
+    env: {
+      VITE_GLOB_API_URL?: string;
+    };
+  }
+
   interface ImportMetaEnv extends ViteEnv {
     __: unknown;
   }