Skip to content

GitLab

Q
qk_admin
Commit 7e333e62 authored by yaya's avatar yaya
Browse files
Options

feat: 优化图文估价弹窗

parent c96b6779
Show whitespace changes
Inline Side-by-side
Showing with 180 additions and 126 deletions
src/views/consign/components/ImageValueDialog.vue 0 → 100644
View file @ 7e333e62
<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
View file @ 7e333e62
......@@ -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
View file @ 7e333e62
......@@ -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 '已超时'
}
}
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment