fj-dc-ui/.svn/pristine/7d/7d6778957c4ca5a0af83438de5d65c76e8ee08ba.svn-base

<template>
  <el-container class="monthReport">
    <el-card class="box-card">
      <h2 class="title_monthReport">月报短信提醒</h2>
      <el-form :inline="true" size="small" class="demo-form-inline" label-width="80px">
        <el-form-item label="人员姓名" size="mini">
          <el-input v-model="searchForm.userName" placeholder="人员姓名" clearable></el-input>
        </el-form-item>
        <el-form-item label="所属部门" size="mini">
          <el-input v-model="searchForm.dpnm" placeholder="所属部门" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="searchBtn">查询</el-button>
          <el-button type="primary" size="mini" @click="addBtn">添加</el-button>
          <el-button type="success" size="mini" @click="batchStart(1)">批量启动</el-button>
          <el-button type="info" size="mini" @click="batchStart(0)">批量关闭</el-button>
          <el-button type="danger" size="mini" @click="batchDelete">批量删除</el-button>
          <el-button type="primary" size="mini" @click="setTime">设置提醒日期</el-button>
          <span style="color:red;font-size: 10px;">{{tipTime}}</span>
        </el-form-item>
      </el-form>
      <div>
        <el-table
          border
          ref="multipleTable"
          :height="tableHeight"
          :data="tableData"
          tooltip-effect="dark"
          @selection-change="handleTimeSelectionChange"
          style="width: 100%"
          v-loading="loading">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column align="center" type="index" label="序号" min-width="25">
            <template slot-scope="scope">{{ (pageNum - 1) * pageSize + (scope.$index + 1) }}</template>
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            min-width="100"
            prop="persName"
            label="人员姓名"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            min-width="100"
            prop="sex"
            label="性别"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <span v-if="scope.row.sex==1">男</span>
              <span v-else-if="scope.row.sex==2">女</span>
              <span v-else></span>
            </template>
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            min-width="200"
            prop="mobilenumb"
            label="手机号码"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            min-width="150"
            prop="orgName"
            label="机构名称"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            min-width="150"
            prop="dpnm"
            label="所属部门"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="center"
            min-width="260"
            label="操作"
            fixed="right">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.isRemind" inactive-text="关闭" active-text="开启" inactive-value="0" active-value="1" @change="changeSms(scope.row)"></el-switch>
              <el-button type="danger" size="mini" @click.stop="deleteData(scope.row.id)" style="margin-left: 20px;">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          style="margin: 10px auto"
          background
          :pager-count="5"
          :current-page="pageNum"
          :page-size="pageSize"
          :page-sizes="[10, 20, 30, 40, 50, 100]"
          layout="sizes, total, prev, pager, next"
          :total="total"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </div>
    </el-card>
    <el-dialog
      class="outerDialog custom_dialog"
      title="添加人员"
      width="60%"
      @close="closeAddDialog"
      v-if="addDialogVisible"
      :visible.sync="addDialogVisible">
      <el-form ref="addForm" label-width="100px"  :inline="true" class="demo-form-inline">
        <el-form-item label="人员姓名">
          <el-input v-model="addSearchForm.userName" placeholder="人员姓名" clearable></el-input>
        </el-form-item>
        <el-form-item label="所属部门">
          <el-input v-model="addSearchForm.dpnm" placeholder="所属部门" clearable></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" size="mini" @click="searchBtn1">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table
        border
        ref="multipleTable1"
        :height="tableHeight1"
        :data="tableData1"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        v-loading="loading1">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          min-width="100"
          prop="persName"
          label="人员姓名"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          min-width="100"
          prop="sex"
          label="性别"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
             <span v-if="scope.row.sex==1">男</span>
             <span v-else-if="scope.row.sex==2">女</span>
             <span v-else></span>
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          min-width="200"
          prop="mobilenumb"
          label="手机号码"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          min-width="150"
          prop="orgNm"
          label="机构名称"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          min-width="150"
          prop="dpnm"
          label="所属部门"
          show-overflow-tooltip
        ></el-table-column>
      </el-table>
      <el-pagination
        style="margin: 10px auto"
        background
        :pager-count="5"
        :current-page="pageNum1"
        :page-size="pageSize1"
        :page-sizes="[10, 20, 30, 40, 50, 100]"
        layout="sizes, total, prev, pager, next"
        :total="total1"
        @current-change="handleCurrentChange1"
      ></el-pagination>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addSubmit">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="设置提醒日期"
      width="400px"
      :visible.sync="isSetTime">
      <el-form ref="timeForm" label-width="100px">
        <el-form-item label="每月提醒日期" size="mini">
          <el-select
            v-model="time"
            multiple
            collapse-tags
            placeholder="请选择日期">
            <el-option
              v-for="item in timeOptions"
              :key="item"
              :label="item+'号'"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isSetTime = false">取 消</el-button>
        <el-button type="primary" @click="setTimeBtn">确 定</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>
