update 实现添加房屋编码

Api/Ewide.Application/Entity/BsHouseCode.cs

@@ -0,0 +1,52 @@
+using Microsoft.EntityFrameworkCore;
+using System.ComponentModel.DataAnnotations;
+using System.ComponentModel.DataAnnotations.Schema;
+
+namespace Ewide.Application.Entity
+{
+    [Table("bs_house_code")]
+    [Comment("房屋编码表")]
+    public class BsHouseCode : Core.DEntityBase
+    {
+        [Comment("系统使用的区域编码")]
+        [MaxLength(50)]
+        [Required]
+        public string AreaCode { get; set; }
+
+        [Comment("项目ID")]
+        [MaxLength(36)]
+        [Required]
+        public string ProjectId { get; set; }
+
+        [Comment("编号")]
+        [MaxLength(3)]
+        [Required]
+        public string No { get; set; }
+
+        [Comment("片区ID")]
+        [MaxLength(36)]
+        [Required]
+        public string ZoneId { get; set; }
+
+        [Comment("详细地址")]
+        [MaxLength(500)]
+        [Required]
+        public string Address { get; set; }
+
+        [Comment("性质")]
+        [Required]
+        public int Type { get; set; }
+
+        [Comment("所属行业")]
+        [Required]
+        public int Industry { get; set; }
+
+        [Comment("坐标-经度")]
+        [MaxLength(50)]
+        public string Lng { get; set; }
+
+        [Comment("坐标-纬度")]
+        [MaxLength(50)]
+        public string Lat { get; set; }
+    }
+}

Api/Ewide.Application/Ewide.Application.xml

@@ -51,5 +51,12 @@
             <param name="input"></param>
             <returns></returns>
         </member>
+        <member name="M:Ewide.Application.Service.HouseProjectInfo.HouseProjectInfoService.GetProjectList(Ewide.Application.Service.HouseProjectInfo.Dto.ListHouseProjectInfoInput)">
+            <summary>
+            获取项目下拉列表
+            </summary>
+            <param name="input"></param>
+            <returns></returns>
+        </member>
     </members>
 </doc>

Api/Ewide.Application/Service/HouseCode/Dto/HouseCodeInput.cs

@@ -0,0 +1,42 @@
+using Ewide.Core;
+using System;
+using System.Collections.Generic;
+using System.ComponentModel.DataAnnotations;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace Ewide.Application.Service.HouseCode.Dto
+{
+    public class HouseCodeInput
+    {
+    }
+
+    public class AddHouseCodeInput : PageInputBase
+    {
+        [Required(ErrorMessage = "区域编码不能为空")]
+        public string AreaCode { get; set; }
+        [Required(ErrorMessage = "项目Id不能为空")]
+        public string ProjectId { get; set; }
+        [Required(ErrorMessage = "房屋编号不能为空")]
+        public string No { get; set; }
+        [Required(ErrorMessage = "片区Id不能为空")]
+        public string ZoneId { get; set; }
+        [Required(ErrorMessage = "房屋地址不能为空")]
+        public string Address { get; set; }
+        [Required(ErrorMessage = "房屋性质不能为空")]
+        public int Type { get; set; }
+        [Required(ErrorMessage = "所属行业不能为空")]
+        public int Industry { get; set; }
+        [Required(ErrorMessage = "经度不能为空")]
+        public string Lng { get; set; }
+        [Required(ErrorMessage = "纬度不能为空")]
+        public string Lat { get; set; }
+    }
+
+    public class EditHouseCodeInput : AddHouseCodeInput
+    {
+        [Required(ErrorMessage = "房屋编码Id不能为空")]
+        public string Id { get; set; }
+    }
+}

Api/Ewide.Application/Service/HouseCode/HouseCodeService.cs

@@ -0,0 +1,35 @@
+using Ewide.Application.Entity;
+using Ewide.Application.Service.HouseCode.Dto;
+using Furion.DatabaseAccessor;
+using Furion.DependencyInjection;
+using Furion.DynamicApiController;
+using Furion.FriendlyException;
+using Mapster;
+using Microsoft.AspNetCore.Mvc;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace Ewide.Application.Service.HouseCode
+{
+    public class HouseCodeService : IHouseCodeService, IDynamicApiController, ITransient
+    {
+        private readonly IRepository<BsHouseCode> _houseCodeRep;
+
+        public HouseCodeService(IRepository<BsHouseCode> HouseCodeRep)
+        {
+            _houseCodeRep = HouseCodeRep;
+        }
+
+        [HttpPost("/houseCode/add")]
+        public async Task AddHouseCode(AddHouseCodeInput input)
+        {
+            var houseCode = input.Adapt<BsHouseCode>();
+            var isExist = await _houseCodeRep.AnyAsync(p => p.AreaCode == houseCode.AreaCode && p.ProjectId == houseCode.ProjectId && p.No == houseCode.No);
+            if (isExist) throw Oops.Oh("房屋编码已存在，不可重复添加");
+            await _houseCodeRep.InsertAsync(houseCode);
+        }
+    }
+}

