feat: 新增标签导出及列表

src/views/msgManage/export.vue

@@ -0,0 +1,158 @@
+<template>
+  <div class="export-page">
+    <h1>群发消息</h1>
+
+    <div class="export-header-container">
+      convertlab用户分组同步
+      <Button type="primary" @click="refreshed" style="margin: 0 40px">刷新分组</Button>
+      <Button type="primary" :disabled="send.userGroupId.length < 1" @click="doExport" style="margin: 0 40px">导出</Button>
+    </div>
+
+    <div class="concertlab-group-select" v-show="groupData.length">
+      <el-tree
+        ref="concertlabTree"
+        :data="groupData"
+        show-checkbox
+        :props="concertlabTreeConfig"
+        node-key="id"
+        @check-change="getSendUserGroupName"
+      >
+      </el-tree>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  created() {
+    this.refreshed()
+  },
+  methods: {
+    refreshed() {
+      this.$request('/message/getGroup').data().success((res) => {
+        if (res.status == 'success') {
+          this.groupData = res.data
+        }
+      }).get()
+    },
+    getSendUserGroupName() {
+      const tree = this.$refs.concertlabTree
+      let idArr = []
+      let nameArr = []
+      if (tree) {
+        const r = tree.getCheckedNodes()
+        // 遍历取最后一级(没children的那一级)
+        const lastLevel = r.filter(item => !item.children)
+        idArr = lastLevel.map(item => item.id)
+        nameArr = lastLevel.map(item => item.name)
+      }
+      this.send.userGroupId = idArr
+      this.send.userGroupName = nameArr
+    },
+    doExport () {
+      this.$request('/userTags/export').data({
+        group_names: this.send.userGroupName.join(','),
+        group_ids: this.send.userGroupId.join(','),
+      }).success(res => {
+        console.log(res)
+        if (res.status === 'success') {
+          this.$router.push('./exportList')
+        }
+      }).post()
+    }
+  },
+  data () {
+    return {
+      concertlabTreeConfig: {
+        label: 'name',
+        children: 'children',
+      },
+      groupData: [],
+      send: {
+        userGroupId: [],
+        userGroupName: [],
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.export-page {
+  .concertlab-group-select {
+    background: #fff;
+    padding: 16px;
+    ::v-deep {
+      .el-checkbox__input.is-checked .el-checkbox__inner,
+      .el-checkbox__input.is-indeterminate .el-checkbox__inner {
+        background-color: #2d8cf0;
+        border-color: #2d8cf0;
+      }
+    }
+  }
+  .send-msg {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    h1 {
+      width: 90%;
+      font-size:24px;
+      color:#3f4047;
+      padding: 10px 0 20px 10px;
+    }
+    .ivu-form {
+      width: 90%;
+      background: #fff;
+      padding: 20px;
+      :v-deep .ivu-form-item-label {
+        text-align: right;
+      }
+      ::v-deep .ivu-input{
+        width: 660px;
+      }
+      ::v-deep {
+        .show_text{
+          .ivu-input{
+            width: 620px;
+          }
+        }
+      }
+    }
+    .link-url {
+      display: flex;
+      margin-bottom: 15px;
+      span {
+        width: 30px;
+        margin-right: 10px;
+      }
+    }
+    .el-radio-group{
+      margin-left: 40px;
+    }
+    .show_style{
+      display: flex;
+      flex-direction: column;
+      .show_common {
+        display: flex;
+      }
+      .show_top{
+        margin-bottom: 15px;
+      }
+      .show_label{
+        white-space: nowrap;
+        margin-right: 10px;
+      }
+    }
+    .is-active {
+      pointer-events: none;
+    }
+  }
+
+  .export-header-container {
+    font-size: 16px;
+    margin: 12px 0;
+  }
+}
+
+</style>

src/views/msgManage/exportList.vue

@@ -0,0 +1,167 @@
+<template>
+  <div class="board-manage ding-dan">
+    <h1>导出记录</h1>
+      <table-lists
+          ref="tableLists"
+          v-model="list"
+          :filter="filter"
+          :filterType="2"
+          :filterReset="0"
+          requestApi="/userTags/exportList"
+          @loading="load"
+      >
+        <template slot="filterTitle">
+<!--          <div class="shai_xuan">-->
+<!--            <div class="right-msg">-->
+<!--              <Button type="primary" class="create-order" @click="addBoard({})">新建模板</Button>-->
+<!--              <Input suffix="md-search" type="text" v-model.trim="filter.search" placeholder="搜索模板名称或模板ID" clearable class="ser-ipt"/>-->
+<!--            </div>-->
+<!--          </div>-->
+<!--          <Divider style="margin:15px 0" />-->
+        </template>
+          <Table
+              ellipsis
+              :loading="loading"
+              :columns="columns"
+              :data="list.lists"
+              stripe
+          >
+            <template slot-scope="{ row }" slot="url">
+              <a :href="row.url" :download="row.id + '_' + row.group_names + '_' + fileNameList[row.id]">下载</a>
+            </template>
+          </Table>
+      </table-lists>
+  </div>
+</template>
+<script>
+export default {
+  created() {},
+  methods: {
+    load (val) {
+      this.loading = val
+    },
+    reload() {
+      this.$refs.tableLists.reload(true)
+    }
+  },
+  computed: {
+    fileNameList () {
+      const result = {}
+      this.list.lists.forEach(v => {
+        const files = v.url?.split('/') || []
+        result[v.id] = files[files.length - 1]
+      })
+      return result
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      columns: [
+          {
+              title: 'ID',
+              key: 'id',
+              align: 'center'
+          },
+          {
+              title: '群组名称',
+              key: 'group_names',
+              align: 'center',
+          },
+          {
+            title: '状态',
+            minWidth: 100,
+            key: 'status',
+            align: 'center',
+            render: (h, {row}) => {
+              switch (row.status) {
+                case 0 :
+                  return h('div', {
+                    style: {
+                      color: '#ffb822'
+                    }
+                  }, [
+                    h('span', '导出中')
+                  ])
+                case 1 :
+                  return h('div', {
+                    style: {
+                      color: '#34bfa3'
+                    }
+                  }, [
+                    h('span', '已完成')
+                  ])
+              }
+            }
+          },
+          {
+              title: '下载地址',
+              slot: 'url',
+              key: 'url',
+              align: 'center',
+          },
+          {
+              title: '创建人',
+              key: 'creator',
+              align: 'center',
+          },
+          {
+              title: '创建时间',
+              key: 'create_time',
+              align: 'center',
+          },
+          {
+              title: '更新时间',
+              key: 'update_time',
+              align: 'center',
+          },
+      ],
+      filter: {
+        search: ""
+      },
+      list: {
+        lists: []
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.board-manage {
+    h1 {
+      font-size:24px;
+      color:#3f4047;
+      padding: 10px 0 20px 10px;
+    }
+    .primary {
+      color: #34bfa3;
+    }
+    .warn {
+      color: #ffb822;
+    }
+    .fail {
+      color: #f4516c;
+    }
+    .right-msg {
+        float: right;
+        .create-order {
+            height: 36px;
+            margin-bottom: 10px;
+            margin-right: 20px;
+            background-color: rgba(52, 191, 163, 1);
+            border-color: rgba(52, 191, 163, 1);
+        }
+        .ser-ipt {
+            width: 182px;
+            margin-bottom: 10px;
+        }
+    }
+    .shai_xuan {
+        font-size: 18px;
+        span {
+            cursor: pointer;
+        }
+    }
+}
+</style>