当前时间加日期处理

 

 

 

 

<template>
  <div class="task-box">
    <p class="title-p">人行记录</p>
    <div class="box">
      <tableList @onGetSelection="getSelection" :columns="columns" :data="dataList" :total="total">
        <!-- form表单查询内容 -->
        <div slot="search" style="display: flex">
          <Form ref="peopelListForm" :model="peopelListForm" :label-width="100" inline :label-colon="true">
            <Row>
              <Col span="24">
              <FormItem label="姓名">
                <Input style="width: 180px" type="text" v-model="peopelListForm.personName" placeholder="请输入关键词搜索"
                  clearable />
              </FormItem>
              <FormItem label="门禁点">
                <Input style="width: 180px" type="text" v-model="peopelListForm.doorName" placeholder="请输入关键词搜索"
                  clearable />
              </FormItem>
              <FormItem label="门禁点区域">
                <Input style="width: 180px" type="text" v-model="peopelListForm.doorRegionIndexCode"
                  placeholder="请输入关键词搜索" clearable />
              </FormItem>
              </Col>
            </Row>
            <FormItem label="事件时间">
              <Date-picker type="datetimerange" placeholder="选择日期" style="width: 320px" @on-change="getTime"
                :value="timearr" :clearable="false"></Date-picker>
            </FormItem>
          </Form>
          <div slot="operator" class="operator">
            <Button type="primary" @click="handleSubmit('peopelListForm')" style="margin-left: 30px">查询
            </Button>
            <Button @click="handleReset('peopelListForm')" style="margin-left: 8px">重置
            </Button>
          </div>
        </div>
        <!-- 操作列 -->
        <div slot-scope="{ row }" slot="createTime">
          <div>{{ row.createTime | chengearmTime }}</div>
        </div>
        <div slot-scope="{ row }" slot="inAndOutType">
          <div>{{ inAndOutTypeABC[row.inAndOutType] }}</div>
        </div>
        <div slot-scope="{ row }" slot="eventTime">
          <div>{{ row.eventTime ? eventTime(row.eventTime) : "/" }}</div>
        </div>
        <div slot="paging">
          <paging :total="total" :current="peopelListForm.pageNo" @changePage="changePage"
            @changePageSize="changePageSize"></paging>
        </div>
      </tableList>
    </div>
  </div>
</template>
<script>
import { accessrecord } from "@/api/people.js";
import { formatDate } from "@/libs";
import { setColumns } from "../../libs/table-list"; // 处理表格中colmns数据的js方法
import paging from "../components/paging";
import tableList from "../components/table-list"; // 表格组件

// 弹窗
export default {
  components: { tableList, paging },
  data() {
    return {
      total: 0,
      peopelListForm: {
        personName: "",
        doorName: "",
        doorRegionIndexCode: "",
        startTime: "",
        endTime: "",
        receiveStartTime: "",
        receiveEndTime: "",
      },
      dataList: [],
      columns: [],
      checkedId: [], //多选的id
      timearr: [
        // "2022-12-01 00:00:00","2022-12-01 10:00:00"
      ],
      inAndOutTypeABC: {
        1: "进",
        0: "出",
        "-1": "未知",
      },
    };
  },
  watch: {},
  filters: {
    chengearmTime(armTime) {
      return formatDate(Number(armTime), "yyyy-MM-dd hh:mm:ss");
    },
  },
  mounted() {
    this.columns = setColumns([true, true, false], "peoplelist", 200);
  },
  created() {
    let time = new Date();
    let nowTime = this.timestampToTime(
      time.toLocaleString("en-US", { hour12: false }).split(" ")
    );
    this.timearr = [nowTime[0] + " " + "00:00:00", nowTime[1]];
    this._list();
  },
  methods: {
    timestampToTime(times) {
      let time = times[1];
      let mdy = times[0];
      mdy = mdy.split("/");
      let month = parseInt(mdy[0]);
      let day = parseInt(mdy[1]);
      let year = parseInt(mdy[2]);
      let time1 = year + "-" + month + "-" + day + " " + time;
      let time2 = year + "-" + month + "-" + day;
      return [time2, time1];
    },
    eventTime(v) {
      let d = v.replace(/T/, " ");
      let dd = d.substring(0, d.indexOf("+"));
      return dd;
    },
    getTime(e) {
      if (e) {
        this.timearr = e;
        this.peopelListForm.startTime = e[0].replace(/[\s]/g, "T") + "+08:00";
        this.peopelListForm.endTime = e[1].replace(/[\s]/g, "T") + "+08:00";
        this.peopelListForm.receiveStartTime =
          e[0].replace(/[\s]/g, "T") + "+08:00";
        this.peopelListForm.receiveEndTime =
          e[1].replace(/[\s]/g, "T") + "+08:00";
      } else {
        this.peopelListForm.startTime =
          this.timearr[0].replace(/[\s]/g, "T") + "+08:00";
        this.peopelListForm.endTime =
          this.timearr[1].replace(/[\s]/g, "T") + "+08:00";
        this.peopelListForm.receiveStartTime =
          this.timearr[0].replace(/[\s]/g, "T") + "+08:00";
        this.peopelListForm.receiveEndTime =
          this.timearr[1].replace(/[\s]/g, "T") + "+08:00";
      }
      //2004-05-03T17:30:08+08:00或20040503T173008+0对应时间为2004年5月3日下午5点30分8秒

    },
    //撤单
    pdRow(row, type, typename) {
      this.$Modal.confirm({
        title: "提示",
        content: `您确定要${typename}吗？`,
        onOk: () => {
          //
          // console.log("row, type, typename", row, type, typename);
        },
        onCancel: () => {
          // this.$Message.info("已取消");
        },
      });
    },

    //列表
    _list() {
      this.peopelListForm.startTime =
        this.timearr[0].replace(/[\s]/g, "T") + "+08:00";
      this.peopelListForm.endTime =
        this.timearr[1].replace(/[\s]/g, "T") + "+08:00";
      this.peopelListForm.receiveStartTime =
        this.timearr[0].replace(/[\s]/g, "T") + "+08:00";
      this.peopelListForm.receiveEndTime =
        this.timearr[1].replace(/[\s]/g, "T") + "+08:00";
      accessrecord(this.peopelListForm).then((res) => {
        let d = res.data;
        if (d.code == "00000") {
          this.dataList = d.data.list || [];
          this.total = d.data.total;
        } else {
          this.$Message.error(res.data.desc);
          this.dataList = []
          this.total = 0
        }
      });
    },
    // 分页处理
    changePage(value) {
      this.peopelListForm.pageNo = value;
      this._list();
    },
    changePageSize(value) {
      this.peopelListForm.pageSize = value;
      this._list();
    },
    // 表单的提交和重置
    handleSubmit() {
      this.$Message["success"]({
        background: true,
        content: "查询成功",
      });
      this._list();
    },
    handleReset(name) {
      this.$Message["success"]({
        background: true,
        content: "重置成功",
      });
      Object.keys(this.peopelListForm).forEach((key) => {
        this.peopelListForm[key] = "";
      });
      // this.timearr = ["2022-12-01 00:00:00", "2022-12-01 10:00:00"];
      let time = new Date();
      let nowTime = this.timestampToTime(
        time.toLocaleString("en-US", { hour12: false }).split(" ")
      );
      this.timearr = [nowTime[0] + " " + "00:00:00", nowTime[1]];
      this.peopelListForm.pageNo = 1;
      this.peopelListForm.pageSize = 10;

      this._list();
    },
    //多选
    getSelection(value) {
      // 获取从子组件中传过来的值
      this.checkedId = value.map((item) => {
        return item.id;
      });
    },

    //批量
    handleEnableBatch() {
      if (this.checkedId.length <= 0) {
        this.$Message.error("请先选择");
        return false;
      }
      this.$Modal.confirm({
        title: "提示",
        content: "确定启用选中的账号？",
        onOk: () => {
          console.log("checkedId", this.checkedId);
          // let data = {
          //   ids: this.ids.join(","),
          // };
          // enableBatch(data).then((res) => {
          //   if (res.data.success == true) {
          //     this.$Message.success(res.data.msg);
          //     this.ids = [];
          //     this.getData();
          //   }
          // });
        },
        onCancel: () => {
          this.$Message.info("已取消");
        },
      });
    },
  },
  destroyed() { },
};
</script>
<style lang="less" scoped>
.task-box {
  .box {
    position: relative;
  }
}

//树形选中
.active {
  color: #66b1ff;
}
</style>