jcxt_qd/src/components/admin/getMonitor.vue

  <template>
	<div style="width: 100%">
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item>首页</el-breadcrumb-item>
			<el-breadcrumb-item>主体信息管理</el-breadcrumb-item>
			<el-breadcrumb-item>检测机构</el-breadcrumb-item>
        </el-breadcrumb>
		<el-form ref="form" :model="form" label-width="80px">
        
        <div class="card">
            <!-- 检索信息 -->
            <el-form-item label="机构性质">
                <el-checkbox-group v-model="form.properties" class="querybox">
                    <el-checkbox label="不限" name="type"></el-checkbox>
                    <el-checkbox label="政府部门" name="type"></el-checkbox>
                    <el-checkbox label="事业单位" name="type"></el-checkbox>
                    <el-checkbox label="企业" name="type"></el-checkbox>
                </el-checkbox-group>
            </el-form-item>

            <el-form-item label="资质证书">
                <el-checkbox-group v-model="form.certificate" class="querybox">
                    <el-checkbox label="不限" name="type"></el-checkbox>
                    <el-checkbox label="CNAS" name="type"></el-checkbox>
                    <el-checkbox label="CAL" name="type"></el-checkbox>
                    <el-checkbox label="CMAF" name="type"></el-checkbox>
                    <el-checkbox label="CATL" name="type"></el-checkbox>
                    <el-checkbox label="CMA" name="type"></el-checkbox>
                    <el-checkbox label="暂未取得资质" name="type"></el-checkbox>
                </el-checkbox-group>
            </el-form-item>

            <el-form-item label="主体状态">
                <el-checkbox-group v-model="form.type" class="querybox">
                    <el-checkbox label="不限" name="type"></el-checkbox>
                    <el-checkbox label="正常" name="type"></el-checkbox>
                    <el-checkbox label="已注销" name="type"></el-checkbox>
                    <el-checkbox label="已撤销" name="type"></el-checkbox>
                </el-checkbox-group>
            </el-form-item>
            <!-- 地区和机构名称 -->
            <el-row :gutter="50" style="margin-right: 0px;">
                <el-form style="display: flex; flex-direction: row;" size="mini">

                    <el-form-item prop="address" label="地区" class="select" >
                        <el-cascader  :options="region" v-model="sample_address"
                            @change="handleChange" size="small">
                        </el-cascader>
                    </el-form-item>

                    <el-form-item prop="name" label="机构名称" class="select" >
                        <el-input v-model="form.name" size="small"></el-input>
                    </el-form-item>

                    <el-form-item prop="name" label="机构负责人" class="select" >
                        <el-input v-model="form.person" size="small"></el-input>
                    </el-form-item>
                    <el-button type="success" size="mini" style="height: 40px;margin-left: 10px;" @click="searchData()" >查询</el-button>
                    <el-button type="success" size="mini" style="height: 40px;margin-left: 10px;"  @click="searchData()" >重置</el-button>
                </el-form>
                
            </el-row>
        </div>
        
            <!--  表格数据区域-->
			<el-table ref="multipleTable" :data="testList" row-key="id" @selection-change="handleSelectionChange1"
				border stripe highlight-current-row style="width: 100%;margin-top:30px">
					<el-table-column type="selection" :reserve-selection="true" width="50"></el-table-column>
					<el-table-column label="序号" width="50px">
						<template slot-scope="scope">
							{{ scope.$index+1 }}
						</template>
					</el-table-column>
                    <el-table-column :key="table.prop" v-for="table in tableHeader" :label="table.label"
						:prop="table.prop" align="center" :width="table.width" :fixed="table.fixed" />
                        <!--    分页器区域-->
                <!-- <div class="footer">
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
						:current-page="queryInfo1.pageNum" :page-sizes="[1,10, 15, 20]" :page-size="queryInfo1.pageSize"
						layout="total, sizes, prev, pager, next, jumper" :total="total" background />
					<el-button type="success" @click="choseTest1()">提交</el-button>
				</div> -->

                <!-- 操作按钮区域的作用域插槽 -->
                <el-table-column label="操作" align="center" fixed="right">
                    <template>
                        <el-col style="margin-bottom: 5px;">
                            <el-button type="text" size="mini" @click="readDetails()" style="margin-top:5px">详情</el-button>
                            <el-button type="text" size="mini" plain @click="reVoke()" style="margin-top:5px">撤销</el-button>
                        </el-col>
                    </template>
			    </el-table-column>
			</el-table>
					

        </el-form>
	</div>
</template>
<script>

	export default {
		data() {
			return {
				form: {
                    properties:[],
                    certificate:[],
                    type:[],
                    address:'',
                    name:''
                },
                tableHeader: [{
						label: '机构名称',
						prop: 'name',
						width: 240
					},{
						label: '机构类别',
						prop: 'properties',
						width: 160
					},{
						label: '机构级别',
						prop: 'level',
						width: 160
					},{
						label: '所属区域',
						prop: 'address',
						width: 240
					},{
						label: '机构负责人',
						prop: 'person',
						width: 150
					},{
						label: '创建时间',
						prop: 'create_time',
						width: 200
					},{
						label: '修改时间',
						prop: 'update_time',
						width: 200
					},
                ]}
        },
		created() {
			this.getOrganization()
		},
		mounted() {
			
		},
		methods: {
			 async getOrganization() {
				const result = await this.$http.post('getOrganization')
				console.log(result.data.data)
                this.form = result.data.data
		}
    }
}
	
</script>

<style>
	/* .querybox{
        padding: -20px;
    } */
    .select {
		display: flex;
		flex-direction: row;
		margin-left: 38px;
        
	}
    .card{
        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
        background: rgb(249, 255, 250);
    }
</style>