energy-platform-front/TEMPLATE.md

模板可以直接抄写

// crud 需要查询参数时使用
cruds() {
  let params = {}
  if(location.search) {
    let serachArr = location.search.split('&')
    params = {
      deptId: serachArr[0].split('=')[1],
      id: serachArr[1].split('=')[1]
    }
  }

  // 只需要一个参数时用这个
  let params = {}
  if(location.search) {
    params = {
      examId: location.search.split('=')[1],
    }
  }


  return CRUD({ title: '考试信息', url: 'api/elExam/statistics', sort: 'id,desc', crudMethod: { ...crudElExam }, 
    optShow: {
      add: false,
      edit: false,
      del: false,
      reset: true
    },query: {type: 'USER', id: params.id, deptId: params.deptId}})
},

// 获取 字典里 标签内容
<el-table-column prop="state" label="考试状态" width="100">
  <template slot-scope="scope">
    <span>  {{ dict.label.paper_status[scope.row.state] }}</span>
  </template>
</el-table-column>

// 创建时间
<el-form-item label="createTime">
  <el-date-picker v-model="form.createTime" type="date" style="width: 370px;" />
</el-form-item>

// 不适用 dicts ,crud
dicts: [],
cruds() {
  return CRUD({})
},

methods: {
  // 禁止使用 crud 进行自动查询
  [CRUD.HOOK.beforeRefresh]() {
    return false
  },
}

// 在 create 里面进行数据得请求
created() {
  this.paperId = this.$route.params ? this.$route.params.id : null
  this.examId = this.$route.query ? this.$route.query.id : null
  this.$nextTick(()=>{
    crudElPaper.getData({paperId: this.paperId}).then(res => {
      this.paperData = res.content[0]
    }).catch(err=> {
      this.$message.error(err)
    })
  })
},

// table 里面的操作链接
<el-table-column v-permission="['admin','exam:paper:edit','exam:paper:del']" label="操作" width="150px" align="center">
  <template slot-scope="scope">
    <router-link :to="'/elexam/exam/artificial/'+scope.row.id" v-if="scope.row.state != 'finished'">
      <el-tooltip effect="dark" content="人工批阅试卷" placement="bottom">
        <el-button type="primary" circle >
          <i class="el-icon-finished"></i>
        </el-button>
      </el-tooltip>
    </router-link>
  </template>
</el-table-column>

// table 里面的格式化时间
<el-table-column :show-overflow-tooltip="true" label="创建日期" prop="createTime">
  <template slot-scope="scope">
    <span>{{ parseTime(scope.row.updateTime) || parseTime(scope.row.createTime) }}</span>
  </template>
</el-table-column>

// table 里面的字典查询
<el-table-column prop="state" label="试卷状态">
  <template slot-scope="scope">
    {{ dict.label.paper_status[scope.row.state] }}
  </template>
</el-table-column>

// table 里面的其他操作
<el-table-column label="操作" width="150px" align="center">
  <template slot-scope="scope">
    <el-button type="primary" icon="el-icon-view" @click="showDetail(scope.row)" size="mini"> 
      考试明细
    </el-button>
  </template>
</el-table-column>

// table 里面的 状态
<el-table-column label="状态" align="center" prop="enabled">
  <template slot-scope="scope">
    <el-switch
      v-model="scope.row.enabled"
      :disabled="user.id === scope.row.id"
      active-color="#409EFF"
      inactive-color="#F56C6C"
      @change="changeEnabled(scope.row, scope.row.enabled)"
    />
  </template>
</el-table-column>

// table 里面的宽度设置
<el-table-column :show-overflow-tooltip="true" prop="job"  width="120" label="应聘岗位">

// button 筛选操作
<el-button 
  :type="scope.row.userModel.enabled ? 'primary' : 'danger'"
  :disabled="scope.row.userModel.enabled"
> 
  {{ scope.row.userModel.enabled ? '在职' : '离职'  }}
</el-button>

<el-table-column prop="manualHandle" label="是否手工阅卷">
  <template slot-scope="scope">
    <span :class="scope.row.manualHandle ? 'text-danger': 'text-success'">{{ scope.row.manualHandle ? '是' : '否' }}</span>
  </template>
</el-table-column>



<el-table-column v-permission="['admin']" label="操作" align="center">
  <template slot-scope="scope">
    <router-link :to="'/elexam/paper/result?id='+scope.row.id" >
      <el-button type="primary" icon="el-icon-view" size="small">
        查看试卷详情
      </el-button>
    </router-link>
  </template>
</el-table-column>

// 上传图片的操作
import _ from 'lodash'
import { getToken } from '@/utils/auth'
import { mapGetters } from 'vuex'

