质量管理页面

huminmin

2026-06-03 34d10fb90ba02fa28db70e14f0673639f469789c

质量管理页面

 src/api/quality/defectiveProduct.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,65 @@
// ä¸è‰¯å“ç›¸å…³æŽ¥å£
import request from "@/utils/request";

// æŸ¥è¯¢ä¸è‰¯å“ç™»è®°åˆ—表
export function pageDefectiveProduct(query) {
  return request({
    url: "/defectiveProduct/page",
    method: "get",
    params: query,
  });
}

// æ–°å¢žä¸è‰¯å“ç™»è®°
export function addDefectiveProduct(data) {
  return request({
    url: "/defectiveProduct/add",
    method: "post",
    data: data,
  });
}

// ä¿®æ”¹ä¸è‰¯å“ç™»è®°
export function updateDefectiveProduct(data) {
  return request({
    url: "/defectiveProduct/update",
    method: "post",
    data: data,
  });
}

// åˆ é™¤ä¸è‰¯å“ç™»è®°
export function deleteDefectiveProduct(query) {
  return request({
    url: "/defectiveProduct/delete",
    method: "delete",
    params: query,
  });
}

// æŸ¥è¯¢ä¸è‰¯å“å®¡æ ¸åˆ—表
export function pageDefectiveProductAudit(query) {
  return request({
    url: "/defectiveProduct/audit/page",
    method: "get",
    params: query,
  });
}

// ä¸è‰¯å“å®¡æ ¸
export function auditDefectiveProduct(data) {
  return request({
    url: "/defectiveProduct/audit",
    method: "post",
    data: data,
  });
}

// èŽ·å–不良品详情
export function getDefectiveProduct(query) {
  return request({
    url: "/defectiveProduct/get",
    method: "get",
    params: query,
  });
}

 src/api/quality/eipCable.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,83 @@
// EIP线缆类数据对接接口
import request from "@/utils/request";

// æŸ¥è¯¢é«˜åŽ‹ç”µåŠ›ç”µç¼†è¯•éªŒæ•°æ®
export function pageHighVoltageCable(query) {
  return request({
    url: "/eip/highVoltageCable/page",
    method: "get",
    params: query,
  });
}

// æŸ¥è¯¢ä¸­åŽ‹ç”µåŠ›ç”µç¼†è¯•éªŒæ•°æ®
export function pageMediumVoltageCable(query) {
  return request({
    url: "/eip/mediumVoltageCable/page",
    method: "get",
    params: query,
  });
}

// æŸ¥è¯¢ä½ŽåŽ‹çº¿ç¼†è¯•éªŒæ•°æ®
export function pageLowVoltageCable(query) {
  return request({
    url: "/eip/lowVoltageCable/page",
    method: "get",
    params: query,
  });
}

// æŸ¥è¯¢ä¸»ç½‘号地线试验数据
export function pageMainNetworkGroundWire(query) {
  return request({
    url: "/eip/mainNetworkGroundWire/page",
    method: "get",
    params: query,
  });
}

// æŸ¥è¯¢é…ç½‘号地线试验数据
export function pageDistributionGroundWire(query) {
  return request({
    url: "/eip/distributionGroundWire/page",
    method: "get",
    params: query,
  });
}

// æŸ¥è¯¢å…‰ç¼†è¯•éªŒæ•°æ®
export function pageOpticalFiber(query) {
  return request({
    url: "/eip/opticalFiber/page",
    method: "get",
    params: query,
  });
}

// æŸ¥è¯¢OPGW光缆试验数据
export function pageOPGWOpticalFiber(query) {
  return request({
    url: "/eip/opgwOpticalFiber/page",
    method: "get",
    params: query,
  });
}

// æŸ¥è¯¢ADSS光缆试验数据
export function pageADSSOpticalFiber(query) {
  return request({
    url: "/eip/adssOpticalFiber/page",
    method: "get",
    params: query,
  });
}

