station-test-ui/src/views/device/hyd_equipment/index.vue

<template>
  <div class="app-container">
    <div class="filter-container" style="padding-bottom: 0px">
      <div class="search-box-area" id="searchBox">
        <div class="search-item">
          <el-cascader
            class="filter-item form-search-input fl"
            v-model="queryParam.department_id"
            placeholder="请选择所属部门"
            :options="departments"
            clearable
            :props="{
              checkStrictly: true,
              label: 'department_name',
              value: 'id',
            }"
            @change="handleChange"
          ></el-cascader>
        </div>
        <div class="search-item">
          <el-input
            v-model="queryParam.number"
            placeholder="请输入设备编号"
            clearable
            class="filter-item form-search-input fl"
            @keyup.enter.native="handleSearch"
          />
        </div>
        <div class="search-item">
          <el-input
            v-model="queryParam.name"
            placeholder="请输入设备名称"
            clearable
            class="filter-item form-search-input fl"
            @keyup.enter.native="handleSearch"
          />
        </div>
        <div class="search-item">

          <el-select
            v-model="queryParam.model"
            placeholder="请输入设备型号"
            class="filter-item form-search-input fl"
            clearable
          >
          <el-option
                v-for="item in deviceTypes"
                :key="item.value"
                :label="item.text"
                :value="item.value">
              </el-option>
          </el-select>
        </div>
        <div class="search-item">
          <el-select
            v-model="queryParam.is_used"
            placeholder="启用状态"
            class="filter-item form-search-input fl"
            clearable
          >
            <el-option value="0" label="未使用">启用</el-option>
            <el-option value="1" label="已使用">停用</el-option>
          </el-select>
        </div>
      </div>
      <div class="search-operate-area">
        <!-- <el-input v-model="queryParam.code" placeholder="唯一编码" clearable class="filter-item form-search-input fl" /> -->
        <el-button
          class="filter-item search fl"
          icon="el-icon-search"
          @click="handleSearch"
          >搜索</el-button
        >
        <el-button
          class="filter-item fl"
          icon="el-icon-refresh"
          @click="handleRefresh"
          >重置</el-button
        >
        <el-button
          class="filter-item search fl"
          :icon="this.searchDisplay ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
          @click="searchDis"
          >{{ word }}</el-button
        >
      </div>
      <div class="list-operate-area">
        <!-- <el-button size="mini" class="filter-item search fl" icon="el-icon-plus" @click="handleCreate">添加</el-button> -->
        <el-button
          class="filter-item search fl"
          icon="el-icon-setting"
          @click="showColumnOption"
          >列设置</el-button
        >
        <el-button
          class="filter-item search fl"
          icon="el-icon-refresh-right"
          @click="refresh"
          >刷新</el-button
        >
      </div>
    </div>
    <el-table
      :data="data"
      v-loading="loading"
      ref="multipleTable"
      @selection-change="hydraulicSelectMulti"
      @sort-change="sortChange"
      :dynamicColumnSetting="true"
      tooltip-effect="dark"
      style="width: 100%"
      border
      fit
    >
      <el-table-column
        type="selection"
        fixed="left"
        width="55"
      ></el-table-column>
      <el-table-column
        prop="material_number"
        label="物料号"
        align="center"
        v-if="showColumn.material_number"

        width="120"
      />
      <!-- <el-table-column
        prop="net_state"
        label="在线状态"
        align="center"
        v-if="showColumn.net_state"
        :show-overflow-tooltip="true"
        width="80"
      >
        <template slot-scope="record">
          <el-tag type="success" v-if="record.row.net_state == '0'" >在线</el-tag >
          <el-tag type="gray" v-else-if="record.row.net_state == '1'" >离线</el-tag >
          <el-tag type="danger" v-else>从未上线</el-tag>
        </template>
      </el-table-column> -->
      <el-table-column
        prop="classification"
        label="设备分类"
        align="center"
        v-if="showColumn.classification"
       
      />
      <el-table-column
        prop="equ_type_name"
        label="设备类别"
        align="center"
        v-if="showColumn.equ_type_name"
       
        width="120"
      />
       <el-table-column
        prop="name"
        label="设备名称"
        align="center"
        v-if="showColumn.name"
       
        width="120"
      />
      <el-table-column
        prop="equipment_model"
        label="设备型号"
        align="center"
        v-if="showColumn.equipment_model"
      />
      <el-table-column
        prop="issue_unit"
        label="发放单位"
        align="center"
        v-if="showColumn.issue_unit"
       
      />
      <el-table-column
        prop="fixed_asset_number"
        label="固定资产编号"
        align="center"
        v-if="showColumn.fixed_asset_number"
      />
       <el-table-column
        prop="fixed_asset_number2"
        label="类固资产编号"
        align="center"
        v-if="showColumn.fixed_asset_number"
      />

      <el-table-column
        prop="serial_number"
        label="序列号"
        align="center"
        v-if="showColumn.serial_number"
  
      />
      <el-table-column
        prop="factory_number"
        label="出厂编号"
        align="center"
       
        v-if="showColumn.factory_number"
      />
      <el-table-column
        prop="check_last_time"
        label="上次校验时间"
        align="center"
        v-if="showColumn.check_last_time"
       
        width="100"
      />
      <el-table-column
        prop="check_next_time"
        label="下次校验时间"
        align="center"
       
        width="100"
        v-if="showColumn.check_next_time"
      />
      <el-table-column
        prop="check_status1"
        label="校验状态"
        align="center"
        v-if="showColumn.check_status1"
      />
       <el-table-column
        prop="status1"
        label="状态"
        align="center"
        v-if="showColumn.status1"
       
      />
      <!-- <el-table-column
        prop="status"
        label="状态"
        align="center"
        v-if="showColumn.status"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="record">
          <el-switch
            v-model="record.row.is_used"
            active-color="#13ce66"
            @change="changeUsedEvent(record.row,$event)"
            inactive-color="#ff4949">
          </el-switch>
        </template>
      </el-table-column> -->

       <!-- <el-table-column
        prop="online_time"
        label="在线时间"
        align="center"
        v-if="showColumn.online_time"
        width="130"
       
      />
       <el-table-column
        prop="check_time"
        label="校准日期"
        align="center"
        v-if="showColumn.check_time"
        width="130"
       
      />
      <el-table-column
        prop="effective_period"
        label="有效周期"
        align="center"
        v-if="showColumn.effective_period"
        width="100"
       
      />
      <el-table-column
        prop="effective_time"
        label="有效截止时间"
        align="center"
        v-if="showColumn.effective_time"
        width="130"
       
      />
      <el-table-column
        prop="creator_user"
        label="导入用户"
        align="center"
        v-if="showColumn.creator_user"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="created_at"
        label="添加时间"
        align="center"
        v-if="showColumn.created_at"
        :show-overflow-tooltip="true"
        width="130"
       
      />
       <el-table-column
        prop="remark"
        label="显示信息"
        align="center"
        v-if="showColumn.remark"
        :show-overflow-tooltip="true"
      /> -->
      <el-table-column
        label="操作"
        width="180"
        align="center"
        fixed="right"
      >
        <template slot-scope="record">
          <el-tooltip
            content="修改"
            placement="top"
            :enterable="false"
          >
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-edit"
              @click="handleUpdate(record.row)"
            ></el-button>
          </el-tooltip>
          <el-tooltip
            content="查看"
            placement="top"
            :enterable="false"
          >
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-view"
              @click="handleDetail(record.row)"
            ></el-button>
          </el-tooltip>
          <el-button type="danger" size="mini" icon="el-icon-delete" @click="handleDelete(record.row.id)" />
        </template>
      </el-table-column>
    </el-table>
    <transition name="fade">
      <div class="columnOption" v-show="isShowColumn">
        <div class="content">
          <div class="head">选择显示字段</div>
          <div class="body">
            <el-checkbox v-model="checkList.depart_name" disabled>所属部门</el-checkbox>
            <!-- <el-checkbox v-model="checkList.alarm_state_text" disabled>告警状态</el-checkbox> -->
            <el-checkbox v-model="checkList.material_number">物料号</el-checkbox>
            <el-checkbox v-model="checkList.classification">设备分类</el-checkbox>
            <el-checkbox v-model="checkList.equ_type_name">设备类别</el-checkbox>
            <el-checkbox v-model="checkList.name">名称</el-checkbox>
            <el-checkbox v-model="checkList.equipment_model">设备型号</el-checkbox>
            <el-checkbox v-model="checkList.fixed_asset_number">固定资产编号</el-checkbox>
            <el-checkbox v-model="checkList.fixed_asset_number2">类固定资产编号</el-checkbox>
            <el-checkbox v-model="checkList.serial_number">序列号</el-checkbox>
            <el-checkbox v-model="checkList.factory_number">出厂编号</el-checkbox>
            <el-checkbox v-model="checkList.check_last_time">上次校验时间</el-checkbox>
            <el-checkbox v-model="checkList.check_next_time">下次校验时间</el-checkbox>
            <el-checkbox v-model="checkList.check_status1">校验状态</el-checkbox>
            <el-checkbox v-model="checkList.status1">状态</el-checkbox>
          </div>
          <div class="footer">
            <el-button size="small" type="primary" plain @click="saveColumn"
              >保存列配置</el-button
            >
          </div>
        </div>
      </div>
    </transition>
    <el-button
      type="primary"
      icon="el-icon-plus"
      :loading="downloadLoading"
      style="margin-top: 15px"
      @click="handleCreate"
      >添加</el-button
    >
    <el-button
      type="danger"
      icon="el-icon-delete"
      v-if="selectedIds.length > 0"
      style="margin-top: 15px"
      @click="handleMultiDelete()"
      >删除</el-button
    >
    <el-button
      type="warning"
      icon="el-icon-download"
      :loading="downloadLoading"
      style="margin-top: 15px"
      @click="exportExcel"
      >导出</el-button
    >
    <el-button
      type="success"
      icon="el-icon-upload"
      :loading="downloadLoading"
      style="margin-top: 15px"
      @click="importExcel"
      >导入</el-button
    >
    <el-pagination
      background
      class="pagination-container"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="paginate.current"
      :page-sizes="paginate.sizes"
      :page-size="paginate.limit"
      :layout="paginate.layout"
      :total="paginate.total"
    />
    <keep-alive>
     <form-model
      @sendVal="closeDialog"
      :formModelVisible="formVisible"
      :title="title"
      :ref="formName"
    />
    </keep-alive>
    <detail
      :detailVisible="detailVisible"
       @sendVal="closeDrawer"
       :record="detail"
    />
   
     <hydraulicDetail
      :detailVisible="hydraulicDetailVisible"
       @sendVal="closeDrawer"
       :record="hydraulicDetail"
    />
     <wrenchDetail
      :detailVisible="wrenchDetailVisible"
       @sendVal="closeDrawer"
       :record="wrenchDetail"
    />

    <!-- 导入弹框 -->
    <el-dialog
      title="导入液压设备"
      append-to-body
      width="400px"
      :visible.sync="uploadDialogVisible"
      custom-class="upload-dialog"
    >
      <el-cascader
        v-model="selectedDepartId"
        class="filter-item form-search-input fl"
        :options="departments"
        :props="{ checkStrictly: true, label: 'department_name', value: 'id' }"
        style="margin-bottom: 10px"
        @change="changeCards"
      ></el-cascader>
      <el-upload
        class="upload-demo"
        drag
        :action="actionUrl"
        :headers="headers"
        :before-upload="beforeUpload"
        :show-file-list="true"
        :on-change="onchange"
        :on-remove="onremove"
        :on-exceed="onexeced"
        :limit="1"
        ref="upload"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
        </div>
        <div class="el-upload__tip upload-tips" slot="tip">
          只能上传xls/xlsx文件
        </div>
      </el-upload>
      <el-link
        type="primary"
        href="https://rlfd.oss-cn-hangzhou.aliyuncs.com/smart_tool/import_pump.xls"
        style="margin-top: 10px"
        >下载模板</el-link
      >
      <span slot="footer" class="dialog-footer">
        <el-button @click="uploadDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="importCards" :loading="loadings">{{
          submitText
        }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import rlListOperate from "@/layout/rl-list-operate/rlListOperate";
