hotel-saas-plateform-frontend/src/views/business/BusHotelList.vue

<template>
  <a-card :bordered='false'>
    <!-- 查询区域 -->
    <div class='table-page-search-wrapper'>
      <a-form layout='inline' @keyup.enter.native='searchQuery'>
        <a-row :gutter='24'>
          <a-col :md="6" :sm="12">
            <a-form-item label="名称">
              <j-input placeholder="输入名称模糊查询" v-model="queryParam.name"></j-input>
            </a-form-item>
          </a-col>

          <a-col :md="6" :sm="8">
            <a-form-item label="联系人">
              <j-input placeholder="请输入联系人模糊查询" v-model="queryParam.linkName"></j-input>
            </a-form-item>
          </a-col>

          <a-col :md="6" :sm="8">
            <a-form-item label="联系电话">
              <j-input placeholder="请输入联系电话模糊查询" v-model="queryParam.linkTel"></j-input>
            </a-form-item>
          </a-col>

          <template v-if="toggleSearchStatus">

            <a-col :md="6" :sm="8">
              <a-form-item label="酒店电话">
                <j-input placeholder="请输入酒店电话模糊查询" v-model="queryParam.tel"></j-input>
              </a-form-item>
            </a-col>

            <a-col :md="6" :sm="8">
              <a-form-item label="酒店地址">
                <j-input placeholder="请输入酒店地址模糊查询" v-model="queryParam.address"></j-input>
              </a-form-item>
            </a-col>

            <a-col :md="6" :sm="8">
              <a-form-item label="审核状态">
                <a-select v-model="queryParam.checkStatus" placeholder="请选择">
                  <a-select-option value="">请选择</a-select-option>
                  <a-select-option value="0">待审核</a-select-option>
                  <a-select-option value="1">审核通过</a-select-option>
                  <a-select-option value="2">审核未通过</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </template>

          <a-col :md="6" :sm="8">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
              <a @click="handleToggleSearch" style="margin-left: 8px">
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
              </a>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- 操作按钮区域 -->
    <div class='table-operator'>
      <a-button @click='handleAdd' type='primary' icon='plus'>新增</a-button>
      <!-- handleExportXls-->
<!--      <a-button type='primary' icon='download' @click="handleHotelExportXls('酒店信息')">导出</a-button>-->
<!--      <a-upload-->
<!--        name='file'-->
<!--        :showUploadList='false'-->
<!--        :multiple='false'-->
<!--        :headers='tokenHeader'-->
<!--        :action='importExcelUrl'-->
<!--        @change='handleHotelImportExcel'>-->
<!--        <a-button type='primary' icon='import'>导入</a-button>-->
<!--      </a-upload>-->
      <!-- 高级查询区域 -->
<!--      <j-super-query :fieldList='superFieldList' ref='superQueryModal' @handleSuperQuery='handleSuperQuery'></j-super-query>-->
      <a-dropdown v-if='selectedRowKeys.length > 0'>
        <a-menu slot='overlay'>
          <a-menu-item key='1' @click='batchDel'><a-icon type='delete'/>删除</a-menu-item>
        </a-menu>
        <a-button style='margin-left: 8px'> 批量操作 <a-icon type='down' /></a-button>
      </a-dropdown>
    </div>

    <!-- table区域-begin -->
    <div>
      <div class='ant-alert ant-alert-info' style='margin-bottom: 16px'>
        <i class='anticon anticon-info-circle ant-alert-icon'></i> 已选择 <a style='font-weight: 600'>{{ selectedRowKeys.length }}</a>项
        <a style='margin-left: 24px' @click='onClearSelected'>清空</a>
      </div>

      <a-table
        ref='table'
        size='middle'
        :scroll='{x:true}'
        bordered
        rowKey='id'
        :columns='columns'
        :dataSource='dataSource'
        :pagination='ipagination'
        :loading='loading'
        :rowSelection='{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}'
        class='j-table-force-nowrap'
        @change='handleTableChange'>

        <template slot='htmlSlot' slot-scope='text'>
          <div v-html='text'></div>
        </template>
        <template slot='imgSlot' slot-scope='text, record'>
          <span v-if='!text' style='font-size: 12px;font-style: italic'>无图片</span>
          <img
            v-else
            :src='getImgView(text)'
            :preview='record.id'
            height='25px'
            alt=''
            style='max-width:80px;font-size: 12px;font-style: italic'/>
        </template>
        <template slot='fileSlot' slot-scope='text'>
          <span v-if='!text' style='font-size: 12px;font-style: italic'>无文件</span>
          <a-button
            v-else
            :ghost='true'
            type='primary'
            icon='download'
            size='small'
            @click='downloadFile(text)'>
            下载
          </a-button>
        </template>

        <span slot='action' slot-scope='text, record'>
          <a @click='handleEdit(record)'>编辑</a>
          <a-divider v-if="record.checkStatus == 0" type='vertical' />
          <a v-if="record.checkStatus == 0" class="padding_left_8" @click='handleCheck(record)'>审核</a>

          <a-divider type='vertical' />
          <a-dropdown>
            <a class='ant-dropdown-link'>更多 <a-icon type='down' /></a>
            <a-menu slot='overlay'>
              <a-menu-item>
                <a @click='handleDetail(record)'>详情</a>
              </a-menu-item>
