update 完成房屋编码列表

2021-05-21 14:04:05 +08:00
parent 1e15747852
commit 4be20f665b
4 changed files with 158 additions and 58 deletions
--- a/Api/Ewide.Application/Service/HouseCode/HouseCodeService.cs
+++ b/Api/Ewide.Application/Service/HouseCode/HouseCodeService.cs
@@ -66,7 +66,7 @@ namespace Ewide.Application.Service.HouseCode
        [HttpPost("/houseCode/page")]
        public async Task<dynamic> QueryPage([FromBody] QueryHouseCodeInput input)
        {
-            var sql = @"SELECT HC.*,HP.Note,AA.Name AreaName,RA.Name RoadName,CA.Name CommName FROM bs_house_code HC
+            var sql = @"SELECT HC.*,HP.AreaCode,HP.Note,AA.Name AreaName,RA.Name RoadName,CA.Name CommName FROM bs_house_code HC
 LEFT JOIN bs_house_projectinfo HP ON HP.Id=HC.ProjectId
 LEFT JOIN sys_area_code CA ON CA.Code = HP.AreaCode
 LEFT JOIN sys_area_code RA ON RA.AdCode = SUBSTR(CA.AdCode,1,9)
--- a/Web/src/assets/style/lib/width-height.less
+++ b/Web/src/assets/style/lib/width-height.less
@@ -5,19 +5,19 @@
  @n : @i * 50;

  .w-@{n} {
-    width: @n * 1px;
+    width: @n * 1px !important;
  }

  .h-@{n} {
-    height: @n * 1px;
+    height: @n * 1px !important;
  }

  .w-@{n}-p {
-    width: @n * 1%;
+    width: @n * 1% !important;
  }

  .h-@{n}-p {
-    height: @n * 1%;
+    height: @n * 1% !important;
  }

  .width-height(@i + 1);
--- a/Web/src/pages/business/house/houseCode/form/part.vue
+++ b/Web/src/pages/business/house/houseCode/form/part.vue
@@ -17,10 +17,15 @@
      <!-- 表单控件 -->
      <!-- ... -->
      <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-group
+          :disabled="!!form.id"
+          @change="onTypeChange"
+          button-style="solid"
+          v-model="form.type"
+        >
          <a-radio-button
            :key="item.code"
-            :value="item.code"
+            :value="+item.code"
            v-for="item in codes.houseType"
          >{{ item.value }}</a-radio-button>
        </a-radio-group>
@@ -29,23 +34,20 @@
        <a-radio-group :disabled="form.type == 1" button-style="solid" v-model="form.industry">
          <a-radio-button
            :key="item.code"
-            :value="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 :gutter="8" align="top" type="flex">
-          <a-col>
-            <span>宁波市 -</span>
-          </a-col>
          <a-col flex="1">
            <a-form-model-item class="mb-none" prop="areaCode">
              <a-cascader
                :display-render="({labels}) => labels.join(' - ')"
                :field-names="{ label: 'name', value: 'code', children: 'children' }"
                :options="options.areaTree"
-                @change="onAreaCodeChange"
+                @change="onAreaCodeChange()"
                expand-trigger="hover"
                placeholder="请选择所在区域"
                v-model="form.areaCode"
@@ -212,7 +214,8 @@ export default {
        houseCode.push(...'XXXXXXXXXXXX'.split(''));
      }

-      if (this.form.projectId) {
+      /** bug 练级选择,导致此处项目列表未加载 */
+      if (this.form.projectId && this.options.projects.length) {
        const project = this.options.projects.find((p) => p.id === this.form.projectId);
        houseCode.push(...`000${project.sort}`.slice(-3).split(''));
      } else {
@@ -265,12 +268,27 @@ export default {
      /** 将默认数据覆盖到form */
      const record = this.param && this.param.record;

+      let areaCode = [];
+      if (record) {
+        areaCode = [
+          record.areaCode.substr(0, 4),
+          record.areaCode.substr(0, 6),
+          record.areaCode.substr(0, 9),
+          record.areaCode,
+        ];
+      }
+
      this.form = this.$_.cloneDeep({
        ...defaultForm,
        ...record,
        /** 在此处添加其他默认数据转换 */
        /* ... */
+        areaCode,
      });
+
+      if (this.form.id) {
+        this.onAreaCodeChange(true);
+      }
    },

    /**
@@ -458,16 +476,16 @@ export default {
    /**
     * 切换区域
     */
-    onAreaCodeChange() {
+    onAreaCodeChange(autoChange = false) {
      if (this.form.areaCode.length != 4) {
        this.form.areaCode = [];
      }

-      this.getProjects();
+      this.getProjects(autoChange);
    },

-    async getProjects() {
-      if (this.form.projectId) {
+    async getProjects(autoChange = false) {
+      if (this.form.projectId && !autoChange) {
        this.form.projectId = undefined;
      }
      if (this.form.areaCode && this.form.areaCode.length === 4) {
--- a/Web/src/pages/business/house/houseCode/index.vue
+++ b/Web/src/pages/business/house/houseCode/index.vue
@@ -18,23 +18,67 @@
        <Auth auth="authCode:page" slot="query">
          <!-- 此处添加查询表单控件 -->
          <!-- ... -->
+          <a-form-model-item>
+            <a-cascader
+              :display-render="({labels}) => labels.join(' - ')"
+              :field-names="{ label: 'name', value: 'code', children: 'children' }"
+              :options="options.areaTree"
+              class="w-400"
+              expand-trigger="hover"
+              placeholder="请选择所在区域"
+              v-model="query.areaCode"
+            />
+          </a-form-model-item>
+          <a-form-model-item label="编号">
+            <a-input-number
+              :formatter="(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>
        </Auth>
        <Auth auth="authCode:add" slot="operator">
-          <a-button
-            @click="openContentWindow({
-              title: '编码表单',
-              path: 'business/house/houseCode/form',
-            })"
-            icon="plus"
-          >新增编码</a-button>
+          <a-button @click="onOpen()" icon="plus">新增编码</a-button>
        </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>
        <!-- 添加操作控件 -->
        <span slot="action" slot-scope="text, record">
          <yo-table-actions>
            <Auth auth="authCode:edit">
-              <a @click="onOpen('edit-form', record)">编辑</a>
+              <a @click="onOpen(record)">编辑</a>
            </Auth>
            <Auth auth="authCode:delete">
              <a-popconfirm @confirm="onDelete(record)" placement="topRight" title="是否确认删除">
@@ -47,16 +91,6 @@
        </span>
      </yo-table>
    </a-card>
-
-    <!-- 新增表单 -->
-    <yo-modal-form :action="$api[api.add]" :title="'新增' + name" @ok="onReloadData" ref="add-form">
-      <form-body />
-    </yo-modal-form>
-
-    <!-- 编辑表单 -->
-    <yo-modal-form :action="$api[api.edit]" :title="'编辑' + name" @ok="onReloadData" ref="edit-form">
-      <form-body />
-    </yo-modal-form>
  </container>
 </template>
 <script>
@@ -65,8 +99,6 @@ import FormBody from './form';
 /* 在此管理整个页面需要的接口名称 */
 const api = {
  page: 'houseCodePage',
-  add: 'testAddApi',
-  edit: 'testEditApi',
  delete: 'testDeleteApi...',
  /* ... */
 };
@@ -79,24 +111,58 @@ export default {
    return {
      api,

-      name: '...',
+      name: '',

      /* 查询条件 */
-      query: {},
+      query: {
+        type: 0,
+      },

      /* 表格字段 */
-      columns: [],
+      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: {
-        code1: [],
-        code2: [],
+        type: [],
+        industry: [],
+      },
+
+      options: {
+        areaTree: [],
      },
    };
  },
+
  created() {
    /** 按需加载字典编码 */
    this.onLoadCodes();
+    this.onLoadAreaTree();

    /** 根据权限添加操作列 */
    const flag = this.$auth(/* ... */);
@@ -115,9 +181,14 @@ export default {
     * 传给yo-table以示意数据接口及其参数和返回的数据结构
     */
    loadData(params) {
+      const query = this.$_.cloneDeep(this.query);
+      if (query.areaCode) {
+        query.areaCode = query.areaCode[query.areaCode.length - 1];
+      }
+
      return this.$api[api.page]({
        ...params,
-        ...this.query,
+        ...query,
      }).then((res) => {
        return res.data;
      });
@@ -137,7 +208,9 @@ export default {
     */
    onResetQuery() {
      /** 在这里重置查询条件时,可对特殊的字段做保留处理 */
-      this.query = {};
+      this.query = {
+        type: 0,
+      };
      this.onQuery();
    },

@@ -156,15 +229,10 @@ export default {
     */
    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;
-          /* ... */
+        .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;
        });
    },

@@ -184,11 +252,13 @@ export default {
     * 必要方法
     * 从列表页调用窗口的打开方法
     */
-    onOpen(formName, record) {
-      this.$refs[formName].onOpen({
-        record,
-        /* 按需添加其他参数 */
-        /* ... */
+    onOpen(record) {
+      this.openContentWindow({
+        title: '房屋编码',
+        path: 'business/house/houseCode/form',
+        param: {
+          record,
+        },
      });
    },

@@ -217,6 +287,18 @@ export default {
          this.$refs.table.onLoaded();
        });
    },
+
+    onLoadAreaTree() {
+      return this.$api.getAreaTree().then(({ data }) => {
+        this.options.areaTree = data;
+      });
+    },
+
+    onChangeQueryType() {
+      if (this.query.type < 2 && this.query.hasOwnProperty('industry')) {
+        this.$delete(this.query, 'industry');
+      }
+    },
  },
 };
 </script>