vue2-client 1.4.37 → 1.4.39

package/CHANGELOG.md

@@ -1,11 +1,14 @@
 # Change Log
 > 所有关于本项目的变化都在该文档里。
 
-**1.4.37 -2022-10-18 @苗艳强**
+**1.4.37 - 1.4.39 -2022-10-18 @苗艳强**
 - 功能修改：
 - 新增文件列表展示组件
 - 新增图片列表展示组件
 - 新增文件预览组件
+- 图片列表展示组件新增宽度设置
+- 售后工单详情可查看问题描述、图片、附件
+- XFormTable可指定id进行修改操作
 
 **1.4.36 -2022-10-18 @江超**
 - 功能修改：

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-client",
-  "version": "1.4.37",
+  "version": "1.4.39",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/base-client/components/common/XFormTable/XFormTable.vue

@@ -43,7 +43,7 @@
               :loading="editDataLoading"
               class="btn-success"
               type="dashed"
-              @click="editItem">
+              @click="editItem()">
               <a-icon :style="iconStyle" type="edit"/>修改
             </a-button>
             <a-button v-if="!buttonState || buttonState.delete" :disabled="!isDelete" type="danger" @click="deleteItem">
@@ -357,7 +357,7 @@ export default {
       this.modelVisible = true
     },
     // 修改业务
-    editItem () {
+    editItem (selectId) {
       this.businessType = '修改'
       const requestParameters = {
         queryParamsName: this.queryParamsName,
@@ -365,8 +365,11 @@ export default {
         pageNo: 1,
         pageSize: 1
       }
-      requestParameters.conditionParams[this.tableColumns[0].dataIndex] = this.selectedRowKeys[0]
-      requestParameters.f_businessid = this.selectedRowKeys[0]
+      if (selectId === undefined) {
+        selectId = this.selectedRowKeys[0]
+      }
+      requestParameters.conditionParams[this.tableColumns[0].dataIndex] = selectId
+      requestParameters.f_businessid = selectId
       if (this.isTableTemp) {
         this.$emit('tempTableEdit', requestParameters)
         return

package/src/components/FileImageItem/ImageItem.vue

@@ -1,9 +1,9 @@
 <template>
   <div>
     <!-- 图片 -->
-    <span v-for="img in images" :key="img.id" class="picture-card">
+    <span v-for="img in images" :key="img.id" class="picture-card" :style="{ width: cardSize, height: cardSize }">
       <img :src="img.url" :alt="img.name" />
-      <span class="picture-action">
+      <span class="picture-action" :style="{ width: actionSize, height: actionSize }">
         <a-icon type="eye" class="picture-preview-icon" @click="preview(img.url)" />
       </span>
     </span>
@@ -17,6 +17,18 @@ export default {
     images: {
       type: Array,
       required: true
+    },
+    width: {
+      type: Number,
+      default: 150
+    }
+  },
+  computed: {
+    cardSize: function () {
+      return this.width + 'px'
+    },
+    actionSize: function () {
+      return this.width - 22 + 'px'
     }
   },
   methods: {
@@ -31,8 +43,6 @@ export default {
 .picture-card {
   position: relative;
   display: inline-block;
-  width: 150px;
-  height: 150px;
   border: 1px solid #d9d9d9;
   border-radius: 6px;
   padding: 10px;
@@ -49,8 +59,6 @@ export default {
     display: flex;
     justify-content: center;
     align-items: center;
-    width: 128px;
-    height: 128px;
     background: #000;
     opacity: 0;
     transition: opacity 0.3s;

package/src/pages/system/ticket/submitTicketSuccess.vue

@@ -44,6 +44,23 @@
         </a-steps>
       </div>
     </result>
+    <div class="ticket-detail">
+      <a-row class="item">
+        <a-col :span="3"><span class="title">问题描述</span></a-col>
+        <a-col :span="17"><span>{{ details.description }}</span></a-col>
+      </a-row>
+      <a-row class="item">
+        <a-col :span="3"><span class="title">问题截图</span></a-col>
+        <a-col :span="21"><image-item :images="details.images" :width="120" @preview="handleFilePreview" /></a-col>
+      </a-row>
+      <a-row v-if="details.files.length" class="item">
+        <a-col :span="3"><span class="title">附件</span></a-col>
+        <a-col :span="21"><file-item :files="details.files" :downloadable="false" @preview="handleFilePreview" /></a-col>
+      </a-row>
+    </div>
+    <a-modal v-model="filePreviewVisible" :footer="null" :dialog-style="{ top: '30px' }" width="80%" :z-index="1001">
+      <file-preview :path="filePath" />
+    </a-modal>
   </a-card>
 </template>
 
@@ -53,13 +70,15 @@ import DetailList from '@vue2-client/components/tool/DetailList'
 import AStepItem from '@vue2-client/components/tool/AStepItem'
 import { TicketDetailsViewApi, post } from '@vue2-client/services/api'
 import { formatDate } from '@vue2-client/utils/util'
+import { FileItem, ImageItem } from '@vue2-client/components/FileImageItem'
+import FilePreview from '@vue2-client/components/FilePreview'
 
 const AStepItemGroup = AStepItem.Group
 const DetailListItem = DetailList.Item
 
 export default {
   name: 'submitTicketSuccess',
-  components: { AStepItemGroup, AStepItem, DetailListItem, DetailList, Result },
+  components: { AStepItemGroup, AStepItem, DetailListItem, DetailList, Result, FileItem, ImageItem, FilePreview },
   props: {
     // 工单序列号
     serialNumber: {
@@ -80,7 +99,10 @@ export default {
         phone: '',
         createdTime: '',
         confirmTime: '',
-        finishedTime: ''
+        finishedTime: '',
+        description: '',
+        files: [],
+        images: []
       },
       // 控制加急按钮
       urgentAccess: true,
@@ -91,7 +113,10 @@ export default {
       // 取消工单确认框可见性
       closeVisible: false,
       // 控制页面大图标
-      icon: true
+      icon: true,
+      // 文件预览
+      filePreviewVisible: false,
+      filePath: ''
     }
   },
   mounted () {
@@ -175,10 +200,17 @@ export default {
           this.details.createdTime = this.format(res.createdtime, 'yyyy-MM-dd hh:mm:ss')
           this.details.status = res.status
           this.details.phone = res.phone
+          this.details.description = res.description
+          this.details.files = res.files
+          this.details.images = res.images
         }, err => {
           console.log(err)
         })
     },
+    handleFilePreview (path) {
+      this.filePath = path
+      this.filePreviewVisible = true
+    }
   },
   computed: {
     // 用于进度条，进度显示控制
@@ -205,4 +237,15 @@ export default {
     margin-bottom: 20px;
   }
 }
+.ticket-detail {
+  width: 72%;
+  margin: 0 auto;
+  .item {
+    margin-bottom: 14px;
+  }
+  .title {
+    font-size: 14px;
+    font-weight: 600;
+  }
+}
 </style>