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

<template>
  <el-dialog
    width="1200px"
    title="创建商品"
    :before-close="handleClose"
    :visible.sync="visible"
  >
    <el-form
      inline
      :model="form"
      ref="form"
      label-width="180px">
      <div class="dialog-info">
        <el-form-item
          verify
          prop="poiId"
          label="商家ID"
        >
          <el-input
            v-model="form.poiId"
          ></el-input>
        </el-form-item>
        <div style="width:100%">
          <el-button
            :disabled="!form.poiId"
            @click="handleAdd"
            style="margin:5px 0">添加日历计划</el-button>
          <el-table :data="form.ticket_specification.calendars">
            <el-table-column
              prop="origin_amount"
              label="原价(单位:分)">
              <template slot-scope="scope">
                <el-input-number
                  v-model="scope.row.origin_amount"
                  :min="0"
                  :precision="0" />
              </template>
            </el-table-column>
            <el-table-column
              prop="actual_amount"
              label="实际售价(单位:分)">
              <template slot-scope="scope">
                <el-input-number
                  v-model="scope.row.actual_amount"
                  :min="0"
                  :precision="0" />
              </template>
            </el-table-column>
            <el-table-column
              prop="stock_qty"
              label="库存">
              <template slot-scope="scope">
                <el-input-number
                  v-model="scope.row.stock_qty"
                  :min="0"
                  :precision="0" />
              </template>
            </el-table-column>
            <el-table-column
              prop="value_list"
              label="日期范围"
              width="300"
            >
              <template slot-scope="scope">
                <el-date-picker
                  style="width:270px"
                  v-model="scope.row.value_list"
                  value-format="yyyyMMdd"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
              </template>
            </el-table-column>
            <el-table-column
              prop="action"
              label="操作"
              width="100">
              <template slot-scope="scope">
                <el-button @click="handleDelete(scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>

      <div class="dialog-btn-wrap">
        <el-button
          @click="submit"
          type="primary">同步</el-button>
      </div>
    </el-form>
  </el-dialog>
</template>

<script>
import { ksUpdatePriceOrStock } from '@/api/otaTicketSale'
import moment from 'moment'
export default {
  data () {
    return {
      visible: false,
      uploadUrl: '',
      form: {
        product_id: '',
        poiId: '',
        ticket_specification: {
          calendars: [],
          sku_id: ''
        }
      },
      calendars_value_list: []
    }
  },
  methods: {
    show (data) {
      this.visible = true
      this.form.product_id = data.ksProductId || 0
      this.form.ticket_specification.sku_id = data.ks_sku_id || 0
      let startDate = moment().format('YYYY-MM-DD HH:mm:ss')
      let endDate = moment().add(179, 'days').format('YYYY-MM-DD HH:mm:ss')
      startDate = startDate.split(' ')[0].replaceAll('-', '')
      endDate = endDate.split(' ')[0].replaceAll('-', '')
      this.calendars_value_list = [startDate, endDate]
    },
    handleClose () {
      this.visible = false
    },
    submit () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          let params = JSON.parse(JSON.stringify(this.form))
          ksUpdatePriceOrStock(params, this.form.poiId).then(res => {
            if (res.extraInfo.data.error_code) {
              this.$message.error(res.extraInfo.data.description)
            } else {
              this.$message.success('同步成功')
              this.handleClose()
              this.$emit('update')
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleAdd () {
      this.form.ticket_specification.calendars.push(
        {
          actual_amount: 0,
          calendar_type: 1,
          exclude_date_list: [],
          origin_amount: 0,
          status: 1,
          stock_qty: 0,
          value_list: this.calendars_value_list || []
        }
      )
    },
    handleDelete (index) {
      this.form.ticket_specification.calendars.splice(index, 1)
    }
  },
  created () {
  }
}
</script>

  <style scoped>
 .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }

  ::v-deep .el-cascader-node {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 30px 0 20px;
    height: 34px;
    line-height: 34px;
    outline: none;
  }
  </style>