优化文档管理 优化采购管理渲染数据匹配接口字段 上传第一版主页

zhang_12370

2025-06-24 3d9d458e631d8d6a070d579b2e3e260aea45ac58

优化文档管理 优化采购管理渲染数据匹配接口字段 上传第一版主页

 package.json

@@ -23,7 +23,7 @@
    "axios": "0.28.1",
    "clipboard": "2.0.11",
    "default-passive-events": "^4.0.0",
    "echarts": "5.5.1",
    "echarts": "^5.6.0",
    "element-china-area-data": "^6.1.0",
    "element-plus": "2.7.6",
    "file-saver": "2.0.5",

 src/components/FileUpload/index.vue

@@ -231,10 +231,11 @@
  }
  // 桌面端下载
  const link = document.createElement("a");
  link.href = url;
  link.href = file.downloadUrl;
  link.download = file.bucketFilename || file.key;
  link.click();
};

// 上传前校验
const handleBeforeUpload = (file) => {
  // 校验文件名特殊字符

 src/views/archiveManagement/index.vue

@@ -4,84 +4,87 @@
      <div class="left-content">
        <div class="tree-header">
          <h3>文档管理</h3>
          <el-button type="primary" size="small" @click="append('')" icon="Plus"
            >新增</el-button
          <el-button icon="Plus" size="small" type="primary" @click="append('')"
          >新增
          </el-button
          >
        </div>

        <!-- 搜索框 -->
        <div class="search-box">
          <el-input
            v-model="filterText"
            placeholder="输入关键字进行搜索"
            size="small"
            clearable
            @input="handleFilter"
              v-model="filterText"
              clearable
              placeholder="输入关键字进行搜索"
              size="small"
              @input="handleFilter"
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
              <el-icon>
                <Search/>
              </el-icon>
            </template>
          </el-input>
        </div>

        <div class="tree-container">
          <el-tree
            ref="treeRef"
            :data="treeData"
            :props="props"
            :filter-node-method="filterNode"
            :expand-on-click-node="false"
            :default-expand-all="false"
            node-key="id"
            @node-click="handleNodeClick"
            class="custom-tree"
              ref="treeRef"
              :data="treeData"
              :default-expand-all="false"
              :expand-on-click-node="false"
              :filter-node-method="filterNode"
              :props="props"
              class="custom-tree"
              node-key="id"
              @node-click="handleNodeClick"
          >
            <template #default="{ node, data }">
              <div class="tree-node-content" @dblclick="headerDbClick(data)">
                <div class="node-icon">
                  <el-icon
                    v-if="!node.isLeaf"
                    :class="{ expanded: node.expanded }"
                      v-if="!node.isLeaf"
                      :class="{ expanded: node.expanded }"
                  >
                    <Folder />
                    <Folder/>
                  </el-icon>
                  <el-icon v-else>
                    <Document />
                    <Document/>
                  </el-icon>
                </div>

                <div class="node-label">
                  <span v-if="!data.isEdit" class="label-text">{{
                    node.label
                  }}</span>
                      node.label
                    }}</span>
                  <el-input
                    v-else
                    :ref="(el) => setInputRef(el, data)"
                    placeholder="请输入节点名称"
                    v-model="newName"
                    @blur="($event) => handleInputBlur($event, data, node)"
                    @keyup.enter="
                      ($event) => handleInputBlur($event, data, node)
                      v-else
                      :ref="(el) => setInputRef(el, data)"
                      v-model="newName"
                      autofocus
                      class="tree-input"
                      placeholder="请输入节点名称"
                      size="small"
                      @blur="(event) => handleInputBlur(event, data, node)"
                      @keyup.enter="
                      (event) => handleInputBlur(event, data, node)
                    "
                    size="small"
                    class="tree-input"
                    autofocus
                  />
                </div>
                <div class="node-actions" v-show="!data.isEdit">
                <div v-show="!data.isEdit" class="node-actions">
                  <el-button
                    link
                    size="small"
                    @click.stop="append(data)"
                    icon="Plus"
                    title="新增子节点"
                      icon="Plus"
                      link
                      size="small"
                      title="新增子节点"
                      @click.stop="append(data)"
                  ></el-button>
                  <el-button
                    link
                    size="small"
                    @click.stop="remove(node, data)"
                    icon="Delete"
                    title="删除"
                      icon="Delete"
                      link
                      size="small"
                      title="删除"
                      @click.stop="remove(node, data)"
                  ></el-button>
                </div>
              </div>
@@ -92,71 +95,64 @@
    </div>
    <div class="right">
      <el-row :gutter="24">
        <el-col :span="2" :offset="20"
          ><el-button :icon="Delete" type="danger" @click="delHandler">删除</el-button></el-col
        <el-col :offset="20" :span="2"
        >
          <el-button :icon="Delete" type="danger" @click="delHandler">删除</el-button>
        </el-col
        >
        <el-col :span="2"
          ><el-button
            :icon="Plus"
            type="primary"
            @click="add"
            :disabled="!tableData.length"
            >新增</el-button
          ></el-col
        >
          <el-button
              :disabled="!tableSwitch"
              :icon="Plus"
              type="primary"
              @click="add"
          >新增
          </el-button
          >
        </el-col
        >
      </el-row>
      <ETable
        :maxHeight="1200"
        :loading="loading"
        :table-data="tableData"
        :columns="columns"
        @selection-change="handleSelectionChange"
        @edit="handleEdit"
        :show-selection="true"
        :border="true"
          :border="true"
          :columns="columns"
          :loading="loading"
          :maxHeight="1200"
          :show-selection="true"
          :table-data="tableData"
          @edit="handleEdit"
          @selection-change="handleSelectionChange"
      >
      </ETable>
      <Pagination
        :total="total"
        :page="queryParams.current"
        :limit="queryParams.pageSize"
        :show-total="true"
        @pagination="handlePageChange"
        :layout="'total, prev, pager, next, jumper'"
          :layout="'total, prev, pager, next, jumper'"
          :limit="queryParams.pageSize"
          :page="queryParams.current"
          :show-total="true"
          :total="total"
          @pagination="handlePageChange"
      ></Pagination>
    </div>
    <archiveDialog
      v-model:centerDialogVisible="dialogVisible"
      @centerDialogVisible="centerDialogVisible"
      :row="row"
      @submitForm="submitForm"
      ref="archiveDialogs"
        ref="archiveDialogs"
        v-model:centerDialogVisible="dialogVisible"
        :row="row"
        @centerDialogVisible="centerDialogVisible"
        @submitForm="submitForm"

    >
    </archiveDialog>
  </el-card>
</template>
<script setup>
import { onMounted, ref, nextTick, reactive } from "vue";
import {nextTick, onMounted, reactive, ref} from "vue";
import ETable from "@/components/Table/ETable.vue";
import { ElButton, ElInput, ElIcon, ElMessage } from "element-plus";
import {ElButton, ElIcon, ElInput, ElMessage} from "element-plus";
import archiveDialog from "./mould/archiveDialog.vue";
import Pagination from "@/components/Pagination/index.vue";
import {
  Plus,
  Search,
  Folder,
  Document,
  Delete,
} from "@element-plus/icons-vue";
import {
  getTree,
  addOrEditTree,
  delTree,
  getArchiveList,
  addOrEditArchive,
  delArchive,
} from "@/api/archiveManagement";
import {Delete, Document, Folder, Plus, Search,} from "@element-plus/icons-vue";
import {addOrEditTree, delArchive, delTree, getArchiveList, getTree,} from "@/api/archiveManagement";

