From c8025c2f6d5ba52649ebe043fa44ff8d8768f411 Mon Sep 17 00:00:00 2001
From: zhang_12370 <z2864490065@outlook.com>
Date: 星期三, 25 六月 2025 11:37:31 +0800
Subject: [PATCH] 开发通用查看单条数据的详情页面 优化基础模块 优化生产加工数据匹配渲染问题

---
 src/views/basicInformation/index.vue          |  522 ++++++++++++++++++++++-------
 src/components/dialog/Descriptions.vue        |  230 +++++++++++++
 src/views/production/index.vue                |   10 
 src/views/basicInformation/mould/supplier.vue |  225 +++++++++----
 src/components/Table/ETable.vue               |   15 
 5 files changed, 787 insertions(+), 215 deletions(-)

diff --git a/src/components/Table/ETable.vue b/src/components/Table/ETable.vue
index a43e501..e3b317e 100644
--- a/src/components/Table/ETable.vue
+++ b/src/components/Table/ETable.vue
@@ -32,20 +32,13 @@
       </el-table-column>
     </template>
     <!-- 鎿嶄綔鍒� -->
-    <el-table-column v-if="showOperations" :label="operationsLabel" :width="operationsWidth" fixed="right" align="center">
+    <el-table-column v-if="showOperations" :label="operationsLabel" :width="operationsWidth" :show-overflow-tooltip="false" fixed="right" align="center">
       <template #default="scope">
         <slot name="operations" :row="scope.row">
           <el-button v-if="operations.includes('edit')" link type="primary" size="small"
             @click="handleEdit(scope.row)">缂栬緫</el-button>
-          <el-button v-if="operations.includes('viewFile')" link type="primary" size="small"
+          <el-button v-if="operations.includes('viewRow')" link type="primary" size="small"
             @click="handleView(scope.row)">鏌ョ湅闄勪欢</el-button>
-          <!--            <el-button-->
-          <!--              v-if="operations.includes('delete')"-->
-          <!--              link-->
-          <!--              type="danger"-->
-          <!--              size="small"-->
-          <!--              @click="handleDelete(scope.row)"-->
-          <!--            >鍒犻櫎</el-button>-->
         </slot>
       </template>
     </el-table-column>
@@ -168,7 +161,7 @@
 };
 
 // 澶勭悊閫夋嫨鍙樺寲銆佺紪杈戙�佸垹闄ゅ拰瀵煎嚭鎿嶄綔
-const emit = defineEmits(['selection-change', 'edit', 'delete', 'export'])
+const emit = defineEmits(['selection-change', 'edit', 'delete', 'export', 'viewRow'])
 const handleSelectionChange = (selection) => {
   emit('selection-change', selection)
 }