import { action } from "@/directive/permission/index.js";
import { getToken } from "../../../utils/auth";
import detail from "./detail.vue"
import wrenchDetail from "./wrench_detail.vue"
import hydraulicDetail from "./hydraulic_detail.vue"
import formModel from './formModel.vue'
export default {
  name: "hydraulic",
  directives: { action },
  mixins: [rlListOperate],
  components: {
    formModel,
    detail,
    wrenchDetail,
    hydraulicDetail
  },
  data() {
    return {
      url: "hydEquipment",
      queryParam: {
        number: "",
        department_id: [],
        name: "",
        model: "",
        is_used: "",
      },
      deviceTypes:[],
      current_type: {
        0: "success",
        1: "danger",
      },
      formName:'hydraulic',
      formVisible:false,
      //搜索
      searchDisplay: true,
      departments: [],

      //详情
      detailVisible:false,
      detail:{},
      //泵详情
      hydraulicDetailVisible:false,
      hydraulicDetail:{},
      //扳手详情
      wrenchDetailVisible:false,
      wrenchDetail:{},

      isShowColumn: false,
      // 列的配置化对象，存储配置信息
      checkList: {},
      showColumn: {
        material_number: true,
        classification: true,
        equ_type_name:true,
        name:true,
        equipment_model: true,
        issue_unit: true,
        fixed_asset_number:true,
        fixed_asset_number2: true,
        serial_number: true,
        factory_number:true,
        check_last_time:true,
        check_next_time:true,
        check_status1:true,
        status1: true,
      },
      //导入请求url
      actionUrl: process.env.VUE_APP_BASE_API + "/upload/file_excel",
      headers: { authorization: "Bearer " + getToken() },
      excel_url: "", //上传学生Excel返回的url
      uploadDialogVisible: false, //下发配置显示与否
      selectedDepartId: "",
      loadings: false,
      submitText: "确 定",
    };
  },
  created() {
    this.$http.get("departments").then((response) => {
      this.departments = response.data;
    });

    // 0-液压泵
    this.$http.get("get_device_mold",{ params: {type:0} }).then(resp => {
        this.deviceTypes = resp.data
     });
  },
  methods: {
   
    handleChange(val) {
      //  console.log(val)
      this.queryParam.department_id = val;
      this.handleSearch();
    },
    hydraulicSelectMulti(data) {
      this.selectedIds = [];
      data.forEach((item) => {
        this.selectedIds.push(item.id);
      });
    },
    refresh() {
      this.queryParam.page = this.paginate.current;
      this.getList();
    },
    searchDis() {
      this.searchDisplay = !this.searchDisplay;
      var searchBoxHeght = document.getElementById("searchBox");
      if (this.searchDisplay == false) {
        searchBoxHeght.style.height = 40 + "px";
      } else {
        searchBoxHeght.style.height = "auto";
      }
    },
    showColumnOption() {
      this.isShowColumn = true;
    },
    saveColumn() {
      localStorage.setItem("hydEquSet", JSON.stringify(this.checkList));
      this.isShowColumn = false;
    },
    handleDetail(row){
      if(row.equipment_type==2)
      {
        this.hydraulicDetailVisible=true;
        this.hydraulicDetail=row;
      }
      if(row.equipment_type==2||row.equipment_type==3)
      {
        this.wrenchDetailVisible=true;
        this.wrenchDetail=row;

      }
      else
      {
         this.detailVisible = true,
         this.detail = row
      }
    },
    closeDrawer(){
      this.detailVisible = false;
      this.hydraulicDetailVisible=false;
      this.wrenchDetailVisible=false;
    },
    changeUsedEvent(row,value){

      this.$http.put('hydraulic/' + row.id, { is_used: value }).then(resp => {
          if (resp.code === 10000) {
              this.$message.success('操作成功')
              // row[field] = val
              // this.$emit('rowClick', row)
          }
      })
    },
    importExcel() {
      this.uploadDialogVisible = true;
    },
    changeCards(v) {
      this.selectedDepartId = v[v.length - 1];
    },
    beforeUpload(file) {
      if (!/\.(xlsx|xls|XLSX|XLS)$/.test(file.name)) {
        this.$notify.error({
          title: "错误",
          message: "上传文件只能为excel文件，且为xlsx,xls格式",
        });
        return false;
      }
      return true;
    },
    onremove() {
      //移除文件钩子
      this.excel_url = "";
    },
    onexeced(files) {
      if (files.length == 1) {
        this.$message.error("只能上传一个文件");
      }
    },
    onchange(file, fileList) {
      if (file.response) {
        this.$message.success(file.response.data.msg);
        this.excel_url = file.response.data.excel_url;
      } else {
        // console.log(file);
      }
    },
    importCards() {
      // console.log(this.excel_url);
      var url = this.excel_url,
        depart_id = this.selectedDepartId;
      if (depart_id == "") {
        this.$message.error("请选择部门");
        return;
      }
      if (url == "") {
        this.$message.error("请上传文件");
        return;
      }
      this.loadings = true;
      this.submitText = "导入中";
      this.$http
        .post("cardDevice/import", { url: url, depart_id: depart_id })
        .then((response) => {
          if (response.data.error) {
            this.$message.error(response.data.msg);
          } else {
            this.$message.success(response.data);
          }
          this.excel_url = "";
          this.selectedDepartId = "";
          this.$refs.upload.clearFiles();
          this.loadings = false;
          this.submitText = "确定";
          this.uploadDialogVisible = false;
          this.getList();
        });
    },
  },
  watch: {
    // 监听复选框配置列所有的变化
    checkList: {
      handler: function (newnew, oldold) {
        // console.log(newnew);
        this.showColumn = newnew;
        // 这里需要让表格重新绘制一下，否则会产生固定列错位的情况
        this.$nextTick(() => {
          this.$refs.multipleTable.doLayout();
        });
      },
      deep: true,
      immediate: true,
    },
  },
  computed: {
    word: function () {
      if (this.searchDisplay == false) {
        //对文字进行处理
        return "展开";
      } else {
        return "收起";
      }
    },
  },
  mounted() {
    // this.getIsUseVoice();
    this.$nextTick(function () {
      this.searchDis();
    });
    // 发请求得到checkListInitData的列的名字
    if (localStorage.getItem("hydEquSet")) {
      this.checkList = JSON.parse(localStorage.getItem("hydEquSet"));
    } else {
      this.checkList = {
        material_number: true,
        classification: true,
        equ_type_name:true,
        name:true,
        equipment_model: true,
        issue_unit: true,
        fixed_asset_number:true,
        fixed_asset_number2: true,
        serial_number: true,
        factory_number:true,
        check_last_time:true,
        check_next_time:true,
        check_status1:true,
        status1: true,
      };
    }
  },
};
</script>
<style lang="scss" scoped>
 @import "@/views/device/hydraulic/index.scss";
</style>