539 lines
14 KiB
Vue
539 lines
14 KiB
Vue
<template>
|
||
<div class="wraaap">
|
||
<div class="left">
|
||
<BaseMenuTree
|
||
:menuData="treeData"
|
||
:filterShow="true"
|
||
:Allshow="false"
|
||
:treeButton="false"
|
||
:filterButtonShow="false"
|
||
style="height: 100%"
|
||
:treeProps="treeProps"
|
||
@handleNodeClick="homeHandleNodeClick"
|
||
ref="menuTree"
|
||
@add="treeAddHandle"
|
||
@append="treeAppendHandle"
|
||
@revise="treeReviseHandle"
|
||
@remove="treeRemoveHandle"
|
||
></BaseMenuTree>
|
||
</div>
|
||
<div class="right">
|
||
<header style="background: #fff; padding: 20px">
|
||
<div class="search">
|
||
<BaseNewForm
|
||
:spanNumber="8"
|
||
refName="searchForm"
|
||
:formRow="SearchformRow"
|
||
:formRule="false"
|
||
:ruleForm="searchForm"
|
||
:newFlag="true"
|
||
:isFunBtn="false"
|
||
></BaseNewForm>
|
||
</div>
|
||
<div class="btn">
|
||
<el-button type="primary" @click="searchHandle">搜索</el-button>
|
||
<el-button @click="resizeSearchHandle">重置</el-button>
|
||
</div>
|
||
</header>
|
||
<main style="background: #fff; padding: 20px 20px 0">
|
||
<div style="margin: 0 0 30px 0">
|
||
<el-button type="primary" @click="newPage">新增</el-button>
|
||
</div>
|
||
<div>
|
||
<BaseTable
|
||
ref="mainTable"
|
||
:tableData="tableData"
|
||
:tableColumn="tableColumn"
|
||
:funData="funData"
|
||
:funWidth="funWidth"
|
||
:showIndex="true"
|
||
:tabLoading="mainTabLoading"
|
||
@onFunc="tableButtonHandle"
|
||
:tableHeight="'53vh'"
|
||
:border="false"
|
||
>
|
||
<template #taskStatus="{row}">
|
||
{{ row.taskStatus == 1 ? '启用' : '停用' }}
|
||
</template>
|
||
<template #taskPlugin="{row}">
|
||
{{ pluginDist[row.taskPlugin] }}
|
||
</template>
|
||
</BaseTable>
|
||
</div>
|
||
</main>
|
||
<footer>
|
||
<basePage
|
||
:pageModel="pageModel"
|
||
@update:pageModel="currentChangeHandle"
|
||
></basePage>
|
||
</footer>
|
||
</div>
|
||
<baseRightDialog
|
||
@handleConfirmClick="handleConfirmClick"
|
||
:dialogVisible="rightDialogSwitch"
|
||
:title="treeTitle"
|
||
@handleClose="rightDialogSwitch = false"
|
||
>
|
||
<div class="treeChunk" v-if="treeRuleForm.class_superiors_name">
|
||
<div class="text">上级节点：</div>
|
||
<div class="input">
|
||
<el-input
|
||
:disabled="true"
|
||
v-model="treeRuleForm.class_superiors_name"
|
||
placeholder=""
|
||
></el-input>
|
||
</div>
|
||
</div>
|
||
<div class="treeChunk">
|
||
<div class="text">节点名：</div>
|
||
<div class="input">
|
||
<el-input
|
||
v-model="treeRuleForm.class_name"
|
||
placeholder="请输入节点名"
|
||
></el-input>
|
||
</div>
|
||
</div>
|
||
</baseRightDialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import basePage from './compoments/basePage.vue'
|
||
import BaseMenuTree from './compoments/baseMenuTree'
|
||
import BaseNewForm from './compoments/baseNewForm'
|
||
import BaseTable from './compoments/baseTable'
|
||
import { getUserModuleApi } from '@/api/integrationOption/integrationOption.js'
|
||
import baseRightDialog from '@/components/base/baseRightDialog'
|
||
import { authApi } from '@/api/apis/auth'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
rightDialogSwitch: false, //右侧dialog
|
||
lookFlag: false, //是否打开查看模式
|
||
newFlag: false, //是否打开新增模式
|
||
pageModel: {
|
||
//页码控制
|
||
pageIndex: 1,
|
||
total: 10,
|
||
limit: 10
|
||
},
|
||
mainTabLoading: false, //表格loding控制
|
||
treeData: [
|
||
//左侧分类数据
|
||
{
|
||
label: '测试',
|
||
id: 1,
|
||
children: [
|
||
{
|
||
id: 3,
|
||
label: '哈哈'
|
||
}
|
||
]
|
||
}
|
||
],
|
||
treeForm: { class_name: '', class_superiors: '', class_code: '' },
|
||
searchForm: {}, //搜索框数据
|
||
SearchformRow: [
|
||
//搜索框数据
|
||
{
|
||
elCol: [
|
||
{
|
||
type: 'input',
|
||
title: '任务编码',
|
||
id: 'taskCode',
|
||
row: 8
|
||
},
|
||
{
|
||
type: 'input',
|
||
title: '任务名称',
|
||
id: 'taskName',
|
||
row: 8
|
||
},
|
||
{
|
||
type: 'radio',
|
||
title: '任务状态',
|
||
id: 'taskStatus',
|
||
row: 8,
|
||
options: [
|
||
{
|
||
label: '启用',
|
||
id: '1'
|
||
},
|
||
{
|
||
label: '停用',
|
||
id: '2'
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
,
|
||
{
|
||
elCol: [
|
||
{
|
||
type: 'select',
|
||
title: '插件',
|
||
id: 'taskPlugin',
|
||
row: 8,
|
||
options: []
|
||
}
|
||
]
|
||
}
|
||
],
|
||
funData: [
|
||
//table操作
|
||
{
|
||
type: 'edit',
|
||
text: '编辑',
|
||
color: '#5a9cf8'
|
||
},
|
||
{
|
||
type: 'view',
|
||
text: '查看',
|
||
color: '#5a9cf8'
|
||
},
|
||
{
|
||
type: 'dele',
|
||
text: '删除',
|
||
color: '#e47470'
|
||
}
|
||
],
|
||
tableData: [], //table主表数据
|
||
tableColumn: [
|
||
//数据咧数据
|
||
{
|
||
id: 'taskName',
|
||
title: '任务名称'
|
||
},
|
||
{
|
||
id: 'taskCode',
|
||
title: '任务编码'
|
||
},
|
||
{
|
||
id: 'taskStatus',
|
||
title: '任务状态'
|
||
},
|
||
{
|
||
id: 'taskPlugin',
|
||
title: '插件'
|
||
},
|
||
{
|
||
id: 'taskCron',
|
||
title: '任务策略'
|
||
}
|
||
],
|
||
treeProps: {
|
||
children: 'childClassifications',
|
||
label: 'name'
|
||
},
|
||
treeTitle: '',
|
||
treeRuleForm: {},
|
||
treeAddFlag: false,
|
||
appId: '',//左侧树id
|
||
pluginDist: {}//插件字典用于列表显示
|
||
}
|
||
},
|
||
methods: {
|
||
// 右dialog提交
|
||
async handleConfirmClick() {
|
||
if (!this.treeRuleForm.class_name) {
|
||
this.$message({
|
||
type: 'error',
|
||
message: '请输入树名称'
|
||
})
|
||
return
|
||
}
|
||
if (this.treeAddFlag) {
|
||
const res = await getUserModuleApi(
|
||
{
|
||
tl: 'integrationTaskClassificationService',
|
||
as: 'integrationTaskClassification',
|
||
dj: 'saveTaskClassification'
|
||
},
|
||
this.treeRuleForm
|
||
)
|
||
if (res.status == 200) {
|
||
this.$message({
|
||
type: 'success',
|
||
message: '保存成功'
|
||
})
|
||
this.rightDialogSwitch = false
|
||
this.initTreeData()
|
||
}
|
||
} else {
|
||
const res = await getUserModuleApi(
|
||
{
|
||
tl: 'integrationTaskClassificationService',
|
||
as: 'integrationTaskClassification',
|
||
dj: 'updateTaskClassification'
|
||
},
|
||
this.treeRuleForm
|
||
)
|
||
if (res.status == 200) {
|
||
this.$message({
|
||
type: 'success',
|
||
message: '保存成功'
|
||
})
|
||
this.rightDialogSwitch = false
|
||
this.initTreeData()
|
||
}
|
||
}
|
||
},
|
||
// 树初始化
|
||
async initTreeData() {
|
||
const res = await getUserModuleApi(
|
||
{
|
||
tl: 'sysApplicationService',
|
||
as: '',
|
||
dj: 'queryEntity'
|
||
},
|
||
{}
|
||
)
|
||
if (res.status == 200) {
|
||
console.log(res)
|
||
this.treeData = res.attribute
|
||
this.$nextTick(() => {
|
||
this.$refs.menuTree.clickFirst()
|
||
})
|
||
}
|
||
console.log(res, '🌲')
|
||
},
|
||
// 树添加
|
||
treeAppendHandle(data) {
|
||
this.treeRuleForm = {}
|
||
this.treeTitle = '子节点增加'
|
||
this.treeAddFlag = true
|
||
this.$set(this.treeRuleForm, 'class_superiors_name', data.class_name)
|
||
this.$set(this.treeRuleForm, 'class_superiors', data.id)
|
||
this.$set(this.treeRuleForm, 'class_code', data.class_code)
|
||
this.$set(this.treeRuleForm, 'lvl', String(data.lvl * 1 + 1))
|
||
this.rightDialogSwitch = true
|
||
},
|
||
treeReviseHandle(data) {
|
||
this.treeRuleForm = {}
|
||
this.treeAddFlag = false
|
||
this.rightDialogSwitch = true
|
||
this.$set(this.treeRuleForm, 'id', data.id)
|
||
this.$set(this.treeRuleForm, 'class_code', data.class_code)
|
||
this.$set(this.treeRuleForm, 'class_name', data.class_name)
|
||
this.$set(this.treeRuleForm, 'lvl', String(data.lvl))
|
||
this.treeTitle = '子节点编辑'
|
||
},
|
||
treeRemoveHandle(data) {
|
||
this.$confirm('确认删除？')
|
||
.then(async() => {
|
||
console.log(1)
|
||
const res = await getUserModuleApi(
|
||
{
|
||
tl: 'integrationTaskClassificationService',
|
||
as: 'integrationTaskClassification',
|
||
dj: 'updateTaskClassificationSts'
|
||
},
|
||
{
|
||
id: data.id //任务id
|
||
}
|
||
)
|
||
console.log(res)
|
||
if (res.status == 200) {
|
||
this.$nextTick(() => {
|
||
this.initTreeData()
|
||
})
|
||
}
|
||
})
|
||
.catch(() => {
|
||
})
|
||
},
|
||
// 左侧树加号点击事件
|
||
treeAddHandle() {
|
||
this.treeRuleForm = {}
|
||
this.treeAddFlag = true
|
||
this.rightDialogSwitch = true
|
||
this.treeTitle = '根节点增加'
|
||
this.$set(this.treeRuleForm, 'class_code', new Date().getTime())
|
||
this.$set(this.treeRuleForm, 'lvl', '0')
|
||
},
|
||
// 初始化表单
|
||
async initTableData(obj = {}) {
|
||
const res = await getUserModuleApi(
|
||
{
|
||
tl: 'integrationTaskService',
|
||
as: '',
|
||
dj: 'queryEntityPage'
|
||
},
|
||
{
|
||
pageNum: this.pageModel.pageIndex,
|
||
pageSize: this.pageModel.limit,
|
||
task_app: this.appId,
|
||
...obj,
|
||
}
|
||
)
|
||
console.log(res, 'tabledata')
|
||
if (res.status == 200) {
|
||
this.tableData = res.attribute.list
|
||
this.pageModel.total = res.attribute.total
|
||
}
|
||
},
|
||
// 搜索按钮
|
||
searchHandle() {
|
||
this.initTableData({ ...this.searchForm })
|
||
},
|
||
// 重置按钮
|
||
resizeSearchHandle() {
|
||
this.searchForm = {}
|
||
},
|
||
// 新建路由跳转
|
||
newPage() {
|
||
this.$router.push({ name: 'taskAdd' })
|
||
},
|
||
// 树点击事件
|
||
homeHandleNodeClick(data) {
|
||
console.log(data, 'data')
|
||
this.pageModel.pageIndex = 1
|
||
this.pageModel.total = 0
|
||
this.pageModel.limit = 10
|
||
this.appId = data.id
|
||
this.searchForm = {}
|
||
this.tableData = []
|
||
this.lookFlag = false
|
||
this.newFlag = false
|
||
//树点击完毕后调用插件查询接口
|
||
this.plugSelectInit()
|
||
//初始化表单
|
||
this.initTableData()
|
||
},
|
||
//查询条件下啦接口
|
||
async plugSelectInit() {
|
||
const res = await authApi('sysApplicationPluginService', '', 'queryEntity', '', {
|
||
appId: this.appId
|
||
})
|
||
if (res.status === '200') {
|
||
this.pluginDist = {}
|
||
res.attribute.forEach(item => {
|
||
item.label = item.pluginName
|
||
this.$set(this.pluginDist, item.id, item.label)
|
||
})
|
||
this.SearchformRow[1].elCol[0].options = res.attribute
|
||
console.log(this.SearchformRow[1].elCol[0], 'this.SearchformRow[1].elCol[0]')
|
||
}
|
||
console.log(res, '拿到插件列表')
|
||
},
|
||
// 页面
|
||
currentChangeHandle(pageModel) {
|
||
this.pageModel = pageModel
|
||
this.$nextTick(() => {
|
||
this.initTableData({ ...this.searchForm })
|
||
})
|
||
},
|
||
// 表格按钮
|
||
tableButtonHandle(val, item) {
|
||
if (item.type === 'view') {
|
||
this.$router.push({
|
||
name: 'taskAdd',
|
||
query: { id: val.id, lookFlag: true }
|
||
})
|
||
} else if (item.type === 'dele') {
|
||
console.log(111)
|
||
this.$confirm('确认删除？')
|
||
.then(async() => {
|
||
const res = await getUserModuleApi(
|
||
{
|
||
tl: 'integrationTaskService',
|
||
as: 'integrationTask',
|
||
dj: 'updateIntegrationTaskSts'
|
||
},
|
||
{
|
||
id: val.id //任务id
|
||
}
|
||
)
|
||
if (res.status == 200) {
|
||
if (
|
||
this.pageModel.total - 1 + this.pageModel.limit <=
|
||
this.pageModel.pageIndex * this.pageModel.limit
|
||
) {
|
||
this.pageModel.pageIndex--
|
||
}
|
||
this.$nextTick(() => {
|
||
this.initTableData({ ...this.searchForm })
|
||
})
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
console.log(err)
|
||
})
|
||
} else if (item.type === 'edit') {
|
||
this.$router.push({ name: 'taskAdd', query: { id: val.id } })
|
||
}
|
||
}
|
||
},
|
||
components: {
|
||
BaseMenuTree,
|
||
BaseNewForm,
|
||
BaseTable,
|
||
basePage,
|
||
baseRightDialog
|
||
},
|
||
mounted() {
|
||
// this.$refs.menuTree.clickFirst();
|
||
// this.initTableData()
|
||
this.initTreeData()
|
||
},
|
||
computed: {
|
||
// 操作框的宽度
|
||
funWidth() {
|
||
return this.funData.length * 70
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.treeChunk {
|
||
padding: 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
> .text {
|
||
flex: 1;
|
||
}
|
||
|
||
> .input {
|
||
flex: 5;
|
||
}
|
||
}
|
||
|
||
.wraaap {
|
||
display: flex;
|
||
|
||
.right {
|
||
width: 85%;
|
||
margin-left: 20px;
|
||
border-radius: 20px !important;
|
||
}
|
||
|
||
.left {
|
||
border-radius: 20px;
|
||
width: 15%;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.btn {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
main {
|
||
margin-top: 20px;
|
||
border-radius: 20px;
|
||
}
|
||
|
||
footer {
|
||
margin-top: 15px;
|
||
}
|
||
|
||
header {
|
||
border-radius: 20px;
|
||
}
|
||
}
|
||
</style>
|