up

src/api/question/title/types.ts

@@ -16,6 +16,8 @@ export interface TitleVO {
 
   labelName : string;
 
+  // optionVoList : OptionVoList[];
+
 }
 
 export interface TitleForm extends BaseEntity {
@@ -36,6 +38,8 @@ export interface TitleForm extends BaseEntity {
 
   labelName : string;
 
+  // optionVoList : OptionVoList[];
+
 }
 
 export interface TitleQuery extends PageQuery {
@@ -56,5 +60,16 @@ export interface TitleQuery extends PageQuery {
     params?: any;
 }
 
+export interface OptionVoList {
+
+  id : number,
+
+  serial : number;
+
+  questionId : number;
+
+  optionContent : string;
+
+}
 
 

src/components/Options/positionConfig.vue

@@ -0,0 +1,132 @@
+<!-- 档位配置 插件 -->
+<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
+                :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]"
+            />
+            <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>
+</template>
+
+<script>
+import addImg from '@/assets/image/add-icon.png'
+import delImg from '@/assets/image/del-icon.png'
+export default {
+    props: {
+        enumData: {
+            type: Object,
+            default: null
+        },
+        isSee: {
+            type: Boolean,
+            default: false
+        },
+        // label宽度
+        configWidth: {
+            type: Number,
+            default: 120
+        }
+    },
+    data() {
+        return {
+            addImg: addImg,
+            delImg: delImg,
+            maxPosLen: 20, // 最多20档
+            posNum: 1, // 当前档位数量
+            formData: {
+                gearValue: [null] // null:为了不让显示默认1
+            },
+            ruleValidate: {
+                gearValue: [
+                    { required: true, message: '请填写档位值' }
+                ]
+            }
+        }
+    },
+
+    methods: {
+        // 提交的校验
+        handleValidate() {
+            return new Promise((resolve, reject) => {
+                this.$refs.formPosition.validate((valid) => {
+                    if (valid) {
+                        // 数据转换为接口所需要的形式
+                        let obj = {};
+                        if (this.formData.gearValue) {
+                            if (this.formData.gearValue.length[0] === null) {
+                                obj.gearValue = null;
+                            } else {
+                                obj.gearValue = this.formData.gearValue.join();
+                            }
+                        } else {
+                            obj.gearValue = null;
+                        }
+                        resolve(obj)
+                    }
+                })
+            })
+        },
+
+        // 增删档位
+        changePos(idx, actType) {
+            if (actType === 'add') {
+                if (this.formData.gearValue.length < 20) {
+                    this.posNum++;
+                    this.formData.gearValue.splice(idx + 1, 0, null);
+                }
+            } else {
+                this.formData.gearValue.splice(idx, 1);
+                this.posNum--;
+            }
+        },
+
+        // 初始化(在父组件中调用)
+        initData(obj) {
+            if (obj.gearValue) {
+                if (obj.gearValue instanceof Array) {
+                    this.formData.gearValue = obj.gearValue;
+                } else if (typeof obj.gearValue === 'string') {
+                    let arr = [];
+                    if (obj.gearValue.indexOf(';') !== -1) {
+                        // 多个-接口传回来的（接口返回的是;分割）
+                        arr = obj.gearValue.split(';');
+                    } else {
+                        // 多个-正在编辑中 / 只有一个
+                        arr = obj.gearValue.split(',');
+                    }
+                    this.formData.gearValue = arr.map(item => {
+                        return Number(item);
+                    })
+                }
+            } else {
+                this.formData.gearValue = [null];
+            }
+            this.posNum = this.formData.gearValue.length;
+        },
+
+        // 重置表单(在父组件中调用)
+        resetForm() {
+            this.$refs.formPosition.resetFields();
+            this.formData.gearValue = [null];
+        }
+    }
+}
+</script>
+
+<style scoped>
+.img-btn {
+    display: inline-block;
+    vertical-align: middle;
+    margin-left: 10px;
+    width: 20px;
+    cursor: pointer;
+}
+</style>
+

src/views/question/title/index.vue

@@ -81,6 +81,18 @@
               :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>
+
       </el-form>
       <template #footer>
         <div class="dialog-footer">
@@ -97,7 +109,6 @@ 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';
-
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
 const titleList = ref<TitleVO[]>([]);
@@ -123,6 +134,7 @@ const initFormData: TitleForm = {
   question: undefined,
   labelId: undefined,
   labelName : "",
+  options : [],
 }
 const data = reactive<PageData<TitleForm, TitleQuery>>({
   form: { ...initFormData },
@@ -166,7 +178,7 @@ const getLabelList = async () => {
   loading.value = false;
 }
 
-function handleLabelChange(val) {
+function handleLabelChange(val: string) {
   const selectedLabel = labelList.value.find(item => item.value === val);
   if (selectedLabel) {
     form.value.labelName = selectedLabel.label;