dzhh-frontend/.svn/pristine/d4/d44543b39c05f7512636ff21265557b10baa98fa.svn-base

<template>
    <a-card :bordered='false'>
        <!-- 查询区域 -->
        <div class='table-page-search-wrapper'>
            <a-modal
                title='请谨慎操作！'
                :visible='visible'
                :confirm-loading='confirmLoading'
                @ok='handleOk'
                @cancel='handleCancel'
            >
                <p>{{ ModalText }}</p>
            </a-modal>
            <a-form layout='inline' @keyup.enter.native='searchQuery'>
                <a-row :gutter='24'>
                  <a-col :xl='6' :lg='7' :md='8' :sm='24'>
                    <a-form-item label='河流名称'>
                      <j-popup placeholder="请选择河流名称" v-model="queryParam.hlmc" code="hllist"
                               org-fields="hlmc" dest-fields="hlmc" :field="getPopupField('hlmc')"
                               :multi="false"/>
                    </a-form-item>
                  </a-col>
                    <a-col :xl='6' :lg='7' :md='8' :sm='24'>
                        <a-form-item label='公告牌编码'>
                            <a-input placeholder='请输入公告牌编码' v-model='queryParam.gspbm'></a-input>
                        </a-form-item>
                    </a-col>

                  <a-col :xl='6' :lg='7' :md='8' :sm='24'>
                    <a-form-item label='行政区划'>
                      <j-area-linkage type='cascader' v-model='queryParam.xzqh' placeholder='请选择省市区' />
                    </a-form-item>
                  </a-col>

                    <template v-if='toggleSearchStatus'>
                      <a-col :xl='6' :lg='7' :md='8' :sm='24'>
                        <a-form-item label='所在位置'>
                          <a-input placeholder='请输入所在位置' v-model='queryParam.szwz'></a-input>
                        </a-form-item>
                      </a-col>
                        <a-col :xl='6' :lg='7' :md='8' :sm='24'>
                            <a-form-item label='公告牌名称'>
                                <a-input placeholder='请输入公告牌名称' v-model='queryParam.gspmc'></a-input>
                            </a-form-item>
                        </a-col>
                    </template>
                    <a-col :xl='6' :lg='7' :md='8' :sm='24'>
            <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' v-has="'gsp:add'" type='primary' icon='plus'>新增</a-button>
            <a-button v-has="'gsp:dc'" type='primary' icon='download' @click="handleExportXls('公示牌信息表')">导出</a-button>
            <a-upload name='file' :showUploadList='false' :multiple='false' :headers='tokenHeader'
                      :action='importExcelUrl' @change='handleImportExcel'>
                <a-button v-has="'gsp:dr'" type='primary' icon='import'>导入</a-button>
            </a-upload>
            <a-button v-has="'gsp:sctx'" type='primary' icon='download' @click='showModal'>生成图形</a-button>
            <!-- 高级查询区域 -->
            <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' v-has="'gsp:pldelete'"> 批量操作
                    <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='gspbm' slot-scope='text,record'>
                    <a @click='handleDetail(record)'>{{ text }}</a>
                </template>
                <template slot='htmlSlot' slot-scope='text'>
                    <div v-html='text'></div>
                </template>
                <template slot='imgSlot' slot-scope='text'>
                    <span v-if='!text' style='font-size: 12px;font-style: italic;'>无图片</span>
                    <img v-else :src='getImgView(text)' height='25px' alt=''
                         style='max-width:80px;font-size: 12px;font-style: italic;' />
                </template>
                <template slot='pcaSlot' slot-scope='text'>
                    <div>{{ getPcaText(text) }}</div>
                </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-space>
                        <a-button @click='handleEdit(record)' v-has="'gsp:bj'" size='small' type='primary'>编辑</a-button>
                        <a-popconfirm title='确定删除吗?' @confirm='() => handleDelete(record.id)'>
                            <a-button size='small' v-has="'gsp:delete'" type='danger'>删除</a-button>
                        </a-popconfirm>
                    </a-space>

                    <!--                    <a-button  v-has="'gsp:delete'" type='primary'>-->
                    <!--                        <a-popconfirm title='确定删除吗?' @confirm='() => handleDelete(record.id)'>-->
                    <!--                            <a>删除</a>-->
                    <!--                        </a-popconfirm>-->
                    <!--                    </a-button>-->

                    <!--          <a-divider type="vertical" />-->
                    <!--          <a-dropdown>-->
                    <!--            <a-button @click="handleEdit(record)" v-has="'gsp:delete'" type="primary" icon="plus">更多 <a-icon type="down" /></a-button>-->
                    <!--            <a-menu slot="overlay">-->
                    <!--              <a-menu-item>-->
                    <!--                <a @click="handleDetail(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>

        <rm-bulletin-board-modal ref='modalForm' @ok='modalFormOk'></rm-bulletin-board-modal>
    </a-card>
