update 区域增加树结构显示

2021-05-21 17:45:50 +08:00
parent c8530039eb
commit 179843f98e
7 changed files with 130 additions and 74 deletions
--- a/Api/Ewide.Core/Controller/AreaCodeController.cs
+++ b/Api/Ewide.Core/Controller/AreaCodeController.cs
@@ -79,9 +79,9 @@ namespace Ewide.Core.Controller
        /// </summary>
        /// <returns></returns>
        [HttpGet("/sysArea/tree")]
-        public async Task<List<AreaTreeNode>> GetAreaCodeTree()
+        public async Task<List<AreaTreeNode>> GetAreaCodeTree([FromQuery]int? level)
        {
-            return await _areaCodeService.GetAreaCodeTree();
+            return await _areaCodeService.GetAreaCodeTree(level);
        }
    }
 }
--- a/Api/Ewide.Core/Ewide.Core.xml
+++ b/Api/Ewide.Core/Ewide.Core.xml
@@ -348,7 +348,7 @@
            <param name="input"></param>
            <returns></returns>
        </member>
-        <member name="M:Ewide.Core.Controller.AreaCodeController.GetAreaCodeTree">
+        <member name="M:Ewide.Core.Controller.AreaCodeController.GetAreaCodeTree(System.Nullable{System.Int32})">
            <summary>
            获取目录树
            </summary>
@@ -3016,7 +3016,7 @@
            <param name="code">区域代码</param>
            <returns></returns>
        </member>
-        <member name="M:Ewide.Core.Service.Area.AreaCodeService.GetAreaCodeTree">
+        <member name="M:Ewide.Core.Service.Area.AreaCodeService.GetAreaCodeTree(System.Nullable{System.Int32})">
            <summary>
            获取区域目录树
            </summary>
--- a/Api/Ewide.Core/Service/Area/AreaCodeService.cs
+++ b/Api/Ewide.Core/Service/Area/AreaCodeService.cs
@@ -71,12 +71,13 @@ namespace Ewide.Core.Service.Area
        /// 获取区域目录树
        /// </summary>
        /// <returns></returns>
-        public async Task<List<AreaTreeNode>> GetAreaCodeTree()
+        public async Task<List<AreaTreeNode>> GetAreaCodeTree(int? level)
        {
+            level = level.GetValueOrDefault(100);
            var cachedAreaCodes = await _sysCacheService.GetAreaCode();
            if (cachedAreaCodes == null || cachedAreaCodes.Count < 0)
            {
-                cachedAreaCodes = await _areaCodeRep.DetachedEntities.ToListAsync();
+                cachedAreaCodes = await _areaCodeRep.DetachedEntities.Where(p => p.LevelType <= level).ToListAsync();
                await _sysCacheService.SetAreaCode(cachedAreaCodes);
            }
            return new TreeBuildUtil<AreaTreeNode>().DoTreeBuild(cachedAreaCodes.Select(u => new AreaTreeNode
@@ -99,9 +100,10 @@ namespace Ewide.Core.Service.Area
        {
            var AreaCodes = await _areaCodeRep.DetachedEntities
                .Where(input.LevelType.HasValue, a => a.LevelType == input.LevelType)
-                .Where(!string.IsNullOrEmpty(input.Code), a => a.Code.StartsWith(input.Code))
-                .Where(!string.IsNullOrEmpty(input.AdCode), a => a.AdCode.StartsWith(input.AdCode))
-                .Where(!string.IsNullOrEmpty(input.Name), a => a.Name.StartsWith(input.Name))
+                .Where(!string.IsNullOrEmpty(input.Code), a => a.Code.Contains(input.Code))
+                .Where(!string.IsNullOrEmpty(input.AdCode), a => a.AdCode.Contains(input.AdCode))
+                .Where(!string.IsNullOrEmpty(input.Name), a => a.Name.Contains(input.Name))
+                .Where(!string.IsNullOrEmpty(input.Pcode), a => a.Code.StartsWith(input.Pcode))
                .ToPageData(input);
            return XnPageResult<SysAreaCode>.PageResult(AreaCodes);
        }
--- a/Api/Ewide.Core/Service/Area/Dto/AreaCodeInput.cs
+++ b/Api/Ewide.Core/Service/Area/Dto/AreaCodeInput.cs
@@ -15,6 +15,7 @@ namespace Ewide.Core.Service.Area.Dto
        public int? LevelType { get; set; }
        public string Note { get; set; }
        public int Sort { get; set; }
+        public string Pcode { get; set; }
    }
    public class UpdateAreaCodeInput
    {
--- a/Api/Ewide.Core/Service/Area/IAreaCodeService.cs
+++ b/Api/Ewide.Core/Service/Area/IAreaCodeService.cs
@@ -16,7 +16,7 @@ namespace Ewide.Core.Service.Area
        Task<SysAreaCode> GetAreaCode(string code);
        Task<List<SysAreaCode>> GetAreaCodeWithChildren(string code);

-        Task<List<AreaTreeNode>> GetAreaCodeTree();
+        Task<List<AreaTreeNode>> GetAreaCodeTree(int? level);

        Task<dynamic> QueryAreaCodePageList([FromQuery] AreaCodeInput input);
    }
--- a/Web/src/pages/system/area/form.vue
+++ b/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>
--- a/Web/src/pages/system/area/index.vue
+++ b/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>