const dialogVisible = ref(false); // 控制归档对话框显示
const loading = ref(false);
const tableData = ref([]);
@@ -167,9 +163,9 @@
const treeRef = ref(); // 树组件引用
const total = ref(0); // 总记录数
const columns = [
  { prop: "name", label: "名称", minWidth: 180 },
  { prop: "type", label: "类型", minWidth: 120 },
  { prop: "status", label: "状态", minWidth: 100 },
  {prop: "name", label: "名称", minWidth: 180},
  {prop: "type", label: "类型", minWidth: 120},
  {prop: "status", label: "状态", minWidth: 100},
];
const selectedRows = reactive([]); // 存储选中行数据
const handleSelectionChange = (selection) => {
@@ -192,7 +188,6 @@
};
const submitForm = async (res) => {
  if (res && res.code === 200) {
    ElMessage.success("操作成功");
    // 刷新列表数据
    await getArchiveListData();
  } else {
@@ -201,8 +196,10 @@
}
const centerDialogVisible = (val) => {
};
const tableSwitch = ref(false);
// 处理节点点击
const handleNodeClick = async (data) => {
const handleNodeClick = (data) => {
  tableSwitch.value = true;
  // 切换节点时重置到第一页
  queryParams.current = 1;
  queryParams.treeId = data.id;
@@ -217,7 +214,7 @@
  archiveDialogs.value.initForm(); // 重置表单
};
// 处理分页变化
const handlePageChange = ({ page }) => {
const handlePageChange = ({page}) => {
  queryParams.current = page;
  // pageSize 固定为20，不再从参数中获取
  getArchiveListData();
@@ -238,7 +235,6 @@
      total.value = 0;
      return;
    }

    tableData.value = res.data?.records || res.data || [];
    total.value = res.data?.total || 0;
    // 确保分页参数正确更新
@@ -262,7 +258,7 @@
  }
  try {
    const ids = selectedRows.map((row) => row.id);
    const { code, msg } = await delArchive(ids);
    const {code, msg} = await delArchive(ids);
    if (code !== 200) {
      ElMessage.warning("删除失败: " + msg);
    } else {
@@ -303,6 +299,7 @@
// 处理输入框失焦
const handleInputBlur = async (event, comeTreeData, node) => {
  if (!comeTreeData.isEdit) return; // 如果不是编辑状态，直接返回
  console.log("handleInputBlur", event, comeTreeData, node);
  if (event.relatedTarget && event.relatedTarget.tagName === "BUTTON") {
    return;
  }
@@ -344,7 +341,7 @@
  if (!data || !data.id) {
    return;
  }
  let { code, msg } = await delTree([data.id]);
  let {code, msg} = await delTree([data.id]);
  if (code !== 200) {
    ElMessage.warning("删除失败, " + msg);
  } else {
@@ -378,9 +375,9 @@
    const isExpanded = node?.expanded; // 如果有子级且未展开，先展开节点
    if (hasChildren && !isExpanded) {
      if (
        treeRef.value &&
        treeRef.value.store &&
        treeRef.value.store.nodesMap[nodeKey]
          treeRef.value &&
          treeRef.value.store &&
          treeRef.value.store.nodesMap[nodeKey]
      ) {
        treeRef.value.store.nodesMap[nodeKey].expanded = true;
      }
@@ -439,7 +436,7 @@
  }
};
</script>
<style scoped lang="scss">
<style lang="scss" scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
@@ -630,11 +627,13 @@
    }
  }
}

.el-card {
  width: calc(100% - 40px);
  height: calc(100vh - 130px);
  margin: 20px;
  box-sizing: border-box;

  .left {
    width: 30%;
    height: calc(100vh - 160px);
@@ -651,13 +650,15 @@
      flex-direction: column;
    }
  }

  .right {
    width: 70%;
    height: calc(100vh - 160px);
    padding: 0px 10px;
    padding: 0 10px;
    float: left;
  }
}

.archive-management-card {
  margin: 0;
}

 src/views/archiveManagement/mould/archiveDialog.vue

@@ -1,28 +1,28 @@
<template>
  <el-dialog v-model="centerDialogVisible" title="文档管理" width="500" center>
    <el-form
      ref="ruleFormRef"
      style="max-width: 600px"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
        ref="ruleFormRef"
        style="max-width: 600px"
        :model="ruleForm"
        :rules="rules"
        label-width="auto"
    >
      <el-form-item label="名称" prop="name">
        <el-input v-model="ruleForm.name" placeholder="请输入文档名称" />
        <el-input v-model="ruleForm.name" placeholder="请输入文档名称"/>
      </el-form-item>
      <el-form-item label="请输入文档类型" prop="type">
        <el-select v-model="ruleForm.type" placeholder="请输入文档类型">
          <el-option label="合同" value="合同" />
          <el-option label="报告" value="报告" />
          <el-option label="合同" value="合同"/>
          <el-option label="报告" value="报告"/>
        </el-select>
      </el-form-item>
      <el-form-item label="请输入文档状态" prop="status">
        <el-select v-model="ruleForm.status" placeholder="请输入文档状态">
          <el-option
            v-for="option in options"
            :key="option.value"
            :label="option.label"
            :value="option.value"
              v-for="option in options"
              :key="option.value"
              :label="option.label"
              :value="option.value"
          />
        </el-select>
      </el-form-item>
@@ -31,26 +31,26 @@
      <el-row>
        <el-col :span="24" style="text-align: right">
          <el-button @click="centerDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submit"> 确 定 </el-button>
          <el-button type="primary" @click="submit"> 确 定</el-button>
        </el-col>
      </el-row>
    </template>
    <fileUpload
      ref="fileUploadRef"
      :fileSize="1024"
      :fileType="['pdf', 'docx', 'txt', 'xlsx', 'pptx....']"
      :limit="10"
      :drag="false"
      v-model:modelValue="modelValue"
        ref="fileUploadRef"
        :fileSize="1024"
        :fileType="['pdf', 'docx', 'txt', 'xlsx', 'pptx....']"
        :limit="10"
        :drag="false"
        v-model:modelValue="modelValue"
    />
  </el-dialog>
</template>

<script setup>
import { ref, watch } from "vue";
import { addOrEditArchive } from "@/api/archiveManagement";
import {ref, watch, nextTick} from "vue";
import {addOrEditArchive} from "@/api/archiveManagement";
import fileUpload from "@/components/FileUpload/index.vue";
import { ElMessage } from "element-plus";
import {ElMessage} from "element-plus";

const centerDialogVisible = defineModel("centerDialogVisible", {
  type: Boolean,
@@ -85,22 +85,24 @@
const copyForm = ref();
// 监听 row 的变化，更新 ruleForm
watch(
  () => props.row,
  (newRow) => {
    copyForm.value = initFormData(newRow);
    ruleForm.value = JSON.parse(JSON.stringify(copyForm.value));
  },
  { deep: true }
    () => props.row,
    (newRow) => {
      copyForm.value = initFormData(newRow);
      ruleForm.value = JSON.parse(JSON.stringify(copyForm.value));
    },
    {deep: true}
);
const rules = {
  name: [{ required: true, message: "请输入文档名称", trigger: "blur" }],
  type: [{ required: true, message: "请选择文档类型", trigger: "blur" }],
  status: [{ required: true, message: "请选择文档状态", trigger: "blur" }],
  name: [{required: true, message: "请输入文档名称", trigger: "blur"}],
  type: [{required: true, message: "请选择文档类型", trigger: "blur"}],
  status: [{required: true, message: "请选择文档状态", trigger: "blur"}],
};
const fileUploadRef = ref(null);
const initForm = () => {
  ruleForm.value = {};
  fileUploadRef.value.init();
  nextTick(() => {
    fileUploadRef.value.init();
  });
};
const editForm = (val) => {
  ruleForm.value = copyForm.value;
@@ -113,9 +115,9 @@
  editForm,
});
const options = [
  { value: "有效", label: "有效" },
  { value: "无效", label: "无效" },
  { value: "作废", label: "作废" },
  {value: "有效", label: "有效"},
  {value: "无效", label: "无效"},
  {value: "作废", label: "作废"},
];
const emit = defineEmits(["submitForm", "update:modelValue"]);
const modelValue = ref([]);
@@ -132,10 +134,6 @@
    // 调用 API
    try {
      const res = await addOrEditArchive(ruleForm.value);
      ElMessage({
        type: "success",
        message: res.msg || "操作成功",
      });
      emit("submitForm", res);
    } catch (error) {
      ElMessage({
@@ -147,6 +145,7 @@
    // 发送 emit 事件

    // 关闭对话框
    ElMessage.success("操作成功");
    centerDialogVisible.value = false;
  } catch (error) {
    ElMessage({

 src/views/basicInformation/index.vue

@@ -1,7 +1,8 @@
<template>
  <div> <el-form :inline="true" :model="queryParams" class="search-form">
      <el-form-item label="搜索" v-if="shouldShowSearch">
        <el-input v-model="queryParams.searchAll" :placeholder="searchPlaceholder" clearable />
  <div>
    <el-form :inline="true" :model="queryParams" class="search-form">
      <el-form-item v-if="shouldShowSearch" label="搜索">
        <el-input v-model="queryParams.searchAll" :placeholder="searchPlaceholder" clearable/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
@@ -11,58 +12,62 @@
    <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-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="danger" :icon="Delete" @click="handleDelete">删除</el-button>
        <el-button type="info" :icon="Download" @click="handleExport" v-show="canExport">导出</el-button>
        <el-button :icon="Plus" type="primary" @click="handleAdd">新建</el-button>
        <el-button :icon="Delete" type="danger" @click="handleDelete">删除</el-button>
        <el-button @click="jump">admins</el-button>
        <el-button v-show="canExport" :icon="Download" type="info" @click="handleExport">导出</el-button>
      </el-row> <!-- 表格组件 -->
      <div>
        <data-table :loading="loading" :table-data="tableData" :columns="columns"
          @selection-change="handleSelectionChange" @edit="handleEdit" :show-selection="true" :border="true">          <!-- 字段名称列的自定义插槽 - 显示为标签 -->
        <data-table :border="true" :columns="columns" :loading="loading"
                    :show-selection="true" :table-data="tableData" @edit="handleEdit" @selection-change="handleSelectionChange">
          <!-- 字段名称列的自定义插槽 - 显示为标签 -->
          <template v-if="tabName === 'coalQualityMaintenance'" #fieldIds="{ row }">
            <template v-if="typeof row.fieldIds === 'string' && row.fieldIds.includes(',')">
              <el-tag v-for="(field, index) in row.fieldIds.split(',')" :key="index" type="primary" size="small"
                style="margin-right: 4px; margin-bottom: 2px;">
              <el-tag v-for="(field, index) in row.fieldIds.split(',')" :key="index" size="small" style="margin-right: 4px; margin-bottom: 2px;"
                      type="primary">
                {{ getFieldDisplayName(field.trim()) }}
              </el-tag>
            </template>
            <template v-else>
              <el-tag type="primary" size="small">
              <el-tag size="small" type="primary">
                {{ getFieldDisplayName(row.fieldIds) || '--' }}
              </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'" />
      <pagination v-if="total > 0" :layout="'total, prev, pager, next, jumper'" :limit="pageSizes" :page="pageNum" :total="total"
                  @pagination="handPagination"/>
      <Supplier v-if="tabName === 'supplier'" v-model:copyForm="copyForm"
        v-model:supplierDialogFormVisible="dialogFormVisible" :form="form" :title="title" @submit="handleSubmit"
        @beforeClose="handleBeforeClose" @update:dialogFormVisible="handleDialogFormVisible" :addOrEdit="addOrEdit" />
                v-model:supplierDialogFormVisible="dialogFormVisible" :addOrEdit="addOrEdit" :form="form" :title="title"
                @beforeClose="handleBeforeClose" @submit="handleSubmit"
                @update:dialogFormVisible="handleDialogFormVisible"/>
      <Customer v-if="tabName === 'customer'" v-model:copyForm="copyForm"
        v-model:customerDialogFormVisible="dialogFormVisible" :form="form" :title="title" @submit="handleSubmit"
        :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'" v-model:copyForm="copyForm"
        v-model:coalQualityMaintenanceDialogFormVisible="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" />
                v-model:customerDialogFormVisible="dialogFormVisible" :addOrEdit="addOrEdit" :form="form" :title="title"
                @beforeClose="handleBeforeClose" @submit="handleSubmit"/>
      <Coal v-if="tabName === 'coal'" v-model:coalDialogFormVisible="dialogFormVisible" v-model:copyForm="copyForm"
            :addOrEdit="addOrEdit" :form="form" :title="title" @submit="handleSubmit"/>
      <coalQualityMaintenance v-if="tabName === 'coalQualityMaintenance'" v-model:coalQualityMaintenanceDialogFormVisible="dialogFormVisible"
                              v-model:copyForm="copyForm" :addOrEdit="addOrEdit"
                              :form="form"
                              :title="title" @submit="handleSubmit"/>
      <coalMeiZhiZiDuanWeiHu v-if="tabName === 'coalMeiZhiZiDuanWeiHu'" v-model:coalMaintenanceFieldDialogVisible="dialogFormVisible"
                             v-model:copyForm="copyForm" :addOrEdit="addOrEdit" :form="form"
                             :title="title"
                             @submit="handleSubmit"/>
    </el-card>
  </div>
</template>

<script setup>
// ===== 核心依赖导入 =====
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 {computed, getCurrentInstance, onMounted, reactive, ref, nextTick} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {Delete, Download, Plus} from "@element-plus/icons-vue";

// ===== 组件导入 =====
import DataTable from "@/components/Table/ETable.vue";
@@ -74,18 +79,20 @@
import coalMeiZhiZiDuanWeiHu from "./mould/coalMeiZhiZiDuanWeiHu.vue";

// ===== API 服务导入 =====
import { getSupply, delSupply } from "@/api/basicInformation/supplier.js";
import { getCoalInfo, delCoalInfo } from "@/api/basicInformation/coal.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";
import {delSupply, getSupply} from "@/api/basicInformation/supplier.js";
import {delCoalInfo, getCoalInfo} from "@/api/basicInformation/coal.js";
import {testUserList} from "@/api/tool/publicInterface.js";
import {getAreaOptions} from "@/api/system/area.js";
import {delCustomer, getCustomerList} from "@/api/basicInformation/customer.js";
import {coalField, deleteCoalField} from "@/api/basicInformation/coalFieldMaintenance.js";
import {getCoalFieldList, getCoalPlanList} from "@/api/basicInformation/coalQualityMaintenance";

const { proxy } = getCurrentInstance();
const {proxy} = getCurrentInstance();
import router from "@/router";

// ===== 响应式状态管理 =====

const jump = () => {
};
// 弹窗控制状态
const dialogFormVisible = ref(false);
const form = ref({});
@@ -124,11 +131,11 @@

// 标签页配置
const tabs = reactive([
  { name: "supplier", label: "供应商信息" },
  { name: "customer", label: "客户信息" },
  { name: "coal", label: "煤种信息" },
  { name: "coalQualityMaintenance", label: "煤质方案" },
  { name: "coalMeiZhiZiDuanWeiHu", label: "煤质字段" }
  {name: "supplier", label: "供应商信息"},
  {name: "customer", label: "客户信息"},
  {name: "coal", label: "煤种信息"},
  {name: "coalQualityMaintenance", label: "煤质方案"},
  {name: "coalMeiZhiZiDuanWeiHu", label: "煤质字段"}
]);

// ===== 工具函数 =====
@@ -178,18 +185,18 @@
 * @description 将地址ID数组转换为可读的地址字符串
 */
const formatAddressArray = (addressIds) => {
  if (!addressMap.value || Object.keys(addressMap.value).length === 0 || 
      !addressIds || !Array.isArray(addressIds) || addressIds.length === 0 || 
  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 => addressMap.value[id]?.name || '--');
  

  if (addressNames.every(name => name === '--')) {
    return '--';
  }
  

  return addressNames.filter(name => name !== '--').join(' / ');
};

@@ -217,7 +224,7 @@
 */
const coalFieldData = async () => {
  try {
    const { data, code } = await getCoalFieldList();
    const {data, code} = await getCoalFieldList();
    if (code === 200) {
      coalFieldList.value = data;
    }
@@ -234,10 +241,10 @@
 */
const getFieldDisplayName = (fieldId) => {
  if (!fieldId) return '--';
  

  const numId = parseInt(fieldId);
  const matchedField = coalFieldList.value.find(item => item.id === numId);
  

  return matchedField ? matchedField.fieldName : numId;
};

@@ -256,7 +263,7 @@
const searchPlaceholder = computed(() => {
  const placeholderMap = {
    supplier: "供应商/识别码/详细地址",
    customer: "供应商/识别码/详细地址", 
    customer: "供应商/识别码/详细地址",
    coal: "请输入搜索信息",
    coalQualityMaintenance: "请输入搜索信息",
    coalMeiZhiZiDuanWeiHu: "请输入搜索信息"
@@ -268,7 +275,7 @@
 * 是否显示搜索框
 */
const shouldShowSearch = computed(() => {
  return ['supplier', 'customer', 'coal', 'coalQualityMaintenance','coalMeiZhiZiDuanWeiHu'].includes(tabName.value);
  return ['supplier', 'customer', 'coal', 'coalQualityMaintenance', 'coalMeiZhiZiDuanWeiHu'].includes(tabName.value);
});

/**
@@ -287,8 +294,8 @@
 * 供应商表格列配置
 */
const supplierColumns = ref([
  { prop: "supplierName", label: "供应商名称", minWidth: 100 },
  { prop: "taxpayerId", label: "统一人识别号", minWidth: 170 },
  {prop: "supplierName", label: "供应商名称", minWidth: 100},
  {prop: "taxpayerId", label: "统一人识别号", minWidth: 170},
  {
    prop: "bids",
    label: "经营地址",
@@ -299,10 +306,10 @@
      return formatAddressArray(addressIds);
    }
  },
  { prop: "businessAddress", label: "经营详细地址", minWidth: 150 },
  { prop: "bankAccount", label: "开户行", minWidth: 120 },
  { prop: "bankName", label: "银行账号", minWidth: 150 },
  { prop: "contactPerson", label: "联系人", minWidth: 100 },
  {prop: "businessAddress", label: "经营详细地址", minWidth: 150},
  {prop: "bankAccount", label: "开户行", minWidth: 120},
  {prop: "bankName", label: "银行账号", minWidth: 150},
  {prop: "contactPerson", label: "联系人", minWidth: 100},
  {
    prop: "cids",
    label: "联系人地址",
@@ -313,16 +320,16 @@
      return formatAddressArray(addressIds);
    }
  },
  { prop: "contactAddress", label: "联系人详细地址", minWidth: 120 },
  { prop: "updateTime", label: "维护日期", minWidth: 120 },
  {prop: "contactAddress", label: "联系人详细地址", minWidth: 120},
  {prop: "updateTime", label: "维护日期", minWidth: 120},
]);

/**
 * 客户表格列配置
 */
const customerColumns = ref([
  { prop: "customerName", label: "客户名称", minWidth: 100 },
  { prop: "taxpayerId", label: "统一人识别号", minWidth: 120 },
  {prop: "customerName", label: "客户名称", minWidth: 100},
  {prop: "taxpayerId", label: "统一人识别号", minWidth: 120},
  {
    prop: "bids",
    label: "经营地址",
@@ -333,11 +340,11 @@
      return formatAddressArray(addressIds);
    }
  },
  { prop: "businessAddress", label: "详细地址", minWidth: 150 },
  { prop: "bankName", label: "开户行", minWidth: 120 },
  { prop: "bankAccount", label: "银行账号", minWidth: 150 },
  { prop: "contactPerson", label: "联系人", minWidth: 100 },
  { prop: "contactPhone", label: "联系人电话", minWidth: 100 },
  {prop: "businessAddress", label: "详细地址", minWidth: 150},
  {prop: "bankName", label: "开户行", minWidth: 120},
  {prop: "bankAccount", label: "银行账号", minWidth: 150},
  {prop: "contactPerson", label: "联系人", minWidth: 100},
  {prop: "contactPhone", label: "联系人电话", minWidth: 100},
  {
    prop: "cids",
    label: "联系人地址",
@@ -348,15 +355,15 @@
      return formatAddressArray(addressIds);
    }
  },
  { prop: "contactAddress", label: "联系人详细地址", minWidth: 150 },
  { prop: "updateTime", label: "维护日期", minWidth: 100 },
  {prop: "contactAddress", label: "联系人详细地址", minWidth: 150},
  {prop: "updateTime", label: "维护日期", minWidth: 100},
]);

/**
 * 煤种表格列配置
 */
const coalColumns = ref([
  { prop: "coal", label: "煤种名称", minWidth: 200 },
  {prop: "coal", label: "煤种名称", minWidth: 200},
  {
    prop: "maintainerId",
    label: "维护人",
@@ -371,14 +378,14 @@
      return userMap.value[cellValue] || '--';
    }
  },
  { prop: "maintenanceDate", label: "维护日期", minWidth: 150 },
  {prop: "maintenanceDate", label: "维护日期", minWidth: 150},
]);

/**
 * 煤质方案表格列配置
 */
const coalQualityMaintenanceColumns = ref([
  { prop: "plan", label: "方案名称", minWidth: 100 },
  {prop: "plan", label: "方案名称", minWidth: 100},
  {
    prop: "fieldIds",
    label: "字段名称",
@@ -392,15 +399,15 @@
      return cellValue || '--';
    }
  },
  { prop: "schemeDesc", label: "字段描述", minWidth: 100 },
  {prop: "schemeDesc", label: "字段描述", minWidth: 100},
]);

/**
 * 煤质字段表格列配置
 */
const coalMeiZhiZiDuanWeiHuColumns = ref([
  { prop: "fieldName", label: "字段名称", minWidth: 200 },
  { prop: "fieldDescription", label: "字段描述", minWidth: 200 },
  {prop: "fieldName", label: "字段名称", minWidth: 200},
  {prop: "fieldDescription", label: "字段描述", minWidth: 200},
]);
// ===== 事件处理函数 =====

@@ -489,10 +496,10 @@
 */
const handleAddEdit = (currentTabName) => {
  const actionText = addOrEdit.value === "add" ? "新增" : "编辑";
  

  const tabTitleMap = {
    supplier: "供应商信息",
    customer: "客户信息", 
    customer: "客户信息",
    coal: "煤种信息",
    coalQualityMaintenance: "煤质方案维护",
    coalMeiZhiZiDuanWeiHu: "煤质字段维护"
@@ -561,27 +568,27 @@
 */
const handleEdit = (row) => {
  form.value = JSON.parse(JSON.stringify(row));
  

  // 构建供应商业务地址数组
  if (form.value.bprovinceId && form.value.bdistrictId && form.value.bcityId) {
    form.value.bids = [row.bprovinceId, row.bcityId, row.bdistrictId];
  }
  

  // 构建供应商联系地址数组
  if (form.value.cprovinceId && form.value.cdistrictId && form.value.ccityId) {
    form.value.cids = [row.cprovinceId, row.ccityId, row.cdistrictId];
  }
  

  // 构建客户业务地址数组
  if (form.value.businessCityId && form.value.businessDistrictId && form.value.businessProvinceId) {
    form.value.bids = [row.businessProvinceId, row.businessCityId, row.businessDistrictId];
  }
  

  // 构建客户联系地址数组
  if (form.value.cityId && form.value.districtId && form.value.provinceId) {
    form.value.cids = [row.provinceId, row.cityId, row.districtId];
  }
  

  addOrEdit.value = "edit";
  handleAddEdit(tabName.value);
};
@@ -597,7 +604,7 @@
  }

  const deleteIds = selectedRows.value.map(item => item.id);
  

  try {
    await ElMessageBox.confirm("确定删除选中的数据吗？", "提示", {
      confirmButtonText: "确定",
@@ -608,7 +615,9 @@
    const deleteApiMap = {
      supplier: delSupply,
      coal: delCoalInfo,
      coalQualityMaintenance: () => { throw new Error('delCoalQuality API not imported'); },
      coalQualityMaintenance: () => {
        throw new Error('delCoalQuality API not imported');
      },
      customer: delCustomer,
      coalMeiZhiZiDuanWeiHu: deleteCoalField
    };
@@ -620,12 +629,12 @@
    }
    console.log(deleteIds)
    const res = await deleteApi(deleteIds);
    

    if (res.code !== 200 && res.msg !== "操作成功") {
      ElMessage.error("删除失败：" + res.msg);
      return;
    }
    

    ElMessage.success("删除成功");
    await getList();
  } catch (error) {
@@ -653,10 +662,10 @@
 */
const handleExport = () => {
  const exportConfig = {
    supplier: { api: "/supply/export", name: "供应商信息" },
    customer: { api: "/customer/export", name: "客户信息" },
    coal: { api: "/supply/export", name: "煤种信息" },
    coalQualityMaintenance: { api: "/supply/export", name: "煤质维护信息" }
    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];
@@ -671,7 +680,7 @@
 * @param {string} name - 导出文件名前缀
 */
const exportData = (api, name) => {
  proxy.download(api, { ...queryParams }, `${name}${new Date().getTime()}.xlsx`);
  proxy.download(api, {...queryParams}, `${name}${new Date().getTime()}.xlsx`);
  ElMessage.success("导出数据：" + name);
};
// ===== 数据获取函数 =====
@@ -707,13 +716,13 @@
const getList = async () => {
  try {
    loading.value = true;
    const { data, code } = await selectInterface();
    
    const {data, code} = await selectInterface();

    if (code !== 200) {
      ElMessage.error("获取数据失败：" + (data?.msg || '未知错误'));
      return;
    }
    

    tableData.value = data.records || [];
    total.value = data.total || 0;
  } catch (error) {
@@ -733,7 +742,7 @@
  try {
    // 并行执行初始化操作
    await Promise.all([
      handleTabClick({ props: { name: "supplier" } }),
      handleTabClick({props: {name: "supplier"}}),
      fetchAreaOptions(),
      getUserList()
    ]);
@@ -778,7 +787,7 @@

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


 src/views/basicInformation/mould/coal.vue

@@ -1,73 +1,77 @@
<template>
    <div>
        <el-dialog
            v-model="dialogVisible"
            :title="title"
            width="500"
            :close-on-click-modal="false"
            :before-close="handleClose"
        >            <el-form
                ref="formRef"
                style="max-width: 600px; margin: 0 auto"
                :model="formData"
                :rules="rules"
                label-width="120px"
            >
                <el-form-item label="煤种名称" prop="coal">
                    <el-input
                        v-model="formData.coal"
                        placeholder="请输入煤种名称"
                    />
                </el-form-item>                <el-form-item label="维护人姓名" prop="maintainerId">
                    <el-input
                        :value="userStore.name || ''"
                        placeholder="维护人姓名"
                        disabled
                    />
                </el-form-item>                <el-form-item label="维护日期" prop="maintenanceDate">
                    <el-input
                        :value="getCurrentDate()"
                        placeholder="维护日期"
                        disabled
                    />
                </el-form-item>
                    
                <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>
    </div>
  <div>
    <el-dialog
        v-model="dialogVisible"
        :title="title"
        width="500"
        :close-on-click-modal="false"
        :before-close="handleClose"
    >
      <el-form
          ref="formRef"
          style="max-width: 600px; margin: 0 auto"
          :model="formData"
          :rules="rules"
          label-width="120px"
      >
        <el-form-item label="煤种名称" prop="coal">
          <el-input
              v-model="formData.coal"
              placeholder="请输入煤种名称"
          />
        </el-form-item>
        <el-form-item label="维护人姓名" prop="maintainerId">
          <el-input
              :value="userStore.name || ''"
              placeholder="维护人姓名"
              disabled
          />
        </el-form-item>
        <el-form-item label="维护日期" prop="maintenanceDate">
          <el-input
              :value="getCurrentDate()"
              placeholder="维护日期"
              disabled
          />
        </el-form-item>

        <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>
  </div>
</template>

<script setup>
import { ref, watch, defineProps, reactive, onMounted } from 'vue'
import { addOrEditCoalInfo } from '@/api/basicInformation/coal'
import {ref, watch, defineProps, reactive, onMounted} from 'vue'
import {addOrEditCoalInfo} from '@/api/basicInformation/coal'
import useUserStore from '@/store/modules/user'

const userStore = useUserStore()

const props = defineProps({
    beforeClose: {
        type: Function,
        default: () => {}
    },
    form: {
        type: Object,
        default: () => ({})
    },
    addOrEdit: {
        type: String,
        default: 'add'
    },
    title: {
        type: String,
        default: ''
    },
  beforeClose: {
    type: Function,
    default: () => {
    }
  },
  form: {
    type: Object,
    default: () => ({})
  },
  addOrEdit: {
    type: String,
    default: 'add'
  },
  title: {
    type: String,
    default: ''
  },
})
const copyForm = defineModel("copyForm", {
  required: true,
@@ -75,99 +79,100 @@
});
// 在组件挂载时获取用户信息
onMounted(async () => {
    // 如果store中没有用户信息，则获取用户信息
    if (!userStore.name) {
        try {
            await userStore.getInfo()
            // 自动填充维护人ID
            if (props.addOrEdit === 'add') {
                formData.value.maintainerId = userStore.id
            }
        } catch (error) {
            console.error('获取用户信息失败:', error)
        }
    } else {
        // 自动填充维护人ID
        if (props.addOrEdit === 'add') {
            formData.value.maintainerId = userStore.id
        }
  // 如果store中没有用户信息，则获取用户信息
  if (!userStore.name) {
    try {
      await userStore.getInfo()
      // 自动填充维护人ID
      if (props.addOrEdit === 'add') {
        formData.value.maintainerId = userStore.id
      }
    } catch (error) {
      console.error('获取用户信息失败:', error)
    }
  } else {
    // 自动填充维护人ID
    if (props.addOrEdit === 'add') {
      formData.value.maintainerId = userStore.id
    }
  }
})

const emit = defineEmits(['submit', 'handleBeforeClose','update:coalDialogFormVisible'])
const emit = defineEmits(['submit', 'handleBeforeClose', 'update:coalDialogFormVisible'])
// 表单引用
const formRef = ref(null)
// 表单数据
const formData = ref({ ...props.form })
const formData = ref({...props.form})
// 弹窗可见性
const dialogVisible = defineModel("coalDialogFormVisible",{required:true,type:Boolean})
const dialogVisible = defineModel("coalDialogFormVisible", {required: true, type: Boolean})

// 监听外部传入的表单数据变化
watch(() => props.form, (newVal) => {
    formData.value = { ...newVal }
    // 如果是新增模式，设置维护人
    if (props.addOrEdit === 'add' && userStore.id) {
        formData.value.maintainerId = userStore.id
    }
}, { deep: true })
  formData.value = {...newVal}
  // 如果是新增模式，设置维护人
  if (props.addOrEdit === 'add' && userStore.id) {
    formData.value.maintainerId = userStore.id
  }
}, {deep: true})

// 监听内部弹窗状态变化
watch(() => dialogVisible.value, (newVal) => {
    emit('update:coalDialogFormVisible', newVal)
  emit('update:coalDialogFormVisible', newVal)
})

// 提交表单
const submitForm = async () => {
    if (!formRef.value) return
    await formRef.value.validate(async (valid, fields) => {
        if (valid) {
            delete formData.value.maintainerName // 删除显示用的字段，只保留ID
            
            // 确保maintainerId有值
            if (!formData.value.maintainerId) {
                formData.value.maintainerId = userStore.id
            }
            
            // 设置维护日期
            formData.value.maintenanceDate = getCurrentDate()
            
            let result = await addOrEditCoalInfo({
                ...formData.value,
            })
            let obj = {
                title: props.title,
                result,
            }
            emit('submit', obj)
        }
    })
  if (!formRef.value) return
  await formRef.value.validate(async (valid, fields) => {
    if (valid) {
      delete formData.value.maintainerName // 删除显示用的字段，只保留ID

      // 确保maintainerId有值
      if (!formData.value.maintainerId) {
        formData.value.maintainerId = userStore.id
      }

      // 设置维护日期
      formData.value.maintenanceDate = getCurrentDate()

      let result = await addOrEditCoalInfo({
        ...formData.value,
      })
      let obj = {
        title: props.title,
        result,
      }
      emit('submit', obj)
    }
  })
}
// 取消表单
const cancelForm = () => {
    emit('update:coalDialogFormVisible', false)
    formData.value = {}
  emit('update:coalDialogFormVisible', false)
  formData.value = {}
}
// 重置表单
const resetForm = () => {
    if (!formRef.value) return
  if (!formRef.value) return
  formData.value = JSON.parse(JSON.stringify(copyForm.value));
    // formRef.value.resetFields()
  // formRef.value.resetFields()
}
// 关闭弹窗
const handleClose = () => {
    // 触发父组件的关闭函数
    emit("handleBeforeClose")
    emit('update:coalDialogFormVisible', false)
  // 触发父组件的关闭函数
  emit("handleBeforeClose")
  emit('update:coalDialogFormVisible', false)
}
const rules = reactive({
  supplierName: [
    { required: true, message: "请输入供货商名称", trigger: "blur" },
    {required: true, message: "请输入供货商名称", trigger: "blur"},
  ],
  identifyNumber: [
    { required: true, message: "请正确输入纳税人识别号", trigger: "blur" },
    { min: 17, max: 20, message: "请输入17-20位纳税人识别号", trigger: "blur" },
    {required: true, message: "请正确输入纳税人识别号", trigger: "blur"},
    {min: 17, max: 20, message: "请输入17-20位纳税人识别号", trigger: "blur"},
  ],
});

// 获取当前日期并格式化为 YYYY-MM-DD
function getCurrentDate() {
  const today = new Date();
@@ -180,9 +185,9 @@

<style lang="scss" scoped>
.dialog-footer {
    display: flex;
    margin-top: 20px;
    flex-direction: column;
    align-items: flex-end;
  display: flex;
  margin-top: 20px;
  flex-direction: column;
  align-items: flex-end;
}
</style>

 src/views/basicInformation/mould/coalMeiZhiZiDuanWeiHu.vue

@@ -1,35 +1,38 @@
<template>
  <div>
    <el-dialog
      v-model="dialogVisible"
      :title="title"
      width="600"
      :close-on-click-modal="false"
      :before-close="handleClose"
        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"
          ref="formRef"
          style="max-width: 400px; margin: 0 auto"
          :model="formData"
          :rules="rules"
          label-width="auto"
      >
        <el-form-item label="字段名称" prop="fieldName">
          <el-input
            v-model="formData.fieldName"
            placeholder="请输入字段名称"
              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="字段描述" prop="fieldDescription">
          <el-input v-model="formData.fieldDescription" type="textarea" placeholder="请输入字段描述"/>
        </el-form-item>
        <el-form-item class="dialog-footer">
          <el-button v-if="addOrEdit === 'edit'" @click="resetForm"
            >重置</el-button
          >重置
          </el-button
          >
          <el-button v-if="addOrEdit === 'add'" @click="cancelForm"
            >取消</el-button
          >取消
          </el-button
          >
          <el-button type="primary" @click="submitForm"> 确定 </el-button>
          <el-button type="primary" @click="submitForm"> 确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
@@ -37,8 +40,9 @@
</template>

<script setup>
import { ref, reactive, watch, defineProps } from "vue";
import { addOrEditCoalField } from "@/api/basicInformation/coalFieldMaintenance.js";
import {ref, reactive, watch, defineProps} from "vue";
import {addOrEditCoalField} from "@/api/basicInformation/coalFieldMaintenance.js";

const props = defineProps({
  form: {
    type: Object,
@@ -61,12 +65,12 @@
const formRef = ref();
const emit = defineEmits(["submit", "handleBeforeClose"]);
// 表单数据
const formData = ref({ ...props.form });
const formData = ref({...props.form});

// 监听props.form的变化，更新formData
watch(() => props.form, (newForm) => {
  formData.value = { ...newForm };
}, { deep: true, immediate: true });
  formData.value = {...newForm};
}, {deep: true, immediate: true});
// 弹窗可见性
const dialogVisible = defineModel("coalMaintenanceFieldDialogVisible", {
  required: true,
@@ -82,8 +86,8 @@
      console.log("提交表单", formData.value);
      if (props.title.includes('新增')) {
        let result = await addOrEditCoalField(
         {...formData.value}
          ,)
            {...formData.value}
            ,)
        console.log(result);
        obj.value = {
          title: "新增",
@@ -111,7 +115,7 @@
};
// 重置表单
const resetForm = () => {
    if (!formRef.value) return
  if (!formRef.value) return
  formData.value = JSON.parse(JSON.stringify(copyForm.value));
}
// 关闭弹窗
@@ -122,7 +126,7 @@
};
const rules = reactive({
  fieldName: [
    { required: true, message: "请输入煤种名称", trigger: "blur" },
    {required: true, message: "请输入煤种名称", trigger: "blur"},
  ],
});
</script>

 src/views/basicInformation/mould/coalQualityMaintenance.vue

@@ -1,25 +1,26 @@
<!-- 煤质方案维护弹窗组件 -->
<template>
  <el-dialog v-model="dialogVisible" :title="title" width="600" :close-on-click-modal="false"
    :before-close="handleClose">
             :before-close="handleClose">
    <!-- 表单区域 -->
    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px"
      style="max-width: 400px; margin: 0 auto">
             style="max-width: 400px; margin: 0 auto">
      <!-- 方案名称输入框 -->
      <el-form-item label="煤质方案名称" prop="plan">
        <el-input v-model="formData.plan" placeholder="请输入煤质方案名称" clearable />
        <el-input v-model="formData.plan" placeholder="请输入煤质方案名称" clearable/>
      </el-form-item>

      <!-- 煤质字段多选下拉框 -->
      <el-form-item label="煤质方案类型" prop="coalFieldList">
        <el-select v-model="formData.coalFieldList" placeholder="请选择煤质方案类型" style="width: 100%" clearable multiple>
          <el-option v-for="item in fieldOptions" :key="item.id" :label="item.label" :value="item" />
        <el-select v-model="formData.coalFieldList" placeholder="请选择煤质方案类型" style="width: 100%" clearable
                   multiple>
          <el-option v-for="item in fieldOptions" :key="item.id" :label="item.label" :value="item"/>
        </el-select>
      </el-form-item>

      <!-- 方案描述文本域 -->
      <el-form-item label="煤质方案描述" prop="schemeDesc">
        <el-input v-model="formData.schemeDesc" type="textarea" placeholder="请输入煤质方案描述" :rows="3" />
        <el-input v-model="formData.schemeDesc" type="textarea" placeholder="请输入煤质方案描述" :rows="3"/>
      </el-form-item>

      <!-- 操作按钮区域 -->
@@ -32,15 +33,16 @@
  </el-dialog>
</template>
<script setup>
import { ref, reactive, watch, computed, onMounted } from "vue";
import { getCoalFieldList, addOrEditCoalPlan } from "@/api/basicInformation/coalQualityMaintenance";
import {ref, reactive, watch, computed, onMounted} from "vue";
import {getCoalFieldList, addOrEditCoalPlan} from "@/api/basicInformation/coalQualityMaintenance";

// ===== 组件属性定义 =====
const props = defineProps({
  /** 关闭弹窗前的回调函数 */
  beforeClose: {
    type: Function,
    default: () => { },
    default: () => {
    },
  },
  /** 表单数据 */
  form: {
@@ -58,7 +60,10 @@
    default: "",
  },
});

const copyForm = defineModel("copyForm", {
  required: true,
  type: Object,
});
// ===== 事件定义 =====
const emit = defineEmits(["submit", "handleBeforeClose"]);

@@ -85,10 +90,10 @@
// ===== 表单验证规则 =====
const formRules = reactive({
  plan: [
    { required: true, message: "请输入方案名称", trigger: "blur" },
    {required: true, message: "请输入方案名称", trigger: "blur"},
  ],
  coalFieldList: [
    { required: true, message: "请选择方案类型", trigger: "blur" },
    {required: true, message: "请选择方案类型", trigger: "blur"},
  ],
});

@@ -99,9 +104,9 @@
const parseCoalFields = (coalFieldsStr) => {
  if (!coalFieldsStr || typeof coalFieldsStr !== 'string') return [];
  return coalFieldsStr
    .split(',')
    .map(id => parseInt(id.trim()))
    .filter(id => !isNaN(id));
      .split(',')
      .map(id => parseInt(id.trim()))
      .filter(id => !isNaN(id));
};

/**
@@ -117,7 +122,7 @@
 * @param {Object} newForm - 新的表单数据
 */
const initFormData = (newForm) => {
  formData.value = { ...newForm };
  formData.value = {...newForm};
  // 处理 coalFieldList 字段：编辑时需要将字符串转换为数组供多选组件使用
  if (newForm.fieldIds) {
    if (typeof newForm.fieldIds === 'string') {
@@ -125,7 +130,7 @@
      const ids = parseCoalFields(newForm.fieldIds);
      formData.value.coalFieldList = ids.map(id => {
        const option = fieldOptions.find(opt => opt.value === id);
        return option || { fields: `字段${id}`, value: id };
        return option || {fields: `字段${id}`, value: id};
      });
    } else if (Array.isArray(newForm.coalFieldList)) {
      // 确保数组中的值都是正确的对象格式
@@ -136,7 +141,7 @@
          // 如果是纯ID，需要匹配对应的选项
          const id = parseInt(item);
          const option = fieldOptions.find(opt => opt.value === id);
          return option || { fields: `字段${id}`, value: id };
          return option || {fields: `字段${id}`, value: id};
        }
      });
    }
@@ -152,13 +157,13 @@
 */
onMounted(async () => {
  try {
    const { data, code } = await getCoalFieldList();
    const {data, code} = await getCoalFieldList();
    if (code === 200) {
      // 构建选项数据，格式化为{ label, value }
      fieldOptions.push(...data.map(item => ({
        label: item.fieldName,
        value: item.id,
        fields:item.fields
        fields: item.fields
      })));
    } else {
      console.error("获取煤质字段列表失败", data);
@@ -248,8 +253,8 @@
 * 重置表单
 */
const resetForm = () => {
  if (!formRef.value) return;
  formRef.value.resetFields();
  formData.value = JSON.parse(JSON.stringify(copyForm.value));
  initFormData(formData.value);
};

/**

 src/views/basicInformation/mould/customer.vue

@@ -1,44 +1,47 @@
<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">
               :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="customerName">
          <el-input v-model="formData.customerName" placeholder="请输入客户名称" />
          <el-input v-model="formData.customerName" placeholder="请输入客户名称"/>
        </el-form-item>
        <el-form-item label="纳税人识别号" prop="taxpayerId">
          <el-input v-model="formData.taxpayerId" placeholder="请输入纳税人识别号" />
          <el-input v-model="formData.taxpayerId" placeholder="请输入纳税人识别号"/>
        </el-form-item>
        <el-form-item label="经营地址" prop="bids">
          <el-cascader placeholder="请选择经营地址" size="default" :options="addressSelectOptions" v-model="formData.bids"
           :props="cascaderProps" @change="handleChange">
          <el-cascader placeholder="请选择经营地址" size="default" :options="addressSelectOptions"
                       v-model="formData.bids"
                       :props="cascaderProps" @change="handleChange">
          </el-cascader>
        </el-form-item>
        <el-form-item label="经营详细地址" prop="businessAddress">
          <el-input v-model="formData.businessAddress" placeholder="请输入经营详细地址" />
          <el-input v-model="formData.businessAddress" placeholder="请输入经营详细地址"/>
        </el-form-item>
        <el-form-item label="开户行" prop="bankName">
          <el-input v-model="formData.bankName" placeholder="请输入开户行" />
          <el-input v-model="formData.bankName" placeholder="请输入开户行"/>
        </el-form-item>
        <el-form-item label="银行账户" prop="bankAccount">
          <el-input v-model="formData.bankAccount" placeholder="请输入银行账户" />
          <el-input v-model="formData.bankAccount" placeholder="请输入银行账户"/>
        </el-form-item>
        <el-form-item label="联系人" prop="contactPerson">
          <el-input v-model="formData.contactPerson" placeholder="请输入联系人" />
          <el-input v-model="formData.contactPerson" placeholder="请输入联系人"/>
        </el-form-item>
        <el-form-item label="联系电话" prop="contactPhone">
          <el-input v-model="formData.contactPhone" placeholder="请输入联系电话" />
          <el-input v-model="formData.contactPhone" placeholder="请输入联系电话"/>
        </el-form-item>
  

        <el-form-item label="联系人地址" prop="cids">
          <el-cascader placeholder="请选择联系人地址" size="default" :options="addressSelectOptions" v-model="formData.cids"
            :props="cascaderProps" @change="handleChange">
          <el-cascader placeholder="请选择联系人地址" size="default" :options="addressSelectOptions"
                       v-model="formData.cids"
                       :props="cascaderProps" @change="handleChange">
          </el-cascader>
        </el-form-item>
        <el-form-item label="联系人详细" prop="contactAddress">
          <el-input v-model="formData.contactAddress" placeholder="请输入联系人详细地址" />
          <el-input v-model="formData.contactAddress" placeholder="请输入联系人详细地址"/>
        </el-form-item>
        <el-form-item class="dialog-footer"> 
        <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">
@@ -51,15 +54,16 @@
</template>

<script setup>
import { ref, watch, onMounted } from "vue";
import { getAreaOptions } from "@/api/system/area.js";
import {ref, watch, onMounted} from "vue";
import {getAreaOptions} from "@/api/system/area.js";
import addressList from "@/api/jsonApi/areaList.json";
import { addOrEditCustomer } from "@/api/basicInformation/customer";
import {addOrEditCustomer} from "@/api/basicInformation/customer";

const props = defineProps({
  beforeClose: {
    type: Function,
    default: () => { },
    default: () => {
    },
  },
  form: {
    type: Object,
@@ -111,7 +115,7 @@
// 表单引用
const formRef = ref(null);
// 表单数据
const formData = ref({ ...props.form });
const formData = ref({...props.form});
// 弹窗可见性
const dialogVisible = defineModel("customerDialogFormVisible", {
  required: true,
@@ -120,26 +124,26 @@

// 监听外部传入的表单数据变化
watch(
  () => props.form,
  (newVal) => {
    formData.value = { ...newVal };
  },
  { deep: true }
    () => props.form,
    (newVal) => {
      formData.value = {...newVal};
    },
    {deep: true}
);
watch(
  () => props.form,
  (newVal) => {
    formData.value = { ...newVal };
  },
  { deep: true }
    () => props.form,
    (newVal) => {
      formData.value = {...newVal};
    },
    {deep: true}
);

// 监听内部弹窗状态变化
watch(
  () => dialogVisible.value,
  (newVal) => {
    emit("update:customerDialogFormVisible", newVal);
  }
    () => dialogVisible.value,
    (newVal) => {
      emit("update:customerDialogFormVisible", newVal);
    }
);

// 提交表单
@@ -191,11 +195,11 @@
};
const rules = reactive({
  customerName: [
    { required: true, message: "请输入供货商名称", trigger: "blur" },
    {required: true, message: "请输入供货商名称", trigger: "blur"},
  ],
  taxpayerId: [
    { required: true, message: "请正确输入纳税人识别号", trigger: "blur" },
    { min: 17, max: 20, message: "请输入17-20位纳税人识别号", trigger: "blur" },
    {required: true, message: "请正确输入纳税人识别号", trigger: "blur"},
    {min: 17, max: 20, message: "请输入17-20位纳税人识别号", trigger: "blur"},
  ],
  address: [
    {
@@ -204,14 +208,14 @@
      trigger: "change",
    },
  ],
  bankAccount: [{ required: true, message: "请输入银行账户", trigger: "blur" }],
  bankName: [{ required: true, message: "请输入开户行", trigger: "blur" }],
  contactPerson: [{ required: true, message: "请输入开户行", trigger: "blur" }],
  cids: [{ required: true, message: "请输入开户行", trigger: "blur" }],
  bids: [{ required: true, message: "请输入开户行", trigger: "blur" }],
  bankAccount: [{required: true, message: "请输入银行账户", trigger: "blur"}],
  bankName: [{required: true, message: "请输入开户行", trigger: "blur"}],
  contactPerson: [{required: true, message: "请输入开户行", trigger: "blur"}],
  cids: [{required: true, message: "请输入开户行", trigger: "blur"}],
  bids: [{required: true, message: "请输入开户行", trigger: "blur"}],
  contactPhone: [
    { required: true, message: "请输入联系人", trigger: "blur" },
    { min: 11, max: 11, message: "请输入11位联系人电话", trigger: "blur" },
    {required: true, message: "请输入联系人", trigger: "blur"},
    {min: 11, max: 11, message: "请输入11位联系人电话", trigger: "blur"},
  ],
});
</script>

 src/views/basicInformation/mould/supplier.vue

@@ -1,41 +1,44 @@
<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">
               :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="taxpayerId">
          <el-input v-model="formData.taxpayerId" placeholder="请输入纳税人识别号" />
          <el-input v-model="formData.taxpayerId" placeholder="请输入纳税人识别号"/>
        </el-form-item>
        <el-form-item label="经营地址" prop="bids">
          <el-cascader placeholder="请选择经营地址" size="default" :options="addressSelectOptions" v-model="formData.bids"
            :props="cascaderProps" @change="handleChange">
          <el-cascader placeholder="请选择经营地址" size="default" :options="addressSelectOptions"
                       v-model="formData.bids"
                       :props="cascaderProps" @change="handleChange">
          </el-cascader>
        </el-form-item>
        <el-form-item label="详细地址" prop="businessAddress">
          <el-input v-model="formData.businessAddress" placeholder="请输入客户详细地址" />
          <el-input v-model="formData.businessAddress" placeholder="请输入客户详细地址"/>
        </el-form-item>
        <el-form-item label="开户行" prop="bankAccount">
          <el-input v-model="formData.bankAccount" placeholder="请输入开户行" />
          <el-input v-model="formData.bankAccount" placeholder="请输入开户行"/>
        </el-form-item>
        <el-form-item label="银行账户" prop="bankName">
          <el-input v-model="formData.bankName" placeholder="请输入银行账户" />
          <el-input v-model="formData.bankName" placeholder="请输入银行账户"/>
        </el-form-item>
        <el-form-item label="联系人" prop="contactPerson">
          <el-input v-model="formData.contactPerson" placeholder="请输入联系人" />
          <el-input v-model="formData.contactPerson" placeholder="请输入联系人"/>
        </el-form-item>
        <el-form-item label="联系人电话" prop="contactPhone">
          <el-input v-model="formData.contactPhone" placeholder="请输入联系人电话" />
          <el-input v-model="formData.contactPhone" placeholder="请输入联系人电话"/>
        </el-form-item>
        <el-form-item label="联系人地址" prop="cids">
          <el-cascader placeholder="请选择联系人地址" size="default" :options="addressSelectOptions" v-model="formData.cids"
            :props="cascaderProps" @change="handleChange">
          <el-cascader placeholder="请选择联系人地址" size="default" :options="addressSelectOptions"
                       v-model="formData.cids"
                       :props="cascaderProps" @change="handleChange">
          </el-cascader>
        </el-form-item>
        <el-form-item label="联系人详细地址" prop="contactAddress">
          <el-input v-model="formData.contactAddress" placeholder="请输入联系人地址" />
          <el-input v-model="formData.contactAddress" placeholder="请输入联系人地址"/>
        </el-form-item>
        <el-form-item class="dialog-footer">
          <el-button v-if="addOrEdit === 'edit'" @click="resetForm">重置</el-button>
@@ -48,9 +51,9 @@
</template>

<script setup>
import { ref, watch, defineProps, onMounted } from "vue";
import { addOrEditSupply } from "@/api/basicInformation/supplier";
import { getAreaOptions } from "@/api/system/area.js";
import {ref, watch, defineProps, onMounted} from "vue";
import {addOrEditSupply} from "@/api/basicInformation/supplier";
import {getAreaOptions} from "@/api/system/area.js";

const props = defineProps({
  beforeClose: {
@@ -111,7 +114,7 @@
// 表单引用
const formRef = ref(null);
// 表单数据
const formData = ref({ ...props.form });
const formData = ref({...props.form});
// 弹窗可见性
const dialogVisible = defineModel("supplierDialogFormVisible", {
  required: true,
@@ -119,19 +122,19 @@
});
// 监听外部传入的表单数据变化
watch(
  () => props.form,
  (newVal) => {
    formData.value = { ...newVal };
  },
  { deep: true }
    () => props.form,
    (newVal) => {
      formData.value = {...newVal};
    },
    {deep: true}
);

// 监听内部弹窗状态变化
watch(
  () => dialogVisible.value,
  (newVal) => {
    emit("update:supplierDialogFormVisible", newVal);
  }
    () => dialogVisible.value,
    (newVal) => {
      emit("update:supplierDialogFormVisible", newVal);
    }
);
// 处理地址选择变化
const handleChange = (value) => {
@@ -175,7 +178,6 @@
const resetForm = () => {
  if (!formRef.value) return;
  formData.value = JSON.parse(JSON.stringify(copyForm.value));
  // formRef.value.resetFields();
};
// 关闭弹窗
const handleClose = () => {
@@ -185,11 +187,11 @@
};
const rules = reactive({
  supplierName: [
    { required: true, message: "请输入供货商名称", trigger: "blur" },
    {required: true, message: "请输入供货商名称", trigger: "blur"},
  ],
  taxpayerId: [
    { required: true, message: "请正确输入纳税人识别号", trigger: "blur" },
    { min: 17, max: 20, message: "请输入17-20位纳税人识别号", trigger: "blur" },
    {required: true, message: "请正确输入纳税人识别号", trigger: "blur"},
    {min: 17, max: 20, message: "请输入17-20位纳税人识别号", trigger: "blur"},
  ],
  // bids: [
  //   {
@@ -198,12 +200,12 @@
  //     trigger: "change",
  //   },
  // ],
  bankName: [{ required: true, message: "请输入银行账户", trigger: "blur" }],
  bankAccount: [{ required: true, message: "请输入开户行", trigger: "blur" }],
  contactPerson: [{ required: true, message: "联系人", trigger: "blur" }],
  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" },
    {required: true, message: "请输入联系人", trigger: "blur"},
    {min: 11, max: 11, message: "请输入11位联系人电话", trigger: "blur"},
  ],
});
</script>

 src/views/index.vue

@@ -1,1095 +1,550 @@
<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :sm="24" :lg="12" style="padding-left: 20px">
        <h2>若依后台管理框架</h2>
        <p>
          一直想做一款后台管理系统，看了很多优秀的开源项目但是发现没有合适自己的。于是利用空闲休息时间开始自己写一套后台系统。如此有了若依管理系统，她可以用于所有的Web应用程序，如网站管理后台，网站会员中心，CMS，CRM，OA等等，当然，您也可以对她进行深度定制，以做出更强系统。所有前端后台代码封装过后十分精简易上手，出错概率低。同时支持移动客户端访问。系统会陆续更新一些实用功能。
        </p>
        <p>
          <b>当前版本:</b> <span>v{{ version }}</span>
        </p>
        <p>
          <el-tag type="danger">&yen;免费开源</el-tag>
        </p>
        <p>
          <el-button
            type="primary"
            icon="Cloudy"
            plain
            @click="goTarget('https://gitee.com/y_project/RuoYi-Vue')"
            >访问码云</el-button
          >
          <el-button
            icon="HomeFilled"
            plain
            @click="goTarget('http://ruoyi.vip')"
            >访问主页</el-button
          >
        </p>
      </el-col>

      <el-col :sm="24" :lg="12" style="padding-left: 50px">
        <el-row>
          <el-col :span="12">
            <h2>技术选型</h2>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <h4>后端技术</h4>
            <ul>
              <li>SpringBoot</li>
              <li>Spring Security</li>
              <li>JWT</li>
              <li>MyBatis</li>
              <li>Druid</li>
              <li>Fastjson</li>
              <li>...</li>
            </ul>
          </el-col>
          <el-col :span="6">
            <h4>前端技术</h4>
            <ul>
              <li>Vue</li>
              <li>Vuex</li>
              <li>Element-ui</li>
              <li>Axios</li>
              <li>Sass</li>
              <li>Quill</li>
              <li>...</li>
            </ul>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-divider />
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="12" :lg="8">
        <el-card class="update-log">
          <template v-slot:header>
            <div class="clearfix">
              <span>联系信息</span>
            </div>
          </template>
          <div class="body">
            <p>
              <i class="el-icon-s-promotion"></i> 官网：<el-link
                href="http://www.ruoyi.vip"
                target="_blank"
                >http://www.ruoyi.vip</el-link
              >
            </p>
            <p>
              <i class="el-icon-user-solid"></i> QQ群：<s> 满937441 </s> <s> 满887144332 </s>
              <s> 满180251782 </s> <s> 满104180207 </s> <s> 满186866453 </s> <s> 满201396349 </s>
              <s> 满101456076 </s> <s> 满101539465 </s> <s> 满264312783 </s> <s> 满167385320 </s> 
              <s> 满104748341 </s> <s> 满160110482 </s> <s> 满170801498 </s> <s> 满108482800 </s> 
              <s> 满101046199 </s> <s> 满136919097 </s> <s> 满143961921 </s> <s> 满174951577 </s> 
              <s> 满161281055 </s> <s> 满138988063 </s> <s> 满151450850 </s> <s> 满224622315 </s>
              <s> 满287842588 </s> <s> 满187944233 </s> <a href="http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=G6r5KGCaa3pqdbUSXNIgYloyb8e0_L0D&authKey=4w8tF1eGW7%2FedWn%2FHAypQksdrML%2BDHolQSx7094Agm7Luakj9EbfPnSTxSi2T1LQ&noverify=0&group_code=228578329" target="_blank">228578329</a>
            </p>
            <p>
              <i class="el-icon-chat-dot-round"></i> 微信：<a
                href="javascript:;"
                >/ *若依</a
              >
            </p>
            <p>
              <i class="el-icon-money"></i> 支付宝：<a
                href="javascript:;"
                class="支付宝信息"
                >/ *若依</a
              >
            </p>
  <div class="dashboard">
    <!-- 顶部统计卡片 -->
    <div class="top-cards">
      <div class="stat-card revenue">
        <div class="card-icon">
          <i class="el-icon-money"></i>
        </div>
        <div class="card-content">
          <div class="card-title">营收金额</div>
          <div class="card-value">¥1,234,567</div>
          <div class="card-trend">
            <span class="trend-label">较昨日</span>
            <span class="trend-value up">+12.5%</span>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="8">
        <el-card class="update-log">
          <template v-slot:header>
            <div class="clearfix">
              <span>更新日志</span>
            </div>
          </template>
          <el-collapse accordion>
            <el-collapse-item title="v3.8.9 - 2024-12-30">
              <ol>
                <li>用户管理支持分栏拖动</li>
                <li>修改主题样式本地读取</li>
                <li>用户头像http(s)链接支持</li>
                <li>用户管理过滤掉已禁用部门</li>
                <li>支持自定义显示Excel属性列</li>
                <li>操作日志记录DELETE请求参数</li>
                <li>白名单支持对通配符路径匹配</li>
                <li>校检文件名是否包含特殊字符</li>
                <li>代码生成创建表屏蔽违规的字符</li>
                <li>菜单面包屑导航支持多层级显示</li>
                <li>Excel注解支持wrapText是否允许内容换行</li>
                <li>代码生成新增配置是否允许文件覆盖到本地</li>
                <li>修复角色禁用权限不失效问题</li>
                <li>修复代码生成上级菜单显示问题</li>
                <li>修复导出子列表对象只能在最后的问题</li>
                <li>修复TopNav无法正确获取active的问题</li>
                <li>修复默认关闭Tags-Views内链页面打不开</li>
                <li>升级oshi到最新版本6.6.5</li>
                <li>升级tomcat到最新版本9.0.96</li>
                <li>升级fastjson到最新版2.0.53</li>
                <li>升级logback到最新版本1.2.13</li>
                <li>升级spring-framework到最新版本5.3.39</li>
                <li>升级quill到最新版本2.0.2</li>
                <li>升级axios到最新版本0.28.1</li>
                <li>优化身份证脱敏正则</li>
                <li>优化权限更新后同步缓存</li>
                <li>优化查询时间范围日期格式</li>
                <li>优化参数键值更换为多行文本</li>
                <li>优化导入带标题文件关闭清理</li>
                <li>优化上传图片带域名不增加前缀</li>
                <li>优化特殊字符密码修改失败问题</li>
                <li>优化无用户编号不校验数据权限</li>
                <li>优化TopNav内链菜单点击没有高亮</li>
                <li>优化菜单管理切换Mini布局错乱问题</li>
                <li>其他细节优化</li>
              </ol>
            </el-collapse-item>
            <el-collapse-item title="v3.8.8 - 2024-06-30">
              <ol>
                <li>菜单管理新增路由名称</li>
                <li>新增数据脱敏过滤注解</li>
                <li>用户密码新增非法字符验证</li>
                <li>限制用户操作数据权限范围</li>
                <li>代码生成新增创建表结构功能</li>
                <li>定时任务白名单配置范围缩小</li>
                <li>优化代码生成主子表关联查询方式</li>
                <li>Excel注解新增属性comboReadDict</li>
                <li>Excel注解ColumnType类型新增文本</li>
                <li>新增国际化资源文件配置</li>
                <li>升级oshi到最新版本6.6.1</li>
                <li>升级druid到最新版本1.2.23</li>
                <li>升级core-js到最新版本3.37.1</li>
                <li>更新HttpUtils中的User-Agent</li>
                <li>更新compressionPlugin到6.1.2以兼容node18+</li>
                <li>升级spring-security到安全版本，防止漏洞风险</li>
                <li>升级spring-framework到安全版本，防止漏洞风险</li>
                <li>优化自定义XSS注解匹配方式</li>
                <li>优化缓存监控键名列表排序显示</li>
                <li>优化定时任务日志默认按时间排序</li>
                <li>优化默认文件大小超过2G无效的问题</li>
                <li>优化查表特殊字符使用反斜杠进行转义</li>
                <li>优化定时任务cron表达式小时配置显示错误问题</li>
                <li>优化多个自定数据权限使用in查询,避免多次拼接</li>
                <li>优化导入Excel时设置dictType属性重复查缓存问题</li>
                <li>其他细节优化</li>
              </ol>
            </el-collapse-item>
            <el-collapse-item title="v3.8.7 - 2023-12-08">
              <ol>
                <li>操作日志记录部门名称</li>
                <li>全局数据存储用户编号</li>
                <li>新增编程式判断资源访问权限</li>
                <li>操作日志列表新增IP地址查询</li>
                <li>定时任务新增页去除状态选项</li>
                <li>代码生成支持选择前端模板类型</li>
                <li>显隐列组件支持复选框弹出类型</li>
                <li>通用排序属性orderBy参数限制长度</li>
                <li>Excel自定义数据处理器增加单元格/工作簿对象</li>
                <li>升级oshi到最新版本6.4.8</li>
                <li>升级druid到最新版本1.2.20</li>
                <li>升级fastjson到最新版2.0.43</li>
                <li>升级pagehelper到最新版1.4.7</li>
                <li>升级commons.io到最新版本2.13.0</li>
                <li>升级element-ui到最新版本2.15.14</li>
                <li>修复五级路由缓存无效问题</li>
                <li>修复外链带端口出现的异常</li>
                <li>修复树模板父级编码变量错误</li>
                <li>修复字典表详情页面搜索问题</li>
                <li>修复内链iframe没有传递参数问题</li>
                <li>修复自定义字典样式不生效的问题</li>
                <li>修复字典缓存删除方法参数错误问题</li>
                <li>修复Excel导入数据临时文件无法删除问题</li>
                <li>修复未登录带参数访问成功后参数丢失问题</li>
                <li>修复HeaderSearch组件跳转query参数丢失问题</li>
                <li>修复代码生成导入后必填项与数据库不匹配问题</li>
                <li>修复Excels导入时无法获取到dictType字典值问题</li>
                <li>优化下载zip方法新增遮罩层</li>
                <li>优化头像上传参数新增文件名称</li>
                <li>优化字典标签支持自定义分隔符</li>
                <li>优化菜单管理类型为按钮状态可选</li>
                <li>优化前端防重复提交数据大小限制</li>
                <li>优化TopNav菜单没有图标svg不显示</li>
                <li>优化数字金额大写转换精度丢失问题</li>
                <li>优化富文本Editor组件检验图片格式</li>
                <li>优化页签在Firefox浏览器被遮挡的问题</li>
                <li>优化个人中心/基本资料修改时数据显示问题</li>
                <li>优化缓存监控图表支持跟随屏幕大小自适应调整</li>
                <li>其他细节优化</li>
              </ol>
            </el-collapse-item>
            <el-collapse-item title="v3.8.6 - 2023-06-30">
              <ol>
                <li>支持登录IP黑名单限制</li>
                <li>新增监控页面图标显示</li>
                <li>操作日志新增消耗时间属性</li>
                <li>屏蔽定时任务bean违规的字符</li>
                <li>日志管理使用索引提升查询性能</li>
                <li>日志注解支持排除指定的请求参数</li>
                <li>支持自定义隐藏属性列过滤子对象</li>
                <li>升级oshi到最新版本6.4.3</li>
                <li>升级druid到最新版本1.2.16</li>
                <li>升级fastjson到最新版2.0.34</li>
                <li>升级spring-boot到最新版本2.5.15</li>
                <li>升级element-ui到最新版本2.15.13</li>
                <li>移除apache/commons-fileupload依赖</li>
                <li>修复页面切换时布局错乱的问题</li>
                <li>修复匿名注解Anonymous空指针问题</li>
                <li>修复路由跳转被阻止时内部产生报错信息问题</li>
                <li>修复isMatchedIp的参数判断产生空指针的问题</li>
                <li>修复用户多角色数据权限可能出现权限抬升的情况</li>
                <li>修复开启TopNav后一级菜单路由参数设置无效问题</li>
                <li>修复DictTag组件value没有匹配的值时则展示value</li>
                <li>优化文件下载出现的异常</li>
                <li>优化选择图标组件高亮回显</li>
                <li>优化弹窗后导航栏偏移的问题</li>
                <li>优化修改密码日志存储明文问题</li>
                <li>优化页签栏关闭其他出现的异常问题</li>
                <li>优化页签关闭左侧选项排除首页选项</li>
                <li>优化关闭当前tab页跳转最右侧tab页</li>
                <li>优化缓存列表清除操作提示不变的问题</li>
                <li>优化字符未使用下划线不进行驼峰式处理</li>
                <li>优化用户导入更新时需获取用户编号问题</li>
                <li>优化侧边栏的平台标题与VUE_APP_TITLE保持同步</li>
                <li>优化导出Excel时设置dictType属性重复查缓存问题</li>
                <li>连接池Druid支持新的配置connectTimeout和socketTimeout</li>
                <li>其他细节优化</li>
              </ol>
            </el-collapse-item>
            <el-collapse-item title="v3.8.5 - 2023-01-01">
              <ol>
                <li>定时任务违规的字符</li>
                <li>重置时取消部门选中</li>
                <li>新增返回警告消息提示</li>
                <li>忽略不必要的属性数据返回</li>
                <li>修改参数键名时移除前缓存配置</li>
                <li>导入更新用户数据前校验数据权限</li>
                <li>兼容Excel下拉框内容过多无法显示的问题</li>
                <li>升级echarts到最新版本5.4.0</li>
                <li>升级core-js到最新版本3.25.3</li>
                <li>升级oshi到最新版本6.4.0</li>
                <li>升级kaptcha到最新版2.3.3</li>
                <li>升级druid到最新版本1.2.15</li>
                <li>升级fastjson到最新版2.0.20</li>
                <li>升级pagehelper到最新版1.4.6</li>
                <li>优化弹窗内容过多展示不全问题</li>
                <li>优化swagger-ui静态资源使用缓存</li>
                <li>开启TopNav没有子菜单隐藏侧边栏</li>
                <li>删除fuse无效选项maxPatternLength</li>
                <li>优化导出对象的子列表为空会出现[]问题</li>
                <li>优化编辑头像时透明部分会变成黑色问题</li>
                <li>优化小屏幕上修改头像界面布局错位的问题</li>
                <li>修复代码生成勾选属性无效问题</li>
                <li>修复文件上传组件格式验证问题</li>
                <li>修复回显数据字典数组异常问题</li>
                <li>修复sheet超出最大行数异常问题</li>
                <li>修复Log注解GET请求记录不到参数问题</li>
                <li>修复调度日志点击多次数据不变化的问题</li>
                <li>修复主题颜色在Drawer组件不会加载问题</li>
                <li>修复文件名包含特殊字符的文件无法下载问题</li>
                <li>修复table中更多按钮切换主题色未生效修复问题</li>
                <li>修复某些特性的环境生成代码变乱码TXT文件问题</li>
                <li>修复代码生成图片/文件/单选时选择必填无法校验问题</li>
                <li>修复某些特性的情况用户编辑对话框中角色和部门无法修改问题</li>
                <li>其他细节优化</li>
              </ol>
            </el-collapse-item>
            <el-collapse-item title="v3.8.4 - 2022-09-26">
              <ol>
                <li>数据逻辑删除不进行唯一验证</li>
                <li>Excel注解支持导出对象的子列表方法</li>
                <li>Excel注解支持自定义隐藏属性列</li>
                <li>Excel注解支持backgroundColor属性设置背景色</li>
                <li>支持配置密码最大错误次数/锁定时间</li>
                <li>登录日志新增解锁账户功能</li>
                <li>通用下载方法新增config配置选项</li>
                <li>支持多权限字符匹配角色数据权限</li>
                <li>页面内嵌iframe切换tab不刷新数据</li>
                <li>操作日志记录支持排除敏感属性字段</li>
                <li>修复多文件上传报错出现的异常问题</li>
                <li>修复图片预览组件src属性为null值控制台报错问题</li>
                <li>升级oshi到最新版本6.2.2</li>
                <li>升级fastjson到最新版2.0.14</li>
                <li>升级pagehelper到最新版1.4.3</li>
                <li>升级core-js到最新版本3.25.2</li>
                <li>升级element-ui到最新版本2.15.10</li>
                <li>优化任务过期不执行调度</li>
                <li>优化字典数据使用store存取</li>
                <li>优化修改资料头像被覆盖的问题</li>
                <li>优化修改用户登录账号重复验证</li>
                <li>优化代码生成同步后值NULL问题</li>
                <li>优化定时任务支持执行父类方法</li>
                <li>优化用户个人信息接口防止修改部门</li>
                <li>优化布局设置使用el-drawer抽屉显示</li>
                <li>优化没有权限的用户编辑部门缺少数据</li>
                <li>优化日志注解记录限制请求地址的长度</li>
                <li>优化excel/scale属性导出单元格数值类型</li>
                <li>优化日志操作中重置按钮时重复查询的问题</li>
                <li>优化多个相同角色数据导致权限SQL重复问题</li>
                <li>优化表格上右侧工具条（搜索按钮显隐&右侧样式凸出）</li>
                <li>其他细节优化</li>
              </ol>
            </el-collapse-item>
            <el-collapse-item title="v3.8.3 - 2022-06-27">
              <ol>
                <li>新增缓存列表菜单功能</li>
                <li>代码生成树表新增(展开/折叠)</li>
                <li>Excel注解支持color字体颜色</li>
                <li>新增Anonymous匿名访问不鉴权注解</li>
                <li>用户头像上传限制只能为图片格式</li>
                <li>接口使用泛型使其看到响应属性字段</li>
                <li>检查定时任务bean所在包名是否为白名单配置</li>
                <li>添加页签openPage支持传递参数</li>
                <li>用户缓存信息添加部门ancestors祖级列表</li>
                <li>升级element-ui到最新版本2.15.8</li>
                <li>升级oshi到最新版本6.1.6</li>
                <li>升级druid到最新版本1.2.11</li>
                <li>升级fastjson到最新版2.0.8</li>
                <li>升级spring-boot到最新版本2.5.14</li>
                <li>降级jsencrypt版本兼容IE浏览器</li>
                <li>删除多余的salt字段</li>
                <li>新增获取不带后缀文件名称方法</li>
                <li>新增获取配置文件中的属性值方法</li>
                <li>新增内容编码/解码方便插件集成使用</li>
                <li>字典类型必须以字母开头，且只能为（小写字母，数字，下滑线）</li>
                <li>优化设置分页参数默认值</li>
                <li>优化对空字符串参数处理的过滤</li>
                <li>优化显示顺序orderNum类型为整型</li>
                <li>优化表单构建按钮不显示正则校验</li>
                <li>优化字典数据回显样式下拉框显示值</li>
                <li>优化R响应成功状态码与全局保持一致</li>
                <li>优化druid开启wall过滤器出现的异常问题</li>
                <li>优化用户管理左侧树型组件增加选中高亮保持</li>
                <li>优化新增用户与角色信息&用户与岗位信息逻辑</li>
                <li>优化默认不启用压缩文件缓存防止node_modules过大</li>
                <li>修复字典数据显示不全问题</li>
                <li>修复操作日志查询类型条件为0时会查到所有数据</li>
                <li>修复Excel注解prompt/combo同时使用不生效问题</li>
                <li>其他细节优化</li>
              </ol>
            </el-collapse-item>
            <el-collapse-item title="v3.8.2 - 2022-04-01">
              <ol>
                <li>前端支持设置是否需要防止数据重复提交</li>
                <li>开启TopNav没有子菜单情况隐藏侧边栏</li>
                <li>侧边栏菜单名称过长悬停显示标题</li>
                <li>用户访问控制时校验数据权限，防止越权</li>
                <li>导出Excel时屏蔽公式，防止CSV注入风险</li>
                <li>组件ImagePreview支持多图预览显示</li>
                <li>组件ImageUpload支持多图同时选择上传</li>
                <li>组件FileUpload支持多文件同时选择上传</li>
                <li>服务监控新增运行参数信息显示</li>
                <li>定时任务目标字符串过滤特殊字符</li>
                <li>定时任务目标字符串验证包名白名单</li>
                <li>代码生成列表图片支持预览</li>
                <li>代码生成编辑修改打开新页签</li>
                <li>代码生成新增Java类型Boolean</li>
                <li>代码生成子表支持日期/字典配置</li>
                <li>代码生成同步保留必填/类型选项</li>
                <li>升级oshi到最新版本6.1.2</li>
                <li>升级fastjson到最新版1.2.80</li>
                <li>升级pagehelper到最新版1.4.1</li>
                <li>升级spring-boot到最新版本2.5.11</li>
                <li>升级spring-boot-mybatis到最新版2.2.2</li>
                <li>添加遗漏的分页参数合理化属性</li>
                <li>修改npm即将过期的注册源地址</li>
                <li>修复分页组件请求两次问题</li>
                <li>修复通用文件下载接口跨域问题</li>
                <li>修复Xss注解字段值为空时的异常问题</li>
                <li>修复选项卡点击右键刷新丢失参数问题</li>
                <li>修复表单清除元素位置未垂直居中问题</li>
                <li>修复服务监控中运行参数显示条件错误</li>
                <li>修复导入Excel时字典字段类型为Long转义为空问题</li>
                <li>修复登录超时刷新页面跳转登录页面还提示重新登录问题</li>
                <li>优化加载字典缓存数据</li>
                <li>优化IP地址获取到多个的问题</li>
                <li>优化任务队列满时任务拒绝策略</li>
                <li>优化文件上传兼容Weblogic环境</li>
                <li>优化定时任务默认保存到内存中执行</li>
                <li>优化部门修改缩放后出现的错位问题</li>
                <li>优化Excel格式化不同类型的日期对象</li>
                <li>优化菜单表关键字导致的插件报错问题</li>
                <li>优化Oracle用户头像列为空时不显示问题</li>
                <li>优化页面若未匹配到字典标签则返回原字典值</li>
                <li>优化修复登录失效后多次请求提示多次弹窗问题</li>
                <li>其他细节优化</li>
              </ol>
            </el-collapse-item>
            <el-collapse-item title="v3.8.1 - 2022-01-01">
              <ol>
                <li>新增Vue3前端代码生成模板</li>
                <li>新增图片预览组件</li>
                <li>新增压缩插件实现打包Gzip</li>
                <li>自定义xss校验注解实现</li>
                <li>自定义文字复制剪贴指令</li>
                <li>代码生成预览支持复制内容</li>
                <li>路由支持单独配置菜单或角色权限</li>
                <li>用户管理部门查询选择节点后分页参数初始</li>
                <li>修复用户分配角色属性错误</li>
                <li>修复打包后字体图标偶现的乱码问题</li>
                <li>修复菜单管理重置表单出现的错误</li>
                <li>修复版本差异导致的懒加载报错问题</li>
                <li>修复Cron组件中周回显问题</li>
                <li>修复定时任务多参数逗号分隔的问题</li>
                <li>修复根据ID查询列表可能出现的主键溢出问题</li>
                <li>修复tomcat配置参数已过期问题</li>
                <li>升级clipboard到最新版本2.0.8</li>
                <li>升级oshi到最新版本v5.8.6</li>
                <li>升级fastjson到最新版1.2.79</li>
                <li>升级spring-boot到最新版本2.5.8</li>
                <li>升级log4j2到2.17.1，防止漏洞风险</li>
                <li>优化下载解析blob异常提示</li>
                <li>优化代码生成字典组重复问题</li>
                <li>优化查询用户的角色组&岗位组代码</li>
                <li>优化定时任务cron表达式小时设置24</li>
                <li>优化用户导入提示溢出则显示滚动条</li>
                <li>优化防重复提交标识组合为(key+url+header)</li>
                <li>优化分页方法设置成通用方便灵活调用</li>
                <li>其他细节优化</li>
              </ol>
            </el-collapse-item>
            <el-collapse-item title="v3.8.0 - 2021-12-01">
              <ol>
                <li>新增配套并同步的Vue3前端版本</li>
                <li>新增通用方法简化模态/缓存/下载/权限/页签使用</li>
                <li>优化导出数据/使用通用下载方法</li>
                <li>Excel注解支持自定义数据处理器</li>
                <li>Excel注解支持导入导出标题信息</li>
                <li>Excel导入支持@Excels注解</li>
                <li>新增组件data-dict，简化数据字典使用</li>
                <li>新增Jaxb依赖，防止jdk8以上出现的兼容错误</li>
                <li>生产环境使用路由懒加载提升页面响应速度</li>
                <li>修复五级以上菜单出现的404问题</li>
                <li>防重提交注解支持配置间隔时间/提示消息</li>
                <li>日志注解新增是否保存响应参数</li>
                <li>任务屏蔽违规字符&参数忽略双引号中的逗号</li>
                <li>升级SpringBoot到最新版本2.5.6</li>
                <li>升级pagehelper到最新版1.4.0</li>
                <li>升级spring-boot-mybatis到最新版2.2.0</li>
                <li>升级oshi到最新版本v5.8.2</li>
                <li>升级druid到最新版1.2.8</li>
                <li>升级velocity到最新版本2.3</li>
                <li>升级fastjson到最新版1.2.78</li>
                <li>升级axios到最新版本0.24.0</li>
                <li>升级dart-sass到版本1.32.13</li>
                <li>升级core-js到最新版本3.19.1</li>
                <li>升级jsencrypt到最新版本3.2.1</li>
                <li>升级js-cookie到最新版本3.0.1</li>
                <li>升级file-saver到最新版本2.0.5</li>
                <li>升级sass-loader到最新版本10.1.1</li>
                <li>升级element-ui到最新版本2.15.6</li>
                <li>新增sendGet无参请求方法</li>
                <li>禁用el-tag组件的渐变动画</li>
                <li>代码生成点击预览重置激活tab</li>
                <li>AjaxResult重写put方法，以方便链式调用</li>
                <li>优化登录/验证码请求headers不设置token</li>
                <li>优化用户个人信息接口防止修改用户名</li>
                <li>优化Cron表达式生成器关闭时销毁避免缓存</li>
                <li>优化注册成功提示消息类型success</li>
                <li>优化aop语法，使用spring自动注入注解</li>
                <li>优化记录登录信息，移除不必要的修改</li>
                <li>优化mybatis全局默认的执行器</li>
                <li>优化Excel导入图片可能出现的异常</li>
                <li>修复代码生成模板主子表删除缺少事务</li>
                <li>修复日志记录可能出现的转换异常</li>
                <li>修复代码生成复选框字典遗漏问题</li>
                <li>修复关闭xss功能导致可重复读RepeatableFilter失效</li>
                <li>修复字符串无法被反转义问题</li>
                <li>修复后端主子表代码模板方法名生成错误问题</li>
                <li>修复xss过滤后格式出现的异常</li>
                <li>修复swagger没有指定dataTypeClass导致启动出现warn日志</li>
                <li>其他细节优化</li>
              </ol>
            </el-collapse-item>
            <el-collapse-item title="v3.7.0 - 2021-09-13">
              <ol>
                <li>参数管理支持配置验证码开关</li>
                <li>新增是否开启用户注册功能</li>
                <li>定时任务支持在线生成cron表达式</li>
                <li>菜单管理支持配置路由参数</li>
                <li>支持自定义注解实现接口限流</li>
                <li>Excel注解支持Image图片导入</li>
                <li>自定义弹层溢出滚动样式</li>
                <li>自定义可拖动弹窗宽度指令</li>
                <li>自定义可拖动弹窗高度指令</li>
                <li>修复任意账户越权问题</li>
                <li>修改时检查用户数据权限范围</li>
                <li>修复保存配置主题颜色失效问题</li>
                <li>新增暗色菜单风格主题</li>
                <li>菜单&部门新增展开/折叠功能</li>
                <li>页签新增关闭左侧&添加图标</li>
                <li>顶部菜单排除隐藏的默认路由</li>
                <li>顶部菜单同步系统主题样式</li>
                <li>跳转路由高亮相对应的菜单栏</li>
                <li>代码生成主子表多选行数据</li>
                <li>日期范围支持添加多组</li>
                <li>升级element-ui到最新版本2.15.5</li>
                <li>升级oshi到最新版本v5.8.0</li>
                <li>升级commons.io到最新版本v2.11.0</li>
                <li>定时任务屏蔽ldap远程调用</li>
                <li>定时任务屏蔽http(s)远程调用</li>
                <li>补充定时任务表字段注释</li>
                <li>定时任务对检查异常进行事务回滚</li>
                <li>启用父部门状态排除顶级节点</li>
                <li>富文本新增上传文件大小限制</li>
                <li>默认首页使用keep-alive缓存</li>
                <li>修改代码生成字典回显样式</li>
                <li>自定义分页合理化传入参数</li>
                <li>修复字典组件值为整形不显示问题</li>
                <li>修复定时任务日志执行状态显示</li>
                <li>角色&菜单新增字段属性提示信息</li>
                <li>修复角色分配用户页面参数类型错误提醒</li>
                <li>优化布局设置动画特效</li>
                <li>优化异常处理信息</li>
                <li>优化错误token导致的解析异常</li>
                <li>密码框新增显示切换密码图标</li>
                <li>定时任务新增更多操作</li>
                <li>更多操作按钮添加权限控制</li>
                <li>导入用户样式优化</li>
                <li>提取通用方法到基类控制器</li>
                <li>优化使用权限工具获取用户信息</li>
                <li>优化用户不能删除自己</li>
                <li>优化XSS跨站脚本过滤</li>
                <li>优化代码生成模板</li>
                <li>验证码默认20s超时</li>
                <li>BLOB下载时清除URL对象引用</li>
                <li>代码生成导入表按创建时间排序</li>
                <li>修复代码生成页面数据编辑保存之后总是跳转第一页的问题</li>
                <li>修复带safari浏览器无法格式化utc日期格式yyyy-MM-dd'T'HH:mm:ss.SSS问题</li>
                <li>多图上传组件移除多余的api地址&验证失败导致图片删除问题&无法删除相应图片修复</li>
                <li>其他细节优化</li>
              </ol>
            </el-collapse-item>
            <el-collapse-item title="v3.6.0 - 2021-07-12">
              <ol>
                <li>角色管理新增分配用户功能</li>
                <li>用户管理新增分配角色功能</li>
                <li>日志列表支持排序操作</li>
                <li>优化参数&字典缓存操作</li>
                <li>系统布局配置支持动态标题开关</li>
                <li>菜单路由配置支持内链访问</li>
                <li>默认访问后端首页新增提示语</li>
                <li>富文本默认上传返回url类型</li>
                <li>新增自定义弹窗拖拽指令</li>
                <li>全局注册常用通用组件</li>
                <li>全局挂载字典标签组件</li>
                <li>ImageUpload组件支持多图片上传</li>
                <li>FileUpload组件支持多文件上传</li>
                <li>文件上传组件添加数量限制属性</li>
                <li>富文本编辑组件添加类型属性</li>
                <li>富文本组件工具栏配置视频</li>
                <li>封装通用iframe组件</li>
                <li>限制超级管理员不允许操作</li>
                <li>用户信息长度校验限制</li>
                <li>分页组件新增pagerCount属性</li>
                <li>添加bat脚本执行应用</li>
                <li>升级oshi到最新版本v5.7.4</li>
                <li>升级element-ui到最新版本2.15.2</li>
                <li>升级pagehelper到最新版1.3.1</li>
                <li>升级commons.io到最新版本v2.10.0</li>
                <li>升级commons.fileupload到最新版本v1.4</li>
                <li>升级swagger到最新版本v3.0.0</li>
                <li>修复关闭confirm提示框控制台报错问题</li>
                <li>修复存在的SQL注入漏洞问题</li>
                <li>定时任务屏蔽rmi远程调用</li>
                <li>修复用户搜索分页变量错误</li>
                <li>修复导出角色数据范围翻译缺少仅本人</li>
                <li>修复表单构建选择下拉选择控制台报错问题</li>
                <li>优化图片工具类读取文件</li>
                <li>其他细节优化</li>
              </ol>
            </el-collapse-item>
            <el-collapse-item title="v3.5.0 - 2021-05-25">
              <ol>
                <li>新增菜单导航显示风格TopNav（false为左侧导航菜单，true为顶部导航菜单）</li>
                <li>布局设置支持保存&重置配置</li>
                <li>修复树表数据显示不全&加载慢问题</li>
                <li>新增IE浏览器版本过低提示页面</li>
                <li>用户登录后记录最后登录IP&时间</li>
                <li>页面导出按钮点击之后添加遮罩</li>
                <li>富文本编辑器支持自定义上传地址</li>
                <li>富文本编辑组件新增readOnly属性</li>
                <li>页签TagsView新增关闭右侧功能</li>
                <li>显隐列组件加载初始默认隐藏列</li>
                <li>关闭头像上传窗口还原默认图片</li>
                <li>个人信息添加手机&邮箱重复验证</li>
                <li>代码生成模板导出按钮点击后添加遮罩</li>
                <li>代码生成模板树表操作列添加新增按钮</li>
                <li>代码生成模板修复主子表字段重名问题</li>
                <li>升级fastjson到最新版1.2.76</li>
                <li>升级druid到最新版本v1.2.6</li>
                <li>升级mybatis到最新版3.5.6 阻止远程代码执行漏洞</li>
                <li>升级oshi到最新版本v5.6.0</li>
                <li>velocity剔除commons-collections版本，防止3.2.1版本的反序列化漏洞</li>
                <li>数据监控页默认账户密码防止越权访问</li>
                <li>修复firefox下表单构建拖拽会新打卡一个选项卡</li>
                <li>修正后端导入表权限标识</li>
                <li>修正前端操作日志&登录日志权限标识</li>
                <li>设置Redis配置HashKey序列化</li>
                <li>删除操作日志记录信息</li>
                <li>上传媒体类型添加视频格式</li>
                <li>修复请求形参未传值记录日志异常问题</li>
                <li>优化xss校验json请求条件</li>
                <li>树级结构更新子节点使用replaceFirst</li>
                <li>优化ExcelUtil空值处理</li>
                <li>日志记录过滤BindingResult对象，防止异常</li>
                <li>修改主题后mini类型按钮无效问题</li>
                <li>优化通用下载完成后删除节点</li>
                <li>通用Controller添加响应返回消息</li>
                <li>其他细节优化</li>
              </ol>
            </el-collapse-item>
            <el-collapse-item title="v3.4.0 - 2021-02-22">
              <ol>
                <li>代码生成模板支持主子表</li>
                <li>表格右侧工具栏组件支持显隐列</li>
                <li>图片组件添加预览&移除功能</li>
                <li>Excel注解支持Image图片导出</li>
                <li>操作按钮组调整为朴素按钮样式</li>
                <li>代码生成支持文件上传组件</li>
                <li>代码生成日期控件区分范围</li>
                <li>代码生成数据库文本类型生成表单文本域</li>
                <li>用户手机邮箱&菜单组件修改允许空字符串</li>
                <li>升级SpringBoot到最新版本2.2.13 提升启动速度</li>
                <li>升级druid到最新版本v1.2.4</li>
                <li>升级fastjson到最新版1.2.75</li>
                <li>升级element-ui到最新版本2.15.0</li>
                <li>修复IE11浏览器报错问题</li>
                <li>优化多级菜单之间切换无法缓存的问题</li>
                <li>修复四级菜单无法显示问题</li>
                <li>修正侧边栏静态路由丢失问题</li>
                <li>修复角色管理-编辑角色-功能权限显示异常</li>
                <li>配置文件新增redis数据库索引属性</li>
                <li>权限工具类增加admin判断</li>
                <li>角色非自定义权限范围清空选择值</li>
                <li>修复导入数据为负浮点数时丢失精度问题</li>
                <li>移除path-to-regexp正则匹配插件</li>
                <li>修复生成树表代码异常</li>
                <li>修改ip字段长度防止ipv6地址长度不够</li>
                <li>防止get请求参数值为false或0等特殊值会导致无法正确的传参</li>
                <li>登录后push添加catch防止出现检查错误</li>
                <li>其他细节优化</li>
              </ol>
            </el-collapse-item>
            <el-collapse-item title="v3.3.0 - 2020-12-14">
              <ol>
                <li>新增缓存监控功能</li>
                <li>支持主题风格配置</li>
                <li>修复多级菜单之间切换无法缓存的问题</li>
                <li>多级菜单自动配置组件</li>
                <li>代码生成预览支持高亮显示</li>
                <li>支持Get请求映射Params参数</li>
                <li>删除用户和角色解绑关联</li>
                <li>去除用户手机邮箱部门必填验证</li>
                <li>Excel支持注解align对齐方式</li>
                <li>Excel支持导入Boolean型数据</li>
                <li>优化头像样式，鼠标移入悬停遮罩</li>
                <li>代码生成预览提供滚动机制</li>
                <li>代码生成删除多余的数字float类型</li>
                <li>修正转换字符串的目标字符集属性</li>
                <li>回显数据字典防止空值报错</li>
                <li>日志记录增加过滤多文件场景</li>
                <li>修改缓存Set方法可能导致嵌套的问题</li>
                <li>移除前端一些多余的依赖</li>
                <li>防止安全扫描YUI出现的风险提示</li>
                <li>修改node-sass为dart-sass</li>
                <li>升级SpringBoot到最新版本2.1.18</li>
                <li>升级poi到最新版本4.1.2</li>
                <li>升级oshi到最新版本v5.3.6</li>
                <li>升级bitwalker到最新版本1.21</li>
                <li>升级axios到最新版本0.21.0</li>
                <li>升级element-ui到最新版本2.14.1</li>
                <li>升级vue到最新版本2.6.12</li>
                <li>升级vuex到最新版本3.6.0</li>
                <li>升级vue-cli到版本4.5.9</li>
                <li>升级vue-router到最新版本3.4.9</li>
                <li>升级vue-cli到最新版本4.4.6</li>
                <li>升级vue-cropper到最新版本0.5.5</li>
                <li>升级clipboard到最新版本2.0.6</li>
                <li>升级core-js到最新版本3.8.1</li>
                <li>升级echarts到最新版本4.9.0</li>
                <li>升级file-saver到最新版本2.0.4</li>
                <li>升级fuse.js到最新版本6.4.3</li>
                <li>升级js-beautify到最新版本1.13.0</li>
                <li>升级js-cookie到最新版本2.2.1</li>
                <li>升级path-to-regexp到最新版本6.2.0</li>
                <li>升级quill到最新版本1.3.7</li>
                <li>升级screenfull到最新版本5.0.2</li>
                <li>升级sortablejs到最新版本1.10.2</li>
                <li>升级vuedraggable到最新版本2.24.3</li>
                <li>升级chalk到最新版本4.1.0</li>
                <li>升级eslint到最新版本7.15.0</li>
                <li>升级eslint-plugin-vue到最新版本7.2.0</li>
                <li>升级lint-staged到最新版本10.5.3</li>
                <li>升级runjs到最新版本4.4.2</li>
                <li>升级sass-loader到最新版本10.1.0</li>
                <li>升级script-ext-html-webpack-plugin到最新版本2.1.5</li>
                <li>升级svg-sprite-loader到最新版本5.1.1</li>
                <li>升级vue-template-compiler到最新版本2.6.12</li>
                <li>其他细节优化</li>
              </ol>
            </el-collapse-item>
            <el-collapse-item title="v3.2.1 - 2020-11-18">
              <ol>
                <li>阻止任意文件下载漏洞</li>
                <li>代码生成支持上传控件</li>
                <li>新增图片上传组件</li>
                <li>调整默认首页</li>
                <li>升级druid到最新版本v1.2.2</li>
                <li>mapperLocations配置支持分隔符</li>
                <li>权限信息调整</li>
                <li>调整sql默认时间</li>
                <li>解决代码生成没有bit类型的问题</li>
                <li>升级pagehelper到最新版1.3.0</li>
              </ol>
            </el-collapse-item>
            <el-collapse-item title="v3.2.0 - 2020-10-10">
              <ol>
                <li>升级springboot版本到2.1.17 提升安全性</li>
                <li>升级oshi到最新版本v5.2.5</li>
                <li>升级druid到最新版本v1.2.1</li>
                <li>升级jjwt到版本0.9.1</li>
                <li>升级fastjson到最新版1.2.74</li>
                <li>修改sass为node-sass，避免el-icon图标乱码</li>
                <li>代码生成支持同步数据库</li>
                <li>代码生成支持富文本控件</li>
                <li>代码生成页面时不忽略remark属性</li>
                <li>代码生成添加select必填选项</li>
                <li>Excel导出类型NUMERIC支持精度浮点类型</li>
                <li>Excel导出targetAttr优化获取值，防止get方法不规范</li>
                <li>Excel注解支持自动统计数据总和</li>
                <li>Excel注解支持设置BigDecimal精度&舍入规则</li>
                <li>菜单&数据权限新增（展开/折叠 全选/全不选 父子联动）</li>
                <li>允许用户分配到部门父节点</li>
                <li>菜单新增是否缓存keep-alive</li>
                <li>表格操作列间距调整</li>
                <li>限制系统内置参数不允许删除</li>
                <li>富文本组件优化，支持自定义高度&图片冲突问题</li>
                <li>富文本工具栏样式对齐</li>
                <li>导入excel整形值校验优化</li>
                <li>修复页签关闭所有时固定标签路由不刷新问题</li>
                <li>表单构建布局型组件新增按钮</li>
                <li>左侧菜单文字过长显示省略号</li>
                <li>修正根节点为子部门时，树状结构显示问题</li>
                <li>修正调用目标字符串最大长度</li>
                <li>修正菜单提示信息错误</li>
                <li>修正定时任务执行一次权限标识</li>
                <li>修正数据库字符串类型nvarchar</li>
                <li>优化递归子节点</li>
                <li>优化数据权限判断</li>
                <li>其他细节优化</li>
              </ol>
            </el-collapse-item>

            <el-collapse-item title="v3.1.0 - 2020-08-13">
              <ol>
                <li>表格工具栏右侧添加刷新&显隐查询组件</li>
                <li>后端支持CORS跨域请求</li>
                <li>代码生成支持选择上级菜单</li>
                <li>代码生成支持自定义路径</li>
                <li>代码生成支持复选框</li>
                <li>Excel导出导入支持dictType字典类型</li>
                <li>Excel支持分割字符串组内容</li>
                <li>验证码类型支持（数组计算、字符验证）</li>
                <li>升级vue-cli版本到4.4.4</li>
                <li>修改 node-sass 为 dart-sass</li>
                <li>表单类型为Integer/Long设置整形默认值</li>
                <li>代码生成器默认mapper路径与默认mapperScan路径不一致</li>
                <li>优化防重复提交拦截器</li>
                <li>优化上级菜单不能选择自己</li>
                <li>修复角色的权限分配后，未实时生效问题</li>
                <li>修复在线用户日志记录类型</li>
                <li>修复富文本空格和缩进保存后不生效问题</li>
                <li>修复在线用户判断逻辑</li>
                <li>唯一限制条件只返回单条数据</li>
                <li>添加获取当前的环境配置方法</li>
                <li>超时登录后页面跳转到首页</li>
                <li>全局异常状态汉化拦截处理</li>
                <li>HTML过滤器改为将html转义</li>
                <li>检查字符支持小数点&降级改成异常提醒</li>
                <li>其他细节优化</li>
              </ol>
            </el-collapse-item>

            <el-collapse-item title="v3.0.0 - 2020-07-20">
              <ol>
                <li>单应用调整为多模块项目</li>
                <li>升级element-ui版本到2.13.2</li>
                <li>删除babel，提高编译速度。</li>
                <li>新增菜单默认主类目</li>
                <li>编码文件名修改为uuid方式</li>
                <li>定时任务cron表达式验证</li>
                <li>角色权限修改时已有权限未自动勾选异常修复</li>
                <li>防止切换权限用户后登录出现404</li>
                <li>Excel支持sort导出排序</li>
                <li>创建用户不允许选择超级管理员角色</li>
                <li>修复代码生成导入表结构出现异常页面不提醒问题</li>
                <li>修复代码生成点击多次表修改数据不变化的问题</li>
                <li>修复头像上传成功二次打开无法改变裁剪框大小和位置问题</li>
                <li>修复布局为small者mini用户表单显示错位问题</li>
                <li>修复热部署导致的强换异常问题</li>
                <li>修改用户管理复选框宽度，防止部分浏览器出现省略号</li>
                <li>IpUtils工具，清除Xss特殊字符，防止Xff注入攻击</li>
                <li>生成domain 如果是浮点型 统一用BigDecimal</li>
                <li>定时任务调整label-width，防止部署出现错位</li>
                <li>调整表头固定列默认样式</li>
                <li>代码生成模板调整，字段为String并且必填则加空串条件</li>
                <li>代码生成字典Integer/Long使用parseInt</li>
                <li>
                  修复dict_sort不可update为0的问题&查询返回增加dict_sort升序排序
                </li>
                <li>修正岗位导出权限注解</li>
                <li>禁止加密密文返回前端</li>
                <li>修复代码生成页面中的查询条件创建时间未生效的问题</li>
                <li>修复首页搜索菜单外链无法点击跳转问题</li>
                <li>修复菜单管理选择图标，backspace删除时不过滤数据</li>
                <li>用户管理部门分支节点不可检查&显示计数</li>
                <li>数据范围过滤属性调整</li>
                <li>其他细节优化</li>
              </ol>
            </el-collapse-item>

            <el-collapse-item title="v2.3.0 - 2020-06-01">
              <ol>
                <li>升级fastjson到最新版1.2.70 修复高危安全漏洞</li>
                <li>dev启动默认打开浏览器</li>
                <li>vue-cli使用默认source-map</li>
                <li>slidebar eslint报错优化</li>
                <li>当tags-view滚动关闭右键菜单</li>
                <li>字典管理添加缓存读取</li>
                <li>参数管理支持缓存操作</li>
                <li>支持一级菜单（和主页同级）在main区域显示</li>
                <li>限制外链地址必须以http(s)开头</li>
                <li>tagview & sidebar 主题颜色与element ui(全局)同步</li>
                <li>修改数据源类型优先级，先根据方法，再根据类</li>
                <li>支持是否需要设置token属性，自定义返回码消息。</li>
                <li>swagger请求前缀加入配置。</li>
                <li>登录地点设置内容过长则隐藏显示</li>
                <li>修复定时任务执行一次按钮后不提示消息问题</li>
                <li>修改上级部门（选择项排除本身和下级）</li>
                <li>通用http发送方法增加参数 contentType 编码类型</li>
                <li>更换IP地址查询接口</li>
                <li>修复页签变量undefined</li>
                <li>添加校验部门包含未停用的子部门</li>
                <li>修改定时任务详情下次执行时间日期显示错误</li>
                <li>角色管理查询设置默认排序字段</li>
                <li>swagger添加enable参数控制是否启用</li>
                <li>只对json类型请求构建可重复读取inputStream的request</li>
                <li>修改代码生成字典字段int类型没有自动选中问题</li>
                <li>vuex用户名取值修正</li>
                <li>表格树模板去掉多余的)</li>
                <li>代码生成序号修正</li>
                <li>全屏情况下不调整上外边距</li>
                <li>代码生成Date字段添加默认格式</li>
                <li>用户管理角色选择权限控制</li>
                <li>修复路由懒加载报错问题</li>
                <li>模板sql.vm添加菜单状态</li>
                <li>设置用户名称不能修改</li>
                <li>dialog添加append-to-body属性，防止ie遮罩</li>
                <li>菜单区分状态和显示隐藏功能</li>
                <li>升级fastjson到最新版1.2.68 修复安全加固</li>
                <li>修复代码生成如果选择字典类型缺失逗号问题</li>
                <li>登录请求params更换为data，防止暴露url</li>
                <li>日志返回时间格式处理</li>
                <li>添加handle控制允许拖动的元素</li>
                <li>布局设置点击扩大范围</li>
                <li>代码生成列属性排序查询</li>
                <li>代码生成列支持拖动排序</li>
                <li>修复时间格式不支持ios问题</li>
                <li>表单构建添加父级class，防止冲突</li>
                <li>定时任务并发属性修正</li>
                <li>角色禁用&菜单隐藏不查询权限</li>
                <li>其他细节优化</li>
              </ol>
            </el-collapse-item>

            <el-collapse-item title="v2.2.0 - 2020-03-18">
              <ol>
                <li>系统监控新增定时任务功能</li>
                <li>添加一个打包Web工程bat</li>
                <li>修复页签鼠标滚轮按下的时候，可以关闭不可关闭的tag</li>
                <li>修复点击退出登录有时会无提示问题</li>
                <li>修复防重复提交注解无效问题</li>
                <li>修复通知公告批量删除异常问题</li>
                <li>添加菜单时路由地址必填限制</li>
                <li>代码生成字段描述可编辑</li>
                <li>修复用户修改个人信息导致缓存不过期问题</li>
                <li>个人信息创建时间获取正确属性值</li>
                <li>操作日志详细显示正确类型</li>
                <li>导入表单击行数据时选中对应的复选框</li>
                <li>批量替换表前缀逻辑调整</li>
                <li>固定重定向路径表达式</li>
                <li>升级element-ui版本到2.13.0</li>
                <li>操作日志排序调整</li>
                <li>修复charts切换侧边栏或者缩放窗口显示bug</li>
                <li>其他细节优化</li>
              </ol>
            </el-collapse-item>

            <el-collapse-item title="v2.1.0 - 2020-02-24">
              <ol>
                <li>新增表单构建</li>
                <li>代码生成支持树表结构</li>
                <li>新增用户导入</li>
                <li>修复动态加载路由页面刷新问题</li>
                <li>修复地址开关无效问题</li>
                <li>汉化错误提示页面</li>
                <li>代码生成已知问题修改</li>
                <li>修复多数据源下配置关闭出现异常处理</li>
                <li>添加HTML过滤器，用于去除XSS漏洞隐患</li>
                <li>修复上传头像控制台出现异常</li>
                <li>修改用户管理分页不正确的问题</li>
                <li>修复验证码记录提示错误</li>
                <li>修复request.js缺少Message引用</li>
                <li>修复表格时间为空出现的异常</li>
                <li>添加Jackson日期反序列化时区配置</li>
                <li>调整根据用户权限加载菜单数据树形结构</li>
                <li>调整成功登录不恢复按钮，防止多次点击</li>
                <li>修改用户个人资料同步缓存信息</li>
                <li>修复页面同时出现el-upload和Editor不显示处理</li>
                <li>修复在角色管理页修改菜单权限偶尔未选中问题</li>
                <li>配置文件新增redis密码属性</li>
                <li>设置mybatis全局的配置文件</li>
                <li>其他细节优化</li>
              </ol>
            </el-collapse-item>

            <el-collapse-item title="v2.0.0 - 2019-12-02">
              <ol>
                <li>新增代码生成</li>
                <li>新增@RepeatSubmit注解，防止重复提交</li>
                <li>新增菜单主目录添加/删除操作</li>
                <li>日志记录过滤特殊对象，防止转换异常</li>
                <li>修改代码生成路由脚本错误</li>
                <li>用户上传头像实时同步缓存，无需重新登录</li>
                <li>调整切换页签后不重新加载数据</li>
                <li>添加jsencrypt实现参数的前端加密</li>
                <li>系统退出删除用户缓存记录</li>
                <li>其他细节优化</li>
              </ol>
            </el-collapse-item>
            <el-collapse-item title="v1.1.0 - 2019-11-11">
              <ol>
                <li>新增在线用户管理</li>
                <li>新增按钮组功能实现（批量删除、导出、清空）</li>
                <li>新增查询条件重置按钮</li>
                <li>新增Swagger全局Token配置</li>
                <li>新增后端参数校验</li>
                <li>修复字典管理页面的日期查询异常</li>
                <li>修改时间函数命名防止冲突</li>
                <li>去除菜单上级校验，默认为顶级</li>
                <li>修复用户密码无法修改问题</li>
                <li>修复菜单类型为按钮时不显示权限标识</li>
                <li>其他细节优化</li>
              </ol>
            </el-collapse-item>
            <el-collapse-item title="v1.0.0 - 2019-10-08">
              <ol>
                <li>若依前后端分离系统正式发布</li>
              </ol>
            </el-collapse-item>
          </el-collapse>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="8">
        <el-card class="update-log">
          <template v-slot:header>
            <div class="clearfix">
              <span>捐赠支持</span>
            </div>
          </template>
          <div class="body">
            <img
              src="@/assets/images/pay.png"
              alt="donate"
              style="width:100%"
            />
            <span style="display: inline-block; height: 30px; line-height: 30px"
              >你可以请作者喝杯咖啡表示鼓励</span
            >
        </div>
      </div>
      
      <div class="stat-card supply">
        <div class="card-icon">
          <i class="el-icon-truck"></i>
        </div>
        <div class="card-content">
          <div class="card-title">供应量</div>
          <div class="card-value">8,965 吨</div>
          <div class="card-trend">
            <span class="trend-label">较昨日</span>
            <span class="trend-value up">+8.2%</span>
          </div>
        </el-card>
      </el-col>
    </el-row>
        </div>
      </div>
    </div>

    <!-- 中间图表区域 -->
    <div class="chart-section">
      <div class="chart-container">
        <div class="chart-title">营收分布</div>
        <div ref="pieChart" class="chart-content pie-chart"></div>
      </div>
      
      <div class="chart-container">
        <div class="chart-title">供应量趋势</div>
        <div ref="areaChart" class="chart-content area-chart"></div>
      </div>
    </div>

    <!-- 底部三栏布局 -->
    <div class="bottom-section">
      <!-- 库存统计 -->
      <div class="bottom-card inventory">
        <div class="card-header">
          <h3>库存统计</h3>
        </div>
        <div class="inventory-items">
          <div class="inventory-item">
            <div class="item-name">原煤</div>
            <div class="item-value">15,432 吨</div>
            <div class="item-status normal">正常</div>
          </div>
          <div class="inventory-item">
            <div class="item-name">精煤</div>
            <div class="item-value">8,765 吨</div>
            <div class="item-status normal">正常</div>
          </div>
          <div class="inventory-item">
            <div class="item-name">焦煤</div>
            <div class="item-value">3,241 吨</div>
            <div class="item-status low">偏低</div>
          </div>
          <div class="inventory-item">
            <div class="item-name">块煤</div>
            <div class="item-value">6,789 吨</div>
            <div class="item-status normal">正常</div>
          </div>
        </div>
      </div>

      <!-- 柱状图 -->
      <div class="bottom-card chart">
        <div class="card-header">
          <h3>月度对比</h3>
        </div>
        <div ref="barChart" class="chart-content bar-chart"></div>
      </div>

      <!-- 销售数据表格 -->
      <div class="bottom-card table">
        <div class="card-header">
          <h3>销售数据</h3>
        </div>
        <el-table 
          :data="salesData" 
          style="width: 100%"
          :header-cell-style="tableHeaderStyle"
        >
          <el-table-column prop="product" label="产品" width="80"></el-table-column>
          <el-table-column prop="quantity" label="数量" width="80"></el-table-column>
          <el-table-column prop="amount" label="金额" width="90"></el-table-column>
          <el-table-column prop="status" label="状态" width="70">
            <template #default="scope">
              <el-tag 
                :type="scope.row.status === '已完成' ? 'success' : 'warning'"
                size="small"
              >
                {{ scope.row.status }}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup name="Index">
const version = ref('3.8.9')
<script>
import * as echarts from 'echarts'

function goTarget(url) {
  window.open(url, '__blank')
export default {
  name: 'Dashboard',
  data() {
    return {
      salesData: [
        { product: '原煤', quantity: '1,234吨', amount: '¥456,789', status: '已完成' },
        { product: '精煤', quantity: '567吨', amount: '¥234,567', status: '已完成' },
        { product: '焦煤', quantity: '890吨', amount: '¥345,678', status: '进行中' },
        { product: '块煤', quantity: '432吨', amount: '¥123,456', status: '已完成' },
        { product: '煤泥', quantity: '678吨', amount: '¥234,567', status: '进行中' }
      ],
      tableHeaderStyle: {
        backgroundColor: '#f5f7fa',
        color: '#606266',
        fontSize: '12px'
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initCharts()
    })
  },
  methods: {
    initCharts() {
      this.initPieChart()
      this.initAreaChart()
      this.initBarChart()
    },
    
    initPieChart() {
      const chart = echarts.init(this.$refs.pieChart)
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'right',
          top: 'center',
          textStyle: {
            fontSize: 12
          }
        },
        series: [
          {
            name: '营收分布',
            type: 'pie',
            radius: ['30%', '70%'],
            center: ['40%', '50%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '16',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 335, name: '原煤', itemStyle: { color: '#409EFF' } },
              { value: 310, name: '精煤', itemStyle: { color: '#67C23A' } },
              { value: 234, name: '焦煤', itemStyle: { color: '#E6A23C' } },
              { value: 135, name: '块煤', itemStyle: { color: '#F56C6C' } },
              { value: 155, name: '其他', itemStyle: { color: '#909399' } }
            ]
          }
        ]
      }
      chart.setOption(option)
      
      // 响应式
      window.addEventListener('resize', () => {
        chart.resize()
      })
    },
    
    initAreaChart() {
      const chart = echarts.init(this.$refs.areaChart)
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['供应量'],
          top: 10
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
            axisLabel: {
              fontSize: 12
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              fontSize: 12
            }
          }
        ],
        series: [
          {
            name: '供应量',
            type: 'line',
            stack: 'Total',
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(64, 158, 255, 0.3)' },
                { offset: 1, color: 'rgba(64, 158, 255, 0.1)' }
              ])
            },
            emphasis: {
              focus: 'series'
            },
            data: [1200, 1320, 1010, 1340, 900, 1230, 1100],
            lineStyle: {
              color: '#409EFF'
            },
            itemStyle: {
              color: '#409EFF'
            }
          }
        ]
      }
      chart.setOption(option)
      
      // 响应式
      window.addEventListener('resize', () => {
        chart.resize()
      })
    },
    
    initBarChart() {
      const chart = echarts.init(this.$refs.barChart)
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['原煤', '精煤', '焦煤', '块煤', '煤泥'],
          axisLabel: {
            fontSize: 11
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            fontSize: 11
          }
        },
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [320, 302, 301, 334, 290],
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#409EFF' },
                { offset: 1, color: '#79bbff' }
              ])
            },
            barWidth: '60%'
          }
        ]
      }
      chart.setOption(option)
      
      // 响应式
      window.addEventListener('resize', () => {
        chart.resize()
      })
    }
  }
}
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }
<style scoped>
.dashboard {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

  ul {
    padding: 0;
    margin: 0;
/* 顶部统计卡片 */
.top-cards {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.stat-card {
  flex: 1;
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 15px;
}

.card-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
}

.revenue .card-icon {
  background: linear-gradient(135deg, #409EFF, #79bbff);
}

.supply .card-icon {
  background: linear-gradient(135deg, #67C23A, #95d475);
}

.card-content {
  flex: 1;
}

.card-title {
  font-size: 14px;
  color: #909399;
  margin-bottom: 8px;
}

.card-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 5px;
}

.card-trend {
  font-size: 12px;
}

.trend-label {
  color: #909399;
  margin-right: 5px;
}

.trend-value.up {
  color: #67C23A;
}

/* 中间图表区域 */
.chart-section {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}
.el-scrollbar__view{
  width: 100%;
}
.chart-container {
  flex: 1;
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.chart-title {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 2px solid #f0f0f0;
}

.chart-content {
  height: 280px;
}

/* 底部三栏布局 */
.bottom-section {
  display: flex;
  gap: 20px;
}

.bottom-card {
  flex: 1;
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.card-header {
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 2px solid #f0f0f0;
}

.card-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: bold;
  color: #303133;
}

/* 库存统计样式 */
.inventory-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.inventory-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 6px;
  border-left: 3px solid #409EFF;
}

.item-name {
  font-weight: bold;
  color: #303133;
}

.item-value {
  color: #606266;
  font-size: 14px;
}

.item-status {
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: bold;
}

.item-status.normal {
  background: #f0f9ff;
  color: #67C23A;
}

.item-status.low {
  background: #fef0e6;
  color: #E6A23C;
}

/* 柱状图容器 */
.bar-chart {
  height: 200px;
}

/* 表格样式调整 */
.bottom-card.table {
  min-width: 320px;
}

.bottom-card.table .el-table {
  font-size: 12px;
}

.bottom-card.table .el-table td,
.bottom-card.table .el-table th {
  padding: 8px 0;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .bottom-section {
    flex-direction: column;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  
  .chart-section {
    flex-direction: column;
  }
}

  h4 {
    margin-top: 0px;
@media (max-width: 768px) {
  .top-cards {
    flex-direction: column;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  
  .dashboard {
    padding: 10px;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  
  .stat-card {
    padding: 15px;
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  
  .card-value {
    font-size: 20px;
  }
}
</style>


 src/views/procureMent/components/ProductionDialog.vue

@@ -1,57 +1,48 @@
<template>
  <div>
    <el-dialog
      v-model="dialogFormVisible"
      :title="title"
      width="600"
      :close-on-click-modal="false"
      @close="handleClose"
        v-model="dialogFormVisible"
        :title="title"
        width="600"
        :close-on-click-modal="false"
        @close="handleClose"
    >
      <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="auto"
        class="production-form"
        label-position="right"
        style="max-width: 400px; margin: 0 auto"
          ref="formRef"
          :model="form"
          :rules="rules"
          label-width="auto"
          class="production-form"
          label-position="right"
          style="max-width: 400px; margin: 0 auto"
      >
        <el-form-item label="供应商名称" prop="supplierId">
          <el-select v-model="form.supplierId" placeholder="请选择供应商">
            <el-option :label="item.label" v-for="item in supplyList" :key="item.value" :value="item.value" />
            <el-option :label="item.label" v-for="item in supplyList" :key="item.value" :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="煤种" prop="coalId">
          <el-select v-model="form.coalId" placeholder="请选择煤种">
            <el-option :label="item.label" v-for="item in coalList" :key="item.value" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="单位" prop="unit">
          <el-select
            v-model="form.unit"
            placeholder="请选择单位"
            clearable
            style="width: 100%"
          >
            <el-option label="吨" value="吨" />
            <el-option label="千克" value="千克" />
            <el-option :label="item.label" v-for="item in coalList" :key="item.value" :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="采购数量" prop="purchaseQuantity">
          <el-input
            v-model.number="form.purchaseQuantity"
            placeholder="请输入"
            @blur="handleQuantityBlur"
              v-model.number="form.purchaseQuantity"
              placeholder="请输入"
              @blur="handleQuantityBlur"
          >
            <template v-slot:suffix>
              <i style="font-style: normal">{{ form.unit ? form.unit : "" }}</i>
              <i style="font-style: normal">吨</i>
            </template>
          </el-input> </el-form-item
        ><el-form-item label="税率" prop="taxRate">
          </el-input>
        </el-form-item
        >
        <el-form-item label="税率" prop="taxRate">
          <el-input
            v-model.number="form.taxRate"
            placeholder="请输入税率"
            @blur="handleTaxRateBlur"
              v-model.number="form.taxRate"
              placeholder="请输入税率"
              @blur="handleTaxRateBlur"
          >
            <template v-slot:suffix>
              <i style="font-style: normal">%</i>
@@ -60,9 +51,9 @@
        </el-form-item>
        <el-form-item label="单价(不含税)" prop="priceExcludingTax">
          <el-input
            v-model.number="form.priceExcludingTax"
            placeholder="请输入"
            @blur="handlePriceBlur"
              v-model.number="form.priceExcludingTax"
              placeholder="请输入"
              @blur="handlePriceBlur"
          >
            <template v-slot:suffix>
              <i style="font-style: normal">元</i>
@@ -71,8 +62,8 @@
        </el-form-item>
        <el-form-item label="单价(含税)" prop="priceIncludingTax">
          <el-input
            v-model.number="form.priceIncludingTax"
            placeholder="自动计算"
              v-model.number="form.priceIncludingTax"
              placeholder="自动计算"
          >
            <template v-slot:suffix>
              <i style="font-style: normal">元</i>
@@ -81,8 +72,8 @@
        </el-form-item>
        <el-form-item label="总价(不含税)" prop="totalPriceExcludingTax">
          <el-input
            v-model.number="form.totalPriceExcludingTax"
            placeholder="自动计算"
              v-model.number="form.totalPriceExcludingTax"
              placeholder="自动计算"
          >
            <template v-slot:suffix>
              <i style="font-style: normal">元</i>
@@ -91,8 +82,8 @@
        </el-form-item>
        <el-form-item label="总价(含税)" prop="totalPriceIncludingTax">
          <el-input
            v-model.number="form.totalPriceIncludingTax"
            placeholder="自动计算"
              v-model.number="form.totalPriceIncludingTax"
              placeholder="自动计算"
          >
            <template v-slot:suffix>
              <i style="font-style: normal">元</i>
@@ -100,16 +91,16 @@
          </el-input>
        </el-form-item>
        <el-form-item label="登记人" prop="registrantId">
          <el-input v-model="form.registrantId" disabled placeholder="请输入" />
          <el-input v-model="form.registrantId" disabled placeholder="请输入"/>
        </el-form-item>
        <el-form-item label="登记日期" prop="registrationDate">
          <el-date-picker
            disabled
            v-model="form.registrationDate"
            type="date"
            placeholder="YYYY-MM-DD"
            style="width: 100%"
            value-format="YYYY-MM-DD"
              disabled
              v-model="form.registrationDate"
              type="date"
              placeholder="YYYY-MM-DD"
              style="width: 100%"
              value-format="YYYY-MM-DD"
          />
        </el-form-item>
      </el-form>
@@ -117,10 +108,12 @@
        <div class="dialog-footer">
          <!-- 重置和取消 -->
          <el-button @click="handleClose" v-if="title.includes('新增')"
            >取消</el-button
          >取消
          </el-button
          >
          <el-button @click="handleReset" v-if="title.includes('编辑')"
            >重置</el-button
          >重置
          </el-button
          >
          <el-button type="primary" @click="handleSubmit">确认</el-button>
        </div>
@@ -130,12 +123,11 @@
</template>

<script setup name="ProductionDialog">
import { ref, defineProps, watch, onMounted, nextTick, computed } from "vue";
import { ElMessage } from "element-plus";
import {ref, defineProps, watch, onMounted, nextTick, computed} from "vue";
import {ElMessage} from "element-plus";
import useUserStore from "@/store/modules/user";
import { addOrEditPR,getSupplyList, getCoalInfoList } from "@/api/procureMent";
import { getSupply } from "@/api/basicInformation/supplier";
import { getCoalInfo } from "@/api/basicInformation/coal";
import {addOrEditPR, getSupplyList, getCoalInfoList} from "@/api/procureMent";

const props = defineProps({
  title: {
    type: String,
@@ -164,7 +156,6 @@
      getSupplyList(),
      getCoalInfoList(),
    ]);
    console.log(supplyRes, coalRes);
    let supplyData = supplyRes.data;
    let coalData = coalRes.data;
    supplyList.value = supplyData.map((item) => ({
@@ -188,8 +179,8 @@
    return 0;
  }
  return (
    Math.floor(parseFloat(num) * Math.pow(10, precision)) /
    Math.pow(10, precision)
      Math.floor(parseFloat(num) * Math.pow(10, precision)) /
      Math.pow(10, precision)
  );
};
// 含税单价计算
@@ -250,9 +241,9 @@
// 处理税率输入框失焦，确保精度
const handleTaxRateBlur = () => {
  if (
    form.value.taxRate !== null &&
    form.value.taxRate !== undefined &&
    form.value.taxRate !== ""
      form.value.taxRate !== null &&
      form.value.taxRate !== undefined &&
      form.value.taxRate !== ""
  ) {
    form.value.taxRate = toFixed(parseFloat(form.value.taxRate), 2);
  }
@@ -261,13 +252,13 @@
// 处理不含税单价输入框失焦，确保精度
const handlePriceBlur = () => {
  if (
    form.value.priceExcludingTax !== null &&
    form.value.priceExcludingTax !== undefined &&
    form.value.priceExcludingTax !== ""
      form.value.priceExcludingTax !== null &&
      form.value.priceExcludingTax !== undefined &&
      form.value.priceExcludingTax !== ""
  ) {
    form.value.priceExcludingTax = toFixed(
      parseFloat(form.value.priceExcludingTax),
      2
        parseFloat(form.value.priceExcludingTax),
        2
    );
  }
};
@@ -275,13 +266,13 @@
// 处理采购数量输入框失焦，确保精度
const handleQuantityBlur = () => {
  if (
    form.value.purchaseQuantity !== null &&
    form.value.purchaseQuantity !== undefined &&
    form.value.purchaseQuantity !== ""
      form.value.purchaseQuantity !== null &&
      form.value.purchaseQuantity !== undefined &&
      form.value.purchaseQuantity !== ""
  ) {
    form.value.purchaseQuantity = toFixed(
      parseFloat(form.value.purchaseQuantity),
      3
        parseFloat(form.value.purchaseQuantity),
        3
    ); // 数量保留3位小数
  }
};
@@ -293,30 +284,29 @@
});
const rules = {
  supplierName: [
    { required: true, message: "请输入供应商名称", trigger: "blur" },
    {required: true, message: "请输入供应商名称", trigger: "blur"},
  ],
  coal: [{ required: true, message: "请输入煤种", trigger: "blur" }],
  unit: [{ required: true, message: "请输入单位", trigger: "blur" }],
  coal: [{required: true, message: "请输入煤种", trigger: "blur"}],
  purchaseQuantity: [
    { required: true, message: "请输入采购数量", trigger: "blur" },
    { type: "number", message: "采购数量必须为数字", trigger: "blur" },
    {required: true, message: "请输入采购数量", trigger: "blur"},
    {type: "number", message: "采购数量必须为数字", trigger: "blur"},
  ],
  priceExcludingTax: [
    { required: true, message: "请输入单价", trigger: "blur" },
    {required: true, message: "请输入单价", trigger: "blur"},
  ],
  totalPriceExcludingTax: [
    { required: true, message: "请输入总价", trigger: "blur" },
    {required: true, message: "请输入总价", trigger: "blur"},
  ],
  priceIncludingTax: [
    { required: true, message: "请输入含税单价", trigger: "blur" },
    {required: true, message: "请输入含税单价", trigger: "blur"},
  ],
  totalPriceIncludingTax: [
    { required: true, message: "请输入含税总价", trigger: "blur" },
    {required: true, message: "请输入含税总价", trigger: "blur"},
  ],
  taxRate: [{ required: true, message: "请输入税率", trigger: "blur" }],
  registrantId: [{ required: true, message: "请输入登记人", trigger: "blur" }],
  taxRate: [{required: true, message: "请输入税率", trigger: "blur"}],
  registrantId: [{required: true, message: "请输入登记人", trigger: "blur"}],
  registrationDate: [
    { required: true, message: "请选择登记日期", trigger: "change" },
    {required: true, message: "请选择登记日期", trigger: "change"},
  ],
};
// 关闭弹窗

 src/views/procureMent/index.vue

@@ -18,12 +18,11 @@
      <!-- 操作按钮区 -->
      <el-row :gutter="24" class="table-toolbar">
        <el-button type="primary" :icon="Plus" @click="handleAdd"
          >新建</el-button
        >
          >新建
        </el-button>
        <el-button type="danger" :icon="Delete" @click="handleDelete"
          >删除</el-button
        >
        <!-- <el-button type="info" :icon="Download" @click="handleExport">导出</el-button> -->
          >删除
        </el-button>
      </el-row>
      <!-- 表格组件 -->
      <data-table
@@ -66,7 +65,12 @@
import DataTable from "@/components/Table/ETable.vue";
import Pagination from "@/components/Pagination";
import ProductionDialog from "./components/ProductionDialog.vue";
import { purchaseRegistration } from "@/api/procureMent";
import {
  purchaseRegistration,
  getSupplyList,
  getCoalInfoList,
} from "@/api/procureMent";

import useUserStore from "@/store/modules/user";
// 引入字典数据
const { proxy } = getCurrentInstance();
@@ -117,9 +121,22 @@

// supplier 供应商数据
const columns = ref([
  { prop: "supplierName", label: "供应商名称", minWidth: 200 },
  { prop: "coal", label: "煤种类型", minWidth: 120 },
  { prop: "unit", label: "单位", minWidth: 150 },
  {
    prop: "supplierId",
    label: "供应商名称",
    minWidth: 200,
    formatter: (row) => {
      return MatchQuery(row.supplierId, "supplyRes") || "未知供应商";
    },
  },
  {
    prop: "coalId",
    label: "煤种类型",
    minWidth: 120,
    formatter: (row) => {
      return MatchQuery(row.coalId, "coalRes") || "未知煤种";
    },
  },
  { prop: "purchaseQuantity", label: "采购数量", minWidth: 100 },
  { prop: "priceIncludingTax", label: "单价（含税）", minWidth: 150 },
  { prop: "totalPriceIncludingTax", label: "总价（含税）", minWidth: 100 },
@@ -128,6 +145,16 @@
  { prop: "registrantId", label: "登记人", minWidth: 100 },
  { prop: "registrationDate", label: "登记日期", minWidth: 100 },
]);

// 匹配查询字段
const MatchQuery = (data, name) => {
  const list = name === "supplyRes" ? supplyRes.value.data : coalRes.value.data;
  const item = list.find((items) => items.id == data);
  return item ? item.coal || item.supplierName  : "";
};
// 获取供应商列表
const supplyRes = ref([]);
const coalRes = ref([]);

// 重置查询
const resetQuery = () => {
@@ -167,7 +194,7 @@
  form.value = {
    supplierName: "",
    coal: "",
    unit: "",
    unit: "吨",
    purchaseQuantity: "",
    priceExcludingTax: "",
    totalPriceExcludingTax: "",
@@ -227,17 +254,6 @@
const handleDeleteSuccess = (row) => {
  ElMessage.success("删除成功：" + row.supplierName);
};
// 导出
const handleExport = (row) => {
  proxy.download(
    "system/post/export",
    {
      ...queryParams.value,
    },
    `post_${new Date().getTime()}.xlsx`
  );
  ElMessage.success("导出数据：" + row.supplierName);
};
// 成功
const handleSuccess = (val) => {
  tableData.value.push(val);
@@ -248,6 +264,10 @@
const getList = async () => {
  loading.value = true;
  try {
    [supplyRes.value, coalRes.value] = await Promise.all([
      getSupplyList(),
      getCoalInfoList(),
    ]);
    // 传递分页参数
    let res = await purchaseRegistration({
      current: current.value,
@@ -271,6 +291,7 @@
.app-container {
  box-sizing: border-box;
}

.search-form {
  background-color: #fff;
  padding: 20px 20px 0 20px;
@@ -278,6 +299,7 @@
  border-radius: 4px;
  box-shadow: var(--el-box-shadow-light);
}

.search-form :deep(.el-form-item) {
  margin-bottom: 16px;
  width: 100%;
@@ -289,11 +311,13 @@
    width: 50%;
  }
}

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

.table-toolbar {
  margin-bottom: 20px;
  display: flex;
@@ -306,15 +330,18 @@
  .table-toolbar {
    flex-direction: column;
  }

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

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

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

 src/views/production/components/ProductionDetailsTable.vue

@@ -1,20 +1,20 @@
<template>
  <el-table :data="tableData" :border="border" style="width: 100%">    
  <el-table :data="tableData" :border="border" style="width: 100%">
    <el-table-column label="煤种" min-width="120">
      <template #default="{ row, $index }">
        <el-select 
          clearable 
          :model-value="getCoalNameById(row.coalId) || row.coalId"
          placeholder="请选择煤种"
          @change="(value) => handleCoalSelectChange(row, value)"
          filterable
          :key="`coalId-select-${$index}-${weekList.length}`"
        <el-select
            clearable
            :model-value="getCoalNameById(row.coalId) || row.coalId"
            placeholder="请选择煤种"
            @change="(value) => handleCoalSelectChange(row, value)"
            filterable
            :key="`coalId-select-${$index}-${weekList.length}`"
        >
          <el-option
            v-for="(item, index) of weekList"
            :key="`option-${index}-${item.key}`"
            :label="item.value"
            :value="item.value"
              v-for="(item, index) of weekList"
              :key="`option-${index}-${item.key}`"
              :label="item.value"
              :value="item.value"
          />
        </el-select>
      </template>
@@ -22,10 +22,10 @@
    <el-table-column label="生产数量" min-width="120">
      <template #default="{ row, $index }">
        <el-input
          v-model="row.productionQuantity"
          placeholder="请输入生产数量"
          type="number"
          @input="handleInput('productionQuantity', $index, $event)"
            v-model="row.productionQuantity"
            placeholder="请输入生产数量"
            type="number"
            @input="handleInput('productionQuantity', $index, $event)"
        />
      </template>
    </el-table-column>
@@ -33,10 +33,10 @@
    <el-table-column label="人工成本" min-width="120">
      <template #default="{ row, $index }">
        <el-input
          v-model="row.laborCost"
          placeholder="请输入人工成本"
          type="number"
          @input="handleInput('laborCost', $index, $event)"
            v-model="row.laborCost"
            placeholder="请输入人工成本"
            type="number"
            @input="handleInput('laborCost', $index, $event)"
        >
          <template #suffix>
            <i style="font-style: normal">元</i>
@@ -48,10 +48,10 @@
    <el-table-column label="能耗成本" min-width="120">
      <template #default="{ row, $index }">
        <el-input
          v-model="row.energyConsumptionCost"
          placeholder="请输入能耗成本"
          type="number"
          @input="handleInput('energyConsumptionCost', $index, $event)"
            v-model="row.energyConsumptionCost"
            placeholder="请输入能耗成本"
            type="number"
            @input="handleInput('energyConsumptionCost', $index, $event)"
        >
          <template #suffix>
            <i style="font-style: normal">元</i>
@@ -63,10 +63,10 @@
    <el-table-column label="设备折旧" min-width="120">
      <template #default="{ row, $index }">
        <el-input
          v-model="row.equipmentDepreciation"
          placeholder="请输入设备折旧"
          type="number"
          @input="handleInput('equipmentDepreciation', $index, $event)"
            v-model="row.equipmentDepreciation"
            placeholder="请输入设备折旧"
            type="number"
            @input="handleInput('equipmentDepreciation', $index, $event)"
        >
          <template #suffix>
            <i style="font-style: normal">元</i>
@@ -78,10 +78,10 @@
    <el-table-column label="采购单价" min-width="120">
      <template #default="{ row, $index }">
        <el-input
          v-model="row.purchasePrice"
          placeholder="请输入采购单价"
          type="number"
          @input="handleInput('purchasePrice', $index, $event)"
            v-model="row.purchasePrice"
            placeholder="请输入采购单价"
            type="number"
            @input="handleInput('purchasePrice', $index, $event)"
        >
          <template #suffix>
            <i style="font-style: normal">元</i>
@@ -93,12 +93,12 @@
    <el-table-column label="总成本" min-width="120">
      <template #default="{ row, $index }">
        <el-input
          disabled
          v-model="row.totalCost"
          placeholder="总成本"
          type="number"
          :readonly="autoCalculate"
          @input="handleInput('totalCost', $index, $event)"
            disabled
            v-model="row.totalCost"
            placeholder="总成本"
            type="number"
            :readonly="autoCalculate"
            @input="handleInput('totalCost', $index, $event)"
        >
          <template #suffix>
            <i style="font-style: normal">元</i>
@@ -109,34 +109,34 @@
    <el-table-column label="生产人" min-width="120">
      <template #default="{ row, $index }">
        <el-select
          clearable
          :model-value="getUserNameById(row.producer) || row.producer"
          placeholder="请选择生产人"
          @change="(value) => handleUserSelectChange(row, value)"
          filterable
          :key="`producer-select-${$index}-${userList.length}`"
            clearable
            :model-value="getUserNameById(row.producer) || row.producer"
            placeholder="请选择生产人"
            @change="(value) => handleUserSelectChange(row, value)"
            filterable
            :key="`producer-select-${$index}-${userList.length}`"
        >
          <el-option
            v-for="(item, index) of userList"
            :key="`option-${index}-${item.key}`"
            :label="item.value"
            :value="item.value"
              v-for="(item, index) of userList"
              :key="`option-${index}-${item.key}`"
              :label="item.value"
              :value="item.value"
          />
        </el-select>
      </template>
    </el-table-column>
    <el-table-column
      v-if="showOperations"
      label="操作"
      width="120"
      fixed="right"
        v-if="showOperations"
        label="操作"
        width="120"
        fixed="right"
    >
      <template #default="{ $index }">
        <el-button
          type="danger"
          size="small"
          @click="handleDelete($index)"
          :icon="Delete"
            type="danger"
            size="small"
            @click="handleDelete($index)"
            :icon="Delete"
        >
          删除
        </el-button>
@@ -146,11 +146,12 @@
</template>

<script setup name="ProductionDetailsTable">
import { ref, computed, watch, onMounted, nextTick } from "vue";
import { Delete } from "@element-plus/icons-vue";
import { getCoalFieldList } from "@/api/basicInformation/coalQualityMaintenance";
import { getCoalInfoList } from "@/api/production";
import { userListAll } from "@/api/publicApi";
import {ref, computed, watch, onMounted, nextTick} from "vue";
import {Delete} from "@element-plus/icons-vue";
import {getCoalFieldList} from "@/api/basicInformation/coalQualityMaintenance";
import {getCoalInfoList} from "@/api/production";
import {userListAll} from "@/api/publicApi";

const props = defineProps({
  modelValue: {
    type: Array,
@@ -189,19 +190,19 @@

  // 如果开启自动计算总成本
  if (
    props.autoCalculate &&
    [
      "laborCost",
      "energyCost",
      "equipmentDepreciation",
      "purchasePrice",
    ].includes(field)
      props.autoCalculate &&
      [
        "laborCost",
        "energyCost",
        "equipmentDepreciation",
        "purchasePrice",
      ].includes(field)
  ) {
    calculateTotalCost(newData[index]);
  }

  tableData.value = newData;
  emit("input-change", { field, index, value, row: newData[index] });
  emit("input-change", {field, index, value, row: newData[index]});
};

// 计算总成本
@@ -212,10 +213,10 @@
  const purchasePrice = parseFloat(row.purchasePrice) || 0;

  row.totalCost = (
    laborCost +
    energyCost +
    equipmentDepreciation +
    purchasePrice
      laborCost +
      energyCost +
      equipmentDepreciation +
      purchasePrice
  ).toFixed(2);
};

@@ -254,7 +255,7 @@
  if (newValue && weekList.value.length > 0) {
    // 当数据加载完成且weekList已获取时，确保显示正确
  }
}, { deep: true });
}, {deep: true});

// 监听weekList变化，当下拉数据加载完成后处理显示
watch(weekList, (newList) => {
@@ -266,23 +267,23 @@
      tableData.value = tempData;
    });
  }
}, { deep: true });
}, {deep: true});

onMounted(async()=>{
onMounted(async () => {
  let res = await getCoalInfoList()
  console.log(res);
  res.data.forEach(item => {
    let obj = {};
    obj.value = item.coal;
    obj.key = item.id;
    weekList.value.push(obj); 
    weekList.value.push(obj);
  });
  let ress = await userListAll();
  ress.data.forEach(item => {
    let obj = {};
    obj.value = item.nickName;
    obj.key = item.userId;
    userList.value.push(obj); 
    userList.value.push(obj);
  });
  // 通知父组件weekList已加载完成
  nextTick(() => {
@@ -302,7 +303,7 @@
  }
};
const userList = ref([]);
const getUserList = (async()=>{
const getUserList = (async () => {
  let res = await userListAll();
  if (res.code === 200) {
    userList.value = res.data.map((item) => ({
@@ -318,7 +319,7 @@
  if (newValue && userList.value.length > 0) {
    // 当数据加载完成且weekList已获取时，确保显示正确
  }
}, { deep: true });
}, {deep: true});

// 监听userList变化，当下拉数据加载完成后处理显示
watch(userList, (newList) => {
@@ -330,7 +331,7 @@
      tableData.value = tempData;
    });
  }
}, { deep: true });
}, {deep: true});

const getUserNameById = (id) => {
  const producer = userList.value.find(item => item.key == id);

 src/views/production/components/ProductionDialog.vue

@@ -1,25 +1,30 @@
<template>
  <el-dialog
    v-model="dialogVisible"
    :title="dialogType === 'add' ? '新增生产加工' : '编辑生产加工'"
    width="1200px"
    :close-on-click-modal="false"
    @close="handleClose"
      v-model="dialogVisible"
      :title="dialogType === 'add' ? '新增生产加工' : '编辑生产加工'"
      width="1200px"
      :close-on-click-modal="false"
      @close="handleClose"
  >
    <el-row :gutter="10" style="margin-bottom: 10px">
      <el-col :span="3">
        <el-button type="primary" @click="handlData"
          ><el-icon> <Plus /> </el-icon>选择数据</el-button
        >
          <el-icon>
            <Plus/>
          </el-icon>
          选择数据
        </el-button
        >
      </el-col>
      <el-col :span="4">
        <el-button
          type="danger"
          @click="removeSelectedData"
          :disabled="tableData.length === 0"
            type="danger"
            @click="removeSelectedData"
            :disabled="tableData.length === 0"
        >
          <el-icon>
            <Delete />
            <Delete/>
          </el-icon>
          清空已选
        </el-button>
@@ -34,15 +39,15 @@
      </el-col>
    </el-row>
    <ETableModify
      :columns="columns"
      :showOperations="false"
      height="200"
      @cell-edit="handleCellEdit"
      :tableData="tableData"
      :showOverflowTooltip="false"
      @row-click="handleRowClick"
      :editableColumns="['usedQuantity']"
      @delete="handleRemoveItem"
        :columns="columns"
        :showOperations="false"
        height="200"
        @cell-edit="handleCellEdit"
        :tableData="tableData"
        :showOverflowTooltip="false"
        @row-click="handleRowClick"
        :editableColumns="['usedQuantity']"
        @delete="handleRemoveItem"
    />
    <div class="empty-table">
      <h1>生产明细</h1>
@@ -50,7 +55,7 @@
        <el-col :span="2">
          <el-button type="primary" @click="addNewRow">
            <el-icon>
              <Plus />
              <Plus/>
            </el-icon>
            新增
          </el-button>
@@ -65,60 +70,62 @@
        </el-col> -->
      </el-row>
      <ProductionDetailsTable
        v-model="detailsTableData"
        :border="false"
        :show-operations="true"
        :auto-calculate="true"
        @input-change="handleDetailsChange"
        @delete-row="handleDeleteRow"
          v-model="detailsTableData"
          :border="false"
          :show-operations="true"
          :auto-calculate="true"
          @input-change="handleDetailsChange"
          @delete-row="handleDeleteRow"
      />
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button
          @click="handleClose"
          v-if="dialogType === 'add' || dialogType === 'edit'"
          >取 消</el-button
            @click="handleClose"
            v-if="dialogType === 'add' || dialogType === 'edit'"
        >取 消
        </el-button
        >
        <!-- <el-button @click="handleReset" v-if="dialogType === 'edit'"
          >重 置</el-button
        > -->
        <el-button type="primary" :loading="loading" @click="handleSubmit"
          >确 定</el-button
        >确 定
        </el-button
        >
      </div>
    </template>
  </el-dialog>
  <el-dialog
    v-model="innerVisible"
    width="1000"
    title="选择配置数据"
    center
    append-to-body
      v-model="innerVisible"
      width="1000"
      title="选择配置数据"
      center
      append-to-body
  >
    <div style="margin-bottom: 10px">
      <el-alert
        v-if="tableData.length > 0"
        :title="`当前已选择 ${tableData.length} 条数据`"
        type="info"
        :closable="false"
        show-icon
          v-if="tableData.length > 0"
          :title="`当前已选择 ${tableData.length} 条数据`"
          type="info"
          :closable="false"
          show-icon
      />
    </div>
    <ETable
      :showIndex="false"
      :showOverflowTooltip="false"
      @selection-change="handleSelectionChange"
      :showOperations="false"
      ref="etableRef"
      :columns="formalDatabaseColumns"
      :tableData="formalDatabaseData"
      :defaultSelectedIds="selectedIds"
      :rowKey="'id'"
      height="400"
      @cell-edit="handleCellEdit"
      :show-selection="true"
        :showIndex="false"
        :showOverflowTooltip="false"
        @selection-change="handleSelectionChange"
        :showOperations="false"
        ref="etableRef"
        :columns="formalDatabaseColumns"
        :tableData="formalDatabaseData"
        :defaultSelectedIds="selectedIds"
        :rowKey="'id'"
        height="400"
        @cell-edit="handleCellEdit"
        :show-selection="true"
    />
    <el-row :gutter="24" style="margin-top: 15px">
      <el-col :span="12">
@@ -129,9 +136,9 @@
      <el-col :span="12" style="text-align: right">
        <el-button @click="innerVisible = false">取消</el-button>
        <el-button
          type="primary"
          @click="handleSelectData"
          :disabled="formalDatabaseSelectedData.length === 0"
            type="primary"
            @click="handleSelectData"
            :disabled="formalDatabaseSelectedData.length === 0"
        >
          确定添加
        </el-button>
@@ -141,34 +148,34 @@
</template>

<script setup>
import { ref, reactive, watch, onMounted, nextTick, computed } from "vue";
import {ref, reactive, watch, onMounted, nextTick, computed} from "vue";
import ETable from "@/components/Table/ETable.vue";
import ETableModify from "@/components/Table/EtableModify.vue";
import ProductionDetailsTable from "./ProductionDetailsTable.vue";
import { ElMessage, ElMessageBox, ElAlert, ElText } from "element-plus";
import { Delete, Warning, Plus } from "@element-plus/icons-vue";
import {ElMessage, ElMessageBox, ElAlert, ElText} from "element-plus";
import {Delete, Warning, Plus} from "@element-plus/icons-vue";
import {
  getOfficialAll,
  addOrEditPM,
  deleteProductionInventory,
} from "@/api/production/index.js";
import { validateFormData, validateNumber, deepClone, createDefaultProductionRow } from "@/utils/production";
import { useCoalData } from "./useCoalData";
import {validateFormData, validateNumber, deepClone, createDefaultProductionRow} from "@/utils/production";
import {useCoalData} from "./useCoalData";
import useUserStore from "@/store/modules/user";

// Props 和 Emits
const props = defineProps({
  visible: { type: Boolean, default: false },
  type: { type: String, default: "add" },
  rowData: { type: Object, default: () => ({}) },
  visible: {type: Boolean, default: false},
  type: {type: String, default: "add"},
  rowData: {type: Object, default: () => ({})},
});

const dialogVisible = defineModel("visible", { type: Boolean, default: false });
const dialogVisible = defineModel("visible", {type: Boolean, default: false});
const emit = defineEmits(["update:visible", "success", "update:productionAndProcessing"]);

// 用户信息和煤种数据
const userStore = useUserStore();
const { getCoalNameById } = useCoalData();
const {getCoalNameById} = useCoalData();
let userInfo;

// 对话框状态
@@ -187,8 +194,8 @@
const copyForm = ref(null);
// 表格列配置
const columns = [
  { label: "煤种", prop: "coal", minwidth: 120 },
  { label: "库存数量", prop: "inventoryQuantity", minwidth: 100 },
  {label: "煤种", prop: "coal", minwidth: 120},
  {label: "库存数量", prop: "inventoryQuantity", minwidth: 100},
  {
    label: "使用数量",
    prop: "usedQuantity",
@@ -199,18 +206,18 @@
];

const formalDatabaseColumns = ref([
  { prop: "supplierName", label: "供应商名称", minwidth: 150 },
  { prop: "coal", label: "煤种类型", minwidth: 60 },
  { prop: "inventoryQuantity", label: "库存数量", minwidth: 80 },
  { prop: "unit", label: "单位", minwidth: 20 },
  { prop: "priceExcludingTax", label: "单价（不含税）", minwidth: 80 },
  { prop: "createTime", label: "登记日期", width: 200 },
  {prop: "supplierName", label: "供应商名称", minwidth: 150},
  {prop: "coal", label: "煤种类型", minwidth: 60},
  {prop: "inventoryQuantity", label: "库存数量", minwidth: 80},
  {prop: "unit", label: "单位", minwidth: 20},
  {prop: "priceExcludingTax", label: "单价（不含税）", minwidth: 80},
  {prop: "createTime", label: "登记日期", width: 200},
]);
// 工具函数
const debugIdMatching = () => {
  if (formalDatabaseData.value.length > 0 && selectedIds.value.length > 0) {
    const matchedRows = formalDatabaseData.value.filter((row) =>
      selectedIds.value.includes(row.id)
        selectedIds.value.includes(row.id)
    );
  }
};
@@ -226,8 +233,8 @@
  if (res.code === 200) {
    formalDatabaseData.value = res.data;
    const existingOfficialIds = tableData.value
      .map((item) => item.officialId)
      .filter((id) => id);
        .map((item) => item.officialId)
        .filter((id) => id);
    selectedIds.value = existingOfficialIds;
    debugIdMatching();
    nextTick(() => {
@@ -252,7 +259,7 @@
      try {
        etableRef.value.clearSelection();
        const rowsToSelect = formalDatabaseData.value.filter((row) =>
          ids.includes(row.id)
            ids.includes(row.id)
        );
        if (rowsToSelect.length > 0) {
          etableRef.value.setRowsSelection(rowsToSelect, true);
@@ -277,8 +284,8 @@
  detailsTableData.value = data.productionList || [];
  dialogType.value = "edit";
  const existingOfficialIds = tableData.value
    .map((item) => item.officialId)
    .filter((id) => id);
      .map((item) => item.officialId)
      .filter((id) => id);
  selectedIds.value = existingOfficialIds;
};
// 监听对话框状态，在打开时设置选中状态
@@ -319,8 +326,8 @@

  // 更新selectedIds，确保包含所有当前tableData中的officialId
  const allOfficialIds = tableData.value
    .map((item) => item.officialId)
    .filter((id) => id);
      .map((item) => item.officialId)
      .filter((id) => id);
  selectedIds.value = allOfficialIds;

  // 关闭选择对话框
@@ -348,13 +355,13 @@
  // 验证生产明细数据
  const detailsValidation = validateFormData(detailsTableData.value, [
    "coalId",
    "productionQuantity", 
    "productionQuantity",
    "laborCost",
    "energyConsumptionCost",
    "equipmentDepreciation",
    "purchasePrice"
  ]);
  

  if (!detailsValidation.isValid) {
    ElMessage.warning(detailsValidation.message);
    return;
@@ -400,13 +407,13 @@
const handleCellEdit = (row, prop, value) => {
  if (prop === "usedQuantity") {
    const validation = validateNumber(value, 0, Number(row.inventoryQuantity));
    

    if (!validation.isValid) {
      ElMessage.warning(validation.message);
      row.usedQuantity = validation.value;
      return;
    }
    

    row.usedQuantity = validation.value;
  }
};
@@ -445,15 +452,15 @@
// 删除单个已选数据项
const handleRemoveItem = (row) => {
  const index = tableData.value.findIndex(
    (item) => item.officialId === row.officialId
      (item) => item.officialId === row.officialId
  );
  if (index > -1) {
    tableData.value.splice(index, 1);

    // 更新selectedIds
    const updatedOfficialIds = tableData.value
      .map((item) => item.officialId)
      .filter((id) => id);
        .map((item) => item.officialId)
        .filter((id) => id);
    selectedIds.value = updatedOfficialIds;
    ElMessage.success("已删除选中项");
  }
@@ -470,21 +477,22 @@
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      if (dialogType.value === "edit") {
        let res = await deleteProductionInventory({
          productionInventoryList: tableData.value,
        });
        emit("update:productionAndProcessing", tableData.value, copyForm.value);
      }
      // [Vue warn]: Component emitted event "update:productionAndProcessing" but it is neither declared in the emits option nor as an "onUpdate:productionAndProcessing" prop.
      .then(async () => {
        if (dialogType.value === "edit") {
          let res = await deleteProductionInventory({
            productionInventoryList: tableData.value,
          });
          emit("update:productionAndProcessing", tableData.value, copyForm.value);
        }
        // [Vue warn]: Component emitted event "update:productionAndProcessing" but it is neither declared in the emits option nor as an "onUpdate:productionAndProcessing" prop.

      formalDatabaseSelectedData.value = [];
      tableData.value = [];
      selectedIds.value = [];
      ElMessage.success("已清空所有数据");
    })
    .catch(() => {});
        formalDatabaseSelectedData.value = [];
        tableData.value = [];
        selectedIds.value = [];
        ElMessage.success("已清空所有数据");
      })
      .catch(() => {
      });
};

// 计算总使用量
@@ -507,6 +515,7 @@
.el-row > .el-col > h1 {
  font-weight: bolder;
}

.empty-table > .el-row {
  margin-bottom: 12px;
}

 src/views/production/components/useCoalData.js

@@ -2,9 +2,9 @@
 * 煤种数据管理组合式函数
 * 提供煤种数据的获取、缓存、转换等功能
 */
import { ref, computed, watch } from 'vue';
import { getCoalInfoList } from "@/api/production";
import { ElMessage } from 'element-plus';
import {ref, computed, watch} from 'vue';
import {getCoalInfoList} from "@/api/production";
import {ElMessage} from 'element-plus';

// 全局煤种数据缓存
const coalData = ref([]);
@@ -12,85 +12,85 @@
const isLoaded = ref(false);

export function useCoalData() {
  
  // 获取煤种数据
  const getCoalData = async (forceRefresh = false) => {
    if (isLoaded.value && !forceRefresh) {
      return coalData.value;
    }

    if (isLoading.value) {
      // 如果正在加载，等待加载完成
      return new Promise((resolve) => {
        const unwatch = watch(isLoading, (loading) => {
          if (!loading) {
            unwatch();
            resolve(coalData.value);
          }
        });
      });
    }
    // 获取煤种数据
    const getCoalData = async (forceRefresh = false) => {
        if (isLoaded.value && !forceRefresh) {
            return coalData.value;
        }

    isLoading.value = true;
    try {
      const res = await getCoalInfoList();
      if (res.code === 200) {
        coalData.value = res.data;
        isLoaded.value = true;
        return coalData.value;
      } else {
        ElMessage.error('获取煤种数据失败');
        return [];
      }
    } catch (error) {
      ElMessage.error('获取煤种数据失败');
      console.error('煤种数据获取错误:', error);
      return [];
    } finally {
      isLoading.value = false;
    }
  };
        if (isLoading.value) {
            // 如果正在加载，等待加载完成
            return new Promise((resolve) => {
                const unwatch = watch(isLoading, (loading) => {
                    if (!loading) {
                        unwatch();
                        resolve(coalData.value);
                    }
                });
            });
        }

  // 根据ID获取煤种名称
  const getCoalNameById = (id) => {
    if (!id || coalData.value.length === 0) return id;
    const coal = coalData.value.find(item => item.id == id);
    return coal ? coal.coal : id;
  };
        isLoading.value = true;
        try {
            const res = await getCoalInfoList();
            if (res.code === 200) {
                coalData.value = res.data;
                isLoaded.value = true;
                return coalData.value;
            } else {
                ElMessage.error('获取煤种数据失败');
                return [];
            }
        } catch (error) {
            ElMessage.error('获取煤种数据失败');
            console.error('煤种数据获取错误:', error);
            return [];
        } finally {
            isLoading.value = false;
        }
    };

  // 根据名称获取煤种ID
  const getCoalIdByName = (name) => {
    if (!name || coalData.value.length === 0) return '';
    const coal = coalData.value.find(item => item.coal === name);
    return coal ? coal.id : '';
  };
    // 根据ID获取煤种名称
    const getCoalNameById = (id) => {
        if (!id || coalData.value.length === 0) return id;
        const coal = coalData.value.find(item => item.id == id);
        return coal ? coal.coal : id;
    };

  // 生成下拉选项
  const coalOptions = computed(() => {
    return coalData.value.map(item => ({
      label: item.coal,
      value: item.coal,
      key: item.id
    }));
  });
    // 根据名称获取煤种ID
    const getCoalIdByName = (name) => {
        if (!name || coalData.value.length === 0) return '';
        const coal = coalData.value.find(item => item.coal === name);
        return coal ? coal.id : '';
    };

  // 生成key-value映射
  const coalMap = computed(() => {
    const map = {};
    coalData.value.forEach(item => {
      map[item.id] = item.coal;
    // 生成下拉选项
    const coalOptions = computed(() => {
        return coalData.value.map(item => ({
            label: item.coal,
            value: item.coal,
            key: item.id
        }));
    });
    return map;
  });

  return {
    coalData: computed(() => coalData.value),
    coalOptions,
    coalMap,
    isLoading: computed(() => isLoading.value),
    isLoaded: computed(() => isLoaded.value),
    getCoalData,
    getCoalNameById,
    getCoalIdByName
  };
    // 生成key-value映射
    const coalMap = computed(() => {
        const map = {};
        coalData.value.forEach(item => {
            map[item.id] = item.coal;
        });
        return map;
    });

    return {
        coalData: computed(() => coalData.value),
        coalOptions,
        coalMap,
        isLoading: computed(() => isLoading.value),
        isLoaded: computed(() => isLoaded.value),
        getCoalData,
        getCoalNameById,
        getCoalIdByName
    };
}

 src/views/production/components/useDialog.js

@@ -2,55 +2,55 @@
 * 对话框管理组合式函数
 * 提供对话框的打开、关闭、数据处理等功能
 */
import { ref } from 'vue';
import {ref} from 'vue';

export function useDialog() {
  const dialogVisible = ref(false);
  const dialogType = ref('add');
  const dialogRef = ref(null);
  const currentRowData = ref(null);
    const dialogVisible = ref(false);
    const dialogType = ref('add');
    const dialogRef = ref(null);
    const currentRowData = ref(null);

  // 打开对话框
  const openDialog = (type = 'add', rowData = null) => {
    dialogType.value = type;
    currentRowData.value = rowData;
    dialogVisible.value = true;
    
    // 调用对话框组件的初始化方法
    if (dialogRef.value) {
      if (type === 'add') {
        dialogRef.value.Initialization?.();
      } else if (type === 'edit' && rowData) {
        dialogRef.value.editInitialization?.(rowData);
      }
    }
  };
    // 打开对话框
    const openDialog = (type = 'add', rowData = null) => {
        dialogType.value = type;
        currentRowData.value = rowData;
        dialogVisible.value = true;

  // 关闭对话框
  const closeDialog = () => {
    dialogVisible.value = false;
    dialogType.value = 'add';
    currentRowData.value = null;
  };
        // 调用对话框组件的初始化方法
        if (dialogRef.value) {
            if (type === 'add') {
                dialogRef.value.Initialization?.();
            } else if (type === 'edit' && rowData) {
                dialogRef.value.editInitialization?.(rowData);
            }
        }
    };

  // 对话框成功回调
  const handleDialogSuccess = (callback) => {
    closeDialog();
    if (typeof callback === 'function') {
      callback();
    }
  };
    // 关闭对话框
    const closeDialog = () => {
        dialogVisible.value = false;
        dialogType.value = 'add';
        currentRowData.value = null;
    };

  return {
    // 状态
    dialogVisible,
    dialogType,
    dialogRef,
    currentRowData,
    
    // 方法
    openDialog,
    closeDialog,
    handleDialogSuccess
  };
    // 对话框成功回调
    const handleDialogSuccess = (callback) => {
        closeDialog();
        if (typeof callback === 'function') {
            callback();
        }
    };

    return {
        // 状态
        dialogVisible,
        dialogType,
        dialogRef,
        currentRowData,

        // 方法
        openDialog,
        closeDialog,
        handleDialogSuccess
    };
}

 src/views/production/components/useTableData.js

@@ -2,131 +2,131 @@
 * 表格数据管理组合式函数
 * 提供分页、搜索、选择等通用功能
 */
import { ref, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import {ref, reactive} from 'vue';
import {ElMessage, ElMessageBox} from 'element-plus';

export function useTableData(apiFunction, options = {}) {
  const {
    pageSize = 10,
    searchField = 'searchAll'
  } = options;
    const {
        pageSize = 10,
        searchField = 'searchAll'
    } = options;

  // 响应式数据
  const tableData = ref([]);
  const loading = ref(false);
  const total = ref(0);
  const selectedRows = ref([]);
    // 响应式数据
    const tableData = ref([]);
    const loading = ref(false);
    const total = ref(0);
    const selectedRows = ref([]);

  // 查询参数
  const queryParams = reactive({
    [searchField]: '',
    current: 1,
    size: pageSize,
  });
    // 查询参数
    const queryParams = reactive({
        [searchField]: '',
        current: 1,
        size: pageSize,
    });

  // 获取列表数据
  const getList = async () => {
    loading.value = true;
    try {
      const params = {
        [searchField]: queryParams[searchField],
        current: queryParams.current,
        size: queryParams.size,
      };
      console.log('查询参数:', params);
      const res = await apiFunction(params);
      tableData.value = res.data.records || [];
      total.value = res.data.total || 0;
    } catch (error) {
      ElMessage.error('获取数据失败');
      console.error('API错误:', error);
    } finally {
      loading.value = false;
    }
  };

  // 搜索
  const handleSearch = () => {
    queryParams.current = 1;
    getList();
  };

  // 重置搜索
  const handleReset = () => {
    queryParams[searchField] = '';
    console.log('重置搜索参数:', queryParams);
    handleSearch();
  };

  // 分页处理
  const handlePageChange = ({ page, limit }) => {
    if (page && page !== queryParams.current) {
      queryParams.current = page;
    }
    if (limit && limit !== queryParams.size) {
      queryParams.size = limit;
      queryParams.current = 1; // 改变每页大小时回到第一页
    }
    getList();
  };

  // 表格选择处理
  const handleSelectionChange = (selection) => {
    selectedRows.value = selection;
  };

  // 批量删除
  const deleteSelected = async (deleteFunction) => {
    if (selectedRows.value.length === 0) {
      ElMessage.warning('请选择要删除的数据');
      return;
    }

    try {
      await ElMessageBox.confirm(
        `确认删除选中的 ${selectedRows.value.length} 条数据吗？`,
        '删除确认',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
    // 获取列表数据
    const getList = async () => {
        loading.value = true;
        try {
            const params = {
                [searchField]: queryParams[searchField],
                current: queryParams.current,
                size: queryParams.size,
            };
            console.log('查询参数:', params);
            const res = await apiFunction(params);
            tableData.value = res.data.records || [];
            total.value = res.data.total || 0;
        } catch (error) {
            ElMessage.error('获取数据失败');
            console.error('API错误:', error);
        } finally {
            loading.value = false;
        }
      );
    };

      const ids = selectedRows.value.map(row => row.id);
      await deleteFunction(ids);
      
      ElMessage.success('删除成功');
      selectedRows.value = [];
      getList();
    } catch (error) {
      if (error !== 'cancel') {
        ElMessage.error('删除失败');
        console.error('删除错误:', error);
      }
    }
  };
    // 搜索
    const handleSearch = () => {
        queryParams.current = 1;
        getList();
    };

  // 刷新数据
  const refresh = () => {
    getList();
  };
    // 重置搜索
    const handleReset = () => {
        queryParams[searchField] = '';
        console.log('重置搜索参数:', queryParams);
        handleSearch();
    };

  return {
    // 数据
    tableData,
    loading,
    total,
    selectedRows,
    queryParams,
    
    // 方法
    getList,
    handleSearch,
    handleReset,
    handlePageChange,
    handleSelectionChange,
    deleteSelected,
    refresh
  };
    // 分页处理
    const handlePageChange = ({page, limit}) => {
        if (page && page !== queryParams.current) {
            queryParams.current = page;
        }
        if (limit && limit !== queryParams.size) {
            queryParams.size = limit;
            queryParams.current = 1; // 改变每页大小时回到第一页
        }
        getList();
    };

    // 表格选择处理
    const handleSelectionChange = (selection) => {
        selectedRows.value = selection;
    };

    // 批量删除
    const deleteSelected = async (deleteFunction) => {
        if (selectedRows.value.length === 0) {
            ElMessage.warning('请选择要删除的数据');
            return;
        }

        try {
            await ElMessageBox.confirm(
                `确认删除选中的 ${selectedRows.value.length} 条数据吗？`,
                '删除确认',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }
            );

            const ids = selectedRows.value.map(row => row.id);
            await deleteFunction(ids);

            ElMessage.success('删除成功');
            selectedRows.value = [];
            getList();
        } catch (error) {
            if (error !== 'cancel') {
                ElMessage.error('删除失败');
                console.error('删除错误:', error);
            }
        }
    };

    // 刷新数据
    const refresh = () => {
        getList();
    };

    return {
        // 数据
        tableData,
        loading,
        total,
        selectedRows,
        queryParams,

        // 方法
        getList,
        handleSearch,
        handleReset,
        handlePageChange,
        handleSelectionChange,
        deleteSelected,
        refresh
    };
}

 src/views/production/index.vue

@@ -4,9 +4,9 @@
    <el-form :inline="true" :model="queryParams" class="search-form">
      <el-form-item label="搜索">
        <el-input
          v-model="queryParams.searchAll"
          placeholder="请输入关键词"
          clearable
            v-model="queryParams.searchAll"
            placeholder="请输入关键词"
            clearable
        />
      </el-form-item>
      <el-form-item>
@@ -27,18 +27,19 @@
        </el-button>
      </div>      <!-- 数据表格 -->
      <ETable
        :showOverflowTooltip="false"
        :loading="loading"
        :table-data="tableData"
        :columns="columns"
        :current-page="queryParams.current"
        :page-size="queryParams.size"
        @selection-change="handleSelectionChange"
        @edit="row => openDialog('edit', row)"
        :show-selection="true"
        :border="true"
        :maxHeight="480"
      >        <template #coal="{ row }">
          :showOverflowTooltip="false"
          :loading="loading"
          :table-data="tableData"
          :columns="columns"
          :current-page="queryParams.current"
          :page-size="queryParams.size"
          @selection-change="handleSelectionChange"
          @edit="row => openDialog('edit', row)"
          :show-selection="true"
          :border="true"
          :maxHeight="480"
      >
        <template #coal="{ row }">
          <div class="coal-tags">
            <el-tag v-for="coal in parseCoalArray(row.coal)" :key="coal" size="small">
              {{ getCoalNameById(coal) }}
@@ -48,47 +49,47 @@
        </template>
      </ETable>      <!-- 分页组件 -->
      <Pagination
        :layout="'total, prev, pager, next, jumper'"
        :total="total"
        v-model:page="queryParams.current"
        :limit="queryParams.size"
        @pagination="handlePageChange"
          :layout="'total, prev, pager, next, jumper'"
          :total="total"
          v-model:page="queryParams.current"
          :limit="queryParams.size"
          @pagination="handlePageChange"
      />
    </el-card>

    <!-- 生产对话框 -->
    <!-- handleProductionAndProcessing -->
    <ProductionDialog
      v-model:visible="dialogVisible"
      ref="dialogRef"
      :type="dialogType"
      @update:productionAndProcessing="handleProductionAndProcessing"
      @success="handleDialogSuccess"
        v-model:visible="dialogVisible"
        ref="dialogRef"
        :type="dialogType"
        @update:productionAndProcessing="handleProductionAndProcessing"
        @success="handleDialogSuccess"
    />
  </div>
</template>

<script setup>
import { onMounted } from "vue";
import { ElMessage } from "element-plus";
import { Plus, Delete } from "@element-plus/icons-vue";
import {onMounted} from "vue";
import {ElMessage} from "element-plus";
import {Plus, Delete} from "@element-plus/icons-vue";
import ProductionDialog from "./components/ProductionDialog.vue";
import ETable from "@/components/Table/ETable.vue";
import Pagination from "@/components/Pagination/index.vue";
import { getProductionMasterList, delPM } from "@/api/production";
import { parseCoalArray } from "@/utils/production";
import { useTableData } from "./components/useTableData.js";
import { useDialog } from "./components/useDialog.js";
import { useCoalData } from "./components/useCoalData.js";
import {getProductionMasterList, delPM} from "@/api/production";
import {parseCoalArray} from "@/utils/production";
import {useTableData} from "./components/useTableData.js";
import {useDialog} from "./components/useDialog.js";
import {useCoalData} from "./components/useCoalData.js";

// 表格列配置
const columns = [
  { prop: "coal", label: "煤种", minWidth: 150, slot: 'coal' },
  { prop: "productionQuantity", label: "生产数量", minWidth: 120 },
  { prop: "laborCost", label: "人工成本", minWidth: 150 },
  { prop: "energyConsumptionCost", label: "能耗成本", minWidth: 120 },
  { prop: "equipmentDepreciation", label: "设备折旧", minWidth: 143 },
  { prop: "totalCost", label: "总成本", minWidth: 150 },
  {prop: "coal", label: "煤种", minWidth: 150, slot: 'coal'},
  {prop: "productionQuantity", label: "生产数量", minWidth: 120},
  {prop: "laborCost", label: "人工成本", minWidth: 150},
  {prop: "energyConsumptionCost", label: "能耗成本", minWidth: 120},
  {prop: "equipmentDepreciation", label: "设备折旧", minWidth: 143},
  {prop: "totalCost", label: "总成本", minWidth: 150},
];

// 使用表格数据组合式函数
@@ -104,7 +105,7 @@
  handlePageChange,
  handleSelectionChange,
  deleteSelected
} = useTableData(getProductionMasterList, { pageSize: 10 });
} = useTableData(getProductionMasterList, {pageSize: 10});

// 使用对话框组合式函数
const {
@@ -116,13 +117,13 @@
} = useDialog();

// 使用煤种数据组合式函数
const { getCoalNameById, getCoalData } = useCoalData();
const {getCoalNameById, getCoalData} = useCoalData();

// 处理生产数据更新
const handleProductionAndProcessing = (row, rows) => {
  const index = tableData.value.findIndex(item => item.id === rows.id);
  if (index !== -1) {
    tableData.value[index] = { ...tableData.value[index], ...row };
    tableData.value[index] = {...tableData.value[index], ...row};
  }
};

@@ -158,6 +159,7 @@
    width: 20%;
  }
}

.search-form {
  display: flex;
  justify-content: space-between;
@@ -172,15 +174,16 @@
    margin-left: 10px;
  }
}

.coal-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  

  .el-tag {
    margin-right: 4px;
    margin-bottom: 4px;
    

    &:last-child {
      margin-right: 0;
    }