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

<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="filters">
        <el-col :span="3">
          <el-form-item>
            <el-select v-model="filters.projectId" clearable placeholder="请选择项目">
              <el-option
                v-for="item in projects"
                :key="item.id"
                :label="item.projectName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item>
            <el-select v-model="filters.serchType" placeholder="请选择查询条件">
              <el-option label="编号" value="0"></el-option>
              <el-option label="名称" value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-form-item>
          <el-input v-model="filters.keyName" placeholder="请输入编号或名称进行搜索"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getMoldList">查询</el-button>
        </el-form-item>
        <el-form-item style="float: right" v-if="user.parentId == 1">
          <el-button type="primary" @click="showAdd">新建</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <!--列表-->
    <el-table
      :data="molds"
      :height="tableHeight"
      highlight-current-row
      v-loading="listLoading"
      style="width: 100%;"
    >
      <el-table-column type="index" width="40"></el-table-column>
      <el-table-column prop="modelName" label="模具名称" width="180" sortable>
        <template slot-scope="scope">
          <el-link
            :underline="false"
            type="primary"
            @click="toDetail(scope.row)"
          >{{scope.row.modelName}}</el-link>
        </template>
      </el-table-column>
      <el-table-column prop="modelNo" label="模具编号" width="150" sortable></el-table-column>
      <el-table-column prop="equipmentNo" label="云模盒编号" width="150" sortable></el-table-column>
      <el-table-column prop="hillNumber" label="电量" align="center" width="100" sortable></el-table-column>
      <el-table-column prop="projectName" label="所属项目" width="180" sortable></el-table-column>
      <el-table-column label="所属资产方" width="200" sortable></el-table-column>
      <el-table-column label="所属生产方" width="200" sortable></el-table-column>
      <el-table-column prop="settingLife" label="模次寿命" width="100" align="center" sortable></el-table-column>
      <el-table-column prop="initialModulus" label="初始模次" width="100" align="center" sortable></el-table-column>
      <el-table-column prop="initial" label="穴数" width="100" align="center" sortable></el-table-column>
      <el-table-column prop="rfid" label="对应RFID码" width="120" align="center" sortable></el-table-column>
      <el-table-column label="模具文档" width="100" align="center" sortable>
        <template slot-scope="scope">
          <span v-if="scope.row.mouldFile == 1">已上传</span>
          <span v-else>未上传</span>
        </template>
      </el-table-column>
      <el-table-column label="零件文档" width="100" align="center" sortable>
        <template slot-scope="scope">
          <span v-if="scope.row.compFile == 1">已上传</span>
          <span v-else>未上传</span>
        </template>
      </el-table-column>
      <el-table-column label="保养方案" width="100" align="center" sortable>
        <template slot-scope="scope">
          <span v-if="scope.row.maintianPlan == 1">已上传</span>
          <span v-else>未上传</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="100" align="center" sortable>
        <template slot-scope="scope">
          <span v-if="scope.row.state == 1" style="color:#00CD66;">运行</span>
          <span v-else style="color:#CD2626;">禁止</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="150"
        align="center"
        fixed="right"
        sortable
        v-if="user.parentId == 1"
      >
        <el-button size="small" type="danger">删除</el-button>
      </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]"
        :page-size="20"
        layout="total, sizes, prev, pager, next"
        :total="total"
        style="float:right;"
      ></el-pagination>
    </el-col>

    <!--新增界面-->
    <el-dialog
      title="新建模具"
      v-if="addFormVisible"
      :visible.sync="addFormVisible"
      :close-on-click-modal="false"
      customClass="customWidth"
    >
      <el-form :model="addForm" label-width="100px" :rules="formRules" ref="addForm">
        <el-form-item label="模具编号" prop="modelNo">
          <el-input v-model="addForm.modelNo" autocomplete="off" placeholder="请输入模具编号"></el-input>
        </el-form-item>
        <el-form-item label="模具名称" prop="modelName">
          <el-input v-model="addForm.modelName" autocomplete="off" placeholder="请输入模具名称"></el-input>
        </el-form-item>
        <el-form-item label="云模盒编号" prop="equipmentId">
          <el-select
            v-model="addForm.equipmentId"
            clearable
            filterable
            placeholder="请选择云模盒编号"
            style="width:533px"
          >
            <el-option
              v-for="item in boxes"
              :key="item.id"
              :label="item.equipmentNo"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="addFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
      </div>
    </el-dialog>
  </section>
