菜单 搜索
首页 前端知识 使用 Vue 实现包含单选框的弹窗功能（附Demo）

使用 Vue 实现包含单选框的弹窗功能（附Demo）

2024-08-18 22:08:38 前端知识 前端哥 921 856 我要收藏

目录

  • 前言
  • 1. Vue2
  • 2. Vue3

前言

如果在弹窗中单独增设一些选项或者少部分的数据，可用如下的方式
（不用单独创建专门的表单样式）
如果单纯可以通过基本的按钮传输给后端，可用如下知识点

对于弹窗的基本知识推荐阅读：

  1. Vue2：详细分析Element中的MessageBox基本知识（附Demo）
  2. 详细分析Element Plus中的ElMessageBox弹窗用法（附Demo及模版）

1. Vue2

此处涉及avue的知识点，推荐阅读：【vue】avue-crud表单属性配置（表格以及列）

基本的功能如下：

在这里插入图片描述

对应的template部分（以下代码为从实战中抽取）

<template>
  <avue-crud :option="option"
               :table-loading="loading"
               :data="data"
               :page="page"
               :permission="permissionList"
               :before-open="beforeOpen"
               :cell-style="cellStyle"
               v-model="form"
               ref="crud"
               @row-update="rowUpdate"
               @row-save="rowSave"
               @row-del="rowDel"
               @search-change="searchChange"
               @search-reset="searchReset"
               @selection-change="selectionChange"
               @current-change="currentChange"
               @size-change="sizeChange"
               @refresh-change="refreshChange"
               @on-load="onLoad">
      <template slot="menuLeft">
      <el-button type="primary" size="small" plain @click="showWeekPlanDialog">生成周计划</el-button>

      <el-dialog title="周计划" :visible.sync="showWeekPlanDialogBox" :append-to-body="true" width="20%">
            <el-radio-group v-model="selectedPeriod" @change="handlePeriodChange">
                <el-table :data="weekPeriods" border>
                    <el-table-column label="时间段" width="100">
                        <template slot-scope="scope">
                          <el-radio :label="scope.row.label" ></el-radio>
                        </template>
                    </el-table-column>
                    <el-table-column prop="dateRange" label="日期范围" width=200></el-table-column>
                </el-table>
            </el-radio-group>
            <el-button type="primary" size="small" @click="submitWeekPlan" style="margin: 10px;">提交</el-button>
        </el-dialog>
      </template>

对应的功能部分如下：

<script>
  import { doCheckWeekPlan } from "@/api/equipment/basicInfo/inforunningdata";
  import moment from 'moment';

  export default {
    data() {
      return {
        showWeekPlanDialogBox: false, // 控制弹窗显示
        selectedPeriod: '', // 选中的时间段
        weekPeriods: [], // 时间段数组
        loading: true,
        page: {
          pageSize: 100,
          currentPage: 1,
          total: 0
        },
        selectionList: []
      };
    },
    methods: {
      // 显示周月计划弹窗
      showWeekPlanDialog() {
        if (this.selectionList.length === 0) {
          this.$message.warning("请选择至少一条数据");
          return;
        }
        this.calculateWeekPeriods();
        this.showWeekPlanDialogBox = true;
      },
      // 计算时间段
      calculateWeekPeriods() {
        const today = moment();
        const startDateThisWeek = today.clone().startOf('isoWeek');
        const endDateThisWeek = today.clone().endOf('isoWeek');
        const startDateLastWeek = startDateThisWeek.clone().subtract(1, 'week');
        const endDateLastWeek = startDateLastWeek.clone().endOf('isoWeek');
        const startDateNextWeek = startDateThisWeek.clone().add(1, 'week');
        const endDateNextWeek = startDateNextWeek.clone().endOf('isoWeek');

        const formatDateRange = (startDate, endDate) => {
            return `${startDate.format('YYYY-MM-DD')}~${endDate.format('YYYY-MM-DD')}`;
        };

        this.weekPeriods = [
            { label: '上周', dateRange: formatDateRange(startDateLastWeek, endDateLastWeek) },
            { label: '本周', dateRange: formatDateRange(startDateThisWeek, endDateThisWeek) },
            { label: '下周', dateRange: formatDateRange(startDateNextWeek, endDateNextWeek) }
        ];
      },
      // 提交周月计划
      submitWeekPlan() {
        if (this.selectedPeriod === '') {
          this.$message.warning("请选择一个时间段");
          return;
        }
        doCheckWeekPlan(this.ids, this.selectedPeriod).then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          this.showWeekPlanDialogBox = false;
        }).catch(error => {
          console.log(error);
        });
      }
    }
  };