Api/Ewide.Application/Service/HouseCode/IHouseCodeService.cs

@@ -0,0 +1,14 @@
+using Ewide.Application.Service.HouseCode.Dto;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace Ewide.Application.Service.HouseCode
+{
+    public interface IHouseCodeService
+    {
+        Task AddHouseCode(AddHouseCodeInput input);
+    }
+}

Api/Ewide.Application/Service/HouseProjectInfo/Dto/HouseProjectInfoInput.cs

@@ -41,4 +41,12 @@ namespace Ewide.Application.Service.HouseProjectInfo.Dto
     {
         public string pid { get; set; }
     }
+
+    public class ListHouseProjectInfoInput
+    {
+        [Required(ErrorMessage = "区域编码不可为空")]
+        public string AreaCode { get; set; }
+        [Required(ErrorMessage = "性质不可为空")]
+        public int Type { get; set; }
+    }
 }

Api/Ewide.Application/Service/HouseProjectInfo/HouseProjectInfoService.cs

@@ -121,7 +121,7 @@ namespace Ewide.Application.Service.HouseProjectInfo
         }
 
         [HttpGet("/houseProjectInfo/nextSort")]
-        public async Task<int> GetNextProjectSortByAreaCode([FromQuery] HouseProjectInfoInput input)
+        public async Task<int> GetNextProjectSortByAreaCode([FromQuery] ListHouseProjectInfoInput input)
         {
             //var projects = await _houseProjectInfoRep.DetachedEntities
             //    .Where(p => p.AreaCode == input.AreaCode && p.Type == input.Type)
@@ -138,5 +138,19 @@ namespace Ewide.Application.Service.HouseProjectInfo
 
             return p.GetValueOrDefault(0) + 1;
         }
+
+        /// <summary>
+        /// 获取项目下拉列表
+        /// </summary>
+        /// <param name="input"></param>
+        /// <returns></returns>
+        [HttpGet("houseProjectInfo/list")]
+        public async Task<dynamic> GetProjectList([FromQuery] ListHouseProjectInfoInput input)
+        {
+            return await _houseProjectInfoRep.DetachedEntities
+                .Where(p => p.AreaCode == input.AreaCode && p.Type == input.Type)
+                .OrderBy(p => p.Sort)
+                .ToListAsync();
+        }
     }
 }

Api/Ewide.Application/Service/HouseProjectInfo/IHouseProjectInfoService.cs

@@ -18,6 +18,7 @@ namespace Ewide.Application.Service.HouseProjectInfo
         Task<dynamic> GetProject([FromQuery] QueryProjectInput input);
         Task<dynamic> QueryProjectPageList([FromQuery] PageProjectInput input);
 
-        Task<int> GetNextProjectSortByAreaCode([FromQuery] HouseProjectInfoInput input);
+        Task<int> GetNextProjectSortByAreaCode([FromQuery] ListHouseProjectInfoInput input);
+        Task<dynamic> GetProjectList([FromQuery] ListHouseProjectInfoInput input);
     }
 }

Web/src/assets/style/app.less

@@ -22,6 +22,7 @@
 @import './lib/list.less';
 @import './lib/form.less';
 @import './lib/form-page.less';
+@import './lib/page.less';
 @import './lib/description.less';
 @import './lib/input.less';
 @import './lib/select.less';

Web/src/assets/style/lib/page.less

@@ -0,0 +1,8 @@
+@import (reference) '~@/assets/style/extend.less';
+.yo-page {
+  &--header {
+    padding: @padding-md 0;
+
+    background-color: @white;
+  }
+}

Web/src/common/api/index.js

