最新版本

jiangping

2024-05-28 a58ce000b2f84a998e91c8c77b290319c3de6996

 admin/src/components/business/OperaProblemsWindow.vue

@@ -1,50 +1,66 @@
<template>
    <GlobalWindow
            :title="title"
            :visible.sync="visible"
            :confirm-working="isWorking"
            @confirm="confirm"
        :title="title"
        :visible.sync="visible"
        :confirm-working="isWorking"
        @confirm="confirm"
    >
        <el-form :model="form" ref="form" :rules="rules">
            <el-form-item label="题目" prop="title">
                <el-input v-model="form.title" placeholder="请输入题目" v-trim/>
            </el-form-item>
            <el-form-item label="题目类型" prop="type">
                <el-select v-model="form.type" placeholder="请选择">
                    <el-option label="判断" value="0"></el-option>
                    <el-option label="单选" value="1"></el-option>
                    <el-option label="多选" value="2"></el-option>
                <el-select v-model="form.type" @change="changeType" placeholder="请选择">
                    <el-option label="判断" :value="0"></el-option>
                    <el-option label="单选" :value="1"></el-option>
                    <el-option label="多选" :value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="适用用户" prop="useType">
                <el-radio-group v-model="form.useType">
                    <el-radio :label="0">劳务人员</el-radio>
                    <el-radio :label="1">普通访客</el-radio>
                    <el-radio :label="0">访客和劳务</el-radio>
                    <el-radio :label="1">仅访客</el-radio>
                    <el-radio :label="2">仅劳务</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="题目顺序(升序)" prop="sortnu">
                <el-input v-model="form.sortnu" placeholder="请输入" v-trim/>
            <el-form-item label="分值" prop="score">
                <el-input v-model="form.score" type="number" placeholder="请输入" v-trim/>
            </el-form-item>
            <el-form-item label="选项集合" prop="options" v-if="form.type === '1' || form.type === '2'">
            <el-form-item label="题目顺序(升序)" prop="sortnu">
                <el-input v-model="form.sortnu" type="number" placeholder="请输入" v-trim/>
            </el-form-item>
            <el-form-item label="选项集合" prop="objectList" v-if="form.type === 1 || form.type === 2">
                <el-button type="primary" style="width: 120px; margin-bottom: 15px;" @click="add" icon="el-icon-plus">添加选项</el-button>
                <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
                    <el-tab-pane
                        v-for="item in problems"
                        :key="item.name"
                        :label="item.name"
                        v-for="item in form.objectList"
                        :key="item.code"
                        :label="item.sort"
                        :name="item.id"
                    >
                        <el-input v-model="item.val" placeholder="请输入" v-trim/>
                        <el-input v-model="item.value" placeholder="请输入" v-trim/>
                    </el-tab-pane>
                </el-tabs>
            </el-form-item>
            <el-form-item label="正确答案" prop="answer">
                <el-select v-model="form.answer" multiple placeholder="请选择正确答案">
                <el-select v-model="form.answer" v-if="form.type === 0" placeholder="请选择正确答案">
                    <el-option label="正确" value="正确"></el-option>
                    <el-option label="错误" value="错误"></el-option>
                </el-select>
                <el-select v-model="form.answer" v-if="form.type === 1" placeholder="请选择正确答案">
                    <el-option
                        v-for="item in problems"
                        v-for="item in form.objectList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                        :label="item.sort"
                        :value="item.code">
                    </el-option>
                </el-select>
                <el-select v-model="form.answer" v-if="form.type === 2" multiple placeholder="请选择正确答案">
                    <el-option
                    v-for="item in form.objectList"
                    :key="item.id"
                    :label="item.sort"
                    :value="item.code">
                    </el-option>
                </el-select>
            </el-form-item>
@@ -65,19 +81,31 @@
      form: {
        id: null,
        title: '',
        options: '',
        objectList: [
          { code: 'A', value: '', sort: '选项A', id: '0' }
        ],
        answer: '',
        sortnu: '',
        type: '',
        useType: ''
        type: 0,
        scroe:null,
        useType: 0
      },
      // 验证规则
      rules: {
        title: [
          { required: true, message: '请输入题目名称' }
        ],
        type: [
          { required: true, message: '请选择题目类型' }
        ],
        useType: [
          { required: true, message: '请选择适用用户' }
        ],
        answer: [
          { required: true, message: '请选择正确答案' }
        ]
      },
      editableTabsValue: '0',
      problems: [
        { name: '选择A', val: '', id: '0' }
      ],
      arr: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
    }
  },
@@ -88,19 +116,108 @@
    })
  },
  methods: {
    open (title, target) {
      this.title = title
      this.editableTabsValue = '0'
      this.visible = true
      // 新建
      if (target == null) {
        this.$nextTick(() => {
          this.$refs.form.resetFields()
          this.form[this.configData['field.id']] = null
        })
        return
      }
      // 编辑
      this.$nextTick(() => {
        for (const key in this.form) {
          this.form[key] = target[key]
        }
      })
    },
    confirm () {
      this.$refs.form.validate((valid) => {
        if (!valid) {
          return
        }
        // 调用新建接口
        this.isWorking = true
        if (this.form.id == null || this.form.id === '') {
          this.api.create({
            // eslint-disable-next-line valid-typeof
            answer: typeof this.form.answer === 'object' ? this.form.answer.join(',') : this.form.answer,
            title: this.form.title,
            sortnu: this.form.sortnu,
            type: this.form.type,
            useType: this.form.useType,
            score: this.form.score,
            objectList: this.form.objectList
          })
            .then(() => {
              this.visible = false
              this.$tip.apiSuccess('新建成功')
              this.$emit('success')
            })
            .catch(e => {
              this.$tip.apiFailed(e)
            })
            .finally(() => {
              this.isWorking = false
            })
        } else {
          this.api.updateById({
            id: this.form.id,
            // eslint-disable-next-line valid-typeof
            answer: typeof this.form.answer === 'object' ? this.form.answer.join(',') : this.form.answer,
            title: this.form.title,
            sortnu: this.form.sortnu,
            type: this.form.type,
            useType: this.form.useType,
            score: this.form.score,
            objectList: this.form.objectList
          })
            .then(() => {
              this.visible = false
              this.$tip.apiSuccess('修改成功')
              this.$emit('success')
            })
            .catch(e => {
              this.$tip.apiFailed(e)
            })
            .finally(() => {
              this.isWorking = false
            })
        }
      })
    },
    changeType (e) {
      this.editableTabsValue = '0'
      this.form.objectList = [
        { code: 'A', value: '', sort: '选项A', id: '0' }
      ]
      this.$nextTick(() => {
        if (e === '0' || e === '1') {
          this.form.answer = ''
        } else {
          this.form.answer = []
        }
      })
      this.$forceUpdate()
    },
    removeTab (e) {
      this.problems.splice(e, 1)
      this.form.objectList.splice(e, 1)
      if (e === this.editableTabsValue) {
        this.editableTabsValue = '0'
      }
      this.problems.forEach((item, index) => {
        item.name = '选项' + this.arr[index]
      this.form.objectList.forEach((item, index) => {
        item.code = this.arr[index]
        item.sort = '选项' + this.arr[index]
        item.id = index.toString()
      })
    },
    add () {
      const name = '选项' + this.arr[this.problems.length]
      this.problems.push({ name, val: '', id: this.problems.length.toString() })
      const sort = '选项' + this.arr[this.form.objectList.length]
      this.form.objectList.push({ sort, value: '', code: this.arr[this.form.objectList.length], id: this.form.objectList.length.toString() })
    }
  }
}