qa-regulatory-gwj-vue/src/views/firefighting/fireInfoReport/components/firePoint.vue

<template>
  <div class="app-container">
    <div class="rightCont">
      <el-form label-width="50px">
        <el-row>
          <el-col :span="4">
            <el-form-item label="点位名称" label-width="110px">
              <el-input v-model="FIRE_POINT_NAME" placeholder="请输入关键字"/>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="点位编码" label-width="110px">
              <el-input v-model="FIRE_POINT_CODE" placeholder="请输入关键字"/>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="是否标点" label-width="110px">
              <el-select v-model="IS_PUNCTUATION" clearable placeholder="请选择" style="width: 100%;">
                <el-option v-for="item in punctuationStatusList" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label-width="10px">
              <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="getQuery">
                搜索
              </el-button>
              <el-button v-waves class="filter-item" type="success" icon="el-icon-refresh" @click="goKeyReset">
                重置
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div>
        <el-table
          v-loading="listLoading"
          ref="multipleTable"
          :data="varList"
          :row-key="getRowKey"
          border
          tooltip-effect="dark"
          style="width: 100%">
          <el-table-column
            :selectable="selectable"
            type="selection"
            reserve-selection
            width="55"
            align="center"/>
          <el-table-column type="index" label="序号" width="55" align="center"/>
          <el-table-column prop="FIRE_REGION_NAME" label="区域名称"/>
          <el-table-column prop="FIRE_POINT_NAME" label="点位名称"/>
          <el-table-column prop="FIRE_POINT_CODE" label="编码"/>
          <el-table-column prop="DEVICE_COUNT" label="点位下消防器材数"/>
          <el-table-column prop="DEPARTMENT_NAME" label="负责部门"/>
          <el-table-column prop="USERNAME" label="负责人"/>
          <el-table-column prop="ISPUNCTUATION" label="是否标点">
            <template slot-scope="{row}">
              <el-tag v-if="row.ISPUNCTUATION == 0" type="success">是</el-tag>
              <el-tag v-else type="danger">否</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="{row}">
              <el-button
                v-show="true"
                class="tiffany-btn"
                icon="el-icon-picture"
                type="primary"
                size="mini"
                @click="handleShowQr(row)">点位二维码
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="page-btn-group">
          <div>
            <el-button icon="el-icon-plus" @click="goBack()">返 回</el-button>
          </div>
          <pagination
            :total="total"
            :page.sync="listQuery.page"
            :limit.sync="listQuery.limit"
            @pagination="getList(FIRE_POINT_ID)"/>
        </div>
      </div>
    </div>

    <el-dialog :visible.sync="dialogFormShow" title="查看二维码" width="680px" class="top-dialog">
      <div id="printTest" style="border: 1px solid #fff;">
        <div class="level-title" style="margin-top:20px">
          <h1>消防点位信息</h1>
        </div>
        <table class="table-ui">
          <tr>
            <td class="tbg">消防区域</td>
            <td >{{ qrInfo.FIRE_REGION_NAME }}</td>
            <td class="tbg">消防点位</td>
            <td>{{ qrInfo.FIRE_POINT_NAME }}</td>
          </tr>
          <tr>
            <td class="tbg">负责部门</td>
            <td>{{ qrInfo.DEPARTMENT_NAME }}</td>
            <td class="tbg">负责人</td>
            <td>{{ qrInfo.USERNAME }}</td>
          </tr>
        </table>
        <div class="table-qrcode">
          <vue-qr :text="qrcodeStr" :margin="0" :size="300" color-dark="#000" color-light="#fff" />
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormShow = false">关 闭</el-button>
        <el-button v-print="'#printTest'" type="primary">打 印</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { requestFN } from '@/utils/request'

import vueQr from 'vue-qr'
import waves from '@/directive/waves' // waves directive
import SelectTree from '@/components/SelectTree'

