qa-prevention-gwj-first-app/pages/application/key-project-management/penalty-management/detail-list.vue

<template>
  <view>
    <cu-custom bgColor="bg-gradual-blueness" :isBack="true" :isRingt="true">
      <block slot="backText">返回</block>
      <block slot="content">处罚管理</block>
    </cu-custom>
    <view class="top-fixed">
      <scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
        <view class="flex text-center">
          <view class="cu-item flex-sub" :class="index==TabCur?'text-blue cur':''" v-for="(item,index) in tabNav" :key="index" @tap="tabSelect" :data-id="index">
            {{tabNav[index]}}
          </view>
        </view>
      </scroll-view>
      <view class="line"></view>
    </view>
    <scroll-view class="dy-scroll" @scrolltolower="scrolltolower" scroll-y :style="'top:'+sTop+'px;height:calc(100vh - '+totalHeight+'px)'">
      <view v-if="list.length>0" >
        <view class="dy-list">
          <view v-for="(item,index) of list" :key="index" :data-id="item.INSPECTION_ID" @click="$noMultipleClicks(goToDetail,item.KEYPROJECTPUNISH_ID)" class="dy-list-item p20">
            <view class="dy-title-flex align-center">
              <text>{{item.HIDDENDESCR}}</text>
            </view>
            <view class="dy-subtitle-flex">
              <text>被处罚单位：{{ item.UNITS_NAME }}</text>
              <text v-show="item.ISPUNISH==='1'&&item.HANDLED==='0'">被处罚人：{{ item.PERSON_NAME }}</text>
            </view>
            <view v-show="item.ISPUNISH==='1'" class="dy-subtitle-flex">
              <text>
                处罚原因：{{ item.REASON }}
              </text>
            </view>
            <view v-show="item.ISPUNISH" class="dy-subtitle-flex">
              <text>下发人：{{ item.CREATOR_NAME }}</text>
			  <text>是否处罚：{{ item.ISPUNISH == "2" ? "否":"是" }}</text>
            </view>
            <view class="dy-subtitle-flex" style="height: 34upx;">
              <text>处罚处理状态：{{ item.ISPUNISH == "2" ? "不处罚":item.HANDLED == "1" ?"已完成":item.ISPUNISH == "1" ? "待反馈" : "待处罚" }}</text>
              <text>
				  <button 
				  v-if="!item.ISPUNISH"
				  class="cu-btn bg-red margin-tb-sm sm" 
				  @click.stop="fnModalShow(item)">
				  	处罚
				  </button>
                <button style="margin-left: 20upx;" class="cu-btn bg-blue margin-tb-sm sm" @click="$noMultipleClicks(goToDetail,item.HIDDEN_ID)">查看</button>
              </text>
            </view>
          </view>
        </view>
      </view>
      <view v-else-if="dataFlag=='noData'" class="dy-null">
        <view class="dy-null-img">
          <image :src="background[dataFlag].url" mode=""></image>
        </view>
        <view class="dy-null-title">
          {{background[dataFlag].msg}}
        </view>
      </view>
      <view class="cu-tabbar-height"></view>
    </scroll-view>
	<view :class="['cu-modal',{'show':modalShow}]" v-if="modalShow">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">处罚</view>
					<view class="action" @tap="modalShow = false">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="wui-form-list">
					<view class="cu-form-group">
						<view class="title">是否进行罚款：</view>
						<radio-group @change="changeRadioGroup($event)">
						  <label class="radio"><radio value="1" :checked="punishForm.ISPUNISH === '1'" />是</label>
						  <label class="radio"><radio value="2" :checked="punishForm.ISPUNISH === '2'" />否</label>
						</radio-group>					
					</view>
					<view v-if="punishForm.ISPUNISH==1">
						<view class="cu-form-group">
							<view class="title">处罚原因</view>
							<input v-model="punishForm.REASON" placeholder="请输入处罚原因"></input>
						</view>
						<view class="cu-form-group">
							<view class="title">处罚金额(元)</view>
							<input type="number" v-model="punishForm.AMOUT" placeholder="请输入处罚金额" @blur="checkNumber"></input>
						</view>
						<view class="cu-form-group">
							<view class="title">被处罚单位</view>
							<input disabled v-model="punishForm.RECTIFICATIONDEPT_NAME" placeholder="请输入被处罚单位"></input>
						</view>
						<view class="cu-form-group">
							<view class="title">被处罚人</view>
							<input disabled v-model="punishForm.RECTIFICATIONOR_NAME" placeholder="请输入被处罚人"></input>
						</view>
						<view class="cu-form-group">
							<view class="title">下发处罚时间</view>
							<ruiDatePicker fields="minute" :value="punishForm.DATE || '请选择'" @change="changeStartDate">
							</ruiDatePicker>
						</view>
					</view>
	
				</view>
				<view class="cu-bar bg-white justify-between">
					<view class="action" style="flex-basis: 100%">
						<button class="cu-btn" style="flex-basis: 50%" @click="modalShow = false">关闭</button>
						<button class="cu-btn line-green text-green" style="flex-basis: 50%"
							@click="fnSubmit">确认</button>
					</view>
				</view>
			</view>
		</view>
	
  </view>
