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

<template>
  <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="待审批" value="0"></el-option>
              <el-option label="未通过" value="1"></el-option>
              <el-option label="已通过" value="2"></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-upload
            class="upload-demo"
            action="customize"
            :http-request="uploadFile"
            :show-file-list="false"
            multiple
            :limit="5"
            style="float:right;"
          >
            <el-button size="small" type="primary">上传文档</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
    </el-col>

    <!--列表-->
    <el-table
      :data="moulds"
      :height="tableHeight"
      highlight-current-row
      v-loading="listLoading"
      style="width: 100%;"
    >
      <el-table-column type="index" width="60"></el-table-column>
      <el-table-column prop="name" label="模具名称" width="200" sortable></el-table-column>
      <el-table-column prop="type" label="文档类型" width="200" sortable></el-table-column>
      <el-table-column prop="uploader" label="上传者" width="200" sortable></el-table-column>
      <el-table-column prop="time" label="上传时间" width="200" sortable></el-table-column>
      <el-table-column label="上传状态" width="200" sortable>
        <template slot-scope="scope">
          <span v-if="scope.row.state == 0">待审批</span>
          <span v-else-if="scope.row.state == 1">未通过</span>
          <span v-else>已通过</span>
        </template>
      </el-table-column>
      <el-table-column label="审批" width="200" sortable>
        <template slot-scope="scope">
          <template v-if="scope.row.state == 0">
            <el-button size="small">通过</el-button>
            <el-button size="small">未通过</el-button>
          </template>
        </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: [
        //临时数据
        {
          name: "墨盒类型1",
          type: "模具3D图档",
          uploader: "张有财",
          time: "2019-07-25",
          state: 0
        },
        {
          name: "墨盒类型啦啦",
          type: "模具2D图档",
          uploader: "张啦啦",
          time: "2019-05-27",
          state: 1
        }
      ],
      filters: {
        name: "",
        value: ""
      },
      listLoading: false,
      total: 0,
      tableHeight: 0
    };
  },
  methods: {
    //  分页
    handleCurrentChange(val) {
      this.page = val;
      // this.getUsers();
    },
    handleSizeChange(val) {
      this.size = val;
      // this.getUsers();
    },
    selsChange: function(sels) {
      this.sels = sels;
    },
    toMaintenance(id) {
      this.$router.push("/detection/" + id);
    },
    //上传
    uploadFile(params) {
      // var fileObj = params.file;
      // var form = new FormData();
      // form.append("projectId", this.proDetail.id);
      // form.append("file", fileObj);
      // this.http.uploadFile(
      //   this.port.mold.moldFileUpload,
      //   form,
      //   res => {
      //     if (res.code == "ok") {
      //       this.$message({
      //         message: "上传成功",
      //         type: "success"
      //       });
      //       this.getFileList();
      //     } else {
      //       this.$message({
      //         message: res.msg,
      //         type: "error"
      //       });
      //     }
      //   },
      //   error => {
      //     this.$message({
      //       message: error,
      //       type: "error"
      //     });
      //   }
      // );
    },
    //获取文档列表
    getFileList() {
      this.listLoading = true;
      this.http.post(
        this.port.project.fileList,
        {
          projectId: this.detailId
        },
        res => {
          this.listLoading = false;
          if (res.code == "ok") {
            this.files = res.data;
          } 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() {}
};
</script>

<style scoped>
</style>