Skip to content

S
so-manage-ui
Commit ef45054b authored by 张俊's avatar 张俊
Browse files
Options

[feat](任务管理): 静态页面完成

parent c151e788
Hide whitespace changes
Inline Side-by-side
Showing with 496 additions and 276 deletions
src/components/bg-breadcrumb.vue
View file @ ef45054b
<template> <template>
<div class="bg-breadcrumb"> <div class="bg-breadcrumb">
<el-breadcrumb separator="/"> <el-breadcrumb separator="/">
<el-breadcrumb-item v-if="state.breadcrumbData.length>=2" v-for="(item,index) in state.dataArr" :to="{ path: item.path }"> {{item.name}} </el-breadcrumb-item> <el-breadcrumb-item
<el-breadcrumb-item> {{state.breadcrumbData[state.breadcrumbData.length-1].name}} </el-breadcrumb-item> v-if="state.breadcrumbData.length >= 2"
v-for="(item, index) in state.dataArr"
:to="{ path: item.path }">
{{ item.name }}
</el-breadcrumb-item>
<el-breadcrumb-item> {{ state.breadcrumbData[state.breadcrumbData.length - 1].name }} </el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
</div> </div>
</template> </template>
<script setup> <script setup>
import { reactive, ref,onBeforeMount,toRefs } from 'vue' import { reactive, ref, onBeforeMount, toRefs } from "vue";
import { useRouter,useRoute } from 'vue-router' import { useRouter, useRoute } from "vue-router";
import store from "@/store"; import store from "@/store";
import { ElMessage } from 'element-plus' import { ElMessage } from "element-plus";
const router = useRouter() const router = useRouter();
const route = useRoute() const route = useRoute();
const state = reactive({ const state = reactive({
dataArr:[], dataArr: [],
breadcrumbData:[] breadcrumbData: [],
}) });
const props = defineProps({ const props = defineProps({
isMenu:{ isMenu: {
type:Boolean, type: Boolean,
default:false default: false,
} },
}) });
const getBreadcrumbData = (menuObj,menu,path)=>{ const getBreadcrumbData = (menuObj, menu, path) => {
//获取整体需要路径 //获取整体需要路径
let parentPath = menuObj[path].rowPath.slice(1,menuObj[path].rowPath.length).split('.') let parentPath = menuObj[path].rowPath.slice(1, menuObj[path].rowPath.length).split(".");
getFirstPath(parentPath,menu) getFirstPath(parentPath, menu);
//有2层以上的面包屑显示,则继续向下处理 //有2层以上的面包屑显示,则继续向下处理
if(parentPath.length>=2){ if (parentPath.length >= 2) {
getOtherPath(parentPath,menu) getOtherPath(parentPath, menu);
} }
} };
const getFirstPath = (parentPath,menu)=>{ const getFirstPath = (parentPath, menu) => {
let tempMenu = menu[parentPath[0]] let tempMenu = menu[parentPath[0]];
if (!props.isMenu) { if (!props.isMenu) {
tempMenu = tempMenu.children[parentPath[1]] tempMenu = tempMenu.children[parentPath[1]];
} }
//目录则跳转第一个子类，菜单子菜单则跳转自身 //目录则跳转第一个子类，菜单子菜单则跳转自身
if(tempMenu.menuType==0){ if (tempMenu.menuType == 0) {
if(tempMenu.children&&tempMenu.children.length){ if (tempMenu.children && tempMenu.children.length) {
for (let index = 0; index < tempMenu.children.length; index++) { for (let index = 0; index < tempMenu.children.length; index++) {
const e = tempMenu.children[index]; const e = tempMenu.children[index];
if(e.menuType!==0){ if (e.menuType !== 0) {
state.breadcrumbData.push( state.breadcrumbData.push({
{ path: e.path,
path:e.path, name: tempMenu.menuName,
name:tempMenu.menuName });
} break;
) }
break
} }
} }
} else {
state.breadcrumbData.push({
path: tempMenu.path,
name: tempMenu.menuName,
});
} }
}else{ };
state.breadcrumbData.push(
{
path:tempMenu.path,
name:tempMenu.menuName
}
)
}
}
const getOtherPath = (parentPath,menu)=>{
let tempMenu = menu[parentPath[0]]
let index
if (!props.isMenu) {
index = 2
tempMenu = tempMenu.children[parentPath[1]].children||[]
}else {
tempMenu = tempMenu.children || []
index = 1
}
if(tempMenu.length&&parentPath[index]){
getPath(tempMenu,parentPath,index)
}
}
const getPath = (tempMenu,parentPath,index)=>{ const getOtherPath = (parentPath, menu) => {
if(!tempMenu[parentPath[index]]){ let tempMenu = menu[parentPath[0]];
return let index;
} if (!props.isMenu) {
tempMenu = tempMenu[parentPath[index]] index = 2;
index = index+1 tempMenu = tempMenu.children[parentPath[1]].children || [];
state.breadcrumbData.push( } else {
{ tempMenu = tempMenu.children || [];
path:tempMenu.path, index = 1;
name:tempMenu.menuName
} }
) if (tempMenu.length && parentPath[index]) {
if(tempMenu.children&&tempMenu.children.length&&parentPath[index]){ getPath(tempMenu, parentPath, index);
getPath(tempMenu.children,parentPath,index)
}
}
onBeforeMount(()=>{
getBreadcrumbData(store.state.menuObj,store.state.menu,route.path)
state.breadcrumbData.forEach((e,idx) => {
if(idx!==state.breadcrumbData.length-1){
state.dataArr.push(e)
} }
}); };
})
const getPath = (tempMenu, parentPath, index) => {
if (!tempMenu[parentPath[index]]) {
return;
}
tempMenu = tempMenu[parentPath[index]];
index = index + 1;
state.breadcrumbData.push({
path: tempMenu.path,
name: tempMenu.menuName,
});
if (tempMenu.children && tempMenu.children.length && parentPath[index]) {
getPath(tempMenu.children, parentPath, index);
}
};
onBeforeMount(() => {
getBreadcrumbData(store.state.menuObj, store.state.menu, route.path);
state.breadcrumbData.forEach((e, idx) => {
if (idx !== state.breadcrumbData.length - 1) {
state.dataArr.push(e);
}
});
});
</script> </script>
<style scoped> <style scoped></style>
</style>
src/page/main/auto-maintenance/task-manage/add/finish-use.vue 0 → 100644
View file @ ef45054b
<template>
<div>
<div class="state-box">
<span
><bg-icon style="font-size: 12px; color: #909bb6" icon="#bg-ic-time"></bg-icon> 已经过：{{ props.time }}</span
>
<div class="state-show success" v-if="props.state">
<bg-icon style="color: #429e8a" icon="#bg-ic-s-circle-check"></bg-icon> 执行成功
</div>
<div class="state-show fail" v-else>
<bg-icon style="color: #d75138" icon="#bg-ic-s-circle-close"></bg-icon> 执行失败
</div>
</div>
<div class="log-bg bg-scroll">
<div class="log-box">
<div v-for="(item, i) in stateData.codes" :key="i" class="codes-box">
<span class="codes-num">{{ item.pos + 1 }}</span>
<span class="codes-out" v-html="item.out"></span>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { reactive, ref, onBeforeMount, toRefs } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage } from "element-plus";
const router = useRouter();
const route = useRoute();
const props = defineProps({
codes: {
type: Array,
default: () => [],
},
state: {
type: Boolean,
default: true,
},
time: {
type: String,
default: "",
},
});
const stateData = reactive({
codes: [
{
pos: 0,
out: "SSH password:",
},
{
pos: 1,
out: "[WARNING]: Platform darwin on host 192.168.1.199 is using the discovered Pythoninterpreter at /usr/bin/python3, but future installation of another Pythoninterpreter could change ",
},
{
pos: 2,
out: "the meaning of that path. See",
},
{
pos: 3,
out: "https://docs.ansible.com/ansible-",
},
{
pos: 0,
out: "SSH password:",
},
{
pos: 1,
out: "[WARNING]: Platform darwin on host 192.168.1.199 is using the discovered Pythoninterpreter at /usr/bin/python3, but future installation of another Pythoninterpreter could change ",
},
{
pos: 2,
out: "the meaning of that path. See",
},
{
pos: 3,
out: "https://docs.ansible.com/ansible-",
},
{
pos: 0,
out: "SSH password:",
},
{
pos: 1,
out: "[WARNING]: Platform darwin on host 192.168.1.199 is using the discovered Pythoninterpreter at /usr/bin/python3, but future installation of another Pythoninterpreter could change ",
},
{
pos: 2,
out: "the meaning of that path. See",
},
{
pos: 3,
out: "https://docs.ansible.com/ansible-",
},
{
pos: 3,
out: "https://docs.ansible.com/ansible-",
},
{
pos: 0,
out: "SSH password:",
},
{
pos: 1,
out: "[WARNING]: Platform darwin on host 192.168.1.199 is using the discovered Pythoninterpreter at /usr/bin/python3, but future installation of another Pythoninterpreter could change ",
},
{
pos: 2,
out: "the meaning of that path. See",
},
{
pos: 3,
out: "https://docs.ansible.com/ansible-",
},
{
pos: 3,
out: "https://docs.ansible.com/ansible-",
},
{
pos: 0,
out: "SSH password:",
},
{
pos: 1,
out: "[WARNING]: Platform darwin on host 192.168.1.199 is using the discovered Pythoninterpreter at /usr/bin/python3, but future installation of another Pythoninterpreter could change ",
},
{
pos: 2,
out: "the meaning of that path. See",
},
{
pos: 3,
out: "https://docs.ansible.com/ansible-",
},
{
pos: 3,
out: "https://docs.ansible.com/ansible-",
},
{
pos: 0,
out: "SSH password:",
},
{
pos: 1,
out: "[WARNING]: Platform darwin on host 192.168.1.199 is using the discovered Pythoninterpreter at /usr/bin/python3, but future installation of another Pythoninterpreter could change ",
},
{
pos: 2,
out: "the meaning of that path. See",
},
{
pos: 3,
out: "https://docs.ansible.com/ansible-",
},
],
});
</script>
<style lang="scss" scoped>
.state-box {
width: 100%;
height: 36px;
margin-top: -18px;
margin-bottom: 12px;
position: relative;
font-size: 14px;
color: #404a62;
span {
position: absolute;
left: 0;
top: 10px;
}
.state-show {
width: 200px;
height: 36px;
line-height: 36px;
text-align: center;
border-radius: 4px;
margin: 0 auto;
}
.success {
background-color: #ecf5f4;
}
.fail {
background-color: #fbeeeb;
}
}
.log-bg {
background-color: #f7f7f9;
border-radius: 6px;
padding: 20px;
height: calc(100vh - 370px);
overflow-x: hidden;
.log-box {
width: 100%;
.codes-box {
padding: 6px 0;
display: flex;
display: -webkit-flex;
align-items: center;
font-size: 14px;
}
.codes-num {
width: 60px;
color: #8890a7;
display: inline-block;
height: inherit;
}
.codes-out {
width: calc(100% - 70px);
color: #242c43;
display: inline-block;
white-space: pre-wrap;
word-wrap: break-word;
height: inherit;
}
}
}
</style>
src/page/main/auto-maintenance/task-manage/add/finish.vue
View file @ ef45054b
...@@ -2,8 +2,9 @@ ...@@ -2,8 +2,9 @@
<div class="step-container"> <div class="step-container">
<div class="step-base"> <div class="step-base">
<img src="@/assets/imgs/img_data-complete.png" /> <img src="@/assets/imgs/img_data-complete.png" />
<p class="tips">新增成功</p> <p class="tips" v-if="props.state">新增成功</p>
<div class="apaas_button btns"> <p class="tips" v-else>新增失败</p>
<div class="apaas_button btns" v-if="props.state">
<el-button type="default" @click="goToList"> 返回列表 </el-button> <el-button type="default" @click="goToList"> 返回列表 </el-button>
<el-button type="primary" @click="goStepOne"> 继续新增 </el-button> <el-button type="primary" @click="goStepOne"> 继续新增 </el-button>
</div> </div>
...@@ -18,6 +19,13 @@ import { ElMessage } from "element-plus"; ...@@ -18,6 +19,13 @@ import { ElMessage } from "element-plus";
const router = useRouter(); const router = useRouter();
const route = useRoute(); const route = useRoute();
const props = defineProps({
state: {
type: Boolean,
default: true,
},
});
const emit = defineEmits(["clear"]); const emit = defineEmits(["clear"]);
const goToList = () => { const goToList = () => {
......
src/page/main/auto-maintenance/task-manage/add/index.vue
View file @ ef45054b
...@@ -39,19 +39,44 @@ ...@@ -39,19 +39,44 @@
</el-steps> </el-steps>
</div> </div>
</div> </div>
<div class="content_main log_content_nor" :style="step == 3 ? { height: 'calc(100vh - 234px)' } : {}"> <div
class="content_main log_content_nor"
:style="step == 3 && state.isSave ? { height: 'calc(100vh - 234px)' } : {}">
<base-info v-show="step == 1" :data="state.data" ref="baseInfoRef"></base-info> <base-info v-show="step == 1" :data="state.data" ref="baseInfoRef"></base-info>
<use-content v-show="step == 2" :data="state.data" ref="useContentRef"></use-content> <use-content v-show="step == 2" :data="state.data" ref="useContentRef"></use-content>
<finish v-show="step == 3" @clear="clearData"></finish> <finish v-show="step == 3 && state.isSave" :state="true" @clear="clearData"></finish>
<finish-use v-show="step == 3 && !state.isSave" :state="true" time="00:00:11"></finish-use>
</div> </div>
<div class="content_foot apaas_button" v-if="step == 1 || step == 2"> <div class="content_foot apaas_button" v-if="step == 1 || step == 2 || (step == 3 && !state.isSave)">
<el-button type="default" @click="cancel"> 取消 </el-button> <el-button type="default" v-if="step == 1 || step == 2" @click="cancel"> 取消 </el-button>
<el-button type="default" v-if="step == 2" @click="confirm(-1)"> 上一步 </el-button> <el-button type="default" v-if="step == 2" @click="confirm(-1)"> 上一步 </el-button>
<el-button type="primary" v-if="step == 1" @click="confirm(1)"> 下一步 </el-button> <el-button type="primary" v-if="step == 1" @click="confirm(1)"> 下一步 </el-button>
<el-button type="primary" v-if="step == 2" @click="confirm(1)"> 保存 </el-button> <el-button type="primary" v-if="step == 2" @click="saveTask()"> 保存 </el-button>
<el-button type="success" v-if="step == 2" @click="useScript"> 立即执行 </el-button> <el-button type="success" v-if="step == 2" @click="useScript"> 立即执行 </el-button>
<el-button type="default" v-if="step == 3" @click="cancel"> 返回列表 </el-button>
<el-button type="primary" v-if="step == 3" @click="postScript"> 重新执行 </el-button>
</div> </div>
</div> </div>
<el-dialog class="dialog_box" title="立即执行" v-model="state.useScriptShow" width="1024px">
<div>
<div class="dialog-tips">
<bg-icon icon="#bg-ic-s-circle-warning" style="color: #a9b1c7"></bg-icon> 向执行脚本传递额外的命令行变量。这是
ansible-playbook 的 -e 或 --extra-vars 命令行参数。使用 YAML 或 JSON 提供键/值对，此项为非必填项。
</div>
<bg-inner-tabs v-model="state.useType" :data="state.useData" style="float: left"></bg-inner-tabs>
<div style="clear: both"></div>
<div style="height: 370px">
<bg-code-editor v-model="state.useText"></bg-code-editor>
</div>
</div>
<template v-slot:footer>
<div class="apaas_button">
<el-button type="default" @click="cancelUse">取消</el-button>
<el-button type="primary" @click="confirmUse">保存</el-button>
</div>
</template>
</el-dialog>
</div> </div>
</template> </template>
...@@ -64,6 +89,7 @@ import bgBreadcrumb from "@/components/bg-breadcrumb.vue"; ...@@ -64,6 +89,7 @@ import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
import baseInfo from "./base-info.vue"; import baseInfo from "./base-info.vue";
import useContent from "./use-content.vue"; import useContent from "./use-content.vue";
import finish from "./finish.vue"; import finish from "./finish.vue";
import finishUse from "./finish-use.vue";
const router = useRouter(); const router = useRouter();
const route = useRoute(); const route = useRoute();
...@@ -73,6 +99,11 @@ const useContentRef = ref(null); ...@@ -73,6 +99,11 @@ const useContentRef = ref(null);
const state = reactive({ const state = reactive({
data: {}, data: {},
useScriptShow: false,
useType: 0,
useData: ["yaml", "json"],
useText: "",
isSave: true,
}); });
const cancel = () => { const cancel = () => {
...@@ -82,34 +113,54 @@ const cancel = () => { ...@@ -82,34 +113,54 @@ const cancel = () => {
const confirm = async (val) => { const confirm = async (val) => {
let flag = true; let flag = true;
if (val == 1) { if (val == 1) {
if (step.value == 1) { await baseInfoRef.value
//下一步 .save()
await baseInfoRef.value .then()
.save() .catch(() => {
.then() flag = false;
.catch(() => { });
flag = false;
});
} else if (step.value == 2) {
//保存
await useContentRef.value
.save()
.then(() => {
saveTask();
})
.catch(() => {
flag = false;
});
}
} }
if (flag) { if (flag) {
step.value = step.value + val; step.value = step.value + val;
} }
}; };
const saveTask = () => {}; //保存
const saveTask = async () => {
await useContentRef.value
.save()
.then(() => {
step.value = 3;
//todo:掉接口保存，并获取状态
})
.catch(() => {});
};
const useScript = async () => {
//填写完成才可以进行执行
await useContentRef.value
.save()
.then(() => {
state.useScriptShow = true;
})
.catch(() => {
ElMessage.error("请先完善表单再执行");
});
};
const cancelUse = () => {
state.useScriptShow = false;
};
const useScript = () => {}; const confirmUse = () => {
state.useScriptShow = false;
state.isSave = false;
step.value = 3;
// TODO:调用接口立即执行
postScript();
};
const postScript = () => {};
const clearData = () => { const clearData = () => {
baseInfoRef.value.clear(); baseInfoRef.value.clear();
...@@ -200,4 +251,14 @@ onBeforeMount(() => {}); ...@@ -200,4 +251,14 @@ onBeforeMount(() => {});
.process_complete :deep(.el-step__head.is-finish .el-step__line) { .process_complete :deep(.el-step__head.is-finish .el-step__line) {
background: linear-gradient(to right, #2b4695 100%, #e6e9ef 0%); background: linear-gradient(to right, #2b4695 100%, #e6e9ef 0%);
} }
.dialog-tips {
height: 38px;
line-height: 38px;
background-color: #f7f7f9;
border-radius: 4px;
font-size: 14px;
color: #404a62;
margin-bottom: 16px;
}
</style> </style>
src/page/main/auto-maintenance/task-manage/index.vue
View file @ ef45054b
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<bg-filter-group @search="changeSearch" v-model="filter.search" placeholder="请输入关键字"> <bg-filter-group @search="changeSearch" v-model="filter.search" placeholder="请输入关键字">
<template v-slot:left_action> <template v-slot:left_action>
<div class="apaas_button"> <div class="apaas_button">
<el-button type="primary" @click="register"> <el-button type="primary" @click="gotoPage(`/auto-maintenance/task-manage/add`)">
<bg-icon style="font-size: 12px; color: #fff; margin-right: 8px" icon="#bg-ic-add"></bg-icon> <bg-icon style="font-size: 12px; color: #fff; margin-right: 8px" icon="#bg-ic-add"></bg-icon>
新增 新增
</el-button> </el-button>
...@@ -46,7 +46,10 @@ ...@@ -46,7 +46,10 @@
:select="true" :select="true"
:stripe="true"> :stripe="true">
<template v-slot:name="{ row }"> <template v-slot:name="{ row }">
<span class="can_click_text" @click="getChildren(row)" v-if="row.children"> <span
class="can_click_text"
@click="gotoPage(`/auto-maintenance/task-manage/detail?id=${row.id}`)"
v-if="row.children">
{{ row.name }} {{ row.name }}
</span> </span>
<span v-else> <span v-else>
...@@ -59,9 +62,9 @@ ...@@ -59,9 +62,9 @@
<template v-slot:action="{ row }"> <template v-slot:action="{ row }">
<bg-table-btns2 :limit="3" :tableData="tableRows"> <bg-table-btns2 :limit="3" :tableData="tableRows">
<bg-table-btn @click="useRow(row)">执行任务</bg-table-btn> <bg-table-btn @click="useRow(row)">执行任务</bg-table-btn>
<bg-table-btn @click="editRow(row)">编辑</bg-table-btn> <bg-table-btn @click="gotoPage(`/auto-maintenance/task-manage/edit?id=${row.id}`)">编辑</bg-table-btn>
<bg-table-btn @click="copyRow(row, 1)">复制</bg-table-btn> <bg-table-btn @click="gotoPage(`/auto-maintenance/task-manage/copy?id=${row.id}`)">复制</bg-table-btn>
<bg-table-btn @click="deleteRow(row, 2)">删除</bg-table-btn> <bg-table-btn @click="deleteRow(row)">删除</bg-table-btn>
</bg-table-btns2> </bg-table-btns2>
</template> </template>
</bg-table> </bg-table>
...@@ -75,75 +78,45 @@ ...@@ -75,75 +78,45 @@
</bg-pagination> </bg-pagination>
</div> </div>
</div> </div>
<!-- 新增/编辑弹窗 -->
<!-- <el-dialog
class="dialog_box"
:title="addType == 1 ? '新增' : '编辑'"
v-model="addDialog"
width="758px">
<el-form ref="bgForm" :model="formData" :rules="rules" label-width="80px" class="bg_form">
<el-form-item label="名称" prop="name">
<el-input
v-model.trim="formData.name"
show-word-limit
:maxlength="
nodeClassifyId == 'eb9c7d70-c123-42b7-8e61-dde1b022b669'
? 6
: nodeClassifyId == 'efd9ec3b-7f18-49e2-9d88-bcca022243bb'
? 4
: nodeClassifyId == '949a1138-4995-464e-97a9-424d097eb271'
? 2
: 20
"
placeholder="请输入名称"></el-input>
</el-form-item>
<el-form-item label="描述" prop="describe">
<el-input
v-model="formData.describe"
type="textarea"
:autosize="{ minRows: 5 }"
show-word-limit
maxlength="200"
resize="vertical"
placeholder="请输入描述"></el-input>
</el-form-item>
<el-form-item label="是否启用" prop="state" style="margin-bottom: 0px">
<el-switch
class="bg-switch-ele"
v-model="formData.state"
:active-value="1"
:inactive-value="0"
inline-prompt
active-text="是"
inactive-text="否" />
</el-form-item>
</el-form>
<template v-slot:footer>
<div class="apaas_button">
<el-button type="default" @click="addDialog = false">取 消</el-button>
<el-button type="primary" @click="addConfirm">保 存</el-button>
</div>
</template>
</el-dialog> -->
<!-- 删除弹窗 --> <!-- 删除弹窗 -->
<!-- <el-dialog <el-dialog
class="dialog_box" class="dialog_box"
title="提示" title="提示"
v-model="dialogDelete" v-model="state.dialogDelete"
width="400px" width="400px"
:before-close=" :before-close="
() => { () => {
dialogDelete = false; dialogDelete = false;
} }
"> ">
<div>确定要删除此字典值吗？</div> <div>确定要删除任务吗？</div>
<template v-slot:footer> <template v-slot:footer>
<div class="apaas_button"> <div class="apaas_button">
<el-button type="default" @click="dialogDelete = false">取 消</el-button> <el-button type="default" @click="state.dialogDelete = false">取 消</el-button>
<el-button type="primary" @click="deleteData">确 定</el-button> <el-button type="primary" @click="deleteData">确 定</el-button>
</div> </div>
</template> </template>
</el-dialog> --> </el-dialog>
<el-dialog class="dialog_box" title="立即执行" v-model="state.useScriptShow" width="1024px">
<div>
<div class="dialog-tips">
<bg-icon icon="#bg-ic-s-circle-warning" style="color: #a9b1c7"></bg-icon> 向执行脚本传递额外的命令行变量。这是
ansible-playbook 的 -e 或 --extra-vars 命令行参数。使用 YAML 或 JSON 提供键/值对，此项为非必填项。
</div>
<bg-inner-tabs v-model="state.useType" :data="state.useData" style="float: left"></bg-inner-tabs>
<div style="clear: both"></div>
<div style="height: 370px">
<bg-code-editor v-model="state.useText"></bg-code-editor>
</div>
</div>
<template v-slot:footer>
<div class="apaas_button">
<el-button type="default" @click="cancelUse">取消</el-button>
<el-button type="primary" @click="confirmUse">保存</el-button>
</div>
</template>
</el-dialog>
</div> </div>
</template> </template>
...@@ -157,7 +130,6 @@ import { useRouter, useRoute } from "vue-router"; ...@@ -157,7 +130,6 @@ import { useRouter, useRoute } from "vue-router";
const router = useRouter(); const router = useRouter();
const route = useRoute(); const route = useRoute();
const bgForm = ref(null);
const dataTable = ref(null); const dataTable = ref(null);
const headers = [ const headers = [
{ {
...@@ -191,13 +163,15 @@ const headers = [ ...@@ -191,13 +163,15 @@ const headers = [
]; ];
const state = reactive({ const state = reactive({
bgForm, tableRows: [
typeList: [], // 分类数据 {
typeKeyword: "", // 分类删选关键词 name: 23123,
nodeClassifyId: null, // 当前选中分类的uuid 用于新增字典 times: 1,
nodeId: null, // 当前选中分类的id 用于请求列表 describe: 12313,
timer: null, // 定时器 person: 21323,
tableRows: [], // 表格数据 updated_time: "2021-01-01+TZ",
},
], // 表格数据
selected: [], //选择数据 selected: [], //选择数据
tableTotal: 0, // 表格数据条数 tableTotal: 0, // 表格数据条数
filter: { filter: {
...@@ -206,41 +180,35 @@ const state = reactive({ ...@@ -206,41 +180,35 @@ const state = reactive({
page: 1, page: 1,
limit: 10, limit: 10,
}, // 表格筛选项 }, // 表格筛选项
stateOptions: [
{
name: "全部",
value: "",
},
{
name: "启用",
value: "1",
},
{
name: "禁用",
value: "0",
},
], // 启用禁用
actionRow: null, // 当前操作的数据 actionRow: null, // 当前操作的数据
dialogDelete: false, // 删除弹窗 dialogDelete: false, // 删除弹窗
addType: 0, // useScriptShow: false,
addDialog: false, useType: 0,
formData: { useData: ["yaml", "json"],
name: "",
describe: "",
state: 1,
p_dict_id: "",
},
rules: {
name: [{ required: true, message: "请输入名称", trigger: "blur" }],
describe: [
{ required: true, message: "请输入描述", trigger: "blur" },
{ max: 200, message: "描述最大为200字", trigger: "blur" },
],
state: [{ required: true, message: "请选择是否启用", trigger: "change" }],
},
fatherRow: null,
}); });
const useRow = (row) => {
state.actionRow = row;
state.useScriptShow = true;
};
const cancelUse = () => {
state.useScriptShow = false;
};
const confirmUse = () => {
state.useScriptShow = false;
};
const deleteRow = (row) => {
state.actionRow = row;
state.dialogDelete = true;
};
const deleteData = () => {
state.dialogDelete = false;
};
const selectRows = (data) => { const selectRows = (data) => {
state.selected = data.selection; state.selected = data.selection;
}; };
...@@ -249,39 +217,17 @@ const clearSelected = () => { ...@@ -249,39 +217,17 @@ const clearSelected = () => {
dataTable.value.clearTable(); dataTable.value.clearTable();
}; };
const deleteAllTips = () => {}; const deleteAllTips = () => {
if (state.selected.length > 0) {
const dictLevel = ref(1); state.dialogDelete = true;
} else {
const getChildren = (row) => { ElMessage.error("请先选择要删除任务");
dictLevel.value = 2; }
state.tableRows = row.children || [];
state.tableTotal = row.total_children;
state.fatherRow = row;
}; };
const getTypeList = () => { const gotoPage = (url) => {
let params = { router.push(url);
name: state.typeKeyword, };
};
axios
.get(`/apaas/system/v5/dictionary/classify/list`, { params })
.then((res) => {
if (res.data.code == 200) {
state.typeList = res.data.data || [];
state.nodeClassifyId = state.typeList[0].classify_id || null;
state.nodeId = state.typeList[0].id || null;
if (state.nodeId) {
getTableRows();
}
} else {
ElMessage.error(res.data.data);
}
})
.catch((err) => {
console.log(err);
});
}; // 获取字典分类
const changeSearch = (val) => { const changeSearch = (val) => {
state.filter.search = val; state.filter.search = val;
...@@ -304,7 +250,6 @@ const filterClear = () => { ...@@ -304,7 +250,6 @@ const filterClear = () => {
const getTableRows = () => { const getTableRows = () => {
let params = { ...state.filter }; let params = { ...state.filter };
params.id = state.nodeId;
axios axios
.get(`/apaas/system/v5/dictionary/list`, { .get(`/apaas/system/v5/dictionary/list`, {
params, params,
...@@ -312,24 +257,6 @@ const getTableRows = () => { ...@@ -312,24 +257,6 @@ const getTableRows = () => {
.then((res) => { .then((res) => {
if (res.data.code == 200) { if (res.data.code == 200) {
let data = res.data.data || []; let data = res.data.data || [];
if (dictLevel.value == 1) {
state.tableRows = data;
state.tableTotal = res.data.total;
} else {
let row = data.filter((e) => {
return e.dict_id == state.fatherRow.dict_id;
});
state.tableRows = row[0].children;
state.tableTotal = row[0].total_children;
}
if (state.tableRows.length > 0) {
state.tableRows.forEach((e) => {
e.canMoveUp = true;
e.canMoveDown = true;
});
state.tableRows[0].canMoveUp = false;
state.tableRows[state.tableRows.length - 1].canMoveDown = false;
}
} else { } else {
ElMessage.error(res.data.data); ElMessage.error(res.data.data);
} }
...@@ -346,13 +273,7 @@ const changeSize = (size) => { ...@@ -346,13 +273,7 @@ const changeSize = (size) => {
changePage(1); changePage(1);
}; // 改变每页条数 }; // 改变每页条数
const register = () => { onBeforeMount(() => {});
router.push(`/auto-maintenance/task-manage/add`);
};
onBeforeMount(() => {
getTypeList();
});
const { tableRows, tableTotal, filter } = toRefs(state); const { tableRows, tableTotal, filter } = toRefs(state);
</script> </script>
...@@ -430,4 +351,14 @@ const { tableRows, tableTotal, filter } = toRefs(state); ...@@ -430,4 +351,14 @@ const { tableRows, tableTotal, filter } = toRefs(state);
} }
} }
} }
.dialog-tips {
height: 38px;
line-height: 38px;
background-color: #f7f7f9;
border-radius: 4px;
font-size: 14px;
color: #404a62;
margin-bottom: 16px;
}
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment