【更新】优化一些代码，菜单功能丰富并使用s-table组件，修改s-table适配

_web/src/components/Table/README.md

@@ -11,6 +11,7 @@ Table 重封装组件说明
 
 该 `table` 由 [@Saraka](https://github.com/saraka-tsukai) 完成封装
 
+由 `小诺` 完成二次改进使用
 
 例子1
 ----

_web/src/components/Table/index.js

@@ -201,7 +201,13 @@ export default {
           } catch (e) {
             this.localPagination = false
           }
-          this.localDataSource = r.rows // 返回结果中的数组数据
+          // 返回结果中的数组数据
+          if (this.showPagination === false) {
+            // 因为按住小诺的套路，不分页的直接是在data中，我们在界面中直接就是返回了data
+            this.localDataSource = r
+          } else {
+            this.localDataSource = r.rows
+          }
           this.localLoading = false
         })
       }

_web/src/views/system/app/addForm.vue

@@ -1,7 +1,7 @@
 <template>
   <a-modal
     title="新增应用"
-    :width="900"
+    :width="500"
     :visible="visible"
     :confirmLoading="confirmLoading"
     @ok="handleSubmit"
@@ -47,7 +47,7 @@
         },
         wrapperCol: {
           xs: { span: 24 },
-          sm: { span: 15 }
+          sm: { span: 18 }
         },
         visible: false,
         confirmLoading: false,

_web/src/views/system/app/editForm.vue

@@ -1,7 +1,7 @@
 <template>
   <a-modal
     title="应用编辑"
-    :width="900"
+    :width="500"
     :visible="visible"
     :confirmLoading="confirmLoading"
     @ok="handleSubmit"
@@ -54,7 +54,7 @@
         },
         wrapperCol: {
           xs: { span: 24 },
-          sm: { span: 15 }
+          sm: { span: 18 }
         },
         visible: false,
         confirmLoading: false,

_web/src/views/system/app/index.vue

@@ -31,9 +31,8 @@
           ref="table"
           :columns="columns"
           :data="loadData"
-          :alert="true"
+          :alert="false"
           :rowKey="(record) => record.id"
-          :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onChange }"
         >
           <template slot="operator" v-if="hasPerm('sysApp:add')">
             <a-button @click="$refs.addForm.add()" icon="plus" type="primary" v-if="hasPerm('sysApp:add')">新增应用</a-button>
@@ -78,14 +77,6 @@
     data () {
       return {
         // description: '面包屑说明',
-        labelCol: {
-          xs: { span: 24 },
-          sm: { span: 5 }
-        },
-        wrapperCol: {
-          xs: { span: 24 },
-          sm: { span: 16 }
-        },
         // 查询参数
         queryParam: {},
         // 表头
@@ -117,8 +108,6 @@
           })
         },
         loading: false,
-        selectedRowKeys: [],
-        selectedRows: [],
         statusDict: [],
         activeDict: []
       }
@@ -191,10 +180,6 @@
         }).catch((err) => {
           this.$message.error('删除错误：' + err.message)
         })
-      },
-      onChange (selectedRowKeys, selectedRows) {
-        this.selectedRowKeys = selectedRowKeys
-        this.selectedRows = selectedRows
       }
     }
   }

_web/src/views/system/config/index.vue

@@ -18,7 +18,7 @@
               <a-col :md="8" :sm="24">
                 <a-form-item label="所属分类">
                   <a-select v-model="queryParam.groupCode" placeholder="请选择所属分类" allow-clear>
-                    <a-select-option v-for="(item,index) in groupCodeDictTypeDropDown" :key="index" :value="item.code" >{{ item.value }}</a-select-option>
+                    <a-select-option v-for="(item,index) in groupCodeDictTypeDropDown" :key="index" :value="item.code" >{{ item.name }}</a-select-option>
                   </a-select>
                 </a-form-item>
               </a-col>
