jsm-mall-front/src/views/workOrder/workOrderPool/detailModule/CompletionDetails/index.vue

<template>
  <zj-page-container>
    <zj-page-fill class="neibuview">
      <zj-form-container v-if="!detailId" key="completeDetail">
        <zj-form-module title="完工明细">
          <zj-table :columns="completeDetailColumns" :table-data="completeDetailData" />
        </zj-form-module>
      </zj-form-container>
      <zj-form-container v-else key="details">
        <template v-if="formData.pgOrderBase && formData.pgOrderBase.orderType !== 'INSTALL'">
          <zj-form-module title="维修信息" :form-data="formData" :form-items="repairInfo" />
          <zj-form-module title="采集图片" :form-data="formData" :form-items="INSTALL_pgOrderProductImgs" />
          <zj-form-module title="故障图片" :form-data="formData" :form-items="BUG_pgOrderProductImgs" />
        </template>
        <zj-form-module v-else title="采集信息" :form-data="formData" :form-items="INSTALL_pgOrderProductImgs" />
      </zj-form-container>
    </zj-page-fill>
    <div v-if="detailId" style="box-sizing: border-box; padding: 16px">
      <el-button @click="close" size="mini">关闭</el-button>
    </div>
  </zj-page-container>
</template>

<script>
import { changeOrderGetOrderProduct, changeOrderProductDetail } from '@/api/workOrderPool.js'
import ImageUpload from '@/components/file-upload'
export default {
  components: {
    ImageUpload
  },
  props: {
    id: {
      type: [String, Number],
      default: null
    }
  },
  data() {
    return {
      completeDetailData: [],
      detailId: '',
      formData: {
        bugRemark: '',
        detailRemark: '',
        isDefend: '',
        pgOrderProductDetails: []
      }
    }
  },
  computed: {
    completeDetailColumns() {
      return [
        {
          columnAttributes: {
            label: '操作',
            prop: '',
            width: 60
          },
          render: (h, { row, column, index }) => {
            return (
              <div style="padding-left:10px">
                <el-button
                  type="text"
                  onClick={() => {
                    this.detailId = row.id
                  }}
                >
                  查看
                </el-button>
              </div>
            )
          }
        },
        {
          columnAttributes: {
            label: '品牌名称',
            prop: 'brandName'
          }
        },
        {
          columnAttributes: {
            label: '产品大类',
            prop: 'mainName'
          }
        },
        {
          columnAttributes: {
            label: '产品小类',
            prop: 'smallName'
          }
        },
        {
          columnAttributes: {
            label: '机型名称',
            prop: 'productName'
          }
        },
        {
          columnAttributes: {
            label: '负责工程师',
            prop: 'workerName'
          }
        },
        {
          columnAttributes: {
            label: '联系电话',
            prop: 'workerMobile'
          }
        },
        {
          columnAttributes: {
            label: '状态',
            prop: 'status'
          }
        },
        {
          columnAttributes: {
            label: '采集时间',
            prop: 'giveTime'
          }
        },
        {
          columnAttributes: {
            label: '采集地址',
            prop: 'sumbitAddress',
            width: 260
          }
        },
        {
          columnAttributes: {
            label: '最后采集图片时 （总部结算--GPS定位地址）',
            prop: 'giveAddress',
            width: 260
          }
        }
      ]
    },
    repairInfo() {
      return [
        {
          name: 'el-input',
          md: 14,
          attributes: { disabled: true, placeholder: '' },
          formItemAttributes: { label: '故障现象', prop: 'bugRemark' }
        },
        {
          name: 'el-radio',
          options: [
            { label: '是', value: 'YES' },
            { label: '否', value: 'NO' }
          ],
          md: 10,
          attributes: { disabled: true, placeholder: '' },
          formItemAttributes: { label: '是否质保', prop: 'isDefend' }
        },
        {
          name: 'el-input',
          md: 24,
          attributes: { disabled: true, type: 'textarea', placeholder: '' },
          formItemAttributes: { label: '备注', prop: 'detailRemark' }
        }
      ]
    },
    INSTALL_pgOrderProductImgs() {
      return [
        {
          md: 24,
          name: 'slot-component',
          formItemAttributes: {
            label: '',
            prop: '',
            'label-width': '0px'
          },
          render: (h, { props, onInput }) => {
            return (
              <ImageUpload
                fileList={this.formData?.pgOrderProductDetails
                  ?.filter(item => item.type === 'INSTALL')
                  .map(item => ({ url: item.fileUrl, name: item.fileName }))}
                limit={1000}
                isEdit={false}
                viewOnline={false}
                download={false}
                showName={true}
              />
            )
          }
        },
        {
          show: this.formData.pgOrderBase && this.formData.pgOrderBase.orderType == 'INSTALL',
          name: 'el-input',
          md: 24,
          attributes: { disabled: true, type: 'textarea', placeholder: '' },
          formItemAttributes: { label: '备注', prop: 'detailRemark' }
        }
      ]
    },
    BUG_pgOrderProductImgs() {
      return [
        {
          md: 24,
          name: 'slot-component',
          formItemAttributes: {
            label: '',
            prop: '',
            'label-width': '0px'
          },
          render: (h, { props, onInput }) => {
            return (
              <ImageUpload
                fileList={this.formData?.pgOrderProductDetails
                  ?.filter(item => item.type === 'BUG')
                  .map(item => ({ url: item.fileUrl, name: item.fileName }))}
                limit={1000}
                isEdit={false}
                viewOnline={false}
                download={false}
                showName={true}
              />
            )
          }
        }
      ]
    }
  },
  watch: {
    id: {
      handler(newVal, oldVal) {
        if (this.id) {
          changeOrderGetOrderProduct({
            id: this.id
          }).then(res => {
            this.completeDetailData = res.data.map(item => {
              return {
                ...item,
                status: { WAIT: '待采集', WAIT_SAVE: '待完善', WAIT_OK: '临时采集', OK: '已采集' }[item.status]
              }
            })
          })
        }
      },
      deep: true,
      immediate: true
    },
    detailId: {
      handler(newVal, oldVal) {
        if (this.detailId) {
          changeOrderProductDetail({
            id: this.detailId
          }).then(res => {
            this.formData = res.data
            console.log(res)
          })
        }
      },
      deep: true
    }
  },
  methods: {
    close() {
      this.$data.formData = this.$options.data().formData
      this.detailId = ''
    }
  }
}
</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;
    }
  }
}
</style>