</template>

<script>
import util from "../../common/js/util";
export default {
  data() {
    return {
      user: JSON.parse(sessionStorage.getItem("user")),
      molds: [],
      filters: {
        keyName: "",
        serchType: "编号",
        projectId: ""
      },

      formRules: {
        modelNo: [
          { required: true, message: "请输入模具编号", trigger: "blur" }
        ],
        modelName: [
          { required: true, message: "请输入模具名称", trigger: "blur" }
        ],
        equipmentId: [
          {
            required: true,
            message: "请选择云模盒编号",
            trigger: ["blur", "change"]
          }
        ]
      },
      listLoading: false,
      total: 0,
      tableHeight: 0,
      boxes: [],
      projects: [],

      addLoading: false,
      addFormVisible: false,
      addForm: {
        modelNo: "",
        modelName: "",
        equipmentId: ""
      }
    };
  },
  methods: {
    getMsg() {
      this.http.post(
        this.port.base.moulds,
        {
          belongCompanyId: this.user.companyId
        },
        res => {
          if (res.code == "ok") {
            this.boxes = res.data;
          } else {
            this.$message({
              message: res.msg,
              type: "error"
            });
          }
        },
        error => {
          this.listLoading = false;
          this.$message({
            message: error,
            type: "error"
          });
        }
      );

      this.http.post(
        this.port.project.projects,
        {},
        res => {
          if (res.code == "ok") {
            this.projects = res.data;
          } else {
            this.$message({
              message: res.msg,
              type: "error"
            });
          }
        },
        error => {
          this.listLoading = false;
          this.$message({
            message: error,
            type: "error"
          });
        }
      );
    },
    //分页
    handleCurrentChange(val) {
      this.page = val;
      this.getMoldList();
    },
    handleSizeChange(val) {
      this.size = val;
      this.getMoldList();
    },

    //获取模具列表
    getMoldList() {
      this.listLoading = true;
      this.http.post(
        this.port.mold.molds,
        {
          keyName: this.filters.keyName,
          pageNum: this.page,
          pageSize: this.size,
          projectId: this.filters.projectId == "" ? -1 : this.filters.projectId,
          serchType: this.filters.serchType
        },
        res => {
          this.listLoading = false;
          if (res.code == "ok") {
            this.molds = res.data.list;
            this.total = res.data.total;
          } else {
            this.$message({
              message: res.msg,
              type: "error"
            });
          }
        },
        error => {
          this.listLoading = false;
          this.$message({
            message: error,
            type: "error"
          });
        }
      );
    },
    //详情
    toDetail(row) {
      this.$router.push("/moldList/" + row.id);
    },

    //添加界面
    showAdd() {
      this.addFormVisible = true;
      this.addForm = {
        modelNo: "",
        modelName: "",
        equipmentId: ""
      };
    },
    addSubmit() {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          this.addLoading = true;
          this.http.post(
            this.port.mold.addMold,
            this.addForm,
            res => {
              this.addLoading = false;
              this.addFormVisible = false;
              if (res.code == "ok") {
                this.$message({
                  message: "创建成功",
                  type: "success"
                });
                this.getMoldList();
              } else {
                this.$message({
                  message: res.msg,
                  type: "error"
                });
              }
            },
            error => {
              this.addLoading = false;
              this.addFormVisible = false;
              this.$message({
                message: error,
                type: "error"
              });
            }
          );
        }
      });
    }
  },
  created() {
    let height = window.innerHeight;
    this.tableHeight = height - 210;
    const that = this;
    window.onresize = function temp() {
      that.tableHeight = window.innerHeight - 210;
    };
  },
  mounted() {
    this.getMsg();
    this.getMoldList();
  }
};
</script>

<style scoped>
</style>