[update] 修改企标和内部工作组左侧树样式,企标新增增加稽查内容部分

This commit is contained in:
lideqin
2023-09-22 15:12:37 +08:00
parent 89573aef30
commit 6ca2e31211
4 changed files with 75 additions and 39 deletions
@@ -26,21 +26,21 @@
</template> </template>
<span class="tree-node-custom-title">{{ record.title }}</span> <span class="tree-node-custom-title">{{ record.title }}</span>
</a-tooltip> </a-tooltip>
<div class="tree-operate-node-btn-box" :class="{'tree-operate-node-btn-box-hide': record.key !== mouseInNodeKey}"> <div class="tree-operate-node-btn-box" :class="{'tree-operate-node-btn-box-hide': record.key !== mouseInNodeKey || record.key === 'myCollect'}">
<!-- 新增--> <!-- 新增 -->
<a-button icon="plus" class="tree-operate-node-btn" v-has="'enterpriseStandard:tree:add'" <a-button icon="plus" class="tree-operate-node-btn" v-has="'enterpriseStandard:tree:add'"
@click="handleTreeAdd(record)"></a-button> @click="handleTreeAdd(record)"></a-button>
<!-- 编辑--> <!-- 编辑 -->
<a-button v-if="record.nodeType !== StandardSystemTreeNodeType.ROOT_NODE.value" <a-button v-if="record.nodeType !== StandardSystemTreeNodeType.ROOT_NODE.value"
v-has="'enterpriseStandard:tree:edit'" v-has="'enterpriseStandard:tree:edit'"
class="tree-operate-node-btn" @click="handleTreeEdit(record)"> class="tree-operate-node-btn" @click="handleTreeEdit(record)">
<i class="iconfont icon-bianji" style="color: #D52C26"></i> <i class="iconfont icon-bianji"></i>
</a-button> </a-button>
<!-- 删除--> <!-- 删除 -->
<a-button v-if="record.nodeType !== StandardSystemTreeNodeType.ROOT_NODE.value" <a-button v-if="record.nodeType !== StandardSystemTreeNodeType.ROOT_NODE.value"
v-has="'enterpriseStandard:tree:delete'" v-has="'enterpriseStandard:tree:delete'"
class="tree-operate-node-btn" @click="handleTreeDelete(record.id)"> class="tree-operate-node-btn" @click="handleTreeDelete(record.id)">
<i class="iconfont icon-shanchu_" style="color: #D52C26"></i> <i class="iconfont icon-shanchu_"></i>
</a-button> </a-button>
</div> </div>
</div> </div>
@@ -11,7 +11,7 @@
<div class="content"> <div class="content">
<!-- 左侧文件预览 --> <!-- 左侧文件预览 -->
<div class="content-left"> <div class="content-left">
<iframe></iframe> <iframe :src="iframeSrc" width="100%" frameborder="0"></iframe>
</div> </div>
<!-- 右侧表单区域 --> <!-- 右侧表单区域 -->
<div class="content-right"> <div class="content-right">
@@ -37,6 +37,8 @@
<script> <script>
import pick from 'lodash.pick' import pick from 'lodash.pick'
import { getFileInfo } from '@/api/api'
import { previewPdf } from '@/utils/previewPdf'
export default { export default {
name: 'CheckContentModal', name: 'CheckContentModal',
@@ -69,15 +71,22 @@ export default {
validateTrigger: 'blur' validateTrigger: 'blur'
} }
}, },
index: undefined // 编辑的表格的下标 index: undefined, // 编辑的表格的下标
iframeSrc: '' // 左侧预览的路径
} }
}, },
methods: { methods: {
add () { add (publishOriginal) {
this.getFileInfo(publishOriginal).then(res => {
this.handlePreview(res)
})
this.visible = true this.visible = true
this.form.resetFields() this.form.resetFields()
}, },
edit (record, index) { edit (publishOriginal, record, index) {
this.getFileInfo(publishOriginal).then(res => {
this.handlePreview(res)
})
this.visible = true this.visible = true
this.index = index this.index = index
this.form.resetFields() this.form.resetFields()
@@ -86,6 +95,23 @@ export default {
this.form.setFieldsValue(pick(this.model, 'subjectToClause', 'standardContentOrRequirements')) this.form.setFieldsValue(pick(this.model, 'subjectToClause', 'standardContentOrRequirements'))
}) })
}, },
getFileInfo (fileId) {
return new Promise(resolve => {
let fileInfo
getFileInfo({ id: fileId }).then(res => {
if (res.success) {
fileInfo = res.result
}
}).finally(() => {
resolve(fileInfo)
})
})
},
handlePreview (file) {
// pdf预览
const url = previewPdf(file.id)
this.iframeSrc = url
},
close () { close () {
this.visible = false this.visible = false
this.model = {} this.model = {}
@@ -119,6 +145,9 @@ export default {
width: 60%; width: 60%;
height: 100%; height: 100%;
overflow-y: scroll; overflow-y: scroll;
iframe {
height: calc(100% - 20px) !important;
}
} }
.content-right { .content-right {
width: 40%; width: 40%;
@@ -129,14 +129,23 @@ export default {
}, },
// 稽查内容的添加 // 稽查内容的添加
handleAdd () { handleAdd () {
const value = this.$refs.addForm.formInline
let publishOriginal = ''
if (value.publish_of_original) {
publishOriginal = value.publish_of_original
}
this.$refs.checkContentModal.title = this.$t('newlyAdded') this.$refs.checkContentModal.title = this.$t('newlyAdded')
this.$refs.checkContentModal.add() this.$refs.checkContentModal.add(publishOriginal)
}, },
// 稽查内容的编辑 // 稽查内容的编辑
handleEdit (record, index) { handleEdit (record, index) {
console.log(record, index) const value = this.$refs.addForm.formInline
let publishOriginal = ''
if (value.publish_of_original) {
publishOriginal = value.publish_of_original
}
this.$refs.checkContentModal.title = this.$t('edit') this.$refs.checkContentModal.title = this.$t('edit')
this.$refs.checkContentModal.edit(record, index) this.$refs.checkContentModal.edit(publishOriginal, record, index)
}, },
// 稽查内容的删除 // 稽查内容的删除
handleDelete (index) { handleDelete (index) {
@@ -165,7 +174,9 @@ export default {
} else { } else {
url = this.url.add url = this.url.add
} }
postAction(url, formInline).then((res) => { const param = Object.assign({}, formInline)
param.checkList = this.dataSource
postAction(url, param).then((res) => {
if (res.success) { if (res.success) {
this.$message.success(this.$t('operationSuccessful')) this.$message.success(this.$t('operationSuccessful'))
this.$emit('ok') this.$emit('ok')
@@ -15,43 +15,41 @@
:replaceFields="{children: 'subset', title: 'name', key: 'id'}" :replaceFields="{children: 'subset', title: 'name', key: 'id'}"
:default-expand-all="defaultExpandAll" :default-expand-all="defaultExpandAll"
@select="treeSelect"> @select="treeSelect">
<a-icon type="folder" slot="folder" class="tree-icon" />
<a-icon type="file" slot="file" class="tree-icon" />
<!-- 没有删除 --> <!-- 没有删除 -->
<template #customNoDelete="{name, id}"> <template #customNoDelete="record">
<div class="tree-operate-node" @mouseenter="handleTreeMouseover(id)" @mouseleave="handleTreeMouseout(id)"> <div class="tree-operate-node" @mouseenter="handleTreeMouseover(record.id)" @mouseleave="handleTreeMouseout(record.id)">
<a-icon class="parent-node-icon" type="folder" v-if="record.subset && record.subset.length > 0" />
<a-tooltip> <a-tooltip>
<template #title> <template #title>
{{ name }} {{ record.name }}
</template> </template>
<span class="tree-node-custom-title">{{ name }}</span> <span class="tree-node-custom-title">{{ record.name }}</span>
</a-tooltip> </a-tooltip>
<div class="tree-operate-node-btn-box" :class="{'tree-operate-node-btn-box-hide': id !== mouseInNodeKey}"> <div class="tree-operate-node-btn-box" :class="{'tree-operate-node-btn-box-hide': record.id !== mouseInNodeKey}">
<!-- 新增--> <!-- 新增-->
<a-button icon="plus" class="tree-operate-node-btn" @click="handleTreeAdd" v-has="'sys:innerWorkingGroup:tree:add'"></a-button> <a-button icon="plus" class="tree-operate-node-btn" @click="handleTreeAdd" v-has="'sys:innerWorkingGroup:tree:add'"></a-button>
<!-- 编辑--> <!-- 编辑-->
<a-button class="tree-operate-node-btn" @click="handleTreeEdit(name)" v-has="'sys:innerWorkingGroup:tree:edit'"> <a-button class="tree-operate-node-btn" @click="handleTreeEdit(record.name)" v-has="'sys:innerWorkingGroup:tree:edit'">
<i class="iconfont icon-bianji" style="color: #D52C26"></i> <i class="iconfont icon-bianji" style="color: #D52C26"></i>
</a-button> </a-button>
</div> </div>
</div> </div>
</template> </template>
<template #custom="{name, id}"> <template #custom="record">
<div class="tree-operate-node" @mouseenter="handleTreeMouseover(id)" @mouseleave="handleTreeMouseout(id)"> <div class="tree-operate-node" @mouseenter="handleTreeMouseover(record.id)" @mouseleave="handleTreeMouseout(record.id)">
<a-icon class="parent-node-icon" type="folder" v-if="record.subset && record.subset.length > 0" />
<a-tooltip> <a-tooltip>
<template #title> <template #title>
{{ name }} {{ record.name }}
</template> </template>
<span class="tree-node-custom-title">{{ name }}</span> <span class="tree-node-custom-title">{{ record.name }}</span>
</a-tooltip> </a-tooltip>
<div class="tree-operate-node-btn-box" :class="{'tree-operate-node-btn-box-hide': id !== mouseInNodeKey}"> <div class="tree-operate-node-btn-box" :class="{'tree-operate-node-btn-box-hide': record.id !== mouseInNodeKey}">
<!-- 新增--> <!-- 新增-->
<a-button icon="plus" class="tree-operate-node-btn" @click="handleTreeAdd" v-has="'sys:innerWorkingGroup:tree:add'"></a-button> <a-button icon="plus" class="tree-operate-node-btn" @click="handleTreeAdd" v-has="'sys:innerWorkingGroup:tree:add'"></a-button>
<!-- 编辑--> <!-- 编辑-->
<a-button class="tree-operate-node-btn" @click="handleTreeEdit(name)" v-has="'sys:innerWorkingGroup:tree:edit'"> <a-button class="tree-operate-node-btn" @click="handleTreeEdit(record.name)" v-has="'sys:innerWorkingGroup:tree:edit'">
<i class="iconfont icon-bianji" style="color: #D52C26"></i> <i class="iconfont icon-bianji" style="color: #D52C26"></i>
</a-button> </a-button>
<!-- 删除--> <!-- 删除-->
@@ -235,6 +233,7 @@ export default {
getWorkGroupTreeList(params).then(res => { getWorkGroupTreeList(params).then(res => {
if (res.success) { if (res.success) {
this.treeData = this.dealTreeData(res.result) this.treeData = this.dealTreeData(res.result)
this.treeData[0].scopedSlots = { title: 'customNoDelete' }
} else { } else {
this.treeData = [] this.treeData = []
} }
@@ -249,12 +248,8 @@ export default {
dealTreeData (treeData) { dealTreeData (treeData) {
return treeData.map(item => { return treeData.map(item => {
if (item.subset && item.subset.length > 0) { if (item.subset && item.subset.length > 0) {
item.scopedSlots = { icon: 'folder', title: 'custom' } item.scopedSlots = { title: 'custom' }
item.subset = this.dealTreeData(item.subset) item.subset = this.dealTreeData(item.subset)
} else if (item.level === 1) {
item.scopedSlots = { icon: 'folder', title: 'customNoDelete' }
} else {
item.scopedSlots = { icon: 'file', title: 'custom' }
} }
return item return item
}) })
@@ -393,12 +388,13 @@ export default {
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
/deep/ .ant-tree li span.ant-tree-switcher.ant-tree-switcher-noop {
.tree-icon {
color: #1D2129; color: #1D2129;
} }
/deep/ .ant-tree li span.ant-tree-switcher.ant-tree-switcher-noop { .parent-node-icon {
display: none; color: #1D2129;
font-size: 16px;
margin-right: 10px;
} }
</style> </style>