修改了展厅预约的功能，新增了访客预约的功能

src/api/admin/meeting/visitorPerson.js

@@ -0,0 +1,34 @@
+import { axios } from '@/utils/request'
+
+const api = {
+  visitorPerson: '/meeting/visitorPerson'
+}
+
+export function getVisitorPersonList (parameter) {
+  return axios({
+    url: api.visitorPerson + '/list',
+    method: 'get',
+    params: parameter
+  })
+}
+
+export function saveVisitorPerson (parameter) {
+  return axios({
+    url: api.visitorPerson + (parameter.id > 0 ? '/update' : '/save'),
+    method: 'post',
+    data: parameter,
+    headers: {
+      'Content-Type': 'application/json;charset=UTF-8'
+    }
+  })
+}
+
+export function delVisitorPerson (parameter) {
+  return axios({
+    url: api.visitorPerson + '/remove',
+    method: 'post',
+    params: parameter
+  })
+}
+
+export const visitorPersonExport = api.visitorPerson + '/export'

src/views/admin/meeting/VisitorPersonList.vue

@@ -0,0 +1,220 @@
+<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-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>
+            </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>
+      </a-dropdown>
+    </div>
+    <s-table
+      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>
+    </s-table>
+    <visitorPerson-modal ref="modal" @ok="handleOk"/>
+  </a-card>
+</template>
+
+<script>
+    import {STable} from '@/components'
+
+    import {delVisitorPerson,getVisitorPersonList} from '@/api/admin/meeting/visitorPerson'
+    import VisitorPersonModal from './modules/VisitorPersonModal.vue'
+    import {checkPermission} from '@/utils/permissions'
+
+    export default {
+  name: 'TableList',
+  components: {
+    STable,
+    VisitorPersonModal
+  },
+  data () {
+    return {
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 5 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 16 }
+      },
+      form: this.$form.createForm(this),
+      mdl: {},
+      // 高级搜索 展开/关闭
+      advanced: false,
+      // 查询参数
+      queryParam: {},
+      // 表头
+      columns: [
+        {
+          title: '访客id',
+          dataIndex: 'userId'
+        },
+        {
+          title: '被访人id',
+          dataIndex: 'intervieweeId'
+        },
+        {
+          title: '姓名',
+          dataIndex: 'name'
+        },
+        {
+          title: '手机号',
+          dataIndex: 'phone'
+        },
+        {
+          title: '加入时间',
+          dataIndex: 'joinTime',
+          sorter: true
+        },
+        {
+          title: '到访时间',
+          dataIndex: 'visitTime',
+          sorter: true
+        },
+        {
+          title: '离开时间',
+          dataIndex: 'leaveTime',
+          sorter: true
+        },
+        {
+          title: '来访是由',
+          dataIndex: 'visitContent'
+        },
+        {
+          title: '证件类型',
+          dataIndex: 'cardType'
+        },
+        {
+          title: '证件号码',
+          dataIndex: 'cardNo'
+        },
+        {
+          title: '状态',
+          dataIndex: 'status'
+        },
+        {
+          title: '照片',
+          dataIndex: 'photo'
+        },
+        {
+          title: '操作',
+          width: '200px',
+          dataIndex: 'action',
+          scopedSlots: { customRender: 'action' }
+        }
+      ],
+      // 加载数据方法 必须为 Promise 对象
+      loadData: parameter => {
+        return getVisitorPersonList(Object.assign(parameter, this.queryParam))
+      },
+      selectedRowKeys: [],
+      selectedRows: [],
+      addEnable: checkPermission('meeting:visitorPerson:add'),
+      editEnabel: checkPermission('meeting:visitorPerson:edit'),
+      removeEnable: checkPermission('meeting:visitorPerson:remove')
+    }
+  },
+  filters: {
+  },
+  created () {
+  },
+  methods: {
+    onSelectChange (selectedRowKeys, selectedRows) {
+      this.selectedRowKeys = selectedRowKeys
+      this.selectedRows = selectedRows
+    },
+    handleAdd () {
+      this.$refs.modal.add()
+    },
+    handleEdit (record) {
+      this.$refs.modal.edit(record)
+    },
+    handleOk () {
+      this.$refs.table.refresh(true)
+      console.log('handleSaveOk')
+    },
+    delByIds (ids) {
+      delVisitorPerson({ ids: ids.join(',') }).then(res => {
+        if (res.code === 0) {
+          this.$message.success('删除成功')
+          this.handleOk()
+        } else {
+          this.$message.error(res.msg)
+        }
+        this.selectedRowKeys = []
+      })
+    }
+  },
+  watch: {
+    /*
+      'selectedRows': function (selectedRows) {
+        this.needTotalList = this.needTotalList.map(item => {
+          return {
+            ...item,
+            total: selectedRows.reduce( (sum, val) => {
+              return sum + val[item.dataIndex]
+            }, 0)
+          }
+        })
+      }
+      */
+  }
+}
+</script>

