后端联调供应商模块 完善页面

张诺

2 天以前 0d72650b6efe87097b117d9eac9a340227b483ed

后端联调供应商模块 完善页面

 src/api/basicInformation/coal.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,21 @@
// ç…¤è´¨ç»´æŠ¤
import request from '@/utils/request'

// æŸ¥è¯¢ç…¤è´¨ç»´æŠ¤åˆ—表
export function getCoalInfo(query) {
    return request({
        url: '/coalInfo/list',
        method: 'get',
        params: query
    })
}

// æ–°å¢žæˆ–编辑煤质维护
export function addOrEditCoalInfo(query) {
    return request({
        url: '/coalInfo/addOrEditCoalInfo',
        method: 'post',
        data: query
    })
}


 src/api/basicInformation/coalQualityMaintenance.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,20 @@
// ç…¤è´¨ç»´æŠ¤
import request from '@/utils/request'

// æŸ¥è¯¢ç…¤è´¨ç»´æŠ¤æ•°æ®åˆ—表
export function getCoalQuality(query) {
    return request({
        url: '/coalQuality/list',
        method: 'get',
        params: query
    })
}
// æ–°å¢žæˆ–编辑煤质维护
export function addOrEditCoalQuality(query){
    return request({
        url: '/coalQuality/addOrEditCoalQuality',
        method: 'post',
        data: query
    })
}


 src/api/basicInformation/supplier.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,28 @@
// ä¾›åº”商数据
import request from '@/utils/request'

// æŸ¥è¯¢ä¾›åº”商数据列表
export function getSupply(query) {
    return request({
        url: '/supply/list',
        method: 'get',
        params: query
    })
}
// å¢žæ”¹ä¾›åº”商数据
export function addOrEditSupply(query){
    return request({
        url: '/supply/addOrEditSupply',
        method: 'post',
        data: query
    })
}
// åˆ é™¤ä¾›åº”商数据
export function delSupply(query){
    return request({
        url: '/supply/delSupply',
        method: 'delete',
        data: query
    })
}


 src/components/Table/ETable.vue

@@ -2,7 +2,6 @@
    <el-table
      v-loading="loading"
      :data="tableData"
      style="width: 100%"
      :border="border"
      :show-selection="showSelection"
      :max-height="maxHeight"
@@ -21,6 +20,7 @@
          v-bind="col"
          :show-overflow-tooltip="shouldShowTooltip(col, tableData)"
          :formatter="(row, column, cellValue) => cellValue == null || cellValue === '' ? '--' : cellValue"
          align="center"
        >
          <template v-if="col.slot" #default>
            <slot></slot>

 src/components/Table/EtableModify.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,278 @@
<template>
  <el-table v-loading="loading" :data="tableData" :border="border" :show-selection="showSelection" :height="height" :max-height="maxHeight"
    :header-cell-style="{ background: '#EBEEF5', color: '#3D3D3D' }" @selection-change="handleSelectionChange"
    @row-click="handleRowClick" @row-dblclick="handleRowDblClick" :row-class-name="tableRowClassName" @cell-click="handleCellClick" :max-width="maxWidth"
    @export="handleExport">
    <el-table-column v-if="showSelection" type="selection" width="55" align="center" />
    <el-table-column v-if="showIndex" label="序号" type="index" width="60" align="center" /> <template
      v-for="col in columns" :key="col.prop">
      <el-table-column v-bind="col" :show-overflow-tooltip="shouldShowTooltip(col, tableData)" align="center"> <template
          #default="scope">
          <template v-if="col.slot">
            <slot></slot>
          </template>
          <template v-else>
            <div class="cell-edit" @dblclick="handleCellEdit(scope.row, col.prop)"
              :class="{'editable': isColumnEditable(col.prop)}"> <span
                v-if="!scope.row.editing || !scope.row.editing[col.prop]" class="cell-text">
                {{ scope.row[col.prop] == null || scope.row[col.prop] === '' ? '--' : scope.row[col.prop] }}
              </span>
              <el-input v-else v-model="scope.row[col.prop]" size="small"
                @focus="handleCellFocus(scope.row, col.prop, $event)" @blur="handleCellSave(scope.row, col.prop)"
                @keyup.enter="handleCellSave(scope.row, col.prop)" class="cell-input" />
            </div>
          </template>
        </template>
      </el-table-column>
    </template>
    <!-- æ“ä½œåˆ— -->
    <el-table-column v-if="showOperations" :label="operationsLabel" :width="operationsWidth" fixed="right" align="center">
      <template #default="scope">
        <slot name="operations" :row="scope.row">
          <el-button v-if="operations.includes('edit')" link type="primary" size="small"
            @click="handleEdit(scope.row)">编辑</el-button>
          <!--            <el-button-->
          <!--              v-if="operations.includes('delete')"-->
          <!--              link-->
          <!--              type="danger"-->
          <!--              size="small"-->
          <!--              @click="handleDelete(scope.row)"-->
          <!--            >删除</el-button>-->
        </slot>
      </template>
    </el-table-column>
  </el-table>
