[update 分组管理] 页面无接口

src/api/api.js

@@ -163,6 +163,9 @@ const syncAsmsInterface = (params) => getAction('/docking/asms/api/lawsAsmsOpenA
 // ASMS接口管理-删除字典配置项
 const batchDelDictItemAsmsInterface = (params) => getAction('/docking/asms/api/lawsAsmsOpenApi/removeDictItemBatch', params)
 
+// 分组管理下拉
+const getGroupList = (params) => getAction('', params)
+
 export {
   addRole,
   editRole,
@@ -255,5 +258,7 @@ export {
   editAsmsInterface,
   getAsmsInterfaceById,
   syncAsmsInterface,
-  batchDelDictItemAsmsInterface
+  batchDelDictItemAsmsInterface,
+
+  getGroupList
 }

src/common/lang/system/en.js

@@ -93,5 +93,12 @@ module.exports = {
     standardizationEngineer: '标准化工程师',
     contactPerson: '联络人',
     contactPersonSupervisorLevelLeader: '部门联络人主管级领导'
+  },
+  // 分组管理
+  groupMange: {
+    groupName: 'Group name',
+    peopleNumber: 'Number of people',
+    groupMembers: 'Group members',
+    userName: 'User Name'
   }
 }

src/common/lang/system/zh.js

@@ -109,5 +109,12 @@ module.exports = {
     isBringIn: '是否引入',
     haveBind: '当前零部件分类结构下已有',
     isBringInRelation: '绑定标准关联关系，是否引入对应关系？'
+  },
+  // 分组管理
+  groupMange: {
+    groupName: '分组名称',
+    peopleNumber: '人数',
+    groupMembers: '组内人员',
+    userName: '用户名称'
   }
 }

src/components/selection/UserSelectModal.vue

@@ -47,6 +47,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>
@@ -88,7 +97,7 @@
 
 <script>
 import JSearchSelectTag from '../dict/JSearchSelectTag'
-import { queryall, queryDepartTreeList } from '@/api/api'
+import { getGroupList, queryall, queryDepartTreeList } from '@/api/api'
 import { getAction, postAction } from '@/api/manage'
 
 export default {
@@ -229,13 +238,15 @@ export default {
       isClickedSearch: false, // 改完搜索条件是否点击过搜索
       oldQueryParam: {}, // 上一次的搜索条件，用于从一个搜索条件改成另一个搜索条件，但是没有点搜索，这时候全选时传旧的搜索条件
       oldTotal: 0,
-      currentQueryAllData: [] // 当前查询条件下的所有数据
+      currentQueryAllData: [], // 当前查询条件下的所有数据
+      groupList: [] // 分组下拉
     }
   },
   methods: {
     open (value) {
       this.getSysCategoryTree()
       this.initRoleList()
+      this.initGroupList()
       // this.loadData()
       this.visible = true
       if (value) {
@@ -263,6 +274,16 @@ export default {
         }
       })
     },
+    // 初始化分组
+    initGroupList () {
+      getGroupList().then((res) => {
+        if (res.success) {
+          this.groupList = res.result.map((item) => {
+            return { text: item.groupName, value: item.id }
+          })
+        }
+      })
+    },
     // 全选所有
     checkedAllChange (e) {
       console.log(e.target.checked)
@@ -463,9 +484,11 @@ export default {
   position: relative;
 }
 .modal-title-check {
-  position: absolute;
+  margin-left: 25px;
-  left: 25px;
+  margin-bottom: 10px;
-  bottom: 10px;
+  //position: absolute;
+  //left: 25px;
+  //bottom: 10px;
 }
 .modal-content {
   width: 100%;

src/views/system/groupManage/GroupManageList.vue

@@ -0,0 +1,146 @@
+<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')">
+              <j-input
+                :placeholder="$t('pleaseEnter') + $t('system.groupMange.groupName')"
+                v-model="queryParam.name"></j-input>
+            </a-form-item>
+          </a-col>
+
+          <!--用户名称/工号-->
+          <a-col :md="6" :sm="12">
+            <a-form-item :label="`${$t('system.groupMange.userName')}/${$t('user.workNo')}`">
+              <j-input
+                :placeholder="$t('pleaseEnter') + `${$t('system.groupMange.userName')}/${$t('user.workNo')}`"
+                v-model="queryParam.name"></j-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="false"
+        :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>
+        </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'
+
+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: 'name',
+          scopedSlots: { customRender: 'text' }
+        },
+        {
+          title: this.$t('system.groupMange.peopleNumber'),
+          align: 'center',
+          width: 180,
+          dataIndex: 'link',
+          scopedSlots: { customRender: 'text' }
+        },
+        {
+          title: this.$t('system.groupMange.groupMembers'),
+          align: 'center',
+          width: 180,
+          dataIndex: 'user',
+          scopedSlots: { customRender: 'text' }
+        },
+        {
+          title: this.$t('operation'),
+          scopedSlots: { customRender: 'action' },
+          align: 'center',
+          width: 100
+        }
+      ],
+      url: {
+        list: ''
+      }
+    }
+  },
+  methods: {
+
+  }
+}
+</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,140 @@
+<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="['users', validatorRules.peopleNumber]"
+                          filedName="users"
+                          @nameChange="userSelectNameChange"
+                          :nameStr="model.users_dictText"
+                          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: '',
+        edit: ''
+      }
+    }
+  },
+  methods: {
+    userSelectNameChange (value, fieldName) {
+      this.model[fieldName + '_dictText'] = 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>