update 完成选房

Web/src/assets/style/app.less

@@ -36,6 +36,7 @@
 @import './lib/authority-view.less';
 @import './lib/icon-selector.less';
 @import './lib/anchor.less';
+@import './lib/disabled.less';
 @import './theme/primary.less';
 // @import './lib/font-weight.less';
 @import './public.less';

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

@@ -0,0 +1,36 @@
+@import (reference) '~@/assets/style/extend.less';
+.ant-btn-primary-disabled,
+.ant-btn-primary.disabled,
+.ant-btn-primary[disabled],
+.ant-btn-primary-disabled:hover,
+.ant-btn-primary.disabled:hover,
+.ant-btn-primary[disabled]:hover,
+.ant-btn-primary-disabled:focus,
+.ant-btn-primary.disabled:focus,
+.ant-btn-primary[disabled]:focus,
+.ant-btn-primary-disabled:active,
+.ant-btn-primary.disabled:active,
+.ant-btn-primary[disabled]:active,
+.ant-btn-primary-disabled.active,
+.ant-btn-primary.disabled.active,
+.ant-btn-primary[disabled].active {
+  opacity: .5;
+  color: @btn-primary-color;
+  border-color: @btn-primary-bg;
+  background-color: @btn-primary-bg;
+  box-shadow: @btn-primary-shadow;
+  text-shadow: @btn-text-shadow;
+}
+.ant-radio-button-wrapper-disabled:first-child,
+.ant-radio-button-wrapper-disabled:hover {
+  opacity: .5;
+  color: @radio-button-color;
+  background-color: @radio-button-bg;
+}
+.ant-radio-button-wrapper-disabled.ant-radio-button-wrapper-checked {
+  opacity: .5;
+  color: @btn-primary-color;
+  border-color: @btn-primary-bg;
+  background-color: @btn-primary-bg;
+  box-shadow: @btn-primary-shadow;
+}

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

@@ -2,9 +2,17 @@
 .ant-radio-button-wrapper {
   margin-right: @padding-xs;
   margin-bottom: @padding-xs;
+
+  border-left: @border-width-base @border-style-base @normal-color;
   &:not(:first-child) {
     &::before {
-      left: 0;
+      content: none;
     }
   }
 }
+.ant-radio-button-wrapper-checked {
+  &:not(.ant-radio-button-wrapper-disabled),
+  &:not(.ant-radio-button-wrapper-disabled):hover {
+    box-shadow: none;
+  }
+}

Web/src/assets/style/main.less

@@ -391,7 +391,6 @@
           padding: 0 @padding-md 0 @padding-lg;
 
           color: @logo-color;
-          background-color: @nav-background;
           box-shadow: @logo-box-shadow;
           img {
             max-height: 100%;

Web/src/common/api/requests/business/houseSafety/houseSelector.js

@@ -0,0 +1,6 @@
+export default {
+    houseSelect: ['/houseSelector/select', 'post'],
+    houseSelectRevoke: ['/houseSelector/revoke', 'post'],
+    houseSelectorPage: ['/houseSelector/selectorPage', 'post'],
+    houseSelectedPage: ['/houseSelector/selectedPage', 'post'],
+}

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

@@ -0,0 +1,13 @@
+import houseProjectInfo from './houseProjectInfo'
+import houseZone from './houseZone'
+import houseCode from './houseCode'
+import houseMember from './houseMember'
+import houseSelector from './houseSelector'
+
+export default {
+    ...houseProjectInfo,
+    ...houseZone,
+    ...houseCode,
+    ...houseMember,
+    ...houseSelector
+}

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

@@ -1,11 +1,5 @@
-import houseProjectInfo from './houseProjectInfo'
-import houseZone from './houseZone'
-import houseCode from './houseCode'
-import houseMember from './houseMember'
+import houseSafety from './houseSafety'
 
 export default {
-    ...houseProjectInfo,
-    ...houseZone,
-    ...houseCode,
-    ...houseMember
+    ...houseSafety,
 }

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

@@ -502,9 +502,12 @@ export default {
       }
 
       this.loading = true;
-      await this.getProjects(autoChange);
-      await this.getZones(autoChange);
-      this.loading = false;
+      try {
+        await this.getProjects(autoChange);
+        await this.getZones(autoChange);
+      } finally {
+        this.loading = false;
+      }
     },
 
     async getProjects(autoChange = false) {

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

@@ -30,7 +30,7 @@
           <a-button
             @click="openContentWindow({
                 title: '房屋表单',
-                path: 'business/house/houseInfo/form',
+                path: 'business/house/info/form',
               });"
           >(test)打开表单</a-button>
         </div>

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