headers: {
  Authorization: getToken()
},

// 获取上传地址
computed: {
  ...mapGetters([
    'imagesUploadApi',
    'baseApi',
  ])
},

// 在 form 中上传图片
<el-form-item label="试题图片">
  <el-upload
    class="upload-demo"
    :headers="headers"
    :data="{name: Date.now()}"
    :action="imagesUploadApi"
    :on-error="(err,file) =>{return handleError(err,file,form.id, 'item')} "
    :on-success="(res,file) =>{return handleSuccess(res,file,form.id, 'item')} "
    :on-remove="(file) =>{return handleRemove(file,form.id,'item')}"
    :file-list=" form.storage != null ? [{name:  form.storage.name, url:  baseApi +'/file/'+ form.storage.type +'/'+ form.storage.realName}] : []"
    :limit="1"
    accept="image/*"
    :on-exceed="handleExceed"
    list-type="picture">
    <el-button size="small" type="primary">点击上传</el-button>
  </el-upload>
</el-form-item>

// 在 table 中上传图片
<el-table-column
  label="选项图片"
  width="120">
  <template slot-scope="scope">
    <el-upload
      :headers="headers"
      :data="{name: Date.now()}"
      :action="imagesUploadApi"
      :on-error="(err,file) =>{return handleError(err,file,scope.$index, 'option')} "
      :on-success="(res,file) =>{return handleSuccess(res,file,scope.$index, 'option')} "
      :on-remove="(file) =>{return handleRemove(file,scope.$index,'option')}"
      list-type="picture"
      accept="image/*"
      :limit="1"
      :on-exceed="handleExceed"
      :file-list="scope.row.storage != null ? [{name: scope.row.storage.name, url: baseApi +'/file/'+scope.row.storage.type +'/'+ scope.row.storage.realName}] : []"
    >
      <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>
    
  </template>
</el-table-column>

// 事件
handleRemove(file, index, str) {
  
},
handleSuccess(response, file, index, str) {
  console.log('response.id', response.id)
},
handleError(err, file, index, str) {
  this.$message.error(err)
  console.log('err',err)
},
handleExceed(files, fileList) {
  this.$message.warning(`当前限制只能上传 1 个文件`);
},

// 基本没有使用 crud 的页面
<template>
  <div class="app-container">
    <div class="head-container">
      <div>
        <!-- 搜索 -->
        <el-input v-model="query.blurry" clearable placeholder="规则名" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
      </div>
      <div class="user-card">
        <el-row :gutter="20">
          <el-col :span="4" v-for="item in 60" :key="item" class="mb20" style="">
            <el-card shadow="always"  style="display: flex; ">
              <span>{{ item }}. 人员信息 </span>
              <el-button size="mini" :type="item % 2 == 0 ? 'danger': 'primary'">未评价</el-button>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import crudUser from '@/api/system/user'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'
import DateRangePicker from '@/components/DateRangePicker'
import Treeselect from '@riophae/vue-treeselect'

import { mapGetters } from 'vuex'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect'

import dayjs from 'dayjs'

export default {
  name: 'ratingUser',
  components: { Treeselect, crudOperation, rrOperation, udOperation, pagination, DateRangePicker },
  // crud 需要查询参数时使用
  cruds() {
    let params = {}
    if(location.search) {
      let serachArr = location.search.split('&')
      params = {
        deptId: serachArr[0].split('=')[1],
        id: serachArr[1].split('=')[1]
      }
    }
    return CRUD({ title: '考试信息', url: 'api/elExam/statistics', sort: 'id,desc', crudMethod: { ...crudElExam }, 
      optShow: {
        add: false,
        edit: false,
        del: false,
        reset: true
      },query: {type: 'USER', id: params.id, deptId: params.deptId}})
  },
  // 数据字典
  dicts: ['user_status', 'gender_status', 'degree_status', 'certificate_status', 'resign_reason'],
  data() {
    return {
    
    }
  },
  computed: {
    ...mapGetters([
      'user'
    ])
  },
  created() {
    
  },
  mounted() {
    
  },
  methods: {
  
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

</style>

OTHER

考试管理 elexam

cate 考试目录
  index 列表/添加/删除
exam  在线考试
  argificial 人工阅卷列表页
  correct 人工批改
  entry 进入考试,考试进行
  index 考试信息
  online 在线考试列表页
  record  人员考试记录
  result  考试结果
  statistics 考试统计
  statisticsDept 部门考试统计
  statisticsUser 用户考试统计
item
  edit 试题编辑页
  index 试题列表页
itempool  题库管理
  index  列表页
paper  试卷管理
  edit   编辑试卷
  index  列表,暂无用

tip: table hasChildren 若为 true 时, children 使用懒加载模式