页面与组件之间的调用

父页面paper 子组件 detail edit paperques

 父页面调用组件

 

子组件调用其他子组件

 paper父页面


<template>
  <div class="examPaperInfo-container">
    <vab-query-form class="page-header">
      <vab-query-form-left-panel :span="24">
        <el-form
          ref="form"
          :inline="true"
          label-width="90px"
          :model="queryForm"
          @submit.native.prevent
        >
          <el-form-item label="所属部门">
            <el-cascader
              v-model="queryForm.select_org_code"
              clearable
              :options="orgDictList"
              :props="orgProps"
              @change="handleOrgChange"
            />
          </el-form-item>
          <el-form-item label="试卷类型">
            <el-select
              v-model="queryForm.select_paper_type"
              clearable
              placeholder="请选择试卷类型"
            >
              <el-option
                v-for="item in paperTypeDictList"
                :key="item.identity_id"
                :label="item.identity_name"
                :value="item.identity_id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="试卷标题">
            <el-input
              v-model="queryForm.select_paper_title_like"
              clearable
              placeholder="请输入试卷标题"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              icon="el-icon-search"
              native-type="submit"
              type="primary"
              @click="queryData"
            >
              查询
            </el-button>
            <el-button icon="el-icon-plus" type="success" @click="handleEdit">
              新增
            </el-button>
          </el-form-item>
        </el-form>
      </vab-query-form-left-panel>
    </vab-query-form>
    <!-- <el-table v-loading="listLoading" :data="list" :max-height="tableHeight">
      <el-table-column align="center" label="序号" type="index" />
      <el-table-column
        align="center"
        label="所属部门"
        prop="org_name"
        show-overflow-tooltip
      />
      <el-table-column align="center" label="试卷标题" prop="paper_title" />
      <el-table-column
        align="center"
        label="试卷类型"
        prop="paper_type_label"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="试卷分数"
        prop="paper_grade"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="单选题分数"
        prop="single_grade"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="单选题数量"
        prop="single_num"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="多选题分数"
        prop="multi_grade"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="多选题数量"
        prop="multi_num"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="判断题分数"
        prop="judge_grade"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="判断题数量"
        prop="judge_num"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="填空题分数"
        prop="bank_grade"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="填空题数量"
        prop="bank_num"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="问答题分数"
        prop="ques_grade"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="问答题数量"
        prop="ques_num"
        show-overflow-tooltip
      />
      <el-table-column align="center" label="操作" width="280">
        <template #default="{ row }">
          <el-button size="mini" type="primary" @click="handleDetail(row)">
            详情
          </el-button>
          <el-button size="mini" type="success" @click="handleEdit(row)">
            编辑
          </el-button>
          <el-button size="mini" type="danger" @click="handleDelete(row)">
            删除
          </el-button>
          <el-button
            v-if="row.paper_type == dictObj.paper_type_fixed_roll"
            size="mini"
            type="primary"
            @click="handlePaperques(row)"
          >
            题目
          </el-button>
        </template>
      </el-table-column>
    </el-table> -->
    <el-alert
      :closable="false"
      show-icon
      :title="'全部试卷:' + title + '套'"
      type="success"
    />
    <el-row
      v-show="list.length > 0"
      :gutter="20"
      style="padding-bottom: 50px; height: 100%"
    >
      <el-col
        v-for="(item, index) in list"
        :key="index"
        :lg="6"
        :md="6"
        :sm="6"
        style="padding-right: 5px; padding-left: 5px"
        :xl="6"
        :xs="6"
      >
        <PaperCard
          :btn-list="[
            btnList[0],
            btnList[1],
            item.paper_type == dictObj.paper_type_fixed_roll ? btnList[2] : '',
          ]"
          :data-item="item"
          @handleDelete="handleDelete"
          @handleDetail="handleDetail"
          @handleEdit="handleEdit"
          @handlePaperques="handlePaperques"
        />
      </el-col>
    </el-row>
    <div class="pagination-container">
      <el-pagination
        background
        :current-page="queryForm.pageNo"
        :layout="layout"
        :page-size="queryForm.pageSize"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </div>
    <edit
      ref="edit"
      :org-dict-list="orgDictList"
      :paper-type-dict-list="paperTypeDictList"
      @fetch-data="fetchData"
      @show-details="handlePaperques"
    />
    <detail ref="detail" @fetch-data="fetchData" />
    <paperques ref="paperques" @fetch-data="fetchData" />
  </div>
</template>
<script>
  import PaperCard from './paper/components/PaperCard'
  import paperques from './paper/paperques'
  import edit from './paper/edit'
  import detail from './paper/detail'
  import vabQueryFormLeftPanel from '../../../vab/components/VabQueryForm/components/VabQueryFormLeftPanel'
  import { dictObj } from '@/utils/dictionary'
  var that
  export default {
    name: 'ExamPaperInfoList',
    components: { vabQueryFormLeftPanel, edit, detail, paperques, PaperCard },
    data() {
      return {
        title: '',
        btnList: [
          {
            value: '详情',
            type: 'primary',
            funName: 'handleDetail',
          },
          {
            value: '编辑',
            type: 'primary',
            funName: 'handlePaperques',
          },
          {
            value: '试卷',
            type: 'success',
            funName: 'handleEdit',
          },
          // {
          //   value: '删除',
          //   type: 'danger',
          //   funName: 'handleDelete',
          // },
        ],
        dictObj: dictObj,
        list: [],
        listLoading: true,
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        selectRows: '',
        tableHeight: '100%',
        queryForm: {
          pageNo: 1,
          pageSize: 20,
          select_bank_grade: '',
          select_bank_num: '',
          select_multi_grade: '',
          select_multi_num: '',
          select_org_code: '',
          select_paper_code: '',
          select_paper_grade: '',
          select_paper_title_like: '',
          select_ques_grade: '',
          select_ques_num: '',
          select_single_grade: '',
          select_single_num: '',
          select_paper_type: '',
        },

        orgProps: {
          label: 'org_name',
          value: 'org_code',
        }, //机构部门的参数定义
        orgDictList: [], //机构部门字典
        paperTypeDictList: [
          {
            identity_id: dictObj.paper_type_fixed_roll,
            identity_name: '固定卷',
          },
          {
            identity_id: dictObj.paper_type_random_volume,
            identity_name: '随机卷',
          },
        ], //试卷类型字典
      }
    },
    created() {
      that = this
      this.fetchData()
      that.getOrgList()
    },
    methods: {
      handleSizeChange(val) {
        this.queryForm.pageSize = val
        this.fetchData()
      },
      handleCurrentChange(val) {
        this.queryForm.pageNo = val
        this.fetchData()
      },
      queryData() {
        this.queryForm.pageNo = 1
        this.fetchData()
      },
      async fetchData() {
        this.listLoading = true
        const { data, totalCount } = await this.getList(
          '/exam/examPaperInfo/pageList',
          this.queryForm
        )
        this.list = data
        this.total = totalCount
        this.title = totalCount
        this.listLoading = false
      },
      handleDetail(row) {
        this.$refs['detail'].show(row)
      },
      handleEdit(row) {
        this.$refs['edit'].show(row)
      },
      handleDelete(row) {
        this.$baseConfirm('你确定要删除当前项吗?', null, async () => {
          const { data } = await this.doDelete('/exam/examPaperInfo/delete', {
            pkid: row.pkid,
          })
          this.$baseMessage(data.msg, data.result)
          if (data.result) {
            this.fetchData()
          }
        })
      },
      handlePaperques(row) {
        console.log(row)
        // this.$router.push({
        //   path: '/exam/paperques',
        //   query: { select_paper_code: row.paper_code },
        this.$refs['paperques'].show(row)
        // })
      },
      //获取机构部门列表
      getOrgList() {
        this.getList('/config/sysOrgInfo/getOrgOptions', {}).then((res) => {
          if (res && res.code == 200 && res.data) {
            that.orgDictList = res.data
          }
        })
      },
      //部门选择操作
      handleOrgChange(value) {
        if (value && value.length > 0) {
          that.queryForm.select_org_code = value[value.length - 1]
        } else {
          that.queryForm.select_org_code = ''
        }
      },
    },
  }
