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="true"
                placeholder="请选择日期"
                @change="searchData"
              />
            </div>
            <div class="condition">
              <span>房间类型 : </span>
              <el-select
                :clearable="true"
                v-model="searchInput.houseType"
                class="m-2"
                style="width: 180px"
                placeholder="请选择房间类型"
                @change="houseTypeChange"
              >
                <el-option label="全日房" :value="1" />
                <el-option label="钟点房" :value="2" />
              </el-select>
            </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.roomName"
                  v-for="i in houseTypeData"
                  :key="i.id"
                />
                <!-- <el-option label="标准房" value="标准房" /> -->
              </el-select>
            </div>
          </div>
          <div class="filter_block">
            <el-button
              v-if="flagBtn.pilianggaijia == 1"
              style="margin-left: 20px"
              color="rgba(0, 97, 255, 1)"
              type="primary"
              class="search"
              @click="roomClose"
              ><span>批量改价</span></el-button
            >
            <el-button
              v-if="flagBtn.gaijiajilu == 1"
              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="本地房型"
          >
            <template #default="{ row }">
              <span
                >{{ row.houseName
                }}<span style="color: #1e7dfb"
                  >( {{ row.houseType == 1 ? "全" : "钟" }} )</span
                ></span
              >
            </template>
          </el-table-column>
          <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 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>
      <!-- 批量改价 -->
      <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="changePriceData.type"
                class="m-2"
                placeholder="请选择类型"
                @change="roomTypeChange"
              >
                <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="changeTypeSelect"
                v-model="changePriceData.list"
              >
                <el-checkbox
                  :label="i.roomName"
                  v-for="i in typeList"
                  :value="i.id"
                ></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="请选择日期"
                      :clearable="false"
                    />
                    <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.typeData"
                style="width: 100%; height: 280px"
                :header-cell-style="{
                  background: 'rgba(233, 242, 242, 1)',
                  height: '40px',
                  border: 0,
                }"
              >
                <el-table-column align="center" prop="roomName" label="房型" />
                <el-table-column align="center" />
                <el-table-column align="center" label="价格" width="200">
                  <template #default="{ row }">
                    <div>
                      <!-- <span v-if="row.inputPriceShow">{{ row.roomPrice }}</span> -->
                      <el-input
                        :clearable="false"
                        ref="inputPriceRef"
                        @change="inputPrice(row)"
                        v-model.trim="row.roomPrice"
                        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="1200"
        :before-close="cancelRecord"
      >
        <div class="middle">
          <div class="filter">
            <div class="condition">
              <span>房间类型 : </span>
              <el-select
                v-model="recordSearch.type"
                class="m-2"
                placeholder="请选择类型"
                @change="recordPriceSearch"
                @clear="recordPriceSearch"
                clearable
                style="width: 200px"
              >
                <el-option label="全日房" :value="1" />
                <el-option label="钟点房" :value="2" />
              </el-select>
            </div>
            <div class="condition">
              <span>房型名称 : </span>
              <el-select
                v-model="recordSearch.roomType"
                class="m-2"
                placeholder="请选择房型"
                @change="recordPriceSearch"
                @clear="recordPriceSearch"
                clearable
                style="width: 200px"
              >
                <el-option
                  :label="i.roomName"
                  :value="i.roomName"
                  v-for="i in houseTypeData"
                  :key="i.id"
                />
              </el-select>
            </div>
            <div class="condition">
              <span>操作时间 : </span>
              <el-date-picker
                v-model="recordSearch.operatingTime"
                type="daterange"
                range-separator="-"
                start-placeholder="起始时间"
                end-placeholder="结束时间"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                :prefix-icon="Calendar"
                placeholder="请选择日期"
                unlink-panels
                @change="recordPriceSearch"
              />
            </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="请选择日期"
                unlink-panels
                @change="recordPriceSearch"
              />
            </div>
            <div class="condition">
              <span>操作人 : </span>
              <el-input
                :clearable="true"
                @clear="recordPriceSearch"
                v-model.trim="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="房型">
              <template #default="{ row }">
                <span
                  >{{ row.houseName
                  }}<span style="color: #1e7dfb"
                    >( {{ row.houseType == 1 ? "全" : "钟" }} )</span
                  ></span
                >
              </template>
            </el-table-column>
            <el-table-column align="center" prop="setDate" label="价格日期" />
            <el-table-column
              align="center"
              prop="alterPrice"
              label="修改后价格"
            />
            <el-table-column align="center" prop="name" label="操作人" />
            <el-table-column align="center" prop="date" 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>
  </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 flagBtn = ref(); // 按钮权限
