文档管理 树形菜单 新增修改优化 生产加工模块的 数据tags 显示 生产人的匹配

zhang_12370

6 天以前 807df6dedd5078e0dd9f6515a8e1ea93e19a6f52

文档管理 树形菜单 新增修改优化 生产加工模块的 数据tags 显示 生产人的匹配

 src/components/dialog/Descriptions.vue

@@ -96,6 +96,11 @@
  fieldLabels: {
    type: Object,
    default: () => ({})
  },
  // 字段显示顺序
  fieldOrder: {
    type: Array,
    default: () => []
  }
});

@@ -113,25 +118,46 @@
  }

  const data = { ...props.formData };
  let result = {};
  let filteredResult = {};

  // 如果指定了包含字段，则只显示这些字段
  if (props.includeFields.length > 0) {
    props.includeFields.forEach(field => {
      if (data.hasOwnProperty(field)) {
        result[field] = data[field];
        filteredResult[field] = data[field];
      }
    });
  } else {
    // 否则排除指定字段
    Object.keys(data).forEach(key => {
      if (!props.excludeFields.includes(key)) {
        result[key] = data[key];
        filteredResult[key] = data[key];
      }
    });
  }

  return result;
  // 如果指定了字段顺序，则按顺序重新组织数据
  if (props.fieldOrder.length > 0) {
    const orderedResult = {};
    
    // 先按指定顺序添加字段
    props.fieldOrder.forEach(field => {
      if (filteredResult.hasOwnProperty(field)) {
        orderedResult[field] = filteredResult[field];
      }
    });
    
    // 再添加未在顺序中指定的其他字段
    Object.keys(filteredResult).forEach(key => {
      if (!props.fieldOrder.includes(key)) {
        orderedResult[key] = filteredResult[key];
      }
    });
    
    return orderedResult;
  }

  return filteredResult;
});

// 获取字段显示标签

 src/utils/production.js

@@ -10,9 +10,7 @@
 */
