iailab-plat-ui-vue2.git

houzhongjian

2024-07-11 759b1c71011abd6b58c37d2566f3f3c208c2f1b2

提交 \| 用户 \| 时间
759b1c	1	<template>
H	2	<div class="app-container">
	3	<!-- 搜索工作栏 -->
	4	<el-form
	5	class="-mb-15px"
	6	:model="queryParams"
	7	ref="queryform"
	8	:inline="true"
	9	label-width="68px"
	10	>
	11	<el-form-item label="分类名" prop="name">
	12	<el-input
	13	v-model="queryParams.name"
	14	placeholder="请输入分类名"
	15	clearable
	16	@keyup.enter="handleQuery"
	17	class="!w-240px"
	18	/>
	19	</el-form-item>
	20	<el-form-item label="分类标志" prop="code">
	21	<el-input
	22	v-model="queryParams.code"
	23	placeholder="请输入分类标志"
	24	clearable
	25	@keyup.enter="handleQuery"
	26	class="!w-240px"
	27	/>
	28	</el-form-item>
	29	<el-form-item label="分类状态" prop="status">
	30	<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
	31	<el-option v-for="dict in this.getDictDatas(DICT_TYPE.COMMON_STATUS)"
	32	:key="dict.value" :label="dict.label" :value="dict.value"/>
	33	</el-select>
	34	</el-form-item>
	35	<el-form-item label="创建时间" prop="createTime">
	36	<el-date-picker
	37	v-model="queryParams.createTime"
	38	value-format="YYYY-MM-DD HH:mm:ss"
	39	type="daterange"
	40	start-placeholder="开始日期"
	41	end-placeholder="结束日期"
	42	:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
	43	class="!w-240px"
	44	/>
	45	</el-form-item>
	46	<el-form-item>
	47	<el-button @click="handleQuery" icon="el-icon-search"> 搜索</el-button>
	48	<el-button @click="resetQuery" icon="el-icon-refresh"> 重置</el-button>
	49	<el-button
	50	type="primary"
	51	icon="el-icon-plus"
	52	plain
	53	@click="openForm()"
	54	v-hasPermi="['bpm:category:create']"
	55	>新增
	56	</el-button>
	57	</el-form-item>
	58	</el-form>
	59
	60	<!-- 列表 -->
	61	<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
	62	<el-table-column label="分类编号" align="center" prop="id" />
	63	<el-table-column label="分类名" align="center" prop="name" />
	64	<el-table-column label="分类标志" align="center" prop="code" />
	65	<!-- <el-table-column label="分类描述" align="center" prop="description" />-->
	66	<el-table-column label="分类状态" align="center" prop="status">
	67	<template v-slot="scope">
	68	<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
	69	</template>
	70	</el-table-column>
	71	<el-table-column label="分类排序" align="center" prop="sort" />
	72	<el-table-column
	73	label="创建时间"
	74	align="center"
	75	prop="createTime"
	76	width="180px"
	77	/>
	78	<el-table-column label="操作" align="center">
	79	<template #default="scope">
	80	<el-button
	81	link
	82	type="primary"
	83	@click="openForm(scope.row.id)"
	84	v-hasPermi="['bpm:category:update']"
	85	>
	86	编辑
	87	</el-button>
	88	<el-button
	89	link
	90	type="danger"
	91	@click="handleDelete(scope.row.id)"
	92	v-hasPermi="['bpm:category:delete']"
	93	>
	94	删除
	95	</el-button>
	96	</template>
	97	</el-table-column>
	98	</el-table>
	99	<!-- 分页 -->
	100	<pagination
	101	:total="total"
	102	v-model:page="queryParams.pageNo"
	103	v-model:limit="queryParams.pageSize"
	104	@pagination="getList"
	105	/>
	106
	107	<!-- 表单弹窗：添加/修改 -->
	108	<el-dialog :title="title" :visible.sync="open">
	109	<el-form
	110	ref="form"
	111	:model="form"
	112	:rules="formRules"
	113	label-width="100px"
	114	v-loading="formLoading"
	115	>
	116	<el-form-item label="分类名" prop="name">
	117	<el-input v-model="form.name" placeholder="请输入分类名" />
	118	</el-form-item>
	119	<el-form-item label="分类标志" prop="code">
	120	<el-input v-model="form.code" placeholder="请输入分类标志" />
	121	</el-form-item>
	122	<el-form-item label="分类状态" prop="status">
	123	<el-radio-group v-model="form.status">
	124	<el-radio v-for="dict in this.getDictDatas(DICT_TYPE.COMMON_STATUS)"
	125	:key="dict.value" :label="parseInt(dict.value)">{{dict.label}}</el-radio>
	126	</el-radio-group>
	127	</el-form-item>
	128	<el-form-item label="分类排序" prop="sort">
	129	<el-input-number
	130	v-model="form.sort"
	131	placeholder="请输入分类排序"
	132	class="!w-1/1"
	133	:precision="0"
	134	/>
	135	</el-form-item>
	136	</el-form>
	137	<template #footer>
	138	<el-button @click="submitForm" type="primary" :disabled="formLoading">确定</el-button>
	139	<el-button @click="open = false">取消</el-button>
	140	</template>
	141	</el-dialog>`
	142	</div>
	143	</template>
	144
	145	<script>
	146	import {DICT_TYPE, getDictDatas} from "@/utils/dict";
	147	import {
	148	createCategory,
	149	deleteCategory,
	150	getCategory,
	151	getCategoryPage,
	152	updateCategory
	153	} from '@/api/bpm/category'
	154
	155
	156	export default {
	157	name: "BpmCategory",
	158	computed: {
	159	DICT_TYPE() {
	160	return DICT_TYPE
	161	}
	162	},
	163
	164	data() {
	165	return {
	166	// 遮罩层
	167	loading: true,
	168	// 总条数
	169	total: 0,
	170	// 表格数据
	171	list: [],
	172	open: false, // 弹窗的是否展示
	173	title: '', // 弹窗的标题
	174	formLoading: false, // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
	175	// 查询参数
	176	queryParams: {
	177	pageNo: 1,
	178	pageSize: 10,
	179	name: undefined,
	180	code: undefined,
	181	status: undefined,
	182	createTime: []
	183	},
	184	form: {
	185	id: undefined,
	186	name: undefined,
	187	code: undefined,
	188	status: undefined,
	189	sort: undefined
	190	},
	191	formRules: {
	192	name: [{ required: true, message: '分类名不能为空', trigger: 'blur' }],
	193	code: [{ required: true, message: '分类标志不能为空', trigger: 'blur' }],
	194	status: [{ required: true, message: '分类状态不能为空', trigger: 'blur' }],
	195	sort: [{ required: true, message: '分类排序不能为空', trigger: 'blur' }]
	196	},
	197	// 数据字典
	198	categoryDictDatas: getDictDatas(DICT_TYPE.BPM_MODEL_CATEGORY),
	199	};
	200	},
	201	created() {
	202	const key = this.$route.query && this.$route.query.key
	203	if (key) {
	204	this.queryParams['key'] = key
	205	}
	206	this.getList();
	207	},
	208	methods: {
	209	/** 搜索按钮操作 */
	210	handleQuery() {
	211	this.queryParams.pageNo = 1;
	212	this.getList();
	213	},
	214	/** 重置按钮操作 */
	215	resetQuery() {
	216	this.resetForm("queryForm");
	217	this.handleQuery();
	218	},
	219	/** 查询流程分类列表 */
	220	getList() {
	221	this.loading = true;
	222	getCategoryPage(this.queryParams).then(response => {
	223	this.list = response.data.list;
	224	this.total = response.data.total;
	225	this.loading = false;
	226	}
	227	);
	228	},
	229	openForm(id) {
	230	console.log(id)
	231	this.reset();
	232	if(id) {
	233	getCategory(id).then(response => {
	234	this.form = response.data;
	235	this.open = true;
	236	this.title = "编辑";
	237	});
	238	} else {
	239	// 打开表单，并设置初始化
	240	this.open = true;
	241	this.title = "新增";
	242	}
	243	},
	244	/** 提交按钮 */
	245	submitForm() {
	246	this.$refs["form"].validate(valid => {
	247	if (!valid) {
	248	return;
	249	}
	250	// 修改的提交
	251	if (this.form.id != null) {
	252	updateCategory(this.form).then(response => {
	253	this.$modal.msgSuccess("修改成功");
	254	this.open = false;
	255	this.getList();
	256	});
	257	return;
	258	}
	259	// 添加的提交
	260	createCategory(this.form).then(response => {
	261	this.$modal.msgSuccess("新增成功");
	262	this.open = false;
	263	this.getList();
	264	});
	265	});
	266	},
	267	/** 删除按钮操作 */
	268	handleDelete(row) {
	269	const ids = row.id \|\| this.ids;
	270	this.$modal.confirm('是否确认删除编号为"' + ids + '"的数据项?').then(function() {
	271	return deleteCategory(ids);
	272	}).then(() => {
	273	this.getList();
	274	this.$modal.msgSuccess("删除成功");
	275	}).catch(() => {});
	276	},
	277	reset() {
	278	this.form = {
	279	id: undefined,
	280	name: undefined,
	281	code: undefined,
	282	status: undefined,
	283	sort: undefined
	284	},
	285	this.resetForm("form");
	286	},
	287	}
	288	};
	289	</script>