对接完工明细

src/components/file-upload/index.vue

@@ -25,6 +25,7 @@
           </div>
         </div>
         <div style="display: flex;justify-content: space-around;">
+          <span v-if="showName">{{ item.name }}</span>
           <el-link v-if="viewOnline && (checkFileType(item.url) != 'file')" @click="getBase64(item.url)"
             type="primary">查看</el-link>
           <el-link v-if="download" :href="item.url" type="primary">下载</el-link>
@@ -109,10 +110,14 @@ export default {
       type: Boolean,
       default: true
     },
+    showName: {
+      type: Boolean,
+      default: false
+    },
   },
   data() {
     return {
-	  uid: "id_" + new Date().getTime(),
+      uid: "id_" + new Date().getTime(),
       myHeaders: { 'x-token': getToken() },
       baseURL: process.env.VUE_APP_BASE_API,
       imageURL: this.$imageUrl,

src/views/workOrder/workOrderPool/detailModule/CompletionDetails/index.vue

@@ -1,14 +1,30 @@
 <template>
   <zj-page-container>
-    <zj-page-fill>
-
+    <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],
@@ -17,32 +33,219 @@ export default {
   },
   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: 16,
+          attributes: { disabled: true, placeholder: '' },
+          formItemAttributes: { label: '故障现象', prop: 'bugRemark' },
+        },
+        {
+          name: 'el-radio',
+          options: [
+            { label: '是', value: 'YES' },
+            { label: '否', value: 'NO' },
+          ],
+          md: 8,
+          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) {
-        changeOrderGetOrderProduct({
-          id: this.id
-        }).then(res => {
-          console.log(res)
-        })
+        if (this.id) {
+          changeOrderGetOrderProduct({
+            id: this.id
+          }).then(res => {
+            this.completeDetailData = res.data
+          })
+        }
       },
       deep: true,
       immediate: true,
     },
-  },
-  created() {
-
+    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></style>
+<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>

src/views/workOrder/workOrderPool/detailModule/Evaluation/index.vue

@@ -3,7 +3,7 @@
     <zj-page-fill class="neibuview">
       <zj-form-container>
         <zj-form-module title="评价信息">
-          <zj-table :is-drop="true" :columns="evaluationColumns" :table-data="evaluationData" :table-attributes="{
+          <zj-table :columns="evaluationColumns" :table-data="evaluationData" :table-attributes="{
             border: true
           }" />
         </zj-form-module>