@@ -78,7 +78,7 @@
               <div slot="avatar">
                 <yo-image :id="record.avatar" :size="48" icon="user" shape="square" type="avatar" />
                 <a-button
-                  @click="$refs['selector-modal'].onOpen()"
+                  @click="onOpenSelector(record)"
                   class="block w-100-p mt-xxs"
                   size="small"
                   type="primary"
@@ -344,6 +344,10 @@ export default {
           record.statusChanging = false;
         });
     },
+
+    onOpenSelector(record) {
+      this.$refs['selector-modal'].onOpen({ userId: record.id });
+    },
   },
 };
 </script>

Web/src/pages/business/house/member/selector/index.vue

@@ -9,10 +9,10 @@
   >
     <a-tabs :animated="false" :tab-bar-style="{ marginBottom: 0 }" default-active-key="1">
       <a-tab-pane key="1" tab="选房">
-        <selector-list />
+        <selector-list :user-id="userId" @reload-all="onReloadAll" ref="selector-list" />
       </a-tab-pane>
       <a-tab-pane key="2" tab="已选">
-        <selected-list />
+        <selected-list :user-id="userId" @reload-all="onReloadAll" ref="selected-list" />
       </a-tab-pane>
     </a-tabs>
   </a-modal>
@@ -34,12 +34,14 @@ export default {
 
       /** 其他成员属性 */
       /* ... */
+      userId: '',
     };
   },
 
   methods: {
     onOpen(param) {
       this.visible = true;
+      this.userId = param.userId;
     },
 
     /**
@@ -55,6 +57,14 @@ export default {
 
     /** 当前组件的其他方法 */
     /* ... */
+    onReloadAll() {
+      if (this.$refs['selector-list']) {
+        this.$refs['selector-list'].onReloadData();
+      }
+      if (this.$refs['selected-list']) {
+        this.$refs['selected-list'].onReloadData();
+      }
+    },
   },
 };
 </script>

Web/src/pages/business/house/member/selector/selectedList.vue

@@ -1,3 +1,285 @@
 <template>
