618 lines
16 KiB
Vue
618 lines
16 KiB
Vue
<template>
|
|
<div class="monitoring">
|
|
<header>
|
|
<div class="left">
|
|
<div class="search">
|
|
<div class="chunk">
|
|
<el-input placeholder="主数据名称" v-model="searchForm.mdmName"
|
|
@change="submitsearchForm"
|
|
>
|
|
<i slot="suffix" class="el-input__icon el-icon-search" @click="submitsearchForm"></i>
|
|
</el-input>
|
|
</div>
|
|
<div class="chunk">
|
|
<el-select v-model="searchForm.mdmType" placeholder="主数据类型" clearable @input="submitsearchForm">
|
|
<el-option v-for="item in classOptions" :key="item.value" :label="item.label" :value="item.value">
|
|
</el-option>
|
|
</el-select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="right">
|
|
<!-- <el-button type="primary" icon="el-icon-plus" @click="addApp">新增</el-button>-->
|
|
<el-button type="primary" icon="el-icon-plus" @click="tableButtonHandle({},{type:'new'})">新增</el-button>
|
|
</div>
|
|
</header>
|
|
<main>
|
|
<div class="tableData">
|
|
<div class="tableChunk" v-for="(row,index) in tableData" :key="index">
|
|
<div class="topInfo">
|
|
<div class="left">
|
|
<div class="icon">
|
|
<template v-if="row.imgUrl">
|
|
<img :src="row.imgUrl" alt="">
|
|
</template>
|
|
<template v-else>
|
|
<img src="./images/icon.png" alt="">
|
|
</template>
|
|
</div>
|
|
<div class="vision"></div>
|
|
</div>
|
|
<div class="tableInfo">
|
|
<div class="tableName">
|
|
<div class="name">{{ row.mdmName }}</div>
|
|
</div>
|
|
<div class="tableType">档案</div>
|
|
<div class="tableContent">
|
|
{{ row.remark }}
|
|
</div>
|
|
</div>
|
|
<!-- 遮罩层（显示两按钮）-->
|
|
|
|
</div>
|
|
<div class="shade">
|
|
<div class="btnList">
|
|
<div class="setting" @click="tableButtonHandle(row,{type:'setting'})">
|
|
<div class="icon">
|
|
<img src="./images/设置.png" alt="">
|
|
</div>
|
|
<div class="name">设置</div>
|
|
</div>
|
|
<div class="dele" @click="deleteHandle(row)">
|
|
<div class="icon">
|
|
<img src="./images/删除.png" alt="">
|
|
</div>
|
|
<div class="name">删除</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <BaseTable ref="mainTable" :tableData="tableData" :tableColumn="tableColumn" :funData="funData"-->
|
|
<!-- :funWidth="funWidth" :showIndex="true" :tabLoading="mainTabLoading" @onFunc="tableButtonHandle"-->
|
|
<!-- :tableHeight="'70vh'" :border="false">-->
|
|
<!-- <template v-slot:mdmName="{ row }">-->
|
|
<!-- <div class="nameCard">-->
|
|
<!-- <div class="image" v-loading="row.imgLoading">-->
|
|
<!-- <template v-if="row.imgUrl">-->
|
|
<!-- <img :src="row.imgUrl" alt=""/>-->
|
|
<!-- </template>-->
|
|
<!-- <template v-else>-->
|
|
<!-- <img src="./images/icon.png">-->
|
|
<!-- </template>-->
|
|
<!-- </div>-->
|
|
<!-- <div class="nameInfo">-->
|
|
<!-- <div class="name">{{ row.mdmName }}</div>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- </template>-->
|
|
<!-- <template v-slot:accessMode="{ row }">-->
|
|
<!-- <div class="taskClasses">-->
|
|
<!-- <span :class="`state${item}`" v-for="(item,index) in JSON.parse(row.accessMode)"-->
|
|
<!-- :key="index">{{ methods_dist[item] }}</span>-->
|
|
<!-- </div>-->
|
|
<!-- </template>-->
|
|
<!-- <template v-slot:interfaceStatus="{ row }">-->
|
|
<!-- <el-switch active-value="1" inactive-value="2" active-color="#60c958" v-model="row.interfaceStatus"-->
|
|
<!-- disabled></el-switch>-->
|
|
<!-- </template>-->
|
|
<!-- <template v-slot:dbStatus="{ row }">-->
|
|
<!-- <el-switch active-value="1" inactive-value="2" active-color="#60c958" v-model="row.dbStatus"-->
|
|
<!-- disabled></el-switch>-->
|
|
<!-- </template>-->
|
|
<!-- <template v-slot:appStatus="{ row }">-->
|
|
<!-- <el-switch active-value="1" inactive-value="2" active-color="#60c958" v-model="row.appStatus"-->
|
|
<!-- @change="(val)=>appStatusChange(val,row)"></el-switch>-->
|
|
<!-- </template>-->
|
|
<!-- </BaseTable>-->
|
|
</main>
|
|
<footer>
|
|
<!-- <basePage :pageModel="pageModel" @update:pageModel="currentChangeHandle"></basePage>-->
|
|
</footer>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import configData from './configData.js'
|
|
import dayjs from 'dayjs'
|
|
import BaseTable from '@/views/intergrationTask/compoments/baseTable.vue'
|
|
import basePage from '@/views/intergrationTask/compoments/basePage.vue'
|
|
import { getApiModuleApi } from '@/api/apiChunks/index.js'
|
|
import { downloadLogo } from '@/api/apis/logo.js'
|
|
import request from '@/utils/request'
|
|
import { authApi } from '@/api/apis/auth'
|
|
|
|
export default {
|
|
name: 'listOfApps',
|
|
data() {
|
|
return {
|
|
refreshLoading: false,
|
|
searchForm: {
|
|
task_name: ''
|
|
},
|
|
imgLoading: false,
|
|
mainTabLoading: false,
|
|
funData: [
|
|
{
|
|
type: 'setting',
|
|
text: '设置',
|
|
color: '#5a9cf8'
|
|
}
|
|
],
|
|
tableColumn: configData.tableColumn,
|
|
tableData: [],
|
|
imgUrl: '',
|
|
pageModel: {
|
|
pageIndex: 1,
|
|
total: 10,
|
|
limit: 10
|
|
},
|
|
classOptions: [],
|
|
stateOptions: [
|
|
{
|
|
label: '启用',
|
|
value: '1'
|
|
},
|
|
{
|
|
label: '停用',
|
|
value: '2'
|
|
}
|
|
],
|
|
methods_dist: {
|
|
1: '接口',
|
|
2: 'H5',
|
|
3: 'PC网页',
|
|
4: 'PC应用程序'
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
//删除
|
|
deleteHandle(row) {
|
|
this.$confirm('是否删除此行?', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(async() => {
|
|
this.openLoading('del')
|
|
const res = await authApi('mdmModuleService', '', 'deleteMdm', '', {
|
|
id: row.id
|
|
})
|
|
this.$vmNews('删除成功！', 'success')
|
|
this.initMainTableData()
|
|
})
|
|
|
|
},
|
|
// 状态改变
|
|
async appStatusChange(val, row) {
|
|
const res = await getApiModuleApi({
|
|
tl: 'sysApplicationService',
|
|
as: 'application',
|
|
dj: 'enableOrDisableApp'
|
|
}, { id: row.id, appStatus: val })
|
|
this.$vmNews(res.msg, 'success')
|
|
},
|
|
async initSelectOptions() {
|
|
let params = {
|
|
tab_name: 'mdm',
|
|
column_name: 'mdm_type'
|
|
}
|
|
const res = await getApiModuleApi({
|
|
tl: 'generalServiceImpl',
|
|
as: 'dictionaryshop',
|
|
dj: 'selectDictionaryshop'
|
|
}, params)
|
|
this.classOptions = []
|
|
res.attribute.forEach((item) => {
|
|
this.classOptions.push({
|
|
label: item.column_content,
|
|
value: item.column_value
|
|
})
|
|
})
|
|
},
|
|
// 添加应用
|
|
addApp() {
|
|
this.$router.push({
|
|
path: '/integrationOption/masterDataAdd',
|
|
query: { flag: 'add' }
|
|
})
|
|
},
|
|
// 时间处理
|
|
getTimeHandler(time) {
|
|
var days = parseInt(time / (1000 * 60 * 60 * 24))
|
|
var hours = parseInt((time % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
|
|
var minutes = parseInt((time % (1000 * 60 * 60)) / (1000 * 60))
|
|
var seconds = (time % (1000 * 60)) / 1000
|
|
return days + '天' + hours + '小时' + minutes + '分钟' + seconds + '秒'
|
|
},
|
|
// 初始化表单
|
|
async initMainTableData(obj = {}) {
|
|
this.refreshLoading = true
|
|
const res = await getApiModuleApi(
|
|
{
|
|
tl: 'mdmModuleService',
|
|
as: '',
|
|
dj: 'queryMdm'
|
|
},
|
|
{
|
|
...obj
|
|
}
|
|
)
|
|
this.refreshLoading = false
|
|
if (res.status == 200) {
|
|
// this.pageModel.total = res.attribute.total
|
|
this.imgLoading = true
|
|
res.attribute.map(el => {
|
|
this.$set(el, 'imgLoading', true)
|
|
return request({
|
|
url: '/kangarooDataCenterV3/entranceController/fileDownloadNew?id=' + el.mdmLogo,
|
|
method: 'get',
|
|
responseType: 'arraybuffer'
|
|
}).then((res) => {
|
|
el.imgLoading = false
|
|
if (!res.byteLength) return
|
|
let tempImgUrl =
|
|
'data:image/png/jpg;base64,' + btoa(new Uint8Array(res).reduce((data, byte) => data + String.fromCharCode(byte), ''))
|
|
this.$set(el, 'imgUrl', tempImgUrl)
|
|
})
|
|
})
|
|
console.log(res, 'res')
|
|
this.tableData = res.attribute
|
|
}
|
|
},
|
|
//下载头像
|
|
async getImageUrl(id) {
|
|
// const res = await downloadLogo(id);
|
|
// const blob = new Blob([res]);
|
|
// return URL.createObjectURL(blob);
|
|
// this.imgUrl = URL.createObjectURL(blob)
|
|
|
|
},
|
|
// 点击提交
|
|
submitsearchForm() {
|
|
this.initMainTableData(this.searchForm)
|
|
},
|
|
// 表单操作
|
|
tableButtonHandle(val, item) {
|
|
if (item.type === 'setting') {
|
|
this.$router.push({
|
|
path: '/integrationOption/settingMenu/masterDataEdit',
|
|
query: { flag: 'setting', id: val.id, name: val.name, appLogo: val.appLogo, mdmCode: val.mdmCode }
|
|
})
|
|
} else if (item.type === 'copy') {
|
|
this.$router.push({
|
|
path: '/applicationList/applicationAdd/masterDataEdit',
|
|
query: { flag: 'copy', id: val.id, appLogo: val.appLogo }
|
|
})
|
|
} else if (item.type === 'new') {
|
|
this.$router.push({
|
|
path: '/integrationOption/settingMenu/masterDataEdit',
|
|
query: { flag: 'new' }
|
|
})
|
|
}
|
|
},
|
|
// 页码
|
|
currentChangeHandle(pageModel) {
|
|
this.pageModel = pageModel
|
|
this.$nextTick(() => {
|
|
this.initMainTableData(this.searchForm)
|
|
})
|
|
}
|
|
},
|
|
computed: {
|
|
// 操作框的宽度
|
|
funWidth() {
|
|
return this.funData.length * 70
|
|
}
|
|
},
|
|
components: {
|
|
BaseTable,
|
|
basePage
|
|
},
|
|
created() {
|
|
// this.initMainTableData();
|
|
this.initSelectOptions()
|
|
},
|
|
activated() {
|
|
this.initMainTableData(this.searchForm)
|
|
},
|
|
beforeRouteLeave(to, from, next) {
|
|
if (!to.path.includes('applicationList')
|
|
) {
|
|
next()
|
|
this.$destroy('listOfApps')
|
|
} else {
|
|
next()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
::v-deep .el-button {
|
|
border-radius: 16px;
|
|
}
|
|
|
|
.monitoring {
|
|
position: relative;
|
|
width: 100%;
|
|
overflow: auto;
|
|
|
|
header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 20px;
|
|
background-color: #fff;
|
|
border-radius: 20px;
|
|
|
|
.left {
|
|
align-items: center;
|
|
display: flex;
|
|
|
|
.search {
|
|
margin-left: 30px;
|
|
display: flex;
|
|
|
|
> .chunk {
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
main {
|
|
margin-top: 10px;
|
|
padding: 20px 20px 5px;
|
|
height: 80vh;
|
|
border-radius: 20px;
|
|
background-color: #fff;
|
|
overflow: auto;
|
|
|
|
.tableData {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
|
|
.tableChunk {
|
|
width: 30%;
|
|
margin-bottom: 30px;
|
|
margin-left: 2.5%;
|
|
border-radius: 24px;
|
|
border: 2px solid #E5E5E5;
|
|
padding-bottom: 20px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
.topInfo {
|
|
display: flex;
|
|
margin: 20px 0 0 26px;
|
|
|
|
.left {
|
|
.icon {
|
|
width: 88px;
|
|
height: 88px;
|
|
border-radius: 16px;
|
|
border: 1px solid #F0F0F2;
|
|
padding: 14px;
|
|
|
|
> img {
|
|
width: 60px;
|
|
height: 60px;
|
|
}
|
|
}
|
|
|
|
//.vision{
|
|
// margin-top: 10px;
|
|
// margin-left: 30px;
|
|
// width: 29px;
|
|
// height: 16px;
|
|
// border-radius: 2px;
|
|
// border: 1px solid #FF8B0F;
|
|
//}
|
|
}
|
|
|
|
.tableInfo {
|
|
margin-left: 15px;
|
|
|
|
.tableName {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
> .name {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 24px;
|
|
color: #333333;
|
|
line-height: 33px;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
|
|
.tableType {
|
|
margin-top: 11px;
|
|
width: 38px;
|
|
height: 24px;
|
|
background: #1478F6;
|
|
border-radius: 5px;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 12px;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
line-height: 24px;
|
|
font-style: normal;
|
|
}
|
|
|
|
.tableContent {
|
|
margin-top: 5px;
|
|
width: 95%;
|
|
height: 60px;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
color: #999999;
|
|
line-height: 20px;
|
|
text-align: left;
|
|
font-style: normal;
|
|
display: -webkit-box; /*作为弹性伸缩盒子模型显示。*/
|
|
-webkit-box-orient: vertical; /*作为弹性伸缩盒子模型显示。*/
|
|
-webkit-line-clamp: 3; //*显示的行*/
|
|
overflow: hidden; /*溢出隐藏*/
|
|
/* 对于连字情况或者纯字母，可以解决 */
|
|
word-break: break-all;
|
|
}
|
|
}
|
|
}
|
|
|
|
.shade {
|
|
display: none;
|
|
position: absolute;
|
|
z-index: 10;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
background-color: rgba(0, 0, 0, .7);
|
|
|
|
.btnList {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
.setting {
|
|
cursor: pointer;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
.icon {
|
|
img {
|
|
width: 44px;
|
|
height: 44px;
|
|
}
|
|
}
|
|
|
|
.name {
|
|
margin-top: 10px;
|
|
color: #fff;
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
|
|
.dele {
|
|
cursor: pointer;
|
|
margin-left: 50px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
.icon {
|
|
img {
|
|
width: 44px;
|
|
height: 44px;
|
|
}
|
|
}
|
|
|
|
.name {
|
|
margin-top: 10px;
|
|
color: red;
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
&:hover {
|
|
.shade {
|
|
display: block !important;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
footer {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.nameCard {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
width: 100%;
|
|
|
|
.image {
|
|
width: 29px;
|
|
height: 29px;
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.nameInfo {
|
|
margin-left: 5px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
|
|
> .name {
|
|
text-align: left;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
> .version {
|
|
margin-top: 1px;
|
|
color: #ff8b0f;
|
|
font-size: 12px;
|
|
height: 20px;
|
|
border: 0.5px solid #ff8b0f;
|
|
padding: 0 1px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.taskClasses {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
span {
|
|
margin-top: 5px;
|
|
border-radius: 2px;
|
|
padding: 2px 10px;
|
|
margin-left: 8px;
|
|
color: #fff;
|
|
}
|
|
|
|
.state1 {
|
|
background-color: #1478f6;
|
|
}
|
|
|
|
.state2 {
|
|
background-color: #f64114;
|
|
}
|
|
|
|
.state3 {
|
|
background-color: #00bd72;
|
|
}
|
|
|
|
.state4 {
|
|
background-color: #b700bd;
|
|
}
|
|
}
|
|
</style>
|