station-test-ui/src/views/wind/worklocation/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="{
              emitPath:false,
              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 deviceModels" 
             :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="-2" label="未使用">已报废</el-option>
            <el-option value="-1" 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="wind_name"
        label="风场名称"
        align="center"
        v-if="showColumn.wind_name"
        :show-overflow-tooltip="true"
       
      />
      <el-table-column
        prop="fan_number"
        label="风机机位号"
        align="center"
        v-if="showColumn.fan_number"
        :show-overflow-tooltip="true"
        
      />
      <el-table-column
        prop="number"
        label="编号"
        align="center"
        v-if="showColumn.number"
        :show-overflow-tooltip="true"
        
      />
      <el-table-column
        prop="work_local_name"
        label="工作位置"
        align="center"
        v-if="showColumn.work_local"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="parts_name"
        label="所属部件"
        align="center"
        v-if="showColumn.parts"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="bolt_style_name"
        label="螺栓样式"
        align="center"
        v-if="showColumn.bolt_style"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="boit_type_name"
        label="螺栓型号"
        align="center"
        v-if="showColumn.boit_type"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="torque"
        label="扭矩"
        align="center"
        v-if="showColumn.torque"
        :show-overflow-tooltip="true"
      />
       <el-table-column
        prop="pressure"
        label="压力"
        align="center"
        v-if="showColumn.pressure"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="external_diameter"
        label="外径"
        align="center"
        v-if="showColumn.external_diameter"
        :show-overflow-tooltip="true"
      />
       <el-table-column
        prop="created_at"
        label="创建时间"
        align="center"
        v-if="showColumn.external_diameter"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="操作"
        width="150"
        align="center"
        fixed="right"
      >
        <template slot-scope="record">
          <el-tooltip
            content="查看"
            placement="top"
            :enterable="false"
          >
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-view"
              @click="handleView(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.wind_name" disabled>风场名称</el-checkbox>
            <el-checkbox v-model="checkList.fan_number" disabled>风机机位号</el-checkbox>
            <el-checkbox v-model="checkList.number">编号</el-checkbox>
            <el-checkbox v-model="checkList.parts">所属部件</el-checkbox>
            <el-checkbox v-model="checkList.bolt_style">螺丝样式</el-checkbox>
            <el-checkbox v-model="checkList.boit_type">螺栓型号</el-checkbox>
            <el-checkbox v-model="checkList.torque">扭矩</el-checkbox>
            <el-checkbox v-model="checkList.pressure">压力</el-checkbox>
            <el-checkbox v-model="checkList.external_diameter">外径</el-checkbox>
            <el-checkbox v-model="checkList.created_at">创建时间</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"
       :data="detail"
    />
  </div>
</template>

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

      //详情
      detailVisible:false,
      detail:{},

      isShowColumn: false,
      // 列的配置化对象，存储配置信息
      checkList: {},
      showColumn: {
        wind_name:true,
        fan_number:true,
        number: true,
        work_local: true,
        parts:true,
        bolt_style: true,
        boit_type: true,
        torque:true,
        pressure:true,
        external_diameter:true,
        created_at:true


      }
    };
  },
  created() {
    this.$http.get("departments").then((response) => {
      this.departments = response.data;
    });
     this.$http.get("get_device_mold",{ params: {type:2} }).then(resp => {
        this.deviceModels = resp.data
     });

  },
  methods: {
    //重置
    handleChange(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("WorklocalSet", JSON.stringify(this.checkList));
      this.isShowColumn = false;
    },
    handleDetail(row){
      this.detailVisible = true,
      this.detail = row
    },
    closeDrawer(){
      this.detailVisible = false
    }
  },
  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("WorklocalSet")) {
      this.checkList = JSON.parse(localStorage.getItem("WorklocalSet"));
    } else {
      this.checkList = {
         wind_name:true,
        fan_number:true,
        number: true,
        work_local: true,
        parts:true,
        bolt_style: true,
        boit_type: true,
        torque:true,
        pressure:true,
        external_diameter:true,
        created_at:true
      };
    }
  },
};
</script>
<style lang="scss" scoped>
 @import "@/views/device/hydraulic/index.scss";
</style>