feat: 添加企业分组管理列表

Signed-off-by: tangshizhe <48740614+tangshizhe@users.noreply.github.com>

apps/mobile/src/api/modules/bigmember.js

@@ -1,5 +1,5 @@
-import request from '@/api'
 import qs from 'qs'
+import request from '@/api'
 
 /**
  * 获取用户信息
@@ -149,7 +149,7 @@ export function getProjectReport(data) {
     data
   })
 }
-//定制化分析数据
+// 定制化分析数据
 export function getAnalysisResult(data) {
   data = qs.stringify(data)
   return request({
@@ -158,3 +158,13 @@ export function getAnalysisResult(data) {
     data
   })
 }
+
+// 我关注的企业列表
+export function getEntFollowList(data) {
+  data = qs.stringify(data)
+  return request({
+    url: '/bigmember/follow/ent/labelGroupList',
+    method: 'post',
+    data
+  })
+}

apps/mobile/src/store/index.js

@@ -9,6 +9,7 @@ import ent from './modules/ent'
 import points from './modules/points'
 import article from './modules/article'
 import docs from './modules/docs'
+import group from './modules/group'
 
 if (import.meta.env.DEV) {
   Vue.use(Vuex)
@@ -30,8 +31,8 @@ export default new Vuex.Store({
     },
     // 对指定组件进行动态缓存 -- 组件调用该方法时，判断该组件是否存在于该缓存数组，无则添加
     keepAlive(state, component) {
-      !state.keepAliveList.includes(component) &&
-        state.keepAliveList.push(component)
+      !state.keepAliveList.includes(component)
+      && state.keepAliveList.push(component)
     },
     // 对指定组件进行动态取消缓存-- 组件调用该方法时，从缓存数组中删除对应的组件元素
     unKeepAlive(state, component) {
@@ -49,6 +50,7 @@ export default new Vuex.Store({
     ent,
     article,
     points,
-    docs
+    docs,
+    group
   }
 })

apps/mobile/src/store/modules/group.js

@@ -0,0 +1,28 @@
+import { getEntFollowList } from '@/api/modules/'
+
+export default {
+  namespaced: true,
+  state: () => ({
+    // 企业分组数据
+    entGroupList: []
+  }),
+  mutations: {
+    setEntGroupList(state, entGroupList) {
+      state.entGroupList = entGroupList
+    }
+  },
+  actions: {
+    async setEntGroupList({ commit }) {
+      const res = await getEntFollowList()
+      if (res.error_code === 0) {
+        commit('setEntGroupList', res.data?.groupUserArr || [])
+        return res || []
+      }
+    }
+  },
+  getters: {
+    getEntGroupList: (state) => {
+      return state.entGroupList
+    }
+  }
+}

apps/mobile/src/views/entgroup/detail.vue

@@ -7,43 +7,111 @@
         placeholder="请输入分组名称"
         maxlength="15"
         show-word-limit
-        error-message="分组名称已存在"
-        @input="groupNameValue = $event.trim()"
+        :error-message="errorMessageText"
+        @input="setGroupingName"
       />
     </div>
     <div class="j-footer">
       <div class="j-button-group">
-        <div class="j-button-cancel">删除</div>
-        <div class="j-button-confirm">保存</div>
+        <button class="j-button-cancel" @click="isShowDialog = true">
+          删除
+        </button>
+        <button
+          :disabled="isConfirmButtonDisabled"
+          class="j-button-confirm"
+          @click="setGroupNameEvent('put')"
+        >
+          保存
+        </button>
       </div>
     </div>
+    <DelDialog
+      title="删除分组"
+      :show-dialog="isShowDialog"
+      @cancel="isShowDialog = false"
+      @confirm="handleConfirm"
+    >
+      <div slot="content" class="del-group-content">
+        删除后，该分组内的企业将自动移至“默认分组”，是否确认删除？
+      </div>
+    </DelDialog>
   </div>
 </template>
 
 <script>
 import { Field } from 'vant'
+import { mapState } from 'vuex'
 import { getGroupList } from '@/api/modules/'
+import DelDialog from '@/components/common/Dialog.vue'
 
 export default {
   name: 'EntGroupDetail',
   components: {
-    [Field.name]: Field
+    [Field.name]: Field,
+    DelDialog
   },
   data() {
     return {
-      groupNameValue: ''
+      groupNameValue: '',
+      params: {
+        name: '',
+        id: ''
+      },
+      errorMessageText: '',
+      isConfirmButtonDisabled: true,
+      isShowDialog: false
     }
   },
+  computed: {
+    ...mapState('group', ['entGroupList'])
+  },
   created() {
-    this.getMyFollowList()
+    this.params = {
+      ...this.$route.query
+    }
+    this.groupNameValue = this.params.name || ''
   },
   methods: {
-    async getMyFollowList() {
-      const { error_code: code, data } = await getGroupList({
-        type: 'get'
+    async setGroupNameEvent(type) {
+      const { error_code: code, error_msg: msg } = await getGroupList({
+        type,
+        name: this.groupNameValue,
+        groupId: this.params.id
       })
       if (code === 0) {
-        this.groupList = data
+        if (type === 'del') {
+          this.$toast.success('删除成功')
+        } else {
+          this.$toast.success('保存成功')
+        }
+        setTimeout(() => {
+          this.$router.back()
+        }, 1000)
+      } else {
+        this.$toast.fail(msg)
+      }
+    },
+    handleConfirm() {
+      this.setGroupNameEvent('del')
+      this.isShowDialog = false
+    },
+    setGroupingName(val) {
+      console.log(this.entGroupList)
+      this.groupNameValue = val.trim().replace(/\s+/g, '')
+      this.errorMessageText = ''
+      this.isConfirmButtonDisabled = false
+
+      if (this.groupNameValue === '') {
+        this.errorMessageText = '分组名称不能为空'
+        this.isConfirmButtonDisabled = true
+      } else {
+        const exists = this.entGroupList.some(
+          (item) => item.name === this.groupNameValue
+        )
+        if (exists) {
+          this.errorMessageText = '该分组已存在'
+          this.isConfirmButtonDisabled = true
+        }
       }
     }
   }
@@ -83,4 +151,11 @@ export default {
     }
   }
 }
+::v-deep {
+  .del-group-content {
+    font-size: 14px;
+    color: #171826;
+    line-height: 20px;
+  }
+}
 </style>

apps/mobile/src/views/entgroup/index.vue

@@ -5,7 +5,7 @@
         <van-cell
           v-for="item in groupList"
           :key="item.id"
-          :title="item.s_name"
+          :title="`${item.name}（${item.count}）`"
           :is-link="item.isPut !== 0"
           @click="setGroupEvent(item)"
         />
@@ -13,17 +13,47 @@
     </div>
     <div class="j-footer">
       <div class="j-button-group">
-        <div class="j-button-confirm">
+        <div class="j-button-confirm" @click="showAddGroupingDialog = true">
           <van-icon name="plus" />
           <span style="margin-left: 8px">新增分组</span>
         </div>
       </div>
     </div>
+    <van-dialog
+      v-model="showAddGroupingDialog"
+      class="add-grouping-dialog"
+      title="新增分组"
+      :show-confirm-button="false"
+      @confirm="addGrouping"
+    >
+      <van-field
+        v-model="groupingName"
+        show-word-limit
+        maxlength="15"
+        :error-message="errorMessageText"
+        placeholder="请输入分组名称"
+        @input="setGroupingName"
+      />
+      <div class="dialog-footer">
+        <van-button type="default" @click="showAddGroupingDialog = false">
+          取消
+        </van-button>
+        <van-button
+          type="default"
+          class="confirm-button"
+          :disabled="isConfirmButtonDisabled"
+          @click="addGrouping"
+        >
+          确定
+        </van-button>
+      </div>
+    </van-dialog>
   </div>
 </template>
 
 <script>
-import { Cell, CellGroup, Icon } from 'vant'
+import { Button, Cell, CellGroup, Dialog, Field, Icon } from 'vant'
+import { mapActions } from 'vuex'
 import { getGroupList } from '@/api/modules/'
 
 export default {
@@ -31,32 +61,73 @@ export default {
   components: {
     [Cell.name]: Cell,
     [CellGroup.name]: CellGroup,
-    [Icon.name]: Icon
+    [Dialog.name]: Dialog,
+    [Button.name]: Button,
+    [Icon.name]: Icon,
+    [Field.name]: Field
   },
   data() {
     return {
-      groupList: []
+      groupList: [],
+      groupingName: '',
+      showAddGroupingDialog: false,
+      errorMessageText: '',
+      isConfirmButtonDisabled: true
     }
   },
   created() {
     this.getMyFollowList()
   },
   methods: {
+    ...mapActions('group', ['setEntGroupList']),
     async getMyFollowList() {
-      const { error_code: code, data } = await getGroupList({
-        type: 'get'
-      })
+      const { error_code: code, data } = await this.setEntGroupList()
+      console.log(data)
       if (code === 0) {
-        this.groupList = data
+        this.groupList = data?.groupUserArr || []
       }
     },
     setGroupEvent(data) {
+      if (data.name === '默认分组') return
       this.$router.push({
         path: '/entgroup/detail',
         query: {
-          id: data.id
+          id: data.id,
+          name: data.name
         }
       })
+    },
+    setGroupingName(val) {
+      this.groupingName = val.trim().replace(/\s+/g, '')
+      this.errorMessageText = ''
+      this.isConfirmButtonDisabled = false
+
+      if (this.groupingName === '') {
+        this.errorMessageText = '分组名称不能为空'
+        this.isConfirmButtonDisabled = true
+      } else {
+        const exists = this.groupList.some(
+          (item) => item.name === this.groupingName
+        )
+        if (exists) {
+          this.errorMessageText = '该分组已存在'
+          this.isConfirmButtonDisabled = true
+        }
+      }
+    },
+    async addGrouping() {
+      const { error_code: code } = await getGroupList({
+        name: this.groupingName,
+        type: 'add'
+      })
+      if (code === 0) {
+        this.$toast('新增分组成功')
+        this.groupingName = ''
+        this.showAddGroupingDialog = false
+        this.getMyFollowList()
+      } else {
+        this.$toast('新增分组失败')
+      }
     }
   }
 }
@@ -76,5 +147,51 @@ export default {
       line-height: 24px;
     }
   }
+  .add-grouping-dialog {
+    ::v-deep {
+      .van-dialog__header {
+        font-size: 18px;
+      }
+      .dialog-footer {
+        display: flex;
+        justify-content: space-between;
+        .van-button {
+          flex: 1;
+          font-size: 18px;
+          border: none;
+          border-top: 0.5px solid rgba(0, 0, 0, 0.1);
+          &.confirm-button {
+            color: #2abed1;
+            border-left: 0.5px solid rgba(0, 0, 0, 0.1);
+          }
+        }
+      }
+      .van-cell {
+        padding: 0 16px;
+        margin: 16px 0 22px 0;
+        .van-field__body {
+          padding-bottom: 11px;
+          border-bottom: 0.5px solid rgba(0, 0, 0, 0.05);
+        }
+      }
+      .van-field__control::placeholder {
+        color: #9b9ca3;
+      }
+      .van-field__word-limit {
+        position: absolute;
+        right: 0;
+        top: 0;
+        .van-field__word-num {
+          color: #2abed1;
+        }
+      }
+      .van-field__error-message {
+        margin-top: 8px;
+        font-size: 14px;
+        color: #fb483d;
+        line-height: 20px;
+      }
+    }
+  }
 }
 </style>