ihotel-manage/src/views/roomPrice/roomPrice.vue

<template>
  <div class="content-box">
    <div class="left">
      <!-- <el-icon :size="23" class="camera"><VideoCameraFilled /></el-icon> -->
      <span class="cameratxt">房价管理</span>
    </div>
    <div class="tabData">
      <div class="middle">
        <div class="filter">
          <div class="filter_block">
            <div class="condition">
              <el-date-picker
                v-model="searchInput.createTime"
                type="date"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
                :prefix-icon="Calendar"
                :clearable="false"
                placeholder="请选择日期"
                @change="searchData"
              />
            </div>
            <div class="condition">
              <span>房型 : </span>
              <el-select
                v-model="searchInput.changePriceSelId"
                class="m-2"
                placeholder="请选择房型"
                @change="searchData"
                @clear="searchData"
                clearable
                style="width: 200px"
              >
                <el-option
                  :label="i.roomName"
                  :value="i.id"
                  v-for="i in houseTypeData"
                  :key="i.id"
                />
                <!-- <el-option label="标准房" value="标准房" /> -->
              </el-select>
            </div>
          </div>
          <div class="filter_block">
            <el-button
              style="margin-left: 20px"
              color="rgba(0, 97, 255, 1)"
              type="primary"
              class="search"
              @click="roomClose"
              ><span>批量改价</span></el-button
            >
            <el-button
              style="margin-left: 20px"
              color="rgba(0, 97, 255, 1)"
              type="primary"
              class="search"
              @click="recordPrice"
              ><span>改价记录</span></el-button
            >
          </div>
        </div>
      </div>
      <div class="footer" v-loading="loading">
        <el-table
          :data="tableData.list"
          style="width: 100%"
          :header-cell-style="{
            background: 'rgba(240, 243, 247, 1)',
            height: '50px',
          }"
        >
          <el-table-column align="center" width="200" prop="houseName" label="本地房型" />
          <el-table-column
            v-for="(item, index) in tableHead"
            align="center"
            :key="index"
            :label="item.dateTime"
            width="220"
          >
            <template #default="{ row }">
              <span>￥{{ row.housePriceVos[index].price }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 批量改价 -->
      <el-dialog
        class="roomCloseDilog"
        v-model="roomCloseDialogVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        title="批量改价"
        align-center
        width="700"
        :before-close="cancelRoomClose"
      >
        <div class="last">
          <div class="roomUl">
            <div class="title">选择类型</div>
            <div class="delRoom">
              <el-select
                v-model="changePriceSelData"
                class="m-2"
                placeholder="请选择类型"
              >
                <el-option label="全日房" value="1" />
                <el-option label="钟点房" value="2" />
              </el-select>
            </div>
          </div>
          <div class="roomUl">
            <div class="title">选择房型</div>
            <div class="delRoom">
              <el-checkbox-group
                @change="changePriceSelcet"
                v-model="changePriceSelData"
              >
                <el-checkbox
                  :label="i.id"
                  v-for="i in changePirceRoomType"
                  :key="i.id"
                  >{{ i.hName }}</el-checkbox
                >
              </el-checkbox-group>
            </div>
          </div>
          <div class="roomUl roomTime">
            <div class="title">选择日期</div>
            <div class="delRoom">
              <div class="date">适用日期</div>
              <div class="addDate">
                <div class="elDate">
                  <div
                    class="time_li"
                    v-for="(i, index) in changePrice.createTime"
                    :key="index"
                  >
                    <el-date-picker
                      v-model="changePrice.createTime[index]"
                      type="daterange"
                      range-separator="至"
                      start-placeholder="起始时间"
                      end-placeholder="结束时间"
                      format="YYYY-MM-DD"
                      value-format="YYYY-MM-DD"
                      :prefix-icon="Calendar"
                      placeholder="请选择日期"
                    />
                    <img
                      src="@/assets/addRoom.png"
                      v-if="changePrice.createTime.length > 1"
                      alt=""
                      @click="delChangePriceTime(index)"
                    />
                  </div>
                </div>
                <div class="addTime">
                  <div class="imgTime" @click="addChangePriceTime">
                    <img src="@/assets/addRoom.png" alt="" />
                    <span>添加时间段</span>
                  </div>
                  <span class="num">最多可添加10个</span>
                </div>
              </div>
            </div>
          </div>
          <div class="roomUl">
            <div class="title">设置价格</div>
            <div class="delRoom">
              <el-table
                :row-class-name="tableRowClassName"
                :data="changePriceData.list"
                style="width: 100%; height: 280px"
                :header-cell-style="{
                  background: 'rgba(233, 242, 242, 1)',
                  height: '40px',
                  border: 0,
                }"
              >
                <el-table-column align="center" prop="hName" label="房型" />
                <el-table-column align="center" />
                <el-table-column align="center" label="价格" width="200">
                  <template #default="{ row }">
                    <div @click="inputPrice(row)">
                      <span v-if="row.inputPriceShow">{{ row.price }}</span>
                      <el-input
                        v-else
                        :clearable="false"
                        ref="inputPriceRef"
                        @blur="inputPriceBlur(row)"
                        v-model="row.price"
                        class="w-50 m-2"
                        placeholder="请输入价格"
                      />
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>

          <div class="options">
            <el-button
              class="queding"
              color="rgba(0, 97, 255, 1)"
              @click="notarizeRoomClose(roomCloseTree)"
              >确认</el-button
            >
            <el-button @click="cancelRoomClose">取消</el-button>
          </div>
        </div>
      </el-dialog>

      <!-- 改价记录 -->
      <el-dialog
        class="recordDilog"
        v-model="recordDialogVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        title="改价记录"
        align-center
        width="1400"
        :before-close="cancelRecord"
      >
        <div class="middle">
          <div class="filter">
            <div class="condition">
              <span>房型 : </span>
              <el-select
                v-model="recordSearch.roomType"
                class="m-2"
                placeholder="请选择房型"
                @clear="recordPriceSearch"
                clearable
                style="width: 200px"
              >
                <el-option
                  :label="i.hName"
                  :value="i.id"
                  v-for="i in recordRoomType"
                  :key="i.id"
                />
              </el-select>
            </div>
            <div class="condition">
              <span>操作时间 : </span>
              <el-date-picker
                v-model="recordSearch.operationTime"
                type="daterange"
                range-separator="-"
                start-placeholder="起始时间"
                end-placeholder="结束时间"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                :prefix-icon="Calendar"
                placeholder="请选择日期"
              />
            </div>
            <div class="condition">
              <span>价格日期 : </span>
              <el-date-picker
                v-model="recordSearch.setDate"
                type="daterange"
                range-separator="-"
                start-placeholder="起始时间"
                end-placeholder="结束时间"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                :prefix-icon="Calendar"
                placeholder="请选择日期"
              />
            </div>
            <div class="condition">
              <span>操作人 : </span>
              <el-input
                :clearable="true"
                @clear="recordPriceSearch"
                v-model="recordSearch.keyWord"
                class="w-50 m-2"
                placeholder="请输入操作人名字"
                style="width: 230px"
              />
            </div>
            <el-button
              style="margin-left: 20px"
              color="rgba(0, 97, 255, 1)"
              type="primary"
              class="search"
              @click="recordPriceSearch"
              ><el-icon>
                <Search />
              </el-icon>
              <span>查询</span></el-button
            >
            <el-button
              style="margin-left: 20px"
              color="rgba(0, 97, 255, 1)"
              type="primary"
              class="search"
              @click="importExcel"
              ><span>导出房价</span></el-button
            >
          </div>
        </div>
        <div class="footer" v-loading="loading">
          <el-table
            :row-class-name="tableRowClassName2"
            :data="recordData.list"
            @selection-change="handleSelectionChange"
            style="width: 100%; height: 550px"
            :header-cell-style="{
              background: 'rgba(240, 243, 247, 1)',
              height: '50px',
              border: 0,
            }"
          >
            <el-table-column align="center" prop="houseName" label="房型">
            </el-table-column>
            <el-table-column align="center" prop="setDate" label="价格日期" />
            <el-table-column align="center" prop="price" label="修改后价格" />
            <el-table-column
              align="center"
              prop="operationName"
              label="操作人"
            />
            <el-table-column
              align="center"
              prop="operationTime"
              label="操作时间"
            >
            </el-table-column>
          </el-table>
        </div>
        <div class="pageSize">
          <span></span>
          <el-pagination
            background
            :current-page="recordPage"
            :page-size="recordSize"
            layout="total, prev, pager, next, jumper, slot"
            :total="recordTotal"
            @update:current-page="handleCurrentChange2"
          />
        </div>
      </el-dialog>

      <!-- 分页组件 -->
      <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 tableHead = ref([
  {
    data: "2023-08-10",
    roomY: "剩2间房",
  },
  {
    data: "2023-08-11",
    roomY: "剩6间房",
  },
  {
    data: "2023-08-12",
    roomY: "剩2间房",
  },
  {
    data: "2023-08-13",
    roomY: "剩6间房",
  },
  {
    data: "2023-08-14",
    roomY: "剩2间房",
  },
  {
    data: "2023-08-15",
    roomY: "剩6间房",
  },
]); // 表头循环日期
const tableData = reactive({
  list: [
    {
      orderNum: "双人床",
      money: 78,
      inputPriceShow: true,
      dataList: [
        {
          data: "2023-08-10",
          money: "120",
        },
        {
          data: "2023-08-11",
          money: "130",
        },
        {
          data: "2023-08-12",
          money: "140",
        },
        {
          data: "2023-08-13",
          money: "150",
        },
        {
          data: "2023-08-14",
          money: "160",
        },
        {
          data: "2023-08-15",
          money: "170",
        },
      ],
    },
    {
      orderNum: "单人床",
      money: 37,
      inputPriceShow: true,
      dataList: [
        {
          data: "2023-08-10",
          money: "120",
        },
        {
          data: "2023-08-11",
          money: "130",
        },
        {
          data: "2023-08-12",
          money: "140",
        },
        {
          data: "2023-08-13",
          money: "150",
        },
        {
          data: "2023-08-14",
          money: "160",
        },
        {
          data: "2023-08-15",
          money: "170",
        },
      ],
    },
  ],
});
const currentPage = ref(1); // 当前页
const pageSize = ref(10);
const total = ref(); // 当前总数
// 下拉框数据
const changePriceSelect = ref();
// const selectData = reactive({ list: [] }); // 多选框选择的数据
// 搜索按钮数据
const searchInput = reactive({
  changePriceSelId: "",
  createTime: '',
});
const houseTypeData=ref()// 房型数据