@@ -176,7 +169,7 @@
   emit('edit', row)
 }
 const handleView = (row) => {
-  emit('viewFile', row)
+  emit('viewRow', row)
 }
 const handleDelete = (row) => {
   ElMessageBox.confirm(
diff --git a/src/components/dialog/Descriptions.vue b/src/components/dialog/Descriptions.vue
new file mode 100644
index 0000000..eef36d5
--- /dev/null
+++ b/src/components/dialog/Descriptions.vue
@@ -0,0 +1,230 @@
+<template>
+  <el-dialog v-model="descriptionsVisible" :title="title" width="60%" :close-on-click-modal="false">
+    <el-card>
+      <el-descriptions
+        class="margin-top"
+        :title="descriptionsTitle"
+        :column="column"
+        :size="size"
+        :border="border"
+      >
+        <template v-if="showOperations" #extra>
+          <slot name="extra">
+            <el-button type="primary" @click="handleEdit" v-if="!isViewOnly">缂栬緫</el-button>
+          </slot>
+        </template>        <!-- 鍔ㄦ�佹覆鏌撴墍鏈夋暟鎹」 -->
+        <el-descriptions-item 
+          v-for="(item, key) in filteredData" 
+          :key="`desc-item-${key}`"
+          :label="getFieldLabel(key)"
+          :span="getFieldSpan(key)"
+        >
+          {{ formatValue(item, key) }}
+        </el-descriptions-item>
+      </el-descriptions>
+    </el-card>
+    
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="handleClose">鍏抽棴</el-button>
+        <el-button v-if="!isViewOnly" type="primary" @click="handleEdit">缂栬緫</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { defineProps, computed } from "vue";
+
+const props = defineProps({
+  // 寮圭獥鏍囬
+  title: {
+    type: String,
+    default: "璇︽儏淇℃伅"
+  },
+  // 鏁版嵁瀵硅薄
+  formData: {
+    type: Object,
+    default: () => ({})
+  },
+  // 鏄惁涓烘煡鐪嬫ā寮�
+  isViewOnly: {
+    type: Boolean,
+    default: true
+  },
+  // 鎻忚堪缁勪欢鏍囬
+  descriptionsTitle: {
+    type: String,
+    default: ""
+  },
+  // 鍒楁暟
+  column: {
+    type: Number,
+    default: 2
+  },
+  // 灏哄
+  size: {
+    type: String,
+    default: "default",
+    validator: (value) => ["large", "default", "small"].includes(value)
+  },
+  // 鏄惁鏄剧ず杈规
+  border: {
+    type: Boolean,
+    default: true
+  },
+  // 鏄惁鏄剧ず鎿嶄綔鎸夐挳
+  showOperations: {
+    type: Boolean,
+    default: true
+  },
+  // 瀛楁鏄犲皠閰嶇疆 { key: { label: '鏄剧ず鍚嶇О', span?: 璺ㄥ垪鏁�, formatter?: 鏍煎紡鍖栧嚱鏁� } }
+  fieldConfig: {
+    type: Object,
+    default: () => ({})
+  },
+  // 闇�瑕佹帓闄ゆ樉绀虹殑瀛楁
+  excludeFields: {
+    type: Array,
+    default: () => ['id', 'createTime', 'updateTime', 'deleted']
+  },  // 闇�瑕佸寘鍚樉绀虹殑瀛楁锛堝鏋滆缃簡锛屽垯鍙樉绀鸿繖浜涘瓧娈碉級
+  includeFields: {
+    type: Array,
+    default: () => []
+  },
+  // 瀛楁鏍囩鏄犲皠琛� { key: '鏄剧ず鍚嶇О' }
+  fieldLabels: {
+    type: Object,
+    default: () => ({})
+  }
+});
+
+const descriptionsVisible = defineModel("descriptionsVisible", {
+  type: Boolean,
+  default: false,
+});
+
+const emit = defineEmits(["update:descriptionsVisible", "edit", "close"]);
+
+// 杩囨护鍚庣殑鏁版嵁
+const filteredData = computed(() => {
+  if (!props.formData || typeof props.formData !== 'object') {
+    return {};
+  }
+
+  const data = { ...props.formData };
+  let result = {};
+
+  // 濡傛灉鎸囧畾浜嗗寘鍚瓧娈碉紝鍒欏彧鏄剧ず杩欎簺瀛楁
+  if (props.includeFields.length > 0) {
+    props.includeFields.forEach(field => {
+      if (data.hasOwnProperty(field)) {
+        result[field] = data[field];
+      }
+    });
+  } else {
+    // 鍚﹀垯鎺掗櫎鎸囧畾瀛楁
+    Object.keys(data).forEach(key => {
+      if (!props.excludeFields.includes(key)) {
+        result[key] = data[key];
+      }
+    });
+  }
+
+  return result;
+});
+
+// 鑾峰彇瀛楁鏄剧ず鏍囩
+const getFieldLabel = (key) => {
+  // 1. 浼樺厛浣跨敤 fieldConfig 涓殑鏍囩閰嶇疆
+  if (props.fieldConfig[key]?.label) {
+    return props.fieldConfig[key].label;
+  }
+  
+  // 2. 鍏舵浣跨敤浼犲叆鐨勫瓧娈垫槧灏勮〃
+  if (props.fieldLabels[key]) {
+    return props.fieldLabels[key];
+  }
+  
+  // 3. 鏈�鍚庝娇鐢ㄩ粯璁ょ殑瀛楁鍚嶈浆鎹紙椹煎嘲杞┖鏍硷級
+  return key.replace(/([A-Z])/g, ' $1').replace(/^./, str => str.toUpperCase());
+};
+
+// 鑾峰彇瀛楁璺ㄥ垪鏁�
+const getFieldSpan = (key) => {
+  return props.fieldConfig[key]?.span || 1;
+};
+
+// 鏍煎紡鍖栧��
+const formatValue = (value, key) => {
+  // 浼樺厛浣跨敤閰嶇疆鐨勬牸寮忓寲鍑芥暟
+  if (props.fieldConfig[key]?.formatter && typeof props.fieldConfig[key].formatter === 'function') {
+    return props.fieldConfig[key].formatter(value);
+  }
+
+  // 榛樿鏍煎紡鍖�
+  if (value === null || value === undefined || value === '') {
+    return '--';
+  }
+
+  // 鏁扮粍鏍煎紡鍖�
+  if (Array.isArray(value)) {
+    return value.join(', ');
+  }
+
+  // 瀵硅薄鏍煎紡鍖�
+  if (typeof value === 'object') {
+    return JSON.stringify(value);
+  }
+
+  // 鏃ユ湡鏍煎紡鍖�
+  if (key.toLowerCase().includes('time') || key.toLowerCase().includes('date')) {
+    try {
+      const date = new Date(value);
+      if (!isNaN(date.getTime())) {
+        return date.toLocaleString('zh-CN');
+      }
+    } catch (e) {
+      // 濡傛灉涓嶆槸鏈夋晥鏃ユ湡锛岃繑鍥炲師鍊�
+    }
+  }
+
+  return String(value);
+};
+
+// 澶勭悊缂栬緫鎸夐挳鐐瑰嚮
+const handleEdit = () => {
+  emit('edit', props.formData);
+};
+
+// 澶勭悊鍏抽棴
+const handleClose = () => {
+  descriptionsVisible.value = false;
+  emit('close');
+};
+</script>
+
+<style scoped>
+.margin-top {
+  margin-top: 20px;
+}
+
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+}
+
+.cell-item {
+  display: flex;
+  align-items: center;
+}
+
+:deep(.el-descriptions__label) {
+  font-weight: 600;
+}
+
+:deep(.el-descriptions__content) {
+  word-break: break-word;
+}
+</style>
diff --git a/src/views/basicInformation/index.vue b/src/views/basicInformation/index.vue
index b41cf57..caf93be 100644
--- a/src/views/basicInformation/index.vue
+++ b/src/views/basicInformation/index.vue
@@ -2,7 +2,11 @@
   <div class="app-container">
     <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-input
+          v-model="queryParams.searchAll"
+          :placeholder="searchPlaceholder"
+          clearable
+        />
       </el-form-item>
       <el-form-item>
         <el-button type="primary" @click="search">鏌ヨ</el-button>
@@ -11,63 +15,167 @@
     </el-form>
     <el-card>
       <!-- 鏍囩椤� -->
-      <el-tabs v-model="activeTab" class="info-tabs" @tab-click="handleTabClick">
-        <el-tab-pane v-for="tab in tabs" :key="tab.name" :label="tab.label" :name="tab.name"/>
+      <el-tabs
+        v-model="activeTab"
+        class="info-tabs"
+        @tab-click="handleTabClick"
+      >
+        <el-tab-pane
+          v-for="tab in tabs"
+          :key="tab.name"
+          :label="tab.label"
+          :name="tab.name"
+        />
       </el-tabs>
 
       <!-- 鎿嶄綔鎸夐挳鍖� -->
       <el-row :gutter="24" class="table-toolbar">
-        <el-button :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> <!-- 琛ㄦ牸缁勪欢 -->
+        <el-button :icon="Plus" type="primary" @click="handleAdd"
+          >鏂板缓</el-button
+        >
+        <el-button :icon="Delete" type="danger" @click="handleDelete"
+          >鍒犻櫎</el-button
+        >
+        <el-button
+          v-show="canExport"
+          :icon="Download"
+          type="info"
+          @click="handleExport"
+          >瀵煎嚭</el-button
+        >
+      </el-row>
+      <!-- 琛ㄦ牸缁勪欢 -->
       <div>
-        <data-table :border="true" :columns="columns" :loading="loading" style="width: 100%;height: calc(100vh - 29em)"
-                    :show-selection="true" :table-data="tableData" @edit="handleEdit" @selection-change="handleSelectionChange">
+        <data-table
+          :border="true"
+          :columns="columns"
+          :loading="loading"
+          style="width: 100%; height: calc(100vh - 29em)"
+          :show-selection="true"
+          :table-data="tableData"
+          @edit="handleEdit"
+          @viewRow="handleView"
+          @selection-change="handleSelectionChange"
+          :showOperations="true"
+          :showIndex="true"
+          :showPagination="false"
+          :operations="['edit', 'viewRow']"
+          :operationsWidth="200"
+        >
           <!-- 瀛楁鍚嶇О鍒楃殑鑷畾涔夋彃妲� - 鏄剧ず涓烘爣绛� -->
-          <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" size="small" style="margin-right: 4px; margin-bottom: 2px;"
-                      type="primary">
+          <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"
+                size="small"
+                style="margin-right: 4px; margin-bottom: 2px"
+                type="primary"
+              >
                 {{ getFieldDisplayName(field.trim()) }}
               </el-tag>
             </template>
             <template v-else>
               <el-tag size="small" type="primary">
-                {{ getFieldDisplayName(row.fieldIds) || '--' }}
+                {{ getFieldDisplayName(row.fieldIds) || "--" }}
               </el-tag>
             </template>
           </template>
         </data-table>
       </div>
-      <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" :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" :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"/>
+      <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"
+        :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"
+        :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"
+      />
+      <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>
 
 <script setup>
-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 {
+  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";
@@ -77,28 +185,95 @@
 import Coal from "./mould/coal.vue";
 import coalQualityMaintenance from "./mould/coalQualityMaintenance.vue";
 import coalMeiZhiZiDuanWeiHu from "./mould/coalMeiZhiZiDuanWeiHu.vue";
+import Descriptions from "@/components/dialog/Descriptions.vue";
 
 // ===== API 鏈嶅姟瀵煎叆 =====
-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";
+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 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 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([]);
@@ -131,11 +306,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: "鐓よ川瀛楁" },
 ]);
 
 // ===== 宸ュ叿鍑芥暟 =====
