first commit
This commit is contained in:
330
src/views/materials/appointment/index.vue
Normal file
330
src/views/materials/appointment/index.vue
Normal file
@ -0,0 +1,330 @@
|
||||
<template>
|
||||
<div class="p-6 bg-gray-50 main">
|
||||
<div class="appWidth mx-auto mt-38 bg-white rounded-xl shadow-sm overflow-hidden transition-all duration-300 hover:shadow-md">
|
||||
<!-- 表单标题区域 -->
|
||||
<div class="bg-gradient-to-r from-blue-500 to-blue-600 text-white p-6">
|
||||
<h2 class="text-2xl font-bold flex items-center"><i class="el-icon-user-circle mr-3"></i>人员配置</h2>
|
||||
<p class="text-blue-100 mt-2 opacity-90">请配置采购专员信息</p>
|
||||
<!-- ，带 <span class="text-red-300">*</span> 为必填项 -->
|
||||
<el-button
|
||||
@click="isDisabled = false"
|
||||
class="px-8 py-2.5 transition-all duration-300 font-medium"
|
||||
v-if="isDisabled"
|
||||
v-hasPermi="['cailiaoshebei:purchaseUser:addOrUpdate']"
|
||||
>
|
||||
点击编辑
|
||||
</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"
|
||||
placeholder="请选择采购专员"
|
||||
class="w-full transition-all duration-300 border-gray-300 focus:border-blue-400 focus:ring-1 focus:ring-blue-400"
|
||||
>
|
||||
<el-option v-for="item in userList" :key="item.userId" :label="item.nickName" :value="item.userId" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<!-- 提交按钮区域 -->
|
||||
<div class="flex justify-center space-x-6 mt-8 pt-6 border-t border-gray-100" v-if="!isDisabled">
|
||||
<el-button
|
||||
type="primary"
|
||||
@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']"
|
||||
>
|
||||
确认提交
|
||||
</el-button>
|
||||
<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>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="PersonnelForm" lang="ts">
|
||||
import { ref, reactive, computed, onMounted, toRefs } from 'vue';
|
||||
import { getCurrentInstance } from 'vue';
|
||||
import type { ComponentInternalInstance } from 'vue';
|
||||
import { useUserStoreHook } from '@/store/modules/user';
|
||||
import { listUserByDeptId } from '@/api/system/user';
|
||||
import { ElMessage, ElLoading } from 'element-plus';
|
||||
import { Delete } from '@element-plus/icons-vue';
|
||||
import { designUserAdd, designUserDetail, systemUserList } from '@/api/materials/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,
|
||||
projectId: currentProject.value?.id,
|
||||
userId: null // 设计负责人
|
||||
});
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
userId: [{ required: true, message: '请选择采购专员', trigger: 'change' }]
|
||||
});
|
||||
|
||||
// 用户列表
|
||||
const userList = ref([]);
|
||||
|
||||
// 表单引用
|
||||
const leaveFormRef = ref();
|
||||
|
||||
/** 查询当前部门的所有用户 */
|
||||
const getDeptAllUser = async (deptId: any) => {
|
||||
try {
|
||||
const res = await systemUserList({ deptId });
|
||||
// 实际项目中使用接口返回的数据
|
||||
userList.value = res.rows;
|
||||
} catch (error) {
|
||||
ElMessage.error('获取用户列表失败');
|
||||
} finally {
|
||||
}
|
||||
};
|
||||
|
||||
/** 查询当前表单数据并回显 */
|
||||
const designUser = async () => {
|
||||
if (!currentProject.value?.id) return;
|
||||
|
||||
const loading = ElLoading.service({
|
||||
lock: true,
|
||||
text: '加载配置数据中...',
|
||||
background: 'rgba(255, 255, 255, 0.7)'
|
||||
});
|
||||
try {
|
||||
const res = await designUserDetail(currentProject.value?.id);
|
||||
if (res.code == 200) {
|
||||
if (!res.data) {
|
||||
resetForm();
|
||||
form.id = null;
|
||||
isDisabled.value = false;
|
||||
|
||||
return;
|
||||
}
|
||||
Object.assign(form, res.data);
|
||||
isDisabled.value = true;
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error('获取配置数据失败');
|
||||
// 添加默认空项
|
||||
} finally {
|
||||
loading.close();
|
||||
}
|
||||
};
|
||||
|
||||
/** 提交表单 */
|
||||
const submitForm = async () => {
|
||||
if (!leaveFormRef.value) return;
|
||||
try {
|
||||
// 表单验证
|
||||
await leaveFormRef.value.validate();
|
||||
let userName = userList.value.find((item) => item.userId === form.userId)?.nickName;
|
||||
const data = {
|
||||
projectId: currentProject.value?.id,
|
||||
userId: form.userId,
|
||||
userName,
|
||||
id: form.id
|
||||
};
|
||||
|
||||
// 提交到后端
|
||||
const res = await designUserAdd(data);
|
||||
if (res.code === 200) {
|
||||
ElMessage.success('提交成功');
|
||||
isDisabled.value = true;
|
||||
} else {
|
||||
ElMessage.error(res.msg || '提交失败');
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error('请完善表单信息后再提交');
|
||||
} finally {
|
||||
// 关闭加载状态
|
||||
ElLoading.service().close();
|
||||
}
|
||||
};
|
||||
|
||||
/** 重置表单 */
|
||||
const resetForm = () => {
|
||||
if (leaveFormRef.value) {
|
||||
leaveFormRef.value.resetFields();
|
||||
}
|
||||
};
|
||||
|
||||
// 页面挂载时初始化数据
|
||||
onMounted(() => {
|
||||
console.log(userStore.deptId);
|
||||
// 先获取用户列表，再加载表单数据
|
||||
getDeptAllUser(userStore.deptId).then(() => {
|
||||
designUser();
|
||||
});
|
||||
});
|
||||
|
||||
//监听项目id刷新数据
|
||||
const listeningProject = watch(
|
||||
() => currentProject.value?.id,
|
||||
(nid, oid) => {
|
||||
getDeptAllUser(userStore.deptId).then(() => {
|
||||
designUser();
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
onUnmounted(() => {
|
||||
listeningProject();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.main {
|
||||
height: calc(100vh - 90px);
|
||||
}
|
||||
.appWidth {
|
||||
width: 50vw;
|
||||
max-width: 1200px;
|
||||
.el-select__wrapper {
|
||||
width: 16vw !important;
|
||||
}
|
||||
.el-button--small {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.fonts {
|
||||
.el-form-item--default .el-form-item__label {
|
||||
font-size: 18px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 自定义动画
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-fadeIn {
|
||||
animation: fadeIn 0.3s ease-out forwards;
|
||||
}
|
||||
|
||||
// 表单样式优化
|
||||
::v-deep .el-form {
|
||||
--el-form-item-margin-bottom: 0;
|
||||
}
|
||||
|
||||
::v-deep .el-form-item {
|
||||
margin-bottom: 0;
|
||||
|
||||
&__label {
|
||||
font-weight: 500;
|
||||
color: #4e5969;
|
||||
padding: 0 0 8px 0;
|
||||
}
|
||||
|
||||
&__content {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-select {
|
||||
width: 100%;
|
||||
|
||||
.el-input__inner {
|
||||
border-radius: 6px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
&:hover .el-input__inner {
|
||||
border-color: #66b1ff;
|
||||
}
|
||||
|
||||
&.el-select-focus .el-input__inner {
|
||||
border-color: #409eff;
|
||||
box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-button {
|
||||
border-radius: 6px;
|
||||
padding: 8px 16px;
|
||||
|
||||
&--primary {
|
||||
background-color: #409eff;
|
||||
border-color: #409eff;
|
||||
|
||||
&:hover {
|
||||
background-color: #66b1ff;
|
||||
border-color: #66b1ff;
|
||||
}
|
||||
}
|
||||
|
||||
&--danger {
|
||||
background-color: #f56c6c;
|
||||
border-color: #f56c6c;
|
||||
|
||||
&:hover {
|
||||
background-color: #f78989;
|
||||
border-color: #f78989;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background-color: #ffcccc;
|
||||
border-color: #ffbbbb;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式网格布局
|
||||
.grid {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.grid-cols-1 {
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.md\:grid-cols-2 {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.gap-4 {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
// 适配小屏幕
|
||||
@media (max-width: 768px) {
|
||||
.appWidth {
|
||||
width: 95vw;
|
||||
}
|
||||
|
||||
::v-deep .el-form {
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
::v-deep .el-form-item__label {
|
||||
width: 100px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
481
src/views/materials/batchPlan/index.vue
Normal file
481
src/views/materials/batchPlan/index.vue
Normal file
@ -0,0 +1,481 @@
|
||||
<template>
|
||||
<div class="p-2">
|
||||
<el-row :gutter="20">
|
||||
<!-- 流程分类树 -->
|
||||
<el-col style="" :span="5">
|
||||
<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-button
|
||||
></el-col
|
||||
>
|
||||
<el-col :span="1.5" :offset="0"
|
||||
><el-button
|
||||
type="danger"
|
||||
size="default"
|
||||
v-hasPermi="['cailiaoshebei:batchPlan:remove']"
|
||||
@click="handleDeleteBatch"
|
||||
icon="FolderDelete"
|
||||
plain
|
||||
>删除</el-button
|
||||
></el-col
|
||||
>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<el-input v-model="batchNumber" placeholder="请输入批次号" @input="searchBatchList" prefix-icon="Search" clearable />
|
||||
<el-tree
|
||||
ref="batchTreeRef"
|
||||
class="mt-2"
|
||||
node-key="id"
|
||||
:data="batchOptions"
|
||||
:props="{ label: 'planCode', children: 'children' }"
|
||||
:expand-on-click-node="false"
|
||||
highlight-current
|
||||
default-expand-all
|
||||
@node-click="handleNodeClick"
|
||||
>
|
||||
<template #default="{ node, data }">
|
||||
<div class="custom-tree-node">
|
||||
{{ node.label }}
|
||||
<dict-tag :options="wf_business_status" :value="data.status" />
|
||||
</div>
|
||||
</template>
|
||||
</el-tree>
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
v-model:page="queryParams.batchData.pageNum"
|
||||
v-model:limit="queryParams.batchData.pageSize"
|
||||
@pagination="getList"
|
||||
layout="prev, pager, next,jumper"
|
||||
/>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="19">
|
||||
<el-card shadow="never">
|
||||
<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:cailiaoshebei:add']">修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button plain type="warning" icon="Finished" @click="handleAudit()" 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="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" />
|
||||
<el-table-column label="计量单位" align="center" prop="unit" width="80" />
|
||||
<el-table-column label="需求数量" align="center" prop="demandQuantity" />
|
||||
<el-table-column label="需求到货时间" align="center" prop="arrivalTime" width="250" />
|
||||
<el-table-column label="备注" align="center" prop="remark" />
|
||||
</el-table>
|
||||
<pagination
|
||||
v-show="mainTotal > 0"
|
||||
:total="mainTotal"
|
||||
v-model:page="queryParams.mainData.pageNum"
|
||||
v-model:limit="queryParams.mainData.pageSize"
|
||||
@pagination="getMainList"
|
||||
/>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 添加或修改物资-材料设备对话框 -->
|
||||
<el-dialog :title="dialog.title" v-model="dialog.visible" width="1250px" append-to-body>
|
||||
<el-form :model="form" ref="cailiaoshebeiFormRef" :rules="rules" label-width="80px" :inline="false">
|
||||
<el-divider>基础信息</el-divider>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8" :offset="0">
|
||||
<el-form-item label="物资类别" prop="mrpBaseBo.matCat">
|
||||
<el-input v-model="form.mrpBaseBo.matCat" placeholder="请输入物资类别" />
|
||||
</el-form-item>
|
||||
</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" placeholder="请选择编制日期" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8" :offset="0">
|
||||
<el-form-item label="计划编号" prop="mrpBaseBo.planCode">
|
||||
<el-input v-model="form.mrpBaseBo.planCode" placeholder="请输入计划编号" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-divider>主要信息</el-divider>
|
||||
<el-table :data="form.planList">
|
||||
<el-table-column prop="name" align="center" label="物资名称">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.name" placeholder="请输入物资" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="specification" align="center" label="规格型号" width="150">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.specification" placeholder="请输入规格型号" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="unit" align="center" label="单位" width="130">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.unit" placeholder="请输入单位" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="demandQuantity" align="center" label="数量" width="130">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.demandQuantity" placeholder="请输入数量" type="number" min="0" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="qs" align="center" label="质量标准" width="150">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.qs" placeholder="请输入质量标准" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="arrivalTime" align="center" label="需求到货时间">
|
||||
<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">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.remark" placeholder="请输入备注" />
|
||||
</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" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button :loading="buttonLoading" type="primary" @click="submitTransferForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消 </el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="Cailiaoshebei" lang="ts">
|
||||
import { getCailiaoshebei, updateCailiaoshebei, listBatch, getBatch, delBatch, listSelectCailiaoshebei } from '@/api/materials/batchPlan';
|
||||
import { CailiaoshebeiVO, CailiaoshebeiQuery, CailiaoshebeiForm } from '@/api/materials/batchPlan/types';
|
||||
import { useUserStoreHook } from '@/store/modules/user';
|
||||
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
// 获取用户 store
|
||||
const userStore = useUserStoreHook();
|
||||
// 从 store 中获取项目列表和当前选中的项目
|
||||
const currentProject = computed(() => userStore.selectedProject);
|
||||
const batchTreeRef = ref<any>(null);
|
||||
const cailiaoshebeiList = ref<CailiaoshebeiVO[]>([]);
|
||||
const buttonLoading = ref(false);
|
||||
const loading = ref(false);
|
||||
const showSearch = ref(true);
|
||||
const ids = ref<Array<string | number>>([]);
|
||||
const single = ref(true);
|
||||
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 route = useRoute();
|
||||
const queryFormRef = ref<ElFormInstance>();
|
||||
const cailiaoshebeiFormRef = ref<ElFormInstance>();
|
||||
|
||||
const dialog = reactive<DialogOption>({
|
||||
visible: false,
|
||||
title: ''
|
||||
});
|
||||
|
||||
const initFormData: any = {
|
||||
mrpBaseBo: {
|
||||
id: undefined,
|
||||
preparedDate: undefined,
|
||||
planCode: undefined,
|
||||
matCat: undefined,
|
||||
status: undefined,
|
||||
projectId: currentProject.value?.id
|
||||
},
|
||||
|
||||
planList: [
|
||||
{
|
||||
id: undefined,
|
||||
name: undefined,
|
||||
specification: undefined,
|
||||
unit: undefined,
|
||||
demandQuantity: undefined,
|
||||
qs: undefined,
|
||||
arrivalTime: undefined,
|
||||
remark: undefined
|
||||
}
|
||||
]
|
||||
};
|
||||
const data = reactive({
|
||||
form: { ...initFormData },
|
||||
queryParams: {
|
||||
batchData: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
planCode: undefined,
|
||||
|
||||
projectId: currentProject.value?.id
|
||||
},
|
||||
mainData: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
mrpBaseId: undefined,
|
||||
projectId: currentProject.value?.id
|
||||
}
|
||||
},
|
||||
rules: {
|
||||
id: [{ required: true, message: '主键ID不能为空', trigger: 'blur' }],
|
||||
'mrpBaseBo.preparedDate': [{ required: true, message: '计划日期不能为空', trigger: 'blur' }],
|
||||
'mrpBaseBo.planCode': [{ required: true, message: '计划编码不能为空', trigger: 'blur' }],
|
||||
'mrpBaseBo.matCat': [{ required: true, message: '物资分类不能为空', trigger: 'blur' }]
|
||||
}
|
||||
});
|
||||
const batchNumber = ref('');
|
||||
const { queryParams, form, rules } = toRefs(data);
|
||||
|
||||
/** 查询物资-材料设备列表 */
|
||||
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;
|
||||
}
|
||||
total.value = res.total;
|
||||
loading.value = false;
|
||||
if (type === 'search') return;
|
||||
getMainList();
|
||||
};
|
||||
|
||||
/** 节点单击事件 */
|
||||
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;
|
||||
};
|
||||
|
||||
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('请至少保留一项');
|
||||
form.value.planList.splice(index, 1);
|
||||
};
|
||||
|
||||
//新增
|
||||
const addRow = () => {
|
||||
form.value.planList.push({
|
||||
name: undefined,
|
||||
specification: undefined,
|
||||
unit: undefined,
|
||||
demandQuantity: undefined,
|
||||
qs: undefined,
|
||||
arrivalTime: undefined,
|
||||
remark: undefined
|
||||
});
|
||||
};
|
||||
|
||||
/** 取消按钮 */
|
||||
const cancel = () => {
|
||||
reset();
|
||||
dialog.visible = false;
|
||||
};
|
||||
|
||||
/** 表单重置 */
|
||||
const reset = () => {
|
||||
const status = form.value.mrpBaseBo.status;
|
||||
form.value = { ...initFormData, status }; // 重置但保留
|
||||
cailiaoshebeiFormRef.value?.resetFields();
|
||||
form.value.mrpBaseBo.projectId = currentProject.value?.id;
|
||||
form.value.planList = [
|
||||
{
|
||||
name: undefined,
|
||||
specification: undefined,
|
||||
unit: 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;
|
||||
};
|
||||
|
||||
/** 新增按钮操作 */
|
||||
const handleAdd = () => {
|
||||
reset();
|
||||
dialog.visible = true;
|
||||
dialog.title = '新增物资-需求';
|
||||
};
|
||||
|
||||
const handleUpdata = () => {
|
||||
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;
|
||||
}, {});
|
||||
});
|
||||
|
||||
console.log(form.value);
|
||||
});
|
||||
dialog.visible = true;
|
||||
dialog.title = '修改物资-需求';
|
||||
};
|
||||
|
||||
/** 提交数据 */
|
||||
const submitTransferForm = async () => {
|
||||
const result = validateAndClean(form.value.planList);
|
||||
if (!result.valid) {
|
||||
proxy?.$modal.msgError('验证失败,主要信息存在部分字段缺失的数据项');
|
||||
return;
|
||||
}
|
||||
cailiaoshebeiFormRef.value?.validate(async (valid: boolean) => {
|
||||
if (valid) {
|
||||
buttonLoading.value = true;
|
||||
form.value.planList = result.data;
|
||||
await updateCailiaoshebei(form.value).finally(() => (buttonLoading.value = false));
|
||||
proxy?.$modal.msgSuccess('操作成功');
|
||||
dialog.visible = false;
|
||||
await getList();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/** 删除批次 */
|
||||
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();
|
||||
};
|
||||
|
||||
//检测主要信息填写状况
|
||||
function validateAndClean(arr) {
|
||||
// 过滤掉全空的数据项
|
||||
const cleanedArr = arr.filter((item) => !Object.values(item).every((v) => v === '' || v == null));
|
||||
let hasFullItem = false; // 是否有一条全填数据
|
||||
|
||||
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; // 有一条全填
|
||||
}
|
||||
const allEmpty = Object.values(item).every((v) => v === '' || v == null);
|
||||
// 如果不是全填，也不是全空（部分填） → 直接返回失败
|
||||
if (!allFilled && !allEmpty) {
|
||||
return { valid: false, data: cleanedArr };
|
||||
}
|
||||
}
|
||||
// 如果没有至少一条全填，返回失败
|
||||
if (!hasFullItem) {
|
||||
return { valid: false, data: cleanedArr };
|
||||
}
|
||||
return { valid: true, data: cleanedArr };
|
||||
}
|
||||
|
||||
/** 审核按钮操作 */
|
||||
const handleAudit = async () => {
|
||||
if (!form.value.mrpBaseBo.status) {
|
||||
proxy?.$modal.msgError('请选择批次号');
|
||||
return;
|
||||
}
|
||||
proxy?.$tab.closePage(route);
|
||||
proxy?.$tab.openPage('/approval/batchPlan/indexEdit', '审核物资设备批次需求计划', {
|
||||
id: queryParams.value.mainData.mrpBaseId,
|
||||
status: form.value.mrpBaseBo.status + '_batchRequirements',
|
||||
type: 'update'
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
// getSupplierList();
|
||||
});
|
||||
|
||||
//监听项目id刷新数据
|
||||
const listeningProject = watch(
|
||||
() => currentProject.value?.id,
|
||||
(nid, oid) => {
|
||||
queryParams.value.mainData.projectId = nid;
|
||||
|
||||
form.value.mrpBaseBo.projectId = nid;
|
||||
|
||||
getList();
|
||||
}
|
||||
);
|
||||
|
||||
onUnmounted(() => {
|
||||
listeningProject();
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.custom-tree-node {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
</style>
|
||||
382
src/views/materials/batchPlan/indexEdit.vue
Normal file
382
src/views/materials/batchPlan/indexEdit.vue
Normal file
@ -0,0 +1,382 @@
|
||||
<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.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">
|
||||
<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">
|
||||
<el-col :span="8" :offset="0">
|
||||
<el-form-item label="物资类别" prop="mrpBaseBo.matCat">
|
||||
<el-input v-model="form.mrpBaseBo.matCat" placeholder="请输入物资类别" disabled />
|
||||
</el-form-item>
|
||||
</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-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8" :offset="0">
|
||||
<el-form-item label="计划编号" prop="mrpBaseBo.planCode">
|
||||
<el-input v-model="form.mrpBaseBo.planCode" placeholder="请输入计划编号" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<div class="p-6">
|
||||
<el-table v-loading="loading" :data="cailiaoshebeiList">
|
||||
<!-- <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" />
|
||||
<el-table-column label="计量单位" align="center" prop="unit" width="80" />
|
||||
<el-table-column label="需求数量" align="center" prop="demandQuantity" />
|
||||
<el-table-column label="需求到货时间" align="center" prop="arrivalTime" width="250" />
|
||||
<el-table-column label="备注" align="center" prop="remark" />
|
||||
</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 ComponentInternalInstance;
|
||||
import { useUserStoreHook } from '@/store/modules/user';
|
||||
const { design_change_reason_type } = toRefs<any>(proxy?.useDict('design_change_reason_type'));
|
||||
import { getKnowledgeDocument } from '@/api/design/technicalStandard';
|
||||
import { getConstructionValue } from '@/api/out/constructionValue';
|
||||
import { workScheduleListDetail } from '@/api/progress/plan';
|
||||
import { getCailiaoshebei } from '@/api/materials/batchPlan';
|
||||
import { getPcDetail, listCailiaoshebei } from '@/api/materials/batchPlan';
|
||||
import { CailiaoshebeiVO } from '@/api/materials/batchPlan/types';
|
||||
// 获取用户 store
|
||||
const userStore = useUserStoreHook();
|
||||
// 从 store 中获取项目列表和当前选中的项目
|
||||
const currentProject = computed(() => userStore.selectedProject);
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
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 + '_mrp',
|
||||
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 selectValue = ref<string[]>([]);
|
||||
const cailiaoshebeiList = ref<CailiaoshebeiVO[]>([]);
|
||||
|
||||
const initFormData: any = {
|
||||
mrpBaseBo: {
|
||||
id: undefined,
|
||||
preparedDate: undefined,
|
||||
planCode: undefined,
|
||||
matCat: undefined,
|
||||
status: undefined,
|
||||
projectId: currentProject.value?.id
|
||||
},
|
||||
|
||||
planList: [
|
||||
{
|
||||
id: undefined,
|
||||
name: undefined,
|
||||
specification: undefined,
|
||||
unit: undefined,
|
||||
demandQuantity: undefined,
|
||||
qs: undefined,
|
||||
arrivalTime: undefined,
|
||||
remark: 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 id = routeParams.value.id;
|
||||
const res: any = await getCailiaoshebei(id);
|
||||
cailiaoshebeiList.value = res.data.planList;
|
||||
Object.assign(form.value, res.data);
|
||||
console.log('🚀 ~ getInfo ~ form.value:', form.value);
|
||||
|
||||
loading.value = false;
|
||||
buttonLoading.value = false;
|
||||
});
|
||||
};
|
||||
|
||||
/** 提交按钮 */
|
||||
const submitForm = (status1: string) => {
|
||||
status.value = status1;
|
||||
submit(status.value, form.value);
|
||||
};
|
||||
|
||||
const submitFlow = async () => {
|
||||
handleStartWorkFlow(form.value);
|
||||
dialogVisible.visible = false;
|
||||
};
|
||||
//提交申请
|
||||
const handleStartWorkFlow = async (data: any) => {
|
||||
try {
|
||||
submitFormData.value.flowCode = flowCode.value;
|
||||
submitFormData.value.businessId = data.mrpBaseBo.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.mrpBaseBo.id);
|
||||
};
|
||||
//提交回调
|
||||
const submitCallback = async () => {
|
||||
await proxy.$tab.closePage(route);
|
||||
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(route);
|
||||
router.go(-1);
|
||||
} else {
|
||||
if ((form.value.mrpBaseBo.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 = route.query;
|
||||
console.log('🚀 ~ proxy.$route.query:', 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>
|
||||
548
src/views/materials/cailiaoshebei/index.vue
Normal file
548
src/views/materials/cailiaoshebei/index.vue
Normal file
@ -0,0 +1,548 @@
|
||||
<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="batchNumber">
|
||||
<el-input v-model="queryParams.batchNumber" placeholder="请输入批次ID" clearable @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="供货商ID" prop="supplierId">
|
||||
<el-input v-model="queryParams.supplierId" placeholder="请输入供货商ID" clearable @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="供货商" prop="supplier">
|
||||
<el-input v-model="queryParams.supplier" placeholder="请输入供货商" clearable @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<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="supply">
|
||||
<el-input v-model="queryParams.supply" placeholder="请输入供货来源(字典)" clearable @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="规格型号" prop="specification">
|
||||
<el-input v-model="queryParams.specification" placeholder="请输入规格型号" clearable @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="特征描述" prop="signalment">
|
||||
<el-input v-model="queryParams.signalment" placeholder="请输入特征描述" clearable @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="物料编码" prop="materialCode">
|
||||
<el-input v-model="queryParams.materialCode" placeholder="请输入物料编码" clearable @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="计划到场时间" prop="arrivalTime">
|
||||
<el-date-picker clearable v-model="queryParams.arrivalTime" type="date" value-format="YYYY-MM-DD" placeholder="请选择计划到场时间" />
|
||||
</el-form-item>
|
||||
<el-form-item label="计划完成时间" prop="finishTime">
|
||||
<el-date-picker clearable v-model="queryParams.finishTime" type="date" value-format="YYYY-MM-DD" placeholder="请选择计划完成时间" />
|
||||
</el-form-item>
|
||||
<el-form-item label="计量单位" prop="unit">
|
||||
<el-input v-model="queryParams.unit" placeholder="请输入计量单位" clearable @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="计划数量" prop="plan">
|
||||
<el-input v-model="queryParams.plan" placeholder="请输入计划数量" clearable @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="实际数量" prop="realQuantity">
|
||||
<el-input v-model="queryParams.realQuantity" 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-row :gutter="20">
|
||||
<!-- 流程分类树 -->
|
||||
<el-col style="" :span="5">
|
||||
<el-card shadow="hover">
|
||||
<template #header>
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5" :offset="0"
|
||||
><el-button type="primary" size="default" @click="addBatch" icon="FolderAdd" plain>新增</el-button></el-col
|
||||
>
|
||||
<el-col :span="1.5" :offset="0"
|
||||
><el-button type="danger" size="default" @click="handleDeleteBatch" icon="FolderDelete" plain>删除</el-button></el-col
|
||||
>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<el-input v-model="batchNumber" placeholder="请输入批次号" @input="searchBatchList" prefix-icon="Search" clearable />
|
||||
<el-tree
|
||||
ref="batchTreeRef"
|
||||
class="mt-2"
|
||||
node-key="batchNumber"
|
||||
:data="batchOptions"
|
||||
:props="{ label: 'batchNumber', children: 'children' }"
|
||||
:expand-on-click-node="false"
|
||||
highlight-current
|
||||
default-expand-all
|
||||
@node-click="handleNodeClick"
|
||||
>
|
||||
<template #default="{ node, data }">
|
||||
<div class="custom-tree-node">
|
||||
{{ node.label }}
|
||||
<dict-tag :options="wf_business_status" :value="data.approvalDesign" />
|
||||
</div>
|
||||
</template>
|
||||
</el-tree>
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
v-model:page="queryParams.pageNum"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
@pagination="getBatchList"
|
||||
layout="prev, pager, next,jumper"
|
||||
/>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="19">
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5" v-if="form.approvalDesign == 'draft'">
|
||||
<el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['cailiaoshebei:cailiaoshebei:add']">新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5" v-if="form.approvalDesign == 'draft'">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="Edit"
|
||||
:disabled="single"
|
||||
@click="handleUpdate()"
|
||||
v-hasPermi="['cailiaoshebei:cailiaoshebei:edit']"
|
||||
>修改</el-button
|
||||
>
|
||||
</el-col>
|
||||
<el-col :span="1.5" v-if="form.approvalDesign == 'draft'">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="Delete"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete()"
|
||||
v-hasPermi="['cailiaoshebei:cailiaoshebei:remove']"
|
||||
>删除</el-button
|
||||
>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button plain type="warning" icon="Finished" @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="supplier" width="237">
|
||||
<template #default="scope">
|
||||
<div v-for="(item, index) in scope.row.supplier.split(',')" :class="index != 0 ? 'mt-1' : ''">
|
||||
<el-tag type="primary">{{ item }}</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="供货来源" align="center" prop="supply">
|
||||
<template #default="scope">
|
||||
<dict-tag :options="supply" :value="scope.row.supply" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="设备材料名称" align="center" prop="name" width="110" />
|
||||
<el-table-column label="规格型号" align="center" prop="specification" />
|
||||
<el-table-column label="特征描述" align="center" prop="signalment" />
|
||||
<el-table-column label="物料编码" align="center" prop="materialCode" width="200" />
|
||||
<el-table-column label="计量单位" align="center" prop="unit" />
|
||||
<el-table-column label="计划数量" align="center" prop="plan" />
|
||||
<el-table-column label="备注" align="center" prop="remark" />
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" v-if="form.approvalDesign == 'draft'">
|
||||
<template #default="scope">
|
||||
<el-tooltip content="修改" placement="top">
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
icon="Edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['cailiaoshebei:cailiaoshebei:edit']"
|
||||
></el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="删除" placement="top">
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
icon="Delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['cailiaoshebei:cailiaoshebei:remove']"
|
||||
></el-button>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 添加或修改物资-材料设备对话框 -->
|
||||
<el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
|
||||
<el-form ref="cailiaoshebeiFormRef" :model="form" :rules="rules" label-width="110px">
|
||||
<el-form-item label="批次号" prop="batchNumber">
|
||||
<el-input v-model="form.batchNumber" placeholder="请输入批次ID" disabled />
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="供货商ID" prop="supplierId">
|
||||
<el-input v-model="form.supplierId" placeholder="请输入供货商ID" />
|
||||
</el-form-item> -->
|
||||
<el-form-item label="供货商" prop="supplier">
|
||||
<el-select v-model="selectValue" value-key="id" multiple placeholder="请选择供货商" clearable filterable>
|
||||
<el-option v-for="item in supplierOptions" :key="item.id" :label="item.name" :value="item.id"> </el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="供货来源" prop="supply">
|
||||
<el-select v-model="form.supply" value-key="value" placeholder="请选择供货来源" clearable filterable @change="">
|
||||
<el-option v-for="item in supply" :key="item.value" :label="item.label" :value="item.value"> </el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="材料名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入设备材料名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="规格型号" prop="specification">
|
||||
<el-input v-model="form.specification" placeholder="请输入规格型号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="特征描述" prop="signalment">
|
||||
<el-input v-model="form.signalment" placeholder="请输入特征描述" />
|
||||
</el-form-item>
|
||||
<el-form-item label="物料编码" prop="materialCode" v-if="form.id">
|
||||
<el-input v-model="form.materialCode" placeholder="请输入物料编码" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item label="计量单位" prop="unit">
|
||||
<el-input v-model="form.unit" placeholder="请输入计量单位" />
|
||||
</el-form-item>
|
||||
<el-form-item label="计划数量" prop="plan">
|
||||
<el-input v-model="form.plan" placeholder="请输入计划数量" type="number" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" type="textarea" 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="Cailiaoshebei" lang="ts">
|
||||
import {
|
||||
listCailiaoshebei,
|
||||
getCailiaoshebei,
|
||||
delCailiaoshebei,
|
||||
addCailiaoshebei,
|
||||
updateCailiaoshebei,
|
||||
listBatch,
|
||||
getBatch,
|
||||
delBatch
|
||||
} from '@/api/materials/cailiaoshebei';
|
||||
import { CailiaoshebeiVO, CailiaoshebeiQuery, CailiaoshebeiForm } from '@/api/materials/cailiaoshebei/types';
|
||||
import { listContractor } from '@/api/project/contractor';
|
||||
import { useUserStoreHook } from '@/store/modules/user';
|
||||
const batchNumber = ref('');
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
const { supply, wf_business_status } = toRefs<any>(proxy?.useDict('supply', 'wf_business_status'));
|
||||
// 获取用户 store
|
||||
const userStore = useUserStoreHook();
|
||||
// 从 store 中获取项目列表和当前选中的项目
|
||||
const currentProject = computed(() => userStore.selectedProject);
|
||||
const batchTreeRef = ref<any>(null);
|
||||
const cailiaoshebeiList = ref<CailiaoshebeiVO[]>([]);
|
||||
const buttonLoading = ref(false);
|
||||
const loading = ref(false);
|
||||
const showSearch = ref(true);
|
||||
const ids = ref<Array<string | number>>([]);
|
||||
const single = ref(true);
|
||||
const multiple = ref(true);
|
||||
const total = ref(0);
|
||||
const batchOptions = ref<any[]>([]);
|
||||
|
||||
const queryFormRef = ref<ElFormInstance>();
|
||||
const cailiaoshebeiFormRef = ref<ElFormInstance>();
|
||||
|
||||
const dialog = reactive<DialogOption>({
|
||||
visible: false,
|
||||
title: ''
|
||||
});
|
||||
|
||||
const initFormData: CailiaoshebeiForm = {
|
||||
id: undefined,
|
||||
batchNumber: undefined,
|
||||
supplierId: undefined,
|
||||
supplier: undefined,
|
||||
name: undefined,
|
||||
supply: undefined,
|
||||
specification: undefined,
|
||||
signalment: undefined,
|
||||
materialCode: undefined,
|
||||
arrivalTime: undefined,
|
||||
finishTime: undefined,
|
||||
unit: undefined,
|
||||
plan: undefined,
|
||||
realQuantity: undefined,
|
||||
approvalDesign: undefined,
|
||||
projectId: currentProject.value?.id,
|
||||
remark: undefined
|
||||
};
|
||||
const data = reactive<PageData<CailiaoshebeiForm, CailiaoshebeiQuery>>({
|
||||
form: { ...initFormData },
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
batchNumber: undefined,
|
||||
supplierId: undefined,
|
||||
supplier: undefined,
|
||||
name: undefined,
|
||||
projectId: currentProject.value?.id,
|
||||
supply: undefined,
|
||||
specification: undefined,
|
||||
signalment: undefined,
|
||||
materialCode: undefined,
|
||||
arrivalTime: undefined,
|
||||
finishTime: undefined,
|
||||
unit: undefined,
|
||||
plan: undefined,
|
||||
realQuantity: undefined,
|
||||
params: {}
|
||||
},
|
||||
rules: {
|
||||
id: [{ required: true, message: '主键ID不能为空', trigger: 'blur' }]
|
||||
}
|
||||
});
|
||||
|
||||
const { queryParams, form, rules } = toRefs(data);
|
||||
|
||||
/** 查询物资-材料设备列表 */
|
||||
const getList = async () => {
|
||||
if (!queryParams.value.batchNumber) return;
|
||||
|
||||
loading.value = true;
|
||||
const res = await listCailiaoshebei(queryParams.value);
|
||||
cailiaoshebeiList.value = res.rows;
|
||||
console.log(1111);
|
||||
|
||||
loading.value = false;
|
||||
};
|
||||
|
||||
const searchBatchList = async () => {
|
||||
queryParams.value.batchNumber = batchNumber.value;
|
||||
getBatchList();
|
||||
};
|
||||
|
||||
//查询批次列表
|
||||
const getBatchList = async () => {
|
||||
const res = await listBatch(queryParams.value);
|
||||
batchOptions.value = res.rows;
|
||||
total.value = res.total;
|
||||
try {
|
||||
queryParams.value.batchNumber = res.rows[0].batchNumber;
|
||||
batchTreeRef.value.setCurrentKey(res.rows[0].batchNumber);
|
||||
form.value.batchNumber = res.rows[0].batchNumber;
|
||||
form.value.approvalDesign = res.rows[0].approvalDesign;
|
||||
} catch (error) {
|
||||
form.value.batchNumber = '';
|
||||
}
|
||||
console.log(145615616);
|
||||
|
||||
getList();
|
||||
};
|
||||
|
||||
/** 节点单击事件 */
|
||||
const handleNodeClick = (data: any) => {
|
||||
queryParams.value.batchNumber = data.batchNumber;
|
||||
form.value.batchNumber = data.batchNumber;
|
||||
form.value.approvalDesign = data.approvalDesign;
|
||||
|
||||
if (data.batchNumber === '0') {
|
||||
queryParams.value.batchNumber = '';
|
||||
}
|
||||
getList();
|
||||
};
|
||||
|
||||
/** 取消按钮 */
|
||||
const cancel = () => {
|
||||
reset();
|
||||
dialog.visible = false;
|
||||
};
|
||||
|
||||
/** 表单重置 */
|
||||
const reset = () => {
|
||||
const preservedBatchId = form.value.batchNumber; // 先保存当前的 batchNumber
|
||||
const approvalDesigndBatchId = form.value.approvalDesign; // 先保存当前的 batchNumber
|
||||
selectValue.value = [];
|
||||
|
||||
form.value = { ...initFormData, batchNumber: preservedBatchId, approvalDesign: approvalDesigndBatchId }; // 重置但保留
|
||||
cailiaoshebeiFormRef.value?.resetFields();
|
||||
};
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
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;
|
||||
};
|
||||
|
||||
/** 新增按钮操作 */
|
||||
const handleAdd = () => {
|
||||
reset();
|
||||
dialog.visible = true;
|
||||
dialog.title = '添加物资-材料设备';
|
||||
};
|
||||
|
||||
/** 修改按钮操作 */
|
||||
const handleUpdate = async (row?: CailiaoshebeiVO) => {
|
||||
reset();
|
||||
const _id = row?.id || ids.value[0];
|
||||
const res = await getCailiaoshebei(_id);
|
||||
Object.assign(form.value, res.data);
|
||||
selectValue.value = (form.value.supplierId as string).split(',');
|
||||
dialog.visible = true;
|
||||
dialog.title = '修改物资-材料设备';
|
||||
};
|
||||
|
||||
/** 审核按钮操作 */
|
||||
const handleAudit = async () => {
|
||||
if (!form.value.batchNumber) {
|
||||
proxy?.$modal.msgError('请选择批次');
|
||||
return;
|
||||
}
|
||||
proxy?.$tab.closePage(proxy.$route);
|
||||
proxy?.$tab.openPage('/approval/cailiaoshebei/indexEdit', '审核材料设备设计', {
|
||||
id: form.value.batchNumber + '_materialDesign',
|
||||
approvalDesign: form.value.approvalDesign,
|
||||
type: 'update'
|
||||
});
|
||||
};
|
||||
|
||||
/** 提交按钮 */
|
||||
const submitForm = () => {
|
||||
console.log('🚀 ~ submitForm ~ form.value:', form.value);
|
||||
cailiaoshebeiFormRef.value?.validate(async (valid: boolean) => {
|
||||
if (valid) {
|
||||
buttonLoading.value = true;
|
||||
if (form.value.id) {
|
||||
await updateCailiaoshebei(form.value).finally(() => (buttonLoading.value = false));
|
||||
} else {
|
||||
await addCailiaoshebei(form.value).finally(() => (buttonLoading.value = false));
|
||||
}
|
||||
proxy?.$modal.msgSuccess('操作成功');
|
||||
dialog.visible = false;
|
||||
await getList();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/** 新增批次 */
|
||||
const addBatch = async () => {
|
||||
await proxy?.$modal.confirm('是否确认新增批次？').finally(() => (loading.value = false));
|
||||
queryParams.value.batchNumber = '';
|
||||
await getBatch({ projectId: currentProject.value?.id });
|
||||
await getBatchList();
|
||||
proxy?.$modal.msgSuccess('新增成功');
|
||||
};
|
||||
|
||||
/** 删除批次 */
|
||||
const handleDeleteBatch = async () => {
|
||||
const _ids = batchTreeRef.value.getCurrentNode()?.id;
|
||||
await proxy?.$modal.confirm('是否确认删除批次编号为"' + _ids + '"的数据项？').finally(() => (loading.value = false));
|
||||
await delBatch(_ids);
|
||||
proxy?.$modal.msgSuccess('删除成功');
|
||||
queryParams.value.batchNumber = '';
|
||||
|
||||
await getBatchList();
|
||||
};
|
||||
|
||||
/** 删除按钮操作 */
|
||||
const handleDelete = async (row?: CailiaoshebeiVO) => {
|
||||
const _ids = row?.id || ids.value;
|
||||
await proxy?.$modal.confirm('是否确认删除物资-材料设备编号为"' + _ids + '"的数据项？').finally(() => (loading.value = false));
|
||||
await delCailiaoshebei(_ids);
|
||||
proxy?.$modal.msgSuccess('删除成功');
|
||||
await getList();
|
||||
};
|
||||
|
||||
/** 导出按钮操作 */
|
||||
const handleExport = () => {
|
||||
proxy?.download(
|
||||
'cailiaoshebei/cailiaoshebei/export',
|
||||
{
|
||||
...queryParams.value
|
||||
},
|
||||
`cailiaoshebei_${new Date().getTime()}.xlsx`
|
||||
);
|
||||
};
|
||||
|
||||
/** 查询供货商列表 */
|
||||
const supplierOptions = ref([]);
|
||||
const getSupplierList = async () => {
|
||||
const res = await listContractor({
|
||||
projectId: currentProject.value?.id,
|
||||
pageNum: 1,
|
||||
pageSize: 10000
|
||||
});
|
||||
supplierOptions.value = res.rows;
|
||||
};
|
||||
|
||||
// 中间数组变量供 el-select 使用
|
||||
const selectValue = ref<string[]>([]);
|
||||
|
||||
// 监听 selectValue，每次变化时同步更新 form.supplierId 和 form.supplier
|
||||
watch(
|
||||
selectValue,
|
||||
(newVal) => {
|
||||
form.value.supplierId = newVal.join(',');
|
||||
const selectedNames = supplierOptions.value.filter((opt) => newVal.includes(opt.id)).map((opt) => opt.name);
|
||||
form.value.supplier = selectedNames.join(',');
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
getBatchList();
|
||||
getSupplierList();
|
||||
});
|
||||
|
||||
//监听项目id刷新数据
|
||||
const listeningProject = watch(
|
||||
() => currentProject.value?.id,
|
||||
(nid, oid) => {
|
||||
queryParams.value.projectId = nid;
|
||||
form.value.projectId = nid;
|
||||
getBatchList();
|
||||
getSupplierList();
|
||||
}
|
||||
);
|
||||
|
||||
onUnmounted(() => {
|
||||
listeningProject();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.custom-tree-node {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
</style>
|
||||
348
src/views/materials/cailiaoshebei/indexEdit.vue
Normal file
348
src/views/materials/cailiaoshebei/indexEdit.vue
Normal file
@ -0,0 +1,348 @@
|
||||
<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.approvalDesign"
|
||||
: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-table v-loading="loading" :data="cailiaoshebeiList">
|
||||
<el-table-column label="供货商" align="center" prop="supplier" />
|
||||
<el-table-column label="设备材料名称" align="center" prop="name" />
|
||||
<el-table-column label="供货来源" align="center" prop="supply">
|
||||
<template #default="scope">
|
||||
<dict-tag :options="supply" :value="scope.row.supply" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="规格型号" align="center" prop="specification" />
|
||||
<el-table-column label="特征描述" align="center" prop="signalment" />
|
||||
<el-table-column label="物料编码" align="center" prop="materialCode" width="200" />
|
||||
<el-table-column label="计量单位" align="center" prop="unit" />
|
||||
<el-table-column label="计划数量" align="center" prop="plan" />
|
||||
<el-table-column label="备注" align="center" prop="remark" />
|
||||
</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 ComponentInternalInstance;
|
||||
import { useUserStoreHook } from '@/store/modules/user';
|
||||
import { getCailiaoshebei, getPcDetail, listCailiaoshebei } from '@/api/materials/cailiaoshebei';
|
||||
import { CailiaoshebeiVO } from '@/api/materials/cailiaoshebei/types';
|
||||
// 获取用户 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 + '_materialDesign',
|
||||
label: '材料设备设计审批'
|
||||
}
|
||||
];
|
||||
|
||||
const leaveFormRef = ref<ElFormInstance>();
|
||||
const dialog = reactive({
|
||||
visible: false,
|
||||
title: '',
|
||||
isEdit: false
|
||||
});
|
||||
const { supply } = toRefs<any>(proxy?.useDict('supply'));
|
||||
|
||||
const submitFormData = ref<StartProcessBo>({
|
||||
businessId: '',
|
||||
flowCode: '',
|
||||
variables: {}
|
||||
});
|
||||
const taskVariables = ref<Record<string, any>>({});
|
||||
const selectValue = ref<string[]>([]);
|
||||
const cailiaoshebeiList = ref<CailiaoshebeiVO[]>([]);
|
||||
|
||||
const initFormData = {
|
||||
approvalDesign: undefined,
|
||||
id: 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 id = routeParams.value.id.split('_')[0];
|
||||
const res = await listCailiaoshebei({ pageNum: 1, pageSize: 10, batchNumber: id });
|
||||
cailiaoshebeiList.value = res.rows;
|
||||
if (!form.value.approvalDesign) {
|
||||
const res = await getPcDetail(id);
|
||||
form.value.approvalDesign = res.data.approvalDesign;
|
||||
} else {
|
||||
form.value.approvalDesign = routeParams.value.approvalDesign;
|
||||
}
|
||||
form.value.id = routeParams.value.id;
|
||||
loading.value = false;
|
||||
buttonLoading.value = false;
|
||||
});
|
||||
};
|
||||
|
||||
/** 提交按钮 */
|
||||
const submitForm = (status1: string) => {
|
||||
status.value = status1;
|
||||
submit(status.value, form.value);
|
||||
};
|
||||
|
||||
const submitFlow = async () => {
|
||||
handleStartWorkFlow(form.value);
|
||||
dialogVisible.visible = false;
|
||||
};
|
||||
//提交申请
|
||||
const handleStartWorkFlow = async (data: LeaveForm) => {
|
||||
try {
|
||||
submitFormData.value.flowCode = flowCode.value;
|
||||
submitFormData.value.businessId = data.id;
|
||||
//流程变量
|
||||
taskVariables.value = {
|
||||
// leave4/5 使用的流程变量
|
||||
userList: ['1', '3', '4']
|
||||
};
|
||||
submitFormData.value.variables = taskVariables.value;
|
||||
const resp = await startWorkFlow(submitFormData.value);
|
||||
if (submitVerifyRef.value) {
|
||||
buttonLoading.value = false;
|
||||
submitVerifyRef.value.openDialog(resp.data.taskId);
|
||||
}
|
||||
} finally {
|
||||
buttonLoading.value = false;
|
||||
}
|
||||
};
|
||||
//审批记录
|
||||
const handleApprovalRecord = () => {
|
||||
approvalRecordRef.value.init(form.value.id);
|
||||
};
|
||||
//提交回调
|
||||
const submitCallback = async () => {
|
||||
await proxy.$tab.closePage(proxy.$route);
|
||||
proxy.$router.go(-1);
|
||||
};
|
||||
//审批
|
||||
const approvalVerifyOpen = async () => {
|
||||
submitVerifyRef.value.openDialog(routeParams.value.taskId);
|
||||
};
|
||||
// 图纸上传成功之后 开始提交
|
||||
const submit = async (status, data) => {
|
||||
form.value = data;
|
||||
if (status === 'draft') {
|
||||
buttonLoading.value = false;
|
||||
proxy?.$modal.msgSuccess('暂存成功');
|
||||
proxy.$tab.closePage(proxy.$route);
|
||||
proxy.$router.go(-1);
|
||||
} else {
|
||||
if ((form.value.approvalDesign === '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;
|
||||
console.log('🚀 ~ proxy.$route.query:', 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>
|
||||
279
src/views/materials/company/index.vue
Normal file
279
src/views/materials/company/index.vue
Normal file
@ -0,0 +1,279 @@
|
||||
<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="companyName">
|
||||
<el-input v-model="queryParams.companyName" placeholder="请输入公司名称" clearable @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="公司状态" prop="status">
|
||||
<el-select v-model="queryParams.status" clearable placeholder="全部">
|
||||
<el-option v-for="item in sys_normal_disable" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</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">
|
||||
<el-col :span="1.5">
|
||||
<el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['materials:company:add']">新增 </el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['materials:company:edit']"
|
||||
>修改
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['materials:company:remove']"
|
||||
>删除
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['materials:company:export']">导出 </el-button>
|
||||
</el-col>
|
||||
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<el-table v-loading="loading" :data="companyList" @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 label="序号" type="index" width="60" align="center" />
|
||||
<el-table-column label="公司名称" align="center" prop="companyName" />
|
||||
<el-table-column label="负责人" align="center" prop="principal" />
|
||||
<el-table-column label="负责人电话" align="center" prop="principalPhone" />
|
||||
<el-table-column label="公司状态" align="center" prop="status">
|
||||
<template #default="scope">
|
||||
<dict-tag :options="sys_normal_disable" :value="scope.row.status" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="备注" align="center" prop="remark" />
|
||||
<el-table-column label="资质情况" align="center" prop="qualification" />
|
||||
<el-table-column label="创建时间" align="center" prop="createTime" width="180" />
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template #default="scope">
|
||||
<el-space wrap>
|
||||
<el-button link type="success" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['materials:company:edit']">修改 </el-button>
|
||||
<el-button link type="danger" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['materials:company:remove']">删除 </el-button>
|
||||
</el-space>
|
||||
</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="companyFormRef" :model="form" :rules="rules" label-width="100px">
|
||||
<el-form-item label="公司名称" prop="companyName">
|
||||
<el-input v-model="form.companyName" placeholder="请输入公司名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="负责人" prop="principal">
|
||||
<el-input v-model="form.principal" placeholder="请输入负责人" />
|
||||
</el-form-item>
|
||||
<el-form-item label="负责人电话" prop="principalPhone">
|
||||
<el-input v-model="form.principalPhone" placeholder="请输入负责人电话" type="number" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" placeholder="请输入备注" />
|
||||
</el-form-item>
|
||||
<el-form-item label="资质情况" prop="qualification">
|
||||
<el-input v-model="form.qualification" 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="Company" lang="ts">
|
||||
import { addCompany, delCompany, getCompany, listCompany, updateCompany } from '@/api/materials/company';
|
||||
import { CompanyForm, CompanyQuery, CompanyVO } from '@/api/materials/company/types';
|
||||
import { useUserStoreHook } from '@/store/modules/user';
|
||||
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
const { sys_normal_disable } = toRefs<any>(proxy?.useDict('sys_normal_disable'));
|
||||
|
||||
// 获取用户 store
|
||||
const userStore = useUserStoreHook();
|
||||
|
||||
// 从 store 中获取项目列表和当前选中的项目
|
||||
const currentProject = computed(() => userStore.selectedProject);
|
||||
const companyList = ref<CompanyVO[]>([]);
|
||||
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 companyFormRef = ref<ElFormInstance>();
|
||||
|
||||
const dialog = reactive<DialogOption>({
|
||||
visible: false,
|
||||
title: ''
|
||||
});
|
||||
|
||||
const initFormData: CompanyForm = {
|
||||
id: undefined,
|
||||
companyName: undefined,
|
||||
projectId: currentProject.value?.id,
|
||||
status: undefined,
|
||||
remark: undefined,
|
||||
qualification: undefined,
|
||||
principalPhone: undefined,
|
||||
principal: undefined
|
||||
};
|
||||
const data = reactive<PageData<CompanyForm, CompanyQuery>>({
|
||||
form: { ...initFormData },
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
companyName: undefined,
|
||||
projectId: currentProject.value?.id,
|
||||
status: undefined,
|
||||
qualification: undefined,
|
||||
principalPhone: undefined,
|
||||
principal: undefined,
|
||||
params: {}
|
||||
},
|
||||
rules: {
|
||||
id: [{ required: true, message: '主键id不能为空', trigger: 'blur' }],
|
||||
companyName: [{ required: true, message: '公司名字不能为空', trigger: 'blur' }],
|
||||
principal: [{ required: true, message: '负责人不能为空', trigger: 'blur' }],
|
||||
principalPhone: [{ required: true, message: '负责人电话不能为空', trigger: 'blur' }]
|
||||
}
|
||||
});
|
||||
|
||||
const { queryParams, form, rules } = toRefs(data);
|
||||
|
||||
/** 查询公司列表 */
|
||||
const getList = async () => {
|
||||
loading.value = true;
|
||||
const res = await listCompany(queryParams.value);
|
||||
companyList.value = res.rows;
|
||||
total.value = res.total;
|
||||
loading.value = false;
|
||||
};
|
||||
|
||||
/** 取消按钮 */
|
||||
const cancel = () => {
|
||||
reset();
|
||||
dialog.visible = false;
|
||||
};
|
||||
|
||||
/** 表单重置 */
|
||||
const reset = () => {
|
||||
form.value = { ...initFormData };
|
||||
companyFormRef.value?.resetFields();
|
||||
};
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
const handleQuery = () => {
|
||||
queryParams.value.pageNum = 1;
|
||||
getList();
|
||||
};
|
||||
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value?.resetFields();
|
||||
handleQuery();
|
||||
};
|
||||
|
||||
/** 多选框选中数据 */
|
||||
const handleSelectionChange = (selection: CompanyVO[]) => {
|
||||
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?: CompanyVO) => {
|
||||
reset();
|
||||
const _id = row?.id || ids.value[0];
|
||||
const res = await getCompany(_id);
|
||||
Object.assign(form.value, res.data);
|
||||
dialog.visible = true;
|
||||
dialog.title = '修改公司';
|
||||
};
|
||||
|
||||
/** 提交按钮 */
|
||||
const submitForm = () => {
|
||||
companyFormRef.value?.validate(async (valid: boolean) => {
|
||||
if (valid) {
|
||||
buttonLoading.value = true;
|
||||
form.value.projectId = currentProject.value?.id;
|
||||
if (form.value.id) {
|
||||
await updateCompany(form.value).finally(() => (buttonLoading.value = false));
|
||||
} else {
|
||||
await addCompany(form.value).finally(() => (buttonLoading.value = false));
|
||||
}
|
||||
proxy?.$modal.msgSuccess('操作成功');
|
||||
dialog.visible = false;
|
||||
await getList();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/** 删除按钮操作 */
|
||||
const handleDelete = async (row?: CompanyVO) => {
|
||||
const _ids = row?.id || ids.value;
|
||||
await proxy?.$modal.confirm('是否确认删除公司编号为"' + _ids + '"的数据项？').finally(() => (loading.value = false));
|
||||
await delCompany(_ids);
|
||||
proxy?.$modal.msgSuccess('删除成功');
|
||||
await getList();
|
||||
};
|
||||
|
||||
/** 导出按钮操作 */
|
||||
const handleExport = () => {
|
||||
proxy?.download(
|
||||
'materials/company/export',
|
||||
{
|
||||
...queryParams.value
|
||||
},
|
||||
`company_${new Date().getTime()}.xlsx`
|
||||
);
|
||||
};
|
||||
|
||||
//监听项目id刷新数据
|
||||
const listeningProject = watch(
|
||||
() => currentProject.value?.id,
|
||||
(nid, oid) => {
|
||||
queryParams.value.projectId = nid;
|
||||
form.value.projectId = nid;
|
||||
getList();
|
||||
}
|
||||
);
|
||||
|
||||
onUnmounted(() => {
|
||||
listeningProject();
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
});
|
||||
</script>
|
||||
@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-descriptions v-loading="loading" :column="2">
|
||||
<el-descriptions-item label="材料名称">{{ materialsDetail?.materialsName }}</el-descriptions-item>
|
||||
<el-descriptions-item label="供应商">{{ materialsDetail?.companyVo?.companyName }}</el-descriptions-item>
|
||||
<div :key="item.value" v-for="item in materials_file_type">
|
||||
<el-descriptions-item :span="2" :label="item.label">
|
||||
<div v-if="ossIdMap?.[item.value] && ossMap?.[ossIdMap[item.value]]">
|
||||
<a :href="ossMap[ossIdMap[item.value]]?.url" target="_blank">
|
||||
{{ ossMap[ossIdMap[item.value]]?.originalName }}
|
||||
</a>
|
||||
</div>
|
||||
</el-descriptions-item>
|
||||
</div>
|
||||
<el-descriptions-item label="规格型号">{{ materialsDetail?.typeSpecificationName }}</el-descriptions-item>
|
||||
<el-descriptions-item label="使用部位">{{ materialsDetail?.usePart }}</el-descriptions-item>
|
||||
<el-descriptions-item label="计量单位">{{ materialsDetail?.weightId }}</el-descriptions-item>
|
||||
<el-descriptions-item label="预计量">{{ materialsDetail?.quantityCount }}</el-descriptions-item>
|
||||
<el-descriptions-item label="状态" v-if="materialsDetail?.status === '0'">正常</el-descriptions-item>
|
||||
<el-descriptions-item label="状态" v-if="materialsDetail?.status === '1'">停用</el-descriptions-item>
|
||||
<el-descriptions-item label="备注">{{ materialsDetail?.remark }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { getMaterials } from '@/api/materials/materials';
|
||||
import { MaterialsVO } from '@/api/materials/materials/types';
|
||||
import { listByIds } from '@/api/system/oss';
|
||||
import { OssVO } from '@/api/system/oss/types';
|
||||
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
const { materials_file_type } = toRefs<any>(proxy?.useDict('materials_file_type'));
|
||||
|
||||
interface Props {
|
||||
materialsId?: string | number;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
const loading = ref<boolean>(false);
|
||||
const materialsDetail = ref<MaterialsVO>();
|
||||
const ossIdMap = ref<Record<string, string>>({});
|
||||
const ossMap = ref<Record<string, OssVO>>({}); // 存储 ossId -> 对象映射
|
||||
const getMaterialsDetail = async () => {
|
||||
console.log('getMaterialsDetail', props.materialsId);
|
||||
|
||||
loading.value = true;
|
||||
const res = await getMaterials(props.materialsId);
|
||||
if (res.data && res.code === 200) {
|
||||
materialsDetail.value = res.data;
|
||||
ossIdMap.value = res.data.fileOssMap;
|
||||
// 获取 value 列表
|
||||
if (res.data.fileOssMap && Object.keys(res.data.fileOssMap).length !== 0) {
|
||||
const values = Object.values(res.data.fileOssMap);
|
||||
const ossRes = await listByIds(values);
|
||||
ossMap.value = Object.fromEntries(ossRes.data.map((item) => [item.ossId, item]));
|
||||
}
|
||||
}
|
||||
console.log('ossMap', ossMap.value);
|
||||
|
||||
loading.value = false;
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getMaterialsDetail();
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.materialsId,
|
||||
(newId, oldId) => {
|
||||
if (newId !== oldId) {
|
||||
getMaterialsDetail();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<el-dialog title="添加材料出入库" v-model="visible" width="500px" append-to-body>
|
||||
<el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
|
||||
<el-form-item label="出入库状态" prop="outPut">
|
||||
<el-select v-model="form.outPut" clearable placeholder="请选择出入库状态">
|
||||
<el-option v-for="item in out_put_type" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="材料数量" prop="number">
|
||||
<el-input-number v-model="form.number" placeholder="请输入预计使用数量" />
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="剩余库存数量" prop="residue">
|
||||
<el-input v-model="form.residue" placeholder="请输入剩余库存数量" />
|
||||
</el-form-item> -->
|
||||
<el-form-item label="出入库负责人" prop="operator">
|
||||
<el-input v-model="form.operator" placeholder="请输入出入库负责人" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.outPut === '1'" label="交接单位" prop="recipient">
|
||||
<el-input v-model="form.recipient" placeholder="请输入交接单位" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.outPut === '1'" label="领用人" prop="shipper">
|
||||
<el-input v-model="form.shipper" placeholder="请输入领用人" />
|
||||
</el-form-item>
|
||||
<el-form-item label="处理方式" prop="disposition">
|
||||
<el-input v-model="form.disposition" 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="outPutTime">
|
||||
<el-date-picker clearable v-model="form.outPutTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择操作时间">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="材料出入证明" prop="path">
|
||||
<file-upload v-model="form.path" :limit="1" :file-size="50" :file-type="['pdf']" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button :loading="loading" type="primary" @click="submitForm">提 交</el-button>
|
||||
<el-button @click="closeDialog">取 消</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { defineExpose, reactive, ref } from 'vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { addMaterialsInventory } from '@/api/materials/materialsInventory';
|
||||
import { MaterialsInventoryForm } from '@/api/materials/materialsInventory/types';
|
||||
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
const { out_put_type } = toRefs<any>(proxy?.useDict('out_put_type'));
|
||||
|
||||
interface Props {
|
||||
materialsId?: string | number;
|
||||
projectId?: string | number;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
const emit = defineEmits(['submit']);
|
||||
|
||||
const visible = ref<boolean>(false);
|
||||
const loading = ref<boolean>(false);
|
||||
|
||||
// 定义表单数据，注意结构与校验规则需要与接口对应
|
||||
const form = reactive<MaterialsInventoryForm>({
|
||||
materialsId: props.materialsId,
|
||||
projectId: props.projectId,
|
||||
outPut: undefined,
|
||||
number: 1,
|
||||
outPutTime: '',
|
||||
residue: '',
|
||||
operator: '',
|
||||
path: '',
|
||||
disposition: '',
|
||||
recipient: '',
|
||||
shipper: '',
|
||||
remark: ''
|
||||
});
|
||||
|
||||
// 定义校验规则
|
||||
const rules = reactive({
|
||||
outPut: [{ required: true, message: '请选择出入库状态', trigger: 'blur' }],
|
||||
number: [{ required: true, message: '请输入材料数量', trigger: 'blur' }],
|
||||
residue: [{ required: true, message: '请输入剩余材料数量', trigger: 'blur' }],
|
||||
operator: [{ required: true, message: '请输入出入库负责人', trigger: 'blur' }],
|
||||
outPutTime: [{ required: true, message: '请选择操作时间', trigger: 'blur' }]
|
||||
});
|
||||
|
||||
const formRef = ref();
|
||||
|
||||
const submitForm = () => {
|
||||
formRef.value.validate(async (valid: boolean) => {
|
||||
if (!valid) return;
|
||||
loading.value = true;
|
||||
try {
|
||||
// 调用接口提交数据
|
||||
await addMaterialsInventory({ ...form, materialsId: props.materialsId });
|
||||
ElMessage.success('提交成功');
|
||||
emit('submit');
|
||||
closeDialog();
|
||||
} catch (error) {
|
||||
ElMessage.error('提交失败');
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const closeDialog = () => {
|
||||
visible.value = false;
|
||||
// 重置表单数据
|
||||
formRef.value.resetFields();
|
||||
};
|
||||
|
||||
// 供外部调用的打开方法
|
||||
const openDialog = () => {
|
||||
visible.value = true;
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
openDialog
|
||||
});
|
||||
</script>
|
||||
@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-table size="small" v-if="materialsInventoryList.length !== 0" :data="materialsInventoryList">
|
||||
<el-table-column label="" width="100" align="center" />
|
||||
<el-table-column label="序号" type="index" width="60" align="center" />
|
||||
<el-table-column label="出入库" align="center" prop="outPut">
|
||||
<template #default="scope">
|
||||
<dict-tag :options="out_put_type" :value="scope.row.outPut" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="材料数量" align="center" prop="number" />
|
||||
<el-table-column label="剩余库存数量" align="center" prop="residue" />
|
||||
<el-table-column label="出入库负责人" align="center" prop="operator" />
|
||||
<el-table-column label="交接单位" align="center" prop="recipient" />
|
||||
<el-table-column label="领用人" align="center" prop="shipper" />
|
||||
<el-table-column label="操作时间" align="center" prop="outPutTime" width="160" />
|
||||
<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="danger" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['materials:materialsInventory:remove']">
|
||||
删除
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
size="small"
|
||||
v-model:page="materialsSearchParams.pageNum"
|
||||
v-model:limit="materialsSearchParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { MaterialsInventoryQuery, MaterialsInventoryVO } from '@/api/materials/materialsInventory/types';
|
||||
import { delMaterialsInventory, listMaterialsInventory } from '@/api/materials/materialsInventory';
|
||||
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
const { out_put_type } = toRefs<any>(proxy?.useDict('out_put_type'));
|
||||
|
||||
interface Props {
|
||||
materialsId: string | number;
|
||||
projectId: string | number;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
const ids = ref<Array<string | number>>([]);
|
||||
const loading = ref(true);
|
||||
// 搜索条件
|
||||
const materialsSearchParams = reactive<MaterialsInventoryQuery>({
|
||||
materialsId: props.materialsId,
|
||||
projectId: props.projectId,
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
});
|
||||
const total = ref<number>(0);
|
||||
|
||||
const materialsInventoryList = ref<MaterialsInventoryVO[]>([]);
|
||||
/** 展开选中数据 */
|
||||
const getList = async () => {
|
||||
loading.value = true;
|
||||
const res = await listMaterialsInventory({ ...materialsSearchParams });
|
||||
materialsInventoryList.value = res.rows;
|
||||
total.value = res.total;
|
||||
loading.value = false;
|
||||
};
|
||||
|
||||
/** 删除按钮操作 */
|
||||
const handleDelete = async (row?: MaterialsInventoryVO) => {
|
||||
const _ids = row?.id || ids.value;
|
||||
await proxy?.$modal.confirm('是否确认删除材料出/入库编号为"' + _ids + '"的数据项？').finally(() => (loading.value = false));
|
||||
await delMaterialsInventory(_ids);
|
||||
proxy?.$modal.msgSuccess('删除成功');
|
||||
await getList();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
});
|
||||
</script>
|
||||
373
src/views/materials/materials/index.vue
Normal file
373
src/views/materials/materials/index.vue
Normal file
@ -0,0 +1,373 @@
|
||||
<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="auto">
|
||||
<el-form-item label="材料名称" prop="materialsName">
|
||||
<el-input v-model="queryParams.materialsName" placeholder="请输入材料名称" clearable @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="材料提供商" prop="companyId">
|
||||
<el-select v-model="queryParams.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>
|
||||
<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="['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>
|
||||
|
||||
<el-table v-loading="loading" :data="materialsList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="expand">
|
||||
<template #default="{ row }">
|
||||
<materials-inventory-table :materials-id="row.id" :project-id="currentProject.id" />
|
||||
</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="companyVo.companyName" />
|
||||
<el-table-column label="规格型号" align="center" prop="typeSpecificationName" />
|
||||
<el-table-column label="使用部位" align="center" prop="usePart" />
|
||||
<el-table-column label="计量单位" align="center" prop="weightId" />
|
||||
<el-table-column label="预计材料数量" align="center" prop="quantityCount" />
|
||||
<el-table-column label="状态" align="center" prop="status">
|
||||
<template #default="scope">
|
||||
<dict-tag :options="sys_normal_disable" :value="scope.row.status" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="备注" align="center" prop="remark" />
|
||||
<el-table-column label="创建时间" align="center" prop="createTime" width="180" />
|
||||
<el-table-column fixed="right" label="操作" align="center" class-name="small-padding fixed-width" width="320">
|
||||
<template #default="scope">
|
||||
<el-space>
|
||||
<el-button link type="primary" icon="View" @click="handleShowDrawer(scope.row)" v-hasPermi="['materials:materials:query']">
|
||||
详情
|
||||
</el-button>
|
||||
<el-button link type="success" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['materials:materials:edit']"> 修改 </el-button>
|
||||
<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-space>
|
||||
</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="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-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>
|
||||
<materials-inventory-add-dialog :materials-id="currentMaterialsId" :project-id="currentProject.id" ref="dialogRef" @submit="getList" />
|
||||
<el-dialog title="材料详情" v-model="showDetailDrawer" width="700px">
|
||||
<materials-detail-drawer :materials-id="currentMaterialsId" />
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="Materials" lang="ts">
|
||||
import { addMaterials, delMaterials, getMaterials, listMaterials, updateMaterials } from '@/api/materials/materials';
|
||||
import { MaterialsForm, MaterialsQuery, MaterialsVO } from '@/api/materials/materials/types';
|
||||
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 { CompanyVO } from '@/api/materials/company/types';
|
||||
import MaterialsDetailDrawer from '@/views/materials/materials/component/MaterialsDetailDrawer.vue';
|
||||
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
const { sys_normal_disable, materials_file_type } = toRefs<any>(proxy?.useDict('sys_normal_disable', 'materials_file_type'));
|
||||
// 获取用户 store
|
||||
const userStore = useUserStoreHook();
|
||||
// 从 store 中获取项目列表和当前选中的项目
|
||||
const currentProject = computed(() => userStore.selectedProject);
|
||||
const materialsList = ref<MaterialsVO[]>([]);
|
||||
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 materialsFormRef = ref<ElFormInstance>();
|
||||
|
||||
const dialog = reactive<DialogOption>({
|
||||
visible: false,
|
||||
title: ''
|
||||
});
|
||||
|
||||
const initFormData: MaterialsForm = {
|
||||
id: undefined,
|
||||
materialsName: undefined,
|
||||
companyId: undefined,
|
||||
projectId: currentProject.value?.id,
|
||||
typeSpecificationName: undefined,
|
||||
fileOssIdMap: undefined,
|
||||
usePart: undefined,
|
||||
weightId: undefined,
|
||||
remark: undefined,
|
||||
quantityCount: undefined,
|
||||
status: undefined
|
||||
};
|
||||
const data = reactive<PageData<MaterialsForm, MaterialsQuery>>({
|
||||
form: { ...initFormData },
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
materialsName: undefined,
|
||||
companyId: undefined,
|
||||
projectId: currentProject.value?.id,
|
||||
typeSpecificationName: undefined,
|
||||
fileOssIdMap: undefined,
|
||||
usePart: undefined,
|
||||
weightId: undefined,
|
||||
quantityCount: undefined,
|
||||
status: undefined,
|
||||
params: {}
|
||||
},
|
||||
rules: {
|
||||
id: [{ required: true, message: '主键id不能为空', trigger: 'blur' }]
|
||||
}
|
||||
});
|
||||
|
||||
const { queryParams, form, rules } = toRefs(data);
|
||||
const companyOptions = ref([]);
|
||||
|
||||
/** 查询材料名称列表 */
|
||||
const getList = async () => {
|
||||
loading.value = true;
|
||||
const res = await listMaterials(queryParams.value);
|
||||
materialsList.value = res.rows;
|
||||
total.value = res.total;
|
||||
loading.value = false;
|
||||
};
|
||||
|
||||
/** 获取当前项目下的公司列表 */
|
||||
const getCompanyList = async () => {
|
||||
loading.value = true;
|
||||
const companyRes = await listCompany({
|
||||
pageNum: 1,
|
||||
pageSize: 1000,
|
||||
projectId: currentProject.value?.id
|
||||
});
|
||||
companyOptions.value = companyRes.rows.map((company: CompanyVO) => ({
|
||||
value: company.id,
|
||||
label: company.companyName
|
||||
}));
|
||||
loading.value = false;
|
||||
};
|
||||
|
||||
/** 取消按钮 */
|
||||
const cancel = () => {
|
||||
reset();
|
||||
dialog.visible = false;
|
||||
};
|
||||
|
||||
/** 表单重置 */
|
||||
const reset = () => {
|
||||
form.value = { ...initFormData };
|
||||
materialsFormRef.value?.resetFields();
|
||||
};
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
const handleQuery = () => {
|
||||
queryParams.value.pageNum = 1;
|
||||
getList();
|
||||
};
|
||||
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value?.resetFields();
|
||||
handleQuery();
|
||||
};
|
||||
|
||||
/** 多选框选中数据 */
|
||||
const handleSelectionChange = (selection: MaterialsVO[]) => {
|
||||
ids.value = selection.map((item) => item.id);
|
||||
single.value = selection.length != 1;
|
||||
multiple.value = !selection.length;
|
||||
};
|
||||
|
||||
/** 展开材料详情抽屉操作 */
|
||||
const showDetailDrawer = ref<boolean>(false);
|
||||
const handleShowDrawer = (row?: MaterialsVO) => {
|
||||
currentMaterialsId.value = row.id;
|
||||
showDetailDrawer.value = true;
|
||||
};
|
||||
|
||||
/** 新增按钮操作 */
|
||||
const handleAdd = () => {
|
||||
reset();
|
||||
dialog.visible = true;
|
||||
dialog.title = '添加材料名称';
|
||||
};
|
||||
|
||||
/** 修改按钮操作 */
|
||||
const handleUpdate = async (row?: MaterialsVO) => {
|
||||
reset();
|
||||
const _id = row?.id || ids.value[0];
|
||||
const res = await getMaterials(_id);
|
||||
Object.assign(form.value, res.data);
|
||||
ossIdMap.value = res.data.fileOssMap ?? { '0': '' };
|
||||
dialog.visible = true;
|
||||
dialog.title = '修改材料名称';
|
||||
};
|
||||
|
||||
/** 提交按钮 */
|
||||
const submitForm = () => {
|
||||
materialsFormRef.value?.validate(async (valid: boolean) => {
|
||||
if (valid) {
|
||||
buttonLoading.value = true;
|
||||
form.value.projectId = currentProject.value?.id;
|
||||
if (form.value.id) {
|
||||
await updateMaterials({
|
||||
...form.value,
|
||||
fileOssIdMap: ossIdMap.value
|
||||
}).finally(() => (buttonLoading.value = false));
|
||||
} else {
|
||||
await addMaterials({
|
||||
...form.value,
|
||||
fileOssIdMap: ossIdMap.value
|
||||
}).finally(() => (buttonLoading.value = false));
|
||||
}
|
||||
proxy?.$modal.msgSuccess('操作成功');
|
||||
dialog.visible = false;
|
||||
await getList();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/** 删除按钮操作 */
|
||||
const handleDelete = async (row?: MaterialsVO) => {
|
||||
const _ids = row?.id || ids.value;
|
||||
await proxy?.$modal.confirm('是否确认删除材料名称编号为"' + _ids + '"的数据项？').finally(() => (loading.value = false));
|
||||
await delMaterials(_ids);
|
||||
proxy?.$modal.msgSuccess('删除成功');
|
||||
await getList();
|
||||
};
|
||||
|
||||
/** 导出按钮操作 */
|
||||
const handleExport = () => {
|
||||
proxy?.download(
|
||||
'materials/materials/export',
|
||||
{
|
||||
...queryParams.value
|
||||
},
|
||||
`materials_${new Date().getTime()}.xlsx`
|
||||
);
|
||||
};
|
||||
|
||||
const dialogRef = ref();
|
||||
const currentMaterialsId = ref<number | string>(0);
|
||||
const handleAddMaterialsInventory = (row?: MaterialsVO) => {
|
||||
currentMaterialsId.value = row.id ?? 0;
|
||||
dialogRef.value.openDialog();
|
||||
};
|
||||
|
||||
/** 文件更新操作 */
|
||||
const ossIdMap = ref<Record<string, string>>({});
|
||||
const handleOssUpdate = (ossId: string, value: string) => {
|
||||
// 判断 ossId 是否为空
|
||||
if (ossId === '' || ossId === null || ossId === undefined) {
|
||||
delete ossIdMap.value[value]; // 删除 key
|
||||
} else {
|
||||
ossIdMap.value[value] = ossId; // 直接赋值
|
||||
}
|
||||
};
|
||||
|
||||
//监听项目id刷新数据
|
||||
const listeningProject = watch(
|
||||
() => currentProject.value?.id,
|
||||
(nid, oid) => {
|
||||
queryParams.value.projectId = nid;
|
||||
form.value.projectId = nid;
|
||||
getList();
|
||||
}
|
||||
);
|
||||
|
||||
onUnmounted(() => {
|
||||
listeningProject();
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
getCompanyList();
|
||||
});
|
||||
</script>
|
||||
499
src/views/materials/materialsEquipment/materialIssue/index.vue
Normal file
499
src/views/materials/materialsEquipment/materialIssue/index.vue
Normal file
@ -0,0 +1,499 @@
|
||||
<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="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>
|
||||
<el-form-item label="订货单位" prop="orderingUnit">
|
||||
<el-input v-model="queryParams.orderingUnit" placeholder="请输入订货单位" clearable @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="供货单位" prop="supplierUnit">
|
||||
<el-input v-model="queryParams.supplierUnit" placeholder="请输入供货单位" clearable @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="领料单位" prop="issueUnit">
|
||||
<el-input v-model="queryParams.issueUnit" placeholder="请输入领料单位" clearable @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="保管单位" prop="storageUnit">
|
||||
<el-input v-model="queryParams.storageUnit" 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="['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 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" />
|
||||
<el-table-column label="领料单位" align="center" prop="issueUnit" />
|
||||
<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">
|
||||
<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>
|
||||
</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
|
||||
:close-on-click-modal="false"
|
||||
:close-on-press-escape="false"
|
||||
:title="dialog.title"
|
||||
v-model="dialog.visible"
|
||||
width="800px"
|
||||
append-to-body
|
||||
>
|
||||
<el-form ref="materialIssueFormRef" :model="form" :rules="rules" label-width="110px">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="表单编号" prop="formCode">
|
||||
<el-input v-model="form.formCode" 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="materialName">
|
||||
<el-input v-model="form.materialName" placeholder="请输入设备材料名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :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="supplierUnit">
|
||||
<el-input v-model="form.supplierUnit" placeholder="请输入供货单位" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="领料单位" prop="issueUnit">
|
||||
<el-input v-model="form.issueUnit" placeholder="请输入领料单位" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="保管单位" prop="storageUnit">
|
||||
<el-input v-model="form.storageUnit" placeholder="请输入保管单位" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="缺陷情况" prop="defectDescription">
|
||||
<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>
|
||||
</div>
|
||||
<div v-for="(item, index) in form.itemList" :key="index" class="detail-item">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
:label="index === 0 ? '名称' : ''"
|
||||
:prop="`itemList.${index}.name`"
|
||||
:rules="[{ required: true, message: '名称不能为空', trigger: 'blur' }]"
|
||||
>
|
||||
<el-input v-model="item.name" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
:label="index === 0 ? '规格' : ''"
|
||||
:prop="`itemList.${index}.specification`"
|
||||
:rules="[{ required: true, message: '规格不能为空', trigger: 'blur' }]"
|
||||
>
|
||||
<el-input v-model="item.specification" placeholder="请输入规格" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
:label="index === 0 ? '单位' : ''"
|
||||
:prop="`itemList.${index}.unit`"
|
||||
:rules="[{ required: true, message: '单位不能为空', trigger: 'blur' }]"
|
||||
>
|
||||
<el-input v-model="item.unit" placeholder="请输入单位" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
:label="index === 0 ? '库存' : ''"
|
||||
:prop="`itemList.${index}.stockQuantity`"
|
||||
:rules="[{ required: true, message: '库存不能为空', trigger: 'blur' }]"
|
||||
>
|
||||
<el-input v-model="item.stockQuantity" placeholder="请输入库存" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<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 ? '剩余' : ''"
|
||||
:prop="`itemList.${index}.remainingQuantity`"
|
||||
:rules="[{ required: true, message: '剩余数量不能为空', trigger: 'blur' }]"
|
||||
>
|
||||
<el-input v-model="item.remainingQuantity" placeholder="请输入剩余数量" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item :label="index === 0 ? '备注' : ''" prop="remark">
|
||||
<el-input v-model="item.remark" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
</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>
|
||||
</div>
|
||||
</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" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="出厂报告文件" prop="reportCountFileId">
|
||||
<file-upload :isShowTip="false" 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" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="厂家资质文件" prop="licenseCountFileId">
|
||||
<file-upload :isShowTip="false" 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">
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" type="textarea" 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>
|
||||
<wordllssue ref="wordllssueRef"></wordllssue>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="MaterialIssue" lang="ts">
|
||||
import { listMaterialIssue, getMaterialIssue, delMaterialIssue, addMaterialIssue, updateMaterialIssue } 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';
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
// 获取用户 store
|
||||
const userStore = useUserStoreHook();
|
||||
// 从 store 中获取项目列表和当前选中的项目
|
||||
const currentProject = computed(() => userStore.selectedProject);
|
||||
|
||||
const materialIssueList = ref<MaterialIssueVO[]>([]);
|
||||
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 wordllssueRef = ref<InstanceType<typeof wordllssue>>();
|
||||
const queryFormRef = ref<ElFormInstance>();
|
||||
const materialIssueFormRef = ref<ElFormInstance>();
|
||||
|
||||
const dialog = reactive<DialogOption>({
|
||||
visible: false,
|
||||
title: ''
|
||||
});
|
||||
|
||||
// 定义一个函数来生成初始表单数据
|
||||
const getInitFormData = () => {
|
||||
return {
|
||||
id: undefined,
|
||||
projectId: currentProject.value?.id,
|
||||
materialSource: '1',
|
||||
formCode: undefined,
|
||||
projectName: undefined,
|
||||
materialName: undefined,
|
||||
orderingUnit: undefined,
|
||||
supplierUnit: undefined,
|
||||
issueUnit: undefined,
|
||||
storageUnit: undefined,
|
||||
defectDescription: undefined,
|
||||
certCount: undefined,
|
||||
certCountFileId: undefined,
|
||||
reportCount: undefined,
|
||||
reportCountFileId: undefined,
|
||||
techDocCount: undefined,
|
||||
techDocCountFileId: undefined,
|
||||
licenseCount: undefined,
|
||||
licenseCountFileId: undefined,
|
||||
remark: undefined,
|
||||
itemList: [
|
||||
{
|
||||
id: undefined,
|
||||
specification: undefined,
|
||||
unit: undefined,
|
||||
stockQuantity: undefined,
|
||||
issuedQuantity: undefined,
|
||||
remainingQuantity: undefined,
|
||||
name: undefined,
|
||||
remark: undefined
|
||||
}
|
||||
]
|
||||
};
|
||||
};
|
||||
const data = reactive<PageData<MaterialIssueForm, MaterialIssueQuery>>({
|
||||
form: getInitFormData(),
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
projectId: currentProject.value?.id,
|
||||
materialSource: '1',
|
||||
formCode: undefined,
|
||||
projectName: undefined,
|
||||
materialName: undefined,
|
||||
orderingUnit: undefined,
|
||||
supplierUnit: undefined,
|
||||
issueUnit: undefined,
|
||||
storageUnit: undefined,
|
||||
defectDescription: undefined,
|
||||
params: {}
|
||||
},
|
||||
rules: {
|
||||
id: [{ required: true, message: '主键id不能为空', trigger: 'blur' }]
|
||||
}
|
||||
});
|
||||
|
||||
const { queryParams, form, rules } = toRefs(data);
|
||||
|
||||
/** 查询物料领料单列表 */
|
||||
const getList = async () => {
|
||||
loading.value = true;
|
||||
const res = await listMaterialIssue(queryParams.value);
|
||||
materialIssueList.value = res.rows;
|
||||
total.value = res.total;
|
||||
loading.value = false;
|
||||
};
|
||||
|
||||
/** 取消按钮 */
|
||||
const cancel = () => {
|
||||
reset();
|
||||
dialog.visible = false;
|
||||
};
|
||||
|
||||
/** 表单重置 */
|
||||
const reset = () => {
|
||||
form.value = getInitFormData();
|
||||
materialIssueFormRef.value?.resetFields();
|
||||
};
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
const handleQuery = () => {
|
||||
queryParams.value.pageNum = 1;
|
||||
getList();
|
||||
};
|
||||
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value?.resetFields();
|
||||
handleQuery();
|
||||
};
|
||||
|
||||
/** 多选框选中数据 */
|
||||
const handleSelectionChange = (selection: MaterialIssueVO[]) => {
|
||||
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?: 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 = '修改物料领料单';
|
||||
};
|
||||
|
||||
/** 提交按钮 */
|
||||
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));
|
||||
}
|
||||
proxy?.$modal.msgSuccess('操作成功');
|
||||
dialog.visible = false;
|
||||
await getList();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 添加数量验收条目
|
||||
const addItem = () => {
|
||||
form.value.itemList.push({
|
||||
id: undefined,
|
||||
specification: undefined,
|
||||
unit: undefined,
|
||||
stockQuantity: undefined,
|
||||
issuedQuantity: undefined,
|
||||
remainingQuantity: undefined,
|
||||
name: undefined,
|
||||
remark: undefined
|
||||
});
|
||||
};
|
||||
|
||||
// 删除数量验收条目
|
||||
const removeItem = (index: number) => {
|
||||
if (form.value.itemList.length > 1) {
|
||||
form.value.itemList.splice(index, 1);
|
||||
} 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();
|
||||
};
|
||||
const handleView = (row) => {
|
||||
// 查看详情
|
||||
wordllssueRef.value?.openDialog(row);
|
||||
};
|
||||
onMounted(() => {
|
||||
getList();
|
||||
});
|
||||
//监听项目id刷新数据
|
||||
const listeningProject = watch(
|
||||
() => currentProject.value?.id,
|
||||
(nid, oid) => {
|
||||
queryParams.value.projectId = nid;
|
||||
form.value.projectId = nid;
|
||||
getList();
|
||||
}
|
||||
);
|
||||
|
||||
onUnmounted(() => {
|
||||
listeningProject();
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.detail {
|
||||
border-bottom: 1px solid #ececec;
|
||||
border-top: 1px solid #ececec;
|
||||
margin: 10px 0;
|
||||
padding: 10px 0;
|
||||
|
||||
&-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
font-weight: bold;
|
||||
color: #1eaaff;
|
||||
}
|
||||
|
||||
&-item {
|
||||
padding: 10px;
|
||||
margin-bottom: 15px;
|
||||
border-radius: 4px;
|
||||
background-color: #f8f9fa;
|
||||
position: relative;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding-top: 6px;
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 922 B |
@ -0,0 +1,301 @@
|
||||
<template>
|
||||
<el-dialog v-model="isShowDialog" title="变更单详情" draggable width="60vw" :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="btn-item" @click="onLoad">
|
||||
<img src="./icon/down.png" />
|
||||
<span>导出</span>
|
||||
</div>
|
||||
</div>
|
||||
<el-form ref="formRef" :model="formData" label-width="100px" id="formContent" style="width: 75%; margin-left: 10%">
|
||||
<div class="table-content" id="table-content">
|
||||
<el-row class="mb20" style="display: flex; justify-content: center">
|
||||
<h2>设计材料设备领料单</h2>
|
||||
</el-row>
|
||||
<el-row class="mb10" style="display: flex; justify-content: space-between">
|
||||
<div class="head-text">
|
||||
<span>工程名称：</span>
|
||||
<span>{{ formData.projectName }}</span>
|
||||
</div>
|
||||
<div class="head-text">
|
||||
<span>编号：</span>
|
||||
<span>{{ formData.formCode }}</span>
|
||||
</div>
|
||||
</el-row>
|
||||
<table style="width: 100%" border="1" cellspacing="1">
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="2">设备材料名称</th>
|
||||
<td class="th-bg" colspan="2">{{ formData.materialName }}</td>
|
||||
<th colspan="2">规格及数量</th>
|
||||
<td class="th-bg" colspan="2">见下表</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th colspan="2">供货单位</th>
|
||||
<td class="th-bg" colspan="2">{{ formData.supplierUnit }}</td>
|
||||
<th colspan="2">订货单位</th>
|
||||
<td class="th-bg" colspan="2">{{ formData.orderingUnit }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="2">领料单位</th>
|
||||
<td class="th-bg" colspan="2">{{ formData.placeholder }}</td>
|
||||
<th colspan="2">保管单位</th>
|
||||
<td class="th-bg" colspan="2">{{ formData.storageUnit }}</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th width="150" colspan="8">数量验收</th>
|
||||
</tr>
|
||||
</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>
|
||||
</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>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td colspan="7">
|
||||
<div style="margin-bottom: 10px;">缺陷情况:</div>
|
||||
{{ formData.defectDescription }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody>
|
||||
<tr>
|
||||
<!-- <th width="150"></th> -->
|
||||
<td colspan="8">
|
||||
<span>是否附带以下随机资料</span>
|
||||
<div class="file_detail">
|
||||
<span>(1) 合格证 {{ formData.certCountFile ? formData.certCountFile.length : 0 }} 份</span>
|
||||
<span>(2) 出厂报告 {{ formData.reportCountFileId ? formData.reportCountFileId.length : 0 }} 份</span>
|
||||
<span>(3) 技术资料文件 {{ formData.techDocCountFileId ? formData.techDocCountFileId.length : 0 }} 份</span>
|
||||
<span>(4) 厂家资质文件 {{ formData.licenseCountFileId ? formData.licenseCountFileId.length : 0 }} 份</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from 'vue';
|
||||
import { getMaterialIssue } from '@/api/materials/materialIssue';
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
import { downLoadOss } from '@/api/system/oss';
|
||||
// 响应式状态
|
||||
const isShowDialog = ref(false);
|
||||
const initFormData = {
|
||||
id: undefined,
|
||||
materialSource: '1',
|
||||
formCode: undefined,
|
||||
projectName: undefined,
|
||||
materialName: undefined,
|
||||
orderingUnit: undefined,
|
||||
supplierUnit: undefined,
|
||||
issueUnit: undefined,
|
||||
storageUnit: undefined,
|
||||
defectDescription: undefined,
|
||||
certCount: undefined,
|
||||
certCountFileId: undefined,
|
||||
reportCount: undefined,
|
||||
reportCountFileId: undefined,
|
||||
techDocCount: undefined,
|
||||
techDocCountFileId: undefined,
|
||||
licenseCount: undefined,
|
||||
licenseCountFileId: undefined,
|
||||
remark: undefined,
|
||||
itemList: [
|
||||
{
|
||||
id: undefined,
|
||||
specification: undefined,
|
||||
unit: undefined,
|
||||
stockQuantity: undefined,
|
||||
issuedQuantity: undefined,
|
||||
remainingQuantity: undefined,
|
||||
name: undefined,
|
||||
remark: undefined
|
||||
}
|
||||
]
|
||||
};
|
||||
const data = reactive({
|
||||
formData: { ...initFormData }
|
||||
});
|
||||
const design_change_reason_type = ref([]);
|
||||
const { formData } = toRefs(data);
|
||||
// 打开弹窗
|
||||
const openDialog = (row?: any, types) => {
|
||||
resetForm();
|
||||
design_change_reason_type.value = types;
|
||||
if (row?.id) {
|
||||
getInfos(row.id, types);
|
||||
}
|
||||
isShowDialog.value = true;
|
||||
};
|
||||
// 获取详情数据
|
||||
const getInfos = async (id: string, types) => {
|
||||
const res = await getMaterialIssue(id);
|
||||
Object.assign(formData.value, res.data);
|
||||
// 数据处理
|
||||
if (formData.value.changeReason) {
|
||||
let arr = formData.value.changeReason.split(',');
|
||||
var changeReason = types.filter((item) => arr.includes(item.value.toString())).map((item) => item.label);
|
||||
formData.value.changeReason = changeReason.join('，');
|
||||
}
|
||||
};
|
||||
// 重置表单
|
||||
const resetForm = () => {
|
||||
Object.keys(formData.value).forEach((key) => {
|
||||
formData[key] = undefined;
|
||||
});
|
||||
};
|
||||
// 下载文件
|
||||
const onOpen = (path: string) => {
|
||||
window.open(path, '_blank');
|
||||
};
|
||||
// 导出
|
||||
const onLoad = async () => {
|
||||
await downLoadOss({ id: formData.value.id }, '/materials/materialIssue/export/word', '设计材料设备领料单.zip');
|
||||
};
|
||||
|
||||
// 关闭弹窗
|
||||
const closeDialog = () => {
|
||||
isShowDialog.value = false;
|
||||
};
|
||||
|
||||
// 暴露方法给父组件
|
||||
defineExpose({
|
||||
openDialog,
|
||||
closeDialog
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.pic-block {
|
||||
margin-right: 8px;
|
||||
}
|
||||
.file-block {
|
||||
width: 100%;
|
||||
border: 1px solid var(--el-border-color);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: var(--el-transition-duration-fast);
|
||||
margin-bottom: 5px;
|
||||
padding: 3px 6px;
|
||||
}
|
||||
.ml-2 {
|
||||
margin-right: 5px;
|
||||
}
|
||||
::v-deep .el-icon svg {
|
||||
height: 100% !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
::v-deep .el-step__icon-inner {
|
||||
font-size: 14px !important;
|
||||
font-weight: 700 !important;
|
||||
}
|
||||
.dialog-footer {
|
||||
height: 100px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
position: absolute;
|
||||
top: 14%;
|
||||
right: 10%;
|
||||
background: #fff;
|
||||
box-shadow: 0px 0px 10px #ddd;
|
||||
text-align: center;
|
||||
padding: 20px 10px;
|
||||
.btn-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
> span {
|
||||
padding-top: 5px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
.file_detail{
|
||||
|
||||
>span{
|
||||
width: 40%;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse; //合并为一个单一的边框
|
||||
border-color: rgba(199, 199, 199, 1); //边框颜色按实际自定义即可
|
||||
}
|
||||
thead {
|
||||
tr {
|
||||
th {
|
||||
background-color: rgba(247, 247, 247, 1); //设置表格标题背景色
|
||||
height: 35px; //设置单元格最小高度
|
||||
text-align: center;
|
||||
letter-spacing: 5px;
|
||||
padding: 15px;
|
||||
}
|
||||
td {
|
||||
text-align: left;
|
||||
height: 35px; //设置单元格最小高度
|
||||
padding: 15px;
|
||||
}
|
||||
.th-bg {
|
||||
background-color: rgba(247, 247, 247, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
tbody {
|
||||
tr {
|
||||
td {
|
||||
text-align: left;
|
||||
height: 40px; //设置单元格最小高度
|
||||
padding: 15px;
|
||||
}
|
||||
th {
|
||||
height: 35px; //设置单元格最小高度
|
||||
text-align: center;
|
||||
letter-spacing: 5px;
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.table-content {
|
||||
box-shadow: 0px 0px 10px #ddd;
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
608
src/views/materials/materialsEquipment/materialReceive/index.vue
Normal file
608
src/views/materials/materialsEquipment/materialReceive/index.vue
Normal file
@ -0,0 +1,608 @@
|
||||
<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="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>
|
||||
<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>
|
||||
<el-form-item label="供货单位" prop="supplierUnit">
|
||||
<el-input v-model="queryParams.supplierUnit" 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="['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 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="contractName" />
|
||||
<el-table-column label="订货单位" align="center" prop="orderingUnit" />
|
||||
<el-table-column label="供货单位" align="center" prop="supplierUnit" />
|
||||
<el-table-column label="设备材料入库/移交" align="center" prop="storageType">
|
||||
<template #default="scope">
|
||||
<dict-tag :options="storage_type" :value="scope.row.storageType ? scope.row.storageType.split(',') : []" />
|
||||
</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-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>
|
||||
</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-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-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="表单编号" prop="formCode">
|
||||
<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>
|
||||
<el-col :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-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-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="合同名称" prop="contractName">
|
||||
<el-input v-model="form.contractName" placeholder="请输入合同名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="缺陷情况" prop="defectDescription">
|
||||
<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> -->
|
||||
</div>
|
||||
<div v-for="(item, index) in form.itemList" :key="index" class="detail-item">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="名称" :prop="`itemList.${index}.name`" :rules="{ required: true, message: '名称不能为空', trigger: 'blur' }">
|
||||
<el-input v-model="item.name" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="规格"
|
||||
:prop="`itemList.${index}.specification`"
|
||||
:rules="{ required: true, message: '规格不能为空', trigger: 'blur' }"
|
||||
>
|
||||
<el-input 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 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 type="number" v-model="item.quantity" placeholder="请输入数量" />
|
||||
</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>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="缺件"
|
||||
:prop="`itemList.${index}.shortageQuantity`"
|
||||
:rules="{ required: true, message: '缺件数量不能为空', trigger: 'blur' }"
|
||||
>
|
||||
<el-input type="number" 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-form-item>
|
||||
</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>
|
||||
</div>
|
||||
</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" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="出厂报告文件" prop="reportCountFileId">
|
||||
<file-upload :isShowTip="false" 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" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="厂家资质文件" prop="licenseCountFileId">
|
||||
<file-upload :isShowTip="false" 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">
|
||||
<el-form-item label="设备材料入库/移交" prop="storageType">
|
||||
<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-input v-model="form.remark" type="textarea" 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>
|
||||
<wordllReceive ref="wordllReceiveRef"></wordllReceive>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="MaterialReceive" lang="ts">
|
||||
import {
|
||||
listMaterialReceive,
|
||||
getMaterialReceive,
|
||||
delMaterialReceive,
|
||||
addMaterialReceive,
|
||||
updateMaterialReceive
|
||||
} 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';
|
||||
|
||||
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>>();
|
||||
const materialReceiveList = ref<MaterialReceiveVO[]>([]);
|
||||
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 materialReceiveFormRef = ref<ElFormInstance>();
|
||||
const purchaseDocList = ref([]); //物资采购单
|
||||
const purchaseMap = new Map();
|
||||
const dialog = reactive<DialogOption>({
|
||||
visible: false,
|
||||
title: ''
|
||||
});
|
||||
const getInitFormData = () => {
|
||||
return {
|
||||
id: undefined,
|
||||
projectId: currentProject.value?.id,
|
||||
materialSource: '1',
|
||||
formCode: undefined,
|
||||
projectName: undefined,
|
||||
materialName: undefined,
|
||||
contractName: undefined,
|
||||
orderingUnit: undefined,
|
||||
supplierUnit: undefined,
|
||||
defectDescription: undefined,
|
||||
certCount: undefined,
|
||||
certCountFileId: undefined,
|
||||
reportCount: undefined,
|
||||
reportCountFileId: undefined,
|
||||
techDocCount: undefined,
|
||||
techDocCountFileId: undefined,
|
||||
licenseCount: undefined,
|
||||
licenseCountFileId: undefined,
|
||||
storageType: [],
|
||||
remark: undefined,
|
||||
docId: undefined,
|
||||
docCode: undefined,
|
||||
itemList: [
|
||||
{
|
||||
name: undefined,
|
||||
specification: undefined,
|
||||
unit: undefined,
|
||||
quantity: undefined,
|
||||
acceptedQuantity: undefined,
|
||||
shortageQuantity: undefined,
|
||||
remark: undefined
|
||||
}
|
||||
]
|
||||
};
|
||||
};
|
||||
const initFormData: MaterialReceiveForm = {};
|
||||
const data = reactive({
|
||||
form: getInitFormData(),
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
projectId: currentProject.value?.id,
|
||||
materialSource: '1',
|
||||
formCode: undefined,
|
||||
projectName: undefined,
|
||||
materialName: undefined,
|
||||
contractName: undefined,
|
||||
orderingUnit: undefined,
|
||||
supplierUnit: undefined,
|
||||
params: {}
|
||||
},
|
||||
rules: {}
|
||||
});
|
||||
|
||||
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;
|
||||
};
|
||||
|
||||
/** 取消按钮 */
|
||||
const cancel = () => {
|
||||
reset();
|
||||
dialog.visible = false;
|
||||
};
|
||||
|
||||
/** 表单重置 */
|
||||
const reset = () => {
|
||||
form.value = getInitFormData();
|
||||
materialReceiveFormRef.value?.resetFields();
|
||||
};
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
const handleQuery = () => {
|
||||
queryParams.value.pageNum = 1;
|
||||
getList();
|
||||
};
|
||||
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value?.resetFields();
|
||||
handleQuery();
|
||||
};
|
||||
|
||||
/** 多选框选中数据 */
|
||||
const handleSelectionChange = (selection: MaterialReceiveVO[]) => {
|
||||
ids.value = selection.map((item) => item.id);
|
||||
single.value = selection.length != 1;
|
||||
multiple.value = !selection.length;
|
||||
};
|
||||
|
||||
/** 新增按钮操作 */
|
||||
const handleAdd = () => {
|
||||
reset();
|
||||
dialog.visible = true;
|
||||
dialog.title = '添加物料接收单';
|
||||
// 为初始条目添加监听
|
||||
if (form.value.itemList.length > 0) {
|
||||
watchItemChanges(0);
|
||||
}
|
||||
};
|
||||
|
||||
/** 修改按钮操作 */
|
||||
const handleUpdate = async (row?: MaterialReceiveVO) => {
|
||||
reset();
|
||||
const _id = row?.id || ids.value[0];
|
||||
const res = await getMaterialReceive(_id);
|
||||
Object.assign(form.value, res.data);
|
||||
if (form.value.storageType && form.value.storageType.length) {
|
||||
form.value.storageType = form.value.storageType.split(',');
|
||||
} else {
|
||||
form.value.storageType = [];
|
||||
}
|
||||
|
||||
// 为每个条目添加监听
|
||||
form.value.itemList.forEach((_, index) => {
|
||||
watchItemChanges(index);
|
||||
});
|
||||
|
||||
dialog.visible = true;
|
||||
dialog.title = '修改物料接收单';
|
||||
};
|
||||
|
||||
/** 提交按钮 */
|
||||
const submitForm = () => {
|
||||
materialReceiveFormRef.value?.validate(async (valid: boolean) => {
|
||||
if (valid) {
|
||||
buttonLoading.value = true;
|
||||
form.value.storageType = form.value.storageType.join(',');
|
||||
if (form.value.id) {
|
||||
await updateMaterialReceive(form.value).finally(() => (buttonLoading.value = false));
|
||||
} else {
|
||||
await addMaterialReceive(form.value).finally(() => (buttonLoading.value = false));
|
||||
}
|
||||
proxy?.$modal.msgSuccess('操作成功');
|
||||
dialog.visible = false;
|
||||
await getList();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/** 删除按钮操作 */
|
||||
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();
|
||||
};
|
||||
|
||||
// 添加数量验收条目
|
||||
const addItem = () => {
|
||||
const newItem = {
|
||||
name: undefined,
|
||||
specification: undefined,
|
||||
unit: undefined,
|
||||
quantity: undefined,
|
||||
acceptedQuantity: undefined,
|
||||
shortageQuantity: undefined,
|
||||
remark: undefined
|
||||
};
|
||||
form.value.itemList.push(newItem);
|
||||
// 监听新条目数据变化
|
||||
watchItemChanges(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 removeItem = (index: number) => {
|
||||
if (form.value.itemList.length > 1) {
|
||||
form.value.itemList.splice(index, 1);
|
||||
} else {
|
||||
proxy?.$modal.msgWarning('至少需要保留一条数量验收记录');
|
||||
}
|
||||
};
|
||||
|
||||
const handleView = (row) => {
|
||||
// 查看详情
|
||||
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) {
|
||||
purchaseDocList.value.forEach((item) => {
|
||||
purchaseMap.set(item.id, item);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 通过采购单获取需求信息
|
||||
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);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleSelect = (val) => {
|
||||
// 选择设备
|
||||
let obj = purchaseMap.get(val);
|
||||
getdemandInfo(val);
|
||||
form.value.docCode = obj?.docCode || '';
|
||||
form.value.supplierUnit = obj?.supplier || '';
|
||||
form.value.materialName = obj?.name || '';
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
getlistPurchase();
|
||||
// 为初始条目添加监听
|
||||
if (form.value.itemList.length > 0) {
|
||||
watchItemChanges(0);
|
||||
}
|
||||
});
|
||||
|
||||
// 监听项目id刷新数据
|
||||
const listeningProject = watch(
|
||||
() => currentProject.value?.id,
|
||||
(nid, oid) => {
|
||||
queryParams.value.projectId = nid;
|
||||
form.value.projectId = nid;
|
||||
getList();
|
||||
}
|
||||
);
|
||||
|
||||
onUnmounted(() => {
|
||||
listeningProject();
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.detail {
|
||||
border-bottom: 1px solid #ececec;
|
||||
border-top: 1px solid #ececec;
|
||||
margin: 10px 0;
|
||||
padding: 10px 0;
|
||||
|
||||
&-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
font-weight: bold;
|
||||
color: #1eaaff;
|
||||
}
|
||||
|
||||
&-item {
|
||||
padding: 10px;
|
||||
margin-bottom: 15px;
|
||||
border-radius: 4px;
|
||||
background-color: #f8f9fa;
|
||||
position: relative;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding-top: 6px;
|
||||
}
|
||||
|
||||
.tips {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
margin-left: 8px;
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 922 B |
@ -0,0 +1,290 @@
|
||||
<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="btn-item" @click="onLoad">
|
||||
<img src="./icon/down.png" />
|
||||
<span>导出</span>
|
||||
</div>
|
||||
</div>
|
||||
<el-form ref="formRef" :model="formData" label-width="100px" id="formContent" style="width: 75%; margin-left: 10%">
|
||||
<div class="table-content" id="table-content">
|
||||
<el-row class="mb20" style="display: flex; justify-content: center">
|
||||
<h2>材料设备验收单</h2>
|
||||
</el-row>
|
||||
<el-row class="mb10" style="display: flex; justify-content: space-between">
|
||||
<div class="head-text">
|
||||
<span>工程名称：</span>
|
||||
<span>{{ formData.projectName }}</span>
|
||||
</div>
|
||||
<div class="head-text">
|
||||
<span>编号：</span>
|
||||
<span>{{ formData.formCode }}</span>
|
||||
</div>
|
||||
</el-row>
|
||||
<table style="width: 100%" border="1" cellspacing="1">
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="2">设备材料名称</th>
|
||||
<td class="th-bg" colspan="2">{{ formData.materialName }}</td>
|
||||
<th colspan="2">合同名称</th>
|
||||
<td class="th-bg" colspan="2">{{ formData.contractName }}</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th colspan="2">订货单位</th>
|
||||
<td class="th-bg" colspan="2">{{ formData.orderingUnit }}</td>
|
||||
<th colspan="2">供货单位</th>
|
||||
<td class="th-bg" colspan="2">{{ formData.supplierUnit }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th width="150" colspan="8">数量验收（验收、缺件数量由承包单位填写）</th>
|
||||
</tr>
|
||||
</tbody>
|
||||
<thead>
|
||||
<tr>
|
||||
<td width="150">序号</td>
|
||||
<td width="150">名称</td>
|
||||
<td width="150">规格</td>
|
||||
<td width="150">单位</td>
|
||||
<td width="150">数量</td>
|
||||
<td width="150">验收</td>
|
||||
<td width="150">缺件</td>
|
||||
<td width="150">备注</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(item, i) of formData.itemList" :key="i">
|
||||
<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.quantity }}</td>
|
||||
<td width="150">{{ item.acceptedQuantity }}</td>
|
||||
<td width="150">{{ item.shortageQuantity }}</td>
|
||||
<td width="150">{{ item.remark }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td colspan="7">
|
||||
<div style="margin-bottom: 10px">缺陷情况:</div>
|
||||
{{ formData.defectDescription }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td colspan="8">
|
||||
<span>是否附带以下随机资料</span>
|
||||
<div class="file_detail">
|
||||
<span>(1) 合格证 {{ formData.certCountFile ? formData.certCountFile.length : 0 }} 份</span>
|
||||
<span>(2) 出厂报告 {{ formData.reportCountFileId ? formData.reportCountFileId.length : 0 }} 份</span>
|
||||
<span>(3) 技术资料文件 {{ formData.techDocCountFileId ? formData.techDocCountFileId.length : 0 }} 份</span>
|
||||
<span>(4) 厂家资质文件 {{ formData.licenseCountFileId ? formData.licenseCountFileId.length : 0 }} 份</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from 'vue';
|
||||
import { getMaterialReceive } from '@/api/materials/materialReceive';
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
import { downLoadOss } from '@/api/system/oss';
|
||||
// 响应式状态
|
||||
const isShowDialog = ref(false);
|
||||
const initFormData = {
|
||||
id: undefined,
|
||||
materialSource: '1',
|
||||
formCode: undefined,
|
||||
projectName: undefined,
|
||||
materialName: undefined,
|
||||
contractName: undefined,
|
||||
orderingUnit: undefined,
|
||||
supplierUnit: undefined,
|
||||
defectDescription: undefined,
|
||||
certCount: undefined,
|
||||
certCountFileId: undefined,
|
||||
reportCount: undefined,
|
||||
reportCountFileId: undefined,
|
||||
techDocCount: undefined,
|
||||
techDocCountFileId: undefined,
|
||||
licenseCount: undefined,
|
||||
licenseCountFileId: undefined,
|
||||
storageType: [],
|
||||
remark: undefined,
|
||||
itemList: [
|
||||
{
|
||||
name: undefined,
|
||||
specification: undefined,
|
||||
unit: undefined,
|
||||
quantity: undefined,
|
||||
acceptedQuantity: undefined,
|
||||
shortageQuantity: undefined,
|
||||
remark: undefined
|
||||
}
|
||||
]
|
||||
};
|
||||
const data = reactive({
|
||||
formData: { ...initFormData }
|
||||
});
|
||||
const design_change_reason_type = ref([]);
|
||||
const { formData } = toRefs(data);
|
||||
// 打开弹窗
|
||||
const openDialog = (row?: any, types) => {
|
||||
resetForm();
|
||||
design_change_reason_type.value = types;
|
||||
if (row?.id) {
|
||||
getInfos(row.id, types);
|
||||
}
|
||||
isShowDialog.value = true;
|
||||
};
|
||||
// 获取详情数据
|
||||
const getInfos = async (id: string, types) => {
|
||||
const res = await getMaterialReceive(id);
|
||||
Object.assign(formData.value, res.data);
|
||||
// 数据处理
|
||||
if (formData.value.changeReason) {
|
||||
let arr = formData.value.changeReason.split(',');
|
||||
var changeReason = types.filter((item) => arr.includes(item.value.toString())).map((item) => item.label);
|
||||
formData.value.changeReason = changeReason.join('，');
|
||||
}
|
||||
};
|
||||
// 重置表单
|
||||
const resetForm = () => {
|
||||
Object.keys(formData.value).forEach((key) => {
|
||||
formData[key] = undefined;
|
||||
});
|
||||
};
|
||||
// 下载文件
|
||||
const onOpen = (path: string) => {
|
||||
window.open(path, '_blank');
|
||||
};
|
||||
// 导出
|
||||
const onLoad = async () => {
|
||||
await downLoadOss({ id: formData.value.id }, '/materials/materialReceive/export/word', '材料设备验收单.zip');
|
||||
};
|
||||
|
||||
// 关闭弹窗
|
||||
const closeDialog = () => {
|
||||
isShowDialog.value = false;
|
||||
};
|
||||
|
||||
// 暴露方法给父组件
|
||||
defineExpose({
|
||||
openDialog,
|
||||
closeDialog
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.pic-block {
|
||||
margin-right: 8px;
|
||||
}
|
||||
.file-block {
|
||||
width: 100%;
|
||||
border: 1px solid var(--el-border-color);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: var(--el-transition-duration-fast);
|
||||
margin-bottom: 5px;
|
||||
padding: 3px 6px;
|
||||
}
|
||||
.ml-2 {
|
||||
margin-right: 5px;
|
||||
}
|
||||
::v-deep .el-icon svg {
|
||||
height: 100% !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
::v-deep .el-step__icon-inner {
|
||||
font-size: 14px !important;
|
||||
font-weight: 700 !important;
|
||||
}
|
||||
.dialog-footer {
|
||||
height: 100px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
position: absolute;
|
||||
top: 14%;
|
||||
right: 10%;
|
||||
background: #fff;
|
||||
box-shadow: 0px 0px 10px #ddd;
|
||||
text-align: center;
|
||||
padding: 20px 10px;
|
||||
.btn-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
> span {
|
||||
padding-top: 5px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
.file_detail {
|
||||
> span {
|
||||
width: 40%;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse; //合并为一个单一的边框
|
||||
border-color: rgba(199, 199, 199, 1); //边框颜色按实际自定义即可
|
||||
}
|
||||
thead {
|
||||
tr {
|
||||
th {
|
||||
background-color: rgba(247, 247, 247, 1); //设置表格标题背景色
|
||||
height: 35px; //设置单元格最小高度
|
||||
text-align: center;
|
||||
letter-spacing: 5px;
|
||||
padding: 15px;
|
||||
}
|
||||
td {
|
||||
text-align: left;
|
||||
height: 35px; //设置单元格最小高度
|
||||
padding: 15px;
|
||||
}
|
||||
.th-bg {
|
||||
background-color: rgba(247, 247, 247, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
tbody {
|
||||
tr {
|
||||
td {
|
||||
text-align: left;
|
||||
height: 40px; //设置单元格最小高度
|
||||
padding: 15px;
|
||||
}
|
||||
th {
|
||||
height: 35px; //设置单元格最小高度
|
||||
text-align: center;
|
||||
letter-spacing: 5px;
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.table-content {
|
||||
box-shadow: 0px 0px 10px #ddd;
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
328
src/views/materials/materialsInventory/index.vue
Normal file
328
src/views/materials/materialsInventory/index.vue
Normal file
@ -0,0 +1,328 @@
|
||||
<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="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>
|
||||
</el-card>
|
||||
</div>
|
||||
</transition>
|
||||
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['materials:materialsInventory:export']">
|
||||
导出
|
||||
</el-button>
|
||||
</el-col>
|
||||
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<el-table v-loading="loading" :data="materialsInventoryList" @selection-change="handleSelectionChange">
|
||||
<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" />
|
||||
<el-table-column label="入库登记" align="center">
|
||||
<el-table-column label="数量" align="center" prop="number">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.outPut === '0'">{{ scope.row.number }}</span>
|
||||
<span v-else></span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="签收人" align="center" prop="operator">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.outPut === '0'">{{ scope.row.operator }}</span>
|
||||
<span v-else></span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="日期" align="center" prop="outPutTime" width="160">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.outPut === '0'">{{ parseTime(scope.row.outPutTime, '{y}年{m}月{d}日') }}</span>
|
||||
<span v-else></span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column label="出库登记" align="center">
|
||||
<el-table-column label="交接单位" align="center" prop="recipient" />
|
||||
<el-table-column label="数量" align="center" prop="number">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.outPut === '1'">{{ scope.row.number }}</span>
|
||||
<span v-else></span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="出库人" align="center" prop="operator">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.outPut === '1'">{{ scope.row.operator }}</span>
|
||||
<span v-else></span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="领用人" align="center" prop="shipper" />
|
||||
<el-table-column label="日期" align="center" prop="outPutTime" width="160">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.outPut === '1'">{{ parseTime(scope.row.outPutTime, '{y}年{m}月{d}日') }}</span>
|
||||
<span v-else></span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column label="剩余处理" align="center">
|
||||
<el-table-column label="剩余量" align="center" prop="residue" />
|
||||
<el-table-column label="处理方式" align="center" prop="disposition" />
|
||||
</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-space wrap>
|
||||
<el-button link type="success" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['materials:materialsInventory:edit']">
|
||||
修改
|
||||
</el-button>
|
||||
<el-button link type="danger" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['materials:materialsInventory:remove']">
|
||||
删除
|
||||
</el-button>
|
||||
</el-space>
|
||||
</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="materialsInventoryFormRef" :model="form" :rules="rules" label-width="120px">
|
||||
<el-form-item label="出入库状态" prop="outPut">
|
||||
<el-select v-model="form.outPut" clearable placeholder="请输入出入库状态">
|
||||
<el-option v-for="item in out_put_type" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="出/入库的数量" prop="number">
|
||||
<el-input v-model="form.number" placeholder="请输入出/入库的数量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="出/入库操作时间" prop="outPutTime">
|
||||
<el-date-picker clearable v-model="form.outPutTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择出/入库操作时间">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="剩余库存数量" prop="residue">
|
||||
<el-input v-model="form.residue" placeholder="请输入剩余库存数量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="操作人" prop="operator">
|
||||
<el-input v-model="form.operator" placeholder="请输入操作人" />
|
||||
</el-form-item>
|
||||
<el-form-item label="材料出入证明" prop="path">
|
||||
<el-input v-model="form.path" type="textarea" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
<el-form-item label="处理方式" prop="disposition">
|
||||
<el-input v-model="form.disposition" placeholder="请输入处理方式" />
|
||||
</el-form-item>
|
||||
<el-form-item label="交接单位" prop="recipient">
|
||||
<el-input v-model="form.recipient" placeholder="请输入交接单位" />
|
||||
</el-form-item>
|
||||
<el-form-item label="领用人" prop="shipper">
|
||||
<el-input v-model="form.shipper" 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="MaterialsInventory" lang="ts">
|
||||
import {
|
||||
addMaterialsInventory,
|
||||
delMaterialsInventory,
|
||||
getMaterialsInventory,
|
||||
listMaterialsInventory,
|
||||
updateMaterialsInventory
|
||||
} from '@/api/materials/materialsInventory';
|
||||
import { MaterialsInventoryForm, MaterialsInventoryQuery, MaterialsInventoryVO } from '@/api/materials/materialsInventory/types';
|
||||
import { useUserStoreHook } from '@/store/modules/user';
|
||||
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
const { out_put_type } = toRefs<any>(proxy?.useDict('out_put_type'));
|
||||
|
||||
// 获取用户 store
|
||||
const userStore = useUserStoreHook();
|
||||
// 从 store 中获取项目列表和当前选中的项目
|
||||
const currentProject = computed(() => userStore.selectedProject);
|
||||
const materialsInventoryList = ref<MaterialsInventoryVO[]>([]);
|
||||
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 materialsInventoryFormRef = ref<ElFormInstance>();
|
||||
|
||||
const dialog = reactive<DialogOption>({
|
||||
visible: false,
|
||||
title: ''
|
||||
});
|
||||
|
||||
const initFormData: MaterialsInventoryForm = {
|
||||
id: undefined,
|
||||
materialsId: undefined,
|
||||
projectId: currentProject.value?.id,
|
||||
outPut: undefined,
|
||||
number: undefined,
|
||||
outPutTime: undefined,
|
||||
residue: undefined,
|
||||
operator: undefined,
|
||||
path: undefined,
|
||||
disposition: undefined,
|
||||
recipient: undefined,
|
||||
shipper: undefined,
|
||||
remark: undefined
|
||||
};
|
||||
const data = reactive<PageData<MaterialsInventoryForm, MaterialsInventoryQuery>>({
|
||||
form: { ...initFormData },
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
materialsId: undefined,
|
||||
projectId: currentProject.value?.id,
|
||||
outPut: undefined,
|
||||
number: undefined,
|
||||
outPutTime: undefined,
|
||||
residue: undefined,
|
||||
operator: undefined,
|
||||
path: undefined,
|
||||
disposition: undefined,
|
||||
recipient: undefined,
|
||||
shipper: undefined,
|
||||
params: {}
|
||||
},
|
||||
rules: {
|
||||
id: [{ required: true, message: '主键id不能为空', trigger: 'blur' }],
|
||||
materialsId: [{ required: true, message: '材料id不能为空', trigger: 'blur' }]
|
||||
}
|
||||
});
|
||||
|
||||
const { queryParams, form, rules } = toRefs(data);
|
||||
const materialsOptions = ref([]);
|
||||
|
||||
/** 查询材料出/入库列表 */
|
||||
const getList = async () => {
|
||||
loading.value = true;
|
||||
const res = await listMaterialsInventory(queryParams.value);
|
||||
materialsInventoryList.value = res.rows;
|
||||
total.value = res.total;
|
||||
const materialsMap = new Map();
|
||||
materialsOptions.value = Array.from(materialsMap.values());
|
||||
loading.value = false;
|
||||
};
|
||||
|
||||
/** 取消按钮 */
|
||||
const cancel = () => {
|
||||
reset();
|
||||
dialog.visible = false;
|
||||
};
|
||||
|
||||
/** 表单重置 */
|
||||
const reset = () => {
|
||||
form.value = { ...initFormData };
|
||||
materialsInventoryFormRef.value?.resetFields();
|
||||
};
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
const handleQuery = () => {
|
||||
queryParams.value.pageNum = 1;
|
||||
getList();
|
||||
};
|
||||
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value?.resetFields();
|
||||
handleQuery();
|
||||
};
|
||||
|
||||
/** 多选框选中数据 */
|
||||
const handleSelectionChange = (selection: MaterialsInventoryVO[]) => {
|
||||
ids.value = selection.map((item) => item.id);
|
||||
single.value = selection.length != 1;
|
||||
multiple.value = !selection.length;
|
||||
};
|
||||
|
||||
/** 修改按钮操作 */
|
||||
const handleUpdate = async (row?: MaterialsInventoryVO) => {
|
||||
reset();
|
||||
const _id = row?.id || ids.value[0];
|
||||
const res = await getMaterialsInventory(_id);
|
||||
Object.assign(form.value, res.data);
|
||||
dialog.visible = true;
|
||||
dialog.title = '修改材料出/入库';
|
||||
};
|
||||
|
||||
/** 提交按钮 */
|
||||
const submitForm = () => {
|
||||
materialsInventoryFormRef.value?.validate(async (valid: boolean) => {
|
||||
if (valid) {
|
||||
buttonLoading.value = true;
|
||||
form.value.projectId = currentProject.value?.id;
|
||||
if (form.value.id) {
|
||||
await updateMaterialsInventory(form.value).finally(() => (buttonLoading.value = false));
|
||||
} else {
|
||||
await addMaterialsInventory(form.value).finally(() => (buttonLoading.value = false));
|
||||
}
|
||||
proxy?.$modal.msgSuccess('操作成功');
|
||||
dialog.visible = false;
|
||||
await getList();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/** 删除按钮操作 */
|
||||
const handleDelete = async (row?: MaterialsInventoryVO) => {
|
||||
const _ids = row?.id || ids.value;
|
||||
await proxy?.$modal.confirm('是否确认删除材料出/入库编号为"' + _ids + '"的数据项？').finally(() => (loading.value = false));
|
||||
await delMaterialsInventory(_ids);
|
||||
proxy?.$modal.msgSuccess('删除成功');
|
||||
await getList();
|
||||
};
|
||||
|
||||
/** 导出按钮操作 */
|
||||
const handleExport = () => {
|
||||
proxy?.download(
|
||||
'materials/materialsInventory/export',
|
||||
{
|
||||
...queryParams.value
|
||||
},
|
||||
`materialsInventory_${new Date().getTime()}.xlsx`
|
||||
);
|
||||
};
|
||||
|
||||
//监听项目id刷新数据
|
||||
const listeningProject = watch(
|
||||
() => currentProject.value?.id,
|
||||
(nid, oid) => {
|
||||
queryParams.value.projectId = nid;
|
||||
form.value.projectId = nid;
|
||||
getList();
|
||||
}
|
||||
);
|
||||
|
||||
onUnmounted(() => {
|
||||
listeningProject();
|
||||
});
|
||||
onMounted(() => {
|
||||
getList();
|
||||
});
|
||||
</script>
|
||||
440
src/views/materials/orderEquipment/index.vue
Normal file
440
src/views/materials/orderEquipment/index.vue
Normal file
@ -0,0 +1,440 @@
|
||||
<template>
|
||||
<div class="p-2">
|
||||
<el-row :gutter="20">
|
||||
<!-- 流程分类树 -->
|
||||
<el-col style="" :span="5">
|
||||
<el-card shadow="hover">
|
||||
<el-input v-model="batchNumber" placeholder="请输入批次号" @input="searchBatchList" prefix-icon="Search" clearable />
|
||||
<el-tree
|
||||
ref="batchTreeRef"
|
||||
class="mt-2"
|
||||
node-key="batchNumber"
|
||||
:data="batchOptions"
|
||||
:props="{ label: 'batchNumber', children: 'children' }"
|
||||
:expand-on-click-node="false"
|
||||
highlight-current
|
||||
default-expand-all
|
||||
@node-click="handleNodeClick"
|
||||
>
|
||||
<template #default="{ node, data }">
|
||||
<div class="custom-tree-node">
|
||||
{{ node.label }}
|
||||
<dict-tag :options="wf_business_status" :value="data.approvalOrder" />
|
||||
</div>
|
||||
</template>
|
||||
</el-tree>
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
v-model:page="queryParams.pageNum"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
@pagination="getBatchList"
|
||||
layout="prev, pager, next,jumper"
|
||||
/>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="19">
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<!-- <el-col :span="1.5">
|
||||
<el-button type="primary" plain icon="SemiSelect" @click="handleAdd" v-hasPermi="['cailiaoshebei:cailiaoshebei:add']">选择</el-button>
|
||||
</el-col> -->
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
v-if="form.approvalOrder == 'draft'"
|
||||
type="success"
|
||||
plain
|
||||
icon="Check"
|
||||
@click="submitForm"
|
||||
v-hasPermi="['cailiaoshebei:cailiaoshebei:delete']"
|
||||
>保存</el-button
|
||||
>
|
||||
<el-button plain type="warning" icon="Finished" @click="handleAudit()" v-hasPermi="['out:monthPlan:remove']">审核</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5" v-if="form.approvalOrder == 'draft'">
|
||||
<el-button type="success" plain icon="Share" @click="onShare" v-hasPermi="['cailiaoshebei:cailiaoshebei:delete']">分享</el-button>
|
||||
</el-col>
|
||||
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
</template>
|
||||
<el-row :gutter="20">
|
||||
<!-- <el-col :span="8" :offset="0">
|
||||
<el-form-item label="单据号">
|
||||
<el-input v-model="form.batchNumbers" placeholder="请输入单据号" prefix-icon="Search" clearable />
|
||||
</el-form-item>
|
||||
</el-col> -->
|
||||
<el-col :span="8" :offset="0">
|
||||
<el-form-item label="采购人">
|
||||
<el-input v-model="form.purchasingAgent" placeholder="请输入采购人" prefix-icon="Search" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8" :offset="0">
|
||||
<el-form-item label="采购时间">
|
||||
<el-date-picker v-model="form.purchasingPeriod" type="date" value-format="YYYY-MM-DD" placeholder="选择采购时间" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8" :offset="0">
|
||||
<el-form-item label="供应商">
|
||||
<el-input v-model="form.dhSupplier" disabled placeholder="请输入供应商" prefix-icon="Search" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8" :offset="0">
|
||||
<el-form-item label="合同号">
|
||||
<el-input v-model="form.contractNumber" placeholder="请输入合同号" prefix-icon="Search" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8" :offset="0">
|
||||
<el-form-item label="备注">
|
||||
<el-input v-model="form.dhRemark" placeholder="请输入备注" prefix-icon="Search" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="cailiaoshebeiList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" 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="materialCode" width="200" />
|
||||
<el-table-column label="需求数量" align="center" prop="demandQuantity" width="80" />
|
||||
<el-table-column label="验收数量" align="center" prop="acceptanceQuantity" />
|
||||
<el-table-column label="订货量" align="center" prop="orderQuantity">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.orderQuantity" type="number" min="0" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="预计到货时间" align="center" prop="expectedArrival" width="250" />
|
||||
<el-table-column label="预计生产完成时间" align="center" prop="productionTime" width="250" />
|
||||
</el-table>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 添加或修改物资-材料设备对话框 -->
|
||||
<el-dialog :title="dialog.title" v-model="dialog.visible" width="650px" append-to-body>
|
||||
<el-transfer
|
||||
v-model="cailiaoshebeiSelectedList"
|
||||
filterable
|
||||
:data="cailiaoshebeiAllList"
|
||||
:props="{
|
||||
label: 'name',
|
||||
key: 'id'
|
||||
}"
|
||||
/>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button :loading="buttonLoading" type="primary" @click="submitTransferForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="Cailiaoshebei" lang="ts">
|
||||
import { listCailiaoshebei, delCailiaoshebei, addCailiaoshebei, listBatch, getBatch, delBatch } from '@/api/materials/orderEquipment';
|
||||
import { CailiaoshebeiVO, CailiaoshebeiQuery, CailiaoshebeiForm } from '@/api/materials/orderEquipment/types';
|
||||
|
||||
import { listContractor } from '@/api/project/contractor';
|
||||
import { useUserStoreHook } from '@/store/modules/user';
|
||||
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
const { supply, wf_business_status } = toRefs<any>(proxy?.useDict('supply', 'wf_business_status'));
|
||||
// 获取用户 store
|
||||
const userStore = useUserStoreHook();
|
||||
// 从 store 中获取项目列表和当前选中的项目
|
||||
const currentProject = computed(() => userStore.selectedProject);
|
||||
const batchTreeRef = ref<any>(null);
|
||||
const cailiaoshebeiList = ref<CailiaoshebeiVO[]>([]);
|
||||
const cailiaoshebeiAllList = ref<CailiaoshebeiVO[]>([]);
|
||||
const cailiaoshebeiSelectedList = ref([]);
|
||||
const buttonLoading = ref(false);
|
||||
const loading = ref(false);
|
||||
const showSearch = ref(true);
|
||||
const ids = ref<Array<string | number>>([]);
|
||||
const single = ref(true);
|
||||
const multiple = ref(true);
|
||||
const total = ref(0);
|
||||
const batchOptions = ref<any[]>([]);
|
||||
|
||||
const queryFormRef = ref<ElFormInstance>();
|
||||
const cailiaoshebeiFormRef = ref<ElFormInstance>();
|
||||
|
||||
const dialog = reactive<DialogOption>({
|
||||
visible: false,
|
||||
title: ''
|
||||
});
|
||||
const batchNumber = ref('');
|
||||
|
||||
const initFormData: CailiaoshebeiForm = {
|
||||
id: undefined,
|
||||
batchNumber: undefined,
|
||||
supplierId: undefined,
|
||||
addDataList: [],
|
||||
|
||||
supplier: undefined,
|
||||
name: undefined,
|
||||
supply: undefined,
|
||||
specification: undefined,
|
||||
signalment: undefined,
|
||||
materialCode: undefined,
|
||||
arrivalTime: undefined,
|
||||
finishTime: undefined,
|
||||
unit: undefined,
|
||||
plan: undefined,
|
||||
realQuantity: undefined,
|
||||
projectId: currentProject.value?.id,
|
||||
remark: undefined
|
||||
};
|
||||
const data = reactive<PageData<any, any>>({
|
||||
form: { ...initFormData },
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
batchNumber: undefined,
|
||||
supplierId: undefined,
|
||||
supplier: undefined,
|
||||
name: undefined,
|
||||
projectId: currentProject.value?.id,
|
||||
supply: undefined,
|
||||
specification: undefined,
|
||||
signalment: undefined,
|
||||
materialCode: undefined,
|
||||
arrivalTime: undefined,
|
||||
finishTime: undefined,
|
||||
unit: undefined,
|
||||
plan: undefined,
|
||||
realQuantity: undefined,
|
||||
params: {}
|
||||
},
|
||||
rules: {
|
||||
id: [{ required: true, message: '主键ID不能为空', trigger: 'blur' }]
|
||||
}
|
||||
});
|
||||
|
||||
const { queryParams, form, rules } = toRefs(data);
|
||||
|
||||
/** 查询物资-材料设备列表 */
|
||||
const getList = async () => {
|
||||
loading.value = true;
|
||||
const res = await listCailiaoshebei(queryParams.value);
|
||||
cailiaoshebeiList.value = res.rows;
|
||||
|
||||
loading.value = false;
|
||||
};
|
||||
|
||||
//查询批次列表
|
||||
const getBatchList = async () => {
|
||||
const res = await listBatch(queryParams.value);
|
||||
console.log('🚀 ~ getBatchList ~ res:', res);
|
||||
batchOptions.value = res.rows;
|
||||
total.value = res.total;
|
||||
try {
|
||||
queryParams.value.batchNumber = res.rows[0].batchNumber;
|
||||
batchTreeRef.value.setCurrentKey(res.rows[0].batchNumber);
|
||||
Object.assign(form.value, res.rows[0]);
|
||||
console.log('🚀 ~ getBatchList ~ form.value:', form.value);
|
||||
|
||||
// form.value.batchNumber = res.rows[0].batchNumber;
|
||||
// form.value.approvalOrder = res.rows[0].approvalOrder;
|
||||
} catch (error) {
|
||||
form.value.batchNumber = '';
|
||||
}
|
||||
getList();
|
||||
};
|
||||
|
||||
/** 节点单击事件 */
|
||||
const handleNodeClick = (data: any) => {
|
||||
queryParams.value.batchNumber = data.batchNumber;
|
||||
form.value = data;
|
||||
// form.value.batchNumber = data.batchNumber;
|
||||
// form.value.approvalOrder = data.approvalOrder;
|
||||
if (data.batchNumber === '0') {
|
||||
queryParams.value.batchNumber = '';
|
||||
}
|
||||
getList();
|
||||
};
|
||||
|
||||
/** 取消按钮 */
|
||||
const cancel = () => {
|
||||
reset();
|
||||
dialog.visible = false;
|
||||
};
|
||||
|
||||
/** 表单重置 */
|
||||
const reset = () => {
|
||||
const preservedBatchId = form.value.batchNumber; // 先保存当前的 batchNumber
|
||||
form.value = { ...initFormData, batchNumber: preservedBatchId }; // 重置但保留
|
||||
cailiaoshebeiFormRef.value?.resetFields();
|
||||
};
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
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;
|
||||
};
|
||||
|
||||
/** 新增按钮操作 */
|
||||
const handleAdd = () => {
|
||||
reset();
|
||||
listCailiaoshebei({
|
||||
projectId: currentProject.value?.id
|
||||
}).then((res) => {
|
||||
cailiaoshebeiAllList.value = res.rows;
|
||||
});
|
||||
|
||||
dialog.visible = true;
|
||||
dialog.title = '选择物资-材料设备';
|
||||
};
|
||||
|
||||
/** 修改按钮操作 */
|
||||
// const handleUpdate = async (row?: CailiaoshebeiVO) => {
|
||||
// reset();
|
||||
// const _id = row?.id || ids.value[0];
|
||||
// const res = await getCailiaoshebei(_id);
|
||||
// Object.assign(form.value, res.data);
|
||||
// selectValue.value = (form.value.supplierId as string).split(',');
|
||||
// dialog.visible = true;
|
||||
// dialog.title = '修改物资-材料设备';
|
||||
// };
|
||||
const onShare = () => {
|
||||
const TokenKey = 'Admin-Token';
|
||||
const tokenStorage = useStorage<null | string>(TokenKey, null);
|
||||
const getToken = () => tokenStorage.value;
|
||||
|
||||
console.log(getToken());
|
||||
|
||||
// 跳转新的地址 传token
|
||||
let url = `http://192.168.110.142:7788/indexEquipment?projectId=${encodeURIComponent(currentProject.value?.id)}&token=${encodeURIComponent(getToken())}&batchNumber=${encodeURIComponent(form.value.batchNumber)}`;
|
||||
window.open(url, '_blank');
|
||||
};
|
||||
/** 提交按钮 */
|
||||
const submitForm = async () => {
|
||||
buttonLoading.value = true;
|
||||
cailiaoshebeiList.value.forEach((item) => {
|
||||
if (item.id) {
|
||||
delete item.id;
|
||||
}
|
||||
});
|
||||
|
||||
await addCailiaoshebei({ ...form.value, list: cailiaoshebeiList.value, batchNumber: form.value.batchNumber } as any).finally(
|
||||
() => (buttonLoading.value = false)
|
||||
);
|
||||
|
||||
proxy?.$modal.msgSuccess('操作成功');
|
||||
dialog.visible = false;
|
||||
};
|
||||
|
||||
/** 审核按钮操作 */
|
||||
const handleAudit = async () => {
|
||||
if (!form.value.batchNumber) {
|
||||
proxy?.$modal.msgError('请选择批次');
|
||||
return;
|
||||
}
|
||||
|
||||
proxy?.$tab.closePage(proxy.$route);
|
||||
proxy?.$tab.openPage('/approval/orderEquipment/indexEdit', '审核物资订货', {
|
||||
id: form.value.batchNumber,
|
||||
approvalOrder: form.value.approvalOrder + '_equipmentOrdering',
|
||||
type: 'update'
|
||||
});
|
||||
};
|
||||
|
||||
const searchBatchList = async () => {
|
||||
queryParams.value.batchNumber = batchNumber.value;
|
||||
getBatchList();
|
||||
};
|
||||
|
||||
/** 提交穿梭框数据 */
|
||||
const submitTransferForm = async () => {
|
||||
cailiaoshebeiList.value = cailiaoshebeiSelectedList.value.map((id) => {
|
||||
const item = cailiaoshebeiAllList.value.find((option) => option.id === id);
|
||||
return item;
|
||||
});
|
||||
dialog.visible = false;
|
||||
};
|
||||
|
||||
/** 新增批次 */
|
||||
const addBatch = async () => {
|
||||
await proxy?.$modal.confirm('是否确认新增批次？').finally(() => (loading.value = false));
|
||||
const res = await getBatch({ projectId: currentProject.value?.id });
|
||||
console.log('🚀 ~ addBatch ~ res:', res);
|
||||
await getBatchList();
|
||||
|
||||
proxy?.$modal.msgSuccess('新增成功');
|
||||
};
|
||||
|
||||
/** 删除批次 */
|
||||
const handleDeleteBatch = async () => {
|
||||
const _ids = batchTreeRef.value.getCurrentNode()?.id;
|
||||
await proxy?.$modal.confirm('是否确认删除批次编号为"' + _ids + '"的数据项？').finally(() => (loading.value = false));
|
||||
await delBatch(_ids);
|
||||
proxy?.$modal.msgSuccess('删除成功');
|
||||
queryParams.value.batchNumber = '';
|
||||
|
||||
await getBatchList();
|
||||
};
|
||||
|
||||
/** 删除按钮操作 */
|
||||
const handleDelete = async (row?: CailiaoshebeiVO) => {
|
||||
const _ids = row?.id || ids.value;
|
||||
await proxy?.$modal.confirm('是否确认删除物资-材料设备编号为"' + _ids + '"的数据项？').finally(() => (loading.value = false));
|
||||
await delCailiaoshebei(_ids);
|
||||
proxy?.$modal.msgSuccess('删除成功');
|
||||
await getList();
|
||||
};
|
||||
|
||||
/** 查询供货商列表 */
|
||||
const supplierOptions = ref([]);
|
||||
const getSupplierList = async () => {
|
||||
const res = await listContractor({
|
||||
projectId: currentProject.value?.id,
|
||||
pageNum: 1,
|
||||
pageSize: 10000
|
||||
});
|
||||
supplierOptions.value = res.rows;
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getBatchList();
|
||||
getSupplierList();
|
||||
});
|
||||
|
||||
//监听项目id刷新数据
|
||||
const listeningProject = watch(
|
||||
() => currentProject.value?.id,
|
||||
(nid, oid) => {
|
||||
queryParams.value.projectId = nid;
|
||||
form.value.projectId = nid;
|
||||
getBatchList();
|
||||
getSupplierList();
|
||||
}
|
||||
);
|
||||
|
||||
onUnmounted(() => {
|
||||
listeningProject();
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.custom-tree-node {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
</style>
|
||||
345
src/views/materials/orderEquipment/indexEdit.vue
Normal file
345
src/views/materials/orderEquipment/indexEdit.vue
Normal file
@ -0,0 +1,345 @@
|
||||
<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.approvalOrder"
|
||||
: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-table v-loading="loading" :data="cailiaoshebeiList">
|
||||
<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="supplierCompany" /> -->
|
||||
<el-table-column label="设备材料名称" align="center" prop="name" />
|
||||
<el-table-column label="规格型号" align="center" prop="specification" />
|
||||
<el-table-column label="物料编码" align="center" prop="materialCode" width="200" />
|
||||
<el-table-column label="需求数量" align="center" prop="demandQuantity" width="80" />
|
||||
<el-table-column label="验收数量" align="center" prop="acceptanceQuantity" />
|
||||
<el-table-column label="订货量" align="center" prop="orderQuantity" />
|
||||
<el-table-column label="预计到货时间" align="center" prop="expectedArrival" width="250" />
|
||||
<el-table-column label="预计生产完成时间" align="center" prop="productionTime" width="250" />
|
||||
</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 ComponentInternalInstance;
|
||||
import { useUserStoreHook } from '@/store/modules/user';
|
||||
import { getPcDetail, listCailiaoshebei } from '@/api/materials/orderEquipment';
|
||||
// 获取用户 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 + '_equipmentOrdering',
|
||||
label: '物资-设备订货审批'
|
||||
}
|
||||
];
|
||||
const { supply } = toRefs<any>(proxy?.useDict('supply'));
|
||||
|
||||
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 selectValue = ref<string[]>([]);
|
||||
const cailiaoshebeiList = ref([]);
|
||||
|
||||
const initFormData = {
|
||||
approvalOrder: undefined,
|
||||
id: 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 id = routeParams.value.id.split('_')[0];
|
||||
const res = await listCailiaoshebei({ pageNum: 1, pageSize: 10, batchNumber: id });
|
||||
cailiaoshebeiList.value = res.rows;
|
||||
if (!form.value.approvalOrder) {
|
||||
const res = await getPcDetail(id);
|
||||
form.value.approvalOrder = (res.data as any).approvalOrder;
|
||||
} else {
|
||||
form.value.approvalOrder = routeParams.value.approvalOrder;
|
||||
}
|
||||
console.log('🚀 ~ getInfo ~ form.value.approvalOrder:', form.value.approvalOrder);
|
||||
form.value.id = routeParams.value.id;
|
||||
|
||||
loading.value = false;
|
||||
buttonLoading.value = false;
|
||||
});
|
||||
};
|
||||
|
||||
/** 提交按钮 */
|
||||
const submitForm = (status1: string) => {
|
||||
status.value = status1;
|
||||
submit(status.value, form.value);
|
||||
};
|
||||
|
||||
const submitFlow = async () => {
|
||||
handleStartWorkFlow(form.value);
|
||||
dialogVisible.visible = false;
|
||||
};
|
||||
//提交申请
|
||||
const handleStartWorkFlow = async (data: LeaveForm) => {
|
||||
try {
|
||||
submitFormData.value.flowCode = flowCode.value;
|
||||
submitFormData.value.businessId = data.id;
|
||||
//流程变量
|
||||
taskVariables.value = {
|
||||
// leave4/5 使用的流程变量
|
||||
userList: ['1', '3', '4']
|
||||
};
|
||||
submitFormData.value.variables = taskVariables.value;
|
||||
const resp = await startWorkFlow(submitFormData.value);
|
||||
if (submitVerifyRef.value) {
|
||||
buttonLoading.value = false;
|
||||
submitVerifyRef.value.openDialog(resp.data.taskId);
|
||||
}
|
||||
} finally {
|
||||
buttonLoading.value = false;
|
||||
}
|
||||
};
|
||||
//审批记录
|
||||
const handleApprovalRecord = () => {
|
||||
approvalRecordRef.value.init(form.value.id);
|
||||
};
|
||||
//提交回调
|
||||
const submitCallback = async () => {
|
||||
await proxy.$tab.closePage(proxy.$route);
|
||||
proxy.$router.go(-1);
|
||||
};
|
||||
//审批
|
||||
const approvalVerifyOpen = async () => {
|
||||
submitVerifyRef.value.openDialog(routeParams.value.taskId);
|
||||
};
|
||||
// 图纸上传成功之后 开始提交
|
||||
const submit = async (status, data) => {
|
||||
form.value = data;
|
||||
if (status === 'draft') {
|
||||
buttonLoading.value = false;
|
||||
proxy?.$modal.msgSuccess('暂存成功');
|
||||
proxy.$tab.closePage(proxy.$route);
|
||||
proxy.$router.go(-1);
|
||||
} else {
|
||||
if ((form.value.approvalOrder === 'draft' && (flowCode.value === '' || flowCode.value === null)) || routeParams.value.type === 'add') {
|
||||
flowCode.value = flowCodeOptions[0].value;
|
||||
dialogVisible.visible = true;
|
||||
return;
|
||||
}
|
||||
//说明启动过先随意穿个参数
|
||||
if (flowCode.value === '' || flowCode.value === null) {
|
||||
flowCode.value = 'xx';
|
||||
}
|
||||
await handleStartWorkFlow(data);
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
nextTick(async () => {
|
||||
routeParams.value = proxy.$route.query;
|
||||
reset();
|
||||
loading.value = false;
|
||||
if (routeParams.value.type === 'update' || routeParams.value.type === 'view' || routeParams.value.type === 'approval') {
|
||||
getInfo();
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
/* 全局样式 */
|
||||
:root {
|
||||
--primary: #409eff;
|
||||
--primary-light: #66b1ff;
|
||||
--primary-dark: #3a8ee6;
|
||||
--success: #67c23a;
|
||||
--warning: #e6a23c;
|
||||
--danger: #f56c6c;
|
||||
--info: #909399;
|
||||
}
|
||||
|
||||
/* 表单样式优化 */
|
||||
.el-form-item {
|
||||
.el-form-item__label {
|
||||
color: #606266;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.el-input__inner,
|
||||
.el-select .el-input__inner {
|
||||
border-radius: 4px;
|
||||
transition:
|
||||
border-color 0.2s,
|
||||
box-shadow 0.2s;
|
||||
|
||||
&:focus {
|
||||
border-color: var(--primary-light);
|
||||
box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.el-textarea__inner {
|
||||
border-radius: 4px;
|
||||
transition:
|
||||
border-color 0.2s,
|
||||
box-shadow 0.2s;
|
||||
|
||||
&:focus {
|
||||
border-color: var(--primary-light);
|
||||
box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 按钮样式优化 */
|
||||
.el-button {
|
||||
border-radius: 4px;
|
||||
transition: all 0.2s;
|
||||
|
||||
&.is-primary {
|
||||
background-color: var(--primary);
|
||||
border-color: var(--primary);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--primary-light);
|
||||
border-color: var(--primary-light);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var(--primary-dark);
|
||||
border-color: var(--primary-dark);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-text {
|
||||
color: var(--primary);
|
||||
|
||||
&:hover {
|
||||
color: var(--primary-light);
|
||||
background-color: rgba(64, 158, 255, 0.05);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 卡片样式优化 */
|
||||
.el-card {
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
/* transform: translateY(-2px); */
|
||||
}
|
||||
}
|
||||
|
||||
/* 对话框样式优化 */
|
||||
.el-dialog {
|
||||
.el-dialog__header {
|
||||
background-color: #f5f7fa;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
padding: 15px 20px;
|
||||
}
|
||||
|
||||
.el-dialog__title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.el-dialog__footer {
|
||||
padding: 15px 20px;
|
||||
border-top: 1px solid #ebeef5;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
231
src/views/materials/orderEquipment/indexEquipment.vue
Normal file
231
src/views/materials/orderEquipment/indexEquipment.vue
Normal file
@ -0,0 +1,231 @@
|
||||
<template>
|
||||
<div class="p-2">
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="24">
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button type="success" plain icon="Check" @click="submitForm">保存</el-button>
|
||||
</el-col>
|
||||
|
||||
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
</template>
|
||||
<el-row :gutter="20">
|
||||
<!-- <el-col :span="8" :offset="0">
|
||||
<el-form-item label="单据号">
|
||||
<el-input v-model="form.batchNumbers" placeholder="请输入单据号" @input="getList" prefix-icon="Search" clearable />
|
||||
</el-form-item>
|
||||
</el-col> -->
|
||||
<el-col :span="8" :offset="0">
|
||||
<el-form-item label="采购人">
|
||||
<el-input v-model="form.purchasingAgent" disabled placeholder="请输入采购人" @input="getList" prefix-icon="Search" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8" :offset="0">
|
||||
<el-form-item label="采购时间">
|
||||
<el-date-picker v-model="form.purchasingPeriod" disabled type="date" value-format="YYYY-MM-DD" placeholder="选择采购时间" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8" :offset="0">
|
||||
<el-form-item label="供应商">
|
||||
<el-input v-model="form.dhSupplier" disabled placeholder="请输入供应商" @input="getList" prefix-icon="Search" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8" :offset="0">
|
||||
<el-form-item label="合同号">
|
||||
<el-input v-model="form.contractNumber" disabled placeholder="请输入合同号" @input="getList" prefix-icon="Search" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8" :offset="0">
|
||||
<el-form-item label="备注">
|
||||
<el-input v-model="form.dhRemark" placeholder="请输入备注" disabled @input="getList" prefix-icon="Search" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-table v-loading="loading" :data="cailiaoshebeiList">
|
||||
<el-table-column label="设备材料名称" align="center" prop="name" />
|
||||
<el-table-column label="规格型号" align="center" prop="specification" />
|
||||
<el-table-column label="物料编码" align="center" prop="materialCode" width="200" />
|
||||
<el-table-column label="需求数量" align="center" prop="demandQuantity" width="80" />
|
||||
<el-table-column label="验收数量" align="center" prop="acceptanceQuantity" />
|
||||
<el-table-column label="订货量" align="center" prop="orderQuantity" />
|
||||
<el-table-column label="预计到货时间" align="center" prop="expectedArrival" width="250">
|
||||
<template #default="scope">
|
||||
<div class="flex justify-center w100%">
|
||||
<el-date-picker v-model="scope.row.expectedArrival" type="date" value-format="YYYY-MM-DD" />
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="预计生产完成时间" align="center" prop="productionTime" width="250">
|
||||
<template #default="scope">
|
||||
<div class="flex justify-center w100%">
|
||||
<el-date-picker v-model="scope.row.productionTime" type="date" value-format="YYYY-MM-DD" />
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="Cailiaoshebei" lang="ts">
|
||||
import { CailiaoshebeiVO, CailiaoshebeiForm } from '@/api/materials/orderEquipment/types';
|
||||
import axios from 'axios';
|
||||
const cailiaoshebeiList = ref<CailiaoshebeiVO[]>([]);
|
||||
const loading = ref(false);
|
||||
const showSearch = ref(true);
|
||||
const queryFormRef = ref<ElFormInstance>();
|
||||
const cailiaoshebeiFormRef = ref<ElFormInstance>();
|
||||
const { proxy } = getCurrentInstance();
|
||||
var token = '';
|
||||
const initFormData: CailiaoshebeiForm = {
|
||||
id: undefined,
|
||||
batchNumber: undefined,
|
||||
supplierId: undefined,
|
||||
addDataList: [],
|
||||
supplier: undefined,
|
||||
name: undefined,
|
||||
supply: undefined,
|
||||
specification: undefined,
|
||||
signalment: undefined,
|
||||
materialCode: undefined,
|
||||
arrivalTime: undefined,
|
||||
finishTime: undefined,
|
||||
unit: undefined,
|
||||
plan: undefined,
|
||||
realQuantity: undefined,
|
||||
projectId: undefined,
|
||||
remark: undefined
|
||||
};
|
||||
const data = reactive<PageData<any, any>>({
|
||||
form: { ...initFormData },
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
batchNumber: undefined,
|
||||
supplierId: undefined,
|
||||
supplier: undefined,
|
||||
name: undefined,
|
||||
projectId: undefined,
|
||||
supply: undefined,
|
||||
specification: undefined,
|
||||
signalment: undefined,
|
||||
materialCode: undefined,
|
||||
arrivalTime: undefined,
|
||||
finishTime: undefined,
|
||||
unit: undefined,
|
||||
plan: undefined,
|
||||
realQuantity: undefined,
|
||||
params: {}
|
||||
},
|
||||
rules: {
|
||||
id: [{ required: true, message: '主键ID不能为空', trigger: 'blur' }]
|
||||
}
|
||||
});
|
||||
const { queryParams, form, rules } = toRefs(data);
|
||||
/** 查询物资-材料设备列表 */
|
||||
const getList = async () => {
|
||||
// 请求数据
|
||||
axios
|
||||
.get('http://192.168.110.159:8898/cailiaoshebei/materialsorder/pcPlanListGHS', {
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${token}`,
|
||||
'X-Requested-With': 'XMLHttpRequest'
|
||||
},
|
||||
params: {
|
||||
projectId: initFormData.projectId,
|
||||
batchNumber: initFormData.batchNumber
|
||||
}
|
||||
})
|
||||
.then((response) => {
|
||||
form.value = response.data.rows[0];
|
||||
getListAll();
|
||||
})
|
||||
.catch((error) => {
|
||||
proxy?.$modal.msgError(error);
|
||||
});
|
||||
};
|
||||
// 获取列表
|
||||
const getListAll = () => {
|
||||
loading.value = true;
|
||||
axios
|
||||
.get('http://192.168.110.159:8898/cailiaoshebei/materialsorder/listGYS', {
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${token}`,
|
||||
'X-Requested-With': 'XMLHttpRequest'
|
||||
},
|
||||
params: {
|
||||
projectId: initFormData.projectId,
|
||||
batchNumber: initFormData.batchNumber
|
||||
}
|
||||
})
|
||||
.then((response) => {
|
||||
console.log('请求成功:', response.data);
|
||||
cailiaoshebeiList.value = response.data.rows;
|
||||
|
||||
loading.value = false;
|
||||
})
|
||||
.catch((error) => {
|
||||
proxy?.$modal.msgError(error);
|
||||
|
||||
loading.value = false;
|
||||
});
|
||||
};
|
||||
/** 提交按钮 */
|
||||
const submitForm = async () => {
|
||||
// cailiaoshebeiList.value.forEach((item) => {
|
||||
// if (item.id) {
|
||||
// delete item.id;
|
||||
// }
|
||||
// });
|
||||
axios
|
||||
.put(
|
||||
'http://192.168.110.159:8898/cailiaoshebei/materialsorder/modifyTheOrderFormGYS',
|
||||
{ ...form.value, list: cailiaoshebeiList.value, batchNumber: form.value.batchNumber }, // 请求体
|
||||
{
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${token}`,
|
||||
'X-Requested-With': 'XMLHttpRequest'
|
||||
},
|
||||
params: {
|
||||
/* 如果你还要传 URL 查询参数 */
|
||||
}
|
||||
}
|
||||
)
|
||||
.then((res) => {
|
||||
console.log(res.data.code);
|
||||
|
||||
if (res.data.code === 200) {
|
||||
proxy?.$modal.msgSuccess('操作成功');
|
||||
} else {
|
||||
proxy?.$modal.msgError(res.data.msg + '');
|
||||
}
|
||||
|
||||
loading.value = false;
|
||||
})
|
||||
.catch((error) => {
|
||||
proxy?.$modal.msgError(error);
|
||||
|
||||
loading.value = false;
|
||||
});
|
||||
};
|
||||
onMounted(() => {
|
||||
const queryString = window.location.search;
|
||||
// 解析查询字符串
|
||||
const urlParams = new URLSearchParams(queryString);
|
||||
// 获取参数值
|
||||
// const token = urlParams.get('token');
|
||||
token = urlParams.get('token');
|
||||
// localStorage.setItem('Admin-Token', 'Bearer ' + token);
|
||||
initFormData.projectId = urlParams.get('projectId');
|
||||
initFormData.batchNumber = urlParams.get('batchNumber');
|
||||
getList();
|
||||
});
|
||||
</script>
|
||||
459
src/views/materials/orderMaterials/index.vue
Normal file
459
src/views/materials/orderMaterials/index.vue
Normal file
@ -0,0 +1,459 @@
|
||||
<template>
|
||||
<div class="p-2">
|
||||
<el-row :gutter="20">
|
||||
<!-- 流程分类树 -->
|
||||
<el-col style="" :span="5">
|
||||
<el-card shadow="hover">
|
||||
<el-input v-model="batchNumber" placeholder="请输入批次号" @input="searchBatchList" prefix-icon="Search" clearable />
|
||||
<el-tree
|
||||
ref="batchTreeRef"
|
||||
class="mt-2"
|
||||
node-key="batchNumber"
|
||||
:data="batchOptions"
|
||||
:props="{ label: 'batchNumber', children: 'children' }"
|
||||
:expand-on-click-node="false"
|
||||
highlight-current
|
||||
default-expand-all
|
||||
@node-click="handleNodeClick"
|
||||
></el-tree>
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
v-model:page="queryParams.pageNum"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
@pagination="getBatchList"
|
||||
layout="prev, pager, next,jumper"
|
||||
/>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="19">
|
||||
<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="cailiaoshebeiList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="设备材料名称" align="center" prop="name" width="110" />
|
||||
<el-table-column label="规格型号" align="center" prop="specification" />
|
||||
<el-table-column label="需求数量" align="center" prop="demandQuantity" />
|
||||
<el-table-column label="物料编码" align="center" prop="materialCode" width="200" />
|
||||
<el-table-column label="计量单位" align="center" prop="unit" />
|
||||
<el-table-column label="计划到场时间" align="center" prop="arrivalTime" width="110" />
|
||||
<el-table-column label="订货数量" align="center" prop="orderQuantity" />
|
||||
<el-table-column label="预计到货时间" align="center" prop="expectedArrival" width="110" />
|
||||
<el-table-column label="预计生产完成时间" align="center" prop="productionTime" width="130" />
|
||||
<el-table-column label="验收数量" align="center" prop="acceptanceQuantity" />
|
||||
<el-table-column label="实际到货时间" align="center" prop="actualArrival" width="110" />
|
||||
<el-table-column label="需求提交时间" align="center" prop="requiredTime" width="110" />
|
||||
<el-table-column label="订货时间" align="center" prop="orderTime" width="110" />
|
||||
<el-table-column label="验收时间" align="center" prop="receptionTime" width="110" />
|
||||
<el-table-column label="物资执行状态" align="center" prop="materialStatus" width="110">
|
||||
<template #default="scope">
|
||||
<dict-tag :options="material_status" :value="scope.row.materialStatus" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="物资逾期类型" align="center" prop="overdueType" width="110">
|
||||
<template #default="scope">
|
||||
<dict-tag :options="overdue_type" :value="scope.row.overdueType" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="逾期原因" align="center" prop="cause" />
|
||||
<el-table-column label="签收单据" align="center" prop="signature" />
|
||||
<el-table-column label="退货单据" align="center" prop="returnedSalesReport" />
|
||||
<el-table-column label="备注" align="center" prop="remark" />
|
||||
<el-table-column label="操作" align="center" width="150" fixed="right">
|
||||
<template #default="scope">
|
||||
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['cailiaoshebei:cailiaoshebei:edit']"
|
||||
>修改</el-button
|
||||
>
|
||||
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['cailiaoshebei:cailiaoshebei:remove']"
|
||||
>删除</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-dialog draggable :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
|
||||
<el-form ref="cailiaoshebeiFormRef" :model="form" :rules="rules" label-width="130px">
|
||||
<el-form-item label="物资执行状态" prop="bo.materialStatus">
|
||||
<el-select v-model="form.bo.materialStatus" placeholder="请选择物资执行状态" clearable filterable @change="handleChange">
|
||||
<el-option v-for="item in material_status" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="物资逾期类型" prop="bo.overdueType" v-if="form.bo.materialStatus == 3">
|
||||
<el-select v-model="form.bo.overdueType" placeholder="请选择物资逾期类型" clearable filterable>
|
||||
<el-option v-for="item in overdue_type" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="逾期原因" prop="bo.cause" v-if="form.bo.materialStatus == 3">
|
||||
<el-input v-model="form.bo.cause" type="textarea" placeholder="请输入逾期原因" />
|
||||
</el-form-item>
|
||||
<el-form-item label="实际到货时间" prop="bo.actualArrival" v-if="form.bo.materialStatus < 4">
|
||||
<el-date-picker clearable v-model="form.bo.actualArrival" type="date" value-format="YYYY-MM-DD" placeholder="请选择实际到货时间" />
|
||||
</el-form-item>
|
||||
<el-form-item label="验收时间" prop="bo.receptionTime" v-if="form.bo.materialStatus < 4">
|
||||
<el-date-picker clearable v-model="form.bo.receptionTime" type="date" value-format="YYYY-MM-DD" placeholder="请选择验收时间" />
|
||||
</el-form-item>
|
||||
<el-form-item label="验收数量" prop="bo.acceptanceQuantity" v-if="form.bo.materialStatus < 4">
|
||||
<el-input v-model="form.bo.acceptanceQuantity" type="number" placeholder="请输入验收数量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="需求提交时间" prop="bo.requiredTime">
|
||||
<el-date-picker
|
||||
clearable
|
||||
v-model="form.bo.requiredTime"
|
||||
:disabled="form.bo.requiredTime != null && form.bo.requiredTime != ''"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="请选择需求提交时间"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="订货时间" prop="bo.orderTime">
|
||||
<el-date-picker
|
||||
clearable
|
||||
:disabled="form.bo.orderTime != null && form.bo.orderTime != ''"
|
||||
v-model="form.bo.orderTime"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="请选择订货时间"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="操作状态" prop="bo.operationStatus" v-if="form.bo.materialStatus <= 4 || form.bo.materialStatus == 10">
|
||||
<el-select disabled v-model="form.bo.operationStatus" placeholder="请选择物资执行状态" clearable filterable>
|
||||
<el-option v-for="item in operation_s" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="单据类型" prop="bo.billType" v-if="form.bo.materialStatus < 4 || form.bo.materialStatus == 10">
|
||||
<el-select disabled v-model="form.bo.billType" placeholder="请选择单据类型" clearable filterable>
|
||||
<el-option label="签收单" value="1" />
|
||||
<el-option label="退货单" value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="上传单据" prop="file" v-if="form.bo.materialStatus < 4 || form.bo.materialStatus == 10">
|
||||
<file-upload
|
||||
v-model="form.file"
|
||||
:fileType="['pdf', 'png', 'jpg', 'jpeg']"
|
||||
:autoUpload="false"
|
||||
ref="fileUploadRef"
|
||||
:data="form.bo"
|
||||
uploadUrl="/cailiaoshebei/materialsorder/changeTheStatusOfTheMaterials"
|
||||
:onUploadError="
|
||||
(err, file, fileList) => {
|
||||
buttonLoading = false;
|
||||
}
|
||||
"
|
||||
:limit="1"
|
||||
:onUploadSuccess="handleUploadSuccess"
|
||||
showFileList
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" type="textarea" placeholder="请输入备注" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="Cailiaoshebei" lang="ts">
|
||||
import { listCailiaoshebei, delCailiaoshebei, addCailiaoshebei, listBatch, getBatch, delBatch } from '@/api/materials/orderMaterials';
|
||||
import { CailiaoshebeiVO, CailiaoshebeiQuery, CailiaoshebeiForm } from '@/api/materials/cailiaoshebei/types';
|
||||
import { listContractor } from '@/api/project/contractor';
|
||||
import { useUserStoreHook } from '@/store/modules/user';
|
||||
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
const { overdue_type, material_status, operation_status } = toRefs<any>(
|
||||
proxy?.useDict('supply', 'material_status', 'overdue_type', 'operation_status')
|
||||
);
|
||||
// 获取用户 store
|
||||
const userStore = useUserStoreHook();
|
||||
// 从 store 中获取项目列表和当前选中的项目
|
||||
const currentProject = computed(() => userStore.selectedProject);
|
||||
const batchTreeRef = ref<any>(null);
|
||||
const cailiaoshebeiList = ref<CailiaoshebeiVO[]>([]);
|
||||
const buttonLoading = ref(false);
|
||||
const loading = ref(false);
|
||||
const showSearch = ref(true);
|
||||
const ids = ref<Array<string | number>>([]);
|
||||
const single = ref(true);
|
||||
const multiple = ref(true);
|
||||
const total = ref(0);
|
||||
const batchOptions = ref<any[]>([]);
|
||||
const fileUploadRef = ref();
|
||||
const operation_s = ref([]); // 移出函数，避免重复定义
|
||||
|
||||
const queryFormRef = ref<ElFormInstance>();
|
||||
const cailiaoshebeiFormRef = ref<ElFormInstance>();
|
||||
|
||||
const dialog = reactive<DialogOption>({
|
||||
visible: false,
|
||||
title: ''
|
||||
});
|
||||
|
||||
const initFormData: CailiaoshebeiForm = {
|
||||
id: undefined,
|
||||
batchNumber: undefined,
|
||||
supplierId: undefined,
|
||||
supplier: undefined,
|
||||
name: undefined,
|
||||
supply: undefined,
|
||||
specification: undefined,
|
||||
signalment: undefined,
|
||||
materialCode: undefined,
|
||||
arrivalTime: undefined,
|
||||
finishTime: undefined,
|
||||
unit: undefined,
|
||||
plan: undefined,
|
||||
file: null, // 确保初始化为null
|
||||
realQuantity: undefined,
|
||||
projectId: currentProject.value?.id,
|
||||
bo: {
|
||||
requiredTime: undefined,
|
||||
orderTime: undefined,
|
||||
receptionTime: undefined,
|
||||
materialStatus: undefined,
|
||||
overdueType: undefined,
|
||||
cause: undefined,
|
||||
billType: undefined,
|
||||
remark: undefined
|
||||
},
|
||||
remark: undefined
|
||||
};
|
||||
const data = reactive<PageData<CailiaoshebeiForm, CailiaoshebeiQuery>>({
|
||||
form: { ...initFormData },
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
batchNumber: undefined,
|
||||
supplierId: undefined,
|
||||
supplier: undefined,
|
||||
name: undefined,
|
||||
projectId: currentProject.value?.id,
|
||||
supply: undefined,
|
||||
specification: undefined,
|
||||
signalment: undefined,
|
||||
materialCode: undefined,
|
||||
arrivalTime: undefined,
|
||||
finishTime: undefined,
|
||||
unit: undefined,
|
||||
plan: undefined,
|
||||
realQuantity: undefined,
|
||||
params: {}
|
||||
},
|
||||
rules: {
|
||||
'bo.materialStatus': [{ required: true, message: '请选择物资执行状态', trigger: 'change' }],
|
||||
'bo.overdueType': [{ required: true, message: '请选择物资逾期类型', trigger: 'change' }],
|
||||
'bo.cause': [{ required: true, message: '请输入逾期原因', trigger: 'blur' }],
|
||||
'bo.actualArrival': [{ required: true, message: '请选择实际到货时间', trigger: 'change' }],
|
||||
'bo.receptionTime': [{ required: true, message: '请选择验收时间', trigger: 'change' }],
|
||||
'bo.acceptanceQuantity': [{ required: true, message: '请输入验收数量', trigger: 'blur' }],
|
||||
'bo.requiredTime': [{ required: true, message: '请选择需求提交时间', trigger: 'change' }],
|
||||
'bo.orderTime': [{ required: true, message: '请选择订货时间', trigger: 'change' }]
|
||||
}
|
||||
});
|
||||
|
||||
const { queryParams, form, rules } = toRefs(data);
|
||||
const batchNumber = ref('');
|
||||
|
||||
// 计算属性：判断文件是否必填
|
||||
const isFileRequired = computed(() => {
|
||||
return form.value.bo.materialStatus < 4 || form.value.bo.materialStatus == 10;
|
||||
});
|
||||
|
||||
/** 查询物资-材料设备列表 */
|
||||
const getList = async () => {
|
||||
if (!queryParams.value.batchNumber) return;
|
||||
|
||||
loading.value = true;
|
||||
const res = await listCailiaoshebei(queryParams.value);
|
||||
cailiaoshebeiList.value = res.rows;
|
||||
loading.value = false;
|
||||
};
|
||||
|
||||
// 查询批次列表
|
||||
const getBatchList = async () => {
|
||||
const res = await listBatch(queryParams.value);
|
||||
batchOptions.value = res.rows;
|
||||
total.value = res.total;
|
||||
|
||||
try {
|
||||
if (res.rows.length > 0) {
|
||||
batchTreeRef.value.setCurrentKey(res.rows[0].batchNumber);
|
||||
form.value.batchNumber = res.rows[0].batchNumber;
|
||||
queryParams.value.batchNumber = res.rows[0].batchNumber;
|
||||
}
|
||||
} catch (error) {
|
||||
form.value.batchNumber = '';
|
||||
}
|
||||
|
||||
getList();
|
||||
};
|
||||
|
||||
/** 节点单击事件 */
|
||||
const handleNodeClick = (data: any) => {
|
||||
queryParams.value.batchNumber = data.batchNumber;
|
||||
form.value.batchNumber = data.batchNumber;
|
||||
getList();
|
||||
};
|
||||
|
||||
const searchBatchList = async () => {
|
||||
queryParams.value.batchNumber = batchNumber.value;
|
||||
getBatchList();
|
||||
};
|
||||
|
||||
/** 取消按钮 */
|
||||
const cancel = () => {
|
||||
reset();
|
||||
dialog.visible = false;
|
||||
};
|
||||
|
||||
/** 表单重置 */
|
||||
const reset = () => {
|
||||
const preservedBatchId = form.value.batchNumber;
|
||||
form.value = {
|
||||
...initFormData,
|
||||
bo: { ...initFormData.bo },
|
||||
batchNumber: preservedBatchId
|
||||
};
|
||||
cailiaoshebeiFormRef.value?.resetFields();
|
||||
};
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
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;
|
||||
};
|
||||
|
||||
/** 修改按钮操作 */
|
||||
const handleUpdate = async (row?: CailiaoshebeiVO) => {
|
||||
reset();
|
||||
operation_s.value = operation_status.value.slice(0, 2);
|
||||
Object.assign(form.value.bo, row);
|
||||
handleChange(form.value.bo.materialStatus);
|
||||
dialog.visible = true;
|
||||
dialog.title = '修改物资-材料设备';
|
||||
};
|
||||
|
||||
/** 提交按钮 */
|
||||
const submitForm = () => {
|
||||
cailiaoshebeiFormRef.value?.validate(async (valid: boolean) => {
|
||||
if (valid) {
|
||||
buttonLoading.value = true;
|
||||
|
||||
// 清理空值
|
||||
Object.keys(form.value.bo).forEach((key) => {
|
||||
if (form.value.bo[key] == 'null' || form.value.bo[key] == null) {
|
||||
delete form.value.bo[key];
|
||||
}
|
||||
});
|
||||
|
||||
if (fileUploadRef.value) {
|
||||
fileUploadRef.value!.submitUpload().then((res) => {
|
||||
if (res == 'noFile') {
|
||||
proxy?.$modal.msgError('请上传文件');
|
||||
}
|
||||
});
|
||||
} else {
|
||||
await addCailiaoshebei(form.value.bo).finally(() => (buttonLoading.value = false));
|
||||
dialog.visible = false;
|
||||
getList();
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/** 删除按钮操作 */
|
||||
const handleDelete = async (row?: CailiaoshebeiVO) => {
|
||||
const _ids = row?.id || ids.value;
|
||||
await proxy?.$modal.confirm('是否确认删除物资-材料设备编号为"' + _ids + '"的数据项？').finally(() => (loading.value = false));
|
||||
await delCailiaoshebei(_ids);
|
||||
proxy?.$modal.msgSuccess('删除成功');
|
||||
await getList();
|
||||
};
|
||||
|
||||
const handleUploadSuccess = () => {
|
||||
proxy?.$modal.msgSuccess('操作成功');
|
||||
dialog.visible = false;
|
||||
buttonLoading.value = false;
|
||||
getList();
|
||||
};
|
||||
|
||||
const handleChange = (value: number) => {
|
||||
// 清空文件字段当状态改变时
|
||||
form.value.file = null;
|
||||
if (value == 1 || value == 2 || value == 3) {
|
||||
form.value.bo.operationStatus = '1';
|
||||
form.value.bo.billType = '1';
|
||||
}
|
||||
if (value == 10) {
|
||||
form.value.bo.operationStatus = '2';
|
||||
form.value.bo.billType = '2';
|
||||
}
|
||||
if (!(value < 4 || value == 10)) {
|
||||
form.value.bo.billType = '';
|
||||
} else if (value == 3) {
|
||||
form.value.bo.overdueType = '';
|
||||
form.value.bo.cause = '';
|
||||
}
|
||||
// 触发文件字段验证更新
|
||||
cailiaoshebeiFormRef.value?.validateField('file');
|
||||
};
|
||||
|
||||
/** 查询供货商列表 */
|
||||
const supplierOptions = ref([]);
|
||||
const getSupplierList = async () => {
|
||||
const res = await listContractor({
|
||||
projectId: currentProject.value?.id,
|
||||
pageNum: 1,
|
||||
pageSize: 10000
|
||||
});
|
||||
supplierOptions.value = res.rows;
|
||||
console.log('🚀 ~ getSupplierList ~ res.rows:', res.rows);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getBatchList();
|
||||
getSupplierList();
|
||||
});
|
||||
|
||||
// 监听项目id刷新数据
|
||||
const listeningProject = watch(
|
||||
() => currentProject.value?.id,
|
||||
(nid) => {
|
||||
queryParams.value.projectId = nid;
|
||||
form.value.projectId = nid;
|
||||
getBatchList();
|
||||
getSupplierList();
|
||||
}
|
||||
);
|
||||
|
||||
onUnmounted(() => {
|
||||
listeningProject();
|
||||
});
|
||||
</script>
|
||||
342
src/views/materials/overallPlanMaterialSupply/index.vue
Normal file
342
src/views/materials/overallPlanMaterialSupply/index.vue
Normal file
@ -0,0 +1,342 @@
|
||||
<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" 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>
|
||||
<right-toolbar @queryTable="getMasterDataList"></right-toolbar>
|
||||
</el-row>
|
||||
</template>
|
||||
</el-card>
|
||||
<el-table
|
||||
:data="state.tableData"
|
||||
v-loading="state.loading.list"
|
||||
stripe
|
||||
style="width: 100%; margin-bottom: 20px; height: calc(100vh - 230px)"
|
||||
row-key="id"
|
||||
border
|
||||
>
|
||||
<el-table-column 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="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="预计使用日期">
|
||||
<template #default="{ row }">
|
||||
<span>{{ row.dateService ? row.dateService.split(' ')[0] : '' }}</span>
|
||||
</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"
|
||||
@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">
|
||||
<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 } from 'vue';
|
||||
import {
|
||||
obtainMasterDataList,
|
||||
totalsupplyplan,
|
||||
totalSupplyplanDetails,
|
||||
materialChangeSupplyplan
|
||||
} 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 state = reactive({
|
||||
tableData: [],
|
||||
queryForm: {
|
||||
projectId: currentProject.value?.id,
|
||||
versions: '',
|
||||
sheet: '',
|
||||
pageSize: 20,
|
||||
pageNum: 1
|
||||
},
|
||||
loading: {
|
||||
versions: false,
|
||||
sheets: false,
|
||||
list: false
|
||||
},
|
||||
// 主id
|
||||
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' }]
|
||||
});
|
||||
// 获取主表数据
|
||||
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');
|
||||
state.tableData = [];
|
||||
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 = [];
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取主数据列表失败:', error);
|
||||
// 错误情况下给默认值，避免页面出错
|
||||
state.tableData = [];
|
||||
} 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 || '未知错误'}`);
|
||||
}
|
||||
} catch (err) {
|
||||
ElMessage.error(`接口请求失败: ${err.message}`);
|
||||
console.error('详情接口错误:', err);
|
||||
} finally {
|
||||
state.loading.list = false;
|
||||
}
|
||||
}
|
||||
// 修改
|
||||
function editApprovalSheet(row) {
|
||||
console.log(row);
|
||||
totalSupplyplanDetail(row.id);
|
||||
visible.value = true;
|
||||
}
|
||||
// 提交表单
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
// 表单验证
|
||||
await formRef.value.validate();
|
||||
// 触发提交事件
|
||||
editMaterialSupply(formData);
|
||||
handleClose();
|
||||
} catch (error) {
|
||||
// 验证失败不提交
|
||||
console.error('表单验证失败:', error);
|
||||
return;
|
||||
}
|
||||
};
|
||||
// 修改物资
|
||||
function editMaterialSupply(formData) {
|
||||
materialChangeSupplyplan(formData).then((res) => {
|
||||
if (res.code === 200) {
|
||||
ElMessage.success('修改成功');
|
||||
getMasterDataList();
|
||||
} else {
|
||||
ElMessage.error('修改失败');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 关闭弹窗
|
||||
const handleClose = () => {
|
||||
visible.value = false;
|
||||
// 清空表单数据
|
||||
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'
|
||||
}
|
||||
});
|
||||
}
|
||||
// 审核流程
|
||||
function lookApprovalFlow() {
|
||||
proxy.$router.push({
|
||||
path: `/approval/overallPlanMaterialSupply/indexEdit`,
|
||||
query: {
|
||||
id: state.masterData.id,
|
||||
type: 'view'
|
||||
}
|
||||
});
|
||||
}
|
||||
onMounted(() => {
|
||||
getMasterDataList();
|
||||
});
|
||||
</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>
|
||||
403
src/views/materials/overallPlanMaterialSupply/indexEdit.vue
Normal file
403
src/views/materials/overallPlanMaterialSupply/indexEdit.vue
Normal file
@ -0,0 +1,403 @@
|
||||
<template>
|
||||
<div class="p-4 bg-gray-50">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<!-- 顶部按钮区域 -->
|
||||
<el-card class="mb-4 rounded-lg shadow-sm bg-white border border-gray-100 transition-all hover:shadow-md">
|
||||
<approvalButton
|
||||
@submitForm="submitForm"
|
||||
@approvalVerifyOpen="approvalVerifyOpen"
|
||||
@handleApprovalRecord="handleApprovalRecord"
|
||||
:buttonLoading="buttonLoading"
|
||||
:id="form.id"
|
||||
:status="form.status"
|
||||
:pageType="routeParams.type"
|
||||
/>
|
||||
</el-card>
|
||||
<!-- 表单区域 -->
|
||||
<el-card class="rounded-lg shadow-sm bg-white border border-gray-100 transition-all hover:shadow-md overflow-hidden">
|
||||
<div class="p-4 bg-gradient-to-r from-blue-50 to-indigo-50 border-b border-gray-100">
|
||||
<h3 class="text-lg font-semibold text-gray-800">设计原则</h3>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<!-- <el-form ref="leaveFormRef" v-loading="loading" :disabled="routeParams.type === 'view' || form.status == 'waiting' || routeParams.type === 'update'" :model="form"
|
||||
:rules="rules" label-width="100px" class="space-y-4">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="批次号" prop="batchNumber">
|
||||
<el-input disabled v-model="form.batchNumber" placeholder="请输入批次号" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="品牌" prop="brand">
|
||||
<el-input v-model="form.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="form.texture" placeholder="请输入材质" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="质量标准" prop="qualityStandard">
|
||||
<el-input v-model="form.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="form.partUsed" placeholder="请输入使用部位" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="交货地点" prop="deliveryPoints">
|
||||
<el-input v-model="form.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="form.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="form.remark" placeholder="请输入备注信息" type="textarea" rows="3" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form> -->
|
||||
<el-table :data="tableData" v-loading="loading" row-key="id" 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="remark" label="备注" />
|
||||
</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 ComponentInternalInstance;
|
||||
import { useUserStoreHook } from '@/store/modules/user';
|
||||
const { design_change_reason_type } = toRefs<any>(proxy?.useDict('design_change_reason_type'));
|
||||
import { totalsupplyplan, obtainMasterDataList } from '@/api/materials/overallPlanMaterialSupply/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 + '_totalsupplyplan',
|
||||
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 = {
|
||||
batchNumber: '',
|
||||
brand: '',
|
||||
compileDate: '',
|
||||
dateService: '',
|
||||
deliveryPoints: '',
|
||||
id: undefined,
|
||||
name: '',
|
||||
num: '',
|
||||
partUsed: '',
|
||||
planNumber: '',
|
||||
projectId: undefined,
|
||||
qualityStandard: '',
|
||||
quantity: 0,
|
||||
remark: '',
|
||||
specification: '',
|
||||
status: '',
|
||||
texture: '',
|
||||
unit: ''
|
||||
};
|
||||
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 masterDataRes = await obtainMasterDataList({ projectId: currentProject.value?.id });
|
||||
const res = await totalsupplyplan(routeParams.value.id);
|
||||
console.log('res.data', masterDataRes);
|
||||
Object.assign(form.value, masterDataRes?.data[0]);
|
||||
// console.log('form', form.value);
|
||||
tableData.value = res.rows;
|
||||
loading.value = false;
|
||||
buttonLoading.value = false;
|
||||
});
|
||||
};
|
||||
|
||||
/** 提交按钮 */
|
||||
const submitForm = (status1: string) => {
|
||||
status.value = status1;
|
||||
submit(status.value, form.value);
|
||||
};
|
||||
|
||||
const submitFlow = async () => {
|
||||
handleStartWorkFlow(form.value);
|
||||
dialogVisible.visible = false;
|
||||
};
|
||||
//提交申请
|
||||
const handleStartWorkFlow = async (data: LeaveForm) => {
|
||||
try {
|
||||
submitFormData.value.flowCode = flowCode.value;
|
||||
submitFormData.value.businessId = data.id;
|
||||
//流程变量
|
||||
taskVariables.value = {
|
||||
// leave4/5 使用的流程变量
|
||||
userList: ['1', '3', '4']
|
||||
};
|
||||
submitFormData.value.variables = taskVariables.value;
|
||||
const resp = await startWorkFlow(submitFormData.value);
|
||||
if (submitVerifyRef.value) {
|
||||
buttonLoading.value = false;
|
||||
submitVerifyRef.value.openDialog(resp.data.taskId);
|
||||
}
|
||||
} finally {
|
||||
buttonLoading.value = false;
|
||||
}
|
||||
};
|
||||
//审批记录
|
||||
const handleApprovalRecord = () => {
|
||||
approvalRecordRef.value.init(form.value.id);
|
||||
};
|
||||
//提交回调
|
||||
const submitCallback = async () => {
|
||||
await proxy.$tab.closePage(proxy.$route);
|
||||
proxy.$router.go(-1);
|
||||
};
|
||||
//审批
|
||||
const approvalVerifyOpen = async () => {
|
||||
submitVerifyRef.value.openDialog(routeParams.value.taskId);
|
||||
};
|
||||
// 图纸上传成功之后 开始提交
|
||||
const submit = async (status, data) => {
|
||||
form.value = data;
|
||||
if (status === 'draft') {
|
||||
buttonLoading.value = false;
|
||||
proxy?.$modal.msgSuccess('暂存成功');
|
||||
proxy.$tab.closePage(proxy.$route);
|
||||
proxy.$router.go(-1);
|
||||
} else {
|
||||
if ((form.value.status === 'draft' && (flowCode.value === '' || flowCode.value === null)) || routeParams.value.type === 'add') {
|
||||
flowCode.value = flowCodeOptions[0].value;
|
||||
dialogVisible.visible = true;
|
||||
return;
|
||||
}
|
||||
//说明启动过先随意穿个参数
|
||||
if (flowCode.value === '' || flowCode.value === null) {
|
||||
flowCode.value = 'xx';
|
||||
}
|
||||
await handleStartWorkFlow(data);
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
nextTick(async () => {
|
||||
routeParams.value = proxy.$route.query;
|
||||
reset();
|
||||
loading.value = false;
|
||||
if (routeParams.value.type === 'update' || routeParams.value.type === 'view' || routeParams.value.type === 'approval') {
|
||||
getInfo();
|
||||
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>
|
||||
244
src/views/materials/purchaseDoc/comm/logisticsDetail.vue
Normal file
244
src/views/materials/purchaseDoc/comm/logisticsDetail.vue
Normal file
@ -0,0 +1,244 @@
|
||||
<template>
|
||||
<el-drawer v-model="drawer" :direction="direction" size="40%" :before-close="handleBeforeClose" title-class="drawer-title">
|
||||
<template #header>
|
||||
<span class="font-bold text-lg text-gray-800">物流信息</span>
|
||||
</template>
|
||||
<template #default>
|
||||
<!-- 物流头部信息 -->
|
||||
<div class="bg-white rounded-lg shadow-md p-5 mb-6">
|
||||
<div class="flex flex-col md:flex-row md:items-center justify-between gap-6">
|
||||
<!-- 左侧：快递基本信息 -->
|
||||
<div class="flex items-center gap-6">
|
||||
<div class="w-14 h-14 rounded-md overflow-hidden border border-gray-100 flex items-center justify-center">
|
||||
<img
|
||||
:src="logisticsData?.result.logo"
|
||||
alt="快递公司Logo"
|
||||
class="w-full h-full object-contain"
|
||||
:onerror="`this.src='https://via.placeholder.com/48x48?text=暂无Logo'`"
|
||||
/>
|
||||
</div>
|
||||
<div class="text-sm">
|
||||
<p class="text-gray-500">快递单号</p>
|
||||
<p class="font-medium text-gray-900">{{ logisticsData?.result.number }}</p>
|
||||
<p class="text-gray-500 mt-1">{{ logisticsData?.result.expName }} | 最新更新: {{ logisticsData?.result.updateTime }}</p>
|
||||
</div>
|
||||
<div class="ml-auto">
|
||||
<el-tag :type="getStatusType(logisticsData?.result.deliverystatus)" size="medium" class="px-4 py-1">
|
||||
{{ getStatusText(logisticsData?.result.deliverystatus) }}
|
||||
</el-tag>
|
||||
<p class="text-gray-500 text-sm mt-2 text-right">耗时: {{ logisticsData?.result.takeTime || '暂无数据' }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 快递员信息（有数据才显示） -->
|
||||
<div v-if="logisticsData?.result.courier" class="bg-blue-50 rounded-lg p-4 mb-6 border-l-4 border-blue-400">
|
||||
<div class="flex items-center justify-between">
|
||||
<p class="font-medium text-blue-800">配送信息</p>
|
||||
<a :href="`tel:${logisticsData?.result.courierPhone}`" class="text-blue-600 hover:text-blue-800 text-sm flex items-center gap-1">
|
||||
<el-icon class="el-icon-phone"></el-icon>
|
||||
联系快递员
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-x-8 gap-y-3 mt-3 text-gray-700">
|
||||
<div class="flex items-center gap-2">
|
||||
<el-icon class="el-icon-user text-gray-500"></el-icon>
|
||||
<span>快递员: {{ logisticsData?.result.courier }}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<el-icon class="el-icon-phone-outline text-gray-500"></el-icon>
|
||||
<span>电话: {{ logisticsData?.result.courierPhone || '暂无' }}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<el-icon class="el-icon-service text-gray-500"></el-icon>
|
||||
<span>客服: {{ logisticsData?.result.expPhone }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 物流轨迹列表 -->
|
||||
<div class="bg-white rounded-lg shadow-md p-5">
|
||||
<p class="font-medium text-gray-800 mb-4">物流轨迹（{{ logisticsData?.result.list.length || 0 }}条）</p>
|
||||
<div class="relative" style="border-left: 1px solid #d9d9d9; padding-left: 15px">
|
||||
<div v-for="(item, index) in logisticsData?.result.list" :key="index" class="flex mb-8 relative">
|
||||
<div class="flex flex-col items-center mr-6 z-10">
|
||||
<div
|
||||
:class="[
|
||||
'w-8 h-8 rounded-full flex items-center justify-center',
|
||||
index === 0 ? 'bg-blue-500 text-white' : 'bg-white border border-gray-300 text-gray-500'
|
||||
]"
|
||||
>
|
||||
<el-icon v-if="index === 0" class="el-icon-check text-xs"></el-icon>
|
||||
<span v-else class="text-xs">{{ index + 1 }}</span>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500 mt-2">{{ item.time }}</p>
|
||||
</div>
|
||||
<div class="flex-1 bg-gray-50 rounded-lg p-4 border border-gray-100 shadow-sm">
|
||||
<p class="text-gray-800">{{ item.status }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #footer>
|
||||
<div class="drawer-footer">
|
||||
<el-button @click="close" :loading="cancelLoading" class="mr-3">关闭</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import type { DrawerProps } from 'element-plus';
|
||||
import { Phone, PhoneOutline, User, Service, Check } from '@element-plus/icons-vue';
|
||||
|
||||
// 抽屉方向
|
||||
const direction = ref<DrawerProps['direction']>('ltr');
|
||||
// 加载状态
|
||||
const cancelLoading = ref(false);
|
||||
const confirmLoading = ref(false);
|
||||
// 抽屉显隐
|
||||
const drawer = ref(false);
|
||||
// 物流数据（初始化为接口返回格式）
|
||||
const logisticsData = ref({
|
||||
status: '0',
|
||||
msg: 'ok',
|
||||
result: {
|
||||
number: '',
|
||||
type: '',
|
||||
list: [],
|
||||
deliverystatus: '0',
|
||||
issign: '0',
|
||||
expName: '',
|
||||
expSite: '',
|
||||
expPhone: '',
|
||||
courier: '',
|
||||
courierPhone: '',
|
||||
updateTime: '',
|
||||
takeTime: '',
|
||||
logo: ''
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* 根据物流状态获取标签类型
|
||||
* @param status 物流状态码
|
||||
*/
|
||||
const getStatusType = (status?: string) => {
|
||||
switch (status) {
|
||||
case '0': // 揽件
|
||||
return 'info';
|
||||
case '1': // 在途中
|
||||
return 'warning';
|
||||
case '2': // 派件中
|
||||
return 'primary';
|
||||
case '3': // 已签收
|
||||
return 'success';
|
||||
case '4': // 派送失败
|
||||
case '5': // 疑难件
|
||||
return 'danger';
|
||||
case '6': // 退件签收
|
||||
return 'error';
|
||||
default:
|
||||
return 'default';
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 根据物流状态获取文本描述
|
||||
* @param status 物流状态码
|
||||
*/
|
||||
const getStatusText = (status?: string) => {
|
||||
const statusMap: Record<string, string> = {
|
||||
'0': '快递收件(揽件)',
|
||||
'1': '运输途中',
|
||||
'2': '正在派件',
|
||||
'3': '已签收',
|
||||
'4': '派送失败',
|
||||
'5': '疑难件',
|
||||
'6': '退件签收'
|
||||
};
|
||||
return statusMap[status || '0'] || '未知状态';
|
||||
};
|
||||
|
||||
/**
|
||||
* 打开抽屉并加载物流数据
|
||||
*/
|
||||
const open = (data) => {
|
||||
const mockData = {
|
||||
result: data
|
||||
};
|
||||
logisticsData.value = mockData;
|
||||
drawer.value = true;
|
||||
};
|
||||
/**
|
||||
* 关闭抽屉
|
||||
*/
|
||||
const close = () => {
|
||||
drawer.value = false;
|
||||
};
|
||||
|
||||
/**
|
||||
* 抽屉关闭前钩子（可用于拦截关闭逻辑）
|
||||
*/
|
||||
const handleBeforeClose = (done: () => void) => {
|
||||
done(); // 直接关闭，如需确认可添加弹窗逻辑
|
||||
};
|
||||
|
||||
// 暴露加载状态控制方法
|
||||
const setCancelLoading = (loading: boolean) => {
|
||||
cancelLoading.value = loading;
|
||||
};
|
||||
const setConfirmLoading = (loading: boolean) => {
|
||||
confirmLoading.value = loading;
|
||||
};
|
||||
|
||||
// 暴露方法供父组件调用
|
||||
defineExpose({
|
||||
open,
|
||||
setCancelLoading,
|
||||
setConfirmLoading
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.drawer-title {
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid #f2f2f2;
|
||||
}
|
||||
|
||||
.drawer-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
:deep(.el-drawer__body) {
|
||||
padding: 20px;
|
||||
overflow-y: auto;
|
||||
max-height: calc(100vh - 160px);
|
||||
}
|
||||
|
||||
:deep(.el-tag) {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
:deep(.el-drawer) {
|
||||
width: 95% !important;
|
||||
}
|
||||
|
||||
.drawer-footer {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
:deep(.drawer-footer .el-button) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
569
src/views/materials/purchaseDoc/index.vue
Normal file
569
src/views/materials/purchaseDoc/index.vue
Normal file
@ -0,0 +1,569 @@
|
||||
<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="100px">
|
||||
<el-form-item label="采购单编号" prop="docCode">
|
||||
<el-input v-model="queryParams.docCode" placeholder="请输入采购单编号" clearable @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<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-date-picker clearable v-model="queryParams.arrivalDate" 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>
|
||||
</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="['cailiaoshebei:purchaseDoc:add']">新增</el-button>
|
||||
</el-col>
|
||||
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
</template>
|
||||
<el-table v-loading="loading" :data="purchaseDocList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="index" width="60" label="序号" align="center" />
|
||||
<el-table-column label="采购单编号" align="center" prop="docCode" width="150" />
|
||||
<el-table-column label="批次号" align="center" prop="mrpBaseId">
|
||||
<template #default="scope">
|
||||
{{ batchOptions.find((item) => item.id == scope.row.mrpBaseId)?.planCode }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="供应商" align="center" prop="supplier" />
|
||||
<el-table-column label="设备统称" align="center" prop="name" />
|
||||
<el-table-column label="到货日期" align="center" prop="arrivalDate" width="120">
|
||||
<template #default="scope">
|
||||
<span>{{ parseTime(scope.row.arrivalDate, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="收货地址" align="center" prop="receivingAddress" />
|
||||
<el-table-column label="联系人" align="center" prop="contacts" />
|
||||
<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="['out:monthPlan:remove']">查看物流单</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="采购经办人" align="center" prop="purchasingAgent" width="90" />
|
||||
<el-table-column label="日期" align="center" prop="preparedDate" width="120">
|
||||
<template #default="scope">
|
||||
<span>{{ parseTime(scope.row.preparedDate, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="供应商返回" align="center" prop="feedbackUrl" width="130">
|
||||
<template #default="scope">
|
||||
<el-link :href="scope.row.feedbackUrl" target="_blank" type="primary" v-if="scope.row.feedbackUrl">回单</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"></dict-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" fixed="right" width="160">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
v-if="scope.row.status == 'draft' || scope.row.status == 'back'"
|
||||
icon="Finished"
|
||||
@click="handleAudit(scope.row)"
|
||||
v-hasPermi="['cailiaoshebei:purchaseDoc:edit']"
|
||||
>
|
||||
审核</el-button
|
||||
>
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
v-if="scope.row.status != 'draft'"
|
||||
icon="view"
|
||||
@click="handleViewDetail(scope.row)"
|
||||
v-hasPermi="['cailiaoshebei:purchaseDoc:edit']"
|
||||
>
|
||||
查看</el-button
|
||||
>
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
v-if="!scope.row.feedbackUrl && scope.row.status == 'finish'"
|
||||
icon="Upload"
|
||||
@click="handleUpload(scope.row)"
|
||||
v-hasPermi="['cailiaoshebei:purchaseDoc:edit']"
|
||||
>上传</el-button
|
||||
>
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
icon="Edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
v-if="scope.row.status == 'draft'"
|
||||
v-hasPermi="['cailiaoshebei:purchaseDoc:edit']"
|
||||
>修改</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: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="purchaseDocFormRef" :model="form" :rules="rules" label-width="120px">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12" :offset="0"
|
||||
><el-form-item label="采购单编号" prop="docCode"> <el-input v-model="form.docCode" placeholder="请输入采购单编号" /> </el-form-item
|
||||
></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> </el-form-item
|
||||
></el-col>
|
||||
<el-col :span="12" :offset="0"
|
||||
><el-form-item label="需求批次号" prop="mrpBaseId">
|
||||
<el-select v-model="form.mrpBaseId" value-key="id" placeholder="请选择需求批次号" filterable @change="getPlanList">
|
||||
<el-option v-for="item in batchOptions" :key="item.id" :label="item.planCode" :value="item.id"> </el-option>
|
||||
</el-select> </el-form-item
|
||||
></el-col>
|
||||
<el-col :span="12" :offset="0">
|
||||
<el-form-item label="需求计划" prop="planId">
|
||||
<el-select v-model="form.planId" value-key="id" placeholder="请选择需求计划" multiple filterable :disabled="!form.mrpBaseId">
|
||||
<el-option v-for="item in planList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
|
||||
</el-select> </el-form-item
|
||||
></el-col>
|
||||
<el-col :span="12" :offset="0"
|
||||
><el-form-item label="事由" prop="reason"> <el-input v-model="form.reason" placeholder="请输入事由" /> </el-form-item
|
||||
></el-col>
|
||||
<el-col :span="12" :offset="0">
|
||||
<el-form-item label="设备统称" prop="name"> <el-input v-model="form.name" placeholder="请输入设备统称" /> </el-form-item
|
||||
></el-col>
|
||||
<el-col :span="12" :offset="0"
|
||||
><el-form-item label="到货日期" prop="arrivalDate">
|
||||
<el-date-picker clearable v-model="form.arrivalDate" type="date" value-format="YYYY-MM-DD" placeholder="请选择到货日期">
|
||||
</el-date-picker> </el-form-item
|
||||
></el-col>
|
||||
<el-col :span="12" :offset="0"
|
||||
><el-form-item label="负责人联系方式" prop="designDirectorTel">
|
||||
<el-input v-model="form.designDirectorTel" placeholder="请输入设计负责人联系方式" /> </el-form-item
|
||||
></el-col>
|
||||
<el-col :span="12" :offset="0"
|
||||
><el-form-item label="现场联系方式" prop="technicalDirectorTel">
|
||||
<el-input v-model="form.technicalDirectorTel" placeholder="请输入现场技术负责人联系方式" /> </el-form-item
|
||||
></el-col>
|
||||
<el-col :span="12" :offset="0">
|
||||
<el-form-item label="收货地址" prop="receivingAddress">
|
||||
<el-input v-model="form.receivingAddress" placeholder="请输入收货地址" /> </el-form-item
|
||||
></el-col>
|
||||
<el-col :span="12" :offset="0">
|
||||
<el-form-item label="联系人" prop="contacts"> <el-input v-model="form.contacts" placeholder="请输入联系人" /> </el-form-item
|
||||
></el-col>
|
||||
<el-col :span="12" :offset="0"
|
||||
><el-form-item label="项目负责人" prop="projectDirector">
|
||||
<el-input v-model="form.projectDirector" placeholder="请输入项目负责人" /> </el-form-item
|
||||
></el-col>
|
||||
<el-col :span="12" :offset="0"
|
||||
><el-form-item label="采购经办人" prop="purchasingAgent">
|
||||
<el-input v-model="form.purchasingAgent" placeholder="请输入采购经办人" /> </el-form-item
|
||||
></el-col>
|
||||
<!-- <el-col :span="12" :offset="0"
|
||||
><el-form-item label="日期" prop="preparedDate">
|
||||
<el-date-picker clearable v-model="form.preparedDate" type="date" value-format="YYYY-MM-DD" placeholder="请选择日期">
|
||||
</el-date-picker> </el-form-item
|
||||
></el-col> -->
|
||||
</el-row>
|
||||
</el-form>
|
||||
<el-table v-loading="loading" :data="selectPlanList" v-if="form.id">
|
||||
<el-table-column label="物资名称" align="center" prop="name" />
|
||||
|
||||
<el-table-column label="质量标准" align="center" prop="qs" />
|
||||
<el-table-column label="规格型号" align="center" prop="specification" />
|
||||
<el-table-column label="计量单位" align="center" prop="unit" width="80" />
|
||||
<el-table-column label="需求数量" align="center" prop="demandQuantity" v-if="form.docType == 2">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.demandQuantity" placeholder="请输入" type="number" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="需求数量" align="center" prop="demandQuantity" v-else />
|
||||
<!-- <el-table-column label="需求到货时间" align="center" prop="arrivalTime" width="250" /> -->
|
||||
<el-table-column label="备注" align="center" prop="remark" />
|
||||
</el-table>
|
||||
<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>
|
||||
<el-dialog title="上传文件" v-model="uploadDialogVisible" width="30%">
|
||||
<file-upload v-model="feedbackUrl" :file-type="['pdf']" :onUploadSuccess="handleSuccess" />
|
||||
<template #footer>
|
||||
<span>
|
||||
<el-button @click="uploadDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="uploadFile">确定</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<!-- 查看文件列表 -->
|
||||
<el-dialog title="物流单号" v-model="viewVisible" width="45%">
|
||||
<el-table v-if="fileList.length > 0" :data="fileList" style="width: 100%" border>
|
||||
<el-table-column label="单号" align="center" prop="ltn" />
|
||||
<el-table-column label="数量" align="center" prop="num" />
|
||||
<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-table-column>
|
||||
</el-table>
|
||||
<div v-else class="empty-list text-center">暂无文件</div>
|
||||
<template #footer>
|
||||
<span>
|
||||
<el-button type="primary" @click="viewVisible = false">关闭</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<logisticsDetail ref="logisticsDetailRef"></logisticsDetail>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="PurchaseDoc" lang="ts">
|
||||
import { getBatch, listBatch } from '@/api/materials/batchPlan';
|
||||
import { listPurchaseDoc, getPurchaseDoc, listLink, addPurchaseDoc, updatePurchaseDoc, logisticsDetial } from '@/api/materials/purchaseDoc';
|
||||
import { PurchaseDocVO, PurchaseDocQuery, PurchaseDocForm } from '@/api/materials/purchaseDoc/types';
|
||||
import { listContractor } from '@/api/project/contractor';
|
||||
import { useUserStoreHook } from '@/store/modules/user';
|
||||
import { getToken } from '@/utils/auth';
|
||||
import logisticsDetail from './comm/logisticsDetail.vue';
|
||||
import type { DrawerProps } from 'element-plus';
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const { supply, wf_business_status } = toRefs<any>(proxy?.useDict('supply', 'wf_business_status'));
|
||||
// 获取用户 store
|
||||
const userStore = useUserStoreHook();
|
||||
// 从 store 中获取项目列表和当前选中的项目
|
||||
const currentProject = computed(() => userStore.selectedProject);
|
||||
const uploadDialogVisible = ref(false);
|
||||
const purchaseDocList = ref<PurchaseDocVO[]>([]);
|
||||
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 feedbackUrl = ref('');
|
||||
// 组件
|
||||
const logisticsDetailRef = ref<InstanceType<typeof logisticsDetail>>();
|
||||
const queryFormRef = ref<ElFormInstance>();
|
||||
const purchaseDocFormRef = ref<ElFormInstance>();
|
||||
const IP = 'http://192.168.110.151:7788';
|
||||
const dialog = reactive<DialogOption>({
|
||||
visible: false,
|
||||
title: ''
|
||||
});
|
||||
const batchOptions = ref([]);
|
||||
const supplierOptions = ref([]);
|
||||
|
||||
const planList = ref([]);
|
||||
const initFormData: any = {
|
||||
id: undefined,
|
||||
projectId: currentProject.value?.id,
|
||||
|
||||
docCode: undefined,
|
||||
supplier: undefined,
|
||||
reason: undefined,
|
||||
name: undefined,
|
||||
arrivalDate: undefined,
|
||||
designDirectorTel: undefined,
|
||||
technicalDirectorTel: undefined,
|
||||
receivingAddress: undefined,
|
||||
contacts: undefined,
|
||||
associationList: [],
|
||||
projectDirector: undefined,
|
||||
purchasingAgent: undefined,
|
||||
preparedDate: undefined,
|
||||
feedbackUrl: undefined,
|
||||
signingUnit: undefined,
|
||||
signingPerson: undefined,
|
||||
signingDate: undefined,
|
||||
status: undefined
|
||||
};
|
||||
const data = reactive({
|
||||
form: { ...initFormData },
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
projectId: currentProject.value?.id,
|
||||
|
||||
docCode: undefined,
|
||||
supplier: undefined,
|
||||
reason: undefined,
|
||||
name: undefined,
|
||||
arrivalDate: undefined,
|
||||
designDirectorTel: undefined,
|
||||
technicalDirectorTel: undefined,
|
||||
receivingAddress: undefined,
|
||||
contacts: undefined,
|
||||
projectDirector: undefined,
|
||||
purchasingAgent: undefined,
|
||||
preparedDate: undefined,
|
||||
feedbackUrl: undefined,
|
||||
signingUnit: undefined,
|
||||
signingPerson: undefined,
|
||||
signingDate: undefined,
|
||||
status: undefined,
|
||||
params: {}
|
||||
},
|
||||
rules: {
|
||||
id: [{ required: true, message: '主键ID不能为空', trigger: 'blur' }],
|
||||
// 电话号码验证
|
||||
technicalDirectorTel: [
|
||||
{ required: true, message: '请输入电话', trigger: 'blur' },
|
||||
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
|
||||
],
|
||||
designDirectorTel: [
|
||||
{ required: true, message: '请输入电话', trigger: 'blur' },
|
||||
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
});
|
||||
|
||||
const { queryParams, form, rules } = toRefs(data);
|
||||
|
||||
/** 查询物资-采购联系单列表 */
|
||||
const getList = async () => {
|
||||
loading.value = true;
|
||||
const res = await listPurchaseDoc(queryParams.value);
|
||||
purchaseDocList.value = res.rows;
|
||||
total.value = res.total;
|
||||
loading.value = false;
|
||||
};
|
||||
|
||||
/** 取消按钮 */
|
||||
const cancel = () => {
|
||||
reset();
|
||||
dialog.visible = false;
|
||||
};
|
||||
|
||||
/** 表单重置 */
|
||||
const reset = () => {
|
||||
form.value = { ...initFormData };
|
||||
purchaseDocFormRef.value?.resetFields();
|
||||
form.value.projectId = currentProject.value?.id;
|
||||
};
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
const handleQuery = () => {
|
||||
queryParams.value.pageNum = 1;
|
||||
getList();
|
||||
};
|
||||
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value?.resetFields();
|
||||
handleQuery();
|
||||
};
|
||||
|
||||
const fileList = ref([]);
|
||||
const viewVisible = ref(false);
|
||||
const handleView = async (row?: any) => {
|
||||
const res = await listLink({
|
||||
docId: row.id
|
||||
});
|
||||
fileList.value = res.rows;
|
||||
|
||||
viewVisible.value = true;
|
||||
};
|
||||
|
||||
/** 多选框选中数据 */
|
||||
const handleSelectionChange = (selection: PurchaseDocVO[]) => {
|
||||
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?: PurchaseDocVO) => {
|
||||
reset();
|
||||
const _id = row?.id || ids.value[0];
|
||||
const res = await getPurchaseDoc(_id);
|
||||
Object.assign(form.value, res.data);
|
||||
getPlanList();
|
||||
form.value.planId = form.value.associationList?.map((item: any) => item.planId);
|
||||
|
||||
dialog.visible = true;
|
||||
dialog.title = '修改物资-采购联系单';
|
||||
};
|
||||
|
||||
const selectPlanList = computed(() => {
|
||||
if (!form.value.planId) return [];
|
||||
const result = planList.value.filter((item) => form.value.planId.includes(item.id));
|
||||
return result;
|
||||
});
|
||||
|
||||
/** 提交按钮 */
|
||||
const submitForm = () => {
|
||||
purchaseDocFormRef.value?.validate(async (valid: boolean) => {
|
||||
if (valid) {
|
||||
buttonLoading.value = true;
|
||||
form.value.associationList = form.value.planId?.map((item: any) => ({
|
||||
planId: item
|
||||
}));
|
||||
|
||||
if (form.value.id) {
|
||||
await updatePurchaseDoc(form.value).finally(() => (buttonLoading.value = false));
|
||||
} else {
|
||||
await addPurchaseDoc(form.value).finally(() => (buttonLoading.value = false));
|
||||
}
|
||||
proxy?.$modal.msgSuccess('操作成功');
|
||||
dialog.visible = false;
|
||||
await getList();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const getPlanList = async () => {
|
||||
form.value.planId = '';
|
||||
const res = await getBatch({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
projectId: currentProject.value?.id,
|
||||
mrpBaseId: form.value.mrpBaseId
|
||||
});
|
||||
planList.value = res.rows;
|
||||
};
|
||||
|
||||
const getBatchList = async () => {
|
||||
const res = await listBatch({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
planCode: undefined,
|
||||
projectId: currentProject.value?.id
|
||||
});
|
||||
batchOptions.value = res.rows.filter((item) => item.status == 'finish');
|
||||
};
|
||||
|
||||
const getSupplierList = async () => {
|
||||
const res = await listContractor({
|
||||
projectId: currentProject.value?.id,
|
||||
pageNum: 1,
|
||||
contractorType: 4,
|
||||
pageSize: 10000
|
||||
});
|
||||
supplierOptions.value = res.rows;
|
||||
};
|
||||
|
||||
/** 分享按钮操作 */
|
||||
const handleShare = async (row?: PurchaseDocVO) => {
|
||||
const textarea = document.createElement('textarea');
|
||||
const data = JSON.stringify({
|
||||
docId: row.id,
|
||||
mrpBaseId: row.mrpBaseId,
|
||||
projectId: currentProject.value?.id,
|
||||
token: 'Bearer ' + getToken()
|
||||
});
|
||||
// 获取当前域名地址
|
||||
console.log(location);
|
||||
// textarea.value = IP + '/materials/purchaseDoc/uploadCode?data=' + data;
|
||||
textarea.value = location.host + '/materials/purchaseDoc/uploadCode?data=' + data;
|
||||
textarea.style.position = 'fixed';
|
||||
textarea.style.opacity = '0';
|
||||
document.body.appendChild(textarea);
|
||||
textarea.select();
|
||||
const success = document.execCommand('copy');
|
||||
document.body.removeChild(textarea);
|
||||
ElMessage[success ? 'success' : 'error'](success ? '复制成功！' : '复制失败');
|
||||
};
|
||||
|
||||
/** 导出按钮操作 */
|
||||
const handleUpload = (row?: PurchaseDocVO) => {
|
||||
form.value.feedbackUrl = '';
|
||||
form.value.id = row.id;
|
||||
uploadDialogVisible.value = true;
|
||||
};
|
||||
|
||||
const uploadFile = async () => {
|
||||
if (!feedbackUrl.value) {
|
||||
proxy?.$modal.msgError('请上传文件');
|
||||
return;
|
||||
}
|
||||
await updatePurchaseDoc(form.value).finally(() => (buttonLoading.value = false));
|
||||
proxy?.$modal.msgSuccess('操作成功');
|
||||
uploadDialogVisible.value = false;
|
||||
|
||||
await getList();
|
||||
};
|
||||
|
||||
const handleSuccess = (list, res: any) => {
|
||||
form.value.feedbackUrl = res.data.url;
|
||||
};
|
||||
|
||||
/** 审核按钮操作 */
|
||||
const handleAudit = async (row?: PurchaseDocVO) => {
|
||||
proxy?.$tab.closePage(route);
|
||||
proxy?.$tab.openPage('/approval/purchaseDoc/indexEdit', '审核采购联系单', {
|
||||
id: row.id,
|
||||
type: 'update'
|
||||
});
|
||||
};
|
||||
/** 审核按钮操作 */
|
||||
const handleViewDetail = async (row?: PurchaseDocVO) => {
|
||||
proxy?.$tab.closePage(route);
|
||||
proxy?.$tab.openPage('/approval/purchaseDoc/indexEdit', '审核采购联系单', {
|
||||
id: row.id,
|
||||
type: 'view'
|
||||
});
|
||||
};
|
||||
const getDetailList = async (id) => {
|
||||
let res = await logisticsDetial(id);
|
||||
if (res.code == 200) {
|
||||
logisticsDetailRef.value.open(res.data);
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
getSupplierList();
|
||||
getBatchList();
|
||||
});
|
||||
|
||||
//监听项目id刷新数据
|
||||
const listeningProject = watch(
|
||||
() => currentProject.value?.id,
|
||||
(nid, oid) => {
|
||||
queryParams.value.projectId = nid;
|
||||
form.value.projectId = nid;
|
||||
getList();
|
||||
getSupplierList();
|
||||
getBatchList();
|
||||
}
|
||||
);
|
||||
|
||||
onUnmounted(() => {
|
||||
listeningProject();
|
||||
});
|
||||
</script>
|
||||
439
src/views/materials/purchaseDoc/indexEdit.vue
Normal file
439
src/views/materials/purchaseDoc/indexEdit.vue
Normal file
@ -0,0 +1,439 @@
|
||||
<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" label-width="100px" class="space-y-4">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12" :offset="0"
|
||||
><el-form-item label="采购单编号" prop="docCode"> <el-input v-model="form.docCode" placeholder="请输入采购单编号" /> </el-form-item
|
||||
></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> </el-form-item
|
||||
></el-col>
|
||||
<el-col :span="12" :offset="0"
|
||||
><el-form-item label="需求批次号" prop="mrpBaseId">
|
||||
<el-select v-model="form.mrpBaseId" value-key="id" placeholder="请选择需求批次号" filterable @change="getPlanList">
|
||||
<el-option v-for="item in batchOptions" :key="item.id" :label="item.planCode" :value="item.id"> </el-option>
|
||||
</el-select> </el-form-item
|
||||
></el-col>
|
||||
<el-col :span="12" :offset="0">
|
||||
<el-form-item label="需求计划" prop="planId">
|
||||
<el-select v-model="form.planId" value-key="id" placeholder="请选择需求计划" multiple filterable :disabled="!form.mrpBaseId">
|
||||
<el-option v-for="item in planList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
|
||||
</el-select> </el-form-item
|
||||
></el-col>
|
||||
<el-col :span="12" :offset="0"
|
||||
><el-form-item label="事由" prop="reason"> <el-input v-model="form.reason" placeholder="请输入事由" /> </el-form-item
|
||||
></el-col>
|
||||
<el-col :span="12" :offset="0">
|
||||
<el-form-item label="设备统称" prop="name"> <el-input v-model="form.name" placeholder="请输入设备统称" /> </el-form-item
|
||||
></el-col>
|
||||
<el-col :span="12" :offset="0"
|
||||
><el-form-item label="到货日期" prop="arrivalDate">
|
||||
<el-date-picker clearable v-model="form.arrivalDate" type="date" value-format="YYYY-MM-DD" placeholder="请选择到货日期">
|
||||
</el-date-picker> </el-form-item
|
||||
></el-col>
|
||||
<el-col :span="12" :offset="0"
|
||||
><el-form-item label="负责人联系方式" prop="designDirectorTel">
|
||||
<el-input v-model="form.designDirectorTel" placeholder="请输入设计负责人联系方式" type="number" /> </el-form-item
|
||||
></el-col>
|
||||
<el-col :span="12" :offset="0"
|
||||
><el-form-item label="现场联系方式" prop="technicalDirectorTel">
|
||||
<el-input v-model="form.technicalDirectorTel" placeholder="请输入现场技术负责人联系方式" type="number" /> </el-form-item
|
||||
></el-col>
|
||||
<el-col :span="12" :offset="0">
|
||||
<el-form-item label="收货地址" prop="receivingAddress">
|
||||
<el-input v-model="form.receivingAddress" placeholder="请输入收货地址" /> </el-form-item
|
||||
></el-col>
|
||||
<el-col :span="12" :offset="0">
|
||||
<el-form-item label="联系人" prop="contacts"> <el-input v-model="form.contacts" placeholder="请输入联系人" /> </el-form-item
|
||||
></el-col>
|
||||
<el-col :span="12" :offset="0"
|
||||
><el-form-item label="项目负责人" prop="projectDirector">
|
||||
<el-input v-model="form.projectDirector" placeholder="请输入项目负责人" /> </el-form-item
|
||||
></el-col>
|
||||
<el-col :span="12" :offset="0"
|
||||
><el-form-item label="采购经办人" prop="purchasingAgent">
|
||||
<el-input v-model="form.purchasingAgent" placeholder="请输入采购经办人" /> </el-form-item
|
||||
></el-col>
|
||||
<el-col :span="12" :offset="0"
|
||||
><el-form-item label="日期" prop="preparedDate">
|
||||
<el-date-picker clearable v-model="form.preparedDate" type="date" value-format="YYYY-MM-DD" placeholder="请选择日期">
|
||||
</el-date-picker> </el-form-item
|
||||
></el-col>
|
||||
</el-row>
|
||||
</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 ComponentInternalInstance;
|
||||
import { useUserStoreHook } from '@/store/modules/user';
|
||||
import { getDrawing } from '@/api/design/drawing';
|
||||
import { updateDesignChange, getDesignChange } from '@/api/design/designChange';
|
||||
import { getPurchaseDoc } from '@/api/materials/purchaseDoc';
|
||||
import { getBatch } from '@/api/materials/batchPlan';
|
||||
|
||||
// 获取用户 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 + '_purchaseDoc',
|
||||
label: '采购单审批'
|
||||
}
|
||||
];
|
||||
|
||||
const flowCode = ref<string>('');
|
||||
const status = ref<string>('');
|
||||
const dialogVisible = reactive<DialogOption>({
|
||||
visible: false,
|
||||
title: '流程定义'
|
||||
});
|
||||
//提交组件
|
||||
const submitVerifyRef = ref<InstanceType<typeof SubmitVerify>>();
|
||||
//审批记录组件
|
||||
const approvalRecordRef = ref<InstanceType<typeof ApprovalRecord>>();
|
||||
//按钮组件
|
||||
const approvalButtonRef = ref<InstanceType<typeof ApprovalButton>>();
|
||||
|
||||
const leaveFormRef = ref<ElFormInstance>();
|
||||
const dialog = reactive({
|
||||
visible: false,
|
||||
title: '',
|
||||
isEdit: false
|
||||
});
|
||||
const submitFormData = ref<StartProcessBo>({
|
||||
businessId: '',
|
||||
flowCode: '',
|
||||
variables: {}
|
||||
});
|
||||
const taskVariables = ref<Record<string, any>>({});
|
||||
|
||||
const initFormData = {
|
||||
id: undefined,
|
||||
projectId: currentProject.value?.id,
|
||||
|
||||
docCode: undefined,
|
||||
supplier: undefined,
|
||||
reason: undefined,
|
||||
name: undefined,
|
||||
arrivalDate: undefined,
|
||||
designDirectorTel: undefined,
|
||||
technicalDirectorTel: undefined,
|
||||
receivingAddress: undefined,
|
||||
contacts: undefined,
|
||||
associationList: [],
|
||||
|
||||
projectDirector: undefined,
|
||||
purchasingAgent: undefined,
|
||||
preparedDate: undefined,
|
||||
feedbackUrl: undefined,
|
||||
signingUnit: undefined,
|
||||
signingPerson: undefined,
|
||||
signingDate: undefined,
|
||||
status: 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: {}
|
||||
}
|
||||
});
|
||||
|
||||
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 getPurchaseDoc(routeParams.value.id);
|
||||
Object.assign(form.value, res.data);
|
||||
getPlanList();
|
||||
form.value.planId = form.value.associationList?.map((item: any) => item.planId);
|
||||
loading.value = false;
|
||||
buttonLoading.value = false;
|
||||
});
|
||||
};
|
||||
const planList = ref([]);
|
||||
|
||||
const getPlanList = async () => {
|
||||
form.value.planId = '';
|
||||
const res = await getBatch({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
mrpBaseId: undefined,
|
||||
projectId: currentProject.value?.id,
|
||||
mrpBaseId: form.value.mrpBaseId
|
||||
});
|
||||
planList.value = res.rows;
|
||||
};
|
||||
|
||||
/** 提交按钮 */
|
||||
const submitForm = (status1: string) => {
|
||||
status.value = status1;
|
||||
dialog.visible = false;
|
||||
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, true, routeParams.value.businessId);
|
||||
// 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 () => {
|
||||
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>
|
||||
188
src/views/materials/purchaseDoc/uploadCode.vue
Normal file
188
src/views/materials/purchaseDoc/uploadCode.vue
Normal file
@ -0,0 +1,188 @@
|
||||
<template>
|
||||
<div class="p-2">
|
||||
<el-card shadow="always" :body-style="{ padding: '20px' }">
|
||||
<template #header>
|
||||
<div>
|
||||
<span>物流单号填写</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 表单引用，用于触发整体验证 -->
|
||||
<el-form :model="shareForm" label-width="80px" ref="formRef" :rules="formRules">
|
||||
<!-- 循环项添加prop属性，指定嵌套字段路径 -->
|
||||
<div v-for="(item, index) in shareForm.list" :key="index" class="row-wrap flex items-center">
|
||||
<el-row :gutter="20" class="w-full">
|
||||
<!-- 计划：必填 + 选择触发验证 -->
|
||||
<el-col :xs="24" :sm="12" :lg="8">
|
||||
<el-form-item label="计划" :prop="`list[${index}].planId`" :rules="[{ required: true, message: '请选择计划', trigger: 'change' }]">
|
||||
<el-select v-model="item.planId" placeholder="请选择">
|
||||
<el-option v-for="plan in planList" :key="plan.id" :label="plan.name" :value="plan.id.toString()" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<!-- 数量：必填 + 数字验证（大于0） -->
|
||||
<el-col :xs="24" :sm="12" :lg="8">
|
||||
<el-form-item label="数量" :prop="`list[${index}].num`">
|
||||
<el-input v-model.number="item.num" placeholder="请填写数量" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<!-- 物流单号：必填 + 非空验证 -->
|
||||
<el-col :xs="20" :sm="10" :lg="6">
|
||||
<el-form-item
|
||||
label="物流单号"
|
||||
:prop="`list[${index}].ltn`"
|
||||
:rules="[
|
||||
{ required: true, message: '请填写物流单号', trigger: 'blur' },
|
||||
{ min: 3, max: 50, message: '物流单号长度需在3-50字符之间', trigger: 'blur' }
|
||||
]"
|
||||
>
|
||||
<el-input v-model="item.ltn" placeholder="请填写物流单号" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :xs="4" :sm="2" :lg="2" class="flex items-center justify-center">
|
||||
<el-button type="danger" icon="Delete" size="small" @click="deleteRow(index)" :disabled="shareForm.list.length <= 1" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="addRow" icon="Plus">添加物流单</el-button>
|
||||
<el-button type="success" @click="onSubmit">提交</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { getBatch } from '@/api/materials/batchPlan';
|
||||
import { uploadCode, ltnList } from '@/api/materials/purchaseDoc';
|
||||
import { removeToken } from '@/utils/auth';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { getCurrentInstance, onMounted, onUnmounted, ref } from 'vue';
|
||||
import type { ElForm } from 'element-plus';
|
||||
|
||||
const route = useRoute();
|
||||
const { proxy } = getCurrentInstance() as any;
|
||||
|
||||
// 表单引用，用于调用验证方法
|
||||
const formRef = ref<InstanceType<typeof ElForm>>(null);
|
||||
|
||||
const shareForm = ref({
|
||||
docId: '',
|
||||
supplier: '',
|
||||
mrpBaseId: '',
|
||||
projectId: '',
|
||||
token: '',
|
||||
list: [
|
||||
{
|
||||
planId: '',
|
||||
num: 0, // 初始化数量为0，避免undefined影响数字验证
|
||||
ltn: ''
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
// 表单验证规则
|
||||
const formRules = ref({});
|
||||
|
||||
const planList = ref([]);
|
||||
const getPlanList = async () => {
|
||||
const res = await getBatch({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
projectId: shareForm.value.projectId,
|
||||
mrpBaseId: shareForm.value.mrpBaseId,
|
||||
token: shareForm.value.token
|
||||
});
|
||||
planList.value = res.rows;
|
||||
getOrder();
|
||||
};
|
||||
|
||||
const addRow = () => {
|
||||
shareForm.value.list.push({
|
||||
planId: '',
|
||||
num: 0, // 新增行初始化数量为0
|
||||
ltn: ''
|
||||
});
|
||||
};
|
||||
|
||||
const deleteRow = (index: number) => {
|
||||
proxy?.$modal
|
||||
.confirm('确定要删除这行数据吗？')
|
||||
.then(() => {
|
||||
shareForm.value.list.splice(index, 1);
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
// 表单提交验证
|
||||
const onSubmit = async () => {
|
||||
// 先触发Element Plus表单的整体验证
|
||||
const formValid = await formRef.value?.validate().catch(() => false);
|
||||
if (!formValid) {
|
||||
proxy?.$modal.msgError('请完善所有必填项信息');
|
||||
return;
|
||||
}
|
||||
|
||||
// 再执行数据清洗和完整性校验（避免空行提交）
|
||||
const cleanedArr = shareForm.value.list.filter((item) => item.planId && item.num > 0 && item.ltn);
|
||||
if (cleanedArr.length === 0) {
|
||||
proxy?.$modal.msgError('至少需填写一条完整的物流单信息');
|
||||
return;
|
||||
}
|
||||
|
||||
// 提交前替换列表为清洗后的数据（排除空行）
|
||||
const submitData = {
|
||||
...shareForm.value,
|
||||
list: cleanedArr
|
||||
};
|
||||
|
||||
try {
|
||||
await uploadCode(submitData);
|
||||
proxy?.$modal.msgSuccess('上传成功');
|
||||
// getOrder();
|
||||
// 重置表单
|
||||
// shareForm.value.list = [{ planId: '', num: 0, ltn: '' }];
|
||||
} catch (error) {
|
||||
proxy?.$modal.msgError('上传失败，请重试');
|
||||
}
|
||||
};
|
||||
|
||||
const getOrder = async () => {
|
||||
let res = await ltnList(shareForm.value);
|
||||
shareForm.value.list =
|
||||
res.rows.length > 0
|
||||
? res.rows.map((item) => ({
|
||||
planId: item.planId?.toString() || '', // 确保与下拉框value类型一致
|
||||
num: item.num || 0,
|
||||
ltn: item.ltn || ''
|
||||
}))
|
||||
: [{ planId: '', num: 0, ltn: '' }];
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
let data = JSON.parse(route.query.data as string);
|
||||
shareForm.value.docId = data.docId || '';
|
||||
shareForm.value.supplier = data.supplier || '';
|
||||
shareForm.value.mrpBaseId = data.mrpBaseId || '';
|
||||
shareForm.value.projectId = data.projectId || '';
|
||||
shareForm.value.token = data.token || '';
|
||||
getPlanList();
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
removeToken();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.row-wrap {
|
||||
border-bottom: 1px dashed #dcdfe6;
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
261
src/views/materials/repertory/index.vue
Normal file
261
src/views/materials/repertory/index.vue
Normal file
@ -0,0 +1,261 @@
|
||||
<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="name" :inline="true">
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input v-model="queryParams.name" 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="['system:repertoryDetails:add']">新增</el-button>
|
||||
</el-col>
|
||||
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<el-table v-loading="loading" :data="repertoryDetailsList">
|
||||
<el-table-column label="名称" align="center" prop="name" />
|
||||
<el-table-column label="规格" align="center" prop="specification" />
|
||||
<el-table-column label="物料编码" align="center" prop="materialCode" />
|
||||
<el-table-column label="原始数量" align="center" prop="originalQuantity" />
|
||||
<el-table-column label="变更原因" align="center" prop="changeReasons" />
|
||||
<el-table-column label="变更数量" align="center" prop="changeQuantity" />
|
||||
<el-table-column label="操作状态" align="center" prop="operationStatus">
|
||||
<template #default="scope">
|
||||
<dict-tag :options="operation_status" :value="scope.row.operationStatus" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作人" align="center" prop="operationName" />
|
||||
<el-table-column label="操作人联系电话" align="center" prop="operationPhone" />
|
||||
</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="repertoryDetailsFormRef" :model="form" :rules="rules" label-width="80px">
|
||||
<!-- <el-form-item label="库存ID" prop="repertoryId">
|
||||
<el-input v-model="form.repertoryId" placeholder="请输入库存ID" />
|
||||
</el-form-item>
|
||||
<el-form-item label="数据来源ID" prop="materialsorderId">
|
||||
<el-input v-model="form.materialsorderId" placeholder="请输入数据来源ID" />
|
||||
</el-form-item> -->
|
||||
<el-form-item label="物料编码" prop="materialCode">
|
||||
<el-input v-model="form.materialCode" placeholder="请输入物料编码" />
|
||||
</el-form-item>
|
||||
<el-form-item label="变更原因" prop="changeReasons">
|
||||
<el-input v-model="form.changeReasons" placeholder="请输入变更原因" />
|
||||
</el-form-item>
|
||||
<el-form-item label="变更数量" prop="changeQuantity">
|
||||
<el-input v-model="form.changeQuantity" placeholder="请输入变更数量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="操作人" prop="operationName">
|
||||
<el-input v-model="form.operationName" placeholder="请输入操作人" />
|
||||
</el-form-item>
|
||||
<el-form-item label="操作状态" prop="operationStatus">
|
||||
<el-select v-model="form.operationStatus" placeholder="请选择操作状态">
|
||||
<el-option v-for="item in operation_s" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="联系电话" prop="operationPhone">
|
||||
<el-input v-model="form.operationPhone" 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="RepertoryDetails" lang="ts">
|
||||
import {
|
||||
listRepertoryDetails,
|
||||
getRepertoryDetails,
|
||||
delRepertoryDetails,
|
||||
addRepertoryDetails,
|
||||
updateRepertoryDetails
|
||||
} from '@/api/materials/repertoryDetails';
|
||||
import { RepertoryDetailsVO, RepertoryDetailsQuery, RepertoryDetailsForm } from '@/api/materials/repertoryDetails/types';
|
||||
import { useUserStoreHook } from '@/store/modules/user';
|
||||
import { useRoute } from 'vue-router';
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
const operation_s = ref([]);
|
||||
const repertoryDetailsList = ref<RepertoryDetailsVO[]>([]);
|
||||
const buttonLoading = ref(false);
|
||||
const loading = ref(true);
|
||||
const showSearch = ref(true);
|
||||
const ids = ref<Array<string | number>>([]);
|
||||
const total = ref(0);
|
||||
const { operation_status } = toRefs(proxy?.useDict('operation_status'));
|
||||
const queryFormRef = ref<ElFormInstance>();
|
||||
const repertoryDetailsFormRef = ref<ElFormInstance>();
|
||||
// 获取用户 store
|
||||
const userStore = useUserStoreHook();
|
||||
// 从 store 中获取项目列表和当前选中的项目
|
||||
const currentProject = computed(() => userStore.selectedProject);
|
||||
const dialog = reactive<DialogOption>({
|
||||
visible: false,
|
||||
title: ''
|
||||
});
|
||||
const route = useRoute();
|
||||
|
||||
const initFormData: RepertoryDetailsForm = {
|
||||
id: undefined,
|
||||
projectId: currentProject.value?.id,
|
||||
repertoryId: undefined,
|
||||
materialsorderId: undefined,
|
||||
materialCode: undefined,
|
||||
originalQuantity: undefined,
|
||||
changeReasons: undefined,
|
||||
changeQuantity: undefined,
|
||||
finalNumber: undefined,
|
||||
operationStatus: undefined,
|
||||
operationName: undefined,
|
||||
operationPhone: undefined
|
||||
};
|
||||
const data = reactive<PageData<RepertoryDetailsForm, RepertoryDetailsQuery>>({
|
||||
form: { ...initFormData },
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
projectId: currentProject.value?.id,
|
||||
repertoryId: undefined,
|
||||
materialsorderId: undefined,
|
||||
materialCode: undefined,
|
||||
name: undefined,
|
||||
|
||||
id: undefined,
|
||||
originalQuantity: undefined,
|
||||
changeReasons: undefined,
|
||||
changeQuantity: undefined,
|
||||
finalNumber: undefined,
|
||||
operationStatus: undefined,
|
||||
operationName: undefined,
|
||||
operationPhone: undefined,
|
||||
params: {}
|
||||
},
|
||||
rules: {
|
||||
id: [{ required: true, message: 'ID不能为空', trigger: 'blur' }],
|
||||
operationPhone: [
|
||||
{ required: true, message: '请输入电话', trigger: 'blur' },
|
||||
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
});
|
||||
|
||||
const { queryParams, form, rules } = toRefs(data);
|
||||
|
||||
/** 查询物资-库存列表 */
|
||||
const getList = async () => {
|
||||
loading.value = true;
|
||||
const res = await listRepertoryDetails(queryParams.value);
|
||||
repertoryDetailsList.value = res.rows;
|
||||
total.value = res.total;
|
||||
loading.value = false;
|
||||
};
|
||||
|
||||
/** 取消按钮 */
|
||||
const cancel = () => {
|
||||
reset();
|
||||
dialog.visible = false;
|
||||
};
|
||||
|
||||
/** 表单重置 */
|
||||
const reset = () => {
|
||||
form.value = { ...initFormData };
|
||||
repertoryDetailsFormRef.value?.resetFields();
|
||||
};
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
const handleQuery = () => {
|
||||
queryParams.value.pageNum = 1;
|
||||
getList();
|
||||
};
|
||||
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value?.resetFields();
|
||||
handleQuery();
|
||||
};
|
||||
|
||||
/** 新增按钮操作 */
|
||||
const handleAdd = () => {
|
||||
reset();
|
||||
operation_s.value = operation_status.value.slice(-2);
|
||||
console.log('🚀 ~ handleAdd ~ operation_s.value:', operation_s.value, operation_status);
|
||||
|
||||
dialog.visible = true;
|
||||
dialog.title = '添加物资-库存';
|
||||
};
|
||||
|
||||
/** 修改按钮操作 */
|
||||
const handleUpdate = async (row?: RepertoryDetailsVO) => {
|
||||
reset();
|
||||
const _id = row?.id || ids.value[0];
|
||||
const res = await getRepertoryDetails(_id);
|
||||
Object.assign(form.value, res.data);
|
||||
dialog.visible = true;
|
||||
dialog.title = '修改物资-库存';
|
||||
};
|
||||
|
||||
/** 提交按钮 */
|
||||
const submitForm = () => {
|
||||
repertoryDetailsFormRef.value?.validate(async (valid: boolean) => {
|
||||
if (valid) {
|
||||
buttonLoading.value = true;
|
||||
form.value.repertoryId = route.query.id as string;
|
||||
await addRepertoryDetails(form.value).finally(() => (buttonLoading.value = false));
|
||||
proxy?.$modal.msgSuccess('操作成功');
|
||||
dialog.visible = false;
|
||||
await getList();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
watch(
|
||||
() => route.query.id,
|
||||
(nid: string, oid) => {
|
||||
console.log(nid);
|
||||
queryParams.value.repertoryId = nid;
|
||||
form.value.repertoryId = nid;
|
||||
getList();
|
||||
}
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
queryParams.value.repertoryId = route.query.id as string;
|
||||
form.value.repertoryId = route.query.id as string;
|
||||
getList();
|
||||
});
|
||||
|
||||
//监听项目id刷新数据
|
||||
const listeningProject = watch(
|
||||
() => currentProject.value?.id,
|
||||
(nid, oid) => {
|
||||
queryParams.value.projectId = nid;
|
||||
form.value.projectId = nid;
|
||||
getList();
|
||||
}
|
||||
);
|
||||
|
||||
onUnmounted(() => {
|
||||
listeningProject();
|
||||
});
|
||||
</script>
|
||||
167
src/views/materials/repertoryDetails/index.vue
Normal file
167
src/views/materials/repertoryDetails/index.vue
Normal file
@ -0,0 +1,167 @@
|
||||
<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="name" label-width="100">
|
||||
<el-input v-model="queryParams.name" 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="['system:repertory:add']">新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['system:repertory:edit']"
|
||||
>修改</el-button
|
||||
>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['system:repertory:remove']"
|
||||
>删除</el-button
|
||||
>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['system:repertory:export']">导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
</template> -->
|
||||
|
||||
<el-table v-loading="loading" :data="repertoryList">
|
||||
<!-- <el-table-column type="selection" width="55" 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="remark" />
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template #default="scope">
|
||||
<el-button link type="primary" icon="View" @click="handleUpdate(scope.row)" v-hasPermi="['system:repertory:edit']">详情</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="Repertory" lang="ts">
|
||||
import { listRepertory, getRepertory, delRepertory, addRepertory, updateRepertory } from '@/api/materials/repertory';
|
||||
import { RepertoryVO, RepertoryQuery, RepertoryForm } from '@/api/materials/repertory/types';
|
||||
import { useUserStoreHook } from '@/store/modules/user';
|
||||
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
|
||||
const repertoryList = ref<RepertoryVO[]>([]);
|
||||
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 repertoryFormRef = ref<ElFormInstance>();
|
||||
|
||||
const dialog = reactive<DialogOption>({
|
||||
visible: false,
|
||||
title: ''
|
||||
});
|
||||
|
||||
const initFormData: RepertoryForm = {
|
||||
id: undefined,
|
||||
projectId: undefined,
|
||||
name: undefined,
|
||||
specification: undefined,
|
||||
remark: undefined
|
||||
};
|
||||
const data = reactive<PageData<RepertoryForm, RepertoryQuery>>({
|
||||
form: { ...initFormData },
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
projectId: undefined,
|
||||
name: undefined,
|
||||
specification: undefined,
|
||||
params: {}
|
||||
},
|
||||
rules: {
|
||||
id: [{ required: true, message: 'ID不能为空', trigger: 'blur' }]
|
||||
}
|
||||
});
|
||||
|
||||
const { queryParams, form, rules } = toRefs(data);
|
||||
|
||||
/** 查询物资-库存详情列表 */
|
||||
const getList = async () => {
|
||||
loading.value = true;
|
||||
const res = await listRepertory(queryParams.value);
|
||||
repertoryList.value = res.rows;
|
||||
total.value = res.total;
|
||||
loading.value = false;
|
||||
};
|
||||
|
||||
/** 取消按钮 */
|
||||
const cancel = () => {
|
||||
reset();
|
||||
dialog.visible = false;
|
||||
};
|
||||
|
||||
/** 表单重置 */
|
||||
const reset = () => {
|
||||
form.value = { ...initFormData };
|
||||
repertoryFormRef.value?.resetFields();
|
||||
};
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
const handleQuery = () => {
|
||||
queryParams.value.pageNum = 1;
|
||||
getList();
|
||||
};
|
||||
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value?.resetFields();
|
||||
handleQuery();
|
||||
};
|
||||
|
||||
/** 修改按钮操作 */
|
||||
const handleUpdate = async (row?: RepertoryVO) => {
|
||||
proxy?.$tab.openPage('/materials/repertoryDetail', '物资清单详情', {
|
||||
id: row.id
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
});
|
||||
|
||||
//监听项目id刷新数据
|
||||
const listeningProject = watch(
|
||||
() => currentProject.value?.id,
|
||||
(nid, oid) => {
|
||||
queryParams.value.projectId = nid;
|
||||
form.value.projectId = nid;
|
||||
getList();
|
||||
}
|
||||
);
|
||||
|
||||
onUnmounted(() => {
|
||||
listeningProject();
|
||||
});
|
||||
</script>
|
||||
538
src/views/materials/suppliesprice/index.vue
Normal file
538
src/views/materials/suppliesprice/index.vue
Normal file
@ -0,0 +1,538 @@
|
||||
<template>
|
||||
<div class="p-2">
|
||||
<el-row :gutter="20">
|
||||
<!-- 流程分类树 -->
|
||||
<el-col style="" :span="5">
|
||||
<el-card shadow="hover">
|
||||
<!-- <template #header>
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5" :offset="0"
|
||||
><el-button type="primary" size="default" @click="addBatch" icon="FolderAdd" plain>新增</el-button></el-col
|
||||
>
|
||||
<el-col :span="1.5" :offset="0"
|
||||
><el-button type="danger" size="default" @click="handleDeleteBatch" icon="FolderDelete" plain>删除</el-button></el-col
|
||||
>
|
||||
</el-row>
|
||||
</template> -->
|
||||
|
||||
<el-input v-model="batchNumber" placeholder="请输入批次号" @input="searchBatchList" prefix-icon="Search" clearable />
|
||||
<el-tree
|
||||
ref="batchTreeRef"
|
||||
class="mt-2"
|
||||
node-key="batchNumber"
|
||||
:data="batchOptions"
|
||||
:props="{ label: 'batchNumber', children: 'children' }"
|
||||
:expand-on-click-node="false"
|
||||
highlight-current
|
||||
default-expand-all
|
||||
@node-click="handleNodeClick"
|
||||
>
|
||||
<template #default="{ node, data }">
|
||||
<div class="custom-tree-node">
|
||||
{{ node.label }}
|
||||
<dict-tag :options="wf_business_status" :value="data.approvalPlan" />
|
||||
</div> </template
|
||||
></el-tree>
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
v-model:page="queryParams.pageNum"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
@pagination="getBatchList"
|
||||
layout="prev, pager, next,jumper"
|
||||
/>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="19">
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button plain type="warning" icon="Finished" @click="handleAudit()" 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="cailiaoshebeiList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="供货商" align="center" prop="supplier" />
|
||||
<el-table-column label="设备材料名称" align="center" prop="name" />
|
||||
<el-table-column label="供货来源" align="center" prop="supply">
|
||||
<template #default="scope">
|
||||
<dict-tag :options="supply" :value="scope.row.supply" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="规格型号" align="center" prop="specification" />
|
||||
<el-table-column label="特征描述" align="center" prop="signalment" />
|
||||
<el-table-column label="物料编码" align="center" prop="materialCode" width="200" />
|
||||
<el-table-column label="计划到场时间" align="center" prop="arrivalTime" width="180">
|
||||
<template #default="scope">
|
||||
<span>{{ parseTime(scope.row.arrivalTime, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="计划完成时间" align="center" prop="finishTime" width="180">
|
||||
<template #default="scope">
|
||||
<span>{{ parseTime(scope.row.finishTime, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="计量单位" align="center" prop="unit" />
|
||||
<el-table-column label="计划数量" align="center" prop="plan" />
|
||||
<el-table-column label="操作" align="center" width="150" v-if="form.approvalPlan == 'draft'">
|
||||
<template #default="scope"
|
||||
><el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['cailiaoshebei:cailiaoshebei:edit']"
|
||||
>修改</el-button
|
||||
><el-button link type="primary" icon="View" @click="handleDelete(scope.row)" v-hasPermi="['cailiaoshebei:cailiaoshebei:remove']"
|
||||
>详情</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 添加或修改物资-材料设备对话框 -->
|
||||
<el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
|
||||
<el-form ref="cailiaoshebeiFormRef" :model="form" :rules="rules" label-width="110px">
|
||||
<el-form-item label="计划到场时间" prop="arrivalTime">
|
||||
<el-date-picker clearable v-model="form.arrivalTime" type="date" value-format="YYYY-MM-DD" placeholder="请选择计划到场时间">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="计划完成时间" prop="finishTime">
|
||||
<el-date-picker clearable v-model="form.finishTime" type="date" value-format="YYYY-MM-DD" placeholder="请选择计划完成时间">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<div v-for="(item, index) in selectValue" :key="index">
|
||||
<el-divider content-position="center"
|
||||
><el-text tag="b">{{ item }}</el-text></el-divider
|
||||
>
|
||||
<el-form-item label="单价" prop="unitPrice">
|
||||
<el-input v-model="form.listOfMaterialInventory[index].unitPrice" type="number" placeholder="请输入单价" />
|
||||
</el-form-item>
|
||||
<el-form-item label="数量" prop="num">
|
||||
<el-input v-model="form.listOfMaterialInventory[index].num" type="number" placeholder="请输入数量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="合同号" prop="contractNum">
|
||||
<el-input v-model="form.listOfMaterialInventory[index].contractNum" placeholder="请输入合同号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="预估供应周期" prop="estimatedCycle">
|
||||
<el-input v-model="form.listOfMaterialInventory[index].estimatedCycle" type="number" placeholder="请输入预估供应周期" />
|
||||
</el-form-item>
|
||||
<el-form-item label="供货公司" prop="supplierCompany">
|
||||
<el-input v-model="form.listOfMaterialInventory[index].supplierCompany" placeholder="请输入供货公司" disabled />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</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>
|
||||
<!-- 详情弹框 -->
|
||||
<el-dialog :title="dialog.title" v-model="dialog.details" width="800px" append-to-body>
|
||||
<div class="block_box">
|
||||
<span>主要信息</span>
|
||||
|
||||
<el-form label-width="130px">
|
||||
<el-row :gutter="20" justify="space-around">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="批次号">
|
||||
{{ form?.batchNumber }}
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="供货商">
|
||||
{{ form?.supplier }}
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="设备材料名称">
|
||||
{{ form?.name }}
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="规格型号">
|
||||
{{ form?.specification }}
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="供货方式">
|
||||
<dict-tag :options="supply" :value="form.supply" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="特征描述">
|
||||
{{ form?.signalment }}
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="物料编码">
|
||||
{{ form?.materialCode }}
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="计划到场时间">
|
||||
{{ form?.arrivalTime }}
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="计划完成时间">
|
||||
{{ form?.finishTime }}
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="计量单位">
|
||||
{{ form?.unit }}
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="计划数量">
|
||||
{{ form?.plan }}
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="block_box" v-for="(item, index) in selectValue" v-if="form?.listOfMaterialInventory.length">
|
||||
<span>{{ item }}-物资清单列表</span>
|
||||
<el-form label-width="130px">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="单价">
|
||||
{{ form?.listOfMaterialInventory[index].unitPrice }}
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="数量">
|
||||
{{ form?.listOfMaterialInventory[index].num }}
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="合同号">
|
||||
{{ form?.listOfMaterialInventory[index].contractNum }}
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="预估供应周期">
|
||||
{{ form?.listOfMaterialInventory[index].estimatedCycle }}
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="供货公司">
|
||||
{{ item }}
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="Cailiaoshebei" lang="ts">
|
||||
import {
|
||||
listCailiaoshebei,
|
||||
getCailiaoshebei,
|
||||
delCailiaoshebei,
|
||||
addCailiaoshebei,
|
||||
updateCailiaoshebei,
|
||||
listBatch,
|
||||
getBatch,
|
||||
delBatch
|
||||
} from '@/api/materials/suppliesprice';
|
||||
import { CailiaoshebeiVO, CailiaoshebeiQuery, CailiaoshebeiForm } from '@/api/materials/suppliesprice/types';
|
||||
import { listContractor } from '@/api/project/contractor';
|
||||
import { useUserStoreHook } from '@/store/modules/user';
|
||||
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
const { supply } = toRefs<any>(proxy?.useDict('supply'));
|
||||
// 获取用户 store
|
||||
const userStore = useUserStoreHook();
|
||||
// 从 store 中获取项目列表和当前选中的项目
|
||||
const currentProject = computed(() => userStore.selectedProject);
|
||||
const batchTreeRef = ref<any>(null);
|
||||
const cailiaoshebeiList = ref<CailiaoshebeiVO[]>([]);
|
||||
const buttonLoading = ref(false);
|
||||
const loading = ref(false);
|
||||
const showSearch = ref(true);
|
||||
const ids = ref<Array<string | number>>([]);
|
||||
const single = ref(true);
|
||||
const multiple = ref(true);
|
||||
const total = ref(0);
|
||||
const batchOptions = ref<any[]>([]);
|
||||
const { wf_business_status } = toRefs<any>(proxy?.useDict('wf_business_status'));
|
||||
const batchNumber = ref('');
|
||||
|
||||
const queryFormRef = ref<ElFormInstance>();
|
||||
const cailiaoshebeiFormRef = ref<ElFormInstance>();
|
||||
// 中间数组变量供 el-select 使用
|
||||
const selectValue = ref<string[]>([]);
|
||||
const dialog = reactive<DialogOption>({
|
||||
visible: false,
|
||||
details: false,
|
||||
|
||||
title: ''
|
||||
});
|
||||
|
||||
const initFormData: any = {
|
||||
id: undefined,
|
||||
batchNumber: undefined,
|
||||
supplierId: undefined,
|
||||
supplier: undefined,
|
||||
name: undefined,
|
||||
supply: undefined,
|
||||
specification: undefined,
|
||||
signalment: undefined,
|
||||
approvalPlan: undefined,
|
||||
|
||||
materialCode: undefined,
|
||||
arrivalTime: undefined,
|
||||
finishTime: undefined,
|
||||
unit: undefined,
|
||||
plan: undefined,
|
||||
realQuantity: undefined,
|
||||
projectId: currentProject.value?.id,
|
||||
approvalProject: undefined,
|
||||
|
||||
listOfMaterialInventory: [],
|
||||
remark: undefined
|
||||
};
|
||||
const data = reactive<PageData<any, any>>({
|
||||
form: { ...initFormData },
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
batchNumber: undefined,
|
||||
supplierId: undefined,
|
||||
supplier: undefined,
|
||||
name: undefined,
|
||||
projectId: currentProject.value?.id,
|
||||
supply: undefined,
|
||||
specification: undefined,
|
||||
signalment: undefined,
|
||||
materialCode: undefined,
|
||||
arrivalTime: undefined,
|
||||
finishTime: undefined,
|
||||
unit: undefined,
|
||||
plan: undefined,
|
||||
realQuantity: undefined,
|
||||
listOfMaterialInventory: [],
|
||||
params: {}
|
||||
},
|
||||
rules: {
|
||||
id: [{ required: true, message: '主键ID不能为空', trigger: 'blur' }]
|
||||
}
|
||||
});
|
||||
|
||||
const { queryParams, form, rules } = toRefs(data);
|
||||
|
||||
/** 查询物资-材料设备列表 */
|
||||
const getList = async () => {
|
||||
if (!queryParams.value.batchNumber) return;
|
||||
|
||||
loading.value = true;
|
||||
const res = await listCailiaoshebei(queryParams.value);
|
||||
cailiaoshebeiList.value = res.rows;
|
||||
|
||||
loading.value = false;
|
||||
};
|
||||
|
||||
//查询批次列表
|
||||
const getBatchList = async () => {
|
||||
const res = await listBatch(queryParams.value);
|
||||
console.log('🚀 ~ getBatchList ~ res:', res);
|
||||
batchOptions.value = res.rows;
|
||||
total.value = res.total;
|
||||
try {
|
||||
queryParams.value.batchNumber = res.rows[0].batchNumber;
|
||||
batchTreeRef.value.setCurrentKey(res.rows[0].batchNumber);
|
||||
form.value.batchNumber = res.rows[0].batchNumber;
|
||||
form.value.approvalPlan = res.rows[0].approvalPlan;
|
||||
} catch (error) {
|
||||
form.value.batchNumber = '';
|
||||
}
|
||||
|
||||
getList();
|
||||
};
|
||||
|
||||
/** 节点单击事件 */
|
||||
const handleNodeClick = (data: any) => {
|
||||
queryParams.value.batchNumber = data.batchNumber;
|
||||
batchNumber.value = '';
|
||||
form.value.batchNumber = data.batchNumber;
|
||||
form.value.approvalPlan = data.approvalPlan;
|
||||
console.log('🚀 ~ handleNodeClick ~ form.value:', form.value);
|
||||
if (data.batchNumber === '0') {
|
||||
queryParams.value.batchNumber = '';
|
||||
}
|
||||
getList();
|
||||
};
|
||||
|
||||
const searchBatchList = () => {
|
||||
queryParams.value.batchNumber = batchNumber.value;
|
||||
getBatchList();
|
||||
};
|
||||
|
||||
/** 取消按钮 */
|
||||
const cancel = () => {
|
||||
reset();
|
||||
dialog.visible = false;
|
||||
};
|
||||
|
||||
/** 表单重置 */
|
||||
const reset = () => {
|
||||
const preservedBatchId = form.value.batchNumber; // 先保存当前的 batchNumber
|
||||
form.value = { ...initFormData, batchNumber: preservedBatchId }; // 重置但保留
|
||||
cailiaoshebeiFormRef.value?.resetFields();
|
||||
selectValue.value = [];
|
||||
};
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
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;
|
||||
};
|
||||
|
||||
/** 修改按钮操作 */
|
||||
const handleUpdate = async (row?: CailiaoshebeiVO) => {
|
||||
reset();
|
||||
const _id = row?.id || ids.value[0];
|
||||
const res = await getCailiaoshebei(_id);
|
||||
Object.assign(form.value, res.data);
|
||||
selectValue.value = (form.value.supplier as string).split(',');
|
||||
if (!form.value.listOfMaterialInventory.length) {
|
||||
form.value.listOfMaterialInventory = selectValue.value.map((item) => {
|
||||
return {
|
||||
supplierCompany: item,
|
||||
estimatedCycle: '',
|
||||
contractNum: '',
|
||||
num: '',
|
||||
unitPrice: ''
|
||||
};
|
||||
});
|
||||
}
|
||||
dialog.visible = true;
|
||||
dialog.title = '修改物资供应总计划';
|
||||
};
|
||||
|
||||
/** 提交按钮 */
|
||||
const submitForm = () => {
|
||||
console.log('🚀 ~ submitForm ~ form.value:', form.value);
|
||||
cailiaoshebeiFormRef.value?.validate(async (valid: boolean) => {
|
||||
if (valid) {
|
||||
buttonLoading.value = true;
|
||||
await updateCailiaoshebei(form.value).finally(() => (buttonLoading.value = false));
|
||||
proxy?.$modal.msgSuccess('操作成功');
|
||||
dialog.visible = false;
|
||||
await getList();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/** 详情按钮操作 */
|
||||
const handleDelete = async (row?: CailiaoshebeiVO) => {
|
||||
reset();
|
||||
dialog.details = true;
|
||||
const _id = row?.id || ids.value[0];
|
||||
const res = await getCailiaoshebei(_id);
|
||||
Object.assign(form.value, res.data);
|
||||
selectValue.value = (form.value.supplier as string).split(',');
|
||||
if (!form.value.listOfMaterialInventory.length) {
|
||||
form.value.listOfMaterialInventory = selectValue.value.map((item) => {
|
||||
return {
|
||||
supplierCompany: item,
|
||||
estimatedCycle: '',
|
||||
contractNum: '',
|
||||
num: '',
|
||||
unitPrice: ''
|
||||
};
|
||||
});
|
||||
}
|
||||
dialog.title = '物资供应总计划详情';
|
||||
};
|
||||
|
||||
/** 审核按钮操作 */
|
||||
const handleAudit = async () => {
|
||||
if (!form.value.batchNumber) {
|
||||
proxy?.$modal.msgError('请选择批次');
|
||||
return;
|
||||
}
|
||||
|
||||
proxy?.$tab.closePage(proxy.$route);
|
||||
proxy?.$tab.openPage('/approval/suppliesprice/indexEdit', '审核物资供应总计划', {
|
||||
id: form.value.batchNumber,
|
||||
approvalPlan: form.value.approvalPlan + '_materialsPlans',
|
||||
type: 'update'
|
||||
});
|
||||
};
|
||||
|
||||
/** 查询供货商列表 */
|
||||
const supplierOptions = ref([]);
|
||||
const getSupplierList = async () => {
|
||||
const res = await listContractor({
|
||||
projectId: currentProject.value?.id,
|
||||
pageNum: 1,
|
||||
pageSize: 10000
|
||||
});
|
||||
supplierOptions.value = res.rows;
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getBatchList();
|
||||
getSupplierList();
|
||||
});
|
||||
|
||||
//监听项目id刷新数据
|
||||
const listeningProject = watch(
|
||||
() => currentProject.value?.id,
|
||||
(nid, oid) => {
|
||||
queryParams.value.projectId = nid;
|
||||
form.value.projectId = nid;
|
||||
getBatchList();
|
||||
getSupplierList();
|
||||
}
|
||||
);
|
||||
|
||||
onUnmounted(() => {
|
||||
listeningProject();
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.custom-tree-node {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
.block_box {
|
||||
border: 1px solid #9eccfa;
|
||||
border-radius: 6px;
|
||||
padding: 10px 20px 20px 10px;
|
||||
margin: 15px;
|
||||
|
||||
> span {
|
||||
color: #409eff;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
margin-bottom: 10px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
362
src/views/materials/suppliesprice/indexEdit.vue
Normal file
362
src/views/materials/suppliesprice/indexEdit.vue
Normal file
@ -0,0 +1,362 @@
|
||||
<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.approvalPlan"
|
||||
: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-table v-loading="loading" :data="cailiaoshebeiList">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="供货商" align="center" prop="supplier" />
|
||||
<el-table-column label="设备材料名称" align="center" prop="name" />
|
||||
<el-table-column label="供货来源" align="center" prop="supply">
|
||||
<template #default="scope">
|
||||
<dict-tag :options="supply" :value="scope.row.supply" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="规格型号" align="center" prop="specification" />
|
||||
<el-table-column label="特征描述" align="center" prop="signalment" />
|
||||
<el-table-column label="物料编码" align="center" prop="materialCode" width="200" />
|
||||
<el-table-column label="计划到场时间" align="center" prop="arrivalTime" width="180">
|
||||
<template #default="scope">
|
||||
<span>{{ parseTime(scope.row.arrivalTime, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="计划完成时间" align="center" prop="finishTime" width="180">
|
||||
<template #default="scope">
|
||||
<span>{{ parseTime(scope.row.finishTime, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="计量单位" align="center" prop="unit" />
|
||||
<el-table-column label="计划数量" align="center" prop="plan" />
|
||||
</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 ComponentInternalInstance;
|
||||
import { useUserStoreHook } from '@/store/modules/user';
|
||||
const { design_change_reason_type } = toRefs<any>(proxy?.useDict('design_change_reason_type'));
|
||||
import { getKnowledgeDocument } from '@/api/design/technicalStandard';
|
||||
import { getConstructionValue } from '@/api/out/constructionValue';
|
||||
import { workScheduleListDetail } from '@/api/progress/plan';
|
||||
import { getCailiaoshebei, getPcDetail, listCailiaoshebei } from '@/api/materials/suppliesprice';
|
||||
// 获取用户 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 + '_materialsPlans',
|
||||
label: '材料总计划审批'
|
||||
}
|
||||
];
|
||||
const { supply } = toRefs<any>(proxy?.useDict('supply'));
|
||||
|
||||
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 selectValue = ref<string[]>([]);
|
||||
const cailiaoshebeiList = ref([]);
|
||||
|
||||
const initFormData = {
|
||||
approvalPlan: undefined,
|
||||
id: 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 id = routeParams.value.id.split('_')[0];
|
||||
const res = await listCailiaoshebei({ pageNum: 1, pageSize: 10, batchNumber: id });
|
||||
cailiaoshebeiList.value = res.rows;
|
||||
if (!form.value.approvalPlan) {
|
||||
const res = await getPcDetail(id);
|
||||
form.value.approvalPlan = res.data.approvalPlan;
|
||||
} else {
|
||||
form.value.approvalPlan = routeParams.value.approvalPlan;
|
||||
}
|
||||
console.log('🚀 ~ getInfo ~ form.value.approvalDesign:', form.value.approvalPlan);
|
||||
form.value.id = routeParams.value.id;
|
||||
|
||||
loading.value = false;
|
||||
buttonLoading.value = false;
|
||||
});
|
||||
};
|
||||
|
||||
/** 提交按钮 */
|
||||
const submitForm = (status1: string) => {
|
||||
status.value = status1;
|
||||
submit(status.value, form.value);
|
||||
};
|
||||
|
||||
const submitFlow = async () => {
|
||||
handleStartWorkFlow(form.value);
|
||||
dialogVisible.visible = false;
|
||||
};
|
||||
//提交申请
|
||||
const handleStartWorkFlow = async (data: LeaveForm) => {
|
||||
try {
|
||||
submitFormData.value.flowCode = flowCode.value;
|
||||
submitFormData.value.businessId = data.id;
|
||||
//流程变量
|
||||
taskVariables.value = {
|
||||
// leave4/5 使用的流程变量
|
||||
userList: ['1', '3', '4']
|
||||
};
|
||||
submitFormData.value.variables = taskVariables.value;
|
||||
const resp = await startWorkFlow(submitFormData.value);
|
||||
if (submitVerifyRef.value) {
|
||||
buttonLoading.value = false;
|
||||
submitVerifyRef.value.openDialog(resp.data.taskId);
|
||||
}
|
||||
} finally {
|
||||
buttonLoading.value = false;
|
||||
}
|
||||
};
|
||||
//审批记录
|
||||
const handleApprovalRecord = () => {
|
||||
approvalRecordRef.value.init(form.value.id);
|
||||
};
|
||||
//提交回调
|
||||
const submitCallback = async () => {
|
||||
await proxy.$tab.closePage(proxy.$route);
|
||||
proxy.$router.go(-1);
|
||||
};
|
||||
//审批
|
||||
const approvalVerifyOpen = async () => {
|
||||
submitVerifyRef.value.openDialog(routeParams.value.taskId);
|
||||
};
|
||||
// 图纸上传成功之后 开始提交
|
||||
const submit = async (status, data) => {
|
||||
form.value = data;
|
||||
if (status === 'draft') {
|
||||
buttonLoading.value = false;
|
||||
proxy?.$modal.msgSuccess('暂存成功');
|
||||
proxy.$tab.closePage(proxy.$route);
|
||||
proxy.$router.go(-1);
|
||||
} else {
|
||||
if ((form.value.approvalPlan === '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;
|
||||
console.log('🚀 ~ proxy.$route.query:', 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>
|
||||
458
src/views/materials/usageMaterials/material/index.vue
Normal file
458
src/views/materials/usageMaterials/material/index.vue
Normal file
@ -0,0 +1,458 @@
|
||||
<template>
|
||||
<div class="p-5">
|
||||
<!-- 主要内容区 -->
|
||||
<el-card class="mb-5">
|
||||
<el-button icon="Refresh" @click="refreshData" class="transition-all duration-200 hover:shadow-md">
|
||||
刷新
|
||||
</el-button>
|
||||
</el-card>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<div class="bg-white rounded-lg shadow-sm overflow-hidden transition-all duration-300 hover:shadow-md">
|
||||
<el-table v-loading="loading" :data="tableData" border stripe
|
||||
:header-cell-style="{ 'background-color': '#f5f7fa', 'font-weight': 'bold' }"
|
||||
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 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>
|
||||
<el-table-column prop="findType" label="类型" width="100" align="center">
|
||||
<template #default="scope">
|
||||
<el-tag :type="scope.row.findType === '1' ? 'success' : 'info'">
|
||||
{{ scope.row.findType === '1' ? '采购' : '材料' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="installationQuantity" label="安装量" width="100" align="center"></el-table-column>
|
||||
<el-table-column prop="contractSigning" label="合同签订时间" width="180" align="center">
|
||||
<template #default="scope">
|
||||
{{ formatDate(scope.row.contractSigning) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" width="180" align="center">
|
||||
<template #default="scope">
|
||||
{{ formatDate(scope.row.createTime) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="180" 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" icon="Edit" @click="handleEdit(scope.row)"
|
||||
class="text-blue-600 hover:text-blue-800 transition-colors"></el-button>
|
||||
<el-button size="small" icon="View" @click="jumpRouter(scope.row)"
|
||||
class="text-blue-600 hover:text-blue-800 transition-colors"></el-button>
|
||||
<el-button size="small" icon="Delete" @click="handleDelete(scope.row)"
|
||||
class="text-red-600 hover:text-red-800 transition-colors"></el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="flex items-center justify-between p-4 border-t">
|
||||
<div class="text-gray-500 text-sm">
|
||||
共 {{ total }} 条记录，当前显示第 {{ (currentPage - 1) * pageSize + 1 }} 至 {{ Math.min(currentPage *
|
||||
pageSize, total)
|
||||
}} 条
|
||||
</div>
|
||||
<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 50, 100]"
|
||||
:total="total" layout="prev, pager, next, jumper, sizes" @size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"></el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 新增/编辑对话框 -->
|
||||
<el-dialog v-model="dialogVisible" :title="dialogType === 'add' ? '新增记录' : '编辑记录'" :width="dialogWidth"
|
||||
:fullscreen="isFullscreen" :before-close="handleDialogClose">
|
||||
<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="name">
|
||||
<el-input v-model="formData.name" placeholder="请输入材料名称"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="规格" prop="specification">
|
||||
<el-input v-model="formData.specification" placeholder="请输入规格"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="供应商" prop="supplier">
|
||||
<el-input v-model="formData.supplier" placeholder="请输入供应商"></el-input>
|
||||
</el-form-item>
|
||||
</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-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="安装量" prop="installationQuantity">
|
||||
<el-input v-model="formData.installationQuantity" 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-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="合同签订时间" prop="contractSigning">
|
||||
<el-date-picker v-model="formData.contractSigning" type="datetime" placeholder="选择合同签订时间"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"></el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="生产周期(天)" prop="productionPhase">
|
||||
<el-input v-model.number="formData.productionPhase" placeholder="请输入生产周期" type="number"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="供货要求" prop="supplyRequirements">
|
||||
<el-input v-model="formData.supplyRequirements" placeholder="请输入供货要求" type="textarea" rows="3"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="formData.remark" placeholder="请输入备注信息" type="textarea" rows="3"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<div class="flex justify-end gap-2">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="handleSave" :loading="saveLoading">
|
||||
保存
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, computed, toRaw } from 'vue';
|
||||
import { ElMessage, ElMessageBox } from 'element-plus';
|
||||
import { useUserStoreHook } from '@/store/modules/user';
|
||||
import { useRouter } from 'vue-router';
|
||||
const userStore = useUserStoreHook();
|
||||
const router = useRouter();
|
||||
const currentProject = computed(() => userStore.selectedProject);
|
||||
import { useMaterialsQueryList, newMaterialsAdd, materialsEdit, materialsDel, queryMaterialsInfo } from "@/api/materials/usageMaterials/index";
|
||||
// 表格数据相关
|
||||
const tableData = ref([]);
|
||||
const total = ref(0);
|
||||
const currentPage = ref(1);
|
||||
const pageSize = ref(10);
|
||||
const loading = ref(false);
|
||||
|
||||
// 对话框相关
|
||||
const dialogVisible = ref(false);
|
||||
const dialogType = ref('add'); // add 或 edit
|
||||
const dialogWidth = ref('70%');
|
||||
const isFullscreen = ref(false);
|
||||
const deleteDialogVisible = ref(false);
|
||||
const formRef = ref(null);
|
||||
const formRef2 = ref(null);
|
||||
const saveLoading = ref(false);
|
||||
const deleteLoading = ref(false);
|
||||
const currentRow = ref(null);
|
||||
const submitLoading = ref(false);
|
||||
|
||||
// 表单数据
|
||||
const formData = reactive({
|
||||
id: '',
|
||||
name: '',
|
||||
specification: '',
|
||||
supplier: '',
|
||||
findType: 2, // 默认采购
|
||||
installationQuantity: '',
|
||||
installationRatio: '',
|
||||
contractSigning: '',
|
||||
productionPhase: null,
|
||||
executionCycle: null,
|
||||
projectId: currentProject.value?.id,
|
||||
supplyRequirements: '',
|
||||
// purchaseSubmission: '',
|
||||
// submissionMaterials: '',
|
||||
remark: '',
|
||||
createTime: '',
|
||||
createBy: null,
|
||||
updateTime: '',
|
||||
updateBy: null
|
||||
});
|
||||
|
||||
// 表单验证规则
|
||||
const formRules = reactive({
|
||||
name: [
|
||||
{ required: true, message: '请输入材料名称', trigger: 'blur' },
|
||||
{ max: 50, message: '材料名称不能超过50个字符', trigger: 'blur' }
|
||||
],
|
||||
supplier: [
|
||||
{ required: true, message: '请输入供应商', trigger: 'blur' },
|
||||
{ max: 100, message: '供应商名称不能超过100个字符', trigger: 'blur' }
|
||||
],
|
||||
findType: [
|
||||
{ required: true, message: '请选择类型', trigger: 'change' }
|
||||
]
|
||||
});
|
||||
|
||||
|
||||
|
||||
// 格式化日期
|
||||
const formatDate = (dateString) => {
|
||||
if (!dateString) return '-';
|
||||
const date = new Date(dateString);
|
||||
return date.toLocaleString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
second: '2-digit'
|
||||
}).replace(',', ' ');
|
||||
};
|
||||
|
||||
// 表格行样式
|
||||
const tableRowClassName = ({ row, rowIndex }) => {
|
||||
return rowIndex % 2 === 0 ? 'bg-white' : 'bg-gray-50';
|
||||
};
|
||||
|
||||
// 获取数据
|
||||
const fetchData = async () => {
|
||||
loading.value = true;
|
||||
try {
|
||||
const res = await useMaterialsQueryList({
|
||||
projectId: currentProject.value?.id,
|
||||
findType: 2
|
||||
});
|
||||
|
||||
tableData.value = res.rows;
|
||||
total.value = res.total;
|
||||
loading.value = false;
|
||||
} catch (error) {
|
||||
ElMessage.error('获取数据失败：' + error.message);
|
||||
console.error(error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 搜索
|
||||
const handleSearch = () => {
|
||||
currentPage.value = 1; // 重置到第一页
|
||||
fetchData();
|
||||
};
|
||||
|
||||
// 刷新数据
|
||||
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';
|
||||
resetForm();
|
||||
dialogVisible.value = true;
|
||||
};
|
||||
|
||||
// 编辑
|
||||
const handleEdit = (row) => {
|
||||
dialogType.value = 'edit';
|
||||
currentRow.value = row;
|
||||
resetForm();
|
||||
|
||||
// 填充表单数据
|
||||
Object.keys(formData).forEach(key => {
|
||||
if (row.hasOwnProperty(key)) {
|
||||
formData[key] = row[key];
|
||||
}
|
||||
});
|
||||
|
||||
dialogVisible.value = true;
|
||||
};
|
||||
const handleAddSon = (row) => {
|
||||
ElMessageBox.confirm(
|
||||
'确认提交',
|
||||
'Warning',
|
||||
{
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}
|
||||
).then(() => {
|
||||
materialsEdit(formData).then(res => {
|
||||
let { code } = res
|
||||
if (code === 200) {
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '提交成功',
|
||||
})
|
||||
}
|
||||
})
|
||||
}).catch(() => {
|
||||
ElMessage({
|
||||
type: 'info',
|
||||
message: '已取消提交',
|
||||
})
|
||||
})
|
||||
};
|
||||
|
||||
|
||||
// 删除
|
||||
const handleDelete = (row) => {
|
||||
currentRow.value = row;
|
||||
ElMessageBox.confirm(
|
||||
'确定要删除这条记录吗？此操作不可撤销，请谨慎操作',
|
||||
'提示',
|
||||
{
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}
|
||||
).then(() => {
|
||||
confirmDelete();
|
||||
}).catch(() => {
|
||||
ElMessage({
|
||||
type: 'info',
|
||||
message: '已取消删除',
|
||||
})
|
||||
})
|
||||
};
|
||||
|
||||
|
||||
// 确认删除
|
||||
const confirmDelete = async () => {
|
||||
if (!currentRow.value) return;
|
||||
|
||||
deleteLoading.value = true;
|
||||
try {
|
||||
// 模拟API请求
|
||||
const res = await materialsDel(currentRow.value.id)
|
||||
const { code } = res;
|
||||
if (code === 200) {
|
||||
ElMessage.success('删除成功');
|
||||
deleteDialogVisible.value = false;
|
||||
fetchData();
|
||||
} else {
|
||||
ElMessage.error('删除失败');
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error('删除失败：' + error.message);
|
||||
console.error(error);
|
||||
} finally {
|
||||
deleteLoading.value = false;
|
||||
}
|
||||
};
|
||||
//
|
||||
|
||||
|
||||
|
||||
// 保存
|
||||
const handleSave = async () => {
|
||||
// 表单验证
|
||||
if (!formRef.value) return;
|
||||
const valid = await formRef.value.validate();
|
||||
if (!valid) return;
|
||||
saveLoading.value = true;
|
||||
try {
|
||||
// 模拟API请求
|
||||
if (dialogType.value === 'add') {
|
||||
// 新增
|
||||
formData.projectId = currentProject.value?.id;
|
||||
const res = await newMaterialsAdd(formData)
|
||||
let { code } = res
|
||||
if (code === 200) {
|
||||
ElMessage.success('新增成功');
|
||||
fetchData();
|
||||
}
|
||||
} else {
|
||||
// 编辑
|
||||
const res = await materialsEdit(formData)
|
||||
let { code } = res
|
||||
if (code === 200) {
|
||||
ElMessage.success('保存成功');
|
||||
fetchData();
|
||||
}
|
||||
}
|
||||
|
||||
dialogVisible.value = false;
|
||||
} catch (error) {
|
||||
ElMessage.error('保存失败：' + error.message);
|
||||
console.error(error);
|
||||
} finally {
|
||||
saveLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 重置表单
|
||||
const resetForm = () => {
|
||||
if (formRef.value) {
|
||||
formRef.value.resetFields();
|
||||
}
|
||||
|
||||
// 重置表单数据
|
||||
Object.keys(formData).forEach(key => {
|
||||
formData[key] = '';
|
||||
});
|
||||
|
||||
// 设置默认值
|
||||
formData.findType = 2;
|
||||
formData.id = '';
|
||||
};
|
||||
|
||||
// 关闭对话框
|
||||
const handleDialogClose = () => {
|
||||
resetForm();
|
||||
dialogVisible.value = false;
|
||||
};
|
||||
|
||||
// 跳转
|
||||
const jumpRouter = (row) => {
|
||||
router.push({
|
||||
path: `/materials/usageMaterials/materialIndexSon`,
|
||||
query: {
|
||||
id: row.id,
|
||||
type: 'update'
|
||||
}
|
||||
});
|
||||
};
|
||||
// 初始化页面
|
||||
onMounted(() => {
|
||||
fetchData();
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
597
src/views/materials/usageMaterials/material/indexSon.vue
Normal file
597
src/views/materials/usageMaterials/material/indexSon.vue
Normal file
@ -0,0 +1,597 @@
|
||||
<template>
|
||||
<div class="p-5">
|
||||
<el-card class="mb-5">
|
||||
<el-button type="primary" icon="Plus" @click="handleAdd" class="transition-all duration-200 hover:shadow-md"> 新增 </el-button>
|
||||
<el-button icon="Refresh" @click="refreshData" class="transition-all duration-200 hover:shadow-md"> 刷新 </el-button>
|
||||
</el-card>
|
||||
<div class="bg-white rounded-lg shadow-sm overflow-hidden transition-all duration-300 hover:shadow-md">
|
||||
<!-- 数据表格 -->
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="tableData"
|
||||
stripe
|
||||
:header-cell-style="{ 'background-color': '#f5f7fa', 'font-weight': 'bold' }"
|
||||
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 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">
|
||||
{{ formatDate(scope.row.issuanceTime) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="requireDelivery" label="要求到货时间" min-width="160" align="center">
|
||||
<template #default="scope">
|
||||
{{ formatDate(scope.row.requireDelivery) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="scheduledDelivery" label="计划到货时间" min-width="160" align="center">
|
||||
<template #default="scope">
|
||||
{{ formatDate(scope.row.scheduledDelivery) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="actualDelivery" label="实际到货时间" min-width="160" align="center">
|
||||
<template #default="scope">
|
||||
{{ formatDate(scope.row.actualDelivery) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="acceptanceCheck" label="验收移交时间" min-width="160" align="center">
|
||||
<template #default="scope">
|
||||
{{ formatDate(scope.row.acceptanceCheck) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<!-- 数量相关列 -->
|
||||
<el-table-column prop="requiredQuantity" label="要求到货数量" min-width="120" align="right"></el-table-column>
|
||||
<el-table-column prop="plannedQuantity" label="计划到货数量" min-width="120" align="right"></el-table-column>
|
||||
<el-table-column prop="actualAcceptance" label="实际验收数量" min-width="120" align="right"></el-table-column>
|
||||
<el-table-column prop="differenceQuantity" label="差异量" min-width="100" align="right">
|
||||
<template #default="scope">
|
||||
<span :class="scope.row.differenceQuantity && parseFloat(scope.row.differenceQuantity) !== 0 ? 'text-red-500' : ''">
|
||||
{{ scope.row.differenceQuantity || '-' }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="dhDifferenceQuantity" label="到货差异量" min-width="120" align="right"></el-table-column>
|
||||
|
||||
<!-- 金额相关列 -->
|
||||
<el-table-column prop="cargoAmount" label="货物金额" min-width="120" align="right">
|
||||
<template #default="scope">
|
||||
{{ scope.row.cargoAmount }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="advance" label="预付款" min-width="100" align="right">
|
||||
<template #default="scope">
|
||||
{{ scope.row.advance }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="feed" label="投料款" min-width="100" align="right">
|
||||
<template #default="scope">
|
||||
{{ scope.row.feed }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="acceptancePayment" label="到货验收款" min-width="120" align="right">
|
||||
<template #default="scope">
|
||||
{{ scope.row.acceptancePayment }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="debugging" label="调试款" min-width="100" align="right">
|
||||
<template #default="scope">
|
||||
{{ scope.row.debugging }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="qualityGuarantee" label="质保金" min-width="100" align="right">
|
||||
<template #default="scope">
|
||||
{{ scope.row.qualityGuarantee }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="settlementAmount" label="结算金额" min-width="120" align="right">
|
||||
<template #default="scope">
|
||||
{{ scope.row.settlementAmount }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<!-- 状态和备注列 -->
|
||||
<el-table-column prop="expectedState" label="逾期状态" min-width="100" align="center">
|
||||
<template #default="scope">
|
||||
<!-- :type="getTagType(scope.row.expectedState)" -->
|
||||
<el-tag :effect="scope.row.expectedState ? 'dark' : 'plain'">
|
||||
{{ scope.row.expectedState || '-' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="associate" label="交接方式" min-width="120"></el-table-column>
|
||||
<el-table-column prop="deliveryRequirements" label="到货要求" min-width="150"></el-table-column>
|
||||
<el-table-column prop="transition" label="转换为合同" min-width="120" align="center">
|
||||
<!-- <template #default="scope"> -->
|
||||
<!-- <el-switch v-model="scope.row.transition" active-value="是" inactive-value="否"
|
||||
@change="handleTransitionChange(scope.row)"></el-switch> -->
|
||||
<!-- </template> -->
|
||||
</el-table-column>
|
||||
|
||||
<!-- 备注信息列（可展开） -->
|
||||
<el-table-column label="备注信息" min-width="120">
|
||||
<template #default="scope">
|
||||
<el-popover placement="top" width="300" trigger="click">
|
||||
<template #reference>
|
||||
<el-button size="small" type="text">查看详情</el-button>
|
||||
</template>
|
||||
<div class="space-y-2 text-sm">
|
||||
<p><span class="font-medium">采购备注：</span>{{ scope.row.cgRemark || '-' }}</p>
|
||||
<p><span class="font-medium">到货备注：</span>{{ scope.row.dhRemark || '-' }}</p>
|
||||
<p><span class="font-medium">供应商备注：</span>{{ scope.row.gysRemark || '-' }}</p>
|
||||
<p><span class="font-medium">结算备注：</span>{{ scope.row.jsRemark || '-' }}</p>
|
||||
</div>
|
||||
</el-popover>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<!-- 操作列 -->
|
||||
<el-table-column label="操作" min-width="120" align="center" fixed="right">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
size="small"
|
||||
icon="Edit"
|
||||
@click="handleEdit2(scope.row)"
|
||||
class="text-blue-600 hover:text-blue-800 transition-colors"
|
||||
></el-button>
|
||||
<el-button
|
||||
size="small"
|
||||
icon="Delete"
|
||||
@click="handleDelete2(scope.row)"
|
||||
class="text-red-600 hover:text-red-800 transition-colors"
|
||||
></el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页 -->
|
||||
<div class="flex flex-wrap items-center justify-between p-4 border-t gap-4">
|
||||
<div class="text-gray-500 text-sm">
|
||||
共 {{ total }} 条记录，当前显示第 {{ (currentPage - 1) * pageSize + 1 }} 至 {{ Math.min(currentPage * pageSize, total) }} 条
|
||||
</div>
|
||||
<el-dialog
|
||||
v-model="dialogVisible2"
|
||||
:title="dialogType2 === 'addSon' ? '新增采购信息' : '编辑采购信息'"
|
||||
:width="dialogWidth"
|
||||
:fullscreen="isFullscreen"
|
||||
:close-on-click-modal="false"
|
||||
:before-close="handleClose"
|
||||
destroy-on-close
|
||||
>
|
||||
<!-- 表单内容 -->
|
||||
<el-form ref="formRef" :model="form" :rules="formRules" label-width="140px" class="space-y-4">
|
||||
<!-- 第一行 -->
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="批次" prop="batch">
|
||||
<el-input v-model="form.batch" placeholder="请输入批次信息"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="联系单下达时间" prop="issuanceTime">
|
||||
<el-date-picker
|
||||
v-model="form.issuanceTime"
|
||||
type="datetime"
|
||||
placeholder="选择联系单下达时间"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 第二行 -->
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="要求到货数量" prop="requiredQuantity">
|
||||
<el-input v-model="form.requiredQuantity" placeholder="请输入要求到货数量"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="要求到货时间" prop="requireDelivery">
|
||||
<el-date-picker
|
||||
v-model="form.requireDelivery"
|
||||
type="datetime"
|
||||
placeholder="选择要求到货时间"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 第三行 -->
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="计划到货数量" prop="plannedQuantity">
|
||||
<el-input v-model="form.plannedQuantity" placeholder="请输入计划到货数量"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="计划到货时间" prop="scheduledDelivery">
|
||||
<el-date-picker
|
||||
v-model="form.scheduledDelivery"
|
||||
type="datetime"
|
||||
placeholder="选择计划到货时间"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 第四行 -->
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="实际到货验收数量" prop="actualAcceptance">
|
||||
<el-input v-model="form.actualAcceptance" placeholder="请输入实际到货验收数量"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="实际到货时间" prop="actualDelivery">
|
||||
<el-date-picker
|
||||
v-model="form.actualDelivery"
|
||||
type="datetime"
|
||||
placeholder="选择实际到货时间"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 第五行 -->
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="差异量" prop="differenceQuantity">
|
||||
<el-input v-model="form.differenceQuantity" placeholder="请输入差异量"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="到货差异量" prop="dhDifferenceQuantity">
|
||||
<el-input v-model="form.dhDifferenceQuantity" placeholder="请输入到货差异量"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 第六行 -->
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="验收移交时间" prop="acceptanceCheck">
|
||||
<el-date-picker
|
||||
v-model="form.acceptanceCheck"
|
||||
type="datetime"
|
||||
placeholder="选择验收移交时间"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="逾期状态" prop="expectedState">
|
||||
<el-select v-model="form.expectedState" placeholder="请选择逾期状态">
|
||||
<el-option label="未逾期" value="未逾期"></el-option>
|
||||
<el-option label="已逾期" value="已逾期"></el-option>
|
||||
<el-option label="即将逾期" value="即将逾期"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 第七行 - 金额信息 -->
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="货物金额" prop="cargoAmount">
|
||||
<el-input v-model="form.cargoAmount" placeholder="0.00" prefix="¥"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="预付款" prop="advance">
|
||||
<el-input v-model="form.advance" placeholder="0.00" prefix="¥"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="投料款" prop="feed">
|
||||
<el-input v-model="form.feed" placeholder="0.00" prefix="¥"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="到货验收款" prop="acceptancePayment">
|
||||
<el-input v-model="form.acceptancePayment" placeholder="0.00" prefix="¥"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 第八行 - 金额信息 -->
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="调试款" prop="debugging">
|
||||
<el-input v-model="form.debugging" placeholder="0.00" prefix="¥"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="质保金" prop="qualityGuarantee">
|
||||
<el-input v-model="form.qualityGuarantee" placeholder="0.00" prefix="¥"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="结算金额" prop="settlementAmount">
|
||||
<el-input v-model="form.settlementAmount" placeholder="0.00" prefix="¥"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 第九行 -->
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="交接方式" prop="associate">
|
||||
<el-input v-model="form.associate" placeholder="请输入交接方式"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="转换为合同" prop="transition">
|
||||
<el-select v-model="form.transition" placeholder="请选择是否转换为合同">
|
||||
<el-option label="是" value="是"></el-option>
|
||||
<el-option label="否" value="否"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 第十行 -->
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="到货要求" prop="deliveryRequirements">
|
||||
<el-input v-model="form.deliveryRequirements" placeholder="请输入到货要求" type="textarea" rows="3"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 第十一行 - 备注信息 -->
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="采购备注" prop="cgRemark">
|
||||
<el-input v-model="form.cgRemark" placeholder="请输入采购备注" type="textarea" rows="4"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="到货备注" prop="dhRemark">
|
||||
<el-input v-model="form.dhRemark" placeholder="请输入到货备注" type="textarea" rows="4"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="供应商备注" prop="gysRemark">
|
||||
<el-input v-model="form.gysRemark" placeholder="请输入供应商备注" type="textarea" rows="4"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 第十二行 -->
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="结算备注" prop="jsRemark">
|
||||
<el-input v-model="form.jsRemark" placeholder="请输入结算备注" type="textarea" rows="3"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<!-- 底部按钮 -->
|
||||
<template #footer>
|
||||
<div class="flex justify-end gap-3">
|
||||
<el-button @click="handleCancel" class="transition-all duration-200"> 取消 </el-button>
|
||||
<el-button type="primary" @click="handleSubmit" :loading="submitLoading" class="transition-all duration-200">
|
||||
{{ dialogType2 === 'addSon' ? '新增' : '保存' }}
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, toRaw, getCurrentInstance } from 'vue';
|
||||
import { materialsUsageDetails, materialsSonAdd, materialsSonDel, materialsSonEdit } from '@/api/materials/usageMaterials/index';
|
||||
const { proxy } = getCurrentInstance();
|
||||
const dialogVisible2 = ref(false);
|
||||
const dialogType2 = ref('addSon'); // add 或 edit
|
||||
const deleteDialogVisible2 = ref(false);
|
||||
const currentRow2 = ref(null);
|
||||
const tableData = ref([]);
|
||||
const loading = ref(false);
|
||||
const submitLoading = ref(false);
|
||||
const routeParams = ref({});
|
||||
const currentPage = ref(1);
|
||||
const total = ref(0);
|
||||
const pageSize = ref(10);
|
||||
const formRef = ref(null);
|
||||
const deleteLoading = ref(false);
|
||||
const tableRowClassName = ({ row, rowIndex }) => {
|
||||
return rowIndex % 2 === 0 ? 'bg-white' : 'bg-gray-50';
|
||||
};
|
||||
const form = reactive({
|
||||
id: '',
|
||||
acceptanceCheck: '',
|
||||
acceptancePayment: '',
|
||||
actualAcceptance: '',
|
||||
actualDelivery: '',
|
||||
advance: '',
|
||||
associate: '',
|
||||
batch: '',
|
||||
cargoAmount: '',
|
||||
cgRemark: '',
|
||||
createTime: '',
|
||||
debugging: '',
|
||||
deliveryRequirements: '',
|
||||
dhDifferenceQuantity: '',
|
||||
dhRemark: '',
|
||||
differenceQuantity: '',
|
||||
expectedState: '',
|
||||
feed: '',
|
||||
gysRemark: '',
|
||||
issuanceTime: '',
|
||||
jsRemark: '',
|
||||
physicalsupplyId: null,
|
||||
plannedQuantity: '',
|
||||
qualityGuarantee: '',
|
||||
requireDelivery: '',
|
||||
requiredQuantity: '',
|
||||
scheduledDelivery: '',
|
||||
settlementAmount: '',
|
||||
transition: '',
|
||||
updateBy: null,
|
||||
updateTime: ''
|
||||
});
|
||||
const handleAdd = () => {
|
||||
dialogVisible2.value = true;
|
||||
dialogType2.value = 'addSon';
|
||||
resetForm();
|
||||
};
|
||||
const resetForm = () => {
|
||||
if (formRef.value) {
|
||||
formRef.value.resetFields();
|
||||
}
|
||||
|
||||
// 重置表单数据
|
||||
Object.keys(form).forEach((key) => {
|
||||
form[key] = '';
|
||||
});
|
||||
|
||||
// 设置默认值
|
||||
form.findType = 1;
|
||||
form.id = '';
|
||||
};
|
||||
|
||||
const handleEdit2 = (row) => {
|
||||
dialogType2.value = 'editSon';
|
||||
currentRow2.value = row;
|
||||
resetForm();
|
||||
|
||||
// 填充表单数据
|
||||
Object.keys(form).forEach((key) => {
|
||||
if (row.hasOwnProperty(key)) {
|
||||
form[key] = row[key];
|
||||
}
|
||||
});
|
||||
|
||||
dialogVisible2.value = true;
|
||||
};
|
||||
const handleDelete2 = (row) => {
|
||||
currentRow2.value = row;
|
||||
ElMessageBox.confirm('确定要删除这条记录吗？此操作不可撤销，请谨慎操作', '提示', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(() => {
|
||||
confirmDelete();
|
||||
})
|
||||
.catch(() => {
|
||||
ElMessage({
|
||||
type: 'info',
|
||||
message: '已取消删除'
|
||||
});
|
||||
});
|
||||
};
|
||||
const confirmDelete = async () => {
|
||||
if (!currentRow2.value) return;
|
||||
|
||||
deleteLoading.value = true;
|
||||
try {
|
||||
// 模拟API请求
|
||||
const res = await materialsSonDel(currentRow2.value.id);
|
||||
const { code } = res;
|
||||
if (code === 200) {
|
||||
ElMessage.success('删除成功');
|
||||
deleteDialogVisible2.value = false;
|
||||
materialsUsageDetails1();
|
||||
} else {
|
||||
ElMessage.error('删除失败');
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error('删除失败：' + error.message);
|
||||
console.error(error);
|
||||
} finally {
|
||||
deleteLoading.value = false;
|
||||
}
|
||||
};
|
||||
const handleSubmit = async () => {
|
||||
if (!formRef.value) return;
|
||||
// 表单验证
|
||||
const valid = await formRef.value.validate();
|
||||
if (!valid) return;
|
||||
|
||||
submitLoading.value = true;
|
||||
|
||||
try {
|
||||
// 准备提交的数据
|
||||
const submitData = { ...toRaw(form) };
|
||||
|
||||
// 如果是新增，清除id
|
||||
if (dialogType2.value === 'addSon') {
|
||||
submitData.physicalsupplyId = routeParams.value.id;
|
||||
const res = await materialsSonAdd(submitData);
|
||||
const { code } = res;
|
||||
if (code === 200) {
|
||||
ElMessage.success('新增成功');
|
||||
materialsUsageDetails1();
|
||||
}
|
||||
} else {
|
||||
const res = await materialsSonEdit(submitData);
|
||||
const { code } = res;
|
||||
if (code === 200) {
|
||||
ElMessage.success('保存成功');
|
||||
materialsUsageDetails1();
|
||||
}
|
||||
}
|
||||
// 重置表单
|
||||
resetForm();
|
||||
} catch (error) {
|
||||
ElMessage.error(`${dialogType2 === 'addSon' ? '新增' : '保存'}失败: ${error.message}`);
|
||||
} finally {
|
||||
submitLoading.value = false;
|
||||
dialogVisible2.value = false;
|
||||
}
|
||||
};
|
||||
const materialsUsageDetails1 = () => {
|
||||
loading.value = true;
|
||||
materialsUsageDetails({ physicalsupplyId: routeParams.value.id })
|
||||
.then((res) => {
|
||||
tableData.value = res.rows;
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false;
|
||||
})
|
||||
.finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
};
|
||||
// 格式化日期
|
||||
const formatDate = (dateString) => {
|
||||
if (!dateString) return '-';
|
||||
const date = new Date(dateString);
|
||||
return date
|
||||
.toLocaleString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
second: '2-digit'
|
||||
})
|
||||
.replace(',', ' ');
|
||||
};
|
||||
function handleCancel() {
|
||||
dialogVisible2.value = false;
|
||||
currentRow2.value = null;
|
||||
}
|
||||
const refreshData = () => {
|
||||
materialsUsageDetails1();
|
||||
ElMessage.success('数据已刷新');
|
||||
};
|
||||
function handleSizeChange() {}
|
||||
onMounted(() => {
|
||||
routeParams.value = proxy.$route.query;
|
||||
console.log('routeParams.value', routeParams.value);
|
||||
materialsUsageDetails1();
|
||||
});
|
||||
</script>
|
||||
455
src/views/materials/usageMaterials/purchase/index.vue
Normal file
455
src/views/materials/usageMaterials/purchase/index.vue
Normal file
@ -0,0 +1,455 @@
|
||||
<template>
|
||||
<div style="padding: 20px;">
|
||||
<el-card class="mb-5">
|
||||
<el-button type="primary" icon="Plus" @click="handleAdd" class="transition-all duration-200 hover:shadow-md">
|
||||
新增
|
||||
</el-button>
|
||||
<el-button icon="Refresh" @click="refreshData" class="transition-all duration-200 hover:shadow-md"> 刷新
|
||||
</el-button>
|
||||
</el-card>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<div class="bg-white rounded-lg shadow-sm overflow-hidden transition-all duration-300 hover:shadow-md">
|
||||
<el-table v-loading="loading" :data="tableData" border stripe
|
||||
style="width: 100%; margin-bottom: 20px; height: calc(100vh - 305px)"
|
||||
: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="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>
|
||||
<el-table-column prop="findType" label="类型" align="center">
|
||||
<template #default="scope">
|
||||
<el-tag :type="scope.row.findType === '1' ? 'success' : 'info'">
|
||||
{{ scope.row.findType === '1' ? '采购' : '材料' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="installationQuantity" label="安装量" align="center"></el-table-column>
|
||||
<el-table-column prop="contractSigning" label="合同签订时间" width="180" align="center">
|
||||
<template #default="scope">
|
||||
{{ formatDate(scope.row.contractSigning) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" width="180" align="center">
|
||||
<template #default="scope">
|
||||
{{ formatDate(scope.row.createTime) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<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" icon="Edit" @click="handleEdit(scope.row)"
|
||||
class="text-blue-600 hover:text-blue-800 transition-colors"></el-button>
|
||||
<el-button size="small" icon="View" @click="jumpRouter(scope.row)"
|
||||
class="text-blue-600 hover:text-blue-800 transition-colors"></el-button>
|
||||
<el-button size="small" icon="Delete" @click="handleDelete(scope.row)"
|
||||
class="text-red-600 hover:text-red-800 transition-colors"></el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="flex items-center justify-between p-4 border-t">
|
||||
<div class="text-gray-500 text-sm">
|
||||
共 {{ total }} 条记录，当前显示第 {{ (currentPage - 1) * pageSize + 1 }} 至 {{ Math.min(currentPage * pageSize, total)
|
||||
}} 条
|
||||
</div>
|
||||
<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 50, 100]"
|
||||
:total="total" layout="prev, pager, next, jumper, sizes" @size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"></el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 新增/编辑对话框 -->
|
||||
<el-dialog v-model="dialogVisible" :title="dialogType === 'add' ? '新增记录' : '编辑记录'" :width="dialogWidth"
|
||||
:fullscreen="isFullscreen" :before-close="handleDialogClose">
|
||||
<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="name">
|
||||
<el-input v-model="formData.name" placeholder="请输入材料名称"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="规格" prop="specification">
|
||||
<el-input v-model="formData.specification" placeholder="请输入规格"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="供应商" prop="supplier">
|
||||
<el-input v-model="formData.supplier" placeholder="请输入供应商"></el-input>
|
||||
</el-form-item>
|
||||
</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-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="安装量" prop="installationQuantity">
|
||||
<el-input v-model="formData.installationQuantity" 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-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="合同签订时间" prop="contractSigning">
|
||||
<el-date-picker v-model="formData.contractSigning" type="datetime" placeholder="选择合同签订时间"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"></el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="生产周期(天)" prop="productionPhase">
|
||||
<el-input v-model.number="formData.productionPhase" placeholder="请输入生产周期" type="number"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="供货要求" prop="supplyRequirements">
|
||||
<el-input v-model="formData.supplyRequirements" placeholder="请输入供货要求" type="textarea"
|
||||
:rows="3"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="formData.remark" placeholder="请输入备注信息" type="textarea" :rows="3"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<div class="flex justify-end gap-2">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="handleSave" :loading="saveLoading"> 保存 </el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, computed, toRaw } from 'vue';
|
||||
import { ElMessage, ElMessageBox } from 'element-plus';
|
||||
import { useUserStoreHook } from '@/store/modules/user';
|
||||
import { useRouter } from 'vue-router';
|
||||
const userStore = useUserStoreHook();
|
||||
const router = useRouter();
|
||||
const currentProject = computed(() => userStore.selectedProject);
|
||||
import { useMaterialsQueryList, newMaterialsAdd, materialsEdit, materialsDel, queryMaterialsInfo } from '@/api/materials/usageMaterials/index';
|
||||
// 表格数据相关
|
||||
const tableData = ref([]);
|
||||
const total = ref(0);
|
||||
const currentPage = ref(1);
|
||||
const pageSize = ref(10);
|
||||
const loading = ref(false);
|
||||
const saveLoading = ref(false);
|
||||
|
||||
// 搜索表单
|
||||
const searchForm = reactive({
|
||||
findType: '3', // 默认查询所有
|
||||
keyword: ''
|
||||
});
|
||||
|
||||
// 对话框相关
|
||||
const dialogVisible = ref(false);
|
||||
const dialogType = ref('add'); // add 或 edit
|
||||
const dialogWidth = ref('70%');
|
||||
const isFullscreen = ref(false);
|
||||
const deleteDialogVisible = ref(false);
|
||||
const formRef = ref(null);
|
||||
const deleteLoading = ref(false);
|
||||
const currentRow = ref(null);
|
||||
|
||||
// 表单数据
|
||||
const formData = reactive({
|
||||
id: '',
|
||||
name: '',
|
||||
specification: '',
|
||||
supplier: '',
|
||||
findType: 2, // 默认采购
|
||||
installationQuantity: '',
|
||||
installationRatio: '',
|
||||
contractSigning: '',
|
||||
productionPhase: null,
|
||||
executionCycle: null,
|
||||
projectId: currentProject.value?.id,
|
||||
supplyRequirements: '',
|
||||
// purchaseSubmission: '',
|
||||
// submissionMaterials: '',
|
||||
remark: '',
|
||||
createTime: '',
|
||||
createBy: null,
|
||||
updateTime: '',
|
||||
updateBy: null
|
||||
});
|
||||
|
||||
// 表单验证规则
|
||||
const formRules = reactive({
|
||||
name: [
|
||||
{ required: true, message: '请输入材料名称', trigger: 'blur' },
|
||||
{ max: 50, message: '材料名称不能超过50个字符', trigger: 'blur' }
|
||||
],
|
||||
supplier: [
|
||||
{ required: true, message: '请输入供应商', trigger: 'blur' },
|
||||
{ max: 100, message: '供应商名称不能超过100个字符', trigger: 'blur' }
|
||||
],
|
||||
findType: [{ required: true, message: '请选择类型', trigger: 'change' }]
|
||||
});
|
||||
|
||||
// 格式化日期
|
||||
const formatDate = (dateString) => {
|
||||
if (!dateString) return '-';
|
||||
const date = new Date(dateString);
|
||||
return date
|
||||
.toLocaleString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
second: '2-digit'
|
||||
})
|
||||
.replace(',', ' ');
|
||||
};
|
||||
|
||||
// 表格行样式
|
||||
const tableRowClassName = ({ row, rowIndex }) => {
|
||||
return rowIndex % 2 === 0 ? 'bg-white' : 'bg-gray-50';
|
||||
};
|
||||
|
||||
// 获取数据
|
||||
const fetchData = async () => {
|
||||
loading.value = true;
|
||||
try {
|
||||
const res = await useMaterialsQueryList({
|
||||
projectId: currentProject.value?.id,
|
||||
findType: 1
|
||||
});
|
||||
|
||||
tableData.value = res.rows;
|
||||
total.value = res.total;
|
||||
} catch (error) {
|
||||
ElMessage.error('获取数据失败：' + error.message);
|
||||
console.error(error);
|
||||
} finally {
|
||||
loading.value = false;//
|
||||
}
|
||||
};
|
||||
|
||||
// 搜索
|
||||
const handleSearch = () => {
|
||||
currentPage.value = 1; // 重置到第一页
|
||||
fetchData();
|
||||
};
|
||||
|
||||
// 刷新数据
|
||||
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';
|
||||
resetForm();
|
||||
dialogVisible.value = true;
|
||||
};
|
||||
|
||||
//
|
||||
|
||||
// 编辑
|
||||
const handleEdit = (row) => {
|
||||
dialogType.value = 'edit';
|
||||
currentRow.value = row;
|
||||
resetForm();
|
||||
|
||||
// 填充表单数据
|
||||
Object.keys(formData).forEach((key) => {
|
||||
if (row.hasOwnProperty(key)) {
|
||||
formData[key] = row[key];
|
||||
}
|
||||
});
|
||||
|
||||
dialogVisible.value = true;
|
||||
};
|
||||
const handleAddSon = (row) => {
|
||||
ElMessageBox.confirm('确认提交', '提示', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(() => {
|
||||
materialsEdit({ id: row.id, purchaseSubmission: '1' }).then((res) => {
|
||||
let { code } = res;
|
||||
if (code === 200) {
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '提交成功'
|
||||
});
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
ElMessage({
|
||||
type: 'info',
|
||||
message: '已取消提交'
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
// 删除
|
||||
const handleDelete = (row) => {
|
||||
currentRow.value = row;
|
||||
ElMessageBox.confirm(
|
||||
'确定要删除这条记录吗？此操作不可撤销，请谨慎操作',
|
||||
'提示',
|
||||
{
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}
|
||||
).then(() => {
|
||||
confirmDelete();
|
||||
}).catch(() => {
|
||||
ElMessage({
|
||||
type: 'info',
|
||||
message: '已取消删除',
|
||||
})
|
||||
})
|
||||
};
|
||||
|
||||
// 确认删除
|
||||
const confirmDelete = async () => {
|
||||
if (!currentRow.value) return;
|
||||
|
||||
deleteLoading.value = true;
|
||||
try {
|
||||
// 模拟API请求
|
||||
const res = await materialsDel(currentRow.value.id);
|
||||
const { code } = res;
|
||||
if (code === 200) {
|
||||
ElMessage.success('删除成功');
|
||||
deleteDialogVisible.value = false;
|
||||
fetchData();
|
||||
} else {
|
||||
ElMessage.error('删除失败');
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error('删除失败：' + error.message);
|
||||
console.error(error);
|
||||
} finally {
|
||||
deleteLoading.value = false;
|
||||
}
|
||||
};
|
||||
//
|
||||
|
||||
// 保存
|
||||
const handleSave = async () => {
|
||||
// 表单验证
|
||||
if (!formRef.value) return;
|
||||
const valid = await formRef.value.validate();
|
||||
if (!valid) return;
|
||||
|
||||
saveLoading.value = true;
|
||||
try {
|
||||
// 模拟API请求
|
||||
const form = toRaw(formData);
|
||||
|
||||
if (dialogType.value === 'add') {
|
||||
// 新增
|
||||
formData.projectId = currentProject.value?.id;
|
||||
const res = await newMaterialsAdd(formData);
|
||||
let { code } = res;
|
||||
if (code === 200) {
|
||||
ElMessage.success('新增成功');
|
||||
fetchData();
|
||||
}
|
||||
} else {
|
||||
// 编辑
|
||||
const res = await materialsEdit(formData);
|
||||
let { code } = res;
|
||||
if (code === 200) {
|
||||
ElMessage.success('保存成功');
|
||||
fetchData();
|
||||
}
|
||||
}
|
||||
|
||||
dialogVisible.value = false;
|
||||
} catch (error) {
|
||||
ElMessage.error('保存失败：' + error.message);
|
||||
console.error(error);
|
||||
} finally {
|
||||
saveLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 重置表单
|
||||
const resetForm = () => {
|
||||
if (formRef.value) {
|
||||
formRef.value.resetFields();
|
||||
}
|
||||
|
||||
// 重置表单数据
|
||||
Object.keys(formData).forEach((key) => {
|
||||
formData[key] = '';
|
||||
});
|
||||
|
||||
// 设置默认值
|
||||
formData.findType = 1;
|
||||
formData.id = '';
|
||||
};
|
||||
// 关闭对话框
|
||||
const handleDialogClose = () => {
|
||||
resetForm();
|
||||
dialogVisible.value = false;
|
||||
};
|
||||
|
||||
// 跳转
|
||||
const jumpRouter = (row) => {
|
||||
router.push({
|
||||
path: `/materials/usageMaterials/purchaseIndexSon`,
|
||||
query: {
|
||||
id: row.id,
|
||||
type: 'update'
|
||||
}
|
||||
});
|
||||
};
|
||||
// 初始化页面
|
||||
onMounted(() => {
|
||||
fetchData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
591
src/views/materials/usageMaterials/purchase/indexSon.vue
Normal file
591
src/views/materials/usageMaterials/purchase/indexSon.vue
Normal file
@ -0,0 +1,591 @@
|
||||
<template>
|
||||
<div class="p-5">
|
||||
<el-card class="mb-5">
|
||||
<el-button type="primary" icon="Plus" @click="handleAdd"
|
||||
class="transition-all duration-200 hover:shadow-md">
|
||||
新增
|
||||
</el-button>
|
||||
<el-button icon="Refresh" @click="refreshData" class="transition-all duration-200 hover:shadow-md">
|
||||
刷新
|
||||
</el-button>
|
||||
</el-card>
|
||||
<!-- 数据表格 -->
|
||||
<div class="bg-white rounded-lg shadow-sm overflow-hidden transition-all duration-300 hover:shadow-md">
|
||||
<el-table v-loading="loading2" :data="tableData" stripe
|
||||
:header-cell-style="{ 'background-color': '#f5f7fa', 'font-weight': 'bold' }"
|
||||
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 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">
|
||||
{{ formatDate(scope.row.issuanceTime) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="requireDelivery" label="要求到货时间" min-width="160" align="center">
|
||||
<template #default="scope">
|
||||
{{ formatDate(scope.row.requireDelivery) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="scheduledDelivery" label="计划到货时间" min-width="160" align="center">
|
||||
<template #default="scope">
|
||||
{{ formatDate(scope.row.scheduledDelivery) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="actualDelivery" label="实际到货时间" min-width="160" align="center">
|
||||
<template #default="scope">
|
||||
{{ formatDate(scope.row.actualDelivery) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="acceptanceCheck" label="验收移交时间" min-width="160" align="center">
|
||||
<template #default="scope">
|
||||
{{ formatDate(scope.row.acceptanceCheck) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<!-- 数量相关列 -->
|
||||
<el-table-column prop="requiredQuantity" label="要求到货数量" min-width="120" align="right"></el-table-column>
|
||||
<el-table-column prop="plannedQuantity" label="计划到货数量" min-width="120" align="right"></el-table-column>
|
||||
<el-table-column prop="actualAcceptance" label="实际验收数量" min-width="120" align="right"></el-table-column>
|
||||
<el-table-column prop="differenceQuantity" label="差异量" min-width="100" align="right">
|
||||
<template #default="scope">
|
||||
<span
|
||||
:class="scope.row.differenceQuantity && parseFloat(scope.row.differenceQuantity) !== 0 ? 'text-red-500' : ''">
|
||||
{{ scope.row.differenceQuantity || '-' }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="dhDifferenceQuantity" label="到货差异量" min-width="120"
|
||||
align="right"></el-table-column>
|
||||
|
||||
<!-- 金额相关列 -->
|
||||
<el-table-column prop="cargoAmount" label="货物金额" min-width="120" align="right">
|
||||
<template #default="scope">
|
||||
{{ scope.row.cargoAmount }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="advance" label="预付款" min-width="100" align="right">
|
||||
<template #default="scope">
|
||||
{{ scope.row.advance }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="feed" label="投料款" min-width="100" align="right">
|
||||
<template #default="scope">
|
||||
{{ scope.row.feed }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="acceptancePayment" label="到货验收款" min-width="120" align="right">
|
||||
<template #default="scope">
|
||||
{{ scope.row.acceptancePayment }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="debugging" label="调试款" min-width="100" align="right">
|
||||
<template #default="scope">
|
||||
{{ scope.row.debugging }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="qualityGuarantee" label="质保金" min-width="100" align="right">
|
||||
<template #default="scope">
|
||||
{{ scope.row.qualityGuarantee }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="settlementAmount" label="结算金额" min-width="120" align="right">
|
||||
<template #default="scope">
|
||||
{{ scope.row.settlementAmount }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<!-- 状态和备注列 -->
|
||||
<el-table-column prop="expectedState" label="逾期状态" min-width="100" align="center">
|
||||
<template #default="scope">
|
||||
<!-- :type="getTagType(scope.row.expectedState)" -->
|
||||
<el-tag :effect="scope.row.expectedState ? 'dark' : 'plain'">
|
||||
{{ scope.row.expectedState || '-' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="associate" label="交接方式" min-width="120"></el-table-column>
|
||||
<el-table-column prop="deliveryRequirements" label="到货要求" min-width="150"></el-table-column>
|
||||
<el-table-column prop="transition" label="转换为合同" min-width="120" align="center">
|
||||
<!-- <template #default="scope"> -->
|
||||
<!-- <el-switch v-model="scope.row.transition" active-value="是" inactive-value="否"
|
||||
@change="handleTransitionChange(scope.row)"></el-switch> -->
|
||||
<!-- </template> -->
|
||||
</el-table-column>
|
||||
|
||||
<!-- 备注信息列（可展开） -->
|
||||
<el-table-column label="备注信息" min-width="120">
|
||||
<template #default="scope">
|
||||
<el-popover placement="top" width="300" trigger="click">
|
||||
<template #reference>
|
||||
<el-button size="small" type="text">查看详情</el-button>
|
||||
</template>
|
||||
<div class="space-y-2 text-sm">
|
||||
<p><span class="font-medium">采购备注：</span>{{ scope.row.cgRemark || '-' }}
|
||||
</p>
|
||||
<p><span class="font-medium">到货备注：</span>{{ scope.row.dhRemark || '-' }}
|
||||
</p>
|
||||
<p><span class="font-medium">供应商备注：</span>{{ scope.row.gysRemark || '-'
|
||||
}}</p>
|
||||
<p><span class="font-medium">结算备注：</span>{{ scope.row.jsRemark || '-' }}
|
||||
</p>
|
||||
</div>
|
||||
</el-popover>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<!-- 操作列 -->
|
||||
<el-table-column label="操作" min-width="120" align="center" fixed="right">
|
||||
<template #default="scope">
|
||||
<el-button size="small" icon="Edit" @click="handleEdit2(scope.row)"
|
||||
class="text-blue-600 hover:text-blue-800 transition-colors"></el-button>
|
||||
<el-button size="small" icon="Delete" @click="handleDelete2(scope.row)"
|
||||
class="text-red-600 hover:text-red-800 transition-colors"></el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页 -->
|
||||
<div class="flex flex-wrap items-center justify-between p-4 border-t gap-4">
|
||||
<div class="text-gray-500 text-sm">
|
||||
共 {{ total }} 条记录，当前显示第 {{ (currentPage - 1) * pageSize + 1 }} 至 {{
|
||||
Math.min(currentPage * pageSize, total)
|
||||
}} 条
|
||||
</div>
|
||||
<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
|
||||
:page-sizes="[10, 20, 50, 100]" :total="total" layout="prev, pager, next, jumper, sizes"
|
||||
@size-change="handleSizeChange" @current-change="handleCurrentChange" small></el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 删除确认对话框 -->
|
||||
<el-dialog v-model="deleteDialogVisible2" title="确认删除" width="300px" :show-close="false">
|
||||
<div class="text-center py-4">
|
||||
<el-icon class="text-orange-500 text-4xl mb-3">
|
||||
<WarningFilled />
|
||||
</el-icon>
|
||||
<p>确定要删除这条记录吗？</p>
|
||||
<p class="text-gray-500 text-sm mt-2">此操作不可撤销，请谨慎操作</p>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="flex justify-center gap-2">
|
||||
<el-button @click="deleteDialogVisible2 = false">取消</el-button>
|
||||
<el-button type="danger" @click="confirmDelete2" :loading="deleteLoading">
|
||||
确认删除
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<el-dialog v-model="dialogVisible2" :title="dialogType2 === 'addSon' ? '新增采购信息' : '编辑采购信息'" :width="dialogWidth"
|
||||
:fullscreen="isFullscreen" :close-on-click-modal="false" :before-close="handleClose" destroy-on-close>
|
||||
<!-- 表单内容 -->
|
||||
<el-form ref="formRef" :model="form" :rules="formRules" label-width="140px" class="space-y-4">
|
||||
<!-- 第一行 -->
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="批次" prop="batch">
|
||||
<el-input v-model="form.batch" placeholder="请输入批次信息"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="联系单下达时间" prop="issuanceTime">
|
||||
<el-date-picker v-model="form.issuanceTime" type="datetime" placeholder="选择联系单下达时间"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"></el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 第二行 -->
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="要求到货数量" prop="requiredQuantity">
|
||||
<el-input v-model="form.requiredQuantity" placeholder="请输入要求到货数量"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="要求到货时间" prop="requireDelivery">
|
||||
<el-date-picker v-model="form.requireDelivery" type="datetime" placeholder="选择要求到货时间"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"></el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 第三行 -->
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="计划到货数量" prop="plannedQuantity">
|
||||
<el-input v-model="form.plannedQuantity" placeholder="请输入计划到货数量"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="计划到货时间" prop="scheduledDelivery">
|
||||
<el-date-picker v-model="form.scheduledDelivery" type="datetime" placeholder="选择计划到货时间"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"></el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 第四行 -->
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="实际到货验收数量" prop="actualAcceptance">
|
||||
<el-input v-model="form.actualAcceptance" placeholder="请输入实际到货验收数量"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="实际到货时间" prop="actualDelivery">
|
||||
<el-date-picker v-model="form.actualDelivery" type="datetime" placeholder="选择实际到货时间"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"></el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 第五行 -->
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="差异量" prop="differenceQuantity">
|
||||
<el-input v-model="form.differenceQuantity" placeholder="请输入差异量"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="到货差异量" prop="dhDifferenceQuantity">
|
||||
<el-input v-model="form.dhDifferenceQuantity" placeholder="请输入到货差异量"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 第六行 -->
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="验收移交时间" prop="acceptanceCheck">
|
||||
<el-date-picker v-model="form.acceptanceCheck" type="datetime" placeholder="选择验收移交时间"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"></el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="逾期状态" prop="expectedState">
|
||||
<el-select v-model="form.expectedState" placeholder="请选择逾期状态">
|
||||
<el-option label="未逾期" value="未逾期"></el-option>
|
||||
<el-option label="已逾期" value="已逾期"></el-option>
|
||||
<el-option label="即将逾期" value="即将逾期"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 第七行 - 金额信息 -->
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="货物金额" prop="cargoAmount">
|
||||
<el-input v-model="form.cargoAmount" placeholder="0.00" prefix="¥"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="预付款" prop="advance">
|
||||
<el-input v-model="form.advance" placeholder="0.00" prefix="¥"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="投料款" prop="feed">
|
||||
<el-input v-model="form.feed" placeholder="0.00" prefix="¥"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="到货验收款" prop="acceptancePayment">
|
||||
<el-input v-model="form.acceptancePayment" placeholder="0.00" prefix="¥"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 第八行 - 金额信息 -->
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="调试款" prop="debugging">
|
||||
<el-input v-model="form.debugging" placeholder="0.00" prefix="¥"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="质保金" prop="qualityGuarantee">
|
||||
<el-input v-model="form.qualityGuarantee" placeholder="0.00" prefix="¥"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="结算金额" prop="settlementAmount">
|
||||
<el-input v-model="form.settlementAmount" placeholder="0.00" prefix="¥"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 第九行 -->
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="交接方式" prop="associate">
|
||||
<el-input v-model="form.associate" placeholder="请输入交接方式"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="转换为合同" prop="transition">
|
||||
<el-select v-model="form.transition" placeholder="请选择是否转换为合同">
|
||||
<el-option label="是" value="是"></el-option>
|
||||
<el-option label="否" value="否"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 第十行 -->
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="到货要求" prop="deliveryRequirements">
|
||||
<el-input v-model="form.deliveryRequirements" placeholder="请输入到货要求" type="textarea"
|
||||
rows="3"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 第十一行 - 备注信息 -->
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="采购备注" prop="cgRemark">
|
||||
<el-input v-model="form.cgRemark" placeholder="请输入采购备注" type="textarea" rows="4"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="到货备注" prop="dhRemark">
|
||||
<el-input v-model="form.dhRemark" placeholder="请输入到货备注" type="textarea" rows="4"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="供应商备注" prop="gysRemark">
|
||||
<el-input v-model="form.gysRemark" placeholder="请输入供应商备注" type="textarea"
|
||||
rows="4"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 第十二行 -->
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="结算备注" prop="jsRemark">
|
||||
<el-input v-model="form.jsRemark" placeholder="请输入结算备注" type="textarea" rows="3"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<!-- 底部按钮 -->
|
||||
<template #footer>
|
||||
<div class="flex justify-end gap-3">
|
||||
<el-button @click="handleCancel" class="transition-all duration-200">
|
||||
取消
|
||||
</el-button>
|
||||
<el-button type="primary" @click="handleSubmit" :loading="submitLoading"
|
||||
class="transition-all duration-200">
|
||||
{{ dialogType2 === 'addSon' ? '新增' : '保存' }}
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, toRaw, getCurrentInstance } from 'vue';
|
||||
import { materialsUsageDetails, materialsSonAdd, materialsSonDel, materialsSonEdit } from "@/api/materials/usageMaterials/index";
|
||||
import { routerRename } from '@/api/air';
|
||||
const { proxy } = getCurrentInstance();
|
||||
const dialogVisible2 = ref(false);
|
||||
const dialogType2 = ref('addSon'); // add 或 edit
|
||||
const deleteDialogVisible2 = ref(false);
|
||||
const currentRow2 = ref(null);
|
||||
const tableData = ref([]);
|
||||
const loading2 = ref(false);
|
||||
const submitLoading = ref(false);
|
||||
const routeParams = ref({})
|
||||
const currentPage = ref(1);
|
||||
const total = ref(0);
|
||||
const pageSize = ref(10);
|
||||
const formRef = ref(null);
|
||||
const deleteLoading = ref(false);
|
||||
const tableRowClassName = ({ row, rowIndex }) => {
|
||||
return rowIndex % 2 === 0 ? 'bg-white' : 'bg-gray-50';
|
||||
};
|
||||
const form = reactive({
|
||||
id: '',
|
||||
acceptanceCheck: '',
|
||||
acceptancePayment: '',
|
||||
actualAcceptance: '',
|
||||
actualDelivery: '',
|
||||
advance: '',
|
||||
associate: '',
|
||||
batch: '',
|
||||
cargoAmount: '',
|
||||
cgRemark: '',
|
||||
createTime: '',
|
||||
debugging: '',
|
||||
deliveryRequirements: '',
|
||||
dhDifferenceQuantity: '',
|
||||
dhRemark: '',
|
||||
differenceQuantity: '',
|
||||
expectedState: '',
|
||||
feed: '',
|
||||
gysRemark: '',
|
||||
issuanceTime: '',
|
||||
jsRemark: '',
|
||||
physicalsupplyId: null,
|
||||
plannedQuantity: '',
|
||||
qualityGuarantee: '',
|
||||
requireDelivery: '',
|
||||
requiredQuantity: '',
|
||||
scheduledDelivery: '',
|
||||
settlementAmount: '',
|
||||
transition: '',
|
||||
updateBy: null,
|
||||
updateTime: ''
|
||||
});
|
||||
const handleAdd = () => {
|
||||
dialogVisible2.value = true;
|
||||
dialogType2.value = 'addSon';
|
||||
resetForm();
|
||||
}
|
||||
const resetForm = () => {
|
||||
if (formRef.value) {
|
||||
formRef.value.resetFields();
|
||||
}
|
||||
|
||||
// 重置表单数据
|
||||
Object.keys(form).forEach(key => {
|
||||
form[key] = '';
|
||||
});
|
||||
|
||||
// 设置默认值
|
||||
form.findType = 1;
|
||||
form.id = '';
|
||||
};
|
||||
|
||||
const handleEdit2 = (row) => {
|
||||
dialogType2.value = 'editSon';
|
||||
currentRow2.value = row;
|
||||
resetForm();
|
||||
|
||||
// 填充表单数据
|
||||
Object.keys(form).forEach(key => {
|
||||
if (row.hasOwnProperty(key)) {
|
||||
form[key] = row[key];
|
||||
}
|
||||
});
|
||||
|
||||
dialogVisible2.value = true;
|
||||
};
|
||||
const handleDelete2 = (row) => {
|
||||
currentRow2.value = row;
|
||||
ElMessageBox.confirm(
|
||||
'确定要删除这条记录吗？此操作不可撤销，请谨慎操作',
|
||||
'提示',
|
||||
{
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}
|
||||
).then(() => {
|
||||
confirmDelete2();
|
||||
}).catch(() => {
|
||||
ElMessage({
|
||||
type: 'info',
|
||||
message: '已取消删除',
|
||||
})
|
||||
})
|
||||
};
|
||||
const confirmDelete2 = async () => {
|
||||
if (!currentRow2.value) return;
|
||||
|
||||
deleteLoading.value = true;
|
||||
try {
|
||||
// 模拟API请求
|
||||
const res = await materialsSonDel(currentRow2.value.id)
|
||||
const { code } = res;
|
||||
if (code === 200) {
|
||||
ElMessage.success('删除成功');
|
||||
deleteDialogVisible2.value = false;
|
||||
materialsUsageDetails1();
|
||||
} else {
|
||||
ElMessage.error('删除失败');
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error('删除失败：' + error.message);
|
||||
console.error(error);
|
||||
} finally {
|
||||
deleteLoading.value = false;
|
||||
}
|
||||
};
|
||||
const handleSubmit = async () => {
|
||||
if (!formRef.value) return;
|
||||
// 表单验证
|
||||
const valid = await formRef.value.validate();
|
||||
if (!valid) return;
|
||||
|
||||
submitLoading.value = true;
|
||||
|
||||
try {
|
||||
// 准备提交的数据
|
||||
const submitData = { ...toRaw(form) };
|
||||
|
||||
// 如果是新增，清除id
|
||||
if (dialogType2.value === 'addSon') {
|
||||
submitData.physicalsupplyId = routeParams.value.id
|
||||
const res = await materialsSonAdd(submitData)
|
||||
const { code } = res;
|
||||
if (code === 200) {
|
||||
ElMessage.success('新增成功');
|
||||
materialsUsageDetails1();
|
||||
}
|
||||
} else {
|
||||
const res = await materialsSonEdit(submitData)
|
||||
const { code } = res;
|
||||
if (code === 200) {
|
||||
ElMessage.success('保存成功');
|
||||
materialsUsageDetails1();
|
||||
}
|
||||
}
|
||||
// 重置表单
|
||||
resetForm();
|
||||
} catch (error) {
|
||||
ElMessage.error(`${dialogType2 === 'addSon' ? '新增' : '保存'}失败: ${error.message}`);
|
||||
} finally {
|
||||
submitLoading.value = false;
|
||||
dialogVisible2.value = false;
|
||||
}
|
||||
};
|
||||
const materialsUsageDetails1 = () => {
|
||||
materialsUsageDetails({ physicalsupplyId: routeParams.value.id }).then(res => {
|
||||
tableData.value = res.rows
|
||||
})
|
||||
}
|
||||
// 格式化日期
|
||||
const formatDate = (dateString) => {
|
||||
if (!dateString) return '-';
|
||||
const date = new Date(dateString);
|
||||
return date.toLocaleString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
second: '2-digit'
|
||||
}).replace(',', ' ');
|
||||
};
|
||||
function handleCancel() {
|
||||
dialogVisible2.value = false;
|
||||
currentRow2.value = null;
|
||||
}
|
||||
const refreshData = () => {
|
||||
materialsUsageDetails1();
|
||||
ElMessage.success('数据已刷新');
|
||||
};
|
||||
function handleSizeChange() { }
|
||||
onMounted(() => {
|
||||
routeParams.value = proxy.$route.query;
|
||||
console.log('routeParams.value', routeParams.value);
|
||||
materialsUsageDetails1();
|
||||
})
|
||||
</script>
|
||||
Reference in New Issue
Block a user