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="mini" @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" v-if="isCustomer">
              <div class="label">格力备注</div>
              <div class="value">{{ details.geLiInerNote }}</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="left" label="跨区厂编号" prop="factoryNo" min-width="160" show-overflow-tooltip>
              <template slot-scope="scope">
                <CopyButton :copyText="scope.row.factoryNo" />
                <span>{{ scope.row.factoryNo }}</span>
              </template>
            </el-table-column>
            <el-table-column align="left" label="物料编码" prop="materialNumber" min-width="160" show-overflow-tooltip>
              <template slot-scope="scope">
                <CopyButton :copyText="scope.row.materialNumber" />
                <span>{{ scope.row.materialNumber }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="left"
              label="产品编码"
              prop="materialOldNumber"
              min-width="160"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <CopyButton :copyText="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 :copyText="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 :copyText="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 />
            <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 />
            <el-table-column align="right" label="发货数量" prop="hasSendQty" min-width="160" show-overflow-tooltip />
            <el-table-column
              align="right"
              label="押金金额"
              prop="depositAmount"
              min-width="160"
              show-overflow-tooltip
            />
            <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
            /> -->
          </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="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.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="left" label="工程订单号" prop="enginOrderNo" min-width="160" show-overflow-tooltip>
              <template slot-scope="scope">
                <CopyButton :copyText="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 :copyText="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 :copyText="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 />
            <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
            />
          </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 :copyText="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 :copyText="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 :copyText="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 />
            <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) }}
              </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 :copyText="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 :copyText="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 :copyText="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 />
          <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) }}
            </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: '销售政策单'
      }
    }
  },
  computed: {
    isCustomer() {
      return this.$store.getters.customerId && this.$store.getters.customerNumber
    }
  },
  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 == '直调发货') {
        getListProject({
          pageSize: -1,
          pageNum: 1,
          type: 3,
          refEnginRecordNo: this.$parent.refEnginRecordNo,
          examineStatus: 'OK'
        }).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
      }
      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.$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>