</template>
  
  <script setup>
import { defineEmits, nextTick } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
const props = defineProps({
  // èŽ·å–行样式
  tableRowClassName: {
    type: Function,
    default: () => ''
  },
  // èŽ·å–高度
  height: {
    type: [String, Number],
    default: 'auto'
  },
  // æ˜¯å¦å…è®¸ç¼–辑单元格
  editableCells: {
    type: Boolean,
    default: true
  },
  // æŒ‡å®šå¯ç¼–辑的列，如果为空数组则表示所有列都不可编辑
  editableColumns: {
    type: Array,
    default: () => []
  },
  // æœ€å¤§å®½åº¦
  maxWidth: {
    type: [String, Number],
    default: 'auto'
  },
  handleCellClick: {
    type: Function,
    default: () => { }
  },
  handleRowClick: {
    type: Function,
    default: () => { }
  },
  handleExport: {
    type: Function,
    default: () => { }
  },
  handleRowDblClick: {
    type: Function,
    default: () => { }
  },
  // é«˜åº¦
  maxHeight: {
    type: [String, Number],
    default: 'auto'
  },
  // åŠ è½½çŠ¶æ€
  loading: {
    type: Boolean,
    default: false
  },
  //   border
  border: {
    type: Boolean,
    default: false
  },
  // è¡¨æ ¼æ•°æ®
  tableData: {
    type: Array,
    default: () => []
  },
  // æ˜¯å¦æ˜¾ç¤ºé€‰æ‹©åˆ—
  showSelection: {
    type: Boolean,
    default: false
  },
  // æ˜¯å¦æ˜¾ç¤ºåºå·åˆ—
  showIndex: {
    type: Boolean,
    default: true
  },
  // åˆ—配置
  columns: {
    type: Array,
    default: () => []
  },
  // æ˜¯å¦æ˜¾ç¤ºæ“ä½œåˆ—
  showOperations: {
    type: Boolean,
    default: true
  },
  // æ“ä½œåˆ—标签
  operationsLabel: {
    type: String,
    default: '操作'
  },
  // æ“ä½œåˆ—宽度
  operationsWidth: {
    type: [String, Number],
    default: 100
  },
  // æ˜¾ç¤ºå“ªäº›æ“ä½œæŒ‰é’®
  operations: {
    type: Array,
    default: () => ['edit', 'delete', 'export']
  },
  // åˆ é™¤ç¡®è®¤ä¿¡æ¯
  deleteConfirmText: {
    type: String,
    default: '确认删除该记录？'
  }
})
// æ£€æŸ¥åˆ—是否需要显示tooltip
const shouldShowTooltip = (col, data) => {
  // å¦‚果没有prop，直接返回false
  if (!col.prop) return false;
  // æ£€æŸ¥è¯¥åˆ—在所有数据中是否有非空值
  return data.some(row => row[col.prop] != null && row[col.prop] !== '');
};

