380 lines
9.1 KiB
Vue
380 lines
9.1 KiB
Vue
<template>
|
|
<div class="wrap">
|
|
<div class="main" v-loading="mainLoading">
|
|
<baseTable :tableData="tableData" :tabLoading="tabLoading"
|
|
|
|
:tableColumn="tableColumn" :border="false"
|
|
>
|
|
<!-- 来源类型-->
|
|
<template #sourceType="{row}">
|
|
{{ row.sourceType == 1 ? '插件' : 'api' }}
|
|
</template>
|
|
<!-- 触发类型-->
|
|
<template #triggerType="{row}">
|
|
{{ row.triggerType == 0 ? '手动' : '自动' }}
|
|
</template>
|
|
<!-- 启用/停用-->
|
|
<template #enabledState="{row}">
|
|
<el-switch
|
|
:disabled="true"
|
|
v-model="row.enabledState"
|
|
active-value="1"
|
|
inactive-value="0"
|
|
>
|
|
</el-switch>
|
|
</template>
|
|
<!-- 操作-->
|
|
<template #operation="{row}">
|
|
<div class="btnList">
|
|
<div class="settingBtn" @click="sonTableEditHandle(row)">
|
|
<img src="./images/设置.png" alt="">
|
|
</div>
|
|
<div class="deleBtn" @click="activedOnFunc(row)">
|
|
<img src="./images/删除.png" alt="">
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</baseTable>
|
|
<div class="receiptsAddRow">
|
|
<el-link
|
|
type="primary"
|
|
@click="addRowHandle"
|
|
:underline="false"
|
|
>+ 添加
|
|
</el-link
|
|
>
|
|
</div>
|
|
</div>
|
|
<baseRightDialog ref="settingForm"
|
|
:footerShow="true"
|
|
:dialogVisible.sync="settingFormShow"
|
|
title="数据来源"
|
|
@handleClose="settingFormShow=false"
|
|
:submitShow="true"
|
|
:size="'50%'"
|
|
@handleConfirmClick="sonTableSaveHandle"
|
|
|
|
>
|
|
<settingForm ref="settingForm" v-if="settingFormShow" @saveSuccessHandle="saveSuccessHandle"></settingForm>
|
|
</baseRightDialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import settingForm from './settingForm.vue'
|
|
import baseRightDialog from '@/components/base/baseRightDialog/index.vue'
|
|
import baseNewSelect from '@/views/applicationList/com/baseNewSelect.vue'
|
|
import baseDialog from '@/views/integrationOption/compoments/baseDialog'
|
|
import BaseTable from '@/views/intergrationTask/compoments/baseTable.vue'
|
|
import baseNewForm from '@/views/intergrationTask/compoments/baseNewForm'
|
|
import { getApiModuleApi } from '@/api/apiChunks'
|
|
import { deepClone } from '@/utils/index.js'
|
|
import { getUserModuleApi } from '@/api/integrationOption/integrationOption'
|
|
import basePage from '@/views/intergrationTask/compoments/basePage.vue'
|
|
import { authApi } from '@/api/apis/auth'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
mainLoading: false,
|
|
saveLoading: false,
|
|
options: [],
|
|
// 角色字典
|
|
roleDist: {},
|
|
addSwitch: false,
|
|
tabLoading: false,
|
|
tableColumn: [
|
|
{
|
|
title: '来源类型',
|
|
id: 'sourceType'
|
|
},
|
|
{
|
|
title: '来源应用',
|
|
id: 'appName'
|
|
},
|
|
{
|
|
title: '触发类型',
|
|
id: 'triggerType'
|
|
},
|
|
{
|
|
title: '来源编码',
|
|
id: 'sourceCodeName'
|
|
},
|
|
{
|
|
title: '新增接口',
|
|
id: 'addName'
|
|
},
|
|
{
|
|
title: '修改接口',
|
|
id: 'updateName'
|
|
},
|
|
{
|
|
title: '删除接口',
|
|
id: 'deleteName'
|
|
},
|
|
{
|
|
title: '启用/停用',
|
|
id: 'enabledState'
|
|
},
|
|
{ title: '操作', id: 'operation' }
|
|
],
|
|
tableData: [],
|
|
pageModel: {
|
|
pageIndex: 1,
|
|
total: 10,
|
|
limit: 10
|
|
},
|
|
addRole: '',
|
|
settingFormShow: false,
|
|
serviceOptions: []
|
|
}
|
|
},
|
|
methods: {
|
|
//保存/编辑成功
|
|
saveSuccessHandle() {
|
|
this.settingFormShow = false
|
|
this.getTableData()
|
|
},
|
|
//这里需要拿到应用下啦为后续找中文环节做准备
|
|
async initSelect() {
|
|
const res = await authApi('sysApplicationService', '', 'queryEntity', '', {})
|
|
console.log(res)
|
|
this.serviceOptions.options = []
|
|
res.attribute.forEach(item => {
|
|
this.serviceOptions.push({
|
|
id: item.id,
|
|
label: item.name
|
|
})
|
|
})
|
|
return true
|
|
},
|
|
//获取tableData
|
|
async getTableData() {
|
|
const res = await authApi('mdmModuleService', '', 'queryMdmSource', '', {
|
|
mdmId: this.$route.query.id
|
|
})
|
|
this.tableData = res.attribute
|
|
console.log(this.tableData, 'table')
|
|
//这边需要开始处理应用列表、新增修改删除接口找中文环节
|
|
this.tableData.forEach(async(item) => {
|
|
console.log('???', this.serviceOptions)
|
|
let obj = this.serviceOptions.find(ele => {
|
|
return ele.id === item.sourceName
|
|
})
|
|
this.$set(item, 'appName', obj.label)
|
|
let labelDist = {}
|
|
let plugInDist = {}
|
|
const res2 = await authApi('sysApplicationApiService', '', 'queryEntity', '', {
|
|
appId: item.appId
|
|
})
|
|
res2.attribute.forEach((item) => {
|
|
labelDist[item.id] = item.apiName
|
|
})
|
|
if (item.deleteApi) {
|
|
this.$set(item, 'deleteName', labelDist[item.deleteApi])
|
|
}
|
|
if (item.updateApi) {
|
|
this.$set(item, 'updateName', labelDist[item.updateApi])
|
|
}
|
|
if (item.addApi) {
|
|
this.$set(item, 'addName', labelDist[item.addApi])
|
|
}
|
|
if (item.sourceType == 2 && item.sourceCode) {
|
|
this.$set(item, 'sourceCodeName', labelDist[item.sourceCode])
|
|
}
|
|
//走插件开始找
|
|
if (item.sourceType == 1 && item.sourceCode) {
|
|
this.openLoading('detail')
|
|
const res = await authApi('sysApplicationPluginService', '', 'queryEntity', '', {
|
|
appId: item.sourceName
|
|
})
|
|
res.attribute.forEach((item) => {
|
|
plugInDist[item.id] = item.pluginName
|
|
})
|
|
this.$set(item, 'sourceCodeName', plugInDist[item.sourceCode])
|
|
|
|
}
|
|
})
|
|
|
|
},
|
|
//保存
|
|
sonTableSaveHandle() {
|
|
this.$refs.settingForm.$refs.typeOptionForm.submitForm()
|
|
},
|
|
//设置
|
|
sonTableEditHandle(row) {
|
|
this.settingFormShow = true
|
|
this.$nextTick(() => {
|
|
this.$refs.settingForm.getrowDetails(row.id)
|
|
})
|
|
},
|
|
//删除
|
|
activedOnFunc(row) {
|
|
this.$confirm('确定删除？')
|
|
.then(async(_) => {
|
|
this.openLoading('submit')
|
|
const res = await authApi('mdmModuleService', '', 'deleteMdmSource', '', {
|
|
id: row.id
|
|
})
|
|
this.$vmNews('删除成功', 'success')
|
|
this.getTableData()
|
|
})
|
|
.catch((_) => {
|
|
})
|
|
},
|
|
//添加
|
|
addRowHandle() {
|
|
this.settingFormShow = true
|
|
},
|
|
async init() {
|
|
this.mainLoading = true
|
|
const res = await getApiModuleApi({
|
|
tl: 'mdmService',
|
|
as: 'mdmService',
|
|
dj: 'queryMdmModuleRule'
|
|
}, { id: this.$route.query.id })
|
|
res.attribute.forEach(item => {
|
|
item.mdmModuleRoleButtonEntities.forEach(ele => {
|
|
item[ele.buttonType] = true
|
|
})
|
|
})
|
|
this.mainLoading = false
|
|
this.tableData = res.attribute
|
|
},
|
|
//close
|
|
dialogCloseHandle() {
|
|
this.addRole = ''
|
|
},
|
|
//add
|
|
addHandle() {
|
|
this.addSwitch = true
|
|
},
|
|
// 页码
|
|
currentChangeHandle(pageModel) {
|
|
this.pageModel = pageModel
|
|
this.$nextTick(() => {
|
|
})
|
|
}
|
|
|
|
},
|
|
components: {
|
|
baseNewForm,
|
|
BaseTable,
|
|
baseDialog,
|
|
baseNewSelect,
|
|
basePage,
|
|
baseRightDialog,
|
|
settingForm
|
|
},
|
|
created() {
|
|
this.initSelect().then(() => {
|
|
this.getTableData()
|
|
})
|
|
|
|
this.$emit('flashActive', 3)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.receiptsAddRow {
|
|
margin-top: 30px;
|
|
border: 1px dotted #ccc;
|
|
text-align: center;
|
|
height: 50px;
|
|
line-height: 50px;
|
|
}
|
|
|
|
::v-deep .el-button {
|
|
border-radius: 16px;
|
|
}
|
|
|
|
::v-deep .el-form-item {
|
|
display: block !important;
|
|
}
|
|
|
|
.checkChunk {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.wrap {
|
|
background-color: #fbfbfb;
|
|
width: 100%;
|
|
overflow: auto;
|
|
|
|
> .btn {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
|
|
> .chunk {
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
|
|
> .main {
|
|
margin-top: 10px;
|
|
background: #fff;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
|
|
.btn {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
footer {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.addBox {
|
|
> .chunk {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.btnList {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.settingBtn {
|
|
cursor: pointer;
|
|
width: 24px;
|
|
height: 24px;
|
|
background: #EBEBED;
|
|
border-radius: 6px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
> img {
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
}
|
|
|
|
.deleBtn {
|
|
cursor: pointer;
|
|
margin-left: 10px;
|
|
width: 24px;
|
|
height: 24px;
|
|
background: #EBEBED;
|
|
border-radius: 6px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
> img {
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|