@@ -78,7 +78,7 @@ for (let key in urls) {
 
     const item = urls[key]
     let url = '',
-        method = 'post',
+        method = 'get',
         options = {}
     if (item.constructor === String) {
         url = item

Web/src/common/api/requests/business/houseCode.js

@@ -0,0 +1,3 @@
+export default {
+    houseCodeAdd: ['/houseCode/add', 'post']
+}

Web/src/common/api/requests/business/houseProjectInfo.js

@@ -4,5 +4,6 @@ export default {
     houseProejctEdit: ['/houseProjectInfo/edit', 'post'],
     houseProejctDelete: ['/houseProjectInfo/delete', 'post'],
     houseProejctDetail: ['/houseProjectInfo/detail', 'get'],
-    houseProjectNextSort:['/houseProjectInfo/nextSort','get']
+    houseProjectNextSort: ['/houseProjectInfo/nextSort', 'get'],
+    houseProjectList: ['houseProjectInfo/list', 'get']
 }

Web/src/common/api/requests/business/index.js

@@ -1,5 +1,7 @@
 import houseProjectInfo from './houseProjectInfo'
+import houseCode from './houseCode'
 
 export default {
-    ...houseProjectInfo
+    ...houseProjectInfo,
+    ...houseCode
 }

Web/src/components/yoTable/index.js

@@ -19,6 +19,9 @@ export default {
       type: Array,
       require: true,
     },
+    moreQuery: {
+      type: Function
+    }
   },
 
   data() {
@@ -203,10 +206,13 @@ export default {
             <a-form-model layout="inline" {...{ on: queryOn }}>
               {this.$scopedSlots.query()}
               <a-form-model-item>
-                <a-button-group>
+                <a-button-group class="mr-xs">
                   <a-button onClick={this.onQuery} html-type="submit" type="primary">查询</a-button>
                   <a-button onClick={this.onResetQuery}>重置</a-button>
                 </a-button-group>
+                {
+                  this.moreQuery && <a-button onClick={this.moreQuery}>更多查询条件</a-button>
+                }
               </a-form-model-item>
             </a-form-model>
           </div>

Web/src/pages/business/house/houseCode/form/index.vue

@@ -34,21 +34,6 @@
             </template>
           </a-card>
         </a-col>
-        <a-col flex="240px">
-          <a-anchor
-            :get-container="()=> $el.parentNode"
-            :offset-top="24"
-            :wrapper-style="{ backgroundColor: 'transparent' }"
-            @click.prevent
-          >
-            <a-anchor-link
-              :href="`#form-${index}`"
-              :key="index"
-              :title="part.title"
-              v-for="(part, index) in parts"
-            />
-          </a-anchor>
-        </a-col>
       </a-row>
     </container>
 
@@ -62,7 +47,7 @@
           </span>
           <span>
             <a-button @click="closeContentWindow()">取消</a-button>
-            <a-button @click="onSubmit" type="primary">保存</a-button>
+            <a-button :loading="saving" @click="onSubmit" type="primary">保存</a-button>
           </span>
         </div>
       </container>
@@ -86,6 +71,8 @@ export default {
           component: () => import('./part'),
         },
       ],
+
+      saving: false,
     };
   },
 
@@ -108,6 +95,18 @@ export default {
       /**
        * 对表单提交进行处理
        */
+      this.saving = true;
+      this.$api
+        .houseCodeAdd(formData)
+        .then(({ success }) => {
+          if (success) {
+            this.$message.success('保存成功');
+            this.closeContentWindow();
+          }
+        })
+        .finally(() => {
+          this.saving = false;
+        });
     },
   },
 };

Web/src/pages/business/house/houseCode/form/part.vue

@@ -16,17 +16,37 @@
       <a-icon slot="indicator" spin type="loading" />
       <!-- 表单控件 -->
       <!-- ... -->
-      <a-form-model-item class="ant-row-flex" label="房屋编码">
+      <a-form-model-item class="ant-row-flex" label="房屋性质" prop="type">
+        <a-radio-group @change="onTypeChange" button-style="solid" v-model="form.type">
+          <a-radio-button
+            :key="item.code"
+            :value="item.code"
+            v-for="item in codes.houseType"
+          >{{ item.value }}</a-radio-button>
+        </a-radio-group>
+      </a-form-model-item>
+      <a-form-model-item class="ant-row-flex" label="所属行业、系统" prop="industry">
+        <a-radio-group :disabled="form.type == 1" button-style="solid" v-model="form.industry">
+          <a-radio-button
+            :key="item.code"
+            :value="item.code"
+            v-for="item in codes.houseIndustry"
+          >{{ item.value }}</a-radio-button>
+        </a-radio-group>
+      </a-form-model-item>
+      <a-form-model-item class="ant-row-flex" label="房屋编码" prop="no">
         <a-row align="top" type="flex">
           <a-col flex="50px">
             <span>宁波市 -</span>
           </a-col>
-          <a-col flex="auto">
+          <a-col flex="1">
             <a-form-model-item class="mb-none" prop="areaCode">
               <a-cascader
                 :display-render="({labels}) => labels.join(' - ')"
-                :options="options"
+                :field-names="{ label: 'name', value: 'code', children: 'children' }"
-                placeholder="请选择项目"
+                :options="options.areaTree"
+                @change="onAreaCodeChange"
+                placeholder="请选择所在区域"
                 v-model="form.areaCode"
               />
             </a-form-model-item>
@@ -34,8 +54,22 @@
           <a-col class="text-center" flex="20px">
             <span>-</span>
           </a-col>
