Merge branch 'hi-ucs-dev' of http://192.168.124.50:3000/wuhongjian/hi-ucs into hi-ucs-dev

This commit is contained in:
851673013@qq.com 2022-08-03 14:28:16 +08:00
commit a07d621206
18 changed files with 2359 additions and 1866 deletions

View File

@ -154,7 +154,7 @@
>详情</el-button >详情</el-button
> >
<el-button type="text" size="small" @click="showDocument(scope.row)" <el-button type="text" size="small" @click="showDocument(scope.row)"
>开发文档</el-button >技术文档</el-button
> >
<el-button <el-button
type="text" type="text"

View File

@ -149,7 +149,7 @@
>详情</el-button >详情</el-button
> >
<el-button type="text" size="small" @click="showDocument(scope.row)" <el-button type="text" size="small" @click="showDocument(scope.row)"
>开发文档</el-button >技术文档</el-button
> >
<el-button <el-button
type="text" type="text"

View File

@ -64,25 +64,55 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
<!-- 流程综合组件 --> <!-- 流程综合组件 -->
<ren-process-multiple <!-- <ren-process-multiple
v-if="processVisible" v-if="processVisible"
updateInstanceIdUrl="/processForm/tabilityapplication/updateInstanceId" updateInstanceIdUrl="/processForm/tabilityapplication/updateInstanceId"
saveFormUrl="/processForm/tabilityapplication" saveFormUrl="/processForm/tabilityapplication"
dataFormName="dataForm" dataFormName="dataForm"
ref="renProcessMultiple" ref="renProcessMultiple"
></ren-process-multiple> ></ren-process-multiple> -->
<!-- 审批 -->
<div class="agreeOr" v-if="taskId">
<div>
<el-button type="primary" @click="showDialog('同意')">同意</el-button>
<el-button type="danger" plain @click="showDialog('拒绝')"
>驳回</el-button
>
</div>
</div>
<!-- 审批弹窗 -->
<el-dialog
title="审批意见"
:close-on-click-modal="false"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose"
>
<el-input v-model="input" placeholder="请输入审批意见"></el-input>
<span slot="footer" class="dialog-footer">
<el-button @click="handleClose2"> </el-button>
<el-button
type="primary"
@click.native="agreeOrNot($store.state.contentTabsActiveName)"
> </el-button
>
</span>
</el-dialog>
</el-card> </el-card>
</template> </template>
<script> <script>
// //
import processModule from '@/mixins/process-module' import processModule from '@/mixins/process-module'
import qs from 'qs'
import debounce from 'lodash/debounce'
import bus from '@/views/bus.js'
export default { export default {
// //
mixins: [processModule], mixins: [processModule],
data () { data () {
return { return {
visible: false, // visible: false,
// //
fieldDisabled: false, fieldDisabled: false,
dataForm: { dataForm: {
@ -94,7 +124,13 @@ export default {
system: '', system: '',
scene: '', scene: '',
basis: '' basis: ''
} },
//
dialogVisible: false,
dialogType: '',
input: '',
visible: true,
taskId: ''
} }
}, },
created () { created () {
@ -113,6 +149,8 @@ export default {
} }
// //
this.initProcessMultiple(callbacks) this.initProcessMultiple(callbacks)
this.taskId = this.$route.params.taskId
this.dataForm.taskId = this.$route.params.taskId
}, },
computed: { computed: {
dataRule () { dataRule () {
@ -164,6 +202,128 @@ export default {
}) })
.catch(() => {}) .catch(() => {})
}, },
//
showDialog (title) {
this.dialogVisible = true
this.dialogType = title
},
handleClose (done) {
this.$confirm('确认关闭?')
.then((_) => {
this.input = ''
done()
})
.catch((_) => {})
},
handleClose2 () {
this.dialogVisible = false
this.input = ''
},
// 退
agreeOrNot: debounce(
function (data) {
this.dataForm.taskId = this.$route.params.taskId
if (this.dialogType === '同意') {
if (this.input !== '') {
console.log('this.dataForm', this.dataForm)
const params = qs.stringify({
taskId: this.dataForm.taskId,
comment: this.input
})
console.log(params)
this.$http
.post('/act/task/complete?' + params)
.then(({ data: res }) => {
if (res.code !== 0) {
this.$message.error(res.msg)
if (this.callbacks.taskHandleErrorCallback) {
this.callbacks.taskHandleErrorCallback(res)
}
return
}
bus.$emit('AbilityResourcesRemovedInit')
this.$message({
message: this.$t('prompt.success'),
type: 'success',
duration: 500,
onClose: () => {
this.visible = false
this.dialogVisible = false
if (this.callbacks.taskHandleSuccessCallback) {
this.callbacks.taskHandleSuccessCallback(res)
}
}
})
})
.catch(() => {})
this.tabRemoveHandle(data)
} else {
this.$message.error('请输入审批意见!')
}
} else if (this.dialogType === '拒绝') {
if (this.input !== '') {
const params = qs.stringify({
taskId: this.dataForm.taskId,
comment: this.input
})
this.$http
.post('/act/task/backToFirst?', params)
.then(({ data: res }) => {
if (res.code !== 0) {
this.$message.error(res.msg)
if (this.callbacks.taskHandleErrorCallback) {
this.callbacks.taskHandleErrorCallback(res)
}
return
}
bus.$emit('AbilityResourcesRemovedInit')
this.$message({
message: this.$t('prompt.success'),
type: 'success',
duration: 500,
onClose: () => {
this.visible = false
if (this.callbacks.taskHandleSuccessCallback) {
this.callbacks.taskHandleSuccessCallback(res)
}
}
})
})
this.tabRemoveHandle(data)
} else {
this.$message.error('请输入审批意见!')
}
}
},
1000,
{ leading: true, trailing: false }
),
tabRemoveHandle (tabName) {
console.log(tabName, 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa')
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) {
const tab =
this.$store.state.contentTabs[
this.$store.state.contentTabs.length - 1
]
this.$router.push({
name: /^iframe_.+/.test(tab.name) ? 'iframe' : tab.name,
params: { ...tab.params },
query: { ...tab.query }
})
}
},
// //
startProcessErrorCallback (data) { startProcessErrorCallback (data) {
console.log(data) console.log(data)
@ -173,3 +333,12 @@ export default {
} }
} }
</script> </script>
<style lang="scss">
.agreeOr {
& > div {
// text-align: right;
padding-right: 40px;
margin: 20px 0;
}
}
</style>

View File

