From 65a9cf87f93d69ee9f847af15cb16e02ba48f2a7 Mon Sep 17 00:00:00 2001
From: daihh <seastar@bjxask.com>
Date: Wed, 8 Mar 2023 15:49:10 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8F=97=E4=BC=97=E6=96=B0=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/data/pages.js                 |   5 +-
 src/views/manage/AudienceForm.vue | 635 ++++++++++++++++++++++++++++++
 src/views/manage/AudienceList.vue | 396 +++++++++++++++++++
 src/views/manage/AudienceView.vue | 205 ++++++++++
 4 files changed, 1240 insertions(+), 1 deletion(-)
 create mode 100644 src/views/manage/AudienceForm.vue
 create mode 100644 src/views/manage/AudienceList.vue
 create mode 100644 src/views/manage/AudienceView.vue

diff --git a/src/data/pages.js b/src/data/pages.js
index 4e3539f1..5e0e9c69 100644
--- a/src/data/pages.js
+++ b/src/data/pages.js
@@ -109,10 +109,13 @@ export const iframes=[
   {title:'考试管理', path:'/iframe/exam/tests',hidden:false,component:'exam/ExamList'},
   {title:'案例管理', path:'/iframe/cases/manages',hidden:false,component:'case/ManageList'},
   {title:'文章管理', path:'/iframe/article/manages',hidden:false,component:'article/ManageList'},
-  {title:'受众管理', path:'/iframe/ugroup/manages',hidden:false,component:'manage/UserGroupList'},
+  {title:'受众管理', path:'/iframe/ugroup/manages',hidden:false,component:'manage/AudienceList'},
+  {title:'受众编辑', path:'/iframe/ugroup/add',hidden:false,component:'manage/AudienceForm'},
+  {title:'查看受众', path:'/iframe/ugroup/view',hidden:false,component:'manage/AudienceView'},
   {title:'问答管理', path:'/iframe/qa/manages',hidden:false,component:'qa/ManageList'},
   {title:'待审核课程', path:'/iframe/course/noapproved',hidden:false,component:'examine/NotApproved'},
   {title:'已审核课程', path:'/iframe/course/reviewed',hidden:false,component:'examine/Reviewed'}
+
 ]
 
 export function routers(){
diff --git a/src/views/manage/AudienceForm.vue b/src/views/manage/AudienceForm.vue
new file mode 100644
index 00000000..b2297bd2
--- /dev/null
+++ b/src/views/manage/AudienceForm.vue
@@ -0,0 +1,635 @@
+<template>
+  <div class="addAudiences">
+    <p class="basicInformation">基本信息</p>
+    <el-form label-position="right" label-width="80px" ref="form" :model="form" :rules="rules">
+      <el-form-item label="名称:" prop="name">
+        <el-input placeholder="请填写名称" v-model="form.name" maxlength="50"></el-input>
+      </el-form-item>
+      <el-form-item label="描述:">
+        <el-input placeholder="请填写描述" type="textarea" :autosize="{ minRows: 4, maxRows: 4 }" v-model="form.description" maxlength="200"></el-input>
+      </el-form-item>
+    </el-form>
+    <p class="basicInformation">人员信息</p>
+    <div class="action">
+      <el-input style="width: 20%" clearable placeholder="请输入姓名或工号" v-model="searchValue"></el-input>
+      <el-button type="primary" class="findBtn" size="medium" @click="queryTableData">搜索</el-button>
+      <el-button type="primary" size="medium" @click="tableDataReset">重置</el-button>
+      <el-button type="primary" size="medium" @click="openDialog">添加</el-button>
+      <el-button type="primary" size="medium" @click="openImportDialog">导入</el-button>
+      <el-button type="primary" size="medium" @click="deleteTableData">批量删除</el-button>
+    </div>
+    <el-table ref="multipleTable" :data="tableDataShow" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" align="center" width="55"> </el-table-column>
+      <el-table-column label="姓名" prop="realName" align="center" ></el-table-column>
+      <el-table-column prop="userNo" label="工号"  align="center"></el-table-column>
+      <el-table-column prop="departName" label="部门" align="center"></el-table-column>
+      <!-- <el-table-column prop="position" label="岗位" align="center"></el-table-column> -->
+    </el-table>
+    <div class="publish">
+      <el-button @click="saveBack" type="primary" size="large">取消</el-button>
+      <el-button @click="saveBack(0)" type="primary" size="large">保存</el-button>
+      <el-button @click="saveBack(1)" type="primary" size="large">保存并发布</el-button>
+    </div>
+    <el-dialog title="添加人员" :visible.sync="addUserShow" :close-on-click-modal="false" width="800px" custom-class="g-dialog">
+        <el-row style="height: 400px;">
+          <el-col :span="6" style="height: 380px;display: block;overflow-y: scroll;">
+            <el-tree
+              ref="treeRef"
+              node-key="id"
+              :lazy="true"
+              :props="departProps"
+              :load="loadNode"
+              @node-click="handleDepartNodeClick"
+              :expand-on-click-node="false"
+              :default-expanded-keys="['-1']">
+            </el-tree>
+          </el-col>
+          <el-col :span="18">
+            <div class="action">
+              <el-input clearable style="width: 30%;margin-left: 10px;" v-model="userQueryForm.keyword" placeholder="请输入姓名或工号"></el-input>
+              <el-button type="primary"  size="medium" @click="queryUserData">搜索</el-button>
+              <el-button type="primary" class="findBtn"  size="medium" @click="reset">重置</el-button>
+            </div>
+            <el-table ref="groupUserTable"  :data="userData" v-loading="userDataLoading" tooltip-effect="dark"  @selection-change="userSelectionChange">
+              <el-table-column type="selection" align="center"  width="55"></el-table-column>
+              <el-table-column label="姓名" prop="realName" align="center"></el-table-column>
+              <el-table-column prop="userNo" label="工号" align="center"></el-table-column>
+              <el-table-column prop="departName" label="部门" align="center"></el-table-column>
+              <!-- <el-table-column prop="duty" label="岗位" align="center"></el-table-column> -->
+            </el-table>
+            <div style="text-align: center;margin-top: 20px;">
+              <el-pagination layout="prev, pager, next" background :total="userDataPage.total" :current-page.sync="userDataPage.pageIndex"
+                :page-size="userDataPage.pageSize" @current-change="userDataCurrentChange"></el-pagination>
+            </div>
+          </el-col>
+        </el-row>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="addUserShow= false">取 消</el-button>
+          <el-button type="primary" @click="addUserToForm">添加人员</el-button>
+        </span>
+    </el-dialog>
+    <el-dialog center custom-class="g-dialog" title="导入人员数据" :close-on-click-modal="false" :visible.sync="importUserShow">
+      <div style="padding: 10px 0px;color: #009ae7; ">注：单个导入文件受众成员请勿超过5000条记录，以员工号为准。必须是本系统人员</div>
+      <el-row type="flex" align="middle" justify="start" style="margin-bottom: 10px;">
+        文件名称：<el-input style="width: 200px;" disabled v-model="selectFile"></el-input>
+        <!-- <el-upload
+          class="upload-demo"
+          ref="upload"
+          action="/systemapi/xboe/usergroup/import"
+          :headers="{'XBOE-Access-Token':token}"
+          accept=".xlsx"
+          name="file"
+          :on-change="selectFileFun"
+          :limit="1"
+          :on-exceed="uploadExceed"
+          :on-success="uploadSuccess"
+          :file-list="fileList"
+          :show-file-list="false"
+          :auto-upload="false"
+          > -->
+          <el-upload
+            class="upload-demo"
+            ref="upload"
+            :action="importUrl"
+            :headers="{'token':token}"
+            accept=".xlsx"
+            name="userExcel"
+            :on-change="selectFileFun"
+            :limit="1"
+            :on-exceed="uploadExceed"
+            :on-success="uploadSuccess"
+            :file-list="fileList"
+            :show-file-list="false"
+            :auto-upload="false"
+            >
+          <el-button slot="trigger" style="margin-left: 10px;" size="small" type="primary">选择</el-button>
+          <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">{{uploadBtnValue}}</el-button>
+        </el-upload>
+        <el-link style="margin-left:auto" @click="downloadTemplate">下载模板文件</el-link>
+      </el-row>
+      <el-row>
+         <el-table ref="userTable" :max-height="500" :min-height="200" :data="importUserData" tooltip-effect="dark" style="width: 100%;">
+            <el-table-column label="姓名" prop="realName" align="center" ></el-table-column>
+            <el-table-column prop="userNo" label="工号" align="center" ></el-table-column>
+            <el-table-column label="检查结果" align="center" >
+             <template slot-scope="scope">
+               <span v-if="scope.row.isSuccess" style="color: green;">正确</span>
+               <span v-else style="color: red;">错误</span>
+              </template>
+            </el-table-column>
+             <el-table-column label="说明" prop="exception" align="center" ></el-table-column>
+           <!-- <el-table-column prop="departName" label="部门" align="center" ></el-table-column>
+            <el-table-column prop="duty" label="岗位" align="center"></el-table-column> -->
+          </el-table>
+          <div v-if="importResultStatus == false" style="color: red;padding: 10px 0px;">{{importRepeatUsers}}</div>
+          <div v-if="importResultStatus" style="color: green;padding: 10px 0px;">{{importRepeatUsers}}</div>
+      </el-row>
+      <template #footer>
+        <el-button @click="importUserShow = false">取 消</el-button>
+        <el-button type="primary" @click="addImportUserToForm">确认</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+  import { getToken } from '@/utils/token'
+  import usergroupApi from "@/api/modules/usergroup";
+  import userApi from "@/api/system/user";
+  import orgApi from "@/api/system/organiza";
+  import apiUserBasic from "@/api/boe/userbasic";
+  import apiAudience from "@/api/boe/audience.js";
+  export default{
+    data(){
+      return{
+        token:getToken(),
+        form:{
+          id:'',
+          name: '',
+          gtype: 1,
+          description:'',
+          userGroupItems:[]
+        },
+        uploadBtnValue:'上传',
+        isUpdate:false,
+        importUrl:process.env.VUE_APP_AUDIENCE_IMPORT_URL,
+        searchValue:'',
+        tableData:[],
+        tableDataShow:[],
+        oldUserGroupItems:[],
+        rules: {
+          name: [{ required: true, message: "请输入名称", trigger: "blur" }]
+        },
+        multipleSelection:[],
+        userSelection:[],
+        addUserShow:false,
+        departData:[],
+        departProps: {
+          children: 'children',
+          label: 'name'
+        },
+        userData:[],
+        userQueryForm:{keyword:'',departId:''},
+        userDataLoading:false,
+        userDataPage:{
+          total:0,
+          pageSize:5,
+          pageIndex:1
+        },
+        importUserShow:false,
+        importUserData:[],
+        importRepeatUsers:'',
+        importResultStatus: false,  // false: 导入失败；true: 导入成功
+        selectFile:'',
+        fileList:[],
+      }
+    },
+    mounted() {
+      let that = this;
+      if (that.$route.query.id) {
+        let req = {audienceId:that.$route.query.id}
+        this.isUpdate = true;
+        apiAudience.detail(req).then((res) => {
+          if (res.status == 200) {
+            that.form = res.result;
+            that.tableData = res.result.memberList;
+            that.queryTableData();
+          }
+        });
+        // usergroupApi.detail(that.$route.query.id).then((res) => {
+        //     if (res.status == 200) {
+        //       that.form = res.result;
+        //       // that.oldUserGroupItems = JSON.parse(JSON.stringify( res.result.userGroupItems ));
+        //       that.tableData = res.result.userGroupItems;
+        //       that.queryTableData();
+        //     }
+        // });
+      }
+    },
+    methods:{
+      loadNode(node, resolve) {
+        var parentId = null;
+        if (node.level === 0) {
+          resolve([{name:'组织机构树',id:'-1'}]);
+        }else{
+          let $this=this;
+          if(node.level === 1){
+              parentId = '-1';
+              apiUserBasic.findOrgsByKeyword('').then(rs=>{
+                  let treeList=[];
+                  rs.result.forEach(item=>{
+                    let node={
+                      id:item.id,
+                      name:item.name,
+                      hrbpId:item.hrbpId,
+                      children:[]
+                    }
+                    treeList.push(node);
+                  });
+                  resolve(treeList);
+              });
+          }else{
+              parentId = node.data.id;
+
+              apiUserBasic.getOrgInfo(parentId).then(rs=>{
+                if(rs.status==200){
+                  let treeList=[];
+                  if(rs.result.directChildList){
+                      rs.result.directChildList.forEach(item=>{
+                        let node={
+                          id:item.id,
+                          name:item.name,
+                          hrbpId:item.hrbpId,
+                          children:[]
+                        }
+                        treeList.push(node);
+                      });
+                    }
+                    resolve(treeList);
+                 }else{
+                   resolve([]);
+                 }
+              });
+          }
+        }
+      },
+      handleSelectionChange(val) {
+        this.multipleSelection = val;
+      },
+      openDialog(){
+        this.addUserShow = true;
+        this.userQueryForm.keyword = '';
+        this.userQueryForm.departId = '';
+        // orgApi.treeList({}).then(res => {
+        //   if (res.status == 200) {
+        //     this.departData = res.result;
+        //   }
+        // });
+        //默认不查询
+        //this.loadUserData(this.userDataPage);
+        this.queryUserData();
+      },
+      reset() {
+        this.userQueryForm.keyword = '';
+        this.userQueryForm.departId = '';
+        this.userDataPage.pageIndex = 1;
+        this.loadUserData(this.userDataPage, this.userQueryForm);
+      },
+      userSelectionChange(val) {
+        this.userSelection = val;
+      },
+
+      //搜索员工事件
+      queryUserData(){
+        this.userDataPage.pageIndex = 1;
+        this.loadUserData(this.userDataPage, this.userQueryForm);
+      },
+      loadUserData(page, params = {}){
+        this.userDataLoading = true;
+        params.pageIndex = page.pageIndex;
+        params.pageSize = page.pageSize;
+
+        let req = {
+          page:page.pageIndex,
+          pageSize:page.pageSize,
+          keyword:this.userQueryForm.keyword,
+          departId:this.userQueryForm.departId
+        }
+        apiAudience.userList(req).then(res => {
+          if (res.status == 200) {
+            console.log("搜索用户信息");
+            console.log(res);
+            this.userData = res.result.userInfoList;
+            this.userDataPage.total = res.result.totalPage;
+            this.userDataLoading = false;
+          }
+        })
+
+        // userApi.list(Object.assign(params, this.userQueryForm)).then(res => {
+        //   if (res.status == 200) {
+        //     this.userData = res.result.list;
+        //     this.userDataPage.total = res.result.count;
+        //     this.userDataLoading = false;
+        //   }
+        // })
+      },
+      userDataCurrentChange(pageIndex){
+        this.userDataPage.pageIndex = pageIndex;
+        this.loadUserData(this.userDataPage,this.userQueryForm);
+      },
+      handleDepartNodeClick(data){
+        this.userQueryForm.departId = data.id;
+        this.loadUserData(this.userDataPage);
+      },
+      addUserToForm(){
+        if(this.userSelection.length == 0){
+          this.$message({ type: "error", message: '请先选择人员' ,offset:50});
+          return;
+        }
+        for(let i = 0; i < this.userSelection.length; i++){
+          let isAdd = true;
+          for(let j = 0; j < this.tableData.length; j++){
+            if(this.userSelection[i].id == this.tableData[j].id){
+              isAdd = false;
+              break;
+            }
+          }
+          if(isAdd){
+            let userItem = {}
+            userItem.aid = this.userSelection[i].id;
+            userItem.id = this.userSelection[i].id;
+            userItem.realName = this.userSelection[i].realName;
+            userItem.userNo = this.userSelection[i].userNo;
+            userItem.departId = this.userSelection[i].departId;
+            userItem.departName = this.userSelection[i].departName;
+            userItem.position = this.userSelection[i].duty;
+            this.tableData.push(userItem);
+            console.log(111);
+            console.log(this.tableData);
+          }
+        }
+        this.queryTableData();
+        this.addUserShow = false;
+      },
+      tableDataReset(){
+        this.searchValue = '';
+        this.queryTableData();
+        // this.tableData = JSON.parse(JSON.stringify( this.oldUserGroupItems ));
+        // this.queryTableData();
+      },
+      queryTableData(){
+        if(this.searchValue){
+          let tableDataTemp = this.tableData;
+          this.tableDataShow = this.handleTableDataShow(tableDataTemp,this.searchValue);
+        }else{
+          this.tableDataShow = this.tableData;
+        }
+      },
+      // 表格过滤
+      handleTableDataShow(tableDataTemp, searchValue) {
+        if (!tableDataTemp || tableDataTemp.length === 0) {
+            return [];
+          }
+          const array = [];
+          for (let i = 0; i < tableDataTemp.length; i += 1) {
+            let match = false;
+            if(tableDataTemp[i]['realName'] || tableDataTemp[i]['userNo']){
+              match |= (tableDataTemp[i]['realName'].includes(searchValue) || tableDataTemp[i]['userNo'].includes(searchValue));
+            }
+            if ( match ) {
+              array.push({
+                ...tableDataTemp[i]
+              });
+            }
+          }
+        return array;
+      },
+      deleteTableData(){
+        if(this.multipleSelection.length == 0){
+          this.$message({ type: "error", message: '请先选择要删除的数据' ,offset:50});
+        }
+        let $this=this;
+        //console.log(this.multipleSelection,'this.multipleSelection');
+        this.multipleSelection.forEach(item=>{
+            var delIdx=-1;
+            $this.tableData.forEach((row,rowIdx)=>{
+               if(row.id==item.id){
+                 delIdx=rowIdx;
+               }
+            });
+            if(delIdx>-1){
+              $this.tableData.splice(delIdx, 1)
+            }
+        });
+        this.multipleSelection=[];
+        this.$refs.multipleTable.clearSelection();
+        this.queryTableData();
+
+      },
+      openImportDialog(){
+        this.selectFile = '';
+        this.importUserData = [];
+        this.importRepeatUsers='';
+        this.fileList = [];
+        this.importUserShow = true;
+      },
+      downloadTemplate(){
+        let fileName = "受众人员导入模板.xlsx";
+        // usergroupApi.downloadTemplate().then(
+        // (response) => {
+        //     let blob = new Blob([response], {
+        //       type: 'application/octet-stream',
+        //     })
+        //     if (window.navigator.msSaveOrOpenBlob) {
+        //       navigator.msSaveBlob(blob, fileName)
+        //     } else {
+        //       var link = document.createElement('a')
+        //       link.href = window.URL.createObjectURL(blob)
+        //       link.download = fileName
+        //       link.click()
+        //       //释放内存
+        //       window.URL.revokeObjectURL(link.href)
+        //     }
+        // },
+        // (err) => {
+        //     this.$message({
+        //       type: 'error',
+        //       message: '文件下载失败，请重试！',offset:50
+        //     })
+        // }
+        // )
+       let link = document.createElement('a'); //创建a标签
+      link.style.display = 'none'; //使其隐藏
+      link.download = this.webBaseUrl+'/template/usergroup_template.xlsx';
+      link.setAttribute('target', '_blank');
+      link.href = this.webBaseUrl+'/template/usergroup_template.xlsx'; //赋予文件下载地址
+      link.setAttribute('download', fileName); //设置下载属性 以及文件名
+      document.body.appendChild(link); //a标签插至页面中
+      link.click(); //强制触发a标签事件
+      document.body.removeChild(link);
+
+      },
+
+
+
+
+      selectFileFun(file){
+        this.selectFile = file.name;
+      },
+      uploadExceed(files, fileList) {
+          this.$set(fileList[0], 'raw', files[0]);
+          this.$set(fileList[0], 'name', files[0].name);
+          this.$refs['upload'].clearFiles();//清除文件
+          this.$refs['upload'].handleStart(files[0]);//选择文件后的赋值方法
+      },
+      submitUpload(){
+        if(this.selectFile){this.uploadBtnValue = '上传中';}
+        this.$refs.upload.submit();
+      },
+      uploadSuccess(res){
+        console.log(111);
+        if(res.status == 200){
+          this.importUserData = res.result;
+          this.importResultStatus = true;
+          this.importRepeatUsers=res.message;
+        }else{
+          this.importResultStatus = false;
+          this.importRepeatUsers = "导入失败";
+          this.$message({ type: "error", message: res.message ,offset:50});
+        }
+        this.uploadBtnValue = '上传';
+      },
+      addImportUserToForm(){
+        if(this.importUserData.length == 0){
+          this.$message({ type: "error", message: '请先导入人员' ,offset:50});
+          return;
+        }
+        for(let i = 0; i < this.importUserData.length; i++){
+          let udata=this.importUserData[i];
+          if(!udata.isSuccess){
+             continue;
+          }
+          let isAdd = true;
+          for(let j = 0; j < this.tableData.length; j++){
+            if(udata.id == this.tableData[j].id){
+              isAdd = false;
+              break;
+            }
+          }
+          if(isAdd){
+            let userItem = {}
+            // userItem.aid = udata.id;
+            userItem.id = udata.id;
+            userItem.realName = udata.realName;
+            userItem.userNo = udata.userNo;
+            userItem.departId = udata.departId;
+            userItem.departName = udata.departName;
+            userItem.position = udata.duty;
+            this.tableData.push(userItem);
+          }
+        }
+        this.queryTableData();
+        this.importUserShow = false;
+      },
+
+      // 保存、保存并发布事件
+      saveBack(status){
+        if(status === 1 || status === 0){
+          this.form.status = status;
+        }else{
+          //this.$router.push('/manage/ugroups');
+          this.$router.push('/iframe/ugroup/manages');
+          return;
+        }
+        this.$refs.form.validate((valid) => {
+          if (valid) {
+            this.form.userGroupItems = [];
+            if(this.tableData.length > 0){
+              for(let i = 0; i < this.tableData.length; i++){
+                // this.form.userGroupItems.push({aid:this.tableData[i].aid});
+                this.form.userGroupItems.push(this.tableData[i].id);
+              }
+            }
+            if (this.form.id != null && this.form.id != "") {   // 修改受众
+              let req = {
+                audienceId:this.form.id,
+                audienceName:this.form.name,
+                description:this.form.description,
+                type:this.form.gtype,
+                status:this.form.status,
+                memberIdList:this.form.userGroupItems
+              }
+              apiAudience.update(req).then((res) => {
+                if (res.status == 200) {
+                  this.$message({ type: "success", message: "修改成功",offset:50 });
+                  //this.$router.push('/manage/ugroups');
+                  this.$router.push('/iframe/ugroup/manages');
+                }else{
+                  console.log("更新受众异常");
+                }
+              })
+
+              // usergroupApi
+              //   .update(this.form)
+              //   .then((res) => {
+              //     if (res.status == 200) {
+              //       this.$message({ type: "success", message: "修改成功",offset:50 });
+              //       this.$router.push('/manage/ugroups');
+              //     }
+              //   })
+              //   .catch((res) => {
+              //     this.$message({ type: "error", message: res.message ,offset:50});
+              //   });
+            } else {    // 新增受众
+
+              let req = {
+                audienceId:this.form.id,
+                audienceName:this.form.name,
+                description:this.form.description,
+                type:this.form.gtype,
+                status:this.form.status,
+                memberIdList:this.form.userGroupItems
+              }
+              apiAudience.update(req).then((res) => {
+                if (res.status == 200) {
+                  this.$message({ type: "success", message: "新增成功",offset:50 });
+                  //this.$router.push('/manage/ugroups');
+                  this.$router.push('/iframe/ugroup/manages');
+                }else{
+                  console.log("新增受众异常");
+                }
+              })
+
+
+              // usergroupApi
+              //   .save(this.form)
+              //   .then((res) => {
+              //     if (res.status == 200) {
+              //       this.$message({ type: "success", message: "新增成功" ,offset:50});
+              //       this.$router.push('/manage/ugroups');
+              //     }
+              //   })
+              //   .catch((res) => {
+              //     this.$message({ type: "error", message: res.message ,offset:50});
+              //   });
+            }
+          }
+        });
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+::v-deep .el-tree-node:focus>.el-tree-node__content {
+    background-color:#cddef8;
+}
+  .addAudiences{
+    .basicInformation{
+      margin: 0;
+      padding: 15px 0;
+      border-bottom: 1px solid rgb(219, 219, 219);
+    }
+    .el-form{
+      margin-top:20px;
+    }
+    .action{
+      margin: 20px 0;
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      .el-input{
+        margin-right: 10px;
+      }
+      .findBtn{
+        margin-right: auto;
+      }
+    }
+    .publish{
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 10px 0;
+    }
+  }
+</style>
diff --git a/src/views/manage/AudienceList.vue b/src/views/manage/AudienceList.vue
new file mode 100644
index 00000000..0c9eaa14
--- /dev/null
+++ b/src/views/manage/AudienceList.vue
@@ -0,0 +1,396 @@
+<template>
+  <el-container>
+    <el-header>
+      <div style="display: flex; padding:12px 12px 0 0px;">
+        <div style="display: flex;justify-content:flex-start;">
+          <div class="one_search">
+            <el-input v-model="query.name" placeholder="名称" clearable></el-input>
+          </div>
+          <div class="two_search">
+            <el-select v-model="query.status" clearable placeholder="全部" style="margin-left: 10px;">
+              <el-option label="未发布" value="0"></el-option>
+              <el-option label="已停用" value="1"></el-option>
+              <el-option label="已发布" value="2"></el-option>
+            </el-select>
+          </div>
+          <el-button type="primary" style="margin-left: 10px;" @click="queryData()" icon="el-icon-search">搜索</el-button>
+        </div>
+         <div style="margin-left: 10px;"><el-button icon="el-icon-refresh-right" type="primary"  @click="reset">重置</el-button></div>
+          <div>
+          <el-button type="primary"  style="margin-left: 10px;" @click="jumpRouter(1)" icon="el-icon-plus">添加受众</el-button>
+        </div>
+      </div>
+    </el-header>
+    <el-container style="margin-left:20px">
+      <el-main >
+        <el-table :data="tableData" border v-loading="loading" style="width: 100%">
+          <el-table-column prop="audienceName" label="名称" show-overflow-tooltip>
+            <template slot-scope="scope">
+              <span class="previewStyle" @click="viewDetail(scope.row)">{{scope.row.audienceName}}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="createAt" label="创建日期" align="center" width="160px"></el-table-column>
+          <el-table-column prop="totalMember" label="人数" width="50px" align="center"></el-table-column>
+          <el-table-column prop="status" label="状态" width="80px" align="center">
+            <template slot-scope="scope">
+              <span v-if="scope.row.status == 0">未发布</span>
+              <span v-if="scope.row.status == 1">已发布</span>
+             <!-- <span v-if="scope.row.status == 1" style="color: #da0000;">已发布</span> -->
+              <span v-if="scope.row.status == 2" style="color: #da0000;">已停用</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="type" label="类型" width="80px" align="center">
+            <template slot-scope="scope">
+              <span v-if="scope.row.type == 1">普通受众</span>
+              <span v-if="scope.row.type == 2">自动受众</span>
+            </template>
+          </el-table-column>
+          <el-table-column  label="操作" width="200px" align="center">
+            <template slot-scope="scope">
+              <el-button type="text"  @click="editRouter(1,scope.row)">修改</el-button>
+              <el-button type="text"  @click="copyDialog(scope.row)">复制</el-button>
+              <el-button type="text"  v-if="scope.row.status == 0" @click="publish(1,scope.row)">发布</el-button>
+              <el-button type="text"  v-if="scope.row.status == 1" @click="publish(2,scope.row)">停用</el-button>
+              <el-button type="text"  v-if="scope.row.status == 2" @click="publish(1,scope.row)">启用</el-button>
+              <el-button type="text"  v-if="scope.row.status == 0 || scope.row.status == 1" @click="deleteItem(scope.row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+    </el-main>
+    <el-dialog title="复制受众" :visible.sync="copyUserGroupShow" :close-on-click-modal="false" width="500px" custom-class="g-dialog">
+        <el-form ref="copyForm" :rules="copyRules" :model="copyForm" label-width="100px">
+          <el-form-item label="受众名称:" prop="name">
+            <el-input  v-model="copyForm.audienceName"  placeholder="请输入受众名称"   maxlength="50"></el-input>
+          </el-form-item>
+        </el-form>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="copyUserGroupShow= false">取 消</el-button>
+          <el-button type="primary" @click="copy">复制受众</el-button>
+        </span>
+    </el-dialog>
+  </el-container>
+   <div v-if="tableData.length > 0" style="text-align: center; margin-top:50px">
+           <!-- <el-pagination
+           @current-change="handleCurrentPushChange"
+            @size-change="handleSizePushChange"
+            background
+            :total="page.total"
+            :current-page.sync="page.pageIndex"
+             :page-size="page.pageSize"
+            :page-sizes="[10, 20, 30, 40]"
+
+
+            layout="total, prev, pager, next"
+            ></el-pagination> -->
+       <el-pagination background
+      @size-change="handleSizePushChange"
+      @current-change="handleCurrentPushChange"
+      :current-page.sync="page.pageIndex"
+      :page-sizes="[10, 20, 30, 40]"
+      :page-size="page.pageSize"
+      layout="total,sizes, prev, pager, next,jumper"
+      :total="page.total">
+    </el-pagination>
+        </div>
+
+  </el-container>
+</template>
+
+<script>
+  import usergroupApi from "@/api/modules/usergroup";
+  import apiDeleteCheck from "@/api/modules/course";
+  import apiAudience from "@/api/boe/audience.js";
+  import { mapGetters } from 'vuex';
+
+  export default {
+    data() {
+      return {
+        query:{
+          name:'',
+          status:'',
+        },
+        loading:true,
+        page:{
+          total:0,
+          pageSize:10,
+          pageIndex:1
+        },
+        // 表格数据
+        tableData: [],
+        copyUserGroupShow:false,
+        copyRules:{ audienceName: [{ required: true, message: "请输入名称", trigger: "blur" }]},
+        copyForm:{audienceName:'',audienceId:''},
+      }
+    },
+    mounted() {
+      this.loadData(this.page,this.query);
+    },
+    computed: {
+      ...mapGetters(['userInfo'])
+    },
+    methods: {
+      reset(){
+        this.page.pageIndex = 1;
+        this.query.name = ''
+        this.query.status = ''
+        this.loadData(this.page,this.query);
+      },
+
+      handleSizePushChange(val){
+      this.page.pageSize = val
+      this.page.pageIndex = 1
+      this.loadData(this.page,this.query);
+    },
+    handleCurrentPushChange(val) {
+      this.page.pageIndex = val
+      this.loadData(this.page,this.query);
+    },
+    viewDetail(row){
+      //this.$router.push({path:'/manage/viewugroup', query: {id: row.id}})
+      this.$router.push({path:'/iframe/ugroup/view', query: {id: row.id}})
+      // this.$router.push({path:'/manage/addaudiences', query: {id: row.id}})
+    },
+      jumpRouter(type){
+        if(type==1){
+          this.$router.push({path:'/iframe/ugroup/add'})
+          //this.$router.push({path:'/manage/addaudiences'})
+        }
+        if(type==2){
+          this.$router.push({path:'/manage/autoaddaudiences'})
+        }
+      },
+      editRouter(type,row){
+        if(type==1){
+          //this.$router.push({path:'/manage/addaudiences', query: {id: row.id}})
+          this.$router.push({path:'/iframe/ugroup/add', query: {id: row.id}})
+        }
+        if(type==2){
+          this.$router.push({path:'/manage/autoaddaudiences'})
+        }
+      },
+      queryData(){
+        this.page.pageIndex = 1;
+        this.loadData(this.page, this.query);
+      },
+      loadData(page, params = {}){
+
+        if(this.query.status == ''){this.query.status = null;}
+        let req = {
+          // ownerId:'965342027497607168', // 开发测试时使用
+          ownerId:this.userInfo.aid, // 正式环境使用
+          status:this.query.status,
+          audienceName:params.name,
+          page:page.pageIndex,
+          pageSize:page.pageSize
+        }
+        params.pageIndex = page.pageIndex;
+        params.pageSize = page.pageSize;
+        this.loading = true;
+        apiAudience.list(req).then(res => {
+            if (res.status == 200) {
+              this.tableData = res.result.audienceList;
+              this.page.total = res.result.totalElement;
+              this.loading = false;
+            } else {
+              this.$message({ type: "error", message: "查询失败:"+res.message,offset:50});
+            }
+        });
+
+
+        // this.loading = true;
+        // params.pageIndex = page.pageIndex;
+        // params.pageSize = page.pageSize;
+        // usergroupApi.list(Object.assign(params, this.query)).then((res) => {
+        //   if (res.status == 200) {
+        //     const result = res.result;
+        //     let ids=[];
+        //     result.list.forEach(item=>{
+        //       item.deletable=false;
+        //       ids.push(item.id);
+        //     })
+        //     this.tableData = result.list;
+        //     this.page.total = result.count;
+        //     if(ids.length>0){
+        //       this.checkAllowDelete(ids);
+        //     }
+        //     this.loading = false;
+        //   }else{
+        //     this.$message({ type: "error", message: "查询失败:"+res.message,offset:50});
+        //   }
+        // });
+      },
+
+      checkAllowDelete(ids){
+        if(ids.length==0){
+          return;
+        }
+        apiDeleteCheck.queryCrowd(ids).then(rs=>{
+           if(rs.status==200){
+              this.tableData.forEach((item=>{
+                  if(rs.result[item.id]){
+                    item.deletable=true;
+                  }
+              }))
+           }
+        })
+      },
+      currentChange(pageIndex){
+        this.page.pageSize = pageIndex
+        this.page.pageIndex = pageIndex;
+        this.loadData(this.page,this.query);
+      },
+
+      // 删除受众
+      deleteItem(row){
+        this.$confirm('您确定要删除所选受众吗？', '删除提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          let req = {audienceId:row.id}
+          apiAudience.delAudience(req).then((res) => {
+            if (res.status == 200) {
+              this.loadData(this.page,this.query);
+              this.$message({ type: "success", message: "删除受众成功",offset:50});
+            }
+          })
+        })
+      },
+
+      del(row){
+        this.$confirm('您确定要删除所选受众吗？', '删除提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          usergroupApi
+          .del(row.id)
+          .then((res) => {
+            if (res.status == 200) {
+              this.loadData(this.page,this.query);
+              this.$message({ type: "success", message: "删除受众成功",offset:50});
+            }
+          })
+          .catch((res) => {
+            this.$message({ type: "error", message: res.message,offset:50 });
+          });
+        })
+      },
+      publish(status,row){
+        let opt = "发布";
+        if(row.status == 1){opt="停用";}
+        if(row.status == 2){opt="启用";}
+        this.$confirm('您确定要'+opt+'所选受众吗？', '删除提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          let req = {
+            audienceId:row.id,
+            status:status
+          }
+          apiAudience.changeStatus(req).then((res) => {
+            if (res.status == 200) {
+              row.status=status;
+              this.$message({ type: "success", message: opt+"受众成功",offset:50});
+            }else{
+              this.$message({ type: "error", message: res.message ,offset:50});
+            }
+          }).catch((res) => {
+            this.$message({ type: "error", message: res.message ,offset:50});
+          });
+
+        })
+
+
+        // let opt = "发布";
+        // if(status === 0){
+        //   opt = "取消发布";
+        // }else if(status === 1){
+        //   opt="启用";
+        // }else if(status === 2){
+        //   opt="停用";
+        // }
+        // this.$confirm('您确定要'+opt+'所选受众吗？', '删除提示', {
+        //   confirmButtonText: '确定',
+        //   cancelButtonText: '取消',
+        //   type: 'warning'
+        // }).then(() => {
+        //   usergroupApi.publish(status,row.id).then((res) => {
+        //     if (res.status == 200) {
+        //       row.status=status;
+        //       this.$message({ type: "success", message: opt+"受众成功",offset:50});
+        //     }else{
+        //       this.$message({ type: "error", message: res.message ,offset:50});
+        //     }
+        //   }).catch((res) => {
+        //     this.$message({ type: "error", message: res.message ,offset:50});
+        //   });
+        // })
+      },
+      copyDialog(row){
+        this.copyUserGroupShow = true;
+        this.copyForm.audienceId = row.id;
+        this.copyForm.audienceName = row.name;
+      },
+      copy(){
+        if(!this.copyForm.audienceName){
+          return;
+        }
+        this.$refs.copyForm.validate((valid) => {
+          if (valid) {
+              apiAudience.copy(this.copyForm).then((res) => {
+                  if (res.status == 200) {
+                    this.$message({ type: "success", message: "复制受众成功" ,offset:50});
+                    this.loadData(this.page,this.query);
+                    this.copyUserGroupShow = false;
+                  }
+                })
+                .catch((res) => {
+                  this.$message({ type: "error", message: res.message ,offset:50});
+                });
+            }
+        });
+      },
+    },
+  }
+</script>
+
+<style>
+  .el-aside{
+    padding: 0px 2px 10px 0px;
+  }
+  .el-main{
+    padding: 0px 0px;
+  }
+  .one_search {
+    display: flex;
+  }
+
+  .big_box_person {
+    display: flex;
+  }
+
+  .box-card {
+    margin-top: 20px;
+    ;
+  }
+
+  .newdata_from {
+    margin-top: 20px;
+    margin-left: 50px;
+  }
+
+  .organization {
+    display: inline-block;
+    width: 120px;
+  }
+
+  .new_select {
+    width: 400px;
+  }
+  .content_big{
+    display: flex;
+  }
+
+</style>
diff --git a/src/views/manage/AudienceView.vue b/src/views/manage/AudienceView.vue
new file mode 100644
index 00000000..b814cbf1
--- /dev/null
+++ b/src/views/manage/AudienceView.vue
@@ -0,0 +1,205 @@
+<template>
+  <div class="addAudiences">
+    <p class="basicInformation">基本信息</p>
+    <el-form label-position="right" label-width="80px" ref="form" :model="form" :rules="rules">
+      <el-form-item label="名称:" prop="name">
+        <el-input placeholder="请填写名称" v-model="form.name" maxlength="50"></el-input>
+      </el-form-item>
+      <el-form-item label="描述:">
+        <el-input placeholder="请填写描述" type="textarea" :autosize="{ minRows: 4, maxRows: 4 }" v-model="form.description" maxlength="200"></el-input>
+      </el-form-item>
+    </el-form>
+    <p class="basicInformation">人员信息</p>
+    <div class="action">
+      <el-input style="width: 20%" placeholder="请输入姓名或工号" v-model="searchValue"></el-input>
+      <el-button type="primary" class="findBtn" size="medium" @click="queryTableData">搜索</el-button>
+      <el-button type="primary" class="findBtn" size="medium" @click="tableDataReset">重置</el-button>
+    </div>
+    <el-table ref="multipleTable" :data="tableDataShow" tooltip-effect="dark" style="width: 100%">
+
+      <el-table-column label="姓名" prop="realName" align="center" ></el-table-column>
+      <el-table-column prop="userNo" label="工号"  align="center"></el-table-column>
+      <el-table-column prop="departName" label="部门" align="center"></el-table-column>
+      <!-- <el-table-column prop="position" label="岗位" align="center"></el-table-column> -->
+    </el-table>
+    <div class="publish">
+      <el-button @click="backToList()" type="primary" size="large">关闭</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+  import { getToken } from '@/utils/token'
+  import userApi from "@/api/system/user";
+  import orgApi from "@/api/system/organiza";
+  import apiAudience from "@/api/boe/audience.js";
+  export default{
+    data(){
+      return{
+        token:getToken(),
+        form:{
+          id:'',
+          name: '',
+          gtype: 1,
+          description:'',
+          userGroupItems:[]
+        },
+        searchValue:'',
+        tableData:[],
+        tableDataShow:[],
+        oldUserGroupItems:[],
+        rules: {
+          name: [{ required: true, message: "请输入名称", trigger: "blur" }]
+        },
+        multipleSelection:[],
+        userSelection:[],
+        addUserShow:false,
+        departData:[],
+        departProps: {
+          children: 'children',
+          label: 'name'
+        },
+        userData:[],
+        userQueryForm:{keyWord:'',departId:''},
+        userDataLoading:false,
+        userDataPage:{
+          total:0,
+          pageSize:5,
+          pageIndex:1
+        },
+        importUserShow:false,
+        importUserData:[],
+        importRepeatUsers:'',
+        selectFile:'',
+        fileList:[],
+      }
+    },
+    mounted() {
+      let that = this;
+      if (this.$route.query.id) {
+        let req = {audienceId:this.$route.query.id}
+        apiAudience.detail(req).then((res) => {
+          if (res.status == 200) {
+            that.form = res.result;
+            that.tableData = res.result.memberList;
+            that.queryTableData();
+          }
+        });
+        // usergroupApi.detail(that.$route.query.id).then((res) => {
+        //     if (res.status == 200) {
+        //       that.form = res.result;
+        //       that.oldUserGroupItems = JSON.parse(JSON.stringify( res.result.userGroupItems ));
+        //       that.tableData = res.result.userGroupItems;
+        //       that.queryTableData();
+        //     }
+        // });
+      }
+    },
+    methods:{
+      handleSelectionChange(val) {
+        this.multipleSelection = val;
+      },
+      reset() {
+        this.userQueryForm.keyWord = '';
+        this.userQueryForm.departId = '';
+        this.userDataPage.pageIndex = 1;
+        this.loadUserData(this.userDataPage, this.userQueryForm);
+      },
+      userSelectionChange(val) {
+        this.userSelection = val;
+      },
+      queryUserData(){
+        this.userDataPage.pageIndex = 1;
+        this.loadUserData(this.userDataPage, this.userQueryForm);
+      },
+      loadUserData(page, params = {}){
+        this.userDataLoading = true;
+        params.pageIndex = page.pageIndex;
+        params.pageSize = page.pageSize;
+        userApi.list(Object.assign(params, this.userQueryForm)).then(res => {
+          if (res.status == 200) {
+            this.userData = res.result.list;
+            this.userDataPage.total = res.result.count;
+            this.userDataLoading = false;
+          }
+        })
+      },
+      userDataCurrentChange(pageIndex){
+        this.userDataPage.pageIndex = pageIndex;
+        this.loadUserData(this.userDataPage,this.userQueryForm);
+      },
+      handleDepartNodeClick(data){
+        this.userQueryForm.departId = data.id;
+        this.loadUserData(this.userDataPage);
+      },
+
+      tableDataReset(){
+        this.tableData = JSON.parse(JSON.stringify( this.oldUserGroupItems ));
+        this.queryTableData();
+      },
+      queryTableData(){
+        if(this.searchValue){
+          let tableDataTemp = this.tableData;
+          this.tableDataShow = this.handleTableDataShow(tableDataTemp,this.searchValue);
+        }else{
+          this.tableDataShow = this.tableData;
+        }
+      },
+      // 表格过滤
+      handleTableDataShow(tableDataTemp, searchValue) {
+        if (!tableDataTemp || tableDataTemp.length === 0) {
+            return [];
+          }
+          const array = [];
+          for (let i = 0; i < tableDataTemp.length; i += 1) {
+            let match = false;
+            if(tableDataTemp[i]['name'] || tableDataTemp[i]['userNo']){
+              match |= (tableDataTemp[i]['name'].includes(searchValue) || tableDataTemp[i]['userNo'].includes(searchValue));
+            }
+            if ( match ) {
+              array.push({
+                ...tableDataTemp[i]
+              });
+            }
+          }
+        return array;
+      },
+      backToList(){
+        //this.$router.push('/manage/ugroups');
+        this.$router.push('/iframe/ugroup/manages');
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+::v-deep .el-tree-node:focus>.el-tree-node__content {
+    background-color:#cddef8;
+}
+  .addAudiences{
+    .basicInformation{
+      margin: 0;
+      padding: 15px 0;
+      border-bottom: 1px solid rgb(219, 219, 219);
+    }
+    .el-form{
+      margin-top:20px;
+    }
+    .action{
+      margin: 20px 0;
+      display: flex;
+      .el-input{
+        margin-right: 10px;
+      }
+      .findBtn{
+        margin-right: 10px;
+      }
+    }
+    .publish{
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 10px 0;
+    }
+  }
+</style>