供应商省市区接口对接

chenhj

2025-06-04 8959959e59f5a95ca7e61aa60decba4364f36339

 src/views/basicInformation/index.vue

@@ -1,113 +1,43 @@
<template>
  <div class="app-container">
      <el-form :inline="true" :model="queryParams" class="search-form">
        <el-form-item label="搜索">
          <el-input
            v-model="queryParams.searchText"
            placeholder="请输入关键词"
            clearable
            :style="{ width: '100%' }"
          />
        </el-form-item>
        <el-form-item label="供应商名称">
          <el-input
            v-model="queryParams.supplierName"
            placeholder="请输入"
            clearable
            :style="{ width: '100%' }"
          />
        </el-form-item>
        <el-form-item label="统一人识别号">
          <el-input
            v-model="queryParams.identifyNumber"
            placeholder="请输入"
            clearable
            :style="{ width: '100%' }"
          />
        </el-form-item>
        <el-form-item label="经营地址">
          <el-input
            v-model="queryParams.address"
            placeholder="请输入"
            clearable
            :style="{ width: '100%' }"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">查询</el-button>
          <el-button @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
  <div>
    <el-form :inline="true" :model="queryParams" class="search-form">
      <el-form-item label="供应商名称">
        <el-input v-model="queryParams.searchAll" placeholder="请输入关键词" clearable />
      </el-form-item>
  
      <el-form-item>
        <el-button type="primary" @click="getList">查询</el-button>
        <el-button @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-card>
      <!-- 标签页 -->
      <el-tabs
        v-model="activeTab"
        class="info-tabs"
        @tab-click="handleTabClick"
      >
        <el-tab-pane
          v-for="tab in tabs"
          :key="tab.name"
          :label="tab.label"
          :name="tab.name"
        />
      <el-tabs v-model="activeTab" class="info-tabs" @tab-click="handleTabClick">
        <el-tab-pane v-for="tab in tabs" :key="tab.name" :label="tab.label" :name="tab.name" />
      </el-tabs>

  
      <!-- 操作按钮区 -->
      <el-row :gutter="24" class="table-toolbar">
        <el-button type="primary" :icon="Plus" @click="handleAdd"
          >新建</el-button
        >
        <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-row> 
      </el-row>
      <!-- 表格组件 -->
      <div>
        <data-table
          :loading="loading"
          :table-data="tableData"
          :columns="columns"
          @selection-change="handleSelectionChange"
          @edit="handleEdit"
          @delete="handleDeleteSuccess"
          :show-selection="true"
          :border="true"
          :maxHeight="440"
        />
      </div>
      <pagination
        v-if="total>0"
        :page-num="pageNum"
        :page-size="pageSize"
        :total="total"
        @pagination="handleQuery"
        :layout="'total, prev, pager, next, jumper'"
      />
      <Supplier
        v-if="tabName === 'supplier'"
        v-model:supplierDialogFormVisible="dialogFormVisible"
        :form="form"
        :title="title"
        @submit="handleSubmit"
        @beforeClose="handleBeforeClose"
        @update:dialogFormVisible="handleDialogFormVisible"
        :addOrEdit="addOrEdit"
      />
      <Customer
        v-if="tabName === 'customer'"
        v-model:customerDialogFormVisible="dialogFormVisible"
        :form="form"
        :title="title"
        @submit="handleSubmit"
        @beforeClose="handleBeforeClose"
      />
      <Coal
        v-if="tabName === 'coal'"
        v-model:coalDialogFormVisible="dialogFormVisible"
        :form="form"
        :title="title"
        @submit="handleSubmit"
      />
        <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"
        :layout="'total, prev, pager, next, jumper'" />
      <Supplier v-if="tabName === 'supplier'" v-model:supplierDialogFormVisible="dialogFormVisible" :form="form"
        :title="title" @submit="handleSubmit" @beforeClose="handleBeforeClose"
        @update:dialogFormVisible="handleDialogFormVisible" :addOrEdit="addOrEdit" />
      <Customer v-if="tabName === 'customer'" v-model:customerDialogFormVisible="dialogFormVisible" :form="form"
        :title="title" @submit="handleSubmit" :addOrEdit="addOrEdit" @beforeClose="handleBeforeClose" />
      <Coal v-if="tabName === 'coal'" v-model:coalDialogFormVisible="dialogFormVisible" :form="form" :title="title"
        :addOrEdit="addOrEdit" @submit="handleSubmit" />
      <coalQualityMaintenance v-if="tabName === 'coalQualityMaintenance'"
        v-model:coalQualityMaintenanceDialogFormVisible="dialogFormVisible" :form="form" :title="title"
        :addOrEdit="addOrEdit" @submit="handleSubmit" />
    </el-card>
  </div>
