优化

src/views/bpm/handleTask/components/outsourcedWarehousing/components/details.vue

@@ -0,0 +1,226 @@
+<template>
+    <el-dialog title="详情" :visible.sync="visible" :before-close="handleClose" :close-on-click-modal="false"
+        :close-on-press-escape="false" append-to-body width="80%">
+
+        <!-- 数据表格 -->
+        <ele-pro-table ref="table" v-if="detailType == 1" :columns="columns" cache-key="detailsTable"
+            height="calc(100vh - 350px)">
+            <template v-slot:totalCount="{ row }">
+                {{ row.totalCount }}{{ row.measuringUnit }}
+            </template>
+        </ele-pro-table>
+
+
+        <ele-pro-table ref="table2" v-if="detailType == 2" :columns="columns2" cache-key="detailsTable2"
+            height="calc(100vh - 350px)">
+            <template v-slot:totalCount="{ row }">
+                {{ row.totalCount }}{{ row.measuringUnit }}
+            </template>
+        </ele-pro-table>
+
+
+
+    </el-dialog>
+</template>
+  
+<script>
+
+
+export default {
+    components: {
+    },
+    data() {
+        return {
+            visible: false,
+            detailType: null,
+
+        }
+    },
+
+    computed: {
+        // 表格列配置
+        columns() {
+            return [
+                {
+                    columnKey: 'index',
+                    label: '序号',
+                    type: 'index',
+                    width: 55,
+                    align: 'center',
+                    showOverflowTooltip: true,
+                    fixed: 'left'
+                },
+
+
+                {
+                    prop: 'categoryCode',
+                    label: '编码',
+                    align: 'center'
+                },
+                {
+                    prop: 'categoryName',
+                    label: '名称',
+                    align: 'center'
+                },
+
+                {
+                    prop: 'brandNum',
+                    label: '牌号',
+                    align: 'center'
+                },
+
+
+                {
+                    prop: 'modelType',
+                    label: '型号',
+                    align: 'center'
+                },
+
+
+
+                {
+                    prop: 'specification',
+                    label: '规格',
+                    align: 'center'
+                },
+
+
+                {
+                    slot: 'totalCount',
+                    label: '数量',
+                    align: 'center'
+                },
+
+
+
+
+
+
+
+
+
+            ];
+        },
+
+        columns2() {
+            return [
+                {
+                    columnKey: 'index',
+                    label: '序号',
+                    type: 'index',
+                    width: 55,
+                    align: 'center',
+                    showOverflowTooltip: true,
+                    fixed: 'left'
+                },
+
+
+                {
+                    prop: 'categoryCode',
+                    label: '编码',
+                    align: 'center'
+                },
+                {
+                    prop: 'categoryName',
+                    label: '名称',
+                    align: 'center'
+                },
+
+                {
+                    prop: 'brandNum',
+                    label: '牌号',
+                    align: 'center'
+                },
+
+
+                {
+                    prop: 'modelType',
+                    label: '型号',
+                    align: 'center'
+                },
+
+
+
+                {
+                    prop: 'specification',
+                    label: '规格',
+                    align: 'center'
+                },
+
+
+                {
+                    label: '物料代号',
+                    prop: 'extInfo.materielCode',
+                    align: 'center'
+                },
+                {
+                    label: '客户代号',
+                    prop: 'extInfo.clientCode',
+                    align: 'center'
+                },
+                {
+                    label: '刻码',
+                    prop: 'extInfo.engrave',
+                    align: 'center'
+                },
+
+
+                {
+                    slot: 'totalCount',
+                    label: '数量',
+                    align: 'center'
+                },
+
+
+            ];
+        },
+
+        clientEnvironmentId() {
+            return this.$store.state.user.info.clientEnvironmentId;
+        },
+    },
+
+    watch: {
+
+    },
+    methods: {
+
+
+
+        open(row) {
+            this.visible = true
+            if (row.detailType == 1) {
+                this.detailType = 1
+                this.$nextTick(() => {
+                    this.$refs.table.setData([...row.detailList]);
+                })
+            } else if (row.detailType == 2) {
+                this.detailType = 2
+                this.$nextTick(() => {
+                    this.$refs.table2.setData([...row.detailList]);
+                })
+            }
+
+
+
+        },
+
+
+
+
+
+
+
+        handleClose() {
+            this.visible = false
+
+
+
+        },
+
+    }
+}
+</script>
+  
+<style lang="scss" scoped></style>
+  

