clearticket_ota/src/views/goodsCenter/priceList/EditDialog.vue

<template>
  <el-form
    inline
    :model="form"
    ref="form"
    class="form-wrap"
    label-width="140px">
    <div class="dialog-info">
      <div class="block-title">基础信息</div>
      <el-form-item
        verify
        class="is-required"
        prop="ticketTypeId"
        label="票种">
        <el-select
          v-model="form.ticketTypeId"
          :disabled="dialogType === 'edit'"
          filterable>
          <el-option
            v-for="item in ticketTypeList"
            :key="item.id"
            :label="`${item.ticketTypeId}-${item.name}-${CategoryDict[item.category] || ''}`"
            :value="item.ticketTypeId"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        verify
        class="is-required"
        prop="otaSourceIds"
        label="分销商">
        <el-select
          v-model="form.otaSourceIds"
          multiple
          filterable
          :disabled="dialogType === 'edit'">
          <el-option
            v-for="item in otaList"
            :key="item.id"
            :label="item.otaSourceName"
            :value="item.otaSourceId"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        verify
        class="is-required"
        label="市场价"
        prop="marketPrice">
        <el-input-number
          controls-position="right"
          v-model="form.marketPrice"
          :min="0"
          :precision="2"></el-input-number>
        <el-tooltip
          effect="dark"
          content="划线价"
          placement="top"
        >
          <i class="el-icon-info"></i>
        </el-tooltip>
      </el-form-item>
      <el-form-item
        verify
        class="is-required"
        label="结算价"
        prop="settlementPrice">
        <el-input-number
          controls-position="right"
          v-model="form.settlementPrice"
          :min="0"
          :precision="2"></el-input-number>
        <el-tooltip
          effect="dark"
          content="分销商和景区结算的价格"
          placement="top"
        >
          <i class="el-icon-info"></i>
        </el-tooltip>
      </el-form-item>
      <el-form-item
        verify
        class="is-required"
        label="售卖价"
        prop="salePrice">
        <el-input-number
          controls-position="right"
          v-model="form.salePrice"
          :min="0"
          :precision="2"></el-input-number>
        <el-tooltip
          effect="dark"
          content="分销商实际售卖价"
          placement="top"
        >
          <i class="el-icon-info"></i>
        </el-tooltip>
      </el-form-item>
      <el-form-item label="在售状态">
        <el-switch
          v-model="form.isSale"
          :inactive-value="0"
          :active-value="1">
        </el-switch>
        <span>{{ form.isSale ? '在售' : '禁售' }}</span>
      </el-form-item>
      <el-form-item
        label="库存"
        prop="totalStock">
        <el-input-number
          controls-position="right"
          v-model="form.totalStock"
          :min="-1"
          :precision="0"></el-input-number>
        <el-tooltip
          effect="dark"
          :content="stockContent"
          placement="top"
        >
          <i class="el-icon-info"></i>
        </el-tooltip>
      </el-form-item>
      <el-form-item
        verify
        class="is-required"
        label="是否实名制购票"
        prop="realNameType">
        <el-select v-model="form.realNameType">
          <el-option
            :value="0"
            label="不限"></el-option>
          <el-option
            :value="1"
            label="一证一人"></el-option>
          <el-option
            :value="2"
            label="一证多人"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        v-if="hasXc"
        verify
        class="is-required"
        label="携程产品参数"
        prop="xcRealNameType">
        <el-select v-model="form.xcRealNameType">
          <el-option
            :value="1"
            label="一张一人需要证件"></el-option>
          <el-option
            :value="2"
            label="一张一人不需要证件"></el-option>
          <el-option
            :value="3"
            label="一单一人需要证件"></el-option>
          <el-option
            :value="4"
            label="一单一人不需要证件"></el-option>
        </el-select>
      </el-form-item>

      <div class="block-title">销售时间及使用时间</div>
      <div
        class="clearfix"
        style="width:100%"></div>
      <el-form-item
        verify
        class="is-required"
        prop="saleDateStart"
        label="售卖时间">
        <el-date-picker
          v-model="form.saleDateStart"
          type="date"
          :picker-options="dateOption"
          placeholder="选择日期时间"
          default-time="00:00:00">
        </el-date-picker>
      </el-form-item>
      <el-form-item
        verify
        prop="saleDateEnd"
        label-width="80"
        label="至">
        <el-date-picker
          v-model="form.saleDateEnd"
          type="date"
          :picker-options="dateOption"
          placeholder="选择日期时间"
          default-time="23:59:59">
        </el-date-picker>
      </el-form-item>
      <el-form-item
        verify
        class="is-required"
        label="使用日期"
        prop="useDateStart">
        <el-date-picker
          v-model="form.useDateStart"
          type="date"
          placeholder="开始时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item
        verify
        label="至"
        label-width="80"
        prop="useDateEnd">
        <el-date-picker
          v-model="form.useDateEnd"
          type="date"
          placeholder="结束时间">
        </el-date-picker>
      </el-form-item>

    </div>
    <div class="dialog-btn-wrap">
      <el-button @click="reset">重置</el-button>
      <el-button
        @click="submit"
        type="primary">保存</el-button>
    </div>
  </el-form>
