TS

TS

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import ListByCard from './listByCard.vue'
import ListByTable from './listByTable.vue'
import BelongFrameworkFilter from '@xmentor/core/src/components/BelongFramework/Filter'
import {
  queryTrainingPlanYearOpts,
  queryTrainingPlanIndexList,
  deletePlan,
  cancelPlan
} from '@/services/plan.js'
import { PLAN_MANAGE_STATUS } from '@/constance/index.js'
import ApproveTaskConfig from '@xmentor/core/src/components/ApproveTask/ApproveTaskConfig.vue'
import ComMixin from '@/views/modules/plan/utils/commonMixin.ts'
import ListMixins from './listMixins'

@Component({
  name: 'PlanHomeList',
  components: {
    ListByCard,
    ListByTable,
    BelongFrameworkFilter,
    ApproveTaskConfig
  },
  mixins: [ComMixin, ListMixins]
})
export default class PlanHomeList extends Vue {
  mode = 'card' // 当前视图标识

  keyword = ''

  yearOptList: Array<any> = [] // 计划年度可选项

  yearSelKeys: Array<string> = [] // 计划年度选中的key集合

  structSelFullInfo: Array<any> = [] // 所属架构选中的集合

  containSub = 0 // 所属架构是否包含下级的开关，1表示开启

  statusOptMap: Array<any> = PLAN_MANAGE_STATUS // 状态可选项

  statusSelKeys: Array<string> = [] // 状态选中的key集合

  searchResList: Array<any> = [] // 查询结果数据

  reloadListKey = 0

  pageNodeKey = 'PAGPLAN'

  pageNo = 1

  pageSize = 50

  totalCount = 0

  loadingResult = false

  sortOrderAttr = '' // 列表页表头排序字段名

  sortOrderBy = 'normal' // 列表页表头排序方式

  filterChecked: Array<any> = [] // 审批状态表头过滤集合

  approveType = '' // 审批流类型

  canShowApproveDg = false // 显示审批流弹窗页

  apprBatchId = ''

  processType = ''

  tagRow: any = {}

  async mounted() {
    this.loadingResult = true
    const { code, body } = await queryTrainingPlanYearOpts()
    if ([0, '0', 200, 10001].includes(code)) {
      const { years, isStatusFlag } = body
      // 如果isStatusFlag为true，计划年度为当前年；false则选中后端返回的全部年份
      this.yearSelKeys = isStatusFlag ? [String(new Date().getFullYear())] : years?.map((y: number) => y + '')
      this.yearOptList = years?.map((y: number) => {
        return {
          label: y + (this as any).$t('PAGCOMMONEPSINFO_0384'),
          value: y + ''
        }
      })
    }
    await this.handleQueryList()
  }

  // 子组件emit事件
  async backFromDgConfirm(action: string, data?: any) {
    // 重新查询
    if (action === 'search') await this.handleQueryList()
    // 子组件全部初始化完毕
    if (action === 'loadDown') this.childLoadingDone(data)
    // 删除操作
    if (action === 'delete') {
      this.handleAxiosDeletePlan(action, {
        title: (this as any).$t('PAGCOMMONEPSINFO_0128'),
        content: (this as any).$t('Training_0267'),
        row: data,
        params: { id: data.id }
      })
    }
    // 作废审批操作
    if (action === 'cancelApprove') this.handleApplyApproveAction(data)
    // 表头排序
    if (action === 'sortChange') await this.handleSortChange(data)
    // 表头筛选
    if (action === 'filterChange') await this.handleFilterChange(data)
  }

  // 处理审批流
  handleApplyApproveAction(info: any) {
    const { row, approveType } = info
    this.tagRow = row
    this.approveType = approveType
    this.canShowApproveDg = true
  }

  // 审批流弹窗回显
  handleApproveSuccess(hasApproval: boolean) {
    (this as any).$refs.approveTaskConfig.confirmAction(hasApproval, async(approveData: any) => {
      const { apprBatchId, processType } = approveData
      if (this.approveType === 'manageCancel') {
        const content = hasApproval
          ? (this as any).$t('Training_0272')
          : (this as any).$t('Training_0269')
        this.handleAxiosDeletePlan('cancel', {
          title: (this as any).$t('Training_0268'),
          content,
          row: this.tagRow,
          params: {
            id: this.tagRow.id,
            apprBatchId,
            processType
          }
        })
      }
    })
  }

