From 41c9d91da0c73303ea6f8eae03f030ce28b6cd1d Mon Sep 17 00:00:00 2001
From: zhangwencui <1064582902@qq.com>
Date: 星期五, 16 一月 2026 16:08:02 +0800
Subject: [PATCH] 会议列表时间段修改

---
 src/pages/managementMeetings/meetApplication/index.vue |  497 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 497 insertions(+), 0 deletions(-)

diff --git a/src/pages/managementMeetings/meetApplication/index.vue b/src/pages/managementMeetings/meetApplication/index.vue
new file mode 100644
index 0000000..ac7eb16
--- /dev/null
+++ b/src/pages/managementMeetings/meetApplication/index.vue
@@ -0,0 +1,497 @@
+<template>
+  <view style="background-color: #fff;"
+        class="client-visit-detail">
+    <PageHeader title="浼氳鐢宠"
+                @back="goBack" />
+    <view>
+      <view v-for="item in applicationTypes"
+            :key="item.value"
+            class="application-type-item"
+            :class="{ active: meetingForm.applicationType === item.value }"
+            @click="selectApplicationType(item)">
+        <view class="application-type-info">
+          <view class="application-type-name">{{ item.name }}</view>
+          <view class="application-type-desc">{{ item.desc }}</view>
+        </view>
+      </view>
+    </view>
+    <u-form ref="formRef"
+            label-width="90">
+      <!-- 瀹㈡埛淇℃伅 -->
+      <u-cell-group title="浼氳鐢宠">
+        <u-form-item label="浼氳涓婚"
+                     prop="title"
+                     required
+                     border-bottom>
+          <u-input v-model="meetingForm.title"
+                   placeholder="璇疯緭鍏ヤ細璁富棰�" />
+        </u-form-item>
+        <u-form-item label="浼氳瀹�"
+                     prop="roomId"
+                     required
+                     border-bottom>
+          <u-input v-model="meetingForm.roomName"
+                   placeholder="璇烽�夋嫨浼氳瀹�"
+                   readonly
+                   @click="showRoomPicker = true" />
+          <template #right>
+            <up-icon name="arrow-right"
+                     @click="showRoomPicker = true"></up-icon>
+          </template>
+        </u-form-item>
+        <u-form-item label="涓绘寔浜�"
+                     prop="host"
+                     required
+                     border-bottom>
+          <u-input v-model="meetingForm.host"
+                   placeholder="璇疯緭鍏ヤ富鎸佷汉濮撳悕" />
+        </u-form-item>
+        <u-form-item label="浼氳鏃ユ湡"
+                     prop="meetingDate"
+                     required
+                     border-bottom>
+          <u-input v-model="meetingForm.meetingDate"
+                   placeholder="璇烽�夋嫨浼氳鏃ユ湡"
+                   readonly
+                   @click="showDatePicker = true" />
+          <template #right>
+            <up-icon name="calendar"
+                     @click="showDatePicker = true"></up-icon>
+          </template>
+        </u-form-item>
+        <u-form-item label="寮�濮嬫椂闂�"
+                     prop="startTime"
+                     required
+                     border-bottom>
+          <u-input v-model="meetingForm.startTime"
+                   placeholder="璇烽�夋嫨寮�濮嬫椂闂�"
+                   readonly
+                   @click="showStartTimePicker = true" />
+          <template #right>
+            <up-icon name="clock"
+                     @click="showStartTimePicker = true"></up-icon>
+          </template>
+        </u-form-item>
+        <u-form-item label="缁撴潫鏃堕棿"
+                     prop="endTime"
+                     required
+                     border-bottom>
+          <u-input v-model="meetingForm.endTime"
+                   placeholder="璇烽�夋嫨缁撴潫鏃堕棿"
+                   readonly
+                   @click="showEndTimePicker = true" />
+          <template #right>
+            <up-icon name="clock"
+                     @click="showEndTimePicker = true"></up-icon>
+          </template>
+        </u-form-item>
+        <u-form-item label="鍙備細浜哄憳"
+                     prop="participants"
+                     required
+                     border-bottom>
+          <u-input v-model="meetingForm.participantsNames"
+                   placeholder="璇烽�夋嫨鍙備細浜哄憳"
+                   readonly
+                   @click="showEquipmentSheet = true" />
+          <template #right>
+            <up-icon name="arrow-right"
+                     @click="openParticipantPicker"></up-icon>
+          </template>
+        </u-form-item>
+        <u-form-item label="浼氳璇存槑"
+                     prop="description"
+                     border-bottom>
+          <u-input v-model="meetingForm.description"
+                   placeholder="璇疯緭鍏ヤ細璁鏄�" />
+        </u-form-item>
+      </u-cell-group>
+      <!-- 鎻愪氦鎸夐挳 -->
+    </u-form>
+    <view class="footer-btns">
+      <u-button class="cancel-btn"
+                @click="resetForm">閲嶇疆</u-button>
+      <u-button class="save-btn"
+                @click="handleSubmit">淇濆瓨</u-button>
+    </view>
+    <!-- 鏃ユ湡閫夋嫨鍣� -->
+    <up-datetime-picker v-model="meetingForm.meetingDate"
+                        mode="date"
+                        :show="showDatePicker"
+                        @confirm="onDateSelect"
+                        @cancel="showDatePicker = false"
+                        format="YYYY-MM-DD"
+                        value-format="YYYY-MM-DD"
+                        :min-date="minDate" />
+    <!-- 寮�濮嬫椂闂撮�夋嫨鍣� -->
+    <up-action-sheet :show="showStartTimePicker"
+                     :actions="timeOptions"
+                     @select="onStartTimeSelect"
+                     @close="showStartTimePicker = false" />
+    <!-- 缁撴潫鏃堕棿閫夋嫨鍣� -->
+    <up-action-sheet :show="showEndTimePicker"
+                     :actions="timeOptions"
+                     @select="onEndTimeSelect"
+                     @close="showEndTimePicker = false" />
+    <!-- 浼氳瀹ら�夋嫨鍣� -->
+    <up-action-sheet :show="showRoomPicker"
+                     :actions="meetingRooms"
+                     @select="onRoomSelect"
+                     @close="showRoomPicker = false" />
+    <u-popup :show="showEquipmentSheet"
+             mode="bottom"
+             @close="showEquipmentSheet = false"
+             height="200px">
+      <view class="popup-content">
+        <view class="popup-body">
+          <u-checkbox-group v-model="meetingForm.participants"
+                            @change="handleParticipantChange"
+                            icon-placement="right"
+                            placement="row">
+            <view style="width:100%;padding:10px;margin-top:20px;">
+              <u-checkbox v-for="option in employees"
+                          :key="option.id"
+                          :name="option.id"
+                          :label="`${option.staffName} (${option.postJob})`"
+                          class="checkbox-item"></u-checkbox>
+            </view>
+          </u-checkbox-group>
+        </view>
+      </view>
+    </u-popup>
+  </view>
+</template>
+
+<script setup>
+  // 鏇挎崲 toast 鏂规硶
+  defineOptions({ name: "meeting-settings-detail" });
+  const showToast = message => {
+    uni.showToast({
+      title: message,
+      icon: "none",
+    });
+  };
+
+  import { ref, reactive, onMounted, computed } from "vue";
+  import PageHeader from "@/components/PageHeader.vue";
+  import useUserStore from "@/store/modules/user";
+  import {
+    saveMeetingApplication,
+    getRoomEnum,
+  } from "@/api/managementMeetings/meeting";
+  import { getStaffOnJob } from "@/api/personnelManagement/onboarding";
+  import dayjs from "dayjs";
+
+  const userStore = useUserStore();
+
+  // 琛ㄥ崟鏁版嵁
+  const meetingForm = reactive({
+    title: "",
+    type: "",
+    roomId: "",
+    roomName: "",
+    host: "",
+    meetingDate: "",
+    startTime: "",
+    endTime: "",
+    participants: [],
+    description: "",
+    participantsNames: [],
+    applicationType: "department",
+  });
+  // 鐢宠绫诲瀷閫夐」
+  const applicationTypes = ref([
+    {
+      value: "approval",
+      name: "瀹℃壒娴佺▼浼氳",
+      desc: "闇�瑕佺粡杩囧绾у鎵圭殑浼氳鐢宠",
+      // icon: Document,
+    },
+    {
+      value: "department",
+      name: "閮ㄩ棬绾т細璁�",
+      desc: "閮ㄩ棬鍐呴儴浼氳鐢宠娴佺▼",
+      // icon: Promotion,
+    },
+    {
+      value: "notification",
+      name: "浼氳閫氱煡",
+      desc: "鏃犻渶瀹℃壒鐩存帴鍙戝竷鐨勪細璁�氱煡",
+      // icon: Bell,
+    },
+  ]);
+  // 椤甸潰鐘舵��
+  const loading = ref(false);
+  const formRef = ref(null);
+  const showDatePicker = ref(false);
+  const showStartTimePicker = ref(false);
+  const showEndTimePicker = ref(false);
+  const showRoomPicker = ref(false);
+
+  // 鏈�灏忔棩鏈燂紙浠婂ぉ锛�
+  const minDate = computed(() => {
+    return dayjs().format("YYYY-MM-DD");
+  });
+
+  // 閫夋嫨鐢宠绫诲瀷
+  const selectApplicationType = item => {
+    meetingForm.applicationType = item.value;
+  };
+
+  // 杩斿洖涓婁竴椤�
+  const goBack = () => {
+    uni.navigateBack();
+  };
+  const showEquipmentSheet = ref(false);
+  const openParticipantPicker = () => {
+    showEquipmentSheet.value = true;
+  };
+
+  // 閲嶇疆琛ㄥ崟
+  const resetForm = () => {
+    meetingForm.title = "";
+    meetingForm.type = "";
+    meetingForm.roomId = "";
+    meetingForm.roomName = "";
+    meetingForm.host = "";
+    meetingForm.meetingDate = "";
+    meetingForm.startTime = "";
+    meetingForm.endTime = "";
+    meetingForm.participants = [];
+    meetingForm.participantsNames = [];
+    meetingForm.description = "";
+    meetingForm.applicationType = "department";
+  };
+  const handleParticipantChange = val => {
+    console.log("val", val);
+
+    meetingForm.participants = val;
+    meetingForm.participantsNames = employees.value
+      .filter(employee => val.includes(employee.id))
+      .map(employee => employee.staffName);
+  };
+  // 鎻愪氦琛ㄥ崟
+  const handleSubmit = async () => {
+    console.log("meetingForm", meetingForm);
+    if (!meetingForm.title) {
+      showToast("璇疯緭鍏ヤ細璁富棰�");
+      return;
+    }
+
+    if (!meetingForm.roomId) {
+      showToast("璇烽�夋嫨浼氳瀹�");
+      return;
+    }
+
+    if (!meetingForm.host) {
+      showToast("璇疯緭鍏ヤ富鎸佷汉");
+      return;
+    }
+
+    if (!meetingForm.meetingDate) {
+      showToast("璇烽�夋嫨浼氳鏃ユ湡");
+      return;
+    }
+
+    if (!meetingForm.startTime) {
+      showToast("璇烽�夋嫨寮�濮嬫椂闂�");
+      return;
+    }
+
+    if (!meetingForm.endTime) {
+      showToast("璇烽�夋嫨缁撴潫鏃堕棿");
+      return;
+    }
+
+    if (!meetingForm.participants) {
+      showToast("璇烽�夋嫨鍙備細浜哄憳");
+      return;
+    }
+
+    // 楠岃瘉寮�濮嬫椂闂村繀椤诲皬浜庣粨鏉熸椂闂�
+    if (meetingForm.startTime >= meetingForm.endTime) {
+      showToast("寮�濮嬫椂闂村繀椤诲皬浜庣粨鏉熸椂闂�");
+      return;
+    }
+
+    try {
+      loading.value = true;
+
+      let formData = { ...meetingForm };
+      formData.startTime = `${meetingForm.meetingDate} ${meetingForm.startTime}:00`;
+      formData.endTime = `${meetingForm.meetingDate} ${meetingForm.endTime}:00`;
+      formData.participants = JSON.stringify(meetingForm.participants);
+
+      console.log(formData);
+
+      // 璋冪敤瀹為檯鐨凙PI
+      const res = await saveMeetingApplication(formData);
+
+      if (res.code === 200) {
+        showToast("淇濆瓨鎴愬姛");
+        setTimeout(() => {
+          goBack();
+        }, 500);
+      } else {
+        showToast(res.message || "淇濆瓨澶辫触锛岃閲嶈瘯");
+      }
+    } catch (e) {
+      console.error("淇濆瓨澶辫触:", e);
+      showToast("淇濆瓨澶辫触锛岃閲嶈瘯");
+    } finally {
+      loading.value = false;
+    }
+  };
+  // 鏃ユ湡閫夋嫨鍣ㄧ‘璁ゅ洖璋�
+  const onDateSelect = action => {
+    console.log(action.value);
+
+    if (action.value) {
+      meetingForm.meetingDate = dayjs(action.value).format("YYYY-MM-DD");
+    } else {
+      meetingForm.meetingDate = dayjs().format("YYYY-MM-DD");
+    }
+
+    showDatePicker.value = false;
+  };
+  const onStartTimeSelect = action => {
+    meetingForm.startTime = action.value;
+    showStartTimePicker.value = false;
+  };
+  const onEndTimeSelect = action => {
+    meetingForm.endTime = action.value;
+    showEndTimePicker.value = false;
+  };
+
+  // 浼氳瀹ら�夋嫨鍥炶皟
+  const onRoomSelect = action => {
+    meetingForm.roomId = action.id;
+    meetingForm.roomName = action.name;
+    showRoomPicker.value = false;
+  };
+  // 鏃堕棿閫夐」锛堜互鍗婂皬鏃朵负闂撮殧锛�
+  const timeOptions = ref([]);
+
+  // 鍒濆鍖栨椂闂撮�夐」
+  const initTimeOptions = () => {
+    const options = [];
+    for (let hour = 8; hour <= 18; hour++) {
+      // 姣忎釜灏忔椂娣诲姞涓や釜閫夐」锛氭暣鐐瑰拰鍗婄偣
+      options.push({
+        value: `${hour.toString().padStart(2, "0")}:00`,
+        name: `${hour.toString().padStart(2, "0")}:00`,
+      });
+
+      if (hour < 18) {
+        // 18:00涔嬪悗娌℃湁鍗婄偣閫夐」
+        options.push({
+          value: `${hour.toString().padStart(2, "0")}:30`,
+          name: `${hour.toString().padStart(2, "0")}:30`,
+        });
+      }
+    }
+    timeOptions.value = options;
+  };
+  // 浼氳瀹ゅ垪琛�
+  const employees = ref([]);
+  const meetingRooms = ref([]);
+  const getMeetingRooms = async () => {
+    try {
+      const res = await getRoomEnum();
+      if (res.code === 200) {
+        meetingRooms.value = res.data || [];
+      } else {
+        showToast(res.message || "鑾峰彇浼氳瀹ゅ垪琛ㄥけ璐�");
+      }
+    } catch (e) {
+      console.error("鑾峰彇浼氳瀹ゅ垪琛ㄥけ璐�:", e);
+      showToast("鑾峰彇浼氳瀹ゅ垪琛ㄥけ璐ワ紝璇烽噸璇�");
+    }
+  };
+
+  onMounted(() => {
+    initPageData();
+    initTimeOptions();
+    getMeetingRooms();
+    getStaffOnJob().then(res => {
+      employees.value = res.data.sort((a, b) =>
+        a.postJob.localeCompare(b.postJob)
+      );
+    });
+  });
+
+  const initPageData = () => {
+    // 鍒濆鍖栨暟鎹�
+  };
+</script>
+
+<style scoped lang="scss">
+  @import "@/static/scss/form-common.scss";
+
+  .footer-btns {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: #fff;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    padding: 0.75rem 0;
+    box-shadow: 0 -0.125rem 0.5rem rgba(0, 0, 0, 0.05);
+    z-index: 1000;
+  }
+
+  .cancel-btn {
+    font-weight: 400;
+    font-size: 1rem;
+    color: #ffffff;
+    width: 6.375rem;
+    background: #c7c9cc;
+    box-shadow: 0 0.25rem 0.625rem 0 rgba(3, 88, 185, 0.2);
+    border-radius: 2.5rem 2.5rem 2.5rem 2.5rem;
+  }
+
+  .save-btn {
+    font-weight: 400;
+    font-size: 1rem;
+    color: #ffffff;
+    width: 14rem;
+    background: linear-gradient(140deg, #00baff 0%, #006cfb 100%);
+    box-shadow: 0 0.25rem 0.625rem 0 rgba(3, 88, 185, 0.2);
+    border-radius: 2.5rem 2.5rem 2.5rem 2.5rem;
+  }
+  .application-type-item {
+    width: 94%;
+    margin-left: 3%;
+    // height: 120rpx;
+    background-color: #f1f1f1;
+    border-radius: 10rpx;
+    margin-top: 20rpx;
+    padding: 20rpx;
+    box-shadow: 0 2rpx 12rpx 0 rgba(246, 244, 244, 0.1);
+    transition: box-shadow 0.3s ease;
+  }
+  .application-type-item.active {
+    box-shadow: 0 4rpx 16rpx 0 rgba(0, 0, 0, 0.15);
+    background-color: #fff;
+    border: 1rpx solid #0078a3;
+  }
+
+  .application-type-name {
+    font-weight: 400;
+    font-size: 1rem;
+    color: #000000;
+  }
+  .application-type-item.active .application-type-name {
+    color: #0078a3;
+  }
+  .application-type-desc {
+    font-weight: 400;
+    font-size: 0.875rem;
+    margin-top: 0.5rem;
+    color: #757575;
+  }
+  .application-type-item.active .application-type-desc {
+    color: #0078a3;
+  }
+</style>
\ No newline at end of file

--
Gitblit v1.9.3