测试基础管理模块、配置方案、配置字段完善

张诺

3 天以前 e0ed87e28da597222766f101beae1a152068d949

测试基础管理模块、配置方案、配置字段完善

 src/api/basicInformation/coal.js

@@ -6,7 +6,7 @@
    return request({
        url: '/coalInfo/list',
        method: 'get',
        params: query
        data: query
    })
}


 src/api/basicInformation/coalFieldMaintenance.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,28 @@
// ç…¤è´¨å­—段维护
import request from '@/utils/request'

// å¯¼å‡ºä¸€ä¸ªå‡½æ•°ï¼Œç”¨äºŽèŽ·å–煤矿列表
export function coalField(query){
    return request({
        url: '/coalField/list',
        method: 'get',
        data: query
    })
}
// æ–°å¢žæˆ–编辑煤质字段
export function addOrEditCoalField(query){
    return request({
        url: '/coalField/addOrEditCoalField',
        method: 'post',
        data: query
    })
}
// åˆ é™¤ç…¤è´¨å­—段信息
export function deleteCoalField(query){
    return request({
        url: '/coalField/delCoalInfo',
        method: 'delete',
        data: query
    })
}


 src/api/basicInformation/coalQualityMaintenance.js

@@ -1,27 +1,39 @@
// ç…¤è´¨ç»´æŠ¤
// ç…¤è´¨æ–¹æ¡ˆç»´æŠ¤
import request from '@/utils/request'

