Vue3实战八 顾客管理

实现内容：

顾客添加、查询、结账、删除、导出

1、设置路由

2、添加、查询、结账、删除、导出

guest.js

import { $post, $get } from "../utils/request";
import { $msg_e, $msg_s, $confirm } from "../utils/msg";


//查询顾客信息
export let list = async (params) => {
  let ret = await $get('GuestRecord/List', params)
  return ret
}

//添加顾客信息的方法
export let add = async (params) => {
  if (!checkInput(params)) return false
  let { success, message } = await $post('GuestRecord/Add', params)
  if (success) {
    $msg_s(message)
  } else {
    $msg_e(message)
  }
  return success
}
//修改顾客信息的方法
export let update = async (params) => {
  if (!checkInput(params)) return false
  let { success, message } = await $post('GuestRecord/Update', params)
  if (success) {
    $msg_s(message)
  } else {
    $msg_e(message)
  }
  return success
}
//删除房间信息
export let del = async (params) => {
  await $confirm('是否确认删除')
  let { success, massage } = $post('GuestRecord/Delete', params)
  if (success) {
    $msg_s(massage)
  } else {
    $msg_e(massage)
  }
  return success

}
//结账
export let checkout = async (params) => {

  let { totalMoney } = await $post('GuestRecord/Checkout', params)
  $msg_e('结账成功，需要支付' + totalMoney + '元')
}



//验证输入方法
let checkInput = (params) => {
  if (!params.identityId) {
    $msg_e('请输入身份证号')

  } else if (!params.guestName) {
    $msg_e('请输入顾客姓名')

  } else if (!params.phone) {
    $msg_e('请输入电话')

  } else if (params.roomId === '0') {
    $msg_e('请选择房间')
  } else if (!params.resideDate) {
    $msg_e('请选择入住日期')

  } else if (!params.deposit) {
    $msg_e('请输入押金')
  } else if (!params.guestNum) {
    $msg_e('请输入入住人数')
  } else if (params.roomStateId == 0) {
    $msg_e('请选择房间状态')

  } else {
    return true
  }
  return false
}

Guest.vue

