qa-prevention-gwj-vue/src/views/firefighting/points/components/list.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">
              <SelectTree
                ref="deptTree_Select"
                :key="selectForm.DEPARTMENT_ID"
                :clearable="true"
                :options="deptTreeData"
                :props="defaultProps"
                v-model="selectForm.DEPARTMENT_ID"
                placeholder="请选择部门"
                style="width: 100%;"/>
            </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="操作" width="450">
            <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>-->
              <el-button
                v-show="edit"
                type="primary"
                icon="el-icon-edit"
                size="mini"
                @click="handleEdit(row.FIRE_POINT_ID)">修改
              </el-button>
              <el-button
                v-show="row.DEVICE_COUNT == 0"
                type="danger"
                icon="el-icon-delete"
                size="mini"
                @click="handleDelete(row)">删除
              </el-button>
              <!-- 新增按钮：检查记录二维码 -->
              <!--              <el-button-->
              <!--                class="tiffany-btn"-->
              <!--                icon="el-icon-document"-->
              <!--                type="info"-->
              <!--                size="mini"-->
              <!--                @click="handleShowRecordQr(row)">检查记录二维码-->
              <!--              </el-button>-->
              <el-button
                class="tiffany-btn"
                icon="el-icon-document"
                type="info"
                size="mini"
                @click="handleShowNotificationCard(row)">
                告知卡
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="page-btn-group">
          <div>
            <el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
            <el-button type="danger" icon="el-icon-delete" @click="handleDelete">批量删除</el-button>
            <el-button type="info" icon="el-icon-plus" @click="handleEditUser">批量修改负责人</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>-->

    <el-dialog :visible.sync="dialogFormShow" title="消防点位维护信息告知牌" width="780px" class="top-dialog">
      <el-tabs v-model="tabsActive">
        <el-tab-pane label="横版" name="horizontal"/>
        <el-tab-pane label="竖版" name="vertical"/>
      </el-tabs>
      <div id="printTest">
        <div class="main_title">消防点位维护信息告知牌</div>
        <div v-if="tabsActive === 'horizontal'" class="horizontal">
          <div class="info">
            <div class="row">
              <div class="title">消防点位</div>
              <div class="value">{{ qrInfo.FIRE_POINT_NAME }}</div>
            </div>
            <div class="row">
              <div class="title">点位编号</div>
              <div class="value">{{ qrInfo.FIRE_POINT_CODE }}</div>
            </div>
          </div>
          <div class="qr_info">
            <div class="row">
              <div class="title">检查码</div>
              <div class="qr">
                <vue-qr :text="qrcodeStr_jianchama" :margin="0" :size="280" color-dark="#000" color-light="#fff"/>
              </div>
              <div class="title">查询码</div>
              <div class="qr">
                <vue-qr :text="qrcodeStr_chaxunma" :margin="0" :size="280" color-dark="#000" color-light="#fff"/>
              </div>
            </div>
          </div>
        </div>
        <div v-if="tabsActive === 'vertical'" class="vertical">
          <div class="info">
            <div class="row">
              <div class="title">消防点位</div>
              <div class="value">{{ qrInfo.FIRE_POINT_NAME }}</div>
            </div>
            <div class="row">
              <div class="title">点位编号</div>
              <div class="value">{{ qrInfo.FIRE_POINT_CODE }}</div>
            </div>
          </div>
          <div class="qr_info">
            <div class="row">
              <div class="title">检查码</div>
              <div class="qr">
                <vue-qr :text="qrcodeStr_jianchama" :margin="0" :size="280" color-dark="#000" color-light="#fff"/>
              </div>
            </div>
            <div class="row">
              <div class="title">查询码</div>
              <div class="qr">
                <vue-qr :text="qrcodeStr_chaxunma" :margin="0" :size="280" color-dark="#000" color-light="#fff"/>
              </div>
            </div>
          </div>
        </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>

    <el-dialog :visible.sync="dialogRecordFormShow" title="查看检查记录二维码" width="680px" class="top-dialog">
      <div id="recordPrintTest" style="border: 1px solid #fff;">
        <div class="level-title" style="margin-top:20px">
          <h1>检查记录二维码</h1>
        </div>
        <div class="table-qrcode">
          <vue-qr :text="recordQrcodeStr" :margin="0" :size="300" color-dark="#000" color-light="#fff"/>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogRecordFormShow = false">关 闭</el-button>
        <el-button v-print="'#recordPrintTest'" type="primary">打 印</el-button>
      </div>
    </el-dialog>

    <el-dialog v-loading="listLoading" :visible.sync="dialogEditUser" title="批量修改负责人" width="800px">
      <el-form
        ref="firefightingBatchEditDept"
        :model="dialogEditUserForm"
        :rules="dialogEditUserRules"
        label-width="150px">
        <el-row>
          <el-form-item label="负责人员" prop="USER_ID">
            <el-select
              v-model="dialogEditUserForm.USER_ID"
              placeholder="请选择人员"
              class="filter-item"
              style="width: 80%;">
              <el-option v-for="item in userList" :key="item.USER_ID" :label="item.NAME" :value="item.USER_ID"/>
            </el-select>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogEditUser = false">取 消</el-button>
        <el-button type="primary" @click="dialogEditUserConfirm">确 定</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 },
  directives: { waves },
  data() {
    return {
      config: config,
      addBtnType: true,
      listLoading: true,
      dialogFormShow: false,
      dialogRecordFormShow: false,
      qrcodeStr_jianchama: '',
      qrcodeStr_chaxunma: '',
      tabsActive: 'horizontal',
      recordQrcodeStr: '',
      qrInfo: {},
      add: false,
      del: false,
      edit: false,
      listQuery: {
        page: 1,
        limit: 20
      },
      ls: [],
      dates: [],
      total: 0,
      KEYWORDS: '',
      FIRE_POINT_NAME: '',
      FIRE_POINT_CODE: '',
      selectForm: {
        DEPARTMENT_ID: ''
      },
      // 树形菜单
      filterText: '',
      varList: [],
      pd: [],
      defaultProps: {
        value: 'id',
        children: 'nodes',
        label: 'name'
      },
      editDataIds: [],
      dialogEditUser: false,
      dialogEditUserForm: {
        USER_ID: ''
      },
      dialogEditUserRules: {
        USER_ID: [{ required: true, message: '请选择负责人', trigger: 'change' }]
      },
      deptTreeData: [],
      userList: [],
      punctuationStatusList: [
        {
          value: 0,
          label: '是'
        },
        {
          value: 1,
          label: '否'
        }
      ],
      IS_PUNCTUATION: ''
    }
  },
  watch: {
    filterText(val) {
      console.log(val)
      this.$refs.tree.filter(val)
    }
  },
  created() {
    this.getList()
    this.hasButton()
    this.getTreeData()
  },
  methods: {
    handleShowNotificationCard(ROW) {
      this.dialogFormShow = true
      this.qrInfo = ROW
      // 检查码
      this.qrcodeStr_chaxunma = JSON.stringify({
        MANAGER_TYPE: 'checkRecordManager',
        USER_ID: ROW.USER_ID,
        DEPARTMENT_ID: ROW.DEPARTMENT_ID,
        FIRE_POINT_ID: ROW.FIRE_POINT_ID
      })
      // 查询码
      this.qrcodeStr_jianchama = JSON.stringify({
        MANAGER_TYPE: 'fireListManager',
        FIRE_POINT_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 true
    },
    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,
          DEPARTMENT_ID: this.selectForm.DEPARTMENT_ID,
          IS_PUNCTUATION: this.IS_PUNCTUATION
        }
      ).then((data) => {
        this.listLoading = false
        this.varList = data.varList
        this.total = data.page.totalResult
        this.hasButton()
      }).catch((e) => {
        this.listLoading = false
      })
    },
    goKeyReset() {
      this.FIRE_POINT_NAME = ''
      this.FIRE_POINT_CODE = ''
      this.IS_PUNCTUATION = ''
      this.selectForm = {
        DEPARTMENT_ID: ''
      }
      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
        })
    },
    getTreeData() {
      requestFN(
        '/department/listTreeV2',
        {}
      ).then((data) => {
        this.deptTreeData = JSON.parse(data.zTreeNodes)
      }).catch((e) => {
      })
    },
    handleEditUser(row) {
      this.editDataIds = []
      if (row.FIRE_POINT_ID) {
        this.editDataIds.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 => {
          this.editDataIds.push(item.FIRE_POINT_ID)
        })
      }
      const selection = this.$refs.multipleTable.selection
      const DEPARTMENT_ID = selection[0].DEPARTMENT_ID
      if (selection.length > 1) {
        let flag = false
        selection.forEach(item => {
          if (DEPARTMENT_ID !== item.DEPARTMENT_ID) {
            this.$message({
              type: 'warning',
              message: '只能选择同一部门下的数据'
            })
            flag = true
          }
        })
        if (flag) {
          return
        }
      }
      this.getUserList(DEPARTMENT_ID)
      this.dialogEditUserForm = {
        USER_ID: ''
      }
      this.dialogEditUser = true
    },
    getUserList(DEPARTMENT_ID) {
      requestFN(
        '/user/listAll',
        {
          DEPARTMENT_ID: DEPARTMENT_ID
        }
      ).then((data) => {
        this.userList = data.userList
      }).catch((e) => {
      })
    },
    dialogEditUserConfirm() {
      this.$refs.firefightingBatchEditDept.validate((valid) => {
        if (valid) {
          this.listLoading = true
          requestFN(
            '/firePoint/batchEditFirePointUser',
            {
              DATA_IDS: this.editDataIds.join(','),
              USER_ID: this.dialogEditUserForm.USER_ID
            }
          ).then(() => {
            this.$message({
              message: '修改成功',
              type: 'success'
            })
            this.dialogEditUser = false
            this.getList()
          }).catch(() => {
          })
        }
      })
    },
    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
        }
        var flag = true
        selection.forEach(item => {
          if (item.DEVICE_COUNT > 0) {
            flag = false
          }
        })
        if (!flag) {
          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
      })
    }
  }
}
</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>

