修改台账管理

src/views/ledger/ledger copy.vue

@@ -0,0 +1,907 @@
+<template>
+  <div class="content-box">
+    <div class="left">
+      <!-- <el-icon :size="23" class="camera"><VideoCameraFilled /></el-icon> -->
+      <span class="cameratxt">台账管理</span>
+    </div>
+    <div>
+      <div class="middle">
+        <div class="filter">
+          <div class="condition">
+            <span>关键字 : </span>
+            <el-input :clearable="true" @clear="searchBtn" v-model="searchInput.keyWord" class="w-50 m-2"
+              placeholder="请输入订单、预定人、手机号" style="width: 250px" />
+          </div>
+          <div class="condition">
+            <span>支付时间 : </span>
+            <el-date-picker v-model="searchInput.createTime" type="daterange" range-separator="-" start-placeholder="起始时间"
+              end-placeholder="结束时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD" :prefix-icon="Calendar"
+              placeholder="请选择日期" />
+          </div>
+
+          <el-button style="margin-left: 20px" color="rgba(9, 101, 98, 1)" type="primary" class="search"
+            @click="searchBtn"><el-icon>
+              <Search />
+            </el-icon> <span>查询</span></el-button>
+          <el-button style="margin-left: 20px" color="rgba(9, 101, 98, 1)" type="primary" class="search"
+            @click="importExcel"><span>导出订单</span></el-button>
+        </div>
+      </div>
+      <div class="footer" v-loading="loading">
+        <el-table :row-class-name="tableRowClassName" :data="tableData.list" @selection-change="handleSelectionChange"
+          style="width: 100%" :header-cell-style="{
+            background: 'rgba(240, 243, 247, 1)',
+            height: '50px',
+            border: 0,
+          }">
+          <!-- <el-table-column align="center" type="selection" width="80" /> -->
+          <!-- <el-table-column
+              width="150"
+              align="center "
+              type="index"
+              label="序号"
+            /> -->
+          <el-table-column align="center" prop="orderNum" label="已消费订单号" />
+
+          <el-table-column align="center" prop="userName" label="预订人" />
+          <el-table-column align="center" prop="userPhone" label="手机号码" />
+          <el-table-column align="center" prop="houseOrderNumber" label="房间数(间)" />
+          <el-table-column align="center" prop="payAccount" label="订单金额(元)" />
+
+          <el-table-column align="center" prop="payTime" label="支付时间" />
+
+          <!-- <el-table-column
+            align="center"
+            fixed="right"
+            label="操作"
+            width="150"
+          >
+            <template #default="scope">
+              <div class="edit">
+                <div class="look" @click="edit(scope.row)">编辑</div>
+                <el-popconfirm
+                  width="220"
+                  confirm-button-text="确认"
+                  cancel-button-text="取消"
+                  :icon="InfoFilled"
+                  icon-color="#f89626"
+                  title="是否删除此员工?"
+                  @confirm="del(scope.row)"
+                  @cancel="cancelEvent"
+                >
+                  <template #reference>
+                    <div class="look">删除</div>
+                  </template>
+                </el-popconfirm>
+              </div>
+            </template>
+          </el-table-column> -->
+        </el-table>
+      </div>
+
+      <!-- 分页组件 -->
+      <div class="pageSize">
+        <span></span>
+        <el-pagination background :current-page="currentPage" :page-size="pageSize"
+          layout="total, prev, pager, next, jumper, slot" :total="total" @update:current-page="handleCurrentChange" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {
+  ref,
+  reactive,
+  nextTick,
+  watch,
+  onBeforeMount,
+  onUnmounted,
+} from "vue";
+import { useRouter } from "vue-router";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { Calendar } from "@element-plus/icons-vue";
+import vidiconsApi from "@/api/vidicons.js";
+import { dayjs } from "element-plus";
+import lodash from "lodash";
+import axios from "axios";
+import { useStore } from "vuex";
+const store = useStore();
+const api = ref("");
+const router = useRouter();
+// 表格数据
+const loading = ref(false);
+const tableData = reactive({
+  list: [
+    // {
+    //   userName: "111233342",
+    //   userName2: "张三",
+    //   userPhone: "1121311",
+    //   teamName: 12,
+    //   schoolName: 1200,
+    //   workTypeName: "2023-08-01 12:09:08",
+    // },
+    // {
+    //   userName: "111233342",
+    //   userName2: "张三",
+    //   userPhone: "1121311",
+    //   teamName: 12,
+    //   schoolName: 1200,
+    //   workTypeName: "2023-08-01 12:09:08",
+    // },
+    // {
+    //   userName: "111233342",
+    //   userName2: "张三",
+    //   userPhone: "1121311",
+    //   teamName: 12,
+    //   schoolName: 1200,
+    //   workTypeName: "2023-08-01 12:09:08",
+    // },
+    // {
+    //   userName: "111233342",
+    //   userName2: "张三",
+    //   userPhone: "1121311",
+    //   teamName: 12,
+    //   schoolName: 1200,
+    //   workTypeName: "2023-08-01 12:09:08",
+    // },
+    // {
+    //   userName: "111233342",
+    //   userName2: "张三",
+    //   userPhone: "1121311",
+    //   teamName: 12,
+    //   schoolName: 1200,
+    //   workTypeName: "2023-08-01 12:09:08",
+    // },
+  ],
+});
+
+// 添加员工弹窗数据 (------------------------------------)
+const dialongTitle = ref("添加员工"); // 弹窗标题
+
+const checkAll = ref(false); // 判断物品种类是否全选
+const articleIdsList = ref(); //  关联报修类型数据
+const isIndeterminate = ref(false); // 不确定状态，表示只选择一部分
+const checkedCities = ref([]); // 选中的数据
+
+const userzzIdsList = ref(); //  身份下拉数据
+const workTypeList = ref(); //  工种下拉数据
+const props = reactive();
+const treeValue = reactive({}); // 关联楼栋树形结构数据
+
+const searchInput = reactive({
+  keyWord: "",
+  teamId: "",
+  schoolId: "",
+  createTime: "",
+}); // 搜索按钮数据
+
+const currentPage = ref(1); // 当前页
+const pageSize = ref(10);
+const total = ref(); // 当前总数
+const selectData = reactive({ list: [] }); // 多选框选择的数据
+
+const addDialogVisible = ref(false); // 控制添加员工弹窗
+
+// 添加员工表单数据
+const formSize = ref("default");
+const ruleFormRef = ref();
+const articleIdsRef = ref(); // 关联报修类型ref
+const buildIdsRef = ref(); // 关联楼栋ref
+const ruleForm = reactive({
+  userName: "",
+  cardNumber: "",
+  userzzId: "",
+  userPhone: "",
+  schoolId: "",
+  workType: "",
+  articleIds: [],
+  buildIds: [],
+  teamId: "",
+  acceptanceTime: "",
+  maintenanceTime: "",
+  id: "",
+});
+// 表单验证
+const rules = reactive({
+  // serial: [{ required: true, message: "序列号不能为空", trigger: "blur" }],
+  userName: [{ required: true, message: "姓名不能为空", trigger: "blur" }],
+  cardNumber: [
+    { required: true, message: "微校卡号不能为空", trigger: "blur" },
+  ],
+  userzzId: [{ required: true, message: "身份不能为空", trigger: "blur" }],
+  userPhone: [{ required: true, message: "手机号码不能为空", trigger: "blur" }],
+  schoolId: [{ required: true, message: "校区不能为空", trigger: "blur" }],
+  workType: [{ required: true, message: "工种不能为空", trigger: "blur" }],
+  teamId: [{ required: true, message: "维修班不能为空", trigger: "blur" }],
+  articleIds: [
+    { required: true, message: "关联报修类型不能为空", trigger: "blur" },
+  ],
+  buildIds: [{ required: true, message: "关联楼栋不能为空", trigger: "blur" }],
+  acceptanceTime: [
+    { required: true, message: "接单考核时间不能为空", trigger: "blur" },
+  ],
+  maintenanceTime: [
+    { required: true, message: "维修考核时间不能为空", trigger: "blur" },
+  ],
+});
+
+watch(
+  () => searchInput.createTime,
+  (newVal, oldVal) => {
+    console.log("监听时间:", newVal);
+    if (newVal == null) {
+      getList();
+    }
+  }
+);
+
+// 查看员工列表
+const getList = async () => {
+  loading.value = true;
+  let data = {
+    page: currentPage.value,
+    rows: pageSize.value,
+    ledgerParam: searchInput.keyWord, // 关键字查询
+    managerId: sessionStorage.getItem("token"),
+  };
+  if (searchInput.createTime) {
+    data.payStartTime = searchInput.createTime[0];
+    data.payEndTime = searchInput.createTime[1];
+  }
+  let res = await axios({
+    method: "post",
+    url: api.value + "/mhotel/bookquearyLedgerPage.action",
+    headers: {
+      // token: sessionStorage.getItem("token"),
+      // user_head: sessionStorage.getItem("userhead"),
+    },
+    params: data,
+  });
+  console.log(res, "台账数据");
+  if (res.data.code == 200) {
+    tableData.list = res.data.data.bookIPage.pageList;
+    total.value = res.data.data.bookIPage.total;
+    loading.value = false;
+    // ElMessage({
+    //   type: "success",
+    //   showClose: true,
+    //   message: res.data.message,
+    //   center: true,
+    // });
+  } else {
+    loading.value = false;
+    ElMessage({
+      type: "error",
+      showClose: true,
+      message: res.data.message,
+      center: true,
+    });
+  }
+};
+
+// 搜索功能
+const searchBtn = lodash.debounce(async () => {
+  getList();
+}, 300);
+
+// 改变校区  关联楼栋和关联报修类型也改变(---------------)
+const changeSchool = async (val) => {
+  if (val == 1) {
+    ruleForm.schoolId = 1;
+  } else {
+    ruleForm.schoolId = 2;
+  }
+  //  报修（故障类型）类型关联 (接口-------)
+  let data = {
+    schoolId: val,
+  };
+  let resss = await axios({
+    method: "get",
+    url: api.value + "/repairArticleType/queryRepairArticleType",
+    headers: {
+      token: sessionStorage.getItem("token"),
+      user_head: sessionStorage.getItem("userhead"),
+    },
+    params: data,
+  });
+  console.log(resss, "报修（故障类型）类型关联数据");
+  articleIdsList.value = resss.data.data;
+  // 关联楼栋数据 （接口---------）
+  let datas = { schoolId: val };
+  let res = await axios({
+    method: "get",
+    url: api.value + "/repairArea/queryRepairAreaSecond",
+    headers: {
+      token: sessionStorage.getItem("token"),
+      user_head: sessionStorage.getItem("userhead"),
+    },
+    params: datas,
+  });
+  console.log(res, "关联楼栋数据");
+  treeValue.list = res.data.data;
+};
+
+//新增员工 （--------------------------------------）
+const addlist = async () => {
+  dialongTitle.value = "添加员工";
+  changeSchool(1);
+  addDialogVisible.value = true;
+  ruleForm.userName = "";
+  ruleForm.cardNumber = "";
+  ruleForm.userzzId = "";
+  ruleForm.userPhone = "";
+  ruleForm.workType = "";
+  ruleForm.articleIds = [];
+  ruleForm.buildIds = [];
+  ruleForm.teamId = "";
+  ruleForm.acceptanceTime = "";
+  ruleForm.maintenanceTime = "";
+  ruleForm.id = "";
+};
+// 种类是否全选按钮
+// const handleCheckAllChange = (val) => {
+//   console.log(val);
+//   console.log(articleIdsList.value);
+//   let checkedCitie = [];
+//   articleIdsList.value.forEach((item) => {
+//     checkedCitie.push(item.name);
+//   });
+//   checkedCities.value = val ? checkedCitie : [];
+//   isIndeterminate.value = false;
+// };
+// //单独勾选种类
+// const handleCheckedCitiesChange = (value) => {
+//   console.log(value);
+//   const checkedCount = value.length;
+//   checkAll.value = checkedCount === articleIdsList.value.length;
+//   isIndeterminate.value =
+//     checkedCount > 0 && checkedCount < articleIdsList.value.length;
+// };
+
+// 关联报修类型  当复选框被点击的时候触发
+const handleArticleIds = (data, checked, indeterminate) => {
+  console.log(data, checked, indeterminate);
+  // let keys = articleIdsRef.value.getCheckedNodes();
+  let keys = articleIdsRef.value.getCheckedKeys();
+  // console.log(keys);
+  // let arr = [];
+  // keys.forEach((item) => {
+  //   if (item.parentId != 1) {
+  //     arr.push(item.id);
+  //   }
+  // });
+  ruleForm.articleIds = keys;
+};
+//  关联楼栋 当复选框被点击的时候触发
+const handleCheckChange = (data, checked, indeterminate) => {
+  // console.log(data, checked);
+  let keys = buildIdsRef.value.getCheckedNodes();
+  let arr = [];
+  keys.forEach((item) => {
+    if (item.parentId != 1) {
+      arr.push(item.id);
+    }
+  });
+  ruleForm.buildIds = arr;
+};
+
+//编辑按钮  （-------------------------------------------）
+const edit = (row) => {
+  changeSchool(row.schoolId);
+  // console.log(row.articleIds, row.buildIds);
+  dialongTitle.value = "编辑员工";
+  addDialogVisible.value = true;
+  ruleForm.userName = row.userName;
+  ruleForm.cardNumber = row.cardNumber;
+  ruleForm.userzzId = row.userZzid;
+  ruleForm.userPhone = row.userPhone;
+  ruleForm.schoolId = row.schoolId;
+  ruleForm.workType = row.workType;
+  ruleForm.teamId = row.teamId;
+  ruleForm.acceptanceTime = row.acceptanceTime;
+  ruleForm.maintenanceTime = row.maintenanceTime;
+  ruleForm.id = row.id;
+  nextTick(() => {
+    articleIdsRef.value.setCheckedKeys(row.articleIds);
+    buildIdsRef.value.setCheckedKeys(row.buildIds);
+  });
+  ruleForm.articleIds = row.articleIds;
+  ruleForm.buildIds = row.buildIds;
+};
+// 取消添加员工
+const cancelAdd = () => {
+  addDialogVisible.value = false;
+  ruleFormRef.value.resetFields();
+};
+// 确认添加员工
+const submitAdd = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate(async (valid, fields) => {
+    if (valid) {
+      if (dialongTitle.value == "添加员工") {
+        let data = {
+          userName: ruleForm.userName,
+          cardNumber: ruleForm.cardNumber,
+          userzzId: ruleForm.userzzId,
+          userPhone: ruleForm.userPhone,
+          schoolId: ruleForm.schoolId,
+          workType: ruleForm.workType,
+          articleIds: ruleForm.articleIds,
+          buildIds: ruleForm.buildIds,
+          teamId: ruleForm.teamId,
+          acceptanceAssessTime: ruleForm.acceptanceTime,
+          maintenanceAssessTime: ruleForm.maintenanceTime,
+        };
+        let res = await axios({
+          method: "post",
+          url: api.value + "/repairUser/insertRepairUserSetting",
+          headers: {
+            token: sessionStorage.getItem("token"),
+            user_head: sessionStorage.getItem("userhead"),
+          },
+          data: data,
+        });
+        console.log(res, "添加员工");
+        if (res.data.code == 200) {
+          getList();
+          ElMessage({
+            type: "success",
+            showClose: true,
+            message: res.data.message,
+            center: true,
+          });
+          addDialogVisible.value = false;
+          ruleFormRef.value.resetFields();
+        } else {
+          ElMessage({
+            type: "error",
+            showClose: true,
+            message: res.data.message,
+            center: true,
+          });
+        }
+      } else {
+        let data = {
+          userName: ruleForm.userName,
+          cardNumber: ruleForm.cardNumber,
+          userzzId: ruleForm.userzzId,
+          userPhone: ruleForm.userPhone,
+          schoolId: ruleForm.schoolId,
+          workType: ruleForm.workType,
+          articleIds: ruleForm.articleIds,
+          buildIds: ruleForm.buildIds,
+          teamId: ruleForm.teamId,
+          acceptanceAssessTime: ruleForm.acceptanceTime,
+          maintenanceAssessTime: ruleForm.maintenanceTime,
+          id: ruleForm.id,
+        };
+        let res = await axios({
+          method: "post",
+          url: api.value + "/repairUser/updateRepairUserSettingById",
+          headers: {
+            token: sessionStorage.getItem("token"),
+            user_head: sessionStorage.getItem("userhead"),
+          },
+          data: data,
+        });
+        console.log(res, "编辑员工");
+        if (res.data.code == 200) {
+          getList();
+          ElMessage({
+            type: "success",
+            showClose: true,
+            message: res.data.message,
+            center: true,
+          });
+          addDialogVisible.value = false;
+          ruleFormRef.value.resetFields();
+        } else {
+          ElMessage({
+            type: "error",
+            showClose: true,
+            message: res.data.message,
+            center: true,
+          });
+        }
+      }
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+
+//删除按钮
+const del = async (row) => {
+  let data = {
+    id: row.id,
+  };
+  let res = await axios({
+    method: "get",
+    url: api.value + "/repairUser/deleteRepairUserSettingById",
+    headers: {
+      token: sessionStorage.getItem("token"),
+      user_head: sessionStorage.getItem("userhead"),
+    },
+    params: data,
+  });
+  if (res.data.code == 200) {
+    if (tableData.list.length == 1 && currentPage.value != 1) {
+      currentPage.value = currentPage.value - 1;
+    }
+    getList();
+    ElMessage({
+      type: "success",
+      showClose: true,
+      message: res.data.message,
+      center: true,
+    });
+  } else {
+    ElMessage({
+      type: "error",
+      showClose: true,
+      message: res.data.message,
+      center: true,
+    });
+  }
+  console.log(res);
+};
+
+// 多选框功能
+const handleSelectionChange = (val) => {
+  console.log(val);
+  selectData.list = val;
+};
+//导出功能
+const importExcel = lodash.debounce(async () => {
+  let data = {
+    ledgerParam: searchInput.keyWord, // 关键字查询
+    managerId: sessionStorage.getItem("token"),
+  };
+  if (searchInput.createTime) {
+    data.payStartTime = searchInput.createTime[0];
+    data.payEndTime = searchInput.createTime[1];
+  }
+  let res = await axios({
+    method: "post",
+    url: api.value + "/mhotel/booktoLedgerExcel.action",
+    headers: {
+      // token: sessionStorage.getItem("token"),
+    },
+    params: data,
+  });
+  console.log(res, "导出台账管理");
+  if (res.data.code == 200) {
+    var downloadPath = res.data.downurl;
+    // window.open(downloadPath);
+    window.location.href = downloadPath;
+    var downloadLink = document.createElement("a");
+    downloadLink.style.display = "none"; // 使其隐藏
+    downloadLink.href = downloadPath;
+    downloadLink.download = "";
+    downloadLink.click();
+    document.body.appendChild(downloadLink);
+    document.body.removeChild(downloadLink);
+    ElMessage({
+      type: "success",
+      showClose: true,
+      message: res.data.message,
+      center: true,
+    });
+  } else {
+    ElMessage({
+      type: "error",
+      showClose: true,
+      message: res.data.message,
+      center: true,
+    });
+  }
+}, 1000);
+
+// 表格斑马纹颜色修改
+const tableRowClassName = ({ row, rowIndex }) => {
+  if (rowIndex % 2 === 0) {
+    return "even";
+  } else if (rowIndex % 2 !== 0) {
+    return "odd";
+  }
+  return "";
+};
+// 分页
+const handleCurrentChange = (value) => {
+  // console.log(value);
+  currentPage.value = value;
+  getList();
+};
+
+onBeforeMount(async () => {
+  api.value = store.state.user.api;
+  getList();
+});
+onUnmounted(() => {
+  // document.removeEventListener("keyup", Enters);
+});
+</script>
+
+<style scoped lang="scss">
+.content-box {
+  width: 97.5%;
+  height: 89%;
+  margin: 20px auto;
+  background-color: #fff;
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0px 3px 10px rgba(0, 97, 255, 0.2);
+
+  .left {
+    // width: calc(100wh - 40px);
+    display: flex;
+    align-items: center;
+    height: 60px;
+    margin: 0 30px;
+    border-bottom: 1px solid #ccc;
+    color: rgb(0, 0, 0);
+    font-size: 18px;
+    font-weight: 600;
+
+    span {
+      margin-right: 20px;
+      cursor: pointer;
+    }
+
+    .is_active {
+      color: rgba(111, 182, 184, 1);
+    }
+  }
+
+  .middle {
+    width: 96%;
+    margin: 0 auto;
+
+    color: #000;
+
+    // border-bottom: 1px solid rgb(231, 231, 231);
+    .filter {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      margin: 15px 0 15px 0;
+
+      .search {
+        color: #fff;
+      }
+
+      .condition {
+        display: flex;
+        align-items: center;
+        margin: 10px 30px 10px 0;
+
+        :deep(.el-input .el-input__inner) {
+          font-size: 14px;
+        }
+
+        span {
+          margin: 0 10px 0 0;
+        }
+      }
+    }
+
+    .gongneng {
+      margin: 10px 0 20px 0;
+
+      span {
+        color: #fff;
+      }
+    }
+
+    :deep(.cont) {
+      width: 60%;
+      margin: 20px auto;
+    }
+
+    :deep(.download) {
+      display: flex;
+      align-items: center;
+      margin: 10px;
+    }
+
+    :deep(.download span) {
+      font-size: 16px;
+      margin-left: 20px;
+    }
+
+    :deep(.cont .el-button) {
+      margin-left: 60px;
+      margin-bottom: 30px;
+    }
+
+    :deep(.cont .accomplish) {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+    }
+
+    :deep(.cont .accomplish .el-button) {
+      width: 50%;
+      margin: 0;
+    }
+  }
+
+  .footer {
+    width: 96%;
+    height: 550px;
+    margin: 10px auto 30px;
+
+    .el-table--fit {
+      height: 100%;
+
+      :deep(.el-table__header-wrapper) {
+        background-color: #000;
+        font-size: 15px;
+
+        tr {
+          color: #000;
+        }
+      }
+
+      :deep(.el-table__row) {
+        height: 50px;
+        font-size: 15px;
+        color: #000;
+      }
+
+      :deep(.el-table__row):nth-child(2n) {
+        .el-table-fixed-column--right {
+          background-color: rgba(240, 243, 247, 1);
+        }
+      }
+
+      :deep(.el-table__row td) {
+        padding: 0;
+        border: 0;
+      }
+
+      .el-button--primary {
+        margin-left: 5px;
+      }
+
+      :deep(.el-table__body .even) {
+        background-color: #fff;
+      }
+
+      :deep(.el-table__body .odd) {
+        background-color: rgba(240, 243, 247, 1);
+      }
+
+      :deep(.edit) {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: rgba(111, 182, 184, 1);
+      }
+
+      :deep(.look) {
+        padding: 0 10px;
+        cursor: pointer;
+      }
+
+      :deep(.look):hover {
+        color: red;
+      }
+    }
+
+    // 添加员工弹窗样式
+    :deep(.addStaff) {
+      //   height: 420px;
+      border-radius: 11px;
+
+      .el-dialog__header {
+        border-radius: 11px 11px 0 0;
+        background: rgba(237, 241, 245, 1);
+        font-weight: 600;
+        margin: 0;
+
+        .el-dialog__headerbtn {
+          outline: none;
+        }
+      }
+
+      .el-dialog__body {
+        padding: 30px 20px 10px 20px;
+
+        .el-input {
+          width: 200px;
+        }
+
+        // 关联报修类型样式（-----------------）
+        // .checkbox {
+        //   .el-form-item__content {
+        //     display: flex;
+        //     flex-direction: column;
+        //     align-items: flex-start;
+        //     .el-checkbox-group {
+        //       display: flex;
+        //       flex-direction: column;
+        //     }
+        //   }
+        // }
+
+        .options {
+          .el-form-item__content {
+            .queding {
+              margin-left: 20px;
+              color: #fff;
+            }
+
+            display: flex;
+            flex-direction: row-reverse;
+          }
+        }
+      }
+    }
+  }
+
+  .pageSize {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 0 30px;
+
+    span {
+      color: #000;
+    }
+
+    .el-pagination {
+
+      // width: 1600px;
+      :deep(.el-pagination__total) {
+        color: #000;
+      }
+
+      :deep(.el-pagination__goto) {
+        color: #000;
+      }
+
+      :deep(.el-pagination__classifier) {
+        color: #000;
+      }
+
+      :deep(.el-input__wrapper) {
+        border: 1px solid rgba(0, 0, 0, 1);
+        border-radius: 5px;
+        box-shadow: none;
+      }
+
+      :deep(.el-pager li) {
+        margin: 0 5px;
+        border: 1px solid rgba(0, 0, 0, 1);
+        border-radius: 5px;
+        background-color: transparent;
+      }
+
+      :deep(.el-pager li.is-active) {
+        background-color: rgba(111, 182, 184, 1);
+      }
+
+      :deep(.btn-prev) {
+        margin-right: 5px;
+        border: 1px solid rgba(0, 0, 0, 1);
+        border-radius: 5px;
+        background-color: transparent;
+      }
+
+      :deep(.btn-next) {
+        margin-left: 5px;
+        border: 1px solid rgba(0, 0, 0, 1);
+        border-radius: 5px;
+        background-color: transparent;
+      }
+    }
+  }
+}
+
+.el-input {
+  width: 192px;
+}
+</style>

src/views/ledger/ledger.vue

@@ -5,85 +5,236 @@
       <span class="cameratxt">台账管理</span>
     </div>
     <div>
+      <div class="top">
+        <ul>
+          <li>
+            <p>{{ pendingOrderSum }}</p>
+            <span>订单总额（元）</span>
+          </li>
+          <li>
+            <p>{{ orderSum }}</p>
+            <span>支付总额（元）</span>
+          </li>
+          <li>
+            <p>{{ consumerOrderSum }}</p>
+            <span>退款总额（元）</span>
+          </li>
+          <li>
+            <p>{{ sumAccount }}</p>
+            <span>入账总额（元）</span>
+          </li>
+        </ul>
+      </div>
       <div class="middle">
         <div class="filter">
           <div class="condition">
             <span>关键字 : </span>
-            <el-input :clearable="true" @clear="searchBtn" v-model="searchInput.keyWord" class="w-50 m-2"
-              placeholder="请输入订单、预定人、手机号" style="width: 250px" />
+            <el-input
+              :clearable="true"
+              @clear="searchBtn"
+              v-model="searchInput.keyWord"
+              class="w-50 m-2"
+              placeholder="请输入订单、预定人、手机号"
+              style="width: 220px"
+            />
           </div>
           <div class="condition">
             <span>支付时间 : </span>
-            <el-date-picker v-model="searchInput.createTime" type="daterange" range-separator="-" start-placeholder="起始时间"
-              end-placeholder="结束时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD" :prefix-icon="Calendar"
-              placeholder="请选择日期" />
+            <el-date-picker
+              v-model="searchInput.createTime"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="起始时间"
+              end-placeholder="结束时间"
+              format="YYYY-MM-DD"
+              value-format="YYYY-MM-DD"
+              :prefix-icon="Calendar"
+              placeholder="请选择日期"
+              style="width: 230px"
+            />
+          </div>
+          <div class="condition">
+            <span>退房时间 : </span>
+            <el-date-picker
+              v-model="searchInput.checkOutTime"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="起始时间"
+              end-placeholder="结束时间"
+              format="YYYY-MM-DD"
+              value-format="YYYY-MM-DD"
+              :prefix-icon="Calendar"
+              placeholder="请选择日期"
+              style="width: 230px"
+            />
+          </div>
+          <div class="condition">
+            <span>清账状态 : </span>
+            <el-select
+              :clearable="false"
+              v-model="searchInput.status"
+              class="m-2"
+              placeholder="请选择清账状态"
+              style="width: 200px"
+            >
+              <el-option label="全部" :value="2" />
+              <el-option label="未清账" :value="0" />
+              <el-option label="已清账" :value="1" />
+            </el-select>
           </div>
 
-          <el-button style="margin-left: 20px" color="rgba(9, 101, 98, 1)" type="primary" class="search"
-            @click="searchBtn"><el-icon>
+          <el-button
+            style="margin-left: 20px"
+            color="rgba(9, 101, 98, 1)"
+            type="primary"
+            class="search"
+            @click="searchBtn"
+            ><el-icon>
               <Search />
-            </el-icon> <span>查询</span></el-button>
-          <el-button style="margin-left: 20px" color="rgba(9, 101, 98, 1)" type="primary" class="search"
-            @click="importExcel"><span>导出订单</span></el-button>
+            </el-icon>
+            <span>查询</span></el-button
+          >
+          <el-button
+            style="margin-left: 20px"
+            color="rgba(9, 101, 98, 1)"
+            type="primary"
+            class="search"
+            @click="importExcel"
+            ><span>导出订单</span></el-button
+          >
         </div>
       </div>
       <div class="footer" v-loading="loading">
-        <el-table :row-class-name="tableRowClassName" :data="tableData.list" @selection-change="handleSelectionChange"
-          style="width: 100%" :header-cell-style="{
+        <!-- <el-table
+          :row-class-name="tableRowClassName"
+          :data="tableData.list"
+          style="width: 100%"
+          :header-cell-style="{
             background: 'rgba(240, 243, 247, 1)',
             height: '50px',
             border: 0,
-          }">
-          <!-- <el-table-column align="center" type="selection" width="80" /> -->
-          <!-- <el-table-column
-              width="150"
-              align="center "
-              type="index"
-              label="序号"
-            /> -->
-          <el-table-column align="center" prop="orderNum" label="已消费订单号" />
-
+          }"
+        >
+          <el-table-column
+            align="center"
+            prop="orderNum"
+            label="已消费订单号"
+          />
           <el-table-column align="center" prop="userName" label="预订人" />
           <el-table-column align="center" prop="userPhone" label="手机号码" />
-          <el-table-column align="center" prop="houseOrderNumber" label="房间数(间)" />
-          <el-table-column align="center" prop="payAccount" label="订单金额(元)" />
-
+          <el-table-column
+            align="center"
+            prop="houseOrderNumber"
+            label="房间数(间)"
+          />
+          <el-table-column
+            align="center"
+            prop="payAccount"
+            label="订单金额(元)"
+          />
           <el-table-column align="center" prop="payTime" label="支付时间" />
-
-          <!-- <el-table-column
+        </el-table> -->
+        <el-table
+          :row-class-name="tableRowClassName"
+          :data="tableData.list"
+          style="width: 100%"
+          :header-cell-style="{
+            background: 'rgba(240, 243, 247, 1)',
+            height: '50px',
+            border: 0,
+          }"
+        >
+          <el-table-column align="center" prop="createTime" label="交易时间" />
+          <el-table-column
+            align="center"
+            width="180"
+            prop="orderNum"
+            label="订单号"
+          />
+          <el-table-column
+            align="center"
+            width="60"
+            prop="userName"
+            label="预订人"
+          />
+          <el-table-column
             align="center"
