新增房间

src/api/modules/room.ts

@@ -92,7 +92,13 @@ export const queryList = params => {
     { params }
   );
 };
+export const addRoomData = data => {
+  return http.request<Result>("post", "/adminapi/Room/add_room", {
+    data
+  });
+};
 // 删除房间
+
 export const deleteRoomData = data => {
   return http.request<Result>("post", "/adminapi/Room/del_room", {
     data

src/views/room/roomList/addForm.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import uploadImage from '@/components/UploadImage/index.vue';
+const ruleFormRef = ref();
+const formRules = ref({
+  user_code: [{ required: true, message: '请输入房主ID', trigger: 'blur' }],
+  room_name: [{ required: true, message: '请输入房间名称', trigger: 'blur' }],
+  room_intro: [{ required: true, message: '请输入房间公告', trigger: 'blur' }],
+  room_cover: [{ required: true, message: '请上传房间封面', trigger: 'blur' }],
+});
+const props = defineProps(["formInline"]);
+const newFormInline = ref(
+  props.formInline
+    ? props.formInline
+    : {
+      user_code: "",
+      room_name: "",
+      room_intro: "",
+      room_cover: ""
+    }
+);
+function getRef() {
+  return ruleFormRef.value;
+}
+function handleFileSuccess(list) {
+  newFormInline.value.room_cover = list.join(',')
+}
+defineExpose({ getRef });
+</script>
+
+<template>
+  <el-form ref="ruleFormRef" :rules="formRules" :model="newFormInline" label-width="120px">
+    <el-form-item label="房主ID" prop="user_code">
+      <el-input v-model="newFormInline.user_code" clearable placeholder="请输入房主ID" />
+    </el-form-item>
+    <el-form-item label="房间名称" prop="room_name">
+      <el-input v-model="newFormInline.room_name" clearable placeholder="请输入房间名称" />
+    </el-form-item>
+    <el-form-item label="房间公告" prop="room_intro">
+      <el-input type="textarea" placeholder="请输入房间公告" v-model="newFormInline.room_intro" maxlength="30" show-word-limit>
+      </el-input>
+    </el-form-item>
+    <el-form-item label="房间封面" prop="room_cover">
+      <uploadImage @handleSuccess="handleFileSuccess" :limit="1" :echoUrl="newFormInline.room_cover" />
+    </el-form-item>
+  </el-form>
+</template>
+<style scoped lang="scss">
+.flex-container {
+  display: flex;
+  /* 启用 Flex 布局 */
+  flex-wrap: wrap;
+  /* 允许换行 */
+  width: 100%;
+}
+
+.flex-item {
+  flex: 0 0 calc(25% - 10px);
+  /* 基础宽度25% 减去间隔 */
+  margin: 5px;
+  /* 元素间距 */
+  box-sizing: border-box;
+  /* 包含内边距和边框 */
+  border-radius: 14rpx;
+  /* 样式美化（可选） */
+  background-color: #fff;
+  // padding: 20rpx;
+  text-align: center;
+
+  // .image {
+  //   width: 120rpx;
+  //   height: 120rpx;
+  // }
+}
+</style>

src/views/room/roomList/hook.tsx

@@ -1,6 +1,7 @@
 import { ref, h, nextTick } from "vue";
 import editForm from "./form.vue";
 import detailView from './detail.vue';
+import addFormView from "./addForm.vue";
 import TurntableView from './Turntable/Turntable.vue';
 import XunLeHuiView from './XunLeHui/index.vue';
 import { utils, writeFile } from "xlsx";
@@ -10,7 +11,7 @@ import {
   queryList,
   getRoomDetail,
   queryClassifyList,
-  deleteRoomData,
+  addRoomData,
   updateRoomData
 } from "@/api/modules/room";
 import { addDialog } from "@/components/ReDialog";
@@ -182,6 +183,45 @@ export function useData() {
       contentRenderer: () => h(detailView)
     });
   };
+  const openDialog = async (title = "新增", rowData: any) => {
+    addDialog({
+      title: `${title}房间`,
+      props: {
+        formInline: {
+          user_code: "",
+          room_name: "",
+          room_intro: "",
+          room_cover: ""
+        }
+      },
+      width: "40%",
+      closeOnClickModal: false,
+      contentRenderer: () => h(addFormView, { ref: formRef, formInline: null }),
+      beforeSure: (done, { options }) => {
+        const FormRef = formRef.value.getRef();
+        const curData = options.props.formInline;
+        const SaveData = async form => {
+          const { code } = await addRoomData({
+            ...form
+          });
+          if (code) {
+            message("修改成功", { type: "success" });
+            onSearch(searchForm.value);
+            done();
+          } else {
+            message("修改失败", { type: "error" });
+          }
+        };
+        FormRef.validate(valid => {
+          if (valid) {
+            console.log("curData", curData);
+            // 表单规则校验通过
+            SaveData(curData);
+          }
+        });
+      }
+    });
+  }
   // 新增
   const editDialog = async (title = "新增", rowData: any) => {
     const { data, code } = await getRoomDetail({ room_id: rowData.room_id })
@@ -356,6 +396,7 @@ export function useData() {
     editDialog,
     viewTurntableData,
     viewXunLeHuiData,
-    getListType
+    getListType,
+    openDialog
   };
 }

src/views/room/roomList/index.vue

@@ -17,6 +17,7 @@ const {
   handleSizeChange,
   handleCurrentChange,
   viewDetail,
+  openDialog,
   viewTurntableData,
   loading,
   exportExcel,
@@ -44,9 +45,9 @@ onMounted(() => {
           <el-button type="primary" @click="exportExcel">
             导出
           </el-button>
-          <!-- <el-button type="primary" :icon="useRenderIcon(AddFill)" @click="openDialog('新增', {})">
+          <el-button type="primary" :icon="useRenderIcon(AddFill)" @click="openDialog('新增', {})">
             新增房间
-          </el-button> -->
+          </el-button>
         </template>
         <template v-slot="{ size, dynamicColumns }">
           <pure-table ref="tableRef" align-whole="center" showOverflowTooltip table-layout="auto" default-expand-all