</script>

detail组件代码

<template>
  <el-dialog
    ref="detail"
    class="examPaperInfoDetail-container"
    :close-on-click-modal="false"
    :title="title"
    :visible.sync="dialogDataVisible"
    width="1000px"
    @close="close"
  >
    <div slot="title" class="header-title">
      <i class="ri-article-fill"></i>
      &nbsp;{{ title }}
    </div>
    <div class="content-container" style="margin-top: 0">
      <el-row class="data-row" :gutter="10">
        <el-col :span="7" style="border: 1px solid #efefef; height: 600px">
          <el-row class="mar-bot" style="margin-top: 10px; margin-right: 5px">
            <el-col class="label-col">试卷标题:</el-col>
            <el-col class="value-col">{{ data.paper_title }}</el-col>
          </el-row>
          <el-row class="mar-bot" style="margin-right: 5px">
            <el-col class="label-col">试卷类型:</el-col>
            <el-col class="value-col">{{ data.paper_type_label }}</el-col>
          </el-row>
          <!-- <el-row class="mar-bot" >
              <el-col
                v-if="data.paper_type == dictObj.paper_type_random_volume"
                class="row-col"
                :span="12"
              >
                <el-row style="margin-right: 5px;">
                  <el-col class="label-col">所属题库:</el-col>
                  <el-col class="value-col">{{ data.quesbank_title }}</el-col>
                </el-row>
              </el-col>
            </el-row> -->
          <el-row class="mar-bot">
            <el-col class="label-col">试卷分数:</el-col>
            <el-col class="value-col">{{ data.paper_grade }}</el-col>
          </el-row>
          <el-row>
            <el-col :span="14">
              <el-row class="mar-bot">
                <el-col class="label-col">单选题分数:</el-col>
                <el-col class="value-col" style="width: 55px">
                  {{ data.single_grade }}
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="10">
              <el-row class="mar-bot">
                <el-col class="label-col" style="width: 55px">数量:</el-col>
                <el-col class="value-col" style="width: 55px">
                  {{ data.single_num }}
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="14">
              <el-row class="mar-bot">
                <el-col class="label-col">多选题分数:</el-col>
                <el-col class="value-col" style="width: 55px">
                  {{ data.multi_grade }}
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="10">
              <el-row class="mar-bot">
                <el-col class="label-col" style="width: 55px">数量:</el-col>
                <el-col class="value-col" style="width: 55px">
                  {{ data.multi_num }}
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="14">
              <el-row class="mar-bot">
                <el-col class="label-col">判断题分数:</el-col>
                <el-col class="value-col" style="width: 55px">
                  {{ data.judge_grade }}
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="10">
              <el-row class="mar-bot">
                <el-col class="label-col" style="width: 55px">数量:</el-col>
                <el-col class="value-col" style="width: 55px">
                  {{ data.judge_num }}
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="14">
              <el-row class="mar-bot">
                <el-col class="label-col">填空题分数:</el-col>
                <el-col class="value-col" style="width: 55px">
                  {{ data.bank_grade }}
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="10">
              <el-row class="mar-bot">
                <el-col class="label-col" style="width: 55px">数量:</el-col>
                <el-col class="value-col" style="width: 55px">
                  {{ data.bank_num }}
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="14">
              <el-row class="mar-bot">
                <el-col class="label-col">问答题分数:</el-col>
                <el-col class="value-col" style="width: 55px">
                  {{ data.ques_grade }}
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="10">
              <el-row class="mar-bot">
                <el-col class="label-col" style="width: 55px">数量:</el-col>
                <el-col class="value-col" style="width: 55px">
                  {{ data.ques_num }}
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row class="mar-bot">
            <el-col class="label-col">创建人:</el-col>
            <el-col class="value-col">{{ data.creator }}</el-col>
          </el-row>
          <el-row class="mar-bot">
            <el-col class="label-col">创建时间:</el-col>
            <el-col class="value-col">
              {{ data.create_time.replace('T', ' ').replace('.000+00:00', '') }}
            </el-col>
          </el-row>
        </el-col>

        <el-col :span="17" style="border: 1px solid #efefef; height: 600px">
          <el-row>
            <el-col
              style="
                text-align: center;
                margin-top: 20px;
                font-size: 28px;
                font-weight: bold;
              "
            >
              {{ data.paper_title }}
            </el-col>
          </el-row>
          <el-row>
            <el-col style="text-align: center">
              单选题{{ data.single_num }}题,多选题{{
                data.multi_num
              }}题,判断题{{ data.judge_num }}题,问答题{{
                data.ques_num
              }}题,填空题{{ data.bank_num }}题,满分:{{ data.paper_grade }}分
              <div class="subject-container">
                <div v-for="(o, i) in list" :key="i" class="block">
                  <div
                    class="subject-cate"
                    style="
                      text-align: left;
                      margin-left: 20px;
                      font-weight: bold;
                      display: flex;
                      justify-content: space-between;
                    "
                  >
                    {{ o.subject_title_label }}
                  </div>
                  <div
                    v-for="(so, si) in o.children"
                    :key="si"
                    class="subject-item"
                  >
                    <div
                      v-if="
                        (so.subject_title &&
                          so.ques_type ===
                            dictObj.ques_type_single_choice_questions) ||
                        so.ques_type ===
                          dictObj.ques_type_multiple_choice_questions
                      "
                      class="subject-title"
                      style="text-align: left; margin-left: 40px"
                    >
                      {{ si + 1 }}.{{ so.subject_title }} ({{ so.score }}分)
                    </div>
                    <div
                      v-if="
                        (so.subject_title &&
                          so.ques_type === dictObj.ques_type_completion) ||
                        so.ques_type === dictObj.ques_type_q_a_questions ||
                        so.ques_type === dictObj.ques_type_true_or_false
                      "
                      class="subject-title"
                      style="text-align: left; margin-left: 40px"
                    >
                      {{ si + 1 }}.{{ so.content }} ({{ so.score }}分)
                    </div>
                    <!--单选题选项-->
                    <div
                      v-if="
                        so.ques_type ===
                        dictObj.ques_type_single_choice_questions
                      "
                      style="text-align: left; margin: 0 50px"
                    >
                      <!-- v-model="so.subject_answer" -->
                      <el-radio-group v-model="so.subject_answer1" size="large">
                        <div
                          v-for="(key, keyI) in so.content"
                          :key="keyI"
                          class="option-item"
                        >
                          <el-radio :label="key.code">
                            {{ key.code }}、{{ key.name }}
                          </el-radio>
                        </div>
                      </el-radio-group>
                    </div>
                    <!-- 判断题 -->
                    <div
                      v-if="so.ques_type === dictObj.ques_type_true_or_false"
                      style="text-align: left; margin: 0 50px"
                    >
                      <el-radio-group v-model="so.subject_answer1" size="large">
                        <div
                          v-for="(key, index) in list1"
                          :key="index"
                          class="option-item"
                        >
                          <el-radio :label="key">{{ key.name }}</el-radio>
                        </div>
                      </el-radio-group>
                    </div>
                    <!--多选题-->
                    <div
                      v-if="
                        so.ques_type ===
                        dictObj.ques_type_multiple_choice_questions
                      "
                      style="text-align: left; margin: 0 50px"
                    >
                      <!-- v-model="so.subject_answer" -->
                      <el-checkbox-group v-model="checkList" size="large">
                        <div
                          v-for="(key, keyI) in so.content"
                          :key="keyI"
                          class="option-item"
                        >
                          <el-checkbox :label="key">
                            {{ key.code }}、{{ key.name }}
                          </el-checkbox>
                        </div>
                      </el-checkbox-group>
                    </div>
                    <!--填空题-->
                    <!-- v-model="so.subject_answer[key]"  -->
                    <div v-if="so.ques_type === dictObj.ques_type_completion">
                      <el-input
                        v-for="(key, keyI) in so.subject_answer"
                        :key="keyI"
                        v-model="so.subject_answer[keyI].name1"
                        class="option-item"
                        :placeholder="'请输入' + (keyI + 1) + '处答案'"
                        style="margin: 0 50px; width: 567px"
                      />
                    </div>

                    <!--问答题-->
                    <div
                      v-if="so.ques_type === dictObj.ques_type_q_a_questions"
                    >
                      <!-- v-model="so.subject_answer" -->
                      <el-input
                        v-model="so.subject_answer1"
                        :autosize="{ minRows: 3, maxRows: 5 }"
                        class="option-item"
                        placeholder="请输入答案"
                        style="margin: 0 50px 10px; width: 567px"
                        type="textarea"
                      />
                    </div>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">关 闭</el-button>
    </div>
    <selectExamSubject
      ref="selectExamSubject"
      append-to-body
      :busi-dict-list="busiDictList"
      :difficulty-dict-list="difficultyDictList"
      :org-dict-list="orgDictList"
      :ques-type-dict-list="quesTypeDictList"
      @fetch-data="fetchData1"
    />
  </el-dialog>