const addDialogVisible = ref(false); // 控制添加员工弹窗

// 批量改价数据（---------------------------------------）
const roomCloseDialogVisible = ref(false);
const inputPriceRef = ref();
const changePirceRoomType = ref(); // 批量改价房间类型
const changePrice = reactive({
  createTime: [[]],
});
const changePriceSelData = ref(); // 选中的房间数据
// 批量改价表格数据
const changePriceData = reactive({ list: [] });

// 改价记录数据（---------------------------------------）
const recordDialogVisible = ref(false);
const recordData = reactive({ list: [] }); // 改价记录数据
const recordPage = ref(1); // 当前页
const recordSize = ref(10); // 页数
const recordTotal = ref(10); // 页数
const recordRoomType = ref(); // 房间类型
const recordSearch = reactive({
  operationTime: "",
  keyWord: "",
  roomType: "",
  setDate: "",
});

// 表单验证
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(
  () => recordSearch.operationTime,
  (newVal, oldVal) => {
    console.log("监听时间:", newVal);
    if (newVal == null) {
      recordPriceSearch();
    }
  }
);
// 改价记录 价格日期
watch(
  () => recordSearch.setDate,
  (newVal, oldVal) => {
    console.log("监听时间:", newVal);
    if (newVal == null) {
      recordPriceSearch();
    }
  }
);

