update 完成片区新增

2021-06-01 10:54:07 +08:00
parent 08e4573e19
commit 483b15c013
17 changed files with 756 additions and 75 deletions
--- a/Web/src/common/api/requests/business/houseSafety/houseZone.js
+++ b/Web/src/common/api/requests/business/houseSafety/houseZone.js
@@ -1,3 +1,5 @@
 export default {
-    houseZoneList: '/houseZone/list'
+    houseZoneList: '/houseZone/list',
+    houseZoneAutoIncrement: '/houseZone/autoIncrement',
+    houseZoneAdd: ['/houseZone/add', 'post']
 }
--- a/Web/src/pages/business/house/project/form.vue
+++ b/Web/src/pages/business/house/project/form.vue
@@ -11,25 +11,43 @@
      <div class="yo-form-group">
        <!-- 表单控件 -->
        <div class="p-md">
-          <a-alert message="tips：选择所属区域和类型之后，项目名称、项目序号自动生成，无需手动填写。项目备注请填写房屋所属单位的名称、道路的名称或大厦的名称，比如XX中学、XX大厦、XX小区等。登记项目时，应在项目备注中明确项目所指对象。" />
+          <a-alert
+            message="tips：选择所属区域和类型之后，项目名称、项目序号自动生成，无需手动填写。项目备注请填写房屋所属单位的名称、道路的名称或大厦的名称，比如XX中学、XX大厦、XX小区等。登记项目时，应在项目备注中明确项目所指对象。"
+          />
        </div>
        <a-form-model-item label="类型" prop="type">
-          <a-radio-group button-style="solid" v-model="form.type" :disabled="exist">
-            <a-radio-button :value="1"> 住宅 </a-radio-button>
-            <a-radio-button :value="2"> 非住宅 </a-radio-button>
+          <a-radio-group :disabled="exist" button-style="solid" v-model="form.type">
+            <a-radio-button :value="1">住宅</a-radio-button>
+            <a-radio-button :value="2">非住宅</a-radio-button>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="所属区域" prop="areaCode">
-          <a-cascader :field-names="{ label: 'name', value: 'code', children: 'children' }" :options="areaData" expand-trigger="hover" placeholder="请选择所属区域" v-model="form.areaCode" :display-render="displayRender" @change="formAreaCodeChange" />
+          <a-cascader
+            :display-render="displayRender"
+            :field-names="{ label: 'name', value: 'code', children: 'children' }"
+            :options="areaData"
+            @change="formAreaCodeChange"
+            expand-trigger="hover"
+            placeholder="请选择所属区域"
+            v-model="form.areaCode"
+          />
        </a-form-model-item>
        <a-form-model-item label="项目名称" prop="name">
-          <a-input placeholder="选择所属区域和类型之后自动生成" v-model="form.name" :disabled="true"><a-icon slot="suffix" type="lock" /></a-input>
+          <a-input :disabled="true" placeholder="选择所属区域和类型之后自动生成" v-model="form.name">
+            <a-icon slot="suffix" type="lock" />
+          </a-input>
        </a-form-model-item>
        <a-form-model-item label="序号" prop="sort">
-          <a-input placeholder="选择所属区域和类型之后自动生成" v-model="form.sort" :disabled="true"><a-icon slot="suffix" type="lock" /> </a-input>
+          <a-input :disabled="true" placeholder="选择所属区域和类型之后自动生成" v-model="form.sort">
+            <a-icon slot="suffix" type="lock" />
+          </a-input>
        </a-form-model-item>
        <a-form-model-item label="备注" prop="note">
-          <a-textarea :rows="4" placeholder="请输入备注,填写房屋所属单位的名称、道路的名称或大厦的名称，比如XX中学、XX大厦、XX小区等。登记项目时，应在项目备注中明确项目所指对象。" v-model="form.note"></a-textarea>
+          <a-textarea
+            :rows="4"
+            placeholder="请输入备注,填写房屋所属单位的名称、道路的名称或大厦的名称，比如XX中学、XX大厦、XX小区等。登记项目时，应在项目备注中明确项目所指对象。"
+            v-model="form.note"
+          ></a-textarea>
        </a-form-model-item>
        <!-- ... -->
      </div>