src/views/admin/meeting/modules/ShowroomRecordModal.vue

@@ -14,36 +14,175 @@
       <a-form-item style="display:none">
         <a-input v-decorator="['version']"/>
       </a-form-item>
-      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="用户id">
-        <a-input placeholder="展厅名称" v-decorator="['meetingName']"/>
-      </a-form-item>
       <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="主题">
-        <a-input placeholder="展厅主体" v-decorator="['title']"/>
+        <a-input placeholder="展厅主题" v-decorator="['title',{rules: [{ required: true, message: '主题'}]}]"/>
       </a-form-item>
-      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="预约状态">
-        <a-input placeholder="预约状态" v-decorator="['stauts']"/>
+      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="预约开始时间">
+        <a-date-picker
+          format='YYYY-MM-DD HH:mm:ss'
+          valueFormat='YYYY-MM-DD HH:mm:ss'
+          v-decorator="['startTime',{rules: [{ required: true, message: '预约开始时间'}]}]"
+          :show-time="{ defaultValue: moment('00:00:00', 'HH:mm:ss') }"
+          type="date"
+          placeholder="选择时间"
+          style="width: 100%;"
+        />
       </a-form-item>
-      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="预约编号">
-        <a-input placeholder="预约开始时间" v-decorator="['startTime']"/>
+      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="预约开始时间">
+        <a-date-picker
+          format='YYYY-MM-DD HH:mm:ss'
+          valueFormat='YYYY-MM-DD HH:mm:ss'
+          v-decorator="['endDate',{rules: [{ required: true, message: '预约结束时间'}]}]"
+          :show-time="{ defaultValue: moment('00:00:00', 'HH:mm:ss') }"
+          type="date"
+          placeholder="选择时间"
+          style="width: 100%;"
+        />
       </a-form-item>
