mod:拍照记录商品

frontend/src/views/Photography/shot.vue

@@ -22,6 +22,10 @@
           </div>
           <div class="step-content flex-row justify-between">
             <div class="method-container flex-col">
+              <div class="input-container flex-row">
+                <el-input class="input-item" v-model="goods_art_no" placeholder="请输入货号"> </el-input>
+
+              </div>
               <div class="auto-method flex-row justify-between">
                 <div class="text-method-tag flex-col"><span class="text_4">自动获取</span></div>
                 <span class="method-description">用遥控器扫描商品资料二维码</span>
@@ -34,19 +38,6 @@
                 </div>
                 <span class="scan-label">遥控器扫描键</span>
               </div>
-              <div class="manual-method flex-row justify-between">
-                <div class="method-tag flex-col"><span class="text_7">手动获取</span></div>
-                <span class="method-description">手工输入货号</span>
-              </div>
-              <div class="input-container flex-row">
-                <el-input class="input-item" v-model="goods_art_no_tpl" placeholder="请输入货号">
-                  <template #append>
-
-                    <el-button class="input-button" type="primary" @click="saveGoodsArtNo">确认</el-button>
-                  </template>
-                </el-input>
-
-              </div>
             </div>
             <img class="remote-image" referrerpolicy="no-referrer"
               src="@/assets/images/Photography/remote-control.png" />
@@ -94,9 +85,15 @@
               <div v-else class="history-item clearfix"  v-for="item,index in goodsList" style="padding:10px;">
                 <div class="flex  between flex-item  c-333">
                   <div class="chaochu flex-item flex left">货号：{{ item.goods_art_no }}</div>
-                  <div class="c-666 fs-12">{{ getTime(item.action_time) }}</div>
+                  <div>
+                    <el-button size="small"  type="primary" plain>重拍</el-button>
+                    <el-button size="small" click="del(goods_art_nos:[item.goods_art_no])">删除</el-button>
+                  </div>
                 </div>
-                <div class="mar-top-10" style="width: 100%" >
+                <div class="flex  between flex-item  c-333">
+                  <div class="c-999 fs-12">{{ getTime(item.action_time) }}</div>
+                </div>
+                <div class="mar-top-10 clearfix history-item_image_wrap" style="width: 100%" >
                     <component class="history-item_image"
                          v-loading="!image.image_path && runAction.goods_art_no == item.goods_art_no"
                          v-for="image in item.items"
@@ -110,11 +107,14 @@
                           v-if="image.image_path"
                       >
                         <template #reference>
-                          <el-image  :src="getFilePath(image.image_path)"  fit="contain" >
-                            <template #error>
-                              <div class="image-slot"></div>
-                            </template>
-                          </el-image>
+                          <div class="flex el-image_view">
+                            <el-image  :src="getFilePath(image.image_path)"  fit="contain" >
+                              <template #error>
+                                <div class="image-slot"></div>
+                              </template>
+                            </el-image>
+                            <div class="reset-button">重拍</div>
+                          </div>
                         </template>
 
 
@@ -243,7 +243,7 @@ async function getPhotoRecords(params?:{}) {
     loading.true = false;
     clientStore.ipc.removeAllListeners(icpList.takePhoto.getPhotoRecords);
     if(result.code === 0){
-      goodsList.value = result.data.list
+     goodsList.value = result.data.list
     }else if(result.msg) {
       ElMessage.error(result.msg)
     }
@@ -736,9 +736,9 @@ function openPhotographyDetail() {
             }
 
             .input-container {
-              width: 260px;
+              width: calc(100% - 20px );
               height: 36px;
-              margin: 7px 0 42px 83px;
+              margin: 20px 10px 0;
 
               .input-item {
                 :deep(.el-input__inner){
@@ -948,7 +948,38 @@ function openPhotographyDetail() {
           height: calc(100% - 125px);
 
           .history-item {
+            .history-item_image_wrap {
+              padding-bottom: 20px;
+              border-bottom: 1px solid #CCCCCC;
+            }
             .history-item_image {
+              &::before{
+                color: #bbb;
+                position: absolute;
+                left: 0;
+                right: 0;
+                top:50%;
+                margin-top: -15px;
+                line-height: 30px;
+              }
+
+              &:nth-child(1)::before{
+                content:"俯视图";
+              }
+              &:nth-child(2)::before{
+                content:"侧视图";
+              }
+              &:nth-child(3)::before{
+                content:"后视图";
+              }
+              &:nth-child(4)::before{
+                content:"鞋底";
+              }
+              &:nth-child(5)::before{
+                content:"内里";
+              }
+
+              position: relative;
               width: 70px;
               height: 70px;
               float: left;
@@ -971,11 +1002,41 @@ function openPhotographyDetail() {
 
             }
 
+
+            .el-image_view {
+              display: flex;
+              width: 100%;
+              height: 100%;
+
+              .reset-button {
+                width: 40px;
+                text-align: center;
+                height: 20px;
+                position: absolute;
+                left:50%;
+                top:50%;
+                margin-left:-20px;
+                margin-top:-10px;
+                color: #ffffff;
+                font-size: 14px;
+                background: rgba(0,0,0,0.6);
+                border-radius: 12px;
+                display: none;
+                cursor: pointer;
+              }
+              &:hover {
+                .reset-button {
+                  display: block;
+                }
+              }
+            }
             p:first-of-type {
               ::v-deep {
                 .el-loading-mask { display: block !important;}
               }
             }
+
+
           }
         }