177 lines
7.0 KiB
Vue
177 lines
7.0 KiB
Vue
|
<template>
|
||
|
<div class="overall-plan-material-supply">
|
||
|
<!-- tabPosition="left" -->
|
||
|
<el-card shadow="always">
|
||
|
<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>
|
||
|
</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="工程或费用名称" />
|
||
|
<el-table-column prop="unit" label="单位" />
|
||
|
<el-table-column prop="quantity" label="数量" />
|
||
|
<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' }
|
||
|
]
|
||
|
});
|
||
|
// 获取主表数据
|
||
|
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>
|