Skip to content

Z
zrch-risk-39
提交 4c79503d authored 作者: liuluyu's avatar liuluyu
浏览文件
操作

计划管理样式更新

上级 6a232359
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 508 行增加 和 110 行删除
zrch-risk-client-39/src/store/modules/planFormStore.ts
浏览文件 @ 4c79503d
/**
* 计划执行表单状态管理
* 用于在不同页面之间共享表单保存方法
*/
import { defineStore } from 'pinia'; import { defineStore } from 'pinia';
import { ref } from 'vue'; import { reactive, ref } from 'vue';
export const usePlanFormStore = defineStore('planForm', () => { export const usePlanFormStore = defineStore('planFormStore', () => {
// 存储表单的 ref 回调 // 表单提交回调函数
const submitCallback = ref<() => Promise<any> | null>(null); const submitCallback = ref<(() => Promise<void>) | null>(null);
const formData = ref<any>(null);
/** // 表单数据缓存
* 注册表单提交回调（在 StPlanExcuteForm 中调用） const formDataCache = reactive({
* @param callback - 表单的 submitForm 方法 id: '',
*/ executeStatus: '',
const registerSubmitCallback = (callback: () => Promise<any>) => { actualStartTime: null,
actualEndTime: null,
executeEcord: '',
attachments: [] as any[],
});
// 表单加载状态
const formLoadingState = reactive({
isLoading: false,
isError: false,
errorMessage: '',
lastLoadedId: '',
});
// 注册表单提交回调
const registerSubmitCallback = (callback: () => Promise<void>) => {
submitCallback.value = callback; submitCallback.value = callback;
console.log('[PlanFormStore] 已注册表单保存回调');
}; };
/** // 执行表单提交
* 注册表单数据（用于跨页面访问） const executeSubmit = async () => {
* @param data - 表单数据 if (submitCallback.value) {
*/ try {
const setFormData = (data: any) => { formLoadingState.isError = false;
formData.value = data; formLoadingState.errorMessage = '';
await submitCallback.value();
} catch (error: any) {
formLoadingState.isError = true;
formLoadingState.errorMessage = error?.message || '表单提交失败';
throw error;
}
}
}; };
/** // 更新表单数据缓存
* 获取表单数据 const updateFormDataCache = (data: any) => {
*/ Object.assign(formDataCache, data);
const getFormData = () => {
return formData.value;
}; };
/** // 清除表单缓存
* 执行表单保存（在 TodoIndex 中调用） const clearFormCache = () => {
*/ Object.assign(formDataCache, {
const submitPlanForm = async () => { id: '',
if (!submitCallback.value) { executeStatus: '',
console.warn('[PlanFormStore] 未注册表单保存回调'); actualStartTime: null,
return null; actualEndTime: null,
} executeEcord: '',
attachments: [],
});
formLoadingState.lastLoadedId = '';
};
try { // 设置加载状态
console.log('[PlanFormStore] 开始执行表单保存...'); const setLoadingState = (isLoading: boolean) => {
const result = await submitCallback.value(); formLoadingState.isLoading = isLoading;
console.log('[PlanFormStore] 表单保存成功:', result);
return result;
} catch (error) {
console.error('[PlanFormStore] 表单保存失败:', error);
throw error;
}
}; };
/** // 设置最后加载的ID
* 清空回调（可选） const setLastLoadedId = (id: string) => {
*/ formLoadingState.lastLoadedId = id;
const clearCallback = () => {
submitCallback.value = null;
console.log('[PlanFormStore] 已清空表单保存回调');
}; };
return { return {
submitCallback, submitCallback,
formData, formDataCache,
formLoadingState,
registerSubmitCallback, registerSubmitCallback,
setFormData, executeSubmit,
getFormData, updateFormDataCache,
submitPlanForm, clearFormCache,
clearCallback, setLoadingState,
setLastLoadedId,
}; };
}); });
zrch-risk-client-39/src/views/project/plan/components/StPlanManFlowModal.vue
浏览文件 @ 4c79503d
<template> <template>
<div> <div>
<vxe-drawer <vxe-drawer
...@@ -9,21 +8,40 @@ ...@@ -9,21 +8,40 @@
width="100%" width="100%"
height="100%" height="100%"
:loading="loading" :loading="loading"
class="flat-flow-drawer"
> >
<iframe <template #header>
id="iframeId" <div class="drawer-header">
ref="iframeRef" <h3 class="drawer-title">{{ pageTilte }}</h3>
:src="frmUrl" <span class="drawer-subtitle">计划审批流程</span>
frameborder="0" </div>
style="width: 100%; height: 100%;" </template>
></iframe>
<div class="drawer-body">
<div class="iframe-container">
<div v-if="loading" class="loading-overlay">
<div class="loading-content">
<a-spin size="large" />
<span class="loading-text">加载流程中...</span>
</div>
</div>
<iframe
id="iframeId"
ref="iframeRef"
:src="frmUrl"
frameborder="0"
class="flow-iframe"
@load="handleIframeLoad"
></iframe>
</div>
</div>
</vxe-drawer> </vxe-drawer>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, onMounted,nextTick } from "vue"; import { ref, onMounted, nextTick } from "vue";
import { useUserStoreWithOut } from "/@/store/modules/user"; import { useUserStoreWithOut } from "/@/store/modules/user";
import { defHttp } from '/@/utils/http/axios'; import { defHttp } from '/@/utils/http/axios';
import { getToken } from '/@/utils/auth'; import { getToken } from '/@/utils/auth';
...@@ -35,18 +53,190 @@ const loading = ref(false); ...@@ -35,18 +53,190 @@ const loading = ref(false);
const pageTilte = ref(""); const pageTilte = ref("");
const iframeRef = ref<HTMLIFrameElement>(); const iframeRef = ref<HTMLIFrameElement>();
const handleIframeLoad = () => {
loading.value = false;
};
const iniPage = async (data) => { const iniPage = async (data) => {
pageTilte.value = data.projectName; pageTilte.value = data.projectName;
showPopup.value = true; showPopup.value = true;
loading.value = true;
frmUrl.value = `${import.meta.env.VITE_APP_JFLOW_CORE_ADDR}/#/WF/MyFlow?FlowNo=087&Token=${user.getJflowToken}&tid=${data.id}`; frmUrl.value = `${import.meta.env.VITE_APP_JFLOW_CORE_ADDR}/#/WF/MyFlow?FlowNo=087&Token=${user.getJflowToken}&tid=${data.id}`;
const setSourctUrl = '/api/jflow/setCCWorkId'; const setSourctUrl = '/api/jflow/setCCWorkId';
await defHttp.get({ await defHttp.get({
url: setSourctUrl, url: setSourctUrl,
params: {"targetId":data.id,"targetKey":"targetKey","token":getToken()}, params: {"targetId":data.id,"targetKey":"targetKey","token":getToken()},
}); });
} }
// 暴露方法 // 暴露方法
defineExpose({ iniPage }); defineExpose({ iniPage });
</script> </script>
<style scoped lang="less">
/* ==================== 柔和中性风格 - CSS 变量 ==================== */
.flat-flow-drawer {
--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;
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif;
}
/* ==================== 抽屉头部样式 ==================== */
.drawer-header {
display: flex;
align-items: baseline;
gap: 10px;
border-left: 3px solid var(--color-primary);
padding-left: 10px;
}
.drawer-title {
font-size: 16px;
font-weight: 600;
color: var(--color-text-primary);
margin: 0;
letter-spacing: -0.2px;
}
.drawer-subtitle {
font-size: 12px;
color: var(--color-text-muted);
}
/* ==================== 抽屉主体样式 ==================== */
.drawer-body {
height: 100%;
background: var(--color-bg-page);
padding: 12px;
}
.iframe-container {
position: relative;
width: 100%;
height: 100%;
background: var(--color-bg-white);
border: 1px solid var(--color-border);
border-radius: var(--radius);
overflow: hidden;
}
.flow-iframe {
width: 100%;
height: 100%;
border: none;
}
/* ==================== 加载状态 ==================== */
.loading-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.95);
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
}
.loading-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
.loading-text {
font-size: 14px;
color: var(--color-text-secondary);
}
/* ==================== VXE Drawer 样式覆盖 ==================== */
:deep(.vxe-drawer--wrapper) {
.vxe-drawer--header {
background: var(--color-bg-section);
border-bottom: 1px solid var(--color-border);
padding: 14px 24px;
}
.vxe-drawer--body {
padding: 0;
background: var(--color-bg-page);
}
.vxe-drawer--footer {
background: var(--color-bg-white);
border-top: 1px solid var(--color-border);
padding: 12px 24px;
}
.vxe-button {
border-radius: var(--radius);
font-weight: 500;
font-size: 13px;
box-shadow: none;
&.type--primary {
background: var(--color-primary);
border-color: var(--color-primary);
&:hover {
background: var(--color-primary-hover);
border-color: var(--color-primary-hover);
}
}
&.type--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);
}
}
}
}
/* ==================== 响应式设计 ==================== */
@media (max-width: 768px) {
.drawer-header {
flex-direction: column;
gap: 4px;
}
.drawer-title {
font-size: 16px;
}
.drawer-body {
padding: 12px;
}
:deep(.vxe-drawer--wrapper) {
.vxe-drawer--header {
padding: 12px 16px;
}
.vxe-drawer--footer {
padding: 10px 16px;
}
}
}
</style>
zrch-risk-client-39/src/views/project/plan/components/StPlanManForm.vue
浏览文件 @ 4c79503d
<template> <template>
<div style="background-color: #fff; padding: 100px"> <div class="plan-form-container">
<a-spin :spinning="loading"> <a-spin :spinning="loading">
<BasicForm @register="registerForm"> <!-- 表单头部 -->
<template #planBasis="{ model, field }"> <div class="form-header">
<div v-if="model[field]"> <h2 class="form-title">计划详情</h2>
<div v-if="isValidJson(model[field])"> <p class="form-subtitle">查看和编辑计划信息</p>
<a-tag </div>
v-for="item in safeJsonParse(model[field])"
@click="viewBasisDetail(item)" <!-- 表单内容 -->
:key="item.id" <div class="form-body">
style="margin-bottom: 8px; cursor: pointer" <BasicForm @register="registerForm">
> <template #planBasis="{ model, field }">
{{ item.name }} <div class="basis-container" v-if="model[field]">
</a-tag> <div v-if="isValidJson(model[field])" class="basis-tags">
<a-tag
v-for="item in safeJsonParse(model[field])"
@click="viewBasisDetail(item)"
:key="item.id"
class="basis-tag"
>
{{ item.name }}
</a-tag>
</div>
<a-alert v-else type="warning" :message="`无效的数据格式: ${model[field]}`" class="basis-alert" />
</div> </div>
<a-alert v-else type="warning" :message="`无效的数据格式: ${model[field]}`" /> <div v-else class="basis-empty">
</div> <a-empty description="暂无依据数据" :image-style="{ height: '40px' }" />
<a-empty v-else description="暂无数据" /> </div>
</template> </template>
</BasicForm> </BasicForm>
</a-spin> </div>
<div style="width: 100%; text-align: center; margin-top: 24px" v-if="!formDisabled"> <!-- 操作按钮 -->
<a-space> <div class="form-footer" v-if="!formDisabled">
<a-button @click="submitForm" type="primary" :loading="submitting" pre-icon="ant-design:check">提 交</a-button> <a-space :size="12">
<a-button @click="handleReset">重 置</a-button> <a-button @click="handleReset">重置</a-button>
</a-space> <a-button @click="submitForm" type="primary" :loading="submitting">提交</a-button>
</div> </a-space>
</div>
</a-spin>
<AuditInnerDetailDrawer ref="auditInnerDetailDrawerRef" :visible="showDetailDrawer" :basis="selectedBasis" @close="handleDrawerClose" /> <AuditInnerDetailDrawer ref="auditInnerDetailDrawerRef" :visible="showDetailDrawer" :basis="selectedBasis" @close="handleDrawerClose" />
</div> </div>
...@@ -125,29 +137,12 @@ ...@@ -125,29 +137,12 @@
const initFormData = async () => { const initFormData = async () => {
try { try {
loading.value = true; loading.value = true;
//const { cctoken, WorkID } = getUrlParams();
//console.log('Token:', cctoken, 'WorkID:', WorkID);
const timestamp = new Date().getTime(); const timestamp = new Date().getTime();
/**
const gettokeyUrl = '/api/jflow/getCCWorkTokenAndTid';
const {tid,token} = await defHttp.get({
url: gettokeyUrl,
params: {
"targetKey":"targetKey",
"flowToken":cctoken,
"WorkID":WorkID,
"_t": timestamp},
});
*/
let tid = toRaw(route.query).id; let tid = toRaw(route.query).id;
console.log('tid:', tid); console.log('tid:', tid);
//setAuthCache(TOKEN_KEY, token);
//console.log('tid:', tid, 'token:', token);
const queryByIdUrl = '/plan.main/stPlanMan/queryById'; const queryByIdUrl = '/plan.main/stPlanMan/queryById';
const data = await defHttp.get({ const data = await defHttp.get({
url: queryByIdUrl, url: queryByIdUrl,
...@@ -169,14 +164,216 @@ ...@@ -169,14 +164,216 @@
loading.value = false; loading.value = false;
} }
}; };
const handleReset = () => {
resetFields();
};
const submitForm = async () => {
try {
submitting.value = true;
await validate();
const values = getFieldsValue();
await saveOrUpdate(values, true);
createMessage.success('提交成功');
} catch (error) {
console.error('提交失败:', error);
} finally {
submitting.value = false;
}
};
onMounted(() => { onMounted(() => {
initFormData(); initFormData();
}); });
</script> </script>
<style scoped> <style scoped lang="less">
.ant-tag { /* ==================== 柔和中性风格 - CSS 变量 ==================== */
margin-right: 8px; .plan-form-container {
cursor: pointer; --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;
background: var(--color-bg-white);
min-height: 100vh;
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif;
}
/* ==================== 表单头部 ==================== */
.form-header {
background: var(--color-bg-white);
border-bottom: 1px solid var(--color-border);
padding: 20px 32px;
border-left: 3px solid var(--color-primary);
padding-left: 28px;
}
.form-title {
font-size: 18px;
font-weight: 600;
color: var(--color-text-primary);
margin: 0 0 3px 0;
letter-spacing: -0.2px;
}
.form-subtitle {
font-size: 13px;
color: var(--color-text-muted);
margin: 0;
}
/* ==================== 表单主体 ==================== */
.form-body {
padding: 24px 32px;
background: var(--color-bg-white);
}
/* 依据标签样式 */
.basis-container {
padding: 8px 0;
}
.basis-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.basis-tag {
display: inline-flex;
align-items: center;
padding: 4px 10px;
background: var(--color-primary-light);
border: 1px solid var(--color-primary);
border-radius: var(--radius);
color: var(--color-primary);
font-size: 13px;
cursor: pointer;
transition: background 0.15s;
&:hover {
background: #d0d9f8;
}
}
.basis-alert {
border-radius: var(--radius);
}
.basis-empty {
padding: 16px;
background: var(--color-bg-section);
border-radius: var(--radius);
border: 1px dashed var(--color-border-strong);
}
/* ==================== 表单底部按钮 ==================== */
.form-footer {
padding: 14px 32px;
background: var(--color-bg-section);
border-top: 1px solid var(--color-border);
display: flex;
justify-content: flex-end;
}
/* ==================== 表单控件样式覆盖 ==================== */
:deep(.ant-form-item) {
margin-bottom: 18px;
}
:deep(.ant-form-item-label > label) {
font-size: 13px;
font-weight: 500;
color: var(--color-text-secondary);
}
:deep(.ant-input),
:deep(.ant-select-selector),
:deep(.ant-picker),
:deep(.ant-input-textarea textarea) {
border-radius: var(--radius) !important;
border-color: var(--color-border) !important;
font-size: 13px;
box-shadow: none !important;
&: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;
height: 34px;
padding: 0 18px;
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-spin-container) {
min-height: 400px;
}
/* ==================== 响应式设计 ==================== */
@media (max-width: 768px) {
.form-header {
padding: 16px 20px;
}
.form-body {
padding: 20px;
}
.form-footer {
padding: 12px 20px;
} }
}
</style> </style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论