fix:1.房屋管理查看后点修改不可修改

2.户型管理可以预览视频

src/views/mz/house/index.vue

@@ -18,7 +18,11 @@
           label-width="68px"
         >
           <el-form-item label="户型">
-            <el-select clearable v-model="queryParams.houseTypeId" placeholder="请选择">
+            <el-select
+              clearable
+              v-model="queryParams.houseTypeId"
+              placeholder="请选择"
+            >
               <el-option
                 v-for="item in houseTypeoption"
                 :label="item.label"
@@ -316,7 +320,8 @@
           </el-col>
           <el-col :span="12">
             <el-form-item label="所在楼栋" prop="buildingId">
-              <el-select clearable
+              <el-select
+                clearable
                 v-model="form.buildingId"
                 placeholder="请选择所在楼栋"
                 style="width: 150px; margin-right: 10px"
@@ -331,7 +336,8 @@
                 >
                 </el-option>
               </el-select>
-              <el-select clearable
+              <el-select
+                clearable
                 v-model="form.unitId"
                 placeholder="选择单元"
                 style="width: 150px"
@@ -374,7 +380,8 @@
         <el-row>
           <el-col :span="12">
             <el-form-item label="房型" prop="houseTypeId">
-              <el-select clearable
+              <el-select
+                clearable
                 v-model="form.houseTypeId"
                 placeholder="请选择房型"
                 style="width: 200px"
@@ -407,7 +414,8 @@
           <el-col :span="24">
             <el-form-item label="入住性别限制" prop="sexLimit">
               <el-radio-group v-model="form.useableState" :disabled="disabled">
-                <el-radio label="1">仅允许男生入住{{ form.useableState }}</el-radio>
+                <el-radio label="0">未设置</el-radio>
+                <el-radio label="1">仅允许男生入住</el-radio>
                 <el-radio label="2">仅允许女生入住</el-radio>
               </el-radio-group>
             </el-form-item>
