element-ui使用实例

<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
        <label class="el-form-item-label" style="position:relative; top:-5px;">周</label>
        <el-select :filterable="true" v-model="query.week" placeholder="请选择" style="position:relative; top:-5px;">
          <el-option
            v-for="item in options"
            :key="item.id"
            :value="item.week"
            :label="item.week">
          </el-option>
        </el-select>
        <rrOperation :crud="crud"/>
        <!-- 搜索 -->
        <label class="el-form-item-label" style="position:relative;
    top:-5px;" v-if="checkPermission(['admin'])">周</label>
        <el-select :filterable="true" v-model="week" style="position:relative;
    top:-5px;" v-if="checkPermission(['admin'])" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.id"
            :value="item.week"
            :label="item.week">
          </el-option>
        </el-select>
        <el-button type="danger" icon="el-icon-delete" v-if="checkPermission(['admin'])" style="position:relative;
    top:-5px;" @click="dele">删除
        </el-button>
        <label class="el-form-item-label" v-if="checkPermission(['admin'])" style="position:relative;
    top:-5px;">周</label>
        <el-select :filterable="true" v-model="week1" style="position:relative;top:-5px;" v-if="checkPermission(['admin'])"
                   placeholder="请选择">
          <el-option
            v-for="ite in options1"
            :key="ite.id"
            :value="ite.week"
            :label="ite.week">
          </el-option>
        </el-select>
        <el-button type="primary" v-if="checkPermission(['admin'])" style="position:relative;
    top:-5px;" icon="el-icon-edit" @click="editopen">修改
        </el-button>
      </div>
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <crudOperation :permission="permission">
      </crudOperation>
      <!--表单组件-->
      <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0"
                 :title="crud.status.title" width="500px">
        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
          <el-form-item label="周" prop="week">
            <el-input v-model="form.week" style="width: 370px;"/>
          </el-form-item>
          <el-form-item label="阶段产物">
            <el-input v-model="form.stageProduct" style="width: 370px;"/>
          </el-form-item>
          <el-form-item label="内容" prop="content">
            <el-input type="textarea" :rows="3" v-model="form.content" style="width: 370px;height: 20%"/>
          </el-form-item>
          <el-form-item label="学习资料">
            <el-input type="textarea" :rows="5" v-model="form.learningMaterials" style="width: 370px; height: 20% "/>
          </el-form-item>
          <el-form-item label="书面考核" prop="writtenAssessment">
            <el-radio v-model="form.writtenAssessment" label="是">是</el-radio>
            <el-radio v-model="form.writtenAssessment" label="否">否</el-radio>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="crud.cancelCU">取消</el-button>
          <el-button :loading="crud.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
        </div>
      </el-dialog>


      <el-table
        ref="table"
        v-loading="crud.loading"
        :data="crud.data"
        size="small"
        @selection-change="crud.selectionChangeHandler"
        :span-method="objectSpanMethod"
        border
        style="width: 100%">
        <!--        fixed="left"-->
        <el-table-column
          prop="week"
          label="周"
          width="60"/>
        <el-table-column
          prop="content"
          label="内容" width="220"/>

        <el-table-column label="考试情况" width="100px" v-if="checkPermission(['admin'])" prop="numberExaminations">
          <template slot-scope="scope">
            <div v-if="scope.row.writtenAssessment==='是'">
              <el-popover placement="right" trigger="click">
                <h3 align="center" v-model="leftName">{
   
   {leftName}}</h3>
                <h5>红色字体为未参加考试</h5>
                <ol>
                  <li style="color: #ff0000" v-if="item.name==null" v-for="item in username" :key="item.username">
                    {
   
   {item.nickName }}
                  </li>
                  <li v-else>
                    {
   
   {item.nickName }}
                  </li>
                </ol>
                <el-button type="text" slot="reference" icon="el-icon-s-comment" @click="lackAccess(scope.row.content)">
                  {
   
   {scope.row.numberExaminations}}/{
   
   {scope.row.tote}}
                </el-button>
              </el-popover>
            </div>
            <div v-else>此项无需考试</div>
          </template>
        </el-table-column>

        <el-table-column label="发布情况" width="100px" v-if="checkPermission(['admin'])" prop="numberPublications">
          <template slot-scope="scope">
            <div v-if="scope.row.stageProduct!=''">
              <el-popover placement="right" trigger="click">
                <h3 align="center" v-model="leftName">{
   
   {leftName}}</h3>
                <h5>红色字体为未发布</h5>
                <ol>
                  <li v-if="item.name==null" style="color: #ff0000" v-for="item in username" :key="item.username">
                    {
   
   {item.nickName }}
                  </li>
                  <li v-else>
                    {
   
   {item.nickName }}
                  </li>
                </ol>
                <el-button type="text" slot="reference" icon="el-icon-s-comment"
                           @click="notPublished(scope.row.content)">{
   
   {scope.row.numberPublications}}/{
   
   {scope.row.tote}}
                </el-button>
              </el-popover>
            </div>
            <div v-else>此项无需发布</div>
          </template>
        </el-table-column>

        <el-table-column
          prop="learningMaterials"
          label="学习资料" width="500px"/>

        <el-table-column label="书面考核" align="center" width="100px" prop="writtenAssessment"/>
        <el-table-column label="阶段产物" width="220px" prop="stageProduct"/>
        <el-table-column v-if="!checkPermission(['admin'])" label="已考试" align="center" width="100px" prop="examinationStatus">
          <template slot-scope="scope">
            <div v-if="scope.row.writtenAssessment==='是'">{
   
   {scope.row.examinationStatus}}
            </div>
            <div v-else>此项无需考试</div>
          </template>
        </el-table-column>

        <el-table-column v-if="!checkPermission(['admin'])" label="已发布" align="center" width="100px" prop="statusRelease">
          <template slot-scope="scope">
            <div>{
   
   {scope.row.stageProduct!==''?scope.row.statusRelease:"此项无需发布"}}</div>
          </template>
        </el-table-column>
        <el-table-column fixed="right"
                         v-if="checkPermission(['admin'])" v-permission="['admin','trainingManagement:edit','trainingManagement:del']"
                         label="操作" width="150px" align="center">
          <template slot-scope="scope">

            <udOperation
              :data="scope.row"
              :permission="permission"
            />
          </template>
        </el-table-column>
      </el-table>

      <!--      &lt;!&ndash;分页组件&ndash;&gt;-->
      <!--      <pagination></pagination>-->
    </div>
  </div>

