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

<template>
  <div>
    <div class="my-title">详情</div>
    <div style="margin-left: 20px; margin-right: 20px">
      <!-- 工作流 -->
      <div v-show="dataForm.workFlowBusinessExt">
        <el-steps
          :active="
            dataForm.workFlowBusinessExt &&
            dataForm.workFlowBusinessExt.workFlowProcessStepList
              ? dataForm.workFlowBusinessExt.workFlowProcessStepList.length + 2
              : 0
          "
          align-center
          style="margin-bottom: 20px"
        >
          <template v-for="(item, i) in stepList">
            <el-step
              :icon="item.icon"
              :title="item.title"
              :description="item.description"
            ></el-step>
          </template>
        </el-steps>
        <el-collapse style="margin-bottom: 20px">
          <el-collapse-item>
            <template slot="title">
              <span style="color: red">审批日志（展开查看更多）：</span>
            </template>
            <template v-for="(item, i) in logList">
              <div>
                {{ ++i }}：{{ item.approverName }} {{ item.createTime }}
                {{ item.approvalValue }}
              </div>
            </template>
          </el-collapse-item>
        </el-collapse>
      </div>
      <div v-if="isFlow">
        <approve-component ref="approve" @approveFinished="approveFinished" />
      </div>
      <e-desc title="基本信息" column="3">
        <e-desc-item label="项目名称">{{ dataForm.projectName }}</e-desc-item>
        <e-desc-item label="项目类别">{{ dataForm.typeName }}</e-desc-item>
        <e-desc-item label="备注" span="3">{{ dataForm.remark }}</e-desc-item>

        <e-desc-item label="关联BOM物料清单" span="3">{{
          dataForm.productName
        }}</e-desc-item>

        <e-desc-item v-if="dataForm.attachList" label="附件" span="3">
          <div v-for="(item, index) in dataForm.attachList" style="display: inline">
            <span v-if="index > 0">,</span>
            <a :key="item.fileName + index" type="primary" href="#" @click="previewFile(item.fileName, item.url)">{{ item.fileName }}</a>
          </div>
        </e-desc-item>
      </e-desc>
      <div class="desc">
        <h1 class="desc-title">BOM物料明细报价</h1>
        <el-row>
          <el-table
            :data="dataForm.quotedPriceProductList"
            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"
              :show-tooltip-when-overflow="true"
              label="物料名称"
            >
            </el-table-column>
            <el-table-column
              prop="productSpec"
              header-align="center"
              align="center"
              :show-tooltip-when-overflow="true"
              label="物料规格"
            >
            </el-table-column>
            <el-table-column
              prop="mapNumber"
              header-align="center"
              align="center"
              :show-tooltip-when-overflow="true"
              label="主图号"
            >
            </el-table-column>
            <el-table-column
              prop="materials"
              header-align="center"
              align="center"
              :show-tooltip-when-overflow="true"
              label="材料"
            >
            </el-table-column>
            <el-table-column
              prop="cnt"
              header-align="center"
              align="center"
              :show-tooltip-when-overflow="true"
              label="单套数量"
            >
            </el-table-column>
            <el-table-column
              prop="unit"
              header-align="center"
              align="center"
              :show-tooltip-when-overflow="true"
              label="单位"
            >
            </el-table-column>
            <el-table-column
              prop="size"
              header-align="center"
              align="center"
              :show-tooltip-when-overflow="true"
              label="物料尺寸"
            >
            </el-table-column>
            <el-table-column
              prop="developedSize"
              header-align="center"
              align="center"
              :show-tooltip-when-overflow="true"
              label="展开尺寸"
            >
            </el-table-column>
            <el-table-column
              prop="surfaceTreatment"
              header-align="center"
              align="center"
              :show-tooltip-when-overflow="true"
              label="表面处理"
            >
            </el-table-column>
            <el-table-column
              prop="notes"
              header-align="center"
              align="center"
              :show-tooltip-when-overflow="true"
              label="备注"
            >
            </el-table-column>
            <!-- 初次报价 -->
            <div>
              <el-table-column
                prop="materialPrice"
                header-align="center"
                align="center"
                min-width="160px"
                label="原材料费"
              >
              </el-table-column>
              <el-table-column
                prop="processPrice"
                header-align="center"
                align="center"
                min-width="160px"
                label="生产加工费"
              >
              </el-table-column>
              <el-table-column
                prop="handlePrice"
                header-align="center"
                align="center"
                min-width="160px"
                label="热表处理费"
              >
              </el-table-column>
            </div>
            <!-- 精准报价 -->
            <div>
              <el-table-column
                prop="precisionMaterialPrice"
                header-align="center"
                align="center"
                min-width="160px"
                label="精准原材料费"
              >
              </el-table-column>
              <el-table-column
                prop="precisionProcessPrice"
                header-align="center"
                align="center"
                min-width="160px"
                label="精准生产加工费"
              >
              </el-table-column>
              <el-table-column
                prop="precisionHandlePrice"
                header-align="center"
                align="center"
                min-width="160px"
                label="精准热表处理费"
              >
              </el-table-column>
            </div>
          </el-table>
        </el-row>
      </div>
      <div class="desc">
        <h1 class="desc-title">任务工单派发</h1>
        <el-row>
          <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>{{
                  taskTypeOption.findIndex(
                    (t) => t.value == scope.row.taskType
                  ) > -1
                    ? taskTypeOption.find((t) => t.value == scope.row.taskType)
                        .label
                    : ""
                }}</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>{{
                  rankTypeOption.findIndex((t) => t.value == scope.row.ranks) >
                  -1
                    ? rankTypeOption.find((t) => t.value == scope.row.ranks)
                        .label
                    : ""
                }}</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>
        </el-row>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="onChose">返回</el-button>
    </span>

    <attach-detail-dialog ref="attachDetail" @onChose="onChose" />
    <!-- 文件预览 -->
    <preview-component v-if="previewVisible" ref="preview"/>
  </div>
