TreeviewCopyright © aleen42 all right reserved, powered by aleen42

测评案列

一、背景

  • 创建考题分类实体表和考题实体表和答题记录表
  • 首先通过数据建模形式，创建可视化自定义考题页面，自定义描述考题选项页面
  • 其次需要扩展前端容器组件steps的同时，会涉及到扩展样式以及扩展页面逻辑相关功能

二、操作流程

图1

三、实体

3.1、新建考题实体

  • 考题实体包括考题类型、答案、考题难度分类、题目等字段，考题类型通过单选枚举考题类型，答案通过单选枚举答案列表，考题分类通过单选参照考题分类来实现联动。
操作 描述
名称 考题列表
编码 question
子实体 options
引用接口 业务流 自动编码
属性 编码 名称 类型 引用
title 题目 大文本
title_type 考题类型 单选
answer 答案 单选
questionclass 考题分类 单选引用

创建考题列表实体 图2 考题列表实体详情 图3

  • 考题选项实体包括选项、考题ID、描述字段。
操作 描述
名称 考题选项实体
编码 options
引用接口 业务流 自动编码
属性 编码 名称 类型 引用
letter 选项 单选
question_id 考题ID 单选引用
content 描述 文本

子表考题选项实体 图4

3.2、新建考题难度分类实体

  • 考题难度分类实体包括名称、描述、注意事项字段，可作为树状参照的实体。
操作 描述
名称 考题难度分类
编码 questionclass
父实体
引用接口 树形结构 自动编码
属性 编码 名称 类型 引用
name 名称 文本
des 描述 大文本
notice 注意事项 大文本

创建考题难度分类实体 图5 考题难度分类实体详情 图6

3.3、创建答案和考题类型枚举

  • 根据实体中单选引用的答案和考题类型，来创建枚举

    图7

3.4、发布实体

实体需要发布才可在后续页面建模中引用。 图8

四、页面建模

4.1、切换页面建模首先创建参照，点击参照，选择新建参照，选择【树参照】点击下一步

新建参照中，参照提供表参照、树参照、树表参照多个常用模板，可以根据业务需求进行选择。 下面我们根绝考题难度分类实体创建考题难度分类树参照页面。

  • 点击新建参照
  • 选择树参照，点击下一步
  • 填写页面名称，选择需要继承的实体
  • 考题参照步骤同上，在此不再赘述。

4.2、切换页面建模，点击新建页面，选择【单据】页签下【单卡】，点击下一步

新建页面中，单据提供单表、单卡、左树右表、左树右卡、树形表、一主多子、主子孙表等多个常用模板，可以根据业务需求进行选择。

  • 首先创建考题难度分类单卡，来配置考题难度分类数据

  • 点击新建页面，选择单卡，点击下一步

  • 填写页面名称，选择需要继承的实体
  • 进入考题难度分类页面，配置考题难度分类数据

4.3、切换页面建模，点击新建页面，选择【单据】页签下【左数右表】，点击下一步。

  • 首先创建考题左数右表，来配置考题数据

  • 点击新建页面，选择左数右表，点击下一步

  • 填写页面名称，选择需要继承的实体，选对联动关系字段
  • 进入考题页面，配置考题数据
  • 进入考题页面，点击新增，配置考题选项数据

五、前端组件扩展

5.1、根据需求需要展示步骤条，并且步骤条每步内容是动态变化，需要扩展步骤条组件

  • 1、创建步骤条扩展文件 注册ExamSteps扩展组件
  • 2、引入Steps, Button等组件，定义扩展组件名为ExamSteps，根绝antd官方文档，实现步骤条UI页面

组件头部引入说明：
组件逻辑说明：

具体代码如下：