@@ -42,9 +42,8 @@
         ref="table"
         :columns="columns"
         :data="loadData"
-        :alert="true"
+        :alert="false"
         :rowKey="(record) => record.code"
-        :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
       >
         <template slot="operator" v-if="hasPerm('sysConfig:add')">
           <a-button @click="$refs.addForm.add()" icon="plus" type="primary" v-if="hasPerm('sysConfig:add')">新增配置</a-button>
@@ -62,7 +61,7 @@
           <ellipsis :length="16" tooltip>{{ text }}</ellipsis>
         </span>
         <span slot="groupCode" slot-scope="text">
-          {{ groupCodeFilter(text) }}
+          {{ 'consts_type' | dictType(text) }}
         </span>
         <span slot="action" slot-scope="text, record">
           <a v-if="hasPerm('sysConfig:edit')" @click="$refs.editForm.edit(record)">编辑</a>
@@ -80,7 +79,6 @@
 <script>
   import { STable, Ellipsis, XCard } from '@/components'
   import { sysConfigPage, sysConfigDelete } from '@/api/modular/system/configManage'
-  import { sysDictTypeDropDown } from '@/api/modular/system/dictManage'
   import addForm from './addForm'
   import editForm from './editForm'
   export default {
@@ -131,8 +129,6 @@
             return res.data
           })
         },
-        selectedRowKeys: [],
-        selectedRows: [],
         groupCodeDictTypeDropDown: []
       }
     },
@@ -155,16 +151,7 @@
        * 获取字典数据
        */
       sysDictTypeDropDown () {
-        sysDictTypeDropDown({ code: 'consts_type' }).then((res) => {
+        this.groupCodeDictTypeDropDown = this.$options.filters['dictData']('consts_type')
-          this.groupCodeDictTypeDropDown = res.data
-        })
-      },
-      groupCodeFilter (groupCode) {
-        // eslint-disable-next-line eqeqeq
-        const values = this.groupCodeDictTypeDropDown.filter(item => item.code == groupCode)
-        if (values.length > 0) {
-          return values[0].value
-        }
       },
       sysConfigDelete (record) {
         sysConfigDelete(record).then((res) => {
@@ -183,10 +170,6 @@
       },
       handleOk () {
         this.$refs.table.refresh()
-      },
-      onSelectChange (selectedRowKeys, selectedRows) {
-        this.selectedRowKeys = selectedRowKeys
-        this.selectedRows = selectedRows
       }
     }
   }

_web/src/views/system/dict/dictdata/index.vue

@@ -20,8 +20,8 @@
                 <a-input v-model="queryParam.code" allow-clear placeholder="请输入唯一编码"/>
               </a-form-item>
             </a-col>
-            <a-col :md="!advanced && 8 || 24" :sm="24">
+            <a-col :md="8" :sm="24">
-              <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
+              <span class="table-page-search-submitButtons">
                 <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
                 <a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
               </span>
@@ -37,7 +37,6 @@
         :data="loadData"
         :alert="false"
         :rowKey="(record) => record.code"
-        :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
       >
         <template slot="operator" v-if="hasPerm('sysDictData:add')" >
           <a-button @click="$refs.addForm.add(typeId)" icon="plus" type="primary" v-if="hasPerm('sysDictData:add')">新增数据</a-button>
@@ -73,8 +72,6 @@
     },
     data () {
       return {
-        // 高级搜索 展开/关闭
-        advanced: false,
         // 查询参数
         queryParam: {},
         // 表头
@@ -111,8 +108,6 @@
             return res.data
           })
         },
-        selectedRowKeys: [],
-        selectedRows: [],
         statusDict: []
       }
     },
@@ -170,15 +165,8 @@
           this.$message.error('删除错误：' + err.message)
         })
       },
