qingban-SPC/src/views/sales/DetailCom.vue

<template>
  <div>
    <div class="sale-header">销售信息反馈表</div>
    <table border-collapse="collapse">
      <tr>
        <th>顾客名称</th>
        <th>详细地址</th>
        <th>联系人</th>
        <th>联系电话</th>
      </tr>
      <tr>
        <td>{{ saleModel.customer }}</td>
        <td>{{ saleModel.address }}</td>
        <td>{{ saleModel.contacts }}</td>
        <td>{{ saleModel.phoneNo }}</td>
      </tr>
      <tr>
        <th>产品型号</th>
        <th>产品分类</th>
        <th>检验批号</th>
        <th>数量</th>
      </tr>
      <tr>
        <td>{{ saleModel.materialModel }}</td>
        <td>{{ saleModel.type }}</td>
        <td>{{ saleModel.checkCode }}</td>
        <td>{{ saleModel.num }}</td>
      </tr>
      <tr>
        <th>产品编号</th>
        <th colspan="3" style="font-weight: normal">{{ saleModel.seqs }}</th>
      </tr>
      <tr v-for="(item, index) in contentArray" :key="index">
        <td colspan="4">
          <div class="sale-box">
            <div class="sale-title">{{ item.title }}</div>
            <div class="sale-content">
              {{ item.content }}
            </div>
            <div class="sale-bottom">
              <div class="desc" v-if="index === 0">
                市场营销部:{{ item[`user`] }}
              </div>
              <div class="desc" v-if="index === 1">
                质量管理部:{{ item[`user`] }}
              </div>
              <div class="desc" v-if="index === 2">
                责任部门:{{ item[`user`] }}
              </div>
              <div class="desc" v-if="index === 3">
                责任部门:{{ item[`user`] }}
              </div>
              <div class="desc" v-if="index === 4">
                质量管理部:{{ item[`user`] }}
              </div>
              <div class="desc" v-if="index === 5">
                质量管理部:{{ item[`user`] }}
              </div>
              <div class="desc" v-if="index === 6">
                市场营销部:{{ item[`user`] }}
              </div>
              <div class="desc">时间: {{ item.time }}</div>
              <el-button
                v-if="item.fileUrl"
                link
                type="primary"
                size="small"
                @click="handleDownload(item)"
                >下载附件</el-button
              >
            </div>
          </div>
        </td>
      </tr>
    </table>
  </div>
</template>

<script setup>
const saleModel = ref({});

const contentArray = ref([]);
const refreshView = (row) => {
  saleModel.value = row;

  contentArray.value = [];

  if (row.remark1 && JSON.parse(row.remark1).content) {
    let remark1 = JSON.parse(row.remark1);
    contentArray.value.push({ ...remark1, title: "顾客投诉或建议" });
  }
  if (row.remark2 && JSON.parse(row.remark2).content) {
    let remark2 = JSON.parse(row.remark2);
    contentArray.value.push({ ...remark2, title: "投诉或建议处置意见" });
  }
  if (row.remark3 && JSON.parse(row.remark3).content) {
    let remark3 = JSON.parse(row.remark3);
    contentArray.value.push({ ...remark3, title: "原因分析" });
  }
  if (row.remark4 && JSON.parse(row.remark4).content) {
    let remark4 = JSON.parse(row.remark4);
    contentArray.value.push({ ...remark4, title: "整改及纠正措施" });
  }
  if (row.remark5 && JSON.parse(row.remark5).content) {
    let remark5 = JSON.parse(row.remark5);
    contentArray.value.push({ ...remark5, title: "整改及纠正措施验证" });
  }
  if (row.remark6 && JSON.parse(row.remark6).content) {
    let remark6 = JSON.parse(row.remark6);
    contentArray.value.push({ ...remark6, title: "处置情况反馈意见" });
  }
  if (row.remark7 && JSON.parse(row.remark7).content) {
    let remark7 = JSON.parse(row.remark7);
    contentArray.value.push({ ...remark7, title: "处置情况反馈意见" });
  }
};

const handleDownload = (item) => {
  let url = import.meta.env.VITE_APP_UPLOAD_URL + item.fileUrl;

  // 创建一个 <a> 元素
  var link = document.createElement("a");
  // 设置文件的 URL
  link.href = url;
  // 设置下载的文件名
  link.download = item.fileName;

  // 将 <a> 元素添加到文档中（虽然不需要在页面上可见）
  document.body.appendChild(link);

  // 触发点击事件
  link.click();

  // 移除 <a> 元素
  document.body.removeChild(link);
};

defineExpose({ refreshView });
</script>

<style scoped lang="scss">
.sale-header {
  text-align: center;
  font-size: 20px;
  //font-weight: bold;
  margin-bottom: 10px;
}
table {
  width: 800px;
  margin: 0 auto;
  border: 1px solid #000000;
  border-collapse: collapse;
}

th,
td {
  border: 1px solid #000000;
  text-align: center;
  padding: 3px;
}

.sale-box {
  .sale-title {
    font-size: 16px;
    margin-bottom: 5px;
    text-align: start;
  }
  .sale-content {
    font-size: 16px;
    min-height: 60px;
    margin-bottom: 10px;
    text-align: start;
    padding: 0 8px;
  }
  .sale-bottom {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
  }
  .desc {
    margin-right: 20px;
  }
}
</style>