|
@@ -1,487 +1,525 @@
|
|
|
<template>
|
|
|
- <div class="accessManage border-shadow">
|
|
|
- <div class="container">
|
|
|
- <div class="search_container">
|
|
|
- <a-form class="ant-advanced-search-form">
|
|
|
- <a-row :gutter="24">
|
|
|
- <a-col :span="6">
|
|
|
- <a-radio-group default-value="a" button-style="solid">
|
|
|
- <a-radio-button value="a">
|
|
|
- 入场
|
|
|
- </a-radio-button>
|
|
|
- <a-radio-button value="b">
|
|
|
- 出场
|
|
|
- </a-radio-button>
|
|
|
- </a-radio-group>
|
|
|
- </a-col>
|
|
|
- <a-col :span="6">
|
|
|
- <a-form-item :label="'部门:'">
|
|
|
- <a-select default-value="0">
|
|
|
- <a-select-option value="0">
|
|
|
- 办公室
|
|
|
- </a-select-option>
|
|
|
- <a-select-option value="1">
|
|
|
- 餐厅
|
|
|
- </a-select-option>
|
|
|
- </a-select>
|
|
|
- </a-form-item>
|
|
|
- </a-col>
|
|
|
- <a-col :span="6">
|
|
|
- <a-form-item :label="'人员类型:'">
|
|
|
- <a-select default-value="0">
|
|
|
- <a-select-option value="0">
|
|
|
- 自由员工
|
|
|
- </a-select-option>
|
|
|
- <a-select-option value="1">
|
|
|
- 外派
|
|
|
- </a-select-option>
|
|
|
- </a-select>
|
|
|
- </a-form-item>
|
|
|
- </a-col>
|
|
|
- <a-col :span="6">
|
|
|
- <a-button type="primary">
|
|
|
- 查询
|
|
|
- </a-button>
|
|
|
- </a-col>
|
|
|
- </a-row>
|
|
|
- <a-row :gutter="24">
|
|
|
- <a-col :span="6">
|
|
|
- <a-form-item :label="'订单状态:'">
|
|
|
- <a-select default-value="0">
|
|
|
- <a-select-option value="0">
|
|
|
- 进
|
|
|
- </a-select-option>
|
|
|
- <a-select-option value="1">
|
|
|
- 出
|
|
|
- </a-select-option>
|
|
|
- </a-select>
|
|
|
- </a-form-item>
|
|
|
- </a-col>
|
|
|
- <a-col :span="6">
|
|
|
- <a-form-item :label="'通行方向:'">
|
|
|
- <a-select default-value="0">
|
|
|
- <a-select-option value="0">
|
|
|
- 进
|
|
|
- </a-select-option>
|
|
|
- <a-select-option value="1">
|
|
|
- 出
|
|
|
- </a-select-option>
|
|
|
- </a-select>
|
|
|
- </a-form-item>
|
|
|
- </a-col>
|
|
|
- <a-col :span="6">
|
|
|
- <a-form-item :label="'通行时间:'">
|
|
|
- <timeRange ref="timeRange" v-bind="{
|
|
|
- timeFormat: 'YYYY-MM-DD HH:mm:ss'
|
|
|
- }"></timeRange>
|
|
|
- </a-form-item>
|
|
|
- </a-col>
|
|
|
- <a-col :span="6">
|
|
|
- <a-button>
|
|
|
- 重置
|
|
|
- </a-button>
|
|
|
- </a-col>
|
|
|
- </a-row>
|
|
|
- </a-form>
|
|
|
- </div>
|
|
|
- <div ref="table_container" class="table_container">
|
|
|
+ <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: 58px">
|
|
|
+ <a-input style="width: 250px" v-model="queryData.guestName" placeholder="请输入车牌号"/>
|
|
|
+ </a-form-model-item>
|
|
|
+ <div style="height: 20px"></div>
|
|
|
+ <a-form-model-item label="订单状态" style="margin-left: 15px">
|
|
|
+ <a-select v-model="queryData.status" style="width: 250px">
|
|
|
+ <a-select-option v-for="(item,index) in statusOptions" :key="index" :value="item.value">
|
|
|
+ {{ item.label }}
|
|
|
+ </a-select-option>
|
|
|
+ </a-select>
|
|
|
+ </a-form-model-item>
|
|
|
+ <a-form-model-item label="支付方式" style="margin-left: 0px">
|
|
|
+ <a-select v-model="queryData.method" style="width: 250px">
|
|
|
+ <a-select-option v-for="(item,index) in methodOptions" :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>
|
|
|
- </div>
|
|
|
- <div class="footer">
|
|
|
- <a-pagination show-quick-jumper show-size-changer :default-current="1" :total="500" :page-size="10"
|
|
|
- :show-total="(total, range) => `共 ${total} 条`" />
|
|
|
- <!-- @change="onChange" -->
|
|
|
- </div>
|
|
|
+ <a-table :columns="tableColumns" :data-source="tableData" :pagination="false"
|
|
|
+ :scroll="{ y: tableContainerHeight }" bordered>
|
|
|
+ <a-button slot="action" slot-scope="text" type="link" @click="()=>{showDetail=true}">
|
|
|
+ 查看
|
|
|
+ </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>
|
|
|
-</template>
|
|
|
|
|
|
-<script>
|
|
|
-import timeRange from "@/components/common/timeRange.vue";
|
|
|
-export default {
|
|
|
- components: {
|
|
|
- timeRange,
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- tableContainerHeight: 100,
|
|
|
- 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: 'equipment',
|
|
|
- key: 'equipment',
|
|
|
- },
|
|
|
- {
|
|
|
- title: '入场时间',
|
|
|
- dataIndex: 'time',
|
|
|
- key: 'time',
|
|
|
- },
|
|
|
- {
|
|
|
- title: '出场时间',
|
|
|
- dataIndex: 'outtime',
|
|
|
- key: 'outtime',
|
|
|
- },
|
|
|
- {
|
|
|
- title: '操作',
|
|
|
- key: 'operation',
|
|
|
- fixed: 'right',
|
|
|
- width: 100,
|
|
|
- scopedSlots: { customRender: 'action' },
|
|
|
- },
|
|
|
- ],
|
|
|
- // name:"",
|
|
|
- // people_type:"",
|
|
|
- // department:"",
|
|
|
- // time:"",
|
|
|
- // equipment:"",
|
|
|
- // direction:"",
|
|
|
- // behavior:"",
|
|
|
- tableData: [
|
|
|
- {
|
|
|
- key: '1',
|
|
|
- name: "潘夏彤",
|
|
|
- people_type: "自有员工",
|
|
|
- department: "办公室",
|
|
|
- time: "进:2022-08-26 12:00:00",
|
|
|
- outtime: "进:2022-08-26 12:00:00",
|
|
|
- equipment: "ZY010012",
|
|
|
- direction: "进入B3",
|
|
|
- behavior: "",
|
|
|
- },
|
|
|
- {
|
|
|
- key: '2',
|
|
|
- name: "庞慧",
|
|
|
- people_type: "协作员工",
|
|
|
- department: "规划院-办公室",
|
|
|
- time: "进:2022-08-26 12:00:00",
|
|
|
- outtime: "进:2022-08-26 12:00:00",
|
|
|
- equipment: "ZY010012",
|
|
|
- direction: "进入1F",
|
|
|
- behavior: "",
|
|
|
- },
|
|
|
- {
|
|
|
- key: '3',
|
|
|
- name: "李天泽",
|
|
|
- people_type: "访客",
|
|
|
- department: "规划院-产品中心",
|
|
|
- time: "进:2022-08-26 12:00:00",
|
|
|
- outtime: "进:2022-08-26 12:00:00",
|
|
|
- equipment: "ZY010012",
|
|
|
- direction: "进入B2",
|
|
|
- behavior: "",
|
|
|
- },
|
|
|
- {
|
|
|
- key: '4',
|
|
|
- name: "李天泽",
|
|
|
- people_type: "访客",
|
|
|
- department: "规划院-产品中心",
|
|
|
- time: "进:2022-08-26 12:00:00",
|
|
|
- outtime: "进:2022-08-26 12:00:00",
|
|
|
- equipment: "ZY010012",
|
|
|
- direction: "进入B2",
|
|
|
- behavior: "",
|
|
|
- },
|
|
|
- {
|
|
|
- key: '5',
|
|
|
- name: "李天泽",
|
|
|
- people_type: "访客",
|
|
|
- department: "规划院-产品中心",
|
|
|
- time: "进:2022-08-26 12:00:00",
|
|
|
- outtime: "进:2022-08-26 12:00:00",
|
|
|
- equipment: "ZY010012",
|
|
|
- direction: "进入B2",
|
|
|
- behavior: "",
|
|
|
- },
|
|
|
- {
|
|
|
- key: '6',
|
|
|
- name: "李天泽",
|
|
|
- people_type: "访客",
|
|
|
- department: "规划院-产品中心",
|
|
|
- time: "进:2022-08-26 12:00:00",
|
|
|
- outtime: "进:2022-08-26 12:00:00",
|
|
|
- equipment: "ZY010012",
|
|
|
- direction: "进入B2",
|
|
|
- behavior: "",
|
|
|
- },
|
|
|
- {
|
|
|
- key: '7',
|
|
|
- name: "李天泽",
|
|
|
- people_type: "访客",
|
|
|
- department: "规划院-产品中心",
|
|
|
- time: "进:2022-08-26 12:00:00",
|
|
|
- outtime: "进:2022-08-26 12:00:00",
|
|
|
- equipment: "ZY010012",
|
|
|
- direction: "进入B2",
|
|
|
- behavior: "",
|
|
|
- },
|
|
|
- {
|
|
|
- key: '8',
|
|
|
- name: "李天泽",
|
|
|
- people_type: "访客",
|
|
|
- department: "规划院-产品中心",
|
|
|
- time: "进:2022-08-26 12:00:00",
|
|
|
- outtime: "进:2022-08-26 12:00:00",
|
|
|
- equipment: "ZY010012",
|
|
|
- direction: "进入B2",
|
|
|
- behavior: "",
|
|
|
- },
|
|
|
- {
|
|
|
- key: '9',
|
|
|
- name: "李天泽",
|
|
|
- people_type: "访客",
|
|
|
- department: "规划院-产品中心",
|
|
|
- time: "进:2022-08-26 12:00:00",
|
|
|
- outtime: "进:2022-08-26 12:00:00",
|
|
|
- equipment: "ZY010012",
|
|
|
- direction: "进入B2",
|
|
|
- behavior: "",
|
|
|
- },
|
|
|
- {
|
|
|
- key: '10',
|
|
|
- name: "李天泽",
|
|
|
- people_type: "访客",
|
|
|
- department: "规划院-产品中心",
|
|
|
- time: "进:2022-08-26 12:00:00",
|
|
|
- outtime: "进:2022-08-26 12:00:00",
|
|
|
- equipment: "ZY010012",
|
|
|
- direction: "进入B2",
|
|
|
- behavior: "",
|
|
|
- },
|
|
|
- {
|
|
|
- key: '11',
|
|
|
- name: "李天泽",
|
|
|
- people_type: "访客",
|
|
|
- department: "规划院-产品中心",
|
|
|
- time: "进:2022-08-26 12:00:00",
|
|
|
- outtime: "进:2022-08-26 12:00:00",
|
|
|
- equipment: "ZY010012",
|
|
|
- direction: "进入B2",
|
|
|
- behavior: "",
|
|
|
- },
|
|
|
- {
|
|
|
- key: '12',
|
|
|
- name: "李天泽",
|
|
|
- people_type: "访客",
|
|
|
- department: "规划院-产品中心",
|
|
|
- time: "进:2022-08-26 12:00:00",
|
|
|
- outtime: "进:2022-08-26 12:00:00",
|
|
|
- equipment: "ZY010012",
|
|
|
- direction: "进入B2",
|
|
|
- behavior: "",
|
|
|
- },
|
|
|
- {
|
|
|
- key: '13',
|
|
|
- name: "李天泽",
|
|
|
- people_type: "访客",
|
|
|
- department: "规划院-产品中心",
|
|
|
- time: "进:2022-08-26 12:00:00",
|
|
|
- outtime: "进:2022-08-26 12:00:00",
|
|
|
- equipment: "ZY010012",
|
|
|
- direction: "进入B2",
|
|
|
- behavior: "",
|
|
|
- },
|
|
|
- {
|
|
|
- key: '14',
|
|
|
- name: "李天泽",
|
|
|
- people_type: "访客",
|
|
|
- department: "规划院-产品中心",
|
|
|
- time: "进:2022-08-26 12:00:00",
|
|
|
- outtime: "进:2022-08-26 12:00:00",
|
|
|
- equipment: "ZY010012",
|
|
|
- direction: "进入B2",
|
|
|
- behavior: "",
|
|
|
- },
|
|
|
- {
|
|
|
- key: '15',
|
|
|
- name: "李天泽",
|
|
|
- people_type: "访客",
|
|
|
- department: "规划院-产品中心",
|
|
|
- time: "进:2022-08-26 12:00:00",
|
|
|
- outtime: "进:2022-08-26 12:00:00",
|
|
|
- equipment: "ZY010012",
|
|
|
- direction: "进入B2",
|
|
|
- behavior: "",
|
|
|
- },
|
|
|
- {
|
|
|
- key: '16',
|
|
|
- name: "李天泽",
|
|
|
- people_type: "访客",
|
|
|
- department: "规划院-产品中心",
|
|
|
- time: "进:2022-08-26 12:00:00",
|
|
|
- outtime: "进:2022-08-26 12:00:00",
|
|
|
- equipment: "ZY010012",
|
|
|
- direction: "进入B2",
|
|
|
- behavior: "",
|
|
|
- },
|
|
|
- {
|
|
|
- key: '17',
|
|
|
- name: "李天泽",
|
|
|
- people_type: "访客",
|
|
|
- department: "规划院-产品中心",
|
|
|
- time: "进:2022-08-26 12:00:00",
|
|
|
- outtime: "进:2022-08-26 12:00:00",
|
|
|
- equipment: "ZY010012",
|
|
|
- direction: "进入B2",
|
|
|
- behavior: "",
|
|
|
- },
|
|
|
- {
|
|
|
- key: '18',
|
|
|
- name: "李天泽",
|
|
|
- people_type: "访客",
|
|
|
- department: "规划院-产品中心",
|
|
|
- time: "进:2022-08-26 12:00:00",
|
|
|
- outtime: "进:2022-08-26 12:00:00",
|
|
|
- equipment: "ZY010012",
|
|
|
- direction: "进入B2",
|
|
|
- behavior: "",
|
|
|
- },
|
|
|
- {
|
|
|
- key: '19',
|
|
|
- name: "李天泽",
|
|
|
- people_type: "访客",
|
|
|
- department: "规划院-产品中心",
|
|
|
- time: "进:2022-08-26 12:00:00",
|
|
|
- outtime: "进:2022-08-26 12:00:00",
|
|
|
- equipment: "ZY010012",
|
|
|
- direction: "进入B2",
|
|
|
- behavior: "",
|
|
|
- },
|
|
|
- {
|
|
|
- key: '20',
|
|
|
- name: "李天泽",
|
|
|
- people_type: "访客",
|
|
|
- department: "规划院-产品中心",
|
|
|
- time: "进:2022-08-26 12:00:00",
|
|
|
- outtime: "进:2022-08-26 12:00:00",
|
|
|
- equipment: "ZY010012",
|
|
|
- direction: "进入B2",
|
|
|
- behavior: "",
|
|
|
- },
|
|
|
- {
|
|
|
- key: '21',
|
|
|
- name: "李天泽",
|
|
|
- people_type: "访客",
|
|
|
- department: "规划院-产品中心",
|
|
|
- time: "进:2022-08-26 12:00:00",
|
|
|
- outtime: "进:2022-08-26 12:00:00",
|
|
|
- equipment: "ZY010012",
|
|
|
- direction: "进入B2",
|
|
|
- behavior: "",
|
|
|
- },
|
|
|
- ]
|
|
|
- }
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- let that = this
|
|
|
- setTimeout(() => {
|
|
|
- that.tableContainerHeight = that.$refs.table_container.clientHeight - 64 - 10;
|
|
|
- window.onresize = () => {
|
|
|
- return (() => {
|
|
|
- that.tableContainerHeight = that.$refs.table_container.clientHeight - 54 - 10
|
|
|
- })()
|
|
|
- };
|
|
|
- }, 100);
|
|
|
- }
|
|
|
-}
|
|
|
-</script>
|
|
|
|
|
|
-<style lang="less" scoped>
|
|
|
-.accessManage {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- padding: 5px 5px;
|
|
|
+ <a-modal class="securityPersonMoreDetail" v-if="showDetail"
|
|
|
+ :visible.sync="showDetail"
|
|
|
+ :width="800"
|
|
|
+ :title="'停车详情'"
|
|
|
+ :footer="null"
|
|
|
+ @cancel="handleCancel"
|
|
|
+ >
|
|
|
+ <a-descriptions :column="2">
|
|
|
+ <a-descriptions-item >
|
|
|
+ <template #label>
|
|
|
+ <span class="descriptions-item-label">车牌号</span>
|
|
|
+ </template>
|
|
|
+ </a-descriptions-item>
|
|
|
+ <a-descriptions-item >
|
|
|
+ <template #label>
|
|
|
+ <span class="descriptions-item-label">所属人员</span>
|
|
|
+ </template>
|
|
|
+ </a-descriptions-item>
|
|
|
+ <a-descriptions-item >
|
|
|
+ <template #label>
|
|
|
+ <span class="descriptions-item-label">固定车位</span>
|
|
|
+ </template>
|
|
|
+ </a-descriptions-item>
|
|
|
+ <a-descriptions-item >
|
|
|
+ <template #label>
|
|
|
+ <span class="descriptions-item-label">停车时长</span>
|
|
|
+ </template>
|
|
|
+ </a-descriptions-item>
|
|
|
+ <a-descriptions-item >
|
|
|
+ <template #label>
|
|
|
+ <span class="descriptions-item-label">停车费用</span>
|
|
|
+ </template>
|
|
|
+ </a-descriptions-item>
|
|
|
|
|
|
- .container {
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 5px 5px;
|
|
|
- height: calc(100% - 60px);
|
|
|
+ <a-descriptions-item >
|
|
|
+ <template #label>
|
|
|
+ <span class="descriptions-item-label">实收金额</span>
|
|
|
+ </template>
|
|
|
+ </a-descriptions-item>
|
|
|
+ <a-descriptions-item >
|
|
|
+ <template #label>
|
|
|
+ <span class="descriptions-item-label">订单状态</span>
|
|
|
+ </template>
|
|
|
+ </a-descriptions-item>
|
|
|
+ <a-descriptions-item >
|
|
|
+ <template #label>
|
|
|
+ <span class="descriptions-item-label">支付方式</span>
|
|
|
+ </template>
|
|
|
+ </a-descriptions-item>
|
|
|
+ <a-descriptions-item >
|
|
|
+ <template #label>
|
|
|
+ <span class="descriptions-item-label">入场时间</span>
|
|
|
+ </template>
|
|
|
+ </a-descriptions-item>
|
|
|
+ <a-descriptions-item >
|
|
|
+ <template #label>
|
|
|
+ <span class="descriptions-item-label">出场时间</span>
|
|
|
+ </template>
|
|
|
+ </a-descriptions-item>
|
|
|
|
|
|
- .search_container {
|
|
|
- .ant-input {
|
|
|
- width: 220px;
|
|
|
- }
|
|
|
+ </a-descriptions>
|
|
|
|
|
|
- .ant-select {
|
|
|
- width: 220px;
|
|
|
- }
|
|
|
|
|
|
- .ant-calendar-picker {
|
|
|
- width: 320px !important;
|
|
|
- }
|
|
|
+ <div style="margin: 12px 0">详细信息</div>
|
|
|
|
|
|
- .ant-btn {
|
|
|
- margin-left: 50px !important;
|
|
|
- }
|
|
|
- }
|
|
|
+ <a-descriptions :column="2" bordered>
|
|
|
+ <a-descriptions-item >
|
|
|
+ <template #label>
|
|
|
+ <span class="descriptions-item-label">入场通道</span>
|
|
|
+ </template>
|
|
|
+ </a-descriptions-item>
|
|
|
+ <a-descriptions-item >
|
|
|
+ <template #label>
|
|
|
+ <span class="descriptions-item-label">出场通道</span>
|
|
|
+ </template>
|
|
|
+ </a-descriptions-item>
|
|
|
+ <a-descriptions-item >
|
|
|
+ <template #label>
|
|
|
+ <span class="descriptions-item-label">入场收费员</span>
|
|
|
+ </template>
|
|
|
+ </a-descriptions-item>
|
|
|
+ <a-descriptions-item >
|
|
|
+ <template #label>
|
|
|
+ <span class="descriptions-item-label">出场收费员</span>
|
|
|
+ </template>
|
|
|
+ </a-descriptions-item>
|
|
|
+ <a-descriptions-item >
|
|
|
+ <template #label>
|
|
|
+ <span class="descriptions-item-label">入场照片</span>
|
|
|
+ </template>
|
|
|
+ </a-descriptions-item>
|
|
|
|
|
|
- .table_container {
|
|
|
- height: calc(100% - 210px);
|
|
|
- box-sizing: border-box;
|
|
|
- padding-top: 10px;
|
|
|
- }
|
|
|
- }
|
|
|
+ <a-descriptions-item >
|
|
|
+ <template #label>
|
|
|
+ <span class="descriptions-item-label">出场照片</span>
|
|
|
+ </template>
|
|
|
+ </a-descriptions-item>
|
|
|
|
|
|
- .footer {
|
|
|
- height: 60px;
|
|
|
- line-height: 60px;
|
|
|
- margin-right: 50px;
|
|
|
- padding-top: 14px;
|
|
|
- }
|
|
|
+ </a-descriptions>
|
|
|
+ </a-modal>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import timeRange from "@/components/common/timeRange.vue";
|
|
|
|
|
|
- .ant-table-wrapper {
|
|
|
- height: 100%;
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ timeRange,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ showDetail: false,
|
|
|
+ currentPage: 1,
|
|
|
+ queryData: {
|
|
|
+ status: '0',
|
|
|
+ method: '0'
|
|
|
+ },
|
|
|
+ statusOptions: [
|
|
|
+ {
|
|
|
+ value: '0',
|
|
|
+ label: '全部'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '1',
|
|
|
+ label: '待支付'
|
|
|
+ },{
|
|
|
+ value: '2',
|
|
|
+ label: '已支付'
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ methodOptions: [
|
|
|
+ {
|
|
|
+ value: '0',
|
|
|
+ label: '全部'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '1',
|
|
|
+ label: '手机支付'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '2',
|
|
|
+ label: '人工'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '3',
|
|
|
+ label: '年卡'
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ 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: 'equipment',
|
|
|
+ key: 'equipment',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '入场时间',
|
|
|
+ dataIndex: 'time',
|
|
|
+ key: 'time',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '出场时间',
|
|
|
+ dataIndex: 'outtime',
|
|
|
+ key: 'outtime',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '操作',
|
|
|
+ key: 'operation',
|
|
|
+ fixed: 'right',
|
|
|
+ align: 'center',
|
|
|
+ width: 100,
|
|
|
+ scopedSlots: {customRender: 'action'},
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ tableData: [
|
|
|
+ {
|
|
|
+ key: '1',
|
|
|
+ name: "潘夏彤",
|
|
|
+ people_type: "自有员工",
|
|
|
+ department: "办公室",
|
|
|
+ time: "进:2022-08-26 12:00:00",
|
|
|
+ outtime: "进:2022-08-26 12:00:00",
|
|
|
+ equipment: "ZY010012",
|
|
|
+ direction: "进入B3",
|
|
|
+ behavior: "",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: '2',
|
|
|
+ name: "庞慧",
|
|
|
+ people_type: "协作员工",
|
|
|
+ department: "规划院-办公室",
|
|
|
+ time: "进:2022-08-26 12:00:00",
|
|
|
+ outtime: "进:2022-08-26 12:00:00",
|
|
|
+ equipment: "ZY010012",
|
|
|
+ direction: "进入1F",
|
|
|
+ behavior: "",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: '3',
|
|
|
+ name: "李天泽",
|
|
|
+ people_type: "访客",
|
|
|
+ department: "规划院-产品中心",
|
|
|
+ time: "进:2022-08-26 12:00:00",
|
|
|
+ outtime: "进:2022-08-26 12:00:00",
|
|
|
+ equipment: "ZY010012",
|
|
|
+ direction: "进入B2",
|
|
|
+ behavior: "",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: '4',
|
|
|
+ name: "李天泽",
|
|
|
+ people_type: "访客",
|
|
|
+ department: "规划院-产品中心",
|
|
|
+ time: "进:2022-08-26 12:00:00",
|
|
|
+ outtime: "进:2022-08-26 12:00:00",
|
|
|
+ equipment: "ZY010012",
|
|
|
+ direction: "进入B2",
|
|
|
+ behavior: "",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: '5',
|
|
|
+ name: "李天泽",
|
|
|
+ people_type: "访客",
|
|
|
+ department: "规划院-产品中心",
|
|
|
+ time: "进:2022-08-26 12:00:00",
|
|
|
+ outtime: "进:2022-08-26 12:00:00",
|
|
|
+ equipment: "ZY010012",
|
|
|
+ direction: "进入B2",
|
|
|
+ behavior: "",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: '6',
|
|
|
+ name: "李天泽",
|
|
|
+ people_type: "访客",
|
|
|
+ department: "规划院-产品中心",
|
|
|
+ time: "进:2022-08-26 12:00:00",
|
|
|
+ outtime: "进:2022-08-26 12:00:00",
|
|
|
+ equipment: "ZY010012",
|
|
|
+ direction: "进入B2",
|
|
|
+ behavior: "",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: '7',
|
|
|
+ name: "李天泽",
|
|
|
+ people_type: "访客",
|
|
|
+ department: "规划院-产品中心",
|
|
|
+ time: "进:2022-08-26 12:00:00",
|
|
|
+ outtime: "进:2022-08-26 12:00:00",
|
|
|
+ equipment: "ZY010012",
|
|
|
+ direction: "进入B2",
|
|
|
+ behavior: "",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: '8',
|
|
|
+ name: "李天泽",
|
|
|
+ people_type: "访客",
|
|
|
+ department: "规划院-产品中心",
|
|
|
+ time: "进:2022-08-26 12:00:00",
|
|
|
+ outtime: "进:2022-08-26 12:00:00",
|
|
|
+ equipment: "ZY010012",
|
|
|
+ direction: "进入B2",
|
|
|
+ behavior: "",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: '9',
|
|
|
+ name: "李天泽",
|
|
|
+ people_type: "访客",
|
|
|
+ department: "规划院-产品中心",
|
|
|
+ time: "进:2022-08-26 12:00:00",
|
|
|
+ outtime: "进:2022-08-26 12:00:00",
|
|
|
+ equipment: "ZY010012",
|
|
|
+ direction: "进入B2",
|
|
|
+ behavior: "",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: '10',
|
|
|
+ name: "李天泽",
|
|
|
+ people_type: "访客",
|
|
|
+ department: "规划院-产品中心",
|
|
|
+ time: "进:2022-08-26 12:00:00",
|
|
|
+ outtime: "进:2022-08-26 12:00:00",
|
|
|
+ equipment: "ZY010012",
|
|
|
+ direction: "进入B2",
|
|
|
+ behavior: "",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: '11',
|
|
|
+ name: "李天泽",
|
|
|
+ people_type: "访客",
|
|
|
+ department: "规划院-产品中心",
|
|
|
+ time: "进:2022-08-26 12:00:00",
|
|
|
+ outtime: "进:2022-08-26 12:00:00",
|
|
|
+ equipment: "ZY010012",
|
|
|
+ direction: "进入B2",
|
|
|
+ behavior: "",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: '12',
|
|
|
+ name: "李天泽",
|
|
|
+ people_type: "访客",
|
|
|
+ department: "规划院-产品中心",
|
|
|
+ time: "进:2022-08-26 12:00:00",
|
|
|
+ outtime: "进:2022-08-26 12:00:00",
|
|
|
+ equipment: "ZY010012",
|
|
|
+ direction: "进入B2",
|
|
|
+ behavior: "",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: '13',
|
|
|
+ name: "李天泽",
|
|
|
+ people_type: "访客",
|
|
|
+ department: "规划院-产品中心",
|
|
|
+ time: "进:2022-08-26 12:00:00",
|
|
|
+ outtime: "进:2022-08-26 12:00:00",
|
|
|
+ equipment: "ZY010012",
|
|
|
+ direction: "进入B2",
|
|
|
+ behavior: "",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: '14',
|
|
|
+ name: "李天泽",
|
|
|
+ people_type: "访客",
|
|
|
+ department: "规划院-产品中心",
|
|
|
+ time: "进:2022-08-26 12:00:00",
|
|
|
+ outtime: "进:2022-08-26 12:00:00",
|
|
|
+ equipment: "ZY010012",
|
|
|
+ direction: "进入B2",
|
|
|
+ behavior: "",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: '15',
|
|
|
+ name: "李天泽",
|
|
|
+ people_type: "访客",
|
|
|
+ department: "规划院-产品中心",
|
|
|
+ time: "进:2022-08-26 12:00:00",
|
|
|
+ outtime: "进:2022-08-26 12:00:00",
|
|
|
+ equipment: "ZY010012",
|
|
|
+ direction: "进入B2",
|
|
|
+ behavior: "",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: '16',
|
|
|
+ name: "李天泽",
|
|
|
+ people_type: "访客",
|
|
|
+ department: "规划院-产品中心",
|
|
|
+ time: "进:2022-08-26 12:00:00",
|
|
|
+ outtime: "进:2022-08-26 12:00:00",
|
|
|
+ equipment: "ZY010012",
|
|
|
+ direction: "进入B2",
|
|
|
+ behavior: "",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: '17',
|
|
|
+ name: "李天泽",
|
|
|
+ people_type: "访客",
|
|
|
+ department: "规划院-产品中心",
|
|
|
+ time: "进:2022-08-26 12:00:00",
|
|
|
+ outtime: "进:2022-08-26 12:00:00",
|
|
|
+ equipment: "ZY010012",
|
|
|
+ direction: "进入B2",
|
|
|
+ behavior: "",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: '18',
|
|
|
+ name: "李天泽",
|
|
|
+ people_type: "访客",
|
|
|
+ department: "规划院-产品中心",
|
|
|
+ time: "进:2022-08-26 12:00:00",
|
|
|
+ outtime: "进:2022-08-26 12:00:00",
|
|
|
+ equipment: "ZY010012",
|
|
|
+ direction: "进入B2",
|
|
|
+ behavior: "",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: '19',
|
|
|
+ name: "李天泽",
|
|
|
+ people_type: "访客",
|
|
|
+ department: "规划院-产品中心",
|
|
|
+ time: "进:2022-08-26 12:00:00",
|
|
|
+ outtime: "进:2022-08-26 12:00:00",
|
|
|
+ equipment: "ZY010012",
|
|
|
+ direction: "进入B2",
|
|
|
+ behavior: "",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: '20',
|
|
|
+ name: "李天泽",
|
|
|
+ people_type: "访客",
|
|
|
+ department: "规划院-产品中心",
|
|
|
+ time: "进:2022-08-26 12:00:00",
|
|
|
+ outtime: "进:2022-08-26 12:00:00",
|
|
|
+ equipment: "ZY010012",
|
|
|
+ direction: "进入B2",
|
|
|
+ behavior: "",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: '21',
|
|
|
+ name: "李天泽",
|
|
|
+ people_type: "访客",
|
|
|
+ department: "规划院-产品中心",
|
|
|
+ time: "进:2022-08-26 12:00:00",
|
|
|
+ outtime: "进:2022-08-26 12:00:00",
|
|
|
+ equipment: "ZY010012",
|
|
|
+ direction: "进入B2",
|
|
|
+ behavior: "",
|
|
|
+ },
|
|
|
+ ]
|
|
|
}
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
|
|
|
- .ant-advanced-search-form {
|
|
|
- padding: 24px;
|
|
|
- background: #fbfbfb;
|
|
|
- border: 1px solid #d9d9d9;
|
|
|
- border-radius: 6px
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ showTotal(total, range) {
|
|
|
+ let pageSize = range[1]-range[0]+1;
|
|
|
+ let pages = Math.ceil(total/pageSize);
|
|
|
+ return '共'+total+'条数据,第 '+this.currentPage+'/'+pages+' 页';
|
|
|
+ },
|
|
|
+ onShowSizeChange(val) {
|
|
|
+ },
|
|
|
+ handleCancel() {
|
|
|
+ this.showDetail = false
|
|
|
}
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
|
|
|
- .ant-advanced-search-form .ant-form-item {
|
|
|
- display: flex;
|
|
|
+<style lang="less" scoped>
|
|
|
+.accessManage {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
|
|
|
- /deep/ .ant-form-item-label {
|
|
|
- min-width: 90px;
|
|
|
- }
|
|
|
- }
|
|
|
+ .ant-form-inline .ant-form-item {
|
|
|
+ margin-right: 60px;
|
|
|
|
|
|
- .ant-advanced-search-form .ant-form-item-control-wrapper {
|
|
|
- flex: 1
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
- .ant-pagination {
|
|
|
- float: right;
|
|
|
- }
|
|
|
+ .accessManage-body {
|
|
|
+ background: white;
|
|
|
+ border-radius: 4px;
|
|
|
+ margin-top: 12px;
|
|
|
+ padding: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .descriptions-item-label {
|
|
|
+ text-align-last: justify;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|