更新数据

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

@@ -3,79 +3,129 @@
     <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" v-if="title != '详情'" @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">
+      <el-form :model="listQuery" ref="FormRef" label-position="right" :rules="rules" label-width="100">
-      </FormMessage>
+        <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 FormMessage from "@/components/aboutTable/FormMessage.vue";
+import { ref, reactive,defineEmits,defineProps,getCurrentInstance } from 'vue';
-import { ref, reactive,defineEmits,getCurrentInstance } from 'vue';
-
-const emit = defineEmits(["refresh"]);
-
-const { proxy } = getCurrentInstance();
-const { D_BAXX_KTLX } = proxy.$dict("D_BAXX_KTLX");
-
-const dialogForm = ref(false);
-const title = ref('');
-const FormRef = ref();
-const loading = ref(false);
-const listQuery = ref({});
-const openType = ref("")
-
 const props = defineProps({
-  dict: {
+  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 formList = reactive([
-  [
-    { label: "题型", prop: "type", type: "select", options: D_BAXX_KTLX, },
-    { 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, row = {}) => {
+const init = (type, row) => {
   dialogForm.value = true;
-   openType.value = type;
+  title.value = type == "add" ? "新增" : type == "edit" ? "编辑" : "详情";
-  title.value = type == "add" ? "新增" : "编辑";
+  if(row){
-  listQuery.value = { ...row }
+    qcckPost({},`/mosty-base/baxx/tkgl/getInfo/${row.id}`).then(res=>{
+      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.submit(()=>{
+  FormRef.value.validate((valid)=>{
+    if (!valid) return;
     loading.value = true;
-    let url = title.value == '新增' ? `/mosty-base/baxx/tkgl/addd` : `/mosty-base/baxx/tkgl/edit`;
+    let url = title.value == '新增' ? `/mosty-base/baxx/tkgl/add` : `/mosty-base/baxx/tkgl/edit`;
-    qcckPost(listQuery.value, url).then(() => {
+    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");
@@ -88,6 +138,7 @@ const save = () => {
 
 const close = () => {
   dialogForm.value = false;
+  listQuery.value = { }
   FormRef.value.reset()
 };;
 
@@ -96,10 +147,8 @@ defineExpose({init})
 
 <style lang="scss" scoped>
 @import "@/assets/css/layout.scss";
-.mapBox{
+.cntinfo{
-  width: calc(100% - 24rem);
+  padding: 4rem 12rem;
-  height:500px;
+  box-sizing: border-box;
-  overflow: hidden;
-  margin: 0 12rem;
 }
 </style>

src/views/Training/SecurityQuestionBank/index.vue

@@ -2,7 +2,7 @@
   <div>
     <div class="titleBox">
       <PageTitle title="保安题库">
-        <el-button type="primary" @click="addEdit('add', '')">
+        <el-button type="primary" @click="addEdit('add', null)">
           <el-icon style="vertical-align: middle">
             <CirclePlus />
           </el-icon>
@@ -22,11 +22,19 @@
         <template #type="{ row }">
           <DictTag :value="row.type" :tag="false" :options="D_BAXX_KTLX" />
         </template>
+        <template #answer="{ row }">
+          <span v-if="row.type == '01' || row.type == '02'">
+            <span v-for="val in row.correctAnswer" class="flex items-center just-center"> 
+              <DictTag :value="val" :tag="false" :options="D_BA_TKDA" />、
+            </span>
+          </span>
+          <span v-else>{{ row.isTrue }}</span>
+        </template>
         <!-- 操作 -->
         <template #controls="{ row }">
           <el-link type="primary" link @click="addEdit('edit', row)">编辑</el-link>
           <el-link type="primary" link @click="addEdit('detail', row)">详情</el-link>
-          <el-link type="danger" link @click="handleDelete(row.id)">删除</el-link>
+          <el-link type="danger" link @click="handleDelete([row.id])">删除</el-link>
         </template>
       </MyTable>
       <Pages @changeNo="changeNo" @changeSize="changeSize" :tableHeight="pageData.tableHeight" :pageConfiger="{
@@ -35,7 +43,7 @@
       }"></Pages>
     </div>
     <!-- 详情 -->
-    <DetailForm ref="detailDiloag" @refresh="getList" />
+    <DetailForm ref="detailDiloag" :dic="{D_BAXX_KTLX,D_BA_TKDA,D_BA_TKDA_PDT}" @refresh="getList" />
   </div>
 </template>
 
@@ -45,13 +53,13 @@ import MyTable from "@/components/aboutTable/MyTable.vue";
 import Pages from "@/components/aboutTable/Pages.vue";
 import Search from "@/components/aboutTable/Search.vue";
 import DetailForm from "./components/detailForm.vue";
-import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
+import { qcckPost } from "@/api/qcckApi.js";
 import { reactive, ref, onMounted, getCurrentInstance, nextTick } from "vue";
 const { proxy } = getCurrentInstance();
+const { D_BAXX_KTLX,D_BA_TKDA,D_BA_TKDA_PDT } = proxy.$dict("D_BAXX_KTLX",'D_BA_TKDA','D_BA_TKDA_PDT');
 
 const detailDiloag = ref();
 const searchBox = ref(); //搜索框
-const baseUrl = 'data:image/jpeg;base64,'
 const searchConfiger = ref([
   {
     label: "题目",
@@ -84,7 +92,7 @@ const pageData = reactive({
     { label: "选项C", prop: "optionC" },
     { label: "选项D", prop: "optionD" },
     { label: "选项E", prop: "optionE" },
-    { label: "答案", prop: "answer"}
+    { label: "答案", prop: "answer", showSolt: true}
   ]
 });
 
@@ -114,7 +122,13 @@ const getList = () => {
   pageData.tableConfiger.loading = true;
   let data = { ...pageData.pageConfiger, ...queryFrom.value };
   qcckPost(data, "/mosty-base/baxx/tkgl/page").then((res) => {
-    pageData.tableData = res.records || [];
+    let arr = res.records || []
+    arr.forEach(item => {
+      item.correctAnswer = item.correctAnswer.split(',')
+      console.log(item.correctAnswer);
+      
+    });
+    pageData.tableData = arr;
     pageData.total = res.total;
     pageData.tableConfiger.loading = false;
   }).catch(() => {
@@ -126,7 +140,7 @@ const getList = () => {
 // 删除
 const handleDelete = (ids) => {
   proxy.$modal.confirm("是否确认删除该题目？").then(() => {
-    qcckPost({ ids }, "/mosty-base/baxx/tkgl/remove").then(() => {
+    qcckPost(ids, "/mosty-base/baxx/tkgl/remove").then(() => {
       proxy.$modal.msgSuccess("删除成功");
       getList();
     });

src/views/Training/SecurityTrainingVideo/components/detailForm.vue

@@ -40,7 +40,6 @@ const formList = reactive([
   ],
 ])
 
-
 // 初始化数据
 const init = (type, row = {}) => {
   dialogForm.value = true;