不合格管理：重构详情展示与操作按钮

yyb

11 小时以前 65193cc9b4e27aad36a65eca447e6c62f6ee037f

 src/views/qualityManagement/nonconformingManagement/index.vue

@@ -53,35 +53,9 @@
          @pagination="pagination"
          :total="page.total"
      >
        <template #reasonAnalysis="{ row }">
          <el-button
              link
              type="primary"
              @click="openTextPreviewDialog('原因分析', row?.reasonAnalysis)"
          >
            {{ row?.reasonAnalysis}}
          </el-button>
        </template>
        <template #preventiveCorrective="{ row }">
          <el-button
              link
              type="primary"
              @click="openTextPreviewDialog('预防与纠正措施', row?.preventiveCorrective)"
          >
            {{ row?.preventiveCorrective}}
          </el-button>
        </template>
        <template #lossWorking="{ row }">
          <span>{{ row?.lossWorking ?? '-' }}</span>
        </template>
        <template #lossMaterial="{ row }">
          <span>{{ row?.lossMaterial ?? '-' }}</span>
        </template>
      </PIMTable>
    </div>
    <el-dialog v-model="textPreviewDialogVisible" :title="textPreviewTitle" width="600px">
      <div class="text-preview-content">{{ textPreviewContent || "暂无内容" }}</div>
    </el-dialog>
    <DetailDia ref="detailDiaRef" />
    <FormDia ref="formDia" @close="handleQuery"></FormDia>
    <InspectionFormDia ref="inspectionFormDia" @close="handleQuery"></InspectionFormDia>
  </div>
@@ -94,6 +68,7 @@
import {ElMessageBox} from "element-plus";
import {qualityUnqualifiedDel, qualityUnqualifiedListPage} from "@/api/qualityManagement/nonconformingManagement.js";
import InspectionFormDia from "@/views/qualityManagement/nonconformingManagement/components/inspectionFormDia.vue";
import DetailDia from "@/views/qualityManagement/nonconformingManagement/components/detailDia.vue";
import dayjs from "dayjs";

const data = reactive({
@@ -204,16 +179,14 @@
  {
    label: "原因分析",
    prop: "reasonAnalysis",
    dataType: "slot",
    slot: "reasonAnalysis",
    width: 160
    width: 120
  },
  {
    label: "预防与纠正措施",
    prop: "preventiveCorrective",
    dataType: "slot",
    slot: "preventiveCorrective",
    width: 180
    width: 120
  },
  {
    label: "工时损失",
@@ -230,8 +203,15 @@
    label: "操作",
    align: "center",
    fixed: "right",
    width: 100,
    width: 140,
    operation: [
      {
        name: "详情",
        type: "text",
        clickFun: (row) => {
          openDetailDialog(row);
        },
      },
      {
        name: "处理",
        type: "text",
@@ -246,9 +226,6 @@
const tableData = ref([]);
const selectedRows = ref([]);
const tableLoading = ref(false);
const textPreviewDialogVisible = ref(false);
const textPreviewTitle = ref("");
const textPreviewContent = ref("");
const page = reactive({
  current: 1,
  size: 100,
@@ -256,6 +233,7 @@
});
const formDia = ref()
const inspectionFormDia = ref()
const detailDiaRef = ref()
const { proxy } = getCurrentInstance()

const changeDaterange = (value) => {
@@ -315,11 +293,9 @@
    inspectionFormDia.value?.openDialog(type, row)
  })
};
// 查看字段详情
const openTextPreviewDialog = (title, content) => {
  textPreviewTitle.value = title;
  textPreviewContent.value = content || "";
  textPreviewDialogVisible.value = true;
// 打开详情弹框
const openDetailDialog = (row) => {
  detailDiaRef.value?.openDialog(row);
};

// 删除
@@ -366,12 +342,11 @@
</script>

<style scoped>
.text-preview-content {
  white-space: pre-wrap;
  line-height: 1.6;
  color: #606266;
  word-break: break-word;
  max-height: 60vh;
  overflow-y: auto;
.text-ellipsis {
  display: inline-block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>