</template>

<script>
  var that
  import selectExamSubject from '../paperques/selectExamSubject'
  import { getOne } from '@/api/index'
  import { dictObj } from '@/utils/dictionary'
  export default {
    name: 'ExamPaperInfoDetail',
    components: { selectExamSubject },
    data() {
      return {
        quesTypeDictList: [], //题目类型的数据字典(ques_type)
        difficultyDictList: [], //题目难度的数据字典(difficulty)
        orgDictList: [], //机构部门字典
        busiDictList: [], //业务类别字典
        checkList: [],
        list1: [
          {
            code: 'A',
            name: 'true',
          },
          {
            code: 'B',
            name: 'false',
          },
        ],
        list: [],
        dictObj: dictObj,
        title: '考试作业试卷详情',
        dialogDataVisible: false,
        data: {
          pkid: '',
          bank_grade: '',
          bank_num: '',
          create_time: '',
          creator: '',
          multi_grade: '',
          multi_num: '',
          org_code: '',
          paper_code: '',
          paper_grade: '',
          paper_title: '',
          ques_grade: '',
          ques_num: '',
          single_grade: '',
          single_num: '',
          judge_num: '',
          judge_grade: '',
          org_name: '',
          paper_type: '',
          paper_type_label: '',
          quesbank_title: '',
        },
      }
    },
    async created() {
      that = this
      that.getOrgList()
      that.getBusiList()
      that.quesTypeDictList = await that.getDictList('ques_type')
      that.difficultyDictList = await that.getDictList('difficulty')
    },
    methods: {
      //获取某项参数数据字典
      async getDictList(select_category) {
        const res = await this.getList('/config/sysDicInfo/list', {
          select_category: select_category,
        })
        if (res && res.code == 200 && res.data) {
          return res.data
        } else {
          return []
        }
      },
      //获取机构部门列表
      getOrgList() {
        this.getList('/config/sysOrgInfo/getOrgOptions', {}).then((res) => {
          if (res && res.code == 200 && res.data) {
            that.orgDictList = res.data
          }
        })
      },
      //获取业务类别列表
      getBusiList() {
        this.getList('/config/busi/list', {}).then((res) => {
          if (res && res.code == 200 && res.data) {
            that.busiDictList = res.data
          }
        })
      },
      async handleMove(
        prev_pkid,
        prev_order_sort,
        next_pkid,
        next_order_sort,
        paper_code,
        ques_type
      ) {
        console.log(prev_pkid, prev_pkid)
        const { data } = await this.getList(
          '/exam/examPaperquesInfo/swapSort',
          {
            prev_pkid: prev_pkid,
            prev_order_sort: prev_order_sort,
            next_pkid: next_pkid,
            next_order_sort: next_order_sort,
            paper_code: paper_code,
            ques_type: ques_type,
          }
        )
        this.$baseMessage(data.msg, data.result)
        if (data.result) {
          this.fetchData()
        }
      },
      handleAdd(paper_code) {
        var row = {
          paper_code: paper_code,
        }
        this.$refs['selectExamSubject'].show(row)
      },
      handleInsert(paper_code, subject_title, pkid, order_sort) {
        var row = {
          paper_code: paper_code,
          slot_ques_type: subject_title,
          slot_pkid: pkid,
          slot_order_sort: order_sort,
        }
        this.$refs['selectExamSubject'].show(row)
      },
      handleDelete(pkid) {
        console.log(pkid)
        this.$baseConfirm('你确定要删除当前项吗?', null, async () => {
          const { data } = await this.doDelete(
            '/exam/examPaperquesInfo/delete',
            { pkid: pkid }
          )
          this.$baseMessage(data.msg, data.result)
          if (data.result) {
            this.fetchData()
          }
        })
      },
      fetchData1() {
        let that = this
        getOne('/exam/examPaperInfo/one', {
          select_pkid: that.data.pkid,
        }).then(({ data }) => {
          Object.keys(this.data).forEach((key) => {
            this.data[key] = data[key]
          })
          that.fetchData()
        })
      },
      show(row) {
        console.log(row)
        let that = this
        getOne('/exam/examPaperInfo/one', {
          select_pkid: row.pkid,
        }).then(({ data }) => {
          Object.keys(this.data).forEach((key) => {
            this.data[key] = data[key]
          })
          that.fetchData()
        })
        this.dialogDataVisible = true
      },
      // async swapSort() {
      //   this.listLoading = true
      //   const { data} = await this.getList(
      //     ' /exam/examPaperquesInfo/swapSort',
      //     {
      //       // prev_pkid:
      //       // next_pkid:
      //     }
      //   )
      //   this.list = data
      //   // this.total = totalCount
      //   // this.title = totalCount
      //   this.listLoading = false
      // },
      async fetchData() {
        let that = this
        this.listLoading = true
        // console.log(data.person_code);
        const { data } = await this.getList('/exam/examPaperInfo/subjectList', {
          select_paper_code: that.data.paper_code,
          // "select_paper_code":"be0c2eef84ed47cf8923b3571b03e591"
        })
        this.list = data.subjectList
        for (let item of this.list) {
          if (item.children.length != 0) {
            for (let item1 of item.children) {
              //单选 多选 填空
              // || item1.ques_type==dictObj.ques_type_completion
              if (
                item1.ques_type == dictObj.ques_type_single_choice_questions ||
                item1.ques_type == dictObj.ques_type_multiple_choice_questions
              ) {
                // console.log(item1.ques_type);
                // console.log(item1.content.replace("data:",""));
                item1.content = JSON.parse(item1.content.replace('data:', ''))
                // console.log(item1.content);
              }
              if (item1.ques_type == dictObj.ques_type_completion) {
                item1.subject_answer = JSON.parse(
                  item1.subject_answer.replace('data:', '')
                )
              }
              // console.log(this.item1.subject_answer);
            }
            // console.log(this.item1.content);
            // console.log(this.item1.subject_answer);
          }
        }
        this.listLoading = false
      },
      close() {
        Object.assign(this.$data.data, this.$options.data().data)
        this.dialogDataVisible = false
      },
    },
  }
