feat: 企微助手 - 群活码 - 列表框架&渠道分组&分组接口联调

project/src/components/groupCode/components/channelGroup.vue

@@ -0,0 +1,222 @@
+<template>
+  <div>
+    <div class="title">
+      <span class="fWeight600 c-000 f14">渠道分组</span>
+      <span
+        class="addGroupBox"
+        @click="($refs.dialogGroupRef.dialogVisible = true),($refs.dialogGroupRef.groupName = '')"
+      >
+        <i class="el-icon-plus f12"></i>
+        添加分组
+      </span>
+    </div>
+    <div class="listBox" v-loading="loading">
+      <div class="item_css" :class="[acIdx == null ? 'ac_css' : '']" @click="itemClick(null)">
+        <i class="el-icon-folder"></i>全部渠道群活码
+      </div>
+      <draggable
+        class="syllable_ul"
+        element="ul"
+        @sort="draggableSort"
+        :list="tableData"
+        :emptyInsertThreshold="0"
+        :options="{
+          group: 'name',
+          animation: 200,
+          ghostClass: 'ghostClass',
+          dragClass: 'dragClass',
+        }"
+      >
+        <div
+          v-for="(item, index) in tableData"
+          :key="item.id"
+          class="item_css"
+          @click="itemClick(item.id)"
+          :class="{'ac_css': acIdx == item.id}"
+        >
+          <i class="el-icon-folder" style="cursor: move"></i>
+          <span>{{ item.name || "-" }}</span>
+          <span class="lMarauto">
+            <el-dropdown @command="handleCommand">
+              <span class="el-dropdown-link">
+                <i class="el-icon-more" />
+              </span>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item :command="handleGetEditCommand(item)">修改名称</el-dropdown-item>
+                <el-dropdown-item :command="handleGetDeleteCommand(item)">删除分组</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </span>
+        </div>
+      </draggable>
+    </div>
+
+    <dialogGroup ref="dialogGroupRef" :propsData="{ dialogTitle, groupId }" @init="init" />
+  </div>
+</template>
+
+<script>
+import dialogGroup from "./dialogGroup.vue";
+import draggable from "vuedraggable";
+const eventOptions = {
+  'EDIT': 'edit',
+  'DELETE': 'delete'
+}
+export default {
+  components: {
+    dialogGroup,
+    draggable,
+  },
+  data() {
+    return {
+      dialogTitle: "添加",
+      acIdx: null,
+      tableData: [],
+      loading: false,
+      page: 1,
+      pages: 0,
+      total: 0,
+      page_size: 500,
+      groupId: "",
+    };
+  },
+  created() {
+    this.init()
+  },
+  methods: {
+    handleGetEditCommand({ id, name }) {
+      return `${eventOptions.EDIT}/${id}/${name}`
+    },
+    handleGetDeleteCommand({ id }) {
+      return `${eventOptions.DELETE}/${id}`
+    },
+    async init() {
+      try {
+        this.loading = true;
+        const { data: res = {} } = await this.$axios.get(this.URL.BASEURL + this.URL.channel_groupList, {
+          params: {
+            type: 2, // 1:渠道活码 2:群活码
+            page: this.page,
+            pagesize: this.page_size,
+          }
+        })
+        if (res && res.errno == 0) {
+          this.tableData = res.rst.data;
+          this.total = res.rst.pageInfo.total;
+          this.pages = res.rst.pageInfo.pages;
+        } else if (res.errno != 4002) {
+          this.$message.warning(res.err)
+        }
+      } catch (error) {
+        console.log('error => ', error)
+      } finally {
+        this.loading = false
+      }
+    },
+    handleCommand(command) {
+      const [eventName, groupId, groupName] = command.split('/')
+      if (eventName == eventOptions.EDIT) {
+        this.editGroup(groupName, groupId)
+      } else if (eventName == eventOptions.DELETE) {
+        this.deleGroup(groupId)
+      }
+    },
+    editGroup(groupName, groupId) {
+      //修改分组
+      this.$nextTick(() => {
+        this.dialogTitle = "修改";
+        this.$refs.dialogGroupRef.groupName = groupName;
+        this.groupId = groupId;
+        this.$refs.dialogGroupRef.dialogVisible = true;
+      });
+    },
+    // 删除分组
+    async deleGroup(groupId) {
+      try {
+        await this.$confirm("此操作将永久删除该分组, 是否继续?", "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        })
+        this.loading = true
+        const { data: res = {} } = await this.$axios.post(this.URL.BASEURL + this.URL.channel_deleGroup, {
+          id: groupId,
+          del_sqs: 0, //是否删除子活码
+        })
+        if (res && res.errno == 0) {
+          this.init();
+        } else if (res.errno != 4002) {
+          this.$message.warning(res.err)
+          this.loading = false
+        }
+      } catch (error) {
+        console.log('error => ', error)
+        this.loading = false
+      }
+    },
+    async draggableSort() {
+      try {
+        this.loading = true;
+        const ids = this.tableData.map(item => item.id)
+        const { data: res = {} } = await this.$axios.post(this.URL.BASEURL + this.URL.channel_sortGroup, { ids })
+        if (res && res.errno == 0) {
+          // this.init()
+        } else if (res.errno != 4002) {
+          this.$message.warning(res.err)
+        }
+      } catch (error) {
+        console.log('error => ', error)
+      } finally {
+        this.loading = false
+      }
+    },
+    itemClick(id) {
+      this.acIdx = id
+      this.$emit('changeGroupId', id)
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.ghostClass {
+  font-weight: 600;
+}
+.title {
+  padding: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  .addGroupBox {
+    color: #00b38a;
+    font-size: 13px;
+    cursor: pointer;
+  }
+}
+.listBox {
+  margin-top: 10px;
+  .item_css {
+    display: flex;
+    align-items: center;
+    padding: 15px 10px;
+    font-size: 14px;
+    cursor: pointer;
+    border-left: 2px solid transparent;
+    .el-icon-folder {
+      margin-right: 4px;
+      color: #00b38a;
+    }
+    .el-icon-more {
+      //transform:rotate(90deg);
+      font-size: 12px;
+      color: #999;
+      cursor: pointer;
+    }
+  }
+  .ac_css,
+  .item_css:hover {
+    border-left: 2px solid #00b38a;
+    background-color: rgba(0, 179, 138, 0.1);
+  }
+}
+</style>

project/src/components/groupCode/components/dialogGroup.vue

@@ -0,0 +1,107 @@
+<template>
+  <el-dialog
+    :append-to-body="true"
+    custom-class="channel_code_group"
+    :title="propsData.dialogTitle + '分组'"
+    :visible.sync="dialogVisible"
+    width="30%"
+  >
+    <div class="dialogBox" v-loading="loading">
+      <div class="lable">分组名称</div>
+      <el-input
+        size="small"
+        placeholder="请输入内容"
+        maxlength="8"
+        show-word-limit
+        v-model="groupName"
+        clearable
+      />
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
+      <el-button size="mini" type="primary" @click="save(propsData.dialogTitle)">确 定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: "dialogGroup",
+  props: ["propsData"],
+  data() {
+    return {
+      groupName: "",
+      dialogVisible: false,
+      loading: false,
+    };
+  },
+  methods: {
+    save(type) {
+      if (type == "修改") {
+        this.editGroup();
+      } else {
+        this.addGroup();
+      }
+    },
+    async addGroup() {
+      if (this.groupName == "") {
+        this.$message.warning("分组名必填")
+        return
+      }
+      try {
+        this.loading = true;
+        const { data: res = {} } = await this.$axios.post(this.URL.BASEURL + this.URL.channel_addGroup, {
+          name: this.groupName,
+          type: 2, // 1:渠道活码 2:群活码
+        })
+        if (res && res.errno == 0) {
+          this.$message.success(res.err)
+          this.dialogVisible = false;
+          this.$emit("init");
+        }
+      } catch (error) {
+        console.log('error => ', error)
+      } finally {
+        this.loading = false;
+      }
+    },
+    async editGroup() {
+      if (this.groupName == "") {
+        this.$message.warning("分组名必填")
+        return;
+      }
+      try {
+        this.loading = true;
+        const { data: res = {} } = await this.$axios.post(this.URL.BASEURL + this.URL.channel_editGroup, {
+          id: this.propsData.groupId,
+          name: this.groupName,
+        })
+        if (res && res.errno == 0) {
+          this.$message.success(res.err);
+          this.dialogVisible = false;
+          this.$emit("init");
+        }
+      } catch (error) {
+        console.log('error => ', error)
+      } finally {
+        this.loading = false
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.channel_code_group {
+  .dialogBox {
+    display: flex;
+    align-items: center;
+    .lable {
+      font-weight: 600;
+      margin-right: 10px;
+      font-size: 14px;
+      flex-shrink: 0;
+    }
+  }
+}
+</style>

project/src/components/groupCode/index.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class="con">
+    <div class="searchBox">
+      <el-button type="primary" size="mini">新建渠道群活码</el-button>
+      <selfInput :reset="reset" label_name="搜索渠道" @inputChange="onInputChangeChannel" />
+      <div class="reset" @click="resetEvent">重置</div>
+    </div>
+    <div class="mainBox">
+      <div class="groupBox">
+        <channelGroup @changeGroupId="onChangeGroupId" />
+      </div>
+      <div class="tableBox">
+        <!-- 列表 -->
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import selfInput from '@/components/assembly/screen/input.vue'
+import channelGroup from './components/channelGroup.vue'
+
+export default {
+  name: "groupCodeIndex",
+  components: {
+    selfInput,
+    channelGroup,
+  },
+  data() {
+    return {
+      reset: false, // 重置标识
+      params: {
+        group_id: '', // 分组id
+        name: '', // 搜索渠道关键字
+        page: 1,
+        page_size: 20,
+      }
+    }
+  },
+  created() {
+    this.handleGetCodeList()
+  },
+  methods: {
+    // 获取群活码列表
+    handleGetCodeList() {
+      console.log('handleGetCodeList => ',)
+      console.log('this.params => ', this.params)
+    },
+    // 搜索渠道
+    onInputChangeChannel(keyword) {
+      console.log('onInputChangeChannel => ', keyword)
+      this.params.name = keyword || ''
+      this.params.page = 1
+      this.handleGetCodeList()
+    },
+    onChangeGroupId(group_id) {
+      this.params.group_id = group_id
+      this.params.page = 1
+      this.handleGetCodeList()
+    },
+    // 重置
+    resetEvent () {
+      this.reset = !this.reset
+      this.params.name = ''
+      this.params.page = 1
+      this.handleGetCodeList()
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.con{
+  padding-right: 10px;
+  .searchBox{
+    display: flex;
+    align-items: center;
+    background-color: #fff;
+    padding: 5px 10px ;
+    position: relative;
+    .reset {
+      width: 80px;
+      height: 30px;
+      background: #00b38a;
+      border-radius: 100px 3px 3px 3px;
+      border: 1px solid #d2d2d2;
+      color: #ffffff;
+      font-size: 14px;
+      line-height: 30px;
+      text-align: center;
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      letter-spacing: 2px;
+      cursor: pointer;
+    }
+  }
+  .mainBox{
+    display: flex;
+    align-items: flex-start;
+    margin-top: 10px;
+    .groupBox{
+      width: 20%;
+      background-color: #fff;
+      flex-shrink: 0;
+      margin-right: 10px;
+      height: calc(100vh - 60px - 62px - 20px - 10px);
+      overflow-y: auto;
+      &::-webkit-scrollbar{
+        width: 3px;
+      }
+    }
+    .tableBox{
+      flex: 1;
+      background-color: #fff;
+      height: calc(100vh - 60px - 62px - 20px - 10px);
+      overflow-y: auto;
+      &::-webkit-scrollbar{
+        width: 3px;
+      }
+    }
+  }
+}
+
+</style>

project/src/router/allRouter.js

@@ -45,6 +45,9 @@ const code_dataAnalyse = () => import(/* webpackChunkName: 'dataAnalyse' */ '@/c
 const createChannelCode = () => import(/* webpackChunkName: 'createChannelCode' */ '@/components/channelCode/createChannelCode.vue')
 const radarIndex = () => import(/* webpackChunkName: 'radarIndex' */ '@/components/customOperate/sideTool/smartRadar/index.vue')
 
+const groupCodeIndex = () => import(/* webpackChunkName: 'groupCodeIndex' */ '@/components/groupCode/index.vue')
+
+
 // name与菜单配置的页面路由一致
 // meta下isData:true为数据看板,否则为助手
 export var allRouter = [
@@ -115,6 +118,16 @@ export var allRouter = [
         }
       },
       {
+        path: 'groupCodeIndex',
+        name: 'groupCodeIndex',
+        component: groupCodeIndex,
+        meta: {
+          keepAlive: false,
+          isLogin: true,
+          title: '渠道群活码'
+        }
+      },
+      {
         path: 'codeIndex',
         name: 'codeIndex',
         component: codeIndex,