ARTICLE DETAIL

建站实战干货

来自一线的建站与推广经验沉淀,每一条都经过真实交付验证。

若依组件vue全屏显示

2026/8/11 11:38:44 拓冰建站 浏览量
若依组件vue全屏显示

代码

<template><el-dialog title="违法事项选择" :visible.sync="visible" :fullscreen="fullscreen" width="90%" @close="close" append-to-body><div :class="[fullscreen ? 'exitFullScreenBtn' : 'fullScreenBtn']" v-if="!loading"@click.stop="toggleFullscreen"></div><el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px"><el-form-item label="违法事项" prop="userName"><el-input v-model="queryParams.illegalActivities" placeholder="请输入违法事项" clearable /></el-form-item><el-form-item><el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button><el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button></el-form-item></el-form><!-- 添加或修改表单生成对话框 --><el-table v-loading="loading" :data="dataList" style="width: 100%" ><el-table-column label="违法事项ID" align="center" prop="id" v-if="false"/><el-table-column label="违法事项" align="center" prop="illegalActivities" fixed="left" width="400" height="500" show-overflow-tooltip /><el-table-column label="违反条款" align="center" prop="terms" width="400" height="500"/><el-table-column label="违反条款内容" align="center" prop="termsContent" width="500" height="500" show-overflow-tooltip/><el-table-column label="处罚依据" align="center" prop="according" width="400" height="500"/><el-table-column label="处罚依据内容" align="center" prop="accordingContent" width="500"  height="500" show-overflow-tooltip/><el-table-column align="center" fixed="right" label="操作" width="200"><template slot-scope="scope"><el-button @click="select(scope.row)" type="text" size="small">选择</el-button></template></el-table-column></el-table><pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"/></el-dialog>
</template><script>
import {delIllegalActivities, getIllegalActivities, listIllegalActivities} from "@/api/enforceLaw/illegalActivities";
/*违法事项选择组件*/
export default {name: "IllegalActivitiesSelect",props: {//用户信息value: [Object],fullscreen: {type: Boolean,default: false,},},data() {return {// 遮罩层loading: true,//可选项列表dataList: [],//是否显示visible: false,// 总条数total: 0,// 查询参数queryParams: {pageNum: 1,pageSize: 10,//违法事项illegalActivities: null,},}},watch: {value: {handler(val) {if (val) {return val;} else {return {};}},deep: true,immediate: true},},created() {},methods: {toggleFullscreen() {this.fullscreen = !this.fullscreen; // 切换全屏状态},open() {if (this.dataList.length === 0){this.getList();}this.visible = true;},/** 查询售后工单信息列表 */getList() {this.loading = true;listIllegalActivities(this.queryParams).then(response => {this.dataList = response.rows;this.total = response.total;this.loading = false;});},/** 修改按钮操作 */handleUpdate(row) {this.reset();const id = row.id || this.idsgetIllegalActivities(id).then(response => {this.form = response.data;this.open = true;this.title = "修改违法事项库";this.subIsShow=true;});},/** 删除按钮操作 */handleDelete(row) {const ids = row.id || this.ids;this.$modal.confirm('是否确认删除违法事项库编号为"' + ids + '"的数据项?').then(function() {return delIllegalActivities(ids);}).then(() => {this.getList();this.$modal.msgSuccess("删除成功");}).catch(() => {});},/**查看列表信息*/openView(row, column, cell, event){if (column.property===this.cellClickName){this.reset();const id = row.id || this.idsgetIllegalActivities(id).then(response => {this.form = response.data;this.open = true;this.title = "查看违法事项库";this.subIsShow=false;});}},/** 搜索按钮操作 */handleQuery() {this.queryParams.pageNum = 1;this.getList();},/** 重置按钮操作 */resetQuery() {this.resetForm("queryForm");this.handleQuery();},/** 选中用户 */select(row) {console.log(row);this.$emit("input", row);this.$emit("change", row);this.close();},/** 关闭 */close() {this.visible = false;this.fullscreen = false;},}
}
</script><style scoped></style>