fibo-rule/h5-enginex-manager/src/备用组件/简单的列表页.vue

<template>
	<div>
		<div style="padding-top: 20px;">
			<el-button type="primary" @click="add">添加引擎</el-button>

		
		</div>

		<el-table :data="list" border style="width: 100%;margin-top: 20px;" v-loading="loading">
			<el-table-column prop="id" label="引擎ID" align="center">
			</el-table-column>
			<el-table-column prop="name" label="名称" align="center">
			</el-table-column>
			<el-table-column prop="description" label="描述" align="center">
			</el-table-column>
			
			
			<el-table-column prop="createDatetime" label="创建时间" align="center">
				<template slot-scope="scope">
					{{new Date(scope.row.createDatetime).format('yyyy-MM-dd hh:mm:ss')}}
				</template>
			</el-table-column>
			<el-table-column prop="" label="操作" align="center">
				<template slot-scope="scope">
					<div style="display: flex;justify-content: center;">

						<el-button type="primary" icon="el-icon-edit" circle size="mini" @click="update(scope.row)">
						</el-button>
						<el-button type="danger" icon="el-icon-delete" circle size="mini"
							@click="deleteMq(scope.row.id)"></el-button>
					</div>
				</template>
			</el-table-column>
		</el-table>

		<div style="display: flex;justify-content: flex-end;padding-top: 20px;padding-right: 20px;">
			<el-pagination background layout="prev, pager, next" :current-page.sync="pageNum" :total="total"
				@current-change="getList">
			</el-pagination>
		</div>





		<el-dialog title="添加/修改" :visible.sync="dialogVisible" width="30%" @close="close">
			<div v-loading="dialogLoading">
				<el-form ref="form" :model="form" label-width="120px" :rules="rules">
					<el-form-item label="引擎名称" prop="name">
						<el-input v-model="form.name"></el-input>
					</el-form-item>
					<el-form-item label="引擎描述" prop="description">
						<el-input v-model="form.description"></el-input>
					</el-form-item>
					
				</el-form>
				<div style="display: flex;justify-content: flex-end;">
					<el-button @click="dialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="dialogCallBack">确 定</el-button>
				</div>
			</div>
		</el-dialog>

	</div>
</template>

<script>
	import {
		engineGetList,
		engineAdd,
		engineUpdate,
		MqupdateStatus,
	} from '@/api/index.js'

	const formOr = {
		id: '',
		name:'',
		description:''
	}
	export default {
		data() {
			return {
				list: [],
				pageNum: 1,
				total: 0,
				dialogVisible: false,
				loading: false,
				dialogLoading: false,
				typeList: [{
					label: 'kafka',
					value: 'kafka'
				}],
				
				rules: {
					name: [{
						required: true,
						message: '请输入名称',
						trigger: 'blur'
					}, ],
					description: [{
						required: true,
						message: '请输入描述',
						trigger: 'blur'
					} ],
					
				},
				form: JSON.parse(JSON.stringify(formOr)),
				dialogCallBack: () => {}
			}
		},
		created() {
			this.getList()
		},
		methods: {
			deleteMq(id) {
				this.$confirm('确定删除？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'error'
				}).then(() => {
					MqupdateStatus({
						ids: id,
						status: -1
					}).then(res => {
						if (res.status == '1') {
							this.getList()
						}
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			close() {
				this.form = JSON.parse(JSON.stringify(formOr))
				this.dialogCallBack = () => {}
			},
			update(item) {
				
				this.form = {
					id: item.id,
					name: item.name,
					description: item.description,
				}
				this.dialogVisible = true

				this.dialogCallBack = () => {
					if (this.verify()) {
						return
					}
					this.dialogLoading = true
					engineUpdate(this.form).then(res => {
						if (res.status == '1') {
							this.dialogVisible = false
							this.getList()
						}
						this.dialogLoading = false
					})

				}


			},
			add() {
				this.dialogVisible = true
			
				this.dialogCallBack = () => {
					if (this.verify()) {
						return
					}
					delete this.form.id
					this.dialogLoading = true
					engineAdd(this.form).then(res => {
						if (res.status == '1') {
							this.dialogVisible = false
							this.getList()
						}
						this.dialogLoading = false
					})




				}
			},
			verify() {
				let is = {
					is: false,
					msg: ''
				}
				if (!this.form.name||this.form.name.trim() === '') {
					is.is = true
					is.msg = '请输入名称'
				}
				if (!this.form.description||this.form.description.trim() === '') {
					is.is = true
					is.msg = '请输入描述'
				}
			
				if (is.is) {
					this.$message.error(is.msg)
				}
				return is.is
			},
			getList() {
				this.loading = true
				engineGetList({
					pageNum: this.pageNum,
					pageSize: 10,
					entity:{
						engineType:'data_flow_engine'
					}
				}).then(res => {
					if (res.status == 1) {
						this.list = res.data.list
						this.total = res.data.total
					}
					this.loading = false
				})
			}
		}
	}
</script>

<style>
</style>



<!-- <template>
	<div>
		1
	</div>
</template>

<script>
	import {
		engineGetList
	} from '@/api/index.js'
	export default{
		created() {
			engineGetList({
				pageNum:1,
				pageSize:10,
				entity:{
					engineType:'data_flow_engine'
				}
			})
		}
	}
</script>

<style>
</style> -->