qa-prevention-gwj-vue/src/views/hiddenanalysis/analysis/index.vue

<template>
  <div class="app-container">
    <div class="filter-specil">
      <div class="specil-lable">
        隐患级别：
      </div>
      <div class="specil-select">
        <el-checkbox-group v-model="checkedCities" :disabled="hiddenleved" @change="handleCheckedCitiesChange">
          <el-checkbox v-for="city in hiddenlevelList" :label="city" :key="city.BIANMA">{{ city.NAME }}</el-checkbox>
        </el-checkbox-group>
      </div>
    </div>
    <el-row :gutter="20">
      <el-col :span="14">
        <div class="filter-specil">
          <div class="specil-lable">
            隐患类型：
          </div>
          <div class="specil-select">
            <el-checkbox-group v-model="hiddentypecheckedCities" :disabled="hiddentyped" @change="hiddentypeCheckedCitiesChange">
              <el-checkbox v-for="city in hiddentypeList" :label="city" :key="city.BIANMA">{{ city.NAME }}</el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
      </el-col>
      <el-col :span="10">
        <div style="text-align: right;">
          <MutilSelectTree ref="treeSelect" :default-callback="false" :data="treeData" :check-strictly="true" :default-props="{children: 'nodes', label: 'name'}" :node-key="'id'" :clearable="false" placeholder="请选择" multiple @handleTreeSelected="handleTreeSelected" />
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12">
        <div class="filter-specil">
          <div class="specil-lable">
            隐患状态：
          </div>
          <div class="specil-select">
            <el-checkbox-group v-model="statecheckedCities" :disabled="stated" @change="stateCheckedCitiesChange">
              <el-checkbox v-for="state in states" :label="state" :key="state.id">{{ state.name }}</el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="filter-container" style="text-align: right;">
          <div class="filter-group">
            <div class="filter-lable">
              发现日期：
            </div>
            <div class="filter-date">
              <el-date-picker v-model="dates" type="datetimerange" format="yyyy-MM-dd" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right" />
            </div>
          </div>
          <div class="filter-group">
            <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="getList">
              搜索
            </el-button>
            <el-button v-waves class="filter-item" type="success" icon="el-icon-refresh" @click="chongzhi">
              重置
            </el-button>
          </div>

        </div>
      </el-col>

    </el-row>

    <el-table ref="multipleTable" :data="varList" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" row-key="DEPARTMENT_ID" default-expand-all border tooltip-effect="dark" style="width: 100%">
      <el-table-column v-if="varList.length>0" label="序号" type="index" />
      <template v-for="(col) in retultlist">
        <el-table-column :show-overflow-tooltip="true" :prop="col.dataItem" :label="col.dataName" :key="col.dataItem" sortable />
      </template>

    </el-table>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import waves from '@/directive/waves'
