station-test-ui/src/views/device/hydraulic/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"
            :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="depart_name"
        label="所属部门"
        align="center"
        v-if="showColumn.depart_name"
        :show-overflow-tooltip="true"
        width="150"
      />
      <!-- <el-table-column
        prop="alarm_state_text"
        label="告警状态"
        align="center"
        v-if="showColumn.alarm_state_text"
        width="120"
      >
        <template slot-scope="record">
            <el-tag
              effect="dark"
              slot="reference"
              :type="current_type[record.row.alarm_state] || ''"
              size="small"
              >{{ record.row.alarm_state_text }}</el-tag
            >
        </template>
      </el-table-column> -->

      <el-table-column
        prop="net_state"
        label="在线状态"
        align="center"
        v-if="showColumn.net_state"
        :show-overflow-tooltip="true"
        width="120"
      >
        <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="number"
        label="编号"
        align="center"
        v-if="showColumn.number"
        :show-overflow-tooltip="true"
        width="150"
      />
      <el-table-column
        prop="name"
        label="名称"
        align="center"
        v-if="showColumn.name"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="brand"
        label="品牌"
        align="center"
        v-if="showColumn.brand"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="supplier"
        label="供应商"
        align="center"
        v-if="showColumn.supplier"
        :show-overflow-tooltip="true"
        width="120"
      />
      <el-table-column
        prop="model_name"
        label="型号"
        align="center"
        v-if="showColumn.model_name"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="max_pressure"
        label="最大压力"
        align="center"
        v-if="showColumn.max_pressure"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="min_pressure"
        label="最小压力"
        align="center"
        v-if="showColumn.min_pressure"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="out_date"
        label="出厂日期"
        align="center"
        v-if="showColumn.out_date"
        :show-overflow-tooltip="true"
        width="150"
      />
      <el-table-column
        prop="is_used"
        label="启用状态"
        align="center"
        v-if="showColumn.is_used"
        :show-overflow-tooltip="true"
        width="120"
      >
        <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>
          <!-- <el-tag type="danger" v-if="record.row.is_used == 0"
            >未使用</el-tag
          >
          <el-tag type="success" v-else>已使用</el-tag> -->
        </template>
      </el-table-column>
       <el-table-column
        prop="online_time"
        label="在线时间"
        align="center"
        v-if="showColumn.online_time"
        width="200"
        sortable
      />
      <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="200"
        sortable
      />
       <el-table-column
        prop="remark"
        label="显示信息"
        align="center"
        v-if="showColumn.remark"
        width="100"
      />
      <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>
        </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.net_state">在线状态</el-checkbox>
            <el-checkbox v-model="checkList.number">编号</el-checkbox>
            <el-checkbox v-model="checkList.name">名称</el-checkbox>
            <el-checkbox v-model="checkList.brand">品牌</el-checkbox>
            <el-checkbox v-model="checkList.supplier">供应商</el-checkbox>
            <el-checkbox v-model="checkList.max_pressure">最大压力</el-checkbox>
            <el-checkbox v-model="checkList.min_pressure">最小压力</el-checkbox>
            <el-checkbox v-model="checkList.model_name">型号</el-checkbox>
            <el-checkbox v-model="checkList.out_date">出厂日期</el-checkbox>
            <el-checkbox v-model="checkList.is_used">启用状态</el-checkbox>
            <el-checkbox v-model="checkList.online_time">在线时间</el-checkbox>
            <el-checkbox v-model="checkList.creator_user">导入用户</el-checkbox>
            <el-checkbox v-model="checkList.created_at">添加时间</el-checkbox>
            <el-checkbox v-model="checkList.remark">显示信息</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-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"
    />
     <form-model
      @sendVal="closeDialog"
      :formModelVisible="formVisible"
      :title="title"
      :ref="formName"
    />
    <detail
      :detailVisible="detailVisible"
       @sendVal="closeDrawer"
       :record="detail"
    />
  </div>
</template>

<script>
import rlListOperate from "@/layout/rl-list-operate/rlListOperate";
import { action } from "@/directive/permission/index.js";
import detail from "./detail.vue"
import formModel from './formModel.vue'
export default {
  name: "hydraulic",
  directives: { action },
  mixins: [rlListOperate],
  components: {
    formModel,
    detail,
  },
  data() {
    return {
      url: "hydraulic",
      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:{},

      isShowColumn: false,
      // 列的配置化对象，存储配置信息
      checkList: {},
      showColumn: {
        depart_name: true,
        alarm_state_text: true,
        net_state:true,
        number: true,
        name: true,
        brand: true,
        supplier: true,
        max_pressure:true,
        min_pressure:true,
        model_name: true,
        is_used:true,
        online_time: true
      }
    };
  },
  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("hydColumnSet", JSON.stringify(this.checkList));
      this.isShowColumn = false;
    },
    handleDetail(row){
      this.detailVisible = true,
      this.detail = row
    },
    closeDrawer(){
      this.detailVisible = 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)
          }
      })
    }
  },
  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("hydColumnSet")) {
      this.checkList = JSON.parse(localStorage.getItem("hydColumnSet"));
    } else {
      this.checkList = {
        depart_name: true,
        alarm_state_text: true,
        net_state:true,
        number: true,
        name: true,
        brand: true,
        supplier: true,
         max_pressure:true,
        min_pressure:true,
        is_used:true,
        model: true,
        online_time: true
      };
    }
  },
};
</script>
<style lang="scss" scoped>
 @import "@/views/device/hydraulic/index.scss";
</style>