printing-portal/src/views/base/work-xmd.vue

<style scoped>
.user-panel {
  margin: 10px auto;
}
</style>
<template>
  <el-dialog :visible.sync="showDialog" :title="title" :modal-append-to-body="false" style="text-align:left;" @close="closeDialog" :close-on-click-modal="false">
    <div class="user-panel" v-loading="loading">
      <table width="100%">
        <tr>
          <td>客户：{{dataCustomer}}</td>
          <td>订单号：{{dataNumber}}</td>
          <td>品名：{{dataName}}</td>
          <td>幅宽：{{dataWidth}}</td>
          <td>单位：{{dataUnit}}</td>
        </tr>
      </table>
      <el-table :data="dataList" style="min-height:400px;" v-loading="loading" stripe>
        <el-table-column prop="sort" label="序号"></el-table-column>
        <el-table-column prop="length" label="长度"></el-table-column>
      </el-table>
      <div>件数：{{totalCount}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;长度：{{totalLength}}</div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">关 闭</el-button>
      <el-button type="primary" @click="exportXls" :loading="loading">下 载</el-button>
    </span>
  </el-dialog>
</template>
<script>
import Constant from "@/constant";
import workApi from "@/api/base/work";

export default {
  props: ["businessKey", "title"],
  data() {
    return {
      showDialog: true,
      loading: false,
      dataCustomer: "",
      dataNumber: "",
      dataName: "",
      dataWidth: "",
      dataUnit: "",
      dataList: [],
      totalCount: "",
      totalLength: ""
    };
  },
  methods: {
    exportXls() {
      var self = this;
      self.loading = true;

      var formData = new FormData();
      formData.append("workId", self.businessKey);

      workApi.tableXMDXls(formData).then(function (response) {
        self.loading = false;

        var jsonData = response.data;
        self.$message({
          showClose: true,
          dangerouslyUseHTMLString: true,
          message: jsonData.message + `,<a href="${jsonData.data}" target="_blank">点击下载</a>&nbsp;`,
          duration: 30000,
        });
      }).catch((error) => {
        self.loading = false;
      });
    },
    closeDialog() {
      this.$emit("close", false);
    },
  },
  mounted: function () {
    var self = this;
    self.loading = true;

    var formData = new FormData();
    formData.append("workId", self.businessKey);
    workApi.tableXMD(formData).then(response => {
      var jsonData = response.data;
      self.loading = false;

      if (jsonData.result) {
        self.dataCustomer = jsonData.data.customer;
        self.dataNumber = jsonData.data.number;
        self.dataName = jsonData.data.name;
        self.dataWidth = jsonData.data.width;
        self.dataUnit = jsonData.data.unit;
        self.dataList = jsonData.data.list;
        self.totalCount = jsonData.data.totalCount;
        self.totalLength = jsonData.data.totalLength;
      } else {
        self.$message.error(jsonData.message + "");
      }
    });
  }
};
</script>