You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
319 lines
8.8 KiB
319 lines
8.8 KiB
<template>
|
|
<main :class="['aui-content', { 'aui-content--tabs': $route.meta.isTab }]">
|
|
<!-- tab展示内容 -->
|
|
<template v-if="$route.meta.isTab && !$store.state.inIframe">
|
|
<el-dropdown class="aui-content--tabs-tools">
|
|
<i class="el-icon-arrow-down"></i>
|
|
<el-dropdown-menu slot="dropdown" :show-timeout="0">
|
|
<el-dropdown-item
|
|
@click.native="tabRemoveHandle($store.state.contentTabsActiveName)"
|
|
>{{ $t("contentTabs.closeCurrent") }}</el-dropdown-item
|
|
>
|
|
<el-dropdown-item @click.native="tabsCloseOtherHandle()">{{
|
|
$t("contentTabs.closeOther")
|
|
}}</el-dropdown-item>
|
|
<el-dropdown-item @click.native="tabsCloseAllHandle()">{{
|
|
$t("contentTabs.closeAll")
|
|
}}</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</el-dropdown>
|
|
<el-tabs
|
|
v-model="$store.state.contentTabsActiveName"
|
|
@tab-click="tabSelectedHandle"
|
|
@tab-remove="tabRemoveHandle"
|
|
>
|
|
<el-tab-pane
|
|
v-for="item in $store.state.contentTabs"
|
|
:key="item.name"
|
|
:name="item.name"
|
|
:label="item.title"
|
|
:closable="item.name !== 'indexWork'"
|
|
:class="{ 'is-iframe': tabIsIframe(item.iframeURL) }"
|
|
>
|
|
<template v-if="tabIsIframe(item.iframeURL)">
|
|
<iframe
|
|
:src="
|
|
item.iframeURL + '?token=' + token + '&customerId=' + customerId
|
|
"
|
|
ref="iframes"
|
|
class="iframes"
|
|
id="iframes"
|
|
width="100%"
|
|
height="100%"
|
|
frameborder="0"
|
|
scrolling="yes"
|
|
></iframe>
|
|
<!-- <div v-if="tabIsIframe(item.iframeURL)" id="addend-iframe" style="height: 100%;"> </div> -->
|
|
</template>
|
|
<keep-alive v-else>
|
|
<router-view
|
|
v-if="item.name === $store.state.contentTabsActiveName"
|
|
@changeCustomerName="changeCustomerName"
|
|
/>
|
|
</keep-alive>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</template>
|
|
<!-- 其他方式, 展示内容 -->
|
|
<template v-else>
|
|
<keep-alive>
|
|
<router-view />
|
|
</keep-alive>
|
|
</template>
|
|
|
|
<template v-for="(item, index) in msgList">
|
|
<Tips
|
|
:key="item.memoId"
|
|
:info="item"
|
|
:show="msgList.length > 0 ? true : false"
|
|
@look="handleLook(item, index)"
|
|
@close="handleClose(item, index)"
|
|
/>
|
|
</template>
|
|
|
|
<el-dialog
|
|
:title="dialogTitle"
|
|
:visible.sync="dialogFormVisible"
|
|
:close-on-click-modal="false"
|
|
top="5vh"
|
|
width="950px"
|
|
class="dialog-h"
|
|
append-to-body
|
|
>
|
|
<work-form
|
|
v-if="formType == 'work_diary'"
|
|
ref="ref_form"
|
|
@dialogCancle="
|
|
dialogFormVisible = false;
|
|
formType = '';
|
|
"
|
|
/>
|
|
|
|
<h-form
|
|
v-if="formType == 'concern'"
|
|
ref="concern_form"
|
|
@dialogCancle="
|
|
dialogFormVisible = false;
|
|
formType = '';
|
|
"
|
|
/>
|
|
|
|
<d-form
|
|
v-if="formType == 'difficulty'"
|
|
ref="difficulty_form"
|
|
@dialogCancle="
|
|
dialogFormVisible = false;
|
|
formType = '';
|
|
"
|
|
/>
|
|
</el-dialog>
|
|
</main>
|
|
</template>
|
|
|
|
<script>
|
|
import { isURL } from "@/utils/validate";
|
|
import Cookie from "js-cookie";
|
|
import Tips from "./tips.vue";
|
|
import { requestPost } from "@/js/dai/request";
|
|
import workForm from "./modules/secretaryLog/workLog/form.vue";
|
|
import dForm from "./modules/secretaryLog/difficulty/difficultyForm.vue";
|
|
import hForm from "./modules/secretaryLog/humanisticCare/careForm.vue";
|
|
export default {
|
|
components: {
|
|
Tips,
|
|
workForm,
|
|
dForm,
|
|
hForm,
|
|
},
|
|
data() {
|
|
return {
|
|
dialogTitle: "",
|
|
dialogFormVisible: false,
|
|
iframeUrl: "",
|
|
token: "",
|
|
customerId: "",
|
|
form: {},
|
|
formType: "",
|
|
formLabelWidth: "120px",
|
|
tipsList: [],
|
|
};
|
|
},
|
|
created() {
|
|
// this.$nextTick(() => {
|
|
// this.sendMessage()
|
|
// })
|
|
this.token = localStorage.getItem("token");
|
|
this.customerId = localStorage.getItem("customerId");
|
|
|
|
this.loopTips();
|
|
},
|
|
destroyed() {
|
|
this.$store.dispatch("clearInter");
|
|
},
|
|
computed: {
|
|
msgList() {
|
|
return this.$store.state.tipsList;
|
|
},
|
|
},
|
|
methods: {
|
|
toPage(path) {
|
|
if (path) {
|
|
this.$router.push({
|
|
path,
|
|
});
|
|
}
|
|
},
|
|
changeCustomerName(customerName) {
|
|
this.$emit("changeCustomerName", customerName);
|
|
},
|
|
// tabs, 是否通过iframe展示
|
|
tabIsIframe(url) {
|
|
// this.appendIframe(url)
|
|
this.iframeUrl =
|
|
url +
|
|
"?token=" +
|
|
localStorage.getItem("token") +
|
|
"&customerId=" +
|
|
localStorage.getItem("customerId");
|
|
return isURL(url);
|
|
},
|
|
// tabs, 选中tab
|
|
tabSelectedHandle(tab) {
|
|
tab = this.$store.state.contentTabs.filter(
|
|
(item) => item.name === tab.name
|
|
)[0];
|
|
if (tab) {
|
|
this.$router.push({
|
|
name: tab.name,
|
|
params: { ...tab.params },
|
|
query: { ...tab.query },
|
|
});
|
|
}
|
|
},
|
|
// tabs, 删除tab
|
|
tabRemoveHandle(tabName) {
|
|
if (tabName === "home") {
|
|
return false;
|
|
}
|
|
this.$store.state.contentTabs = this.$store.state.contentTabs.filter(
|
|
(item) => item.name !== tabName
|
|
);
|
|
if (this.$store.state.contentTabs.length <= 0) {
|
|
this.$store.state.sidebarMenuActiveName =
|
|
this.$store.state.contentTabsActiveName = "home";
|
|
return false;
|
|
}
|
|
// 当前选中tab被删除
|
|
if (tabName === this.$store.state.contentTabsActiveName) {
|
|
let tab =
|
|
this.$store.state.contentTabs[
|
|
this.$store.state.contentTabs.length - 1
|
|
];
|
|
this.$router.push({
|
|
name: tab.name,
|
|
params: { ...tab.params },
|
|
query: { ...tab.query },
|
|
});
|
|
}
|
|
},
|
|
// tabs, 关闭其它
|
|
tabsCloseOtherHandle() {
|
|
this.$store.state.contentTabs = this.$store.state.contentTabs.filter(
|
|
(item) => {
|
|
return (
|
|
item.name === "home" ||
|
|
item.name === this.$store.state.contentTabsActiveName
|
|
);
|
|
}
|
|
);
|
|
},
|
|
// tabs, 关闭全部
|
|
tabsCloseAllHandle() {
|
|
this.$store.state.contentTabs = this.$store.state.contentTabs.filter(
|
|
(item) => item.name === "home"
|
|
);
|
|
this.$router.push({ name: "home" });
|
|
},
|
|
sendMessage() {
|
|
// const iframe = this.$refs.iframes.contentWindow
|
|
const iframe =
|
|
document.getElementsByClassName("iframes")[0].contentWindow;
|
|
|
|
console.log("iframe", iframe);
|
|
// iframe.postMessage({
|
|
// token: localStorage.getItem('token'),
|
|
// customerId: localStorage.getItem('customerId')
|
|
// }, '*')
|
|
iframe.postMessage({ name: "lalalal" }, "*");
|
|
},
|
|
loopTips() {
|
|
this.$store.dispatch("setTipsList");
|
|
this.$store.dispatch("setTipsTime");
|
|
// let id = 1
|
|
// this.timer = setInterval(() => {
|
|
// id = id + 1
|
|
// if (id == 5) clearInterval(this.timer)
|
|
// this.tipsList.push(id)
|
|
// console.log('id------0', id)
|
|
// }, 1000)
|
|
},
|
|
async closeTips(memoId) {
|
|
const url = "/governance/memoAttr/setReaded";
|
|
const params = {
|
|
memoId,
|
|
};
|
|
const { data, code, msg } = await requestPost(url, params);
|
|
if (code != 0) this.$message.error(msg);
|
|
},
|
|
async getInfo(item) {
|
|
const urls = {
|
|
work_diary: "/governance/memoWorkDiary",
|
|
concern: "/governance/memoConcern",
|
|
difficulty: "/governance/memoDifficulty/detail",
|
|
};
|
|
const params = {
|
|
id: item.memoId,
|
|
readFlag: 0,
|
|
};
|
|
const { data, code, msg } = await requestPost(urls[item.type], params);
|
|
if (code == 0) {
|
|
this.form = { ...data };
|
|
} else this.$message.error(msg);
|
|
},
|
|
handleClose(item, index) {
|
|
console.log("close-----", item);
|
|
this.$store.state.tipsList.splice(index, 1);
|
|
this.closeTips(item.memoId);
|
|
},
|
|
async handleLook(item, index) {
|
|
console.log("look-----", item);
|
|
const formType = {
|
|
work_diary: "ref_form",
|
|
concern: "concern_form",
|
|
difficulty: "difficulty_form",
|
|
};
|
|
this.dialogTitle = item.typeName;
|
|
// await this.getInfo(item)
|
|
this.formType = item.type;
|
|
this.dialogFormVisible = true;
|
|
|
|
console.log("ref0-----", this.formType);
|
|
this.$nextTick(() => {
|
|
console.log("this.$refs-----", this.$refs);
|
|
this.$refs[formType[item.type]].initForm("look", item.memoId);
|
|
this.$store.state.tipsList.splice(index, 1);
|
|
this.closeTips(item.memoId);
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "~@/assets/scss/c/function.scss";
|
|
.aui-content {
|
|
position: relative;
|
|
// height: calc(100vh -50px) !important;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|
|
|