yunsu/ys_vue/src/views/mold/moldDownload.vue

<template slot-scope="scope">
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="filters">
        <el-form-item>
          <el-input v-model="filters.name" placeholder="请输入模具名称进行搜索"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getFileList(filters.name)">查询</el-button>
        </el-form-item>
        <el-form-item style="float: right;">
          <el-dropdown>
            <el-button type="primary">
              下载
              <i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="download(0)">全部下载</el-dropdown-item>
              <el-dropdown-item @click.native="download(1)" divided>模具3D图档</el-dropdown-item>
              <el-dropdown-item @click.native="download(2)">模具2D图档</el-dropdown-item>
              <el-dropdown-item @click.native="download(3)">零件3D图档</el-dropdown-item>
              <el-dropdown-item @click.native="download(4)">零件2D图档</el-dropdown-item>
              <el-dropdown-item @click.native="download(5)">保养方案</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-form-item>
      </el-form>
    </el-col>

    <!--列表-->
    <el-table
      :data="documents"
      :height="tableHeight"
      highlight-current-row
      v-loading="listLoading"
      style="width: 100%;"
      @selection-change="selectionChanged"
    >
      <el-table-column type="selection" width="40"></el-table-column>
      <el-table-column type="index" width="60"></el-table-column>
      <el-table-column width="200" label="模具名称">
        <template slot-scope="scope">
            <router-link :to="'/moldList/' + scope.row.id" tag="span" style="color: #409eff;cursor: pointer;">{{scope.row.modelName}}</router-link>
        </template>
      </el-table-column>
      <el-table-column width="200" label="模具3D图档">
        <template slot-scope="scope">
          <span v-if="scope.row.mould3DFiles.length == 0">未上传</span>
          <span v-else-if="scope.row.mould3DFiles.state == 3">已通过</span>
          <span v-else>未通过</span>
        </template>
      </el-table-column>
      <el-table-column width="200" label="模具2D图档">
        <template slot-scope="scope">
          <span v-if="scope.row.mould2DFiles.length == 0">未上传</span>
          <span v-else-if="scope.row.mould2DFiles.state == 3">已通过</span>
          <span v-else>未通过</span>
        </template>
      </el-table-column>
      <el-table-column width="200" label="零件3D图档">
        <template slot-scope="scope">
          <span v-if="scope.row.sparepart3DFiles.length == 0">未上传</span>
          <span v-else-if="scope.row.sparepart3DFiles.state == 3">已通过</span>
          <span v-else>未通过</span>
        </template>
      </el-table-column>
      <el-table-column width="200" label="零件2D图档">
        <template slot-scope="scope">
          <span v-if="scope.row.sparepart2DFiles.length == 0">未上传</span>
          <span v-else-if="scope.row.sparepart2DFiles.state == 3">已通过</span>
          <span v-else>未通过</span>
        </template>
      </el-table-column>
      <el-table-column width="200" label="保养方案">
        <template slot-scope="scope">
          <span v-if="scope.row.maintainFiles.length == 0">未上传</span>
          <span v-else-if="scope.row.maintainFiles.state == 3">已通过</span>
          <span v-else>未通过</span>
        </template>
      </el-table-column>
    </el-table>

    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[20 , 50 , 80 , 100 , 200]"
        :page-size="20"
        layout="total, sizes, prev, pager, next"
        :total="total"
        style="float:right;"
      ></el-pagination>
    </el-col>
  </section>
</template>

<script>
import util from "../../common/js/util";
export default {
  data() {
    return {
      documents: [],
      filters: {
        name: "",
        value: ""
      },
      listLoading: false,
      page: 1,
      size: 20,
      total: 0,
      tableHeight: 0,
      selectedArray: []
    };
  },
  methods: {
    //分页
    handleCurrentChange(val) {
      this.page = val;
      this.getFileList();
    },
    handleSizeChange(val) {
      this.size = val;
      this.getFileList();
    },
    //获取列表
    getFileList(keyword) {
      this.http.post(
        this.port.mold.moldFileDowloadList,
        {
          keyName: keyword,
          pageSize: this.size,
          pageNum: this.page
        },
        res => {
          if (res.code == "ok") {
            this.documents = res.data.list;
            //对于拿到的所有数据
            this.documents.forEach(file => {
              var mould2DFilesState = true;
              var mould3DFilesState = true;
              var sparepart2DFilesState = true;
              var sparepart3DFilesState = true;
              var maintainFilesState = true;
              //看看每种文档中的所有文件
              file.mould2DFiles.forEach(item => {
                if (item.state != 3) {
                  mould2DFilesState = false;
                }
              });
              file.mould3DFiles.forEach(item => {
                if (item.state != 3) {
                  mould3DFilesState = false;
                }
              });
              file.sparepart2DFiles.forEach(item => {
                if (item.state != 3) {
                  sparepart2DFilesState = false;
                }
              });
              file.sparepart3DFiles.forEach(item => {
                if (item.state != 3) {
                  sparepart3DFilesState = false;
                }
              });
              file.maintainFiles.forEach(item => {
                if (item.state != 3) {
                  maintainFilesState = false;
                }
              });
              //把计算好的状态装进这个模具对象中
              file.mould2DFilesState = mould2DFilesState;
              file.mould3DFilesState = mould3DFilesState;
              file.sparepart2DFilesState = sparepart2DFilesState;
              file.sparepart3DFilesState = sparepart3DFilesState;
              file.maintainFilesState = maintainFilesState;
            });
          } else {
            this.$message({
              message: res.msg,
              type: "error"
            });
          }
        },
        error => {
          this.$message({
            message: error,
            type: "error"
          });
        }
      );
    },
    //点击复选时
    selectionChanged(row) {
      this.selectedArray = [];
      row.forEach(item => {
        this.selectedArray.push(item.id);
      });
      //console.log(this.selectedArray);
    },
    //下载
    download(type) {
      if (this.selectedArray.length == 0) {
        this.$message("请选择要下载的文档");
      } else {
        switch (type) {
          case 0:
            this.downloadPost();
            break;
          case 1:
            console.log("点击了下载模具3D图档，但是什么都没发生");
            break;
          case 2:
            console.log("点击了下载模具2D图档，但是什么都没发生");
            break;
          case 3:
            console.log("点击了下载零件3D图档，但是什么都没发生");
            break;
          case 4:
            console.log("点击了下载零件2D图档，但是什么都没发生");
            break;
          case 5:
            console.log("点击了下载保养方案，但是什么都没发生");
            break;
        }
      }
    },
    //具体的下载
    downloadPost() {
      this.http.post(
        this.port.mold.moldFileDowloadFile,
        {
          ids: this.selectedArray.join(",")
        },
        res => {
          this.listLoading = false;
          if (res.code == "ok") {
            console.log(res);
          } else {
            this.$message({
              message: res.msg,
              type: "error"
            });
          }
        },
        error => {
          this.listLoading = false;
          this.$message({
            message: error,
            type: "error"
          });
        }
      );
    }
  },
  created() {
    let height = window.innerHeight;
    this.tableHeight = height - 210;
  },
  mounted() {
    this.getFileList();
  }
};
</script>

<style scoped>
</style>