code init
This commit is contained in:
chenxiaoxi
@@ -0,0 +1,548 @@
|
||||
<!-- 在线编辑 -->
|
||||
<template>
|
||||
<transition name="fade">
|
||||
<div class="t-wrap" v-if="visible">
|
||||
<div class="only-office-edit">
|
||||
<div class="ooe-header">
|
||||
在线编辑
|
||||
<div class="close-btn iconfont" @click="handleClose"></div>
|
||||
</div>
|
||||
<div class="ooe-wrap">
|
||||
<div class="ooe-body">
|
||||
<div class="b-left">
|
||||
<laws-tree
|
||||
tree-div-id="onlyOffice"
|
||||
ref="onlyOfficeTree"
|
||||
:z-nodes="zNodes"
|
||||
:prevent-right-click-node="['1', '2', '3']"
|
||||
root-cant-select
|
||||
show-r-menu
|
||||
expand-first
|
||||
@treeAdd="handleTreeAdd"
|
||||
@treeEdit="handleTreeEdit"
|
||||
@treeRemove="handleTreeRemove"
|
||||
@treeClick="handleTreeClick"
|
||||
></laws-tree>
|
||||
</div>
|
||||
<div class="b-right">
|
||||
<ul class="b-right-top">
|
||||
<li>
|
||||
<span>中文名称:</span>
|
||||
<p>{{ standName }}</p>
|
||||
</li>
|
||||
<li>
|
||||
<span>英文名称:</span>
|
||||
<p>{{ standENName }}</p>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="b-right-bottom">
|
||||
<div class="no-data" v-if="onlyOfficeUrl === ''">请选择标准</div>
|
||||
<iframe id="onlyOffice" :src="onlyOfficeUrl" frameborder="0" v-else></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ooe-footer">
|
||||
<el-button size="mini" @click="handleClose">取 消</el-button>
|
||||
<el-button type="primary" size="mini" @click="handleSave">保 存</el-button>
|
||||
</div>
|
||||
<loading :loading="loading.loadOffice">正在加载文件</loading>
|
||||
<loading :loading="loading.saving">正在保存</loading>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-dialog
|
||||
title="新增节点"
|
||||
:visible.sync="dialogVisible"
|
||||
append-to-body
|
||||
:close-on-click-modal="false"
|
||||
@close="handleDialogClose"
|
||||
width="350px">
|
||||
<el-form ref="itemsNodeForm" :model="itemsNode" :rules="itemsNodeRules">
|
||||
<el-form-item label="中文名称" prop="standName">
|
||||
<el-input v-model="itemsNode.standName" max-length="100" placeholder="请输入中文名称" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="英文名称" prop="standENName">
|
||||
<el-input v-model="itemsNode.standENName" max-length="1000" placeholder="请输入英文名称" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="handleDialogClose">取 消</el-button>
|
||||
<el-button type="primary" size="mini" @click="handleDialogConfirm">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
officeInit,
|
||||
getChapter,
|
||||
generateStandFile
|
||||
} from 'api/onlyOffice'
|
||||
export default {
|
||||
name: 'onlyOfficeEdit',
|
||||
mixins: [],
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
components: {},
|
||||
data () {
|
||||
return {
|
||||
standName: '--',
|
||||
standENName: '--',
|
||||
currentNodeId: '',
|
||||
zNodes: [
|
||||
{
|
||||
id: 'root',
|
||||
name: '总目录',
|
||||
pId: null,
|
||||
isParent: true
|
||||
},
|
||||
{
|
||||
id: '1',
|
||||
name: '前言',
|
||||
pId: 'root',
|
||||
isParent: false,
|
||||
icon: require('@/assets/images/shangqi/img/file.png')
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: '范围',
|
||||
pId: 'root',
|
||||
isParent: false,
|
||||
icon: require('@/assets/images/shangqi/img/file.png'),
|
||||
chapter: 1
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: '规范性引用文件',
|
||||
pId: 'root',
|
||||
isParent: false,
|
||||
icon: require('@/assets/images/shangqi/img/file.png'),
|
||||
chapter: 2
|
||||
}
|
||||
],
|
||||
dialogVisible: false,
|
||||
itemsNode: {
|
||||
pId: '',
|
||||
pNodeName: '',
|
||||
id: '',
|
||||
standName: '',
|
||||
standENName: ''
|
||||
},
|
||||
itemsNodeRules: {
|
||||
pNodeName: [
|
||||
{ required: true, message: '父节点不能为空', trigger: 'blur' }
|
||||
],
|
||||
standName: [
|
||||
{ required: true, message: '条款号不能为空', trigger: 'blur' }
|
||||
],
|
||||
standENName: [
|
||||
{ required: true, message: '条款名称不能为空', trigger: 'blur' }
|
||||
]
|
||||
},
|
||||
onlyOfficeUrl: '',
|
||||
loading: {
|
||||
loadOffice: false,
|
||||
saving: false
|
||||
},
|
||||
officeInitData: {
|
||||
// 规范性引用文件
|
||||
normative: '',
|
||||
// 前言
|
||||
preface: '',
|
||||
// 范围
|
||||
range: ''
|
||||
},
|
||||
// 企标编号
|
||||
standNo: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClose() {
|
||||
this.$confirm('请确认是否保存在线编辑文件？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
confirmButtonClass: 'common-button-primary',
|
||||
roundButton: true,
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
// 先执行保存再退出在线编辑
|
||||
this.handleSave()
|
||||
}).catch(() => {
|
||||
this.onlyOfficeUrl = ''
|
||||
this.standName = ''
|
||||
this.standENName = ''
|
||||
this.$emit('update:visible', false)
|
||||
})
|
||||
},
|
||||
|
||||
handleTreeAdd(treeId, treeNode) {
|
||||
const chapter = treeNode.chapter ? `${treeNode.chapter}.${treeNode.children ? treeNode.children.length : 1}` : `${treeNode.children ? treeNode.children.length : 1}`
|
||||
this.itemsNode = {
|
||||
pId: treeNode.id,
|
||||
pNodeName: treeNode.oldname || treeNode.name,
|
||||
id: `node-${new Date().getTime()}`,
|
||||
standName: '',
|
||||
standENName: '',
|
||||
chapter
|
||||
}
|
||||
setTimeout(() => {
|
||||
this.dialogVisible = true
|
||||
}, 100)
|
||||
},
|
||||
|
||||
handleTreeEdit(treeId, treeNode) {},
|
||||
|
||||
handleTreeRemove(treeId, treeNode) {
|
||||
this.$confirm('您是否确定删除该节点?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.$refs['onlyOfficeTree'].removeNode(treeNode)
|
||||
if (this.currentNodeId === treeNode.id) {
|
||||
this.itemsNode = {
|
||||
pId: '',
|
||||
pNodeName: '',
|
||||
standName: '',
|
||||
standENName: '',
|
||||
chapter: ''
|
||||
}
|
||||
this.currentNodeId = ''
|
||||
this.onlyOfficeUrl = ''
|
||||
}
|
||||
}).catch(() => {})
|
||||
},
|
||||
|
||||
handleDialogClose() {
|
||||
this.$refs['itemsNodeForm'].clearValidate()
|
||||
setTimeout(() => {
|
||||
this.dialogVisible = false
|
||||
this.itemsNode = {
|
||||
pId: '',
|
||||
pNodeName: '',
|
||||
standName: '',
|
||||
standENName: '',
|
||||
chapter: ''
|
||||
}
|
||||
this.onlyOfficeUrl = ''
|
||||
}, 100)
|
||||
},
|
||||
|
||||
handleDialogConfirm() {
|
||||
this.$refs['itemsNodeForm'].validate(valid => {
|
||||
if (valid) {
|
||||
this.$refs['onlyOfficeTree'].addNode({
|
||||
id: this.itemsNode.id,
|
||||
name: `${this.itemsNode.chapter} ${this.itemsNode.standName}`,
|
||||
pId: this.itemsNode.pId,
|
||||
standName: this.itemsNode.standName,
|
||||
standENName: this.itemsNode.standENName,
|
||||
chapter: this.itemsNode.chapter,
|
||||
icon: require('@/assets/images/shangqi/img/file.png')
|
||||
})
|
||||
setTimeout(() => {
|
||||
this.$message.success('添加成功')
|
||||
this.handleDialogClose()
|
||||
}, 100)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* @description: 保存
|
||||
* @date: 2021-01-26 23:19:54
|
||||
* @auth: chenxiaoxi
|
||||
*/
|
||||
handleSave() {
|
||||
this.loading.saving = true
|
||||
let allNode = this.$refs['onlyOfficeTree'].transformToArray()
|
||||
allNode.splice(0, 4)
|
||||
const chapterList = []
|
||||
allNode.map(item => {
|
||||
chapterList.push({
|
||||
id: item.id,
|
||||
pId: item.pId,
|
||||
chapter: item.chapter,
|
||||
standENName: item.standENName,
|
||||
standName: item.standName
|
||||
})
|
||||
})
|
||||
generateStandFile({
|
||||
chapterList,
|
||||
standCode: this.standNo
|
||||
}).then(res => {
|
||||
this.loading.saving = false
|
||||
if (res.ok) {
|
||||
this.$message.success('保存成功')
|
||||
setTimeout(() => {
|
||||
this.onlyOfficeUrl = ''
|
||||
this.standName = ''
|
||||
this.standENName = ''
|
||||
this.$emit('update:visible', false)
|
||||
}, 1000)
|
||||
} else {
|
||||
this.$message.warning(res.message)
|
||||
}
|
||||
}).catch(e => {
|
||||
this.loading.saving = false
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* @description: 条款点击
|
||||
* @date: 2021-01-10 16:34:10
|
||||
* @auth: chenxiaoxi
|
||||
*/
|
||||
handleTreeClick(treeId, treeNode) {
|
||||
if (treeNode.children && treeNode.id !== 'root') {
|
||||
this.$message.warning('请对子节点进行编辑')
|
||||
return false
|
||||
}
|
||||
this.standName = treeNode.standName
|
||||
this.standENName = treeNode.standENName
|
||||
this.currentNodeId = treeNode.id
|
||||
let fileName = ''
|
||||
switch (treeNode.id) {
|
||||
case '1':
|
||||
const prefaceURL = this.officeInitData.preface
|
||||
fileName = prefaceURL.split('/')
|
||||
fileName = fileName[fileName.length - 1]
|
||||
this.onlyOfficeUrl = `/static/onlyOffice/editor.html?fileName=${fileName}&fileUrl=${prefaceURL}&fileType=docx&standNo=${this.standNo}&key=${treeNode.id}${new Date().getTime()}`
|
||||
break
|
||||
case '2':
|
||||
const rangeURL = this.officeInitData.range
|
||||
fileName = rangeURL.split('/')
|
||||
fileName = fileName[fileName.length - 1]
|
||||
this.onlyOfficeUrl = `/static/onlyOffice/editor.html?fileName=${fileName}&fileUrl=${rangeURL}&fileType=docx&standNo=${this.standNo}&key=${treeNode.id}${new Date().getTime()}`
|
||||
break
|
||||
case '3':
|
||||
const normativeURL = this.officeInitData.normative
|
||||
fileName = normativeURL.split('/')
|
||||
fileName = fileName[fileName.length - 1]
|
||||
this.onlyOfficeUrl = `/static/onlyOffice/editor.html?fileName=${fileName}&fileUrl=${normativeURL}&fileType=docx&standNo=${this.standNo}&key=${treeNode.id}${new Date().getTime()}`
|
||||
break
|
||||
default:
|
||||
this.getChapter(treeNode.chapter)
|
||||
.then(fileURL => {
|
||||
fileName = fileURL.split('/')
|
||||
fileName = fileName[fileName.length - 1]
|
||||
this.onlyOfficeUrl = `/static/onlyOffice/editor.html?fileName=${fileName}&fileUrl=${fileURL}&fileType=docx&standNo=${this.standNo}&key=${treeNode.id}${new Date().getTime()}`
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* @description: 加载章节
|
||||
* @date: 2021-01-27 02:02:12
|
||||
* @auth: chenxiaoxi
|
||||
*/
|
||||
getChapter(chapter) {
|
||||
return new Promise((resolve, reject) => {
|
||||
getChapter({
|
||||
standNo: this.standNo,
|
||||
chapter
|
||||
}).then(res => {
|
||||
if (res.ok) {
|
||||
resolve(res.data)
|
||||
} else {
|
||||
this.$message.warning(res.message)
|
||||
}
|
||||
}).catch(e => {})
|
||||
})
|
||||
},
|
||||
|
||||
// 获取企标对应文件 如果企标文件不存在则直接传空字符串或为null即可
|
||||
getBusStandFileByAttId (fileId) {
|
||||
this.$http.get('att/attFile/getBusStandFileByAttId', {
|
||||
attId: fileId
|
||||
}, {
|
||||
_this: this
|
||||
}, res => {
|
||||
if (res.ok) {
|
||||
const editFileInfo = res.data
|
||||
// 此处将返回的ATT对象追加到标准文本的集合中
|
||||
if (fileId !== null && fileId === '') {
|
||||
const { id } = editFileInfo
|
||||
if (this.prcForm['standFile']) {
|
||||
this.prcForm['standFile'] += id + ','
|
||||
} else {
|
||||
this.prcForm['standFile'] = id + ','
|
||||
}
|
||||
}
|
||||
const nowTime = new Date().getTime()
|
||||
|
||||
this.onlyOfficeUrl = '/static/onlyOffice/editor.html?fileName=' + editFileInfo.oldFileName + '&fileType=' + editFileInfo.fileSuffix + '&attId=' + editFileInfo.id + '&fileUrl=' + editFileInfo.downLoadUrl + '&key=' + editFileInfo.id + nowTime
|
||||
} else {
|
||||
this.$message.error(res.message)
|
||||
}
|
||||
}, e => {}
|
||||
)
|
||||
},
|
||||
|
||||
/**
|
||||
* @description: office初始化
|
||||
* @date: 2021-01-26 21:14:54
|
||||
* @auth: chenxiaoxi
|
||||
*/
|
||||
officeInit(standNo) {
|
||||
this.standNo = standNo
|
||||
this.loading.loadOffice = true
|
||||
officeInit({
|
||||
standNo
|
||||
}).then(res => {
|
||||
this.loading.loadOffice = false
|
||||
if (res.ok) {
|
||||
this.officeInitData = { ...res.data }
|
||||
} else {
|
||||
this.$message.warning(res.message)
|
||||
}
|
||||
}).catch(e => {
|
||||
this.loading.loadOffice = false
|
||||
})
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
watch: {},
|
||||
mounted () {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.fade-enter {
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
.fade-enter-active {
|
||||
transition: all .2s;
|
||||
}
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
.fade-leave-active {
|
||||
transition: opacity .2s;
|
||||
}
|
||||
.t-wrap {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #333;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 9999;
|
||||
.only-office-edit {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #f5f5f5;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.ooe-header {
|
||||
border-bottom: 1px solid #e8eaec;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
font-size: 16px;
|
||||
padding: 0 10px;
|
||||
position: relative;
|
||||
background: #fff;
|
||||
.close-btn {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 10px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
color: #999;
|
||||
margin-top: -10px;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
&:hover {
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ooe-wrap {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.ooe-body {
|
||||
flex: auto;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
position: relative;
|
||||
.b-left {
|
||||
width: 299px;
|
||||
//height: 100%;
|
||||
border-right: 1px solid #ddd;
|
||||
margin-right: 10px;
|
||||
background: #fff;
|
||||
}
|
||||
.b-right {
|
||||
width: calc(~'100% - 299px');
|
||||
//height: 100%;
|
||||
border-left: 1px solid #ddd;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 10px 10px;
|
||||
background: #fff;
|
||||
.b-right-top {
|
||||
li {
|
||||
display: flex;
|
||||
span {
|
||||
color: #999;
|
||||
margin-right: 5px;
|
||||
}
|
||||
p {
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
.b-right-bottom {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
border: 1px solid #ddd;
|
||||
display: flex;
|
||||
.no-data {
|
||||
background: #eee;
|
||||
width: 100%;
|
||||
//height: 100%;
|
||||
flex: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #c1c1c1;
|
||||
}
|
||||
#onlyOffice {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ooe-footer {
|
||||
height: 50px;
|
||||
border: 1px solid #e8eaec;
|
||||
text-align: right;
|
||||
background: #fff;
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
.laws-tree {
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
.loading-box {
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user