export function parseCoalArray(coalString) {
  if (!coalString) return [];
  
  if (Array.isArray(coalString)) return coalString;
  
  return String(coalString)
    .replace(/^\[|\]$/g, '')
    .split(',')
@@ -61,7 +59,6 @@
  }

  for (let i = 0; i < data.length; i++) {
    console.log(data[i])
    const item = data[i];
    for (const field of requiredFields) {
      if (item[field] === '' || item[field] === null || item[field] === undefined) {

 src/views/archiveManagement/index.vue

@@ -201,15 +201,14 @@
    ElMessage.error("操作失败，请稍后重试");
  }
};
// 当前组件的数据
const initTreeData = ref([]); // 树形数据

const centerDialogVisible = (val) => {
  dialogVisible.value = val;
};
const tableSwitch = ref(false);
// 处理节点点击
const handleNodeClick = (data) => {
  initTreeData.value = data || [];
  console.log("点击节点", data);
  tableSwitch.value = true;
  // 切换节点时重置到第一页
  queryParams.current = 1;
@@ -227,7 +226,7 @@
    // 确保组件引用存在后再调用方法
    nextTick(() => {
      if (archiveDialogs.value && typeof archiveDialogs.value.initForm === 'function') {
        archiveDialogs.value.initForm(initTreeData); // 重置表单
        archiveDialogs.value.initForm(); // 重置表单
      }
    });
  } catch (error) {
@@ -489,15 +488,16 @@
    const hasChildren = data.children;
    const nodeKey = data.id || data;
    const node = treeRef.value?.getNode(nodeKey);
    const isExpanded = node?.expanded;
    
    // 如果有子级且未展开，先展开节点
    const isExpanded = node?.expanded; // 如果有子级且未展开，先展开节点
    if (hasChildren && !isExpanded) {
      if (treeRef.value && treeRef.value.store && treeRef.value.store.nodesMap[nodeKey]) {
      if (
          treeRef.value &&
          treeRef.value.store &&
          treeRef.value.store.nodesMap[nodeKey]
      ) {
        treeRef.value.store.nodesMap[nodeKey].expanded = true;
      }
    }
    
    const newNode = {
      name: "新子节点",
      isEdit: true,
@@ -508,12 +508,6 @@
    }
    data.children.push(newNode);
    newName.value = "新子节点";

    // 确保父节点展开
    if (node) {
      node.expanded = true;
      expandParentNodes(node);
    }

    // 根据是否需要展开来决定延迟时间
    const delay = hasChildren && !isExpanded ? 200 : 50;

 src/views/archiveManagement/mould/archiveDialog.vue

@@ -149,7 +149,6 @@
    // 发送 emit 事件

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

 src/views/basicInformation/index.vue

@@ -146,21 +146,6 @@
        :title="title"
        @submit="handleSubmit"
      />
      <Descriptions
        v-model:descriptionsVisible="showDialog"
        title="供应商详情"
        :formData="supplierData"
        :fieldLabels="supplierFieldLabels"
        :column="2"
        :isViewOnly="false"
        :border="true"
        :showOperations="true"
        descriptionsTitle="基本信息"
        :fieldConfig="fieldConfig"
        :excludeFields="excludeFields"
        @edit="descriptionsHandleEdit"
        @close="handleClose"
      />
    </el-card>
  </div>
</template>
@@ -206,74 +191,18 @@
} from "@/api/basicInformation/coalQualityMaintenance";

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

// ===== 响应式状态管理 =====
// 弹窗控制状态
const showDialog = ref(false)
const supplierFieldLabels = {
  supplierName: '供应商名称',
  taxpayerId: '统一社会信用代码',
}
// 数据对象
const supplierData = ref({
  supplierName: "测试供应商",
  taxpayerId: "91320000MA1N2P3Q4R", 
  contactPerson: "张三",
  contactPhone: "13800138000",
  bankAccount: "6222024200019999999",
  bankName: "中国工商银行",
  businessAddress: "江苏省苏州市工业园区星湖街328号",
  contactAddress: "江苏省苏州市姑苏区观前街100号",
  createTime: "2024-01-15T10:30:00",
  updateTime: "2024-06-25T14:20:00",
  id: 123,
})
// 字段配置
const fieldConfig = ref({
  supplierName: { 
    label: '供应商名称', 
    span: 2  // 跨2列显示
  },
  taxpayerId: { 
    label: '统一社会信用代码' 
  },
  contactPhone: { 
    label: '联系电话',
    formatter: (value) => value || '暂无联系方式'
  },
  createTime: {
    label: '创建时间',
    formatter: (value) => new Date(value).toLocaleDateString('zh-CN')
  },
  businessAddress: {
    label: '详细经营地址',
    span: 2
  },
  contactAddress: {
    label: '详细联系地址',
    span: 2
  }
})
// 排除不显示的字段
const excludeFields = ref(["id", "updateTime", "deleted"]);
const showDialog = ref(false);
const currentViewData = ref({}); // 当前查看的数据

// 事件处理
const descriptionsHandleEdit = (data) => {
  console.log("编辑数据:", data);
  // 跳转到编辑页面或打开编辑弹窗
};

const handleClose = () => {
  console.log("弹窗关闭");
};

const dialogFormVisible = ref(false);
const form = ref({});
const title = ref("");
const copyForm = ref({});
const addOrEdit = ref("add");
const descriptionsVisible = ref(false);

// 数据缓存映射
const userList = ref([]);
@@ -430,8 +359,6 @@
  return matchedField ? matchedField.fieldName : numId;
};

// ===== 计算属性 =====

/**
 * 当前标签页是否支持导出功能
 */
@@ -470,11 +397,6 @@
 * 当前选中行数量
 */
const selectedCount = computed(() => selectedRows.value.length);

/**
 * 是否有选中的行
 */
const hasSelectedRows = computed(() => selectedCount.value > 0);

// ===== 表格列配置 =====

@@ -796,48 +718,6 @@
  handleAddEdit(tabName.value);
};

/**
 * 查看按钮点击处理
 * @param {Object} row - 行数据
 * @description 处理查看操作，构建地址数组并打开查看弹窗
 */
const handleView = (row) => {
  console.log("查看行数据:", row);
  // 拿到所有的keys
  const keys = Object.keys(row);
  console.log("所有keys:", keys);
  showDialog.value = true;
  // form.value = JSON.parse(JSON.stringify(row));
  // console.log("查看行数据:", form.value);
  // // 构建供应商业务地址数组
  // 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 = "viewRow";
  // handleAddEdit(tabName.value);
};

