taoge_xiaodi/td_official
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'main' of http://192.168.110.2:3000/taoge/mk_system into szq

Browse Source
This commit is contained in:
shi
2025-09-05 16:03:39 +08:00
parent e075ce1bfc 922af12760
commit 78dd437746
235 changed files with 21706 additions and 5622 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/views/ProjectScreen/components/centerPage.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="centerPage">
<div class="topPage">
<img src="@/assets/projectLarge/center.png" alt="">
<div id="earth" style="width: 100%;height: 100%;"></div>
</div>
<div class="endPage" :class="{ 'slide-out-down': isHide }">
<Title title="AI安全巡检">
@ -30,7 +30,7 @@
</div>
</template>
<script setup lang="ts">
<script setup>
import { ref, onMounted, toRefs, getCurrentInstance } from "vue"
import Title from './title.vue'
import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
@ -56,12 +56,12 @@ const inspectionList = ref([{
picture: "",
createTime: ""
}])
const swiperContent = ref<HTMLDivElement>()
const swiperContent = ref()
const swiperItemWidth = ref(100)
const canLeft = ref(false)
const canRight = ref(true)
const swiperClick = (direction: 'left' | 'right') => {
const swiperClick = (direction) => {
if (!swiperContent.value) return
if (direction === 'right') {
@ -90,18 +90,67 @@ const getInspectionList = async () => {
const { code, data } = res
if (code === 200) {
data.map(item => {
item.label = violation_level_type.value.find((i: any) => i.value === item.violationType)?.label
item.label = violation_level_type.value.find((i) => i.value === item.violationType)?.label
})
inspectionList.value = data
}
}
// 创建地球
const createEarth = () => {
window.YJ.on({
ws: true,
// host: getIP(), //资源所在服务器地址
// username: this.loginForm.username, //用户名 可以不登录（不填写用户名），不登录时无法加载服务端的数据
// password: md5pass, //密码 生成方式：md5(用户名_密码)
}).then((res) => {
let earth = new YJ.YJEarth("earth");
window.Earth1 = earth;
YJ.Global.openRightClick(window.Earth1);
YJ.Global.openLeftClick(window.Earth1);
let view = {
"position": {
"lng": 102.03643298211526,
"lat": 34.393586474501,
"alt": 11298179.51993155
},
"orientation": {
"heading": 360,
"pitch": -89.94481747201486,
"roll": 0
}
}
loadBaseMap(earth.viewer)
// YJ.Global.flyTo(earth, view);
// YJ.Global.setDefaultView(earth.viewer, view)
})
}
// 加载底图
const loadBaseMap = (viewer) => {
// 创建瓦片提供器
const imageryProvider = new Cesium.UrlTemplateImageryProvider({
url: 'https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
// 可选：设置瓦片的格式
fileExtension: 'png',
// 可选：设置瓦片的范围和级别
minimumLevel: 0,
maximumLevel: 18,
// 可选：设置瓦片的投影（默认为Web Mercator）
projection: Cesium.WebMercatorProjection,
// 可选：如果瓦片服务需要跨域请求，设置请求头部
credit: new Cesium.Credit('卫星图数据来源')
});
// 添加图层到视图
const layer = viewer.imageryLayers.addImageryProvider(imageryProvider);
}
onMounted(() => {
getInspectionList()
createEarth()
if (swiperContent.value && swiperContent.value.children.length > 0) {
swiperItemWidth.value = swiperContent.value.children[0].clientWidth + 20
}
})
</script>
<style scoped lang="scss">

18
src/views/biddingManagemen/appointment/index.vue
View File

@ -10,27 +10,25 @@
@click="isDisabled = false"
class="px-8 py-2.5 transition-all duration-300 font-medium"
v-if="isDisabled"
v-hasPermi="['cailiaoshebei:purchaseUser:addOrUpdate']"
v-hasPermi="['bidding:biddingUser:add']"
>
点击编辑
</el-button>
</div>
<!-- 表单内容区域 -->
<el-form ref="leaveFormRef" :model="form" :rules="rules" label-width="120px" class="p-6 pt30 space-y-6 h75" :disabled="isDisabled">
<!-- 设计负责人 -->
<div class="fonts w60% ma">
<el-form-item label="招投标专员" prop="userId" class="mb-4">
<el-select
v-model="form.userId"
v-model="form.userId" filterable
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.userName" :value="item.userId" />
<el-option v-for="item in userList" :key="item.userId" :label="item.nickName" :value="item.userId" />
</el-select>
</el-form-item>
</div>
<!-- 提交按钮区域 -->
<div class="flex justify-center space-x-6 mt-8 pt-6 border-t border-gray-100" v-if="!isDisabled">
<el-button
@ -38,7 +36,7 @@
@click="submitForm"
icon="Check"
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"
v-hasPermi="['cailiaoshebei:purchaseUser:addOrUpdate']"
v-hasPermi="['bidding:biddingUser:add']"
>
确认提交
</el-button>
@ -53,22 +51,14 @@
<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 { ElMessage, ElLoading } from 'element-plus';
import { biddingGetUser, AddbiddingUser, biddingUserList } from '@/api/bidding/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 isDisabled = ref(false);
// 表单数据
const form = reactive({
id: null,

38
src/views/biddingManagemen/biddingLimit/index.vue
View File

@ -5,7 +5,7 @@
<el-form :model="queryForm" :inline="true">
<el-form-item label="版本号" prop="versions">
<el-select v-model="queryForm.versions" placeholder="选择版本号" @change="changeVersions">
<el-option v-for="item in options" :key="item.id" :label="item.versions" :value="item.id" />
<el-option v-for="item in options" :key="item.id" :label="item.versions" :value="item.versions" />
</el-select>
</el-form-item>
<el-form-item label="表名" prop="sheet">
@ -16,7 +16,7 @@
<el-form-item>
<el-button type="primary" @click="toggleExpandAll">{{ isExpandAll ? '一键收起' : '一键展开' }}</el-button>
</el-form-item>
<el-form-item>
<!-- <el-form-item>
<el-upload
ref="uploadRef"
class="upload-demo"
@ -28,11 +28,11 @@
<el-button type="primary">导入excel</el-button>
</template>
</el-upload>
</el-form-item>
</el-form-item> -->
<el-form-item>
<el-button type="primary" @click="handleExport()" v-hasPermi="['bidding:biddingLimitList:export']">导出excel</el-button>
</el-form-item>
<el-form-item>
<!-- <el-form-item>
<el-button
type="primary"
v-if="versionObj.status == 'draft' || versionObj.status == 'back'"
@ -51,26 +51,20 @@
v-if="versionObj.status != 'draft'"
>查看流程</el-button
>
</el-form-item>
</el-form-item> -->
</el-form>
</el-card>
</transition>
<el-card shadow="never" class="mb8">
<el-table ref="tableRef" v-loading="loading" :data="tableData" row-key="id" border lazy default-expand-all>
<el-table-column prop="num" label="编号" />
<el-table-column prop="name" label="工程或费用名称" />
<el-table-column prop="unit" label="单位" />
<el-table-column prop="quantity" label="数量" />
<el-table-column prop="name" label="工程或费用名称" />
<el-table-column prop="unit" label="单位" align="center" />
<el-table-column prop="quantity" label="数量" align="center" />
<el-table-column prop="specification" label="规格" align="center" />
<el-table-column prop="remark" label="单价" align="center">
<template #default="scope">
<el-input-number
:model-value="scope.row.unitPrice"
@change="(val) => (scope.row.unitPrice = val)"
:precision="2"
:step="0.1"
:controls="false"
v-if="scope.row.quantity && scope.row.quantity != 0"
/>
<span>{{ scope.row.unitPrice }}</span>
</template>
</el-table-column>
<el-table-column prop="price" label="总价" align="center">
@ -78,7 +72,7 @@
{{ scope.row.price }}
</template>
</el-table-column>
<el-table-column prop="price" label="操作" align="center">
<!-- <el-table-column prop="price" label="操作" align="center">
<template #default="scope">
<el-button
type="primary"
@ -89,7 +83,7 @@
>修改</el-button
>
</template>
</el-table-column>
</el-table-column> -->
</el-table>
</el-card>
</div>
@ -172,7 +166,9 @@ const getTableData = async () => {
loading.value = true;
const params = {
projectId: currentProject.value?.id,
sheet: queryForm.value.sheet
sheet: queryForm.value.sheet,
versions: queryForm.value.versions,
type: '1'
};
const res = await getTreeLimit(params);
loading.value = false;
@ -215,8 +211,6 @@ const tableRef = ref<any>();
const toggleExpandAll = () => {
isExpandAll.value = !isExpandAll.value;
console.log(isExpandAll.value);
tableData.value.forEach((row) => {
tableRef.value.toggleRowExpansion(row, isExpandAll.value);
});
@ -254,7 +248,7 @@ const handleExport = () => {
projectId: currentProject.value?.id,
sheet: queryForm.value.sheet
},
`限价一览表${queryForm.value.sheet}.xlsx`
`投标成本核算清单${queryForm.value.sheet}.xlsx`
);
};
// 审核

87
src/views/biddingManagemen/biddingLimit/indexEdit.vue
View File

@ -19,13 +19,35 @@
<h3 class="text-lg font-semibold text-gray-800">成本核算清单</h3>
</div>
<div class="p-6">
<el-form ref="leaveFormRef" disabled :model="form" :rules="rules" label-width="100px" class="space-y-4">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4" v-for="item in sheets" :key="item">
<el-form-item label="表格文件">
<span style="color: #8d8d8d">{{ item }}</span>
</el-form-item>
<el-form ref="leaveFormRef" v-loading="loading" :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="true" v-model="form.versions" placeholder="请输入文件名称" />
</el-form-item>
<el-form-item label="表名" prop="sheet">
<el-select v-model="form.sheet" placeholder="选择表名" @change="changeSheet">
<el-option v-for="item in sheets" :key="item" :label="item" :value="item" />
</el-select>
</el-form-item>
</el-col>
</el-row>
</div>
</el-form>
<el-table :data="tableData" style="width: 100%; margin-bottom: 20px; height: calc(100vh - 305px)" row-key="id" default-expand-all border>
<el-table-column prop="num" label="编号" />
<el-table-column prop="name" label="名称" />
<el-table-column prop="specification" label="规格" />
<el-table-column prop="unit" label="单位" />
<el-table-column prop="quantity" label="数量" />
<el-table-column prop="unitPrice" label="单价" align="center" />
<el-table-column prop="price" label="总价" align="center">
<template #default="scope">
{{ scope.row.price != 0 ? Number(scope.row.price).toFixed(2) : null }}
</template>
</el-table-column>
</el-table>
</div>
</el-card>
<!-- 提交组件 -->
@ -68,9 +90,9 @@ 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;
const { proxy } = getCurrentInstance() as any;
import { useUserStoreHook } from '@/store/modules/user';
import { getVersionDetail } from '@/api/bidding/biddingLimit';
import { getVersionDetail, sheetList, getTreeLimit } from '@/api/bidding/biddingLimit';
// 获取用户 store
const userStore = useUserStoreHook();
@ -82,8 +104,8 @@ const loading = ref(true);
const routeParams = ref<Record<string, any>>({});
const flowCodeOptions = [
{
value: currentProject.value?.id + '_costAccounting',
label: '成本核算清单审批'
value: currentProject.value?.id + '_biddingLimitList',
label: '投标一览审核'
}
];
@ -99,7 +121,6 @@ const submitVerifyRef = ref<InstanceType<typeof SubmitVerify>>();
const approvalRecordRef = ref<InstanceType<typeof ApprovalRecord>>();
//按钮组件
const approvalButtonRef = ref<InstanceType<typeof ApprovalButton>>();
const sheets = ref([]);
const versions = ref({});
const leaveFormRef = ref<ElFormInstance>();
const dialog = reactive({
@ -124,7 +145,10 @@ const initFormData = {
fileSuffix: undefined,
originalName: undefined,
remark: undefined,
fileId: undefined
fileId: undefined,
status: undefined,
versions: undefined,
sheet: undefined
};
const data = reactive({
form: { ...initFormData },
@ -150,12 +174,49 @@ const getInfo = () => {
buttonLoading.value = false;
nextTick(async () => {
const res = await getVersionDetail(routeParams.value.id);
console.log(res);
Object.assign(form.value, res.data);
loading.value = false;
buttonLoading.value = false;
getSheetName();
});
};
const sheets = ref([]);
//获取表名
const getSheetName = async () => {
try {
const params = {
projectId: currentProject.value?.id,
versions: form.value.versions
};
const res = await sheetList(params);
if (res.code == 200) {
sheets.value = res.data;
if (res.data.length > 0) {
form.value.sheet = res.data[0];
}
getListTable();
}
} catch (error) {}
};
//选择表名
const changeSheet = () => {
getListTable();
};
const tableData = ref([]);
//获取列表
const getListTable = async () => {
const res = await getTreeLimit({
projectId: currentProject.value?.id,
versions: form.value.versions,
sheet: form.value.sheet,
type: '0'
});
if (res.code == 200) {
tableData.value = res.data;
}
};
/** 提交按钮 */
const submitForm = (status1: string) => {
status.value = status1;
@ -227,12 +288,10 @@ onMounted(() => {
nextTick(async () => {
reset();
routeParams.value = proxy.$route.query;
sheets.value = routeParams.value.sheets;
versions.value = routeParams.value.versions;
Object.assign(form.value, versions.value);
loading.value = false;
if (routeParams.value.type === 'update' || routeParams.value.type === 'view' || routeParams.value.type === 'approval') {
getInfo();
console.log('routeParams.value', routeParams.value);
}
});
});

524
src/views/biddingManagemen/listOfWinningBids/index copy 2.vue Normal file
View File

@ -0,0 +1,524 @@
<template>
<div class="p-4 bg-gray-50 min-h-screen">
<!-- 卡片容器：控制最大宽度+居中+圆角阴影 -->
<el-card shadow="hover" class="max-w-6xl mx-auto rounded-xl overflow-hidden border-0" style="background-color: #ffffff">
<!-- 卡片头部：项目信息展示区（非表单布局） -->
<template #header>
<div class="bg-blue-50 px-6 rounded-t-xl" style="padding: 10px 20px">
<h3 class="el-card__header-title text-lg font-semibold text-blue-800">投标项目信息</h3>
<h4>{{ currentProject.name }}</h4>
<!-- 项目信息部分 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="project-info-item">
<span>负责人：</span>
<span> {{ projectInfo.principal || '-' }}</span>
</div>
<div class="project-info-item">
<span>负责人电话：</span>
<span> {{ projectInfo.principalPhone || '-' }}</span>
</div>
<div class="project-info-item">
<span>项目类型：</span>
<span> {{ getDictLabel(project_type, projectInfo.projectType) || '-' }}</span>
</div>
<div class="project-info-item">
<span>项目阶段：</span>
<span> {{ getDictLabel(project_stage, projectInfo.projectStage) || '-' }}</span>
</div>
<div class="project-info-item">
<span>开工时间：</span>
<span> {{ projectInfo.onStreamTime || '-' }}</span>
</div>
<div class="project-info-item">
<span>经纬度：</span>
<span> {{ projectInfo.lng || '-' }}，{{ projectInfo.lat || '-' }}</span>
</div>
<div class="project-info-item md:col-span-2 lg:col-span-3">
<span>项目地址：</span>
<span> {{ projectInfo.projectSite || '-' }}</span>
</div>
<div class="project-info-item">
<span>计划容量(M)：</span>
<span> {{ projectInfo.plan || '-' }}</span>
</div>
<div class="project-info-item">
<span>实际容量(M)：</span>
<span> {{ projectInfo.actual || '-' }}</span>
</div>
<div class="project-info-item">
<span>设计总量(M)：</span>
<span> {{ projectInfo.designTotal || '-' }}</span>
</div>
<div class="project-info-item md:col-span-2 lg:col-span-3">
<span>备注：</span>
<span> {{ projectInfo.remark || '-' }}</span>
</div>
</div>
</div>
<div class="mt-4 mb-6">
<el-button @click="isDisabled = false" type="primary" class="px-8 py-2.5 transition-all duration-300 font-medium" v-if="isDisabled">
点击编辑
</el-button>
</div>
</template>
<!-- 中标信息表单区域（保持原有逻辑） -->
<el-form
:disabled="isDisabled"
ref="listOfWinningBidsFormRef"
:model="form"
:rules="rules"
label-width="150px"
class="p-6 pt-4"
style="background-color: #ffffff"
>
<el-row :gutter="32">
<el-col :span="12">
<el-form-item label="中标价(美元)" prop="winningBidOriginal" class="rounded-lg border border-gray-100 p-1 mb-5">
<el-input v-model.number="form.winningBidOriginal" type="number" placeholder="请输入中标价" @input="calculateWinningBid" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="汇率" prop="exchangeRate" class="rounded-lg border border-gray-100 p-1 mb-5">
<el-input v-model.number="form.exchangeRate" type="number" placeholder="请输入汇率" step="0.0001" @input="calculateWinningBid" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="币种" prop="currency" class="rounded-lg border border-gray-100 p-1 mb-5">
<el-input v-model="form.currency" placeholder="请输入币种" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="中标价(人民币)" prop="winningBid" class="rounded-lg border border-gray-100 p-1 mb-5">
<el-input v-model="form.winningBid" type="number" placeholder="根据美元中标价和汇率自动计算" readonly />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="中标日期" prop="bidWinningDate" class="rounded-lg border border-gray-100 p-1 mb-5">
<el-date-picker
clearable
v-model="form.bidWinningDate"
type="date"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
placeholder="请选择中标日期"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="投标保证金(人民币)" prop="bidDeposit" class="rounded-lg border border-gray-100 p-1 mb-5">
<el-input v-model="form.bidDeposit" type="number" placeholder="请输入投标保证金" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="是否退还" prop="whetherSendBack" class="rounded-lg border border-gray-100 p-1 mb-5">
<el-radio-group v-model="form.whetherSendBack">
<el-radio label="是" border>是</el-radio>
<el-radio label="否" border>否</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="所属主体" prop="subject" class="rounded-lg border border-gray-100 p-1 mb-5">
<el-input v-model="form.subject" placeholder="请输入所属主体" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="建设单位" prop="construction" class="rounded-lg border border-gray-100 p-1 mb-5">
<el-input v-model="form.construction" placeholder="请输入建设单位" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="总造价" prop="totalCost" class="rounded-lg border border-gray-100 p-1 mb-5">
<el-input v-model="form.totalCost" placeholder="请输入总造价" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="立项申请人" prop="projectApplicant" class="rounded-lg border border-gray-100 p-1 mb-5">
<el-input v-model="form.projectApplicant" placeholder="请输入立项申请人" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="立项部门" prop="projectApplicantDept" class="rounded-lg border border-gray-100 p-1 mb-5">
<el-input v-model="form.projectApplicantDept" placeholder="请输入立项部门" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="立项申请日期" prop="projectApplicantTime" class="rounded-lg border border-gray-100 p-1 mb-5">
<el-date-picker
clearable
v-model="form.projectApplicantTime"
type="date"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
placeholder="请选择立项申请日期"
/>
</el-form-item>
</el-col>
<!-- <el-col :span="12">
<el-form-item label="项目编号" prop="projectNumbering" class="rounded-lg border border-gray-100 p-1 mb-5">
<el-input v-model="form.projectNumbering" placeholder="请输入项目编号" />
</el-form-item>
</el-col> -->
<el-col :span="12">
<el-form-item label="中标通知书" prop="projectNumbering" class="rounded-lg border border-gray-100 p-1 mb-5">
<file-upload v-model="form.bidFile" :limit="10" :file-type="['pdf']" :file-size="50" />
</el-form-item>
</el-col>
</el-row>
<!-- 操作按钮区域 -->
<el-row v-if="!isDisabled" class="mt-8">
<el-col :span="24" class="text-center">
<el-button
:loading="buttonLoading"
type="primary"
@click="submitForm"
v-hasPermi="['bidding:listOfWinningBids:add', 'bidding:listOfWinningBids:edit']"
class="rounded-full px-8"
size="large"
>
确认提交
</el-button>
<el-button type="default" @click="resetForm" class="ml-6 rounded-full px-8" size="large"> 重置 </el-button>
</el-col>
</el-row>
</el-form>
</el-card>
</div>
</template>
<script setup name="ListOfWinningBidsForm" lang="ts">
import { ref, reactive, toRefs, watch, onMounted, onUnmounted, getCurrentInstance, ComponentInternalInstance, computed } from 'vue';
import { addListOfWinningBids, updateListOfWinningBids, listListOfWinningBids, getListOfWinningBids } from '@/api/bidding/listOfWinningBids';
import { ListOfWinningBidsVO, ListOfWinningBidsForm } from '@/api/bidding/listOfWinningBids/types';
import { useUserStoreHook } from '@/store/modules/user';
import { ElFormInstance, ElMessage } from 'element-plus';
import { getProject, updateProject } from '@/api/project/project'; // 补充项目信息更新接口
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { project_type, project_stage } = toRefs<any>(proxy?.useDict('project_type', 'project_stage'));
// 用户状态管理
const userStore = useUserStoreHook();
// 当前选中项目（从store获取）
const currentProject = computed(() => userStore.selectedProject);
// 项目信息（非表单绑定，直接响应式数据）
const projectInfo = reactive({
projectName: undefined,
shortName: undefined,
pId: undefined,
status: undefined,
picUrl: undefined,
remark: undefined,
projectType: undefined,
projectCategory: undefined,
deletedAt: undefined,
projectSite: undefined,
principal: undefined,
principalPhone: undefined,
actual: undefined,
lng: undefined,
lat: undefined,
plan: undefined,
onStreamTime: undefined,
playCardStart: undefined,
playCardEnd: undefined,
designTotal: undefined,
securityAgreement: undefined,
sort: 0,
showHidden: undefined,
isDelete: undefined
});
// 表单相关引用
const listOfWinningBidsFormRef = ref<ElFormInstance>();
// 加载状态
const buttonLoading = ref(false);
// 编辑/查看状态控制
const isDisabled = ref(false);
// 表单初始数据
const initFormData: ListOfWinningBidsForm = {
id: undefined,
projectId: currentProject.value?.id,
projectStatus: undefined,
projectName: undefined,
winningBidOriginal: undefined,
exchangeRate: undefined,
currency: undefined,
subject: undefined,
winningBid: undefined,
bidWinningDate: undefined,
bidDeposit: undefined,
whetherSendBack: undefined,
construction: undefined,
totalCost: undefined,
projectApplicant: undefined,
projectApplicantDept: undefined,
projectApplicantTime: undefined,
processStatus: undefined,
projectNumbering: undefined
};
// 表单数据与验证规则
const data = reactive({
form: { ...initFormData } as ListOfWinningBidsForm,
rules: {
projectId: [{ required: true, message: '项目ID不能为空', trigger: 'blur' }],
projectName: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
winningBidOriginal: [{ required: true, message: '请输入原始中标价', trigger: 'blur' }],
exchangeRate: [
{ required: true, message: '请输入汇率', trigger: 'blur' },
{ type: 'number', min: 0.001, message: '汇率需大于0', trigger: 'blur' }
],
currency: [{ required: true, message: '请输入币种', trigger: 'blur' }],
subject: [{ required: true, message: '请输入所属主体', trigger: 'blur' }],
winningBid: [{ required: true, message: '请输入中标价', trigger: 'blur' }],
bidWinningDate: [{ required: true, message: '请选择中标日期', trigger: 'blur' }],
projectNumbering: [{ required: true, message: '请输入项目编号', trigger: 'blur' }]
} as Record<string, any>
});
// 解构响应式数据
const { form, rules } = toRefs(data);
/**
* 根据字典值获取字典标签（用于项目类型/阶段的文本展示）
*/
const getDictLabel = (dictList: any[], value: any) => {
if (!dictList || !value) return '';
const dictItem = dictList.find((item) => item.value === value);
return dictItem ? dictItem.label : '';
};
/**
* 计算人民币中标价
*/
const calculateWinningBid = () => {
const dollarAmount = Number(form.value.winningBidOriginal);
const rate = Number(form.value.exchangeRate);
if (isNaN(dollarAmount) || isNaN(rate) || dollarAmount <= 0 || rate <= 0) {
form.value.winningBid = undefined;
return;
}
const result = dollarAmount * rate;
form.value.winningBid = Number(result.toFixed(2));
};
/**
* 页面初始化 - 获取已有数据（如存在）
*/
const initData = async () => {
try {
if (currentProject.value?.id) {
const res = await listListOfWinningBids({ projectId: currentProject.value.id });
if (res.code === 200) {
resetForm();
if (!res.data) {
isDisabled.value = false;
return;
}
Object.assign(form.value, res.data);
isDisabled.value = true;
}
}
} catch (error) {
console.error('初始化中标数据失败:', error);
}
};
/**
* 提交表单（含项目信息+中标信息同步提交）
*/
const submitForm = () => {
listOfWinningBidsFormRef.value?.validate(async (valid: boolean) => {
if (valid) {
buttonLoading.value = true;
try {
// 1. 计算人民币中标价
calculateWinningBid();
// 2. 绑定项目ID和项目名称（从项目信息同步）
form.value.projectId = currentProject.value?.id;
form.value.projectName = projectInfo.projectName;
// 3. 先更新项目信息（若项目信息有修改）
if (currentProject.value?.id) {
await updateProject({ id: currentProject.value.id, ...projectInfo });
}
// 4. 再提交中标信息（新增/编辑逻辑）
const isEdit = !!form.value.id;
if (isEdit) {
await updateListOfWinningBids(form.value);
} else {
await addListOfWinningBids(form.value);
}
// 5. 提交成功后切换为查看状态
isDisabled.value = true;
ElMessage.success(isEdit ? '编辑成功' : '提交成功');
} catch (error) {
ElMessage.error('提交失败，请重试');
console.error('提交表单失败:', error);
} finally {
buttonLoading.value = false;
}
}
});
};
/**
* 获取项目详细信息
*/
const getProjectDetail = async () => {
try {
if (currentProject.value?.id) {
const res = await getProject(currentProject.value.id);
Object.assign(projectInfo, res.data);
}
} catch (error) {
console.error('获取项目详情失败:', error);
ElMessage.error('获取项目信息失败');
}
};
/**
* 重置表单（含项目信息重置）
*/
const resetForm = () => {
// 重置中标表单
form.value = { ...initFormData, projectId: currentProject.value?.id };
listOfWinningBidsFormRef.value?.resetFields();
// 重置项目信息（恢复为当前项目的原始数据）
getProjectDetail();
};
/**
* 监听项目ID变化 - 重新初始化数据
*/
const projectIdWatcher = watch(
() => currentProject.value?.id,
(newId) => {
if (newId) {
form.value.projectId = newId;
getProjectDetail();
initData();
}
}
);
// 页面挂载时初始化
onMounted(() => {
getProjectDetail();
initData();
});
// 页面卸载时清除监听
onUnmounted(() => {
projectIdWatcher();
});
</script>
<style scoped>
/* 全局背景色 */
.bg-gray-50 {
background-color: #f9fafb;
}
/* 项目信息项布局样式 */
.project-info-item {
transition: all 0.2s ease;
padding: 4px 0;
color: #696969;
}
/* 输入框/选择器统一样式 */
.el-input__wrapper,
.el-date-editor .el-input__wrapper,
.el-select__wrapper {
border-radius: 6px !important;
transition: all 0.2s ease;
}
/* 输入框hover效果 */
.el-input__wrapper:hover,
.el-date-editor .el-input__wrapper:hover,
.el-select__wrapper:hover {
border-color: #409eff;
box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}
/* 卡片头部文字样式 */
.el-card__header-title {
display: flex;
align-items: center;
height: 100%;
}
/* 按钮样式优化 */
.el-button {
transition: all 0.2s ease;
}
.el-button:hover {
transform: translateY(-1px);
}
/* 表单项样式优化 */
.el-form-item {
transition: all 0.2s ease;
}
.el-form-item:hover {
border-color: #e6f7ff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
/* 响应式网格布局适配 */
@media (max-width: 767px) {
.grid {
display: grid;
}
.grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.md\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.md\:col-span-2 {
grid-column: span 2 / span 2;
}
}
@media (min-width: 1024px) {
.lg\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.lg\:col-span-3 {
grid-column: span 3 / span 3;
}
}
/* 间距样式 */
.gap-6 {
gap: 1.5rem;
}
.mb-1 {
margin-bottom: 0.25rem;
}
.mb-6 {
margin-bottom: 1.5rem;
}
.mt-4 {
margin-top: 1rem;
}
.mt-6 {
margin-top: 1.5rem;
}
.mt-8 {
margin-top: 2rem;
}
</style>

344
src/views/biddingManagemen/listOfWinningBids/index copy.vue
View File

@ -1,344 +0,0 @@
<template>
<div class="p-2">
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
<div v-show="showSearch" class="mb-[10px]">
<el-card shadow="hover">
<el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="110px">
<el-form-item label="项目名称" prop="projectName">
<el-input v-model="queryParams.projectName" placeholder="请输入项目名称" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="建设单位" prop="construction">
<el-input v-model="queryParams.construction" placeholder="请输入建设单位" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="立项申请人" prop="projectApplicant">
<el-input v-model="queryParams.projectApplicant" 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" v-hasPermi="['bidding:listOfWinningBids:add']">新增</el-button>
</el-col>
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
</template>
<el-table v-loading="loading" :data="listOfWinningBidsList" @selection-change="handleSelectionChange">
<!-- <el-table-column type="selection" width="55" align="center" /> -->
<el-table-column label="序号" align="center" type="index" width="60" />
<el-table-column label="项目状态" align="center" prop="projectStatus" />
<el-table-column label="项目名称" align="center" prop="projectName" />
<el-table-column label="中标价" align="center" prop="winningBidOriginal" />
<el-table-column label="汇率" align="center" prop="exchangeRate" />
<el-table-column label="币种" align="center" prop="currency" />
<el-table-column label="所属主体" align="center" prop="subject" />
<el-table-column label="中标价" align="center" prop="winningBid" />
<el-table-column label="中标日期" align="center" prop="bidWinningDate" width="120"> </el-table-column>
<el-table-column label="投标保证金" align="center" prop="bidDeposit" width="120" />
<el-table-column label="是否退还" align="center" prop="whetherSendBack" />
<el-table-column label="建设单位" align="center" prop="construction" />
<el-table-column label="总造价" align="center" prop="totalCost" />
<el-table-column label="立项申请人" align="center" prop="projectApplicant" width="120" />
<el-table-column label="立项部门" align="center" prop="projectApplicantDept" />
<el-table-column label="立项申请日期" align="center" prop="projectApplicantTime" width="120"> </el-table-column>
<el-table-column label="流程状态" align="center" prop="processStatus" />
<el-table-column label="项目编号" align="center" prop="projectNumbering" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="200">
<template #default="scope">
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['bidding:listOfWinningBids:edit']"
>修改</el-button
>
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['bidding:listOfWinningBids:remove']">
删除</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>
<!-- 添加或修改中标项目一览对话框 -->
<el-dialog :title="dialog.title" v-model="dialog.visible" width="800px" append-to-body>
<el-form ref="listOfWinningBidsFormRef" :model="form" :rules="rules" label-width="110px">
<el-row :gutter="24">
<el-col :span="12">
<el-form-item label="项目名称" prop="projectName"> <el-input v-model="form.projectName" placeholder="请输入项目名称" /> </el-form-item
></el-col>
<el-col :span="12">
<el-form-item label="中标价" prop="winningBidOriginal">
<el-input v-model="form.winningBidOriginal" placeholder="请输入中标价" /> </el-form-item
></el-col>
<el-col :span="12">
<el-form-item label="汇率" prop="exchangeRate"> <el-input v-model="form.exchangeRate" placeholder="请输入汇率" /> </el-form-item
></el-col>
<el-col :span="12">
<el-form-item label="币种" prop="currency"> <el-input v-model="form.currency" placeholder="请输入币种" /> </el-form-item
></el-col>
<el-col :span="12">
<el-form-item label="所属主体" prop="subject"> <el-input v-model="form.subject" placeholder="请输入所属主体" /> </el-form-item
></el-col>
<el-col :span="12"
><el-form-item label="中标价" prop="winningBid"> <el-input v-model="form.winningBid" placeholder="请输入中标价" /> </el-form-item
></el-col>
<el-col :span="12"
><el-form-item label="中标日期" prop="bidWinningDate">
<el-date-picker
clearable
v-model="form.bidWinningDate"
type="date"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
placeholder="请选择中标日期"
>
</el-date-picker> </el-form-item
></el-col>
<el-col :span="12">
<el-form-item label="投标保证金" prop="bidDeposit"> <el-input v-model="form.bidDeposit" placeholder="请输入投标保证金" /> </el-form-item
></el-col>
<el-col :span="12">
<el-form-item label="是否退还" prop="whetherSendBack">
<el-input v-model="form.whetherSendBack" placeholder="请输入是否退还" /> </el-form-item
></el-col>
<el-col :span="12"
><el-form-item label="建设单位" prop="construction"> <el-input v-model="form.construction" placeholder="请输入建设单位" /> </el-form-item
></el-col>
<el-col :span="12">
<el-form-item label="总造价" prop="totalCost"> <el-input v-model="form.totalCost" placeholder="请输入总造价" /> </el-form-item
></el-col>
<el-col :span="12">
<el-form-item label="立项申请人" prop="projectApplicant">
<el-input v-model="form.projectApplicant" placeholder="请输入立项申请人" /> </el-form-item
></el-col>
<el-col :span="12"
><el-form-item label="立项部门" prop="projectApplicantDept">
<el-input v-model="form.projectApplicantDept" placeholder="请输入立项部门" /> </el-form-item
></el-col>
<el-col :span="12"
><el-form-item label="立项申请日期" prop="projectApplicantTime">
<el-date-picker
clearable
v-model="form.projectApplicantTime"
type="date"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
placeholder="请选择立项申请日期"
>
</el-date-picker> </el-form-item
></el-col>
<el-col :span="12"
><el-form-item label="项目编号" prop="projectNumbering">
<el-input v-model="form.projectNumbering" placeholder="请输入项目编号" /> </el-form-item
></el-col>
</el-row>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup name="ListOfWinningBids" lang="ts">
import {
listListOfWinningBids,
getListOfWinningBids,
delListOfWinningBids,
addListOfWinningBids,
updateListOfWinningBids
} from '@/api/bidding/listOfWinningBids';
import { ListOfWinningBidsVO, ListOfWinningBidsQuery, ListOfWinningBidsForm } from '@/api/bidding/listOfWinningBids/types';
import { useUserStoreHook } from '@/store/modules/user';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
// 获取用户 store
const userStore = useUserStoreHook();
// 从 store 中获取当前选中的项目
const currentProject = computed(() => userStore.selectedProject);
const listOfWinningBidsList = ref<ListOfWinningBidsVO[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref<Array<string | number>>([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const queryFormRef = ref<ElFormInstance>();
const listOfWinningBidsFormRef = ref<ElFormInstance>();
const dialog = reactive<DialogOption>({
visible: false,
title: ''
});
const initFormData: ListOfWinningBidsForm = {
id: undefined,
projectId: currentProject.value?.id,
projectStatus: undefined,
projectName: undefined,
winningBidOriginal: undefined,
exchangeRate: undefined,
currency: undefined,
subject: undefined,
winningBid: undefined,
bidWinningDate: undefined,
bidDeposit: undefined,
whetherSendBack: undefined,
construction: undefined,
totalCost: undefined,
projectApplicant: undefined,
projectApplicantDept: undefined,
projectApplicantTime: undefined,
processStatus: undefined,
projectNumbering: undefined
};
const data = reactive<PageData<ListOfWinningBidsForm, ListOfWinningBidsQuery>>({
form: { ...initFormData },
queryParams: {
pageNum: 1,
pageSize: 10,
projectId: currentProject.value?.id,
projectStatus: undefined,
projectName: undefined,
winningBidOriginal: undefined,
exchangeRate: undefined,
currency: undefined,
subject: undefined,
winningBid: undefined,
bidWinningDate: undefined,
bidDeposit: undefined,
whetherSendBack: undefined,
construction: undefined,
totalCost: undefined,
projectApplicant: undefined,
projectApplicantDept: undefined,
projectApplicantTime: undefined,
processStatus: undefined,
projectNumbering: undefined,
params: {}
},
rules: {
id: [{ required: true, message: '不能为空', trigger: 'blur' }],
projectId: [{ required: true, message: '项目id不能为空', trigger: 'blur' }]
}
});
const { queryParams, form, rules } = toRefs(data);
/** 查询中标项目一览列表 */
const getList = async () => {
loading.value = true;
const res = await listListOfWinningBids(queryParams.value);
listOfWinningBidsList.value = res.rows;
total.value = res.total;
loading.value = false;
};
/** 取消按钮 */
const cancel = () => {
reset();
dialog.visible = false;
};
/** 表单重置 */
const reset = () => {
form.value = { ...initFormData };
listOfWinningBidsFormRef.value?.resetFields();
};
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.value.pageNum = 1;
getList();
};
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value?.resetFields();
handleQuery();
};
/** 多选框选中数据 */
const handleSelectionChange = (selection: ListOfWinningBidsVO[]) => {
ids.value = selection.map((item) => item.id);
single.value = selection.length != 1;
multiple.value = !selection.length;
};
/** 新增按钮操作 */
const handleAdd = () => {
reset();
dialog.visible = true;
dialog.title = '添加中标项目一览';
};
/** 修改按钮操作 */
const handleUpdate = async (row?: ListOfWinningBidsVO) => {
reset();
const _id = row?.id || ids.value[0];
const res = await getListOfWinningBids(_id);
Object.assign(form.value, res.data);
dialog.visible = true;
dialog.title = '修改中标项目一览';
};
/** 提交按钮 */
const submitForm = () => {
listOfWinningBidsFormRef.value?.validate(async (valid: boolean) => {
if (valid) {
buttonLoading.value = true;
if (form.value.id) {
await updateListOfWinningBids(form.value).finally(() => (buttonLoading.value = false));
} else {
await addListOfWinningBids(form.value).finally(() => (buttonLoading.value = false));
}
proxy?.$modal.msgSuccess('操作成功');
dialog.visible = false;
await getList();
}
});
};
/** 删除按钮操作 */
const handleDelete = async (row?: ListOfWinningBidsVO) => {
const _ids = row?.id || ids.value;
await proxy?.$modal.confirm('是否确认删除中标项目一览编号为"' + _ids + '"的数据项？').finally(() => (loading.value = false));
await delListOfWinningBids(_ids);
proxy?.$modal.msgSuccess('删除成功');
await getList();
};
/** 导出按钮操作 */
const handleExport = () => {
proxy?.download(
'bidding/listOfWinningBids/export',
{
...queryParams.value
},
`listOfWinningBids_${new Date().getTime()}.xlsx`
);
};
//监听项目id刷新数据
const listeningProject = watch(
() => currentProject.value?.id,
(nid, oid) => {
getList();
}
);
onUnmounted(() => {
listeningProject();
});
onMounted(() => {
getList();
});
</script>

586
src/views/biddingManagemen/listOfWinningBids/index.vue
View File

@ -2,18 +2,67 @@
<div class="p-4 bg-gray-50 min-h-screen">
<!-- 卡片容器：控制最大宽度+居中+圆角阴影 -->
<el-card shadow="hover" class="max-w-6xl mx-auto rounded-xl overflow-hidden border-0" style="background-color: #ffffff">
<!-- 卡片头部：独立背景色+内边距+圆角 -->
<!-- 卡片头部：项目信息展示区 -->
<template #header>
<div class="bg-blue-50 px-6 py-4 rounded-t-xl mb-0">
<h3 class="el-card__header-title text-lg font-semibold text-blue-800">投标项目信息填写</h3>
<span>{{ currentProject.name }}</span>
<div style="margin-top: 10px">
<el-button @click="isDisabled = false" type="primary" class="px-8 py-2.5 transition-all duration-300 font-medium" v-if="isDisabled">
点击编辑
</el-button>
<div class="bg-blue-50 px-6 rounded-t-xl" style="padding: 10px 20px">
<h3 class="el-card__header-title text-lg font-semibold text-blue-800">投标项目信息</h3>
<h4>{{ currentProject.name }}</h4>
<!-- 项目信息部分 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="project-info-item">
<span>负责人：</span>
<span> {{ projectInfo.principal || '-' }}</span>
</div>
<div class="project-info-item">
<span>负责人电话：</span>
<span> {{ projectInfo.principalPhone || '-' }}</span>
</div>
<div class="project-info-item">
<span>项目类型：</span>
<span> {{ getDictLabel(project_type, projectInfo.projectType) || '-' }}</span>
</div>
<div class="project-info-item">
<span>项目阶段：</span>
<span> {{ getDictLabel(project_stage, projectInfo.projectStage) || '-' }}</span>
</div>
<div class="project-info-item">
<span>开工时间：</span>
<span> {{ projectInfo.onStreamTime || '-' }}</span>
</div>
<div class="project-info-item">
<span>经纬度：</span>
<span> {{ projectInfo.lng || '-' }}，{{ projectInfo.lat || '-' }}</span>
</div>
<div class="project-info-item md:col-span-2 lg:col-span-3">
<span>项目地址：</span>
<span> {{ projectInfo.projectSite || '-' }}</span>
</div>
<div class="project-info-item">
<span>计划容量(M)：</span>
<span> {{ projectInfo.plan || '-' }}</span>
</div>
<div class="project-info-item">
<span>实际容量(M)：</span>
<span> {{ projectInfo.actual || '-' }}</span>
</div>
<div class="project-info-item">
<span>设计总量(M)：</span>
<span> {{ projectInfo.designTotal || '-' }}</span>
</div>
<div class="project-info-item md:col-span-2 lg:col-span-3">
<span>备注：</span>
<span> {{ projectInfo.remark || '-' }}</span>
</div>
</div>
</div>
<!-- <div class="mt-4 mb-6">
<el-button @click="isDisabled = false" type="primary"
class="px-8 py-2.5 transition-all duration-300 font-medium" v-if="isDisabled">
点击编辑
</el-button>
</div> -->
</template>
<!-- 中标信息表单区域 -->
<el-form
:disabled="isDisabled"
ref="listOfWinningBidsFormRef"
@ -24,103 +73,88 @@
style="background-color: #ffffff"
>
<el-row :gutter="32">
<!-- 招标代理机构 -->
<el-col :span="12">
<el-form-item label="中标价(美元)" prop="winningBidOriginal" class="rounded-lg border border-gray-100 p-1 mb-5">
<el-input v-model.number="form.winningBidOriginal" type="number" placeholder="请输入中标价" @input="calculateWinningBid" />
<el-form-item label="招标代理机构" prop="biddingAgency" class="rounded-lg border border-gray-100 p-1 mb-5">
<el-input v-model="form.biddingAgency" placeholder="请输入招标代理机构" />
</el-form-item>
</el-col>
<!-- 招标人 -->
<el-col :span="12">
<el-form-item label="汇率" prop="exchangeRate" class="rounded-lg border border-gray-100 p-1 mb-5">
<el-input v-model.number="form.exchangeRate" type="number" placeholder="请输入汇率" step="0.0001" @input="calculateWinningBid" />
<el-form-item label="招标人" prop="tenderer" class="rounded-lg border border-gray-100 p-1 mb-5">
<el-input v-model="form.tenderer" placeholder="请输入招标人" />
</el-form-item>
</el-col>
<!-- 投标截止时间 -->
<el-col :span="12">
<el-form-item label="币种" prop="currency" class="rounded-lg border border-gray-100 p-1 mb-5">
<el-input v-model="form.currency" placeholder="请输入币种" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="中标价(人民币)" prop="winningBid" class="rounded-lg border border-gray-100 p-1 mb-5">
<!-- 人民币输入框：添加readonly禁止手动修改 -->
<el-input v-model="form.winningBid" type="number" placeholder="根据美元中标价和汇率自动计算" readonly />
</el-form-item>
</el-col>
<!-- 其他表单项保持不变 -->
<el-col :span="12">
<el-form-item label="中标日期" prop="bidWinningDate" class="rounded-lg border border-gray-100 p-1 mb-5">
<el-form-item label="投标截止时间" prop="biddingDeadline" class="rounded-lg border border-gray-100 p-1 mb-5">
<el-date-picker
clearable
v-model="form.bidWinningDate"
type="date"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
placeholder="请选择中标日期"
v-model="form.biddingDeadline"
format="YYYY-MM-DD HH:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss"
type="datetime"
placeholder="请选择投标截止时间"
/>
</el-form-item>
</el-col>
<!-- 开标时间 -->
<el-col :span="12">
<el-form-item label="投标保证金(人民币)" prop="bidDeposit" class="rounded-lg border border-gray-100 p-1 mb-5">
<el-input v-model="form.bidDeposit" type="number" placeholder="请输入投标保证金" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="是否退还" prop="whetherSendBack" class="rounded-lg border border-gray-100 p-1 mb-5">
<el-radio-group v-model="form.whetherSendBack">
<el-radio label="是" border>是</el-radio>
<el-radio label="否" border>否</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="所属主体" prop="subject" class="rounded-lg border border-gray-100 p-1 mb-5">
<el-input v-model="form.subject" placeholder="请输入所属主体" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="建设单位" prop="construction" class="rounded-lg border border-gray-100 p-1 mb-5">
<el-input v-model="form.construction" placeholder="请输入建设单位" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="总造价" prop="totalCost" class="rounded-lg border border-gray-100 p-1 mb-5">
<el-input v-model="form.totalCost" placeholder="请输入总造价" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="立项申请人" prop="projectApplicant" class="rounded-lg border border-gray-100 p-1 mb-5">
<el-input v-model="form.projectApplicant" placeholder="请输入立项申请人" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="立项部门" prop="projectApplicantDept" class="rounded-lg border border-gray-100 p-1 mb-5">
<el-input v-model="form.projectApplicantDept" placeholder="请输入立项部门" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="立项申请日期" prop="projectApplicantTime" class="rounded-lg border border-gray-100 p-1 mb-5">
<el-form-item label="开标时间" prop="bidopeningTime" class="rounded-lg border border-gray-100 p-1 mb-5">
<el-date-picker
clearable
v-model="form.projectApplicantTime"
type="date"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
placeholder="请选择立项申请日期"
v-model="form.bidopeningTime"
format="YYYY-MM-DD HH:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss"
type="datetime"
placeholder="请选择开标时间"
/>
</el-form-item>
</el-col>
<!-- 建设地点 -->
<el-col :span="12">
<el-form-item label="项目编号" prop="projectNumbering" class="rounded-lg border border-gray-100 p-1 mb-5">
<el-input v-model="form.projectNumbering" placeholder="请输入项目编号" />
<el-form-item label="建设地点" prop="constructionsite" class="rounded-lg border border-gray-100 p-1 mb-5">
<el-input v-model="form.constructionsite" placeholder="请输入建设地点" />
</el-form-item>
</el-col>
<!-- <el-col :span="12">
<el-form-item label="项目状态" prop="projectStatus" class="rounded-lg border border-gray-100 p-1 mb-5">
<el-input v-model="form.projectStatus" placeholder="请输入项目状态(如：进行中/已完成)" />
<!-- 计划工期 -->
<el-col :span="12">
<el-form-item label="计划工期" prop="planDuration" class="rounded-lg border border-gray-100 p-1 mb-5">
<el-input v-model="form.planDuration" placeholder="请输入计划工期（如：180天）" />
</el-form-item>
</el-col> -->
</el-col>
<!-- 答疑截止时间 -->
<el-col :span="12">
<el-form-item label="答疑截止时间" prop="answeringDeadlineTime" class="rounded-lg border border-gray-100 p-1 mb-5">
<el-date-picker
v-model="form.answeringDeadlineTime"
type="datetime"
format="YYYY-MM-DD HH:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss"
placeholder="请选择答疑截止时间"
/>
</el-form-item>
</el-col>
<!-- 澄清截止时间 -->
<el-col :span="12">
<el-form-item label="澄清截止时间" prop="clarifyDeadlineTime" class="rounded-lg border border-gray-100 p-1 mb-5">
<el-date-picker
format="YYYY-MM-DD HH:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss "
v-model="form.clarifyDeadlineTime"
type="datetime"
placeholder="请选择澄清截止时间"
/>
</el-form-item>
</el-col>
<!-- 项目概况 -->
<el-col :span="24">
<el-form-item label="项目概况" prop="projectOverview" class="rounded-lg border border-gray-100 p-1 mb-5">
<el-input v-model="form.projectOverview" type="textarea" placeholder="请输入项目概况" />
</el-form-item>
</el-col>
</el-row>
<!-- 操作按钮区域 -->
<el-row v-if="!isDisabled" class="mt-8">
<el-row v-if="!form.id" class="mt-4">
<el-col :span="24" class="text-center">
<el-button
:loading="buttonLoading"
@ -136,210 +170,406 @@
</el-col>
</el-row>
</el-form>
<div style="margin-top: 20px" v-if="form.id">
<span style="color: rgb(38 153 255); display: inline-block; margin-left: 40px; font-weight: 700">是否中标配置</span>
<el-form
ref="listOfWinningBidsFormRef"
:disabled="iswhetherBid"
:model="form"
:rules="rules"
label-width="150px"
class="p-6 pt-4"
style="background-color: #ffffff"
>
<el-row>
<!-- 是否中标（必填） -->
<el-col :span="12">
<el-form-item label="是否中标" prop="whetherBid" class="rounded-lg border border-gray-100 p-1 mb-5">
<el-radio-group v-model="form.whetherBid">
<el-radio label="0" border>中标</el-radio>
<el-radio label="1" border>未中标</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<!-- 中标价（必填，仅中标时显示） -->
<el-col :span="12" v-if="form.whetherBid == '0'">
<el-form-item label="中标价(人民币)" prop="bidPrice" class="rounded-lg border border-gray-100 p-1 mb-5">
<el-input v-model="form.bidPrice" type="number" placeholder="请输入中标价" />
</el-form-item>
</el-col>
<!-- 中标通知书（必填，仅中标时显示） -->
<!-- <el-col :span="12" v-if="form.whetherBid == '0'">
<el-form-item label="中标通知书" prop="bidFileId" class="rounded-lg border border-gray-100 p-1 mb-5">
<el-input v-if="form.bidFileName" v-model="form.bidFileName" disabled placeholder="请输入中标通知书" />
<file-upload v-else v-model="form.bidFileId" :limit="1" :file-type="['pdf']" :file-size="50" />
</el-form-item>
</el-col> -->
</el-row>
<!-- 操作按钮区域 -->
<el-row class="mt-4" v-if="!iswhetherBid && form.whetherBid == '0'">
<el-col :span="24" class="text-center">
<el-button
:loading="buttonLoading1"
type="primary"
@click="submitForm"
v-hasPermi="['bidding:listOfWinningBids:add', 'bidding:listOfWinningBids:edit']"
class="rounded-full px-8"
size="large"
>
中标
</el-button>
</el-col>
</el-row>
</el-form>
</div>
</el-card>
</div>
</template>
<script setup name="ListOfWinningBidsForm" lang="ts">
import { ref, reactive, toRefs, watch, onMounted, onUnmounted, getCurrentInstance, ComponentInternalInstance, computed } from 'vue';
import { addListOfWinningBids, updateListOfWinningBids, listListOfWinningBids, getListOfWinningBids } from '@/api/bidding/listOfWinningBids';
import { ListOfWinningBidsVO, ListOfWinningBidsForm } from '@/api/bidding/listOfWinningBids/types';
import { addListOfWinningBids, updateListOfWinningBids, listListOfWinningBids } from '@/api/bidding/listOfWinningBids';
import { ListOfWinningBidsForm } from '@/api/bidding/listOfWinningBids/types';
import { useUserStoreHook } from '@/store/modules/user';
import { ElFormInstance, ElMessage } from 'element-plus';
// 获取组件实例
import { getProject, updateProject } from '@/api/project/project';
import { globalHeaders } from '@/utils/request';
import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus';
import { genFileId } from 'element-plus';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
// 用户状态管理
const { project_type, project_stage } = toRefs<any>(proxy?.useDict('project_type', 'project_stage'));
const headers = ref(globalHeaders());
const fileList = ref([]);
// 用户状态管理与当前项目
const userStore = useUserStoreHook();
// 当前选中项目（从store获取）
const iswhetherBid = ref(false); // 是否中标
const currentProject = computed(() => userStore.selectedProject);
// 项目信息（仅展示，非表单编辑）
const projectInfo = reactive({
principal: undefined,
principalPhone: undefined,
projectType: undefined,
projectStage: undefined,
onStreamTime: undefined,
lng: undefined,
lat: undefined,
projectSite: undefined,
plan: undefined,
actual: undefined,
designTotal: undefined,
remark: undefined,
projectName: undefined
});
// 表单相关引用
// 表单核心变量
const listOfWinningBidsFormRef = ref<ElFormInstance>();
// 加载状态
const buttonLoading = ref(false);
const buttonLoading1 = ref(false);
const isDisabled = ref(false);
// 表单初始数据
const initFormData: ListOfWinningBidsForm = {
const fileObj = ref({
bidFile: undefined,
bidFileName: undefined
});
// 表单初始数据（新增招标相关参数）
const initFormData = {
id: undefined,
projectId: currentProject.value?.id,
projectStatus: undefined,
projectName: undefined,
winningBidOriginal: undefined,
exchangeRate: undefined,
currency: undefined,
subject: undefined,
winningBid: undefined,
bidWinningDate: undefined,
bidDeposit: undefined,
whetherSendBack: undefined,
construction: undefined,
totalCost: undefined,
projectApplicant: undefined,
projectApplicantDept: undefined,
projectApplicantTime: undefined,
processStatus: undefined,
projectNumbering: undefined
whetherBid: '1', // 是否中标：0=中标，1=未中标
bidPrice: undefined, // 中标价（人民币）
bidFileId: undefined, // 中标通知书
biddingAgency: undefined, //招标代理机构
tenderer: undefined, //招标人
biddingDeadline: undefined, //投标截止时间
bidopeningTime: undefined, //开标时间
projectOverview: undefined, //项目概况
constructionsite: undefined, //建设地点
planDuration: undefined, //计划工期
answeringDeadlineTime: undefined, //答疑截止时间
clarifyDeadlineTime: undefined //澄清截止时间
};
// 表单数据与验证规则
// 表单数据与验证规则（核心：是否中标/中标价/中标通知书均设为必填，新增参数添加基础验证）
const data = reactive({
form: { ...initFormData } as ListOfWinningBidsForm,
rules: {
projectId: [{ required: true, message: '项目ID不能为空', trigger: 'blur' }],
projectName: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
winningBidOriginal: [{ required: true, message: '请输入原始中标价', trigger: 'blur' }],
exchangeRate: [
{ required: true, message: '请输入汇率', trigger: 'blur' },
{ type: 'number', min: 0.001, message: '汇率需大于0', trigger: 'blur' }
// 是否中标：必填
whetherBid: [{ required: true, message: '请选择是否中标', trigger: 'change' }],
// 中标价：仅中标时必填，且为正数
bidPrice: [
{
required: true,
message: '请输入中标价',
trigger: 'blur',
validator: (rule: any, value: any, callback: any) => {
if (form.value.whetherBid === '0') {
if (!value && value !== 0) {
return callback(new Error('请输入中标价'));
}
if (Number(value) <= 0) {
return callback(new Error('中标价需大于0'));
}
}
callback();
}
}
],
currency: [{ required: true, message: '请输入币种', trigger: 'blur' }],
subject: [{ required: true, message: '请输入所属主体', trigger: 'blur' }],
winningBid: [{ required: true, message: '请输入中标价', trigger: 'blur' }],
bidWinningDate: [{ required: true, message: '请选择中标日期', trigger: 'blur' }],
projectNumbering: [{ required: true, message: '请输入项目编号', trigger: 'blur' }]
// 中标通知书：仅中标时必填
bidFileId: [
{
required: true,
message: '请上传中标通知书',
trigger: 'change',
validator: (rule: any, value: any, callback: any) => {
if (form.value.whetherBid === '0' && !value) {
return callback(new Error('请上传中标通知书'));
}
callback();
}
}
],
// 招标代理机构：必填
biddingAgency: [{ required: true, message: '请输入招标代理机构', trigger: 'blur' }],
// 招标人：必填
tenderer: [{ required: true, message: '请输入招标人', trigger: 'blur' }],
// 投标截止时间：必填
biddingDeadline: [{ required: true, message: '请选择投标截止时间', trigger: 'change' }],
// 开标时间：必填
bidopeningTime: [{ required: true, message: '请选择开标时间', trigger: 'change' }],
// 项目概况：必填
projectOverview: [{ required: true, message: '请输入项目概况', trigger: 'blur' }],
// 建设地点：必填
constructionsite: [{ required: true, message: '请输入建设地点', trigger: 'blur' }],
// 计划工期：必填
planDuration: [{ required: true, message: '请输入计划工期', trigger: 'blur' }],
// 答疑截止时间：必填
answeringDeadlineTime: [{ required: true, message: '请选择答疑截止时间', trigger: 'change' }],
// 澄清截止时间：必填
clarifyDeadlineTime: [{ required: true, message: '请选择澄清截止时间', trigger: 'change' }]
} as Record<string, any>
});
// 解构响应式数据
const { form, rules } = toRefs(data);
/**
* 计算人民币中标价
* 显式触发的计算函数，确保执行时机可靠
* 字典标签转换（项目类型/阶段）
*/
const calculateWinningBid = () => {
// 确保数据类型正确
const dollarAmount = Number(form.value.winningBidOriginal);
const rate = Number(form.value.exchangeRate);
// 验证输入有效性
if (isNaN(dollarAmount) || isNaN(rate) || dollarAmount <= 0 || rate <= 0) {
form.value.winningBid = undefined;
return;
}
// 计算并保留2位小数
const result = dollarAmount * rate;
form.value.winningBid = Number(result.toFixed(2));
const getDictLabel = (dictList: any[], value: any) => {
if (!dictList || !value) return '';
const dictItem = dictList.find((item) => item.value === value);
return dictItem ? dictItem.label : '';
};
/**
* 页面初始化 - 获取已有数据（如存在）
* 初始化中标数据（根据项目ID查询已有记录）
*/
const initData = async () => {
try {
if (currentProject.value?.id) {
const res = await listListOfWinningBids({ projectId: currentProject.value.id });
if (res.code == 200) {
console.log(res.data);
console.log(res);
if (res.code === 200) {
resetForm();
if (!res.data) {
isDisabled.value = false;
return;
} else {
if (res.data) {
if (res.data.bidPrice) {
iswhetherBid.value = true;
} else {
iswhetherBid.value = false;
}
Object.assign(form.value, res.data);
isDisabled.value = true;
} else {
isDisabled.value = false;
}
isDisabled.value = true;
}
}
} catch (error) {
// ElMessage.error('初始化数据失败');
console.error('初始化中标数据失败:', error);
ElMessage.error('初始化数据失败');
}
};
/**
* 提交表单
* 提交表单（含项目信息更新+中标信息提交）
*/
const submitForm = () => {
const submitForm = async () => {
listOfWinningBidsFormRef.value?.validate(async (valid: boolean) => {
if (valid) {
buttonLoading.value = true;
try {
// 提交前确保计算正确
calculateWinningBid();
// 1. 同步项目ID和名称
form.value.projectId = currentProject.value?.id;
await addListOfWinningBids(form.value);
form.value.projectName = projectInfo.projectName;
delete projectInfo.id;
await addListOfWinningBids({ ...form.value, ...projectInfo });
initData();
// 4. 提交成功后切换为查看状态
isDisabled.value = true;
ElMessage.success('提交成功');
} catch (error) {
ElMessage.error('提交失败，请重试');
console.error('提交表单失败:', error);
} finally {
buttonLoading.value = false;
}
}
});
};
/**
* 重置表单
* 获取项目详细信息（用于展示）
*/
const getProjectDetail = async () => {
try {
if (currentProject.value?.id) {
const res = await getProject(currentProject.value.id);
Object.assign(projectInfo, res.data);
}
} catch (error) {
console.error('获取项目详情失败:', error);
ElMessage.error('获取项目信息失败');
}
};
/**
* 重置表单（恢复初始状态+重新拉取项目信息）
*/
const resetForm = () => {
form.value = { ...initFormData, projectId: currentProject.value?.id };
listOfWinningBidsFormRef.value?.resetFields();
getProjectDetail();
};
/**
* 监听项目ID变化 - 重新初始化数据
* 监听项目ID变化，重新初始化数据
*/
const projectIdWatcher = watch(
() => currentProject.value?.id,
(newId) => {
if (newId) {
form.value.projectId = newId;
getProjectDetail();
initData();
}
}
);
// 页面挂载时初始化
// 生命周期钩子
onMounted(() => {
getProjectDetail();
initData();
});
// 页面卸载时清除监听
onUnmounted(() => {
projectIdWatcher();
});
</script>
<style scoped>
/* 全局背景色：柔和灰色，区分页面与卡片 */
/* 全局背景色 */
.bg-gray-50 {
background-color: #f9fafb;
}
/* 表单项优化：hover效果+边框过渡，提升交互感 */
.el-form-item {
/* 项目信息项样式 */
.project-info-item {
transition: all 0.2s ease;
padding: 4px 0;
color: #696969;
}
/* 输入框/选择器统一样式 */
.el-input__wrapper,
.el-date-editor .el-input__wrapper,
.el-select__wrapper {
border-radius: 6px !important;
transition: all 0.2s ease;
}
.el-form-item:hover {
border-color: #e6f7ff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
/* 输入框hover效果 */
.el-input__wrapper:hover,
.el-date-editor .el-input__wrapper:hover,
.el-select__wrapper:hover {
border-color: #409eff;
box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}
/* 输入框/选择器统一圆角 */
.el-input__wrapper,
.el-date-editor .el-input__wrapper {
border-radius: 6px !important;
}
/* 卡片头部文字对齐优化 */
/* 卡片头部文字样式 */
.el-card__header-title {
display: flex;
align-items: center;
height: 100%;
}
/* 按钮间距与过渡效果 */
/* 按钮样式优化 */
.el-button {
transition: all 0.2s ease;
}
.el-button:hover {
transform: translateY(-1px);
}
/* 只读输入框样式优化（区分可编辑状态） */
.el-input--readonly .el-input__wrapper {
background-color: #f9fafb;
cursor: not-allowed;
/* 表单项样式优化 */
.el-form-item {
transition: all 0.2s ease;
}
.el-form-item:hover {
border-color: #e6f7ff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
/* 响应式网格布局适配 */
@media (max-width: 767px) {
.grid {
display: grid;
}
.grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.md\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.md\:col-span-2 {
grid-column: span 2 / span 2;
}
}
@media (min-width: 1024px) {
.lg\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.lg\:col-span-3 {
grid-column: span 3 / span 3;
}
}
/* 间距样式 */
.gap-6 {
gap: 1.5rem;
}
.mb-5 {
margin-bottom: 1.25rem;
}
.mb-6 {
margin-bottom: 1.5rem;
}
.mt-4 {
margin-top: 1rem;
}
.mt-6 {
margin-top: 1.5rem;
}
.mt-8 {
margin-top: 2rem;
}
</style>

335
src/views/contract/bidCost/index.vue Normal file
View File

@ -0,0 +1,335 @@
<template>
<div class="p-2">
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
<el-card shadow="always">
<el-form :model="queryForm" :inline="true">
<el-form-item label="版本号" prop="versions">
<el-select v-model="queryForm.versions" placeholder="选择版本号" @change="changeVersions">
<el-option v-for="item in options" :key="item.id" :label="item.versions" :value="item.versions" />
</el-select>
</el-form-item>
<el-form-item label="表名" prop="sheet">
<el-select v-model="queryForm.sheet" placeholder="选择表名" @change="changeSheet">
<el-option v-for="item in sheets" :key="item" :label="item" :value="item" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="toggleExpandAll">{{ isExpandAll ? '一键收起' : '一键展开' }}</el-button>
</el-form-item>
<el-form-item>
<el-upload
ref="uploadRef"
class="upload-demo"
:http-request="importExcel"
:show-file-list="false"
v-hasPermi="['bidding:biddingLimitList:importExcelFile']"
>
<template #trigger>
<el-button type="primary">导入excel</el-button>
</template>
</el-upload>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleExport()" v-hasPermi="['bidding:biddingLimitList:export']">导出excel</el-button>
</el-form-item>
<el-form-item>
<el-button
type="primary"
v-if="versionObj.status == 'draft'"
icon="Edit"
@click="handleAudit"
v-hasPermi="['bidding:biddingLimitList:getVersionDetail']"
>审核</el-button
>
</el-form-item>
<el-form-item>
<el-button
type="warning"
icon="view"
@click="handleViewInfo"
v-hasPermi="['bidding:biddingLimitList:getVersionDetail']"
v-if="versionObj.status && versionObj.status != 'draft'"
>查看流程</el-button
>
</el-form-item>
</el-form>
</el-card>
</transition>
<el-card shadow="never" class="mb8">
<el-table ref="tableRef" v-loading="loading" :data="tableData" row-key="id" border lazy default-expand-all>
<el-table-column prop="num" label="编号" />
<el-table-column prop="name" label="工程或费用名称" />
<el-table-column prop="unit" label="单位" align="center" />
<el-table-column prop="specification" label="规格" align="center"/>
<el-table-column prop="quantity" label="数量" align="center">
<template #default="scope">
{{ scope.row.children.length > 0 ? '' : scope.row.quantity }}
</template>
</el-table-column>
<el-table-column prop="remark" label="单价" align="center">
<template #default="scope">
<el-input-number
:disabled="versionObj.status != 'draft'"
:model-value="scope.row.unitPrice"
@change="
(val) => {
scope.row.unitPrice = val;
changePrice(scope.row);
}
"
:precision="2"
:step="0.1"
:controls="false"
v-if="scope.row.quantity && scope.row.quantity != 0"
/>
</template>
</el-table-column>
<el-table-column prop="price" label="总价" align="center">
<template #default="scope">
{{ scope.row.price != 0 ? Number(scope.row.price).toFixed(2) : null }}
</template>
</el-table-column>
<el-table-column prop="operate" label="操作" align="center">
<template #default="scope">
<el-button
type="primary"
size="small"
:disabled="versionObj.status != 'draft'"
@click="handleSave(scope.row, 'all')"
v-if="scope.row.quantity && scope.row.quantity != 0"
v-hasPermi="['bidding:biddingLimitList:edit']"
>确定</el-button
>
</template>
</el-table-column>
</el-table>
</el-card>
</div>
</template>
<script setup lang="ts">
import { useUserStoreHook } from '@/store/modules/user';
import { BiddingImportExcelFile, getTreeLimit, biddingLimitListUpdate, sheetList, obtainAllVersionNumbers } from '@/api/bidding/biddingLimit';
const { proxy } = getCurrentInstance() as any;
const userStore = useUserStoreHook();
const currentProject = computed(() => userStore.selectedProject);
const queryForm = ref({
versions: '',
sheet: ''
});
const loading = ref(false);
const options = ref<any[]>([]);
const sheets = ref<any[]>([]);
const tableData = ref<any[]>([]);
const isExpandAll = ref(true);
const versionObj: any = ref({});
const versionMap = new Map();
//获取版本号
const getVersionNums = async () => {
try {
const params = {
projectId: currentProject.value?.id,
pageSize: 1000,
pageNum: 1
};
const res = await obtainAllVersionNumbers(params);
if (res.code == 200) {
options.value = res.data;
if (res.data.length > 0) {
res.data.forEach((item: any) => {
versionMap.set(item.versions, item);
});
queryForm.value.versions = res.data[0].versions;
versionObj.value = res.data[0];
getSheetName();
} else {
queryForm.value.versions = '';
versionObj.value = {};
}
}
} catch (error) {
console.log(error);
}
};
//选择版本号
const changeVersions = (val) => {
getSheetName();
};
//选择表名
const changeSheet = () => {
getTableData();
};
//获取表名
const getSheetName = async () => {
const params = {
projectId: currentProject.value?.id,
versions: queryForm.value.versions
};
const res = await sheetList(params);
if (res.code == 200) {
sheets.value = res.data;
if (res.data.length > 0) {
queryForm.value.sheet = res.data[0];
} else {
queryForm.value.sheet = '';
}
getTableData();
}
};
//获取表格
const getTableData = async () => {
loading.value = true;
const params = {
projectId: currentProject.value?.id,
sheet: queryForm.value.sheet,
versions: queryForm.value.versions,
type: '0'
};
const res = await getTreeLimit(params);
loading.value = false;
if (res.code == 200) {
if (res.data && res.data.length > 0) {
tableData.value = [res.data[0]];
} else {
tableData.value = [];
}
}
};
const modifyPrice = new Map();
const changePrice = (row: any) => {
modifyPrice.set(row.id, row);
// if (!row.unitPrice) {
// modifyPrice.delete(row.id);
// }
};
//修改单价 biddingLimitListUpdate
const handleSave = (row?: any, type?: any) => {
try {
if (type == 'single') {
loading.value = true;
const list = [{ ...row }];
biddingLimitListUpdate(list).then((res) => {
if (res.code == 200) {
ElMessage({
message: '修改成功',
type: 'success'
});
getTableData();
}
});
}
if (type == 'all') {
loading.value = true;
const list = [];
modifyPrice.forEach((item) => {
list.push({ ...item });
});
biddingLimitListUpdate(list).then((res) => {
if (res.code == 200) {
ElMessage({
message: '修改成功',
type: 'success'
});
getTableData();
}
});
}
} catch (error) {
ElMessage({
message: '修改失败',
type: 'error'
});
} finally {
loading.value = false;
}
};
const tableRef = ref<any>();
const toggleExpandAll = () => {
isExpandAll.value = !isExpandAll.value;
console.log(isExpandAll.value);
tableData.value.forEach((row) => {
tableRef.value.toggleRowExpansion(row, isExpandAll.value);
});
};
//导入
const importExcel = (options: any): any => {
let formData = new FormData();
formData.append('file', options.file);
loading.value = true;
BiddingImportExcelFile({ projectId: currentProject.value?.id }, formData)
.then((res) => {
const { code } = res;
if (code == 200) {
proxy.$modal.msgSuccess(res.msg || '导入成功');
getTableData();
}
})
.catch((err) => {})
.finally(() => {
loading.value = false;
});
};
//监听项目id刷新数据
const listeningProject = watch(
() => currentProject.value?.id,
(nid, oid) => {
getVersionNums();
// getSheetName();
}
);
const handleExport = () => {
proxy?.download(
'/bidding/biddingLimitList/export',
{
projectId: currentProject.value?.id,
sheet: queryForm.value.sheet
},
`投标成本核算${queryForm.value.sheet}.xlsx`
);
};
// 审核
const handleAudit = () => {
proxy.$tab.closePage(proxy.$route);
let id = versionMap.get(queryForm.value.versions).id;
proxy.$router.push({
path: `/approval/biddingLimit/indexEdit`,
query: {
id,
type: 'update',
sheets: sheets.value,
versions: versionObj.value
}
});
};
// 查看审核
const handleViewInfo = () => {
proxy.$tab.closePage(proxy.$route);
let id = versionMap.get(queryForm.value.versions).id;
console.log(versionObj.value);
proxy.$router.push({
path: `/approval/biddingLimit/indexEdit`,
query: {
id,
type: 'view',
sheets: sheets.value,
versions: versionObj.value
}
});
};
onUnmounted(() => {
listeningProject();
});
onMounted(() => {
getVersionNums();
// getSheetName();
});
</script>
<style scoped></style>

343
src/views/contract/bidCost/indexEdit.vue Normal file
View File

@ -0,0 +1,343 @@
<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" disabled :model="form" :rules="rules" label-width="100px" class="space-y-4">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4" v-for="item in sheets" :key="item">
<el-form-item label="表格文件">
<span style="color: #8d8d8d">{{ item }}</span>
</el-form-item>
</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 } 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 any;
import { useUserStoreHook } from '@/store/modules/user';
import { getVersionDetail } from '@/api/bidding/biddingLimit';
// 获取用户 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 flowCodeOptions = [
{
value: currentProject.value?.id + '_biddingLimitList',
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 sheets = ref([]);
const versions = ref({});
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,
projectId: currentProject.value?.id,
versionNumber: undefined,
fileName: undefined,
fileUrl: undefined,
fileType: undefined,
fileSuffix: undefined,
originalName: undefined,
remark: undefined,
fileId: 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 getVersionDetail(routeParams.value.id);
Object.assign(form.value, res.data);
loading.value = false;
buttonLoading.value = false;
});
};
/** 提交按钮 */
const submitForm = (status1: string) => {
status.value = status1;
buttonLoading.value = true;
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';
}
console.log(data);
await handleStartWorkFlow(data);
}
};
onMounted(() => {
nextTick(async () => {
reset();
routeParams.value = proxy.$route.query;
sheets.value = routeParams.value.sheets;
versions.value = routeParams.value.versions;
Object.assign(form.value, versions.value);
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>

109
src/views/contract/division/index.vue
View File

@ -25,20 +25,40 @@
</el-table-column>
<el-table-column prop="name" label="名称" />
<el-table-column prop="content" label="内容" />
<el-table-column prop="plannedBiddingTime" label="计划招标时间" align="center">
<el-table-column prop="price" label="限价" />
<el-table-column prop="plannedBiddingTime" align="center">
<template #header> <span style="color: red">*</span>计划招标时间 </template>
<template #default="scope">
<el-date-picker v-model="scope.row.plannedBiddingTime" type="date" value-format="YYYY-MM-DD" placeholder="选择时间" />
</template>
</el-table-column>
<el-table-column prop="price" label="操作" align="center">
<template #default="scope">
<el-button type="warning" size="small" @click="handleDetail(scope.row)" v-hasPermi="['tender:segmentedIndicatorPlanning:getMore']"
<el-button
type="warning"
icon="view"
size="small"
link
@click="handleDetail(scope.row)"
v-hasPermi="['tender:segmentedIndicatorPlanning:getMore']"
>详情</el-button
>
<el-button type="primary" size="small" @click="handleSave(scope.row)" v-hasPermi="['tender:segmentedIndicatorPlanning:edit']"
>修改</el-button
<el-button
type="primary"
icon="edit"
size="small"
link
@click="handleSave(scope.row)"
v-hasPermi="['tender:segmentedIndicatorPlanning:edit']"
>确定</el-button
>
<el-button type="danger" size="small" @click="delHandle(scope.row)" v-hasPermi="['tender:segmentedIndicatorPlanning:remove']"
<el-button
type="danger"
icon="delete"
size="small"
link
@click="delHandle(scope.row)"
v-hasPermi="['tender:segmentedIndicatorPlanning:remove']"
>删除</el-button
>
</template>
@ -76,10 +96,7 @@
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="toggleExpandAll(true)">一键展开</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="toggleExpandAll(false)">一键收起</el-button>
<el-button type="primary" @click="toggleExpandAll">{{ isExpandAll ? '一键收起' : '一键展开' }}</el-button>
</el-form-item>
</el-form>
</el-card>
@ -98,7 +115,8 @@
<el-table-column prop="name" label="工程或费用名称" />
<el-table-column prop="unit" label="单位" />
<!-- <el-table-column prop="quantity" label="数量" /> -->
<el-table-column prop="selectNum" label="选择数量" align="center">
<el-table-column prop="quantity" label="计划量" align="center" />
<el-table-column prop="selectNum" label="设计量" align="center">
<template #default="scope">
<el-input-number
:model-value="scope.row.selectNum"
@ -112,22 +130,51 @@
:step="1"
:controls="false"
:max="Math.floor(scope.row.quantity)"
v-if="scope.row.quantity && scope.row.quantity != 0"
v-if="scope.row.quantity && scope.row.quantity != 0 && scope.row.unitPrice"
/>
</template>
</el-table-column>
<el-table-column prop="unitPrice" label="单价" align="center" />
<!-- <el-table-column prop="price" label="总价" align="center">
<el-table-column prop="useQuantity" label="剩余量" align="center">
<template #default="scope">
{{ scope.row.price }}
{{
(scope.row.quantity ? Number(scope.row.quantity) : 0) -
(scope.row.useQuantity ? Number(scope.row.useQuantity) : 0) -
(scope.row.selectNum ? Number(scope.row.selectNum) : 0) ==
0
? ''
: (scope.row.quantity ? Number(scope.row.quantity) : 0) -
(scope.row.selectNum ? Number(scope.row.selectNum) : 0) -
(scope.row.useQuantity ? Number(scope.row.useQuantity) : 0)
}}
</template>
</el-table-column> -->
</el-table-column>
<el-table-column prop="unitPrice" label="单价" align="center" />
<el-table-column prop="price" label="总价" align="center">
<template #default="scope">
{{
((scope.row.quantity ? Number(scope.row.quantity) : 0) -
(scope.row.useQuantity ? Number(scope.row.useQuantity) : 0) -
(scope.row.selectNum ? Number(scope.row.selectNum) : 0)) *
Number(scope.row.unitPrice) ==
0
? ''
: (
((scope.row.quantity ? Number(scope.row.quantity) : 0) -
(scope.row.useQuantity ? Number(scope.row.useQuantity) : 0) -
(scope.row.selectNum ? Number(scope.row.selectNum) : 0)) *
Number(scope.row.unitPrice)
).toFixed(2)
}}
</template>
</el-table-column>
</el-table>
</el-col>
</el-row>
<template #footer>
<el-button @click="closeDialog">取消</el-button>
<el-button type="primary" @click="submitForm(formRef)">确定</el-button>
<el-button type="primary" @click="submitForm(formRef)" :loading="loadingBtn">确定</el-button>
</template>
</el-dialog>
<el-dialog title="详情" v-model="detailDialog" width="75%" draggable>
@ -190,7 +237,7 @@ const rules = ref({
content: [{ required: true, message: '请输入内容', trigger: 'blur' }]
});
const loading = ref(false);
const loadingBtn = ref();
//字典获取数据
const getTabsList = async () => {
const res = await getDicts('subcontracting_type');
@ -290,18 +337,10 @@ const getVersionNums = async () => {
getSheetName();
} else {
treeForm.value.versions = '';
ElMessage({
message: '获取版本号失败',
type: 'warning'
});
}
}
} catch (error) {
console.log(error);
ElMessage({
message: '获取版本号失败',
type: 'warning'
});
}
};
//获取表名
@ -318,19 +357,11 @@ const getSheetName = async () => {
treeForm.value.sheet = res.data[0];
} else {
treeForm.value.sheet = '';
ElMessage({
message: '获取表名失败',
type: 'warning'
});
}
getTreeList();
}
} catch (error) {
console.log(error);
ElMessage({
message: '获取表名失败',
type: 'warning'
});
}
};
const handleSelection = (selection: any) => {
@ -372,11 +403,12 @@ const changeSheet = () => {
getTreeList();
};
const toggleExpandAll = (isExpand: boolean) => {
const toggleExpandAll = () => {
isExpandAll.value = !isExpandAll.value;
console.log(isExpandAll.value);
treeData.value.forEach((row) => {
treeTableRef.value.toggleRowExpansion(row, isExpand);
treeTableRef.value.toggleRowExpansion(row, isExpandAll.value);
});
isExpandAll.value = isExpand;
};
//打开获取表数据
const getTreeList = async () => {
@ -418,6 +450,7 @@ const submitForm = async (formEl: FormInstance | undefined) => {
});
return;
}
loadingBtn.value = true;
const newSelectionData = selectionData.value.filter((item) => item.quantity != '' && item.quantity != null);
if (newSelectionData.some((item) => item.selectNum == '' || item.selectNum == null)) {
ElMessage.error('存在未填写数量的工程或费用名称，请检查');
@ -449,6 +482,8 @@ const submitForm = async (formEl: FormInstance | undefined) => {
}
} catch (error) {
console.log(error);
} finally {
loadingBtn.value = false;
}
} else {
console.log('error submit!', fields);
@ -505,7 +540,7 @@ const handleDetail = (row: any) => {
getDetails(row);
};
const getDetails = (row: any) => {
getDetailsList({ id: row.id, type: '1' }).then((res) => {
getDetailsList({ id: row.id, type: '1', projectId: currentProject.value?.id }).then((res) => {
if (res.code == 200) {
detailData.value = res.data;
}

173
src/views/contract/limitPrice/index.vue
View File

@ -14,11 +14,9 @@
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="toggleExpandAll(true)">一键展开</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="toggleExpandAll(false)">一键收起</el-button>
<el-button type="primary" @click="toggleExpandAll">{{ isExpandAll ? '一键收起' : '一键展开' }}</el-button>
</el-form-item>
<el-form-item>
<el-upload
ref="uploadRef"
@ -35,6 +33,26 @@
<el-form-item>
<el-button type="primary" @click="handleExport()" v-hasPermi="['tender:billofquantitiesLimitList:export']">导出excel</el-button>
</el-form-item>
<el-form-item>
<el-button
type="primary"
v-if="reviewStatus && reviewStatus == 'draft'"
@click="clickApprovalSheet()"
v-hasPermi="['tender:tenderPlanLimitList:getVersionDetail']"
>审核</el-button
>
</el-form-item>
<el-form-item>
<el-button
type="warning"
icon="view"
v-if="reviewStatus && reviewStatus != 'draft'"
@click="clickApprovalSheet()"
v-hasPermi="['tender:tenderPlanLimitList:getVersionDetail']"
>查看流程</el-button
>
</el-form-item>
</el-form>
</el-card>
</transition>
@ -42,13 +60,25 @@
<el-table ref="tableRef" v-loading="loading" :data="tableData" row-key="id" border lazy default-expand-all>
<el-table-column prop="num" label="编号" />
<el-table-column prop="name" label="工程或费用名称" />
<el-table-column prop="unit" label="单位" />
<el-table-column prop="quantity" label="数量" />
<el-table-column prop="remark" label="单价" align="center">
<el-table-column prop="unit" label="单位" align="center" />
<el-table-column prop="taxRate" label="税率" align="center" />
<el-table-column prop="specification" label="规格" align="center" />
<el-table-column prop="quantity" label="数量" align="center">
<template #default="scope">
{{ scope.row.children.length > 0 ? '' : scope.row.quantity }}
</template>
</el-table-column>
<el-table-column prop="unitPrice" label="单价" align="center">
<template #default="scope">
<el-input-number
:disabled="reviewStatus != 'draft'"
:model-value="scope.row.unitPrice"
@change="(val) => (scope.row.unitPrice = val)"
@change="
(val) => {
scope.row.unitPrice = val;
changePrice(scope.row);
}
"
:precision="2"
:step="0.1"
:controls="false"
@ -56,17 +86,20 @@
/>
</template>
</el-table-column>
<el-table-column prop="price" label="总价" align="center">
<el-table-column prop="price" label="总价" align="center" >
<template #default="scope">
{{ scope.row.price }}
<!-- {{ scope.row.children.length > 0 ? scope.row.children.reduce((sum, child) => sum + child.price, 0) : scope.row.price }} -->
{{ scope.row.price != 0 ? Number(scope.row.price).toFixed(2) : null }}
<!-- {{ scope.row.price }} -->
</template>
</el-table-column>
<el-table-column prop="price" label="操作" align="center">
<el-table-column prop="operate" label="操作" align="center">
<template #default="scope">
<el-button
type="primary"
size="small"
@click="handleSave(scope.row)"
:disabled="reviewStatus != 'draft'"
@click="handleSave(scope.row, 'all')"
v-if="scope.row.quantity && scope.row.quantity != 0"
v-hasPermi="['tender:billofquantitiesLimitList:edit']"
>确定</el-button
@ -81,7 +114,7 @@
<script setup lang="ts">
import { useUserStoreHook } from '@/store/modules/user';
import { listBillofquantitiesLimitList, obtainAllVersionNumbers, sheetList, updatePrice, importExcelFile } from '@/api/contract/index';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { proxy } = getCurrentInstance() as any;
const userStore = useUserStoreHook();
const currentProject = computed(() => userStore.selectedProject);
@ -93,8 +126,10 @@ const loading = ref(false);
const options = ref<any[]>([]);
const sheets = ref<any[]>([]);
const tableData = ref<any[]>([]);
const isExpandAll = ref(false);
const isExpandAll = ref(true);
const reviewStatus = ref('');
const versionObj: any = ref({});
const versionMap = new Map();
//获取版本号
const getVersionNums = async () => {
try {
@ -109,27 +144,27 @@ const getVersionNums = async () => {
if (res.code == 200) {
options.value = res.data;
if (res.data.length > 0) {
res.data.forEach((item: any) => {
versionMap.set(item.versions, item);
});
queryForm.value.versions = res.data[0].versions;
reviewStatus.value = res.data[0].status;
getSheetName();
} else {
queryForm.value.versions = '';
ElMessage({
message: '获取版本号失败',
type: 'warning'
});
}
}
} catch (error) {
console.log(error);
ElMessage({
message: '获取版本号失败',
type: 'warning'
});
}
};
//选择版本号
const changeVersions = () => {
const changeVersions = (val) => {
options.value.forEach((item) => {
if (item.versions == val) {
reviewStatus.value = item.status;
}
});
getSheetName();
};
@ -152,19 +187,11 @@ const getSheetName = async () => {
queryForm.value.sheet = res.data[0];
} else {
queryForm.value.sheet = '';
ElMessage({
message: '获取表名失败',
type: 'warning'
});
}
getTableData();
}
} catch (error) {
console.log(error);
ElMessage({
message: '获取表名失败',
type: 'warning'
});
}
};
//获取表格
@ -179,54 +206,70 @@ const getTableData = async () => {
};
const res = await listBillofquantitiesLimitList(params);
if (res.code == 200) {
tableData.value = [res.data[0]];
tableData.value = res.data;
}
} catch (error) {
console.log(error);
ElMessage({
message: '获取表格失败',
type: 'error'
});
tableData.value = [];
loading.value = false;
} finally {
loading.value = false;
}
};
const modifyPrice = new Map();
const changePrice = (row: any) => {
modifyPrice.set(row.id, row);
};
//修改单价
const handleSave = (row: any) => {
const handleSave = (row?: any, type?: any) => {
try {
if (!row.unitPrice) {
ElMessage({
message: '请输入单价',
type: 'warning'
if (type == 'single') {
loading.value = true;
const list = [{ ...row, type: '1' }];
updatePrice(list).then((res) => {
if (res.code == 200) {
ElMessage({
message: '修改成功',
type: 'success'
});
getTableData();
}
});
}
if (type == 'all') {
loading.value = true;
const list = [];
modifyPrice.forEach((item) => {
list.push({ ...item, type: '1' });
});
updatePrice(list).then((res) => {
if (res.code == 200) {
ElMessage({
message: '修改成功',
type: 'success'
});
getTableData();
}
});
return;
}
loading.value = true;
updatePrice({ ...row, type: '1' }).then((res) => {
if (res.code == 200) {
ElMessage({
message: '修改成功',
type: 'success'
});
getTableData();
}
});
} catch (error) {
ElMessage({
message: '修改失败',
type: 'error'
});
} finally {
loading.value = false;
}
};
const tableRef = ref<any>();
const toggleExpandAll = (isExpand: boolean) => {
const toggleExpandAll = () => {
isExpandAll.value = !isExpandAll.value;
console.log(isExpandAll.value);
tableData.value.forEach((row) => {
tableRef.value.toggleRowExpansion(row, isExpand);
tableRef.value.toggleRowExpansion(row, isExpandAll.value);
});
isExpandAll.value = isExpand;
};
//导入
const importExcel = (options: any): any => {
@ -266,11 +309,25 @@ const handleExport = () => {
versions: queryForm.value.versions,
type: '1'
},
`限价一览表${queryForm.value.sheet}.xlsx`
`限价一览${queryForm.value.sheet}.xlsx`
);
};
// 审批
const clickApprovalSheet = () => {
proxy.$tab.closePage(proxy?.$route);
let id = versionMap.get(queryForm.value.versions).id;
proxy?.$router.push({
path: `/approval/contractLimitPrice/indexEdit`,
query: {
id: id,
type: 'update',
sheets: queryForm.value.sheet
}
});
};
onUnmounted(() => {
listeningProject();
// console.log(11111111);
});
onMounted(() => {
getVersionNums();

385
src/views/contract/limitPrice/indexEdit.vue Normal file
View File

@ -0,0 +1,385 @@
<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.versions"
: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" :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="true" v-model="form.versions" placeholder="请输入文件名称" />
</el-form-item>
<el-form-item label="表名" prop="sheet">
<el-select v-model="form.sheet" placeholder="选择表名" @change="changeSheet">
<el-option v-for="item in sheets" :key="item" :label="item" :value="item" />
</el-select>
</el-form-item>
</el-col>
</el-row>
</div>
</el-form>
<el-table :data="tableData" style="width: 100%; margin-bottom: 20px; height: calc(100vh - 305px)" row-key="id" default-expand-all border>
<el-table-column prop="num" label="编号" />
<el-table-column prop="name" label="名称" />
<el-table-column prop="specification" label="规格" />
<el-table-column prop="unit" label="单位" />
<el-table-column prop="quantity" label="数量" />
<el-table-column prop="unitPrice" label="单价" align="center" />
<el-table-column prop="price" label="总价" align="center">
<template #default="scope">
{{ scope.row.price != 0 ? Number(scope.row.price).toFixed(2) : null }}
</template>
</el-table-column>
</el-table>
</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 any;
import { useUserStoreHook } from '@/store/modules/user';
const { design_change_reason_type } = toRefs<any>(proxy?.useDict('design_change_reason_type'));
import { listBillofquantitiesLimitList, getVersionDetails, sheetList } from '@/api/contract/index';
// 获取用户 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 + '_xianjiayilan',
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 = {
versions: '',
sheet: '',
status: '',
id: ''
};
const data = reactive({
form: { ...initFormData },
tableData: [],
rules: {}
});
const handleClose = () => {
dialogVisible.visible = false;
flowCode.value = '';
buttonLoading.value = false;
};
const { form, rules, tableData } = toRefs(data);
/** 表单重置 */
const reset = () => {
form.value = { ...initFormData };
leaveFormRef.value?.resetFields();
};
/** 获取详情 */
const getInfo = () => {
loading.value = true;
buttonLoading.value = false;
nextTick(async () => {
const res = await getVersionDetails(routeParams.value.id);
console.log(res);
Object.assign(form.value, res.data);
loading.value = false;
buttonLoading.value = false;
getSheetName();
});
};
const sheets = ref([]);
//获取表名
const getSheetName = async () => {
try {
const params = {
projectId: currentProject.value?.id,
versions: form.value.versions
};
const res = await sheetList(params);
if (res.code == 200) {
sheets.value = res.data;
if (res.data.length > 0) {
form.value.sheet = res.data[0];
}
getListTable();
}
} catch (error) {}
};
//选择表名
const changeSheet = () => {
getListTable();
};
//获取列表
const getListTable = async () => {
const res = await listBillofquantitiesLimitList({
projectId: currentProject.value?.id,
versions: form.value.versions,
sheet: form.value.sheet
});
if (res.code == 200) {
tableData.value = res.data;
}
};
/** 提交按钮 */
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: any) => {
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);
if (routeParams.value.type === 'update' || routeParams.value.type === 'view' || routeParams.value.type === 'approval') {
getInfo();
console.log('routeParams.value', routeParams.value);
}
});
});
</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>

2
src/views/cory/template/components/contactform.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="content-box">
<el-table :data="data" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column type="index" label="序号" width="55" align="center" />
<el-table-column align="center" prop="projectName" label="工程名称" />
<el-table-column align="center" prop="serialNumber" label="编号" />
<el-table-column align="center" prop="to" label="致" />

4
src/views/cory/template/components/engineeringChangeApplicationForm.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="content-box">
<el-table :data="data" style="width: 100%" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column type="index" width="55" label="序号" align="center" />
<el-table-column align="center" prop="projectName" label="工程名称" />
<el-table-column align="center" prop="submitUnit" label="提出单位" />
<el-table-column align="center" prop="specialty" label="专业">
@ -30,7 +30,7 @@
</el-button>
<el-button link type="primary" icon="View" @click="handleViewInfo(scope.row)" class="ml-3"> 查看流程 </el-button>
<el-button link type="success" icon="View" @click="handleDetail(scope.row)" class="ml-3"> 详情 </el-button>
<el-button link type="danger" icon="Delete" @click="handleDelete(scope.row)"> 删除 </el-button>
<!-- <el-button link type="danger" icon="Delete" @click="handleDelete(scope.row)"> 删除 </el-button> -->
</template>
</el-table-column>
</el-table>

89
src/views/cory/template/indexEdit.vue
View File

@ -36,12 +36,42 @@
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="工程名称">
<el-input v-model="form.projectName" />
<el-input disabled v-model="form.projectName" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="提出单位">
<el-input v-model="form.submitUnit" />
<el-input v-model="form.submitUnit" placeholder="请输入提出单位" />
</el-form-item>
</el-col>
</el-row>
<!-- 卷册名称 & 附图 -->
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="卷册号">
<!-- <el-input v-model="form.volumeName" /> -->
<el-select
id="projectSelect"
v-model="form.volumeNumber"
placeholder="请选择原卷册号"
clearable
filterable
@change="handleSelect"
style="width: 150px; margin-right: 20px"
>
<el-option
v-for="project in volumeCatalogList"
:key="project.volumeNumber"
:label="project.volumeNumber"
:value="project.volumeNumber"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<!-- 卷册号 -->
<el-form-item label="卷册名称">
<el-input disabled v-model="form.volumeName" />
</el-form-item>
</el-col>
</el-row>
@ -50,7 +80,7 @@
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="专业">
<el-select v-model="form.specialty" placeholder="">
<el-select disabled v-model="form.specialty" placeholder="请选择专业">
<el-option v-for="item in des_user_major" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
@ -62,27 +92,9 @@
</el-col>
</el-row>
<!-- 卷册名称 & 附图 -->
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="卷册名称">
<el-input v-model="form.volumeName" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="附图">
<file-Upload v-model="form.attachmentsImg" :file-type="['pdf', 'png', 'jpg', 'jpeg', 'gif', 'bmp']">
<el-button type="primary">上传附件</el-button>
</file-Upload>
</el-form-item>
</el-col>
</el-row>
<!-- 卷册号 -->
<el-form-item label="卷册号">
<el-input v-model="form.volumeNumber" />
<el-form-item label="附图">
<file-Upload :fileSize="50" v-model="form.attachmentsImg" :file-type="['png', 'jpg', 'jpeg']"> </file-Upload>
</el-form-item>
<!-- 变更原因 -->
<el-form-item label="变更原因">
<el-checkbox-group v-model="form.changeReasons">
@ -100,10 +112,10 @@
<el-input v-model="form.content" type="textarea" :rows="6" placeholder="请输入内容" />
</el-form-item>
<el-form-item label="附件" prop="attachments">
<file-upload v-model="form.attachments" :limit="1" :file-type="['pdf']"></file-upload>
<file-upload :fileSize="50" v-model="form.attachments" :limit="1" :file-type="['pdf']"></file-upload>
</el-form-item>
<el-form-item label="变更费用估算" prop="costEstimation">
<el-input v-model="form.costEstimation" :rows="6" placeholder="请输入变更费用估算" />
<el-input v-model="form.costEstimation" :rows="6" type="number" placeholder="请输入变更费用估算" />
</el-form-item>
<el-divider class="mb-10! mt-10!">施工项目部</el-divider>
<el-form-item label="项目负责人" prop="contractorLeader">
@ -177,6 +189,7 @@ import { useUserStoreHook } from '@/store/modules/user';
import { listByIds } from '@/api/system/oss';
import { addContactnotice, getContactnotice, updateContactnotice } from '@/api/cory/contactnotice';
const { des_user_major } = toRefs(proxy?.useDict('des_user_major'));
import { catalogList } from '@/api/design/designChange';
// 获取用户 store
const userStore = useUserStoreHook();
@ -221,11 +234,11 @@ const initFormData = {
id: undefined,
projectId: currentProject.value?.id,
projectType: '',
projectName: '',
projectName: currentProject.value?.name,
serialNumber: '',
to: '',
subject: '',
costEstimation: '',
costEstimation: 0,
content: '',
attachments: '',
contractorLeader: '',
@ -275,13 +288,27 @@ const handleClose = () => {
buttonLoading.value = false;
};
const { form, rules } = toRefs(data);
const volumeCatalogList = ref([]);
let volumeMap = new Map();
/** 表单重置 */
const reset = () => {
form.value = { ...initFormData };
leaveFormRef.value?.resetFields();
};
// 获取卷册号列表
const getJuance = async () => {
const res = await catalogList(currentProject.value?.id);
volumeCatalogList.value = res.data;
volumeCatalogList.value.forEach((e) => {
volumeMap.set(e.volumeNumber, e);
});
};
const handleSelect = (val) => {
let obj = volumeMap.get(val);
console.log(obj);
form.value.volumeName = obj.documentName;
form.value.specialty = obj.specialty;
};
/** 获取详情 */
const getInfo = () => {
loading.value = true;
@ -345,7 +372,8 @@ const handleStartWorkFlow = async (data: LeaveForm) => {
//流程变量
taskVariables.value = {
// leave4/5 使用的流程变量
userList: ['1', '3', '4']
userList: ['1', '3', '4'],
costEstimation: form.value.costEstimation
};
submitFormData.value.variables = taskVariables.value;
const resp = await startWorkFlow(submitFormData.value);
@ -402,6 +430,7 @@ onMounted(() => {
routeParams.value = proxy.$route.query;
thumbnailUrl.value = proxy.$route.query.thumbnailUrl;
reset();
getJuance();
loading.value = false;
if (routeParams.value.type === 'update' || routeParams.value.type === 'view' || routeParams.value.type === 'approval') {
getInfo();

32
src/views/cory/workMessage/components/notice.vue
View File

@ -5,7 +5,7 @@
<el-table-column label="序号" type="index" width="60" align="center" />
<el-table-column label="处理状态" align="center" prop="status">
<template #default="scope">
<dict-tag :options="safety_inspection_type" :value="scope.row.status" />
<dict-tag :options="wf_business_status" :value="scope.row.status" />
</template>
</el-table-column>
<el-table-column label="检查人" align="center" prop="correctorName" />
@ -46,13 +46,16 @@
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="220">
<template #default="scope">
<el-space>
<el-button link type="primary" icon="View" @click="handleDetail(scope.row)" v-hasPermi="['safety:safetyInspection:query']">
详情
<el-button link type="primary" icon="View" @click="handleDetail(scope.row)"> 详情 </el-button>
<el-button link type="primary" icon="Edit" @click="handleAddApp(scope.row)" v-if="scope.row.status && scope.row.status == 'draft'"
>审批
</el-button>
<!-- <el-button link type="success" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['safety:safetyInspection:edit']">修改 </el-button> -->
<el-button link type="danger" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['safety:safetyInspection:remove']">
<el-button link type="primary" icon="View" @click="handleAddApp(scope.row)" v-if="scope.row.status && scope.row.status != 'draft'"
>查看流程
</el-button>
<!-- <el-button link type="danger" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['safety:safetyInspection:remove']">
删除
</el-button>
</el-button> -->
</el-space>
</template>
</el-table-column>
@ -191,9 +194,10 @@ const userStore = useUserStoreHook();
// 从 store 中获取项目列表和当前选中的项目
const currentProject = computed(() => userStore.selectedProject);
const { safety_inspection_violation_type, safety_inspection_check_type, review_type, safety_inspection_type } = toRefs<any>(
useDict('safety_inspection_violation_type', 'safety_inspection_check_type', 'review_type', 'safety_inspection_type')
const { safety_inspection_violation_type, safety_inspection_check_type, review_type, safety_inspection_type, wf_business_status } = toRefs<any>(
useDict('safety_inspection_violation_type', 'safety_inspection_check_type', 'review_type', 'safety_inspection_type', 'wf_business_status')
);
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const safetyInspectionDetail = ref<SafetyInspectionVO>();
const form = reactive({
@ -236,6 +240,18 @@ const handleDetail = async (row) => {
rectificationFileList.value = rectificationFileRes.data;
}
};
const handleAddApp = (row) => {
// 添加审批
proxy.$tab.closePage(proxy.$route);
proxy.$router.push({
path: `/approval/workMessage/indexEdit`,
query: {
id: row.id,
type: 'update'
}
});
};
const getList = (row) => {};
const handleDelete = (row) => {};
</script>

11
src/views/cory/workMessage/index.vue
View File

@ -21,7 +21,7 @@
<template #header>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" plain icon="Plus" :disabled="addSingle" @click="handleAdd" v-hasPermi="['quality:qualityInspection:add']"
<el-button type="primary" plain icon="Plus" :disabled="addSingle" @click="handleAdd" v-hasPermi="['cory:contactnotice:add']"
>新增</el-button
>
</el-col>
@ -31,13 +31,7 @@
>
</el-col> -->
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="Delete"
:disabled="multiple"
@click="handleDelete()"
v-hasPermi="['quality:qualityInspection:remove']"
<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['cory:contactnotice:remove']"
>删除</el-button
>
</el-col>
@ -306,6 +300,7 @@ const selectType = (value: string) => {
const resetForm = () => {
formRef.value?.resetFields();
};
//监听项目id刷新数据
const listeningProject = watch(
() => currentProject.value?.id,

482
src/views/cory/workMessage/indexEdit.vue Normal file
View File

@ -0,0 +1,482 @@
<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="w80% ma">
<h2 style="text-align: center; margin-top: 5px; font-weight: bold">通知单</h2>
<el-row>
<el-col :span="12" style="text-align: left">填报人：{{ safetyInspectionDetail?.creatorName }}</el-col>
<el-col :span="12" style="text-align: right">填报时间：{{ safetyInspectionDetail?.createTime }}</el-col>
</el-row>
<el-descriptions :column="2" border style="margin-top: 8px" label-width="160px" size="large">
<el-descriptions-item label-align="center" label="检查项目" :span="2" class-name="zebra"
>{{ currentProject?.name }}
</el-descriptions-item>
<el-descriptions-item label-align="center" label="检查类型" label-class-name="white">
<dict-tag :options="safety_inspection_check_type" :value="safetyInspectionDetail?.checkType" />
</el-descriptions-item>
<el-descriptions-item label-align="center" label="违章类型" label-class-name="white">
<dict-tag :options="safety_inspection_violation_type" :value="safetyInspectionDetail?.violationType" />
</el-descriptions-item>
<el-descriptions-item label-align="center" label="检查时间" class-name="zebra"
>{{ safetyInspectionDetail?.checkTime }}
</el-descriptions-item>
<el-descriptions-item label-align="center" label="检查人" class-name="zebra"
>{{ safetyInspectionDetail?.creatorName }}
</el-descriptions-item>
<el-descriptions-item label-align="center" label="整改人" label-class-name="white"
>{{ safetyInspectionDetail?.correctorName }}
</el-descriptions-item>
<el-descriptions-item label-align="center" label="要求整改期限" label-class-name="white">
{{ dayjs(safetyInspectionDetail?.rectificationDeadline).format('YYYY 年 MM 月 DD 日') }}
</el-descriptions-item>
</el-descriptions>
<el-descriptions border direction="vertical" size="large">
<el-descriptions-item label-align="center" label="巡检结果" class-name="none"></el-descriptions-item>
</el-descriptions>
<el-descriptions :column="2" border label-width="160px" size="large">
<el-descriptions-item label-align="center" label="内容" :span="2" label-class-name="white"
>{{ safetyInspectionDetail?.hiddenDanger }}
</el-descriptions-item>
<el-descriptions-item label-align="center" label="检查附件" :span="2" label-class-name="white">
<el-space wrap>
<div v-for="item in checkFileList" :key="item.ossId">
<span v-if="['.png', '.jpg', '.jpeg'].includes(item.fileSuffix)">
<image-preview :src="item.url" width="200px" />
</span>
<span v-else>
<el-link :href="`${item.url}`" type="primary" :underline="false" target="_blank">
<span> {{ item.originalName }} </span>
</el-link>
</span>
</div>
</el-space>
</el-descriptions-item>
<el-descriptions-item label-align="center" label="检查状态" :span="2" label-class-name="white">
<el-steps style="max-width: 200px" :active="Number(safetyInspectionDetail?.status)" finish-status="finish">
<el-step v-for="item in safety_inspection_type" :key="item.value" :title="item.label" />
</el-steps>
</el-descriptions-item>
</el-descriptions>
<el-descriptions border direction="vertical" size="large">
<el-descriptions-item label-align="center" label="整改情况" class-name="none"></el-descriptions-item>
</el-descriptions>
<el-descriptions :column="2" border label-width="160px" size="large">
<el-descriptions-item label-align="center" label="班组" label-class-name="white"
>{{ safetyInspectionDetail?.teamName }}
</el-descriptions-item>
<el-descriptions-item label-align="center" label="整改日期" label-class-name="white"
>{{ safetyInspectionDetail?.rectificationTime }}
</el-descriptions-item>
<el-descriptions-item label-align="center" label="整改措施及完成情况" :span="2" label-class-name="white">
{{ safetyInspectionDetail?.measure }}
</el-descriptions-item>
<el-descriptions-item label-align="center" label="整改附件" :span="2" label-class-name="white">
<el-space wrap>
<div v-for="item in rectificationFileList" :key="item.ossId">
<span v-if="['.png', '.jpg', '.jpeg'].includes(item.fileSuffix)">
<image-preview :src="item.url" width="200px" />
</span>
<span v-else>
<el-link :href="`${item.url}`" :underline="false" target="_blank">
<span> {{ item.originalName }} </span>
</el-link>
</span>
</div>
</el-space>
</el-descriptions-item>
</el-descriptions>
<el-descriptions border direction="vertical" size="large">
<el-descriptions-item label-align="center" label="复查结果" class-name="none"></el-descriptions-item>
</el-descriptions>
<el-descriptions :column="2" border label-width="160px" size="large">
<el-descriptions-item label-align="center" label="复查人" label-class-name="white"
>{{ safetyInspectionDetail?.creatorName }}
</el-descriptions-item>
<el-descriptions-item label-align="center" label="复查日期" label-class-name="white"
>{{ safetyInspectionDetail?.reviewTime }}
</el-descriptions-item>
<el-descriptions-item label-align="center" label="复查情况" :span="2" label-class-name="white"
>{{ safetyInspectionDetail?.review }}
</el-descriptions-item>
</el-descriptions>
</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, 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';
import { listByIds } from '@/api/system/oss';
import { dayjs } from 'element-plus';
import { useDict } from '@/utils/dict';
import { SafetyInspectionVO } from '@/api/safety/safetyInspection/types';
// const { des_user_major } = toRefs(proxy?.useDict('des_user_major'));
import { getContactnotice } from '@/api/cory/contactnotice';
const { safety_inspection_violation_type, safety_inspection_check_type, review_type, safety_inspection_type, wf_business_status } = toRefs<any>(
useDict('safety_inspection_violation_type', 'safety_inspection_check_type', 'review_type', 'safety_inspection_type', 'wf_business_status')
);
// 获取用户 store
const userStore = useUserStoreHook();
// 从 store 中获取项目列表和当前选中的项目
const currentProject = computed(() => userStore.selectedProject);
const buttonLoading = ref(false);
const loading = ref(true);
const thumbnailUrl = ref('');
//路由参数
const routeParams = ref<Record<string, any>>({});
const flowCodeOptions = [
{
value: currentProject.value?.id + '_contactForm',
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 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,
projectId: currentProject.value?.id,
projectType: '',
projectName: '',
serialNumber: '',
to: '',
subject: '',
costEstimation: '',
content: '',
attachments: '',
contractorLeader: '',
contractorDate: '',
supervisorLeader: '',
supervisorDate: '',
ownerRep: '',
ownerDate: '',
unitName: '',
profession: '',
applyDate: '',
bookName: '',
bookNo: '',
hasAttachment: '',
changeReasons: [],
changeContent: '',
costEstimate: '',
status: ''
};
const data = reactive({
form: { ...initFormData },
queryParams: {
pageNum: 1,
pageSize: 10,
projectId: currentProject.value?.id,
fileName: undefined,
fileType: undefined,
fileSuffix: undefined,
fileStatus: undefined,
originalName: undefined,
newest: undefined,
params: {}
}
});
const safetyInspectionDetail = ref<SafetyInspectionVO>();
const handleClose = () => {
dialogVisible.visible = false;
flowCode.value = '';
buttonLoading.value = false;
};
const { form } = toRefs(data);
/** 表单重置 */
const reset = () => {
form.value = { ...initFormData };
leaveFormRef.value?.resetFields();
};
const checkFileList: any = ref([]);
const rectificationFileList: any = ref([]);
/** 获取详情 */
const getInfo = () => {
loading.value = true;
buttonLoading.value = false;
nextTick(async () => {
const res = await getContactnotice(routeParams.value.id);
console.log(res.data);
const detail = res.data.detail ? JSON.parse(res.data.detail) : {};
safetyInspectionDetail.value = { ...res.data, ...detail };
if (safetyInspectionDetail.value.checkFile) {
const checkFileRes = await listByIds(safetyInspectionDetail.value.checkFile.split(','));
checkFileList.value = checkFileRes.data;
}
if (safetyInspectionDetail.value.rectificationFile) {
const rectificationFileRes = await listByIds(safetyInspectionDetail.value.rectificationFile.split(','));
rectificationFileList.value = rectificationFileRes.data;
}
Object.assign(form.value, safetyInspectionDetail.value);
loading.value = false;
buttonLoading.value = false;
});
};
const submitFlow = async () => {
console.log('form.value', form.value);
handleStartWorkFlow(form.value);
dialogVisible.visible = false;
};
//提交申请
const handleStartWorkFlow = async (data: LeaveForm) => {
console.log('data', data);
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 submitForm = (status1: string) => {
status.value = status1;
submit(status.value, form.value);
};
//审批记录
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';
}
console.log('data', data);
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>

185
src/views/ctr/expensesContract/index.vue
View File

@ -1,94 +1,57 @@
<template>
<div class="p-2">
<transition :enter-active-class="proxy?.animate.searchAnimate.enter"
:leave-active-class="proxy?.animate.searchAnimate.leave">
<div v-show="showSearch" class="mb-[10px]">
<el-card shadow="hover">
<el-card shadow="never">
<template #header>
<el-row :gutter="10" class="mb8">
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<!-- <el-form-item label="项目ID" prop="projectId">
<el-input v-model="queryParams.projectId" placeholder="请输入项目ID" clearable @keyup.enter="handleQuery" />
</el-form-item> -->
<el-form-item label="合同编号" prop="contractCode">
<el-input v-model="queryParams.contractCode" placeholder="请输入合同编号" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="供应商" prop="contractSupplier">
<el-input v-model="queryParams.contractSupplier" placeholder="请输入供应商" clearable
@keyup.enter="handleQuery" />
<el-input v-model="queryParams.contractSupplier" placeholder="请输入供应商" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="合同金额" prop="amount">
<el-input v-model="queryParams.amount" placeholder="请输入合同金额" clearable @keyup.enter="handleQuery" />
</el-form-item>
<!-- <el-form-item label="招标Id" prop="tenderId">
<el-input v-model="queryParams.tenderId" placeholder="请输入招标Id" 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"
v-hasPermi="['ctr:expensesContract:add']">新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()"
v-hasPermi="['ctr:expensesContract:edit']">修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()"
v-hasPermi="['ctr:expensesContract:remove']">删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="warning" plain icon="Download" @click="handleExport"
v-hasPermi="['ctr:expensesContract:export']">导出</el-button>
</el-col>-->
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
</template>
<el-table v-loading="loading" :data="expensesContractList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<!-- <el-table-column label="主键ID" align="center" prop="id" v-if="true" /> -->
<el-table-column type="index" width="50" label="序号" />
<!-- <el-table-column label="项目ID" align="center" prop="projectId" /> -->
<el-table-column label="合同编号" align="center" prop="contractCode" />
<el-table-column label="合同类型" align="center" prop="contractType" />
<el-table-column label="合同类型" align="center" prop="contractType">
<template #default="scope">
<dict-tag :options="expenses_contract_type" :value="scope.row.contractType" />
</template>
</el-table-column>
<el-table-column label="支付方式" align="center" prop="payType">
<template #default="scope">
<el-tag type="success" v-if="scope.row.payType == '1'">月结算</el-tag>
<el-tag type="primary" v-else-if="scope.row.payType == '2'">形象节点</el-tag>
</template>
</el-table-column>
<el-table-column label="供应商" align="center" prop="contractSupplier" />
<el-table-column label="分包内容" align="center" prop="contractedContent" />
<el-table-column label="合同金额" align="center" prop="amount" />
<!-- <el-table-column label="招标Id" align="center" prop="tenderId" /> -->
<el-table-column label="预付款比例(%)" align="center" prop="advancePayRatio" />
<el-table-column label="尾款比例(%)" align="center" prop="balancePayRatio" />
<el-table-column label="质保金比例(%)" align="center" prop="assuranceDepositRatio" />
<el-table-column label="付款比例(%)" align="center" prop="payRatio" />
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template #default="scope">
<!-- <el-tooltip content="修改" placement="top">
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
v-hasPermi="['ctr:expensesContract:edit']"></el-button>
</el-tooltip>
<el-tooltip content="删除" placement="top">
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
v-hasPermi="['ctr:expensesContract:remove']"></el-button>
</el-tooltip> -->
<el-tooltip content="查看附件列表" placement="top">
<el-button link type="primary" icon="View" @click="handleShowFileList(scope.row)">查看附件列表</el-button>
</el-tooltip>
<el-button link type="success" icon="View" @click="handleShowDetail(scope.row)">查看分包内容</el-button>
<el-button link type="primary" v-hasPermi="['ctr:expensesContract:query']" icon="View" @click="handleShowFileList(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" />
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
</el-card>
<!-- 添加或修改支出合同对话框 -->
<el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
@ -123,20 +86,33 @@
</template>
</el-dialog>
<FileList v-model="fileListVisible" :fileList="fileList" />
<el-dialog v-model="detailVisible" title="分包内容详情" width="45%">
<editor :model-value="detailContent" :min-height="192" readOnly placeholder="" />
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="detailVisible = false"> 关闭 </el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup name="ExpensesContract" lang="ts">
import { listExpensesContract, getExpensesContract, delExpensesContract, addExpensesContract, updateExpensesContract, getFileList } from '@/api/ctr/expensesContract';
import {
listExpensesContract,
getExpensesContract,
delExpensesContract,
addExpensesContract,
updateExpensesContract,
getFileList
} from '@/api/ctr/expensesContract';
import { ExpensesContractVO, ExpensesContractQuery, ExpensesContractForm } from '@/api/ctr/expensesContract/types';
import FileList from '@/components/FileList/index.vue';
import useUserStore from '@/store/modules/user';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { expenses_contract_type, income_contract_type } = toRefs(
proxy?.useDict('income_contract_type', 'expenses_contract_type')
);
const { expenses_contract_type, income_contract_type } = toRefs(proxy?.useDict('income_contract_type', 'expenses_contract_type'));
const expensesContractList = ref<ExpensesContractVO[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
@ -151,6 +127,8 @@ const userStore = useUserStore();
const queryFormRef = ref<ElFormInstance>();
const expensesContractFormRef = ref<ElFormInstance>();
const currentProject = computed(() => userStore.selectedProject);
const detailContent = ref('');
const detailVisible = ref(false); // 控制承包内容详情对话框的显示
const dialog = reactive<DialogOption>({
visible: false,
@ -166,8 +144,8 @@ const initFormData: ExpensesContractForm = {
contractedContent: undefined,
amount: undefined,
tenderId: undefined,
remark: undefined,
}
remark: undefined
};
const data = reactive<PageData<ExpensesContractForm, ExpensesContractQuery>>({
form: { ...initFormData },
queryParams: {
@ -180,16 +158,11 @@ const data = reactive<PageData<ExpensesContractForm, ExpensesContractQuery>>({
contractedContent: undefined,
amount: undefined,
tenderId: undefined,
params: {
}
params: {}
},
rules: {
id: [
{ required: true, message: "主键ID不能为空", trigger: "blur" }
],
projectId: [
{ required: true, message: "项目ID不能为空", trigger: "blur" }
],
id: [{ required: true, message: '主键ID不能为空', trigger: 'blur' }],
projectId: [{ required: true, message: '项目ID不能为空', trigger: 'blur' }]
}
});
@ -202,55 +175,55 @@ const getList = async () => {
expensesContractList.value = res.rows;
total.value = res.total;
loading.value = false;
}
};
/** 取消按钮 */
const cancel = () => {
reset();
dialog.visible = false;
}
};
/** 表单重置 */
const reset = () => {
form.value = { ...initFormData };
expensesContractFormRef.value?.resetFields();
}
};
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.value.pageNum = 1;
getList();
}
};
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value?.resetFields();
handleQuery();
}
};
/** 多选框选中数据 */
const handleSelectionChange = (selection: ExpensesContractVO[]) => {
ids.value = selection.map(item => item.id);
ids.value = selection.map((item) => item.id);
single.value = selection.length != 1;
multiple.value = !selection.length;
}
};
/** 新增按钮操作 */
const handleAdd = () => {
reset();
dialog.visible = true;
dialog.title = "添加支出合同";
}
dialog.title = '添加支出合同';
};
/** 修改按钮操作 */
const handleUpdate = async (row?: ExpensesContractVO) => {
reset();
const _id = row?.id || ids.value[0]
const _id = row?.id || ids.value[0];
const res = await getExpensesContract(_id);
Object.assign(form.value, res.data);
dialog.visible = true;
dialog.title = "修改支出合同";
}
dialog.title = '修改支出合同';
};
/** 提交按钮 */
const submitForm = () => {
@ -258,43 +231,51 @@ const submitForm = () => {
if (valid) {
buttonLoading.value = true;
if (form.value.id) {
await updateExpensesContract(form.value).finally(() => buttonLoading.value = false);
await updateExpensesContract(form.value).finally(() => (buttonLoading.value = false));
} else {
await addExpensesContract(form.value).finally(() => buttonLoading.value = false);
await addExpensesContract(form.value).finally(() => (buttonLoading.value = false));
}
proxy?.$modal.msgSuccess("操作成功");
proxy?.$modal.msgSuccess('操作成功');
dialog.visible = false;
await getList();
}
});
}
};
/** 删除按钮操作 */
const handleDelete = async (row?: ExpensesContractVO) => {
const _ids = row?.id || ids.value;
await proxy?.$modal.confirm('是否确认删除支出合同编号为"' + _ids + '"的数据项？').finally(() => loading.value = false);
await proxy?.$modal.confirm('是否确认删除支出合同编号为"' + _ids + '"的数据项？').finally(() => (loading.value = false));
await delExpensesContract(_ids);
proxy?.$modal.msgSuccess("删除成功");
proxy?.$modal.msgSuccess('删除成功');
await getList();
}
};
/** 导出按钮操作 */
const handleExport = () => {
proxy?.download('ctr/expensesContract/export', {
...queryParams.value
}, `expensesContract_${new Date().getTime()}.xlsx`)
}
proxy?.download(
'ctr/expensesContract/export',
{
...queryParams.value
},
`expensesContract_${new Date().getTime()}.xlsx`
);
};
// 查看附件列表操作
const handleShowFileList = async (row: ExpensesContractVO) => {
await getFileList({ contractId: row.id }).then(res => {
fileList.value = res.rows
fileListVisible.value = true;
}).catch(() => {
proxy?.$modal.error("获取文件列表失败");
});
}
await getFileList({ contractId: row.id })
.then((res) => {
fileList.value = res.rows;
fileListVisible.value = true;
})
.catch(() => {
proxy?.$modal.error('获取文件列表失败');
});
};
const handleShowDetail = (data) => {
detailContent.value = data.contractedContent;
detailVisible.value = true;
};
onMounted(() => {
getList();
});

211
src/views/ctr/incomeContract/index.vue
View File

@ -1,89 +1,65 @@
<template>
<div class="p-2">
<transition :enter-active-class="proxy?.animate.searchAnimate.enter"
:leave-active-class="proxy?.animate.searchAnimate.leave">
<div v-show="showSearch" class="mb-[10px]">
<el-card shadow="hover">
<el-card shadow="never">
<template #header>
<el-row :gutter="10" class="mb8">
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<!-- <el-form-item label="项目ID" prop="projectId">
<el-input v-model="queryParams.projectId" placeholder="请输入项目ID" clearable @keyup.enter="handleQuery" />
</el-form-item> -->
<el-form-item label="合同编号" prop="contractCode">
<el-input v-model="queryParams.contractCode" placeholder="请输入合同编号" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="业主单位" prop="contractOwner">
<el-input v-model="queryParams.contractOwner" placeholder="请输入业主单位" clearable
@keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="合同金额" prop="amount">
<el-input v-model="queryParams.amount" placeholder="请输入合同金额" clearable @keyup.enter="handleQuery" />
<el-input v-model="queryParams.contractOwner" 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"
v-hasPermi="['ctr:incomeContract:add']">新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()"
v-hasPermi="['ctr:incomeContract:edit']">修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()"
v-hasPermi="['ctr:incomeContract:remove']">删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="warning" plain icon="Download" @click="handleExport"
v-hasPermi="['ctr:incomeContract:export']">导出</el-button>
</el-col>-->
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
</template>
<el-table v-loading="loading" :data="incomeContractList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<!-- <el-table-column label="主键ID" align="center" prop="id" v-if="true" /> -->
<el-table-column type="index" width="50" label="序号" />
<!-- <el-table-column label="项目ID" align="center" prop="projectId" /> -->
<el-table-column label="合同编号" align="center" prop="contractCode" />
<el-table-column label="合同类型" align="center" prop="contractType">
<template #default="scope">
<dict-tag :options="income_contract_type" :value="scope.row.contractType" />
</template>
</el-table-column>
<el-table-column label="业主单位" align="center" prop="contractOwner" />
<el-table-column label="承包内容" align="center" prop="contractedContent" />
<el-table-column label="合同金额" align="center" prop="amount" />
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<el-table-column label="支付方式" align="center" prop="payType">
<template #default="scope">
<!-- <el-tooltip content="修改" placement="top">
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
v-hasPermi="['ctr:incomeContract:edit']"></el-button>
</el-tooltip>
<el-tooltip content="删除" placement="top">
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
v-hasPermi="['ctr:incomeContract:remove']"></el-button>
</el-tooltip> -->
<el-tooltip content="查看附件列表" placement="top">
<el-button link type="primary" icon="View" @click="handleShowFileList(scope.row)">查看附件列表</el-button>
</el-tooltip>
<el-tag type="success" v-if="scope.row.payType == '1'">月结算</el-tag>
<el-tag type="primary" v-else-if="scope.row.payType == '2'">形象节点</el-tag>
</template>
</el-table-column>
<el-table-column label="业主单位" align="center" prop="contractOwner" />
<el-table-column label="合同金额" align="center" prop="amount" />
<el-table-column label="预付款比例(%)" align="center" prop="advancePayRatio" />
<el-table-column label="尾款比例(%)" align="center" prop="balancePayRatio" />
<el-table-column label="质保金比例(%)" align="center" prop="assuranceDepositRatio" />
<el-table-column label="付款比例(%)" align="center" prop="payRatio" />
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
<template #default="scope">
<el-button
link
type="primary"
v-hasPermi="['ctr:incomeContract:edit']"
icon="edit"
@click="handleEdit(scope.row)"
v-if="scope.row.isUpdate"
>修改合同</el-button
>
<el-button link type="success" icon="View" @click="handleShowDetail(scope.row)">查看合同内容</el-button>
<el-button link type="primary" v-hasPermi="['ctr:incomeContract:query']" icon="View" @click="handleShowFileList(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" />
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
</el-card>
<!-- 添加或修改收入合同对话框 -->
<el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
@ -115,21 +91,39 @@
</template>
</el-dialog>
<FileList v-model="fileListVisible" :fileList="fileList" />
<el-dialog v-model="detailVisible" title="合同内容详情" width="45%">
<editor :model-value="detailContent" :min-height="192" readOnly placeholder="" />
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="detailVisible = false"> 关闭 </el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup name="IncomeContract" lang="ts">
import { listIncomeContract, getIncomeContract, delIncomeContract, addIncomeContract, updateIncomeContract, getFileList } from '@/api/ctr/incomeContract';
import {
listIncomeContract,
getIncomeContract,
delIncomeContract,
addIncomeContract,
updateIncomeContract,
getFileList,
getInfoByProjectId
} from '@/api/ctr/incomeContract';
import { IncomeContractVO, IncomeContractQuery, IncomeContractForm } from '@/api/ctr/incomeContract/types';
import FileList from '@/components/FileList/index.vue';
import useUserStore from '@/store/modules/user';
import { useRouter } from 'vue-router';
const { proxy } = getCurrentInstance();
const userStore = useUserStore();
const currentProject = computed(() => userStore.selectedProject);
const router = useRouter();
const { expenses_contract_type, income_contract_type } = toRefs(
proxy?.useDict('income_contract_type', 'expenses_contract_type')
);
const { expenses_contract_type, income_contract_type } = toRefs(proxy?.useDict('income_contract_type', 'expenses_contract_type'));
const incomeContractList = ref<IncomeContractVO[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
@ -146,7 +140,8 @@ const dialog = reactive<DialogOption>({
visible: false,
title: ''
});
const detailVisible = ref(false); // 控制承包内容详情对话框的显示
const detailContent = ref('');
const initFormData: IncomeContractForm = {
id: undefined,
projectId: undefined,
@ -155,8 +150,8 @@ const initFormData: IncomeContractForm = {
contractOwner: undefined,
contractedContent: undefined,
amount: undefined,
remark: undefined,
}
remark: undefined
};
const data = reactive<PageData<IncomeContractForm, IncomeContractQuery>>({
form: { ...initFormData },
queryParams: {
@ -168,16 +163,11 @@ const data = reactive<PageData<IncomeContractForm, IncomeContractQuery>>({
contractOwner: undefined,
contractedContent: undefined,
amount: undefined,
params: {
}
params: {}
},
rules: {
id: [
{ required: true, message: "主键ID不能为空", trigger: "blur" }
],
projectId: [
{ required: true, message: "项目ID不能为空", trigger: "blur" }
],
id: [{ required: true, message: '主键ID不能为空', trigger: 'blur' }],
projectId: [{ required: true, message: '项目ID不能为空', trigger: 'blur' }]
}
});
@ -190,55 +180,55 @@ const getList = async () => {
incomeContractList.value = res.rows;
total.value = res.total;
loading.value = false;
}
};
/** 取消按钮 */
const cancel = () => {
reset();
dialog.visible = false;
}
};
/** 表单重置 */
const reset = () => {
form.value = { ...initFormData };
incomeContractFormRef.value?.resetFields();
}
};
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.value.pageNum = 1;
getList();
}
};
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value?.resetFields();
handleQuery();
}
};
/** 多选框选中数据 */
const handleSelectionChange = (selection: IncomeContractVO[]) => {
ids.value = selection.map(item => item.id);
ids.value = selection.map((item) => item.id);
single.value = selection.length != 1;
multiple.value = !selection.length;
}
};
/** 新增按钮操作 */
const handleAdd = () => {
reset();
dialog.visible = true;
dialog.title = "添加收入合同";
}
dialog.title = '添加收入合同';
};
/** 修改按钮操作 */
const handleUpdate = async (row?: IncomeContractVO) => {
reset();
const _id = row?.id || ids.value[0]
const _id = row?.id || ids.value[0];
const res = await getIncomeContract(_id);
Object.assign(form.value, res.data);
dialog.visible = true;
dialog.title = "修改收入合同";
}
dialog.title = '修改收入合同';
};
/** 提交按钮 */
const submitForm = () => {
@ -246,44 +236,63 @@ const submitForm = () => {
if (valid) {
buttonLoading.value = true;
if (form.value.id) {
await updateIncomeContract(form.value).finally(() => buttonLoading.value = false);
await updateIncomeContract(form.value).finally(() => (buttonLoading.value = false));
} else {
await addIncomeContract(form.value).finally(() => buttonLoading.value = false);
await addIncomeContract(form.value).finally(() => (buttonLoading.value = false));
}
proxy?.$modal.msgSuccess("操作成功");
proxy?.$modal.msgSuccess('操作成功');
dialog.visible = false;
await getList();
}
});
}
};
/** 删除按钮操作 */
const handleDelete = async (row?: IncomeContractVO) => {
const _ids = row?.id || ids.value;
await proxy?.$modal.confirm('是否确认删除收入合同编号为"' + _ids + '"的数据项？').finally(() => loading.value = false);
await proxy?.$modal.confirm('是否确认删除收入合同编号为"' + _ids + '"的数据项？').finally(() => (loading.value = false));
await delIncomeContract(_ids);
proxy?.$modal.msgSuccess("删除成功");
proxy?.$modal.msgSuccess('删除成功');
await getList();
}
};
/** 导出按钮操作 */
const handleExport = () => {
proxy?.download('ctr/incomeContract/export', {
...queryParams.value
}, `incomeContract_${new Date().getTime()}.xlsx`)
}
proxy?.download(
'ctr/incomeContract/export',
{
...queryParams.value
},
`incomeContract_${new Date().getTime()}.xlsx`
);
};
// 查看附件列表操作
const handleShowFileList = async (row: IncomeContractVO) => {
console.log(row.id);
await getFileList({ contractId: row.id }).then(res => {
fileList.value = res.rows
fileListVisible.value = true;
}).catch(() => {
proxy?.$modal.error("获取文件列表失败");
});
await getFileList({ contractId: row.id })
.then((res) => {
fileList.value = res.rows;
fileListVisible.value = true;
})
.catch(() => {
proxy?.$modal.error('获取文件列表失败');
});
};
const handleEdit = (row: IncomeContractVO) => {
// console.log(router);
}
router.push({
path: '/ctr/update',
query: {
id: row.id
}
});
};
const handleShowDetail = (data) => {
detailContent.value = data.contractedContent;
detailVisible.value = true;
};
onMounted(() => {
getList();
});

725
src/views/ctr/index.vue
View File

@ -1,408 +1,439 @@
<template>
<div class="container">
<el-steps style="max-width: 100%" :active="active" finish-status="success" align-center>
<el-step title="选择合同类型" />
<el-step title="录入合同内容" />
<el-step title="录入收款方式" />
</el-steps>
<div class="content">
<template v-if="active == 0">
<div>
<el-button type="success" size="large" @click="checkContractType('income')">收入合同</el-button>
<el-button type="primary" size="large" @click="checkContractType('expenses')">支出合同</el-button>
</div>
</template>
<template v-else-if="active == 1">
<h1>{{ contract_type == "income" ? "收入合同" : "支出合同" }}</h1>
<template v-if="contract_type == 'income'">
<el-form ref="incomeContractFormRef" :model="form" :rules="incomeContractFormRules"
label-width="80px">
<!-- <el-form-item label="项目名称">
<div class="container">
<el-steps style="max-width: 100%" :active="active" finish-status="success" align-center>
<el-step title="选择合同类型" />
<el-step title="录入合同内容" />
<el-step title="录入收款方式" />
</el-steps>
<div class="content">
<template v-if="active == 0">
<div>
<el-button type="success" size="large" @click="checkContractType('income')">收入合同</el-button>
<el-button type="primary" size="large" @click="checkContractType('expenses')">支出合同</el-button>
</div>
</template>
<template v-else-if="active == 1">
<h1>{{ contract_type == 'income' ? '收入合同' : '支出合同' }}</h1>
<template v-if="contract_type == 'income'">
<el-form ref="incomeContractFormRef" :model="form" :rules="incomeContractFormRules" label-width="80px">
<!-- <el-form-item label="项目名称">
<el-input :model-value="project.name" disabled />
</el-form-item> -->
<el-form-item label="合同编号" prop="contractCode">
<el-input v-model="form.contractCode" placeholder="请输入合同编号" />
</el-form-item>
<el-form-item label="合同类型" prop="contractType">
<el-select v-model="form.contractType" placeholder="请选择合同类型">
<el-option v-for="item in income_contract_type" :key="item.value" :label="item.label"
:value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="业主单位" prop="contractOwner">
<el-input v-model="form.contractOwner" placeholder="请输入业主单位" />
</el-form-item>
<el-form-item label="承包内容">
<editor v-model="form.contractedContent" :min-height="192" />
</el-form-item>
<el-form-item label="合同金额" prop="amount">
<el-input v-model="form.amount" placeholder="请输入合同金额"
oninput="value=value.replace(/[^0-9.]/g,'').replace(/\.{2,}/g,'.').replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')" />
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" placeholder="请输入备注" />
</el-form-item>
<el-form-item label="附件">
<FileUpload :multiple="true" :fileType="['pdf']" :onUploadSuccess="onUploadSuccess"
:ref="fileRef" :defaultFileList="tempFileList" />
</el-form-item>
</el-form>
</template>
<template v-else-if="contract_type == 'expenses'">
<el-form ref="expensesContractFormRef" :model="form" :rules="expensesContractFormRules"
label-width="80px">
<!-- <el-form-item label="项目名称">
<el-form-item label="合同编号" prop="contractCode">
<el-input v-model="form.contractCode" placeholder="请输入合同编号" />
</el-form-item>
<el-form-item label="合同类型" prop="contractType">
<el-select v-model="form.contractType" placeholder="请选择合同类型">
<el-option v-for="item in income_contract_type" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="业主单位" prop="contractOwner">
<el-input disabled v-model="form.contractOwner" placeholder="请输入业主单位" />
</el-form-item>
<el-form-item label="承包内容" v-if="contract_type !== 'income'">
<editor v-model="form.contractedContent" :min-height="192" />
</el-form-item>
<el-form-item label="合同内容" v-else>
<editor v-model="form.contractedContent" :min-height="192" />
</el-form-item>
<el-form-item label="合同金额" prop="amount">
<el-input
v-model="form.amount"
placeholder="请输入合同金额"
oninput="value=value.replace(/[^0-9.]/g,'').replace(/\.{2,}/g,'.').replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')"
/>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" placeholder="请输入备注" />
</el-form-item>
<el-form-item label="附件">
<FileUpload :multiple="true" :fileType="['pdf']" :onUploadSuccess="onUploadSuccess" :ref="fileRef" :defaultFileList="tempFileList" />
</el-form-item>
</el-form>
</template>
<template v-else-if="contract_type == 'expenses'">
<el-form ref="expensesContractFormRef" :model="form" :rules="expensesContractFormRules" label-width="80px">
<!-- <el-form-item label="项目名称">
<el-input :model-value="projectName" placeholder="请输入项目ID" disabled />
</el-form-item> -->
<el-form-item label="合同编号" prop="contractCode">
<el-input v-model="form.contractCode" placeholder="请输入合同编号" />
</el-form-item>
<el-form-item label="合同类型" prop="contractType">
<el-select v-model="form.contractType" placeholder="请选择合同类型">
<el-option v-for="item in expenses_contract_type" :key="item.value" :label="item.label"
:value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="招标计划" prop="tenderId">
<!-- <el-input v-model="form.tenderId" placeholder="请输入招标Id" /> -->
<el-input v-model="form.name" placeholder="请选择招标计划" disabled />
<el-button type="primary" @click="handleChoose">选择招标</el-button>
</el-form-item>
<el-form-item label="供应商" prop="contractSupplier">
<el-input v-model="form.contractSupplier" placeholder="请输入供应商" disabled />
</el-form-item>
<el-form-item label="分包内容">
<!-- <editor v-model="form.contractedContent" :min-height="192" disabled /> -->
<el-input v-model="form.contractedContent" style="width: 300px"
:autosize="{ minRows: 2, maxRows: 4 }" type="textarea" disabled />
</el-form-item>
<el-form-item label="合同金额" prop="amount">
<el-input
oninput="value=value.replace(/[^0-9.]/g,'').replace(/\.{2,}/g,'.').replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')"
v-model="form.amount" placeholder="请输入合同金额" disabled />
</el-form-item>
<el-form-item label="合同编号" prop="contractCode">
<el-input v-model="form.contractCode" placeholder="请输入合同编号" />
</el-form-item>
<el-form-item label="合同类型" prop="contractType">
<el-select v-model="form.contractType" placeholder="请选择合同类型">
<el-option v-for="item in expenses_contract_type" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="招标计划" prop="tenderId">
<!-- <el-input v-model="form.tenderId" placeholder="请输入招标Id" /> -->
<el-input v-model="form.name" placeholder="请选择招标计划" disabled />
<el-button type="primary" @click="handleChoose" v-hasPermi="['ctr:expensesContract:tenderList']">选择招标</el-button>
</el-form-item>
<el-form-item label="供应商" prop="contractSupplier">
<el-input v-model="form.contractSupplier" placeholder="请输入供应商" disabled />
</el-form-item>
<el-form-item label="分包内容">
<!-- <editor v-model="form.contractedContent" :min-height="192" disabled /> -->
<el-input v-model="form.contractedContent" style="width: 300px" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" disabled />
</el-form-item>
<el-form-item label="合同金额" prop="amount">
<el-input
oninput="value=value.replace(/[^0-9.]/g,'').replace(/\.{2,}/g,'.').replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')"
v-model="form.amount"
placeholder="请输入合同金额"
disabled
/>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" placeholder="请输入备注" />
</el-form-item>
<el-form-item label="附件">
<FileUpload :multiple="true" :fileType="['pdf']" :onUploadSuccess="onUploadSuccess"
:ref="fileRef" :defaultFileList="tempFileList" />
</el-form-item>
</el-form>
</template>
<div>
<el-button @click="back(true)">上一步</el-button>
<el-button type="primary" @click="next">下一步</el-button>
</div>
</template>
<template v-else-if="active == 2">
<h1>{{ contract_type == "income" ? "收入合同" : "支出合同" }}</h1>
<el-form :model="form" :rules="payMentRules" label-width="150" ref="payMentRef">
<el-form-item label="支付方式" placeholder="请选择支付方式" prop="payType">
<el-select v-model="form.payType">
<el-option :value="1" label="月结算">月结算</el-option>
<el-option :value="2" label="形象节点">形象节点</el-option>
</el-select>
</el-form-item>
<el-form-item label="预付款比例（%）" prop="advancePayRatio">
<el-input v-model="form.advancePayRatio" placeholder="请输入预付款比例"
oninput="value=value.replace(/[^0-9.]/g,'').replace(/\.{2,}/g,'.').replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')" />
</el-form-item>
<el-form-item label="尾款比例（%）" prop="balancePayRatio">
<el-input v-model="form.balancePayRatio" placeholder="请输入尾款比例"
oninput="value=value.replace(/[^0-9.]/g,'').replace(/\.{2,}/g,'.').replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')" />
</el-form-item>
<el-form-item label="质保金比例（%）" prop="assuranceDepositRatio;">
<el-input v-model="form.assuranceDepositRatio" placeholder="请输入质保金比例"
oninput="value=value.replace(/[^0-9.]/g,'').replace(/\.{2,}/g,'.').replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')" />
</el-form-item>
<el-form-item label="付款比例（%）" prop="payRatio">
<el-input v-model="form.payRatio" placeholder="请输入付款比例"
oninput="value=value.replace(/[^0-9.]/g,'').replace(/\.{2,}/g,'.').replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')" />
</el-form-item>
<el-form-item>
<div>
<el-button @click="back(false)">上一步</el-button>
<el-button type="success" @click="submitForm">提交</el-button>
</div>
</el-form-item>
</el-form>
</template>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" placeholder="请输入备注" />
</el-form-item>
<el-form-item label="合同附件">
<FileUpload :multiple="true" :fileType="['pdf']" :onUploadSuccess="onUploadSuccess" :ref="fileRef" :defaultFileList="tempFileList" />
</el-form-item>
</el-form>
</template>
<div>
<el-button @click="back(true)">上一步</el-button>
<el-button type="primary" @click="next">下一步</el-button>
</div>
<el-dialog v-model="dialogVisible" title="选择招标计划" width="45%">
<el-table :data="planList">
<el-table-column type="index" width="50" label="序号" />
<el-table-column label="名称" align="center" prop="name" />
<el-table-column label="合同额" align="center" prop="contractPrice" />
<el-table-column label="分包内容" align="center" prop="content" />
<el-table-column label="中标单位" align="center" prop="winningBidder" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template #default="scope">
<el-button type="primary" @click="handleChooseData(scope.row)">选择</el-button>
</template>
</el-table-column>
</el-table>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="dialogVisible = false">
关闭
</el-button>
</div>
</template>
</el-dialog>
</template>
<template v-else-if="active == 2">
<h1>{{ contract_type == 'income' ? '收入合同' : '支出合同' }}</h1>
<el-form :model="form" :rules="payMentRules" label-width="150" ref="payMentRef">
<el-form-item label="支付方式" placeholder="请选择支付方式" prop="payType">
<el-select v-model="form.payType">
<el-option :value="1" label="月结算">月结算</el-option>
<el-option :value="2" label="形象节点">形象节点</el-option>
</el-select>
</el-form-item>
<el-form-item label="预付款比例（%）" prop="advancePayRatio">
<el-input-number v-model="form.advancePayRatio" :max="100" :min="0" />
</el-form-item>
<el-form-item label="尾款比例（%）" prop="balancePayRatio">
<el-input-number v-model="form.balancePayRatio" :max="100" :min="0" />
</el-form-item>
<el-form-item label="质保金比例（%）" prop="assuranceDepositRatio">
<el-input-number v-model="form.assuranceDepositRatio" :max="100" :min="0" />
</el-form-item>
<el-form-item label="付款比例（%）" prop="payRatio">
<el-input-number v-model="payRatioComputed" disabled />
</el-form-item>
<el-form-item>
<div>
<el-button @click="back(false)">上一步</el-button>
<el-button type="success" @click="submitForm">提交</el-button>
</div>
</el-form-item>
</el-form>
</template>
</div>
<el-dialog v-model="dialogVisible" title="选择招标计划" width="45%">
<el-table :data="planList">
<el-table-column type="index" width="50" label="序号" />
<el-table-column label="名称" align="center" prop="name" />
<el-table-column label="合同额" align="center" prop="contractPrice" />
<el-table-column label="分包内容" align="center" prop="content" />
<el-table-column label="中标单位" align="center" prop="winningBidder" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template #default="scope">
<el-button type="primary" @click="handleChooseData(scope.row)">选择</el-button>
</template>
</el-table-column>
</el-table>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="dialogVisible = false"> 关闭 </el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup>
import FileUpload from '@/components/FileUpload';
import { listExpensesContract, getExpensesContract, delExpensesContract, addExpensesContract, updateExpensesContract, getTenderPlan } from '@/api/ctr/expensesContract';
import { listIncomeContract, getIncomeContract, delIncomeContract, addIncomeContract, updateIncomeContract } from '@/api/ctr/incomeContract';
import { addExpensesContract, getTenderPlan } from '@/api/ctr/expensesContract';
import { addIncomeContract, getInfoByProjectId } from '@/api/ctr/incomeContract';
import { useUserStore } from '@/store/modules/user';
const active = ref(0);
const contract_type = ref("")
const form = ref({ payType: 1 })
const fileList = ref([])
const tempFileList = ref([])
const contract_type = ref('');
const form = ref({ payType: 1 });
const fileList = ref([]);
const tempFileList = ref([]);
const { proxy } = getCurrentInstance();
const userStore = useUserStore();
const planList = ref([]);
const dialogVisible = ref(false);
const { expenses_contract_type, income_contract_type } = toRefs(
proxy?.useDict('income_contract_type', 'expenses_contract_type')
);
const { expenses_contract_type, income_contract_type } = toRefs(proxy?.useDict('income_contract_type', 'expenses_contract_type'));
const fileRef = ref(null);
const incomeContractFormRef = ref(null);
const expensesContractFormRef = ref(null);
const payMentRef = ref(null);
const incomeContractFormRules = {
contractCode: [{ required: true, message: '请输入合同编号', trigger: 'blur' }],
contractType: [{ required: true, message: '请选择合同类型', trigger: 'change' }],
contractOwner: [{ required: true, message: '请输入业主单位', trigger: 'blur' }],
amount: [{ required: true, message: '请输入合同金额', trigger: 'blur' }],
remark: [{ required: false, message: '请输入备注', trigger: 'blur' }],
contractCode: [{ required: true, message: '请输入合同编号', trigger: 'blur' }],
contractType: [{ required: true, message: '请选择合同类型', trigger: 'change' }],
contractOwner: [{ required: true, message: '请输入业主单位', trigger: 'blur' }],
amount: [{ required: true, message: '请输入合同金额', trigger: 'blur' }],
remark: [{ required: false, message: '请输入备注', trigger: 'blur' }]
};
const expensesContractFormRules = {
contractCode: [{ required: true, message: '请输入合同编号', trigger: 'blur' }],
contractType: [{ required: true, message: '请选择合同类型', trigger: 'change' }],
contractCode: [{ required: true, message: '请输入合同编号', trigger: 'blur' }],
contractType: [{ required: true, message: '请选择合同类型', trigger: 'change' }],
contractSupplier: [{ required: true, message: '请输入供应商', trigger: 'blur' }],
amount: [{ required: true, message: '请输入合同金额', trigger: 'blur' }],
tenderId: [{ required: true, message: '请选择招标计划', trigger: 'blur' }],
contractSupplier: [{ required: true, message: '请输入供应商', trigger: 'blur' }],
amount: [{ required: true, message: '请输入合同金额', trigger: 'blur' }],
tenderId: [{ required: true, message: '请选择招标计划', trigger: 'blur' }],
remark: [{ required: false, message: '请输入备注', trigger: 'blur' }],
remark: [{ required: false, message: '请输入备注', trigger: 'blur' }]
};
const payMentRules = {
payType: [{ required: true, message: '请选择支付方式', trigger: 'change' }],
advancePayRatio: [{ required: true, message: '请输入预付款比例', trigger: 'blur' }],
balancePayRatio: [{ required: true, message: '请输入尾款比例', trigger: 'blur' }],
assuranceDepositRatio: [{ required: true, message: '请输入质保金比例', trigger: 'blur' }],
payRatio: [{ required: true, message: '请输入付款比例', trigger: 'blur' }],
payType: [{ required: true, message: '请选择支付方式', trigger: 'change' }],
advancePayRatio: [{ required: true, message: '请输入预付款比例', trigger: 'blur' }],
balancePayRatio: [{ required: true, message: '请输入尾款比例', trigger: 'blur' }],
assuranceDepositRatio: [{ required: true, message: '请输入质保金比例', trigger: 'blur' }]
};
const project = computed(() => {
console.log(111);
console.log(111);
return JSON.parse(localStorage.getItem("selectedProject"))
return JSON.parse(localStorage.getItem('selectedProject'));
});
const payRatioComputed = computed({
get: () => {
const { advancePayRatio = 0, balancePayRatio = 0, assuranceDepositRatio = 0 } = form.value;
const total = 100 - (advancePayRatio + balancePayRatio + assuranceDepositRatio);
// form.value.payRatio = total;
return total;
},
// 只读
set: () => {}
});
const checkContractType = (type) => {
contract_type.value = type;
form.value.contract_type = type;
active.value = 1;
form.value.step = active.value;
contract_type.value = type;
form.value.contract_type = type;
active.value = 1;
form.value.step = active.value;
};
const onUploadSuccess = (data) => {
fileList.value = data
}
fileList.value = data;
};
const back = async (reset) => {
console.log(active.value);
console.log(active.value);
if (reset) {
await ElMessageBox.confirm('返回上一步将清空目前填写的内容，确定返回？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}).then(() => {
resetForm();
active.value--;
}).catch(() => {
return;
});
} else {
if (reset) {
await ElMessageBox.confirm('返回上一步将清空目前填写的内容，确定返回？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
resetForm();
active.value--;
}
console.log(active.value);
form.value.step = active.value;
})
.catch(() => {
return;
});
} else {
active.value--;
}
console.log(active.value);
form.value.step = active.value;
};
const next = async () => {
if (contract_type.value === 'income') {
await incomeContractFormRef.value.validate((valid) => {
if (valid) {
active.value++;
} else {
ElMessage.error('请填写完整的收入合同信息');
}
});
} else if (contract_type.value === 'expenses') {
await expensesContractFormRef.value.validate((valid) => {
if (valid) {
active.value++;
} else {
ElMessage.error('请填写完整的支出合同信息');
}
});
}
console.log(active.value);
if (contract_type.value === 'income') {
await incomeContractFormRef.value.validate((valid) => {
if (valid) {
active.value++;
} else {
ElMessage.error('请填写完整的收入合同信息');
}
});
} else if (contract_type.value === 'expenses') {
await expensesContractFormRef.value.validate((valid) => {
if (valid) {
active.value++;
} else {
ElMessage.error('请填写完整的支出合同信息');
}
});
}
console.log(active.value);
form.value.step = active.value;
form.value.step = active.value;
};
const resetForm = () => {
form.value = {
payType: 1,
contractCode: '',
contractType: '',
contractOwner: '',
contractedContent: '',
amount: '',
remark: '',
advancePayRatio: '',
balancePayRatio: '',
assuranceDepositRatio: '',
payRatio: ''
};
fileList.value = [];
tempFileList.value = [];
contract_type.value = '';
setTimeout(() => {
localStorage.removeItem("tempContractForm");
}, 0);
form.value = {
payType: 1,
contractCode: '',
contractType: '',
contractOwner: '',
contractedContent: '',
amount: '',
remark: '',
advancePayRatio: '',
balancePayRatio: '',
assuranceDepositRatio: '',
payRatio: ''
};
fileList.value = [];
tempFileList.value = [];
contract_type.value = '';
setTimeout(() => {
localStorage.removeItem('tempContractForm');
}, 0);
};
const submitForm = async () => {
console.log(payMentRef.value);
await payMentRef.value.validate(async (valid) => {
if (valid) {
// 提交付款信息逻辑
console.log('提交付款信息', form.value, fileList.value);
// 这里可以调用API提交数据
form.value.projectId = project.value.id;
form.value.fileList = fileList.value.map((data) => {
return {
...data,
fileName: data.name,
fileUrl: data.url,
}
})
if (contract_type.value === 'income') {
await addIncomeContract({ ...form.value });
} else if (contract_type.value === 'expenses') {
await addExpensesContract({ ...form.value });
}
resetForm();
ElMessage.success('合同提交成功');
} else {
ElMessage.error('请填写完整的付款信息');
}
});
// if (contract_type.value === 'income') {
// const incomeContractFormRef = ref(null);
// await incomeContractFormRef.value.validate(async (valid) => {
// if (valid) {
// // 提交收入合同逻辑
// console.log('提交收入合同', form.value, fileList.value);
// // 这里可以调用API提交数据
// resetForm();
// ElMessage.success('收入合同提交成功');
// } else {
// ElMessage.error('请填写完整的收入合同信息');
// }
// });
// } else if (contract_type.value === 'expenses') {
// const expensesContractFormRef = ref(null);
// await expensesContractFormRef.value.validate(async (valid) => {
// if (valid) {
// // 提交支出合同逻辑
// console.log('提交支出合同', form.value, fileList.value);
// // 这里可以调用API提交数据
// resetForm();
// ElMessage.success('支出合同提交成功');
// } else {
// ElMessage.error('请填写完整的支出合同信息');
// }
// });
// }
}
const handleChoose = async () => {
if (!form.value.contractType) {
ElMessage.error('请先选择合同类型');
await payMentRef.value.validate(async (valid) => {
if (valid) {
if (payRatioComputed.value < 0) {
ElMessage.error('四项付款比例之和必须等于100%');
return;
}
const formData = {
projectId: userStore.selectedProject.id,
dictName: form.value.contractType,
status: 1,
}
const { data } = await getTenderPlan(formData)
if (data.length === 0) {
ElMessage.warning('当前没有招标计划，请先创建招标计划');
return;
}
planList.value = data
dialogVisible.value = true;
}
form.value.payRatio = payRatioComputed.value;
}
const handleChooseData = (row) => {
form.value.tenderId = row.id;
form.value.name = row.name;
form.value.contractPrice = row.contractPrice;
form.value.content = row.content;
form.value.winningBidder = row.winningBidder;
dialogVisible.value = false;
// 提交付款信息逻辑
console.log('提交付款信息', form.value, fileList.value);
// 这里可以调用API提交数据
form.value.projectId = project.value.id;
form.value.fileList = fileList.value.map((data) => {
return {
...data,
fileName: data.name,
fileUrl: data.url
};
});
if (contract_type.value === 'income') {
await addIncomeContract({ ...form.value });
} else if (contract_type.value === 'expenses') {
await addExpensesContract({ ...form.value });
}
resetForm();
ElMessage.success('合同提交成功');
active.value = 0; // 重置步骤
if (contract_type.value === 'income') {
proxy.$router.push('/ctr/incomeContract');
} else {
proxy.$router.push('/ctr/expensesContract');
}
} else {
ElMessage.error('请填写完整的付款信息');
}
});
// if (contract_type.value === 'income') {
// const incomeContractFormRef = ref(null);
// await incomeContractFormRef.value.validate(async (valid) => {
// if (valid) {
// // 提交收入合同逻辑
// console.log('提交收入合同', form.value, fileList.value);
// // 这里可以调用API提交数据
// resetForm();
// ElMessage.success('收入合同提交成功');
// } else {
// ElMessage.error('请填写完整的收入合同信息');
// }
// });
// } else if (contract_type.value === 'expenses') {
// const expensesContractFormRef = ref(null);
// await expensesContractFormRef.value.validate(async (valid) => {
// if (valid) {
// // 提交支出合同逻辑
// console.log('提交支出合同', form.value, fileList.value);
// // 这里可以调用API提交数据
// resetForm();
// ElMessage.success('支出合同提交成功');
// } else {
// ElMessage.error('请填写完整的支出合同信息');
// }
// });
// }
};
const handleChoose = async () => {
if (!form.value.contractType) {
ElMessage.error('请先选择合同类型');
return;
}
const formData = {
projectId: userStore.selectedProject.id,
dictName: form.value.contractType,
status: 1
};
const { data } = await getTenderPlan(formData);
if (data.length === 0) {
ElMessage.warning('当前没有招标计划，请先创建招标计划');
return;
}
planList.value = data;
dialogVisible.value = true;
};
const handleChooseData = (row) => {
form.value.tenderId = row.id;
form.value.name = row.name;
// form.value.contractPrice = row.contractPrice;
form.value.content = row.content;
form.value.contractSupplier = row.winningBidder;
form.value.amount = row.contractPrice;
dialogVisible.value = false;
};
watch(
form,
(val) => {
localStorage.setItem('tempContractForm', JSON.stringify({ ...val, fileList: fileList.value }));
},
{ deep: true }
);
watch(
fileList,
(val) => {
localStorage.setItem('tempContractForm', JSON.stringify({ ...form.value, fileList: val }));
},
{ deep: true }
);
// 获取投标列表
const getInfoByProjectIdList = async () => {
const res = await getInfoByProjectId({ projectId: userStore.selectedProject.id });
console.log(res);
form.value.contractOwner = res.data.planDuration;
};
watch(form, (val) => {
localStorage.setItem("tempContractForm", JSON.stringify({ ...val, fileList: fileList.value }));
}, { deep: true });
watch(fileList, (val) => {
localStorage.setItem("tempContractForm", JSON.stringify({ ...form.value, fileList: val }));
}, { deep: true });
onMounted(() => {
const tempForm = localStorage.getItem("tempContractForm");
if (tempForm) {
ElMessageBox.confirm('检测到有未完成的合同录入，是否继续？', '提示', {
confirmButtonText: '继续',
cancelButtonText: '取消',
type: 'warning',
}).then(() => {
const t = JSON.parse(tempForm);
const { fileList: files, ...rest } = JSON.parse(tempForm);
form.value = rest;
fileList.value = files || [];
tempFileList.value = files || [];
contract_type.value = form.value.contract_type;
active.value = form.value.step || 0;
getInfoByProjectIdList();
}).catch(() => {
localStorage.removeItem("tempContractForm");
});
}
const tempForm = localStorage.getItem('tempContractForm');
if (tempForm) {
ElMessageBox.confirm('检测到有未完成的合同录入，是否继续？', '提示', {
confirmButtonText: '继续',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
const t = JSON.parse(tempForm);
const { fileList: files, ...rest } = JSON.parse(tempForm);
form.value = rest;
fileList.value = files || [];
tempFileList.value = files || [];
contract_type.value = form.value.contract_type;
active.value = form.value.step || 0;
})
.catch(() => {
localStorage.removeItem('tempContractForm');
});
}
});
</script>
<style scoped lang="scss">
.container {
padding: 20px;
padding: 20px;
.content {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 30px;
flex-direction: column;
}
.content {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 30px;
flex-direction: column;
}
}
</style>

234
src/views/ctr/update/index.vue Normal file
View File

@ -0,0 +1,234 @@
<template>
<div class="container">
<el-steps style="max-width: 100%" :active="active" finish-status="success" align-center>
<el-step title="选择合同类型" />
<el-step title="修改合同内容" />
<el-step title="修改收款方式" />
</el-steps>
<div class="content">
<template v-if="active == 1">
<h1>修改收入合同</h1>
<el-form ref="incomeContractFormRef" :model="form" :rules="incomeContractFormRules" label-width="80px">
<el-form-item label="合同编号" prop="contractCode">
<el-input v-model="form.contractCode" placeholder="请输入合同编号" />
</el-form-item>
<el-form-item label="合同类型" prop="contractType">
<el-select v-model="form.contractType" placeholder="请选择合同类型">
<el-option v-for="item in income_contract_type" :key="item.value" :label="item.label"
:value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="业主单位" prop="contractOwner">
<el-input v-model="form.contractOwner" placeholder="请输入业主单位" disabled />
</el-form-item>
<el-form-item label="承包内容" v-if="contract_type !== 'income'">
<editor v-model="form.contractedContent" :min-height="192" />
</el-form-item>
<el-form-item label="合同内容" v-else>
<editor v-model="form.contractedContent" :min-height="192" />
</el-form-item>
<el-form-item label="合同金额" prop="amount">
<el-input v-model="form.amount" placeholder="请输入合同金额"
oninput="value=value.replace(/[^0-9.]/g,'').replace(/\.{2,}/g,'.').replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')" />
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" placeholder="请输入备注" />
</el-form-item>
<el-form-item label="附件">
<FileUpload :multiple="true" :fileType="['pdf']" :onUploadSuccess="onUploadSuccess"
:ref="fileRef" :defaultFileList="tempFileList" />
</el-form-item>
</el-form>
<div>
<el-button type="primary" @click="next">下一步</el-button>
</div>
</template>
<template v-else-if="active == 2">
<h1>修改收入合同</h1>
<el-form :model="form" :rules="payMentRules" label-width="150" ref="payMentRef">
<el-form-item label="支付方式" placeholder="请选择支付方式" prop="payType">
<el-select v-model="form.payType">
<el-option :value="1" label="月结算">月结算</el-option>
<el-option :value="2" label="形象节点">形象节点</el-option>
</el-select>
</el-form-item>
<el-form-item label="预付款比例（%）" prop="advancePayRatio">
<el-input-number v-model="form.advancePayRatio" :max="100" :min="0" />
</el-form-item>
<el-form-item label="尾款比例（%）" prop="balancePayRatio">
<el-input-number v-model="form.balancePayRatio" :max="100" :min="0" />
</el-form-item>
<el-form-item label="质保金比例（%）" prop="assuranceDepositRatio">
<el-input-number v-model="form.assuranceDepositRatio" :max="100" :min="0" />
</el-form-item>
<el-form-item label="付款比例（%）" prop="payRatio">
<el-input-number v-model="payRatioComputed" disabled />
</el-form-item>
<el-form-item>
<div>
<el-button @click="back(false)">上一步</el-button>
<el-button type="success" @click="submitForm">提交</el-button>
</div>
</el-form-item>
</el-form>
</template>
</div>
</div>
</template>
<script setup>
import FileUpload from '@/components/FileUpload';
import { getTenderPlan } from '@/api/ctr/expensesContract';
import { updateIncomeContract } from '@/api/ctr/incomeContract';
import { useUserStore } from '@/store/modules/user';
const active = ref(1);
const contract_type = ref('income');
const form = ref({ payType: 1 });
const fileList = ref([]);
const tempFileList = ref([]);
const { proxy } = getCurrentInstance();
const userStore = useUserStore();
const planList = ref([]);
const dialogVisible = ref(false);
const { income_contract_type } = toRefs(proxy?.useDict('income_contract_type', 'expenses_contract_type'));
const fileRef = ref(null);
const incomeContractFormRef = ref(null);
const expensesContractFormRef = ref(null);
const payMentRef = ref(null);
const incomeContractFormRules = {
contractCode: [{ required: true, message: '请输入合同编号', trigger: 'blur' }],
contractType: [{ required: true, message: '请选择合同类型', trigger: 'change' }],
contractOwner: [{ required: true, message: '请输入业主单位', trigger: 'blur' }],
amount: [{ required: true, message: '请输入合同金额', trigger: 'blur' }],
remark: [{ required: false, message: '请输入备注', trigger: 'blur' }]
};
const expensesContractFormRules = {
contractCode: [{ required: true, message: '请输入合同编号', trigger: 'blur' }],
contractType: [{ required: true, message: '请选择合同类型', trigger: 'change' }],
contractSupplier: [{ required: true, message: '请输入供应商', trigger: 'blur' }],
amount: [{ required: true, message: '请输入合同金额', trigger: 'blur' }],
tenderId: [{ required: true, message: '请选择招标计划', trigger: 'blur' }],
remark: [{ required: false, message: '请输入备注', trigger: 'blur' }]
};
const payMentRules = {
payType: [{ required: true, message: '请选择支付方式', trigger: 'change' }],
advancePayRatio: [{ required: true, message: '请输入预付款比例', trigger: 'blur' }],
balancePayRatio: [{ required: true, message: '请输入尾款比例', trigger: 'blur' }],
assuranceDepositRatio: [{ required: true, message: '请输入质保金比例', trigger: 'blur' }]
};
const project = computed(() => {
return JSON.parse(localStorage.getItem('selectedProject'));
});
const payRatioComputed = computed({
get: () => {
const { advancePayRatio = 0, balancePayRatio = 0, assuranceDepositRatio = 0 } = form.value;
const total = 100 - (advancePayRatio + balancePayRatio + assuranceDepositRatio);
// form.value.payRatio = total;
return total;
},
// 只读
set: () => { }
});
const onUploadSuccess = (data) => {
fileList.value = data;
};
const next = async () => {
if (contract_type.value === 'income') {
await incomeContractFormRef.value.validate((valid) => {
if (valid) {
active.value++;
} else {
ElMessage.error('请填写完整的收入合同信息');
}
});
} else if (contract_type.value === 'expenses') {
await expensesContractFormRef.value.validate((valid) => {
if (valid) {
active.value++;
} else {
ElMessage.error('请填写完整的支出合同信息');
}
});
}
console.log(active.value);
form.value.step = active.value;
};
const submitForm = async () => {
await payMentRef.value.validate(async (valid) => {
if (valid) {
if (payRatioComputed.value < 0) {
ElMessage.error('四项付款比例之和必须等于100%');
return;
}
form.value.payRatio = payRatioComputed.value;
// 提交付款信息逻辑
console.log('提交付款信息', form.value, fileList.value);
// 这里可以调用API提交数据
form.value.projectId = project.value.id;
form.value.fileList = fileList.value.map((data) => {
return {
...data,
fileName: data.name,
fileUrl: data.url
};
});
if (contract_type.value === 'income') {
await updateIncomeContract({ ...form.value });
}
ElMessage.success('合同修改成功');
} else {
ElMessage.error('请填写完整的付款信息');
}
});
};
const handleChoose = async () => {
if (!form.value.contractType) {
ElMessage.error('请先选择合同类型');
return;
}
const formData = {
projectId: userStore.selectedProject.id,
dictName: form.value.contractType,
status: 1
};
const { data } = await getTenderPlan(formData);
if (data.length === 0) {
ElMessage.warning('当前没有招标计划，请先创建招标计划');
return;
}
planList.value = data;
dialogVisible.value = true;
};
onMounted(async () => {
const id = route.query.id;
if (id) {
const { data } = await getIncomeContract(id);
form.value.id = data.id;
form.value.contractOwner = data.contractOwner
} else {
router.push('/ctr/incomeContract');
}
})
</script>
<style scoped lang="scss">
.container {
padding: 20px;
.content {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 30px;
flex-direction: column;
}
}
</style>

128
src/views/demo/components/1.html Normal file
View File

@ -0,0 +1,128 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入图标（这里用的是阿里图标库示例，实际可替换成自己的图标资源） -->
<link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4245527_xxxxxx.css">
<!-- <link rel="stylesheet" href="style.css"> -->
<style>
/* 初始化样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #eef5ff;
font-family: sans-serif;
}
/* 时间轴容器 */
.weather-timeline {
display: flex;
align-items: center;
background: #fff;
border-radius: 12px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
overflow-x: auto;
/* 适配小屏幕横向滚动 */
}
/* 每个时间项 */
.time-item {
display: flex;
flex-direction: column;
align-items: center;
margin: 0 12px;
min-width: 80px;
/* 保证 item 最小宽度 */
}
/* 当前时间项特殊样式 */
.time-item.current {
background: #e3f0ff;
border-radius: 8px;
padding: 10px;
transform: scale(1.1);
/* 稍微放大突出 */
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
/* 时间文本 */
.time {
font-size: 14px;
color: #333;
margin-bottom: 4px;
}
/* 温度文本 */
.temp {
font-size: 16px;
color: #666;
margin-bottom: 8px;
}
/* 图标样式（基于阿里图标库，可替换成自己的图标字体或图片） */
.iconfont {
font-size: 24px;
color: #f9b115;
/* 太阳/主色调 */
}
.icon-rain {
color: #9ec8f2;
/* 雨/蓝色系 */
}
.icon-cloud-moon {
color: #c9d6e5;
/* 多云 moon/浅灰蓝 */
}
</style>
<title>天气时间轴</title>
</head>
<body>
<div class="weather-timeline">
<div class="time-item">
<div class="time">16:00</div>
<div class="temp">30°C</div>
<i class="iconfont icon-sun"></i> <!-- 太阳图标 -->
</div>
<div class="time-item">
<div class="time">17:00</div>
<div class="temp">29°C</div>
<i class="iconfont icon-sun"></i>
</div>
<div class="time-item">
<div class="time">18:00</div>
<div class="temp">25°C</div>
<i class="iconfont icon-rain"></i> <!-- 小雨图标 -->
</div>
<div class="time-item current">
<div class="time">现在</div>
<div class="temp">25°C</div>
<i class="iconfont icon-rain"></i>
</div>
<div class="time-item">
<div class="time">20:00</div>
<div class="temp">25°C</div>
<i class="iconfont icon-cloud-moon"></i> <!-- 多云 moon 图标 -->
</div>
<div class="time-item">
<div class="time">21:00</div>
<div class="temp">20°C</div>
<i class="iconfont icon-cloud-moon"></i>
</div>
</div>
</body>
</html>

311
src/views/demo/components/ChartBox.vue Normal file
View File

@ -0,0 +1,311 @@
<template>
<div class="chart-container">
<!-- 图表标题和时间范围选择器 -->
<div class="chart-header">
<h2>功率与效率趋势</h2>
<div class="chart-actions">
<button @click="timeRange = 'day'" :class="{ active: timeRange === 'day' }">今日</button>
<button @click="timeRange = 'week'" :class="{ active: timeRange === 'week' }">本周</button>
<button @click="timeRange = 'month'" :class="{ active: timeRange === 'month' }">本月</button>
</div>
</div>
<!-- 图表内容区域 -->
<div ref="chartRef" class="chart-content"></div>
</div>
</template>
<script setup>
import { ref, onMounted, watch } from 'vue';
import * as echarts from 'echarts';
// 图表DOM引用
const chartRef = ref(null);
// 时间范围状态
const timeRange = ref('day');
// 图表实例
let chartInstance = null;
// 定义颜色常量
const POWER_COLOR = 'rgba(42, 130, 228, 1)';
const EFFICIENCY_COLOR = 'rgba(67, 207, 124, 1)';
// 生成指定范围内的随机数（用于模拟数据）
const getRandomValue = (min, max) => {
return Math.floor(Math.random() * (max - min + 1)) + min;
};
// 生成指定范围内的随机浮点数（用于效率数据）
const getRandomFloat = (min, max, decimalPlaces = 1) => {
const value = Math.random() * (max - min) + min;
return parseFloat(value.toFixed(decimalPlaces));
};
// 获取当前月份的天数
const getDaysInCurrentMonth = () => {
const now = new Date();
const year = now.getFullYear();
const month = now.getMonth() + 1; // 月份从0开始，所以+1
return new Date(year, month, 0).getDate();
};
// 根据时间范围返回对应的数据
const getChartData = () => {
if (timeRange.value === 'day') {
return {
xAxis: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00'],
powerData: [320, 380, 350, 420, 580, 630, 550, 480],
efficiencyData: [85.2, 86.5, 87.1, 88.3, 89.5, 89.2, 88.7, 88.1]
};
} else if (timeRange.value === 'week') {
return {
xAxis: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
powerData: [4200, 4800, 5100, 4900, 5300, 3800, 3200],
efficiencyData: [86.2, 87.5, 88.1, 87.8, 89.0, 88.5, 87.9]
};
} else {
// 本月数据 - 按天显示
const daysInMonth = getDaysInCurrentMonth();
const xAxis = [];
const powerData = [];
const efficiencyData = [];
// 生成每天的数据
for (let i = 1; i <= daysInMonth; i++) {
xAxis.push(`${i}日`);
// 生成合理范围内的功率数据（10000-25000之间）
powerData.push(getRandomValue(10000, 25000));
// 生成合理范围内的效率数据（85-90之间，保留1位小数）
efficiencyData.push(getRandomFloat(85, 90));
}
return {
xAxis,
powerData,
efficiencyData
};
}
};
// 初始化图表
const initChart = () => {
if (chartRef.value && !chartInstance) {
chartInstance = echarts.init(chartRef.value);
}
const data = getChartData();
const option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'cross' }
},
legend: {
data: ['总功率(kW)', '平均效率(%)'],
top: 0
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: data.xAxis,
// 当月天数较多时，优化X轴标签显示
axisLabel: {
interval: timeRange.value === 'month' ? 'auto' : 0,
rotate: timeRange.value === 'month' ? 45 : 0
}
},
yAxis: [
{
type: 'value',
name: '总功率(kW)',
axisLabel: {
formatter: '{value}'
}
},
{
type: 'value',
name: '平均效率(%)',
min: 80,
max: 95,
axisLabel: {
formatter: '{value}%'
}
}
],
series: [
{
name: '总功率(kW)',
type: 'line',
data: data.powerData,
smooth: true,
lineStyle: {
width: 3,
color: POWER_COLOR
},
symbol: 'circle',
symbolSize: 8,
itemStyle: {
color: POWER_COLOR
},
markPoint: {
data: [
{ type: 'max', name: '最大值' },
{ type: 'min', name: '最小值' }
],
itemStyle: {
color: POWER_COLOR
}
}
},
{
name: '平均效率(%)',
type: 'line',
yAxisIndex: 1,
data: data.efficiencyData,
smooth: true,
lineStyle: {
width: 3,
type: 'dashed',
color: EFFICIENCY_COLOR
},
symbol: 'diamond',
symbolSize: 8,
itemStyle: {
color: EFFICIENCY_COLOR
},
markPoint: {
data: [
{ type: 'max', name: '最大值' },
{ type: 'min', name: '最小值' }
],
itemStyle: {
color: EFFICIENCY_COLOR
}
}
}
]
};
chartInstance.setOption(option);
};
// 响应窗口大小变化
const handleResize = () => {
if (chartInstance) {
chartInstance.resize();
}
};
// 生命周期钩子
onMounted(() => {
initChart();
window.addEventListener('resize', handleResize);
// 清理函数
return () => {
window.removeEventListener('resize', handleResize);
if (chartInstance) {
chartInstance.dispose();
chartInstance = null;
}
};
});
// 监听时间范围变化，更新图表
watch(timeRange, () => {
initChart();
});
</script>
<style scoped>
.chart-container {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
overflow: hidden;
height: 400px;
width: 100%;
}
.chart-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
border-bottom: 1px solid #f0f0f0;
}
.chart-header h2 {
font-size: 16px;
font-weight: 600;
color: #333;
margin: 0;
}
.chart-actions button {
background: none;
border: 1px solid #e0e0e0;
padding: 5px 12px;
border-radius: 4px;
margin-left: 8px;
cursor: pointer;
font-size: 12px;
transition: all 0.2s ease;
}
.chart-actions button.active {
background-color: #1890ff;
color: white;
border-color: #1890ff;
}
.chart-content {
width: 100%;
height: calc(100% - 54px);
padding: 10px;
}
@media (max-width: 768px) {
.chart-container {
height: 350px;
}
}
@media (max-width: 480px) {
.chart-container {
height: 300px;
}
.chart-header {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.chart-actions {
width: 100%;
display: flex;
justify-content: space-between;
}
.chart-actions button {
margin: 0;
flex: 1;
margin-right: 5px;
}
.chart-actions button:last-child {
margin-right: 0;
}
}
.model {
padding: 20px;
background-color: rgba(242, 248, 252, 1);
}
</style>

30
src/views/demo/components/TitleComponent.vue Normal file
View File

@ -0,0 +1,30 @@
<template>
<el-row>
<el-col>
<div style="color: rgba(0, 30, 59, 1);;font-family: 'Alibaba-PuHuiTi-Bold';margin: 10px 0 0 0;"
:style="{ fontSize: fontLevelMap[props.fontLevel] }">
{{ props.title }}
</div>
</el-col>
<el-col>
<p style="color: rgba(154, 154, 154, 1);font-size: 14px;">
{{ props.subtitle }}
</p>
</el-col>
</el-row>
</template>
<script setup>
const props = defineProps({
title: String,
subtitle: String,
fontLevel: {
type: Number,
default: 1
}
})
const fontLevelMap = {
1: "24px",
2: "18px"
}
</script>

210
src/views/demo/components/gaojing.vue Normal file
View File

@ -0,0 +1,210 @@
<template>
<el-card shadow="never" style="border-radius: 10px;">
<div style="margin-bottom: 20px;display: flex;align-items: center;justify-content: right;">
<span style="margin-right: 5px;color: rgba(113, 128, 150, 1);font-size: 14px;">
查看全部告警信息
</span>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="8" height="8"
viewBox="0 0 8 8" fill="none">
<path
d="M5.94575 4.15722C5.94975 4.14947 5.95624 4.14298 5.95975 4.13497C6.0285 3.99197 6.00599 3.81697 5.88425 3.70197L3.1245 1.09172C2.97399 0.949466 2.73676 0.956216 2.59425 1.10648C2.45199 1.25698 2.4585 1.49422 2.60901 1.63673L5.08526 3.97922L2.61875 6.35647C2.46975 6.50021 2.46525 6.73746 2.60901 6.88672C2.6825 6.96321 2.78076 7.00148 2.87901 7.00148C2.97276 7.00148 3.06651 6.96648 3.13926 6.89648L5.87401 4.26073C5.87927 4.25547 5.88125 4.24823 5.88651 4.24274C5.89052 4.23899 5.89476 4.23623 5.89875 4.23224C5.92 4.20997 5.93124 4.18272 5.94575 4.15722Z"
fill="#718096">
</path>
</svg>
</div>
<div class="notice">
<div class="item">
<div class="icon">
<img src="/assets/demo/zgjxx.png" alt="">
</div>
<div class="content">
<p>总告警信息</p>
<p style="color: rgba(42, 130, 228, 1);">1,921条</p>
</div>
</div>
<div class="item">
<div class="icon">
<img src="/assets/demo/ycl.png" alt="">
</div>
<div class="content">
<p>已处理</p>
<p style="color:rgba(0, 184, 122, 1);">500条</p>
</div>
</div>
<div class="item">
<div class="icon">
<img src="/assets/demo/zzcl.png" alt="">
</div>
<div class="content">
<p>正在处理</p>
<p style="color: rgba(255, 141, 26, 1);">200条</p>
</div>
</div>
<div class="item">
<div class="icon">
<img src="/assets/demo/wcl.png" alt="">
</div>
<div class="content">
<p>未处理</p>
<p style="color: rgba(227, 39, 39, 1);">1,221</p>
</div>
</div>
</div>
<div class="content">
<div class="list">
<div class="item waring">
<div class="left">
<p class="title">
逆变器温度过高
</p>
<p class="text">INV-2023-003 温度达到52℃，超过阈值48℃</p>
</div>
<div class="right">
<div class="time">
10分钟前
</div>
<el-text type="warning" size="small">正在处理</el-text>
</div>
</div>
<div class="item danger">
<div class="left">
<p class="title">
通信中断
</p>
<p class="text">INV-2023-003 与监控系统通信中断</p>
</div>
<div class="right">
<div class="time">
20分钟前
</div>
<el-text type="primary" size="small">查看详情</el-text>
</div>
</div>
<div class="item danger">
<div class="left">
<p class="title">
通信中断
</p>
<p class="text">INV-2023-003 与监控系统通信中断</p>
</div>
<div class="right">
<div class="time">
1小时前
</div>
<el-text type="primary" size="small">查看详情</el-text>
</div>
</div>
<div class="item grey">
<div class="left">
<p class="title">
逆变器温度过高
</p>
<p class="text">INV-2023-003 温度达到52℃，超过阈值48℃</p>
</div>
<div class="right">
<div class="time">
2小时前
</div>
<!-- <el-text type="primary" size="small">查看详情</el-text> -->
<el-button type="info" size="small" disabled>已处理</el-button>
</div>
</div>
</div>
</div>
</el-card>
</template>
<style scoped lang="scss">
.notice {
display: flex;
justify-content: space-between;
border-bottom: 1px solid rgba(32, 32, 32, 0.05);
padding-bottom: 20px;
.item {
display: flex;
}
p {
padding: 0;
margin: 0;
}
.icon {
width: 50px;
height: 50px;
margin-right: 10px;
img {
display: block;
width: 100%;
height: 100%;
}
}
.content p:nth-child(2) {
font-size: 14px;
margin-top: 5px;
}
}
.content {
.item {
border-radius: 10px;
padding: 0 20px;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
.text {
color: rgba(125, 133, 146, 1);
font-size: 12px;
}
.title {
font-size: 16px;
}
.right {
font-size: 12px;
color: rgba(125, 133, 146, 1);
.time {
margin-bottom: 5px;
}
}
}
.waring {
background-color: #FFFCE6;
border: 1px solid #FFF0E1;
.title {
color: #FFA408;
}
}
.danger {
background-color: #FFE9E5;
border: 1px solid #FFEFEB;
.title {
color: rgba(255, 87, 51, 1);
}
}
.grey {
background-color: #F3F3F3;
border: 1px solid #FCFCFC;
.right {
text-align: right;
}
.title {
color: rgba(102, 102, 102, 1);
}
}
}
</style>
<script setup></script>

224
src/views/demo/components/qixiang.vue Normal file
View File

@ -0,0 +1,224 @@
<template>
<div class="cardItem">
<el-card>
<div class="tianqi"
style="display: flex;flex-direction: column;align-items: center;background-color: #FAFAFA;border-radius: 10px;padding-bottom: 40px;">
<div>
<img src="/assets/demo/Sunny.png" style="display: block; width: 100px;height: 100px;" alt="">
</div>
<div style="font-family: 'Alibaba-PuHuiTi-Bold';font-size: 24px;">
31℃
</div>
<div>晴朗</div>
<div style="color: rgba(154, 154, 154, 1);font-size: 14px;">
紫外线强度：<span>高</span>
</div>
<div class="tianqi2">
<div class="item">
<div>
<img src="/assets/demo/shidu.png" alt="">
</div>
<div class="text">相对湿度： <span>45%</span></div>
</div>
<div class="item">
<div>
<img src="/assets/demo/qiangdu.png" alt="">
</div>
<div class="text">光照强度： <span>45%</span></div>
</div>
<div class="item">
<div>
<img src="/assets/demo/fengshu.png" alt="">
</div>
<div class="text">风速： <span>2.3m/s</span></div>
</div>
<div class="item">
<div>
<img src="/assets/demo/riluo.png" alt="">
</div>
<div class="text">日落时间： <span>19.45</span></div>
</div>
</div>
</div>
<div class="weather-timeline">
<div class="time-box">
<div class="time-item">
<div class="time">16:00</div>
<div class="temp">30°C</div>
<div class="img-box">
<img src="/assets/demo/sunny_s.png" alt="">
</div>
</div>
<div class="time-item">
<div class="time">17:00</div>
<div class="temp">29°C</div>
<div class="img-box">
<img src="/assets/demo/sunny_s.png" alt="">
</div>
</div>
<div class="time-item">
<div class="child">
<div class="time">18:00</div>
<div class="temp">25°C</div>
<div class="img-box">
<img src="/assets/demo/rain.png" alt="">
</div>
</div>
</div>
<div class="time-item show">
<div class="time">现在</div>
<div class="temp">25°C</div>
<div class="img-box">
<img src="/assets/demo/rain_show.png" alt="">
</div>
</div>
<div class="time-item">
<div class="time">20:00</div>
<div class="temp">25°C</div>
<div class="img-box">
<img src="/assets/demo/yin.png" alt="">
</div>
</div>
<div class="time-item">
<div class="time">21:00</div>
<div class="temp">20°C</div>
<div class="img-box">
<img src="/assets/demo/yin.png" alt="">
</div>
</div>
</div>
</div>
</el-card>
</div>
</template>
<style scoped lang="scss">
.cardItem {
padding: -20px !important;
}
.tianqi2 {
width: 100%;
display: flex;
justify-content: space-around;
margin-top: 50px;
img {
width: 40px;
height: 40x;
display: block;
}
.item {
display: flex;
flex-direction: column;
align-items: center;
font-size: 14px;
.text {
margin-top: 10px;
}
}
}
.weather-timeline {
text-align: center;
color: #fff;
font-size: 14px;
margin: 15px 0;
.time {
margin: 10px 0;
}
.img-box {
width: 40px;
height: 40px;
margin: 10px 0;
}
img {
width: 100%;
height: 100%;
display: block;
}
// img[src*='Sunny'] {
// width: 50px;
// height: 50px;
// }
// img[src*='rain'] {
// width: 60px;
// height: 60px;
// }
padding: 15px;
background: linear-gradient(to right, #D6E2FF, #DEEBFF);
border-radius: 15px;
.time-box {
background: linear-gradient(to right, #447BFF, #67A3FD);
display: flex;
justify-content: space-between;
border-radius: 10px;
padding: 10px 20px;
align-items: center;
}
.time-item.show {
color: rgba(24, 109, 245, 1);
position: relative;
// z-index: 888;
background-color: #fff;
padding: 0 5px;
}
.show::after {
// color: rgba(24, 109, 245, 1);
// position: relative;
// z-index: 888;
// background-color: #fff;
content: '';
position: absolute;
width: 100%;
height: 25px;
// background-color: red;
background-color: #fff;
left: 0;
border-radius: 0 0 25px 25px;
}
.show::before {
// color: rgba(24, 109, 245, 1);
// position: relative;
// z-index: 888;
// background-color: #fff;
content: '';
position: absolute;
width: 100%;
height: 25px;
// background-color: red;
background-color: #fff;
left: 0;
top: -25px;
border-radius: 25px 25px 0 0;
}
// .show::after {
// content: '';
// position: absolute;
// height: 155px;
// background-color: #fff;
// z-index: 999;
// width: 100%;
// top: -25px;
// left: 0;
// border-radius: 20px;
// }
}
</style>
<script setup>
</script>

107
src/views/demo/components/status.vue Normal file
View File

@ -0,0 +1,107 @@
<template>
<el-card shadow="never" style="border-radius: 10px;">
<el-form :inline="true" :model="formInline" label-width="120" style="display: flex; justify-content: center;">
<el-form-item label="规则编号">
<el-input v-model="formInline.user" placeholder="请输入规则编号" clearable />
</el-form-item>
<el-form-item label="状态">
<el-select v-model="formInline.region" placeholder="请输入状态" clearable>
<el-option label="Zone one" value="shanghai" />
<el-option label="Zone two" value="beijing" />
</el-select>
</el-form-item>
<el-form-item label="更新时间">
<el-date-picker v-model="formInline.date" type="date" placeholder="请选择时间" clearable />
</el-form-item>
<el-form-item>
<el-button icon="search" type="primary" @click="onSubmit">搜索</el-button>
</el-form-item>
<el-form-item>
<el-button icon="refresh" type="default" @click="onSubmit">重置</el-button>
</el-form-item>
</el-form>
<el-table v-loading="loading" :data="listData" @selection-change="handleSelectionChange">
<!-- <el-table-column type="index" width="50" label="序号" /> -->
<el-table-column label="逆变器编号" align="center" prop="id" />
<!-- <el-table-column label="合同类型" align="center" prop="contractType">
<template #default="scope">
<dict-tag :options="income_contract_type" :value="scope.row.contractType" />
</template>
</el-table-column> -->
<el-table-column label="输出功率" align="center" prop="shuchu" />
<el-table-column label="效率" align="center" prop="xiaolv" />
<el-table-column label="温度" align="center" prop="wendu" />
<el-table-column label="今日发电量" align="center" prop="fadian" />
<el-table-column label="状态" align="center" prop="status">
<template #default="scope">
<!-- <el-button link type="primary">详情</el-button>
<el-button link type="danger">处理</el-button>
<el-button link type="warning">维护记录</el-button> -->
<el-tag :type="statusMap[scope.row.status].type">{{ statusMap[scope.row.status].label }}</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
<template #default="scope">
<el-button link type="primary">详情</el-button>
<el-button link type="danger">处理</el-button>
<el-button link type="warning">维护记录</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" /> -->
<pagination :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
@pagination="getList" />
</el-card>
</template>
<script setup>
const formInline = ref({})
const total = ref(0);
const loading = ref(false);
const listData = [
{ id: "INV-2023-001", shuchu: "12.8kw", xiaolv: "98.2%", wendu: "42℃", fadian: "158.5kWh", status: 1 },
{ id: "INV-2023-001", shuchu: "12.8kw", xiaolv: "98.2%", wendu: "42℃", fadian: "158.5kWh", status: 1 },
{ id: "INV-2023-001", shuchu: "12.8kw", xiaolv: "98.2%", wendu: "42℃", fadian: "158.5kWh", status: 2 },
{ id: "INV-2023-001", shuchu: "12.8kw", xiaolv: "98.2%", wendu: "42℃", fadian: "158.5kWh", status: 2 },
{ id: "INV-2023-001", shuchu: "12.8kw", xiaolv: "98.2%", wendu: "42℃", fadian: "158.5kWh", status: 3 },
{ id: "INV-2023-001", shuchu: "12.8kw", xiaolv: "98.2%", wendu: "42℃", fadian: "158.5kWh", status: 3 }
]
const statusMap = {
1: {
label: "正常运行",
type: "success"
},
2: {
label: "异常",
type: "danger"
},
3: {
label: "维护中",
type: "warning"
}
}
const initFormData = {
};
const data = reactive({
form: { ...initFormData },
queryParams: {
},
});
const { queryParams, form, rules } = toRefs(data);
/** 多选框选中数据 */
const handleSelectionChange = (selection) => {
ids.value = selection.map((item) => item.id);
single.value = selection.length != 1;
multiple.value = !selection.length;
};
const getList = async () => {
// loading.value = true;
// const res = await listIncomeContract(queryParams.value);
// incomeContractList.value = res.rows;
// total.value = res.total;
// loading.value = false;
};
</script>

148
src/views/demo/components/zhiban.vue Normal file
View File

File diff suppressed because one or more lines are too long

226
src/views/demo/index.vue Normal file
View File

File diff suppressed because one or more lines are too long

186
src/views/demo1/components/sbqk.vue Normal file
View File

@ -0,0 +1,186 @@
<template>
<el-card>
<div class="container">
<div class="item">
<div class="top">
<div class="icon">
<img src="/assets/demo/sb1.png" alt="">
</div>
<div class="content">
<p class="t1">运行中</p>
<p class="t2">当前状态</p>
</div>
</div>
<div class="bottom">
<span class="icon"><svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="17.4462890625" height="4.361663818359375"
viewBox="0 0 17.4462890625 4.361663818359375" fill="none">
<path
d="M14.43 2.05L14.43 0.4C14.43 0.32495 14.5049 0.25 14.58 0.25L14.66 0.25L17.14 2.05C17.2151 2.12505 17.2151 2.20495 17.14 2.28L14.66 4.08C14.585 4.15505 14.505 4.08 14.43 4.08L14.43 2.5L0.55 2.5C0.399897 2.6501 0.25 2.4301 0.25 2.28C0.25 2.12988 0.399897 1.98 0.55 1.98L14.43 1.98L14.43 2.05Z"
stroke="rgba(67, 207, 124, 1)" stroke-width="0.5" fill="#43CF7C">
</path>
</svg>
</span>
<span class="t1">平稳运行</span>
<span class="t2">(30 days)</span>
</div>
</div>
<div class="item">
<div class="top">
<div class="icon">
<img src="/assets/demo/sb2.png" alt="">
</div>
<div class="content">
<p class="t1">128小时</p>
<p class="t2">运行时长</p>
</div>
</div>
<div class="bottom">
<span class="icon"><svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="17.4462890625" height="4.361663818359375"
viewBox="0 0 17.4462890625 4.361663818359375" fill="none">
<path
d="M14.43 2.05L14.43 0.4C14.43 0.32495 14.5049 0.25 14.58 0.25L14.66 0.25L17.14 2.05C17.2151 2.12505 17.2151 2.20495 17.14 2.28L14.66 4.08C14.585 4.15505 14.505 4.08 14.43 4.08L14.43 2.5L0.55 2.5C0.399897 2.6501 0.25 2.4301 0.25 2.28C0.25 2.12988 0.399897 1.98 0.55 1.98L14.43 1.98L14.43 2.05Z"
stroke="rgba(67, 207, 124, 1)" stroke-width="0.5" fill="#43CF7C">
</path>
</svg>
</span>
<span class="t1">平稳运行</span>
<span class="t2">(30 days)</span>
</div>
</div>
<div class="item">
<div class="top">
<div class="icon">
<img src="/assets/demo/sb3.png" alt="">
</div>
<div class="content">
<p class="t1">5/8</p>
<p class="t2">已完成步骤</p>
</div>
</div>
<div class="bottom">
<span class="icon"><svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="12.393798828125" height="7.42498779296875"
viewBox="0 0 12.393798828125 7.42498779296875" fill="none">
<path
d="M12.2438 0.225L12.2438 0.150012L12.2438 0.0750058L12.1688 0.0750058C12.1688 0.0750058 12.0937 0.0750058 12.0188 0L8.34376 0C7.96876 0 7.66876 0.300006 7.66876 0.675C7.66876 1.05001 7.96876 1.35 8.34376 1.35L10.2188 1.35L6.61876 4.95L4.81876 3.15C4.44375 2.775 3.69376 2.775 3.31875 3.15L0.16875 6.3C-0.05625 6.525 -0.05625 6.975 0.16875 7.2C0.318762 7.35001 0.468756 7.425 0.61875 7.425C0.768762 7.425 0.918756 7.425 1.06875 7.2L3.99375 4.275L5.79375 6.075C6.16876 6.45001 6.91875 6.45001 7.29376 6.075L11.0438 2.32501L11.0438 4.20001C11.0438 4.575 11.3438 4.87501 11.7188 4.87501C12.0937 4.87501 12.3938 4.575 12.3938 4.20001L12.3938 0.825011L12.3938 0.600011L12.2438 0.225Z"
fill="#00B87A">
</path>
</svg>
</span>
<span class="t1">完成率98%</span>
<span class="t2">(30 days)</span>
</div>
</div>
<div class="item">
<div class="top">
<div class="icon">
<img src="/assets/demo/sb4.png" alt="">
</div>
<div class="content">
<p class="t1" style="color: rgba(255, 153, 0, 1);">2条</p>
<p class="t2">告警信息</p>
</div>
</div>
<div class="bottom">
<span class="icon"><svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="12.393798828125" height="7.42498779296875"
viewBox="0 0 12.393798828125 7.42498779296875" fill="none">
<path
d="M12.2438 0.225L12.2438 0.150012L12.2438 0.0750058L12.1688 0.0750058C12.1688 0.0750058 12.0937 0.0750058 12.0188 0L8.34376 0C7.96876 0 7.66876 0.300006 7.66876 0.675C7.66876 1.05001 7.96876 1.35 8.34376 1.35L10.2188 1.35L6.61876 4.95L4.81876 3.15C4.44375 2.775 3.69376 2.775 3.31875 3.15L0.16875 6.3C-0.05625 6.525 -0.05625 6.975 0.16875 7.2C0.318762 7.35001 0.468756 7.425 0.61875 7.425C0.768762 7.425 0.918756 7.425 1.06875 7.2L3.99375 4.275L5.79375 6.075C6.16876 6.45001 6.91875 6.45001 7.29376 6.075L11.0438 2.32501L11.0438 4.20001C11.0438 4.575 11.3438 4.87501 11.7188 4.87501C12.0937 4.87501 12.3938 4.575 12.3938 4.20001L12.3938 0.825011L12.3938 0.600011L12.2438 0.225Z"
fill="#00B87A">
</path>
</svg>
</span>
<span class="t1">4%</span>
<span class="t2">(30 days)</span>
</div>
</div>
<div class="back">
<span>34522天</span>
<span>已安全运行</span>
</div>
</div>
</el-card>
</template>
<style scoped lang="scss">
.content {
font-family: "Alibaba-PuHuiTi-Bold";
}
.container {
display: flex;
justify-content: space-around;
}
.item {
background-color: rgba(240, 249, 255, 1);
padding: 20px 40px 20px 20px;
border-radius: 20px;
text-align: center;
.top {
display: flex;
align-items: center;
text-align: left;
.icon {
img {
width: 100%;
height: 100%;
display: block;
margin-top: -20px;
}
width: 50px;
height: 50px;
margin-right: 20px;
}
.t1 {
font-size: 26px;
}
.t2 {
font-size: 18px;
color: rgba(62, 73, 84, 1);
}
p {
margin: 10px 0;
}
}
.bottom {
font-size: 12px;
display: flex;
align-items: center;
justify-content: center;
.icon {
display: flex;
align-items: center;
}
.t1 {
color: rgba(0, 184, 122, 1);
margin: 0 5px;
}
.t2 {
color: rgba(150, 155, 160, 1);
}
}
}
.back {
position: relative;
}
</style>
<script setup>
</script>

23
src/views/demo1/index.vue Normal file
View File

@ -0,0 +1,23 @@
<template>
<div style="padding: 20px;">
<el-row>
<el-col :span="15">
<TitleComponent title="设备情况" subtitle="电站一次监控数据" />
<sbqk />
</el-col>
<el-col :span="8">
</el-col>
</el-row>
</div>
</template>
<style scoped>
.el-card {
border-radius: 10px;
}
</style>
<script setup>
import TitleComponent from '@/views/demo/components/TitleComponent.vue';
import sbqk from './components/sbqk.vue';
</script>

29
src/views/design/Professional/index.vue
View File

@ -19,7 +19,7 @@
<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-button type="primary" plain icon="Plus" v-hasPermi="['design:extract:add']" @click="handleAdd">新增</el-button>
</el-col>
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
@ -37,8 +37,23 @@
</el-table-column>
<el-table-column label="操作" align="center">
<template #default="scope">
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['design:extract:query']">审核</el-button>
<el-button link type="primary" icon="Download" @click="handleDownload(scope.row)" v-hasPermi="['design:extract:export']">导出</el-button
<el-button
link
type="primary"
v-if="scope.row.status == 'draft'"
icon="Edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['design:extract:query']"
>审核</el-button
>
<el-button
link
type="primary"
v-if="scope.row.status != 'finish'"
icon="Download"
@click="handleDownload(scope.row)"
v-hasPermi="['design:extract:export']"
>导出</el-button
><el-button
link
type="warning"
@ -65,15 +80,17 @@
<el-table :loading="loadingFlie" :data="fileList" style="width: 100%" border>
<el-table-column prop="fileName" label="文件名称" align="center">
<template #default="scope">
<el-link
<!-- <el-link
:key="scope.row.fileId"
:href="scope.row.fileUrl"
target="_blank"
:type="scope.row.status == '1' ? 'primary' : 'info'"
:underline="false"
disabled
>
{{ scope.row.fileName }}
</el-link>
</el-link> -->
<span>{{ scope.row.fileName }}</span>
</template>
</el-table-column>
<el-table-column label="版本号" align="center" width="120" prop="version"> </el-table-column>
@ -187,7 +204,7 @@ const handleDownload = (row) => {
{
id: row.id
},
`互提资料.zip`
`互提资料.docx`
);
};
const handleViewFile = (row) => {

4
src/views/design/Professional/indexEdit.vue
View File

@ -445,7 +445,9 @@ const getMajor = async () => {
let res = await extractUserMajor({ userId: userId.value, projectId: currentProject.value?.id });
if (res.code == 200) {
des_user_major.value = res.data;
console.log(des_user_major.value);
if (res.data.length > 0) {
form.user_major = res.data[0].userMajor;
}
}
};
/** 回显表单数据（编辑/查看/审批场景） */

809
src/views/design/appointment/index copy 2.vue Normal file
View File

@ -0,0 +1,809 @@
<template>
<div class="p-6 bg-gray-50">
<div class="appointment 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>
<el-button
@click="disabledForm = false"
v-hasPermi="['design:user:list']"
class="px-8 py-2.5 transition-all duration-300 font-medium"
v-if="disabledForm"
>
点击编辑
</el-button>
</div>
<!-- 表单内容区域 -->
<el-form ref="leaveFormRef" :model="form" :disabled="disabledForm" :rules="rules" label-width="120px" class="p-6 space-y-6">
<!-- 设计负责人 -->
<div class="fonts">
<el-row>
<el-col :span="8"
><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>
</el-col>
</el-row>
</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-users mr-2 text-blue-500"></i>专业人员配置</h3>
<div class="flex gap-3">
<!-- 新增专业按钮 -->
<el-button type="primary" size="small" :disabled="disabledForm" @click="addMajor">
<i class="el-icon-plus mr-1"></i>新增专业
</el-button>
</div>
</div>
<!-- 表头 -->
<el-row :gutter="20" class="mb-3 font-medium text-gray-700">
<el-col :span="6" :xs="24" :sm="8">专业</el-col>
<el-col :span="9" :xs="24" :sm="8">设计人员（可多选）</el-col>
<el-col :span="9" :xs="24" :sm="8">校审人员（可多选）</el-col>
</el-row>
<!-- 分割线 -->
<el-divider class="my-4" />
<!-- 专业配置行：专业（左）+ 设计人员（中）+ 校审人员（右） 横向排列 -->
<div
v-for="(majorConfig, configIndex) in combinedConfigs"
:key="configIndex"
style="background: aliceblue; border-radius: 10px"
class="mb-5 animate-fadeIn"
>
<el-row :gutter="20" class="items-top">
<!-- 左侧：专业选择 -->
<el-col :span="6" :xs="24" :sm="8" class="mb-4 sm:mb-0" style="margin-top: 8px">
<el-form-item
:prop="`designers.${configIndex}.userMajor`"
:rules="{ required: true, message: '请选择专业', trigger: 'change' }"
class="mb-0"
label-width="80px"
label="专业"
>
<!-- 专业选择下拉框 -->
<el-select
v-model="form.designers[configIndex].userMajor"
placeholder="请选择专业"
class="w-full transition-all duration-300 border-gray-300"
@change="(val) => handleMajorChange(val, configIndex)"
>
<!-- 临时添加调试显示 -->
<template v-if="des_user_major && des_user_major.length > 0">
<el-option v-for="item in des_user_major" :key="item.value" :label="item.label" :value="item.value" />
</template>
<template v-else>
<el-option label="无专业数据" value="" disabled />
</template>
</el-select>
</el-form-item>
</el-col>
<!-- 中间：设计人员 -->
<el-col :span="9" :xs="24" :sm="8" class="mb-4 sm:mb-0">
<div class="pl-0 sm:pl-4 border-l-0 sm:border-l-2 border-blue-200 py-0 sm:py-2">
<!-- 设计人员列表 -->
<div class="space-y-3">
<div v-for="(person, personIndex) in majorConfig.designPersons" :key="personIndex" class="flex items-center">
<el-form-item
:prop="`designers.${configIndex}.persons.${personIndex}.userId`"
:rules="{ required: true, message: '请选择人员', trigger: 'change' }"
class="flex-1 mr-3 mb-0"
label="设计人员"
label-width="80px"
>
<el-select
v-model="person.userId"
placeholder="请选择设计人员"
class="w-full transition-all duration-300 border-gray-300"
@change="() => checkDuplicate(person, 'designers', configIndex, personIndex)"
>
<el-option v-for="item in userList" :key="item.userId" :label="item.nickName" :value="item.userId" />
</el-select>
</el-form-item>
<div>
<el-button
type="danger"
size="small"
@click="removePerson('designers', configIndex, personIndex)"
class="transition-all duration-300 hover:bg-red-600"
:disabled="majorConfig.designPersons.length <= 1 || disabledForm"
>
<el-icon :size="16">
<Delete />
</el-icon>
</el-button>
<el-button
type="success"
size="small"
@click="addPerson('designers', configIndex)"
class="transition-all duration-300 transform hover:scale-105"
:disabled="!majorConfig.userMajor || disabledForm"
>
<el-icon :size="16">
<Plus />
</el-icon>
</el-button>
</div>
</div>
</div>
<!-- 空状态提示 -->
<div
v-if="majorConfig.designPersons.length == 0"
class="text-gray-500 text-sm py-2 bg-gray-100 rounded-lg border border-dashed border-gray-200 mt-1"
>
暂无设计人员，请点击"添加设计人员"
</div>
</div>
</el-col>
<!-- 右侧：校审人员 -->
<el-col :span="9" :xs="24" :sm="8">
<div class="pl-0 sm:pl-4 border-l-0 sm:border-l-2 border-green-200 py-0 sm:py-2">
<!-- 校审人员列表 -->
<div class="space-y-3">
<div v-for="(person, personIndex) in majorConfig.reviewPersons" :key="personIndex" class="flex items-center">
<el-form-item
:prop="`reviewers.${configIndex}.persons.${personIndex}.userId`"
:rules="{ required: true, message: '请选择人员', trigger: 'change' }"
class="flex-1 mr-3 mb-0"
label="校审人员"
label-width="80px"
>
<el-select
v-model="person.userId"
placeholder="请选择校审人员"
class="w-full transition-all duration-300 border-gray-300"
@change="() => checkDuplicate(person, 'reviewers', configIndex, personIndex)"
>
<el-option v-for="item in userList" :key="item.userId" :label="item.nickName" :value="item.userId" />
</el-select>
</el-form-item>
<div>
<el-button
type="danger"
size="small"
@click="removePerson('reviewers', configIndex, personIndex)"
class="transition-all duration-300 hover:bg-red-600"
:disabled="majorConfig.reviewPersons.length <= 1 || disabledForm"
>
<el-icon :size="16">
<Delete />
</el-icon>
</el-button>
<el-button
type="success"
size="small"
@click="addPerson('reviewers', configIndex)"
class="transition-all duration-300 transform hover:scale-105"
:disabled="!majorConfig.userMajor || disabledForm"
>
<el-icon :size="16">
<Plus />
</el-icon>
</el-button>
</div>
</div>
</div>
<!-- 空状态提示 -->
<div
v-if="majorConfig.reviewPersons.length == 0"
class="text-gray-500 text-sm py-2 bg-gray-100 rounded-lg border border-dashed border-gray-200 mt-1"
>
暂无校审人员，请点击"添加校审人员"
</div>
</div>
</el-col>
</el-row>
<!-- 删除专业配置行 -->
<el-row class="mt-2">
<el-col :span="24" class="text-right pr-4">
<el-button
type="text"
class="text-red-500 hover:text-red-700 transition-colors"
@click="removeMajor(configIndex)"
:disabled="combinedConfigs.length <= 1 || disabledForm"
>
<i class="el-icon-delete mr-1"></i>删除专业
</el-button>
</el-col>
</el-row>
</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"
v-hasPermi="['design:user:batch']"
@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"
:disabled="disabledForm"
>
<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"
:disabled="disabledForm"
>
<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, watch, WatchStopHandle } from 'vue';
import { getCurrentInstance } from 'vue';
import type { ComponentInternalInstance } from 'vue';
import { useUserStoreHook } from '@/store/modules/user';
import { ElMessage, ElLoading } from 'element-plus';
import { Delete, Plus } from '@element-plus/icons-vue'; // 修复：添加Plus图标导入
import { designUserAdd, designUserList, systemUserList } from '@/api/design/appointment';
// 获取当前实例
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
// 获取用户 store
const userStore = useUserStoreHook();
// 从 store 中获取当前选中的项目
const currentProject = computed(() => userStore.selectedProject);
// 专业字典数据 - 增加默认空数组避免undefined
const { des_user_major = ref([]) } = toRefs<any>(proxy?.useDict('des_user_major') || {});
// 调试：打印专业数据
onMounted(() => {
console.log('专业数据:', des_user_major.value);
});
// 表单数据：保持原有数据结构不变
interface MajorGroup {
userMajor: string | null; // 专业
persons: Array<{ userId: number | null }>; // 该专业下的多个人员
}
const form = reactive({
projectId: currentProject.value?.id,
designLeader: null, // 设计负责人
designers: [] as MajorGroup[], // 设计人员：按专业分组，每组含多个人员
reviewers: [] as MajorGroup[] // 校审人员：按专业分组，每组含多个人员
});
// 组合配置用于视图展示（专业+设计人员+校审人员）
const combinedConfigs = computed(() => {
// 确保designers和reviewers数组长度一致
const maxLength = Math.max(form.designers.length, form.reviewers.length);
while (form.designers.length < maxLength) {
form.designers.push(createEmptyMajorGroup());
}
while (form.reviewers.length < maxLength) {
form.reviewers.push(createEmptyMajorGroup());
}
// 组合数据用于视图展示
return form.designers.map((designerGroup, index) => ({
userMajor: designerGroup.userMajor,
designPersons: designerGroup.persons,
reviewPersons: form.reviewers[index].persons
}));
});
// 表单验证规则
const rules = reactive({
designLeader: [{ required: true, message: '请选择设计负责人', trigger: 'change' }]
});
// 用户列表
const userList = ref([]);
// 表单引用
const leaveFormRef = ref();
const disabledForm = ref(false); //控制提交按钮状态
/** 查询当前部门的所有用户 */
const getDeptAllUser = async (deptId: any) => {
try {
const res = await systemUserList({ deptId });
userList.value = res.rows;
} catch (error) {
ElMessage.error('获取用户列表失败');
}
};
/** 查询当前表单数据并回显 */
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 });
// 清空现有数据
form.designLeader = null;
form.designers = [];
form.reviewers = [];
if (res.code == 200 && res.rows && res.rows.length > 0) {
disabledForm.value = true;
// 1. 分类整理数据（按用户类型）
const designLeader = res.rows.find((item) => item.userType == 1);
const designerItems = res.rows.filter((item) => item.userType == 2);
const reviewerItems = res.rows.filter((item) => item.userType == 3);
// 2. 回显设计负责人
if (designLeader) form.designLeader = designLeader.userId;
// 3. 回显设计人员（按专业分组）
form.designers = groupPersonByMajor(designerItems);
// 4. 回显校审人员（按专业分组）
form.reviewers = groupPersonByMajor(reviewerItems);
}
// 补全默认空项（至少1个专业分组，每组至少1个人员）
if (form.designers.length == 0) form.designers.push(createEmptyMajorGroup());
if (form.reviewers.length == 0) form.reviewers.push(createEmptyMajorGroup());
} catch (error) {
ElMessage.error('获取配置数据失败');
// 异常时初始化默认空项
form.designers = [createEmptyMajorGroup()];
form.reviewers = [createEmptyMajorGroup()];
} finally {
loading.close();
}
};
/** 辅助函数：创建空的专业分组（含1个空人员） */
const createEmptyMajorGroup = (): MajorGroup => ({
userMajor: null,
persons: [{ userId: null }]
});
/** 辅助函数：按专业分组整理人员数据（用于回显） */
const groupPersonByMajor = (items: any[]): MajorGroup[] => {
const groupMap: Record<string, MajorGroup> = {};
items.forEach((item) => {
const major = item.userMajor || '未分类';
// 不存在该专业分组则创建
if (!groupMap[major]) {
groupMap[major] = { userMajor: item.userMajor, persons: [] };
}
// 添加当前人员到专业分组
groupMap[major].persons.push({ userId: item.userId });
});
// 处理空分组（确保每组至少1个人员）
Object.values(groupMap).forEach((group) => {
if (group.persons.length == 0) group.persons.push({ userId: null });
});
return Object.values(groupMap);
};
/** 新增专业配置行 */
const addMajor = () => {
form.designers.push(createEmptyMajorGroup());
form.reviewers.push(createEmptyMajorGroup());
// 滚动到新增的专业配置行
setTimeout(() => {
const groups = document.querySelectorAll(`[data-v-${proxy?.$options.__scopeId}] .animate-fadeIn`);
if (groups.length > 0) {
groups[groups.length - 1].scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}
}, 100);
};
/** 删除专业配置行 */
const removeMajor = (configIndex: number) => {
if (form.designers.length <= 1) {
ElMessage.warning('至少保留一个专业配置');
return;
}
form.designers.splice(configIndex, 1);
form.reviewers.splice(configIndex, 1);
};
/** 给指定专业配置行添加人员 */
const addPerson = (type: 'designers' | 'reviewers', configIndex: number) => {
form[type][configIndex].persons.push({ userId: null });
// 滚动到新增的人员选择框
setTimeout(() => {
const personSelects = document.querySelectorAll(`[data-v-${proxy?.$options.__scopeId}] .el-select`);
if (personSelects.length > 0) {
personSelects[personSelects.length - 1].scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}
}, 100);
};
/** 从指定专业配置行删除人员 */
const removePerson = (type: 'designers' | 'reviewers', configIndex: number, personIndex: number) => {
const targetGroup = form[type][configIndex];
if (targetGroup.persons.length <= 1) {
ElMessage.warning(`该专业至少保留一个${type == 'designers' ? '设计' : '校审'}人员`);
return;
}
targetGroup.persons.splice(personIndex, 1);
};
/** 专业变更时：清空当前专业下的人员（避免专业与人员不匹配） */
const handleMajorChange = (newMajor: string, configIndex: number) => {
// 直接修改原始数据源，确保响应式生效
form.designers[configIndex].userMajor = newMajor;
form.reviewers[configIndex].userMajor = newMajor;
form.designers[configIndex].persons = [{ userId: null }];
form.reviewers[configIndex].persons = [{ userId: null }];
// ElMessage.info(`已重置「${getMajorLabel(newMajor)}」专业下的人员，请重新选择`);
};
// ========== 核心：重复校验逻辑 ==========
/**
* 校验同一角色内（设计/校审）的「专业+人员」组合唯一性
*/
const checkDuplicate = (current: { userId: number | null }, role: 'designers' | 'reviewers', configIndex: number, personIndex: number) => {
console.log(`校验触发 - 角色: ${role}, 专业索引: ${configIndex}, 人员索引: ${personIndex}, 人员ID: ${current.userId}`);
console.log(form);
const currentGroup = form[role][configIndex];
// 未选专业/人员时不校验
if (!currentGroup.userMajor || !current.userId) return;
// 生成当前「专业+人员」唯一标识
const currentKey = `${currentGroup.userMajor}-${current.userId}`;
let duplicateItem = null;
// 1. 检查当前专业配置行内是否有重复人员
duplicateItem = currentGroup.persons.find((item, idx) => {
return idx !== personIndex && item.userId == current.userId;
});
if (duplicateItem) {
ElMessage.warning(`当前专业下「${getUserName(current.userId)}」已存在，请重新选择`);
current.userId = null;
return;
}
// 2. 检查同一角色内其他专业配置行是否有重复（专业+人员唯一）
form[role].forEach((group, gIdx) => {
if (gIdx == configIndex) return; // 跳过当前配置行
group.persons.forEach((item) => {
if (`${group.userMajor}-${item.userId}` == currentKey) {
duplicateItem = item;
}
});
});
if (duplicateItem) {
ElMessage.warning(`「${getMajorLabel(currentGroup.userMajor)}+${getUserName(current.userId)}」组合已存在，请重新选择`);
current.userId = null;
}
};
/** 辅助函数：通过专业值获取专业名称 */
const getMajorLabel = (majorValue: string | null) => {
if (!majorValue || !des_user_major.value) return '';
const major = des_user_major.value.find((item: any) => item.value == majorValue);
return major ? major.label : majorValue;
};
/** 辅助函数：通过用户ID获取用户名 */
const getUserName = (userId: number | null) => {
if (!userId || !userList.value.length) return '';
const user = userList.value.find((item: any) => item.userId == userId);
return user ? user.nickName : userId;
};
/** 提交表单（保持原有数据结构） */
const submitForm = async () => {
if (!leaveFormRef.value) return;
try {
// 1. 基础表单验证
await leaveFormRef.value.validate();
// 2. 提交前二次校验：「专业+人员」组合唯一性
let hasDuplicate = false;
const allKeys: string[] = [];
// 收集所有「专业+人员」组合（设计+校审分开校验）
const collectKeys = (roleGroups: MajorGroup[], roleName: string) => {
roleGroups.forEach((group) => {
if (!group.userMajor) return;
group.persons.forEach((person) => {
if (!person.userId) return;
const key = `${group.userMajor}-${person.userId}`;
if (allKeys.includes(key)) {
hasDuplicate = true;
ElMessage.error(`${roleName}中存在重复的「专业+人员」组合，请检查`);
}
allKeys.push(key);
});
});
};
// 校验设计人员
collectKeys(form.designers, '设计人员');
if (hasDuplicate) return;
// 清空临时数组，校验校审人员（不校验设计与校审之间）
allKeys.length = 0;
collectKeys(form.reviewers, '校审人员');
if (hasDuplicate) return;
// 3. 构建提交数据（适配后端原有数据格式）
const submitData = {
projectId: form.projectId,
personnel: [
// 设计负责人
{
userId: form.designLeader,
userType: 'designLeader',
userMajor: null
},
// 设计人员：展开专业分组，每个人员单独作为一条数据
...form.designers.flatMap((group) =>
group.persons.map((person) => ({
userId: person.userId,
userType: 'designer',
userMajor: group.userMajor
}))
),
// 校审人员：展开专业分组，每个人员单独作为一条数据
...form.reviewers.flatMap((group) =>
group.persons.map((person) => ({
userId: person.userId,
userType: 'reviewer',
userMajor: group.userMajor
}))
)
]
};
// 4. 数据处理（保持原有逻辑不变）
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
});
}
});
});
// 5. 提交到后端（保持原有逻辑不变）
const loading = ElLoading.service({ text: '提交中...', background: 'rgba(255,255,255,0.7)' });
const res = await designUserAdd({
list: arr,
projectId: currentProject.value?.id
});
if (res.code == 200) {
disabledForm.value = true;
loading.close();
ElMessage.success('提交成功');
} else {
ElMessage.error(res.msg || '提交失败');
}
} catch (error) {
ElMessage.error('请完善表单信息后再提交');
} finally {
// ElLoading.service().close();
}
};
/** 重置表单（适配新数据结构） */
const resetForm = () => {
if (leaveFormRef.value) {
leaveFormRef.value.resetFields();
// 重置为默认空状态（1个专业分组，每组1个空人员）
form.designers = [createEmptyMajorGroup()];
form.reviewers = [createEmptyMajorGroup()];
ElMessage.info('表单已重置');
}
};
// 监听项目ID刷新数据
const listeningProject: WatchStopHandle = watch(
() => currentProject.value?.id,
() => {
getDeptAllUser(userStore.deptId).then(() => {
designUser();
});
}
);
// 页面生命周期
onUnmounted(() => {
listeningProject();
});
onMounted(() => {
getDeptAllUser(userStore.deptId).then(() => {
designUser();
});
});
</script>
<style lang="scss" scoped>
.appointment {
width: 70vw;
max-width: 1600px;
.el-select__wrapper {
width: 100% !important;
}
.el-button--small {
margin-bottom: 0;
}
.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;
}
&__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;
}
}
&--success {
background-color: #67c23a;
border-color: #67c23a;
&:hover {
background-color: #85ce61;
border-color: #85ce61;
}
&:disabled {
background-color: #b3e099;
border-color: #b3e099;
}
}
&--danger {
background-color: #f56c6c;
border-color: #f56c6c;
&:hover {
background-color: #f78989;
border-color: #f78989;
}
&:disabled {
background-color: #ffcccc;
border-color: #ffbbbb;
cursor: not-allowed;
}
}
&--text {
color: #f56c6c;
&:hover {
color: #f78989;
background-color: rgba(245, 108, 108, 0.05);
}
}
}
// 响应式网格布局
.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;
}
// 适配小屏幕（小于768px时，垂直排列）
@media (max-width: 768px) {
.appWidth {
width: 95vw;
}
::v-deep .el-form {
padding: 4px;
}
::v-deep .el-form-item__label {
width: 100px;
}
// 小屏幕下各列上下间距
::v-deep .el-col-xs-24 + .el-col-xs-24 {
margin-top: 12px;
}
}
</style>

1303
src/views/design/appointment/index.vue
View File

File diff suppressed because it is too large Load Diff

69
src/views/design/billofQuantities/index.vue
View File

@ -6,7 +6,7 @@
<el-card v-if="index < 3" shadow="always">
<el-form :model="state.queryForm" :inline="true">
<el-form-item label="版本号" prop="versions">
<el-select v-model="state.queryForm.versions" placeholder="选择版本号">
<el-select v-model="state.queryForm.versions" placeholder="选择版本号" @change="handleChangeVersion">
<el-option v-for="item in state.options" :key="item.versions" :label="item.versions" :value="item.versions" />
</el-select>
</el-form-item>
@ -16,10 +16,10 @@
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="openTable(true, index)">一键展开</el-button>
<el-button type="primary" @click="openTable(index)">{{ isExpandAll ? '一键收起' : '一键展开' }}</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="openTable(false, index)">一键收起</el-button>
<el-button type="success" @click="downloadTemplate(1)">下载模板</el-button>
</el-form-item>
<el-form-item>
<el-upload ref="uploadRef" class="upload-demo" :http-request="importExcel" :show-file-list="false">
@ -51,20 +51,21 @@
<el-option v-for="item in state.options" :key="item.versions" :label="item.versions" :value="item.versions" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="success" @click="downloadTemplate(2)">下载模板</el-button>
</el-form-item>
<el-form-item>
<el-upload ref="uploadRef" class="upload-demo" :http-request="importExcel" :show-file-list="false" style="margin-right: 10px">
<template #trigger>
<el-button type="primary">导入excel</el-button>
</template>
</el-upload>
<el-button v-if="state.versionsData.status == 'draft'" type="primary" con="edit" @click="clickApprovalSheet()">审核</el-button>
<el-button
v-if="state.versionsData.status == 'waiting' || state.versionsData.status == 'finish'"
icon="view"
@click="lookApprovalFlow()"
type="warning"
>查看流程</el-button
>
</el-form-item>
<el-form-item v-if="state.versionsData.status == 'draft'">
<el-button type="primary" con="edit" @click="clickApprovalSheet()">审核</el-button>
</el-form-item>
<el-form-item v-if="state.versionsData.status == 'waiting' || state.versionsData.status == 'finish'">
<el-button icon="view" @click="lookApprovalFlow()" type="warning">查看流程</el-button>
</el-form-item>
</el-form>
</el-card>
@ -117,6 +118,7 @@ const { proxy } = getCurrentInstance();
const { work_order_type } = toRefs(proxy?.useDict('work_order_type'));
const tableRef = ref({});
console.log(work_order_type);
const isExpandAll = ref(true);
// tableData
// 版本号
@ -146,6 +148,7 @@ const state = reactive({
});
// tab切换
const handleTabChange = (tab) => {
isExpandAll.value = true;
console.log('tab', tab);
state.tableData = [];
state.options = [];
@ -163,6 +166,7 @@ const handleTabChange = (tab) => {
onMounted(async () => {
await getVersionNums();
});
// 获取版本号
async function getVersionNums(isSheet = true) {
try {
@ -239,10 +243,10 @@ async function handleSheetName() {
// 获取列表
async function handleQueryList(isSheet = true) {
if (isSheet && !state.queryForm.sheet) {
console.warn('表名不存在，无法获取列表数据');
return;
}
// if (isSheet && !state.queryForm) {
// console.warn('表名不存在，无法获取列表数据');
// return;
// }
try {
state.loading.list = true;
@ -300,18 +304,19 @@ function handleChange(sheet) {
function handleChangeVersion(versions) {
state.queryForm.versions = versions;
state.versionsData = state.options.find((e) => e.versions == versions);
console.log('state.versionsData', state.versionsData);
// console.log('state.versionsData', state.versionsData);
state.sheets = [];
handleQueryList();
}
// 在 openTable 方法中通过索引获取对应的表格实例
function openTable(flag, index) {
function openTable(index) {
isExpandAll.value = !isExpandAll.value;
nextTick(() => {
// 通过索引获取当前标签页的表格实例
const currentTable = tableRef.value[index];
console.log(currentTable, index);
if (currentTable) {
handleArr(state.tableData, flag, currentTable);
handleArr(state.tableData, isExpandAll.value, currentTable);
}
});
}
@ -345,6 +350,34 @@ function lookApprovalFlow(row) {
}
});
}
// 下载模板
const downloadTemplate = (type) => {
// 导出模版文件
try {
let linkurl = '';
let name = '';
if (type == 1) {
linkurl = '/billOfQuantities.xlsx';
name = '工程量清单模板.xlsx';
} else {
linkurl = '/materialsEquipment.xlsx';
name = '物资设备清单模板.xlsx';
}
// 创建a标签
const link = document.createElement('a');
// 设置PDF文件路径 - 相对于public目录
link.href = linkurl;
// 设置下载后的文件名
link.download = name;
// 触发点击
document.body.appendChild(link);
link.click();
// 清理
document.body.removeChild(link);
} catch (error) {
alert('下载失败，请重试');
}
};
</script>
<style>
.billof-quantities {

2
src/views/design/billofQuantities/indexEdit0.vue
View File

@ -16,7 +16,7 @@
<!-- 表单区域 -->
<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>
<h3 class="text-lg font-semibold text-gray-800">投标工程量清单</h3>
</div>
<div class="p-6">
<el-form

10
src/views/design/condition/comm/filePage.vue
View File

@ -6,7 +6,7 @@
<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-button type="primary" style="float: left" v-hasPermi="['design:collectFile:upload']">
<el-icon size="small"><Upload /></el-icon>上传文件
</el-button>
</file-upload>
@ -17,7 +17,13 @@
</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 align="center" label="文件名称">
<template #default="scope">
<el-link :key="scope.row.fileName" :href="scope.row.fileUrl" target="_blank" type="primary" :underline="false">
{{ scope.row.fileName }}
</el-link>
</template>
</el-table-column>
<el-table-column label="流程状态" align="center" prop="status">
<template #default="scope">
<dict-tag :options="wf_business_status" :value="scope.row.status" />

60
src/views/design/designChange/index.vue
View File

@ -14,7 +14,7 @@
<el-input v-model="queryParams.volumeNo" placeholder="请输入卷册号" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery" v-hasPermi="['design:designChange:list']">搜索</el-button>
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
@ -44,7 +44,7 @@
<el-table-column label="卷册号" align="center" prop="volumeNo" width="150" />
<el-table-column label="流程状态" align="center">
<template #default="scope">
<dict-tag v-if="scope.row.fileId != null" :options="wf_business_status" :value="scope.row.status" />
<dict-tag v-if="scope.row.costEstimation > 0" :options="wf_business_status" :value="scope.row.status" />
</template>
</el-table-column>
<el-table-column label="变更文件" align="center" width="150">
@ -64,36 +64,56 @@
<dict-tag :options="design_change_reason_type" :value="scope.row.changeReason ? scope.row.changeReason.split(',') : []" />
</template>
</el-table-column>
<el-table-column label="图纸状态" align="center">
<template #default="scope">
<dict-tag v-if="scope.row.fileId != null" :options="wf_business_status" :value="scope.row.auditStatus" />
</template>
</el-table-column>
<el-table-column label="变更内容" align="center" prop="changeContent" width="150" />
<el-table-column label="创建时间" align="center" prop="createTime" width="150" />
<el-table-column label="备注" align="center" prop="remark" width="200" />
<el-table-column label="操作" align="center" fixed="right" width="300">
<template #default="scope">
<el-button
type="primary"
link
icon="Upload"
@click="handleAddChange(scope.row)"
v-if="scope.row.status == 'draft' || scope.row.status == 'back'"
>上传</el-button
>
<el-button
type="success"
link
icon="View"
v-if="scope.row.status != 'draft'"
v-if="scope.row.auditStatus != 'draft'"
v-hasPermi="['design:designChange:query']"
@click="handleViewInfo(scope.row)"
>查看</el-button
>
<el-button type="success" link icon="View" v-hasPermi="['design:designChange:query']" @click="handleViewDetail(scope.row)"
>通知单</el-button
<el-button
type="primary"
v-if="scope.row.status == 'draft' && scope.row.costEstimation > 0"
link
icon="plus"
v-hasPermi="['design:designChange:query']"
@click="handleViewUpdate(scope.row)"
>审核通知单</el-button
>
<el-button
v-if="scope.row.status != 'draft'"
type="success"
link
icon="View"
v-hasPermi="['design:designChange:query']"
@click="handleViewDetail(scope.row)"
>查看通知单</el-button
>
<el-button
type="primary"
link
icon="Upload"
@click="handleAddChange(scope.row)"
v-if="(scope.row.status == 'finish' || scope.row.costEstimation == '0') && scope.row.auditStatus == 'draft'"
>上传图纸</el-button
>
<el-button
type="warning"
link
icon="View"
v-hasPermi="['design:designChange:query']"
v-hasPermi="['design:drawingreviewReceipts:list']"
v-if="scope.row.status != 'draft'"
@click="handleViewHistory(scope.row)"
>查看单据</el-button
@ -210,6 +230,17 @@ const handleAdd = () => {
});
};
/** 查看详情 */
const handleViewUpdate = (row) => {
proxy.$tab.closePage(proxy.$route);
proxy.$router.push({
path: `/approval/designChange/indexEdit`,
query: {
id: row.id,
type: 'update'
}
});
};
/** 查看详情 */
const handleViewDetail = (row) => {
proxy.$tab.closePage(proxy.$route);
proxy.$router.push({
@ -238,6 +269,7 @@ const handleViewInfo = (row) => {
path: `/approval/drawing/indexEdit`,
query: {
id: row.id,
costEstimation: row.costEstimation,
type: 'view'
}
});

345
src/views/design/designChange/indexEdit.vue
View File

@ -1,15 +1,22 @@
<template>
<div class="p-4 bg-gray-50 designChangeForm">
<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>
<!-- 表单区域 -->
<div v-if="routeParams.type == 'view'" style="width: 100%; text-align: right; margin-bottom: 10px">
<el-button @click="goBack" size="large" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-colors"
>返回</el-button
>
</div>
<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>
<h3 class="text-lg font-semibold text-gray-800">变更图纸信息</h3>
</div>
<div class="p-6">
<el-form
@ -29,7 +36,7 @@
</el-col>
<el-col :span="12">
<el-form-item label="工程名称" prop="projectName">
<el-input v-model="form.projectName" placeholder="请输入工程名称" /> </el-form-item
<el-input v-model="form.projectName" disabled placeholder="请输入工程名称" /> </el-form-item
></el-col>
<el-col :span="12">
<el-form-item label="原卷册号" prop="volumeNo">
@ -48,7 +55,12 @@
:label="project.volumeNumber"
:value="project.volumeNumber"
/>
</el-select> </el-form-item
</el-select>
<el-tooltip class="box-item" effect="dark" content="只有通过审核的蓝图才能选择" placement="top-start">
<el-icon size="22" class="no-inherit">
<QuestionFilled />
</el-icon>
</el-tooltip> </el-form-item
></el-col>
<el-col :span="12">
<el-form-item label="提出单位" prop="submitUnit">
@ -133,7 +145,7 @@
></el-col>
<el-col :span="12">
<el-form-item label="费用" prop="costEstimation">
<el-input v-model="form.costEstimation" type="number" placeholder="请输入费用" /> </el-form-item
<el-input min="0" v-model="form.costEstimation" type="number" placeholder="请输入费用" /> </el-form-item
></el-col>
<el-col :span="24">
<el-form-item label="变更费用估算表" label-width="110px" prop="costEstimationFile">
@ -150,58 +162,99 @@
</div>
</el-form>
</div>
<div class="flex justify-center gap-4 mt-8">
<el-button
v-if="routeParams.type != 'view'"
@click="goBack"
size="large"
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"
size="large"
v-if="routeParams.type != 'view'"
@click="submitForm"
class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors"
>确认</el-button
>
</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 { addDesignChange, getDesignChange, catalogList, blueprintList } from '@/api/design/designChange';
import { getDrawing } from '@/api/design/drawing';
import { updateDesignChange, getDesignChange, catalogList, blueprintList, addDesignChange } from '@/api/design/designChange';
const { design_change_reason_type } = toRefs<any>(proxy?.useDict('design_change_reason_type'));
const route = useRoute();
const router = useRouter();
// 获取用户 store
const userStore = useUserStoreHook();
// 从 store 中获取项目列表和当前选中的项目
const currentProject = computed(() => userStore.selectedProject);
const buttonLoading = ref(false);
const volumeCatalogList = ref([]);
const blueprintListAll = ref([]);
let volumeMap = new Map();
const loading = ref(true);
//路由参数
const routeParams = ref<Record<string, any>>({});
const flowCodeOptions = [
{
value: currentProject.value?.id + '_designchangeddoc',
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 fileVoList = ref([]);
const designId = ref('');
const submitFormData = ref<StartProcessBo>({
businessId: '',
flowCode: '',
variables: {}
});
const taskVariables = ref<Record<string, any>>({});
const initFormData = {
id: undefined,
projectId: currentProject.value?.id,
formNo: undefined,
projectName: undefined,
projectName: currentProject.value?.name,
submitUnit: undefined,
specialty: undefined,
specialtyName: undefined,
@ -243,65 +296,22 @@ const data = reactive({
rules: {
// 卷册号
volumeNo: [{ required: true, message: '请请选择卷册号', trigger: 'change' }],
formNo: [{ required: true, message: '申请单编号不能为空', trigger: 'change' }]
formNo: [{ required: true, message: '申请单编号不能为空', trigger: 'change' }],
costEstimation: [{ required: true, message: '费用不能为空', trigger: 'change' }]
}
});
const { form, rules } = toRefs(data);
/** 表单重置 */
const reset = () => {
form.value = { ...initFormData };
leaveFormRef.value?.resetFields();
const handleClose = () => {
dialogVisible.visible = false;
flowCode.value = '';
buttonLoading.value = false;
};
//返回
const goBack = () => {
proxy.$tab.closePage(route);
router.go(-1);
};
/** 提交按钮 */
const submitForm = () => {
var changeReason = '';
if (form.value.changeReason && form.value.changeReason.length > 0) {
changeReason = form.value.changeReason.join(',');
}
var saveFile = '';
if (form.value.saveFile && form.value.saveFile.length > 0) {
saveFile = form.value.saveFile.join(',');
}
leaveFormRef.value?.validate(async (valid: boolean) => {
if (valid) {
var res;
res = await addDesignChange({ ...form.value, changeReason, saveFile }).finally(() => (buttonLoading.value = false));
if (res.code == 200) {
ElMessage.success('通知成功');
goBack();
} else {
ElMessage.error(res.msg);
}
}
});
};
/** 查询卷册目录列表 */
const getList = async () => {
const res = await catalogList(currentProject.value?.id);
volumeCatalogList.value = res.data;
volumeCatalogList.value.forEach((e) => {
volumeMap.set(e.volumeNumber, e);
});
};
// 获取图纸列表
const getBlueprintList = async () => {
const res = await blueprintList(designId.value);
blueprintListAll.value = res.data;
};
const handleRadio = (val) => {
form.value.saveFile = [];
if (val == 2) {
getBlueprintList();
}
};
const fileVoList = ref([]);
const designId = ref('');
let volumeMap = new Map();
const handleSelect = (val) => {
let obj = volumeMap.get(val);
fileVoList.value = obj.fileVoList;
@ -310,37 +320,176 @@ const handleSelect = (val) => {
form.value.specialty = obj.specialty;
form.value.specialtyName = obj.specialtyName;
form.value.extendDetail.subName = obj.designSubitem;
form.value.saveFile = [];
getBlueprintList();
};
// 获取图纸列表
const blueprintListAll = ref([]);
const getBlueprintList = async () => {
const res = await blueprintList(designId.value);
blueprintListAll.value = res.data;
};
const handleRadio = (val) => {
form.value.saveFile = [];
};
/** 表单重置 */
const reset = () => {
form.value = { ...initFormData };
leaveFormRef.value?.resetFields();
};
const volumeCatalogList = ref([]);
/** 获取详情 */
const getInfo = () => {
loading.value = true;
buttonLoading.value = false;
nextTick(async () => {
const res = await getDesignChange(routeParams.value.id);
let id = routeParams.value.id.split('_')[0];
const res = await getDesignChange(id);
Object.assign(form.value, res.data);
if (form.value.status != 'draft') {
form.value.id = id + '_audit';
}
if (form.value.extendDetail.designDisposal == 2) {
let obj = volumeMap.get(form.value.volumeNo);
designId.value = obj.design;
form.value.saveFile = form.value.saveFile.split(',');
getBlueprintList();
}
if (form.value.changeReason.length > 0) {
form.value.changeReason = form.value.changeReason.split(',');
}
loading.value = false;
buttonLoading.value = false;
});
};
//返回
const goBack = () => {
proxy.$tab.closePage(route);
router.go(-1);
};
/** 提交按钮 */
const submitForm = (status1: string) => {
status.value = status1;
if (routeParams.value.type == 'add') {
var changeReason = '';
if (form.value.changeReason && form.value.changeReason.length > 0) {
changeReason = form.value.changeReason.join(',');
}
var saveFile = '';
if (form.value.saveFile && form.value.saveFile.length > 0) {
saveFile = form.value.saveFile.join(',');
}
leaveFormRef.value?.validate(async (valid: boolean) => {
if (valid) {
buttonLoading.value = true;
var res;
delete form.value.id;
res = await addDesignChange({ ...form.value, changeReason, saveFile }).finally(() => (buttonLoading.value = false));
if (res.code == 200) {
routeParams.value.type = 'update';
form.value = res.data;
if (form.value.costEstimation == '0') {
ElMessage.success('通知成功');
goBack();
} else {
submit(status.value, res.data);
}
} else {
ElMessage.error(res.msg);
}
}
});
} else {
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 = () => {
if (form.value.id.indexOf('_audit') == -1) {
form.value.id = form.value.id + '_audit';
}
approvalRecordRef.value.init(form.value.id);
};
//提交回调
const submitCallback = async () => {
await proxy.$tab.closePage(route);
router.go(-1);
};
//审批
const approvalVerifyOpen = async () => {
// submitVerifyRef.value.openDialog(routeParams.value.taskId, true, routeParams.value.businessId);
submitVerifyRef.value.openDialog(routeParams.value.taskId);
};
// 图纸上传成功之后 开始提交
const route = useRoute();
const router = useRouter();
const submit = async (status, data) => {
form.value = data;
form.value.id = form.value.id + '_audit';
if (status === 'draft') {
buttonLoading.value = false;
proxy?.$modal.msgSuccess('暂存成功');
proxy.$tab.closePage(route);
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';
}
console.log(data);
await handleStartWorkFlow(data);
}
};
onMounted(() => {
nextTick(async () => {
routeParams.value = proxy.$route.query;
routeParams.value = route.query;
reset();
getList();
if (routeParams.value.type != 'add') {
loading.value = false;
const res = await catalogList(currentProject.value?.id);
volumeCatalogList.value = res.data;
volumeCatalogList.value.forEach((e) => {
volumeMap.set(e.volumeNumber, e);
});
if (routeParams.value.type === 'update' || routeParams.value.type === 'view' || routeParams.value.type === 'approval') {
getInfo();
}
});
});
</script>
<style scoped lang="scss">
.designChangeForm {
.el-select {
width: 300px !important;
}
}
/* 全局样式 */
:root {
--primary: #409eff;

446
src/views/design/designChange/indexEdit1.vue Normal file
View File

@ -0,0 +1,446 @@
<template>
<div class="p-4 bg-gray-50 designChangeForm">
<div class="max-w-4xl mx-auto">
<!-- 表单区域 -->
<div v-if="routeParams.type == 'view'" style="width: 100%; text-align: right; margin-bottom: 10px">
<el-button @click="goBack" size="large" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-colors"
>返回</el-button
>
</div>
<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"
:disabled="routeParams.type === 'view' || form.status == 'waiting'"
: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 v-model="form.formNo" placeholder="请输入申请单编号" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="工程名称" prop="projectName">
<el-input v-model="form.projectName" placeholder="请输入工程名称" /> </el-form-item
></el-col>
<el-col :span="12">
<el-form-item label="原卷册号" prop="volumeNo">
<el-select
id="projectSelect"
v-model="form.volumeNo"
placeholder="请选择原卷册号"
clearable
filterable
@change="handleSelect"
style="width: 150px; margin-right: 20px"
>
<el-option
v-for="project in volumeCatalogList"
:key="project.volumeNumber"
:label="project.volumeNumber"
:value="project.volumeNumber"
/>
</el-select> </el-form-item
></el-col>
<el-col :span="12">
<el-form-item label="提出单位" prop="submitUnit">
<el-input v-model="form.submitUnit" placeholder="请输入提出单位" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="专业" prop="specialtyName">
<el-input disabled v-model="form.specialtyName" placeholder="请输入专业" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="提出日期" prop="submitDate">
<el-date-picker clearable v-model="form.submitDate" type="date" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择提出日期">
</el-date-picker> </el-form-item
></el-col>
<!-- <el-col :span="12">
<el-form-item label="卷册名称" prop="volumeName"> <el-input v-model="form.volumeName" placeholder="请输入卷册名称" /> </el-form-item
></el-col> -->
<el-col :span="12">
<el-form-item label="子项名称" prop="subName">
<el-input disabled v-model="form.extendDetail.subName" placeholder="请输入子项名称" /> </el-form-item
></el-col>
<el-col :span="24">
<el-form-item label="原设计处置" prop="designDisposal">
<el-radio-group v-model="form.extendDetail.designDisposal" @change="handleRadio">
<el-radio value="1" size="large">原图作废</el-radio>
<el-radio value="2" :disabled="!designId" size="large">原图保留，部分修改</el-radio>
<el-radio value="3" size="large">原图保留，补充设计</el-radio>
</el-radio-group>
</el-form-item></el-col
>
<el-col :span="24" v-if="form.extendDetail.designDisposal == 2">
<el-form-item label="保留文件" prop="saveFile">
<el-checkbox-group v-model="form.saveFile">
<el-checkbox v-for="dict in blueprintListAll" :key="dict.id" :value="dict.id">
{{ dict.fileName }}
</el-checkbox>
</el-checkbox-group>
</el-form-item></el-col
>
<el-col :span="12">
<el-form-item label="设计阶段" prop="designPhase">
<el-input v-model="form.extendDetail.designPhase" placeholder="请输入设计阶段" /> </el-form-item
></el-col>
<el-col :span="24">
<el-form-item label="变更类别" prop="changeCategory">
<el-radio-group v-model="form.extendDetail.changeCategory">
<el-radio value="1" size="large">重大设计变更</el-radio>
<el-radio value="2" size="large">一般设计变更</el-radio>
</el-radio-group>
</el-form-item></el-col
>
<el-col :span="24">
<el-form-item label="实施程序" prop="ImpProcedure">
<el-radio-group v-model="form.extendDetail.ImpProcedure">
<el-radio value="1" size="large">建设单位重新申报初步设计审批</el-radio>
<el-radio value="2" size="large">建设单位送原施工图审查机构审查、建设主管部分备案后交付实施</el-radio>
<el-radio value="3" size="large">建设单位确认后交付实施</el-radio>
</el-radio-group>
</el-form-item></el-col
>
<el-col :span="12">
<el-form-item label="更改相关专业" prop="involvingProfessions">
<el-input v-model="form.extendDetail.involvingProfessions" placeholder="请输入更改相关专业" /> </el-form-item
></el-col>
<el-col :span="24">
<el-form-item label="附图" prop="attachmentPic"> <image-upload v-model="form.attachmentPic" :fileSize="100" /> </el-form-item
></el-col>
<el-col :span="24">
<el-form-item label="变更原因" prop="changeReason">
<el-checkbox-group v-model="form.changeReason">
<el-checkbox v-for="dict in design_change_reason_type" :key="dict.value" :value="dict.value">
{{ dict.label }}
</el-checkbox>
</el-checkbox-group>
</el-form-item></el-col
>
<el-col :span="24">
<el-form-item label="变更内容" prop="changeContent">
<el-input v-model="form.changeContent" type="textarea" placeholder="请输入内容" /> </el-form-item
></el-col>
<el-col :span="12">
<el-form-item label="费用" prop="costEstimation">
<el-input v-model="form.costEstimation" type="number" placeholder="请输入费用" /> </el-form-item
></el-col>
<el-col :span="24">
<el-form-item label="变更费用估算表" label-width="110px" prop="costEstimationFile">
<file-upload v-model="form.costEstimationFile" :fileSize="100" /> </el-form-item
></el-col>
<!-- <el-col :span="24">
<el-form-item label="变更文件" prop="fileId"> <file-upload v-model="form.fileId" :fileSize="100" /> </el-form-item
></el-col> -->
<el-col :span="24"
><el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" /> </el-form-item
></el-col>
</el-row>
</div>
</el-form>
</div>
<div class="flex justify-center gap-4 mt-8">
<el-button
v-if="routeParams.type != 'view'"
@click="goBack"
size="large"
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"
size="large"
v-if="routeParams.type != 'view'"
@click="submitForm"
class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors"
>确认</el-button
>
</div>
</el-card>
</div>
</div>
</template>
<script setup name="Leave" lang="ts">
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
import { useUserStoreHook } from '@/store/modules/user';
import { addDesignChange, getDesignChange, catalogList, blueprintList } from '@/api/design/designChange';
const { design_change_reason_type } = toRefs<any>(proxy?.useDict('design_change_reason_type'));
const route = useRoute();
const router = useRouter();
// 获取用户 store
const userStore = useUserStoreHook();
// 从 store 中获取项目列表和当前选中的项目
const currentProject = computed(() => userStore.selectedProject);
const buttonLoading = ref(false);
const volumeCatalogList = ref([]);
const blueprintListAll = ref([]);
let volumeMap = new Map();
//路由参数
const routeParams = ref<Record<string, any>>({});
const leaveFormRef = ref<ElFormInstance>();
const dialog = reactive({
visible: false,
title: '',
isEdit: false
});
const fileVoList = ref([]);
const designId = ref('');
const initFormData = {
id: undefined,
projectId: currentProject.value?.id,
formNo: undefined,
projectName: undefined,
submitUnit: undefined,
specialty: undefined,
specialtyName: undefined,
submitDate: undefined,
volumeName: undefined,
volumeNo: undefined,
attachmentPic: undefined,
changeReason: [],
changeContent: undefined,
costEstimation: undefined,
costEstimationFile: undefined,
fileId: undefined,
status: undefined,
remark: undefined,
saveFile: [],
extendDetail: {
changeCategory: undefined,
ImpProcedure: undefined,
involvingProfessions: undefined,
subName: undefined,
designDisposal: undefined,
designPhase: undefined
}
};
const data = reactive({
form: { ...initFormData },
queryParams: {
pageNum: 1,
pageSize: 10,
projectId: currentProject.value?.id,
fileName: undefined,
fileType: undefined,
fileSuffix: undefined,
fileStatus: undefined,
originalName: undefined,
newest: undefined,
params: {}
},
rules: {
// 卷册号
volumeNo: [{ required: true, message: '请请选择卷册号', trigger: 'change' }],
formNo: [{ required: true, message: '申请单编号不能为空', trigger: 'change' }]
}
});
const { form, rules } = toRefs(data);
/** 表单重置 */
const reset = () => {
form.value = { ...initFormData };
leaveFormRef.value?.resetFields();
};
//返回
const goBack = () => {
proxy.$tab.closePage(route);
router.go(-1);
};
/** 提交按钮 */
const submitForm = () => {
var changeReason = '';
if (form.value.changeReason && form.value.changeReason.length > 0) {
changeReason = form.value.changeReason.join(',');
}
var saveFile = '';
if (form.value.saveFile && form.value.saveFile.length > 0) {
saveFile = form.value.saveFile.join(',');
}
leaveFormRef.value?.validate(async (valid: boolean) => {
if (valid) {
var res;
res = await addDesignChange({ ...form.value, changeReason, saveFile }).finally(() => (buttonLoading.value = false));
if (res.code == 200) {
ElMessage.success('通知成功');
goBack();
} else {
ElMessage.error(res.msg);
}
}
});
};
/** 查询卷册目录列表 */
const getList = async () => {
const res = await catalogList(currentProject.value?.id);
volumeCatalogList.value = res.data;
volumeCatalogList.value.forEach((e) => {
volumeMap.set(e.volumeNumber, e);
});
};
// 获取图纸列表
const getBlueprintList = async () => {
const res = await blueprintList(designId.value);
blueprintListAll.value = res.data;
};
const handleRadio = (val) => {
form.value.saveFile = [];
if (val == 2) {
getBlueprintList();
}
};
const handleSelect = (val) => {
let obj = volumeMap.get(val);
fileVoList.value = obj.fileVoList;
designId.value = obj.design;
form.value.volumeName = obj.volumeName;
form.value.specialty = obj.specialty;
form.value.specialtyName = obj.specialtyName;
form.value.extendDetail.subName = obj.designSubitem;
};
/** 获取详情 */
const getInfo = () => {
buttonLoading.value = false;
nextTick(async () => {
const res = await getDesignChange(routeParams.value.id);
Object.assign(form.value, res.data);
if (form.value.changeReason.length > 0) {
form.value.changeReason = form.value.changeReason.split(',');
}
buttonLoading.value = false;
});
};
onMounted(() => {
nextTick(async () => {
routeParams.value = proxy.$route.query;
reset();
getList();
if (routeParams.value.type != 'add') {
getInfo();
}
});
});
</script>
<style scoped lang="scss">
.designChangeForm {
.el-select {
width: 300px !important;
}
}
/* 全局样式 */
: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>

13
src/views/design/drawing/index.vue
View File

@ -24,8 +24,8 @@
<el-input v-model="queryParams.documentName" placeholder="请输入资料名称" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery" v-hasPermi="['design:volumeCatalog:query']">搜索</el-button>
<el-button icon="Refresh" @click="resetQuery" v-hasPermi="['design:volumeCatalog:query']">重置</el-button>
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
@ -47,6 +47,7 @@
target="_blank"
type="primary"
:underline="false"
v-hasPermi="['design:volumeFileViewer:add']"
@click="handleBookFile(scope.row)"
>
{{ scope.row.fileName }}
@ -55,8 +56,10 @@
</el-table-column>
<el-table-column label="操作" align="center" prop="remark" width="300">
<template #default="scope">
<el-button link type="primary" icon="view" @click="handleViewHis(scope.row)">查阅记录</el-button>
<el-button type="warning" link icon="Download" @click="handleDownload(scope.row)"> 下载 </el-button>
<el-button link type="primary" icon="view" v-hasPermi="['design:drawing:list']" @click="handleViewHis(scope.row)">查阅记录</el-button>
<el-button type="warning" link icon="Download" v-hasPermi="['design:volumeFileViewer:add']" @click="handleDownload(scope.row)">
下载
</el-button>
</template>
</el-table-column>
</el-table>
@ -156,7 +159,7 @@ const histroyList = ref([]);
const getList = async () => {
loading.value = true;
try {
const res = await joinList({ type: catalogueId.value, ...queryParams.value });
const res = await joinList({ type: catalogueId.value, ...queryParams.value, auditStatus: 'finish' });
volumeCatalogList.value = res.rows;
total.value = res.total;
} finally {

41
src/views/design/drawing/indexEdit.vue
View File

@ -36,7 +36,7 @@
</div>
</el-card>
<!-- 提交组件 -->
<submitVerify ref="submitVerifyRef" :task-variables="taskVariables" @submit-callback="submitCallback" />
<submitVerify ref="submitVerifyRef" :businessId1="form.id" :task-variables="taskVariables" @submit-callback="submitCallback" />
<approvalRecord ref="approvalRecordRef"></approvalRecord>
<!-- 流程选择对话框 -->
<el-dialog
@ -50,7 +50,7 @@
<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-option v-for="item in [flowCodeOptions[optionIndex]]" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
<template #footer>
@ -88,12 +88,17 @@ const buttonLoading = ref(false);
const loading = ref(true);
//路由参数
const routeParams = ref<Record<string, any>>({});
const flowCodeOptions = [
const flowCodeOptions = ref([
{
value: currentProject.value?.id + '_designchanged',
label: '变更图纸审批'
},
{
value: currentProject.value?.id + '_moneydesignchanged',
label: '资金设计变更审批'
}
];
]);
const optionIndex = ref<number>(0);
const flowCode = ref<string>('');
const status = ref<string>('');
@ -129,6 +134,7 @@ const initFormData = {
fileUrl: undefined,
fileType: undefined,
fileSuffix: undefined,
costEstimation: undefined,
originalName: undefined,
remark: undefined,
fileId: undefined
@ -144,6 +150,7 @@ const data = reactive({
fileSuffix: undefined,
fileStatus: undefined,
originalName: undefined,
costEstimation: undefined,
newest: undefined,
params: {}
},
@ -182,8 +189,13 @@ const getInfo = () => {
loading.value = true;
buttonLoading.value = false;
nextTick(async () => {
const res = await getDesignChange(routeParams.value.id);
var id = routeParams.value.id;
if (routeParams.value.type === 'approval') {
id = routeParams.value.id.split('_')[0];
}
const res = await getDesignChange(id);
Object.assign(form.value, res.data);
if (res.data.costEstimation) form.value.status = res.data.auditStatus;
loading.value = false;
buttonLoading.value = false;
});
@ -242,12 +254,17 @@ const submitCallback = async () => {
};
//审批
const approvalVerifyOpen = async () => {
submitVerifyRef.value.openDialog(routeParams.value.taskId, true, routeParams.value.businessId);
// submitVerifyRef.value.openDialog(routeParams.value.taskId);
// 判断是否还需要设计验证
if (form.value.isWindow) {
submitVerifyRef.value.openDialog(routeParams.value.taskId, true, routeParams.value.businessId);
} else {
submitVerifyRef.value.openDialog(routeParams.value.taskId);
}
};
// 图纸上传成功之后 开始提交
const submit = async (status, data) => {
form.value = data;
form.value.status = data.auditStatus ? data.auditStatus : data.status;
if (status === 'draft') {
buttonLoading.value = false;
proxy?.$modal.msgSuccess('暂存成功');
@ -255,7 +272,13 @@ const submit = async (status, data) => {
proxy.$router.go(-1);
} else {
if ((form.value.status === 'draft' && (flowCode.value === '' || flowCode.value === null)) || routeParams.value.type === 'add') {
flowCode.value = flowCodeOptions[0].value;
if (form.value.costEstimation == '0') {
optionIndex.value = 0;
} else {
console.log('🚀 ~ submit ~ flowCodeOptions.value:', flowCodeOptions.value[1]);
optionIndex.value = 1;
}
flowCode.value = flowCodeOptions.value[optionIndex.value].value;
dialogVisible.visible = true;
return;
}
@ -275,6 +298,8 @@ onMounted(() => {
loading.value = false;
if (routeParams.value.type === 'update' || routeParams.value.type === 'view' || routeParams.value.type === 'approval') {
getInfo();
} else {
form.value.costEstimation = routeParams.value.costEstimation;
}
});
});

166
src/views/design/drawingreview/detailForm.vue
View File

@ -11,12 +11,17 @@
<el-col :span="12">
<el-form-item label="编号" prop="num">
<!-- prop="num" 需与 rules 中键名一致 -->
<el-input v-model="formData.num" placeholder="请输入编号" />
<el-input v-model="formData.num" disabled placeholder="请输入编号" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="专业" prop="professional">
<el-input v-model="formData.professional" placeholder="请输入专业" />
<el-form-item label="专业" prop="professionalName">
<el-input v-model="formData.professionalName" disabled placeholder="请输入专业" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="卷册" prop="volume">
<el-input v-model="formData.volume" disabled placeholder="请输入卷册" />
</el-form-item>
</el-col>
<el-col :span="12">
@ -24,14 +29,8 @@
<el-input v-model="formData.stage" placeholder="请输入设计阶段" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="卷册" prop="volume">
<el-input v-model="formData.volume" placeholder="请输入卷册" />
</el-form-item>
</el-col>
</el-row>
</div>
<!-- 项目信息区域 -->
<div class="form-section">
<div class="section-title">
@ -54,7 +53,6 @@
</el-col>
</el-row>
</div>
<!-- 人员信息区域 -->
<div class="form-section">
<div class="section-title">
@ -65,25 +63,21 @@
<el-row :gutter="20" class="section-content">
<el-col :span="12">
<el-form-item label="设计人" prop="designer">
<el-input v-model="formData.designer" placeholder="请输入设计人" />
<el-input disabled v-model="formData.designerName" placeholder="请输入设计人" />
</el-form-item>
</el-col>
<el-col :span="12"></el-col>
<el-col :span="12">
<el-form-item label="校审人员" prop="proofreading">
<el-input v-model="formData.proofreading" placeholder="请输入校审人员" />
<el-input disabled v-model="formData.proofreading" placeholder="请输入校审人员" />
</el-form-item>
</el-col>
<!-- <el-col :span="12">
<el-form-item label="校审人员ID" prop="proofreadingId">
<el-input v-model="formData.proofreadingId" placeholder="请输入校审人员ID" />
</el-form-item>
</el-col> -->
<el-col :span="12">
<el-form-item label="校审时间" prop="proofreadingDate">
<el-date-picker
v-model="formData.proofreadingDate"
type="date"
disabled
placeholder="选择校审时间"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
@ -92,29 +86,51 @@
</el-col>
<el-col :span="12">
<el-form-item label="审核人员" prop="audit">
<el-input v-model="formData.audit" placeholder="请输入审核人员" />
<el-input disabled v-model="formData.audit" placeholder="请输入审核人员" />
</el-form-item>
</el-col>
<!-- <el-col :span="12">
<el-form-item label="审核人员ID" prop="auditId">
<el-input v-model="formData.auditId" placeholder="请输入审核人员ID" />
</el-form-item>
</el-col> -->
<el-col :span="12">
<el-form-item label="审核时间" prop="auditDate">
<el-date-picker v-model="formData.auditDate" type="date" placeholder="选择审核时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
<el-date-picker
disabled
v-model="formData.auditDate"
type="date"
placeholder="选择审核时间"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="审定人员" prop="approve">
<el-input disabled v-model="formData.approve" placeholder="请输入审定人员" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="审定时间" prop="approveDate">
<el-date-picker
disabled
v-model="formData.approveDate"
type="date"
placeholder="选择审定时间"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="执行人员" prop="executor">
<el-input v-model="formData.executor" placeholder="请输入执行人员" />
<el-select
v-model="formData.executorId"
@change="changeExecutor"
placeholder="选择执行人员"
class="w-full transition-all duration-300 border-gray-300"
>
<el-option v-for="item in userList" :key="`user-${item.userId}`" :label="item.userName" :value="item.userId" />
</el-select>
<!-- <el-input v-model="formData.executor" placeholder="请输入执行人员" /> -->
</el-form-item>
</el-col>
<!-- <el-col :span="12">
<el-form-item label="执行人员ID" prop="executorId">
<el-input v-model="formData.executorId" placeholder="请输入执行人员ID" />
</el-form-item>
</el-col> -->
<el-col :span="12">
<el-form-item label="执行时间" prop="executorDate">
<el-date-picker v-model="formData.executorDate" type="date" placeholder="选择执行时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
@ -154,17 +170,20 @@
<script setup name="ExamineForm" lang="ts">
import { ref, watch, reactive } from 'vue';
import { fillOutTheDesignVerificationForm, drawingreviewReceipts } from '@/api/design/drawingreview';
import type { FormInstance, FormRules } from 'element-plus';
import { dayjs, type FormInstance, type FormRules } from 'element-plus';
import { useUserStoreHook } from '@/store/modules/user';
import { computed } from 'vue';
import { subProjectListAll } from '@/api/design/drawingreview';
import { subProjectListAll, getDrawingreviewReceipts } from '@/api/design/drawingreview';
import { desUserList } from '@/api/design/appointment';
// 获取用户 store
const userStore = useUserStoreHook();
const userList = ref([]);
const userMap = new Map();
// 从 store 中获取当前选中的项目
const currentProject = computed(() => userStore.selectedProject);
console.log(currentProject.value);
const subProjectList = ref([]);
const Drawingreview = ref({});
let subProjectMap = new Map();
// 定义表单数据类型
interface FormData {
@ -196,9 +215,9 @@ const rules: FormRules = {
num: [{ required: true, message: '请输入编号', trigger: 'blur' }],
professional: [{ required: true, message: '请输入专业', trigger: 'blur' }]
};
const userName = userStore.nickname;
// 表单数据 - 直接在组件内定义，不再通过Props接收
const formData = reactive<FormData>({
const formData = ref({
num: '',
professional: '',
stage: '',
@ -231,8 +250,8 @@ watch(
(newVal) => {
if (newVal) {
// 根据实际项目结构调整赋值字段
formData.projectId = newVal.id || '';
formData.projectName = newVal.name || '';
formData.value.projectId = newVal.id || '';
formData.value.projectName = newVal.name || '';
}
},
{ immediate: true, deep: true }
@ -262,12 +281,12 @@ const resetFields = () => {
// 获取表单数据
const getFormData = (): FormData => {
return { ...formData };
return { ...formData.value };
};
// 设置表单数据
const setFormData = (data: Partial<FormData>) => {
Object.assign(formData, data);
Object.assign(formData.value, data);
};
// 提交表单
@ -275,13 +294,69 @@ const submit = async (businessId, cb) => {
// 先验证表单
await formRef.value?.validate();
cb();
formData.subprojectName = subProjectMap.get(formData.subprojectId);
formData.drawingreviewId = businessId;
const res = await drawingreviewReceipts(formData);
// 加载中
ElLoading.service({
lock: true,
text: '提交中...',
background: 'rgba(0, 0, 0, 0.7)'
});
formData.value.subprojectName = subProjectMap.get(formData.value.subprojectId);
console.log(businessId);
formData.value.drawingreviewId = businessId.replace(/_/g, '');
const res = await drawingreviewReceipts(formData.value);
if (res.code === 200) {
// // 提交成功处理逻辑
// console.log('提交成功');
// 提交成功处理逻辑
console.log('提交成功');
}
// 关闭
ElLoading.service().close();
};
// 获取单据
const getInfo = async (id) => {
// 获取单据
console.log(id);
await getDeptAllUser();
let res = await getDrawingreviewReceipts(id);
console.log(res);
formData.value = res.data;
console.log(formData);
// 设计人 名称 designerName id：designer
// 校审人员 名称 proofreading id: proofreadingId 校审时间 proofreadingDate
// 审定人员 名称 approve id：approveId 审定时间 approveDate
// 审核人员 名称 audit id：auditId 审核时间 auditDate
// userStore.nickname //用户名
// userStore.userId //用户id
if (formData.value.approve) {
} else if (formData.value.audit) {
// 说明流程在第三步
formData.value.approve = userStore.nickname;
formData.value.approveId = userStore.userId;
formData.value.approveDate = dayjs().format('YYYY-MM-DD');
} else if (formData.value.proofreading) {
// 说明流程在第二步
formData.value.audit = userStore.nickname;
formData.value.auditId = userStore.userId;
formData.value.auditDate = dayjs().format('YYYY-MM-DD');
} else if (formData.value.designerName) {
// 说明流程在第一步
formData.value.proofreading = userStore.nickname;
formData.value.proofreadingId = userStore.userId;
formData.value.proofreadingDate = dayjs().format('YYYY-MM-DD');
}
};
/** 获取当前设计用户 */
const getDeptAllUser = async () => {
const res = await desUserList({ projectId: currentProject.value?.id, userType: '2' });
userList.value = res.data || [];
for (let i = 0; i < userList.value.length; i++) {
userMap.set(userList.value[i].userId, userList.value[i].userName);
}
};
const changeExecutor = (val) => {
formData.value.executor = userMap.get(val);
formData.value.executorDate = dayjs().format('YYYY-MM-DD');
};
onMounted(() => {
getSubProject();
@ -292,7 +367,8 @@ defineExpose({
resetFields,
getFormData,
setFormData,
submit
submit,
getInfo
});
</script>

9
src/views/design/prelimScheme/index.vue
View File

@ -48,7 +48,7 @@
v-if="scope.row.status !== 'draft'"
icon="Edit"
@click="handleView(scope.row)"
v-hasPermi="['design:PrelimScheme:query']"
v-hasPermi="['design:prelimScheme:query']"
>查看流程</el-button
>
<el-button
@ -57,7 +57,7 @@
v-if="scope.row.status === 'draft'"
icon="Edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['design:PrelimScheme:edit']"
v-hasPermi="['design:prelimScheme:edit']"
>修改</el-button
>
<!-- <el-button
@ -109,7 +109,7 @@ const dialog = reactive<DialogOption>({
const initFormData: PrelimSchemeForm = {
id: undefined,
projectId: undefined,
projectId: currentProject.value?.id,
ossId: undefined,
fileName: undefined,
fileUrl: undefined,
@ -120,7 +120,8 @@ const data = reactive<PageData<PrelimSchemeForm, PrelimSchemeQuery>>({
queryParams: {
pageNum: 1,
pageSize: 10,
projectId: undefined,
projectId: currentProject.value?.id,
ossId: undefined,
fileName: undefined,
fileUrl: undefined,

11
src/views/design/prelimScheme/indexEdit.vue
View File

@ -173,8 +173,6 @@ const getInfo = () => {
const res = await getPrelimScheme(routeParams.value.id);
Object.assign(form.value, res.data);
form.value.file = res.data.ossId;
showFileList.value = false;
loading.value = false;
buttonLoading.value = false;
});
@ -188,11 +186,10 @@ const submitForm = async (status1: string) => {
if (form.value.id) {
if (!updateFileStatus.value) return proxy?.$modal.msgError('请上传图纸文件');
buttonLoading.value = true;
let data = { id: form.value.id, projectId: form.value.id, file: form.value.file };
if (form.value.file === form.value.ossId) {
let data = { id: form.value.id, projectId: form.value.projectId, file: form.value.file };
if (form.value.file === form.value.ossId && !isUpdateFile.value) {
data.file = '';
res = await updatePrelimScheme(data).finally(() => (buttonLoading.value = false));
if (res.code == 200) {
dialog.visible = false;
submit(status.value, form.value);
@ -286,10 +283,11 @@ const handleUploadSuccess = (list, res) => {
const fileStatus = ref(false);
const updateFileStatus = ref(true);
const isUpdateFile = ref(false); //记录是否在修改页面时是否有新上传的文件
const handleFileChange = (file, fileList) => {
if (form.value.id) {
updateFileStatus.value = true;
isUpdateFile.value = true; //记录是否在修改页面时是否有新上传的文件
}
fileStatus.value = true;
};
@ -297,6 +295,7 @@ const handleFileChange = (file, fileList) => {
const handleFileRemove = (file, fileList) => {
if (form.value.id) {
updateFileStatus.value = false;
isUpdateFile.value = false; //记录是否在修改页面时是否有新上传的文件
}
showFileList.value = true;

612
src/views/design/received/index.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="p-6 bg-gray-50">
<div class="p-6 bg-gray-50 min-h-screen">
<div class="received 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">
@ -7,54 +7,88 @@
<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">
<el-form ref="mainFormRef" :model="form" :rules="mainRules" label-width="120px" class="p-6 md:p-8">
<!-- 基本信息区域 -->
<div class="bg-blue-50 p-4 rounded-lg mb-6">
<div class="bg-blue-50 p-4 rounded-lg mb-6 md:mb-8">
<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">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<el-form-item label="收资人" prop="userId" class="mb-0">
<el-select
:disabled="disabledAll"
v-model="form.userId"
filterable
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-form-item label="专业" prop="user_major" class="mb-0">
<el-select
:disabled="disabledAll"
v-model="form.user_major"
placeholder="请选择专业"
class="transition-all duration-300 border-gray-300"
:rules="{ required: true, message: '请选择专业', trigger: 'change' }"
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 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 label="电话" prop="phone" class="mb-0">
<el-input :disabled="disabledAll" placeholder="请输入电话" v-model="form.phone" autocomplete="off" class="w-full" />
</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 label="邮箱" prop="email" class="mb-0">
<el-input :disabled="disabledAll" placeholder="请输入邮箱" v-model="form.email" autocomplete="off" class="w-full" />
</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 class="mb-8">
<div class="flex items-center justify-between mb-5">
<div style="display: flex; align-items: center">
<h3 class="text-lg font-semibold text-blue-700" style="margin-right: 20px">资料文件清单</h3>
<el-upload
class="upload-excel"
action="#"
v-if="!form.id || form.status == 'draft'"
ref="uploadRef"
:auto-upload="false"
:on-change="importTemplate"
:show-file-list="false"
:accept="'.xlsx,.xls'"
:limit="1"
>
<el-button type="primary" icon="Upload">导入文件</el-button>
</el-upload>
<el-button
v-if="!form.id || form.status == 'draft'"
type="primary"
style="margin-left: 20px"
icon="Download"
@click="exportTemplate"
class="transition-all hover:bg-blue-600"
>
导出模版
</el-button>
</div>
<el-button type="primary" size="small" @click="addDocumentItem" v-if="!disabledAll" icon="Plus" class="transition-all hover:bg-blue-600">
添加资料
</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-form ref="documentsFormRef" :model="form" class="space-y-5">
<div
v-for="(item, index) in form.documents"
:key="item.id"
class="bg-gray-50 p-5 rounded-lg transition-all duration-200 hover:shadow-sm border border-gray-100"
>
<div class="flex justify-between items-center mb-4 pb-3 border-b border-gray-200">
<span class="text-sm font-medium text-gray-700">资料 {{ index + 1 }}</span>
<el-button
type="text"
size="small"
@ -62,32 +96,57 @@
@click="removeDocumentItem(index)"
icon="el-icon-delete"
v-if="form.documents.length > 1 && !disabledAll"
class="transition-all hover:text-red-600"
>
删除
</el-button>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="flex flex-col md:flex-row gap-5 items-stretch">
<el-form-item
label="文件目录名称"
:prop="`documents.${index}.catalogueName`"
:rules="[{ required: true, message: '请输入文件目录名称', trigger: 'blur' }]"
class="mb-4"
class="flex-1 min-w-[280px] mb-0"
>
<el-input :disabled="disabledAll" placeholder="请输入文件目录名称" v-model="item.catalogueName" autocomplete="off" />
<el-input :disabled="disabledAll" placeholder="请输入文件目录名称" v-model="item.catalogueName" autocomplete="off" class="w-full" />
</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
label="人员"
:prop="`documents.${index}.userId`"
:rules="[{ required: true, message: '请选择人员', trigger: 'blur' }]"
class="flex-1 min-w-[220px] mb-0"
>
<el-select
:disabled="disabledAll"
v-model="item.userId"
filterable
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="user in userList" :key="user.userId" :label="user.nickName" :value="user.userId" />
</el-select>
</el-form-item>
<el-form-item label="备注" :prop="`documents.${index}.remark`" class="flex-1 min-w-[220px] mb-0">
<el-input :disabled="disabledAll" placeholder="请输入备注" v-model="item.remark" autocomplete="off" class="w-full" />
</el-form-item>
</div>
</div>
</el-form>
</div>
<!-- 操作按钮区域 -->
<div class="flex justify-center gap-4 mt-8">
<el-button type="primary" @click="submitForm" v-hasPermi="['design:collect:add']" v-if="!form.id || form.status == 'draft'" size="large"
>确认提交</el-button
<!-- 操作按钮区域：居中+间距优化 -->
<div class="flex flex-wrap justify-center gap-4 md:gap-6 mt-10">
<el-button
type="primary"
@click="submitForm"
v-hasPermi="['design:collect:batch']"
v-if="!form.id || form.status == 'draft'"
size="large"
class="px-8 transition-all hover:bg-blue-600"
>
确认提交
</el-button>
<el-button
type="primary"
@click="update"
@ -95,11 +154,23 @@
v-show="form.id && form.status == 'draft'"
icon="Edit"
size="large"
>审核</el-button
class="px-8 transition-all hover:bg-blue-600"
>
<el-button type="primary" @click="update" v-hasPermi="['design:collect:query']" v-show="form.status == 'back'" size="large" icon="Edit"
>重新发起审核</el-button
审核
</el-button>
<el-button
type="primary"
@click="update"
v-hasPermi="['design:collect:query']"
v-show="form.status == 'back'"
size="large"
icon="Edit"
class="px-8 transition-all hover:bg-blue-600"
>
重新发起审核
</el-button>
<el-button
type="primary"
@click="onView"
@ -107,8 +178,11 @@
v-show="form.id && form.status != 'draft'"
icon="view"
size="large"
>查看流程</el-button
class="px-8 transition-all hover:bg-blue-600"
>
查看流程
</el-button>
<el-button
type="success"
v-hasPermi="['design:collect:export']"
@ -116,8 +190,10 @@
v-show="form.id && form.status != 'draft'"
icon="Download"
size="large"
>导出</el-button
class="px-8 transition-all hover:bg-green-600"
>
导出
</el-button>
</div>
</el-form>
</div>
@ -125,49 +201,60 @@
</template>
<script setup name="DataCollectionForm" lang="ts">
import { ref, reactive, computed, onMounted } from 'vue';
import { ref, reactive, computed, onMounted, onUnmounted, watch, getCurrentInstance } from 'vue';
import { useUserStoreHook } from '@/store/modules/user';
import { ElMessage, ElLoading } from 'element-plus';
import { ElMessage, ElLoading, FormRules } from 'element-plus';
import { systemUserList } from '@/api/design/appointment';
import { collectBatch, byProjectId, exportWord } from '@/api/design/received';
// 获取用户 store
import { collectBatch, byProjectId, exportWord, exportExcel } from '@/api/design/received';
import { getUser } from '@/api/system/user';
import type { ComponentInternalInstance, ElFormInstance } from 'element-plus';
import { getInfo } from '@/api/login';
import * as XLSX from 'xlsx';
// 全局实例与状态管理
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 userId = computed(() => userStore.userId);
// 表单引用
const mainFormRef = ref();
// 用户列表
const userList = ref([]);
const userMap = new Map();
const disabledAll = ref(false);
// 表单数据
const mainFormRef = ref<ElFormInstance>();
const documentsFormRef = ref<ElFormInstance>();
// 数据定义
const userList = ref<any[]>([]);
const userMap = new Map<string, string>(); // 存储用户ID与昵称映射
const disabledAll = ref(false); // 表单是否全部禁用
const uploadRef = ref<any>();
// 表单核心数据
const form = reactive({
projectId: currentProject.value?.id,
userId: '', // 收资人
user_major: '', // 专业
user_major: '1', // 专业
phone: '', // 电话
email: '', // 邮箱
id: '',
status: '',
id: '', // 表单ID
status: '', // 表单状态
documents: [
{
id: Date.now(),
catalogueName: '', // 文件目录名称
remark: '' // 备注
remark: '', // 备注
userId: '' // 负责人员
}
] as Array<{
id: number;
catalogueName: string;
remark: string;
userId: string;
num?: number; // 序号（提交时用）
userName?: string; // 人员名称（提交时用）
}>
});
// 主表单验证规则
const mainRules = reactive({
userId: [{ required: true, message: '请输入收资人', trigger: 'blur' }],
userId: [{ required: true, message: '请选择收资人', trigger: 'blur' }],
user_major: [{ required: true, message: '请选择专业', trigger: 'change' }],
phone: [
{ required: true, message: '请输入电话', trigger: 'blur' },
@ -179,124 +266,162 @@ const mainRules = reactive({
]
});
// 添加资料项
/** 添加资料项 */
const addDocumentItem = () => {
form.documents.push({
id: Date.now(),
id: Date.now(), // 用时间戳保证ID唯一
catalogueName: '',
remark: ''
remark: '',
userId: ''
});
};
// 删除资料项
/** 删除资料项 */
const removeDocumentItem = (index: number) => {
if (form.documents.length <= 1) {
ElMessage.warning('至少需要保留一条资料记录');
return;
}
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);
const res = await byProjectId(currentProject.value?.id);
// 重置表单默认值
form.documents = [
{
id: Date.now(),
catalogueName: '',
remark: '',
userId: ''
}
];
disabledAll.value = false;
if (res.code == 200 && res.data) {
console.log('🚀 ~ byProjectIdAll ~ res:', res);
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.map((item: any, index: number) => ({
id: item.id || Date.now() + index, // 确保ID唯一
catalogueName: item.catalogueName || '',
remark: item.remark || '',
userId: item.userId || ''
}));
}
}
console.log(form);
} catch (error) {
ElMessage.error('请完善表单信息后再提交');
ElMessage.error('获取表单数据失败，请刷新重试');
console.error('数据回显错误：', error);
}
};
// 重置表单
/** 提交表单 */
const submitForm = async () => {
if (!mainFormRef.value) return;
try {
// 先验证主表单
await mainFormRef.value.validate();
// 再验证资料列表表单（如果存在）
if (documentsFormRef.value) {
await documentsFormRef.value.validate();
}
// 处理提交数据（补充序号和人员名称）
const submitDocuments = form.documents.map((item, i) => ({
...item,
num: i + 1,
userName: userMap.get(item.userId) || ''
}));
const submitData = {
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: submitDocuments
};
// 调用接口提交
const res = await collectBatch(submitData);
if (res.code === 200) {
ElMessage.success('表单提交成功');
byProjectIdAll(); // 重新拉取最新数据
} else {
ElMessage.warning(res.msg || '提交失败，请重试');
}
} catch (error) {
ElMessage.error('请完善表单必填信息后再提交');
console.error('表单验证失败：', error);
}
};
/** 重置表单 */
const resetForm = () => {
if (mainFormRef.value) {
mainFormRef.value.resetFields();
// form表单数据重置
form.userId = '';
form.user_major = '';
form.phone = '';
form.email = '';
form.id = '';
form.status = '';
}
// 重置资料列表，保留一个空项
// 重置资料列表为1条空记录
form.documents = [
{
id: Date.now(),
catalogueName: '',
remark: ''
remark: '',
userId: ''
}
];
};
/** 查询当前部门的所有用户 */
const getDeptAllUser = async (deptId: any) => {
/** 获取当前部门的所有用户 */
const getDeptAllUser = async (deptId: string | number) => {
try {
const res = await systemUserList({ deptId });
// 实际项目中使用接口返回的数据
userList.value = res.rows;
userList.value = res.rows || [];
// 构建用户ID-昵称映射
userList.value.forEach((user) => {
userMap.set(user.userId, user.nickName);
});
} catch (error) {
ElMessage.error('获取用户列表失败');
ElMessage.error('获取用户列表失败，请刷新重试');
console.error('用户列表获取错误：', error);
}
};
/** 跳转审核页面 */
const update = () => {
proxy.$tab.closePage(proxy.$route);
proxy.$router.push({
proxy?.$tab.closePage(proxy?.$route);
proxy?.$router.push({
path: `/approval/received/indexEdit`,
query: {
id: form.id,
@ -304,9 +429,11 @@ const update = () => {
}
});
};
/** 跳转流程查看页面 */
const onView = () => {
proxy.$tab.closePage(proxy.$route);
proxy.$router.push({
proxy?.$tab.closePage(proxy?.$route);
proxy?.$router.push({
path: `/approval/received/indexEdit`,
query: {
id: form.id,
@ -314,80 +441,217 @@ const onView = () => {
}
});
};
// 页面挂载时初始化数据
onMounted(() => {
// 可以在这里添加初始化逻辑
getDeptAllUser(userStore.deptId).then(() => {
byProjectIdAll();
});
});
/** 获取当前用户详情（回显个人信息） */
const getUserDetail = async () => {
try {
const res = await getInfo();
if (res.data?.user) {
form.userId = res.data.user.userId;
form.phone = res.data.user.phonenumber || '';
form.email = res.data.user.email || '';
}
} catch (err) {
ElMessage.error('获取个人信息失败，部分字段需手动填写');
console.error('用户详情获取错误：', err);
}
};
/** 导出文件 */
const onLoad = async () => {
// 导出接口
if (!form.id) {
ElMessage.warning('请先保存表单再导出');
return;
}
try {
proxy?.download('design/collect/exportWord', { id: form.id }, `收资清单_${new Date().getTime()}.doc`);
} catch (error) {
ElMessage.error('导出失败，请重试');
console.error('文件导出错误：', error);
}
};
const exportTemplate = async () => {
// 导出模版
proxy?.download(
'design/collect/exportWord',
'design/collect/exportExcel',
{
id: form.id
deptId: userStore.deptId
},
`收资清单.zip`
`收资清单表格.xlsx`
);
};
//监听项目id刷新数据
const listeningProject = watch(
() => currentProject.value?.id,
(nid, oid) => {
const importTemplate = async (files, fileList) => {
// 导入表格数据
const file = fileList[0].raw; // 获取原始文件对象
const reader = new FileReader();
let obj = {
id: '编码',
name: '人员',
fliename: '目录名',
remark: '备注'
};
reader.onload = (e) => {
try {
// 读取文件内容
const data = new Uint8Array(e.target.result);
// 解析Excel
const workbook = XLSX.read(data, { type: 'array' });
// 获取第一个工作表名称
const firstSheetName = workbook.SheetNames[0];
// 获取第一个工作表内容
const worksheet = workbook.Sheets[firstSheetName];
// 转换为JSON格式
const jsonData = XLSX.utils.sheet_to_json(worksheet);
if (jsonData.length === 0) {
ElMessage.info('Excel文件中没有数据');
return;
}
let arr = [];
// 判断form.documents 是否对象
jsonData.forEach((item, index) => {
if (item[obj.id]) {
arr.push({
id: Date.now() + index,
catalogueName: item[obj.fliename],
remark: item[obj.remark],
userId: item[obj.id]
});
}
});
form.documents = arr;
uploadRef.value.clearFiles();
console.log(arr);
} catch (err) {}
};
// 以ArrayBuffer方式读取文件
reader.readAsArrayBuffer(file);
};
/** 页面挂载初始化 */
onMounted(() => {
// 先获取当前用户信息，再获取部门用户列表，最后回显表单数据
getUserDetail().then(() => {
getDeptAllUser(userStore.deptId).then(() => {
byProjectIdAll();
});
});
});
/** 监听项目切换，刷新数据 */
const listeningProject = watch(
() => currentProject.value?.id,
(newId, oldId) => {
if (newId !== oldId) {
resetForm();
form.projectId = newId;
getUserDetail().then(() => {
getDeptAllUser(userStore.deptId).then(() => {
byProjectIdAll();
});
});
}
}
);
/** 页面卸载清理监听 */
onUnmounted(() => {
listeningProject();
});
</script>
<style lang="scss">
<style lang="scss" scoped>
// 主容器样式
.received {
width: 90%;
max-width: 1000px;
width: 95%;
max-width: 1200px;
margin-top: 20px;
margin-bottom: 40px;
}
// 全局样式调整，使界面更柔和
// 自定义滚动条（优化长列表体验）
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-thumb {
background-color: #e5e7eb;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background-color: #d1d5db;
}
// Element 组件样式覆盖（统一风格）
::v-deep .el-input__inner,
::v-deep .el-select__input {
border-radius: 6px;
border-color: #dcdfe6;
transition: all 0.2s ease;
::v-deep .el-select__input,
::v-deep .el-select-dropdown__item {
border-radius: 6px !important;
border-color: #dcdfe6 !important;
transition: all 0.2s ease !important;
}
::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);
border-color: #409eff !important;
box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2) !important;
outline: none !important;
}
::v-deep .el-button {
border-radius: 6px;
transition: all 0.2s ease;
::v-deep .el-form-item {
margin-bottom: 0 !important;
}
::v-deep .el-form-item__label {
font-weight: 500;
color: #606266;
font-weight: 500 !important;
color: #606266 !important;
padding-right: 12px !important;
}
// 响应式调整
@media (max-width: 768px) {
.received {
width: 95%;
}
::v-deep .el-button--primary {
background-color: #409eff !important;
border-color: #409eff !important;
}
::v-deep .el-form-item {
margin-bottom: 16px;
::v-deep .el-button--primary:hover {
background-color: #3390e0 !important;
border-color: #3390e0 !important;
}
::v-deep .el-button--success {
background-color: #52c41a !important;
border-color: #52c41a !important;
}
::v-deep .el-button--success:hover {
background-color: #47b811 !important;
border-color: #47b811 !important;
}
// 响应式适配（小屏幕调整）
@media (max-width: 768px) {
.p-6.md\:p-8 {
padding: 4px !important;
}
::v-deep .el-form-item__label {
width: 100px;
width: 100px !important;
font-size: 14px !important;
}
.flex.flex-col.md\:flex-row.gap-5 {
gap: 3px !important;
}
.el-button--large {
padding: 8px 16px !important;
font-size: 14px !important;
}
.bg-blue-50.p-4 {
padding: 15px !important;
}
}
</style>

12
src/views/design/scheme/index.vue
View File

@ -8,7 +8,7 @@
<el-input v-model="queryParams.fileName" placeholder="请输入文件名称" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item>
<el-button type="primary" icon="Search" v-hasPermi="['design:scheme:add']" @click="handleQuery">搜索</el-button>
<el-button type="primary" icon="Search" v-hasPermi="['design:scheme:list']" @click="handleQuery">搜索</el-button>
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
@ -42,15 +42,7 @@
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template #default="scope">
<el-button
link
type="primary"
v-if="scope.row.status !== 'draft'"
icon="Edit"
@click="handleView(scope.row)"
v-hasPermi="['design:PrelimScheme:query']"
>查看流程</el-button
>
<el-button link type="primary" v-if="scope.row.status !== 'draft'" icon="Edit" @click="handleView(scope.row)">查看流程</el-button>
<el-button
link
type="primary"

12
src/views/design/scheme/indexEdit.vue
View File

@ -31,7 +31,11 @@
>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<el-form-item label="设计方案" prop="fileUrl" class="mb-2">
<el-link v-if="form.fileUrl" :href="form.fileUrl" target="_blank" type="primary" :underline="false">
{{ form.fileName }}
</el-link>
<file-upload
v-else
:limit="1"
:fileType="['pdf']"
:fileSize="100"
@ -181,8 +185,6 @@ const getInfo = () => {
const res = await getScheme(routeParams.value.id);
Object.assign(form.value, res.data);
form.value.file = res.data.ossId;
showFileList.value = false;
loading.value = false;
buttonLoading.value = false;
});
@ -198,7 +200,7 @@ const submitForm = async (status1: string) => {
buttonLoading.value = true;
let data = { id: form.value.id, projectId: form.value.id, file: form.value.file };
if (form.value.file === form.value.ossId) {
if (form.value.file === form.value.ossId && !isUpdateFile.value) {
data.file = '';
res = await updateScheme(data).finally(() => (buttonLoading.value = false));
if (res.code == 200) {
@ -294,10 +296,11 @@ const handleUploadSuccess = (list, res) => {
};
const fileStatus = ref(false);
const updateFileStatus = ref(true);
const isUpdateFile = ref(false);
const handleFileChange = (file, fileList) => {
if (form.value.id) {
updateFileStatus.value = true;
isUpdateFile.value = true;
}
fileStatus.value = true;
};
@ -305,6 +308,7 @@ const handleFileChange = (file, fileList) => {
const handleFileRemove = (file, fileList) => {
if (form.value.id) {
updateFileStatus.value = false;
isUpdateFile.value = false;
}
showFileList.value = true;

4
src/views/design/subcontract/index.vue
View File

@ -8,7 +8,7 @@
<el-input v-model="queryParams.subContent" placeholder="请输入分包内容" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery" v-hasPermi="['design:subcontract:add']">搜索</el-button>
<el-button type="primary" icon="Search" @click="handleQuery" v-hasPermi="['design:subcontract:list']">搜索</el-button>
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
@ -49,7 +49,7 @@
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
<el-button v-hasPermi="['design:subcontract:add']" :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</template>

22
src/views/design/volumeCatalog/blueprintEdit.vue
View File

@ -29,14 +29,17 @@
class="space-y-4"
>
<el-form-item label="图纸文件" prop="fileId" class="mb-2 md:col-span-2">
<el-input v-model="form.fileName" disabled placeholder="图纸名称" />
<el-link v-if="form.fileUrl" :href="form.fileUrl" target="_blank" type="primary" :underline="false">
{{ form.fileName }}
</el-link>
<!-- <el-input v-model="form.fileName" disabled placeholder="图纸名称" /> -->
</el-form-item>
</el-form>
</div>
</div>
</el-card>
<!-- 提交组件 -->
<submitVerify ref="submitVerifyRef" :task-variables="taskVariables" @submit-callback="submitCallback" />
<submitVerify ref="submitVerifyRef" :businessId1="form.id" :task-variables="taskVariables" @submit-callback="submitCallback" />
<approvalRecord ref="approvalRecordRef"></approvalRecord>
<!-- 流程选择对话框 -->
<el-dialog
@ -96,7 +99,7 @@ const dialogVisible = reactive<DialogOption>({
const submitVerifyRef = ref<InstanceType<typeof SubmitVerify>>();
//审批记录组件
const approvalRecordRef = ref<InstanceType<typeof ApprovalRecord>>();
//按钮组件
//按钮组件 approvalReadonly =ref(false);
const flowCodeOptions = [
{
value: currentProject.value?.id + '_bpDesignFile',
@ -123,7 +126,8 @@ const initFormData = {
fileUrl: undefined,
status: undefined,
originalName: undefined,
fileVoList: []
fileVoList: [],
auditStatus: undefined
};
const data = reactive({
form: { ...initFormData },
@ -198,8 +202,14 @@ const submitCallback = async () => {
};
//审批
const approvalVerifyOpen = async () => {
// 图纸评审验证
submitVerifyRef.value.openDialog(routeParams.value.taskId, true, routeParams.value.businessId);
// 图纸评审验证 判断是否需要设计验证
if (form.value.isWindow) {
console.log(routeParams.value.businessId);
submitVerifyRef.value.openDialog(routeParams.value.taskId, true, routeParams.value.businessId);
} else {
submitVerifyRef.value.openDialog(routeParams.value.taskId);
}
};
const submit = async (status, data) => {
form.value = data;

78
src/views/design/volumeCatalog/codeDetail.vue
View File

@ -75,44 +75,6 @@
资料名称: {{ info.projectName || '未定义' }} | 卷册号: {{ info.volumeNumber || '未定义' }}
</p>
</div>
<!-- 基本信息区域 - 缩小间隔，增强label与内容区分 -->
<div class="p-3 md:p-4 border-b border-gray-100 dark:border-gray-700/50">
<h3 class="text-base md:text-lg font-semibold mb-2 flex items-center text-gray-800 dark:text-gray-200">
<el-icon style="margin-right: 10px" :size="24" color="#409EFF">
<Document />
</el-icon>
基本信息
</h3>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 md:gap-3">
<InfoItem label="项目名称" value="projectName" :data="info" />
<InfoItem label="资料名称" value="documentName" :data="info" />
<InfoItem label="卷册号" value="volumeNumber" :data="info" />
<InfoItem label="设计子项名称" value="designSubitem" :data="info" />
<InfoItem label="专业名称" value="specialtyName" :data="info" />
<InfoItem label="文件格式" value="fileType" :data="info" />
</div>
</div>
<!-- 人员信息区域 -->
<div class="p-3 md:p-4 border-b border-gray-100 dark:border-gray-700/50">
<h3 class="text-base md:text-lg font-semibold mb-2 flex items-center text-gray-800 dark:text-gray-200">
<el-icon style="margin-right: 10px" :size="24" color="#409EFF">
<Document />
</el-icon>
人员信息
</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-3">
<InfoItem label="负责人" value="principal" :data="info" />
<InfoItem label="设计人员" value="principalName" :data="info" />
<InfoItem label="审核人员" value="reviewerName" :data="info" />
<InfoItem label="创建时间" value="createTime" :data="info" />
</div>
</div>
<!-- 状态信息区域 -->
<div class="p-3 md:p-4">
<h3 class="text-base md:text-lg font-semibold mb-2 flex items-center text-gray-800 dark:text-gray-200">
@ -150,13 +112,13 @@
</div>
</div>
<div class="info-item">
<!-- <div class="info-item">
<span class="info-label">文件大小</span>
<div class="info-value mt-0.5 flex items-center">
<i class="fa fa-hdd-o text-gray-400 dark:text-gray-500 mr-1.5"></i>
{{ info.fileSize || '未知' }}
</div>
</div>
</div> -->
<div class="info-item">
<span class="info-label">更新时间</span>
@ -189,6 +151,42 @@
</div>
</div>
</div>
<!-- 基本信息区域 - 缩小间隔，增强label与内容区分 -->
<div class="p-3 md:p-4 border-b border-gray-100 dark:border-gray-700/50">
<h3 class="text-base md:text-lg font-semibold mb-2 flex items-center text-gray-800 dark:text-gray-200">
<el-icon style="margin-right: 10px" :size="24" color="#409EFF">
<Document />
</el-icon>
基本信息
</h3>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 md:gap-3">
<InfoItem label="项目名称" value="projectName" :data="info" />
<InfoItem label="资料名称" value="documentName" :data="info" />
<InfoItem label="卷册号" value="volumeNumber" :data="info" />
<InfoItem label="设计子项名称" value="designSubitem" :data="info" />
<InfoItem label="专业名称" value="specialtyName" :data="info" />
<InfoItem label="文件格式" value="fileType" :data="info" />
</div>
</div>
<!-- 人员信息区域 -->
<div class="p-3 md:p-4 border-b border-gray-100 dark:border-gray-700/50">
<h3 class="text-base md:text-lg font-semibold mb-2 flex items-center text-gray-800 dark:text-gray-200">
<el-icon style="margin-right: 10px" :size="24" color="#409EFF">
<Document />
</el-icon>
人员信息
</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-3">
<InfoItem label="负责人" value="principal" :data="info" />
<InfoItem label="设计人员" value="principalName" :data="info" />
<InfoItem label="审核人员" value="reviewerName" :data="info" />
<InfoItem label="创建时间" value="createTime" :data="info" />
</div>
</div>
</div>
</main>

110
src/views/design/volumeCatalog/index.vue
View File

@ -39,9 +39,12 @@
:file-size="50"
:onUploadSuccess="handleUploadSuccess"
>
<el-button type="warning" plain icon="Upload">导入</el-button>
<el-button v-hasPermi="['design:volumeCatalog:importData']" type="warning" plain icon="Upload">导入</el-button>
</file-upload>
</el-col>
<el-col :span="1.5">
<el-button type="success" plain icon="Download" @click="exportFile">导出模版</el-button>
</el-col>
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
</template>
@ -52,7 +55,9 @@
<el-table-column label="子项名称" align="center" prop="designSubitem" />
<el-table-column label="设计状态" align="center" prop="designState">
<template #default="scope">
<dict-tag :options="design_state" :value="scope.row.designState" />
<el-tag type="primary" v-if="scope.row.designState == '2'">未出图</el-tag>
<el-tag type="success" v-if="scope.row.designState == '1'">已出图</el-tag>
<!-- <dict-tag :options="design_state" :value="scope.row.designState" /> -->
</template>
</el-table-column>
<el-table-column label="专业" align="center" prop="specialtyName"> </el-table-column>
@ -60,7 +65,9 @@
<el-table-column label="计划出图时间" align="center" prop="plannedCompletion" width="200" />
<el-table-column label="图纸文件" align="center" prop="remark" width="150">
<template #default="scope">
<el-button link type="primary" icon="View" @click="handleView(scope.row)" v-hasPermi="['design:volumeFile:query']">查看文件</el-button>
<el-button link type="primary" icon="View" @click="handleView(scope.row)" v-hasPermi="['design:volumeCatalog:listFile']"
>查看文件</el-button
>
</template>
</el-table-column>
<el-table-column label="外部意见" align="center">
@ -82,7 +89,9 @@
v-hasPermi="['design:volumeFile:add']"
>上传图纸</el-button
>
<el-button link type="primary" icon="Upload" @click="handleOpinion(scope.row)">外部意见</el-button>
<el-button link type="primary" v-hasPermi="['design:volumeFile:edit']" icon="Upload" @click="handleOpinion(scope.row)"
>外部意见</el-button
>
</template>
</el-table-column>
</el-table>
@ -90,17 +99,22 @@
</el-card>
<!-- 添加或修改卷册目录对话框 -->
<el-dialog draggable :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
<el-form ref="volumeCatalogFormRef" :model="form" :rules="rules" label-width="100px">
<el-form ref="volumeCatalogFormRef" :model="form" :rules="rules" label-width="110px">
<el-form-item label="子项" prop="designSubitem">
<el-input v-model="form.designSubitem" placeholder="请输入设计子项" />
</el-form-item>
<el-form-item label="专业" prop="specialty">
<el-select v-model="form.specialty" placeholder="请选择专业">
<el-option :value="item.value" v-for="item in des_user_major" :key="item.value" :label="item.label" />
<el-select v-model="form.specialty" placeholder="请选择专业" @change="changeSpecialty">
<el-option :value="item.userMajor" v-for="item in des_user_major" :key="item.userMajor" :label="item.userMajorName" />
</el-select>
</el-form-item>
<el-form-item label="设计人员" prop="principal">
<el-select v-model="form.principal" placeholder="请选择设计人员" class="transition-all duration-300 border-gray-300">
<el-select
:disabled="!form.specialty"
v-model="form.principal"
placeholder="请选择设计人员"
class="transition-all duration-300 border-gray-300"
>
<el-option v-for="item in userAppList" :key="item.userId" :label="item.userName" :value="item.userId.toString()" />
</el-select>
</el-form-item>
@ -139,6 +153,11 @@
<el-form-item v-if="uploadForm.type == '3'" label="蓝图" prop="fileIds">
<file-upload :fileType="['pdf']" :isShowTip="false" :fileSize="100" v-model="uploadForm.fileIds"></file-upload>
</el-form-item>
<el-form-item v-if="uploadForm.type == '3'" label="抄送人">
<el-select multiple filterable clearable v-model="form.userIds" placeholder="请选择抄送人">
<el-option :value="item.userId" v-for="item in userCoryList" :key="item.userId" :label="item.nickName + '-' + item.phonenumber" />
</el-select>
</el-form-item>
<el-form-item v-if="uploadForm.type == '1'" label="过程图纸" prop="cancellationIds">
<file-upload :fileType="['pdf']" :isShowTip="false" :fileSize="100" v-model="uploadForm.cancellationIds"></file-upload>
</el-form-item>
@ -239,8 +258,10 @@ import {
addVolumeCatalog,
updateVolumeCatalog,
uploadVolumeFile,
majorList,
getVolumeCatafileList,
volumeFileList
volumeFileList,
copyUserList
} from '@/api/design/volumeCatalog';
import { VolumeCatalogVO } from '@/api/design/volumeCatalog/types';
import { useUserStoreHook } from '@/store/modules/user';
@ -249,9 +270,10 @@ import TableContent from './comm/tableContent.vue';
const fileList = ref([]);
import { designUserList } from '@/api/design/appointment';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { design_state, wf_business_status, des_user_major } = toRefs(proxy?.useDict('design_state', 'wf_business_status', 'des_user_major'));
const { design_state, wf_business_status } = toRefs(proxy?.useDict('design_state', 'wf_business_status'));
import { drawingreviewReceiptsDetail, drawingreviewReceiptsList } from '@/api/design/drawingreview';
const volumeCatalogList = ref<VolumeCatalogVO[]>([]);
const des_user_major = ref([]);
const buttonLoading = ref(false);
const loading = ref(true);
const showSearch = ref(true);
@ -265,6 +287,7 @@ const uploadOpinionVisible = ref(false);
const design = ref('');
const total = ref(0);
const dialogHistory = ref(false);
const userCoryList = ref([]);
const opinion = ref('');
const updateRow = ref({
opinion: []
@ -341,13 +364,28 @@ const data = reactive({
rules: {
design: [{ required: true, message: '主键ID不能为空', trigger: 'blur' }],
projectId: [{ required: true, message: '项目ID不能为空', trigger: 'blur' }],
designSubitem: [{ required: true, message: '子项不能为空', trigger: 'blur' }],
volumeNumber: [{ required: true, message: '卷册号不能为空', trigger: 'blur' }],
documentName: [{ required: true, message: '资料名称不能为空', trigger: 'blur' }]
documentName: [{ required: true, message: '资料名称不能为空', trigger: 'blur' }],
plannedCompletion: [{ required: true, message: '计划出图事件不能为空', trigger: 'blur' }],
principal: [{ required: true, message: '设计人员不能为空', trigger: 'blur' }],
specialty: [{ required: true, message: '专业不能为空', trigger: 'blur' }]
}
});
const { queryParams, form, rules } = toRefs(data);
const changeSpecialty = (val) => {
form.value.principal = ''; //清空
getUserAppList(val);
};
// 获取专业列表
const getSpecialtyList = async () => {
const res = await majorList({ projectId: currentProject.value?.id, userType: 2 });
console.log(res);
if (res.code === 200) {
des_user_major.value = res.data;
}
};
/** 查询卷册目录列表 */
const getList = async () => {
loading.value = true;
@ -359,17 +397,10 @@ const getList = async () => {
loading.value = false;
}
};
const getUserAppList = async () => {
const res = await designUserList({ projectId: currentProject.value?.id });
const getUserAppList = async (userMajor) => {
const res = await designUserList({ projectId: currentProject.value?.id, userType: 2, userMajor });
if (res.code === 200) {
console.log(res.rows);
res.rows.forEach((item: any) => {
if (item.userType == 2) {
//设计人员
userAppList.value.push(item);
}
});
userAppList.value = res.rows;
}
};
const handleViewHistory = async (row) => {
@ -392,7 +423,13 @@ const cancel = () => {
reset();
dialog.visible = false;
};
// 获取人员列表
const getDesignUserList = async () => {
const res = await copyUserList({ projectId: currentProject.value?.id, userType: 2 });
if (res.code === 200) {
userCoryList.value = res.data;
}
};
/** 表单重置 */
const reset = () => {
form.value = { ...initFormData };
@ -522,7 +559,7 @@ const onSubmit = async () => {
type: uploadForm.type
};
try {
await uploadVolumeFile(obj);
await uploadVolumeFile({ ...obj, userIds: form.value.userIds });
proxy?.$modal.msgSuccess('文件上传成功');
uploadVisible.value = false;
await getList();
@ -532,7 +569,6 @@ const onSubmit = async () => {
buttonLoading.value = false;
}
};
/** 删除按钮操作 */
const handleDelete = async (row?: VolumeCatalogVO) => {
const _ids = row?.design || ids.value;
@ -607,6 +643,24 @@ const getVolumeFileList = async (type) => {
fileList.value = res.rows;
}
};
const exportFile = () => {
// 导出模版文件
try {
// 创建a标签
const link = document.createElement('a');
// 设置PDF文件路径 - 相对于public目录
link.href = '/catalog.xlsx';
// 设置下载后的文件名
link.download = '设计出图计划导入模版.xlsx';
// 触发点击
document.body.appendChild(link);
link.click();
// 清理
document.body.removeChild(link);
} catch (error) {
alert('下载失败，请重试');
}
};
// 切换
const handleClick = (val) => {
getVolumeFileList(val.props.name);
@ -615,7 +669,8 @@ const handleAuditInfo = (row) => {
// 审核图纸
};
onMounted(() => {
getUserAppList();
getDesignUserList();
getSpecialtyList();
getList();
});
@ -625,7 +680,8 @@ const listeningProject = watch(
(nid, oid) => {
queryParams.value.projectId = nid;
form.value.projectId = nid;
getUserAppList();
getDesignUserList();
getSpecialtyList();
getList();
}
);

16
src/views/design/volumeCatalog/indexEdit.vue
View File

@ -20,16 +20,12 @@
</div>
<div class="p-6">
<div class="grid grid-cols-1 gap-4">
<el-form
ref="leaveFormRef"
:disabled="routeParams.type === 'view' || form.auditStatus == 'waiting'"
:model="form"
:rules="rules"
label-width="100px"
class="space-y-4"
>
<el-form ref="leaveFormRef" :model="form" :rules="rules" label-width="100px" class="space-y-4">
<el-form-item label="图纸文件" prop="fileId" class="mb-2 md:col-span-2">
<el-input v-model="form.fileName" disabled placeholder="图纸名称" />
<!-- <el-input v-model="form.fileName" disabled placeholder="图纸名称" /> -->
<el-link :href="form.fileUrl" target="_blank" type="primary" :underline="false">
{{ form.fileName }}
</el-link>
</el-form-item>
</el-form>
</div>
@ -199,7 +195,7 @@ const submitCallback = async () => {
//审批
const approvalVerifyOpen = async () => {
// 图纸评审验证
submitVerifyRef.value.openDialog(routeParams.value.taskId, true, routeParams.value.businessId);
submitVerifyRef.value.openDialog(routeParams.value.taskId);
};
const submit = async (status, data) => {
form.value = data;

146
src/views/formalities/formalitiesAreConsolidated/index.vue
View File

@ -47,6 +47,23 @@
<template #header>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" plain icon="Plus" @click="handleAdd()" v-hasPermi="['formalities:formalitiesAreConsolidated:getTree']"
>新增</el-button
>
<span style="margin-left: 10px"
><el-tooltip class="box-item" effect="dark" content="从原有模板列表选择新增" placement="top">
<el-icon color="#409efc"><WarningFilled /></el-icon> </el-tooltip
></span>
</el-col>
<el-col :span="1.5" v-hasPermi="['formalities:listOfFormalities:list']">
<el-button type="primary" plain icon="Plus" @click="addTemplate()">新增数据</el-button>
<span style="margin-left: 10px">
<el-tooltip class="box-item" effect="dark" content="创建新模板并添加数据" placement="top">
<el-icon color="#409efc"><WarningFilled /></el-icon>
</el-tooltip>
</span>
</el-col>
<!-- <el-col :span="1.5">
<el-button
type="success"
plain
@ -56,7 +73,7 @@
v-hasPermi="['formalities:formalitiesAreConsolidated:edit']"
>修改</el-button
>
</el-col>
</el-col> -->
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
</template>
@ -64,7 +81,7 @@
<el-table v-loading="loading" :data="formalitiesAreConsolidatedList" @selection-change="handleSelectionChange" row-key="id" default-expand-all>
<el-table-column type="selection" width="55" align="center" />
<!-- <el-table-column label="手续办理清单模板父级" align="center" prop="formalitiesPname" /> -->
<el-table-column label="手续办理清单模板" align="center" prop="formalitiesName" />
<el-table-column label="手续办理清单" align="left" prop="formalitiesName" />
<el-table-column label="计划开始时间" align="center" prop="planTheStartTime" width="180">
<template #default="scope">
<span>{{ parseTime(scope.row.planTheStartTime, '{y}-{m}-{d}') }}</span>
@ -181,6 +198,7 @@
v-model="file"
ref="uploadRef"
uploadUrl="/formalities/formalitiesAnnex"
v-hasPermi="['formalities:formalitiesAnnex:add']"
:data="{ formalitiesId: form.id }"
:fileType="['pdf']"
:auto-upload="false"
@ -213,6 +231,54 @@
</span>
</template>
</el-dialog>
<el-dialog title="新增合规性手续合账" v-model="templateVisbile" width="450">
<el-form-item label="合规性手续模板">
<el-cascader
v-model="tempValue"
:options="tempTreeList"
:props="{
multiple: true,
value: 'id',
label: 'name',
disabled: (node: any) => {
return (node.pid == 0 && !node.children.length) || node.status == 1; // 有 parent 的是二级，没有 parent 的是一级，禁用一级
}
}"
/>
<div style="margin-left: 10px; display: flex; justify-content: center; align-items: center">
<el-tooltip class="box-item" effect="dark" content="列表上已选择得模版不可再选" placement="top">
<el-icon><WarningFilled /></el-icon>
</el-tooltip>
</div>
</el-form-item>
<template #footer>
<span>
<el-button @click="templateVisbile = false">取消</el-button>
<el-button type="primary" @click="setTemp">确定</el-button>
</span>
</template>
</el-dialog>
<!-- 添加或修改手续办理清单模板对话框 -->
<el-dialog title="添加手续办理清单" v-model="tempDialogVisible" width="500px" append-to-body @close="templateCancel">
<el-form ref="listOfFormalitiesFormRef" :model="formTemplate" label-width="80px">
<el-form-item label="父级" prop="formalitiesPid" :rules="[{ required: true, message: '请选择父级', trigger: 'blur' }]">
<el-select v-model="formTemplate.formalitiesPid" placeholder="请选择父级">
<el-option label="根目录" value="0" />
<el-option v-for="item in listOfFormalitiesList" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="名称" prop="formalitiesName" :rules="[{ required: true, message: '请输入名称', trigger: 'blur' }]">
<el-input v-model="formTemplate.formalitiesName" placeholder="请输入名称" />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button :loading="buttonLoading" type="primary" @click="submitFormTemplate">确 定</el-button>
<el-button @click="templateCancel">取 消</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
@ -225,14 +291,18 @@ import {
updateFormalitiesAreConsolidated,
listFormalitiesAnnex,
delFormalitiesAnnex,
editStatus
editStatus,
getTemplateTreeList
} from '@/api/formalities/formalitiesAreConsolidated';
import { listListOfFormalities, addFormalities } from '@/api/formalities/listOfFormalities';
import {
FormalitiesAreConsolidatedVO,
FormalitiesAreConsolidatedQuery,
FormalitiesAreConsolidatedForm
} from '@/api/formalities/formalitiesAreConsolidated/types';
import { useUserStoreHook } from '@/store/modules/user';
import { WarningFilled } from '@element-plus/icons-vue';
const fileVisible = ref(false);
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
// 获取用户 store
@ -261,6 +331,7 @@ const dialog = reactive<DialogOption>({
visible: false,
title: ''
});
const file = ref(null);
const fileParams = reactive({
pageNum: 1,
@ -272,6 +343,8 @@ const statusForm = ref({
projectId: currentProject.value?.id,
processingStatus: undefined
});
const templateVisbile = ref(false);
const tempTreeList = ref([]);
const initFormData: FormalitiesAreConsolidatedForm = {
id: undefined,
@ -307,6 +380,8 @@ const data = reactive<PageData<FormalitiesAreConsolidatedForm, FormalitiesAreCon
const { queryParams, form, rules } = toRefs(data);
const tempValue = ref(null);
/** 查询合规性手续合账列表 */
const getList = async () => {
loading.value = true;
@ -367,6 +442,71 @@ const handleUpdate = async (row?: FormalitiesAreConsolidatedVO) => {
dialog.title = '修改合规性手续合账';
};
//新增
const handleAdd = async () => {
tempValue.value = null;
const res = await getTemplateTreeList({ projectId: currentProject.value.id });
tempTreeList.value = res.data;
templateVisbile.value = true;
};
const tempDialogVisible = ref(false);
const formTemplate: any = ref({
formalitiesPid: '',
formalitiesName: ''
});
const listOfFormalitiesList: any = ref([]);
//新增模版
const addTemplate = async () => {
tempDialogVisible.value = true;
const res = await listListOfFormalities();
listOfFormalitiesList.value = res.data;
};
//确定信息
const submitFormTemplate = async () => {
const params = {
projectId: currentProject.value.id,
addBusFormalitiesAreConsolidatedBo: {
...formTemplate.value
}
};
const res = await addFormalities(params);
if (res.code == 200) {
proxy?.$modal.msgSuccess('操作成功');
templateCancel();
getList();
}
};
//取消
const templateCancel = () => {
tempDialogVisible.value = false;
formTemplate.value.formalitiesPid = '';
formTemplate.value.formalitiesName = '';
};
// 选择模板
const setTemp = async () => {
// form.value.formalitiesPid = tempValue.value[tempValue.value.length - 1];
if (!tempValue.value || !tempValue.value.length) {
proxy?.$modal.msgWarning('请选择模板');
return;
}
let addBusFormalitiesAreConsolidatedBos = tempValue.value.map((item) => {
return {
formalitiesId: item[1],
formalitiesPid: item[0]
};
});
const data = {
addBusFormalitiesAreConsolidatedBos,
projectId: currentProject.value.id
};
const res = await addFormalitiesAreConsolidated(data);
if (res.code == 200) {
proxy?.$modal.msgSuccess('操作成功');
templateVisbile.value = false;
getList();
}
};
/** 上传按钮操作 */
const handleUpload = (row) => {
form.value.id = row.id;

1
src/views/formalities/listOfFormalities/index.vue
View File

@ -1,6 +1,5 @@
<template>
<formalitiesAreConsolidated ref="formalitiesAreConsolidatedRef" class="overlay" v-if="showFormalitiesAreConsolidated" />
<div class="p-2" v-else>
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
<div v-show="showSearch" class="mb-[10px]">

193
src/views/largeScreen/components/ProgressComponent.vue
View File

@ -1,17 +1,17 @@
<template>
<div class="progress_component">
<div class="title">
<span class="progress_title">{{ title }}</span>
<span :class="percentageClass" class="roboto">{{ percentageChange }}</span>
</div>
<div class="roboto" v-if="isShowPrice">
<span>{{ value }}</span>
<span>{{ unit }}</span>
</div>
<div class="my_el_progress">
<el-progress :percentage="progressPercentage" :color="progressColor" :show-text="false" />
</div>
<div class="progress_component">
<div class="title">
<span class="progress_title">{{ title }}</span>
<span :class="percentageClass" class="roboto">{{ percentageChange }}</span>
</div>
<div class="roboto" v-if="isShowPrice">
<span>{{ value }}</span>
<span>{{ unit }}</span>
</div>
<div class="my_el_progress">
<el-progress :percentage="progressPercentage" :color="progressColor" :show-text="false" />
</div>
</div>
</template>
<script setup>
@ -19,103 +19,102 @@ import { defineProps, computed } from 'vue';
// 定义组件属性
const props = defineProps({
// 标题文本
title: {
type: String,
required: true,
default: '指标名称'
},
// 数值
value: {
type: String,
required: true,
default: '0.00'
},
// 单位
unit: {
type: String,
default: '万元'
},
// 百分比变化值（如：-327.55%）
percentageChange: {
type: String,
required: true,
default: '0.00%'
},
// 进度条百分比
progressPercentage: {
type: Number,
required: true,
default: 0
},
// 进度条颜色，默认红色
progressColor: {
type: String,
default: 'rgba(255, 77, 79, 1)'
},
// 是否显示价格
isShowPrice: {
type: Boolean,
default: true
}
// 标题文本
title: {
type: String,
required: true,
default: '指标名称'
},
// 数值
value: {
type: String,
required: true,
default: '0.00'
},
// 单位
unit: {
type: String,
default: '万元'
},
// 百分比变化值（如：-327.55%）
percentageChange: {
type: String,
required: true,
default: '0.00%'
},
// 进度条百分比
progressPercentage: {
type: Number,
required: true,
default: 0
},
// 进度条颜色，默认红色
progressColor: {
type: String,
default: 'rgba(255, 77, 79, 1)'
},
// 是否显示价格
isShowPrice: {
type: Boolean,
default: true
}
});
// 计算百分比变化的样式类（红色或绿色）
const percentageClass = computed(() => {
// 检查变化值是否为正数
const isPositive = props.percentageChange.startsWith('+') ||
(!props.percentageChange.startsWith('-') && props.percentageChange !== '0.00%');
return isPositive ? 'green' : 'red';
// 检查变化值是否为正数
const isPositive = props.percentageChange.startsWith('+') || (!props.percentageChange.startsWith('-') && props.percentageChange !== '0.00%');
return isPositive ? 'green' : 'red';
});
</script>
<style lang="scss" scoped>
.progress_component {
width: 100%;
height: 100%;
width: 100%;
height: 100%;
margin-bottom: 10px;
:deep(.el-progress-bar__outer) {
background-color: transparent;
}
:deep(.el-progress-bar__inner),
:deep(.el-progress-bar__outer) {
border-radius: unset;
}
.my_el_progress {
margin-top: 15px;
padding: 10px;
box-sizing: border-box;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.title {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
font-size: 12px;
}
:deep(.el-progress-bar__outer) {
background-color: transparent;
}
.progress_title {
color: rgba(143, 171, 191, 1);
font-size: 12px;
font-family: SourceHanSansCN-Regular;
font-weight: 400;
}
:deep(.el-progress-bar__inner),
:deep(.el-progress-bar__outer) {
border-radius: unset;
}
.roboto {
font-family: Roboto-Regular;
font-weight: 400;
}
.my_el_progress {
margin-top: 15px;
padding: 10px;
box-sizing: border-box;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.red {
color: rgba(255, 77, 79, 1);
}
.title {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
font-size: 12px;
}
.progress_title {
color: rgba(143, 171, 191, 1);
font-size: 12px;
font-family: SourceHanSansCN-Regular;
font-weight: 400;
}
.roboto {
font-family: Roboto-Regular;
font-weight: 400;
}
.red {
color: rgba(255, 77, 79, 1);
}
.green {
color: rgba(0, 227, 150, 1);
}
.green {
color: rgba(0, 227, 150, 1);
}
}
</style>
</style>

57
src/views/largeScreen/components/RevenueContractCard.vue
View File

@ -2,29 +2,12 @@
<div class="stat-card" :style="customStyles">
<!-- 标题区域 -->
<div class="stat-card__title">{{ title }}</div>
<!-- 数值区域 -->
<div class="stat-card__value-container">
<span class="stat-card__value">{{ formattedValue }}</span>
<span class="stat-card__value">{{ props.value }}</span>
<span class="stat-card__unit">{{ unit }}</span>
</div>
<!-- 底部信息区域 -->
<div class="stat-card__footer">
<div class="stat-card__trend">
<img
class="stat-card__trend-icon"
:src="'/src/assets/large/' + trendIcon+'.png'"
:alt="trendDirection === 'up' ? '上升' : '下降'"
>
<span class="stat-card__trend-text">{{ trendText }}</span>
</div>
<img
class="stat-card__badge"
:src="'/src/assets/large/'+badgeIcon+'.png'"
alt="徽章图标"
>
</div>
</div>
</template>
@ -40,7 +23,7 @@ const props = defineProps({
},
// 数值
value: {
type: Number,
type: Number || String,
default: 205805.17
},
// 单位
@ -78,6 +61,10 @@ const props = defineProps({
customStyles: {
type: Object,
default: () => ({})
},
showIcon: {
type: Boolean,
default: false
}
});
@ -103,22 +90,24 @@ const trendText = computed(() => {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 20px;
padding: 35px 10px;
box-sizing: border-box;
border: 1px solid rgba(29, 214, 255, 0.1);
border-radius: 4px; // 增加轻微圆角，提升视觉效果
&__title {
font-size: 14px;
color: #8FABBF;
color: #8fabbf;
line-height: 20px;
}
&__value-container {
display: flex;
// display: flex;
align-items: baseline;
// align-items: center;
// flex-direction: column;
}
&__value {
font-size: 24px;
color: #fff;
@ -126,34 +115,34 @@ const trendText = computed(() => {
margin-right: 5px;
font-weight: bold;
}
&__unit {
color: #8FABBF;
color: #8fabbf;
font-size: 14px;
}
&__footer {
display: flex;
justify-content: space-between;
align-items: center;
}
&__trend {
display: flex;
align-items: center;
}
&__trend-icon {
width: 12px;
height: 12px;
margin-right: 4px;
}
&__trend-text {
font-size: 14px;
color: #8FABBF;
color: #8fabbf;
}
&__badge {
width: 40px;
height: 40px;

183
src/views/largeScreen/components/bottomboxconpoent.vue
View File

@ -1,45 +1,162 @@
<template>
<div class="bottom_box">
<div class="bottom_box_title">收入合同</div>
<div>
<span class="bottom_box_number">205,805.17</span>
<span>万元</span>
</div>
<div class="bottom_box_bottom">
<el-progress :percentage="50" color="rgba(255, 147, 42, 1)" />
</div>
<div class="bottom_box_text">
成本率
</div>
<!-- 材料成本展示框 -->
<div class="bottom_box">
<div class="bottom_box_title">材料成本</div>
<div class="bottom_box_bottom">
<el-progress :percentage="materialProgressPercent" color="rgba(255, 147, 42, 1)"
:format="(percent) => `${percent.toFixed(1)}%`" />
</div>
<div class="bottom_box_text">成本使用率</div>
<div class="cost-item">
<span class="cost-label">材料成本：</span>
<span class="cost-value">{{ materialCost.toFixed(2) }} 万元</span>
</div>
</div>
<!-- 分包成本展示框 -->
<div class="bottom_box">
<div class="bottom_box_title">分包成本</div>
<div class="bottom_box_bottom">
<el-progress :percentage="subcontractProgressPercent" color="rgba(0, 227, 150, 1)"
:format="(percent) => `${percent.toFixed(1)}%`" />
</div>
<div class="bottom_box_text">成本使用率</div>
<div class="cost-item">
<span class="cost-label">分包成本：</span>
<span class="cost-value">{{ subcontractCost.toFixed(2) }} 万元</span>
</div>
</div>
<!-- 劳务成本展示框 -->
<div class="bottom_box">
<div class="bottom_box_title">劳务成本</div>
<div class="bottom_box_bottom">
<el-progress :percentage="laborProgressPercent" color="rgba(255, 77, 79, 1)"
:format="(percent) => `${percent.toFixed(1)}%`" />
</div>
<div class="bottom_box_text">成本使用率</div>
<div class="cost-item">
<span class="cost-label">劳务成本：</span>
<span class="cost-value">{{ laborCost.toFixed(2) }} 万元</span>
</div>
</div>
<!-- 管理成本展示框 -->
<div class="bottom_box">
<div class="bottom_box_title">管理成本</div>
<div class="bottom_box_bottom">
<el-progress :percentage="manageProgressPercent" color="rgba(29, 214, 255, 1)"
:format="(percent) => `${percent.toFixed(1)}%`" />
</div>
<div class="bottom_box_text">成本使用率</div>
<div class="cost-item">
<span class="cost-label">管理成本：</span>
<span class="cost-value">{{ manageCost.toFixed(2) }} 万元</span>
</div>
</div>
</template>
<script setup>
import { ref, onMounted, computed } from 'vue';
import { ElProgress } from 'element-plus';
import { cost } from '@/api/largeScreen/index';
// 定义各类成本的响应式数据
const materialCost = ref(0); // 材料成本
const subcontractCost = ref(0); // 分包成本
const laborCost = ref(0); // 劳务成本
const manageCost = ref(0); // 管理成本
// 进度条相关配置（每个成本单独设置预算，这里假设每个成本预算相同，可根据实际调整）
const budgetCost = 10000; // 单个成本项的预算总成本（用于计算使用率）
// 计算每个成本项的进度百分比
const materialProgressPercent = computed(() => {
const percent = (materialCost.value / budgetCost) * 100;
return Math.min(percent, 100);
});
const subcontractProgressPercent = computed(() => {
const percent = (subcontractCost.value / budgetCost) * 100;
return Math.min(percent, 100);
});
const laborProgressPercent = computed(() => {
const percent = (laborCost.value / budgetCost) * 100;
return Math.min(percent, 100);
});
const manageProgressPercent = computed(() => {
const percent = (manageCost.value / budgetCost) * 100;
return Math.min(percent, 100);
});
// 请求成本数据
const getCostData = async () => {
try {
const res = await cost();
if (res.code === 200) {
// 为各类成本赋值（转换为数字类型）
materialCost.value = Number(res.data.materialCost);
subcontractCost.value = Number(res.data.subcontractCost);
laborCost.value = Number(res.data.laborCost);
manageCost.value = Number(res.data.manageCost);
}
} catch (error) {
console.error('获取成本数据失败：', error);
}
};
// 页面挂载时请求数据
onMounted(() => {
getCostData();
});
</script>
<style lang="scss">
.bottom_box {
width: 225px;
height: 147px;
height: 100%;
padding: 10px;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-around;
width: 225px;
height: auto;
padding: 10px;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 8px;
background: rgba(12, 24, 46, 0.8);
margin-bottom: 10px;
}
.bottom_box_title,
.bottom_box_text {
color: rgba(143, 171, 191, 1);
font-size: 14px;
line-height: 20px;
}
.bottom_box_title {
color: rgba(143, 171, 191, 1);
font-size: 14px;
line-height: 20px;
font-weight: bold;
}
.bottom_box_number {
font-size: 24px;
color: #fff;
line-height: 30px;
}
}
</style>
.bottom_box_text {
color: rgba(143, 171, 191, 1);
font-size: 14px;
line-height: 20px;
margin-bottom: 5px;
}
.bottom_box_bottom {
width: 100%;
height: 8px;
margin: 5px 0;
}
.cost-item {
color: #fff;
font-size: 14px;
line-height: 26px;
display: flex;
justify-content: space-between;
}
.cost-label {
color: rgba(143, 171, 191, 1);
}
.cost-value {
font-weight: 500;
color: #fff;
}
</style>

263
src/views/largeScreen/components/centerPage.vue
View File

@ -1,146 +1,167 @@
<template>
<div class="centerPage">
<div>
<div style="height: 147px;width: 100%;display: flex;justify-content: space-between;">
<!-- <div class="top_box">
<div class="top_box_title">收入合同</div>
<div>
<span class="top_box_number">205,805.17</span>
<span>万元</span>
</div>
<div class="top_box_bottom">
<div>
<img class="up_img" src="@/assets/large/up.png" alt=""></img>
<span class="top_box_title"> 3.2% 较上月</span>
</div>
<img class="top_img" src="@/assets/large/top1.png" alt=""></img>
</div>
</div> -->
<RevenueContractCard title="收入合同" :value="156234.89" :growthRate="-1.5" trendDirection="up" trendIcon="up"
badgeIcon="top1" period="较上月" />
<RevenueContractCard title="支出合同" :value="156234.89" :growthRate="-1.5" trendDirection="up" trendIcon="up"
badgeIcon="top2" period="较上月" />
<RevenueContractCard title="合同利润" :value="156234.89" :growthRate="-1.5" trendDirection="up" trendIcon="down"
badgeIcon="top3" period="较上月" />
<RevenueContractCard title="工程变更" :value="156234.89" :growthRate="-1.5" trendDirection="up" trendIcon="up"
badgeIcon="top4" period="较上月" />
<div style="height: 147px; width: 100%; display: flex; justify-content: space-between">
<!-- 收入合同：保持万元显示 -->
<RevenueContractCard title="收入合同" :value="formatToTenThousand(data.incomeTotalAmount, 'tenThousand')" />
<!-- 支出合同：保持万元显示 -->
<RevenueContractCard title="支出合同" :value="formatToTenThousand(data.expensesTotalAmount, 'tenThousand')" />
<!-- 合同利润：保持万元显示 -->
<RevenueContractCard title="合同利润" :value="formatToTenThousand(data.profitAmount, 'tenThousand')" />
<!-- 工程变更：改为百分比显示 -->
<RevenueContractCard title="工程变更" :value="formatToTenThousand(data.changeAmount, 'percentage')" unit="" />
</div>
</div>
<div class="centerPage_map">
<div ref="mapRef" class="map-container" style="width: 100%; height: 100%" />
</div>
<div>
<div style="height: 147px;width: 100%;display: flex;justify-content: space-between;">
<!-- <div class="bottom_box">
<div class="bottom_box_title">收入合同</div>
<div>
<span class="bottom_box_number">205,805.17</span>
<span>万元</span>
</div>
<div class="bottom_box_bottom">
<el-progress :percentage="50" color="rgba(255, 147, 42, 1)" />
</div>
<div class="bottom_box_text">
成本率
</div>
</div> -->
<bottomboxconpoent> </bottomboxconpoent>
<bottomboxconpoent> </bottomboxconpoent>
<bottomboxconpoent> </bottomboxconpoent>
<bottomboxconpoent> </bottomboxconpoent>
<div style="height: 147px; width: 100%; display: flex; justify-content: space-between">
<bottomboxconpoent />
</div>
</div>
</div>
</template>
<script setup lang="ts">
// import { getPowerStationOverview } from '@/api/large';
import * as echarts from 'echarts';
import china from '@/assets/china.json';
import RevenueContractCard from './RevenueContractCard.vue';
import bottomboxconpoent from './bottomboxconpoent.vue';
const data = ref<any>({});
import { totalAmount, projectGis } from '@/api/largeScreen/index'; // 导入projectGis接口
import { ref, onMounted, onUnmounted, nextTick } from 'vue';
// 地图容器引用
// 响应式数据（所有字段均为string，匹配接口返回）
const data = ref({
incomeTotalAmount: '0.00',
expensesTotalAmount: '0.00',
profitAmount: '0.00',
changeAmount: '0.00' // 接口返回的原始数值（如"0.05"代表5%）
});
// 地图相关变量
const mapRef = ref<HTMLDivElement | null>(null);
// ECharts实例
let myChart: any = null;
const projectData = ref<any[]>([]); // 存储项目地理信息数据
// 响应窗口大小变化
const handleResize = () => {
if (myChart) {
myChart.resize();
// 接口请求：获取合同数据
const getContractData = async () => {
try {
const response = await totalAmount();
if (response.code === 200) {
data.value = response.data;
} else {
console.error('合同数据请求失败：', response.msg);
}
} catch (error) {
console.error('合同数据调用异常：', error);
}
};
// 初始化地图
// 新增：获取项目地理信息数据
const getProjectGisData = async () => {
try {
const response = await projectGis();
if (response.code === 200) {
// 过滤掉没有经纬度的项目
projectData.value = response.data.filter((item: any) => item.lng !== null && item.lat !== null && item.lng !== '' && item.lat !== '');
console.log('项目地理数据：', projectData.value);
} else {
console.error('项目地理数据请求失败：', response.msg);
}
} catch (error) {
console.error('项目地理数据调用异常：', error);
}
};
/**
* 工具函数：根据类型处理数据显示
* @param value 接口返回的原始string数值
* @param type 处理类型：tenThousand（万元）、percentage（百分比）
* @returns 直接显示的字符串
*/
const formatToTenThousand = (value: string, type: 'tenThousand' | 'percentage') => {
const num = parseFloat(value);
if (isNaN(num)) return type === 'percentage' ? '0.00%' : '0.00';
if (type === 'percentage') {
return (num * 100).toFixed(2) + '%';
}
return (num / 10000).toFixed(2);
};
// 地图resize处理
const handleResize = () => {
if (myChart) myChart.resize();
};
// 初始化地图（修改为使用接口数据）
const initEcharts = () => {
if (!mapRef.value) {
console.error('未找到地图容器元素');
if (!mapRef.value || projectData.value.length === 0) {
console.error('未找到地图容器或项目数据');
return;
}
// 注册地图
echarts.registerMap('china', china as any);
// 地图数据
const mapData: any = [{ name: '田东县', value: 1, itemStyle: { color: '#fff' } }];
// 散点数据
// 散点数据 - 使用图片标记并调整名称位置
const scatterData: any[] = [
{
name: '田东光伏智慧生态工地开发项目',
value: [107.15, 23.63],
// 使用图片作为标记（注意：需替换为你的图片实际路径）
symbol: 'diamond',
// 标记颜色
itemStyle: {
color: '#0166d6'
},
// 图片标记大小（宽, 高）
symbolSize: [20, 20],
// 名称样式设置
label: {
show: true,
formatter: '{b}', // 显示名称
position: 'top', // 名称在图片上方
color: '#fff',
fontSize: 12,
// 可选：添加文字背景以增强可读性
backgroundColor: 'rgba(3, 26, 52, 0.7)',
padding: [3, 6],
borderRadius: 3
}
// 从接口数据生成散点数据
const scatterData = projectData.value.map((item) => ({
name: item.projectName,
value: [parseFloat(item.lng), parseFloat(item.lat)], // 转换为数值类型
shortName: item.shortName,
projectSite: item.projectSite,
symbol: 'diamond',
itemStyle: { color: '#0166d6' },
symbolSize: [20, 20],
label: {
show: true,
formatter: '{b}', // 显示项目名称
position: 'top',
color: '#fff',
fontSize: 12,
backgroundColor: 'rgba(3, 26, 52, 0.7)',
padding: [3, 6],
borderRadius: 3
}
];
// 初始化新实例，强制清除缓存
}));
myChart = echarts.init(mapRef.value, null, {
renderer: 'canvas', // 明确指定渲染器
useDirtyRect: false // 禁用脏矩形渲染，避免样式缓存
renderer: 'canvas',
useDirtyRect: false
});
// 配置项
const option: any = {
roam: true, // 关键配置：允许鼠标滚轮缩放和拖拽平移
roam: true, // 允许缩放和平移
geo: {
type: 'map',
map: 'china',
zoom: 5,
center: [107.15, 23.63],
label: {
show: false,
color: '#fff'
},
zoom: 4, // 调整初始缩放级别
center: [108.95, 34.27], // 中国中心位置经纬度
label: { show: false, color: '#fff' },
itemStyle: {
areaColor: '#031a34', // 地图区域底色
borderColor: '#1e3a6e', // 区域边框颜色
areaColor: '#031a34',
borderColor: '#1e3a6e',
borderWidth: 1
}
},
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(3, 26, 52, 0.8)',
borderColor: '#1e3a6e',
textStyle: {
color: '#fff'
},
formatter: function (params: any) {
return params.name + (params.value ? `：${params.value}` : '');
if (params.data) {
// 处理散点数据
const data = params.data;
return `
<div style="font-weight: bold;">${data.name}</div>
<div>地点：${data.projectSite}</div>
<div>经纬度：${data.value[0].toFixed(6)}, ${data.value[1].toFixed(6)}</div>
`;
}
}
},
series: [
@ -148,47 +169,39 @@ const initEcharts = () => {
type: 'map',
map: 'china',
geoIndex: 0,
// 关键：在series级别定义emphasis，优先级最高
emphasis: {
areaColor: '#fff', // 强制设置hover颜色
label: {
show: true,
color: '#fff'
},
itemStyle: {
areaColor: '#02417e' // 重复设置确保生效
}
areaColor: '#fff',
label: { show: true, color: '#fff' },
itemStyle: { areaColor: '#02417e' }
},
// 确保没有使用默认样式
select: {
itemStyle: {
areaColor: '#02417e'
}
},
data: mapData
select: { itemStyle: { areaColor: '#02417e' } },
data: [] // 可以留空，或根据需要添加区域数据
},
{
type: 'scatter',
coordinateSystem: 'geo',
data: scatterData
data: scatterData,
emphasis: {
scale: true, // 鼠标悬停时放大
symbolSize: [25, 25]
}
}
]
};
// 设置配置项
myChart.setOption(option);
};
// 组件挂载时初始化
// 组件生命周期
onMounted(() => {
// 确保DOM渲染完成
nextTick(() => {
nextTick(async () => {
// 先获取合同数据和项目地理数据，再初始化地图
await Promise.all([getContractData(), getProjectGisData()]);
initEcharts();
window.addEventListener('resize', handleResize);
});
});
// 组件卸载时清理
onUnmounted(() => {
window.removeEventListener('resize', handleResize);
if (myChart) {
@ -196,15 +209,6 @@ onUnmounted(() => {
myChart = null;
}
});
// const getDataList = () => {
// getPowerStationOverview().then((res) => {
// console.log(res);
// if (res.code == 200) {
// data.value = res.data;
// }
// });
// };
// getDataList();
</script>
<style scoped lang="scss">
@ -215,14 +219,11 @@ onUnmounted(() => {
flex-direction: column;
justify-content: space-between;
padding: 0 10px 10px 10px;
box-sizing: border-box;
.centerPage_map {
width: 100%;
height: 60%;
}
}
</style>

343
src/views/largeScreen/components/leftPage.vue
View File

@ -1,56 +1,301 @@
<template>
<div class="leftPage">
<!-- -->
<div class="kpi_box">
<TitleComponent :title="'支付KPI'" style="margin-bottom: 20px;"/>
<ProgressComponent
title="应收账款"
value="123,456.78"
percentageChange="+25.30%"
progressPercentage="75"
progressColor="rgba(255, 77, 79, 1)"
/>
<ProgressComponent
title="应付账款"
value="123,456.78"
percentageChange="+25.30%"
progressPercentage="25"
progressColor="rgba(29, 214, 255, 1)"
/>
<ProgressComponent
title="本月付款"
value="123,456.78"
percentageChange="+25.30%"
progressPercentage="45"
progressColor="rgba(0, 227, 150, 1)"
/>
<ProgressComponent
title="本月收款"
value="123,456.78"
percentageChange="+25.30%"
progressPercentage="10"
progressColor="rgba(255, 147, 42, 1)"
/>
<TitleComponent :title="'支付KPI'" style="margin-bottom: 20px" />
<ProgressComponent title="应收账款" :value="formatCurrency(incomeData.planAmount)"
:percentageChange="getPercentageChange(incomeData.planAmount, incomeData.actualAmount)"
:progressPercentage="getProgressPercentage(incomeData.planAmount, incomeData.actualAmount)"
progressColor="rgba(255, 77, 79, 1)" />
<ProgressComponent title="应付账款" :value="formatCurrency(expensesData.planAmount)"
:percentageChange="getPercentageChange(expensesData.planAmount, expensesData.actualAmount)"
:progressPercentage="getProgressPercentage(expensesData.planAmount, expensesData.actualAmount)"
progressColor="rgba(29, 214, 255, 1)" />
<ProgressComponent title="本月付款" :value="formatCurrency(expensesData.actualAmount)"
:percentageChange="getPercentageChange(expensesData.planAmount, expensesData.actualAmount)"
:progressPercentage="getProgressPercentage(expensesData.planAmount, expensesData.actualAmount)"
progressColor="rgba(0, 227, 150, 1)" />
<ProgressComponent title="本月收款" :value="formatCurrency(incomeData.actualAmount)"
:percentageChange="getPercentageChange(incomeData.planAmount, incomeData.actualAmount)"
:progressPercentage="getProgressPercentage(incomeData.planAmount, incomeData.actualAmount)"
progressColor="rgba(255, 147, 42, 1)" />
</div>
<div class="contract_box">
<EchartBox :option="barOption" />
<div style="height: 60px;">
<TitleComponent :title="'收支合同分析'" style="margin-bottom: 20px" />
</div>
<!-- 切换按钮 -->
<div style="margin-bottom: 10px; text-align: center">
<button @click="switchChart('income')"
:style="activeChart === 'income' ? activeBtnStyle : defaultBtnStyle">收入合同</button>
<button @click="switchChart('expenses')" :style="activeChart === 'expenses' ? activeBtnStyle : defaultBtnStyle"
style="margin-left: 15px">
支出合同
</button>
</div>
<!-- 环形图容器：固定高度确保图表不拉伸，添加flex居中 -->
<div class="chart-container">
<EchartBox :option="pieOption" />
</div>
</div>
</div>
</template>
<script setup>
import { ref, reactive, onMounted, computed, toRefs, getCurrentInstance, nextTick } from 'vue';
// import echarts from 'echarts';
import TitleComponent from './TitleComponent.vue';
import { ref, onMounted, watch } from 'vue';
import TitleComponent from './TitleComponent.vue';
import ProgressComponent from './ProgressComponent.vue';
import EchartBox from '@/components/EchartBox/index.vue';
import { getBarOptions2 } from './optionList';
const barOption = ref();
const getCapitalData = (data) => {
barOption.value = getBarOptions2();
import { incomePay, expensesPay, incomeAnalyze, expensesAnalyze } from '@/api/largeScreen/index';
// 初始化数据容器
const incomeData = ref({ planAmount: '0.00', actualAmount: '0.00' }); // 收入相关数据（应收/收款）
const expensesData = ref({ planAmount: '0.00', actualAmount: '0.00' }); // 支出相关数据（应付/付款）
const pieOption = ref({}); // 环形图配置
const activeChart = ref('income'); // 当前激活的图表类型：income-收入合同，expenses-支出合同
// 新增：存储合同数据及对应总数（避免重复计算）
const chartData = ref({
income: { firstCount: 0, secondCount: 0, thirdCount: 0, fourthCount: 0, total: 0 }, // 收入合同+总数
expenses: { firstCount: 0, secondCount: 0, thirdCount: 0, fourthCount: 0, total: 0 } // 支出合同+总数
});
// 按钮样式
const defaultBtnStyle = {
padding: '4px 16px',
border: '1px solid rgba(29, 214, 255, 0.5)',
backgroundColor: 'transparent',
color: 'rgba(29, 214, 255, 1)',
cursor: 'pointer',
borderRadius: '4px'
};
onMounted(() => {
getCapitalData();
const activeBtnStyle = {
...defaultBtnStyle,
backgroundColor: 'rgba(29, 214, 255, 0.2)',
borderColor: 'rgba(29, 214, 255, 1)'
};
/**
* 格式化金额为带千分位的格式
* @param {string} amount 金额字符串
* @returns {string} 格式化后的金额
*/
const formatCurrency = (amount) => {
if (!amount) return '0.00';
return Number(amount).toLocaleString('zh-CN', {
minimumFractionDigits: 2,
maximumFractionDigits: 2
});
};
/**
* 计算百分比变化（保留两位小数）
* @param {string} plan 计划金额
* @param {string} actual 实际金额
* @returns {string} 带正负号的百分比字符串
*/
const getPercentageChange = (plan, actual) => {
const planNum = Number(plan);
const actualNum = Number(actual);
if (planNum === 0) {
return planNum === actualNum ? '0.00%' : '+100.00%';
}
const change = ((actualNum - planNum) / planNum) * 100;
return `${change >= 0 ? '+' : ''}${change.toFixed(2)}%`;
};
/**
* 计算进度百分比（保留整数）
* @param {string} plan 计划金额
* @param {string} actual 实际金额
* @returns {number} 进度百分比（0-100）
*/
const getProgressPercentage = (plan, actual) => {
const planNum = Number(plan);
const actualNum = Number(actual);
if (planNum === 0) {
return actualNum === 0 ? 0 : 100;
}
const percentage = (actualNum / planNum) * 100;
return Math.min(Math.round(percentage), 100); // 限制最大为100
};
/**
* 获取并处理资金数据（原逻辑保留）
*/
const getCapitalData = async () => {
try {
const [incomeRes, expensesRes] = await Promise.all([incomePay(), expensesPay()]);
if (incomeRes.code === 200) {
incomeData.value = incomeRes.data;
}
if (expensesRes.code === 200) {
expensesData.value = expensesRes.data;
}
} catch (error) {
console.error('获取资金数据失败：', error);
}
};
/**
* 计算单类合同总数（复用方法）
* @param {Object} data 单类合同数据（收入/支出）
* @returns {number} 合同总数
*/
const calculateTotalCount = (data) => {
return data.firstCount + data.secondCount + data.thirdCount + data.fourthCount;
};
// 新增：标记合同图表数据是否加载完成
const isChartDataLoaded = ref(false);
// 修改 getContractChartData 方法：请求成功后标记加载完成
const getContractChartData = async () => {
try {
const [incomeChartRes, expensesChartRes] = await Promise.all([incomeAnalyze(), expensesAnalyze()]);
// 收入合同数据处理（原逻辑保留）
if (incomeChartRes.code === 200) {
const incomeRaw = incomeChartRes.data;
chartData.value.income = {
...incomeRaw,
total: calculateTotalCount(incomeRaw)
};
}
// 支出合同数据处理（原逻辑保留）
if (expensesChartRes.code === 200) {
const expensesRaw = expensesChartRes.data;
chartData.value.expenses = {
...expensesRaw,
total: calculateTotalCount(expensesRaw)
};
}
// ✅ 关键：所有数据请求完成后，标记为“已加载”
isChartDataLoaded.value = true;
} catch (error) {
console.error('获取合同图表数据失败：', error);
// 可选：失败时也标记加载完成，避免一直显示“加载中”（可替换为“加载失败”提示）
isChartDataLoaded.value = true;
}
};
const generatePieOption = (data) => {
// 1. 未加载：返回“加载中”配置
if (!isChartDataLoaded.value) {
return {
tooltip: { trigger: 'none' }, // 未加载时不需要tooltip
legend: { show: false }, // 隐藏图例（无数据可展示）
series: [
{
name: '合同数量',
type: 'pie',
radius: ['30%', '60%'],
center: ['30%', '60%'],
data: [], // 空数据，避免显示圆环
itemStyle: { borderColor: '#000', borderWidth: 1 },
// 中心显示“加载中”提示
label: {
show: true,
position: 'center',
formatter: '合同数据加载中...',
textStyle: { color: 'rgba(255, 255, 255, 0.9)', fontSize: 16 }
},
emphasis: { label: { show: false } },
labelLine: { show: false }
}
],
grid: { top: '15%', bottom: '5%', left: '5%', right: '5%' }
};
}
// 2. 已加载：返回真实数据配置（原逻辑保留，仅优化中心文本）
const pieData = [
{ name: '100万以下', value: data.firstCount },
{ name: '100-500万', value: data.secondCount },
{ name: '500-1000万', value: data.thirdCount },
{ name: '1000万以上', value: data.fourthCount }
];
return {
tooltip: {
trigger: 'item',
formatter: '{b}: {c} 份'
},
legend: {
top: '5%',
left: 'center',
textStyle: { color: 'rgba(255, 255, 255, 0.8)' },
itemWidth: 12,
itemHeight: 12
},
series: [
{
name: '合同数量',
type: 'pie',
radius: ['70%', '80%'], // 恢复原半径（原代码中70%/80%可能过窄，可根据需求调整）
center: ['50%', '60%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 8,
borderColor: '#000',
borderWidth: 1
},
// 中心文本：显示真实总数（此时data.total已可靠）
label: {
show: true,
position: 'center',
formatter: `合同总数\n{total|${data.total} 份}`,
rich: {
total: {
fontSize: 20,
fontWeight: 'bold',
color: 'rgba(29, 214, 255, 1)',
marginTop: 8
}
},
textStyle: { color: 'rgba(255, 255, 255, 0.9)', fontSize: 14 }
},
emphasis: { label: { show: false } },
labelLine: { show: false },
data: pieData,
color: ['rgba(255, 77, 79, 1)', 'rgba(29, 214, 255, 1)', 'rgba(0, 227, 150, 1)', 'rgba(255, 147, 42, 1)']
}
],
grid: {
top: '15%',
bottom: '5%',
left: '5%',
right: '5%'
}
};
};
/**
* 切换图表类型（收入/支出）
* @param {string} type 目标类型：income/expenses
*/
const switchChart = (type) => {
activeChart.value = type;
};
watch(
[activeChart, isChartDataLoaded], // 监听两个变量：图表类型 + 加载状态
([newType]) => {
pieOption.value = generatePieOption(chartData.value[newType]);
},
{ immediate: true }
);
// 组件挂载后初始化数据（并行请求，提升速度）
onMounted(async () => {
await Promise.all([getCapitalData(), getContractChartData()]);
});
</script>
@ -58,13 +303,23 @@ onMounted(() => {
.leftPage {
width: 100%;
height: 100%;
.kpi_box{
.kpi_box {
margin-bottom: 10px;
}
.contract_box{
height: 35vh;
.contract_box {
height: 33vh;
display: flex;
flex-direction: column; // 按钮区和图表区垂直排列
}
.kpi_box,.contract_box {
.chart-container {
height: 28vh;
}
.kpi_box,
.contract_box {
padding: 10px;
box-sizing: border-box;
border: 1px solid rgba(29, 214, 255, 0.3);

63
src/views/largeScreen/components/optionList.ts
View File

@ -1,3 +1,4 @@
import { to } from 'await-to-js';
import * as echarts from 'echarts/core';
import { text } from 'stream/consumers';
// import { PictorialBarChart } from 'echarts/charts'
@ -578,10 +579,10 @@ export const getDishesOption = (data?: any) => {
// 菜品库存图
export const getInventoryOption = () => {
const res = {
data: [2800, 300, 3900, 3000, 2450, 2670, 3320],
name: ['麻辣牛肉', '水煮肉片', '酸菜鱼', '辣子鸡丁', '烧白', '冬瓜排骨汤', '清炒油麦菜'],
ratio: [4000, 4000, 4000, 4000, 4000, 4000, 4000]
},
data: [2800, 300, 3900, 3000, 2450, 2670, 3320],
name: ['麻辣牛肉', '水煮肉片', '酸菜鱼', '辣子鸡丁', '烧白', '冬瓜排骨汤', '清炒油麦菜'],
ratio: [4000, 4000, 4000, 4000, 4000, 4000, 4000]
},
dataIndex = 1;
const option = {
xAxis: {
@ -697,18 +698,33 @@ export const getBarOptions = (data: any) => {
const option = {
backgroundColor: '',
grid: {
left: '8%',
top: '4%',
left: '9%',
top: '10%', // 顶部留一点空间给 legend
bottom: '8%',
right: '2%'
},
legend: {
data: ['现金流入', '现金流出'], // 与 series.name 对应
top: '0%',
textStyle: { color: '#fff', fontSize: 12 }
},
tooltip: {
show: true,
backgroundColor: '',
trigger: 'axis',
formatter: '{b0}：{c0}万元',
// formatter: '{b0}：{c0}万元',
formatter: (params: any) => {
// params 是数组，对应每条柱子
return params
.map((p: any) => `${p.seriesName}：${Number(p.value).toFixed(2)} 万元`)
.join('<br/>');
},
textStyle: {
color: '#fff'
},
axisPointer: {
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow',
}
// borderColor: 'rgba(252, 217, 18, 1)'
},
@ -743,8 +759,11 @@ export const getBarOptions = (data: any) => {
{
axisLabel: {
formatter: function (value) {
value = value + '万';
return value;
if (value >= 1000) {
return value / 1000 + '千万';
} else {
return value + '万';
}
},
color: 'rgba(255, 255, 255, 0.8)'
},
@ -779,6 +798,7 @@ export const getBarOptions = (data: any) => {
// ],
series: [
{
name: '现金流入',
type: 'bar',
data: data.value[0],
// stack: '合并',
@ -809,7 +829,9 @@ export const getBarOptions = (data: any) => {
},
label: {
show: false,
formatter: '{c}',
formatter: function (params) {
return Number(params.value).toFixed(2);
},
position: 'top',
color: '#fff',
fontSize: 10
@ -817,6 +839,7 @@ export const getBarOptions = (data: any) => {
}
},
{
name: '现金流出',
type: 'bar',
data: data.value[1],
// stack: '合并',
@ -846,12 +869,13 @@ export const getBarOptions = (data: any) => {
)
},
label: {
show: false,
formatter: '{c}',
show: true,
formatter: function (params) {
return Number(params.value).toFixed(2);
},
position: 'top',
color: '#fff',
fontSize: 10
// padding: 5
}
}
]
@ -862,7 +886,7 @@ export const getBarOptions = (data: any) => {
// 收支合同分析
export const getBarOptions2 = (data: any) => {
const option = {
color:['#FF932A', '#678FE6', '#1DD6FF', '#00E396'],
color: ['#FF932A', '#678FE6', '#1DD6FF', '#00E396'],
title: {
text: '数量（个）',
subtext: '16',
@ -872,14 +896,15 @@ export const getBarOptions2 = (data: any) => {
color: '#9DADB7',
fontSize: 16
},
subtextStyle:{
subtextStyle: {
color: '#707070',
fontSize: 32,
fontWeight: 'bold'
}
},
tooltip: {
trigger: 'item'
trigger: 'item',
show: true
},
legend: {
top: '5%',
@ -907,13 +932,13 @@ export const getBarOptions2 = (data: any) => {
show: false
},
data: [
{ value: 3, name: '100万一下' },
{ value: 3, name: '100万以下' },
{ value: 4, name: '100-500万' },
{ value: 5, name: '500-1000万' },
{ value: 4, name: '1000万以上' },
{ value: 4, name: '1000万以上' }
]
}
]
};
return option;
}
};

48
src/views/largeScreen/components/rightPage.vue
View File

@ -11,17 +11,17 @@
<div class="inflowData">
<div class="inflow">
<div class="title">现金流入</div>
<div class="number">1000000</div>
<div class="number">{{ bigDataObj.incomeCash }}</div>
<div class="unit">万元</div>
</div>
<div class="inflow">
<div class="title">现金流出</div>
<div class="number">1000000</div>
<div class="number">{{ bigDataObj.expensesCash }}</div>
<div class="unit">万元</div>
</div>
<div class="inflow">
<div class="title">净现金流</div>
<div class="number">1000000</div>
<div class="number">{{ bigDataObj.profitCash }}</div>
<div class="unit">万元</div>
</div>
</div>
@ -33,7 +33,7 @@
<div class="title">项目进度</div>
<div class="number">100%</div>
</div> -->
<ProgressComponent title="现金比率" value="123,456.78" percentageChange="3479.61%" :progressPercentage="100"
<ProgressComponent title="现金比率" value="123,456.78" percentageChange="98.11%" :progressPercentage="100"
progressColor="rgba(29, 214, 255, 1)" :isShowPrice="false" class="progress_text" />
</div>
</div>
@ -45,45 +45,63 @@ import TitleComponent from './TitleComponent.vue';
import EchartBox from '@/components/EchartBox/index.vue';
import { getLineOption, getBarOptions } from './optionList';
import ProgressComponent from './ProgressComponent.vue';
import { monthMoney, monthCash, cashTotal } from '@/api/largeScreen/index';
const lineOption = ref();
const barOption = ref();
const bigDataObj = ref<any>({});
const getCapitalData = async () => {
const { data } = await monthMoney()
const month = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
const income = data.map((item: any) => item.incomeAmount);
const expenses = data.map((item: any) => item.expensesAmount);
const profit = data.map((item: any) => item.profitAmount);
const getCapitalData = (data?: any) => {
// const xData = data.map((item) => item.time);
// const yData = data.map((item) => item.content);
const lineData = {
xLabel: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
xLabel: month,
line1: [
[100, 200, 150, 300, 250, 350, 400, 350, 450, 500, 400, 550],
[220, 250, 230, 280, 270, 300, 350, 320, 380, 400, 450, 500],
[300, 350, 320, 380, 400, 450, 500, 480, 520, 550, 600, 650]
income,
expenses,
profit
]
// line2: ['20', '50', '12', '65', '30', '60']
};
lineOption.value = getLineOption(lineData);
};
const getTurnoverList = (data?: any) => {
const getTurnoverList = async () => {
// const xData = data.map((item) => item.time);
// const yData = data.map((item) => {
// // 先将content转换为数字，再调用toFixed
// const num = Number(item.content);
// return isNaN(num) ? 0 : Number(num.toFixed(2));
// });
const { data } = await monthCash()
// const month = data.map((item: any) => item.month);
const month = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
const income = data.map((item: any) => item.incomeAmount);
const expenses = data.map((item: any) => item.expensesAmount);
const barData = {
name: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
name: month,
value: [
[2, 5, 15, 30, 25, 35, 40, 35, 45, 50, 40, 55],
[4, 3, 6, 11, 15, 22, 30, 14, 48, 22, 25, 60]
income,
expenses
]
};
console.log(barData);
barOption.value = getBarOptions(barData);
};
const getTotalAmonunt = async () => {
const { data } = await cashTotal()
bigDataObj.value = data
};
onMounted(() => {
getCapitalData();
getTurnoverList();
getTotalAmonunt();
});
//资金KPI

4
src/views/largeScreen/index.vue
View File

@ -1,4 +1,4 @@
<template>
ID<template>
<div class="large-screen">
<Header />
<div class="nav">
@ -21,6 +21,7 @@ import leftPage from './components/leftPage.vue';
import centerPage from './components/centerPage.vue';
import rightPage from './components/rightPage.vue';
// import '@/assets/styles/element.scss';
</script>
<style scoped lang="scss">
@ -31,6 +32,7 @@ import rightPage from './components/rightPage.vue';
background-size: 100% 100%;
background-color: rgba(4, 7, 17, 1);
}
.nav {
width: 100%;
height: calc(100vh - 80px);

2
src/views/login.vue
View File

@ -86,6 +86,7 @@ import { LoginData, TenantVO } from '@/api/types';
import { to } from 'await-to-js';
import { HttpStatus } from '@/enums/RespEnum';
import { useI18n } from 'vue-i18n';
import { getAllRouters } from '@/api/system/menu';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
@ -153,6 +154,7 @@ const handleLogin = () => {
if (!err) {
const redirectUrl = redirect.value || '/';
await router.push(redirectUrl);
loading.value = false;
} else {
loading.value = false;

12
src/views/materials/appointment/index.vue
View File

@ -10,7 +10,7 @@
@click="isDisabled = false"
class="px-8 py-2.5 transition-all duration-300 font-medium"
v-if="isDisabled"
v-hasPermi="['ailiaoshebei:purchaseUser:byProject']"
v-hasPermi="['cailiaoshebei:purchaseUser:addOrUpdate']"
>
点击编辑
</el-button>
@ -38,16 +38,11 @@
@click="submitForm"
icon="Check"
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"
v-hasPermi="['ailiaoshebei:purchaseUser:byProject']"
v-hasPermi="['cailiaoshebei:purchaseUser:addOrUpdate']"
>
确认提交
</el-button>
<el-button
@click="resetForm"
v-hasPermi="['ailiaoshebei:purchaseUser:byProject']"
icon="Refresh"
class="px-8 py-2.5 transition-all duration-300 border-gray-300 hover:bg-gray-100 font-medium"
>
<el-button @click="resetForm" icon="Refresh" class="px-8 py-2.5 transition-all duration-300 border-gray-300 hover:bg-gray-100 font-medium">
重置
</el-button>
</div>
@ -126,6 +121,7 @@ const designUser = async () => {
return;
}
Object.assign(form, res.data);
// form.userId = res.data.userId;
isDisabled.value = true;
}
} catch (error) {

624
src/views/materials/batchPlan/index.vue
View File

@ -6,28 +6,23 @@
<el-card shadow="hover">
<template #header>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5" :offset="0"
><el-button
type="primary"
v-hasPermi="['cailiaoshebei:materialbatchdemandplan:add']"
size="default"
@click="handleAdd"
icon="FolderAdd"
plain
<el-col :span="1.5" :offset="0">
<el-button type="primary" v-hasPermi="['cailiaoshebei:mrpBase:addbatch']" size="default" @click="handleAdd" icon="FolderAdd" plain
>新增</el-button
></el-col
>
<el-col :span="1.5" :offset="0"
><el-button
>
</el-col>
<el-col :span="1.5" :offset="0">
<el-button
type="danger"
size="default"
v-hasPermi="['cailiaoshebei:materialbatchdemandplan:remove']"
v-hasPermi="['cailiaoshebei:mrpBase:remove']"
@click="handleDeleteBatch"
:disabled="form.mrpBaseBo.status != 'draft'"
icon="FolderDelete"
plain
>删除</el-button
></el-col
>
>
</el-col>
</el-row>
</template>
@ -65,23 +60,19 @@
<template #header>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5" v-if="form.mrpBaseBo.status == 'draft'">
<el-button type="primary" plain icon="Edit" @click="handleUpdata" v-hasPermi="['cailiaoshebei:materialbatchdemandplan:edit']"
>修改</el-button
>
<el-button type="primary" plain icon="Edit" @click="handleUpdata" v-hasPermi="['cailiaoshebei:mrpBase:addbatch']">修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button plain type="warning" icon="Finished" @click="handleAudit()" v-hasPermi="['cailiaoshebei:materialbatchdemandplan:query']"
>审核</el-button
>
<el-col :span="1.5" v-if="form.mrpBaseBo.status == 'draft'">
<el-button plain type="primary" icon="Finished" @click="handleAudit()">审核</el-button>
</el-col>
<el-col :span="1.5" v-if="form.mrpBaseBo.status != 'draft'">
<el-button type="warning" icon="View" @click="handleAudit()">查看流程</el-button>
</el-col>
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
</template>
<el-table v-loading="loading" :data="cailiaoshebeiList" @selection-change="handleSelectionChange">
<!-- <el-table-column type="selection" width="55" align="center" /> -->
<!-- <el-table-column label="供货商ID" align="center" prop="supplierId" /> -->
<el-table-column label="物资名称" align="center" prop="name" />
<el-table-column label="质量标准" align="center" prop="qs" />
<el-table-column label="规格型号" align="center" prop="specification" />
@ -102,7 +93,7 @@
</el-row>
<!-- 添加或修改物资-材料设备对话框 -->
<el-dialog :title="dialog.title" v-model="dialog.visible" width="1250px" append-to-body>
<el-dialog :close-on-click-modal="false" draggable :title="dialog.title" v-model="dialog.visible" width="1500px" append-to-body>
<el-form :model="form" ref="cailiaoshebeiFormRef" :rules="rules" label-width="80px" :inline="false">
<el-divider>基础信息</el-divider>
<el-row :gutter="20">
@ -124,49 +115,96 @@
</el-row>
<el-divider>主要信息</el-divider>
<el-table :data="form.planList">
<el-table-column prop="name" align="center" label="物资名称">
<!-- 表格添加border属性，优化视觉体验 -->
<el-table :data="form.planList" border>
<!-- 版本号列 -->
<el-table-column prop="batchNumber" align="center" label="版本号 " width="200">
<template #default="scope">
<!-- <el-input v-model="scope.row.name" placeholder="请输入物资" /> -->
<el-select v-model="scope.row.suppliespriceId" placeholder="请选择" @change="(val) => selectName(val, scope.row)">
<el-option v-for="item in nameList" :key="item.id" :label="item.name" :value="item.id" />
<el-select v-model="scope.row.batchNumber" placeholder="请选择" @change="(val) => selectNameVersion(val, scope.row, scope.$index)">
<el-option v-for="item in versionList" :key="item.versions" :label="item.versions" :value="item.versions" />
</el-select>
</template>
</el-table-column>
<el-table-column prop="specification" align="center" label="规格型号" width="150">
<!-- 物资名称列（核心修改：动态过滤已选选项） -->
<el-table-column prop="name" align="center" label="物资名称" width="160">
<template #default="scope">
<el-input v-model="scope.row.specification" placeholder="请输入规格型号" disabled />
<el-input v-model="scope.row.name" v-if="scope.row.mrpBaseId" placeholder="请输入物资名称" disabled />
<el-select
v-else
:disabled="!scope.row.batchNumber"
v-model="scope.row.suppliespriceId"
placeholder="请选择"
@change="(val) => selectName(val, scope.row, scope.$index)"
>
<!-- 动态过滤：排除当前行外已选中的物资ID -->
<el-option
v-for="item in getAvailableNameList(scope.$index)"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</template>
</el-table-column>
<el-table-column prop="unit" align="center" label="单位" width="130">
<!-- 剩余量列 -->
<el-table-column align="center" label="剩余量" width="80">
<template #default="scope">
<el-input v-model="scope.row.unit" placeholder="请输入单位" disabled />
<span>{{ scope.row.Remaining }}</span>
</template>
</el-table-column>
<el-table-column prop="demandQuantity" align="center" label="数量" width="130">
<!-- 规格型号列 -->
<el-table-column prop="specification" align="center" label="规格型号" width="100">
<template #default="scope">
<el-input v-model="scope.row.demandQuantity" placeholder="请输入数量" type="number" min="0" disabled />
<span>{{ scope.row.specification }}</span>
</template>
</el-table-column>
<el-table-column prop="qs" align="center" label="质量标准" width="150">
<!-- 单位列 -->
<el-table-column prop="unit" align="center" label="单位" width="80">
<template #default="scope">
<span>{{ scope.row.unit }}</span>
</template>
</el-table-column>
<!-- 数量列 -->
<el-table-column prop="demandQuantity" align="center" label="数量" width="140">
<template #default="scope">
<el-input
v-model.number="scope.row.demandQuantity"
@input="validateDemandQuantity(scope.row, scope.$index)"
@blur="validateDemandQuantity(scope.row, scope.$index)"
:max="scope.row.Remaining"
placeholder="请输入数量"
type="number"
min="0"
/>
<!-- 数量错误提示 -->
<div v-if="scope.row.quantityError" class="text-red-500 text-xs mt-1">{{ scope.row.quantityError }}</div>
</template>
</el-table-column>
<!-- 质量标准列 -->
<el-table-column prop="qs" align="center" label="质量标准" width="140">
<template #header> <span class="text-red-500">*</span> 质量标准 </template>
<template #default="scope">
<el-input v-model="scope.row.qs" placeholder="请输入质量标准" />
</template>
</el-table-column>
<el-table-column prop="arrivalTime" align="center" label="需求到货时间">
<!-- 需求到货时间列 -->
<el-table-column prop="arrivalTime" align="center" label="需求到货时间" width="180">
<template #header> <span class="text-red-500">*</span> 需求到货时间 </template>
<template #default="scope">
<el-date-picker v-model="scope.row.arrivalTime" type="date" value-format="YYYY-MM-DD" placeholder="请选择" style="width: 140px" />
</template>
</el-table-column>
<el-table-column prop="remark" align="center" label="备注" width="150">
<!-- 备注列 -->
<el-table-column prop="remark" align="center" label="备注">
<template #default="scope">
<el-input v-model="scope.row.remark" placeholder="请输入备注" disabled />
</template>
</el-table-column>
<!-- 操作列 -->
<el-table-column prop="remark" align="center" label="操作" width="150">
<template #default="scope">
<el-button @click="addRow" type="success" icon="Plus" circle size="small" />
<el-button @click="delRow(scope.$index)" type="danger" icon="Delete" circle size="small" />
<el-button @click="addRow" type="primary" icon="Plus" size="small" />
<el-button @click="delRow(scope.$index)" type="danger" icon="Delete" size="small" />
</template>
</el-table-column>
</el-table>
@ -189,10 +227,50 @@ import {
getBatch,
delBatch,
listSelectCailiaoshebei,
getDictList
obtainTheVersion,
getDictList,
coryEngineeringList,
mrpBaseRemaining
} from '@/api/materials/batchPlan';
import { CailiaoshebeiVO, CailiaoshebeiQuery, CailiaoshebeiForm } from '@/api/materials/batchPlan/types';
import { useUserStoreHook } from '@/store/modules/user';
import { getCurrentInstance, ComponentInternalInstance, watch, onMounted, onUnmounted, computed } from 'vue';
import type { ElFormInstance } from 'element-plus';
// 类型定义补充
interface DialogOption {
visible: boolean;
title: string;
}
interface PlanListItem {
id?: number | undefined;
name?: string | undefined;
specification?: string | undefined;
unit?: string | undefined;
suppliespriceId?: number | undefined;
demandQuantity?: number | undefined;
qs?: string | undefined;
arrivalTime?: string | undefined;
remark?: string | undefined;
Remaining: number; // 剩余量（必存在）
quantityError: string; // 数量错误提示
batchNumber?: string | undefined; // 版本号
duplicateError: string; // 重复错误提示
mrpBaseId?: number | undefined;
}
interface FormData {
mrpBaseBo: {
id?: number | undefined;
preparedDate?: string | undefined;
planCode?: string | undefined;
matCat?: string | undefined;
status?: string | undefined;
projectId?: number | undefined;
};
planList: PlanListItem[];
}
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
// 获取用户 store
@ -210,17 +288,17 @@ const multiple = ref(true);
const total = ref(0);
const mainTotal = ref(0);
const batchOptions = ref<any[]>([]);
const { wf_business_status } = toRefs<any>(proxy?.useDict('wf_business_status'));
const { wf_business_status } = toRefs<any>(proxy?.useDict('wf_business_status') || {});
const route = useRoute();
const queryFormRef = ref<ElFormInstance>();
const cailiaoshebeiFormRef = ref<ElFormInstance>();
const dialog = reactive<DialogOption>({
visible: false,
title: ''
});
const initFormData: any = {
// 初始化表单数据
const initFormData: FormData = {
mrpBaseBo: {
id: undefined,
preparedDate: undefined,
@ -229,7 +307,6 @@ const initFormData: any = {
status: undefined,
projectId: currentProject.value?.id
},
planList: [
{
id: undefined,
@ -240,18 +317,23 @@ const initFormData: any = {
demandQuantity: undefined,
qs: undefined,
arrivalTime: undefined,
remark: undefined
remark: undefined,
Remaining: 0,
quantityError: '',
batchNumber: undefined,
duplicateError: '',
mrpBaseId: undefined
}
]
};
const data = reactive({
form: { ...initFormData },
form: { ...initFormData } as FormData,
queryParams: {
batchData: {
pageNum: 1,
pageSize: 10,
planCode: undefined,
projectId: currentProject.value?.id
},
mainData: {
@ -268,76 +350,160 @@ const data = reactive({
'mrpBaseBo.matCat': [{ required: true, message: '物资分类不能为空', trigger: 'blur' }]
}
});
const batchNumber = ref('');
const { queryParams, form, rules } = toRefs(data);
const nameList = ref([]);
const nameList = ref<any[]>([]);
const versionList = ref<any[]>([]);
/** 查询物资-材料设备列表 */
const getList = async (type?: string) => {
loading.value = true;
const res = await listBatch(queryParams.value.batchData);
batchOptions.value = res.rows;
if (res.rows && res.rows.length > 0 && !queryParams.value.mainData.mrpBaseId) {
batchTreeRef.value.setCurrentKey(res.rows[0].id);
queryParams.value.mainData.mrpBaseId = res.rows[0].id;
form.value.mrpBaseBo.status = res.rows[0].status;
try {
const res = await listBatch(queryParams.value.batchData);
batchOptions.value = res.rows || [];
// 自动选中第一条数据（如果存在且未选中）
if (batchOptions.value.length > 0 && !queryParams.value.mainData.mrpBaseId) {
batchTreeRef.value?.setCurrentKey(batchOptions.value[0].id);
queryParams.value.mainData.mrpBaseId = batchOptions.value[0].id;
form.value.mrpBaseBo.status = batchOptions.value[0].status;
}
total.value = res.total || 0;
} catch (error) {
proxy?.$modal.msgError('获取批次列表失败');
} finally {
loading.value = false;
// 非搜索场景下同步加载主列表
if (type !== 'search') {
getMainList();
}
}
total.value = res.total;
loading.value = false;
if (type === 'search') return;
getMainList();
};
const selectName = (val: any, row: any) => {
const selected = nameList.value.find((item) => item.id === val);
if (selected) {
row.name = selected.name;
row.specification = selected.specification;
row.unit = selected.unit;
row.qs = selected.qs;
row.demandQuantity = selected.quantity;
row.remark = selected.remark;
row.arrivalTime = selected.arrivalTime;
/** 数量校验：必须≤剩余量，且为合法数字 */
const validateDemandQuantity = (row: PlanListItem, index: number) => {
// 1. 清除之前的错误信息
row.quantityError = '';
// 2. 处理空值
if (row.demandQuantity === null || row.demandQuantity === undefined || row.demandQuantity === '') {
return;
}
// 3. 处理非数字
if (typeof row.demandQuantity !== 'number' || isNaN(row.demandQuantity)) {
row.quantityError = '请输入合法数字';
return;
}
// 4. 处理负数
if (row.demandQuantity < 0) {
row.quantityError = '数量不能为负数';
return;
}
// 5. 核心校验：数量≤剩余量
if (row.demandQuantity > row.Remaining) {
row.quantityError = `数量不能超过剩余量${row.Remaining}`;
}
};
/** 获取剩余量 */
const getMrpBaseRemaining = async (suppliespriceId: number, row: PlanListItem) => {
try {
const res = await mrpBaseRemaining({ suppliespriceId });
row.Remaining = res.data || 0;
// 剩余量更新后，重新校验当前数量
validateDemandQuantity(row, 0);
} catch (error) {
proxy?.$modal.msgError('获取剩余量失败');
row.Remaining = 0;
}
};
/** 获取可用物资列表（过滤已选选项） */
const getAvailableNameList = (currentIndex: number) => {
// 收集除当前行外已选中的物资ID
const selectedIds = form.value.planList
.filter((_, index) => index !== currentIndex)
.map(item => item.suppliespriceId)
.filter(id => id !== undefined && id !== null);
// 过滤掉已选中的物资
return nameList.value.filter(item => !selectedIds.includes(item.id));
};
/** 选择物资名称触发 */
const selectName = (val: number, row: PlanListItem, index: number) => {
// 1. 获取剩余量并更新基础信息
getMrpBaseRemaining(val, row).then(() => {
const selected = nameList.value.find((item: any) => item.id === val);
if (selected) {
row.name = selected.name;
row.specification = selected.specification;
row.unit = selected.unit;
row.qs = selected.qs || '';
row.remark = selected.remark || '';
row.arrivalTime = selected.arrivalTime || '';
}
});
};
/** 节点单击事件 */
const handleNodeClick = (data: any) => {
queryParams.value.mainData.mrpBaseId = data.id;
form.value.mrpBaseBo.status = data.status;
getMainList();
};
/** 获取主列表数据 */
const getMainList = async () => {
if (!queryParams.value.mainData.mrpBaseId) return;
const res = await getBatch(queryParams.value.mainData);
cailiaoshebeiList.value = res.rows;
mainTotal.value = res.total;
loading.value = true;
try {
const res = await getBatch(queryParams.value.mainData);
cailiaoshebeiList.value = res.rows || [];
mainTotal.value = res.total || 0;
} catch (error) {
proxy?.$modal.msgError('获取物资列表失败');
} finally {
loading.value = false;
}
};
/** 搜索批次列表 */
const searchBatchList = async () => {
queryParams.value.batchData.planCode = batchNumber.value;
getList('search');
};
//删除
/** 删除表格行 */
const delRow = (index: number) => {
if (form.value.planList.length <= 1) return proxy?.$modal.msgWarning('请至少保留一项');
if (form.value.planList.length <= 1) {
return proxy?.$modal.msgWarning('请至少保留一项物资数据');
}
form.value.planList.splice(index, 1);
};
//新增
/** 新增表格行 */
const addRow = () => {
form.value.planList.push({
const newRow: PlanListItem = {
name: undefined,
specification: undefined,
unit: undefined,
suppliespriceId: undefined,
demandQuantity: undefined,
qs: undefined,
arrivalTime: undefined,
remark: undefined
});
remark: undefined,
Remaining: 0,
quantityError: '',
batchNumber: undefined,
duplicateError: '',
mrpBaseId: undefined
};
form.value.planList.push(newRow);
};
/** 取消按钮 */
@ -349,41 +515,22 @@ const cancel = () => {
/** 表单重置 */
const reset = () => {
const status = form.value.mrpBaseBo.status;
form.value = { ...initFormData, status }; // 重置但保留
// 重置表单（保留状态字段）
form.value = {
...JSON.parse(JSON.stringify(initFormData)),
mrpBaseBo: { ...initFormData.mrpBaseBo, status }
};
// 重置表单验证状态
cailiaoshebeiFormRef.value?.resetFields();
// 重置项目ID
form.value.mrpBaseBo.projectId = currentProject.value?.id;
form.value.planList = [
{
name: undefined,
specification: undefined,
unit: undefined,
suppliespriceId: undefined,
demandQuantity: undefined,
qs: undefined,
arrivalTime: undefined,
remark: undefined
}
];
};
// /** 搜索按钮操作 */
// const handleQuery = () => {
// queryParams.value.pageNum = 1;
// getList();
// };
// /** 重置按钮操作 */
// const resetQuery = () => {
// queryFormRef.value?.resetFields();
// handleQuery();
// };
/** 多选框选中数据 */
const handleSelectionChange = (selection: CailiaoshebeiVO[]) => {
ids.value = selection.map((item) => item.id);
single.value = selection.length != 1;
multiple.value = !selection.length;
single.value = selection.length !== 1;
multiple.value = selection.length === 0;
};
/** 新增按钮操作 */
@ -393,119 +540,245 @@ const handleAdd = () => {
dialog.title = '新增物资-需求';
};
/** 修改按钮操作 */
const handleUpdata = () => {
if (!queryParams.value.mainData.mrpBaseId) {
return proxy?.$modal.msgError('请先选择批次');
}
// 获取对应版本的物资列表
reset();
getCailiaoshebei(queryParams.value.mainData.mrpBaseId).then((res: any) => {
form.value.mrpBaseBo = res.data.mrpBaseBo;
const allowedKeys = Object.keys(initFormData.planList[0]);
form.value.planList = res.data.planList.map((item) => {
return allowedKeys.reduce((obj, key) => {
obj[key] = item[key] ?? undefined;
return obj;
}, {});
});
loading.value = true;
getCailiaoshebei(queryParams.value.mainData.mrpBaseId)
.then((res: any) => {
// 更新基础信息
form.value.mrpBaseBo = res.data.mrpBaseBo || initFormData.mrpBaseBo;
console.log(form.value.planList);
});
dialog.visible = true;
dialog.title = '修改物资-需求';
// 更新表格数据（补充缺失字段）
form.value.planList = (res.data.planList || []).map((item: any) => ({
id: item.id,
name: item.name,
specification: item.specification,
unit: item.unit,
suppliespriceId: item.suppliespriceId,
demandQuantity: item.demandQuantity,
qs: item.qs,
arrivalTime: item.arrivalTime,
remark: item.remark,
Remaining: Number(item.remaining) || 0,
quantityError: '',
batchNumber: item.batchNumber,
duplicateError: '',
mrpBaseId: item.mrpBaseId
}));
// 打开对话框
dialog.visible = true;
dialog.title = '修改物资-需求';
})
.catch(() => {
proxy?.$modal.msgError('获取详情失败');
})
.finally(() => {
loading.value = false;
});
};
/** 提交数据 */
/** 提交数据（整合所有校验） */
const submitTransferForm = async () => {
const result = validateAndClean(form.value.planList);
console.log('🚀 ~ submitTransferForm ~ form.value.planList:', form.value.planList);
if (!result.valid) {
proxy?.$modal.msgError('验证失败,主要信息存在部分字段缺失的数据项');
return;
// 1. 校验数量合法性（检查是否有数量错误）
const hasQuantityError = form.value.planList.some((row) => row.quantityError);
if (hasQuantityError) {
return proxy?.$modal.msgError('存在非法数量，请修正后提交');
}
// 2. 执行表单基础验证
const result = validateAndClean(form.value.planList);
if (!result.valid) {
return proxy?.$modal.msgError(result.message);
}
// 3. 表单组件验证
cailiaoshebeiFormRef.value?.validate(async (valid: boolean) => {
if (valid) {
buttonLoading.value = true;
form.value.planList = result.data;
await updateCailiaoshebei(form.value).finally(() => (buttonLoading.value = false));
if (!valid) return;
buttonLoading.value = true;
try {
// 4. 提交数据
await updateCailiaoshebei({
...form.value,
planList: result.data // 使用清洗后的数据
});
proxy?.$modal.msgSuccess('操作成功');
dialog.visible = false;
// 5. 刷新列表
await getList();
} catch (error) {
proxy?.$modal.msgError('操作失败，请重试');
} finally {
buttonLoading.value = false;
}
});
};
/** 删除批次 */
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.mainData.mrpBaseId = undefined;
await getList();
const _id = batchTreeRef.value?.getCurrentNode()?.id;
if (!_id) {
return proxy?.$modal.msgError('请先选择批次');
}
try {
await proxy?.$modal.confirm('是否确认删除该批次？删除后不可恢复！');
await delBatch(_id);
proxy?.$modal.msgSuccess('删除成功');
// 重置选中状态并刷新列表
queryParams.value.mainData.mrpBaseId = undefined;
form.value.mrpBaseBo.status = undefined;
await getList();
} catch (error) {
// 取消确认时不提示错误
if (error !== 'cancel') {
proxy?.$modal.msgError('删除失败');
}
}
};
//检测主要信息填写状况
function validateAndClean(arr) {
// 过滤掉全空的数据项
const cleanedArr = arr.filter((item) => !Object.values(item).every((v) => v === '' || v == null));
let hasFullItem = false; // 是否有一条全填数据
/** 数据清洗与基础校验 */
function validateAndClean(arr: PlanListItem[]) {
// 1. 过滤掉全空的数据项
const cleanedArr = arr.filter((item) => !Object.values(item).every((v) => v === '' || v == null || v === undefined));
for (const item of cleanedArr) {
const keys = Object.keys(item).filter((k) => k !== 'remark' && k !== 'id');
const allFilled = keys.every((k) => item[k] !== '' && item[k] != null);
if (allFilled) {
hasFullItem = true; // 有一条全填
let hasFullItem = false; // 是否有至少一条完整数据
// 2. 逐行校验必填项
for (let idx = 0; idx < cleanedArr.length; idx++) {
const item = cleanedArr[idx];
// 校验版本号
if (!item.batchNumber) {
return { valid: false, message: `第${idx + 1}行：版本号不能为空`, data: cleanedArr };
}
const allEmpty = Object.values(item).every((v) => v === '' || v == null);
// 如果不是全填，也不是全空（部分填） → 直接返回失败
if (!allFilled && !allEmpty) {
return { valid: false, data: cleanedArr };
// 校验物资选择
if (!item.suppliespriceId) {
return { valid: false, message: `第${idx + 1}行：请选择物资名称`, data: cleanedArr };
}
// 校验质量标准
if (!item.qs) {
return { valid: false, message: `第${idx + 1}行：质量标准不能为空`, data: cleanedArr };
}
// 校验需求到货时间
if (!item.arrivalTime) {
return { valid: false, message: `第${idx + 1}行：需求到货时间不能为空`, data: cleanedArr };
}
// 校验数量（必填且≥0）
if (item.demandQuantity === null || item.demandQuantity === undefined || item.demandQuantity < 0) {
return { valid: false, message: `第${idx + 1}行：请输入合法的需求数量`, data: cleanedArr };
}
hasFullItem = true;
}
// 如果没有至少一条全填，返回失败
// 3. 检查是否至少有一条完整数据
if (!hasFullItem) {
return { valid: false, data: cleanedArr };
return { valid: false, message: '至少需要填写一条完整的物资数据', data: cleanedArr };
}
return { valid: true, data: cleanedArr };
return { valid: true, message: '', data: cleanedArr };
}
/** 审核按钮操作 */
const handleAudit = async () => {
if (!form.value.mrpBaseBo.status) {
proxy?.$modal.msgError('请选择批次号');
return;
return proxy?.$modal.msgError('请选择批次号');
}
if (!queryParams.value.mainData.mrpBaseId) {
return proxy?.$modal.msgError('请选择批次号');
}
// 关闭当前页并打开审核页
proxy?.$tab.closePage(route);
proxy?.$tab.openPage('/approval/batchPlan/indexEdit', '审核物资设备批次需求计划', {
id: queryParams.value.mainData.mrpBaseId,
status: form.value.mrpBaseBo.status + '_batchRequirements',
status: `${form.value.mrpBaseBo.status}_batchRequirements`,
type: 'update'
});
};
const getNameList = () => {
getDictList({ projectId: currentProject.value?.id }).then((res) => {
nameList.value = res.data;
});
/** 获取物资列表（按版本号筛选） */
const getNameList = (versions: string) => {
coryEngineeringList({
projectId: currentProject.value?.id,
versions
})
.then((res: any) => {
nameList.value = res.data || [];
})
.catch(() => {
nameList.value = [];
proxy?.$modal.msgError('获取物资列表失败');
});
};
/** 获取版本号列表 */
const getVersion = () => {
obtainTheVersion({ projectId: currentProject.value?.id })
.then((res: any) => {
versionList.value = res.data || [];
})
.catch(() => {
versionList.value = [];
proxy?.$modal.msgError('获取版本号失败');
});
};
/** 选择版本号触发 */
const selectNameVersion = (val: string, row: PlanListItem, index: number) => {
row.batchNumber = val;
row.suppliespriceId = undefined; // 切换版本号时清空物资选择
row.name = undefined;
row.specification = undefined;
row.unit = undefined;
row.qs = undefined;
row.remark = undefined;
row.arrivalTime = undefined;
row.demandQuantity = undefined;
row.quantityError = '';
row.duplicateError = '';
row.mrpBaseId = '';
// 获取对应版本的物资列表
getNameList(val);
};
/** 页面挂载时初始化 */
onMounted(() => {
getList();
getNameList();
getVersion();
});
//监听项目id刷新数据
/** 监听项目ID变化，刷新数据 */
const listeningProject = watch(
() => currentProject.value?.id,
(nid, oid) => {
queryParams.value.mainData.projectId = nid;
queryParams.value.batchData.projectId = nid;
form.value.mrpBaseBo.projectId = nid;
getList();
(newId, oldId) => {
if (newId !== oldId && newId) {
queryParams.value.mainData.projectId = newId;
queryParams.value.batchData.projectId = newId;
form.value.mrpBaseBo.projectId = newId;
getList();
getVersion(); // 重新获取对应项目的版本号
}
}
);
/** 页面卸载时清理监听 */
onUnmounted(() => {
listeningProject();
});
</script>
<style scoped lang="scss">
.custom-tree-node {
flex: 1;
@ -515,4 +788,17 @@ onUnmounted(() => {
font-size: 14px;
padding-right: 8px;
}
/* 错误提示样式补充 */
.text-red-500 {
color: #f56c6c;
}
.text-xs {
font-size: 12px;
}
.dialog-footer {
text-align: right;
}
</style>

40
src/views/materials/batchPlan/indexEdit.vue
View File

@ -3,18 +3,13 @@
<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.mrpBaseBo.id"
:status="form.mrpBaseBo.status"
:pageType="routeParams.type"
/>
<approvalButton @submitForm="submitForm" @approvalVerifyOpen="approvalVerifyOpen"
@handleApprovalRecord="handleApprovalRecord" :buttonLoading="buttonLoading" :id="form.mrpBaseBo.id"
:status="form.mrpBaseBo.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">
<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>
<el-row :gutter="20">
@ -25,7 +20,8 @@
</el-col>
<el-col :span="8" :offset="0">
<el-form-item label="编制日期" prop="mrpBaseBo.preparedDate">
<el-date-picker v-model="form.mrpBaseBo.preparedDate" type="date" value-format="YYYY-MM-DD" disabled placeholder="请选择编制日期" />
<el-date-picker v-model="form.mrpBaseBo.preparedDate" type="date" value-format="YYYY-MM-DD" disabled
placeholder="请选择编制日期" />
</el-form-item>
</el-col>
<el-col :span="8" :offset="0">
@ -54,14 +50,8 @@
<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"
>
<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%">
@ -70,12 +60,10 @@
</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
>
<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>
@ -123,7 +111,7 @@ const approvalRecordRef = ref<InstanceType<typeof ApprovalRecord>>();
const flowCodeOptions = [
{
value: currentProject.value?.id + '_mrp',
label: '物资供应总计划审批'
label: '物资需求计划审核'
}
];

125
src/views/materials/materials/index.vue
View File

@ -27,19 +27,6 @@
<el-col :span="1.5">
<el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['materials:materials:add']"> 新增 </el-button>
</el-col>
<el-col :span="1.5">
<el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['materials:materials:edit']"
>修改
</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['materials:materials:remove']"
>删除
</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['materials:materials:export']">导出 </el-button>
</el-col>
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
</template>
@ -75,7 +62,15 @@
<el-button link type="danger" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['materials:materials:remove']">
删除
</el-button>
<el-button link type="primary" icon="Plus" @click="handleAddMaterialsInventory(scope.row)"> 出入库 </el-button>
<el-button
v-hasPermi="['materials:materialsInventory:edit']"
link
type="primary"
icon="Plus"
@click="handleAddMaterialsInventory(scope.row)"
>
出入库
</el-button>
</el-space>
</template>
</el-table-column>
@ -84,48 +79,57 @@
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
</el-card>
<!-- 添加或修改材料名称对话框 -->
<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="800px" append-to-body>
<el-form ref="materialsFormRef" :model="form" :rules="rules" label-width="120px">
<el-form-item label="材料名称" prop="materialsName">
<el-input v-model="form.materialsName" placeholder="请输入材料名称" />
</el-form-item>
<el-form-item label="规格型号名称" prop="typeSpecificationName">
<el-input v-model="form.typeSpecificationName" placeholder="请输入规格型号名称" />
</el-form-item>
<el-form-item label="材料供应商" prop="companyId">
<el-select v-model="form.companyId" clearable placeholder="请选择材料提供商">
<el-option v-for="item in companyOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="使用部位" prop="usePart">
<el-input v-model="form.usePart" placeholder="请输入使用部位" />
</el-form-item>
<el-form-item label="计量单位" prop="weightId">
<el-input v-model="form.weightId" placeholder="请输入计量单位" />
</el-form-item>
<el-form-item label="预计材料数量" prop="quantityCount">
<el-input v-model="form.quantityCount" placeholder="请输入预计材料数量" />
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" placeholder="请输入备注" />
</el-form-item>
<el-form-item label="材料文件" prop="fileOssIdMap">
<div :key="item.value" v-for="item in materials_file_type">
<h3>{{ item.label }}</h3>
<file-upload
v-model="ossIdMap[item.value]"
:limit="1"
:file-size="50"
:file-type="['pdf']"
@update:model-value="
(args) => {
handleOssUpdate(args, item.value);
}
"
/>
</div>
</el-form-item>
<el-row>
<el-col :span="12">
<el-form-item label="材料名称" prop="materialsName"> <el-input v-model="form.materialsName" placeholder="请输入材料名称" /> </el-form-item
></el-col>
<el-col :span="12">
<el-form-item label="规格型号名称" prop="typeSpecificationName">
<el-input v-model="form.typeSpecificationName" placeholder="请输入规格型号名称" /> </el-form-item
></el-col>
<el-col :span="12"
><el-form-item label="材料提供商" prop="companyId">
<el-select v-model="form.companyId" clearable placeholder="请选择材料提供商">
<el-option v-for="item in companyOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select> </el-form-item
></el-col>
<el-col :span="12">
<el-form-item label="使用部位" prop="usePart"> <el-input v-model="form.usePart" placeholder="请输入使用部位" /> </el-form-item
></el-col>
<el-col :span="12"
><el-form-item label="计量单位" prop="weightId"> <el-input v-model="form.weightId" placeholder="请输入计量单位" /> </el-form-item
></el-col>
<el-col :span="12">
<el-form-item label="预计材料数量" prop="quantityCount">
<el-input v-model="form.quantityCount" type="number" min="0" placeholder="请输入预计材料数量" /> </el-form-item
></el-col>
<el-col :span="24">
<el-form-item label="备注" prop="remark"> <el-input type="textarea" v-model="form.remark" placeholder="请输入备注" /> </el-form-item
></el-col>
<el-col :span="12" :key="item.value" v-for="item in materials_file_type">
<el-form-item label="材料文件" prop="fileOssIdMap">
<div>
<h3>{{ item.label }}</h3>
<file-upload
:isShowTip="false"
v-model="ossIdMap[item.value]"
:limit="1"
:file-size="50"
:file-type="['pdf']"
@update:model-value="
(args) => {
handleOssUpdate(args, item.value);
}
"
/>
</div> </el-form-item
></el-col>
<el-col :span="24" style="color: rgb(237 70 61)">注意:请上传pdf格式文件</el-col>
</el-row>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
@ -146,7 +150,7 @@ import { MaterialsForm, MaterialsQuery, MaterialsVO } from '@/api/materials/mate
import { useUserStoreHook } from '@/store/modules/user';
import MaterialsInventoryTable from '@/views/materials/materials/component/MaterialsInventoryTable.vue';
import MaterialsInventoryAddDialog from '@/views/materials/materials/component/MaterialsInventoryAddDialog.vue';
import { listCompany } from '@/api/materials/company';
import { listCompany, supplierInputGet } from '@/api/materials/company';
import { CompanyVO } from '@/api/materials/company/types';
import MaterialsDetailDrawer from '@/views/materials/materials/component/MaterialsDetailDrawer.vue';
@ -222,14 +226,14 @@ const getList = async () => {
/** 获取当前项目下的公司列表 */
const getCompanyList = async () => {
loading.value = true;
const companyRes = await listCompany({
pageNum: 1,
pageSize: 1000,
const companyRes = await supplierInputGet({
projectId: currentProject.value?.id
});
companyOptions.value = companyRes.rows.map((company: CompanyVO) => ({
console.log(companyRes);
companyOptions.value = companyRes.data.map((company) => ({
value: company.id,
label: company.companyName
label: company.supplierName
}));
loading.value = false;
};
@ -358,6 +362,7 @@ const listeningProject = watch(
(nid, oid) => {
queryParams.value.projectId = nid;
form.value.projectId = nid;
getCompanyList();
getList();
}
);

458
src/views/materials/materialsEquipment/materialIssue/index.vue
View File

@ -7,9 +7,6 @@
<el-form-item label="表单编号" prop="formCode">
<el-input v-model="queryParams.formCode" placeholder="请输入表单编号" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="工程名称" prop="projectName">
<el-input v-model="queryParams.projectName" placeholder="请输入工程名称" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="材料名称" prop="materialName">
<el-input v-model="queryParams.materialName" placeholder="请输入设备材料名称" clearable @keyup.enter="handleQuery" />
</el-form-item>
@ -26,8 +23,8 @@
<el-input v-model="queryParams.storageUnit" placeholder="请输入保管单位" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item>
<el-button type="primary" v-hasPermi="['materials:materialIssue:list']" icon="Search" @click="handleQuery">搜索</el-button>
<el-button icon="Refresh" v-hasPermi="['materials:materialIssue:list']" @click="resetQuery">重置</el-button>
<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>
@ -39,18 +36,12 @@
<el-col :span="1.5">
<el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['materials:materialIssue:add']">新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['materials:materialIssue:remove']"
>删除</el-button
>
</el-col>
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
</template>
<el-table v-loading="loading" :data="materialIssueList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column type="index" width="60" label="序号" align="center" />
<el-table-column label="表单编号" align="center" prop="formCode" />
<el-table-column label="工程名称" align="center" prop="projectName" />
<el-table-column label="设备材料名称" align="center" prop="materialName" />
<el-table-column label="订货单位" align="center" prop="orderingUnit" />
<el-table-column label="供货单位" align="center" prop="supplierUnit" />
@ -58,23 +49,13 @@
<el-table-column label="保管单位" align="center" prop="storageUnit" />
<el-table-column label="缺陷情况" align="center" prop="defectDescription" />
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<el-table-column label="操作" align="center" min-width="150" fixed="right">
<template #default="scope">
<el-tooltip content="查看" placement="top">
<el-button link type="primary" icon="View" @click="handleView(scope.row)" v-hasPermi="['materials:materialIssue:query']"></el-button>
</el-tooltip>
<el-tooltip content="修改" placement="top">
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['materials:materialIssue:edit']"></el-button>
</el-tooltip>
<el-tooltip content="删除" placement="top">
<el-button
link
type="primary"
icon="Delete"
@click="handleDelete(scope.row)"
v-hasPermi="['materials:materialIssue:remove']"
></el-button>
</el-tooltip>
<el-button link type="primary" icon="View" @click="handleView(scope.row)" v-hasPermi="['materials:materialIssue:query']">查看</el-button>
<!-- <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['materials:materialIssue:edit']">修改</el-button> -->
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['materials:materialIssue:remove']"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
@ -92,17 +73,21 @@
<el-row>
<el-col :span="12">
<el-form-item label="表单编号" prop="formCode">
<el-input v-model="form.formCode" placeholder="请输入表单编号" />
<!-- <el-input v-model="form.formCode" placeholder="请输入表单编号" /> -->
<el-select v-model="form.formCode" placeholder="请选择表单编号" @change="(value) => formCodeChange(value)">
<el-option v-for="item in options" :key="item.formCode" :label="item.formCode" :value="item.formCode" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="工程名称" prop="projectName">
<el-input v-model="form.projectName" placeholder="请输入工程名称" />
<el-input v-model="form.projectName" disabled placeholder="请输入工程名称" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-col :span="24">
<!-- 设备材料名称：从数量验收列表自动生成，禁用手动输入 -->
<el-form-item label="设备材料名称" prop="materialName">
<el-input v-model="form.materialName" placeholder="请输入设备材料名称" />
<el-input v-model="form.materialName" placeholder="由数量验收列表中的名称自动生成" disabled style="cursor: not-allowed" />
</el-form-item>
</el-col>
<el-col :span="12">
@ -140,63 +125,71 @@
<el-row>
<el-col :span="12">
<el-form-item
:label="index === 0 ? '名称' : ''"
:prop="`itemList.${index}.name`"
label="名称"
:prop="`itemList.${index}.materialsId`"
:rules="[{ required: true, message: '名称不能为空', trigger: 'blur' }]"
>
<el-input v-model="item.name" placeholder="请输入名称" />
<el-select v-model="item.materialsId" placeholder="请选择名称" @change="(value) => getNameChange(value, index, item)">
<el-option v-for="opt in optionsName" :key="opt.id" :label="`${opt.materialsName}_${opt.createTime}`" :value="opt.id" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
:label="index === 0 ? '规格' : ''"
label="规格"
:prop="`itemList.${index}.specification`"
:rules="[{ required: true, message: '规格不能为空', trigger: 'blur' }]"
>
<el-input v-model="item.specification" placeholder="请输入规格" />
<el-input disabled v-model="item.specification" placeholder="请输入规格" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
:label="index === 0 ? '单位' : ''"
label="单位"
:prop="`itemList.${index}.unit`"
:rules="[{ required: true, message: '单位不能为空', trigger: 'blur' }]"
>
<el-input v-model="item.unit" placeholder="请输入单位" />
<el-input disabled v-model="item.unit" placeholder="请输入单位" />
</el-form-item>
</el-col>
<el-col :span="12">
<!-- <el-col :span="12">
<el-form-item
:label="index === 0 ? '库存' : ''"
label="库存"
:prop="`itemList.${index}.stockQuantity`"
:rules="[{ required: true, message: '库存不能为空', trigger: 'blur' }]"
:rules="[
{ required: true, message: '库存不能为空', trigger: 'blur' },
{ type: 'number', min: 0, message: '库存不能小于0', trigger: ['blur', 'change'] }
]"
>
<el-input v-model="item.stockQuantity" placeholder="请输入库存" />
<el-input
v-model.number="item.stockQuantity"
placeholder="请输入库存"
@input="handleStockChange(index)"
@blur="handleStockChange(index)"
/>
</el-form-item>
</el-col> -->
<el-col :span="12">
<el-form-item label="领取" :prop="`itemList.${index}.issuedQuantity`">
<el-select v-model="item.issuedQuantity" placeholder="请选择数量">
<el-option v-for="opt in item.outList" :key="opt.id" :label="opt.number" :value="opt.number" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<!-- <el-col :span="12">
<el-form-item
:label="index === 0 ? '领取' : ''"
:prop="`itemList.${index}.issuedQuantity`"
:rules="[{ required: true, message: '领取数量不能为空', trigger: 'blur' }]"
>
<el-input v-model="item.issuedQuantity" placeholder="请输入领取数量" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
:label="index === 0 ? '剩余' : ''"
label="剩余"
:prop="`itemList.${index}.remainingQuantity`"
:rules="[{ required: true, message: '剩余数量不能为空', trigger: 'blur' }]"
>
<el-input v-model="item.remainingQuantity" placeholder="请输入剩余数量" />
<el-input v-model.number="item.remainingQuantity" placeholder="请输入剩余数量" readonly />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :label="index === 0 ? '备注' : ''" prop="remark">
<el-form-item label="备注" :prop="`itemList.${index}.remark`">
<el-input v-model="item.remark" placeholder="请输入内容" />
</el-form-item>
</el-col>
</el-col> -->
<el-col :span="12" v-if="form.itemList.length > 1">
<div class="item-actions">
<el-button type="danger" link @click="removeItem(index)" icon="Delete">删除</el-button>
@ -208,28 +201,25 @@
</el-col>
<el-col :span="12">
<el-form-item label="合格证文件" prop="certCountFileId">
<file-upload :isShowTip="false" v-model="form.certCountFileId" />
<file-upload :isShowTip="false" :fileType="['pdf', 'png', 'jpg', 'jpeg']" v-model="form.certCountFileId" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="出厂报告文件" prop="reportCountFileId">
<file-upload :isShowTip="false" v-model="form.reportCountFileId" />
<file-upload :isShowTip="false" :fileType="['pdf', 'png', 'jpg', 'jpeg']" v-model="form.reportCountFileId" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="技术资料文件" prop="techDocCountFileId">
<file-upload :isShowTip="false" v-model="form.techDocCountFileId" />
<file-upload :isShowTip="false" :fileType="['pdf', 'png', 'jpg', 'jpeg']" v-model="form.techDocCountFileId" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="厂家资质文件" prop="licenseCountFileId">
<file-upload :isShowTip="false" v-model="form.licenseCountFileId" />
<file-upload :isShowTip="false" :fileType="['pdf', 'png', 'jpg', 'jpeg']" v-model="form.licenseCountFileId" />
</el-form-item>
</el-col>
<el-col :span="24">
<span style="color: #ff0000ab; margin-bottom: 10px; display: block"
>注意：请上传doc/xls/ppt/txt/pdf/png/jpg/jpeg/zip格式文件</span
> </el-col
<el-col :span="24"> <span style="color: #ff0000ab; margin-bottom: 10px; display: block">注意：pdf/png/jpg/jpeg格式文件</span> </el-col
><el-col :span="24">
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
@ -249,10 +239,23 @@
</template>
<script setup name="MaterialIssue" lang="ts">
import { listMaterialIssue, getMaterialIssue, delMaterialIssue, addMaterialIssue, updateMaterialIssue } from '@/api/materials/materialIssue';
import {
listMaterialIssue,
getMaterialIssue,
delMaterialIssue,
addMaterialIssue,
updateMaterialIssue,
inventoryList,
getMaterialName,
getMaterialInfo
} from '@/api/materials/materialIssue';
import { MaterialIssueVO, MaterialIssueQuery, MaterialIssueForm } from '@/api/materials/materialIssue/types';
import { useUserStoreHook } from '@/store/modules/user';
import wordllssue from './word/index.vue';
import { watch, onMounted, onUnmounted, ref, reactive, computed, getCurrentInstance } from 'vue';
import type { ComponentInternalInstance, ElFormInstance, DialogOption } from 'element-plus';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
// 获取用户 store
const userStore = useUserStoreHook();
@ -270,6 +273,8 @@ const total = ref(0);
const wordllssueRef = ref<InstanceType<typeof wordllssue>>();
const queryFormRef = ref<ElFormInstance>();
const materialIssueFormRef = ref<ElFormInstance>();
// 存储每个条目的watch停止函数
const itemWatchStopFns = ref<Array<() => void>>([]);
const dialog = reactive<DialogOption>({
visible: false,
@ -283,8 +288,8 @@ const getInitFormData = () => {
projectId: currentProject.value?.id,
materialSource: '1',
formCode: undefined,
projectName: undefined,
materialName: undefined,
projectName: currentProject.value?.name,
materialName: '', // 初始化为空字符串
orderingUnit: undefined,
supplierUnit: undefined,
issueUnit: undefined,
@ -302,18 +307,22 @@ const getInitFormData = () => {
itemList: [
{
id: undefined,
specification: undefined,
unit: undefined,
stockQuantity: undefined,
issuedQuantity: undefined,
remainingQuantity: undefined,
name: undefined,
remark: undefined
name: undefined, // 数量验收的名称
remark: undefined,
materialsId: undefined,
outList: []
}
]
};
};
const data = reactive<PageData<MaterialIssueForm, MaterialIssueQuery>>({
const data = reactive({
form: getInitFormData(),
queryParams: {
pageNum: 1,
@ -331,19 +340,128 @@ const data = reactive<PageData<MaterialIssueForm, MaterialIssueQuery>>({
params: {}
},
rules: {
id: [{ required: true, message: '主键id不能为空', trigger: 'blur' }]
formCode: [{ required: true, message: '请输入表单编号', trigger: 'blur' }],
projectName: [{ required: true, message: '请输入工程名称', trigger: 'blur' }],
materialName: [{ required: true, message: '请先在数量验收列表中选择名称', trigger: 'blur' }], // 确保有名称生成
orderingUnit: [{ required: true, message: '请输入订货单位', trigger: 'blur' }],
supplierUnit: [{ required: true, message: '请输入供货单位', trigger: 'blur' }],
issueUnit: [{ required: true, message: '请输入领料单位', trigger: 'blur' }],
storageUnit: [{ required: true, message: '请输入保管单位', trigger: 'blur' }]
}
});
const { queryParams, form, rules } = toRefs(data);
const optionsName: any = ref([]);
/**
* 核心函数：从数量验收列表提取名称，用逗号拼接生成设备材料名称
*/
const computeMaterialName = () => {
if (!form.value.itemList || form.value.itemList.length === 0) {
form.value.materialName = '';
return;
}
// 过滤空名称，去重（可选，根据业务需求决定是否去重）
const validNames = form.value.itemList
.filter((item) => item.name && item.name.trim() !== '')
.map((item) => item.name.trim())
.filter((name, index, self) => self.indexOf(name) === index); // 去重（如需保留重复则删除这行）
// form.value.materialName = validNames.join(',');
};
/** 查询物料领料单列表 */
const getList = async () => {
loading.value = true;
const res = await listMaterialIssue(queryParams.value);
materialIssueList.value = res.rows;
total.value = res.total;
loading.value = false;
try {
const res = await listMaterialIssue(queryParams.value);
materialIssueList.value = res.rows;
total.value = res.total;
} finally {
loading.value = false;
}
};
// 获取材料名称列表
const getName = async () => {
try {
const res = await inventoryList(currentProject.value.id);
console.log(res);
if (res.code == 200) {
optionsName.value = res.data;
}
} catch (error) {
proxy?.$modal.msgError('获取材料名称失败');
}
};
// 材料名称选择变化处理（修改select的value为名称，而非ID）
const getNameChange = (value, index, item) => {
const selected = optionsName.value.find((opt) => opt.id === value);
if (selected) {
item.name = selected.materialsName; // 直接赋值名称
item.materialsId = selected.id; // 保留ID用于后端
item.specification = selected.typeSpecificationName;
item.unit = selected.weightId;
item.issuedQuantity = selected.number;
item.stockQuantity = Number(selected.inventoryNumber) || 0;
item.outList = selected.outList || [];
// calculateRemaining(index); // 计算剩余数量
}
};
/** 验证领取数量不能超过库存 */
const validateIssuedQuantity = (rule, value, callback, index) => {
const item = form.value.itemList[index];
const stock = Number(item.stockQuantity) || 0;
const issued = Number(value) || 0;
if (stock === 0) {
callback();
return;
}
if (issued > stock) {
callback(new Error(`领取数量不能超过库存(${stock})`));
} else {
callback();
}
};
/** 计算剩余数量（库存 - 领取数量） */
const calculateRemaining = (index: number) => {
const item = form.value.itemList[index];
const stock = Number(item.stockQuantity) || 0;
const issued = Number(item.issuedQuantity) || 0;
// 确保领取数量不超过库存
if (issued > stock) {
item.issuedQuantity = stock;
proxy?.$modal.msgWarning(`领取数量不能超过库存(${stock})，已自动调整`);
}
// 计算剩余数量
item.remainingQuantity = stock - (item.issuedQuantity || 0);
};
/** 库存变化时重新计算剩余数量 */
const handleStockChange = (index: number) => {
calculateRemaining(index);
// 触发验证
if (materialIssueFormRef.value) {
materialIssueFormRef.value.validateField(`itemList.${index}.issuedQuantity`);
materialIssueFormRef.value.validateField(`itemList.${index}.remainingQuantity`);
}
};
/** 领取数量变化时重新计算剩余数量 */
const handleIssuedChange = (index: number) => {
calculateRemaining(index);
// 触发验证
if (materialIssueFormRef.value) {
materialIssueFormRef.value.validateField(`itemList.${index}.remainingQuantity`);
}
};
/** 取消按钮 */
@ -354,8 +472,38 @@ const cancel = () => {
/** 表单重置 */
const reset = () => {
// 停止所有监听
itemWatchStopFns.value.forEach((stop) => stop());
itemWatchStopFns.value = [];
form.value = getInitFormData();
materialIssueFormRef.value?.resetFields();
// 重新监听初始条目
if (form.value.itemList.length > 0) {
watchItemChanges(0);
}
// 初始计算一次材料名称
computeMaterialName();
};
/** 监听条目变化，自动计算剩余数量 */
const watchItemChanges = (index: number) => {
// 停止已有监听
if (itemWatchStopFns.value[index]) {
itemWatchStopFns.value[index]();
}
// // 监听库存和领取数量变化
// const stop = watch(
// () => [form.value.itemList[index].stockQuantity, form.value.itemList[index].issuedQuantity],
// () => {
// calculateRemaining(index);
// },
// { immediate: true }
// );
itemWatchStopFns.value[index] = stop;
};
/** 搜索按钮操作 */
@ -382,16 +530,77 @@ const handleAdd = () => {
reset();
dialog.visible = true;
dialog.title = '添加物料领料单';
// 新增时初始计算材料名称
computeMaterialName();
getFormData();
};
const options = ref([]);
//新增获取表单数据
const getFormData = async () => {
const res = await getMaterialInfo(currentProject.value.id);
if (res.code == 200) {
options.value = res.data;
}
};
const formCodeChange = (value) => {
console.log(value);
const selected = options.value.find((opt) => opt.formCode === value);
if (selected) {
form.value.materialName = selected.materialName;
form.value.orderingUnit = selected.orderingUnit;
form.value.supplierUnit = selected.supplierUnit;
optionsName.value = selected.materials;
}
};
/** 修改按钮操作 */
const handleUpdate = async (row?: MaterialIssueVO) => {
reset();
const _id = row?.id || ids.value[0];
const res = await getMaterialIssue(_id);
Object.assign(form.value, res.data);
dialog.visible = true;
dialog.title = '修改物料领料单';
try {
const res = await getMaterialIssue(_id);
Object.assign(form.value, res.data);
// 确保itemList存在且格式正确
if (!form.value.itemList) {
form.value.itemList = [];
}
// 转换数据类型并计算剩余数量
form.value.itemList = form.value.itemList.map((item) => ({
...item,
stockQuantity: Number(item.stockQuantity) || 0,
issuedQuantity: Number(item.issuedQuantity) || 0,
remainingQuantity: Number(item.remainingQuantity) || 0,
name: item.name || '' // 确保名称不为undefined
}));
// 为每个条目添加监听并强制计算剩余数量
form.value.itemList.forEach((_, index) => {
watchItemChanges(index);
calculateRemaining(index);
});
// 关键：编辑时从itemList重新计算设备材料名称（覆盖后端返回的旧值）
computeMaterialName();
// 手动触发一次验证
setTimeout(() => {
if (materialIssueFormRef.value) {
form.value.itemList.forEach((_, index) => {
materialIssueFormRef.value.validateField(`itemList.${index}.issuedQuantity`);
materialIssueFormRef.value.validateField(`itemList.${index}.remainingQuantity`);
});
// 验证设备材料名称
materialIssueFormRef.value.validateField('materialName');
}
}, 0);
dialog.visible = true;
dialog.title = '修改物料领料单';
} catch (error) {
proxy?.$modal.msgError('获取详情失败');
}
};
/** 提交按钮 */
@ -399,21 +608,39 @@ const submitForm = () => {
materialIssueFormRef.value?.validate(async (valid: boolean) => {
if (valid) {
buttonLoading.value = true;
if (form.value.id) {
await updateMaterialIssue(form.value).finally(() => (buttonLoading.value = false));
} else {
await addMaterialIssue(form.value).finally(() => (buttonLoading.value = false));
try {
// 处理提交数据，确保数量为数字类型
const submitData = {
...form.value,
itemList: form.value.itemList.map((item) => ({
...item,
stockQuantity: Number(item.stockQuantity),
issuedQuantity: Number(item.issuedQuantity),
remainingQuantity: Number(item.remainingQuantity)
}))
};
console.log('提交数据:', submitData);
if (form.value.id) {
await updateMaterialIssue(submitData);
} else {
await addMaterialIssue(submitData);
}
proxy?.$modal.msgSuccess('操作成功');
dialog.visible = false;
await getList();
} catch (error) {
proxy?.$modal.msgError('操作失败');
} finally {
buttonLoading.value = false;
}
proxy?.$modal.msgSuccess('操作成功');
dialog.visible = false;
await getList();
}
});
};
// 添加数量验收条目
const addItem = () => {
form.value.itemList.push({
const newItem = {
id: undefined,
specification: undefined,
unit: undefined,
@ -421,45 +648,84 @@ const addItem = () => {
issuedQuantity: undefined,
remainingQuantity: undefined,
name: undefined,
remark: undefined
});
remark: undefined,
materialsId: undefined
};
form.value.itemList.push(newItem);
// 监听新条目
watchItemChanges(form.value.itemList.length - 1);
// 添加后重新计算材料名称
computeMaterialName();
};
// 删除数量验收条目
const removeItem = (index: number) => {
if (form.value.itemList.length > 1) {
console.log(111111);
console.log(itemWatchStopFns.value[index]);
// 停止该条目的监听
// if (itemWatchStopFns.value[index]) {
// itemWatchStopFns.value[index]();
// }
form.value.itemList.splice(index, 1);
itemWatchStopFns.value.splice(index, 1);
// 删除后重新计算材料名称
computeMaterialName();
} else {
proxy?.$modal.msgWarning('至少需要保留一条数量验收记录');
}
};
/** 删除按钮操作 */
const handleDelete = async (row?: MaterialIssueVO) => {
const _ids = row?.id || ids.value;
await proxy?.$modal.confirm('是否确认删除物料领料单编号为"' + _ids + '"的数据项？').finally(() => (loading.value = false));
await delMaterialIssue(_ids);
proxy?.$modal.msgSuccess('删除成功');
await getList();
try {
await proxy?.$modal.confirm(`是否确认删除物料领料单编号为"${_ids}"的数据项？`);
await delMaterialIssue(_ids);
proxy?.$modal.msgSuccess('删除成功');
await getList();
} catch (error) {
// 取消删除不提示
} finally {
loading.value = false;
}
};
const handleView = (row) => {
// 查看详情
wordllssueRef.value?.openDialog(row);
};
// 关键：监听数量验收列表变化，实时更新设备材料名称
watch(
() => form.value.itemList,
() => {
computeMaterialName();
},
{ deep: true, immediate: true } // deep监听数组内部变化，immediate初始执行
);
onMounted(() => {
getList();
// getName();
});
//监听项目id刷新数据
// 监听项目id刷新数据
const listeningProject = watch(
() => currentProject.value?.id,
(nid, oid) => {
(nid) => {
queryParams.value.projectId = nid;
form.value.projectId = nid;
getList();
// getName();
}
);
onUnmounted(() => {
listeningProject();
// 清理所有监听
itemWatchStopFns.value.forEach((stop) => stop());
});
</script>
<style scoped lang="scss">

38
src/views/materials/materialsEquipment/materialIssue/word/index.vue
View File

@ -42,7 +42,7 @@
<thead>
<tr>
<th colspan="2">领料单位</th>
<td class="th-bg" colspan="2">{{ formData.placeholder }}</td>
<td class="th-bg" colspan="2">{{ formData.issueUnit }}</td>
<th colspan="2">保管单位</th>
<td class="th-bg" colspan="2">{{ formData.storageUnit }}</td>
</tr>
@ -54,31 +54,32 @@
</tbody>
<thead>
<tr>
<th width="150">序号</th>
<th width="150">名称</th>
<th width="150">规格</th>
<th width="150">单位</th>
<th width="150">库存</th>
<th width="150">领取</th>
<th width="150">剩余</th>
<th width="150">备注</th>
<!-- 去掉重复的 width 属性，统一用 CSS 控制 -->
<th style="width: 80px; word-wrap: break-word">序号</th>
<th style="width: 120px; word-wrap: break-word">名称</th>
<th style="width: 120px; word-wrap: break-word">规格</th>
<th style="width: 80px; word-wrap: break-word">单位</th>
<th style="width: 80px; word-wrap: break-word">库存</th>
<th style="width: 80px; word-wrap: break-word">领取</th>
<th style="width: 80px; word-wrap: break-word">剩余</th>
<th style="width: 120px; word-wrap: break-word">备注</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, i) of formData.itemList" :key="i">
<th width="150">{{ i + 1 }}</th>
<th width="150">{{ item.name }}</th>
<th width="150">{{ item.specification }}</th>
<th width="150">{{ item.unit }}</th>
<th width="150">{{ item.stockQuantity }}</th>
<th width="150">{{ item.issuedQuantity }}</th>
<th width="150">{{ item.remainingQuantity }}</th>
<th width="150">{{ item.remark }}</th>
<td width="150">{{ i + 1 }}</td>
<td width="150">{{ item.name }}</td>
<td width="150">{{ item.specification }}</td>
<td width="150">{{ item.unit }}</td>
<td width="150">{{ item.stockQuantity }}</td>
<td width="150">{{ item.issuedQuantity }}</td>
<td width="150">{{ item.remainingQuantity }}</td>
<td width="150">{{ item.remark }}</td>
</tr>
</tbody>
<tbody>
<tr>
<td colspan="7">
<td colspan="7" style="word-wrap: break-word">
<div style="margin-bottom: 10px">缺陷情况:</div>
{{ formData.defectDescription }}
</td>
@ -296,5 +297,6 @@ tbody {
box-shadow: 0px 0px 10px #ddd;
padding: 20px;
position: relative;
/* overflow: auto; */
}
</style>

685
src/views/materials/materialsEquipment/materialReceive/index.vue
View File

@ -7,15 +7,16 @@
<el-form-item label="表单编号" prop="formCode">
<el-input v-model="queryParams.formCode" placeholder="请输入表单编号" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="工程名称" prop="projectName">
<el-input v-model="queryParams.projectName" placeholder="请输入工程名称" clearable @keyup.enter="handleQuery" />
<el-form-item label="材料来源" prop="materialSource">
<el-select v-model="queryParams.materialSource" filterable placeholder="请选择材料来源">
<el-option label="全部" value="0"></el-option>
<el-option label="甲供材料" value="1"></el-option>
<el-option label="乙供材料" value="2"></el-option>
</el-select>
</el-form-item>
<el-form-item label="材料名称" prop="materialName">
<el-input v-model="queryParams.materialName" placeholder="请输入设备材料名称" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="合同名称" prop="contractName">
<el-input v-model="queryParams.contractName" placeholder="请输入合同名称" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="订货单位" prop="orderingUnit">
<el-input v-model="queryParams.orderingUnit" placeholder="请输入订货单位" clearable @keyup.enter="handleQuery" />
</el-form-item>
@ -23,9 +24,8 @@
<el-input v-model="queryParams.supplierUnit" placeholder="请输入供货单位" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item>
<el-button type="primary" v-hasPermi="['materials:materialReceive:list']" icon="Search" @click="handleQuery">搜索</el-button>
<el-button icon="Refresh" v-hasPermi="['materials:materialReceive:list']" @click="resetQuery">重置</el-button>
<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>
@ -38,66 +38,72 @@
<el-col :span="1.5">
<el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['materials:materialReceive:add']">新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="Delete"
:disabled="multiple"
@click="handleDelete()"
v-hasPermi="['materials:materialReceive:remove']"
>删除</el-button
>
</el-col>
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
</template>
<el-table v-loading="loading" :data="materialReceiveList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column type="index" width="60" label="序号" align="center" />
<el-table-column label="表单编号" align="center" prop="formCode" />
<el-table-column label="工程名称" align="center" prop="projectName" />
<el-table-column label="材料来源" align="center" prop="projectName">
<template #default="scope">
<el-tag :type="scope.row.materialSource == '1' ? 'success' : 'warning'">{{
scope.row.materialSource == '1' ? '甲供材料' : '乙供材料'
}}</el-tag>
</template>
</el-table-column>
<el-table-column label="设备材料名称" align="center" prop="materialName" />
<el-table-column label="合同名称" align="center" prop="contractName" />
<el-table-column label="订货单位" align="center" prop="orderingUnit" />
<el-table-column label="供货单位" align="center" prop="supplierUnit" />
<el-table-column label="订货单位" align="center" prop="orderingUnit">
<template #default="scope">
<span>{{ scope.row.orderingUnit || '-' }}</span>
</template>
</el-table-column>
<el-table-column label="供货单位" align="center" prop="supplierUnit">
<template #default="scope">
<span>{{ scope.row.supplierUnit || '-' }}</span>
</template>
</el-table-column>
<el-table-column label="设备材料入库/移交" align="center" prop="storageType">
<template #default="scope">
<dict-tag :options="storage_type" :value="scope.row.storageType" />
</template>
</el-table-column>
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<el-table-column label="操作" align="center" min-width="120" fixed="right">
<template #default="scope">
<el-tooltip content="查看" placement="top">
<el-button link type="primary" icon="View" @click="handleView(scope.row)" v-hasPermi="['materials:materialReceive:query']"></el-button>
</el-tooltip>
<!-- <el-tooltip content="修改" placement="top">
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['materials:materialReceive:edit']"></el-button>
</el-tooltip> -->
<el-tooltip content="删除" placement="top">
<el-button
link
type="primary"
icon="Delete"
@click="handleDelete(scope.row)"
v-hasPermi="['materials:materialReceive:remove']"
></el-button>
</el-tooltip>
<!-- <el-button link type="primary" icon="edit" @click="handleUpdate(scope.row)" v-hasPermi="['materials:materialReceive:edit']"
>修改</el-button
> -->
<el-button link type="primary" icon="View" @click="handleView(scope.row)" v-hasPermi="['materials:materialReceive:query']"
>查看</el-button
>
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['materials:materialReceive:remove']"
>删除</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>
<!-- 添加或修改物料接收单对话框 -->
<el-dialog draggable :title="dialog.title" v-model="dialog.visible" width="800px" append-to-body>
<el-dialog
:close-on-click-modal="false"
:close-on-press-escape="false"
draggable
:title="dialog.title"
v-model="dialog.visible"
width="800px"
append-to-body
>
<el-form ref="materialReceiveFormRef" :model="form" :rules="rules" label-width="110px">
<el-row>
<el-col :span="12">
<el-form-item label="材料来源" prop="materialSource">
<el-select v-model="form.materialSource" filterable placeholder="请选择材料来源" style="width: 100%">
<el-option label="甲供材料" value="1"></el-option>
<el-option label="已供材料" value="2"></el-option>
<el-option label="乙供材料" value="2"></el-option>
</el-select>
</el-form-item>
</el-col>
@ -106,30 +112,43 @@
<el-input v-model="form.formCode" placeholder="请输入表单编号" />
</el-form-item>
</el-col>
<el-col :span="12"
><el-form-item label="采购单编号" prop="docId"
><el-select @change="handleSelect" v-model="form.docId" filterable placeholder="请选择采购单" style="width: 100%">
<el-option v-for="item in purchaseDocList" :key="item.id" :label="item.docCode" :value="item.id"></el-option> </el-select
></el-form-item>
<el-col v-if="form.materialSource == '2'" :span="12">
<el-form-item label="采购单编号" prop="docId">
<el-select @change="handleSelect" v-model="form.docId" filterable placeholder="请选择采购单" style="width: 100%">
<el-option v-for="item in purchaseDocList" :key="item.id" :label="item.docCode" :value="item.id"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-col v-if="form.materialSource == '2'" :span="12">
<el-form-item label="供货单位" prop="supplierUnit">
<el-input disabled v-model="form.supplierUnit" placeholder="请输入供货单位" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-col v-if="form.materialSource == '2'" :span="12">
<el-form-item label="订货单位" prop="orderingUnit">
<el-input v-model="form.orderingUnit" placeholder="请输入订货单位" />
</el-form-item>
</el-col>
<el-col :span="12"
><el-form-item label="工程名称" prop="projectName">
<el-input v-model="form.projectName" placeholder="请输入工程名称" />
<el-col :span="12">
<el-form-item label="工程名称" prop="projectName">
<el-input disabled v-model="form.projectName" placeholder="请输入工程名称" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="合同名称" prop="contractName">
<el-input v-model="form.contractName" placeholder="请输入合同名称" />
<el-col :span="12" :offset="0"
><el-form-item label="材料名称" prop="materialName">
<el-input v-model="form.materialName" placeholder="请输入设备材料名称" clearable /> </el-form-item
></el-col>
<el-col :span="12" v-if="form.materialSource == '2'">
<el-form-item label="合同编号" prop="contractName">
<el-select v-model="form.contractName" filterable placeholder="请选择合同" style="width: 100%">
<el-option
v-for="item in contractNameList"
:key="item.contractCode"
:label="item.contractCode"
:value="item.contractCode"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="24">
@ -137,22 +156,19 @@
<el-input v-model="form.defectDescription" type="textarea" placeholder="请输入内容" />
</el-form-item>
</el-col>
<!-- 数量验收区域 -->
<el-col :span="24">
<div class="detail">
<div class="detail-header">
<span>数量验收</span>
<!-- <el-button type="primary" link @click="addItem" icon="Plus">添加数量验收</el-button> -->
<el-button type="primary" v-if="form.materialSource == '1'" link @click="addItem" icon="Plus">添加数量验收</el-button>
</div>
<div v-for="(item, index) in form.itemList" :key="index" class="detail-item">
<div v-for="(item, index) in form.itemList" :key="item.id" class="detail-item">
<el-row>
<el-col :span="12">
<el-form-item
disabled
label="名称"
:prop="`itemList.${index}.name`"
:rules="{ required: true, message: '名称不能为空', trigger: 'blur' }"
>
<el-input disabled v-model="item.name" placeholder="请输入名称" />
<el-form-item label="名称" :prop="`itemList.${index}.name`" :rules="{ required: true, message: '名称不能为空', trigger: 'blur' }">
<el-input :disabled="form.materialSource == '2'" v-model="item.name" placeholder="请输入名称" />
</el-form-item>
</el-col>
<el-col :span="12">
@ -161,30 +177,36 @@
:prop="`itemList.${index}.specification`"
:rules="{ required: true, message: '规格不能为空', trigger: 'blur' }"
>
<el-input disabled v-model="item.specification" placeholder="请输入规格" />
<el-input :disabled="form.materialSource == '2'" v-model="item.specification" placeholder="请输入规格" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="单位" :prop="`itemList.${index}.unit`" :rules="{ required: true, message: '单位不能为空', trigger: 'blur' }">
<el-input disabled v-model="item.unit" placeholder="请输入单位" />
<el-input :disabled="form.materialSource == '2'" v-model="item.unit" placeholder="请输入单位" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
label="数量"
:prop="`itemList.${index}.quantity`"
:rules="{ required: true, message: '数量不能为空', trigger: 'blur' }"
>
<el-input disabled type="number" v-model="item.quantity" placeholder="请输入数量" />
<el-form-item label="数量" :prop="`itemList.${index}.quantity`" :rules="rules.quantityRule" ref="quantityFormItemRefs[index]">
<el-input
:disabled="form.materialSource == '2'"
type="number"
v-model.number="item.quantity"
placeholder="请输入数量"
min="0"
@input="handleQuantityInput(index)"
@blur="handleQuantityBlur(index)"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
label="验收"
:prop="`itemList.${index}.acceptedQuantity`"
:rules="{ required: true, message: '验收数量不能为空', trigger: 'blur' }"
>
<el-input type="number" v-model="item.acceptedQuantity" placeholder="请输入验收" />
<el-form-item label="验收" :prop="`itemList.${index}.acceptedQuantity`" :rules="rules.acceptedQuantityRule">
<el-input
type="number"
v-model.number="item.acceptedQuantity"
placeholder="请输入验收"
min="0"
@input="handleAcceptedInput(index)"
/>
</el-form-item>
</el-col>
<el-col :span="12">
@ -193,62 +215,50 @@
:prop="`itemList.${index}.shortageQuantity`"
:rules="{ required: true, message: '缺件数量不能为空', trigger: 'blur' }"
>
<el-input type="number" v-model="item.shortageQuantity" placeholder="自动计算（数量-验收数量）" readonly />
<el-input type="number" min="0" v-model="item.shortageQuantity" placeholder="自动计算" readonly />
<span class="tips">*自动计算（数量-验收数量）</span>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="备注" prop="remark">
<el-input v-model="item.remark" placeholder="请输入备注" />
<el-col :span="24">
<el-form-item label="备注" :prop="`itemList.${index}.remark`">
<el-input v-model="item.remark" type="textarea" placeholder="请输入备注" />
</el-form-item>
</el-col>
<!-- <el-col :span="12" v-if="form.itemList.length > 1">
<el-col :span="12" v-if="form.itemList.length > 1 && form.materialSource == '1'">
<div class="item-actions">
<el-button type="danger" link @click="removeItem(index)" icon="Delete">删除</el-button>
</div>
</el-col> -->
</el-col>
</el-row>
</div>
</div>
</el-col>
<el-col :span="12">
<el-form-item label="合格证文件" prop="certCountFileId">
<file-upload :isShowTip="false" v-model="form.certCountFileId" />
<file-upload :isShowTip="false" :fileType="['pdf', 'png', 'jpg', 'jpeg']" v-model="form.certCountFileId" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="出厂报告文件" prop="reportCountFileId">
<file-upload :isShowTip="false" v-model="form.reportCountFileId" />
<file-upload :isShowTip="false" :fileType="['pdf', 'png', 'jpg', 'jpeg']" v-model="form.reportCountFileId" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="技术资料文件" prop="techDocCountFileId">
<file-upload :isShowTip="false" v-model="form.techDocCountFileId" />
<file-upload :isShowTip="false" :fileType="['pdf', 'png', 'jpg', 'jpeg']" v-model="form.techDocCountFileId" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="厂家资质文件" prop="licenseCountFileId">
<file-upload :isShowTip="false" v-model="form.licenseCountFileId" />
<file-upload :isShowTip="false" :fileType="['pdf', 'png', 'jpg', 'jpeg']" v-model="form.licenseCountFileId" />
</el-form-item>
</el-col>
<el-col :span="24">
<span style="color: #ff0000ab; margin-bottom: 10px; display: block">注意：请上传doc/xls/ppt/txt/pdf/png/jpg/jpeg/zip格式文件</span>
<span style="color: #ff0000ab; margin-bottom: 10px; display: block">注意：pdf/png/jpg/jpeg格式文件</span>
</el-col>
<el-col :span="24">
<el-form-item label="设备材料入库/移交" prop="storageType">
<el-radio-group v-model="form.storageType">
<el-radio v-for="dict in storage_type" :key="dict.value" :label="dict.value">
{{ dict.label }}
</el-radio>
</el-radio-group>
<!-- <el-checkbox-group v-model="form.storageType">
<el-checkbox v-for="dict in storage_type" :key="dict.value" :label="dict.value">
{{ dict.label }}
</el-checkbox>
</el-checkbox-group> -->
</el-form-item> </el-col
><el-col :span="24"
><el-form-item label="备注" prop="remark">
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
</el-form-item>
</el-col>
@ -271,21 +281,28 @@ import {
getMaterialReceive,
delMaterialReceive,
addMaterialReceive,
updateMaterialReceive
updateMaterialReceive,
getContractNameList
} from '@/api/materials/materialReceive';
import { MaterialReceiveVO, MaterialReceiveQuery, MaterialReceiveForm } from '@/api/materials/materialReceive/types';
import { useUserStoreHook } from '@/store/modules/user';
import wordllReceive from './word/index.vue';
import { listPurchaseDoc, purchaseDocPlanList } from '@/api/materials/purchaseDoc';
import { watch } from 'vue';
import { watch, onMounted, onUnmounted, ref, reactive, computed, toRefs, getCurrentInstance } from 'vue';
import type { ComponentInternalInstance, ElFormInstance, DialogOption, ElFormItem } from 'element-plus';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { storage_type } = toRefs<any>(proxy?.useDict('storage_type'));
// 获取用户 store
const userStore = useUserStoreHook();
// 从 store 中获取项目列表和当前选中的项目
const currentProject = computed(() => userStore.selectedProject);
const wordllReceiveRef = ref<InstanceType<typeof wordllReceive>>();
// 存储每个验收条目的watch停止函数
const itemWatchStopFns = ref<Array<() => void>>([]);
// 存储数量表单项的引用，用于手动触发验证
const quantityFormItemRefs = ref<(ElFormItem | null)[]>([]);
// 列表数据
const materialReceiveList = ref<MaterialReceiveVO[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
@ -295,15 +312,26 @@ const single = ref(true);
const multiple = ref(true);
const total = ref(0);
// 表单引用
const queryFormRef = ref<ElFormInstance>();
const materialReceiveFormRef = ref<ElFormInstance>();
const purchaseDocList = ref([]); //物资采购单
const purchaseMap = new Map();
const purchaseDocList = ref([]); // 物资采购单列表
const purchaseMap = new Map(); // 采购单映射（id -> 采购单对象）
const contractNameList = ref([]); //合同列表
// 对话框配置
const dialog = reactive<DialogOption>({
visible: false,
title: ''
});
const getInitFormData = () => {
// 生成验收条目唯一ID
const generateItemId = () => {
return Date.now() + Math.random().toString(36).substr(2, 9);
};
// 初始化表单数据
const getInitFormData = (): MaterialReceiveForm => {
return {
id: undefined,
projectId: currentProject.value?.id,
@ -323,12 +351,13 @@ const getInitFormData = () => {
techDocCountFileId: undefined,
licenseCount: undefined,
licenseCountFileId: undefined,
storageType: '',
storageType: '1',
remark: undefined,
docId: undefined,
docCode: undefined,
itemList: [
{
id: generateItemId(),
name: undefined,
specification: undefined,
unit: undefined,
@ -340,14 +369,15 @@ const getInitFormData = () => {
]
};
};
const initFormData: MaterialReceiveForm = {};
// 响应式数据
const data = reactive({
form: getInitFormData(),
queryParams: {
pageNum: 1,
pageSize: 10,
projectId: currentProject.value?.id,
materialSource: '1',
materialSource: '0',
formCode: undefined,
projectName: undefined,
materialName: undefined,
@ -357,18 +387,42 @@ const data = reactive({
params: {}
},
rules: {
// 物资采购单
docId: [{ required: true, message: '请选择物资采购单', trigger: 'change' }],
// 材料来源
materialSource: [{ required: true, message: '请选择材料来源', trigger: 'change' }],
// 表单编号
formCode: [{ required: true, message: '请输入表单编号', trigger: 'blur' }],
// 采购单编号
docCode: [{ required: true, message: '请输入采购单编号', trigger: 'blur' }],
// 供货单位
docId: [{ required: true, message: '请选择物资采购单', trigger: 'change' }],
supplierUnit: [{ required: true, message: '请输入供货单位', trigger: 'blur' }],
// 订货单位
orderingUnit: [{ required: true, message: '请输入订货单位', trigger: 'blur' }]
orderingUnit: [{ required: true, message: '请输入订货单位', trigger: 'blur' }],
// 数量校验规则：确保触发时机包含change，且类型为number
quantityRule: [
{ required: true, message: '数量不能为空', trigger: ['blur', 'change'] },
{ type: 'number', min: 0, message: '数量不能小于0', trigger: ['blur', 'change'] }
],
// 验收数量规则（允许≤数量）
acceptedQuantityRule: [
{ required: true, message: '验收数量不能为空', trigger: ['blur', 'change'] },
{ type: 'number', min: 0, message: '验收数量不能小于0', trigger: ['blur', 'change'] },
{
validator: (rule, value, callback) => {
const prop = rule.field;
const index = Number(prop.split('.')[1]);
const quantity = Number(form.value.itemList[index].quantity) || 0;
// 数量未填写时不验证大小关系；数量有值但验收数量未填时也不阻断（由required规则处理）
if (form.value.itemList[index].quantity === undefined || form.value.itemList[index].quantity === null) {
callback();
return;
}
// 处理value为undefined/null的情况（避免Number(undefined)转为NaN）
const acceptedVal = Number(value) || 0;
if (acceptedVal > quantity) {
callback(new Error('验收数量必须小于等于数量'));
} else {
callback();
}
},
trigger: ['blur', 'change']
}
]
}
});
@ -377,10 +431,22 @@ const { queryParams, form, rules } = toRefs(data);
/** 查询物料接收单列表 */
const getList = async () => {
loading.value = true;
const res = await listMaterialReceive(queryParams.value);
materialReceiveList.value = res.rows;
total.value = res.total;
loading.value = false;
try {
if (queryParams.value.materialSource == '0') {
delete queryParams.value.materialSource;
}
const res = await listMaterialReceive(queryParams.value);
materialReceiveList.value = res.rows;
total.value = res.total;
} finally {
loading.value = false;
}
};
// 获取合同列表数据
const getContractList = async () => {
let res = await getContractNameList(currentProject.value?.id);
contractNameList.value = res.rows;
};
/** 取消按钮 */
@ -391,8 +457,19 @@ const cancel = () => {
/** 表单重置 */
const reset = () => {
// 停止所有验收条目的watch监听
itemWatchStopFns.value.forEach((stopFn) => stopFn());
itemWatchStopFns.value = [];
form.value = getInitFormData();
materialReceiveFormRef.value?.resetFields();
if (materialReceiveFormRef.value) {
materialReceiveFormRef.value.resetFields();
}
// 重新监听初始条目
if (form.value.itemList.length > 0) {
watchItemChanges(0);
}
};
/** 搜索按钮操作 */
@ -403,14 +480,16 @@ const handleQuery = () => {
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value?.resetFields();
if (queryFormRef.value) {
queryFormRef.value.resetFields();
}
handleQuery();
};
/** 多选框选中数据 */
const handleSelectionChange = (selection: MaterialReceiveVO[]) => {
ids.value = selection.map((item) => item.id);
single.value = selection.length != 1;
single.value = selection.length !== 1;
multiple.value = !selection.length;
};
@ -419,25 +498,45 @@ const handleAdd = () => {
reset();
dialog.visible = true;
dialog.title = '添加物料接收单';
// 为初始条目添加监听
if (form.value.itemList.length > 0) {
watchItemChanges(0);
}
form.value.projectName = currentProject.value?.name;
};
/** 修改按钮操作 */
/** 修改按钮操作（核心修复：赋值后主动触发验证+数据类型转换） */
const handleUpdate = async (row?: MaterialReceiveVO) => {
reset();
const _id = row?.id || ids.value[0];
const res = await getMaterialReceive(_id);
Object.assign(form.value, res.data);
// 为每个条目添加监听
form.value.itemList.forEach((_, index) => {
watchItemChanges(index);
});
dialog.visible = true;
dialog.title = '修改物料接收单';
try {
const res = await getMaterialReceive(_id);
const formData = res.data;
// 修复1：处理itemList数据类型，确保数量/验收数量为数字（避免字符串与number规则冲突）
formData.itemList = formData.itemList.map((item) => ({
...item,
id: item.id || generateItemId(),
quantity: item.quantity !== undefined ? Number(item.quantity) : undefined, // 转为数字
acceptedQuantity: item.acceptedQuantity !== undefined ? Number(item.acceptedQuantity) : undefined, // 转为数字
shortageQuantity: item.shortageQuantity !== undefined ? Number(item.shortageQuantity) : undefined // 转为数字
}));
Object.assign(form.value, formData);
// 修复2：重新监听所有条目，并主动触发每个条目的验证（更新验证状态）
form.value.itemList.forEach((_, index) => {
watchItemChanges(index);
// 手动触发当前条目的数量、验收数量、缺件数量验证
if (materialReceiveFormRef.value) {
materialReceiveFormRef.value.validateField(`itemList.${index}.quantity`, () => {});
materialReceiveFormRef.value.validateField(`itemList.${index}.acceptedQuantity`, () => {});
materialReceiveFormRef.value.validateField(`itemList.${index}.shortageQuantity`, () => {});
}
});
dialog.visible = true;
dialog.title = '修改物料接收单';
} catch (err) {
proxy?.$modal.msgError('获取详情失败');
}
};
/** 提交按钮 */
@ -445,14 +544,32 @@ const submitForm = () => {
materialReceiveFormRef.value?.validate(async (valid: boolean) => {
if (valid) {
buttonLoading.value = true;
if (form.value.id) {
await updateMaterialReceive({ ...form.value }).finally(() => (buttonLoading.value = false));
} else {
await addMaterialReceive({ ...form.value }).finally(() => (buttonLoading.value = false));
try {
// 提交前确保数据类型正确（数字）
const submitForm = {
...form.value,
itemList: form.value.itemList.map((item) => ({
...item,
quantity: Number(item.quantity),
acceptedQuantity: Number(item.acceptedQuantity),
shortageQuantity: Number(item.shortageQuantity)
}))
};
if (form.value.id) {
await updateMaterialReceive(submitForm);
} else {
submitForm.itemList.forEach((item) => {
delete item.id;
});
await addMaterialReceive(submitForm);
}
proxy?.$modal.msgSuccess('操作成功');
dialog.visible = false;
await getList();
} finally {
buttonLoading.value = false;
}
proxy?.$modal.msgSuccess('操作成功');
dialog.visible = false;
await getList();
}
});
};
@ -460,15 +577,24 @@ const submitForm = () => {
/** 删除按钮操作 */
const handleDelete = async (row?: MaterialReceiveVO) => {
const _ids = row?.id || ids.value;
await proxy?.$modal.confirm('是否确认删除物料接收单编号为"' + _ids + '"的数据项？').finally(() => (loading.value = false));
await delMaterialReceive(_ids);
proxy?.$modal.msgSuccess('删除成功');
await getList();
if (!_ids.length) return;
try {
await proxy?.$modal.confirm(`是否确认删除物料接收单编号为"${_ids}"的数据项？`);
await delMaterialReceive(_ids);
proxy?.$modal.msgSuccess('删除成功');
await getList();
} catch (err) {
// 取消删除时不提示
} finally {
loading.value = false;
}
};
// 添加数量验收条目
/** 添加数量验收条目 */
const addItem = () => {
const newItem = {
id: generateItemId(),
name: undefined,
specification: undefined,
unit: undefined,
@ -478,110 +604,243 @@ const addItem = () => {
remark: undefined
};
form.value.itemList.push(newItem);
// 监听新条目数据变化
// 监听新条目变化并触发初始验证
watchItemChanges(form.value.itemList.length - 1);
validateQuantityField(form.value.itemList.length - 1);
};
// 监听条目数据变化，自动计算缺件数量
const watchItemChanges = (index: number) => {
watch(
() => [form.value.itemList[index].quantity, form.value.itemList[index].acceptedQuantity],
([quantity, acceptedQuantity]) => {
// 确保数量和验收数量都是数字
const qty = Number(quantity) || 0;
const acceptedQty = Number(acceptedQuantity) || 0;
// 计算缺件数量（数量 - 验收数量）
form.value.itemList[index].shortageQuantity = qty - acceptedQty;
},
{ immediate: true }
);
// 数量输入事件处理
const handleQuantityInput = (index: number) => {
// 确保值为数字类型
if (form.value.itemList[index].quantity !== undefined) {
form.value.itemList[index].quantity = Number(form.value.itemList[index].quantity);
}
// 手动触发验证
validateQuantityField(index);
};
// 删除数量验收条目
const removeItem = (index: number) => {
if (form.value.itemList.length > 1) {
form.value.itemList.splice(index, 1);
} else {
proxy?.$modal.msgWarning('至少需要保留一条数量验收记录');
// 数量失焦事件
const handleQuantityBlur = (index: number) => {
validateQuantityField(index);
};
// 验收数量输入事件
const handleAcceptedInput = (index: number) => {
// 确保值为数字类型
if (form.value.itemList[index].acceptedQuantity !== undefined) {
form.value.itemList[index].acceptedQuantity = Number(form.value.itemList[index].acceptedQuantity);
}
// 手动触发相关字段验证
validateQuantityField(index);
};
// 手动验证数量和验收数量字段
const validateQuantityField = (index: number) => {
if (materialReceiveFormRef.value) {
materialReceiveFormRef.value.validateField(`itemList.${index}.quantity`, () => {});
materialReceiveFormRef.value.validateField(`itemList.${index}.acceptedQuantity`, () => {});
materialReceiveFormRef.value.validateField(`itemList.${index}.shortageQuantity`, () => {});
}
};
const handleView = (row) => {
// 查看详情
// 监听条目变化，自动计算缺件数量（修复：计算后触发验证）
const watchItemChanges = (index: number) => {
if (itemWatchStopFns.value[index]) {
itemWatchStopFns.value[index]();
}
const stopFn = watch(
() => [form.value.itemList[index].quantity, form.value.itemList[index].acceptedQuantity],
([quantity, acceptedQuantity]) => {
const qty = Number(quantity) || 0;
let acceptedQty = Number(acceptedQuantity) || 0;
// 仅当验收数量>数量时才修正（允许等于）
if (acceptedQty > qty && qty > 0) {
acceptedQty = qty; // 修正为数量值（最大合法值）
form.value.itemList[index].acceptedQuantity = acceptedQty;
proxy?.$modal.msgWarning(`验收数量不能大于数量，已自动修正为${acceptedQty}`);
}
// 计算缺件数量（允许为0）
form.value.itemList[index].shortageQuantity = qty - acceptedQty;
// 修复3：计算后触发当前条目的验证，确保缺件数量状态更新
validateQuantityField(index);
},
{ immediate: true }
);
itemWatchStopFns.value[index] = stopFn;
};
/** 删除数量验收条目 */
const removeItem = (index: number) => {
if (form.value.itemList.length <= 1) {
proxy?.$modal.msgWarning('至少需要保留一条数量验收记录');
return;
}
// 停止该条目的监听
if (itemWatchStopFns.value[index]) {
itemWatchStopFns.value[index]();
}
// 删除条目和对应的停止函数
form.value.itemList.splice(index, 1);
itemWatchStopFns.value.splice(index, 1);
quantityFormItemRefs.value.splice(index, 1);
};
/** 查看详情 */
const handleView = (row: MaterialReceiveVO) => {
wordllReceiveRef.value?.openDialog(row);
};
/** 查询物资-采购联系单列表 */
const getlistPurchase = async () => {
const res = await listPurchaseDoc({
projectId: currentProject.value?.id,
status: 'finish'
});
purchaseDocList.value = res.rows;
if (purchaseDocList.value && purchaseDocList.value.length > 0) {
try {
const res = await listPurchaseDoc({
projectId: currentProject.value?.id,
status: 'finish'
});
purchaseDocList.value = res.rows;
purchaseDocList.value.forEach((item) => {
purchaseMap.set(item.id, item);
});
} catch (err) {
proxy?.$modal.msgError('获取采购单列表失败');
}
};
// 通过采购单获取需求信息
/** 通过采购单获取需求信息（修复：数据类型转换） */
const getdemandInfo = async (docId: string) => {
let res = await purchaseDocPlanList(docId);
if (res.code == 200) {
// 需求表单赋值
form.value.itemList = [];
// form.value.itemList 清空
console.log(form.value.itemList);
res.data.forEach((item, index) => {
let obj = {
quantity: item.demandQuantity,
acceptedQuantity: 0,
shortageQuantity: item.demandQuantity, // 初始化缺件数量为总数量
planId: item.id,
...item
};
obj.id = null;
form.value.itemList.push(obj);
// 监听每个条目的变化
watchItemChanges(form.value.itemList.length - 1);
});
if (!docId) return;
try {
const res = await purchaseDocPlanList(docId);
if (res.code === 200) {
// 清空旧监听和条目
itemWatchStopFns.value.forEach((stopFn) => stopFn());
itemWatchStopFns.value = [];
quantityFormItemRefs.value = [];
form.value.itemList = [];
// 赋值需求数据并添加监听（确保数量为数字）
res.data.forEach((item, index) => {
const qty = Number(item.demandQuantity) || 0;
const newItem = {
id: generateItemId(),
name: item.name,
specification: item.specification,
unit: item.unit,
quantity: qty, // 确保数字类型
acceptedQuantity: 0, // 初始值为0（数字）
shortageQuantity: qty, // 初始缺件=数量（数字）
remark: item.remark,
planId: item.id,
id: null
};
form.value.itemList.push(newItem);
watchItemChanges(index);
});
}
} catch (err) {
proxy?.$modal.msgError('获取采购单需求信息失败');
}
};
const handleSelect = (val) => {
// 选择设备
let obj = purchaseMap.get(val);
/** 选择采购单触发 */
const handleSelect = (val: string) => {
if (!val) return;
const obj = purchaseMap.get(val);
if (obj) {
form.value.docCode = obj.docCode || '';
form.value.supplierUnit = obj.supplier || '';
form.value.materialName = obj.name || '';
}
getdemandInfo(val);
form.value.docCode = obj?.docCode || '';
form.value.supplierUnit = obj?.supplier || '';
form.value.materialName = obj?.name || '';
};
/** 监听材料来源变化，重置数量验收列表 */
watch(
() => form.value.materialSource,
(newSource, oldSource) => {
if (newSource === oldSource) return;
// 停止所有验收条目的监听
itemWatchStopFns.value.forEach((stopFn) => stopFn());
itemWatchStopFns.value = [];
quantityFormItemRefs.value = [];
// 清空所有文件上传字段的值
form.value.certCountFileId = undefined; // 合格证文件
form.value.reportCountFileId = undefined; // 出厂报告文件
form.value.techDocCountFileId = undefined; // 技术资料文件
form.value.licenseCountFileId = undefined; // 厂家资质文件
// 重置数量验收列表为初始状态
form.value.itemList = [
{
id: generateItemId(),
name: undefined,
specification: undefined,
unit: undefined,
quantity: undefined,
acceptedQuantity: undefined,
shortageQuantity: undefined,
remark: undefined
}
];
// 重新监听初始条目并触发验证
watchItemChanges(0);
validateQuantityField(0);
// 切换到乙供时，清空采购单相关数据
if (newSource === '2') {
form.value.docId = undefined;
form.value.supplierUnit = undefined;
form.value.materialName = undefined;
form.value.docCode = undefined;
}
},
{ immediate: true }
);
/** 页面挂载时初始化 */
onMounted(() => {
getContractList();
getList();
getlistPurchase();
// 为初始条目添加监听
// 监听初始验收条目并触发验证
if (form.value.itemList.length > 0) {
watchItemChanges(0);
validateQuantityField(0);
}
});
// 监听项目id刷新数据
/** 监听项目变化，刷新数据 */
const listeningProject = watch(
() => currentProject.value?.id,
(nid, oid) => {
(nid) => {
queryParams.value.projectId = nid;
form.value.projectId = nid;
getContractList();
getList();
getlistPurchase();
}
);
/** 页面卸载时清理监听 */
onUnmounted(() => {
listeningProject();
itemWatchStopFns.value.forEach((stopFn) => stopFn());
});
</script>
<style scoped lang="scss">
.detail {
border-bottom: 1px solid #ececec;
@ -622,4 +881,8 @@ onUnmounted(() => {
color: #666;
margin-left: 8px;
}
.mb8 {
margin-bottom: 8px;
}
</style>

2
src/views/materials/materialsEquipment/materialReceive/word/index.vue
View File

@ -1,7 +1,7 @@
<template>
<el-dialog v-model="isShowDialog" title="材料设备详情" draggable width="1200px" :close-on-click-modal="false" :destroy-on-close="true">
<el-card :body-style="{ padding: '20px' }" style="border: none; box-shadow: none">
<div class="dialog-footer">
<div class="dialog-footer" v-hasPermi="['materials:materialReceive:exportWord']">
<div class="btn-item" @click="onLoad">
<img src="./icon/down.png" />
<span>导出</span>

58
src/views/materials/materialsInventory/index.vue
View File

@ -29,8 +29,28 @@
</el-row>
</template>
<el-table v-loading="loading" :data="materialsInventoryList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table v-loading="loading" :data="materialsInventoryList" @expand-change="handleExpandChange">
<el-table-column type="expand">
<template #default="props">
<div style="margin-left: 60px">
<el-table :data="materialsUseRecordList" border v-loading="loadingChild">
<el-table-column label="序号" align="center" type="index" width="60" />
<el-table-column label="使用数量" align="center" prop="useNumber" />
<el-table-column label="剩余量" align="center" prop="residueNumber" />
<el-table-column label="使用部位" align="center" prop="usePart" />
<el-table-column label="备注" align="center" prop="remark" />
</el-table>
<pagination
v-show="totalChild > 0"
:total="totalChild"
v-model:page="queryParamsChild.pageNum"
v-model:limit="queryParamsChild.pageSize"
@pagination="getListChild"
/>
</div>
</template>
</el-table-column>
<!-- <el-table-column type="selection" width="55" align="center" /> -->
<el-table-column label="序号" type="index" width="60" align="center" />
<el-table-column label="物资名称" align="center" prop="materialsName" />
<el-table-column label="计划数量" align="center" prop="quantityCount" />
@ -154,7 +174,7 @@ import {
} from '@/api/materials/materialsInventory';
import { MaterialsInventoryForm, MaterialsInventoryQuery, MaterialsInventoryVO } from '@/api/materials/materialsInventory/types';
import { useUserStoreHook } from '@/store/modules/user';
import { listMaterialsUseRecord } from '@/api/materials/materialsUseRecord';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { out_put_type } = toRefs<any>(proxy?.useDict('out_put_type'));
@ -170,7 +190,9 @@ const ids = ref<Array<string | number>>([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const loadingChild = ref(true);
const totalChild = ref(0);
const materialsUseRecordList = ref<any[]>([]);
const queryFormRef = ref<ElFormInstance>();
const materialsInventoryFormRef = ref<ElFormInstance>();
@ -194,7 +216,7 @@ const initFormData: MaterialsInventoryForm = {
shipper: undefined,
remark: undefined
};
const data = reactive<PageData<MaterialsInventoryForm, MaterialsInventoryQuery>>({
const data = reactive({
form: { ...initFormData },
queryParams: {
pageNum: 1,
@ -212,14 +234,38 @@ const data = reactive<PageData<MaterialsInventoryForm, MaterialsInventoryQuery>>
shipper: undefined,
params: {}
},
queryParamsChild: {
pageNum: 1,
pageSize: 10,
inventoryId: undefined,
usePart: undefined,
useNumber: undefined,
residueNumber: undefined
},
rules: {
id: [{ required: true, message: '主键id不能为空', trigger: 'blur' }],
materialsId: [{ required: true, message: '材料id不能为空', trigger: 'blur' }]
}
});
const { queryParams, form, rules } = toRefs(data);
const { queryParams, form, rules, queryParamsChild } = toRefs(data);
const materialsOptions = ref([]);
/** 处理外层表格展开/折叠：记录当前展开行的inventoryId */
const handleExpandChange = (row: any) => {
queryParamsChild.value.inventoryId = row.id;
getListChild();
};
/** 查询材料子级登记列表（内层列表） */
const getListChild = async () => {
loadingChild.value = true;
try {
const res = await listMaterialsUseRecord(queryParamsChild.value);
materialsUseRecordList.value = res.rows;
totalChild.value = res.total;
} finally {
loadingChild.value = false;
}
};
/** 查询材料出/入库列表 */
const getList = async () => {

425
src/views/materials/materialsUseRecord/index.vue Normal file
View File

@ -0,0 +1,425 @@
<template>
<div class="p-2">
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave"> </transition>
<el-card shadow="never">
<template #header>
<el-row :gutter="10" class="mb8">
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item label="物资名称" prop="materialsName">
<el-input v-model="queryParams.materialsName" 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>
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
</template>
<!-- 外层表格：使用expandedRowKeys控制展开状态 -->
<el-table
ref="outerTableRef"
v-loading="loading"
:data="materialsUseInventoryList"
@expand-change="handleExpandChange"
border
:expanded-row-keys="expandedRowKeys"
>
<el-table-column type="expand">
<template #default="props">
<div style="margin-left: 60px">
<!-- 子表格：使用当前行的独立数据 -->
<el-table :data="getChildData(props.row.id)" border v-loading="getChildLoading(props.row.id)">
<el-table-column label="序号" align="center" type="index" width="60" />
<el-table-column label="使用数量" align="center" prop="useNumber" />
<el-table-column label="剩余量" align="center" prop="residueNumber" />
<el-table-column label="使用部位" align="center" prop="usePart" />
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template #default="scope">
<el-button
link
type="primary"
icon="delete"
v-if="scope.row.ishow"
@click="handleDelete(scope.row, props.row.id)"
v-hasPermi="['materials:materialsUseRecord:remove']"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<!-- 子分页：使用当前行的独立分页参数 -->
<pagination
v-show="getChildTotal(props.row.id) > 0"
:total="getChildTotal(props.row.id)"
v-model:page="getChildQueryParams(props.row.id).pageNum"
v-model:limit="getChildQueryParams(props.row.id).pageSize"
@pagination="(page, limit) => handleChildPagination(props.row.id, page, limit)"
/>
</div>
</template>
</el-table-column>
<el-table-column label="序号" align="center" type="index" width="60" />
<el-table-column label="物资名称" align="center" prop="materialsName" />
<el-table-column label="交接单位" align="center" prop="recipient" />
<el-table-column label="计划数量" align="center" prop="quantityCount" />
<el-table-column label="数量" align="center" prop="number" />
<el-table-column label="出库人" align="center" prop="operator" />
<el-table-column label="领用人" align="center" prop="shipper" />
<el-table-column label="剩余量" align="center" prop="residue" />
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template #default="scope">
<el-button link type="primary" icon="Plus" @click="handleAdd(scope.row)" v-hasPermi="['materials:materialsUseRecord:add']"
>添加登记</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>
<!-- 添加或修改材料使用登记对话框 -->
<el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
<el-form ref="materialsUseRecordFormRef" :model="form" :rules="rules" label-width="80px">
<el-form-item label="使用数量" prop="useNumber">
<el-input v-model="form.useNumber" type="number" placeholder="请输入使用数量" />
</el-form-item>
<el-form-item label="使用部位" prop="usePart">
<el-input v-model="form.usePart" type="textarea" placeholder="请输入内容" />
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" placeholder="请输入备注" />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup name="MaterialsUseRecord" lang="ts">
import {
listMaterialsUseRecord,
listMaterialsUseInventory,
getMaterialsUseRecord,
delMaterialsUseRecord,
addMaterialsUseRecord,
updateMaterialsUseRecord
} from '@/api/materials/materialsUseRecord';
import { MaterialsUseRecordVO, MaterialsUseRecordQuery, MaterialsUseRecordForm } from '@/api/materials/materialsUseRecord/types';
import { getCurrentInstance, ComponentInternalInstance, onMounted, ref, reactive, toRefs, computed, watch, WatchStopHandle } from 'vue';
import { ElFormInstance, ElTable } from 'element-plus';
import useUserStore from '@/store/modules/user';
import { get } from 'lodash';
// 类型定义补充
interface DialogOption {
visible: boolean;
title: string;
}
// 子列表状态接口：为每个父行存储独立数据
interface ChildRowState {
list: MaterialsUseRecordVO[];
queryParams: MaterialsUseRecordQuery & {
pageNum: number;
pageSize: number;
inventoryId: number;
projectId?: number;
};
loading: boolean;
total: number;
}
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const userStore = useUserStore();
const currentProject = computed(() => userStore.selectedProject);
// 核心数据响应式定义
const materialsUseInventoryList = ref<any[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref<Array<string | number>>([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const expandedRowKeys = ref<number[]>([]); // 控制展开行的ID集合
// 子列表状态管理：使用对象存储不同父行的子数据，key为inventoryId
const childRowStates = ref<Record<number, ChildRowState>>({});
// 组件Ref定义
const queryFormRef = ref<ElFormInstance>();
const materialsUseRecordFormRef = ref<ElFormInstance>();
const outerTableRef = ref<InstanceType<typeof ElTable> | undefined>(undefined);
const currentOperateInventoryId = ref<number | undefined>(undefined); // 当前操作的父行ID
// 对话框与表单数据
const dialog = reactive<DialogOption>({
visible: false,
title: ''
});
const initFormData = {
id: undefined,
projectId: currentProject.value?.id,
inventoryId: undefined,
usePart: undefined,
useNumber: undefined,
residueNumber: undefined,
remark: undefined
};
const data = reactive({
form: { ...initFormData } as MaterialsUseRecordForm,
queryParams: {
pageNum: 1,
pageSize: 10,
projectId: currentProject.value?.id,
outPut: 1,
materialsName: undefined,
usePart: undefined
} as MaterialsUseRecordQuery & {
outPut?: number;
materialsName?: string;
usePart?: string;
},
rules: {
projectId: [{ required: true, message: '项目ID不能为空', trigger: 'blur' }],
inventoryId: [{ required: true, message: '库存ID不能为空', trigger: 'blur' }],
usePart: [{ required: true, message: '使用部位不能为空', trigger: 'blur' }],
useNumber: [{ required: true, message: '使用数量不能为空', trigger: 'blur' }]
}
});
const { form, rules } = toRefs(data);
const queryParams = ref<typeof data.queryParams>({ ...data.queryParams });
// ------------------------------ 子列表状态工具函数 ------------------------------
/** 获取或初始化指定父行的子列表状态 */
const getOrInitChildState = (inventoryId: number): ChildRowState => {
if (!childRowStates.value[inventoryId]) {
childRowStates.value[inventoryId] = {
list: [],
loading: false,
total: 0,
queryParams: {
pageNum: 1,
pageSize: 10,
inventoryId,
projectId: currentProject.value?.id
}
};
}
return childRowStates.value[inventoryId];
};
/** 获取指定父行的子列表数据 */
const getChildData = (inventoryId: number): MaterialsUseRecordVO[] => {
return getOrInitChildState(inventoryId).list;
};
/** 获取指定父行的子列表加载状态 */
const getChildLoading = (inventoryId: number): boolean => {
return getOrInitChildState(inventoryId).loading;
};
/** 获取指定父行的子列表总条数 */
const getChildTotal = (inventoryId: number): number => {
return getOrInitChildState(inventoryId).total;
};
/** 获取指定父行的子分页参数 */
const getChildQueryParams = (inventoryId: number) => {
return getOrInitChildState(inventoryId).queryParams;
};
// ------------------------------ 核心业务逻辑 ------------------------------
/** 查询外层列表数据 */
const getList = async () => {
loading.value = true;
try {
const res = await listMaterialsUseInventory(queryParams.value);
materialsUseInventoryList.value = res.rows;
total.value = res.total;
// 保持已展开行的状态
if (expandedRowKeys.value.length > 0 && outerTableRef.value) {
expandedRowKeys.value.forEach((id) => {
const targetRow = materialsUseInventoryList.value.find((item) => item.id === id);
targetRow && outerTableRef.value!.toggleRowExpansion(targetRow, true);
});
}
} finally {
loading.value = false;
}
};
/** 处理外层表格展开/折叠 */
const handleExpandChange = async (row: any, expandedRows: any[]) => {
const inventoryId = row.id;
// 更新展开行ID集合
expandedRowKeys.value = expandedRows.map((item) => item.id);
// 展开时加载子数据（仅首次加载）
const childState = getOrInitChildState(inventoryId);
if (expandedRows.some((item) => item.id === inventoryId) && childState.list.length === 0) {
await getListChild(inventoryId);
}
};
/** 查询指定父行的子列表数据 */
const getListChild = async (inventoryId: number) => {
const childState = getOrInitChildState(inventoryId);
childState.loading = true;
try {
const res = await listMaterialsUseRecord(childState.queryParams);
childState.list = res.rows;
// 控制首行删除按钮显示
if (childState.list.length > 0) {
childState.list[0].ishow = true;
}
childState.total = res.total;
} finally {
childState.loading = false;
}
};
/** 处理子列表分页变化 */
const handleChildPagination = async (inventoryId: number, page: number, limit: number) => {
const childState = getOrInitChildState(inventoryId);
childState.queryParams.pageNum = page;
childState.queryParams.pageSize = limit;
await getListChild(inventoryId);
};
/** 取消按钮 */
const cancel = () => {
reset();
dialog.visible = false;
currentOperateInventoryId.value = undefined;
};
/** 表单重置 */
const reset = () => {
form.value = { ...initFormData, projectId: currentProject.value?.id };
materialsUseRecordFormRef.value?.resetFields();
};
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.value.pageNum = 1;
getList();
};
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value?.resetFields();
queryParams.value = {
...data.queryParams,
pageNum: 1,
pageSize: 10,
projectId: currentProject.value?.id
};
handleQuery();
};
/** 多选框选中数据处理 */
const handleSelectionChange = (selection: MaterialsUseRecordVO[]) => {
ids.value = selection.map((item) => item.id);
single.value = selection.length !== 1;
multiple.value = !selection.length;
};
/** 新增按钮操作 */
const handleAdd = async (row: any) => {
reset();
form.value.inventoryId = row.id;
currentOperateInventoryId.value = row.id;
dialog.visible = true;
dialog.title = '添加材料使用登记';
};
/** 修改按钮操作 */
const handleUpdate = async (row?: MaterialsUseRecordVO) => {
if (!row && ids.value.length === 0) return;
reset();
const _id = row?.id || ids.value[0];
const res = await getMaterialsUseRecord(_id);
Object.assign(form.value, res.data);
currentOperateInventoryId.value = form.value.inventoryId;
dialog.visible = true;
dialog.title = '修改材料使用登记';
};
/** 提交表单操作 */
const submitForm = () => {
materialsUseRecordFormRef.value?.validate(async (valid: boolean) => {
if (!valid || !currentOperateInventoryId.value) return;
buttonLoading.value = true;
try {
// 执行添加或修改操作
const apiFn = form.value.id ? updateMaterialsUseRecord : addMaterialsUseRecord;
await apiFn(form.value);
// 刷新外层列表和当前操作行的子列表
await getList();
await getListChild(currentOperateInventoryId.value);
proxy?.$modal.msgSuccess('操作成功');
dialog.visible = false;
} finally {
buttonLoading.value = false;
}
});
};
/** 删除操作 */
const handleDelete = async (row: MaterialsUseRecordVO, inventoryId: number) => {
try {
await proxy?.$modal.confirm(`是否确认删除该记录？`);
await delMaterialsUseRecord(row.id);
await getList();
await getListChild(inventoryId);
proxy?.$modal.msgSuccess('删除成功');
} catch (error) {
// 取消删除时不做处理
}
};
/** 导出操作 */
const handleExport = () => {
proxy?.download('materials/materialsUseRecord/export', { ...queryParams.value }, `materialsUseRecord_${new Date().getTime()}.xlsx`);
};
// 监听项目ID变化刷新数据
const listeningProject: WatchStopHandle = watch(
() => currentProject.value?.id,
(newId) => {
queryParams.value.projectId = newId;
form.value.projectId = newId;
// 更新所有子列表的项目ID
Object.values(childRowStates.value).forEach((state) => {
state.queryParams.projectId = newId;
});
getList();
}
);
// 页面卸载时清理监听
onUnmounted(() => {
listeningProject();
});
// 页面挂载时加载数据
onMounted(() => {
getList();
});
</script>

619
src/views/materials/overallPlanMaterialSupply/index copy.vue Normal file
View File

@ -0,0 +1,619 @@
<template>
<div class="overall-plan-material-supply">
<el-card shadow="always">
<template #header>
<el-row :gutter="10" class="mb8">
<el-form :inline="true">
<el-form-item v-if="state.masterData.status == 'draft'">
<el-button type="primary" icon="edit" @click="clickApprovalSheet1()">审批</el-button>
</el-form-item>
<el-form-item v-if="state.masterData.status == 'waiting' || state.masterData.status == 'finish'">
<el-button icon="view" @click="lookApprovalFlow()" type="warning">查看流程</el-button>
</el-form-item>
<el-form-item>
<file-upload
upload-url="/design/totalsupplyplan/import"
v-model="file"
:limit="1"
:file-type="['xls', 'xlsx']"
:on-upload-success="handleSuccess"
>
<el-button :disabled="state.masterData.status == 'finish'" type="primary" plain icon="upload">导入</el-button>
</file-upload>
</el-form-item>
<el-form-item>
<el-button type="primary" plain icon="Download" @click="handleExport">导出</el-button>
</el-form-item>
<el-form-item>
<el-button icon="Finished" @click="editApprovalSheet()" type="success" :disabled="state.masterData.status == 'finish'"
>一键全部保存</el-button
>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="toggleExpandAll">{{ isExpandAll ? '一键收起' : '一键展开' }}</el-button>
</el-form-item>
</el-form>
<right-toolbar @queryTable="getMasterDataList"></right-toolbar>
</el-row>
</template>
</el-card>
<!-- 本地数据懒加载表格 -->
<el-table
:data="state.tableData"
v-loading="state.loading.list"
ref="tableRef"
stripe
style="width: 100%; margin-bottom: 20px; height: calc(100vh - 230px)"
row-key="id"
border
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
:lazy="true"
:load="loadLocalChildNodes"
@expand-change="handleExpandChange"
>
<el-table-column align="center" prop="num" label="编号" />
<el-table-column prop="name" label="工程或费用名称" width="180" />
<el-table-column prop="unit" label="单位" />
<el-table-column prop="specification" label="规格型号" width="80" />
<el-table-column prop="quantity" label="数量" width="100" />
<el-table-column prop="batchNumber" label="批次号" width="200" />
<!-- 优化的输入框列 -->
<el-table-column prop="brand" label="品牌">
<template #default="{ row }">
<el-input
v-model.lazy="row.brand"
:disabled="state.masterData.status != 'draft'"
v-if="!row.hasChildren"
placeholder=""
clearable
:key="`brand-${row.id}`"
@change="handleInputChange(row, 'brand')"
/>
</template>
</el-table-column>
<el-table-column prop="texture" label="材质">
<template #default="{ row }">
<el-input
v-model.lazy="row.texture"
:disabled="state.masterData.status != 'draft'"
v-if="!row.hasChildren"
placeholder=""
clearable
:key="`texture-${row.id}`"
@change="handleInputChange(row, 'texture')"
/>
</template>
</el-table-column>
<el-table-column prop="qualityStandard" label="质量标准">
<template #default="{ row }">
<el-input
:disabled="state.masterData.status != 'draft'"
v-model.lazy="row.qualityStandard"
v-if="!row.hasChildren"
placeholder=""
clearable
:key="`qualityStandard-${row.id}`"
@change="handleInputChange(row, 'qualityStandard')"
/>
</template>
</el-table-column>
<el-table-column prop="partUsed" label="使用部位">
<template #default="{ row }">
<el-input
:disabled="state.masterData.status != 'draft'"
v-model.lazy="row.partUsed"
v-if="!row.hasChildren"
placeholder=""
clearable
:key="`partUsed-${row.id}`"
@change="handleInputChange(row, 'partUsed')"
/>
</template>
</el-table-column>
<el-table-column prop="deliveryPoints" label="交货地点">
<template #default="{ row }">
<el-input
:disabled="state.masterData.status != 'draft'"
v-model.lazy="row.deliveryPoints"
v-if="!row.hasChildren"
placeholder=""
clearable
:key="`deliveryPoints-${row.id}`"
@change="handleInputChange(row, 'deliveryPoints')"
/>
</template>
</el-table-column>
<el-table-column label="预计使用日期" width="150">
<template #default="{ row }">
<el-date-picker
v-model="row.dateService"
v-if="!row.hasChildren"
type="date"
value-format="YYYY-MM-DD"
:disabled="state.masterData.status != 'draft'"
placeholder="请选择日期"
:key="`dateService-${row.id}`"
@change="handleInputChange(row, 'dateService')"
/>
</template>
</el-table-column>
<el-table-column prop="remark" label="备注" />
</el-table>
<!-- 编辑弹窗 -->
<el-dialog v-model="visible" title="修改物料信息" :width="800" :close-on-click-modal="false" @close="handleClose">
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px" class="space-y-4">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="批次号" prop="batchNumber">
<el-input disabled v-model="formData.batchNumber" placeholder="请输入批次号" clearable />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="品牌" prop="brand">
<el-input v-model="formData.brand" placeholder="请输入品牌" clearable />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="材质" prop="texture">
<el-input v-model="formData.texture" placeholder="请输入材质" clearable />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="质量标准" prop="qualityStandard">
<el-input v-model="formData.qualityStandard" placeholder="请输入质量标准" clearable />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="使用部位" prop="partUsed">
<el-input v-model="formData.partUsed" placeholder="请输入使用部位" clearable />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="交货地点" prop="deliveryPoints">
<el-input v-model="formData.deliveryPoints" placeholder="请输入交货地点" clearable />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="预计使用日期" prop="dateService">
<el-date-picker v-model="formData.dateService" type="date" placeholder="选择预计使用日期" format="YYYY-MM-DD" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="备注" prop="remark">
<el-input v-model="formData.remark" placeholder="请输入备注信息" type="textarea" rows="3" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<el-button @click="handleClose">取消</el-button>
<el-button type="primary" @click="handleSubmit">确定</el-button>
</template>
</el-dialog>
</div>
</template>
<script setup name="billofQuantities">
import { ref, reactive, onMounted, computed, getCurrentInstance, watch, onUnmounted } from 'vue';
import { ElMessage, ElLoading } from 'element-plus';
import {
obtainMasterDataList,
totalsupplyplan,
totalSupplyplanDetails,
materialChangeSupplyplan,
totalSupplyplanBatchEdit
} from '@/api/materials/overallPlanMaterialSupply/index';
import { useUserStoreHook } from '@/store/modules/user';
// 全局状态与实例获取
const userStore = useUserStoreHook();
const currentProject = computed(() => userStore.selectedProject);
const { proxy } = getCurrentInstance();
// 基础状态管理
const visible = ref(false);
const formRef = ref(null);
const tableRef = ref(null);
const file = ref(null);
const isExpandAll = ref(false);
const expandRowKeys = ref([]);
const editDataMap = ref(new Map()); // 用Map存储修改的数据，提高查询效率
const loadingInstance = ref(null);
const fullTreeData = ref([]); // 存储完整树形数据，用于本地懒加载
// 页面核心状态
const state = reactive({
tableData: [], // 初始只存放根节点
queryForm: {
projectId: currentProject.value?.id,
versions: '',
sheet: '',
pageSize: 20,
pageNum: 1
},
loading: {
versions: false,
sheets: false,
list: false
},
masterData: {}
});
// 表单数据
const formData = reactive({
batchNumber: '',
brand: '',
compileDate: '',
dateService: '',
deliveryPoints: '',
id: undefined,
name: '',
num: '',
partUsed: '',
planNumber: '',
projectId: undefined,
qualityStandard: '',
quantity: 0,
remark: '',
specification: '',
status: '',
texture: '',
unit: ''
});
// 表单验证规则
const formRules = reactive({
name: [
{ required: true, message: '请输入名称', trigger: 'blur' },
{ max: 100, message: '名称长度不能超过100个字符', trigger: 'blur' }
],
num: [
{ required: true, message: '请输入编号', trigger: 'blur' },
{ max: 50, message: '编号长度不能超过50个字符', trigger: 'blur' }
],
quantity: [
{ required: true, message: '请输入数量', trigger: 'blur' },
{ type: 'number', min: 0, message: '数量不能为负数', trigger: 'blur' }
],
compileDate: [{ required: true, message: '请选择编制日期', trigger: 'change' }]
});
/**
* 本地数据懒加载实现：从完整数据中筛选子节点
*/
const loadLocalChildNodes = (row, treeNode, resolve) => {
// 避免重复加载
if (row.children && row.children.length > 0) {
resolve(row.children);
return;
}
// 显示加载状态
loadingInstance.value = ElLoading.service({
target: tableRef.value.$el,
text: '加载子节点中...',
background: 'rgba(255, 255, 255, 0.8)'
});
try {
// 从完整数据中筛选当前行的子节点（假设父ID对应子节点的pid）
const childNodes = fullTreeData.value.filter((node) => node.pid === row.id);
// 标记子节点是否有子节点
const formattedChildren = childNodes.map((node) => ({
...node,
hasChildren: fullTreeData.value.some((child) => child.pid === node.id)
}));
// 缓存子节点到当前行
row.children = formattedChildren;
resolve(formattedChildren);
} catch (error) {
ElMessage.error(`加载子节点异常：${error.message}`);
resolve([]);
} finally {
loadingInstance.value?.close();
}
};
/**
* 处理展开状态变化
*/
const handleExpandChange = (row, expanded) => {
if (expanded) {
if (!expandRowKeys.value.includes(row.id)) {
expandRowKeys.value.push(row.id);
}
} else {
expandRowKeys.value = expandRowKeys.value.filter((id) => id !== row.id);
}
};
/**
* 一键展开/收起
*/
const toggleExpandAll = async () => {
isExpandAll.value = !isExpandAll.value;
if (isExpandAll.value) {
loadingInstance.value = ElLoading.service({
target: tableRef.value.$el,
text: '正在加载所有节点...',
background: 'rgba(255, 255, 255, 0.8)'
});
try {
// 递归加载所有层级子节点
const loadAllChildren = (nodes) => {
nodes.forEach((node) => {
const children = fullTreeData.value.filter((child) => child.sid === node.id);
const formattedChildren = children.map((child) => ({
...child,
hasChildren: fullTreeData.value.some((c) => c.sid === child.id)
}));
node.children = formattedChildren;
if (formattedChildren.length > 0) {
loadAllChildren(formattedChildren);
}
});
};
loadAllChildren(state.tableData);
// 展开所有节点
state.tableData.forEach((row) => {
tableRef.value.toggleRowExpansion(row, true);
});
ElMessage.success('所有节点已展开');
} catch (error) {
ElMessage.error(`一键展开失败：${error.message}`);
} finally {
loadingInstance.value?.close();
}
} else {
// 收起所有节点
state.tableData.forEach((row) => {
tableRef.value.toggleRowExpansion(row, false);
});
expandRowKeys.value = [];
}
};
/**
* 处理输入框变化（优化性能）
*/
const handleInputChange = (row, field) => {
// 只记录修改过的数据，避免全量对比
if (!editDataMap.value.has(row.id)) {
editDataMap.value.set(row.id, { ...row });
}
const storedData = editDataMap.value.get(row.id);
storedData[field] = row[field];
editDataMap.value.set(row.id, storedData);
};
/**
* 获取主数据列表（核心优化：拆分根节点和完整数据）
*/
async function getMasterDataList() {
try {
state.loading.list = true;
// 获取主数据
const masterDataRes = await obtainMasterDataList({
projectId: currentProject.value?.id
});
const { data: masterData } = masterDataRes;
if (!masterData[0]?.id) {
state.tableData = [];
fullTreeData.value = [];
return;
}
state.masterData = masterData[0];
// 获取完整供应计划数据
const supplyPlanRes = await totalsupplyplan({ id: masterData[0].id });
const allData = supplyPlanRes.rows || [];
// 存储完整数据到本地
fullTreeData.value = [...allData];
// 初始只加载根节点（pid为空或0的节点）
const rootNodes = allData.filter((item) => !item.pid || item.pid === 0);
// 标记根节点是否有子节点
state.tableData = rootNodes.map((node) => ({
...node,
hasChildren: allData.some((child) => child.pid === node.id)
}));
// 初始化可编辑数据映射
editDataMap.value.clear();
allData.forEach((item) => {
if (!item.hasChildren) {
// 只关注叶子节点
editDataMap.value.set(item.id, { ...item });
}
});
} catch (error) {
ElMessage.error(`数据加载失败：${error.message}`);
state.tableData = [];
fullTreeData.value = [];
} finally {
state.loading.list = false;
}
}
/**
* 获取详情
*/
async function totalSupplyplanDetail(id) {
try {
const result = await totalSupplyplanDetails(id);
if (result?.code === 200) {
const detailData = result.data || {};
// 清空表单并赋值
Object.keys(formData).forEach((key) => {
formData[key] = undefined;
});
// 处理日期格式
const formatDate = (date) => {
if (!date) return '';
const d = typeof date === 'string' ? new Date(date) : date;
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
};
Object.assign(formData, {
...detailData,
compileDate: formatDate(detailData.compileDate),
dateService: formatDate(detailData.dateService)
});
} else {
ElMessage.error(`获取详情失败: ${result?.msg || '未知错误'}`);
}
} catch (err) {
ElMessage.error(`接口请求失败: ${err.message}`);
console.error('详情接口错误:', err);
} finally {
state.loading.list = false;
}
}
/**
* 一键保存修改
*/
const editApprovalSheet = async () => {
state.loading.list = true;
try {
// 只提交修改过的数据（从Map中获取）
const modifiedData = Array.from(editDataMap.value.values());
if (modifiedData.length === 0) {
ElMessage.info('没有数据需要修改');
return;
}
await totalSupplyplanBatchEdit(modifiedData);
ElMessage.success('修改成功');
getMasterDataList(); // 重新加载数据
} catch (error) {
ElMessage.error(`保存失败：${error.message}`);
} finally {
state.loading.list = false;
}
};
/**
* 提交表单
*/
const handleSubmit = async () => {
try {
await formRef.value.validate();
await materialChangeSupplyplan(formData);
ElMessage.success('修改成功');
handleClose();
getMasterDataList();
} catch (error) {
console.error('表单验证失败:', error);
}
};
/**
* 导出数据
*/
const handleExport = async () => {
proxy?.download('/design/totalsupplyplan/export', { projectId: currentProject.value?.id }, `物资供应总计划.xlsx`, true);
};
/**
* 关闭弹窗
*/
const handleClose = () => {
visible.value = false;
formRef.value?.resetFields();
Object.keys(formData).forEach((key) => {
formData[key] = undefined;
});
};
/**
* 审批
*/
function clickApprovalSheet1() {
proxy.$tab.closePage(proxy.$route);
proxy.$router.push({
path: `/approval/overallPlanMaterialSupply/indexEdit`,
query: { id: state.masterData.id, type: 'update' }
});
}
/**
* 查看流程
*/
function lookApprovalFlow() {
proxy.$router.push({
path: `/approval/overallPlanMaterialSupply/indexEdit`,
query: { id: state.masterData.id, type: 'view' }
});
}
/**
* 监听项目变化
*/
const listeningProject = watch(
() => currentProject.value?.id,
(nid) => {
if (nid) getMasterDataList();
}
);
// 导入成功处理
const handleSuccess = () => {
ElMessage.success('导入成功');
getMasterDataList();
};
// 生命周期
onMounted(() => {
if (currentProject.value?.id) {
getMasterDataList();
}
});
onUnmounted(() => {
listeningProject();
loadingInstance.value?.close();
});
</script>
<style>
.overall-plan-material-supply {
padding: 20px;
}
.space-y-4 > .el-row {
margin-bottom: 16px;
}
.space-y-4 > .el-row:last-child {
margin-bottom: 0;
}
</style>

469
src/views/materials/overallPlanMaterialSupply/index.vue
View File

@ -1,59 +1,152 @@
<template>
<div class="overall-plan-material-supply">
<!-- tabPosition="left" -->
<el-card shadow="always">
<template #header>
<el-row :gutter="10" class="mb8">
<el-form :inline="true">
<el-form-item v-if="state.masterData.status == 'draft'">
<el-button type="primary" v-hasPermi="['design:totalsupplyplan:queryList']" icon="edit" @click="clickApprovalSheet1()">审批</el-button>
<el-button type="primary" icon="edit" @click="clickApprovalSheet1()">审批</el-button>
</el-form-item>
<el-form-item v-if="state.masterData.status == 'waiting' || state.masterData.status == 'finish'">
<el-button icon="view" v-hasPermi="['design:totalsupplyplan:queryList']" @click="lookApprovalFlow()" type="warning">查看流程</el-button>
<el-button icon="view" @click="lookApprovalFlow()" type="warning">查看流程</el-button>
</el-form-item>
<el-form-item>
<file-upload
upload-url="/design/totalsupplyplan/import"
v-model="file"
:limit="1"
:file-type="['xls', 'xlsx']"
:on-upload-success="handleSuccess"
>
<el-button :disabled="state.masterData.status == 'finish'" type="primary" plain icon="upload">导入</el-button>
</file-upload>
</el-form-item>
<el-form-item>
<el-button type="primary" plain icon="Download" @click="handleExport">导出</el-button>
</el-form-item>
<el-form-item>
<el-button icon="Finished" @click="editApprovalSheet()" type="success" :disabled="state.masterData.status == 'finish'"
>一键全部保存</el-button
>
</el-form-item>
<!-- <el-form-item>
<el-button type="primary" @click="toggleExpandAll">{{ isExpandAll ? '一键收起' : '一键展开' }}</el-button>
</el-form-item> -->
</el-form>
<right-toolbar @queryTable="getMasterDataList"></right-toolbar>
</el-row>
</template>
</el-card>
<!-- 本地数据懒加载表格 -->
<el-table
:data="state.tableData"
v-loading="state.loading.list"
ref="tableRef"
stripe
style="width: 100%; margin-bottom: 20px; height: calc(100vh - 230px)"
row-key="id"
border
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
:lazy="true"
:load="loadLocalChildNodes"
@expand-change="handleExpandChange"
>
<el-table-column prop="num" label="编号" />
<el-table-column align="center" prop="num" label="编号" />
<el-table-column prop="name" label="工程或费用名称" width="180" />
<el-table-column prop="unit" label="单位" />
<el-table-column prop="specification" label="规格型号" />
<el-table-column prop="quantity" label="数量" width="60" />
<el-table-column prop="specification" label="规格型号" width="80" />
<el-table-column prop="quantity" label="数量" width="100" />
<el-table-column prop="batchNumber" label="批次号" width="200" />
<el-table-column prop="brand" label="品牌" />
<el-table-column prop="texture" label="材质" />
<el-table-column prop="qualityStandard" label="质量标准" />
<el-table-column prop="partUsed" label="使用部位" />
<el-table-column prop="deliveryPoints" label="交货地点" />
<el-table-column label="预计使用日期">
<!-- 优化的输入框列 -->
<el-table-column prop="brand" label="品牌">
<template #default="{ row }">
<span>{{ row.dateService ? row.dateService.split(' ')[0] : '' }}</span>
<el-input
v-model.lazy="row.brand"
:disabled="state.masterData.status != 'draft'"
v-if="!row.hasChildren"
placeholder=""
clearable
:key="`brand-${row.id}`"
@change="handleInputChange(row, 'brand')"
/>
</template>
</el-table-column>
<el-table-column prop="texture" label="材质">
<template #default="{ row }">
<el-input
v-model.lazy="row.texture"
:disabled="state.masterData.status != 'draft'"
v-if="!row.hasChildren"
placeholder=""
clearable
:key="`texture-${row.id}`"
@change="handleInputChange(row, 'texture')"
/>
</template>
</el-table-column>
<el-table-column prop="qualityStandard" label="质量标准">
<template #default="{ row }">
<el-input
:disabled="state.masterData.status != 'draft'"
v-model.lazy="row.qualityStandard"
v-if="!row.hasChildren"
placeholder=""
clearable
:key="`qualityStandard-${row.id}`"
@change="handleInputChange(row, 'qualityStandard')"
/>
</template>
</el-table-column>
<el-table-column prop="partUsed" label="使用部位">
<template #default="{ row }">
<el-input
:disabled="state.masterData.status != 'draft'"
v-model.lazy="row.partUsed"
v-if="!row.hasChildren"
placeholder=""
clearable
:key="`partUsed-${row.id}`"
@change="handleInputChange(row, 'partUsed')"
/>
</template>
</el-table-column>
<el-table-column prop="deliveryPoints" label="交货地点">
<template #default="{ row }">
<el-input
:disabled="state.masterData.status != 'draft'"
v-model.lazy="row.deliveryPoints"
v-if="!row.hasChildren"
placeholder=""
clearable
:key="`deliveryPoints-${row.id}`"
@change="handleInputChange(row, 'deliveryPoints')"
/>
</template>
</el-table-column>
<el-table-column label="预计使用日期" width="150">
<template #default="{ row }">
<el-date-picker
v-model="row.dateService"
v-if="!row.hasChildren"
type="date"
value-format="YYYY-MM-DD"
:disabled="state.masterData.status != 'draft'"
placeholder="请选择日期"
:key="`dateService-${row.id}`"
@change="handleInputChange(row, 'dateService')"
/>
</template>
</el-table-column>
<el-table-column prop="remark" label="备注" />
<el-table-column label="操作">
<template #default="{ row }">
<el-button
:disabled="state.masterData.status == 'waiting' || state.masterData.status == 'finish'"
type="primary"
v-hasPermi="['design:totalsupplyplan:edit']"
@click="editApprovalSheet(row)"
>修改</el-button
>
</template>
</el-table-column>
</el-table>
<!-- 编辑 -->
<!-- 编辑弹窗 -->
<el-dialog v-model="visible" title="修改物料信息" :width="800" :close-on-click-modal="false" @close="handleClose">
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px" class="space-y-4">
<el-row :gutter="20">
@ -68,7 +161,6 @@
</el-form-item>
</el-col>
</el-row>
<!-- 物料属性区域 -->
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="材质" prop="texture">
@ -81,7 +173,6 @@
</el-form-item>
</el-col>
</el-row>
<!-- 日期与状态区域 -->
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="使用部位" prop="partUsed">
@ -94,7 +185,6 @@
</el-form-item>
</el-col>
</el-row>
<!-- 其他信息区域 -->
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="预计使用日期" prop="dateService">
@ -119,21 +209,36 @@
</template>
<script setup name="billofQuantities">
import { ref, reactive, onMounted, computed, getCurrentInstance } from 'vue';
import { ref, reactive, onMounted, computed, getCurrentInstance, watch, onUnmounted } from 'vue';
import { ElMessage, ElLoading } from 'element-plus';
import {
obtainMasterDataList,
totalsupplyplan,
totalSupplyplanDetails,
materialChangeSupplyplan
materialChangeSupplyplan,
totalSupplyplanBatchEdit
} from '@/api/materials/overallPlanMaterialSupply/index';
import { useUserStoreHook } from '@/store/modules/user';
// 全局状态与实例获取
const userStore = useUserStoreHook();
const currentProject = computed(() => userStore.selectedProject);
const { proxy } = getCurrentInstance();
// 基础状态管理
const visible = ref(false);
const formRef = ref(null);
const tableRef = ref(null);
const file = ref(null);
const isExpandAll = ref(false);
const expandRowKeys = ref([]);
const editDataMap = ref(new Map()); // 用Map存储修改的数据，提高查询效率
const loadingInstance = ref(null);
const fullTreeData = ref([]); // 存储完整树形数据，用于本地懒加载
// 页面核心状态
const state = reactive({
tableData: [],
tableData: [], // 初始只存放根节点
queryForm: {
projectId: currentProject.value?.id,
versions: '',
@ -146,9 +251,9 @@ const state = reactive({
sheets: false,
list: false
},
// 主id
masterData: {}
});
// 表单数据
const formData = reactive({
batchNumber: '',
@ -170,6 +275,7 @@ const formData = reactive({
texture: '',
unit: ''
});
// 表单验证规则
const formRules = reactive({
name: [
@ -186,70 +292,190 @@ const formRules = reactive({
],
compileDate: [{ required: true, message: '请选择编制日期', trigger: 'change' }]
});
// 获取主表数据
/**
* 本地数据懒加载实现：从完整数据中筛选子节点
*/
const loadLocalChildNodes = (row, treeNode, resolve) => {
// 避免重复加载
if (row.children && row.children.length > 0) {
resolve(row.children);
return;
}
// 显示加载状态
loadingInstance.value = ElLoading.service({
target: tableRef.value.$el,
text: '加载中...',
background: 'rgba(255, 255, 255, 0.8)'
});
try {
// 从完整数据中筛选当前行的子节点（假设父ID对应子节点的pid）
const childNodes = fullTreeData.value.filter((node) => node.pid === row.sid);
// 标记子节点是否有子节点
const formattedChildren = childNodes.map((node) => ({
...node,
hasChildren: fullTreeData.value.some((child) => child.pid === node.sid)
}));
// 缓存子节点到当前行
row.children = formattedChildren;
resolve(formattedChildren);
} catch (error) {
resolve([]);
} finally {
loadingInstance.value?.close();
}
};
/**
* 处理展开状态变化
*/
const handleExpandChange = (row, expanded) => {
if (expanded) {
if (!expandRowKeys.value.includes(row.id)) {
expandRowKeys.value.push(row.id);
}
} else {
expandRowKeys.value = expandRowKeys.value.filter((id) => id !== row.id);
}
};
/**
* 一键展开/收起
*/
const toggleExpandAll = async () => {
isExpandAll.value = !isExpandAll.value;
if (isExpandAll.value) {
loadingInstance.value = ElLoading.service({
target: tableRef.value.$el,
text: '正在加载...',
background: 'rgba(255, 255, 255, 0.8)'
});
try {
// 递归加载所有层级子节点
const loadAllChildren = (nodes) => {
nodes.forEach((node) => {
const children = fullTreeData.value.filter((child) => child.pid === node.sid);
const formattedChildren = children.map((child) => ({
...child,
hasChildren: fullTreeData.value.some((c) => c.pid === child.sid)
}));
node.children = formattedChildren;
if (formattedChildren.length > 0) {
loadAllChildren(formattedChildren);
}
});
};
loadAllChildren(state.tableData);
// 展开所有节点
state.tableData.forEach((row) => {
tableRef.value.toggleRowExpansion(row, true);
});
ElMessage.success('所有节点已展开');
} catch (error) {
ElMessage.error(`一键展开失败：${error.message}`);
} finally {
loadingInstance.value?.close();
}
} else {
// 收起所有节点
state.tableData.forEach((row) => {
tableRef.value.toggleRowExpansion(row, false);
});
expandRowKeys.value = [];
}
};
/**
* 处理输入框变化（优化性能）
*/
const handleInputChange = (row, field) => {
// 只记录修改过的数据，避免全量对比
if (!editDataMap.value.has(row.id)) {
editDataMap.value.set(row.id, { ...row });
}
const storedData = editDataMap.value.get(row.id);
storedData[field] = row[field];
editDataMap.value.set(row.id, storedData);
};
/**
* 获取主数据列表（核心优化：拆分根节点和完整数据）
*/
async function getMasterDataList() {
try {
// 获取主数据列表
state.loading.list = true;
// 获取主数据
const masterDataRes = await obtainMasterDataList({
projectId: currentProject.value?.id
});
const { data: masterData } = masterDataRes;
console.log('masterData', masterData);
if (!masterData[0].id) {
console.warn('未获取到有效的主数据ID');
if (!masterData[0]?.id) {
state.tableData = [];
fullTreeData.value = [];
return;
}
state.masterData = masterData[0];
// 获取供应计划
const supplyPlanRes = await totalsupplyplan({ id: masterData[0].id });
// 处理结果
if (supplyPlanRes.list == null) {
state.tableData = supplyPlanRes.rows || [];
console.log('state.tableData', state.tableData);
} else {
// 根据实际业务逻辑处理有list的情况
state.tableData = [];
}
// 获取完整供应计划数据
const supplyPlanRes = await totalsupplyplan({ id: masterData[0].id, projectId: currentProject.value?.id });
const allData = supplyPlanRes.rows || [];
// 存储完整数据到本地
fullTreeData.value = [...allData];
// 初始只加载根节点（pid为空或0的节点）
const rootNodes = allData.filter((item) => !item.pid || item.pid == 0);
// 标记根节点是否有子节点
state.tableData = rootNodes.map((node) => ({
...node,
hasChildren: allData.some((child) => child.pid === node.sid)
}));
// 初始化可编辑数据映射
editDataMap.value.clear();
allData.forEach((item) => {
if (!item.hasChildren) {
// 只关注叶子节点
editDataMap.value.set(item.id, { ...item });
}
});
} catch (error) {
console.error('获取主数据列表失败:', error);
// 错误情况下给默认值，避免页面出错
state.tableData = [];
fullTreeData.value = [];
} finally {
state.loading.list = false;
}
}
// 获取详情
// 修改获取详情的方法
/**
* 获取详情
*/
async function totalSupplyplanDetail(id) {
try {
const result = await totalSupplyplanDetails(id);
if (result?.code === 200) {
const detailData = result.data || {};
// 1. 清空原有表单数据
// 清空表单并赋值
Object.keys(formData).forEach((key) => {
formData[key] = undefined;
});
// 2. 处理日期格式（假设接口返回的是Date对象或ISO字符串）
// 处理日期格式
const formatDate = (date) => {
if (!date) return '';
// 若为字符串，先转为Date对象
const d = typeof date === 'string' ? new Date(date) : date;
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
};
// 3. 合并数据到formData（响应式赋值）
Object.assign(formData, {
...detailData,
// 单独处理日期字段，转为表单可识别的字符串格式
compileDate: formatDate(detailData.compileDate),
dateService: formatDate(detailData.dateService)
});
console.log('表单数据已更新:', formData);
} else {
ElMessage.error(`获取详情失败: ${result?.msg || '未知错误'}`);
}
@ -260,74 +486,113 @@ async function totalSupplyplanDetail(id) {
state.loading.list = false;
}
}
// 修改
function editApprovalSheet(row) {
console.log(row);
totalSupplyplanDetail(row.id);
visible.value = true;
}
// 提交表单
const handleSubmit = async () => {
/**
* 一键保存修改
*/
const editApprovalSheet = async () => {
state.loading.list = true;
try {
// 表单验证
await formRef.value.validate();
// 触发提交事件
editMaterialSupply(formData);
handleClose();
// 只提交修改过的数据（从Map中获取）
const modifiedData = Array.from(editDataMap.value.values());
if (modifiedData.length === 0) {
ElMessage.info('没有数据需要修改');
return;
}
await totalSupplyplanBatchEdit(modifiedData);
ElMessage.success('修改成功');
getMasterDataList(); // 重新加载数据
} catch (error) {
// 验证失败不提交
console.error('表单验证失败:', error);
return;
ElMessage.error(`保存失败：${error.message}`);
} finally {
state.loading.list = false;
}
};
// 修改物资
function editMaterialSupply(formData) {
materialChangeSupplyplan(formData).then((res) => {
if (res.code === 200) {
ElMessage.success('修改成功');
getMasterDataList();
} else {
ElMessage.error('修改失败');
}
});
}
// 关闭弹窗
/**
* 提交表单
*/
const handleSubmit = async () => {
try {
await formRef.value.validate();
await materialChangeSupplyplan(formData);
ElMessage.success('修改成功');
handleClose();
getMasterDataList();
} catch (error) {
console.error('表单验证失败:', error);
}
};
/**
* 导出数据
*/
const handleExport = async () => {
proxy?.download('/design/totalsupplyplan/export', { projectId: currentProject.value?.id }, `物资供应总计划.xlsx`, true);
};
/**
* 关闭弹窗
*/
const handleClose = () => {
visible.value = false;
// 清空表单数据
formRef.value?.resetFields();
Object.keys(formData).forEach((key) => {
formData[key] = undefined;
});
// 重置表单验证状态
formRef.value?.resetFields();
};
// 审批
/**
* 审批
*/
function clickApprovalSheet1() {
proxy.$tab.closePage(proxy.$route);
proxy.$router.push({
path: `/approval/overallPlanMaterialSupply/indexEdit`,
query: {
id: state.masterData.id,
type: 'update'
}
query: { id: state.masterData.id, type: 'update' }
});
}
// 审核流程
/**
* 查看流程
*/
function lookApprovalFlow() {
proxy.$router.push({
path: `/approval/overallPlanMaterialSupply/indexEdit`,
query: {
id: state.masterData.id,
type: 'view'
}
query: { id: state.masterData.id, type: 'view' }
});
}
onMounted(() => {
/**
* 监听项目变化
*/
const listeningProject = watch(
() => currentProject.value?.id,
(nid) => {
if (nid) getMasterDataList();
}
);
// 导入成功处理
const handleSuccess = () => {
ElMessage.success('导入成功');
getMasterDataList();
};
// 生命周期
onMounted(() => {
if (currentProject.value?.id) {
getMasterDataList();
}
});
onUnmounted(() => {
listeningProject();
loadingInstance.value?.close();
});
</script>
<style>
.overall-plan-material-supply {
padding: 20px;

6
src/views/materials/overallPlanMaterialSupply/indexEdit.vue
View File

@ -16,7 +16,7 @@
<!-- 表单区域 -->
<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>
<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' || form.status == 'waiting' || routeParams.type === 'update'" :model="form"
@ -148,7 +148,7 @@ const approvalRecordRef = ref<InstanceType<typeof ApprovalRecord>>();
const flowCodeOptions = [
{
value: currentProject.value?.id + '_totalsupplyplan',
label: '物资总计划审核'
label: '物质供应总计划审核'
}
];
@ -214,7 +214,7 @@ const getInfo = () => {
console.log('res.data', masterDataRes);
Object.assign(form.value, masterDataRes?.data[0]);
// console.log('form', form.value);
tableData.value = res.rows;
tableData.value = res.rows.reverse();//翻转
loading.value = false;
buttonLoading.value = false;
});

43
src/views/materials/purchaseDoc/index.vue
View File

@ -10,9 +10,9 @@
<el-form-item label="设备统称" prop="name">
<el-input v-model="queryParams.name" placeholder="请输入设备统称" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="到货日期" prop="arrivalDate">
<!-- <el-form-item label="到货日期" prop="arrivalDate">
<el-date-picker clearable v-model="queryParams.arrivalDate" type="date" value-format="YYYY-MM-DD" placeholder="请选择到货日期" />
</el-form-item>
</el-form-item> -->
<el-form-item>
<el-button type="primary" v-hasPermi="['cailiaoshebei:purchaseDoc:list']" icon="Search" @click="handleQuery">搜索</el-button>
@ -110,18 +110,15 @@
>修改</el-button
>
<el-button
link
type="primary"
v-if="scope.row.status == 'finish' && scope.row.feedbackUrl"
icon="Share"
@click="handleShare(scope.row)"
v-hasPermi="['cailiaoshebei:purchaseDoc:list']"
<el-button link type="primary" v-if="scope.row.status == 'finish' && scope.row.feedbackUrl" icon="Share" @click="handleShare(scope.row)"
>物流单分享</el-button
>
<el-button link type="primary" icon="View" @click="handleDetail(scope.row)" v-hasPermi="['cailiaoshebei:purchaseDoc:remove']"
>详情</el-button
>
<el-button link type="primary" icon="Download" @click="handleDownload(scope.row)" v-hasPermi="['cailiaoshebei:purchaseDoc:exportWord']"
>下载</el-button
>
</template>
</el-table-column>
</el-table>
@ -136,8 +133,8 @@
></el-col>
<el-col :span="12" :offset="0"
><el-form-item label="供应商" prop="supplier">
<el-select v-model="form.supplier" value-key="id" placeholder="请选择供应商" clearable filterable @change="">
<el-option v-for="item in supplierOptions" :key="item.id" :label="item.name" :value="item.name"> </el-option>
<el-select v-model="form.supplierId" value-key="id" placeholder="请选择供应商" clearable filterable @change="">
<el-option v-for="item in supplierOptions" :key="item.id" :label="item.supplierName" :value="item.id"> </el-option>
</el-select> </el-form-item
></el-col>
<el-col :span="12" :offset="0"
@ -232,7 +229,9 @@
<el-table-column label="物资名称" align="center" prop="name" />
<el-table-column label="规格型号" align="center" prop="specification">
<template #default="scope">
<el-button link type="primary" icon="Finished" @click="getDetailList(scope.row.ltn)"> 查看物流信息</el-button></template
<el-button link type="primary" icon="Finished" v-hasPermi="['cailiaoshebei:ltn:logistics']" @click="getDetailList(scope.row.ltn)">
查看物流信息</el-button
></template
>
</el-table-column>
</el-table>
@ -268,6 +267,8 @@ import { listContractor } from '@/api/project/contractor';
import { useUserStoreHook } from '@/store/modules/user';
import { getToken } from '@/utils/auth';
import logisticsDetail from './comm/logisticsDetail.vue';
import { FormRules } from 'element-plus';
import { listSupplierInput } from '@/api/supplierInput/supplierInput';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const route = useRoute();
const router = useRouter();
@ -307,6 +308,8 @@ const initFormData: any = {
docCode: undefined,
supplier: undefined,
reason: undefined,
supplierId: undefined,
name: undefined,
arrivalDate: undefined,
designDirectorTel: undefined,
@ -349,7 +352,7 @@ const data = reactive({
status: undefined,
params: {}
},
rules: {
rules: <FormRules>{
id: [{ required: true, message: '主键ID不能为空', trigger: 'blur' }],
docCode: [{ required: true, message: '采购单编号不能为空', trigger: 'blur' }],
planId: [{ required: true, message: '需求计划不能为空', trigger: 'blur' }],
@ -382,6 +385,15 @@ const cancel = () => {
reset();
dialog.visible = false;
};
const handleDownload = async (row) => {
proxy?.download(
'/cailiaoshebei/purchaseDoc/export/word',
{
id: row.id
},
`${row.docCode}.doc`
);
};
const handleDetail = async (row?: PurchaseDocVO) => {
proxy?.$modal.loading('加载中');
@ -470,6 +482,7 @@ const submitForm = () => {
form.value.associationList = form.value.planId?.map((item: any) => ({
planId: item
}));
form.value.supplier = supplierOptions.value.find((item) => item.id == form.value.supplierId)?.supplierName;
if (form.value.id) {
await updatePurchaseDoc(form.value).finally(() => (buttonLoading.value = false));
@ -505,10 +518,10 @@ const getBatchList = async () => {
};
const getSupplierList = async () => {
const res = await listContractor({
const res = await listSupplierInput({
projectId: currentProject.value?.id,
pageNum: 1,
contractorType: 4,
state: 'finish',
pageSize: 10000
});
supplierOptions.value = res.rows;

28
src/views/materials/usageMaterials/material/index.vue
View File

@ -23,7 +23,7 @@
style="width: 100%; margin-bottom: 20px; height: calc(100vh - 305px)"
:row-class-name="tableRowClassName"
>
<el-table-column prop="id" label="ID" width="180" align="center"></el-table-column>
<el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
<el-table-column prop="name" label="材料名称" min-width="150"></el-table-column>
<el-table-column prop="specification" label="规格" min-width="120"></el-table-column>
<el-table-column prop="supplier" label="供应商" min-width="150"></el-table-column>
@ -45,31 +45,29 @@
{{ formatDate(scope.row.createTime) }}
</template>
</el-table-column>
<el-table-column label="操作" width="180" align="center" fixed="right">
<el-table-column label="操作" width="240" align="center" fixed="right">
<template #default="scope">
<!-- <el-button size="small" icon="Plus" @click="handleAddSon(scope.row)"
class="text-blue-600 hover:text-blue-800 transition-colors"></el-button> -->
<el-button
size="small"
v-hasPermi="['cailiaoshebei:physicalsupply:edit']"
icon="Edit"
@click="handleEdit(scope.row)"
class="text-blue-600 hover:text-blue-800 transition-colors"
></el-button>
<el-button size="small" v-hasPermi="['cailiaoshebei:physicalsupply:edit']" icon="Edit" type="primary" link @click="handleEdit(scope.row)"
>修改</el-button
>
<el-button
size="small"
type="primary"
v-hasPermi="['cailiaoshebei:physicalsupplySon:list']"
icon="View"
link
@click="jumpRouter(scope.row)"
class="text-blue-600 hover:text-blue-800 transition-colors"
></el-button>
>查看</el-button
>
<el-button
size="small"
type="primary"
link
v-hasPermi="['cailiaoshebei:physicalsupply:remove']"
icon="Delete"
@click="handleDelete(scope.row)"
class="text-red-600 hover:text-red-800 transition-colors"
></el-button>
>删除</el-button
>
</template>
</el-table-column>
</el-table>

93
src/views/materials/usageMaterials/purchase/index.vue
View File

@ -1,23 +1,12 @@
<template>
<div style="padding: 20px">
<el-card class="mb-5">
<el-button
type="primary"
v-hasPermi="['cailiaoshebei:physicalsupply:add']"
icon="Plus"
@click="handleAdd"
class="transition-all duration-200 hover:shadow-md"
>
新增
</el-button>
<el-button
v-hasPermi="['cailiaoshebei:physicalsupply:list']"
icon="Refresh"
@click="refreshData"
class="transition-all duration-200 hover:shadow-md"
>
刷新
</el-button>
<el-card class="mb-5" shadow="never">
<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 @queryTable="refreshData"></right-toolbar>
</el-row>
</el-card>
<!-- 数据表格 -->
@ -31,7 +20,9 @@
:header-cell-style="{ 'background-color': '#f5f7fa', 'font-weight': 'bold' }"
:row-class-name="tableRowClassName"
>
<el-table-column prop="id" label="ID" width="180" align="center"></el-table-column>
<!-- <el-table-column prop="id" label="ID" width="180" align="center"></el-table-column> -->
<el-table-column type="index" label="序号" align="center" width="60"></el-table-column>
<el-table-column prop="name" label="材料名称" align="center"></el-table-column>
<el-table-column prop="specification" label="规格" align="center"></el-table-column>
<el-table-column prop="supplier" label="供应商" align="center"></el-table-column>
@ -53,36 +44,39 @@
{{ formatDate(scope.row.createTime) }}
</template>
</el-table-column>
<el-table-column label="操作" width="240" align="center" fixed="right">
<el-table-column label="操作" width="300" align="center" fixed="right">
<template #default="scope">
<el-button
v-hasPermi="['cailiaoshebei:physicalsupplySon:add']"
size="small"
icon="Plus"
type="primary"
v-if="scope.row.purchaseSubmission == '0'"
link
@click="handleAddSon(scope.row)"
class="text-blue-600 hover:text-blue-800 transition-colors"
></el-button>
<el-button
v-hasPermi="['cailiaoshebei:physicalsupply:edit']"
size="small"
icon="Edit"
@click="handleEdit(scope.row)"
class="text-blue-600 hover:text-blue-800 transition-colors"
></el-button>
>提交</el-button
>
<el-button type="primary" v-hasPermi="['cailiaoshebei:physicalsupply:edit']" size="small" icon="Edit" link @click="handleEdit(scope.row)"
>修改</el-button
>
<el-button
type="primary"
v-hasPermi="['cailiaoshebei:physicalsupplySon:list']"
size="small"
icon="View"
link
@click="jumpRouter(scope.row)"
class="text-blue-600 hover:text-blue-800 transition-colors"
></el-button>
>查看</el-button
>
<el-button
v-hasPermi="['cailiaoshebei:physicalsupply:remove']"
size="small"
icon="Delete"
link
type="primary"
@click="handleDelete(scope.row)"
class="text-red-600 hover:text-red-800 transition-colors"
></el-button>
>删除</el-button
>
</template>
</el-table-column>
</el-table>
@ -120,7 +114,7 @@
</el-col>
<el-col :span="12">
<el-form-item label="运算周期(天)" prop="executionCycle">
<el-input v-model.number="formData.executionCycle" placeholder="请输入运算周期" type="number"></el-input>
<el-input v-model.number="formData.executionCycle" min="0" placeholder="请输入运算周期" type="number"></el-input>
</el-form-item>
</el-col>
</el-row>
@ -128,12 +122,12 @@
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="安装量" prop="installationQuantity">
<el-input v-model="formData.installationQuantity" placeholder="请输入安装量"></el-input>
<el-input v-model="formData.installationQuantity" min="0" type="number" placeholder="请输入安装量"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="安装比例" prop="installationRatio">
<el-input v-model="formData.installationRatio" placeholder="请输入安装比例" suffix="%"></el-input>
<el-input v-model="formData.installationRatio" min="0" type="number" placeholder="请输入安装比例" suffix="%"></el-input>
</el-form-item>
</el-col>
</el-row>
@ -254,7 +248,6 @@ const formRules = reactive({
const queryParams = reactive({
pageSize: 10,
pageNum: 1,
findType: 1,
projectId: currentProject.value?.id
});
@ -304,22 +297,7 @@ const handleSearch = () => {
// 刷新数据
const refreshData = () => {
fetchData();
ElMessage.success('数据已刷新');
};
// 分页大小改变
const handleSizeChange = (val) => {
pageSize.value = val;
currentPage.value = 1;
fetchData();
};
// 当前页改变
const handleCurrentChange = (val) => {
currentPage.value = val;
fetchData();
};
// 新增
const handleAdd = () => {
dialogType.value = 'add';
@ -484,6 +462,17 @@ const jumpRouter = (row) => {
}
});
};
//监听项目id刷新数据
const listeningProject = watch(
() => currentProject.value?.id,
(nid, oid) => {
fetchData();
}
);
onUnmounted(() => {
listeningProject();
});
// 初始化页面
onMounted(() => {
fetchData();

2
src/views/materials/usageMaterials/purchase/indexSon.vue
View File

@ -30,9 +30,7 @@
:row-class-name="tableRowClassName"
>
<!-- 基础信息列 -->
<el-table-column prop="id" label="ID" width="180" align="center"></el-table-column>
<el-table-column prop="batch" label="批次" align="center"></el-table-column>
<el-table-column prop="physicalsupplyId" label="使用情况ID" width="180" align="center"></el-table-column>
<!-- 时间相关列 -->
<el-table-column prop="issuanceTime" label="联系单下达时间" min-width="160" align="center">
<template #default="scope">

256
src/views/message/notice/index.vue Normal file
View File

@ -0,0 +1,256 @@
<template>
<div class="p-2">
<el-card shadow="never">
<template #header>
<el-row :gutter="10" class="mb8">
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item label="查看时间" prop="viewTime">
<el-date-picker clearable v-model="queryParams.viewTime" type="date" value-format="YYYY-MM-DD" placeholder="请选择查看时间" />
</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>
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
</template>
<el-table v-loading="loading" :data="noticeList">
<el-table-column type="index" label="序号" width="80" align="center" />
<!-- <el-table-column label="接收通知的用户" align="center" prop="recipientId" />
<el-table-column label="发送通知的用户" align="center" prop="senderId" /> -->
<el-table-column label="通知内容" align="center" prop="msg" />
<el-table-column label="查看状态" align="center" prop="viewStatus">
<template #default="scope">
<el-tag :type="scope.row.viewStatus === 0 ? 'danger' : 'success'">{{ scope.row.viewStatus === 0 ? '未读' : '已读' }}</el-tag>
</template>
</el-table-column>
<!-- <el-table-column label="查看时间" align="center" prop="viewTime" width="180">
<template #default="scope">
<span>{{ parseTime(scope.row.viewTime, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
<el-table-column label="备注" align="center" prop="remark" /> -->
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template #default="scope"> <el-button link type="primary" @click="handleRoute(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>
<!-- 添加或修改消息对话框 -->
<el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
<el-form ref="noticeFormRef" :model="form" :rules="rules" label-width="80px">
<el-form-item label="项目ID" prop="projectId">
<el-input v-model="form.projectId" placeholder="请输入项目ID" />
</el-form-item>
<el-form-item label="接收通知的用户ID" prop="recipientId">
<el-input v-model="form.recipientId" placeholder="请输入接收通知的用户ID" />
</el-form-item>
<el-form-item label="发送通知的用户ID" prop="senderId">
<el-input v-model="form.senderId" placeholder="请输入发送通知的用户ID" />
</el-form-item>
<el-form-item label="配置id" prop="configId">
<el-input v-model="form.configId" placeholder="请输入配置id" />
</el-form-item>
<el-form-item label="详情id" prop="detailId">
<el-input v-model="form.detailId" placeholder="请输入详情id" />
</el-form-item>
<el-form-item label="通知内容">
<editor v-model="form.content" :min-height="192" />
</el-form-item>
<el-form-item label="查看时间" prop="viewTime">
<el-date-picker clearable v-model="form.viewTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择查看时间">
</el-date-picker>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" placeholder="请输入备注" />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup name="Notice" lang="ts">
import { listNotice, getNotice, delNotice, addNotice, updateNotice } from '@/api/message/notice';
import { NoticeVO, NoticeQuery, NoticeForm } from '@/api/message/notice/types';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
import { useUserStoreHook } from '@/store/modules/user';
const noticeList = ref([]);
const buttonLoading = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref<Array<string | number>>([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
// 获取用户 store
const userStore = useUserStoreHook();
// 从 store 中获取项目列表和当前选中的项目
const currentProject = computed(() => userStore.selectedProject);
const queryFormRef = ref<ElFormInstance>();
const noticeFormRef = ref<ElFormInstance>();
const dialog = reactive<DialogOption>({
visible: false,
title: ''
});
const initFormData: NoticeForm = {
id: undefined,
projectId: currentProject.value?.id,
recipientId: undefined,
senderId: undefined,
configId: undefined,
detailId: undefined,
content: undefined,
viewStatus: undefined,
viewTime: undefined,
remark: undefined
};
const data = reactive({
form: { ...initFormData },
queryParams: {
pageNum: 1,
pageSize: 10,
projectId: currentProject.value?.id,
userId: userStore.userId,
recipientId: undefined,
senderId: undefined,
configId: undefined,
detailId: undefined,
content: undefined,
viewStatus: undefined,
viewTime: undefined,
params: {}
},
rules: {
id: [{ required: true, message: '主键ID不能为空', trigger: 'blur' }],
projectId: [{ required: true, message: '项目ID不能为空', trigger: 'blur' }],
recipientId: [{ required: true, message: '接收通知的用户ID不能为空', trigger: 'blur' }],
senderId: [{ required: true, message: '发送通知的用户ID不能为空', trigger: 'blur' }],
configId: [{ required: true, message: '配置id不能为空', trigger: 'blur' }],
detailId: [{ required: true, message: '详情id不能为空', trigger: 'blur' }],
content: [{ required: true, message: '通知内容不能为空', trigger: 'blur' }],
viewStatus: [{ required: true, message: '查看状态(0未读 1已读)不能为空', trigger: 'change' }]
}
});
const { queryParams, form, rules } = toRefs(data);
/** 查询消息列表 */
const getList = async () => {
loading.value = true;
const res = await listNotice(queryParams.value);
noticeList.value = res.rows;
if (noticeList.value.length > 0) {
noticeList.value.forEach((item) => {
let obj = JSON.parse(item.content);
item.route = obj.type;
item.msg = obj.content;
});
}
total.value = res.total;
loading.value = false;
};
// 跳转到指定路由
const handleRoute = (row) => {
proxy.$router.push({ path: row.route });
};
/** 取消按钮 */
const cancel = () => {
reset();
dialog.visible = false;
};
/** 表单重置 */
const reset = () => {
form.value = { ...initFormData };
noticeFormRef.value?.resetFields();
};
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.value.pageNum = 1;
getList();
};
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value?.resetFields();
handleQuery();
};
/** 多选框选中数据 */
const handleSelectionChange = (selection: NoticeVO[]) => {
ids.value = selection.map((item) => item.id);
single.value = selection.length != 1;
multiple.value = !selection.length;
};
/** 新增按钮操作 */
const handleAdd = () => {
reset();
dialog.visible = true;
dialog.title = '添加消息';
};
/** 修改按钮操作 */
const handleUpdate = async (row?: NoticeVO) => {
reset();
const _id = row?.id || ids.value[0];
const res = await getNotice(_id);
Object.assign(form.value, res.data);
dialog.visible = true;
dialog.title = '修改消息';
};
/** 提交按钮 */
const submitForm = () => {
noticeFormRef.value?.validate(async (valid: boolean) => {
if (valid) {
buttonLoading.value = true;
if (form.value.id) {
await updateNotice(form.value).finally(() => (buttonLoading.value = false));
} else {
await addNotice(form.value).finally(() => (buttonLoading.value = false));
}
proxy?.$modal.msgSuccess('操作成功');
dialog.visible = false;
await getList();
}
});
};
/** 删除按钮操作 */
const handleDelete = async (row?: NoticeVO) => {
const _ids = row?.id || ids.value;
await proxy?.$modal.confirm('是否确认删除消息编号为"' + _ids + '"的数据项？').finally(() => (loading.value = false));
await delNotice(_ids);
proxy?.$modal.msgSuccess('删除成功');
await getList();
};
/** 导出按钮操作 */
const handleExport = () => {
proxy?.download(
'message/notice/export',
{
...queryParams.value
},
`notice_${new Date().getTime()}.xlsx`
);
};
onMounted(() => {
getList();
});
</script>

77
src/views/out/constructionValue/index.vue
View File

@ -22,18 +22,12 @@
<el-col :span="1.5">
<el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['out:constructionValue:add']">新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['out:constructionValue:remove']"
>删除</el-button
>
</el-col>
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
</template>
<el-table v-loading="loading" :data="constructionValueList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<!-- <el-table-column label="主键ID" align="center" prop="id" v-if="true" /> -->
<el-table-column type="index" width="55" label="序号" align="center" />
<el-table-column label="上报日期" align="center" prop="reportDate" width="180">
<template #default="scope">
<span>{{ parseTime(scope.row.reportDate, '{y}-{m}-{d}') }}</span>
@ -45,7 +39,8 @@
<el-table-column label="人工填报数量" align="center" prop="artificialNum" />
<el-table-column label="无人机识别数量" align="center" prop="uavNum" />
<el-table-column label="确认数量" align="center" prop="confirmNum" />
<el-table-column label="产值" align="center" prop="outValue" />
<el-table-column label="对乙产值" align="center" prop="outValue" />
<el-table-column label="对甲产值" align="center" prop="ownerValue" />
<el-table-column label="流程状态" align="center" prop="status">
<template #default="scope">
<dict-tag :options="wf_business_status" :value="scope.row.auditStatus" />
@ -54,22 +49,28 @@
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="210">
<template #default="scope">
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['out:constructionValue:edit']">修改</el-button>
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['out:constructionValue:remove']"
>删除</el-button
>
<el-button link type="primary" icon="Finished" @click="handleAudit(scope.row)" v-hasPermi="['out:constructionValue:remove']"
>审核</el-button
>
<el-button link type="primary" icon="Finished" @click="handleAudit(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>
<!-- 添加或修改施工产值对话框 -->
<el-dialog draggable :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
<el-form ref="constructionValueFormRef" :model="form" :rules="rules" label-width="120px">
<el-form-item label="方阵" prop="matrixId" v-if="!form.id">
<el-form-item label="对应项目结构" prop="progressCategoryId">
<el-tree-select
v-model="form.progressCategoryId"
:data="ProjectStructureList"
@node-click="handleCheckChange"
:props="{ value: 'id', label: 'name', children: 'children' }"
value-key="id"
@change="selectTime"
placeholder="请选择项目结构"
check-strictly
/>
</el-form-item>
<!-- <el-form-item label="方阵" prop="matrixId" v-if="!form.id">
<el-cascader
:options="matrixOptions"
placeholder="请选择"
@ -92,7 +93,7 @@
clearable
>
</el-cascader>
</el-form-item>
</el-form-item> -->
<el-form-item label="计划日期" prop="reportDateId" v-if="!form.id">
<el-cascader
:options="progressTimeList"
@ -140,6 +141,7 @@ import {
updateConstructionValue
} from '@/api/out/constructionValue';
import { ConstructionValueVO, ConstructionValueQuery, ConstructionValueForm } from '@/api/out/constructionValue/types';
import { getProjectStructure } from '@/api/progress/constructionSchedulePlan';
import { getProjectSquare, listProgressCategory, workScheduleList, workScheduleListDetail, workScheduleListPosition } from '@/api/progress/plan';
import { ProgressCategoryVO } from '@/api/progress/plan/types';
@ -227,7 +229,7 @@ const data = reactive<PageData<ConstructionValueForm, ConstructionValueQuery>>({
});
const { queryParams, form, rules } = toRefs(data);
const ProjectStructureList = ref([]);
/** 查询施工产值列表 */
const getList = async () => {
loading.value = true;
@ -271,19 +273,19 @@ const handleSelectionChange = (selection: ConstructionValueVO[]) => {
/** 新增按钮操作 */
const handleAdd = async () => {
reset();
const res = await getProjectSquare(currentProject.value?.id);
if (res.data.length === 0) return proxy?.$modal.msgWarning('当前项目下没有方阵，请先创建方阵');
const isFangzhen = res.data.some((item) => item.children && item.children.length);
console.log('🚀 ~ handleAdd ~ isFangzhen:', isFangzhen);
// const res = await getProjectSquare(currentProject.value?.id);
// if (res.data.length === 0) return proxy?.$modal.msgWarning('当前项目下没有方阵，请先创建方阵');
// const isFangzhen = res.data.some((item) => item.children && item.children.length);
// console.log('🚀 ~ handleAdd ~ isFangzhen:', isFangzhen);
if (!isFangzhen) return proxy?.$modal.msgWarning('当前项目下没有方阵，请先创建方阵');
let matrixList = res.data.map((item) => {
return {
...item,
matrixId: item?.projectId
};
});
matrixOptions.value = matrixList;
// if (!isFangzhen) return proxy?.$modal.msgWarning('当前项目下没有方阵，请先创建方阵');
// let matrixList = res.data.map((item) => {
// return {
// ...item,
// matrixId: item?.projectId
// };
// });
// matrixOptions.value = matrixList;
dialog.visible = true;
dialog.title = '添加施工产值';
};
@ -292,7 +294,7 @@ const handleAdd = async () => {
const handleChange = async (value: number) => {
queryParams.value.matrixId = value;
const res = await listProgressCategory(queryParams.value);
const data = proxy?.handleTree<ProgressCategoryVO>(res.data, 'id', 'pid');
const data = proxy?.handleTree<ProgressCategoryVO>(res.data, 'id', 'parentId');
if (data) {
progressCategoryList.value = data;
console.log('🚀 ~ handleChange ~ progressCategoryList.value :', progressCategoryList.value);
@ -315,6 +317,18 @@ const submitTime = async (value: string) => {
form.value.artificialNum = data?.finishedNumber;
};
/** 查询施工进度计划列表 */
const getProjectStructureList = async () => {
const res = await getProjectStructure(currentProject.value?.id);
ProjectStructureList.value = [res.data];
console.log(ProjectStructureList.value);
};
/** 查询施工进度计划列表 */
const handleCheckChange = (val) => {
form.value.projectStructureName = val.name;
};
/** 重置选择器 */
const resetCascader = (index?: number) => {
if (index) {
@ -381,6 +395,7 @@ const handleExport = () => {
};
onMounted(() => {
getProjectStructureList();
getList();
});

28
src/views/out/designCompletion/index.vue
View File

@ -1,34 +1,38 @@
<template>
<div class="p-2">
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
<div v-show="showSearch" class="mb-[10px]">
<el-card shadow="hover">
<el-card shadow="never">
<template #header>
<el-row :gutter="10" class="mb8">
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item label="计划月份" prop="planMonth">
<el-date-picker v-model="queryParams.planMonth" type="month" value-format="YYYY-MM" placeholder="请选择计划月份" />
</el-form-item>
<el-form-item label="类型" prop="type">
<el-select v-model="queryParams.type" placeholder="请选择类型">
<el-option label="对甲" value="1" />
<el-option label="对乙" value="2" />
</el-select>
</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">
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
</template>
<el-table v-loading="loading" :data="monthPlanList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column type="index" label="序号" width="60" align="center" />
<el-table-column label="计划月份" align="center" prop="planMonth" />
<el-table-column label="计划产值" align="center" prop="planValue" />
<el-table-column label="完成产值" align="center" prop="completeValue" />
<el-table-column label="差额" align="center" prop="differenceValue" />
<el-table-column label="类型" align="center">
<template #default="scope">
<span v-if="scope.row.type == '1'">对甲</span>
<span v-else>对乙</span>
</template>
</el-table-column>
<el-table-column label="产值类型" align="center" prop="valueType">
<template #default="scope">
<dict-tag :options="out_value_type" :value="scope.row.valueType" />

59
src/views/out/monthPlan/index.vue
View File

@ -8,10 +8,16 @@
<el-date-picker v-model="queryParams.planMonth" type="month" value-format="YYYY-MM" placeholder="请选择计划月份" />
</el-form-item>
<el-form-item label="产值类型" prop="valueType">
<el-select v-model="queryParams.valueType" placeholder="请选择产值类型">
<el-select v-model="queryParams.valueType" placeholder="全部">
<el-option v-for="item in out_value_type" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="类型" prop="type">
<el-select v-model="queryParams.type" placeholder="请选择类型">
<el-option label="对甲" value="1" />
<el-option label="对乙" value="2" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
@ -27,26 +33,26 @@
<el-col :span="1.5">
<el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['out:monthPlan:add']">新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['out:monthPlan:remove']"
>删除</el-button
>
</el-col>
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
</template>
<el-table v-loading="loading" :data="monthPlanList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table v-loading="loading" :data="monthPlanList">
<el-table-column type="index" label="序号" width="55" align="center" />
<el-table-column label="计划月份" align="center" prop="planMonth" />
<el-table-column label="计划产值" align="center" prop="planValue" />
<el-table-column label="完成产值" align="center" prop="completeValue" />
<el-table-column label="差额" align="center" prop="differenceValue" />
<el-table-column label="计划产值(元)" align="center" prop="planValue" />
<el-table-column label="完成产值(元)" align="center" prop="completeValue" />
<el-table-column label="差额(元)" align="center" prop="differenceValue" />
<el-table-column label="产值类型" align="center" prop="valueType">
<template #default="scope">
<dict-tag :options="out_value_type" :value="scope.row.valueType" />
</template>
</el-table-column>
<el-table-column label="类型" align="center">
<template #default="scope">
<span v-if="scope.row.type == '1'">对甲</span>
<span v-else>对乙</span>
</template>
</el-table-column>
<el-table-column label="流程状态" align="center" prop="planAuditStatus">
<template #default="scope">
<dict-tag :options="wf_business_status" :value="scope.row.planAuditStatus" />
@ -55,7 +61,7 @@
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template #default="scope"
><el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['out:monthPlan:edit']">修改</el-button>
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['out:monthPlan:remove']">删除</el-button>
<!-- <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['out:monthPlan:remove']">删除</el-button> -->
<el-button link type="primary" icon="Finished" @click="handleAudit(scope.row)" v-hasPermi="['out:monthPlan:remove']">审核</el-button>
</template>
</el-table-column>
@ -65,8 +71,14 @@
</el-card>
<!-- 添加或修改月度产值计划对话框 -->
<el-dialog draggable :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
<el-form ref="monthPlanFormRef" :model="form" :rules="rules" label-width="80px">
<el-form-item label="计划产值" prop="planValue">
<el-form ref="monthPlanFormRef" :model="form" :rules="rules" label-width="120px">
<el-form-item label="类型" prop="planValue">
<el-select v-model="form.type" placeholder="请选择类型">
<el-option label="对甲" value="1" />
<el-option label="对乙" value="2" />
</el-select>
</el-form-item>
<el-form-item label="计划产值(元)" prop="planValue">
<el-input v-model="form.planValue" placeholder="请输入计划产值" type="number" />
</el-form-item>
<el-form-item label="计划月份" prop="planMonth">
@ -100,6 +112,13 @@ import { useUserStoreHook } from '@/store/modules/user';
const userStore = useUserStoreHook();
// 从 store 中获取项目列表和当前选中的项目
const currentProject = computed(() => userStore.selectedProject);
const month = computed(() => {
const now = new Date();
const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, '0'); // getMonth() 从0开始
const currentMonth = `${year}-${month}`;
return currentMonth;
});
const monthPlanList = ref<MonthPlanVO[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
@ -117,7 +136,7 @@ const dialog = reactive<DialogOption>({
title: ''
});
const initFormData: MonthPlanForm = {
const initFormData = {
id: undefined,
projectId: currentProject.value?.id,
planValue: undefined,
@ -125,12 +144,12 @@ const initFormData: MonthPlanForm = {
differenceValue: undefined,
planMonth: undefined,
isDesign: true,
type: '1',
valueType: undefined,
planAuditStatus: undefined,
completeAuditStatus: undefined
};
const data = reactive<PageData<MonthPlanForm, MonthPlanQuery>>({
const data = reactive({
form: { ...initFormData },
queryParams: {
pageNum: 1,
@ -139,10 +158,12 @@ const data = reactive<PageData<MonthPlanForm, MonthPlanQuery>>({
planValue: undefined,
completeValue: undefined,
differenceValue: undefined,
planMonth: undefined,
planMonth: month.value,
valueType: undefined,
planAuditStatus: undefined,
completeAuditStatus: undefined,
type: '1',
params: {}
},
rules: {

22
src/views/out/monthPlan/indexEdit.vue
View File

@ -25,29 +25,37 @@
:disabled="routeParams.type === 'view' || form.status == 'waiting'"
:model="form"
:rules="rules"
label-width="120px"
label-width="80px"
class="space-y-4"
>
<div class="grid grid-cols-1 gap-4">
<el-row :gutter="20" justify="space-between" v-for="item in form">
<el-col :span="8" :offset="0">
<el-col :span="6" :offset="0">
<el-form-item label="计划产值" prop="planValue">
<el-input v-model="item.planValue" placeholder="请输入计划产值" disabled />
</el-form-item>
</el-col>
<el-col :span="8" :offset="0">
<el-col :span="6" :offset="0">
<el-form-item label="计划月份" prop="planMonth">
<el-date-picker v-model="item.planMonth" type="month" value-format="YYYY-MM" disabled placeholder="请选择计划月份" />
</el-form-item>
</el-col>
<el-col :span="8" :offset="0">
<el-col :span="6" :offset="0">
<el-form-item label="产值类型" prop="valueType">
<el-select v-model="item.valueType" placeholder="请选择产值类型" disabled>
<el-option v-for="it in out_value_type" :key="it.value" :label="it.label" :value="it.value" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="6" :offset="0">
<el-form-item label="类型" prop="valueType">
<el-select v-model="item.type" placeholder="请选择类型" disabled>
<el-option label="对甲" value="1" />
<el-option label="对乙" value="2" />
</el-select>
</el-form-item>
</el-col>
</el-row>
</div>
</el-form>
@ -167,7 +175,7 @@ const getInfo = () => {
form.value = res.data as any;
console.log('🚀 ~ getInfo ~ form.value:', form.value[0].projectId);
form.value[0].mid = form.value[0].id;
form.value[0].id = form.value[0].projectId + '_' + form.value[0].planMonth;
loading.value = false;
buttonLoading.value = false;
@ -223,13 +231,15 @@ const approvalVerifyOpen = async () => {
// 图纸上传成功之后 开始提交
const submit = async (status, data) => {
form.value = data;
console.log(form.value);
if (status === 'draft') {
buttonLoading.value = false;
proxy?.$modal.msgSuccess('暂存成功');
proxy.$tab.closePage(proxy.$route);
proxy.$router.go(-1);
} else {
const res = await isSubmit(data[1]?.id);
const res = await isSubmit(data[0]?.mid);
if (!res.data) {
proxy?.$modal.msgError('三种计划产值必须填写');

25
src/views/out/monthPlanAudit/index.vue
View File

@ -32,10 +32,10 @@
<el-table v-loading="loading" :data="monthPlanAuditList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="设计产值" align="center" prop="designValue" />
<el-table-column label="采购产值" align="center" prop="purchaseValue" />
<el-table-column label="施工产值" align="center" prop="constructionValue" />
<el-table-column label="总产值" align="center" prop="totalValue" />
<el-table-column label="设计产值(元)" align="center" prop="designValue" />
<el-table-column label="采购产值(元)" align="center" prop="purchaseValue" />
<el-table-column label="施工产值(元)" align="center" prop="constructionValue" />
<el-table-column label="总产值(元)" align="center" prop="totalValue" />
<el-table-column label="计划月份" align="center" prop="planMonth" />
</el-table>
@ -44,16 +44,16 @@
<!-- 添加或修改审核通过月度产值计划对话框 -->
<el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
<el-form ref="monthPlanAuditFormRef" :model="form" :rules="rules" label-width="80px">
<el-form-item label="设计产值" prop="designValue">
<el-form-item label="设计产值(元)" prop="designValue">
<el-input v-model="form.designValue" placeholder="请输入设计产值" />
</el-form-item>
<el-form-item label="采购产值" prop="purchaseValue">
<el-form-item label="采购产值(元)" prop="purchaseValue">
<el-input v-model="form.purchaseValue" placeholder="请输入采购产值" />
</el-form-item>
<el-form-item label="施工产值" prop="constructionValue">
<el-form-item label="施工产值(元)" prop="constructionValue">
<el-input v-model="form.constructionValue" placeholder="请输入施工产值" />
</el-form-item>
<el-form-item label="总产值" prop="totalValue">
<el-form-item label="总产值(元)" prop="totalValue">
<el-input v-model="form.totalValue" placeholder="请输入总产值" />
</el-form-item>
<el-form-item label="计划月份" prop="planMonth">
@ -80,6 +80,13 @@ import { useUserStoreHook } from '@/store/modules/user';
const userStore = useUserStoreHook();
// 从 store 中获取项目列表和当前选中的项目
const currentProject = computed(() => userStore.selectedProject);
const month = computed(() => {
const now = new Date();
const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, '0'); // getMonth() 从0开始
const currentMonth = `${year}-${month}`;
return currentMonth;
});
const monthPlanAuditList = ref<MonthPlanAuditVO[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
@ -116,7 +123,7 @@ const data = reactive<PageData<MonthPlanAuditForm, MonthPlanAuditQuery>>({
purchaseValue: undefined,
constructionValue: undefined,
totalValue: undefined,
planMonth: undefined,
planMonth: month.value,
params: {}
},
rules: {

100
src/views/out/outDesignTable/index.vue
View File

@ -1,44 +1,48 @@
<template>
<div class="p-2">
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
<div v-show="showSearch" class="mb-[10px]">
<el-card shadow="hover">
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item label="计划月份" prop="month">
<el-date-picker v-model="queryParams.month" type="month" value-format="YYYY-MM" placeholder="请选择计划月份" />
</el-form-item>
<el-form-item label="产值类型" prop="valueType">
<el-select v-model="queryParams.valueType" placeholder="请选择产值类型">
<el-option label="设计" value="1" />
<el-option label="采购" value="2" />
</el-select>
</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">
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
</template>
<el-tabs type="border-card" @tab-change="handleTabChange" v-model="activeTab">
<el-tab-pane v-for="(item, index) in tabList" :key="index" :label="item.label" :name="item.value">
<el-card shadow="never">
<template #header>
<el-row :gutter="10" class="mb8"
><el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item label="计划月份" prop="month">
<el-date-picker v-model="queryParams.month" type="month" value-format="YYYY-MM" placeholder="请选择计划月份" />
</el-form-item>
<el-form-item label="产值类型" prop="valueType">
<el-select v-model="queryParams.valueType" placeholder="请选择产值类型">
<el-option label="设计" value="1" />
<el-option label="采购" value="2" />
</el-select>
</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>
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
</template>
<el-table v-loading="loading" :data="valueAllocationList">
<el-table-column label="项目" align="center" prop="projectName" />
<el-table-column label="月预计产值" align="center" prop="monthEstimatedValue" />
<el-table-column label="完成产值月合计" align="center" prop="monthCompletionValue" />
<el-table-column label="产值差额" align="center" prop="valueDifference" />
<el-table-column label="项目总产值" align="center" prop="totalValue" />
<el-table-column label="累计完成产值" align="center" prop="accumulatedCompletionValue" />
<el-table-column label="项目完成率" align="center" prop="projectCompletionRate" />
</el-table>
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
</el-card>
<el-table v-loading="loading" :data="valueAllocationList">
<el-table-column label="项目" align="center" prop="projectName" />
<el-table-column label="月预计产值" align="center" prop="monthEstimatedValue" />
<el-table-column label="完成产值月合计" align="center" prop="monthCompletionValue" />
<el-table-column label="产值差额" align="center" prop="valueDifference" />
<el-table-column label="项目总产值" align="center" prop="totalValue" />
<el-table-column label="累计完成产值" align="center" prop="accumulatedCompletionValue" />
<el-table-column label="项目完成率" align="center" prop="projectCompletionRate" />
</el-table>
<pagination
v-show="total > 0"
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</el-card>
</el-tab-pane>
</el-tabs>
</div>
</template>
@ -66,14 +70,30 @@ const data = reactive({
month: undefined
}
});
const activeTab = ref('1');
const { queryParams } = toRefs(data);
const tabList = [
{
value: '1',
label: '对甲采购设计报表'
},
{
value: '2',
label: '对乙采购设计报表'
}
];
const handleTabChange = (tab) => {
activeTab.value = tab;
data.queryParams.valueType = '1';
// data.queryParams.month = '';
getList();
};
/** 查询项目总产值分配列表 */
const getList = async () => {
loading.value = true;
const res = await listOutTable(queryParams.value);
const res = await listOutTable({ ...queryParams.value, type: activeTab.value });
valueAllocationList.value = res.rows;
total.value = res.total;
loading.value = false;

206
src/views/out/outDesignTableVS/index.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="p-2">
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
<div v-show="showSearch" class="mb-[10px]">
<el-tabs type="border-card" @tab-change="handleTabChange" v-model="activeTab">
<el-tab-pane v-for="(item, index) in tabList" :key="index" :label="item.label" :name="item.value">
<el-card shadow="hover">
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item label="计划月份" prop="month">
@ -9,7 +9,9 @@
</el-form-item>
<el-form-item label="产值类型" prop="valueType">
<el-select v-model="queryParams.valueType" placeholder="请选择产值类型">
<el-option v-for="item in out_value_type" :key="item.value" :label="item.label" :value="item.value" />
<el-option label="设计" value="1" />
<el-option label="采购" value="2" />
<el-option label="施工" value="3" />
</el-select>
</el-form-item>
<el-form-item>
@ -18,68 +20,100 @@
</el-form-item>
</el-form>
</el-card>
</div>
</transition>
<el-card shadow="never">
<template #header>
<el-row :gutter="10" class="mb8">
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
</template>
<el-table v-loading="loading" :data="valueAllocationList">
<el-table-column label="项目" align="center" prop="projectName" />
<el-table-column label="累计完工产值" align="center" prop="totalCompletionOutputValue" />
<el-table-column label="累计结算产值" align="center" prop="totalSettlementOutputValue" />
<el-table-column label="完工未结算额" align="center" prop="completionUnsettledAmount" />
<el-table-column label="完工未结算比例" align="center" prop="completionUnsettledRatio" />
<el-table-column label="操作" align="center">
<template #default="scope">
<el-button type="primary" @click="handleEdit(scope.row)" link icon="Position">联查分包结算</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>
<el-card shadow="never">
<el-table v-loading="loading" :data="tableData" v-if="activeTab == '1' || activeTab == '2'">
<el-table-column label="项目" align="center" prop="projectName" />
<el-table-column label="累计完工产值" align="center" prop="totalCompletionOutputValue" />
<el-table-column label="累计结算产值" align="center" prop="totalSettlementOutputValue" />
<el-table-column label="完工未结算额" align="center" prop="completionUnsettledAmount" />
<el-table-column label="完工未结算比例" align="center" prop="completionUnsettledRatio" />
<!-- <el-table-column label="操作" align="center">
<template #default="scope">
<el-button type="primary" @click="handleEdit(scope.row)" link icon="Position">联查分包结算</el-button>
</template>
</el-table-column> -->
</el-table>
<el-table v-loading="loading" :data="tableData" v-if="activeTab == '3'">
<el-table-column label="项目" align="center" prop="projectName" />
<!-- <el-table-column label="累计完工产值" align="center" prop="totalCompletionOutputValue" /> -->
<el-table-column label="分包累计结算产值" align="center" prop="subTotalSettlementOutputValue" />
<el-table-column label="业主累计结算产值" align="center" prop="ownerTotalSettlementOutputValue" />
<el-table-column label="差额" align="center" prop="differenceValue" />
<!-- <el-table-column label="操作" align="center">
<template #default="scope">
<el-button type="primary" @click="handleEdit(scope.row)" link icon="Position">联查分包结算</el-button>
</template>
</el-table-column> -->
</el-table>
<el-table v-loading="loading" :data="tableData" v-if="activeTab == '4'">
<el-table-column label="项目" align="center" prop="projectName" />
<el-table-column label="对甲计划总产值" align="center" prop="ownerTotal" />
<el-table-column label="对乙计划总产值" align="center" prop="subTotal" />
<el-table-column label="对甲月计划产值" align="center" prop="ownerPlanTotal" />
<el-table-column label="对乙月计划产值" align="center" prop="subPlanTotal" />
<el-table-column label="对甲月实际产值" align="center" prop="ownerActualTotal" />
<el-table-column label="对乙月实际产值" align="center" prop="subActualTotal" />
<!-- <el-table-column label="操作" align="center">
<template #default="scope">
<el-button type="primary" @click="handleEdit(scope.row)" link icon="Position">联查分包结算</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>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script setup name="ValueAllocation" lang="ts">
import { listOutTable } from '@/api/out/outDesignTableVS';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
<script setup lang="ts">
import { useUserStoreHook } from '@/store/modules/user';
import { listOutTable, comparisonOfOutputValue, comparisonOfSettlementValue } from '@/api/out/outDesignTableVS/index';
import { dayjs } from 'element-plus';
// 获取用户 store
const userStore = useUserStoreHook();
// 从 store 中获取项目列表和当前选中的项目
const currentProject = computed(() => userStore.selectedProject);
const valueAllocationList = ref([]);
const loading = ref(true);
const showSearch = ref(true);
const total = ref(0);
const { out_value_type } = toRefs<any>(proxy?.useDict('out_value_type'));
const queryFormRef = ref<ElFormInstance>();
const data = reactive({
queryParams: {
pageNum: 1,
pageSize: 10,
valueType: '1',
projectId: currentProject.value?.id,
month: undefined
}
const activeTab = ref('1');
const queryParams = ref({
month: '',
valueType: '2',
pageNum: 1,
pageSize: 10
});
const total = ref(0);
const tableData = ref([]);
const loading = ref(false);
const { queryParams } = toRefs(data);
const tabList = [
{
value: '2',
label: '对乙产值和对乙结算'
},
{
value: '3',
label: '对甲结算和对乙结算'
},
{
value: '1',
label: '对甲产值和对甲结算'
},
{
value: '4',
label: '对甲产值和对乙产值'
}
];
/** 查询项目总产值分配列表 */
const getList = async () => {
loading.value = true;
//切换表单
const handleTabChange = (tab) => {
activeTab.value = tab;
const res = await listOutTable(queryParams.value);
valueAllocationList.value = res.rows;
total.value = res.total;
loading.value = false;
handleQuery();
};
/** 搜索按钮操作 */
@ -88,45 +122,47 @@ const handleQuery = () => {
getList();
};
/** 联查分包结算 */
const handleEdit = (row: any) => {
proxy?.$tab.openPage('/out/settlementValueSubcontract');
};
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value?.resetFields();
queryParams.value.month = '';
queryParams.value.valueType = '';
handleQuery();
};
/** 导出按钮操作 */
const handleExport = () => {
proxy?.download(
'out/valueAllocation/export',
{
...queryParams.value
},
`valueAllocation_${new Date().getTime()}.xlsx`
);
// 获取列表
const getList = async () => {
const params = {
...queryParams.value,
projectId: currentProject.value?.id,
type: activeTab.value
};
if (activeTab.value == '4') {
comparisonOfOutputValue(params).then((res) => {
if (res.code == 200) {
tableData.value = res.rows;
total.value = res.total;
}
});
} else if (activeTab.value == '3') {
comparisonOfSettlementValue(params).then((res) => {
if (res.code == 200) {
tableData.value = res.rows;
total.value = res.total;
}
});
} else {
const res = await listOutTable(params);
if (res.code == 200) {
tableData.value = res.rows;
total.value = res.total;
}
}
};
const handleEdit = (row: any) => {};
onMounted(() => {
// 也可以使用字符串格式（例如 YYYY-MM）
const currentMonthString = ref(dayjs().format('YYYY-MM'));
queryParams.value.month = currentMonthString.value;
getList();
});
//监听项目id刷新数据
const listeningProject = watch(
() => currentProject.value?.id,
(nid, oid) => {
queryParams.value.projectId = nid;
getList();
}
);
onUnmounted(() => {
listeningProject();
});
</script>
<style scoped lang="scss"></style>

164
src/views/out/outTable/index.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="p-2">
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
<div v-show="showSearch" class="mb-[10px]">
<el-tabs type="border-card" @tab-change="handleTabChange" v-model="activeTab">
<el-tab-pane v-for="(item, index) in tabList" :key="index" :label="item.label" :name="item.value">
<el-card shadow="hover">
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item label="计划月份" prop="month">
@ -13,70 +13,68 @@
</el-form-item>
</el-form>
</el-card>
</div>
</transition>
<el-card shadow="never">
<template #header>
<el-row :gutter="10" class="mb8">
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
</template>
<el-table v-loading="loading" :data="valueAllocationList">
<el-table-column label="项目" align="center" prop="projectName" />
<el-table-column label="项目总产值" align="center" prop="totalValue" />
<el-table-column label="月预计产值" align="center" prop="monthlyEstimatedValue" />
<el-table-column label="完成产值(第一周)" align="center" prop="firstWeekCompletionValue" />
<el-table-column label="完成产值(第二周)" align="center" prop="secondWeekCompletionValue" />
<el-table-column label="完成产值(第三周)" align="center" prop="thirdWeekCompletionValue" />
<el-table-column label="完成产值(第四周)" align="center" prop="fourthWeekCompletionValue" />
<el-table-column label="完成产值(第五周)" align="center" prop="fifthWeekCompletionValue" />
<el-table-column label="完成产值月合计" align="center" prop="totalCompletionValue" />
<el-table-column label="产值差额" align="center" prop="valueDifference" />
<el-table-column label="预计累计产值" align="center" prop="estimatedAccumulatedValue" />
<el-table-column label="累计完成产值" align="center" prop="accumulatedCompletionValue" />
<el-table-column label="产值差额" align="center" prop="valueDifferenceAccumulation" />
<el-table-column label="项目完成总进度" align="center" prop="totalCompletionProgress" />
</el-table>
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
</el-card>
<el-card shadow="never">
<el-table v-loading="loading" :data="tableData">
<el-table-column label="项目" align="center" prop="projectName" />
<el-table-column label="项目总产值" align="center" prop="totalValue" />
<el-table-column label="月预计产值" align="center" prop="monthlyEstimatedValue" />
<el-table-column label="完成产值(第一周)" align="center" prop="firstWeekCompletionValue" />
<el-table-column label="完成产值(第二周)" align="center" prop="secondWeekCompletionValue" />
<el-table-column label="完成产值(第三周)" align="center" prop="thirdWeekCompletionValue" />
<el-table-column label="完成产值(第四周)" align="center" prop="fourthWeekCompletionValue" />
<el-table-column label="完成产值(第五周)" align="center" prop="fifthWeekCompletionValue" />
<el-table-column label="完成产值月合计" align="center" prop="totalCompletionValue" />
<el-table-column label="产值差额" align="center" prop="valueDifference" />
<el-table-column label="预计累计产值" align="center" prop="estimatedAccumulatedValue" />
<el-table-column label="累计完成产值" align="center" prop="accumulatedCompletionValue" />
<el-table-column label="产值差额" align="center" prop="valueDifferenceAccumulation" />
<el-table-column label="项目完成总进度" align="center" prop="totalCompletionProgress" />
</el-table>
<pagination
v-show="total > 0"
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</el-card>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script setup name="ValueAllocation" lang="ts">
import { listOutTable } from '@/api/out/outTable';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
<script setup lang="ts">
import { useUserStoreHook } from '@/store/modules/user';
import { dayjs } from 'element-plus';
// 获取用户 store
import { listOutTable } from '@/api/out/outTable';
const userStore = useUserStoreHook();
// 从 store 中获取项目列表和当前选中的项目
const currentProject = computed(() => userStore.selectedProject);
const valueAllocationList = ref([]);
const loading = ref(true);
const showSearch = ref(true);
const total = ref(0);
const queryFormRef = ref<ElFormInstance>();
const data = reactive({
queryParams: {
pageNum: 1,
pageSize: 10,
projectId: currentProject.value?.id,
month: undefined
}
const activeTab = ref('1');
const queryParams = ref({
month: '',
pageNum: 1,
pageSize: 10
});
const total = ref(0);
const tableData = ref([]);
const loading = ref(false);
const { queryParams } = toRefs(data);
const tabList = [
{
value: '1',
label: '对甲施工报表'
},
{
value: '2',
label: '对乙施工报表'
}
];
/** 查询项目总产值分配列表 */
const getList = async () => {
loading.value = true;
const res = await listOutTable(queryParams.value);
valueAllocationList.value = res.rows;
total.value = res.total;
loading.value = false;
//切换表单
const handleTabChange = (tab) => {
activeTab.value = tab;
// queryParams.value.month = '';
handleQuery();
};
/** 搜索按钮操作 */
@ -87,38 +85,34 @@ const handleQuery = () => {
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value?.resetFields();
queryParams.value.month = '';
handleQuery();
};
/** 导出按钮操作 */
const handleExport = () => {
proxy?.download(
'out/valueAllocation/export',
{
...queryParams.value
},
`valueAllocation_${new Date().getTime()}.xlsx`
);
// 获取列表
const getList = async () => {
const params = {
...queryParams.value,
projectId: currentProject.value?.id,
type: activeTab.value
};
console.log(params);
const res = await listOutTable(params);
if (res.code == 200) {
tableData.value = res.rows;
total.value = res.total;
}
};
onMounted(() => {
// 也可以使用字符串格式（例如 YYYY-MM）
const currentMonthString = ref(dayjs().format('YYYY-MM'));
queryParams.value.month = currentMonthString.value;
const currentDate = new Date();
const year = currentDate.getFullYear();
const month = currentDate.getMonth() + 1; // 月份从0开始，所以需要加1
// 形成"YYYY-M"格式
const formattedDate = `${year}-${String(month).padStart(2, '0')}`;
queryParams.value.month = formattedDate;
getList();
});
//监听项目id刷新数据
const listeningProject = watch(
() => currentProject.value?.id,
(nid, oid) => {
queryParams.value.projectId = nid;
getList();
}
);
onUnmounted(() => {
listeningProject();
});
</script>
<style scoped lang="scss"></style>

179
src/views/out/purchase/comm/purchPage.vue Normal file
View File

@ -0,0 +1,179 @@
<template>
<div class="p-2">
<el-card shadow="never">
<template #header>
<el-row :gutter="10" class="mb8">
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
</template>
<el-table height="70vh" v-loading="loading" :data="monthPlanList" @selection-change="handleSelectionChange">
<el-table-column type="index" width="80" label="序号" align="center" />
<el-table-column label="名称" align="center" prop="name" />
<el-table-column label="规格" align="center" prop="specification" />
<el-table-column label="单位" align="center" prop="unit" />
<el-table-column label="接收数量" align="center" prop="acceptedQuantity" />
<el-table-column label="价格" align="center" prop="unitPrice"> </el-table-column>
<el-table-column label="备注" align="center" prop="remark"> </el-table-column>
<el-table-column label="操作" align="center" prop="remark" v-if="queryParams.type == '1'">
<template #default="scope">
<el-button type="primary" v-hasPermi="['out:monthPlan:purchaseValueAup']" @click="handleUpdate(scope.row)">编辑</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
<!-- 添加或修改月度产值计划对话框 -->
<el-dialog draggable :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
<el-form ref="monthPlanFormRef" :model="form" :rules="rules" label-width="80px">
<el-form-item label="接收数量" prop="acceptedQuantity">
<el-input v-model="form.acceptedQuantity" placeholder="请输入接收数量" type="number" />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup name="MonthPlan" lang="ts">
import { purchaseValueA, purchaseValueAup } from '@/api/out/purchase';
import { MonthPlanVO } from '@/api/out/monthPlan/types';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
import { useUserStoreHook } from '@/store/modules/user';
// 获取用户 store
const userStore = useUserStoreHook();
// 从 store 中获取项目列表和当前选中的项目
const currentProject = computed(() => userStore.selectedProject);
const monthPlanList = ref([]);
const buttonLoading = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref<Array<string | number>>([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const monthPlanFormRef = ref<ElFormInstance>();
const dialog = reactive<DialogOption>({
visible: false,
title: ''
});
const initFormData = {
id: undefined,
projectId: currentProject.value?.id,
planValue: undefined,
completeValue: undefined,
differenceValue: undefined,
planMonth: undefined,
isDesign: true,
type: '1',
valueType: undefined,
planAuditStatus: undefined,
completeAuditStatus: undefined,
unitPrice: undefined,
acceptedQuantity: undefined
};
const data = reactive({
form: { ...initFormData },
queryParams: {
projectId: currentProject.value?.id,
planValue: undefined,
completeValue: undefined,
differenceValue: undefined,
planMonth: undefined,
valueType: undefined,
planAuditStatus: undefined,
completeAuditStatus: undefined,
type: '1',
params: {}
},
rules: {
unitPrice: [{ required: true, message: '金额不能为空', trigger: 'change' }]
}
});
const { queryParams, form, rules } = toRefs(data);
/** 查询月度产值计划列表 */
const getList = async (type?) => {
if (type) {
queryParams.value.type = type;
}
loading.value = true;
const res = await purchaseValueA({ projectId: currentProject.value?.id, type: queryParams.value.type });
monthPlanList.value = res.data;
console.log(monthPlanList.value);
total.value = res.total;
loading.value = false;
};
/** 取消按钮 */
const cancel = () => {
reset();
dialog.visible = false;
};
/** 表单重置 */
const reset = () => {
form.value = { ...initFormData };
monthPlanFormRef.value?.resetFields();
};
/** 多选框选中数据 */
const handleSelectionChange = (selection: MonthPlanVO[]) => {
ids.value = selection.map((item) => item.id);
single.value = selection.length != 1;
multiple.value = !selection.length;
};
/** 修改按钮操作 */
const handleUpdate = async (row?: MonthPlanVO) => {
reset();
Object.assign(form.value, row);
dialog.visible = true;
dialog.title = '修改采购完工产值';
};
/** 提交按钮 */
const submitForm = () => {
form.value.projectId = currentProject.value?.id;
monthPlanFormRef.value?.validate(async (valid: boolean) => {
if (valid) {
buttonLoading.value = true;
form.value.isDesign = true;
if (form.value.id) {
await purchaseValueAup(form.value).finally(() => (buttonLoading.value = false));
}
proxy?.$modal.msgSuccess('操作成功');
dialog.visible = false;
await getList();
}
});
};
onMounted(() => {
getList();
});
//监听项目id刷新数据
const listeningProject = watch(
() => currentProject.value?.id,
(nid, oid) => {
queryParams.value.projectId = nid;
form.value.projectId = nid;
getList();
}
);
onUnmounted(() => {
listeningProject();
});
defineExpose({
getList
});
</script>

31
src/views/out/purchase/index.vue Normal file
View File

@ -0,0 +1,31 @@
<template>
<div class="p-2">
<el-tabs v-model="activeName" class="demo-tabs" type="border-card" @tab-click="handleClick">
<el-tab-pane label="对甲" name="1">
<purchPage ref="purchPageRef1"></purchPage>
</el-tab-pane>
<el-tab-pane label="对乙" name="2">
<purchPage ref="purchPageRef2"></purchPage>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script setup name="MonthPlan" lang="ts">
import { ref, watch, computed } from 'vue';
import purchPage from './comm/purchPage.vue';
// 引用子组件
const activeName = ref('1');
const purchPageRef1 = ref<InstanceType<typeof purchPage> | null>(null);
const purchPageRef2 = ref<InstanceType<typeof purchPage> | null>(null);
const handleClick = (val) => {
if (val.props.name == '1') {
purchPageRef1.value.getList(val.props.name); //子组件方法
} else {
purchPageRef2.value.getList(val.props.name); //子组件方法
}
};
onMounted(() => {
purchPageRef1.value?.getList('1'); //初始加载
});
</script>

25
src/views/out/settlementValueOwner/index.vue
View File

@ -27,17 +27,12 @@
<el-col :span="1.5">
<el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['out:settlementValueOwner:add']">新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['out:settlementValueOwner:remove']"
>删除</el-button
>
</el-col>
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
</template>
<el-table v-loading="loading" :data="settlementValueOwnerList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column type="index" label="序号" width="60" align="center" />
<el-table-column label="填报人" align="center" prop="createByName" />
<el-table-column label="结算产值" align="center" prop="settlementValue" />
<el-table-column label="产值类型" align="center" prop="valueType">
@ -58,18 +53,12 @@
<el-table-column label="说明" align="center" prop="remark" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template #default="scope">
<el-tooltip content="修改" placement="top">
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['out:settlementValueOwner:edit']"></el-button>
</el-tooltip>
<el-tooltip content="删除" placement="top">
<el-button
link
type="primary"
icon="Delete"
@click="handleDelete(scope.row)"
v-hasPermi="['out:settlementValueOwner:remove']"
></el-button>
</el-tooltip>
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['out:settlementValueOwner:edit']"
>修改</el-button
>
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['out:settlementValueOwner:remove']"
>删除</el-button
>
</template>
</el-table-column>
</el-table>

37
src/views/out/settlementValueSubcontract/index.vue
View File

@ -28,23 +28,12 @@
<el-col :span="1.5">
<el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['out:settlementValueSubcontract:add']">新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="Delete"
:disabled="multiple"
@click="handleDelete()"
v-hasPermi="['out:settlementValueSubcontract:remove']"
>删除</el-button
>
</el-col>
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
</template>
<el-table v-loading="loading" :data="settlementValueSubcontractList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column type="index" label="序号" width="60" align="center" />
<el-table-column label="分包单位" align="center" prop="contractorName" />
<el-table-column label="单据编码" align="center" prop="documentCode" />
<el-table-column label="结算说明" align="center" prop="settlementDescribe" />
@ -65,24 +54,12 @@
<el-table-column label="合同名称" align="center" prop="contractName" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template #default="scope">
<el-tooltip content="修改" placement="top">
<el-button
link
type="primary"
icon="Edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['out:settlementValueSubcontract:edit']"
></el-button>
</el-tooltip>
<el-tooltip content="删除" placement="top">
<el-button
link
type="primary"
icon="Delete"
@click="handleDelete(scope.row)"
v-hasPermi="['out:settlementValueSubcontract:remove']"
></el-button>
</el-tooltip>
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['out:settlementValueSubcontract:edit']"
>修改</el-button
>
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['out:settlementValueSubcontract:remove']"
>删除</el-button
>
</template>
</el-table-column>
</el-table>

30
src/views/patch/index.vue
View File

@ -21,11 +21,11 @@
<template #header>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['patch:patch:add']">新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['patch:patch:export']">导出</el-button>
<el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['patch:master:add']">新增</el-button>
</el-col>
<!-- <el-col :span="1.5">
<el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['patch:master:export']">导出</el-button>
</el-col> -->
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
</template>
@ -67,11 +67,8 @@
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template #default="scope">
<!-- <el-tooltip content="修改" placement="top">
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['patch:patch:edit']"></el-button>
</el-tooltip> -->
<el-tooltip content="删除" placement="top">
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['patch:patch:remove']"></el-button>
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['patch:master:remove']"></el-button>
</el-tooltip>
</template>
</el-table-column>
@ -79,8 +76,10 @@
<!-- 进度详情弹窗 -->
<el-dialog :title="`进度详情（当前总进度：${currentTotalProgress}%）`" v-model="progressDialogVisible" width="1000px" destroy-on-close>
<div class="mb-4">
<!-- v-hasPermi="['patch:progress:add']" -->
<el-button type="primary" plain icon="Plus" size="small" @click="handleProgressAdd()"> 新增进度 </el-button>
<!-- v-hasPermi="['patch:master:add']" -->
<el-button type="primary" plain icon="Plus" size="small" v-hasPermi="['patch:master:progress']" @click="handleProgressAdd()">
新增进度
</el-button>
</div>
<el-table v-loading="progressLoading" :data="progressList" border empty-text="暂无进度数据" style="width: 100%">
<el-table-column prop="slaveName" label="执行人姓名" align="center" width="150" />
@ -97,10 +96,10 @@
<el-button
link
type="primary"
v-hasPermi="['patch:master:editProgress']"
icon="Edit"
size="small"
@click="handleProgressUpdate(scope.row)"
v-hasPermi="['patch:progress:edit']"
></el-button>
</el-tooltip>
<el-tooltip content="删除进度" placement="top">
@ -110,7 +109,7 @@
icon="Delete"
size="small"
@click="handleProgressDelete(scope.row)"
v-hasPermi="['patch:progress:remove']"
v-hasPermi="['patch:master:removeProgress']"
></el-button>
</el-tooltip>
</template>
@ -631,7 +630,9 @@ const handleProgressInput = () => {
const handleExport = () => {
proxy?.download('patch/patch/export', { ...queryParams.value }, `任务列表_${new Date().getTime()}.xlsx`);
};
onMounted(() => {
getList();
});
// 监听项目id刷新数据
const listeningProject = watch(
() => currentProject.value?.id,
@ -651,12 +652,15 @@ onUnmounted(() => {
.mb-4 {
margin-bottom: 16px;
}
.el-table .small-padding .cell {
padding: 0 5px;
}
.el-table .fixed-width {
width: 120px !important;
}
.el-table-column .el-button--text + .el-button--text {
margin-left: 10px;
}

37
src/views/progress/constructionSchedulePlan/index.vue
View File

@ -43,7 +43,7 @@
>
<!-- <el-table-column label="序号" type="id" /> -->
<el-table-column label="节点名称" prop="nodeName" />
<el-table-column label="对应项目结构" align="center" prop="projectStructure" />
<el-table-column label="对应项目结构" align="center" prop="projectStructureName" />
<el-table-column label="预计开始时间" align="center" prop="planStartDate" width="180">
<template #default="scope">
<span>{{ parseTime(scope.row.planStartDate, '{y}-{m}-{d}') }}</span>
@ -108,7 +108,16 @@
<el-input v-model="form.nodeName" placeholder="请输入节点名称" />
</el-form-item>
<el-form-item label="对应项目结构" prop="projectStructure">
<el-input v-model="form.projectStructure" placeholder="请输入对应项目结构" />
<el-tree-select
v-model="form.projectStructure"
:data="ProjectStructureList"
@node-click="handleCheckChange"
:props="{ value: 'id', label: 'name', children: 'children' }"
value-key="id"
placeholder="请选择项目结构"
check-strictly
/>
<!-- <el-input v-model="form.projectStructure" placeholder="请输入对应项目结构" /> -->
</el-form-item>
<el-form-item label="预计开始时间" prop="planStartDate">
<el-date-picker clearable v-model="form.planStartDate" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="选择预计开始时间" />
@ -159,7 +168,8 @@ import {
getConstructionSchedulePlan,
delConstructionSchedulePlan,
addConstructionSchedulePlan,
updateConstructionSchedulePlan
updateConstructionSchedulePlan,
getProjectStructure
} from '@/api/progress/constructionSchedulePlan';
import {
ConstructionSchedulePlanVO,
@ -181,6 +191,7 @@ const currentProject = computed(() => userStore.selectedProject);
const { project_construction_status } = toRefs<any>(proxy?.useDict('project_construction_status'));
const constructionSchedulePlanList = ref<ConstructionSchedulePlanVO[]>([]);
const ProjectStructureList = ref([]);
const constructionSchedulePlanOptions = ref<ConstructionSchedulePlanOption[]>([]);
const buttonLoading = ref(false);
const showSearch = ref(true);
@ -196,7 +207,7 @@ const dialog = reactive<DialogOption>({
title: ''
});
const initFormData: ConstructionSchedulePlanForm = {
const initFormData = {
id: undefined,
projectId: currentProject.value?.id,
parentId: undefined,
@ -207,7 +218,8 @@ const initFormData: ConstructionSchedulePlanForm = {
practicalStartDate: undefined,
practicalEndDate: undefined,
status: undefined,
remark: undefined
remark: undefined,
projectStructureName: undefined
};
const data = reactive<PageData<ConstructionSchedulePlanForm, ConstructionSchedulePlanQuery>>({
@ -236,17 +248,25 @@ const getList = async () => {
loading.value = true;
const res = await listConstructionSchedulePlan(queryParams.value);
const data = proxy?.handleTree<ConstructionSchedulePlanVO>(res.data, 'id', 'parentId');
console.log('🚀 ~ getList ~ data:', data);
if (data) {
constructionSchedulePlanList.value = data;
loading.value = false;
}
};
/** 查询施工进度计划列表 */
const getProjectStructureList = async () => {
const res = await getProjectStructure(currentProject.value?.id);
ProjectStructureList.value = [res.data];
console.log(ProjectStructureList.value);
};
/** 查询施工进度计划列表 */
const handleCheckChange = (val) => {
form.value.projectStructureName = val.name;
};
/** 查询施工进度计划下拉树结构 */
const getTreeselect = async () => {
const res = await listConstructionSchedulePlan();
const res = await listConstructionSchedulePlan({ projectId: currentProject.value?.id });
constructionSchedulePlanOptions.value = [];
const data: ConstructionSchedulePlanOption = { id: 0, nodeName: '顶级节点', children: [] };
data.children = proxy?.handleTree<ConstructionSchedulePlanOption>(res.data, 'id', 'parentId');
@ -343,6 +363,7 @@ const handleDelete = async (row: ConstructionSchedulePlanVO) => {
};
onMounted(() => {
getProjectStructureList();
getList();
});

7
src/views/progress/plan/component/createDailyRate.vue
View File

@ -161,7 +161,7 @@
:total="detailTotalWork"
v-model:page="detailQueryParamsWork.pageNum"
v-model:limit="detailQueryParamsWork.pageSize"
@pagination="getPvModuleList"
@pagination="getDailyBookList"
layout="total, sizes, prev, pager, next"
:isSmall="5"
/>
@ -345,7 +345,6 @@ const getWorkList = (bool = false) => {
if (res.code === 200) {
state.tableData = res.rows.map((item: any, i: number) => {
item.index = i + 1;
item.aiFill = item.detailList?.reduce((sum: number, child: any) => sum + child.aiFill, 0) || 0;
return item;
});
state.total = res.total;
@ -437,10 +436,10 @@ const handleView = (row: any, obj: any) => {
// 获取已填日报
const getDailyBookList = (doneTime: string) => {
detialWordList.value = [];
// detialWordList.value = [];
getDailyBook({
id: formDetail.value.id,
...detailQueryParams.value
...detailQueryParamsWork.value
}).then((res: any) => {
if (res.code === 200) {
detialWordList.value = res.rows || [];

414
src/views/progress/plan/index.vue
View File

@ -4,165 +4,211 @@
<div v-show="showSearch" class="mb-[10px]">
<el-card shadow="hover">
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item label="请选择方阵：" prop="pid" label-width="100">
<!-- <el-input v-model="queryParams.pid" placeholder="请选择" clearable /> -->
<el-cascader
:options="matrixOptions"
placeholder="请选择"
@change="handleChange"
:props="{ value: 'matrixId', label: 'name' }"
v-model="queryParams.matrixId"
clearable
/>
<!-- <el-select v-model="matrixValue" placeholder="请选择" @change="handleChange" clearable>
<el-option v-for="item in matrixOptions" :key="item.id" :label="item.matrixName" :value="item.id" />
</el-select> -->
<el-form-item label="请选择项目：" prop="pid" label-width="100">
<el-select v-model="queryParams.projectId" placeholder="请选择" @change="handleChange" clearable>
<el-option v-for="item in matrixOptions" :key="item.projectId" :label="item.name" :value="item.projectId" />
</el-select>
</el-form-item>
<el-form-item label="请选择方阵：" prop="pid" label-width="100" v-if="relevancyStructure == '2'">
<el-select v-model="matrixValue" placeholder="请选择" @change="handleChange" clearable>
<el-option v-for="item in matrixList" :key="item.id" :label="item.matrixName" :value="item.id" />
</el-select>
</el-form-item>
<!-- <el-form-item>
<el-button type="primary" icon="Download" @click="handleQuery">导出周报</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()" v-hasPermi="['progress:progressCategory:add']">新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="info" plain icon="Sort" @click="handleToggleExpandAll">展开/折叠</el-button>
</el-col>
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
</template> -->
<el-table
ref="progressCategoryTableRef"
v-loading="loading"
:data="progressCategoryList"
row-key="id"
:default-expand-all="isExpandAll"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
border
>
<el-table-column label="" width="50" type="expand">
<template #header>
<el-icon
class="cursor-pointer text-4! transform-rotate-z--90 transition-all-300"
:class="!isExpandAll ? 'transform-rotate-z--90' : 'transform-rotate-z-90'"
@click="handleToggleExpandAll"
><Expand
/></el-icon>
</template>
<template #default="scope">
<el-card class="pl-25" shadow="hover">
<el-table :data="scope.row.children" border>
<el-table-column label="名称" align="center" prop="name" width="170">
<template #default="{ row }">
<el-tooltip :content="row.remark" placement="top" effect="dark" v-if="row.remark">
<span class="flex items-center justify-center"
><i class="iconfont icon-wenhao mr-0.5 text-3.5! text-#999"></i>{{ row.name }}</span
<el-tabs type="border-card" v-model="activeTab" @tab-click="handleTabClick">
<el-tab-pane :label="item.name" v-for="item in tabList" :key="item.id" :name="item.id"></el-tab-pane>
<el-card shadow="never">
<el-table
ref="progressCategoryTableRef"
v-loading="loading"
:data="progressCategoryList"
row-key="id"
:default-expand-all="isExpandAll"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
v-if="isExpand"
border
>
<el-table-column label="" width="50" type="expand">
<template #header>
<el-icon
class="cursor-pointer text-4! transform-rotate-z--90 transition-all-300"
:class="!isExpandAll ? 'transform-rotate-z--90' : 'transform-rotate-z-90'"
@click="handleToggleExpandAll"
><Expand
/></el-icon>
</template>
<template #default="scope">
<el-card class="pl-25" shadow="hover">
<el-table :data="scope.row.children" border>
<el-table-column label="名称" align="center" prop="name" width="170">
<template #default="{ row }">
<el-tooltip :content="row.remark" placement="top" effect="dark" v-if="row.remark">
<span class="flex items-center justify-center"
><i class="iconfont icon-wenhao mr-0.5 text-3.5! text-#999"></i>{{ row.name }}</span
>
</el-tooltip>
<span v-else>{{ row.name }}</span>
</template>
</el-table-column>
<el-table-column label="状态" align="center" prop="status" width="100">
<template #default="{ row }">
<dict-tag :options="progress_status" :value="row.status" />
</template>
</el-table-column>
<el-table-column label="是否延期" align="center" prop="isDelay" width="100">
<template #default="{ row }">
<el-tag :type="row.isDelay == '1' ? 'danger' : 'primary'">{{ row.isDelay == '1' ? '是' : '否' }}</el-tag>
</template>
</el-table-column>
<el-table-column label="计量方式" align="center" prop="unitType" width="100">
<template #default="{ row }">
<dict-tag :options="progress_unit_type" :value="row.unitType" />
</template>
</el-table-column>
<el-table-column label="总量" align="center" prop="total" width="100" />
<el-table-column label="总进度" align="center" prop="projectId">
<template #default="{ row }">
<el-progress :text-inside="true" :stroke-width="20" :percentage="row.completedPercentage" status="success" />
</template>
</el-table-column>
<el-table-column label="计划总量" align="center" prop="planTotal" width="100" />
<el-table-column label="计划中" align="center" prop="projectId">
<template #default="{ row }">
<el-progress :text-inside="true" :stroke-width="20" :percentage="row.planTotalPercentage" />
</template>
</el-table-column>
<el-table-column label="对比" align="center" prop="unitType" width="100">
<template #default="{ row }">
{{ row.completed + '/' + row.total }}
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
<template #default="scope">
<el-button
type="warning"
icon="Download"
link
size="small"
v-if="scope.row.name === '光伏板'"
@click="openDialog(scope.row, 'importTableStatus', '上传表格')"
v-hasPermi="['progress:progressCategory:add']"
>
</el-tooltip>
<span v-else>{{ row.name }}</span>
</template>
</el-table-column>
<el-table-column label="状态" align="center" prop="status" width="100">
<template #default="{ row }">
<dict-tag :options="progress_status" :value="row.status" />
</template>
</el-table-column>
<el-table-column label="是否延期" align="center" prop="isDelay" width="100">
<template #default="{ row }">
<el-tag :type="row.isDelay == '1' ? 'danger' : 'primary'">{{ row.isDelay == '1' ? '是' : '否' }}</el-tag>
</template>
</el-table-column>
<el-table-column label="计量方式" align="center" prop="unitType" width="100">
<template #default="{ row }">
<dict-tag :options="progress_unit_type" :value="row.unitType" />
</template>
</el-table-column>
<el-table-column label="总量" align="center" prop="total" width="100" />
<el-table-column label="总进度" align="center" prop="projectId">
<template #default="{ row }">
<el-progress :text-inside="true" :stroke-width="20" :percentage="row.completedPercentage" status="success" />
</template>
</el-table-column>
<el-table-column label="计划总量" align="center" prop="planTotal" width="100" />
<el-table-column label="计划中" align="center" prop="projectId">
<template #default="{ row }">
<el-progress :text-inside="true" :stroke-width="20" :percentage="row.planTotalPercentage" />
</template>
</el-table-column>
<el-table-column label="对比" align="center" prop="unitType" width="100">
<template #default="{ row }">
{{ row.completed + '/' + row.total }}
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
<template #default="scope">
<!-- <el-button
type="warning"
icon="Download"
link
size="small"
@click="openDialog(scope.row, 'importDataStatus', '上传数据')"
v-hasPermi="['progress:progressCategory:add']"
>
导入数据
</el-button> -->
<el-button
type="warning"
icon="Download"
link
size="small"
v-if="scope.row.name === '光伏板'"
@click="openDialog(scope.row, 'importTableStatus', '上传表格')"
v-hasPermi="['progress:progressCategory:add']"
>
导入表格
</el-button>
<el-button
type="success"
icon="Plus"
link
size="small"
@click="planRef.openDialog(scope.row)"
v-hasPermi="['progress:progressCategory:add']"
>
计划
</el-button>
<el-button
type="primary"
icon="Plus"
link
size="small"
@click="handleDayAdd(scope.row)"
v-hasPermi="['progress:progressCategory:add']"
>
日报
</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
</template>
</el-table-column>
<el-table-column label="名称" align="center" prop="name" width="150" />
<el-table-column label="状态" align="center" prop="status" width="100">
<template #default="{ row }">
<dict-tag :options="progress_status" :value="row.status" />
</template>
</el-table-column>
<el-table-column label="总进度" align="center" prop="projectId">
<template #default="{ row }">
<el-progress :text-inside="true" :stroke-width="20" :percentage="row.completedPercentage" status="success" />
</template>
</el-table-column>
</el-table>
</el-card>
导入表格
</el-button>
<el-button
type="success"
icon="Plus"
link
size="small"
@click="planRef.openDialog(scope.row)"
v-hasPermi="['progress:progressCategory:add']"
>
计划
</el-button>
<el-button
type="primary"
icon="Plus"
link
size="small"
@click="handleDayAdd(scope.row)"
v-hasPermi="['progress:progressCategory:add']"
>
日报
</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
</template>
</el-table-column>
<el-table-column label="名称" align="center" prop="name" width="150" />
<el-table-column label="状态" align="center" prop="status" width="100">
<template #default="{ row }">
<dict-tag :options="progress_status" :value="row.status" />
</template>
</el-table-column>
<el-table-column label="总进度" align="center" prop="projectId">
<template #default="{ row }">
<el-progress :text-inside="true" :stroke-width="20" :percentage="row.completedPercentage" status="success" />
</template>
</el-table-column>
</el-table>
<el-table ref="progressCategoryTableRef" v-loading="loading" :data="progressCategoryList" v-else border>
<el-table-column label="名称" align="center" prop="name" width="170">
<template #default="{ row }">
<el-tooltip :content="row.remark" placement="top" effect="dark" v-if="row.remark">
<span class="flex items-center justify-center"><i class="iconfont icon-wenhao mr-0.5 text-3.5! text-#999"></i>{{ row.name }}</span>
</el-tooltip>
<span v-else>{{ row.name }}</span>
</template>
</el-table-column>
<el-table-column label="状态" align="center" prop="status" width="100">
<template #default="{ row }">
<dict-tag :options="progress_status" :value="row.status" />
</template>
</el-table-column>
<el-table-column label="是否延期" align="center" prop="isDelay" width="100">
<template #default="{ row }">
<el-tag :type="row.isDelay == '1' ? 'danger' : 'primary'">{{ row.isDelay == '1' ? '是' : '否' }}</el-tag>
</template>
</el-table-column>
<el-table-column label="计量方式" align="center" prop="unitType" width="100">
<template #default="{ row }">
<dict-tag :options="progress_unit_type" :value="row.unitType" />
</template>
</el-table-column>
<el-table-column label="总量" align="center" prop="total" width="100" />
<el-table-column label="总进度" align="center" prop="projectId">
<template #default="{ row }">
<el-progress :text-inside="true" :stroke-width="20" :percentage="row.completedPercentage" status="success" />
</template>
</el-table-column>
<el-table-column label="计划总量" align="center" prop="planTotal" width="100" />
<el-table-column label="计划中" align="center" prop="projectId">
<template #default="{ row }">
<el-progress :text-inside="true" :stroke-width="20" :percentage="row.planTotalPercentage" />
</template>
</el-table-column>
<el-table-column label="对比" align="center" prop="unitType" width="100">
<template #default="{ row }">
{{ row.completed + '/' + row.total }}
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
<template #default="scope">
<el-button
type="warning"
icon="Download"
link
size="small"
v-if="scope.row.name === '光伏板'"
@click="openDialog(scope.row, 'importTableStatus', '上传表格')"
v-hasPermi="['progress:progressCategory:add']"
>
导入表格
</el-button>
<el-button
type="success"
icon="Plus"
link
size="small"
@click="planRef.openDialog(scope.row)"
v-hasPermi="['progress:progressCategory:add']"
>
计划
</el-button>
<el-button type="primary" icon="Plus" link size="small" @click="handleDayAdd(scope.row)" v-hasPermi="['progress:progressCategory:add']">
日报
</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
</el-tabs>
<!-- 导入数据对话框 -->
<el-dialog :title="dialog.title" v-model="dialog.importDataStatus" width="500px" append-to-body>
<file-upload class="pl-20 pt" v-model="dialog.file" :limit="20" :file-size="50" :file-type="['shp', 'shx', 'dbf']" />
@ -191,14 +237,7 @@
</template>
<script setup name="ProgressCategory" lang="ts">
import {
listProgressCategory,
getProgressCategory,
delProgressCategory,
addProgressCategory,
updateProgressCategory,
getProjectSquare
} from '@/api/progress/plan/index';
import { getProgressCategory, delProgressCategory, addProgressCategory, updateProgressCategory, getProjectSquare } from '@/api/progress/plan/index';
import { ProgressCategoryVO, ProgressCategoryQuery, ProgressCategoryForm } from '@/api/progress/plan/types';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
@ -214,6 +253,7 @@ type ProgressCategoryOption = {
};
import { useUserStoreHook } from '@/store/modules/user';
import { getCategoryTabList, listProgressCategory } from '@/api/progress/progressCategory';
// 获取用户 store
const userStore = useUserStoreHook();
// 从 store 中获取项目列表和当前选中的项目
@ -239,6 +279,11 @@ const dialog = reactive<any>({
title: '',
file: ''
});
const isExpand = ref(true);
const activeTab = ref('0');
const relevancyStructure = ref('1');
const matrixList = ref([]);
const tabList = ref<any[]>([]);
const matrixValue = ref<number | undefined>(matrixOptions.value.length > 0 ? matrixOptions.value[0].id : undefined);
const initFormData: ProgressCategoryForm = {
id: undefined,
@ -255,7 +300,7 @@ const data = reactive<PageData<ProgressCategoryForm, ProgressCategoryQuery>>({
pid: undefined,
name: undefined,
unitType: undefined,
projectId: currentProject.value?.id,
projectId: undefined,
matrixId: undefined,
params: {}
},
@ -272,7 +317,7 @@ const { queryParams, form, rules } = toRefs(data);
/** 查询进度类别列表 */
const getList = async () => {
if (!queryParams.value.matrixId) {
if (!queryParams.value.projectId) {
const res = await getProjectSquare(currentProject.value?.id);
if (!res.data || res.data.length === 0) {
proxy?.$modal.msgWarning('当前项目下没有方阵，请先创建方阵');
@ -286,18 +331,34 @@ const getList = async () => {
try {
if (!matrixValue.value) matrixValue.value = matrixList[0].id;
matrixOptions.value = matrixList;
queryParams.value.matrixId = matrixList[0].children[0].matrixId;
console.log('🚀 ~ getList ~ matrixList:', matrixList);
queryParams.value.projectId = matrixList[0].projectId;
form.value.projectId = matrixList[0].projectId;
await getCategoryTabList(queryParams.value.projectId as string).then((res) => {
tabList.value = res.data;
activeTab.value = res.data[0]?.id;
});
} catch (error) {
proxy?.$modal.msgError('获取方阵失败');
// proxy?.$modal.msgError('获取方阵失败');
}
}
}
loading.value = true;
try {
const res = await listProgressCategory(queryParams.value);
const id = relevancyStructure.value == '2' ? matrixValue.value : activeTab.value;
const res = await listProgressCategory(id);
const data = proxy?.handleTree<ProgressCategoryVO>(res.data, 'id', 'parentId');
if (data) {
if (data.every((item) => !item.children)) {
isExpand.value = false;
} else {
isExpand.value = true;
}
progressCategoryList.value = data;
progressCategoryOptions.value = [];
const datas: ProgressCategoryOption = { id: 0, name: '顶级节点', children: [...data] };
progressCategoryOptions.value.push(datas);
loading.value = false;
}
} finally {
// 不管成功或失败，最后都设置为 false
@ -305,13 +366,19 @@ const getList = async () => {
}
};
/** 查询进度类别下拉树结构 */
const getTreeselect = async () => {
const res = await listProgressCategory();
progressCategoryOptions.value = [];
const data: ProgressCategoryOption = { id: 0, name: '顶级节点', children: [] };
data.children = proxy?.handleTree<ProgressCategoryOption>(res.data, 'id', 'pid');
progressCategoryOptions.value.push(data);
const handleTabClick = (tab: any) => {
const id = tab.props.name; // 实际上就是 item.id
const current = tabList.value.find((item) => item.id === id);
if (current.matrixStructureList && current.matrixStructureList.length > 0) {
matrixList.value = current.matrixStructureList;
activeTab.value = current.matrixStructureList[0].id;
matrixValue.value = current.matrixStructureList[0].id;
} else {
activeTab.value = current.id;
}
relevancyStructure.value = current.relevancyStructure;
getList();
};
// 取消按钮
@ -383,7 +450,6 @@ const toggleExpandAll = (data: ProgressCategoryVO[], status: boolean) => {
/** 修改按钮操作 */
const handleUpdate = async (row: ProgressCategoryVO) => {
reset();
await getTreeselect();
if (row != null) {
form.value.pid = row.pid;
}

Some files were not shown because too many files have changed in this diff Show More