</template>
@@ -121,8 +51,13 @@
import Supplier from "./mould/supplier.vue";
import Customer from "./mould/customer.vue";
import Coal from "./mould/coal.vue";
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";
// 弹窗
const coalQualityMaintenanceDialogFormVisible = ref(false);
const customerDialogFormVisible = ref(false);
const coalDialogFormVisible = ref(false);
const supplierDialogFormVisible = ref(false);
@@ -136,7 +71,7 @@
const loading = ref(false);
const total = ref(0);
const pageNum = ref(1);
const pageSize = ref(10);
const pageSizes = ref(10);
const activeTab = ref("supplier");
const selectedRows = ref([]);
// 查询参数
@@ -155,35 +90,35 @@
  { name: "supplier", label: "供应商信息" },
  { name: "customer", label: "客户信息" },
  { name: "coal", label: "煤种信息" },
  { name: "coalQualityMaintenance", label: "煤质维护" },
]);
// 是否编辑
const addOrEdit = ref("add");
// 表格数据
const tableData = ref([]);
// 方法定义
// 查询方法
const handleQuery = () => {
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
  }, 500);

};
// supplier 供应商数据
const supplierColumns = reactive([
const supplierColumns = ref([
  { prop: "supplierName", label: "供应商名称", minWidth: 200 },
  { prop: "identifyNumber", label: "统一人识别号", minWidth: 120 },
  { prop: "address", label: "经营地址", minWidth: 150 },
  { prop: "bank", label: "开户行", minWidth: 120 },
  { prop: "bankAccount", label: "银行账号", minWidth: 150 },
  { prop: "contacts", label: "联系人", minWidth: 100 },
  { prop: "taxpayerId", label: "统一人识别号", minWidth: 120 },
  { prop: "businessAddress", label: "经营地址", minWidth: 150 },
  { prop: "bids", 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: "maintainDate", label: "维护日期", minWidth: 100 },
  { prop: "createTime", label: "维护日期", minWidth: 100 },
]);
// customer 客户数据
const customerColumns = reactive([
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 },
@@ -192,46 +127,60 @@
  { prop: "maintainDate", label: "维护日期", minWidth: 100 },
]);
// coal 煤种数据
const coalColumns = reactive([
const coalColumns = ref([
  { prop: "coalName", label: "煤种名称", minWidth: 200 },
  { prop: "maintainer", label: "维护人", minWidth: 120 },
  { prop: "maintainerId", label: "维护人", minWidth: 120 },
  { prop: "maintenanceDate", label: "维护日期", minWidth: 150 },
]);
// coalQualityMaintenance 煤质维护数据
const coalQualityMaintenanceColumns = ref([
  { prop: "supplierName", label: "全水(<)", minWidth: 200 },
  { prop: "identifyNumber", label: "水分析(<)", minWidth: 120 },
  { prop: "address", label: "灰分", minWidth: 150 },
  { prop: "bank", label: "挥发(>)", minWidth: 100 },
  { prop: "bankAccount", label: "硫(<)", minWidth: 100 },
  { prop: "contacts", label: "固定碳", minWidth: 100 },
  { prop: "contactAddress", label: "高位发热量", minWidth: 100 },
  { prop: "maintainer", label: "低位发热量", minWidth: 100 },
]);
// 标签页点击
const handleTabClick = (tab) => {
  form.value = {};
  getList();
  addOrEdit.value = "add";
  loading.value = true;
  tabName.value = tab.props.name;
  tableData.value = [];
  getList();
  switch (tabName.value) {
    case "supplier":
      columns.value = supplierColumns;
      columns.value = supplierColumns.value;
      dialogFormVisible.value = supplierDialogFormVisible.value;
      getList("supplier");
      break;
    case "customer":
      columns.value = customerColumns;
      columns.value = customerColumns.value;
      dialogFormVisible.value = customerDialogFormVisible.value;
      getList("customer");

      break;
    case "coal":
      columns.value = coalColumns;
      columns.value = coalColumns.value;
      dialogFormVisible.value = coalDialogFormVisible.value;
      getList("coal");
      break;
    case "coalQualityMaintenance":
      columns.value = coalQualityMaintenanceColumns.value;
      dialogFormVisible.value = coalQualityMaintenanceDialogFormVisible.value;
      getList("coalQualityMaintenance");
      break;
  }
  setTimeout(() => {
    loading.value = false;
  }, 500);
};
// 重置查询
const resetQuery = () => {
  Object.keys(queryParams).forEach((key) => {
    if (key !== "pageNum" && key !== "pageSize") {
    if (key !== "pageNum" && key !== "pageSizes") {
      queryParams[key] = "";
    }
  });
  handleQuery();
};
// 新增
const handleAdd = () => {
@@ -240,7 +189,7 @@
};
// 新增编辑
const handleAddEdit = (tabName) => {
  addOrEdit.value == "add" ? (title.value = "新增") : (title.value = "编辑");
  addOrEdit.value == "add" ? title.value = "新增" : title.value = "编辑";
  if (tabName === "supplier") {
    dialogFormVisible.value = true;
    title.value = title.value + "供应商信息";
@@ -252,6 +201,10 @@
  } else if (tabName === "coal") {
    dialogFormVisible.value = true;
    title.value = title.value + "煤种信息";
    openDialog();
  } else if (tabName === "coalQualityMaintenance") {
    dialogFormVisible.value = true;
    title.value = title.value + "煤质维护";
    openDialog();
  }
};
@@ -265,11 +218,22 @@
  form.value = {};
  dialogFormVisible.value = true;
};
// 提交表单
const handleSubmit = (val) => {
  // 拿到提交数据
  dialogFormVisible.value = false;
// 分页
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);
    return;
  }
  ElMessage.success("新增成功：" + result.msg);
  dialogFormVisible.value = false;
};
const handleDialogFormVisible = (value) => {
  dialogFormVisible.value = value;
@@ -280,9 +244,9 @@
};
// 编辑
const handleEdit = (row) => {
    form.value = JSON.parse(JSON.stringify(row));
    addOrEdit.value = "edit";
    handleAddEdit(tabName.value);
  form.value = JSON.parse(JSON.stringify(row));
  addOrEdit.value = "edit";
  handleAddEdit(tabName.value);
};
// 批量删除
const handleDelete = () => {
@@ -290,29 +254,30 @@
    ElMessage.warning("请选择要删除的数据");
    return;
  }
  let arr = reactive([]);
  selectedRows.value.forEach(element => {
    return arr.push(element.id);
  });
  console.log("选中的数据ID：", arr);
  ElMessageBox.confirm("确定删除选中的数据吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      ElMessage.success("删除成功，共删除" + selectedRows.value.length + "条数据");
      selectedRows.value.forEach((row) => {
        tableData.value = tableData.value.filter(
          (item) => item !== row
        );
      });
      total.value = tableData.value.length;
      // 清空选中行
      selectedRows.value = [];
  }).catch(() => {
    ElMessage.info("已取消删除操作");
  });
    .then(async () => {
      try {
        let res = await delSupply(arr)
        console.log(res)
        selectedRows.value = [];
        getlist()
      } catch {
        ElMessage.error("删除失败，请稍后再试");
        return;
      }
    }).catch(() => {
      ElMessage.info("已取消删除操作");
    });
}
// 表格删除
const handleDeleteSuccess = (row) => {
  ElMessage.success("删除成功：" + row.supplierName);
};
// 关闭弹窗
const handleBeforeClose = () => {
  dialogFormVisible.value = false;
@@ -324,184 +289,55 @@
  }, `post_${new Date().getTime()}.xlsx`)
  ElMessage.success("导出数据：" + row.supplierName);
};
const getList = () => {
// 选择接口
const selectInterface = () => {
  if (tabName.value === "supplier") {
    return getSupply({
      current: pageNum.value,
      pageSize: pageSizes.value,
      searchAll: queryParams.searchAll,
    });
  } else if (tabName.value === "customer") {
    return getSupply({
      current: pageNum.value,
      pageSize: pageSizes.value,
      ...queryParams
    });
  } else if (tabName.value === "coal") {
    console.log(addOrEdit.value)
    return getCoalInfo();
  } else if (tabName.value === "coalQualityMaintenance") {
    return getCoalQuality({
      current: pageNum.value,
      pageSize: pageSizes.value,
      ...queryParams
    });
  }
}
const getList = async () => {
  loading.value = true;
  setTimeout(() => {
    // 暂时引入测试数据
    tableData.value = [
      {
        supplierName: "中国冶金科工股份有限公司",
        identifyNumber: "123412123123123111",
        address: "山西省",
        bank: "交通银行",
        bankAccount: "901234567890123456",
        contacts: "李雪芹",
        contactAddress: "XX省XX市XX区XX路",
        maintainer: "李雪芹",
        maintainDate: "2022-09-26",
        contactsPhone: "19345678901",
      },
      {
        supplierName: "中国冶金科工股份有限公司",
        identifyNumber: "123412123123123111",
        address: "山西省",
        bank: "交通银行",
        bankAccount: "901234567890123456",
        contacts: "李雪芹",
        contactAddress: "XX省XX市XX区XX路",
        maintainer: "李雪芹",
        maintainDate: "2022-09-26",
        contactsPhone: "19345678901",
      },
      {
        supplierName: "中国冶金科工股份有限公司",
        identifyNumber: "123412123123123111",
        address: "山西省",
        bank: "交通银行",
        bankAccount: "901234567890123456",
        contacts: "李雪芹",
        contactAddress: "XX省XX市XX区XX路",
        maintainer: "李雪芹",
        maintainDate: "2022-09-26",
        contactsPhone: "19345678901",
      },
      {
        supplierName: "交通银行股份有限公司",
        identifyNumber: "042-26881314",
        address: "江西省",
        bank: "平安银行",
        bankAccount: "123456789012345678",
        contacts: "周白玉",
        contactAddress: "XX省XX市XX区XX路",
        maintainer: "周白玉",
        maintainDate: "2022-08-29",
      },
      {
        supplierName: "中国冶金科工股份有限公司",
        identifyNumber: "019-65851198",
        address: "山西省",
        bank: "交通银行",
        bankAccount: "901234567890123456",
        contacts: "李雪芹",
        contactAddress: "XX省XX市XX区XX路",
        maintainer: "李雪芹",
        maintainDate: "2022-09-26",
      },
      {
        supplierName: "交通银行股份有限公司",
        identifyNumber: "042-26881314",
        address: "江西省",
        bank: "平安银行",
        bankAccount: "123456789012345678",
        contacts: "周白玉",
        contactAddress: "XX省XX市XX区XX路",
        maintainer: "周白玉",
        maintainDate: "2022-08-29",
      },
      {
        supplierName: "中国冶金科工股份有限公司",
        identifyNumber: "019-65851198",
        address: "山西省",
        bank: "交通银行",
        bankAccount: "901234567890123456",
        contacts: "李雪芹",
        contactAddress: "XX省XX市XX区XX路",
        maintainer: "李雪芹",
        maintainDate: "2022-09-26",
      },
      {
        supplierName: "交通银行股份有限公司",
        identifyNumber: "042-26881314",
        address: "江西省",
        bank: "平安银行",
        bankAccount: "123456789012345678",
        contacts: "周白玉",
        contactAddress: "XX省XX市XX区XX路",
        maintainer: "周白玉",
        maintainDate: "2022-08-29",
      },
      {
        supplierName: "中国冶金科工股份有限公司",
        identifyNumber: "019-65851198",
        address: "山西省",
        bank: "交通银行",
        bankAccount: "901234567890123456",
        contacts: "李雪芹",
        contactAddress: "XX省XX市XX区XX路",
        maintainer: "李雪芹",
        maintainDate: "2022-09-26",
      },
      {
        supplierName: "交通银行股份有限公司",
        identifyNumber: "042-26881314",
        address: "江西省",
        bank: "平安银行",
        bankAccount: "123456789012345678",
        contacts: "周白玉",
        contactAddress: "XX省XX市XX区XX路",
        maintainer: "周白玉",
        maintainDate: "2022-08-29",
      },
      {
        supplierName: "中国冶金科工股份有限公司",
        identifyNumber: "019-65851198",
        address: "山西省",
        bank: "交通银行",
        bankAccount: "901234567890123456",
        contacts: "李雪芹",
        contactAddress: "XX省XX市XX区XX路",
        maintainer: "李雪芹",
        maintainDate: "2022-09-26",
      },
      {
        supplierName: "交通银行股份有限公司",
        identifyNumber: "042-26881314",
        address: "江西省",
        bank: "平安银行",
        bankAccount: "123456789012345678",
        contacts: "周白玉",
        contactAddress: "XX省XX市XX区XX路",
        maintainer: "周白玉",
        maintainDate: "2022-08-29",
      },
    ];
    total.value = tableData.value.length;
    loading.value = false;
  }, 500);
  let { data, code } = await selectInterface()
  console.log(data)
  tableData.value = data.records;
  total.value = data.total;
  loading.value = false;
};
getList();
</script>

<style scoped>
.app-container{
  box-sizing: border-box;
}
.search-form {
  background-color: #fff;
  padding: 20px 20px 0 20px;
  margin-bottom: 20px;
  border-radius: 4px;
  box-shadow: var(--el-box-shadow-light);
}
.search-form :deep(.el-form-item) {
  margin-bottom: 16px;
  width: 100%;
}

/* 响应式布局 */
@media screen and (min-width: 768px) {
  .search-form :deep(.el-form-item) {
    width: 50%;
  }
}

@media screen and (min-width: 1200px) {
  .search-form :deep(.el-form-item) {
    width: 18%;
    width: 16%;
  }
}
.info-tabs {
  margin-bottom: 20px;
}

.table-toolbar {
  margin-bottom: 20px;
  display: flex;
@@ -514,15 +350,27 @@
  .table-toolbar {
    flex-direction: column;
  }

  .table-toolbar .el-button {
    width: 100%;
  }
}

/* 表格工具栏 */
.table-toolbar, .table-toolbar > * {
.table-toolbar,
.table-toolbar>* {
  margin: 0 0 0 0 !important;
}
.table-toolbar{

.table-toolbar {
  margin-bottom: 20px !important;
}

.el-form--inline .el-form-item {
  margin-right: 25px;
}

.main-container {
  background: red !important;
}
</style>