mosr-web/src/components/DetailComponent/CollectionDetail.vue

<template>
  <div v-loading="loading" :style="type==='singleDetail'?'padding: 0 30px':''">
    <baseTitle title="需求征集信息" v-if="type!=='singleDetail'"></baseTitle>
    <el-form :model="formData" >
      <el-row gutter="20" style="margin-left: 5px">
        <el-col :span="6">
          <el-form-item label="征集名称">
            <span>{{ formData.requirementName }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="征集类型">
            <span>{{ formData.collectType }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="需求上报截止时间">
            <span>{{ formData.deadline }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="6" v-if="formData.isSpecialFund">
          <el-form-item label="专项资金名称">
            <span>{{ formData.specialFund }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="24" v-if="type==='singleDetail'">
          <el-form-item label="征集公司">
            <span :class="showExpendClass(showMoreCompany,formData.companyIds)">{{
                getCompanyName(formData.companyIds)
              }}</span>
            <div style="color: #2a99ff;text-align: center;width: 100%;font-size: 15px;cursor: pointer"
                 @click="handleExpend">{{ showExpendText }}
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="24" style="margin-bottom: -15px">
          <el-form-item label="征集说明">
            <div v-if="formData.collectExplain" v-html="formData.collectExplain" style="white-space: pre-wrap;">
            </div>
            <div v-else>--</div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <baseTitle v-if="fileListShow === 'READ' || fileListShow === 'EDIT'" title="附件列表" style="margin-bottom: 0"></baseTitle>
          <file-component title="" tag="需求征集"
                          v-model:value="formData.fileList" :processViewer="processViewer"
                          :file-list-show="fileListShow"/>
        </el-col>
        <el-col :span="24" style="margin-top: -15px">
          <div v-if="data.taskId">
            <baseTitle title="审核意见"></baseTitle>
            <el-form-item prop="_value">
              <el-input
                  v-model="_value"
                  :rows="3"
                  type="textarea"
                  placeholder="请输入审核意见"
              />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <div class="approval-record" style="margin-top: -15px">
        <div class="approval-title">
          <baseTitle title="审批记录"></baseTitle>
          <div class="diagram">
            <div class="base-title">流程图</div>
            <el-switch
                v-model="changeDiagram"
                style="--el-switch-on-color:#BEA266; --el-switch-off-color:#cecdcd"
            />
          </div>
        </div>
        <div class="process">
          <operation-render v-if="processViewer && data.operationList && data.operationList.length > 0&&!changeDiagram"
                            :operation-list="data.operationList"
                            :state="data.state"/>
          <process-diagram-viewer v-if="processViewer&&changeDiagram" id-name="collectionProcess"/>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script setup lang="jsx">
import OperationRender from '@/views/workflow/common/OperationRender.vue'
import ProcessDiagramViewer from '@/views/workflow/common/ProcessDiagramViewer.vue'
import {downloadFile} from "@/api/project-demand";

const emit = defineEmits(['update:value'])
const showExpendText = ref('')
const showMoreCompany = ref(false)
const props = defineProps({
  formData: {
    type: Array,
    default: []
  },
  data: {
    type: Array,
    default: []
  },
  processViewer: {
    type: Boolean,
    default: false
  },
  companyOption: {
    type: Array,
    default: []
  },
  loading: {
    type: Boolean,
    default: false
  },
  fileListShow: {
    type: String,
    default: ''
  },
  type: {
    type: String,
    default: ''
  },
  value: {
    type: String,
    default: ''
  }
})
const changeDiagram = ref(false)
const _value = computed({
  get() {
    return props.value;
  },
  set(val) {
    emit("update:value", val);
  }
})
const getCompanyName = (data) => {
  if (data) {
    return data.join('，')
  }
}
const handleExpend = () => {
  showMoreCompany.value = !showMoreCompany.value;
  showExpendClass(showMoreCompany.value, props.formData.companyIds)
}
const showExpendClass = (showMoreCompany, data) => {
  if (!showMoreCompany) {
    if (data && data.length > 14) {
      showExpendText.value = '展开'
      return 'company-style'
    }
  } else {
    showExpendText.value = '收缩'
    return ''
  }
}

const handleDownload = (row) => {
  downloadFile(row.fileId).then(res => {
    const blob = new Blob([res])
    let a = document.createElement('a')
    a.href = URL.createObjectURL(blob)
    a.download = row.originalFileName
    a.click()
  })
}

watch(() => props.loading, (newVal) => {
  props.loading = newVal
}, {deep: true})

watch(() => props.processViewer, (newVal) => {
  props.processViewer = newVal
}, {deep: true})
</script>

<style scoped lang="scss">
:deep(.el-empty__description) {
  margin-top: 0;
}

.company-style {
  //width: 98%;
  min-height: 30px;
  max-height: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
:deep(.el-table__header) {
  .is-leaf:first-child {
    .cell {
      margin-left: -53px !important;
    }
  }
}

:deep(.el-table__body) {
  .el-table__cell:first-child {
    .cell {
      margin-left: -26px !important;
    }
  }
}
</style>