X-web/src/views/modules/cus/communicate-detail.vue

<template>
  <!-- <el-dialog
    title="查看"
    width="70%"
    :close-on-click-modal="false"
    :visible.sync="visible"> -->
  <div>
    <div class="my-title">查看</div>
    <div style="margin-left: 20px; margin-right: 20px">
      <e-desc title="基本信息" column="3">
        <e-desc-item label="沟通编码">{{ dataForm.coCode }}</e-desc-item>
        <e-desc-item label="客户名称">{{ dataForm.customerName }}</e-desc-item>
        <e-desc-item label="客户联系人">{{ dataForm.contact }}</e-desc-item>
        <e-desc-item label="客户联系电话">{{ dataForm.contactTel }}</e-desc-item>
        <e-desc-item label="沟通方式">{{ dataForm.way }}</e-desc-item>
        <e-desc-item label="沟通类别">{{ dataForm.coTypeValue }}</e-desc-item>
        <e-desc-item label="沟通主要内容" span="3">{{ dataForm.content }}</e-desc-item>
        <e-desc-item label="备注说明" span="3">{{
          dataForm.notes
        }}</e-desc-item>
      </e-desc>
      <e-desc title="技术资料">
        <upload-component
          :display="true"
          :display-title="false"
          :accept="'*'"
          :file-obj-list="dataForm.attachListTechnical || []"
        />
      </e-desc>
      <e-desc title="数模/图纸">
        <upload-component
          :display="true"
          :display-title="false"
          :accept="'*'"
          :file-obj-list="dataForm.attachListDrawing || []"
        />
      </e-desc>
      <e-desc title="沟通表原件">
        <upload-component
          :display="true"
          :display-title="false"
          :accept="'*'"
          :file-obj-list="dataForm.attachList || []"
        />
      </e-desc>
      <e-desc title="其他附件">
        <upload-component
          :display="true"
          :display-title="false"
          :accept="'*'"
          :file-obj-list="dataForm.attachListOther || []"
        />
      </e-desc>
      <e-desc title="沟通物料明细">
        <el-table :data="cusRCommProductVOS" border style="width: 100%">
          <el-table-column label="序号" type="index" width="50" align="center">
          </el-table-column>
          <el-table-column
              prop="productName"
              header-align="center"
              align="center"
              min-width="120"
              :show-tooltip-when-overflow="true"
              label="物料名称"
            >
            </el-table-column>
            <el-table-column
              prop="productSpecifications"
              header-align="center"
              align="center"
              :show-tooltip-when-overflow="true"
              label="规格"
            >
            </el-table-column>
            <el-table-column
              prop="cnt"
              header-align="center"
              align="center"
              label="数量"
            >
            </el-table-column>
            <el-table-column
              prop="deliveryDate"
              header-align="center"
              align="center"
              min-width="100"
              width="150"
              label="交付日期"
            >
            </el-table-column>
            <el-table-column
              prop="notes"
              header-align="center"
              align="center"
              min-width="180"
              :show-tooltip-when-overflow="true"
              label="备注"
            >
            </el-table-column>
        </el-table>
      </e-desc>
      <e-desc title="任务工单派发">
        <el-table :data="dataForm.workInfoList" border style="width: 100%">
            <el-table-column
              label="序号"
              type="index"
              width="50"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="taskType"
              header-align="center"
              align="center"
              min-width="100"
              width="120"
              label="工单类型"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.taskTypeName }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="taskName"
              header-align="center"
              align="center"
              :show-tooltip-when-overflow="true"
              label="工单名称"
            >
            </el-table-column>
            <el-table-column
              prop="ranks"
              header-align="center"
              align="center"
              width="120"
              label="级别"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.rankTypeName }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="content"
              header-align="center"
              align="center"
              min-width="100"
              label="工单内容"
              :show-tooltip-when-overflow="true"
            >
            </el-table-column>
            <el-table-column
              prop="receiver"
              header-align="center"
              align="center"
              width="150"
              label="任务接收人"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.receiverName }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="attachListVo"
              header-align="center"
              align="center"
              width="150"
              label="任务附件"
            >
              <template slot-scope="scope">
                <el-button
                  :disabled="
                    !scope.row.attachListVo || scope.row.attachListVo.length === 0
                  "
                  type="text"
                  size="small"
                  @click="attachDetails(scope.row.attachListVo)"
                  >查看</el-button
                >
              </template>
            </el-table-column>
            <el-table-column
              prop="notes"
              header-align="center"
              align="center"
              :show-tooltip-when-overflow="true"
              label="备注"
            >
            </el-table-column>
          </el-table>
      </e-desc>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="onChose">返回</el-button>
    </span>
    <attach-detail-dialog ref="attachDetail" @onChose="onChose" />
  </div>
  <!-- </el-dialog> -->
</template>

<script>
import EDesc from "../common/e-desc";
import EDescItem from "../common/e-desc-item";
import { getCoDetail } from "@/api/cus";
import uploadComponent from "../common/upload-component-v2";
import AttachDetailDialog from "../common/attach-detail-dialog";
export default {
  name: "communicate-detail",
  components: {
    EDesc,
    EDescItem,
    uploadComponent,
    AttachDetailDialog
  },
  data() {
    return {
      visible: false,
      id: 0,
      dataForm: {},
      cusRCommProductVOS: [],
      fileList: [],
    };
  },
  methods: {
    onChose() {
      this.$emit("onChose");
    },
    async init(id) {
      this.visible = true;
      this.id = id || 0;
      this.dataForm = {};
      this.cusRCommProductVOS = [];
      this.fileList = [];
      this.getDetails();
    },
    getDetails() {
      getCoDetail(this.id).then(({ data }) => {
        if (data && data.code === "200") {
          this.dataForm = data.data;
          // 附件显示
          this.fileList = [];
          if (this.dataForm.attachListTechnical) {
            this.dataForm.attachListTechnical.forEach((item) => {
              item.name = item.fileName;
              item.id = item.url;
            });
          }
          if (this.dataForm.attachListDrawing) {
            this.dataForm.attachListDrawing.forEach((item) => {
              item.name = item.fileName;
              item.id = item.url;
            });
          }
          if (this.dataForm.attachList) {
            this.dataForm.attachList.forEach((item) => {
              item.name = item.fileName;
              item.id = item.url;
            });
          }
          if (this.dataForm.attachListOther) {
            this.dataForm.attachListOther.forEach((item) => {
              item.name = item.fileName;
              item.id = item.url;
            });
          }

          if (data.data.cusRCommProductVOS) {
            data.data.cusRCommProductVOS.forEach((item) => {
              this.cusRCommProductVOS.push({
                ...item,
              });
            });
          }
        }
      });
    },
    attachDetails(attachList) {
      this.$refs.attachDetail.init(attachList);
    },
  },
};
</script>

<style scoped>
.my-line {
  border-bottom: 1px solid #c0c4cc;
  margin-bottom: 10px;
}
.title {
  padding: 10px 0;
}
</style>