|
|
@@ -5,38 +5,57 @@
|
|
|
<div class="flex1 ov-hd">
|
|
|
<span class="f-s-18 c-333 f-w-6">编辑会议宣传门户</span>
|
|
|
<el-button @click="router.go(-1)" text type="primary">
|
|
|
- <el-icon><Back /></el-icon>
|
|
|
+ <el-icon>
|
|
|
+ <Back />
|
|
|
+ </el-icon>
|
|
|
返回上一级
|
|
|
</el-button>
|
|
|
</div>
|
|
|
<div class="d-flex a-c">
|
|
|
+ <el-button @click="setBgMusic">设置背景音乐</el-button>
|
|
|
<el-button @click="router.go(-1)">取消</el-button>
|
|
|
<el-button @click="previewTpl" type="primary">预览</el-button>
|
|
|
- <el-button type="success">发布</el-button>
|
|
|
+ <el-button @click="publishTpl" type="success">发布</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="flex1 ov-hd d-flex">
|
|
|
<div class="bg-#f8f8f8 w-200 box-sizing-border over-auto">
|
|
|
- <MeetingTplList v-if="meetid" :meetid="meetid" @selectItem="selectItem"></MeetingTplList>
|
|
|
+ <MeetingTplList v-if="meetid" :meetid="meetid" @selectItem="selectItem" :list="list"
|
|
|
+ @setIndex="setIndexTpl" @addMeetingTpls="addMeetingTpls" @delete="deleteListTpl"
|
|
|
+ @changeLabel="changeLabel"></MeetingTplList>
|
|
|
</div>
|
|
|
<div class="flex1 ov-hd d-flex flex-cln a-c">
|
|
|
- <div v-if="form.id" class="w-750 pd2-10-0 f-w-5">
|
|
|
- 页面名称
|
|
|
- <el-icon><EditPen /></el-icon>
|
|
|
+ <div v-if="form.id" @click="changeLabel(form)" class="w-750 pd2-10-0 f-w-5">
|
|
|
+ {{ form?.label }}
|
|
|
+ <el-icon>
|
|
|
+ <EditPen />
|
|
|
+ </el-icon>
|
|
|
</div>
|
|
|
- <MeetingTplH5 v-if="form.id" v-model="form"></MeetingTplH5>
|
|
|
+ <MeetingTplH5 v-if="form.id" v-model="form" @activated="activated"
|
|
|
+ @deleteItemEvents="deleteItemEvents" @muisc="setMuisc"></MeetingTplH5>
|
|
|
+ </div>
|
|
|
+ <div class="bg-#f8f8f8 w-240">
|
|
|
+ <MeetingTplEvents v-if="curEvent" v-model="curEvent" :dict="dict" @save="saveEevent" :list="list">
|
|
|
+ </MeetingTplEvents>
|
|
|
</div>
|
|
|
- <div class="bg-#f8f8f8 w-240"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <H5ModelLook v-if="showPreviewTpl" v-model:show="showPreviewTpl" :src="previewTplStr" title="预览"></H5ModelLook>
|
|
|
</template>
|
|
|
<script setup lang="ts" name="ptpl-edit-index">
|
|
|
import router from '@/router';
|
|
|
-import { MeetingTplH5, MeetingTplList } from '../../models';
|
|
|
+import { MeetingTplH5, MeetingTplList, MeetingTplEvents } from '../../models';
|
|
|
import { useRoute } from 'vue-router';
|
|
|
import { httpRequests } from '@/utils/httpRequests';
|
|
|
+import { importFileGetUrls } from '@/utils/models';
|
|
|
+import { H5ModelLook } from '@/views/components';
|
|
|
+
|
|
|
+const VITE_APP_PAGETPL_URL = ref(import.meta.env.VITE_APP_PAGETPL_URL || '');
|
|
|
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
|
|
+const dict = proxy?.useDict('page_event')
|
|
|
+const { page_event } = toRefs<any>(dict);
|
|
|
+const showPreviewTpl = ref(false);
|
|
|
// 获取地址栏参数
|
|
|
const meetid = ref<string>('');
|
|
|
const form = ref<any>({});
|
|
|
@@ -44,13 +63,164 @@ onMounted(() => {
|
|
|
const route = useRoute();
|
|
|
meetid.value = (route.query.meetid as string) || '';
|
|
|
});
|
|
|
+const curEvent = ref<any>(null);
|
|
|
+const activated = (item: any) => {
|
|
|
+ curEvent.value = item;
|
|
|
+};
|
|
|
const selectItem = (item: any) => {
|
|
|
- form.value = item;
|
|
|
+ form.value = { ...item };
|
|
|
+};
|
|
|
+const saveEevent = (item: any) => {
|
|
|
+ if (!form.value?.events || !form.value?.events.length) return;
|
|
|
+ const index = form.value.events.findIndex((it: any) => it.id === item.id);
|
|
|
+ if (index === -1) return;
|
|
|
+ form.value.events[index] = item;
|
|
|
+};
|
|
|
+const deleteItemEvents = (item: any) => {
|
|
|
+ if (curEvent.value?.id === item.id) {
|
|
|
+ curEvent.value = null;
|
|
|
+ }
|
|
|
};
|
|
|
// 预览
|
|
|
+const previewTplStr = ref<string>('');
|
|
|
const previewTpl = async () => {
|
|
|
+ if (!form.value?.id) {
|
|
|
+ ElMessage.warning('请先选择一个页面进行预览');
|
|
|
+ return;
|
|
|
+ };
|
|
|
const res: any = await httpRequests.post(`/dgtmedicine/trainpage/edit`, form.value);
|
|
|
if (!res || res.code !== 200) return;
|
|
|
- console.log(res);
|
|
|
+ previewTplStr.value = `${VITE_APP_PAGETPL_URL.value}?id=${form.value.id}`;
|
|
|
+ showPreviewTpl.value = true;
|
|
|
+};
|
|
|
+const list = ref<any>([]);
|
|
|
+const itemsData = ref<any>([]);
|
|
|
+const getList = async () => {
|
|
|
+ const res: any = await httpRequests.get(`/dgtmedicine/trainpage/listByTrainId/${meetid.value}`,);
|
|
|
+ if (!res || res.code !== 200) return;
|
|
|
+ list.value = res.data;
|
|
|
+};
|
|
|
+const addMeetingTpls = async () => {
|
|
|
+ const res: any[] = await importFileGetUrls(['png', 'jpg', 'jpeg'], true);
|
|
|
+ // 过滤掉code不为200的
|
|
|
+ if (!res || !res.length) return;
|
|
|
+ const datas = res.filter(item => item.code === 200).map(item => item.data);
|
|
|
+ const promises = datas.map(item => {
|
|
|
+ return httpRequests.post('/dgtmedicine/trainpage/add', {
|
|
|
+ trainId: meetid.value,
|
|
|
+ label: '页面名称',
|
|
|
+ img: item.url,
|
|
|
+ homeFlag: 0,
|
|
|
+ events: []
|
|
|
+ });
|
|
|
+ });
|
|
|
+ const results = await Promise.all(promises);
|
|
|
+ const successResults = results.filter(item => item && item.code === 200).map(item => item.data);
|
|
|
+ if (!successResults.length) return;
|
|
|
+ getList();
|
|
|
+}
|
|
|
+const deleteListTpl = async (item: any) => {
|
|
|
+ ElMessageBox({
|
|
|
+ title: '删除提示',
|
|
|
+ cancelButtonText: '我再看看',
|
|
|
+ confirmButtonText: '确认删除',
|
|
|
+ showCancelButton: true,
|
|
|
+ confirmButtonClass: 'el-button--danger',
|
|
|
+ message: h('p', null, [h('div', null, ``), h('div', null, [h('span', null, '删除后页面和触发事件将同步删除，无法撤回，请谨慎操作！')])]),
|
|
|
+ callback: async (action: string) => {
|
|
|
+ if (action === 'confirm') {
|
|
|
+ const res = await httpRequests.get(`/dgtmedicine/trainpage/remove/${item.id}`);
|
|
|
+ if (res) {
|
|
|
+ ElMessage.success('删除成功');
|
|
|
+ if (item.id === form.value.id) {
|
|
|
+ form.value = {};
|
|
|
+ curEvent.value = null;
|
|
|
+ }
|
|
|
+ getList();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+};
|
|
|
+const setIndexTpl = async (item) => {
|
|
|
+ ElMessageBox({
|
|
|
+ title: '提示',
|
|
|
+ cancelButtonText: '我再看看',
|
|
|
+ confirmButtonText: '确认设置',
|
|
|
+ showCancelButton: true,
|
|
|
+ message: h('p', null, [h('div', null, ``), h('div', null, [h('span', null, '是否设置该页面为会议宣传门户首页？')])]),
|
|
|
+ callback: async (action: string) => {
|
|
|
+ if (action === 'confirm') {
|
|
|
+ const res = await httpRequests.get(`/dgtmedicine/trainpage/setHomePage/${item.id}`);
|
|
|
+ if (res) {
|
|
|
+ ElMessage.success('设置成功');
|
|
|
+ getList();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+}
|
|
|
+const setMuisc = (item: any) => {
|
|
|
+ if (form.value.id === item.id) {
|
|
|
+ form.value = { ...form.value, ...item }
|
|
|
+ }
|
|
|
};
|
|
|
+const changeLabel = async (item: any) => {
|
|
|
+ const { value: label } = await ElMessageBox.prompt('请输入页面名称', '修改页面名称', {
|
|
|
+ confirmButtonText: '保存',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ inputValue: item.label,
|
|
|
+ inputPattern: /^(?!\s*$).+/,
|
|
|
+ inputErrorMessage: '页面名称不能为空'
|
|
|
+ });
|
|
|
+ if (label !== undefined) {
|
|
|
+ const res = await httpRequests.post('/dgtmedicine/trainpage/edit', { ...item, label });
|
|
|
+ if (res && res.code === 200) {
|
|
|
+ ElMessage.success('修改成功');
|
|
|
+ getList();
|
|
|
+ if (item.id === form.value.id) {
|
|
|
+ form.value.label = label;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+// 设置背景音乐
|
|
|
+const setBgMusic = async () => {
|
|
|
+ const res: any[] = await importFileGetUrls(['mp3'], false);
|
|
|
+ if (!res || !res.length) return;
|
|
|
+ const music = res.find(item => item.code === 200);
|
|
|
+ if (!music || !music.data || !music.data.url) return;
|
|
|
+ form.value.bgMusic = music.data.url;
|
|
|
+ const musicParams = {
|
|
|
+ id: form.value.id,
|
|
|
+ bgmRact: form.value.bgmRact || {
|
|
|
+ x: 100,
|
|
|
+ y: 100,
|
|
|
+ w: 50,
|
|
|
+ h: 50
|
|
|
+ },
|
|
|
+ bgm: music.data.url
|
|
|
+ };
|
|
|
+ const saveRes = await httpRequests.post('/dgtmedicine/trainpage/setBgm', musicParams);
|
|
|
+ if (saveRes && saveRes.code === 200) {
|
|
|
+ ElMessage.success('设置背景音乐成功');
|
|
|
+ getList();
|
|
|
+ if (form.value.id) {
|
|
|
+ form.value = { ...form.value, ...musicParams }
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+// 发布页面
|
|
|
+const publishTpl = async () => {
|
|
|
+ if (!form.value?.id) {
|
|
|
+ ElMessage.warning('请先选择一个页面进行发布');
|
|
|
+ return;
|
|
|
+ };
|
|
|
+ const res: any = await httpRequests.post(`/dgtmedicine/trainpage/edit`, form.value);
|
|
|
+ if (!res || res.code !== 200) return;
|
|
|
+ ElMessage.success('发布成功');
|
|
|
+};
|
|
|
+onMounted(() => {
|
|
|
+ getList();
|
|
|
+});
|
|
|
</script>
|
