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-col :span="2">
          <el-form-item>
            <el-select v-model="filters.value" clearable placeholder="文档类型">
              <el-option label="模具3D图档" value="0"></el-option>
              <el-option label="模具2D图档" value="1"></el-option>
              <el-option label="零件3D图档" value="2"></el-option>
              <el-option label="零件2D图档" value="3"></el-option>
              <el-option label="模具保养方案" value="4"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-form-item>
          <el-input v-model="filters.name" placeholder="请输入名称进行搜索"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">查询</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="moulds"
      :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="模具名称" prop="name"></el-table-column>
      <el-table-column width="200" label="模具3D图档">
        <template slot-scope="scope">
          <span v-if="scope.row.states[0] == 0">未上传</span>
          <span v-else-if="scope.row.states[0] == 1">审批中</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.states[1] == 0">未上传</span>
          <span v-else-if="scope.row.states[1] == 1">审批中</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.states[2] == 0">未上传</span>
          <span v-else-if="scope.row.states[2] == 1">审批中</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.states[3] == 0">未上传</span>
          <span v-else-if="scope.row.states[3] == 1">审批中</span>
          <span v-else>已通过</span>
        </template>
      </el-table-column>
      <el-table-column width="200" label="保养方案">
        <template slot-scope="scope">
          <span v-if="scope.row.states[4] == 0">未上传</span>
          <span v-else-if="scope.row.states[4] == 1">审批中</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 {
      moulds: [
        //临时数据
        { id: 1, name: "墨盒类型1", states: [0, 1, 2, 0, 1] },
        { id: 2, name: "墨盒类型2", states: [2, 0, 1, 2, 0] },
        { id: 3, name: "墨盒类型3", states: [1, 2, 0, 1, 2] },
        { id: 4, name: "墨盒类型4", states: [0, 1, 2, 0, 1] },
        { id: 5, name: "墨盒类型5", states: [2, 0, 1, 2, 0] },
        { id: 6, name: "墨盒类型6", states: [2, 2, 2, 2, 2] }
      ],
      filters: {
        name: "",
        value: ""
      },
      listLoading: false,
      total: 0,
      tableHeight: 0,
      selectedArray: []
    };
  },
  methods: {
    //分页
    handleCurrentChange(val) {
      this.page = val;
      // this.getUsers();
    },
    handleSizeChange(val) {
      this.size = val;
      // this.getUsers();
    },
    selectionChanged(row) {
      this.selectedArray = [];
      row.forEach(item => {
        this.selectedArray.push(item.id);
      });
      console.log(this.selectedArray);
    },
    //下载
    download(type) {
      if (this.selectedArray == []) {
        this.$message("请选择要下载的文档");
      } else {
        switch (type) {
          case 0:
            console.log("点击了下载全部");
            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;
        }
      }
    }
  },
  created() {
    let height = window.innerHeight;
    this.tableHeight = height - 210;
  },
  mounted() {}
};
</script>

<style scoped>
</style>