soc_app/src/views/menu/rehearsalTask/optimal.vue

<template>
  <div>
    <div class="topBox">
      <NavBar />

      <van-row>
        <van-col span="24">
          <org-tree v-model="cascaderValue" :name="'sss'" @changeItem="getDataList"></org-tree>
        </van-col>
      </van-row>

      <van-row>
        <van-col span="12">
          <!-- <van-field
            v-model="currentDate"
            label-width="5em"
            label="开始月份"
            placeholder=""
            :disabled="showDate"
            @click="showDate = true"
          >
            <van-icon name="arrow-down" slot="button"
          /></van-field> -->
          <van-cell title="开始月份" @click="showDate = true" is-link arrow-direction="down" :value="currentDate" />

          <van-popup v-model="showDate" round position="bottom">
            <!-- :columns="yearColumns" -->
            <van-datetime-picker
              v-model="presentDate"
              show-toolbar
              @cancel="onCancel"
              :formatter="formatter"
              type="year-month"
              @confirm="onDateConfirm"
              confirm-button-text="确定"
              :default-index="yearSelect"
              title="开始月份"
            />
          </van-popup>
        </van-col>
        <van-col span="12">
          <!-- <van-field
            v-model="endDate"
            label-width="5em"
            label="结束月份"
            placeholder=""
            :disabled="endShowDate"
            @click="endShowDate = true"
          >
            <van-icon name="arrow-down" slot="button"
          /></van-field> -->
          <van-cell title="结束月份" @click="endShowDate = true" is-link arrow-direction="down" :value="endDate" />

          <van-popup v-model="endShowDate" round position="bottom">
            <!-- :columns="yearColumns" -->
            <van-datetime-picker
              v-model="presentEndDate"
              show-toolbar
              @cancel="onCancel"
              type="year-month"
              :formatter="formatter"
              @confirm="onEndDateConfirm"
              confirm-button-text="确定"
              :default-index="yearSelect"
              title="结束月份"
            />
          </van-popup>
        </van-col>
      </van-row>
      <van-row>
        <van-col span="24">
          <van-cell title="演练项目" @click="showStatus = true" is-link arrow-direction="down" :value="fieldValue" />

          <van-popup v-model="showStatus" round position="bottom">
            <van-picker
              title="演练项目"
              show-toolbar
              :columns="columns"
              @confirm="onConfirm"
              confirm-button-text="确定"
              @cancel="onCancel"
              :close-on-click-overlay="false"
            />
          </van-popup>
        </van-col>
      </van-row>
      <van-row>
        <van-col span="24">
          <van-tabs v-model="activeAl" @click="tbsAlHandler">
            <van-tab name="0" title="普通案例"></van-tab>
            <van-tab name="1" title="行社优秀"></van-tab>
            <van-tab name="3" title="地区优秀"></van-tab>
            <van-tab name="5" title="省级优秀"></van-tab>
          </van-tabs>
        </van-col>
        <van-col span="24" v-if="subTabList && subTabList.length > 0">
          <van-tabs v-model="activeSubTab" @click="tbsSubHandler">
            <van-tab :key="item.name" v-for="item in subTabList" :name="item.name" :title="item.title"></van-tab>
          </van-tabs>
        </van-col>
      </van-row>
    </div>
    <div class="navBarclas">
      <van-list
        v-model="loading"
        :immediate-check="false"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-panel :title="item.title" v-for="item in taskList" :key="item.id" class="card" status="状态">
          <template #header>
            <div class="titleClass">
              <div class="title">{{ item.title }}</div>
              <div>
                <van-button                 
                  type="info"
                  v-if="canCancel(item)"
                  size="small"
                  @click="cancelPromo(item.id)"
                  >{{ cancelBtnText }}</van-button
                >
                <van-button  style="margin-left: 10px" type="info" v-if="canPromo(item)" size="small" @click="commentSign(item.id)">{{
                  promoBtnText
                }}</van-button>
              </div>
            </div>
          </template>
          <div>
            <div class="mainItem" @click="goInfo(item.id)">
              <div>单位名称</div>
              <div>{{ item.orgName }}</div>
            </div>
            <div class="mainItem" @click="goInfo(item.id)">
              <div>演练项目</div>
              <div>{{ item.typeText }}</div>
            </div>
            <div class="mainItem" @click="goInfo(item.id)">
              <div>评分</div>
              <div>{{ item.commentScore }}</div>
            </div>
            <div class="mainItem" @click="goInfo(item.id)">
              <div>评优状态</div>
              <div>{{ item.recStatusText }}</div>
            </div>
          </div>
        </van-panel>
      </van-list>
    </div>
  </div>