@ -23,18 +23,49 @@
</el-form> </el-form>
</div> </div>
<!-- 流程综合组件 --> <!-- 流程综合组件 -->
<ren-process-multiple <!-- <ren-process-multiple
v-if="processVisible" v-if="processVisible"
updateInstanceIdUrl="/processForm/tabilityapplication/updateInstanceId" updateInstanceIdUrl="/processForm/tabilityapplication/updateInstanceId"
saveFormUrl="/processForm/tabilityapplication" saveFormUrl="/processForm/tabilityapplication"
dataFormName="dataForm" dataFormName="dataForm"
ref="renProcessMultiple" ref="renProcessMultiple"
></ren-process-multiple> ></ren-process-multiple> -->
<!-- 审批 -->
<div class="agreeOr" v-if="taskId">
<div>
<el-button type="primary" @click="showDialog('同意')">同意</el-button>
<el-button type="danger" plain @click="showDialog('拒绝')"
>驳回</el-button
>
</div>
</div>
<!-- 审批弹窗 -->
<el-dialog
title="审批意见"
:close-on-click-modal="false"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose"
>
<el-input v-model="input" placeholder="请输入审批意见"></el-input>
<span slot="footer" class="dialog-footer">
<el-button @click="handleClose2"> </el-button>
<el-button
type="primary"
@click.native="agreeOrNot($store.state.contentTabsActiveName)"
> </el-button
>
</span>
</el-dialog>
</div> </div>
</template> </template>
<script> <script>
import processModule from '@/mixins/process-module' import processModule from '@/mixins/process-module'
import qs from 'qs'
import debounce from 'lodash/debounce'
import bus from '@/views/bus.js'
export default { export default {
// //
mixins: [processModule], mixins: [processModule],
@ -50,12 +81,19 @@ export default {
data () { data () {
return { return {
// processVisible: true, // processVisible: true,
visible: false, // visible: false,
// //
fieldDisabled: false, fieldDisabled: false,
dataForm: [], dataForm: [],
id: '', id: '',
shifoushizujian: true shifoushizujian: true,
//
dialogVisible: false,
dialogType: '',
input: '',
visible: true,
taskId: ''
} }
}, },
watch: {}, watch: {},
@ -91,6 +129,128 @@ export default {
// } // }
console.log('this.dataForm', this.dataForm) console.log('this.dataForm', this.dataForm)
}) })
},
//
showDialog (title) {
this.dialogVisible = true
this.dialogType = title
},
handleClose (done) {
this.$confirm('确认关闭?')
.then((_) => {
this.input = ''
done()
})
.catch((_) => {})
},
handleClose2 () {
this.dialogVisible = false
this.input = ''
},
// 退
agreeOrNot: debounce(
function (data) {
this.dataForm.taskId = this.$route.params.taskId
if (this.dialogType === '同意') {
if (this.input !== '') {
console.log('this.dataForm', this.dataForm)
const params = qs.stringify({
taskId: this.dataForm.taskId,
comment: this.input
})
console.log(params)
this.$http
.post('/act/task/complete?' + params)
.then(({ data: res }) => {
if (res.code !== 0) {
this.$message.error(res.msg)
if (this.callbacks.taskHandleErrorCallback) {
this.callbacks.taskHandleErrorCallback(res)
}
return
}
bus.$emit('AbilityResourcesRemovedInit')
this.$message({
message: this.$t('prompt.success'),
type: 'success',
duration: 500,
onClose: () => {
this.visible = false
this.dialogVisible = false
if (this.callbacks.taskHandleSuccessCallback) {
this.callbacks.taskHandleSuccessCallback(res)
}
}
})
})
.catch(() => {})
this.tabRemoveHandle(data)
} else {
this.$message.error('请输入审批意见!')
}
} else if (this.dialogType === '拒绝') {
if (this.input !== '') {
const params = qs.stringify({
taskId: this.dataForm.taskId,
comment: this.input
})
this.$http
.post('/act/task/backToFirst?', params)
.then(({ data: res }) => {
if (res.code !== 0) {
this.$message.error(res.msg)
if (this.callbacks.taskHandleErrorCallback) {
this.callbacks.taskHandleErrorCallback(res)
}
return
}
bus.$emit('AbilityResourcesRemovedInit')
this.$message({
message: this.$t('prompt.success'),
type: 'success',
duration: 500,
onClose: () => {
this.visible = false
if (this.callbacks.taskHandleSuccessCallback) {
this.callbacks.taskHandleSuccessCallback(res)
}
}
})
})
this.tabRemoveHandle(data)
} else {
this.$message.error('请输入审批意见!')
}
}
},
1000,
{ leading: true, trailing: false }
),
tabRemoveHandle (tabName) {
console.log(tabName, 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa')
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) {
const tab =
this.$store.state.contentTabs[
this.$store.state.contentTabs.length - 1
]
this.$router.push({
name: /^iframe_.+/.test(tab.name) ? 'iframe' : tab.name,
params: { ...tab.params },
query: { ...tab.query }
})
}
} }
}, },
created () { created () {
@ -108,10 +268,24 @@ export default {
} }
// //
this.initProcessMultiple(callbacks) this.initProcessMultiple(callbacks)
this.taskId = this.$route.params.taskId
this.dataForm.taskId = this.$route.params.taskId
}, },
mounted () {} mounted () {}
} }
</script> </script>
<style lang="scss" >
.kuandukuandukuandu {
max-width: 1500px;
}
.agreeOr {
& > div {
// text-align: right;
padding-right: 40px;
margin: 20px 0;
}
}
</style>
<style lang="scss" scoped> <style lang="scss" scoped>
::v-deep .el-textarea__inner { ::v-deep .el-textarea__inner {
height: 100px; height: 100px;

View File

@ -106,7 +106,7 @@
</el-radio-group> --> </el-radio-group> -->
<el-button type="primary" @click="showDialog('同意')">同意</el-button> <el-button type="primary" @click="showDialog('同意')">同意</el-button>
<el-button type="danger" plain @click="showDialog('拒绝')" <el-button type="danger" plain @click="showDialog('拒绝')"
>拒绝</el-button >驳回</el-button
> >
<!-- <el-input v-if="agreeOrList ==='同意' " v-model="inputAgree" placeholder="请输入同意意见"></el-input> <!-- <el-input v-if="agreeOrList ==='同意' " v-model="inputAgree" placeholder="请输入同意意见"></el-input>
<el-input v-if="agreeOrList ==='退回'" v-model="inputNo" placeholder="请输入退回意见"></el-input> <el-input v-if="agreeOrList ==='退回'" v-model="inputNo" placeholder="请输入退回意见"></el-input>
@ -229,68 +229,76 @@ export default {
function (data) { function (data) {
this.dataForm.taskId = this.$route.params.taskId this.dataForm.taskId = this.$route.params.taskId
if (this.dialogType === '同意') { if (this.dialogType === '同意') {
console.log('this.dataForm', this.dataForm) if (this.input !== '') {
const params = qs.stringify({ console.log('this.dataForm', this.dataForm)
taskId: this.dataForm.taskId, const params = qs.stringify({
comment: this.input taskId: this.dataForm.taskId,
}) comment: this.input
console.log(params)
this.$http
.post('/act/task/complete?' + params)
.then(({ data: res }) => {
if (res.code !== 0) {
this.$message.error(res.msg)
if (this.callbacks.taskHandleErrorCallback) {
this.callbacks.taskHandleErrorCallback(res)
}
return
}
bus.$emit('AbilityResourcesRemovedInit')
this.$message({
message: this.$t('prompt.success'),
type: 'success',
duration: 500,
onClose: () => {
this.visible = false
this.dialogVisible = false
if (this.callbacks.taskHandleSuccessCallback) {
this.callbacks.taskHandleSuccessCallback(res)
}
}
})
}) })
.catch(() => {}) console.log(params)
this.$http
.post('/act/task/complete?' + params)
.then(({ data: res }) => {
if (res.code !== 0) {
this.$message.error(res.msg)
if (this.callbacks.taskHandleErrorCallback) {
this.callbacks.taskHandleErrorCallback(res)
}
return
}
bus.$emit('AbilityResourcesRemovedInit')
this.$message({
message: this.$t('prompt.success'),
type: 'success',
duration: 500,
onClose: () => {
this.visible = false
this.dialogVisible = false
if (this.callbacks.taskHandleSuccessCallback) {
this.callbacks.taskHandleSuccessCallback(res)
}
}
})
})
.catch(() => {})
this.tabRemoveHandle(data)
} else {
this.$message.error('请输入审批意见!')
}
} else if (this.dialogType === '拒绝') { } else if (this.dialogType === '拒绝') {
const params = qs.stringify({ if (this.input !== '') {
taskId: this.dataForm.taskId, const params = qs.stringify({
comment: this.input taskId: this.dataForm.taskId,
}) comment: this.input
this.$http
.post('/act/task/backToFirst?', params)
.then(({ data: res }) => {
if (res.code !== 0) {
this.$message.error(res.msg)
if (this.callbacks.taskHandleErrorCallback) {
this.callbacks.taskHandleErrorCallback(res)
}
return
}
bus.$emit('AbilityResourcesRemovedInit')
this.$message({
message: this.$t('prompt.success'),
type: 'success',
duration: 500,
onClose: () => {
this.visible = false
if (this.callbacks.taskHandleSuccessCallback) {
this.callbacks.taskHandleSuccessCallback(res)
}
}
})
}) })
this.$http
.post('/act/task/backToFirst?', params)
.then(({ data: res }) => {
if (res.code !== 0) {
this.$message.error(res.msg)
if (this.callbacks.taskHandleErrorCallback) {
this.callbacks.taskHandleErrorCallback(res)
}
return
}
bus.$emit('AbilityResourcesRemovedInit')
this.$message({
message: this.$t('prompt.success'),
type: 'success',
duration: 500,
onClose: () => {
this.visible = false
if (this.callbacks.taskHandleSuccessCallback) {
this.callbacks.taskHandleSuccessCallback(res)
}
}
})
})
this.tabRemoveHandle(data)
} else {
this.$message.error('请输入审批意见!')
}
} }
this.tabRemoveHandle(data)
// this.getDataList(data)
}, },
1000, 1000,
{ leading: true, trailing: false } { leading: true, trailing: false }

View File

@ -200,69 +200,78 @@ export default {
agreeOrNot: debounce( agreeOrNot: debounce(
function (data) { function (data) {
if (this.dialogType === '同意') { if (this.dialogType === '同意') {
console.log('this.dataForm', this.dataForm) if (this.input !== '') {
const params = qs.stringify({ console.log('this.dataForm', this.dataForm)
taskId: this.taskId, const params = qs.stringify({
comment: this.input taskId: this.taskId,
}) comment: this.input
console.log(params)
this.$http
.post('/act/task/complete?' + params)
.then(({ data: res }) => {
if (res.code !== 0) {
this.$message.error(res.msg)
if (this.callbacks.taskHandleErrorCallback) {
this.callbacks.taskHandleErrorCallback(res)
}
return
}
bus.$emit('abilityResourceShelfInit')
this.$message({
message: this.$t('prompt.success'),
type: 'success',
duration: 500,
onClose: () => {
this.visible = false
this.dialogVisible = false
this.input = ''
if (this.callbacks.taskHandleSuccessCallback) {
this.callbacks.taskHandleSuccessCallback(res)
}
}
})
}) })
.catch(() => {}) console.log(params)
this.$http
.post('/act/task/complete?' + params)
.then(({ data: res }) => {
if (res.code !== 0) {
this.$message.error(res.msg)
if (this.callbacks.taskHandleErrorCallback) {
this.callbacks.taskHandleErrorCallback(res)
}
return
}
bus.$emit('abilityResourceShelfInit')
this.$message({
message: this.$t('prompt.success'),
type: 'success',
duration: 500,
onClose: () => {
this.visible = false
this.dialogVisible = false
this.input = ''
if (this.callbacks.taskHandleSuccessCallback) {
this.callbacks.taskHandleSuccessCallback(res)
}
}
})
})
.catch(() => {})
this.tabRemoveHandle(data)
} else {
this.$message.error('请输入审批意见!')
}
} else if (this.dialogType === '驳回') { } else if (this.dialogType === '驳回') {
const params = qs.stringify({ if (this.input !== '') {
taskId: this.taskId, const params = qs.stringify({
comment: this.input taskId: this.taskId,
}) comment: this.input
this.$http
// .post('/act/task/endProcess?', params)
.post('/act/task/backToFirst?', params)
.then(({ data: res }) => {
if (res.code !== 0) {
this.$message.error(res.msg)
if (this.callbacks.taskHandleErrorCallback) {
this.callbacks.taskHandleErrorCallback(res)
}
return
}
bus.$emit('abilityResourceShelfInit')
this.$message({
message: this.$t('prompt.success'),
type: 'success',
duration: 500,
onClose: () => {
this.visible = false
if (this.callbacks.taskHandleSuccessCallback) {
this.callbacks.taskHandleSuccessCallback(res)
}
}
})
}) })
this.$http
// .post('/act/task/endProcess?', params)
.post('/act/task/backToFirst?', params)
.then(({ data: res }) => {
if (res.code !== 0) {
this.$message.error(res.msg)
if (this.callbacks.taskHandleErrorCallback) {
this.callbacks.taskHandleErrorCallback(res)
}
return
}
bus.$emit('abilityResourceShelfInit')
this.$message({
message: this.$t('prompt.success'),
type: 'success',
duration: 500,
onClose: () => {
this.visible = false
if (this.callbacks.taskHandleSuccessCallback) {
this.callbacks.taskHandleSuccessCallback(res)
}
}
})
})
this.tabRemoveHandle(data)
} else {
this.$message.error('请输入审批意见!')
}
} }
this.tabRemoveHandle(data)
}, },
1000, 1000,
{ leading: true, trailing: false } { leading: true, trailing: false }

View File

@ -380,68 +380,76 @@ export default {
agreeOrNot: debounce( agreeOrNot: debounce(
function (data) { function (data) {
if (this.dialogType === '同意') { if (this.dialogType === '同意') {
console.log('this.dataForm', this.dataForm) if (this.input !== '') {
const params = qs.stringify({ console.log('this.dataForm', this.dataForm)
taskId: this.dataForm.taskId, const params = qs.stringify({
comment: this.input taskId: this.dataForm.taskId,
}) comment: this.input
console.log(params)
this.$http
.post('/act/task/complete?' + params)
.then(({ data: res }) => {
if (res.code !== 0) {
this.$message.error(res.msg)
if (this.callbacks.taskHandleErrorCallback) {
this.callbacks.taskHandleErrorCallback(res)
}
return
}
bus.$emit('competencyApplicationInit')
this.$message({
message: this.$t('prompt.success'),
type: 'success',
duration: 500,
onClose: () => {
this.visible = false
this.dialogVisible = false
if (this.callbacks.taskHandleSuccessCallback) {
this.callbacks.taskHandleSuccessCallback(res)
}
}
})
}) })
.catch(() => {}) console.log(params)
this.$http
.post('/act/task/complete?' + params)
.then(({ data: res }) => {
if (res.code !== 0) {
this.$message.error(res.msg)
if (this.callbacks.taskHandleErrorCallback) {
this.callbacks.taskHandleErrorCallback(res)
}
return
}
bus.$emit('competencyApplicationInit')
this.$message({
message: this.$t('prompt.success'),
type: 'success',
duration: 500,
onClose: () => {
this.visible = false
this.dialogVisible = false
if (this.callbacks.taskHandleSuccessCallback) {
this.callbacks.taskHandleSuccessCallback(res)
}
}
})
})
.catch(() => {})
this.tabRemoveHandle(data)
} else {
this.$message.error('请输入审批意见!')
}
} else if (this.dialogType === '驳回') { } else if (this.dialogType === '驳回') {
const params = qs.stringify({ if (this.input !== '') {
taskId: this.dataForm.taskId, const params = qs.stringify({
comment: this.input taskId: this.dataForm.taskId,
}) comment: this.input
this.$http
.post('/act/task/backToFirst?', params)
.then(({ data: res }) => {
if (res.code !== 0) {
this.$message.error(res.msg)
if (this.callbacks.taskHandleErrorCallback) {
this.callbacks.taskHandleErrorCallback(res)
}
return
}
bus.$emit('competencyApplicationInit')
this.$message({
message: this.$t('prompt.success'),
type: 'success',
duration: 500,
onClose: () => {
this.visible = false
if (this.callbacks.taskHandleSuccessCallback) {
this.callbacks.taskHandleSuccessCallback(res)
}
}
})
}) })
this.$http
.post('/act/task/backToFirst?', params)
.then(({ data: res }) => {
if (res.code !== 0) {
this.$message.error(res.msg)
if (this.callbacks.taskHandleErrorCallback) {
this.callbacks.taskHandleErrorCallback(res)
}
return
}
bus.$emit('competencyApplicationInit')
this.$message({
message: this.$t('prompt.success'),
type: 'success',
duration: 500,
onClose: () => {
this.visible = false
if (this.callbacks.taskHandleSuccessCallback) {
this.callbacks.taskHandleSuccessCallback(res)
}
}
})
})
this.tabRemoveHandle(data)
} else {
this.$message.error('请输入审批意见!')
}
} }
this.tabRemoveHandle(data)
// this.getDataList(data)
}, },
1000, 1000,
{ leading: true, trailing: false } { leading: true, trailing: false }

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

@ -299,7 +299,7 @@
if (res.data.code == '0') { if (res.data.code == '0') {
demandCommentApply({ id: res.data.data.id }).then((res1) => { demandCommentApply({ id: res.data.data.id }).then((res1) => {
if (res1.data.code == '0') { if (res1.data.code == '0') {
message.success('提交评成功,请注意查看消息通知!') message.success('提交评成功,请注意查看消息通知!')
myComment.value = '' myComment.value = ''
evaluateList() evaluateList()
} }

File diff suppressed because it is too large Load Diff

View File

@ -1,159 +1,147 @@
<template> <template>
<div class="list-box"> <div class="list-box">
<div <div class="list-item" v-for="(item, i) in newDataList" :key="i" @click.stop="showChildren(item)">
class="list-item"
v-for="(item, i) in newDataList"
:key="i"
@click.stop="showChildren(item)"
>
<a-tooltip placement="top" :title="item.title" arrow-point-at-center> <a-tooltip placement="top" :title="item.title" arrow-point-at-center>
<div <div :class="[
:class="[ newClickData.title === item.title ? 'select' : '',
newClickData.title === item.title ? 'select' : '', level === 1 ? 'parent' : '',
level === 1 ? 'parent' : '', judgeLeaf(item) ? 'leaf' : '',
judgeLeaf(item) ? 'leaf' : '', ]" class="list-text">
]"
class="list-text"
>
{{ item.title }} {{ item.title }}
<DownOutlined v-show="!item.show && !judgeLeaf(item)" /> <DownOutlined v-show="!item.show && !judgeLeaf(item)" />
<UpOutlined v-show="item.show && !judgeLeaf(item)" /> <UpOutlined v-show="item.show && !judgeLeaf(item)" />
</div> </div>
</a-tooltip> </a-tooltip>
<div style="margin-left: 10px" v-if="!judgeLeaf(item) && item.show"> <div style="margin-left: 10px" v-if="!judgeLeaf(item) && item.show">
<abilityDocTree <abilityDocTree :dataList="item.children" @tree-click="handleTreeItem" :clickData="newClickData"
:dataList="item.children" :level="newLevel + 1"></abilityDocTree>
@tree-click="handleTreeItem"
:clickData="newClickData"
:level="newLevel + 1"
></abilityDocTree>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { import {
defineComponent, defineComponent,
onMounted, onMounted,
ref, ref,
watch, watch,
defineProps, defineProps,
nextTick, nextTick,
} from 'vue' } from 'vue'
import { getDevelopDocTree } from '@/api/home' import { getDevelopDocTree } from '@/api/home'
import { message } from 'ant-design-vue' import { message } from 'ant-design-vue'
import { UpOutlined, DownOutlined } from '@ant-design/icons-vue' import { UpOutlined, DownOutlined } from '@ant-design/icons-vue'
const props = defineProps({ const props = defineProps({
dataList: { dataList: {
type: Array, type: Array,
default: () => [], default: () => [],
},
level: {
type: Number,
default: 1,
},
clickData: {
type: Object,
default: () => {
''
}, },
level: { },
type: Number, })
default: 1,
},
clickData: {
type: Object,
default: () => {
''
},
},
})
// //
const newDataList = ref(props.dataList) const newDataList = ref(props.dataList)
// //
const newLevel = ref(props.level) const newLevel = ref(props.level)
const newClickData = ref(props.clickData) const newClickData = ref(props.clickData)
// //
const judgeLeaf = (item) => { const judgeLeaf = (item) => {
if (item.children && item.children.length > 0) { if (item.children && item.children.length > 0) {
return false return false
} else {
return true
}
}
const showChildren = (item) => {
if (!(item.children && item.children.length > 0)) {
if (newClickData.value.title !== '') {
handleTreeItem(item)
} else { } else {
return true handleTreeItem({ title: '' })
} }
} }
if (item.children && item.children.length > 0) {
item.show = !item.show
}
}
const showChildren = (item) => { watch(
if (!(item.children && item.children.length > 0)) { () => props.dataList,
if (newClickData.value.title !== '') { (val) => {
handleTreeItem(item) if (val) {
} else { newDataList.value = val
handleTreeItem({ title: '' })
}
}
if (item.children && item.children.length > 0) {
item.show = !item.show
} }
} }
)
watch( watch(
() => props.dataList, () => props.clickData,
(val) => { (val) => {
if (val) { if (val) {
newDataList.value = val newClickData.value = val
}
} }
)
watch(
() => props.clickData,
(val) => {
if (val) {
newClickData.value = val
}
}
)
const emit = defineEmits(['treeClick'])
const handleTreeItem = (item) => {
emit('tree-click', item)
} }
)
const emit = defineEmits(['treeClick'])
const handleTreeItem = (item) => {
emit('tree-click', item)
}
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.list-text { .list-text {
font-size: 16px; font-size: 16px;
color: #333; color: #333;
padding: 10px 0; padding: 10px 0;
cursor: pointer; cursor: pointer;
padding-left: 10px; padding-left: 10px;
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
overflow: hidden; overflow: hidden;
/*文本不会换行*/ /*文本不会换行*/
white-space: nowrap; white-space: nowrap;
/*当文本溢出包含元素时,以省略号表示超出的文本*/ /*当文本溢出包含元素时,以省略号表示超出的文本*/
text-overflow: ellipsis; text-overflow: ellipsis;
&:hover { &:hover {
color: #0058e1;
cursor: pointer;
}
}
.parent {
margin-bottom: 10px;
background: rgba(0, 135, 225, 0.1);
color: #333;
&:hover {
color: #fff;
background: #0058e1;
cursor: pointer;
}
}
.leaf {
font-size: 14px;
color: #555;
cursor: pointer;
}
.select {
color: #0058e1; color: #0058e1;
font-weight: 600;
cursor: pointer; cursor: pointer;
} }
}
.parent {
margin-bottom: 10px;
background: rgba(0, 135, 225, 0.1);
color: #333;
&:hover {
color: #fff;
background: #0058e1;
cursor: pointer;
}
}
.leaf {
font-size: 14px;
color: #555;
cursor: pointer;
}
.select {
color: #0058e1;
font-weight: 600;
cursor: pointer;
}
</style> </style>

View File

@ -1,54 +1,46 @@
<template> <template>
<div class="menu-box"> <div class="menu-box">
<div class="content-box"> <div class="content-box">
<!-- 提供服务 --> <!-- 提供服务 -->
<div class="img-bg service-box"> <div class="img-bg service-box">
<div class="title" style="margin-bottom: 20px"> <div class="title" style="margin-bottom: 20px">
<div class="text text-white">提供服务</div> <div class="text text-white">提供服务</div>
<div class="line line-white"></div> <div class="line line-white"></div>
</div> </div>
<div class="list-box"> <div class="list-box">
<div class="list-item" v-for="(item, i) in seviceList" :key="i"> <div class="list-item" v-for="(item, i) in seviceList" :key="i">
<div class="item-name"> <div class="item-name">
<img :src="item.img" /> <img :src="item.img" />
{{ item.name }} {{ item.name }}
</div>
<div class="name-box">
<div class="item-v" v-for="(v, j) in item.list" :key="j" :style="{
'background-image': `url(${item.imgBG || ''})`,
width: `${item.width || ''}`,
}">
{{ v }}
</div>
</div>
</div>
</div>
</div> </div>
<div class="name-box"> <!-- 总体流程 -->
<div <TheOverallProcess></TheOverallProcess>
class="item-v" <!-- imgList -->
v-for="(v, j) in item.list" <div class="img-box" v-for="(item, i) in imgList" :key="i">
:key="j" <div class="title">
:style="{ <div class="text">{{ item.name }}</div>
'background-image': `url(${item.imgBG || ''})`, <div class="line"></div>
width: `${item.width || ''}`, </div>
}" <div class="img-bg" :class="item.className" :style="{ 'background-image': `url(${item.bgImg || ''})` }">
> </div>
{{ v }} <div v-if="item.btnText" class="btn" @click="toWhere(item.name)">
</div> {{ item.btnText }} >>
</div>
</div> </div>
</div> <!-- 联系我们 -->
</div> <div class="img-bg callus-box">
</div> <!-- <div class="title" style="margin-bottom: 20px">
<!-- 总体流程 -->
<TheOverallProcess></TheOverallProcess>
<!-- imgList -->
<div class="img-box" v-for="(item, i) in imgList" :key="i">
<div class="title">
<div class="text">{{ item.name }}</div>
<div class="line"></div>
</div>
<div
class="img-bg"
:class="item.className"
:style="{ 'background-image': `url(${item.bgImg || ''})` }"
></div>
<div v-if="item.btnText" class="btn" @click="toWhere(item.name)">
{{ item.btnText }} >>
</div>
</div>
<!-- 联系我们 -->
<div class="img-bg callus-box">
<!-- <div class="title" style="margin-bottom: 20px">
<div class="text text-white">联系我们</div> <div class="text text-white">联系我们</div>
<div class="line line-white"></div> <div class="line line-white"></div>
</div> </div>
@ -62,233 +54,205 @@
<span>0530-0000000</span> <span>0530-0000000</span>
</p> </p>
</div> --> </div> -->
</div>
<!-- 能力上架弹窗 -->
<a-modal
v-model:visible="visible"
@ok="handleOk"
class="shangjia-class"
@cancel="handlecancel"
>
<div class="ant-modal-title" id="vcDialogTitle1">
<div class="showBg"></div>
能力上架申请
</div>
<div class="ability-to-type">
<div class="title">能力类型选择</div>
<div class="ability-to-type-content">
<div
v-for="item in abilityToType"
:key="item"
@click="abilityToTypeFunction(item)"
:class="
abilityToTypeFunctionData == item ? 'ability-to-type-down' : ''
"
>
{{ item }}
</div> </div>
</div> <!-- 能力上架弹窗 -->
<a-modal v-model:visible="visible" @ok="handleOk" class="shangjia-class" @cancel="handlecancel">
<div class="ant-modal-title" id="vcDialogTitle1">
<div class="showBg"></div>
能力上架申请
</div>
<div class="ability-to-type">
<div class="title">能力类型选择</div>
<div class="ability-to-type-content">
<div v-for="item in abilityToType" :key="item" @click="abilityToTypeFunction(item)" :class="
abilityToTypeFunctionData == item ? 'ability-to-type-down' : ''
">
{{ item }}
</div>
</div>
</div>
<div class="component-type" v-if="abilityToTypeFunctionData == '组件服务'">
<div class="title">组件类型选择</div>
<div class="component-type-content">
<a-radio-group v-model:value="componentTypeValue">
<a-radio @click="componentTypeValueFunction(item)" v-for="item in componentType" :key="item"
:value="item">
{{ item }}
</a-radio>
</a-radio-group>
</div>
</div>
</a-modal>
</div> </div>
<div
class="component-type"
v-if="abilityToTypeFunctionData == '组件服务'"
>
<div class="title">组件类型选择</div>
<div class="component-type-content">
<!-- <a-checkbox-group
v-model:value="value1"
name="checkboxgroup"
:options="componentType"
/> -->
<a-radio-group v-model:value="componentTypeValue">
<a-radio
@click="componentTypeValueFunction(item)"
v-for="item in componentType"
:key="item"
:value="item"
>
{{ item }}
</a-radio>
</a-radio-group>
</div>
</div>
</a-modal>
</div> </div>
</div>
</template> </template>
<script setup> <script setup>
import HomeHeader from '@/views/home/components/header' import HomeHeader from '@/views/home/components/header'
import HomeFooter from '@/views/newHome/components/Footer' import HomeFooter from '@/views/newHome/components/Footer'
import { ref, onMounted, watch } from 'vue' import { ref, onMounted, watch } from 'vue'
import TheOverallProcess from './TheOverallProcess.vue' import TheOverallProcess from './TheOverallProcess.vue'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue' import { message } from 'ant-design-vue'
const router = useRouter()
const router = useRouter() const seviceList = ref([
const seviceList = ref([
{ {
name: '组件服务', name: '组件服务',
img: require('@/assets/menu/service-component.png'), img: require('@/assets/menu/service-component.png'),
list: ['智能算法', '图层服务', '开发组件', '业务组件'], list: ['智能算法', '图层服务', '开发组件', '业务组件'],
imgBG: require('../../../assets/menu/imgBG.png'), imgBG: require('../../../assets/menu/imgBG.png'),
width: '124px', width: '124px',
}, },
{ {
name: '应用资源', name: '应用资源',
img: require('@/assets/menu/service-application.png'), img: require('@/assets/menu/service-application.png'),
list: [ list: [
'办公系统', '办公系统',
'业务系统', '业务系统',
'门户网站', '门户网站',
'大屏看板', '大屏看板',
'小程序', '小程序',
'公众号', '公众号',
], ],
imgBG: require('../../../assets/menu/imgBG.png'), imgBG: require('../../../assets/menu/imgBG.png'),
width: '124px', width: '124px',
}, },
{ {
name: '基础设施', name: '基础设施',
img: require('@/assets/menu/service-infrastructure.png'), img: require('@/assets/menu/service-infrastructure.png'),
list: ['视频资源', '云资源', '感知资源'],
list: ['视频资源', '云资源', '感知资源'], imgBG: require('../../../assets/menu/imgBG.png'),
imgBG: require('../../../assets/menu/imgBG.png'), width: '124px',
width: '124px',
}, },
{ {
name: '数据资源', name: '数据资源',
img: require('@/assets/menu/service-data.png'), img: require('@/assets/menu/service-data.png'),
list: ['政务信息资源'],
list: ['政务信息资源'], imgBG: require('../../../assets/menu/imgBG-long.png'),
imgBG: require('../../../assets/menu/imgBG-long.png'), width: '200px',
width: '200px',
}, },
]) ])
const imgList = ref([
const imgList = ref([
{ {
name: '能力上架', name: '能力上架',
bgImg: require('../../../assets/menu/shelves.png'), bgImg: require('../../../assets/menu/shelves.png'),
btnText: '立即上架', btnText: '立即上架',
className: 'shelves-img', className: 'shelves-img',
}, },
{ {
name: '能力申请', name: '能力申请',
bgImg: require('../../../assets/menu/apply.png'), bgImg: require('../../../assets/menu/apply.png'),
btnText: '立即申请', btnText: '立即申请',
className: 'apply-img', className: 'apply-img',
}, },
{ {
name: '需求发布', name: '需求发布',
bgImg: require('../../../assets/menu/demand.png'), bgImg: require('../../../assets/menu/demand.png'),
btnText: '立即发布', btnText: '立即发布',
className: 'demand-img', className: 'demand-img',
}, },
{ {
name: '资源下架', name: '资源下架',
bgImg: require('../../../assets/menu/down.png'), bgImg: require('../../../assets/menu/down.png'),
btnText: '立即下架', btnText: '立即下架',
className: 'down-img', className: 'down-img',
}, },
]) ])
// //
function handlecancel() { function handlecancel() {
abilityToTypeFunctionData.value = '组件服务' abilityToTypeFunctionData.value = '组件服务'
componentTypeValue.value = '' componentTypeValue.value = ''
} }
let abilityToTypeFunctionData = ref('组件服务') let abilityToTypeFunctionData = ref('组件服务')
function abilityToTypeFunction(item) { function abilityToTypeFunction(item) {
abilityToTypeFunctionData.value = item abilityToTypeFunctionData.value = item
} }
let abilityToType = ref(['组件服务', '应用资源']) let abilityToType = ref(['组件服务', '应用资源'])
let componentType = ref([ let componentType = ref([
'智能算法', '智能算法',
'图层服务', '图层服务',
'开发组件', '开发组件',
// '', // '',
'业务组件', '业务组件',
// '', // '',
]) ])
const visible = ref(false) const visible = ref(false)
let componentTypeValueOld = ref('') let componentTypeValueOld = ref('')
function componentTypeValueFunction(item) { function componentTypeValueFunction(item) {
if (componentTypeValueOld.value != item) { if (componentTypeValueOld.value != item) {
componentTypeValue.value = item componentTypeValue.value = item
componentTypeValueOld.value = item componentTypeValueOld.value = item
} else { } else {
componentTypeValue.value = '' componentTypeValue.value = ''
} }
} }
let componentTypeValue = ref('') let componentTypeValue = ref('')
const handleOk = (e) => { const handleOk = (e) => {
let snum = ref({}) let snum = ref({})
if (abilityToTypeFunctionData.value == '组件服务') { if (abilityToTypeFunctionData.value == '组件服务') {
if (!componentTypeValue.value || componentTypeValue.value == '') { if (!componentTypeValue.value || componentTypeValue.value == '') {
message.error('请选择组件类型!') message.error('请选择组件类型!')
return return
} else if ( } else if (
componentTypeValue.value === '智能算法' || componentTypeValue.value === '智能算法' ||
componentTypeValue.value === '开发组件' || componentTypeValue.value === '开发组件' ||
componentTypeValue.value === '业务组件' || componentTypeValue.value === '业务组件' ||
componentTypeValue.value === '图层服务' componentTypeValue.value === '图层服务'
) { ) {
snum.value = { snum.value = {
abilityToType: abilityToTypeFunctionData.value, abilityToType: abilityToTypeFunctionData.value,
componentTypeValue: componentTypeValue.value, componentTypeValue: componentTypeValue.value,
}
} else {
message.error('功能开发中!')
return
} }
} else {
message.error('功能开发中!')
return
}
} else { } else {
snum.value = { snum.value = {
abilityToType: abilityToTypeFunctionData.value, abilityToType: abilityToTypeFunctionData.value,
} }
} }
const applypage = router.resolve({ const applypage = router.resolve({
path: '/nenglishangjia', // path: '/nenglishangjia', //
query: snum.value, query: snum.value,
}) })
window.open(applypage.href, '_blank') window.open(applypage.href, '_blank')
visible.value = false visible.value = false
abilityToTypeFunctionData.value = '组件服务' abilityToTypeFunctionData.value = '组件服务'
componentTypeValue.value = '' componentTypeValue.value = ''
console.log(e) console.log(e)
} }
//
// const toWhere = (data) => {
const toWhere = (data) => {
console.log(data, 'wwwwwww') console.log(data, 'wwwwwww')
if (data === '能力上架') { if (data === '能力上架') {
visible.value = true visible.value = true
} else if (data === '能力申请') { } else if (data === '能力申请') {
const newpage = router.resolve({ const newpage = router.resolve({
path: '/addApplication', // path: '/addApplication', //
}) })
window.open(newpage.href, '_blank') window.open(newpage.href, '_blank')
} else if (data === '需求发布') { } else if (data === '需求发布') {
const newpage = router.resolve({ const newpage = router.resolve({
path: '/DetailsPageconetent', path: '/DetailsPageconetent',
query: { query: {
select: '组件服务', select: '组件服务',
}, },
}) })
window.location.href = newpage.href window.location.href = newpage.href
} else if (data === '资源下架') { } else if (data === '资源下架') {
window.sessionStorage.setItem('type', JSON.stringify('PurchaseVehicle')) window.sessionStorage.setItem('type', JSON.stringify('PurchaseVehicle'))
const newpage = router.resolve({ const newpage = router.resolve({
path: '/personalCenter', path: '/personalCenter',
}) })
window.location.href = newpage.href window.location.href = newpage.href
} }
} }
watch(abilityToTypeFunctionData, () => { watch(abilityToTypeFunctionData, () => {
componentTypeValue.value = '' componentTypeValue.value = ''
}) })
</script> </script>
<style lang="less"> <style lang="less">
.shangjia-class { .shangjia-class {
position: fixed; position: fixed;
left: 50%; left: 50%;
top: 50%; top: 50%;
@ -298,130 +262,138 @@
font-weight: 500; font-weight: 500;
.ant-radio-inner { .ant-radio-inner {
height: 0.16rem; height: 0.16rem;
width: 0.16rem; width: 0.16rem;
} }
.ant-radio-inner::after { .ant-radio-inner::after {
background-color: unset; background-color: unset;
background: url('~@/assets/personalCenter/xuanzhong.png') no-repeat; background: url('~@/assets/personalCenter/xuanzhong.png') no-repeat;
background-size: cover; background-size: cover;
background-position: center; background-position: center;
} }
.ant-modal-content { .ant-modal-content {
border-radius: 0.1rem; border-radius: 0.1rem;
.ability-to-type,
.component-type {
display: flex;
margin-top: 0.2rem;
.title {
white-space: nowrap;
margin-right: 0.2rem;
display: flex;
align-items: center;
height: 0.26rem;
}
.component-type-content {
width: 100%;
height: unset;
border: unset;
background: unset;
.ant-radio-group {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 0.15rem;
}
}
}
.ability-to-type { .ability-to-type,
.ability-to-type-content { .component-type {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
height: unset;
border: unset;
background: unset;
div {
margin-right: 0.15rem;
cursor: pointer;
font-size: 0.14rem;
width: 0.9rem;
height: 0.26rem;
border-radius: 0.13rem;
color: #333333;
background: #f5f5f5;
border: 0.01rem #cccccc solid;
display: flex; display: flex;
justify-content: center; margin-top: 0.2rem;
align-items: center;
font-weight: 500;
}
.ability-to-type-down { .title {
background: #0087ff; white-space: nowrap;
color: #fff; margin-right: 0.2rem;
} display: flex;
align-items: center;
height: 0.26rem;
}
.component-type-content {
width: 100%;
height: unset;
border: unset;
background: unset;
.ant-radio-group {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 0.15rem;
}
}
}
.ability-to-type {
.ability-to-type-content {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
height: unset;
border: unset;
background: unset;
div {
margin-right: 0.15rem;
cursor: pointer;
font-size: 0.14rem;
width: 0.9rem;
height: 0.26rem;
border-radius: 0.13rem;
color: #333333;
background: #f5f5f5;
border: 0.01rem #cccccc solid;
display: flex;
justify-content: center;
align-items: center;
font-weight: 500;
}
.ability-to-type-down {
background: #0087ff;
color: #fff;
}
}
} }
}
} }
.ant-modal-title { .ant-modal-title {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.ant-modal-footer { .ant-modal-footer {
border: 0; border: 0;
text-align: center; text-align: center;
padding-bottom: 0.2rem; padding-bottom: 0.2rem;
button {
margin-right: 0.2rem; button {
border-radius: 0.08rem; margin-right: 0.2rem;
} border-radius: 0.08rem;
}
} }
.showBg { .showBg {
height: 0.24rem; height: 0.24rem;
width: 0.24rem; width: 0.24rem;
background: url('~@/assets/home/shenqing.png') no-repeat; background: url('~@/assets/home/shenqing.png') no-repeat;
background-size: cover; background-size: cover;
background-position: center; background-position: center;
margin-right: 0.1rem; margin-right: 0.1rem;
} }
} }
</style> </style>
<style lang="less" scoped> <style lang="less" scoped>
.menu-box { .menu-box {
width: 1920px; width: 1920px;
// padding-bottom: 40px; // padding-bottom: 40px;
} }
.title { .title {
margin-bottom: 20px; margin-bottom: 20px;
.text { .text {
padding: 20px 0; padding: 20px 0;
font-size: 26px; font-size: 26px;
margin: 0 auto; margin: 0 auto;
text-align: center; text-align: center;
} }
.line { .line {
width: 50px; width: 50px;
height: 3px; height: 3px;
background: #0058e1; background: #0058e1;
margin: 0 auto; margin: 0 auto;
} }
.line-white { .line-white {
background: #fff; background: #fff;
} }
.text-white { .text-white {
color: #fff; color: #fff;
} }
} }
.btn { .btn {
width: 150px; width: 150px;
height: 50px; height: 50px;
line-height: 50px; line-height: 50px;
@ -434,128 +406,135 @@
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background: #e5eefc; background: #e5eefc;
} }
} }
.img-box { .img-box {
margin-bottom: 50px; margin-bottom: 50px;
} }
.service-box { .service-box {
width: 1920px; width: 1920px;
height: 613px; height: 613px;
background-size: 100% 100%; background-size: 100% 100%;
background-image: url('../../../assets/menu/service.png'); background-image: url('../../../assets/menu/service.png');
.list-box { .list-box {
width: 1560px; width: 1560px;
height: 350px; height: 350px;
margin: 0 auto; margin: 0 auto;
} }
} }
.callus-box {
.callus-box {
width: 1920px; width: 1920px;
height: 214px; height: 214px;
background-size: 100% 100%; background-size: 100% 100%;
background-image: url('../../../assets/menu/callus.png'); background-image: url('../../../assets/menu/callus.png');
.list-box {
width: 1560px;
// height: 350px;
margin: 0 auto;
p {
font-size: 24px;
color: #ffffff;
font-weight: bold;
span {
font-size: 30px;
}
}
p:nth-child(1) {
margin-right: 100px;
}
}
}
.img-bg { .list-box {
width: 1560px;
// height: 350px;
margin: 0 auto;
p {
font-size: 24px;
color: #ffffff;
font-weight: bold;
span {
font-size: 30px;
}
}
p:nth-child(1) {
margin-right: 100px;
}
}
}
.img-bg {
width: 1920px; width: 1920px;
background-size: 100% 100%; background-size: 100% 100%;
} }
.process-img { .process-img {
height: 855px; height: 855px;
background-image: url('../../../assets/menu/process.png'); background-image: url('../../../assets/menu/process.png');
} }
.shelves-img { .shelves-img {
height: 497px; height: 497px;
width: 1107px; width: 1107px;
margin: 0 auto; margin: 0 auto;
background-image: url('../../../assets/menu/shelves.png'); background-image: url('../../../assets/menu/shelves.png');
} }
.apply-img { .apply-img {
height: 752px; height: 752px;
background-image: url('../../../assets/menu/apply.png'); background-image: url('../../../assets/menu/apply.png');
} }
.demand-img { .demand-img {
height: 525px; height: 525px;
width: 1300px; width: 1300px;
margin: 0 auto; margin: 0 auto;
background-image: url('../../../assets/menu/demand.png'); background-image: url('../../../assets/menu/demand.png');
} }
.down-img { .down-img {
height: 544px; height: 544px;
background-image: url('../../../assets/menu/down.png'); background-image: url('../../../assets/menu/down.png');
} }
.list-box { .list-box {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
.list-item { .list-item {
padding: 10px 20px; padding: 10px 20px;
width: 310px; width: 310px;
height: 356px; height: 356px;
background: rgba(23, 85, 177, 0.43); background: rgba(23, 85, 177, 0.43);
border: 1px solid #74a9f8; border: 1px solid #74a9f8;
border-radius: 10px; border-radius: 10px;
margin: 0 10px; margin: 0 10px;
cursor: pointer; cursor: pointer;
.item-name { .item-name {
color: #fff; color: #fff;
font-size: 20px; font-size: 20px;
text-align: center; text-align: center;
padding: 20px 0 10px 0; padding: 20px 0 10px 0;
} }
.name-box { .name-box {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
flex-wrap: wrap; flex-wrap: wrap;
} }
.item-v { .item-v {
width: 124px; width: 124px;
height: 74px; height: 74px;
line-height: 74px; line-height: 74px;
color: #fff; color: #fff;
font-size: 20px; font-size: 20px;
text-align: center; text-align: center;
margin: 0 0 20px; margin: 0 0 20px;
background-size: 100% 100%; background-size: 100% 100%;
} }
.item-v:nth-child(2n) {
margin-left: 16px; .item-v:nth-child(2n) {
} margin-left: 16px;
// .item-v:last-child { }
// width: 200px;
// } // .item-v:last-child {
// width: 200px;
// }
} }
} }
</style> </style>

View File

@ -1,275 +1,288 @@
<template> <template>
<home-header></home-header> <home-header></home-header>
<div class="menu-container"> <div class="menu-container">
<div class="menu-box"> <div id="container" class="content-menu">
<div id="container" class="content-menu"> <div class="left">
<div class="left"> <div class="first-title-text doc" :style="{ color: '技术文档' === titleData.name ? '#0058e1' : '' }"
<div @click="changeName({ name: '技术文档' })">
class="first-title-text" 技术文档
v-for="(data, i) in titleList"
:key="i"
@click="changeName(data)"
:style="{ color: data.name === titleData.name ? '#0058e1' : '' }"
>
<div class="img" :class="data.className"></div>
{{ data.name }}
</div>
<abilityDocTree
:dataList="treeArray"
@treeClick="treeClick"
:clickData="clickData"
></abilityDocTree>
</div> </div>
<!-- 技术文档 --> <abilityDocTree style="max-height:400px;overflow-y:auto" :dataList="treeArray" @treeClick="treeClick"
<div class="right" v-if="titleData.name !== '新手指引'"> :clickData="clickData"></abilityDocTree>
<div style="height: 100%"> </div>
<iframe
name="iframeName" <div class="first-title-text new-guide-box" :style="{ color: '使用手册' === titleData.name ? '#0058e1' : '' }"
width="1300" @click="changeName({ name: '使用手册' })">
height="100%" <div class="guide-text">使用手册</div>
id="iframeId" </div>
:frameborder="0"
:src="doc_base_url + clickData.doc" <!-- 技术文档 -->
></iframe> <div class="right" v-if="titleData.name !== '使用手册'">
</div> <div style="height: 100%">
</div> <iframe name="iframeName" width="1300" height="100%" id="iframeId" :frameborder="0"
<!-- 使用手册 --> :src="doc_base_url + clickData.doc"></iframe>
<div class="manual" v-if="titleData.name === '新手指引'">
<p>使用手册</p>
</div> </div>
</div> </div>
<menuBook v-if="titleData.name === '新手指引'"></menuBook>
</div> </div>
<menuBook v-if="titleData.name === '使用手册'"></menuBook>
</div> </div>
<home-footer v-if="footShow"></home-footer> <home-footer v-if="footShow"></home-footer>
</template> </template>
<script setup> <script setup>
import HomeHeader from '@/views/home/components/header' import HomeHeader from '@/views/home/components/header'
import abilityDocTree from './components/abilityDocTree' import abilityDocTree from './components/abilityDocTree'
import menuBook from './components/menuBook' import menuBook from './components/menuBook'
import { ref, onMounted } from 'vue' import { ref, onMounted } from 'vue'
import { message } from 'ant-design-vue' import { message } from 'ant-design-vue'
import { getDevelopDocTree } from '@/api/home' import { getDevelopDocTree } from '@/api/home'
import HomeFooter from '@/views/newHome/components/Footer' import HomeFooter from '@/views/newHome/components/Footer'
// import flatten from '@turf/flatten' // import flatten from '@turf/flatten'
const titleList = ref([ const titleList = ref([
{ {
name: '新手指引', name: '使用手册',
className: 'newGuide', className: 'newGuide',
}, },
{ {
name: '技术文档', name: '技术文档',
className: 'doc', className: 'doc',
}, },
]) ])
const titleData = ref(titleList.value[0]) const titleData = ref(titleList.value[0])
const clickData = ref({}) const clickData = ref({})
const treeArray = ref([]) const treeArray = ref([])
const treeArrayCopy = ref([]) const treeArrayCopy = ref([])
let typeList = ['组件服务', '应用资源', '基础设施', '数据资源', '知识库'] let typeList = ['组件服务', '应用资源', '基础设施', '数据资源', '知识库']
let doc_base_url = ref(window.SITE_CONFIG['frontUrl']) let doc_base_url = ref(window.SITE_CONFIG['frontUrl'])
const treeClick = (item) => { const treeClick = (item) => {
footShow.value = false footShow.value = false
clickData.value = item clickData.value = item
console.log('clickData------------>', item) console.log('clickData------------>', item)
titleData.value = titleList.value[1] titleData.value = titleList.value[1]
} }
const getTreeData = () => { const getTreeData = () => {
getDevelopDocTree({}) getDevelopDocTree({})
.then((res) => { .then((res) => {
console.log('res------文档树------>', res) console.log('res------文档树------>', res)
if (res.data.code !== 0) { if (res.data.code !== 0) {
return message.error(res.data.msg) return message.error(res.data.msg)
}
treeArray.value = res.data.data || []
treeArrayCopy.value = JSON.parse(JSON.stringify(treeArray.value))
})
.catch((err) => {
message.error(err)
})
}
const footShow = ref(true)
const changeName = (item) => {
titleData.value = item
if (item.name == '新手指引') {
footShow.value = true
clickData.value = {}
}
if (item.name == '技术文档') {
footShow.value = false
if (!clickData.value.title) {
clickData.value = {}
treeArray.value = []
treeArrayCopy.value.map((val, i) => {
let obj = Object.assign({}, val, {
title: val.title,
show:
(i === 0 && val.children && val.children.length > 0) ||
typeList.includes(val.title)
? true
: false,
children: [],
})
formData(val.children, obj)
treeArray.value.push(obj)
})
getFirstData(treeArrayCopy.value[0] || {})
} }
} treeArray.value = res.data.data || []
} treeArrayCopy.value = JSON.parse(JSON.stringify(treeArray.value))
const formData = (children = [], dataItem) => {
children.map((item, index) => {
let _obj = Object.assign({}, item, {
title: item.title,
show:
(index === 0 && item.children && item.children.length > 0) ||
typeList.includes(item.title)
? true
: false,
children: [],
})
if (item.children && item.children.length > 0) {
formData(item.children, _obj)
}
dataItem.children.push(_obj)
}) })
} .catch((err) => {
message.error(err)
})
}
const footShow = ref(true)
const getFirstData = (firstObj = {}) => { const changeName = (item) => {
if (firstObj && firstObj.children && firstObj.children.length > 0) { titleData.value = item
getFirstData(firstObj.children[0]) if (item.name == '使用手册') {
} else { footShow.value = true
clickData.value = firstObj clickData.value = {}
}
if (item.name == '技术文档') {
footShow.value = false
if (!clickData.value.title) {
clickData.value = {}
treeArray.value = []
treeArrayCopy.value.map((val, i) => {
let obj = Object.assign({}, val, {
title: val.title,
show:
(i === 0 && val.children && val.children.length > 0) ||
typeList.includes(val.title)
? true
: false,
children: [],
})
formData(val.children, obj)
treeArray.value.push(obj)
})
getFirstData(treeArrayCopy.value[0] || {})
} }
} }
}
onMounted(() => { const formData = (children = [], dataItem) => {
getTreeData() children.map((item, index) => {
let _obj = Object.assign({}, item, {
title: item.title,
show:
(index === 0 && item.children && item.children.length > 0) ||
typeList.includes(item.title)
? true
: false,
children: [],
})
if (item.children && item.children.length > 0) {
formData(item.children, _obj)
}
dataItem.children.push(_obj)
}) })
}
const getFirstData = (firstObj = {}) => {
if (firstObj && firstObj.children && firstObj.children.length > 0) {
getFirstData(firstObj.children[0])
} else {
clickData.value = firstObj
}
}
onMounted(() => {
getTreeData()
})
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.menu-box { .menu-box {
// overflow: hidden; height: 100%;
height: 100%; }
}
.first-title-text { .first-title-text {
cursor: pointer; cursor: pointer;
font-size: 18px; font-size: 18px;
color: #333; color: #333;
padding-bottom: 10px; padding-bottom: 10px;
display: flex; display: flex;
align-items: center; align-items: center;
&:hover { &:hover {
color: #0058e1; color: #0058e1;
}
} }
}
.menu-container { .doc {
width: 100%; font-weight: bold;
padding-top: 0.74rem; }
}
.content-menu { .menu-container {
width: 1800px; width: 100%;
display: flex; padding-top: 0.74rem;
justify-content: flex-start; min-height: 1000px;
margin: 0 auto; position: relative;
box-sizing: border-box; }
position: relative;
// position: fixed;
// left: 50%;
// bottom: 0;
// transform: translateX(-50%);
// top: 0.6rem;
// top: 0;
}
.left { .content-menu {
z-index: 10; width: 1800px;
width: 200px; display: flex;
padding: 20px; justify-content: flex-start;
margin-right: 20px; margin: 0 auto;
background: rgba(244, 245, 248, 1); box-sizing: border-box;
overflow-y: scroll; }
position: absolute;
top: 200px;
left: 20px;
}
.right { .left {
width: 1300px; width: 200px;
height: calc(100% - 20px); padding-left: 10px;
position: absolute; padding-top: 10px;
top: 10px; background: #f4f5f8;
left: 300px; position: absolute;
min-height: 600px; top: 300px;
} left: 85px;
.manual { max-height: 400px;
cursor: pointer; }
z-index: 10;
width: 74px;
height: 136px;
position: absolute;
top: 200px;
right: 140px;
background-size: 100% 100%;
background-image: url('../../assets/menu/manual.png');
display: flex;
justify-content: center;
align-items: center;
padding: unset !important;
p {
color: #005be1;
font-size: 20px;
margin-bottom: 0;
width: 20px;
}
}
.sidebar { .new-guide-box {
right: 0 !important; position: absolute;
} top: 300px;
right: 205px;
width: 74px;
height: 136px;
background: url('~@/assets/menu/new-bg.png') no-repeat;
background-size: 100% 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding-bottom: 0;
}
.content { .guide-text {
right: 16rem !important; width: 25px;
left: 0 !important; text-align: center;
} word-wrap: break-word;
font-size: 20px;
color: #0058e1;
}
.img { .right {
height: 20px; width: 1300px;
height: calc(100% - 20px);
position: absolute;
min-height: 600px;
left: 50%;
transform: translateX(-50%);
}
.left {
width: 200px;
padding-left: 10px;
padding-top: 10px;
background: #f4f5f8;
position: absolute;
top: 300px;
left: 85px;
max-height: 400px;
}
.manual {
cursor: pointer;
z-index: 10;
width: 74px;
height: 136px;
position: absolute;
top: 200px;
right: 140px;
background-size: 100% 100%;
background-image: url('../../assets/menu/manual.png');
display: flex;
justify-content: center;
align-items: center;
padding: unset !important;
p {
color: #005be1;
font-size: 20px;
margin-bottom: 0;
width: 20px; width: 20px;
margin-right: 8px;
} }
}
.doc { .sidebar {
background: url('~@/assets/capabilityCloud/doc.png') no-repeat; right: 0 !important;
background-size: 100%; }
}
.newGuide { .newGuide {
background: url('~@/assets/capabilityCloud/newGuide.png') no-repeat; background: url('~@/assets/capabilityCloud/newGuide.png') no-repeat;
background-size: 100%; background-size: 100%;
} }
.new-menu-box { .content {
height: 100%; right: 16rem !important;
display: flex; left: 0 !important;
align-items: center; }
justify-content: center;
}
.rela { .img {
width: 100%; height: 20px;
height: 100%; width: 20px;
position: relative; margin-right: 8px;
} }
.rela {
width: 100%;
height: 100%;
position: relative;
}
.new-menu-box {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
</style> </style>