修改

src/views/system/dataDictionary/largeScreenMenuDispose/index.vue

+<template>
+	<div class="common-page device-manage">
+
+    	<!-- 表格 -->
+		<div class="panel-bottom page-row">
+			<h3>大屏标题配置</h3>
+			<div class="ctin-box">
+				<div class="content-within">
+					<div class="content-fix">
+						<div class="toolbar">
+							<!-- <el-button size="mini" type="primary" icon="el-icon-plus" @click="toAdd">新增</el-button> -->
+						</div>
+						<div class="content">
+							<el-table :data="tableData" v-loading="loading" border style="width:auto" :row-class-name="tableRowClassName">
+								<el-table-column prop="title" label="标题" align="center"></el-table-column>
+								<el-table-column prop="componentName" label="组件名称" align="center"></el-table-column>
+								<el-table-column prop="status" label="状态" align="center" :formatter="statusChange"></el-table-column>
+								<el-table-column label="操作" align="center" fixed="right">
+									<template slot-scope="scope">
+										<el-button size="mini" type="primary" icon="el-icon-edit" @click="toEdit(scope.row)"></el-button>
+										<!-- <el-button size="mini" type="danger" icon="el-icon-delete" @click="toDelete(scope.row)"></el-button> -->
+									</template>
+								</el-table-column>
+							</el-table>
+							<!--分页组件-->
+							<el-pagination :total="total" :current-page="page" style="margin-top: 8px;" layout="total, prev, pager, next, sizes" @size-change="sizeChange" @current-change="pageChange" />
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<!-- 表单渲染 -->
+		<el-dialog append-to-body :close-on-click-modal="true" :before-close="cancelForm" :visible.sync="form.visible" :title="form.title" width="700px">
+			<el-form :model="form.item" :rules="rules" ref="form1" :inline="true" size="small" label-width="150px">
+                <el-form-item label="状态" prop="status">
+					<el-select v-model="form.item.status" placeholder="请选择状态" style="width:280px;">
+						<el-option label="显示" value="1"></el-option>
+						<el-option label="隐藏" value="0"></el-option>
+					</el-select>
+				</el-form-item>
+			</el-form>
+			<div slot="footer" class="dialog-footer">
+				<el-button type="text" @click="cancelForm">取消</el-button>
+				<el-button :loading="form.status.cu === 2" type="primary" @click="submitForm('form1', form.item)">确认</el-button>
+			</div>
+		</el-dialog>
+
+	</div>
+</template>
+
+<script>
+import { Tools, HttpReq, Dates} from '@/assets/js/common.js';
+
+export default {
+	name: 'LargeScreenMenuDispose',
+	components: {},
+	data() {
+		return {
+			loading: false,
+			page: 1,
+			size: 10,
+			total: 0,
+			query:{},
+			alarmTimeId:'',
+			tableData: [],
+			form: {
+                title:'新增菜单配置',
+                visible:false,
+                reqType:'add',
+                status:{cu:0},
+                item:{},
+			},
+		}
+	},
+	mounted() {
+		var that = this;
+		this.$nextTick(() => {
+			this.loadData();
+		})
+	},
+	methods: {
+		loadData() {
+			var sort = 'id,desc';
+			var param = this.query;
+			param.page = this.page - 1;
+			param.size = this.size;
+			//param.sort = sort;
+			
+			this.$nextTick(()=>{
+				HttpReq.truckDispatching.screenTitleMenuQuery(param).then((res) => {
+					if(res.code == 200){
+						this.loading = false;
+						this.tableData = res.data.content;
+						this.total = res.data.totalElements;
+					}
+				})
+			})
+
+		},
+		tableRowClassName({row, rowIndex}) {
+			if (rowIndex === 1) {
+				return 'warning-row';
+			} else if (rowIndex === 3) {
+				return 'success-row';
+			}
+			return '';
+		},	
+		cancelForm(a, b, c){
+			this.form.visible = false;
+		},
+		toAdd() {
+			// 请除表单验证
+			this.$refs['form1'] && this.$refs['form1'].clearValidate();
+			this.form.title = '新增菜单配置';
+			this.form.status.cu = 0;
+			this.form.visible = true;
+			this.form.reqType = 'add';
+			this.form.item = {};
+		},
+		toEdit(item) {
+			// 请除表单验证
+			this.$refs['form1'] && this.$refs['form1'].clearValidate();
+			this.form.title = '修改菜单配置';
+			this.form.status.cu = 0;
+			this.form.visible = true;
+			this.form.item = {...item};
+			this.form.reqType = 'edit';
+			this.alarmTimeId = this.form.item.id;
+		},
+		toDelete(item) {
+			var id = item.id;
+			this.$confirm('确认删除该条数据吗?', '提示', {
+				confirmButtonText: '确定',
+				cancelButtonText: '取消',
+				type: 'warning'
+			}).then((e) => {
+				this.reqRemoveProject([id])
+			}).catch((e) => {})
+		},
+		pageChange(e) {
+			this.page = e
+			this.loadData()
+		},
+		sizeChange(e) {
+			this.page = 1
+			this.size = e
+			this.loadData()
+		},
+		submitForm(validateName, item){
+			if(!this.form.status.cu){
+				this.form.status.cu = 2;
+				this.$refs[validateName].validate(valid => {
+					if(valid){
+						if(this.form.reqType === 'add'){
+							this.reqAddItem(this.form, item)
+						}else{
+							this.reqUpdateItem(this.form, item)
+						}
+					}else{
+						this.form.status.cu = 0
+					}
+				});
+			};
+		},
+		//新增菜单配置
+		reqAddItem(form, item){
+			let lastData = {...item};
+			HttpReq.truckDispatching.screenTitleMenuAdd(lastData).then((res) => {
+				form.visible = false;
+				if(res.code == 200){
+					this.$notify({
+						title: '菜单配置新增成功！',
+						type: 'success',
+						duration: 2500
+					});
+					this.loadData()
+				}else{
+					this.$notify({
+						title: res.msg,
+						type: 'error',
+						duration: 2500
+					})
+				}
+			}).catch(function(error) {
+				form.status.cu = 0
+			});
+		},
+		//修改菜单配置
+		reqUpdateItem(form, item){
+			let lastData = {...item};
+			lastData.id = this.alarmTimeId;
+			HttpReq.truckDispatching.screenTitleMenuUpdate(lastData).then((res) => {
+				form.visible = false;
+				if(res.code == 200){
+					this.$notify({
+						title: '菜单配置修改成功！',
+						type: 'success',
+						duration: 2500
+					});
+					this.loadData()
+				}else{
+					this.$notify({
+						title: res.msg,
+						type: 'error',
+						duration: 2500
+					})
+				}
+			}).catch(function(error) {
+				form.status.cu = 0
+			});
+		},
+		//删除菜单配置
+		reqRemoveProject(item){
+			HttpReq.truckDispatching.screenTitleMenuDel(item).then((res) => {
+				if(res.status == 400){
+					this.$notify({
+						title: res.msg,
+						type: 'error',
+						duration: 2500
+					})
+				}else{
+					this.$notify({
+						title: '删除成功！',
+						type: 'success',
+						duration: 2500
+					});
+				}
+				this.loadData();
+			})
+		},
+        //组件状态展示修改
+        statusChange(row){
+            return row.status == '1' ? '显示' : '隐藏';
+        }
+	}
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scope>
+	.el-table .warning-row {
+		background: oldlace;
+	}
+	.el-table .success-row {
+		background: #f0f9eb;
+	}
+	
+	.device-manage{
+		.panel-bottom{
+			.el-button{margin:2px 0;padding:6px 15px;font-size:14px;}
+			.btn-groub2{
+				display:inline-block;
+				.el-button{margin:2px 0;padding:6px 15px;font-size:15px;}
+				.el-button--warning {
+					background-color: #e6a23c;
+					border-color: #e6a23c;
+				}
+				.el-button--warning:focus,.el-button--warning:hover{background:#ebb563;border-color:#ebb563;}
+			}
+		}
+	}
+	
+	.ecahrt1-dialog{
+		display:flex;align-items:center;
+		.el-dialog{
+			margin-top:inherit !important;display:table !important;width:fit-content;
+			.el-form-item{margin-right:0;}
+		}
+
+		.el-dialog__header{height:0;padding:0;display:block;}
+		.form-body{
+			border:1px solid #999;width:800px;height:500px;position:relative;
+			>div{position:absolute;top:0;left:0;height:100%;width:100%;}
+		}
+	}
+</style>