// 房价管理分页
const getList = async () => {
  loading.value = true;
  let data = {
    page: currentPage.value,
    size: pageSize.value,
    houseName: searchInput.changePriceSelId, //  房型
    // managerId: sessionStorage.getItem("token"),
  };
  if (searchInput.createTime) {
    data.date = searchInput.createTime;
  }
  let res = await axios({
    method: "get",
    url: api.value + "/house-price/housePricePage",
    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.page.records;
    let arr = [];
    res.data.data.dateTime.forEach((item) => {
      arr.push({
        dateTime: item,
      });
    });
    tableHead.value = arr;
    total.value = res.data.data.page.total;
    loading.value = false;
  } else {
    loading.value = false;
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};

// 搜索功能  改变日期和房型改变数据
const searchData = (val) => {
  // console.log(val);
  getList();
};
// const searchData = lodash.debounce(async () => {
//   getList();
// }, 300);

// 批量改价功能（------------------------------------）
const roomClose = () => {
  roomCloseDialogVisible.value = true;
  changePrice.createTime = [[]];
};
// 关闭批量改价
const cancelRoomClose = () => {
  roomCloseDialogVisible.value = false;
  changePriceData.list = [];
  changePriceSelData.value = [];
};
// 批量改价中表格设置价格按钮
const inputPrice = (row) => {
  row.inputPriceShow = false;
  // nextTick(() => {
  //   if (inputPriceRef.value) {
  //     inputPriceRef.value.focus();
  //   }
  // });
};
// 批量改价中表格设置价格按钮失去焦点
const inputPriceBlur = (row) => {
  row.inputPriceShow = true;
};
// 勾选房间类型后表格添加相应的数据
const changePriceSelcet = (val) => {
  // console.log(val);
  // console.log(changePriceSelData.value);
  changePriceData.list = [];
  changePriceSelData.value.forEach((item) => {
    changePirceRoomType.value.forEach((i) => {
      // console.log(item == i.id);
      if (item == i.id) {
        changePriceData.list.push(i);
      }
    });
  });
};
// 批量改价 删除时间段
const delChangePriceTime = (index) => {
  changePrice.createTime = changePrice.createTime.filter((i, ind) => {
    return index != ind;
  });
};
// 批量改价 添加时间段
const addChangePriceTime = () => {
  if (changePrice.createTime.length <= 10) {
    changePrice.createTime.push([]);
  } else {
    ElMessage({
      type: "warning",
      showClose: true,
      message: "最多可添加10个时间段",
      center: true,
    });
  }
};
// 批量改价 确定改价
const notarizeRoomClose = async () => {
  let dateList = [];
  changePrice.createTime.forEach((item) => [dateList.push(item.join(","))]);
  // console.log(dateList);
  let priceList = [];
  changePriceData.list.forEach((item) => {
    console.log(item);
    priceList.push({
      managerId: item.managerId,
      houseId: item.id,
      price: item.price,
      createId: sessionStorage.getItem("roomId"),
    });
  });
  let data = {
    dateList: dateList,
    priceList: priceList,
  };
  let res = await axios({
    method: "post",
    url: api.value + "/mhotel/house/price/modifyPriceBatch.action",
    headers: {
      // token: sessionStorage.getItem("token"),
      // user_head: sessionStorage.getItem("userhead"),
    },
    data: data,
  });
  if (res.data.code == 200) {
    getList();
    roomCloseDialogVisible.value = false;
    changePriceData.list = [];
    changePriceSelData.value = [];
    ElMessage({
      type: "success",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
  console.log(res, "确定改价");
};

// 改价记录弹窗(---------------------------------------)
const recordPrice = async () => {
  recordDialogVisible.value = true;
  recordPriceData();
};
// 改价数据
const recordPriceData = async () => {
  let data = {
    page: recordPage.value,
    rows: recordSize.value,
    managerId: sessionStorage.getItem("token"),
    houseId: recordSearch.roomType, //  房型id
    operationName: recordSearch.keyWord, // 关键字查询
  };
  if (recordSearch.operationTime) {
    data.operationTime = recordSearch.operationTime.join(",");
  }
  if (recordSearch.setDate) {
    data.setDate = recordSearch.setDate.join(",");
  }
  let res = await axios({
    method: "get",
    url: api.value + "/mhotel/house/price/queryPageHistory.action",
    headers: {
      // token: sessionStorage.getItem("token"),
      // user_head: sessionStorage.getItem("userhead"),
    },
    params: data,
  });
  if (res.data.code == 200) {
    recordData.list = res.data.data.pageList;
    recordTotal.value = res.data.data.total;
  }
  console.log(res, "改价记录");
};
// 查询数据
const recordPriceSearch = () => {
  recordPriceData();
};
// 取消改价记录
const cancelRecord = () => {
  recordDialogVisible.value = false;
};

// 确认添加员工
// 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 importExcel = lodash.debounce(async () => {
  let data = new FormData();
  data.set("managerId", sessionStorage.getItem("token"));
  data.set("houseId", recordSearch.roomType);
  data.set("operationName", recordSearch.keyWord);
  if (recordSearch.operationTime) {
    data.set("operationTime", recordSearch.operationTime.join(","));
  }
  let res = await axios({
    method: "post",
    url: api.value + "/mhotel/house/price/exportHistory.action",
    headers: {
      // token: sessionStorage.getItem("token"),
    },
    data: 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,
    });
  }
}, 1000);

// 表格斑马纹颜色修改
const tableRowClassName = ({ row, rowIndex }) => {
  if (rowIndex % 2 === 0) {
    return "even";
  } else if (rowIndex % 2 !== 0) {
    return "odd";
  }
  return "";
};
// 表格斑马纹颜色修改
const tableRowClassName2 = ({ row, rowIndex }) => {
  if (rowIndex % 2 === 0) {
    return "even2";
  } else if (rowIndex % 2 !== 0) {
    return "odd2";
  }
  return "";
};
// 分页
const handleCurrentChange = (value) => {
  // console.log(value);
  currentPage.value = value;
  getList();
};
// 分页
const handleCurrentChange2 = (value) => {
  // console.log(value);
  recordPage.value = value;
  recordPriceData();
};

onBeforeMount(async () => {
  api.value = store.state.user.api;
  const data = {
    managerId: sessionStorage.getItem("token"),
  };
  let res = await axios({
    method: "get",
    url: api.value + "house-price/roomType",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: data,
  });
  console.log(res, "房型下拉框数据");
  houseTypeData.value=res.data.data.day
  // changePriceSelect.value = res.data.data;
  // recordRoomType.value = res.data.data;
  // changePirceRoomType.value = res.data.data;
  // searchInput.changePriceSelId = changePriceSelect.value[0].id;
  getList();
});
</script>

<style scoped lang="scss">
.content-box {
  width: calc(100% - 40px);
  height: calc(100% - 105px);
  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);
    }
  }

  .tabData {
    width: calc(100% - 60px);
    height: calc(100% - 61px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    .middle {
      width: 100%;
      margin: 0 auto;

      color: #000;

      // border-bottom: 1px solid rgb(231, 231, 231);
      .filter {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 10px;

        .filter_block {
          display: flex;
        }

        .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;
      }
    }

    .footer {
      width: 100%;
     flex:1;
      margin: 10px auto 0;

      .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 td) {
          padding: 0;
          // border: 0;
          // border: 1px solid #ccc;
        }
      }
    }

    .pageSize {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 0 30px;
      height: 60px;

      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);
          border: 1px solid rgba(0, 97, 255, 1);
          color: rgba(0, 97, 255, 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;
        }
      }
    }
  }

  // 批量改价
  :deep(.roomCloseDilog) {
    // height: 540px;
    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: 0;

      // 上一步页面样式
      .first {
        ul {
          width: 316px;
          height: 324px;
          list-style: none;
          padding: 0;
          margin: 0;
          border: 1px solid rgba(230, 230, 230, 1);
          box-sizing: border-box;
          overflow: auto;

          li {
            display: flex;
            justify-content: space-between;
            padding-right: 17px;
            align-items: center;
            margin-top: 5px;

            .el-icon-close {
              cursor: pointer;
              width: 10px;
              height: 10px;
            }
          }
        }
      }

      .options {
        width: 96%;
        display: flex;
        flex-direction: row-reverse;
        padding: 30px 0;

        .queding {
          margin-left: 20px;
          color: #fff;
        }
      }

      // 批量改价样式
      .last {
        .hint {
          background-color: #e6ecfa;
          border: 1px solid #053dc8;
          display: flex;
          align-items: center;
          padding: 6px 24px;
          color: #000;

          img {
            width: 16px;
            margin: 0 3px;
          }
        }

        .roomUl {
          display: flex;
          flex-direction: column;

          color: #000;

          // align-items: center;
          .title {
            width: 100px;
            text-align: right;
            color: #000;
            margin: 20px 0;
            font-weight: 600;
            font-size: 16px;
          }

          .delRoom {
            width: 80%;
            margin-left: 40px;

            .date {
              width: 80px;
              height: 100%;
              transform: translateY(6px);
            }

            .el-input__wrapper {
              max-width: 350px;
            }

            .el-table--fit {
              .el-table__header-wrapper {
                background-color: #000;
                font-size: 14px;

                tr {
                  color: #000;
                }
              }

              .el-table__row {
                height: 40px;
                font-size: 14px;
                color: #000;
              }

              .el-table__row td {
                padding: 0;
                border: 0;

                .el-input__wrapper {
                  // border: 1px solid red;
                  max-width: 100px;
                  // box-shadow: none;
                  // background-color: transparent;
                  transform: translateX(46px);

                  .el-input__inner {
                    text-align: center;
                  }
                }
              }

              .el-table__body .even {
                background-color: #fff;
              }

              .el-table__body .odd {
                background-color: rgba(233, 242, 242, 1);
              }
            }
          }
        }

        .roomTime {
          margin: 10px 0;

          .delRoom {
            display: flex;
            align-items: flex-start;

            .el-input__wrapper {
              max-width: 350px;
            }

            // 选择日期
            .addDate {
              width: 450px;

              .addTime {
                display: flex;
                align-items: center;

                .imgTime {
                  display: flex;
                  align-items: center;
                  cursor: pointer;

                  img {
                    width: 15px;
                    margin-right: 5px;
                  }
                }

                span {
                  color: #096562;
                }

                .num {
                  font-size: 10px;
                  color: #a6a6a6;
                  margin-left: 10px;
                }
              }

              .elDate {
                max-height: 180px;
                overflow: auto;

                .time_li {
                  display: flex;
                  align-items: center;
                  margin-bottom: 10px;

                  img {
                    width: 22px;
                    height: 22px;
                    margin: 0 10px;
                    transform: rotate(45deg);
                    cursor: pointer;
                  }
                }
              }
            }
          }
        }

        .textarea {
          border-bottom: 1px solid #e9eaed;
          padding-bottom: 25px;

          .delRoom {
            width: 510px;
          }
        }
      }
    }
  }

  // 改价记录
  :deep(.recordDilog) {
    // height: 600px;
    overflow: hidden;
    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 {
      overflow: auto;
      padding: 0px 20px 10px 20px;

      .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: 10px 0 0 0;
          justify-content: start;

          .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;
        }
      }

      .pageSize {
        margin: 10px 0 10px 0;
      }

      .footer {
        width: 96%;
        // height: 402px;
        margin: 10px auto 20px;

        .el-table--fit {
          height: 100%;

          .el-table__header-wrapper {
            background-color: #000;
            font-size: 15px;

            tr {
              color: #000;
            }
          }

          .el-table__row {
            height: 50px;
            font-size: 15px;
            color: #000;

            .orderNum {
              color: rgba(111, 182, 184, 1);
              cursor: pointer;
            }
          }

          .el-table__row:nth-child(2n) {
            .el-table-fixed-column--right {
              background-color: rgba(240, 243, 247, 1);
            }
          }

          .el-table__row td {
            padding: 0;
            border: 0;
          }

          .el-button--primary {
            margin-left: 5px;
          }

          .el-table__body .even2 {
            background-color: #fff;
          }

          .el-table__body .odd2 {
            background-color: rgba(240, 243, 247, 1);
          }
        }
      }
    }
  }
}

.el-input {
  width: 192px;
}
</style>