zfire-newmall-admin/src/views/workOrder/workOrderPool/detailModule/CompletionDetails/index.vue

<template>
  <zj-page-container>
    <zj-page-fill class="neibuview">
      <zj-form-container style="margin-bottom:40px">
        <!-- 完工明细 -->
        <zj-form-module v-if="!look" title="完工明细">
          <zj-table ref="tableEl" :isDrop="true" :columns="completionDetailColumns" :tableData="completionDetailData"
            :tableAttributes="{
              border: true
            }"></zj-table>
          <div class="fr">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
              :page-sizes="[10, 20, 30, 50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
              :total="listTotal"></el-pagination>
          </div>
        </zj-form-module>
        <!-- 内外机条码信息 -->
        <zj-form-module v-if="look" title="内外机条码信息" class="header_right_btn">
          <div slot="header" class="btn">
            <el-button v-if="orderDetailFiles.length" type="primary" size="mini" @click="imgVisible = true"> 预览图片
            </el-button>
          </div>
          <zj-table ref="tableEl" :isDrop="true" :columns="barcodeColumns" :tableData="barcodeData" :tableAttributes="{
            border: true
          }"></zj-table>
        </zj-form-module>
        <!-- 图片采集信息 -->
        <zj-form-module v-if="look" title="图片采集信息">
          <div class="imgCJ">
            <div v-for="(v, i) in orderDetailFiles" :key="i">
              <el-image v-if="checkFileType(v.filePath) !== 'mp4'" style="width: 210px; height: 280px"
                :src="$imageUrl + v.filePath" :preview-src-list="[$imageUrl + v.filePath]">
                <div slot="error" style="height: 100%; display: flex; justify-content: center; align-items: center">
                  <i>暂无图片</i>
                </div>
              </el-image>
              <video v-else width="210" height="280" controls>
                <source :src="$imageUrl + v.filePath" />
              </video>
              <div class="imgTitle">
                {{ v.fileName }}
              </div>
            </div>
          </div>
        </zj-form-module>
        <!-- 其他信息 -->
        <zj-form-module v-if="look" title="其他信息" label-width="120px" :formData="formData" :formItems="otherFormItems"
          :column="1">
        </zj-form-module>
      </zj-form-container>
      <div v-if="look" class="fixBtnStyle">
        <el-button size="mini" type="info" @click="look = false">关闭</el-button>
        <el-button v-if="isCancel && $restrict('discardCollectionData')" size="mini" @click="handlerCancelData"
          type="primary">作废采集数据</el-button>
      </div>
      <el-dialog title="图片预览" :visible.sync="imgVisible" :close-on-click-modal="false" :modal-append-to-body="false"
        width="50%" top="8vh" @close="imgVisible = false">
        <div>
          <div class="box">
            <div style="min-height: 200px;" class="flex" v-for="(v, i) in orderDetailFiles" :key="i">
              <el-image v-if="checkFileType(v.filePath) !== 'mp4'" style="width: 720px; height: auto"
                :src="$imageUrl + v.filePath" :preview-src-list="[$imageUrl + v.filePath]">
                <div slot="error"
                  style="width: 720px;height: auto; display: flex; justify-content: center; align-items: center">
                  <i>暂无图片</i>
                </div>
              </el-image>
              <video v-else width="720" height="960" controls>
                <source :src="$imageUrl + v.filePath" />
              </video>
              <div class="imgTitle" style="    flex: 0 0 200px; margin-right: 20px; color: #f00">
                {{ v.fileName }}
                <div style=" margin-top: 20px;">
                  <span v-if="v.fileType == 1">内机条码: {{ v.code }}</span>
                  <span v-if="v.fileType == 3">外机机条码: {{ v.code }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-dialog>
    </zj-page-fill>
  </zj-page-container>
</template>

<script>
//完工明细--------------------------------------------
// import otherMixin from '../createWorker/mixin/otherMixin'
// import {
//   orderInstallOverList,
//   orderInstallOverDetail,
//   orderRepairOverDetail,
//   orderCancelInstallGatherDetail
// } from '@/api/detailModule'
export default {
  // mixins: [otherMixin],
  props: {},
  filters: {
    imgTitleChange(value) {
      let data = [
        {
          type: 1,
          title: '内机'
        },
        {
          type: 2,
          title: '上墙图片'
        },
        {
          type: 3,
          title: '外机'
        },
        {
          type: 4,
          title: '内机其他'
        },
        {
          type: 5,
          title: '外机其他'
        },
        {
          type: 6,
          title: '旧机内机整机图片'
        },
        {
          type: 7,
          title: '旧机外机整机图片'
        },
        {
          type: 8,
          title: '定位确认书'
        },
        {
          type: 9,
          title: '室外机固定图'
        },
        {
          type: 10,
          title: '冷凝水管软接图'
        },
        {
          type: 11,
          title: '外机电源接线图'
        },
        {
          type: 12,
          title: '外机出管处封堵图'
        },
        {
          type: 13,
          title: '室内机安装图'
        },
        {
          type: 14,
          title: '冷凝水管通气孔图'
        },
        {
          type: 15,
          title: '室内机走管图'
        },
        {
          type: 16,
          title: '抽真空保压图片'
        },
        {
          type: 17,
          title: '电子清单'
        },
        {
          type: 18,
          title: '安装完成图片'
        },
        {
          type: 19,
          title: '验收报告'
        },
        {
          type: 20,
          title: '故障位置图'
        }
      ]
      for (const key in data) {
        if (data[key].type == value) {
          return data[key].title
        }
      }
    }
  },
  data() {
    return {
      look: false,
      barcodeData: [],
      formData: {
        bracket: '',
        pipe: '',
        swithFlag: '',
        highAltitude: '',
        hole: ''
      },
      formRules: {},
      pageSize: 15,
      pageNum: 1,
      listTotal: 0,
      completionDetailData: [],
      orderDetailFiles: [],
      orderType: '',
      orderId: '',
      orderDetailId: '', //工单采集明细id
      isCancel: false,
      dispatchStatus: '',
      imgVisible: false,
      status: null
    }
  },
  computed: {
    completionDetailColumns() {
      return [
        {
          columnAttributes: {
            width: 130,
            fixed: 'left',
            align: 'center',
            label: '操作',
            prop: 'teamWorkerName'
          },
          render: (h, { row, column, $index }) => {
            return (
              <div style="">
                <el-button
                  size="mini"
                  type="text"
                  onClick={async () => {
                    this.look = true
                    this.isCancel = row.status != 2 && this.dispatchStatus !== 'YBWG' ? true : false
                    this.getListDetail(row.id, this.orderType)
                  }}
                >
                  查看
                </el-button>
                {row.status == 1 ? (
                  <el-button size="mini" type="text" onClick={async () => { }}>
                    结算单
                  </el-button>
                ) : null}
                {row.status == 1 && this.$restrict('discardCollectionData') ? (
                  <el-popconfirm
                    style="margin-left:10px"
                    onConfirm={async () => {
                      this.orderDetailId = row.id
                      this.handlerCancel()
                    }}
                    title="是否确定需要作废该项内容?"
                  >
                    <el-button slot="reference" size="mini" type="text">
                      作废
                    </el-button>
                  </el-popconfirm>
                ) : null}
              </div>
            )
          }
        },
        {
          columnAttributes: {
            label: '结算状态',
            prop: 'isSettle'
          },
          render: (h, { row, column, $index }) => {
            return <div style="padding-left:6px">{row.isSettle == 'NO' ? '否' : '是'}</div>
          }
        },
        {
          columnAttributes: {
            label: '转结标签',
            prop: ''
          }
        },
        {
          columnAttributes: {
            label: '产品信息',
            prop: 'productName',
            width: 130
          }
        },
        {
          columnAttributes: {
            label: '内机条码',
            prop: 'insideCode',
            width: 130
          }
        },
        {
          columnAttributes: {
            label: '外机条码',
            prop: 'outCode',
            width: 130
          }
        },
        {
          columnAttributes: {
            label: '操作内容',
            prop: 'type'
          },
          render: (h, { row, column, $index }) => {
            return (
              <div style="padding-left:6px">
                {row.type == 'ALL'
                  ? '一体机'
                  : row.type == 'INSIDE'
                    ? '内机'
                    : row.type == 'OUT'
                      ? '外机'
                      : row.type == 'INSIDE_OUT'
                        ? '一内一外'
                        : ''}
              </div>
            )
          }
        },
        {
          columnAttributes: {
            label: '采集人',
            prop: 'operatorName'
          }
        },
        {
          columnAttributes: {
            label: '大小工',
            prop: '',
            width: 180
          },
          render: (h, { row, column, $index }) => {
            return (
              <div style="padding-left:6px">
                {row.mainWorkerName}{row.assistWorkerName ? ',' : ''}{row.assistWorkerName}
              </div>
            )
          }
        },
        {
          columnAttributes: {
            label: '状态',
            prop: 'status'
          },
          render: (h, { row, column, $index }) => {
            return (
              <div style="padding-left:6px">
                {row.status == 0
                  ? '未采集'
                  : row.status == 1
                    ? '已采集'
                    : row.status == 2
                      ? '作废'
                      : row.status == 3
                        ? '临时保存'
                        : ''}
              </div>
            )
          }
        },
        {
          columnAttributes: {
            label: '采集时间',
            prop: 'firstTime'
          }
        },
        {
          columnAttributes: {
            label: '采集来源',
            prop: 'detailSource'
          },
          render: (h, { row, column, $index }) => {
            return (
              <div style="padding-left:6px">
                {row.detailSource == 0 ? '总部' : row.detailSource == 2 ? '家盛茂' : '广佛'}
              </div>
            )
          }
        },
        {
          columnAttributes: {
            label: '提交采集时地址',
            width: 130,
            prop: 'latLngAddress'
          }
        },
        {
          columnAttributes: {
            label: '最后采集图片时(总部结算-GPS定位地址)',
            width: 260,
            prop: 'gpsAddress'
          }
        }
      ]
    },
    barcodeColumns() {
      return [
        {
          columnAttributes: {
            label: '序号',
            prop: ''
          },
          render: (h, { row, column, index }) => {
            return <div style="padding-left:6px">{index + 1}</div>
          }
        },
        {
          columnAttributes: {
            label: '条码',
            prop: ''
          },
          render: (h, { row, column, $index }) => {
            return (
              <div style="padding-left:6px">
                {row.type == 1 ? '内机条码' : row.type == 2 ? '外机条码' : ''} {row.code}
              </div>
            )
          }
        },
        // {
        //   columnAttributes: {
        //     label: '外机条码',
        //     prop: 'brandName'
        //   }
        // },
        {
          columnAttributes: {
            label: '开机密码',
            prop: 'insidePassword'
          }
        },
        ...(() => {
          return [3, 4].includes(this.status) ? [{
            columnAttributes: {
              label: '图片',
              prop: ''
            },
            render: (h, { row, column, $index }) => {
              return (
                <div style="padding-left:6px">
                  <el-image
                    style="width: 210px; height: 280px"
                    src={row.path ? this.$imageUrl + row.path : ''}
                    preview-src-list={row.path ? [this.$imageUrl + row.path] : []}
                  >
                    <div slot="error" style="height: 100%; display: flex; justify-content: center; align-items: center">
                      <i>暂无图片</i>
                    </div>
                  </el-image>
                </div>
              )
            }
          }] : []
        })()

      ]
    },
    otherFormItems() {
      return [
        {
          name: 'el-input',
          md: 6,
          options: [],
          attributes: { disabled: false },
          formItemAttributes: { label: '支架', prop: 'bracket' }
        },
        {
          name: 'el-input',
          md: 6,
          options: [],
          attributes: { disabled: false },
          formItemAttributes: { label: '加长管', prop: 'pipe' }
        },
        {
          name: 'el-input',
          md: 6,
          options: [],
          attributes: { disabled: false },
          formItemAttributes: { label: '空气开关', prop: 'swithFlag' }
        },
        {
          name: 'el-input',
          md: 6,
          options: [],
          attributes: { disabled: false },
          formItemAttributes: { label: '高空作业', prop: 'highAltitude' }
        },
        {
          name: 'el-input',
          md: 6,
          options: [],
          attributes: { disabled: false },
          formItemAttributes: { label: '一次性成型墙孔', prop: 'hole' }
        },
        {
          name: 'el-input',
          md: 24,
          options: [],
          attributes: { disabled: false, type: 'textarea' },
          formItemAttributes: { label: '备注', prop: 'remark' }
        }
      ]
    }
  },
  methods: {
    // 检查文件类型
    checkFileType(url) {
      return url.substring(url.lastIndexOf('.') + 1)
    },
    //作废采集数据
    handlerCancelData() {
      this.$confirm('此操作将作废已采集数据, 是否继续?', '提示', {
        confirmButtonText: '是',
        cancelButtonText: '否',
        type: 'warning',
        closeOnClickModal: false,
        closeOnPressEscape: false,
        showClose: false
      }).then(() => {
        this.handlerCancel()
      }).catch(() => {

      });
    },
    async handlerCancel() {
      let params = {
        orderBaseId: this.orderId,
        orderDetailId: this.orderDetailId
      }
      await orderCancelInstallGatherDetail(params)
      this.$message.success('作废采集成功')
      this.look = false
      this.isCancel = false
      this.getDetail(this.orderId, this.orderType)
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.pageNum = 1
      this.getDetail(this.orderId, this.orderType)
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.getDetail(this.orderId, this.orderType)
    },
    //完工详情
    async getListDetail(id, orderType) {
      if (orderType == 'INSTALL' || orderType === 'RECOVERY') {
        this.orderDetailId = id //工单采集明细id
        let { data } = await orderInstallOverDetail({ id })
        const neiji = []
        const waiji = []
        const neijiqit = []
        const waijiqit = []
        const caiji = []
        const qit = []
        const tshjazqrs = []
        for (let index = 0; index < data.orderDetailFiles.length; index++) {
          const el = data.orderDetailFiles[index]
          if (el.fileType == 1) {
            el.code = data.orderInstallDetailCodes.find(k => k.type == 1)?.code
            neiji.push(el)
          }
          if (el.fileType == 3) {
            el.code = data.orderInstallDetailCodes.find(k => k.type == 2)?.code
            waiji.push(el)
          }
          if (el.fileType == 4) {
            neijiqit.push(el)
          }
          if (el.fileType == 5) {
            waijiqit.push(el)
          }
          if (![1, 3, 4, 5, 21, 44].includes(el.fileType)) {
            caiji.push(el)
          }
          if (el.fileType == 21) {
            qit.push(el)
          }
          if (el.fileType == 44) {
            tshjazqrs.push(el)
          }
        }
        this.orderDetailFiles = [...neiji, ...waiji, ...neijiqit, ...waijiqit, ...caiji, ...qit, ...tshjazqrs]

        data.orderInstallDetailCodes.forEach(v => {
          v.insidePassword = data.insidePassword
        })
        this.barcodeData = data.orderInstallDetailCodes
        this.formData = {
          bracket: data.bracket,
          pipe: data.pipe,
          swithFlag: data.swithFlag,
          highAltitude: data.highAltitude,
          hole: data.hole,
          remark: data.remark
        }
      }
      if (orderType == 'REPAIR') {
        let { data } = await orderRepairOverDetail({ id })
      }
    },
    //完工明细
    async getDetail(orderBaseId, type) {
      let params = {
        orderBaseId,
        pageSize: this.pageSize,
        pageNum: this.pageNum
      }

      if (type == 'INSTALL' || type === 'RECOVERY') {
        let { data } = await orderInstallOverList(params)
        this.completionDetailData = data.records
        this.listTotal = data.total
      }
    },

    init(id, params, status) {
      this.orderType = params.orderType
      this.dispatchStatus = params.dispatchStatus
      this.orderId = id
      this.status = status
      this.getDetail(this.orderId, this.orderType)
    }
  }
}
</script>

<style lang="scss" scoped>
.neibuview {
  box-sizing: border-box;
  padding-left: 16px;

  ::v-deep .zj-page-fill-scroll {
    box-sizing: border-box;
    padding-right: 16px;

    &>div:nth-child(1) {
      margin-top: 20px;
    }
  }
}

.fixBtnStyle {
  position: fixed;
  bottom: 0;
  z-index: 2000;
  padding: 10px 0 30px;
  width: calc(100vw - 120px);
  background-color: #fff
}

::v-deep .header_right_btn {
  .el-card__header {
    div[class='zj-page-container zj-page-container-row'] {
      align-items: center;
    }
  }
}

.btn {
  float: right;
}

.flex {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: flex-end;
  margin-left: 40px;
  padding-bottom: 30px;
}

.box {
  height: calc(100vh - 84px);
  padding-bottom: 84px;
  overflow-y: auto
}

::v-deep .el-dialog__wrapper {
  position: absolute;
  top: 0;
  left: 0;
}

::v-deep .el-dialog {
  margin: 0 auto !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden;
}

.imgCJ {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;

  >div {
    flex: 0 calc((100% - 210px)/6);
    margin-right: 23px;
  }

  .imgTitle {
    font-size: 14px;
    margin: 10px 0 20px;
  }
}
</style>