</script>
  • showWeekPlanDialogBox：控制弹窗显示的布尔值
  • selectedPeriod：存储用户选择的时间段
  • weekPeriods：存储计算后的时间段数组
  • showWeekPlanDialog：显示弹窗的方法，并在没有选中数据时提示用户
  • calculateWeekPeriods：计算并格式化上周、本周、下周的时间段
  • submitWeekPlan：提交选中的时间段并调用API，成功后刷新数据并关闭弹窗

对于Js的日期，推荐阅读：js获取上周本周下周的日期（附Demo）

同理，如果是月计划

在这里插入图片描述

整体逻辑如下：

<template slot="menuLeft">
  <el-button type="primary" size="small" plain @click="showWeekPlanDialog">生成周计划</el-button>
  <el-button type="primary" size="small" plain @click="showMonthPlanDialog">生成月计划</el-button>

  <el-dialog title="周计划" :visible.sync="showWeekPlanDialogBox" :append-to-body="true" width="20%">
    <el-radio-group v-model="selectedPeriod" @change="handlePeriodChange">
      <el-table :data="weekPeriods" border>
        <el-table-column label="时间段" width="100">
          <template slot-scope="scope">
            <el-radio :label="scope.row.label"></el-radio>
          </template>
        </el-table-column>
        <el-table-column prop="dateRange" label="日期范围" width=200></el-table-column>
      </el-table>
    </el-radio-group>
    <el-button type="primary" size="small" @click="submitWeekPlan" style="margin: 10px;">提交</el-button>
  </el-dialog>

  <el-dialog title="月计划" :visible.sync="showMonthPlanDialogBox" :append-to-body="true" width="20%">
    <el-radio-group v-model="selectedMonthPeriod" @change="handleMonthPeriodChange">
      <el-table :data="monthPeriods" border>
        <el-table-column label="时间段" width="100">
          <template slot-scope="scope">
            <el-radio :label="scope.row.label"></el-radio>
          </template>
        </el-table-column>
        <el-table-column prop="dateRange" label="日期范围" width=200></el-table-column>
      </el-table>
    </el-radio-group>
    <el-button type="primary" size="small" @click="submitMonthPlan" style="margin: 10px;">提交</el-button>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      showWeekPlanDialogBox: false,
      showMonthPlanDialogBox: false,
      selectedPeriod: '',
      selectedMonthPeriod: '',
      weekPeriods: [],
      monthPeriods: [],
    };
  },
  methods: {
    showWeekPlanDialog() {
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      this.calculateWeekPeriods();
      this.showWeekPlanDialogBox = true;
    },
    showMonthPlanDialog() {
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      this.calculateMonthPeriods();
      this.showMonthPlanDialogBox = true;
    },
    calculateWeekPeriods() {
      const today = moment();
      const startDateThisWeek = today.clone().startOf('isoWeek');
      const endDateThisWeek = today.clone().endOf('isoWeek');
      const startDateLastWeek = startDateThisWeek.clone().subtract(1, 'week');
      const endDateLastWeek = startDateLastWeek.clone().endOf('isoWeek');
      const startDateNextWeek = startDateThisWeek.clone().add(1, 'week');
      const endDateNextWeek = startDateNextWeek.clone().endOf('isoWeek');
      const formatDateRange = (startDate, endDate) => `${startDate.format('YYYY-MM-DD')}~${endDate.format('YYYY-MM-DD')}`;
      this.weekPeriods = [
        { label: '上周', dateRange: formatDateRange(startDateLastWeek, endDateLastWeek) },
        { label: '本周', dateRange: formatDateRange(startDateThisWeek, endDateThisWeek) },
        { label: '下周', dateRange: formatDateRange(startDateNextWeek, endDateNextWeek) }
      ];
    },
    calculateMonthPeriods() {
	 const today = moment();
	  const startDateThisMonth = today.clone().startOf('month');
	  const endDateThisMonth = today.clone().endOf('month');
	  const startDateLastMonth = startDateThisMonth.clone().subtract(1, 'month');
	  const endDateLastMonth = startDateLastMonth.clone().endOf('month');
	  const startDateNextMonth = startDateThisMonth.clone().add(1, 'month');
	  const endDateNextMonth = startDateNextMonth.clone().endOf('month');
	  
	  const formatMonthYear = (date) => date.format('YYYY-MM');
	  
	  this.monthPeriods = [
	    { label: '上月', dateRange: formatMonthYear(startDateLastMonth) },
	    { label: '本月', dateRange: formatMonthYear(startDateThisMonth) },
	    { label: '下月', dateRange: formatMonthYear(startDateNextMonth) }
	  ];
	},
    submitWeekPlan() {
      if (this.selectedPeriod == '') {
        this.$message.warning("请选择一个时间段");
        return;
      }
      doWeekPlan(this.ids, this.selectedPeriod).then(() => {
        this.onLoad(this.page);
        this.$message({
          type: "success",
          message: "操作成功!"
        });
        this.showWeekPlanDialogBox = false;
      }, error => {
        console.log(error);
      });
    },
    submitMonthPlan() {
      if (this.selectedMonthPeriod == '') {
        this.$message.warning("请选择一个时间段");
        return;
      }
      doMonthPlan(this.ids, this.selectedMonthPeriod).then(() => {
        this.onLoad(this.page);
        this.$message({
          type: "success",
          message: "操作成功!"
        });
        this.showMonthPlanDialogBox = false;
      }, error => {
        console.log(error);
      });
    }
  }
};
</script>

