pblUserManage/src/components/desktopToolList.vue

<template>
	<div class="desktopToolList">
		<div class="title_examine">
			<div class="pub_title">工具列表</div>
			<div class="t_right">
				<el-button type="primary" size="small" @click="addTool()"
					>添加工具</el-button
				>
			</div>
		</div>

		<div class="table_content tableArea">
			<div class="button_top">
				<div @click="changeStatus('')">全部（{{ pageData.total }}）</div>
			</div>
			<el-table
				:data="desktopList"
				stripe
				border
				style="width: 100%"
				v-loading="loading"
				:header-cell-style="headerCellStyle"
			>
			<el-table-column label="标识" min-width="45" show-overflow-tooltip>
					<template slot-scope="scope">{{
						scope.row.toolId ? scope.row.toolId : "-"
					}}</template>
				</el-table-column>
				<el-table-column label="宽度" min-width="45" show-overflow-tooltip>
					<template slot-scope="scope">{{
						scope.row.dialogWidth ? scope.row.dialogWidth : "-"
					}}</template>
				</el-table-column>
				<el-table-column label="高度" min-width="45" show-overflow-tooltip>
					<template slot-scope="scope">{{
						scope.row.dialogHeight ? scope.row.dialogHeight : "-"
					}}</template>
				</el-table-column>

				<el-table-column label="描述" min-width="200" show-overflow-tooltip>
					<template slot-scope="scope">{{
						scope.row.description ? scope.row.description : "-"
					}}</template>
				</el-table-column>

				<el-table-column label="工具设置" min-width="45" show-overflow-tooltip>
					<template slot-scope="scope">
						<el-popover placement="bottom" width="840" trigger="hover">
							<div class="urlItemBox">
								<div
									class="urlItem"
									v-for="(item, index) in scope.row.url"
									:key="scope.row.id + '-' + index"
								>
									<span>{{ item.region }}</span>
									<div class="ui_message">
										<div>名称：{{ item.name ? item.name : "-" }}</div>
										<div>
											<span>链接：</span
											><a :href="item.url" v-if="item.url" target="_blank">{{
												item.url
											}}</a
											><span v-else>-</span>
										</div>
										<div>
											<span>桌面图标：</span>
											<div class="ui_m_image">
												<el-image
													v-if="item.icon"
													style="width: 100%; height: 100%"
													:src="item.icon"
													fit="cover"
												></el-image>
												<span v-else>-</span>
											</div>
										</div>
										<div>
											<span>平台图标：</span>
											<div class="ui_m_image">
												<el-image
													v-if="item.platformIcon"
													style="width: 100%; height: 100%"
													:src="item.platformIcon"
													fit="cover"
												></el-image>
												<span v-else>-</span>
											</div>
										</div>
										<div>
											<span>默认图标：</span>
											<div class="ui_m_image">
												<el-image
													v-if="item.defaultIcon"
													style="width: 100%; height: 100%"
													:src="item.defaultIcon"
													fit="cover"
												></el-image>
												<span v-else>-</span>
											</div>
										</div>
										<div>
											<span>激活图标：</span>
											<div class="ui_m_image">
												<el-image
													v-if="item.activeIcon"
													style="width: 100%; height: 100%"
													:src="item.activeIcon"
													fit="cover"
												></el-image>
												<span v-else>-</span>
											</div>
										</div>
									</div>
								</div>
							</div>
							<el-button slot="reference">查看设置</el-button>
						</el-popover>
					</template>
				</el-table-column>
				<el-table-column label="参数" min-width="150" show-overflow-tooltip>
					<template slot-scope="scope">
						<div v-if="scope.row.argumentList.length">
							<el-tag
								v-for="(item, index) in scope.row.argumentList"
								:key="index"
								style="margin-right: 10px"
								effect="plain"
								>{{ item }}</el-tag
							>
						</div>
						<span v-else>-</span>
					</template>
				</el-table-column>

				<el-table-column
					label="仅管理员显示"
					min-width="45"
					show-overflow-tooltip
				>
					<template slot-scope="scope">{{
						scope.row.isAdmin == "1" ? "是" : "否"
					}}</template>
				</el-table-column>

				<el-table-column label="工具状态" min-width="50" show-overflow-tooltip>
					<template slot-scope="scope">{{
						statusList[scope.row.status]
					}}</template>
				</el-table-column>

				<el-table-column label="操作" width="200px" show-overflow-tooltip>
					<template slot-scope="scope">
						<button
							@click="editTool(scope.row)"
							style="
								color: #308fff;
								background: none;
								border: none;
								cursor: pointer;
								margin-left: 25px;
							"
						>
							修改
						</button>

						<button
							v-if="scope.row.status == '0'"
							@click="changeToolStatus(scope.row, '1')"
							style="
								color: #ff2570;
								background: none;
								border: none;
								cursor: pointer;
								margin-left: 25px;
							"
						>
							停用
						</button>

						<button
							v-if="scope.row.status == '1'"
							@click="changeToolStatus(scope.row, '0')"
							style="
								color: #67C23A;
								background: none;
								border: none;
								cursor: pointer;
								margin-left: 25px;
							"
						>
							启用
						</button>
					</template>
				</el-table-column>
			</el-table>

			<el-pagination
				style="margin-top: 10px"
				:current-page="pageData.nowPage"
				:page-size="pageData.lim"
				:total="pageData.total"
				@current-change="handlePageChange"
				layout="total,prev, pager, next, jumper"
			>
			</el-pagination>
		</div>
		<addDesktopToolDialog
			ref="addDesktopToolDialogRef"
			@success="addDesktopToolSuccess"
		/>
	</div>