// æŸ¥è¯¢ç…¤è´¨ç»´æŠ¤æ•°æ®åˆ—表
export function getCoalQuality(query) {
// å¯¼å‡ºä¸€ä¸ªå‡½æ•°ï¼Œç”¨äºŽèŽ·å–煤计划列表
export function getCoalPlanList(query) {
    // å‘送一个get请求，请求的url为'/coalPlan/list'，请求参数为query
    return request({
        url: '/coalQuality/list',
        url: '/coalPlan/list',
        method: 'get',
        params: query
    })
}
// æ–°å¢žæˆ–编辑煤质维护
export function addOrEditCoalQuality(query){
// å¯¼å‡ºä¸€ä¸ªå‡½æ•°ï¼Œç”¨äºŽæ–°å¢žæˆ–编辑煤计划
export function addOrEditCoalPlan(query) {
    // å‘送一个post请求，请求的url为'/coalPlan/addOrEdit'，请求参数为query
    return request({
        url: '/coalQuality/addOrEditCoalQuality',
        url: '/coalPlan/addOrEditCoalPlan',
        method: 'post',
        data: query
    })
}
// åˆ é™¤ç…¤è´¨ç»´æŠ¤æ•°æ®
export function delCoalQuality(query){
// å¯¼å‡ºä¸€ä¸ªå‡½æ•°delCoalPlan，用于发送delete请求，删除coalPlan
export function delCoalPlan(query) {
    // å‘送一个delete请求，请求的url为'/coalPlan/delCoalPlan'，请求参数为query
    return request({
        url: '/coalQuality/delCoalQuality',
        url: '/coalPlan/delCoalPlan',
        method: 'delete',
        data: query
    })
}

// èŽ·å–煤质字段信息
export function getCoalFieldList(query){
    return request({
        url: '/coalField/coalFieldList',
        method: 'get',
        data: query
    })
}

 src/components/Table/ETable.vue

@@ -3,13 +3,12 @@
    :header-cell-style="{ background: '#EBEEF5', color: '#3D3D3D' }" @selection-change="handleSelectionChange"
    @row-click="handleRowClick" @row-dblclick="handleRowDblClick" @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-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)"
        :formatter="col.formatter || defaultFormatter" align="center">
        <template v-if="col.slot" #default>
          <slot></slot>
        <template v-if="col.slot" #default="scope">
          <slot :name="col.prop" :row="scope.row" :column="scope.column" :index="scope.$index"></slot>
        </template>
      </el-table-column>
    </template>

 src/views/basicInformation/index.vue

@@ -1,10 +1,7 @@
<template>
  <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 label="搜索" v-if="shouldShowSearch">
        <el-input v-model="queryParams.searchAll" :placeholder="searchPlaceholder" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
@@ -21,12 +18,25 @@
      <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" v-show="tabName === 'supplier' || tabName === 'customer'">导出</el-button>
      </el-row>
      <!-- è¡¨æ ¼ç»„件 -->
        <el-button type="info" :icon="Download" @click="handleExport" v-show="canExport">导出</el-button>
      </el-row> <!-- è¡¨æ ¼ç»„件 -->
      <div>
        <data-table :loading="loading" :table-data="tableData" :columns="columns"
          @selection-change="handleSelectionChange" @edit="handleEdit" :show-selection="true" :border="true" />
          @selection-change="handleSelectionChange" @edit="handleEdit" :show-selection="true" :border="true">          <!-- å­—段名称列的自定义插槽 - æ˜¾ç¤ºä¸ºæ ‡ç­¾ -->
          <template v-if="tabName === 'coalQualityMaintenance'" #coalFields="{ row }">
            <template v-if="typeof row.coalFields === 'string' && row.coalFields.includes(',')">
              <el-tag v-for="(field, index) in row.coalFields.split(',')" :key="index" type="primary" size="small"
                style="margin-right: 4px; margin-bottom: 2px;">
                {{ getFieldDisplayName(field.trim()) }}
              </el-tag>
            </template>
            <template v-else>
              <el-tag type="primary" size="small">
                {{ getFieldDisplayName(row.coalFields) || '--' }}
              </el-tag>
            </template>
          </template>
        </data-table>
      </div>
      <pagination v-if="total > 0" :page="pageNum" :limit="pageSizes" :total="total" @pagination="handPagination"
        :layout="'total, prev, pager, next, jumper'" />
@@ -38,20 +48,23 @@
        :addOrEdit="addOrEdit" @beforeClose="handleBeforeClose" />
      <Coal v-if="tabName === 'coal'" v-model:copyForm="copyForm" v-model:coalDialogFormVisible="dialogFormVisible"
        :form="form" :title="title" :addOrEdit="addOrEdit" @submit="handleSubmit" />
      <coalQualityMaintenance v-if="tabName === 'coalQualityMaintenance'"
      <coalQualityMaintenance v-if="tabName === 'coalQualityMaintenance'" v-model:copyForm="copyForm"
        v-model:coalQualityMaintenanceDialogFormVisible="dialogFormVisible" :form="form" :title="title"
        :addOrEdit="addOrEdit" @submit="handleSubmit" />
      <coalMeiZhiZiDuanWeiHu v-if="tabName === 'coalMeiZhiZiDuanWeiHu'"
        v-model:coalMaintenanceFieldDialogVisible="dialogFormVisible" :form="form" :title="title"
        :addOrEdit="addOrEdit" @submit="handleSubmit" />
      <coalMeiZhiZiDuanWeiHu v-if="tabName === 'coalMeiZhiZiDuanWeiHu'" v-model:copyForm="copyForm"
        v-model:coalMaintenanceFieldDialogVisible="dialogFormVisible" :form="form" :title="title" :addOrEdit="addOrEdit"
        @submit="handleSubmit" />
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from "vue";
// ===== æ ¸å¿ƒä¾èµ–导入 =====
import { ref, reactive, onMounted, computed, getCurrentInstance } 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";
import Pagination from "@/components/Pagination";
import Supplier from "./mould/supplier.vue";
@@ -59,54 +72,89 @@
import Coal from "./mould/coal.vue";
import coalQualityMaintenance from "./mould/coalQualityMaintenance.vue";
import coalMeiZhiZiDuanWeiHu from "./mould/coalMeiZhiZiDuanWeiHu.vue";
const { proxy } = getCurrentInstance()
import { getSupply, addOrEditSupply, delSupply } from "@/api/basicInformation/supplier.js";

// ===== API æœåŠ¡å¯¼å…¥ =====
import { getSupply, delSupply } from "@/api/basicInformation/supplier.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";
import { coalField, deleteCoalField } from "@/api/basicInformation/coalFieldMaintenance.js";
import { getCoalFieldList, getCoalPlanList } from "@/api/basicInformation/coalQualityMaintenance";

// å¼¹çª—
const coalMaintenanceFieldDialogVisible = ref(false);
const coalQualityMaintenanceDialogFormVisible = ref(false);
const customerDialogFormVisible = ref(false);
const coalDialogFormVisible = ref(false);
const supplierDialogFormVisible = ref(false);
const { proxy } = getCurrentInstance();

// ===== å“åº”式状态管理 =====

// å¼¹çª—控制状态
const dialogFormVisible = ref(false);
const form = ref({});
const title = ref("");
const copyForm = ref({});
// ç”¨æˆ·åˆ—表数据
const addOrEdit = ref("add");

// æ•°æ®ç¼“存映射
const userList = ref([]);
// ç”¨æˆ·æ˜ å°„表，用于快速查找
const userMap = ref({});
// åœ°å€æ˜ å°„表，用于快速查找地址名称
const addressMap = ref({});
// å½“前标签
const userMap = ref({}); // ç”¨æˆ·ID -> ç”¨æˆ·åæ˜ å°„表
const addressMap = ref({}); // åœ°å€ID -> åœ°å€ä¿¡æ¯æ˜ å°„表
const coalFieldList = ref([]); // ç…¤è´¨å­—段列表

// é¡µé¢çŠ¶æ€æŽ§åˆ¶
const tabName = ref("supplier");
// çŠ¶æ€å˜é‡
const loading = ref(false);
const total = ref(0);
const activeTab = ref("supplier");

// åˆ†é¡µçŠ¶æ€ç®¡ç†
const pageNum = ref(1);
const pageSizes = ref(10);
const activeTab = ref("supplier");
const total = ref(0);

// è¡¨æ ¼çŠ¶æ€ç®¡ç†
const selectedRows = ref([]);
const tableData = ref([]);
const columns = ref();

// æŸ¥è¯¢å‚æ•°
const queryParams = reactive({
});
const queryParams = reactive({});

// åœ°å€é€‰æ‹©æ•°æ®
const addressSelectOptions = ref([]);
const fetchAreaOptions = async () => {
  addressSelectOptions.value = [];
  const res = await getAreaOptions();
  if (res.code === 200) {
    addressSelectOptions.value = res.data;
    buildAddressMap(res.data); // æž„建地址映射表
  }
}

// æž„建地址映射表，用于快速查找地址名称
// ===== é…ç½®å¸¸é‡ =====

// æ ‡ç­¾é¡µé…ç½®
const tabs = reactive([
  { name: "supplier", label: "供应商信息" },
  { name: "customer", label: "客户信息" },
  { name: "coal", label: "煤种信息" },
  { name: "coalQualityMaintenance", label: "煤质方案" },
  { name: "coalMeiZhiZiDuanWeiHu", label: "煤质字段" }
]);

// ===== å·¥å…·å‡½æ•° =====

/**
 * èŽ·å–地址选择数据并构建映射表
 * @description å¼‚步获取地址数据，构建快速查找的映射表
 */
const fetchAreaOptions = async () => {
  try {
    addressSelectOptions.value = [];
    const res = await getAreaOptions();
    if (res.code === 200) {
      addressSelectOptions.value = res.data;
      buildAddressMap(res.data);
    }
  } catch (error) {
    console.error('获取地址选项失败:', error);
  }
};

/**
 * æž„建地址映射表
 * @param {Array} areaData - åœ°å€æ•°æ®
 * @description é€’归构建地址映射表，支持多级地址查找
 */
const buildAddressMap = (areaData) => {
  const buildMap = (list, pathList = []) => {
    list.forEach(item => {
@@ -123,22 +171,32 @@
  buildMap(areaData);
};

// åœ°å€æ ¼å¼åŒ–函数
/**
 * æ ¼å¼åŒ–地址数组为显示字符串
 * @param {Array} addressIds - åœ°å€ID数组
 * @returns {string} æ ¼å¼åŒ–后的地址字符串
 * @description å°†åœ°å€ID数组转换为可读的地址字符串
 */
const formatAddressArray = (addressIds) => {
  // å¦‚果地址映射表还没有准备好，显示 --
  if (!addressMap.value || Object.keys(addressMap.value).length === 0 || !addressIds || !Array.isArray(addressIds) || addressIds.length === 0 || addressIds.every(id => !id)) {
  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 || '--';
  });
  // å¦‚果所有地址名称都是 '--'，则返回 '--'
  
  const addressNames = addressIds.map(id => addressMap.value[id]?.name || '--');
  
  if (addressNames.every(name => name === '--')) {
    return '--';
  }
  
  return addressNames.filter(name => name !== '--').join(' / ');
};
// èŽ·å–用户列表数据

/**
 * èŽ·å–用户列表数据并构建映射表
 * @description èŽ·å–用户数据并构建ID到用户名的映射关系
 */
const getUserList = async () => {
  try {
    const res = await testUserList();
@@ -152,39 +210,93 @@
    console.error('获取用户列表失败:', error);
  }
};
onMounted(async () => {
  await handleTabClick({ props: { name: "supplier" } });
  await fetchAreaOptions(); // å…ˆèŽ·å–地址选择数据并构建映射表
  await getUserList(); // èŽ·å–用户列表

/**
 * èŽ·å–煤质字段数据
 * @description èŽ·å–煤质字段列表，用于字段名称匹配
 */
const coalFieldData = async () => {
  try {
    const { data, code } = await getCoalFieldList();
    if (code === 200) {
      coalFieldList.value = data;
    }
  } catch (error) {
    console.error('获取煤质字段数据失败:', error);
  }
};

/**
 * æ ¹æ®å­—段ID获取字段显示名称
 * @param {string|number} fieldId - å­—段ID
 * @returns {string} å­—段显示名称
 * @description é€šè¿‡å­—段ID匹配对应的字段名称
 */
const getFieldDisplayName = (fieldId) => {
  if (!fieldId) return '--';
  
  const numId = parseInt(fieldId);
  const matchedField = coalFieldList.value.find(item => item.id === numId);
  
  return matchedField ? matchedField.fieldName : numId;
};

// ===== è®¡ç®—属性 =====

/**
 * å½“前标签页是否支持导出功能
 */
const canExport = computed(() => {
  return ['supplier', 'customer'].includes(tabName.value);
});
const columns = ref();
// æ ‡ç­¾é¡µæ•°æ®
const tabs = reactive([
  { name: "supplier", label: "供应商信息" },
  { name: "customer", label: "客户信息" },
  { name: "coal", label: "煤种信息" },
  { name: "coalQualityMaintenance", label: "煤质方案" },
  { name: "coalMeiZhiZiDuanWeiHu", label: "煤质字段" }
]);
// æ˜¯å¦ç¼–辑
const addOrEdit = ref("add");
// è¡¨æ ¼æ•°æ®
const tableData = ref([]);
// supplier ä¾›åº”商数据

/**
 * æœç´¢æ¡†å ä½ç¬¦æ–‡æœ¬
 */
const searchPlaceholder = computed(() => {
  const placeholderMap = {
    supplier: "供应商/识别码/详细地址",
    customer: "供应商/识别码/详细地址", 
    coal: "请输入搜索信息",
    coalQualityMaintenance: "请输入搜索信息",
    coalMeiZhiZiDuanWeiHu: "请输入搜索信息"
  };
  return placeholderMap[tabName.value] || "请输入搜索信息";
});

/**
 * æ˜¯å¦æ˜¾ç¤ºæœç´¢æ¡†
 */
const shouldShowSearch = computed(() => {
  return ['supplier', 'customer', 'coal', 'coalQualityMaintenance','coalMeiZhiZiDuanWeiHu'].includes(tabName.value);
});

/**
 * å½“前选中行数量
 */
const selectedCount = computed(() => selectedRows.value.length);

/**
 * æ˜¯å¦æœ‰é€‰ä¸­çš„è¡Œ
 */
const hasSelectedRows = computed(() => selectedCount.value > 0);

// ===== è¡¨æ ¼åˆ—配置 =====

/**
 * ä¾›åº”商表格列配置
 */
const supplierColumns = ref([
  { prop: "supplierName", label: "供应商名称", minWidth: 100 },
  { prop: "taxpayerId", label: "统一人识别号", minWidth: 170 }, {
  { 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);
    formatter: (row) => {
      const addressIds = [row.bprovinceId, row.bcityId, row.bdistrictId];
      return formatAddressArray(addressIds);
    }
  },
  { prop: "businessAddress", label: "经营详细地址", minWidth: 150 },
@@ -196,39 +308,18 @@
    label: "联系人地址",
    minWidth: 150,
    showOverflowTooltip: true,
    formatter: (row, column, cellValue) => {
      let arr = [
        row.cprovinceId,
        row.ccityId,
        row.cdistrictId,
      ]
      return formatAddressArray(arr);
    formatter: (row) => {
      const addressIds = [row.cprovinceId, row.ccityId, row.cdistrictId];
      return formatAddressArray(addressIds);
    }
  }, { 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: "contactAddress", label: "联系人详细地址", minWidth: 120 },
  { prop: "createTime", label: "维护日期", minWidth: 120 },
]);
// customer å®¢æˆ·æ•°æ®

/**
 * å®¢æˆ·è¡¨æ ¼åˆ—配置
 */
const customerColumns = ref([
  { prop: "customerName", label: "客户名称", minWidth: 100 },
  { prop: "taxpayerId", label: "统一人识别号", minWidth: 120 },
@@ -237,13 +328,9 @@
    label: "经营地址",
    minWidth: 150,
    showOverflowTooltip: true,
    formatter: (row, column, cellValue) => {
      let arr = [
        row.businessProvinceId,
        row.businessCityId,
        row.businessDistrictId,
      ]
      return formatAddressArray(arr);
    formatter: (row) => {
      const addressIds = [row.businessProvinceId, row.businessCityId, row.businessDistrictId];
      return formatAddressArray(addressIds);
    }
  },
  { prop: "businessAddress", label: "详细地址", minWidth: 150 },
@@ -256,149 +343,189 @@
    label: "联系人地址",
    minWidth: 150,
    showOverflowTooltip: true,
    formatter: (row, column, cellValue) => {
      let arr = [
        row.provinceId,
        row.cityId,
        row.districtId,
      ]
      return formatAddressArray(arr);
    formatter: (row) => {
      const addressIds = [row.provinceId, row.cityId, row.districtId];
      return formatAddressArray(addressIds);
    }
  },
  { prop: "contactAddress", label: "联系人详细地址", minWidth: 150 },
  { prop: "updateTime", label: "维护日期", minWidth: 100 },
]);
// coal ç…¤ç§æ•°æ®

/**
 * ç…¤ç§è¡¨æ ¼åˆ—配置
 */
const coalColumns = ref([
  { prop: "coal", label: "煤种名称", minWidth: 200 }, {
  { 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 '--';
      return userMap.value[cellValue] || '--';
    }
  },
  { prop: "maintenanceDate", label: "维护日期", minWidth: 150 },
]);
// coalQualityMaintenance ç…¤è´¨ç»´æŠ¤æ•°æ®

/**
 * ç…¤è´¨æ–¹æ¡ˆè¡¨æ ¼åˆ—配置
 */
const coalQualityMaintenanceColumns = ref([
  { prop: "coal", label: "煤种名称", minWidth: 200 },
  { prop: "totalMoisture", label: "全水含量百分比 (%)", minWidth: 200 },
  { prop: "analysisMoisture", label: "分析水含量百分比 (%)", minWidth: 200 },
  { prop: "volatileMatter", label: "挥发分百分比 (%)", minWidth: 100 },
  { prop: "sulfurContent", label: "硫含量百分比 (%)", minWidth: 100 },
  { prop: "contacts", label: "固定碳百分比 (%)", minWidth: 100 },
  { prop: "contactAddress", label: "高位发热量", minWidth: 100 },
  { prop: "maintainer", label: "低位发热量", minWidth: 100 },
  { prop: "plan", label: "方案名称", minWidth: 100 },
  {
    prop: "coalFields",
    label: "字段名称",
    minWidth: 200,
    showOverflowTooltip: true,
    slot: true,
    formatter: (row, column, cellValue) => {
      if (Array.isArray(cellValue)) {
        return cellValue.map(item => item);
      }
      return cellValue || '--';
    }
  },
  { prop: "schemeDesc", label: "字段描述", minWidth: 100 },
]);

/**
 * ç…¤è´¨å­—段表格列配置
 */
const coalMeiZhiZiDuanWeiHuColumns = ref([
  { prop: "fieldName", label: "字段名称", minWidth: 200 },
  { prop: "fieldDescription", label: "字段描述", minWidth: 200 },
]);
// æ ‡ç­¾é¡µç‚¹å‡»
// ===== äº‹ä»¶å¤„理函数 =====

/**
 * æ ‡ç­¾é¡µåˆ‡æ¢äº‹ä»¶å¤„理
 * @param {Object} tab - æ ‡ç­¾é¡µå¯¹è±¡
 * @description å¤„理标签页切换，重置表单和状态，加载对应数据
 */
const handleTabClick = (tab) => {
  // é‡ç½®è¡¨å•å’ŒçŠ¶æ€
  form.value = {};
  addOrEdit.value = "add";
  loading.value = true;
  tabName.value = tab.props.name;
  tableData.value = [];
  switch (tabName.value) {
    case "supplier":

  // æ ¹æ®æ ‡ç­¾é¡µç±»åž‹è®¾ç½®å¯¹åº”的列配置
  const tabConfig = {
    supplier: () => {
      columns.value = supplierColumns.value;
      dialogFormVisible.value = supplierDialogFormVisible.value;
      getList("supplier");
      break;
    case "customer":
      getList();
    },
    customer: () => {
      columns.value = customerColumns.value;
      dialogFormVisible.value = customerDialogFormVisible.value;
      getList("customer");
      break;
    case "coal":
      getList();
    },
    coal: () => {
      columns.value = coalColumns.value;
      dialogFormVisible.value = coalDialogFormVisible.value;
      getList("coal");
      break;
    case "coalQualityMaintenance":
      getList();
    },
    coalQualityMaintenance: () => {
      columns.value = coalQualityMaintenanceColumns.value;
      dialogFormVisible.value = coalQualityMaintenanceDialogFormVisible.value;
      getList("coalQualityMaintenance");
      break;
    case "coalMeiZhiZiDuanWeiHu":
      getList();
      coalFieldData(); // åŠ è½½ç…¤è´¨å­—段数据
    },
    coalMeiZhiZiDuanWeiHu: () => {
      columns.value = coalMeiZhiZiDuanWeiHuColumns.value;
      dialogFormVisible.value = coalMaintenanceFieldDialogVisible.value;
      getList("coalMeiZhiZiDuanWeiHu");
      break;
      getList();
    }
  };

  // æ‰§è¡Œå¯¹åº”的配置函数
  const configFn = tabConfig[tabName.value];
  if (configFn) {
    configFn();
  }
};
// é‡ç½®æŸ¥è¯¢

/**
 * é‡ç½®æŸ¥è¯¢æ¡ä»¶
 * @description é‡ç½®æŸ¥è¯¢å‚数并重新加载数据
 */
const resetQuery = () => {
  Object.keys(queryParams).forEach((key) => {
    if (key !== "pageNum" && key !== "pageSizes") {
      queryParams[key] = "";
    }
  });
  getList()
  getList();
};
// æ–°å¢ž

/**
 * æœç´¢åŠŸèƒ½
 * @description é‡ç½®é¡µç å¹¶æ‰§è¡Œæœç´¢
 */
const search = () => {
  pageNum.value = 1;
  getList();
};

/**
 * æ–°å¢žæŒ‰é’®ç‚¹å‡»å¤„理
 */
const handleAdd = () => {
  addOrEdit.value = "add";
  handleAddEdit(tabName.value);
};
// æ–°å¢žç¼–辑
const handleAddEdit = (tabName) => {
  addOrEdit.value == "add" ? title.value = "新增" : title.value = "编辑";
  if (tabName === "supplier") {
    dialogFormVisible.value = true;
    title.value = title.value + "供应商信息";
    openDialog();
  } else if (tabName === "customer") {
    dialogFormVisible.value = true;
    title.value = title.value + "客户信息";
    openDialog();
  } else if (tabName === "coal") {
    dialogFormVisible.value = true;
    title.value = title.value + "煤种信息";
    openDialog();
  } else if (tabName === "coalQualityMaintenance") {
    dialogFormVisible.value = true;
    title.value = title.value + "煤质方案维护";
    openDialog();
  } else if (tabName === "coalMeiZhiZiDuanWeiHu") {
    dialogFormVisible.value = true;
    title.value = title.value + "煤质字段维护";
    openDialog();
  }

/**
 * æ–°å¢ž/编辑弹窗处理
 * @param {string} currentTabName - å½“前标签页名称
 * @description æ ¹æ®æ ‡ç­¾é¡µç±»åž‹è®¾ç½®å¼¹çª—标题并打开弹窗
 */
const handleAddEdit = (currentTabName) => {
  const actionText = addOrEdit.value === "add" ? "新增" : "编辑";
  
  const tabTitleMap = {
    supplier: "供应商信息",
    customer: "客户信息", 
    coal: "煤种信息",
    coalQualityMaintenance: "煤质方案维护",
    coalMeiZhiZiDuanWeiHu: "煤质字段维护"
  };

  title.value = `${actionText}${tabTitleMap[currentTabName] || ''}`;
  openDialog();
};
// æ‰“开弹窗

/**
 * æ‰“开弹窗
 * @description æ ¹æ®ç¼–辑状态决定是否复制表单数据
 */
const openDialog = () => {
  if (addOrEdit.value === "edit") {
    copyForm.value = JSON.parse(JSON.stringify(form.value));
    dialogFormVisible.value = true;
    return;
  } else {
    form.value = {};
  }
  form.value = {};
  dialogFormVisible.value = true;
};
// åˆ†é¡µ

/**
 * åˆ†é¡µå¤„理
 * @param {Object} val - åˆ†é¡µå‚数对象
 */
const handPagination = (val) => {
  pageNum.value = val.page;
  pageSizes.value = val.limit;
  getList();
};
// æäº¤è¡¨å•

/**
 * è¡¨å•æäº¤å¤„理
 * @param {Object} val - æäº¤ç»“果对象
 */
const handleSubmit = async (val) => {
  if (val.result.code !== 200) {
    ElMessage.error("操作失败：" + val.result.msg);
@@ -408,179 +535,210 @@
  dialogFormVisible.value = false;
  getList();
};

/**
 * å¼¹çª—显示状态处理
 * @param {boolean} value - æ˜¾ç¤ºçŠ¶æ€
 */
const handleDialogFormVisible = (value) => {
  dialogFormVisible.value = value;
};
// é€‰æ‹©è¡Œ

/**
 * è¡¨æ ¼è¡Œé€‰æ‹©å¤„理
 * @param {Array} selection - é€‰ä¸­çš„行数据
 */
const handleSelectionChange = (selection) => {
  selectedRows.value = selection;
};
// ç¼–辑
/**
 * ç¼–辑按钮点击处理
 * @param {Object} row - è¡Œæ•°æ®
 * @description å¤„理编辑操作，构建地址数组并打开编辑弹窗
 */
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,
    ];
    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,
    ];
    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,
    ];
    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,
    ];
    form.value.cids = [row.provinceId, row.cityId, row.districtId];
  }
  
  addOrEdit.value = "edit";
  handleAddEdit(tabName.value);
};
// æ‰¹é‡åˆ é™¤
const handleDelete = () => {

/**
 * æ‰¹é‡åˆ é™¤å¤„理
 * @description æ‰¹é‡åˆ é™¤é€‰ä¸­çš„记录
 */
const handleDelete = async () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning("请选择要删除的数据");
    return;
  }
  let arr = reactive([]);
  selectedRows.value.forEach(element => {
    return arr.push(element.id);
  });
  ElMessageBox.confirm("确定删除选中的数据吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      try {
        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("删除失败，请稍后再试");
      } finally {
        selectedRows.value = [];
      }
    }).catch(() => {
      ElMessage.info("已取消删除操作");

  const deleteIds = selectedRows.value.map(item => item.id);
  
  try {
    await ElMessageBox.confirm("确定删除选中的数据吗？", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    });
}
// å…³é—­å¼¹çª—

    const deleteApiMap = {
      supplier: delSupply,
      coal: delCoalInfo,
      coalQualityMaintenance: () => { throw new Error('delCoalQuality API not imported'); },
      customer: delCustomer,
      coalMeiZhiZiDuanWeiHu: deleteCoalField
    };

    const deleteApi = deleteApiMap[tabName.value];
    if (!deleteApi) {
      ElMessage.error("删除接口未配置");
      return;
    }

    const res = await deleteApi(deleteIds);
    
    if (res.code !== 200 && res.msg !== "操作成功") {
      ElMessage.error("删除失败：" + res.msg);
      return;
    }
    
    ElMessage.success("删除成功");
    await getList();
  } catch (error) {
    if (error.message !== 'cancel') {
      console.error('删除操作失败:', error);
      ElMessage.error("删除失败，请稍后再试");
    } else {
      ElMessage.info("已取消删除操作");
    }
  } finally {
    selectedRows.value = [];
  }
};

