gj-supply-front/src/views/deposit_home/components/deposit_list-detail.vue

<template>
  <div>
    <div class="sty">
      <el-page-header content="详情" @back="goBack" />
    </div>
    <el-divider />
    <el-radio-group v-model="engineering" size="mini" @change="handleRadio">
      <el-radio-button label="工程押金信息" />
      <el-radio-button label="工程订单信息" />
      <el-radio-button label="工程发货信息" />
      <!-- <el-radio-button label="直调发货" /> -->
      <el-radio-button label="历史记录" />
    </el-radio-group>
    <br><br>

    <div v-show="engineering == '工程押金信息'">
      <div class="diy-table-1">
        <el-form ref="form" :model="details">
          <el-row :gutter="0">
            <el-col :xs="12" :sm="8" :lg="8" class="item">
              <div class="label">工程登录编号</div>
              <div class="value">{{ details.refEnginRecordNo }}</div>
            </el-col>
            <el-col :xs="12" :sm="8" :lg="8" class="item">
              <div class="label">项目类别</div>
              <div class="value">{{ details.refProjectCategory }}</div>
            </el-col>
            <el-col :xs="12" :sm="8" :lg="8" class="item">
              <div class="label">工程编号</div>
              <div class="value">{{ details.refProjectNo }}</div>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="16" class="item">
              <div class="label">经销商名称</div>
              <div class="value">{{ details.customerName }}</div>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="8" class="item">
              <div class="label">经销商编码</div>
              <div class="value">{{ details.customerNumber }}</div>
            </el-col>

            <el-col :xs="24" :sm="24" :lg="8" class="item">
              <div class="label">工程登录类型</div>
              <div class="value">{{ details.refPromiseStatus }}</div>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="8" class="item">
              <div class="label">联系人</div>
              <div class="value">{{ details.refLinkman }}</div>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="8" class="item">
              <div class="label">固定电话</div>
              <div class="value">{{ details.refTel }}</div>
            </el-col>

            <!--            <el-col :xs="24" :sm="24" :lg="16" class="item">-->
            <!--              <div class="label">厂工程编码</div>-->
            <!--              <div class="value">-->
            <!--                <el-form-item prop="refFactoryNo">-->
            <!--                  <el-input-->
            <!--                    v-model="details.refFactoryNo"-->
            <!--                    placeholder="厂工程编码"-->
            <!--                    size="small"-->
            <!--                  />-->
            <!--                </el-form-item>-->
            <!--              </div>-->
            <!--            </el-col>-->

            <el-col :xs="24" :sm="24" :lg="8" class="item">
              <div class="label">移动电话</div>
              <div class="value">{{ details.refPhone }}</div>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="8" class="item">
              <div class="label">押金总额</div>
              <div class="value">{{ details.depositAmount }}</div>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="8" class="item">
              <div class="label">工程差价总额</div>
              <div class="value">{{ details.depositDiffAmount }}</div>
            </el-col>
            <el-col v-if="!isCustomer" :xs="24" :sm="24" :lg="24" class="item">
              <div class="label">格力内部备注</div>
              <div class="value">
                <el-input v-model="details.geLiInerNote" placeholder="格力内部备注" />
              </div>
            </el-col>
            <el-col v-if="!isCustomer" :xs="24" :sm="24" :lg="24" class="item">
              <div class="label">格力内部资料备注</div>
              <div class="value">
                <el-input v-model="details.geLiInnerDataNote" placeholder="格力内部资料备注" />
              </div>
            </el-col>
            <el-col v-if="!isCustomer" :xs="24" :sm="24" :lg="24" class="item">
              <div class="label">订单格力内部备注</div>
              <div class="value">{{ details.orderGeLiInnerNote }}</div>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="12" class="item">
              <div class="label">使用单位</div>
              <div class="value">{{ details.refUseUnit }}</div>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="12" class="item">
              <div class="label">跨区厂编号</div>
              <div class="value">{{ details.refFactoryNo }}</div>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="24" class="item">
              <div class="label">安装时间</div>
              <div class="value" style="padding: 0">
                <el-form-item prop="installDate">
                  <el-date-picker
                    v-model="details.installDate"
                    :disabled="details.examineStatus == 'OK'"
                    type="datetime"
                    placeholder="安装时间"
                    default-time="00:00:00"
                    value-format="yyyy-MM-dd HH:mm:ss"
                  />
                </el-form-item>
              </div>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="24" class="item">
              <div class="label">安装地址</div>
              <div class="value">
                {{ details.refInstallAddress }}
              </div>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="8" class="item">
              <div class="label">登录有效期</div>
              <div class="value">
                {{ details.refBillsExpireDate }}
              </div>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="8" class="item">
              <div class="label">实际使用单位</div>
              <div class="value">
                <el-input v-model="details.realUseUnit" :readonly="isCustomer" placeholder="实际使用单位" />
              </div>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="8" class="item">
              <div class="label">实际安装地址</div>
              <div class="value">
                <el-input v-model="details.realInstallAddress" :readonly="isCustomer" placeholder="实际使用单位" />
              </div>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="8" class="item">
              <div class="label">项目编号</div>
              <div class="value">
                {{ details.refProjectNo }}
              </div>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="8" class="item">
              <div class="label">购买单位</div>
              <div class="value">
                <el-input v-model="details.refBuyUnitName" :readonly="isCustomer" placeholder="实际使用单位" />
              </div>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="8" class="item">
              <div class="label">合同变更批复意见</div>
              <div class="value">
                {{ details.refContractIdea }}
              </div>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="8" class="item">
              <div class="label">合同变更批复结果</div>
              <div class="value">
                {{ details.refContractResult }}
              </div>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="8" class="item">
              <div class="label">资料延期批复意见</div>
              <div class="value">
                {{ details.refDataDelayResult }}
              </div>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="8" class="item">
              <div class="label">资料延期批复结果</div>
              <div class="value">
                {{ details.refInstallAddress }}
              </div>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="8" class="item">
              <div class="label">工程机转零售批复意见</div>
              <div class="value">
                {{ details.refToRetailIdea }}
              </div>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="8" class="item">
              <div class="label">工程机转零售批复结果</div>
              <div class="value">
                {{ details.refToRetailResult }}
              </div>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="8" class="item">
              <div class="label">其他附件审批意见</div>
              <div class="value">
                {{ details.refOtherAnnexIdea }}
              </div>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="8" class="item">
              <div class="label">其他附件批复结果</div>
              <div class="value">
                {{ details.refOtherAnnexResult }}
              </div>
            </el-col>

            <!--            <el-col :xs="24" :sm="24" :lg="8" class="item">-->
            <!--              <div class="label">寄厂日期</div>-->
            <!--              <div class="value" style="padding: 0">-->
            <!--                <el-form-item prop="sendFactoryDate">-->
            <!--                  <el-date-picker-->
            <!--                    v-model="details.sendFactoryDate"-->
            <!--                    type="datetime"-->
            <!--                    placeholder="寄厂日期"-->
            <!--                    default-time="00:00:00"-->
            <!--                    value-format="yyyy-MM-dd HH:mm:ss"-->
            <!--                  >-->
            <!--                  </el-date-picker>-->
            <!--                </el-form-item>-->
            <!--              </div>-->
            <!--            </el-col>-->
          </el-row>
        </el-form>
      </div>
      <h3>货品信息</h3>
      <el-divider />
      <!-- 列表 -->
      <div class="mymain-container">
        <div class="table">
          <el-table
            v-loading="listLoading"
            :data="details.items"
            element-loading-text="Loading"
            border
            fit
            highlight-current-row
            stripe
            show-summary
            :summary-method="$getSummaries"
          >
            <el-table-column
              v-if="!isCustomer"
              align="left"
              label="厂编号"
              prop="factoryNo"
              min-width="160"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <CopyButton :copy-text="scope.row.factoryNo" />
                <span>{{ scope.row.factoryNo }}</span>
              </template>
            </el-table-column>
            <el-table-column
              v-if="!isCustomer"
              align="left"
              label="特价编号"
              prop="specialNo"
              min-width="160"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <CopyButton :copy-text="scope.row.specialNo" />
                <span>{{ scope.row.specialNo }}</span>
              </template>
            </el-table-column>
            <el-table-column align="left" label="物料编码" prop="materialNumber" min-width="130" show-overflow-tooltip>
              <template slot-scope="scope">
                <CopyButton :copy-text="scope.row.materialNumber" />
                <span>{{ scope.row.materialNumber }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="left"
              label="产品编码"
              prop="materialOldNumber"
              min-width="130"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <CopyButton :copy-text="scope.row.materialOldNumber" />
                <span>{{ scope.row.materialOldNumber }}</span>
              </template>
            </el-table-column>
            <el-table-column align="left" label="产品名称" prop="materialName" min-width="160" show-overflow-tooltip>
              <template slot-scope="scope">
                <CopyButton :copy-text="scope.row.materialName" />
                <span>{{ scope.row.materialName }}</span>
              </template>
            </el-table-column>
            <el-table-column align="left" label="规格型号" prop="specification" min-width="300" show-overflow-tooltip>
              <template slot-scope="scope">
                <CopyButton :copy-text="scope.row.specification" />
                <span>{{ scope.row.specification }}</span>
              </template>
            </el-table-column>
            <!-- <el-table-column
              align="left"
              label="实装规格型号"
              prop="realSpecification"
              min-width="300"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <div :style="scope.row.realSpecification != scope.row.specification ? { color: 'blue' } : ''">
                  {{ scope.row.realSpecification }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              align="left"
              label="实装物料编号"
              prop="realMaterialNumber"
              min-width="150"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <div :style="scope.row.realMaterialNumber != scope.row.materialNumber ? { color: 'blue' } : ''">
                  {{ scope.row.realMaterialNumber }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              align="left"
              label="实装厂产品编码"
              prop="realMaterialOldNumber"
              min-width="200"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <div :style="scope.row.realMaterialOldNumber != scope.row.materialOldNumber ? { color: 'blue' } : ''">
                  {{ scope.row.realMaterialOldNumber }}
                </div>
              </template>
            </el-table-column> -->
            <el-table-column
              align="left"
              label="实装规格型号"
              prop="depositSpecification"
              min-width="300"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <div :class="setColour(scope.row,'specification', 'realSpecification', 'depositSpecification')">
                  {{ scope.row.depositSpecification }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              align="left"
              label="实装物料编号"
              prop="depositMaterialNumber"
              min-width="150"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <div :class="setColour(scope.row,'materialNumber', 'realMaterialNumber', 'depositMaterialNumber')">
                  {{ scope.row.depositMaterialNumber }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              align="left"
              label="实装厂产品编码"
              prop="depositMaterialOldNumber"
              min-width="200"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <div :class="setColour(scope.row,'materialOldNumber', 'realMaterialOldNumber', 'depositMaterialOldNumber')">
                  {{ scope.row.depositMaterialOldNumber }}
                </div>
              </template>
            </el-table-column>
            <el-table-column align="right" label="单价" prop="price" min-width="160" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.price | numToFixed }}
              </template>
            </el-table-column>
            <el-table-column align="right" label="数量" prop="qty" min-width="160" show-overflow-tooltip />
            <el-table-column align="right" label="金额" prop="totalAmount" min-width="160" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.totalAmount | numToFixed }}
              </template>
            </el-table-column>
            <el-table-column align="right" label="销售数量" prop="salesQty" min-width="160" show-overflow-tooltip />
            <el-table-column align="right" label="销售金额" prop="salesAmount" min-width="160" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.salesAmount | numToFixed }}
              </template>
            </el-table-column>
            <el-table-column align="right" label="押金数量" prop="hasSendQty" min-width="160" show-overflow-tooltip />
            <el-table-column
              align="right"
              label="发货数量"
              prop="orderHasSendQty"
              min-width="160"
              show-overflow-tooltip
            />
            <!-- <el-table-column
              align="right"
              label="押金金额"
              prop="depositAmount"
              min-width="160"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                {{ scope.row.depositAmount | numToFixed }}
              </template>
            </el-table-column> -->
            <el-table-column align="right" label="合同数量" prop="contractQty" min-width="160" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.contractQty }}
              </template>
            </el-table-column>
            <el-table-column align="right" label="合同单价" prop="contractPrice" min-width="160" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.contractPrice }}
              </template>
            </el-table-column>
            <el-table-column align="right" label="合同金额" prop="contractAmount" min-width="160" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.contractAmount }}
              </template>
            </el-table-column>
            <el-table-column align="right" label="押金金额" prop="depositAmount" min-width="160" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.depositAmount | numToFixed }}
              </template>
            </el-table-column>
            <el-table-column align="right" label="上交资料" prop="dataQty" min-width="160" show-overflow-tooltip />
            <el-table-column align="right" label="收差金额" prop="diffAmount" min-width="160" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.diffAmount | numToFixed }}
              </template>
            </el-table-column>
            <el-table-column
              align="right"
              label="收差政策价格"
              prop="diffPolicyPrice"
              min-width="200"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                {{ scope.row.diffPolicyPrice | numToFixed }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <h3>押金货品信息</h3>
      <el-divider />
      <!-- 列表 -->
      <div class="mymain-container">
        <div class="table">
          <el-table
            v-loading="listLoading"
            :data="details.collectList"
            element-loading-text="Loading"
            border
            fit
            highlight-current-row
            stripe
            show-summary
            :summary-method="$getSummaries"
          >
            <el-table-column align="left" label="工程登录单号" prop="refEnginRecordNo" min-width="130" show-overflow-tooltip>
              <template slot-scope="scope">
                <CopyButton :copy-text="scope.row.refEnginRecordNo" />
                <span>{{ scope.row.refEnginRecordNo }}</span>
              </template>
            </el-table-column>
            <el-table-column align="left" label="规格型号" prop="specification" min-width="130" show-overflow-tooltip>
              <template slot-scope="scope">
                <CopyButton :copy-text="scope.row.specification" />
                <span>{{ scope.row.specification }}</span>
              </template>
            </el-table-column>
            <el-table-column align="left" label="基本单位编码" prop="unit" min-width="130" show-overflow-tooltip>
              <template slot-scope="scope">
                <CopyButton :copy-text="scope.row.unit" />
                <span>{{ scope.row.unit }}</span>
              </template>
            </el-table-column>
            <el-table-column align="left" label="现金钱包" prop="customerWalletName" min-width="130" show-overflow-tooltip>
              <template slot-scope="scope">
                <CopyButton :copy-text="scope.row.customerWalletName" />
                <span>{{ scope.row.customerWalletName }}</span>
              </template>
            </el-table-column>
            <el-table-column align="left" label="现金钱包编码" prop="customerWalletNumber" min-width="130" show-overflow-tooltip>
              <template slot-scope="scope">
                <CopyButton :copy-text="scope.row.customerWalletNumber" />
                <span>{{ scope.row.customerWalletNumber }}</span>
              </template>
            </el-table-column>
            <el-table-column align="left" label="金蝶物料类型名称" prop="k3CategoryName" min-width="130" show-overflow-tooltip>
              <template slot-scope="scope">
                <CopyButton :copy-text="scope.row.k3CategoryName" />
                <span>{{ scope.row.k3CategoryName }}</span>
              </template>
            </el-table-column>
            <el-table-column align="left" label="金蝶物料类型编码" prop="k3CategoryNumber" min-width="130" show-overflow-tooltip>
              <template slot-scope="scope">
                <CopyButton :copy-text="scope.row.k3CategoryNumber" />
                <span>{{ scope.row.k3CategoryNumber }}</span>
              </template>
            </el-table-column>
            <el-table-column align="left" label="金蝶物料名称" prop="materialName" min-width="130" show-overflow-tooltip>
              <template slot-scope="scope">
                <CopyButton :copy-text="scope.row.materialName" />
                <span>{{ scope.row.materialName }}</span>
              </template>
            </el-table-column>
            <el-table-column align="left" label="金蝶物料编码" prop="materialNumber" min-width="130" show-overflow-tooltip>
              <template slot-scope="scope">
                <CopyButton :copy-text="scope.row.materialNumber" />
                <span>{{ scope.row.materialNumber }}</span>
              </template>
            </el-table-column>
            <el-table-column align="left" label="金蝶物料旧编码" prop="materialOldNumber" min-width="130" show-overflow-tooltip>
              <template slot-scope="scope">
                <CopyButton :copy-text="scope.row.materialOldNumber" />
                <span>{{ scope.row.materialOldNumber }}</span>
              </template>
            </el-table-column>
            <el-table-column align="left" label="已发押金数量" prop="hasSendQty" min-width="130" show-overflow-tooltip />
            <el-table-column align="left" label="单价" prop="price" min-width="130" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.price | numToFixed }}
              </template>
            </el-table-column>
            <el-table-column align="left" label="已退押金金额" prop="refundDepositAmount" min-width="130" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.refundDepositAmount | numToFixed }}
              </template>
            </el-table-column>
            <el-table-column align="left" label="押金金额" prop="depositAmount" min-width="130" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.depositAmount | numToFixed }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <h3 class="gdzl">工程资料</h3>
      <el-button
        :disabled="isDis"
        class="batchDownload"
        type="primary"
        size="small"
        @click="batchDownloadFn"
      >批量下载
      </el-button>

      <el-divider />

      <!-- 列表 -->
      <div class="mymain-container">
        <div class="table">
          <el-table
            v-loading="listLoading"
            :data="original"
            element-loading-text="Loading"
            border
            fit
            highlight-current-row
            stripe
          >
            <el-table-column align="left" label="资料描述" prop="dataDescribe" min-width="160" show-overflow-tooltip />
            <el-table-column align="left" label="原文件名" prop="fileName" min-width="160" show-overflow-tooltip />
            <el-table-column align="left" label="缩略图" prop="fileUrl" min-width="160" show-overflow-tooltip>
              <template slot-scope="scope">
                <el-image
                  v-if="checkFileType(scope.row.fileUrl) == 'image'"
                  ref="img"
                  :src="imageURL + scope.row.fileUrl"
                  style="width: 120px; height: 120px"
                  fit="cover"
                  :preview-src-list="[imageURL + scope.row.fileUrl]"
                />
                <img v-if="checkFileType(scope.row.fileUrl) == 'word'" class="file" src="@/assets/common/word.png">
                <img v-if="checkFileType(scope.row.fileUrl) == 'excel'" class="file" src="@/assets/common/excel.png">
                <img v-if="checkFileType(scope.row.fileUrl) == 'ppt'" class="file" src="@/assets/common/ppt.png">

                <img
                  v-if="checkFileType(scope.row.fileUrl) == 'pdf'"
                  class="file"
                  style="cursor: pointer"
                  src="@/assets/common/pdf.png"
                  @click="openPdf(scope.row.fileUrl)"
                >

                <img
                  v-if="checkFileType(scope.row.fileUrl) == 'file'"
                  class="file aaa"
                  src="@/assets/common/zip.jpeg"
                >
              </template>
            </el-table-column>
            <el-table-column align="left" label="下载文件名称" prop="fileName" min-width="160" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ '资料_' + scope.row.fileName }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作" min-width="160" show-overflow-tooltip>
              <template slot-scope="scope">
                <el-button
                  type="text"
                  class="textColor"
                  @click="downLoadFn(scope.row.fileUrl, scope.row.fileName)"
                >下载
                </el-button>
                <!--                <el-button-->
                <!--                  v-if="checkFileType(scope.row.fileUrl) == 'pdf'"-->
                <!--                  type="text"-->
                <!--                  class="textColor"-->
                <!--                  @click="openPdf(scope.row.fileUrl)"-->
                <!--                >-->
                <!--                  查看-->
                <!--                </el-button>-->
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="diy-table-1">
        <el-row :gutter="0">
          <el-col :xs="12" :sm="12" :lg="12" class="item">
            <div class="label">申请人</div>
            <div class="value">{{ details.customerName }}</div>
          </el-col>
          <el-col :xs="12" :sm="12" :lg="12" class="item">
            <div class="label">申请日期</div>
            <div class="value">{{ details.createTime }}</div>
          </el-col>
          <el-col :xs="24" :sm="24" :lg="24" class="item">
            <div class="label">申请退押金</div>
            <div class="value">{{ details.applyNote }}</div>
          </el-col>
        </el-row>
      </div>
      <div style="margin-top: 25px">审批</div>
      <el-divider />
      <div class="diy-table-1">
        <el-row :gutter="0">
          <el-col :xs="12" :sm="12" :lg="12" class="item">
            <div class="label">验收人</div>
            <div class="value">{{ details.checkBy }}</div>
          </el-col>
          <el-col :xs="12" :sm="12" :lg="12" class="item">
            <div class="label">受理日期</div>
            <div class="value">{{ details.checkDate }}</div>
          </el-col>
          <el-col :xs="12" :sm="12" :lg="12" class="item">
            <div class="label">是否退押</div>
            <div class="value">
              <template
                v-if="
                  !(
                    details.examineStatus == 'WAIT' ||
                    details.examineStatus == 'SAVE' ||
                    details.examineStatus == 'CLOSE'
                  )
                "
              >
                {{ details.isRefundDeposit == true ? '是' : '否' }}
              </template>
            </div>
          </el-col>
          <el-col :xs="12" :sm="12" :lg="12" class="item">
            <div class="label">审批结果</div>
            <div v-if="details.examineStatus == 'Ok'" class="value">通过</div>
            <div v-if="details.confirmName && details.examineStatus == 'SAVE'" class="value">驳回</div>
          </el-col>
          <el-col :xs="24" :sm="24" :lg="24" class="item">
            <div class="label">验收说明</div>
            <div class="value">{{ details.checkNote }}</div>
          </el-col>
          <!-- <el-col v-if="details.confirmName && details.examineStatus == 'SAVE'" :xs="24" :sm="24" :lg="24" class="item">
            <div class="label">驳回说明</div>
            <div class="value">{{ details.confirmName }}</div>
          </el-col> -->
        </el-row>
      </div>
      <div>
        <div v-if="details.dataState == 'WAIT_REVIEW' || details.dataState == 'AMEND' || details.dataState == 'REVIEW'">
          <h3 class="gdzl">补充资料</h3>
          <el-divider />
          <div class="mymain-container">
            <div class="table">
              <el-table
                v-loading="listLoading"
                :data="amendData"
                element-loading-text="Loading"
                border
                fit
                highlight-current-row
                stripe
              >
                <el-table-column
                  align="left"
                  label="资料描述"
                  prop="dataDescribe"
                  min-width="160"
                  show-overflow-tooltip
                />
                <el-table-column align="left" label="原文件名" prop="fileName" min-width="160" show-overflow-tooltip />
                <el-table-column align="left" label="缩略图" prop="fileUrl" min-width="160" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <el-image
                      v-if="checkFileType(scope.row.fileUrl) == 'image'"
                      ref="img"
                      :src="imageURL + scope.row.fileUrl"
                      style="width: 120px; height: 120px"
                      fit="cover"
                      :preview-src-list="[imageURL + scope.row.fileUrl]"
                    />
                    <img
                      v-if="checkFileType(scope.row.fileUrl) == 'word'"
                      class="file"
                      src="@/assets/common/word.png"
                    >
                    <img
                      v-if="checkFileType(scope.row.fileUrl) == 'excel'"
                      class="file"
                      src="@/assets/common/excel.png"
                    >
                    <img v-if="checkFileType(scope.row.fileUrl) == 'ppt'" class="file" src="@/assets/common/ppt.png">
                    <img v-if="checkFileType(scope.row.fileUrl) == 'pdf'" class="file" src="@/assets/common/pdf.png">
                    <img
                      v-if="checkFileType(scope.row.fileUrl) == 'file'"
                      class="file aaa"
                      src="@/assets/common/zip.jpeg"
                    >
                  </template>
                </el-table-column>
                <el-table-column
                  align="left"
                  label="下载文件名称"
                  prop="fileName"
                  min-width="160"
                  show-overflow-tooltip
                >
                  <template slot-scope="scope">
                    {{ '资料_' + scope.row.fileName }}
                  </template>
                </el-table-column>
                <el-table-column align="center" label="操作" min-width="160" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <el-button
                      type="text"
                      class="textColor"
                      @click="downLoadFn(scope.row.fileUrl, scope.row.fileName)"
                    >下载</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div class="diy-table-1">
              <el-row :gutter="0">
                <el-col :xs="12" :sm="12" :lg="12" class="item">
                  <div class="label">上传人</div>
                  <div class="value">
                    {{ details.amendBy }}
                  </div>
                </el-col>
                <el-col :xs="12" :sm="12" :lg="12" class="item">
                  <div class="label">上传时间</div>
                  <div class="value">
                    {{ details.amendTime }}
                  </div>
                </el-col>
                <el-col :xs="12" :sm="24" :lg="24" class="item">
                  <div class="label">补充说明</div>
                  <div class="value">
                    {{ details.amendRemark }}
                  </div>
                </el-col>
              </el-row>
            </div>
            <div v-if="isCustomer && details.dataState == 'REVIEW'">
              <h3 class="gdzl">复核</h3>
              <el-divider />
              <div class="diy-table-1">
                <el-row :gutter="0">
                  <el-col :xs="12" :sm="12" :lg="12" class="item">
                    <div class="label">复核人</div>
                    <div class="value">
                      <el-input v-model="details.reviewBy" placeholder="请输入" />
                    </div>
                  </el-col>
                  <el-col :xs="12" :sm="12" :lg="12" class="item">
                    <div class="label">复核时间</div>
                    <div class="value">
                      <el-date-picker
                        v-model="details.reviewTime"
                        class="dateStyle"
                        type="datetime"
                        placeholder="选择日期"
                        default-time="00:00:00"
                        value-format="yyyy-MM-dd HH:mm:ss"
                      />
                    </div>
                  </el-col>
                  <el-col :xs="12" :sm="24" :lg="24" class="item">
                    <div class="label">复核说明</div>
                    <div class="value">
                      <input v-model="details.reviewRemark" type="text">
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div style="margin: 20px 0">
        <el-button
          v-if="
            (details.examineStatus != 'OK' || (!isCustomer && details.examineStatus == 'OK')) &&
              details.dataState != 'WAIT_REVIEW' &&
              details.dataState != 'AMEND' &&
              details.dataState != 'REVIEW'
          "
          type="primary"
          size="small"
          @click="handleSvse"
        >保存
        </el-button>
        <el-button
          v-if="
            (details.examineStatus != 'OK' || (!isCustomer && details.examineStatus == 'OK')) &&
              details.dataState != 'WAIT_REVIEW' &&
              details.dataState != 'AMEND' &&
              details.dataState != 'REVIEW'
          "
          type="primary"
          size="small"
          @click="handleReset"
        >重置
        </el-button>
      </div>
    </div>
    <div v-show="engineering == '工程订单信息'">
      <h3>工程订单信息</h3>
      <el-divider />
      <!-- 列表 -->
      <div class="mymain-container">
        <div class="table">
          <el-table
            v-loading="listLoading"
            :data="dataList"
            element-loading-text="Loading"
            border
            fit
            highlight-current-row
            stripe
          >
            <el-table-column align="left" label="工程订单号" prop="enginOrderNo" min-width="160" show-overflow-tooltip>
              <template slot-scope="scope">
                <CopyButton :copy-text="scope.row.enginOrderNo" />
                <span>{{ scope.row.enginOrderNo }}</span>
              </template>
            </el-table-column>
            <el-table-column align="left" label="订单日期" prop="orderDate" min-width="160" show-overflow-tooltip />
            <el-table-column align="left" label="产品名称" prop="materialName" min-width="160" show-overflow-tooltip>
              <template slot-scope="scope">
                <CopyButton :copy-text="scope.row.materialName" />
                <span>{{ scope.row.materialName }}</span>
              </template>
            </el-table-column>
            <el-table-column align="left" label="规格型号" prop="specification" min-width="160" show-overflow-tooltip>
              <template slot-scope="scope">
                <CopyButton :copy-text="scope.row.specification" />
                <span>{{ scope.row.specification }}</span>
              </template>
            </el-table-column>
            <el-table-column align="right" label="单价" prop="price" min-width="160" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.price | numToFixed }}
              </template>
            </el-table-column>
            <el-table-column align="right" label="数量" prop="qty" min-width="160" show-overflow-tooltip />
            <el-table-column
              align="right"
              label="押金金额"
              prop="totalDepositAmount"
              min-width="160"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                {{ scope.row.totalDepositAmount | numToFixed }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div v-show="engineering == '工程发货信息'">
      <h3>工程发货信息</h3>
      <el-divider />
      <!-- 列表 -->
      <div class="mymain-container">
        <div class="table">
          <el-table
            v-loading="listLoading"
            :data="projectList"
            element-loading-text="Loading"
            border
            fit
            highlight-current-row
            stripe
          >
            <el-table-column align="left" label="发货单" prop="id" min-width="160" show-overflow-tooltip>
              <template slot-scope="scope">
                <CopyButton :copy-text="scope.row.id" />
                <span>{{ scope.row.id }}</span>
              </template>
            </el-table-column>
            <el-table-column align="left" label="发货申请日期" prop="theTime" min-width="160" show-overflow-tooltip />
            <el-table-column align="left" label="产品名称" prop="materialName" min-width="160" show-overflow-tooltip>
              <template slot-scope="scope">
                <CopyButton :copy-text="scope.row.materialName" />
                <span>{{ scope.row.materialName }}</span>
              </template>
            </el-table-column>
            <el-table-column align="left" label="规格型号" prop="specification" min-width="160" show-overflow-tooltip>
              <template slot-scope="scope">
                <CopyButton :copy-text="scope.row.specification" />
                <span>{{ scope.row.specification }}</span>
              </template>
            </el-table-column>
            <el-table-column align="right" label="单价" prop="price" min-width="160" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.price | numToFixed }}
              </template>
            </el-table-column>
            <el-table-column align="right" label="数量" prop="refundableQty" min-width="160" show-overflow-tooltip />
            <el-table-column
              align="right"
              label="押金金额"
              prop="totalDepositAmount"
              min-width="160"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                {{ ((scope.row.refundableQty || 0) * (scope.row.singleDepositAmount || 0)) | numToFixed }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div v-show="engineering == '直调发货'" class="zd">
      <div class="table" style="margin-top: 20px">
        <el-table :data="goodsList" element-loading-text="Loading" border fit highlight-current-row stripe>
          <el-table-column align="left" label="发货单" prop="id" min-width="160" show-overflow-tooltip>
            <template slot-scope="scope">
              <CopyButton :copy-text="scope.row.id" />
              <span>{{ scope.row.id }}</span>
            </template>
          </el-table-column>
          <el-table-column align="left" label="发货申请日期" prop="orderTime" min-width="160" show-overflow-tooltip />
          <el-table-column align="left" label="产品名称" prop="materialName" min-width="160" show-overflow-tooltip>
            <template slot-scope="scope">
              <CopyButton :copy-text="scope.row.materialName" />
              <span>{{ scope.row.materialName }}</span>
            </template>
          </el-table-column>
          <el-table-column align="left" label="规格型号" prop="specification" min-width="160" show-overflow-tooltip>
            <template slot-scope="scope">
              <CopyButton :copy-text="scope.row.specification" />
              <span>{{ scope.row.specification }}</span>
            </template>
          </el-table-column>

          <el-table-column align="rihgt" label="单价" prop="price" min-width="160" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.price | numToFixed }}
            </template>
          </el-table-column>
          <el-table-column align="right" label="数量" prop="refundableQty" min-width="160" show-overflow-tooltip />
          <el-table-column
            align="right"
            label="押金金额"
            prop="totalDepositAmount"
            min-width="160"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              {{ ((scope.row.qty || 0) * (scope.row.singleDepositAmount || 0)) | numToFixed }}
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div v-show="engineering == '历史记录'">
      <h3>历史记录</h3>
      <el-divider />
      <!-- 列表 -->
      <div class="mymain-container">
        <div class="table">
          <el-table
            v-loading="listLoading"
            :data="details.checkRecordItems"
            element-loading-text="Loading"
            border
            fit
            highlight-current-row
            stripe
          >
            <el-table-column align="left" label="受理日期" prop="checkDate" min-width="160" show-overflow-tooltip />
            <el-table-column align="left" label="验收人" prop="checkName" min-width="160" show-overflow-tooltip />
            <el-table-column
              align="left"
              label="申请退押金备注
