jeecg-boot 1.1 稳定版本发布

ant-design-jeecg-vue/src/views/system/DataLogList.vue

@@ -0,0 +1,173 @@
+<template>
+  <a-card :bordered="false">
+    <!-- 查询区域 -->
+    <div class="table-page-search-wrapper">
+      <a-form layout="inline">
+        <a-row :gutter="24">
+          <a-col :md="6" :sm="8">
+            <a-form-item label="表名">
+              <a-input placeholder="请输入表名" v-model="queryParam.dataTable"></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :md="6" :sm="8">
+            <a-form-item label="数据ID">
+              <a-input placeholder="请输入ID" v-model="queryParam.dataId"></a-input>
+            </a-form-item>
+          </a-col>
+
+          <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
+               <a-col :md="6" :sm="24">
+                  <a-button type="primary" @click="searchQuery">查询</a-button>
+                  <a-button style="margin-left: 8px" @click="searchReset">重置</a-button>
+               </a-col>
+            </span>
+        </a-row>
+      </a-form>
+    </div>
+
+    <!-- 操作按钮区域 -->
+    <div class="table-operator">
+      <a-button @click="handleCompare()" type="primary" icon="plus">数据比较</a-button>
+    </div>
+
+    <!--table区 -->
+    <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>
+      <a-table
+        ref="table"
+        size="middle"
+        bordered
+        rowKey="id"
+        :columns="columns"
+        :dataSource="dataSource"
+        :pagination="ipagination"
+        :loading="loading"
+        :rowSelection="{selectedRowKeys: selectedRowKeys,onChange: onSelectChange}"
+        @change="handleTableChange"
+      >
+        <!-- 字符串超长截取省略号显示-->
+        <span slot="dataContent" slot-scope="text, record">
+          <j-ellipsis :value="text" :length="80" />
+        </span>
+      </a-table>
+    </div>
+    <data-log-modal ref="modalForm" @ok="modalFormOk"></data-log-modal>
+  </a-card>
+</template>
+
+<script>
+  import DataLogModal from './modules/DataLogModal'
+  import {JeecgListMixin} from '@/mixins/JeecgListMixin'
+  import JEllipsis from "@/components/jeecg/JEllipsis";
+
+  export default {
+    name: 'DataLogList',
+    mixins: [JeecgListMixin],
+    components: {
+      JEllipsis,
+      DataLogModal
+    },
+    data() {
+      return {
+        description: '数据日志管理页面',
+        //表头
+        columns: [
+          {
+            title: '表名',
+            align: 'center',
+            dataIndex: 'dataTable'
+          }, {
+            title: '数据ID',
+            align: 'center',
+            dataIndex: 'dataId'
+          }, {
+            title: '版本号',
+            align: 'center',
+            dataIndex: 'dataVersion'
+          }, {
+            title: '数据内容',
+            align: 'center',
+            dataIndex: 'dataContent',
+            width: "120px",
+            scopedSlots: {customRender: 'dataContent'},
+          }, {
+            title: '创建人',
+            align: 'center',
+            dataIndex: 'createBy'
+          }
+        ],
+        url: {
+          list: "/sys/dataLog/list",
+        },
+      }
+    },
+    methods: {
+      handleCompare: function () {
+        if (!this.selectionRows || this.selectionRows.length != 2) {
+          this.openNotifIcon('请选择两条数据');
+          return false;
+        } else if (this.selectionRows[0].dataId != this.selectionRows[1].dataId) {
+          this.openNotifIcon('请选择相同的数据库表和数据ID进行比较');
+          return false;
+        } else {
+          this.$refs.modalForm.addModal(this.selectionRows);
+          this.$refs.modalForm.title = "数据比较";
+        }
+      },
+      openNotifIcon(msg) {
+        this.$notification['warning']({
+          message: '提示信息',
+          description: msg,
+        });
+      },
+    }
+
+  }
+
+</script>
+
+<style scoped>
+  .ant-card-body .table-operator {
+    margin-bottom: 18px;
+  }
+
+  .ant-table-tbody .ant-table-row td {
+    padding-top: 15px;
+    padding-bottom: 15px;
+  }
+
+  .anty-row-operator button {
+    margin: 0 5px
+  }
+
+  .ant-btn-danger {
+    background-color: #ffffff
+  }
+
+  .ant-modal-cust-warp {
+    height: 100%
+  }
+
+  .ant-modal-cust-warp .ant-modal-body {
+    height: calc(100% - 110px) !important;
+    overflow-y: auto
+  }
+
+  .ant-modal-cust-warp .ant-modal-content {
+    height: 90% !important;
+    overflow-y: hidden
+  }
+
+  .anty-img-wrap {
+    height: 25px;
+    position: relative;
+  }
+
+  .anty-img-wrap > img {
+    max-height: 100%;
+  }
+</style>

ant-design-jeecg-vue/src/views/system/DepartList.vue

@@ -1,110 +1,121 @@
-<template>
-  <a-layout style="height:100%" :class="{ 'anty-node-layout':true }">
-    <a-layout-header class="header">
-      <div class="anty-opt-btn">
+<template xmlns:background-color="http://www.w3.org/1999/xhtml">
+  <a-row :gutter="10">
+    <a-col :md="12" :sm="24">
+      <a-card :bordered="false">
         <!-- 按钮操作区域 -->
-        <a-button @click="handleAdd(2)" style="margin-left: 18px" type="primary" icon="plus">添加子部门</a-button>
-        <a-button @click="handleAdd(1)" type="default" icon="plus">添加一级部门</a-button>
-        <a-button title="删除多条数据" @click="batchDel" type="default" icon="delete">批量删除</a-button>
-        <a-button @click="refresh" type="default" icon="reload" :loading="loading">刷新</a-button>
-      </div>
-    </a-layout-header>
-
-    <a-layout-content>
-      <a-layout style="background: #fff">
-        <a-layout-sider width="400" style="background: #fff;padding-left:16px;height: 100%;">
-          <a-alert type="info" :showIcon="true" >
+        <a-row style="margin-left: 14px">
+          <a-button @click="handleAdd(2)" type="primary">添加子部门</a-button>
+          <a-button @click="handleAdd(1)" type="default">添加一级部门</a-button>
+          <a-button title="删除多条数据" @click="batchDel" type="default">批量删除</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">
               当前选择：
               <a v-if="this.currSelected.title">{{ getCurrSelectedTitle() }}</a>
               <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-input-search @search="onSearch" style="width:100%;margin-top: 10px" placeholder="请输入部门名称"/>
           <!-- 树-->
-          <a-tree
-            checkable
-            multiple
-            @select="onSelect"
-            @check="onCheck"
-            :selectedKeys="selectedKeys"
-            :checkedKeys="checkedKeys"
-            :treeData="departTree"
-            :checkStrictly="true"
-            :expandedKeys="iExpandedKeys"
-            :autoExpandParent="autoExpandParent"
-            @expand="onExpand"/>
-        </a-layout-sider>
-
-        <a-layout-content :style="{ padding: '16px 24px 30px 24px', height: '100%' }">
-          <a-form :form="form">
-            <a-form-item
-              :labelCol="labelCol"
-              :wrapperCol="wrapperCol"
-              label="机构名称">
-              <a-input placeholder="请输入机构/部门名称" 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
-              :labelCol="labelCol"
-              :wrapperCol="wrapperCol"
-              label="排序">
-              <a-input-number v-decorator="[ 'departOrder',{'initialValue':0}]" />
-            </a-form-item>
-            <a-form-item
-              :labelCol="labelCol"
-              :wrapperCol="wrapperCol"
-              label="传真">
-              <a-input placeholder="请输入传真" v-decorator="['fax', {}]" />
-            </a-form-item>
-            <a-form-item
-              :labelCol="labelCol"
-              :wrapperCol="wrapperCol"
-              label="地址">
-              <a-input placeholder="请输入地址" v-decorator="['address', {}]" />
-            </a-form-item>
-            <a-form-item
-              :labelCol="labelCol"
-              :wrapperCol="wrapperCol"
-              label="备注">
-              <a-textarea placeholder="请输入备注" v-decorator="['memo', {}]" />
-            </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" type="primary" htmlType="button" icon="form">修改并保存</a-button>
-          </div>
-        </a-layout-content>
-      </a-layout>
-    </a-layout-content>
-
-    <Depart-modal ref="DepartModal" @ok="loadTree"></Depart-modal>
-  </a-layout>
+          <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="true"
+              :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>
+        </div>
+      </a-card>
+    </a-col>
+    <a-col :md="12" :sm="24">
+      <a-card :bordered="false">
+        <a-form :form="form">
+          <a-form-item
+            :labelCol="labelCol"
+            :wrapperCol="wrapperCol"
+            label="机构名称">
+            <a-input placeholder="请输入机构/部门名称" 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
+            :labelCol="labelCol"
+            :wrapperCol="wrapperCol"
+            label="排序">
+            <a-input-number v-decorator="[ 'departOrder',{'initialValue':0}]"/>
+          </a-form-item>
+          <a-form-item
+            :labelCol="labelCol"
+            :wrapperCol="wrapperCol"
+            label="手机号">
+            <a-input placeholder="请输入手机号" v-decorator="['mobile', {'initialValue':''}]"/>
+          </a-form-item>
+          <a-form-item
+            :labelCol="labelCol"
+            :wrapperCol="wrapperCol"
+            label="地址">
+            <a-input placeholder="请输入地址" v-decorator="['address', {'initialValue':''}]"/>
+          </a-form-item>
+          <a-form-item
+            :labelCol="labelCol"
+            :wrapperCol="wrapperCol"
+            label="备注">
+            <a-textarea placeholder="请输入备注" 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" type="primary" htmlType="button" icon="form">修改并保存</a-button>
+        </div>
+      </a-card>
+    </a-col>
+    <depart-modal ref="departModal" @ok="loadTree"></depart-modal>
+  </a-row>
 </template>
 <script>
   import DepartModal from './modules/DepartModal'
   import pick from 'lodash.pick'
