IDCDatasync-vue/src/views/datawashing/tempone/subPage.vue

<template>
      <a-modal :title="title" :width="900" :visible="pagevisible" :footer="null"
      @cancel="handleCancel" >
    <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="24" :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" 
                        :pagination="false" :scroll="{ y: 'calc(100vh - 380px)' }" rowKey="id"
                      >
                        <span slot="algorithm" slot-scope="text, record">
                           <span v-if="text == 1">标准差法</span>
                        </span>
                        <span slot="strategy" slot-scope="text, record">
                           <span v-if="text == 1">填充0</span>
                           <span v-if="text == 2">复制上条数据</span>
                           <span v-if="text == 3">删除</span>
                        </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> 

        <rulesModel ref="modalForm" @fatherMethod="getTableInfo" />
    </a-card>
</a-modal>
</template>
<script> 
import { deleteRules, queryRulesByTableName } from '@/api/outlierReplaceRules'
import rulesModel from './rulesModel.vue'
export default {
    name: "outlierReplaceRulessubpage",
    components: { 
        rulesModel
    },
    data() {
        return {  
            title: '',
            datetypeF: '',
            pagevisible: false,
            queryParam: { 
                tableName: null
            },
            dataSource: [],
            columns: [
                {
                    title: '序号',
                    width: 70,
                    customRender: (text, record, index) => `${index + 1}`,
                },
                {
                    title: '表名',
                    align: "center",
                    dataIndex: 'tableName',
                },
                {
                    title: '字段名称',
                    align: "center",
                    dataIndex: 'field',
                },
                {
                    title: '识别算法',
                    align: "center",
                    dataIndex: 'algorithm',
                    scopedSlots: { customRender: 'algorithm' },
                },
                {
                    title: '替换策略',
                    align: "center",
                    dataIndex: 'strategy',
                    scopedSlots: { customRender: 'strategy' },
                },
                {
                    title: '操作',
                    key: 'action',
                    width: 130,
                    align: "center",
                    scopedSlots: { customRender: 'action' },
                },
            ]
        }
    },

    mounted() {

    },
    computed: {

    },
    created() {  },
    methods: {
        getTableInfo() {
            queryRulesByTableName(this.queryParam).then(res => {
                if (res.code == 200) {
                    this.dataSource = res.result
                } else {
                    this.$notification.error({
                        message: '系统提示',
                        description: res.message
                    })
                }
            })
        },
        handleAdd() {
            this.$refs.modalForm.add(this.queryParam.schemaName,this.queryParam.tableName, this.datetypeF);
            this.$refs.modalForm.title = "新增";
        },
        handleEdit(record) {
            this.$refs.modalForm.eidt(record, this.datetypeF);
            this.$refs.modalForm.title = "编辑";
        },
        handleRemove(recordId) {
            console.log('dfs', recordId)
            const _that = this
            _that.$confirm({
                title: '你确认执行删除操作吗?',
                okText: '确认',
                cancelText: '取消',
                onOk() {
                    console.log('dfs', recordId)
                    deleteRules({ id: recordId }).then(res => {
                        if (res.code === 200) {
                            _that.$notification.success({
                                message: '系统提示',
                                description: res.message
                            })
                            _that.getTableInfo()
                        } else {
                            _that.$notification.warning({
                                message: '系统提示',
                                description: res.message
                            })
                        }
                    })
                },
                onCancel() { }
            })
        },
        handleCancel() {
            this.pagevisible = false
        },
    }
}
</script>