update 区域增加树结构显示

Web/src/pages/system/area/form.vue

@@ -11,8 +11,8 @@
       <div class="yo-form-group">
         <!-- 表单控件 -->
         <!-- ... -->
-        <a-form-model-item label="参数类型" prop="levelType">
-          <a-select :disabled="exist" placeholder="请选择参数类型" v-model="form.levelType">
+        <a-form-model-item label="区域类型" prop="levelType">
+          <a-select :disabled="exist" placeholder="请选择区域类型" v-model="form.levelType">
             <a-select-option
               :key="i"
               :value="item.code"
@@ -21,25 +21,31 @@
             <a-icon slot="suffixIcon" type="lock" v-if="exist" />
           </a-select>
         </a-form-model-item>
-        <a-form-model-item label="名称" prop="name">
+        <a-form-model-item label="区域名称" prop="name">
           <a-input placeholder="请输入区域名称" v-model="form.name" />
         </a-form-model-item>
-        <a-form-model-item label="编码" prop="code">
-          <a-input :disabled="exist" placeholder="请输入参数编码" v-model="form.code">
+        <a-form-model-item prop="code">
+          <span slot="label">
+            区域编码
+            <a-tooltip title="用于系统内部使用，添加后不可更改">
+              <a-icon theme="twoTone" type="info-circle" />
+            </a-tooltip>
+          </span>
+          <a-input :disabled="exist" placeholder="请输入区域编码" v-model="form.code">
             <a-icon slot="suffix" type="lock" v-if="exist" />
           </a-input>
         </a-form-model-item>
-        <a-form-model-item label="区域编码" prop="adCode">
-          <a-input placeholder="请输入显示编码" v-model="form.adCode" />
+        <a-form-model-item prop="adCode">
+          <span slot="label">
+            行政编码
+            <a-tooltip title="国家规定的区划代码，可随实际情况更改而更改">
+              <a-icon theme="twoTone" type="info-circle" />
+            </a-tooltip>
+          </span>
+          <a-input placeholder="请输入行政编码" v-model="form.adCode" />
         </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-input-number :min="0" class="w-100-p" placeholder="请输入排序" v-model="form.sort" />
         </a-form-model-item>
         <a-form-model-item label="备注" prop="note">
           <a-textarea :rows="4" placeholder="请输入备注" v-model="form.note"></a-textarea>

Web/src/pages/system/area/index.vue

@@ -1,47 +1,60 @@
 <template>
   <!-- 
-    普通查询表格
+    普通树查询表格
     v 1.2
     2021-04-30
     Lufthafen
   -->
-  <container>
-    <br />
-    <a-card :bordered="false">
-      <yo-table :columns="columns" :load-data="loadData" @query="onQuery" @resetQuery="onResetQuery" ref="table">
-        <Auth auth="sysArea: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>
-        <Auth auth="sysArea:add" slot="operator">
-          <a-button @click="onOpen('add-form')" icon="plus">新增区域编码</a-button>
-        </Auth>
-        <!-- 格式化字段内容 -->
-        <!-- ... -->
-        <span slot="levelType" slot-scope="text">{{ bindCodeValue(text, 'levelType') }}</span>
-        <!-- 添加操作控件 -->
-        <span slot="action" slot-scope="text, record">
-          <yo-table-actions>
-            <Auth auth="sysArea:edit">
-              <a @click="onOpen('edit-form', record)">编辑</a>
-            </Auth>
-            <Auth auth="sysArea:delete">
-              <a-popconfirm @confirm="onDelete(record)" placement="topRight" title="是否确认删除">
-                <a>删除</a>
-              </a-popconfirm>
-            </Auth>
-            <!-- 可在此处添加其他操作控件 -->
+  <yo-tree-layout
+    :load-data="loadTreeData"
+    :replace-fields="{ value: 'code',title: 'name',children: 'children' }"
+    @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="sysArea:page" slot="query">
+            <!-- 此处添加查询表单控件 -->
             <!-- ... -->
