设计资料

This commit is contained in:
2025-08-12 19:01:04 +08:00
parent aecff98642
commit 8c024e6269
18 changed files with 2894 additions and 218 deletions

View File

@ -5,7 +5,7 @@ VITE_APP_TITLE = 新能源项目管理平台
VITE_APP_ENV = 'development'
# 开发环境
VITE_APP_BASE_API = 'http://192.168.110.159:8898'
VITE_APP_BASE_API = 'http://192.168.110.180:8898'
# 无人机接口地址

View File

@ -0,0 +1,26 @@
import request from '@/utils/request';
// 提资计划
// 批量新增或修改
export const extractBatch = (data) => {
return request({
url: '/design/extract/batch',
method: 'post',
data: data
});
};
// 批量新增或修改
export const extractList = (params) => {
return request({
url: '/design/extract/list',
method: 'get',
params: params
});
};
// 获取提资清单详细信息
export const extractDetail = (id) => {
return request({
url: '/design/extract/' + id,
method: 'get'
});
};

View File

@ -0,0 +1,29 @@
import request from '@/utils/request';
// 设计人员
// 新增
export const designUserAdd = (data) => {
return request({
url: '/design/user/batch',
method: 'post',
data: data
});
};
// 查询
export const designUserList = (query) => {
return request({
url: '/design/user/list',
method: 'get',
params: query
});
};
// 查询
export const systemUserList = (query) => {
return request({
url: '/system/user/list',
method: 'get',
params: query
});
};

View File

@ -0,0 +1,27 @@
import request from '@/utils/request';
// 收资计划
// 查询收资清单目录列表
export const collectCatalogueList = (data) => {
return request({
url: '/design/collectCatalogue/list',
method: 'get',
params: data
});
};
// 查询收资文件列表
export const collectFileList = (params) => {
return request({
url: '/design/collectFile/list',
method: 'get',
params
});
};
// 获取收资文件详细信息
export const getCollectFile = (id) => {
return request({
url: '/design/collectFile/' + id,
method: 'get'
});
};

View File

@ -0,0 +1,19 @@
import request from '@/utils/request';
// 收资计划
// 批量新增或修改
export const collectBatch = (data) => {
return request({
url: '/design/collect/batch',
method: 'post',
data: data
});
};
// 获取收资清单详细信息
export const byProjectId = (ProjectId) => {
return request({
url: '/design/collect/byProjectId/' + ProjectId,
method: 'get'
});
};

View File