// å¤„理单元格编辑
const handleCellEdit = (row, prop) => {
  // å¦‚果不允许编辑单元格，直接返回
  if (!props.editableCells) return;

  // å¦‚果指定了可编辑列，且当前列不在可编辑列中，则不允许编辑
  if (props.editableColumns.length > 0 && !props.editableColumns.includes(prop)) return;

  // åˆå§‹åŒ–editing对象
  if (!row.editing) {
    row.editing = {};
  }
  // è®¾ç½®å½“前单元格为编辑状态
  row.editing[prop] = true;

  // åœ¨ä¸‹ä¸€ä¸ªDOM更新周期，让输入框获得焦点并选中内容
  setTimeout(() => {
    const inputElement = document.querySelector('.cell-edit .el-input__inner');
    if (inputElement) {
      inputElement.focus();
      inputElement.select();
    }
  }, 10);
}

// å¤„理单元格保存
const handleCellSave = (row, prop) => {
  // å…³é—­ç¼–辑状态
  row.editing[prop] = false;
  // è§¦å‘单元格编辑完成事件
  emit('cell-edit', row, prop, row[prop]);
}
// å¤„理单元格聚焦事件
const handleCellFocus = (row, prop, event) => {
  // å¦‚果不允许编辑单元格，直接返回
  if (!props.editableCells) return;

  // å¦‚果指定了可编辑列，且当前列不在可编辑列中，则不允许编辑
  if (props.editableColumns.length > 0 && !props.editableColumns.includes(prop)) return;

  // åˆå§‹åŒ–editing对象
  if (!row.editing) {
    row.editing = {};
  }
  // è®¾ç½®å½“前单元格为编辑状态
  row.editing[prop] = true;

  // è‡ªåŠ¨å…¨é€‰è¾“入框内容
  if (event && event.target) {
    event.target.select();
  }
}
// åˆ¤æ–­åˆ—是否可编辑
const isColumnEditable = (prop) => {
  if (props.editableColumns.length === 0) {
    return props.editableCells;
  }
  return props.editableColumns.includes(prop);
}

// å¤„理选择变化、编辑、删除和导出操作
const emit = defineEmits(['selection-change', 'edit', 'delete', 'export', 'cell-edit'])
const handleSelectionChange = (selection) => {
  emit('selection-change', selection)
}
const handleEdit = (row) => {
  emit('edit', row)
}
const handleExport = (row) => {
  emit('export', row)
}
  </script>
  <style scoped lang="scss">
.el-table {
    margin: 20px 0 !important;
  }
  
  :deep(.el-table th) {
    background-color: #f5f7fa;
  }
  
  :deep(.cell-edit) {
    width: 100%;
    height: 100%;
    position: relative;
  }
  
  :deep(.cell-edit .cell-text) {
    width: 100%;
    display: block;
  }
  
  :deep(.cell-edit.editable:hover .cell-text) {
    color: #409EFF;
    cursor: pointer;
  }
  
  :deep(.cell-input) {
    width: 80%;
    max-width: 120px;
    min-width: 60px;
  }
  
  :deep(.cell-input .el-input__inner) {
    border-radius: 4px;
    text-align: center;
    transition: all 0.2s;
  }
  
  
  /* å“åº”式样式 */
  @media screen and (max-width: 768px) {
    :deep(.el-table) {
      width: 100%;
      overflow-x: auto;
    }
  }
</style>

 src/views/basicInformation/index.vue

@@ -1,119 +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
          />
        </el-form-item>
        <el-form-item label="供应商名称">
          <el-input
            v-model="queryParams.supplierName"
            placeholder="请输入"
            clearable
          />
        </el-form-item>
        <el-form-item label="统一人识别号">
          <el-input
            v-model="queryParams.identifyNumber"
            placeholder="请输入"
            clearable
          />
        </el-form-item>
        <el-form-item label="经营地址">
          <el-input
            v-model="queryParams.address"
            placeholder="请输入"
            clearable
          />
        </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="480"
        />
      </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"
        :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"
      />
        <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>
