测试

src/views/saleManage/saleOrder/palletManagement/components/detailDialog.vue

@@ -0,0 +1,231 @@
+<template>
+  <ele-modal
+    custom-class="ele-dialog-form long-dialog-form"
+    :centered="true"
+    v-if="visible"
+    :visible.sync="visible"
+    :append-to-body="true"
+    :fullscreen="fullscreen"
+    :close-on-click-modal="false"
+    width="70%"
+    @close="cancel"
+  >
+    <template slot="title">
+      <modalTitle
+        title="托盘明细"
+        @setFullscreen="fullscreen = !fullscreen"
+      ></modalTitle>
+    </template>
+    <headerTitle title="托盘明细" style="margin-top: 30px"></headerTitle>
+    <ele-pro-table
+      ref="table"
+      :needPage="false"
+      :columns="trayListColumns"
+      :toolkit="[]"
+      :datasource="trayListData"
+      row-key="id"
+    >
+      <template v-slot:type="scope">
+        <el-select
+          v-model="scope.row.type"
+          placeholder="请选择"
+          v-if="scope.row.isUpdate == 2"
+        >
+          <el-option
+            v-for="item in options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
+          </el-option>
+        </el-select>
+        <span v-else>已回收</span>
+      </template>
+    </ele-pro-table>
+    <div slot="footer" class="footer">
+      <el-button type="primary" @click="save" v-click-once>确认</el-button>
+      <el-button @click="cancel">返回</el-button>
+    </div>
+  </ele-modal>
+</template>
+
+<script>
+  import dictMixins from '@/mixins/dictMixins';
+  import { getDetail, updateTrayList } from '@/api/saleManage/palletManagement';
+  import modalTitle from '@/BIZComponents/modalTitle.vue';
+
+  export default {
+    mixins: [dictMixins],
+    components: {
+      modalTitle
+    },
+    data() {
+      return {
+        fullscreen: false,
+        options: [
+          { value: 0, label: '未回收' },
+          { value: 1, label: '已回收' }
+        ],
+        trayListColumns: [
+          {
+            width: 45,
+            type: 'index',
+            columnKey: 'index',
+            align: 'center',
+            fixed: 'left'
+          },
+          {
+            minWidth: 160,
+            prop: 'productCode',
+            label: '编码',
+            showOverflowTooltip: true,
+            align: 'center'
+          },
+          {
+            minWidth: 120,
+            prop: 'productName',
+            label: '名称',
+            showOverflowTooltip: true,
+            align: 'center'
+          },
+
+          {
+            minWidth: 160,
+            prop: 'batchNo',
+            label: '批次号',
+            showOverflowTooltip: true,
+            align: 'center'
+          },
+          {
+            minWidth: 160,
+            prop: 'barcodes',
+            label: '发货条码',
+            showOverflowTooltip: true,
+            align: 'center'
+          },
+          {
+            minWidth: 120,
+            prop: 'materielDesignation',
+            label: '物料代号',
+            showOverflowTooltip: true,
+            align: 'center'
+          },
+          {
+            minWidth: 120,
+            prop: 'clientCode',
+            label: '客户代号',
+            showOverflowTooltip: true,
+            align: 'center'
+          },
+          {
+            minWidth: 120,
+            prop: 'engrave',
+            label: '刻码',
+            showOverflowTooltip: true,
+            align: 'center'
+          },
+          {
+            minWidth: 160,
+            prop: 'packageNo',
+            align: 'center',
+            label: '包装编码',
+            showOverflowTooltip: true
+          },
+          {
+            minWidth: 100,
+            prop: 'packingQuantity',
+            align: 'center',
+            label: '包装数量',
+            showOverflowTooltip: true
+          },
+          {
+            minWidth: 120,
+            prop: 'packingUnit',
+            align: 'center',
+            label: '包装单位',
+            showOverflowTooltip: true
+          },
+          {
+            minWidth: 100,
+            prop: 'totalCount',
+            label: '计量数量',
+            showOverflowTooltip: true,
+            align: 'center'
+          },
+          {
+            minWidth: 150,
+            prop: 'measuringUnit',
+            label: '计量单位',
+            showOverflowTooltip: true,
+            align: 'center'
+          },
+          {
+            width: 120,
+            slot: 'type',
+            prop: 'type',
+            label: '回收状态',
+            align: 'center',
+            fixed: 'right'
+          }
+        ],
+        trayListData: [],
+        visible: false
+      };
+    },
+
+    created() {
+      this.requestDict('产地');
+    },
+    methods: {
+      async open(row) {
+        this.visible = true;
+        await this.getDetailData(row.orderId);
+      },
+      save() {
+        updateTrayList(this.trayListData).then((res) => {
+          this.$message.success('操作成功');
+          this.$emit('success');
+
+          this.cancel();
+        });
+      },
+
+      cancel() {
+        this.$nextTick(() => {
+          this.trayListData = [];
+          this.visible = false;
+        });
+      },
+
+      async getDetailData(orderId) {
+        this.loading = true;
+        const trayList = await getDetail({ orderId});
+        this.loading = false;
+        this.trayListData = trayList.map((item) => {
+          item['isUpdate'] = item.type == 1 ? 1 : 2;
+          return item;
+        });
+      }
+    }
+  };
+</script>
+
+<style scoped lang="scss">
+  .ele-dialog-form {
+    .el-form-item {
+      margin-bottom: 10px;
+    }
+  }
+
+  .headbox {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+
+    .amount {
+      font-size: 14px;
+      font-weight: bold;
+      margin-right: 20px;
+    }
+  }
+</style>