-      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="订单取消原因">
-        <a-input placeholder="预约结束时间" v-decorator="['endDate']"/>
+      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="拟参观区域">
+        <a-select
+          mode="multiple"
+          placeholder="拟参观区域"
+          style="width: 200px"
+          @change="handleChange"
+          @popupScroll="popupScroll"
+          v-decorator="['visitArea',{rules: [{ required: true, message: '请选择拟参观区域'}]}]"
+        >
+          <a-select-option value="展厅(2楼)">
+            展厅(2楼)
+          </a-select-option>
+          <a-select-option value="公共服务配套区(15楼)">
+            公共服务配套区(15楼)
+          </a-select-option>
+          <a-select-option value="中电郑州、生态企业(16楼)">
+            中电郑州、生态企业(16楼)
+          </a-select-option>
+        </a-select>
+      </a-form-item>
+      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="预约人员">
+        <a-button type="dashed" icon="plus" @click="addRow" class="addRowBtn">
+          新增一行
+        </a-button>
+      </a-form-item>
+      <div style='margin-left: 80px'>
+        <div class="dynamic-wrap" :style="{ maxHeight: wrapHeight + 'px' }">
+          <div v-for="item in keysList" :key="item">
+            <a-row :gutter="24">
+              <a-col :span="6">
+                <a-form-item label="名称" :labelCol="{span: 8}" :wrapperCol="{span: 16}">
+                  <a-input
+                    placeholder="请填写名称"
+                    v-decorator="[
+                  `${title}Name[${item}]`,
+                  {
+                    initialValue: arr[item] ? arr[item].name : undefined,
+                    rules: [{ required: true, message: '请填职位' }]
+
+                  }
+                ]"
+                  />
+                </a-form-item>
+              </a-col>
+              <a-col :span="6">
+                <a-form-item label="职位" :labelCol="{span: 9}" :wrapperCol="{span: 15}">
+                  <a-input
+                    placeholder="请填职位"
+                    v-decorator="[
+                  `${title}Age[${item}]`,
+                  {
+                    initialValue: arr[item] ? arr[item].job : undefined,
+                    rules: [{ required: true, message: '请填职位' }]
+                  }
+                ]"
+                  />
+                </a-form-item>
+              </a-col>
+              <a-col :span="6">
+                <a-form-item label="手机号" :labelCol="{span: 8}" :wrapperCol="{span: 16}">
+                  <a-input
+                    placeholder="请填手机号"
+                    v-decorator="[
+                  `${title}Phone[${item}]`,
+                  {
+                    initialValue: arr[item] ? arr[item].phone : undefined,
+                  }
+                ]"
+                  />
+                </a-form-item>
+              </a-col>
+              <a-col :span="2" style="padding-left: 0px">
+                <a-form-item :labelCol="{span: 0}" :wrapperCol="{span: 24}">
+                  <template v-if="keysList.length > 1">
+                    <a-button type="dashed" icon="minus" @click="removeRow(item)" class="minusRowBtn"></a-button>
+                  </template>
+                </a-form-item>
+              </a-col>
+            </a-row>
+          </div>
+
+        </div>
+      </div>
+      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="拟参观区域">
+        <a-select
+          placeholder="选择参观目的"
+          style="width: 200px"
+          v-decorator="['visitType',{rules: [{ required: true, message: '拟参观区域'}]}]"
+        >
+          <a-select-option v-for="item in recordOptions" :key="item" :value="item.value">
+            {{ item.text }}
+          </a-select-option>
+        </a-select>
+      </a-form-item>
+      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="讲解需求">
+        <a-switch v-decorator="['explainNeedType',{rules: [{ required: true, message: '讲解需求'}]}]" />
+      </a-form-item>
+      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="会议室需求">
+        <a-switch v-decorator="['meetingNeedType',{rules: [{ required: true, message: '会议室需求'}]}]" />
+      </a-form-item>
+      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="摄影需求">
+        <a-switch v-decorator="['photographType',{rules: [{ required: true, message: '摄影需求'}]}]" />
       </a-form-item>
     </a-form>
   </a-modal>
+
+
+
 </template>
 <script>
     import {saveShowroomRecord} from '@/api/admin/meeting/showroomRecord'
     import pick from 'lodash.pick'
+    import storage from 'store'
+    import moment from 'moment'
+    import { getDictArray } from '@/utils/dict'
 
+    let id = 0;
     export default {
   name: 'ShowroomRecordModal',
   props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    wrapHeight: { // 表单容器的高度
+      type: Number,
+      default: 120
+    },
+    arr: {
+      type: Array,
+      default: function () {
+        return []
+      }
+    }
+
   },
   components: {
   },
