view.vue 8.63 KB
<template>
  <div v-if="show" class="app-container">
    <el-dialog
      v-model="show" :title="form.memName" close-on-click-modal width="95%"
      draggable
    >
      <div>
        <el-form :inline="true" label-position="top" size="small">
          <el-row style="width: 100%">
            <el-col :span="4">
              <el-form-item label="培训名称" prop="pxName">
                <el-input
                  v-model.trim="queryParams.pxName"
                  style="width: 100%;" @keyup.enter="handeSearch"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="活动报备编号" prop="pxCode">
                <el-input
                  v-model.trim="queryParams.pxCode"
                  style="width: 100%;" @keyup.enter="handeSearch"
                />
              </el-form-item>
            </el-col>
            
            <el-col :span="8" style="display: flex">
              <el-form-item style="width: 100%" label="培训时间" prop="validityDateRange" label-width="">
                <el-date-picker
                  v-model="validityDateRange[0]"
                  type="date"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  placeholder="开始时间"
                  style="width: 100%;"
                />
              </el-form-item>
              <el-form-item style="width: 100%" label="培训时间" prop="validityDateRange" label-width="">
                <el-date-picker
                  v-model="validityDateRange[1]"
                  type="date"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  placeholder="结束时间"
                  style="width: 100%;"
                  :default-time="defaultTime"
                />
              </el-form-item>
            </el-col>
            
            <el-col :span="3" style="min-width: 300px;">
              <el-form-item label="&nbsp;" style="width: 100%">
                <el-button size="small" type="primary" @click="handeSearch">查询</el-button>
                <el-button size="small" @click="rest">重置</el-button>
                <el-button size="small" type="warning" @click="exportData">导出</el-button>
              </el-form-item>
            
            </el-col>
          </el-row>
        
        </el-form>
      
      </div>
      <br>
      <div>
        <el-table v-loading="loading" :data="list" border>
          <el-table-column show-overflow-tooltip type="index" width="55" align="center" label="序号" />
          <!--          <el-table-column show-overflow-tooltip label="培训单位" align="center" prop="personName" min-width="110" />-->
          <el-table-column show-overflow-tooltip label="活动报备编号" align="center" prop="pxCode" min-width="120" />
          <el-table-column show-overflow-tooltip label="培训活动名称" align="center" prop="pxName" min-width="120" />
          <el-table-column
            show-overflow-tooltip label="合计人数" align="center" prop="allCount" min-width="90"
          />
          <el-table-column show-overflow-tooltip label="教练员" align="center" prop="pxName" min-width="200">
            <el-table-column label="初级" align="center" prop="dzcjjly" min-width="60" />
            <el-table-column label="中级" align="center" prop="dzzjjly" min-width="60" />
            <el-table-column label="高级" align="center" prop="dzgjjly" min-width="60" />
            <el-table-column label="国家级" align="center" prop="dzgjjjly" min-width="70" />
          
          </el-table-column>
          <el-table-column show-overflow-tooltip label="晋段考官" align="center" prop="pxCode" min-width="200">
            <el-table-column label="初级" align="center" prop="jdcjksg" min-width="60" />
            <el-table-column label="中级" align="center" prop="jdzjksg" min-width="60" />
            <el-table-column label="高级" align="center" prop="jdgjksg" min-width="60" />
          </el-table-column>
          <el-table-column label="晋级考官" align="center" prop="jjksg" min-width="80" />
          <el-table-column label="裁判员" align="center" prop="pxCode" min-width="200">
            <el-table-column label="三级" align="center" prop="dzsjcpy" min-width="60" />
            <el-table-column label="二级" align="center" prop="dzejcpy" min-width="60" />
            <el-table-column label="一级" align="center" prop="dzyjcpy" min-width="60" />
            <el-table-column label="国家级" align="center" prop="gjjcpy" min-width="70" />
          </el-table-column>
          <el-table-column label="讲师" align="center" prop="pxjs" min-width="60" />
          <el-table-column show-overflow-tooltip label="培训项目" align="center" prop="projects" min-width="120" />
          <!--          <el-table-column show-overflow-tooltip label="培训期数" align="center" prop="role" min-width="120" />-->
          <el-table-column label="培训日期" align="center" prop="date" min-width="180" />
          <el-table-column show-overflow-tooltip label="培训地址" align="center" prop="address" min-width="120" />
        </el-table>
      </div>
      
      <pagination
        v-show="total>0"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        :total="total"
        @pagination="getList"
      />
    
    </el-dialog>
  
  </div>