<style scoped lang="scss">
#printTest {
  border: 1px solid #ccc;
  padding: 20px;
  margin: 10px;

  .main_title {
    font-weight: bold;
    font-size: 30px;
    text-align: center;
    color: #000;
  }

  .horizontal {
    .info {
      color: #000;
      font-size: 16px;
      margin-top: 30px;

      .row {
        display: flex;
        align-items: center;

        .title {
          width: 120px;
          text-align: center;
          border: 1px solid #000;
          padding: 5px;
          letter-spacing: 6px;
        }

        .value {
          border: 1px solid #000;
          border-left: none;
          flex: 1;
          padding: 5px 5px 5px 10px;
        }

        & + .row {
          .title, .value {
            border-top: none;
          }
        }
      }
    }

    .qr_info {
      color: #000;
      font-size: 16px;

      .row {
        display: flex;

        .title {
          width: 30px;
          line-height: 22px;
          writing-mode: vertical-rl;
          text-align: center;
          letter-spacing: 15px;
          border: 1px solid #000;
          border-top: none;
          padding: 4px;
        }

        .qr {
          flex: 1;
          border: 1px solid #000;
          border-top: none;
          border-left: none;
          padding: 5px;
          display: flex;
          align-items: center;
          justify-content: center;

          & + .title {
            border-left: none;
          }
        }
      }
    }
  }

  .vertical {
    .info, .qr_info {
      color: #000;
      font-size: 16px;
      margin-top: 30px;

      .row {
        display: flex;

        .title {
          width: 200px;
          text-align: center;
          padding: 5px;
          border: 1px solid #000;
          letter-spacing: 6px;
        }

        .value, .qr {
          padding: 5px 5px 5px 10px;
          border: 1px solid #000;
          border-left: none;
          flex: 1;
        }

        & + .row {
          .title, .value, .qr {
            border-top: none;
          }
        }
      }
    }

    .qr_info {
      margin-top: 0;

      .row {
        .title {
          letter-spacing: 12px;
          line-height: 280px;
          border-top: none;
        }

        .qr {
          display: flex;
          align-items: center;
          justify-content: center;
          border-top: none;
        }
      }
    }
  }
}
</style>