-            fixed="right"
-            label="操作"
-            width="150"
+            width="120"
+            prop="userPhone"
+            label="手机号码"
+          />
+          <el-table-column
+            align="center"
+            width="100"
+            prop="orderAccount"
+            label="订单金额(元)"
+          />
+          <el-table-column
+            align="center"
+            width="100"
+            prop="payAccount"
+            label="支付金额(元)"
+          />
+          <el-table-column
+            align="center"
+            width="100"
+            prop="refundAmount"
+            label="退款金额(元)"
+          />
+          <el-table-column
+            align="center"
+            width="100"
+            prop="inAccount"
+            label="入账金额(元)"
+          />
+          <el-table-column align="center" prop="payTime" label="支付时间" />
+          <el-table-column
+            align="center"
+            prop="checkOutTime"
+            label="退房时间"
+          />
+          <el-table-column
+            align="center"
+            width="100"
+            prop="saccountState"
+            label="清账状态"
           >
-            <template #default="scope">
-              <div class="edit">
-                <div class="look" @click="edit(scope.row)">编辑</div>
-                <el-popconfirm
-                  width="220"
-                  confirm-button-text="确认"
-                  cancel-button-text="取消"
-                  :icon="InfoFilled"
-                  icon-color="#f89626"
-                  title="是否删除此员工?"
-                  @confirm="del(scope.row)"
-                  @cancel="cancelEvent"
-                >
-                  <template #reference>
-                    <div class="look">删除</div>
-                  </template>
-                </el-popconfirm>
+            <template #default="{ row }">
+              <div
+                class="saccountState"
+                v-if="row.saccountState == 1"
+                style="color: #000"
+              >
+                已清账
+              </div>
+              <div
+                class="saccountState"
+                v-if="row.saccountState == 0"
+                style="color: rgba(212, 48, 48, 1)"
+              >
+                未清账
               </div>
             </template>
