yiyun-fe
/
yiyunjianzhu-vue
4
0
Fork 0
Code Pull Requests 0 Releases 0 Activity
Browse Source

;update

dev
zhengzhou 4 years ago
parent
da81d4d17b
commit
bf5de423b2
3 changed files with 466 additions and 192 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +148
    -0
      src/views/manage_company/template/components/info.vue
  2. +117
    -0
      src/views/manage_company/template/components/template-files.vue
  3. +201
    -192
      src/views/manage_company/template/detail.vue

+ 148
- 0
src/views/manage_company/template/components/info.vue View File

@@ -0,0 +1,148 @@
<template>
<div class="template_info_popup">
<div class="popup_head">
<div class="popup_head_left">
<i class="Cicon icon font_family icon-gerenshezhi " />
</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>
</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>
</div>
</template>


<script>
export default {
props: {
templateInfo: {
type: Object,
default: () => ({})
},
}
}
</script>

<style lang="scss" scoped>
.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);
background-color: rgba(248, 248, 248, 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 {
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 {
&:first-child {
font-size: 12px;
line-height: 16px;
color: #666;
&:after { content: '：' }
}
&:last-child {
font-size: 14px;
line-height: 20px;
margin-top: 4px;
color: #32323c;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
}
}
}
}
}
</style>

+ 117
- 0
src/views/manage_company/template/components/template-files.vue View File

@@ -0,0 +1,117 @@
<template>
<div class="template_files">
<div class="template_files_left">
<div
class="node_list_item"
v-for="node in nodeList"
:class="{ item_active: node === selectedNode }"
:key="node.id"
>
{{ node.label }}
</div>
</div>
<div class="template_files_right">
<div class="template_files_right_title">
模板样板文件
</div>
<div class="template_files_right_title">
新增样板文件
<el-button class="title_button" type="primary">上传文件</el-button>
</div>
</div>
</div>
</template>

<script>
export default {
props: {
companyId: String,
templateId: String,
nodeList: Array,
},
watch: {
nodeList(list) {
this.selectedNode = list[0];
},
selectedNode(node) {
debugger;
if(!node) { return; }
this.fetchNodeTemplateFiles(node);
}
},
data() {
return {
selectedNode: this.nodeList[0],
}
},
mounted() {
this.fetchNodeTemplateFiles(this.selectedNode);
},
methods: {
fetchNodeTemplateFiles(node) {
// todo
debugger;
}
},
}
</script>

<style lang="scss" scoped>
.template_files {
display: flex;
flex-direction: row;
height: 100%;
border-radius: 8px 8px 0 0 ;
box-shadow: 0px 4px 10px 1px rgba(0, 0, 0, 0.1), 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
overflow: hidden;
&_left {
flex: none;
width: 320px;
background-color: rgba(240, 240, 240, 1);
border-right: 1px solid rgba(225, 225, 225, 1);
padding: 8px;
box-sizing: border-box;
}
&_right {
flex: 1;
background-color: rgba(252, 252, 252, 1);
&_title {
position: relative;
height: 44px;
line-height: 44px;
padding-left: 24px;

color: rgba(12, 13, 16, 100);
font-size: 20px;
background-color: rgba(248, 248, 248, 1);

// border-top: 1px solid rgba(0, 0, 0, 0.2);
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
// &:first-child {
// border-top: 0;
// }
.title_button {
position: absolute;
top: 0;
bottom: 0;
height: 32px;
right: 24px;
margin: auto 0;
}
}
}
.node_list_item {
height: 28px;
padding-left: 10px;
border-radius: 4px;
color: rgba(50, 50, 60, 100);
line-height: 28px;
font-size: 12px;
cursor: pointer;
&:hover, &.item_active {
background-color: rgba(50, 50, 60, 0.1);
}
}
}
</style>

+ 201
- 192
src/views/manage_company/template/detail.vue View File

@@ -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>

Write Preview
Loading…
Cancel
Save