|
@@ -3,30 +3,34 @@
|
|
<div :class="`button-block_${type}`" v-if="type === 'A'">
|
|
<div :class="`button-block_${type}`" v-if="type === 'A'">
|
|
<div :class="`button-item_${type}`" v-for="button in buttonList" :key="button.value">
|
|
<div :class="`button-item_${type}`" v-for="button in buttonList" :key="button.value">
|
|
<div v-if="button.isShowInput" :class="`input-area_${type}`">
|
|
<div v-if="button.isShowInput" :class="`input-area_${type}`">
|
|
- <a-input v-model:value="inputValue" :placeholder="button.input" />
|
|
|
|
- <a-button type="primary">{{ button.label }}</a-button>
|
|
|
|
|
|
+ <a-input v-model:value="button.inputValue" :placeholder="button.inputContent" />
|
|
|
|
+ <a-button type="primary" @click="handleData(button)">{{ button.label }}</a-button>
|
|
</div>
|
|
</div>
|
|
<div v-else>
|
|
<div v-else>
|
|
- <a-button type="primary">{{ button.label }}</a-button>
|
|
|
|
|
|
+ <a-button type="primary" @click="handleData(button)">{{ button.label }}</a-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- </div>
|
|
|
|
- <div :class="`button-block_${type}`" v-if="type === 'B'">
|
|
|
|
- <!-- 遍历分组后的按钮组 -->
|
|
|
|
- <div :class="`button-group_${type}`" v-for="(group, groupIndex) in groupedButtons" :key="groupIndex">
|
|
|
|
- <!-- 遍历每组中的按钮 -->
|
|
|
|
- <div :class="`button-item_${type}`" v-for="button in group" :key="button.value">
|
|
|
|
- <a-button type="primary">{{ button.label }}</a-button>
|
|
|
|
|
|
+ <div :class="`button-block_${type}`" v-if="type === 'B'">
|
|
|
|
+ <!-- 遍历分组后的按钮组 -->
|
|
|
|
+ <div :class="`button-group_${type}`" v-for="(group, groupIndex) in groupedButtons" :key="groupIndex">
|
|
|
|
+ <!-- 遍历每组中的按钮 -->
|
|
|
|
+ <div :class="`button-item_${type}`" v-for="button in group" :key="button.value">
|
|
|
|
+ <a-button type="primary" @click="handleData(button)">{{ button.label }}</a-button>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
+ <ConfirmModal v-model:visible="modalVisible" @ok="handleConfirm">
|
|
|
|
+ <SvgIcon class="icon" size="34" name="warning-icon-gas" />
|
|
|
|
+ <span> {{ currentButton?.content }} </span>
|
|
|
|
+ </ConfirmModal>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
<script lang="ts" setup>
|
|
defineOptions({ name: 'ButtonList' });
|
|
defineOptions({ name: 'ButtonList' });
|
|
-
|
|
|
|
- import { computed, onMounted, ref, watch } from 'vue';
|
|
|
|
|
|
+ import ConfirmModal from '@/views/vent/gas/components/modal/confirmModal.vue';
|
|
|
|
+ import { computed, ref, inject } from 'vue';
|
|
// 定义组件属性
|
|
// 定义组件属性
|
|
const props = defineProps<{
|
|
const props = defineProps<{
|
|
type: string;
|
|
type: string;
|
|
@@ -36,17 +40,16 @@
|
|
// 定义按钮项的类型
|
|
// 定义按钮项的类型
|
|
interface ButtonItem {
|
|
interface ButtonItem {
|
|
isShowInput: boolean;
|
|
isShowInput: boolean;
|
|
- input: string;
|
|
|
|
|
|
+ inputContent: string;
|
|
|
|
+ inputValue: string | number;
|
|
value: string | number;
|
|
value: string | number;
|
|
label: string;
|
|
label: string;
|
|
|
|
+ content: string;
|
|
// 可以根据实际需求添加其他属性
|
|
// 可以根据实际需求添加其他属性
|
|
}
|
|
}
|
|
- const inputValue = ref<string>('');
|
|
|
|
- // 组件挂载时初始化一次
|
|
|
|
- onMounted(() => {
|
|
|
|
- console.log(props);
|
|
|
|
- // 设置默认选中项
|
|
|
|
- });
|
|
|
|
|
|
+ const modalVisible = ref(false);
|
|
|
|
+ const currentButton = ref<ButtonItem | null>(null); // 记录当前点击的按钮
|
|
|
|
+
|
|
const groupedButtons = computed<ButtonItem[][]>(() => {
|
|
const groupedButtons = computed<ButtonItem[][]>(() => {
|
|
if (props.type !== 'B') return [];
|
|
if (props.type !== 'B') return [];
|
|
const groups: ButtonItem[][] = [];
|
|
const groups: ButtonItem[][] = [];
|
|
@@ -55,17 +58,19 @@
|
|
}
|
|
}
|
|
return groups;
|
|
return groups;
|
|
});
|
|
});
|
|
-
|
|
|
|
- watch(
|
|
|
|
- () => props.config,
|
|
|
|
- (newV) => {
|
|
|
|
- console.log(newV, 'debuger---');
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- deep: true,
|
|
|
|
- immediate: true,
|
|
|
|
- }
|
|
|
|
|
|
+ // 注入祖父组件提供的处理函数
|
|
|
|
+ const handleButtonConfirm = inject<(button: ButtonItem) => void>(
|
|
|
|
+ 'handleButtonConfirm',
|
|
|
|
+ () => console.warn('未提供handleButtonConfirm函数') // 默认值,避免报错
|
|
);
|
|
);
|
|
|
|
+ const handleData = (button: ButtonItem) => {
|
|
|
|
+ modalVisible.value = !modalVisible.value;
|
|
|
|
+ currentButton.value = button;
|
|
|
|
+ };
|
|
|
|
+ const handleConfirm = () => {
|
|
|
|
+ if (!currentButton.value) return;
|
|
|
|
+ handleButtonConfirm(currentButton.value);
|
|
|
|
+ };
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
<style lang="less" scoped>
|