//引入项目需要的依赖
import React, { Component } from 'react'
import { Steps, Button } from 'antd'
import {proxy} from '@mdf/cube/lib/helpers/util'
import ExamFilst from './examExtend/examFilst'
import ExamTwo from './examExtend/examTwo'
import ExamThree from './examExtend/examThree'
const { Step } = Steps
class ExamSteps extends Component {
  constructor(props) {
    super(props)
    //创建答案列表和步骤数
    this.state = {
      current: 0,
      answerchlogList:[]
    }
    this.steps = [
      {
        title: '第一步',
        content: (<ExamFilst />)
      },
      {
        title: '第二步',
        content: (<ExamTwo getStepsCheckData={this.getStepsCheckData.bind(this)} />)
      },
      {
        title: '第三步',
        content: (<ExamThree />)
      }
    ]
  }
  componentDidMount() {
    if (this.props.model)
      this.props.model.addListener(this);
  }
  componentWillUnmount() {
    if (this.props.model)
      this.props.model.removeListener(this);
  }
  //获取考题选中完答案
  getStepsCheckData(answerchlogList) {
    answerchlogList && this.setState({
      answerchlogList: answerchlogList
    })
  }
  //下一步函数
  next() {
    this.setState((state) => ({
      current: state.current + 1
    }))
  }
   //上一步操作
  prev() {
    this.setState((state) => ({
      current: state.current - 1
    }))
  }
  //做完考题提交
  stepsSubmit() {
    const config = {
      url: '/question/submit',
      method: 'POST',
      options: { uniform: false, token: false },
      params: {
        "billnum": "d567d217",
        "data": {
          "questionclass": "2281293363745024",
          "answerchlogList": this.state.answerchlogList,
          "_status": "Insert"
        }
      }
    }
    proxy(config).then(json => {
      json.code=200
      if (json.code === 200) {
        this.setState((state) => ({
          current: state.current + 1
        }))
      }else{
        cb.utils.alert('提交不成功，请检查错误')
      }
    })  
  }
}

export default ExamSteps
  • 3、步骤条每步的具体内容，要抽离出来，封装成单独组件，单独处理每页要展示的数据和逻辑，互不影响，最好实现UI组件和业务组件分离
  • 3.1、步骤条首页组件

/**
*
* @title 步骤条首页组件
* @description
*
*/
import React, { Component } from 'react';
import { Steps  } from 'antd';

class ExamFilst extends Component {
  render () {
      return (
            <>
                <div className='exam-title'>测评介绍</div>
                <div className='exam-subtitle'>剑桥商务英语证书BEC简介</div>
                <p className='exam-content'>剑桥商务英语证书BEC是专为职场或即将进入职场的英语学习者所设计的国际商务英语资格证书考试，旨在考查应试者在真实工作环境中的英语交流能力。</p>
                <p className='exam-content'>剑桥商务英语证书BEC是众多知名跨国企业和国际高等院校评估应聘者和申请人语言能力的标准。在中国，BEC认可机构包括：阿迪达斯、巴斯夫中国、宝洁、壳牌、太古地产、乐购、联邦快递、特斯拉汽车、伊利诺易、沃尔玛、中国铁路工程总公司、中国建筑工程总公司等。</p>
                <p className='exam-content'>剑桥大学英语考评部隶属于剑桥大学。我们为全球的英语学习者和教师提供一系列顶尖的证书与测评考试。我们拥有百余年语言教学和测评的专业经验，在世界范围内与世界各地的教育部门，政府部门紧密合作，为发展优质的语言教育提供支持。剑桥大学英语考评部隶属于剑桥大学。我们为全球的英语学习者和教师提供一系列顶尖的证书与测评考试。我们拥有百余年语言教学和测评的专业经验，在世界范围内与世界各地的教育部门，政府部门紧密合作，为发展优质的语言教育提供支持。</p>
            </>
      )
  }
}

export default ExamFilst;
  • 3.2、测评答题主体组件

/**
*
* @title 测评答题主体组件
* @description
*
*/
import React, { Component } from 'react'
import { Checkbox, Radio } from 'antd'
import { proxy } from '@mdf/cube/lib/helpers/util'