-          </el-table-column> -->
+          </el-table-column>
+          <el-table-column
+            align="center"
+            prop="saccountTime"
+            label="清账时间"
+          />
         </el-table>
       </div>
 
       <!-- 分页组件 -->
       <div class="pageSize">
         <span></span>
-        <el-pagination background :current-page="currentPage" :page-size="pageSize"
-          layout="total, prev, pager, next, jumper, slot" :total="total" @update:current-page="handleCurrentChange" />
+        <el-pagination
+          background
+          :current-page="currentPage"
+          :page-size="pageSize"
+          layout="total, prev, pager, next, jumper, slot"
+          :total="total"
+          @update:current-page="handleCurrentChange"
+        />
       </div>
     </div>
   </div>
@@ -156,52 +307,23 @@ const tableData = reactive({
   ],
 });
 
-// 添加员工弹窗数据 (------------------------------------)
-const dialongTitle = ref("添加员工"); // 弹窗标题
-
-const checkAll = ref(false); // 判断物品种类是否全选
-const articleIdsList = ref(); //  关联报修类型数据
-const isIndeterminate = ref(false); // 不确定状态，表示只选择一部分
-const checkedCities = ref([]); // 选中的数据
-
-const userzzIdsList = ref(); //  身份下拉数据
-const workTypeList = ref(); //  工种下拉数据
-const props = reactive();
-const treeValue = reactive({}); // 关联楼栋树形结构数据
-
 const searchInput = reactive({
   keyWord: "",
   teamId: "",
   schoolId: "",
   createTime: "",
+  status: 2,
+  checkOutTime: "",
 }); // 搜索按钮数据
 
 const currentPage = ref(1); // 当前页