/**
 * å…³é—­å¼¹çª—处理
 */
const handleBeforeClose = () => {
  dialogFormVisible.value = false;
  form.value = {};
};
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 handleExport = () => {
  const exportConfig = {
    supplier: { api: "/supply/export", name: "供应商信息" },
    customer: { api: "/customer/export", name: "客户信息" },
    coal: { api: "/supply/export", name: "煤种信息" },
    coalQualityMaintenance: { api: "/supply/export", name: "煤质维护信息" }
  };

  const config = exportConfig[tabName.value];
  if (config) {
    exportData(config.api, config.name);
  }
}
const Export = (api, name) => {
  proxy.download(api, {
    ...queryParams.value
  }, `${name}${new Date().getTime()}.xlsx`)
};

/**
 * å¯¼å‡ºæ•°æ®
 * @param {string} api - å¯¼å‡ºæŽ¥å£è·¯å¾„
 * @param {string} name - å¯¼å‡ºæ–‡ä»¶åå‰ç¼€
 */
const exportData = (api, name) => {
  proxy.download(api, { ...queryParams }, `${name}${new Date().getTime()}.xlsx`);
  ElMessage.success("导出数据：" + name);
};
// é€‰æ‹©æŽ¥å£
// ===== æ•°æ®èŽ·å–函数 =====

