ibms/src/components/ledger/cenote/dialog/addCenoteDialog.vue

<template>
  <el-dialog :title="title" :visible.sync="dialogVisible" width="900px" id="addEqDialog">
    <el-row class="filters">
      <el-col :span="9">
        <el-input placeholder="输入竖井名称或竖井本地编码查询进行查询" v-model="keycode" clearable @keyup.enter.native="getTableData">
          <i slot="suffix" class="el-input__icon el-icon-search" @click="getTableData"></i>
        </el-input>
      </el-col>
      <el-col :span="15">
        <cenote-type @change="changeCenote"></cenote-type>
      </el-col>
    </el-row>
    <div class="table-box">
      <el-table :data="tableData" style="width: 100%" height="350" v-loading="loading" :header-cell-style="headerStyle" ref="multipleTable"
        @selection-change="handleSelectionChange">
        <el-table-column  type="selection" width="55"></el-table-column>
        <el-table-column :label="`${inSpaceType}名称`" show-overflow-tooltip min-width="100">
          <template slot-scope="scope">
            <div>
              {{scope.row.ShaftLocalName||scope.row.ShaftName||''}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="ShaftLocalID" :label="`${inSpaceType}本地编码`" show-overflow-tooltip min-width="100"></el-table-column>
        <el-table-column prop="StructureInfo.ShaftFuncType" :label="`${inSpaceType}类`" show-overflow-tooltip min-width="100"></el-table-column>
        <el-table-column prop="action" label="操作" min-width="100">
          <template slot-scope="scope">
            <el-button size="mini" @click="toDetail(scope.$index, scope.row)" plain>查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination class="fr" v-show="tableData && tableData.length" @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="page.pageNumber" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"></el-pagination>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="dialogVisible = false">取 消</el-button>
      <el-button size="small" type="primary" @click="savaRelation">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { unshaftThroughShaft, queryShaftType, linkShaft } from "@/api/scan/request";
import cenoteType from "@/components/ledger/lib/cenoteType";
import { mapGetters } from "vuex";
export default {
  components: {
    cenoteType
  },
  computed: {
    ...mapGetters("layout", ["projectId"])
  },
  data() {
    return {
      title: "添加连通的其他竖井",
      keycode: '', //输入查询条件
      cenoteType: '', // 选中的竖井类型
      shaftType: {}, //全部竖井类型
      inSpaceType: '竖井',
      dialogVisible: false,
      tableData: [],
      loading: false,
      selections: [], // 选中项
      page: {
        pageSize: 50,
        pageSizes: [10, 20, 50, 100],
        pageNumber: 1,
        total: 0
      },
      headerStyle: {
        backgroundColor: '#e1e4e5',
        color: '#2b2b2b',
        lineHeight: '30px'
      } // 列表样式
    };
  },
  props: {
    type: String, //选中的tab页
    params: Object //查看的竖井关系信息
  },
  created() { 
    queryShaftType(res => {
      res.Content.forEach(item => {
        this.shaftType[item.Code] = item.Name
      })
    })
  },
  methods: {
    //修改竖井类型
    changeCenote(value) {
      this.cenoteType = value.Id
      this.getTableData()
    },
    // 显示弹窗
    showDialog() {
      this.dialogVisible = true
      this.page.pageNumber = 1
      this.tableData = []
      this.getTableData()
    },
    getTableData() {
      let params = {
        data: {
          Filters: this.cenoteType? `ProjectId='${this.projectId}';structureInfo.ShaftFuncType='${this.cenoteType}'`: `ProjectId='${this.projectId}'`,
          Orders: "createTime desc, ShaftID asc",
          PageNumber: this.page.pageNumber,
          PageSize: this.page.pageSize,
        },
        shaftId: this.params.ShaftID
      }
      if(this.keycode!=''){
        params.data.Filters += `;ShaftName contain '${this.keycode}' or ShaftLocalName contain '${this.keycode}' or ShaftLocalID contain '${this.keycode}'`
      }
      unshaftThroughShaft(params, res => {
        this.tableData = res.Content
        this.tableData.forEach(item => {
          if(item.StructureInfo && item.StructureInfo.ShaftFuncType){
            item.StructureInfo.ShaftFuncType = this.shaftType[item.StructureInfo.ShaftFuncType]
          }
        })
        this.page.total = res.Total
      })
    },
    //选中项修改
    handleSelectionChange(val) {
      this.selections = val;
    },
    savaRelation() {
      if(this.selections.length){
        let params = {
          ShaftId: this.params.ShaftID,
          ShaftOtherIdList: this.selections.map(item => {
            return item.ShaftID
          })
        }
        linkShaft(params, res => {
          this.dialogVisible = false
          this.$message.success('关联成功！')
          this.$emit('refresh')
        })
      }else {
        this.$message('请选择要关联的设备')
      }
    },
    //改变pagesize
    handleSizeChange(pageSize) {
      this.page.pageSize = pageSize;
      this.getTableData();
    },
    //改变pageno
    handleCurrentChange(pageNo) {
      this.page.pageNumber = pageNo;
      this.getTableData();
    },
    // 查看详情
    toDetail() {
      this.$message('开发中')
    }
  },
};
</script>
<style lang="less" scoped>
#addEqDialog {
  .filters {
    margin-bottom: 10px;
    /deep/ .el-input__inner {
      vertical-align: baseline;
    }
  }
  .table-box {
    height: 370px;
    .fr{
      margin-top: 10px;
    }
  }
}
</style>