@@ -129,6 +53,9 @@
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);
@@ -144,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([]);
// æŸ¥è¯¢å‚æ•°
@@ -169,25 +96,22 @@
const addOrEdit = ref("add");
// è¡¨æ ¼æ•°æ®
const tableData = ref([]);
// æ–¹æ³•å®šä¹‰
// æŸ¥è¯¢æ–¹æ³•
const handleQuery = () => {
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
  }, 500);

};
// supplier ä¾›åº”商数据
const supplierColumns = ref([
  { prop: "supplierName", 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: "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 = ref([
@@ -205,7 +129,7 @@
// coal ç…¤ç§æ•°æ®
const coalColumns = ref([
  { prop: "coalName", label: "煤种名称", minWidth: 200 },
  { prop: "maintainer", label: "维护人", minWidth: 120 },
  { prop: "maintainerId", label: "维护人", minWidth: 120 },
  { prop: "maintenanceDate", label: "维护日期", minWidth: 150 },
]);
// coalQualityMaintenance ç…¤è´¨ç»´æŠ¤æ•°æ®
@@ -222,42 +146,41 @@
// æ ‡ç­¾é¡µç‚¹å‡»
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.value;
      dialogFormVisible.value = supplierDialogFormVisible.value;
      getList("supplier");
      break;
    case "customer":
      columns.value = customerColumns.value;
      dialogFormVisible.value = customerDialogFormVisible.value;
      getList("customer");

      break;
    case "coal":
      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 = () => {
@@ -295,16 +218,22 @@
  form.value = {};
  dialogFormVisible.value = true;
};
// æäº¤è¡¨å•
const handleSubmit = () => {
  // æ‹¿åˆ°æäº¤æ•°æ®
  dialogFormVisible.value = false;
  if (addOrEdit.value === "add") {
    ElMessage.success("新增成功：" + copyForm.value.supplierName);
  } else {
    ElMessage.success("编辑成功：" + copyForm.value.supplierName);
  }
// åˆ†é¡µ
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;
@@ -315,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 = () => {
@@ -325,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;
@@ -359,153 +289,39 @@
  }, `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>
@@ -515,37 +331,46 @@
    width: 50%;
  }
}

@media screen and (min-width: 1200px) {
  .search-form :deep(.el-form-item) {
    width: 16%;
  }
}

.table-toolbar {
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* å“åº”式表格 */
@media screen and (max-width: 768px) {
  .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{

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

 src/views/basicInformation/mould/coal.vue

@@ -3,7 +3,7 @@
        <el-dialog
            v-model="dialogVisible"
            :title="title"
            width="800"
            width="500"
            :close-on-click-modal="false"
            :before-close="handleClose"
        >
@@ -14,26 +14,20 @@
                :rules="rules"
                label-width="auto"
            >
                <el-form-item label="卡胡" prop="supplierName">
                <el-form-item label="煤种名称" prop="coal">
                    <el-input
                        v-model="formData.supplierName"
                        placeholder="请输入供货商名称"
                        v-model="formData.coal"
                        placeholder="请输入煤种名称"
                    />
                </el-form-item>
                <el-form-item label="纳税人识别号" prop="identifyNumber">
                <el-form-item label="维护人姓名" prop="maintainerId">
                    <el-input
                        v-model="formData.identifyNumber"
                        placeholder="请输入纳税人识别号"
                        v-model="formData.maintainerId"
                        placeholder="请输入维护人姓名"
                    />
                </el-form-item>
                <el-form-item label="经营地址" prop="address">
                    <el-select v-model="formData.address" placeholder="请选择经营地址">
                        <el-option label="Zone one" value="shanghai" />
                        <el-option label="Zone two" value="beijing" />
                    </el-select>
                </el-form-item>
                <el-form-item label="银行账户" prop="bankAccount">
                    <el-input v-model="formData.bankAccount" placeholder="请输入银行账户" />
                <el-form-item label="维护日期" prop="maintenanceDate">
                    <el-input v-model="formData.maintenanceDate" placeholder="请输入银行账户" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm">
@@ -49,6 +43,7 @@

<script setup>
import { ref, watch ,defineProps } from 'vue'
import { addOrEditCoalInfo } from '@/api/basicInformation/coal'

const props = defineProps({
    beforeClose: {
@@ -91,9 +86,17 @@
// æäº¤è¡¨å•
const submitForm = async () => {
    if (!formRef.value) return
    await formRef.value.validate((valid, fields) => {
    await formRef.value.validate(async (valid, fields) => {
        if (valid) {
            emit('submit', formData.value)
            formData.value.maintenanceDate = "2023-10-01" // ç¤ºä¾‹æ—¥æœŸ
            let result = await addOrEditCoalInfo({
                ...formData.value,
            })
            let obj = {
                title: props.title,
                result,
            }
            emit('submit', obj)
        }
    })
}

 src/views/basicInformation/mould/coalQualityMaintenance.vue

@@ -14,49 +14,51 @@
        :rules="rules"
        label-width="auto"
      >
        <el-form-item label="客户名称" prop="supplierName">
        <el-form-item label="煤种类型" prop="coal">
          <el-input
            v-model="formData.supplierName"
            v-model="formData.coal"
            placeholder="请输入供货商名称"
          />
        </el-form-item>
        <el-form-item label="纳税人识别号" prop="identifyNumber">
        <el-form-item label="全水含量百分比 (%)" prop="totalMoisture">
          <el-input
            v-model="formData.identifyNumber"
            placeholder="请输入纳税人识别号"
            v-model="formData.totalMoisture"
            placeholder="请输入全水含量百分比"
          />
        </el-form-item>
        <el-form-item label="经营地址" prop="address">
          <el-cascader
            placeholder="请选择经营地址"
            size="default"
            :options="addressSelectOptions"
            v-model="formData.address"
            @change="handleChange"
          >
          </el-cascader>
        </el-form-item>
        <el-form-item label="详细地址" prop="addressDetail">
        <el-form-item label="全水含量百分比 (%)" prop="analysisMoisture">
          <el-input
            v-model="formData.addressDetail"
            v-model="formData.analysisMoisture"
            placeholder="请输入全水含量百分比"
          />
        </el-form-item>
        <el-form-item label="全水含量百分比 (%)" prop="volatileMatter">
          <el-input
            v-model="formData.volatileMatter"
            placeholder="请输入全水含量百分比"
          />
        </el-form-item>
        <el-form-item label="固定碳百分比 (%)" prop="fixedCarbon">
          <el-input
            v-model="formData.fixedCarbon"
            placeholder="请输入客户详细地址"
          />
        </el-form-item>
        <el-form-item label="银行账户" prop="bankAccount">
        <el-form-item label="低位发热量（单位：千卡/千克）" prop="lowerHeatValue">
          <el-input
            v-model="formData.bankAccount"
            v-model="formData.lowerHeatValue"
            placeholder="请输入银行账户"
          />
        </el-form-item>
        <el-form-item label="开户行" prop="bank">
          <el-input v-model="formData.bank" placeholder="请输入开户行" />
        <el-form-item label="高位发热量（单位：千卡/千克）" prop="higherHeatValue">
          <el-input v-model="formData.higherHeatValue" placeholder="请输入开户行" />
        </el-form-item>
        <el-form-item label="联系人" prop="contacts">
          <el-input v-model="formData.contacts" placeholder="请输入联系人" />
        <el-form-item label="灰分百分比 (%)" prop="ashContent">
          <el-input v-model="formData.ashContent" placeholder="请输入联系人" />
        </el-form-item>
        <el-form-item label="联系人电话" prop="contactsPhone">
        <el-form-item label="硫含量百分比 (%)" prop="sulfurContent">
          <el-input
            v-model="formData.contactsPhone"
            v-model="formData.sulfurContent"
            placeholder="请输入联系人电话"
          />
        </el-form-item>
@@ -77,6 +79,7 @@
<script setup>
import { ref, watch, defineProps, onMounted } from "vue";
import addressList from "@/api/jsonApi/areaList.json";
import { addOrEditCoalQuality } from "@/api/basicInformation/coalQualityMaintenance.js";
const props = defineProps({
  beforeClose: {
    type: Function,
@@ -143,9 +146,12 @@
// æäº¤è¡¨å•
const submitForm = async () => {
  if (!formRef.value) return;
  await formRef.value.validate((valid, fields) => {
  await formRef.value.validate(async (valid, fields) => {
    if (valid) {
      emit("submit", formData.value);

      let result = await addOrEditCoalQuality({...formData.value});
      console.log(result);
      // emit("submit", formData.value);
    }
  });
};
@@ -166,26 +172,8 @@
  emit("update:coalQualityMaintenanceDialogFormVisible", false);
};
const rules = reactive({
  supplierName: [
    { required: true, message: "请输入供货商名称", trigger: "blur" },
  ],
  identifyNumber: [
    { required: true, message: "请正确输入纳税人识别号", trigger: "blur" },
    { min: 17, max: 20, message: "请输入17-20位纳税人识别号", trigger: "blur" },
  ],
  address: [
    {
      required: true,
      message: "请选择经营地址",
      trigger: "change",
    },
  ],
  bankAccount: [{ required: true, message: "请输入银行账户", trigger: "blur" }],
  bank: [{ required: true, message: "请输入开户行", trigger: "blur" }],
  contacts: [{ required: true, message: "请输入开户行", trigger: "blur" }],
  contactsPhone: [
    { required: true, message: "请输入联系人", trigger: "blur" },
    { min: 11, max: 11, message: "请输入11位联系人电话", trigger: "blur" },
  coal: [
    { required: true, message: "请输入煤种名称", trigger: "blur" },
  ],
});
</script>

 src/views/basicInformation/mould/supplier.vue

@@ -1,73 +1,41 @@
<template>
  <div>
    <el-dialog
      v-model="dialogVisible"
      :title="title"
      width="600"
      :close-on-click-modal="false"
      :before-close="handleClose"
    >
      <el-form
        ref="formRef"
        style="max-width: 400px; margin: 0 auto"
        :model="formData"
        :rules="rules"
        label-width="auto"
      >
    <el-dialog v-model="dialogVisible" :title="title" width="600" :close-on-click-modal="false"
      :before-close="handleClose">
      <el-form ref="formRef" style="max-width: 400px; margin: 0 auto" :model="formData" :rules="rules" label-width="auto">
        <el-form-item label="客户名称" prop="supplierName">
          <el-input
            v-model="formData.supplierName"
            placeholder="请输入供货商名称"
          />
          <el-input v-model="formData.supplierName" placeholder="请输入供货商名称" />
        </el-form-item>
        <el-form-item label="纳税人识别号" prop="identifyNumber">
          <el-input
            v-model="formData.identifyNumber"
            placeholder="请输入纳税人识别号"
          />
        <el-form-item label="纳税人识别号" prop="taxpayerId">
          <el-input v-model="formData.taxpayerId" placeholder="请输入纳税人识别号" />
        </el-form-item>
        <el-form-item label="经营地址" prop="address">
          <el-cascader
            placeholder="请选择经营地址"
            size="default"
            :options="addressSelectOptions"
            v-model="formData.address"
            @change="handleChange"
          >
        <el-form-item label="经营地址" prop="bids">
          <el-cascader placeholder="请选择经营地址" size="default" :options="addressSelectOptions" v-model="formData.bids"
            @change="handleChange">
          </el-cascader>
        </el-form-item>
        <el-form-item label="详细地址" prop="addressDetail">
          <el-input
            v-model="formData.addressDetail"
            placeholder="请输入客户详细地址"
          />
        <el-form-item label="详细地址" prop="businessAddress">
          <el-input v-model="formData.businessAddress" placeholder="请输入客户详细地址" />
        </el-form-item>
        <el-form-item label="银行账户" prop="bankAccount">
          <el-input
            v-model="formData.bankAccount"
            placeholder="请输入银行账户"
          />
        <el-form-item label="开户行" prop="bankAccount">
          <el-input v-model="formData.bankAccount" placeholder="请输入开户行" />
        </el-form-item>
        <el-form-item label="开户行" prop="bank">
          <el-input v-model="formData.bank" placeholder="请输入开户行" />
        <el-form-item label="银行账户" prop="bankName">
          <el-input v-model="formData.bankName" placeholder="请输入银行账户" />
        </el-form-item>
        <el-form-item label="联系人" prop="contacts">
          <el-input v-model="formData.contacts" placeholder="请输入联系人" />
        <el-form-item label="联系人" prop="contactPerson">
          <el-input v-model="formData.contactPerson" placeholder="请输入联系人" />
        </el-form-item>
        <el-form-item label="联系人电话" prop="contactsPhone">
          <el-input
            v-model="formData.contactsPhone"
            placeholder="请输入联系人电话"
          />
        <el-form-item label="联系人电话" prop="contactPhone">
          <el-input v-model="formData.contactPhone" placeholder="请输入联系人电话" />
        </el-form-item>
        <el-form-item label="联系人地址" prop="contactAddress">
          <el-input v-model="formData.contactAddress" placeholder="请输入联系人地址" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm"> ç¡®å®š </el-button>
          <el-button v-if="addOrEdit === 'edit'" @click="resetForm"
            >重置</el-button
          >
          <el-button v-if="addOrEdit === 'add'" @click="cancelForm"
            >取消</el-button
          >
          <el-button v-if="addOrEdit === 'edit'" @click="resetForm">重置</el-button>
          <el-button v-if="addOrEdit === 'add'" @click="cancelForm">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
@@ -77,11 +45,11 @@
<script setup>
import { ref, watch, defineProps, onMounted } from "vue";
import addressList from "@/api/jsonApi/areaList.json";
import imageUpload from "@/components/ImageUpload/index.vue";
import { addOrEditSupply } from "@/api/basicInformation/supplier";
const props = defineProps({
  beforeClose: {
    type: Function,
    default: () => {},
    default: () => { },
  },
  form: {
    type: Object,
@@ -99,7 +67,7 @@

const emit = defineEmits(["submit", "handleBeforeClose"]);

onMounted(()=>{
onMounted(() => {
  addressSelectOptions.value = mapAddress(addressList);
})
// åœ°å€é€‰æ‹©æ•°æ®
@@ -144,9 +112,25 @@
// æäº¤è¡¨å•
const submitForm = async () => {
  if (!formRef.value) return;
  await formRef.value.validate((valid, fields) => {
  await formRef.value.validate(async (valid, fields) => {
    if (valid) {
      emit("submit", formData.value);
      if(props.title.includes('新增')){
        let result = await addOrEditSupply({
        ...formData.value,
      })
      let obj = {
        ...formData.value,
        result
      };
      }else{
        delete formData.value.createTime
        delete formData.value.updateTime
        let result = await addOrEditSupply({
        ...formData.value,
      })
      console.log(result)
      }
        emit("submit", obj);
    }
  });
};
@@ -170,21 +154,21 @@
  supplierName: [
    { required: true, message: "请输入供货商名称", trigger: "blur" },
  ],
  identifyNumber: [
  taxpayerId: [
    { required: true, message: "请正确输入纳税人识别号", trigger: "blur" },
    { min: 17, max: 20, message: "请输入17-20位纳税人识别号", trigger: "blur" },
  ],
  address: [
  bids: [
    {
      required: true,
      message: "请选择经营地址",
      trigger: "change",
    },
  ],
  bankAccount: [{ required: true, message: "请输入银行账户", trigger: "blur" }],
  bank: [{ required: true, message: "请输入开户行", trigger: "blur" }],
  contacts: [{ required: true, message: "请输入开户行", trigger: "blur" }],
  contactsPhone: [
  bankName: [{ required: true, message: "请输入银行账户", trigger: "blur" }],
  bankAccount: [{ required: true, message: "请输入开户行", trigger: "blur" }],
  contactPerson: [{ required: true, message: "联系人", trigger: "blur" }],
  contactPhone: [
    { required: true, message: "请输入联系人", trigger: "blur" },
    { min: 11, max: 11, message: "请输入11位联系人电话", trigger: "blur" },
  ],