// 表格数据(-----------------------------------)
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 searchInput = reactive({
  changePriceSelId: "",
  createTime: "",
  houseType: "",
});
const houseTypeData = ref([]); // 房型数据

// 批量改价数据（---------------------------------------）
const roomCloseDialogVisible = ref(false);
const inputPriceRef = ref();
const changePrice = reactive({
  createTime: [[]],
}); // 日期列表
const typeList = ref(); // 类型列表
// 批量改价数据
const changePriceData = reactive({
  type: "", // 房间选择的类型
  list: [], // 类型勾选数据
  typeData: [],
});

// 改价记录数据（---------------------------------------）
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({
  operatingTime: "",
  setDate: "",
  keyWord: "",
  roomType: "", // 房型
  type: "", // 类型
});

// 表单验证
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" },
  ],
});

// 房价管理分页
const getList = async () => {
  loading.value = true;
  let data = {
    page: currentPage.value,
    size: pageSize.value,
    houseName: searchInput.changePriceSelId, //  房型
    houseType: searchInput.houseType,
    // 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;
    if (res.data.code == 500) {
      console.log(res.data);
      if (res.data.message == "无效token,请重新登入") {
        router.push({ path: "/login" });
      }
    }
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};

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

// 改变房间类型改变房间名称
const houseTypeChange = (val) => {
  searchInput.changePriceSelId = "";
  houseDatas().then((res) => {
    searchData();
  });
};

// 批量改价功能（------------------------------------）
const roomClose = () => {
  roomCloseDialogVisible.value = true;
  changePriceData.type = 1;
  roomTypeChange();
  changePrice.createTime = [[]];
};
// 选择类型改变房型数据
const roomTypeChange = async (val) => {
  changePriceData.typeData = [];
  changePriceData.list = [];
  let res = await axios({
    method: "get",
    url: api.value + "/house-price/roomType",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
  });
  console.log(res, "房型类型列表");
  if (res.data.code == 200) {
    if (changePriceData.type == 1) {
      typeList.value = res.data.data.day;
    } else if (changePriceData.type == 2) {
      typeList.value = res.data.data.hour;
    }
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};
// 关闭批量改价
const cancelRoomClose = () => {
  roomCloseDialogVisible.value = false;
  changePriceData.list = [];
  changePriceData.typeData = [];
};
// 批量改价中表格设置价格按钮
const inputPrice = (row) => {
  console.log(typeList.value, row.roomPrice);
  // if(row.roomPrice<0.01){
  //   row.roomPrice = ""
  //   ElMessage({
  //     type: "warning",
  //     showClose: true,
  //     message: "最低价格为0.01元,请重新设置",
  //     center: true,
  //   });
  // }
};

// 勾选房间类型后表格添加相应的数据
const changeTypeSelect = (val) => {
  changePriceData.typeData = [];
  typeList.value.forEach((item) => {
    changePriceData.list.forEach((i) => {
      if (item.id == i) {
        changePriceData.typeData.push(item);
      }
    });
  });
  console.log(changePriceData.typeData);
};
// 批量改价 删除时间段
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 dateTime = [];
  changePrice.createTime.forEach((item) => {
    if (item.length) {
      dateTime.push(item);
    }
  });
  let priceList = [];
  changePriceData.typeData.forEach((item) => {
    priceList.push({
      type: item.roomType,
      name: item.roomName,
      date: "",
      price: item.roomPrice,
    });
  });
  // console.log(dateTime,priceList);
  let arr = [];
  dateTime.forEach((item) => {
    priceList.forEach((i) => {
      arr.push({
        type: i.type,
        name: i.name,
        date: item.join(","),
        price: i.price,
      });
    });
  });
  console.log(arr);
  let flag = arr.every((i) => {
    return i.price >= 0.01 && i.price != "";
  });
  if (flag) {
    let data = {
      alterDtoList: arr,
      adminId: sessionStorage.getItem("permissionSettingId"),
    };
    let res = await axios({
      method: "post",
      url: api.value + "/house-price/alterPrice",
      headers: {
        token: sessionStorage.getItem("token"),
        user_head: sessionStorage.getItem("userhead"),
      },
      data: data,
    });
    console.log(res, "确定改价");
    if (res.data.code == 200) {
      getList();
      roomCloseDialogVisible.value = false;
      changePriceData.list = [];
      changePriceData.typeData = [];
      ElMessage({
        type: "success",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    } else {
      ElMessage({
        type: "error",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    }
  } else {
    ElMessage({
      type: "warning",
      showClose: true,
      message: "价格设置有误或价格不能为空",
      center: true,
    });
  }
};

// 改价记录弹窗(---------------------------------------)
const recordPrice = async () => {
  recordDialogVisible.value = true;
  recordSearch.operatingTime = "";
  recordSearch.setDate = "";
  recordSearch.keyWord = "";
  recordSearch.roomType = "";
  recordSearch.type = "";
  recordPriceData();
};
// 改价数据
const recordPriceData = async () => {
  let data = {
    page: recordPage.value,
    size: recordSize.value,
    adminId: sessionStorage.getItem("permissionSettingId"),
    type: recordSearch.type, // 房型
    operatingName: recordSearch.keyWord, // 操作人
    houseName: recordSearch.roomType,
  };
  // 操作时间
  if (recordSearch.operatingTime) {
    data.operatingTime = recordSearch.operatingTime.join(",");
  }
  // 价格日期
  if (recordSearch.setDate) {
    data.priceTime = recordSearch.setDate.join(",");
  }
  let res = await axios({
    method: "get",
    url: api.value + "/house-price/alterPriceRecord",
    headers: {
      // token: sessionStorage.getItem("token"),
      // user_head: sessionStorage.getItem("userhead"),
    },
    params: data,
  });
  console.log(res, "改价记录");
  if (res.data.code == 200) {
    recordData.list = res.data.data.list;
    recordTotal.value = res.data.data.totalCount;
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};
// 查询数据
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 = {
    type: recordSearch.type, // 房型
    operatingName: recordSearch.keyWord, // 操作人
    houseName: recordSearch.roomType,
  };
  // 操作时间
  if (recordSearch.operatingTime) {
    data.operatingTime = recordSearch.operatingTime.join(",");
  }
  // 价格日期
  if (recordSearch.setDate) {
    data.priceTime = recordSearch.setDate.join(",");
  }
  let res = await axios({
    method: "get",
    url: api.value + "/house-price/queryExport",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("user_head"),
    },
    params: data,
    responseType: "blob",
  });
  console.log(res, "导出改价记录");
  if (res.status == 200) {
    let name = `改价记录数据`;
    var content = res.data;
    var datas = new Blob([content]);
    var downloadUrl = window.URL.createObjectURL(datas);
    var anchor = document.createElement("a");
    anchor.href = downloadUrl;
    anchor.download = name + ".xlsx";
    anchor.click();
    window.URL.revokeObjectURL(datas);
    ElMessage({
      type: "success",
      showClose: true,
      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 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();
};
const houseDatas = async () => {
  const data = {
    type: searchInput.houseType,
  };
  let res = await axios({
    method: "get",
    url: api.value + "/house/displayBar",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: data,
  });
  console.log(res, "房型下拉框数据");
  houseTypeData.value = res.data.data;
};
onBeforeMount(async () => {
  api.value = store.state.user.api;
  const btnflag = JSON.parse(sessionStorage.getItem("btnflag"));
  flagBtn.value = btnflag.roomPrice;
  console.log(flagBtn.value, "按钮权限");
  houseDatas();
  // 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;
      overflow:auto;

      .el-table--fit {
        height: calc(100% - 60px);

        :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: #0061ff;
                }

                .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: 100%;
        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: 100%;
        // 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>