|
|
@@ -0,0 +1,405 @@
|
|
|
+<link rel="stylesheet" href='{{Msg "seo" "cdn"}}/common-module/personDialog/personDialog.scss?v={{Msg "seo" "version"}}'>
|
|
|
+<div id="personDialog">
|
|
|
+ <div class="ent_powerPerson">
|
|
|
+ <el-dialog
|
|
|
+ :title="titleMsg"
|
|
|
+ class="ent_powerPerson_dialog"
|
|
|
+ :show-close="false"
|
|
|
+ :lock-scroll="false"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ :visible.sync="centerDialogVisible"
|
|
|
+ width="890px"
|
|
|
+ center>
|
|
|
+ <div class="content" v-loading="loading">
|
|
|
+ <div class="content_left">
|
|
|
+ <h4>选择</h4>
|
|
|
+ <div class="search">
|
|
|
+ <el-input prefix-icon="el-icon-search" v-model="searchVal" placeholder="搜索" >
|
|
|
+ <!-- <template slot="prepend">
|
|
|
+ <img style="width: 20px;height: 20px" src="@/assets/images/search.png" alt="">
|
|
|
+ </template> -->
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+ <div class="all" v-if="allQuan">
|
|
|
+ <i class="seleced" :class="allChecked?'selectAll':'selectHalf'" @click="allToggle()" v-if="quan"></i>
|
|
|
+ <i class="seleced" :class="allChecked?'selectAll':''" @click="allToggle()" v-else></i>
|
|
|
+ <span class="noselect" @click="allToggle()">全选</span>
|
|
|
+ </div>
|
|
|
+ <div class="allList">
|
|
|
+ <!-- <div v-for="(item,i) in deal_personList" :key="item.id" :class="{toggle:!item.toggle}">
|
|
|
+ <h5><i class="seleced" @click="selectGroup(item,i)" :class="item.status"></i> <span class="noselect" @click="toggle(item,i)">{{ item.name }}</span> <i @click="toggle(item,i)" class="el-icon-arrow-down" :id="'up'+i"></i></h5>
|
|
|
+ <div class="itemList" :id="'plays'+i">
|
|
|
+ <div v-for="val in deal_personList" :key="val.user_id" @click="chooseUser(val,'single')" :class="{active:val.checked, 'selectDisabled':val.disabled}">
|
|
|
+ <h5><i class="seleced" :class="{'selectAll':val.checked&&!val.disabled }"></i></h5>
|
|
|
+ <span class="userName">{{ val.username }}</span> <span> {{ val.phone }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div> -->
|
|
|
+ <div v-for="val in deal_personList" :key="val.id" @click="chooseUser(val,'single')" :class="{active:val.toggle, 'selectDisabled':val.disabled}">
|
|
|
+ <h5>
|
|
|
+ <i class="seleced" :class="{'selectAll':val.checked&&!val.disabled }"></i>
|
|
|
+ <span class="userName">@@ val.name @@</span>
|
|
|
+ </h5>
|
|
|
+ <span> @@ val.phone @@</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="content_right">
|
|
|
+ <h4>已选</h4>
|
|
|
+ <ul>
|
|
|
+ <li v-for="(item,i) in selectedList" :key="item.id">
|
|
|
+ <span class="userName">@@ item.name @@</span>
|
|
|
+ <span>@@ item.phone @@</span>
|
|
|
+ <i class="el-icon-error" @click="delChooseUser(i)"></i>
|
|
|
+ <!-- <p v-else style="width:24px;height:24px;"></p> -->
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- <p v-if="currentIndex !== 1 && pagetype!=='manage'">已选择{{ maxLength }}人共购买{{ personList.length }}人</p>
|
|
|
+ <p class="rootdialog" v-else>已选择 <span>{{ selectedList.length }}</span> 人共购买 <span>{{ empower_count }}</span> 人</p> -->
|
|
|
+ <p class="ent_person_tip" v-if="pagetype!==''">
|
|
|
+ <!-- <img class="tip_icon" src="@/assets/images/icon/guanyu.png" alt=""> -->
|
|
|
+ <span>注：同一人员只能拥有1个超级订阅或大会员产品权限，如需添加请删除该人员原有的产品权限</span>
|
|
|
+ </p>
|
|
|
+ <span slot="footer" class="dialog-footer btns">
|
|
|
+ <button :disabled="showBtn" @click="saveDepart" class="save">保存</button>
|
|
|
+ <button @click="centerCancel" class="cancle">取消</button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+</div>
|
|
|
+</div>
|
|
|
+<script src=//cdn-common.jianyu360.com/cdn/lib/vue/2.7.14/vue.min.js></script>
|
|
|
+<script>
|
|
|
+ var person_Dialog = new Vue({
|
|
|
+ el: "#personDialog",
|
|
|
+ delimiters: ["@@", "@@"],
|
|
|
+ // template: temp,
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ pagetype:'',
|
|
|
+ selectData:{},
|
|
|
+ userPerson:[],
|
|
|
+ list:[],
|
|
|
+ vt:'',
|
|
|
+ centerDialogVisible: false,
|
|
|
+ searchVal: '',
|
|
|
+ personList: {},
|
|
|
+ personSpareList: {},
|
|
|
+ selectedList: [],
|
|
|
+ checked: false,
|
|
|
+ titleMsg: '',
|
|
|
+ currentIndex: '0',
|
|
|
+ maxLength: '',
|
|
|
+ loading: true,
|
|
|
+ allChecked: false,
|
|
|
+ toggles: true,
|
|
|
+ yer: 0,
|
|
|
+ quan: false,
|
|
|
+ flags: true,
|
|
|
+ allQuan: true,
|
|
|
+ lastTime: '',
|
|
|
+ showBtn: false,
|
|
|
+ empower_count: 0, // 购买人数
|
|
|
+ selectDataIds: [],
|
|
|
+ filterType: false,
|
|
|
+ _scrollTop:''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ this.$watch('searchVal', this.debounce((newValue, oldValue) => {
|
|
|
+ console.log(newValue, oldValue)
|
|
|
+ const searchList = []
|
|
|
+ if (this.personSpareList.length !== 0) {
|
|
|
+ this.personSpareList.forEach((v, i) => {
|
|
|
+ if (v.name.indexOf(newValue) !== -1 || v.phone.indexOf(newValue) !== -1) {
|
|
|
+ searchList.push(v)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.personList = searchList
|
|
|
+ }
|
|
|
+ if (newValue === '') {
|
|
|
+ this.personList = this.personSpareList
|
|
|
+ }
|
|
|
+ }, 500))
|
|
|
+ this.$watch('centerDialogVisible', (newValue, oldValue) => {
|
|
|
+ if (newValue) {
|
|
|
+ this.afterOpen()
|
|
|
+ } else {
|
|
|
+ this.beforeClose()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ centerDialogVisible (newval) {
|
|
|
+ if (newval) {
|
|
|
+ this.searchVal = ''
|
|
|
+ if (!this.filterType) {
|
|
|
+ this.selectedList = []
|
|
|
+ } else {
|
|
|
+ this.selectedList = this.filterSelectList
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ deal_personList: function () {
|
|
|
+ let arr = JSON.parse(JSON.stringify(this.personList))
|
|
|
+ if (arr && Object.keys(arr).length !== 0) {
|
|
|
+ let list = []
|
|
|
+ arr && arr.forEach((items, x) => {
|
|
|
+ this.selectedList.forEach((val, i) => {
|
|
|
+ if (items.checked) {
|
|
|
+ list.push(items.id)
|
|
|
+ } else {
|
|
|
+ if (items.id === val.id) {
|
|
|
+ items.checked = true
|
|
|
+ list.push(items.id)
|
|
|
+ } else {
|
|
|
+ items.checked = false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ list = this.newArrFn(list)
|
|
|
+ if (list.length === arr.length) {
|
|
|
+ this.allChecked = true
|
|
|
+ this.maxLength = arr.length
|
|
|
+ } else {
|
|
|
+ if (list.length === 0) {
|
|
|
+ this.quan = false
|
|
|
+ this.allChecked = false
|
|
|
+ this.maxLength = 0
|
|
|
+ } else {
|
|
|
+ this.quan = true
|
|
|
+ this.allChecked = false
|
|
|
+ this.maxLength = list.length
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ arr = []
|
|
|
+ }
|
|
|
+ return arr
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ debounce (fn, delay) {
|
|
|
+ let timer = null
|
|
|
+ return function () {
|
|
|
+ const arg = arguments
|
|
|
+ clearTimeout(timer)
|
|
|
+ timer = setTimeout(() => {
|
|
|
+ fn.apply(this, arg)
|
|
|
+ }, delay)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 获取人员列表
|
|
|
+ async getData (flag = 'no', num) {
|
|
|
+ this.filterType = !!num
|
|
|
+ this.loading = true
|
|
|
+ const selectAreas = []
|
|
|
+ this.list.forEach((v, i) => {
|
|
|
+ this.selectDataIds.forEach((s, index) => {
|
|
|
+ if (v._id === s) {
|
|
|
+ if (v.area) {
|
|
|
+ selectAreas.push(v.area)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ const params = {
|
|
|
+ region: num ? '' : selectAreas.toString(),
|
|
|
+ queryType: num || ''
|
|
|
+ }
|
|
|
+ const res = await getDistributor(this.vt, params)
|
|
|
+ if (res.error_code === 0 && res.data && res) {
|
|
|
+ // this.personList = data
|
|
|
+ this.personList = {}
|
|
|
+ this.loading = false
|
|
|
+ res.data.forEach(v => {
|
|
|
+ v.toggle = true
|
|
|
+ v.status = false
|
|
|
+ })
|
|
|
+ this.personList = res.data
|
|
|
+ this.personSpareList = res.data
|
|
|
+ if (flag === 'yes') {
|
|
|
+ if (this.searchVal) {
|
|
|
+ this.allQuan = false
|
|
|
+ }
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.maxLength = res.data.checked
|
|
|
+ if (this.pagetype !== 'manage') {
|
|
|
+ this.selectedList = res.data.checkedList
|
|
|
+ }
|
|
|
+ this.allChecked = true
|
|
|
+ if (res.data.checked === 0) {
|
|
|
+ this.quan = false
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.personList = {}
|
|
|
+ this.loading = false
|
|
|
+ }
|
|
|
+ if (this.searchVal === '') {
|
|
|
+ this.allQuan = true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 数组去重
|
|
|
+ newArrFn (arr) {
|
|
|
+ if (!arr) return
|
|
|
+ return ([...new Set(arr)])
|
|
|
+ },
|
|
|
+ // 保存
|
|
|
+ saveDepart () {
|
|
|
+ // 设置定时器
|
|
|
+ let timer
|
|
|
+ // 设置现在的时间
|
|
|
+ const now = +new Date()
|
|
|
+ // 当现在的时间减去上次点击的时间小于3s时,给出提示，并结束执行函数
|
|
|
+ if (this.lastTime && now - this.lastTime < 3000) {
|
|
|
+ clearTimeout(timer)
|
|
|
+ } else {
|
|
|
+ // 若大于3s，则把现在的时间赋值个lastTime
|
|
|
+ this.lastTime = now
|
|
|
+ const delId = []
|
|
|
+ this.selectedList.forEach((v, i) => {
|
|
|
+ delId.push(v.id)
|
|
|
+ })
|
|
|
+ this.centerDialogVisible = false
|
|
|
+ if (delId.length !== 0) {
|
|
|
+ if (this.filterType) {
|
|
|
+ console.log('刷新？')
|
|
|
+
|
|
|
+ } else {
|
|
|
+ getMsgDistributor({ messageId: getCaIndexIds.toString(), staffs: data }).then(res => {
|
|
|
+ if (res.error_code === 0) {
|
|
|
+ if (res.data === 1) {
|
|
|
+ this.$message({ message: '分发成功', type: 'success' })
|
|
|
+ } else {
|
|
|
+ this.$message({ message: res.error_msg, type: 'warning' })
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.$message({ message: res.error_msg, type: 'warning' })
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (this.filterType) {
|
|
|
+ this.$message({ message: '请选择', type: 'warning' })
|
|
|
+ } else {
|
|
|
+ this.$message({ message: '请选择分发人员', type: 'warning' })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 取消
|
|
|
+ centerCancel () {
|
|
|
+ this.centerDialogVisible = false
|
|
|
+ this.yer = 0
|
|
|
+ if (this.pagetype === 'manage') {
|
|
|
+ this.selectedList = []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 全选
|
|
|
+ allToggle () {
|
|
|
+ this.allChecked = !this.allChecked
|
|
|
+ this.quan = !this.allChecked
|
|
|
+ if (Object.keys(this.personList).length !== 0) {
|
|
|
+ const datas = JSON.parse(JSON.stringify(this.personList))
|
|
|
+ this.selectedList = []
|
|
|
+ datas && datas.forEach((items, x) => {
|
|
|
+ if (this.allChecked) {
|
|
|
+ this.selectedList.push(items)
|
|
|
+ } else {
|
|
|
+ this.selectedList = []
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.selectedList = []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 删除人员
|
|
|
+ delChooseUser (i) {
|
|
|
+ this.selectedList.splice(i, 1)
|
|
|
+ this.allChecked = false
|
|
|
+ console.log(this.selectedList.length)
|
|
|
+ if (this.selectedList.length === 0) {
|
|
|
+ this.quan = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 选择人员
|
|
|
+ chooseUser (val, status) {
|
|
|
+ if (status === 'single') {
|
|
|
+ const newArr = this.selectedList.filter(x => {
|
|
|
+ return val.id === x.id
|
|
|
+ })
|
|
|
+ let lengthId = 0
|
|
|
+ lengthId = this.deal_personList.length
|
|
|
+ if (newArr.length > 0) {
|
|
|
+ this.selectedList.forEach((v, i) => {
|
|
|
+ if (val.id === v.id) {
|
|
|
+ this.selectedList.splice(i, 1)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if (lengthId === this.selectedList.length) {
|
|
|
+ this.allChecked = true
|
|
|
+ } else {
|
|
|
+ this.allChecked = false
|
|
|
+ }
|
|
|
+ if (this.selectedList.length === 0) {
|
|
|
+ this.quan = false
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (lengthId === this.selectedList.length) {
|
|
|
+ this.allChecked = true
|
|
|
+ } else {
|
|
|
+ this.allChecked = false
|
|
|
+ }
|
|
|
+ this.selectedList.push(val)
|
|
|
+ const yer = []
|
|
|
+ this.deal_personList.forEach(v => {
|
|
|
+ if (v.status === 'selectAll') {
|
|
|
+ yer.push(v.status)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if (yer.length === this.deal_personList.length) {
|
|
|
+ this.allChecked = true
|
|
|
+ }
|
|
|
+ this.quan = true
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.selectedList = this.selectedList.concat(val)
|
|
|
+ if (this.pagetype === 'manage') {
|
|
|
+ this.selectedList.forEach((sum, k) => {
|
|
|
+ if (this.userPerson && this.userPerson.length !== 0) {
|
|
|
+ this.userPerson.forEach((s) => {
|
|
|
+ if (sum.phone === s.phone) {
|
|
|
+ this.selectedList.splice(k, 1)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.selectedList = this.selectedList.concat(val)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // popup 显示时调用
|
|
|
+ afterOpen () {
|
|
|
+ this._scrollTop = document.scrollingElement.scrollTop
|
|
|
+ document.body.style.position = 'fixed'
|
|
|
+ document.body.style.width = '100%'
|
|
|
+ document.body.style.top = -_scrollTop + 'px'
|
|
|
+ },
|
|
|
+
|
|
|
+ // popup 关闭时调用
|
|
|
+ beforeClose () {
|
|
|
+ document.body.style.position = ''
|
|
|
+ document.body.style.top = ''
|
|
|
+ // 使 scrollTop 恢复原状
|
|
|
+ document.scrollingElement.scrollTop = this._scrollTop
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+</script>
|