/**
 * æ ¹æ®å½“前标签页选择对应的API接口
 * @returns {Promise} API调用Promise
 * @description ç»Ÿä¸€çš„接口选择函数，根据标签页类型调用对应的API
 */
const selectInterface = () => {
  if (tabName.value === "supplier") {
    return getSupply({
      current: pageNum.value,
      pageSize: pageSizes.value,
      searchAll: queryParams.searchAll,
    });
  } else if (tabName.value === "customer") {
    return getCustomerList({
      current: pageNum.value,
      pageSize: pageSizes.value,
      searchAll: queryParams.searchAll,
    });
  } else if (tabName.value === "coal") {
    return getCoalInfo({
      current: pageNum.value,
      pageSize: pageSizes.value,
      searchAll: queryParams.searchAll,
    });
  } else if (tabName.value === "coalQualityMaintenance") {
    return getCoalQuality({
      current: pageNum.value,
      pageSize: pageSizes.value,
      searchAll: queryParams.searchAll,
    });
  } else if (tabName.value === "coalMeiZhiZiDuanWeiHu") {
    return {
      code: 200,
          data: {
          records: [
            { fieldName: "字段1", fieldDescription: "描述1" },
            { fieldName: "字段2", fieldDescription: "描述2" },
            { fieldName: "字段3", fieldDescription: "描述3" }
          ],
            total: 10
        }
    };
    // return getCoalQuality({
    //   current: pageNum.value,
    //   pageSize: pageSizes.value,
    //   searchAll: queryParams.searchAll,
    // });
  }
}
const search = () => {
  pageNum.value = 1; // é‡ç½®é¡µç 
  getList();
  const apiParams = {
    current: pageNum.value,
    pageSize: pageSizes.value,
    searchAll: queryParams.searchAll,
  };

  const apiMap = {
    supplier: () => getSupply(apiParams),
    customer: () => getCustomerList(apiParams),
    coal: () => getCoalInfo(apiParams),
    coalQualityMaintenance: () => getCoalPlanList(apiParams),
    coalMeiZhiZiDuanWeiHu: () => coalField(apiParams)
  };

  const apiFunction = apiMap[tabName.value];
  return apiFunction ? apiFunction() : Promise.reject(new Error('未找到对应的API接口'));
};
// èŽ·å–列表数据

