admin-ui/src/views/iot/noticeservices/config/setting.vue

<template>
	<el-card shadow="never" class="page">
		<div class="system-user-search">
			<el-form :model="tableData.param" ref="queryRef" inline @keyup.enter.native="dataList">
				<el-form-item label="配置名称" prop="keyWord">
					<el-input v-model="tableData.param.keyWord" placeholder="请输入配置名称" clearable style="width: 240px" />
				</el-form-item>
				<el-form-item>
					<el-button type="primary" class="ml10" @click="dataList">
						<el-icon>
							<ele-Search />
						</el-icon>
						查询
					</el-button>
					<el-button @click="resetQuery(queryRef)">
						<el-icon>
							<ele-Refresh />
						</el-icon>
						重置
					</el-button>
					<el-button type="primary" class="ml10" @click="onOpenAdd">
						<el-icon>
							<ele-FolderAdd />
						</el-icon>
						新增通知
					</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div class="flex1">
			<el-row>
				<el-col :span="8" v-for="(item, index) in tableData.data" :key="index">
					<div class="grid-content card">
						<div class="ant-card">
							<div class="ant-card-body">
								<div class="pro-table-card-item">
									<div class="card-item-avatar">
										<img width="88" height="88" :src="'/imgs/notice/' + tableData.param.sendGateway + '.svg'" alt="" />
									</div>
									<div class="card-item-body">
										<div class="card-item-header" style="width: 100%;">
											<div class="ellipsis">
												<div class="ellipsis card-item-header-name" style="width: 100%; height: 45px">{{ item.title }}</div>
												<div class="card-item-header-name" style="display: none"></div>
											</div>
										</div>
										<div class="card-item-content">
											通知方式：<el-tag>{{ item.types == 1 ? '即时发送' : '预约发送' }}</el-tag>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="card-tools">
							<div class="card-button" @click="onOpenEdit(item)">
								<el-button type="primary" class="ml10" text bg>
									<el-icon>
										<ele-Edit />
									</el-icon>
									修改
								</el-button>
							</div>
							<div class="card-button" @click="onOpenEditTem(item)">
								<el-button type="primary" text bg>
									<el-icon>
										<ele-Wallet />
									</el-icon>
									模板配置
								</el-button>
							</div>

							<div class="card-button" @click="onRowDel(item)">
								<el-button type="danger" text bg>
									<el-icon>
										<ele-Delete />
									</el-icon>
									删除
								</el-button>
							</div>
						</div>
					</div>
				</el-col>
			</el-row>
		</div>
		<div style="text-align: center;padding: 28px;" v-if="(tableData.total == 0)">暂无数据</div>
		<pagination v-show="tableData.total > 0" :total="tableData.total" v-model:page="tableData.param.pageNum" v-model:limit="tableData.param.pageSize" @pagination="dataList" />
		<EditDic ref="editDicRef" @dataList="dataList" />
		<EditTemDic ref="temeditDicRef" @dataList="dataList" />
	</el-card>
</template>

<script lang="ts">
import { toRefs, reactive, onMounted, ref, getCurrentInstance, defineComponent } from 'vue';
import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
import EditDic from './component/setEdit.vue';
import EditTemDic from './component/temEdit.vue';

import api from '/@/api/notice';
import { useRoute } from 'vue-router';

// 定义接口来定义对象的类型
interface TableDataRow {
	id: number;
	keyWord: string;
	sendGateway: string;
	type: string;
}
interface TableDataState {
	ids: number[];
	tableData: {
		data: Array<TableDataRow>;
		total: number;
		loading: boolean;
		param: {
			pageNum: number;
			pageSize: number;
			keyWord: string;
			sendGateway: string;
			types: string;
		};
	};
}

