Skip to content

B
bigDataSystem
Commit f2e6a7bf authored by LiXuyang's avatar LiXuyang
Browse files
Options

任务流-禁用

parent 96344528
Show whitespace changes
Inline Side-by-side
Showing with 263 additions and 255 deletions
src/views/taskScheduling/taskFlow/index.vue
View file @ f2e6a7bf
<template> <template>
<PageWrapper title="任务流" contentBackground headerSticky> <PageWrapper title="任务流" contentBackground headerSticky>
<template #extra> <template #extra>
<div style="display: flex;"> <div style="display: flex">
<div> <div>
<a-button style="border-color:transparent"> <a-button style="border-color: transparent">
<Icon icon="ant-design:caret-right-outlined" style="color: blue" size="24"/> <Icon icon="ant-design:caret-right-outlined" style="color: blue" size="24" />
<p>运行</p> <p>运行</p>
</a-button> </a-button>
</div> </div>
<div> <div>
<a-button style="border-color:transparent "> <a-button style="border-color: transparent">
<Icon icon="ant-design:send-outlined" style="color: blue" size="24"/> <Icon icon="ant-design:send-outlined" style="color: blue" size="24" />
<p>发布</p> <p>发布</p>
</a-button> </a-button>
</div> </div>
<div> <div>
<a-button style="border-color:transparent " <a-button
@click="batchOffline"> style="border-color: transparent"
<Icon icon="ant-design:cloud-download-outlined" style="color: blue" size="24" /> @click="batchOffline"
:disabled="checkDisabled()"
type="link"
>
<Icon icon="ant-design:cloud-download-outlined" size="24" />
<p>下线</p> <p>下线</p>
</a-button> </a-button>
</div> </div>
<div> <div>
<a-button style="border-color:transparent "> <a-button style="border-color: transparent">
<Icon icon="ant-design:tag-outlined" style="color: blue" size="24"/> <Icon icon="ant-design:tag-outlined" style="color: blue" size="24" />
<p>设置业务标签</p> <p>设置业务标签</p>
</a-button> </a-button>
</div> </div>
<div> <div>
<a-button style="border-color:transparent "> <a-button style="border-color: transparent">
<Icon icon="ant-design:reconciliation-outlined" style="color: blue" size="24"/> <Icon icon="ant-design:reconciliation-outlined" style="color: blue" size="24" />
<p>复制到</p> <p>复制到</p>
</a-button> </a-button>
</div> </div>
<div> <div>
<a-button style="border-color:transparent "> <a-button style="border-color: transparent">
<Icon icon="ant-design:delete-outlined" style="color: red" size="24"/> <Icon icon="ant-design:delete-outlined" style="color: red" size="24" />
<p>删除</p> <p>删除</p>
</a-button> </a-button>
</div> </div>
<div> <div>
<a-button style="border-color:transparent "> <a-button style="border-color: transparent">
<Icon icon="ant-design:folder-open-outlined" style="color: blue" size="24"/> <Icon icon="ant-design:folder-open-outlined" style="color: blue" size="24" />
<p>移动</p> <p>移动</p>
</a-button> </a-button>
</div> </div>
<div> <div>
<a-button style="border-color:transparent "> <a-button style="border-color: transparent">
<Icon icon="ant-design:arrow-up-outlined" style="color: blue" size="24"/> <Icon icon="ant-design:arrow-up-outlined" style="color: blue" size="24" />
<p>导出</p> <p>导出</p>
</a-button> </a-button>
</div> </div>
<div> <div>
<a-button style="border-color:transparent "> <a-button style="border-color: transparent">
<Icon icon="ant-design:arrow-down-outlined" style="color: blue" size="24"/> <Icon icon="ant-design:arrow-down-outlined" style="color: blue" size="24" />
<p>导入</p> <p>导入</p>
</a-button> </a-button>
</div> </div>
<div> <div>
<a-button style="border-color:transparent "> <a-button style="border-color: transparent">
<Icon icon="ant-design:folder-add-outlined" style="color: blue" size="24"/> <Icon icon="ant-design:folder-add-outlined" style="color: blue" size="24" />
<p>新建文件夹</p> <p>新建文件夹</p>
</a-button> </a-button>
</div> </div>
<div> <div>
<a-button style="border-color:transparent "> <a-button style="border-color: transparent">
<Icon icon="ant-design:plus-square-outlined" style="color: blue" size="24"/> <Icon icon="ant-design:plus-square-outlined" style="color: blue" size="24" />
<p>新建文件</p> <p>新建文件</p>
</a-button> </a-button>
</div> </div>
...@@ -73,14 +77,16 @@ ...@@ -73,14 +77,16 @@
</template> </template>
<template #footer> <template #footer>
<div class="flex"> <div class="flex">
<ModelTree class="w-1/4" @select="handleSelect"/> <ModelTree class="w-1/4" @select="handleSelect" />
<BasicTable <BasicTable
class="w-3/4" class="w-3/4"
@register="registerTable" @register="registerTable"
:searchInfo="searchInfo"> :searchInfo="searchInfo"
ref="rightTable"
>
<template #tableTitle> <template #tableTitle>
<div style="display: flex;align-items: center"> <div style="display: flex; align-items: center">
<BasicForm @register="registerForm" style="margin-bottom: -20px"/> <BasicForm @register="registerForm" style="margin-bottom: -20px" />
</div> </div>
</template> </template>
<template #bodyCell="{ column, record }"> <template #bodyCell="{ column, record }">
...@@ -88,40 +94,40 @@ ...@@ -88,40 +94,40 @@
<TableAction <TableAction
:actions="[ :actions="[
{ {
icon:'ant-design:exclamation-circle-outlined', icon: 'ant-design:exclamation-circle-outlined',
tooltip:'详情', tooltip: '详情',
onClick: handleConsanguinity.bind(null, record), onClick: handleConsanguinity.bind(null, record),
ifShow: () => { ifShow: () => {
return record.releaseStatus !== ''; // 这里只是实现树文件夹按钮 return record.releaseStatus !== ''; // 这里只是实现树文件夹按钮
}, },
}, },
{ {
icon:'ant-design:caret-right-outlined', icon: 'ant-design:caret-right-outlined',
tooltip:'运行', tooltip: '运行',
onClick: RUN.bind(null, record), onClick: RUN.bind(null, record),
ifShow: () => { ifShow: () => {
return record.releaseStatus === '已发布'; return record.releaseStatus === '已发布';
}, },
}, },
{ {
icon:'ant-design:cloud-download-outlined', icon: 'ant-design:cloud-download-outlined',
tooltip:'下线', tooltip: '下线',
onClick: handleOffline.bind(null, record), onClick: handleOffline.bind(null, record),
ifShow: () => { ifShow: () => {
return record.releaseStatus !== ''; // 根据业务控制是否显示: 非enable状态的不显示启用按钮 return record.releaseStatus !== ''; // 根据业务控制是否显示: 非enable状态的不显示启用按钮
}, },
}, },
{ {
icon:'ant-design:send-outlined', icon: 'ant-design:send-outlined',
tooltip:'发布', tooltip: '发布',
onClick: flowPublish.bind(null, record), onClick: flowPublish.bind(null, record),
ifShow: () => { ifShow: () => {
return record.releaseStatus !== ''; // 根据业务控制是否显示: 非enable状态的不显示启用按钮 return record.releaseStatus !== ''; // 根据业务控制是否显示: 非enable状态的不显示启用按钮
}, },
}, },
{ {
icon:'ant-design:android-outlined', icon: 'ant-design:android-outlined',
tooltip:'检查', tooltip: '检查',
onClick: check.bind(null, record), onClick: check.bind(null, record),
ifShow: () => { ifShow: () => {
return record.releaseStatus !== ''; // 这里只是实现树文件夹按钮 return record.releaseStatus !== ''; // 这里只是实现树文件夹按钮
...@@ -130,17 +136,17 @@ ...@@ -130,17 +136,17 @@
]" ]"
:dropDownActions="[ :dropDownActions="[
{ {
icon:'ant-design:reconciliation-outlined', icon: 'ant-design:reconciliation-outlined',
label: '复制', label: '复制',
onClick: handleCopy.bind(null, record), onClick: handleCopy.bind(null, record),
}, },
{ {
icon:'ant-design:delete-outlined', icon: 'ant-design:delete-outlined',
label: '删除', label: '删除',
onClick: apiDetail.bind(null, record), onClick: apiDetail.bind(null, record),
}, },
{ {
icon:'ant-design:folder-open-outlined', icon: 'ant-design:folder-open-outlined',
label: '移动', label: '移动',
onClick: apiDetail.bind(null, record), onClick: apiDetail.bind(null, record),
}, },
...@@ -150,7 +156,7 @@ ...@@ -150,7 +156,7 @@
</template> </template>
<template #name="{ text, record, column }"> <template #name="{ text, record, column }">
<a v-if="record.releaseStatus === '未发布'" @click="seeApi(record)"> <a v-if="record.releaseStatus === '未发布'" @click="seeApi(record)">
<Icon icon="ant-design:node-index-outlined" :size="15" style="color:#0000ff;" /> <Icon icon="ant-design:node-index-outlined" :size="15" style="color: #0000ff" />
{{ text }} {{ text }}
</a> </a>
<span v-else> <span v-else>
...@@ -165,36 +171,36 @@ ...@@ -165,36 +171,36 @@
</PageWrapper> </PageWrapper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import {reactive, onMounted, ref} from 'vue'; import { reactive, onMounted, ref } from 'vue';
import {BasicTable, useTable, TableAction} from '@/components/Table'; import { BasicTable, useTable, TableAction } from '@/components/Table';
import {PageWrapper} from '@/components/Page'; import { PageWrapper } from '@/components/Page';
import {useMessage} from '@/hooks/web/useMessage'; import { useMessage } from '@/hooks/web/useMessage';
import {columns, searchFormSchema} from './taskFlow.data'; import { columns, searchFormSchema } from './taskFlow.data';
import {tableList} from "./mock"; import { tableList } from './mock';
import {useRoute, onBeforeRouteLeave} from 'vue-router'; import { useRoute, onBeforeRouteLeave } from 'vue-router';
import {router} from '@/router'; import { router } from '@/router';
import Icon from "@/components/Icon/Icon.vue"; import Icon from '@/components/Icon/Icon.vue';
import BasicForm from "@/components/Form/src/BasicForm.vue"; import BasicForm from '@/components/Form/src/BasicForm.vue';
import ModelTree from "@/views/taskScheduling/taskFlowDesign/ModelTree.vue"; import ModelTree from '@/views/taskScheduling/taskFlowDesign/ModelTree.vue';
import {useModal} from "@/components/Modal"; import { useModal } from '@/components/Modal';
import CopyModal from "@/views/taskScheduling/taskFlowDesign/copyModal.vue"; import CopyModal from '@/views/taskScheduling/taskFlowDesign/copyModal.vue';
import CheckModal from "@/views/taskScheduling/taskFlow/CheckModal.vue"; import CheckModal from '@/views/taskScheduling/taskFlow/CheckModal.vue';
defineOptions({name: 'safetyLevelManage'}); defineOptions({ name: 'SafetyLevelManage' });
const {createMessage, createConfirm} = useMessage(); const { createMessage, createConfirm } = useMessage();
const route = useRoute(); const route = useRoute();
let modelLevel = ref(1); let modelLevel = ref(1);
const tableData = ref([]); const tableData = ref([]);
const searchInfo = reactive<Recordable>({}); const searchInfo = reactive<Recordable>({});
const [copyModal, { openModal: openCopyModal }] = useModal(); const [copyModal, { openModal: openCopyModal }] = useModal();
const [checkModal, { openModal: openCheckModal }] = useModal(); const [checkModal, { openModal: openCheckModal }] = useModal();
const [registerTable, {getRowSelection, setTableData}] = useTable({ const [registerTable, { getRowSelection, getSelectRows, setTableData }] = useTable({
/* title: '任务流',*/ /* title: '任务流',*/
api: async (params) => { api: async (params) => {
const response = { const response = {
pageNu: "1", pageNu: '1',
pageSize: "10", pageSize: '10',
pages: "1", pages: '1',
total: tableData.value.length, total: tableData.value.length,
code: '', code: '',
message: '', message: '',
...@@ -203,7 +209,7 @@ const [registerTable, {getRowSelection, setTableData}] = useTable({ ...@@ -203,7 +209,7 @@ const [registerTable, {getRowSelection, setTableData}] = useTable({
//按照部门筛选 如果有进行过滤相应部门的 没有就赋值全部 //按照部门筛选 如果有进行过滤相应部门的 没有就赋值全部
let data = []; let data = [];
data = tableData.value.filter((item) => item.type === 'theme'); data = tableData.value.filter((item) => item.type === 'theme');
return {...response, data: data}; return { ...response, data: data };
}, },
rowKey: 'businessId', rowKey: 'businessId',
rowSelection: true, rowSelection: true,
...@@ -221,9 +227,9 @@ const [registerTable, {getRowSelection, setTableData}] = useTable({ ...@@ -221,9 +227,9 @@ const [registerTable, {getRowSelection, setTableData}] = useTable({
title: '操作', title: '操作',
dataIndex: 'action', dataIndex: 'action',
}, },
}); });
/**右上*/ /**右上*/
const [registerForm] = useTable({ const [registerForm] = useTable({
schemas: searchFormSchema, schemas: searchFormSchema,
//在 input 中输入时按回车自动提交 //在 input 中输入时按回车自动提交
autoSubmitOnEnter: true, autoSubmitOnEnter: true,
...@@ -232,15 +238,15 @@ const [registerForm] = useTable({ ...@@ -232,15 +238,15 @@ const [registerForm] = useTable({
rowSelection: true, rowSelection: true,
pagination: false, pagination: false,
showIndexColumn: false, showIndexColumn: false,
scroll: {y: 300}, scroll: { y: 300 },
showSummary: true, showSummary: true,
}); });
onMounted(() => { onMounted(() => {
tableData.value = tableList; tableData.value = tableList;
}); });
/** 部门树的select*/ /** 部门树的select*/
function handleSelect(key) { function handleSelect(key) {
console.log('asd'); console.log('asd');
if (key !== null && key !== undefined) { if (key !== null && key !== undefined) {
modelLevel.value = key.split('-').length - 1; modelLevel.value = key.split('-').length - 1;
...@@ -268,85 +274,87 @@ function handleSelect(key) { ...@@ -268,85 +274,87 @@ function handleSelect(key) {
); );
setTableData(data); setTableData(data);
} }
} }
/**查看API*/ /**查看API*/
function seeApi(record) { function seeApi(record) {
router.push({ router.push({
path: '/taskScheduling/taskFlowDesign', path: '/taskScheduling/taskFlowDesign',
query: { query: {
/* businessId: record.businessId, /* businessId: record.businessId,
name: record.name*/ name: record.name*/
}, },
}) });
} }
/**查看详情*/ /**查看详情*/
function detailButton(record) { function detailButton(record) {
router.push({ router.push({
path: '/dataStandards/publicCode/detailPublicCode', path: '/dataStandards/publicCode/detailPublicCode',
query: { query: {
businessId: record.businessId, businessId: record.businessId,
}, },
}); });
} }
/**血缘按钮跳转路由以及传值*/
function handleConsanguinity(record: Recordable) {
}
/**设置按钮*/ /**血缘按钮跳转路由以及传值*/
function Settings() { function handleConsanguinity(record: Recordable) {}
} /**设置按钮*/
function Settings() {}
/**运行按钮*/ /**运行按钮*/
function RUN(record) { function RUN(record) {
record.releaseStatus = '运行中跳运维'; record.releaseStatus = '运行中跳运维';
} }
/**api详情按钮*/ /**api详情按钮*/
function apiDetail() { function apiDetail() {}
} function flowPublish(record) {
function flowPublish(record) {
record.releaseStatus = '已发布'; record.releaseStatus = '已发布';
} }
/**下线按钮*/
function handleOffline(record) { /**下线按钮*/
function handleOffline(record) {
record.releaseStatus = '未发布'; record.releaseStatus = '未发布';
} }
/**批量下线按钮*/
function batchOffline(record) { /**批量下线按钮*/
function batchOffline(record) {
openCheckModal(true, { openCheckModal(true, {
isUpdate: false, isUpdate: false,
}); });
record.releaseStatus = '未发布'; record.releaseStatus = '未发布';
} }
/**检查按钮*/
function check(record) { /**检查按钮*/
function check(record) {
openCheckModal(true, { openCheckModal(true, {
isUpdate: false, isUpdate: false,
}); });
} }
/**复制按钮*/
function handleCopy(record) { /**复制按钮*/
function handleCopy(record) {
openCopyModal(true, { openCopyModal(true, {
isUpdate: false, isUpdate: false,
}); });
} }
/** 删除按钮*/
function handleDelete(record: Recordable) { /** 删除按钮*/
function handleDelete(record: Recordable) {
const rowSelection = getRowSelection().selectedRowKeys; const rowSelection = getRowSelection().selectedRowKeys;
createMessage.success('删除成功!'); createMessage.success('删除成功!');
} }
const rightTable = ref();
function checkDisabled() {
onMounted(() => { if (rightTable.value) {
return getSelectRows().length <= 0;
}); } else {
return true;
}
}
onMounted(() => {});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped></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