ioc-admin-ui/src/views/systemManagement/infoConfiguration/dialog/historyPeople.vue

<template>
  <el-dialog
    v-dialog-drag
    class="history_people_dialog"
    title="历史记录"
    :visible.sync="dialogVisible"
    @before-close="close"
    width="900px"
    left
  >
    <el-divider></el-divider>
    <div class="table_con">
      <div
        v-for="(item, index) in list"
        :key="index"
      >
        <div class="time">
          {{$dayjs(item.date).format("YYYY-MM-DD HH:mm:ss").replace("-","年").replace("-","月").replace(" ","日 ")}}
        </div>
        <div class="table">
          <el-table
            :data="item.data"
            tooltip-effect="dark"
            :header-cell-style="{ textAlign: 'center' }"
            :cell-style="{ textAlign: 'center' }"
            height="250"
            style="width: 100%"
          >
            <el-table-column
              type="index"
              width="50"
              label="序号"
            >
            </el-table-column>
            <el-table-column
              prop="name"
              label="姓名"
            >
            </el-table-column>
            <el-table-column
              prop="job_number"
              label="工号"
            >
            </el-table-column>
            <el-table-column
              prop="phone_number"
              label="联系方式"
            >
            </el-table-column>
            <el-table-column
              prop="territory"
              label="职责范围"
            >
            </el-table-column>
            <el-table-column
              prop="photo"
              label="照片"
            >
              <template slot-scope="scope">
                <el-image
                  :src="scope.row.photo"
                  style="width: 40px; height: 40px;"
                  :preview-src-list="[scope.row.photo]"
                ></el-image>
              </template>
            </el-table-column>
            <el-table-column
              prop="status"
              label="状态"
            >
            </el-table-column>
            <el-table-column
              label="值班日期"
              width="360"
            >
              <template slot-scope="scope">
                {{$dayjs(scope.row.date.start).format("YYYY-MM-DD HH:mm:ss")}} 至 {{$dayjs(scope.row.date.stop).format("YYYY-MM-DD HH:mm:ss")}}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import api from "@/api/infoConfig/api";
export default {
  props: {
    itemInfo: {
      type: Object,
    },
  },
  data() {
    return {
      dialogVisible: false,
      list: [
        {
          time: new Date("2023-02-01 08:00:00"),
          data: [
            {
              name: "张三",
              job_number: "01111",
              phone_number: "13945678901",
              territory: "九层前台",
              photo:
                "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
              status: "正常",
              date: {
                start: 1683876585974,
                stop: 1683876601553,
              },
            },
            {
              name: "张三",
              job_number: "01111",
              phone_number: "13945678901",
              territory: "九层前台",
              photo:
                "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
              status: "正常",
              date: {
                start: 1683876585974,
                stop: 1683876601553,
              },
            },
          ],
        },
        {
          time: new Date("2023-03-01 08:00:00"),
          data: [
            {
              name: "张三",
              job_number: "01111",
              phone_number: "13945678901",
              territory: "九层前台",
              photo:
                "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
              status: "正常",
              date: {
                start: 1683876585974,
                stop: 1683876601553,
              },
            },
            {
              name: "张三",
              job_number: "01111",
              phone_number: "13945678901",
              territory: "九层前台",
              photo:
                "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
              status: "正常",
              date: {
                start: 1683876585974,
                stop: 1683876601553,
              },
            },
            {
              name: "张三",
              job_number: "01111",
              phone_number: "13945678901",
              territory: "九层前台",
              photo:
                "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
              status: "正常",
              date: {
                start: 1683876585974,
                stop: 1683876601553,
              },
            },
          ],
        },
        {
          time: new Date("2023-04-01 08:00:00"),
          data: [
            {
              name: "张三",
              job_number: "01111",
              phone_number: "13945678901",
              territory: "九层前台",
              photo:
                "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
              status: "正常",
              date: {
                start: 1683876585974,
                stop: 1683876601553,
              },
            },
            {
              name: "张三",
              job_number: "01111",
              phone_number: "13945678901",
              territory: "九层前台",
              photo:
                "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
              status: "正常",
              date: {
                start: 1683876585974,
                stop: 1683876601553,
              },
            },
          ],
        },
      ],
    };
  },
  mounted() {
    this.getHistroyPeople();
  },
  methods: {
    getHistroyPeople() {
      api
        .getSecurityInfoConfigurationHistory({
          id: this.itemInfo.data.id,
        })
        .then((result) => {
          this.list = result.data.data;
        })
        .catch((err) => {});
    },
    close() {
      this.dialogVisible = false;
    },
  },
  watch: {
    dialogVisible(newVal) {
      if (newVal) this.getHistroyPeople();
    },
  },
};
</script>

<style lang="less" scope>
.history_people_dialog {
  .el-dialog__header {
    color: #333333;
    padding-bottom: 20px;
  }

  .el-dialog__headerbtn {
    font-size: 25px;
  }

  .el-dialog__body {
    padding: 0;
    height: 500px;
  }

  .el-divider--horizontal {
    display: block;
    height: 1px;
    width: 100%;
    margin: 0 !important;
  }
  .table_con {
    width: 100%;
    height: 100%;
    overflow: hidden;
    overflow-y: auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    .time {
      text-align: left;
      margin-top: 10px;
      height: 40px;
      line-height: 40px;
      font-size: 17px;
      font-weight: bold;
    }
  }
}
</style>