eln_web/src/components/Template/SelectTable.vue

<template>
    <div>
        <div >
            <el-form :inline="true"  class="demo-form-inline" ref="SearchSjRef">
                <el-form-item v-for="(item,key) in searchForm" :key="key" :label="$t(item.label)">
                    <el-select v-if="item.type === 'select'" v-model="listParams[key]" :placeholder="$t('form.placeholderSelect')">
                        <el-option v-for="(opt) in item.options" :key="opt.value" :label="opt.label" :value="opt.value"></el-option>
                    </el-select>
                    <el-input v-else v-model="listParams[key]" :placeholder="$t('form.placeholderInput')"></el-input>
                  
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSearch">{{$t('form.search')}}</el-button>
                    <el-button @click="reset">{{ $t('form.reset') }}</el-button>
                </el-form-item>
            </el-form>
            <el-table :data="dataSource" :row-key="(row) => row.id">
                <el-table-column width="80" align="center" v-if="showRadio">
                    <template slot-scope="scope">
                        <el-radio v-model="localSelectedId" :label="scope.row[selectedCode]" class="hide-label"  @input.native.stop="handleRadioClick(scope.row)"></el-radio>
                    </template>
                </el-table-column>
                <el-table-column v-for="(item) in columns" :prop="item.prop" :key="item.prop" :label="$t(item.label)">
                </el-table-column>
            </el-table>
            <div class="mt-10">
                <el-pagination
                    :page-limit.sync="pagination.pageSize"
                    :current-page.sync="pagination.pageNum"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pagination.total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
            </div>
        </div>
    </div>
</template>

<script>

export default {
    props: {
        //[{label:"名称",prop:"name"}]
        searchForm: {
            type: Object,
            default: () => {},
        },
        showRadio: {//是否显示单选框
            type: Boolean,
            default: true,
        },
        columns: {
            type: Array,
            default: [],
        },
        
        selectedId: {
            type: String,
            default: "",
        },
        selectedCode: {
            type: String,
            default: "bh",//radio选中的值的字段
        },
        listApi:{
            type: Function,
            default: () => {},
        },
        studyFormId: {
            type: String,
            default: "",
        },
    },
    data() {
        return {
            localSelectedId: "",
            listParams: {
                pageNum: 1,
                pageSize: 10,
            },
            pagination: {
                pageNum: 1,
                pageSize: 10,
                total: 0,
            },
            dataSource: []
        }
    },
    watch: {
        selectedId: {
            immediate: true,
            handler(newVal, oldVal) {
                this.localSelectedId = newVal;
            },
        },
    },
    mounted() {
        
    },
    methods: {
        show(){
            this.localSelectedId = ''
            this.initSearchForm();
            this.getList();
        },
        //初始化查询表单
        initSearchForm() {
            for(let key in this.searchForm) {
                this.listParams[key] = "";
            }
            this.listParams = {...this.listParams}
            this.listParams.studyFormId = this.studyFormId || ''
        },
        async getList() {
            const res = await this.listApi(this.listParams);
            this.dataSource = res.rows;
            this.pagination = {
                pageNum: this.listParams.pageNum,
                pageSize: this.listParams.pageSize,
                total: res.total,
            };
        },
        //查询
        onSearch() {
            this.pagination.pageNum = 1;
            this.getList();
        },  
        reset(){
            this.initSearchForm();
            this.getList();
            this.onSearch()
        },
        //分页大小切换
        handleSizeChange(e) {
            this.$emit("pagination", {pageSize: e});
            this.listParams.pageSize = e;
            this.getList();
        },
        //分页切换
        handleCurrentChange(e) {
            this.$emit("pagination", {pageNum: e});
            this.listParams.pageNum = e;
            this.getList();
        },
        //单选框点击
        handleRadioClick(row) {
            this.localSelectedId = row[this.selectedCode];
            this.$emit("radioSelect", row[this.selectedCode],row);
        },
    }

}
</script>

<style lang="scss" scoped>
.mt-10 {
    margin-top: 10px;
}
</style>