src/views/bpm/handleTask/components/outsourcedWarehousing/components/timeDialog.vue

@@ -0,0 +1,179 @@
+<template>
+    <el-dialog :title="title"  v-if="visible" :visible.sync="visible" :before-close="handleClose" :close-on-click-modal="false"
+        :close-on-press-escape="false" append-to-body width="35%">
+
+        <el-form :model="form" ref="tableForm" class="tableForm" :rules="tableFormRules">
+            <el-button type="primary" size="small" style="margin-bottom: 10px" @click="handleAdd()"  v-if="!isDetails">新增</el-button>
+            
+             <span>&nbsp;&nbsp;&nbsp;&nbsp;委外总数： {{  formedNumLast }}</span>
+             
+            <el-table ref="multipleTable" :data="form.timeList" tooltip-effect="dark" style="width: 100%" stripe
+                :header-cell-style="{ background: '#EEEEEE', border: 'none' }">
+
+
+
+                <el-table-column label="数量" prop="purchaseQuantity">
+                    <template slot-scope="{ row, $index }">
+                        <el-form-item :prop="'timeList.' + $index + '.purchaseQuantity'"
+                            :rules="tableFormRules.purchaseQuantity">
+                            <el-input placeholder="请输入" clearable v-model="row.purchaseQuantity"></el-input>
+                        </el-form-item>
+
+                    </template>
+                </el-table-column>
+
+
+
+                <el-table-column label="到货时间">
+                    <template slot-scope="{ row, $index }">
+                        <el-form-item :prop="'timeList.' + $index + '.requireDeliveryTime'"
+                            :rules="tableFormRules.requireDeliveryTime">
+                            <el-date-picker clearable v-model="row.requireDeliveryTime" value-format="timestamp"
+                                placeholder="请选择日期">
+                            </el-date-picker>
+                        </el-form-item>
+                    </template></el-table-column>
+
+                <el-table-column label="操作" prop="action" width="80" v-if="!isDetails">
+                    <template slot-scope="{ $index }">
+                        <el-link type="primary" :underline="false" @click="handleDel($index)">删除</el-link>
+                    </template>
+                </el-table-column>
+
+
+            </el-table>
+
+        </el-form>
+
+
+
+
+        <div class="btns" v-if="!isDetails">
+            <el-button type="primary" size="small" @click="handleOk">确认</el-button>
+            <el-button size="small" @click="handleClose">取消</el-button>
+        </div>
+    </el-dialog>
+</template>
+  
+<script>
+
+
+
+
+export default {
+    components: {
+    },
+
+    props: {
+    
+    },
+    data() {
+        return {
+            visible: false,
+            title: '设置分批时间',
+
+            current: null,
+            form: {
+                timeList: [
+                    {
+                        requireDeliveryTime: null,
+                        purchaseQuantity: null
+                    }
+                ]
+            },
+
+            tableFormRules: {
+                purchaseQuantity: {
+                    required: true,
+                    message: '请输入数量',
+                    trigger: 'blur'
+                },
+
+                requireDeliveryTime: {
+                    required: true,
+                    message: '请选择日期',
+                    trigger: 'change'
+                }
+            },
+
+            formedNumLast: 0,
+            isDetails: false
+
+        
+
+
+        }
+    },
+
+    watch: {
+
+    },
+    methods: {
+
+
+
+        open(row, type) {
+        
+            this.formedNumLast = row.formedNumLast
+            this.form.timeList = []
+
+            this.visible = true
+            this.isDetails = false
+            if(type == 'details') {
+                this.form.timeList = row.timeList
+                this.isDetails = true
+                this.$forceUpdate()
+            }
+           
+
+        },
+
+
+        handleAdd() {
+            this.form.timeList.push({
+                requireDeliveryTime: null,
+                purchaseQuantity: null
+            })
+        },
+
+        handleDel(index) {
+            this.form.timeList.splice(index, 1)
+        },
+
+
+
+        handleOk() {
+            this.$refs.tableForm.validate((valid) => {
+                if (valid) {
+                    this.$emit('chooseTime', this.form.timeList)
+                    this.handleClose()
+                }
+            })
+        },
+
+
+
+
+        handleClose() {
+            this.visible = false
+            this.form.timeList = [{
+                requireDeliveryTime: null,
+                purchaseQuantity: null
+            }];
+        },
+
+    }
+}
+</script>
+  
+<style lang="scss" scoped>
+.btns {
+    margin-top: 20px;
+    text-align: center;
+}
+
+.el-form-item {
+    margin-bottom: 20px !important;
+}
+</style>
+  

