ba_web/src/views/Training/SecurityQuestionBank/components/detailForm.vue

<template>
  <div class="dialog" v-if="dialogForm">
    <div class="head_box">
      <span class="title">保安题库{{ title }}</span>
      <div>
        <el-button size="small" v-if="title != '详情'" @click="save" type="primary"  :loading="loading">保存</el-button>
        <el-button size="small" @click="close">关闭</el-button>
      </div>
    </div>
    <div class="cntinfo">
      <el-form :model="listQuery" ref="FormRef" label-position="right" :rules="rules" label-width="100">
        <el-row>
          <el-col :span="8" >
            <el-form-item label="题型" prop="type" >
              <el-select v-model="listQuery.type" placeholder="请选择题型" style="width:100%" @change="changeType">
                <el-option v-for="item in props.dic.D_BAXX_KTLX" :key="item" :label="item.zdmc" :value="item.dm"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="题目" style="width:100%" prop="tm">
              <el-input v-model="listQuery.tm" placeholder="请输入题目" />
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 单选 和多选 和判断 -->
        <el-row>
          <el-col :span="8">
            <el-form-item label="选项A">
                <el-input v-model="listQuery.optionA" placeholder="请输入选项A" />
              </el-form-item>
            </el-col>
          <el-col :span="8">
            <el-form-item label="选项B">
              <el-input v-model="listQuery.optionB" placeholder="请输入选项B" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="选项C">
              <el-input v-model="listQuery.optionC" placeholder="请输入选项C" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="选项D">
              <el-input v-model="listQuery.optionD" placeholder="请输入选项D" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="选项E">
              <el-input v-model="listQuery.optionE" placeholder="请输入选项E" />
            </el-form-item>
          </el-col>

        </el-row>
        <!-- 答案 -->
        <el-row>
          <el-col :span="8">
            <el-form-item label="答案" style="width:100%" v-if="listQuery.type == '01' || listQuery.type == '02'">
              <el-select v-model="listQuery.correctAnswer" placeholder="请选择答案" :multiple="multiple" style="width:100%">
                <el-option v-for="item in props.dic.D_BA_TKDA" :key="item" :label="item.zdmc" :value="item.dm"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="答案" style="width:100%" prop="isTrue" v-else>
              <el-input v-model="listQuery.isTrue" placeholder="请输入答案" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { qcckPost , qcckGet} from "@/api/qcckApi.js";
import { ref, reactive,defineEmits,defineProps,getCurrentInstance } from 'vue';
const props = defineProps({
  dic: {
    type: Object,
    default: () => {}
  },
})
const emit = defineEmits(["refresh"]);

const { proxy } = getCurrentInstance();

const dialogForm = ref(false);
const title = ref('');
const listQuery = ref({})
const FormRef = ref();
const loading = ref(false);
const multiple = ref(false)
const rules = reactive({
  tm: [{ required: true, message: "请输入题目", trigger: "blur" }],
  type: [{ required: true, message: "请选择题型", trigger: "blur" }],
});

// 初始化数据
const init = (type, row) => {
  dialogForm.value = true;
  title.value = type == "add" ? "新增" : type == "edit" ? "编辑" : "详情";
  if(row){
    qcckPost({},`/mosty-base/baxx/tkgl/getInfo/${row.id}`).then(res=>{
      res.correctAnswer = res.type == '02'? res.correctAnswer.split(','):res.correctAnswer;
      multiple.value = res.type == '02' ? true:false;
      listQuery.value = res
    })
  }
};

const changeType = (val) => {
  multiple.value = val == '02' ? true : false;
  switch (val) {
    case '01':
    case '02':
      listQuery.value.isTrue = ''
      break;
    case '03':
      listQuery.value.correctAnswer = []
      break;
  }
}

const save = () => {
  FormRef.value.validate((valid)=>{
    if (!valid) return;
    loading.value = true;
    let url = title.value == '新增' ? `/mosty-base/baxx/tkgl/add` : `/mosty-base/baxx/tkgl/edit`;
    let params = { ...listQuery.value }
    params.correctAnswer = Array.isArray(params.correctAnswer) ? params.correctAnswer.join(','):params.correctAnswer;
    qcckPost(params, url).then(() => {
      loading.value = false;
      proxy.$message.success("保存成功");
      emit("refresh");
      close();
    }).catch(() => {
      loading.value = false;
    })
  });
}

const close = () => {
  dialogForm.value = false;
  listQuery.value = { }
  multiple.value = false;
  FormRef.value.reset()
};;

defineExpose({init})
</script>

<style lang="scss" scoped>
@import "@/assets/css/layout.scss";
.cntinfo{
  padding: 4rem 12rem;
  box-sizing: border-box;
}
</style>