2. Vue3

整体界面如下：

在这里插入图片描述

增加一个AuditDialog.vue文件

<template>
  <el-dialog :model-value="modelValue" @update:model-value="updateVisible" title="审批操作" width="15%">
    <el-radio-group v-model="selectedResult">
      <el-radio label="通过">审批通过</el-radio>
      <el-radio label="不通过">审批不通过</el-radio>
    </el-radio-group>
    <template #footer>
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleConfirm">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch } from 'vue';
import { ElMessage } from 'element-plus';

const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true
  }
});

const emit = defineEmits(['confirm', 'update:modelValue']);

const selectedResult = ref('');

const handleConfirm = () => {
  if (!selectedResult.value) {
    ElMessage.error('请选择审批结果');
    return;
  }
  emit('confirm', selectedResult.value);
  emit('update:modelValue', false);
};

const handleCancel = () => {
  emit('update:modelValue', false);
};

const updateVisible = (value) => {
  emit('update:modelValue', value);
};

watch(() => props.modelValue, (newVal) => {
  if (!newVal) {
    selectedResult.value = ''; // 重置选择
  }
});
</script>

对应的父组件如下：

<template>
  <ContentWrap>
    <!-- 列表 -->
    <el-row justify="center" class="table-title">
      <el-col :span="24" class="text-center">
        委托单列表
      </el-col>
    </el-row>
    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
      <el-table-column label="预约编号" align="center" prop="appointmentId" />
      <el-table-column label="操作" align="center" width="180px">
        <template #default="scope">
          <div class="action-buttons">
            <el-button
              link
              type="primary"
              @click="openAuditDialog(scope.row.id)"
              v-if="scope.row.appointmentStatus === '待码头确认'"
              v-hasPermi="['dangerous:appointment-commission:audit']"
            >
              审核
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <Pagination
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
    <!-- 审核对话框 -->
    <AuditDialog v-model:modelValue="isAuditDialogVisible" @confirm="handleAudit" />
  </ContentWrap>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import AuditDialog from './AuditDialog.vue'; // 导入自定义对话框组件
