|
|
@@ -0,0 +1,460 @@
|
|
|
+<template>
|
|
|
+ <div class="container">
|
|
|
+ <template v-if="isFinish">
|
|
|
+
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <div class="top" v-if="orderInfo.productInfo">
|
|
|
+ <span>订单号:{{orderInfo.orderCode}}</span>
|
|
|
+ <span style="margin-left:20px;">{{orderInfo.productInfo.title}}</span>
|
|
|
+ <template v-if="!isChange">
|
|
|
+ <span style="font-size:14px;color:#666;margin-left:20px">已审核/全部:{{orderInfo.quantity-needCheckNum}}/{{orderInfo.quantity}}</span>
|
|
|
+ <el-button style="float:right;margin:20px 20px 0 30px;" v-if="isSuccess" type="primary" class="btn" @click="submit">审核通过</el-button>
|
|
|
+ <el-button style="float:right;margin:20px 20px 0 30px;" v-if="isFail" type="warning" class="btn" @click="getRepair">确认提交第{{repairNum}}次返修</el-button>
|
|
|
+ </template>
|
|
|
+ <el-select v-if="!isChange" size="mini" style="float:right;margin-top:25px;width:120px" clearable v-model="statusFlag" placeholder="筛选状态" @change="getImage">
|
|
|
+ <el-option key="0" label="未审核" value="0">
|
|
|
+ </el-option>
|
|
|
+ <el-option key="1" label="审核通过" value="1">
|
|
|
+ </el-option>
|
|
|
+ <el-option key="2" label="审核失败" value="2">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="content">
|
|
|
+
|
|
|
+ <template v-if="orderImage.length>0">
|
|
|
+ <div class="imgList">
|
|
|
+ <div class="title">原<br/>片</div>
|
|
|
+
|
|
|
+ <img-item v-for="(item,index) in orderImage" @changeRemark="getImage" :label='"originalImage"' :index='index' :img='item' :imgStyle='"examine"' @delImg='getImage' style="display:inline-block;margin:0 30px 0 0;vertical-align: middle;"></img-item>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="imgList" style="margin-top:50px;">
|
|
|
+ <div class="title" style="color:#FB6E08">成<br/>片</div>
|
|
|
+ <img-item :isChange='isChange' v-for="(item,index) in orderImage" @changeRemark="changeRemark" :label='"finishedImage"' :index='index' :img='item' :imgStyle='"examine"' @delImg='getImage' style="display:inline-block;margin:0 30px 0 0;vertical-align: middle;"></img-item>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div v-else class="nothing">
|
|
|
+ <img src="../assetsPre/nothingImg.png" alt="">
|
|
|
+ <p>没有图片哦!</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-pagination style="padding:0 0 20px" background :page-size="7" @current-change="currentPageChange" :current-page="currentPage" layout="total, prev, pager, next" :total="totalNumber">
|
|
|
+ </el-pagination>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import { mapState } from 'vuex'
|
|
|
+import imgItem from '../components/ImgItem'
|
|
|
+import formValidator from '../formValidator'
|
|
|
+const baseUrl = process.env.NODE_ENV === 'production' ? '../' : 'http://localhost:8080';
|
|
|
+export default {
|
|
|
+ created() {
|
|
|
+ this.$http.get({
|
|
|
+ url: '/userOrder/getOne',
|
|
|
+ data: {
|
|
|
+ id: this.$route.query.orderId
|
|
|
+ }
|
|
|
+ }).then(res => {
|
|
|
+ if (res.success) {
|
|
|
+ this.orderInfo = res.data
|
|
|
+ if (res.data) {
|
|
|
+ if (res.data.orderRepairList.length != 0) {
|
|
|
+ if (res.data.orderRepairList[0].statusFlag != 0) {
|
|
|
+ this.isFirstCheck = false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.$route.query.repairId) {
|
|
|
+ this.repairId = this.$route.query.repairId
|
|
|
+ res.data.orderRepairList.forEach(item => {
|
|
|
+ if (this.repairId == item.id) {
|
|
|
+ if (item.statusFlag == 3) {
|
|
|
+ this.isFinish = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ })
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ if (this.orderInfo.orderRepairList.length > 0) {
|
|
|
+ this.repairId = this.orderInfo.orderRepairList[0].id
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!this.isFirstCheck) {
|
|
|
+ this.isFinish = true
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.isFinish) {
|
|
|
+ this.$alert('该阶段审核已经结束', '审核结束', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ callback: action => {
|
|
|
+ window.close()
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ this.getImage()
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ if (this.$route.query.isChange) {
|
|
|
+ this.isChange = true
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState(['userInfo']),
|
|
|
+ url() {
|
|
|
+ return baseUrl + '/assets/uploadFile'
|
|
|
+ },
|
|
|
+ allImage() {
|
|
|
+ var list = []
|
|
|
+ this.addImage.forEach(item => {
|
|
|
+ list.push(item.originalImage)
|
|
|
+ })
|
|
|
+ return list
|
|
|
+ },
|
|
|
+ canUploadNum() {
|
|
|
+ var num = 0
|
|
|
+ if (this.orderInfo.quantity) {
|
|
|
+ num = this.orderInfo.quantity - this.orderImage.length
|
|
|
+ }
|
|
|
+ return num
|
|
|
+ },
|
|
|
+ repairNum() {
|
|
|
+ var num = 0
|
|
|
+ if (this.orderInfo.orderRepairList.length) {
|
|
|
+ num = this.orderInfo.orderRepairList[this.orderInfo.orderRepairList.length - 1].typeFlag + 1
|
|
|
+ if (this.orderInfo.orderRepairList[this.orderInfo.orderRepairList.length - 1].statusFlag != 0) {
|
|
|
+ num++
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ return num
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ orderInfo: {},
|
|
|
+ dialogVisible: false,
|
|
|
+ addImage: [],
|
|
|
+ orderImage: [],
|
|
|
+ currentPage: 1,
|
|
|
+ totalNumber: 0,
|
|
|
+ isSuccess: false,
|
|
|
+ isFail: false,
|
|
|
+ repairId: 0,
|
|
|
+ isChange: false,
|
|
|
+ statusFlag: '',
|
|
|
+ needCheckNum: 0,
|
|
|
+ isFirstCheck: true,
|
|
|
+ isFinish: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ changeRemark() {
|
|
|
+ if (!this.repairId) {
|
|
|
+ this.$http.get({
|
|
|
+ url: '/userOrder/getOne',
|
|
|
+ data: {
|
|
|
+ id: this.$route.query.orderId
|
|
|
+ }
|
|
|
+ }).then(res => {
|
|
|
+ if (res.success) {
|
|
|
+ this.orderInfo = res.data
|
|
|
+ if (this.$route.query.repairId) {
|
|
|
+ this.repairId = this.$route.query.repairId
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ if (this.orderInfo.orderRepairList.length > 0) {
|
|
|
+ this.repairId = this.orderInfo.orderRepairList[0].id
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ this.getImage()
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ this.getImage()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ currentPageChange(page) {
|
|
|
+ this.currentPage = page;
|
|
|
+ this.getImage();
|
|
|
+ },
|
|
|
+ getImage() {
|
|
|
+ var data = {
|
|
|
+ orderId: this.$route.query.orderId,
|
|
|
+ currentPage: this.currentPage,
|
|
|
+ pageNumber: 7,
|
|
|
+ }
|
|
|
+ if (this.repairId) {
|
|
|
+ data.repairId = this.repairId
|
|
|
+ }
|
|
|
+ if (this.$route.query.repairId) {
|
|
|
+ data.baseRepairId = this.$route.query.repairId
|
|
|
+ }
|
|
|
+ if (this.statusFlag) {
|
|
|
+ data.statusFlag = this.statusFlag
|
|
|
+ }
|
|
|
+ this.orderImage = []
|
|
|
+ this.$http.get({
|
|
|
+ url: '/orderImage/page',
|
|
|
+ data: data
|
|
|
+ }).then(res => {
|
|
|
+ if (res.success) {
|
|
|
+ this.orderImage = res.data.pp
|
|
|
+ this.totalNumber = res.data.page.totalNumber;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.isSuccess = false
|
|
|
+ this.isFail = false
|
|
|
+ this.$http.get({
|
|
|
+ url: '/orderImage/all',
|
|
|
+ data: {
|
|
|
+ orderId: this.$route.query.orderId,
|
|
|
+ statusFlag: 0
|
|
|
+ }
|
|
|
+ }).then(res => {
|
|
|
+ if (res.success) {
|
|
|
+ this.needCheckNum = res.data.length
|
|
|
+ if (res.data.length == 0) {
|
|
|
+ this.$http.get({
|
|
|
+ url: '/orderImage/all',
|
|
|
+ data: {
|
|
|
+ orderId: this.$route.query.orderId,
|
|
|
+ statusFlag: 2
|
|
|
+ }
|
|
|
+ }).then(res => {
|
|
|
+ if (res.data.length == 0) {
|
|
|
+ this.isSuccess = true
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ this.isFail = true
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ chooseImg(index) {
|
|
|
+ console.log(index)
|
|
|
+ },
|
|
|
+ handleRemove(file, fileList) {
|
|
|
+ console.log(file, fileList);
|
|
|
+ var list = []
|
|
|
+ fileList.forEach(item => {
|
|
|
+ item.response.data.forEach(todo => {
|
|
|
+ var jsop = {
|
|
|
+ originalImage: todo,
|
|
|
+ remark: ''
|
|
|
+ }
|
|
|
+ list.push(jsop)
|
|
|
+ })
|
|
|
+ })
|
|
|
+ this.addImage = list
|
|
|
+ },
|
|
|
+ handleSuccess(res) {
|
|
|
+ res.data.forEach(item => {
|
|
|
+ if (this.allImage.indexOf(item) == -1 && this.addImage.length <= this.canUploadNum) {
|
|
|
+ var jsop = {
|
|
|
+ originalImage: item,
|
|
|
+ remark: ""
|
|
|
+ }
|
|
|
+ this.addImage.push(jsop)
|
|
|
+ }
|
|
|
+ else if (this.addImage.length > this.canUploadNum) {
|
|
|
+ this.$message({
|
|
|
+ message: '已经上传' + this.addImage.length + '张图片了,请预览后确认图片',
|
|
|
+ type: 'warning'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ delImg(index) {
|
|
|
+ this.addImage.splice(index, 1)
|
|
|
+ },
|
|
|
+ upload() {
|
|
|
+ this.saveImage(0)
|
|
|
+ },
|
|
|
+ saveImage(i) {
|
|
|
+ if (i == this.allImage.length) {
|
|
|
+ this.$message.success('成功');
|
|
|
+ this.dialogVisible = false
|
|
|
+ this.getImage()
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ var data = {
|
|
|
+ originalImage: this.allImage[i],
|
|
|
+ orderId: this.orderInfo.id,
|
|
|
+ userId: this.userInfo.id,
|
|
|
+ storeId: this.orderInfo.storeId
|
|
|
+
|
|
|
+ }
|
|
|
+ this.$http.post({
|
|
|
+ url: '/orderImage/save',
|
|
|
+ data: data
|
|
|
+ }).then(res => {
|
|
|
+ if (res.success) {
|
|
|
+ this.saveImage(i + 1)
|
|
|
+ } else {
|
|
|
+ this.$message.warning('失败')
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ submit() {
|
|
|
+ if (this.$route.query.repairId) {
|
|
|
+ this.$http.post({
|
|
|
+ url: '/orderRepair/update',
|
|
|
+ data: {
|
|
|
+ id: this.$route.query.repairId,
|
|
|
+ statusFlag: 3
|
|
|
+ }
|
|
|
+ }).then(res => {
|
|
|
+ if (res.success) {
|
|
|
+
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.$http.post({
|
|
|
+ url: '/userOrder/update',
|
|
|
+ data: {
|
|
|
+ id: this.orderInfo.id,
|
|
|
+ statusFlag: 3
|
|
|
+ }
|
|
|
+ }).then(res => {
|
|
|
+ if (res.success) {
|
|
|
+ // this.$message.success('提交成功');
|
|
|
+ // history.back()
|
|
|
+
|
|
|
+ this.$http.post({
|
|
|
+ url: '/userOrder/confirm',
|
|
|
+ data: {
|
|
|
+ id: this.orderInfo.id,
|
|
|
+ }
|
|
|
+ }).then(res2 => {
|
|
|
+ if (res2.success) {
|
|
|
+ this.$message.success('提交成功');
|
|
|
+ location.reload()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ getRepair() {
|
|
|
+ this.$http.post({
|
|
|
+ url: '/userOrder/repair',
|
|
|
+ data: {
|
|
|
+ id: this.orderInfo.id,
|
|
|
+ statusFlag: 4
|
|
|
+ }
|
|
|
+ }).then(res => {
|
|
|
+ if (res.success) {
|
|
|
+ this.$message.success('提交成功');
|
|
|
+ location.reload()
|
|
|
+
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ imgItem
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+.container {
|
|
|
+ max-width: 1190px;
|
|
|
+ margin: 15vh auto;
|
|
|
+ background: rgba(255, 255, 255, 1);
|
|
|
+ border-bottom: 1px solid rgba(234, 234, 234, 1);
|
|
|
+ .top {
|
|
|
+ height: 78px;
|
|
|
+ background: rgba(255, 255, 255, 1);
|
|
|
+ border: 1px solid rgba(234, 234, 234, 1);
|
|
|
+ padding: 0 30px;
|
|
|
+ span {
|
|
|
+ font-size: 18px;
|
|
|
+ font-family: MicrosoftYaHei;
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ line-height: 78px;
|
|
|
+ }
|
|
|
+ .btn {
|
|
|
+ float: right;
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ padding: 0 30px;
|
|
|
+ min-height: 450px;
|
|
|
+ .title {
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: MicrosoftYaHei-Bold;
|
|
|
+ font-weight: bold;
|
|
|
+ color: rgba(11, 158, 192, 1);
|
|
|
+ line-height: 19px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: middle;
|
|
|
+ margin-right: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .imgList {
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom {
|
|
|
+ height: 58px;
|
|
|
+ border-top: 1px solid rgba(234, 234, 234, 1);
|
|
|
+ line-height: 58px;
|
|
|
+ padding: 0 30px;
|
|
|
+ margin-top: 20px;
|
|
|
+ span {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .nothing {
|
|
|
+ margin-top: 20px;
|
|
|
+ img {
|
|
|
+ width: 167px;
|
|
|
+ height: 167px;
|
|
|
+ display: block;
|
|
|
+ margin: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ p {
|
|
|
+ font-size: 14px;
|
|
|
+ text-align: center;
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ line-height: 19px;
|
|
|
+ margin-top: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|