-          <a-col flex="150px">
+          <a-col flex="1">
-            <a-form-model-item class="mb-none" prop="code">
+            <a-form-model-item class="mb-none" prop="projectId">
+              <a-select @change="onProjectChange" placeholder="请选择项目" v-model="form.projectId">
+                <a-select-option
+                  :key="item.id"
+                  :value="item.id"
+                  v-for="item in options.projects"
+                >{{ item.name }}</a-select-option>
+              </a-select>
+            </a-form-model-item>
+          </a-col>
+          <a-col class="text-center" flex="20px">
+            <span>-</span>
+          </a-col>
+          <a-col flex="1">
+            <a-form-model-item class="mb-none" prop="no">
               <a-input-number
                 :formatter="(number) => `000${number}`.slice(-3)"
                 :max="999"
@@ -44,61 +78,52 @@
                 :step="1"
                 class="w-100-p"
                 placeholder="请输入房屋序号"
-                v-model="form.code"
+                v-model="form.no"
               />
             </a-form-model-item>
           </a-col>
         </a-row>
       </a-form-model-item>
-      <a-form-model-item class="ant-row-flex" label="地理坐标">
+      <a-form-model-item class="ant-row-flex" label="房屋地址" prop="address">
+        <a-input placeholder="请输入房屋地址或在地图上选择地点" v-model="form.address" />
+      </a-form-model-item>
+      <a-form-model-item class="ant-row-flex" label="地理坐标" required>
         <a-row :gutter="16">
           <a-col :span="12">
-            <a-form-model-item class="mb-none">
+            <a-form-model-item class="mb-none" prop="lng">
-              <a-input class="yo-input-prefix-2" disabled placeholder="请在地图上选择坐标" prefix="经度" />
+              <a-input
+                class="yo-input-prefix-2"
+                disabled
+                placeholder="请在地图中选择坐标"
+                prefix="经度"
+                v-model="form.lng"
+              />
             </a-form-model-item>
           </a-col>
           <a-col :span="12">
-            <a-form-model-item class="mb-none">
+            <a-form-model-item class="mb-none" prop="lat">
-              <a-input class="yo-input-prefix-2" disabled placeholder="请在地图上选择坐标" prefix="纬度" />
+              <a-input
+                class="yo-input-prefix-2"
+                disabled
+                placeholder="请在地图中选择坐标"
+                prefix="纬度"
+                v-model="form.lat"
+              />
             </a-form-model-item>
           </a-col>
         </a-row>
       </a-form-model-item>
       <a-form-model-item :colon="false" :label="true" class="ant-row-flex">
         <div class="yo-map-container">
-          缺搜索
+          <div class="yo-map--search">
-          <div class="h-300" ref="map"></div>
+            <a-input-search allow-clear placeholder="请输入关键字" ref="map-search" />
+          </div>
+          <div class="h-500" ref="map"></div>
         </div>
       </a-form-model-item>
-      <a-form-model-item class="ant-row-flex" label="房屋地址" prop="address">
-        <a-input placeholder="请输入房屋地址或在地图上选择地点" v-model="form.address" />
-      </a-form-model-item>
       <a-form-model-item class="ant-row-flex" label="所属片区">
         <a-select placeholder="请选择所属片区"></a-select>
       </a-form-model-item>
-      <a-form-model-item class="ant-row-flex" label="房屋性质">
-        <a-radio-group button-style="solid" v-model="form.nature">
-          <a-radio-button
-            :key="item.code"
-            :value="item.code"
-            v-for="item in houseType"
-          >{{ item.value }}</a-radio-button>
-        </a-radio-group>
-      </a-form-model-item>
-      <a-form-model-item
-        class="ant-row-flex"
-        label="所属行业、系统"
-        prop="industry"
-        v-if="form.nature == 2"
-      >
-        <a-select placeholder="请选择所属行业、系统" v-model="form.industry">
-          <a-select-option
-            :key="item.code"
-            :value="item.code"
-            v-for="item in houseIndustry"
-          >{{ item.value }}</a-select-option>
-        </a-select>
-      </a-form-model-item>
     </a-spin>
   </a-form-model>
 </template>
