qmx_page_admin/src/views/create-order/components/edit.vue

<template>
  <div class="edit-order-content-container">
    <createOrder ref="createOrder" :readonly="readonlyC" />
  </div>
</template>

<script>
import createOrder from './create.vue'
import { mapState, mapActions } from 'vuex'
import { pageFormState } from '@/views/create-order/mixins'
import { ajaxGetOrderDetail } from '@/api/modules'
import { showMessage, showNotify } from '@/views/create-order/hooks/toast'

const successMsgMap = {
  1: '订单暂存成功',
  2: '订单修改成功',
}

export default {
  name: 'EditOrderContent',
  mixins: [pageFormState],
  components: {
    createOrder,
  },
  props: {
    type: {
      type: String,
      default: 'edit',
      validator(v) {
        return ['edit', 'read'].includes(v)
      }
    },
    orderCode: {
      type: String,
      default: '',
    },
    readonly: {
      type: Boolean,
      default: false,
    },
    autoGetDetail: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    ...mapState({
      pageForm: state => state.order.pageForm,
    }),
    readonlyC() {
      return this.type === 'read' || this.readonly
    }
  },
  watch: {
    orderCode: {
      immediate: true,
      handler(n) {
        this.getOrderDetail(n)
      }
    }
  },
  methods: {
    ...mapActions('order', ['createOrder', 'resetPageInfo', 'restorePageInfo']),
    async getOrderDetail(orderCode) {
      if (!orderCode) return
      this.resetPageInfo()
      const { error_code: code, data, error_msg: msg } = await ajaxGetOrderDetail({ orderCode })
      if (code === 0) {
        if (data) {
          this.restorePageInfo(data)
          this.emitDetail(data)
        } else {
          showNotify({ message: '未查询到订单数据' })
        }
      } else {
        if (msg) {
          showNotify({ message: msg || '获取订单详情失败' })
        }
      }
    },
    emitDetail(order) {
      this.$emit('detail', order)
    },
    getFormRefs() {
      return this.$refs.createOrder.getFormRefs()
    },
    async doSave(save) {
      if (!this.orderCode) {
        return console.error('未传入orderCode')
      }
      const id = await this.createOrder({ save, orderCode: this.orderCode })
      if (id) {
        const msg = successMsgMap[save]
        this.$toast(msg)
      }
    },
    async submit() {
      // 提交
      await this.doSave(2)
      this.resetPageInfo()
    },
    async stash() {
      // 暂存
      await this.doSave(1)
      this.resetPageInfo()
    },
  }
}
</script>

<style lang="scss" scoped>
::v-deep {
  .el-form-item {
    margin-bottom: 12px;
  }
  .el-form-item__label {
    color: #686868;
  }
  .el-form-item__error {
    padding-top: 0;
  }

  .el-select-w100.el-select {
    width: 100%;
  }

  .el-input__inner,
  .el-textarea__inner {
    color: $gray_10;
    // &:focus {
    //   outline: 0;
    //   box-shadow: 0 0 0 2px rgba($main,.2);
    // }
  }

  .form-item-container {
    font-size: 14px;
    line-height: 22px;
    .form-item-label {
      color: #686868;
    }
    .form-item-value {
      color: $gray_10;
    }
  }
}

.create-order-content-container {
  position: relative;
  
  &.readonly {
    // &::after,
    .readonly-overlay {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      z-index: 99999;
      /* 遮罩层显示时捕获所有指针事件 */
      pointer-events: auto;
    }
  }
}
.create-order-module {
  font-size: 14px;
}
</style>