-  <div></div>
-</template>
+  <!-- 
+    普通查询表格
+    v 1.2
+    2021-04-30
+    Lufthafen
+  -->
+  <a-card :bordered="false" class="mb-none">
+    <yo-table
+      :auto-load="false"
+      :columns="columns"
+      :load-data="loadData"
+      :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: (keys) => selectedRowKeys = keys }"
+      @query="onQuery"
+      @resetQuery="onResetQuery"
+      ref="table"
+    >
+      <Auth auth="houseSelector:selectedPage" slot="query">
+        <!-- 此处添加查询表单控件 -->
+        <!-- ... -->
+        <a-form-model-item label="编号">
+          <a-input-number
+            :formatter="(number) => number && `000${number}`.slice(-3)"
+            :max="999"
+            :min="1"
+            :precision="0"
+            :step="1"
+            placeholder="请输入房屋序号"
+            v-model="query.no"
+          />
+        </a-form-model-item>
+        <a-form-model-item label="房屋性质">
+          <a-radio-group @change="onChangeQueryType" button-style="solid" v-model="query.type">
+            <a-radio-button :value="0">全部</a-radio-button>
+            <a-radio-button
+              :key="item.code"
+              :value="+item.code"
+              v-for="item in codes.type"
+            >{{item.value}}</a-radio-button>
+          </a-radio-group>
+        </a-form-model-item>
+        <a-form-model-item label="行业" v-if="query.type == 2">
+          <a-select class="w-150" placeholder="请选择行业" v-model="query.industry">
+            <a-select-option
+              :key="item.code"
+              :value="+item.code"
+              v-for="item in codes.industry"
+            >{{item.value}}</a-select-option>
+          </a-select>
+        </a-form-model-item>
+        <a-form-model-item label="地址">
+          <a-input placeholder="请输入地址" v-model="query.address" />
+        </a-form-model-item>
+        <a-form-model-item label="房屋唯一编码">
+          <a-input placeholder="请输入房屋唯一编码" v-model="query.houseCode" />
+        </a-form-model-item>
+      </Auth>
+      <Auth auth="houseSelector:revoke" slot="operator">
+        <a-popconfirm
+          :disabled="!selectedRowKeys.length"
+          @confirm="onHouseSelectRevoke"
+          placement="bottomLeft"
+          title="是否确认撤销"
+        >
+          <a-button :disabled="!selectedRowKeys.length" :loading="saving" type="danger">撤销</a-button>
+        </a-popconfirm>
+      </Auth>
+      <!-- 格式化字段内容 -->
+      <!-- ... -->
+      <template slot="houseCode" slot-scope="text, record">
+        <span>{{`${record.areaName}-${record.roadName}-${record.commName}-${record.note}-${`000${record.no}`.slice(-3)}`}}</span>
+      </template>
+      <template slot="type" slot-scope="text, record">
+        <span>{{bindCodeValue(text, 'type') + (text === 2 ? `(${bindCodeValue(record.industry, 'industry')})` : '')}}</span>
+      </template>
+    </yo-table>
+  </a-card>
+</template>
+<script>
+/* 在此管理整个页面需要的接口名称 */
+const api = {
+  page: 'houseSelectedPage',
+  /* ... */
+};
+
+export default {
+  props: ['userId'],
+
+  data() {
+    return {
+      api,
+
+      /* 查询条件 */
+      query: {
+        type: 0,
+      },
+
+      /* 表格字段 */
+      columns: [
+        {
+          title: '房屋编码',
+          dataIndex: 'houseCode',
+          sorter: true,
+          scopedSlots: { customRender: 'houseCode' },
+          width: 300,
+        },
+        {
+          title: '房屋性质及行业',
+          dataIndex: 'type',
+          sorter: true,
+          scopedSlots: { customRender: 'type' },
+          width: 150,
+        },
+        {
+          title: '地址',
+          dataIndex: 'address',
+          sorter: true,
+        },
+        {
+          title: '登记时间',
+          dataIndex: 'createdTime',
+          sorter: true,
+          width: 150,
+        },
+      ],
+
+      /* 字典编码储存格式 */
+      codes: {
+        type: [],
+        industry: [],
+      },
+
+      options: {},
+
+      selectedRowKeys: [],
+
+      saving: false,
+    };
+  },
+
+  async created() {
+    /** 按需加载字典编码 */
+    await this.onLoadCodes();
+    this.onQuery();
+  },
+  methods: {
+    /**
+     * 必要的方法
+     * 传给yo-table以示意数据接口及其参数和返回的数据结构
+     */
+    loadData(params) {
+      const query = this.$_.cloneDeep(this.query);
+      if (!query.userId) {
+        query.userId = this.userId;
+      }
+
+      return this.$api[api.page]({
+        ...params,
+        ...query,
+      }).then((res) => {
+        return res.data;
+      });
+    },
+
+    /**
+     * 有查询功能时的必要方法
+     * 加载数据时初始化分页信息
+     */
+    onQuery() {
+      this.$refs.table.onReloadData(true);
+    },
+
+    /**
+     * 有查询功能时的必要方法
+     * 重置查询条件
+     */
+    onResetQuery() {
+      /** 在这里重置查询条件时,可对特殊的字段做保留处理 */
+      this.query = {
+        type: 0,
+      };
+      this.onQuery();
+    },
+
+    /**
+     * 必要方法
+     * 重新列表数据
+     */
+    onReloadData() {
+      this.$refs.table.onReloadData();
+    },
+
+    /**
+     * 必要方法
+     * 加载字典数据
+     * 如果不需要获取相应的字典数据,此方法内容可空
+     */
+    onLoadCodes() {
+      return this.$api
+        .sysDictTypeDropDowns({ code: ['dic_house_type', 'dic_house_industry'] })
+        .then(({ data: { dic_house_type, dic_house_industry } }) => {
+          this.codes.type = dic_house_type;
+          this.codes.industry = dic_house_industry;
+        });
+    },
+
+    /**
+     * 必要方法
+     * 绑定数据字典值
+     */
+    bindCodeValue(code, name) {
+      const c = this.codes[name].find((p) => p.code == code);
+      if (c) {
+        return c.value;
+      }
+      return null;
+    },
+
+    /**
+     * 必要方法
+     * 从列表页调用窗口的打开方法
+     */
+    onOpen(record) {
+      this.openContentWindow({
+        key: record ? record.id : 'business/house/code/form',
+        title: record ? '修改房屋编码' : '新增房屋编码',
+        subTitle:
+          record &&
+          `${record.areaName}-${record.roadName}-${record.commName}-${record.note}-${`000${record.no}`.slice(-3)}`,
+        path: 'business/house/code/form',
+        param: {
+          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();
+        });
+    },
+
+    onChangeQueryType() {
+      if (this.query.type < 2 && this.query.hasOwnProperty('industry')) {
+        this.$delete(this.query, 'industry');
+      }
+    },
+
+    onHouseSelectRevoke() {
+      this.saving = true;
+      this.$refs.table.onLoading();
+      this.$api
+        .houseSelectRevoke({ ids: this.selectedRowKeys, userId: this.userId })
+        .then(({ success }) => {
+          this.$message.success('选房成功');
+        })
+        .finally(() => {
+          this.saving = false;
+          this.selectedRowKeys = [];
+          this.$emit('reload-all');
+        });
+    },
+  },
+};
+</script>

Web/src/pages/business/house/member/selector/selectorList.vue

@@ -10,12 +10,12 @@
       :auto-load="false"
       :columns="columns"
       :load-data="loadData"
-      :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
+      :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: (keys) => selectedRowKeys = keys }"
       @query="onQuery"
       @resetQuery="onResetQuery"
       ref="table"
     >
