配件申请单样式优化

pages-home/service/todoDetail.vue

@@ -60,9 +60,9 @@
           <image
               v-for="(url, index) in imageUrls"
               :key="index"
-              :src="url"
+              :src="imgUrlPrex+url"
               class="image-item"
-              @click="showFullScreen(index)"
+              @click="prviewImage(imageUrls,index)"
           />
         </view>
       </view>
@@ -71,43 +71,41 @@
           配件信息
           <view v-if="canOperate" style="float: right; color: #0174F6" @click="addWares">添加配件</view>
         </view>
-        <view @click="changeChoose(item)" class="repairItem" v-for="(item, index) in repairList" :key="index">
+        <uni-collapse ref="collapse">
-          <view class="repairName">
+          <uni-collapse-item v-for="(groupItem, index) in repairList" :key="groupItem.groupId"
-            <radio v-if="canOperate" :value="item.id" :checked="item.selected"/>
+                             :title="groupItem.groupName+'(合计：'+groupItem.nums+'个配件'">
-            {{ item.waresName }}
+            <view class="content">
-            <text class="repairNum">×{{ item.waresCount }}</text>
+              <view @click="changeChoose(item)" v-for="item in groupItem.twItemList" :key="item.id" class="repairItem" >
-          </view>
+                <view class="repairName">
-          <view class="grid">
+                  <radio v-if="canOperate" :value="item.id" :checked="item.selected"/>
-            <view style="grid-area: a" class="girdItem">
+                  {{ item.waresName }}×{{ item.waresCount }}{{ item.unitText }}
-              <text class="label">配件分类</text>
+                </view>
-              <text class="value">{{ item.typeName }}</text>
+                <view class="grid">
+                  <view style="grid-area: a" class="girdItem">
+                    <text class="label">当前库存</text>
+                    <text class="value">{{item.stock}}</text>
+                  </view>
+                  <view style="grid-area: b" class="girdItem">
+                    <text class="label">售价</text>
+                    <text class="value">{{item.salePrice}}</text>
+                  </view>
+                  <view style="grid-area: c" class="girdItem">
+                    <text class="label">状态</text>
+                    <text :class="getWaresStatusClass(item.waresStatus)">{{ getWaresStatus(item.waresStatus) }}</text>
+                  </view>
+                  <view v-if="item.handleName" style="grid-area: d" class="girdItem">
+                    <text class="label">审核人</text>
+                    <text class="value">{{ item.handleName }}</text>
+                  </view>
+                  <view v-if="item.approvalTime" style="grid-area: e" class="girdItem">
+                    <text class="label">审核时间</text>
+                    <text class="value">{{ item.approvalTime }}</text>
+                  </view>
+                </view>
+              </view>
             </view>
-            <view style="grid-area: b" class="girdItem">
+          </uni-collapse-item>
-              <text class="label">当前库存</text>
+        </uni-collapse>
-              <text class="value">{{ item.wares.stock }}</text>
-            </view>
-            <view style="grid-area: c" class="girdItem">
-              <text class="label">单位</text>
-              <text class="value">{{ item.wares.unit }}</text>
-            </view>
-            <!--            <view style="grid-area: d" class="girdItem">-->
-            <!--              <text class="label">编码</text>-->
-            <!--              <text class="value">{{ item.wares.code || ""}}</text>-->
-            <!--            </view>-->
-            <view style="grid-area: d" class="girdItem">
-              <text class="label">售价</text>
-              <text class="value"><input type="number" placeholder="请输入售价" v-model="item.wares.price"/></text>
-            </view>
-            <view style="grid-area: e" class="girdItem">
-              <text class="label">状态</text>
-              <text :class="getWaresStatusClass(item.waresStatus)">{{ getWaresStatus(item.waresStatus) }}</text>
-            </view>
-            <view style="grid-area: f" class="girdItem">
-              <text class="label">审核人</text>
-              <text class="value">{{ item.handleName }}</text>
-            </view>
-          </view>
-        </view>
       </view>
     </view>
     <view v-if="canOperate" class="footer">
@@ -119,10 +117,6 @@
       </view>
     </view>
 
-    <!-- 全屏查看弹窗 -->
-    <view v-if="showFullscreen" class="fullscreen-container" @click="closeFullscreen">
-      <image :src="currentImage" class="fullscreen-image" @click.stop />
-    </view>
   </view>
 </template>
 
@@ -139,6 +133,7 @@ export default {
   data() {
     return {
       viewType: "",
+      imgUrlPrex:config.baseImageUrl,
       id: "",
       title: "",
       canOperate: false,
@@ -165,17 +160,13 @@ export default {
       selectWares: [],
       info: {},
       imageUrls: [],
-      showFullscreen: false,
-      currentImage: ''
     };
   },
-  onShow(){
-    this.getTicketWares()
-    this.getDetail()
-  },
   onLoad(data) {
     this.canOperate = data.canOperate
     this.id = data.id
+  },
+  onShow(){
     this.getTicketWares()
     this.getDetail()
   },
@@ -186,12 +177,18 @@ export default {
         url: '/pages-repair/apply/applyForm?twId=' + this.id
       })
     },
-    showFullScreen(index) {
+    /**
-      this.currentImage = this.imageUrls[index];
+     * 预览图片
-      this.showFullscreen = true;
+     */
-    },
+    prviewImage(imgList, index) {
-    closeFullscreen() {
+      let urls = []
-      this.showFullscreen = false;
+      imgList.forEach(i => {
+        urls.push(this.imgUrlPrex+i)
+      })
+      uni.previewImage({
+        urls: urls,
+        current: index
+      });
     },
     getDateFormat(val) {
       return formatTimestampCustom(val);
@@ -222,7 +219,7 @@ export default {
     },
     getImageUrls(val) {
       this.imageUrls = [...val.split(",").map(item => {
-        return config.baseImageUrl + item
+        return  item
       })]
     },
     async getTicketById(id) {
@@ -274,7 +271,7 @@ export default {
       let params = {};
       this.title = "配件申请单详情"
       //配件申请单
-      url = "/admin-api/repair/twi/list"
+      url = "/admin-api/repair/twi/listApp"
       params.twId = this.id
       this.yesText = "通过全部"
       this.backText = "驳回全部"
@@ -285,14 +282,7 @@ export default {
       }).then((res) => {
         if (res.code == 200) {
           this.repairList = res.data
-          if (this.canOperate && this.repairList && this.repairList.length > 0) {
+
-            this.repairList = this.repairList.filter(item => item.waresStatus === '').map(item => {
-              return {
-                ...item,
-                selected: false
-              }
-            })
-          }
         }
       })
     },
@@ -326,11 +316,12 @@ export default {
           }
         })]
       } else {
-        dataObj.items = [...this.repairList.map(item => {
+        dataObj.items = []
-          return {
+        this.repairList.map((groupItem)=>{
-            id: item.id
+          groupItem.twItemList.map((item)=>{
-          }
+            dataObj.items.push({id:item.id})
-        })]
+          })
+        })
       }
       request({
         url: url,
@@ -454,7 +445,7 @@ export default {
         'c d'
 		'e f';
       grid-template-columns: 1fr 1fr;
-      gap: 30rpx;
+      gap: 10rpx;
 
       .girdItem {
         display: flex;