yunsu/ys_vue/src/views/detection/maintenance.vue

<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
        <el-form :inline="true">
            <el-form-item>
                <el-button type="text" @click="backToDetection" icon="el-icon-back" class="back">返回</el-button>
            </el-form-item>
            <el-form-item class="divLine"></el-form-item>
            <el-form-item>
                当前保养状态：
                <span style="color: #ff4949; margin-right: 16px;">需要</span>
                <el-button size="small" type="primary" v-if="requirement" @click="showMaintenance">立即处理</el-button>
            </el-form-item>
            <el-form-item style="float:right;">
                保养提醒：
                <el-switch v-model="prompt" active-color="#ff4949" disabled></el-switch>
            </el-form-item>
        </el-form>
    </el-col>

    <!--列表-->
    <el-table
        :data="moulds"
        highlight-current-row
        :height="tableHeight"
        v-loading="listLoading"
        style="width: 100%;"
    >
        <el-table-column type="index" width="60"></el-table-column>
        <el-table-column prop="maintenancer" label="保养人" width="100" sortable></el-table-column>
        <el-table-column prop="plan" label="保养方案" sortable></el-table-column>
        <el-table-column prop="picture" label="保养照片" width="100" sortable></el-table-column>
        <el-table-column prop="closeTime" label="关闭时间" width="100" sortable></el-table-column>
        <el-table-column prop="state" label="状态" align="center" width="100" sortable></el-table-column>
        <el-table-column label="操作" width="220" align="center" sortable>
            <el-button size="small">浏览</el-button>
            <el-button size="small">下载</el-button>
            <el-button type="danger" size="small">删除</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 , 200]"
            :page-size="20"
            layout="total, sizes, prev, pager, next"
            :total="total"
            style="float:right;"
        ></el-pagination>
    </el-col>

    <!--新增界面-->
    <el-dialog
        title="处理保养"
        v-if="maintenanceFormVisible"
        :visible.sync="maintenanceFormVisible"
        :close-on-click-modal="false"
        customClass="customWidth"
    >
      <el-form
        :model="maintenanceForm"
        label-width="100px"
        :rules="formRules"
        ref="addForm"
        :inline="true"
        class="demo-form-inline"
      >
        <el-form-item label="保养类型" prop="type">
          <el-select
            v-model="maintenanceForm.type"
            clearable
            filterable
            placeholder="动作"
            style="width:202px"
          >
            <el-option
              v-for="item in type"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择动作" prop="action">
          <el-select
            v-model="maintenanceForm.action"
            clearable
            filterable
            placeholder="喷油"
            style="width:202px"
          >
            <el-option
              v-for="item in action"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="保养提醒">
          <el-switch v-model="prompt" active-color="#ff4949"></el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="maintenanceFormVisible = false">取消</el-button>
        <el-button
          type="primary"
          @click.native="console.log('handled')"
          :loading="maintenanceLoading"
        >立即处理</el-button>
      </div>
    </el-dialog>
  </section>
</template>

<script>
import util from "../../common/js/util";
export default {
  data() {
    return {
      options: [{ value: "aaa", label: "123" }, { value: "bbb", label: "456" }],
      //临时数据
      moulds: [
        {
          maintenancer: "张有财",
          plan: "100kb",
          picture: "张富贵",
          closeTime: "2019-07-24",
          state: "已通过"
        },
        {
          maintenancer: "刘没财",
          plan: "200kb",
          picture: "刘穷比",
          closeTime: "2019-07-23",
          state: "未通过"
        }
      ],
      //标题栏过滤器
      filters: {
        name: "",
        value: ""
      },
      listLoading: false,
      total: 0,
      tableHeight: 0,
      formRules: {},
      //保养界面 种类
      type: [
        { label: "动作", value: 0 },
        { label: "小动作", value: 1 },
        { label: "大动作", value: 2 }
      ],
      //保养界面 动作
      action: [
        { label: "喷油", value: 0 },
        { label: "喷水", value: 1 },
        { label: "喷可乐", value: 2 }
      ],
      //是否需要保养 提示
      requirement: true,
      prompt: true,
      //保养详情界面显示
      maintenanceFormVisible: false,
      maintenanceLoading: false,
      //保养详情界面数据
      maintenanceForm: {
        username: "",
        account: "",
        mobile: "",
        teamName: "",
        companyId: "",
        roleType: "",
        flag: 0
      }
    };
  },
  methods: {
    //  分页
    handleCurrentChange(val) {
      this.page = val;
      // this.getUsers();
    },
    handleSizeChange(val) {
      this.size = val;
      // this.getUsers();
    },
    selsChange: function(sels) {
      this.sels = sels;
    },
    backToDetection() {
      this.$router.go(-1);
    },
    //显示新增界面
    showMaintenance: function() {
      this.maintenanceFormVisible = true;
    }
  },
  created() {
    let height = window.innerHeight;
    this.tableHeight = height - 260;
  },
  mounted() {
    var mouldId = this.$route.params.id; //传到当前页面的模具编号
  }
};
</script>

<style scoped>
.toolbar .el-form-item {
  font-size: 14px;
  vertical-align: middle;
}
.back {
  font-size: 16px;
}
.divLine {
  width: 2px;
  background: #c3c3c3;
  height: 100%;
}

.projectTitle {
  font-size: 18px;
  color: #333;
}
</style>