export default defineComponent({
	name: 'setlist',
	components: { EditDic, EditTemDic },

	setup() {

		const { proxy } = getCurrentInstance() as any;
		// const { notice_send_gateway } = proxy.useDict('notice_send_gateway');
		const addDicRef = ref();
		const editDicRef = ref();
		const temeditDicRef = ref();
		const detailRef = ref();
		const queryRef = ref();
		const route = useRoute();

		const state = reactive<TableDataState>({
			type: '',
			tableData: {
				data: [],
				total: 0,
				loading: false,
				param: {
					pageNum: 1,
					pageSize: 20,
					keyWord: '',
					sendGateway: '',
					types: '',
				},
			},
		});
		// 初始化表格数据
		const initTableData = () => {
			state.tableData.param.sendGateway = route.params.id;
			dataList();
		};
		const dataList = () => {
			state.tableData.loading = true;
			api.config
				.getList(state.tableData.param)
				.then((res: any) => {
					state.tableData.data = res.Data;
					state.tableData.total = res.Total;
				})
				.finally(() => (state.tableData.loading = false));
		};
		// 打开新增菜单弹窗
		const onOpenAdd = (row?: TableDataRow) => {
			editDicRef.value.openDialog(null, state.tableData.param.sendGateway);
		};

		// 打开修改模型弹窗
		const onOpenEdit = (row: TableDataRow) => {
			editDicRef.value.openDialog({ ...row }, state.tableData.param.sendGateway);
		};

		const onOpenEditTem = (row: TableDataRow) => {
			temeditDicRef.value.opentemDialog(row.id, state.tableData.param.sendGateway);
		};

		const onRowDel = (row?: TableDataRow) => {
			let msg = '你确定要删除所选数据？';
			let ids: number[] = [];
			if (row) {
				msg = `此操作将永久删除：“${row.title}”，是否继续?`;
				ids = row.id;
			} else {
				ids = state.ids;
			}
			if (ids.length === 0) {
				ElMessage.error('请选择要删除的数据。');
				return;
			}
			ElMessageBox.confirm(msg, '提示', {
				confirmButtonText: '确认',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {
					api.config.delete(ids).then(() => {
						ElMessage.success('删除成功');
						dataList();
					});
				})
				.catch(() => { });
		};

		// 页面加载时
		onMounted(() => {
			initTableData();
		});
		/** 重置按钮操作 */
		const resetQuery = (formEl: FormInstance | undefined) => {
			if (!formEl) return;
			formEl.resetFields();
			dataList();
		};
		const onActionStatus = (item: TableDataRow[]) => {
			if (item.status == 0) {
				alarm.common.deploy({ id: item.id }).then((res: any) => {
					dataList();
				});
			} else {
				alarm.common.undeploy({ id: item.id }).then((res: any) => {
					dataList();
				});
			}
		};

		return {
			onActionStatus,
			onOpenEditTem,
			temeditDicRef,
			addDicRef,
			editDicRef,
			detailRef,
			queryRef,
			onOpenAdd,
			onOpenEdit,
			onRowDel,
			dataList,
			resetQuery,
			...toRefs(state),
		};
	},
});
</script>
<style scoped>
.el-col-12 {
	padding: 10px;
}

.el-button.is-text:not(.is-disabled).is-has-bg {
	background-color: var(--next-border-color-light);
}

.card {
	padding: 10px;
}

.ant-card {
	box-sizing: border-box;
	margin: 10px;
	width: 98%;
	font-size: 14px;
	font-variant: tabular-nums;
	border: 1px solid var(--next-border-color-light);

	line-height: 1.5;
	list-style: none;
	font-feature-settings: 'tnum';
	position: relative;
	border-radius: 2px;
	transition: all 0.3s;
	overflow: hidden;
}

.ant-card-body {
	padding: 24px;
	zoom: 1;
	overflow: hidden;
}

.pro-table-card-item {
	display: flex;
}

.pro-table-card-item .card-item-avatar {
	margin-right: 16px;
}

.pro-table-card-item .card-item-body {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	width: 0;
}

.pro-table-card-item .card-item-body .card-item-header {
	display: flex;
	width: calc(100% - 86px);
	margin-bottom: 12px;
}

.pro-table-card-item .card-item-body .card-item-content {
	display: flex;
	flex-wrap: wrap;
}

.pro-table-card-item .card-item-body .card-item-content>div {
	width: 50%;
}

.ellipsis {
	display: -webkit-box;
	overflow: hidden;
	text-align: left;
	text-overflow: ellipsis;
	word-break: break-all;
}

.card-item-body .card-item-header .card-item-header-name {
	font-weight: 700;
	font-size: 16px;
}

.card-state {
	position: absolute;
	top: 30px;
	right: -12px;
	display: flex;
	justify-content: center;
	width: 100px;
	padding: 2px 0;
	background-color: rgba(89, 149, 245, 0.15);
	transform: skewX(45deg);
}

.card-state.success {
	background-color: #f6ffed;
}

.iot-card .card-warp .card-content .card-state.error {
	background-color: rgba(229, 0, 18, 0.1);
}

.card-state .card-state-content {
	transform: skewX(-45deg);
}

.ant-badge-status-success {
	background-color: #52c41a;
}

.ant-badge-status-error {
	background-color: #ff4d4f;
}

.ant-badge-status-dot {
	position: relative;
	top: -1px;
	display: inline-block;
	width: 6px;
	height: 6px;
	vertical-align: middle;
	border-radius: 50%;
}

.card-tools {
	display: flex;
	margin-top: 2px;
}

.card-tools .card-button:not(:last-child) {
	margin-right: 8px;
}

.card-tools .card-button {
	display: flex;
	flex-grow: 1;
}

.card-tools .card-button>span,
.card-tools .card-button button {
	width: 100%;
	border-radius: 0;
}

.ant-btn-link {
	border-color: transparent;
	background: transparent;
	box-shadow: none;
}

.ant-badge-status-text {
	margin-left: 8px;
	color: rgba(0, 0, 0, 0.85);
	font-size: 14px;
}

.ant-btn {
	line-height: 1.5715;
	position: relative;
	display: inline-block;
	font-weight: 400;
	white-space: nowrap;
	text-align: center;
	background-image: none;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	touch-action: manipulation;
	height: 32px;
	padding: 4px 15px;
	font-size: 14px;
	border-radius: 2px;

}

.ant-btn>.anticon {
	line-height: 1;
}

.ant-btn>span {
	display: inline-block;
}

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

.statusname {
	font-size: 30px;
	margin-top: 10px;
	margin-bottom: 15px;
}

.comtest {
	margin-top: 20px;
	height: 30px;
	line-height: 30px;
}
</style>