import AppointmentCommissionApi from './api'; // 假设你有一个 API 模块
import { getList } from './utils'; // 假设你有一个获取列表的工具函数

const loading = ref(false);
const list = ref([]);
const total = ref(0);
const queryParams = ref({
  pageNo: 1,
  pageSize: 10
});
const isAuditDialogVisible = ref(false);
const currentAuditId = ref(null);

const openAuditDialog = (id) => {
  currentAuditId.value = id;
  isAuditDialogVisible.value = true;
};

const handleAudit = async (result) => {
  try {
    const response = await AppointmentCommissionApi.auditAppointmentCommission(currentAuditId.value, result === '通过');
    if (response === true) {
      ElMessage.success('审批成功');
      await getList(); // 成功后刷新列表
    } else {
      ElMessage.error('审批失败'); // 处理失败情况
    }
  } catch (error) {
    ElMessage.error('审批操作失败'); // 处理任何错误
  } finally {
    isAuditDialogVisible.value = false; // 关闭对话框
  }
};

// 模拟获取列表数据
const getList = async () => {
  loading.value = true;
  // 模拟异步请求
  setTimeout(() => {
    list.value = [
      { id: 1, appointmentId: 'A123', appointmentStatus: '待码头确认' },
      { id: 2, appointmentId: 'A456', appointmentStatus: '已确认' },
      // 添加更多数据
    ];
    total.value = list.value.length;
    loading.value = false;
  }, 1000);
};

getList();
</script>

<style scoped>
.table-title {
  margin: 20px 0;
}
.action-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
}
</style>
转载请注明出处或者链接地址：https://www.qianduange.cn//article/16106.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

你真的熟练运用 HTML5 了吗，这10 个酷炫的 H5 特性你会几个

2024-06-19 08:06:22

HTML浏览CAD（WEB CAD）二次开发常用的CAD编辑功能的详细教程

2024-08-25 23:08:25

HTML5 解决方案：面向 HTML5 开发者的基本技巧（一）

2024-08-25 23:08:50

无涯教程-HTML5 - MathML

2024-08-25 23:08:46

【博主推荐】HTML5好看的酷酷的个人简历、个人主页、个人网站源码

2024-08-25 23:08:37

HTML5简明教程系列之HTML5基础（一）

2024-08-25 23:08:55

手把手教你用Go开发客户端软件（使用Go HTML）

2024-08-25 23:08:52

第7节课：CSS基础与选择器——打造网页视觉魅力

2024-08-25 23:08:52

基于HTML美食餐饮文化项目的设计与实现 HTML CSS上海美食介绍网页(8页) 大学生美食文化网站制作 简单餐饮文化网页设计成品

2024-05-05 21:05:49

【HTML CSS】在HTML中优雅地展示图片：技巧与实践

2024-08-25 23:08:44

大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
3

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
4

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
5

npm的使用

2024-08-18 00:08:131000
6

JavaScript与jQuery：昔日王者与现代前端的交响曲【含代码示例】

2024-07-30 22:07:311000
7

在HTML和CSS当中运用显示隐藏

2024-06-17 09:06:541000
8

成为优秀的TS体操高手 之 TS 类型体操前置知识储备

2024-06-10 11:06:351000
9

django改了html网页没有变化,,前端页面居然没有对应变化?!修改了css文件但是前端页面没有反应

2024-06-06 10:06:201000
10

html简单网页代码：基于html关爱空巢老人网页设计与实现

2024-06-04 10:06:181000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！