clearticket_ota/src/views/goodsCenter/priceList.vue

<template>
  <div class="form-wrap">
    <div class="searchBox">
      <el-form
        ref="form"
        :model="form"
        :inline="true"
        label-width="150px">
        <el-form-item
          label="产品ID"
          prop="otaProductId">
          <el-input
            v-model="form.otaProductId"
            clearable></el-input>
        </el-form-item>
        <el-form-item
          label="分销商名称"
          prop="otaSourceId">
          <el-select
            v-model="form.otaSourceId"
            filterable>
            <el-option
              value=""
              label="全部"></el-option>
            <el-option
              v-for="item in otaList"
              :key="item.id"
              :value="item.otaSourceId"
              :label="item.otaSourceName"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="票种"
          prop="ticketTypeId">
          <el-select
            v-model="form.ticketTypeId"
            filterable>
            <el-option
              value=""
              label="全部"></el-option>
            <el-option
              v-for="item in ticketTypeList"
              :key="item.id"
              :value="item.ticketTypeId"
              :label="item.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="是否可售"
          prop="isSale">
          <el-select
            v-model="form.isSale">
            <el-option
              value=""
              label="全部"></el-option>
            <el-option
              :value="1"
              label="可售"></el-option>
            <el-option
              :value="0"
              label="不可售"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="价格"
          prop="salePrice">
          <el-input
            v-model="form.salePrice"
            clearable></el-input>
        </el-form-item>
      </el-form>
      <div class="btn-wrap">
        <el-button @click="reset">重置</el-button>
        <el-button
          type="primary"
          @click="getList">搜索</el-button>
        <el-button
          type="primary"
          plain
          v-if="canEdit"
          @click="showDialog('add')">创建产品</el-button>
        <el-button
          type="danger"
          @click="batchDelete">批量删除</el-button>
      </div>
    </div>
    <div class="tableBox">
      <!-- <div class="block-title">查询信息</div> -->
      <el-table
        stripe
        :data="tableData"
        row-class-name="is-center"
        @selection-change="handleSelectionChange"
        v-loading="loading">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <!-- <el-table-column type="expand">
          <template slot-scope="scope">
            <el-form
              label-position="right"
              inline
              class="table-expand"
              label-width="120px"
            >
              <el-form-item label="游玩天数">
                <span>{{ scope.row.useValidDays }} 天</span>
              </el-form-item>
              <el-form-item label="最小起订数">
                <span>{{ scope.row.minOrderNum }}</span>
              </el-form-item>
              <el-form-item label="最大限订数">
                <span>{{ scope.row.maxOrderNum }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column> -->
        <el-table-column type="expand">
          <template slot-scope="props">
            <div class="title">场次</div>
            <el-table
              :data="props.row.batchConfigList"
              :max-height="200">
              <el-table-column
                prop="id"
                label="skuId"
              ></el-table-column>
              <el-table-column
                prop="name"
                label="场次名称"
              >
              </el-table-column>

              <el-table-column
                prop="startTime"
                label="开始时间"
                width="170px"
              >
              </el-table-column>

              <el-table-column
                prop="endTime"
                label="结束时间"
                width="170px"
              >
              </el-table-column>

              <el-table-column
                prop="leftNums"
                label="库存"
                width="120px"
              >
              </el-table-column>
            </el-table>

            <!-- 美团场次票信息 -->
            <template v-if="props.row.mtProductLevelList && props.row.mtProductLevelList.length > 0">
              <div
                class="title"
                style="margin-top: 15px;">美团场次票</div>
              <el-table
                :data="props.row.mtProductLevelList"
                :max-height="200">
                <el-table-column
                  prop="batchConfigName"
                  label="场次名称"
                ></el-table-column>
                <el-table-column
                  prop="marketPrice"
                  label="市场价"
                ></el-table-column>
                <el-table-column
                  prop="mtPrice"
                  label="美团价"
                ></el-table-column>
                <el-table-column
                  prop="settlementPrice"
                  label="结算价"
                ></el-table-column>
                <el-table-column
                  prop="priceDate"
                  label="日期范围"
                ></el-table-column>
              </el-table>
            </template>

            <!-- 携程场次票信息 -->
            <template v-if="props.row.xcProductLevelList && props.row.xcProductLevelList.length > 0">
              <div
                class="title"
                style="margin-top: 15px;">携程场次票</div>
              <el-table
                :data="props.row.xcProductLevelList"
                :max-height="200">
                <el-table-column
                  prop="batchConfigName"
                  label="场次名称"
                ></el-table-column>
                <el-table-column
                  prop="status"
                  label="状态">
                  <template slot-scope="scope">
                    {{ scope.row.status === 'active' ? '有效' : '无效' }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="effectiveDays"
                  label="可售天数"
                ></el-table-column>
                <el-table-column
                  label="提前预订">
                  <template slot-scope="scope">
                    {{ scope.row.requiredAdvanceBooking === 1 ? '是' : '否' }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="advanceDays"
                  label="提前天数"
                ></el-table-column>
                <el-table-column
                  prop="advanceTime"
                  label="预订时间"
                ></el-table-column>
                <el-table-column
                  prop="advanceMinutes"
                  label="生效等待(分钟)"
                ></el-table-column>
              </el-table>
            </template>
          </template>
        </el-table-column>
        <el-table-column
          label="产品ID"
          prop="id">
          <template
            slot="header">
            产品ID
            <Tip msg="表格中的产品ID，请填写在OTA平台中的商品配置中，和该商品绑定"></Tip>
          </template>
        </el-table-column>
        <el-table-column
          label="票种"
          prop="ticketTypeName">
        </el-table-column>
        <el-table-column
          prop="otaSourceName"
          label="分销商">
          <template slot-scope="scope">
            {{ scope.row.otaSourceName }}
            <span v-if="scope.row.ksProductId">(快手商品ID:{{ scope.row.ksProductId }})</span>
          </template>
        </el-table-column>
        <el-table-column
          width="80"
          prop="salePrice"
          label="价格">
        </el-table-column>
        <el-table-column
          width="80"
          prop="marketPrice"
          label="市场价">
        </el-table-column>
        <el-table-column
          width="80"
          prop="settlementPrice"
          label="结算价">
        </el-table-column>
        <!-- <el-table-column
          prop="name"
          label="产品名称">
        </el-table-column> -->
        <!-- <el-table-column
          prop="batchConfigName"
          label="场次">
          <template slot-scope="scope">
            {{ scope.row.batchConfigName ? scope.row.batchConfigName : '' }}
          </template>
        </el-table-column> -->
        <el-table-column
          width="170"
          label="可售日期"
        >
          <template slot-scope="scope">
            {{ scope.row.saleDateStart | formatDate }} 至 {{ scope.row.saleDateEnd | formatDate }}
          </template>
        </el-table-column>
        <el-table-column
          width="170"
          label="游玩日期"
        >
          <template slot-scope="scope">
            {{ scope.row.useDateStart | formatDate }} 至 {{ scope.row.useDateEnd | formatDate }}
          </template>
        </el-table-column>
        <el-table-column
          prop="totalStock"
          label="总库存">
          <template slot-scope="scope">
            {{ scope.row.totalStock > 0 ? scope.row.totalStock : '不限库存' }}
          </template>
        </el-table-column>
        <el-table-column
          prop="xcRealNameType"
          label="携程出行人模板">
          <template slot-scope="scope">
            {{ scope.row.xcRealNameType | formatXCProductName }}
          </template>
        </el-table-column>
        <el-table-column
          width="110"
          label="状态">
          <template slot-scope="scope">
            <span>{{ scope.row.isSale ? '已激活' : '已禁用' }}</span>
            <span v-if="canEdit">
              <el-button
                type="text"
                @click="offSale(scope.row)"
                class="offSale-btn"
                v-if="scope.row.isSale"><i class="iconfont icon-offSale"></i>禁用</el-button>
              <el-button
                type="text"
                @click="onSale(scope.row)"
                class="onSale-btn"
                v-else><i class="iconfont icon-onSale"></i>激活</el-button>
            </span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="canEdit"
          width="120"
          label="操作">
          <template slot-scope="scope">
            <!-- <el-button
              v-if="scope.row.otaSourceName==='携程网'"
              type="text"
              @click="$refs.xcPriceCalendar.show(scope.row.id)"
            >
              <i class="el-icon-date"></i>
              价格方案
            </el-button>
            <el-button
              v-if="scope.row.otaSourceName==='携程网'"
              type="text"
              @click="$refs.xcStock.show(scope.row.id)"
            >
              <i class="el-icon-date"></i>
              库存方案
            </el-button>
            <el-button
              v-else
              type="text"
              @click="$refs.priceCalendar.show(scope.row.id)"
            >
              <i class="el-icon-date"></i>
              价格方案
            </el-button> -->
            <el-button
              type="text"
              @click="showDialog('edit', scope.row)">
              <i class="el-icon-edit"></i>
              编辑
            </el-button>
            <el-button
              type="text"
              @click="deleteItem(scope.row)">
              <i class="el-icon-delete"></i>
              删除
            </el-button>
            <!-- <el-button
              v-if="scope.row.otaSourceCode==='KS'"
              type="text"
              @click="$refs.KSNewDialogRef.show(scope.row)"
            >
              同步商品
            </el-button>
            <el-button
              v-if="scope.row.otaSourceCode==='KS' && scope.row.ksProductId"
              type="text"
              @click="$refs.KSUpdateDialogRef.show(scope.row)"
            >
              同步商品价格库存
            </el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        :current-page.sync="form.pageNum"
        @current-change="getList"
        layout="total, prev, pager, next"
        :total="total">
      </el-pagination>
    </div>

    <ElDialog
      :title="dialogType === 'add' ? '创建产品' : '编辑产品'"
      width="1000px"
      v-model="dialogVisible">
      <EditDialog
        :perform-list="performList"
        :dialog-type="dialogType"
        :ticket-type-list="ticketTypeList"
        :ota-list="otaList"
        :batch-config-list="batchConfigList"
        :current-item="currentItem"
        @updateList="getList"></EditDialog>
    </ElDialog>

    <KSNewDialog ref="KSNewDialogRef"></KSNewDialog>
    <KSUpdateDialog ref="KSUpdateDialogRef"></KSUpdateDialog>
    <PriceCalendar ref="priceCalendar"></PriceCalendar>
    <xcPriceCalendar ref="xcPriceCalendar"></xcPriceCalendar>
    <XCStock ref="xcStock"></XCStock>

  </div>
</template>

<script>
import { getTicketTypeList } from '@/api/ticketType'
import {
  // getPerformList,
  getOTATicketSaleList,
  deleteOTATicketSale,
  updateOTATicketSale
  // getBatchConfigList,
} from '@/api/otaTicketSale'
import { getOtaProjectList } from '@/api/ota'
import ElDialog from '@/components/Dialog'
import EditDialog from './priceList/EditDialog'
import KSNewDialog from './priceList/KSNewDialog'
import KSUpdateDialog from './priceList/KSUpdateDialog'
import PriceCalendar from './priceList/PriceCalendar'
import xcPriceCalendar from './priceList/xcPriceCalendar'
import XCStock from './priceList/xcStock'

export default {
  components: {
    ElDialog,
    EditDialog,
    KSNewDialog,
    KSUpdateDialog,
    PriceCalendar,
    xcPriceCalendar,
    XCStock
  },
  data () {
    return {
      projectName: localStorage.getItem('otaProject'),
      performList: [],
      dialogType: 'add',
      dialogVisible: false,
      form: {
        pageNum: 1,
        pageSize: 10,
        isSale: '',
        otaSourceId: '',
        ticketTypeId: '',
        salePrice: '',
        otaProductId: ''
      },
      loading: false,
      multipleSelection: [], // 批量删除多选数组
      total: 0,
      tableData: [],
      currentItem: {},
      ticketTypeList: [], // 票种列表
      batchConfigList: [],
      otaList: []
    }
  },
  created () {
    this.getTicketTypeList()
    this.getList()
    // this.fetchBatchConfigList()
    // getPerformList(this.projectName).then((res) => {
    //   this.performList = res.extraInfo
    // })

    getOtaProjectList({
      pageNum: 1,
      pageSize: -1
    }).then(res => {
      this.otaList = res.data.records
    })
  },
  filters: {
    formatXCProductName (time) {
      if (!time) return ''
      const map = {
        '1': '一张一人需要证件',
        '2': '一张一人不需要证件',
        '3': '一单一人需要证件',
        '4': '一单一人不需要证件'
      }
      return map[time] || ''
    }
  },
  computed: {
    canEdit () {
      return true
      // return this.$store.state.user.permissionList.includes('product:pricecode_edit')
    },
    queryClear () {
      return this.$store.state.user.permissionList.includes('stats:clearwx_query')
    }
  },
  methods: {
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    // 批量删除产品
    batchDelete () {
      if (!this.multipleSelection || !this.multipleSelection.length) {
        this.$message.error('请先选择批量删除的产品记录')
        return
      }
      const ids = this.multipleSelection.map(item => item.id)
      this.$confirm(`将删除这${ids.length}条记录, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteOTATicketSale({ idList: ids }).then(res => {
          this.$message.success('批量删除成功')
          this.multipleSelection = [] // 清空选中待删记录
          this.getList()
        }).catch(() => {
          this.$message({
            type: 'success',
            message: '批量删除出错!'
          })
          this.multipleSelection = [] // 清空选中待删记录
          this.getList()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 获取票种列表
    getTicketTypeList () {
      return getTicketTypeList({
        pageNum: 1,
        pageSize: -1
      }).then(res => {
        this.ticketTypeList = res.data.records
      })
    },
    // 获取列表
    getList () {
      this.loading = true
      getOTATicketSaleList(this.form).then(res => {
        this.total = res.data.total
        this.tableData = res.data.records
        this.loading = false
      })
    },
    // 打开编辑对话框
    showDialog (type, item) {
      // 每次打开弹框时重新查询票种列表
      this.getTicketTypeList().then(() => {
        this.dialogType = type
        this.currentItem = item || {}
        this.dialogVisible = true
      })
    },
    // 删除产品
    deleteItem (item) {
      this.$confirm('确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteOTATicketSale({ idList: [item.id] }).then(res => {
          this.$message.success('删除成功')
          this.getList()
        })
      })
    },
    reset () {
      this.$refs.form.resetFields()
    },
    offSale (data) {
      let form = Object.assign({}, data)
      form.isSale = 0
      updateOTATicketSale(form).then(res => {
        this.$message.success('操作成功')
        this.getList()
      })
    },
    onSale (data) {
      let form = Object.assign({}, data)
      form.isSale = 1
      updateOTATicketSale(form).then(res => {
        this.$message.success('操作成功')
        this.getList()
      })
    },
    // fetchBatchConfigList () {
    //   getBatchConfigList({ pageNum: 1, pageSize: -1 }).then(res => {
    //     this.batchConfigList = res.list
    //   })
    // },
    getBatchName (id) {
      if (!id || id === -1) { // null或者0 不显示(-1为以前为绑定)
        return ''
      } else {
        const batch = this.batchConfigList.find(v => v.id === id)
        return batch ? batch.name : ''
      }
    }
  }
}
</script>