dbd-meeting-html/src/views/admin/meeting/modules/TicketModal.vue

<template>
  <a-modal
    title='操作'
    style='top: 20px;'
    :width='1000'
    v-model='visible'
    :confirmLoading='confirmLoading'
    @ok='handleSubmit'
  >
    <a-form :form='form'>
      <a-form-item style='display:none'>
        <a-input v-decorator="['id']" />
      </a-form-item>
      <a-form-item style='display:none'>
        <a-input v-decorator="['version']" />
      </a-form-item>

      <div style='display: flex;margin-bottom: 20px'>
        <span style='width: 20px;display: block;font-size: 25px;color: #1890ff;font-weight: bold;'>|</span>
        <span style='display: block;margin-top: 11px;font-size: 15px'>新增优惠卷</span>
      </div>
      <a-row>
        <a-col :span='11'>
          <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='优惠卷名称'>
            <a-input placeholder='优惠卷名称' v-decorator="['title',{rules: [{ required: true, message: '优惠卷名称'}]}]" />
          </a-form-item>
        </a-col>
        <a-col :span='11'>
          <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='优惠卷类型'>
            <a-select
              placeholder='请选择类型' v-decorator="['type',{rules: [{ required: true, message: '优惠卷类型'}]}]"
              @change='getType'
            >
              <a-select-option value='1'>抵用卷</a-select-option>
              <a-select-option value='2'>优惠卷</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span='11'>
          <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='优惠方式'>
            <a-input placeholder='优惠方式' v-decorator="['content',{rules: [{ required: true, message: '优惠方式'}]}]" />
          </a-form-item>
        </a-col>
        <a-col :span='11'>
          <a-form-item v-if="form.type === '1' " :labelCol='labelCol' :wrapperCol='wrapperCol' label='时长'>
            <a-input placeholder='时长' v-decorator="['duration',{rules: [{ required: true, message: '时长'}]}]" />
          </a-form-item>
        </a-col>
      </a-row>

      <a-row>
        <a-col :span='11'>
          <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='开始时间'>
            <a-date-picker @change='onChange' v-decorator="['startTime',{rules: [{ required: true, message: '开始时间'}]}]"
                           placeholder='开始时间' />
          </a-form-item>
        </a-col>
        <a-col :span='11'>
          <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='结束日期'>
            <a-date-picker @change='onChange' v-decorator="['endDate',{rules: [{ required: true, message: '结束日期'}]}]"
                           placeholder='结束日期' />
          </a-form-item>
        </a-col>
      </a-row>

      <a-row>
        <a-col :span='11'>
          <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='发送数量' style='margin-top: 20px;'>
            <a-radio-group v-model='value' @change='onNumChange'>
              <a-radio :value='1'>
                无限制
              </a-radio>
              <a-radio :value='2'>
                有限制
              </a-radio>
              <div>
                <a-input-number v-if='value === 2' placeholder='发送数量'
                                v-decorator="['num',{rules: [{ required: true, message: '结束日期'}]}]"
                                style='margin-top: 20px;width: 200px' />
              </div>
            </a-radio-group>
          </a-form-item>
        </a-col>
      </a-row>

      <div style='display: flex;margin-bottom: 20px'>
        <span style='width: 20px;display: block;font-size: 25px;color: #1890ff;font-weight: bold;'>|</span>
        <span style='display: block;margin-top: 11px;font-size: 15px'>使用企业</span>
      </div>
      <div style='display: flex;justify-content: space-between;align-items: center;margin-bottom: 20px'>
        <div style='margin-left: 50px'>
          <a @click='getCustomer'>选择企业</a>
        </div>
        <a-form layout='inline'>
          <a-form-item label='关键词' style='margin-right: 135px'>
            <a-input placeholder='请输入关键词' v-model='queryParam.title' />
          </a-form-item>
        </a-form>
      </div>

      <a-table :columns='columns'
               size='default'
               ref='table'
               style='width: 800px;margin-left: 20px'
               :data-source='loadData'
               rowKey='id'
               :rowSelection='{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}'>
        <a slot='name' slot-scope='text'>{{ text }}</a>
        <span slot='action' slot-scope='text, record'>
        <a @click='deleteRecord(record)' >删除</a>
        <a-divider type='vertical' />
        <a @click='couponTicket(record)'>多发优惠劵</a>
      </span>
      </a-table>
    </a-form>

    <a-modal v-model='customerVisible' title='会议设备' width='800px' @ok='itemHandleOk()'>
      <div class='table-page-search-wrapper'>
        <a-form layout='inline'>
          <a-form-item label='关键词' style='width: 300px'>
            <a-input placeholder='请输入关键词' v-model='customerQueryParam.itemName' />
          </a-form-item>
        </a-form>
      </div>
      <div class='table-operator'>
      </div>
      <a-table
        size='default'
        ref='table'
        rowKey='id'
        :rowSelection='{ selectedRowKeys: selectedCustomerRowKeys, onChange: onCustomerSelectChange }'
        :columns='customerColumns'
        :data-source='data'
      >
      </a-table>
    </a-modal>
    <a-modal
      title='发放优惠券'
      style='top: 20px;'
      :width='500'
      v-model='numVisible'
      :confirmLoading='confirmLoading'
      @ok='handleNumSubmit'
    >
      <a-form layout='inline'>
        <a-form-item label='发放数量' >
          <a-input-number placeholder='请输入发放数量' v-model='ticketNum' style='width: 200px' />
        </a-form-item>
      </a-form>
    </a-modal>

  </a-modal>