</template>

<script>

import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import RmBulletinBoardModal from './modules/RmBulletinBoardModal'
import Area from '@/components/_util/Area'
import { getAction } from '../../../../api/manage'

export default {
    name: 'RmBulletinBoardList',
    mixins: [JeecgListMixin, mixinDevice],
    components: {
        RmBulletinBoardModal
    },
    data() {
        return {
            ModalText: '',
            visible: false,
            confirmLoading: false,
            description: '公示牌信息表管理页面',
            // 表头
            columns: [
                {
                    title: '序号',
                    dataIndex: '',
                    key: 'rowIndex',
                    width: 60,
                    align: 'center',
                    customRender: function(t, r, index) {
                        return parseInt(index) + 1
                    }
                },
                {
                    title: '公告牌编码',
                    align: 'center',
                    sorter: true,
                    dataIndex: 'gspbm',
                    scopedSlots: { customRender: 'gspbm' }
                },

                {
                    title: '行政区划',
                    align: 'center',
                    dataIndex: 'xzqh',
                    scopedSlots: { customRender: 'pcaSlot' }
                },
                {
                    title: '所在位置',
                    align: 'center',
                    sorter: true,
                    dataIndex: 'szwz'
                },
                {
                    title: '河流名称',
                    align: 'center',
                    dataIndex: 'hlmc'
                },
                {
                    title: '岸别',
                    align: 'center',
                    dataIndex: 'ab'
                },
                {
                    title: '横坐标',
                    align: 'center',
                    dataIndex: 'hzb'
                },
                {
                    title: '纵坐标',
                    align: 'center',
                    dataIndex: 'zzb'
                },
                {
                    title: '高程',
                    align: 'center',
                    dataIndex: 'gc'
                },
                // {
                //   title:'地图标志',
                //   align:"center",
                //   dataIndex: 'flag'
                // },
                {
                    title: '操作',
                    dataIndex: 'action',
                    align: 'center',
                    fixed: 'right',
                    width: 147,
                    scopedSlots: { customRender: 'action' }
                }
            ],
            url: {
                list: '/hzz.hhhj.gsp/rmBulletinBoard/list',
                delete: '/hzz.hhhj.gsp/rmBulletinBoard/delete',
                deleteBatch: '/hzz.hhhj.gsp/rmBulletinBoard/deleteBatch',
                exportXlsUrl: '/hzz.hhhj.gsp/rmBulletinBoard/exportXls',
                importExcelUrl: 'hzz.hhhj.gsp/rmBulletinBoard/importExcel'

            },
            dictOptions: {},
            pcaData: '',
            superFieldList: []
        }
    },
    created() {
        this.pcaData = new Area()
        this.getSuperFieldList()
    },
    computed: {
        importExcelUrl: function() {
            return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
        }
    },
    methods: {
        //显示模态框
        showModal() {
            this.visible = true
        },
        //点击ok
        handleOk(e) {
            this.ModalText = '确定生成图形吗？'
            this.confirmLoading = true
            this.xmjgsb()
            setTimeout(() => {
                this.visible = false
                this.confirmLoading = false
            }, 5000)
            this.loadData()
        },
        //点击cancel
        handleCancel(e) {
            console.log('Clicked cancel button')
            this.visible = false
        },
        xmjgsb() {
            getAction('/hzz.hhhj.gsp/rmBulletinBoard/genarateGeo').then(res => {
                if (res.success) {
                    this.ModalText = '生成图形成功'
                } else {
                    this.ModalText = '生成图形失败,请联系管理员'
                }
            })
        },
        getPcaText(code) {
            return this.pcaData.getText(code)
        },
        initDictConfig() {
        },
        getSuperFieldList() {
            let fieldList = []
            fieldList.push({
                type: 'popup',
                value: 'hlmc',
                text: '河流名称',
                popup: { code: 'hllist', field: 'id', orgFields: 'id', destFields: 'hlid' }
            })
            fieldList.push({ type: 'pca', value: 'xzqh', text: '行政区划' })
            fieldList.push({ type: 'string', value: 'szwz', text: '所在位置', dictCode: '' })
            fieldList.push({ type: 'string', value: 'gspbm', text: '公示牌编码', dictCode: '' })
            fieldList.push({ type: 'string', value: 'gspmc', text: '岸别', dictCode: '' })
            fieldList.push({ type: 'double', value: 'hzb', text: '横坐标', dictCode: '' })
            fieldList.push({ type: 'double', value: 'zzb', text: '纵坐标', dictCode: '' })
            fieldList.push({ type: 'double', value: 'gc', text: '高程', dictCode: '' })
            fieldList.push({ type: 'string', value: 'ggpzp', text: '公告牌照片', dictCode: '' })
            fieldList.push({ type: 'int', value: 'flag', text: '地图标志', dictCode: '' })
            this.superFieldList = fieldList
        }
    }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>