admin-ui/src/views/iot/scene/manage/detail.vue

<template>
	<el-card class="system-dic-container" style="position: relative;">
		<div class="content">
			<div class="flex cont_box">
				<div class="font26">场景名称：{{ detail.name }}</div>
				<div class="pro-status"><span :class="detail.status == 1 ? 'on' : 'off'"></span>{{ detail.status == 1
					? '启用' : '未启用' }}</div>
			</div>
			<div class="flex">
				<div class="desc">场景描述：{{ detail.description }}</div>
				<div class="edit" @click="addOrEdit(detail)"><el-link type="primary"> <el-icon>
							<EditPen color="#409eff" />
						</el-icon>修改</el-link></div>
			</div>
		</div>
	</el-card>
	<el-card style="  margin-top: 15px;">
		<div class="font20">场景定义</div>
		<SceneItem v-if="showstatus && sourceData.length>0" :sceneList="sceneList" :sourceData="sourceData" :sceneType="detail.sceneType" @addScenesDetail="addScenesDetail"
			@delScenesDetail="delScenesDetail" @editScenesDetail="editScenesDetail"></SceneItem>
	</el-card>
	<el-card style="  margin-top: 15px;">
		<div class="font20">场景动作</div>
		<ActionItem :actionList="actionList"  :sourceData="sourceData"></ActionItem>
	</el-card>

	<EditForm ref="editFormRef" @getList="getDetail()"></EditForm>
</template>
<script lang="ts">
import { toRefs, reactive, ref, defineComponent } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { EditPen, DocumentAdd } from '@element-plus/icons-vue';
import ActionItem from './component/actionItem.vue';
import SceneItem from './component/sceneItem.vue';
import EditForm from './edit.vue';
import api from '/@/api/scene';
import product from '/@/api/device';

const editFormRef = ref();
//原始
const sceneList = {
	'productKey': '',
	'deviceKey': '',
	'triggerType': '',
	'timer': '',
	'triggerSwitch': false,
	'condition': [[{
		'parameter': '',
		'operator': '',
		'value': ''

	}]]
};
const originalSceneList = ref([{
	id: 0
}]);
export default defineComponent({
	components: { EditPen, EditForm, DocumentAdd, SceneItem, ActionItem },
	setup(props, context) {
		const route = useRoute();
		const router = useRouter();
		const state = reactive({
			developer_status: 2,
			showstatus: false,
			sourceData: [],
			detail: {
				name: '',
				status: 0,
				description: '',
				sceneType: ''
			},
			actionList: [{
				'seriallist': [{

				}],
				'parallellist': [{

				}]
			}],
			sceneList: [{
				'productKey': '',
				'deviceKey': '',
				'triggerType': '',
				'timer': '',
				'triggerSwitch': false,
				'condition': [[{
					'parameter': '',
					'operator': '',
					'value': ''

				}]]
			}],

		});
		const activeName = ref('first')
		const getDetail = () => {
			const id = route.params && route.params.id;
			api.manage.getDetail({ "id": id }).then((res: any) => {
				state.detail = res
			})
			getOneDetail();
		};
		const getProductList = () => {
			product.product.getSubList().then((res: any) => {
				state.sourceData = res.product;
			});
		};

		const getOneDetail = () => {
			const id = route.params && route.params.id;
			api.manage.getOneDetail({ "sceneId": id, 'group': 'definition' }).then((res: any) => {
				if (!res) {
					addScenesDetail('definition');
					getOneDetail();
				}
				originalSceneList.value = res;
				const scenes = res.map((scene: any) => {
					const parsedBodyJson = JSON.parse(scene.bodyjson);
					return {
						...parsedBodyJson
					};
				});
				getProductList();
				state.sceneList = scenes;
				state.showstatus = true;
			})
		};
		//新增一条场景定义
		const addScenesDetail = (type: String) => {
			let data = {
				sceneId: route.params && route.params.id,
				group: type,
				bodyjson: sceneList,
			}
			api.manage.addDetail(data).then((res: any) => {
				getOneDetail();
			});
		}

		//删除一条场景
		const delScenesDetail = (index: number) => {
			let ids = originalSceneList.value[index].id;
			api.manage.delDetail(ids).then((res: any) => {
				// getOneDetail();
			});
		}
		//修改一条场景
		const editScenesDetail = (index: number) => {
			let saveData = state.sceneList[index];
			let ids = originalSceneList.value[index].id;
			api.manage.editDetail({ id: ids, bodyjson: saveData }).then((res: any) => {
				getOneDetail();
			});

		}
		const addOrEdit = async (row?: any) => {
			editFormRef.value.open(row);
		};

		getDetail();


		return {
			addOrEdit,
			delScenesDetail,
			addScenesDetail,
			editScenesDetail,
			editFormRef,
			activeName,
			getDetail,
			...toRefs(props),
			...toRefs(state),
		};
	},
});
</script>

<style scoped lang="scss">
.desc {
	margin-top: 15px;
}

.edit {
	line-height: 40px;
	margin-top: 15px;
	margin-left: 30px;
}

.cont_box .pro-status {
	line-height: 40px;
	margin-left: 30px;
	margin-top: 5px;

	.on {
		background: #52c41a;
	}

	.off {
		background: #c41a1a;
	}

	span {
		position: relative;
		top: -1px;
		display: inline-block;
		width: 6px;
		height: 6px;
		vertical-align: middle;
		border-radius: 50%;
		margin-right: 5px;
	}
}
</style>