471 lines
12 KiB
Vue
471 lines
12 KiB
Vue
|
<template>
|
|||
|
|
<div class="wraaap">
|
|||
|
|
<div class="left">
|
|||
|
|
<BaseMenuTree
|
|||
|
|
:menuData="treeData"
|
|||
|
|
:filterShow="true"
|
|||
|
|
:Allshow="false"
|
|||
|
|
:treeButton="true"
|
|||
|
|
:filterButtonShow="true"
|
|||
|
|
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="'60vh'"
|
|||
|
|
:border="false"
|
|||
|
|
></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";
|
|||
|
|
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: "task_code",
|
|||
|
|
row: 8,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: "input",
|
|||
|
|
title: "任务名称",
|
|||
|
|
id: "task_name",
|
|||
|
|
row: 8,
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
funData: [
|
|||
|
|
//table操作
|
|||
|
|
{
|
|||
|
|
type: "edit",
|
|||
|
|
text: "编辑",
|
|||
|
|
color: "#5a9cf8",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: "view",
|
|||
|
|
text: "查看",
|
|||
|
|
color: "#5a9cf8",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: "dele",
|
|||
|
|
text: "删除",
|
|||
|
|
color: "#e47470",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
tableData: [{ taskCode: "测试", taskName: "123" }], //table主表数据
|
|||
|
|
tableColumn: [
|
|||
|
|
//数据咧数据
|
|||
|
|
{
|
|||
|
|
id: "task_code",
|
|||
|
|
title: "任务编码",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: "task_name",
|
|||
|
|
title: "任务名称",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: "task_classes",
|
|||
|
|
title: "任务分类",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: "task_cron",
|
|||
|
|
title: "任务策略",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: "fun_info",
|
|||
|
|
title: "功能介绍",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: "remark",
|
|||
|
|
title: "备注",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
treeProps: {
|
|||
|
|
children: "childClassifications",
|
|||
|
|
label: "class_name",
|
|||
|
|
},
|
|||
|
|
treeTitle: "",
|
|||
|
|
treeRuleForm: {},
|
|||
|
|
treeAddFlag: false,
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
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: "integrationTaskClassificationService",
|
|||
|
|
as: "integrationTaskClassification",
|
|||
|
|
dj: "queryTaskClassification",
|
|||
|
|
},
|
|||
|
|
{}
|
|||
|
|
);
|
|||
|
|
if (res.status == 200) {
|
|||
|
|
this.treeData = res.attribute;
|
|||
|
|
}
|
|||
|
|
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: "integrationTask",
|
|||
|
|
dj: "queryListJson",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
pageNum: this.pageModel.pageIndex,
|
|||
|
|
pageSize: this.pageModel.limit,
|
|||
|
|
query_condition: { ...obj },
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
console.log(res);
|
|||
|
|
if (res.status == 200) {
|
|||
|
|
this.tableData = res.attribute;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 搜索按钮
|
|||
|
|
searchHandle() {
|
|||
|
|
this.initTableData({ ...this.searchForm });
|
|||
|
|
},
|
|||
|
|
// 重置按钮
|
|||
|
|
resizeSearchHandle() {
|
|||
|
|
this.searchForm = {};
|
|||
|
|
},
|
|||
|
|
// 新建路由跳转
|
|||
|
|
newPage() {
|
|||
|
|
this.$router.push({ name: "taskAdd" });
|
|||
|
|
},
|
|||
|
|
// 暂无作用
|
|||
|
|
homeHandleNodeClick(data) {
|
|||
|
|
this.pageModel.pageIndex = 1;
|
|||
|
|
this.pageModel.total = 0;
|
|||
|
|
this.pageModel.limit = 10;
|
|||
|
|
this.searchForm = {};
|
|||
|
|
this.tableData = [];
|
|||
|
|
this.lookFlag = false;
|
|||
|
|
this.newFlag = false;
|
|||
|
|
},
|
|||
|
|
// 页面
|
|||
|
|
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,
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
// 操作框的宽度
|
|||
|
|
funWidth() {
|
|||
|
|
return this.funData.length * 70;
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
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>
|