/**
 * èŽ·å–列表数据
 * @description ç»Ÿä¸€çš„数据获取函数，处理加载状态和错误处理
 */
const getList = async () => {
  loading.value = true;
  /* if (Object.keys(addressMap.value).length === 0) {
    await fetchAreaOptions();
  } */
  let { data, code } = await selectInterface()
  console.log("获取数据：", code, data);
  if (code !== 200) {
    ElMessage.error("获取数据失败：" + data.msg);
  try {
    loading.value = true;
    const { data, code } = await selectInterface();
    
    if (code !== 200) {
      ElMessage.error("获取数据失败：" + (data?.msg || '未知错误'));
      return;
    }
    
    tableData.value = data.records || [];
    total.value = data.total || 0;
  } catch (error) {
    console.error('获取列表数据失败:', error);
    ElMessage.error("获取数据失败，请稍后再试");
  } finally {
    loading.value = false;
    return;
  }
  tableData.value = data.records;
  total.value = data.total;
  loading.value = false;
};

// ===== ç”Ÿå‘½å‘¨æœŸé’©å­ =====

/**
 * ç»„件挂载后的初始化操作
 */
onMounted(async () => {
  try {
    // å¹¶è¡Œæ‰§è¡Œåˆå§‹åŒ–操作
    await Promise.all([
      handleTabClick({ props: { name: "supplier" } }),
      fetchAreaOptions(),
      getUserList()
    ]);
  } catch (error) {
    console.error('组件初始化失败:', error);
    ElMessage.error("页面初始化失败，请刷新重试");
  }
});
</script>

<style scoped>

 src/views/basicInformation/mould/coalMeiZhiZiDuanWeiHu.vue

@@ -19,18 +19,17 @@
            v-model="formData.fieldName"
            placeholder="请输入字段名称"
          />
        </el-form-item>        <el-form-item label="字段描述" prop="fieldDescription">
          <el-input v-model="formData.fieldDescription" type="textarea" placeholder="请输入字段描述" />
        </el-form-item>
        <el-form-item label="Activity form" props="dielDescription">
      <el-input v-model="formData.fieldDescription" type="textarea" placeholder="请输入字段描述" />
    </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm"> ç¡®å®š </el-button>
        <el-form-item class="dialog-footer">
          <el-button v-if="addOrEdit === 'edit'" @click="resetForm"
            >重置</el-button
          >
          <el-button v-if="addOrEdit === 'add'" @click="cancelForm"
            >取消</el-button
          >
          <el-button type="primary" @click="submitForm"> ç¡®å®š </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
@@ -38,13 +37,9 @@
</template>

<script setup>
import { ref, watch, defineProps, onMounted } from "vue";
import addressList from "@/api/jsonApi/areaList.json";
import { ref, reactive, watch, defineProps } from "vue";
import { addOrEditCoalField } from "@/api/basicInformation/coalFieldMaintenance.js";
const props = defineProps({
  beforeClose: {
    type: Function,
    default: () => {},
  },
  form: {
    type: Object,
    default: () => ({}),
@@ -58,10 +53,20 @@
    default: "",
  },
});

const copyForm = defineModel("copyForm", {
  required: true,
  type: Object,
});
// è¡¨å•å¼•ç”¨
const formRef = ref();
const emit = defineEmits(["submit", "handleBeforeClose"]);
// è¡¨å•æ•°æ®
const formData = ref({ ...props.form });

// ç›‘听props.form的变化，更新formData
watch(() => props.form, (newForm) => {
  formData.value = { ...newForm };
}, { deep: true, immediate: true });
// å¼¹çª—可见性
const dialogVisible = defineModel("coalMaintenanceFieldDialogVisible", {
  required: true,
@@ -72,6 +77,32 @@
  if (!formRef.value) return;
  await formRef.value.validate(async (valid, fields) => {
    if (valid) {
      const obj = ref({});

      console.log("提交表单", formData.value);
      if (props.title.includes('新增')) {
        let result = await addOrEditCoalField(
         {...formData.value}
          ,)
        console.log(result);
        obj.value = {
          title: "新增",
          ...formData.value,
          result
        };
      } else {
        delete formData.value.createTime
        delete formData.value.updateTime
        let result = await addOrEditCoalField({
          ...formData.value,
        })
        obj.value = {
          title: "编辑",
          ...formData.value,
          result
        };
      }
      emit("submit", obj.value);
    }
  });
};
@@ -82,9 +113,9 @@
};
// é‡ç½®è¡¨å•
const resetForm = () => {

  
};
    if (!formRef.value) return
  formData.value = JSON.parse(JSON.stringify(copyForm.value));
}
// å…³é—­å¼¹çª—
const handleClose = () => {
  // è§¦å‘父组件的关闭函数
@@ -92,10 +123,16 @@
  emit("update:coalMaintenanceFieldDialogVisible", false);
};
const rules = reactive({
  coal: [
  fieldName: [
    { required: true, message: "请输入煤种名称", trigger: "blur" },
  ],
});
</script>
<style lang="sass" scoped>
<style lang="scss" scoped>
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
  flex-direction: column;
}
</style>

 src/views/basicInformation/mould/coalQualityMaintenance.vue