</template>

<script>
import EDesc from '../common/e-desc'
import EDescItem from '../common/e-desc-item'
import UploadComponent from '../common/upload-component-v2'
import AttachDetailDialog from '../common/attach-detail-dialog'
import ApproveComponent from '../common/approve-component'
import { dealStepData, dealStepLogs } from '@/api/util'
import { getDetail } from '@/api/quoted'
import { getCoCode } from '@/api/cus'
import { getProductList, getProductAllDetail } from '@/api/product'
import {
  productTypeOption,
  taskTypeOption,
  rankTypeOption
} from '@/utils/enums'
import PreviewComponent from '@/views/modules/common/preview-component'
export default {
  name: 'cus-quoted-detail',
  components: { PreviewComponent, EDesc, EDescItem, UploadComponent, AttachDetailDialog, ApproveComponent },
  props: {},
  data () {
    return {
      isFlow: false,
      previewVisible: false,
      id: 0,
      productTypeOption: productTypeOption,
      taskTypeOption: taskTypeOption,
      rankTypeOption: rankTypeOption,
      coOption: [],
      productIdOption: [],
      dataForm: {
        materialCost: 0,
        materialCostSecond: 0,
        totalPrice: 0,
        totalPriceSecond: 0,
        quotedPriceProductList: [], // 报价物料清单
        workInfoList: []
      },
      productList: [],
      stepList: [],
      logList: []
    }
  },
  watch: {},
  computed: {},
  created () {},
  mounted () {},
  activated () {},
  methods: {
    onChose () {
      this.$emit('onChose')
    },
    async init (id, businessType) {
      this.id = id || 0
      this.isFlow = !!(businessType && businessType !== '')
      this.dataForm = {
        workFlowBusinessExt: null
      }
      this.stepList = []
      this.logList = []
      await this.getCoCode()
      await this.getProductList()
      this.getDetail(id, businessType)
    },
    async getCoCode () {
      await getCoCode().then(({ data }) => {
        if (data && data.code === '200') {
          this.coOption = data.data
        }
      })
    },
    async getProductList (productName) {
      let params = {
        current: 1,
        size: 20,
        productName: productName
      }
      await getProductList(params).then(({ data }) => {
        if (data && data.code === '200') {
          this.productIdOption = []
          data.data.records.forEach((item) => {
            this.productIdOption.push({
              label: item.productName,
              value: item.productId
            })
          })
        }
      })
    },
    getDetail (id, businessType) {
      getDetail(id).then(({ data }) => {
        if (data && data.code === '200') {
          this.dataForm = data.data
          let find1 = this.coOption.find(
            (t) => t.coId === this.dataForm.coId
          )
          if (find1) {
            this.dataForm.coCode = find1.coCode
          }
          let find2 = this.productTypeOption.find(
            (t) => t.value === this.dataForm.type
          )
          if (find2) {
            this.dataForm.typeName = find2.label
          }
          let find3 = this.productIdOption.find(
            (t) => t.value === this.dataForm.productId
          )
          if (find3) {
            this.dataForm.productName = find3.label
          }

          this.productIdChangeHandle(this.dataForm.productId)

          // 流程图展示
          dealStepData(
            data.data.workFlowBusinessExt.workFlowProcessStepList,
            this.stepList
          )
          dealStepLogs(
            data.data.workFlowBusinessExt.processLogList,
            this.logList
          )

          // 初始化审批Form
          this.showApproveForm(businessType, id)
        }
      })
    },
    attachDetails (attachList) {
      this.$refs.attachDetail.init(attachList)
    },
    productIdChangeHandle (val) {
      if (val) {
        getProductAllDetail(val).then(({ data }) => {
          if (data && data.code === '200') {
            this.productList = data.data
            if (
              this.dataForm.quotedPriceProductList == null ||
              this.dataForm.quotedPriceProductList.length === 0
            ) {
              this.productList.forEach((item) => {
                this.dataForm.quotedPriceProductList.push({
                  productId: item.productId
                })
                item.id = this.dataForm.quotedPriceProductList.find(
                  (t) => t.productId === item.productId
                ).id
              })
            } else {
              this.dataForm.quotedPriceProductList.forEach((item) => {
                let tempItem = this.productList.find(
                  (t) => t.productId === item.productId
                )
                console.log(tempItem, '111111111111')

                if (tempItem) {
                  item.productName = tempItem.productName
                  item.productSpec = tempItem.productSpec
                  item.mapNumber = tempItem.mapNumber
                  item.materials = tempItem.materials
                  item.cnt = tempItem.cnt
                  item.unit = tempItem.unit
                  item.size = tempItem.size
                  item.developedSize = tempItem.developedSize
                  item.surfaceTreatment = tempItem.surfaceTreatment
                  item.notes = tempItem.notes
                }
              })
            }
          }
        })
      } else {
        this.productList = []
      }
    },
    // 初始化审批Form
    showApproveForm (businessType, businessId) {
      console.log('businessType = ' + businessType + ', businessId = ' + businessId)
      if (this.isFlow) {
        this.$nextTick(() => {
          this.$refs.approve.init(businessType, businessId)
        })
      }
    },
    // 审批完成
    approveFinished () {
      this.onChose()
      this.$emit('approveFinished')
    },
    // 预览
    previewFile (fileName, url) {
      this.previewVisible = true
      this.$nextTick(() => {
        this.$refs.preview.init(fileName, url)
      })
    }
  }
}
</script>

<style scoped>
.desc .desc-title {
  margin-bottom: 10px;
  color: #333;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5715;
}
</style>