import { requestFN } from '@/utils/request'
import { Message } from 'element-ui'
import MutilSelectTree from '@/components/MutilSelectTree'
const cityOptions = [{ id: '1', name: '未整改' }, { id: '3', name: '待验收' }, { id: '4', name: '已验收' }, { id: '-1', name: '已过期' }]
const hiddentypeOptions = []
const hiddenleveOptions = []
export default {
  components: { Pagination, Message, MutilSelectTree },
  directives: { waves },
  data() {
    return {
      defaultProps: {
        value: 'id',
        children: 'nodes',
        label: 'name',
        disabled: true
      },
      checkAll: false,
      checkedCities: [],
      hiddenleves: hiddenleveOptions,
      isIndeterminate: true,
      hiddentypecheckAll: false,
      hiddentypecheckedCities: [],
      hiddentypes: hiddentypeOptions,
      hiddentypecities: cityOptions,
      hiddentypeisIndeterminate: true,
      listLoading: true,
      statecheckAll: false,
      statecheckedCities: [],
      states: cityOptions,
      stateisIndeterminate: true,
      hiddentyped: false,
      hiddenleved: false,
      stated: false,
      add: false,
      del: false,
      edit: false,
      listQuery: {
        page: 1,
        limit: 20
      },
      total: 0,
      hiddenlevelList: [],
      hiddentypeList: [],
      treeData: [],
      varList: [],
      KEYWORDS: '',
      dates: [],
      retultlist: [],
      HIDDENLEVEL: 'hiddenLevel0002',
      ISQUALIFIED: '',
      checkedIds: [],
      decheckedIds: []
    }
  },
  created() {
    this.getDict()
    this.getTreeData()
  },
  methods: {

    // 获得部门树
    getTreeData() {
      requestFN(
        '/department/listTree',
        {}
      ).then((data) => {
        this.treeData = JSON.parse(data.zTreeNodes)
        this.decheckedIds.push(this.treeData[0].id)
        this.$nextTick(() => {
          this.$refs.treeSelect.loadCheckedKeys(this.decheckedIds)
        })

        this.treeData[0].disabled = true
        this.checkedIds = []
      }).catch((e) => {
      })
    },
    handleTreeSelected(checkedIds, checkedData) {
      console.log(111111111)
      this.checkedIds = checkedIds
    },
    handleCheckAllChange(val) {
      if (val) {
        this.stated = true
        this.hiddentyped = true
        this.hiddentypecheckedCities = []
        this.statecheckedCities = []
      } else {
        this.stated = false
        this.hiddentyped = false
      }
      this.checkedCities = val ? this.hiddenlevelList : []
      this.isIndeterminate = false
    },
    handleCheckedCitiesChange(value) {
      const checkedCount = value.length
      if (checkedCount > 0) {
        this.stated = true
        this.hiddentyped = true
        this.hiddentypecheckedCities = []
        this.statecheckedCities = []
      } else {
        this.stated = false
        this.hiddentyped = false
      }
      this.checkAll = checkedCount === this.hiddenleves.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.hiddenleves.length
    },
    hiddentypeCheckAllChange(val) {
      if (val) {
        this.stated = true
        this.hiddenleved = true
        this.checkedCities = []
        this.statecheckedCities = []
      } else {
        this.stated = false
        this.hiddenleved = false
      }
      this.hiddentypecheckedCities = val ? this.hiddentypes : []
      this.hiddentypeisIndeterminate = false
    },
    hiddentypeCheckedCitiesChange(value) {
      const checkedCount = value.length
      if (checkedCount > 0) {
        this.stated = true
        this.hiddenleved = true
        this.checkedCities = []
        this.statecheckedCities = []
      } else {
        this.stated = false
        this.hiddenleved = false
      }
      this.hiddentypecheckAll = checkedCount === this.hiddentypes.length
      this.hiddentypeisIndeterminate = checkedCount > 0 && checkedCount < this.hiddentypes.length
    }, stateCheckAllChange(val) {
      if (val) {
        this.hiddentyped = true
        this.hiddenleved = true
        this.checkedCities = []
        this.hiddentypecheckedCities = []
      } else {
        this.hiddentyped = false
        this.hiddenleved = false
      }
      this.statecheckedCities = val ? this.states : []
      this.stateisIndeterminate = false
    },
    stateCheckedCitiesChange(value) {
      const checkedCount = value.length
      if (checkedCount > 0) {
        this.hiddentyped = true
        this.hiddenleved = true
        this.checkedCities = []
        this.hiddentypecheckedCities = []
      } else {
        this.hiddentyped = false
        this.hiddenleved = false
      }
      this.statecheckAll = checkedCount === this.states.length
      this.stateisIndeterminate = checkedCount > 0 && checkedCount < this.states.length
    },
    // 判断按钮权限，用于是否显示按钮
    hasButton() {
      var keys = 'hidden:add,hidden:del,hidden:edit,toExcel'
      requestFN(
        '/head/hasButton',
        {
          keys: keys
        }
      ).then((data) => {
        this.add = data.hiddenfhadminadd
        this.del = data.hiddenfhadmindel
        this.edit = data.hiddenfhadminedit
      }).catch((e) => {
        this.listLoading = false
      })
    },
    // 获取列表
    getList() {
      this.listLoading = true

      var STARTTIME = ''
      var ENDTIME = ''
      if (this.dates) {
        STARTTIME = this.dates[0]
        ENDTIME = this.dates[1]
      }
      if (this.checkedCities.length > 0 || this.hiddentypecheckedCities.length > 0 || this.statecheckedCities.length > 0) {
        console.log(this.checkedIds)
        requestFN(
          '/statistics/gostatistics',
          {
            KEYWORDS: this.KEYWORDS,
            DISPOSESTATE: '2',
            STARTTIME: STARTTIME,
            ENDTIME: ENDTIME,
            checkedCities: JSON.stringify(this.checkedCities),
            hiddentypecheckedCities: JSON.stringify(this.hiddentypecheckedCities),
            statecheckedCities: JSON.stringify(this.statecheckedCities),
            checkedIds: JSON.stringify(this.checkedIds),
            tm: new Date().getTime()
          }
        ).then((data) => {
          this.listLoading = false
          this.varList = data.varList
          this.retultlist = data.retultlist

          this.hasButton()
        }).catch((e) => {
          this.listLoading = false
        })
      } else {
        this.$message({
          type: 'warning',
          message: '请选择统计项'
        })
      }
    },
    // 获取数据字典数据
    getDict() {
      requestFN(
        'dictionaries/getLevels?tm=' + new Date().getTime(),
        {
          DICTIONARIES_ID: '5e7cf8620ba54ad89719d0be62133c7a'
        }
      ).then((data) => {
        this.hiddenlevelList = data.list
        this.hiddenleves = []
        for (var i = 0; i < data.list.length; i++) {
          this.hiddenleves.push(data.list[i].NAME)
        }
      }).catch((e) => {
        this.listLoading = false
      })

      requestFN(
        'dictionaries/getLevels?tm=' + new Date().getTime(),
        {
          DICTIONARIES_ID: '3babc15144444bdc8d763d0af2bdfff6'
        }
      ).then((data) => {
        this.hiddentypeList = data.list
        this.hiddentypes = []
        for (var i = 0; i < data.list.length; i++) {
          this.hiddentypes.push(data.list[i].NAME)
        }
      }).catch((e) => {
        this.listLoading = false
      })
    },
    chongzhi() {
      this.$refs.treeSelect.handleClear()

      console.log('==============================' + this.decheckedIds)
      this.$nextTick(() => {
        this.$refs.treeSelect.loadCheckedKeys(this.decheckedIds)
      })
      this.checkedIds = []
      this.checkedCities = []
      this.statecheckedCities = []
      this.hiddentypecheckedCities = []

      this.hiddenleved = false
      this.stated = false
      this.hiddentyped = false
    }
  }

}

</script>

<style lang="scss" scoped>
.filter-specil {
  // height: 32px;
  // line-height: 32px;
  .specil-lable {
    display: inline-block;
    vertical-align: top;
    font-size: 13px;
    line-height: 32px;

    color: #4b4b4b;
  }
  .specil-select {
    display: inline-block;
    vertical-align: middle;
    // border: 1px solid red;
    line-height: 32px;
  }
}
.filter-container .filter-group:last-child {
  padding-right: 0px;
}
</style>