IDCDatasync-vue/src/views/datawashing/dataformatsRules/index.vue

<template>
    <a-card :bordered="false">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
            <a-form layout="inline">
                <a-row :gutter="30">
                    <a-col :md="20">
                        <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                        </span>
                    </a-col>
                </a-row>
                <a-row :gutter="24">
                    <a-col :md="6" :sm="8">
                        <a-form-item label="数据类型">
                            <a-select placeholder="选择数据类型" option-filter-prop="children" v-model="queryParam.dataType" @change="handleTypeChange">
                                <a-select-option v-for="item in dataTypeList" :value="item.enName">
                                    {{ item.cnName }}
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :md="6" :sm="8">
                        <a-form-item label="报文名">
                            <a-input placeholder="请输入报文名称" v-model="queryParam.msgName" allow-clear></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :md="6" :sm="24">
                        <a-button type="primary" style="left: 10px" icon="search" @click="getQueryPage">查询</a-button>
                    </a-col>
                    <!-- <a-col :md="6" :sm="24" style="text-align: right;">
                        <a-button type="primary" style="right: 10px" icon="plus" @click="handleAdd">新建</a-button>
                    </a-col> -->
                </a-row>
            </a-form>
        </div>

        <a-row :gutter="30" style="padding: 0 10px;">
            <a-col :md="24">
                <div class="linese"></div>
                <!-- 表格区域 -->
                <div style="height:calc(100vh - 316px);background: #e6e9f1;overflow:hidden;padding: 15px;">
                    <a-table size="middle" bordered :columns="columns" :data-source="dataSource" :loading="loading"
                        :pagination="pagination" :scroll="{ y: 'calc(100vh - 420px)' }" rowKey="ROW_ID"
                        @change="handleTableChange">
                        <!-- <span slot="createTime" slot-scope="text, record">
                            {{ moment(text).format('YYYY-MM-DD') }}
                        </span> -->
                        <span slot="action" slot-scope="text, record">
                            <a @click="handleEdit(record)">配置</a>
                            <!-- <a-divider type="vertical" />
                            <a @click="handleRemove(record.id)">删除</a> -->
                        </span>
                    </a-table>
                </div>
                <div class="linese"></div>
            </a-col>
        </a-row>
        <subPage ref="subPage" /> 
    </a-card>
</template>
<script>
import moment from 'moment'
import { queryPage } from '@/api/dataformatsRules'
import { dataTypeQueryAll } from '@/api/dataType'
import {getAction} from '@/api/manage'
import subPage from './subPage.vue'
export default {
    name: "dataformatsRules",
    components: {
        subPage
    },
    data() {
        return {
            moment,
            loading: false,
            // 查询条件
            queryParam: {
                dataType: 'biandui',
                msgName: null,
                pageNum: 1,
                pageSize: 10
            },
            pagination: {
                defaultCurrent: 1, // 默认当前页数
                defaultPageSize: 10, // 默认当前页显示数据的大小total: 0, // 总数，必须先有
                showSizeChanger: true,
                showQuickJumper: false,
                pageSizeOptions: ['10', '20', '30'],
                showTotal: total => `总共 ${total} 个项目`, // 显示总数
                onShowSizeChange: (current, pageSize) => (this.queryParam.pageSize = pageSize)
            },
            dataTypeList: [],
            dataSource: [],
            columns: [
                {
                    title: '序号',
                    width: 70,
                    customRender: (text, record, index) => `${index + 1}`,
                },
                {
                    title: '表名',
                    align: "center",
                    dataIndex: 'tableName',
                },
                {
                    title: '报文名称',
                    align: "center",
                    dataIndex: 'msgName',
                },
                {
                    title: '操作',
                    key: 'action',
                    width: 130,
                    align: "center",
                    scopedSlots: { customRender: 'action' },
                },
            ]
        }
    },

    mounted() {

    },
    computed: {

    },
    created() {
        this.getDataType()
    },
    methods: {
        getDataType() {
            getAction("/dataType/getExistingDataTypes", {}).then((res) => {
                if (res.success) {
                this.dataTypeList = res.result.result.DATA_CONN_ORIGINAL
                if(res.result.result.DATA_CONN_ORIGINAL.length > 0){
                    this.queryParam.dataType = res.result.result.DATA_CONN_ORIGINAL[0].enName
                }
                this.getQueryPage()
                } else {
                this.$message.warning(res.message);
                }
            });
        },
        handleTypeChange(value) {
            this.queryParam.dataType = value
            this.getQueryPage()
        },
        handleTableChange(pagination, filters, sorter) {
            this.pagination = pagination
            this.queryParam.pageNum = pagination.current
            this.queryParam.pageSize = pagination.pageSize
            this.getQueryPage()
        },
        getQueryPage() {
            queryPage(this.queryParam).then(res => {
                if (res.code == 200) {
                    const pagination = { ...this.pagination }
                    pagination.total = res.result.total
                    this.dataSource = res.result.rows
                    this.pagination = pagination
                } else {
                    this.$notification.error({
                        message: '系统提示',
                        description: res.message
                    })
                }
            })
        },
       
        handleEdit(record) {
            console.log('编辑', this.queryParam.dataType)
            // this.$refs.modalForm.eidt(record, this.queryParam.dataType);
            // this.$refs.modalForm.title = "配置";
            this.$refs.subPage.queryParam.tableName = record.tableName
            this.$refs.subPage.queryParam.schemaName = record.schemaName
            this.$refs.subPage.datetypeF = this.queryParam.dataType
            this.$refs.subPage.title = "配置";
            this.$refs.subPage.pagevisible = true
            this.$refs.subPage.getTableInfo()
        },
       
    }
}
</script>