增加作废订单按钮

src/views/system/order/index.vue

@@ -294,6 +294,7 @@
           <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
         </template>
       </el-table-column>
+      <el-table-column label="备注" align="center" prop="remark"/>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
 <!--          <el-button-->
@@ -433,9 +434,28 @@
     </el-dialog>
 
     <!-- 订单作废对话框 -->
-    <el-dialog :title="title" :visible.sync="repealOpen" width="500px" append-to-body>
-      <el-form ref="repealForm" :model="repealForm" label-width="150px">
-
+    <el-dialog :title="title" :visible.sync="repealOpen" width="700px" append-to-body>
+      <el-form ref="repealForm" :model="repealForm" :rules="repealRules" label-width="150px">
+        <el-alert
+          title="1: 当前操作是作废订单，确认后，该订单不会继续进行"
+          type="error"
+          :closable="false"
+          show-icon>
+        </el-alert>
+        <el-alert
+          title="2：当选择是否作废优惠卷为是时，该订单使用的优惠卷会失效，
+          选择为否时，该优惠卷会更改为未使用，有重复使用优惠卷的可能"
+          type="error"
+          :closable="false"
+          show-icon>
+        </el-alert>
+        <el-alert
+          title="3：操作前请知晓上述风险"
+          type="error"
+          :closable="false"
+          show-icon>
+        </el-alert>
+        <el-checkbox :value="!modify" @change="ismodify">我已知晓</el-checkbox>
         <el-form-item label="优惠券是否失效" prop="isReverseconsume">
           <el-radio-group v-model="repealForm.isReverseconsume">
             <el-radio
@@ -445,15 +465,12 @@
             >{{dict.label}}</el-radio>
           </el-radio-group>
         </el-form-item>
-
-        <el-form-item label="备注" prop="remark">
-          <el-input v-model="repealForm.remark" placeholder="请输入备注" />
+        <el-form-item label="备注" prop="remark" required>
+          <el-input v-model="repealForm.remark" placeholder="请输入备注"/>
         </el-form-item>
-
-
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitFormRepeal">确 定</el-button>
+        <el-button type="primary" @click="submitFormRepeal" :disabled=modify>确 定</el-button>
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
@@ -493,6 +510,7 @@ export default {
           value:0
         }
       ],
+      modify: true,
       options: [],
       roomList: [],
       packList: [],
@@ -547,32 +565,16 @@ export default {
       // 表单参数
       form: {},
       // 表单校验
-      rules: {
-        orderType: [
-          { required: true, message: "订单类型(0:订房订单，1：续房订单，2：充值订单)不能为空", trigger: "change" }
-        ],
-        serialNumber: [
-          { required: true, message: "订单流水号不能为空", trigger: "blur" }
-        ],
-        consumerId: [
-          { required: true, message: "用户ID不能为空", trigger: "blur" }
-        ],
-        originalPrice: [
-          { required: true, message: "订单总价不能为空", trigger: "blur" }
-        ],
-        payWays: [
-          { required: true, message: "1.余额支付，2：微信支付不能为空", trigger: "blur" }
-        ],
-        realPrice: [
-          { required: true, message: "订单实付不能为空", trigger: "blur" }
-        ],
-        isUseCoupon: [
-          { required: true, message: "是否使用优惠券(0:否，1：是)不能为空", trigger: "change" }
-        ],
+      rules: {},
+      repealRules: {
+        remark: [
+          {required: true, message: "备注不能为空", trigger: "blur"}
+        ]
       }
     };
   },
   created() {
+    this.modify = true;
     this.onGetRoomList();
     this.getList();
     this.onGetAllStoreList();
@@ -656,6 +658,8 @@ export default {
     },
     // 表单重置
     reset() {
+      this.repealForm.remark = '';
+      this.modify = true;
       this.form = {
         id: null,
         orderType: null,
@@ -688,6 +692,9 @@ export default {
       this.queryParams.pageNum = 1;
       this.getList();
     },
+    ismodify(e) {
+      this.modify = !e;
+    },
     /** 重置按钮操作 */
     resetQuery() {
       this.resetForm("queryForm");