export default {

  components: { Pagination, SelectTree, vueQr },
  inject: ['setActiveName', 'getInfo', 'setInfo'],
  directives: { waves },
  data() {
    return {
      config: config,
      addBtnType: true,
      listLoading: true,
      dialogFormShow: false,
      qrcodeStr: '',
      qrInfo: {},
      add: false,
      del: false,
      edit: false,
      listQuery: {
        page: 1,
        limit: 20
      },
      ls: [],
      dates: [],
      total: 0,
      KEYWORDS: '',
      FIRE_POINT_NAME: '',
      FIRE_POINT_CODE: '',
      // 树形菜单
      filterText: '',
      varList: [],
      pd: [],
      defaultProps: {
        value: 'id',
        children: 'nodes',
        label: 'name'
      },
      punctuationStatusList: [
        {
          value: 0,
          label: '是'
        },
        {
          value: 1,
          label: '否'
        }
      ],
      IS_PUNCTUATION: ''
    }
  },
  watch: {
    filterText(val) {
      console.log(val)
      this.$refs.tree.filter(val)
    }
  },
  created() {
    this.getList()
  },
  methods: {
    handleShowQr(ROW) {
      this.dialogFormShow = true
      this.qrInfo = ROW
      this.qrcodeStr = this.config.weburlWaiwang + 'static/qrcode/views/bsbw/point_list.html?id=' + ROW.FIRE_POINT_ID
    },
    handleEdit(FIRE_POINT_ID) {
      this.$parent.FIRE_POINT_ID = FIRE_POINT_ID
      this.$parent.activeName = 'Edit'
    },
    selectable(row, index) {
      return row.DEVICE_COUNT == 0
    },
    getRowKey(row) {
      return row.FIRE_POINT_ID
    },
    // 添加
    handleAdd() {
      this.$parent.activeName = 'Edit'
      this.$parent.FIRE_POINT_ID = ''
      this.$parent.FIRE_POINT_CODE = ''
      this.$parent.FIRE_POINT_NAME = ''
    },
    // 搜索
    getQuery() {
      this.getList()
    },
    // 获取列表
    getList(pid) {
      this.listLoading = true
      this.varList = []
      this.FIRE_POINT_ID = pid
      requestFN(
        '/firePoint/list?showCount=' + this.listQuery.limit + '&currentPage=' + this.listQuery.page,
        {
          FIRE_POINT_NAME: this.FIRE_POINT_NAME,
          FIRE_POINT_CODE: this.FIRE_POINT_CODE,
          CORPINFO_ID: this.getInfo().CORPINFO_ID,
          IS_PUNCTUATION: this.IS_PUNCTUATION
        }
      ).then((data) => {
        this.listLoading = false
        this.varList = data.varList
        this.total = data.page.totalResult
      }).catch((e) => {
        this.listLoading = false
      })
    }, goKeyReset() {
      this.FIRE_POINT_NAME = ''
      this.FIRE_POINT_CODE = ''
      this.IS_PUNCTUATION = ''
      this.getList()
    },
    getDict() {
      requestFN(
        'dictionaries/getLevels',
        {
          DICTIONARIES_ID: '4a3d0d99b0ea4e268c11dd0b18866917'
        }
      ).then((data) => {
        this.typeList = data.list
      })
        .catch((e) => {
          this.listLoading = false
        })

      requestFN(
        'dictionaries/getLevels',
        {
          DICTIONARIES_ID: 'f60cf0e8315b4993b6d6049dd29f2ba5'
        }
      ).then((data) => {
        this.periodList = data.list
      })
        .catch((e) => {
          this.listLoading = false
        })

      requestFN(
        'dictionaries/getLevels',
        {
          DICTIONARIES_ID: '4a661fa8aedc4d158c9cddaa9d2ec47e'
        }
      ).then((data) => {
        this.listingLevelList = this.listingLevelList.concat(data.list)
      })
        .catch((e) => {
          this.listLoading = false
        })
    },
    handleDelete(row) {
      const DATA_IDS = []
      if (row.FIRE_POINT_ID) {
        DATA_IDS.push(row.FIRE_POINT_ID)
      } else {
        const selection = this.$refs.multipleTable.selection
        if (!selection.length > 0) {
          this.$message({
            type: 'warning',
            message: '请选择要删除的数据'
          })
          return
        }
        selection.forEach(item => {
          DATA_IDS.push(item.FIRE_POINT_ID)
        })
      }
      this.$confirm('确定要删除吗?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.listLoading = true
        requestFN(
          '/firePoint/removeFirePointByIds',
          {
            DATA_IDS: DATA_IDS.join(',')
          }
        ).then(() => {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.$refs.multipleTable.clearSelection()
          this.listLoading = false
          this.varList = []
          this.listQuery.page = 1
          this.getList(this.FIRE_POINT_ID)
        }).catch((e) => {
          this.listLoading = false
        })
      }).catch(() => {
      })
    },
    hasButton: function() {
      var keys = 'listmanager:add,listmanager:del,listmanager:edit,toExcel'
      requestFN(
        '/head/hasButton',
        {
          keys: keys
        }
      ).then((data) => {
        this.add = data.listmanagerfhadminadd		// 新增权限
        this.del = data.listmanagerfhadmindel		// 删除权限
        this.edit = data.listmanagerfhadminedit	// 修改权限
        this.toExcel = data.toExcel // 导出到excel权限
      }).catch((e) => {
        this.listLoading = false
      })
    },
    goBack() {
      this.setActiveName('List')
    }
  }
}
</script>

<style scoped >
.returnBtn {
  float: right;
}
.app-container {
  display: flex; /**/
  align-items: baseline;
}
.table-qrcode{
  text-align: center;
  padding-top: 20px;
  width: 100%;
}

.rightCont {
  width: 100%
}
</style>