</template>
<script>
import NavBar from '@/components/NavBar'
import { Col, Row, Cascader, Dialog, DatetimePicker, Icon, Picker } from 'vant'
import { submitRecTask, getlearningListPage } from '@/api/optimalLearning.js'
import { Toast } from 'vant'
import OrgTree from '@/components/orgTree'
import { newDateMonth } from '@/utils/date.js'
export default {
  data() {
    return {
      orgName: '',
      orgShow: false,
      presentDate: '', //默认时间
      presentEndDate: '', //默认结束时间
      pageNum: 1,
      loading: false, //加载状态
      finished: false, //是否全部加载完毕

      yearColumns: [],

      orgName: JSON.parse(sessionStorage.getItem('SET_USER_ORGNAME')) || '', //机构名称
      cascaderValue: '', //机构ID
      show: false, //机构弹框显示隐藏
      // active: '01-01',
      activeAl: '0',
      activeSubTab: '0',
      fieldNames: {
        text: 'name',
        value: 'id',
        children: 'children'
      },
      taskList: [], //列表数据
      typeValue: ' ', //类型值
      yearSelect: null,
      value1: JSON.parse(sessionStorage.getItem('SET_USER_ID')) || '', //输入框model

      showStatus: false, //状态显示隐藏
      showDate: false, //月份显示隐藏
      endShowDate: false, //月份显示隐藏
      fieldValue: '', //演练项目名称
      drillType: '',
      statusValue: ' ', //状态值
      columns: [], //状态数组
      columnsList: [], //状态数组
      currentDate: newDateMonth(), //年份
      endDate: newDateMonth(), //年份
      subTabList: [],
      promoBtnText: '推优', // 推优按钮文字
      cancelBtnText: '取消行社优秀', // 取消推优按钮文字
      canBtnStatus: null
    }
  },
  components: {
    NavBar,
    OrgTree,
    Dialog,
    Icon,
    DatetimePicker,
    Picker,
    Col,
    Row,
    Cascader
  },

  created() {
    this.presentDate = new Date(newDateMonth())
    this.presentEndDate = new Date(newDateMonth())
  },
  mounted() {
    this.init()
    this.getBtnText()
    this.cascaderValue = JSON.parse(window.sessionStorage.getItem('SET_USER_ORGID')) + ''
  },
  methods: {
    formatter(type, val) {
      if (type === 'month') {
        return `${val}月`
      } else if (type === 'year') {
        return `${val}年`
      }
      return val
    },
    //机构搜索
    getDataList(val) {
      this.cascaderValue = val.id
      this.orgName = val.name
      this.selectListAppHandler()
    },

    //初始化
    init() {
      //获取数据字典
      this.getDictHandler('core_drill_type', res => {
        this.columnsList = res
        this.columns = res.map(item => item.dictLabel)
      })      
      //根据登录人机构 初始化默认选中Tab页
      this.initDefaultActiveTab();
      // 根据第一层默认选中的Tab页 初始化第二层Tab 页值
      this.getSubTabList(this.activeAl)
      //获取分页列表
      this.selectListAppHandler()
    },
    initDefaultActiveTab(){
      let orgType = window.sessionStorage.getItem('SET_USER_ORGTYPE')
      // 省联社
      if(orgType==1){
        this.activeAl="3";
        this.activeSubTab="4"
      }
      // 地区办事处
      if(orgType==2)
      {
        this.activeAl="1";
        this.activeSubTab="2"
      }
      // 行社
      if(orgType==3)
      {
        this.activeAl="0";
        this.activeSubTab="0";
      }
    },
    //0:正常案例、1:行社优秀案例、2:已推荐地区优秀案例、3:地区优秀案例、4:已推荐省级优秀案例、5:省级优秀案例
    //6 不推荐(保留普通案例) 7   不推荐(保留行社优秀案例) 8 不推荐(保留地区优秀案例)'
    canCancel(item) {
      let orgType = window.sessionStorage.getItem('SET_USER_ORGTYPE')
      // 行社用户
      if (orgType == 3) {
        if (item.recStatus == 1 || item.recStatus == 2) {
          return true
        } else {
          return false
        }
        // 办事处用户
      } else if (orgType == 2) {
        if (item.recStatus == 3 || item.recStatus == 4) {
          return true
        } else {
          return false
        }
        // 省联社用户
      } else if (orgType == 1) {
        if (item.recStatus == 5) {
          return true
        } else {
          return false
        }
      }
    },
    canPromo(item) {
      let orgType = window.sessionStorage.getItem('SET_USER_ORGTYPE')
      // 地区
      if (orgType == '2') {
        if (item.recStatus == 2 || item.recStatus == 3) {
          return true
        } else {
          return false
        }
        // 行社
      } else if (orgType == 3) {
        if (item.recStatus == 0 || item.recStatus == 1) {
          return true
        } else {
          return false
        }
        // 省联社
      } else if (orgType == 1) {
        if (item.recStatus == 4) {
          return true
        } else {
          return false
        }
        // 省联社
      }
    },
    getBtnText() {
      this.canBtnStatus = null
      if (this.activeAl == '0' && this.activeSubTab == '0') {
        this.promoBtnText = '推优'
        this.cancelBtnText = ''
      }
      if (this.activeAl == '0' && this.activeSubTab == '6') {
        this.promoBtnText = '重新推优'
        this.cancelBtnText = ''
      }

      if (this.activeAl == '1' && this.activeSubTab == '1') {
        this.promoBtnText = '推荐地区优秀'
        this.cancelBtnText = '取消行社优秀'
        this.canBtnStatus = '6'
      }
      if (this.activeAl == '1' && this.activeSubTab == '7') {
        this.promoBtnText = '重新推荐地区优秀'
        this.cancelBtnText = '取消行社优秀'
        this.canBtnStatus = '6'
      }
      if (this.activeAl == '1' && this.activeSubTab == '2') {
        this.promoBtnText = '行社推地区优秀评定'
        this.cancelBtnText = '取消地区优秀推荐'
        this.canBtnStatus = '7'
      }

      if (this.activeAl == '3' && this.activeSubTab == '3') {
        this.promoBtnText = '推荐省级优秀'
        this.cancelBtnText = '取消地区优秀'
        this.canBtnStatus = '7'
      }
      if (this.activeAl == '3' && this.activeSubTab == '8') {
        this.promoBtnText = '重新推荐省级优秀'
        this.cancelBtnText = '取消地区优秀'
        this.canBtnStatus = '7'
      }
      if (this.activeAl == '3' && this.activeSubTab == '4') {
        this.promoBtnText = '地区推省级优秀评定'
        this.cancelBtnText = '取消省级优秀推荐'
        this.canBtnStatus = '8'
      }

      if (this.activeAl == '5') {
        this.promoBtnText='';
        this.cancelBtnText = '取消省级优秀';
        this.canBtnStatus = '8';
      }
    },
    getSubTabList(activeTab,needReSetActiveSubTab) {
      if (activeTab === '0') {
        if(needReSetActiveSubTab) this.activeSubTab = '0'
        this.subTabList = [
          { name: '0', title: '可推荐行社优秀' },
          { name: '6', title: '不推荐行社优秀' }
        ]
      }
      if (activeTab === '1') {
        if(needReSetActiveSubTab) this.activeSubTab = '1'
        this.subTabList = [
          { name: '1', title: '可推荐地区优秀' },
          { name: '7', title: '不推荐地区优秀' },
          { name: '2', title: '已推荐地区优秀' }
        ]
      }
      if (activeTab === '3') {
        if(needReSetActiveSubTab) this.activeSubTab = '3'
        this.subTabList = [
          { name: '3', title: '可推荐省级优秀' },
          { name: '8', title: '不推荐省级优秀' },
          { name: '4', title: '已推荐省级优秀' }
        ]
      }
      if (activeTab === '5') {
        if(needReSetActiveSubTab) this.activeSubTab = null
        this.subTabList = []
      }
    },
    selectListAppHandler(type = 0, callback = () => {}) {
      let obj = {
        pageNum: this.pageNum,
        pageSize: 10
      }
      if (!type) {
        obj.pageNum = 1
        this.pageNum = 1
        this.taskList = []
      }
      obj.orgId = this.cascaderValue || JSON.parse(window.sessionStorage.getItem('SET_USER_ORGID')) + '' || ''
      if (!this.currentDate || !this.endDate) {
        return Toast('请选择一个月份范围')
      }
      if (this.currentDate) {
        obj.startTime = this.currentDate + '-' + '01'
      }
      if (this.endDate) {
        obj.endTime = this.endDate + '-' + '01'
      }
      if (this.fieldValue) {
        obj.drillType = this.drillType
      }
      if (this.activeAl) {
        obj.recStatus = this.activeAl
      }
      if (this.activeSubTab) {
        //6 不推荐(保留普通案例) 7   不推荐(保留行社优秀案例) 8 不推荐(保留地区优秀案例)
        if (this.activeSubTab === '6' || this.activeSubTab === '7' || this.activeSubTab === '8') {
          obj.unRecStatus = this.activeSubTab
        }
        //推荐状态:0:正常案例、1:行社优秀案例、2:已推荐地区优秀案例、3:地区优秀案例、4:已推荐省级优秀案例、5:省级优秀案例',
        else if (this.activeSubTab === '2' || this.activeSubTab === '4') {
          obj.recStatus = this.activeSubTab
        }
      }

      //获取任务列表
      getlearningListPage(obj).then(res => {
        let { code, rows, total } = res
        if (code == 200) {
          if (type) {
            this.taskList.push(...rows)

            if (this.taskList.length >= total) {
              //已加载完全部数据
              this.finished = true
            } else {
              callback()
            }
          } else {
            this.taskList.push(...rows)
            this.finished = false
            this.loading = false
            if (this.taskList.length >= total) {
              //已加载完全部数据
              this.finished = true
            }

            // this.taskList = rows || []
          }
        } else {
          this.finished = true
          this.taskList = []
        }
      })
    },
    tbsAlHandler(activeTab) {
      console.log('tbsAlHandler', activeTab)
      this.getSubTabList(activeTab,true)
      this.getBtnText()
      this.selectListAppHandler()
    },

    tbsSubHandler() {
      this.getBtnText()
      this.selectListAppHandler()
    },
    //年份选中触发
    onDateConfirm(val) {
      if (this.newDate(val + '') > this.endDate) {
        return Toast('开始月份不能大于结束月份')
      }
      this.currentDate = this.newDate(val + '')
      this.showDate = false
      this.selectListAppHandler()
    },
    //年份选中触发
    onEndDateConfirm(val) {
      if (this.newDate(val + '') < this.currentDate) {
        return Toast('结束月份不能小于开始月份')
      }
      this.endDate = this.newDate(val + '')

      console.log(this.endDate)
      this.endShowDate = false
      this.selectListAppHandler()
    },
    newDate(time) {
      var date = new Date(time)
      var y = date.getFullYear()
      var m = date.getMonth() + 1
      m = m < 10 ? '0' + m : m
      var d = date.getDate()
      d = d < 10 ? '0' + d : d
      return y + '-' + m
    },
    //日期格式
    formatDate(date) {
      return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
    },

    //onLoad下拉刷新
    onLoad() {
      if (this.pageNum == 1) {
        this.pageNum = 2
      }
      this.loading = true
      this.selectListAppHandler(1, () => {
        this.pageNum++
        this.loading = false
      })
    },

    //跳转详情
    // goInfo(id) {
    //   this.$router.push('/rehearsalTasinfo/' + id + '_learning')
    // },
    //评优推优跳转
    commentSign(id) {
      this.$router.push('/commentSign/' + id + '_comment' + '_' + this.activeAl)
    },

    // 取消优秀 / 取消推优
    cancelPromo(id) {
      Dialog.confirm({
        title: '',
        message: `是否` + this.cancelBtnText + '?'
      })
        .then(() => {
          console.log("cancelPromo",1);
          let submitData={
            drillTaskId: id,
            recStatus: this.canBtnStatus
          };
          console.log("cancelPromo",submitData);
          submitRecTask(submitData).then(res => {
            console.log("cancelPromo res",res);
            if (res) {
              Toast(this.cancelBtnText + '成功')
            }
            setTimeout(() => {
              this.selectListAppHandler()
            }, 1000)
          })
          .catch((err) => {
            console.log("cancelPromo err",res);
          })
        })
        .catch(() => {
          // on cancel
        })
    },

    //跳转详情
    goInfo(id) {
      this.$router.push('/commentSign/' + id + '_info1')
    },
    //搜索选择状态时触发
    onConfirm(value, index) {
      this.fieldValue = value
      this.columnsList.forEach(item => {
        if (value == item.dictLabel) {
          this.drillType = item.dictValue
        }
      })

      this.selectListAppHandler()
      this.showStatus = false
    },
    onCancel() {
      this.show = false
      this.typeStatus = false
      this.showDate = false
      this.showStatus = false
      this.endShowDate = false
    }
  }
}
</script>
<style lang="scss" scoped>
.popup {
  height: 40vh;
}
.navBarclas {
  height: calc(100vh - 380px);
  overflow: scroll;
}
.btnf_box {
  background-color: #fff;
}
.card {
  margin: 20px;
  margin-bottom: 0px;
  box-shadow: 0 8px 12px #ebedf0;
}
.btn {
  float: right;
  margin-top: 24px;
  margin-right: 20px;
  box-sizing: border-box;
}
.titleClass {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 20px;
  //   border-bottom: 1px solid #1989fa;

  .title {
    font-size: 30px;
    flex: 1;
    line-height: 50px;
  }
}
.mainItem {
  display: flex;
  font-size: 28px;
  padding: 20px;
  justify-content: space-between;
  .condition {
    color: #1989fa;
    text-decoration: underline;
  }
}
.conditionCls {
  .title {
    color: #1989fa;
    margin-left: 30px;
    // margin-top: 30px;
  }
  .people {
    margin-left: 80px;
    margin-bottom: 30px;
    margin-top: 30px;
  }
}
.topBox {
  // overflow: hidden;
}
:deep.van-field--disabled {
  color: #323233;
}
:deep.van-field--disabled .van-field__label {
  color: #323233;
}
:deep .van-field__control[disabled] {
  color: #323233;
  -webkit-text-fill-color: #323233;
}
.van-cell__value {
  color: black;
  text-align: left;
}
</style>