@@ -106,13 +131,23 @@
 /* 表单内容默认值 */
 const defaultForm = {
   /* ... */
-  nature: '1',
+  type: '1',
+  no: '001',
+  zoneId: 'test',
 };
 
 export default {
   props: ['param'],
 
   data() {
+    const validatorIndustry = (rule, value, callback) => {
+      if (this.form.type == 2 && !value) {
+        callback(new Error('请选择所属行业、系统'));
+      } else {
+        callback();
+      }
+    };
+
     return {
       labelCol: { flex: '150px' },
       wrapperCol: { flex: '1' },
@@ -122,8 +157,14 @@ export default {
       /** 验证格式 */
       rules: {
         /* ... */
+        type: [{ required: true, message: '请选择房屋性质' }],
+        industry: [{ validator: validatorIndustry }],
         areaCode: [{ required: true, message: '请选择房屋所在区域' }],
-        code: [{ required: true, message: '请输入房屋序号' }],
+        projectId: [{ required: true, message: '请选择项目', trigger: 'blur' }],
+        no: [{ required: true, message: '请输入房屋序号', trigger: 'blur' }],
+        address: [{ required: true, message: '请输入房屋地址', trigger: 'blur' }],
+        lng: [{ required: true, message: '请在地图中选择坐标' }],
+        lat: [{ required: true, message: '请在地图中选择坐标' }],
       },
 
       /** 加载异步数据状态 */
@@ -131,42 +172,15 @@ export default {
 
       /** 其他成员属性 */
       /* ... */
-      houseType: [],
+      codes: {
-      houseIndustry: [],
+        houseType: [],
-      options: [
+        houseIndustry: [],
-        {
+      },
-          value: 'zhejiang',
+
-          label: 'Zhejiang',
+      options: {
-          children: [
+        areaTree: [],
-            {
+        projects: [],
-              value: 'hangzhou',
+      },
-              label: 'Hangzhou',
-              children: [
-                {
-                  value: 'xihu',
-                  label: 'West Lake',
-                },
-              ],
-            },
-          ],
-        },
-        {
-          value: 'jiangsu',
-          label: 'Jiangsu',
-          children: [
-            {
-              value: 'nanjing',
-              label: 'Nanjing',
-              children: [
-                {
-                  value: 'zhonghuamen',
-                  label: 'Zhong Hua Men',
-                },
-              ],
-            },
-          ],
-        },
-      ],
     };
   },
 
@@ -176,7 +190,11 @@ export default {
   },
 
   mounted() {
-    new AMap.Map(this.$refs.map);
+    this.onMapInit();
+  },
+
+  beforeDestroy() {
+    if (this.map) this.map.destroy();
   },
 
   methods: {
@@ -208,6 +226,7 @@ export default {
 
             /** 验证通过后可以对数据进行转换得到想要提交的格式 */
             /* ... */
+            record.areaCode = record.areaCode[3];
 
             reslove(record);
           } else {
@@ -246,7 +265,8 @@ export default {
       this.loading = true;
       /** 可以在这里await获取一些异步数据 */
       /* ... */
-      this.onLoadCodes();
+      await this.onLoadCodes();
+      await this.onLoadAreaTree();
       this.loading = false;
     },
 
@@ -259,10 +279,158 @@ export default {
           this.$api.sysDictTypeDropDownAwait({ code: 'dic_house_industry' }),
         ])
         .then(([dic_house_type, dic_house_industry]) => {
-          this.houseType = dic_house_type.data;
+          this.codes.houseType = dic_house_type.data;
-          this.houseIndustry = dic_house_industry.data;
+          this.codes.houseIndustry = dic_house_industry.data;
         });
     },
+
+    onMapInit() {
+      const city = '宁波市';
+
+      const district = new AMap.DistrictSearch({
+        subdistrict: 0,
+        extensions: 'all',
+        level: 'city',
+      });
+
+      district.search(city, (status, result) => {
+        const bounds = result.districtList[0].boundaries;
+        const mask = [];
+        for (let i = 0; i < bounds.length; i += 1) {
+          mask.push([bounds[i]]);
+        }
+
+        // 挂载map到this,但不监听
+        this.map = new AMap.Map(this.$refs.map, {
+          city,
+          viewMode: '3D',
+          mask,
+          zoom: 12,
+        });
+
+        const geocoder = new AMap.Geocoder({ city });
+
+        let marker;
+        const setMarker = (position) => {
+          if (marker) {
+            marker.setPosition(position);
+          } else {
+            marker = new AMap.Marker({
+              map: this.map,
+              icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
+              position,
+              offset: new AMap.Pixel(-13, -30),
+            });
+          }
+
+          geocoder.getAddress(position, (status, result) => {
+            if (status === 'complete' && result.regeocode) {
+              this.onSetPosition(result.regeocode.formattedAddress, position);
+            } else {
+              console.error('根据经纬度查询地址失败');
+            }
+          });
+        };
+
+        this.map.on('click', (e) => {
+          setMarker(e.lnglat);
+        });
+
+        const auto = new AMap.AutoComplete({
+          input: this.$refs['map-search'].$el.querySelector('input'),
+          city,
+          citylimit: true,
+        });
+
+        const placeSearch = new AMap.PlaceSearch({
+          city,
+          citylimit: true,
+          pageSize: 1,
+        });
+
+        auto.on('select', ({ poi: { name: keywords, adcode } }) => {
+          this.map.clearMap();
+          marker = null;
+          placeSearch.search(keywords, (status, result) => {
+            const {
+              poiList: { pois },
+            } = result;
+            pois.forEach((p) => {
+              setMarker(p.location);
+            });
+
+            this.map.setFitView();
+          });
+        });
+
+        for (let i = 0; i < bounds.length; i += 1) {
+          new AMap.Polyline({
+            path: bounds[i],
+            strokeColor: '#ccc',
+            strokeWeight: 4,
+            map: this.map,
+          });
+        }
+      });
+    },
+
+    onSetPosition(address, { lng, lat }) {
+      this.$set(this.form, 'address', address);
+      this.$set(this.form, 'lng', lng);
+      this.$set(this.form, 'lat', lat);
+    },
+
+    onLoadAreaTree() {
+      return this.$api.getAreaTree().then(({ data }) => {
+        this.options.areaTree = data;
+      });
+    },
+
+    /**
+     * 切换房屋性质
+     */
+    onTypeChange() {
+      if (this.form.industry) {
+        this.form.industry = undefined;
+      }
+      this.getProjects();
+    },
+
+    /**
+     * 切换区域
+     */
+    onAreaCodeChange() {
+      if (this.form.areaCode.length != 4) {
+        this.form.areaCode = [];
+      }
+
+      this.getProjects();
+    },
+
+    getProjects() {
+      if (this.form.projectId) {
+        this.form.projectId = undefined;
+      }
+      if (this.form.areaCode && this.form.areaCode.length === 4) {
+        this.loading = true;
+        this.$api
+          .houseProjectList({
+            areaCode: this.form.areaCode[3],
+            type: this.form.type,
+          })
+          .then(({ data }) => {
+            this.options.projects = data;
+          })
+          .finally(() => {
+            this.loading = false;
+          });
+      }
+    },
+
+    /**
+     * 切换项目
+     */
+    onProjectChange() {},
   },
 };
 </script>

Web/src/pages/business/house/houseInfo/form/base/building.vue

@@ -14,6 +14,7 @@
   >
     <a-spin :spinning="loading">
       <a-icon slot="indicator" spin type="loading" />
+      <a-row :gutter="16" type="flex">
         <a-col :span="12">
           <a-form-model-item class="ant-row-flex" label="项目名称" prop="projectName">
             <a-input placeholder="请输入项目名称" v-model="form.projectName" />

Web/src/pages/business/house/houseInfo/index.vue

@@ -1,10 +1,227 @@
 <template>
-  <div>
+  <!-- 
-    <a-button
+    普通查询表格
-      @click="openContentWindow({
+    v 1.2
-        title: '房屋表单',
+    2021-04-30
-        path: 'business/house/houseInfo/form',
+    Lufthafen
-      });"
+  -->
-    >打开表单</a-button>
+  <container>
-  </div>
+    <br />
+    <a-card :bordered="false">
+      <yo-table
+        :columns="columns"
+        :load-data="loadData"
+        :more-query="onOpenQuery"
+        @query="onQuery"
+        @resetQuery="onResetQuery"
+        ref="table"
+      >
+        <Auth auth="sysApp:page" slot="query">
+          <!-- 此处添加查询表单控件 -->
+          <!-- ... -->
+          <a-form-model-item label="应用名称">
+            <a-input placeholder="请输入应用名称" v-model="query.name" />
+          </a-form-model-item>
+          <a-form-model-item label="唯一编码">
+            <a-input placeholder="请输入唯一编码" v-model="query.code" />
+          </a-form-model-item>
+        </Auth>
+        <div slot="operator">
+          <a-button
+            @click="openContentWindow({
+                title: '房屋表单',
+                path: 'business/house/houseInfo/form',
+              });"
+          >(test)打开表单</a-button>
+        </div>
+        <!-- 格式化字段内容 -->
+        <!-- ... -->
+        <!-- 添加操作控件 -->
+        <span slot="action" slot-scope="text, record">
+          <yo-table-actions>
+            <Auth auth="authCode:edit">
+              <a @click="onOpen('edit-form', record)">编辑</a>
+            </Auth>
+            <Auth auth="authCode:delete">
+              <a-popconfirm @confirm="onDelete(record)" placement="topRight" title="是否确认删除">
+                <a>删除</a>
+              </a-popconfirm>
+            </Auth>
+            <!-- 可在此处添加其他操作控件 -->
+            <!-- ... -->
+          </yo-table-actions>
+        </span>
+      </yo-table>
+    </a-card>
+
+    <query ref="query" />
+  </container>
 </template>