</template>

<script>
import { addOTATicketSale, updateOTATicketSale } from '@/api/otaTicketSale'
import moment from 'moment'
import { CategoryDict } from '@/const'

export default {
  props: {
    dialogType: {
      type: String,
      default: ''
    },
    currentItem: {
      type: Object,
      default: () => {}
    },
    otaList: {
      type: Array,
      default: () => []
    },
    ticketTypeList: {
      type: Array,
      default: () => []
    },
    batchConfigList: {
      type: Array,
      default: () => []
    },
    performList: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    mtID () {
      const mtID = this.otaList.find(item => item.otaSourceName === '美团网酒旅')
      return mtID ? mtID.id : 9999
    },
    xcID () {
      const xcID = this.otaList.find(item => item.otaSourceName === '携程网')
      return xcID ? xcID.id : 9999
    },
    hasXc () {
      return this.form.otaSourceIds.some(id => !!this.otaList.find(item => item.otaSourceId === id && item.otaSourceCode === 'XC'))
    }
  },
  data () {
    return {
      CategoryDict,
      visible: false,
      selectedBatch: {}, // 节目场次
      performBatchList: [], // 节目场次列表
      seatAreaList: [],
      seatAreas: [],
      batches: [],
      projectName: localStorage.getItem('otaProject'),
      dateOption: {
        disabledDate (theTime) {
          let startTime = moment().format('YYYY-MM-DD') + ' 00:00:00'
          return moment(theTime).isBefore(startTime)
        }
      },
      form: {
        id: '',
        otaSourceIds: [],
        ticketTypeId: '',
        isSale: 1,
        salePrice: 0,
        marketPrice: 0,
        settlementPrice: 0,
        realNameType: 0,
        saleDateStart: moment().format('YYYY-MM-DD'),
        saleDateEnd: moment().add(20, 'years').endOf('year').format('YYYY-MM-DD'),
        useDateStart: moment().format('YYYY-MM-DD'),
        useDateEnd: moment().add(30, 'years').endOf('year').format('YYYY-MM-DD'),
        totalStock: -1, // -1代表不限库存
        xcRealNameType: ''
      },
      showDeletedOption: false,
      deletedOption: {
        name: '',
        id: 0
      },
      stockContent: `1.-1代表无限库存
        2.已消耗库存数为用户历次下单门票张数之和，不包含退票
        3.修改库存数后，用户历史下单门票张数仍计算在内`
    }
  },
  watch: {
    visible (val) {
      this.reset()
      if (val) {
        this.showDeletedOption = false
        if (this.dialogType === 'edit' && this.currentItem) {
          this.form = Object.assign({}, this.form, this.currentItem)
          console.log('this.form', this.form)
          this.form.otaSourceIds = this.form.otaSourceId ? [this.form.otaSourceId] : []
          // 有绑定场次的情况
          const batch = this.batchConfigList.find(v => v.id === this.form.batchConfigId)
          if (!batch && this.form.batchConfigId !== 0 && this.dialogType === 'edit') { // 有绑定场次 且该场次在不在现有可选范围中  ==》原来绑定的场次被删了 要保证正常显示 手动加这一项
            this.showDeletedOption = true
            this.deletedOption.name = this.form.batchConfigName
            this.deletedOption.id = this.form.batchConfigId
          } else {
            this.showDeletedOption = false
          }
        } else {
          this.form.batchConfigId = 0
          this.form.batchConfigIds = []
        }
      }
    }
  },
  methods: {
    handleClose () {
      this.$parent.handleClose()
    },
    reset () {
      this.$refs.form.resetFields()
    },
    submit () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          switch (this.dialogType) {
            case 'add':
              this.addTicket()
              break
            case 'edit':
              this.updateTicket()
              break
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    addTicket () {
      const params = Object.assign({}, this.form)
      delete params.id

      addOTATicketSale(params).then(res => {
        this.$message.success('添加成功')
        this.reset()
        this.handleClose()
        this.$emit('updateList')
      })
    },
    updateTicket () {
      const params = Object.assign({}, this.form)

      updateOTATicketSale(params).then(res => {
        this.$message.success('保存成功')
        this.reset()
        this.handleClose()
        this.$emit('updateList')
      })
    }
  }
}
</script>
<style lang="scss">
.manual-label {
  margin: 0;
  padding-right: 12px;
  box-sizing: border-box;
  text-align: right;
  display: inline-block;
  width: 140px;
}
.xs-input {
  width: 90px !important;
  .el-input, .el-input--small {
    width: 90px;
  }
}
</style>