  // 删除/作废回调事件
  handleAxiosDeletePlan(action: string, data: any) {
    const { title, content, row, params } = data;
    (this as any).openConfirmDialog('warn', {
      title,
      content,
      showCheckBtn: true,
      keepConfirm: true,
      checkCb: () => {
        const { id, planStatus, approveStatus } = row
        const path = action === 'delete' && planStatus === 1 && ![1, 4, 7, 10].includes(approveStatus) ? 'add' : 'detail'
        const { href } = this.$router.resolve({
          // 若是删除确认时，且待发布且不是审批中，跳转到编辑页，其他场景跳转到详情页
          path: `/${process.env.VUE_APP_NAME}/plan/${path}`,
          query: { id }
        })
        window.open(href, '_blank')
      },
      okCb: async() => {
        const fn = action === 'delete' ? deletePlan : cancelPlan
        const { code, message } = await fn(params)
        if ([0, '0', 200, 10001].includes(code)) {
          (this as any).$FeedbackDialog.remove();
          (this as any).$Message.success(message)
          await this.handleQueryList()
        }
      }
    })
  }

  // 查询
  async handleQueryList() {
    this.loadingResult = true
    const params = this.getSearchParams()
    const { code, body } = await queryTrainingPlanIndexList(params)
    if ([0, '0', 200, 10001].includes(code)) {
      const { total, pageSize, pageNum } = body
      // 对接口数据进行加工，方便卡片/列表组件共同使用
      this.searchResList = body?.list.map((item:any) => {
        const { planStatus, approveStatus, planChargePersonName: pName } = item
        // 转义状态码值
        item.res_status_desc = this.statusOptMap.find((tag:any) => tag.value === planStatus)?.label
        item.planYear = item.planYear + (this as any).$t('PAGCOMMONEPSINFO_0384')
        if (!pName) item.planChargePersonName = '-'
        // 审批流开关状态会影响操作列按钮点击逻辑，具体请看SVN补充文档的“计划操作”sheet
        const { btnTypeEdit, btnTypeCancel, btnTypeDelete } = (this as any).handleBtnByApvSwitch(planStatus, approveStatus)
        item.btnTypeEdit = btnTypeEdit
        item.btnTypeCancel = btnTypeCancel
        item.btnTypeDelete = btnTypeDelete
        return item
      })
      this.totalCount = total
      this.pageSize = pageSize
      this.pageNo = pageNum
      this.reloadListKey += 1 // 刷新子组件数据并触发mounted的emit事件
    }
    this.loadingResult = false
  }

  getSearchParams() {
    return {
      keyword: this.keyword,
      mode: this.mode === 'card' ? 1 : 2,
      orderAttr: this.sortOrderAttr,
      orderBy: this.sortOrderBy === 'normal' ? '' : this.sortOrderBy, // 不要传normal，后端不识别
      pageNo: this.pageNo,
      pageSize: this.pageSize,
      planStatusArr: this.statusSelKeys,
      planYearArr: this.yearSelKeys.map((y: string) => Number(y)),
      structFullId: this.structSelFullInfo[0]?.structInfo[0]?.structFullId,
      containSub: this.containSub,
      approveStatus: this.filterChecked.map((item: any) => typeof item !== 'number' ? 12 : item)
    }
  }

  // 审批状态表头过滤
  async handleFilterChange(colInfo: any) {
    const { filterChecked, pageSize } = colInfo
    this.filterChecked = filterChecked
    this.pageNo = 1
    this.pageSize = pageSize
    await this.handleQueryList()
  }

  // 表头排序
  async handleSortChange(colInfo: any) {
    const { sortOrderAttr, sortOrderBy, pageSize } = colInfo
    this.sortOrderAttr = sortOrderAttr
    this.sortOrderBy = sortOrderBy
    this.pageNo = 1
    this.pageSize = pageSize
    await this.handleQueryList()
  }

  // 翻页
  async onPageIndexChange(val: number) {
    this.pageNo = val
    await this.handleQueryList()
  }

  // 处理所属架构是否包含下级
  handleChangeBe(resArr: Array<any>) {
    const { containSub, structInfo } = resArr[0]
    this.containSub = structInfo?.length ? containSub : 0
  }

  // 改变每页的条数
  async onPageSizeChange(val: number) {
    this.pageNo = 1
    this.pageSize = val
    await this.handleQueryList()
  }

  // 卡片或者列表组件加载完毕
  childLoadingDone(childInfo: any) {
    const { isLoading } = childInfo
    this.loadingResult = isLoading
  }

  // 切换tree和table区域
  toggleResultBox(action: string) {
    if (this.mode !== action) {
      this.loadingResult = true
      this.mode = action
      this.$nextTick(() => {
        // 如果查询无结果，直接关闭loading
        if (!this.searchResList.length) {
          this.loadingResult = false
        }
      })
    }
  }

  handleExport() {
    const params = this.getSearchParams();
    (this as any).exportPlanList({ ...params, total: this.totalCount })
  }

  // 去新建页面
  linkToAddPage() {
    this.$router.push({
      path: `/${process.env.VUE_APP_NAME}/plan/add`
    })
  }

  // 下级培训计划
  linkToSubordinateTrain() {
    this.$router.push({
      path: `/${process.env.VUE_APP_NAME}/plan/subordinateTrain`
    })
  }
}
</script>