-      <Auth auth="houseCode:page" slot="query">
+      <Auth auth="houseSelector:selectorPage" slot="query">
         <!-- 此处添加查询表单控件 -->
         <!-- ... -->
         <a-form-model-item label="编号">
@@ -55,8 +55,13 @@
           <a-input placeholder="请输入房屋唯一编码" v-model="query.houseCode" />
         </a-form-model-item>
       </Auth>
-      <Auth auth="houseCode:add" slot="operator">
-        <a-button type="primary">确认选择</a-button>
+      <Auth auth="houseSelector:select" slot="operator">
+        <a-button
+          :disabled="!selectedRowKeys.length"
+          :loading="saving"
+          @click="onHouseSelect"
+          type="primary"
+        >确认选择</a-button>
       </Auth>
       <!-- 格式化字段内容 -->
       <!-- ... -->
@@ -72,17 +77,17 @@
 <script>
 /* 在此管理整个页面需要的接口名称 */
 const api = {
-  page: 'houseCodePage',
+  page: 'houseSelectorPage',
   /* ... */
 };
 
 export default {
+  props: ['userId'],
+
   data() {
     return {
       api,
 
-      name: '',
-
       /* 查询条件 */
       query: {
         type: 0,
@@ -126,6 +131,8 @@ export default {
       options: {},
 
       selectedRowKeys: [],
+
+      saving: false,
     };
   },
 
@@ -141,8 +148,8 @@ export default {
      */
     loadData(params) {
       const query = this.$_.cloneDeep(this.query);
-      if (query.areaCode) {
-        query.areaCode = query.areaCode[query.areaCode.length - 1];
+      if (!query.userId) {
+        query.userId = this.userId;
       }
 
       return this.$api[api.page]({
@@ -257,8 +264,19 @@ export default {
       }
     },
 
-    onSelectChange(selectedRowKeys) {
-      this.selectedRowKeys = selectedRowKeys;
+    onHouseSelect() {
+      this.saving = true;
+      this.$refs.table.onLoading();
+      this.$api
+        .houseSelect({ ids: this.selectedRowKeys, userId: this.userId })
+        .then(({ success }) => {
+          this.$message.success('选房成功');
+        })
+        .finally(() => {
+          this.saving = false;
+          this.selectedRowKeys = [];
+          this.$emit('reload-all');
+        });
     },
   },
 };