</template>

<script>
import { API_CONFIG } from "@/common/apiConfig";
import addDesktopToolDialog from "./dialog/addDesktopToolDialog.vue";
export default {
	components: {
		addDesktopToolDialog,
	},
	data() {
		return {
			desktopList: [],
			selectStatus: "",
			pageData: {
				nowPage: 1,
				lim: 10,
				total: 0,
			},
			loading: false,
			statusList: ["正常使用", "已停用", "已删除"],
		};
	},
	methods: {
		// 表头的背景色
		headerCellStyle() {
			return { backgroundColor: "#f1f1f1" };
		},
		//获取数据
		getData() {
			let params = [
				{
					functionName: "select_desktopToolByPage",
					status: this.selectStatus,
					page: this.pageData.nowPage,
					lim: this.pageData.lim,
				},
			];
			this.loading = true;
			this.$ajax
				.post(API_CONFIG.baseUrl, params)
				.then((res) => {
					let _data = res.data;
					let _list = _data[0];
					let _total = _data[1][0].total;
					_list.forEach((i) => {
						i.url = JSON.parse(i.url);
						i.json = JSON.parse(i.json);
						i.argumentList = JSON.parse(i.argumentList);
					});
					this.desktopList = _list;
					this.pageData.total = _total;
					this.loading = false;
					// console.log(_data)
				})
				.catch((err) => {
					console.log(err);
					this.loading = false;
					this.$message.error("获取工具数据失败");
				});
		},
		handlePageChange(newPage) {
			this.pageData.nowPage = newPage;
			this.getData();
		},
		addTool() {
			this.$refs.addDesktopToolDialogRef.open();
		},
		addDesktopToolSuccess(form) {
			if (form.id) {
				let params = [
					{
						functionName: "update_desktopToolById",
						id: form.id,
						toolId:form.toolId,
						width: form.dialogWidth,
						height: form.dialogHeight,
						description: form.description,
						admin: form.isAdmin,
						argumentList: JSON.stringify(form.argumentList),
						url: JSON.stringify(form.url),
						json: JSON.stringify(form.json),
						status: form.status,
					},
				];
				this.$refs.addDesktopToolDialogRef.loading = true;
				this.$ajax
					.post(API_CONFIG.baseUrl, params)
					.then((res) => {
						if (res.data == 1) {
							this.$refs.addDesktopToolDialogRef.close();
							this.$message.success("修改工具成功");
						} else if(res.data[0][0].message == "repeat toolId"){
							this.$message.error("工具标识重复！")
						} else {
							this.$message.error("修改工具失败");
						}
						this.$refs.addDesktopToolDialogRef.loading = false;
						this.getData();
					})
					.catch((err) => {
						console.log(err);
						this.$message.error("修改工具失败");
						this.$refs.addDesktopToolDialogRef.loading = false;
					});
			} else {
				let params = [
					{
						functionName: "insert_desktopTool",
						toolId:form.toolId,
						width: form.dialogWidth,
						height: form.dialogHeight,
						description: form.description,
						admin: form.isAdmin,
						argumentList: JSON.stringify(form.argumentList),
						url: JSON.stringify(form.url),
						json: JSON.stringify(form.json),
					},
				];
				this.$refs.addDesktopToolDialogRef.loading = true;
				this.$ajax
					.post(API_CONFIG.baseUrl, params)
					.then((res) => {
						console.log(res)
						if (res.data == 1) {
							this.$refs.addDesktopToolDialogRef.close();
							this.$message.success("添加工具成功");
						} else if(res.data[0][0].message == "repeat toolId"){
							this.$message.error("工具标识重复！")
						}else{
							this.$message.error("添加工具失败");
						}
						this.$refs.addDesktopToolDialogRef.loading = false;
						this.getData();
					})
					.catch((err) => {
						console.log(err);
						this.$message.error("添加工具失败");
						this.$refs.addDesktopToolDialogRef.loading = false;
					});
			}
		},
		editTool(item) {
			this.$refs.addDesktopToolDialogRef.open(item);
		},
		changeStatus() {
			this.pageData.nowPage = 1;
			this.getData();
		},
		changeToolStatus(item, newValue) {
			let _data = JSON.parse(JSON.stringify(item));
			_data.status = newValue;
			this.loading = true;
			let params = [
				{
					functionName: "update_desktopToolById",
					id: _data.id,
					toolId:_data.toolId,
					width: _data.dialogWidth,
					height: _data.dialogHeight,
					description: _data.description,
					admin: _data.isAdmin,
					argumentList: JSON.stringify(_data.argumentList),
					url: JSON.stringify(_data.url),
					json: JSON.stringify(_data.json),
					status: _data.status,
				},
			];
			this.$ajax
				.post(API_CONFIG.baseUrl, params)
				.then((res) => {
					if (res.data == 1) {
						this.$message.success("已停用");
					} else {
						this.$message.error("停用失败");
					}
					this.loading = false;
					this.getData();
				})
				.catch((err) => {
					console.log(err);
					this.loading = false;
					this.$message.error("停用失败");
				});
		},
	},
	mounted() {
		this.getData();
	},
};
</script>

<style scoped>
.desktopToolList {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding: 10px;
	overflow: auto;
}

.tableArea {
	margin: 10px 0;
}

.button_top {
	width: 100%;
	display: flex;
	align-items: center;
	margin: 10px 0;
}

.button_top > div {
	font-weight: bold;
	margin-right: 20px;
	cursor: pointer;
}

.title_examine {
	display: flex;
	justify-content: space-between;
}

.urlItemBox {
	display: flex;
	flex-wrap: wrap;
}

.urlItem {
	width: 400px;
	height: 250px;
	overflow: auto;
	position: relative;
	box-sizing: border-box;
	border-bottom: solid 1px #ebeef5;
}

/* .urlItem::after{
	content: "";
	height: 2px;
	width: 100%;
	background-color: #ebeef5;
	position: absolute;
	bottom: 10px;
} */

.urlItem:nth-child(2n) {
	margin-left: 20px;
}

.urlItem > span {
	font-size: 18px;
	font-weight: bold;
}

.ui_m_image {
	width: 40px;
	height: 40px;
	float: left;
	display: flex;
	align-items: center;
}

.ui_message > div {
	display: flex;
	align-items: center;
}

.ui_message > div > span {
	white-space: nowrap;
}
</style>