|
@@ -0,0 +1,223 @@
|
|
|
+<template>
|
|
|
+ <view class="popup-page" v-show="showModalStatus">
|
|
|
+ <view class="popup-box" v-show="showModalStatus">
|
|
|
+ <view class="item-box" v-for="(item,index) in planList">
|
|
|
+ <view class="radio-item" @click="toggleSelect(item,index)">
|
|
|
+ <image class="icon" :src="`/static/${item.isChecked ? 'check-radio' : 'check-no'}.png`"></image>
|
|
|
+ </view>
|
|
|
+ <text :class="item.nameClass">{{item.name}}({{item.startDate}} ~ {{item.endDate}})</text>
|
|
|
+ <view class="compeleted-box" v-if="item.isCompeleted">
|
|
|
+ <text class="compeleted-text" >已完成</text>
|
|
|
+ </view>
|
|
|
+ <view class="continued-box" v-if="item.isContinued">
|
|
|
+ <text class="continued-text" >进行中</text>
|
|
|
+ </view>
|
|
|
+ <image class="checked-pic" v-if="item.isContinued" src="../../../static/checkStatus.png"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="btn-confirm" @click="saveChange">
|
|
|
+ <text class="btn-text">确定</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ props:{
|
|
|
+ situationID:String,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ currentType:this.type,//当前类型
|
|
|
+ selectedPlanID:'',//选择的计划id
|
|
|
+ showModalStatus:false,//查核计划选择弹框
|
|
|
+ flag:-3,//是否为进行中计划,判断下一个未开始的查核计划
|
|
|
+ planList:[],//查核计划列表
|
|
|
+ arrUnstarted:[],//未开始计划数组
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created: function() {
|
|
|
+ this.$store.dispatch({
|
|
|
+ type: 'situationDetail/commActions',
|
|
|
+ payload: {
|
|
|
+ key: 'planList',
|
|
|
+ data:{
|
|
|
+ situationId:this.situationID
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }).then((data) => {
|
|
|
+ if (data) {
|
|
|
+ this.planList=data.map((item,index)=>{
|
|
|
+ if(item.status==1){
|
|
|
+ this.arrUnstarted.push(item);
|
|
|
+ this.flag=this.arrUnstarted[0].id;
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ id:item.id,
|
|
|
+ name:item.name,
|
|
|
+ startDate:item.startDate,
|
|
|
+ endDate:item.endDate,
|
|
|
+ status:item.status,
|
|
|
+ isCompeleted:item.status==3?true:false,
|
|
|
+ isContinued:item.status==2?true:false,
|
|
|
+ isChecked:false,
|
|
|
+ nameClass:item.id==this.flag?'item-text':'disable-text',
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ show(){
|
|
|
+ this.showModalStatus=true;
|
|
|
+ },
|
|
|
+ hide(){
|
|
|
+ this.showModalStatus=false;
|
|
|
+ },
|
|
|
+ hidePopupBox(){
|
|
|
+ this.hide();
|
|
|
+ },
|
|
|
+ toggleSelect(item,index) {
|
|
|
+ this.planList.map((item,index)=>{
|
|
|
+ item.isChecked=false;
|
|
|
+ });
|
|
|
+ if(item.id==this.flag){
|
|
|
+ this.planList[index].isChecked=true;
|
|
|
+ this.selectedPlanID=item.id;
|
|
|
+ }
|
|
|
+ else{
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ saveChange(){
|
|
|
+ this.$store.dispatch({
|
|
|
+ type: 'situationDetail/commActions',
|
|
|
+ payload: {
|
|
|
+ key: 'planAdvance',
|
|
|
+ data:{
|
|
|
+ checkId:this.selectedPlanID
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }).then((data)=>{
|
|
|
+ if(data){
|
|
|
+ this.hide();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less">
|
|
|
+ .popup-page{
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ position: fixed;
|
|
|
+ top: 0rpx;
|
|
|
+ left: 0rpx;
|
|
|
+ // background: rgba(0,0,0,0.5);
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ .popup-box{
|
|
|
+ width: 100%;
|
|
|
+ position: fixed;
|
|
|
+ top: 0rpx;
|
|
|
+ left: 0rpx;
|
|
|
+ z-index: 2000;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ overflow: hidden;
|
|
|
+ .item-box{
|
|
|
+ width: 100%;
|
|
|
+ height: 87.5rpx;
|
|
|
+ border: 0.62rpx solid #DADEE6;
|
|
|
+ .radio-item {
|
|
|
+ float: left;
|
|
|
+ margin-left: 25rpx;
|
|
|
+ margin-top: 30rpx;
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ width: 25rpx;
|
|
|
+ height: 25rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .item-text{
|
|
|
+ font-size: 22.5rpx;
|
|
|
+ font-family: SourceHanSansCN-Normal, SourceHanSansCN;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #292C33;
|
|
|
+ line-height: 87.5rpx;
|
|
|
+ margin-left: 25rpx;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ .disable-text{
|
|
|
+ font-size: 22.5rpx;
|
|
|
+ font-family: SourceHanSansCN-Normal, SourceHanSansCN;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #666E80;
|
|
|
+ line-height: 87.5rpx;
|
|
|
+ margin-left: 25rpx;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ .compeleted-box{
|
|
|
+ width: 75rpx;
|
|
|
+ height: 31.25rpx;
|
|
|
+ border-radius: 8px;
|
|
|
+ background: rgba(41, 204, 150, 0.1);
|
|
|
+ text-align: center;
|
|
|
+ float: left;
|
|
|
+ margin-top: 28.12rpx;
|
|
|
+ .compeleted-text{
|
|
|
+ font-size: 17.5rpx;
|
|
|
+ font-family: SourceHanSansCN-Medium, SourceHanSansCN;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #29CC96;
|
|
|
+ line-height: 31.25rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .continued-box{
|
|
|
+ width: 75rpx;
|
|
|
+ height: 31.25rpx;
|
|
|
+ border-radius: 8px;
|
|
|
+ background: rgba(255, 204, 102, 0.1);
|
|
|
+ text-align: center;
|
|
|
+ float: left;
|
|
|
+ margin-top: 28.12rpx;
|
|
|
+ .continued-text{
|
|
|
+ width: 75rpx;
|
|
|
+ height: 31.25rpx;
|
|
|
+ font-size: 17.5rpx;
|
|
|
+ font-family: SourceHanSansCN-Medium, SourceHanSansCN;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #FFAA00;
|
|
|
+ line-height: 31.25rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .checked-pic{
|
|
|
+ width: 19.37rpx;
|
|
|
+ height: 14.37rpx;
|
|
|
+ float: right;
|
|
|
+ margin-top: 36.87rpx;
|
|
|
+ margin-right: 25rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .btn-confirm {
|
|
|
+ width: 750rpx;
|
|
|
+ height: 75rpx;
|
|
|
+ background: #3377FF;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0rpx;
|
|
|
+
|
|
|
+ .btn-text {
|
|
|
+ font-size: 22.5rpx;
|
|
|
+ font-family: SourceHanSansCN-Normal, SourceHanSansCN;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 75rpx;
|
|
|
+ margin-left: 352.5rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|