|
|
@@ -1,8 +1,13 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
-
|
|
|
<headerTitle title="采购信息"></headerTitle>
|
|
|
- <el-form :model="formData" ref="formRef" label-width="120px" class="ele-body" :rules="rules">
|
|
|
+ <el-form
|
|
|
+ :model="formData"
|
|
|
+ ref="formRef"
|
|
|
+ label-width="120px"
|
|
|
+ class="ele-body"
|
|
|
+ :rules="rules"
|
|
|
+ >
|
|
|
<el-row :gutter="32">
|
|
|
<el-col :span="12">
|
|
|
<el-form-item label="配料计划名称" prop="name">
|
|
|
@@ -19,16 +24,31 @@
|
|
|
</el-form>
|
|
|
|
|
|
<el-form :model="formData" ref="tableForm">
|
|
|
- <ele-pro-table ref="table" :needPage="false" :columns="columns" row-key="id">
|
|
|
+ <ele-pro-table
|
|
|
+ ref="table"
|
|
|
+ :needPage="false"
|
|
|
+ :columns="columns"
|
|
|
+ row-key="id"
|
|
|
+ >
|
|
|
<!-- 展开内容 -->
|
|
|
<template v-slot:expand="{ row }">
|
|
|
- <div style="
|
|
|
+ <div
|
|
|
+ style="
|
|
|
width: calc(100% - 95px);
|
|
|
min-height: 60px;
|
|
|
margin-left: 95px;
|
|
|
- " v-if="row.materialList.length > 0">
|
|
|
- <ele-pro-table :toolbar="false" toolsTheme="none" ref="table2" :need-page="false"
|
|
|
- :datasource="row.materialList" :columns="columns2" row-key="id">
|
|
|
+ "
|
|
|
+ v-if="row.materialList.length > 0"
|
|
|
+ >
|
|
|
+ <ele-pro-table
|
|
|
+ :toolbar="false"
|
|
|
+ toolsTheme="none"
|
|
|
+ ref="table2"
|
|
|
+ :need-page="false"
|
|
|
+ :datasource="row.materialList"
|
|
|
+ :columns="columns2"
|
|
|
+ row-key="id"
|
|
|
+ >
|
|
|
<template v-slot:sort="{ $index }">
|
|
|
{{ $index }}
|
|
|
</template>
|
|
|
@@ -38,43 +58,47 @@
|
|
|
</template>
|
|
|
|
|
|
<template v-slot:requireDeliveryTime="{ row }">
|
|
|
- <span v-if="row.deliveryMethod == 1">{{ row.requireDeliveryTime }}</span>
|
|
|
-
|
|
|
-
|
|
|
- <el-link type="primary" :underline="false" v-if="row.deliveryMethod == 2"
|
|
|
- @click.native="handleMethod(row)">
|
|
|
+ <span v-if="row.deliveryMethod == 1">{{
|
|
|
+ row.requireDeliveryTime
|
|
|
+ }}</span>
|
|
|
+
|
|
|
+ <el-link
|
|
|
+ type="primary"
|
|
|
+ :underline="false"
|
|
|
+ v-if="row.deliveryMethod == 2"
|
|
|
+ @click.native="handleMethod(row)"
|
|
|
+ >
|
|
|
设置分批时间
|
|
|
</el-link>
|
|
|
</template>
|
|
|
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
<template v-slot:imgUrl="{ row }">
|
|
|
<div v-if="row.imgUrl && row.imgUrl?.length">
|
|
|
- <el-link v-for="link in row.imgUrl" :key="link.id" type="primary" :underline="false"
|
|
|
- @click="downloadFile(link)">
|
|
|
- {{ link.name }}</el-link>
|
|
|
+ <el-link
|
|
|
+ v-for="link in row.imgUrl"
|
|
|
+ :key="link.id"
|
|
|
+ type="primary"
|
|
|
+ :underline="false"
|
|
|
+ @click="downloadFile(link)"
|
|
|
+ >
|
|
|
+ {{ link.name }}</el-link
|
|
|
+ >
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<template v-slot:files="{ row }">
|
|
|
<div v-if="row.files && row.files?.length">
|
|
|
- <el-link v-for="link in row.files" :key="link.id" type="primary" :underline="false"
|
|
|
- @click="downloadFile(link)">
|
|
|
- {{ link.name }}</el-link>
|
|
|
+ <el-link
|
|
|
+ v-for="link in row.files"
|
|
|
+ :key="link.id"
|
|
|
+ type="primary"
|
|
|
+ :underline="false"
|
|
|
+ @click="downloadFile(link)"
|
|
|
+ >
|
|
|
+ {{ link.name }}</el-link
|
|
|
+ >
|
|
|
</div>
|
|
|
</template>
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
</ele-pro-table>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -86,253 +110,245 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { getById } from '@/api/bpm/components/materialPlan/index';
|
|
|
-import { getFile } from '@/api/system/file';
|
|
|
-import timeDialog from './timeDialog'
|
|
|
-
|
|
|
-export default {
|
|
|
- components: {
|
|
|
- timeDialog
|
|
|
- },
|
|
|
- props: {
|
|
|
- businessId: {
|
|
|
- default: ''
|
|
|
- }
|
|
|
- },
|
|
|
- mixins: [],
|
|
|
-
|
|
|
- data() {
|
|
|
- return {
|
|
|
- visible: false,
|
|
|
- title: '采购配料计划',
|
|
|
-
|
|
|
- // 表格列配置
|
|
|
- columns: [
|
|
|
- {
|
|
|
- width: 45,
|
|
|
- type: 'expand',
|
|
|
- columnKey: 'materialList',
|
|
|
- align: 'center',
|
|
|
- slot: 'expand'
|
|
|
- },
|
|
|
-
|
|
|
- {
|
|
|
- width: 50,
|
|
|
- label: '序号',
|
|
|
- type: 'index',
|
|
|
- align: 'center',
|
|
|
- slot: 'index'
|
|
|
- },
|
|
|
-
|
|
|
- {
|
|
|
- prop: 'salesOrderCode',
|
|
|
- label: '销售订单号',
|
|
|
- showOverflowTooltip: true,
|
|
|
- align: 'center',
|
|
|
- minWidth: 170
|
|
|
- },
|
|
|
- {
|
|
|
- prop: 'customerName',
|
|
|
- label: '客户名称',
|
|
|
- align: 'center',
|
|
|
- showOverflowTooltip: true
|
|
|
- },
|
|
|
- {
|
|
|
- prop: 'serialNo',
|
|
|
- label: '客户代号',
|
|
|
- align: 'center',
|
|
|
- showOverflowTooltip: true
|
|
|
- },
|
|
|
- {
|
|
|
- prop: 'productCode',
|
|
|
- label: '产品编码',
|
|
|
- align: 'center',
|
|
|
- showOverflowTooltip: true,
|
|
|
- minWidth: 140
|
|
|
- },
|
|
|
-
|
|
|
- {
|
|
|
- prop: 'productName',
|
|
|
- label: '产品名称',
|
|
|
- align: 'center',
|
|
|
- minWidth: 120
|
|
|
- },
|
|
|
-
|
|
|
- {
|
|
|
- prop: 'model',
|
|
|
- label: '型号',
|
|
|
- align: 'center',
|
|
|
- minWidth: 120
|
|
|
- },
|
|
|
-
|
|
|
- {
|
|
|
- prop: 'brandNo',
|
|
|
- label: '牌号',
|
|
|
- align: 'center'
|
|
|
- },
|
|
|
-
|
|
|
- {
|
|
|
- prop: 'deliveryTime',
|
|
|
- label: '交付日期',
|
|
|
- align: 'center',
|
|
|
- showOverflowTooltip: true
|
|
|
- },
|
|
|
- {
|
|
|
- prop: 'contractNum',
|
|
|
- label: '订单数量',
|
|
|
- align: 'center'
|
|
|
- },
|
|
|
- {
|
|
|
- prop: 'lackNum',
|
|
|
- label: '欠交数量',
|
|
|
- align: 'center'
|
|
|
- },
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- ],
|
|
|
-
|
|
|
- columns2: [
|
|
|
- {
|
|
|
- width: 50,
|
|
|
- label: '序号',
|
|
|
- prop: 'sort',
|
|
|
- slot: 'sort',
|
|
|
- align: 'center'
|
|
|
- },
|
|
|
-
|
|
|
- {
|
|
|
- label: '物料名称',
|
|
|
- prop: 'name',
|
|
|
- align: 'center'
|
|
|
- },
|
|
|
-
|
|
|
- {
|
|
|
- label: '物料编码',
|
|
|
- prop: 'code',
|
|
|
- align: 'center'
|
|
|
- },
|
|
|
- {
|
|
|
- label: '牌号',
|
|
|
- prop: 'brandNum',
|
|
|
- align: 'center'
|
|
|
- },
|
|
|
- {
|
|
|
- label: '型号',
|
|
|
- prop: 'modelType',
|
|
|
- align: 'center'
|
|
|
- },
|
|
|
-
|
|
|
- {
|
|
|
- prop: 'inventoryQuantity',
|
|
|
- label: '库存',
|
|
|
- showOverflowTooltip: true,
|
|
|
-
|
|
|
- },
|
|
|
-
|
|
|
- {
|
|
|
- prop: 'unit',
|
|
|
- label: '计量单位',
|
|
|
- showOverflowTooltip: true,
|
|
|
- action: 'unit',
|
|
|
- },
|
|
|
-
|
|
|
- {
|
|
|
- label: '需求数量',
|
|
|
- prop: 'demandQuantity',
|
|
|
- align: 'center',
|
|
|
- },
|
|
|
-
|
|
|
- // {
|
|
|
- // label: '采购数量',
|
|
|
- // prop: 'purchaseQuantity',
|
|
|
- // align: 'center'
|
|
|
- // },
|
|
|
-
|
|
|
- {
|
|
|
- label: '到货方式',
|
|
|
- slot: 'deliveryMethod',
|
|
|
- action: 'deliveryMethod',
|
|
|
- align: 'center'
|
|
|
- },
|
|
|
-
|
|
|
- {
|
|
|
- label: '要求到货时间',
|
|
|
- slot: 'requireDeliveryTime',
|
|
|
- action: 'requireDeliveryTime',
|
|
|
- align: 'center'
|
|
|
- },
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- {
|
|
|
- label: '图纸',
|
|
|
- slot: 'imgUrl',
|
|
|
- action: 'imgUrl',
|
|
|
- align: 'center',
|
|
|
- },
|
|
|
-
|
|
|
-
|
|
|
- {
|
|
|
- label: '附件',
|
|
|
- slot: 'files',
|
|
|
- action: ' files',
|
|
|
- align: 'center',
|
|
|
- minWidth: 140
|
|
|
- },
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- ],
|
|
|
-
|
|
|
- rules: {},
|
|
|
-
|
|
|
- formData: {
|
|
|
- name: '',
|
|
|
- remark: '',
|
|
|
- detailRemoveIds: [],
|
|
|
- materialRemoveIds: []
|
|
|
- }
|
|
|
- };
|
|
|
- },
|
|
|
- created() {
|
|
|
- this.getDetailData(this.businessId);
|
|
|
- },
|
|
|
- methods: {
|
|
|
- downloadFile(file) {
|
|
|
- getFile({ objectName: file.storePath }, file.name);
|
|
|
+ import { getById } from '@/api/bpm/components/materialPlan/index';
|
|
|
+ import { getFile } from '@/api/system/file';
|
|
|
+ import timeDialog from './timeDialog';
|
|
|
+
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ timeDialog
|
|
|
},
|
|
|
- async getDetailData(id) {
|
|
|
- this.loading = true;
|
|
|
- const res = await getById(id);
|
|
|
- this.loading = false;
|
|
|
- if (res) {
|
|
|
- this.$set(this.formData, 'name', res.name);
|
|
|
- this.$set(this.formData, 'remark', res.remark);
|
|
|
- this.formData['id'] = res.id;
|
|
|
- this.$refs.table.setData([...res.salesOrderList]);
|
|
|
- this.$nextTick(() => {
|
|
|
- this.$refs.table.toggleRowExpansionAll()
|
|
|
- this.$forceUpdate()
|
|
|
- })
|
|
|
+ props: {
|
|
|
+ businessId: {
|
|
|
+ default: ''
|
|
|
}
|
|
|
},
|
|
|
-
|
|
|
- handleMethod(row) {
|
|
|
- this.$refs.timeDialogRef.open(row)
|
|
|
+ mixins: [],
|
|
|
+
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ visible: false,
|
|
|
+ title: '采购配料计划',
|
|
|
+
|
|
|
+ // 表格列配置
|
|
|
+ columns: [
|
|
|
+ {
|
|
|
+ width: 45,
|
|
|
+ type: 'expand',
|
|
|
+ columnKey: 'materialList',
|
|
|
+ align: 'center',
|
|
|
+ slot: 'expand'
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ width: 50,
|
|
|
+ label: '序号',
|
|
|
+ type: 'index',
|
|
|
+ align: 'center',
|
|
|
+ slot: 'index'
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ prop: 'salesOrderCode',
|
|
|
+ label: '销售订单号',
|
|
|
+ showOverflowTooltip: true,
|
|
|
+ align: 'center',
|
|
|
+ minWidth: 170
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'customerName',
|
|
|
+ label: '客户名称',
|
|
|
+ align: 'center',
|
|
|
+ showOverflowTooltip: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'serialNo',
|
|
|
+ label: '客户代号',
|
|
|
+ align: 'center',
|
|
|
+ showOverflowTooltip: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'productCode',
|
|
|
+ label: '产品编码',
|
|
|
+ align: 'center',
|
|
|
+ showOverflowTooltip: true,
|
|
|
+ minWidth: 140
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ prop: 'productName',
|
|
|
+ label: '产品名称',
|
|
|
+ align: 'center',
|
|
|
+ minWidth: 120
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ prop: 'model',
|
|
|
+ label: '型号',
|
|
|
+ align: 'center',
|
|
|
+ minWidth: 120
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ prop: 'brandNo',
|
|
|
+ label: '牌号',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ prop: 'deliveryTime',
|
|
|
+ label: '交付日期',
|
|
|
+ align: 'center',
|
|
|
+ showOverflowTooltip: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'contractNum',
|
|
|
+ label: '订单数量',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'lackNum',
|
|
|
+ label: '欠交数量',
|
|
|
+ align: 'center'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+
|
|
|
+ columns2: [
|
|
|
+ {
|
|
|
+ width: 50,
|
|
|
+ label: '序号',
|
|
|
+ prop: 'sort',
|
|
|
+ slot: 'sort',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ label: '物料名称',
|
|
|
+ prop: 'name',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ label: '物料编码',
|
|
|
+ prop: 'code',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '牌号',
|
|
|
+ prop: 'brandNum',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '型号',
|
|
|
+ prop: 'modelType',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ prop: 'inventoryQuantity',
|
|
|
+ label: '库存',
|
|
|
+ showOverflowTooltip: true
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ prop: 'unit',
|
|
|
+ label: '计量单位',
|
|
|
+ showOverflowTooltip: true,
|
|
|
+ action: 'unit'
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ label: '需求数量',
|
|
|
+ prop: 'demandQuantity',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+
|
|
|
+ // {
|
|
|
+ // label: '采购数量',
|
|
|
+ // prop: 'purchaseQuantity',
|
|
|
+ // align: 'center'
|
|
|
+ // },
|
|
|
+
|
|
|
+ {
|
|
|
+ label: '到货方式',
|
|
|
+ slot: 'deliveryMethod',
|
|
|
+ action: 'deliveryMethod',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ label: '要求到货时间',
|
|
|
+ slot: 'requireDeliveryTime',
|
|
|
+ action: 'requireDeliveryTime',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ label: '供应商',
|
|
|
+ slot: 'supplierName',
|
|
|
+ action: 'supplierName',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ label: '图纸',
|
|
|
+ slot: 'imgUrl',
|
|
|
+ action: 'imgUrl',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ label: '附件',
|
|
|
+ slot: 'files',
|
|
|
+ action: ' files',
|
|
|
+ align: 'center',
|
|
|
+ minWidth: 140
|
|
|
+ }
|
|
|
+ ],
|
|
|
+
|
|
|
+ rules: {},
|
|
|
+
|
|
|
+ formData: {
|
|
|
+ name: '',
|
|
|
+ remark: '',
|
|
|
+ detailRemoveIds: [],
|
|
|
+ materialRemoveIds: []
|
|
|
+ }
|
|
|
+ };
|
|
|
},
|
|
|
- }
|
|
|
-};
|
|
|
+ created() {
|
|
|
+ this.getDetailData(this.businessId);
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ downloadFile(file) {
|
|
|
+ getFile({ objectName: file.storePath }, file.name);
|
|
|
+ },
|
|
|
+ async getDetailData(id) {
|
|
|
+ this.loading = true;
|
|
|
+ const res = await getById(id);
|
|
|
+ this.loading = false;
|
|
|
+ if (res) {
|
|
|
+ this.$set(this.formData, 'name', res.name);
|
|
|
+ this.$set(this.formData, 'remark', res.remark);
|
|
|
+ this.formData['id'] = res.id;
|
|
|
+ this.$refs.table.setData([...res.salesOrderList]);
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.table.toggleRowExpansionAll();
|
|
|
+ this.$forceUpdate();
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ handleMethod(row) {
|
|
|
+ this.$refs.timeDialogRef.open(row);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-:deep(.el-table__expanded-cell) {
|
|
|
-
|
|
|
- padding-bottom: 30px !important;
|
|
|
- border-bottom: 12px solid #CCFFCC !important;
|
|
|
-}
|
|
|
+ :deep(.el-table__expanded-cell) {
|
|
|
+ padding-bottom: 30px !important;
|
|
|
+ border-bottom: 12px solid #ccffcc !important;
|
|
|
+ }
|
|
|
</style>
|
|
|
-
|
|
|
-
|
