ittpc/ittpc/src/views/modules/appointment/appointment.vue

<template>
  <div class="appointment-page" v-loading="loading" element-loading-text="加载中" element-loading-spinner="el-icon-loading">
    <el-row>
      <el-col :span="24" class="padding20">
        <el-form :inline="true" :model="searchForm" class="flex-form" size="small">
          <el-form-item label="联系人姓名">
            <el-input v-model="searchForm.name" placeholder="请输入姓名(不是昵称)"></el-input>
          </el-form-item>
          <el-form-item label="预约申请时间">
            <el-date-picker
              v-model="appointmentTime"
              type="daterange"
              value-format="yyyy-MM-dd HH:mm:ss"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          
          <el-form-item label="状态">
            <!-- 状态 状态 【1.申请预约  2.撤销预约  3.业务人员撤销预约 4.预约报道成功 5.预约超时  】 -->
            <el-select v-model="searchForm.status" placeholder="请选择">
              <el-option label="请选择" value=""></el-option>
              <el-option label="申请预约" value="1"></el-option>
              <el-option label="撤销预约" value="2"></el-option>
              <el-option label="业务人员撤销预约" value="3"></el-option>
              <el-option label="预约报道成功" value="4"></el-option>
              <el-option label="预约超时" value="5"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="省/市/区">
            <el-cascader style="width:230px;"
              :options="options"
              :props="{ checkStrictly: true }"
              v-model="selectedOptions"
              @change="handleChange">
            </el-cascader>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleQuery">查询</el-button>
            <el-button @click="handleReset">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" class="padding20 no-padding-top">
        <el-table :data="tableData" border stripe style="width: 100%" size="small" max-height="700">
          <el-table-column type="index" align="center" label="序号"></el-table-column>
          <el-table-column prop="appointmentId" label="预约记录ID" align="center"></el-table-column>
          <el-table-column prop="contactName" label="联系人名称" align="center"></el-table-column>
          <el-table-column prop="contactPhone" label="联系方式" align="center"></el-table-column>
          <el-table-column prop="nickname" label="预约用户昵称" align="center"></el-table-column>
          <el-table-column prop="appointmentTime" label="预约时间" align="center"></el-table-column>
          <el-table-column prop="appointmentDuration" label="时间区间段" align="center"></el-table-column>
          <el-table-column label="状态" align="center">
            <template slot-scope="scope">
              <!-- 状态 状态 【1.申请预约  2.撤销预约  3.业务人员撤销预约 4.预约报道成功 5.预约超时  】 -->
              <span v-if="scope.row.status == 1">申请预约</span>
              <span v-if="scope.row.status == 2">撤销预约</span>
              <span v-if="scope.row.status == 3">业务人员撤销预约</span>
              <span v-if="scope.row.status == 4">预约报道成功</span>
              <span v-if="scope.row.status == 5">预约超时</span>
            </template>
          </el-table-column>
          <el-table-column prop="addTime" label="预约申请时间" align="center"></el-table-column>
          <el-table-column prop="" label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="text" :disabled="scope.row.status !== 1" @click="handleCancelAppoint(scope.row)">取消预约</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" class="padding20 flexend" >
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          :total="total"
          size="small"
          >
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getAppointmentList, cancelAppointment } from '@/request/request'
import { regionData, CodeToText } from 'element-china-area-data'
export default {
  name: 'appointment',
  data() {
    return {
      loading: false,
      appointmentTime: '',
      searchForm: {
        name: '',
        start: '',
        end: '',
        status: '',
        province: '浙江省',
        city: '杭州市',
        county: '上城区'
      },
      tableData: [],
      currentPage: 1,
      pageSize: 20,
      total: 0,
      options: regionData,
      selectedOptions: ['330000', '330100', '330102']
    };
  },
  mounted() {
    this.handleQuery()
  },
  methods: {
    handleReset () {
      this.selectedOptions = ['330000', '330100', '330102']
      this.searchForm.province = CodeToText['330000']
      this.searchForm.city = CodeToText['330100']
      this.searchForm.county = CodeToText['330102']
      this.searchForm.status = ''
      this.appointmentTime = ''
      this.searchForm.name = ''
    },
    handleQuery () {
      if (this.appointmentTime) {
        this.searchForm.start = this.appointmentTime[0]
        this.searchForm.end = this.appointmentTime[1]
      } else {
        this.searchForm.start = ''
        this.searchForm.end = ''
      }
      this.currentPage = 1
      this.getAppointmentListFn()
    },
    getAppointmentListFn () {
      let data = {
        currentPage: this.currentPage,
        ...this.searchForm
      }
      this.loading = true
      getAppointmentList(data).then(res => {
        this.loading = false
        this.total = res.data.total
        this.pageSize = res.data.pageSize
        this.tableData = res.data.vos || []
      }).catch(e => {
        this.loading = false
        console.log(e);
      })
    },
    handleCurrentChange (currentPage) {
      this.currentPage = currentPage
      this.getAppointmentListFn()
    },
    handleCancelAppoint (row) {
      this.$confirm('确定取消预约吗？').then( _=> {
        this.cancelAppointmentFn(row.appointmentId)
      }).catch(_ => {});
    },
    cancelAppointmentFn (appointmentId) {
      let data = {
        appointmentId: appointmentId
      }
      this.loading = true
      cancelAppointment(data).then(res => {
        this.loading = false
        this.$message({
          message: '取消成功',
          type: 'success'
        })
        this.getAppointmentListFn()
      }).catch(e => {
        this.loading = false
        console.log(e);
      })
    },
    handleChange (value) {
      this.searchForm.province = CodeToText[value[0]]
      this.searchForm.city = CodeToText[value[1]]
      this.searchForm.county = CodeToText[value[2]]
    }
  }
};
</script>

<style scoped lang="scss">
.appointment-page {
  width: 100%;
  height: 100%;
  .padding20 {
    padding: 20px;
  }
  .no-padding-top {
    padding-top: 0;
  }
  .flexend {
    display: flex;
    justify-content: flex-end;
  }
}
</style>