src/views/bpm/handleTask/components/outsourcedWarehousing/detailDialog.vue

@@ -3,24 +3,78 @@
 
     <headerTitle title="委外入库申请单"></headerTitle>
 
+    <!-- 数据表格 -->
+    <ele-pro-table ref="table" :columns="columns" :datasource="datasource" cache-key="workOrderTable">
 
 
-      <ele-pro-table ref="table" :needPage="false" :columns="columns" row-key="id">
- 
-      </ele-pro-table>
+      <template v-slot:requireDeliveryTime="{ row }">
+        <span v-if="row.deliveryMethod == 1">{{ row.requireDeliveryTime }}</span>
 
+        <el-link v-if="row.deliveryMethod == 2" type="primary" :underline="false"
+          @click.native="handleMethod(row)">分批时间</el-link>
 
+      </template>
+
+
+      <template v-slot:status="{ row }">
+        <el-tag>{{ row.status == 1 ? '已发布' : '未发布' }}</el-tag>
+      </template>
+
+
+      <template v-slot:technicalDrawings="{ row }">
+
+        <div v-if="row.technicalDrawings && row.technicalDrawings?.length">
+          <el-link v-for="link in row.technicalDrawings" :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.technicalDrawings?.length">
+          <el-link v-for="link in row.files" :key="link.id" type="primary" :underline="false" @click="downloadFile(link)">
+            {{ link.name }}</el-link>
+        </div>
+
+      </template>
+
+
+      <template v-slot:action="{ row }">
+
+
+        <el-link type="primary" :underline="false" @click="handleDetails(row)">
+          详情
+        </el-link>
+
+
+
+
+
+
+      </template>
+
+
+    </ele-pro-table>
+
+    <detail ref="detailsRef"></detail>
+
+    <timeDialog ref="timeDialogRef"></timeDialog>
 
   </div>
 </template>
   
 <script>
 import { getById } from '@/api/bpm/components/outsourcedWarehousing/index';
