feat: 优化图文估价弹窗

src/views/consign/components/ImageValueDialog.vue

+<template>
+  <el-dialog
+    v-if="imageValueDialogShow"
+    :visible.sync="imageValueDialogShow"
+    :before-close="handleCancelImageValueDialog"
+    width="600px"
+    height="800px"
+    title="图文评估">
+    <el-form ref="imageValue" :model="imageValueForm" :rules="imageValueRules">
+      <el-form-item label="估价" label-width="60px" prop="imgValuation">
+        <el-input v-model="imageValueForm.imgValuation" maxlength="10" style="width: 400px" placeholder="请输入估价金额" />
+      </el-form-item>
+      <el-form-item label="理由" label-width="60px" prop="remark">
+        <el-input
+          v-model="imageValueForm.remark"
+          :autosize="{ minRows: 8, maxRows: 8}"
+          maxlength="100"
+          type="textarea"
+          show-word-limit
+          placeholder="请输入理由"
+          style="width: 400px" />
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="handleCancelImageValueDialog">取 消</el-button>
+      <el-button type="primary" @click="handleImageValue">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { MessageBox } from 'element-ui'
+import { imgValuate } from '@/api/business/consign'
+export default {
+  name: 'ImageValueDialog',
+  props: {
+    imageValueDialogShow: {
+      type: Boolean,
+      default: false
+    },
+    saleId: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      imageValueForm: {
+        imgValuation: '',
+        remark: ''
+      },
+      imageValueRules: {
+        imgValuation: [
+          { required: true, message: '估价金额不能为空', trigger: 'blur' }
+        ],
+        remark: [
+          { required: true, message: '原因不能为空', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    handleCancelImageValueDialog() {
+      this.$emit('cancelDialog')
+    },
+    /**
+     * 实物评估
+     */
+    handleImageValue() {
+      const params = { ...this.imageValueForm, saleId: this.saleId }
+      this.$refs.imageValue.validate((valid) => {
+        if (valid) {
+          imgValuate(params)
+            .then(response => {
+              this.itemContent = {}
+              this.imageValueForm = {}
+              this.$notify.success({
+                message: '图文估价成功'
+              })
+              this.$emit('refreshList')
+              this.$emit('cancelDialog')
+            })
+            .catch(response => {
+              MessageBox.alert('业务错误：' + response.data.errmsg, '警告', {
+                confirmButtonText: '确定',
+                type: 'error'
+              })
+            })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.content {
+  width: 100%;
+  text-align: center;
+}
+
+.image {
+  width: 400px;
+  height: auto;
+}
+
+</style>

src/views/consign/consignDetail.vue

@@ -9,9 +9,10 @@
       </el-button>
       <el-button
         v-if="systemState === 1"
+        :disabled="consignDetail.isHasPrice"
         type="primary"
         size="mini"
-        @click="imageValueDialogShow = true">图文评估
+        @click="imageValueDialogShow = true">图文估价
       </el-button>
       <el-button
         v-if="systemState === 8"
@@ -78,33 +79,13 @@
         </div>
       </el-card>
     </div>
-
-    <el-dialog
+    <!--图文估价-->
+    <ImageValueDialog
       v-if="imageValueDialogShow"
-      :visible.sync="imageValueDialogShow"
-      width="600px"
-      height="800px"
-      title="图文评估">
-      <el-form ref="imageValue" :model="imageValueForm" :rules="imageValueRules">
-        <el-form-item label="估价" label-width="60px" prop="imgValuation">
-          <el-input v-model="imageValueForm.imgValuation" maxlength="10" style="width: 400px" placeholder="请输入估价金额" />
-        </el-form-item>
-        <el-form-item label="理由" label-width="60px" prop="remark">
-          <el-input
-            v-model="imageValueForm.remark"
-            :autosize="{ minRows: 8, maxRows: 8}"
-            maxlength="100"
-            type="textarea"
-            show-word-limit
-            placeholder="请输入理由"
-            style="width: 400px" />
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="handleCancelImageValueDialog">取 消</el-button>
-        <el-button type="primary" @click="handleImageValue">确 定</el-button>
-      </div>
-    </el-dialog>
+      :sale-id="saleId"
+      :image-value-dialog-show="imageValueDialogShow"
+      @cancelDialog="imageValueDialogShow = false"
+      @refreshList="handleGetDetail"/>
     <IdentifyValueDialog
       v-if="identifyValueDialogShow"
       :identify-value-dialog-show="identifyValueDialogShow"
@@ -179,10 +160,11 @@ import { MessageBox } from 'element-ui'
 import CheckLargeImageDialog from '../goods/components/CheckLargeImageDialog'
 import CheckVideoDialog from '../goods/components/CheckVideoDialog'
 import IdentifyValueDialog from './components/IdentifyValueDialog'
+import ImageValueDialog from './components/ImageValueDialog'
 
 export default {
   name: 'ConsignDetail',
-  components: { IdentifyValueDialog, CheckVideoDialog, CheckLargeImageDialog },
+  components: { ImageValueDialog, IdentifyValueDialog, CheckVideoDialog, CheckLargeImageDialog },
   data() {
     return {
       saleId: '',
@@ -194,15 +176,8 @@ export default {
         imgValuation: '',
         remark: ''
       },
+      // 图文估价
       imageValueDialogShow: false,
-      imageValueRules: {
-        imgValuation: [
-          { required: true, message: '估价金额不能为空', trigger: 'blur' }
-        ],
-        remark: [
-          { required: true, message: '原因不能为空', trigger: 'blur' }
-        ]
-      },
 
       // 实物估价
       identifyValueDialogShow: false,
@@ -337,11 +312,6 @@ export default {
         })
       }
     },
-    // 取消图文估价
-    handleCancelImageValueDialog() {
-      this.imageValueDialogShow = false
-      this.imageValueForm = {}
-    },
     // 取消完成寄售
     handleCancelFinishDialog() {
       this.finishDialogShow = false

src/views/consign/consignList.vue

@@ -36,9 +36,12 @@
       </el-table-column>
 
       <el-table-column align="center" label="状态" prop="systemStateName" />
-      <el-table-column v-if="listQuery.systemState === '1' || listQuery.systemState === '8'" align="center" label="等待用户确认" prop="cancelType" >
+      <el-table-column v-if="listQuery.systemState === '1' || listQuery.systemState === '8'" align="center" label="等待用户确认" prop="intervalTime" min-width="100px">
         <template slot-scope="scope">
-          <img v-if="scope.row.itemImg" :src="scope.row.itemImg" width="60px" height="60px">
+          <div v-if="!scope.row.isHasPrice" >暂无估价</div>
+          <div v-if="scope.row.isHasPrice" >
+            <span style="color: red">{{ scope.row.intervalTime }}</span>
+          </div>
         </template>
       </el-table-column>
       <el-table-column v-if="listQuery.systemState === '6'" align="center" label="物流公司" prop="cancelType" />
@@ -55,12 +58,14 @@
             size="mini"
             @click="handleToDetail(scope.row)">详情
           </el-button>
+          <div v-if="scope.row.systemState === 1" style="margin: 0 12px">
             <el-button
-            v-if="scope.row.systemState === 1"
+              :disabled="scope.row.isHasPrice"
               type="primary"
               size="mini"
-            @click="handleImageValueDialogShow(scope.row)">图文评估
+              @click="handleImageValueDialogShow(scope.row)">图文估价
             </el-button>
+          </div>
           <el-button
             v-if="scope.row.systemState === 6"
             type="primary"
@@ -104,32 +109,13 @@
       :page.sync="listQuery.page"
       :limit.sync="listQuery.size"
       @pagination="getList" />
-    <el-dialog
+    <!--图文估价-->
+    <ImageValueDialog
       v-if="imageValueDialogShow"
-      :visible.sync="imageValueDialogShow"
-      width="600px"
-      height="800px"
-      title="图文评估">
-      <el-form ref="imageValue" :model="imageValueForm" :rules="imageValueRules">
-        <el-form-item label="估价" label-width="60px" prop="imgValuation">
-          <el-input v-model="imageValueForm.imgValuation" maxlength="10" style="width: 400px" placeholder="请输入估价金额" />
-        </el-form-item>
-        <el-form-item label="理由" label-width="60px" prop="remark">
-          <el-input
-            v-model="imageValueForm.remark"
-            :autosize="{ minRows: 8, maxRows: 8}"
-            maxlength="100"
-            type="textarea"
-            show-word-limit
-            placeholder="请输入理由"
-            style="width: 400px" />
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="handleCancelImageValueDialog">取 消</el-button>
-        <el-button type="primary" @click="handleImageValue">确 定</el-button>
-      </div>
-    </el-dialog>
+      :sale-id="currentSaleId"
+      :image-value-dialog-show="imageValueDialogShow"
+      @cancelDialog="imageValueDialogShow = false"
+      @refreshList="getList"/>
     <!--建议寄售价-->
     <IdentifyValueDialog
       v-if="identifyValueDialogShow"
@@ -195,10 +181,12 @@ import Pagination from '@/components/Pagination'
 import { findConsignList, imgValuate, identifyImage, finishValue, cancelValue } from '@/api/business/consign'
 import { MessageBox } from 'element-ui'
 import IdentifyValueDialog from './components/IdentifyValueDialog'
+import ImageValueDialog from './components/ImageValueDialog'
 
 export default {
   name: 'ConsignList',
   components: {
+    ImageValueDialog,
     IdentifyValueDialog,
     Pagination,
     Line2Hidden
@@ -241,19 +229,8 @@ export default {
       },
       list: [],
       total: 0,
-      imageValueForm: {
-        imgValuation: '',
-        remark: ''
-      },
+      // 图文估价
       imageValueDialogShow: false,
-      imageValueRules: {
-        imgValuation: [
-          { required: true, message: '估价金额不能为空', trigger: 'blur' }
-        ],
-        remark: [
-          { required: true, message: '原因不能为空', trigger: 'blur' }
-        ]
-      },
       // 建议寄售价
       identifyValueDialogShow: false,
       currentSaleId: '',
@@ -315,6 +292,11 @@ export default {
         this.list = response.data.data.dataList
         this.total = response.data.data.total
         this.listLoading = false
+        if (this.listQuery.systemState === '1' || this.listQuery.systemState === '8') {
+          this.list.forEach((el) => {
+            this.countDown(el)
+          })
+        }
       }).catch((e) => {
         this.list = []
         this.total = 0
@@ -334,6 +316,7 @@ export default {
     handleImageValueDialogShow(item) {
       this.imageValueDialogShow = true
       this.itemContent = item
+      this.currentSaleId = item.saleId
     },
     /**
      * 货品签收
@@ -357,46 +340,6 @@ export default {
           })
         })
     },
-    /**
-     * 图文评估
-     */
-    handleImageValue() {
-      if (this.itemContent) {
-        const params = { ...this.imageValueForm, saleId: this.itemContent.saleId }
-        this.$refs.imageValue.validate((valid) => {
-          if (valid) {
-            imgValuate(params)
-              .then(response => {
-                this.itemContent = {}
-                this.imageValueDialogShow = false
-                this.imageValueForm = {}
-                this.$notify.success({
-                  message: '图文估价成功'
-                })
-                this.getList()
-              })
-              .catch(response => {
-                MessageBox.alert('业务错误：' + response.data.errmsg, '警告', {
-                  confirmButtonText: '确定',
-                  type: 'error'
-                })
-              })
-          }
-        })
-      }
-    },
-    // 取消图文估价
-    handleCancelImageValueDialog() {
-      this.imageValueDialogShow = false
-      this.itemContent = {}
-      this.imageValueForm = {}
-    },
-    // 取消实物评估
-    handleCancelIdentifyDialog() {
-      this.identifyValueDialogShow = false
-      this.itemContent = {}
-      this.identifyValueForm = {}
-    },
     // 取消完成寄售
     handleCancelFinishDialog() {
       this.finishDialogShow = false
@@ -515,6 +458,40 @@ export default {
           }
         })
       }
+    },
+    /** 倒计时*/
+    countDown(row) {
+      // acceptanceOverTime 是我后台返回的截止时间
+      if (new Date(row.countdownTime).getTime() - new Date().getTime() <= 0) {
+        return
+      }
+      /* setInterval(() => {
+        if (new Date(row.countdownTime).getTime() - new Date().getTime() <= 0) {
+          row.intervalTime = '已超时'
+          return
+        }
+        row.intervalTime = this.formatDuring(new Date(row.countdownTime).getTime() - new Date().getTime())
+        console.log('===row.intervalTime==', row.intervalTime)
+      }, 1000) */
+      // 这边采取的是10秒调用一次
+      // 这里采用简单写法，直接在查询的时候调用一次，不用等定时器调用
+      row.intervalTime = this.formatDuring(new Date(row.countdownTime).getTime() - new Date().getTime())
+    },
+    formatDuring(mss) {
+      console.log('======mss=', mss)
+      if (mss > 0) {
+        const hours = parseInt((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)) // 得到小时
+        const minutes = parseInt((mss % (1000 * 60 * 60)) / (1000 * 60)) // 得到分钟数
+        // 获取分钟
+        const str1 = minutes < 10 ? ('0' + minutes) : minutes
+
+        // 得到秒数
+        const seconds = parseInt((mss % (1000 * 60)) / 1000)
+        const str2 = seconds < 10 ? ('0' + seconds) : seconds
+        return hours + ':' + str1 + ':' + str2
+      } else {
+        return '已超时'
+      }
     }
   }
 }