【update】-会议酒店推荐 修改会议类型为输入框，增加查看按钮

src/views/projectManagement/RecommendHotelPage.vue

@@ -38,10 +38,11 @@
           </a-col>
           <a-col :xl="6" :lg="7" :md="8" :sm="24">
             <a-form-item label="曾举办会议类型">
-              <j-dict-select-tag style="width: 100%"
-                                 dict-code="meeting_type"
-                                 v-model="queryParam.meetingType"
-                                 placeholder="请选择曾举办会议类型"></j-dict-select-tag>
+              <a-input placeholder="请输入曾举办会议类型" v-model="queryParam.meetingType" ></a-input>
+              <!--<j-dict-select-tag style="width: 100%"-->
+              <!--                   dict-code="meeting_type"-->
+              <!--                   v-model="queryParam.meetingType"-->
+              <!--                   placeholder="请选择曾举办会议类型"></j-dict-select-tag>-->
             </a-form-item>
           </a-col>
           <a-col :xl="6" :lg="7" :md="8" :sm="24">
@@ -96,8 +97,14 @@
             <div class="table-text">{{ text }}</div>
           </a-tooltip>
         </template>
+
+        <span slot="action" class="action-span-cell" slot-scope="text, record">
+            <a @click="handleDetail(record)">查看</a>
+          </span>
       </a-table>
     </div>
+
+    <recommend-hotel-modal ref="modal"></recommend-hotel-modal>
   </a-card>
 </div>
 </template>
@@ -106,12 +113,14 @@
 import {JeroListMixin} from '@/mixins/JeroListMixin'
 import IconImg from '@/assets/imgs/icon/icon_other_meeting.png'
 import PageHeaderTitle from '@comp/layouts/PageHeaderTitle'
+import RecommendHotelModal from './modules/RecommendHotelModal'
 
 export default {
   name: 'RecommendHotelPage',
   mixins: [JeroListMixin],
   components: {
-    PageHeaderTitle
+    PageHeaderTitle,
+    RecommendHotelModal
   },
   data() {
     return {
@@ -166,7 +175,7 @@ export default {
         {
           title: '曾举办会议类型',
           align: 'center',
-          dataIndex: 'meetingType_dictText',
+          dataIndex: 'meetingType',
           scopedSlots: {customRender: 'text'},
           width: 100,
         },
@@ -183,6 +192,14 @@ export default {
           dataIndex: 'remark',
           scopedSlots: {customRender: 'text'},
           width: 100,
+        },
+        {
+          title: '操作',
+          dataIndex: 'action',
+          align: 'center',
+          // fixed: 'right',
+          width: 100,
+          scopedSlots: { customRender: 'action' }
         }
       ],
       url: {
@@ -198,7 +215,9 @@ export default {
     },
   },
   methods: {
-
+    handleDetail(record) {
+      this.$refs.modal.open(record)
+    }
   }
 }
 </script>

src/views/projectManagement/modules/RecommendHotelModal.vue

@@ -0,0 +1,123 @@
+<template>
+  <j-modal
+    :title="title"
+    :width="width"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    switchFullscreen
+    @cancel="handleCancel"
+    cancelText="关闭">
+    <a-spin :spinning="confirmLoading">
+      <template v-if="dataSource && dataSource !== {}">
+        <div class="detail-container">
+          <div :class="item.class + ' detail-line'" v-for="item in columns" :key="item.dataIndex">
+            <label>{{ item.title }}：</label>
+            <span>{{ dataSource[item.dataIndex] }}</span>
+          </div>
+        </div>
+      </template>
+      <a-empty v-else></a-empty>
+    </a-spin>
+
+    <template slot="footer">
+      <a-button @click="handleCancel">关闭</a-button>
+    </template>
+  </j-modal>
+</template>
+
+<script>
+
+export default {
+  name: 'RecommendHotelModal',
+  data() {
+    return {
+      title: '查看',
+      width: 700,
+      visible: false,
+      confirmLoading: false,
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 5 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 17 }
+      },
+      dataSource: {},
+      columns: [
+        {
+          title: '推荐人',
+          dataIndex: 'recommendPeople'
+        },
+        {
+          title: '酒店名称',
+          dataIndex: 'hotelName'
+        },
+        {
+          title: '所在省份',
+          dataIndex: 'hotelProvince'
+        },
+        {
+          title: '所在城市',
+          dataIndex: 'hotelCity'
+        },
+        {
+          title: '是否举办过标准院会议',
+          dataIndex: 'isHold_dictText'
+        },
+        {
+          title: '曾举办会议类型',
+          dataIndex: 'meetingType'
+        },
+        {
+          title: '酒店联系方式',
+          class: 'full-width',
+          dataIndex: 'contact'
+        },
+        {
+          title: '备注',
+          class: 'full-width',
+          dataIndex: 'remark'
+        }
+      ]
+    }
+  },
+  methods: {
+    /**
+     * 打开弹窗
+     * @param record
+     */
+    open(record) {
+      this.visible = true
+      this.dataSource = Object.assign({}, record)
+    },
+    handleCancel() {
+      this.visible = false
+      this.dataSource = Object.assign({}, {})
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.detail-container{
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+}
+.detail-line {
+  width: 50%;
+  padding: 8px 20px;
+  display: flex;
+  label {
+    flex-shrink: 0;
+  }
+  span {
+    white-space: pre-wrap;
+  }
+}
+.full-width{
+  width: 100%;
+}
+
+</style>