feat: 优化取消寄售功能

src/views/consign/components/CancelConsignDialog.vue

+<template>
+
+  <el-dialog
+    v-if="cancelConsignDialogShow"
+    :visible.sync="cancelConsignDialogShow"
+    :before-close="handleCancelConsignDialog"
+    width="600px"
+    height="800px"
+    title="取消寄售">
+    <el-form ref="cancel" :model="cancelForm" :rules="cancelRules">
+      <el-form-item label="拒绝类型" label-width="80px" prop="content">
+        <el-select v-model="cancelForm.content" placeholder="请选择拒绝类型">
+          <el-option label="平台取消寄售" value="平台取消寄售"/>
+          <el-option label="用户取消寄售" value="用户取消寄售"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="理由" label-width="80px" prop="remark">
+        <el-input
+          v-model="cancelForm.remark"
+          :autosize="{ minRows: 8, maxRows: 8}"
+          style="width: 400px"
+          maxlength="100"
+          type="textarea"
+          show-word-limit
+          placeholder="请输入理由（最多不超过100个字）" />
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="handleCancelConsignDialog">取 消</el-button>
+      <el-button type="primary" @click="handleCancelValue">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { MessageBox } from 'element-ui'
+import { cancelValue } from '@/api/business/consign'
+export default {
+  name: 'CancelConsignDialog',
+  props: {
+    cancelConsignDialogShow: {
+      type: Boolean,
+      default: false
+    },
+    saleId: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      cancelForm: {
+        content: '',
+        remark: ''
+      },
+      cancelRules: {
+        content: [
+          { required: true, message: '请选择取消类型', trigger: 'blur' }
+        ],
+        remark: [
+          { required: true, message: '原因不能为空', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    handleCancelConsignDialog() {
+      this.$emit('cancelDialog')
+    },
+    /**
+     * 取消
+     */
+    handleCancelValue() {
+      if (this.saleId) {
+        const params = { ...this.cancelForm, saleId: this.saleId }
+        this.$refs.cancel.validate((valid) => {
+          if (valid) {
+            cancelValue(params)
+              .then(response => {
+                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

@@ -120,35 +120,13 @@
       @cancelDialog="finishSettlementDialogShow = false"
       @refreshList="handleGetDetail"
     />
-    <el-dialog
+    <CancelConsignDialog
       v-if="cancelConsignDialogShow"
-      :visible.sync="cancelConsignDialogShow"
-      width="600px"
-      height="800px"
-      title="取消寄售">
-      <el-form ref="cancel" :model="cancelForm" :rules="cancelRules">
-        <el-form-item label="拒绝类型" label-width="80px" prop="content">
-          <el-select v-model="cancelForm.content" placeholder="请选择拒绝类型">
-            <el-option label="平台取消寄售" value="平台取消寄售" />
-            <el-option label="用户取消寄售" value="用户取消寄售" />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="理由" label-width="80px" prop="remark">
-          <el-input
-            v-model="cancelForm.remark"
-            :autosize="{ minRows: 8, maxRows: 8}"
-            style="width: 400px"
-            maxlength="100"
-            type="textarea"
-            show-word-limit
-            placeholder="请输入理由（最多不超过100个字）" />
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="cancelConsignDialogShow = false">取 消</el-button>
-        <el-button type="primary" @click="handleCancelValue">确 定</el-button>
-      </div>
-    </el-dialog>
+      :cancel-consign-dialog-show="cancelConsignDialogShow"
+      :sale-id="saleId"
+      @cancelDialog="cancelConsignDialogShow = false"
+      @refreshList="handleGetDetail"
+    />
     <CheckLargeImageDialog
       :show-large-dialog="showLargeDialog"
       :image-url="imageUrl"
@@ -170,10 +148,11 @@ import IdentifyValueDialog from './components/IdentifyValueDialog'
 import ImageValueDialog from './components/ImageValueDialog'
 import SaleConsignDialog from './components/SaleConsignDialog'
 import FinishSettlementDialog from './components/FinishSettlementDialog'
+import CancelConsignDialog from './components/CancelConsignDialog'
 
 export default {
   name: 'ConsignDetail',
-  components: { FinishSettlementDialog, SaleConsignDialog, ImageValueDialog, IdentifyValueDialog, CheckVideoDialog, CheckLargeImageDialog },
+  components: { CancelConsignDialog, FinishSettlementDialog, SaleConsignDialog, ImageValueDialog, IdentifyValueDialog, CheckVideoDialog, CheckLargeImageDialog },
   data() {
     return {
       saleId: '',
@@ -197,19 +176,8 @@ export default {
       // 寄售凭证
       finishSettlementDialogShow: false,
       // 取消
-      cancelForm: {
-        content: '',
-        remark: ''
-      },
       cancelConsignDialogShow: false,
-      cancelRules: {
-        content: [
-          { required: true, message: '请选择取消类型', trigger: 'blur' }
-        ],
-        remark: [
-          { required: true, message: '原因不能为空', trigger: 'blur' }
-        ]
-      },
+
       imageUrl: '',
       showLargeDialog: false,
       showVideoDialog: false,

src/views/consign/consignList.vue

@@ -148,51 +148,31 @@
       @cancelDialog="finishSettlementDialogShow = false"
       @refreshList="getList"
     />
-    <el-dialog
+    <!--取消寄售-->
+    <CancelConsignDialog
       v-if="cancelConsignDialogShow"
-      :visible.sync="cancelConsignDialogShow"
-      width="600px"
-      height="800px"
-      title="取消寄售">
-      <el-form ref="cancel" :model="cancelForm" :rules="cancelRules">
-        <el-form-item label="拒绝类型" label-width="80px" prop="content">
-          <el-select v-model="cancelForm.content" placeholder="请选择拒绝类型">
-            <el-option label="平台取消寄售" value="平台取消寄售"/>
-            <el-option label="用户取消寄售" value="用户取消寄售"/>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="理由" label-width="80px" prop="remark">
-          <el-input
-            v-model="cancelForm.remark"
-            :autosize="{ minRows: 8, maxRows: 8}"
-            style="width: 400px"
-            maxlength="100"
-            type="textarea"
-            show-word-limit
-            placeholder="请输入理由（最多不超过100个字）" />
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="handleCancelFinishDialog">取 消</el-button>
-        <el-button type="primary" @click="handleCancelValue">确 定</el-button>
-      </div>
-    </el-dialog>
+      :sale-id="currentSaleId"
+      :cancel-consign-dialog-show="cancelConsignDialogShow"
+      @cancelDialog="cancelConsignDialogShow = false"
+      @refreshList="getList"/>
   </div>
 </template>
 
 <script>
 import Line2Hidden from '@/components/line2Hidden'
 import Pagination from '@/components/Pagination'
-import { findConsignList, confirmReceive, cancelValue } from '@/api/business/consign'
+import { findConsignList, confirmReceive } from '@/api/business/consign'
 import { MessageBox } from 'element-ui'
 import IdentifyValueDialog from './components/IdentifyValueDialog'
 import ImageValueDialog from './components/ImageValueDialog'
 import SaleConsignDialog from './components/SaleConsignDialog'
 import FinishSettlementDialog from './components/FinishSettlementDialog'
+import CancelConsignDialog from './components/CancelConsignDialog'
 
 export default {
   name: 'ConsignList',
   components: {
+    CancelConsignDialog,
     FinishSettlementDialog,
     SaleConsignDialog,
     ImageValueDialog,
@@ -247,24 +227,10 @@ export default {
       finishDialogShow: false,
       // 寄售凭证
       finishSettlementDialogShow: false,
-      currentSaleId: '',
-
+      itemContent: {},
       // 取消
-      cancelForm: {
-        content: '',
-        remark: ''
-      },
       cancelConsignDialogShow: false,
-      cancelRules: {
-        content: [
-          { required: true, message: '请选择取消类型', trigger: 'blur' }
-        ],
-        remark: [
-          { required: true, message: '原因不能为空', trigger: 'blur' }
-        ]
-      },
-
-      itemContent: {}
+      currentSaleId: ''
     }
   },
   created() {
@@ -371,34 +337,7 @@ export default {
     handleCancelDialogShow(item) {
       this.cancelConsignDialogShow = true
       this.itemContent = item
-    },
-    /**
-     * 取消寄售
-     */
-    handleCancelValue() {
-      if (this.itemContent) {
-        const params = { ...this.cancelForm, saleId: this.itemContent.saleId }
-        this.$refs.cancel.validate((valid) => {
-          if (valid) {
-            cancelValue(params)
-              .then(response => {
-                this.itemContent = {}
-                this.cancelConsignDialogShow = false
-                this.cancelForm = {}
-                this.$notify.success({
-                  message: '取消寄售成功'
-                })
-                this.getList()
-              })
-              .catch(response => {
-                MessageBox.alert('业务错误：' + response.data.errmsg, '警告', {
-                  confirmButtonText: '确定',
-                  type: 'error'
-                })
-              })
-          }
-        })
-      }
+      this.currentSaleId = item.saleId
     },
     /** 倒计时*/
     countDown(row) {