-const pageSize = ref(10);
+const pageSize = ref(7);
 const total = ref(); // 当前总数
 const selectData = reactive({ list: [] }); // 多选框选择的数据
-
-const addDialogVisible = ref(false); // 控制添加员工弹窗
-
-// 添加员工表单数据
-const formSize = ref("default");
-const ruleFormRef = ref();
-const articleIdsRef = ref(); // 关联报修类型ref
-const buildIdsRef = ref(); // 关联楼栋ref
-const ruleForm = reactive({
-  userName: "",
-  cardNumber: "",
-  userzzId: "",
-  userPhone: "",
-  schoolId: "",
-  workType: "",
-  articleIds: [],
-  buildIds: [],
-  teamId: "",
-  acceptanceTime: "",
-  maintenanceTime: "",
-  id: "",
-});
+const pendingOrderSum = ref(); // 订单总额（元）
+const orderSum = ref(); // 支付总额（元）
+const consumerOrderSum = ref(); // 退款总额（元）
+const sumAccount = ref(); // 入账总额（元）
 // 表单验证
 const rules = reactive({
   // serial: [{ required: true, message: "序列号不能为空", trigger: "blur" }],
@@ -229,13 +351,60 @@ const rules = reactive({
 watch(
   () => searchInput.createTime,
   (newVal, oldVal) => {
-    console.log("监听时间:", newVal);
+    console.log("支付时间:", newVal);
+    if (newVal == null) {
+      getList();
+    }
+  }
+);
+watch(
+  () => searchInput.checkOutTime,
+  (newVal, oldVal) => {
+    console.log("退房时间:", newVal);
     if (newVal == null) {
       getList();
     }
   }
 );
+// 头部数据
+const headerData = async () => {
+  let data = new FormData();
+  data.set("ledgerParam", searchInput.keyWord);
+  data.set("managerId", sessionStorage.getItem("token"));
+  data.set("saccountState", searchInput.status);
+  if (searchInput.status == 2) {
+    data.set("saccountState", "");
+  }
+  if (searchInput.createTime) {
+    data.set("payStartTime", searchInput.createTime[0]);
+    data.set("payEndTime", searchInput.createTime[1]);
+  }
+  if (searchInput.checkOutTime) {
+    data.set("leaveStartTime", searchInput.checkOutTime[0]);
+    data.set("leaveEndTime", searchInput.checkOutTime[1]);
+  }
+  let res = await axios({
+    method: "post",
+    url: api.value + "/mhotel/bookqueryLedgerTj.action",
+    headers: {},
+    data: data,
+  });
+  console.log(res, "头部数据");
 
+  if (res.data.code == 200) {
+    pendingOrderSum.value = res.data.orderT.tj;
+    orderSum.value = res.data.payT.tj;
+    consumerOrderSum.value = res.data.refundT.tj;
+    sumAccount.value = res.data.inT.tj;
+  } else {
+    ElMessage({
+      type: "error",
+      showClose: true,
+      message: res.data.message,
+      center: true,
+    });
+  }
+};
 // 查看员工列表
 const getList = async () => {
   loading.value = true;
@@ -244,11 +413,20 @@ const getList = async () => {
     rows: pageSize.value,
     ledgerParam: searchInput.keyWord, // 关键字查询
     managerId: sessionStorage.getItem("token"),
+    saccountState: searchInput.status,
   };
+  if (searchInput.status == 2) {
+    data.saccountState = "";
+  }
   if (searchInput.createTime) {
     data.payStartTime = searchInput.createTime[0];
     data.payEndTime = searchInput.createTime[1];
   }
+  if (searchInput.checkOutTime) {
+    data.leaveStartTime = searchInput.checkOutTime[0];
+    data.leaveEndTime = searchInput.checkOutTime[1];
+  }
+  headerData(); // 调用头部数据
   let res = await axios({
     method: "post",
     url: api.value + "/mhotel/bookquearyLedgerPage.action",
@@ -262,6 +440,11 @@ const getList = async () => {
   if (res.data.code == 200) {
     tableData.list = res.data.data.bookIPage.pageList;
     total.value = res.data.data.bookIPage.total;
+
+    // pendingOrderSum.value = res.data.data.pendingOrderSum;
+    // orderSum.value = res.data.data.orderSum;
+    // consumerOrderSum.value = res.data.data.consumerOrderSum;
+    // sumAccount.value = res.data.data.sumAccount;
     loading.value = false;
     // ElMessage({
     //   type: "success",
@@ -285,268 +468,6 @@ const searchBtn = lodash.debounce(async () => {
   getList();
 }, 300);
 
-// 改变校区  关联楼栋和关联报修类型也改变(---------------)
-const changeSchool = async (val) => {
-  if (val == 1) {
-    ruleForm.schoolId = 1;
-  } else {
-    ruleForm.schoolId = 2;
-  }
-  //  报修（故障类型）类型关联 (接口-------)
-  let data = {
-    schoolId: val,
-  };
-  let resss = await axios({
-    method: "get",
-    url: api.value + "/repairArticleType/queryRepairArticleType",
-    headers: {
-      token: sessionStorage.getItem("token"),
-      user_head: sessionStorage.getItem("userhead"),
-    },
-    params: data,
-  });
-  console.log(resss, "报修（故障类型）类型关联数据");
-  articleIdsList.value = resss.data.data;
-  // 关联楼栋数据 （接口---------）
-  let datas = { schoolId: val };
-  let res = await axios({
-    method: "get",
-    url: api.value + "/repairArea/queryRepairAreaSecond",
-    headers: {
-      token: sessionStorage.getItem("token"),
-      user_head: sessionStorage.getItem("userhead"),
-    },
-    params: datas,
-  });
-  console.log(res, "关联楼栋数据");
-  treeValue.list = res.data.data;
-};
-
-//新增员工 （--------------------------------------）
-const addlist = async () => {
-  dialongTitle.value = "添加员工";
-  changeSchool(1);
-  addDialogVisible.value = true;
-  ruleForm.userName = "";
-  ruleForm.cardNumber = "";
-  ruleForm.userzzId = "";
-  ruleForm.userPhone = "";
-  ruleForm.workType = "";
-  ruleForm.articleIds = [];
-  ruleForm.buildIds = [];
-  ruleForm.teamId = "";
-  ruleForm.acceptanceTime = "";
-  ruleForm.maintenanceTime = "";
-  ruleForm.id = "";
-};
-// 种类是否全选按钮
-// const handleCheckAllChange = (val) => {
-//   console.log(val);
-//   console.log(articleIdsList.value);
-//   let checkedCitie = [];
-//   articleIdsList.value.forEach((item) => {
-//     checkedCitie.push(item.name);
-//   });
-//   checkedCities.value = val ? checkedCitie : [];
-//   isIndeterminate.value = false;
-// };
-// //单独勾选种类
-// const handleCheckedCitiesChange = (value) => {
-//   console.log(value);
-//   const checkedCount = value.length;
-//   checkAll.value = checkedCount === articleIdsList.value.length;
-//   isIndeterminate.value =
-//     checkedCount > 0 && checkedCount < articleIdsList.value.length;
-// };
-
-// 关联报修类型  当复选框被点击的时候触发
-const handleArticleIds = (data, checked, indeterminate) => {
-  console.log(data, checked, indeterminate);
-  // let keys = articleIdsRef.value.getCheckedNodes();
-  let keys = articleIdsRef.value.getCheckedKeys();
-  // console.log(keys);
-  // let arr = [];
-  // keys.forEach((item) => {
-  //   if (item.parentId != 1) {
-  //     arr.push(item.id);
-  //   }
-  // });
-  ruleForm.articleIds = keys;
-};
-//  关联楼栋 当复选框被点击的时候触发
-const handleCheckChange = (data, checked, indeterminate) => {
-  // console.log(data, checked);
-  let keys = buildIdsRef.value.getCheckedNodes();
-  let arr = [];
-  keys.forEach((item) => {
-    if (item.parentId != 1) {
-      arr.push(item.id);
-    }
-  });
-  ruleForm.buildIds = arr;
-};
-
-//编辑按钮  （-------------------------------------------）
-const edit = (row) => {
-  changeSchool(row.schoolId);
-  // console.log(row.articleIds, row.buildIds);
-  dialongTitle.value = "编辑员工";
-  addDialogVisible.value = true;
-  ruleForm.userName = row.userName;
-  ruleForm.cardNumber = row.cardNumber;
-  ruleForm.userzzId = row.userZzid;
-  ruleForm.userPhone = row.userPhone;
-  ruleForm.schoolId = row.schoolId;
-  ruleForm.workType = row.workType;
-  ruleForm.teamId = row.teamId;
-  ruleForm.acceptanceTime = row.acceptanceTime;
-  ruleForm.maintenanceTime = row.maintenanceTime;
-  ruleForm.id = row.id;
-  nextTick(() => {
-    articleIdsRef.value.setCheckedKeys(row.articleIds);
-    buildIdsRef.value.setCheckedKeys(row.buildIds);
-  });
-  ruleForm.articleIds = row.articleIds;
-  ruleForm.buildIds = row.buildIds;
-};
-// 取消添加员工
-const cancelAdd = () => {
-  addDialogVisible.value = false;
-  ruleFormRef.value.resetFields();
-};
-// 确认添加员工
-const submitAdd = async (formEl) => {
-  if (!formEl) return;
-  await formEl.validate(async (valid, fields) => {
-    if (valid) {
-      if (dialongTitle.value == "添加员工") {
-        let data = {
-          userName: ruleForm.userName,
-          cardNumber: ruleForm.cardNumber,
-          userzzId: ruleForm.userzzId,
-          userPhone: ruleForm.userPhone,
-          schoolId: ruleForm.schoolId,
-          workType: ruleForm.workType,
-          articleIds: ruleForm.articleIds,
-          buildIds: ruleForm.buildIds,
-          teamId: ruleForm.teamId,
-          acceptanceAssessTime: ruleForm.acceptanceTime,
-          maintenanceAssessTime: ruleForm.maintenanceTime,
-        };
-        let res = await axios({
-          method: "post",
-          url: api.value + "/repairUser/insertRepairUserSetting",
-          headers: {
-            token: sessionStorage.getItem("token"),
-            user_head: sessionStorage.getItem("userhead"),
-          },
-          data: data,
-        });
-        console.log(res, "添加员工");
-        if (res.data.code == 200) {
-          getList();
-          ElMessage({
-            type: "success",
-            showClose: true,
-            message: res.data.message,
-            center: true,
-          });
-          addDialogVisible.value = false;
-          ruleFormRef.value.resetFields();
-        } else {
-          ElMessage({
-            type: "error",
-            showClose: true,
-            message: res.data.message,
-            center: true,
-          });
-        }
-      } else {
-        let data = {
-          userName: ruleForm.userName,
-          cardNumber: ruleForm.cardNumber,
-          userzzId: ruleForm.userzzId,
-          userPhone: ruleForm.userPhone,
-          schoolId: ruleForm.schoolId,
-          workType: ruleForm.workType,
-          articleIds: ruleForm.articleIds,
-          buildIds: ruleForm.buildIds,
-          teamId: ruleForm.teamId,
-          acceptanceAssessTime: ruleForm.acceptanceTime,
-          maintenanceAssessTime: ruleForm.maintenanceTime,
-          id: ruleForm.id,
-        };
-        let res = await axios({
-          method: "post",
-          url: api.value + "/repairUser/updateRepairUserSettingById",
-          headers: {
-            token: sessionStorage.getItem("token"),
-            user_head: sessionStorage.getItem("userhead"),
-          },
-          data: data,
-        });
-        console.log(res, "编辑员工");
-        if (res.data.code == 200) {
-          getList();
-          ElMessage({
-            type: "success",
-            showClose: true,
-            message: res.data.message,
-            center: true,
-          });
-          addDialogVisible.value = false;
-          ruleFormRef.value.resetFields();
-        } else {
-          ElMessage({
-            type: "error",
-            showClose: true,
-            message: res.data.message,
-            center: true,
-          });
-        }
-      }
-    } else {
-      console.log("error submit!", fields);
-    }
-  });
-};
-
-//删除按钮
-const del = async (row) => {
-  let data = {
-    id: row.id,
-  };
-  let res = await axios({
-    method: "get",
-    url: api.value + "/repairUser/deleteRepairUserSettingById",
-    headers: {
-      token: sessionStorage.getItem("token"),
-      user_head: sessionStorage.getItem("userhead"),
-    },
-    params: data,
-  });
-  if (res.data.code == 200) {
-    if (tableData.list.length == 1 && currentPage.value != 1) {
-      currentPage.value = currentPage.value - 1;
-    }
-    getList();
-    ElMessage({
-      type: "success",
-      showClose: true,
-      message: res.data.message,
-      center: true,
-    });
-  } else {
-    ElMessage({
-      type: "error",
-      showClose: true,
-      message: res.data.message,
-      center: true,
-    });
-  }
-  console.log(res);
-};
-
 // 多选框功能
 const handleSelectionChange = (val) => {
   console.log(val);
@@ -557,11 +478,19 @@ const importExcel = lodash.debounce(async () => {
   let data = {
     ledgerParam: searchInput.keyWord, // 关键字查询
     managerId: sessionStorage.getItem("token"),
+    saccountState: searchInput.status,
   };
+  if (searchInput.status == 2) {
+    data.saccountState = "";
+  }
   if (searchInput.createTime) {
     data.payStartTime = searchInput.createTime[0];
     data.payEndTime = searchInput.createTime[1];
   }
+  if (searchInput.checkOutTime) {
+    data.leaveStartTime = searchInput.checkOutTime[0];
+    data.leaveEndTime = searchInput.checkOutTime[1];
+  }
   let res = await axios({
     method: "post",
     url: api.value + "/mhotel/booktoLedgerExcel.action",
@@ -654,7 +583,47 @@ onUnmounted(() => {
       color: rgba(111, 182, 184, 1);
     }
   }
+  .top {
+    width: 96%;
+    height: 150px;
+    margin: 20px auto;
+
+    ul {
+      padding: 0;
+      margin: 0;
+      height: 100%;
+      list-style: none;
+      display: flex;
+
+      li {
+        background-color: rgba(242, 242, 242, 1);
+        border-radius: 10px;
+        flex: 1;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
 
+        p {
+          font-size: 40px;
+          font-weight: 700;
+          color: #000;
+          margin: 0;
+        }
+
+        span {
+          color: #000;
+          font-size: 18px;
+          font-weight: 400;
+        }
+      }
+
+      li:not(:last-child) {
+        margin-right: 36px;
+      }
+    }
+  }
   .middle {
     width: 96%;
     margin: 0 auto;
@@ -730,7 +699,7 @@ onUnmounted(() => {
 
   .footer {
     width: 96%;
-    height: 550px;
+    height: 400px;
     margin: 10px auto 30px;
 
     .el-table--fit {
@@ -853,7 +822,6 @@ onUnmounted(() => {
     }
 
     .el-pagination {
-
       // width: 1600px;
       :deep(.el-pagination__total) {
         color: #000;

src/views/order/order.vue

@@ -13,15 +13,15 @@
           </li>
           <li>
             <p>{{ orderSum }}</p>
-            <span>本月订单总数（单）</span>
+            <span>订单总数（单）</span>
           </li>
           <li>
             <p>{{ consumerOrderSum }}</p>
-            <span>本月已消费订单总数（单）</span>
+            <span>已消费订单总数（单）</span>
           </li>
           <li>
             <p>{{ sumAccount }}</p>
-            <span>本月已消费订单总额（元）</span>
+            <span>已消费订单总额（元）</span>
           </li>
         </ul>
       </div>
@@ -29,12 +29,23 @@
         <div class="filter">
           <div class="condition">
             <span>关键字 : </span>
-            <el-input :clearable="true" @clear="searchBtn" v-model="searchInput.keyWord" class="w-50 m-2"
-              placeholder="请输入订单号、预定人、手机号" style="width: 230px" />
+            <el-input
+              :clearable="true"
+              @clear="searchBtn"
+              v-model="searchInput.keyWord"
+              class="w-50 m-2"
+              placeholder="请输入订单号、预定人、手机号"
+              style="width: 230px"
+            />
           </div>
           <div class="condition">
             <span>订单状态 : </span>
-            <el-select :clearable="false" v-model="searchInput.status" class="m-2" placeholder="请选择订单状态">
+            <el-select
+              :clearable="false"
+              v-model="searchInput.status"
+              class="m-2"
+              placeholder="请选择订单状态"
+            >
               <el-option label="全部" :value="0" />
               <el-option label="待支付" :value="1" />
               <el-option label="已支付" :value="2" />
@@ -50,26 +61,52 @@
           </div>
           <div class="condition">
             <span>支付时间 : </span>
-            <el-date-picker v-model="searchInput.createTime" type="daterange" range-separator="-" start-placeholder="起始时间"
-              end-placeholder="结束时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD" :prefix-icon="Calendar"
-              placeholder="请选择日期" />
+            <el-date-picker
+              v-model="searchInput.createTime"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="起始时间"
+              end-placeholder="结束时间"
+              format="YYYY-MM-DD"
+              value-format="YYYY-MM-DD"
+              :prefix-icon="Calendar"
+              placeholder="请选择日期"
+            />
           </div>
 
-          <el-button style="margin-left: 20px" color="rgba(9, 101, 98, 1)" type="primary" class="search"
-            @click="searchBtn"><el-icon>
+          <el-button
+            style="margin-left: 20px"
+            color="rgba(9, 101, 98, 1)"
+            type="primary"
+            class="search"
+            @click="searchBtn"
+            ><el-icon>
               <Search />
-            </el-icon> <span>查询</span></el-button>
-          <el-button style="margin-left: 20px" color="rgba(9, 101, 98, 1)" type="primary" class="search"
-            @click="importExcel"><span>导出订单</span></el-button>
+            </el-icon>
+            <span>查询</span></el-button
+          >
+          <el-button
+            style="margin-left: 20px"
+            color="rgba(9, 101, 98, 1)"
+            type="primary"
+            class="search"
+            @click="importExcel"
+            ><span>导出订单</span></el-button
+          >
         </div>
       </div>
       <div class="footer" v-loading="loading">
-        <el-table :row-class-name="tableRowClassName" :data="tableData.list" @selection-change="handleSelectionChange"
-          style="width: 100%" :header-cell-style="{
+        <el-table
+          :row-class-name="tableRowClassName"
+          :data="tableData.list"
+          @selection-change="handleSelectionChange"
+          style="width: 100%"
+          :header-cell-style="{
             background: 'rgba(240, 243, 247, 1)',
             height: '50px',
             border: 0,
-          }">
+          }"
+        >
           <!-- <el-table-column align="center" type="selection" width="80" /> -->
           <!-- <el-table-column
               width="150"
@@ -89,23 +126,57 @@
           <el-table-column align="center" prop="userName" label="预订人" />
           <el-table-column align="center" prop="userPhone" label="手机号码" />
           <el-table-column align="center" prop="houseName" label="预定房型" />
-          <el-table-column align="center" prop="houseOrderNumber" label="房间数(间)" show-overflow-tooltip>
+          <el-table-column
+            align="center"
+            prop="houseOrderNumber"
+            label="房间数(间)"
+            show-overflow-tooltip
+          >
           </el-table-column>
-          <el-table-column align="center" width="100" prop="houseTotalPrice" label="订单金额(元)" />
-          <el-table-column align="center" prop="payTime" label="支付时间" width="180" />
-          <el-table-column align="center" fixed="right" label="操作" width="150">
+          <el-table-column
+            align="center"
+            width="100"
+            prop="houseTotalPrice"
+            label="订单金额(元)"
+          />
+          <el-table-column
+            align="center"
+            prop="payTime"
+            label="支付时间"
+            width="180"
+          />
+          <el-table-column
+            align="center"
+            fixed="right"
+            label="操作"
+            width="150"
+          >
             <template #default="scope">
               <div>
                 <!-- 已支付 -->
                 <div class="edit" v-if="scope.row.orderStatus == 2">
-                  <el-popconfirm width="220" confirm-button-text="确认" cancel-button-text="取消" :icon="InfoFilled"
-                    icon-color="#f89626" title="是否接单?" @confirm="orderOptions('接单', scope.row)">
+                  <el-popconfirm
+                    width="220"
+                    confirm-button-text="确认"
+                    cancel-button-text="取消"
+                    :icon="InfoFilled"
+                    icon-color="#f89626"
+                    title="是否接单?"
+                    @confirm="orderOptions('接单', scope.row)"
+                  >
                     <template #reference>
                       <div class="look">接单</div>
                     </template>
                   </el-popconfirm>
-                  <el-popconfirm width="220" confirm-button-text="确认" cancel-button-text="取消" :icon="InfoFilled"
-                    icon-color="#f89626" title="是否退单?" @confirm="orderOptions('退单', scope.row)">
+                  <el-popconfirm
+                    width="220"
+                    confirm-button-text="确认"
+                    cancel-button-text="取消"
+                    :icon="InfoFilled"
+                    icon-color="#f89626"
+                    title="是否退单?"
+                    @confirm="orderOptions('退单', scope.row)"
+                  >
                     <template #reference>
                       <div class="look looks">退单</div>
                     </template>
@@ -114,8 +185,15 @@
                 <!-- 待入住  -->
                 <div class="edit" v-else-if="scope.row.orderStatus == 3">
                   <div class="look" @click="getHousing(scope.row)">入住</div>
-                  <el-popconfirm width="220" confirm-button-text="确认" cancel-button-text="取消" :icon="InfoFilled"
-                    icon-color="#f89626" title="是否退单?" @confirm="orderOptions('退单', scope.row)">
+                  <el-popconfirm
+                    width="220"
+                    confirm-button-text="确认"
+                    cancel-button-text="取消"
+                    :icon="InfoFilled"
+                    icon-color="#f89626"
+                    title="是否退单?"
+                    @confirm="orderOptions('退单', scope.row)"
+                  >
                     <template #reference>
                       <div class="look looks">退单</div>
                     </template>
@@ -123,14 +201,28 @@
                 </div>
                 <!-- 已入住 -->
                 <div class="edit" v-else-if="scope.row.orderStatus == 4">
-                  <el-popconfirm width="220" confirm-button-text="确认" cancel-button-text="取消" :icon="InfoFilled"
-                    icon-color="#f89626" title="是否退款?" @confirm="orderOptions('退款', scope.row)">
+                  <el-popconfirm
+                    width="220"
+                    confirm-button-text="确认"
+                    cancel-button-text="取消"
+                    :icon="InfoFilled"
+                    icon-color="#f89626"
+                    title="是否退款?"
+                    @confirm="orderOptions('退款', scope.row)"
+                  >
                     <template #reference>
                       <div class="look">退款</div>
                     </template>
                   </el-popconfirm>
-                  <el-popconfirm width="220" confirm-button-text="确认" cancel-button-text="取消" :icon="InfoFilled"
-                    icon-color="#f89626" title="是否退房?" @confirm="orderOptions('退房', scope.row)">
+                  <el-popconfirm
+                    width="220"
+                    confirm-button-text="确认"
+                    cancel-button-text="取消"
+                    :icon="InfoFilled"
+                    icon-color="#f89626"
+                    title="是否退房?"
+                    @confirm="orderOptions('退房', scope.row)"
+                  >
                     <template #reference>
                       <div class="look looks">退房</div>
                     </template>
@@ -314,44 +406,64 @@
         </el-dialog> -->
 
         <!-- 订单详情 -->
-        <el-dialog class="addStaff" v-model="addDialogVisible" :close-on-click-modal="false"
-          :close-on-press-escape="false" title="订单详情" align-center width="760" :before-close="cancelInfo">
+        <el-dialog
+          class="addStaff"
+          v-model="addDialogVisible"
+          :close-on-click-modal="false"
+          :close-on-press-escape="false"
+          title="订单详情"
+          align-center
+          width="760"
+          :before-close="cancelInfo"
+        >
           <div class="order_info">
             <div class="workNum">
-              <span class="titles">订单状态:</span><span>{{ ruleForm.orderStatusName }}</span>
+              <span class="titles">订单状态:</span
+              ><span>{{ ruleForm.orderStatusName }}</span>
             </div>
             <div class="workNum">
-              <span class="titles">订单号:</span><span>{{ ruleForm.orderNum }}</span>
+              <span class="titles">订单号:</span
+              ><span>{{ ruleForm.orderNum }}</span>
             </div>
             <div class="workNum">
-              <span class="titles">创建时间:</span><span>{{ ruleForm.createTime }}</span>
+              <span class="titles">创建时间:</span
+              ><span>{{ ruleForm.createTime }}</span>
             </div>
             <div class="workNum">
-              <span class="titles">房型:</span><span>{{ ruleForm.houseName }}</span>
+              <span class="titles">房型:</span
+              ><span>{{ ruleForm.houseName }}</span>
             </div>
             <div class="workNum">
-              <span class="titles">住客姓名:</span><span>{{ ruleForm.userName }}</span>
+              <span class="titles">住客姓名:</span
+              ><span>{{ ruleForm.userName }}</span>
             </div>
             <div class="workNum">
-              <span class="titles">联系电话:</span><span>{{ ruleForm.userPhone }}</span>
+              <span class="titles">联系电话:</span
+              ><span>{{ ruleForm.userPhone }}</span>
             </div>
             <div class="workNum">
-              <span class="titles">预计到店:</span><span>{{ ruleForm.orderStartTime }}</span>
+              <span class="titles">预计到店:</span
+              ><span>{{ ruleForm.orderStartTime }}</span>
             </div>
             <div class="workNum">
-              <span class="titles">订单金额:</span><span>{{ ruleForm.houseTotalPrice }}</span>
+              <span class="titles">订单金额:</span
+              ><span>{{ ruleForm.houseTotalPrice }}</span>
             </div>
             <div class="workNum">
-              <span class="titles">支付时间:</span><span>{{ ruleForm.payTime }}</span>
+              <span class="titles">支付时间:</span
+              ><span>{{ ruleForm.payTime }}</span>
             </div>
             <div class="workNum">
-              <span class="titles">入住时间:</span><span>{{ ruleForm.orderLiveTime }}</span>
+              <span class="titles">入住时间:</span
+              ><span>{{ ruleForm.orderLiveTime }}</span>
             </div>
             <div class="workNum">
-              <span class="titles" style="width: 108px">预计入住时间:</span><span>{{ ruleForm.orderStartTime }}</span>
+              <span class="titles" style="width: 108px">预计入住时间:</span
+              ><span>{{ ruleForm.orderStartTime }}</span>
             </div>
             <div class="workNum">
-              <span class="titles" style="width: 108px">预计离店时间:</span><span>
+              <span class="titles" style="width: 108px">预计离店时间:</span
+              ><span>
                 {{ ruleForm.orderEndTime }}
               </span>
             </div>
@@ -377,7 +489,12 @@
                 >
               </el-checkbox-group> -->
               <ul>
-                <li v-for="i in houseNumber" :key="i.id" @click="infoRoomNum(i)" :class="i.flag == 2 ? 'is_active' : ''">
+                <li
+                  v-for="i in houseNumber"
+                  :key="i.id"
+                  @click="infoRoomNum(i)"
+                  :class="i.flag == 2 ? 'is_active' : ''"
+                >
                   {{ i.numberName }}
                 </li>
               </ul>
@@ -385,30 +502,69 @@
           </div>
           <!-- 已支付 -->
           <div class="options" v-if="ruleForm.orderStatus == 2">
-            <el-button color="rgba(9, 101, 98, 1)" class="queding" type="primary" @click="orderOptions('接单')">
+            <el-button
+              color="rgba(9, 101, 98, 1)"
+              class="queding"
+              type="primary"
+              @click="orderOptions('接单')"
+            >
               接单
             </el-button>
-            <el-button color="rgba(212, 48, 48, 1)" @click="orderOptions('退单')">退单</el-button>
+            <el-button
+              color="rgba(212, 48, 48, 1)"
+              @click="orderOptions('退单')"
+              >退单</el-button
+            >
           </div>
           <!-- 待入住 -->
           <div class="options" v-else-if="ruleForm.orderStatus == 3">
-            <el-button color="rgba(9, 101, 98, 1)" class="queding" type="primary" @click="getHouseYes('详情入住')">
+            <el-button
+              color="rgba(9, 101, 98, 1)"
+              class="queding"
+              type="primary"
+              @click="getHouseYes('详情入住')"
+            >
               入住
             </el-button>
-            <el-button color="rgba(212, 48, 48, 1)" @click="orderOptions('退单')">退单</el-button>
+            <el-button
+              color="rgba(212, 48, 48, 1)"
+              @click="orderOptions('退单')"
+              >退单</el-button
+            >
           </div>
           <!-- 已入住 -->
-          <div class="options" v-else-if="ruleForm.orderStatus == 4 && ruleForm.orderEndTime >= nowDay
-            ">
-            <el-button color="rgba(9, 101, 98, 1)" class="queding" type="primary" @click="orderOptions('退款')">
+          <div
+            class="options"
+            v-else-if="
+              ruleForm.orderStatus == 4 && ruleForm.orderEndTime >= nowDay
+            "
+          >
+            <el-button
+              color="rgba(9, 101, 98, 1)"
+              class="queding"
+              type="primary"
+              @click="orderOptions('退款')"
+            >
               退款
             </el-button>
-            <el-button color="rgba(212, 48, 48, 1)" @click="orderOptions('退房')">退房</el-button>
+            <el-button
+              color="rgba(212, 48, 48, 1)"
+              @click="orderOptions('退房')"
+              >退房</el-button
+            >
           </div>
         </el-dialog>
         <!-- 入住 -->
-        <el-dialog class="addStaff" v-model="houseNumberDialog" :close-on-click-modal="false"
-          :close-on-press-escape="false" title="选择房间" align-center width="450" :before-close="houseNumberCancel">
+        <el-dialog
+          class="addStaff"
+          v-model="houseNumberDialog"
+          :close-on-click-modal="false"
+          :close-on-press-escape="false"
+          title="选择房间"
+          align-center
+          width="450"
+          :before-close="houseNumberCancel"
+        >
           <div class="houseNumber">
             <h3>
               {{ houseNumberList.houseName }}({{
@@ -424,13 +580,23 @@
               >
             </el-checkbox-group> -->
             <ul>
-              <li v-for="i in houseNumber" :key="i.id" @click="checkRoomNum(i)" :class="i.flag == 2 ? 'is_active' : ''">
+              <li
+                v-for="i in houseNumber"
+                :key="i.id"
+                @click="checkRoomNum(i)"
+                :class="i.flag == 2 ? 'is_active' : ''"
+              >
                 {{ i.numberName }}
               </li>
             </ul>
           </div>
           <div class="options">
-            <el-button color="rgba(9, 101, 98, 1)" class="queding" type="primary" @click="getHouseYes('入住')">
+            <el-button
+              color="rgba(9, 101, 98, 1)"
+              class="queding"
+              type="primary"
+              @click="getHouseYes('入住')"
+            >
               入住
             </el-button>
             <el-button @click="houseNumberCancel">取消</el-button>
@@ -441,8 +607,14 @@
       <!-- 分页组件 -->
       <div class="pageSize">
         <span></span>
-        <el-pagination background :current-page="currentPage" :page-size="pageSize"
-          layout="total, prev, pager, next, jumper, slot" :total="total" @update:current-page="handleCurrentChange" />
+        <el-pagination
+          background
+          :current-page="currentPage"
+          :page-size="pageSize"
+          layout="total, prev, pager, next, jumper, slot"
+          :total="total"
+          @update:current-page="handleCurrentChange"
+        />
       </div>
     </div>
   </div>
@@ -450,8 +622,15 @@
     <div class="goInfo">
       <h2>欢迎登陆靖安乡村民宿管理平台</h2>
       <p>为了完善您的民宿信息，请前往信息维护页面进行完善</p>
-      <el-button style="margin-left: 20px" color="rgba(9, 101, 98, 1)" type="primary" class="search" @click="goInfo">
-        立即前往</el-button>
+      <el-button
+        style="margin-left: 20px"
+        color="rgba(9, 101, 98, 1)"
+        type="primary"
+        class="search"
+        @click="goInfo"
+      >
+        立即前往</el-button
+      >
     </div>
   </div>
 </template>
@@ -542,7 +721,7 @@ const houseNumberList = ref({
   orderLiveTime: "", // 时间
   id: "", // 房间id
   houseNumberIds: [], // 选择的房间号
-  houseOrderNumber: "" // 客户订了房间的数量
+  houseOrderNumber: "", // 客户订了房间的数量
 });
 // const roomNumSel = ref(); // 入住时选中的房间
 
@@ -561,7 +740,7 @@ const ruleForm = reactive({
   orderLiveTime: "", // 订房时间
   orderStartTime: "", //预计入住时间
   orderEndTime: "", //~预计离店时间
-  houseOrderNumber: "",// 客户订了房间的数量
+  houseOrderNumber: "", // 客户订了房间的数量
   houseNumberIds: [],
   id: "",
 });
@@ -733,7 +912,7 @@ const cancelInfo = () => {
 // 详情选择房间号
 const infoRoomNum = (i) => {
   console.log(i);
-  let roomNum = ruleForm.houseOrderNumber
+  let roomNum = ruleForm.houseOrderNumber;
   if (ruleForm.houseNumberIds.length < roomNum) {
     if (i.flag == 1) {
       i.flag = 2;
@@ -762,7 +941,6 @@ const infoRoomNum = (i) => {
       center: true,
     });
   }
-
 };
 
 //订单操作按钮
@@ -894,8 +1072,7 @@ const houseNumberCancel = () => {
 };
 // 入住选择房间号
 const checkRoomNum = (i) => {
-
-  let roomNum = houseNumberList.value.houseOrderNumber
+  let roomNum = houseNumberList.value.houseOrderNumber;
   // 判断选择几间房间;
   if (houseNumberList.value.houseNumberIds.length < roomNum) {
     if (i.flag == 1) {
@@ -909,7 +1086,10 @@ const checkRoomNum = (i) => {
         houseNumberList.value.houseNumberIds.push(item.id);
       }
     });
-  } else if (houseNumberList.value.houseNumberIds.length == roomNum && i.flag == 2) {
+  } else if (
+    houseNumberList.value.houseNumberIds.length == roomNum &&
+    i.flag == 2
+  ) {
     i.flag = 1;
     houseNumberList.value.houseNumberIds = [];
     houseNumber.value.forEach((item) => {
@@ -917,8 +1097,7 @@ const checkRoomNum = (i) => {
         houseNumberList.value.houseNumberIds.push(item.id);
       }
     });
-  }
-  else {
+  } else {
     ElMessage({
       type: "warning",
       showClose: true,
@@ -1111,9 +1290,9 @@ onUnmounted(() => {
     font-weight: 600;
 
     span {
-      display: inline-block;
-      height: 60px;
-      line-height: 60px;
+      // display: inline-block;
+      // height: 60px;
+      // line-height: 60px;
       margin-right: 20px;
       cursor: pointer;
     }
@@ -1479,7 +1658,6 @@ onUnmounted(() => {
     }
 
     .el-pagination {
-
       // width: 1600px;
       :deep(.el-pagination__total) {
         color: #000;

src/views/roomType/roomType.vue

@@ -52,7 +52,7 @@
         </el-table>
         <!-- 添加房型弹窗 -->
         <el-dialog class="addStaff" v-model="addDialogVisible" :close-on-click-modal="false"
-          :close-on-press-escape="false" :title="dialongTitle" align-center width="900" :before-close="handleVideoClose">
+          :close-on-press-escape="false" :title="dialongTitle" align-center width="900" :before-close="cancelAdd">
           <div class="slider">
             <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm"
               size="default" label-position="left" status-icon :inline="true">
@@ -65,7 +65,7 @@
                       <div class="img img1">
                         <div class="updateImg">
                           <div class="imglist" v-if="fileList.list.length">
-                            <div class="imgItem" v-for="i in fileList.list">
+                            <div class="imgItem" v-for="i in fileList.list" :key="i.id">
                               <img :src="i.url" alt="" />
                               <div class="lookImg">
                                 <img src="@/assets/lookImg.png" alt="" @click="lookImg(i)" />
@@ -140,15 +140,21 @@
                         <span>103</span>
                         <div class="del"></div>
                       </div> -->
-                      <div class="li" v-for="i in ruleForm.houseNumbers">
-                        <!-- <span>{{ i.numberName }}</span> -->
-                        <el-input v-model="i.numberName" placeholder="房间号" />
-                        <div class="del" @click="delRoom(i)"></div>
-                      </div>
-                      <div class="addRoom" @click="addRoom">
-                        <img src="@/assets/addRoom.png" alt="" />
-                        <span>新增房间</span>
+                      <div class="li">
+                        <div class="li_items" v-for="i in ruleForm.houseNumbers" :key="i.id">
+                          <!-- <span>{{ i.numberName }}</span> -->
+                          <div class="li_item" :class="i.numberName ? '' : 'li_item_warning'">
+                            <el-input v-model="i.numberName" placeholder="房间号" @input="roomNumber" />
+                            <div class="del" @click="delRoom(i)"></div>
+                          </div>
+                          <div class="warning" v-if="!i.numberName">请填写房间号</div>
+                        </div>
+                        <div class="addRoom" @click="addRoom">
+                          <img src="@/assets/addRoom.png" alt="" />
+                          <span>新增房间</span>
+                        </div>
                       </div>
+
                     </div>
                   </div>
                 </div>
@@ -195,7 +201,7 @@
 </template>
 
 <script setup>
-import { ref, reactive, nextTick, onBeforeMount, onUnmounted } from "vue";
+import { ref, reactive, watch, nextTick, onBeforeMount, onUnmounted } from "vue";
 import { useRouter } from "vue-router";
 import { ElMessage, ElMessageBox } from "element-plus";
 import { Calendar } from "@element-plus/icons-vue";
@@ -295,6 +301,15 @@ const area = (rule, value, callback) => {
     callback(new Error("最多包含四位小数的正数"));
   }
 };
+// 房间数量验证
+const validateNumber = (rule, value, callback) => {
+  console.log(value, "房间数量");
+  if (/^\+?[1-9]\d*$/.test(value)) {
+    callback();
+  } else {
+    callback(new Error("房间数量最大不能超过三位数"));
+  }
+};
 // 表单验证
 const rules = reactive({
   fileListJson: [
@@ -307,11 +322,12 @@ const rules = reactive({
   ],
   number: [
     { required: true, message: "数量不能为空", trigger: "blur" },
-    {
-      pattern: /^\+?[1-9]\d*$/,
-      message: "请输入大于0的正整数",
-      trigger: "blur",
-    },
+    { validator: validateNumber, trigger: "blur" },
+    // {
+    //   pattern: /^\+?[1-9]\d*$/,
+    //   message: "请输入大于0的正整数",
+    //   trigger: "blur",
+    // },
   ],
   hAreas: [
     { required: true, message: "房型面积不能为空", trigger: "blur" },
@@ -499,20 +515,68 @@ const checkHouse = (val) => {
   ruleForm.hConfig = val.join(",");
 };
 
+// 监听房间数量
+watch(
+  () => ruleForm.number,
+  (newVal, oldVal) => {
+    console.log(newVal, "监听房间数量");
+    if (ruleForm.number <= 999) {
+      let arr = []
+      if (newVal > 0) {
+        for (let i = 0; i < newVal; i++) {
+          arr[i] = {
+            numberName: "",
+            id: Math.random().toString(36).substr(3, i + 1),
+          }
+        }
+      }
+      arr.forEach((item, index) => {
+        ruleForm.houseNumbers.forEach((i, ind) => {
+          if (index == ind) {
+            item.numberName = i.numberName
+            item.id = i.id
+          }
+        })
+      })
+      ruleForm.houseNumbers = arr
+      console.log(arr, "根据数量添加空房间");
+    } else {
+      ElMessage({
+        type: "warning",
+        showClose: true,
+        message: "房间数量最大为三位数",
+        center: true,
+      });
+      console.log(newVal.slice(0, 3));
+      ruleForm.number = newVal.slice(0, 3)
+    }
+  }
+)
+
 // 新增房间号
 const addRoom = () => {
   console.log(ruleForm.houseNumbers);
   let arr = {
     numberName: "",
-    id: ruleForm.houseNumbers.length,
+    id: Math.random().toString(36).substr(3, 6),
   };
   ruleForm.houseNumbers.push(arr);
+  if (ruleForm.houseNumbers.length > 0) {
+    ruleForm.number = ruleForm.houseNumbers.length
+  }
+  // console.log(ruleForm.houseNumbers.length, "房间数量");
 };
 // 删除房间号
 const delRoom = (i) => {
   ruleForm.houseNumbers = ruleForm.houseNumbers.filter((item) => {
     return i.id != item.id;
   });
+  if (ruleForm.houseNumbers.length > 0) {
+    ruleForm.number = ruleForm.houseNumbers.length
+  } else {
+    ruleForm.number = ""
+  }
+  // console.log(ruleForm.houseNumbers.length, "房间数量");
 };
 
 // 确认添加房型
@@ -1135,37 +1199,54 @@ onUnmounted(() => {
                 padding: 0;
 
                 .li {
-                  width: 108px;
-                  height: 40px;
-                  border: 1px solid #e0e0e0;
                   display: flex;
-                  justify-content: space-around;
-                  align-items: center;
-                  margin: 0 10px 10px 0;
-                  border-radius: 7px;
+                  flex-wrap: wrap;
+
+                  .li_items {
+
+                    // span {
+                    //   margin-right: 40px;
+                    // }
+                    .li_item {
+                      display: flex;
+                      justify-content: space-around;
+                      align-items: center;
+                      width: 120px;
+                      height: 40px;
+                      border: 1px solid #e0e0e0;
+                      margin: 0 10px 10px 0;
+                      border-radius: 7px;
+                    }
 
-                  span {
-                    margin-right: 40px;
-                  }
+                    .li_item_warning {
+                      border: 1px solid red;
+                    }
+
+                    .warning {
+                      color: red;
+                      // text-align: center;
+                      font-size: 12px;
+                    }
 
-                  .el-input {
-                    width: 70px;
+                    .el-input {
+                      width: 70px;
 
-                    .el-input__wrapper {
-                      box-shadow: none;
+                      .el-input__wrapper {
+                        box-shadow: none;
+                      }
                     }
-                  }
 
-                  .del {
-                    width: 14px;
-                    height: 14px;
-                    background-image: url("@/assets/delete.png");
-                    background-size: 100%;
-                  }
+                    .del {
+                      width: 14px;
+                      height: 14px;
+                      background-image: url("@/assets/delete.png");
+                      background-size: 100%;
+                    }
 
-                  .del:hover {
-                    background-image: url("@/assets/delete_hover.png");
-                    cursor: pointer;
+                    .del:hover {
+                      background-image: url("@/assets/delete_hover.png");
+                      cursor: pointer;
+                    }
                   }
                 }
 

vite.config.js

@@ -32,12 +32,13 @@ export default defineConfig({
     //   },
     // }, // https://chtech.ncjti.edu.cn/hotelReservation/pc2
 
-    // // 测试地址
+    //
     proxy: {
       "/hotelReservation": {
         // target: "https://chtech.ncjti.edu.cn/hotelReservation",
         // target: "http://101.42.162.31/hotelReservation/", // 测试环境
-        target: "https://www.xn--gmq052a5d255v.com/hotelReservation/", // 测试环境
+        // target: "https://chtech.ncjti.edu.cn/hotelReservation/", // 正式环境
+        target: "https://www.jinganrenjiams.com/hotelReservation/", // 正式环境
         changeOrigin: true,
         rewrite: (path) => path.replace(/^\/hotelReservation/, ""),
       },