</template>

<script>
import {
  basePath,corpinfoId,loginSession,formatDate,loginUser,loginUserId
} from '@/common/tool.js';
import tkiTree from "@/components/select-tree/select-tree.vue"
import ruiDatePicker from '@/components/rattenking-dtpicker/rattenking-dtpicker.vue'
export default {
  components: {
    tkiTree,
    ruiDatePicker,
  },
  data() {
    return {
      showRight: false,
      dataFlag:'noData',
      sTop:0,
      totalHeight:0,
      list:[],//返回数据
      page:1,//分页参数--页数
      rows:10,//分页参数--每页数据条数
      totalCount:0,//分页参数--初始化页数
      isEnd:false,//防止多次刷新
      totalPage: 0, //分页参数--分页数量
      NameLikes : '',
      OUTSOURCED_ID : '',
      noClick:true,
      TabCur: 0,
      scrollLeft: 0,
      tabNav: ['待反馈处罚', '已完成处罚'],
	  modalShow: false,
	  punishForm: {
	  	HIDDEN_ID: '',
	  	ISPUNISH: '',
	  	RECTIFICATIONDEPT_NAME: '',
	  	RECTIFICATIONOR_NAME: '',
	  	REASON: '',
	  	AMOUT: '',
	  	DATE: formatDate(new Date(), 'yyyy-MM-dd hh:mm'),
	  },
    }
  },
  onReady() {
    let that=this;
    let CustomBar = this.CustomBar;
    uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
      success(res) { //成功回调函数
        let titleH=uni.createSelectorQuery().select(".top-fixed"); //想要获取高度的元素名（class/id）
        titleH.boundingClientRect(data=>{
          that._data.sTop=data.height  //计算高度：元素高度=窗口高度-元素距离顶部的距离（data.top）
          that.totalHeight = data.height+CustomBar
        }).exec()
      }
    })
  },
  onLoad(e) {//页面第一次加载时触发，从跳转页面返回时不能触发，可以传递参
    this.OUTSOURCED_ID = e.OUTSOURCED_ID
  },
  onShow() {
    //页面显示或从后台跳回小程序时显示此页面时触发，从跳转页面返回时触发，不能传递参数
    var _this = this;
    _this.background = require('@/common/background.json');
    _this.showCount = 10;
    _this.currentPage = 1;
    _this.list = [];
    _this.isEnd = false;
    _this.getData();
    loginSession();
  },
  methods: {
    tabSelect(e) {
      this.TabCur = e.currentTarget.dataset.id;
      this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
      this.getQuery();
    },
	//跳转事件
	goToDetail(e) {
		uni.navigateTo({
			url: '/pages/application/key-project-management/hidden-management/detail?HIDDEN_ID=' + e +
				'&OUTSOURCED_ID=' + this.OUTSOURCED_ID + '&TabCur=2' 
		});
	},
	fnModalShow(item) {
		this.punishForm.HIDDEN_ID = item.HIDDEN_ID
		this.punishForm.RECTIFICATIONDEPT_NAME = item.UNITS_NAME
		this.punishForm.RECTIFICATIONOR_NAME = item.RECTIFICATIONOR_NAME
		this.punishForm.ISPUNISH = '2'
		this.modalShow = true
	},
	changeStartDate(e) {
		this.punishForm.DATE = e
		this.$forceUpdate(); //强制刷新
	},
    getQuery(){	//搜索按钮事件
      var _this = this;
      _this.showCount = 10;
      _this.currentPage = 1;
      _this.list = [];
      _this.isEnd = false;
      _this.getData();
    },
    // 滑动到底方法
    scrolltolower(){
      var _this = this;
      _this.showCount = 10;
      _this.currentPage = _this.currentPage + 1;
      _this.isEnd = false;
      if(_this.totalPage >= _this.currentPage){
        _this.getData();//开始分页查询
      }
    },
    getData(){
      var _this = this;
      if (_this.isEnd) {
        return
      }else{
        this.isEnd =true;
      }
      uni.showLoading({
        title:"加载中..."
      });//加载中动画
      uni.request({
        url: basePath +'/app/keyprojectcheck/punishlist?showCount='+_this.showCount+'&currentPage='+_this.currentPage,
        method: 'POST',
        dataType: 'json',
        header: {
          'Content-type':'application/x-www-form-urlencoded'
        },
        data: {
          KEYWORDS : _this.NameLikes, //关键字模糊查询
          CORPINFO_ID:corpinfoId,
          OUTSOURCED_ID:this.OUTSOURCED_ID,
          CREATOR:loginUserId,
          HANDLED:Number(this.TabCur) + 1
        },
        success: (res) => {
          uni.hideLoading();//结束加载中动画
          if (res.data != null) {
            _this.totalPage = res.data.page.totalPage;
            if(_this.list.length == 0){
              _this.list = res.data.varList;
            }else{
              if(res.data.varList != null){
                _this.list2 = res.data.varList;
                _this.list = _this.list.concat(_this.list2);
              }
            }
          }
        }
      })
    },
	fnSubmit() {
		var _this = this
		console.log(this.punishForm)
		//如果处罚，添加罚单
		if (this.punishForm.ISPUNISH === "1") {
			for (const key in this.punishRules) {
				if (!this.punishForm[key]) {
					uni.showToast({
						title: this.punishRules[key],
						icon: 'none'
					})
					return
				}
			}
			uni.request({
				url: basePath + '/app/keyprojectpunish/add',
				method: 'POST',
				header: {
					'Content-type': 'application/x-www-form-urlencoded'
				},
				data: {
					...this.punishForm,
					CORPINFO_ID: corpinfoId,
					CREATOR: loginUserId,
					OPERATOR: loginUserId,
				},
				success: (res) => {
					
					if ("success" == res.data.result) {
						_this.editHiddenIspunish(1);
						_this.punishForm= {
							HIDDEN_ID: '',
							ISPUNISH: '',
							RECTIFICATIONDEPT_NAME: '',
							RECTIFICATIONOR_NAME: '',
							REASON: '',
							AMOUT: '',
							DATE: formatDate(new Date(), 'yyyy-MM-dd hh:mm'),
						}
					} else {
						uni.showToast({
							title: res.data.msaesge,
							duration: 2000
						});
					}
				}
			});
		}else {
			_this.editHiddenIspunish(2)
		}
			
	},
	editHiddenIspunish(Ispunish){
		// 如果不处罚 修改隐患
		uni.request({
		  url: basePath + '/app/keyprojectcheck/editHiddenIspunish',
		  method: 'POST',
		  header: {
		    'Content-type': 'application/x-www-form-urlencoded'
		  },
		  data: {
			  ...this.punishForm,
			  ISPUNISH:Ispunish,
			  PUNISH_PERSON:loginUserId
		  },
		  success: (res) => {
			this.modalShow = false
			this.getQuery()
		  }
		});
	},
	changeRadioGroup(e){
	  if(this.TabCur == 2) return
	  this.punishForm.ISPUNISH = e.detail.value
	},
	checkNumber(e){
		var reg = /^[0-9]+(\.[0-9]{1,2})?$/;
		if(!(reg.test(e.detail.value))){
			uni.showToast({
				title: "处罚金额只能输入整数或两位小数",
				icon: 'none'
			})
			this.punishForm.AMOUT = 0;
		}
	}
  }
}
</script>

<style>
.dy-card {
  background-color: #fff;
  border-radius: 10upx;
  margin: 30upx
}

.dy-card-title {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #eee;
  min-height: 80upx;
  line-height: 80upx;
  padding: 0 30upx;
}

.dy-card-content {
  padding: 0upx 30upx 30upx;

}

.dy-card-content-item {
  margin-top: 20upx;
}

.dy-card-content-item .title {
  display: flex;
  align-items: center;
}

.dy-card-content-item .title .l {
  width: 10upx;
  height: 30upx;
  border-radius: 20upx;
  background-color: #666;
  margin-right: 10upx;
}

.dy-card-content-item .content {
  background-color: #F1F1F1;
  padding: 10upx 14upx;
  margin-top: 14upx;
  line-height: 1.6;
}

.dy-card-content-item .name text {
  background-color: #F1F1F1;
  padding: 10upx 14upx;
  margin-top: 14upx;
  line-height: 1.6;
  display: inline-block;
}

.dy-card-foot {
  border-top: 1px solid #eee;
  padding: 30upx;
}
.cu-modal{
  z-index: 0;
}
</style>