<template>
  <div class="search">
    <span>顾客姓名：</span>
    <div style="width: 200px;">
      <el-input size="small" v-model="guestName" placeholder="请输入顾客姓名" />
    </div>

    <span>结账状态：</span>
    <el-select v-model="resideStateId" size="small">
      <el-option v-for="item in resideStateList" :key="item.resideStateId" :label="item.resideTStateName"
        :value="item.resideStateId" />
    </el-select>
    <el-button size="small" type="success" @click="loadTable">查询</el-button>
    <!-- <el-button size="small" type="info" @click="toExcel">导出</el-button> -->

    <el-button size="small" type="primary" @click="openDrawer = true">添加</el-button>
  </div>
  <el-table size="" :data="tableData" style="width: 100%">
    <el-table-column prop="guestId" label="编号" width="40" />
    <el-table-column prop="guestName" label="姓名" width="70" />
    <el-table-column prop="identitiId" label="身份证" width="160" />
    <el-table-column prop="photo" label="电话" width="100" />
    <el-table-column prop="roomId" label="房间号" width="80" />
    <el-table-column prop="room.roomType.roomTypeName" label="房间类型" width="100" />
    <el-table-column prop="resideDate" label="入住日期" width="140" />
    <el-table-column prop="leaveDate" label="离开日期" width="140" />
    <el-table-column prop="deposit" label="押金" width="80" />
    <el-table-column prop="totalMoney" label="消费金额" width="80" />
    <el-table-column label="结账状态" width="100">
      <template #default="scope">
        <el-tag size="mini" v-if="scope.row.resideState.resideStateId == 2"
          type="success">{{ scope.row.resideState.resideStateName }}</el-tag>
        <el-tag size="mini" v-if="scope.row.resideState.resideStateId == 1"
          type="warning">{{ scope.row.resideState.resideStateName }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column fixed="right" label="操作" width="240">
      <template #default="scope">
        <el-button v-if="scope.row.resideState.resideStateId == 1" size="small" type="warning"
          @click="handleEdit(scope.row)">编辑</el-button>
        <el-button v-if="scope.row.resideState.resideStateId == 2" size="small" type="danger"
          @click="handleDelete(scope.row)">删除</el-button>
        <el-button v-if="scope.row.resideState.resideStateId == 1" size="small" type="primary"
          @click="handleCheckout(scope.row)">结账</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="pagination">
    <el-pagination background layout="prev, pager, next" :page-size="pageSize" :total="total"
      v-model:current-page="pageIndex" />
  </div>
  <el-drawer v-model="openDrawer" :title="isAdd ? '添加顾客' : '修改顾客'" size="40%" direction="rtl" :before-close="drawerClose">
    <div class="edititem">
      <span>顾客姓名:</span>
      <div>
        <el-input v-model="formData.guestName" placeholder="请输入顾客姓名" />
      </div>
    </div>
    <div class="edititem">
      <span>身份证号:</span>
      <div>
        <el-input v-model="formData.identityId" placeholder="请输入身份证号" />
      </div>
    </div>
    <div class="edititem">
      <span>手机号:</span>
      <div>
        <el-input v-model="formData.phone" placeholder="请输入手机号" />
      </div>
    </div>
    <div class="edititem">
      <span>房间类型:</span>
      <div>
        <el-select v-model="formData.roomTypeId" size="small">
          <el-option v-for="item in roomTypeList" :key="item.roomTypeId" :label="item.roomTypeName"
            :value="item.roomTypeId" placeholder="请选择房间类型" />
        </el-select>
      </div>]
    </div>
    <div class="edititem">
      <span>房间:</span>
      <div>
        <el-select v-model="formData.roomId" size="small">
          <el-option v-for="item in roomList" :key="item.roomId" :label="item.roomName" :value="item.roomId"
            placeholder="请选择房间" />
        </el-select>
      </div>
    </div>
    <div class="edititem">
      <span>入住日期:</span>
      <div>
        <el-date-picker size="small" v-model="formData.resideDate" type="datetime" placeholder="请选择入住日期" />
      </div>
    </div>
    <div class="edititem">
      <span>押金:</span>
      <div>
        <el-input v-model.number="formData.resideDate" placeholder="请输入押金" />
      </div>
    </div>
    <div class="edititem">
      <span>入住人数:</span>
      <div>
        <el-input v-model.number="formData.guestNum" placeholder="请输入入住人数" />
      </div>
    </div>
    <div class="edititem">
      <span></span>
      <div>
        <el-button size="small" type="primary" @click="editForm">{{ isAdd ? '添加' : '修改' }}</el-button>
        <el-button size="small" type="default" @click="clearFormData">取消</el-button>
      </div>
    </div>
  </el-drawer>

  <el-dialog v-model="dialogVisible" title="房间照片" width="60%">
    <el-upload v-model:file-list="fileList" :action="room_upload_url" list-type="picture-card" :file-list="imgList"
      :limit="9" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload">
      <el-icon>
        <Plus />
      </el-icon>
    </el-upload>
    <el-dialog v-model="dialogVisible2" width="50%">
      <img style="width:100%" :src="dialogImageUrl" alt="Preview Image" />
    </el-dialog>
  </el-dialog>
</template>
<script>
import { list, add, update, del, checkout } from '../../api/guest'
import { reactive, toRefs, watch, nextTick } from 'vue'
//导入操作房间类型的API
import { list as roomTypeList } from '../../api/roomType'
//房间状态API
import { list as resideStateList } from '../../api/resideState'
import { list as roomList } from '../../api/room'
import { $msg_e } from '../../utils/msg'

