提交 1a2837db authored 作者: kxjia's avatar kxjia

Merge branch 'master' of http://47.97.51.208/root/zrch-risk-39

import { message } from 'ant-design-vue';
import { BasicColumn, FormSchema } from '/@/components/Table';
import { render } from '/@/utils/common/renderUtils';
// ==================== 执行规则选项 ====================
export const exeRuleOptions = [
{ value: 1, label: '一次性' },
{ value: 2, label: '周期执行' },
{ value: 3, label: '事件触发' },
];
// ==================== 执行周期选项 ====================
export const exePeriodOptions = [
{ value: 'daily', label: '每日' },
{ value: 'weekly', label: '每周' },
{ value: 'monthly', label: '每月' },
{ value: 'quarterly', label: '每季度' },
{ value: 'halfyear', label: '每半年' },
{ value: 'yearly', label: '每年' },
];
// ==================== 优先级选项 ====================
export const priorityOptions = [
{ value: '1', label: '高' },
{ value: '2', label: '中' },
{ value: '3', label: '低' },
];
// ==================== 计划状态选项 ====================
export const planStatusOptions = [
{ value: '0', label: '草稿' },
{ value: '1', label: '审批中' },
{ value: '2', label: '已通过' },
{ value: '3', label: '已拒绝' },
{ value: '4', label: '执行中' },
{ value: '5', label: '已完成' },
{ value: '6', label: '已作废' },
];
// 列表数据
export const columns: BasicColumn[] = [
{
title: '计划名称',
align: 'left',
dataIndex: 'projectName',
width: 180,
ellipsis: true,
},
{
title: '计划类型',
align: 'center',
dataIndex: 'projectTypeName',
width: 120,
ellipsis: true,
},
{
title: '执行部门',
align: 'center',
dataIndex: 'execDepName',
width: 140,
ellipsis: true,
},
{
title: '负责人',
align: 'center',
dataIndex: 'headName',
width: 100,
ellipsis: true,
},
{
title: '优先级',
align: 'center',
dataIndex: 'priority',
width: 80,
ellipsis: true,
customRender: ({ text }) => {
const priorityMap = {
'1': '高',
'2': '中',
'3': '低',
};
return priorityMap[text] || '-';
},
},
{
title: '执行规则',
align: 'center',
dataIndex: 'exeRule',
width: 100,
ellipsis: true,
customRender: ({ text }) => {
const ruleMap = {
1: '事件触发',
2: '周期执行',
3: '一次性执行',
};
return ruleMap[text] || '-';
},
},
{
title: '计划开始日期',
align: 'center',
dataIndex: 'planStartDate',
width: 130,
ellipsis: true,
customRender: ({ text }) => {
return !text ? '-' : text.length > 10 ? text.substr(0, 10) : text;
},
},
{
title: '计划结束日期',
align: 'center',
dataIndex: 'planEndDate',
width: 130,
ellipsis: true,
customRender: ({ text }) => {
return !text ? '-' : text.length > 10 ? text.substr(0, 10) : text;
},
},
{
title: '计划状态',
align: 'center',
dataIndex: 'statusName',
width: 100,
ellipsis: true,
},
{
title: '流程状态',
align: 'center',
dataIndex: 'bpmStatus',
width: 120,
ellipsis: true,
customRender: ({ text }) => {
return render.renderDict(text, 'bpm_status') || '-';
},
},
{
title: '当前节点',
align: 'center',
dataIndex: 'flowtaskName',
width: 100,
ellipsis: true,
},
// 隐藏列,用于内部使用
{
title: '',
dataIndex: 'projectType',
width: 0,
ellipsis: false,
},
];
// 查询表单数据
export const searchFormSchema: FormSchema[] = [
{
label: '计划名称',
field: 'projectName',
component: 'Input',
colProps: { span: 6 },
},
{
label: '计划类型',
field: 'projectType',
component: 'Select',
colProps: { span: 6 },
componentProps: {
allowClear: true,
placeholder: '请选择类型',
},
},
{
label: '执行部门',
field: 'execDepCode',
component: 'Select',
colProps: { span: 6 },
componentProps: {
allowClear: true,
placeholder: '请选择执行部门',
},
},
{
label: '计划状态',
field: 'status',
component: 'Select',
colProps: { span: 6 },
componentProps: {
allowClear: true,
placeholder: '请选择状态',
options: planStatusOptions,
},
},
{
label: '计划日期',
field: 'planDateRange',
component: 'RangePicker',
colProps: { span: 8 },
componentProps: {
placeholder: ['开始日期', '结束日期'],
},
},
{
label: '优先级',
field: 'priority',
component: 'Select',
colProps: { span: 5 },
componentProps: {
allowClear: true,
placeholder: '请选择优先级',
options: priorityOptions,
},
},
{
label: '执行规则',
field: 'exeRule',
component: 'Select',
colProps: { span: 5 },
componentProps: {
allowClear: true,
placeholder: '请选择执行规则',
options: exeRuleOptions,
},
},
];
// 表单数据
export const formSchema: FormSchema[] = [
{
label: '计划名称',
field: 'projectName',
component: 'Input',
colProps: { lg: 12 },
itemProps: { labelCol: { xs: { span: 24 }, sm: { span: 6 } }, wrapperCol: { xs: { span: 24 }, sm: { span: 18 } } },
dynamicRules: ({ model, schema }) => {
return [{ required: true, message: '请输入计划名称!' }];
},
},
{
label: '计划类型',
field: 'projectType',
component: 'JCategorySelect',
componentProps: {
pcode: 'B09',
valueType: 'code',
},
colProps: { lg: 12 },
itemProps: { labelCol: { xs: { span: 24 }, sm: { span: 6 } }, wrapperCol: { xs: { span: 24 }, sm: { span: 18 } } },
dynamicRules: ({ model, schema }) => {
return [{ required: true, message: '请选择计划类型!' }];
},
},
{
label: '执行部门',
field: 'execDepCode',
component: 'JSelectDept',
colProps: { lg: 12 },
itemProps: { labelCol: { xs: { span: 24 }, sm: { span: 6 } }, wrapperCol: { xs: { span: 24 }, sm: { span: 18 } } },
dynamicRules: ({ model, schema }) => {
return [{ required: false, message: '请选择执行部门!' }];
},
},
{
label: '负责人',
field: 'headId',
component: 'JSearchSelectDuty',
colProps: { lg: 12 },
itemProps: { labelCol: { xs: { span: 24 }, sm: { span: 6 } }, wrapperCol: { xs: { span: 24 }, sm: { span: 18 } } },
dynamicRules: ({ model, schema }) => {
return [{ required: false, message: '请选择负责人!' }];
},
},
{
label: '计划开始日期',
field: 'planStartDate',
component: 'DatePicker',
colProps: { lg: 12 },
itemProps: { labelCol: { xs: { span: 24 }, sm: { span: 6 } }, wrapperCol: { xs: { span: 24 }, sm: { span: 18 } } },
dynamicRules: ({ model, schema }) => {
return [{ required: true, message: '请选择计划开始日期!' }];
},
},
{
label: '计划结束日期',
field: 'planEndDate',
component: 'DatePicker',
colProps: { lg: 12 },
itemProps: { labelCol: { xs: { span: 24 }, sm: { span: 6 } }, wrapperCol: { xs: { span: 24 }, sm: { span: 18 } } },
dynamicRules: ({ model, schema }) => {
return [{ required: true, message: '请选择计划结束日期!' }];
},
},
{
label: '优先级',
field: 'priority',
component: 'Select',
colProps: { lg: 12 },
itemProps: { labelCol: { xs: { span: 24 }, sm: { span: 6 } }, wrapperCol: { xs: { span: 24 }, sm: { span: 18 } } },
componentProps: {
options: priorityOptions,
placeholder: '请选择优先级',
},
},
{
label: '执行规则',
field: 'exeRule',
component: 'RadioButtonGroup',
colProps: { lg: 12 },
itemProps: { labelCol: { xs: { span: 24 }, sm: { span: 6 } }, wrapperCol: { xs: { span: 24 }, sm: { span: 18 } } },
componentProps: {
options: exeRuleOptions,
},
dynamicRules: ({ model, schema }) => {
return [{ required: true, message: '请选择执行规则!' }];
},
},
{
label: '触发事件名称',
field: 'triggerEventName',
component: 'Input',
colProps: { lg: 24 },
itemProps: { labelCol: { xs: { span: 24 }, sm: { span: 3 } }, wrapperCol: { xs: { span: 24 }, sm: { span: 21 } } },
dynamicShow: ({ model }) => {
return model.exeRule === 1;
},
dynamicRules: ({ model, schema }) => {
return model.exeRule === 1 ? [{ required: true, message: '请填写触发事件名称!' }] : [];
},
},
{
label: '执行周期',
field: 'exePeriod',
component: 'Select',
colProps: { lg: 12 },
itemProps: { labelCol: { xs: { span: 24 }, sm: { span: 6 } }, wrapperCol: { xs: { span: 24 }, sm: { span: 18 } } },
componentProps: {
options: exePeriodOptions,
placeholder: '请选择执行周期',
},
dynamicShow: ({ model }) => {
return model.exeRule === 2;
},
dynamicRules: ({ model, schema }) => {
return model.exeRule === 2 ? [{ required: true, message: '请选择执行周期!' }] : [];
},
},
{
label: '首次执行日期',
field: 'firstExecDate',
component: 'DatePicker',
colProps: { lg: 12 },
itemProps: { labelCol: { xs: { span: 24 }, sm: { span: 6 } }, wrapperCol: { xs: { span: 24 }, sm: { span: 18 } } },
dynamicShow: ({ model }) => {
return model.exeRule === 2;
},
},
{
label: '计划依据',
field: 'planBasis',
component: 'Input',
slot: 'planBasis',
itemProps: {
labelCol: { xs: { span: 24 }, sm: { span: 3 } },
wrapperCol: { xs: { span: 24 }, sm: { span: 21 } },
},
},
{
label: '交付物',
field: 'planDeliverable',
component: 'Input',
colProps: { lg: 12 },
itemProps: { labelCol: { xs: { span: 24 }, sm: { span: 6 } }, wrapperCol: { xs: { span: 24 }, sm: { span: 18 } } },
dynamicRules: ({ model, schema }) => {
return [{ required: true, message: '请输入交付物!' }];
},
},
{
label: '备注说明',
field: 'projectDesc',
component: 'InputTextArea',
itemProps: { labelCol: { xs: { span: 24 }, sm: { span: 3 } }, wrapperCol: { xs: { span: 24 }, sm: { span: 21 } } },
dynamicRules: ({ model, schema }) => {
return [{ required: false, message: '请输入备注说明!' }];
},
},
{
label: '相关附件',
field: 'fileUploadPath',
component: 'JUpload',
itemProps: { labelCol: { xs: { span: 24 }, sm: { span: 3 } }, wrapperCol: { xs: { span: 24 }, sm: { span: 21 } } },
componentProps: { desText: '支持扩展名: .rar .zip .doc .docx .pdf .jpg...' },
},
{
label: '审核意见',
field: 'approveDes',
component: 'InputTextArea',
itemProps: { labelCol: { xs: { span: 24 }, sm: { span: 3 } }, wrapperCol: { xs: { span: 24 }, sm: { span: 21 } } },
show: false,
},
// 主键隐藏字段
{
label: '',
field: 'id',
component: 'Input',
show: false,
},
];
/**
* 流程表单调用这个方法获取formSchema
* @param param
*/
export function getBpmFormSchema(_formData): FormSchema[] {
// 默认和原始表单保持一致 如果流程中配置了权限数据,这里需要单独处理formSchema
return formSchema;
}
<template>
<div>
<BasicTable @register="registerTable" :rowSelection="rowSelection">
<div class="problem-check-page">
<div class="styled-table">
<BasicTable @register="registerTable" :rowSelection="rowSelection" class="flat-table">
<template #tableTitle>
<div class="table-toolbar">
<!-- <a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined">添加问题</a-button> -->
<a-dropdown v-if="selectedRowKeys.length > 0">
<template #overlay>
......@@ -17,11 +19,13 @@
<Icon icon="mdi:chevron-down" />
</a-button>
</a-dropdown>
</div>
</template>
<template #action="{ record }">
<TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />
<TableAction :actions="getTableAction(record)" />
</template>
</BasicTable>
</div>
<StProblemCheckModal @register="registerModal" @success="handleSuccess" :centered="true" />
</div>
</template>
......@@ -59,6 +63,9 @@
params['bpmNodeId'] = props.currentFlowNode.id;
params['todoList'] = props.todoList;
},
formConfig: {
schemas: searchFormSchema,
},
actionColumn: { width: 200, fixed: 'right' },
},
exportConfig: { name: '问题整改', url: getExportUrl },
......@@ -67,14 +74,6 @@
const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext;
function handleAdd() {
openModal(true, {
isUpdate: false,
showFooter: true,
record: { bpmNodeId: props.currentFlowNode.id, deployId: props.currentFlowNode.deployId, bpmStatus: 0 },
});
}
function handleEdit(record: Recordable) {
openModal(true, { record, isUpdate: true, showFooter: true });
}
......@@ -100,23 +99,22 @@
function getTableAction(record) {
return [
{ label: '编辑', onClick: handleEdit.bind(null, record) },
// { label: '发送', onClick: handleFlow.bind(null, record) },
];
}
function getDropDownAction(record) {
return [
{ label: '详情', onClick: handleDetail.bind(null, record) },
{
label: '删除',
popConfirm: { title: '是否确认删除', confirm: handleDelete.bind(null, record) },
},
// { label: '发送', onClick: handleFlow.bind(null, record) },
];
}
async function handleFlow(record: Recordable) {
emit('sendWorkFlow', record);
}
// function getDropDownAction(record) {
// return [{ label: '编辑', onClick: handleEdit.bind(null, record) }];
// }
// async function handleFlow(record: Recordable) {
// emit('sendWorkFlow', record);
// }
async function handleUpdate(dataId, flowNode) {
const record = { bpmNodeId: flowNode.id, deployId: flowNode.deployId, bpmStatus: 2, id: dataId };
......@@ -134,4 +132,194 @@
defineExpose({ handleUpdate, handleStartUpdate });
</script>
<style scoped></style>
<style scoped lang="less">
/* ==================== 柔和中性风格 - CSS 变量 ==================== */
.problem-check-page {
--color-primary: #3b5bdb;
--color-primary-hover: #364fc7;
--color-primary-light: #e8ecfd;
--color-success: #2f9e44;
--color-warning: #e67700;
--color-error: #c92a2a;
--color-text-primary: #1c1c1e;
--color-text-secondary: #555770;
--color-text-muted: #a0a3b1;
--color-border: #e4e4e9;
--color-border-strong: #c8c8d0;
--color-bg-page: #f5f5f7;
--color-bg-white: #ffffff;
--color-bg-section: #f0f0f4;
--radius: 6px;
min-height: 100%;
background: var(--color-bg-page);
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif;
padding: 20px;
}
/* ==================== 表格样式 ==================== */
.styled-table {
background: var(--color-bg-white);
border: 1px solid var(--color-border);
border-radius: var(--radius);
}
.table-toolbar {
display: flex;
gap: 8px;
padding: 12px 0;
flex-wrap: wrap;
}
.flat-table {
:deep(.ant-table) {
border-radius: 0;
font-size: 13px;
}
:deep(.ant-table-thead > tr > th) {
background: var(--color-bg-section);
border-bottom: 1px solid var(--color-border-strong);
font-weight: 600;
font-size: 12px;
color: var(--color-text-secondary);
padding: 10px 16px;
text-transform: uppercase;
letter-spacing: 0.3px;
}
:deep(.ant-table-tbody > tr > td) {
padding: 11px 16px;
border-bottom: 1px solid var(--color-border);
color: var(--color-text-primary);
}
:deep(.ant-table-tbody > tr:hover > td) {
background: #f8f8fc;
}
:deep(.ant-pagination) {
margin: 14px 16px;
}
:deep(.ant-table-row-selected > td) {
background: var(--color-primary-light) !important;
}
}
/* ==================== 表单控件 ==================== */
:deep(.ant-input),
:deep(.ant-select-selector),
:deep(.ant-picker) {
border-radius: var(--radius) !important;
border-color: var(--color-border) !important;
box-shadow: none !important;
font-size: 13px;
&:hover {
border-color: var(--color-border-strong) !important;
}
&:focus,
&.ant-input-focused {
border-color: var(--color-primary) !important;
box-shadow: 0 0 0 2px var(--color-primary-light) !important;
}
}
:deep(.ant-select-focused .ant-select-selector) {
border-color: var(--color-primary) !important;
box-shadow: 0 0 0 2px var(--color-primary-light) !important;
}
/* ==================== 按钮样式 ==================== */
:deep(.ant-btn) {
border-radius: var(--radius);
font-weight: 500;
font-size: 13px;
box-shadow: none;
&.ant-btn-primary {
background: var(--color-primary);
border-color: var(--color-primary);
&:hover {
background: var(--color-primary-hover);
border-color: var(--color-primary-hover);
}
}
&.ant-btn-default {
border-color: var(--color-border-strong);
color: var(--color-text-secondary);
background: var(--color-bg-white);
&:hover {
border-color: var(--color-primary);
color: var(--color-primary);
background: var(--color-primary-light);
}
}
}
/* ==================== 表单项 ==================== */
:deep(.ant-form-item) {
margin-bottom: 16px;
}
:deep(.ant-form-item-label > label) {
font-size: 13px;
font-weight: 500;
color: var(--color-text-secondary);
}
/* ==================== 复选框 ==================== */
:deep(.ant-checkbox-checked .ant-checkbox-inner) {
background: var(--color-primary);
border-color: var(--color-primary);
}
/* ==================== 下拉菜单 ==================== */
:deep(.ant-dropdown-menu) {
border-radius: var(--radius);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
:deep(.ant-dropdown-menu-item) {
font-size: 13px;
color: var(--color-text-primary);
&:hover {
background: var(--color-bg-section);
}
}
/* ==================== 操作列链接 ==================== */
:deep(.ant-table-cell) {
.ant-btn-link {
color: var(--color-primary);
padding: 0 6px;
font-size: 13px;
&:hover {
color: var(--color-primary-hover);
}
}
}
/* ==================== 响应式 ==================== */
@media (max-width: 768px) {
.problem-check-page {
padding: 12px;
}
.styled-table {
:deep(.ant-table-title) {
padding: 10px 12px;
}
:deep(.ant-table-thead > tr > th),
:deep(.ant-table-tbody > tr > td) {
padding: 8px 12px;
}
}
}
</style>
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论