-  import {queryDepartTreeList, searchByKeywords} from '@/api/api'
-  import { httpAction,deleteAction } from '@/api/manage'
+  import { queryDepartTreeList, searchByKeywords, deleteByDepartId } from '@/api/api'
+  import { httpAction, deleteAction } from '@/api/manage'
   // 表头
   const columns = [
     {
       title: '机构名称',
-      dataIndex: 'departName',
+      dataIndex: 'departName'
     },
     {
       title: '机构类型',
-      align:"center",
+      align: 'center',
       dataIndex: 'orgType'
     },
     {
@@ -124,297 +135,360 @@
       dataIndex: 'address'
     },
     {
-      title:'排序',
-      align:'center',
-      dataIndex:'departOrder'
+      title: '排序',
+      align: 'center',
+      dataIndex: 'departOrder'
     },
     {
       title: '操作',
-      align:"center",
+      align: 'center',
       dataIndex: 'action',
-      scopedSlots: { customRender: 'action' },
+      scopedSlots: { customRender: 'action' }
     }
-  ];
+  ]
   export default {
-    name: "DepartList",
+    name: 'DepartList',
     components: {
       DepartModal
     },
-    data(){
+    data() {
       return {
-        iExpandedKeys:[],
-        loading:false,
-        autoExpandParent:true,
-        currFlowId:"",
-        currFlowName:"",
-        disable:true,
+        iExpandedKeys: [],
+        loading: false,
+        autoExpandParent: true,
+        currFlowId: '',
+        currFlowName: '',
+        disable: true,
         treeData: [],
-        departTree:[],
-        hiding:true,
-        model:{},
-        depart:{},
-        columns:columns,
-        disableSubmit:false,
-        checkedKeys:[],
-        selectedKeys:[],
-        currSelected:{},
+        visible: false,
+        departTree: [],
+        rightClickSelectedKey: '',
+        hiding: true,
+        model: {},
+        dropTrigger: '',
+        depart: {},
+        columns: columns,
+        disableSubmit: false,
+        checkedKeys: [],
+        selectedKeys: [],
+        autoIncr: 1,
+        currSelected: {},
         form: this.$form.createForm(this),
         labelCol: {
           xs: { span: 24 },
-          sm: { span: 5 },
+          sm: { span: 5 }
         },
         wrapperCol: {
           xs: { span: 24 },
-          sm: { span: 16 },
+          sm: { span: 16 }
         },
-        graphDatasource:{
-          nodes:[],
-          edges:[]
+        graphDatasource: {
+          nodes: [],
+          edges: []
         },
-        validatorRules:{
-          departName:{rules: [{ required: true, message: '请输入机构/部门名称!' }]},
-          orgCode:{rules: [{ required: true, message: '请输入机构编码!' }]},
-          mobile:{rules: [{validator:this.validateMobile}]}
+        validatorRules: {
+          departName: { rules: [{ required: true, message: '请输入机构/部门名称!' }] },
+          orgCode: { rules: [{ required: true, message: '请输入机构编码!' }] },
+          mobile: { rules: [{ validator: this.validateMobile }] }
         },
         url: {
-          delete: "/sysdepart/sysDepart/delete",
-          edit: "/sysdepart/sysDepart/edit",
-          deleteBatch: "/sysdepart/sysDepart/deleteBatch",
-        },
+          delete: '/sysdepart/sysDepart/delete',
+          edit: '/sysdepart/sysDepart/edit',
+          deleteBatch: '/sysdepart/sysDepart/deleteBatch'
+        }
       }
     },
-    methods:{
-      loadTree(){
-        var that = this;
-        that.treeData = [];
-        that.departTree = [];
-        queryDepartTreeList().then((res)=>{
-          if(res.success){
+    methods: {
+      loadTree() {
+        var that = this
+        that.treeData = []
+        that.departTree = []
+        queryDepartTreeList().then((res) => {
+          if (res.success) {
             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);
+              let temp = res.result[i]
+              that.treeData.push(temp)
+              that.departTree.push(temp)
+              that.setThisExpandedKeys(temp)
               console.log(temp.id)
             }
-            this.loading = false;
+            this.loading = false
           }
-        });
+        })
       },
-      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]);
+      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) {
+      // 右键操作方法
+      rightHandle(node) {
+        this.dropTrigger = 'contextmenu'
+        console.log(node.node.eventKey)
+        this.rightClickSelectedKey = node.node.eventKey
+      },
+      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
       },
-      backFlowList(){
-        this.$router.back(-1);
+      backFlowList() {
+        this.$router.back(-1)
       },
-      addRootNode(){
-        this.$refs.nodeModal.add(this.currFlowId,'');
-      },
-      batchDel: function(){
-        console.log(this.checkedKeys)
-        if(this.checkedKeys.length<=0){
-          this.$message.warning('请选择一条记录！');
-        }else{
-          var ids = "";
-          for(var a =0;a<this.checkedKeys.length;a++){
-            ids+=this.checkedKeys[a]+",";
-          }
-          var that = this;
-          this.$confirm({
-            title:"确认删除",
-            content:"确定要删除所选中的 "+this.checkedKeys.length+" 条数据?",
-            onOk: function(){
-              deleteAction(that.url.deleteBatch,{ids: ids}).then((res)=>{
-                if(res.success){
-                  that.$message.success(res.message);
-                  that.loadTree();
-                  that.onClearSelected();
-                }else{
-                  that.$message.warning(res.message);
-                }
-              });
-            }
-          });
+      // 右键点击下拉框改变事件
+      dropStatus(visible) {
+        if (visible == false) {
+          this.dropTrigger = ''
         }
       },
-      onSearch(value){
-        let that = this;
-        if(value){
-          searchByKeywords({keyWord:value}).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);
+      // 右键店家下拉关闭下拉框
+      closeDrop() {
+        this.dropTrigger = ''
+      },
+      addRootNode() {
+        this.$refs.nodeModal.add(this.currFlowId, '')
+      },
+      batchDel: function() {
+        console.log(this.checkedKeys)
+        if (this.checkedKeys.length <= 0) {
+          this.$message.warning('请选择一条记录！')
+        } else {
+          var ids = ''
+          for (var a = 0; a < this.checkedKeys.length; a++) {
+            ids += this.checkedKeys[a] + ','
+          }
+          var that = this
+          this.$confirm({
+            title: '确认删除',
+            content: '确定要删除所选中的 ' + this.checkedKeys.length + ' 条数据?',
+            onOk: function() {
+              deleteAction(that.url.deleteBatch, { ids: ids }).then((res) => {
+                if (res.success) {
+                  that.$message.success(res.message)
+                  that.loadTree()
+                  that.onClearSelected()
+                } else {
+                  that.$message.warning(res.message)
+                }
+              })
             }
           })
-        }else{
-          that.loadTree();
+        }
+      },
+      onSearch(value) {
+        let that = this
+        if (value) {
+          searchByKeywords({ keyWord: value }).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)
+            }
+          })
+        } else {
+          that.loadTree()
         }
 
       },
-      nodeModalOk(){
-        this.loadTree();
+      nodeModalOk() {
+        this.loadTree()
       },
-      nodeModalClose(){
+      nodeModalClose() {
       },
-      onCheck (checkedKeys,info) {
+      hide() {
+        console.log(111)
+        this.visible = false
+      },
+      onCheck(checkedKeys, info) {
         console.log('onCheck', checkedKeys, info)
-        this.hiding = false;
-        this.checkedKeys = checkedKeys.checked;
+        this.hiding = false
+        this.checkedKeys = checkedKeys.checked
       },
-      onSelect (selectedKeys,e) {
+      onSelect(selectedKeys, e) {
         console.log('selected', selectedKeys, e)
-        this.hiding = false;
-        let record = e.node.dataRef;
-        console.log("onSelect-record",record);
-        this.currSelected = Object.assign({},record);
-        this.model = this.currSelected;
-        this.selectedKeys = [record.key];
-        this.model.parentId = record.parentId;
-        this.$nextTick(() => {
-          this.form.setFieldsValue(pick(record,'departName','departOrder','mobile','fax','address','memo'))
-        });
+        this.hiding = false
+        let record = e.node.dataRef
+        console.log('onSelect-record', record)
+        this.currSelected = Object.assign({}, record)
+        this.model = this.currSelected
+        this.selectedKeys = [record.key]
+        this.model.parentId = record.parentId
+        this.setValuesToForm(record)
+
 
       },
-      getCurrSelectedTitle(){
-        return !this.currSelected.title?"":this.currSelected.title;
+      // 触发onSelect事件时,为部门树右侧的form表单赋值
+      setValuesToForm(record) {
+        this.form.getFieldDecorator('fax', { initialValue: '' })
+        this.form.setFieldsValue(pick(record, 'departName', 'departOrder', 'mobile', 'fax', 'address', 'memo'))
       },
-      onClearSelected(){
-        this.hiding = true;
-        this.model = {};
-        this.checkedKeys={};
-        this.currSelected={};
-        this.selectedKeys = [];
+      getCurrSelectedTitle() {
+        return !this.currSelected.title ? '' : this.currSelected.title
       },
-      handleNodeTypeChange(val){
-        this.currSelected.nodeType = val;
+      onClearSelected() {
+        this.hiding = true
+        this.checkedKeys = {}
+        this.currSelected = {}
+        this.form.resetFields()
+        this.selectedKeys = []
       },
-      notifyTriggerTypeChange(value){
-        this.currSelected.notifyTriggerType = value;
+      handleNodeTypeChange(val) {
+        this.currSelected.nodeType = val
       },
-      receiptTriggerTypeChange(value){
-        this.currSelected.receiptTriggerType = value;
+      notifyTriggerTypeChange(value) {
+        this.currSelected.notifyTriggerType = value
       },
-      submitCurrForm(){
-        this.form.validateFields((err, values) =>{
+      receiptTriggerTypeChange(value) {
+        this.currSelected.receiptTriggerType = value
+      },
+      submitCurrForm() {
+        this.form.validateFields((err, values) => {
           if (!err) {
-            if(!this.currSelected.id){
-              this.$message.warning("请点击选择要修改部门!");
+            if (!this.currSelected.id) {
+              this.$message.warning('请点击选择要修改部门!')
               return
             }
 
-            let formData = Object.assign(this.currSelected, values);
+            let formData = Object.assign(this.currSelected, values)
             console.log('Received values of form: ', formData)
-            httpAction(this.url.edit, formData, "put").then((res) => {
+            httpAction(this.url.edit, formData, 'put').then((res) => {
               if (res.success) {
-                this.$message.success("保存成功!");
-                this.loadTree();
-                this.selectedKeys = [];
+                this.$message.success('保存成功!')
+                this.loadTree()
               }
             })
           }
-        });
+        })
       },
-      emptyCurrForm(){
-        this.form.setFieldsValue({
-          parentId:"",
-          departName:"",
-          departNameEn:"",
-          departNameAbbr:"",
-          departOrder:"",
-          orgCode:"",
-          mobile:"",
-          fax:"",
-          address:"",
-          memo:"",
-          description:"",
-        });
+      emptyCurrForm() {
+        this.form.resetFields()
       },
-      nodeSettingFormSubmit(){
-        this.form.validateFields((err, values) =>{
+      nodeSettingFormSubmit() {
+        this.form.validateFields((err, values) => {
           if (!err) {
             console.log('Received values of form: ', values)
           }
-        });
+        })
       },
-      openSelect(){
-        this.$refs.sysDirectiveModal.show();
+      openSelect() {
+        this.$refs.sysDirectiveModal.show()
       },
-      handleAdd(num){
-        if(num == 1){
-          this.$refs.DepartModal.add();
-          this.$refs.DepartModal.title="新增";
-        }else{
-          let key = this.currSelected.key;
-          if(!key){
-            this.$message.warning("请先选中一条记录!");
-            return false;
+      handleAdd(num) {
+        if (num == 1) {
+          this.$refs.departModal.add()
+          this.$refs.departModal.title = '新增'
+        } else if (num == 2) {
+          let key = this.currSelected.key
+          if (!key) {
+            this.$message.warning('请先选中一条记录!')
+            return false
           }
-          this.$refs.DepartModal.add(this.selectedKeys);
-          this.$refs.DepartModal.title="新增";
+          this.$refs.departModal.add(this.selectedKeys)
+          this.$refs.departModal.title = '新增'
+        } else {
+          this.$refs.departModal.add(this.rightClickSelectedKey)
+          this.$refs.departModal.title = '新增'
         }
       },
-      selectDirectiveOk(record){
-        console.log("选中指令数据",record);
-        this.nodeSettingForm.setFieldsValue({directiveCode:record.directiveCode});
-        this.currSelected.sysCode = record.sysCode;
-      },
-      getFlowGraphData(node){
-        this.graphDatasource.nodes.push({
-          id:node.id,
-          text:node.flowNodeName
+      handleDelete() {
+        deleteByDepartId({ id: this.rightClickSelectedKey }).then((resp) => {
+          if (resp.success) {
+            this.$message.success('删除成功!')
+            this.loadTree()
+          } else {
+            this.$message.warning('删除失败!')
+          }
         })
-        if(node.children.length>0){
-          for(let a=0;a<node.children.length;a++){
+      },
+      selectDirectiveOk(record) {
+        console.log('选中指令数据', record)
+        this.nodeSettingForm.setFieldsValue({ directiveCode: record.directiveCode })
+        this.currSelected.sysCode = record.sysCode
+      },
+      getFlowGraphData(node) {
+        this.graphDatasource.nodes.push({
+          id: node.id,
+          text: node.flowNodeName
+        })
+        if (node.children.length > 0) {
+          for (let a = 0; a < node.children.length; a++) {
             let temp = node.children[a]
             this.graphDatasource.edges.push({
-              source:node.id,
-              target:temp.id
-            });
-            this.getFlowGraphData(temp);
+              source: node.id,
+              target: temp.id
+            })
+            this.getFlowGraphData(temp)
           }
         }
       }
     },
-    created(){
-      this.currFlowId = this.$route.params.id;
-      this.currFlowName = this.$route.params.name;
-      this.loadTree();
-    },
+    created() {
+      this.currFlowId = this.$route.params.id
+      this.currFlowName = this.$route.params.name
+      this.loadTree()
+    }
 
   }
 </script>
 <style scoped>
-  .anty-form-btn{width: 100%;text-align: center;}
-  .anty-form-btn button{margin:0 5px;}
-  .anty-node-layout .ant-layout-content{margin:0 !important;}
-  .anty-node-layout .ant-layout-header{padding-right:0}
-  .header{padding:0 8px;}
-  .header button{margin:0 3px}
-  .ant-modal-cust-warp{height: 100%}
-  .ant-modal-cust-warp .ant-modal-body{height:calc(100% - 110px) !important;overflow-y: auto}
-  .ant-modal-cust-warp .ant-modal-content{height:90% !important;overflow-y: hidden}
+  .anty-form-btn {
+    width: 100%;
+    text-align: center;
+  }
+
+  .anty-form-btn button {
+    margin: 0 5px;
+  }
+
+  .anty-node-layout .ant-layout-content {
+    margin: 0 !important;
+  }
+
+  .anty-node-layout .ant-layout-header {
+    padding-right: 0
+  }
+
+  .header {
+    padding: 0 8px;
+  }
+
+  .header button {
+    margin: 0 3px
+  }
+
+  .ant-modal-cust-warp {
+    height: 100%
+  }
+
+  .ant-modal-cust-warp .ant-modal-body {
+    height: calc(100% - 110px) !important;
+    overflow-y: auto
+  }
+
+  .ant-modal-cust-warp .ant-modal-content {
+    height: 90% !important;
+    overflow-y: hidden
+  }
+
   #app .desktop {
     height: auto !important;
   }
+
+  /** Button按钮间距 */
+  .ant-btn {
+    margin-left: 3px
+  }
 </style>

ant-design-jeecg-vue/src/views/system/DepartList2.vue

@@ -254,9 +254,6 @@
   .ant-card-body .table-operator{
     margin-bottom: 18px;
   }
-  .ant-layout-content{
-    margin:12px 16px 0 !important;
-  }
   .ant-table-tbody .ant-table-row td{
     padding-top:15px;
     padding-bottom:15px;

ant-design-jeecg-vue/src/views/system/DictItemList.vue

@@ -0,0 +1,203 @@
+<template>
+  <a-card :bordered="false">
+    <!-- 抽屉 -->
+    <a-drawer
+      title="字典列表"
+      :width="screenWidth"
+      @close="onClose"
+      :visible="visible"
+    >
+      <!-- 抽屉内容的border -->
+      <div
+        :style="{
+          padding:'10px',
+          border: '1px solid #e9e9e9',
+          background: '#fff',
+        }">
+
+        <div class="table-page-search-wrapper">
+          <a-form layout="inline" :form="form">
+            <a-row :gutter="10">
+              <a-col :md="8" :sm="12">
+                <a-form-item label="名称">
+                  <a-input style="width: 120px;" placeholder="请输入名称" v-model="queryParam.itemText"></a-input>
+                </a-form-item>
+              </a-col>
+              <a-col :md="9" :sm="24">
+                <a-form-item label="状态" style="width: 170px" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                  <a-select
+                    placeholder="请选择"
+                    v-model="queryParam.status"
+                  >
+                    <a-select-option value="1">正常</a-select-option>
+                    <a-select-option value="0">禁用</a-select-option>
+                  </a-select>
+                </a-form-item>
+              </a-col>
+              <a-col :md="7" :sm="24">
+              <span style="float: left;" class="table-page-search-submitButtons">
+                <a-button type="primary" @click="searchQuery">搜索</a-button>
+                <a-button type="primary" @click="searchReset" style="margin-left: 8px">重置</a-button>
+              </span>
+              </a-col>
+            </a-row>
+            <a-row>
+              <a-col :md="2" :sm="24">
+                <a-button style="margin-bottom: 10px" type="primary" @click="handleAdd">新增</a-button>
+              </a-col>
+            </a-row>
+          </a-form>
+        </div>
+        <div>
+          <a-table
+            ref="table"
+            rowKey="id"
+            size="middle"
+            :columns="columns"
+            :dataSource="dataSource"
+            :pagination="ipagination"
+            :loading="loading"
+            @change="handleTableChange"
+          >
+
+          <span slot="action" slot-scope="text, record">
+            <a @click="handleEdit(record)">编辑</a>
+            <a-divider type="vertical"/>
+            <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
+              <a>删除</a>
+            </a-popconfirm>
+          </span>
+
+          </a-table>
+        </div>
+      </div>
+    </a-drawer>
+    <dict-item-modal ref="modalForm" @ok="modalFormOk"></dict-item-modal> <!-- 字典数据 -->
+  </a-card>
+</template>
+
+<script>
+  import pick from 'lodash.pick'
+  import {filterObj} from '@/utils/util';
+  import DictItemModal from './modules/DictItemModal'
+  import {JeecgListMixin} from '@/mixins/JeecgListMixin'
+
+  export default {
+    name: "DictItemList",
+    mixins: [JeecgListMixin],
+    components: {DictItemModal},
+    data() {
+      return {
+        columns: [
+          {
+            title: '名称',
+            align: "center",
+            dataIndex: 'itemText',
+          },
+          {
+            title: '数据值',
+            align: "center",
+            dataIndex: 'itemValue',
+          },
+          {
+            title: '操作',
+            dataIndex: 'action',
+            align: "center",
+            scopedSlots: {customRender: 'action'},
+          }
+        ],
+        queryParam: {
+          dictId: "",
+          dictName: "",
+          itemText: "",
+          delFlag: "1",
+          status: [],
+        },
+        title: "操作",
+        visible: false,
+        screenWidth: 800,
+        model: {},
+        dictId: "",
+        status: 1,
+        labelCol: {
+          xs: {span: 5},
+          sm: {span: 5},
+        },
+        wrapperCol: {
+          xs: {span: 12},
+          sm: {span: 12},
+        },
+        form: this.$form.createForm(this),
+        validatorRules: {
+          itemText: {rules: [{required: true, message: '请输入名称!'}]},
+          itemValue: {rules: [{required: true, message: '请输入数据值!'}]},
+        },
+        url: {
+          list: "/sys/dictItem/list",
+          delete: "/sys/dictItem/delete",
+          deleteBatch: "/sys/dictItem/deleteBatch",
+        },
+      }
+    },
+    created() {
+      // 当页面初始化时,根据屏幕大小来给抽屉设置宽度
+      this.resetScreenSize();
+    },
+    methods: {
+      add(dictId) {
+        this.dictId = dictId;
+        this.edit({});
+      },
+      edit(record) {
+        if (record.id) {
+          this.dictId = record.id;
+        }
+        this.queryParam = {}
+        this.form.resetFields();
+        this.model = Object.assign({}, record);
+        this.model.dictId = this.dictId;
+        this.model.status = this.status;
+        this.visible = true;
+        this.$nextTick(() => {
+          this.form.setFieldsValue(pick(this.model, 'itemText', 'itemValue'))
+        });
+        // 当其它模块调用该模块时,调用此方法加载字典数据
+        this.loadData();
+      },
+
+      getQueryParams() {
+        var param = Object.assign({}, this.queryParam);
+        param.dictId = this.dictId;
+        param.field = this.getQueryField();
+        param.pageNo = this.ipagination.current;
+        param.pageSize = this.ipagination.pageSize;
+        return filterObj(param);
+      },
+
+      // 添加字典数据
+      handleAdd() {
+        this.$refs.modalForm.add(this.dictId);
+        this.$refs.modalForm.title = "新增";
+      },
+      showDrawer() {
+        this.visible = true
+      },
+      onClose() {
+        this.visible = false
+        this.form.resetFields();
+        this.dataSource = [];
+      },
+      // 抽屉的宽度随着屏幕大小来改变
+      resetScreenSize() {
+        let screenWidth = document.body.clientWidth;
+        if (screenWidth < 600) {
+          this.screenWidth = screenWidth;
+        } else {
+          this.screenWidth = 600;
+        }
+      },
+    }
+  }
+</script>
+<style scoped>
+</style>

ant-design-jeecg-vue/src/views/system/DictList.vue

@@ -1,453 +1,189 @@
 <template>
   <a-card :bordered="false">
 
-    <!-- 右侧面板 -->
-    <a-col :span="5">
-      <div class="table-operator" style="margin-bottom: 18px;">
-        <a-row :gutter="24">
-          <a-col :span="9">
-            <a-button @click="addDict" type="primary" icon="plus">添加字典</a-button>
+    <!-- 左侧面板 -->
+    <div class="table-page-search-wrapper">
+      <a-form layout="inline">
+        <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 :span="9">
-            <a-dropdown>
-              <a-menu slot="overlay">
-                <a-menu-item key="1" @click="editDict">编辑字典</a-menu-item>
-                <a-menu-item key="2" @click="delDict">删除字典</a-menu-item>
-                <a-menu-item key="3" @click="refreshDict">刷新</a-menu-item>
-              </a-menu>
-              <a-button style="margin-left: 8px">更多操作 <a-icon type="down" /></a-button>
-            </a-dropdown>
+          <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>
-      </div>
-
-      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;padding: 5px">
-        <a-icon type="select"/>&nbsp;
-        当前选中：
-        <span v-if="visible">
-          <span style="color: #40a9ff;font-size: 12px;font-weight: 600;">{{ dict.dictName }}【{{ dict.dictCode }}】</span>
-          <a><span @click="cancelDict" style="color:#2d8cf0"> 取消选择</span></a>
-        </span>
-
-      </div>
-
-      <div>
-        <a-input-search
-          placeholder="输入搜索字典"
-          @search="onSearch"
-          style="margin-bottom: 16px;"
-        />
-        <a-tree
-          :treeData="treeData"
-          @select="this.onSelect">
-        </a-tree>
-      </div>
-    </a-col>
-
-    <!-- 中间面板 -->
-    <a-col :span="1"/>
-
-    <!-- 右侧面板 -->
-    <a-col :span="18">
-      <div class="table-operator">
-        <a-form layout="inline">
-          <a-row :gutter="24">
-            <a-col :span="8">
-              <a-form-item label="名称">
-                <a-input placeholder="请输入名称" v-model="queryParam.itemText"></a-input>
-              </a-form-item>
-            </a-col>
-
-            <a-col :span="8">
-              <a-form-item label="状态">
-                <a-select
-                  style="width: 200px"
-                  v-model="queryParam.status"
-                  placeholder="请选择状态"
-                >
-                  <a-select-option value="1">正常</a-select-option>
-                  <a-select-option value="0">禁用</a-select-option>
-                </a-select>
-              </a-form-item>
-            </a-col>
-
-            <a-col :span="8">
-              <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
-                <a-button type="primary" icon="search" @click="searchByquery">查询</a-button>
-                <a-button type="primary" icon="reload" @click="searchReset" style="margin-left: 8px">重置</a-button>
-              </span>
-            </a-col>
-          </a-row>
-        </a-form>
-      </div>
-
-      <div style="margin-bottom: 16px;">
-        <a-button type="primary" icon="plus" @click="addDictItem">新增</a-button>
-        <a-button type="primary" :loading="loadrefresh" icon="reload" @click="refreshDictItem" style="margin-left: 8px">刷新</a-button>
-        <a-dropdown v-if="selectedRowKeys.length > 0">
-          <a-menu slot="overlay" @click="handleMenuClick">
-            <a-menu-item key="1"><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>
-          已选择&nbsp;<a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项&nbsp;&nbsp;
-          <a style="margin-left: 24px" @click="onClearSelected">清空</a>
-        </div>
-
-        <a-table
-          ref="table"
-          bordered
-          rowKey="id"
-          size="middle"
-          :columns="columns"
-          :dataSource="dataSource"
-          :pagination="ipagination"
-          :loading="loading"
-          :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
-          @change="handleTableChange"
-        >
+        <a-row>
+          <a-col :md="24" :sm="24">
+            <a-button style="margin-bottom: 20px" @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" :action="importExcelUrl"
+                      @change="handleImportExcel">
+              <a-button type="primary" icon="import">导入</a-button>
+            </a-upload>
+          </a-col>
+        </a-row>
+      </a-form>
 
+      <a-table
+        ref="table"
+        rowKey="id"
+        size="middle"
+        :columns="columns"
+        :dataSource="dataSource"
+        :pagination="ipagination"
+        :loading="loading"
+        @change="handleTableChange">
           <span slot="action" slot-scope="text, record">
-            <a @click="editDictItem(record)">编辑</a>
-            <a-divider type="vertical" />
-            <a-popconfirm title="确定删除吗?" @confirm="() => delDictItem(record.id)">
-              <a>删除</a>
-            </a-popconfirm>
+            <a @click="handleEdit(record)">
+              <a-icon type="edit"/>
+              编辑
+            </a>
+            <a-divider type="vertical"/>
+            <a @click="editDictItem(record)"><a-icon type="setting"/> 字典配置</a>
+            <a-divider type="vertical"/>
+            <a @click="handleDelete(record.id)">删除</a>
           </span>
+      </a-table>
 
-        </a-table>
-      </div>
-      <!-- table区域-end -->
-    </a-col>
-
-    <dict-modal ref="modal" @ok="modalFormOk"></dict-modal>  <!-- 字典类型 -->
-    <dict-item-modal ref="itemModal" @ok="modalFormOk"></dict-item-modal> <!-- 字典数据 -->
+    </div>
+    <dict-modal ref="modalForm" @ok="modalFormOk"></dict-modal>  <!-- 字典类型 -->
+    <dict-item-list ref="dictItemList"></dict-item-list>
   </a-card>
 </template>
 
 <script>
   import { filterObj } from '@/utils/util';
+  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
   import DictModal from './modules/DictModal'
-  import DictItemModal from './modules/DictItemModal'
-  import {delDict,getDictItemList,delDictItem,delDictItemList,treeList} from '@/api/api'
+  import DictItemList from './DictItemList'
+  import {delDict} from '@/api/api'
 
   export default {
     name: "DictList",
-    components: {DictModal,DictItemModal},
-    data () {
+    mixins:[JeecgListMixin],
+    components: {DictModal, DictItemList},
+    data() {
       return {
         description: '这是数据字典页面',
-        visible:false,
+        visible: false,
         // 查询条件
         queryParam: {
-          dictId:"",
-          dictName:null,
-          delFlag:"1",
-          status:[],
+          dictCode: "",
+          dictName: "",
         },
         // 表头
         columns: [
           {
-            title: '排序',
+            title: '#',
+            dataIndex: '',
+            key: 'rowIndex',
+            width: 120,
             align: "center",
-            dataIndex: 'sortOrder',
-            width: "100px",
-            sorter: true
+            customRender: function (t, r, index) {
+              return parseInt(index) + 1;
+            }
           },
           {
-            title: '名称',
-            align: "center",
-            dataIndex: 'itemText',
+            title: '字典名称',
+            align: "left",
+            dataIndex: 'dictName',
           },
           {
-            title: '数据值',
-            align: "center",
-            dataIndex: 'itemValue',
+            title: '字典编号',
+            align: "left",
+            dataIndex: 'dictCode',
           },
           {
             title: '描述',
-            align: "center",
+            align: "left",
             dataIndex: 'description',
           },
-          {
-            title: '状态',
-            align: "center",
-            dataIndex: 'status',
-            customRender:function (text) {
-              if(text==1){
-                return "正常";
-              }else if(text==0){
-                return "禁用";
-              }else{
-                return text;
-              }
-            },
-          },
-          {
-            title: '创建时间',
-            dataIndex: 'createTime',
-            align: "center",
-            sorter: true
-          },
           {
             title: '操作',
             dataIndex: 'action',
             align: "center",
-            width: "120px",
             scopedSlots: {customRender: 'action'},
           }
         ],
-        //字典数据集
-        dataSource: [],
-        //字典集
-        treeData:[],
-        dict:"",
-        // 分页参数
-        ipagination: {
-          current: 1,
-          pageSize: 10,
-          pageSizeOptions: ['10', '20', '30'],
-          showTotal: (total, range) => {
-            return range[0] + "-" + range[1] + " 共" + total + "条"
-          },
-          showQuickJumper: true,
-          showSizeChanger: true,
-          total: 0
+        dict: "",
+        labelCol: {
+          xs: {span: 8},
+          sm: {span: 5},
         },
-        isorter: {
-          column: 'createTime',
-          order: 'asc',
+        wrapperCol: {
+          xs: {span: 16},
+          sm: {span: 19},
+        },
+        url: {
+          list: "/sys/dict/list",
+          delete: "/sys/dict/delete",
+          exportXlsUrl: "sys/dict/exportXls",
+          importExcelUrl: "sys/dict/importExcel",
         },
-        loading: false,
-        loadrefresh: false,
-        selectedRowKeys: [],
-        selectedRows: [],
       }
     },
-    created() {
-      this.loadData();
+    computed: {
+      importExcelUrl: function () {
+        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
+      }
     },
     methods: {
-      loadData (arg){
-        if(arg===1){
-          this.ipagination.current = 1;
-        }
-        this.loading=true;
-        // 查询字典
-        treeList({dictName:this.queryParam.dictName,delFlag:this.queryParam.delFlag}).then((res)=>{
-          if(res.success){
-            this.treeData=[];
-            for(let a=0;a<res.result.length;a++){
-              let temp = res.result[a];
-              this.treeData.push(temp);
-            }
-          }
-        })
-        // 查询字典数据
-        var params = this.getQueryParams();//查询条件
-        getDictItemList(params).then((res)=>{
-          if(res.success){
-            this.dataSource = res.result.records;
-            this.ipagination.total = res.result.total;
-            this.loadrefresh=false;
-            this.loading=false;
-          }
-        })
-      },
-      getQueryParams(){
-        var param = Object.assign({}, this.queryParam,this.isorter);
-        param.dictId = this.dictId;
+      getQueryParams() {
+        var param = Object.assign({}, this.queryParam, this.isorter);
         param.field = this.getQueryField();
         param.pageNo = this.ipagination.current;
         param.pageSize = this.ipagination.pageSize;
         return filterObj(param);
       },
-      getQueryField(){
-        var str = "id,";
-        for(var a = 0;a<this.columns.length;a++){
-          str+=","+this.columns[a].dataIndex;
-        }
-        return str;
-      },
-
-      //添加字典
-      addDict(){
-        this.$refs.modal.add();
-        this.$refs.modal.title="新增";
-      },
-      //编辑字典
-      editDict(){
-        if(!this.dict.id){
-          this.$message.warning("您还未选择要编辑的字典");
-        }else{
-          this.$refs.modal.edit(this.dict);
-          this.$refs.modal.title="编辑";
-        }
-      },
-      //删除字典
-      delDict(){
-        let that=this;
-        if(!this.dict.id){
-          this.$message.warning("您还未选择要删除的字典");
-        }else{
-          that.$confirm({
-            title:"确认删除",
-            content:"您确定要删除 "+this.dict.dictName+" 字典类型?",
-            onOk: function(){
-              delDict({id:that.dict.id}).then((res)=>{
-                if(res.success){
-                  that.$message.success(res.message);
-                  that.loadData();
-                  that.cancelDict();
-                }else{
-                  that.$message.warning(res.message);
-                }
-              });
-            },
-            onCancel() {},
-          });
-        }
-      },
-      //刷新字典
-      refreshDict(){
-        this.loadData();
-      },
-      //选择字典
-      onSelect (selectedKeys, info) {
-        this.dict = info.selectedNodes[0].data.props;
-        this.dict.dictName = info.selectedNodes[0].data.props.title;
-        this.dictId = this.dict.id;
-        this.visible = true;
-        this.loadData();
+      //删除字典类型
+      handleDel(record) {
+        let that = this;
+        that.$confirm({
+          title: "确认删除",
+          content: "您确定要删除 " + record.dictName + " 字典类型?",
+          onOk: function () {
+            delDict({id: record.id}).then((res) => {
+              if (res.success) {
+                that.$message.success(res.message);
+                that.loadData();
+                that.cancelDict();
+              } else {
+                that.$message.warning(res.message);
+              }
+            });
+          },
+        });
       },
       //取消选择
-      cancelDict(){
-        this.dict="";
-        this.dictId = "";
+      cancelDict() {
+        this.dict = "";
         this.visible = false;
         this.loadData();
       },
-      //查询字典
-      onSearch (value) {
-        if(value){
-          this.queryParam.dictName = value;
-        }else{
-          this.queryParam.dictId = null;
-          this.queryParam.dictName = null;
-        }
-        this.loadData();
-      },
-
-
-      // 添加字典数据
-      addDictItem(){
-        if(!this.dict.id){
-          this.$message.warning("请选择一个字典类别");
-        }else{
-          this.$refs.itemModal.add(this.dict.id);
-          this.$refs.itemModal.title="新增 "+this.dict.dictName+"("+this.dict.dictCode+") 的数据";
-        }
-      },
       //编辑字典数据
-      editDictItem(record){
-        if(!this.dict.id){
-          this.$refs.itemModal.title="编辑字典的数据";
-        }else{
-          this.$refs.itemModal.title="编辑 "+this.dict.dictName+"("+this.dict.dictCode+") 的数据";
-        }
-        this.$refs.itemModal.edit(record);
+      editDictItem(record) {
+        this.$refs.dictItemList.edit(record);
       },
-      handleMenuClick(e){
-        if(e.key==1){
-          this.batchdel();
-        }
-      },
-      // 批量删除字典数据
-      batchdel: function(){
-        if(this.selectedRowKeys.length<=0){
-          this.$message.warning("您还未选择要删除的数据");
-        }else{
-          let ids="";
-          let that = this;
-          that.selectedRowKeys.forEach(function(val){
-            ids+=val+",";
-          });
-          that.$confirm({
-            title:"确认删除",
-            content:"您确定要删除所选的"+that.selectedRowKeys.length+"条数据？",
-            onOk: function(){
-              delDictItemList({ids:ids}).then((res)=>{
-                if(res.success){
-                  that.$message.success(res.message);
-                  that.loadData();
-                  that.onClearSelected();
-                }else{
-                  that.$message.warning(res.message);
-                }
-              });
-            },
-            onCancel() {},
-          });
-        }
-      },
-      //删除字典
-      delDictItem(id){
-        delDictItem({id:id}).then((res)=>{
-          if(res.success){
-            this.$message.success(res.message);
-            this.loadData();
-          }else{
-            this.$message.warning(res.message);
-          }
-        });
-      },
-      // 查询字典数据
-      searchByquery(){
-        this.loadData();
-      },
-      // 重置字典数据
-      searchReset(){
+      // 重置字典类型搜索框的内容
+      searchReset() {
         var that = this;
-        that.queryParam.status=[];
-        that.queryParam.itemText="";
+        that.queryParam.dictName = "";
+        that.queryParam.dictCode = "";
         that.loadData(this.ipagination.current);
       },
-      // 刷新
-      refreshDictItem(){
-        this.loadrefresh=true;
-        this.loadData();
-      },
-
-      handleTableChange(pagination, filters, sorter){
-        //TODO 筛选
-        if (Object.keys(sorter).length>0){
-          this.isorter.column = sorter.field;
-          this.isorter.order = "ascend"==sorter.order?"asc":"desc"
-        }
-        this.ipagination = pagination;
-        this.loadData();
-      },
-      onSelectChange (selectedRowKeys,selectionRows) {
-        this.selectedRowKeys = selectedRowKeys;
-        this.selectionRows = selectionRows;
-      },
-      onClearSelected(){
-        this.selectedRowKeys = [];
-        this.selectionRows = [];
-      },
-      modalFormOk () {
-        this.loadData();
-      },
     },
     watch: {
-      openKeys (val) {
+      openKeys(val) {
         console.log('openKeys', val)
       },
     },
@@ -455,6 +191,16 @@
 </script>
 
 <style scoped>
-  .table-operator{margin-bottom: 10px}
-  .ant-tree li span.ant-tree-switcher, .ant-tree li span.ant-tree-iconEle{width:0px}
+  /** Button按钮间距 */
+  .ant-btn {
+    margin-left: 3px
+  }
+
+  .table-operator {
+    margin-bottom: 10px
+  }
+
+  .ant-tree li span.ant-tree-switcher, .ant-tree li span.ant-tree-iconEle {
+    width: 0px
+  }
 </style>

ant-design-jeecg-vue/src/views/system/LogList.vue

@@ -3,7 +3,7 @@
     <!--导航区域-->
     <div>
       <a-tabs defaultActiveKey="1" @change="callback">
-        <a-tab-pane tab="登陆日志" key="1"></a-tab-pane>
+        <a-tab-pane tab="登录日志" key="1"></a-tab-pane>
         <a-tab-pane tab="操作日志" key="2"></a-tab-pane>
       </a-tabs>
     </div>
@@ -13,18 +13,18 @@
       <a-form layout="inline">
         <a-row :gutter="24">
 
-          <a-col :span="6">
+          <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 :span="10">
-            <a-form-item label="创建时间">
+          <a-col :md="8" :sm="10">
+            <a-form-item label="创建时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
               <a-range-picker
-                :showTime="{ format: 'HH:mm' }"
+                style="width: 210px"
                 v-model="queryParam.createTimeRange"
-                format="YYYY-MM-DD HH:mm"
+                format="YYYY-MM-DD"
                 :placeholder="['开始时间', '结束时间']"
                 @change="onDateChange"
                 @ok="onDateOk"
@@ -32,10 +32,10 @@
             </a-form-item>
           </a-col>
 
-          <a-col :span="8" >
-            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
-              <a-button type="primary" @click="searchByquery" icon="search">查询</a-button>
-              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
+          <a-col :md="8" :sm="10" >
+            <span style="float: right;" class="table-page-search-submitButtons">
+              <a-button type="primary" style="left: -35px" @click="searchQuery" icon="search">查询</a-button>
+              <a-button type="primary"  @click="searchReset" icon="reload" style="margin-left: 8px;left: -35px">重置</a-button>
             </span>
           </a-col>
 
@@ -61,17 +61,17 @@
         </p>
 
       </a-table>
-    </div>
     <!-- table区域-end -->
   </a-card>
 </template>
 
 <script>
   import { filterObj } from '@/utils/util';
-  import {getLogList,deleteLog,deleteLogList} from '@/api/api'
+  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
 
   export default {
     name: "LogList",
+    mixins:[JeecgListMixin],
     data () {
       return {
         description: '这是日志管理页面',
@@ -88,7 +88,6 @@
             title: '#',
             dataIndex: '',
             key:'rowIndex',
-            fixed:'center',
             align:"center",
             customRender:function (t,r,index) {
               return parseInt(index)+1;
@@ -98,7 +97,6 @@
             title: '日志内容',
             align:"left",
             dataIndex: 'logContent',
-            fixed:'center',
             sorter: true
           },
           {
@@ -127,8 +125,8 @@
           },
           {
             title: '日志类型',
-            dataIndex: 'logType',
-            customRender:function (text) {
+            dataIndex: 'logType_dictText',
+            /*customRender:function (text) {
               if(text==1){
                 return "登录日志";
               }else if(text==2){
@@ -136,7 +134,7 @@
               }else{
                 return text;
               }
-            },
+            },*/
             align:"center",
           },
           {
@@ -146,47 +144,20 @@
             sorter: true
           }
         ],
-        //数据集
-        dataSource:[],
-        // 分页参数
-        ipagination:{
-          current: 1,
-          pageSize: 10,
-          pageSizeOptions: ['10', '20', '30'],
-          showTotal: (total, range) => {
-            return range[0] + "-" + range[1] + " 共" + total + "条"
-          },
-          showQuickJumper: true,
-          showSizeChanger: true,
-          total: 0
+        labelCol: {
+          xs: { span: 1 },
+          sm: { span: 2 },
         },
-        isorter:{
-          column: 'createTime',
-          order: 'desc',
+        wrapperCol: {
+          xs: { span: 10 },
+          sm: { span: 16 },
+        },
+        url: {
+          list: "/sys/log/list",
         },
-        loading:false,
       }
     },
-    created() {
-      this.loadData();
-    },
     methods: {
-      loadData (arg){
-        //加载数据 若传入参数1则加载第一页的内容
-        if(arg===1){
-          this.ipagination.current = 1;
-        }
-        var params = this.getQueryParams();//查询条件
-        this.loading=true;
-        getLogList(params).then((res)=>{
-          if(res.success){
-            this.dataSource = res.result.records;
-            this.ipagination.total = res.result.total;
-            this.loading=false;
-            this.loadrefresh = false;
-          }
-        })
-      },
       getQueryParams(){
         console.log(this.queryParam.createTimeRange)
         var param = Object.assign({}, this.queryParam,this.isorter);
@@ -196,17 +167,7 @@
         delete param.createTimeRange; // 时间参数不传递后台
         return filterObj(param);
       },
-      getQueryField(){
-        var str = "id,";
-        for(var a = 0;a<this.columns.length;a++){
-          str+=","+this.columns[a].dataIndex;
-        }
-        return str;
-      },
-      // 查询
-      searchByquery(){
-        this.loadData(1);
-      },
+
       // 重置
       searchReset(){
         var that = this;
@@ -229,17 +190,6 @@
       onDateOk(value) {
         console.log(value);
       },
-      handleTableChange(pagination, filters, sorter){
-        //分页、排序、筛选变化时触发
-        console.log(sorter);
-        //TODO 筛选
-        if (Object.keys(sorter).length>0){
-          this.isorter.column = sorter.field;
-          this.isorter.order = "ascend"==sorter.order?"asc":"desc"
-        }
-        this.ipagination = pagination;
-        this.loadData();
-      },
     }
   }
 </script>
@@ -247,9 +197,6 @@
   .ant-card-body .table-operator{
     margin-bottom: 18px;
   }
-  .ant-layout-content{
-    margin:12px 16px 0 !important;
-  }
   .ant-table-tbody .ant-table-row td{
     padding-top:15px;
     padding-bottom:15px;

ant-design-jeecg-vue/src/views/system/PermissionDataRuleList.vue

@@ -0,0 +1,176 @@
+<template>
+  <a-drawer
+    title="数据权限规则"
+    :width="drawerWidth"
+    @close="onClose"
+    :visible="visible"
+    :wrapStyle="{height: 'calc(100% - 108px)',overflow: 'auto',paddingBottom: '108px'}"
+  >
+    <!-- 抽屉内容的border -->
+    <div
+      :style="{
+          padding:'10px',
+          border: '1px solid #e9e9e9',
+          background: '#fff',
+        }">
+      <div class="table-page-search-wrapper">
+        <a-form>
+          <a-row :gutter="12">
+            <a-col :md="8" :sm="8">
+              <a-form-item label="规则名称" :labelCol="{span: 8}" :wrapperCol="{span: 14, offset: 1}">
+                <a-input placeholder="请输入规则名称" v-model="queryParam.ruleName"></a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :md="8" :sm="8">
+              <a-form-item label="规则值" :labelCol="{span: 8}" :wrapperCol="{span: 14, offset: 1}">
+                <a-input placeholder="请输入规则值" v-model="queryParam.ruleValue"></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-row>
+            <a-col :md="24" :sm="24">
+              <a-button style="margin-bottom: 10px" @click="addPermissionRule" type="primary" icon="plus">添加</a-button>
+            </a-col>
+          </a-row>
+        </a-form>
+
+        <a-table
+          ref="table"
+          rowKey="id"
+          size="middle"
+          :columns="columns"
+          :dataSource="dataSource"
+          :loading="loading">
+          <span slot="action" slot-scope="text, record">
+            <a @click="handleEdit(record)">
+              <a-icon type="edit"/>编辑
+            </a>
+            <a-divider type="vertical"/>
+            <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
+                  <a>删除</a>
+            </a-popconfirm>
+          </span>
+        </a-table>
+
+      </div>
+    </div>
+    <permission-data-rule-modal @ok="modalFormOk" ref="modalForm"></permission-data-rule-modal>
+  </a-drawer>
+</template>
+<script>
+  import {getPermissionRuleList, queryPermissionRule} from '@/api/api'
+  import {JeecgListMixin} from '@/mixins/JeecgListMixin'
+  import PermissionDataRuleModal from './modules/PermissionDataRuleModal'
+
+  const columns = [
+    {
+      title: '规则名称',
+      dataIndex: 'ruleName',
+      key: 'ruleName'
+    },
+    {
+      title: '规则字段',
+      dataIndex: 'ruleColumn',
+      key: 'ruleColumn'
+    },
+    {
+      title: '规则值',
+      dataIndex: 'ruleValue',
+      key: 'ruleValue'
+    },
+    {
+      title: '操作',
+      dataIndex: 'action',
+      scopedSlots: {customRender: 'action'},
+      align: 'center'
+    }
+  ]
+  export default {
+    name: 'PermissionDataRuleList',
+    mixins: [JeecgListMixin],
+    components: {
+      PermissionDataRuleModal
+    },
+    data() {
+      return {
+        queryParam: {},
+        drawerWidth: 650,
+        columns: columns,
+        permId: '',
+        visible: false,
+        form: this.$form.createForm(this),
+        loading: false,
+        url: {
+          list: "/sys/permission/getPermRuleListByPermId",
+          delete: "/sys/permission/deletePermissionRule",
+        },
+      }
+    },
+    created() {
+      this.resetScreenSize()
+    },
+    methods: {
+      loadData() {
+        let that = this
+        this.dataSource = []
+        var params = this.getQueryParams()//查询条件
+        getPermissionRuleList(params).then((res) => {
+          if (res.success) {
+            that.dataSource = res.result
+          }
+        })
+      },
+      edit(record) {
+        if (record.id) {
+          this.visible = true
+          this.permId = record.id
+        }
+        this.queryParam = {}
+        this.queryParam.permissionId = record.id
+        this.visible = true
+        this.loadData()
+        this.resetScreenSize()
+      },
+      addPermissionRule() {
+        this.$refs.modalForm.add(this.permId)
+        this.$refs.modalForm.title = '新增'
+      },
+      searchQuery() {
+        var params = this.getQueryParams();
+        params.permissionId = this.permId;
+        queryPermissionRule(params).then((res) => {
+          if (res.success) {
+            this.dataSource = res.result
+          }
+        })
+      },
+      searchReset() {
+        this.queryParam = {}
+        this.queryParam.permissionId = this.permId
+        this.loadData(1);
+      },
+      onClose() {
+        this.visible = false
+      },
+      // 根据屏幕变化,设置抽屉尺寸
+      resetScreenSize() {
+        let screenWidth = document.body.clientWidth
+        if (screenWidth < 500) {
+          this.drawerWidth = screenWidth
+        } else {
+          this.drawerWidth = 650
+        }
+      },
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

ant-design-jeecg-vue/src/views/system/PermissionList.vue

@@ -5,97 +5,101 @@
     <div class="table-operator">
       <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
       <a-button
-        @click="batchdel"
+        @click="batchDel"
         style="margin-left:8px"
         v-if="selectedRowKeys.length > 0"
         ghost
         type="primary"
-        icon="delete">批量删除</a-button>
+        icon="delete">批量删除
+      </a-button>
     </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>
-        已选择&nbsp;<a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项&nbsp;&nbsp;
+        <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>
 
       <a-table
         :columns="columns"
         size="middle"
+        :pagination="false"
         :dataSource="dataSource"
-        :rowSelection="rowSelection"
-      >
+        :loading="loading"
+        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}">
 
         <span slot="action" slot-scope="text, record">
           <a @click="handleEdit(record)">编辑</a>
 
-          <a-divider type="vertical" />
+          <a-divider type="vertical"/>
           <a-dropdown>
             <a class="ant-dropdown-link">
-              更多 <a-icon type="down" />
+              更多 <a-icon type="down"/>
             </a>
             <a-menu slot="overlay">
               <a-menu-item>
                 <a href="javascript:;" @click="handleDetail(record)">详情</a>
               </a-menu-item>
 
+              <a-menu-item>
+                <a href="javascript:;" @click="handleDataRule(record)">数据规则</a>
+              </a-menu-item>
+
               <a-menu-item>
                 <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                   <a>删除</a>
                 </a-popconfirm>
               </a-menu-item>
-
-              <!--<a-menu-item v-if="record.status==1">
-                <a-popconfirm title="确定冻结吗?" @confirm="() => handleFrozen(record.id,2)">
-                  <a>冻结</a>
-                </a-popconfirm>
-              </a-menu-item>
-
-              <a-menu-item v-if="record.status==2">
-                <a-popconfirm title="确定解冻吗?" @confirm="() => handleFrozen(record.id,1)">
-                  <a>解冻</a>
-                </a-popconfirm>
-              </a-menu-item>-->
-
             </a-menu>
           </a-dropdown>
         </span>
-
+        <!-- 字符串超长截取省略号显示 -->
+        <span slot="url" slot-scope="text, record">
+          <j-ellipsis :value="text" :length="25"/>
+        </span>
+        <!-- 字符串超长截取省略号显示-->
+        <span slot="component" slot-scope="text, record">
+          <j-ellipsis :value="text"/>
+        </span>
       </a-table>
 
     </div>
     <!-- table区域-end -->
 
-    <permission-modal ref="permissionmodal" @ok="modalFormOk"></permission-modal>
+    <permission-modal ref="modalForm" @ok="modalFormOk"></permission-modal>
+    <permission-data-rule-list ref="PermissionDataRuleList" @ok="modalFormOk"></permission-data-rule-list>
 
   </a-card>
 </template>
 
 <script>
   import PermissionModal from './modules/PermissionModal'
-  import {getPermissionList,deletePermission,deletePermissionList} from '@/api/api'
+  import { getPermissionList } from '@/api/api'
+  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
+  import PermissionDataRuleList from './PermissionDataRuleList'
+  import JEllipsis from '@/components/jeecg/JEllipsis'
 
   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;
+      customRender: function(text) {
+        if (text == 0) {
+          return '菜单'
+        } else if (text == 1) {
+          return '菜单'
+        } else if (text == 2) {
+          return '按钮'
+        } else {
+          return text
         }
       }
     },/*{
@@ -105,152 +109,72 @@
     },*/{
       title: 'icon',
       dataIndex: 'icon',
-      key: 'icon',
+      key: 'icon'
     },
     {
       title: '组件',
       dataIndex: 'component',
       key: 'component',
+      scopedSlots: { customRender: 'component' }
     },
     {
       title: '路径',
       dataIndex: 'url',
       key: 'url',
+      scopedSlots: { customRender: 'url' }
     },
     {
       title: '排序',
       dataIndex: 'sortNo',
-      key: 'sortNo',
+      key: 'sortNo'
     },
     {
       title: '操作',
       dataIndex: 'action',
       scopedSlots: { customRender: 'action' },
-      fixed:"right",
-      align:"center",
-      width:150
+      align: 'center',
+      width: 150
     }
-  ];
+  ]
 
   export default {
-    name: "PermissionList",
+    name: 'PermissionList',
+    mixins: [JeecgListMixin],
     components: {
-      PermissionModal
+      PermissionDataRuleList,
+      PermissionModal,
+      JEllipsis
     },
-    data () {
+    data() {
       return {
         description: '这是菜单管理页面',
-        //数据集
-        dataSource:[],
         // 表头
-        columns:columns,
-        rowSelection:{
-          onChange: (selectedRowKeys) => {
-            //console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
-            this.selectedRowKeys = selectedRowKeys;
-          },
-
-        },
-        loading:false,
-        selectedRowKeys: [],
-        selectedRows: [],
+        columns: columns,
+        loading: false,
+        url: {
+          list: '/sys/permission/list',
+          delete: '/sys/permission/delete',
+          deleteBatch: '/sys/permission/deleteBatch'
+        }
       }
     },
-    created() {
-      this.loadData();
-    },
     methods: {
-      loadData (){
-        this.dataSource = [];
-        getPermissionList().then((res)=>{
-          if(res.success){
-            console.log( res.result);
-            this.dataSource = res.result;
-
-            /*for(let a = 0;a<res.result.length;a++){
-              let temp = res.result[a];
-
-              this.dataSource.push(temp);
-            }*/
+      loadData() {
+        this.dataSource = []
+        getPermissionList().then((res) => {
+          if (res.success) {
+            console.log(res.result)
+            this.dataSource = res.result
           }
         })
       },
-      onClearSelected(){
-        this.selectedRowKeys = [];
-      },
-      handleAdd(){
-        this.$refs.permissionmodal.add();
-        this.$refs.permissionmodal.title="新增";
-      },
-      handleEdit: function(record){
-        this.$refs.permissionmodal.edit(record);
-        this.$refs.permissionmodal.title="编辑";
-      },
-      handleDetail(record){
-        this.$refs.permissionmodal.edit(record);
-        this.$refs.permissionmodal.title="详情";
-        this.$refs.permissionmodal.disableSubmit = true;
-      },
-      handleDelete(id){
-        var that = this;
-        deletePermission({id: id}).then((res)=>{
-          if(res.success){
-            that.$message.success(res.message);
-            that.loadData();
-          }else{
-            that.$message.warning(res.message);
-          }
-        });
-      },
-      batchdel: function(){
-        if(this.selectedRowKeys.length<=0){
-          this.$message.warning('请选择一条记录！');
-          return ;
-        }else{
-          var ids = "";
-          for(var a =0;a<this.selectedRowKeys.length;a++){
-            ids+=this.selectedRowKeys[a]+",";
-          }
-          var that = this;
-          this.$confirm({
-            title:"确认删除",
-            content:"是否删除选中数据?",
-            onOk: function(){
-              deletePermissionList({ids: ids}).then((res)=>{
-                if(res.success){
-                  that.$message.success(res.message);
-                  that.loadData();
-                  that.onClearSelected();
-                }else{
-                  that.$message.warning(res.message);
-                }
-              });
-            }
-          });
-        }
-      },
-      modalFormOk () {
-        // 新增/修改 成功时，重载列表
-        this.loadData();
-      },
+      // 打开数据规则编辑
+      handleDataRule(record) {
+        this.$refs.PermissionDataRuleList.edit(record)
+      }
     }
   }
 </script>
 <style scoped>
-  .ant-card-body .table-operator{
-    margin-bottom: 18px;
-  }
-  .ant-layout-content{
-    margin:12px 16px 0 !important;
-  }
-  .ant-table-tbody .ant-table-row td{
-    padding-top:15px;
-    padding-bottom:15px;
-  }
-  .anty-row-operator button{margin: 0 5px}
-  .ant-btn-danger{background-color: #ffffff}
-
-  .ant-modal-cust-warp{height: 100%}
-  .ant-modal-cust-warp .ant-modal-body{height:calc(100% - 110px) !important;overflow-y: auto}
-  .ant-modal-cust-warp .ant-modal-content{height:90% !important;overflow-y: hidden}
+  @import '../../assets/less/common.css';
 </style>

ant-design-jeecg-vue/src/views/system/QuartzJobList.vue

@@ -6,14 +6,14 @@
       <a-form layout="inline">
         <a-row :gutter="24">
 
-          <a-col :span="6">
+          <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 :span="6">
+          <a-col :md="6" :sm="10">
             <a-form-item label="任务状态">
-              <a-select style="width: 150px" v-model="queryParam.status" placeholder="请选择状态">
+              <a-select style="width: 220px" 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>
@@ -21,7 +21,7 @@
             </a-form-item>
           </a-col>
 
-          <a-col :span="8" >
+          <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>
@@ -35,7 +35,11 @@
     <!-- 操作按钮区域 -->
     <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" :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>
@@ -63,6 +67,12 @@
         :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
         @change="handleTableChange">
 
+        <!-- 字符串超长截取省略号显示-->
+        <span slot="description" slot-scope="text">
+          <j-ellipsis :value="text" :length="25" />
+        </span>
+
+
         <span slot="action" slot-scope="text, record">
           <a @click="resumeJob(record)" v-if="record.status==-1">启动</a>
           <a @click="pauseJob(record)" v-if="record.status==0">停止</a>
@@ -91,19 +101,22 @@
     <!-- table区域-end -->
 
     <!-- 表单区域 -->
-    <quartzJob-modal ref="quartzJobModal" @ok="modalFormOk"></quartzJob-modal>
+    <quartzJob-modal ref="modalForm" @ok="modalFormOk"></quartzJob-modal>
   </a-card>
 </template>
 
 <script>
   import QuartzJobModal from './modules/QuartzJobModal'
-  import { filterObj } from '@/utils/util'
-  import { deleteAction,getAction,postAction } from '@/api/manage'
+  import { postAction } from '@/api/manage'
+  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
+  import JEllipsis from "@/components/jeecg/JEllipsis";
 
   export default {
     name: "QuartzJobList",
+    mixins:[JeecgListMixin],
     components: {
-      QuartzJobModal
+      QuartzJobModal,
+      JEllipsis
     },
     data () {
       return {
@@ -122,33 +135,38 @@
               return parseInt(index)+1;
             }
           },
-          
-		  {
+          {
             title: '任务类名',
             align:"center",
             dataIndex: 'jobClassName',
-            sorter: true
+            sorter: true,
+/*            customRender:function (text) {
+              return "*"+text.substring(9,text.length);
+            }*/
           },
-		  {
+          {
             title: 'cron表达式',
             align:"center",
             dataIndex: 'cronExpression'
           },
-		  {
+          {
             title: '参数',
             align:"center",
             dataIndex: 'parameter'
           },
-		  {
+          {
             title: '描述',
             align:"center",
-            dataIndex: 'description'
+            width: 300,
+            dataIndex: 'description',
+            scopedSlots: {customRender: 'description'},
           },
-		  {
+          {
             title: '状态',
             align:"center",
             dataIndex: 'status',
             scopedSlots: { customRender: 'customRenderStatus' },
+            filterMultiple: false,
             filters: [
               { text: '已启动', value: '0' },
               { text: '已暂停', value: '-1' },
@@ -158,131 +176,41 @@
             title: '操作',
             dataIndex: 'action',
             align:"center",
+            width:180,
             scopedSlots: { customRender: 'action' },
           }
         ],
-        //数据集
-        dataSource:[],
-        // 分页参数
-        ipagination:{
-          current: 1,
-          pageSize: 10,
-          pageSizeOptions: ['10', '20', '30'],
-          showTotal: (total, range) => {
-            return range[0] + "-" + range[1] + " 共" + total + "条"
-          },
-          showQuickJumper: true,
-          showSizeChanger: true,
-          total: 0
-        },
-        isorter:{
-          column: 'createTime',
-          order: 'desc',
-        },
-        loading:false,
-        selectedRowKeys: [],
-        selectedRows: [],
 		url: {
           list: "/sys/quartzJob/list",
           delete: "/sys/quartzJob/delete",
           deleteBatch: "/sys/quartzJob/deleteBatch",
           pause: "/sys/quartzJob/pause",
           resume: "/sys/quartzJob/resume",
+          exportXlsUrl: "sys/quartzJob/exportXls",
+          importExcelUrl: "sys/quartzJob/importExcel",
         },
-        
       }
     },
-    created() {
-      this.loadData();
+    computed: {
+      importExcelUrl: function () {
+        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
+      }
     },
+
     methods: {
-      loadData (arg){
-        //加载数据 若传入参数1则加载第一页的内容
-        if(arg===1){
-          this.ipagination.current = 1;
+
+      //筛选需要重写handleTableChange
+      handleTableChange(pagination, filters, sorter) {
+        //分页、排序、筛选变化时触发
+        //TODO 筛选
+        if (Object.keys(sorter).length > 0) {
+          this.isorter.column = sorter.field;
+          this.isorter.order = "ascend" == sorter.order ? "asc" : "desc"
         }
-        var params = this.getQueryParams();//查询条件
-        getAction(this.url.list,params).then((res)=>{
-          if(res.success){
-            this.dataSource = res.result.records;
-            this.ipagination.total = res.result.total;
-          }
-        })
-      },
-      getQueryParams(){
-        var param = Object.assign({}, this.queryParam,this.isorter);
-        param.field = this.getQueryField();
-        param.pageNo = this.ipagination.current;
-        param.pageSize = this.ipagination.pageSize;
-        return filterObj(param);
-      },
-      getQueryField(){
-        //TODO 字段权限控制
-        var str = "id,";
-        for(var a = 0;a<this.columns.length;a++){
-          str+=","+this.columns[a].dataIndex;
-        }
-        return str;
-      },
-      onSelectChange (selectedRowKeys,selectionRows) {
-        this.selectedRowKeys = selectedRowKeys;
-        this.selectionRows = selectionRows;
-      },
-      onClearSelected(){
-        this.selectedRowKeys = [];
-        this.selectionRows = [];
-      },
-      searchQuery(){
-        this.loadData(1);
-      },
-      searchReset(){
-        var that = this;
-        for(var a in that.queryParam){
-          that.queryParam[a] = '';
-        }
-        that.loadData(1);
-      },
-      batchDel: function(){
-        if(this.selectedRowKeys.length<=0){
-          this.$message.warning('请选择一条记录！');
-          return ;
-        }else{
-          var ids = "";
-          for(var a =0;a<this.selectedRowKeys.length;a++){
-            ids+=this.selectedRowKeys[a]+",";
-          }
-          var that = this;
-          this.$confirm({
-            title:"确认删除",
-            content:"是否删除选中数据?",
-            onOk: function(){
-              deleteAction(that.url.deleteBatch,{ids: ids}).then((res)=>{
-                if(res.success){
-                  that.$message.success(res.message);
-                  that.loadData();
-                  that.onClearSelected();
-                }else{
-                  that.$message.warning(res.message);
-                }
-              });
-            }
-          });
-        }
-      },
-      handleDelete: function(id){
-        var that = this;
-        deleteAction(that.url.delete,{id: id}).then((res)=>{
-          if(res.success){
-            that.$message.success(res.message);
-            that.loadData();
-          }else{
-            that.$message.warning(res.message);
-          }
-        });
-      },
-      handleEdit: function(record){
-        this.$refs.quartzJobModal.edit(record);
-        this.$refs.quartzJobModal.title="编辑";
+        //这种筛选方式只支持单选
+        this.filters.status = filters.status[0];
+        this.ipagination = pagination;
+        this.loadData();
       },
       pauseJob: function(record){
         var that = this;
@@ -308,8 +236,8 @@
         var that = this;
         //恢复定时任务
         this.$confirm({
-          title:"确认暂停",
-          content:"是否暂停选中任务?",
+          title:"确认启动",
+          content:"是否启动选中任务?",
           onOk: function(){
             postAction(that.url.resume,record).then((res)=>{
               if(res.success){
@@ -323,34 +251,17 @@
           }
         });
       },
-      handleAdd: function(){
-        this.$refs.quartzJobModal.add();
-        this.$refs.quartzJobModal.title="新增";
-      },
-      handleTableChange(pagination, filters, sorter){
-        //分页、排序、筛选变化时触发
-        console.log(sorter);
-        //TODO 筛选
-        if (Object.keys(sorter).length>0){
-          this.isorter.column = sorter.field;
-          this.isorter.order = "ascend"==sorter.order?"asc":"desc"
-        }
-        this.ipagination = pagination;
-        this.loadData();
-      },
-      modalFormOk () {
-        // 新增/修改 成功时，重载列表
-        this.loadData();
-      }
     }
   }
 </script>
 <style scoped>
-  .ant-card-body .table-operator{
-    margin-bottom: 18px;
+  /** Button按钮间距 */
+  .ant-btn {
+    margin-left: 3px
   }
-  .ant-layout-content{
-    margin:12px 16px 0 !important;
+
+  .ant-card-body .table-operator {
+    margin-bottom: 18px;
   }
   .ant-table-tbody .ant-table-row td{
     padding-top:10px;

ant-design-jeecg-vue/src/views/system/RoleList.vue

@@ -2,39 +2,37 @@
   <a-card :bordered="false" class="card-area">
 
     <!-- 查询区域 -->
-    <div>
+    <div class="table-page-search-wrapper">
       <!-- 搜索区域 -->
-      <a-form layout="horizontal">
-        <div class="fold">
-          <a-row >
-            <a-col :md="12" :sm="24" >
-              <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-form layout="inline">
+        <a-row :gutter="24">
+          <a-col :md="6" :sm="8">
+            <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>
+          <a-col :md="6" :sm="8">
+            <a-form-item label="创建时间" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}">
+              <a-range-picker @change="onChangeDate" v-model="queryParam.createTimeIsRange"/>
+            </a-form-item>
+          </a-col>
+          <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
+            <a-col :md="6" :sm="24">
+              <a-button type="primary" @click="searchQuery">查询</a-button>
+              <a-button style="margin-left: 8px" @click="searchReset">重置</a-button>
             </a-col>
-            <a-col :md="12" :sm="24" >
-              <a-form-item
-                label="创建时间"
-                :labelCol="{span: 5}"
-                :wrapperCol="{span: 18, offset: 1}">
-                <a-range-picker @change="onChangeDate" v-model="queryParam.createTimeIsRange"/>
-              </a-form-item>
-            </a-col>
-          </a-row>
-        </div>
-        <span style="float: right; margin-top: 3px;">
-          <a-button type="primary" @click="searchQuery">查询</a-button>
-          <a-button style="margin-left: 8px" @click="searchReset">重置</a-button>
-        </span>
+          </span>
+        </a-row>
       </a-form>
     </div>
 
     <!-- 操作按钮区域 -->
-    <div class="table-operator">
+    <div class="table-operator"  style="margin-top: 5px">
       <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" :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">
@@ -92,25 +90,26 @@
     <!-- table区域-end -->
 
     <!-- 表单区域 -->
-    <role-modal ref="roleModal" @ok="modalFormOk"></role-modal>
+    <role-modal ref="modalForm" @ok="modalFormOk"></role-modal>
     <user-role-modal ref="modalUserRole"></user-role-modal>
   </a-card>
 </template>
 
 <script>
   import RoleModal from './modules/RoleModal'
-  import { filterObj } from '@/utils/util'
   import UserRoleModal from './modules/UserRoleModal'
-  import {getRoleList,deleteRole,deleteRoleList} from '@/api/api'
+  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
 
   export default {
     name: "RoleList",
+    mixins:[JeecgListMixin],
     components: {
       RoleModal,
       UserRoleModal
     },
     data () {
       return {
+
         description: '角色管理页面',
         // 查询条件
         queryParam: {roleName:'',createTimeIsRange:[]},
@@ -160,145 +159,25 @@
             scopedSlots: { customRender: 'action' },
           }
         ],
-        //数据集
-        dataSource:[],
-        // 分页参数
-        ipagination:{
-          current: 1,
-          pageSize: 10,
-          pageSizeOptions: ['10', '20', '30'],
-          showTotal: (total, range) => {
-            return range[0] + "-" + range[1] + " 共" + total + "条"
-          },
-          showQuickJumper: true,
-          showSizeChanger: true,
-          total: 0
+        url: {
+          list: "/sys/role/list",
+          delete: "/sys/role/delete",
+          deleteBatch: "/sys/role/deleteBatch",
+          exportXlsUrl: "sys/role/exportXls",
+          importExcelUrl: "sys/role/importExcel",
         },
-        isorter:{
-          column: 'createTime',
-          order: 'desc',
-        },
-        loading:false,
-        selectedRowKeys: [],
-        selectedRows: [],
-
       }
     },
-    created() {
-      this.loadData();
+    computed: {
+      importExcelUrl: function(){
+        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
+      }
     },
     methods: {
-      loadData (arg){
-        //加载数据 若传入参数1则加载第一页的内容
-        if(arg===1){
-          this.ipagination.current = 1;
-        }
-        var params = this.getQueryParams();//查询条件
-        getRoleList(params).then((res)=>{
-          if(res.success){
-            this.dataSource = res.result.records;
-            this.ipagination.total = res.result.total;
-          }
-        })
-      },
-      getQueryParams(){
-        var param = Object.assign({}, this.queryParam,this.isorter);
-        param.field = this.getQueryField();
-        param.pageNo = this.ipagination.current;
-        param.pageSize = this.ipagination.pageSize;
-        return filterObj(param);
-      },
-      getQueryField(){
-        //TODO 字段权限控制
-        var str = "id,";
-        for(var a = 0;a<this.columns.length;a++){
-          str+=","+this.columns[a].dataIndex;
-        }
-        return str;
-      },
-      onSelectChange (selectedRowKeys,selectionRows) {
-        this.selectedRowKeys = selectedRowKeys;
-        this.selectionRows = selectionRows;
-      },
-      onClearSelected(){
-        this.selectedRowKeys = [];
-        this.selectionRows = [];
-      },
-      searchQuery(){
-        this.loadData(1);
-      },
-      searchReset(){
-        var that = this;
-        for(var a in that.queryParam){
-          that.queryParam[a] = '';
-        }
-        that.loadData(1);
-      },
-      batchDel: function(){
-        if(this.selectedRowKeys.length<=0){
-          this.$message.warning('请选择一条记录！');
-          return ;
-        }else{
-          var ids = "";
-          for(var a =0;a<this.selectedRowKeys.length;a++){
-            ids+=this.selectedRowKeys[a]+",";
-          }
-          var that = this;
-          this.$confirm({
-            title:"确认删除",
-            content:"是否删除选中数据?",
-            onOk: function(){
-              deleteRoleList({ids: ids}).then((res)=>{
-                if(res.success){
-                  that.$message.success(res.message);
-                  that.loadData();
-                  that.onClearSelected();
-                }else{
-                  that.$message.warning(res.message);
-                }
-              });
-            }
-          });
-        }
-      },
-      handleDelete: function(id){
-        var that = this;
-        deleteRole({id: id}).then((res)=>{
-          if(res.success){
-            that.$message.success(res.message);
-            that.loadData();
-          }else{
-            that.$message.warning(res.message);
-          }
-        });
-      },
-      handleEdit: function(record){
-        this.$refs.roleModal.edit(record);
-        this.$refs.roleModal.title="编辑";
-      },
-      handleAdd: function(){
-        this.$refs.roleModal.add();
-        this.$refs.roleModal.title="新增";
-      },
       handlePerssion: function(roleId){
        // alert(roleId);
         this.$refs.modalUserRole.show(roleId);
       },
-      handleTableChange(pagination, filters, sorter){
-        //分页、排序、筛选变化时触发
-        console.log(sorter);
-        //TODO 筛选
-        if (Object.keys(sorter).length>0){
-          this.isorter.column = sorter.field;
-          this.isorter.order = "ascend"==sorter.order?"asc":"desc"
-        }
-        this.ipagination = pagination;
-        this.loadData();
-      },
-      modalFormOk () {
-        // 新增/修改 成功时，重载列表
-        this.loadData();
-      },
       onChangeDate(date, dateString) {
         console.log(date, dateString);
       },
@@ -306,12 +185,13 @@
   }
 </script>
 <style scoped>
+  /** Button按钮间距 */
+  .ant-btn {
+    margin-left: 3px
+  }
   .ant-card-body .table-operator{
     margin-bottom: 18px;
   }
-  .ant-layout-content{
-    margin:12px 16px 0 !important;
-  }
   .ant-table-tbody .ant-table-row td{
     padding-top:15px;
     padding-bottom:15px;
@@ -322,6 +202,4 @@
   .ant-modal-cust-warp{height: 100%}
   .ant-modal-cust-warp .ant-modal-body{height:calc(100% - 110px) !important;overflow-y: auto}
   .ant-modal-cust-warp .ant-modal-content{height:90% !important;overflow-y: hidden}
-
-  @import '../../assets/less/index.less';
 </style>

ant-design-jeecg-vue/src/views/system/SysAnnouncementList.vue

@@ -17,7 +17,7 @@
             </a-form-item>
           </a-col>
 
-          <a-col :span="8" >
+          <a-col :span="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>
@@ -31,12 +31,20 @@
     <!-- 操作按钮区域 -->
     <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" :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>
 
@@ -62,9 +70,9 @@
         <span slot="action" slot-scope="text, record">
           <a @click="handleEdit(record)">编辑</a>
 
-          <a-divider type="vertical" />
+          <a-divider type="vertical"/>
           <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-item>
                 <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
@@ -90,22 +98,22 @@
     <!-- table区域-end -->
 
     <!-- 表单区域 -->
-    <sysAnnouncement-modal ref="sysAnnouncementModal" @ok="modalFormOk"></sysAnnouncement-modal>
+    <sysAnnouncement-modal ref="modalForm" @ok="modalFormOk"></sysAnnouncement-modal>
   </a-card>
 </template>
 
 <script>
   import SysAnnouncementModal from './modules/SysAnnouncementModal'
-  import { filterObj } from '@/utils/util'
-  import { deleteAction,getAction } from '@/api/manage'
-  import { doReleaseData,doReovkeData } from '@/api/api'
+  import {doReleaseData, doReovkeData} from '@/api/api'
+  import {JeecgListMixin} from '@/mixins/JeecgListMixin'
 
   export default {
     name: "SysAnnouncementList",
+    mixins: [JeecgListMixin],
     components: {
       SysAnnouncementModal
     },
-    data () {
+    data() {
       return {
         description: '系统通告表管理页面',
         // 查询条件
@@ -115,270 +123,145 @@
           {
             title: '#',
             dataIndex: '',
-            key:'rowIndex',
-            width:60,
-            align:"center",
-            customRender:function (t,r,index) {
-              return parseInt(index)+1;
+            key: 'rowIndex',
+            width: 60,
+            align: "center",
+            customRender: function (t, r, index) {
+              return parseInt(index) + 1;
             }
           },
-          
-		  {
+
+          {
             title: '标题',
-            align:"center",
+            align: "center",
             dataIndex: 'titile'
           },
-		  /*{
-            title: '内容',
-            align:"center",
-            dataIndex: 'msgContent'
-          },*/
-		  {
+          /*{
+                title: '内容',
+                align:"center",
+                dataIndex: 'msgContent'
+              },*/
+          {
             title: '开始时间',
-            align:"center",
+            align: "center",
             dataIndex: 'startTime'
           },
-		  {
+          {
             title: '结束时间',
-            align:"center",
+            align: "center",
             dataIndex: 'endTime'
           },
-		  {
+          {
             title: '发布人',
-            align:"center",
+            align: "center",
             dataIndex: 'sender'
           },
-		  {
+          {
             title: '优先级',
-            align:"center",
+            align: "center",
             dataIndex: 'priority',
-            customRender:function (text) {
-              if(text=='L'){
+            customRender: function (text) {
+              if (text == 'L') {
                 return "低";
-              }else if(text=="M"){
+              } else if (text == "M") {
                 return "中";
-              }else if(text=="H"){
+              } else if (text == "H") {
                 return "高";
               } else {
                 return text;
               }
             }
           },
-		  {
+          {
             title: '通告对象类型',
-            align:"center",
+            align: "center",
             dataIndex: 'msgType',
-            customRender:function (text) {
-              if(text=='USER'){
+            customRender: function (text) {
+              if (text == 'USER') {
                 return "指定用户";
-              }else if(text=="ALL"){
+              } else if (text == "ALL") {
                 return "全体用户";
               } else {
                 return text;
               }
             }
           },
-		  {
+          {
             title: '发布状态',
-            align:"center",
+            align: "center",
             dataIndex: 'sendStatus',
-            customRender:function (text) {
-              if(text==0){
+            customRender: function (text) {
+              if (text == 0) {
                 return "未发布";
-              }else if(text==1){
+              } else if (text == 1) {
                 return "已发布";
-              }else if(text==2){
+              } else if (text == 2) {
                 return "已撤销";
               } else {
                 return text;
               }
             }
           },
-		  {
+          {
             title: '发布时间',
-            align:"center",
+            align: "center",
             dataIndex: 'sendTime'
           },
-		  {
+          {
             title: '撤销时间',
-            align:"center",
+            align: "center",
             dataIndex: 'cancelTime'
           },
-		  /*{
-            title: '删除状态（0，正常，1已删除）',
-            align:"center",
-            dataIndex: 'delFlag'
-          },*/
+          /*{
+                title: '删除状态（0，正常，1已删除）',
+                align:"center",
+                dataIndex: 'delFlag'
+              },*/
           {
             title: '操作',
             dataIndex: 'action',
-            align:"center",
-            scopedSlots: { customRender: 'action' },
+            align: "center",
+            scopedSlots: {customRender: 'action'},
           }
         ],
-        //数据集
-        dataSource:[],
-        // 分页参数
-        ipagination:{
-          current: 1,
-          pageSize: 10,
-          pageSizeOptions: ['10', '20', '30'],
-          showTotal: (total, range) => {
-            return range[0] + "-" + range[1] + " 共" + total + "条"
-          },
-          showQuickJumper: true,
-          showSizeChanger: true,
-          total: 0
-        },
-        isorter:{
-          column: 'createTime',
-          order: 'desc',
-        },
-        loading:false,
-        selectedRowKeys: [],
-        selectedRows: [],
-		url: {
+        url: {
           list: "/sys/annountCement/list",
           delete: "/sys/annountCement/delete",
           deleteBatch: "/sys/annountCement/deleteBatch",
-          releaseDataUrl:"/sys/annountCement/doReleaseData",
-          reovkeDataUrl:"sys/annountCement/doReovkeData",
+          releaseDataUrl: "/sys/annountCement/doReleaseData",
+          reovkeDataUrl: "sys/annountCement/doReovkeData",
+          exportXlsUrl: "sys/annountCement/exportXls",
+          importExcelUrl: "sys/annountCement/importExcel",
         },
-        
       }
     },
-    created() {
-      this.loadData();
+    computed: {
+      importExcelUrl: function(){
+        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
+      }
     },
     methods: {
-      loadData (arg){
-        //加载数据 若传入参数1则加载第一页的内容
-        if(arg===1){
-          this.ipagination.current = 1;
-        }
-        var params = this.getQueryParams();//查询条件
-        getAction(this.url.list,params).then((res)=>{
-          if(res.success){
-            this.dataSource = res.result.records;
-            this.ipagination.total = res.result.total;
-          }
-        })
-      },
-      getQueryParams(){
-        var param = Object.assign({}, this.queryParam,this.isorter);
-        param.field = this.getQueryField();
-        param.pageNo = this.ipagination.current;
-        param.pageSize = this.ipagination.pageSize;
-        return filterObj(param);
-      },
-      getQueryField(){
-        //TODO 字段权限控制
-        var str = "id,";
-        for(var a = 0;a<this.columns.length;a++){
-          str+=","+this.columns[a].dataIndex;
-        }
-        return str;
-      },
-      onSelectChange (selectedRowKeys,selectionRows) {
-        this.selectedRowKeys = selectedRowKeys;
-        this.selectionRows = selectionRows;
-      },
-      onClearSelected(){
-        this.selectedRowKeys = [];
-        this.selectionRows = [];
-      },
-      searchQuery(){
-        this.loadData(1);
-      },
-      searchReset(){
-        var that = this;
-        for(var a in that.queryParam){
-          that.queryParam[a] = '';
-        }
-        that.loadData(1);
-      },
-      batchDel: function(){
-        if(this.selectedRowKeys.length<=0){
-          this.$message.warning('请选择一条记录！');
-          return ;
-        }else{
-          var ids = "";
-          for(var a =0;a<this.selectedRowKeys.length;a++){
-            ids+=this.selectedRowKeys[a]+",";
-          }
-          var that = this;
-          this.$confirm({
-            title:"确认删除",
-            content:"是否删除选中数据?",
-            onOk: function(){
-              deleteAction(that.url.deleteBatch,{ids: ids}).then((res)=>{
-                if(res.success){
-                  that.$message.success(res.message);
-                  that.loadData();
-                  that.onClearSelected();
-                }else{
-                  that.$message.warning(res.message);
-                }
-              });
-            }
-          });
-        }
-      },
-      handleDelete: function(id){
-        var that = this;
-        deleteAction(that.url.delete,{id: id}).then((res)=>{
-          if(res.success){
-            that.$message.success(res.message);
-            that.loadData();
-          }else{
-            that.$message.warning(res.message);
-          }
-        });
-      },
-      handleEdit: function(record){
-        this.$refs.sysAnnouncementModal.edit(record);
-        this.$refs.sysAnnouncementModal.title="编辑";
-      },
-      handleAdd: function(){
-        this.$refs.sysAnnouncementModal.add();
-        this.$refs.sysAnnouncementModal.title="新增";
-      },
-      handleTableChange(pagination, filters, sorter){
-        //分页、排序、筛选变化时触发
-        console.log(sorter);
-        //TODO 筛选
-        if (Object.keys(sorter).length>0){
-          this.isorter.column = sorter.field;
-          this.isorter.order = "ascend"==sorter.order?"asc":"desc"
-        }
-        this.ipagination = pagination;
-        this.loadData();
-      },
-      modalFormOk () {
-        // 新增/修改 成功时，重载列表
-        this.loadData();
-      },
       //执行发布操作
-      releaseData: function(id){
+      releaseData: function (id) {
         console.log(id);
         var that = this;
-        doReleaseData({id:id}).then((res)=>{
-          if(res.success){
+        doReleaseData({id: id}).then((res) => {
+          if (res.success) {
             that.$message.success(res.message);
             that.loadData(1);
-          }else{
+          } else {
             that.$message.warning(res.message);
           }
         });
       },
       //执行撤销操作
-      reovkeData: function(id){
+      reovkeData: function (id) {
         var that = this;
-        doReovkeData({id:id}).then((res)=>{
-          if(res.success){
+        doReovkeData({id: id}).then((res) => {
+          if (res.success) {
             that.$message.success(res.message);
             that.loadData(1);
-          }else{
+          } else {
             that.$message.warning(res.message);
           }
         });
@@ -387,20 +270,38 @@
   }
 </script>
 <style scoped>
-  .ant-card-body .table-operator{
+  /** Button按钮间距 */
+  .ant-btn {
+    margin-left: 3px
+  }
+  .ant-card-body .table-operator {
     margin-bottom: 18px;
   }
-  .ant-layout-content{
-    margin:12px 16px 0 !important;
-  }
-  .ant-table-tbody .ant-table-row td{
-    padding-top:15px;
-    padding-bottom:15px;
-  }
-  .anty-row-operator button{margin: 0 5px}
-  .ant-btn-danger{background-color: #ffffff}
 
-  .ant-modal-cust-warp{height: 100%}
-  .ant-modal-cust-warp .ant-modal-body{height:calc(100% - 110px) !important;overflow-y: auto}
-  .ant-modal-cust-warp .ant-modal-content{height:90% !important;overflow-y: hidden}
+  .ant-table-tbody .ant-table-row td {
+    padding-top: 15px;
+    padding-bottom: 15px;
+  }
+
+  .anty-row-operator button {
+    margin: 0 5px
+  }
+
+  .ant-btn-danger {
+    background-color: #ffffff
+  }
+
+  .ant-modal-cust-warp {
+    height: 100%
+  }
+
+  .ant-modal-cust-warp .ant-modal-body {
+    height: calc(100% - 110px) !important;
+    overflow-y: auto
+  }
+
+  .ant-modal-cust-warp .ant-modal-content {
+    height: 90% !important;
+    overflow-y: hidden
+  }
 </style>

ant-design-jeecg-vue/src/views/system/UserList.vue

@@ -6,13 +6,13 @@
       <a-form layout="inline">
         <a-row :gutter="24">
 
-          <a-col :span="6">
+          <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 :span="6">
+          <a-col :md="6" :sm="8">
             <a-form-item label="性别">
               <a-select v-model="queryParam.sex" placeholder="请选择性别查询">
                 <a-select-option value="">请选择性别查询</a-select-option>
@@ -24,19 +24,19 @@
 
 
           <template v-if="toggleSearchStatus">
-            <a-col :span="6">
+            <a-col :md="6" :sm="8">
               <a-form-item label="邮箱">
                 <a-input placeholder="请输入邮箱查询" v-model="queryParam.email"></a-input>
               </a-form-item>
             </a-col>
 
-            <a-col :span="6">
+            <a-col :md="6" :sm="8">
               <a-form-item label="手机号码">
                 <a-input placeholder="请输入手机号码查询" v-model="queryParam.phone"></a-input>
               </a-form-item>
             </a-col>
 
-            <a-col :span="6">
+            <a-col :md="6" :sm="8">
               <a-form-item label="状态">
                 <a-select v-model="queryParam.status" placeholder="请选择用户状态查询">
                   <a-select-option value="">请选择用户状态</a-select-option>
@@ -47,9 +47,9 @@
             </a-col>
           </template>
 
-          <a-col :span="6" >
+          <a-col :md="6" :sm="8">
             <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
-              <a-button type="primary" @click="searchByquery" icon="search">查询</a-button>
+              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
               <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
               <a @click="handleToggleSearch" style="margin-left: 8px">
                 {{ toggleSearchStatus ? '收起' : '展开' }}
@@ -63,25 +63,31 @@
     </div>
 
     <!-- 操作按钮区域 -->
-    <div class="table-operator">
-      <a-button @click="handleAdd" type="primary" icon="plus">添加用户</a-button>
-      <!--<a-button
-
-        style="margin-left:8px"
-        v-if="selectedRowKeys.length > 0"
-        ghost
-        type="primary"
-        icon="delete">批量删除</a-button>-->
-
-
+    <div class="table-operator" style="border-top: 5px">
+      <a-button @click="handleAdd" v-has="'user:add'" type="primary" icon="plus">添加用户</a-button>
+      <a-button @click="handleSyncUser" type="primary" icon="plus">重新同步流程用户</a-button>
+      <a-button type="primary" icon="download" @click="handleExportXls">导出</a-button>
+      <a-upload name="file" :showUploadList="false" :multiple="false" :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" @click="handleMenuClick">
-          <a-menu-item key="1"><a-icon type="delete" @click="batchdel"/>删除</a-menu-item>
-          <a-menu-item key="2"><a-icon type="lock" @click="batchFrozen('2')"/>冻结</a-menu-item>
-          <a-menu-item key="3"><a-icon type="unlock" @click="batchFrozen('1')"/>解冻</a-menu-item>
+          <a-menu-item key="1">
+            <a-icon type="delete" @click="batchDel"/>
+            删除
+          </a-menu-item>
+          <a-menu-item key="2">
+            <a-icon type="lock" @click="batchFrozen('2')"/>
+            冻结
+          </a-menu-item>
+          <a-menu-item key="3">
+            <a-icon type="unlock" @click="batchFrozen('1')"/>
+            解冻
+          </a-menu-item>
         </a-menu>
         <a-button style="margin-left: 8px">
-          批量操作 <a-icon type="down" />
+          批量操作
+          <a-icon type="down"/>
         </a-button>
       </a-dropdown>
     </div>
@@ -89,8 +95,7 @@
     <!-- table区域-begin -->
     <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;
+        <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>
 
@@ -110,32 +115,24 @@
           <div class="anty-img-wrap">
             <img :src="getAvatarView(record.avatar)"/>
           </div>
-
         </template>
 
-        <!--<span slot="action" slot-scope="text, record" class="anty-row-operator">
-          <a-button type="primary" size="small" icon="setting">角色配置</a-button>
-          <a-button type="default" size="small" icon="edit" @click="handleEdit(record)">编辑</a-button>
-          <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
-            <a-button type="danger" size="small" icon="delete">删除</a-button>
-          </a-popconfirm>
-        </span>-->
-
         <span slot="action" slot-scope="text, record">
           <a @click="handleEdit(record)">编辑</a>
 
-          <a-divider type="vertical" />
+          <a-divider type="vertical"/>
+
           <a-dropdown>
             <a class="ant-dropdown-link">
-              更多 <a-icon type="down" />
+              更多 <a-icon type="down"/>
             </a>
             <a-menu slot="overlay">
-              <a-menu-item >
+              <a-menu-item>
                 <a href="javascript:;" @click="handleDetail(record)">详情</a>
               </a-menu-item>
 
-              <a-menu-item >
-                <a href="javascript:;" @click="handleChangePassword(record.username)">修改密码</a>
+              <a-menu-item>
+                <a href="javascript:;" @click="handleChangePassword(record.username)">密码</a>
               </a-menu-item>
 
               <a-menu-item>
@@ -165,7 +162,7 @@
     </div>
     <!-- table区域-end -->
 
-    <user-modal ref="modal" @ok="modalFormOk"></user-modal>
+    <user-modal ref="modalForm" @ok="modalFormOk"></user-modal>
 
     <password-modal ref="passwordmodal" @ok="passwordModalOk"></password-modal>
 
@@ -173,19 +170,20 @@
 </template>
 
 <script>
-  import { filterObj } from '@/utils/util';
   import UserModal from './modules/UserModal'
   import PasswordModal from './modules/PasswordModal'
-
-  import {doMian,getUserList,deleteUser,deleteUserList,frozenBatch} from '@/api/api'
+  import {putAction} from '@/api/manage';
+  import {frozenBatch} from '@/api/api'
+  import {JeecgListMixin} from '@/mixins/JeecgListMixin'
 
   export default {
     name: "UserList",
+    mixins: [JeecgListMixin],
     components: {
       UserModal,
       PasswordModal
     },
-    data () {
+    data() {
       return {
         description: '这是用户管理页面',
         queryParam: {},
@@ -202,180 +200,110 @@
           },*/
           {
             title: '用户账号',
-            align:"center",
+            align: "center",
             dataIndex: 'username',
-            fixed:'left',
-            width:200
+            width: 120
           },
           {
             title: '真实姓名',
-            align:"center",
+            align: "center",
+            width: 100,
             dataIndex: 'realname',
           },
           {
             title: '头像',
-            align:"center",
+            align: "center",
+            width: 120,
             dataIndex: 'avatar',
-            scopedSlots:{customRender:"avatarslot"}
+            scopedSlots: {customRender: "avatarslot"}
           },
 
           {
             title: '性别',
-            align:"center",
-            dataIndex: 'sex',
-            customRender:function (text) {
-              if(text==1){
-                return "男";
-              }else if(text==2){
-                return "女";
-              }else{
-                return text;
-              }
-            }
+            align: "center",
+            width: 80,
+            dataIndex: 'sex_dictText'
           },
           {
             title: '生日',
-            align:"center",
+            align: "center",
+            width: 180,
             dataIndex: 'birthday'
           },
           {
             title: '手机号码',
-            align:"center",
+            align: "center",
+            width: 100,
             dataIndex: 'phone'
           },
           {
             title: '邮箱',
-            align:"center",
+            align: "center",
             dataIndex: 'email'
           },
           {
             title: '状态',
-            align:"center",
-            dataIndex: 'status',
-            customRender:function (text) {
-              if(text==1){
-                return "正常";
-              }else if(text==2){
-                return "冻结";
-              }else{
-                return text;
-              }
-            }
+            align: "center",
+            width: 80,
+            dataIndex: 'status_dictText'
           },
-          {
+         /* {
             title: '创建时间',
-            align:"center",
+            align: "center",
+            width: 150,
             dataIndex: 'createTime',
-            sorter:true
-          },
+            sorter: true
+          },*/
           {
             title: '操作',
             dataIndex: 'action',
-            scopedSlots: { customRender: 'action' },
-            fixed:"right",
-            align:"center",
-            width:150
+            scopedSlots: {customRender: 'action'},
+            align: "center",
+            width: 170
           }
 
         ],
-        dataSource:[],
-        ipagination:{
-          current: 1,
-          pageSize: 10,
-          pageSizeOptions: ['10', '20', '30'],
-          showTotal: (total, range) => {
-            return range[0] + "-" + range[1] + " 共" + total + "条"
-          },
-          showQuickJumper: true,
-          showSizeChanger: true,
-          total: 0
-        },
-        isorter:{
-          column: 'createTime',
-          order: 'desc',
-        },
-        loading:false,
-        selectedRowKeys: [],
-        selectedRows: [],
-        toggleSearchStatus:false,
         url: {
-          imgerver:doMian+"/sys/common/view"
+          imgerver: window._CONFIG['domianURL'] + "/sys/common/view",
+          syncUser: "/process/extActProcess/doSyncUser",
+          list: "/sys/user/list",
+          delete: "/sys/user/delete",
+          deleteBatch: "/sys/user/deleteBatch",
+          exportXlsUrl: "sys/user/exportXls",
+          importExcelUrl: "sys/user/importExcel",
         },
-
       }
     },
-    created() {
-      this.loadData();
+    computed: {
+      importExcelUrl: function(){
+        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
+      }
     },
-
     methods: {
-      loadData (arg){
-        if(arg===1){
-          this.ipagination.current = 1;
-        }
-        let params = this.getQueryParams();//查询条件
-        getUserList(params).then((res)=>{
-          if(res.success){
-            this.dataSource = res.result.records;
-            this.ipagination.total = res.result.total;
-          }
-        })
+      getAvatarView: function (avatar) {
+        return this.url.imgerver + "/" + avatar;
       },
-      getQueryParams(){
-        let param = Object.assign({}, this.queryParam,this.isorter);
-        param.field = this.getQueryField();
-        param.current = this.ipagination.current;
-        param.pageSize = this.ipagination.pageSize;
-        return filterObj(param);
-      },
-      getQueryField(){
-        let str = "id,";
-        for(let a = 0;a<this.columns.length;a++){
-          str+=","+this.columns[a].dataIndex;
-        }
-        return str;
-      },
-      getAvatarView:function(avatar){
-        return this.url.imgerver +"/"+ avatar;
-      },
-      onSelectChange (selectedRowKeys,selectionRows) {
-        this.selectedRowKeys = selectedRowKeys;
-        this.selectionRows = selectionRows;
-      },
-      onClearSelected(){
-        this.selectedRowKeys = [];
-        this.selectionRows = [];
-      },
-      searchByquery(){
-        this.loadData(1);
-      },
-      searchReset(){
-        let that = this;
-        Object.keys(that.queryParam).forEach(function(key){
-          that.queryParam[key] = '';
-        });
-        that.loadData(1);
-      },
-      batchFrozen:function(status){
-        if(this.selectedRowKeys.length<=0){
+
+      batchFrozen: function (status) {
+        if (this.selectedRowKeys.length <= 0) {
           this.$message.warning('请选择一条记录！');
           return false;
-        }else{
+        } else {
           let ids = "";
           let that = this;
-          that.selectedRowKeys.forEach(function(val) {
-            ids+=val+",";
+          that.selectedRowKeys.forEach(function (val) {
+            ids += val + ",";
           });
           that.$confirm({
-            title:"确认操作",
-            content:"是否"+(status==1?"解冻":"冻结")+"选中账号?",
-            onOk: function(){
-              frozenBatch({ids: ids,status:status}).then((res)=>{
-                if(res.success){
+            title: "确认操作",
+            content: "是否" + (status == 1 ? "解冻" : "冻结") + "选中账号?",
+            onOk: function () {
+              frozenBatch({ids: ids, status: status}).then((res) => {
+                if (res.success) {
                   that.$message.success(res.message);
                   that.loadData();
                   that.onClearSelected();
-                }else{
+                } else {
                   that.$message.warning(res.message);
                 }
               });
@@ -383,96 +311,40 @@
           });
         }
       },
-      batchdel: function(){
-        if(this.selectedRowKeys.length<=0){
-          this.$message.warning('请选择一条记录！');
-          return false;
-        }else{
-          let ids = "";
-          let that = this;
-          that.selectedRowKeys.forEach(function(val) {
-            ids+=val+",";
-          });
-          that.$confirm({
-            title:"确认删除",
-            content:"是否删除选中数据?",
-            onOk: function(){
-              deleteUserList({ids: ids}).then((res)=>{
-                if(res.success){
-                  that.$message.success(res.message);
-                  that.loadData();
-                  that.onClearSelected();
-                }else{
-                  that.$message.warning(res.message);
-                }
-              });
-            }
-          });
-        }
-      },
-      handleMenuClick(e){
-        if(e.key==1){
-          this.batchdel();
-        }else if(e.key==2){
+      handleMenuClick(e) {
+        if (e.key == 1) {
+          this.batchDel();
+        } else if (e.key == 2) {
           this.batchFrozen(2);
-        }else if(e.key==3){
+        } else if (e.key == 3) {
           this.batchFrozen(1);
         }
       },
-      handleDelete: function(id){
+      handleFrozen: function (id, status) {
         let that = this;
-        deleteUser({id: id}).then((res)=>{
-          if(res.success){
+        frozenBatch({ids: id, status: status}).then((res) => {
+          if (res.success) {
             that.$message.success(res.message);
             that.loadData();
-          }else{
+          } else {
             that.$message.warning(res.message);
           }
         });
       },
-      handleFrozen: function(id,status){
-        let that = this;
-        frozenBatch({ids: id,status:status}).then((res)=>{
-          if(res.success){
-            that.$message.success(res.message);
-            that.loadData();
-          }else{
-            that.$message.warning(res.message);
-          }
-        });
-      },
-      handleEdit: function(record){
-        this.$refs.modal.edit(record);
-        this.$refs.modal.title="编辑";
-      },
-      handleAdd: function(){
-        this.$refs.modal.add();
-        this.$refs.modal.title="新增";
-      },
-      handleDetail:function(record){
-        this.$refs.modal.edit(record);
-        this.$refs.modal.title="详情";
-        this.$refs.modal.disableSubmit = true;
-      },
-      handleTableChange(pagination, filters, sorter){
-        //TODO 筛选
-        if (Object.keys(sorter).length>0){
-          this.isorter.column = sorter.field;
-          this.isorter.order = "ascend"==sorter.order?"asc":"desc"
-        }
-        this.ipagination = pagination;
-        this.loadData();
-      },
-      handleToggleSearch(){
-        this.toggleSearchStatus = !this.toggleSearchStatus;
-      },
-      handleChangePassword(username){
+      handleChangePassword(username) {
         this.$refs.passwordmodal.show(username);
       },
-      modalFormOk () {
-        this.loadData();
+      handleSyncUser() {
+        var that = this;
+        putAction(that.url.syncUser, {}).then((res) => {
+          if (res.success) {
+            that.$message.success(res.message);
+          } else {
+            that.$message.warning(res.message);
+          }
+        })
       },
-      passwordModalOk(){
+      passwordModalOk() {
         //TODO 密码修改完成 不需要刷新页面，可以把datasource中的数据更新一下
       }
     }
@@ -480,23 +352,52 @@
   }
 </script>
 <style scoped>
-  .ant-card-body .table-operator{
+  /** Button按钮间距 */
+  .ant-btn {
+    margin-left: 3px
+  }
+  .ant-card-body {
     margin-bottom: 18px;
   }
-  .ant-layout-content{
-    margin:12px 16px 0 !important;
-  }
-  .ant-table-tbody .ant-table-row td{
-    padding-top:15px;
-    padding-bottom:15px;
-  }
-  .anty-row-operator button{margin: 0 5px}
-  .ant-btn-danger{background-color: #ffffff}
 
-  .ant-modal-cust-warp{height: 100%}
-  .ant-modal-cust-warp .ant-modal-body{height:calc(100% - 110px) !important;overflow-y: auto}
-  .ant-modal-cust-warp .ant-modal-content{height:90% !important;overflow-y: hidden}
+  .table-operator button {
+    margin-bottom: 18px;
+    margin-right: 5px;
+  }
 
-  .anty-img-wrap{height:25px;position: relative;}
-  .anty-img-wrap > img{max-height:100%;}
+  .ant-table-tbody .ant-table-row td {
+    padding-top: 15px;
+    padding-bottom: 15px;
+  }
+
+  .anty-row-operator button {
+    margin: 0 5px
+  }
+
+  .ant-btn-danger {
+    background-color: #ffffff
+  }
+
+  .ant-modal-cust-warp {
+    height: 100%
+  }
+
+  .ant-modal-cust-warp .ant-modal-body {
+    height: calc(100% - 110px) !important;
+    overflow-y: auto
+  }
+
+  .ant-modal-cust-warp .ant-modal-content {
+    height: 90% !important;
+    overflow-y: hidden
+  }
+
+  .anty-img-wrap {
+    height: 25px;
+    position: relative;
+  }
+
+  .anty-img-wrap > img {
+    max-height: 100%;
+  }
 </style>

ant-design-jeecg-vue/src/views/system/modules/DataLogCompareModal.vue

@@ -0,0 +1,163 @@
+<template>
+  <a-modal
+    :width="modalWidth"
+    :visible="visible"
+    :footer="null"
+    @cancel="handleCancel"
+    cancelText="关闭">
+    <!--table区 -->
+    <div class="marginCss">
+      <a-table
+        ref="table"
+        size="small"
+        bordered
+        rowKey="id"
+        :columns="columns"
+        :dataSource="dataSource"
+        :rowClassName="setdataCss"
+        :loading="loading"
+        :scroll="{ y: 700 }"
+        :pagination="false">
+        <span slot="dataVersionTitle1"><a-icon type="smile-o" /> 版本:{{dataVersion1Num}}</span>
+        <span slot="dataVersionTitle2"><a-icon type="smile-o" /> 版本:{{dataVersion2Num}}</span>
+        <template slot="avatarslot" slot-scope="text, record">
+          <div class="anty-img-wrap">
+            <img :src="getAvatarView(record)"/>
+          </div>
+
+        </template>
+      </a-table>
+    </div>
+  </a-modal>
+</template>
+
+<script>
+  import {getAction} from '@/api/manage'
+
+  export default {
+    name: 'DataLogCompareModal',
+    data() {
+      return {
+        modalWidth: 1000,
+        modaltoggleFlag: true,
+        confirmDirty: false,
+        title: '操作',
+        visible: false,
+        model: {},
+        confirmLoading: false,
+        headers: {},
+        //版本号
+        dataVersion1Num:'',
+        dataVersion2Num:'',
+        //表头
+        columns: [
+          {
+            title: '字段名',
+            align: 'left',
+            dataIndex: 'code',
+            width: '30%',
+          }, {
+            align: 'left',
+            dataIndex: 'dataVersion1',
+            width: '30%',
+            slots: { title: 'dataVersionTitle1' },
+          }, {
+            title: '',
+            dataIndex: 'imgshow',
+            align: 'center',
+            scopedSlots: {customRender: "avatarslot"},
+            width: '10%',
+          }, {
+            align: 'left',
+            dataIndex: 'dataVersion2',
+            width: '30%',
+            slots: { title: 'dataVersionTitle2' },
+          }
+        ],
+        //数据集
+        dataSource: [],
+        loading: false,
+        url: {
+          queryCompareUrl: "/sys/dataLog/queryCompareList",
+        },
+      }
+    },
+    created() {
+
+    },
+    methods: {
+      loadData(dataId1, dataId2) {
+        this.dataSource = [];
+        let that = this;
+        getAction(that.url.queryCompareUrl, {dataId1: dataId1, dataId2: dataId2}).then((res) => {
+          if (res.success) {
+            that.dataVersion1Num = res.result[0].dataVersion;
+            that.dataVersion2Num = res.result[1].dataVersion;
+            let json1 = JSON.parse(res.result[0].dataContent);
+            let json2 = JSON.parse(res.result[1].dataContent);
+            for (var item1 in json1) {
+              for (var item2 in json2) {
+                if (item1 == item2) {
+                  this.dataSource.push({
+                    code: item1,
+                    imgshow: '',
+                    dataVersion1: json1[item1],
+                    dataVersion2: json2[item2],
+                  })
+                }
+              }
+            }
+          } else {
+            console.log(res.message);
+          }
+        })
+      },
+      compareModal(dataId1, dataId2) {
+        this.visible = true
+        this.loadData(dataId1, dataId2);
+      },
+      handleCancel() {
+        this.close()
+      },
+      modalFormOk() {
+      },
+      close() {
+        this.$emit('close');
+        this.visible = false;
+        this.disableSubmit = false;
+      },
+      setdataCss(record) {
+        let className = 'trcolor';
+        const dataVersion1 = record.dataVersion1;
+        const dataVersion2 = record.dataVersion2;
+        if (dataVersion1 != dataVersion2) {
+          return className;
+        }
+      },
+      getAvatarView: function (avatar) {
+        if (avatar.dataVersion1 != avatar.dataVersion2) {
+          return "/goright.png";
+        } else {
+          return "";
+        }
+      },
+    }
+  }
+</script>
+
+<style scoped>
+  .anty-img-wrap {
+    height: 25px;
+    position: relative;
+  }
+
+  .anty-img-wrap > img {
+    max-height: 100%;
+  }
+
+  .marginCss {
+    margin-top: 20px;
+  }
+
+  @import '../../../assets/less/index.less';
+</style>

ant-design-jeecg-vue/src/views/system/modules/DataLogModal.vue

@@ -0,0 +1,153 @@
+<template>
+  <div>
+    <a-modal
+      :width="modalWidth"
+      :visible="visible"
+      title="数据对比窗口"
+      :confirmLoading="confirmLoading"
+      @ok="handleOk"
+      @cancel="handleCancel"
+      cancelText="取消">
+
+      <a-spin :spinning="confirmLoading">
+        <a-form @submit="handleSubmit" :form="form" class="form">
+          <a-row class="form-row" :gutter="24">
+            <a-col :md="12" :sm="8">
+              <a-form-item label="数据库表名"  :label-col="{ span: 6 }" :wrapper-col="{ span: 15 }">
+                <a-input placeholder="请输入数据库表名" v-decorator="[ 'dataTale', {}]" @blur="handleTableBlur" disabled/>
+              </a-form-item>
+            </a-col>
+
+            <a-col :md="12" :sm="8">
+              <a-form-item label="数据ID"  :label-col="{ span: 5 }" :wrapper-col="{ span: 15 }">
+                <a-input placeholder="请输入数据ID" v-decorator="[ 'dataId', {}]" @blur="handleIdBlur" disabled/>
+              </a-form-item>
+            </a-col>
+          </a-row>
+
+          <a-row class="form-row" :gutter="24">
+            <a-col :md="12" :sm="8">
+              <a-form-item label="版本号1"  :label-col="{ span: 6 }" :wrapper-col="{ span: 15 }">
+                <a-select placeholder="请选择版本号" v-decorator="[ 'dataVersion1', {}]" @change="handleChange1">
+                  <a-select-option v-for="(log,logindex) in DataVersionList" :key="logindex.toString()" :value="log.id">
+                    {{ log.dataVersion }}
+                  </a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+            <a-col :md="12" :sm="8">
+              <a-form-item label="版本号2"  :label-col="{ span: 5 }" :wrapper-col="{ span: 15 }">
+                <a-select placeholder="请选择版本号" v-decorator="[ 'dataVersion2', {}]" @change="handleChange2">
+                  <a-select-option v-for="(log,logindex) in DataVersionList" :key="logindex.toString()" :value="log.id">
+                    {{ log.dataVersion }}
+                  </a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </a-form>
+      </a-spin>
+      <data-log-compare-modal ref="modal" @ok="modalFormOk" ></data-log-compare-modal>
+    </a-modal>
+  </div>
+</template>
+
+<script>
+  import { getAction } from '@/api/manage'
+  import DataLogCompareModal from './DataLogCompareModal'
+  export default {
+    name: 'DataLogModal',
+    components: { DataLogCompareModal },
+    dataId1:'',
+    dataId2: '',
+    dataTable1:'',
+    dataID3:'',
+
+    data () {
+      return {
+        modalWidth:700,
+        modaltoggleFlag:true,
+        confirmDirty: false,
+        title:"操作",
+        visible: false,
+        model: {},
+        confirmLoading: false,
+        headers:{},
+        form:this.$form.createForm(this),
+        url: {
+          queryDataVerListUrl:"/sys/dataLog/queryDataVerList",
+        },
+        DataVersionList:[],
+      }
+    },
+    created () {
+    },
+    methods: {
+      addModal(records){
+        const dataTable = records[0].dataTable
+        const dataId = records[0].dataId;
+        const dataVersion1 = records[0].dataVersion;
+        const dataVersion2 = records[1].dataVersion;
+        this.dataId1 = records[0].id;
+        this.dataId2 = records[1].id;
+        this.dataTable1 = records[0].dataTable
+        this.dataID3 =  records[0].dataId
+        this.initDataVersionList();
+        this.form.resetFields();
+        this.visible = true;
+        this.$nextTick(() => {
+          this.form.setFieldsValue({dataTale:dataTable,dataId:dataId,dataVersion1:dataVersion1,dataVersion2:dataVersion2});
+        });
+      },
+      handleOk () {
+        this.close();
+        this.$refs.modal.compareModal(this.dataId1  ,this.dataId2);
+        this.$refs.modal.title="数据比较";
+      },
+      handleCancel(){
+        this.close()
+      },
+      handleSubmit(){
+      },
+      close () {
+        this.$emit('close');
+        this.visible = false;
+        this.disableSubmit = false;
+      },
+      modalFormOk () {
+      },
+      initDataVersionList(){
+        let that = this;
+        getAction(that.url.queryDataVerListUrl,{dataTable:this.dataTable1,dataId:this.dataID3}).then((res)=>{
+          if(res.success){
+            this.DataVersionList = res.result;
+          }else{
+            this.DataVersionList=[];
+            this.dataId1 = '',
+            this.dataId2='',
+            console.log(res.message);
+
+          }
+        });
+      },
+      handleChange1(value) {
+        this.dataId1 = value;
+      },
+      handleChange2(value) {
+        this.dataId2 = value;
+      },
+      handleTableBlur(e){
+        this.dataTable1 = e.target.value;
+        this.initDataVersionList();
+      },
+      handleIdBlur(e){
+        this.dataID3 = e.target.value;
+        this.initDataVersionList();
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

ant-design-jeecg-vue/src/views/system/modules/DepartModal.vue

@@ -120,7 +120,6 @@
             for (let i = 0; i < res.result.length; i++) {
               let temp = res.result[i];
               that.departTree.push(temp);
-              console.log(temp.id)
             }
           }
 

ant-design-jeecg-vue/src/views/system/modules/DepartWindow.vue

@@ -101,13 +101,10 @@
             if(this.userId == null){
               getAction(this.url.userId).then((res)=>{
                 if(res.success){
-                  that.$message.success(res.message);
                   let formData = {userId:res.result,
-                    departIdList:this.departList}
+                  departIdList:this.departList}
                   console.log(formData)
                   that.$emit('ok', formData);
-                }else{
-                  that.$message.warning("添加失败!");
                 }
               }).finally(() => {
                 that.departList = [];

ant-design-jeecg-vue/src/views/system/modules/DictItemModal.vue

@@ -1,7 +1,7 @@
 <template>
   <a-modal
     :title="title"
-    :width="600"
+    :width="800"
     :visible="visible"
     :confirmLoading="confirmLoading"
     @ok="handleOk"
@@ -15,7 +15,7 @@
           :labelCol="labelCol"
           :wrapperCol="wrapperCol"
           label="名称">
-          <a-input placeholder="请输入名称" v-decorator="['itemText', validatorRules.itemText]" />
+          <a-input placeholder="请输入名称" v-decorator="['itemText', validatorRules.itemText]"/>
         </a-form-item>
 
         <a-form-item
@@ -36,14 +36,15 @@
           :labelCol="labelCol"
           :wrapperCol="wrapperCol"
           label="排序值">
-          <a-input-number :min="1" v-decorator="['sortOrder',{'initialValue':1}]"/> 值越小越靠前，支持小数
+          <a-input-number :min="1" v-decorator="['sortOrder',{'initialValue':1}]"/>
+          值越小越靠前，支持小数
         </a-form-item>
 
         <a-form-item
           :labelCol="labelCol"
           :wrapperCol="wrapperCol"
           label="是否启用"
-          hasFeedback >
+          hasFeedback>
           <a-switch checkedChildren="启用" unCheckedChildren="禁用" @change="onChose" v-model="visibleCheck"/>
         </a-form-item>
 
@@ -54,45 +55,45 @@
 
 <script>
   import pick from 'lodash.pick'
-  import {addDictItem,editDictItem} from '@/api/api'
+  import {addDictItem, editDictItem, getDictItemList} from '@/api/api'
 
   export default {
     name: "DictItemModal",
-    data () {
+    data() {
       return {
-        title:"操作",
+        title: "操作",
         visible: false,
         visibleCheck: true,
         model: {},
-        dictId:"",
-        status:1,
+        dictId: "",
+        status: 1,
         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},
         },
         confirmLoading: false,
         form: this.$form.createForm(this),
-        validatorRules:{
-          itemText:{rules: [{ required: true, message: '请输入名称!' }]},
-          itemValue:{rules: [{ required: true, message: '请输入数据值!' }]},
+        validatorRules: {
+          itemText: {rules: [{required: true, message: '请输入名称!'}]},
+          itemValue: {rules: [{required: true, message: '请输入数据值!'}]},
         },
       }
     },
-    created () {
+    created() {
     },
     methods: {
-      add (dictId) {
+      add(dictId) {
         this.dictId = dictId;
         this.edit({});
       },
-      edit (record) {
-        if(record.id){
+      edit(record) {
+        if (record.id) {
           this.dictId = record.dictId;
-          this.visibleCheck = (record.status == 1)?true:false;
+          this.visibleCheck = (record.status == 1) ? true : false;
         }
         this.form.resetFields();
         this.model = Object.assign({}, record);
@@ -100,20 +101,34 @@
         this.model.status = this.status;
         this.visible = true;
         this.$nextTick(() => {
-          this.form.setFieldsValue(pick(this.model,'itemText','itemValue','description','sortOrder'))
+          this.form.setFieldsValue(pick(this.model, 'itemText', 'itemValue', 'description', 'sortOrder'))
         });
       },
+      // 将查询字典对象数据的方法拆分出来,需要的时候再加载
+      getDictItemList() {
+        // 查询字典数据
+        var params = this.getQueryParams();//查询条件
+        getDictItemList(params).then((res) => {
+          if (res.success) {
+            this.dataSource = res.result.records;
+            console.log(this.dataSource)
+            this.ipagination.total = res.result.total;
+            this.loadrefresh = false;
+            this.loading = false;
+          }
+        })
+      },
       onChose(checked) {
-        if(checked){
-          this.status=1;
-          this.visibleCheck=true;
-        }else{
-          this.status=0;
-          this.visibleCheck=false;
+        if (checked) {
+          this.status = 1;
+          this.visibleCheck = true;
+        } else {
+          this.status = 0;
+          this.visibleCheck = false;
         }
       },
       // 确定
-      handleOk () {
+      handleOk() {
         const that = this;
         // 触发表单验证
         this.form.validateFields((err, values) => {
@@ -122,16 +137,16 @@
             let formData = Object.assign(this.model, values);
             formData.status = this.status;
             let obj;
-            if(!this.model.id){
-              obj=addDictItem(formData);
-            }else{
-              obj=editDictItem(formData);
+            if (!this.model.id) {
+              obj = addDictItem(formData);
+            } else {
+              obj = editDictItem(formData);
             }
-            obj.then((res)=>{
-              if(res.success){
+            obj.then((res) => {
+              if (res.success) {
                 that.$message.success(res.message);
                 that.$emit('ok');
-              }else{
+              } else {
                 that.$message.warning(res.message);
               }
             }).finally(() => {
@@ -142,10 +157,10 @@
         })
       },
       // 关闭
-      handleCancel () {
+      handleCancel() {
         this.close();
       },
-      close () {
+      close() {
         this.$emit('close');
         this.visible = false;
       },

ant-design-jeecg-vue/src/views/system/modules/DictModal.vue

@@ -15,7 +15,7 @@
           :labelCol="labelCol"
           :wrapperCol="wrapperCol"
           label="字典名称">
-          <a-input placeholder="请输入字典名称" v-decorator="[ 'dictName', validatorRules.dictName]" />
+          <a-input placeholder="请输入字典名称" v-decorator="[ 'dictName', validatorRules.dictName]"/>
         </a-form-item>
 
         <a-form-item
@@ -39,56 +39,75 @@
 
 <script>
   import pick from 'lodash.pick'
-  import {addDict,editDict} from '@/api/api'
+  import {addDict, editDict, duplicateCheck} from '@/api/api'
 
   export default {
     name: "DictModal",
-    data () {
+    data() {
       return {
-        value:1,
-        title:"操作",
+        value: 1,
+        title: "操作",
         visible: false,
         model: {},
         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},
         },
         confirmLoading: false,
         form: this.$form.createForm(this),
-        validatorRules:{
-          dictName:{rules: [{ required: true, message: '请输入字典名称!' }]},
-          dictCode:{rules: [{ required: true, message: '请输入字典编码!' }]},
+        validatorRules: {
+          dictName: {rules: [{required: true, message: '请输入字典名称!'}]},
+          dictCode: {
+            rules: [{required: true, message: '请输入字典编码!'},
+                     {validator: this.validateDictCode,}]
+          },
         },
       }
     },
-    created () {
+    created() {
     },
     methods: {
+      validateDictCode(rule, value, callback) {
+        // 重复校验
+        var params = {
+          tableName: "sys_dict",
+          fieldName: "dict_code",
+          fieldVal: value,
+          dataId: this.model.id,
+        };
+        duplicateCheck(params).then((res) => {
+          if (res.success) {
+            callback();
+          } else {
+            callback(res.message);
+          }
+        });
+      },
       handleChange(value) {
         this.model.status = value;
       },
-      add () {
+      add() {
         this.edit({});
       },
-      edit (record) {
-        if(record.id){
+      edit(record) {
+        if (record.id) {
           this.visiblekey = true;
-        }else{
+        } else {
           this.visiblekey = false;
         }
         this.form.resetFields();
         this.model = Object.assign({}, record);
         this.visible = true;
         this.$nextTick(() => {
-          this.form.setFieldsValue(pick(this.model,'dictName','dictCode','description'))
+          this.form.setFieldsValue(pick(this.model, 'dictName', 'dictCode', 'description'))
         });
       },
       // 确定
-      handleOk () {
+      handleOk() {
         const that = this;
         // 触发表单验证
         this.form.validateFields((err, values) => {
@@ -97,17 +116,17 @@
             let formData = Object.assign(this.model, values);
             let obj;
             console.log(formData)
-            if(!this.model.id){
+            if (!this.model.id) {
               formData.delFlag = "1";
-              obj=addDict(formData);
-            }else{
-              obj=editDict(formData);
+              obj = addDict(formData);
+            } else {
+              obj = editDict(formData);
             }
-            obj.then((res)=>{
-              if(res.success){
+            obj.then((res) => {
+              if (res.success) {
                 that.$message.success(res.message);
                 that.$emit('ok');
-              }else{
+              } else {
                 that.$message.warning(res.message);
               }
             }).finally(() => {
@@ -118,10 +137,10 @@
         })
       },
       // 关闭
-      handleCancel () {
+      handleCancel() {
         this.close();
       },
-      close () {
+      close() {
         this.$emit('close');
         this.visible = false;
       },

ant-design-jeecg-vue/src/views/system/modules/PermissionDataRuleModal.vue

@@ -0,0 +1,162 @@
+<template>
+  <a-modal
+    :title="title"
+    :width="1000"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    @ok="handleOk"
+    @cancel="handleCancel"
+    cancelText="关闭">
+
+    <a-spin :spinning="confirmLoading">
+      <a-form :form="form">
+
+        <a-form-item
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+          label="规则名称">
+          <a-input placeholder="请输入规则名称" v-decorator="['ruleName', validatorRules.ruleName]"/>
+        </a-form-item>
+        <a-form-item
+          v-show="showRuleColumn"
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+          label="规则字段">
+          <a-input placeholder="请输入规则字段" v-decorator="['ruleColumn', validatorRules.ruleColumn]"/>
+        </a-form-item>
+        <a-form-item
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+          label="条件规则">
+          <j-dict-select-tag @change="handleChangeRuleCondition" v-decorator="['ruleConditions', validatorRules.ruleConditions]" placeholder="请输入条件规则" :triggerChange="true" dictCode="rule_conditions"/>
+        </a-form-item>
+        <a-form-item
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+          label="规则值">
+          <a-input placeholder="请输入规则值" v-decorator="['ruleValue', validatorRules.ruleValue]"/>
+        </a-form-item>
+      </a-form>
+    </a-spin>
+  </a-modal>
+</template>
+<script>
+  import {httpAction, getAction} from '@/api/manage'
+  import pick from 'lodash.pick'
+
+  export default {
+    name: 'PermissionDataRuleModal',
+    data() {
+      return {
+        queryParam: {},
+        title: '操作',
+        visible: false,
+        model: {},
+        ruleConditionList: [],
+        labelCol: {
+          xs: {span: 24},
+          sm: {span: 5}
+        },
+        wrapperCol: {
+          xs: {span: 24},
+          sm: {span: 16}
+        },
+        confirmLoading: false,
+        form: this.$form.createForm(this),
+        permissionId: '',
+        validatorRules: {
+          ruleConditions: {rules: [{required: true, message: '请选择条件!'}]},
+          ruleName: {rules: [{required: true, message: '请输入规则名称!'}]},
+          ruleValue: {rules: [{required: true, message: '请输入规则值!'}]},
+          ruleColumn: {rules: []}
+        },
+        url: {
+          list: '/sys/dictItem/list',
+          add: '/sys/permission/addPermissionRule',
+          edit: '/sys/permission/editPermissionRule'
+        },
+        showRuleColumn:true
+      }
+    },
+    created() {
+    },
+    methods: {
+      add(permId) {
+        this.permissionId = permId
+        this.edit({})
+      },
+      edit(record) {
+        this.form.resetFields()
+        this.model = Object.assign({}, record)
+        if (record.permissionId) {
+          this.model.permissionId = record.permissionId
+        } else {
+          this.model.permissionId = this.permissionId
+        }
+        this.visible = true
+        this.initRuleCondition()
+        this.$nextTick(() => {
+          this.form.setFieldsValue(pick(this.model, 'ruleName', 'ruleColumn', 'ruleConditions', 'ruleValue'))
+        })
+      },
+      close() {
+        this.$emit('close')
+        this.visible = false
+      },
+      handleOk() {
+        const that = this
+        // 触发表单验证
+        this.form.validateFields((err, values) => {
+          if (!err) {
+            that.confirmLoading = true
+            let httpurl = ''
+            let method = ''
+            if (!this.model.id) {
+              httpurl += this.url.add
+              method = 'post'
+            } else {
+              httpurl += this.url.edit
+              method = 'put'
+            }
+            let formData = Object.assign(this.model, values)
+            httpAction(httpurl, formData, method).then((res) => {
+              if (res.success) {
+                that.$message.success(res.message)
+                that.$emit('ok')
+              } else {
+                that.$message.warning(res.message)
+              }
+            }).finally(() => {
+              that.confirmLoading = false
+              that.close()
+            })
+          }
+        })
+      },
+      handleCancel() {
+        this.close()
+      },
+      initRuleCondition(){
+        if(this.model.ruleConditions && this.model.ruleConditions=='USE_SQL_RULES'){
+          this.showRuleColumn = false
+        }else{
+          this.showRuleColumn = true
+        }
+      },
+      handleChangeRuleCondition(val){
+        if(val=='USE_SQL_RULES'){
+          this.form.setFieldsValue({
+            ruleColumn:''
+          })
+          this.showRuleColumn = false
+        }else{
+          this.showRuleColumn = true
+        }
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

ant-design-jeecg-vue/src/views/system/modules/PermissionModal.vue

@@ -1,23 +1,21 @@
 <template>
-  <a-modal
+  <a-drawer
     :title="title"
-    :width="900"
+    :width="drawerWidth"
+    @close="handleCancel"
     :visible="visible"
     :confirmLoading="confirmLoading"
-    @ok="handleOk"
-    @cancel="handleCancel"
-    :okButtonProps="{ props: {disabled: disableSubmit} }"
-    cancelText="关闭"
-    wrapClassName="ant-modal-cust-warp"
-    style="top:5%;height: 95%;">
+    :wrapStyle="{height: 'calc(100% - 108px)',overflow: 'auto',paddingBottom: '108px'}"
+  >
+    <div :style="{width: '100%',border: '1px solid #e9e9e9',padding: '10px 16px',background: '#fff',}">
     <a-spin :spinning="confirmLoading">
       <a-form :form="form">
 
         <a-form-item label="菜单类型" :labelCol="labelCol" :wrapperCol="wrapperCol" >
-          <a-radio-group @change="onChangeMenuType" v-decorator="['menuType',{'initialValue':1}]">
+          <a-radio-group @change="onChangeMenuType" v-decorator="['menuType',{'initialValue':0}]">
             <a-radio :value="0">一级菜单</a-radio>
             <a-radio :value="1">子菜单</a-radio>
-            <a-radio :value="2">按钮</a-radio>
+            <a-radio :value="2">按钮/数据权限</a-radio>
           </a-radio-group>
         </a-form-item>
 
@@ -94,6 +92,14 @@
           <a-input-number placeholder="请输入菜单排序" style="width: 200px" v-decorator="[ 'sortNo', {'initialValue':1.0,'rule':validatorRules.sortNo}]" :readOnly="disableSubmit"/>
         </a-form-item>
 
+        <a-form-item
+          v-show="show"
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+          label="是否路由菜单">
+          <a-switch checkedChildren="是" unCheckedChildren="否" v-model="routeSwitch"/>
+        </a-form-item>
+
         <a-form-item
           v-show="show"
           :labelCol="labelCol"
@@ -116,7 +122,14 @@
       <!-- 选择图标 -->
       <icons @choose="handleIconChoose" @close="handleIconCancel" :iconChooseVisible="iconChooseVisible"></icons>
     </a-spin>
-  </a-modal>
+      <a-row :style="{textAlign:'right'}">
+        <a-button :style="{marginRight: '8px'}" @click="handleCancel">
+          关闭
+        </a-button>
+        <a-button :disabled="disableSubmit" @click="handleOk" type="primary">确定</a-button>
+      </a-row>
+    </div>
+  </a-drawer>
 </template>
 
 <script>
@@ -129,6 +142,7 @@
     components: {Icons},
     data () {
       return {
+        drawerWidth:700,
         treeData:[],
         treeValue: '0-0-4',
         title:"操作",
@@ -138,6 +152,7 @@
         localMenuType:'1',
         alwaysShow:false,//表单元素-聚合路由
         menuHidden:false,//表单元素-隐藏路由
+        routeSwitch:true, //是否路由菜单
         show:true,//根据菜单类型，动态显示隐藏表单元素
         menuLabel:'菜单名称',
         labelCol: {
@@ -181,17 +196,20 @@
         this.edit();
       },
       edit (record) {
+        this.resetScreenSize(); // 调用此方法,根据屏幕宽度自适应调整抽屉的宽度
         this.form.resetFields();
         this.model = Object.assign({}, record);
-        //菜单类型切换
+        //--------------------------------------------------------------------------------------------------
+        //根据菜单类型，动态展示页面字段
         if(record){
           console.log(record)
           this.alwaysShow = !record.alwaysShow?false:true;
           this.menuHidden = !record.hidden?false:true;
+          this.routeSwitch = record.route;
 
           //console.log('record.menuType', record.menuType);
           this.show = record.menuType==2?false:true;
-          this.menuLabel = record.menuType==2?'按钮名称':'菜单名称';
+          this.menuLabel = record.menuType==2?'按钮/权限名称':'菜单名称';
 
           if(this.model.parentId){
             this.localMenuType = 1;
@@ -199,9 +217,15 @@
             this.localMenuType = 0;
           }
         }else{
+          if(this.model.parentId){
+            this.localMenuType = 1;
+          }else{
+            this.localMenuType = 0;
+          }
           this.show = true;
           this.menuLabel = '菜单名称';
         }
+        //----------------------------------------------------------------------------------------------
 
         this.visible = true;
         this.loadTree();
@@ -223,6 +247,7 @@
             that.confirmLoading = true;
             this.model.alwaysShow = this.alwaysShow;
             this.model.hidden = this.menuHidden;
+            this.model.route = this.routeSwitch;
             let formData = Object.assign(this.model, values);
             console.log(formData);
             let obj;
@@ -260,7 +285,7 @@
         this.localMenuType=e.target.value
         if(e.target.value == 2){
           this.show = false;
-          this.menuLabel = '按钮名称';
+          this.menuLabel = '按钮/权限名称';
         }else{
           this.show = true;
           this.menuLabel = '菜单名称';
@@ -278,6 +303,15 @@
         this.form.icon = value
         this.iconChooseVisible = false
       },
+      // 根据屏幕变化,设置抽屉尺寸
+      resetScreenSize(){
+        let screenWidth = document.body.clientWidth;
+        if(screenWidth < 500){
+          this.drawerWidth = screenWidth;
+        }else{
+          this.drawerWidth = 700;
+        }
+      },
     }
   }
 </script>

ant-design-jeecg-vue/src/views/system/modules/RoleDataruleModal.vue

@@ -0,0 +1,121 @@
+<template>
+  <a-drawer
+    title="数据规则/按钮权限配置"
+    width=365
+    :closable="false"
+    @close="onClose"
+    :visible="visible"
+  >
+
+    <a-tabs defaultActiveKey="1">
+      <a-tab-pane tab="数据规则" key="1">
+
+        <a-checkbox-group v-model="dataruleChecked" v-if="dataruleList.length>0">
+          <a-row>
+            <a-col :span="24" v-for="(item,index) in dataruleList" :key=" 'dr'+index ">
+              <a-checkbox :value="item.id">{{ item.ruleName }}</a-checkbox>
+            </a-col>
+
+            <a-col :span="24">
+              <div style="width: 100%;margin-top: 15px">
+                <a-button @click="saveDataruleForRole" type="primary" size="small" icon="save">点击保存</a-button>
+              </div>
+            </a-col>
+          </a-row>
+        </a-checkbox-group>
+        <div v-else><h3>无配置信息!</h3></div>
+
+      </a-tab-pane>
+      <!--<a-tab-pane tab="按钮权限" key="2">敬请期待!!!</a-tab-pane>-->
+    </a-tabs>
+
+  </a-drawer>
+</template>
+
+<script>
+  import ARow from 'ant-design-vue/es/grid/Row'
+  import ACol from 'ant-design-vue/es/grid/Col'
+  import { getAction,postAction } from '@/api/manage'
+
+  export default {
+    name: 'RoleDataruleModal',
+    components: { ACol, ARow },
+    data(){
+      return {
+        functionId:'',
+        roleId:'',
+        visible:false,
+        tabList: [{
+          key: '1',
+          tab: '数据规则',
+        }, {
+          key: '2',
+          tab: '按钮权限',
+        }],
+        activeTabKey: '1',
+        url:{
+          datarule:"/sys/role/datarule",
+        },
+        dataruleList:[],
+        dataruleChecked:[]
+      }
+    },
+    methods:{
+      loadData(){
+        getAction(`${this.url.datarule}/${this.functionId}/${this.roleId}`).then(res=>{
+          console.log(res)
+          if(res.success){
+            this.dataruleList = res.result.datarule
+            let drChecked = res.result.drChecked
+            if(drChecked){
+              this.dataruleChecked = drChecked.split(",")
+            }
+          }
+        })
+      },
+      saveDataruleForRole(){
+        if(!this.dataruleChecked || this.dataruleChecked.length==0){
+          this.$message.warning("请现勾选数据权限然后保存!")
+          return false;
+        }
+        let params = {
+          permissionId:this.functionId,
+          roleId:this.roleId,
+          dataRuleIds:this.dataruleChecked.join(",")
+        }
+        console.log("保存数据权限",params)
+        postAction(this.url.datarule,params).then(res=>{
+          if(res.success){
+            this.$message.success(res.message)
+          }else{
+            this.$message.error(res.message)
+          }
+        })
+      },
+      show(functionId,roleId){
+        this.onReset()
+        this.functionId = functionId
+        this.roleId = roleId
+        this.visible=true
+        this.loadData()
+      },
+      onClose(){
+        this.visible=false
+        this.onReset()
+      },
+      onTabChange (key) {
+        this.activeTabKey = key
+      },
+      onReset(){
+        this.functionId=''
+        this.roleId=''
+        this.dataruleList=[]
+        this.dataruleChecked=[]
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

ant-design-jeecg-vue/src/views/system/modules/UserModal.vue

@@ -1,20 +1,19 @@
 <template>
-  <a-modal
-    :width="modalWidth"
+  <a-drawer
+    :title="title"
+    :maskClosable="true"
+    :width="drawerWidth"
+    placement="right"
+    :closable="true"
+    @close="handleCancel"
     :visible="visible"
-    :confirmLoading="confirmLoading"
-    :okButtonProps="{ props: {disabled: disableSubmit} }"
-    @ok="handleSubmit"
-    @cancel="handleCancel"
-    cancelText="关闭"
-    wrapClassName="ant-modal-cust-warp"
-    style="top:5%;height: auto;overflow-y: hidden">
+    style="height: calc(100% - 55px);overflow: auto;padding-bottom: 53px;">
 
     <template slot="title">
       <div style="width: 100%;">
         <span>{{ title }}</span>
-        <span style="display:inline-block;width:calc(100% - 56px);padding-top: 2px;padding-right:10px;text-align: right">
-          <a-button @click="togglescreen" style="height:18px;width:18px;padding: 0;border-width: 2px">&nbsp;&nbsp;</a-button>
+        <span style="display:inline-block;width:calc(100% - 51px);padding-right:10px;text-align: right">
+          <a-button @click="toggleScreen" icon="appstore" style="height:20px;width:20px;border:0px"></a-button>
         </span>
       </div>
 
@@ -23,25 +22,25 @@
     <a-spin :spinning="confirmLoading">
       <a-form :form="form">
 
-        <a-form-item label="用户账号" :labelCol="labelCol" :wrapperCol="wrapperCol" hasFeedback>
+        <a-form-item label="用户账号" :labelCol="labelCol" :wrapperCol="wrapperCol">
           <a-input placeholder="请输入用户账号" v-decorator="[ 'username', validatorRules.username]" :readOnly="!!model.id"/>
         </a-form-item>
 
         <template v-if="!model.id">
-          <a-form-item label="登陆密码" :labelCol="labelCol" :wrapperCol="wrapperCol" hasFeedback >
+          <a-form-item label="登陆密码" :labelCol="labelCol" :wrapperCol="wrapperCol" >
             <a-input type="password" placeholder="请输入登陆密码" v-decorator="[ 'password', validatorRules.password]" />
           </a-form-item>
 
-          <a-form-item label="确认密码" :labelCol="labelCol" :wrapperCol="wrapperCol" hasFeedback >
+          <a-form-item label="确认密码" :labelCol="labelCol" :wrapperCol="wrapperCol" >
             <a-input type="password" @blur="handleConfirmBlur" placeholder="请重新输入登陆密码" v-decorator="[ 'confirmpassword', validatorRules.confirmpassword]"/>
           </a-form-item>
         </template>
 
-        <a-form-item label="用户名称" :labelCol="labelCol" :wrapperCol="wrapperCol" hasFeedback >
+        <a-form-item label="用户名字" :labelCol="labelCol" :wrapperCol="wrapperCol" >
           <a-input placeholder="请输入用户名称" v-decorator="[ 'realname', validatorRules.realname]" />
         </a-form-item>
 
-        <a-form-item label="角色分配" :labelCol="labelCol" :wrapperCol="wrapperCol" hasFeedback >
+        <a-form-item label="角色分配" :labelCol="labelCol" :wrapperCol="wrapperCol" >
           <a-select
             mode="multiple"
             style="width: 100%"
@@ -50,14 +49,18 @@
             <a-select-option v-for="(role,roleindex) in roleList" :key="roleindex.toString()" :value="role.id">
               {{ role.roleName }}
             </a-select-option>
-
-
           </a-select>
-
         </a-form-item>
-
-
-
+        <!--部门分配-->
+        <a-form-item label="部门分配" :labelCol="labelCol" :wrapperCol="wrapperCol" >
+          <a-input-search
+            placeholder="点击右侧按钮选择部门"
+            v-model="checkedDepartNameString"
+            disabled
+            @search="onSearch">
+            <a-button slot="enterButton" icon="search">选择</a-button>
+          </a-input-search>
+        </a-form-item>
 
         <a-form-item label="头像" :labelCol="labelCol" :wrapperCol="wrapperCol">
           <a-upload
@@ -78,50 +81,68 @@
           </a-upload>
         </a-form-item>
 
-        <a-form-item label="生日" :labelCol="labelCol" :wrapperCol="wrapperCol" hasFeedback >
+        <a-form-item label="生日" :labelCol="labelCol" :wrapperCol="wrapperCol">
           <a-date-picker
             style="width: 100%"
             placeholder="请选择生日"
             v-decorator="['birthday', {initialValue:!model.birthday?null:moment(model.birthday,dateFormat)}]"/>
         </a-form-item>
 
-        <a-form-item label="性别" :labelCol="labelCol" :wrapperCol="wrapperCol" hasFeedback >
-          <a-select
-            v-decorator="[ 'sex', {initialValue:model.sex && model.sex.toString()}]"
-            placeholder="请选择性别">
-            <a-select-option value="1">男</a-select-option>
-            <a-select-option value="2">女</a-select-option>
+        <a-form-item label="性别" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <a-select v-decorator="[ 'sex', {}]" placeholder="请选择性别">
+            <a-select-option :value="1">男</a-select-option>
+            <a-select-option :value="2">女</a-select-option>
           </a-select>
         </a-form-item>
 
-        <a-form-item label="邮箱" :labelCol="labelCol" :wrapperCol="wrapperCol" hasFeedback >
+        <a-form-item label="邮箱" :labelCol="labelCol" :wrapperCol="wrapperCol">
           <a-input placeholder="请输入邮箱" v-decorator="[ 'email', validatorRules.email]" />
         </a-form-item>
 
-        <a-form-item label="手机号码" :labelCol="labelCol" :wrapperCol="wrapperCol" hasFeedback >
+        <a-form-item label="手机号码" :labelCol="labelCol" :wrapperCol="wrapperCol">
           <a-input placeholder="请输入手机号码" v-decorator="[ 'phone', validatorRules.phone]" />
         </a-form-item>
 
       </a-form>
     </a-spin>
-  </a-modal>
+    <depart-window ref="departWindow" @ok="modalFormOk"></depart-window>
+
+    <div class="drawer-bootom-button" v-show="!disableSubmit">
+      <a-popconfirm title="确定放弃编辑？" @confirm="handleCancel" okText="确定" cancelText="取消">
+        <a-button style="margin-right: .8rem">取消</a-button>
+      </a-popconfirm>
+      <a-button @click="handleSubmit" type="primary" :loading="confirmLoading">提交</a-button>
+    </div>
+  </a-drawer>
 </template>
 
 <script>
   import pick from 'lodash.pick'
   import moment from 'moment'
   import Vue from 'vue'
+  // 引入搜索部门弹出框的组件
+  import departWindow from './DepartWindow'
   import { ACCESS_TOKEN } from "@/store/mutation-types"
-  import {doMian,addUser,editUser,queryUserRole,queryall,checkUsername} from '@/api/api'
-
+  import { getAction, httpAction } from '@/api/manage'
+  import {addUser,editUser,queryUserRole,queryall,checkUsername } from '@/api/api'
   export default {
     name: "RoleModal",
+    components: {
+      departWindow,
+    },
     data () {
       return {
         modalWidth:800,
+        drawerWidth:700,
         modaltoggleFlag:true,
         confirmDirty: false,
+        selectedDepartKeys:[], //保存用户选择部门id
+        checkedDepartKeys:[],
+        checkedDepartNames:[], // 保存部门的名称 =>title
+        checkedDepartNameString:"", // 保存部门的名称 =>title
+        userId:"", //保存用户id
         disableSubmit:false,
+        userDepartModel:{userId:'',departIdList:[]}, // 保存SysUserDepart的用户部门中间表数据需要的对象
         dateFormat:"YYYY-MM-DD",
         validatorRules:{
           username:{
@@ -169,8 +190,11 @@
         headers:{},
         form:this.$form.createForm(this),
         url: {
-          fileUpload:doMian+"sys/common/upload",
-          imgerver:doMian+"sys/common/view",
+          addUDepartIds:"/sys/user/addUDepartIds", // 引入为用户添加部门信息需要的url
+          editUDepartIds:"/sys/user/editUDepartIds", // 引入为用户更新部门信息需要的url
+          fileUpload: window._CONFIG['domianURL']+"/sys/common/upload",
+          imgerver: window._CONFIG['domianURL']+"/sys/common/view",
+          userWithDepart: "/sys/user/userDepartList", // 引入为指定用户查看部门信息需要的url
         },
       }
     },
@@ -185,8 +209,8 @@
       }
     },
     methods: {
-
-      togglescreen(){
+      //窗口最大化切换
+      toggleScreen(){
         if(this.modaltoggleFlag){
           this.modalWidth = window.innerWidth;
         }else{
@@ -212,29 +236,59 @@
           }
         });
       },
+      refresh () {
+          this.selectedDepartKeys=[]
+          this.checkedDepartKeys=[]
+          this.checkedDepartNames=[]
+         this.checkedDepartNameString = ""
+          this.userId=""
+      },
       add () {
+        this.refresh()
         this.edit({});
       },
       edit (record) {
-        this.initialRoleList();
-        this.form.resetFields();
+        this.resetScreenSize(); // 调用此方法,根据屏幕宽度自适应调整抽屉的宽度
+        let that = this;
+        that.initialRoleList();
+        that.checkedDepartNameString = "";
+        that.form.resetFields();
         if(record.hasOwnProperty("id")){
-          this.loadUserRoles(record.id);
+          that.loadUserRoles(record.id);
         }
-        this.visible = true;
-        this.model = Object.assign({}, record);
-        let filedsVal = pick(this.model,'username','password','realname','email','phone');
-        filedsVal.confirmpassword = this.model.password;
-        this.$nextTick(() => {
-          this.form.setFieldsValue(filedsVal);
+        that.userId = record.id;
+        that.visible = true;
+        that.model = Object.assign({}, record);
+        that.$nextTick(() => {
+          that.form.setFieldsValue(pick(this.model,'username','sex','realname','email','phone'))
         });
-
+        // 调用查询用户对应的部门信息的方法
+        that.checkedDepartKeys = [];
+        that.loadCheckedDeparts();
+      },
+      //
+      loadCheckedDeparts(){
+        let that = this;
+        getAction(that.url.userWithDepart,{userId:that.userId}).then((res)=>{
+          that.checkedDepartNames = [];
+          if(res.success){
+            for (let i = 0; i < res.result.length; i++) {
+              that.checkedDepartNames.push(res.result[i].title);
+              this.checkedDepartNameString = this.checkedDepartNames.join(",");
+              that.checkedDepartKeys.push(res.result[i].key);
+            }
+          }else{
+            console.log(res.message);
+          }
+        })
       },
       close () {
         this.$emit('close');
         this.visible = false;
         this.disableSubmit = false;
         this.selectedRole = [];
+        this.userDepartModel = {};
+        this.checkedDepartNames = [];
       },
       moment,
       handleSubmit () {
@@ -252,8 +306,11 @@
             let formData = Object.assign(this.model, values);
             formData.avatar = avatar;
             formData.selectedroles = this.selectedRole.length>0?this.selectedRole.join(","):'';
+
+            that.addDepartsToUser(that,formData); // 调用根据当前用户添加部门信息的方法
             let obj;
             if(!this.model.id){
+              formData.id = this.userId;
               obj=addUser(formData);
             }else{
               obj=editUser(formData);
@@ -267,6 +324,7 @@
               }
             }).finally(() => {
               that.confirmLoading = false;
+              that.checkedDepartNames = [];
               that.close();
             })
 
@@ -276,6 +334,26 @@
       handleCancel () {
         this.close()
       },
+
+      // 根据当前用户添加部门信息的方法
+      addDepartsToUser(that,formData){
+        let httpurl = '';
+        let method = '';
+        if(this.userDepartModel.userId != formData.id){
+          httpurl+=this.url.addUDepartIds;
+          method = 'post';
+        }else{
+          httpurl+=this.url.editUDepartIds;
+          method = 'put';
+        }
+        httpAction(httpurl,this.userDepartModel,method).then((res)=>{
+          if(res.success){
+            this.userDepartModel = {};
+          }else{
+            that.$message.warning(res.message);
+          }
+        })
+      },
       validateToNextPassword  (rule, value, callback) {
         const form = this.form;
         if (value && this.confirmDirty) {
@@ -350,7 +428,33 @@
       getAvatarView(){
         return this.url.imgerver +"/"+ this.model.avatar;
       },
+      // 搜索用户对应的部门API
+      onSearch(){
+        this.$refs.departWindow.add(this.checkedDepartKeys,this.userId);
+      },
 
+      // 获取用户对应部门弹出框提交给返回的数据
+      modalFormOk (formData) {
+        this.checkedDepartNames = [];
+        this.selectedDepartKeys = [];
+        this.userId = formData.userId;
+        this.userDepartModel.userId = formData.userId;
+        for (let i = 0; i < formData.departIdList.length; i++) {
+          this.selectedDepartKeys.push(formData.departIdList[i].key);
+          this.checkedDepartNames.push(formData.departIdList[i].title);
+          this.checkedDepartNameString = this.checkedDepartNames.join(",");
+        }
+        this.userDepartModel.departIdList = this.selectedDepartKeys;
+       },
+      // 根据屏幕变化,设置抽屉尺寸
+      resetScreenSize(){
+        let screenWidth = document.body.clientWidth;
+        if(screenWidth < 500){
+          this.drawerWidth = screenWidth;
+        }else{
+          this.drawerWidth = 700;
+        }
+      },
     }
   }
 </script>
@@ -375,4 +479,15 @@
     padding-bottom:10px;
   }
 
+  .drawer-bootom-button {
+    position: absolute;
+    bottom: -8px;
+    width: 100%;
+    border-top: 1px solid #e8e8e8;
+    padding: 10px 16px;
+    text-align: right;
+    left: 0;
+    background: #fff;
+    border-radius: 0 0 2px 2px;
+  }
 </style>

ant-design-jeecg-vue/src/views/system/modules/UserRoleModal.vue

@@ -9,18 +9,23 @@
     :visible="visible"
     style="height: calc(100% - 55px);overflow: auto;padding-bottom: 53px;">
 
-  <a-form>
-    <a-form-item label='所拥有的权限'>
-      <a-tree
-        checkable
-        @check="onCheck"
-        :checkedKeys="checkedKeys"
-        :treeData="treeData"
-        @expand="onExpand"
-        :expandedKeys="expandedKeysss"
-        :checkStrictly="checkStrictly"/>
-    </a-form-item>
-  </a-form>
+    <a-form>
+      <a-form-item label='所拥有的权限'>
+        <a-tree
+          checkable
+          @check="onCheck"
+          :checkedKeys="checkedKeys"
+          :treeData="treeData"
+          @expand="onExpand"
+          @select="onTreeNodeSelect"
+          :expandedKeys="expandedKeysss"
+          :checkStrictly="checkStrictly">
+          <span slot="hasDatarule" slot-scope="{slotTitle,icon}">
+            {{ slotTitle }}<a-icon v-if="icon" type="align-left" style="margin-left:5px;color: red;"></a-icon>
+          </span>
+        </a-tree>
+      </a-form-item>
+    </a-form>
 
     <div class="drawer-bootom-button">
       <a-dropdown style="float: left" :trigger="['click']" placement="topCenter">
@@ -41,13 +46,21 @@
       </a-popconfirm>
       <a-button @click="handleSubmit" type="primary" :loading="loading">提交</a-button>
     </div>
+
+    <role-datarule-modal ref="datarule"></role-datarule-modal>
+
   </a-drawer>
 
 </template>
 <script>
-  import {queryTreeList,queryRolePermission,saveRolePermission} from '@/api/api'
+  import {queryTreeListForRole,queryRolePermission,saveRolePermission} from '@/api/api'
+  import RoleDataruleModal from './RoleDataruleModal.vue'
+
   export default {
     name: "RoleModal",
+    components:{
+      RoleDataruleModal
+    },
     data(){
       return {
         roleId:"",
@@ -64,6 +77,9 @@
       }
     },
     methods: {
+      onTreeNodeSelect(id){
+        this.$refs.datarule.show(id[0],this.roleId)
+      },
       onCheck (o) {
         if(this.checkStrictly){
           this.checkedKeys = o.checked;
@@ -137,7 +153,7 @@
   watch: {
     visible () {
       if (this.visible) {
-        queryTreeList().then((res) => {
+        queryTreeListForRole().then((res) => {
           this.treeData = res.result.treeList
           this.allTreeKeys = res.result.ids
           queryRolePermission({roleId:this.roleId}).then((res)=>{
@@ -165,4 +181,5 @@
     background: #fff;
     border-radius: 0 0 2px 2px;
   }
+
 </style>