supply-front/src/views/engin_deposit/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="" @change="handleRadio">
      <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.refProjectName }}</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 :xs="24" :sm="24" :lg="24" class="item">
              <div class="label">使用单位</div>
              <div class="value">{{ details.refUseUnit }}</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"
                    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" 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
              align="center"
              label="厂工程编码"
              prop="factoryNo"
              min-width="160"
              show-overflow-tooltip
            />
            <el-table-column
              align="center"
              label="物料编码"
              prop="materialNumber"
              min-width="160"
              show-overflow-tooltip
            />
            <el-table-column
              align="center"
              label="产品编码"
              prop="materialOldNumber"
              min-width="160"
              show-overflow-tooltip
            />
            <el-table-column
              align="center"
              label="产品名称"
              prop="materialName"
              min-width="160"
              show-overflow-tooltip
            />
            <el-table-column
              align="center"
              label="规格型号"
              prop="specification"
              min-width="160"
              show-overflow-tooltip
            />
            <el-table-column
              align="center"
              label="单价"
              prop="price"
              min-width="160"
              show-overflow-tooltip
            />
            <el-table-column
              align="center"
              label="数量"
              prop="qty"
              min-width="160"
              show-overflow-tooltip
            />
            <el-table-column
              align="center"
              label="金额"
              prop="totalAmount"
              min-width="160"
              show-overflow-tooltip
            />
            <el-table-column
              align="center"
              label="发货数量"
              prop="hasSendQty"
              min-width="160"
              show-overflow-tooltip
            />
            <el-table-column
              align="center"
              label="押金金额"
              prop="depositAmount"
              min-width="160"
              show-overflow-tooltip
            />
            <el-table-column
              align="center"
              label="上交资料"
              prop="dataQty"
              min-width="160"
              show-overflow-tooltip
            />
            <el-table-column
              align="center"
              label="收差全额"
              prop="diffAmount"
              min-width="160"
              show-overflow-tooltip
            />
          </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="details.dataList"
            element-loading-text="Loading"
            border
            fit
            highlight-current-row
            stripe
          >
            <el-table-column
              align="center"
              label="资料描述"
              prop="dataDescribe"
              min-width="160"
              show-overflow-tooltip
            />
            <el-table-column
              align="center"
              label="原文件名"
              prop="fileName"
              min-width="160"
              show-overflow-tooltip
            />
            <el-table-column
              align="center"
              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="center"
              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.createBy }}</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" :xs="24" :sm="24" :lg="24" class="item">
            <div class="label">驳回说明</div>
            <div class="value">{{ details.confirmName }}</div>
          </el-col>
        </el-row>
      </div>
      <div style="margin: 20px 0">
        <el-button
          type="primary"
          size="small"
          @click="handleSvse"
        >保存</el-button>
        <el-button
          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="center"
              label="工程订单号"
              prop="enginOrderNo"
              min-width="160"
              show-overflow-tooltip
            />
            <el-table-column
              align="center"
              label="订单日期"
              prop="orderDate"
              min-width="160"
              show-overflow-tooltip
            />
            <el-table-column
              align="center"
              label="产品名称"
              prop="materialName"
              min-width="160"
              show-overflow-tooltip
            />
            <el-table-column
              align="center"
              label="规格型号"
              prop="specification"
              min-width="160"
              show-overflow-tooltip
            />
            <el-table-column
              align="center"
              label="单价"
              prop="price"
              min-width="160"
              show-overflow-tooltip
            />
            <el-table-column
              align="center"
              label="数量"
              prop="qty"
              min-width="160"
              show-overflow-tooltip
            />
            <el-table-column
              align="center"
              label="押金金额"
              prop="totalDepositAmount"
              min-width="160"
              show-overflow-tooltip
            />
          </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="center"
              label="发货单"
              prop="id"
              min-width="160"
              show-overflow-tooltip
            />
            <el-table-column
              align="center"
              label="发货申请日期"
              prop="theTime"
              min-width="160"
              show-overflow-tooltip
            />
            <el-table-column
              align="center"
              label="产品名称"
              prop="materialName"
              min-width="160"
              show-overflow-tooltip
            />
            <el-table-column
              align="center"
              label="规格型号"
              prop="specification"
              min-width="160"
              show-overflow-tooltip
            />
            <el-table-column
              align="center"
              label="单价"
              prop="price"
              min-width="160"
              show-overflow-tooltip
            />
            <el-table-column
              align="center"
              label="数量"
              prop="refundableQty"
              min-width="160"
              show-overflow-tooltip
            />
            <el-table-column
              align="center"
              label="押金金额"
              prop="totalDepositAmount"
              min-width="160"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                {{
                  (scope.row.refundableQty || 0) *
                    (scope.row.singleDepositAmount || 0)
                }}
              </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="center"
            label="发货单"
            prop="deliverNo"
            min-width="160"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            label="发货申请日期"
            prop="deliverDate"
            min-width="160"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            label="产品名称"
            prop="materialName"
            min-width="160"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            label="规格型号"
            prop="specification"
            min-width="160"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            label="单价"
            prop="price"
            min-width="160"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            label="数量"
            prop="qty"
            min-width="160"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            label="押金金额"
            prop="totalDepositAmount"
            min-width="160"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              {{
                (scope.row.qty || 0) *
                  (scope.row.singleDepositAmount || 0)
              }}
            </template>
          </el-table-column>
        </el-table>
      </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 {
  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: '销售政策单'
      }
    }
  },
  created() {
    this.getDetail()
  },
  methods: {
    getDetail() {
      if (this.engineering == '工程押金信息') {
        geDetail({ id: this.$parent.depositManageId }).then((res) => {
          this.details = res.data
          if (res.data.dataList.length == 0) {
            this.isDis = true
          } else {
            this.isDis = false
          }
          res.data.items.forEach((item) => {
            // item.number = (item.qty*100 - item.directTransferQty*100 - item.retiredQty*100) / 100;
            item.sums1 = ['hasSendQty', 'dataQty', 'qty']
            item.sums2 = ['totalAmount', 'diffAmount', 'price']
          })
        })
      } else if (this.engineering == '工程订单信息') {
        geOrderInfo({
          refEnginRecordNo: this.$parent.refEnginRecordNo,
          examineStatus: 'OK'
        }).then((res) => {
          this.dataList = res.data
        })
      } else if (this.engineering == '直调发货') {
        getList({
          pageSize: -1,
          pageNum: 1,
          enginRecordNo: this.$parent.refEnginRecordNo
        }).then((res) => {
          this.goodsList = res.data.records
        })
      } else {
        getListProject({
          pageSize: -1,
          pageNum: 1,
          refEnginRecordNo: this.$parent.refEnginRecordNo,
          examineStatus: 'OK'
        }).then((res) => {
          this.projectList = res.data.records
        })
      }
    },
    // 批量下载
    async batchDownloadFn() {
      downloadFiles('/deposit-manage/downZip', { parentId: this.$parent.depositManageId })
    },
    // 下载
    downLoadFn(v, fileName) {
      if (this.checkFileType(v) === 'pdf') {
        downloadPdf(this.$imageUrl + v, fileName)
        return
      }
      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.$parent.showPage = 1
    },
    handleRadio(e) {
      this.getDetail()
    },
    handleSvse() {
      this.details.isRefundDeposit =
        this.details.isRefundDeposit == true
      editInfo(this.details).then((res) => {
        this.$successMsg('编辑成功')
        this.$parent.showPage = 1
      })
    },
    handleReset() {
      this.$refs.form.resetFields()
    }
  }
}
</script>

<style scoped lang="scss">
.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>