"
              prop="applyNote"
              min-width="160"
              show-overflow-tooltip
            />
            <el-table-column
              align="left"
              label="验收说明
"
              prop="checkNote"
              min-width="160"
              show-overflow-tooltip
            />
            <el-table-column
              align="left"
              label="是否退押
"
              prop="checkNote"
              min-width="160"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                {{ scope.row.isRefundDeposit ? '是' : '否' }}
              </template>
            </el-table-column>
            <el-table-column
              align="left"
              label="提交人
"
              prop="submitName"
              min-width="160"
              show-overflow-tooltip
            />
            <el-table-column align="left" label="提交时间" prop="submitTime" min-width="160" show-overflow-tooltip />
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { editInfo, geDetail, geOrderInfo, getListProject } from '@/api/engin_deposit.js'
import { getList } from '@/api/supply/adjust'
import { downloadFiles, downloadPdf } from '@/utils/util'
import { getFileUrl } from '@/api/common'

export default {
  props: {
    depositManageId: {
      type: [String, Number],
      default: null
    },
    refEnginRecordNo: {
      type: [String, Number],
      default: null
    }
  },
  data() {
    return {
      isDis: true,
      listLoading: false,
      engineering: '工程押金信息',
      dataList: [],
      projectList: [],
      details: {},
      goodsList: [],
      warehouseList: [],
      positionList: [],
      imageURL: this.$imageUrl,
      deliverForm: {
        date: '',
        warehouse: '',
        position: ''
      },
      deliverFormRules: {
        date: [{ required: true, message: '请选择发货日期', trigger: 'change' }],
        warehouse: [{ required: true, message: '请选择发货仓库', trigger: 'change' }],
        position: [{ required: true, message: '请选择仓位', trigger: 'change' }]
      },
      orderType: {
        TRADE: '商用',
        HOME: '家用',
        RETAIL: '零售单',
        RETAIL_POLICY: '销售政策单'
      },
      amendData: [],
      original: []
    }
  },
  computed: {
    isCustomer() {
      return !!(this.$store.getters.customerId && this.$store.getters.customerNumber)
    },
    setColour() {
      return (row, oldValue, newValue, mostNewValue) => {
        let myCalss = ''
        if (row[newValue] !== row[oldValue]) {
          myCalss = 'input'
        }
        if (row[mostNewValue] !== row[newValue]) {
          myCalss = 'input2'
        }
        console.log(row, 9999, myCalss)

        return myCalss
      }
    }
  },
  created() {
    this.getDetail()
  },
  methods: {
    getDetail() {
      if (this.engineering == '工程押金信息') {
        geDetail({ id: this.depositManageId }).then(res => {
          if (res.data.dataList.length == 0) {
            this.isDis = true
          } else {
            this.isDis = false
          }
          const arr = []
          res.data.items.forEach(item => {
            if (Number(item.qty) > 0) {
              arr.push(item)
            }
            // item.number = (item.qty*100 - item.directTransferQty*100 - item.retiredQty*100) / 100;
            item.sums1 = ['orderHasSendQty', 'dataQty', 'qty', 'hasSendQty', 'contractQty']
            item.sums2 = ['totalAmount', 'diffAmount', 'price', 'depositAmount', 'contractPrice', 'contractAmount']
          })
          res.data.collectList.forEach(item => {
            // item.number = (item.qty*100 - item.directTransferQty*100 - item.retiredQty*100) / 100;
            item.sums1 = ['orderHasSendQty', 'dataQty', 'hasSendQty']
            item.sums2 = ['price', 'refundDepositAmount', 'depositAmount']
          })
          res.data.items = arr
          this.amendData = res.data.dataList.filter(k => k.dataPosition == 'AMEND')
          this.original = res.data.dataList.filter(k => k.dataPosition != 'AMEND')
          res.data.realUseUnit = res.data.realUseUnit || res.data.refUseUnit
          res.data.realInstallAddress = res.data.realInstallAddress || res.data.refInstallAddress
          this.details = res.data
        })
      } else if (this.engineering == '工程订单信息') {
        geOrderInfo({
          refEnginRecordNo: this.refEnginRecordNo,
          examineStatus: 'OK'
        }).then(res => {
          this.dataList = res.data
        })
      } else if (this.engineering == '直调发货') {
        getListProject({
          pageSize: -1,
          pageNum: 1,
          type: 3,
          refEnginRecordNo: this.refEnginRecordNo
        }).then(res => {
          this.goodsList = res.data.records
        })
      } else {
        getListProject({
          pageSize: -1,
          pageNum: 1,
          refEnginRecordNo: this.refEnginRecordNo
        }).then(res => {
          this.projectList = res.data.records
        })
      }
    },
    // 批量下载
    async batchDownloadFn() {
      downloadFiles('deposit-manage/downZip', { parentId: this.depositManageId })
    },
    // 下载
    downLoadFn(v, fileName) {
      if (this.checkFileType(v) === 'pdf') {
        downloadPdf(this.$imageUrl + v, fileName)
        return
      }
      downloadFiles('common/file/getStream', { key: v, fileName: fileName })
      // getFileUrl({ key: v }).then((res) => {
      //   window.open(res.data)
      // })
    },
    openPdf(pdfUrl) {
      window.open(this.$imageUrl + pdfUrl)
    },
    // 检查文件类型
    checkFileType(url) {
      if (!url) return ''
      const fileSuffix = url.substring(url.lastIndexOf('.') + 1)

      if (['jpg', 'jpeg', 'png'].includes(fileSuffix)) {
        return 'image'
      } else if (['doc', 'docx', 'dot', 'wps', 'wpt'].includes(fileSuffix)) {
        return 'word'
      } else if (['xls', 'xlsx', 'xlt', 'et', 'ett'].includes(fileSuffix)) {
        return 'excel'
      } else if (['ppt', 'pptx', 'dps', 'dpt', 'pot', 'pps'].includes(fileSuffix)) {
        return 'ppt'
      } else if (['pdf'].includes(fileSuffix)) {
        return 'pdf'
      } else if (['zip', 'rar', 'gz', 'apk'].includes(fileSuffix)) {
        return 'file'
      } else {
        return ''
      }
    },
    goBack() {
      this.$emit('setShowPage', 1)
    },
    handleRadio(e) {
      this.getDetail()
    },
    handleSvse() {
      this.details.isRefundDeposit = this.details.isRefundDeposit == true
      editInfo(this.details).then(res => {
        this.$successMsg('编辑成功')
        this.$emit('setShowPage', 1)
      })
    },
    handleReset() {
      this.$refs.form.resetFields()
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .input .el-input__inner, .input {
  color: blue !important;
}
::v-deep .input2  .el-input__inner, .input2 {
  color: #f00 !important;
}
.aaa {
  height: 64px;
  width: 64px;
}

.gdzl {
  display: inline-block;
}

.batchDownload {
  float: right;
  margin-top: 9px;
}

::v-deep .el-input__prefix {
  display: none;
  left: 65px !important;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

::v-deep .el-date-editor.el-input {
  width: 100%;
  box-sizing: border-box;
  padding-left: 10px;
}

.diy-table-1 {
  ::v-deep .el-form-item {
    margin: 0;
  }
}

.zd {
  ::v-deep .el-input__suffix {
    right: 0;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }
}

::v-deep .el-input__suffix {
  right: -15px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
</style>