@@ -153,7 +328,7 @@
       buildAddressMap(res.data);
     }
   } catch (error) {
-    console.error('鑾峰彇鍦板潃閫夐」澶辫触:', error);
+    console.error("鑾峰彇鍦板潃閫夐」澶辫触:", error);
   }
 };
 
@@ -164,11 +339,11 @@
  */
 const buildAddressMap = (areaData) => {
   const buildMap = (list, pathList = []) => {
-    list.forEach(item => {
+    list.forEach((item) => {
       const currentPath = [...pathList, item.label];
       addressMap.value[item.id] = {
         name: item.label,
-        fullPath: currentPath.join(' / ')
+        fullPath: currentPath.join(" / "),
       };
       if (item.children && item.children.length > 0) {
         buildMap(item.children, currentPath);
@@ -185,19 +360,26 @@
  * @description 灏嗗湴鍧�ID鏁扮粍杞崲涓哄彲璇荤殑鍦板潃瀛楃涓�
  */
 const formatAddressArray = (addressIds) => {
-  if (!addressMap.value || Object.keys(addressMap.value).length === 0 ||
-      !addressIds || !Array.isArray(addressIds) || addressIds.length === 0 ||
-      addressIds.every(id => !id)) {
-    return '--';
+  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 || '--');
+  const addressNames = addressIds.map(
+    (id) => addressMap.value[id]?.name || "--"
+  );
 
-  if (addressNames.every(name => name === '--')) {
-    return '--';
+  if (addressNames.every((name) => name === "--")) {
+    return "--";
   }
 
-  return addressNames.filter(name => name !== '--').join(' / ');
+  return addressNames.filter((name) => name !== "--").join(" / ");
 };
 
 /**
@@ -209,12 +391,12 @@
     const res = await testUserList();
     if (res && res.data) {
       userList.value = res.data;
-      userList.value.forEach(user => {
+      userList.value.forEach((user) => {
         userMap.value[user.userId] = user.username;
       });
     }
   } catch (error) {
-    console.error('鑾峰彇鐢ㄦ埛鍒楄〃澶辫触:', error);
+    console.error("鑾峰彇鐢ㄦ埛鍒楄〃澶辫触:", error);
   }
 };
 
@@ -224,12 +406,12 @@
  */
 const coalFieldData = async () => {
   try {
-    const {data, code} = await getCoalFieldList();
+    const { data, code } = await getCoalFieldList();
     if (code === 200) {
       coalFieldList.value = data;
     }
   } catch (error) {
-    console.error('鑾峰彇鐓よ川瀛楁鏁版嵁澶辫触:', error);
+    console.error("鑾峰彇鐓よ川瀛楁鏁版嵁澶辫触:", error);
   }
 };
 
@@ -240,10 +422,10 @@
  * @description 閫氳繃瀛楁ID鍖归厤瀵瑰簲鐨勫瓧娈靛悕绉�
  */
 const getFieldDisplayName = (fieldId) => {
-  if (!fieldId) return '--';
+  if (!fieldId) return "--";
 
   const numId = parseInt(fieldId);
-  const matchedField = coalFieldList.value.find(item => item.id === numId);
+  const matchedField = coalFieldList.value.find((item) => item.id === numId);
 
   return matchedField ? matchedField.fieldName : numId;
 };
@@ -254,7 +436,7 @@
  * 褰撳墠鏍囩椤垫槸鍚︽敮鎸佸鍑哄姛鑳�
  */
 const canExport = computed(() => {
-  return ['supplier', 'customer'].includes(tabName.value);
+  return ["supplier", "customer"].includes(tabName.value);
 });
 
 /**
@@ -266,7 +448,7 @@
     customer: "渚涘簲鍟�/璇嗗埆鐮�/璇︾粏鍦板潃",
     coal: "璇疯緭鍏ユ悳绱俊鎭�",
     coalQualityMaintenance: "璇疯緭鍏ユ悳绱俊鎭�",
-    coalMeiZhiZiDuanWeiHu: "璇疯緭鍏ユ悳绱俊鎭�"
+    coalMeiZhiZiDuanWeiHu: "璇疯緭鍏ユ悳绱俊鎭�",
   };
   return placeholderMap[tabName.value] || "璇疯緭鍏ユ悳绱俊鎭�";
 });
@@ -275,7 +457,13 @@
  * 鏄惁鏄剧ず鎼滅储妗�
  */
 const shouldShowSearch = computed(() => {
-  return ['supplier', 'customer', 'coal', 'coalQualityMaintenance', 'coalMeiZhiZiDuanWeiHu'].includes(tabName.value);
+  return [
+    "supplier",
+    "customer",
+    "coal",
+    "coalQualityMaintenance",
+    "coalMeiZhiZiDuanWeiHu",
+  ].includes(tabName.value);
 });
 
 /**
@@ -294,8 +482,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: "缁忚惀鍦板潃",
@@ -304,12 +492,11 @@
     formatter: (row) => {
       const addressIds = [row.bprovinceId, row.bcityId, row.bdistrictId];
       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: "contactPerson", label: "鑱旂郴浜�", minWidth: 100 },
   {
     prop: "cids",
     label: "鑱旂郴浜哄湴鍧�",
@@ -318,33 +505,36 @@
     formatter: (row) => {
       const addressIds = [row.cprovinceId, row.ccityId, row.cdistrictId];
       return formatAddressArray(addressIds);
-    }
+    },
   },
-  {prop: "contactAddress", label: "鑱旂郴浜鸿缁嗗湴鍧�", minWidth: 120},
-  {prop: "updateTime", label: "缁存姢鏃ユ湡", minWidth: 120},
+  { prop: "contactAddress", 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: "缁忚惀鍦板潃",
     minWidth: 150,
     showOverflowTooltip: true,
     formatter: (row) => {
-      const addressIds = [row.businessProvinceId, row.businessCityId, row.businessDistrictId];
+      const addressIds = [
+        row.businessProvinceId,
+        row.businessCityId,
+        row.businessDistrictId,
+      ];
       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: "鑱旂郴浜哄湴鍧�",
@@ -353,39 +543,39 @@
     formatter: (row) => {
       const addressIds = [row.provinceId, row.cityId, row.districtId];
       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: "缁存姢浜�",
     minWidth: 120,
     formatter: (row, column, cellValue) => {
       if (!userMap.value || Object.keys(userMap.value).length === 0) {
-        return '--';
+        return "--";
       }
-      if (cellValue === null || cellValue === undefined || cellValue === '') {
-        return '--';
+      if (cellValue === null || cellValue === undefined || cellValue === "") {
+        return "--";
       }
-      return userMap.value[cellValue] || '--';
-    }
+      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: "瀛楁鍚嶇О",
@@ -394,20 +584,20 @@
     slot: true,
     formatter: (row, column, cellValue) => {
       if (Array.isArray(cellValue)) {
-        return cellValue.map(item => item);
+        return cellValue.map((item) => item);
       }
-      return cellValue || '--';
-    }
+      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 },
 ]);
 // ===== 浜嬩欢澶勭悊鍑芥暟 =====
 
@@ -449,7 +639,7 @@
     coalMeiZhiZiDuanWeiHu: () => {
       columns.value = coalMeiZhiZiDuanWeiHuColumns.value;
       getList();
-    }
+    },
   };
 
   // 鎵ц瀵瑰簲鐨勯厤缃嚱鏁�
@@ -495,17 +685,22 @@
  * @description 鏍规嵁鏍囩椤电被鍨嬭缃脊绐楁爣棰樺苟鎵撳紑寮圭獥
  */
 const handleAddEdit = (currentTabName) => {
-  const actionText = addOrEdit.value === "add" ? "鏂板" : "缂栬緫";
+  const actionText =
+    addOrEdit.value === "add"
+      ? "鏂板"
+      : addOrEdit.value === "edit"
+      ? "缂栬緫"
+      : "鏌ョ湅";
 
   const tabTitleMap = {
     supplier: "渚涘簲鍟嗕俊鎭�",
     customer: "瀹㈡埛淇℃伅",
     coal: "鐓ょ淇℃伅",
     coalQualityMaintenance: "鐓よ川鏂规缁存姢",
-    coalMeiZhiZiDuanWeiHu: "鐓よ川瀛楁缁存姢"
+    coalMeiZhiZiDuanWeiHu: "鐓よ川瀛楁缁存姢",
   };
 
-  title.value = `${actionText}${tabTitleMap[currentTabName] || ''}`;
+  title.value = `${actionText}${tabTitleMap[currentTabName] || ""}`;
   openDialog();
 };
 
@@ -514,7 +709,7 @@
  * @description 鏍规嵁缂栬緫鐘舵�佸喅瀹氭槸鍚﹀鍒惰〃鍗曟暟鎹�
  */
 const openDialog = () => {
-  if (addOrEdit.value === "edit") {
+  if (addOrEdit.value === "edit" || addOrEdit.value === "viewRow") {
     copyForm.value = JSON.parse(JSON.stringify(form.value));
   } else {
     form.value = {};
@@ -580,8 +775,16 @@
   }
 
   // 鏋勫缓瀹㈡埛涓氬姟鍦板潃鏁扮粍
-  if (form.value.businessCityId && form.value.businessDistrictId && form.value.businessProvinceId) {
-    form.value.bids = [row.businessProvinceId, row.businessCityId, row.businessDistrictId];
+  if (
+    form.value.businessCityId &&
+    form.value.businessDistrictId &&
+    form.value.businessProvinceId
+  ) {
+    form.value.bids = [
+      row.businessProvinceId,
+      row.businessCityId,
+      row.businessDistrictId,
+    ];
   }
 
   // 鏋勫缓瀹㈡埛鑱旂郴鍦板潃鏁扮粍
@@ -594,6 +797,49 @@
 };
 
 /**
+ * 鏌ョ湅鎸夐挳鐐瑰嚮澶勭悊
+ * @param {Object} row - 琛屾暟鎹�
+ * @description 澶勭悊鏌ョ湅鎿嶄綔锛屾瀯寤哄湴鍧�鏁扮粍骞舵墦寮�鏌ョ湅寮圭獥
+ */
+const handleView = (row) => {
+  console.log("鏌ョ湅琛屾暟鎹�:", row);
+  // 鎷垮埌鎵�鏈夌殑keys
+  const keys = Object.keys(row);
+  console.log("鎵�鏈塳eys:", 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);
+};
+
+/**
  * 鎵归噺鍒犻櫎澶勭悊
  * @description 鎵归噺鍒犻櫎閫変腑鐨勮褰�
  */
@@ -603,7 +849,7 @@
     return;
   }
 
-  const deleteIds = selectedRows.value.map(item => item.id);
+  const deleteIds = selectedRows.value.map((item) => item.id);
 
   try {
     await ElMessageBox.confirm("纭畾鍒犻櫎閫変腑鐨勬暟鎹悧锛�", "鎻愮ず", {
@@ -616,10 +862,10 @@
       supplier: delSupply,
       coal: delCoalInfo,
       coalQualityMaintenance: () => {
-        throw new Error('delCoalQuality API not imported');
+        throw new Error("delCoalQuality API not imported");
       },
       customer: delCustomer,
-      coalMeiZhiZiDuanWeiHu: deleteCoalField
+      coalMeiZhiZiDuanWeiHu: deleteCoalField,
     };
 
     const deleteApi = deleteApiMap[tabName.value];
@@ -627,7 +873,7 @@
       ElMessage.error("鍒犻櫎鎺ュ彛鏈厤缃�");
       return;
     }
-    console.log(deleteIds)
+    console.log(deleteIds);
     const res = await deleteApi(deleteIds);
 
     if (res.code !== 200 && res.msg !== "鎿嶄綔鎴愬姛") {
@@ -638,8 +884,8 @@
     ElMessage.success("鍒犻櫎鎴愬姛");
     await getList();
   } catch (error) {
-    if (error.message !== 'cancel') {
-      console.error('鍒犻櫎鎿嶄綔澶辫触:', error);
+    if (error.message !== "cancel") {
+      console.error("鍒犻櫎鎿嶄綔澶辫触:", error);
       ElMessage.error("鍒犻櫎澶辫触锛岃绋嶅悗鍐嶈瘯");
     } else {
       ElMessage.info("宸插彇娑堝垹闄ゆ搷浣�");
@@ -662,10 +908,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];
@@ -680,7 +926,11 @@
  * @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);
 };
 // ===== 鏁版嵁鑾峰彇鍑芥暟 =====
@@ -702,11 +952,13 @@
     customer: () => getCustomerList(apiParams),
     coal: () => getCoalInfo(apiParams),
     coalQualityMaintenance: () => getCoalPlanList(apiParams),
-    coalMeiZhiZiDuanWeiHu: () => coalField(apiParams)
+    coalMeiZhiZiDuanWeiHu: () => coalField(apiParams),
   };
 
   const apiFunction = apiMap[tabName.value];
-  return apiFunction ? apiFunction() : Promise.reject(new Error('鏈壘鍒板搴旂殑API鎺ュ彛'));
+  return apiFunction
+    ? apiFunction()
+    : Promise.reject(new Error("鏈壘鍒板搴旂殑API鎺ュ彛"));
 };
 
 /**
@@ -716,17 +968,17 @@
 const getList = async () => {
   try {
     loading.value = true;
-    const {data, code} = await selectInterface();
+    const { data, code } = await selectInterface();
 
     if (code !== 200) {
-      ElMessage.error("鑾峰彇鏁版嵁澶辫触锛�" + (data?.msg || '鏈煡閿欒'));
+      ElMessage.error("鑾峰彇鏁版嵁澶辫触锛�" + (data?.msg || "鏈煡閿欒"));
       return;
     }
 
     tableData.value = data.records || [];
     total.value = data.total || 0;
   } catch (error) {
-    console.error('鑾峰彇鍒楄〃鏁版嵁澶辫触:', error);
+    console.error("鑾峰彇鍒楄〃鏁版嵁澶辫触:", error);
     ElMessage.error("鑾峰彇鏁版嵁澶辫触锛岃绋嶅悗鍐嶈瘯");
   } finally {
     loading.value = false;
@@ -742,12 +994,12 @@
   try {
     // 骞惰鎵ц鍒濆鍖栨搷浣�
     await Promise.all([
-      handleTabClick({props: {name: "supplier"}}),
+      handleTabClick({ props: { name: "supplier" } }),
       fetchAreaOptions(),
-      getUserList()
+      getUserList(),
     ]);
   } catch (error) {
-    console.error('缁勪欢鍒濆鍖栧け璐�:', error);
+    console.error("缁勪欢鍒濆鍖栧け璐�:", error);
     ElMessage.error("椤甸潰鍒濆鍖栧け璐ワ紝璇峰埛鏂伴噸璇�");
   }
 });
@@ -802,4 +1054,4 @@
 .main-container {
   background: red !important;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/basicInformation/mould/supplier.vue b/src/views/basicInformation/mould/supplier.vue
index 88a2192..6ff557f 100644
--- a/src/views/basicInformation/mould/supplier.vue
+++ b/src/views/basicInformation/mould/supplier.vue
@@ -1,48 +1,135 @@
 <template>
   <div>
-    <el-dialog v-model="dialogVisible" :title="title" width="600" :close-on-click-modal="false"
-               :before-close="handleClose">
-      <el-form ref="formRef" style="max-width: 400px; margin: 0 auto" :model="formData" :rules="rules"
-               label-width="auto">
-        <el-form-item label="渚涘簲鍟嗗悕绉�" prop="supplierName">
-          <el-input v-model="formData.supplierName" placeholder="璇疯緭鍏ヤ緵璐у晢鍚嶇О"/>
+    <el-dialog
+      v-model="dialogVisible"
+      :title="title"
+      width="600"
+      :close-on-click-modal="false"
+      :before-close="handleClose"
+    >
+      <el-form
+        ref="formRef"
+        style="max-width: 400px; margin: 0 auto"
+        :model="formData"
+        :rules="rules"
+        label-width="auto"
+      >        <el-form-item
+          label="渚涘簲鍟嗗悕绉�"
+          prop="supplierName"
+        >
+          <el-input
+            v-model="formData.supplierName"
+            placeholder="璇疯緭鍏ヤ緵璐у晢鍚嶇О"
+            :disabled="isViewMode"
+          />
         </el-form-item>
-        <el-form-item label="绾崇◣浜鸿瘑鍒彿" prop="taxpayerId">
-          <el-input v-model="formData.taxpayerId" placeholder="璇疯緭鍏ョ撼绋庝汉璇嗗埆鍙�"/>
+        <el-form-item
+          label="绾崇◣浜鸿瘑鍒彿"
+          prop="taxpayerId"
+        >
+          <el-input
+            v-model="formData.taxpayerId"
+            placeholder="璇疯緭鍏ョ撼绋庝汉璇嗗埆鍙�"
+            :disabled="isViewMode"
+          />
         </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-form-item
+          label="缁忚惀鍦板潃"
+          prop="bids"
+        >
+          <el-cascader
+            placeholder="璇烽�夋嫨缁忚惀鍦板潃"
+            size="default"
+            :options="addressSelectOptions"
+            v-model="formData.bids"
+            :props="cascaderProps"
+            @change="handleChange"
+            :disabled="isViewMode"
+          >
           </el-cascader>
         </el-form-item>
-        <el-form-item label="璇︾粏鍦板潃" prop="businessAddress">
-          <el-input v-model="formData.businessAddress" placeholder="璇疯緭鍏ュ鎴疯缁嗗湴鍧�"/>
+        <el-form-item
+          label="璇︾粏鍦板潃"
+          prop="businessAddress"
+        >
+          <el-input
+            v-model="formData.businessAddress"
+            placeholder="璇疯緭鍏ュ鎴疯缁嗗湴鍧�"
+            :disabled="isViewMode"
+          />
         </el-form-item>
-        <el-form-item label="寮�鎴疯" prop="bankAccount">
-          <el-input v-model="formData.bankAccount" placeholder="璇疯緭鍏ュ紑鎴疯"/>
+        <el-form-item
+          label="寮�鎴疯"
+          prop="bankAccount"
+        >
+          <el-input 
+            v-model="formData.bankAccount" 
+            placeholder="璇疯緭鍏ュ紑鎴疯" 
+            :disabled="isViewMode"
+          />
         </el-form-item>
-        <el-form-item label="閾惰璐︽埛" prop="bankName">
-          <el-input v-model="formData.bankName" placeholder="璇疯緭鍏ラ摱琛岃处鎴�"/>
+        <el-form-item
+          label="閾惰璐︽埛"
+          prop="bankName"
+        >
+          <el-input 
+            v-model="formData.bankName" 
+            placeholder="璇疯緭鍏ラ摱琛岃处鎴�" 
+            :disabled="isViewMode"
+          />
         </el-form-item>
-        <el-form-item label="鑱旂郴浜�" prop="contactPerson">
-          <el-input v-model="formData.contactPerson" placeholder="璇疯緭鍏ヨ仈绯讳汉"/>
+        <el-form-item
+          label="鑱旂郴浜�"
+          prop="contactPerson"
+        >
+          <el-input
+            v-model="formData.contactPerson"
+            placeholder="璇疯緭鍏ヨ仈绯讳汉"
+            :disabled="isViewMode"
+          />
         </el-form-item>
-        <el-form-item label="鑱旂郴浜虹數璇�" prop="contactPhone">
-          <el-input v-model="formData.contactPhone" placeholder="璇疯緭鍏ヨ仈绯讳汉鐢佃瘽"/>
+        <el-form-item
+          label="鑱旂郴浜虹數璇�"
+          prop="contactPhone"
+        >
+          <el-input
+            v-model="formData.contactPhone"
+            placeholder="璇疯緭鍏ヨ仈绯讳汉鐢佃瘽"
+            :disabled="isViewMode"
+          />
         </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-form-item
+          label="鑱旂郴浜哄湴鍧�"
+          prop="cids"
+        >
+          <el-cascader
+            placeholder="璇烽�夋嫨鑱旂郴浜哄湴鍧�"
+            size="default"
+            :options="addressSelectOptions"
+            v-model="formData.cids"
+            :props="cascaderProps"
+            @change="handleChange"
+            :disabled="isViewMode"
+          >
           </el-cascader>
         </el-form-item>
-        <el-form-item label="鑱旂郴浜鸿缁嗗湴鍧�" prop="contactAddress">
-          <el-input v-model="formData.contactAddress" placeholder="璇疯緭鍏ヨ仈绯讳汉鍦板潃"/>
+        <el-form-item
+          label="鑱旂郴浜鸿缁嗗湴鍧�"
+          prop="contactAddress"
+        >
+          <el-input
+            v-model="formData.contactAddress"
+            placeholder="璇疯緭鍏ヨ仈绯讳汉鍦板潃"
+            :disabled="isViewMode"
+          />
         </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 v-if="addOrEdit === 'edit'" @click="resetForm"
+            >閲嶇疆</el-button
+          >
+          <el-button v-if="addOrEdit !== 'edit'" @click="cancelForm"
+            >鍙栨秷</el-button
+          >
           <el-button type="primary" @click="submitForm"> 纭畾</el-button>
         </el-form-item>
       </el-form>
@@ -51,15 +138,14 @@
 </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, computed, reactive } from "vue";
+import { addOrEditSupply } from "@/api/basicInformation/supplier";
+import { getAreaOptions } from "@/api/system/area.js";
 
 const props = defineProps({
   beforeClose: {
     type: Function,
-    default: () => {
-    },
+    default: () => {},
   },
   form: {
     type: Object,
@@ -75,21 +161,24 @@
   },
 });
 
+// 璁＄畻灞炴�э細缁熶竴鎺у埗鏄惁绂佺敤
+const isViewMode = computed(() => props.addOrEdit === 'viewRow');
+
 const emit = defineEmits(["submit", "handleBeforeClose"]);
 const copyForm = defineModel("copyForm", {
   required: true,
   type: Object,
 });
 onMounted(() => {
-  fetchAreaOptions()
-})
+  fetchAreaOptions();
+});
 
 // 淇敼鏍戝舰閫夋嫨鐨勬槧灏�
 const cascaderProps = ref({
-  value: 'id', // 鎸囧畾value瀛楁涓篿d
-  label: 'label', // 鎸囧畾label瀛楁
-  children: 'children' // 鎸囧畾瀛愯妭鐐瑰瓧娈�
-})
+  value: "id", // 鎸囧畾value瀛楁涓篿d
+  label: "label", // 鎸囧畾label瀛楁
+  children: "children", // 鎸囧畾瀛愯妭鐐瑰瓧娈�
+});
 
 // 鍦板潃閫夋嫨鏁版嵁
 const addressSelectOptions = ref([]);
@@ -100,21 +189,21 @@
   if (res.code === 200) {
     addressSelectOptions.value = res.data;
   }
-}
+};
 
 // 澶勭悊鍦板潃鏁版嵁杞崲
 function mapAddress(list) {
-  return list.map(item => ({
+  return list.map((item) => ({
     value: item.id,
     label: item.name,
-    children: item.children ? mapAddress(item.children) : undefined
+    children: item.children ? mapAddress(item.children) : undefined,
   }));
 }
 
 // 琛ㄥ崟寮曠敤
 const formRef = ref(null);
 // 琛ㄥ崟鏁版嵁
-const formData = ref({...props.form});
+const formData = ref({ ...props.form });
 // 寮圭獥鍙鎬�
 const dialogVisible = defineModel("supplierDialogFormVisible", {
   required: true,
@@ -122,19 +211,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) => {
@@ -146,23 +235,23 @@
   await formRef.value.validate(async (valid, fields) => {
     if (valid) {
       const obj = ref({});
-      if (props.title.includes('鏂板')) {
+      if (props.title.includes("鏂板")) {
         let result = await addOrEditSupply({
           ...formData.value,
-        })
+        });
         obj.value = {
           title: "鏂板",
           ...formData.value,
-          result
+          result,
         };
       } else {
         let result = await addOrEditSupply({
           ...formData.value,
-        })
+        });
         obj.value = {
           title: "缂栬緫",
           ...formData.value,
-          result
+          result,
         };
       }
       emit("submit", obj.value);
@@ -187,11 +276,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: [
   //   {
@@ -200,12 +289,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>
@@ -216,4 +305,4 @@
   margin-top: 20px;
   flex-direction: column;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/production/index.vue b/src/views/production/index.vue
index 498bc21..223d465 100644
--- a/src/views/production/index.vue
+++ b/src/views/production/index.vue
@@ -81,10 +81,15 @@
 import {useTableData} from "./components/useTableData.js";
 import {useDialog} from "./components/useDialog.js";
 import {useCoalData} from "./components/useCoalData.js";
+import {getCoalInfoList} from "@/api/production";
 
 // 琛ㄦ牸鍒楅厤缃�
 const columns = [
-  {prop: "coal", label: "鐓ょ", minWidth: 150, slot: 'coal'},
+  {prop: "coalId", label: "鐓ょ", minWidth: 150,
+    formatter: (row) => {
+      return coalInfoList.value.find(item => item.id == row.coalId)?.coal || '--';
+    }
+  },
   {prop: "productionQuantity", label: "鐢熶骇鏁伴噺", minWidth: 120},
   {prop: "laborCost", label: "浜哄伐鎴愭湰", minWidth: 150},
   {prop: "energyConsumptionCost", label: "鑳借�楁垚鏈�", minWidth: 120},
@@ -134,10 +139,13 @@
     ElMessage.success("鎿嶄綔鎴愬姛");
   });
 };
+const coalInfoList = ref([]);
 // 缁勪欢鎸傝浇鏃跺姞杞芥暟鎹�
 onMounted(async () => {
   await getCoalData(); // 棰勫姞杞界叅绉嶆暟鎹�
   getList();
+  let res = await getCoalInfoList()
+  coalInfoList.value = res.data;
 });
 </script>
 

--
Gitblit v1.9.3