boss/pages/main/index/artificial_order.vue

<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-card class="box-card">
        <div slot="header" class="header clearfix">
          <span>基本信息</span>
        </div>

        <el-form-item label="订单编号">
          <div class="order-number">
            <span>{{form.orderNo ? form.orderNo : '未生成'}}</span>
            <!-- <span>{{form.orderNo ? `订单编号:${form.orderNo}` : '未生成订单'}}</span>
            <span class="order-status" v-if="form.status === '0'">订单创建</span>
            <span class="order-status" v-else-if="form.status === '100'">待审核</span>
            <span class="order-status" v-else-if="form.status === '101'">审核中</span>
            <span class="order-status" v-else-if="form.status === '102'">订单审核成功</span>
            <span class="order-status" v-else-if="form.status === '200'">订单开始处理</span>
            <span class="order-status" v-else-if="form.status === '201'">订单处理中</span>
            <span class="order-status" v-else-if="form.status === '202'">订单已处理</span>
            <span class="order-status" v-else-if="form.status === '300'">订单成功</span>
            <span class="order-status" v-else-if="form.status === '301'">订单部分退款</span>
            <span class="order-status" v-else-if="form.status === '302'">订单已失败</span>
            <span class="order-status" v-else-if="form.status === '303'">订单全额退款</span>
            <span class="order-status" v-else-if="form.status === '400'">订单支付中</span>
            <span class="order-status" v-else-if="form.status === '401'">订单支付成功</span>
            <span class="order-status" v-else-if="form.status === '402'">订单支付失败</span>
            <span class="order-status" v-else>未生成</span> -->
          </div>
        </el-form-item>

        <el-form-item label="订单用户" prop="uid">
          <el-input v-model="form.uid" placeholder="请输入用户uid"></el-input>
        </el-form-item>

        <el-form-item label="订单名称" prop="productTitle">
          <el-input v-model="form.productTitle" placeholder="请输入订单名称，尽量遵循命名规则"></el-input>
        </el-form-item>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="订单类型" prop="productType">
              <el-select v-model="form.productTypeName" placeholder="请选择订单类型" @change="productTypeChange">
                <el-option
                  v-for="item in productTypes"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="交易类型" prop="orderType">
              <el-select v-model="form.orderTypeName" placeholder="请选择交易类型" @change="orderTypeChange">
                <el-option
                  v-for="item in orderTypes"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="订单金额" prop="price">
              <el-input v-model.number="form.price" placeholder="请输入实际金额"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="变更余额">
              <el-radio v-model="radio" label="1" disabled>收入</el-radio>
              <el-radio v-model="radio" label="2" disabled>支出</el-radio>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="收支类型" prop="channel">
              <el-select v-model="form.channelName" placeholder="请选择支付方式" @change="channelChange">
                <el-option
                  v-for="item in channels"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="支付编码">
              <el-input v-model="form.outOrderId" placeholder="请输入支付编号，选填"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <el-card class="box-card">
        <div slot="header" class="header clearfix">
          <span>其他信息(选填)</span>
        </div>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="项目ID" prop="productId">
              <el-input v-model.number="form.productId" placeholder="请输入项目ID"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="关联订单" prop="originOrderNo">
              <el-input v-model="form.originOrderNo" placeholder="请输入平台订单编号"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="外部备注" prop="publicComment">
          <el-input v-model="form.publicComment" placeholder="请输入用户可见的备注信息"></el-input>
        </el-form-item>

        <el-form-item label="内部备注" prop="privateComment">
          <quill-editor
            ref="quillEditor"
            class="editer"
            :options="editorOption"
            v-model="form.privateComment"
          ></quill-editor>
        </el-form-item>
      </el-card>
    
      <el-form-item>
        <el-button class="save-btn" type="primary" @click="saveSubmit()">保存</el-button>
        <el-button class="cancel-btn" @click="cancelSubmit()">取消</el-button>
      </el-form-item>

      <el-form-item>
        <el-button v-if="hasSave" class="comfirm-btn" type="primary" @click="confirmSubmit()">确认提交订单</el-button>
        <el-button v-else class="comfirm-btn" type="info">确认提交订单</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    let checkPrice = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请输入订单金额"))
      } else if (isNaN(value) || value > 100000) {
        return callback(new Error("请输入实际金额0-10万元"))
      } else { 
        callback()
      }
    }
    let checkProductId = (rule, value, callback) => {
      if (isNaN(value)) {
        return callback(new Error("请输入数字"))
      } else { 
        callback()
      }
    }
    let checkOriginOrderNo = (rule, value, callback) => {
      const reg = /^[0-9a-zA-Z]+$/
      if (!reg.test(value)) {
        return callback(new Error("请输入数字和字母"))
      } else { 
        callback()
      }
    }
    return {
      action: "",
      id: "",
      form: {
        uid: "",
        productTitle: "",
        productType: "",
        orderType: "",
        price: "",
        channel: "",
        outOrderId: "",
        productId: "",
        originOrderNo: "",
        publicComment: "",
        privateComment: "",
        orderNo: "",
        status: "",
        productTypeName: "",
        orderTypeName: "",
        channelName: ""
      },
      saveData: {},
      rules: {
        uid: [{ required: true, message: "请输入用户uid", trigger: "blur" }],
        productTitle: [
          { required: true, message: "请输入订单名称", trigger: "blur" },
          { max: 25, message: "订单名称最多输入25个字", trigger: "blur" },
        ],
        productType: [{ required: true, message: "请选择订单类型", trigger: "change" }],
        orderType: [{ required: true, message: "请选择交易类型", trigger: "change" }],
        price: [{ validator: checkPrice, trigger: "blur" }],
        originOrderNo: [{ validator: checkOriginOrderNo, trigger: "blur" }],
        productId: [{ validator: checkProductId, trigger: "blur" }],
        publicComment: [{ max: 50, message: "外部备注最多输入50个字", trigger: "blur" }],
        privateComment: [
          { required: true, message: "请输入内部备注", trigger: "blur" },
          { max: 10000, message: "内部备注最多输入10000个字符", trigger: "blur" },
        ]
      },
      orderTypes: [],
      productTypes: [],
      channels: [],
      orderState: [],
      hasSave: false,
      radio: "1",
      editorOption: {
        modules: {
          toolbar: [
            ["bold", "italic", "underline", "strike"], // toggled buttons
            ["blockquote", "code-block"],
            [{ header: 1 }, { header: 2 }], // custom button values
            [{ list: "ordered" }, { list: "bullet" }],
            [{ script: "sub" }, { script: "super" }], // superscript/subscript
            [{ indent: "-1" }, { indent: "+1" }], // outdent/indent
            [{ direction: "rtl" }], // text direction
            [{ size: ["small", false, "large", "huge"] }], // custom dropdown
            [{ header: [1, 2, 3, 4, 5, 6, false] }],
            [{ font: [] }],
            ["clean"], // remove formatting button
            ["link", "image"]
          ],
          imageResize: {}
        }
      }
    };
  },
  // computed: {
  //   radio() {
  //     if (this.form.orderType === 2 || this.form.orderType === 5 || this.form.orderType === 8) {
  //       this.radio = "1"
  //     } else if (this.form.orderType === 9) {
  //       this.radio = "2"
  //     } else {
  //       this.radio = "3"
  //     }
  //   }
  // },
  watch: {
    'form.orderType': {
      handler() {
        if (this.form.orderType === 2 || this.form.orderType === 5 || this.form.orderType === 8) {
          this.radio = "1"
        } else if (this.form.orderType === 9) {
          this.radio = "2"
        } else {
          this.radio = "3"
        }
      }
    }
  },
  mounted() {
    console.log(this.$route.query);
    const type = this.$route.query.type;
    if (type === "create") {
      this.action = "create"
      this.getAllChoice()
    } else if (type === "edit") {
      this.action = "create"
      this.id = this.$route.query.id
      this.hasSave = true
      this.getAllChoice()
      this.getOrder()
    }
  },
  methods: {
    async getAllChoice() {
      let res = await this.$post("/api/admin/order/get_all_choice", {
        action: this.action
      });
      if (res) {
        console.log(res)
        const allChoice = res.data
        this.orderTypes = allChoice.order_types
        this.productTypes = allChoice.product_types
        this.channels = allChoice.channels
        this.orderState = allChoice.order_state
      }
    },
    async getOrder() {
      let res = await this.$post("/api/admin/order/get", {
        order_id: this.id
      });
      if (res) {
        if (res.status === 1 && res.data) {
          const data = res.data
          this.form.uid = data.uid || ""
          this.form.productTitle = data.product_title || ""
          this.form.productType = data.product_type || ""
          this.form.orderType = data.order_type || ""
          this.form.price = data.price.replace("-","") || ""
          this.form.channel = data.channel || ""
          this.form.outOrderId = data.out_order_id || ""
          this.form.productId = data.product_id || ""
          this.form.originOrderNo = data.origin_order_no || ""
          this.form.publicComment = data.public_comment || ""
          this.form.privateComment = data.private_comment || ""
          this.form.orderNo = data.order_no || ""
          this.form.status = data.status || ""
          this.form.productTypeName = data.product_type_name || ""
          this.form.orderTypeName = data.order_type_name || ""
          this.form.channelName = data.channel_name || ""
          console.log(this.form)
        }
      }
    },
    async saveOrder() {
      const data = {
        id: this.id,
        uid: this.form.uid,
        product_title: this.form.productTitle,
        product_type: this.form.productType,
        order_type: this.form.orderType,
        price: this.form.price,
        channel: this.form.channel,
        out_order_id: this.form.outOrderId,
        origin_order_no: this.form.originOrderNo,
        public_comment: this.form.publicComment,
        private_comment: this.form.privateComment
      }
      this.saveData = data
      let res = await this.$post("/api/admin/order/create", data)
      if (res) {
        if (res.status === 1) {
          this.id = res.data.id
          this.saveData.id = res.data.id
          this.form.orderNo = res.data.order_no
          this.hasSave = true
          this.$message({
            message: "保存成功",
            type: "success"
          })
        } else if (res.status === -2) {
          this.$message({
            message: `当前订单用户的账户余额不足(可用余额${res.data.can_use}元)，操作失败!`,
            type: "error"
          })
        } else if (res.info) {
          console.log(res.info)
        }
      }
    },
    async confirmOrder() {
      const data = {
        id: this.id,
        uid: this.form.uid,
        product_title: this.form.productTitle,
        product_type: this.form.productType,
        order_type: this.form.orderType,
        price: this.form.price,
        channel: this.form.channel,
        out_order_id: this.form.outOrderId,
        origin_order_no: this.form.originOrderNo,
        public_comment: this.form.publicComment,
        private_comment: this.form.privateComment
      }
      const confirmData = data
      const saveData = this.saveData
      const isConfirm = true
      for (const key in confirmData) {
        if (confirmData[key] !== saveData[key]) {
          console.log(confirmData[key],saveData[key])
          this.$message({
            message: '与保存订单不一致，请先保存订单！',
            type: 'warning'
          })
          return
        }
      }
      let res = await this.$post("/api/admin/order/confirm_order", data)
      if (res) {
        if (res.status === 1) {
          this.$message({
            message: "提交成功",
            type: "success"
          })
          setTimeout(() => {
            this.$router.push('/main/artificial_orders')
          }, 1000)
        } else if (res.info) {
          console.log(res.info)
        }
      }
    },
    saveSubmit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.saveOrder()
        } else {
          console.log("error submit!!")
          return false
        }
      })
    },
    confirmSubmit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.$confirm(`确认提价订单后，${this.form.uid}的账户将${this.form.orderTypeName}${this.form.price}元 ，交易方式为${this.form.channelName}，请您再次确认操作！`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.confirmOrder()
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消提交'
            })       
          })
        } else {
          console.log("error submit!!")
          return false
        }
      })
    },
    cancelSubmit() {
      this.$router.push('/main/artificial_orders')
    },
    productTypeChange() {
      const productTypeObject = this.productTypes.find((element) => {
        return element.name === this.form.productTypeName
      })
      this.form.productType = productTypeObject.id
    },
    orderTypeChange() {
      const orderTypeObject = this.orderTypes.find((element) => {
        return element.name === this.form.orderTypeName
      })
      this.form.orderType = orderTypeObject.id
    },
    channelChange() {
      const channelObject = this.channels.find((element) => {
        return element.name === this.form.channelName
      })
      this.form.channel = channelObject.id
    }
  }
};
</script>

<style lang="scss" scoped>
.box-card {
  margin-bottom: 10px;
  width: 100%;
}

.header {
  font-size: 24px;
  color: #222222;
  font-weight: 600;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.order-number {
  display: flex;
  align-items: center;
}

.order-number span:first-child {
  flex: 1;
  font-size: 14px;
  color: #999999;
}

.order-number span:nth-child(2) {
  font-size: 14px;
  color: #999999;
}

.order-status {
  display: block;
  margin-left: 7px;
  padding: 0 2px;
  height: 22px;
  line-height: 22px;
  border: 1px solid #3c95ff;
  font-size: 12px;
  color: #308eff;
}

.el-select {
  width: 100%;
}

.editer {
  width: 100%;
  height: 600px;
  padding: 0 0 50px;
}

.save-btn {
  width: 100px;
  height: 40px;
}

.cancel-btn {
  margin-left: 10px;
  width: 100px;
  height: 40px;
}

.comfirm-btn {
  width: 210px;
  height: 40px;
}
</style>