@@ -37,6 +55,8 @@
  </a-form-model>
 </template>
 <script>
+import { numberToChinese } from '@/util/format';
+
 /* 表单内容默认值 */
 const defaultForm = {
  /* ... */
@@ -75,16 +95,24 @@ export default {
      (newVal, oldVal) => {
        // 做点什么
        if (this.form.areaCode.length == 4 && this.form.type) {
-          if (this.intEntity.id && this.intEntity.type == this.form.type && this.intEntity.areaCode[this.intEntity.areaCode.length - 1] == this.form.areaCode[this.form.areaCode.length - 1]) {
+          if (
+            this.intEntity.id &&
+            this.intEntity.type == this.form.type &&
+            this.intEntity.areaCode[this.intEntity.areaCode.length - 1] ==
+              this.form.areaCode[this.form.areaCode.length - 1]
+          ) {
            this.$set(this.form, 'sort', this.intEntity.sort);
            this.$set(this.form, 'name', this.intEntity.name);
          } else {
            this.loading = true;
            this.$api
-              .houseProjectNextSort({ areaCode: this.form.areaCode[this.form.areaCode.length - 1], type: this.form.type })
+              .houseProjectNextSort({
+                areaCode: this.form.areaCode[this.form.areaCode.length - 1],
+                type: this.form.type,
+              })
              .then((res) => {
                this.$set(this.form, 'sort', res.data);
-                this.$set(this.form, 'name', '项目' + this.toChinesNum(res.data));
+                this.$set(this.form, 'name', '项目' + numberToChinese(res.data));
              })
              .finally(() => {
                this.loading = false;
@@ -211,25 +239,6 @@ export default {
    displayRender({ labels }) {
      return labels[labels.length - 1];
    },
-    toChinesNum(val) {
-      let num = parseInt(val);
-      let changeNum = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
-      let unit = ['', '十', '百', '千', '万'];
-      let getWan = (temp) => {
-        let strArr = temp.toString().split('').reverse();
-        let newNum = '';
-        for (var i = 0; i < strArr.length; i++) {
-          newNum = (i == 0 && strArr[i] == 0 ? '' : i > 0 && strArr[i] == 0 && strArr[i - 1] == 0 ? '' : changeNum[strArr[i]] + (strArr[i] == 0 ? unit[0] : unit[i])) + newNum;
-        }
-        return newNum;
-      };
-      let overWan = Math.floor(num / 10000);
-      let noWan = num % 10000;
-      if (noWan.toString().length < 4) noWan = '0' + noWan;
-
-      let chinanum = overWan ? getWan(overWan) + '万' + getWan(noWan) : getWan(num);
-      return chinanum;
-    },
    formAreaCodeChange(val) {
      if (val.length != 4) {
        this.form.areaCode = [];
--- a/Web/src/pages/business/house/zone/form.vue
+++ b/Web/src/pages/business/house/zone/form.vue
@@ -0,0 +1,221 @@
+<template>
+  <!-- 
+    普通编辑窗体
+    v 1.2
+    2021-04-30
+    Lufthafen
+  -->
+  <a-form-model :model="form" :rules="rules" class="yo-form" ref="form">
+    <a-spin :spinning="loading">
+      <a-icon slot="indicator" spin type="loading" />
+      <div class="yo-form-group">
+        <!-- 表单控件 -->
+        <!-- ... -->
+        <a-form-model-item label="所属区域" prop="areaCode">
+          <a-cascader
+            :field-names="{ label: 'name', value: 'code', children: 'children' }"
+            :options="areaData"
+            @change="onAreaCodeChange"
+            expand-trigger="hover"
+            placeholder="请选择所属区域"
+            v-model="form.areaCode"
+          />
+        </a-form-model-item>
+        <a-form-model-item label="片区名称" prop="name">
+          <a-input placeholder="请输入片区名称" v-model="form.name" />
+        </a-form-model-item>
+        <a-form-model-item label="排序" prop="sort">
+          <a-input-number
+            :max="1000"
+            :min="0"
+            class="w-100-p"
+            placeholder="请输入排序"
+            v-model="form.sort"
+          />
+        </a-form-model-item>
+        <a-form-model-item label="备注" prop="remark">
+          <a-textarea placeholder="请输入备注" v-model="form.remark" />
+        </a-form-model-item>
+      </div>
+    </a-spin>
+  </a-form-model>
+</template>
+<script>
+import { numberToChinese } from '@/util/format';
+
+/* 表单内容默认值 */
+const defaultForm = {
+  /* ... */
+  pid: undefined,
+  sort: 100,
+};
+
+export default {
+  data() {
+    return {
+      /** 表单数据 */
+      form: {},
+      /** 验证格式 */
+      rules: {
+        name: [{ required: true, message: '请输入片区名称', trigger: 'blur' }],
+        areaCode: [{ required: true, message: '请选择所属区域' }],
+        /* ... */
+      },
+
+      /** 加载异步数据状态 */
+      loading: false,
+
+      codes: {
+        type: [],
+      },
+
+      areaData: [],
+      /** 其他成员属性 */
+      /* ... */
+    };
+  },
+
+  methods: {
+    /**
+     * 必要的方法
+     * 在打开编辑页时允许填充数据
+     */
+    onFillData(params) {
+      // 从字符串areaCode查找到整个层级
+      const areaCode = [];
+      const findCode = (data, level) => {
+        level = level || 0;
+        for (let i = 0; i < data.length; i++) {
+          const item = data[i];
+          areaCode[level] = item.code;
+
+          if (item.code === params.record.areaCode) {
+            areaCode.length = level + 1;
+            return true;
+          }
+
+          if (item.children && item.children.length) {
+            const found = findCode(item.children, level + 1);
+            if (found) {
+              return true;
+            }
+          }
+        }
+      };
+
+      if (params.record && params.record.areaCode) {
+        findCode(this.areaData);
+      }
+
+      /** 将默认数据覆盖到form */
+      this.form = this.$_.cloneDeep({
+        ...defaultForm,
+        pid: params.orgId,
+        ...params.record,
+        /** 在此处添加其他默认数据转换 */
+        /* ... */
+        areaCode,
+      });
+    },
+
+    /**
+     * 必要方法
+     * 验证表单并获取表单数据
+     */
+    onGetData() {
+      return new Promise((reslove, reject) => {
+        this.$refs.form.validate((valid) => {
+          if (valid) {
+            const record = this.$_.cloneDeep(this.form);
+            record.areaCode = record.areaCode[record.areaCode.length - 1];
+            /** 验证通过后可以对数据进行转换得到想要提交的格式 */
+            /* ... */
+
+            reslove(record);
+          } else {
+            reject();
+          }
+        });
+      });
+    },
+
+    /**
+     * 必要的方法
+     * 在外部窗口进行保存时调用表单验证
+     */
+    onValidate(callback) {
+      this.$refs.form.validate(callback);
+    },
+
+    /**
+     * 必要的方法
+     * 在外部窗口关闭或重置时对表单验证进行初始化
+     */
+    onResetFields() {
+      setTimeout(() => {
+        this.$refs.form.resetFields();
+
+        /** 在这里可以初始化当前组件中其他属性 */
+        /* ... */
+      }, 300);
+    },
+
+    /**
+     * 必要方法
+     * 加载当前表单中所需要的异步数据
+     */
+    async onInit(params) {
+      this.loading = true;
+      /** 可以在这里await获取一些异步数据 */
+      await this.onLoadCodes();
+      await this.onLoadAreaData();
+      /* ... */
+      this.loading = false;
+    },
+
+    /** 当前组件的其他方法 */
+    /* ... */
+    onLoadCodes() {
+      this.$api
+        .$queue([
+          this.$api.sysDictTypeDropDownAwait({ code: 'org_type' }),
+          /* ... */
+        ])
+        .then(([org_type]) => {
+          this.codes.type = org_type.data;
+          /* ... */
+        });
+    },
+    onLoadAreaData() {
+      return this.$api.getAreaTree({ level: 3 }).then(({ data }) => {
+        // 为了防止出现空的层级选择,删除所有空children节点
+        const clearChiildren = (data) => {
+          data.forEach((item) => {
+            if (item.children && item.children.length) {
+              clearChiildren(item.children);
+            } else {
+              delete item.children;
+            }
+          });
+        };
+        clearChiildren(data);
+        this.areaData = data;
+      });
+    },
+    onAreaCodeChange(value) {
+      this.loading = true;
+      this.$api
+        .houseZoneAutoIncrement({ code: value[value.length - 1] })
+        .then(({ data }) => {
+          this.$set(this.form, 'name', `片区${numberToChinese(data)}`);
+        })
+        .catch(() => {
+          this.form.areaCode = [];
+        })
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+  },
+};
+</script>
--- a/Web/src/pages/business/house/zone/index.vue
+++ b/Web/src/pages/business/house/zone/index.vue
@@ -0,0 +1,286 @@
+<template>
+  <!-- 
+    普通树查询表格
+    v 1.2
+    2021-04-30
+    Lufthafen
+  -->
+  <yo-tree-layout
+    :load-data="loadTreeData"
+    @select="onSelect"
+    default-expanded-keys
+    ref="tree-layout"
+  >
+    <container>
+      <a-card :bordered="false">
+        <yo-table
+          :columns="columns"
+          :load-data="loadData"
+          @query="onQuery"
+          @resetQuery="onResetQuery"
+          ref="table"
+        >
+          <Auth auth="authCode:page" slot="query">
+            <!-- 此处添加查询表单控件 -->
+            <!-- ... -->
+          </Auth>
+          <Auth auth="houseZone:add" slot="operator">
+            <a-button @click="onOpen('add-form')" icon="plus">新增片区</a-button>
+          </Auth>
+          <!-- 格式化字段内容 -->
+          <!-- ... -->
+          <!-- 添加操作控件 -->
+          <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>
+    </container>
+
+    <!-- 新增表单 -->
+    <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>
+  </yo-tree-layout>
+</template>
+<script>
+/* 需要引用YoTreeLayout组件 */
+import YoTreeLayout from '@/components/yoTreeLayout';
+import FormBody from './form';
+
+/* 在此管理整个页面需要的接口名称 */
+const api = {
+  tree: 'getOrgTree',
+  page: 'getOrgPage',
+  add: 'houseZoneAdd',
+  edit: 'testEditApi',
+  delete: 'testDeleteApi...',
+  /* ... */
+};
+
+export default {
+  components: {
+    YoTreeLayout,
+    FormBody,
+  },
+
+  data() {
+    return {
+      api,
+
+      name: '片区',
+
+      /* 查询条件 */
+      query: {},
+
+      /* 表格字段 */
+      columns: [
+        {
+          title: '片区名称',
+          width: '400px',
+          dataIndex: 'name',
+          sorter: true,
+        },
+        {
+          title: '唯一编码',
+          width: '200px',
+          dataIndex: 'code',
+          sorter: true,
+        },
+        {
+          title: '机构类型',
+          dataIndex: 'type',
+          sorter: true,
+          scopedSlots: { customRender: 'type' },
+        },
+        {
+          title: '排序',
+          width: '80px',
+          dataIndex: 'sort',
+          sorter: true,
+        },
+        {
+          title: '备注',
+          dataIndex: 'remark',
+          sorter: true,
+        },
+      ],
+
+      /* 字典编码储存格式 */
+      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-layout以示意数据接口
+     */
+    loadTreeData() {
+      return this.$api[api.tree]().then((res) => {
+        return res.data;
+      });
+    },
+
+    /**
+     * 树形选择界面必要的方法
+     * 选择树节点事件
+     */
+    onSelect([id]) {
+      /** 在选择事件中可以对右侧表格添加父节点id的查询条件 */
+      this.query = {
+        pid: id,
+      };
+      this.onQuery();
+    },
+
+    /**
+     * 必要的方法
+     * 传给yo-table以示意数据接口及其参数和返回的数据结构
+     */
+    loadData(params) {
+      return this.$api[api.page]({
+        ...params,
+        ...this.query,
+      }).then((res) => {
+        return res.data;
+      });
+    },
+
+    /**
+     * 有查询功能时的必要方法
+     * 加载数据时初始化分页信息
+     */
+    onQuery() {
+      this.$refs.table.onReloadData(true);
+    },
+
+    /**
+     * 必要方法
+     * 重新列表数据
+     */
+    onResetQuery() {
+      /* 与普通查询页不同的是,这里的父节点参数不应该在重置后被清空 */
+      Object.keys(this.query).forEach((p) => {
+        if (p !== 'pid') {
+          this.query[p] = undefined;
+        }
+      });
+      this.onQuery();
+    },
+
+    /**
+     * 必要方法
+     * 重新列表数据
+     */
+    onReloadData() {
+      this.$refs.table.onReloadData();
+      this.$refs['tree-layout'].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,
+        pid: this.query.pid,
+        /* 按需添加其他参数 */
+        /* ... */
+      });
+    },
+
+    /**
+     * 必要方法
+     * 可以用做一系列操作的公共回调,此方法中会重新加载当前列表
+     */
+    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();
+        });
+    },
+  },
+};
+</script>
--- a/Web/src/pages/system/menu/form.vue
+++ b/Web/src/pages/system/menu/form.vue
@@ -102,7 +102,7 @@
          </a-form-model-item>
          <!-- 图标只有[按钮]不可用 -->
          <a-form-model-item label="图标" v-if="form.type != 2">
-            <a-input :disabled="true" placeholder="请选择图标" v-model="form.icon">
+            <a-input allow-clear placeholder="请选择图标" v-model="form.icon">
              <a-icon :type="form.icon" slot="addonBefore" v-if="form.icon" />
              <a-icon @click="onOpenSelectIcon" slot="addonAfter" type="setting" />
            </a-input>
--- a/Web/src/util/format/index.js
+++ b/Web/src/util/format/index.js
@@ -0,0 +1,19 @@
+export const numberToChinese = (val) => {
+    const num = parseInt(val)
+    const changeNum = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九']
+    const unit = ['', '十', '百', '千', '万']
+    const getWan = (temp) => {
+        const strArr = temp.toString().split('').reverse()
+        let newNum = ''
+        for (var i = 0; i < strArr.length; i++) {
+            newNum = (i == 0 && strArr[i] == 0 ? '' : i > 0 && strArr[i] == 0 && strArr[i - 1] == 0 ? '' : changeNum[strArr[i]] + (strArr[i] == 0 ? unit[0] : unit[i])) + newNum
+        }
+        return newNum
+    }
+    const overWan = Math.floor(num / 10000)
+    let noWan = num % 10000
+    if (noWan.toString().length < 4) noWan = '0' + noWan
+
+    const chinanum = overWan ? getWan(overWan) + '万' + getWan(noWan) : getWan(num)
+    return chinanum
+}
--- a/Web/src/views/main/_layout/header/index.vue
+++ b/Web/src/views/main/_layout/header/index.vue
@@ -13,7 +13,6 @@
        <search :menus="nav.content" />
      </div>
      <div class="header-actions">
-        <User />
        <a @click="$emit('reload')" class="header-action">
          <a-icon type="reload" />
        </a>
@@ -25,6 +24,7 @@
        <a @click="$emit('setting')" class="header-action">
          <a-icon type="setting" />
        </a>
+        <User />
      </div>
    </section>
    <container v-else-if="$root.global.settings.layout === 'top-nav'">
@@ -36,7 +36,6 @@
        <search :menus="nav.content" />
      </div>
      <div class="header-actions">
-        <User />
        <a @click="$emit('reload')" class="header-action">
          <a-icon type="reload" />
        </a>
@@ -48,6 +47,7 @@
        <a @click="$emit('setting')" class="header-action">
          <a-icon type="setting" />
        </a>
+        <User />
      </div>
      <a-drawer
        :body-style="{ padding: 0 }"
--- a/Web/src/views/main/_layout/header/user.js
+++ b/Web/src/views/main/_layout/header/user.js
@@ -47,8 +47,8 @@ export default {
            this.$confirm({
                title: '提示',
                content: '是否确定退出登录',
-                onOk: () => {
-                    doLogout()
+                onOk: async () => {
+                    await doLogout()
                },
                onCancel() {
                }