-      toggleAdvanced () {
-        this.advanced = !this.advanced
-      },
       handleOk () {
         this.$refs.table.refresh()
-      },
-      onSelectChange (selectedRowKeys, selectedRows) {
-        this.selectedRowKeys = selectedRowKeys
-        this.selectedRows = selectedRows
       }
     }
   }

_web/src/views/system/dict/index.vue

@@ -14,8 +14,8 @@
                 <a-input v-model="queryParam.code" allow-clear placeholder="请输入唯一编码"/>
               </a-form-item>
             </a-col>
-            <a-col :md="!advanced && 8 || 24" :sm="24">
+            <a-col :md="8" :sm="24">
-              <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
+              <span class="table-page-search-submitButtons">
                 <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
                 <a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
               </span>
@@ -31,7 +31,6 @@
         :data="loadData"
         :alert="false"
         :rowKey="(record) => record.code"
-        :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
       >
         <template slot="operator" v-if="hasPerm('sysDictType:add')">
           <a-button @click="$refs.addForm.add()" icon="plus" type="primary" v-if="hasPerm('sysDictType:add')">新增类型</a-button>
@@ -81,8 +80,6 @@
     },
     data () {
       return {
-        // 高级搜索 展开/关闭
-        advanced: false,
         // 查询参数
         queryParam: {},
         // 表头
@@ -121,8 +118,6 @@
             return res.data
           })
         },
-        selectedRowKeys: [],
-        selectedRows: [],
         statusDict: []
       }
     },
@@ -157,15 +152,8 @@
           this.$message.error('删除错误：' + err.message)
         })
       },
-      toggleAdvanced () {
-        this.advanced = !this.advanced
-      },
       handleOk () {
         this.$refs.table.refresh()
-      },
-      onSelectChange (selectedRowKeys, selectedRows) {
-        this.selectedRowKeys = selectedRowKeys
-        this.selectedRows = selectedRows
       }
     }
   }

_web/src/views/system/menu/index.vue

@@ -1,203 +1,177 @@
 /* eslint-disable */
 <template>
-
+  <div>
-  <a-card :bordered="false">
+    <x-card v-if="hasPerm('sysMenu:list')">
-
+      <div slot="content" class="table-page-search-wrapper">
-    <div class="table-operator" v-if="hasPerm('sysMenu:add')" >
+        <a-form layout="inline">
-      <a-button type="primary" v-if="hasPerm('sysMenu:add')" icon="plus" @click="$refs.addForm.add()">新增菜单</a-button>
+          <a-row :gutter="48">
-    </div>
+            <a-col :md="8" :sm="24">
-
+              <a-form-item label="菜单名称">
-    <!--<div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
+                <a-input v-model="queryParam.name" allow-clear placeholder="请输入菜单名称"/>
-      <i class="anticon anticon-info-circle ant-alert-icon"></i>已选择&nbsp;<a style="font-weight: 600">{{this.selectedRowKeys.length }}</a>项&nbsp;&nbsp;
+              </a-form-item>
-      <a style="margin-left: 24px" @click="clearSele()">清空</a>
+            </a-col>
-    </div>-->
+            <a-col :md="8" :sm="24">
-
+              <a-form-item label="选择应用">
-    <a-table
+                <a-select v-model="queryParam.application" placeholder="请选择选择应用" allow-clear>
-      ref="table"
+                  <a-select-option v-for="(item,index) in this.userInfo.apps" :key="index" :value="item.code" >{{ item.name }}</a-select-option>
-      size="middle"
+                </a-select>
-      :rowKey="(record) => record.id"
+              </a-form-item>
-      :pagination="false"
+            </a-col>
-      :defaultExpandAllRows="true"
+            <a-col :md="8" :sm="24">
-      :columns="columns"
+              <span class="table-page-search-submitButtons">
-      :dataSource="data"
+                <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
-      :loading="loading"
+                <a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
-      showPagination="auto"
+              </span>
-      :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
+            </a-col>
-    >
+          </a-row>
-      <!--:rowSelection="rowSelectionon"-->
+        </a-form>
-
+      </div>
-      <span slot="type" slot-scope="text">
+    </x-card>
-        {{ typeFilter(text) }}
+    <a-card :bordered="false">
-      </span>
+      <s-table
-
+        ref="table"
-      <span slot="icon" slot-scope="text">
+        :rowKey="(record) => record.id"
-        <div v-if="text != null && text != ''">
+        :columns="columns"
-          <a-icon :type="text"/>
+        :alert="false"
-        </div>
+        :data="loadData"
-      </span>
+        :showPagination="false"
-
+        :expandRowByClick="true"
-      <span slot="action" slot-scope="text, record">
+      >
-        <template>
+        <template slot="operator">
-          <a v-if="hasPerm('sysMenu:edit')" @click="$refs.editForm.edit(record)">编辑</a>
+          <a-button type="primary" v-if="hasPerm('sysMenu:add')" icon="plus" @click="$refs.addForm.add()">新增菜单</a-button>
-          <a-divider type="vertical" v-if="hasPerm('sysMenu:edit') & hasPerm('sysMenu:delete')"/>
-          <a-popconfirm v-if="hasPerm('sysMenu:delete')" placement="topRight" title="删除本菜单与下级？" @confirm="() => handleDel(record)">
-            <a>删除</a>
-          </a-popconfirm>
         </template>
