fj-dc-ui/.svn/pristine/3c/3c5dc7a9bc50a8961604d494650ed0465a6c67e5.svn-base

<template>
  <el-container>
    <el-main>
      <div>
        选择通知填报项目：
        <el-radio v-model="radio" label="1">批次测评填报</el-radio>
        <el-radio v-model="radio" label="2">年度测评填报</el-radio>
        <div style="display: inline-block;margin-left: 20px;">
          填报截止时间：
          <el-date-picker
            v-model="fillInDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>
        </div>
      </div>
      <el-card shadow="hover" style="margin: 20px 0;width: 500px;" v-show="false">
        <el-form ref="form" :model="form" label-width="180px">
          <el-form-item label="选择年度">
            <el-select v-model="form.year" placeholder="">
              <el-option :label="item.label" :value="item.value" v-for="(item,index) in yearList"
                         :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择批次">
            <el-select v-model="form.batch" placeholder="">
              <el-option :label="item.label" :value="item.value" v-for="(item,index) in batchList"
                         :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择角色">
            <el-select v-model="form.role" placeholder="">
              <el-option :label="item.label" :value="item.value" v-for="(item,index) in roleList"
                         :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="设置批次测评开放时间为">
            <el-select v-model="form.openTime" placeholder="">
              <el-option :label="item.label" :value="item.value" v-for="(item,index) in openTimeList"
                         :key="index"></el-option>
            </el-select>
            天
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">确定</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card shadow="hover" style="margin: 20px 0;">
        <el-form ref="searchForm" :model="searchForm" label-width="80px" inline>
          <el-form-item label="选择年度">
            <el-select v-model="searchForm.year" placeholder="" style="width: 120px" @change="yearChange">
              <el-option :label="item.year" :value="item.year" :key="item.id" v-for="item in yearList"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择批次">
            <el-select v-model="searchForm.batch" placeholder="" style="width: 120px" clearable>
              <el-option :label="item.batch" :value="item.batch" :key="item.id" v-for="item in batchList"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择角色">
            <el-select v-model="searchForm.roleType" placeholder="" style="width: 120px" clearable>
              <el-option :label="item.label" :value="item.value" v-for="(item,index) in roleList"
                         :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="searchForm.name" style="width: 120px" clearable placeholder=""></el-input>
          </el-form-item>
          <el-form-item label="通知状态">
            <el-select v-model="searchForm.state" placeholder="" style="width: 120px" clearable>
              <el-option :label="item.label" :value="item.value" v-for="(item,index) in stateList"
                         :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getTableData">查询</el-button>
          </el-form-item>
        </el-form>
        <el-table
          v-loading="loading"
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          border
          :height="tableHeight"
          @select="isSelected"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            label="序号"
            type="index"
            width="50">
          </el-table-column>
          <el-table-column
            prop="roleType"
            label="角色"
            width="120">
            <template slot-scope="scope">
              <span>{{scope.row.roleType | rolefilter}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="batches"
            label="参加批次"
            width="120">
          </el-table-column>
          <el-table-column
            prop="name"
            label="姓名"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="age"
            label="年龄"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="mobilenumb"
            label="手机号"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="idNo"
            label="身份证号"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="state"
            label="通知状态"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <span :class="{'orange': scope.row.state == '1','green': scope.row.state == '0'}">{{scope.row.state == '0' ? '未通知' : scope.row.state == '1' ? '已通知' : ''}}</span>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination style="margin-left: 30px;" :pager-count="5" :current-page="pageIndex" background
                       :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"
                       :page-sizes="[10, 20, 50, 100]"
                       @current-change="pageIndexChange" @size-change="handleSizeChange"
        ></el-pagination>
        <el-button type="primary" style="float:right" @click="onSubmit">确定</el-button>
      </el-card>
    </el-main>
  </el-container>
</template>
<script>
  import request from '@util/gw_ajax_request.js'

  export default {
    data() {
      return {
        tableHeight: window.innerHeight - 360,
        form: {
          year: '2019',
          batch: '',
          role: '',
          openTime: ''
        },
        searchForm: {
          year: '',
          batch: '',
          roleType: '',
          name: '',
          type: 1,
          state: ''
        },
        stateList: [
          {label: '未通知', value: '0'},
          {label: '已通知', value: '1'}
        ],
        radio: '1',
        yearList: [
          {year: '2019', id: '2019'}
        ],
        batchList: [
          {batch: '1', value: '1'},
          {batch: '2', value: '2'},
          {batch: '3', value: '3'},
          {batch: '4', value: '4'},
          {batch: '5', value: '5'},
          {batch: '6', value: '6'},
          {batch: '7', value: '7'},
          {batch: '8', value: '8'},
          {batch: '9', value: '9'},
          {batch: '10', value: '10'},
        ],
        roleListYear: [
          {label: '前期专家', value: '11'},
          {label: '建管专家', value: '12'},
          {label: '计划专家', value: '13'},
          {label: '财务专家', value: '14'},
          {label: '质量专家', value: '15'},
          {label: '安全专家', value: '16'},
          {label: '助理', value: '19'},
          {label: '稽察组长', value: '20'}
        ],
        roleListBatch: [
          {label: '助理', value: '19'},
          {label: '稽察组长', value: '20'}
        ],
        roleList: [],
        openTimeList: [
          {label: '3', value: '1'},
          {label: '4', value: '2'},
          {label: '5', value: '3'},
          {label: '6', value: '4'},
          {label: '7', value: '5'}
        ],
        tableData: [{
          roleType: '助理',
          batches: '1、3',
          name: '',
          age: '',
          mobilenumb: '',
          idNo: ''
        }, {
          roleType: '前期专家',
          batches: '3、4',
          name: '',
          age: '',
          mobilenumb: '',
          idNo: ''
        }, {
          roleType: '建管专家',
          batches: '1',
          name: '',
          age: '',
          mobilenumb: '',
          idNo: ''
        }, {
          roleType: '计划专家',
          batches: '4',
          name: '',
          age: '',
          mobilenumb: '',
          idNo: ''
        }, {
          roleType: '财务专家',
          batches: '',
          name: '',
          age: '',
          mobilenumb: '',
          idNo: ''
        }, {
          roleType: '质量专家',
          batches: '',
          name: '',
          age: '',
          mobilenumb: '',
          idNo: ''
        }, {
          roleType: '安全专家',
          batches: '',
          name: '',
          age: '',
          mobilenumb: '',
          idNo: ''
        }
        ],
        multipleSelection: [],
        pageIndex: 1,
        pageSize: 20,
        total: 0,
        loading: true,
        fillInDate: ''
      }
    },
    computed: {
      persId() {
        return localStorage.getItem('userid') ? localStorage.getItem('userid') : ''
      }
    },
    mounted() {
      this.roleList = this.roleListBatch
      this.getYearPc()
    },
    methods: {
      getYearPc() {
        request.post(`/tac/insp/year/list`, {}).then(res => {
          if (res.success) {
            this.$nextTick(() => {
              this.yearList = res.data;
              this.searchForm.year = this.yearList[0].year
              // this.getBatchList()
              this.getTableData()
            })
          }
        })
      },
      getBatchList() {
        request.post(`/tac/insp/batch/getBatchListAuditByYear`, {year: this.searchForm.year}).then(res => {
          if (res.success) {
            this.batchList = res.data;
            this.searchForm.batch = this.batchList[0].batch
            this.getTableData()
          }
        })
      },
      getTableData() {
        let _this = this
        this.searchForm['pageNum'] = this.pageIndex
        this.searchForm['pageSize'] = this.pageSize
        request.post(`/tac/evalation/inform/getInformPage`, this.searchForm).then(res => {
          if (res.success) {
            this.loading = false
            this.tableData = res.data.list;
            this.total = res.data.total
            this.$nextTick(function () {
              if (this.multipleSelection.length && this.tableData.length) {
                let selectedRows = []
                this.multipleSelection.forEach(ele => {
                  let id = ele.id
                  _this.tableData.forEach(element => {
                    if (id == element.id) {
                      selectedRows.push(element)
                    }
                  })
                })
                selectedRows.forEach(row => {
                  _this.$refs.multipleTable.toggleRowSelection(row, true);
                });
              }
            })
          } else {
            this.$message.error(res.message)
          }
        })
      },
      onSubmit() {
        let dataObj = {
          cutTime: this.fillInDate,
          year: this.searchForm.year,
          batch: this.searchForm.batch,
          type: this.searchForm.type,
          persId: this.persId,
          dtoList: this.multipleSelection
        }
        if (!dataObj.cutTime) {
          this.$message.warning('请选择填报截止时间')
          return
        }
        if (!dataObj.batch) {
          this.$message.warning('请选择批次')
          return
        }
        if (!dataObj.dtoList.length) {
          this.$message.warning('请选择通知人员')
          return
        }
        request.post(`/tac/evalation/inform/sendMessage`, dataObj).then(res => {
          if (res.success) {
            this.$message.success('通知成功')
            this.getTableData()
            this.multipleSelection = []
          } else {
            this.$message.error(res.message)
          }
        })
      },
      yearChange() {
        this.getBatchList()
      },
      handleSelectionChange(val) {
        //this.multipleSelection不能赋值为[]，因为带的有之前已选中的数据
        if (val.length) {
          val.forEach(ele => {
            this.multipleSelection.push(ele)
          })
          this.multipleSelection = this.multipleSelection
        }
        let allArr = []
        for (var i = 0; i < this.multipleSelection.length; i++) {
          let flag = true;
          for (var j = 0; j < allArr.length; j++) {
            if (this.multipleSelection[i].id == allArr[j].id) {
              flag = false;
            }
            ;
          }
          ;
          if (flag) {
            allArr.push(this.multipleSelection[i]);
          }
          ;
        }
        ;
        this.multipleSelection = allArr
        // this.multipleSelection = Array.from(new Set(this.multipleSelection))
      },
      isSelected(rows, row) {
        let _this = this
        let selected = rows.length && rows.indexOf(row) !== -1
        if (!selected) {
          this.multipleSelection.forEach((ele, index) => {
            if (ele.id == row.id) {
              this.multipleSelection.splice(index, 1)
            }
          })
        }
      },
      pageIndexChange(val) {
        this.pageIndex = val
        this.getTableData()
      },
      handleSizeChange(val) {
        this.pageSize = val
      }
    },
    watch: {
      radio(val) {
        if (val == '1') {
          this.roleList = this.roleListBatch
          this.searchForm.type = 1
        } else {
          this.roleList = this.roleListYear
          this.searchForm.type = 2
        }
        this.getTableData()
      }
    },
    filters: {
      rolefilter(val) {
        if (val == '11') {
          return '前期专家'
        } else if (val == '12') {
          return '建管专家'
        }
        if (val == '13') {
          return '计划专家'
        }
        if (val == '14') {
          return '财务专家'
        }
        if (val == '15') {
          return '质量专家'
        }
        if (val == '16') {
          return '安全专家'
        }
        if (val == '19') {
          return '助理'
        }
        if (val == '20') {
          return '稽察组长'
        } else {
          return val
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .green {
    color: #67c23a
  }

  .orange {
    color: #e6a23c
  }
</style>