station-test-ui/src/views/device/synscheme/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-input
            v-model="queryParam.name"
            placeholder="名称"
            clearable
            class="filter-item form-search-input fl"
            @keyup.enter.native="handleSearch"
          />
        </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="name"
        label="名称"
        align="center"
        v-if="showColumn.name"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="hole"
        label="孔"
        align="center"
        v-if="showColumn.hole"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="step"
        label="步骤"
        align="center"
        v-if="showColumn.step"
        :show-overflow-tooltip="true"
        width="200"
      />
    
      <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>
        </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.name">名称</el-checkbox>
            <el-checkbox v-model="checkList.hole">孔</el-checkbox>
            <el-checkbox v-model="checkList.step">步骤</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 formModel from './formModel.vue'
export default {
  name: "synscheme",
  directives: { action },
  mixins: [rlListOperate],
  components: {
    formModel
  },
  data() {
    return {
      url: "synscheme",
      queryParam: {
       
        name: "",
      },
      deviceTypes:[],
      current_type: {
        0: "success",
        1: "danger",
      },
      formName:'synscheme',
      formVisible:false,
      //搜索
      searchDisplay: true,
      departments: [],

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

      isShowColumn: false,
      // 列的配置化对象，存储配置信息
      checkList: {},
      showColumn: {
        name: true,
        hole: true,
        step:true,
      }
    };
  },
  created() {
   
  },
  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("synschemeSet", 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('synscheme/' + 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("synschemeSet")) {
      this.checkList = JSON.parse(localStorage.getItem("synschemeSet"));
    } else {
      this.checkList = {
        name: true,
        hole: true,
        step:true,
     
      };
    }
  },
};
</script>
<style lang="scss" scoped>
 @import "@/views/device/hydraulic/index.scss";
</style>