-      </span>
+        <span slot="type" slot-scope="text">
-    </a-table>
+          <a-tag color="cyan" v-if="text === 0">
-
+            {{ 'menu_type' | dictType(text) }}
-    <add-form ref="addForm" @ok="handleOk"/>
+          </a-tag>
-    <edit-form ref="editForm" @ok="handleOk"/>
+          <a-tag color="blue" v-if="text === 1">
-  </a-card>
+            {{ 'menu_type' | dictType(text) }}
-
+          </a-tag>
+          <a-tag color="purple" v-if="text === 2">
+            {{ 'menu_type' | dictType(text) }}
+          </a-tag>
+        </span>
+        <span slot="icon" slot-scope="text">
+          <div v-if="text != null && text != ''">
+            <a-icon :type="text"/>
+          </div>
+        </span>
+        <span slot="action" slot-scope="text, record">
+          <template>
+            <a v-if="hasPerm('sysMenu:edit')" @click="$refs.editForm.edit(record)">编辑</a>
+            <a-divider type="vertical" v-if="hasPerm('sysMenu:edit') & hasPerm('sysMenu:delete')"/>
+            <a-popconfirm v-if="hasPerm('sysMenu:delete')" placement="topRight" title="删除本菜单与下级？" @confirm="() => handleDel(record)">
+              <a>删除</a>
+            </a-popconfirm>
+          </template>
+        </span>
+      </s-table>
+      <add-form ref="addForm" @ok="handleOk"/>
+      <edit-form ref="editForm" @ok="handleOk"/>
+    </a-card>
+  </div>
 </template>
 
 <script>
-  import { getMenuList, sysMenuDelete } from '@/api/modular/system/menuManage'
+import { STable, XCard } from '@/components'
-  import addForm from './addForm'
+import { getMenuList } from '@/api/modular/system/menuManage'
-  import editForm from './editForm'
+import addForm from './addForm'
-  import { sysDictTypeDropDown } from '@/api/modular/system/dictManage'
+import editForm from './editForm'
+import { mapGetters } from 'vuex'
 