</template>

<script>
  import crudTrainingManagement, {
     
     dele, findWeek, editopen, lackAccess, notPublished} from '@/api/trainingManagement'
  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 checkPermission from '@/utils/permission' // 权限判断函数
  const defaultForm = {
     
     
    id: null,
    week: null,
    content: null,
    learningMaterials: null,
    stageProduct: null,
    writtenAssessment: null
  }
  export default {
     
     
    name: 'TrainingManagement',
    inject: ['reload'],
    components: {
     
     crudOperation, rrOperation, udOperation},
    mixins: [presenter(), header(), form(defaultForm), crud()],
    cruds() {
     
     
      return CRUD({
     
     
          title: '培训计划',
          url: 'api/trainingManagement?page=0&size=10000000',
          sort: ['week,asc', 'id,asc'],
          crudMethod: {
     
     ...crudTrainingManagement},
          optShow: {
     
     
            add: true,
            edit: false,
            del: false,
            reset: false
          }
        }
      )
    },
    data() {
     
     
      return {
     
     
        week: '',
        options: {
     
     
          id: '',
          week: '',
        },
        options1: {
     
     
          id: '',
          week: '',
        },
        leftName: '',
        permission: {
     
     
          add: ['admin', 'trainingManagement:add'],
          edit: ['admin', 'trainingManagement:edit'],
          del: ['admin', 'trainingManagement:del']
        },
        rules: {
     
     
          week: [
            {
     
     required: true, message: '周不能为空', trigger: 'blur'}
          ],
          content: [
            {
     
     required: true, message: '内容不能为空', trigger: 'blur'}
          ],
          writtenAssessment: [
            {
     
     required: true, message: '是否书面考核不能为空', trigger: 'blur'}
          ]
        },
        week1: null,
        username: {
     
     },
        queryTypeOptions: [
          {
     
     key: 'week', display_name: '周'}
        ],
      }
    },
    methods: {
     
     
      findWeek,
      dele,
      checkPermission,
      editopen,
      lackAccess,
      notPublished,
      objectSpanMethod({
     
     row, column, rowIndex, columnIndex}) {
     
     
        if (columnIndex === 0) {
     
     
          if (columnIndex === 0) {
     
     
            return {
     
     
              rowspan: row.rowspan,
              colspan: 1
            }
          }
        }
      },
      setrowspans() {
     
     
        // 先给所有的数据都加一个v.rowspan = 1
        this.crud.data.forEach(v => {
     
     
          v.rowspan = 1
        })
        // 双层循环
        for (let i = 0; i < this.crud.data.length; i++) {
     
     
          // 内层循环，上面已经给所有的行都加了v.rowspan = 1
          // 这里进行判断
          // 如果当前行的id和下一行的id相等
          // 就把当前v.rowspan + 1
          // 下一行的v.rowspan - 1
          for (let j = i + 1; j < this.crud.data.length; j++) {
     
     
            if (this.crud.data[i].week === this.crud.data[j].week) {
     
     
              this.crud.data[i].rowspan++
              this.crud.data[j].rowspan--
            }
          }
          // 这里跳过已经重复的数据
          i = i + this.crud.data[i].rowspan - 1
        }
      },
      // 刚获取到数据的钩子
      [CRUD.HOOK.newGetData]() {
     
     
        this.findWeek();
        this.setrowspans();
      },
      // 新增后执行的钩子
      [CRUD.HOOK.afterSubmit]() {
     
     
        this.findWeek();
      },
      // 钩子：在获取表格数据之前执行，false 则代表不获取数据
      [CRUD.HOOK.beforeRefresh]() {
     
     
        return true
      }

    }
  }
</script>

<style scoped>

</style>