zfire-newmall-admin/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">
        <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" />
      </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}
            />
          )
        }
      },]
    },
    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
          })
        }
      },
      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>