-  export default {
+export default {
-    components: {
+  components: {
-      addForm,
+    STable,
-      editForm
+    XCard,
-    },
+    addForm,
-
+    editForm
-    data () {
+  },
-      return {
+  data () {
-        data: [],
+    return {
-        loading: true,
+      data: [],
-        columns: [
+      queryParam: {},
-          {
+      loading: true,
-            title: '菜单名称',
+      columns: [
-            dataIndex: 'name',
+        {
-            width: '20%'
+          title: '菜单名称',
-          },
+          dataIndex: 'name',
-          {
+          width: '20%'
-            title: '菜单类型',
+        },
-            dataIndex: 'type',
+        {
-            scopedSlots: { customRender: 'type' }
+          title: '菜单类型',
-          },
+          dataIndex: 'type',
-          {
+          scopedSlots: { customRender: 'type' }
-            title: '图标',
+        },
-            dataIndex: 'icon',
+        {
-            scopedSlots: { customRender: 'icon' }
+          title: '图标',
-          },
+          dataIndex: 'icon',
-          {
+          scopedSlots: { customRender: 'icon' }
-            title: '组件',
+        },
-            dataIndex: 'component',
+        {
-            width: '20%',
+          title: '组件',
-            ellipsis: true
+          dataIndex: 'component',
-          },
+          width: '20%',
-          {
+          ellipsis: true
-            title: '路由地址',
+        },
-            dataIndex: 'router',
+        {
-            key: 'router',
+          title: '路由地址',
-            ellipsis: true
+          dataIndex: 'router',
-          },
+          key: 'router',
-          {
+          ellipsis: true
-            title: '排序',
+        },
-            dataIndex: 'sort'
+        {
-          }
+          title: '排序',
-        ],
+          dataIndex: 'sort'
-        selectedRowKeys: [],
-        typeDict: []
-      }
-    },
-
-    created () {
-      this.loadData()
-      if (this.hasPerm('sysMenu:edit') || this.hasPerm('sysMenu:delete')) {
-        this.columns.push({
-          title: '操作',
-          dataIndex: 'action',
-          width: '150px',
-          scopedSlots: { customRender: 'action' }
-        })
-      }
-    },
-
-    methods: {
-      loadData () {
-        this.loading = true
-        getMenuList(this.queryParam).then((res) => {
-          if (res.success) {
-            this.data = res.data
-            this.removeEmptyChildren(this.data)
-          }
-        }).finally(() => {
-          this.loading = false
-        })
-        this.sysDictTypeDropDown()
-      },
-
-      removeEmptyChildren(data) {
-        if (data == null || data.length === 0) return
-        for (let i = 0; i < data.length; i++) {
-          const item = data[i]
-          if (item.children != null && item.children.length === 0) {
-            item.children = null
-          } else {
-            this.removeEmptyChildren(item.children)
-          }
         }
-      },
+      ],
-
+      loadData: parameter => {
-      typeFilter (type) {
+        return getMenuList(Object.assign(parameter, this.queryParam)).then((res) => {
-        // eslint-disable-next-line eqeqeq
+          this.removeEmptyChildren(res.data)
-        const values = this.typeDict.filter(item => item.code == type)
+          return res.data
-        if (values.length > 0) {
-          return values[0].value
-        }
-      },
-
-      /**
-       * 获取字典数据
-       */
-      sysDictTypeDropDown () {
-        sysDictTypeDropDown({ code: 'menu_type' }).then((res) => {
-          this.typeDict = res.data
         })
-      },
-
-      refreshSele () {
-        this.loadData()
-      },
-      handleOk () {
-        this.loadData()
-      },
-      handleDel (record) {
-        sysMenuDelete(record).then((res) => {
-           if (res.success) {
-             this.$message.success('删除成功')
-             this.loadData()
-           } else {
-             this.$message.error('删除失败：' + res.message)
-           }
-        }).catch((err) => {
-            this.$message.error('错误：' + err.message)
-        })
-      },
-
-      onSelectChange (selectedRowKeys) {
-        this.selectedRowKeys = selectedRowKeys
-      },
-      clearSele () {
-        this.selectedRowKeys = []
       }
     }
+  },
+  computed: {
+    ...mapGetters(['userInfo'])
+  },
+  created () {
+    if (this.hasPerm('sysMenu:edit') || this.hasPerm('sysMenu:delete')) {
+      this.columns.push({
+        title: '操作',
+        dataIndex: 'action',
+        width: '150px',
+        scopedSlots: { customRender: 'action' }
+      })
+    }
+  },
+  methods: {
+    /**
+     * 去掉无用的支节点
+     */
+    removeEmptyChildren(data) {
+      if (data == null || data.length === 0) return
+      for (let i = 0; i < data.length; i++) {
+        const item = data[i]
+        if (item.children != null && item.children.length === 0) {
+          item.children = null
+        } else {
+          this.removeEmptyChildren(item.children)
+        }
+      }
+    },
+    handleOk () {
+      this.$refs.table.refresh()
+    }
   }
+}
 
 </script>
 <style scoped>
-
+.table-operator {
-  .table-operator {
+  margin-bottom: 18px;
-    margin-bottom: 18px;
+}
-  }
+button {
-  button {
+  margin-right: 8px;
-    margin-right: 8px;
+}
-  }
-
 </style>

_web/src/views/system/role/addForm.vue

@@ -1,7 +1,7 @@
 <template>
   <a-modal
     title="新增角色"
-    :width="900"
+    :width="500"
     :visible="visible"
     :confirmLoading="confirmLoading"
     @ok="handleSubmit"
@@ -61,7 +61,7 @@
         },
         wrapperCol: {
           xs: { span: 24 },
-          sm: { span: 15 }
+          sm: { span: 18 }
         },
         visible: false,
         confirmLoading: false,

_web/src/views/system/role/editForm.vue

@@ -1,7 +1,7 @@
 <template>
   <a-modal
     title="角色编辑"
-    :width="900"
+    :width="500"
     :visible="visible"
     :confirmLoading="confirmLoading"
     @ok="handleSubmit"
@@ -72,7 +72,7 @@
         },
         wrapperCol: {
           xs: { span: 24 },
-          sm: { span: 15 }
+          sm: { span: 18 }
         },
         visible: false,
         confirmLoading: false,

_web/src/views/system/role/index.vue

@@ -27,9 +27,8 @@
         ref="table"
         :columns="columns"
         :data="loadData"
-        :alert="true"
+        :alert="false"
-        :rowKey="(record) => record.code"
+        :rowKey="(record) => record.id"
-        :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
       >
         <template slot="operator" v-if="hasPerm('sysRole:add')">
           <a-button @click="$refs.addForm.add()" icon="plus" type="primary" v-if="hasPerm('sysRole:add')">新增角色</a-button>
@@ -109,9 +108,7 @@
           return getRolePage(Object.assign(parameter, this.queryParam)).then((res) => {
             return res.data
           })
-        },
+        }
-        selectedRowKeys: [],
-        selectedRows: []
     }
     },
 
@@ -142,10 +139,6 @@
 
       handleOk () {
         this.$refs.table.refresh()
-      },
-      onSelectChange (selectedRowKeys, selectedRows) {
-        this.selectedRowKeys = selectedRowKeys
-        this.selectedRows = selectedRows
       }
     }
 

_web/src/views/system/role/roleOrgForm.vue

@@ -140,7 +140,6 @@
       sysRoleOwnData (record) {
         sysRoleOwnData({ id: record.id }).then((res) => {
           if (res.success) {
-            console.log(JSON.stringify(res.data))
             this.checkedKeys = res.data
           }
           this.formLoading = false
@@ -152,7 +151,6 @@
         this.autoExpandParent = false
       },
       onCheck (checkedKeys) {
-        console.log(JSON.stringify(checkedKeys))
         this.checkedKeys = checkedKeys
       },
       onSelect (selectedKeys, info) {

_web/src/views/system/sms/index.vue

@@ -44,7 +44,7 @@
         ref="table"
         :columns="columns"
         :data="loadData"
-        :alert="true"
+        :alert="false"
         :rowKey="(record) => record.id"
         :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
       >