This commit is contained in:
2025-07-10 15:16:44 +08:00
parent 39e239a886
commit b331d17032
11 changed files with 1577 additions and 684 deletions

View File

@ -1,143 +1,155 @@
<template>
<el-tabs v-model="activeName" class="demo-tabs p5" @tab-click="handleCheckMian">
<el-tab-pane label="资料" name="first">
<div class="profile_engin">
<div class="box_info">
<div class="tree_left1" id="tree_left1">
<div class="file_upload check_select">
<div class="box_btn">
<file-upload
v-model="state.paramsQuery.file"
:limit="100"
:uploadUrl="uploadUrl"
:params="uploadParams"
:on-upload-success="uploadFile"
:fileType="[]"
<div>
<el-tabs v-model="activeName" class="demo-tabs p5" @tab-click="handleCheckMian">
<el-tab-pane label="资料" name="first">
<div class="profile_engin">
<div class="box_info">
<div class="tree_left1" id="tree_left1">
<div class="file_upload check_select">
<div class="box_btn">
<file-upload
v-model="state.paramsQuery.file"
:limit="100"
:uploadUrl="uploadUrl"
:params="uploadParams"
:on-upload-success="uploadFile"
:fileType="[]"
>
<el-button type="primary" style="float: left" :disabled="!state.parentPid">
<el-icon size="small"><Plus /></el-icon>上传文件
</el-button>
</file-upload>
</div>
<el-button type="primary" :disabled="!state.parentPid" @click="onExport"
><el-icon><Download /></el-icon>下载</el-button
>
<el-button type="primary" @click="onBook"
><el-icon><View /></el-icon>查看全项目文件</el-button
>
<el-button type="primary" style="float: left" :disabled="!state.parentPid">
<el-icon size="small"><Plus /></el-icon>上传文件
</el-button>
</file-upload>
</div>
<el-button type="primary" :disabled="!state.parentPid" @click="onExport"
><el-icon><Download /></el-icon>下载</el-button
<div class="file_upload check_select">
<el-input class="input_left" v-model="filterText" size="small" placeholder="请输入文件名称" />
</div>
<el-tree
ref="treeRef"
highlight-current
:default-expand-all="state.checked"
:filter-node-method="filterFolder"
:data="state.treeList"
node-key="id"
accordion
:expand-on-click-node="false"
@node-click="handleNodeClick"
:current-node-key="state.selectedNodeId"
>
<el-button type="primary" @click="onBook"
><el-icon><View /></el-icon>查看全项目文件</el-button
>
</div>
<div class="file_upload check_select">
<el-input class="input_left" v-model="filterText" size="small" placeholder="请输入文件名称" />
</div>
<el-tree
ref="treeRef"
highlight-current
:default-expand-all="state.checked"
:filter-node-method="filterFolder"
:data="state.treeList"
node-key="id"
accordion
:expand-on-click-node="false"
@node-click="handleNodeClick"
:current-node-key="state.selectedNodeId"
>
<template #default="{ node, data }">
<span class="custom-tree-node">
<el-icon color="#f1a81a"><FolderOpened /></el-icon>
<span>{{ node.label }}</span>
</span>
</template>
</el-tree>
<div class="resize-handle resize-handle-right right"></div>
</div>
<div class="list_right" id="list_right1">
<div>
<el-form :model="state.paramsQuery" ref="queryRef" :inline="true" label-width="100px">
<el-row>
<el-col :span="7" class="colBlock">
<el-form-item label="文件名称" prop="fileName">
<el-input
v-model="state.paramsQuery.fileName"
placeholder="请输入文件名称"
clearable
@keyup.enter.native="getdocumentDataList"
/>
</el-form-item>
</el-col>
<el-col :span="6" class="m-l10">
<el-form-item>
<el-button type="primary" @click="searchInfo"
><el-icon><Search /></el-icon>搜索</el-button
>
<el-button @click="resetQuery"
><el-icon><Refresh /></el-icon>重置</el-button
>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<el-table v-loading="state.loading" :data="state.infoList" height="67vh" border>
<el-table-column label="序号" align="center" type="index" min-width="50px" />
<el-table-column label="文件名称" align="center" prop="fileName"></el-table-column>
<el-table-column label="文件类型" align="center" prop="fileSuffix" width="100px" />
<el-table-column label="上传时间" align="center" prop="createTime"> </el-table-column>
<el-table-column label="操作" align="center" width="300">
<template #default="scope">
<el-button type="primary" link @click="handleView(scope.row)" v-if="acceptType.includes(scope.row.fileSuffix)"
><el-icon><View /></el-icon>查看</el-button
>
<el-button type="primary" v-if="state.wordType.includes(scope.row.fileSuffix)" link @click="updataView(scope.row)"
><el-icon><EditPen /></el-icon>修改文件</el-button
>
<el-button type="primary" link @click="onExportView(scope.row)"
><el-icon><Download /></el-icon>下载</el-button
>
<el-button type="success" link @click="updateName(scope.row)"
><el-icon><EditPen /></el-icon>修改名称</el-button
>
<el-button type="danger" link @click="handleDelete(scope.row)"
><el-icon><DeleteFilled /></el-icon>删除</el-button
>
<template #default="{ node, data }">
<span class="custom-tree-node">
<el-icon color="#f1a81a"><FolderOpened /></el-icon>
<span>{{ node.label }}</span>
</span>
</template>
</el-table-column>
</el-table>
<pagination
:total="state.total"
v-model:page="state.paramsQuery.pageNum"
v-model:limit="state.paramsQuery.pageSize"
@pagination="getdocumentDataList"
/>
</el-tree>
<div class="resize-handle resize-handle-right right"></div>
</div>
<div class="list_right" id="list_right1">
<div>
<el-form :model="state.paramsQuery" ref="queryRef" :inline="true" label-width="100px">
<el-row>
<el-col :span="7" class="colBlock">
<el-form-item label="文件名称" prop="fileName">
<el-input
v-model="state.paramsQuery.fileName"
placeholder="请输入文件名称"
clearable
@keyup.enter.native="getdocumentDataList"
/>
</el-form-item>
</el-col>
<el-col :span="6" class="m-l10">
<el-form-item>
<el-button type="primary" @click="searchInfo"
><el-icon><Search /></el-icon>搜索</el-button
>
<el-button @click="resetQuery"
><el-icon><Refresh /></el-icon>重置</el-button
>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<el-table v-loading="state.loading" :data="state.infoList" height="67vh" border>
<el-table-column label="序号" align="center" type="index" min-width="50px" />
<el-table-column label="文件名称" align="center" prop="fileName"></el-table-column>
<el-table-column label="文件类型" align="center" prop="fileSuffix" width="100px" />
<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="上传时间" align="center" prop="createTime"> </el-table-column>
<el-table-column label="操作" align="center" width="300">
<template #default="scope">
<el-button type="primary" link @click="handleApproval(scope.row)"
><el-icon><Plus /></el-icon>审批</el-button
>
<el-button type="primary" link @click="handleViewApproval(scope.row)"
><el-icon><View /></el-icon>流程查看</el-button
>
<el-button type="primary" link @click="handleView(scope.row)" v-if="acceptType.includes(scope.row.fileSuffix)"
><el-icon><View /></el-icon>查看</el-button
>
<el-button type="primary" v-if="state.wordType.includes(scope.row.fileSuffix)" link @click="updataView(scope.row)"
><el-icon><EditPen /></el-icon>修改文件</el-button
>
<el-button type="primary" link @click="onExportView(scope.row)"
><el-icon><Download /></el-icon>下载</el-button
>
<el-button type="success" link @click="updateName(scope.row)"
><el-icon><EditPen /></el-icon>修改名称</el-button
>
<el-button type="danger" link @click="handleDelete(scope.row)"
><el-icon><DeleteFilled /></el-icon>删除</el-button
>
</template>
</el-table-column>
</el-table>
<pagination
:total="state.total"
v-model:page="state.paramsQuery.pageNum"
v-model:limit="state.paramsQuery.pageSize"
@pagination="getdocumentDataList"
/>
</div>
</div>
<documentsDeailsVue ref="documentDetailRef" v-if="state.showDocumentDetail" @onClose="onClose"></documentsDeailsVue>
<documentsEdit ref="documentDataEditRef" v-if="state.showdocumentDataEdit" @onClose="onCloseEdit"></documentsEdit>
<bookFile ref="bookFileRef" @onExportView="onExportView" @onBook="handleView" @onExport="onExport"></bookFile>
<el-dialog draggable title="上传文件" v-model="uploadFileder" width="30%">
<file-upload v-model="state.paramsQuery.file"></file-upload>
<template #footer>
<span>
<el-button @click="uploadFileder = false">取消</el-button>
<el-button type="primary" @click="subMitUpload">确定</el-button>
</span>
</template>
</el-dialog>
</div>
<documentsDeailsVue ref="documentDetailRef" v-if="state.showDocumentDetail" @onClose="onClose"></documentsDeailsVue>
<documentsEdit ref="documentDataEditRef" v-if="state.showdocumentDataEdit" @onClose="onCloseEdit"></documentsEdit>
<bookFile ref="bookFileRef" @onExportView="onExportView" @onBook="handleView" @onExport="onExport"></bookFile>
<el-dialog draggable title="上传文件" v-model="uploadFileder" width="30%">
<file-upload v-model="state.paramsQuery.file"></file-upload>
<template #footer>
<span>
<el-button @click="uploadFileder = false">取消</el-button>
<el-button type="primary" @click="subMitUpload">确定</el-button>
</span>
</template>
</el-dialog>
</div>
<el-image-viewer
ref="imageRef"
style="width: 100%; height: 100%"
:url-list="[imgUrl]"
v-if="imgUrl"
show-progress
fit="cover"
@close="imgUrl = ''"
/>
</el-tab-pane>
<el-tab-pane label="回收站" name="second">
<RecyclingStation ref="recylingRef"></RecyclingStation>
</el-tab-pane>
</el-tabs>
<el-image-viewer
ref="imageRef"
style="width: 100%; height: 100%"
:url-list="[imgUrl]"
v-if="imgUrl"
show-progress
fit="cover"
@close="imgUrl = ''"
/>
</el-tab-pane>
<el-tab-pane label="回收站" name="second">
<RecyclingStation ref="recylingRef"></RecyclingStation>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script setup name="KnowledgeDocument" lang="ts">
@ -153,7 +165,6 @@ import {
import documentsEdit from './component/documentsEdit.vue';
import documentsDeailsVue from './component/documentsDeails.vue';
import RecyclingStation from './component/recyclingStation.vue';
import { useUserStoreHook } from '@/store/modules/user';
import bookFile from './component/bookFile.vue';
const activeName = ref('first');
@ -162,6 +173,7 @@ const { proxy } = getCurrentInstance() as any;
const userStore = useUserStoreHook();
// 从 store 中获取项目列表和当前选中的项目
const currentProject = computed(() => userStore.selectedProject);
const { wf_business_status } = toRefs<any>(proxy?.useDict('wf_business_status'));
const uploadUrl = computed(() => {
return `/design/technicalStandard/file`;
});
@ -171,7 +183,6 @@ const uploadParams = computed(() => {
projectId: state.projectId
};
});
const imgUrl = ref<string>('');
const filterText = ref('');
const treeRef = ref();
@ -289,7 +300,7 @@ const setInfo = (arr) => {
const handleNodeClick = (row) => {
state.parentRow = row;
state.parentPid = row.parentId;
console.log('🚀 ~ handleNodeClick ~ state.parentPid:', state.parentPid);
console.log(row);
state.parentName = row.label;
state.paramsQuery.folderId = row.id;
getdocumentDataList();
@ -461,6 +472,26 @@ const listeningProject = watch(
onUnmounted(() => {
listeningProject();
});
const handleApproval = (row) => {
proxy.$tab.closePage(proxy.$route);
proxy.$router.push({
path: `/technicalStandard/indexEdit`,
query: {
id: row.id,
type: 'update'
}
});
};
const handleViewApproval = (row) => {
proxy.$tab.closePage(proxy.$route);
proxy.$router.push({
path: `/technicalStandard/indexEdit`,
query: {
id: row.id,
type: 'view'
}
});
};
</script>
<style lang="scss" scoped>
@ -491,7 +522,7 @@ onUnmounted(() => {
width: 100%;
}
.tree_left1 {
width: 30%;
width: 20%;
background-color: #fff;
border: 1px solid #dddddd;
border-radius: 6px;
@ -554,7 +585,7 @@ onUnmounted(() => {
}
}
.list_right {
width: 69.5%;
width:79.5%;
background: white;
border: 1px solid #ededed;
padding: 10px;

View File

@ -0,0 +1,356 @@
<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);" >{{ form.originalName }}</span>
<!-- <el-button type="primary" link @click="handleView(scope.row)"
><el-icon><View /></el-icon>查看</el-button
> -->
</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';
// 获取用户 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 + '_principletechnical',
label: '设计原则审批'
},
{
value: currentProject.value?.id + '_requirementstechnica',
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 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 getKnowledgeDocument(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;
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>