</script>

<style lang="scss" scoped>
  $labelWidth: 90px;

  .data-row {
    .mar-bot {
      margin-bottom: 10px;
    }

    .row-col {
      margin-bottom: 10px;
    }

    .el-col {
      // min-height: 38px;
      // max-height: 114px;
      line-height: 36px;
      overflow-y: auto;
    }

    .label-col {
      width: $labelWidth;
      text-align: right;
      padding-right: 10px;
    }

    .value-col {
      border: 1px solid #efefef;
      width: calc(100% - #{$labelWidth});
      padding: 0 10px;
      border-radius: 2.5px;
    }

    .two-rows-height {
      max-height: 86px;
      line-height: 42px;
    }
  }

  // .subject-container {
  //   letter-spacing: 1px;
  // }
  .text-mar-left {
    text-align: left;
    margin-left: 0 20px;
  }

  .subject-cate {
    color: #303133;
    font-size: 17px;
    margin: 15px 0;
    letter-spacing: 2px;
  }

  .subject-item {
    margin: 0 0 25px 0;
  }

  .subject-title {
    color: #303133;
    font-size: 16px;
    margin: 8px 0;
  }

  .option-item {
    margin: 12px 0;
  }

  .sub-btn {
    width: 200px;
  }
</style>

edit组件代码

<template>
  <el-dialog
    :close-on-click-modal="false"
    :title="title"
    :visible.sync="dialogFormVisible"
    width="850px"
    @close="close"
  >
    <div slot="title" class="header-title">
      <i class="ri-edit-box-fill"></i>
      &nbsp;{{ title }}
    </div>
    <el-form ref="form" label-width="90px" :model="form" :rules="rules">
      <el-form-item label="" prop="pkid" style="display: none" />
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item label="所属部门" prop="org_code">
            <el-cascader
              v-model="form.org_code"
              :disabled="form.pkid != ''"
              :options="orgDictList"
              :props="orgProps"
              @change="handleOrgChange"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item label="试卷标题" prop="paper_title">
            <el-input v-model="form.paper_title" clearable maxlength="20" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item label="试卷类型" prop="paper_type">
            <el-radio-group v-model="form.paper_type" @change="changePaperType">
              <template v-for="item in paperTypeDictList">
                <el-radio
                  :key="item.identity_id"
                  :disabled="form.pkid != ''"
                  :label="item.identity_id"
                >
                  {{ item.identity_name }}
                </el-radio>
              </template>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row
        v-if="form.paper_type == dictObj.paper_type_random_volume"
        :gutter="10"
      >
        <el-col :span="24">
          <el-form-item label="所选题库" prop="bank_code">
            <el-select
              v-if="form.pkid == ''"
              v-model="form.bank_code"
              clearable
              :filter-method="getQuesbankList"
              filterable
              placeholder="请选择试题题库"
              @visible-change="visibleQuesbank"
            >
              <el-option
                v-for="item in quesbankList"
                :key="item.quesbank_code"
                :label="item.quesbank_title"
                :value="item.quesbank_code"
              >
                <span style="float: left">{{ item.quesbank_title }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">
                  {{ item.busi_name }}
                </span>
              </el-option>
            </el-select>
            <el-input
              v-if="form.pkid != ''"
              v-model="form.quesbank_title"
              disabled
            />
          </el-form-item>
        </el-col>
      </el-row>
      <div class="tip"  v-if="form.paper_type == dictObj.paper_type_random_volume">
        <p>
          <span style="font-size: medium; font-weight: bold">单选题</span>
          <span>&nbsp;&nbsp;</span>
        </p>
      </div>
      <el-row
        v-if="form.paper_type == dictObj.paper_type_random_volume"
        :gutter="10"
      >
        <el-col :span="8">
          <el-form-item label="数量" prop="single_num">
            <el-input-number
              v-model="form.single_num"
              :max="999999"
              :min="0"
              step-strictly
              @change="changeSingle"
            />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="每题分数" prop="single_grade_unit">
            <el-input-number
              v-model="form.single_grade_unit"
              :max="999999"
              :min="0"
              step-strictly
              @change="changeSingle"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="总分数" prop="single_grade">
            <el-input-number
              v-model="form.single_grade"
              disabled
              :max="999999"
              :min="0"
              step-strictly
            />
          </el-form-item>
        </el-col>
      </el-row>
      <div class="tip"  v-if="form.paper_type == dictObj.paper_type_random_volume">
        <p>
          <span style="font-size: medium; font-weight: bold">多选题</span>
          <span>&nbsp;&nbsp;</span>
        </p>
      </div>
      <el-row
        v-if="form.paper_type == dictObj.paper_type_random_volume"
        :gutter="10"
      >
        <el-col :span="8">
          <el-form-item label="数量" prop="multi_num">
            <el-input-number
              v-model="form.multi_num"
              :max="999999"
              :min="0"
              step-strictly
              @change="changeMulti"
            />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="每题分数" prop="multi_grade_unit">
            <el-input-number
              v-model="form.multi_grade_unit"
              :max="999999"
              :min="0"
              step-strictly
              @change="changeMulti"
            />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="总分数" prop="multi_grade">
            <el-input-number
              v-model="form.multi_grade"
              disabled
              :max="999999"
              :min="0"
              step-strictly
            />
          </el-form-item>
        </el-col>
      </el-row>
      <div class="tip"  v-if="form.paper_type == dictObj.paper_type_random_volume">
        <p>
          <span style="font-size: medium; font-weight: bold">判断题</span>
          <span>&nbsp;&nbsp;</span>
        </p>
      </div>
      <el-row
        v-if="form.paper_type == dictObj.paper_type_random_volume"
        :gutter="10"
      >
        <el-col :span="8">
          <el-form-item label="数量" prop="judge_num">
            <el-input-number
              v-model="form.judge_num"
              :max="999999"
              :min="0"
              step-strictly
              @change="changeJudge"
            />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="每题分数" prop="judge_grade_unit">
            <el-input-number
              v-model="form.judge_grade_unit"
              :max="999999"
              :min="0"
              step-strictly
              @change="changeJudge"
            />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="总分数" prop="judge_grade">
            <el-input-number
              v-model="form.judge_grade"
              disabled
              :max="999999"
              :min="0"
              step-strictly
            />
          </el-form-item>
        </el-col>
      </el-row>
      <div class="tip"  v-if="form.paper_type == dictObj.paper_type_random_volume">
        <p>
          <span style="font-size: medium; font-weight: bold">填空题</span>
          <span>&nbsp;&nbsp;</span>
        </p>
      </div>
      <el-row
        v-if="form.paper_type == dictObj.paper_type_random_volume"
        :gutter="10"
      >
        <el-col :span="8">
          <el-form-item label="数量" prop="bank_num">
            <el-input-number
              v-model="form.bank_num"
              :max="999999"
              :min="0"
              step-strictly
              @change="changeBank"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="每题分数" prop="bank_grade_unit">
            <el-input-number
              v-model="form.bank_grade_unit"
              :max="999999"
              :min="0"
              step-strictly
              @change="changeBank"
            />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="总分数" prop="bank_grade">
            <el-input-number
              v-model="form.bank_grade"
              disabled
              :max="999999"
              :min="0"
              step-strictly
            />
          </el-form-item>
        </el-col>
      </el-row>
      <div class="tip"  v-if="form.paper_type == dictObj.paper_type_random_volume">
        <p>
          <span style="font-size: medium; font-weight: bold">问答题</span>
          <span>&nbsp;&nbsp;</span>
        </p>
      </div>
      <el-row
        v-if="form.paper_type == dictObj.paper_type_random_volume"
        :gutter="10"
      >
        <el-col :span="8">
          <el-form-item label="数量" prop="ques_num">
            <el-input-number
              v-model="form.ques_num"
              :max="999999"
              :min="0"
              step-strictly
              @change="changeQues"
            />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="每题分数" prop="ques_grade_unit">
            <el-input-number
              v-model="form.ques_grade_unit"
              :max="999999"
              :min="0"
              step-strictly
              @change="changeQues"
            />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="总分数" prop="ques_grade">
            <el-input-number
              v-model="form.ques_grade"
              disabled
              :max="999999"
              :min="0"
              step-strictly
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { dictObj } from '@/utils/dictionary'
  export default {
    name: 'ExamPaperInfoEdit',
    props: {
      // 机构部门字典
      orgDictList: {
        type: Array,
        default: function () {
          return []
        },
      },
      // //试卷类型字典
      paperTypeDictList: {
        type: Array,
        default: function () {
          return []
        },
      },
    },
    data() {
      return {
        dictObj: dictObj,
        title: '',
        dialogFormVisible: false,
        form: {
          pkid: '',
          bank_grade: '',
          bank_num: '',
          multi_grade: '',
          multi_num: '',
          org_code: '',
          paper_code: '',
          paper_grade: '',
          paper_title: '',
          ques_grade: '',
          ques_num: '',
          single_grade: '',
          single_num: '',
          judge_num: '',
          judge_grade: '',
          paper_type: '',
          bank_code: '',
          bank_grade_unit: 0,
          multi_grade_unit: 0,
          ques_grade_unit: 0,
          single_grade_unit: 0,
          judge_grade_unit: 0,
          quesbank_title: 0,
        },
        rules: {
          pkid: [{ required: false }],
          bank_grade: [
            { required: true, trigger: 'blur', message: '请输入填空题分数' },
          ],
          bank_num: [
            { required: true, trigger: 'blur', message: '请输入填空题数量' },
          ],
          multi_grade: [
            { required: true, trigger: 'blur', message: '请输入多选题分数' },
          ],
          multi_num: [
            { required: true, trigger: 'blur', message: '请输入多选题数量' },
          ],
          org_code: [
            { required: true, trigger: 'blur', message: '请输入所属部门' },
          ],
          paper_code: [
            { required: true, trigger: 'blur', message: '请输入试卷编码' },
          ],
          paper_grade: [
            { required: true, trigger: 'blur', message: '请输入试卷分数' },
          ],
          paper_title: [
            { required: true, trigger: 'blur', message: '请输入试卷标题' },
          ],
          ques_grade: [
            { required: true, trigger: 'blur', message: '请输入问答题分数' },
          ],
          ques_num: [
            { required: true, trigger: 'blur', message: '请输入问答题数量' },
          ],
          single_grade: [
            { required: true, trigger: 'blur', message: '请输入单选题分数' },
          ],
          single_num: [
            { required: true, trigger: 'blur', message: '请输入单选题数量' },
          ],
          judge_grade: [
            { required: true, trigger: 'blur', message: '请输入判断题分数' },
          ],
          judge_num: [
            { required: true, trigger: 'blur', message: '请输入判断题数量' },
          ],
          paper_type: [
            { required: true, trigger: 'blur', message: '请选择试卷类型' },
          ],
          bank_code: [
            { required: true, trigger: 'blur', message: '请选择试题题库' },
          ],
          multi_grade_unit: [
            {
              required: true,
              trigger: 'blur',
              message: '请输入多选题每题分数',
            },
          ],
          bank_grade_unit: [
            {
              required: true,
              trigger: 'blur',
              message: '请输入填空题每题分数',
            },
          ],
          ques_grade_unit: [
            {
              required: true,
              trigger: 'blur',
              message: '请输入问答题每题分数',
            },
          ],
          single_grade_unit: [
            {
              required: true,
              trigger: 'blur',
              message: '请输入单选题每题分数',
            },
          ],
          judge_grade_unit: [
            {
              required: true,
              trigger: 'blur',
              message: '请输入判断题每题分数',
            },
          ],
        },

        orgProps: {
          label: 'org_name',
          value: 'org_code',
        }, //机构部门的参数定义

        quesbankList: [], //试题题库列表
      }
    },
    methods: {
      show(row) {
        console.log(row)
        if (!row.pkid) {
          this.title = '新增考试作业试卷'
        } else {
          this.title = '编辑考试作业试卷'
          this.getOne('/exam/examPaperInfo/one', {
            select_pkid: row.pkid,
          }).then(({ data }) => {
            Object.keys(this.form).forEach((key) => {
              this.form[key] = data[key]
            })
            this.form.single_grade_unit = 0
            if (this.form.single_num > 0) {
              this.form.single_grade_unit =
                this.form.single_grade / this.form.single_num
            }
            this.form.multi_grade_unit = 0
            if (this.form.multi_num > 0) {
              this.form.multi_grade_unit =
                this.form.multi_grade / this.form.multi_num
            }
            this.form.judge_grade_unit = 0
            if (this.form.judge_num > 0) {
              this.form.judge_grade_unit =
                this.form.judge_grade / this.form.judge_num
            }
            this.form.bank_grade_unit = 0
            if (this.form.bank_num > 0) {
              this.form.bank_grade_unit =
                this.form.bank_grade / this.form.bank_num
            }
            this.form.ques_grade_unit = 0
            if (this.form.ques_num > 0) {
              this.form.ques_grade_unit =
                this.form.ques_grade / this.form.ques_num
            }
          })
        }
        this.dialogFormVisible = true
      },
      save() {
        let that = this
        if (that.form.paper_type == dictObj.paper_type_random_volume) {
          if (
            (this.form.single_grade_unit == 0 && this.form.single_num > 0) ||
            (this.form.single_grade_unit > 0 && this.form.single_num == 0)
          ) {
            // 部分为0
            this.$baseMessage('单选题数量或每题分值设置不非法', 'warning')
            return false
          }
          if (
            (this.form.multi_grade_unit == 0 && this.form.multi_num > 0) ||
            (this.form.multi_grade_unit > 0 && this.form.multi_num == 0)
          ) {
            // 部分为0
            this.$baseMessage('多选题数量或每题分值设置不非法', 'warning')
            return false
          }
          if (
            (this.form.judge_grade_unit == 0 && this.form.judge_num > 0) ||
            (this.form.judge_grade_unit > 0 && this.form.judge_num == 0)
          ) {
            // 部分为0
            this.$baseMessage('判断题数量或每题分值设置不非法', 'warning')
            return false
          }
          if (
            (this.form.bank_grade_unit == 0 && this.form.bank_num > 0) ||
            (this.form.bank_grade_unit > 0 && this.form.bank_num == 0)
          ) {
            // 部分为0
            this.$baseMessage('填空题数量或每题分值设置不非法', 'warning')
            return false
          }
          if (
            (this.form.ques_grade_unit == 0 && this.form.ques_num > 0) ||
            (this.form.ques_grade_unit > 0 && this.form.ques_num == 0)
          ) {
            // 部分为0
            this.$baseMessage('问答题数量或每题分值设置不非法', 'warning')
            return false
          }
        }
        this.$refs['form'].validate(async (valid) => {
          if (valid) {
            const { data } = await this.doSave(
              '/exam/examPaperInfo/save',
              this.form
            )
            console.log(data)
            this.$baseMessage(data.msg, data.result ? 'success' : 'warning')
            this.$emit('fetch-data')
            this.close()
            this.handleAdd(data.pkid, data.paperCode)
          } else {
            return false
          }
        })
      },
      close() {
        this.$refs['form'].resetFields()
        this.dialogFormVisible = false
      },
      handleAdd(pkid, paper_code) {
        console.log(pkid, paper_code)
        var row = {
          pkid: pkid,
          paper_code: paper_code,
        }
        console.log(row)
        this.$emit('show-details', row)
      },
      handleOrgChange(value) {
        if (value && value.length > 0) {
          this.form.org_code = value[value.length - 1]
        } else {
          this.form.org_code = ''
        }
        this.getQuesbankList('')
      },
      // 试卷类型的选择切换操作
      changePaperType() {
        // 试卷类型的切换需要清空一些数据项
        this.form.bank_code = ''
        this.form.single_num = 0
        this.form.single_grade = 0
        this.form.multi_num = 0
        this.form.multi_grade = 0
        this.form.judge_num = 0
        this.form.judge_grade = 0
        this.form.bank_num = 0
        this.form.bank_grade = 0
        this.form.ques_num = 0
        this.form.ques_grade = 0
        this.getQuesbankList('') // 重新查询试题题库列表
      },
      //获取试题题库列表
      getQuesbankList(e) {
        this.quesbankList = []
        if (this.form.org_code == '') {
          this.$baseMessage('请先选择所属部门', 'warning')
          return false
        }
        this.getList('/exam/examQuesbankInfo/pageList', {
          pageNo: 1,
          pageSize: 100,
          select_org_code: this.form.org_code,
          select_quesbank_title_like: e,
        }).then((res) => {
          if (res && res.code == 200 && res.data) {
            this.quesbankList = res.data
          }
        })
      },
      //“所选试题题库”下拉框出现/隐藏时触发
      visibleQuesbank(flag) {
        if (flag && this.quesbankList.length == 0) {
          // 下拉框出现
          this.getQuesbankList('') // 重新查询试题题库列表
        }
      },
      // 单选题的参数变更
      changeSingle() {
        this.form.single_grade =
          this.form.single_num * this.form.single_grade_unit
      },
      // 多选题的参数变更
      changeMulti() {
        this.form.multi_grade = this.form.multi_num * this.form.multi_grade_unit
      },
      // 判断题的参数变更
      changeJudge() {
        this.form.judge_grade = this.form.judge_num * this.form.judge_grade_unit
      },
      // 填空题的参数变更
      changeBank() {
        this.form.bank_grade = this.form.bank_num * this.form.bank_grade_unit
      },
      // 问答题的参数变更
      changeQues() {
        this.form.ques_grade = this.form.ques_num * this.form.ques_grade_unit
      },
    },
  }
</script>

paperques组件代码

<template>
  <el-dialog
    ref="detail"
    class="examPaperInfoDetail-container"
    :close-on-click-modal="false"
    :title="title"
    :visible.sync="dialogDataVisible"
    width="1000px"
    @close="close"
  >
    <div slot="title" class="header-title">
      <i class="ri-article-fill"></i>
      &nbsp;{{ title }}
    </div>
    <div class="content-container" style="margin-top: 0">
      <el-row class="data-row" :gutter="10">
        <el-col :span="7" style="border: 1px solid #efefef; height: 600px">
          <el-row class="mar-bot" style="margin-top: 10px; margin-right: 5px">
            <el-col class="label-col">试卷标题:</el-col>
            <el-col class="value-col">{{ data.paper_title }}</el-col>
          </el-row>
          <el-row class="mar-bot" style="margin-right: 5px">
            <el-col class="label-col">试卷类型:</el-col>
            <el-col class="value-col">{{ data.paper_type_label }}</el-col>
          </el-row>
          <!-- <el-row class="mar-bot" >
              <el-col
                v-if="data.paper_type == dictObj.paper_type_random_volume"
                class="row-col"
                :span="12"
              >
                <el-row style="margin-right: 5px;">
                  <el-col class="label-col">所属题库:</el-col>
                  <el-col class="value-col">{{ data.quesbank_title }}</el-col>
                </el-row>
              </el-col>
            </el-row> -->
          <el-row class="mar-bot">
            <el-col class="label-col">试卷分数:</el-col>
            <el-col class="value-col">{{ data.paper_grade }}</el-col>
          </el-row>
          <el-row>
            <el-col :span="14">
              <el-row class="mar-bot">
                <el-col class="label-col">单选题分数:</el-col>
                <el-col class="value-col" style="width: 55px">
                  {{ data.single_grade }}
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="10">
              <el-row class="mar-bot">
                <el-col class="label-col" style="width: 55px">数量:</el-col>
                <el-col class="value-col" style="width: 55px">
                  {{ data.single_num }}
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="14">
              <el-row class="mar-bot">
                <el-col class="label-col">多选题分数:</el-col>
                <el-col class="value-col" style="width: 55px">
                  {{ data.multi_grade }}
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="10">
              <el-row class="mar-bot">
                <el-col class="label-col" style="width: 55px">数量:</el-col>
                <el-col class="value-col" style="width: 55px">
                  {{ data.multi_num }}
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="14">
              <el-row class="mar-bot">
                <el-col class="label-col">判断题分数:</el-col>
                <el-col class="value-col" style="width: 55px">
                  {{ data.judge_grade }}
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="10">
              <el-row class="mar-bot">
                <el-col class="label-col" style="width: 55px">数量:</el-col>
                <el-col class="value-col" style="width: 55px">
                  {{ data.judge_num }}
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="14">
              <el-row class="mar-bot">
                <el-col class="label-col">填空题分数:</el-col>
                <el-col class="value-col" style="width: 55px">
                  {{ data.bank_grade }}
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="10">
              <el-row class="mar-bot">
                <el-col class="label-col" style="width: 55px">数量:</el-col>
                <el-col class="value-col" style="width: 55px">
                  {{ data.bank_num }}
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="14">
              <el-row class="mar-bot">
                <el-col class="label-col">问答题分数:</el-col>
                <el-col class="value-col" style="width: 55px">
                  {{ data.ques_grade }}
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="10">
              <el-row class="mar-bot">
                <el-col class="label-col" style="width: 55px">数量:</el-col>
                <el-col class="value-col" style="width: 55px">
                  {{ data.ques_num }}
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row class="mar-bot">
            <el-col class="label-col">创建人:</el-col>
            <el-col class="value-col">{{ data.creator }}</el-col>
          </el-row>
          <el-row class="mar-bot">
            <el-col class="label-col">创建时间:</el-col>
            <el-col class="value-col">
              {{ data.create_time.replace('T', ' ').replace('.000+00:00', '') }}
            </el-col>
          </el-row>
        </el-col>

        <el-col :span="17" style="border: 1px solid #efefef; height: 600px">
          <el-row>
            <el-col
              style="
                text-align: center;
                margin-top: 20px;
                font-size: 28px;
                font-weight: bold;
              "
            >
              {{ data.paper_title }}
            </el-col>
          </el-row>
          <el-row>
            <el-col style="text-align: center">
              单选题{{ data.single_num }}题,多选题{{
                data.multi_num
              }}题,判断题{{ data.judge_num }}题,问答题{{
                data.ques_num
              }}题,填空题{{ data.bank_num }}题,满分:{{ data.paper_grade }}分
              <div class="subject-container">
                <div v-for="(o, i) in list" :key="i" class="block">
                  <div
                    class="subject-cate"
                    style="
                      text-align: left;
                      margin-left: 20px;
                      font-weight: bold;
                      display: flex;
                      justify-content: space-between;
                    "
                  >
                    {{ o.subject_title_label }}
                    <el-button
                      type="warning"
                      @click="handleAdd(data.paper_code, o.subject_title)"
                    >
                      添加
                    </el-button>
                  </div>
                  <div
                    v-for="(so, si) in o.children"
                    :key="si"
                    class="subject-item"
                  >
                    <div
                      v-if="
                        (so.subject_title &&
                          so.ques_type ===
                            dictObj.ques_type_single_choice_questions) ||
                        so.ques_type ===
                          dictObj.ques_type_multiple_choice_questions
                      "
                      class="subject-title"
                      style="text-align: left; margin-left: 40px"
                    >
                      {{ si + 1 }}.{{ so.subject_title }} ({{ so.score }}分)
                    </div>
                    <div
                      v-if="
                        (so.subject_title &&
                          so.ques_type === dictObj.ques_type_completion) ||
                        so.ques_type === dictObj.ques_type_q_a_questions ||
                        so.ques_type === dictObj.ques_type_true_or_false
                      "
                      class="subject-title"
                      style="text-align: left; margin-left: 40px"
                    >
                      {{ si + 1 }}.{{ so.content }} ({{ so.score }}分)
                    </div>
                    <!--单选题选项-->
                    <div
                      v-if="
                        so.ques_type ===
                        dictObj.ques_type_single_choice_questions
                      "
                      style="text-align: left; margin: 0 50px"
                    >
                      <!-- v-model="so.subject_answer" -->
                      <el-radio-group v-model="so.subject_answer1" size="large">
                        <div
                          v-for="(key, keyI) in so.content"
                          :key="keyI"
                          class="option-item"
                        >
                          <el-radio :label="key.code">
                            {{ key.code }}、{{ key.name }}
                          </el-radio>
                        </div>
                      </el-radio-group>
                    </div>
                    <!-- 判断题 -->
                    <div
                      v-if="so.ques_type === dictObj.ques_type_true_or_false"
                      style="text-align: left; margin: 0 50px"
                    >
                      <el-radio-group v-model="so.subject_answer1" size="large">
                        <div
                          v-for="(key, index) in list1"
                          :key="index"
                          class="option-item"
                        >
                          <el-radio :label="key">{{ key.name }}</el-radio>
                        </div>
                      </el-radio-group>
                    </div>
                    <!--多选题-->
                    <div
                      v-if="
                        so.ques_type ===
                        dictObj.ques_type_multiple_choice_questions
                      "
                      style="text-align: left; margin: 0 50px"
                    >
                      <!-- v-model="so.subject_answer" -->
                      <el-checkbox-group v-model="checkList" size="large">
                        <div
                          v-for="(key, keyI) in so.content"
                          :key="keyI"
                          class="option-item"
                        >
                          <el-checkbox :label="key">
                            {{ key.code }}、{{ key.name }}
                          </el-checkbox>
                        </div>
                      </el-checkbox-group>
                    </div>
                    <!--填空题-->
                    <!-- v-model="so.subject_answer[key]"  -->
                    <div v-if="so.ques_type === dictObj.ques_type_completion">
                      <el-input
                        v-for="(key, keyI) in so.subject_answer"
                        :key="keyI"
                        v-model="so.subject_answer[keyI].name1"
                        class="option-item"
                        :placeholder="'请输入' + (keyI + 1) + '处答案'"
                        style="margin: 0 50px; width: 567px"
                      />
                    </div>

                    <!--问答题-->
                    <div
                      v-if="so.ques_type === dictObj.ques_type_q_a_questions"
                    >
                      <!-- v-model="so.subject_answer" -->
                      <el-input
                        v-model="so.subject_answer1"
                        :autosize="{ minRows: 3, maxRows: 5 }"
                        class="option-item"
                        placeholder="请输入答案"
                        style="margin: 0 50px 10px; width: 567px"
                        type="textarea"
                      />
                    </div>

                    <!-- 答案与解析 -->
                    <!-- 单选 多选 判断 -->
                    <div
                      v-if="
                        (so.subject_answer &&
                          so.ques_type ===
                            dictObj.ques_type_single_choice_questions) ||
                        so.ques_type ===
                          dictObj.ques_type_multiple_choice_questions ||
                        so.ques_type === dictObj.ques_type_true_or_false ||
                        so.ques_type === dictObj.ques_type_q_a_questions
                      "
                      style="
                        border: 1px solid red;
                        margin: 0 30px;
                        text-align: left;
                        padding-left: 20px;
                      "
                    >
                      <el-row>
                        <el-col :span="3" style="font-weight: bold">
                          正确答案:
                        </el-col>
                        <el-col :span="21">{{ so.subject_answer }}</el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="3" style="font-weight: bold">
                          答案解析:
                        </el-col>
                        <el-col :span="21">{{ so.analysis }}</el-col>
                      </el-row>
                    </div>

                    <div
                      v-if="
                        so.subject_answer &&
                        so.ques_type === dictObj.ques_type_completion
                      "
                      style="
                        border: 1px solid red;
                        margin: 0 30px;
                        text-align: left;
                        padding-left: 20px;
                      "
                    >
                      <el-row
                        v-for="(key, keyI) in so.subject_answer"
                        :key="keyI"
                      >
                        <el-col :span="3" style="font-weight: bold">
                          正确答案:
                        </el-col>
                        <el-col :span="21">
                          {{ key.code.replace('{', '').replace('}', '') }}、{{
                            key.name
                          }}
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="3" style="font-weight: bold">
                          答案解析:
                        </el-col>
                        <el-col :span="21">{{ so.analysis }}</el-col>
                      </el-row>
                    </div>

                    <div
                      v-if="
                        o.children.length != 0 &&
                        o.children != null &&
                        o.children != ''
                      "
                      style="text-align: right; margin-top: 10px"
                    >
                      <el-button
                        type="warning"
                        @click="
                          handleInsert(
                            so.paper_code,
                            o.subject_title,
                            so.pkid,
                            so.order_sort
                          )
                        "
                      >
                        插入
                      </el-button>
                      <el-button type="danger" @click="handleDelete(so.pkid)">
                        删除
                      </el-button>

                      <el-button
                        v-if="si != 0"
                        type="success"
                        @click="
                          handleMove(
                            o.children[si - 1].pkid,
                            o.children[si - 1].order_sort,
                            so.pkid,
                            so.order_sort,
                            data.paper_code,
                            so.ques_type
                          )
                        "
                      >
                        上移
                      </el-button>

                      <el-button
                        v-if="si != o.children.length - 1"
                        type="success"
                        @click="
                          handleMove(
                            so.pkid,
                            so.order_sort,
                            o.children[si + 1].pkid,
                            o.children[si + 1].order_sort,
                            data.paper_code,
                            so.ques_type
                          )
                        "
                      >
                        下移
                      </el-button>
                    </div>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">关 闭</el-button>
    </div>
    <selectExamSubject
      ref="selectExamSubject"
      append-to-body
      :busi-dict-list="busiDictList"
      :difficulty-dict-list="difficultyDictList"
      :org-dict-list="orgDictList"
      :ques-type-dict-list="quesTypeDictList"
      @fetch-data="fetchData1"
    />
  </el-dialog>
</template>

<script>
  var that
  import selectExamSubject from '../paperques/selectExamSubject'
  import { getOne } from '@/api/index'
  import { dictObj } from '@/utils/dictionary'
  export default {
    name: 'ExamPaperInfoDetail',
    components: { selectExamSubject },
    data() {
      return {
        quesTypeDictList: [], //题目类型的数据字典(ques_type)
        difficultyDictList: [], //题目难度的数据字典(difficulty)
        orgDictList: [], //机构部门字典
        busiDictList: [], //业务类别字典
        checkList: [],
        list1: [
          {
            code: 'A',
            name: 'true',
          },
          {
            code: 'B',
            name: 'false',
          },
        ],
        list: [],
        dictObj: dictObj,
        title: '考试作业试卷详情',
        dialogDataVisible: false,
        data: {
          pkid: '',
          bank_grade: '',
          bank_num: '',
          create_time: '',
          creator: '',
          multi_grade: '',
          multi_num: '',
          org_code: '',
          paper_code: '',
          paper_grade: '',
          paper_title: '',
          ques_grade: '',
          ques_num: '',
          single_grade: '',
          single_num: '',
          judge_num: '',
          judge_grade: '',
          org_name: '',
          paper_type: '',
          paper_type_label: '',
          quesbank_title: '',
        },
      }
    },
    async created() {
      that = this
      that.getOrgList()
      that.getBusiList()
      that.quesTypeDictList = await that.getDictList('ques_type')
      that.difficultyDictList = await that.getDictList('difficulty')
    },
    methods: {
      //获取某项参数数据字典
      async getDictList(select_category) {
        const res = await this.getList('/config/sysDicInfo/list', {
          select_category: select_category,
        })
        if (res && res.code == 200 && res.data) {
          return res.data
        } else {
          return []
        }
      },
      //获取机构部门列表
      getOrgList() {
        this.getList('/config/sysOrgInfo/getOrgOptions', {}).then((res) => {
          if (res && res.code == 200 && res.data) {
            that.orgDictList = res.data
          }
        })
      },
      //获取业务类别列表
      getBusiList() {
        this.getList('/config/busi/list', {}).then((res) => {
          if (res && res.code == 200 && res.data) {
            that.busiDictList = res.data
          }
        })
      },
      async handleMove(
        prev_pkid,
        prev_order_sort,
        next_pkid,
        next_order_sort,
        paper_code,
        ques_type
      ) {
        console.log(prev_pkid, prev_pkid)
        const { data } = await this.getList(
          '/exam/examPaperquesInfo/swapSort',
          {
            prev_pkid: prev_pkid,
            prev_order_sort: prev_order_sort,
            next_pkid: next_pkid,
            next_order_sort: next_order_sort,
            paper_code: paper_code,
            ques_type: ques_type,
          }
        )
        this.$baseMessage(data.msg, data.result)
        if (data.result) {
          this.fetchData()
        }
      },
      handleAdd(paper_code, subject_title) {
        var row = {
          paper_code: paper_code,
          select_ques_type: subject_title,
        }
        this.$refs['selectExamSubject'].show(row)
      },
      handleInsert(paper_code, subject_title, pkid, order_sort) {
        var row = {
          paper_code: paper_code,
          slot_ques_type: subject_title,
          slot_pkid: pkid,
          slot_order_sort: order_sort,
        }
        this.$refs['selectExamSubject'].show(row)
      },
      handleDelete(pkid) {
        console.log(pkid)
        this.$baseConfirm('你确定要删除当前项吗?', null, async () => {
          const { data } = await this.doDelete(
            '/exam/examPaperquesInfo/delete',
            { pkid: pkid }
          )
          this.$baseMessage(data.msg, data.result)
          if (data.result) {
            this.fetchData()
          }
        })
      },
      fetchData1() {
        let that = this
        getOne('/exam/examPaperInfo/one', {
          select_pkid: that.data.pkid,
        }).then(({ data }) => {
          Object.keys(this.data).forEach((key) => {
            this.data[key] = data[key]
          })
          that.fetchData()
        })
      },
      show(row) {
        console.log(row)
        let that = this
        getOne('/exam/examPaperInfo/one', {
          select_pkid: row.pkid,
        }).then(({ data }) => {
          Object.keys(this.data).forEach((key) => {
            this.data[key] = data[key]
          })
          that.fetchData()
        })
        this.dialogDataVisible = true
      },
      async fetchData() {
        let that = this
        this.listLoading = true
        const { data } = await this.getList('/exam/examPaperInfo/subjectList', {
          select_paper_code: that.data.paper_code,
        })
        this.list = data.subjectList
        for (let item of this.list) {
          if (item.children.length != 0) {
            for (let item1 of item.children) {
              //单选 多选 填空
              if (
                item1.ques_type == dictObj.ques_type_single_choice_questions ||
                item1.ques_type == dictObj.ques_type_multiple_choice_questions
              ) {
                item1.content = JSON.parse(item1.content.replace('data:', ''))
              }
              if (item1.ques_type == dictObj.ques_type_completion) {
                item1.subject_answer = JSON.parse(
                  item1.subject_answer.replace('data:', '')
                )
              }
            }
          }
        }
        this.listLoading = false
      },
      close() {
        Object.assign(this.$data.data, this.$options.data().data)
        this.dialogDataVisible = false
      },
    },
  }
</script>

<style lang="scss" scoped>
  $labelWidth: 90px;

  .data-row {
    .mar-bot {
      margin-bottom: 10px;
    }

    .row-col {
      margin-bottom: 10px;
    }

    .el-col {
      // min-height: 38px;
      // max-height: 114px;
      line-height: 36px;
      overflow-y: auto;
    }

    .label-col {
      width: $labelWidth;
      text-align: right;
      padding-right: 10px;
    }

    .value-col {
      border: 1px solid #efefef;
      width: calc(100% - #{$labelWidth});
      padding: 0 10px;
      border-radius: 2.5px;
    }

    .two-rows-height {
      max-height: 86px;
      line-height: 42px;
    }
  }

  // .subject-container {
  //   letter-spacing: 1px;
  // }
  .text-mar-left {
    text-align: left;
    margin-left: 0 20px;
  }

  .subject-cate {
    color: #303133;
    font-size: 17px;
    margin: 15px 0;
    letter-spacing: 2px;
  }

  .subject-item {
    margin: 0 0 25px 0;
  }

  .subject-title {
    color: #303133;
    font-size: 16px;
    margin: 8px 0;
  }

  .option-item {
    margin: 12px 0;
  }

  .sub-btn {
    width: 200px;
  }
</style>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值