系统管理页面样式

2021-09-18 13:36:08 +08:00
parent ed25e34172
commit 87d7023dc1
12 changed files with 1647 additions and 1548 deletions
@@ -1,195 +1,204 @@
 <template>
-  <a-card :bordered="false">
-    <!-- 查询区域 -->
-    <div class="table-page-search-wrapper">
-      <a-form layout="inline" @keyup.enter.native="searchQuery">
-        <a-row :gutter="24">
-          <a-col :xl="6" :lg="7" :md="8" :sm="24">
-            <a-form-item label="表名">
-              <a-input placeholder="请输入表名" v-model="queryParam.tableName"></a-input>
-            </a-form-item>
-          </a-col>
-          <a-col :xl="6" :lg="7" :md="8" :sm="24">
-            <a-form-item label="字段名">
-              <a-input placeholder="请输入字段名" v-model="queryParam.fieldName"></a-input>
-            </a-form-item>
-          </a-col>
-          <a-col :xl="6" :lg="7" :md="8" :sm="24">
-            <a-form-item label="混淆码">
-              <a-input placeholder="请输入混淆码" v-model="queryParam.confusionCode"></a-input>
-            </a-form-item>
-          </a-col>
-          <a-col :xl="6" :lg="7" :md="8" :sm="24">
+  <div>
+    <page-header-title :img-for-icon="IconImg"></page-header-title>
+    <a-card :bordered="false">
+      <!-- 查询区域 -->
+      <div class="table-page-search-wrapper">
+        <a-form layout="inline" @keyup.enter.native="searchQuery">
+          <a-row :gutter="24">
+            <a-col :xl="6" :lg="7" :md="8" :sm="24">
+              <a-form-item label="表名">
+                <a-input placeholder="请输入表名" v-model="queryParam.tableName"></a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :xl="6" :lg="7" :md="8" :sm="24">
+              <a-form-item label="字段名">
+                <a-input placeholder="请输入字段名" v-model="queryParam.fieldName"></a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :xl="6" :lg="7" :md="8" :sm="24">
+              <a-form-item label="混淆码">
+                <a-input placeholder="请输入混淆码" v-model="queryParam.confusionCode"></a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
-          </a-col>
-        </a-row>
-      </a-form>
-    </div>
-    <!-- 查询区域-END -->
+            </a-col>
+          </a-row>
+        </a-form>
+      </div>
+      <!-- 查询区域-END -->

-    <!-- 操作按钮区域 -->
-    <div class="table-operator">
-      <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
-      <a-button type="primary" icon="download" @click="handleExportXls('混淆表')">导出</a-button>
-      <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
-        <a-button type="primary" icon="import">导入</a-button>
-      </a-upload>
-      <!-- 高级查询区域 -->
-<!--      <a-dropdown v-if="selectedRowKeys.length > 0">-->
-<!--        <a-menu slot="overlay">-->
-<!--          <a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item>-->
-<!--        </a-menu>-->
-<!--        <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>-->
-<!--      </a-dropdown>-->
-    </div>
+      <!-- 操作按钮区域 -->
+      <div class="table-operator">
+        <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
+        <a-button type="primary" icon="download" @click="handleExportXls('混淆表')">导出</a-button>
+        <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl"
+                  @change="handleImportExcel">
+          <a-button type="primary" icon="import">导入</a-button>
+        </a-upload>
+        <!-- 高级查询区域 -->
+        <!--      <a-dropdown v-if="selectedRowKeys.length > 0">-->
+        <!--        <a-menu slot="overlay">-->
+        <!--          <a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item>-->
+        <!--        </a-menu>-->
+        <!--        <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>-->
+        <!--      </a-dropdown>-->
+      </div>

-    <!-- table区域-begin -->
-    <div>
-<!--      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">-->
-<!--        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项-->
-<!--        <a style="margin-left: 24px" @click="onClearSelected">清空</a>-->
-<!--      </div>-->
+      <!-- table区域-begin -->
+      <div>
+        <!--      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">-->
+        <!--        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项-->
+        <!--        <a style="margin-left: 24px" @click="onClearSelected">清空</a>-->
+        <!--      </div>-->

-      <a-table
-        ref="table"
-        size="middle"
-        bordered
-        rowKey="id"
-        :columns="columns"
-        :dataSource="dataSource"
-        :pagination="ipagination"
-        :loading="loading"
-        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
-        class="j-table-force-nowrap"
-        @change="handleTableChange">
+        <a-table
+          ref="table"
+          size="middle"
+          bordered
+          rowKey="id"
+          :columns="columns"
+          :dataSource="dataSource"
+          :pagination="ipagination"
+          :loading="loading"
+          :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
+          class="j-table-force-nowrap"
+          @change="handleTableChange">

-        <template slot="htmlSlot" slot-scope="text">
-          <div v-html="text"></div>
-        </template>
-        <template slot="imgSlot" slot-scope="text">
-          <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
-          <img v-else :src="getImgView(text)" height="25px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/>
-        </template>
-        <template slot="fileSlot" slot-scope="text">
-          <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
-          <a-button
-            v-else
-            :ghost="true"
-            type="primary"
-            icon="download"
-            size="small"
-            @click="downloadFile(text)">
-            下载
-          </a-button>
-        </template>
-        <template slot="text" slot-scope="text">
-          <j-ellipsis v-if="text" :value="text" :length="20"></j-ellipsis>
-          <span v-else></span>
-        </template>
-        <span slot="action" slot-scope="text, record" class="action-span-cell">
+          <template slot="htmlSlot" slot-scope="text">
+            <div v-html="text"></div>
+          </template>
+          <template slot="imgSlot" slot-scope="text">
+            <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
+            <img v-else :src="getImgView(text)" height="25px" alt=""
+                 style="max-width:80px;font-size: 12px;font-style: italic;"/>
+          </template>
+          <template slot="fileSlot" slot-scope="text">
+            <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
+            <a-button
+              v-else
+              :ghost="true"
+              type="primary"
+              icon="download"
+              size="small"
+              @click="downloadFile(text)">
+              下载
+            </a-button>
+          </template>
+          <template slot="text" slot-scope="text">
+            <j-ellipsis v-if="text" :value="text" :length="20"></j-ellipsis>
+            <span v-else></span>
+          </template>
+          <span slot="action" slot-scope="text, record" class="action-span-cell">
          <a @click="handleEdit(record)">编辑</a>
          <a @click="handleDelete(record.id)">删除</a>
        </span>

-      </a-table>
-    </div>
+        </a-table>
+      </div>

-    <sys-confusion-modal ref="modalForm" @ok="modalFormOk"></sys-confusion-modal>
-  </a-card>
+      <sys-confusion-modal ref="modalForm" @ok="modalFormOk"></sys-confusion-modal>
+    </a-card>
+  </div>
 </template>

 <script>

-  import '@/assets/less/TableExpand.less'
-  import { mixinDevice } from '@/utils/mixin'
-  import { JeroListMixin } from '@/mixins/JeroListMixin'
-  import SysConfusionModal from './modules/SysConfusionModal'
-  import JEllipsis from '@comp/jero/JEllipsis'
+import '@/assets/less/TableExpand.less'
+import { mixinDevice } from '@/utils/mixin'
+import { JeroListMixin } from '@/mixins/JeroListMixin'
+import SysConfusionModal from './modules/SysConfusionModal'
+import JEllipsis from '@comp/jero/JEllipsis'
+import IconImg from '@/assets/imgs/icon/icon_system.png'
+import PageHeaderTitle from '../../components/layouts/PageHeaderTitle'