@@ -1,121 +1,265 @@
<!-- ç…¤è´¨æ–¹æ¡ˆç»´æŠ¤å¼¹çª—组件 -->
<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-form-item label="方案名称" prop="schemeName">
          <el-input v-model="formData.schemeName" placeholder="请输入方案名称"  prop="schemeName" />
        </el-form-item>
        <el-form-item label="方案类型" props="fieldName">
          <el-select v-model="formData.fieldName" placeholder="Select" style="width: 240px" clearable multiple>
            <template #label="{ label }">
              <span>{{ label }}: </span>
              <span style="font-weight: bold">{{ value }}</span>
            </template>
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <template #footer>
          <el-form-item label="字段描述" prop="fieldDescription">
            <el-input v-model="formData.fieldDescription" type="textarea" placeholder="请输入字段描述" />
          </el-form-item>
  <el-dialog 
    v-model="dialogVisible" 
    :title="title" 
    width="600" 
    :close-on-click-modal="false"
    :before-close="handleClose"
  >
    <!-- è¡¨å•åŒºåŸŸ -->
    <el-form 
      ref="formRef" 
      :model="formData" 
      :rules="formRules"
      label-width="120px"
      style="max-width: 400px; margin: 0 auto"
    >
      <!-- æ–¹æ¡ˆåç§°è¾“入框 -->
      <el-form-item label="煤质方案名称" prop="plan">
        <el-input 
          v-model="formData.plan" 
          placeholder="请输入煤质方案名称" 
          clearable
        />
      </el-form-item>

        </template>
        <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-form-item>
      </el-form>
    </el-dialog>
  </div>
      <!-- ç…¤è´¨å­—段多选下拉框 -->
      <el-form-item label="煤质方案类型" prop="coalFields">
        <el-select 
          v-model="formData.coalFields" 
          placeholder="请选择煤质方案类型" 
          style="width: 100%"
          clearable 
          multiple
        >
          <el-option 
            v-for="item in fieldOptions" 
            :key="item.value" 
            :label="item.label" 
            :value="item.value" 
          />
        </el-select>
      </el-form-item>

      <!-- æ–¹æ¡ˆæè¿°æ–‡æœ¬åŸŸ -->
      <el-form-item label="煤质方案描述" prop="schemeDesc">
        <el-input 
          v-model="formData.schemeDesc" 
          type="textarea" 
          placeholder="请输入煤质方案描述"
          :rows="3"
        />
      </el-form-item>

      <!-- æ“ä½œæŒ‰é’®åŒºåŸŸ -->
      <el-form-item class="dialog-footer">
        <el-button v-if="isEditMode" @click="resetForm">重置</el-button>
        <el-button v-else @click="cancelForm">取消</el-button>
        <el-button type="primary" @click="submitForm">确定</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script setup>