@ -38,6 +38,7 @@ export const useUserStore = defineStore('user', () => {
const nickname = ref('');
const userId = ref<string | number>('');
const tenantId = ref<string>('');
const deptId = ref<string | number>('');
const avatar = ref('');
const roles = ref<Array<string>>([]); // 用户角色编码集合 → 判断路由权限
const permissions = ref<Array<string>>([]); // 用户权限编码集合 → 判断按钮权限
@ -82,6 +83,7 @@ export const useUserStore = defineStore('user', () => {
avatar.value = profile;
userId.value = user.userId;
tenantId.value = user.tenantId;
deptId.value = user.deptId;
// **新增项目数据获取**
const [projectErr, projectRes] = await to(getUserProject());
@ -141,6 +143,7 @@ export const useUserStore = defineStore('user', () => {
return {
userId,
tenantId,
deptId,
token,
nickname,
avatar,

View File

@ -0,0 +1,156 @@
<template>
<div class="p-6 bg-gray-50 condition">
<transition>
<div v-show="showSearch" class="mb-[10px]">
<el-card shadow="never">
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item label="电话" prop="phone">
<el-input v-model="queryParams.phone" placeholder="请输入电话" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
</el-card>
</div>
</transition>
<el-card shadow="never">
<template #header>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
</el-col>
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
</template>
<el-table v-loading="loading" :data="professionalList">
<el-table-column label="序号" align="center" type="index" width="100" />
<el-table-column label="提资人" align="center" prop="userName" />
<el-table-column label="专业" align="center" prop="userMajor" />
<el-table-column label="电话" align="center" prop="phone" />
<el-table-column label="邮箱" align="center" prop="email" />
<el-table-column label="流程状态" align="center" prop="status">
<template #default="scope">
<dict-tag :options="wf_business_status" :value="scope.row.status" />
</template>
</el-table-column>
<el-table-column label="操作">
<template #default="scope">
<el-row :gutter="10" class="mb8">
<el-col :span="1.5" v-if="scope.row.status === 'draft' || scope.row.status === 'cancel' || scope.row.status === 'back'">
<el-button size="small" type="primary" icon="Edit" @click="handleUpdate(scope.row)">审核</el-button>
</el-col>
<!-- <el-col :span="1.5" v-if="scope.row.status === 'draft' || scope.row.status === 'cancel' || scope.row.status === 'back'">
<el-button size="small" type="primary" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
</el-col> -->
</el-row>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="warning" size="small" icon="View" v-if="scope.row.status != 'draft'" @click="handleViewInfo(scope.row)"
>查看流程</el-button
>
</el-col>
</el-row>
</template>
</el-table-column>
</el-table>
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
</el-card>
</div>
</template>
<script setup name="DataCollectionForm" lang="ts">
import { ref, reactive, computed, onMounted } from 'vue';
import { useUserStoreHook } from '@/store/modules/user';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { wf_business_status } = toRefs<any>(proxy?.useDict('wf_business_status'));
import { extractList } from '@/api/design/Professional';
// 获取用户 store
const userStore = useUserStoreHook();
const total = ref(0);
// 从 store 中获取当前选中的项目
const currentProject = computed(() => userStore.selectedProject);
const professionalList = ref([]);
const showSearch = ref(true);
const loading = ref(false);
const data = reactive({
queryParams: {
pageNum: 1,
pageSize: 10,
projectId: currentProject.value?.id,
phone: undefined,
status: undefined,
params: {}
}
});
const queryFormRef = ref<ElFormInstance>();
const { queryParams } = toRefs(data);
// 查询提资清单表
const getList = async () => {
let res = await extractList({ projectId: currentProject.value?.id });
if (res.code == 200) {
professionalList.value = res.rows;
total.value = res.total; //默认第一个
}
};
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.value.pageNum = 1;
getList();
};
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value?.resetFields();
handleQuery();
};
/** 新增按钮操作 */
const handleAdd = (row) => {
proxy.$tab.closePage(proxy.$route);
proxy.$router.push({
path: `/design-management/Professional/indexEdit`,
query: {
id: row.id,
type: 'add'
}
});
};
const handleViewInfo = (row) => {
proxy.$tab.closePage(proxy.$route);
proxy.$router.push({
path: `/design-management/Professional/indexEdit`,
query: {
id: row.id,
type: 'view'
}
});
};
const handleUpdate = (row) => {
proxy.$tab.closePage(proxy.$route);
proxy.$router.push({
path: `/design-management/Professional/indexEdit`,
query: {
id: row.id,
type: 'update'
}
});
};
const handleDelete = (row) => {
//
};
// 页面挂载时初始化数据
onMounted(() => {
getList();
});
</script>
<style lang="scss">
.condition {
.el-tabs__header {
height: 84vh !important;
}
}
</style>

View File

@ -0,0 +1,535 @@
<template>
<div class="p-4 bg-gray-50">
<div class="max-w-4xl mx-auto">
<!-- 顶部按钮区域 -->
<el-card class="mb-4 rounded-lg shadow-sm bg-white border border-gray-100 transition-all hover:shadow-md">
<approvalButton
@submitForm="submitForm"
@approvalVerifyOpen="approvalVerifyOpen"
@handleApprovalRecord="handleApprovalRecord"
:buttonLoading="buttonLoading"
:id="form.id"
:status="form.status"
:pageType="routeParams.type"
/>
</el-card>
<!-- 表单区域 -->
<el-card class="rounded-lg shadow-sm bg-white border border-gray-100 transition-all hover:shadow-md overflow-hidden">
<div class="p-4 bg-gradient-to-r from-blue-50 to-indigo-50 border-b border-gray-100">
<h3 class="text-lg font-semibold text-gray-800">专业互提资料</h3>
</div>
<div class="p-6">
<div class="appWidth mx-auto bg-white rounded-xl shadow-sm overflow-hidden transition-all duration-300 hover:shadow-md">
<!-- 表单内容区域 -->
<el-form :disabled="disableAll" ref="mainFormRef" :model="form" :rules="mainRules" label-width="120px" class="p-6">
<!-- 基本信息区域 -->
<div class="bg-blue-50 p-4 rounded-lg mb-6">
<h3 class="text-lg font-semibold text-blue-700 mb-4">基本信息</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<el-form-item label="收资人" prop="userId" class="mb-4">
<el-select
v-model="form.userId"
placeholder="请选择提资人"
class="w-full transition-all duration-300 border-gray-300 focus:border-blue-400 focus:ring-1 focus:ring-blue-400"
>
<el-option v-for="item in userList" :key="item.userId" :label="item.nickName" :value="item.userId" />
</el-select>
</el-form-item>
<el-form-item label="专业" prop="user_major" class="mb-4">
<el-select
v-model="form.user_major"
placeholder="请选择专业"
class="transition-all duration-300 border-gray-300"
:rules="{ required: true, message: '请选择专业', trigger: 'change' }"
>
<el-option v-for="item in des_user_major" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="电话" prop="phone" class="mb-4">
<el-input placeholder="请输入电话" v-model="form.phone" autocomplete="off" />
</el-form-item>
<el-form-item label="邮箱" prop="email" class="mb-4">
<el-input placeholder="请输入邮箱" v-model="form.email" autocomplete="off" />
</el-form-item>
</div>
</div>
<!-- 资料文件区域 -->
<div class="mb-6">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-semibold text-blue-700">资料文件清单</h3>
<el-button type="primary" size="small" @click="addDocumentItem" icon="Plus"> 添加资料 </el-button>
</div>
<el-form :disabled="disableAll" ref="documentsFormRef" :model="form" class="space-y-4">
<div
v-for="(item, index) in form.documents"
:key="item.id"
class="bg-gray-50 p-4 rounded-lg transition-all duration-200 hover:shadow-sm"
>
<div class="flex justify-between items-start mb-2">
<span class="text-sm font-medium text-gray-600">资料 {{ index + 1 }}</span>
<el-button
type="text"
size="small"
text-color="#ff4d4f"
@click="removeDocumentItem(index)"
icon="el-icon-delete"
v-if="form.documents.length > 1"
>
删除
</el-button>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<el-form-item
label="资料名称"
:prop="`documents.${index}.catalogueName`"
:rules="[{ required: true, message: '请输入文件目录名称', trigger: 'blur' }]"
class="mb-4"
>
<el-input placeholder="请输入文件目录名称" v-model="item.catalogueName" autocomplete="off" />
</el-form-item>
<el-form-item label="备注" :prop="`documents.${index}.remark`" class="mb-4">
<el-input placeholder="请输入备注" v-model="item.remark" autocomplete="off" />
</el-form-item>
</div>
</div>
</el-form>
</div>
</el-form>
</div>
</div>
</el-card>
<!-- 提交组件 -->
<submitVerify ref="submitVerifyRef" :task-variables="taskVariables" @submit-callback="submitCallback" />
<approvalRecord ref="approvalRecordRef"></approvalRecord>
<!-- 流程选择对话框 -->
<el-dialog
draggable
v-model="dialogVisible.visible"
:title="dialogVisible.title"
:before-close="handleClose"
width="500"
class="rounded-lg shadow-lg"
>
<div class="p-4">
<p class="text-gray-600 mb-4">请选择要启动的流程</p>
<el-select v-model="flowCode" placeholder="请选择流程" style="width: 100%">
<el-option v-for="item in flowCodeOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
<template #footer>
<div class="dialog-footer p-4 border-t border-gray-100 flex justify-end space-x-3">
<el-button @click="handleClose" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-colors"
>取消</el-button
>
<el-button type="primary" @click="submitFlow()" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors"
>确认</el-button
>
</div>
</template>
</el-dialog>
</div>
</div>
</template>
<script setup name="Leave" lang="ts">
import { LeaveForm } from '@/api/workflow/leave/types';
import { startWorkFlow } from '@/api/workflow/task';
import SubmitVerify from '@/components/Process/submitVerify.vue';
import ApprovalRecord from '@/components/Process/approvalRecord.vue';
import ApprovalButton from '@/components/Process/approvalButton.vue';
import { StartProcessBo } from '@/api/workflow/workflowCommon/types';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
import { useUserStoreHook } from '@/store/modules/user';
import { systemUserList } from '@/api/design/appointment';
import { extractBatch, extractDetail } from '@/api/design/Professional';
// 获取用户 store
const userStore = useUserStoreHook();
// 从 store 中获取项目列表和当前选中的项目
const currentProject = computed(() => userStore.selectedProject);
const { des_user_major } = toRefs<any>(proxy?.useDict('des_user_major'));
const buttonLoading = ref(false);
const loading = ref(true);
const disableAll = ref(false);
//路由参数
const routeParams = ref<Record<string, any>>({});
const flowCodeOptions = [
{
value: currentProject.value?.id + '_extract',
label: '互提资料清单'
}
];
const flowCode = ref<string>('');
const status = ref<string>('');
const dialogVisible = reactive<DialogOption>({
visible: false,
title: '流程定义'
});
//提交组件
const submitVerifyRef = ref<InstanceType<typeof SubmitVerify>>();
//审批记录组件
const approvalRecordRef = ref<InstanceType<typeof ApprovalRecord>>();
//按钮组件
const approvalButtonRef = ref<InstanceType<typeof ApprovalButton>>();
const leaveFormRef = ref<ElFormInstance>();
const dialog = reactive({
visible: false,
title: '',
isEdit: false
});
const submitFormData = ref<StartProcessBo>({
businessId: '',
flowCode: '',
variables: {}
});
const taskVariables = ref<Record<string, any>>({});
// 用户列表
const userList = ref([]);
const userMap = new Map();
// 表单引用
const mainFormRef = ref();
const handleClose = () => {
dialogVisible.visible = false;
flowCode.value = '';
buttonLoading.value = false;
};
// 表单数据
const form = reactive({
projectId: currentProject.value?.id,
userId: '', // 收资人
user_major: '', // 专业
phone: '', // 电话
email: '', // 邮箱
id: '',
status: '',
documents: [
{
id: Date.now(),
catalogueName: '', // 文件目录名称
remark: '' // 备注
}
] as Array<{
id: number;
catalogueName: string;
remark: string;
}>
});
// 主表单验证规则
const mainRules = reactive({
userId: [{ required: true, message: '请输入收资人', trigger: 'blur' }],
user_major: [{ required: true, message: '请选择专业', trigger: 'change' }],
phone: [
{ required: true, message: '请输入电话', trigger: 'blur' },
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
],
email: [
{ required: true, message: '请输入邮箱', trigger: 'blur' },
{ type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
]
});
/** 表单重置 */
const reset = () => {
if (mainFormRef.value) {
mainFormRef.value.resetFields();
}
// 重置资料列表,保留一个空项
form.documents = [
{
id: Date.now(),
catalogueName: '',
remark: ''
}
];
leaveFormRef.value?.resetFields();
};
// 添加资料项
const addDocumentItem = () => {
form.documents.push({
id: Date.now(),
catalogueName: '',
remark: ''
});
};
// 删除资料项
const removeDocumentItem = (index: number) => {
form.documents.splice(index, 1);
};
/** 提交按钮 */
const submitForm = (status1: string) => {
status.value = status1;
buttonLoading.value = true;
dialog.visible = false;
// 验证表单数据
// 验证表单数据(主要验证基本信息中的必填项)
mainFormRef.value.validate(async (valid) => {
if (valid) {
console.log('验证成功');
form.documents.map((item, i) => {
item.num = i + 1;
});
let body = {
desExtractBo: {
projectId: currentProject.value?.id,
userId: form.userId, // 收资人
userMajor: form.user_major, // 专业
id: form.id,
phone: form.phone, // 电话
email: form.email, // 邮箱
userName: userMap.get(form.userId)
},
catalogueList: form.documents
};
let res = await extractBatch(body);
if (res.code == 200) {
buttonLoading.value = false;
dialog.visible = false;
} else {
ElMessage.error(res.msg);
}
// 表单验证通过,执行提交逻辑
form.id = res.data;
submit(status.value, form);
} else {
// 表单验证失败,提示用户并关闭加载状态
proxy?.$modal.msgError('请完善必填信息后再提交');
buttonLoading.value = false;
return false;
}
});
};
const submitFlow = async () => {
handleStartWorkFlow(form);
dialogVisible.visible = false;
};
//提交申请
const handleStartWorkFlow = async (data: LeaveForm) => {
try {
submitFormData.value.flowCode = flowCode.value;
submitFormData.value.businessId = data.id;
//流程变量
taskVariables.value = {
// leave4/5 使用的流程变量
userList: ['1', '3', '4']
};
submitFormData.value.variables = taskVariables.value;
const resp = await startWorkFlow(submitFormData.value);
if (submitVerifyRef.value) {
buttonLoading.value = false;
submitVerifyRef.value.openDialog(resp.data.taskId);
}
} finally {
buttonLoading.value = false;
}
};
//审批记录
const handleApprovalRecord = () => {
approvalRecordRef.value.init(form.id);
};
//提交回调
const submitCallback = async () => {
await proxy.$tab.closePage(proxy.$route);
proxy.$router.go(-1);
};
//审批
const approvalVerifyOpen = async () => {
submitVerifyRef.value.openDialog(routeParams.value.taskId);
};
const submit = async (status, data) => {
if (status === 'draft') {
buttonLoading.value = false;
proxy?.$modal.msgSuccess('暂存成功');
proxy.$tab.closePage(proxy.$route);
proxy.$router.go(-1);
} else {
if ((form.status === 'draft' && (flowCode.value === '' || flowCode.value === null)) || routeParams.value.type === 'add') {
flowCode.value = flowCodeOptions[0].value;
dialogVisible.visible = true;
return;
}
//说明启动过先随意穿个参数
if (flowCode.value === '' || flowCode.value === null) {
flowCode.value = 'xx';
}
await handleStartWorkFlow(data);
}
};
/** 查询当前部门的所有用户 */
const getDeptAllUser = async (deptId: any) => {
try {
const res = await systemUserList({ deptId });
// 实际项目中使用接口返回的数据
userList.value = res.rows;
userList.value.forEach((user) => {
userMap.set(user.userId, user.nickName);
});
} catch (error) {
ElMessage.error('获取用户列表失败');
}
};
// 查询数据 再次回显
const byProjectIdAll = async () => {
loading.value = true;
buttonLoading.value = false;
// 调用接口获取数据
const res = await extractDetail(routeParams.value.id);
if (res.code === 200 && res.data) {
const data = res.data;
// 回显基本信息
form.userId = data.userId || '';
form.user_major = data.userMajor || '';
form.phone = data.phone || '';
form.email = data.email || '';
form.id = data.id || '';
form.status = data.status || '';
if (data.status != 'draft') {
disableAll.value = true;
}
// 回显资料文件列表
if (data.catalogueList && data.catalogueList.length > 0) {
// 清空现有列表
form.documents = [];
// 填充新数据
data.catalogueList.forEach((item: any, index: number) => {
form.documents.push({
id: item.id || Date.now() + index, // 确保id唯一
catalogueName: item.catalogueName || '',
remark: item.remark || ''
});
});
} else {
// 如果没有资料,保持一个空项
form.documents = [
{
id: Date.now(),
catalogueName: '',
remark: ''
}
];
}
}
loading.value = false;
buttonLoading.value = false;
};
onMounted(() => {
nextTick(async () => {
routeParams.value = proxy.$route.query;
reset();
loading.value = false;
if (routeParams.value.type === 'update' || routeParams.value.type === 'view' || routeParams.value.type === 'approval') {
getDeptAllUser(userStore.deptId).then(() => {
byProjectIdAll();
});
} else {
getDeptAllUser(userStore.deptId);
}
});
});
</script>
<style scoped lang="scss">
/* 全局样式 */
:root {
--primary: #409eff;
--primary-light: #66b1ff;
--primary-dark: #3a8ee6;
--success: #67c23a;
--warning: #e6a23c;
--danger: #f56c6c;
--info: #909399;
}
/* 表单样式优化 */
.el-form-item {
.el-form-item__label {
color: #606266;
font-weight: 500;
}
.el-input__inner,
.el-select .el-input__inner {
border-radius: 4px;
transition:
border-color 0.2s,
box-shadow 0.2s;
&:focus {
border-color: var(--primary-light);
box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}
}
.el-textarea__inner {
border-radius: 4px;
transition:
border-color 0.2s,
box-shadow 0.2s;
&:focus {
border-color: var(--primary-light);
box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}
}
}
/* 按钮样式优化 */
.el-button {
border-radius: 4px;
transition: all 0.2s;
&.is-primary {
background-color: var(--primary);
border-color: var(--primary);
&:hover {
background-color: var(--primary-light);
border-color: var(--primary-light);
}
&:active {
background-color: var(--primary-dark);
border-color: var(--primary-dark);
}
}
&.is-text {
color: var(--primary);
&:hover {
color: var(--primary-light);
background-color: rgba(64, 158, 255, 0.05);
}
}
}
/* 卡片样式优化 */
.el-card {
transition: all 0.3s ease;
&:hover {
/* transform: translateY(-2px); */
}
}
/* 对话框样式优化 */
.el-dialog {
.el-dialog__header {
background-color: #f5f7fa;
border-bottom: 1px solid #ebeef5;
padding: 15px 20px;
}
.el-dialog__title {
font-size: 16px;
font-weight: 600;
color: #303133;
}
.el-dialog__footer {
padding: 15px 20px;
border-top: 1px solid #ebeef5;
}
}
</style>

View File

@ -0,0 +1,516 @@
<template>
<div class="p-6 bg-gray-50">
<div class="appWidth mx-auto bg-white rounded-xl shadow-sm overflow-hidden transition-all duration-300 hover:shadow-md">
<!-- 表单标题区域 -->
<div class="bg-gradient-to-r from-blue-500 to-blue-600 text-white p-6">
<h2 class="text-2xl font-bold flex items-center"><i class="el-icon-user-circle mr-3"></i>人员配置</h2>
<p class="text-blue-100 mt-2 opacity-90">请配置项目相关负责人员信息</p>
<!-- <span class="text-red-300">*</span> 为必填项 -->
</div>
<!-- 表单内容区域 -->
<el-form ref="leaveFormRef" :model="form" :rules="rules" label-width="120px" class="p-6 space-y-6">
<!-- 设计负责人 -->
<div class="fonts">
<el-form-item label="设计负责人" prop="designLeader" class="mb-4">
<el-select
v-model="form.designLeader"
placeholder="请选择设计负责人"
class="w-full transition-all duration-300 border-gray-300 focus:border-blue-400 focus:ring-1 focus:ring-blue-400"
>
<el-option v-for="item in userList" :key="item.userId" :label="item.nickName" :value="item.userId" />
</el-select>
</el-form-item>
</div>
<!-- 设计人员 -->
<div class="border border-gray-200 rounded-lg p-5 transition-all duration-300 hover:shadow-md bg-gray-50">
<div class="flex justify-between items-center mb-5">
<h3 class="text-lg font-semibold text-gray-700 flex items-center"><i class="el-icon-user mr-2 text-blue-500"></i>设计人员</h3>
<el-button
type="primary"
size="small"
@click="addPerson('designers')"
class="transition-all duration-300 transform hover:scale-105 bg-blue-500 hover:bg-blue-600"
>
<i class="el-icon-plus mr-1"></i>新增设计人员
</el-button>
</div>
<div v-for="(designer, index) in form.designers" :key="index" class="flex items-center mb-4 animate-fadeIn">
<el-form-item
:prop="`designers.${index}.userId`"
:rules="{ required: true, message: '请选择设计人员', trigger: 'change' }"
class="flex-1 mr-3"
>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<el-select
v-model="designer.userMajor"
placeholder="请选择专业"
class="transition-all duration-300 border-gray-300"
:rules="{ required: true, message: '请选择专业', trigger: 'change' }"
>
<el-option v-for="item in des_user_major" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<el-select v-model="designer.userId" placeholder="请选择设计人员" class="transition-all duration-300 border-gray-300">
<el-option v-for="item in userList" :key="item.userId" :label="item.nickName" :value="item.userId" />
</el-select>
</div>
</el-form-item>
<el-button
type="danger"
size="small"
@click="removePerson('designers', index)"
class="transition-all duration-300 hover:bg-red-600"
:disabled="form.designers.length <= 1"
>
<el-icon :size="16">
<Delete />
</el-icon>
</el-button>
</div>
<div v-if="form.designers.length === 0" class="text-gray-500 text-center py-4 bg-gray-100 rounded-lg border border-dashed border-gray-200">
暂无设计人员请点击"新增设计人员"添加
</div>
</div>
<!-- 校审人员 -->
<div class="border border-gray-200 rounded-lg p-5 transition-all duration-300 hover:shadow-md bg-gray-50">
<div class="flex justify-between items-center mb-5">
<h3 class="text-lg font-semibold text-gray-700 flex items-center"><i class="el-icon-check-circle mr-2 text-green-500"></i>校审人员</h3>
<el-button
type="primary"
size="small"
@click="addPerson('reviewers')"
class="transition-all duration-300 transform hover:scale-105 bg-blue-500 hover:bg-blue-600"
>
<i class="el-icon-plus mr-1"></i>新增校审人员
</el-button>
</div>
<div v-for="(reviewer, index) in form.reviewers" :key="index" class="flex items-center mb-4 animate-fadeIn">
<el-form-item
:prop="`reviewers.${index}.userId`"
:rules="{ required: true, message: '请选择校审人员', trigger: 'change' }"
class="flex-1 mr-3"
>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<el-select
v-model="reviewer.userMajor"
placeholder="请选择专业"
class="transition-all duration-300 border-gray-300"
:rules="{ required: true, message: '请选择专业', trigger: 'change' }"
>
<el-option v-for="item in des_user_major" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<el-select v-model="reviewer.userId" placeholder="请选择校审人员" class="transition-all duration-300 border-gray-300">
<el-option v-for="item in userList" :key="item.userId" :label="item.nickName" :value="item.userId" />
</el-select>
</div>
</el-form-item>
<el-button
type="danger"
size="small"
@click="removePerson('reviewers', index)"
class="transition-all duration-300 hover:bg-red-600"
:disabled="form.reviewers.length <= 1"
>
<el-icon :size="16">
<Delete />
</el-icon>
</el-button>
</div>
<div v-if="form.reviewers.length === 0" class="text-gray-500 text-center py-4 bg-gray-100 rounded-lg border border-dashed border-gray-200">
暂无校审人员请点击"新增校审人员"添加
</div>
</div>
<!-- 提交按钮区域 -->
<div class="flex justify-center space-x-6 mt-8 pt-6 border-t border-gray-100">
<el-button
type="primary"
size="large"
@click="submitForm"
class="px-8 py-2.5 transition-all duration-300 transform hover:scale-105 bg-blue-500 hover:bg-blue-600 text-white font-medium"
>
<i class="el-icon-check mr-2"></i>确认提交
</el-button>
<el-button size="large" @click="resetForm" class="px-8 py-2.5 transition-all duration-300 border-gray-300 hover:bg-gray-100 font-medium">
<i class="el-icon-refresh mr-2"></i>重置
</el-button>
</div>
</el-form>
</div>
</div>
</template>
<script setup name="PersonnelForm" lang="ts">
import { ref, reactive, computed, onMounted, toRefs } from 'vue';
import { getCurrentInstance } from 'vue';
import type { ComponentInternalInstance } from 'vue';
import { useUserStoreHook } from '@/store/modules/user';
import { listUserByDeptId } from '@/api/system/user';
import { ElMessage, ElLoading } from 'element-plus';
import { Delete } from '@element-plus/icons-vue';
import { designUserAdd, designUserList, systemUserList } from '@/api/design/appointment';
// 获取当前实例
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
// 获取用户 store
const userStore = useUserStoreHook();
// 从 store 中获取当前选中的项目
const currentProject = computed(() => userStore.selectedProject);
// 专业字典数据
const { des_user_major } = toRefs<any>(proxy?.useDict('des_user_major'));
// 表单数据
const form = reactive({
projectId: currentProject.value?.id,
designLeader: null, // 设计负责人
// 设计人员列表包含用户ID和专业
designers: [] as Array<{ userId: number | null; userMajor: string | null }>,
// 校审人员列表包含用户ID和专业
reviewers: [] as Array<{ userId: number | null; userMajor: string | null }>
});
// 表单验证规则
const rules = reactive({
designLeader: [{ required: true, message: '请选择设计负责人', trigger: 'change' }]
});
// 用户列表
const userList = ref([]);
// 表单引用
const leaveFormRef = ref();
/** 查询当前部门的所有用户 */
const getDeptAllUser = async (deptId: any) => {
try {
const res = await systemUserList({ deptId });
// 实际项目中使用接口返回的数据
userList.value = res.rows;
} catch (error) {
ElMessage.error('获取用户列表失败');
} finally {
}
};
/** 查询当前表单数据并回显 */
const designUser = async () => {
if (!currentProject.value?.id) return;
const loading = ElLoading.service({
lock: true,
text: '加载配置数据中...',
background: 'rgba(255, 255, 255, 0.7)'
});
try {
const res = await designUserList({ projectId: currentProject.value?.id });
if (res.code == 200 && res.rows) {
// 清空现有数据
form.designLeader = null;
form.designers = [];
form.reviewers = [];
// 处理返回的数据,进行回显
res.rows.forEach((item: any) => {
if (item.userType == 1) {
item.userType = 'designLeader';
} else if (item.userType == 2) {
item.userType = 'designer';
} else if (item.userType == 3) {
item.userType = 'reviewer';
}
// 根据userType区分不同类型的人员
switch (item.userType) {
case 'designLeader':
case 1:
form.designLeader = item.userId;
break;
case 'designer':
case 2:
form.designers.push({
userId: item.userId,
userMajor: item.userMajor || null
});
break;
case 'reviewer':
case 3:
form.reviewers.push({
userId: item.userId,
userMajor: item.userMajor || null
});
break;
}
});
// 如果没有设计人员或校审人员,添加一个空项
if (form.designers.length === 0) {
form.designers.push({ userId: null, userMajor: null });
}
if (form.reviewers.length === 0) {
form.reviewers.push({ userId: null, userMajor: null });
}
} else {
// 添加默认空项
form.designers.push({ userId: null, userMajor: null });
form.reviewers.push({ userId: null, userMajor: null });
}
} catch (error) {
ElMessage.error('获取配置数据失败');
// 添加默认空项
form.designers.push({ userId: null, userMajor: null });
form.reviewers.push({ userId: null, userMajor: null });
} finally {
loading.close();
}
};
/** 添加人员 */
const addPerson = (type: 'designers' | 'reviewers') => {
form[type].push({ userId: null, userMajor: null });
// 滚动到最后一个新增的元素
setTimeout(() => {
const elements = document.querySelectorAll(`[data-v-${proxy?.$options.__scopeId}] .el-select`);
if (elements.length > 0) {
elements[elements.length - 1].scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}
}, 100);
};
/** 移除人员 */
const removePerson = (type: 'designers' | 'reviewers', index: number) => {
if (form[type].length <= 1) {
ElMessage.warning('至少保留一个人员');
return;
}
form[type].splice(index, 1);
};
/** 提交表单 */
const submitForm = async () => {
if (!leaveFormRef.value) return;
try {
// 表单验证
await leaveFormRef.value.validate();
// 构建提交数据 - 所有人员信息放在一个数组中
const submitData = {
projectId: form.projectId,
personnel: [
// 设计负责人
{
userId: form.designLeader,
userType: 'designLeader', // 设计负责人类型标识
userMajor: null // 负责人不需要专业
},
// 设计人员
...form.designers.map((designer) => ({
userId: designer.userId,
userType: 'designer', // 设计人员类型标识
userMajor: designer.userMajor // 包含专业信息
})),
// 校审人员
...form.reviewers.map((reviewer) => ({
userId: reviewer.userId,
userType: 'reviewer', // 校审人员类型标识
userMajor: reviewer.userMajor // 包含专业信息
}))
]
};
// 数据处理
const arr = [];
userList.value.forEach((item) => {
submitData.personnel.forEach((item1) => {
if (item1.userId === item.userId) {
let userType = 1; // 默认为设计负责人
if (item1.userType === 'designer') {
userType = 2; // 设计人员
} else if (item1.userType === 'reviewer') {
userType = 3; // 校审人员
}
arr.push({
userName: item.nickName,
projectId: submitData.projectId,
userId: item1.userId,
userType: userType,
userMajor: item1.userMajor
});
}
});
});
// 提交到后端
const res = await designUserAdd({
list: arr,
projectId: currentProject.value?.id
});
if (res.code === 200) {
ElMessage.success('提交成功');
} else {
ElMessage.error(res.msg || '提交失败');
}
} catch (error) {
ElMessage.error('请完善表单信息后再提交');
} finally {
// 关闭加载状态
ElLoading.service().close();
}
};
/** 重置表单 */
const resetForm = () => {
if (leaveFormRef.value) {
leaveFormRef.value.resetFields();
form.designers = [{ userId: null, userMajor: null }];
form.reviewers = [{ userId: null, userMajor: null }];
ElMessage.info('表单已重置');
}
};
// 页面挂载时初始化数据
onMounted(() => {
console.log(userStore.deptId);
// 先获取用户列表,再加载表单数据
getDeptAllUser(userStore.deptId).then(() => {
designUser();
});
});
</script>
<style lang="scss">
.appWidth {
width: 50vw;
max-width: 1200px;
.el-select__wrapper {
width: 16vw !important;
}
.el-button--small {
margin-bottom: 10px;
}
.fonts {
.el-form-item--default .el-form-item__label {
font-size: 18px !important;
}
}
}
// 自定义动画
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-fadeIn {
animation: fadeIn 0.3s ease-out forwards;
}
// 表单样式优化
::v-deep .el-form {
--el-form-item-margin-bottom: 0;
}
::v-deep .el-form-item {
margin-bottom: 0;
&__label {
font-weight: 500;
color: #4e5969;
padding: 0 0 8px 0;
}
&__content {
padding: 0;
}
}
::v-deep .el-select {
width: 100%;
.el-input__inner {
border-radius: 6px;
transition: all 0.3s ease;
}
&:hover .el-input__inner {
border-color: #66b1ff;
}
&.el-select-focus .el-input__inner {
border-color: #409eff;
box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}
}
::v-deep .el-button {
border-radius: 6px;
padding: 8px 16px;
&--primary {
background-color: #409eff;
border-color: #409eff;
&:hover {
background-color: #66b1ff;
border-color: #66b1ff;
}
}
&--danger {
background-color: #f56c6c;
border-color: #f56c6c;
&:hover {
background-color: #f78989;
border-color: #f78989;
}
&:disabled {
background-color: #ffcccc;
border-color: #ffbbbb;
cursor: not-allowed;
}
}
}
// 响应式网格布局
.grid {
display: grid;
}
.grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.md\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.gap-4 {
gap: 1rem;
}
// 适配小屏幕
@media (max-width: 768px) {
.appWidth {
width: 95vw;
}
::v-deep .el-form {
padding: 4px;
}
::v-deep .el-form-item__label {
width: 100px;
}
}
</style>

View File

@ -0,0 +1,159 @@
<template>
<div>
<el-card shadow="never">
<template #header>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<div class="box_btn">
<file-upload :limit="1" :uploadUrl="uploadUrl" :params="uploadParams" :on-upload-success="uploadFile" :fileType="[]">
<el-button type="primary" style="float: left">
<el-icon size="small"><Upload /></el-icon>上传文件
</el-button>
</file-upload>
</div>
</el-col>
<right-toolbar @queryTable="getList"></right-toolbar>
</el-row>
</template>
<el-table :data="FileList" style="width: 100%" height="64vh">
<el-table-column type="index" align="center" label="序号" width="180" />
<el-table-column prop="fileName" align="center" label="文件名称" />
<el-table-column label="流程状态" align="center" prop="status">
<template #default="scope">
<dict-tag :options="wf_business_status" :value="scope.row.status" />
</template>
</el-table-column>
<el-table-column label="操作">
<template #default="scope">
<el-button type="primary" icon="Download" @click="onExport(scope.row.fileUrl)">下载</el-button>
<el-button type="success" icon="Plus" v-show="scope.row.status == 'draft' || scope.row.status == 'waiting'" @click="onUpdate(scope.row)"
>审核</el-button
>
<el-button type="warning" v-show="scope.row.status != 'draft'" icon="View" @click="onView(scope.row)">查看流程</el-button>
</template>
</el-table-column>
</el-table>
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
</el-card>
</div>
</template>
<script setup name="DataCollectionForm" lang="ts">
import { ref, reactive, computed, onMounted } from 'vue';
import { useUserStoreHook } from '@/store/modules/user';
import { collectFileList } from '@/api/design/condition';
const { proxy } = getCurrentInstance() as any;
const { wf_business_status } = toRefs<any>(proxy?.useDict('wf_business_status'));
// 获取用户 store
const userStore = useUserStoreHook();
// 从 store 中获取当前选中的项目
const currentProject = computed(() => userStore.selectedProject);
const uploadUrl = computed(() => {
return `/design/collectFile/upload`;
});
// 父组件传递的参数接受
const props = defineProps({
catalogueId: {
type: Number
}
});
const uploadParams = computed(() => {
return {
catalogueId: props.catalogueId,
projectId: currentProject.value.id
};
});
const total = ref(0);
const data = reactive({
queryParams: {
pageNum: 1,
pageSize: 10,
projectId: currentProject.value?.id,
formNo: undefined,
projectName: undefined,
submitUnit: undefined,
specialty: undefined,
submitDate: undefined,
volumeName: undefined,
volumeNo: undefined,
changeReason: undefined,
status: undefined,
params: {},
catalogueId: props.catalogueId
}
});
const { queryParams } = toRefs(data);
const FileList = ref([]);
// 查询收资清单目录列表
const getList = async () => {
let res = await collectFileList(queryParams.value);
if (res.code == 200) {
FileList.value = res.rows;
total.value = res.total;
}
};
// 上传文件
const uploadFile = (files) => {
proxy.$modal.success('上传成功');
console.log(files);
getList();
};
const onUpdate = (row) => {
// 审核
proxy.$tab.closePage(proxy.$route);
proxy.$router.push({
path: `/design-management/condition/indexEdit`,
query: {
id: row.id,
type: 'update'
}
});
};
const onView = (row) => {
// 查看流程
proxy.$tab.closePage(proxy.$route);
proxy.$router.push({
path: `/design-management/condition/indexEdit`,
query: {
id: row.id,
type: 'view'
}
});
};
const onExport = (fileUrl) => {
if (!fileUrl) {
proxy.$modal.error('文件地址不存在,无法下载');
return;
}
try {
// 创建一个隐藏的a标签
const link = document.createElement('a');
// 设置下载地址
link.href = fileUrl;
// 从URL中提取文件名作为下载文件名
const fileName = fileUrl.split('/').pop();
link.download = fileName || 'download file';
// 触发点击事件
link.click();
// 下载后移除a标签
document.body.removeChild(link);
// 显示下载成功提示
proxy.$modal.success('文件开始下载');
} catch (error) {
// proxy.$modal.error('下载失败,请稍后重试');
}
};
// 页面挂载时初始化数据
onMounted(() => {
getList();
});
</script>
<style lang="scss">
.condition {
.el-tabs__header {
height: 84vh !important;
}
}
</style>

View File

@ -0,0 +1,50 @@
<template>
<div class="p-6 bg-gray-50 condition">
<el-tabs v-model="activeName" type="border-card" :tab-position="tabPosition" class="demo-tabs" @tab-click="handleClick">
<el-tab-pane :label="item.catalogueName" :name="item.id" v-for="(item, i) of FolderList" :key="i">
<div style="height: 80vh; background: #f0f8ff9e">
<filePage :catalogueId="item.id"></filePage>
</div>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script setup name="DataCollectionForm" lang="ts">
import { ref, reactive, computed, onMounted } from 'vue';
import { useUserStoreHook } from '@/store/modules/user';
import type { TabsPaneContext, TabsInstance } from 'element-plus';
import { collectCatalogueList } from '@/api/design/condition';
import filePage from './comm/filePage.vue';
const tabPosition = ref<TabsInstance['tabPosition']>('left');
const activeName = ref('');
// 获取用户 store
const userStore = useUserStoreHook();
// 从 store 中获取当前选中的项目
const currentProject = computed(() => userStore.selectedProject);
const FolderList = ref([]);
const handleClick = (tab: TabsPaneContext, event: Event) => {
console.log(tab, event);
};
// 查询收资清单目录列表
const getList = async () => {
let res = await collectCatalogueList({ projectId: currentProject.value?.id });
if (res.code == 200) {
FolderList.value = res.rows;
activeName.value = res.rows[0].id; //默认第一个
}
};
// 页面挂载时初始化数据
onMounted(() => {
getList();
});
</script>
<style lang="scss">
.condition {
.el-tabs__header {
height: 84vh !important;
}
}
</style>

View File

@ -0,0 +1,353 @@
<template>
<div class="p-4 bg-gray-50">
<div class="max-w-4xl mx-auto">
<!-- 顶部按钮区域 -->
<el-card class="mb-4 rounded-lg shadow-sm bg-white border border-gray-100 transition-all hover:shadow-md">
<approvalButton
@submitForm="submitForm"
@approvalVerifyOpen="approvalVerifyOpen"
@handleApprovalRecord="handleApprovalRecord"
:buttonLoading="buttonLoading"
:id="form.id"
:status="form.status"
:pageType="routeParams.type"
/>
</el-card>
<!-- 表单区域 -->
<el-card class="rounded-lg shadow-sm bg-white border border-gray-100 transition-all hover:shadow-md overflow-hidden">
<div class="p-4 bg-gradient-to-r from-blue-50 to-indigo-50 border-b border-gray-100">
<h3 class="text-lg font-semibold text-gray-800">设计输入条件</h3>
</div>
<div class="p-6">
<el-form
ref="leaveFormRef"
v-loading="loading"
:disabled="routeParams.type === 'view'"
:model="form"
:rules="rules"
label-width="100px"
class="space-y-4"
>
<div class="grid grid-cols-1 gap-4">
<el-row>
<el-col :span="12">
<el-form-item label="文件名称" prop="formNo">
<el-input disabled v-model="form.fileName" placeholder="请输入文件名称" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="文件" prop="formNo">
<div style="display: flex">
<span style="color: rgb(50, 142, 248)" @click="onOpen">点击打开</span>
</div>
</el-form-item>
</el-col>
</el-row>
</div>
</el-form>
</div>
</el-card>
<!-- 提交组件 -->
<submitVerify ref="submitVerifyRef" :task-variables="taskVariables" @submit-callback="submitCallback" />
<approvalRecord ref="approvalRecordRef"></approvalRecord>
<!-- 流程选择对话框 -->
<el-dialog
draggable
v-model="dialogVisible.visible"
:title="dialogVisible.title"
:before-close="handleClose"
width="500"
class="rounded-lg shadow-lg"
>
<div class="p-4">
<p class="text-gray-600 mb-4">请选择要启动的流程</p>
<el-select v-model="flowCode" placeholder="请选择流程" style="width: 100%">
<el-option v-for="item in flowCodeOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
<template #footer>
<div class="dialog-footer p-4 border-t border-gray-100 flex justify-end space-x-3">
<el-button @click="handleClose" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-colors"
>取消</el-button
>
<el-button type="primary" @click="submitFlow()" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors"
>确认</el-button
>
</div>
</template>
</el-dialog>
</div>
</div>
</template>
<script setup name="Leave" lang="ts">
import { LeaveForm, LeaveQuery, LeaveVO } from '@/api/workflow/leave/types';
import { startWorkFlow } from '@/api/workflow/task';
import SubmitVerify from '@/components/Process/submitVerify.vue';
import ApprovalRecord from '@/components/Process/approvalRecord.vue';
import ApprovalButton from '@/components/Process/approvalButton.vue';
import { StartProcessBo } from '@/api/workflow/workflowCommon/types';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
import { useUserStoreHook } from '@/store/modules/user';
const { design_change_reason_type } = toRefs<any>(proxy?.useDict('design_change_reason_type'));
import { getKnowledgeDocument } from '@/api/design/technicalStandard';
import { getCollectFile } from '@/api/design/condition';
// 获取用户 store
const userStore = useUserStoreHook();
// 从 store 中获取项目列表和当前选中的项目
const currentProject = computed(() => userStore.selectedProject);
const buttonLoading = ref(false);
const loading = ref(true);
//路由参数
const routeParams = ref<Record<string, any>>({});
const flowCode = ref<string>('');
const status = ref<string>('');
const dialogVisible = reactive<DialogOption>({
visible: false,
title: '流程定义'
});
//提交组件
const submitVerifyRef = ref<InstanceType<typeof SubmitVerify>>();
//审批记录组件
const approvalRecordRef = ref<InstanceType<typeof ApprovalRecord>>();
//按钮组件
const flowCodeOptions = [
{
value: currentProject.value?.id + '_collectFile',
label: '设计输入文件'
}
];
const leaveFormRef = ref<ElFormInstance>();
const dialog = reactive({
visible: false,
title: '',
isEdit: false
});
const submitFormData = ref<StartProcessBo>({
businessId: '',
flowCode: '',
variables: {}
});
const taskVariables = ref<Record<string, any>>({});
const initFormData = {
id: undefined,
fileName: undefined,
fileUrl: undefined,
status: undefined,
originalName: undefined
};
const data = reactive({
form: { ...initFormData },
rules: {}
});
const onOpen = () => {
window.open(form.value.fileUrl, '_blank');
};
const handleClose = () => {
dialogVisible.visible = false;
flowCode.value = '';
buttonLoading.value = false;
};
const { form, rules } = toRefs(data);
/** 表单重置 */
const reset = () => {
form.value = { ...initFormData };
leaveFormRef.value?.resetFields();
};
/** 获取详情 */
const getInfo = () => {
loading.value = true;
buttonLoading.value = false;
nextTick(async () => {
const res = await getCollectFile(routeParams.value.id);
Object.assign(form.value, res.data);
loading.value = false;
buttonLoading.value = false;
});
};
/** 提交按钮 */
const submitForm = (status1: string) => {
status.value = status1;
submit(status.value, form.value);
};
const submitFlow = async () => {
handleStartWorkFlow(form.value);
dialogVisible.visible = false;
};
//提交申请
const handleStartWorkFlow = async (data: LeaveForm) => {
try {
submitFormData.value.flowCode = flowCode.value;
submitFormData.value.businessId = data.id;
//流程变量
taskVariables.value = {
// leave4/5 使用的流程变量
userList: ['1', '3', '4']
};
submitFormData.value.variables = taskVariables.value;
const resp = await startWorkFlow(submitFormData.value);
if (submitVerifyRef.value) {
buttonLoading.value = false;
submitVerifyRef.value.openDialog(resp.data.taskId);
}
} finally {
buttonLoading.value = false;
}
};
//审批记录
const handleApprovalRecord = () => {
approvalRecordRef.value.init(form.value.id);
};
//提交回调
const submitCallback = async () => {
await proxy.$tab.closePage(proxy.$route);
proxy.$router.go(-1);
};
//审批
const approvalVerifyOpen = async () => {
submitVerifyRef.value.openDialog(routeParams.value.taskId);
};
// 图纸上传成功之后 开始提交
const submit = async (status, data) => {
form.value = data;
if (status === 'draft') {
buttonLoading.value = false;
proxy?.$modal.msgSuccess('暂存成功');
proxy.$tab.closePage(proxy.$route);
proxy.$router.go(-1);
} else {
if ((form.value.status === 'draft' && (flowCode.value === '' || flowCode.value === null)) || routeParams.value.type === 'add') {
flowCode.value = flowCodeOptions[0].value;
dialogVisible.visible = true;
return;
}
//说明启动过先随意穿个参数
if (flowCode.value === '' || flowCode.value === null) {
flowCode.value = 'xx';
}
await handleStartWorkFlow(data);
}
};
onMounted(() => {
nextTick(async () => {
routeParams.value = proxy.$route.query;
reset();
loading.value = false;
console.log(routeParams.value.type);
if (routeParams.value.type === 'update' || routeParams.value.type === 'view' || routeParams.value.type === 'approval') {
getInfo();
}
});
});
</script>
<style scoped lang="scss">
/* 全局样式 */
:root {
--primary: #409eff;
--primary-light: #66b1ff;
--primary-dark: #3a8ee6;
--success: #67c23a;
--warning: #e6a23c;
--danger: #f56c6c;
--info: #909399;
}
/* 表单样式优化 */
.el-form-item {
.el-form-item__label {
color: #606266;
font-weight: 500;
}
.el-input__inner,
.el-select .el-input__inner {
border-radius: 4px;
transition:
border-color 0.2s,
box-shadow 0.2s;
&:focus {
border-color: var(--primary-light);
box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}
}
.el-textarea__inner {
border-radius: 4px;
transition:
border-color 0.2s,
box-shadow 0.2s;
&:focus {
border-color: var(--primary-light);
box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}
}
}
/* 按钮样式优化 */
.el-button {
border-radius: 4px;
transition: all 0.2s;
&.is-primary {
background-color: var(--primary);
border-color: var(--primary);
&:hover {
background-color: var(--primary-light);
border-color: var(--primary-light);
}
&:active {
background-color: var(--primary-dark);
border-color: var(--primary-dark);
}
}
&.is-text {
color: var(--primary);
&:hover {
color: var(--primary-light);
background-color: rgba(64, 158, 255, 0.05);
}
}
}
/* 卡片样式优化 */
.el-card {
transition: all 0.3s ease;
&:hover {
/* transform: translateY(-2px); */
}
}
/* 对话框样式优化 */
.el-dialog {
.el-dialog__header {
background-color: #f5f7fa;
border-bottom: 1px solid #ebeef5;
padding: 15px 20px;
}
.el-dialog__title {
font-size: 16px;
font-weight: 600;
color: #303133;
}
.el-dialog__footer {
padding: 15px 20px;
border-top: 1px solid #ebeef5;
}
}
</style>

View File

@ -149,7 +149,7 @@ const flowCodeOptions = [
{
value: currentProject.value?.id + '_designchanged',
label: '设计变更审批'
},
}
];
const flowCode = ref<string>('');
@ -245,7 +245,7 @@ const getInfo = () => {
/** 提交按钮 */
const submitForm = (status1: string) => {
status.value = status1;
var changeReason=''
var changeReason = '';
if (form.value.changeReason.length > 0) {
changeReason = form.value.changeReason.join(',');
}

View File

@ -32,9 +32,7 @@
<template #default="scope">
<el-row :gutter="10" class="mb8">
<el-col :span="1.5" v-if="scope.row.status === 'draft' || scope.row.status === 'cancel' || scope.row.status === 'back'">
<el-button v-hasPermi="['design:drawing:edit']" size="small" type="primary" icon="Edit" @click="handleUpdate(scope.row)"
>修改</el-button
>
<el-button v-hasPermi="['design:drawing:edit']" size="small" type="primary" icon="Edit" @click="handleUpdate(scope.row)">修改</el-button>
</el-col>
<el-col :span="1.5" v-if="scope.row.status === 'draft' || scope.row.status === 'cancel' || scope.row.status === 'back'">
<el-button v-hasPermi="['design:drawing:remove']" size="small" type="primary" icon="Delete" @click="handleDelete(scope.row)"
@ -44,9 +42,7 @@
</el-row>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" size="small" icon="View" v-if="scope.row.status != 'draft'" @click="handleViewInfo(scope.row)"
>查看</el-button
>
<el-button type="primary" size="small" icon="View" v-if="scope.row.status != 'draft'" @click="handleViewInfo(scope.row)">查看</el-button>
</el-col>
<el-col :span="1.5" v-if="scope.row.status === 'waiting'">
<el-button size="small" type="primary" icon="Notification" @click="handleCancelProcessApply(scope.row.id)">撤销</el-button>
@ -79,14 +75,7 @@
}
});
const emits = defineEmits([
'selection-change',
'view',
'update',
'delete',
'view-info',
'cancel-process-apply'
]);
const emits = defineEmits(['selection-change', 'view', 'update', 'delete', 'view-info', 'cancel-process-apply']);
const handleSelectionChange = (selection) => {
emits('selection-change', selection);

View File

@ -0,0 +1,355 @@
<template>
<div class="p-6 bg-gray-50">
<div class="appWidth mx-auto bg-white rounded-xl shadow-sm overflow-hidden transition-all duration-300 hover:shadow-md">
<!-- 表单标题区域 -->
<div class="bg-gradient-to-r from-blue-500 to-blue-600 text-white p-6">
<h2 class="text-2xl font-bold flex items-center"><i class="el-icon-user-circle mr-3"></i>收集资料清单</h2>
<p class="text-blue-100 mt-2 opacity-90">请填写相关资料信息</p>
</div>
<!-- 表单内容区域 -->
<el-form ref="mainFormRef" :model="form" :rules="mainRules" label-width="120px" class="p-6">
<!-- 基本信息区域 -->
<div class="bg-blue-50 p-4 rounded-lg mb-6">
<h3 class="text-lg font-semibold text-blue-700 mb-4">基本信息</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<el-form-item label="收资人" prop="userId" class="mb-4">
<el-select
:disabled="disabledAll"
v-model="form.userId"
placeholder="请选择收资人"
class="w-full transition-all duration-300 border-gray-300 focus:border-blue-400 focus:ring-1 focus:ring-blue-400"
>
<el-option v-for="item in userList" :key="item.userId" :label="item.nickName" :value="item.userId" />
</el-select>
</el-form-item>
<el-form-item label="专业" prop="user_major" class="mb-4">
<el-select
:disabled="disabledAll"
v-model="form.user_major"
placeholder="请选择专业"
class="transition-all duration-300 border-gray-300"
:rules="{ required: true, message: '请选择专业', trigger: 'change' }"
>
<el-option v-for="item in des_user_major" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="电话" prop="phone" class="mb-4">
<el-input :disabled="disabledAll" placeholder="请输入电话" v-model="form.phone" autocomplete="off" />
</el-form-item>
<el-form-item label="邮箱" prop="email" class="mb-4">
<el-input :disabled="disabledAll" placeholder="请输入邮箱" v-model="form.email" autocomplete="off" />
</el-form-item>
</div>
</div>
<!-- 资料文件区域 -->
<div class="mb-6">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-semibold text-blue-700">资料文件清单</h3>
<el-button type="primary" size="small" @click="addDocumentItem" v-if="!disabledAll" icon="Plus"> 添加资料 </el-button>
</div>
<el-form ref="documentsFormRef" :model="form" class="space-y-4">
<div v-for="(item, index) in form.documents" :key="item.id" class="bg-gray-50 p-4 rounded-lg transition-all duration-200 hover:shadow-sm">
<div class="flex justify-between items-start mb-2">
<span class="text-sm font-medium text-gray-600">资料 {{ index + 1 }}</span>
<el-button
type="text"
size="small"
text-color="#ff4d4f"
@click="removeDocumentItem(index)"
icon="el-icon-delete"
v-if="form.documents.length > 1 && !disabledAll"
>
删除
</el-button>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<el-form-item
label="文件目录名称"
:prop="`documents.${index}.catalogueName`"
:rules="[{ required: true, message: '请输入文件目录名称', trigger: 'blur' }]"
class="mb-4"
>
<el-input :disabled="disabledAll" placeholder="请输入文件目录名称" v-model="item.catalogueName" autocomplete="off" />
</el-form-item>
<el-form-item label="备注" :prop="`documents.${index}.remark`" class="mb-4">
<el-input :disabled="disabledAll" placeholder="请输入备注" v-model="item.remark" autocomplete="off" />
</el-form-item>
</div>
</div>
</el-form>
</div>
<!-- 操作按钮区域 -->
<div class="flex justify-center gap-4 mt-8">
<el-button type="primary" @click="submitForm" v-if="!form.id || form.status == 'draft'" size="large">确认提交</el-button>
<!-- <el-button @click="resetForm" size="large">重置</el-button> -->
<el-button type="primary" @click="update" v-show="form.id && form.status == 'draft'" size="large">审核</el-button>
<el-button type="primary" @click="update" v-show="form.status == 'back'" size="large">重新发起审核</el-button>
<el-button type="primary" @click="onView" v-show="form.id && form.status != 'draft'" size="large">查看流程</el-button>
</div>
</el-form>
</div>
</div>
</template>
<script setup name="DataCollectionForm" lang="ts">
import { ref, reactive, computed, onMounted } from 'vue';
import { useUserStoreHook } from '@/store/modules/user';
import { ElMessage, ElLoading } from 'element-plus';
import { systemUserList } from '@/api/design/appointment';
import { collectBatch, byProjectId } from '@/api/design/received';
// 获取用户 store
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const userStore = useUserStoreHook();
// 从 store 中获取当前选中的项目
const currentProject = computed(() => userStore.selectedProject);
const { des_user_major } = toRefs<any>(proxy?.useDict('des_user_major'));
// 表单引用
const mainFormRef = ref();
// 用户列表
const userList = ref([]);
const userMap = new Map();
const disabledAll = ref(false);
// 表单数据
const form = reactive({
projectId: currentProject.value?.id,
userId: '', // 收资人
user_major: '', // 专业
phone: '', // 电话
email: '', // 邮箱
id: '',
status: '',
documents: [
{
id: Date.now(),
catalogueName: '', // 文件目录名称
remark: '' // 备注
}
] as Array<{
id: number;
catalogueName: string;
remark: string;
}>
});
// 主表单验证规则
const mainRules = reactive({
userId: [{ required: true, message: '请输入收资人', trigger: 'blur' }],
user_major: [{ required: true, message: '请选择专业', trigger: 'change' }],
phone: [
{ required: true, message: '请输入电话', trigger: 'blur' },
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
],
email: [
{ required: true, message: '请输入邮箱', trigger: 'blur' },
{ type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
]
});
// 添加资料项
const addDocumentItem = () => {
form.documents.push({
id: Date.now(),
catalogueName: '',
remark: ''
});
};
// 删除资料项
const removeDocumentItem = (index: number) => {
form.documents.splice(index, 1);
};
// 查询数据 再次回显
const byProjectIdAll = async () => {
// 调用接口获取数据
const res = await byProjectId(currentProject.value?.id);
if (res.code === 200 && res.data) {
const data = res.data;
// 回显基本信息
form.userId = data.userId || '';
form.user_major = data.userMajor || '';
form.phone = data.phone || '';
form.email = data.email || '';
form.id = data.id || '';
form.status = data.status || '';
if (form.status == 'finish') {
// 表单全部禁用
disabledAll.value = true;
}
// 回显资料文件列表
if (data.catalogueList && data.catalogueList.length > 0) {
// 清空现有列表
form.documents = [];
// 填充新数据
data.catalogueList.forEach((item: any, index: number) => {
form.documents.push({
id: item.id || Date.now() + index, // 确保id唯一
catalogueName: item.catalogueName || '',
remark: item.remark || ''
});
});
} else {
// 如果没有资料,保持一个空项
form.documents = [
{
id: Date.now(),
catalogueName: '',
remark: ''
}
];
}
}
};
// 提交表单
const submitForm = async () => {
if (!mainFormRef.value) return;
try {
const valid = await mainFormRef.value.validate();
if (valid) {
// 这里可以添加提交逻辑
form.documents.map((item, i) => {
item.num = i + 1;
});
let body = {
desCollectBo: {
projectId: currentProject.value?.id,
userId: form.userId, // 收资人
userMajor: form.user_major, // 专业
id: form.id,
phone: form.phone, // 电话
email: form.email, // 邮箱
userName: userMap.get(form.userId)
},
catalogueList: form.documents
};
let res = await collectBatch(body);
if (res.code == 200) {
byProjectIdAll();
ElMessage.success('表单提交成功');
} else {
ElMessage.success(res.msg);
}
}
} catch (error) {
ElMessage.error('请完善表单信息后再提交');
}
};
// 重置表单
const resetForm = () => {
if (mainFormRef.value) {
mainFormRef.value.resetFields();
}
// 重置资料列表,保留一个空项
form.documents = [
{
id: Date.now(),
catalogueName: '',
remark: ''
}
];
};
/** 查询当前部门的所有用户 */
const getDeptAllUser = async (deptId: any) => {
try {
const res = await systemUserList({ deptId });
// 实际项目中使用接口返回的数据
userList.value = res.rows;
userList.value.forEach((user) => {
userMap.set(user.userId, user.nickName);
});
} catch (error) {
ElMessage.error('获取用户列表失败');
}
};
const update = () => {
proxy.$tab.closePage(proxy.$route);
proxy.$router.push({
path: `/design-management/received/indexEdit`,
query: {
id: form.id,
type: 'update'
}
});
};
const onView = () => {
proxy.$tab.closePage(proxy.$route);
proxy.$router.push({
path: `/design-management/received/indexEdit`,
query: {
id: form.id,
type: 'view'
}
});
};
// 页面挂载时初始化数据
onMounted(() => {
// 可以在这里添加初始化逻辑
getDeptAllUser(userStore.deptId).then(() => {
byProjectIdAll();
});
});
//监听项目id刷新数据
const listeningProject = watch(
() => currentProject.value.id,
(nid, oid) => {
getDeptAllUser(userStore.deptId).then(() => {
byProjectIdAll();
});
}
);
onUnmounted(() => {
listeningProject();
});
</script>
<style lang="scss">
.appWidth {
width: 90%;
max-width: 1000px;
}
// 全局样式调整,使界面更柔和
::v-deep .el-input__inner,
::v-deep .el-select__input {
border-radius: 6px;
border-color: #dcdfe6;
transition: all 0.2s ease;
}
::v-deep .el-input__inner:focus,
::v-deep .el-select__input:focus {
border-color: #409eff;
box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}
::v-deep .el-button {
border-radius: 6px;
transition: all 0.2s ease;
}
::v-deep .el-form-item__label {
font-weight: 500;
color: #606266;
}
// 响应式调整
@media (max-width: 768px) {
.appWidth {
width: 95%;
}
::v-deep .el-form-item {
margin-bottom: 16px;
}
::v-deep .el-form-item__label {
width: 100px;
}
}
</style>

View File

@ -0,0 +1,454 @@
<template>
<div class="p-4 bg-gray-50">
<div class="max-w-4xl mx-auto">
<!-- 顶部按钮区域 -->
<el-card class="mb-4 rounded-lg shadow-sm bg-white border border-gray-100 transition-all hover:shadow-md">
<approvalButton
@submitForm="submitForm"
@approvalVerifyOpen="approvalVerifyOpen"
@handleApprovalRecord="handleApprovalRecord"
:buttonLoading="buttonLoading"
:id="form.id"
:status="form.status"
:pageType="routeParams.type"
/>
</el-card>
<!-- 表单区域 -->
<el-card class="rounded-lg shadow-sm bg-white border border-gray-100 transition-all hover:shadow-md overflow-hidden">
<div class="p-4 bg-gradient-to-r from-blue-50 to-indigo-50 border-b border-gray-100">
<h3 class="text-lg font-semibold text-gray-800">收集资料清单</h3>
</div>
<div class="p-6">
<div class="appWidth mx-auto bg-white rounded-xl shadow-sm overflow-hidden transition-all duration-300 hover:shadow-md">
<!-- 表单内容区域 -->
<el-form ref="mainFormRef" :model="form" label-width="120px" class="p-6">
<!-- 基本信息区域 -->
<div class="bg-blue-50 p-4 rounded-lg mb-6">
<h3 class="text-lg font-semibold text-blue-700 mb-4">基本信息</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<el-form-item label="收资人" prop="userId" class="mb-4">
<el-select
disabled
v-model="form.userId"
placeholder="请选择收资人"
class="w-full transition-all duration-300 border-gray-300 focus:border-blue-400 focus:ring-1 focus:ring-blue-400"
>
<el-option v-for="item in userList" :key="item.userId" :label="item.nickName" :value="item.userId" />
</el-select>
</el-form-item>
<el-form-item label="专业" prop="user_major" class="mb-4">
<el-select
disabled
v-model="form.user_major"
placeholder="请选择专业"
class="transition-all duration-300 border-gray-300"
:rules="{ required: true, message: '请选择专业', trigger: 'change' }"
>
<el-option v-for="item in des_user_major" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="电话" prop="phone" class="mb-4">
<el-input disabled placeholder="请输入电话" v-model="form.phone" autocomplete="off" />
</el-form-item>
<el-form-item label="邮箱" prop="email" class="mb-4">
<el-input disabled placeholder="请输入邮箱" v-model="form.email" autocomplete="off" />
</el-form-item>
</div>
</div>
<!-- 资料文件区域 -->
<div class="mb-6">
<el-form ref="documentsFormRef" :model="form" class="space-y-4">
<div
v-for="(item, index) in form.documents"
:key="item.id"
class="bg-gray-50 p-4 rounded-lg transition-all duration-200 hover:shadow-sm"
>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<el-form-item
label="文件目录名称"
:prop="`documents.${index}.catalogueName`"
:rules="[{ required: true, message: '请输入文件目录名称', trigger: 'blur' }]"
class="mb-4"
>
<el-input disabled placeholder="请输入文件目录名称" v-model="item.catalogueName" autocomplete="off" />
</el-form-item>
<el-form-item label="备注" :prop="`documents.${index}.remark`" class="mb-4">
<el-input disabled placeholder="请输入备注" v-model="item.remark" autocomplete="off" />
</el-form-item>
</div>
</div>
</el-form>
</div>
</el-form>
</div>
</div>
</el-card>
<!-- 提交组件 -->
<submitVerify ref="submitVerifyRef" :task-variables="taskVariables" @submit-callback="submitCallback" />
<approvalRecord ref="approvalRecordRef"></approvalRecord>
<!-- 流程选择对话框 -->
<el-dialog
draggable
v-model="dialogVisible.visible"
:title="dialogVisible.title"
:before-close="handleClose"
width="500"
class="rounded-lg shadow-lg"
>
<div class="p-4">
<p class="text-gray-600 mb-4">请选择要启动的流程</p>
<el-select v-model="flowCode" placeholder="请选择流程" style="width: 100%">
<el-option v-for="item in flowCodeOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
<template #footer>
<div class="dialog-footer p-4 border-t border-gray-100 flex justify-end space-x-3">
<el-button @click="handleClose" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-colors"
>取消</el-button
>
<el-button type="primary" @click="submitFlow()" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors"
>确认</el-button
>
</div>
</template>
</el-dialog>
</div>
</div>
</template>
<script setup name="Leave" lang="ts">
import { LeaveForm } from '@/api/workflow/leave/types';
import { startWorkFlow } from '@/api/workflow/task';
import SubmitVerify from '@/components/Process/submitVerify.vue';
import ApprovalRecord from '@/components/Process/approvalRecord.vue';
import ApprovalButton from '@/components/Process/approvalButton.vue';
import { StartProcessBo } from '@/api/workflow/workflowCommon/types';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
import { useUserStoreHook } from '@/store/modules/user';
import { systemUserList } from '@/api/design/appointment';
import { collectBatch, byProjectId } from '@/api/design/received';
// 获取用户 store
const userStore = useUserStoreHook();
// 从 store 中获取项目列表和当前选中的项目
const currentProject = computed(() => userStore.selectedProject);
const { des_user_major } = toRefs<any>(proxy?.useDict('des_user_major'));
const buttonLoading = ref(false);
const loading = ref(true);
//路由参数
const routeParams = ref<Record<string, any>>({});
const flowCodeOptions = [
{
value: currentProject.value?.id + '_collect',
label: '收资清单'
}
];
const flowCode = ref<string>('');
const status = ref<string>('');
const dialogVisible = reactive<DialogOption>({
visible: false,
title: '流程定义'
});
//提交组件
const submitVerifyRef = ref<InstanceType<typeof SubmitVerify>>();
//审批记录组件
const approvalRecordRef = ref<InstanceType<typeof ApprovalRecord>>();
//按钮组件
const approvalButtonRef = ref<InstanceType<typeof ApprovalButton>>();
const leaveFormRef = ref<ElFormInstance>();
const dialog = reactive({
visible: false,
title: '',
isEdit: false
});
const submitFormData = ref<StartProcessBo>({
businessId: '',
flowCode: '',
variables: {}
});
const taskVariables = ref<Record<string, any>>({});
// 用户列表
const userList = ref([]);
const userMap = new Map();
// 表单引用
const mainFormRef = ref();
const handleClose = () => {
dialogVisible.visible = false;
flowCode.value = '';
buttonLoading.value = false;
};
// 表单数据
const form = reactive({
projectId: currentProject.value?.id,
userId: '', // 收资人
user_major: '', // 专业
phone: '', // 电话
email: '', // 邮箱
id: '',
status: '',
documents: [
{
id: Date.now(),
catalogueName: '', // 文件目录名称
remark: '' // 备注
}
] as Array<{
id: number;
catalogueName: string;
remark: string;
}>
});
/** 表单重置 */
const reset = () => {
if (mainFormRef.value) {
mainFormRef.value.resetFields();
}
// 重置资料列表,保留一个空项
form.documents = [
{
id: Date.now(),
catalogueName: '',
remark: ''
}
];
leaveFormRef.value?.resetFields();
};
/** 提交按钮 */
const submitForm = (status1: string) => {
status.value = status1;
buttonLoading.value = true;
dialog.visible = false;
submit(status.value, form);
};
const submitFlow = async () => {
handleStartWorkFlow(form);
dialogVisible.visible = false;
};
//提交申请
const handleStartWorkFlow = async (data: LeaveForm) => {
try {
submitFormData.value.flowCode = flowCode.value;
submitFormData.value.businessId = data.id;
//流程变量
taskVariables.value = {
// leave4/5 使用的流程变量
userList: ['1', '3', '4']
};
submitFormData.value.variables = taskVariables.value;
const resp = await startWorkFlow(submitFormData.value);
if (submitVerifyRef.value) {
buttonLoading.value = false;
submitVerifyRef.value.openDialog(resp.data.taskId);
}
} finally {
buttonLoading.value = false;
}
};
//审批记录
const handleApprovalRecord = () => {
approvalRecordRef.value.init(form.id);
};
//提交回调
const submitCallback = async () => {
await proxy.$tab.closePage(proxy.$route);
proxy.$router.go(-1);
};
//审批
const approvalVerifyOpen = async () => {
submitVerifyRef.value.openDialog(routeParams.value.taskId);
};
const submit = async (status, data) => {
if (status === 'draft') {
buttonLoading.value = false;
proxy?.$modal.msgSuccess('暂存成功');
proxy.$tab.closePage(proxy.$route);
proxy.$router.go(-1);
} else {
if ((form.status === 'draft' && (flowCode.value === '' || flowCode.value === null)) || routeParams.value.type === 'add') {
flowCode.value = flowCodeOptions[0].value;
dialogVisible.visible = true;
return;
}
//说明启动过先随意穿个参数
if (flowCode.value === '' || flowCode.value === null) {
flowCode.value = 'xx';
}
await handleStartWorkFlow(data);
}
};
/** 查询当前部门的所有用户 */
const getDeptAllUser = async (deptId: any) => {
try {
const res = await systemUserList({ deptId });
// 实际项目中使用接口返回的数据
userList.value = res.rows;
userList.value.forEach((user) => {
userMap.set(user.userId, user.nickName);
});
} catch (error) {
ElMessage.error('获取用户列表失败');
}
};
// 查询数据 再次回显
const byProjectIdAll = async () => {
loading.value = true;
buttonLoading.value = false;
// 调用接口获取数据
const res = await byProjectId(currentProject.value?.id);
if (res.code === 200 && res.data) {
const data = res.data;
// 回显基本信息
form.userId = data.userId || '';
form.user_major = data.userMajor || '';
form.phone = data.phone || '';
form.email = data.email || '';
form.id = data.id || '';
form.status = data.status || '';
// 回显资料文件列表
if (data.catalogueList && data.catalogueList.length > 0) {
// 清空现有列表
form.documents = [];
// 填充新数据
data.catalogueList.forEach((item: any, index: number) => {
form.documents.push({
id: item.id || Date.now() + index, // 确保id唯一
catalogueName: item.catalogueName || '',
remark: item.remark || ''
});
});
} else {
// 如果没有资料,保持一个空项
form.documents = [
{
id: Date.now(),
catalogueName: '',
remark: ''
}
];
}
}
loading.value = false;
buttonLoading.value = false;
};
onMounted(() => {
nextTick(async () => {
routeParams.value = proxy.$route.query;
reset();
loading.value = false;
if (routeParams.value.type === 'update' || routeParams.value.type === 'view' || routeParams.value.type === 'approval') {
getDeptAllUser(userStore.deptId).then(() => {
byProjectIdAll();
});
}
});
});
</script>
<style scoped lang="scss">
/* 全局样式 */
:root {
--primary: #409eff;
--primary-light: #66b1ff;
--primary-dark: #3a8ee6;
--success: #67c23a;
--warning: #e6a23c;
--danger: #f56c6c;
--info: #909399;
}
/* 表单样式优化 */
.el-form-item {
.el-form-item__label {
color: #606266;
font-weight: 500;
}
.el-input__inner,
.el-select .el-input__inner {
border-radius: 4px;
transition:
border-color 0.2s,
box-shadow 0.2s;
&:focus {
border-color: var(--primary-light);
box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}
}
.el-textarea__inner {
border-radius: 4px;
transition:
border-color 0.2s,
box-shadow 0.2s;
&:focus {
border-color: var(--primary-light);
box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}
}
}
/* 按钮样式优化 */
.el-button {
border-radius: 4px;
transition: all 0.2s;
&.is-primary {
background-color: var(--primary);
border-color: var(--primary);
&:hover {
background-color: var(--primary-light);
border-color: var(--primary-light);
}
&:active {
background-color: var(--primary-dark);
border-color: var(--primary-dark);
}
}
&.is-text {
color: var(--primary);
&:hover {
color: var(--primary-light);
background-color: rgba(64, 158, 255, 0.05);
}
}
}
/* 卡片样式优化 */
.el-card {
transition: all 0.3s ease;
&:hover {
/* transform: translateY(-2px); */
}
}
/* 对话框样式优化 */
.el-dialog {
.el-dialog__header {
background-color: #f5f7fa;
border-bottom: 1px solid #ebeef5;
padding: 15px 20px;
}
.el-dialog__title {
font-size: 16px;
font-weight: 600;
color: #303133;
}
.el-dialog__footer {
padding: 15px 20px;
border-top: 1px solid #ebeef5;
}
}
</style>

View File

@ -37,8 +37,8 @@
</el-col>
<el-col :span="24">
<el-form-item label="文件" prop="formNo">
<div style="display: flex;">
<span style="color: rgb(50, 142, 248);" >{{ form.originalName }}</span>
<div style="display: flex">
<span style="color: rgb(50, 142, 248)">{{ form.originalName }}</span>
<!-- <el-button type="primary" link @click="handleView(scope.row)"
><el-icon><View /></el-icon>查看</el-button
> -->

View File

@ -77,56 +77,79 @@
</el-card>
</el-col>
</el-row>
<!-- 添加或修改物资-材料设备对话框 -->
<el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
<el-dialog draggable :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
<el-form ref="cailiaoshebeiFormRef" :model="form" :rules="rules" label-width="130px">
<el-form-item label="物资执行状态" prop="materialStatus">
<el-form-item label="物资执行状态" prop="bo.materialStatus">
<el-select v-model="form.bo.materialStatus" placeholder="请选择物资执行状态" clearable filterable @change="handleChange">
<el-option v-for="item in material_status" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="物资逾期类型" prop="overdueType" v-if="form.bo.materialStatus == 3">
<el-form-item label="物资逾期类型" prop="bo.overdueType" v-if="form.bo.materialStatus == 3">
<el-select v-model="form.bo.overdueType" placeholder="请选择物资逾期类型" clearable filterable>
<el-option v-for="item in overdue_type" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="逾期原因" prop="cause" v-if="form.bo.materialStatus == 3">
<el-input v-model="form.bo.cause" placeholder="请输入逾期原因" />
<el-form-item label="逾期原因" prop="bo.cause" v-if="form.bo.materialStatus == 3">
<el-input v-model="form.bo.cause" type="textarea" placeholder="请输入逾期原因" />
</el-form-item>
<el-form-item label="实际到货时间" prop="actualArrival" v-if="form.bo.materialStatus < 4">
<el-form-item label="实际到货时间" prop="bo.actualArrival" v-if="form.bo.materialStatus < 4">
<el-date-picker clearable v-model="form.bo.actualArrival" type="date" value-format="YYYY-MM-DD" placeholder="请选择实际到货时间" />
</el-form-item>
<el-form-item label="验收时间" prop="receptionTime" v-if="form.bo.materialStatus < 4">
<el-form-item label="验收时间" prop="bo.receptionTime" v-if="form.bo.materialStatus < 4">
<el-date-picker clearable v-model="form.bo.receptionTime" type="date" value-format="YYYY-MM-DD" placeholder="请选择验收时间" />
</el-form-item>
<el-form-item label="验收数量" prop="acceptanceQuantity" v-if="form.bo.materialStatus < 4">
<el-form-item label="验收数量" prop="bo.acceptanceQuantity" v-if="form.bo.materialStatus < 4">
<el-input v-model="form.bo.acceptanceQuantity" type="number" placeholder="请输入验收数量" />
</el-form-item>
<el-form-item label="需求提交时间" prop="requiredTime">
<el-date-picker clearable v-model="form.bo.requiredTime" type="date" value-format="YYYY-MM-DD" placeholder="请选择需求提交时间" />
<el-form-item label="需求提交时间" prop="bo.requiredTime">
<el-date-picker
clearable
v-model="form.bo.requiredTime"
:disabled="form.bo.requiredTime != null && form.bo.requiredTime != ''"
type="date"
value-format="YYYY-MM-DD"
placeholder="请选择需求提交时间"
/>
</el-form-item>
<el-form-item label="订货时间" prop="orderTime">
<el-date-picker clearable v-model="form.bo.orderTime" type="date" value-format="YYYY-MM-DD" placeholder="请选择订货时间" />
<el-form-item label="订货时间" prop="bo.orderTime">
<el-date-picker
clearable
:disabled="form.bo.orderTime != null && form.bo.orderTime != ''"
v-model="form.bo.orderTime"
type="date"
value-format="YYYY-MM-DD"
placeholder="请选择订货时间"
/>
</el-form-item>
<el-form-item label="操作状态" prop="operationStatus" v-if="form.bo.materialStatus <= 4 || form.bo.materialStatus == 10">
<el-select v-model="form.bo.operationStatus" placeholder="请选择物资执行状态" clearable filterable @change="handleChange">
<el-form-item label="操作状态" prop="bo.operationStatus" v-if="form.bo.materialStatus <= 4 || form.bo.materialStatus == 10">
<el-select disabled v-model="form.bo.operationStatus" placeholder="请选择物资执行状态" clearable filterable>
<el-option v-for="item in operation_s" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="单据类型" prop="billType" v-if="form.bo.materialStatus < 4 || form.bo.materialStatus == 10">
<el-select v-model="form.bo.billType" placeholder="请选择单据类型" clearable filterable>
<el-form-item label="单据类型" prop="bo.billType" v-if="form.bo.materialStatus < 4 || form.bo.materialStatus == 10">
<el-select disabled v-model="form.bo.billType" placeholder="请选择单据类型" clearable filterable>
<el-option label="签收单" value="1" />
<el-option label="退货单" value="2" />
</el-select>
</el-form-item>
<el-form-item label="上传文件" prop="file" v-if="form.bo.materialStatus < 4 || form.bo.materialStatus == 10">
<el-form-item
label="上传单据"
prop="file"
v-if="form.bo.materialStatus < 4 || form.bo.materialStatus == 10"
:rules="[
{
required: isFileRequired,
message: '请上传单据',
trigger: 'blur'
}
]"
>
<file-upload
v-model="form.file"
:fileType="['doc', 'docx']"
:fileType="['pdf', 'png', 'jpg', 'jpeg']"
:autoUpload="false"
ref="fileUploadRef"
:data="form.bo"
@ -157,22 +180,13 @@
</template>
<script setup name="Cailiaoshebei" lang="ts">
import {
listCailiaoshebei,
getCailiaoshebei,
delCailiaoshebei,
addCailiaoshebei,
updateCailiaoshebei,
listBatch,
getBatch,
delBatch
} from '@/api/materials/orderMaterials';
import { listCailiaoshebei, delCailiaoshebei, addCailiaoshebei, listBatch, getBatch, delBatch } from '@/api/materials/orderMaterials';
import { CailiaoshebeiVO, CailiaoshebeiQuery, CailiaoshebeiForm } from '@/api/materials/cailiaoshebei/types';
import { listContractor } from '@/api/project/contractor';
import { useUserStoreHook } from '@/store/modules/user';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { supply, overdue_type, material_status, operation_status } = toRefs<any>(
const { overdue_type, material_status, operation_status } = toRefs<any>(
proxy?.useDict('supply', 'material_status', 'overdue_type', 'operation_status')
);
// 获取用户 store
@ -190,6 +204,7 @@ const multiple = ref(true);
const total = ref(0);
const batchOptions = ref<any[]>([]);
const fileUploadRef = ref();
const operation_s = ref([]); // 移出函数,避免重复定义
const queryFormRef = ref<ElFormInstance>();
const cailiaoshebeiFormRef = ref<ElFormInstance>();
@ -213,7 +228,7 @@ const initFormData: CailiaoshebeiForm = {
finishTime: undefined,
unit: undefined,
plan: undefined,
file: '',
file: null, // 确保初始化为null
realQuantity: undefined,
projectId: currentProject.value.id,
bo: {
@ -250,13 +265,25 @@ const data = reactive<PageData<CailiaoshebeiForm, CailiaoshebeiQuery>>({
params: {}
},
rules: {
id: [{ required: true, message: '主键ID不能为空', trigger: 'blur' }]
'bo.materialStatus': [{ required: true, message: '请选择物资执行状态', trigger: 'change' }],
'bo.overdueType': [{ required: true, message: '请选择物资逾期类型', trigger: 'change' }],
'bo.cause': [{ required: true, message: '请输入逾期原因', trigger: 'blur' }],
'bo.actualArrival': [{ required: true, message: '请选择实际到货时间', trigger: 'change' }],
'bo.receptionTime': [{ required: true, message: '请选择验收时间', trigger: 'change' }],
'bo.acceptanceQuantity': [{ required: true, message: '请输入验收数量', trigger: 'blur' }],
'bo.requiredTime': [{ required: true, message: '请选择需求提交时间', trigger: 'change' }],
'bo.orderTime': [{ required: true, message: '请选择订货时间', trigger: 'change' }]
}
});
const { queryParams, form, rules } = toRefs(data);
const batchNumber = ref('');
// 计算属性:判断文件是否必填
const isFileRequired = computed(() => {
return form.value.bo.materialStatus < 4 || form.value.bo.materialStatus == 10;
});
/** 查询物资-材料设备列表 */
const getList = async () => {
if (!queryParams.value.batchNumber) return;
@ -264,20 +291,21 @@ const getList = async () => {
loading.value = true;
const res = await listCailiaoshebei(queryParams.value);
cailiaoshebeiList.value = res.rows;
loading.value = false;
};
// 查询批次列表
const getBatchList = async () => {
const res = await listBatch(queryParams.value);
console.log('🚀 ~ getBatchList ~ res:', res);
batchOptions.value = res.rows;
total.value = res.total;
try {
if (res.rows.length > 0) {
batchTreeRef.value.setCurrentKey(res.rows[0].batchNumber);
form.value.batchNumber = res.rows[0].batchNumber;
queryParams.value.batchNumber = res.rows[0].batchNumber;
}
} catch (error) {
form.value.batchNumber = '';
}
@ -289,10 +317,6 @@ const getBatchList = async () => {
const handleNodeClick = (data: any) => {
queryParams.value.batchNumber = data.batchNumber;
form.value.batchNumber = data.batchNumber;
console.log('🚀 ~ handleNodeClick ~ form.value:', form.value);
if (data.batchNumber === '0') {
queryParams.value.batchNumber = '';
}
getList();
};
@ -310,13 +334,11 @@ const cancel = () => {
/** 表单重置 */
const reset = () => {
const preservedBatchId = form.value.batchNumber;
form.value = {
...initFormData,
bo: { ...initFormData.bo }, // 新建一个 bo 对象
bo: { ...initFormData.bo },
batchNumber: preservedBatchId
};
cailiaoshebeiFormRef.value?.resetFields();
};
@ -335,44 +357,36 @@ const resetQuery = () => {
/** 多选框选中数据 */
const handleSelectionChange = (selection: CailiaoshebeiVO[]) => {
ids.value = selection.map((item) => item.id);
single.value = selection.length != 1;
single.value = selection.length !== 1;
multiple.value = !selection.length;
};
/** 新增按钮操作 */
const handleAdd = () => {
reset();
dialog.visible = true;
dialog.title = '添加物资-材料设备';
};
/** 修改按钮操作 */
const operation_s = ref([]);
const handleUpdate = async (row?: CailiaoshebeiVO) => {
reset();
operation_s.value = operation_status.value.slice(0, 2);
Object.assign(form.value.bo, row);
console.log('🚀 ~ handleUpdate ~ form.value:', form.value);
handleChange(form.value.bo.materialStatus);
dialog.visible = true;
dialog.title = '修改物资-材料设备';
};
/** 提交按钮 */
const submitForm = () => {
cailiaoshebeiFormRef.value?.validate(async (valid: boolean) => {
if (valid) {
buttonLoading.value = true;
// 清理空值
Object.keys(form.value.bo).forEach((key) => {
if (form.value.bo[key] == 'null' || form.value.bo[key] == null) {
delete form.value.bo[key];
}
});
console.log('🚀 ~ submitForm ~ form.value:', form.value.bo);
cailiaoshebeiFormRef.value?.validate(async (valid: boolean) => {
if (valid) {
buttonLoading.value = true;
if (fileUploadRef.value) {
fileUploadRef.value!.submitUpload();
} else {
form.value.bo.file = null;
await addCailiaoshebei(form.value.bo).finally(() => (buttonLoading.value = false));
dialog.visible = false;
getList();
@ -381,26 +395,6 @@ const submitForm = () => {
});
};
/** 新增批次 */
const addBatch = async () => {
await proxy?.$modal.confirm('是否确认新增批次?').finally(() => (loading.value = false));
const res = await getBatch({ projectId: currentProject.value.id });
console.log('🚀 ~ addBatch ~ res:', res);
await getBatchList();
proxy?.$modal.msgSuccess('新增成功');
};
/** 删除批次 */
const handleDeleteBatch = async () => {
const _ids = batchTreeRef.value.getCurrentNode()?.id;
await proxy?.$modal.confirm('是否确认删除批次编号为"' + _ids + '"的数据项?').finally(() => (loading.value = false));
await delBatch(_ids);
proxy?.$modal.msgSuccess('删除成功');
queryParams.value.batchNumber = '';
await getBatchList();
};
/** 删除按钮操作 */
const handleDelete = async (row?: CailiaoshebeiVO) => {
const _ids = row?.id || ids.value;
@ -418,13 +412,24 @@ const handleUploadSuccess = () => {
};
const handleChange = (value: number) => {
// 清空文件字段当状态改变时
form.value.file = null;
if (value == 1 || value == 2 || value == 3) {
form.value.bo.operationStatus = '1';
form.value.bo.billType = '1';
}
if (value == 10) {
form.value.bo.operationStatus = '2';
form.value.bo.billType = '2';
}
if (!(value < 4 || value == 10)) {
form.value.bo.billType = '';
form.value.file = '';
} else if (value == 3) {
form.value.bo.overdueType = '';
form.value.bo.cause = '';
}
// 触发文件字段验证更新
cailiaoshebeiFormRef.value?.validateField('file');
};
/** 查询供货商列表 */
@ -446,7 +451,7 @@ onMounted(() => {
// 监听项目id刷新数据
const listeningProject = watch(
() => currentProject.value.id,
(nid, oid) => {
(nid) => {
queryParams.value.projectId = nid;
form.value.projectId = nid;
getBatchList();