zydx-plus 1.35.630 → 1.35.631

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zydx-plus",
-  "version": "1.35.630",
+  "version": "1.35.631",
   "description": "Vue.js",
   "main": "src/index.js",
   "files": [

package/src/components/seek/src/word.vue

@@ -1,29 +1,34 @@
 <template>
+  <!-- 试题展示组件：支持单选/多选、材料附件、自定义按钮、答题状态反馈 -->
   <div :class="{paper: borderShow}">
     <div class="parer-cont" ref="parer">
+      <!-- 题目迭代 -->
       <div class="paper-choice" :class="{'array-ch': !styleText(item.testKey)}" v-for="(item,index) in value">
         <div class="subject">
+          <!-- 题目标题区域：有题号展示题号，否则展示序号 -->
           <div class="subject-title" :class="{'padd': item.top !== 0}" v-if="item.subject">
-            <input v-if="multipleShow" type="checkbox" :checked="item.checked" @change="checkboxChange($event,index)"
+            <!-- 多选模式下的勾选框 -->
+            <input v-if="multipleShow" type="checkbox" :disabled="multipleDisabled" :checked="item.checked" @change="checkboxChange($event,index)"
                    name="check"/>
+            <!-- 有题号展示题号 -->
             <span v-if="item.quesNumber" :style="{'font-weight': titleCrude?700:'normal'}">{{ item.quesNumber }}<em
                 v-html="item.question"></em><em v-if="scoreShow">({{ item.score }}分)</em>
+              <!-- 自定义操作按钮 -->
               <i class="subject-but" ref="subject">
-                <!-- <b :style="{right: -item.right + 'px', top: item.top + 'px'}" ref="b"> -->
-                      <button class="sees-but" :disabled="it.disabled" v-for="(it) in item.customBut" :class="{'buts-actives theme-text': it.active&&it.butStart,'buts-disabled': it.disabled}" @click="customButTap(it,item)">{{ it.active? it.nameActive: it.name }}</button>
-                  <!-- </b> -->
+                <button class="sees-but" :disabled="it.disabled" v-for="(it) in item.customBut" :class="{'buts-actives theme-text': it.active&&it.butStart,'buts-disabled': it.disabled}" @click="customButTap(it,item)">{{ it.active? it.nameActive: it.name }}</button>
               </i>
             </span>
+            <!-- 无题号则展示自增序号 -->
             <span v-else :style="{'font-weight': titleCrude?700:'normal'}">{{ item.order ? item.order : index + 1 }}{{ item.order === ' ' ? '' : '.' }}<em
                 v-html="item.question"></em><em v-if="scoreShow">({{ item.score }}分)</em>
+                <!-- 自定义操作按钮（同上有题号版本） -->
                 <i class="subject-but" ref="subject">
-                  <!-- <b :style="{right: -item.right + 'px', top: item.top + 'px'}" ref="b"> -->
-                        <button class="sees-but" :disabled="it.disabled" v-for="(it) in item.customBut" :class="{'buts-actives theme-text': it.active&&it.butStart,'buts-disabled': it.disabled}" @click="customButTap(it,item)">{{ it.active? it.nameActive: it.name }}</button>
-                    <!-- </b> -->
+                  <button class="sees-but" :disabled="it.disabled" v-for="(it) in item.customBut" :class="{'buts-actives theme-text': it.active&&it.butStart,'buts-disabled': it.disabled}" @click="customButTap(it,item)">{{ it.active? it.nameActive: it.name }}</button>
                 </i>
             </span>
           </div>
         </div>
+        <!-- 材料附件展示区 -->
         <div v-if="item.alist" class="subject-html" v-show="item.open">
           <div v-for="(it,ind) in item.alist">
             <div v-if="it.annexType === '0'">
@@ -32,13 +37,14 @@
             </div>
           </div>
         </div>
+        <!-- 选项展示区：单选/多选 -->
         <div class="choice" v-if="item.testKey" v-show="item.open && isLook">
           <div class="choice-box" v-for="(ts,ind) in item.testKey">
             <label>
               <input class="choice-input" style="display: none;" :disabled="disabled" :checked="ts.checked"
                      @change="answerChange($event,item,`${id}${index}`,ts)" :type="ques(item.type)? 'radio': 'checkbox'"
                      :name="`${id}${index}`"/>
-<!--              <svgs v-if="chooseAnswer" :radio="ques(item.type)" :select="ts.checked" :disabled="disabled" :state="stateFun(ts,item)"></svgs>-->
+              <!-- 选项图标：false表示始终使用复选框样式 -->
               <svgs v-if="chooseAnswer" :radio="false" :select="ts.checked" :disabled="disabled" :state="stateFun(ts,item)"></svgs>
               <span :class="{'choice-span': chooseAnswer}">{{
                   ts.index
@@ -46,6 +52,7 @@
             </label>
           </div>
         </div>
+        <!-- 外部自定义内容插槽 -->
         <slot name="content" :row="item"></slot>
       </div>
     </div>
@@ -53,203 +60,290 @@
 </template>
 
 <script>
-import {html2json, json2html} from '../../utils/html2json.js'
+/**
+ * seek/word.vue - 试题展示组件
+ * 功能：展示试题（单选题/多选题）、材料附件、自定义按钮操作、答题状态反馈
+ * 适用场景：题库资源中查看/编辑试题
+ */
+import { json2html } from '../../utils/html2json.js'
 import svgs from './icon.vue'
 
 export default {
   name: "zydx-seek2",
-  components: {svgs},
+  components: { svgs },
+
+  /** 内部状态 */
   data() {
     return {
-      value: [],
-      multipleShow: false,
-      id: null
+      value: [],           // 处理后的试题数据列表
+      multipleShow: false, // 是否显示多选勾选框
+      id: null             // 组件实例唯一标识，用于name分组
     }
   },
+
+  /** 外部参数 */
   props: {
     data: {
       type: Array,
-      default: []
+      default: () => [] // 试题数据源
     },
     disabled: {
       type: Boolean,
-      default: false
+      default: false // 是否禁用交互
+    },
+    multipleDisabled: {
+      type: Boolean,
+      default: false // 多选模式是否禁用交互
     },
     multiple: {
       type: Boolean,
-      default: false
+      default: false // 是否开启多选模式
     },
     borderShow: {
       type: Boolean,
-      default: true
+      default: true // 是否显示外边框
     },
     titleText: {
       type: String,
-      default: '材料'
+      default: '材料' // 材料标题前缀
     },
     chooseAnswer: {
       type: Boolean,
-      default: true
+      default: true // 是否显示选项图标（对/错标记）
     },
     scoreShow: {
       type: Boolean,
-      default: false
+      default: false // 是否显示分值
     },
     titleCrude: {
       type: Boolean,
-      default: false
+      default: false // 标题是否加粗
     },
-    isLook: { // 题库资源中，查看试题true，创建试题false（新版题库类资源-选择题编辑状态时，试题选项只在编辑框中显示此时isLook: false）
+    isLook: {
       type: Boolean,
-      default: true
+      default: true // 查看模式：true=查看试题，false=编辑试题（创建试题时选项仅在编辑框显示）
     }
   },
+
+  /** 数据监听 */
   watch: {
     data: {
-      handler: function (val, oldVal) {
+      handler: function (val) {
         this.init()
       },
       immediate: true,
       deep: true,
     },
     multiple: {
-      handler: function (val, oldVal) {
+      handler: function (val) {
         this.multipleShow = val
       },
-      immediate: true,
-      deep: true
-    },
-    replace: {
-      handler: function (val, oldVal) {
-        this.replaceShow = val
-      },
-      deep: true
+      immediate: true
     }
   },
+
+  /** 生命周期 */
   mounted() {
     this.id = this.randomId()
   },
+
+  /** 对外事件 */
   emits: ['change', 'butChange', 'changeAll', 'judgeAnswer'],
+
   methods: {
-    stateFun(ts,item) {
-      if(this.disabled&&ts.checked&&!item.error&&!this.nothing) return 'correct'
-      if(this.disabled&&ts.checked&&item.error&&!this.nothing) return 'error'
+    /**
+     * 获取选项的状态样式
+     * @param {Object} ts - 选项数据
+     * @param {Object} item - 所属试题
+     * @returns {string} 'correct' | 'error' | 'default'
+     */
+    stateFun(ts, item) {
+      if (this.disabled && ts.checked && !item.error) return 'correct'
+      if (this.disabled && ts.checked && item.error) return 'error'
       return 'default'
     },
-    customButTap(e,d) {
-      if(e.key === 'option') d.open = !d.open
-      if(e.single) {
-        if(!e.active) {
+
+    /**
+     * 自定义按钮点击处理
+     * @param {Object} button - 按钮配置
+     * @param {Object} item - 所属试题
+     */
+    customButTap(button, item) {
+      // option键：切换材料附件的展开/收起
+      if (button.key === 'option') item.open = !item.open
+
+      if (button.single) {
+        // 单选模式按钮：取消其他同组单选按钮的选中状态
+        if (!button.active) {
           this.value.forEach(x => {
-            // 把x.customBut里single是true的active设置成false
             const singleBut = x.customBut.filter(y => y.single)
-            if(singleBut) singleBut.forEach(y => y.active = false)
+            if (singleBut) singleBut.forEach(y => y.active = false)
           })
         }
-        e.active = !e.active
-      }else {
-        if(e.butStart) e.active = !e.active
+        button.active = !button.active
+      } else {
+        // 非单选模式：带butStart样式的按钮才能切换
+        if (button.butStart) button.active = !button.active
       }
-      if(e.active) {
-        if(e.key === 'disabled') {
+
+      // disabled键特殊逻辑：切换全局禁用状态
+      if (button.active) {
+        if (button.key === 'disabled') {
           this.disabledFun(true)
-          e.disabled = false
+          button.disabled = false
         }
-      }else {
+      } else {
         this.disabledFun(false)
       }
-      this.$emit('butChange',e,d)
+
+      this.$emit('butChange', button, item)
     },
-    disabledFun(e) {
+
+    /**
+     * 设置所有试题中 disabled 按钮的禁用状态
+     * @param {boolean} state - 目标禁用状态
+     */
+    disabledFun(state) {
       this.value.forEach(x => {
         x.customBut.forEach(y => {
-          if(y.key === 'disabled') y.disabled = e
+          if (y.key === 'disabled') y.disabled = state
         })
       })
     },
-    annexHtml(x) {
-      return json2html({node: "root", child: typeof x === 'string' ? JSON.parse(x) : x})
+
+    /**
+     * 将附件内容转换为HTML
+     * @param {Object|string} data - 附件JSON数据
+     * @returns {string} HTML字符串
+     */
+    annexHtml(data) {
+      return json2html({ node: "root", child: typeof data === 'string' ? JSON.parse(data) : data })
+    },
+
+    /**
+     * 解析试题的判题答案
+     * @param {Object} item - 试题数据
+     * @returns {*} 单选返回字符串，多选返回数组
+     */
+    resolveJudgeAnswer(item) {
+      if (item.stuAnswer) return item.stuAnswer?.answer
+      return item?.judgeAnswer
+    },
+
+    /**
+     * 根据判题答案回填选项的选中状态
+     * @param {Object} item - 试题数据（含已解析的testKey）
+     */
+    markCheckedOptions(item) {
+      const judge = this.resolveJudgeAnswer(item)
+      const isSingle = this.ques(item.type)
+
+      item.testKey = item.testKey.map(x => {
+        if (isSingle) {
+          // 单选题：匹配单个答案
+          x.checked = x.index === judge
+        } else {
+          // 多选题：匹配答案数组中的任一值
+          x.checked = Array.isArray(judge) ? judge.includes(x.index) : false
+        }
+        return x
+      })
     },
+
+    /**
+     * 恢复已缓存试题的打开状态（数据更新时保留用户操作）
+     * @param {Array} cachedList - 更新前的value副本
+     */
+    restoreOpenState(cachedList) {
+      if (!cachedList.length || !this.value.length) return
+
+      const subjectiveTypes = ['101', '102', '102_1', '102_2']
+
+      cachedList.forEach((item, index) => {
+        if (!this.value[index]) return
+        if (item.questionId !== this.value[index].questionId) return
+
+        this.value[index].open = item.open
+
+        // 主观题：恢复"试题设置"按钮状态
+        if (subjectiveTypes.includes(item.type) && this.isLook) {
+          if (this.value[index].customBut) {
+            this.value[index].customBut[0].active = item.open
+          }
+        }
+      })
+    },
+
+    /**
+     * 核心初始化方法：深拷贝data → 解析testKey → 回填答案 → 恢复状态
+     */
     init() {
       const val = JSON.parse(JSON.stringify(this.data))
-      let copy = this.value.length?this.value:[]
-      this.value = val.map((item, index) => { // 转换html
-        item.choice = true
-        item.right = 0
-        item.top = 0
+      const cachedList = this.value.length ? this.value : []
+
+      this.value = val.map((item) => {
+        // 设置默认值
         item.open = item.open !== undefined ? item.open : true
         item.error = item.error !== undefined ? item.error : false
         item.subject = item.subject !== undefined ? item.subject : true
+
+        // 解析选项并回填答案
         if (item.testKey) {
           item.testKey = typeof item.testKey === 'string' ? JSON.parse(item.testKey) : item.testKey
-          let judge = item?.judgeAnswer
-          if (item.stuAnswer) judge = item.stuAnswer?.answer
-          item.testKey = item.testKey.map(x => {
-            if (this.ques(item.type)) { // 判断是否单选
-              x.checked = x.index === judge;  //答案
-            } else {
-              for (let i = 0; i < judge?.length; i++) {
-                if (x.index === judge[i]) {
-                  x.checked = true
-                  break
-                } else {
-                  x.checked = false
-                }
-              }
-            }
-            return x
-          })
+          this.markCheckedOptions(item)
         }
+
         return item
       })
-      if( copy.length && this.value.length) {
-        copy.forEach((item, index) => {
-          if(this.value[index]){
-            if(item.questionId===this.value[index].questionId){
-              this.value[index].open = item.open
-              if (item.type === '101' || item.type === '102' || item.type === '102_1' || item.type === '102_2') { // 解决主观题点击完成按钮‘试题设置’按钮收起问题
-                if (this.isLook) {
-                  if(this.value[index].customBut) this.value[index].customBut[0].active = item.open
-                }
-              }
-            }
-          }
-        })
-      }
-      this.$nextTick(() => {  // 保证所有的数据都渲染完毕
-        const w = this.$refs.parer.offsetWidth // 获取父级宽度
-        for (let i = 0; i < this.$refs?.subject?.length; i++) {
-          this.value[i].right = w - this.$refs.subject[i].offsetLeft
-          if (this.$refs.b && this.$refs.b.length > 0) {
-            if (this.value[i].right < this.$refs.b[i].offsetWidth) this.value[i].top = 25 // 判断是否换行
-          }
-        }
-      })
+
+      // 恢复之前缓存的开合状态
+      this.restoreOpenState(cachedList)
     },
-    randomId() { // 生成随机id
-      const id = Math.random().toString(36).substr(2)
+
+    /**
+     * 生成不包含数字的随机ID（用于input的name分组）
+     * @returns {string} 纯字母随机ID
+     */
+    randomId() {
+      const id = Math.random().toString(36).substring(2)
       return id.replace(/[0-9]/g, '')
     },
-    answerChange(e, v, id, check) {
-      if(this.ques(v.type)) {
-        v.testKey.map(x => {
-          x.checked = false
-          return x
-        })
+
+    /**
+     * 选项变更回调
+     * @param {Event} e - change事件
+     * @param {Object} item - 当前试题
+     * @param {string} name - input的name标识
+     * @param {Object} check - 被操作的选项
+     */
+    answerChange(e, item, name, check) {
+      // 单选题：先清空所有选项
+      if (this.ques(item.type)) {
+        item.testKey.forEach(x => { x.checked = false })
       }
+
       check.checked = e.target.checked
-      let answerArr = []
-      const ids = document.getElementsByName(id)
+
+      // 收集当前选中的答案
+      const answerArr = []
+      const ids = document.getElementsByName(name)
       ids.forEach((x, index) => {
         if (x.checked) {
-          answerArr.push(v.testKey[index].index)
+          answerArr.push(item.testKey[index].index)
         }
       })
+
       this.$emit('judgeAnswer', {
-        ...v,
-        judgeAnswer: this.ques(v.type) ? answerArr[0] : answerArr
+        ...item,
+        judgeAnswer: this.ques(item.type) ? answerArr[0] : answerArr
       })
     },
+
+    /**
+     * 多选模式勾选框变更
+     * @param {Event} e - change事件
+     * @param {number} index - 试题在value中的索引
+     */
     checkboxChange(e, index) {
       this.value[index].checked = e.target.checked
       this.$emit('change', {
@@ -258,15 +352,25 @@ export default {
       })
       this.$emit('changeAll', this.value)
     },
-    ques(v) {
-      return v?.indexOf('101') > -1
+
+    /**
+     * 判断是否为单选题
+     * @param {string} type - 试题类型编码
+     * @returns {boolean} 是否为单选题
+     */
+    ques(type) {
+      return type?.includes('101')
     },
-    styleText(v) {
-      if (!v || v === 'null') return
-      for (let i = 0; i < v.length; i++) {
-        if (v[i].content[0]?.length > 10) {
-          return true
-        }
+
+    /**
+     * 判断选项文本是否超长（超过10字需要改为纵向排列）
+     * @param {Array} options - 选项数组
+     * @returns {boolean}
+     */
+    styleText(options) {
+      if (!options || options === 'null') return false
+      for (let i = 0; i < options.length; i++) {
+        if (options[i].content[0]?.length > 10) return true
       }
       return false
     },

package/src/index.js

@@ -87,7 +87,7 @@ function install(app) {
 }
 
 export default {
-    version: '1.35.630',
+    version: '1.35.631',
     install,
     Calendar,
     Message,