+<script>
+import Query from './query';
+
+/* 在此管理整个页面需要的接口名称 */
+const api = {
+  page: 'testPageApi...',
+  add: 'testAddApi',
+  edit: 'testEditApi',
+  delete: 'testDeleteApi...',
+  /* ... */
+};
+
+export default {
+  components: {
+    Query,
+  },
+  data() {
+    return {
+      api,
+
+      name: '...',
+
+      /* 查询条件 */
+      query: {},
+
+      /* 表格字段 */
+      columns: [],
+
+      /* 字典编码储存格式 */
+      codes: {
+        code1: [],
+        code2: [],
+      },
+    };
+  },
+  created() {
+    /** 按需加载字典编码 */
+    this.onLoadCodes();
+
+    /** 根据权限添加操作列 */
+    const flag = this.$auth(/* ... */);
+    if (flag) {
+      this.columns.push({
+        title: '操作',
+        width: '150px',
+        dataIndex: 'action',
+        scopedSlots: { customRender: 'action' },
+      });
+    }
+  },
+  methods: {
+    /**
+     * 必要的方法
+     * 传给yo-table以示意数据接口及其参数和返回的数据结构
+     */
+    loadData(params) {
+      // return this.$api[api.page]({
+      //   ...params,
+      //   ...this.query,
+      // }).then((res) => {
+      //   return res.data;
+      // });
+      return new Promise((resolve) => {
+        resolve([]);
+      });
+    },
+
+    /**
+     * 有查询功能时的必要方法
+     * 加载数据时初始化分页信息
+     */
+    onQuery() {
+      this.$refs.table.onReloadData(true);
+    },
+
+    /**
+     * 有查询功能时的必要方法
+     * 重置查询条件
+     */
+    onResetQuery() {
+      /** 在这里重置查询条件时,可对特殊的字段做保留处理 */
+      this.query = {};
+      this.onQuery();
+    },
+
+    /**
+     * 必要方法
+     * 重新列表数据
+     */
+    onReloadData() {
+      this.$refs.table.onReloadData();
+    },
+
+    /**
+     * 必要方法
+     * 加载字典数据
+     * 如果不需要获取相应的字典数据,此方法内容可空
+     */
+    onLoadCodes() {
+      // this.$api
+      //   .$queue([
+      //     this.$api.sysDictTypeDropDownAwait({ code: 'code1' }),
+      //     this.$api.sysDictTypeDropDownAwait({ code: 'code2' }),
+      //     /* ... */
+      //   ])
+      //   .then(([code1, code2]) => {
+      //     this.codes.code1 = code1.data;
+      //     this.codes.code2 = code2.data;
+      //     /* ... */
+      //   });
+    },
+
+    /**
+     * 必要方法
+     * 绑定数据字典值
+     */
+    bindCodeValue(code, name) {
+      const c = this.codes[name].find((p) => p.code == code);
+      if (c) {
+        return c.value;
+      }
+      return null;
+    },
+
+    /**
+     * 必要方法
+     * 从列表页调用窗口的打开方法
+     */
+    onOpen(formName, record) {
+      this.$refs[formName].onOpen({
+        record,
+        /* 按需添加其他参数 */
+        /* ... */
+      });
+    },
+
+    /**
+     * 必要方法
+     * 可以用做一系列操作的公共回调,此方法中会重新加载当前列表
+     */
+    onResult(success, successMessage) {
+      if (success) {
+        this.$message.success(successMessage);
+        this.onReloadData();
+      }
+    },
+
+    /**
+     * 必要方法
+     * 删除时调用
+     */
+    onDelete(record) {
+      this.$refs.table.onLoading();
+      this.$api[api.delete](record)
+        .then(({ success }) => {
+          this.onResult(success, '删除成功');
+        })
+        .finally(() => {
+          this.$refs.table.onLoaded();
+        });
+    },
+
+    onOpenQuery() {
+      this.$refs.query.onOpen();
+    },
+  },
+};
+</script>