// åŒæ­¥EIP数据
export function syncEIPData(data) {
  return request({
    url: "/eip/sync",
    method: "post",
    data: data,
  });
}

 src/api/quality/index.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,2 @@
export * from "./defectiveProduct";
export * from "./eipCable";

 src/views/quality/defectiveProduct/audit.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,262 @@
<template>
  <div class="app-container">
    <!-- æŸ¥è¯¢åŒºåŸŸ -->
    <div class="search-form">
      <el-form :model="searchForm" inline size="small">
        <el-form-item label="报告编号">
          <el-input v-model="searchForm.reportNo" placeholder="请输入报告编号" clearable></el-input>
        </el-form-item>
        <el-form-item label="审核状态">
          <el-select v-model="searchForm.status" placeholder="请选择审核状态" clearable>
            <el-option label="待审核" value="0"></el-option>
            <el-option label="已通过" value="1"></el-option>
            <el-option label="已驳回" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchList">查询</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- æ•°æ®è¡¨æ ¼ -->
    <el-table v-loading="tableLoading" :data="tableData" border>
      <el-table-column label="报告编号" prop="reportNo" show-overflow-tooltip></el-table-column>
      <el-table-column label="产品名称" prop="productName" show-overflow-tooltip></el-table-column>
      <el-table-column label="规格型号" prop="specModel" show-overflow-tooltip></el-table-column>
      <el-table-column label="不合格描述" prop="unqualifiedDesc" show-overflow-tooltip></el-table-column>
      <el-table-column label="检验人员" prop="inspector" show-overflow-tooltip></el-table-column>
      <el-table-column label="登记时间" prop="registerDate" show-overflow-tooltip></el-table-column>
      <el-table-column label="审核状态" prop="status">
        <template slot-scope="scope">
          <el-tag :type="getStatusType(scope.row.status)">
            {{ getStatusText(scope.row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="审核意见" prop="auditOpinion" show-overflow-tooltip></el-table-column>
      <el-table-column label="审核人员" prop="auditor" show-overflow-tooltip></el-table-column>
      <el-table-column label="审核时间" prop="auditDate" show-overflow-tooltip></el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button type="text" @click="viewDetail(scope.row)">查看</el-button>
          <el-button type="text" v-if="scope.row.status === '0'" @click="openAuditDia(scope.row)">审核</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- åˆ†é¡µ -->
    <el-pagination
      :current-page="page.current"
      :page-size="page.size"
      :total="page.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>

    <!-- å®¡æ ¸å¼¹çª— -->
    <el-dialog title="不良品审核" :visible.sync="auditVisible" width="500px">
      <el-form :model="auditForm" label-width="100px" size="small">
        <el-form-item label="审核状态">
          <el-radio-group v-model="auditForm.status">
            <el-radio label="1">通过</el-radio>
            <el-radio label="2">驳回</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="审核意见">
          <el-textarea v-model="auditForm.opinion" :rows="3" placeholder="请输入审核意见"></el-textarea>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="auditVisible = false">取消</el-button>
        <el-button type="primary" @click="submitAudit" :loading="submitLoading">确定审核</el-button>
      </div>
    </el-dialog>

    <!-- è¯¦æƒ…弹窗 -->
    <el-dialog title="不良品审核详情" :visible.sync="detailVisible" width="600px">
      <el-form :model="detailData" label-width="120px" size="small" disabled>
        <el-form-item label="报告编号">
          <span>{{ detailData.reportNo }}</span>
        </el-form-item>
        <el-form-item label="产品名称">
          <span>{{ detailData.productName }}</span>
        </el-form-item>
        <el-form-item label="规格型号">
          <span>{{ detailData.specModel }}</span>
        </el-form-item>
        <el-form-item label="生产厂家">
          <span>{{ detailData.manufacturer }}</span>
        </el-form-item>
        <el-form-item label="原材料信息">
          <span>{{ detailData.materialInfo }}</span>
        </el-form-item>
        <el-form-item label="不合格描述">
          <span>{{ detailData.unqualifiedDesc }}</span>
        </el-form-item>
        <el-form-item label="检验人员">
          <span>{{ detailData.inspector }}</span>
        </el-form-item>
        <el-form-item label="登记时间">
          <span>{{ detailData.registerDate }}</span>
        </el-form-item>
        <el-form-item label="审核状态">
          <el-tag :type="getStatusType(detailData.status)">
            {{ getStatusText(detailData.status) }}
          </el-tag>
        </el-form-item>
        <el-form-item label="审核意见">
          <span>{{ detailData.auditOpinion || "-" }}</span>
        </el-form-item>
        <el-form-item label="审核人员">
          <span>{{ detailData.auditor || "-" }}</span>
        </el-form-item>
        <el-form-item label="审核时间">
          <span>{{ detailData.auditDate || "-" }}</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="detailVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  pageDefectiveProductAudit,
  auditDefectiveProduct,
  getDefectiveProduct,
} from "@/api/quality/defectiveProduct";

export default {
  name: "DefectiveProductAudit",
  data() {
    return {
      searchForm: {
        reportNo: "",
        status: "",
      },
      tableData: [],
      tableLoading: false,
      page: {
        current: 1,
        size: 20,
        total: 0,
      },
      auditVisible: false,
      auditForm: {
        id: null,
        status: "1",
        opinion: "",
      },
      submitLoading: false,
      detailVisible: false,
      detailData: {},
    };
  },
  mounted() {
    this.searchList();
  },
  methods: {
    searchList() {
      this.tableLoading = true;
      pageDefectiveProductAudit({
        ...this.searchForm,
        page: this.page.current,
        size: this.page.size,
      }).then((res) => {
        this.tableData = res.data.records;
        this.page.total = res.data.total;
        this.tableLoading = false;
      }).catch((err) => {
        this.tableLoading = false;
        console.error(err);
      });
    },
    resetSearch() {
      this.searchForm = {
        reportNo: "",
        status: "",
      };
      this.searchList();
    },
    handleSizeChange(val) {
      this.page.size = val;
      this.searchList();
    },
    handleCurrentChange(val) {
      this.page.current = val;
      this.searchList();
    },
    getStatusType(status) {
      switch (status) {
        case "0":
          return "warning";
        case "1":
          return "success";
        case "2":
          return "danger";
        default:
          return "info";
      }
    },
    getStatusText(status) {
      switch (status) {
        case "0":
          return "待审核";
        case "1":
          return "已通过";
        case "2":
          return "已驳回";
        default:
          return "未知";
      }
    },
    openAuditDia(row) {
      this.auditForm = {
        id: row.id,
        status: "1",
        opinion: "",
      };
      this.auditVisible = true;
    },
    submitAudit() {
      this.submitLoading = true;
      auditDefectiveProduct(this.auditForm).then((res) => {
        if (res.code === 200) {
          this.$message.success("审核成功");
          this.auditVisible = false;
          this.searchList();
        } else {
          this.$message.error(res.msg || "审核失败");
        }
        this.submitLoading = false;
      }).catch((err) => {
        this.submitLoading = false;
        console.error(err);
      });
    },
    viewDetail(row) {
      getDefectiveProduct({ id: row.id }).then((res) => {
        this.detailData = res.data;
        this.detailVisible = true;
      }).catch((err) => {
        console.error(err);
      });
    },
  },
};
</script>

<style scoped>
.search-form {
  margin-bottom: 15px;
}

.dialog-footer {
  text-align: right;
}
</style>

 src/views/quality/defectiveProduct/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,315 @@
<template>
  <div class="app-container">
    <!-- æŸ¥è¯¢åŒºåŸŸ -->
    <div class="search-form">
      <el-form :model="searchForm" inline size="small">
        <el-form-item label="报告编号">
          <el-input v-model="searchForm.reportNo" placeholder="请输入报告编号" clearable></el-input>
        </el-form-item>
        <el-form-item label="产品名称">
          <el-input v-model="searchForm.productName" placeholder="请输入产品名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="登记时间">
          <el-date-picker v-model="searchForm.registerDate" type="date" placeholder="选择日期" clearable></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchList">查询</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- æ“ä½œæŒ‰é’® -->
    <div class="btn-container">
      <el-button type="primary" icon="el-icon-plus" @click="openAddDia">新增登记</el-button>
      <el-button type="danger" icon="el-icon-delete" @click="handleDelete" :disabled="selectedIds.length === 0">批量删除</el-button>
    </div>

    <!-- æ•°æ®è¡¨æ ¼ -->
    <el-table v-loading="tableLoading" :data="tableData" @selection-change="handleSelectionChange" border>
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="报告编号" prop="reportNo" show-overflow-tooltip></el-table-column>
      <el-table-column label="产品名称" prop="productName" show-overflow-tooltip></el-table-column>
      <el-table-column label="规格型号" prop="specModel" show-overflow-tooltip></el-table-column>
      <el-table-column label="不合格描述" prop="unqualifiedDesc" show-overflow-tooltip></el-table-column>
      <el-table-column label="检验人员" prop="inspector" show-overflow-tooltip></el-table-column>
      <el-table-column label="登记时间" prop="registerDate" show-overflow-tooltip></el-table-column>
      <el-table-column label="状态" prop="status">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status === '0' ? 'warning' : 'success'">
            {{ scope.row.status === '0' ? '待审核' : '已审核' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button type="text" @click="viewDetail(scope.row)">查看</el-button>
          <el-button type="text" @click="openEditDia(scope.row)">编辑</el-button>
          <el-button type="text" @click="handleSingleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- åˆ†é¡µ -->
    <el-pagination
      :current-page="page.current"
      :page-size="page.size"
      :total="page.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>

    <!-- æ–°å¢ž/编辑弹窗 -->
    <el-dialog :title="isEdit ? '编辑不良品登记' : '新增不良品登记'" :visible.sync="formVisible" width="500px">
      <el-form :model="formData" label-width="100px" size="small">
        <el-form-item label="报告编号" prop="reportNo">
          <el-input v-model="formData.reportNo" placeholder="请输入报告编号"></el-input>
        </el-form-item>
        <el-form-item label="产品名称" prop="productName">
          <el-input v-model="formData.productName" placeholder="请输入产品名称"></el-input>
        </el-form-item>
        <el-form-item label="规格型号" prop="specModel">
          <el-input v-model="formData.specModel" placeholder="请输入规格型号"></el-input>
        </el-form-item>
        <el-form-item label="生产厂家" prop="manufacturer">
          <el-input v-model="formData.manufacturer" placeholder="请输入生产厂家"></el-input>
        </el-form-item>
        <el-form-item label="原材料信息" prop="materialInfo">
          <el-input v-model="formData.materialInfo" placeholder="请输入原材料信息"></el-input>
        </el-form-item>
        <el-form-item label="不合格描述" prop="unqualifiedDesc">
          <el-textarea v-model="formData.unqualifiedDesc" :rows="3" placeholder="请输入不合格描述"></el-textarea>
        </el-form-item>
        <el-form-item label="检验人员" prop="inspector">
          <el-input v-model="formData.inspector" placeholder="请输入检验人员"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="formVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm" :loading="submitLoading">确定</el-button>
      </div>
    </el-dialog>

    <!-- è¯¦æƒ…弹窗 -->
    <el-dialog title="不良品登记详情" :visible.sync="detailVisible" width="600px">
      <el-form :model="detailData" label-width="120px" size="small" disabled>
        <el-form-item label="报告编号">
          <span>{{ detailData.reportNo }}</span>
        </el-form-item>
        <el-form-item label="产品名称">
          <span>{{ detailData.productName }}</span>
        </el-form-item>
        <el-form-item label="规格型号">
          <span>{{ detailData.specModel }}</span>
        </el-form-item>
        <el-form-item label="生产厂家">
          <span>{{ detailData.manufacturer }}</span>
        </el-form-item>
        <el-form-item label="原材料信息">
          <span>{{ detailData.materialInfo }}</span>
        </el-form-item>
        <el-form-item label="不合格描述">
          <span>{{ detailData.unqualifiedDesc }}</span>
        </el-form-item>
        <el-form-item label="检验人员">
          <span>{{ detailData.inspector }}</span>
        </el-form-item>
        <el-form-item label="登记时间">
          <span>{{ detailData.registerDate }}</span>
        </el-form-item>
        <el-form-item label="审核状态">
          <el-tag :type="detailData.status === '0' ? 'warning' : 'success'">
            {{ detailData.status === '0' ? '待审核' : '已审核' }}
          </el-tag>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="detailVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  pageDefectiveProduct,
  addDefectiveProduct,
  updateDefectiveProduct,
  deleteDefectiveProduct,
  getDefectiveProduct,
} from "@/api/quality/defectiveProduct";

export default {
  name: "DefectiveProduct",
  data() {
    return {
      searchForm: {
        reportNo: "",
        productName: "",
        registerDate: "",
      },
      tableData: [],
      tableLoading: false,
      page: {
        current: 1,
        size: 20,
        total: 0,
      },
      selectedIds: [],
      formVisible: false,
      isEdit: false,
      formData: {
        id: null,
        reportNo: "",
        productName: "",
        specModel: "",
        manufacturer: "",
        materialInfo: "",
        unqualifiedDesc: "",
        inspector: "",
      },
      submitLoading: false,
      detailVisible: false,
      detailData: {},
    };
  },
  mounted() {
    this.searchList();
  },
  methods: {
    searchList() {
      this.tableLoading = true;
      pageDefectiveProduct({
        ...this.searchForm,
        page: this.page.current,
        size: this.page.size,
      }).then((res) => {
        this.tableData = res.data.records;
        this.page.total = res.data.total;
        this.tableLoading = false;
      }).catch((err) => {
        this.tableLoading = false;
        console.error(err);
      });
    },
    resetSearch() {
      this.searchForm = {
        reportNo: "",
        productName: "",
        registerDate: "",
      };
      this.searchList();
    },
    handleSizeChange(val) {
      this.page.size = val;
      this.searchList();
    },
    handleCurrentChange(val) {
      this.page.current = val;
      this.searchList();
    },
    handleSelectionChange(val) {
      this.selectedIds = val.map((item) => item.id);
    },
    openAddDia() {
      this.isEdit = false;
      this.formData = {
        id: null,
        reportNo: "",
        productName: "",
        specModel: "",
        manufacturer: "",
        materialInfo: "",
        unqualifiedDesc: "",
        inspector: "",
      };
      this.formVisible = true;
    },
    openEditDia(row) {
      this.isEdit = true;
      this.formData = { ...row };
      this.formVisible = true;
    },
    submitForm() {
      if (!this.formData.reportNo) {
        this.$message.error("请输入报告编号");
        return;
      }
      if (!this.formData.productName) {
        this.$message.error("请输入产品名称");
        return;
      }
      this.submitLoading = true;
      const api = this.isEdit ? updateDefectiveProduct : addDefectiveProduct;
      api(this.formData).then((res) => {
        if (res.code === 200) {
          this.$message.success(this.isEdit ? "修改成功" : "新增成功");
          this.formVisible = false;
          this.searchList();
        } else {
          this.$message.error(res.msg || "操作失败");
        }
        this.submitLoading = false;
      }).catch((err) => {
        this.submitLoading = false;
        console.error(err);
      });
    },
    viewDetail(row) {
      getDefectiveProduct({ id: row.id }).then((res) => {
        this.detailData = res.data;
        this.detailVisible = true;
      }).catch((err) => {
        console.error(err);
      });
    },
    handleDelete() {
      this.$confirm("确定删除选中的记录吗？", "提示", {
        type: "warning",
      }).then(() => {
        deleteDefectiveProduct({ ids: this.selectedIds.join(",") }).then((res) => {
          if (res.code === 200) {
            this.$message.success("删除成功");
            this.searchList();
          } else {
            this.$message.error(res.msg || "删除失败");
          }
        }).catch((err) => {
          console.error(err);
        });
      }).catch(() => {});
    },
    handleSingleDelete(row) {
      this.$confirm("确定删除该记录吗？", "提示", {
        type: "warning",
      }).then(() => {
        deleteDefectiveProduct({ ids: row.id }).then((res) => {
          if (res.code === 200) {
            this.$message.success("删除成功");
            this.searchList();
          } else {
            this.$message.error(res.msg || "删除失败");
          }
        }).catch((err) => {
          console.error(err);
        });
      }).catch(() => {});
    },
  },
};
</script>

<style scoped>
.search-form {
  margin-bottom: 15px;
}

.btn-container {
  margin-bottom: 15px;
}

.dialog-footer {
  text-align: right;
}
</style>

 src/views/quality/eipCable/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,232 @@
<template>
  <div class="app-container">
    <!-- æ ‡ç­¾é¡µ -->
    <el-tabs v-model="activeTab" type="card" @tab-click="handleTabClick">
      <el-tab-pane label="高压电力电缆" name="highVoltage"></el-tab-pane>
      <el-tab-pane label="中压电力电缆" name="mediumVoltage"></el-tab-pane>
      <el-tab-pane label="低压线缆" name="lowVoltage"></el-tab-pane>
      <el-tab-pane label="主网号地线" name="mainNetwork"></el-tab-pane>
      <el-tab-pane label="配网号地线" name="distribution"></el-tab-pane>
      <el-tab-pane label="光缆" name="opticalFiber"></el-tab-pane>
      <el-tab-pane label="OPGW光缆" name="opgw"></el-tab-pane>
      <el-tab-pane label="ADSS光缆" name="adss"></el-tab-pane>
    </el-tabs>

    <!-- æŸ¥è¯¢åŒºåŸŸ -->
    <div class="search-form">
      <el-form :model="searchForm" inline size="small">
        <el-form-item label="样品编号">
          <el-input v-model="searchForm.sampleCode" placeholder="请输入样品编号" clearable></el-input>
        </el-form-item>
        <el-form-item label="试验类型">
          <el-input v-model="searchForm.testType" placeholder="请输入试验类型" clearable></el-input>
        </el-form-item>
        <el-form-item label="试验时间">
          <el-date-picker v-model="searchForm.testDate" type="date" placeholder="选择日期" clearable></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchList">查询</el-button>
          <el-button @click="resetSearch">重置</el-button>
          <el-button type="success" @click="syncData">同步EIP数据</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- æ•°æ®è¡¨æ ¼ -->
    <el-table v-loading="tableLoading" :data="tableData" border>
      <el-table-column label="样品编号" prop="sampleCode" show-overflow-tooltip></el-table-column>
      <el-table-column label="产品名称" prop="productName" show-overflow-tooltip></el-table-column>
      <el-table-column label="规格型号" prop="specModel" show-overflow-tooltip></el-table-column>
      <el-table-column label="试验类型" prop="testType" show-overflow-tooltip></el-table-column>
      <el-table-column label="试验结果" prop="testResult" show-overflow-tooltip></el-table-column>
      <el-table-column label="原材料" prop="rawMaterial" show-overflow-tooltip></el-table-column>
      <el-table-column label="过程检" prop="processInspection" show-overflow-tooltip></el-table-column>
      <el-table-column label="成品检" prop="finalInspection" show-overflow-tooltip></el-table-column>
      <el-table-column label="试验时间" prop="testDate" show-overflow-tooltip></el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button type="text" @click="viewDetail(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- åˆ†é¡µ -->
    <el-pagination
      :current-page="page.current"
      :page-size="page.size"
      :total="page.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>

    <!-- è¯¦æƒ…弹窗 -->
    <el-dialog title="试验数据详情" :visible.sync="detailVisible" width="600px">
      <el-form :model="detailData" label-width="120px" size="small" disabled>
        <el-form-item label="样品编号">
          <span>{{ detailData.sampleCode }}</span>
        </el-form-item>
        <el-form-item label="产品名称">
          <span>{{ detailData.productName }}</span>
        </el-form-item>
        <el-form-item label="规格型号">
          <span>{{ detailData.specModel }}</span>
        </el-form-item>
        <el-form-item label="试验类型">
          <span>{{ detailData.testType }}</span>
        </el-form-item>
        <el-form-item label="试验结果">
          <span>{{ detailData.testResult }}</span>
        </el-form-item>
        <el-form-item label="原材料">
          <span>{{ detailData.rawMaterial }}</span>
        </el-form-item>
        <el-form-item label="过程检">
          <span>{{ detailData.processInspection }}</span>
        </el-form-item>
        <el-form-item label="成品检">
          <span>{{ detailData.finalInspection }}</span>
        </el-form-item>
        <el-form-item label="试验时间">
          <span>{{ detailData.testDate }}</span>
        </el-form-item>
        <el-form-item label="备注">
          <span>{{ detailData.remark || "-" }}</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="detailVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  pageHighVoltageCable,
  pageMediumVoltageCable,
  pageLowVoltageCable,
  pageMainNetworkGroundWire,
  pageDistributionGroundWire,
  pageOpticalFiber,
  pageOPGWOpticalFiber,
  pageADSSOpticalFiber,
  syncEIPData,
} from "@/api/quality/eipCable";

export default {
  name: "EipCable",
  data() {
    return {
      activeTab: "highVoltage",
      searchForm: {
        sampleCode: "",
        testType: "",
        testDate: "",
      },
      tableData: [],
      tableLoading: false,
      page: {
        current: 1,
        size: 20,
        total: 0,
      },
      detailVisible: false,
      detailData: {},
      syncLoading: false,
    };
  },
  mounted() {
    this.searchList();
  },
  methods: {
    getApi() {
      switch (this.activeTab) {
        case "highVoltage":
          return pageHighVoltageCable;
        case "mediumVoltage":
          return pageMediumVoltageCable;
        case "lowVoltage":
          return pageLowVoltageCable;
        case "mainNetwork":
          return pageMainNetworkGroundWire;
        case "distribution":
          return pageDistributionGroundWire;
        case "opticalFiber":
          return pageOpticalFiber;
        case "opgw":
          return pageOPGWOpticalFiber;
        case "adss":
          return pageADSSOpticalFiber;
        default:
          return pageHighVoltageCable;
      }
    },
    searchList() {
      this.tableLoading = true;
      const api = this.getApi();
      api({
        ...this.searchForm,
        page: this.page.current,
        size: this.page.size,
      }).then((res) => {
        this.tableData = res.data.records;
        this.page.total = res.data.total;
        this.tableLoading = false;
      }).catch((err) => {
        this.tableLoading = false;
        console.error(err);
      });
    },
    resetSearch() {
      this.searchForm = {
        sampleCode: "",
        testType: "",
        testDate: "",
      };
      this.searchList();
    },
    handleTabClick() {
      this.page.current = 1;
      this.searchList();
    },
    handleSizeChange(val) {
      this.page.size = val;
      this.searchList();
    },
    handleCurrentChange(val) {
      this.page.current = val;
      this.searchList();
    },
    viewDetail(row) {
      this.detailData = row;
      this.detailVisible = true;
    },
    syncData() {
      this.syncLoading = true;
      syncEIPData({ cableType: this.activeTab }).then((res) => {
        if (res.code === 200) {
          this.$message.success("同步成功");
          this.searchList();
        } else {
          this.$message.error(res.msg || "同步失败");
        }
        this.syncLoading = false;
      }).catch((err) => {
        this.syncLoading = false;
        console.error(err);
      });
    },
  },
};
</script>

<style scoped>
.search-form {
  margin-bottom: 15px;
}

.dialog-footer {
  text-align: right;
}
</style>