up

2023-11-24 17:55:42 +08:00 · 2023-11-24 17:55:42 +08:00 · 954df45943
commit 954df45943
parent 9148e46211
3 changed files with 58 additions and 50 deletions
--- a/src/api/question/title/types.ts
+++ b/src/api/question/title/types.ts
@ -16,8 +16,7 @@ export interface TitleVO {

  labelName : string;

-  // optionVoList : OptionVoList[];
-
+  optionVoList : OptionVoList[];
 }

 export interface TitleForm extends BaseEntity {
@ -61,13 +60,8 @@ export interface TitleQuery extends PageQuery {
 }

 export interface OptionVoList {
-
-  id : number,
-
  serial : number;

-  questionId : number;
-
  optionContent : string;

 }
--- a/src/components/Options/index.vue
+++ b/src/components/Options/index.vue
@ -4,7 +4,7 @@
    :prop="`gearValue[${index}]`" :rules="ruleValidate" align="center" prop="options">
    <el-input :min="0" :formatter="value => `${value}`.replace(/([0-9]+\.[0-9]{2})[0-9]*/, '$1')" placeholder="请填写"
      :disabled="isSee" class="w-200" v-model="form.value.options[index]" />
-    <v-image v-if="!isSee && posNum < maxPosLen" :src="addImg" class="img-btn" @click="changePos(index, 'add')" />
+    <v-image v-if="!isSee && posNum < maxPosLen && posNum == index+1" :src="addImg" class="img-btn" @click="changePos(index, 'add')" />
    <v-image v-if="!isSee && posNum > 1" :src="delImg" @click="changePos(index, 'del')" class="img-btn" />
  </el-table-column>
 </template>
--- a/src/views/question/title/index.vue
+++ b/src/views/question/title/index.vue
@ -49,9 +49,9 @@
        <el-table-column label="序号" align="center" prop="id" v-if="true" />
        <el-table-column label="标题" align="center" prop="question" />
        <el-table-column label="标签" align="center" prop="labelName">
-          <template #default="scope">
+          <!-- <template #default="scope">
            <dict-tag :options="labelList" :value="scope.row.labelName" />
-          </template>
+          </template> -->
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template #default="scope">
@ -71,24 +71,43 @@
        v-model:limit="queryParams.pageSize" @pagination="getList" />
    </el-card>
    <!-- 添加或修改题目对话框 -->
-    <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
+    <el-dialog :title="dialog.title" v-model="dialog.visible" width="800px" append-to-body>
      <el-form ref="titleFormRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="标题" prop="question">
          <el-input v-model="form.question" placeholder="请输入标题" />
        </el-form-item>
-        <el-form-item label="标签" prop="labelId">
-          <el-select v-model="form.labelId" @change="handleLabelChange" placeholder="请选择标签">
+        <el-form-item label="标签" prop="labelName">
+          <el-select v-model="form.labelName" @change="handleLabelChange" placeholder="请选择标签">
            <el-option v-for="dict in labelList" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
          </el-select>
        </el-form-item>

-        <el-table-column :label="`选项${index + 1}：`" v-for="(item, index) in posNum" :key="item" class="m-t-20"
-          :prop="`gearValue[${index}]`" :rules="ruleValidate" align="center" prop="options">
-          <el-input :min="0" :formatter="value => `${value}`.replace(/([0-9]+\.[0-9]{2})[0-9]*/, '$1')" placeholder="请填写"
-            :disabled="isSee" class="w-200" v-model="form.value.options[index]" />
-          <v-image v-if="!isSee && posNum < maxPosLen" :src="addImg" class="img-btn" @click="changePos(index, 'add')" />
-          <v-image v-if="!isSee && posNum > 1" :src="delImg" @click="changePos(index, 'del')" class="img-btn" />
-        </el-table-column>
+        <el-form-item :label="`选项${index + 1}`" v-for="(item, index) in posNum" :key="item" prop="options">
+          <el-col :span="15">
+            <el-input
+              :min="0"
+              :formatter="(value: any) => `${value}`"
+              placeholder="请填写"
+              :disabled="isSee"
+              class="w-200 m-2"
+              v-model="form.optionVoList[index].optionContent"
+             />
+          </el-col>
+          <el-col :span="5" class="text-center">
+            <ElImage
+              v-if="!isSee && posNum < maxPosLen && posNum == index+1"
+              :src="addImg"
+              class="img-btn"
+              @click="changePos(index, 'add')"
+            />
+            <ElImage
+              v-if="!isSee && posNum > 1"
+              :src="delImg"
+              @click="changePos(index, 'del')"
+              class="img-btn"
+            />
+          </el-col>
+        </el-form-item>

      </el-form>
      <template #footer>
@ -118,7 +137,10 @@ const ids = ref<Array<string | number>>([]);
 const single = ref(true);
 const multiple = ref(true);
 const total = ref(0);
-const labelList = ref<DictDataOption[]>([]); let posNum = 20
+const labelList = ref<DictDataOption[]>([]);
+const isSee = ref(false);
+const maxPosLen = ref(20);
+const posNum = ref(1);

 const queryFormRef = ref<ElFormInstance>();
 const titleFormRef = ref<ElFormInstance>();
@ -133,7 +155,12 @@ const initFormData: TitleForm = {
  question: undefined,
  labelId: undefined,
  labelName: "",
-  optionVoList: [],
+  optionVoList: [
+    {
+      serial:1,
+      optionContent:"",
+    }
+  ],
 }
 const data = reactive<PageData<TitleForm, TitleQuery>>({
  form: { ...initFormData },
@ -155,6 +182,9 @@ const data = reactive<PageData<TitleForm, TitleQuery>>({
    labelId: [
      { required: true, message: "标签不能为空", trigger: "change" }
    ],
+    optionVoList: [
+      { required: true, message: "标签不能为空", trigger: "change" }
+    ],
  }
 });

@ -172,7 +202,7 @@ const getList = async () => {
 const getLabelList = async () => {
  loading.value = true;
  queryAllLabel().then((resp) => {
-    labelList.value = resp.data.map((p: any): DictDataOption => ({ label: p.label, value: p.value, elTagType: "", elTagClass: "" }));
+    labelList.value = resp.data.map((p: any): DictDataOption => ({ label: p.label, value: p.value, elTagType: "", elTagClass: "primary" }));
  });
  loading.value = false;
 }
@ -181,6 +211,7 @@ function handleLabelChange(val: string) {
  const selectedLabel = labelList.value.find(item => item.value === val);
  if (selectedLabel) {
    form.value.labelName = selectedLabel.label;
+    form.value.labelId = selectedLabel.value;
  }
 }

@ -193,6 +224,7 @@ const cancel = () => {
 /** 表单重置 */
 const reset = () => {
  form.value = { ...initFormData };
+  posNum.value = 1;
  titleFormRef.value?.resetFields();
 }

@ -229,6 +261,8 @@ const handleUpdate = async (row?: TitleVO) => {
  const res = await getTitle(_id);
  Object.assign(form.value, res.data);
  dialog.visible = true;
+  form.value.optionVoList = res.data.optionVoList;
+  posNum.value = form.value.optionVoList.length;
  dialog.title = "修改题目";
 }

@ -273,39 +307,19 @@ const handleExport = () => {
 const changePos = (idx: number, actType: string) => {
  if (actType === 'add') {
    if (form.value.optionVoList.length < 20) {
-      posNum++;
+      posNum.value++;
+      form.value.optionVoList.push({
+        serial:posNum.value,
+        optionContent:"",
+      });
      form.value.optionVoList.splice(idx + 1, 0);
    }
  } else {
    form.value.optionVoList.splice(idx, 1);
-    posNum--;
+    posNum.value--;
  }
 }

-/**
- * 提交的校验
- */
-const handleValidate = () =>{
-  return new Promise((resolve, reject) => {
-        $refs.formPosition.validate((valid) => {
-          if (valid) {
-            // 数据转换为接口所需要的形式
-            let obj = {};
-            if (form.value.optionVoList) {
-              if (form.value.optionVoList.length[0] === null) {
-                obj.optionVoList = null;
-              } else {
-                obj.optionVoList = form.value.optionVoList.join();
-              }
-            } else {
-              obj.optionVoList = null;
-            }
-            resolve(obj)
-          }
-        })
-      })
-}
-
 onMounted(() => {
  getList();
  getLabelList();
@ -317,7 +331,7 @@ onMounted(() => {
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
-  width: 20px;
+  width: 30px;
  cursor: pointer;
 }
 </style>