selectList

wujingjing

2024-10-24 325ed587539f34169bc8dc62407ee2bed03817f1

selectList

 src/components/chat/chatComponents/summaryCom/components/recordSet/components/List.vue

@@ -1,13 +1,13 @@
<template>
    <el-select
        class="w-32"
        :style="{width:selectWidth}"
        :style="{ width: selectWidth }"
        v-model="selectValue"
        @change="changeValue"
        :disabled="disabled"
        :placeholder="data.title"
    >
        <el-option v-for="item in data.list" :key="item.value" :value="item.value" :label="item.title"></el-option>
        <el-option v-for="item in selectList" :key="item.value" :value="item.value" :label="item.title"></el-option>
    </el-select>
</template>

@@ -15,6 +15,7 @@
import { ref, type PropType, computed } from 'vue';
import { getTextWidth } from '/@/utils/util';
import { StepParam } from '../types';
import { DAY_STEP_LIST, HOUR_STEP_LIST, IS_DAY_LIST } from './constants';

const props = defineProps({
    data: {
@@ -26,6 +27,16 @@
    },
});

const getSelectList = (defaultStepValue: string) => {
    if (IS_DAY_LIST.includes(defaultStepValue)) {
        return DAY_STEP_LIST;
    } else {
        return HOUR_STEP_LIST;
    }
};

const selectList = getSelectList(props.data.origin.step_value);

const emit = defineEmits(['change']);
const SELECT_OFFSET = 47;
const selectWidth = computed(() => {

 src/components/chat/chatComponents/summaryCom/components/recordSet/components/constants.ts

@@ -1,2 +1,18 @@
// 最大选择内容宽度
export const MAX_SELECT_CONTENT_WIDTH = 12;
export const MAX_SELECT_CONTENT_WIDTH = 12;

export const HOUR_STEP_LIST = [
    { title: '5分钟', value: '5 minutes' },
    { title: '10分钟', value: '10 minutes' },
    { title: '半小时', value: '30 minutes' },
    { title: '1小时', value: '1 hours' },
];

export const DAY_STEP_LIST = [
    { title: '1天', value: '1 days' },
    { title: '3天', value: '3 days' },
    { title: '5天', value: '5 days' },
];

// 初始值是这些，下拉列表是 DAY_STEP_LIST
export const IS_DAY_LIST = DAY_STEP_LIST.map(item=>item.value);