+
   data () {
     return {
+      id: 0,
+      keysList: [],
+      recordOptions:[],
       visible: false,
       labelCol: {
         xs: { span: 24 },
@@ -60,9 +199,46 @@
   },
   beforeCreate () {
   },
-  created () {
+  async created () {
+    this.form = this.$form.createForm(this)
+    this.init()
+    const recordData = await getDictArray('visit_type')
+    // 下拉选项
+    recordData.map(d => {
+      this.recordOptions.push({ text: d.dictLabel, value: d.dictValue })
+    })
   },
   methods: {
+    init () {
+      const arr = [0]
+      if (this.arr.length !== 0) {
+        for (let i = 1; i < (this.arr).length; i++) {
+          arr.push(i)
+          this.id = this.id + 1
+        }
+      }
+      this.keysList = arr
+    },
+    // 移除某行
+    removeRow (k) {
+      if (this.keysList.length === 1) { // 如果存在可以移除所有行的情况，把条件改为this.keysList.length === 0即可
+        return
+      }
+      this.keysList = this.keysList.filter(item => item !== k)
+    },
+    // 新增一行
+    addRow () {
+      this.id = this.id + 1
+      this.keysList = this.keysList.concat(this.id)
+    },
+
+    moment,
+
+
+    handleChange(value) {
+    },
+    popupScroll(){
+    },
     add () {
       this.form.resetFields()
       this.edit({ id: 0 })
@@ -75,6 +251,9 @@
       })
     },
     handleSubmit (e) {
+      console.log(this.keysList)
+
+
       e.preventDefault()
       this.form.validateFields((err, values) => {
         if (!err) {
@@ -113,3 +292,21 @@
   }
 }
 </script>
+
+<style>
+.dynamic-delete-button {
+  cursor: pointer;
+  position: relative;
+  top: 4px;
+  font-size: 24px;
+  color: #999;
+  transition: all 0.3s;
+}
+.dynamic-delete-button:hover {
+  color: #777;
+}
+.dynamic-delete-button[disabled] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+</style>

src/views/admin/meeting/modules/VisitorPersonModal.vue

@@ -0,0 +1,130 @@
+<template>
+  <a-modal
+    title="操作"
+    style="top: 20px;"
+    :width="800"
+    v-model="visible"
+    :confirmLoading="confirmLoading"
+    @ok="handleSubmit"
+  >
+    <a-form :form="form">
+      <a-form-item style="display:none">
+        <a-input v-decorator="['id']"/>
+      </a-form-item>
+      <a-form-item style="display:none">
+        <a-input v-decorator="['version']"/>
+      </a-form-item>
+      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="访客id">
+        <a-input placeholder="访客id" v-decorator="['userId']"/>
+      </a-form-item>
+      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="被访人id">
+        <a-input placeholder="被访人id" v-decorator="['intervieweeId']"/>
+      </a-form-item>
+      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="姓名">
+        <a-input placeholder="姓名" v-decorator="['name']"/>
+      </a-form-item>
+      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="手机号">
+        <a-input placeholder="手机号" v-decorator="['phone']"/>
+      </a-form-item>
+      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="来访是由">
+        <a-input placeholder="来访是由" v-decorator="['visitContent']"/>
+      </a-form-item>
+      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="证件号码">
+        <a-input placeholder="证件号码" v-decorator="['cardNo']"/>
+      </a-form-item>
+      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="创建者">
+        <a-input placeholder="创建者" v-decorator="['createBy']"/>
+      </a-form-item>
+      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="更新者">
+        <a-input placeholder="更新者" v-decorator="['updateBy']"/>
+      </a-form-item>
+      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="版本">
+        <a-input placeholder="版本" v-decorator="['version']"/>
+      </a-form-item>
+      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="照片">
+        <a-input placeholder="照片" v-decorator="['photo']"/>
+      </a-form-item>
+    </a-form>
+  </a-modal>
+</template>
+<script>
+    import {saveVisitorPerson} from '@/api/admin/meeting/visitorPerson'
+    import pick from 'lodash.pick'
+
+    export default {
+  name: 'VisitorPersonModal',
+  props: {
+  },
+  components: {
+  },
+  data () {
+    return {
+      visible: false,
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 5 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 16 }
+      },
+      confirmLoading: false,
+      mdl: {},
+      form: this.$form.createForm(this)
+    }
+  },
+  beforeCreate () {
+  },
+  created () {
+  },
+  methods: {
+    add () {
+      this.form.resetFields()
+      this.edit({ id: 0 })
+    },
+    edit (record) {
+      this.mdl = Object.assign(record)
+      this.visible = true
+      this.$nextTick(() => {
+        this.form.setFieldsValue(pick(this.mdl, 'id', 'userId', 'intervieweeId', 'name', 'phone', 'joinTime', 'visitTime', 'leaveTime', 'visitContent', 'cardType', 'cardNo', 'status', 'createBy', 'createTime', 'updateBy', 'updateTime', 'version', 'deleteFlag', 'photo'))
+      })
+    },
+    handleSubmit (e) {
+      e.preventDefault()
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          console.log('Received values of form: ', values)
+          this.confirmLoading = true
+          saveVisitorPerson(values).then(res => {
+            if (res.code === 0) {
+              this.$message.success('保存成功')
+              this.$emit('ok')
+              this.visible = false
+            } else {
+              this.$message.error(res.msg)
+            }
+          }).catch(() => {
+            this.$message.error('系统错误，请稍后再试')
+          }).finally(() => {
+            this.confirmLoading = false
+          })
+        }
+      })
+    }
+  },
+  watch: {
+    /*
+      'selectedRows': function (selectedRows) {
+        this.needTotalList = this.needTotalList.map(item => {
+          return {
+            ...item,
+            total: selectedRows.reduce( (sum, val) => {
+              return sum + val[item.dataIndex]
+            }, 0)
+          }
+        })
+      }
+      */
+  }
+}
+</script>