Skip to content

liangzhen / framework-tools-web

Go to a project
Commit 5b1f903f by 史敦盼
Options

项目详情,系统详情, 菜单active样式

1 parent 2d3d4002
Inline Side-by-side
Showing with 509 additions and 96 deletions
src/api/index.js
...@@ -772,6 +772,14 @@ export function viewArchitectureFollows(params) { ...@@ -772,6 +772,14 @@ export function viewArchitectureFollows(params) {
export function qViewArchitectureFollows(params) { export function qViewArchitectureFollows(params) {
return post(EADC_ARRCHITECTURE + '/architectureFollows/qView', params) return post(EADC_ARRCHITECTURE + '/architectureFollows/qView', params)
} }
// 项目信息管理-查看项目详情
export function getPrjInfoDetail(params) {
return post(EADC_ARRCHITECTURE + '/prj-info/qryPrj', params)
}
// 系统信息管理-查看系统详情
export function getSystemInfoDetail(params) {
return post(EADC_ARRCHITECTURE + '/app-info/dApp', params)
}
export function postRequest(url, params) { export function postRequest(url, params) {
return post(EADC_ARRCHITECTURE + url, params) return post(EADC_ARRCHITECTURE + url, params)
} }
src/components/onlyOffice/index.vue
...@@ -161,11 +161,12 @@ export default { ...@@ -161,11 +161,12 @@ export default {
}, },
mounted() { mounted() {
let url = this.documentServerUrl let url = this.documentServerUrl
console.log('url', url)
if (!url.endsWith('/')) { if (!url.endsWith('/')) {
url += '/' url += '/'
} }
const docApiUrl = `${url}web-apps/apps/api/documents/api.js` const docApiUrl = `${url}web-apps/apps/api/documents/api.js`
console.log('docApiUrl', docApiUrl)
loadScript(docApiUrl, 'onlyoffice-api-script') loadScript(docApiUrl, 'onlyoffice-api-script')
.then(() => this.onLoad()) .then(() => this.onLoad())
.catch((err) => console.error(err)) .catch((err) => console.error(err))
......
src/utils/index.js 0 → 100644
import { getDianXingAnLiSelectData } from '@/api/index.js'
export const base64ToBlob = function (base64Data) {
// const arr = base64Data.split(',')
// const fileType = arr[0].match(/:(.*?);/)[1]
const bstr = atob(base64Data)
let l = bstr.length
const u8Arr = new Uint8Array(l)
while (l--) {
u8Arr[l] = bstr.charCodeAt(l)
}
return new Blob([u8Arr], {
type: 'image',
})
}
/**
* @description 使用递归找出所有面包屑存储到 vuex 中
* @param {Array} menuList 菜单列表
* @param {Array} parent 父级菜单
* @param {Object} result 处理后的结果
* @returns {Object}
*/
export const getAllBreadcrumbList = (menuList, parent = [], result = {}) => {
for (const item of menuList) {
result[item.path] = [...parent, item]
if (item.children)
getAllBreadcrumbList(item.children, result[item.path], result)
}
return result
}
/**
* @description: 获取字典方法
* @param {String} key 查询字典的key
* @return {Array} 对应字典集合
* @author: pan
*/
export async function getDictTypeOptions(key) {
var dictTypeOptions = []
var storedDic = localStorage.getItem('dic_' + key)
if (storedDic) {
dictTypeOptions = JSON.parse(storedDic)
} else {
const params = { key }
const res = await getDianXingAnLiSelectData(params)
if (res.code !== 200) return
dictTypeOptions = res.data
const jsonStr = JSON.stringify(res.data)
localStorage.setItem('dic_' + key, jsonStr)
}
// console.log('dictTypeOptions', dictTypeOptions)
return dictTypeOptions
}
src/views/Main/index.vue
...@@ -36,7 +36,7 @@ ...@@ -36,7 +36,7 @@
ref="popoverRef" ref="popoverRef"
> >
<div slot="reference"> <div slot="reference">
<img <!-- <img
class="menu_icon" class="menu_icon"
src="@/assets/main/4icon_default.png" src="@/assets/main/4icon_default.png"
alt="" alt=""
...@@ -45,10 +45,13 @@ ...@@ -45,10 +45,13 @@
class="menu_icon_active" class="menu_icon_active"
src="@/assets/main/4icon_press.png" src="@/assets/main/4icon_press.png"
alt="" alt=""
/> /> -->
<span
<span class="menu_title">{{ item.name }}</span> class="menu_title"
<p class="under_line"></p> :class="{ isActive: isTopMenuActive(index) }"
>{{ item.name }}</span
>
<!-- <p class="under_line"></p> -->
</div> </div>
<div class="menu_1_container"> <div class="menu_1_container">
<div <div
...@@ -77,7 +80,11 @@ ...@@ -77,7 +80,11 @@
:key="index3" :key="index3"
> >
<img src="@/assets/main/3img.png" alt="" /> <img src="@/assets/main/3img.png" alt="" />
<span style="margin-left: 5px">{{ item3.name }}</span> <span
style="margin-left: 5px"
:class="{ isActive: isActive(item3.path) }"
>{{ item3.name }}</span
>
</div> </div>
</div> </div>
<img <img
...@@ -136,20 +143,20 @@ export default { ...@@ -136,20 +143,20 @@ export default {
} }
}, },
mounted() { mounted() {
$('.menu_item').hover( // $('.menu_item').hover(
function () { // function () {
$(this).find('.menu_title').css('color', '#0D867F') // $(this).find('.menu_title').css('color', '#0D867F')
$(this).find('.menu_icon').css('display', 'none') // $(this).find('.menu_icon').css('display', 'none')
$(this).find('.menu_icon_active').css('display', 'inline-block') // $(this).find('.menu_icon_active').css('display', 'inline-block')
$(this).find('.under_line').css('display', 'block') // $(this).find('.under_line').css('display', 'block')
}, // },
function () { // function () {
$(this).find('.menu_title').css('color', '#666') // $(this).find('.menu_title').css('color', '#666')
$(this).find('.menu_icon').css('display', 'inline-block') // $(this).find('.menu_icon').css('display', 'inline-block')
$(this).find('.menu_icon_active').css('display', 'none') // $(this).find('.menu_icon_active').css('display', 'none')
$(this).find('.under_line').css('display', 'none') // $(this).find('.under_line').css('display', 'none')
}, // },
) // )
}, },
computed: { computed: {
breadcrumbList() { breadcrumbList() {
...@@ -161,6 +168,21 @@ export default { ...@@ -161,6 +168,21 @@ export default {
}, },
}, },
methods: { methods: {
isTopMenuActive(index) {
if (
JSON.stringify(this.menuOptions[index]).includes(this.$route.path) &&
this.$route.path != '/main'
) {
return true
}
},
isActive(path) {
if (path === this.$route.path) {
return true
} else {
return false
}
},
onBreadcrumbClick(item, index) { onBreadcrumbClick(item, index) {
if (index !== this.breadcrumbList.length - 1) this.$router.push(item.path) if (index !== this.breadcrumbList.length - 1) this.$router.push(item.path)
}, },
...@@ -439,6 +461,10 @@ export default { ...@@ -439,6 +461,10 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import '@/styles/common.scss'; @import '@/styles/common.scss';
.isActive {
color: $color-primary !important;
}
.main { .main {
height: 100%; height: 100%;
} }
...@@ -506,6 +532,40 @@ export default { ...@@ -506,6 +532,40 @@ export default {
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
color: #666; color: #666;
position: relative;
&::before {
content: '';
position: absolute;
background: url('@/assets/main/4icon_default.png') no-repeat center;
background-size: cover;
width: 20px;
height: 20px;
position: absolute;
left: -25px;
top: 9%;
}
&:hover {
color: $color-primary;
&::before {
background: url('@/assets/main/4icon_press.png') no-repeat center;
background-size: cover;
}
}
&.isActive {
&::before {
background: url('@/assets/main/4icon_press.png') no-repeat center;
background-size: cover;
}
&::after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 100%;
height: 6px;
background-color: $color-primary;
}
}
} }
.under_line { .under_line {
position: absolute; position: absolute;
......
src/views/projectInfoManage/ProjectDetail.vue
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
* @Autor: pan * @Autor: pan
* @Date: 2024-03-28 16:08:56 * @Date: 2024-03-28 16:08:56
* @LastEditors: pan * @LastEditors: pan
* @LastEditTime: 2024-03-28 17:31:20 * @LastEditTime: 2024-03-29 16:06:36
--> -->
<template> <template>
<div> <div>
...@@ -25,72 +25,74 @@ ...@@ -25,72 +25,74 @@
<el-row class="m-t-20"> <el-row class="m-t-20">
<el-col :span="6" class="flex"> <el-col :span="6" class="flex">
<div class="label">单位</div> <div class="label">单位</div>
<div class="value">总部</div> <div class="value">{{ detailInfo.manageOrgId }}</div>
</el-col> </el-col>
<el-col :span="6" class="flex"> <el-col :span="6" class="flex">
<div class="label">部门</div> <div class="label">部门</div>
<div class="value">发展策划部</div> <div class="value">{{ detailInfo.manageDeptId }}</div>
</el-col> </el-col>
<el-col :span="6" class="flex"> <el-col :span="6" class="flex">
<div class="label">关联系统名称</div> <div class="label">关联系统名称</div>
<div class="value"> <div class="value">
电力营销-2023年网上国网（网上国网V1.0） {{ detailInfo.appName }}
</div> </div>
</el-col> </el-col>
<el-col :span="6" class="flex"> <el-col :span="6" class="flex">
<div class="label">建设类型</div> <div class="label">建设类型</div>
<div class="value">统建</div> <div class="value">{{ detailInfo.buildType }}</div>
</el-col> </el-col>
</el-row> </el-row>
<el-row class="m-t-20"> <el-row class="m-t-20">
<el-col :span="6" class="flex"> <el-col :span="6" class="flex">
<div class="label">项目名称</div> <div class="label">项目名称</div>
<div class="value">Sora大模型系统</div> <div class="value">{{ detailInfo.prjName }}</div>
</el-col> </el-col>
<el-col :span="6" class="flex"> <el-col :span="6" class="flex">
<div class="label">是否续建</div> <div class="label">是否续建</div>
<div class="value">是</div> <div class="value">
{{ detailInfo.prjPlanClass === 2 ? '是' : '否' }}
</div>
</el-col> </el-col>
<el-col :span="6" class="flex"> <el-col :span="6" class="flex">
<div class="label">前期项目</div> <div class="label">前期项目</div>
<div class="value"> <div class="value">
电力营销-2023年网上国网（网上国网V1.0） {{ detailInfo.agoPrjName }}
</div> </div>
</el-col> </el-col>
<el-col :span="6" class="flex"> <el-col :span="6" class="flex">
<div class="label">承建单位</div> <div class="label">承建单位</div>
<div class="value">国网数字科技有限公司</div> <div class="value">{{ detailInfo.buildOrg }}</div>
</el-col> </el-col>
</el-row> </el-row>
<el-row class="m-t-20"> <el-row class="m-t-20">
<el-col :span="6" class="flex"> <el-col :span="6" class="flex">
<div class="label">项目经理</div> <div class="label">项目经理</div>
<div class="value">李雷</div> <div class="value">{{ detailInfo.projectManager }}</div>
</el-col> </el-col>
<el-col :span="6" class="flex"> <el-col :span="6" class="flex">
<div class="label">创建人</div> <div class="label">创建人</div>
<div class="value">李雷</div> <div class="value">{{ detailInfo.createMan }}</div>
</el-col> </el-col>
<el-col :span="6" class="flex"> <el-col :span="6" class="flex">
<div class="label">创建时间</div> <div class="label">创建时间</div>
<div class="value">2024-03-28</div> <div class="value">{{ detailInfo.createTime }}</div>
</el-col> </el-col>
<el-col :span="6" class="flex"> <el-col :span="6" class="flex">
<div class="label">修改人</div> <div class="label">修改人</div>
<div class="value">李雷</div> <div class="value">{{ detailInfo.lastUpdateMan }}</div>
</el-col> </el-col>
</el-row> </el-row>
<el-row class="m-t-20"> <el-row class="m-t-20">
<el-col :span="24" class="flex"> <el-col :span="24" class="flex">
<div class="label">修改时间</div> <div class="label">修改时间</div>
<div class="value">2024-03-28</div> <div class="value">{{ detailInfo.lastUpdateTime }}</div>
</el-col> </el-col>
</el-row> </el-row>
<el-row class="m-t-20"> <el-row class="m-t-20">
<el-col :span="24" class="flex"> <el-col :span="24" class="flex">
<div class="label">修改时间</div> <div class="label">项目资料</div>
<div class="value"> <div class="value">
<el-table height="300" :data="tableData" stripe border> <el-table :data="detailInfo.filesValue" stripe border>
<el-table-column <el-table-column
type="index" type="index"
label="序号" label="序号"
...@@ -98,7 +100,7 @@ ...@@ -98,7 +100,7 @@
align="center" align="center"
></el-table-column> ></el-table-column>
<el-table-column <el-table-column
prop="name" prop="busiFileName"
label="资料类型" label="资料类型"
width="300" width="300"
align="center" align="center"
...@@ -156,8 +158,8 @@ ...@@ -156,8 +158,8 @@
</div> </div>
</div> </div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="架构资产" name="2">架构资产</el-tab-pane> <!-- <el-tab-pane label="架构资产" name="2">架构资产</el-tab-pane>
<el-tab-pane label="架构视图" name="3">架构视图</el-tab-pane> <el-tab-pane label="架构视图" name="3">架构视图</el-tab-pane> -->
</el-tabs> </el-tabs>
</div> </div>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
...@@ -168,6 +170,7 @@ ...@@ -168,6 +170,7 @@
</template> </template>
<script> <script>
import { getPrjInfoDetail } from '@/api'
export default { export default {
props: { props: {
visible: { visible: {
...@@ -183,6 +186,7 @@ export default { ...@@ -183,6 +186,7 @@ export default {
return { return {
activeName: '1', activeName: '1',
tableData: [], tableData: [],
detailInfo: {},
} }
}, },
components: {}, components: {},
...@@ -204,7 +208,13 @@ export default { ...@@ -204,7 +208,13 @@ export default {
handleClose() { handleClose() {
this.showDialog = false this.showDialog = false
}, },
handleOpen() {}, handleOpen() {
getPrjInfoDetail(this.rowData).then((res) => {
if (res.code === 200) {
this.detailInfo = res.data
}
})
},
handleClick() {}, handleClick() {},
}, },
} }
...@@ -238,6 +248,10 @@ export default { ...@@ -238,6 +248,10 @@ export default {
width: 120px; width: 120px;
text-align: right; text-align: right;
} }
.value {
flex: 1;
text-align: left;
}
} }
} }
</style> </style>
src/views/projectInfoManage/index.vue
...@@ -5,23 +5,47 @@ ...@@ -5,23 +5,47 @@
<div class="search_menu_item_container"> <div class="search_menu_item_container">
<div class="search_menu_item"> <div class="search_menu_item">
<span class="search_title">单位</span> <span class="search_title">单位</span>
<el-input <!-- <el-input
v-no-backslash v-no-backslash
v-model="searchParams.let1" v-model="searchParams.let1"
maxlength="100" maxlength="100"
placeholder="请输入内容" placeholder="请输入内容"
class="search_item" class="search_item"
></el-input> ></el-input> -->
<el-select
v-model="searchParams.let1"
placeholder="请选择"
class="search_item"
>
<el-option
v-for="item in sysOrgOptions"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</div> </div>
<div class="search_menu_item"> <div class="search_menu_item">
<span class="search_title">部门</span> <span class="search_title">部门</span>
<el-input <!-- <el-input
v-no-backslash v-no-backslash
v-model="searchParams.let2" v-model="searchParams.let2"
maxlength="100" maxlength="100"
placeholder="请输入内容" placeholder="请输入内容"
class="search_item" class="search_item"
></el-input> ></el-input> -->
<el-select
v-model="searchParams.let2"
placeholder="请选择"
class="search_item"
>
<el-option
v-for="item in sysDeptOptions"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</div> </div>
<div class="search_menu_item"> <div class="search_menu_item">
<span class="search_title">项目名称</span> <span class="search_title">项目名称</span>
...@@ -265,7 +289,7 @@ ...@@ -265,7 +289,7 @@
align="center" align="center"
></el-table-column> ></el-table-column>
<el-table-column <el-table-column
prop="tableLet1" prop="label"
label="资料类型" label="资料类型"
align="center" align="center"
></el-table-column> ></el-table-column>
...@@ -656,10 +680,11 @@ import { ...@@ -656,10 +680,11 @@ import {
editDeleteProjectInfoManageTable, editDeleteProjectInfoManageTable,
querysystemInfoManageTable, querysystemInfoManageTable,
addProjectManageTable, addProjectManageTable,
getPrjInfoDetail,
} from '@/api/index.js' } from '@/api/index.js'
import { MessageBox, Message } from 'element-ui' import { MessageBox, Message } from 'element-ui'
import $ from 'jquery' import $ from 'jquery'
import { getDictTypeOptions } from '@/utils'
export default { export default {
name: 'projectInfoManage', name: 'projectInfoManage',
components: { ProjectDetail }, components: { ProjectDetail },
...@@ -732,16 +757,18 @@ export default { ...@@ -732,16 +757,18 @@ export default {
}, },
selectRo3: [], selectRo3: [],
tableData4: [ tableData4: [
{ id: 1, tableLet1: '技术规范书', fileList: [], fileArray: [] }, // { id: 1, tableLet1: '技术规范书', fileList: [], fileArray: [] },
{ id: 2, tableLet1: '可行性研究报告', fileList: [], fileArray: [] }, // { id: 2, tableLet1: '可行性研究报告', fileList: [], fileArray: [] },
{ id: 3, tableLet1: '需求规格说明书', fileList: [], fileArray: [] }, // { id: 3, tableLet1: '需求规格说明书', fileList: [], fileArray: [] },
{ id: 4, tableLet1: '概要设计说明书', fileList: [], fileArray: [] }, // { id: 4, tableLet1: '概要设计说明书', fileList: [], fileArray: [] },
{ id: 5, tableLet1: '安全防护方案', fileList: [], fileArray: [] }, // { id: 5, tableLet1: '安全防护方案', fileList: [], fileArray: [] },
{ id: 5, tableLet1: '其他', fileList: [], fileArray: [] }, // { id: 5, tableLet1: '其他', fileList: [], fileArray: [] },
], ],
prjId: null, prjId: null,
rowData: {}, rowData: {},
projectDetailVisible: false, projectDetailVisible: false,
sysOrgOptions: [],
sysDeptOptions: [],
} }
}, },
mounted() { mounted() {
...@@ -753,8 +780,27 @@ export default { ...@@ -753,8 +780,27 @@ export default {
this.getJianSheLeiXingSelect().then((res) => { this.getJianSheLeiXingSelect().then((res) => {
this.jianSheLeiXingSelect = res this.jianSheLeiXingSelect = res
}) })
this.getDicts()
}, },
methods: { methods: {
getDicts() {
getDictTypeOptions('prj_data').then((res) => {
this.tableData4 = res.map((v) => {
return {
label: v.label,
value: v.value,
fileList: [],
fileArray: [],
}
})
})
getDictTypeOptions('sys_org').then((res) => {
this.sysOrgOptions = res
})
getDictTypeOptions('sys_dept').then((res) => {
this.sysDeptOptions = res
})
},
openDetail(row) { openDetail(row) {
this.rowData = row this.rowData = row
this.projectDetailVisible = true this.projectDetailVisible = true
...@@ -773,6 +819,7 @@ export default { ...@@ -773,6 +819,7 @@ export default {
fileUrl: file.response.data.viewUrl, fileUrl: file.response.data.viewUrl,
}, },
] ]
console.log(this.tableData4)
}, },
operation(type, data) { operation(type, data) {
switch (type) { switch (type) {
...@@ -904,11 +951,17 @@ export default { ...@@ -904,11 +951,17 @@ export default {
}) })
}) })
}, },
editItem(row) { async editItem(row) {
//编辑 //编辑
this.add_dialog = true this.add_dialog = true
this.is_add_edit = 'edit' this.is_add_edit = 'edit'
this.ruleForm.let1 = row.appName this.ruleForm.let1 = row.appName
const detail = await getPrjInfoDetail(row)
console.log(detail)
let filesValue = []
if (detail.code === 200) {
filesValue = detail.data.filesValue
}
this.selectRow = [ this.selectRow = [
{ {
appCode: row.appCode, appCode: row.appCode,
...@@ -932,35 +985,57 @@ export default { ...@@ -932,35 +985,57 @@ export default {
] ]
this.ruleForm.let4 = row.prjName this.ruleForm.let4 = row.prjName
} }
if (row.filesValue) { if (filesValue.length) {
let filesValue = JSON.parse(row.filesValue) // let filesValue = JSON.parse(row.filesValue)
if (filesValue.length > 0) { // if (filesValue.length > 0) {
this.tableData4.forEach((item, index) => { this.tableData4.forEach((item, index) => {
item.fileList = filesValue[index] filesValue.forEach((v) => {
? [ if (item.value == v.busiFileType) {
item.fileList = [
{ {
name: filesValue[index].fileName, name: v.busiFileName,
url: filesValue[index].fileUrl, url: v.fileUrl,
fileId: filesValue[index].fileId, fileId: v.fileId,
fileName: filesValue[index].fileName, fileName: v.busiFileName,
fileUrl: filesValue[index].fileUrl, fileUrl: v.fileUrl,
}, },
] ]
: [] item.fileArray = [
item.fileArray = filesValue[index]
? [
{ {
name: filesValue[index].fileName, name: v.busiFileName,
url: filesValue[index].fileUrl, url: v.fileUrl,
fileId: filesValue[index].fileId, fileId: v.fileId,
fileName: filesValue[index].fileName, fileName: v.busiFileName,
fileUrl: filesValue[index].fileUrl, fileUrl: v.fileUrl,
}, },
] ]
: []
})
} }
})
// item.fileList = filesValue[index]
// ? [
// {
// name: filesValue[index].fileName,
// url: filesValue[index].fileUrl,
// fileId: filesValue[index].fileId,
// fileName: filesValue[index].fileName,
// fileUrl: filesValue[index].fileUrl,
// },
// ]
// : []
// item.fileArray = filesValue[index]
// ? [
// {
// name: filesValue[index].fileName,
// url: filesValue[index].fileUrl,
// fileId: filesValue[index].fileId,
// fileName: filesValue[index].fileName,
// fileUrl: filesValue[index].fileUrl,
// },
// ]
// : []
})
// }
console.log(this.tableData4) console.log(this.tableData4)
} }
this.prjId = row.prjId this.prjId = row.prjId
...@@ -1060,10 +1135,12 @@ export default { ...@@ -1060,10 +1135,12 @@ export default {
manageDeptId = this.selectRow[0].manageDeptId manageDeptId = this.selectRow[0].manageDeptId
manageOrgId = this.selectRow[0].manageOrgId manageOrgId = this.selectRow[0].manageOrgId
let filesValue = [] let filesValue = []
console.log(this.tableData4)
this.tableData4.forEach((item) => { this.tableData4.forEach((item) => {
if (item.fileArray.length > 0) { if (item.fileArray.length > 0) {
filesValue.push({ filesValue.push({
busiFileName: item.tableLet1, busiFileName: item.label,
busiFileType: item.value,
fileId: item.fileArray[0].fileId, fileId: item.fileArray[0].fileId,
fileName: item.fileArray[0].fileName, fileName: item.fileArray[0].fileName,
fileUrl: item.fileArray[0].fileUrl, fileUrl: item.fileArray[0].fileUrl,
......
src/views/systemInfoManage/SystemInfoDetail.vue 0 → 100644
<!--
* @Description: 系统信息详情
* @Version: 2.0
* @Autor: pan
* @Date: 2024-03-29 11:44:57
* @LastEditors: pan
* @LastEditTime: 2024-03-29 14:24:42
-->
<template>
<div>
<el-dialog
:title="getTitle"
:visible.sync="showDialog"
:close-on-click-modal="false"
width="90%"
@close="handleClose()"
@open="handleOpen()"
>
<div>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="基本信息" name="1">
<div class="base-info-item m-t-20">
<div class="base-info-item-title">系统基本信息</div>
<div class="base-info-item-content">
<el-row class="m-t-20">
<el-col :span="6" class="flex">
<div class="label">单位</div>
<div class="value">总部</div>
</el-col>
<el-col :span="6" class="flex">
<div class="label">部门</div>
<div class="value">发展策划部</div>
</el-col>
<el-col :span="6" class="flex">
<div class="label">系统名称</div>
<div class="value">
电力营销-2023年网上国网（网上国网V1.0）
</div>
</el-col>
<el-col :span="6" class="flex">
<div class="label">建设类型</div>
<div class="value">统建</div>
</el-col>
</el-row>
<el-row class="m-t-20">
<el-col :span="6" class="flex">
<div class="label">承建单位</div>
<div class="value">Sora大模型系统</div>
</el-col>
<el-col :span="6" class="flex">
<div class="label">项目经理</div>
<div class="value">是</div>
</el-col>
<el-col :span="6" class="flex">
<div class="label">创建人</div>
<div class="value">
电力营销-2023年网上国网（网上国网V1.0）
</div>
</el-col>
<el-col :span="6" class="flex">
<div class="label">创建时间</div>
<div class="value">国网数字科技有限公司</div>
</el-col>
</el-row>
<el-row class="m-t-20">
<el-col :span="6" class="flex">
<div class="label">修改人</div>
<div class="value">李雷</div>
</el-col>
<el-col :span="6" class="flex">
<div class="label">修改时间</div>
<div class="value">2024-03-28</div>
</el-col>
</el-row>
</div>
</div>
<div class="base-info-item m-t-20">
<div class="base-info-item-title">系统关联信息</div>
<div class="base-info-item-content">
<el-row class="m-t-20">
<el-col :span="8" class="flex">
<div class="label">关联项目1</div>
<div class="value">2023第一批次概设评审</div>
</el-col>
<el-col :span="8" class="flex">
<div class="label">是否续建</div>
<div class="value">是</div>
</el-col>
<el-col :span="8" class="flex">
<div class="label">关联时间</div>
<div class="value">2023-12-12</div>
</el-col>
</el-row>
</div>
</div>
</el-tab-pane>
<!-- <el-tab-pane label="架构资产" name="2">架构资产</el-tab-pane>
<el-tab-pane label="架构视图" name="3">架构视图</el-tab-pane> -->
</el-tabs>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="handleClose()" size="mini">关 闭</el-button>
</span></el-dialog
>
</div>
</template>
<script>
export default {
props: {
visible: {
type: Boolean,
default: false,
},
rowData: {
type: Object,
default: () => {},
},
},
data() {
return {
activeName: '1',
tableData: [],
}
},
components: {},
computed: {
showDialog: {
get() {
return this.visible
},
set(value) {
this.$emit('update:visible', value)
},
},
getTitle() {
return `系统名称：${this.rowData.appName}`
},
},
mounted() {},
methods: {
handleClose() {
this.showDialog = false
},
handleOpen() {},
handleClick() {},
},
}
</script>
<style scoped lang="scss">
@import '@/styles/elementui.scss';
@import '@/styles/common.scss';
.base-info-item {
&-title {
font-size: 16px;
color: #1ec695;
position: relative;
text-align: left;
padding-left: 20px;
&::before {
content: '';
position: absolute;
left: 0;
top: 2px;
width: 6px;
border-radius: 4px;
height: 20px;
background-color: #1ec695;
}
}
&-content {
// padding: 0 50px;
.label {
font-weight: bold;
margin-right: 30px;
width: 120px;
text-align: right;
}
.value {
flex: 1;
text-align: left;
}
}
}
</style>
src/views/systemInfoManage/index.vue
...@@ -132,7 +132,13 @@ ...@@ -132,7 +132,13 @@
align="center" align="center"
width="200" width="200"
:show-overflow-tooltip="true" :show-overflow-tooltip="true"
></el-table-column> >
<template slot-scope="{ row }">
<span class="appName" @click="openDetail(row)">{{
row.appName
}}</span>
</template>
</el-table-column>
<el-table-column label="建设类型" align="center"> <el-table-column label="建设类型" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<span v-if="scope.row.buildType == 1">统推</span> <span v-if="scope.row.buildType == 1">统推</span>
...@@ -291,10 +297,14 @@ ...@@ -291,10 +297,14 @@
<el-button @click="add_dialog = false">取消</el-button> <el-button @click="add_dialog = false">取消</el-button>
</span> </span>
</el-dialog> </el-dialog>
<!-- 系统信息详情 -->
<SystemInfoDetail :row-data="rowData" :visible.sync="appDetailVisible" />
</div> </div>
</template> </template>
<script> <script>
import SystemInfoDetail from './SystemInfoDetail'
import { import {
querysystemInfoManageTable, querysystemInfoManageTable,
getDianXingAnLiSelectData, getDianXingAnLiSelectData,
...@@ -302,11 +312,12 @@ import { ...@@ -302,11 +312,12 @@ import {
editDeleteSystemInfoManageTable, editDeleteSystemInfoManageTable,
} from '@/api/index.js' } from '@/api/index.js'
import { MessageBox, Message } from 'element-ui' import { MessageBox, Message } from 'element-ui'
import { getDictTypeOptions } from '@/utils'
import $ from 'jquery' import $ from 'jquery'
export default { export default {
name: 'systemInfoManage', name: 'systemInfoManage',
components: {}, components: { SystemInfoDetail },
data() { data() {
return { return {
ruleForm: { ruleForm: {
...@@ -348,6 +359,8 @@ export default { ...@@ -348,6 +359,8 @@ export default {
sysOrgOptions: [], sysOrgOptions: [],
sysDeptOptions: [], sysDeptOptions: [],
sysBuildOrgOptions: [], sysBuildOrgOptions: [],
appDetailVisible: false,
rowData: {},
} }
}, },
mounted() { mounted() {
...@@ -362,29 +375,25 @@ export default { ...@@ -362,29 +375,25 @@ export default {
this.getDicts() this.getDicts()
}, },
methods: { methods: {
openDetail(row) {
this.rowData = row
this.appDetailVisible = true
},
toBuildOrgName(code) { toBuildOrgName(code) {
const obj = this.sysBuildOrgOptions.find((v) => v.value == code) || {} const obj = this.sysBuildOrgOptions?.find((v) => v.value == code) || {}
return obj.label return obj.label
}, },
getDicts() { getDicts() {
this.getDictTypeOptions('sys_org', 'sysOrgOptions') getDictTypeOptions('sys_org').then((res) => {
this.getDictTypeOptions('sys_dept', 'sysDeptOptions') this.sysOrgOptions = res
this.getDictTypeOptions('sys_build_org', 'sysBuildOrgOptions') })
}, getDictTypeOptions('sys_dept').then((res) => {
async getDictTypeOptions(key, dictType) { this.sysDeptOptions = res
var dictTypeOptions = [] })
var storedDic = localStorage.getItem('dic_' + key) getDictTypeOptions('sys_build_org').then((res) => {
if (storedDic) { this.sysBuildOrgOptions = res
dictTypeOptions = JSON.parse(storedDic) })
} else { // console.log(getDictTypeOptions('sys_build_org'))
const params = { key }
const res = await getDianXingAnLiSelectData(params)
if (res.code !== 200) return
dictTypeOptions = res.data
const jsonStr = JSON.stringify(res.data)
localStorage.setItem('dic_' + key, jsonStr)
}
this[dictType] = dictTypeOptions
}, },
operation(type, data) { operation(type, data) {
switch (type) { switch (type) {
...@@ -637,6 +646,11 @@ export default { ...@@ -637,6 +646,11 @@ export default {
} }
</style> </style>
<style scoped lang="scss"> <style scoped lang="scss">
@import '@/styles/elementui.scss';
.appName {
color: $color-primary;
cursor: pointer;
}
/deep/ .el-form-item__label { /deep/ .el-form-item__label {
width: 100px; width: 100px;
} }
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!