up

src/api/question/title/types.ts

@@ -38,7 +38,7 @@ export interface TitleForm extends BaseEntity {
 
   labelName : string;
 
-  // optionVoList : OptionVoList[];
+  optionVoList : OptionVoList[];
 
 }
 

src/components/Options/index.vue

@@ -1,23 +1,22 @@
 <!-- 档位配置 插件 -->
 <template>
-    <Form ref="formPosition" :label-width="configWidth" :model="formData" :rules="ruleValidate" style="padding-bottom:20px">
-        <FormItem :label="`选项${index + 1}：`" v-for="(item,index) in posNum" :key="item" class="m-t-20"
-            :prop="`gearValue[${index}]`" :rules="ruleValidate.gearValue">
-            <InputNumber
+  <el-table-column :label="`选项${index + 1}：`" v-for="(item, index) in posNum" :key="item" class="m-t-20"
+    :prop="`gearValue[${index}]`" :rules="ruleValidate.gearValue" 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="formData.gearValue[index]"
+      v-model="form.value.options[index]"
     />
-            <img v-if="!isSee&&posNum<maxPosLen" :src="addImg" class="img-btn" @click="changePos(index,'add')">
-            <img v-if="!isSee&&posNum>1" :src="delImg" @click="changePos(index,'del')" class="img-btn">
-        </FormItem>
-    </Form>
+    <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>
 </template>
 
+
 <script>
-import addImg from '@/assets/image/add-icon.png'
-import delImg from '@/assets/image/del-icon.png'
+import addImg from '@/assets/images/add-icon.png'
+import delImg from '@/assets/images/del-icon.png'
 export default {
     props: {
         enumData: {

src/views/question/title/index.vue

@@ -56,7 +56,8 @@
         <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
           <template #default="scope">
             <el-tooltip content="修改" placement="top">
-              <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['question:title:edit']"></el-button>
+              <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
+                v-hasPermi="['question:title:edit']"></el-button>
             </el-tooltip>
             <el-tooltip content="删除" placement="top">
               <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
@@ -77,20 +78,16 @@
         </el-form-item>
         <el-form-item label="标签" prop="labelId">
           <el-select v-model="form.labelId" @change="handleLabelChange" placeholder="请选择标签">
-            <el-option v-for="dict in labelList" :key="dict.value" :label="dict.label"
-              :value="dict.value"></el-option>
+            <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="选项" align="center" prop="options">
-          <PositionConfig>
-
-          </PositionConfig>
-          <!-- <RadioGroup v-model="options" @change="changeFeeType($event, 'base')">
-                <Radio v-for="(item, index) in currentRowArr[1].feeTypeList" :key="index" :disabled="isSee"
-                    :label="item.itemCode">{{ item.itemName }}
-                </Radio>
-            </RadioGroup> -->
+        <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>
@@ -109,6 +106,8 @@ import { queryAllLabel } from '@/api/question/label';
 import { listTitle, getTitle, delTitle, addTitle, updateTitle } from '@/api/question/title';
 import { TitleVO, TitleQuery, TitleForm } from '@/api/question/title/types';
 import { func } from 'vue-types';
+import addImg from '@/assets/images/add-icon.png'
+import delImg from '@/assets/images/del-icon.png'
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
 const titleList = ref<TitleVO[]>([]);
@@ -119,7 +118,7 @@ const ids = ref<Array<string | number>>([]);
 const single = ref(true);
 const multiple = ref(true);
 const total = ref(0);
-const labelList = ref<DictDataOption[]>([]);
+const labelList = ref<DictDataOption[]>([]); let posNum = 20
 
 const queryFormRef = ref<ElFormInstance>();
 const titleFormRef = ref<ElFormInstance>();
@@ -134,7 +133,7 @@ const initFormData: TitleForm = {
   question: undefined,
   labelId: undefined,
   labelName: "",
-  options : [],
+  optionVoList: [],
 }
 const data = reactive<PageData<TitleForm, TitleQuery>>({
   form: { ...initFormData },
@@ -266,8 +265,59 @@ const handleExport = () => {
   }, `title_${new Date().getTime()}.xlsx`)
 }
 
+/**
+ * 增删档位
+ * @param idx
+ * @param actType
+ */
+const changePos = (idx: number, actType: string) => {
+  if (actType === 'add') {
+    if (form.value.optionVoList.length < 20) {
+      posNum++;
+      form.value.optionVoList.splice(idx + 1, 0);
+    }
+  } else {
+    form.value.optionVoList.splice(idx, 1);
+    posNum--;
+  }
+}
+
+/**
+ * 提交的校验
+ */
+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();
 });
 </script>
+
+<style scoped>
+.img-btn {
+  display: inline-block;
+  vertical-align: middle;
+  margin-left: 10px;
+  width: 20px;
+  cursor: pointer;
+}
+</style>