class ExamTwo extends Component {
    constructor(props) {
        super(props)
        this.state = {
            answerchlogList: [],  //存储选择的答案（以数组包裹对象的方式来存储）
            choose_data: []
        }
    }
    componentDidMount() {
        //接口请求考试题数据
        const config = {
            url: '/question/list',
            method: 'GET',
            params: {
                "questionclass": "2281293363745024"
              }
        }
        proxy(config).then(json => {
            if (json.code !== 200) return

            this.setState({
                choose_data: json.data || []
            })
        })
    }
    componentWillUnmount() {
        this.props.getStepsCheckData(this.state.answerchlogList)
        //接口提交考试题数据
    }
    checkChange(title_id, title_type, str) {
        //原本state数组中存储的数据
        const answer_current = this.state.answerchlogList
        //最新原则的题目以及对应的答案
        const answer_new = {
            'question': title_id,
            'answer': title_type == 'radio' ? str.target.value : str.join(),
            '_status': 'Insert'
        }
        //如果原来的数组中题号存在和最新的一样的，则要剔除
        answer_current.map((item) => {
            if (item.question === title_id) {
                answer_current.splice(answer_current.indexOf(item), 1)
            }
        })
        //把最新的答案拼接到原来的数组中
        this.setState({
            answerchlogList: this.state.answerchlogList.concat(answer_new)
        })
    }
    render() {
        const CheckboxGroup = Checkbox.Group
        const RadioGroup = Radio.Group
        const checkMap = ['A', 'B', 'C', 'D', 'E', 'F']
        return (
            <ul className='content-parent-ul'>
                {
                    this.state.choose_data.map((item, index) => {
                        return (
                            <li key={item.id} className='content-parent-li'>
                                <p><span>{`${index + 1}.`}</span>{item.title}<span>-----{item.title_type === '1' ? '单选题' : '多选题'}</span></p>
                                <ul>
                                    {
                                        item.title_type === '1' ?
                                            <RadioGroup name="radiogroup" onChange={this.checkChange.bind(this, item.id, 'radio')}>
                                                {
                                                    item.choose_list.length > 0 ?
                                                        item.choose_list.map((item1, index1) => {
                                                            return (
                                                                <li key={item1.letter}>
                                                                    <div>
                                                                        <span>{`${checkMap[index1]}. `}</span>
                                                                        <Radio
                                                                            value={item1.letter}
                                                                        >{item1.content}</Radio>
                                                                    </div>
                                                                </li>
                                                            )
                                                        }) : ''
                                                }
                                            </RadioGroup> :
                                            <CheckboxGroup onChange={this.checkChange.bind(this, item.id, 'checkbox')}>
                                                {
                                                    item.choose_list.length > 0 ?
                                                        item.choose_list.map((item1, index1) => {
                                                            return (
                                                                <li key={item1.letter}>
                                                                    <div>
                                                                        <span>{`${checkMap[index1]}. `}</span>
                                                                        <Checkbox
                                                                            value={item1.letter}
                                                                        >{item1.content}</Checkbox>
                                                                    </div>
                                                                </li>
                                                            )
                                                        }) : ''
                                                }
                                            </CheckboxGroup>
                                    }
                                </ul>
                            </li>
                        )
                    })
                }
            </ul>
        )
    }
}
export default ExamTwo;
  • 3.3、测评答题结果页组件

/**
*
* @title 测评答题结果页组件
* @description
*
*/
import React from 'react'
function ExamThree() {
    return (
        <>
            <div className='exam-title'>你已经提交成功，此处可扩展内容以及样式</div>
            <div className='exam-subtitle'>剑桥商务英语证书BEC简介</div>
            <p className='exam-content'>剑桥商务英语证书BEC是专为职场或即将进入职场的英语学习者所设计的国际商务英语资格证书考试，旨在考查应试者在真实工作环境中的英语交流能力。</p>
            <p className='exam-content'>剑桥商务英语证书BEC是众多知名跨国企业和国际高等院校评估应聘者和申请人语言能力的标准。在中国，BEC认可机构包括：阿迪达斯、巴斯夫中国、宝洁、壳牌、太古地产、乐购、联邦快递、特斯拉汽车、伊利诺易、沃尔玛、中国铁路工程总公司、中国建筑工程总公司等。</p>
            <p className='exam-content'>剑桥大学英语考评部隶属于剑桥大学。我们为全球的英语学习者和教师提供一系列顶尖的证书与测评考试。我们拥有百余年语言教学和测评的专业经验，在世界范围内与世界各地的教育部门，政府部门紧密合作，为发展优质的语言教育提供支持。剑桥大学英语考评部隶属于剑桥大学。我们为全球的英语学习者和教师提供一系列顶尖的证书与测评考试。我们拥有百余年语言教学和测评的专业经验，在世界范围内与世界各地的教育部门，政府部门紧密合作，为发展优质的语言教育提供支持。</p>
        </>
    )
}
export default ExamThree;

  • 4、步骤条的样式可以通过样式扩展来编辑想展示的样式，这里我只是简单的做了样式扩展

  • 4.1 创建样式扩展文件

  • 4.2 注册扩展的样式文件

5.2、前端扩展容器组件的使用方式

  • 1、点击图中图标，进去编辑模式

  • 2、点击层级，选择页面，点击插入，选择表单容器（因为表单容器里面内容比较空）

  • 3、选择新添加的表单容器，打开编辑器，然后把cControlType字段修改为扩展组件名，点击确定

  • 4、最后点击保存之后，选择预览，打开页面，查看扩展的组件是否符合需求功能

Copyright © 用友 -【生态技术部】 2022-2023 all right reserved，powered by Gitbook修订时间： 2021-09-29 17:44:21

results matching ""

    No results matching ""