iailab-plat-ui-vue2.git

houzhongjian

2024-07-11 759b1c71011abd6b58c37d2566f3f3c208c2f1b2

提交 \| 用户 \| 时间
759b1c	1	<template>
H	2	<div class="app-container">
	3	<!-- 搜索工作栏 -->
	4	<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
	5	<el-form-item label="组名" prop="name">
	6	<el-input v-model="queryParams.name" placeholder="请输入组名" clearable @keyup.enter.native="handleQuery"/>
	7	</el-form-item>
	8	<el-form-item label="状态" prop="status">
	9	<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
	10	<el-option v-for="dict in this.getDictDatas(DICT_TYPE.COMMON_STATUS)"
	11	:key="dict.value" :label="dict.label" :value="dict.value"/>
	12	</el-select>
	13	</el-form-item>
	14	<el-form-item label="创建时间" prop="createTime">
	15	<el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
	16	range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
	17	</el-form-item>
	18	<el-form-item>
	19	<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
	20	<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
	21	</el-form-item>
	22	</el-form>
	23
	24	<!-- 操作工具栏 -->
	25	<el-row :gutter="10" class="mb8">
	26	<el-col :span="1.5">
	27	<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
	28	v-hasPermi="['bpm:user-group:create']">新增</el-button>
	29	</el-col>
	30	<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
	31	</el-row>
	32
	33	<!-- 列表 -->
	34	<el-table v-loading="loading" :data="list">
	35	<el-table-column label="编号" align="center" prop="id" />
	36	<el-table-column label="组名" align="center" prop="name" />
	37	<el-table-column label="描述" align="center" prop="description" />
	38	<el-table-column label="成员" align="center">
	39	<template v-slot="scope">
	40	<span v-for="userId in scope.row.memberUserIds">
	41	{{ getUserNickname(userId) }}
	42	</span>
	43	</template>
	44	</el-table-column>
	45	<el-table-column label="状态" align="center" prop="status">
	46	<template v-slot="scope">
	47	<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
	48	</template>
	49	</el-table-column>
	50	<el-table-column label="创建时间" align="center" prop="createTime" width="180">
	51	<template v-slot="scope">
	52	<span>{{ parseTime(scope.row.createTime) }}</span>
	53	</template>
	54	</el-table-column>
	55	<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
	56	<template v-slot="scope">
	57	<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
	58	v-hasPermi="['bpm:user-group:update']">修改</el-button>
	59	<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
	60	v-hasPermi="['bpm:user-group:delete']">删除</el-button>
	61	</template>
	62	</el-table-column>
	63	</el-table>
	64	<!-- 分页组件 -->
	65	<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
	66	@pagination="getList"/>
	67
	68	<!-- 对话框(添加 / 修改) -->
	69	<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
	70	<el-form ref="form" :model="form" :rules="rules" label-width="80px">
	71	<el-form-item label="组名" prop="name">
	72	<el-input v-model="form.name" placeholder="请输入组名" />
	73	</el-form-item>
	74	<el-form-item label="描述" prop="description">
	75	<el-input v-model="form.description" placeholder="请输入描述" />
	76	</el-form-item>
	77	<el-form-item label="成员" prop="memberUserIds">
	78	<el-select v-model="form.memberUserIds" multiple placeholder="请选择成员">
	79	<el-option v-for="user in users" :key="parseInt(user.id)" :label="user.nickname" :value="parseInt(user.id)"/>
	80	</el-select>
	81	</el-form-item>
	82	<el-form-item label="状态" prop="status">
	83	<el-radio-group v-model="form.status">
	84	<el-radio v-for="dict in this.getDictDatas(DICT_TYPE.COMMON_STATUS)"
	85	:key="dict.value" :label="parseInt(dict.value)">{{dict.label}}</el-radio>
	86	</el-radio-group>
	87	</el-form-item>
	88	</el-form>
	89	<div slot="footer" class="dialog-footer">
	90	<el-button type="primary" @click="submitForm">确定</el-button>
	91	<el-button @click="cancel">取消</el-button>
	92	</div>
	93	</el-dialog>
	94	</div>
	95	</template>
	96
	97	<script>
	98	import { createUserGroup, updateUserGroup, deleteUserGroup, getUserGroup, getUserGroupPage } from "@/api/bpm/userGroup";
	99	import {CommonStatusEnum} from "@/utils/constants";
	100	import {listSimpleUsers} from "@/api/system/user";
	101
	102	export default {
	103	name: "BpmUserGroup",
	104	components: {
	105	},
	106	data() {
	107	return {
	108	// 遮罩层
	109	loading: true,
	110	// 显示搜索条件
	111	showSearch: true,
	112	// 总条数
	113	total: 0,
	114	// 用户组列表
	115	list: [],
	116	// 用户列表
	117	users: [],
	118	// 弹出层标题
	119	title: "",
	120	// 是否显示弹出层
	121	open: false,
	122	// 查询参数
	123	queryParams: {
	124	pageNo: 1,
	125	pageSize: 10,
	126	name: null,
	127	status: null,
	128	createTime: []
	129	},
	130	// 表单参数
	131	form: {},
	132	// 表单校验
	133	rules: {
	134	name: [{ required: true, message: "组名不能为空", trigger: "blur" }],
	135	description: [{ required: true, message: "描述不能为空", trigger: "blur" }],
	136	memberUserIds: [{ required: true, message: "成员不能为空", trigger: "change" }],
	137	status: [{ required: true, message: "状态不能为空", trigger: "blur" }],
	138	}
	139	};
	140	},
	141	created() {
	142	this.getList();
	143	// 获得用户列表
	144	listSimpleUsers().then(response => {
	145	this.users = response.data;
	146	})
	147	},
	148	methods: {
	149	/** 查询列表 */
	150	getList() {
	151	this.loading = true;
	152	// 执行查询
	153	getUserGroupPage(this.queryParams).then(response => {
	154	this.list = response.data.list;
	155	this.total = response.data.total;
	156	this.loading = false;
	157	});
	158	},
	159	/** 取消按钮 */
	160	cancel() {
	161	this.open = false;
	162	this.reset();
	163	},
	164	/** 表单重置 */
	165	reset() {
	166	this.form = {
	167	id: undefined,
	168	name: undefined,
	169	description: undefined,
	170	memberUserIds: [],
	171	status: CommonStatusEnum.ENABLE,
	172	};
	173	this.resetForm("form");
	174	},
	175	/** 搜索按钮操作 */
	176	handleQuery() {
	177	this.queryParams.pageNo = 1;
	178	this.getList();
	179	},
	180	/** 重置按钮操作 */
	181	resetQuery() {
	182	this.resetForm("queryForm");
	183	this.handleQuery();
	184	},
	185	/** 新增按钮操作 */
	186	handleAdd() {
	187	this.reset();
	188	this.open = true;
	189	this.title = "添加用户组";
	190	},
	191	/** 修改按钮操作 */
	192	handleUpdate(row) {
	193	this.reset();
	194	const id = row.id;
	195	getUserGroup(id).then(response => {
	196	this.form = response.data;
	197	this.open = true;
	198	this.title = "修改用户组";
	199	});
	200	},
	201	/** 提交按钮 */
	202	submitForm() {
	203	this.$refs["form"].validate(valid => {
	204	if (!valid) {
	205	return;
	206	}
	207	// 修改的提交
	208	if (this.form.id != null) {
	209	updateUserGroup(this.form).then(response => {
	210	this.$modal.msgSuccess("修改成功");
	211	this.open = false;
	212	this.getList();
	213	});
	214	return;
	215	}
	216	// 添加的提交
	217	createUserGroup(this.form).then(response => {
	218	this.$modal.msgSuccess("新增成功");
	219	this.open = false;
	220	this.getList();
	221	});
	222	});
	223	},
	224	/** 删除按钮操作 */
	225	handleDelete(row) {
	226	const id = row.id;
	227	this.$modal.confirm('是否确认删除用户组编号为"' + id + '"的数据项?').then(function() {
	228	return deleteUserGroup(id);
	229	}).then(() => {
	230	this.getList();
	231	this.$modal.msgSuccess("删除成功");
	232	}).catch(() => {});
	233	},
	234	getUserNickname(userId) {
	235	for (const user of this.users) {
	236	if (user.id === userId) {
	237	return user.nickname;
	238	}
	239	}
	240	return '未知(' + userId + ')';
	241	},
	242	}
	243	};
	244	</script>