联调基础模块信息-》供应商-》客户信息-》煤种信息 采购信息 联调

张诺

8 天以前 1a73c77e1d14205014f6a77a8954de480d436c0e

 src/views/basicInformation/index.vue

@@ -1,12 +1,13 @@
<template>
  <div>
    <el-form :inline="true" :model="queryParams" class="search-form">
      <el-form-item label="供应商名称">
        <el-input v-model="queryParams.searchAll" placeholder="请输入关键词" clearable />
  <div>    <el-form :inline="true" :model="queryParams" class="search-form" >
      <el-form-item label="搜索" v-if="tabName === 'supplier' || tabName === 'customer'">
        <el-input v-model="queryParams.searchAll" placeholder="供应商/识别码/详细地址" clearable />
      </el-form-item>
  
      <el-form-item label="搜索" v-if="tabName === 'coal' || tabName === 'coalQualityMaintenance'">
        <el-input v-model="queryParams.searchAll" placeholder="请输入搜索信息" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getList">查询</el-button>
        <el-button type="primary" @click="search">查询</el-button>
        <el-button @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
@@ -20,13 +21,14 @@
      <el-row :gutter="24" class="table-toolbar">
        <el-button type="primary" :icon="Plus" @click="handleAdd">新建</el-button>
        <el-button type="danger" :icon="Delete" @click="handleDelete">删除</el-button>
        <el-button type="info" :icon="Download" @click="handleExport">导出</el-button>
        <el-button type="info" :icon="Download" @click="handleExport" v-show="tabName === 'supplier' || tabName === 'customer'">导出</el-button>
      </el-row>
      <!-- 表格组件 -->
      <div>
        <data-table :loading="loading" :table-data="tableData" :columns="columns"
          @selection-change="handleSelectionChange" @edit="handleEdit" :show-selection="true" :border="true" />
      </div>      <pagination v-if="total>0" :page="pageNum" :limit="pageSizes" :total="total" @pagination="handPagination"
      </div>
      <pagination v-if="total>0" :page="pageNum" :limit="pageSizes" :total="total" @pagination="handPagination"
        :layout="'total, prev, pager, next, jumper'" />
      <Supplier v-if="tabName === 'supplier'" v-model:supplierDialogFormVisible="dialogFormVisible" :form="form"
        :title="title" @submit="handleSubmit" @beforeClose="handleBeforeClose"
@@ -43,7 +45,7 @@
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { ref, reactive, onMounted, computed } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { Plus, Edit, Delete, Download } from "@element-plus/icons-vue";
import DataTable from "@/components/Table/ETable.vue";
@@ -54,8 +56,12 @@
import coalQualityMaintenance from "./mould/coalQualityMaintenance.vue";
const { proxy } = getCurrentInstance()
import { getSupply, addOrEditSupply, delSupply } from "@/api/basicInformation/supplier.js";
import { getCoalInfo, addOrEditCoalInfo } from "@/api/basicInformation/coal.js";
import { getCoalQuality, addOrEditCoalQuality } from "@/api/basicInformation/coalQualityMaintenance.js";
import { getCoalInfo, delCoalInfo } from "@/api/basicInformation/coal.js";
import { getCoalQuality, delCoalQuality } from "@/api/basicInformation/coalQualityMaintenance.js";
import { testUserList } from "@/api/tool/publicInterface.js";
import { getAreaOptions } from "@/api/system/area.js";
import { getCustomerList, delCustomer } from "@/api/basicInformation/customer.js";