-import { getFile } from '@/api/system/file';
+import Detail from './components/details.vue';
+import timeDialog from './components/timeDialog.vue'
+import { getFile } from "@/api/system/file";
 
 export default {
   components: {
-
+    Detail,
+    timeDialog
   },
   props: {
     businessId: {
@@ -32,111 +86,117 @@ export default {
   data() {
     return {
       visible: false,
-      title: '采购配料计划',
+
 
       // 表格列配置
       columns: [
-    
-      {
-                    columnKey: 'index',
-                    label: '序号',
-                    type: 'index',
-                    width: 55,
-                    align: 'center',
-                    showOverflowTooltip: true,
-                    fixed: 'left'
-                },
-                {
-                    prop: 'id',
-                    label: '委外单id',
-                    align: 'center',
-                    minWidth: 110
-                },
-
-                {
-                    prop: 'code',
-                    label: '委外编码',
-                    align: 'center'
-                },
-                {
-                    prop: 'name',
-                    label: '委外名称',
-                    align: 'center'
-                },
-
-                {
-                    prop: 'workOrderId',
-                    label: '工单id',
-                    align: 'center'
-                },
-
-
-                {
-                    prop: 'workOrderCode',
-                    label: '工单编码',
-                    align: 'center'
-                },
-                {
-                    prop: 'formedNumLast',
-                    label: '委外数量',
-                    align: 'center'
-                },
-
-                {
-                    prop: 'formedWeightLast',
-                    label: '委外重量',
-                    align: 'center'
-                },
-
-                {
-                    prop: 'totalWeight',
-                    label: '总重量',
-                    align: 'center'
-                },
-
-                
-                {
-                    prop: 'warehouseName',
-                    label: '入库仓库',
-                    align: 'center'
-                },
-
-
-                {
-                    prop: 'remark',
-                    label: '备注',
-                    align: 'center'
-                },
-
-                {
-                    prop: 'expectReceiveDate',
-                    label: '预计到货日期',
-                    align: 'center',
-                    showOverflowTooltip: true,
-                    minWidth: 110
-                },
-
-
-                {
-                    prop: 'createTime',
-                    label: '创建时间',
-                    align: 'center',
-                    showOverflowTooltip: true,
-                    minWidth: 110
-                },
-
-
-                
-                {
-                    columnKey: 'action',
-                    label: '操作',
-                    width: 120,
-                    align: 'center',
-                    resizable: false,
-                    fixed: 'right',
-                    slot: 'action',
-                    showOverflowTooltip: true
-                }
+        {
+          columnKey: 'index',
+          label: '序号',
+          type: 'index',
+          width: 55,
+          align: 'center',
+          showOverflowTooltip: true,
+          fixed: 'left'
+        },
+
+
+        {
+          prop: 'code',
+          label: '委外单编码',
+          align: 'center'
+        },
+        {
+          prop: 'name',
+          label: '委外单名称',
+          align: 'center'
+        },
+
+
+        {
+          prop: 'workOrderCode',
+          label: '工单编码',
+          align: 'center'
+        },
+
+
+
+        {
+          prop: 'taskName',
+          label: '工序',
+          align: 'center'
+        },
+
+
+        {
+          prop: 'formedNumLast',
+          label: '委外数量',
+          align: 'center'
+        },
+
+        {
+          prop: 'formedWeightLast',
+          label: '委外重量',
+          align: 'center'
+        },
+
+
+        {
+          prop: 'remark',
+          label: '备注',
+          align: 'center'
+        },
+
+        {
+          slot: 'requireDeliveryTime',
+          label: '预计到货日期',
+          align: 'center',
+          minWidth: 70
+        },
+
+
+        {
+          prop: 'createTime',
+          label: '创建时间',
+          align: 'center',
+          minWidth: 70
+        },
+
+        {
+          slot: 'status',
+          label: '状态',
+          align: 'center'
+        },
+
+
+        {
+          label: '图片附件',
+          slot: 'technicalDrawings',
+          action: 'technicalDrawings',
+          minWidth: 100,
+        },
+
+        {
+          label: '附件',
+          slot: 'files',
+          action: 'files',
+          minWidth: 100,
+        },
+
+
+
+        {
+          columnKey: 'action',
+          label: '操作',
+          width: 140,
+          align: 'center',
+          resizable: false,
+          fixed: 'right',
+          slot: 'action',
+          showOverflowTooltip: true
+        }
+
+
 
 
       ],
@@ -144,12 +204,7 @@ export default {
 
       rules: {},
 
-      formData: {
-        name: '',
-        remark: '',
-        detailRemoveIds: [],
-        materialRemoveIds: []
-      }
+
     };
   },
   created() {
@@ -157,16 +212,19 @@ export default {
   },
   methods: {
 
+    downloadFile(file) {
+      getFile({ objectName: file.storePath }, file.name);
+    },
+
+
+
     async getDetailData(id) {
       this.loading = true;
       const res = await getById(id);
-      console.log(33,res)
+
       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.$refs.table.setData([res]);
         this.$nextTick(() => {
           this.$refs.table.toggleRowExpansionAll()
           this.$forceUpdate()
@@ -174,9 +232,14 @@ export default {
       }
     },
 
+    handleDetails(row) {
+      this.$refs.detailsRef.open(row)
+    },
+
     handleMethod(row) {
-      this.$refs.timeDialogRef.open(row)
+      this.$refs.timeDialogRef.open(row, 'details')
     },
+
   }
 };
 </script>