export default {
  name: 'Guest',

  setup() {
    let data = reactive({
      //表格数据
      tableData: [],
      guestName: '',
      resideStateId: 0,
      //页码
      pageIndex: 1,
      //每页条数
      pageSize: 3,
      total: 5,
      resideStateList: [],
      //房间类型数组
      roomTypeList: [],
      //房间数组
      roomList: [],
      //是否打开抽屉
      openDrawer: false,
      //是否是添加操作
      isAdd: true,
      //表单数据
      formData: {
        guestId: 0,
        identityId: '',
        guestName: '',
        phone: '',
        roomTypeId: 0,
        roomId: '请选择房间',
        resideDate: '',
        deposit: '',
        guestNum: ''
      }
    })
    data.tableData = [
      { 'guestId': '1', 'guestName': '迪丽热巴', 'identitiId': '12345678901234567', 'photo': '12345678999', 'roomId': '102', "room": "{'roomType':'{'roomTypeName':'标准间'}'}", 'resideDate': '2023-10-12', 'leaveDate': '2023-10-24', 'deposit': '20000', 'totalMoney': '5000', 'resideState': "{'resideStateId':'2','resideStateName':'已结账'}" },
      { 'guestId': '2', 'guestName': '小清', 'identitiId': '12345678901234567', 'photo': '12345678999', 'roomId': '102', "room": "{'roomType':'{'roomTypeName':'标准间'}'}", 'resideDate': '2023-10-22', 'leaveDate': '2023-10-24', 'deposit': '23000', 'totalMoney': '5300', 'resideState': "{'resideStateId':'2','resideStateName':'已结账'}" },
      { 'guestId': '3', 'guestName': '小凤', 'identitiId': '12345678901234567', 'photo': '12345678999', 'roomId': '102', 'room': "{'roomType':'{'roomTypeName':'标准间'}'}", 'resideDate': '2023-10-22', 'leaveDate': '2023-10-24', 'deposit': '23000', 'totalMoney': '5300', 'resideState': "{'resideStateId':'2','resideStateName':'已结账'}" }

    ]

    //监听roomTypeId的值有没有发生变化
    watch(() => data.formData.roomTypeId, (val) => {
      //清空
      data.formData.roomId = '请选择房间'
      if (val > 0) {
        //加载房间
        loadRoomList(val)
      } else {
        data.roomList = []
      }

    })

    //加载房间的方法
    let loadRoomList = async (roomTypeId) => {
      let { data: ret } = await roomList({ roomTypeId, roomStateId: 1, pageSize: 100, guestId: data.formData.guestId })
      ret.unshift({ roomId: '请选择房间' })
      data.roomList = ret
    }
    //加载房间类型的方法
    let loadRoomTypeList = async () => {
      let ret = await roomTypeList()
      ret.unshift({ roomTypeId: 0, roomTypeName: '请选择输入房间类型' })
      data.roomTypeList = ret
    }
    //调用查询房间类型的方法
    loadRoomTypeList()

    //加载结账状态
    let loadResideStateList = async () => {
      let ret = await resideStateList()
      ret.unshift({ resideStateId: 0, resideStateName: '请选择结账状态' })
      data.resideStateList = ret
    }
    //调用结账状态的方法
    loadResideStateList()

    //加载数据表方法
    let loadTable = async () => {
      let params = {
        pageIndex: data.pageIndex,
        pageSize: data.pageSize,
        guestName: data.guestName,
        residesStateId: data.resideStateId
      }
      //获取查询结果
      // let {data:guestData,count} = await list(params)
      // data.tableData = guestData
      //  data.total = count
    }
    //执行加载表格数据的方法
    loadTable()

    //监听当前页码是否发生变化
    watch(() => data.pageIndex, () => {
      //执行加载表格数据的方法
      loadTable()
    })

    //编辑表单
    let editForm = async () => {
      let r = false
      //判断是执行添加还是修改
      if (data.isAdd) {
        r = await add(data.formData)
        if (r) {
          clearFormData()
        }
      } else {
        r = await update(data.formData)
      }
      if (r) {
        loadTable();
      }
    }
    //关闭抽屉
    let drawerClose = () => {
      data.openDrawer = false
      add.isAdd = true
      clearFormData()
    }
    //执行修改
    let handleEdit = (row) => {
      //当前客房信息
      data.formData = { ...row }
      // 给表单数据添加客房类型编号
      data.formData.roomTypeId = row.room.roomTypeId
      //DOM更新完毕后，执行
      nextTick(() => {
        data.formData.roomId = row.room.roomId

      })

      data.isAdd = false
      data.openDrawer = true
    }


    //执行删除
    let handleDelete = async (row) => {
      //获取房间编号
      let { guestId } = row
      let r = await del({ guestId })
      //删除成功，刷新页面
      if (r) {
        loadTable
      }

    }

    //清空表单数据
    let clearFormData = () => {
      data.formData = {
        guestId: 0,
        identityId: '',
        guestName: '',
        phone: '',
        roomTypeId: 0,
        roomId: '请选择房间',
        resideDate: '',
        deposit: '',
        guestNum: ''
      }
    }



    //加载房间状态
    let loadRoomStateList = async () => {
      let ret = await roomStateList()
      ret.unshift({ roomStateId: 0, roomStateName: '请选择房间状态' })
      data.roomStateList = ret
    }

    //结账
    let handleCheckout = async (row) => {
      let { guestId } = row
      if (new Date(resideDate) < Date.now()) {
        let totalMoney = await checkout(guestId)
        loadTable()
      } else {
        $msg_e('未到结账时间')
      }


    }
    watch(() => data.dialogVisible, (val) => {
      //监听到关闭对话框
      if (!val) {
        data.imgList = []
      }
    })



    return {
      ...toRefs(data),
      loadTable,
      editForm,
      drawerClose,
      handleEdit,
      handleDelete,
      clearFormData,

    }
  }
}
</script>
<style scoped lang="scss"></style>