<!--              <a-menu-item>-->
<!--                <a v-if="record.checkStatus == 0" @click='handleCheck(record)'>审核</a>-->
<!--              </a-menu-item>-->
              <a-menu-item>
                <a-popconfirm title='确定删除吗?' @confirm='() => handleDelete(record.id)'>
                  <a>删除</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>

      </a-table>
    </div>

    <bus-hotel-modal ref='modalForm' @ok='modalFormOk'></bus-hotel-modal>
  </a-card>
</template>

<script>
  import { deleteAction, getAction, downFile, getFileAccessHttpUrl } from '@/api/manage'
  import '@/assets/less/TableExpand.less'
  import { mixinDevice } from '@/utils/mixin'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import BusHotelModal from './modules/BusHotelModal'

  export default {
    name: 'BusHotelList',
    mixins:[JeecgListMixin, mixinDevice],
    components: {
      BusHotelModal
    },
    data () {
      return {
        description: 'bus_hotel管理页面',
        // 表头
        columns: [
          // {
          //   title: '#',
          //   dataIndex: '',
          //   key: 'rowIndex',
          //   width: 60,
          //   align: 'center',
          //   customRender: function (t, r, index) {
          //     return parseInt(index) + 1
          //   }
          // },
          {
            title: '关联租户',
            align: 'center',
            fixed: 'left',
            width: 120,
            ellipsis: true,
            dataIndex: 'tenantName'
          },
          {
            title: '酒店名称',
            align: 'center',
            fixed: 'left',
            width: 120,
            ellipsis: true,
            dataIndex: 'name'
          },
          {
            title: '联系人',
            align: 'center',
            width: 80,
            dataIndex: 'linkName'
          },
          {
            title: '联系电话',
            align: 'center',
            width: 80,
            dataIndex: 'linkTel'
          },
          {
            title: '酒店电话',
            align: 'center',
            width: 80,
            dataIndex: 'tel'
          },
          {
            title: '酒店地址',
            align: 'center',
            dataIndex: 'address'
          },
          {
            title: '备注',
            align: 'center',
            dataIndex: 'remarks'
          },
          {
            title: '状态',
            align: "center",
            dataIndex: 'checkStatus_dictText'
          },
          {
            title: '审核信息',
            align: 'center',
            dataIndex: 'checkRemarks'
          },
          // {
          //   title: '星级',
          //   align: 'center',
          //   dataIndex: 'star'
          // },
          // {
          //   title: '经度',
          //   align: 'center',
          //   dataIndex: 'lng'
          // },
          // {
          //   title: '纬度',
          //   align: 'center',
          //   dataIndex: 'lat'
          // },
          // {
          //   title: '客房总数',
          //   align: 'center',
          //   dataIndex: 'roomCount'
          // },
          // {
          //   title: '开业时间',
          //   align: 'center',
          //   dataIndex: 'openTime',
          //   customRender: function (text) {
          //     return !text ? '' : (text.length > 10 ? text.substr(0, 10) : text)
          //   }
          // },
          // {
          //   title: '装修时间',
          //   align: 'center',
          //   dataIndex: 'renovationTime',
          //   customRender: function (text) {
          //     return !text ? '' : (text.length > 10 ? text.substr(0, 10) : text)
          //   }
          // },
          // {
          //   title: '酒店主题',
          //   align: 'center',
          //   dataIndex: 'topic'
          // },
          // {
          //   title: '酒店政策',
          //   align: 'center',
          //   dataIndex: 'policy'
          // },
          // {
          //   title: '酒店介绍',
          //   align: 'center',
          //   dataIndex: 'introduction'
          // },
          // {
          //   title: '预订提醒',
          //   align: 'center',
          //   dataIndex: 'reserveRemind'
          // },
          // {
          //   title: '交通和周边',
          //   align: 'center',
          //   dataIndex: 'traffic'
          // },
          // {
          //   title: '门头照',
          //   align: 'center',
          //   dataIndex: 'ewmLogo'
          // },
          // {
          //   title: '酒店图片',
          //   align: 'center',
          //   dataIndex: 'imgs'
          // },
          // {
          //   title: '营业执照',
          //   align: 'center',
          //   dataIndex: 'yyImg'
          // },
          // {
          //   title: '特种行业许可证',
          //   align: 'center',
          //   dataIndex: 'tzhyImg'
          // },
          // {
          //   title: '企业法人',
          //   align: 'center',
          //   dataIndex: 'legalPerson'
          // },
          // {
          //   title: '经营场所',
          //   align: 'center',
          //   dataIndex: 'registeredAddress'
          // },
          // {
          //   title: '注册号',
          //   align: 'center',
          //   dataIndex: 'unifiedCode'
          // },
          // {
          //   title: '有效期',
          //   align: 'center',
          //   dataIndex: 'businessTerm',
          //   customRender: function (text) {
          //     return !text ? '' : (text.length > 10 ? text.substr(0, 10) : text)
          //   }
          // },
          // {
          //   title: '身份证正面照',
          //   align: 'center',
          //   dataIndex: 'sfzImg1'
          // },
          // {
          //   title: '身份证反面照',
          //   align: 'center',
          //   dataIndex: 'sfzImg2'
          // },
          // {
          //   title: '身份证手持照',
          //   align: 'center',
          //   dataIndex: 'sfzImg3'
          // },
          // {
          //   title: '身份证姓名',
          //   align: 'center',
          //   dataIndex: 'sfzName'
          // },
          // {
          //   title: '身份证号',
          //   align: 'center',
          //   dataIndex: 'idCard'
          // },
          // {
          //   title: '服务商',
          //   align: 'center',
          //   dataIndex: 'sellerName'
          // },
          // {
          //   title: '邀请码',
          //   align: 'center',
          //   dataIndex: 'invitationCode'
          // },
          // {
          //   title: '总店',
          //   align: 'center',
          //   dataIndex: 'superiorSellerId'
          // },
          // {
          //   title: '银联支付',
          //   align: 'center',
          //   dataIndex: 'unionpay'
          // },
          // {
          //   title: '到店支付',
          //   align: 'center',
          //   dataIndex: 'ddOpen'
          // },
          // {
          //   title: '微信支付',
          //   align: 'center',
          //   dataIndex: 'wxOpen'
          // },
          // {
          //   title: '余额支付',
          //   align: 'center',
          //   dataIndex: 'yeOpen'
          // },
          {
            title: '操作',
            dataIndex: 'action',
            align: 'center',
            fixed: 'right',
            width: 147,
            scopedSlots: { customRender: 'action' }
          }
        ],
        url: {
          list: '/business/busHotel/list',
          delete: '/business/busHotel/delete',
          deleteBatch: '/business/busHotel/deleteBatch',
          exportXlsUrl: '/business/busHotel/exportXls',
          importExcelUrl: '/business/busHotel/importExcel'
        },
        dictOptions: {},
        superFieldList: []
      }
    },
    created() {
    this.getSuperFieldList()
    },
    computed: {
      importExcelUrl: function() {
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
      }
    },
    methods: {
      initDictConfig() {
      },
      getSuperFieldList() {
        let fieldList = []
        fieldList.push({
          type: 'string', value: 'tenantId', text: '关联租户'
        })
        fieldList.push({
          type: 'string', value: 'name', text: '酒店名称'
        })
        fieldList.push({
          type: 'string', value: 'linkName', text: '联系人'
        })
        fieldList.push({
          type: 'string', value: 'linkTel', text: '联系电话'
        })
        fieldList.push({
          type: 'string', value: 'tel', text: '酒店电话'
        })
        fieldList.push({
          type: 'string', value: 'address', text: '酒店地址'
        })
        fieldList.push({
          type: 'string', value: 'star', text: '星级'
        })
        fieldList.push({
          type: 'number', value: 'lng', text: '经度'
        })
        fieldList.push({
          type: 'number', value: 'lat', text: '纬度'
        })
        fieldList.push({
          type: 'int', value: 'roomCount', text: '客房总数'
        })
        fieldList.push({
          type: 'date', value: 'openTime', text: '开业时间'
        })
        fieldList.push({
          type: 'date', value: 'renovationTime', text: '装修时间'
        })
        fieldList.push({
          type: 'string', value: 'topic', text: '酒店主题'
        })
        fieldList.push({
          type: 'string', value: 'policy', text: '酒店政策'
        })
        fieldList.push({
          type: 'string', value: 'introduction', text: '酒店介绍'
        })
        fieldList.push({
          type: 'string', value: 'reserveRemind', text: '预订提醒'
        })
        fieldList.push({
          type: 'string', value: 'traffic', text: '交通和周边'
        })
        fieldList.push({
          type: 'string', value: 'ewmLogo', text: '门头照'
        })
        fieldList.push({
          type: 'string', value: 'imgs', text: '酒店图片'
        })
        fieldList.push({
          type: 'string', value: 'yyImg', text: '营业执照'
        })
        fieldList.push({
          type: 'string', value: 'tzhyImg', text: '特种行业许可证'
        })
        fieldList.push({
          type: 'string', value: 'legalPerson', text: '企业法人'
        })
        fieldList.push({
          type: 'string', value: 'registeredAddress', text: '经营场所'
        })
        fieldList.push({
          type: 'string', value: 'unifiedCode', text: '注册号'
        })
        fieldList.push({
          type: 'date', value: 'businessTerm', text: '有效期'
        })
        fieldList.push({
          type: 'string', value: 'sfzImg1', text: '身份证正面照'
        })
        fieldList.push({
          type: 'string', value: 'sfzImg2', text: '身份证反面照'
        })
        fieldList.push({
          type: 'string', value: 'sfzImg3', text: '身份证手持照'
        })
        fieldList.push({
          type: 'string', value: 'sfzName', text: '身份证姓名'
        })
        fieldList.push({
          type: 'string', value: 'idCard', text: '身份证号'
        })
        fieldList.push({
          type: 'string', value: 'sellerName', text: '服务商'
        })
        fieldList.push({
          type: 'string', value: 'invitationCode', text: '邀请码'
        })
        fieldList.push({
          type: 'string', value: 'superiorSellerId', text: '总店'
        })
        fieldList.push({
          type: 'string', value: 'unionpay', text: '银联支付'
        })
        fieldList.push({
          type: 'string', value: 'ddOpen', text: '到店支付'
        })
        fieldList.push({
          type: 'string', value: 'wxOpen', text: '微信支付'
        })
        fieldList.push({
          type: 'string', value: 'yeOpen', text: '余额支付'
        })
        this.superFieldList = fieldList
      },
      handleHotelExportXls(fileName) {
        if (!fileName || typeof fileName !== 'string') {
          fileName = '导出文件'
        }
        let param = this.getQueryParams()
        if(this.selectedRowKeys && this.selectedRowKeys.length > 0 ) {
          param['selections'] = this.selectedRowKeys.join(',')
        }
        console.log('导出参数', param)
        downFile(this.url.exportXlsUrl, param).then((data) => {
          if (!data) {
            this.$message.warning('文件下载失败')
            return
          }
          if (typeof window.navigator.msSaveBlob !== 'undefined') {
            window.navigator.msSaveBlob(new Blob([data], {
              type: 'application/vnd.ms-excel'
        }), fileName + '.xls')
          } else {
            let url = window.URL.createObjectURL(new Blob([data], {
              type: 'application/vnd.ms-excel'
        }))
            let link = document.createElement('a')
            link.style.display = 'none'
            link.href = url
            link.setAttribute('download', fileName + '.xls')
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link) // 下载完成移除元素
            window.URL.revokeObjectURL(url) // 释放掉blob对象
          }
        })
      },
      handleHotelImportExcel() {
        console.log(444)
      },
      handleCheck: function(record) {
        console.log(this.$refs)
        this.$refs.modalForm.check(record)
        this.$refs.modalForm.title = '审核'
        this.$refs.modalForm.disableSubmit = false
      }
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less'
  .padding_left_8{
    padding-left: 8px;
  }
</style>