@@ -856,6 +864,7 @@ export default {
     /** 修改按钮操作 */
     handleUpdate(row) {
       this.reset();
+      this.disabled = false;
       const id = row.id || this.ids;
       getHouse(id).then((response) => {
         this.form = response.data;

src/views/mz/housetype/index.vue

@@ -2,7 +2,11 @@
   <div class="app-container">
     <div class="flex w-full h-full">
       <div class="tree mr-10 card">
-        <el-tree :data="apartmentOptions" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
+        <el-tree
+          :data="apartmentOptions"
+          :props="defaultProps"
+          @node-click="handleNodeClick"
+        ></el-tree>
       </div>
       <div class="card flex-1" style="width: calc(100% - 150px)">
         <el-row :gutter="10" class="mb8">
@@ -18,12 +22,23 @@
             <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
               v-hasPermi="['mz:type:export']">导出</el-button>
           </el-col>
-          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+          <right-toolbar
+            :showSearch.sync="showSearch"
+            @queryTable="getList"
+          ></right-toolbar>
         </el-row>
 
-        <el-table v-loading="loading" :data="housetypeList" @selection-change="handleSelectionChange">
+        <el-table
+          v-loading="loading"
+          :data="housetypeList"
+          @selection-change="handleSelectionChange"
+        >
           <el-table-column type="selection" width="55" align="center" />
-          <el-table-column label="所属公寓" align="center" prop="apartmentName" />
+          <el-table-column
+            label="所属公寓"
+            align="center"
+            prop="apartmentName"
+          />
           <el-table-column label="房型" align="center" prop="typeName" />
           <el-table-column label="面积" align="center" prop="area" />
           <el-table-column label="房间" align="center" prop="roomCount" />
@@ -34,7 +49,11 @@
               {{ getFacilityNames(scope.row.facilityIds) }}
             </template>
           </el-table-column>
-          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+          <el-table-column
+            label="操作"
+            align="center"
+            class-name="small-padding fixed-width"
+          >
             <template slot-scope="scope">
               <el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row)">查看</el-button>
               <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
@@ -45,36 +64,78 @@
           </el-table-column>
         </el-table>
 
-        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
-          :limit.sync="queryParams.pageSize" @pagination="getList" />
+        <pagination
+          v-show="total > 0"
+          :total="total"
+          :page.sync="queryParams.pageNum"
+          :limit.sync="queryParams.pageSize"
+          @pagination="getList"
+        />
       </div>
     </div>
 
     <!-- 添加或修改房型对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
+    <el-dialog
+      :title="title"
+      :visible.sync="open"
+      width="1000px"
+      append-to-body
+    >
       <el-form ref="form" :model="form" :rules="rules" label-width="120px">
         <el-row type="flex" justify="start">
           <el-col :span="12">
             <el-form-item label="所在小区/公寓" prop="apartmentId">
-              <treeselect :disable-branch-nodes="true" :disabled="disabled" v-model="form.apartmentId" :options="addDeptOption" :normalizer="normalizer" placeholder="请选择所在小区/公寓" style="width: 100%" />
-            </el-form-item></el-col>
+              <treeselect
+                :disable-branch-nodes="true"
+                :disabled="disabled"
+                v-model="form.apartmentId"
+                :options="addDeptOption"
+                :normalizer="normalizer"
+                placeholder="请选择所在小区/公寓"
+                style="width: 100%"
+              /> </el-form-item
+          ></el-col>
           <el-col :span="12">
             <el-form-item label="户型名称" prop="typeName">
-              <el-input v-model="form.typeName" placeholder="请输入户型名称" :disabled="disabled"/> </el-form-item></el-col>
+              <el-input
+                v-model="form.typeName"
+                placeholder="请输入户型名称"
+                :disabled="disabled"
+              /> </el-form-item
+          ></el-col>
         </el-row>
         <el-row>
           <el-col :span="8">
             <el-form-item label="面积" prop="area">
-              <el-input-number :min="0" v-model="form.area" :disabled="disabled" controls-position="right" placeholder="请输入面积" clearable />
-            </el-form-item></el-col>
+              <el-input-number
+                :min="0"
+                v-model="form.area"
+                :disabled="disabled"
+                controls-position="right"
+                placeholder="请输入面积"
+                clearable
+              /> </el-form-item
+          ></el-col>
           <el-col :span="8">
             <el-form-item label="客厅数" prop="livingRoomCount">
-              <el-input-number v-model="form.livingRoomCount" :disabled="disabled" :min="0" controls-position="right" style="width: 120px" />
+              <el-input-number
+                v-model="form.livingRoomCount"
+                :disabled="disabled"
+                :min="0"
+                controls-position="right"
+                style="width: 120px"
+              />
             </el-form-item>
           </el-col>
           <el-col :span="8">
             <el-form-item label="卫生间数" prop="bathroomCount">
-              <el-input-number v-model="form.bathroomCount" :disabled="disabled" :min="0" controls-position="right" style="width: 120px" />
+              <el-input-number
+                v-model="form.bathroomCount"
+                :disabled="disabled"
+                :min="0"
+                controls-position="right"
+                style="width: 120px"
+              />
             </el-form-item>
           </el-col>
         </el-row>
@@ -82,12 +143,30 @@
           <el-col :span="3" class="room-label">居住房间</el-col>
           <el-col :span="21">
             <div class="room-container" v-if="form.roomTypes">
-              <div v-for="(item, index) in form.roomTypes" :key="index" class="room-item">
+              <div
+                v-for="(item, index) in form.roomTypes"
+                :key="index"
+                class="room-item"
+              >
                 <div style="display: flex; flex-wrap: wrap">
-                  <el-form-item label="房间名称" label-width="80px"  :prop="`roomTypes[${index}].roomTypeName`"   :rules="[
-                                    { required: true, message: '请填写房间名称', trigger: 'blur' },
-                                ]">
-                    <el-input v-model="form.roomTypes[index].roomTypeName" :disabled="disabled" placeholder="请输入房间名称" style="width: 100px" />
+                  <el-form-item
+                    label="房间名称"
+                    label-width="80px"
+                    :prop="`roomTypes[${index}].roomTypeName`"
+                    :rules="[
+                      {
+                        required: true,
+                        message: '请填写房间名称',
+                        trigger: 'blur',
+                      },
+                    ]"
+                  >
+                    <el-input
+                      v-model="form.roomTypes[index].roomTypeName"
+                      :disabled="disabled"
+                      placeholder="请输入房间名称"
+                      style="width: 100px"
+                    />
                   </el-form-item>
                   <el-form-item label="朝向" prop="orientation" label-width="80px">
                      <el-select clearable v-model="form.roomTypes[index].orientation" :disabled="disabled" placeholder="请选择" style="width: 100px">
@@ -101,23 +180,65 @@
                     </el-select>
                   </el-form-item>
                   <el-form-item label="面积" prop="area" label-width="80px">
-                    <el-input v-model="form.roomTypes[index].area" :disabled="disabled" placeholder="请输入" clearable style="width: 100px" />
+                    <el-input
+                      v-model="form.roomTypes[index].area"
+                      :disabled="disabled"
+                      placeholder="请输入"
+                      clearable
+                      style="width: 100px"
+                    />
                   </el-form-item>
-                  <el-form-item label="其他说明" prop="description" label-width="80px">
-                    <el-input v-model="form.roomTypes[index].description" :disabled="disabled" placeholder="请输入说明" clearable
-                      style="width: 100px" />
+                  <el-form-item
+                    label="其他说明"
+                    prop="description"
+                    label-width="80px"
+                  >
+                    <el-input
+                      v-model="form.roomTypes[index].description"
+                      :disabled="disabled"
+                      placeholder="请输入说明"
+                      clearable
+                      style="width: 100px"
+                    />
                   </el-form-item>
                   <el-form-item label="房间图片">
-                    <el-upload class="upload-video" :headers="$getElUploadHeaders()" :action="uploadUlr"
-                      :on-success="(response, file, fileList) => onSuccessHouseImage(response, file, fileList, index)"
-                      :on-preview="handlePreview" :limit="1" :file-list="form.roomTypes[index].images" accept="image/*">
-                      <el-button size="small" type="primary"  v-if="!disabled">点击上传</el-button>
+                    <el-upload
+                      class="upload-video"
+                      :headers="$getElUploadHeaders()"
+                      :action="uploadUlr"
+                      :on-success="
+                        (response, file, fileList) =>
+                          onSuccessHouseImage(response, file, fileList, index)
+                      "
+                      :on-preview="handlePreview"
+                      :limit="1"
+                      :file-list="form.roomTypes[index].images"
+                      accept="image/*"
+                    >
+                      <el-button size="small" type="primary" v-if="!disabled"
+                        >点击上传</el-button
+                      >
                     </el-upload>
                   </el-form-item>
-                  <el-button type="primary" size="mini" icon="el-icon-plus" circle @click="handleRoomCountChange"
-                    style="margin-left: 16px; height: 30px" :disabled="disabled" />
-                  <el-button type="danger" v-if="form.roomTypes.length > 1" size="small" icon="el-icon-minus"
-                    @click="handleDeleteRoom(index)" style="height: 30px" circle  :disabled="disabled"/>
+                  <el-button
+                    type="primary"
+                    size="mini"
+                    icon="el-icon-plus"
+                    circle
+                    @click="handleRoomCountChange"
+                    style="margin-left: 16px; height: 30px"
+                    :disabled="disabled"
+                  />
+                  <el-button
+                    type="danger"
+                    v-if="form.roomTypes.length > 1"
+                    size="small"
+                    icon="el-icon-minus"
+                    @click="handleDeleteRoom(index)"
+                    style="height: 30px"
+                    circle
+                    :disabled="disabled"
+                  />
                 </div>
               </div>
             </div>
@@ -138,28 +259,51 @@
         </el-form-item>
         <el-form-item label="室内配套" prop="facilityIds">
           <el-checkbox-group v-model="form.facilityIds" :disabled="disabled">
-            <el-checkbox :label="item.id" :key="index"
-              v-for="(item, index) in facilitiesList">{{ item.name }}</el-checkbox>
+            <el-checkbox
+              :label="item.id"
+              :key="index"
+              v-for="(item, index) in facilitiesList"
+              >{{ item.name }}</el-checkbox
+            >
           </el-checkbox-group>
         </el-form-item>
         <el-form-item label="上传图片" prop="coverImg">
-          <el-upload class="upload-demo" :action="uploadUlr" :on-preview="handlePreview"
-            :headers="$getElUploadHeaders()" :on-remove="handleRemove" :before-remove="beforeRemove" multiple
-            :limit="10" :on-exceed="handleExceed" :on-success="onSuccessImage" accept=".png,.jpg"
-            :file-list="form.images">
-            <el-button size="small" type="primary"  v-if="!disabled">点击上传</el-button>
+          <el-upload
+            class="upload-demo"
+            :action="uploadUlr"
+            :on-preview="handlePreview"
+            :headers="$getElUploadHeaders()"
+            :on-remove="handleRemove"
+            :before-remove="beforeRemove"
+            multiple
+            :limit="10"
+            :on-exceed="handleExceed"
+            :on-success="onSuccessImage"
+            accept=".png,.jpg"
+            :file-list="form.images"
+          >
+            <el-button size="small" type="primary" v-if="!disabled"
+              >点击上传</el-button
+            >
             <div slot="tip" class="el-upload__tip">
               只能上传jpg/png文件，且不超过500kb
             </div>
             <template #file="{ file }">
               <div class="image-item">
                 <img :src="file.url" class="image" />
-                <div class="actions"  v-if="!disabled">
-                  <el-button size="mini" :type="form.coverImg === file.url ? 'primary' : 'default'"
-                    @click="setCoverImage(file)">
-                    {{ form.coverImg === file.url ? '当前封面' : '设为封面' }}
+                <div class="actions" v-if="!disabled">
+                  <el-button
+                    size="mini"
+                    :type="form.coverImg === file.url ? 'primary' : 'default'"
+                    @click="setCoverImage(file)"
+                  >
+                    {{ form.coverImg === file.url ? "当前封面" : "设为封面" }}
                   </el-button>
-                  <el-button size="mini" type="danger" @click="handleRemove(file)">
+                  <el-button
+                    size="mini"
+                    type="danger"
+                    @click="handleRemove(file)"
+                  >
                     删除
                   </el-button>
                 </div>
@@ -168,21 +312,39 @@
           </el-upload>
         </el-form-item>
         <el-form-item label="上传视频">
-          <el-upload class="upload-video" :headers="$getElUploadHeaders()" :action="uploadUlr"
-            :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove"
-            :on-success="onSuccessVideo" :limit="1" :on-exceed="handleExceed" :file-list="form.videos" accept="video/*">
-            <el-button size="small" type="primary"  v-if="!disabled">点击上传</el-button>
+          <el-upload
+            class="upload-video"
+            :headers="$getElUploadHeaders()"
+            :action="uploadUlr"
+            :on-preview="handleVideoPreview"
+            :on-remove="handleRemove"
+            :before-remove="beforeRemove"
+            :on-success="onSuccessVideo"
+            :limit="1"
+            :on-exceed="handleExceed"
+            :file-list="form.videos"
+            accept="video/*"
+          >
+            <el-button size="small" type="primary" v-if="!disabled"
+              >点击上传</el-button
+            >
             <div slot="tip" class="el-upload__tip">
               只能上传mp4/mov等视频文件，且不超过100MB
             </div>
           </el-upload>
         </el-form-item>
         <el-form-item label="VR资源文件" prop="vrUrl">
-          <el-input v-model="form.vrUrl" placeholder="请输入VR资源文件" :disabled="disabled"/>
+          <el-input
+            v-model="form.vrUrl"
+            placeholder="请输入VR资源文件"
+            :disabled="disabled"
+          />
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm"  v-if="!disabled">确 定</el-button>
+        <el-button type="primary" @click="submitForm" v-if="!disabled"
+          >确 定</el-button
+        >
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
@@ -303,11 +465,11 @@ export default {
           { required: true, message: "请输入户型名称", trigger: "blur" },
         ],
         facilityIds: [
-          { required: true, message: "请选择室内配套", trigger: "change" }, 
+          { required: true, message: "请选择室内配套", trigger: "change" },
+        ],
+        "roomTypes.roomTypeName": [
+          { required: true, message: "请输入房间名称", trigger: "blur" },
         ],
-        'roomTypes.roomTypeName': [
-          { required: true, message: "请输入房间名称", trigger: "blur" }
-        ]
       },
       deptList: [],
       defaultProps: {
@@ -322,13 +484,13 @@ export default {
   created() {
     this.getList();
     this.getApartmentList();
-    this.getlistFacilities()
+    this.getlistFacilities();
   },
   methods: {
     // 查询室内配套设施列表
     getlistFacilities() {
       this.loading = true;
-      listFacilities(this.queryParams).then(response => {
+      listFacilities(this.queryParams).then((response) => {
         this.facilitiesList = response.rows;
       });
     },
@@ -401,24 +563,44 @@ export default {
       this.form.roomTypes[index].images.push({
         name: file.name,
         url: response.url,
-        type: 'image'
+        type: "image",
       });
     },
     // 文件上传相关方法
     handleRemove(file, fileList) {
       console.log(file, fileList);
-      if (file.type === 'image') {
-        this.form.images = this.form.images.filter(item => item.url !== file.url);
-      } else if (file.type === 'video') {
-        this.form.videos = this.form.videos.filter(item => item.url !== file.url);
+      if (file.type === "image") {
+        this.form.images = this.form.images.filter(
+          (item) => item.url !== file.url
+        );
+      } else if (file.type === "video") {
+        this.form.videos = this.form.videos.filter(
+          (item) => item.url !== file.url
+        );
       }
     },
     handlePreview(file) {
       this.$nextTick(() => {
-        this.$alert(`<img src="${file.url}" style="max-width: 100%;"/>`, '图片预览', {
-          dangerouslyUseHTMLString: true,
-          customClass: 'image-preview-modal'
-        });
+        this.$alert(
+          `<img src="${file.url}" style="max-width: 100%;"/>`,
+          "图片预览",
+          {
+            dangerouslyUseHTMLString: true,
+            customClass: "image-preview-modal",
+          }
+        );
+      });
+    },
+    handleVideoPreview(file) {
+      this.$nextTick(() => {
+        this.$alert(
+          `<video src="${file.url}" controls style="max-width: 100%; max-height: 300px;"/>`,
+          "视频预览",
+          {
+            dangerouslyUseHTMLString: true,
+            customClass: "video-preview-modal",
+          }
+        );
       });
     },
     onSuccessImage(response, file, fileList) {
@@ -428,19 +610,20 @@ export default {
       this.form.images.push({
         name: file.name,
         url: response.url,
-        type: 'image',
+        type: "image",
       });
     },
     onSuccessVideo(response, file, fileList) {
       this.form.videos.push({
         name: file.name,
         url: response.url,
-        type: 'video',
+        type: "video",
       });
     },
     handleExceed(files, fileList) {
       this.$message.warning(
-        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length
+        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
+          files.length + fileList.length
         } 个文件`
       );
     },
@@ -516,8 +699,8 @@ export default {
         this.title = "修改房型";
       });
     },
-     /**查看按钮操作 */
-     handleView(row) {
+    /**查看按钮操作 */
+    handleView(row) {
       this.reset();
       const id = row.id || this.ids;
       getHousetype(id).then((response) => {
@@ -559,7 +742,7 @@ export default {
           this.getList();
           this.$modal.msgSuccess("删除成功");
         })
-        .catch(() => { });
+        .catch(() => {});
     },
     /** 导出按钮操作 */
     handleExport() {
@@ -579,19 +762,19 @@ export default {
     getFacilityNames() {
       return (facilityIds) => {
         return facilityIds
-          .map(id => {
-            const facility = this.facilitiesList.find(item => item.id === id);
-            return facility ? facility.name : '';
+          .map((id) => {
+            const facility = this.facilitiesList.find((item) => item.id === id);
+            return facility ? facility.name : "";
           })
-          .filter(name => name) // 过滤掉空值
-          .join(', ');
+          .filter((name) => name) // 过滤掉空值
+          .join(", ");
       };
-    }
+    },
   },
 };
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .room-label {
   text-align: right;
   padding-right: 10px;