-          </yo-table-actions>
-        </span>
-      </yo-table>
-    </a-card>
+            <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>
+          <Auth auth="sysArea:add" slot="operator">
+            <a-button @click="onOpen('add-form')" icon="plus">新增区域编码</a-button>
+          </Auth>
+          <!-- 格式化字段内容 -->
+          <!-- ... -->
+          <span slot="levelType" slot-scope="text">{{ bindCodeValue(text, 'levelType') }}</span>
+          <!-- 添加操作控件 -->
+          <span slot="action" slot-scope="text, record">
+            <yo-table-actions>
+              <Auth auth="sysArea:edit">
+                <a @click="onOpen('edit-form', record)">编辑</a>
+              </Auth>
+              <Auth auth="sysArea: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">
@@ -52,13 +65,16 @@
     <yo-modal-form :action="$api[api.edit]" :title="'编辑' + name" @ok="onReloadData" ref="edit-form">
       <form-body />
     </yo-modal-form>
-  </container>
+  </yo-tree-layout>
 </template>
 <script>
+/* 需要引用YoTreeLayout组件 */
+import YoTreeLayout from '@/components/yoTreeLayout';
 import FormBody from './form';
 
 /* 在此管理整个页面需要的接口名称 */
 const api = {
+  tree: 'getAreaTree',
   page: 'sysAreaPage',
   add: 'sysAreaAdd',
   edit: 'sysAreaEdit',
@@ -68,8 +84,10 @@ const api = {
 
 export default {
   components: {
+    YoTreeLayout,
     FormBody,
   },
+
   data() {
     return {
       api,
@@ -82,23 +100,23 @@ export default {
       /* 表格字段 */
       columns: [
         {
-          title: '参数类型',
+          title: '区域类型',
           dataIndex: 'levelType',
           scopedSlots: { customRender: 'levelType' },
           sorter: true,
         },
         {
-          title: '参数名称',
+          title: '区域名称',
           dataIndex: 'name',
           sorter: true,
         },
         {
-          title: '参数编号',
+          title: '区域编号',
           dataIndex: 'code',
           sorter: true,
         },
         {
-          title: '区域编号',
+          title: '行政编号',
           dataIndex: 'adCode',
           sorter: true,
         },
@@ -108,7 +126,7 @@ export default {
           sorter: true,
         },
         {
-          title: '序号',
+          title: '排序',
           dataIndex: 'sort',
           sorter: true,
         },
@@ -120,8 +138,8 @@ export default {
       },
     };
   },
+
   created() {
-    /** 按需加载字典编码 */
     this.onLoadCodes();
 
     /** 根据权限添加操作列 */
@@ -135,7 +153,30 @@ export default {
       });
     }
   },
+
   methods: {
+    /**
+     * 树形选择界面必要的方法
+     * 传给yo-table-layout以示意数据接口
+     */
+    loadTreeData() {
+      return this.$api[api.tree]({ level: 3 }).then((res) => {
+        return res.data;
+      });
+    },
+
+    /**
+     * 树形选择界面必要的方法
+     * 选择树节点事件
+     */
+    onSelect([code]) {
+      /** 在选择事件中可以对右侧表格添加父节点code的查询条件 */
+      this.query = {
+        pcode: code,
+      };
+      this.onQuery();
+    },
+
     /**
      * 必要的方法
      * 传给yo-table以示意数据接口及其参数和返回的数据结构
@@ -162,12 +203,16 @@ export default {
     },
 
     /**
-     * 有查询功能时的必要方法
-     * 重置查询条件
+     * 必要方法
+     * 重新列表数据
      */
     onResetQuery() {
-      /** 在这里重置查询条件时,可对特殊的字段做保留处理 */
-      this.query = {};
+      /* 与普通查询页不同的是,这里的父节点参数不应该在重置后被清空 */
+      Object.keys(this.query).forEach((p) => {
+        if (p !== 'pcode') {
+          this.query[p] = undefined;
+        }
+      });
       this.onQuery();
     },
 
@@ -177,6 +222,7 @@ export default {
      */
     onReloadData() {
       this.$refs.table.onReloadData();
+      this.$refs['tree-layout'].onReloadData();
     },
 
     /**
@@ -209,12 +255,13 @@ export default {
     },
 
     /**
-     * 必要方法
+     * 有编辑新增功能的必要方法
      * 从列表页调用窗口的打开方法
      */
     onOpen(formName, record) {
       this.$refs[formName].onOpen({
         record,
+        pcode: this.query.pcode,
         /* 按需添加其他参数 */
         /* ... */
       });
@@ -247,4 +294,4 @@ export default {
     },
   },
 };
-</script>
+</script>