-  export default {
-    name: 'SysConfusionList',
-    mixins:[JeroListMixin, mixinDevice],
-    components: {
-      SysConfusionModal,
-      JEllipsis
-    },
-    data () {
-      return {
-        description: '混淆表管理页面',
-        // 表头
-        columns: [
-          {
-            title: '序号',
-            dataIndex: '',
-            key:'rowIndex',
-            width:60,
-            align:'center',
-            customRender:function (t,r,index) {
-              return parseInt(index)+1
-            }
-          },
-          {
-            title:'表名',
-            align:'center',
-            dataIndex: 'tableName',
-            scopedSlots: { customRender: 'text' }
-          },
-          {
-            title:'字段名',
-            align:'center',
-            dataIndex: 'fieldName',
-            scopedSlots: { customRender: 'text' }
-          },
-          {
-            title:'混淆码',
-            align:'center',
-            dataIndex: 'confusionCode',
-            scopedSlots: { customRender: 'text' }
-          },
-          {
-            title: '操作',
-            dataIndex: 'action',
-            align:'center',
-            fixed:'right',
-            width:147,
-            scopedSlots: { customRender: 'action' }
+export default {
+  name: 'SysConfusionList',
+  mixins: [JeroListMixin, mixinDevice],
+  components: {
+    SysConfusionModal,
+    JEllipsis,
+    PageHeaderTitle
+  },
+  data() {
+    return {
+      IconImg,
+      description: '混淆表管理页面',
+      // 表头
+      columns: [
+        {
+          title: '序号',
+          dataIndex: '',
+          key: 'rowIndex',
+          width: 60,
+          align: 'center',
+          customRender: function (t, r, index) {
+            return parseInt(index) + 1
          }
-        ],
-        url: {
-          list: '/sys/confusion/page',
-          delete: '/sys/confusion/delete',
-          deleteBatch: '/sys/confusion/deleteBatch',
-          exportXlsUrl: '/sys/confusion/exportXls',
-          importExcelUrl: '/sys/confusion/importExcel',
-
        },
-        dictOptions:{},
-        superFieldList:[],
-      }
-    },
-    created() {
+        {
+          title: '表名',
+          align: 'center',
+          dataIndex: 'tableName',
+          scopedSlots: { customRender: 'text' }
+        },
+        {
+          title: '字段名',
+          align: 'center',
+          dataIndex: 'fieldName',
+          scopedSlots: { customRender: 'text' }
+        },
+        {
+          title: '混淆码',
+          align: 'center',
+          dataIndex: 'confusionCode',
+          scopedSlots: { customRender: 'text' }
+        },
+        {
+          title: '操作',
+          dataIndex: 'action',
+          align: 'center',
+          fixed: 'right',
+          width: 147,
+          scopedSlots: { customRender: 'action' }
+        }
+      ],
+      url: {
+        list: '/sys/confusion/page',
+        delete: '/sys/confusion/delete',
+        deleteBatch: '/sys/confusion/deleteBatch',
+        exportXlsUrl: '/sys/confusion/exportXls',
+        importExcelUrl: '/sys/confusion/importExcel'
+
+      },
+      dictOptions: {},
+      superFieldList: []
+    }
+  },
+  created() {
    this.getSuperFieldList()
+  },
+  computed: {
+    importExcelUrl: function () {
+      return `${ window._CONFIG['domianURL'] }/${ this.url.importExcelUrl }`
+    }
+  },
+  methods: {
+    initDictConfig() {
    },
-    computed: {
-      importExcelUrl: function(){
-        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
-      },
-    },
-    methods: {
-      initDictConfig(){
-      },
-      getSuperFieldList(){
-        let fieldList=[]
-        fieldList.push({type:'string',value:'confusionType',text:'混淆类型',dictCode:''})
-        fieldList.push({type:'string',value:'confusionName',text:'表名或字段名',dictCode:''})
-        this.superFieldList = fieldList
-      }
+    getSuperFieldList() {
+      let fieldList = []
+      fieldList.push({ type: 'string', value: 'confusionType', text: '混淆类型', dictCode: '' })
+      fieldList.push({ type: 'string', value: 'confusionName', text: '表名或字段名', dictCode: '' })
+      this.superFieldList = fieldList
    }
  }
+}
 </script>
 <style scoped>
-  @import '~@assets/less/common.less';
+@import '~@assets/less/common.less';
 </style>
@@ -1,179 +1,194 @@
 <template xmlns:background-color="http://www.w3.org/1999/xhtml">
-  <a-row :gutter="10">
-    <a-col :md="10" :sm="24" >
-      <a-card :bordered="false" style="padding: 12px 0;">
-        <!-- 按钮操作区域 -->
-        <a-row style="margin-left: 14px" class="table-operator">
-          <a-button @click="handleAdd(1)" type="primary">新增</a-button>
-          <a-button @click="handleAdd(2)" type="primary">添加下级</a-button>
-          <a-button type="primary" icon="download" @click="handleExportXls('部门信息')">导出</a-button>
-          <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
-            <a-button type="primary" icon="import">导入</a-button>
-          </a-upload>
-          <a-button @click="batchDel" type="danger" icon="delete">批量删除</a-button>
-          <!--<a-button @click="refresh" type="default" icon="reload" :loading="loading">刷新</a-button>-->
-        </a-row>
-        <div style="background: #fff;padding-left:16px;height: 100%; margin-top: 5px">
-          <a-alert type="info" :showIcon="true">
-            <div slot="message">
-              当前选择：<span v-if="this.currSelected.title">{{ getCurrSelectedTitle() }}</span>
-              <a v-if="this.currSelected.title" style="margin-left: 10px" @click="onClearSelected">取消选择</a>
-            </div>
-          </a-alert>
-          <a-input-search @search="onSearch" style="width:100%;margin-top: 10px" placeholder="请输入部门名称"/>
-          <!-- 树-->
-          <a-col :md="10" :sm="24">
-            <template>
-              <a-dropdown :trigger="[this.dropTrigger]" @visibleChange="dropStatus">
+  <div>
+    <page-header-title :img-for-icon="IconImg"></page-header-title>
+    <a-row :gutter="10">
+      <a-col :md="10" :sm="24">
+        <a-card :bordered="false" style="padding: 12px 0;">
+          <!-- 按钮操作区域 -->
+          <a-row style="margin-left: 14px" class="table-operator">
+            <a-button @click="handleAdd(1)" type="primary">新增</a-button>
+            <a-button @click="handleAdd(2)" type="primary">添加下级</a-button>
+            <a-button type="primary" icon="download" @click="handleExportXls('部门信息')">导出</a-button>
+            <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader"
+                      :action="importExcelUrl" @change="handleImportExcel">
+              <a-button type="primary" icon="import">导入</a-button>
+            </a-upload>
+            <a-button @click="batchDel" type="danger" icon="delete">批量删除</a-button>
+            <!--<a-button @click="refresh" type="default" icon="reload" :loading="loading">刷新</a-button>-->
+          </a-row>
+          <div style="background: #fff;padding-left:16px;height: 100%; margin-top: 5px">
+            <a-alert type="info" :showIcon="true">
+              <div slot="message">
+                当前选择：<span v-if="this.currSelected.title">{{ getCurrSelectedTitle() }}</span>
+                <a v-if="this.currSelected.title" style="margin-left: 10px" @click="onClearSelected">取消选择</a>
+              </div>
+            </a-alert>
+            <a-input-search @search="onSearch" style="width:100%;margin-top: 10px" placeholder="请输入部门名称"/>
+            <!-- 树-->
+            <a-col :md="10" :sm="24">
+              <template>
+                <a-dropdown :trigger="[this.dropTrigger]" @visibleChange="dropStatus">
               <span style="user-select: none">
            <a-tree
-                checkable
-                multiple
-                @select="onSelect"
-                @check="onCheck"
-                @rightClick="rightHandle"
-                :selectedKeys="selectedKeys"
-                :checkedKeys="checkedKeys"
-                :treeData="departTree"
-                :checkStrictly="checkStrictly"
-                :expandedKeys="iExpandedKeys"
-                :autoExpandParent="autoExpandParent"
-                @expand="onExpand"/>
+              checkable
+              multiple
+              @select="onSelect"
+              @check="onCheck"
+              @rightClick="rightHandle"
+              :selectedKeys="selectedKeys"
+              :checkedKeys="checkedKeys"
+              :treeData="departTree"
+              :checkStrictly="checkStrictly"
+              :expandedKeys="iExpandedKeys"
+              :autoExpandParent="autoExpandParent"
+              @expand="onExpand"/>
                </span>
-                <!--新增右键点击事件,和增加添加和删除功能-->
-                <a-menu slot="overlay">
-                  <a-menu-item @click="handleAdd(3)" key="1">添加</a-menu-item>
-                  <a-menu-item @click="handleDelete" key="2">删除</a-menu-item>
-                  <a-menu-item @click="closeDrop" key="3">取消</a-menu-item>
-                </a-menu>
-              </a-dropdown>
-            </template>
-          </a-col>
+                  <!--新增右键点击事件,和增加添加和删除功能-->
+                  <a-menu slot="overlay">
+                    <a-menu-item @click="handleAdd(3)" key="1">添加</a-menu-item>
+                    <a-menu-item @click="handleDelete" key="2">删除</a-menu-item>
+                    <a-menu-item @click="closeDrop" key="3">取消</a-menu-item>
+                  </a-menu>
+                </a-dropdown>
+              </template>
+            </a-col>
+          </div>
+        </a-card>
+        <!---- author:os_chengtgen -- date:20190827 --  for:切换父子勾选模式 =======------>
+        <div class="drawer-bootom-button">
+          <a-dropdown :trigger="['click']" placement="topCenter">
+            <a-menu slot="overlay">
+              <!--<a-menu-item key="1" @click="switchCheckStrictly(1)">父子关联</a-menu-item>-->
+              <!--<a-menu-item key="2" @click="switchCheckStrictly(2)">取消关联</a-menu-item>-->
+              <a-menu-item key="3" @click="checkALL">全部勾选</a-menu-item>
+              <a-menu-item key="4" @click="cancelCheckALL">取消全选</a-menu-item>
+              <a-menu-item key="5" @click="expandAll">展开所有</a-menu-item>
+              <a-menu-item key="6" @click="closeAll">合并所有</a-menu-item>
+            </a-menu>
+            <a-button>
+              树操作
+              <a-icon type="up"/>
+            </a-button>
+          </a-dropdown>
        </div>
-      </a-card>
-      <!---- author:os_chengtgen -- date:20190827 --  for:切换父子勾选模式 =======------>
-      <div class="drawer-bootom-button">
-        <a-dropdown :trigger="['click']" placement="topCenter">
-          <a-menu slot="overlay">
-            <!--<a-menu-item key="1" @click="switchCheckStrictly(1)">父子关联</a-menu-item>-->
-            <!--<a-menu-item key="2" @click="switchCheckStrictly(2)">取消关联</a-menu-item>-->
-            <a-menu-item key="3" @click="checkALL">全部勾选</a-menu-item>
-            <a-menu-item key="4" @click="cancelCheckALL">取消全选</a-menu-item>
-            <a-menu-item key="5" @click="expandAll">展开所有</a-menu-item>
-            <a-menu-item key="6" @click="closeAll">合并所有</a-menu-item>
-          </a-menu>
-          <a-button>
-            树操作 <a-icon type="up" />
-          </a-button>
-        </a-dropdown>
-      </div>
-      <!---- author:os_chengtgen -- date:20190827 --  for:切换父子勾选模式 =======------>
-    </a-col>
-    <a-col :md="14" :sm="24" style="background: #fff;padding: 24px;">
-      <a-tabs defaultActiveKey="1" @change="callback">
-        <a-tab-pane tab="基本信息" key="1" >
-          <a-card :bordered="false" v-if="selectedKeys.length>0">
-            <a-form :form="form">
-              <a-form-item
+        <!---- author:os_chengtgen -- date:20190827 --  for:切换父子勾选模式 =======------>
+      </a-col>
+      <a-col :md="14" :sm="24" style="background: #fff;padding: 24px;">
+        <a-tabs defaultActiveKey="1" @change="callback">
+          <a-tab-pane tab="基本信息" key="1">
+            <a-card :bordered="false" v-if="selectedKeys.length>0">
+              <a-form :form="form">
+                <a-form-item
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                  label="机构名称">
-                <a-input placeholder="请输入机构/部门名称" @change="event => event.target.value = event.target.value.trim()" :maxLength="50" v-decorator="['departName', validatorRules.departName ]"/>
-              </a-form-item>
-              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="上级部门">
-                <a-tree-select
+                  <a-input placeholder="请输入机构/部门名称" @change="event => event.target.value = event.target.value.trim()"
+                           :maxLength="50" v-decorator="['departName', validatorRules.departName ]"/>
+                </a-form-item>
+                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="上级部门">
+                  <a-tree-select
                    style="width:100%"
                    :dropdownStyle="{maxHeight:'200px',overflow:'auto'}"
                    :treeData="treeData"
                    :disabled="disable"
                    v-model="model.parentId"
                    placeholder="无">
-                </a-tree-select>
-              </a-form-item>
-              <a-form-item
+                  </a-tree-select>
+                </a-form-item>
+                <a-form-item
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                  label="机构编码">
-                <a-input disabled placeholder="请输入机构编码" @change="event => event.target.value = event.target.value.trim()" :maxLength="50" v-decorator="['orgCode', validatorRules.orgCode ]"/>
-              </a-form-item>
-              <a-form-item
+                  <a-input disabled placeholder="请输入机构编码"
+                           @change="event => event.target.value = event.target.value.trim()" :maxLength="50"
+                           v-decorator="['orgCode', validatorRules.orgCode ]"/>
+                </a-form-item>
+                <a-form-item
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                  label="机构类型">
-                <template v-if="orgCategoryDisabled">
-                  <a-radio-group v-decorator="['orgCategory',validatorRules.orgCategory]" placeholder="请选择机构类型">
-                    <a-radio value="1">
-                      公司
-                    </a-radio>
-                  </a-radio-group>
-                </template>
-                <template v-else>
-                  <a-radio-group v-decorator="['orgCategory',validatorRules.orgCategory]" placeholder="请选择机构类型">
-                    <a-radio value="2">
-                      部门
-                    </a-radio>
-                    <a-radio value="3">
-                      岗位
-                    </a-radio>
-                  </a-radio-group>
-                </template>
-              </a-form-item>
-              <a-form-item
+                  <template v-if="orgCategoryDisabled">
+                    <a-radio-group v-decorator="['orgCategory',validatorRules.orgCategory]" placeholder="请选择机构类型">
+                      <a-radio value="1">
+                        公司
+                      </a-radio>
+                    </a-radio-group>
+                  </template>
+                  <template v-else>
+                    <a-radio-group v-decorator="['orgCategory',validatorRules.orgCategory]" placeholder="请选择机构类型">
+                      <a-radio value="2">
+                        部门
+                      </a-radio>
+                      <a-radio value="3">
+                        岗位
+                      </a-radio>
+                    </a-radio-group>
+                  </template>
+                </a-form-item>
+                <a-form-item
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                  label="排序">
-                <a-input-number :min="1" :max="99999" v-decorator="[ 'departOrder',{'initialValue':0}]"/>
-              </a-form-item>
-              <a-form-item
+                  <a-input-number :min="1" :max="99999" v-decorator="[ 'departOrder',{'initialValue':0}]"/>
+                </a-form-item>
+                <a-form-item
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                  label="手机号">
-                <a-input placeholder="请输入手机号" @change="event => event.target.value = event.target.value.trim()" :maxLength="50" v-decorator="['mobile', validatorRules.mobile]"/>
-              </a-form-item>
-              <a-form-item
+                  <a-input placeholder="请输入手机号" @change="event => event.target.value = event.target.value.trim()"
+                           :maxLength="50" v-decorator="['mobile', validatorRules.mobile]"/>
+                </a-form-item>
+                <a-form-item
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                  label="地址">
-                <a-input placeholder="请输入地址" @change="event => event.target.value = event.target.value.trim()" :maxLength="50" v-decorator="['address', {'initialValue':''}]"/>
-              </a-form-item>
-              <a-form-item
+                  <a-input placeholder="请输入地址" @change="event => event.target.value = event.target.value.trim()"
+                           :maxLength="50" v-decorator="['address', {'initialValue':''}]"/>
+                </a-form-item>
+                <a-form-item
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                  label="备注">
-                <a-textarea placeholder="请输入备注" @change="event => event.target.value = event.target.value.trim()" :maxLength="200" v-decorator="['memo', {'initialValue':''}]"/>
-              </a-form-item>
-            </a-form>
-            <div class="anty-form-btn">
-              <a-button @click="emptyCurrForm" type="default" htmlType="button" icon="sync">重置</a-button>
-              <a-button @click="submitCurrForm" :disabled="disabledStatus" type="primary" htmlType="button" icon="form">保存</a-button>
-            </div>
-          </a-card>
-          <a-card v-else :bordered="false" style="height:248px !important;">
-            <a-empty>
-              <span slot="description"> 请先选择一个部门! </span>
-            </a-empty>
-          </a-card>
-        </a-tab-pane>
-<!--        <a-tab-pane tab="部门权限" key="2" forceRender>-->
-<!--          <depart-auth-modules ref="departAuth"/>-->
-<!--        </a-tab-pane>-->
-<!--        <a-tab-pane tab="用户信息" key="3">-->
-<!--          <Dept-User-Info ref="DeptUserInfo"></Dept-User-Info>-->
-<!--        </a-tab-pane>-->
-      </a-tabs>
-    </a-col>
-    <depart-modal ref="departModal" @ok="loadTree"></depart-modal>
-  </a-row>
+                  <a-textarea placeholder="请输入备注" @change="event => event.target.value = event.target.value.trim()"
+                              :maxLength="200" v-decorator="['memo', {'initialValue':''}]"/>
+                </a-form-item>
+              </a-form>
+              <div class="anty-form-btn">
+                <a-button @click="emptyCurrForm" type="default" htmlType="button" icon="sync">重置</a-button>
+                <a-button @click="submitCurrForm" :disabled="disabledStatus" type="primary" htmlType="button"
+                          icon="form">保存
+                </a-button>
+              </div>
+            </a-card>
+            <a-card v-else :bordered="false" style="height:248px !important;">
+              <a-empty>
+                <span slot="description"> 请先选择一个部门! </span>
+              </a-empty>
+            </a-card>
+          </a-tab-pane>
+          <!--        <a-tab-pane tab="部门权限" key="2" forceRender>-->
+          <!--          <depart-auth-modules ref="departAuth"/>-->
+          <!--        </a-tab-pane>-->
+          <!--        <a-tab-pane tab="用户信息" key="3">-->
+          <!--          <Dept-User-Info ref="DeptUserInfo"></Dept-User-Info>-->
+          <!--        </a-tab-pane>-->
+        </a-tabs>
+      </a-col>
+      <depart-modal ref="departModal" @ok="loadTree"></depart-modal>
+    </a-row>
+  </div>
 </template>
 <script>
 import DepartModal from './modules/DepartModal'
 // import DeptUserInfo from './modules/DeptUserInfo'
 import pick from 'lodash.pick'
-import {queryDepartTreeList, searchByKeywords, deleteByDepartId} from '@/api/api'
-import {httpAction,getAction} from '@/api/manage'
-import {JeroListMixin} from '@/mixins/JeroListMixin'
+import { queryDepartTreeList, searchByKeywords, deleteByDepartId } from '@/api/api'
+import { httpAction, getAction } from '@/api/manage'
+import { JeroListMixin } from '@/mixins/JeroListMixin'
 // import DepartAuthModal from './modules/DepartAuthModal'
-import {checkDepartName} from '@/utils/validateOnly'
+import { checkDepartName } from '@/utils/validateOnly'
+import PageHeaderTitle from '../../components/layouts/PageHeaderTitle'
+import IconImg from '@/assets/imgs/icon/icon_system.png'
 // 表头
 const columns = [
  {
@@ -187,7 +202,7 @@ const columns = [
  },
  {
    title: '机构编码',
-    dataIndex: 'orgCode',
+    dataIndex: 'orgCode'
  },
  {
    title: '手机号',
@@ -210,7 +225,7 @@ const columns = [
    title: '操作',
    align: 'center',
    dataIndex: 'action',
-    scopedSlots: {customRender: 'action'}
+    scopedSlots: { customRender: 'action' }
  }
 ]
 export default {
@@ -219,10 +234,12 @@ export default {
  components: {
    // DepartAuthModal,
    DepartModal,
+    PageHeaderTitle
    // DeptUserInfo
  },
  data() {
    return {
+      IconImg,
      iExpandedKeys: [],
      loading: false,
      autoExpandParent: true,
@@ -241,48 +258,48 @@ export default {
      columns: columns,
      disableSubmit: false,
      // 编辑提交按钮的状态
-      disabledStatus:false,
+      disabledStatus: false,
      checkedKeys: [],
      selectedKeys: [],
      autoIncr: 1,
      currSelected: {},

-      allTreeKeys:[],
+      allTreeKeys: [],
      checkStrictly: true,
      form: this.$form.createForm(this),
      // 当前树选中的部门id
-      currentDepartSelectedId:'',
+      currentDepartSelectedId: '',
      labelCol: {
-        xs: {span: 24},
-        sm: {span: 5}
+        xs: { span: 24 },
+        sm: { span: 5 }
      },
      wrapperCol: {
-        xs: {span: 24},
-        sm: {span: 16}
+        xs: { span: 24 },
+        sm: { span: 16 }
      },
      graphDatasource: {
        nodes: [],
        edges: []
      },
      validatorRules: {
-        departName: {rules: [{required: true,validator: this.validateDepartName}]},
-        orgCode: {rules: [{required: true, message: '请输入机构编码!'}]},
-        orgCategory: {rules: [{required: true, message: '请输入机构类型!'}]},
-        mobile: {rules: [{validator: this.validateMobile}]}
+        departName: { rules: [{ required: true, validator: this.validateDepartName }] },
+        orgCode: { rules: [{ required: true, message: '请输入机构编码!' }] },
+        orgCategory: { rules: [{ required: true, message: '请输入机构类型!' }] },
+        mobile: { rules: [{ validator: this.validateMobile }] }
      },
      url: {
        delete: '/sys/sysDepart/delete',
        edit: '/sys/sysDepart/edit',
        deleteBatch: '/sys/sysDepart/deleteBatch',
        exportXlsUrl: 'sys/sysDepart/exportXls',
-        importExcelUrl: 'sys/sysDepart/importExcel',
+        importExcelUrl: 'sys/sysDepart/importExcel'
      },
-      orgCategoryDisabled:false,
+      orgCategoryDisabled: false
    }
  },
  computed: {
    importExcelUrl: function () {
-      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
+      return `${ window._CONFIG['domianURL'] }/${ this.url.importExcelUrl }`
    }
  },
  methods: {
@@ -365,7 +382,7 @@ export default {
          title: '确认删除',
          content: '确定要删除所选中的 ' + this.checkedKeys.length + ' 条数据，以及子节点数据吗?',
          onOk: function () {
-            getAction(that.url.deleteBatch, {ids: ids}).then((res) => {
+            getAction(that.url.deleteBatch, { ids: ids }).then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.loadTree()
@@ -381,7 +398,7 @@ export default {
    onSearch(value) {
      let that = this
      if (value) {
-        searchByKeywords({keyWord: value}).then((res) => {
+        searchByKeywords({ keyWord: value }).then((res) => {
          if (res.success) {
            that.departTree = []
            for (let i = 0; i < res.result.length; i++) {
@@ -411,9 +428,9 @@ export default {
      this.hiding = false
      //this.checkedKeys = checkedKeys.checked
      // <!---- author:os_chengtgen -- date:20190827 --  for:切换父子勾选模式 =======------>
-      if(this.checkStrictly){
+      if (this.checkStrictly) {
        this.checkedKeys = checkedKeys.checked
-      }else{
+      } else {
        this.checkedKeys = checkedKeys
      }
      // <!---- author:os_chengtgen -- date:20190827 --  for:切换父子勾选模式 =======------>
@@ -431,17 +448,17 @@ export default {
      // 暂时注释(部门权限组件)没用 2021-08-24
      // this.$refs.departAuth.show(record.id);
      // 传用户信息参数
-     if( this.$refs.DeptUserInfo !== undefined){
-       this.$refs.DeptUserInfo.open(record)
-     }
+      if (this.$refs.DeptUserInfo !== undefined) {
+        this.$refs.DeptUserInfo.open(record)
+      }
    },
    // 部门名称判断重复
-    validateDepartName(rule, value, callback){
-      checkDepartName(value,this.currentDepartSelectedId).then(res => {
-        if(res.success){
+    validateDepartName(rule, value, callback) {
+      checkDepartName(value, this.currentDepartSelectedId).then(res => {
+        if (res.success) {
          callback()
-        }else {
-          callback(res.code === 500 ? '机构/部门已经存在': res)
+        } else {
+          callback(res.code === 500 ? '机构/部门已经存在' : res)
        }
      })
    },
@@ -450,14 +467,14 @@ export default {
      // 记录当前选择的部门id 作为判重参数条件
      this.currentDepartSelectedId = record.id

-      if((record.orgCategory + '') === '1'){
+      if ((record.orgCategory + '') === '1') {
        this.orgCategoryDisabled = true
-      }else{
+      } else {
        this.orgCategoryDisabled = false
      }
      this.$nextTick(() => {
-        this.form.getFieldDecorator('fax', {initialValue: ''})
-        this.form.setFieldsValue(pick(record, 'departName','orgCategory', 'orgCode', 'departOrder', 'mobile', 'fax', 'address', 'memo'))
+        this.form.getFieldDecorator('fax', { initialValue: '' })
+        this.form.setFieldsValue(pick(record, 'departName', 'orgCategory', 'orgCode', 'departOrder', 'mobile', 'fax', 'address', 'memo'))
      })
    },
    getCurrSelectedTitle() {
@@ -502,10 +519,10 @@ export default {
              this.$message.error(res.message)
              this.disabledStatus = false
            }
-          }).finally( () => {
+          }).finally(() => {
            this.disabledStatus = false
          })
-        }else  {
+        } else {
          this.disabledStatus = false
        }
      })
@@ -548,15 +565,15 @@ export default {
        title: '确认删除',
        content: '确定要删除此部门以及子节点数据吗?',
        onOk: function () {
-          deleteByDepartId({id: that.rightClickSelectedKey}).then((resp) => {
+          deleteByDepartId({ id: that.rightClickSelectedKey }).then((resp) => {
            if (resp.success) {
              //删除成功后，去除已选中中的数据
              that.checkedKeys.splice(that.checkedKeys.findIndex(key => key === that.rightClickSelectedKey), 1)
              that.$message.success('删除成功!')
              that.loadTree()
              //删除后同步清空右侧基本信息内容
-              let orgCode=that.form.getFieldValue('orgCode')
-              if(orgCode && orgCode === that.rightClickSelectedOrgCode){
+              let orgCode = that.form.getFieldValue('orgCode')
+              if (orgCode && orgCode === that.rightClickSelectedOrgCode) {
                that.onClearSelected()
              }
            } else {
@@ -568,7 +585,7 @@ export default {
    },
    selectDirectiveOk(record) {
      console.log('选中指令数据', record)
-      this.nodeSettingForm.setFieldsValue({directiveCode: record.directiveCode})
+      this.nodeSettingForm.setFieldsValue({ directiveCode: record.directiveCode })
      this.currSelected.sysCode = record.sysCode
    },
    getFlowGraphData(node) {
@@ -588,21 +605,21 @@ export default {
      }
    },
    // <!---- author:os_chengtgen -- date:20190827 --  for:切换父子勾选模式 =======------>
-    expandAll () {
+    expandAll() {
      this.iExpandedKeys = this.allTreeKeys
    },
-    closeAll () {
+    closeAll() {
      this.iExpandedKeys = []
    },
-    checkALL () {
+    checkALL() {
      this.checkStriccheckStrictlytly = false
      this.checkedKeys = this.allTreeKeys
    },
-    cancelCheckALL () {
+    cancelCheckALL() {
      //this.checkedKeys = this.defaultCheckedKeys
      this.checkedKeys = []
    },
-    callback(){
+    callback() {
      // tab页切换为基本信息时候 清除表单验证
      console.log(this.form)
      // if(val === '1' && this.form){
@@ -632,7 +649,7 @@ export default {
    this.currFlowId = this.$route.params.id
    this.currFlowName = this.$route.params.name
    // this.loadTree()
-  },
+  }

 }
 </script>
@@ -1,221 +1,228 @@
 <template>
-  <a-row :gutter="10">
-    <a-col :md="8" :sm="24">
-      <a-card :bordered="false">
-        <div style="background: #fff;padding-left:16px;height: 100%; margin-top: 5px">
-          <a-input-search @search="onSearch" style="width:100%;margin-top: 10px" placeholder="请输入部门名称"/>
-          <!-- 树-->
+  <div>
+    <page-header-title :img-for-icon="IconImg"></page-header-title>
+    <a-row :gutter="10">
+      <a-col :md="8" :sm="24">
+        <a-card :bordered="false">
+          <div style="background: #fff;padding-left:16px;height: 100%; margin-top: 5px">
+            <a-input-search @search="onSearch" style="width:100%;margin-top: 10px" placeholder="请输入部门名称"/>
+            <!-- 树-->

-          <template v-if="userIdentity === '2' && departTree.length>0">
+            <template v-if="userIdentity === '2' && departTree.length>0">

-            <!--组织机构-->
-            <a-tree
-              showLine
-              :selectedKeys="selectedKeys"
-              :checkStrictly="true"
-              @select="onSelect"
-              :dropdownStyle="{maxHeight:'200px',overflow:'auto'}"
-              :treeData="departTree"
-              :autoExpandParent="autoExpandParent"
-              :expandedKeys="iExpandedKeys"
-              @expand="onExpand"
-            />
+              <!--组织机构-->
+              <a-tree
+                showLine
+                :selectedKeys="selectedKeys"
+                :checkStrictly="true"
+                @select="onSelect"
+                :dropdownStyle="{maxHeight:'200px',overflow:'auto'}"
+                :treeData="departTree"
+                :autoExpandParent="autoExpandParent"
+                :expandedKeys="iExpandedKeys"
+                @expand="onExpand"
+              />

-          </template>
-          <div style="margin-top: 24px;" v-else-if="userIdentity === '2' && departTree.length==0">
-            <h3><span>您的部门下暂无有效部门信息</span></h3>
+            </template>
+            <div style="margin-top: 24px;" v-else-if="userIdentity === '2' && departTree.length==0">
+              <h3><span>您的部门下暂无有效部门信息</span></h3>
+            </div>
+            <div style="margin-top: 24px;" v-else><h3>普通员工暂此权限</h3></div>
          </div>
-          <div style="margin-top: 24px;" v-else><h3>普通员工暂此权限</h3></div>
-        </div>
-      </a-card>
-    </a-col>
-    <a-col :md="16" :sm="24">
-      <a-card :bordered="false">
-        <a-tabs defaultActiveKey="2" @change="callback">
-          <a-tab-pane tab="基本信息" key="1" forceRender>
-            <Dept-Base-Info ref="DeptBaseInfo"></Dept-Base-Info>
-          </a-tab-pane>
-          <a-tab-pane tab="用户信息" key="2">
-            <Dept-User-Info ref="DeptUserInfo" @clearSelectedDepartKeys="clearSelectedDepartKeys"></Dept-User-Info>
-          </a-tab-pane>
-          <a-tab-pane tab="部门角色" key="3" forceRender>
-            <dept-role-info ref="DeptRoleInfo" @clearSelectedDepartKeys="clearSelectedDepartKeys"/>
-          </a-tab-pane>
-        </a-tabs>
-      </a-card>
-    </a-col>
-  </a-row>
+        </a-card>
+      </a-col>
+      <a-col :md="16" :sm="24">
+        <a-card :bordered="false">
+          <a-tabs defaultActiveKey="2" @change="callback">
+            <a-tab-pane tab="基本信息" key="1" forceRender>
+              <Dept-Base-Info ref="DeptBaseInfo"></Dept-Base-Info>
+            </a-tab-pane>
+            <a-tab-pane tab="用户信息" key="2">
+              <Dept-User-Info ref="DeptUserInfo" @clearSelectedDepartKeys="clearSelectedDepartKeys"></Dept-User-Info>
+            </a-tab-pane>
+            <a-tab-pane tab="部门角色" key="3" forceRender>
+              <dept-role-info ref="DeptRoleInfo" @clearSelectedDepartKeys="clearSelectedDepartKeys"/>
+            </a-tab-pane>
+          </a-tabs>
+        </a-card>
+      </a-col>
+    </a-row>
+  </div>
 </template>
 <script>
-  import DeptBaseInfo from './modules/DeptBaseInfo'
-  import DeptUserInfo from './modules/DeptUserInfo'
-  import {queryMyDepartTreeList, searchByKeywords} from '@/api/api'
-  import {JeroListMixin} from '@/mixins/JeroListMixin'
-  import DeptRoleInfo from './modules/DeptRoleInfo'
+import DeptBaseInfo from './modules/DeptBaseInfo'
+import DeptUserInfo from './modules/DeptUserInfo'
+import { queryMyDepartTreeList, searchByKeywords } from '@/api/api'
+import { JeroListMixin } from '@/mixins/JeroListMixin'
+import DeptRoleInfo from './modules/DeptRoleInfo'
+import IconImg from '@/assets/imgs/icon/icon_system.png'
+import PageHeaderTitle from '../../components/layouts/PageHeaderTitle'

-  export default {
-    name: 'DepartUserList',
-    mixins: [JeroListMixin],
-    components: {
-      DeptRoleInfo,
-      DeptBaseInfo,
-      DeptUserInfo,
+export default {
+  name: 'DepartUserList',
+  mixins: [JeroListMixin],
+  components: {
+    DeptRoleInfo,
+    DeptBaseInfo,
+    DeptUserInfo,
+    PageHeaderTitle
+  },
+  data() {
+    return {
+      IconImg,
+      currentDeptId: '',
+      iExpandedKeys: [],
+      loading: false,
+      autoExpandParent: true,
+      currFlowId: '',
+      currFlowName: '',
+      disable: true,
+      treeData: [],
+      visible: false,
+      departTree: [],
+      rightClickSelectedKey: '',
+      hiding: true,
+      model: {},
+      dropTrigger: '',
+      depart: {},
+      disableSubmit: false,
+      checkedKeys: [],
+      selectedKeys: [],
+      autoIncr: 1,
+      currSelected: {},
+      form: this.$form.createForm(this),
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 5 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 16 }
+      },
+      graphDatasource: {
+        nodes: [],
+        edges: []
+      },
+      userIdentity: ''
+    }
+  },
+  methods: {
+    callback() {
+      //console.log(key)
    },
-    data() {
-      return {
-        currentDeptId: '',
-        iExpandedKeys: [],
-        loading: false,
-        autoExpandParent: true,
-        currFlowId: '',
-        currFlowName: '',
-        disable: true,
-        treeData: [],
-        visible: false,
-        departTree: [],
-        rightClickSelectedKey: '',
-        hiding: true,
-        model: {},
-        dropTrigger: '',
-        depart: {},
-        disableSubmit: false,
-        checkedKeys: [],
-        selectedKeys: [],
-        autoIncr: 1,
-        currSelected: {},
-        form: this.$form.createForm(this),
-        labelCol: {
-          xs: {span: 24},
-          sm: {span: 5}
-        },
-        wrapperCol: {
-          xs: {span: 24},
-          sm: {span: 16}
-        },
-        graphDatasource: {
-          nodes: [],
-          edges: []
-        },
-        userIdentity:'',
-      }
+    loadData() {
+      this.refresh()
    },
-    methods: {
-      callback() {
-        //console.log(key)
-      },
-      loadData() {
-        this.refresh()
-      },
-      clearSelectedDepartKeys() {
-        this.checkedKeys = []
-        this.selectedKeys = []
-        this.currentDeptId = ''
-        this.$refs.DeptUserInfo.currentDeptId=''
-        this.$refs.DeptRoleInfo.currentDeptId=''
-      },
-      loadTree() {
-        var that = this
-        that.treeData = []
-        that.departTree = []
-        queryMyDepartTreeList().then((res) => {
-          if (res.success && res.result ) {
-            for (let i = 0; i < res.result.length; i++) {
-              let temp = res.result[i]
-              that.treeData.push(temp)
-              that.departTree.push(temp)
-              that.setThisExpandedKeys(temp)
-              // console.log(temp.id)
-            }
-            this.loading = false
+    clearSelectedDepartKeys() {
+      this.checkedKeys = []
+      this.selectedKeys = []
+      this.currentDeptId = ''
+      this.$refs.DeptUserInfo.currentDeptId = ''
+      this.$refs.DeptRoleInfo.currentDeptId = ''
+    },
+    loadTree() {
+      var that = this
+      that.treeData = []
+      that.departTree = []
+      queryMyDepartTreeList().then((res) => {
+        if (res.success && res.result) {
+          for (let i = 0; i < res.result.length; i++) {
+            let temp = res.result[i]
+            that.treeData.push(temp)
+            that.departTree.push(temp)
+            that.setThisExpandedKeys(temp)
+            // console.log(temp.id)
          }
-          that.userIdentity = res.message
-        })
-      },
-      setThisExpandedKeys(node) {
-        //只展开一级目录
-        if (node.children && node.children.length > 0) {
-          this.iExpandedKeys.push(node.key)
-          //下方代码放开注释则默认展开所有节点
-          /**
-          for (let a = 0; a < node.children.length; a++) {
+          this.loading = false
+        }
+        that.userIdentity = res.message
+      })
+    },
+    setThisExpandedKeys(node) {
+      //只展开一级目录
+      if (node.children && node.children.length > 0) {
+        this.iExpandedKeys.push(node.key)
+        //下方代码放开注释则默认展开所有节点
+        /**
+         for (let a = 0; a < node.children.length; a++) {
            this.setThisExpandedKeys(node.children[a])
          }
-          */
-        }
-      },
-      refresh() {
-        this.loading = true
-        this.loadTree()
-      },
+         */
+      }
+    },
+    refresh() {
+      this.loading = true
+      this.loadTree()
+    },

-      onExpand(expandedKeys) {
-        // console.log('onExpand', expandedKeys)
-        // if not set autoExpandParent to false, if children expanded, parent can not collapse.
-        // or, you can remove all expanded children keys.
-        this.iExpandedKeys = expandedKeys
-        this.autoExpandParent = false
-      },
+    onExpand(expandedKeys) {
+      // console.log('onExpand', expandedKeys)
+      // if not set autoExpandParent to false, if children expanded, parent can not collapse.
+      // or, you can remove all expanded children keys.
+      this.iExpandedKeys = expandedKeys
+      this.autoExpandParent = false
+    },

-      onSearch(value) {
-        let that = this
-        if (value) {
-          searchByKeywords({keyWord: value,myDeptSearch:'1'}).then((res) => {
-            if (res.success) {
-              that.departTree = []
-              for (let i = 0; i < res.result.length; i++) {
-                let temp = res.result[i]
-                that.departTree.push(temp)
-              }
-            } else {
-              that.$message.warning(res.message)
+    onSearch(value) {
+      let that = this
+      if (value) {
+        searchByKeywords({ keyWord: value, myDeptSearch: '1' }).then((res) => {
+          if (res.success) {
+            that.departTree = []
+            for (let i = 0; i < res.result.length; i++) {
+              let temp = res.result[i]
+              that.departTree.push(temp)
            }
-          })
-        } else {
-          that.loadTree()
-        }
+          } else {
+            that.$message.warning(res.message)
+          }
+        })
+      } else {
+        that.loadTree()
+      }

-      },
-      onCheck(checkedKeys, e) {
-        let record = e.node.dataRef
-        // console.log('onCheck', checkedKeys, e);
-        this.checkedKeys = []
-        // if (e.checked === true) {
-        this.currentDeptId = record.id
-        this.checkedKeys.push(record.id)
-
-        this.$refs.DeptBaseInfo.open(record)
-        this.$refs.DeptUserInfo.open(record)
-        this.$refs.DeptRoleInfo.open(record)
-        // }
-        // else {
-        //   this.checkedKeys = [];
-        //   this.$refs.DeptBaseInfo.clearForm();
-        //   this.$refs.DeptUserInfo.clearList();
-        // }
-
-        this.hiding = false
-        // this.checkedKeys = checkedKeys.checked
-      },
-      onSelect(selectedKeys, e) {
-        if (this.selectedKeys[0] !== selectedKeys[0]) {
-          this.selectedKeys = [selectedKeys[0]]
-        }
-        let record = e.node.dataRef
-        this.checkedKeys.push(record.id)
-        this.$refs.DeptBaseInfo.open(record)
-        this.$refs.DeptUserInfo.onClearSelected()
-        this.$refs.DeptUserInfo.open(record)
-        this.$refs.DeptRoleInfo.onClearSelected()
-        this.$refs.DeptRoleInfo.open(record)
-      },
    },
-    created() {
-      this.currFlowId = this.$route.params.id
-      this.currFlowName = this.$route.params.name
-      // this.loadTree()
+    onCheck(checkedKeys, e) {
+      let record = e.node.dataRef
+      // console.log('onCheck', checkedKeys, e);
+      this.checkedKeys = []
+      // if (e.checked === true) {
+      this.currentDeptId = record.id
+      this.checkedKeys.push(record.id)
+
+      this.$refs.DeptBaseInfo.open(record)
+      this.$refs.DeptUserInfo.open(record)
+      this.$refs.DeptRoleInfo.open(record)
+      // }
+      // else {
+      //   this.checkedKeys = [];
+      //   this.$refs.DeptBaseInfo.clearForm();
+      //   this.$refs.DeptUserInfo.clearList();
+      // }
+
+      this.hiding = false
+      // this.checkedKeys = checkedKeys.checked
    },
+    onSelect(selectedKeys, e) {
+      if (this.selectedKeys[0] !== selectedKeys[0]) {
+        this.selectedKeys = [selectedKeys[0]]
+      }
+      let record = e.node.dataRef
+      this.checkedKeys.push(record.id)
+      this.$refs.DeptBaseInfo.open(record)
+      this.$refs.DeptUserInfo.onClearSelected()
+      this.$refs.DeptUserInfo.open(record)
+      this.$refs.DeptRoleInfo.onClearSelected()
+      this.$refs.DeptRoleInfo.open(record)
+    }
+  },
+  created() {
+    this.currFlowId = this.$route.params.id
+    this.currFlowName = this.$route.params.name
+    // this.loadTree()
  }
+}
 </script>
 <style scoped>
-  @import '~@assets/less/common.less'
+@import '~@assets/less/common.less'
 </style>
@@ -1,216 +1,225 @@
 <template>
-  <a-card :bordered="false">
+  <div>
+    <page-header-title :img-for-icon="IconImg"></page-header-title>
+    <a-card :bordered="false">

-    <!-- 左侧面板 -->
-    <div class="table-page-search-wrapper">
-      <a-form layout="inline" @keyup.enter.native="searchQuery">
-        <a-row :gutter="12">
-          <a-col :md="7" :sm="8">
-            <a-form-item label="字典名称" :labelCol="{span: 6}" :wrapperCol="{span: 14, offset: 1}">
-              <a-input placeholder="请输入字典名称" v-model="queryParam.dictName"></a-input>
-            </a-form-item>
-          </a-col>
-          <a-col :md="7" :sm="8">
-            <a-form-item label="字典编号" :labelCol="{span: 6}" :wrapperCol="{span: 14, offset: 1}">
-              <a-input placeholder="请输入字典编号" v-model="queryParam.dictCode"></a-input>
-            </a-form-item>
-          </a-col>
-          <a-col :md="7" :sm="8">
+      <!-- 左侧面板 -->
+      <div class="table-page-search-wrapper">
+        <a-form layout="inline" @keyup.enter.native="searchQuery">
+          <a-row :gutter="12">
+            <a-col :md="7" :sm="8">
+              <a-form-item label="字典名称" :labelCol="{span: 6}" :wrapperCol="{span: 14, offset: 1}">
+                <a-input placeholder="请输入字典名称" v-model="queryParam.dictName"></a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :md="7" :sm="8">
+              <a-form-item label="字典编号" :labelCol="{span: 6}" :wrapperCol="{span: 14, offset: 1}">
+                <a-input placeholder="请输入字典编号" v-model="queryParam.dictCode"></a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :md="7" :sm="8">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
-          </a-col>
-        </a-row>
-      </a-form>
+            </a-col>
+          </a-row>
+        </a-form>

-      <div class="table-operator" style="border-top: 5px">
-        <a-button @click="handleAdd" type="primary" icon="plus" v-has="'sys:dict:add'">新增</a-button>
-        <a-button type="primary" icon="download" @click="handleExportXls('字典信息')" v-has="'sys:dict:export'">导出</a-button>
-        <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" v-has="'sys:dict:import'" @change="handleImportExcel">
-          <a-button type="primary" icon="import">导入</a-button>
-        </a-upload>
-        <a-button type="primary" icon="sync" @click="refleshCache()">刷新缓存</a-button>
+        <div class="table-operator" style="border-top: 5px">
+          <a-button @click="handleAdd" type="primary" icon="plus" v-has="'sys:dict:add'">新增</a-button>
+          <a-button type="primary" icon="download" @click="handleExportXls('字典信息')" v-has="'sys:dict:export'">导出
+          </a-button>
+          <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader"
+                    :action="importExcelUrl"
+                    v-has="'sys:dict:import'" @change="handleImportExcel">
+            <a-button type="primary" icon="import">导入</a-button>
+          </a-upload>
+          <a-button type="primary" icon="sync" @click="refleshCache()">刷新缓存</a-button>

-        <a-button type="primary" icon="hdd" @click="openDeleteList">回收站</a-button>
-      </div>
+          <a-button type="primary" icon="hdd" @click="openDeleteList">回收站</a-button>
+        </div>

-      <a-table
-        ref="table"
-        rowKey="id"
-        bordered
-        size="middle"
-        :columns="columns"
-        :dataSource="dataSource"
-        :pagination="ipagination"
-        :loading="loading"
-        @change="handleTableChange">
-        <span slot="action" slot-scope="text, record"  class="action-span-cell">
+        <a-table
+          ref="table"
+          rowKey="id"
+          bordered
+          size="middle"
+          :columns="columns"
+          :dataSource="dataSource"
+          :pagination="ipagination"
+          :loading="loading"
+          @change="handleTableChange">
+        <span slot="action" slot-scope="text, record" class="action-span-cell">
          <a @click="handleEdit(record)" v-has="'sys:dict:edit'">
            <a-icon type="edit"/>
            编辑
          </a>
          <a @click="editDictItem(record)"><a-icon type="setting"/> 字典配置</a>
-<!--          <a-popconfirm title="确定删除吗?" @confirm="() =>handleDelete(record.id)">-->
+          <!--          <a-popconfirm title="确定删除吗?" @confirm="() =>handleDelete(record.id)">-->

-<!--          </a-popconfirm>\-->
+          <!--          </a-popconfirm>\-->
          <a @click="handleDelete(record.id)" v-has="'sys:dict:del'">删除</a>
        </span>
-        <template slot="text" slot-scope="text">
-          <span v-if="!text"></span>
-          <j-ellipsis :value="text" :length="10"></j-ellipsis>
-        </template>
-      </a-table>
+          <template slot="text" slot-scope="text">
+            <span v-if="!text"></span>
+            <j-ellipsis :value="text" :length="10"></j-ellipsis>
+          </template>
+        </a-table>

-    </div>
-    <dict-modal ref="modalForm" @ok="modalFormOk"></dict-modal>  <!-- 字典类型 -->
-    <dict-item-list ref="dictItemList"></dict-item-list>
-    <dict-delete-list ref="dictDeleteList" @refresh="() =>loadData()"></dict-delete-list>
-  </a-card>
+      </div>
+      <dict-modal ref="modalForm" @ok="modalFormOk"></dict-modal>  <!-- 字典类型 -->
+      <dict-item-list ref="dictItemList"></dict-item-list>
+      <dict-delete-list ref="dictDeleteList" @refresh="() =>loadData()"></dict-delete-list>
+    </a-card>
+  </div>
 </template>

 <script>
-  // import { filterObj } from '@/utils/util'
-  import { JeroListMixin } from '@/mixins/JeroListMixin'
-  import DictModal from './modules/DictModal'
-  import DictItemList from './DictItemList'
-  import DictDeleteList from './DictDeleteList'
-  import { getAction } from '@api/manage'
-  import { UI_CACHE_DB_DICT_DATA } from '@/store/mutation-types'
-  import Vue from 'vue'
-  import JEllipsis from '@comp/jero/JEllipsis'
+// import { filterObj } from '@/utils/util'
+import { JeroListMixin } from '@/mixins/JeroListMixin'
+import DictModal from './modules/DictModal'
+import DictItemList from './DictItemList'
+import DictDeleteList from './DictDeleteList'
+import { getAction } from '@api/manage'
+import { UI_CACHE_DB_DICT_DATA } from '@/store/mutation-types'
+import Vue from 'vue'
+import JEllipsis from '@comp/jero/JEllipsis'
+import IconImg from '@/assets/imgs/icon/icon_system.png'
+import PageHeaderTitle from '../../components/layouts/PageHeaderTitle'

-  export default {
-    name: 'DictList',
-    mixins:[JeroListMixin],
-    components: {DictModal, DictItemList,DictDeleteList,JEllipsis},
-    data() {
-      return {
-        description: '这是数据字典页面',
-        visible: false,
-        // 查询条件
-        queryParam: {
-          dictCode: '',
-          dictName: '',
+export default {
+  name: 'DictList',
+  mixins: [JeroListMixin],
+  components: { DictModal, DictItemList, DictDeleteList, JEllipsis, PageHeaderTitle },
+  data() {
+    return {
+      IconImg,
+      description: '这是数据字典页面',
+      visible: false,
+      // 查询条件
+      queryParam: {
+        dictCode: '',
+        dictName: ''
+      },
+      // 表头
+      columns: [
+        {
+          title: '序号',
+          dataIndex: '',
+          key: 'rowIndex',
+          width: 120,
+          align: 'center',
+          customRender: function (t, r, index) {
+            return parseInt(index) + 1
+          }
        },
-        // 表头
-        columns: [
-          {
-            title: '序号',
-            dataIndex: '',
-            key: 'rowIndex',
-            width: 120,
-            align: 'center',
-            customRender: function (t, r, index) {
-              return parseInt(index) + 1
+        {
+          title: '字典名称',
+          align: 'left',
+          dataIndex: 'dictName',
+          scopedSlots: { customRender: 'text' }
+        },
+        {
+          title: '字典编号',
+          align: 'left',
+          dataIndex: 'dictCode',
+          scopedSlots: { customRender: 'text' }
+        },
+        {
+          title: '描述',
+          align: 'left',
+          dataIndex: 'description',
+          scopedSlots: { customRender: 'text' }
+        },
+        {
+          title: '操作',
+          dataIndex: 'action',
+          align: 'center',
+          scopedSlots: { customRender: 'action' }
+        }
+      ],
+      dict: '',
+      labelCol: {
+        xs: { span: 8 },
+        sm: { span: 5 }
+      },
+      wrapperCol: {
+        xs: { span: 16 },
+        sm: { span: 19 }
+      },
+      url: {
+        list: '/sys/dict/page',
+        delete: '/sys/dict/delete',
+        exportXlsUrl: 'sys/dict/exportXls',
+        importExcelUrl: 'sys/dict/importExcel',
+        refleshCache: 'sys/dict/refleshCache',
+        queryAllDictItems: 'sys/dict/queryAllDictItems'
+      }
+    }
+  },
+  computed: {
+    importExcelUrl: function () {
+      return `${ window._CONFIG['domianURL'] }/${ this.url.importExcelUrl }`
+    }
+  },
+  methods: {
+    // getQueryParams() {
+    //   var param = Object.assign({}, this.queryParam, this.isorter);
+    //   param.field = this.getQueryField();
+    //   param.pageNo = this.ipagination.current;
+    //   param.pageSize = this.ipagination.pageSize;
+    //   if (this.superQueryParams) {
+    //     param['superQueryParams'] = encodeURI(this.superQueryParams)
+    //     param['superQueryMatchType'] = this.superQueryMatchType
+    //   }
+    //   return filterObj(param);
+    // },
+    //取消选择
+    cancelDict() {
+      this.dict = ''
+      this.visible = false
+      this.loadData()
+    },
+    //编辑字典数据
+    editDictItem(record) {
+      this.$refs.dictItemList.edit(record)
+    },
+    // 重置字典类型搜索框的内容
+    // searchReset() {
+    //   var that = this;
+    //   that.queryParam.dictName = "";
+    //   that.queryParam.dictCode = "";
+    //   that.loadData(this.ipagination.current);
+    // },
+    openDeleteList() {
+      this.$refs.dictDeleteList.show()
+    },
+    refleshCache() {
+      getAction(this.url.refleshCache).then((res) => {
+        if (res.success) {
+          //重新加载缓存
+          getAction(this.url.queryAllDictItems).then((res) => {
+            if (res.success) {
+              Vue.ls.remove(UI_CACHE_DB_DICT_DATA)
+              Vue.ls.set(UI_CACHE_DB_DICT_DATA, res.result, 7 * 24 * 60 * 60 * 1000)
            }
-          },
-          {
-            title: '字典名称',
-            align: 'left',
-            dataIndex: 'dictName',
-            scopedSlots: { customRender: 'text' }
-          },
-          {
-            title: '字典编号',
-            align: 'left',
-            dataIndex: 'dictCode',
-            scopedSlots: { customRender: 'text' }
-          },
-          {
-            title: '描述',
-            align: 'left',
-            dataIndex: 'description',
-            scopedSlots: { customRender: 'text' }
-          },
-          {
-            title: '操作',
-            dataIndex: 'action',
-            align: 'center',
-            scopedSlots: {customRender: 'action'},
-          }
-        ],
-        dict: '',
-        labelCol: {
-          xs: {span: 8},
-          sm: {span: 5},
-        },
-        wrapperCol: {
-          xs: {span: 16},
-          sm: {span: 19},
-        },
-        url: {
-          list: '/sys/dict/page',
-          delete: '/sys/dict/delete',
-          exportXlsUrl: 'sys/dict/exportXls',
-          importExcelUrl: 'sys/dict/importExcel',
-          refleshCache: 'sys/dict/refleshCache',
-          queryAllDictItems: 'sys/dict/queryAllDictItems',
-        },
-      }
-    },
-    computed: {
-      importExcelUrl: function () {
-        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
-      }
-    },
-    methods: {
-      // getQueryParams() {
-      //   var param = Object.assign({}, this.queryParam, this.isorter);
-      //   param.field = this.getQueryField();
-      //   param.pageNo = this.ipagination.current;
-      //   param.pageSize = this.ipagination.pageSize;
-      //   if (this.superQueryParams) {
-      //     param['superQueryParams'] = encodeURI(this.superQueryParams)
-      //     param['superQueryMatchType'] = this.superQueryMatchType
-      //   }
-      //   return filterObj(param);
-      // },
-      //取消选择
-      cancelDict() {
-        this.dict = ''
-        this.visible = false
-        this.loadData()
-      },
-      //编辑字典数据
-      editDictItem(record) {
-        this.$refs.dictItemList.edit(record)
-      },
-      // 重置字典类型搜索框的内容
-      // searchReset() {
-      //   var that = this;
-      //   that.queryParam.dictName = "";
-      //   that.queryParam.dictCode = "";
-      //   that.loadData(this.ipagination.current);
-      // },
-      openDeleteList(){
-        this.$refs.dictDeleteList.show()
-      },
-      refleshCache(){
-        getAction(this.url.refleshCache).then((res) => {
-          if (res.success) {
-            //重新加载缓存
-            getAction(this.url.queryAllDictItems).then((res) => {
-              if (res.success) {
-                Vue.ls.remove(UI_CACHE_DB_DICT_DATA)
-                Vue.ls.set(UI_CACHE_DB_DICT_DATA, res.result, 7 * 24 * 60 * 60 * 1000)
-              }
-            })
-            this.$message.success('刷新缓存完成！')
-          }
-        }).catch(e=>{
-          this.$message.warn('刷新缓存失败！')
-          console.log('刷新失败',e)
-        })
-      }
-    },
-    watch: {
-      openKeys(val) {
-        console.log('openKeys', val)
-      },
-    },
+          })
+          this.$message.success('刷新缓存完成！')
+        }
+      }).catch(e => {
+        this.$message.warn('刷新缓存失败！')
+        console.log('刷新失败', e)
+      })
+    }
+  },
+  watch: {
+    openKeys(val) {
+      console.log('openKeys', val)
+    }
  }
+}
 </script>
 <style scoped>
-  @import '~@assets/less/common.less';
+@import '~@assets/less/common.less';
 </style>
@@ -1,42 +1,44 @@
 <template>
-  <a-card :bordered="false">
-    <!--导航区域-->
-    <div>
-      <a-tabs defaultActiveKey="1" @change="callback">
-        <a-tab-pane tab="登录日志" key="1"></a-tab-pane>
-        <a-tab-pane tab="操作日志" key="2"></a-tab-pane>
-      </a-tabs>
-    </div>
+  <div>
+    <page-header-title :img-for-icon="IconImg"></page-header-title>
+    <a-card :bordered="false">
+      <!--导航区域-->
+      <div>
+        <a-tabs defaultActiveKey="1" @change="callback">
+          <a-tab-pane tab="登录日志" key="1"></a-tab-pane>
+          <a-tab-pane tab="操作日志" key="2"></a-tab-pane>
+        </a-tabs>
+      </div>

-    <!-- 查询区域 -->
-    <div class="table-page-search-wrapper">
-      <a-form layout="inline" @keyup.enter.native="searchQuery">
-        <a-row :gutter="24">
+      <!-- 查询区域 -->
+      <div class="table-page-search-wrapper">
+        <a-form layout="inline" @keyup.enter.native="searchQuery">
+          <a-row :gutter="24">

-          <a-col :md="6" :sm="8">
-            <a-form-item label="搜索日志">
-              <a-input placeholder="请输入搜索关键词" v-model="queryParam.keyWord"></a-input>
-            </a-form-item>
-          </a-col>
+            <a-col :md="6" :sm="8">
+              <a-form-item label="搜索日志">
+                <a-input placeholder="请输入搜索关键词" v-model="queryParam.keyWord"></a-input>
+              </a-form-item>
+            </a-col>

-          <a-col :md="10" :sm="10">
-            <a-form-item label="创建时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
-              <a-range-picker
-                v-model="queryParam.createTimeRange"
-                format="YYYY-MM-DD"
-                :placeholder="['开始时间', '结束时间']"
-                @change="onDateChange"
-                @ok="onDateOk"
-              />
-            </a-form-item>
-          </a-col>
-          <a-col :md="5" :sm="8" v-if="tabKey === '2'">
-            <a-form-item label="操作类型" style="left: 10px">
-              <j-dict-select-tag v-model="queryParam.operateType" placeholder="请选择操作类型" dictCode="operate_type"/>
-            </a-form-item>
-          </a-col>
+            <a-col :md="10" :sm="10">
+              <a-form-item label="创建时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-range-picker
+                  v-model="queryParam.createTimeRange"
+                  format="YYYY-MM-DD"
+                  :placeholder="['开始时间', '结束时间']"
+                  @change="onDateChange"
+                  @ok="onDateOk"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :md="5" :sm="8" v-if="tabKey === '2'">
+              <a-form-item label="操作类型" style="left: 10px">
+                <j-dict-select-tag v-model="queryParam.operateType" placeholder="请选择操作类型" dictCode="operate_type"/>
+              </a-form-item>
+            </a-col>

-          <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
+            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
            <a-col :md="6" :sm="24">
                <a-button type="primary" style="left: 10px" @click="searchQuery" icon="search">查询</a-button>
                <a-button type="primary" @click="searchReset" icon="reload"
@@ -44,48 +46,53 @@
            </a-col>
          </span>

-        </a-row>
-      </a-form>
-    </div>
+          </a-row>
+        </a-form>
+      </div>

-    <!-- table区域-begin -->
-    <a-table
-      ref="table"
-      size="middle"
-      bordered
-      rowKey="id"
-      :columns="columns"
-      :dataSource="dataSource"
-      :pagination="ipagination"
-      :loading="loading"
-      @change="handleTableChange">
+      <!-- table区域-begin -->
+      <a-table
+        ref="table"
+        size="middle"
+        bordered
+        rowKey="id"
+        :columns="columns"
+        :dataSource="dataSource"
+        :pagination="ipagination"
+        :loading="loading"
+        @change="handleTableChange">

-      <!--      <div v-show="queryParam.logType==2" slot="expandedRowRender" slot-scope="record" style="margin: 0">-->
-      <!--        <div style="margin-bottom: 5px"><a-badge status="success" style="vertical-align: middle;"/><span style="vertical-align: middle;">请求方法:{{ record.method }}</span></div>-->
-      <!--        <div><a-badge status="processing" style="vertical-align: middle;"/><span style="vertical-align: middle;">请求参数:{{ record.requestParam }}</span></div>-->
-      <!--      </div>-->
-      <!-- 字符串超长截取省略号显示-->
-      <span slot="logContent" slot-scope="text, record">
+        <!--      <div v-show="queryParam.logType==2" slot="expandedRowRender" slot-scope="record" style="margin: 0">-->
+        <!--        <div style="margin-bottom: 5px"><a-badge status="success" style="vertical-align: middle;"/><span style="vertical-align: middle;">请求方法:{{ record.method }}</span></div>-->
+        <!--        <div><a-badge status="processing" style="vertical-align: middle;"/><span style="vertical-align: middle;">请求参数:{{ record.requestParam }}</span></div>-->
+        <!--      </div>-->
+        <!-- 字符串超长截取省略号显示-->
+        <span slot="logContent" slot-scope="text, record">
          <j-ellipsis :value="text" :length="40"/>
        </span>
-    </a-table>
-    <!-- table区域-end -->
-  </a-card>
+      </a-table>
+      <!-- table区域-end -->
+    </a-card>
+  </div>
 </template>

 <script>
 import { filterObj } from '@/utils/util'
 import { JeroListMixin } from '@/mixins/JeroListMixin'
 import JEllipsis from '@/components/jero/JEllipsis'
+import IconImg from '@/assets/imgs/icon/icon_system.png'
+import PageHeaderTitle from '../../components/layouts/PageHeaderTitle'

 export default {
  name: 'LogList',
  mixins: [JeroListMixin],
  components: {
-    JEllipsis
+    JEllipsis,
+    PageHeaderTitle
  },
  data() {
    return {
+      IconImg,
      description: '这是日志管理页面',
      // 查询条件
      queryParam: {
@@ -1,39 +1,42 @@
 <template>
-  <a-card :bordered="false">
+  <div>
+    <page-header-title :img-for-icon="IconImg"></page-header-title>

-    <!-- 操作按钮区域 -->
-    <div class="table-operator">
-      <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
-      <a-button
-        @click="batchDel"
-        v-if="selectedRowKeys.length > 0"
-        ghost
-        type="primary"
-        icon="delete">批量删除
-      </a-button>
-    </div>
+    <a-card :bordered="false">

-    <!-- table区域-begin -->
-    <div>
+      <!-- 操作按钮区域 -->
+      <div class="table-operator">
+        <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
+        <a-button
+          @click="batchDel"
+          v-if="selectedRowKeys.length > 0"
+          ghost
+          type="primary"
+          icon="delete">批量删除
+        </a-button>
+      </div>

-<!--      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">-->
-<!--        <i class="anticon anticon-info-circle ant-alert-icon"></i>已选择&nbsp;<a style="font-weight: 600">{{-->
-<!--        selectedRowKeys.length }}</a>项&nbsp;&nbsp;-->
-<!--        <a style="margin-left: 24px" @click="onClearSelected">清空</a>-->
-<!--      </div>-->
-<!--      :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"-->
-      <a-table
-        :columns="columns"
-        bordered
-        :scroll="{x: 1500}"
-        size="middle"
-        :pagination="false"
-        :dataSource="dataSource"
-        :loading="loading"
-        :expandedRowKeys="expandedRowKeys"
-        @expandedRowsChange="handleExpandedRowsChange">
+      <!-- table区域-begin -->
+      <div>

-        <span slot="action" slot-scope="text, record"  class="action-span-cell">
+        <!--      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">-->
+        <!--        <i class="anticon anticon-info-circle ant-alert-icon"></i>已选择&nbsp;<a style="font-weight: 600">{{-->
+        <!--        selectedRowKeys.length }}</a>项&nbsp;&nbsp;-->
+        <!--        <a style="margin-left: 24px" @click="onClearSelected">清空</a>-->
+        <!--      </div>-->
+        <!--      :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"-->
+        <a-table
+          :columns="columns"
+          bordered
+          :scroll="{x: 1500}"
+          size="middle"
+          :pagination="false"
+          :dataSource="dataSource"
+          :loading="loading"
+          :expandedRowKeys="expandedRowKeys"
+          @expandedRowsChange="handleExpandedRowsChange">
+
+        <span slot="action" slot-scope="text, record" class="action-span-cell">
          <a @click="handleEdit(record)">编辑</a>

          <a-dropdown>
@@ -53,143 +56,148 @@

              <a-menu-item>
 <!--                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">-->
-<!--                </a-popconfirm>-->
+                <!--                </a-popconfirm>-->
                <a @click="handleDelete(record.id)">删除</a>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>
-        <!-- 字符串超长截取省略号显示 -->
-        <span slot="url" slot-scope="text">
+          <!-- 字符串超长截取省略号显示 -->
+          <span slot="url" slot-scope="text">
          <j-ellipsis :value="text" :length="25"/>
        </span>
-        <!-- 字符串超长截取省略号显示-->
-        <span slot="component" slot-scope="text">
+          <!-- 字符串超长截取省略号显示-->
+          <span slot="component" slot-scope="text">
          <j-ellipsis :value="text"/>
        </span>
-      </a-table>
+        </a-table>

-    </div>
-    <!-- table区域-end -->
+      </div>
+      <!-- table区域-end -->

-    <permission-modal ref="modalForm" @ok="modalFormOk"></permission-modal>
-    <permission-data-rule-list ref="PermissionDataRuleList" @ok="modalFormOk"></permission-data-rule-list>
+      <permission-modal ref="modalForm" @ok="modalFormOk"></permission-modal>
+      <permission-data-rule-list ref="PermissionDataRuleList" @ok="modalFormOk"></permission-data-rule-list>

-  </a-card>
+    </a-card>
+  </div>
 </template>

 <script>
-  import PermissionModal from './modules/PermissionModal'
-  import { getPermissionList } from '@/api/api'
-  import { JeroListMixin } from '@/mixins/JeroListMixin'
-  import PermissionDataRuleList from './PermissionDataRuleList'
-  import JEllipsis from '@/components/jero/JEllipsis'
+import PermissionModal from './modules/PermissionModal'
+import { getPermissionList } from '@/api/api'
+import { JeroListMixin } from '@/mixins/JeroListMixin'
+import PermissionDataRuleList from './PermissionDataRuleList'
+import JEllipsis from '@/components/jero/JEllipsis'
+import PageHeaderTitle from '../../components/layouts/PageHeaderTitle'
+import IconImg from '@/assets/imgs/icon/icon_system.png'

-  const columns = [
-    {
-      title: '菜单名称',
-      dataIndex: 'name',
-      key: 'name'
-    }, {
-      title: '菜单类型',
-      dataIndex: 'menuType',
-      key: 'menuType',
-      customRender: function(text) {
-        if (text == 0) {
-          return '菜单'
-        } else if (text == 1) {
-          return '菜单'
-        } else if (text == 2) {
-          return '按钮/权限'
-        } else {
-          return text
-        }
+const columns = [
+  {
+    title: '菜单名称',
+    dataIndex: 'name',
+    key: 'name'
+  }, {
+    title: '菜单类型',
+    dataIndex: 'menuType',
+    key: 'menuType',
+    customRender: function (text) {
+      if (text == 0) {
+        return '菜单'
+      } else if (text == 1) {
+        return '菜单'
+      } else if (text == 2) {
+        return '按钮/权限'
+      } else {
+        return text
      }
-    },/*{
+    }
+  },/*{
      title: '权限编码',
      dataIndex: 'perms',
      key: 'permissionCode',
    },*/{
-      title: 'icon',
-      dataIndex: 'icon',
-      key: 'icon'
-    },
-    {
-      title: '组件',
-      dataIndex: 'component',
-      key: 'component',
-      scopedSlots: { customRender: 'component' }
-    },
-    {
-      title: '路径',
-      dataIndex: 'url',
-      key: 'url',
-      scopedSlots: { customRender: 'url' }
-    },
-    {
-      title: '排序',
-      dataIndex: 'sortNo',
-      key: 'sortNo'
-    },
-    {
-      title: '操作',
-      dataIndex: 'action',
-      fixed: 'right',
-      scopedSlots: { customRender: 'action' },
-      align: 'center',
-      width: 150
-    }
-  ]
+    title: 'icon',
+    dataIndex: 'icon',
+    key: 'icon'
+  },
+  {
+    title: '组件',
+    dataIndex: 'component',
+    key: 'component',
+    scopedSlots: { customRender: 'component' }
+  },
+  {
+    title: '路径',
+    dataIndex: 'url',
+    key: 'url',
+    scopedSlots: { customRender: 'url' }
+  },
+  {
+    title: '排序',
+    dataIndex: 'sortNo',
+    key: 'sortNo'
+  },
+  {
+    title: '操作',
+    dataIndex: 'action',
+    fixed: 'right',
+    scopedSlots: { customRender: 'action' },
+    align: 'center',
+    width: 150
+  }
+]

-  export default {
-    name: 'PermissionList',
-    mixins: [JeroListMixin],
-    components: {
-      PermissionDataRuleList,
-      PermissionModal,
-      JEllipsis
-    },
-    data() {
-      return {
-        description: '这是菜单管理页面',
-        // 表头
-        columns: columns,
-        loading: false,
-        // 展开的行，受控属性
-        expandedRowKeys: [],
-        url: {
-          list: '/sys/permission/page',
-          delete: '/sys/permission/delete',
-          deleteBatch: '/sys/permission/deleteBatch'
-        }
+export default {
+  name: 'PermissionList',
+  mixins: [JeroListMixin],
+  components: {
+    PermissionDataRuleList,
+    PermissionModal,
+    JEllipsis,
+    PageHeaderTitle
+  },
+  data() {
+    return {
+      IconImg,
+      description: '这是菜单管理页面',
+      // 表头
+      columns: columns,
+      loading: false,
+      // 展开的行，受控属性
+      expandedRowKeys: [],
+      url: {
+        list: '/sys/permission/page',
+        delete: '/sys/permission/delete',
+        deleteBatch: '/sys/permission/deleteBatch'
      }
+    }
+  },
+  methods: {
+    loadData() {
+      this.dataSource = []
+      getPermissionList().then((res) => {
+        if (res.success) {
+          console.log(res.result)
+          this.dataSource = res.result
+        }
+      })
    },
-    methods: {
-      loadData() {
-        this.dataSource = []
-        getPermissionList().then((res) => {
-          if (res.success) {
-            console.log(res.result)
-            this.dataSource = res.result
-          }
-        })
-      },
-      // 打开数据规则编辑
-      handleDataRule(record) {
-        this.$refs.PermissionDataRuleList.edit(record)
-      },
-      handleAddSub(record) {
-        this.$refs.modalForm.title = '添加子菜单'
-        this.$refs.modalForm.localMenuType = 1
-        this.$refs.modalForm.disableSubmit = false
-        this.$refs.modalForm.edit({status:'1',permsType:'1',route:true,'parentId':record.id})
-      },
-      handleExpandedRowsChange(expandedRows) {
-        this.expandedRowKeys = expandedRows
-      },
+    // 打开数据规则编辑
+    handleDataRule(record) {
+      this.$refs.PermissionDataRuleList.edit(record)
+    },
+    handleAddSub(record) {
+      this.$refs.modalForm.title = '添加子菜单'
+      this.$refs.modalForm.localMenuType = 1
+      this.$refs.modalForm.disableSubmit = false
+      this.$refs.modalForm.edit({ status: '1', permsType: '1', route: true, 'parentId': record.id })
+    },
+    handleExpandedRowsChange(expandedRows) {
+      this.expandedRowKeys = expandedRows
    }
  }
+}
 </script>
 <style scoped>
-  @import '~@assets/less/common.less';
+@import '~@assets/less/common.less';
 </style>
@@ -1,78 +1,80 @@
 <template>
-  <a-card :bordered="false">
+  <div>
+    <page-header-title :img-for-icon="IconImg"></page-header-title>
+    <a-card :bordered="false">

-    <!-- 查询区域 -->
-    <div class="table-page-search-wrapper">
-      <a-form layout="inline" @keyup.enter.native="searchQuery">
-        <a-row :gutter="24">
+      <!-- 查询区域 -->
+      <div class="table-page-search-wrapper">
+        <a-form layout="inline" @keyup.enter.native="searchQuery">
+          <a-row :gutter="24">

-          <a-col :md="6" :sm="10">
-            <a-form-item label="任务类名">
-              <a-input placeholder="请输入任务类名" v-model="queryParam.jobClassName"></a-input>
-            </a-form-item>
-          </a-col>
-          <a-col :md="6" :sm="10">
-            <a-form-item label="任务状态">
-              <a-select v-model="queryParam.status" placeholder="请选择状态">
-                <a-select-option value="">全部</a-select-option>
-                <a-select-option value="0">正常</a-select-option>
-                <a-select-option value="-1">停止</a-select-option>
-              </a-select>
-            </a-form-item>
-          </a-col>
+            <a-col :md="6" :sm="10">
+              <a-form-item label="任务类名">
+                <a-input placeholder="请输入任务类名" v-model="queryParam.jobClassName"></a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :md="6" :sm="10">
+              <a-form-item label="任务状态">
+                <a-select v-model="queryParam.status" placeholder="请选择状态">
+                  <a-select-option value="">全部</a-select-option>
+                  <a-select-option value="0">正常</a-select-option>
+                  <a-select-option value="-1">停止</a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>

-          <a-col :md="6" :sm="10">
+            <a-col :md="6" :sm="10">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
-          </a-col>
+            </a-col>

-        </a-row>
-      </a-form>
-    </div>
+          </a-row>
+        </a-form>
+      </div>

-    <!-- 操作按钮区域 -->
-    <div class="table-operator">
-      <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
-      <a-button type="primary" icon="download" @click="handleExportXls('定时任务信息')">导出</a-button>
-      <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl"
-                @change="handleImportExcel">
-        <a-button type="primary" icon="import">导入</a-button>
-      </a-upload>
-      <a-button @click="batchDel" type="danger" icon="delete">批量删除</a-button>
-<!--      <a-dropdown v-if="selectedRowKeys.length > 0">-->
-<!--        <a-menu slot="overlay">-->
-<!--          <a-menu-item key="1" @click="batchDel">-->
-<!--            <a-icon type="delete"/>-->
-<!--            删除-->
-<!--          </a-menu-item>-->
-<!--        </a-menu>-->
-<!--        <a-button style="margin-left: 8px"> 批量操作-->
-<!--          <a-icon type="down"/>-->
-<!--        </a-button>-->
-<!--      </a-dropdown>-->
-    </div>
+      <!-- 操作按钮区域 -->
+      <div class="table-operator">
+        <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
+        <a-button type="primary" icon="download" @click="handleExportXls('定时任务信息')">导出</a-button>
+        <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl"
+                  @change="handleImportExcel">
+          <a-button type="primary" icon="import">导入</a-button>
+        </a-upload>
+        <a-button @click="batchDel" type="danger" icon="delete">批量删除</a-button>
+        <!--      <a-dropdown v-if="selectedRowKeys.length > 0">-->
+        <!--        <a-menu slot="overlay">-->
+        <!--          <a-menu-item key="1" @click="batchDel">-->
+        <!--            <a-icon type="delete"/>-->
+        <!--            删除-->
+        <!--          </a-menu-item>-->
+        <!--        </a-menu>-->
+        <!--        <a-button style="margin-left: 8px"> 批量操作-->
+        <!--          <a-icon type="down"/>-->
+        <!--        </a-button>-->
+        <!--      </a-dropdown>-->
+      </div>

-    <!-- table区域-begin -->
-<!--    <div>-->
-<!--      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">-->
-<!--        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a-->
-<!--          style="font-weight: 600">{{ selectedRowKeys.length }}</a>项-->
-<!--        <a style="margin-left: 24px" @click="onClearSelected">清空</a>-->
-<!--      </div>-->
+      <!-- table区域-begin -->
+      <!--    <div>-->
+      <!--      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">-->
+      <!--        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a-->
+      <!--          style="font-weight: 600">{{ selectedRowKeys.length }}</a>项-->
+      <!--        <a style="margin-left: 24px" @click="onClearSelected">清空</a>-->
+      <!--      </div>-->

      <a-table
-          ref="table"
-          size="middle"
-          bordered
-          rowKey="id"
-          :columns="columns"
-          :dataSource="dataSource"
-          :pagination="ipagination"
-          :loading="loading"
-          :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
-          @change="handleTableChange">
+        ref="table"
+        size="middle"
+        bordered
+        rowKey="id"
+        :columns="columns"
+        :dataSource="dataSource"
+        :pagination="ipagination"
+        :loading="loading"
+        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
+        @change="handleTableChange">

        <!-- 字符串超长截取省略号显示-->
        <span slot="description" slot-scope="text">
@@ -83,23 +85,23 @@
        </span>


-        <span slot="action" slot-scope="text, record"  class="action-span-cell">
+        <span slot="action" slot-scope="text, record" class="action-span-cell">
          <a @click="resumeJob(record)" v-if="record.status==-1">启动</a>
          <a @click="pauseJob(record)" v-if="record.status==0">停止</a>
          <a @click="handleEdit(record)">编辑</a>
          <a @click="handleDelete(record.id)">删除</a>
-<!--          <a-dropdown>-->
-<!--            <a class="ant-dropdown-link">更多 <a-icon type="down"/></a>-->
-<!--            <a-menu slot="overlay">-->
-<!--              <a-menu-item><a @click="executeImmediately(record)">立即执行</a></a-menu-item>-->
-<!--              <a-menu-item><a @click="handleEdit(record)">编辑</a></a-menu-item>-->
-<!--              <a-menu-item>-->
-<!--                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">-->
+          <!--          <a-dropdown>-->
+          <!--            <a class="ant-dropdown-link">更多 <a-icon type="down"/></a>-->
+          <!--            <a-menu slot="overlay">-->
+          <!--              <a-menu-item><a @click="executeImmediately(record)">立即执行</a></a-menu-item>-->
+          <!--              <a-menu-item><a @click="handleEdit(record)">编辑</a></a-menu-item>-->
+          <!--              <a-menu-item>-->
+          <!--                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">-->

-<!--                </a-popconfirm>-->
-<!--              </a-menu-item>-->
-<!--            </a-menu>-->
-<!--          </a-dropdown>-->
+          <!--                </a-popconfirm>-->
+          <!--              </a-menu-item>-->
+          <!--            </a-menu>-->
+          <!--          </a-dropdown>-->
        </span>

        <!-- 状态渲染模板 -->
@@ -109,28 +111,33 @@
        </template>
      </a-table>

-    <!-- table区域-end -->
+      <!-- table区域-end -->

-    <!-- 表单区域 -->
-    <quartzJob-modal ref="modalForm" @ok="modalFormOk"></quartzJob-modal>
-  </a-card>
+      <!-- 表单区域 -->
+      <quartzJob-modal ref="modalForm" @ok="modalFormOk"></quartzJob-modal>
+    </a-card>
+  </div>
 </template>

 <script>
 import QuartzJobModal from './modules/QuartzJobModal'
-import {getAction} from '@/api/manage'
-import {JeroListMixin} from '@/mixins/JeroListMixin'
+import { getAction } from '@/api/manage'
+import { JeroListMixin } from '@/mixins/JeroListMixin'
 import JEllipsis from '@/components/jero/JEllipsis'
+import IconImg from '@/assets/imgs/icon/icon_system.png'
+import PageHeaderTitle from '../../components/layouts/PageHeaderTitle'

 export default {
  name: 'QuartzJobList',
  mixins: [JeroListMixin],
  components: {
    QuartzJobModal,
-    JEllipsis
+    JEllipsis,
+    PageHeaderTitle
  },
  data() {
    return {
+      IconImg,
      description: '定时任务在线管理',
      // 查询条件
      queryParam: {},
@@ -150,7 +157,7 @@ export default {
          title: '任务类名',
          align: 'center',
          dataIndex: 'jobClassName',
-          sorter: true,
+          sorter: true
          /*            customRender:function (text) {
                        return "*"+text.substring(9,text.length);
                      }*/
@@ -165,24 +172,24 @@ export default {
          align: 'center',
          width: 150,
          dataIndex: 'parameter',
-          scopedSlots: {customRender: 'parameterRender'},
+          scopedSlots: { customRender: 'parameterRender' }
        },
        {
          title: '描述',
          align: 'center',
          width: 250,
          dataIndex: 'description',
-          scopedSlots: {customRender: 'description'},
+          scopedSlots: { customRender: 'description' }
        },
        {
          title: '状态',
          align: 'center',
          dataIndex: 'status',
-          scopedSlots: {customRender: 'customRenderStatus'},
+          scopedSlots: { customRender: 'customRenderStatus' },
          filterMultiple: false,
          filters: [
-            {text: '已启动', value: '0'},
-            {text: '已暂停', value: '-1'},
+            { text: '已启动', value: '0' },
+            { text: '已暂停', value: '-1' }
          ]
        },
        {
@@ -190,7 +197,7 @@ export default {
          dataIndex: 'action',
          align: 'center',
          width: 180,
-          scopedSlots: {customRender: 'action'},
+          scopedSlots: { customRender: 'action' }
        }
      ],
      url: {
@@ -202,12 +209,12 @@ export default {
        exportXlsUrl: 'sys/quartzJob/exportXls',
        importExcelUrl: 'sys/quartzJob/importExcel',
        execute: 'sys/quartzJob/execute'
-      },
+      }
    }
  },
  computed: {
    importExcelUrl: function () {
-      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
+      return `${ window._CONFIG['domianURL'] }/${ this.url.importExcelUrl }`
    }
  },

@@ -233,7 +240,7 @@ export default {
        title: '确认暂停',
        content: '是否暂停选中任务?',
        onOk: function () {
-          getAction(that.url.pause, {jobClassName: record.jobClassName}).then((res) => {
+          getAction(that.url.pause, { jobClassName: record.jobClassName }).then((res) => {
            if (res.success) {
              that.$message.success(res.message)
              that.loadData()
@@ -253,7 +260,7 @@ export default {
        title: '确认启动',
        content: '是否启动选中任务?',
        onOk: function () {
-          getAction(that.url.resume, {jobClassName: record.jobClassName}).then((res) => {
+          getAction(that.url.resume, { jobClassName: record.jobClassName }).then((res) => {
            if (res.success) {
              that.$message.success(res.message)
              that.loadData()
@@ -272,7 +279,7 @@ export default {
        title: '确认提示',
        content: '是否立即执行任务?',
        onOk: function () {
-          getAction(that.url.execute, {id: record.id}).then((res) => {
+          getAction(that.url.execute, { id: record.id }).then((res) => {
            if (res.success) {
              that.$message.success(res.message)
              that.loadData()
@@ -1,32 +1,34 @@
 <template>
-  <a-card :bordered="false">
-    <!-- 查询区域 -->
-    <div class="table-page-search-wrapper">
-      <!-- 搜索区域 -->
-      <a-form layout="inline" @keyup.enter.native="searchQuery">
-        <a-row :gutter="24">
-          <a-col :md="6" :sm="12">
-            <a-form-item label="角色名称" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}">
-              <a-input placeholder="请输入角色名称" v-model="queryParam.roleName"></a-input>
-            </a-form-item>
-          </a-col>
-          <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
+  <div>
+    <page-header-title :img-for-icon="IconImg"></page-header-title>
+    <a-card :bordered="false">
+      <!-- 查询区域 -->
+      <div class="table-page-search-wrapper">
+        <!-- 搜索区域 -->
+        <a-form layout="inline" @keyup.enter.native="searchQuery">
+          <a-row :gutter="24">
+            <a-col :md="6" :sm="12">
+              <a-form-item label="角色名称" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}">
+                <a-input placeholder="请输入角色名称" v-model="queryParam.roleName"></a-input>
+              </a-form-item>
+            </a-col>
+            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
            <a-col :md="12" :sm="24">
               <a-button type="primary" @click="searchQuery" icon="search" style="margin-left: 21px">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </a-col>
          </span>
-        </a-row>
-      </a-form>
-    </div>
-    <!-- 操作按钮区域 -->
-    <div class="table-operator" style="margin: 5px 0 10px 2px">
-      <a-button @click="handleAdd" type="primary" icon="plus" v-has="'sys:role:add'">新增</a-button>
-      <a-button @click="handleAddLowerLevel" type="primary" icon="plus">添加下级</a-button>
-      <a-button @click="batchDel" type="danger" icon="delete">批量删除</a-button>
-    </div>
-    <div style="margin-top: 15px">
-      <a-table
+          </a-row>
+        </a-form>
+      </div>
+      <!-- 操作按钮区域 -->
+      <div class="table-operator" style="margin: 5px 0 10px 2px">
+        <a-button @click="handleAdd" type="primary" icon="plus" v-has="'sys:role:add'">新增</a-button>
+        <a-button @click="handleAddLowerLevel" type="primary" icon="plus">添加下级</a-button>
+        <a-button @click="batchDel" type="danger" icon="delete">批量删除</a-button>
+      </div>
+      <div style="margin-top: 15px">
+        <a-table
          style="height:500px"
          ref="table"
          size="middle"
@@ -45,24 +47,27 @@
            <a @click="handleEdit(record)" v-has="'sys:role:edit'">编辑</a>
            <a @click="handleDelete(record.id)" v-has="'sys:role:del'">删除</a>
          </span>
-        <template slot-scope="text" slot="text">
-          <j-ellipsis v-if="text" :length="20" :value="text"></j-ellipsis>
-          <span v-else></span>
-        </template>
-      </a-table>
-    </div>
+          <template slot-scope="text" slot="text">
+            <j-ellipsis v-if="text" :length="20" :value="text"></j-ellipsis>
+            <span v-else></span>
+          </template>
+        </a-table>
+      </div>

-    <user-role-modal ref="modalUserRole"></user-role-modal>
-    <role-modal ref="modalForm" @ok="modalFormOk" @clearSelect="onClearSelected"></role-modal>
-  </a-card>
+      <user-role-modal ref="modalUserRole"></user-role-modal>
+      <role-modal ref="modalForm" @ok="modalFormOk" @clearSelect="onClearSelected"></role-modal>
+    </a-card>
+  </div>
 </template>
 <script>
-import {JeroListMixin} from '@/mixins/JeroListMixin'
-import {postAction} from '@/api/manage'
+import { JeroListMixin } from '@/mixins/JeroListMixin'
+import { postAction } from '@/api/manage'
 import RoleModal from './modules/RoleModal'
 import UserRoleModal from './modules/UserRoleModal'
 import JEllipsis from '@comp/jero/JEllipsis'
 import moment from 'moment'
+import IconImg from '@/assets/imgs/icon/icon_system.png'
+import PageHeaderTitle from '../../components/layouts/PageHeaderTitle'


 export default {
@@ -72,58 +77,60 @@ export default {
    UserRoleModal,
    RoleModal,
    JEllipsis,
+    PageHeaderTitle
  },
  data() {
    return {
+      IconImg,
      model1: {},
      model2: {},
      currentRoleId: '',
      selectedRowKeys: [],
      expandedRowKeys: [],
      columns:
-          [
-            {
-              title: '角色编码',
-              align: 'center',
-              dataIndex: 'roleCode',
-              width: 160,
-              scopedSlots: {customRender: 'text'}
-            },
-            {
-              title: '角色名称',
-              align: 'center',
-              dataIndex: 'roleName',
-              scopedSlots: {customRender: 'text'}
-            },
-            {
-              title: '上级角色',
-              align: 'center',
-              dataIndex: 'parentName',
-              customRender(text) {
-                if (text) {
-                  return text
-                }else {
-                  return '无'
-                }
+        [
+          {
+            title: '角色编码',
+            align: 'center',
+            dataIndex: 'roleCode',
+            width: 160,
+            scopedSlots: { customRender: 'text' }
+          },
+          {
+            title: '角色名称',
+            align: 'center',
+            dataIndex: 'roleName',
+            scopedSlots: { customRender: 'text' }
+          },
+          {
+            title: '上级角色',
+            align: 'center',
+            dataIndex: 'parentName',
+            customRender(text) {
+              if (text) {
+                return text
+              } else {
+                return '无'
              }
-            },
-            {
-              title: '创建时间',
-              dataIndex: 'createTime',
-              align: 'center',
-              sorter: true,
-              scopedSlots: {customRender: 'text'},
-              customRender: (text) => {
-                return moment(text).format('YYYY-MM-DD HH:mm:ss')
-              }
-            },
-            {
-              title: '操作',
-              dataIndex: 'action',
-              align: 'center',
-              scopedSlots: {customRender: 'action'}
            }
-          ],
+          },
+          {
+            title: '创建时间',
+            dataIndex: 'createTime',
+            align: 'center',
+            sorter: true,
+            scopedSlots: { customRender: 'text' },
+            customRender: (text) => {
+              return moment(text).format('YYYY-MM-DD HH:mm:ss')
+            }
+          },
+          {
+            title: '操作',
+            dataIndex: 'action',
+            align: 'center',
+            scopedSlots: { customRender: 'action' }
+          }
+        ],
      url: {
        list: '/sys/role/treeListPage',
        delete: '/sys/role/delete',
@@ -139,7 +146,7 @@ export default {
  },
  computed: {
    importExcelUrl: function () {
-      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
+      return `${ window._CONFIG['domianURL'] }/${ this.url.importExcelUrl }`
    }
  },
  methods: {
@@ -207,7 +214,7 @@ export default {
    },
    handleExpandedRowsChange(expandedRows) {
      this.expandedRowKeys = expandedRows
-    },
+    }
  }
 }
 </script>
@@ -1,336 +1,349 @@
 <template>
-  <a-card :bordered="false">
+  <div>
+    <page-header-title :img-for-icon="IconImg"></page-header-title>
+    <a-card :bordered="false">

-    <!-- 操作按钮区域 -->
-    <div class="table-operator">
-      <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
-      <a-button type="primary" icon="download" @click="handleExportXls('分类字典')">导出</a-button>
-      <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader"  :action="importExcelUrl" @change="handleImportExcel">
-        <a-button type="primary" icon="import">导入</a-button>
-      </a-upload>
-      <a-dropdown v-if="selectedRowKeys.length > 0">
-        <a-menu slot="overlay">
-          <a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item>
-        </a-menu>
-        <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
-      </a-dropdown>
-    </div>
-
-    <!-- table区域-begin -->
-    <div>
-      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
-        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
-        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
+      <!-- 操作按钮区域 -->
+      <div class="table-operator">
+        <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
+        <a-button type="primary" icon="download" @click="handleExportXls('分类字典')">导出</a-button>
+        <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl"
+                  @change="handleImportExcel">
+          <a-button type="primary" icon="import">导入</a-button>
+        </a-upload>
+        <a-dropdown v-if="selectedRowKeys.length > 0">
+          <a-menu slot="overlay">
+            <a-menu-item key="1" @click="batchDel">
+              <a-icon type="delete"/>
+              删除
+            </a-menu-item>
+          </a-menu>
+          <a-button style="margin-left: 8px"> 批量操作
+            <a-icon type="down"/>
+          </a-button>
+        </a-dropdown>
      </div>

-      <a-table
-        ref="table"
-        size="middle"
-        rowKey="id"
-        :columns="columns"
-        :dataSource="dataSource"
-        :pagination="ipagination"
-        :loading="loading"
-        :expandedRowKeys="expandedRowKeys"
-        @change="handleTableChange"
-        @expand="handleExpand"
-        v-bind="tableProps">
+      <!-- table区域-begin -->
+      <div>
+        <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
+          <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a
+          style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
+          <a style="margin-left: 24px" @click="onClearSelected">清空</a>
+        </div>
+
+        <a-table
+          ref="table"
+          size="middle"
+          rowKey="id"
+          :columns="columns"
+          :dataSource="dataSource"
+          :pagination="ipagination"
+          :loading="loading"
+          :expandedRowKeys="expandedRowKeys"
+          @change="handleTableChange"
+          @expand="handleExpand"
+          v-bind="tableProps">

        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)">编辑</a>
-          <a-divider type="vertical" />
+          <a-divider type="vertical"/>
          <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record)">
            <a>删除</a>
          </a-popconfirm>
-          <a-divider type="vertical" />
+          <a-divider type="vertical"/>
          <a @click="handleAddSub(record)">添加下级</a>
        </span>

-      </a-table>
-    </div>
+        </a-table>
+      </div>

-    <sysCategory-modal ref="modalForm" @ok="modalFormOk"></sysCategory-modal>
-  </a-card>
+      <sysCategory-modal ref="modalForm" @ok="modalFormOk"></sysCategory-modal>
+    </a-card>
+  </div>
 </template>

 <script>

-  import { getAction } from '@/api/manage'
-  import { JeroListMixin } from '@/mixins/JeroListMixin'
-  import SysCategoryModal from './modules/SysCategoryModal'
-  import { deleteAction } from '@/api/manage'
+import { getAction } from '@/api/manage'
+import { JeroListMixin } from '@/mixins/JeroListMixin'
+import SysCategoryModal from './modules/SysCategoryModal'
+import { deleteAction } from '@/api/manage'
+import IconImg from '@/assets/imgs/icon/icon_system.png'
+import PageHeaderTitle from '../../components/layouts/PageHeaderTitle'

-  export default {
-    name: 'SysCategoryList',
-    mixins:[JeroListMixin],
-    components: {
-      SysCategoryModal
-    },
-    data () {
-      return {
-        description: '分类字典管理页面',
-        // 表头
-        columns: [
-          {
-            title:'分类名称',
-            align:'left',
-            dataIndex: 'name'
-          },
-          {
-            title:'分类编码',
-            align:'left',
-            dataIndex: 'code'
-          },
-          {
-            title: '操作',
-            dataIndex: 'action',
-            align:'center',
-            scopedSlots: { customRender: 'action' },
-          }
-        ],
-        url: {
-          list: '/sys/category/rootList',
-          childList: '/sys/category/childList',
-          getChildListBatch: '/sys/category/getChildListBatch',
-          delete: '/sys/category/delete',
-          deleteBatch: '/sys/category/deleteBatch',
-          exportXlsUrl: '/sys/category/exportXls',
-          importExcelUrl: 'sys/category/importExcel',
+export default {
+  name: 'SysCategoryList',
+  mixins: [JeroListMixin],
+  components: {
+    SysCategoryModal,
+    PageHeaderTitle
+  },
+  data() {
+    return {
+      IconImg,
+      description: '分类字典管理页面',
+      // 表头
+      columns: [
+        {
+          title: '分类名称',
+          align: 'left',
+          dataIndex: 'name'
        },
-        expandedRowKeys:[],
-        hasChildrenField:'hasChild',
-        pidField:'pid',
-        dictOptions:{
+        {
+          title: '分类编码',
+          align: 'left',
+          dataIndex: 'code'
        },
-        subExpandedKeys:[],
-      }
-    },
-    computed: {
-      importExcelUrl(){
-        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
+        {
+          title: '操作',
+          dataIndex: 'action',
+          align: 'center',
+          scopedSlots: { customRender: 'action' }
+        }
+      ],
+      url: {
+        list: '/sys/category/rootList',
+        childList: '/sys/category/childList',
+        getChildListBatch: '/sys/category/getChildListBatch',
+        delete: '/sys/category/delete',
+        deleteBatch: '/sys/category/deleteBatch',
+        exportXlsUrl: '/sys/category/exportXls',
+        importExcelUrl: 'sys/category/importExcel'
      },
-      tableProps() {
-        let _this = this
-        return {
-          // 列表项是否可选择
-          rowSelection: {
-            selectedRowKeys: _this.selectedRowKeys,
-            onChange: (selectedRowKeys) => _this.selectedRowKeys = selectedRowKeys
-          }
+      expandedRowKeys: [],
+      hasChildrenField: 'hasChild',
+      pidField: 'pid',
+      dictOptions: {},
+      subExpandedKeys: []
+    }
+  },
+  computed: {
+    importExcelUrl() {
+      return `${ window._CONFIG['domianURL'] }/${ this.url.importExcelUrl }`
+    },
+    tableProps() {
+      let _this = this
+      return {
+        // 列表项是否可选择
+        rowSelection: {
+          selectedRowKeys: _this.selectedRowKeys,
+          onChange: (selectedRowKeys) => _this.selectedRowKeys = selectedRowKeys
        }
      }
+    }
+  },
+  methods: {
+    loadData(arg) {
+      if (arg == 1) {
+        this.ipagination.current = 1
+      }
+      this.loading = true
+      let params = this.getQueryParams()
+      return new Promise(() => {
+        getAction(this.url.list, params).then(res => {
+          if (res.success) {
+            let result = res.result
+            if (Number(result.total) > 0) {
+              this.ipagination.total = Number(result.total)
+              this.dataSource = this.getDataByResult(res.result.records)
+              //update--begin--autor:lvdandan-----date:20201204------for：JT-31 删除成功后默认展开已展开信息
+              return this.loadDataByExpandedRows(this.dataSource)
+              //update--end--autor:lvdandan-----date:20201204------for：JT-31 删除成功后默认展开已展开信息
+            } else {
+              this.ipagination.total = 0
+              this.dataSource = []
+            }
+          } else {
+            this.$message.warning(res.message)
+          }
+        }).finally(() => {
+          this.loading = false
+        })
+      })
    },
-    methods: {
-      loadData(arg){
-        if(arg==1){
-          this.ipagination.current=1
+    getDataByResult(result) {
+      return result.map(item => {
+        //判断是否标记了带有子节点
+        if (item[this.hasChildrenField] == '1') {
+          let loadChild = { id: item.id + '_loadChild', name: 'loading...', isLoading: true }
+          item.children = [loadChild]
        }
-        this.loading = true
-        let params = this.getQueryParams()
-        return new Promise(() => {
-          getAction(this.url.list,params).then(res=>{
-            if(res.success){
-              let result = res.result
-              if(Number(result.total)>0){
-                this.ipagination.total = Number(result.total)
-                this.dataSource = this.getDataByResult(res.result.records)
-                //update--begin--autor:lvdandan-----date:20201204------for：JT-31 删除成功后默认展开已展开信息
-                return this.loadDataByExpandedRows(this.dataSource)
-                //update--end--autor:lvdandan-----date:20201204------for：JT-31 删除成功后默认展开已展开信息
-              }else{
-                this.ipagination.total=0
-                this.dataSource=[]
+        return item
+      })
+    },
+    handleExpand(expanded, record) {
+      // 判断是否是展开状态
+      if (expanded) {
+        this.expandedRowKeys.push(record.id)
+        if (record.children.length > 0 && record.children[0].isLoading === true) {
+          let params = this.getQueryParams()//查询条件
+          params[this.pidField] = record.id
+          getAction(this.url.childList, params).then((res) => {
+            if (res.success) {
+              if (res.result && res.result.length > 0) {
+                record.children = this.getDataByResult(res.result)
+                this.dataSource = [...this.dataSource]
+              } else {
+                record.children = ''
+                record.hasChildrenField = '0'
              }
-            }else{
+            } else {
              this.$message.warning(res.message)
            }
-          }).finally(()=>{
-            this.loading = false
          })
-        })
-      },
-      getDataByResult(result){
-        return result.map(item=>{
-          //判断是否标记了带有子节点
-          if(item[this.hasChildrenField]=='1'){
-            let loadChild = { id: item.id+'_loadChild', name: 'loading...', isLoading: true }
-            item.children = [loadChild]
-          }
-          return item
-        })
-      },
-      handleExpand(expanded, record){
-        // 判断是否是展开状态
-        if (expanded) {
-          this.expandedRowKeys.push(record.id)
-          if (record.children.length>0 && record.children[0].isLoading === true) {
-            let params = this.getQueryParams()//查询条件
-            params[this.pidField] = record.id
-            getAction(this.url.childList,params).then((res)=>{
-              if(res.success){
-                if(res.result && res.result.length>0){
-                  record.children = this.getDataByResult(res.result)
-                  this.dataSource = [...this.dataSource]
-                }else{
-                  record.children=''
-                  record.hasChildrenField='0'
-                }
-              }else{
-                this.$message.warning(res.message)
-              }
-            })
-          }
-        }else{
-          let keyIndex = this.expandedRowKeys.indexOf(record.id)
-          if(keyIndex>=0){
-            this.expandedRowKeys.splice(keyIndex, 1)
+        }
+      } else {
+        let keyIndex = this.expandedRowKeys.indexOf(record.id)
+        if (keyIndex >= 0) {
+          this.expandedRowKeys.splice(keyIndex, 1)
+        }
+      }
+    },
+    initDictConfig() {
+    },
+    modalFormOk(formData, arr) {
+      if (!formData.id) {
+        this.addOk(formData, arr)
+      } else {
+        this.editOk(formData, this.dataSource)
+        this.dataSource = [...this.dataSource]
+      }
+    },
+    editOk(formData, arr) {
+      if (arr && arr.length > 0) {
+        for (let i = 0; i < arr.length; i++) {
+          if (arr[i].id == formData.id) {
+            arr[i] = formData
+            break
+          } else {
+            this.editOk(formData, arr[i].children)
          }
        }
-      },
-      initDictConfig(){
-      },
-      modalFormOk(formData,arr){
-        if(!formData.id){
-          this.addOk(formData,arr)
-        }else{
-          this.editOk(formData,this.dataSource)
-          this.dataSource=[...this.dataSource]
+      }
+    },
+    async addOk(formData, arr) {
+      if (!formData[this.pidField]) {
+        this.loadData()
+      } else {
+        this.expandedRowKeys = []
+        console.log('22222', arr)
+        for (let i of arr) {
+          await this.expandTreeNode(i)
        }
-      },
-      editOk(formData,arr){
-        if(arr && arr.length>0){
-          for(let i=0;i<arr.length;i++){
-            if(arr[i].id==formData.id){
-              arr[i]=formData
-              break
-            }else{
-              this.editOk(formData,arr[i].children)
-            }
-          }
-        }
-      },
-      async addOk(formData,arr){
-        if(!formData[this.pidField]){
-          this.loadData()
-        }else{
-          this.expandedRowKeys=[]
-          console.log('22222',arr)
-          for(let i of arr){
-            await this.expandTreeNode(i)
-          }
-        }
-      },
-      expandTreeNode(nodeId){
-        return new Promise((resolve,reject)=>{
-          this.getFormDataById(nodeId,this.dataSource)
-          let row = this.parentFormData
-          this.expandedRowKeys.push(nodeId)
-          let params = this.getQueryParams()//查询条件
-          params[this.pidField] = nodeId
-          getAction(this.url.childList,params).then((res)=>{
-            console.log('11111',res)
-            if(res.success){
-              if(res.result && res.result.length>0){
-                row.children = this.getDataByResult(res.result)
-                this.dataSource = [...this.dataSource]
-                resolve()
-              }else{
-                row.children=''
-                row.hasChildrenField='0'
-                reject()
-              }
-            }else{
+      }
+    },
+    expandTreeNode(nodeId) {
+      return new Promise((resolve, reject) => {
+        this.getFormDataById(nodeId, this.dataSource)
+        let row = this.parentFormData
+        this.expandedRowKeys.push(nodeId)
+        let params = this.getQueryParams()//查询条件
+        params[this.pidField] = nodeId
+        getAction(this.url.childList, params).then((res) => {
+          console.log('11111', res)
+          if (res.success) {
+            if (res.result && res.result.length > 0) {
+              row.children = this.getDataByResult(res.result)
+              this.dataSource = [...this.dataSource]
+              resolve()
+            } else {
+              row.children = ''
+              row.hasChildrenField = '0'
              reject()
            }
-          })
-        })
-      },
-      getFormDataById(id,arr){
-        if(arr && arr.length>0){
-          for(let i=0;i<arr.length;i++){
-            if(arr[i].id==id){
-              this.parentFormData = arr[i]
-            }else{
-              this.getFormDataById(id,arr[i].children)
-            }
-          }
-        }
-      },
-      handleAddSub(record){
-        this.subExpandedKeys = []
-        this.getExpandKeysByPid(record.id,this.dataSource,this.dataSource)
-        this.$refs.modalForm.subExpandedKeys = this.subExpandedKeys
-        this.$refs.modalForm.title = '添加子分类'
-        this.$refs.modalForm.edit({'pid':record.id})
-        this.$refs.modalForm.disableSubmit = false
-      },
-      handleDelete: function (record) {
-        let that = this
-        deleteAction(that.url.delete, {id: record.id}).then((res) => {
-          if (res.success) {
-            //update--begin--autor:lvdandan-----date:20201204------for：JT-31 删除成功后默认展开已展开信息
-            that.loadData()
-            //update--end--autor:lvdandan-----date:20201204------for：JT-31 删除成功后默认展开已展开信息
          } else {
-            that.$message.warning(res.message)
+            reject()
          }
        })
-      },
-      // 添加子分类时获取所有父级id
-      getExpandKeysByPid(pid,arr,all){
-        if(pid && arr && arr.length>0){
-          for(let i=0;i<arr.length;i++){
-            if(arr[i].id==pid){
-              this.subExpandedKeys.push(arr[i].id)
-              this.getExpandKeysByPid(arr[i]['pid'],all,all)
-            }else{
-              this.getExpandKeysByPid(pid,arr[i].children,all)
-            }
+      })
+    },
+    getFormDataById(id, arr) {
+      if (arr && arr.length > 0) {
+        for (let i = 0; i < arr.length; i++) {
+          if (arr[i].id == id) {
+            this.parentFormData = arr[i]
+          } else {
+            this.getFormDataById(id, arr[i].children)
          }
        }
-      },
-      // 根据已展开的行查询数据（用于保存后刷新时异步加载子级的数据）
-      loadDataByExpandedRows(dataList) {
-        if (this.expandedRowKeys.length > 0) {
-          return getAction(this.url.getChildListBatch,{ parentIds: this.expandedRowKeys.join(',') }).then(res=>{
-            if (res.success && res.result.records.length>0) {
-              //已展开的数据批量子节点
-              let records = res.result.records
-              const listMap = new Map()
-              for (let item of records) {
-                let pid = item[this.pidField]
-                if (this.expandedRowKeys.join(',').includes(pid)) {
-                  let mapList = listMap.get(pid)
-                  if (mapList == null) {
-                    mapList = []
-                  }
-                  mapList.push(item)
-                  listMap.set(pid, mapList)
-                }
-              }
-              let childrenMap = listMap
-              let fn = (list) => {
-                if(list) {
-                  list.forEach(data => {
-                    if (this.expandedRowKeys.includes(data.id)) {
-                      data.children = this.getDataByResult(childrenMap.get(data.id))
-                      fn(data.children)
-                    }
-                  })
-                }
-              }
-              fn(dataList)
-            }
-          })
+      }
+    },
+    handleAddSub(record) {
+      this.subExpandedKeys = []
+      this.getExpandKeysByPid(record.id, this.dataSource, this.dataSource)
+      this.$refs.modalForm.subExpandedKeys = this.subExpandedKeys
+      this.$refs.modalForm.title = '添加子分类'
+      this.$refs.modalForm.edit({ 'pid': record.id })
+      this.$refs.modalForm.disableSubmit = false
+    },
+    handleDelete: function (record) {
+      let that = this
+      deleteAction(that.url.delete, { id: record.id }).then((res) => {
+        if (res.success) {
+          //update--begin--autor:lvdandan-----date:20201204------for：JT-31 删除成功后默认展开已展开信息
+          that.loadData()
+          //update--end--autor:lvdandan-----date:20201204------for：JT-31 删除成功后默认展开已展开信息
        } else {
-          return Promise.resolve()
+          that.$message.warning(res.message)
        }
-      },
-
-
+      })
+    },
+    // 添加子分类时获取所有父级id
+    getExpandKeysByPid(pid, arr, all) {
+      if (pid && arr && arr.length > 0) {
+        for (let i = 0; i < arr.length; i++) {
+          if (arr[i].id == pid) {
+            this.subExpandedKeys.push(arr[i].id)
+            this.getExpandKeysByPid(arr[i]['pid'], all, all)
+          } else {
+            this.getExpandKeysByPid(pid, arr[i].children, all)
+          }
+        }
+      }
+    },
+    // 根据已展开的行查询数据（用于保存后刷新时异步加载子级的数据）
+    loadDataByExpandedRows(dataList) {
+      if (this.expandedRowKeys.length > 0) {
+        return getAction(this.url.getChildListBatch, { parentIds: this.expandedRowKeys.join(',') }).then(res => {
+          if (res.success && res.result.records.length > 0) {
+            //已展开的数据批量子节点
+            let records = res.result.records
+            const listMap = new Map()
+            for (let item of records) {
+              let pid = item[this.pidField]
+              if (this.expandedRowKeys.join(',').includes(pid)) {
+                let mapList = listMap.get(pid)
+                if (mapList == null) {
+                  mapList = []
+                }
+                mapList.push(item)
+                listMap.set(pid, mapList)
+              }
+            }
+            let childrenMap = listMap
+            let fn = (list) => {
+              if (list) {
+                list.forEach(data => {
+                  if (this.expandedRowKeys.includes(data.id)) {
+                    data.children = this.getDataByResult(childrenMap.get(data.id))
+                    fn(data.children)
+                  }
+                })
+              }
+            }
+            fn(dataList)
+          }
+        })
+      } else {
+        return Promise.resolve()
+      }
    }
+
+
  }
+}
 </script>
 <style scoped>
-  @import '~@assets/less/common.less';
+@import '~@assets/less/common.less';
 </style>
@@ -1,66 +1,72 @@
 <template>
-  <a-card :bordered="false">
-    <a-form :form="form" class="form-box">
-      <a-form-item label="频率" :labelCol="labelCol" :wrapperCol="wrapperCol">
-        <j-dict-select-tag
-          v-decorator="['deptFrequency', validatorRules.deptFrequency]"
-          :triggerChange="true"
-          placeholder="请选择频率"
-          dictCode="system_dept_frequency"
-          @change="deptFrequencyChange"/>
-      </a-form-item>
-      <a-form-item label="催款时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
+  <div>
+    <page-header-title :img-for-icon="IconImg"></page-header-title>
+    <a-card :bordered="false">
+      <a-form :form="form" class="form-box">
+        <a-form-item label="频率" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <j-dict-select-tag
+            v-decorator="['deptFrequency', validatorRules.deptFrequency]"
+            :triggerChange="true"
+            placeholder="请选择频率"
+            dictCode="system_dept_frequency"
+            @change="deptFrequencyChange"/>
+        </a-form-item>
+        <a-form-item label="催款时间" :labelCol="labelCol" :wrapperCol="wrapperCol">

-        <!--        仅此一次（年月日）-->
-        <j-date
-          v-if="selectDeptFrequency === '1'"
-          placeholder="请选择催款时间"
-          style="width: 100%;"
-          v-decorator="['deptTime', validatorRules.deptTime]"
-          :trigger-change="true"
-          date-format="YYYY-MM-DD"/>
+          <!--        仅此一次（年月日）-->
+          <j-date
+            v-if="selectDeptFrequency === '1'"
+            placeholder="请选择催款时间"
+            style="width: 100%;"
+            v-decorator="['deptTime', validatorRules.deptTime]"
+            :trigger-change="true"
+            date-format="YYYY-MM-DD"/>

-        <!--        每年一次（月日）-->
-        <div class="m-d">
-          <!--          月-->
-          <template v-if="selectDeptFrequency === '2'">
-            <a-select
-              class="select-month"
-              placeholder="请选择月"
-              @change="handleChange"
-              v-decorator="['deptMonth', validatorRules.deptMonth]"
-              :options="monthOptions">
-            </a-select>
-          </template>
+          <!--        每年一次（月日）-->
+          <div class="m-d">
+            <!--          月-->
+            <template v-if="selectDeptFrequency === '2'">
+              <a-select
+                class="select-month"
+                placeholder="请选择月"
+                @change="handleChange"
+                v-decorator="['deptMonth', validatorRules.deptMonth]"
+                :options="monthOptions">
+              </a-select>
+            </template>

-          <!--          日-->
-          <template v-if="selectDeptFrequency === '2' || selectDeptFrequency === '3'">
-            <a-select
-              style="width: calc(50% - 8px)"
-              placeholder="请选择日"
-              @change="handleChange"
-              v-decorator="['deptDay', validatorRules.deptDay]"
-              :options="dayOptions">
-            </a-select>
-          </template>
-        </div>
-      </a-form-item>
-      <a-form-item class="btn-form">
-        <a-button type="primary" class="btn-form-save">保存</a-button>
-        <a-button class="btn-form-cancel">取消</a-button>
-      </a-form-item>
-    </a-form>
-  </a-card>
+            <!--          日-->
+            <template v-if="selectDeptFrequency === '2' || selectDeptFrequency === '3'">
+              <a-select
+                style="width: calc(50% - 8px)"
+                placeholder="请选择日"
+                @change="handleChange"
+                v-decorator="['deptDay', validatorRules.deptDay]"
+                :options="dayOptions">
+              </a-select>
+            </template>
+          </div>
+        </a-form-item>
+        <a-form-item class="btn-form">
+          <a-button type="primary" class="btn-form-save">保存</a-button>
+          <a-button class="btn-form-cancel">取消</a-button>
+        </a-form-item>
+      </a-form>
+    </a-card>
+  </div>
 </template>

 <script>
 import JDate from '../../components/tools/JDate'
+import IconImg from '@/assets/imgs/icon/icon_system.png'
+import PageHeaderTitle from '../../components/layouts/PageHeaderTitle'

 export default {
  name: 'SystemDept',
-  components: { JDate },
+  components: { JDate, PageHeaderTitle },
  data() {
    return {
+      IconImg,
      form: this.$form.createForm(this),
      model: {},
      labelCol: {
@@ -1,117 +1,123 @@
 <template>
-  <a-card :bordered="false">
-    <!-- 查询区域 -->
-    <div class="table-page-search-wrapper">
-      <a-form layout="inline" @keyup.enter.native="searchQuery">
-        <a-row :gutter="24">
+  <div>
+    <page-header-title :img-for-icon="IconImg"></page-header-title>
+    <a-card :bordered="false">
+      <!-- 查询区域 -->
+      <div class="table-page-search-wrapper">
+        <a-form layout="inline" @keyup.enter.native="searchQuery">
+          <a-row :gutter="24">

-          <a-col :md="6" :sm="12">
-            <a-form-item label="用户账号">
-              <a-input placeholder="请输入用户账号" v-model="queryParam.username"></a-input>
-            </a-form-item>
-          </a-col>
+            <a-col :md="6" :sm="12">
+              <a-form-item label="用户账号">
+                <a-input placeholder="请输入用户账号" v-model="queryParam.username"></a-input>
+              </a-form-item>
+            </a-col>

-          <a-col :md="6" :sm="12">
-            <a-form-item
-              label="角色类型"
-              :labelCol="labelCol"
-              :wrapperCol="wrapperCol">
-              <a-tree-select
-                style="width:100%"
-                :dropdownStyle="{ maxHeight: '200px', overflow: 'auto' }"
-                :treeData="treeRoleData"
-                v-model="queryParam.roleId"
-                placeholder="请选择角色类型"
-              >
-              </a-tree-select>
-            </a-form-item>
-          </a-col>
+            <a-col :md="6" :sm="12">
+              <a-form-item
+                label="角色类型"
+                :labelCol="labelCol"
+                :wrapperCol="wrapperCol">
+                <a-tree-select
+                  style="width:100%"
+                  :dropdownStyle="{ maxHeight: '200px', overflow: 'auto' }"
+                  :treeData="treeRoleData"
+                  v-model="queryParam.roleId"
+                  placeholder="请选择角色类型"
+                >
+                </a-tree-select>
+              </a-form-item>
+            </a-col>

-          <a-col :md="6" :sm="12">
-            <a-form-item
-              label="组织机构"
-              :labelCol="labelCol"
-              :wrapperCol="wrapperCol">
-              <a-tree-select
-                style="width:100%"
-                :dropdownStyle="{ maxHeight: '200px',maxWidth:'100px','overflow-x':'hidden',' overflo-y': 'auto' }"
-                :treeData="treeDepartData"
-                v-model="queryParam.departId"
-                placeholder="请选择组织机构">
-              </a-tree-select>
-            </a-form-item>
-          </a-col>
+            <a-col :md="6" :sm="12">
+              <a-form-item
+                label="组织机构"
+                :labelCol="labelCol"
+                :wrapperCol="wrapperCol">
+                <a-tree-select
+                  style="width:100%"
+                  :dropdownStyle="{ maxHeight: '200px',maxWidth:'100px','overflow-x':'hidden',' overflo-y': 'auto' }"
+                  :treeData="treeDepartData"
+                  v-model="queryParam.departId"
+                  placeholder="请选择组织机构">
+                </a-tree-select>
+              </a-form-item>
+            </a-col>

-          <a-col :md="6" :sm="8">
+            <a-col :md="6" :sm="8">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
-          </a-col>
-        </a-row>
-      </a-form>
-    </div>
+            </a-col>
+          </a-row>
+        </a-form>
+      </div>

-    <!-- 操作按钮区域 -->
-    <div class="table-operator" style="border-top: 5px">
-      <a-button @click="handleAdd" type="primary" icon="plus" v-has="'user:add'">新增</a-button>
-      <a-button @click="downTemplate('用户导入模板')" type="primary" icon="download">下载模板</a-button>
-      <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl"
-                @change="handleImportExcel">
-        <a-button type="primary" icon="import">导入</a-button>
-      </a-upload>
-      <a-button @click="handleExportXls('用户列表')" type="primary" icon="export">导出</a-button>
-      <a-button @click="batchDel" type="danger" icon="delete">批量删除</a-button>
-    </div>
+      <!-- 操作按钮区域 -->
+      <div class="table-operator" style="border-top: 5px">
+        <a-button @click="handleAdd" type="primary" icon="plus" v-has="'user:add'">新增</a-button>
+        <a-button @click="downTemplate('用户导入模板')" type="primary" icon="download">下载模板</a-button>
+        <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl"
+                  @change="handleImportExcel">
+          <a-button type="primary" icon="import">导入</a-button>
+        </a-upload>
+        <a-button @click="handleExportXls('用户列表')" type="primary" icon="export">导出</a-button>
+        <a-button @click="batchDel" type="danger" icon="delete">批量删除</a-button>
+      </div>

-    <!-- table区域-begin -->
-    <div>
+      <!-- table区域-begin -->
+      <div>

-      <a-table
-        ref="table"
-        bordered
-        size="middle"
-        rowKey="id"
-        :scroll="{x:true}"
-        :columns="columns"
-        :dataSource="dataSource"
-        :pagination="ipagination"
-        :loading="loading"
-        class="j-table-force-nowrap"
-        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
-        @change="handleTableChange">
+        <a-table
+          ref="table"
+          bordered
+          size="middle"
+          rowKey="id"
+          :scroll="{x:true}"
+          :columns="columns"
+          :dataSource="dataSource"
+          :pagination="ipagination"
+          :loading="loading"
+          class="j-table-force-nowrap"
+          :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
+          @change="handleTableChange">

        <span slot="action" class="action-span-cell" slot-scope="text, record">
 <!--  1是启用 2是禁用 按钮需要反着来-->
-          <a @click="handleEnable(record)" :class="{'color-red':record.status === 1}">{{record.status === 1 ? '禁用' : '启用'}}</a>
+          <a @click="handleEnable(record)"
+             :class="{'color-red':record.status === 1}">{{ record.status === 1 ? '禁用' : '启用' }}</a>
          <a @click="handleEdit(record)" v-has="'user:edit'">编辑</a>
          <a @click="resetPassword(record)">重置密码</a>
          <a @click="handleDelete(record.id)" v-has="'sys:user:del'">删除</a>
        </span>
-        <template slot="text" slot-scope="text">
-          <j-ellipsis v-if="text" :length="20" :value="text"></j-ellipsis>
-          <span v-else></span>
-        </template>
+          <template slot="text" slot-scope="text">
+            <j-ellipsis v-if="text" :length="20" :value="text"></j-ellipsis>
+            <span v-else></span>
+          </template>

-      </a-table>
-    </div>
-    <!-- table区域-end -->
+        </a-table>
+      </div>
+      <!-- table区域-end -->

-    <user-modal ref="modalForm" @ok="modalFormOk"></user-modal>
+      <user-modal ref="modalForm" @ok="modalFormOk"></user-modal>

-  </a-card>
+    </a-card>
+  </div>
 </template>

 <script>
 import UserModal from './modules/UserModal'
-import {getAction, getFileAccessHttpUrl} from '@/api/manage'
-import {frozenBatch} from '@api/api'
+import { getAction, getFileAccessHttpUrl } from '@/api/manage'
+import { frozenBatch } from '@api/api'
 import '@/assets/less/TableExpand.less'
-import {JeroListMixin} from '@/mixins/JeroListMixin'
+import { JeroListMixin } from '@/mixins/JeroListMixin'
 import '@/assets/less/TableExpand.less'
 // import JInput from '@/components/jero/JInput'
 import JEllipsis from '@comp/jero/JEllipsis'
-import {queryDepartTreeList, resetUserPassword} from '@api/api'
+import { queryDepartTreeList, resetUserPassword } from '@api/api'
+import IconImg from '@/assets/imgs/icon/icon_system.png'
+import PageHeaderTitle from '../../components/layouts/PageHeaderTitle'


 export default {
@@ -120,10 +126,12 @@ export default {
  components: {
    UserModal,
    // JInput,
-    JEllipsis
+    JEllipsis,
+    PageHeaderTitle
  },
  data() {
    return {
+      IconImg,
      description: '这是用户管理页面',
      columns: [
        {
@@ -141,14 +149,14 @@ export default {
          align: 'center',
          dataIndex: 'username',
          width: 120,
-          scopedSlots: {customRender: 'text'},
+          scopedSlots: { customRender: 'text' }
        },
        {
          title: '用户姓名',
          align: 'center',
          width: 160,
          dataIndex: 'realname',
-          scopedSlots: {customRender: 'text'},
+          scopedSlots: { customRender: 'text' }
        },
        // {
        //   title: "性别",
@@ -162,21 +170,21 @@ export default {
          align: 'center',
          width: 160,
          dataIndex: 'phone',
-          scopedSlots: {customRender: 'text'},
+          scopedSlots: { customRender: 'text' }
        },
        {
          title: '角色',
          align: 'center',
          width: 100,
          dataIndex: 'roleName',
-          scopedSlots: {customRender: 'text'},
+          scopedSlots: { customRender: 'text' }
        },
        {
          title: '组织机构',
          align: 'center',
          width: 180,
          dataIndex: 'departIds_dictText',
-          scopedSlots: {customRender: 'text'},
+          scopedSlots: { customRender: 'text' }
        },
        // {
        //   title: '生日',
@@ -195,20 +203,20 @@ export default {
          dataIndex: 'createTime',
          align: 'center',
          width: 170,
-          scopedSlots: {customRender: 'text'},
+          scopedSlots: { customRender: 'text' }
        },
        {
          title: '状态',
          align: 'center',
          width: 80,
          dataIndex: 'status_dictText',
-          scopedSlots: {customRender: 'text'},
+          scopedSlots: { customRender: 'text' }
        },
        {
          title: '操作',
          dataIndex: 'action',
-          scopedSlots: {customRender: 'action'},
-          align: 'center',
+          scopedSlots: { customRender: 'action' },
+          align: 'center'
        }
      ],
      // 组织机构 下拉数据
@@ -216,15 +224,15 @@ export default {
      // 角色类型下拉数据
      treeRoleData: [],
      labelCol: {
-        xs: {span: 24},
-        sm: {span: 5},
+        xs: { span: 24 },
+        sm: { span: 5 }
      },
      wrapperCol: {
-        xs: {span: 20},
-        sm: {span: 16},
+        xs: { span: 20 },
+        sm: { span: 16 }
      },
      superQueryFieldList: [
-        {type: 'input', value: 'username', text: '用户账号'}
+        { type: 'input', value: 'username', text: '用户账号' }
      ],
      url: {
        list: '/sys/user/pageRoleAndDepart',
@@ -242,7 +250,7 @@ export default {
  },
  computed: {
    importExcelUrl() {
-      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
+      return `${ window._CONFIG['domianURL'] }/${ this.url.importExcelUrl }`
    }
  },
  methods: {
@@ -281,7 +289,7 @@ export default {
    * 重置密码
    * */
    resetPassword(record) {
-      resetUserPassword({username: record.username}).then(res => {
+      resetUserPassword({ username: record.username }).then(res => {
        if (res.success) {
          this.$message.success(res.message)
        } else {
@@ -294,12 +302,12 @@ export default {
    * */
    handleEnable(record) {
      let status
-      if(record.status === 1) {
+      if (record.status === 1) {
        status = 2
-      }else if(record.status === 2){
+      } else if (record.status === 2) {
        status = 1
      }
-      frozenBatch({ids: record.id, status}).then(res => {
+      frozenBatch({ ids: record.id, status }).then(res => {
        if (res.success) {
          this.$message.success(res.message)
          this.loadData()
@@ -314,6 +322,7 @@ export default {
 </script>
 <style scoped lang="less">
@import '~@assets/less/common.less';
+
 .color-red {
  color: red;
 }