Web/src/pages/business/house/houseInfo/query.vue

@@ -0,0 +1,192 @@
+<template>
+  <a-drawer
+    :visible="visible"
+    @close="visible = false"
+    class="yo-drawer-form"
+    placement="right"
+    title="更多查询"
+    width="50%"
+  >
+    <div class="yo-drawer-form--body">
+      <a-form-model :label-col="{ flex: '150px' }" :wrapper-col="{ flex: '1' }">
+        <a-row :gutter="16" type="flex">
+          <a-col :span="12">
+            <a-form-model-item class="ant-row-flex mb-none" label="范围">连级选择</a-form-model-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-model-item class="ant-row-flex mb-none" label="排查类型">
+              <a-radio-group button-style="solid">
+                <a-radio-button>sdf</a-radio-button>
+                <a-radio-button>sdf</a-radio-button>
+                <a-radio-button>sdf</a-radio-button>
+              </a-radio-group>
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-model-item class="ant-row-flex mb-none" label="范围">连级选择</a-form-model-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-model-item class="ant-row-flex mb-none" label="排查类型">
+              <a-radio-group button-style="solid">
+                <a-radio-button>sdf</a-radio-button>
+                <a-radio-button>sdf</a-radio-button>
+                <a-radio-button>sdf</a-radio-button>
+              </a-radio-group>
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-model-item class="ant-row-flex mb-none" label="范围">连级选择</a-form-model-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-model-item class="ant-row-flex mb-none" label="排查类型">
+              <a-radio-group button-style="solid">
+                <a-radio-button>sdf</a-radio-button>
+                <a-radio-button>sdf</a-radio-button>
+                <a-radio-button>sdf</a-radio-button>
+              </a-radio-group>
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-model-item class="ant-row-flex mb-none" label="范围">连级选择</a-form-model-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-model-item class="ant-row-flex mb-none" label="排查类型">
+              <a-radio-group button-style="solid">
+                <a-radio-button>sdf</a-radio-button>
+                <a-radio-button>sdf</a-radio-button>
+                <a-radio-button>sdf</a-radio-button>
+              </a-radio-group>
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-model-item class="ant-row-flex mb-none" label="范围">连级选择</a-form-model-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-model-item class="ant-row-flex mb-none" label="排查类型">
+              <a-radio-group button-style="solid">
+                <a-radio-button>sdf</a-radio-button>
+                <a-radio-button>sdf</a-radio-button>
+                <a-radio-button>sdf</a-radio-button>
+              </a-radio-group>
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-model-item class="ant-row-flex mb-none" label="范围">连级选择</a-form-model-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-model-item class="ant-row-flex mb-none" label="排查类型">
+              <a-radio-group button-style="solid">
+                <a-radio-button>sdf</a-radio-button>
+                <a-radio-button>sdf</a-radio-button>
+                <a-radio-button>sdf</a-radio-button>
+              </a-radio-group>
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-model-item class="ant-row-flex mb-none" label="范围">连级选择</a-form-model-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-model-item class="ant-row-flex mb-none" label="排查类型">
+              <a-radio-group button-style="solid">
+                <a-radio-button>sdf</a-radio-button>
+                <a-radio-button>sdf</a-radio-button>
+                <a-radio-button>sdf</a-radio-button>
+              </a-radio-group>
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-model-item class="ant-row-flex mb-none" label="范围">连级选择</a-form-model-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-model-item class="ant-row-flex mb-none" label="排查类型">
+              <a-radio-group button-style="solid">
+                <a-radio-button>sdf</a-radio-button>
+                <a-radio-button>sdf</a-radio-button>
+                <a-radio-button>sdf</a-radio-button>
+              </a-radio-group>
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-model-item class="ant-row-flex mb-none" label="范围">连级选择</a-form-model-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-model-item class="ant-row-flex mb-none" label="排查类型">
+              <a-radio-group button-style="solid">
+                <a-radio-button>sdf</a-radio-button>
+                <a-radio-button>sdf</a-radio-button>
+                <a-radio-button>sdf</a-radio-button>
+              </a-radio-group>
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-model-item class="ant-row-flex mb-none" label="范围">连级选择</a-form-model-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-model-item class="ant-row-flex mb-none" label="排查类型">
+              <a-radio-group button-style="solid">
+                <a-radio-button>sdf</a-radio-button>
+                <a-radio-button>sdf</a-radio-button>
+                <a-radio-button>sdf</a-radio-button>
+              </a-radio-group>
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-model-item class="ant-row-flex mb-none" label="范围">连级选择</a-form-model-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-model-item class="ant-row-flex mb-none" label="排查类型">
+              <a-radio-group button-style="solid">
+                <a-radio-button>sdf</a-radio-button>
+                <a-radio-button>sdf</a-radio-button>
+                <a-radio-button>sdf</a-radio-button>
+              </a-radio-group>
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-model-item class="ant-row-flex mb-none" label="范围">连级选择</a-form-model-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-model-item class="ant-row-flex mb-none" label="排查类型">
+              <a-radio-group button-style="solid">
+                <a-radio-button>sdf</a-radio-button>
+                <a-radio-button>sdf</a-radio-button>
+                <a-radio-button>sdf</a-radio-button>
+              </a-radio-group>
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-model-item class="ant-row-flex mb-none" label="范围">连级选择</a-form-model-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-model-item class="ant-row-flex mb-none" label="排查类型">
+              <a-radio-group button-style="solid">
+                <a-radio-button>sdf</a-radio-button>
+                <a-radio-button>sdf</a-radio-button>
+                <a-radio-button>sdf</a-radio-button>
+              </a-radio-group>
+            </a-form-model-item>
+          </a-col>
+        </a-row>
+        <a-button @click="$emit('query')" type="primary">查询</a-button>
+      </a-form-model>
+    </div>
+    <div class="ant-drawer-footer">
+      <a-button type="primary">确定</a-button>
+    </div>
+  </a-drawer>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      visible: false,
+    };
+  },
+
+  methods: {
+    onOpen() {
+      this.visible = true;
+    },
+  },
+};
+</script>

Web/src/views/main/_layout/content.vue

@@ -58,6 +58,7 @@
           v-for="pane in panes"
         >
           <component
+            :id="pane.key"
             :is="pane.component"
             :key="pane.key"
             :param="pane.param"