系统管理页面样式

src/views/system/ConfusionList.vue

@@ -1,4 +1,6 @@
 <template>
+  <div>
+    <page-header-title :img-for-icon="IconImg"></page-header-title>
     <a-card :bordered="false">
       <!-- 查询区域 -->
       <div class="table-page-search-wrapper">
@@ -34,24 +36,25 @@
       <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-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-dropdown v-if="selectedRowKeys.length > 0">-->
-<!--        <a-menu slot="overlay">-->
+        <!--        <a-menu slot="overlay">-->
-<!--          <a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item>-->
+        <!--          <a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item>-->
-<!--        </a-menu>-->
+        <!--        </a-menu>-->
-<!--        <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>-->
+        <!--        <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>-->
-<!--      </a-dropdown>-->
+        <!--      </a-dropdown>-->
       </div>
 
       <!-- table区域-begin -->
       <div>
-<!--      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">-->
+        <!--      <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>项-->
+        <!--        <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>-->
+        <!--        <a style="margin-left: 24px" @click="onClearSelected">清空</a>-->
-<!--      </div>-->
+        <!--      </div>-->
 
         <a-table
           ref="table"
@@ -71,7 +74,8 @@
           </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;"/>
+            <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>
@@ -99,62 +103,67 @@
 
       <sys-confusion-modal ref="modalForm" @ok="modalFormOk"></sys-confusion-modal>
     </a-card>
+  </div>
 </template>
 
 <script>
 
-  import '@/assets/less/TableExpand.less'
+import '@/assets/less/TableExpand.less'
-  import { mixinDevice } from '@/utils/mixin'
+import { mixinDevice } from '@/utils/mixin'
-  import { JeroListMixin } from '@/mixins/JeroListMixin'
+import { JeroListMixin } from '@/mixins/JeroListMixin'
-  import SysConfusionModal from './modules/SysConfusionModal'
+import SysConfusionModal from './modules/SysConfusionModal'
-  import JEllipsis from '@comp/jero/JEllipsis'
+import JEllipsis from '@comp/jero/JEllipsis'
+import IconImg from '@/assets/imgs/icon/icon_system.png'
+import PageHeaderTitle from '../../components/layouts/PageHeaderTitle'
 
