iot-front-ui/src/components/scene/access/sceneAccessGuestManage.vue

<template>
  <div class="accessManage ">
    <div class="page-query-core" style="padding: 30px 15px">
      <Query :show="['time']" :query-data.sync="queryData" :search="search">
        <template #extraItem>
          <a-form-model-item label="访客" style="margin-left: 45px">
            <a-input style="width: 250px" v-model="queryData.guestName" placeholder="请输入姓名/手机号"/>
          </a-form-model-item>
          <a-form-model-item label="受访人" style="margin-left: 45px">
            <a-input style="width: 250px" v-model="queryData.name" placeholder="请输入姓名/手机号"/>
          </a-form-model-item>
          <div style="height: 20px"></div>
          <a-form-model-item label="访问事由" style="margin-left: 15px">
            <a-select v-model="queryData.objective" style="width: 250px">
              <a-select-option v-for="(item,index) in objectiveOptions" :key="index" :value="item.value">
                {{ item.label }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="公司" style="">
            <a-select v-model="queryData.company" style="width: 150px">
              <a-select-option v-for="(item,index) in companyOptions" :key="index" :value="item.value">
                {{ item.label }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </template>
      </Query>
    </div>

    <div class="accessManage-body">
      <a-table :columns="tableColumns" :data-source="tableData" :pagination="false"
               :scroll="{ y: tableContainerHeight }" bordered>
        <a-button slot="action" slot-scope="text" type="link">
          查看
        </a-button>
      </a-table>

      <div style="width: 100%;text-align: right;margin-top: 15px;">
        <a-pagination ref="pagination"
                      :showQuickJumper="true"
                      :show-size-changer="true"
                      :show-total="showTotal"
                      v-model:current="currentPage"
                      :default-current="1"
                      :total="500"
                      @showSizeChange="onShowSizeChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import Query from "@/components/common/query.vue";

export default {
  components: {
    Query
  },
  data() {
    return {
      currentPage: 1,
      queryData: {
        objective: '1',
        company: '0'
      },
      objectiveOptions: [
        {
          label: '全部',
          value: '1'
        },
        {
          label: '开会',
          value: '2'
        },
        {
          label: '交流',
          value: '3'
        },
      ],
      companyOptions: [
        {
          label: '全部',
          value: '0'
        },{
          label: '北京电信规划院',
          value: '1'
        },
      ],
      tableContainerHeight: 500,
      tableColumns: [
        {
          title: '序号',
          dataIndex: 'index',
          key: 'index',
          align: "center",
          width: 80,
          customRender: (text, record, index) => `${index + 1}`
        },
        {
          title: '姓名',
          dataIndex: 'name',
          key: 'name',
        },
        {
          title: '访客手机号',
          dataIndex: 'people_type',
          key: 'people_type',
        },
        {
          title: '所属公司',
          dataIndex: 'department',
          key: 'department',
        },
        {
          title: '受访人',
          dataIndex: 'interviewee',
          key: 'interviewee',
        },
        {
          title: '访问事由',
          dataIndex: 'equipment',
          key: 'equipment',
        },
        {
          title: '受访人手机号',
          dataIndex: 'phone',
          key: 'phone',
        },
        {
          title: '通行时间',
          dataIndex: 'time',
          key: 'time',
        },
        {
          title: '通行方向',
          dataIndex: 'direction',
          key: 'direction',
        },
        //{
        //  title: '行为感知',
        //  key: 'operation',
        //  fixed: 'right',
        //  width: 100,
        //  scopedSlots: {customRender: 'action'},
        //},

      ],
      tableData: [
        {
          key: '1',
          name: "潘夏彤",
          people_type: "自有员工",
          department: "办公室",
          time: "进：2022-08-26 12:00:00",
          equipment: "ZY010012",
          direction: "进入B3",
          interviewee: "某某某", behavior: "",
        },
        {
          key: '2',
          name: "庞慧",
          people_type: "协作员工",
          department: "规划院-办公室",
          time: "进：2022-08-26 12:00:00",
          equipment: "ZY010012",
          direction: "进入1F",
          interviewee: "某某某",
          behavior: "",
        },
        {
          key: '3',
          name: "李天泽",
          people_type: "访客",
          department: "规划院-产品中心",
          time: "进：2022-08-26 12:00:00",
          equipment: "ZY010012",
          direction: "进入B2",
          interviewee: "某某某", behavior: "",
        },
        {
          key: '4',
          name: "李天泽",
          people_type: "访客",
          department: "规划院-产品中心",
          time: "进：2022-08-26 12:00:00",
          equipment: "ZY010012",
          direction: "进入B2",
          interviewee: "某某某", behavior: "",
        },
        {
          key: '5',
          name: "李天泽",
          people_type: "访客",
          department: "规划院-产品中心",
          time: "进：2022-08-26 12:00:00",
          equipment: "ZY010012",
          direction: "进入B2",
          interviewee: "某某某", behavior: "",
        },
        {
          key: '6',
          name: "李天泽",
          people_type: "访客",
          department: "规划院-产品中心",
          time: "进：2022-08-26 12:00:00",
          equipment: "ZY010012",
          direction: "进入B2",
          interviewee: "某某某", behavior: "",
        },
        {
          key: '7',
          name: "李天泽",
          people_type: "访客",
          department: "规划院-产品中心",
          time: "进：2022-08-26 12:00:00",
          equipment: "ZY010012",
          direction: "进入B2",
          interviewee: "某某某", behavior: "",
        },
        {
          key: '8',
          name: "李天泽",
          people_type: "访客",
          department: "规划院-产品中心",
          time: "进：2022-08-26 12:00:00",
          equipment: "ZY010012",
          direction: "进入B2",
          interviewee: "某某某", behavior: "",
        },
        {
          key: '9',
          name: "李天泽",
          people_type: "访客",
          department: "规划院-产品中心",
          time: "进：2022-08-26 12:00:00",
          equipment: "ZY010012",
          direction: "进入B2",
          interviewee: "某某某", behavior: "",
        },
        {
          key: '10',
          name: "李天泽",
          people_type: "访客",
          department: "规划院-产品中心",
          time: "进：2022-08-26 12:00:00",
          equipment: "ZY010012",
          direction: "进入B2",
          interviewee: "某某某", behavior: "",
        },
        {
          key: '11',
          name: "李天泽",
          people_type: "访客",
          department: "规划院-产品中心",
          time: "进：2022-08-26 12:00:00",
          equipment: "ZY010012",
          direction: "进入B2",
          interviewee: "某某某", behavior: "",
        },
        {
          key: '12',
          name: "李天泽",
          people_type: "访客",
          department: "规划院-产品中心",
          time: "进：2022-08-26 12:00:00",
          equipment: "ZY010012",
          direction: "进入B2",
          interviewee: "某某某", behavior: "",
        },
        {
          key: '13',
          name: "李天泽",
          people_type: "访客",
          department: "规划院-产品中心",
          time: "进：2022-08-26 12:00:00",
          equipment: "ZY010012",
          direction: "进入B2",
          interviewee: "某某某", behavior: "",
        },
        {
          key: '14',
          name: "李天泽",
          people_type: "访客",
          department: "规划院-产品中心",
          time: "进：2022-08-26 12:00:00",
          equipment: "ZY010012",
          direction: "进入B2",
          interviewee: "某某某", behavior: "",
        },
        {
          key: '15',
          name: "李天泽",
          people_type: "访客",
          department: "规划院-产品中心",
          time: "进：2022-08-26 12:00:00",
          equipment: "ZY010012",
          direction: "进入B2",
          interviewee: "某某某", behavior: "",
        },
        {
          key: '16',
          name: "李天泽",
          people_type: "访客",
          department: "规划院-产品中心",
          time: "进：2022-08-26 12:00:00",
          equipment: "ZY010012",
          direction: "进入B2",
          interviewee: "某某某", behavior: "",
        },
        {
          key: '17',
          name: "李天泽",
          people_type: "访客",
          department: "规划院-产品中心",
          time: "进：2022-08-26 12:00:00",
          equipment: "ZY010012",
          direction: "进入B2",
          interviewee: "某某某", behavior: "",
        },
        {
          key: '18',
          name: "李天泽",
          people_type: "访客",
          department: "规划院-产品中心",
          time: "进：2022-08-26 12:00:00",
          equipment: "ZY010012",
          direction: "进入B2",
          interviewee: "某某某", behavior: "",
        },
        {
          key: '19',
          name: "李天泽",
          people_type: "访客",
          department: "规划院-产品中心",
          time: "进：2022-08-26 12:00:00",
          equipment: "ZY010012",
          direction: "进入B2",
          interviewee: "某某某", behavior: "",
        },
        {
          key: '20',
          name: "李天泽",
          people_type: "访客",
          department: "规划院-产品中心",
          time: "进：2022-08-26 12:00:00",
          equipment: "ZY010012",
          direction: "进入B2",
          interviewee: "某某某", behavior: "",
        },
        {
          key: '21',
          name: "李天泽",
          people_type: "访客",
          department: "规划院-产品中心",
          time: "进：2022-08-26 12:00:00",
          equipment: "ZY010012",
          direction: "进入B2",
          interviewee: "某某某", behavior: "",
        },
      ]
    }
  },
  mounted() {
  },
  methods: {
    showTotal(total, range) {
      let pageSize = range[1]-range[0]+1;
      let pages = Math.ceil(total/pageSize);
      return '共'+total+'条数据，第 '+this.currentPage+'/'+pages+' 页';
    },
    onShowSizeChange(val) {

    }
  }
}
</script>

<style lang="less" scoped>
.accessManage {
  width: 100%;
  height: 100%;

  .ant-form-inline .ant-form-item {
    margin-right: 60px;

  }

  .accessManage-body {
    background: white;
    border-radius: 4px;
    margin-top: 12px;
    padding: 15px;
  }

}
</style>