import { ref, watch, defineProps, onMounted } from "vue";
import addressList from "@/api/jsonApi/areaList.json";
import { ref, reactive, watch, computed, onMounted } from "vue";
import { getCoalFieldList, addOrEditCoalPlan } from "@/api/basicInformation/coalQualityMaintenance";

// ===== ç»„件属性定义 =====
const props = defineProps({
  /** å…³é—­å¼¹çª—前的回调函数 */
  beforeClose: {
    type: Function,
    default: () => { },
    default: () => {},
  },
  /** è¡¨å•æ•°æ® */
  form: {
    type: Object,
    default: () => ({}),
  },
  /** æ“ä½œç±»åž‹ï¼šadd-新增，edit-编辑 */
  addOrEdit: {
    type: String,
    default: "add",
  },
  /** å¼¹çª—标题 */
  title: {
    type: String,
    default: "",
  },
});
const options = [
  {
    value: 'Option1',
    label: 'Label1',
  },
  {
    value: 'Option2',
    label: 'Label2',
  },
  {
    value: 'Option3',
    label: 'Label3',
  },
  {
    value: 'Option4',
    label: 'Label4',
  },
  {
    value: 'Option5',
    label: 'Label5',
  },
]

// ===== äº‹ä»¶å®šä¹‰ =====
const emit = defineEmits(["submit", "handleBeforeClose"]);

