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="openType != 'detail'" @click="save" type="primary"  :loading="loading">保存</el-button>
        <el-button size="small" @click="close">关闭</el-button>
      </div>
    </div>
    <div class="cntinfo">
      <FormMessage ref="FormRef" v-model="listQuery" :disabled="openType == 'detail'" :rules="rules" :formList="formList">
      </FormMessage>
    </div>
  </div>
</template>

<script setup>
import { qcckPost , qcckGet} from "@/api/qcckApi.js";
import FormMessage from "@/components/aboutTable/FormMessage.vue";
import { ref, reactive,defineEmits,getCurrentInstance } from 'vue';
const emit = defineEmits(["refresh"]);
const { proxy } = getCurrentInstance();
const dialogForm = ref(false);
const title = ref('');
const FormRef = ref();
const loading = ref(false);
const listQuery = ref({});
const openType = ref("")

const props = defineProps({
  dict: {
    type: Object,
    default: () => {}
  },
})

const rules = reactive({
  tm: [{ required: true, message: "请输入题目", trigger: "blur" }],
  type: [{ required: true, message: "请选择题型", trigger: "blur" }],
});

const formList = reactive([
  [
    { label: "题型", prop: "type", type: "select", options: [{label:'单选题',value:'1'},{label:'多选题',value:'2'},{label:'判断题',value:'3'}] },
    { label: "题目", prop: "tm", type: "input" },
  ],
  [
    { label: "选项A", prop: "optionA", type: "input" },
    { label: "选项B", prop: "optionB", type: "input" },
  ],
  [
    { label: "选项C", prop: "optionC", type: "input" },
    { label: "选项D", prop: "optionD", type: "input" },
  ],
  [
    { label: "选项E", prop: "optionE", type: "input" },
    { label: "答案", prop: "dw", type: "input" }
  ],
])


// 初始化数据
const init = (type, id,) => {
  dialogForm.value = true;
   openType.value = type;
  title.value = type == "add" ? "新增" : "编辑";
  if(id) getDateById(id)
};

const save = () => {
  FormRef.value.submit(()=>{
    loading.value = true;
    let url = title.value == '新增' ? `/mosty-base/baxx/tkgl/addd` : `/mosty-base/baxx/tkgl/edit`;
    qcckPost(listQuery.value, url).then(() => {
      loading.value = false;
      proxy.$message.success("保存成功");
      emit("refresh");
      close();
    }).catch(() => {
      loading.value = false;
    })
  });
}

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

defineExpose({init})
</script>

<style lang="scss" scoped>
@import "@/assets/css/layout.scss";
.mapBox{
  width: calc(100% - 24rem);
  height:500px;
  overflow: hidden;
  margin: 0 12rem;
}
</style>