|
|
|
@@ -16,231 +16,240 @@ |
|
|
|
<template #center>{{templateName}}</template> |
|
|
|
<template #right> |
|
|
|
<template v-if="templateIsAdded !== undefined"> |
|
|
|
<el-button type="primary" v-if="!templateIsAdded" @click.stop="addTemplate">添加模板</el-button> |
|
|
|
<el-button v-else disabled>已添加</el-button> |
|
|
|
<el-button |
|
|
|
type="primary" |
|
|
|
v-if="!templateIsAdded" |
|
|
|
@click.stop="addTemplate" |
|
|
|
>添加模板</el-button> |
|
|
|
<el-button |
|
|
|
v-else |
|
|
|
disabled |
|
|
|
>已添加</el-button> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
</app-header> |
|
|
|
<nodes-viewer |
|
|
|
:node="node" |
|
|
|
class="viewer" |
|
|
|
/> |
|
|
|
<div class="template_info_popup"> |
|
|
|
<div class="popup_head"> |
|
|
|
<div class="popup_head_left"> |
|
|
|
<i class="Cicon icon font_family icon-gerenshezhi " /> |
|
|
|
<main class="template_detail_main"> |
|
|
|
<div class="template_detail_main_left"> |
|
|
|
<div class="nav_subtitle">模板概况</div> |
|
|
|
<div class="nav_list_group"> |
|
|
|
<div |
|
|
|
class="nav_list_item" |
|
|
|
:class="{ item_active: viewType === 'template' }" |
|
|
|
@click.stop="viewType = 'template'" |
|
|
|
>模板结构</div> |
|
|
|
<div |
|
|
|
class="nav_list_item" |
|
|
|
:class="{ item_active: viewType === 'info' }" |
|
|
|
@click.stop="viewType = 'info'" |
|
|
|
>模板信息</div> |
|
|
|
<!-- <div class="nav_list_item">文件交换</div> --> |
|
|
|
</div> |
|
|
|
<div class="popup_head_center">模板信息</div> |
|
|
|
<div class="popup_head_right"></div> |
|
|
|
</div> |
|
|
|
<div class="popup_line" /> |
|
|
|
<div class="popup_block"> |
|
|
|
<div class="popup_block_title">模板介绍</div> |
|
|
|
<div class="popup_block_text">{{templateInfo.introduce}}</div> |
|
|
|
</div> |
|
|
|
<div class="popup_line" /> |
|
|
|
<div class="popup_block" v-if="templateInfo.propertys && templateInfo.propertys.length"> |
|
|
|
<div class="popup_block_title">模板需填字段</div> |
|
|
|
<div class="popup_block_tags"> |
|
|
|
<div class="popup_block_tag" |
|
|
|
v-for="tag in templateInfo.propertys || []" |
|
|
|
:key="tag.id" |
|
|
|
> |
|
|
|
{{tag.propertyName}} |
|
|
|
</div> |
|
|
|
<div class="nav_subtitle">个性化</div> |
|
|
|
<div class="nav_list_group"> |
|
|
|
<div |
|
|
|
class="nav_list_item" |
|
|
|
:class="{ item_active: viewType === 'files' }" |
|
|
|
@click.stop="viewType = 'files'" |
|
|
|
>管理样板文件</div> |
|
|
|
<!-- <div class="nav_list_item">第三方应用管理</div> --> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="popup_line" /> |
|
|
|
<div class="popup_block"> |
|
|
|
<div class="popup_block_title">模板信息</div> |
|
|
|
<div class="popup_block_items"> |
|
|
|
<div class="popup_block_item"> |
|
|
|
<div>模板编码</div> |
|
|
|
<div>{{templateInfo.fullCode}}</div> |
|
|
|
</div> |
|
|
|
<div class="popup_block_item"> |
|
|
|
<div>行业分类</div> |
|
|
|
<div :title="templateInfo.industryCN">{{templateInfo.industryCN}}</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="template_detail_main_right"> |
|
|
|
<nodes-viewer |
|
|
|
:node="node" |
|
|
|
class="viewer" |
|
|
|
v-if="viewType === 'template'" |
|
|
|
/> |
|
|
|
<info class="content_info" v-if="viewType === 'info'" :templateInfo="templateInfo" /> |
|
|
|
<template-files |
|
|
|
class="content_files" |
|
|
|
v-if="viewType === 'files'" |
|
|
|
:nodeList="plainNodeList" |
|
|
|
:templateId="templateId" |
|
|
|
:companyId="companyId" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</main> |
|
|
|
|
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import appHeader from "@/components/app-header/app-header.vue"; |
|
|
|
import nodesViewer from "@/components/nodes-viewer"; |
|
|
|
import { queryTemplateByCompanyId, queryTemplateById, queryTemplateNodeByTemplateId } from '@/services/template'; |
|
|
|
import { firstCharToLowerCase } from '@/utils/tool'; |
|
|
|
import { queryAllIndustry } from '@/services/industry'; |
|
|
|
import { addTemplateToCompany } from './tool'; |
|
|
|
import { |
|
|
|
queryTemplateByCompanyId, |
|
|
|
queryTemplateById, |
|
|
|
queryTemplateNodeByTemplateId, |
|
|
|
} from "@/services/template"; |
|
|
|
import { firstCharToLowerCase } from "@/utils/tool"; |
|
|
|
import { queryAllIndustry } from "@/services/industry"; |
|
|
|
import { addTemplateToCompany } from "./tool"; |
|
|
|
import Info from "./components/info"; |
|
|
|
import TemplateFiles from './components/template-files'; |
|
|
|
|
|
|
|
export default { |
|
|
|
components: { appHeader, nodesViewer }, |
|
|
|
data() { |
|
|
|
const { id: templateId, name: templateName, prevViewName } = this.$route.params; |
|
|
|
console.log(this, this.$router); |
|
|
|
return { |
|
|
|
companyId: sessionStorage.companyId, |
|
|
|
listTemplateMindTree: [], //思维导图数据 |
|
|
|
mindZoom: 60, |
|
|
|
templateId, |
|
|
|
templateName, |
|
|
|
node: null, |
|
|
|
templateInfo: {}, |
|
|
|
templateIsAdded: undefined, |
|
|
|
prevViewName, |
|
|
|
// template: this.$route.params.data, |
|
|
|
// status: '', // 模板状态 |
|
|
|
}; |
|
|
|
export default { |
|
|
|
components: { appHeader, nodesViewer, Info, TemplateFiles }, |
|
|
|
data() { |
|
|
|
const { |
|
|
|
id: templateId, |
|
|
|
name: templateName, |
|
|
|
prevViewName, |
|
|
|
} = this.$route.params; |
|
|
|
return { |
|
|
|
companyId: sessionStorage.companyId, |
|
|
|
listTemplateMindTree: [], //思维导图数据 |
|
|
|
mindZoom: 60, |
|
|
|
templateId, |
|
|
|
templateName, |
|
|
|
node: null, |
|
|
|
templateInfo: {}, |
|
|
|
templateIsAdded: undefined, |
|
|
|
prevViewName, |
|
|
|
viewType: 'template', // template | info | files |
|
|
|
plainNodeList: [], |
|
|
|
// template: this.$route.params.data, |
|
|
|
// status: '', // 模板状态 |
|
|
|
}; |
|
|
|
}, |
|
|
|
created: function () { |
|
|
|
this.fetchTemplateNodes(); |
|
|
|
this.fetchTemplateInfo(); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
async fetchTemplateNodes() { |
|
|
|
const res = await queryTemplateNodeByTemplateId(this.templateId); |
|
|
|
this.node = res.Data; |
|
|
|
this.plainNodeList = flatternTree(res.Data); |
|
|
|
}, |
|
|
|
created: function () { |
|
|
|
this.fetchTemplateNodes(); |
|
|
|
this.fetchTemplateInfo(); |
|
|
|
async fetchTemplateInfo() { |
|
|
|
const [res, indList, addedTemplateRes] = await Promise.all([ |
|
|
|
queryTemplateById(this.templateId), |
|
|
|
queryAllIndustry(), |
|
|
|
queryTemplateByCompanyId(this.companyId), |
|
|
|
]); |
|
|
|
const industryHash = indList.reduce((h, ind) => { |
|
|
|
h[ind.Id] = ind; |
|
|
|
return h; |
|
|
|
}, {}); |
|
|
|
if (res.Code || !res.Data) { |
|
|
|
this.templateInfo = {}; |
|
|
|
return; |
|
|
|
} |
|
|
|
|
|
|
|
if (addedTemplateRes.Data) { |
|
|
|
this.templateIsAdded = addedTemplateRes.Data.some( |
|
|
|
(obj) => obj.Id === this.templateId, |
|
|
|
{} |
|
|
|
); |
|
|
|
} |
|
|
|
const { propertys, template } = res.Data; |
|
|
|
this.templateInfo = Object.assign(firstCharToLowerCase(template), { |
|
|
|
propertys: propertys |
|
|
|
.filter((i) => i.PropertyName) |
|
|
|
.map(firstCharToLowerCase), |
|
|
|
}); |
|
|
|
const targetInd = industryHash[this.templateInfo.customCode]; |
|
|
|
if (!targetInd) return; |
|
|
|
const industryCN = targetInd.LevelId.split("-") |
|
|
|
.map((id) => industryHash[id]?.Name) |
|
|
|
.join(" / "); |
|
|
|
this.templateInfo.industryCN = industryCN; |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
async fetchTemplateNodes() { |
|
|
|
const res = await queryTemplateNodeByTemplateId(this.templateId); |
|
|
|
this.node = res.Data; |
|
|
|
}, |
|
|
|
async fetchTemplateInfo() { |
|
|
|
const [res, indList, addedTemplateRes] = await Promise.all([ |
|
|
|
queryTemplateById(this.templateId), |
|
|
|
queryAllIndustry(), |
|
|
|
queryTemplateByCompanyId(this.companyId), |
|
|
|
]); |
|
|
|
console.log(res, indList, addedTemplateRes); |
|
|
|
const industryHash = indList.reduce((h, ind) => { |
|
|
|
h[ind.Id] = ind; |
|
|
|
return h; |
|
|
|
}, {}); |
|
|
|
if(res.Code || !res.Data) { |
|
|
|
this.templateInfo = {}; |
|
|
|
return; |
|
|
|
} |
|
|
|
/** |
|
|
|
* 添加模板 |
|
|
|
*/ |
|
|
|
async addTemplate() { |
|
|
|
const res = await addTemplateToCompany(this.companyId, this.templateId); |
|
|
|
if (res.Code) { |
|
|
|
return; |
|
|
|
} |
|
|
|
this.$notify({ message: "添加成功", type: "success" }); |
|
|
|
this.templateIsAdded = true; |
|
|
|
}, |
|
|
|
}, |
|
|
|
}; |
|
|
|
|
|
|
|
if(addedTemplateRes.Data) { |
|
|
|
this.templateIsAdded = addedTemplateRes.Data.some(obj => (obj.Id === this.templateId), {}); |
|
|
|
} |
|
|
|
const { propertys, template} = res.Data; |
|
|
|
this.templateInfo = Object.assign(firstCharToLowerCase(template), { propertys: propertys.filter(i => i.PropertyName).map(firstCharToLowerCase) }); |
|
|
|
const targetInd = industryHash[this.templateInfo.customCode]; |
|
|
|
if(!targetInd) return; |
|
|
|
const industryCN = targetInd.LevelId.split('-').map(id => industryHash[id]?.Name).join(' / '); |
|
|
|
this.templateInfo.industryCN = industryCN; |
|
|
|
}, |
|
|
|
/** |
|
|
|
* 添加模板 |
|
|
|
*/ |
|
|
|
async addTemplate () { |
|
|
|
const res = await addTemplateToCompany(this.companyId, this.templateId); |
|
|
|
if(res.Code) { return; } |
|
|
|
this.$notify({ message: '添加成功', type: 'success' }); |
|
|
|
this.templateIsAdded = true; |
|
|
|
function flatternTree(treeHeadNode) { |
|
|
|
const list = []; |
|
|
|
const f = treeNodes => { |
|
|
|
treeNodes.forEach((treeNode) => { |
|
|
|
const node = { id: treeNode.id, label: treeNode.topic }; |
|
|
|
list.push(node); |
|
|
|
if(treeNode.children && treeNode.children.length) { |
|
|
|
f(treeNode.children); |
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
}) |
|
|
|
} |
|
|
|
f(treeHeadNode.children || []); |
|
|
|
return list; |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="less" scoped> |
|
|
|
.template_detail { |
|
|
|
height: 100%; |
|
|
|
.viewer { |
|
|
|
display: inline-block; |
|
|
|
vertical-align: top; |
|
|
|
width: 60%; |
|
|
|
height: calc(100% - 40px); |
|
|
|
margin-top: 20px; |
|
|
|
box-sizing: border-box; |
|
|
|
} |
|
|
|
|
|
|
|
.template_info_popup { |
|
|
|
display: inline-block; |
|
|
|
vertical-align: top; |
|
|
|
width: 660px; |
|
|
|
width: calc(40% - 20px - 60px); |
|
|
|
margin-top: 15px; |
|
|
|
margin-left: 20px; |
|
|
|
height: calc(100% - 15px); |
|
|
|
background-color: rgba(252, 252, 252, 1); |
|
|
|
box-shadow: 0px 3px 11px 1px rgba(0, 0, 0, 0.06); |
|
|
|
border-radius: 8px 8px 0 0; |
|
|
|
.popup { |
|
|
|
&_line { |
|
|
|
height: 0.5px; |
|
|
|
background-color: rgba(204, 205, 215, 1); |
|
|
|
} |
|
|
|
&_head { |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
padding: 0 24px; |
|
|
|
line-height: 56px; |
|
|
|
height: 56px; |
|
|
|
.icon-gerenshezhi { |
|
|
|
font-size: 36px; |
|
|
|
color: #7850FF; |
|
|
|
line-height: inherit; |
|
|
|
} |
|
|
|
&_center { |
|
|
|
color: #32323c; |
|
|
|
font-size: 20px; |
|
|
|
} |
|
|
|
} |
|
|
|
&_block { |
|
|
|
padding: 15px 24px; |
|
|
|
&_title { |
|
|
|
&_main { |
|
|
|
display: flex; |
|
|
|
flex-direction: row; |
|
|
|
height: 100%; |
|
|
|
align-items: stretch; |
|
|
|
padding: 0 40px; |
|
|
|
&_left { |
|
|
|
flex: none; |
|
|
|
width: 250px + 16px; |
|
|
|
padding-right: 16px; |
|
|
|
.nav { |
|
|
|
&_subtitle { |
|
|
|
color: rgba(0, 0, 0, 0.56); |
|
|
|
padding-left: 24px; |
|
|
|
height: 40px; |
|
|
|
line-height: 40px; |
|
|
|
font-size: 13px; |
|
|
|
line-height: 18px; |
|
|
|
color: #7A7B89; |
|
|
|
} |
|
|
|
&_text { |
|
|
|
font-size: 14px; |
|
|
|
color: #32323c; |
|
|
|
line-height: 20px; |
|
|
|
margin-top: 15px; |
|
|
|
} |
|
|
|
&_tags { |
|
|
|
margin-top: 13px; |
|
|
|
} |
|
|
|
&_tag { |
|
|
|
display: inline-block; |
|
|
|
margin-right: 16px; |
|
|
|
margin-bottom: 16px; |
|
|
|
padding: 0 15px; |
|
|
|
line-height: 32px; |
|
|
|
font-size: 14px; |
|
|
|
border: 0.5px solid #A7A8B7; |
|
|
|
border-radius: 21px; |
|
|
|
} |
|
|
|
&_items { |
|
|
|
margin-top: 13px; |
|
|
|
} |
|
|
|
&_item { |
|
|
|
display: inline-block; |
|
|
|
vertical-align: top; |
|
|
|
width: 50%; |
|
|
|
>div { |
|
|
|
&_list { |
|
|
|
&_item { |
|
|
|
height: 44px; |
|
|
|
line-height: 44px; |
|
|
|
background-color: #fff; |
|
|
|
padding-left: 24px; |
|
|
|
color: rgba(50, 50, 60, 100); |
|
|
|
cursor: pointer; |
|
|
|
&:hover, &.item_active { |
|
|
|
background-color: rgba(50, 50, 60, 0.1); |
|
|
|
} |
|
|
|
&:not(:first-child){ |
|
|
|
border-top: 1px solid rgba(0, 0, 0, 0.2); |
|
|
|
} |
|
|
|
&:first-child { |
|
|
|
font-size: 12px; |
|
|
|
line-height: 16px; |
|
|
|
color: #666; |
|
|
|
&:after { content: '：' } |
|
|
|
border-top-left-radius: 6px; |
|
|
|
border-top-right-radius: 6px; |
|
|
|
} |
|
|
|
&:last-child { |
|
|
|
font-size: 14px; |
|
|
|
line-height: 20px; |
|
|
|
margin-top: 4px; |
|
|
|
color: #32323c; |
|
|
|
text-overflow: ellipsis; |
|
|
|
white-space: nowrap; |
|
|
|
overflow: hidden; |
|
|
|
border-bottom-left-radius: 6px; |
|
|
|
border-bottom-right-radius: 6px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
&_right { |
|
|
|
flex: 1; |
|
|
|
} |
|
|
|
} |
|
|
|
.viewer { |
|
|
|
display: inline-block; |
|
|
|
vertical-align: top; |
|
|
|
width: 100%; |
|
|
|
height: calc(100% - 40px); |
|
|
|
margin-top: 20px; |
|
|
|
box-sizing: border-box; |
|
|
|
} |
|
|
|
.content_info { |
|
|
|
margin-left: 90px; |
|
|
|
} |
|
|
|
.content_files { |
|
|
|
margin-right: 60px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
</style> |