// è¡¨å•æ•°æ®
const formData = ref({ ...props.form });
// å¼¹çª—可见性
// ===== å“åº”式数据 =====
/** è¡¨å•å¼•ç”¨ */
const formRef = ref();

/** ç…¤è´¨å­—段选项列表 */
const fieldOptions = reactive([]);

/** å¼¹çª—显示状态 */
const dialogVisible = defineModel("coalQualityMaintenanceDialogFormVisible", {
  required: true,
  type: Boolean,
});
// æäº¤è¡¨å•

/** è¡¨å•æ•°æ® */
const formData = ref({});

// ===== è®¡ç®—属性 =====
/** æ˜¯å¦ä¸ºç¼–辑模式 */
const isEditMode = computed(() => props.addOrEdit === 'edit');

// ===== è¡¨å•éªŒè¯è§„则 =====
const formRules = reactive({
  plan: [
    { required: true, message: "请输入方案名称", trigger: "blur" },
  ],
  coalFields: [
    { required: true, message: "请选择方案类型", trigger: "blur" },
  ],
});

// ===== å·¥å…·å‡½æ•° =====
/**
 * å°†å­—符串格式的煤质字段转换为数组
 */
const parseCoalFields = (coalFieldsStr) => {
  if (!coalFieldsStr || typeof coalFieldsStr !== 'string') return [];
  return coalFieldsStr
    .split(',')
    .map(id => parseInt(id.trim()))
    .filter(id => !isNaN(id));
};

/**
 * å°†æ•°ç»„格式的煤质字段转换为字符串
 */
const stringifyCoalFields = (coalFieldsArray) => {
  if (!Array.isArray(coalFieldsArray)) return '';
  return coalFieldsArray.join(',');
};

/**
 * åˆå§‹åŒ–表单数据
 * @param {Object} newForm - æ–°çš„表单数据
 */
const initFormData = (newForm) => {
  formData.value = { ...newForm };
  
  // å¤„理coalFields字段：编辑时需要将字符串转换为数组供多选组件使用
  if (newForm.coalFields) {
    if (typeof newForm.coalFields === 'string') {
      formData.value.coalFields = parseCoalFields(newForm.coalFields);
    } else if (Array.isArray(newForm.coalFields)) {
      // ç¡®ä¿æ•°ç»„中的值都是数字类型
      formData.value.coalFields = newForm.coalFields
        .map(id => parseInt(id))
        .filter(id => !isNaN(id));
    }
  }
};

// ===== ç”Ÿå‘½å‘¨æœŸé’©å­ =====
/**
 * ç»„件挂载时获取煤质字段选项
 */
onMounted(async () => {
  try {
    const { data, code } = await getCoalFieldList();
    if (code === 200) {
      // æž„建选项数据，格式化为{ label, value }
      fieldOptions.push(...data.map(item => ({
        label: item.fieldName,
        value: item.id,
      })));
    } else {
      console.error("获取煤质字段列表失败", data);
    }
  } catch (error) {
    console.error("获取煤质字段列表异常", error);
  }
});

// ===== ç›‘听器 =====
/**
 * ç›‘听表单数据变化，实现数据回显
 */
watch(() => props.form, initFormData, { 
  deep: true, 
  immediate: true 
});

// ===== äº‹ä»¶å¤„理函数 =====
/**
 * æäº¤è¡¨å•
 */
const submitForm = async () => {
  if (!formRef.value) return;
  await formRef.value.validate(async (valid, fields) => {
    if (valid) {
      // let result = await addOrEditCoalQuality({...formData.value});
      // console.log(result);
      // emit("submit", formData.value);
  
  try {
    const isValid = await formRef.value.validate();
    if (!isValid) return;

    // å‡†å¤‡æäº¤æ•°æ®ï¼šå°†coalFields数组转换为字符串
    const submitData = { 
      ...formData.value,
      coalFields: stringifyCoalFields(formData.value.coalFields)
    };

    // åˆ é™¤ä¸éœ€è¦çš„时间字段（编辑时）
    if (isEditMode.value) {
      delete submitData.createTime;
      delete submitData.updateTime;
    }
  });

    // è°ƒç”¨API提交数据
    const result = await addOrEditCoalPlan(submitData);

    // æž„建响应数据并触发提交事件
    const responseData = {
      title: isEditMode.value ? "编辑" : "新增",
      ...submitData,
      result
    };

    emit("submit", responseData);
  } catch (error) {
    console.error("表单提交失败", error);
  }
};
// å–消表单

/**
 * å–消操作
 */
const cancelForm = () => {
  emit("update:coalQualityMaintenanceDialogFormVisible", false);
  dialogVisible.value = false;
  formData.value = {};
};
// é‡ç½®è¡¨å•

/**
 * é‡ç½®è¡¨å•
 */
const resetForm = () => {
  if (!formRef.value) return;
  formRef.value.resetFields();
};
// å…³é—­å¼¹çª—

/**
 * å…³é—­å¼¹çª—
 */
const handleClose = () => {
  // è§¦å‘父组件的关闭函数
  emit("handleBeforeClose");
  emit("update:coalQualityMaintenanceDialogFormVisible", false);
  dialogVisible.value = false;
};
const rules = reactive({
  coal: [
    { required: true, message: "请输入煤种名称", trigger: "blur" },
  ],
});
</script>
<style lang="sass" scoped>
<style lang="scss" scoped>
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
  flex-direction: column;
}
</style>

 src/views/procureMent/index.vue

@@ -44,6 +44,20 @@
import ProductionDialog from './components/ProductionDialog.vue';
import { purchaseRegistration } from "@/api/procureMent";
import useUserStore from '@/store/modules/user'
import useDictStore from "@/store/modules/dict";
// å¼•å…¥å­—典数据
const useDictStores = useDictStore();
useDictStores.setDict({
  id: 1,
  name: "煤种类型",
  type: "coalType",
  items: [
    { label: "无烟煤", value: "anthracite" },
    { label: "烟煤", value: "bituminous" },
    { label: "褐煤", value: "lignite" }
  ]
})
console.log(useDictStores.dict);

const { proxy } = getCurrentInstance()
const dialogFormVisible = ref(false);