Skip to content

B
bigDataSystem
Commit 3e0a0d27 authored by ZhangKai's avatar ZhangKai
Browse files
Options

修改质量任务表格顶部操作栏按钮

parent fa7706d0
Hide whitespace changes
Inline Side-by-side
Showing with 384 additions and 301 deletions
src/views/dataQuality/dataSheet/task/index.vue
View file @ 3e0a0d27
<template> <template>
<PageWrapper dense contentFullHeight fixedHeight contentClass="flex"> <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
<DeptTree class="w-1/4 xl:w-1/5" @select="handleSelect" /> <DeptTree class="w-1/4 xl:w-1/5" @select="handleSelect"/>
<BasicTable @register="registerTable" class="w-3/4 xl:w-4/5" :searchInfo="searchInfo"> <BasicTable @register="registerTable" class="w-3/4 xl:w-4/5" :searchInfo="searchInfo">
<template #toolbar> <template #toolbar>
<a-scrollbar> <a-scrollbar>
<a-button <a-button
:disabled="getRowSelection().selectedRowKeys <= 0"
type="primary" type="primary"
@click="handleDeleteIds" @click="handleQualityTaskOnline"
style="margin-right: 10px" v-if="isOnline"
>删除</a-button :disabled="getRowSelection().selectedRowKeys <= 0"
> style="margin-right: 10px">批量上线
</a-button>
<a-button
type="error"
@click="handleQualityTaskOffline"
v-if="isOffline"
style="margin-right: 10px">批量下线
</a-button>
<a-button type="primary" @click="handleBusinessLabel" style="margin-right: 10px">设置业务标签
</a-button>
<a-button type="primary" @click="handleCopyTo" style="margin-right: 10px">复制到
</a-button>
<a-button <a-button
:disabled="getRowSelection().selectedRowKeys <= 0" :disabled="getRowSelection().selectedRowKeys <= 0"
type="primary" type="primary"
style="margin-right: 10px" @click="handleDeleteIds"
>导出</a-button style="margin-right: 10px">删除
> </a-button>
<a-button type="primary" @click="handleImport" style="margin-right: 10px">导入</a-button> <a-button type="primary" @click="handleImport" style="margin-right: 10px">导入</a-button>
<a-button type="primary" @click="handleAdd" style="margin-right: 10px"
>新增文件夹</a-button
>
<a-button type="primary" @click="handleAddMainBody" style="margin-right: 10px"
>新增质量任务文件</a-button
>
<a-button <a-button
type="primary"
@click="handleQualityTaskSetting"
:disabled="getRowSelection().selectedRowKeys <= 0" :disabled="getRowSelection().selectedRowKeys <= 0"
style="margin-right: 10px"
>配置质量任务文件</a-button
>
<a-button type="primary" @click="handleAddQualityRule" style="margin-right: 10px"
>新增质量规则</a-button
>
<a-button
type="primary" type="primary"
@click="handleAlarmSetting" style="margin-right: 10px">导出
:disabled="getRowSelection().selectedRowKeys <= 0" </a-button>
style="margin-right: 10px" <a-button type="primary" @click="handleAdd" style="margin-right: 10px">新增文件夹
>配置通知告警</a-button </a-button>
> <a-button type="primary" @click="handleAddMainBody" style="margin-right: 10px">新增质量任务
</a-button>
<!-- <a-button-->
<!-- type="primary"-->
<!-- @click="handleQualityTaskSetting"-->
<!-- :disabled="getRowSelection().selectedRowKeys <= 0"-->
<!-- style="margin-right: 10px">配置质量任务文件-->
<!-- </a-button>-->
<!-- <a-button type="primary" @click="handleAddQualityRule" style="margin-right: 10px">新增质量规则-->
<!-- </a-button>-->
<!-- <a-button-->
<!-- type="primary"-->
<!-- @click="handleAlarmSetting"-->
<!-- :disabled="getRowSelection().selectedRowKeys <= 0"-->
<!-- style="margin-right: 10px">配置通知告警-->
<!-- </a-button>-->
<!-- <a-button--> <!-- <a-button-->
<!-- type="primary"--> <!-- type="primary"-->
<!-- @click="handleQualityTaskRunSetting"--> <!-- @click="handleQualityTaskRunSetting"-->
...@@ -60,9 +69,9 @@ ...@@ -60,9 +69,9 @@
<!-- :disabled="getRowSelection().selectedRowKeys <= 0"--> <!-- :disabled="getRowSelection().selectedRowKeys <= 0"-->
<!-- >查看报告</a-button--> <!-- >查看报告</a-button-->
<!-- >--> <!-- >-->
<a-button type="primary" @click="handleAddCheckRangePlus" style="margin-right: 10px" <!-- <a-button type="primary" @click="handleAddCheckRangePlus" style="margin-right: 10px">-->
>添加检查范围-增量添加</a-button <!-- 添加检查范围-增量添加-->
> <!-- </a-button>-->
<!-- <a-button type="primary" @click="handleAddCheckRangeAll">添加检查范围-全量添加</a-button> --> <!-- <a-button type="primary" @click="handleAddCheckRangeAll">添加检查范围-全量添加</a-button> -->
<!-- <a-button--> <!-- <a-button-->
<!-- type="primary"--> <!-- type="primary"-->
...@@ -71,28 +80,13 @@ ...@@ -71,28 +80,13 @@
<!-- :disabled="getRowSelection().selectedRowKeys <= 0"--> <!-- :disabled="getRowSelection().selectedRowKeys <= 0"-->
<!-- >上线</a-button--> <!-- >上线</a-button-->
<!-- >--> <!-- >-->
<a-button <!-- <a-button-->
type="primary" <!-- type="warning"-->
@click="handleQualityTaskOnline" <!-- @click="handleQualityTaskOffline"-->
v-if="isOnline" <!-- v-if="isOffline"-->
:disabled="getRowSelection().selectedRowKeys <= 0" <!-- style="margin-right: 10px"-->
style="margin-right: 10px" <!-- >下线</a-button-->
>批量上线</a-button <!-- >-->
>
<!-- <a-button-->
<!-- type="warning"-->
<!-- @click="handleQualityTaskOffline"-->
<!-- v-if="isOffline"-->
<!-- style="margin-right: 10px"-->
<!-- >下线</a-button-->
<!-- >-->
<a-button
type="error"
@click="handleQualityTaskOffline"
v-if="isOffline"
style="margin-right: 10px"
>批量下线</a-button
>
<!-- <a-button--> <!-- <a-button-->
<!-- type="primary"--> <!-- type="primary"-->
<!-- @click="handleQualityTaskService"--> <!-- @click="handleQualityTaskService"-->
...@@ -130,258 +124,286 @@ ...@@ -130,258 +124,286 @@
</template> </template>
</template> </template>
</BasicTable> </BasicTable>
<importModal @register="registerImport" @success="handleImportSuccess" /> <importModal @register="registerImport" @success="handleImportSuccess"/>
<AddFolder @register="register" /> <AddFolder @register="register"/>
<remove-modal @register="registerRemove" /> <remove-modal @register="registerRemove"/>
<main-body-modal @register="registerMain" /> <main-body-modal @register="registerMain"/>
<quality-Run-setting-modal @register="registerRunSetting" /> <quality-Run-setting-modal @register="registerRunSetting"/>
<quality-setting-modal @register="registerSettingModal" /> <quality-setting-modal @register="registerSettingModal"/>
<new-rule-modal @register="registerNewRule" /> <new-rule-modal @register="registerNewRule"/>
<alarm-setting-modal @register="registerAlarmSettingModal" /> <alarm-setting-modal @register="registerAlarmSettingModal"/>
<quality-check-range-plus-modal @register="registerCheckRangePlusModal" /> <quality-check-range-plus-modal @register="registerCheckRangePlusModal"/>
</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 DeptTree from './DeptTree.vue'; import DeptTree from './DeptTree.vue';
import { useMessage } from '@/hooks/web/useMessage'; import {useMessage} from '@/hooks/web/useMessage';
import { useModal } from '@/components/Modal'; import {useModal} from '@/components/Modal';
import importModal from './importModal.vue'; import {tableList} from './mock';
import { tableList } from './mock'; import {columns, searchFormSchema} from './mainBody.data';
import { columns, searchFormSchema } from './mainBody.data'; import {useGo} from '@/hooks/web/usePage';
import { useGo } from '@/hooks/web/usePage'; import {useRoute, onBeforeRouteLeave} from 'vue-router';
import { useRoute, onBeforeRouteLeave } from 'vue-router'; import {useFilterStore} from '@/store/modules/filterData';
import { useFilterStore } from '@/store/modules/filterData'; import {router} from '@/router';
import { router } from '@/router'; import AddFolder from '@/views/dataQuality/dataSheet/task/addFolder.vue';
import AddFolder from '@/views/dataQuality/dataSheet/task/addFolder.vue'; import RemoveModal from '@/views/dataQuality/dataSheet/task/removeModal.vue';
import RemoveModal from '@/views/dataQuality/dataSheet/task/removeModal.vue'; import MainBodyModal from '@/views/dataQuality/dataSheet/task/mainBodyModal.vue';
import MainBodyModal from '@/views/dataQuality/dataSheet/task/mainBodyModal.vue'; import QualitySettingModal from './QualityTaskSetting.vue';
import QualityRunSettingModal from './QualityTaskRunSetting.vue'; import NewRuleModal from './QualityTaskNewRule.vue';
import QualitySettingModal from './QualityTaskSetting.vue'; import AlarmSettingModal from './QualityTaskAlarmSetting.vue';
import NewRuleModal from './QualityTaskNewRule.vue'; import QualityCheckRangePlusModal from '@/views/dataQuality/dataSheet/task/checkRange/index.vue';
import AlarmSettingModal from './QualityTaskAlarmSetting.vue'; import {Modal} from 'ant-design-vue';
import QualityCheckRangePlusModal from '@/views/dataQuality/dataSheet/task/checkRange/index.vue';
import { Modal } from 'ant-design-vue';
defineOptions({ name: 'AccountManagement' });
const { createMessage, createConfirm } = useMessage();
const filterStore = useFilterStore();
const route = useRoute();
const go = useGo();
const isWhite = ref(false);
const isOnline = ref(true);
const isOffline = ref(false);
// const isRunning = ref(false);
const [register, { openModal }] = useModal();
const [registerImport, { openModal: openImportModal }] = useModal();
const [registerRemove, { openModal: openRemoveModal }] = useModal();
const [registerMain, { openModal: openMainModal }] = useModal();
const [registerNewRule, { openModal: openNewRuleModal }] = useModal();
const [registerRunSetting, { openModal: openRunSettingModal }] = useModal();
const [registerSettingModal, { openModal: openSettingModal }] = useModal();
const [registerAlarmSettingModal, { openModal: openAlarmSettingModal }] = useModal();
const [registerCheckRangePlusModal, { openModal: openCheckRangePlusModal }] = useModal();
const searchInfo = reactive<Recordable>({});
const [
registerTable,
{ reload, updateTableDataRecord, getSearchInfo, getForm, getRowSelection },
] = useTable({
title: '质量任务列表',
api: async (params) => {
console.log('tableList', tableList);
const response = {
pageNu: '1',
pageSize: '10',
pages: '1',
total: tableList.length,
code: '',
message: '',
data: tableList,
};
return { ...response }; defineOptions({name: 'AccountManagement'});
const {createMessage, createConfirm} = useMessage();
const filterStore = useFilterStore();
const route = useRoute();
const go = useGo();
const isWhite = ref(false);
const isOnline = ref(true);
const isOffline = ref(false);
const [register, {openModal}] = useModal();
const [registerImport, {openModal: openImportModal}] = useModal();
const [registerRemove, {openModal: openRemoveModal}] = useModal();
const [registerMain, {openModal: openMainModal}] = useModal();
const [registerNewRule, {openModal: openNewRuleModal}] = useModal();
const [registerRunSetting, {openModal: openRunSettingModal}] = useModal();
const [registerSettingModal, {openModal: openSettingModal}] = useModal();
const [registerAlarmSettingModal, {openModal: openAlarmSettingModal}] = useModal();
const [registerCheckRangePlusModal, {openModal: openCheckRangePlusModal}] = useModal();
const searchInfo = reactive<Recordable>({});
const [
registerTable,
{reload, updateTableDataRecord, getSearchInfo, getForm, getRowSelection},
] = useTable({
title: '质量任务列表',
api: async (params) => {
console.log('tableList', tableList);
const response = {
pageNu: '1',
pageSize: '10',
pages: '1',
total: tableList.length,
code: '',
message: '',
data: tableList,
};
return {...response};
},
rowKey: 'businessId',
rowSelection: true,
columns,
formConfig: {
labelWidth: 10,
schemas: searchFormSchema,
autoSubmitOnEnter: true,
resetFunc: () => {
searchInfo.deptId = '';
}, },
rowKey: 'businessId', },
rowSelection: true, useSearchForm: true,
columns, showTableSetting: false,
formConfig: { bordered: true,
labelWidth: 10, handleSearchInfoFn(info) {
schemas: searchFormSchema, console.log('handleSearchInfoFn', info);
autoSubmitOnEnter: true, return info;
resetFunc: () => { },
searchInfo.deptId = ''; actionColumn: {
}, width: 170,
}, title: '操作',
useSearchForm: true, dataIndex: 'action',
showTableSetting: false, // slots: { customRender: 'action' },
bordered: true, },
handleSearchInfoFn(info) { });
console.log('handleSearchInfoFn', info);
return info; function showDetails(record) {
router.push({
path: '/mainBody/details',
});
}
/** 导入按钮*/
function handleImport() {
openImportModal(true, {});
}
/** 新建文件夹*/
function handleAdd() {
openModal(true, {});
}
function handleRemove() {
openRemoveModal(true, {});
}
/** 新建质量任务文件*/
function handleAddMainBody() {
openMainModal(true, {
isUpdate: false,
});
}
/** 新增质量规则*/
function handleAddQualityRule() {
go('/dataQuality/dataSheet/rule');
}
/** 配置通知告警*/
function handleAlarmSetting() {
openAlarmSettingModal(true, {
isUpdate: false,
});
}
/** 配置质量任务 未完成 应为弹窗 */
function handleQualityTaskSetting() {
openSettingModal(true, {});
}
/** 配置运行 正在做 应为弹窗*/
function handleQualityTaskRunSetting() {
openRunSettingModal(true, {
isRunning: false,
});
}
/** 任务运行*/
function handleQualityTaskRun() {
Modal.confirm({
title: '确认运行',
content: '是否运行选中的任务?',
onOk: () => {
createMessage.success('运行成功!');
}, },
actionColumn: { });
width: 170, }
title: '操作',
dataIndex: 'action', /** 查看报告 正在做 应为跳转到报告页面*/
// slots: { customRender: 'action' }, function handleQualityTaskRunLog() {
go('/dataQuality/dataSheet/task/viewTaskOperation', false);
}
/** 添加检查范围*/
function handleAddCheckRangePlus() {
openCheckRangePlusModal(true, {});
}
/** 上线 未完成 应为弹窗*/
function handleQualityTaskOnline() {
go('/dataQuality/dataSheet/task');
isOnline.value = false;
isOffline.value = true;
}
/** 下线 未完成 应为弹窗*/
function handleQualityTaskOffline() {
go('/dataQuality/dataSheet/task');
isOnline.value = true;
isOffline.value = false;
}
/** 设置业务标签 */
function handleBusinessLabel() {
}
/** 复制到 */
function handleCopyTo() {
}
/** 跳转运维 未完成 应为跳转到运维界面*/
function handleQualityTaskService() {
go('/dataQuality/dataSheet/task/taskOperation');
}
/** 编辑按钮*/
function handleEdit(record: Recordable) {
openMainModal(true, {
record,
isUpdate: true,
});
}
function handleDeleteIds() {
createConfirm({
iconType: 'warning',
title: '确认删除',
content: '确认批量删除选中数据吗？',
onOk() {
createMessage.success('批量删除成功!');
}, },
}); });
}
function showDetails(record) { /** 重置密码弹窗确定按钮*/
router.push({ /** 删除按钮*/
path: '/mainBody/details', function handleDelete(record: Recordable) {
}); createMessage.success('删除成功!');
} reload();
/** 导入按钮*/ }
function handleImport() {
openImportModal(true, {});
}
/** 新建文件夹*/
function handleAdd() {
openModal(true, {});
}
function handleRemove() {
openRemoveModal(true, {});
}
/** 新建质量任务文件*/
function handleAddMainBody() {
openMainModal(true, {
isUpdate: false,
});
}
/** 新增质量规则*/
function handleAddQualityRule() {
go('/dataQuality/dataSheet/rule');
}
/** 配置通知告警*/
function handleAlarmSetting() {
openAlarmSettingModal(true, {
isUpdate: false,
});
}
/** 配置质量任务 未完成 应为弹窗 */
function handleQualityTaskSetting() {
openSettingModal(true, {});
}
/** 配置运行 正在做 应为弹窗*/
function handleQualityTaskRunSetting() {
openRunSettingModal(true, {
isRunning: false,
});
}
/** 任务运行*/
function handleQualityTaskRun() {
Modal.confirm({
title: '确认运行',
content: '是否运行选中的任务?',
onOk: () => {
createMessage.success('运行成功!');
},
});
}
/** 查看报告 正在做 应为跳转到报告页面*/
function handleQualityTaskRunLog() {
go('/dataQuality/dataSheet/task/viewTaskOperation', false);
}
/** 添加检查范围*/
function handleAddCheckRangePlus() {
openCheckRangePlusModal(true, {});
}
/** 上线 未完成 应为弹窗*/
function handleQualityTaskOnline() {
go('/dataQuality/dataSheet/task');
isOnline.value = false;
isOffline.value = true;
}
/** 下线 未完成 应为弹窗*/
function handleQualityTaskOffline() {
go('/dataQuality/dataSheet/task');
isOnline.value = true;
isOffline.value = false;
}
/** 跳转运维 未完成 应为跳转到运维界面*/
function handleQualityTaskService() {
go('/dataQuality/dataSheet/task/taskOperation');
}
/** 编辑按钮*/ /** 导出按钮*/
function handleEdit(record: Recordable) { async function handleExport() {
openMainModal(true, { }
record,
isUpdate: true, /** 导入成功*/
}); function handleImportSuccess() {
} reload();
function handleDeleteIds() { }
createConfirm({
iconType: 'warning', /** 新增/编辑成功*/
title: '确认删除', function handleSuccess({isUpdate, values}) {
content: '确认批量删除选中数据吗？', if (isUpdate) {
onOk() { // 演示不刷新表格直接更新内部数据。
createMessage.success('批量删除成功!'); // 注意：updateTableDataRecord要求表格的rowKey属性为string并且存在于每一行的record的keys中
}, const result = updateTableDataRecord(values.id, values);
}); console.log(result);
}
/** 重置密码弹窗确定按钮*/
/** 删除按钮*/
function handleDelete(record: Recordable) {
createMessage.success('删除成功!');
reload();
}
/** 导出按钮*/
async function handleExport() {}
/** 导入成功*/
function handleImportSuccess() {
reload(); reload();
} } else {
/** 新增/编辑成功*/
function handleSuccess({ isUpdate, values }) {
if (isUpdate) {
// 演示不刷新表格直接更新内部数据。
// 注意：updateTableDataRecord要求表格的rowKey属性为string并且存在于每一行的record的keys中
const result = updateTableDataRecord(values.id, values);
console.log(result);
reload();
} else {
reload();
}
}
/** 部门树的select*/
function handleSelect(deptId = '') {
searchInfo.deptId = deptId;
reload(); reload();
} }
}
function handleView(record: Recordable) { /** 部门树的select*/
go('/system/account_detail/' + record.id); function handleSelect(deptId = '') {
} searchInfo.deptId = deptId;
onMounted(() => { reload();
const path = route.path; }
if (filterStore.getSearchParams[path]) {
if (JSON.parse(filterStore.getSearchParams[path] !== {})) { function handleView(record: Recordable) {
const params = JSON.parse(filterStore.getSearchParams[path]); go('/system/account_detail/' + record.id);
console.log('11111111111111111111111111111', params); }
getForm().setFieldsValue({
page: params.page, onMounted(() => {
pageSize: params.pageSize, const path = route.path;
username: params.username, if (filterStore.getSearchParams[path]) {
flag: params.flag, if (JSON.parse(filterStore.getSearchParams[path] !== {})) {
}); const params = JSON.parse(filterStore.getSearchParams[path]);
searchInfo.deptId = params.deptId; console.log('11111111111111111111111111111', params);
} getForm().setFieldsValue({
page: params.page,
pageSize: params.pageSize,
username: params.username,
flag: params.flag,
});
searchInfo.deptId = params.deptId;
} }
}
});
onBeforeRouteLeave((to, from, next) => {
const params = Object.assign({}, getSearchInfo(), getForm().getFieldsValue());
console.log('path', from.path);
console.log('params', params);
filterStore.setSearchParams({
path: from.path,
param: {
...params,
},
}); });
onBeforeRouteLeave((to, from, next) => { next(); // 允许导航
const params = Object.assign({}, getSearchInfo(), getForm().getFieldsValue()); });
console.log('path', from.path);
console.log('params', params);
filterStore.setSearchParams({
path: from.path,
param: {
...params,
},
});
next(); // 允许导航
});
</script> </script>
src/views/dataQuality/dataSheet/task/mainBody.data.ts
View file @ 3e0a0d27
...@@ -29,13 +29,7 @@ export const deptMap = (() => { ...@@ -29,13 +29,7 @@ export const deptMap = (() => {
}, {}); }, {});
})(); })();
export const columns: BasicColumn[] = [ export const columns: BasicColumn[any] = [
// {
// title: '质量规则',
// dataIndex: 'name',
// width: 120,
// slots: { customRender: 'name' },
// },
{ {
title: '质量规则', title: '质量规则',
dataIndex: 'qualityRule', dataIndex: 'qualityRule',
...@@ -228,11 +222,78 @@ export const searchFormSchema: FormSchema[] = [ ...@@ -228,11 +222,78 @@ export const searchFormSchema: FormSchema[] = [
field: 'name', field: 'name',
label: ' ', label: ' ',
component: 'Input', component: 'Input',
colProps: { span: 8 }, colProps: { span: 4 },
componentProps: { componentProps: {
placeholder: '输入关键字搜索', placeholder: '输入关键字搜索',
}, },
}, },
{
field: 'testMode',
label: ' ',
component: 'Select',
componentProps: {
placeholder: '检查方式',
options: [
{ label: '全量', value: '1' },
{ label: '增量', value: '2' },
],
},
colProps: { span: 3 },
},
{
field: 'ruleGroup',
label: ' ',
component: 'Select',
componentProps: {
placeholder: '规则组',
options: [
{ label: 'admin_个人工作区', value: '1' },
{ label: '共享工作区', value: '2' },
{ label: '商城工作区', value: '3' },
{ label: '指标工作区', value: '4' },
],
},
colProps: { span: 3 },
},
{
field: 'releaseStatus',
label: ' ',
component: 'Select',
componentProps: {
placeholder: '发布状态',
options: [
{ label: '已上线', value: '1' },
{ label: '未上线', value: '2' },
],
},
colProps: { span: 3 },
},
{
field: 'dateRange',
label: ' ',
component: 'RangePicker',
componentProps: {
format: 'YYYY-MM-DD', // 显示的日期格式
valueFormat: 'YYYY-MM-DD', // 提交的日期格式
placeholder: ['开始时间', '结束时间'], // 占位符
style: { width: '100%' }, // 控制宽度
},
colProps: { span: 5 },
},
{
field: 'businessLabel',
label: ' ',
component: 'Select',
componentProps: {
placeholder: '业务标签',
options: [
{ label: '生产', value: '1' },
{ label: '质量', value: '2' },
{ label: '人力', value: '3' },
],
},
colProps: { span: 3 },
},
// { // {
// field: 'flag', // field: 'flag',
// label: ' ', // label: ' ',
......
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