/**
 * 批量删除处理

 src/views/inspectionUpload/index.vue

@@ -66,7 +66,7 @@
              </template>
            </el-table-column>
          </el-table>
          <el-table ref="table" :data="tableData" height="480" v-loading="tableLoading" v-if="activeTab === 'qrCode'"border style="width: 100%;height: calc(100vh - 23em)">
          <el-table ref="table" :data="tableData" height="480" v-loading="tableLoading" v-if="activeTab === 'qrCode'" border style="width: 100%;height: calc(100vh - 23em)">
            <el-table-column label="序号" type="index" width="60" align="center" />
            <el-table-column prop="deviceName" label="设备名称" :show-overflow-tooltip="true">
              <template #default="scope">

 src/views/production/components/ProductionDetailsTable.vue

@@ -110,7 +110,7 @@
      <template #default="{ row, $index }">
        <el-select
            clearable
            :model-value="getUserNameById(row.producer) || row.producer"
            :model-value="getUserNameById(row.producerId) || row.producerId"
            placeholder="请选择生产人"
            @change="(value) => handleUserSelectChange(row, value)"
            filterable
@@ -339,12 +339,13 @@
};
// 处理用户选择变化（新方法：名称选择转ID）
const handleUserSelectChange = (row, selectedName) => {
  console.log("handleUserSelectChange", row, selectedName);
  // 根据选择的名称找到对应的ID
  const userItem = userList.value.find(item => item.value === selectedName);
  if (userItem) {
    row.producer = userItem.key; // 设置为ID
    row.producerId = userItem.key; // 设置为ID
  } else {
    row.producer = ''; // 如果没找到，清空
    row.producerId = ''; // 如果没找到，清空
  }
};
// 暴露方法给父组件使用
@@ -364,7 +365,7 @@
      equipmentDepreciation: "",
      purchasePrice: "",
      totalCost: "",
      producer: "",
      producerId: "",
      ...rowData,
    };
    tableData.value = [...tableData.value, defaultRow];

 src/views/production/components/ProductionDialog.vue

@@ -396,7 +396,7 @@
  for (let i = 0; i < tableData.value.length; i++) {
    const element = tableData.value[i];
    if (element.usedQuantity == 0 || element.usedQuantity === null) {
      ElMessage.warning(`请填写使用数量: ${element.coal}`);
      ElMessage.warning(`请填写生产加工煤种的使用数量`);
      return;
    }
  }

 src/views/production/index.vue

@@ -1,5 +1,5 @@
<template>
  <div class="app-container">
  <div>
    <!-- 搜索表单 -->
    <el-form :inline="true" :model="queryParams" class="search-form">
      <el-form-item label="搜索">
@@ -39,12 +39,20 @@
          :border="true"
          style="width: 100%;height: calc(100vh - 26em)"
      >
        <template #coal="{ row }">
        <template #coalId="{ row }">
          <div class="coal-tags">
            <el-tag v-for="coal in parseCoalArray(row.coal)" :key="coal" size="small">
              {{ getCoalNameById(coal) }}
            </el-tag>
            <span v-if="!row.coal">--</span>
            <template v-if="row.coalId">
              <el-tag 
                v-for="coal in parseCoalArray(row.coalId)" 
                :key="coal" 
                size="small"
                type="primary"
                class="coal-tag"
              >
                {{ getDisplayCoalName(coal) }}
              </el-tag>
            </template>
            <span v-else class="no-data">--</span>
          </div>
        </template>
      </ETable>      <!-- 分页组件 -->
@@ -70,7 +78,7 @@
</template>

<script setup>
import {onMounted} from "vue";
import {onMounted, ref} from "vue";
import {ElMessage} from "element-plus";
import {Plus, Delete} from "@element-plus/icons-vue";
import ProductionDialog from "./components/ProductionDialog.vue";
@@ -83,13 +91,12 @@
import {useCoalData} from "./components/useCoalData.js";
import {getCoalInfoList} from "@/api/production";

// 煤种信息列表
const coalInfoList = ref([]);

// 表格列配置
const columns = [
  {prop: "coalId", label: "煤种", minWidth: 150,
    formatter: (row) => {
      return coalInfoList.value.find(item => item.id == row.coalId)?.coal || '--';
    }
  },
  {prop: "coalId", label: "煤种", minWidth: 150, slot: true},
  {prop: "productionQuantity", label: "生产数量", minWidth: 120},
  {prop: "laborCost", label: "人工成本", minWidth: 150},
  {prop: "energyConsumptionCost", label: "能耗成本", minWidth: 120},
@@ -124,6 +131,20 @@
// 使用煤种数据组合式函数
const {getCoalNameById, getCoalData} = useCoalData();

// 获取煤种显示名称（带备用逻辑）
const getDisplayCoalName = (coalId) => {
  // 优先使用 useCoalData 的方法
  let name = getCoalNameById(coalId);
  
  // 如果没有找到，尝试从 coalInfoList 中查找
  if (name === coalId && coalInfoList.value.length > 0) {
    const found = coalInfoList.value.find(item => item.id == coalId);
    name = found ? found.coal : coalId;
  }
  
  return name || coalId;
};

// 处理生产数据更新
const handleProductionAndProcessing = (row, rows) => {
  const index = tableData.value.findIndex(item => item.id === rows.id);
@@ -139,13 +160,26 @@
    ElMessage.success("操作成功");
  });
};
const coalInfoList = ref([]);

// 组件挂载时加载数据
onMounted(async () => {
  await getCoalData(); // 预加载煤种数据
  getList();
  let res = await getCoalInfoList()
  coalInfoList.value = res.data;
  try {
    // 并行加载煤种数据和表格数据
    await Promise.all([
      getCoalData(), // 预加载煤种数据
      (async () => {
        const res = await getCoalInfoList();
        if (res.code === 200) {
          coalInfoList.value = res.data;
        }
      })()
    ]);
    
    // 加载表格数据
    getList();
  } catch (error) {
    ElMessage.error('数据加载失败，请刷新页面重试');
  }
});
</script>

@@ -187,8 +221,9 @@
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;

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

@@ -196,5 +231,10 @@
      margin-right: 0;
    }
  }

  .no-data {
    color: #999;
    font-style: italic;
  }
}
</style>