client-mazu/src/pages/sellManage/ticketsOperate/TicketList.vue

<template>
  <el-dialog
    :visible.sync="visible"
    :before-close="handleClose"
    title="门票信息"
    width="80%">
    <div class="tableBox">
      <el-form
        :inline="true"
        label-width="120"
        label-position="right"
        class="buyer-info">
        <el-form-item
          label="旅行社"
          v-if="orderData.groupIndividual === 2"
        >
          <span>{{ orderData.travelAgencyName }}</span>
        </el-form-item>
        <el-form-item :label="orderData.groupIndividual === 1 ? '预订人' : '导游'">
          {{ orderData.buyerName || '暂无' }}
        </el-form-item>
        <el-form-item label="手机号">
          {{ orderData.buyerPhone || '暂无' }}
        </el-form-item>
        <el-form-item label="证件类型">
          {{ orderData.buyerIdentifyType | paperType }}
        </el-form-item>
        <el-form-item label="购买人证件号">
          {{ orderData.buyerIdentify || '暂无' }}
        </el-form-item>
        <el-form-item
          label="票号搜索"
        >
          <el-input
            v-model="filterText"
            clearable></el-input>
        </el-form-item>
      </el-form>

      <el-table
        border
        ref="multipleTable"
        @selection-change="handleSelectionChange"
        :data="filterText?orderData.tickets.filter(v=>v.ticketNo.includes(filterText)):orderData.tickets">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          width="80"
          label="序号"
          prop="id"
        >
          <template slot-scope="scope">
            {{ scope.row.id.toString().padStart(8,'0') }}
          </template>
        </el-table-column>
        <el-table-column
          prop="ticketNo"
          label="票号"
        >
        </el-table-column>

        <el-table-column
          prop="tname"
          label="票种"
        >
        </el-table-column>

        <el-table-column
          v-if="orderData.tickets&&orderData.tickets[0]&&orderData.tickets[0].batch_config_id"
          min-width="120"
          label="场次名称"
        >
          <template slot-scope="scope">
            <el-tag type="primary">
              {{ scope.row.batch_config.name }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column
          width="80"
          label="票价"
        >
          <template slot-scope="scope">
            {{ (scope.row.price/scope.row.checkNum).toFixed(2) }}
          </template>
        </el-table-column>

        <el-table-column
          prop="guestName"
          label="游客姓名"
        >
        </el-table-column>
        <el-table-column
          prop="guestIdentify"
          label="身份证"
        >
        </el-table-column>
        <el-table-column
          width="100"
          prop="checkNum"
          label="检票人数"
        >
        </el-table-column>
        <el-table-column
          width="100"
          prop="payDateBegin"
          label="游玩时间"
        >
          <template slot-scope="scope">
            {{ scope.row.isNeedPlaytime?scope.row.payDateBegin:'无限制' }}
          </template>
        </el-table-column>
        <el-table-column
          width="100"
          prop="playDateEnd"
          label="游玩截止时间"
        >
          <template slot-scope="scope">
            {{ scope.row.isNeedPlaytime?scope.row.playDateEnd:'无限制' }}
          </template>
        </el-table-column>
        <el-table-column
          width="80"
          label="状态"
        >
          <template slot-scope="scope">
            <el-tag :type="scope.row.status | ticketStatusColor">
              {{ scope.row.status | ticketStatus }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          width="80"
          prop="price"
          label="小计"
        >
        </el-table-column>
        <el-table-column
          width="80"
          label="使用状态"
        >
          <template
            slot-scope="scope">
            <el-tag
              :type="scope.row.is_use===1?'success':'danger'"
            >
              {{ scope.row.is_use===1?'启用中':'禁用中' }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column
          fixed="right"
          width="80"
          prop="face_img"
          label="人脸"
        >
          <template slot-scope="scope">
            <el-link
              v-if="scope.row.face"
              @click="faceDelay(scope.row)">
              查看
            </el-link>
          </template>
        </el-table-column>

        <el-table-column
          fixed="right"
          width="400"
          label="操作"
        >
          <template
            slot-scope="scope">
            <el-button
              :type="scope.row.is_use===0?'primary':'danger'"
              @click="active(scope.row)">
              {{ scope.row.is_use===0?'启用':'禁用' }}
            </el-button>

            <el-button
              type="warning"
              @click="delay(scope.row)">
              延期
            </el-button>

            <el-button
              type="primary"
              @click="updateScenic(scope.row)">
              修改检票次数
            </el-button>

            <el-button
              type="primary"
              plain
              @click="updateStatus(scope.row)">
              修改门票状态
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="btn-wrap">
        <el-button
          type="primary"
          @click="toggleSelection">
          全选 / 取消全选
        </el-button>
        <div>
          <el-button
            type="primary"
            @click="batchActive">
            批量禁用/启用
          </el-button>
          <el-button
            type="primary"
            @click="batchDelay">
            批量延期
          </el-button>
        </div>
      </div>
    </div>
    <el-dialog
      :visible.sync="visible1"
      :before-close="handleClose1"
      append-to-body
      title="门票延期"
    >
      <el-form
        :model="form"
        ref="form"
        class="dialog-info"
        inline
        label-width="120px">
        <el-form-item
          label="旧游玩截止时间"
        >
          <el-date-picker
            disabled
            v-model="form.old_play_date"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item
          label="新游玩截止时间"
        >
          <el-date-picker
            value-format="yyyy-MM-dd"
            v-model="form.play_date"
            :picker-options="dateOption"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div class="dialog-btn-wrap">
        <el-button
          @click="goDelay"
          type="primary">
          延期
        </el-button>
      </div>
    </el-dialog>

    <el-dialog
      :visible.sync="visible2"
      :before-close="handleClose2"
      append-to-body
      title="修改检票次数"
    >
      <div style="padding:10px">
        <el-table
          border
          :data="form2.ticketCheckLogScenics">
          <el-table-column
            prop="scenic_name"
            label="景点"
          >
          </el-table-column>
          <el-table-column
            prop="checked_times"
            label="检票次数"
          >
            <template
              slot-scope="scope">
              <el-input-number
                v-model="scope.row.checked_times"
                :min="0"
                :precision="0"
                controls-position="right"
              ></el-input-number>
            </template>
          </el-table-column>
          <el-table-column
            prop="checkLimitTimes"
            label="检票次数上限"
          >
            <template
              slot-scope="scope">
              <el-input-number
                v-model="scope.row.checkLimitTimes"
                :min="1"
                :precision="0"
                controls-position="right"
              ></el-input-number>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="dialog-btn-wrap">
        <el-button
          @click="updateScenicTimes"
          type="primary">
          修改
        </el-button>
      </div>
    </el-dialog>

    <el-dialog
      :append-to-body="true"
      title="人脸延期"
      :visible.sync="visible3"
      @close="visible3=false">
      <div style="width:100%;text-align: center">
        <img
          :src="`data:image/png;base64,${face_img.replace(/[\r\n]/g, '')}`"
          width="200px">
      </div>
      <el-form
        :model="form3"
        ref="form3"
        class="dialog-info"
        inline
        label-width="120px">
        <el-form-item
          label="旧游玩截止时间"
        >
          <el-date-picker
            disabled
            v-model="form3.old_play_date"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item
          label="新游玩截止时间"
        >
          <el-date-picker
            value-format="yyyy-MM-dd"
            v-model="form3.play_date"
            :picker-options="dateOption"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div class="dialog-btn-wrap">
        <el-button
          @click="goFaceDelay"
          type="primary">
          延期
        </el-button>
      </div>
    </el-dialog>

    <el-dialog
      :visible.sync="visible4"
      :before-close="handleClose4"
      append-to-body
      title="修改门票状态"
    >
      <el-form
        :model="form4"
        ref="form4"
        class="dialog-info"
        inline
        label-width="120px">
        <el-form-item
          label="旧状态"
        >
          <el-tag :type="form4.old_status | ticketStatusColor">
            {{ form4.old_status | ticketStatus }}
          </el-tag>
        </el-form-item>
        <el-form-item
          label="新状态"
        >
          <el-select v-model="form4.new_status">
            <el-option
              value="WAIT_USE"
              label="未检票"></el-option>
            <el-option
              value="PART_USE"
              label="部分检票"></el-option>
            <el-option
              value="USED"
              label="已检票"></el-option>
            <el-option
              value="OUTOFDATE"
              label="已过期"></el-option>
            <el-option
              value="CANCELED"
              label="已退票"></el-option>
            <el-option
              value="REFUNDING"
              label="退款中"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div class="dialog-btn-wrap">
        <el-button
          @click="updateTicketStatus"
          type="primary">
          修改
        </el-button>
      </div>
    </el-dialog>
  </el-dialog>
</template>

<script>
import { ticketHandle, getSingleOrder } from '@/api/order'
import posMixin from '@/pages/common/posMixin'
import moment from 'moment'

const posPayArray = ['银行卡', '银联扫码', '支付宝', '微信']

export default {
  mixins: [posMixin],
  computed: {
    payChannelOptions () {
      return this.$store.state.app.payChannelOptions
    },
    scenicName () {
      return this.$localStore.get('scenicName') || this.$store.state.user.scenicName
    },
    showPosQuery () {
      return (this.scenicName === '狼山景区' || this.scenicName === '军山景区') && this.orderData.payChannel && (this.orderData.payChannel.indexOf('中行') > -1 || posPayArray.indexOf(this.orderData.payChannel) > -1) && this.orderData.status !== 'CANCELED'
    }
  },
  data () {
    return {
      visible: false,
      visible1: false,
      visible2: false,
      visible3: false,
      visible4: false,
      filterText: '', // 单号搜索
      face_img: '',
      orderData: [],
      selectTickets: [],
      dateOption: {
        // 日历禁用日期
        disabledDate: (theTime) => {
          let startTime = moment().format('YYYY-MM-DD') + ' 00:00:00'
          if (moment(this.form.old_play_date).isAfter(startTime)) {
            startTime = this.form.old_play_date
          }
          return moment(theTime).isBefore(startTime)
        }
      },
      form: {
        handle_type: 'delay',
        ticketIds: [],
        old_play_date: '',
        play_date: ''
      },
      form2: {
        handle_type: 'updateScenicTimes',
        ticketIds: [],
        ticketCheckLogScenics: []
      },
      form3: {
        handle_type: 'faceDelay',
        ticketIds: [],
        old_play_date: '',
        play_date: ''
      },
      form4: {
        handle_type: 'updateTicketStatus',
        ticketIds: [],
        old_status: '',
        new_status: ''
      }
    }
  },
  methods: {
    show (data) {
      this.visible = true
      this.orderData = JSON.parse(JSON.stringify(data))
      getSingleOrder(data.id).then(res => {
        this.orderData.tickets = res.tickets
      })
    },
    handleClose () {
      this.visible = false
      // this.$emit('updateList')
    },
    handleClose1 () {
      this.visible1 = false
    },
    handleClose2 () {
      this.visible2 = false
    },
    handleClose4 () {
      this.visible4 = false
    },
    active (data) {
      this.$confirm(`确定${data.is_use === 1 ? '禁用' : '启用'}吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        dangerouslyUseHTMLString: true
      }).then(() => {
        ticketHandle({ is_use: data.is_use === 1 ? 0 : 1, ticketIds: [data.id], handle_type: 'disable' }).then(res => {
          this.$message.success('操作成功')

          this.handleClose()

          this.$emit('updateList')
        })
      }).catch(() => {
      })
    },
    batchActive () {
      if (!this.selectTickets.length) return this.$message.error('请选择门票')
      let is_use = this.selectTickets[0].is_use
      if (!this.selectTickets.every(v => v.is_use === is_use)) return this.$message.error('所选门票状态不同,请重新选择')
      this.$confirm(`确定${is_use === 1 ? '禁用' : '启用'}吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        dangerouslyUseHTMLString: true
      }).then(() => {
        ticketHandle({ is_use: is_use === 1 ? 0 : 1, ticketIds: this.selectTickets.map(v => v.id), handle_type: 'disable' }).then(res => {
          this.$message.success('操作成功')

          this.handleClose()

          this.$emit('updateList')
        })
      }).catch(() => {
      })
    },
    delay (data) {
      this.form.old_play_date = data.playDateEnd
      this.form.ticketIds = [data.id]
      this.visible1 = true
    },
    batchDelay () {
      if (!this.selectTickets.length) return this.$message.error('请选择门票')
      let old_play_date = this.selectTickets[0].playDateEnd
      if (!this.selectTickets.every(v => v.playDateEnd === old_play_date)) return this.$message.error('所选门票游玩截止时间不同,请重新选择')
      this.form.old_play_date = old_play_date
      this.form.ticketIds = this.selectTickets.map(v => v.id)
      this.visible1 = true
    },
    goDelay () {
      if (!this.form.play_date) return this.$message.error('请选择新游玩截止时间')
      ticketHandle(this.form).then(res => {
        this.$message.success('操作成功')
        this.visible1 = false
        this.form = {
          handle_type: 'delay',
          ticketIds: [],
          old_play_date: '',
          play_date: ''
        }

        this.handleClose()

        this.$emit('updateList')
      })
    },
    updateScenic (data) {
      this.form2.ticketCheckLogScenics = data.ticketScenic
      this.form2.ticketIds = [data.id]
      this.visible2 = true
    },
    updateScenicTimes () {
      if (this.form2.ticketCheckLogScenics.some(v => v.checked_times > v.checkLimitTimes)) return this.$message.error('检票次数大于检票次数上限 请修改')
      ticketHandle(this.form2).then(res => {
        this.$message.success('操作成功')
        this.visible2 = false
        this.form2 = {
          handle_type: 'updateScenicTimes',
          ticketIds: [],
          ticketCheckLogScenics: []
        }

        this.handleClose()

        this.$emit('updateList')
      })
    },
    updateStatus (data) {
      this.form4.ticketIds = [data.id]
      this.form4.old_status = data.status
      this.visible4 = true
    },
    updateTicketStatus () {
      if (!this.form4.new_status) return this.$message.error('请选择新状态')
      if (this.form4.old_status === this.form4.new_status) return this.$message.error('新旧状态相同,请重新选择')
      ticketHandle(this.form4).then(res => {
        this.$message.success('操作成功')
        this.visible4 = false
        this.form4 = {
          handle_type: 'updateTicketStatus',
          ticketIds: [],
          old_status: '',
          new_status: ''
        }

        this.handleClose()

        this.$emit('updateList')
      })
    },
    faceDelay (data) {
      this.face_img = data.face.face_img
      this.form3.old_play_date = data.playDateEnd
      this.form3.ticketIds = [data.id]
      this.visible3 = true
    },
    goFaceDelay () {
      if (!this.form3.play_date) return this.$message.error('请选择新游玩截止时间')
      ticketHandle(this.form3).then(res => {
        this.$message.success('操作成功')
        this.visible3 = false
        this.form3 = {
          handle_type: 'faceDelay',
          ticketIds: [],
          old_play_date: '',
          play_date: ''
        }

        this.handleClose()

        this.$emit('updateList')
      })
    },
    handleSelectionChange (val) {
      this.selectTickets = val
    },
    toggleSelection () {
      this.$refs.multipleTable.toggleAllSelection()
    }
  }
}
</script>

<style lang="scss" scoped>
.btn-wrap{
  display: flex; justify-content: space-between; padding: 10px 0;
}
</style>