X-web/src/views/modules/tech/project-product-detail.vue

<template>
  <div>
    <div class="my-title">查看</div>
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="auto">
      <el-row class="my-row">
        <el-col :span="6">
          <el-form-item label="项目名称:" prop="projectName">
            <span>{{ dataForm.projectName }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="任务号:" prop="orderCode">
            <span>{{ dataForm.orderCode }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="技术协议:" prop="attachList1">
            <span class="attch-file" @click="attachDetail(dataForm.attachList1)">
              {{
                dataForm.attachList1 && Array.isArray(dataForm.attachList1) && dataForm.attachList1.length > 0 &&
                  dataForm.attachList1[0] && dataForm.attachList1[0].fileName
                  ? dataForm.attachList1[0].fileName
                  : ''
              }}
            </span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="资料:" prop="attachList2">
            <span class="attch-file" @click="attachDetail(dataForm.attachList2)">
              {{
                dataForm.attachList2 && Array.isArray(dataForm.attachList2) && dataForm.attachList2.length > 0 &&
                  dataForm.attachList2[0] && dataForm.attachList2[0].fileName
                  ? dataForm.attachList2[0].fileName
                  : ''
              }}
            </span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-table :data="dataForm.proProductList" border v-loading="dataListLoading" style="width: 100%;"
        row-key="productId" :tree-props="{ children: 'proProductList', hasChildren: 'hasChildren' }">
        <el-table-column label="序号" type="index" width="100" align="center">
        </el-table-column>
        <el-table-column prop="productName" header-align="center" align="center" min-width="140"
          :show-tooltip-when-overflow="true" label="名称">
        </el-table-column>
        <el-table-column prop="mapNumber" header-align="center" align="center" min-width="140"
          :show-tooltip-when-overflow="true" label="图号">
        </el-table-column>
        <el-table-column prop="versionNumber" header-align="center" align="center" min-width="140"
          :show-tooltip-when-overflow="true" label="版本号">
        </el-table-column>
        <el-table-column header-align="center" align="center" label="图纸">
          <template slot-scope="scope">
            <el-button :disabled="!scope.row.proDrawings || scope.row.proDrawings.length === 0" type="text" size="small"
              @click="drawDetails(scope.row)">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="attachList2" header-align="center" align="center" min-width="100"
          :show-tooltip-when-overflow="true" label="简图">
          <template slot-scope="scope">
            <div class="thumb-list" v-if="getImageList(scope.row.attachList2).length">
              <img v-for="(img, idx) in getImageList(scope.row.attachList2)" :key="(img.url || '') + idx" class="thumb"
                :src="downloadUrl + img.url" :alt="img.fileName" @click="previewFile(img.fileName, img.url)" />
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="productSpec" header-align="center" align="center" min-width="140"
          :show-tooltip-when-overflow="true" label="规格">
        </el-table-column>
        <el-table-column prop="cnt" header-align="center" align="center" min-width="140"
          :show-tooltip-when-overflow="true" label="数量">
        </el-table-column>
        <el-table-column prop="unit" header-align="center" align="center" min-width="140"
          :show-tooltip-when-overflow="true" label="单位">
        </el-table-column>
        <el-table-column prop="materials" header-align="center" align="center" min-width="140"
          :show-tooltip-when-overflow="true" label="材料">
        </el-table-column>
        <el-table-column prop="size" header-align="center" align="center" min-width="140"
          :show-tooltip-when-overflow="true" label="净尺寸">
        </el-table-column>
        <el-table-column prop="surfaceTreatment" header-align="center" align="center" min-width="140"
          :show-tooltip-when-overflow="true" label="表处理">
        </el-table-column>
        <el-table-column prop="heatTreatment" header-align="center" align="center" min-width="140"
          :show-tooltip-when-overflow="true" label="热处理">
        </el-table-column>
        <el-table-column prop="importance" header-align="center" align="center" min-width="140"
          :show-tooltip-when-overflow="true" label="关重性">
        </el-table-column>
        <el-table-column prop="appraisal" header-align="center" align="center" min-width="140"
          :show-tooltip-when-overflow="true" label="是否首件鉴定">
          <template slot-scope="scope">
            {{ scope.row.appraisal === 2 ? '是' : '否' }}
          </template>
        </el-table-column>
        <el-table-column prop="notes" header-align="center" align="center" min-width="140"
          :show-tooltip-when-overflow="true" label="备注">
        </el-table-column>
      </el-table>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="onChose">返回</el-button>
      <!-- <el-button
        type="primary"
        @click="dataFormSubmit()"
        v-reClick
        >确定</el-button
      > -->
    </span>

    <attach-detail-dialog ref="attachDetail" />
    <preview-component v-if="previewVisible" ref="preview" />
    <project-draw-preview ref="drawPreview" />
  </div>
</template>

<script>
import UserComponent from '../common/user-component'
import AttachDetailDialog from '../common/attach-detail-dialog'
import PreviewComponent from '../common/preview-component'
import ProjectDrawPreview from './product-draw-detail-dialog.vue'
import { downloadUrl } from '@/api/file'
export default {
  name: 'project-product-detail',
  components: { UserComponent, AttachDetailDialog, PreviewComponent, ProjectDrawPreview },
  computed: {},
  data() {
    return {
      visible: false,
      id: 0,
      dataForm: {
        proProductList: []
      },
      dataRule: {},
      dataList: [],
      dataListLoading: false,
      previewVisible: false,
      downloadUrl: downloadUrl

    }
  },
  created() { },
  beforeDestroy() { },
  methods: {
    onChose() {
      this.$emit('onChose')
    },
    async init(item) {
      let id = item.productTechnologyId

      this.$http({
        url: this.$http.adornUrl(`/biz-service/projProduct/info/${id}`),
        method: 'get'
      }).then(({ data }) => {
        if (data && data.code === '200') {
          this.dataForm = data.data
        } else {
          this.$message.error(data.msg)
        }
      })

      this.dataForm = item

      this.dataList = [{ disposal: '', isTechnology: '' }]

      this.visible = true
    },
    validateField(type) {
      this.$refs.dataForm.validateField(type)
    },
    attachDetail(attachList) {
      this.$nextTick(() => {
        this.$refs.attachDetail.init(attachList)
      })
    },
    // 过滤图片附件
    getImageList(attachList) {
      if (!attachList || !Array.isArray(attachList)) return []
      return attachList.filter(item => this.isImage(item && item.fileName))
    },
    isImage(fileName) {
      if (!fileName || typeof fileName !== 'string') return false
      const ext = fileName.split('.').pop().toLowerCase()
      return ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'].includes(ext)
    },
    // 预览大图
    previewFile(fileName, url) {
      this.previewVisible = true
      this.$nextTick(() => {
        this.$refs.preview && this.$refs.preview.init(fileName, url)
      })
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(`/biz-service/projProduction/assign`),
            method: 'post',
            data: this.$http.adornData({
              productionManagementId: this.dataForm.productionManagementId,
              responsibilityPerson: this.dataForm.responsibilityPerson
            })
          }).then(({ data }) => {
            if (data && data.code === '200') {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.onChose()
                  this.$emit('refreshDataList')
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        }
      })
    },
    selectChange(val) {
      this.dataForm.responsibilityPerson = val
    },
    drawDetails(row) {
      this.$refs.drawPreview && this.$refs.drawPreview.init(row.proDrawings || [])
    }
  }
}
</script>

<style scoped>
.my-row {
  margin-bottom: 20px;
}

.radio-group-wrap {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 10px 15px;
  /* 行列间距控制 */
}

.radio-group-wrap :deep(.el-radio) {
  margin-left: 0;
  /* 清除横向间距 */
}

.attch-file {
  cursor: pointer;
  color: #3e8ef7;
}

/* 缩略图样式 */
.thumb-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

.thumb {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  cursor: pointer;
}
</style>