|
|
@@ -1,33 +1,52 @@
|
|
|
<template>
|
|
|
<div class="scene flex justify-end content-center">
|
|
|
<div class="scene-list" v-if="list.length">
|
|
|
- <div class="scene-title" v-if="!show ">
|
|
|
+ <div class="scene-title" v-if="!show">
|
|
|
<el-button class="newbut" @click="handleAdd">
|
|
|
<i class="iconfont icon-import" style="margin-right: 5px"></i>
|
|
|
导入
|
|
|
</el-button>
|
|
|
</div>
|
|
|
- <div
|
|
|
- class="list"
|
|
|
- v-if="active"
|
|
|
- >
|
|
|
+ <div class="list" v-if="active">
|
|
|
<div
|
|
|
- class="listItem py-4 "
|
|
|
+ class="listItem py-4"
|
|
|
v-for="(item, index) in list"
|
|
|
:key="index"
|
|
|
- :class="{active: item.num === sceneItem.num, disabled: !item.viewAuth}"
|
|
|
+ :class="{
|
|
|
+ active: item.num === sceneItem.num,
|
|
|
+ disabled: !item.viewAuth,
|
|
|
+ }"
|
|
|
@click="handleItem(item)"
|
|
|
>
|
|
|
- <div class="anmc" :title="item.title">{{ item.title || item.sceneName }}</div>
|
|
|
- <div class="cursor-pointer" v-show="!show" v-if="item.num === sceneItem.num && (item.editAuth || caseInfoData.isAuthor)" quaternary type="primary">
|
|
|
- <el-icon v-if="item.editAuth" style="margin-right: 34px" title="编辑">
|
|
|
+ <div class="anmc" :title="item.title">
|
|
|
+ {{ item.title || item.sceneName }}
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="cursor-pointer"
|
|
|
+ v-show="!show"
|
|
|
+ v-if="
|
|
|
+ item.num === sceneItem.num &&
|
|
|
+ (item.editAuth || caseInfoData.isAuthor)
|
|
|
+ "
|
|
|
+ quaternary
|
|
|
+ type="primary"
|
|
|
+ >
|
|
|
+ <el-icon
|
|
|
+ v-if="item.editAuth && isPc"
|
|
|
+ style="margin-right: 34px"
|
|
|
+ title="编辑"
|
|
|
+ >
|
|
|
<EditPen @click="handlegotoEdit(item)" />
|
|
|
</el-icon>
|
|
|
<el-icon title="移除">
|
|
|
<CircleClose @click="handlegotoelT(item)" />
|
|
|
</el-icon>
|
|
|
</div>
|
|
|
- <div class="cursor-pointer" v-show="!show" v-else-if="!item.viewAuth && caseInfoData.isAuthor">
|
|
|
+ <div
|
|
|
+ class="cursor-pointer"
|
|
|
+ v-show="!show"
|
|
|
+ v-else-if="!item.viewAuth && caseInfoData.isAuthor"
|
|
|
+ >
|
|
|
<el-icon title="移除">
|
|
|
<CircleClose @click.stop="handlegotoelT(item)" />
|
|
|
</el-icon>
|
|
|
@@ -35,15 +54,15 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div
|
|
|
- class="app-scene"
|
|
|
- ref="sceneRef"
|
|
|
- :style="{
|
|
|
- width: list.length == 0?'100%':'',
|
|
|
+ <div
|
|
|
+ class="app-scene"
|
|
|
+ ref="sceneRef"
|
|
|
+ :style="{
|
|
|
+ width: list.length == 0 ? '100%' : '',
|
|
|
|
|
|
- height: '100%',
|
|
|
- }"
|
|
|
- >
|
|
|
+ height: '100%',
|
|
|
+ }"
|
|
|
+ >
|
|
|
<iframe
|
|
|
v-if="list && list.length && sceneURL"
|
|
|
:src="sceneURL"
|
|
|
@@ -52,13 +71,17 @@
|
|
|
></iframe>
|
|
|
<div class="import" v-else @click="handleAdd" v-show="!show">
|
|
|
<el-icon size="26" color="#26559B">
|
|
|
- <i style="font-size: 26px; color: #26559B" class="iconfont icon-import"></i></el-icon>
|
|
|
+ <i
|
|
|
+ style="font-size: 26px; color: #26559b"
|
|
|
+ class="iconfont icon-import"
|
|
|
+ ></i
|
|
|
+ ></el-icon>
|
|
|
<div class="name">导入</div>
|
|
|
- <div class="noData" >
|
|
|
- <div class="name" style="margin-top: 25px;">暂无数据</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div class="noData">
|
|
|
+ <div class="name" style="margin-top: 25px">暂无数据</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -71,6 +94,7 @@ import {
|
|
|
setCaseaddOrUpdate,
|
|
|
show,
|
|
|
caseInfoData,
|
|
|
+ isPc,
|
|
|
} from "@/store/case";
|
|
|
import { router } from "@/router";
|
|
|
import comSelect from "@/components/company-select/index.vue";
|
|
|
@@ -86,11 +110,11 @@ const active = ref(true);
|
|
|
const list = ref([]);
|
|
|
const isEdit = ref(false);
|
|
|
const showModal = ref(false);
|
|
|
-const sceneURL = ref('');
|
|
|
-const sceneNum = ref('');
|
|
|
+const sceneURL = ref("");
|
|
|
+const sceneNum = ref("");
|
|
|
const sceneItem = ref({
|
|
|
- id: '',
|
|
|
- num: '',
|
|
|
+ id: "",
|
|
|
+ num: "",
|
|
|
});
|
|
|
const params = useScenePaggingParams();
|
|
|
const caseId = computed(() => router.currentRoute.value?.params?.caseId);
|
|
|
@@ -98,10 +122,15 @@ onMounted(() => {
|
|
|
geiList();
|
|
|
});
|
|
|
async function geiList(refresh) {
|
|
|
- list.value = await getCaseList({caseId: caseId.value, type: 'scene'}) || [];
|
|
|
- sceneItem.value = (list.value && list.value.find(ele => ele.viewAuth)) || {};
|
|
|
+ list.value =
|
|
|
+ (await getCaseList({ caseId: caseId.value, type: "scene" })) || [];
|
|
|
+ sceneItem.value =
|
|
|
+ (list.value && list.value.find((ele) => ele.viewAuth)) || {};
|
|
|
console.log("sceneURL", sceneItem.value);
|
|
|
- sceneURL.value = getUrlSrc({...sceneItem.value, type: sceneItem.value.sceneType}, caseId.value);
|
|
|
+ sceneURL.value = getUrlSrc(
|
|
|
+ { ...sceneItem.value, type: sceneItem.value.sceneType },
|
|
|
+ caseId.value
|
|
|
+ );
|
|
|
console.log("sceneURL", list.value, sceneURL.value);
|
|
|
}
|
|
|
function handlegotoEdit(record) {
|
|
|
@@ -124,14 +153,18 @@ async function handlegotoelT(record) {
|
|
|
submitForm();
|
|
|
return;
|
|
|
}
|
|
|
- ElMessageBox.confirm('确定要移除当前场景吗？', "提示", {
|
|
|
+ ElMessageBox.confirm("确定要移除当前场景吗？", "提示", {
|
|
|
confirmButtonText: "确定",
|
|
|
cancelButtonText: "取消",
|
|
|
type: "warning",
|
|
|
}).then(async () => {
|
|
|
list.value = list.value.filter((item) => item.num !== record.num);
|
|
|
- sceneItem.value = (list.value && list.value.find(ele => ele.viewAuth)) || {};
|
|
|
- sceneURL.value = getUrlSrc({...sceneItem.value, type: sceneItem.value.sceneType}, caseId.value);
|
|
|
+ sceneItem.value =
|
|
|
+ (list.value && list.value.find((ele) => ele.viewAuth)) || {};
|
|
|
+ sceneURL.value = getUrlSrc(
|
|
|
+ { ...sceneItem.value, type: sceneItem.value.sceneType },
|
|
|
+ caseId.value
|
|
|
+ );
|
|
|
submitForm();
|
|
|
});
|
|
|
}
|
|
|
@@ -156,12 +189,13 @@ async function submitForm() {
|
|
|
});
|
|
|
}
|
|
|
async function handleAdd() {
|
|
|
- let numList = [], noEditList = [];
|
|
|
+ let numList = [],
|
|
|
+ noEditList = [];
|
|
|
list.value.map((item) => {
|
|
|
// item.num
|
|
|
numList.push(item.num);
|
|
|
- if(!item.editAuth) {
|
|
|
- noEditList.push(item.num)
|
|
|
+ if (!item.editAuth) {
|
|
|
+ noEditList.push(item.num);
|
|
|
}
|
|
|
});
|
|
|
let val = await tableModelScene({ numList: numList, noEditList });
|
|
|
@@ -172,10 +206,13 @@ async function handleAdd() {
|
|
|
}
|
|
|
function handleItem(item) {
|
|
|
console.log("handleItem", item);
|
|
|
- if(!item.viewAuth) return ElMessage.error("您没有查看权限，请联系管理员开通");
|
|
|
+ if (!item.viewAuth)
|
|
|
+ return ElMessage.error("您没有查看权限，请联系管理员开通");
|
|
|
sceneItem.value = item;
|
|
|
- sceneURL.value = getUrlSrc({...sceneItem.value, type: sceneItem.value.sceneType}, caseId.value);
|
|
|
-
|
|
|
+ sceneURL.value = getUrlSrc(
|
|
|
+ { ...sceneItem.value, type: sceneItem.value.sceneType },
|
|
|
+ caseId.value
|
|
|
+ );
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
@@ -191,29 +228,29 @@ function handleItem(item) {
|
|
|
&::-webkit-scrollbar {
|
|
|
display: none;
|
|
|
}
|
|
|
- .scene-title{
|
|
|
+ .scene-title {
|
|
|
height: 64px;
|
|
|
padding: 24px 48px 0 48px;
|
|
|
- .newbut{
|
|
|
+ .newbut {
|
|
|
position: relative;
|
|
|
left: -16px;
|
|
|
}
|
|
|
}
|
|
|
- .list{
|
|
|
- .listItem{
|
|
|
+ .list {
|
|
|
+ .listItem {
|
|
|
width: calc(var(--leftwidth) - 0px);
|
|
|
cursor: pointer;
|
|
|
padding: 25px 48px;
|
|
|
- &:hover{
|
|
|
- background: rgba(69,144,255,0.1);;
|
|
|
+ &:hover {
|
|
|
+ background: rgba(69, 144, 255, 0.1);
|
|
|
}
|
|
|
}
|
|
|
- .active{
|
|
|
- background: rgba(69,144,255,0.1);;
|
|
|
+ .active {
|
|
|
+ background: rgba(69, 144, 255, 0.1);
|
|
|
}
|
|
|
- .disabled{
|
|
|
- color: rgba(0,0,0,0.3);
|
|
|
- cursor:not-allowed;
|
|
|
+ .disabled {
|
|
|
+ color: rgba(0, 0, 0, 0.3);
|
|
|
+ cursor: not-allowed;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -221,8 +258,8 @@ function handleItem(item) {
|
|
|
background: #f5f5f5;
|
|
|
width: calc(100% - var(--leftwidth));
|
|
|
position: relative;
|
|
|
- border-right: 48px solid #fff;
|
|
|
- border-bottom: 48px solid #fff;
|
|
|
+ border-right: 48px solid #fff;
|
|
|
+ border-bottom: 48px solid #fff;
|
|
|
.import {
|
|
|
position: absolute;
|
|
|
left: 50%;
|
|
|
@@ -236,7 +273,7 @@ function handleItem(item) {
|
|
|
text-align: center;
|
|
|
background: #fafafa;
|
|
|
cursor: pointer;
|
|
|
- .noData{
|
|
|
+ .noData {
|
|
|
position: absolute;
|
|
|
top: 140px;
|
|
|
width: 100%;
|