</template>

<script setup>
import { reactive } from '@vue/runtime-core'
import { toRefs, getCurrentInstance, ref } from 'vue'
import { getStatisticsInfo2 } from '@/api/analysis/storehouse'
import { dateEnd } from '/@/utils/ruoyi'

const { proxy } = getCurrentInstance()
const data = reactive({
  show: false,
  form: {},
  list: [],
  queryParams: {}
})
const defaultTime = ref(new Date(0, 0, 0, 23, 59, 59))
const { show, form, list, queryParams } = toRefs(data)
const total = ref(0)
const validityDateRange = ref([null, null])
const loading = ref(false)
const optionList = ref([
  { label: '全部', value: '' },
  { label: '大众初级教练员', value: '101' },
  { label: '大众中级教练员', value: '102' },
  { label: '大众高级教练员', value: '103' },
  { label: '大众国家级教练员', value: '104' },
  { label: '大众三级裁判员', value: '201' },
  { label: '大众二级裁判员', value: '202' },
  { label: '大众一级裁判员', value: '203' },
  { label: '国家级裁判员', value: '204' },
  { label: '晋级考试官', value: '301' },
  { label: '晋段考试官(初级)', value: '401' },
  { label: '晋段考试官(中级)', value: '402' },
  { label: '晋段考试官(高级)', value: '403' },
  { label: '中国跆协培训讲师', value: '501' },
  { label: '国跆协培训讲师', value: '502' }
])

function open(row) {
  form.value = row
  queryParams.value = {
    memId: row.memId,
    pxCode: null,
    pxName: null
  }
  validityDateRange.value = [null, null]
  list.value = []
  show.value = true
  getList()
}

// /** 查询单位会员列表 */
async function getList() {
  if (validityDateRange.value[0] && validityDateRange.value[1] == null) return proxy.$modal.msgError('请选择培训时间范围')
  if (validityDateRange.value[0] == null && validityDateRange.value[1]) return proxy.$modal.msgError('请选择培训时间范围')
  if (validityDateRange.value[1]) validityDateRange.value[1] = dateEnd(validityDateRange.value[1])
  queryParams.value.timeRange = validityDateRange.value.length > 1 && validityDateRange.value[0] != null ? validityDateRange.value.toString() : null
  
  loading.value = true
  const res = await getStatisticsInfo2(queryParams.value)
  list.value = res.data
  total.value = res.total
  loading.value = false
}

// 重置
function rest() {
  validityDateRange.value = [null, null]
  queryParams.value.pxName = null
  queryParams.value.pxCode = null
  getList()
}

function exportData() {
  proxy.download('/member/info/exportStatisticsInfo2', {
    ...queryParams.value
  }, `${form.value.memName}${new Date().getTime()}.xlsx`)
}

function handeSearch() {
  getList()
}

defineExpose({
  open
})

</script>

<style lang="scss" scoped>
.center {
  text-align: center;
}

.flex {
  display: flex;
  justify-content: center;
  font-size: 16px;
  
  div {
    margin-left: 40px;
    margin-right: 40px;
  }
}

.x-flex {
  display: flex;
  font-size: 16px;
  
  div {
    margin-right: 40px;
    
    span {
      color: #920f20;
      font-size: 20px;
    }
  }
}

.el-button {
  margin-bottom: 18px;
}

.table {
  display: flex;
}

.text-center {
  display: flex;
  margin-top: 10px;
  margin-bottom: 40px;
}

.text-center > div {
  margin-left: 20px;
}

.text-center span {
  color: #920f20;
  font-size: 20px;
  font-weight: 600;
}


:deep(.el-form-item) {
  margin-bottom: 5px;
}
</style>