Skip to content

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

计划管理样式更新

上级 6a232359
全部展开 显示空白字符变更
内嵌 并排
正在显示 包含 487 行增加 和 89 行删除
zrch-risk-client-39/src/store/modules/planFormStore.ts
浏览文件 @ 4c79503d
/**
* 计划执行表单状态管理
* 用于在不同页面之间共享表单保存方法
*/
import { defineStore } from 'pinia';
import { ref } from 'vue';
import { reactive, ref } from 'vue';
export const usePlanFormStore = defineStore('planForm', () => {
// 存储表单的 ref 回调
const submitCallback = ref<() => Promise<any> | null>(null);
const formData = ref<any>(null);
export const usePlanFormStore = defineStore('planFormStore', () => {
// 表单提交回调函数
const submitCallback = ref<(() => Promise<void>) | null>(null);
/**
* 注册表单提交回调（在 StPlanExcuteForm 中调用）
* @param callback - 表单的 submitForm 方法
*/
const registerSubmitCallback = (callback: () => Promise<any>) => {
// 表单数据缓存
const formDataCache = reactive({
id: '',
executeStatus: '',
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;
console.log('[PlanFormStore] 已注册表单保存回调');
};
/**
* 注册表单数据（用于跨页面访问）
* @param data - 表单数据
*/
const setFormData = (data: any) => {
formData.value = data;
// 执行表单提交
const executeSubmit = async () => {
if (submitCallback.value) {
try {
formLoadingState.isError = false;
formLoadingState.errorMessage = '';
await submitCallback.value();
} catch (error: any) {
formLoadingState.isError = true;
formLoadingState.errorMessage = error?.message || '表单提交失败';
throw error;
}
}
};
/**
* 获取表单数据
*/
const getFormData = () => {
return formData.value;
// 更新表单数据缓存
const updateFormDataCache = (data: any) => {
Object.assign(formDataCache, data);
};
/**
* 执行表单保存（在 TodoIndex 中调用）
*/
const submitPlanForm = async () => {
if (!submitCallback.value) {
console.warn('[PlanFormStore] 未注册表单保存回调');
return null;
}
// 清除表单缓存
const clearFormCache = () => {
Object.assign(formDataCache, {
id: '',
executeStatus: '',
actualStartTime: null,
actualEndTime: null,
executeEcord: '',
attachments: [],
});
formLoadingState.lastLoadedId = '';
};
try {
console.log('[PlanFormStore] 开始执行表单保存...');
const result = await submitCallback.value();
console.log('[PlanFormStore] 表单保存成功:', result);
return result;
} catch (error) {
console.error('[PlanFormStore] 表单保存失败:', error);
throw error;
}
// 设置加载状态
const setLoadingState = (isLoading: boolean) => {
formLoadingState.isLoading = isLoading;
};
/**
* 清空回调（可选）
*/
const clearCallback = () => {
submitCallback.value = null;
console.log('[PlanFormStore] 已清空表单保存回调');
// 设置最后加载的ID
const setLastLoadedId = (id: string) => {
formLoadingState.lastLoadedId = id;
};
return {
submitCallback,
formData,
formDataCache,
formLoadingState,
registerSubmitCallback,
setFormData,
getFormData,
submitPlanForm,
clearCallback,
executeSubmit,
updateFormDataCache,
clearFormCache,
setLoadingState,
setLastLoadedId,
};
});
zrch-risk-client-39/src/views/project/plan/components/StPlanManFlowModal.vue
浏览文件 @ 4c79503d
<template>
<div>
<vxe-drawer
......@@ -9,21 +8,40 @@
width="100%"
height="100%"
:loading="loading"
class="flat-flow-drawer"
>
<template #header>
<div class="drawer-header">
<h3 class="drawer-title">{{ pageTilte }}</h3>
<span class="drawer-subtitle">计划审批流程</span>
</div>
</template>
<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"
style="width: 100%; height: 100%;"
class="flow-iframe"
@load="handleIframeLoad"
></iframe>
</div>
</div>
</vxe-drawer>
</div>
</template>
<script lang="ts" setup>
import { ref, onMounted,nextTick } from "vue";
import { ref, onMounted, nextTick } from "vue";
import { useUserStoreWithOut } from "/@/store/modules/user";
import { defHttp } from '/@/utils/http/axios';
import { getToken } from '/@/utils/auth';
......@@ -35,18 +53,190 @@ const loading = ref(false);
const pageTilte = ref("");
const iframeRef = ref<HTMLIFrameElement>();
const handleIframeLoad = () => {
loading.value = false;
};
const iniPage = async (data) => {
pageTilte.value = data.projectName;
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}`;
const setSourctUrl = '/api/jflow/setCCWorkId';
await defHttp.get({
url: setSourctUrl,
params: {"targetId":data.id,"targetKey":"targetKey","token":getToken()},
});
}
// 暴露方法
defineExpose({ iniPage });
</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>
<div style="background-color: #fff; padding: 100px">
<div class="plan-form-container">
<a-spin :spinning="loading">
<!-- 表单头部 -->
<div class="form-header">
<h2 class="form-title">计划详情</h2>
<p class="form-subtitle">查看和编辑计划信息</p>
</div>
<!-- 表单内容 -->
<div class="form-body">
<BasicForm @register="registerForm">
<template #planBasis="{ model, field }">
<div v-if="model[field]">
<div v-if="isValidJson(model[field])">
<div class="basis-container" v-if="model[field]">
<div v-if="isValidJson(model[field])" class="basis-tags">
<a-tag
v-for="item in safeJsonParse(model[field])"
@click="viewBasisDetail(item)"
:key="item.id"
style="margin-bottom: 8px; cursor: pointer"
class="basis-tag"
>
{{ item.name }}
</a-tag>
</div>
<a-alert v-else type="warning" :message="`无效的数据格式: ${model[field]}`" />
<a-alert v-else type="warning" :message="`无效的数据格式: ${model[field]}`" class="basis-alert" />
</div>
<div v-else class="basis-empty">
<a-empty description="暂无依据数据" :image-style="{ height: '40px' }" />
</div>
<a-empty v-else description="暂无数据" />
</template>
</BasicForm>
</a-spin>
</div>
<div style="width: 100%; text-align: center; margin-top: 24px" v-if="!formDisabled">
<a-space>
<a-button @click="submitForm" type="primary" :loading="submitting" pre-icon="ant-design:check">提 交</a-button>
<a-button @click="handleReset">重 置</a-button>
<!-- 操作按钮 -->
<div class="form-footer" v-if="!formDisabled">
<a-space :size="12">
<a-button @click="handleReset">重置</a-button>
<a-button @click="submitForm" type="primary" :loading="submitting">提交</a-button>
</a-space>
</div>
</a-spin>
<AuditInnerDetailDrawer ref="auditInnerDetailDrawerRef" :visible="showDetailDrawer" :basis="selectedBasis" @close="handleDrawerClose" />
</div>
......@@ -125,29 +137,12 @@
const initFormData = async () => {
try {
loading.value = true;
//const { cctoken, WorkID } = getUrlParams();
//console.log('Token:', cctoken, 'WorkID:', WorkID);
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;
console.log('tid:', tid);
//setAuthCache(TOKEN_KEY, token);
//console.log('tid:', tid, 'token:', token);
const queryByIdUrl = '/plan.main/stPlanMan/queryById';
const data = await defHttp.get({
url: queryByIdUrl,
......@@ -169,14 +164,216 @@
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(() => {
initFormData();
});
</script>
<style scoped>
.ant-tag {
margin-right: 8px;
<style scoped lang="less">
/* ==================== 柔和中性风格 - CSS 变量 ==================== */
.plan-form-container {
--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>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论