[add] 分组管理

src/api/api.js

@@ -163,6 +163,9 @@ const batchDelDictItemAsmsInterface = (params) => getAction('/docking/asms/api/l
 // 待办推送记录-重新发送
 const resendMessage = (params) => postAction('/lawsUnifiedTodoLog/send', params)
 
+// 分组管理下拉
+const getGroupList = (params) => getAction('/sys/group/list', params)
+
 export {
   addRole,
   editRole,
@@ -255,5 +258,7 @@ export {
   syncAsmsInterface,
   batchDelDictItemAsmsInterface,
 
-  resendMessage
+  resendMessage,
+
+  getGroupList
 }

src/common/lang/system/zh.js

@@ -117,5 +117,12 @@ module.exports = {
     messageHandleType: '消息处理类型',
     resend: '重新发送',
     areYouSureResend: '确定重新发送吗'
+  },
+  // 分组管理
+  groupMange: {
+    groupName: '分组名称',
+    peopleNumber: '人数',
+    groupMembers: '组内人员',
+    userName: '用户名称'
   }
 }

src/components/selection/UserSelectModal.vue

@@ -48,6 +48,15 @@
                        v-model="queryParam.realname"></j-input>
             </a-form-item>
           </a-col>
+          <a-col :span="6">
+            <a-form-item :label="$t('system.groupMange.groupName')" :labelCol="labelCol" :wrapperCol="wrapperCol">
+              <j-search-select-tag
+                :placeholder="$t('pleaseSelect') + $t('system.groupMange.groupName')"
+                v-model="queryParam.groupId"
+                :dictOptions="groupList">
+              </j-search-select-tag>
+            </a-form-item>
+          </a-col>
           <span style="float: right;overflow: hidden;margin-right: 11px" class="table-page-search-submitButtons">
             <a-button style="margin-left: 8px" type="primary" icon="search" @click="searchQuery">{{$t('query')}}</a-button>
             <a-button style="margin-left: 8px" type="primary" ghost icon="reload" @click="searchReset">{{$t('reset')}}</a-button>
@@ -89,7 +98,7 @@
 
 <script>
 import JSearchSelectTag from '../dict/JSearchSelectTag'
-import { queryall, queryDepartTreeList } from '@/api/api'
+import { queryall, queryDepartTreeList, getGroupList } from '@/api/api'
 import { getAction, postAction } from '@/api/manage'
 
 export default {
@@ -244,13 +253,15 @@ export default {
       oldQueryParam: {}, // 上一次的搜索条件，用于从一个搜索条件改成另一个搜索条件，但是没有点搜索，这时候全选时传旧的搜索条件
       oldTotal: 0,
       currentQueryAllData: [], // 当前查询条件下的所有数据
-      fixDepartId: ''
+      fixDepartId: '',
+      groupList: [] // 分组下拉
     }
   },
   methods: {
     open (value) {
       this.getSysCategoryTree()
       this.initRoleList()
+      this.initGroupList()
       // this.loadData()
       this.visible = true
       if (value) {
@@ -274,6 +285,16 @@ export default {
         }
       })
     },
+    // 初始化分组
+    initGroupList () {
+      getGroupList().then((res) => {
+        if (res.success) {
+          this.groupList = res.result.map((item) => {
+            return { text: item.groupName, value: item.id }
+          })
+        }
+      })
+    },
     findNodeInTreeList (treeData, name) {
       let node = {}
       for (const item of treeData) {

src/views/system/groupManage/GroupManageList.vue

@@ -0,0 +1,150 @@
+<template>
+  <a-card :bordered="false">
+
+    <!-- 查询区域 -->
+    <div class="table-page-search-wrapper">
+      <a-form layout="inline" @keyup.enter.native="searchQuery">
+        <a-row :gutter="24">
+          <!--分组名称-->
+          <a-col :md="6" :sm="12">
+            <a-form-item :label="$t('system.groupMange.groupName')">
+              <a-input
+                :placeholder="$t('pleaseEnter') + $t('system.groupMange.groupName')"
+                v-model="queryParam.groupName"></a-input>
+            </a-form-item>
+          </a-col>
+
+          <!--用户名称/工号-->
+          <a-col :md="6" :sm="12">
+            <a-form-item :label="`${$t('system.groupMange.userName')}/${$t('user.workNo')}`">
+              <a-input
+                :placeholder="$t('pleaseEnter') + `${$t('system.groupMange.userName')}/${$t('user.workNo')}`"
+                v-model="queryParam.userNameOrWorkId"></a-input>
+            </a-form-item>
+          </a-col>
+
+          <div style="float: right;overflow: hidden;" class="table-page-search-submitButtons">
+            <a-button type="primary" @click="searchQuery" icon="search" v-has="'sys:groupManage:search'">
+              {{ $t('query') }}
+            </a-button>
+            <a-button type="primary" ghost @click="searchReset" icon="reload" style="margin-left: 8px">
+              {{ $t('reset') }}
+            </a-button>
+          </div>
+
+        </a-row>
+      </a-form>
+    </div>
+
+    <div class="table-operator" v-has="'sys:groupManage:add'">
+      <!--  新增  -->
+      <a-button icon="plus" type="primary" @click="handleAdd">{{ $t('newlyAdded') }}</a-button>
+    </div>
+
+    <!-- table区域-begin -->
+    <div>
+      <j-table
+        :can-drag="true"
+        :scroll="{x: '100%', y: yScrollHeight}"
+        ref="table"
+        rowKey="id"
+        :columns="columns"
+        :dataSource="dataSource"
+        :pagination="ipagination"
+        :loading="loading"
+        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
+        @change="handleTableChange">
+
+        <template v-slot:action="{text, record}">
+          <a @click="handleEdit(record)" v-has="'sys:groupManage:edit'">{{ $t('edit') }}</a>
+          <a-divider type="vertical" v-if="isHasPermission('sys:groupManage:edit') && isHasPermission('sys:groupManage:delete')" />
+          <a @click="handleDelete(record.id)" class="operate-del-btn" v-has="'sys:groupManage:delete'">{{ $t('delete') }}</a>
+        </template>
+
+      </j-table>
+    </div>
+    <!--新增编辑-->
+    <group-manage-modal ref="modalForm" @ok="modalFormOk"/>
+  </a-card>
+</template>
+
+<script>
+import JTable from '@/components/jero/JTable'
+import { JeroListMixin } from '@/mixins/JeroListMixin'
+import GroupManageModal from '@views/system/groupManage/modules/GroupManageModal'
+import { isHasPermission } from '@/utils/hasPermission'
+
+export default {
+  name: 'GroupManageList',
+  components: {
+    GroupManageModal,
+    JTable
+  },
+  mixins: [JeroListMixin],
+  data () {
+    return {
+      columns: [
+        {
+          title: this.$t('serialNumber'),
+          dataIndex: '',
+          key: 'rowIndex',
+          align: 'center',
+          width: 80,
+          customRender: function (t, r, index) {
+            return parseInt(index) + 1
+          }
+        },
+        {
+          title: this.$t('system.groupMange.groupName'),
+          align: 'center',
+          width: 180,
+          dataIndex: 'groupName',
+          scopedSlots: { customRender: 'text' }
+        },
+        {
+          title: this.$t('system.groupMange.peopleNumber'),
+          align: 'center',
+          width: 180,
+          dataIndex: 'count',
+          scopedSlots: { customRender: 'text' }
+        },
+        {
+          title: this.$t('system.groupMange.groupMembers'),
+          align: 'center',
+          width: 180,
+          dataIndex: 'userNames',
+          scopedSlots: { customRender: 'text' }
+        },
+        {
+          title: this.$t('operation'),
+          scopedSlots: { customRender: 'action' },
+          align: 'center',
+          width: 100
+        }
+      ],
+      url: {
+        list: '/sys/group/page',
+        delete: '/sys/group/delete'
+      }
+    }
+  },
+  methods: {
+    isHasPermission
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import '~@assets/less/common.less';
+
+/deep/ .table-page-search-wrapper .ant-form-inline .ant-form-item > .ant-form-item-label {
+  min-width: 80px;
+}
+
+.table-image {
+  img {
+    max-width: 100%;
+    max-height: 50px;
+  }
+}
+</style>

src/views/system/groupManage/modules/GroupManageModal.vue

@@ -0,0 +1,139 @@
+<template>
+  <j-modal
+    :title="title"
+    :maskClosable="true"
+    :width="500"
+    :closable="true"
+    switchFullscreen
+    @cancel="handleCancel"
+    @ok="handleOk"
+    :confirm-loading="confirmLoading"
+    :visible="visible">
+
+    <a-spin :spinning="confirmLoading">
+      <a-form :form="form">
+        <!--分组名称-->
+        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('system.groupMange.groupName')">
+          <a-input
+            v-decorator.trim="[ 'groupName', validatorRules.groupName]"
+            :maxLength="50"
+            :placeholder="$t('pleaseEnter')+$t('system.groupMange.groupName')"
+          ></a-input>
+        </a-form-item>
+        <!--组内人员-->
+        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('system.groupMange.groupMembers')">
+          <user-selection :placeholder="$t('pleaseSelect')+$t('system.groupMange.groupMembers')"
+                          v-decorator="['ids', validatorRules.peopleNumber]"
+                          @nameChange="userSelectNameChange"
+                          :nameStr="model.userNames"
+                          input-type="textarea"
+                          type="checkbox" />
+        </a-form-item>
+      </a-form>
+    </a-spin>
+
+  </j-modal>
+</template>
+
+<script>
+import { postAction } from '@/api/manage'
+import UserSelection from '@comp/selection/UserSelection'
+
+export default {
+  name: 'GroupManageModal',
+  components: { UserSelection },
+  data () {
+    return {
+      title: '',
+      visible: false,
+      confirmLoading: false,
+      form: this.$form.createForm(this),
+      model: {},
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 6 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 16 }
+      },
+      validatorRules: {
+        // 分组名称
+        groupName: {
+          rules: [
+            { required: true, message: this.$t('pleaseEnter') + this.$t('system.groupMange.groupName') }
+          ],
+          validateTrigger: 'blur'
+        },
+        // 组内人员
+        peopleNumber: {
+          rules: [
+            { required: true, message: this.$t('pleaseSelect') + this.$t('system.groupMange.peopleNumber') }
+          ],
+          validateTrigger: 'change'
+        }
+      },
+      url: {
+        add: '/sys/group/add',
+        edit: '/sys/group/edit'
+      }
+    }
+  },
+  methods: {
+    userSelectNameChange (value) {
+      this.model.userNames = value
+    },
+    add () {
+      this.edit({})
+    },
+    edit (record) {
+      this.visible = true
+      this.form.resetFields()
+      this.model = Object.assign({}, record)
+      this.$nextTick(() => {
+        this.form.setFieldsValue(this.model)
+      })
+    },
+    handleCancel () {
+      this.close()
+    },
+    handleOk () {
+      if (this.confirmLoading) return
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          this.confirmLoading = true
+          const param = Object.assign({}, this.model, values)
+          let url
+          if (this.model.id) {
+            url = this.url.edit
+          } else {
+            url = this.url.add
+          }
+          postAction(url, param).then(res => {
+            if (res.success) {
+              this.$message.success(res.message)
+              this.$emit('ok')
+              this.close()
+            } else {
+              this.$message.warning(res.message)
+            }
+          }).finally(() => {
+            // 防止连点提交
+            setTimeout(() => {
+              this.confirmLoading = false
+            }, 700)
+          })
+        }
+      })
+    },
+    close () {
+      this.visible = false
+      this.model = {}
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>