kd-aiot-frontend-eom/src/views/purchasingManage/purchaseOrder/components/planTableList.vue

<template>
  <ele-modal
    custom-class="ele-dialog-form long-dialog-form"
    :centered="true"
    v-if="visible"
    :visible.sync="visible"
    :append-to-body="true"
    :close-on-click-modal="false"
    title="物品清单"
    width="60%"
    @close="cancel"
    :maxable="true"
    :resizable="true"
  >

    <ele-pro-table
      ref="table"
      :needPage="false"
      :columns="columns"
      :toolkit="[]"
      :max-height="500"
      :datasource="tableList"
      :selection.sync="selection"
      row-key="id"
    >
      <template v-slot:technicalDrawings="{ row }">
        <fileMain v-model="row.technicalDrawings" type="view"></fileMain>
      </template>
      <template v-slot:files="{ row }">
        <fileMain v-model="row.files" type="view"></fileMain>
      </template>
    </ele-pro-table>
    <div slot="footer" class="footer">
      <el-button type="primary" @click="save">选择</el-button>

      <el-button @click="cancel">返回</el-button>
    </div>
  </ele-modal>
</template>

<script>
  // import fileMain from '@/components/addDoc/index.vue';
  export default {
    components: {
      // fileMain,
    },

    data() {
      return {
        fullscreen: false,
        visible: false,
        tableList: [],
        rawDetailList: [],
        outputDetailList: [],
        type: '',
        selection: [],
        contractStartDate: '',
        columns: [
          {
            width: 45,
            type: 'index',
            columnKey: 'index',
            align: 'center',
            fixed: 'left'
          },
          {
            width: 45,
            type: 'selection',
            columnKey: 'selection',
            align: 'center',
            fixed: 'left',
            show: this.isSupplier
          },
          {
            width: 150,
            prop: 'productCategoryName',
            label: '分类',
            slot: 'productCategoryName',
            align: 'center'
          },
          {
            width: 140,
            prop: 'productCode',
            label: '编码',
            slot: 'productCode',
            align: 'center'
          },
          {
            width: 240,
            prop: 'productName',
            label: '名称',
            slot: 'productName',
            align: 'center'
          },
          {
            width: 150,
            prop: 'batchNo',
            label: '批次号',
            align: 'center'
          },
          {
            width: 150,
            prop: 'taskName',
            label: '工序',
            slot: 'taskName',
            align: 'center'
          },
          {
            width: 150,
            prop: 'productBrand',
            label: '牌号',
            slot: 'productBrand',
            align: 'center'
          },
          {
            width: 80,
            prop: 'totalCount',
            label: '数量',
            slot: 'totalCount',
            align: 'center'
          },
          // {
          //   width: 80,
          //   prop: 'doneTotalCount',
          //   label: '已采数量',
          //   align: 'center'
          // },
          // {
          //   width: 80,
          //   prop: 'waitTotalCount',
          //   label: '待采数量',
          //   align: 'center'
          // },

          {
            width: 100,
            prop: 'measuringUnit',
            label: '单位',
            slot: 'measuringUnit',
            align: 'center'
          },
          {
            width: 130,
            prop: 'modelType',
            label: '型号',
            slot: 'modelType',
            align: 'center'
          },

          {
            width: 120,
            prop: 'specification',
            label: '规格',
            slot: 'specification',
            align: 'center'
          },

          // {
          //   width: 150,
          //   prop: 'arrivalWay',
          //   label: '到货方式',
          //   formatter: (row, column, cellValue) => {
          //     return cellValue == 1 ? '一次性到货' : '分批到货';
          //   },
          //   align: 'center'
          // },
          {
            width: 170,
            prop: 'receiveDate',
            label: '到货日期',
            slot: 'expectReceiveDate',
            align: 'center'
          },

          {
            width: 160,
            prop: 'technicalDrawings',
            label: '图纸附件',
            slot: 'technicalDrawings',
            align: 'center'
          },
          {
            width: 140,
            prop: 'files',
            label: '附件',
            slot: 'files',
            align: 'center'
          },
          {
            width: 220,
            prop: 'remark',
            label: '备注',
            slot: 'remark',
            align: 'center'
          }
        ]
      };
    },
    methods: {
      async open(data) {
        this.visible = true;

        this.tableList = data.productList;
        this.rawDetailList = data.rawDetailList || [];
        this.outputDetailList = data.outputDetailList || [];
      },
      contractOpen(data, contractStartDate) {
        this.visible = true;
        this.contractStartDate = contractStartDate;
        this.type = 'contract';
        this.tableList = data;
      },
      cancel() {
        this.visible = false;
        this.tableList = [];
        this.rawDetailList = [];
        this.outputDetailList = [];
        this.type = '';
        this.contractStartDate = '';
      },

      save() {
        if (this.selection.length == 0) {
          this.$message.error('请选择一条数据');
          return;
        }
        console.log(this.type);
        if (this.type == 'contract') {
          this.$emit('contractSuccess', {
            productList: this.selection,
            contractStartDate: this.contractStartDate
          });
          this.cancel();

          return;
        }
        this.$emit('success', {
          productList: this.selection,
          rawDetailList: this.rawDetailList,
          outputDetailList: this.outputDetailList
        });
        this.cancel();
      }
    }
  };
</script>

<style scoped lang="scss">
  .ele-dialog-form {
    .el-form-item {
      margin-bottom: 10px;
    }
  }

  .headbox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .amount {
      font-size: 14px;
      font-weight: bold;
    }
  }
</style>