修改青羊后台部门bug

odc.xiaohui

2023-11-30 236fdf92ecb6ff876d400f6c360efca8ab085f5c

修改青羊后台部门bug

 src/components/Cascader/index.vue

New file
@@ -0,0 +1,169 @@
<template>
  <el-cascader
    ref="cascaderEle"
    :options="optionList"
    :props="config"
    collapse-tags
    :filterable="filterable"
    :size="size"
    :style="{width: width + 'px'}"
    v-model="choiceEle"
    @change="selectChange"
    clearable>
  </el-cascader>
</template>

<script>
/**
 * options [{ value: "", label: "", childList: []}]
 * checkStrictly 设置父子节点取消选中关联
 * 获取选中结果 change事件
 * all 是全部
 * size 大小
 * filterable 是否支持筛选
 */
export default {
  name: 'AiCascaderAll',
  props: {
    optionsData: {
      type: Array,
      default: () => {
        return [];
      }
    },
    options: {
      type: Array,
      default: () => {
        return [];
      }
    },
    width: {
      type: Number,
      default: 180
    },
    checkStrictly: {
      type: Boolean,
      default: false
    },
    filterable: {
      type: Boolean,
      default: true
    },
    size: {
      type: String,
      default: "mini"
    }
  },
  data() {
    return {
      optionList: [],
      lastSelectedList: [],
      choiceEle: [],
      allLength: 0,
      allOptions: [{ value: "all", label: "全部", childList: null }],
      config: {
        multiple: true,
        checkStrictly: false
      }
    }
  },
  watch: {
    options() {
      this.setData();
    },
    optionsData() {
      this.setData();
    }
  },
  mounted() {
    this.setData();
    this.config.checkStrictly = this.checkStrictly;
  },
  methods: {
    setData() {
      this.optionList = [];
      if (this.optionsData.length > 0) {
        this.choiceEle = this.optionsData
      }

      this.optionList = this.allOptions.concat(this.options);
      // this.loopSelectData(this.options);
      console.log(this.options)

      console.log(this.optionsData)
      // 记录下全部选中时的个数
      this.allLength = this.choiceEle.length;
      this.lastSelectedList = [...this.choiceEle];
      this.sendInfo();
    },
    selectChange(val) {
      let lastHasAll = this.lastSelectedList.find(arr => {
        return arr[0] === 'all';
      });
      let nowHasAll = val.find(arr => {
        return arr[0] === 'all';
      });
      if (lastHasAll && !nowHasAll) {
        // 点击取消了 全选
        // this.clearCascader();
        this.choiceEle = [];
        this.lastSelectedList = [];
        this.$nextTick(() => {
          this.sendInfo();
        });
        return;
      }
      if (!lastHasAll && nowHasAll) {
        this.choiceEle = [];
        // 点击了 全选
        this.loopSelectData(this.optionList);
        this.lastSelectedList = [...this.choiceEle];
        this.$nextTick(() => {
          this.sendInfo();
        });
        return;
      }
      // 当点选了除全部按钮外的所有 选中全部按钮
      if (!nowHasAll && val.length === this.allLength - 1) {
        this.choiceEle = [['all']].concat(this.choiceEle);
        val = [['all']].concat(val);
      }
      // 当全部选项都选中 这时取消了除全部按钮外的一个 去掉选中全部按钮
      if (nowHasAll && val.length < this.allLength) {
        val = val.filter(arr => {
          return arr[0] !== 'all';
        });
        this.choiceEle = [...val];
      }
      this.sendInfo();
      this.lastSelectedList = [...val];
    },
    loopSelectData(list, parentNode = []) {
      list.length > 0 &&
      list.forEach((e) => {
        let pNode = [...parentNode]; // 注意这里必须是深拷贝，否则会由于引用类型赋值的是地址（指针），导致parentNode在pNode更新时，同时被更新
        if (e.children && e.children.length > 0) {
          pNode.push(e.value);
          // 当没有关联时 需要每一级都存下
          if (this.checkStrictly) {
            this.choiceEle.push([...pNode]);
          }
          this.loopSelectData(e.children, pNode);
        } else {
          if (parentNode.length > 0) {
            this.choiceEle.push([...parentNode, e.value]);
          } else {
            this.choiceEle.push([e.value]);
          }
        }
      });
    },
    sendInfo() {
      this.$emit('change', this.choiceEle);
    }
  }
};
</script>

<style scoped></style>


 src/views/exam/personalRandomTemplate/edit.vue

@@ -2,8 +2,12 @@
  <div class="app-container">
    <el-form :model="form" ref="form" label-width="200px" v-loading="formLoading" :rules="rules">
      <el-form-item label="考生：" prop="menuIds" required>
        <el-cascader v-model="form.menuIds" :options="options" :props="props" clearable collapse-tags>
        </el-cascader>
<!--        <el-cascader v-model="form.menuIds"   :options="options" @change="cascaderChangeFun" :props="props" clearable collapse-tags>-->
<!--        </el-cascader>-->
        <all-cascader :options="options"
                      :optionsData = "optionsData"
                      @change="cascaderChangeFun"
                      :width="200"></all-cascader>
      </el-form-item>
      <el-form-item label="课目：" prop="subjectId" required >
        <el-select ref="subjectIdRef" v-model="form.subjectId" placeholder="课目" multiple
@@ -18,7 +22,7 @@
        </el-select>
      </el-form-item>

      <el-form-item label="时间限制："">
      <el-form-item label="时间限制：">
        <el-date-picker v-model="form.limitDateTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange"
                        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
@@ -132,9 +136,9 @@
import examPaperApi from '@/api/examPaper'
import questionApi from '@/api/question'
import departmentApi from '@/api/department'

import allCascader from '@/components/Cascader'
export default {
  components: { Pagination, QuestionShow },
  components: { Pagination, QuestionShow ,allCascader},

  data () {
    return {
@@ -154,6 +158,7 @@
        // }
      },
      options: [],
      optionsData:[],
      departCascaderProps:{
        multiple: true
      },
@@ -162,7 +167,7 @@
        aggregateSource:'100',
        id: null,
        departmentIds: [],

        menuIds:[],
        subjectId: [],
        paperType: 7,
        limitDateTime: [],
@@ -225,7 +230,9 @@
       await examPaperApi.selfselect(id).then(re => {
         _this.form = re.response
         _this.form.menuIds = JSON.parse(re.response.menuIds)
         _this.optionsData = _this.form.menuIds
         console.log(_this.form)

         _this.formLoading = false
       })
     }
@@ -244,6 +251,10 @@
     // this.subjectIdEvent(false)
   },
  methods: {
    cascaderChangeFun(event){
      console.log(event)
      this.form.menuIds = event
    },
    titlejs(val){
      console.log(val)
      let str = ''
@@ -320,6 +331,13 @@
          if (this.subjectIdList.length == 1){
            this.form.subjectId= this.form.subjectId
          };

          let lastHasAll = this.form.menuIds.find(arr => {
            return arr[0] === 'all';
          });
          if (lastHasAll){
            this.form.menuIds = this.form.menuIds.slice(1)
          }
          let op = [];
          for(var ele of this.form.menuIds){
            op.push(ele[1])

 vue.config.js

@@ -19,7 +19,7 @@
    hotOnly: false,
    proxy: {
      '/api': {
        target: 'http://localhost:8000',
        target: 'http://192.168.3.64:8000',
        changeOrigin: true
      }
    }