<script>
    import request from '@util/gw_ajax_request'
    export default {
        name: "",
        props: [],
        data() {
            return {
                addDialogVisible:false,
                tableHeight:window.innerHeight-100,
                tableHeight1:500,
                tableData:[],
                tableData1:[],
                loading:false,
                loading1:false,
                pageNum:1,
                pageSize:10,
                total:0,
                pageNum1:1,
                pageSize1:10,
                total1:0,
                searchForm:{
                  userName:"",
                  dpnm:""
                },
                addSearchForm:{
                    userName:"",
                    dpnm:""
                },
                multipleSelection: [],
                isSetTime:false,
                time:[],
                timeOptions:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28],
                tipTime:"",
                timeSelection:[]
            }
        },
        components: {
        },
        computed: {
            persId() {
                return localStorage.getItem("userid")
                    ? localStorage.getItem("userid")
                    : "1098101939614724096";
            },
            orgId() {
                return localStorage.getItem('currentOrgId') ? localStorage.getItem("currentOrgId") : "";
            },
            organCode() {
                return localStorage.getItem('currentRlcode') ? localStorage.getItem('currentRlcode') : ''
            },
        },
        mounted() {
           this.getCurTime();
           this.initTableData();
        },
        methods: {
            batchDelete(){
                var list = [];
                if(!this.timeSelection || this.timeSelection.length==0){
                    this.$message.warning("请选择数据");
                    return false;
                }
                this.timeSelection.forEach((item)=>{
                    list.push(item.id);
                })
                var _self = this;
                this.$confirm(`确定要批量删除选中的数据吗？, 是否继续?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    request.post('/bis/insp/mtprg/sms/deleteBatch',list).then(res=>{
                        if(res.success){
                            _self.initTableData();
                            _self.$refs.multipleTable.clearSelection();
                        }else{
                            _self.$message.error(res.message);
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            batchStart(type){
                var list = [];
                if(!this.timeSelection || this.timeSelection.length==0){
                    this.$message.warning("请选择数据");
                    return false;
                }
                this.timeSelection.forEach((item)=>{
                  if(item.isRemind!=type){
                     list.push({
                         id:item.id,
                         isRemind:type
                     });
                  }
                })
                var _self = this;
                this.$confirm(`确定要批量${type=='1'?'启动':'关闭'}吗？已经${type=='1'?'启动':'关闭'}的数据会自动过滤, 是否继续?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    request.post('/bis/insp/mtprg/sms/updateBatch',list).then(res=>{
                        if(res.success){
                            _self.initTableData();
                            _self.$refs.multipleTable.clearSelection();
                        }else{
                            _self.$message.error(res.message);
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            handleTimeSelectionChange(val){
                this.timeSelection = val;
            },
            getCurTime(){
                this.tipTime = "";
                var list = [];
                request.get('/bis/insp/smsTm/list').then(res=>{
                    if(res.success){
                        if(res.data && res.data.length>0){
                           res.data.forEach((item)=>{
                               list.push(item.daysOfMonth);
                           })
                           this.time = list;
                           this.tipTime = `(当前短信提醒日期为每月${list.join("、")}号)`
                        }else{
                           this.time = [];
                        }
                    }else{
                        this.time = [];
                        this.$message.error(res.message);
                    }
                })
            },
            setTimeBtn(){
                if(!this.time || this.time.length==0){
                    this.$message.warning("请选择每月提醒日期");
                    return false;
                }
                var list = [];
                this.time.forEach((item)=>{
                   list.push({
                       daysOfMonth:item
                   });
                })
                var _self = this;
                this.$confirm(`确定要设置每月${this.time.join(",")}为提醒日期吗, 是否继续?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    request.post('/bis/insp/smsTm/batch',list).then(res=>{
                        if(res.success){
                            _self.getCurTime();
                            _self.isSetTime = false;
                            _self.$message.success("设置成功");
                        }else{
                            _self.$message.error(res.message);
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            setTime(){
                this.isSetTime = true;
                this.time = [];
            },
            changeSms(row){
                var _self = this;
                var obj = {
                  id:row.id,
                  isRemind:row.isRemind
                }
                request.post('/bis/insp/mtprg/sms/update',obj).then(res=>{
                    if(!res.success){
                        row.isRemind = row.isRemind=="0"?"1":"0";
                    }
                })
            },
            handleSelectionChange(val){
                this.multipleSelection = val;
            },
            deleteData(id){
                var _self = this;
                this.$confirm('确定删除该条数据吗, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    request.post('/bis/insp/mtprg/sms/delete/'+id).then(res=>{
                        if(res.success){
                            _self.initTableData();
                        }else{
                            _self.$message.error(res.message);
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            addSubmit(){
                var _self = this;
                if(this.multipleSelection && this.multipleSelection.length>0){
                    this.multipleSelection.forEach((item,index) =>{
                        item.userId =  item.guid;
                    })
                    request.post('/bis/insp/mtprg/sms/batch',this.multipleSelection).then(res=>{
                        if(res.success){
                            _self.initTableData();
                            _self.addDialogVisible = false;
                            _self.$refs.multipleTable1.clearSelection();
                        }else{
                            _self.$message.error(res.message);
                        }
                    })
                }else{
                    _self.$message.warning("请选择数据");
                }
            },
            closeAddDialog(){
                this.addDialogVisible = false;
            },
            initTableData(){
                this.searchForm.pageNum = this.pageNum;
                this.searchForm.pageSize = this.pageSize;
                this.loading = true;
                var _self = this;
                request.post('/bis/insp/mtprg/sms/findPage',this.searchForm).then(res=>{
                    if(res.success){
                        _self.tableData = res.data.list;
                        _self.total = res.data.total;
                        _self.loading = false;
                    }else{
                        _self.$message.error(res.message)
                    }
                })
            },
            getAllPersName(){
                this.addSearchForm.pageNum = this.pageNum1;
                this.addSearchForm.pageSize = this.pageSize1;
                this.loading1 = true;
                var _self = this;
                request.post('/bis/insp/mtprg/sms/listByNotMonthReport',this.addSearchForm).then(res=>{
                    if(res.success){
                        _self.tableData1 = res.data.list;
                        _self.total1 = res.data.total;
                        _self.loading1 = false;
                    }else{
                        _self.$message.error(res.message)
                    }
                })
            },
            handleCurrentChange(val){
                this.pageNum = val;
                this.initTableData();
            },
            handleCurrentChange1(val){
                this.pageNum1 = val;
                this.getAllPersName();
            },
            searchBtn(){
                this.initTableData();
            },
            searchBtn1(){
                this.getAllPersName();
            },
            addBtn(){
                this.multipleSelection = [];
                this.addSearchForm = {};
                this.addDialogVisible = true;
                this.getAllPersName();
            }
        }
    }
</script>

<style lang="scss" scoped>
  .monthReport{
     width: 100%;
     height:100%;
     margin: 0;
     padding: 0;
  }
  .box-card{
     width: calc(100% - 60px);
     height:calc(100% - 20px);
     margin: 0 auto;
     margin-top: 10px;
  }
  .title_monthReport{
     text-align: center;
     padding: 10px;
  }
  .note_monthReport{
    width: 100%;
    background-color: rgba(255, 251, 230, 1);
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(255, 229, 143, 1);
    color: rgba(0, 0, 0, 0.447058823529412);
    font-size: 14px;
    padding: 10px;
  }
  .note_monthReport p:first-child{
     font-size: 16px !important;
  }
  .monthReport{
    .demo-form-inline{
      .el-form-item{
         margin-bottom: 5px;
         margin-top: 8px;
      }
    }
  }
</style>