From 2d2823ae729b2fe3ef7d646e222113750ed7576a Mon Sep 17 00:00:00 2001
From: SelfRidicule <selfridicule@gmail.com>
Date: Thu, 21 Mar 2024 16:41:52 +0800
Subject: [PATCH] 1

---
 src/views/admin/meeting/VisitorPersonInfo.vue | 254 ++++++++++++++++++
 src/views/admin/meeting/VisitorPersonList.vue | 152 ++++-------
 2 files changed, 308 insertions(+), 98 deletions(-)
 create mode 100644 src/views/admin/meeting/VisitorPersonInfo.vue

diff --git a/src/views/admin/meeting/VisitorPersonInfo.vue b/src/views/admin/meeting/VisitorPersonInfo.vue
new file mode 100644
index 0000000..a0e2c94
--- /dev/null
+++ b/src/views/admin/meeting/VisitorPersonInfo.vue
@@ -0,0 +1,254 @@
+<template>
+  <a-card :body-style="{padding: '24px 32px'}" :bordered='false'>
+
+    <div class='back' @click='backPage'>
+      <a-icon type='rollback' />
+      <div class='label'>返回</div>
+    </div>
+    <div style='display: flex;margin-bottom: 20px'>
+      <span style='width: 20px;display: block;font-size: 25px;color: #1890ff;font-weight: bold;'>|</span>
+      <span style='display: block;margin-top: 11px;font-size: 15px'>预约详情</span>
+    </div>
+    <a-form-model :model='form' :label-col='labelCol' :wrapper-col='wrapperCol'>
+      <a-row>
+        <a-col :span='10'>
+          <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='会议主题'>
+            {{ form.title }}
+          </a-form-item>
+        </a-col>
+        <a-col :span='10'>
+          <a-form-item label='会议室名称' :labelCol='labelCol' :wrapperCol='wrapperCol'>
+            {{ form.roomContent.meetingName }}
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row>
+        <a-col :span='10'>
+          <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='预约人'>
+            {{ form.userName }}
+          </a-form-item>
+        </a-col>
+        <a-col :span='10'>
+          <a-form-item label='会议类型' :labelCol='labelCol' :wrapperCol='wrapperCol'>
+            {{ form.roomContent.typeName }}
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row>
+        <a-col :span='10'>
+          <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='联系方式'>
+            {{ form.phone }}
+          </a-form-item>
+        </a-col>
+        <a-col :span='10'>
+          <a-form-item label='所属公司' :labelCol='labelCol' :wrapperCol='wrapperCol'>
+            {{ form.customerName }}
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row>
+        <a-col :span='10'>
+          <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='会议开始时间'>
+            {{ form.startTime }}
+          </a-form-item>
+        </a-col>
+        <a-col :span='10'>
+          <a-form-item label='会议结束时间' :labelCol='labelCol' :wrapperCol='wrapperCol'>
+            {{ form.endDate }}
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row>
+        <a-col :span='10'>
+          <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='订单编号'>
+            {{ form.oderNumber }}
+          </a-form-item>
+        </a-col>
+        <a-col :span='10'>
+          <a-form-item label='实收金额' :labelCol='labelCol' :wrapperCol='wrapperCol'>
+            {{ form.orderMoney }}
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row>
+        <a-col :span='10'>
+          <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='订单状态'>
+            {{ form.statusName }}
+          </a-form-item>
+        </a-col>
+        <a-col :span='10' v-if='form.statusName == "已取消"'>
+          <a-form-item label='取消原因' :labelCol='labelCol' :wrapperCol='wrapperCol'>
+            {{ form.cancelResaon }}
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row>
+        <a-col :span='10'>
+          <a-form-item label='使用优惠劵' :labelCol='labelCol' :wrapperCol='wrapperCol'>
+            {{ form.ticketName }}
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row>
+        <a-col :span='10'>
+          <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='支付时间'>
+            {{ form.orderTime }}
+          </a-form-item>
+        </a-col>
+        <a-col :span='10'>
+          <a-form-item label='创建时间' :labelCol='labelCol' :wrapperCol='wrapperCol'>
+            {{ form.createTime }}
+          </a-form-item>
+        </a-col>
+      </a-row>
+    </a-form-model>
+    <div style='display: flex;margin-bottom: 20px'>
+      <span style='width: 20px;display: block;font-size: 25px;color: #1890ff;font-weight: bold;'>|</span>
+      <span style='display: block;margin-top: 11px;font-size: 15px'>邀请记录</span>
+    </div>
+    <div class='recordHeadView'>
+      <div>
+        <span>邀请人数：{{actualNum}}</span>
+        <span class='shidarenshu'>实到人数：{{attainNum}}</span>
+      </div>
+      <!--      <div class='search'>-->
+      <!--        <div>关键词：</div>-->
+      <!--        <a-input class='searchInput' placeholder='请输入关键词' v-model='queryParam.title' />-->
+      <!--      </div>-->
+    </div>
+    <s-table
+      class='dataTable'
+      :columns='columns'
+      :data='loadData'
+      size='default'
+      ref='table'
+      bordered
+    >
+    </s-table>
+  </a-card>
+</template>
+
+<script>
+import { STable } from '@/components'
+import { get, personList } from '@/api/admin/meeting/reservation'
+// import ReservationModal from '@/views/admin/meeting/modules/ReservationModal'
+
+export default {
+  name: 'reservationInfo',
+  components: {
+    STable
+  },
+  data() {
+    return {
+      labelCol: { span: 12 },
+      wrapperCol: { span: 8 },
+      form: {
+        roomContent: {}
+      },
+      queryParam: {
+        reservationId: this.$route.query.id
+      },
+      columns: [
+        {
+          title: '参会人员',
+          dataIndex: 'participantName'
+        },
+        {
+          title: '联系电话',
+          dataIndex: 'participantPhone'
+        },
+        {
+          title: '邀请人',
+          dataIndex: 'userName'
+        },
+        {
+          title: '接收时间',
+          dataIndex: 'createTime'
+        },
+        {
+          title: '是否到访',
+          dataIndex: 'status'
+        },
+        {
+          title: '到访时间',
+          dataIndex: 'joinTime'
+        }
+      ],
+      dataList: [
+        {
+          name: 'wqc'
+        }
+      ],
+      // 加载数据方法 必须为 Promise 对象
+      loadData: parameter => {
+        return personList(Object.assign(parameter, this.queryParam))
+      },
+      actualNum : null,
+      attainNum : null
+    }
+  },
+  created() {
+    this.getDetail()
+    personList({
+      reservationId: this.$route.query.id
+    }).then(res => {
+      this.actualNum = res.actualNum
+      this.attainNum = res.attainNum
+    })
+  },
+  methods: {
+    getDetail() {
+      get(this.$route.query.id).then(res => {
+        console.log('getDetail', res)
+        this.form = res
+      })
+    },
+    backPage() {
+      this.$router.back()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.back {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding-right: 100px;
+  cursor: pointer;
+}
+
+.back .label {
+  margin-left: 4px;
+}
+
+.recordHeadView {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 1000px;
+  margin: 14px auto;
+  color: black;
+}
+
+.recordHeadView .shidarenshu {
+  margin-left: 50px;
+}
+
+.recordHeadView .search {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.recordHeadView .search .searchInput {
+  flex: 1;
+}
+
+.dataTable {
+  width: 1000px;
+  margin: 0 auto;
+}
+
+</style>
\ No newline at end of file
diff --git a/src/views/admin/meeting/VisitorPersonList.vue b/src/views/admin/meeting/VisitorPersonList.vue
index d2ad52c..e5bce2a 100644
--- a/src/views/admin/meeting/VisitorPersonList.vue
+++ b/src/views/admin/meeting/VisitorPersonList.vue
@@ -1,91 +1,67 @@
 <template>
-  <a-card :bordered="false">
-    <div class="table-page-search-wrapper">
-      <a-form layout="inline">
-        <a-row :gutter="48">
-          <a-col :md="5" :sm="15">
-            <a-form-item label="访客id">
-              <a-input placeholder="请输入访客id" v-model="queryParam.userId"/>
+  <a-card :bordered='false'>
+    <div class='table-page-search-wrapper'>
+      <a-form layout='inline'>
+        <a-row :gutter='48'>
+          <a-col :md='5' :sm='15'>
+            <a-form-item label='姓名'>
+              <a-input placeholder='请输入姓名' v-model='queryParam.name' />
             </a-form-item>
           </a-col>
-          <a-col :md="5" :sm="15">
-            <a-form-item label="被访人id">
-              <a-input placeholder="请输入被访人id" v-model="queryParam.intervieweeId"/>
-            </a-form-item>
-          </a-col>
-          <a-col :md="5" :sm="15">
-            <a-form-item label="姓名">
-              <a-input placeholder="请输入姓名" v-model="queryParam.name"/>
-            </a-form-item>
-          </a-col>
-          <a-col :md="5" :sm="15">
-            <a-form-item label="手机号">
-              <a-input placeholder="请输入手机号" v-model="queryParam.phone"/>
-            </a-form-item>
-          </a-col>
-          <a-col :md="5" :sm="15">
-            <a-form-item label="来访是由">
-              <a-input placeholder="请输入来访是由" v-model="queryParam.visitContent"/>
-            </a-form-item>
-          </a-col>
-          <a-col :md="5" :sm="15">
-            <a-form-item label="证件号码">
-              <a-input placeholder="请输入证件号码" v-model="queryParam.cardNo"/>
-            </a-form-item>
-          </a-col>
-          <a-col :md="5" :sm="15">
-            <a-form-item label="照片">
-              <a-input placeholder="请输入照片" v-model="queryParam.photo"/>
-            </a-form-item>
-          </a-col>
-          <a-col :md="8" :sm="24">
-            <span class="table-page-search-submitButtons">
-              <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
-              <a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
+          <a-col :md='8' :sm='24'>
+            <span class='table-page-search-submitButtons'>
+              <a-button type='primary' @click='$refs.table.refresh(true)'>查询</a-button>
+              <a-button style='margin-left: 8px' @click='() => queryParam = {}'>重置</a-button>
             </span>
           </a-col>
         </a-row>
       </a-form>
     </div>
-    <div class="table-operator">
-      <a-button v-if="addEnable" type="primary" icon="plus" @click="$refs.modal.add()">新建</a-button>
-      <a-dropdown v-if="removeEnable&&selectedRowKeys.length > 0">
-        <a-button type="danger" icon="delete" @click="delByIds(selectedRowKeys)">删除</a-button>
+    <div class='table-operator'>
+      <a-button v-if='addEnable' type='primary' icon='plus' @click='$refs.modal.add()'>新建</a-button>
+      <a-dropdown v-if='removeEnable&&selectedRowKeys.length > 0'>
+        <a-button type='danger' icon='delete' @click='delByIds(selectedRowKeys)'>删除</a-button>
       </a-dropdown>
     </div>
     <s-table
-      size="default"
-      ref="table"
-      rowKey="id"
-      :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
-      :columns="columns"
-      :data="loadData"
+      size='default'
+      ref='table'
+      rowKey='id'
+      :rowSelection='{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}'
+      :columns='columns'
+      :data='loadData'
     >
-      <span slot="action" slot-scope="text, record">
-        <a v-if="editEnabel" @click="handleEdit(record)">编辑</a>
-        <a-divider type="vertical" />
-        <a v-if="removeEnable" @click="delByIds([record.id])">删除</a>
+      <span slot='photo' slot-scope='text, record'>
+       <img :src='baseUrl + record.photo' style='max-width: 100px; max-height: 120px'>
+      </span>
+      <span slot='action' slot-scope='text, record'>
+        <a @click='handleInfo(record)'>详情</a>
+        <a-divider type='vertical' />
+        <a v-if='editEnabel' @click='handleEdit(record)'>编辑</a>
+        <a-divider type='vertical' />
+        <a v-if='removeEnable' @click='delByIds([record.id])'>删除</a>
       </span>
     </s-table>
-    <visitorPerson-modal ref="modal" @ok="handleOk"/>
+    <visitorPerson-modal ref='modal' @ok='handleOk' />
   </a-card>
 </template>
 
 <script>
-    import {STable} from '@/components'
+import { STable } from '@/components'
 
-    import {delVisitorPerson,getVisitorPersonList} from '@/api/admin/meeting/visitorPerson'
-    import VisitorPersonModal from './modules/VisitorPersonModal.vue'
-    import {checkPermission} from '@/utils/permissions'
+import { delVisitorPerson, getVisitorPersonList } from '@/api/admin/meeting/visitorPerson'
+import VisitorPersonModal from './modules/VisitorPersonModal.vue'
+import { checkPermission } from '@/utils/permissions'
 
-    export default {
+export default {
   name: 'TableList',
   components: {
     STable,
     VisitorPersonModal
   },
-  data () {
+  data() {
     return {
+      baseUrl: process.env.VUE_APP_API_BASE_URL,
       labelCol: {
         xs: { span: 24 },
         sm: { span: 5 }
@@ -103,26 +79,13 @@
       // 表头
       columns: [
         {
-          title: '访客id',
-          dataIndex: 'userId'
-        },
-        {
-          title: '被访人id',
-          dataIndex: 'intervieweeId'
-        },
-        {
-          title: '姓名',
+          title: '访客姓名',
           dataIndex: 'name'
         },
         {
-          title: '手机号',
+          title: '访客联系方式',
           dataIndex: 'phone'
         },
-        {
-          title: '加入时间',
-          dataIndex: 'joinTime',
-          sorter: true
-        },
         {
           title: '到访时间',
           dataIndex: 'visitTime',
@@ -133,25 +96,14 @@
           dataIndex: 'leaveTime',
           sorter: true
         },
-        {
-          title: '来访是由',
-          dataIndex: 'visitContent'
-        },
-        {
-          title: '证件类型',
-          dataIndex: 'cardType'
-        },
-        {
-          title: '证件号码',
-          dataIndex: 'cardNo'
-        },
         {
           title: '状态',
           dataIndex: 'status'
         },
         {
           title: '照片',
-          dataIndex: 'photo'
+          dataIndex: 'photo',
+          scopedSlots: { customRender: 'photo' }
         },
         {
           title: '操作',
@@ -171,26 +123,30 @@
       removeEnable: checkPermission('meeting:visitorPerson:remove')
     }
   },
-  filters: {
-  },
-  created () {
+  filters: {},
+  created() {
   },
   methods: {
-    onSelectChange (selectedRowKeys, selectedRows) {
+    onSelectChange(selectedRowKeys, selectedRows) {
       this.selectedRowKeys = selectedRowKeys
       this.selectedRows = selectedRows
     },
-    handleAdd () {
+    //详情，跳转页面
+    handleInfo(record) {
+      console.log('handleInfo', record)
+      this.$router.push({ name: 'visitorPersonInfo', query: { id: record.id } })
+    },
+    handleAdd() {
       this.$refs.modal.add()
     },
-    handleEdit (record) {
+    handleEdit(record) {
       this.$refs.modal.edit(record)
     },
-    handleOk () {
+    handleOk() {
       this.$refs.table.refresh(true)
       console.log('handleSaveOk')
     },
-    delByIds (ids) {
+    delByIds(ids) {
       delVisitorPerson({ ids: ids.join(',') }).then(res => {
         if (res.code === 0) {
           this.$message.success('删除成功')