// 弹窗
const coalQualityMaintenanceDialogFormVisible = ref(false);
const customerDialogFormVisible = ref(false);
@@ -65,6 +71,12 @@
const form = ref({});
const title = ref("");
const copyForm = ref({});
// 用户列表数据
const userList = ref([]);
// 用户映射表，用于快速查找
const userMap = ref({});
// 地址映射表，用于快速查找地址名称
const addressMap = ref({});
// 当前标签
const tabName = ref("supplier");
// 状态变量
@@ -76,13 +88,73 @@
const selectedRows = ref([]);
// 查询参数
const queryParams = reactive({
  searchText: "",
  supplierName: "",
  identifyNumber: "",
  address: "",
});
onMounted(() => {
  handleTabClick({ props: { name: "supplier" } });
// 地址选择数据
const addressSelectOptions = ref([]);
const fetchAreaOptions = async () => {
  addressSelectOptions.value = [];
  const res = await getAreaOptions();
  if (res.code === 200) {
    addressSelectOptions.value = res.data;
    buildAddressMap(res.data); // 构建地址映射表
  }
}

// 构建地址映射表，用于快速查找地址名称
const buildAddressMap = (areaData) => {
  const buildMap = (list, pathList = []) => {
    list.forEach(item => {
      const currentPath = [...pathList, item.label];
      addressMap.value[item.id] = {
        name: item.label,
        fullPath: currentPath.join(' / ')
      };
      if (item.children && item.children.length > 0) {
        buildMap(item.children, currentPath);
      }
    });
  };
  buildMap(areaData);
};

// 地址格式化函数
const formatAddressArray = (addressIds) => {
  // 如果地址映射表还没有准备好，显示 --
  if (!addressMap.value || Object.keys(addressMap.value).length === 0||!addressIds || !Array.isArray(addressIds) || addressIds.length === 0 || addressIds.every(id => !id)) {
    return '--';
  }
  
  const addressNames = addressIds.map(id => {
    return addressMap.value[id]?.name || '--';
  });
  
  // 如果所有地址名称都是 '--'，则返回 '--'
  if (addressNames.every(name => name === '--')) {
    return '--';
  }
  
  return addressNames.filter(name => name !== '--').join(' / ');
};
// 获取用户列表数据
const getUserList = async () => {
  try {
    const res = await testUserList();
    if (res && res.data) {
      userList.value = res.data;
      userList.value.forEach(user => {
        userMap.value[user.userId] = user.username;
      });
      console.log('用户映射表:', userMap.value);
    }
  } catch (error) {
    console.error('获取用户列表失败:', error);
  }
};

onMounted(async () => {
  await handleTabClick({ props: { name: "supplier" } });
  await fetchAreaOptions(); // 先获取地址选择数据并构建映射表
  await getUserList(); // 获取用户列表
});
const columns = ref();
// 标签页数据
@@ -96,40 +168,128 @@
const addOrEdit = ref("add");
// 表格数据
const tableData = ref([]);
// 查询方法
const handleQuery = () => {

};
// supplier 供应商数据
const supplierColumns = ref([
  { prop: "supplierName", label: "供应商名称", minWidth: 200 },
  { prop: "taxpayerId", label: "统一人识别号", minWidth: 120 },
  { prop: "businessAddress", label: "经营地址", minWidth: 150 },
  { prop: "bids", label: "详细地址", minWidth: 150 },
  { prop: "supplierName", label: "供应商名称", minWidth: 100 },
  { prop: "taxpayerId", label: "统一人识别号", minWidth: 170 },  { 
    prop: "bids", 
    label: "经营地址", 
    minWidth: 150,
    showOverflowTooltip: true,
    formatter: (row, column, cellValue) => {
      let arr = [
        row.bprovinceId,
        row.bcityId,
        row.bdistrictId,
      ]
      return formatAddressArray(arr);
    }
  },
  { prop: "businessAddress", label: "经营详细地址", minWidth: 150 },
  { prop: "bankAccount", label: "开户行", minWidth: 120 },
  { prop: "bankName", label: "银行账号", minWidth: 150 },
  { prop: "contactPerson", label: "联系人", minWidth: 100 },
  { prop: "contactAddress", label: "联系地址", minWidth: 150 },
  { prop: "maintainer", label: "维护人", minWidth: 100 },
  { prop: "createTime", label: "维护日期", minWidth: 100 },
  { prop: "contactPerson", label: "联系人", minWidth: 100 },  
  { 
    prop: "cids", 
    label: "联系人地址", 
    minWidth: 150,
    showOverflowTooltip: true,
    formatter: (row, column, cellValue) => {
      let arr = [
        row.cprovinceId,
        row.ccityId,
        row.cdistrictId,
      ]
      return formatAddressArray(arr);
    }
  },{ prop: "contactAddress", label: "联系人详细地址", minWidth: 120 },
  // { 
  //   prop: "maintainerId", 
  //   label: "维护人", 
  //   minWidth: 80,
  //   formatter: (row, column, cellValue) => {
  //     // 如果用户映射表还没有准备好，显示 --
  //     if (!userMap.value || Object.keys(userMap.value).length === 0) {
  //       return '--';
  //     }
  //     // 如果值为空或null，显示 --
  //     if (cellValue === null || cellValue === undefined || cellValue === '') {
  //       return '--';
  //     }
  //     // 如果用户映射表中有对应的用户名，返回用户名
  //     if (userMap.value[cellValue]) {
  //       return userMap.value[cellValue];
  //     }
  //     // 如果没有匹配的用户，显示 --
  //     return '--';
  //   }
  // },
  { prop: "createTime", label: "维护日期", minWidth: 120 },
]);
// customer 客户数据
const customerColumns = ref([
  { prop: "customerName", label: "客户名称", minWidth: 200 },
  { prop: "identifyNumber", label: "统一人识别号", minWidth: 120 },
  { prop: "address", label: "经营地址", minWidth: 150 },
  { prop: "detailedaddress", label: "详细地址", minWidth: 150 },
  { prop: "bank", label: "开户行", minWidth: 120 },
  { prop: "bankAccount", label: "银行账号", minWidth: 150 },
  { prop: "contacts", label: "联系人", minWidth: 100 },
  { prop: "contactAddress", label: "联系地址", minWidth: 150 },
  { prop: "maintainer", label: "维护人", minWidth: 100 },
  { prop: "maintainDate", label: "维护日期", minWidth: 100 },
  { prop: "customerName", label: "客户名称", minWidth: 100 },
  { prop: "taxpayerId", label: "统一人识别号", minWidth: 120 },
{ 
    prop: "bids", 
    label: "经营地址", 
    minWidth: 150,
    showOverflowTooltip: true,
    formatter: (row, column, cellValue) => {
      console.log(row, column, cellValue);
      let arr = [
        row.businessProvinceId,
        row.businessCityId,
        row.businessDistrictId,
      ]
      return formatAddressArray(arr);
    }
  },
  { prop: "businessAddress", label: "详细地址", minWidth: 150 },
  { prop: "bankName", label: "开户行", minWidth: 120 },
  { prop: "bankAccount", label: "银行账号", minWidth: 150 },  
  { prop: "contactPerson", label: "联系人", minWidth: 100 },
  { prop: "contactPhone", label: "联系人电话", minWidth: 100 },
{ 
    prop: "cids", 
    label: "联系人地址", 
    minWidth: 150,
    showOverflowTooltip: true,
    formatter: (row, column, cellValue) => {
      let arr = [
        row.provinceId,
        row.cityId,
        row.districtId,
      ]
      return formatAddressArray(arr);
    }
  },
  { prop: "contactAddress", label: "联系人详细地址", minWidth: 150 },
  { prop: "updateTime", label: "维护日期", minWidth: 100 },
]);
// coal 煤种数据
const coalColumns = ref([
  { prop: "coalName", label: "煤种名称", minWidth: 200 },
  { prop: "maintainerId", label: "维护人", minWidth: 120 },
  { prop: "coal", label: "煤种名称", minWidth: 200 },  { 
    prop: "maintainerId", 
    label: "维护人", 
    minWidth: 120,
    formatter: (row, column, cellValue) => {
      // 如果用户映射表还没有准备好，显示 --
      if (!userMap.value || Object.keys(userMap.value).length === 0) {
        return '--';
      }
      // 如果值为空或null，显示 --
      if (cellValue === null || cellValue === undefined || cellValue === '') {
        return '--';
      }
      // 如果用户映射表中有对应的用户名，返回用户名
      if (userMap.value[cellValue]) {
        return userMap.value[cellValue];
      }
      // 如果没有匹配的用户，显示 --
      return '--';
    }
  },
  { prop: "maintenanceDate", label: "维护日期", minWidth: 150 },
]);
// coalQualityMaintenance 煤质维护数据
@@ -181,6 +341,7 @@
      queryParams[key] = "";
    }
  });
  getList()
};
// 新增
const handleAdd = () => {
@@ -220,20 +381,20 @@
};
// 分页
const handPagination = (val) => {
  console.log("分页参数：", val);
  pageNum.value = val.page;
  pageSizes.value = val.limit;
  getList();
};
// 提交表单
const handleSubmit = async (val) => {
  console.log(val)
  if (val.code !== 200) {
    ElMessage.error("操作失败：" + result.msg);
  console.log(val);
  if (val.result.code !== 200) {
    ElMessage.error("操作失败：" + val.result.msg);
    return;
  }
  ElMessage.success("新增成功：" + result.msg);
  ElMessage.success(val.title + val.result.msg);
  dialogFormVisible.value = false;
  getList();
};
const handleDialogFormVisible = (value) => {
  dialogFormVisible.value = value;
@@ -245,6 +406,34 @@
// 编辑
const handleEdit = (row) => {
  form.value = JSON.parse(JSON.stringify(row));
  if(form.value.bprovinceId && form.value.bdistrictId && form.value.bcityId  ){
    form.value.bids = [
    row.bprovinceId,
    row.bcityId,
    row.bdistrictId,
  ];
  }
   if(form.value.cprovinceId && form.value.cdistrictId && form.value.ccityId  ){
    form.value.cids = [
    row.cprovinceId,
    row.ccityId,
    row.cdistrictId,
  ];
  }
  if(form.value.businessCityId && form.value.businessDistrictId && form.value.businessProvinceId) {
    form.value.bids = [
      row.businessProvinceId,
      row.businessCityId,
      row.businessDistrictId,
    ];
  }
  if(form.value.cityId && form.value.districtId && form.value.provinceId) {
    form.value.cids = [
      row.provinceId,
      row.cityId,
      row.districtId,
    ];
  }
  addOrEdit.value = "edit";
  handleAddEdit(tabName.value);
};
@@ -258,7 +447,6 @@
  selectedRows.value.forEach(element => {
    return arr.push(element.id);
  });
  console.log("选中的数据ID：", arr);
  ElMessageBox.confirm("确定删除选中的数据吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
@@ -266,13 +454,27 @@
  })
    .then(async () => {
      try {
        let res = await delSupply(arr)
        console.log(res)
        selectedRows.value = [];
        getlist()
      } catch {
        let res;
        if( tabName.value === "supplier" ) {
          res = await delSupply(arr);
        } else if (tabName.value === "coal") {
          res = await delCoalInfo(arr);
        } else if (tabName.value === "coalQualityMaintenance") {
          res = await delCoalQuality(arr);
        } else if( tabName.value === "customer") {
          res = await delCustomer(arr);
        }
        if(res.code !== 200 && res.meg == "操作成功") {
          ElMessage.error("删除失败：" + res.msg);
          return;
        }
        ElMessage.success("删除成功");
        await getList(); 
      } catch (e) {
        console.error(e);
        ElMessage.error("删除失败，请稍后再试");
        return;
      } finally {
        selectedRows.value = [];
      }
    }).catch(() => {
      ElMessage.info("已取消删除操作");
@@ -283,11 +485,23 @@
  dialogFormVisible.value = false;
  form.value = {};
};
const handleExport = (row) => {
  proxy.download("system/post/export", {
const handleExport = () => {
  if(tabName.value === "supplier") {
    Export("/supply/export", "供应商信息");
  } else if (tabName.value === "customer") {
    Export("/customer/export", "客户信息");
  } else if (tabName.value === "coal") {
    Export("/supply/export", "煤种信息");
  } else if (tabName.value === "coalQualityMaintenance") {
    Export("/supply/export", "煤质维护信息");

  }
}
const Export = (api,name) => {
  proxy.download(api, {
    ...queryParams.value
  }, `post_${new Date().getTime()}.xlsx`)
  ElMessage.success("导出数据：" + row.supplierName);
  }, `${name}${new Date().getTime()}.xlsx`)
  ElMessage.success("导出数据：" + name);
};
// 选择接口
const selectInterface = () => {
@@ -298,26 +512,41 @@
      searchAll: queryParams.searchAll,
    });
  } else if (tabName.value === "customer") {
    return getSupply({
    return getCustomerList({
      current: pageNum.value,
      pageSize: pageSizes.value,
      ...queryParams
      searchAll: queryParams.searchAll,
    });
  } else if (tabName.value === "coal") {
    console.log(addOrEdit.value)
    return getCoalInfo();
    return getCoalInfo({
      current: pageNum.value,
      pageSize: pageSizes.value,
      searchAll: queryParams.searchAll,
    });
  } else if (tabName.value === "coalQualityMaintenance") {
    return getCoalQuality({
      current: pageNum.value,
      pageSize: pageSizes.value,
      ...queryParams
      searchAll: queryParams.searchAll,
    });
  }
}
const search = () => {
  pageNum.value = 1; // 重置页码
  getList();
};
// 获取列表数据
const getList = async () => {
  loading.value = true;
  /* if (Object.keys(addressMap.value).length === 0) {
    await fetchAreaOptions();
  } */
  let { data, code } = await selectInterface()
  console.log(data)
  if(code !== 200) {
    ElMessage.error("获取数据失败：" + data.msg);
    loading.value = false;
    return;
  }
  tableData.value = data.records;
  total.value = data.total;
  loading.value = false;