</template>
<script>
import { saveTicket, getTicketByCompany } from '@/api/admin/meeting/ticket'
import pick from 'lodash.pick'
import { STable } from '@/components'

export default {
  name: 'TicketModal',
  props: {},
  components: {
    STable
  },
  data() {
    return {
      visible: false,
      customerVisible: false,
      customerQueryParam: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      ticketNum:0,
      selectedRowKeys: [],
      selectedRows: [],
      selectedCustomerRowKeys: [],
      selectedCustomerRows: [],
      columns: [
        {
          title: '企业名称',
          dataIndex: 'name'
        },
        {
          title: '企业负责人',
          dataIndex: 'user.nickname',
          key: 'age'
        },
        {
          title: '联系电话',
          dataIndex: 'user.mobile'
        },
        {
          title: '优惠劵数量',
          dataIndex: 'num'
        },
        {
          title: '操作',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' }
        }
      ],
      customerColumns: [
        {
          title: '企业名称',
          dataIndex: 'name'
        },
        {
          title: '企业负责人',
          dataIndex: 'user.nickname',
          key: 'age'
        },
        {
          title: '联系电话',
          dataIndex: 'user.mobile'
        },
        {
          title: '操作',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' }
        }
      ],
      CompanyList: [],
      data: [],
      loadData: [],
      // loadData: parameter => {
      //   return getTicketByCompany(Object.assign(parameter, this.queryParam))
      // },
      value: 1,
      numVisible:false,
      confirmLoading: false,
      mdl: {},
      queryParam: {},
      form: this.$form.createForm(this)
    }
  },
  beforeCreate() {
  },
  created() {
  },
  methods: {
    // 多发优惠券
    couponTicket(){
      this.numVisible =true
    },

    handleNumSubmit(){

    },

    deleteRecord(record) {
      this.loadData = this.loadData.filter(item => item.id != record.id)
      this.data.push(record)
    },

    onSelectChange(selectedRowKeys, selectedRows) {
      console.log(selectedRowKeys, selectedRows)
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    onCustomerSelectChange(selectedRowKeys, selectedRows) {
      this.selectedCustomerRowKeys = selectedRowKeys
      this.selectedCustomerRows = selectedRows
    },

    getCustomer() {
      this.customerVisible = true
    },
    onNumChange(e) {
      this.value = e.target.value
    },
    getType(value) {
      this.form.type = value
    },
    onChange(date, dateString) {
      this.form.startTime = dateString[0]
      this.form.endDate = dateString[1]
    },

    add() {
      this.form.resetFields()
      this.selectedCustomerRowKeys = []
      this.edit({ id: 0 })
    },
    edit(record) {
      this.mdl = Object.assign(record)
      this.visible = true
      getTicketByCompany().then(res => {
        this.loadData = res.rows
      })

      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.mdl, 'id', 'title', 'content', 'duration', 'type', 'money', 'address', 'isVerification', 'isShow', 'startTime', 'endDate', 'remark', 'isDefault', 'version', 'deleteFlag', 'createBy', 'createTime', 'updateBy', 'updateTime'))
      })
    },
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values)
          this.confirmLoading = true
          saveTicket(values).then(res => {
            if (res.code === 0) {
              this.$message.success('保存成功')
              this.$emit('ok')
              this.visible = false
            } else {
              this.$message.error(res.msg)
            }
          }).catch(() => {
            this.$message.error('系统错误，请稍后再试')
          }).finally(() => {
            this.confirmLoading = false
          })
        }
      })
    }
  },
  watch: {}
}
</script>