-  export default {
+export default {
   name: 'SysConfusionList',
-    mixins:[JeroListMixin, mixinDevice],
+  mixins: [JeroListMixin, mixinDevice],
   components: {
     SysConfusionModal,
-      JEllipsis
+    JEllipsis,
+    PageHeaderTitle
   },
-    data () {
+  data() {
     return {
+      IconImg,
       description: '混淆表管理页面',
       // 表头
       columns: [
         {
           title: '序号',
           dataIndex: '',
-            key:'rowIndex',
+          key: 'rowIndex',
-            width:60,
+          width: 60,
-            align:'center',
+          align: 'center',
-            customRender:function (t,r,index) {
+          customRender: function (t, r, index) {
-              return parseInt(index)+1
+            return parseInt(index) + 1
           }
         },
         {
-            title:'表名',
+          title: '表名',
-            align:'center',
+          align: 'center',
           dataIndex: 'tableName',
           scopedSlots: { customRender: 'text' }
         },
         {
-            title:'字段名',
+          title: '字段名',
-            align:'center',
+          align: 'center',
           dataIndex: 'fieldName',
           scopedSlots: { customRender: 'text' }
         },
         {
-            title:'混淆码',
+          title: '混淆码',
-            align:'center',
+          align: 'center',
           dataIndex: 'confusionCode',
           scopedSlots: { customRender: 'text' }
         },
         {
           title: '操作',
           dataIndex: 'action',
-            align:'center',
+          align: 'center',
-            fixed:'right',
+          fixed: 'right',
-            width:147,
+          width: 147,
           scopedSlots: { customRender: 'action' }
         }
       ],
@@ -163,33 +172,33 @@
         delete: '/sys/confusion/delete',
         deleteBatch: '/sys/confusion/deleteBatch',
         exportXlsUrl: '/sys/confusion/exportXls',
-          importExcelUrl: '/sys/confusion/importExcel',
+        importExcelUrl: '/sys/confusion/importExcel'
 
       },
-        dictOptions:{},
+      dictOptions: {},
-        superFieldList:[],
+      superFieldList: []
     }
   },
   created() {
     this.getSuperFieldList()
   },
   computed: {
-      importExcelUrl: function(){
+    importExcelUrl: function () {
-        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
+      return `${ window._CONFIG['domianURL'] }/${ this.url.importExcelUrl }`
-      },
+    }
   },
   methods: {
-      initDictConfig(){
+    initDictConfig() {
     },
-      getSuperFieldList(){
+    getSuperFieldList() {
-        let fieldList=[]
+      let fieldList = []
-        fieldList.push({type:'string',value:'confusionType',text:'混淆类型',dictCode:''})
+      fieldList.push({ type: 'string', value: 'confusionType', text: '混淆类型', dictCode: '' })
-        fieldList.push({type:'string',value:'confusionName',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>

src/views/system/DepartList.vue

@@ -1,13 +1,16 @@
 <template xmlns:background-color="http://www.w3.org/1999/xhtml">
+  <div>
+    <page-header-title :img-for-icon="IconImg"></page-header-title>
     <a-row :gutter="10">
-    <a-col :md="10" :sm="24" >
+      <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-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>
@@ -63,7 +66,8 @@
               <a-menu-item key="6" @click="closeAll">合并所有</a-menu-item>
             </a-menu>
             <a-button>
-            树操作 <a-icon type="up" />
+              树操作
+              <a-icon type="up"/>
             </a-button>
           </a-dropdown>
         </div>
@@ -71,14 +75,15 @@
       </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-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-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
@@ -94,7 +99,9 @@
                   :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-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"
@@ -128,24 +135,29 @@
                   :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-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-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-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>
+                <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;">
@@ -154,26 +166,29 @@
               </a-empty>
             </a-card>
           </a-tab-pane>
-<!--        <a-tab-pane tab="部门权限" key="2" forceRender>-->
+          <!--        <a-tab-pane tab="部门权限" key="2" forceRender>-->
-<!--          <depart-auth-modules ref="departAuth"/>-->
+          <!--          <depart-auth-modules ref="departAuth"/>-->
-<!--        </a-tab-pane>-->
+          <!--        </a-tab-pane>-->
-<!--        <a-tab-pane tab="用户信息" key="3">-->
+          <!--        <a-tab-pane tab="用户信息" key="3">-->
-<!--          <Dept-User-Info ref="DeptUserInfo"></Dept-User-Info>-->
+          <!--          <Dept-User-Info ref="DeptUserInfo"></Dept-User-Info>-->
-<!--        </a-tab-pane>-->
+          <!--        </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 { queryDepartTreeList, searchByKeywords, deleteByDepartId } from '@/api/api'
-import {httpAction,getAction} from '@/api/manage'
+import { httpAction, getAction } from '@/api/manage'
-import {JeroListMixin} from '@/mixins/JeroListMixin'
+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},
+        xs: { span: 24 },
-        sm: {span: 5}
+        sm: { span: 5 }
       },
       wrapperCol: {
-        xs: {span: 24},
+        xs: { span: 24 },
-        sm: {span: 16}
+        sm: { span: 16 }
       },
       graphDatasource: {
         nodes: [],
         edges: []
       },
       validatorRules: {
-        departName: {rules: [{required: true,validator: this.validateDepartName}]},
+        departName: { rules: [{ required: true, validator: this.validateDepartName }] },
-        orgCode: {rules: [{required: true, message: '请输入机构编码!'}]},
+        orgCode: { rules: [{ required: true, message: '请输入机构编码!' }] },
-        orgCategory: {rules: [{required: true, message: '请输入机构类型!'}]},
+        orgCategory: { rules: [{ required: true, message: '请输入机构类型!' }] },
-        mobile: {rules: [{validator: this.validateMobile}]}
+        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){
+      if (this.$refs.DeptUserInfo !== undefined) {
         this.$refs.DeptUserInfo.open(record)
       }
     },
     // 部门名称判断重复
-    validateDepartName(rule, value, callback){
+    validateDepartName(rule, value, callback) {
-      checkDepartName(value,this.currentDepartSelectedId).then(res => {
+      checkDepartName(value, this.currentDepartSelectedId).then(res => {
-        if(res.success){
+        if (res.success) {
           callback()
-        }else {
+        } else {
-          callback(res.code === 500 ? '机构/部门已经存在': res)
+          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.getFieldDecorator('fax', { initialValue: '' })
-        this.form.setFieldsValue(pick(record, 'departName','orgCategory', 'orgCode', 'departOrder', 'mobile', 'fax', 'address', 'memo'))
+        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')
+              let orgCode = that.form.getFieldValue('orgCode')
-              if(orgCode && orgCode === that.rightClickSelectedOrgCode){
+              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>

src/views/system/DepartUserList.vue

@@ -1,4 +1,6 @@
 <template>
+  <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">
@@ -45,24 +47,29 @@
         </a-card>
       </a-col>
     </a-row>
+  </div>
 </template>
 <script>
-  import DeptBaseInfo from './modules/DeptBaseInfo'
+import DeptBaseInfo from './modules/DeptBaseInfo'
-  import DeptUserInfo from './modules/DeptUserInfo'
+import DeptUserInfo from './modules/DeptUserInfo'
-  import {queryMyDepartTreeList, searchByKeywords} from '@/api/api'
+import { queryMyDepartTreeList, searchByKeywords } from '@/api/api'
-  import {JeroListMixin} from '@/mixins/JeroListMixin'
+import { JeroListMixin } from '@/mixins/JeroListMixin'
-  import DeptRoleInfo from './modules/DeptRoleInfo'
+import DeptRoleInfo from './modules/DeptRoleInfo'
+import IconImg from '@/assets/imgs/icon/icon_system.png'
+import PageHeaderTitle from '../../components/layouts/PageHeaderTitle'
 
-  export default {
+export default {
   name: 'DepartUserList',
   mixins: [JeroListMixin],
   components: {
     DeptRoleInfo,
     DeptBaseInfo,
     DeptUserInfo,
+    PageHeaderTitle
   },
   data() {
     return {
+      IconImg,
       currentDeptId: '',
       iExpandedKeys: [],
       loading: false,
@@ -85,18 +92,18 @@
       currSelected: {},
       form: this.$form.createForm(this),
       labelCol: {
-          xs: {span: 24},
+        xs: { span: 24 },
-          sm: {span: 5}
+        sm: { span: 5 }
       },
       wrapperCol: {
-          xs: {span: 24},
+        xs: { span: 24 },
-          sm: {span: 16}
+        sm: { span: 16 }
       },
       graphDatasource: {
         nodes: [],
         edges: []
       },
-        userIdentity:'',
+      userIdentity: ''
     }
   },
   methods: {
@@ -110,15 +117,15 @@
       this.checkedKeys = []
       this.selectedKeys = []
       this.currentDeptId = ''
-        this.$refs.DeptUserInfo.currentDeptId=''
+      this.$refs.DeptUserInfo.currentDeptId = ''
-        this.$refs.DeptRoleInfo.currentDeptId=''
+      this.$refs.DeptRoleInfo.currentDeptId = ''
     },
     loadTree() {
       var that = this
       that.treeData = []
       that.departTree = []
       queryMyDepartTreeList().then((res) => {
-          if (res.success && res.result ) {
+        if (res.success && res.result) {
           for (let i = 0; i < res.result.length; i++) {
             let temp = res.result[i]
             that.treeData.push(temp)
@@ -159,7 +166,7 @@
     onSearch(value) {
       let that = this
       if (value) {
-          searchByKeywords({keyWord: value,myDeptSearch:'1'}).then((res) => {
+        searchByKeywords({ keyWord: value, myDeptSearch: '1' }).then((res) => {
           if (res.success) {
             that.departTree = []
             for (let i = 0; i < res.result.length; i++) {
@@ -207,15 +214,15 @@
       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>

src/views/system/DictList.vue

@@ -1,4 +1,6 @@
 <template>
+  <div>
+    <page-header-title :img-for-icon="IconImg"></page-header-title>
     <a-card :bordered="false">
 
       <!-- 左侧面板 -->
@@ -26,8 +28,11 @@
 
         <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-button type="primary" icon="download" @click="handleExportXls('字典信息')" v-has="'sys:dict:export'">导出
-        <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" v-has="'sys:dict:import'" @change="handleImportExcel">
+          </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>
@@ -51,9 +56,9 @@
             编辑
           </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">
@@ -67,31 +72,35 @@
       <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 { filterObj } from '@/utils/util'
-  import { JeroListMixin } from '@/mixins/JeroListMixin'
+import { JeroListMixin } from '@/mixins/JeroListMixin'
-  import DictModal from './modules/DictModal'
+import DictModal from './modules/DictModal'
-  import DictItemList from './DictItemList'
+import DictItemList from './DictItemList'
-  import DictDeleteList from './DictDeleteList'
+import DictDeleteList from './DictDeleteList'
-  import { getAction } from '@api/manage'
+import { getAction } from '@api/manage'
-  import { UI_CACHE_DB_DICT_DATA } from '@/store/mutation-types'
+import { UI_CACHE_DB_DICT_DATA } from '@/store/mutation-types'
-  import Vue from 'vue'
+import Vue from 'vue'
-  import JEllipsis from '@comp/jero/JEllipsis'
+import JEllipsis from '@comp/jero/JEllipsis'
+import IconImg from '@/assets/imgs/icon/icon_system.png'
+import PageHeaderTitle from '../../components/layouts/PageHeaderTitle'
 
-  export default {
+export default {
   name: 'DictList',
-    mixins:[JeroListMixin],
+  mixins: [JeroListMixin],
-    components: {DictModal, DictItemList,DictDeleteList,JEllipsis},
+  components: { DictModal, DictItemList, DictDeleteList, JEllipsis, PageHeaderTitle },
   data() {
     return {
+      IconImg,
       description: '这是数据字典页面',
       visible: false,
       // 查询条件
       queryParam: {
         dictCode: '',
-          dictName: '',
+        dictName: ''
       },
       // 表头
       columns: [
@@ -127,17 +136,17 @@
           title: '操作',
           dataIndex: 'action',
           align: 'center',
-            scopedSlots: {customRender: 'action'},
+          scopedSlots: { customRender: 'action' }
         }
       ],
       dict: '',
       labelCol: {
-          xs: {span: 8},
+        xs: { span: 8 },
-          sm: {span: 5},
+        sm: { span: 5 }
       },
       wrapperCol: {
-          xs: {span: 16},
+        xs: { span: 16 },
-          sm: {span: 19},
+        sm: { span: 19 }
       },
       url: {
         list: '/sys/dict/page',
@@ -145,13 +154,13 @@
         exportXlsUrl: 'sys/dict/exportXls',
         importExcelUrl: 'sys/dict/importExcel',
         refleshCache: 'sys/dict/refleshCache',
-          queryAllDictItems: 'sys/dict/queryAllDictItems',
+        queryAllDictItems: 'sys/dict/queryAllDictItems'
-        },
+      }
     }
   },
   computed: {
     importExcelUrl: function () {
-        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
+      return `${ window._CONFIG['domianURL'] }/${ this.url.importExcelUrl }`
     }
   },
   methods: {
@@ -183,10 +192,10 @@
     //   that.queryParam.dictCode = "";
     //   that.loadData(this.ipagination.current);
     // },
-      openDeleteList(){
+    openDeleteList() {
       this.$refs.dictDeleteList.show()
     },
-      refleshCache(){
+    refleshCache() {
       getAction(this.url.refleshCache).then((res) => {
         if (res.success) {
           //重新加载缓存
@@ -198,19 +207,19 @@
           })
           this.$message.success('刷新缓存完成！')
         }
-        }).catch(e=>{
+      }).catch(e => {
         this.$message.warn('刷新缓存失败！')
-          console.log('刷新失败',e)
+        console.log('刷新失败', e)
       })
     }
   },
   watch: {
     openKeys(val) {
       console.log('openKeys', val)
-      },
-    },
     }
+  }
+}
 </script>
 <style scoped>
-  @import '~@assets/less/common.less';
+@import '~@assets/less/common.less';
 </style>

src/views/system/LogList.vue

@@ -1,4 +1,6 @@
 <template>
+  <div>
+    <page-header-title :img-for-icon="IconImg"></page-header-title>
     <a-card :bordered="false">
       <!--导航区域-->
       <div>
@@ -71,21 +73,26 @@
       </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: {

src/views/system/PermissionList.vue

@@ -1,4 +1,7 @@
 <template>
+  <div>
+    <page-header-title :img-for-icon="IconImg"></page-header-title>
+
     <a-card :bordered="false">
 
       <!-- 操作按钮区域 -->
@@ -16,12 +19,12 @@
       <!-- table区域-begin -->
       <div>
 
-<!--      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">-->
+        <!--      <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">{{-->
+        <!--        <i class="anticon anticon-info-circle ant-alert-icon"></i>已选择&nbsp;<a style="font-weight: 600">{{-->
-<!--        selectedRowKeys.length }}</a>项&nbsp;&nbsp;-->
+        <!--        selectedRowKeys.length }}</a>项&nbsp;&nbsp;-->
-<!--        <a style="margin-left: 24px" @click="onClearSelected">清空</a>-->
+        <!--        <a style="margin-left: 24px" @click="onClearSelected">清空</a>-->
-<!--      </div>-->
+        <!--      </div>-->
-<!--      :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"-->
+        <!--      :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"-->
         <a-table
           :columns="columns"
           bordered
@@ -53,7 +56,7 @@
 
               <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>
@@ -76,16 +79,19 @@
       <permission-data-rule-list ref="PermissionDataRuleList" @ok="modalFormOk"></permission-data-rule-list>
 
     </a-card>
+  </div>
 </template>
 
 <script>
-  import PermissionModal from './modules/PermissionModal'
+import PermissionModal from './modules/PermissionModal'
-  import { getPermissionList } from '@/api/api'
+import { getPermissionList } from '@/api/api'
-  import { JeroListMixin } from '@/mixins/JeroListMixin'
+import { JeroListMixin } from '@/mixins/JeroListMixin'
-  import PermissionDataRuleList from './PermissionDataRuleList'
+import PermissionDataRuleList from './PermissionDataRuleList'
-  import JEllipsis from '@/components/jero/JEllipsis'
+import JEllipsis from '@/components/jero/JEllipsis'
+import PageHeaderTitle from '../../components/layouts/PageHeaderTitle'
+import IconImg from '@/assets/imgs/icon/icon_system.png'
 
-  const columns = [
+const columns = [
   {
     title: '菜单名称',
     dataIndex: 'name',
@@ -94,7 +100,7 @@
     title: '菜单类型',
     dataIndex: 'menuType',
     key: 'menuType',
-      customRender: function(text) {
+    customRender: function (text) {
       if (text == 0) {
         return '菜单'
       } else if (text == 1) {
@@ -139,18 +145,20 @@
     align: 'center',
     width: 150
   }
-  ]
+]
 
-  export default {
+export default {
   name: 'PermissionList',
   mixins: [JeroListMixin],
   components: {
     PermissionDataRuleList,
     PermissionModal,
-      JEllipsis
+    JEllipsis,
+    PageHeaderTitle
   },
   data() {
     return {
+      IconImg,
       description: '这是菜单管理页面',
       // 表头
       columns: columns,
@@ -182,14 +190,14 @@
       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})
+      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>

src/views/system/QuartzJobList.vue

@@ -1,4 +1,6 @@
 <template>
+  <div>
+    <page-header-title :img-for-icon="IconImg"></page-header-title>
     <a-card :bordered="false">
 
       <!-- 查询区域 -->
@@ -41,26 +43,26 @@
           <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-dropdown v-if="selectedRowKeys.length > 0">-->
-<!--        <a-menu slot="overlay">-->
+        <!--        <a-menu slot="overlay">-->
-<!--          <a-menu-item key="1" @click="batchDel">-->
+        <!--          <a-menu-item key="1" @click="batchDel">-->
-<!--            <a-icon type="delete"/>-->
+        <!--            <a-icon type="delete"/>-->
-<!--            删除-->
+        <!--            删除-->
-<!--          </a-menu-item>-->
+        <!--          </a-menu-item>-->
-<!--        </a-menu>-->
+        <!--        </a-menu>-->
-<!--        <a-button style="margin-left: 8px"> 批量操作-->
+        <!--        <a-button style="margin-left: 8px"> 批量操作-->
-<!--          <a-icon type="down"/>-->
+        <!--          <a-icon type="down"/>-->
-<!--        </a-button>-->
+        <!--        </a-button>-->
-<!--      </a-dropdown>-->
+        <!--      </a-dropdown>-->
       </div>
 
       <!-- table区域-begin -->
-<!--    <div>-->
+      <!--    <div>-->
-<!--      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">-->
+      <!--      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">-->
-<!--        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a-->
+      <!--        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a-->
-<!--          style="font-weight: 600">{{ selectedRowKeys.length }}</a>项-->
+      <!--          style="font-weight: 600">{{ selectedRowKeys.length }}</a>项-->
-<!--        <a style="margin-left: 24px" @click="onClearSelected">清空</a>-->
+      <!--        <a style="margin-left: 24px" @click="onClearSelected">清空</a>-->
-<!--      </div>-->
+      <!--      </div>-->
 
       <a-table
         ref="table"
@@ -88,18 +90,18 @@
           <a @click="pauseJob(record)" v-if="record.status==0">停止</a>
           <a @click="handleEdit(record)">编辑</a>
           <a @click="handleDelete(record.id)">删除</a>
-<!--          <a-dropdown>-->
+          <!--          <a-dropdown>-->
-<!--            <a class="ant-dropdown-link">更多 <a-icon type="down"/></a>-->
+          <!--            <a class="ant-dropdown-link">更多 <a-icon type="down"/></a>-->
-<!--            <a-menu slot="overlay">-->
+          <!--            <a-menu slot="overlay">-->
-<!--              <a-menu-item><a @click="executeImmediately(record)">立即执行</a></a-menu-item>-->
+          <!--              <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 @click="handleEdit(record)">编辑</a></a-menu-item>-->
-<!--              <a-menu-item>-->
+          <!--              <a-menu-item>-->
-<!--                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">-->
+          <!--                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">-->
 
-<!--                </a-popconfirm>-->
+          <!--                </a-popconfirm>-->
-<!--              </a-menu-item>-->
+          <!--              </a-menu-item>-->
-<!--            </a-menu>-->
+          <!--            </a-menu>-->
-<!--          </a-dropdown>-->
+          <!--          </a-dropdown>-->
         </span>
 
         <!-- 状态渲染模板 -->
@@ -114,23 +116,28 @@
       <!-- 表单区域 -->
       <quartzJob-modal ref="modalForm" @ok="modalFormOk"></quartzJob-modal>
     </a-card>
+  </div>
 </template>
 
 <script>
 import QuartzJobModal from './modules/QuartzJobModal'
-import {getAction} from '@/api/manage'
+import { getAction } from '@/api/manage'
-import {JeroListMixin} from '@/mixins/JeroListMixin'
+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: '0' },
-            {text: '已暂停', value: '-1'},
+            { 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()

src/views/system/RoleUserList.vue

@@ -1,4 +1,6 @@
 <template>
+  <div>
+    <page-header-title :img-for-icon="IconImg"></page-header-title>
     <a-card :bordered="false">
       <!-- 查询区域 -->
       <div class="table-page-search-wrapper">
@@ -55,14 +57,17 @@
       <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 { JeroListMixin } from '@/mixins/JeroListMixin'
-import {postAction} from '@/api/manage'
+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,9 +77,11 @@ export default {
     UserRoleModal,
     RoleModal,
     JEllipsis,
+    PageHeaderTitle
   },
   data() {
     return {
+      IconImg,
       model1: {},
       model2: {},
       currentRoleId: '',
@@ -87,13 +94,13 @@ export default {
             align: 'center',
             dataIndex: 'roleCode',
             width: 160,
-              scopedSlots: {customRender: 'text'}
+            scopedSlots: { customRender: 'text' }
           },
           {
             title: '角色名称',
             align: 'center',
             dataIndex: 'roleName',
-              scopedSlots: {customRender: 'text'}
+            scopedSlots: { customRender: 'text' }
           },
           {
             title: '上级角色',
@@ -102,7 +109,7 @@ export default {
             customRender(text) {
               if (text) {
                 return text
-                }else {
+              } else {
                 return '无'
               }
             }
@@ -112,7 +119,7 @@ export default {
             dataIndex: 'createTime',
             align: 'center',
             sorter: true,
-              scopedSlots: {customRender: 'text'},
+            scopedSlots: { customRender: 'text' },
             customRender: (text) => {
               return moment(text).format('YYYY-MM-DD HH:mm:ss')
             }
@@ -121,7 +128,7 @@ export default {
             title: '操作',
             dataIndex: 'action',
             align: 'center',
-              scopedSlots: {customRender: 'action'}
+            scopedSlots: { customRender: 'action' }
           }
         ],
       url: {
@@ -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>

src/views/system/SysCategoryList.vue

@@ -1,25 +1,34 @@
 <template>
+  <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-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-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-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>项
+          <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>
 
@@ -38,11 +47,11 @@
 
         <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>
 
@@ -51,41 +60,46 @@
 
       <sysCategory-modal ref="modalForm" @ok="modalFormOk"></sysCategory-modal>
     </a-card>
+  </div>
 </template>
 
 <script>
 
-  import { getAction } from '@/api/manage'
+import { getAction } from '@/api/manage'
-  import { JeroListMixin } from '@/mixins/JeroListMixin'
+import { JeroListMixin } from '@/mixins/JeroListMixin'
-  import SysCategoryModal from './modules/SysCategoryModal'
+import SysCategoryModal from './modules/SysCategoryModal'
-  import { deleteAction } from '@/api/manage'
+import { deleteAction } from '@/api/manage'
+import IconImg from '@/assets/imgs/icon/icon_system.png'
+import PageHeaderTitle from '../../components/layouts/PageHeaderTitle'
 
-  export default {
+export default {
   name: 'SysCategoryList',
-    mixins:[JeroListMixin],
+  mixins: [JeroListMixin],
   components: {
-      SysCategoryModal
+    SysCategoryModal,
+    PageHeaderTitle
   },
-    data () {
+  data() {
     return {
+      IconImg,
       description: '分类字典管理页面',
       // 表头
       columns: [
         {
-            title:'分类名称',
+          title: '分类名称',
-            align:'left',
+          align: 'left',
           dataIndex: 'name'
         },
         {
-            title:'分类编码',
+          title: '分类编码',
-            align:'left',
+          align: 'left',
           dataIndex: 'code'
         },
         {
           title: '操作',
           dataIndex: 'action',
-            align:'center',
+          align: 'center',
-            scopedSlots: { customRender: 'action' },
+          scopedSlots: { customRender: 'action' }
         }
       ],
       url: {
@@ -95,19 +109,18 @@
         delete: '/sys/category/delete',
         deleteBatch: '/sys/category/deleteBatch',
         exportXlsUrl: '/sys/category/exportXls',
-          importExcelUrl: 'sys/category/importExcel',
+        importExcelUrl: 'sys/category/importExcel'
       },
-        expandedRowKeys:[],
+      expandedRowKeys: [],
-        hasChildrenField:'hasChild',
+      hasChildrenField: 'hasChild',
-        pidField:'pid',
+      pidField: 'pid',
-        dictOptions:{
+      dictOptions: {},
-        },
+      subExpandedKeys: []
-        subExpandedKeys:[],
     }
   },
   computed: {
-      importExcelUrl(){
+    importExcelUrl() {
-        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
+      return `${ window._CONFIG['domianURL'] }/${ this.url.importExcelUrl }`
     },
     tableProps() {
       let _this = this
@@ -121,152 +134,152 @@
     }
   },
   methods: {
-      loadData(arg){
+    loadData(arg) {
-        if(arg==1){
+      if (arg == 1) {
-          this.ipagination.current=1
+        this.ipagination.current = 1
       }
       this.loading = true
       let params = this.getQueryParams()
       return new Promise(() => {
-          getAction(this.url.list,params).then(res=>{
+        getAction(this.url.list, params).then(res => {
-            if(res.success){
+          if (res.success) {
             let result = res.result
-              if(Number(result.total)>0){
+            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{
+            } else {
-                this.ipagination.total=0
+              this.ipagination.total = 0
-                this.dataSource=[]
+              this.dataSource = []
             }
-            }else{
+          } else {
             this.$message.warning(res.message)
           }
-          }).finally(()=>{
+        }).finally(() => {
           this.loading = false
         })
       })
     },
-      getDataByResult(result){
+    getDataByResult(result) {
-        return result.map(item=>{
+      return result.map(item => {
         //判断是否标记了带有子节点
-          if(item[this.hasChildrenField]=='1'){
+        if (item[this.hasChildrenField] == '1') {
-            let loadChild = { id: item.id+'_loadChild', name: 'loading...', isLoading: true }
+          let loadChild = { id: item.id + '_loadChild', name: 'loading...', isLoading: true }
           item.children = [loadChild]
         }
         return item
       })
     },
-      handleExpand(expanded, record){
+    handleExpand(expanded, record) {
       // 判断是否是展开状态
       if (expanded) {
         this.expandedRowKeys.push(record.id)
-          if (record.children.length>0 && record.children[0].isLoading === true) {
+        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)=>{
+          getAction(this.url.childList, params).then((res) => {
-              if(res.success){
+            if (res.success) {
-                if(res.result && res.result.length>0){
+              if (res.result && res.result.length > 0) {
                 record.children = this.getDataByResult(res.result)
                 this.dataSource = [...this.dataSource]
-                }else{
+              } else {
-                  record.children=''
+                record.children = ''
-                  record.hasChildrenField='0'
+                record.hasChildrenField = '0'
               }
-              }else{
+            } else {
               this.$message.warning(res.message)
             }
           })
         }
-        }else{
+      } else {
         let keyIndex = this.expandedRowKeys.indexOf(record.id)
-          if(keyIndex>=0){
+        if (keyIndex >= 0) {
           this.expandedRowKeys.splice(keyIndex, 1)
         }
       }
     },
-      initDictConfig(){
+    initDictConfig() {
     },
-      modalFormOk(formData,arr){
+    modalFormOk(formData, arr) {
-        if(!formData.id){
+      if (!formData.id) {
-          this.addOk(formData,arr)
+        this.addOk(formData, arr)
-        }else{
+      } else {
-          this.editOk(formData,this.dataSource)
+        this.editOk(formData, this.dataSource)
-          this.dataSource=[...this.dataSource]
+        this.dataSource = [...this.dataSource]
       }
     },
-      editOk(formData,arr){
+    editOk(formData, arr) {
-        if(arr && arr.length>0){
+      if (arr && arr.length > 0) {
-          for(let i=0;i<arr.length;i++){
+        for (let i = 0; i < arr.length; i++) {
-            if(arr[i].id==formData.id){
+          if (arr[i].id == formData.id) {
-              arr[i]=formData
+            arr[i] = formData
             break
-            }else{
+          } else {
-              this.editOk(formData,arr[i].children)
+            this.editOk(formData, arr[i].children)
           }
         }
       }
     },
-      async addOk(formData,arr){
+    async addOk(formData, arr) {
-        if(!formData[this.pidField]){
+      if (!formData[this.pidField]) {
         this.loadData()
-        }else{
+      } else {
-          this.expandedRowKeys=[]
+        this.expandedRowKeys = []
-          console.log('22222',arr)
+        console.log('22222', arr)
-          for(let i of arr){
+        for (let i of arr) {
           await this.expandTreeNode(i)
         }
       }
     },
-      expandTreeNode(nodeId){
+    expandTreeNode(nodeId) {
-        return new Promise((resolve,reject)=>{
+      return new Promise((resolve, reject) => {
-          this.getFormDataById(nodeId,this.dataSource)
+        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)=>{
+        getAction(this.url.childList, params).then((res) => {
-            console.log('11111',res)
+          console.log('11111', res)
-            if(res.success){
+          if (res.success) {
-              if(res.result && res.result.length>0){
+            if (res.result && res.result.length > 0) {
               row.children = this.getDataByResult(res.result)
               this.dataSource = [...this.dataSource]
               resolve()
-              }else{
+            } else {
-                row.children=''
+              row.children = ''
-                row.hasChildrenField='0'
+              row.hasChildrenField = '0'
               reject()
             }
-            }else{
+          } else {
             reject()
           }
         })
       })
     },
-      getFormDataById(id,arr){
+    getFormDataById(id, arr) {
-        if(arr && arr.length>0){
+      if (arr && arr.length > 0) {
-          for(let i=0;i<arr.length;i++){
+        for (let i = 0; i < arr.length; i++) {
-            if(arr[i].id==id){
+          if (arr[i].id == id) {
             this.parentFormData = arr[i]
-            }else{
+          } else {
-              this.getFormDataById(id,arr[i].children)
+            this.getFormDataById(id, arr[i].children)
           }
         }
       }
     },
-      handleAddSub(record){
+    handleAddSub(record) {
       this.subExpandedKeys = []
-        this.getExpandKeysByPid(record.id,this.dataSource,this.dataSource)
+      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.edit({ 'pid': record.id })
       this.$refs.modalForm.disableSubmit = false
     },
     handleDelete: function (record) {
       let that = this
-        deleteAction(that.url.delete, {id: record.id}).then((res) => {
+      deleteAction(that.url.delete, { id: record.id }).then((res) => {
         if (res.success) {
           //update--begin--autor:lvdandan-----date:20201204------for：JT-31 删除成功后默认展开已展开信息
           that.loadData()
@@ -277,14 +290,14 @@
       })
     },
     // 添加子分类时获取所有父级id
-      getExpandKeysByPid(pid,arr,all){
+    getExpandKeysByPid(pid, arr, all) {
-        if(pid && arr && arr.length>0){
+      if (pid && arr && arr.length > 0) {
-          for(let i=0;i<arr.length;i++){
+        for (let i = 0; i < arr.length; i++) {
-            if(arr[i].id==pid){
+          if (arr[i].id == pid) {
             this.subExpandedKeys.push(arr[i].id)
-              this.getExpandKeysByPid(arr[i]['pid'],all,all)
+            this.getExpandKeysByPid(arr[i]['pid'], all, all)
-            }else{
+          } else {
-              this.getExpandKeysByPid(pid,arr[i].children,all)
+            this.getExpandKeysByPid(pid, arr[i].children, all)
           }
         }
       }
@@ -292,8 +305,8 @@
     // 根据已展开的行查询数据（用于保存后刷新时异步加载子级的数据）
     loadDataByExpandedRows(dataList) {
       if (this.expandedRowKeys.length > 0) {
-          return getAction(this.url.getChildListBatch,{ parentIds: this.expandedRowKeys.join(',') }).then(res=>{
+        return getAction(this.url.getChildListBatch, { parentIds: this.expandedRowKeys.join(',') }).then(res => {
-            if (res.success && res.result.records.length>0) {
+          if (res.success && res.result.records.length > 0) {
             //已展开的数据批量子节点
             let records = res.result.records
             const listMap = new Map()
@@ -310,7 +323,7 @@
             }
             let childrenMap = listMap
             let fn = (list) => {
-                if(list) {
+              if (list) {
                 list.forEach(data => {
                   if (this.expandedRowKeys.includes(data.id)) {
                     data.children = this.getDataByResult(childrenMap.get(data.id))
@@ -325,12 +338,12 @@
       } else {
         return Promise.resolve()
       }
-      },
+    }
 
 
   }
-  }
+}
 </script>
 <style scoped>
-  @import '~@assets/less/common.less';
+@import '~@assets/less/common.less';
 </style>

src/views/system/SystemDept.vue

@@ -1,4 +1,6 @@
 <template>
+  <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">
@@ -51,16 +53,20 @@
         </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: {

src/views/system/UserList.vue

@@ -1,4 +1,6 @@
 <template>
+  <div>
+    <page-header-title :img-for-icon="IconImg"></page-header-title>
     <a-card :bordered="false">
       <!-- 查询区域 -->
       <div class="table-page-search-wrapper">
@@ -83,7 +85,8 @@
 
         <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>
@@ -100,18 +103,21 @@
       <user-modal ref="modalForm" @ok="modalFormOk"></user-modal>
 
     </a-card>
+  </div>
 </template>
 
 <script>
 import UserModal from './modules/UserModal'
-import {getAction, getFileAccessHttpUrl} from '@/api/manage'
+import { getAction, getFileAccessHttpUrl } from '@/api/manage'
-import {frozenBatch} from '@api/api'
+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'},
+          scopedSlots: { customRender: 'action' },
-          align: 'center',
+          align: 'center'
         }
       ],
       // 组织机构 下拉数据
@@ -216,15 +224,15 @@ export default {
       // 角色类型下拉数据
       treeRoleData: [],
       labelCol: {
-        xs: {span: 24},
+        xs: { span: 24 },
-        sm: {span: 5},
+        sm: { span: 5 }
       },
       wrapperCol: {
-        xs: {span: 20},
+        xs: { span: 20 },
-        sm: {span: 16},
+        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;
 }