Skip to content

H
haoban-4
Commit ec116ce8 by 无尘
Options

fix: 删除无用的 vue 文件

parent 318ba4c0
Showing with 13 additions and 4843 deletions
README.md
......@@ -4,11 +4,11 @@
* @Author: 无尘
* @Date: 2020-07-16 16:36:48
* @LastEditors: 无尘
* @LastEditTime: 2020-07-17 11:23:57
* @LastEditTime: 2020-07-20 14:27:25
-->
# 好办 4.0 前端项目
> 由于 sass-node 经常出现下载问题，项目中尽量统一使用 less
> 由于 `node-sass` 经常出现下载问题，项目中尽量统一使用 less
## Build Setup
......
src/components/app/app-detail.vue deleted 100644 → 0
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2019-03-20 14:36:37
* @LastEditors: 无尘
* @LastEditTime: 2020-07-20 11:32:16
-->
<!--
我的顾客应用：
<app-detail ></app-detail>
-->
<template>
<div class="app-detail-wrap">
<div v-if="tabType == 1">
<!-- <common-detail-top :topMenuData="topMenuData" :activeId="activeId"></common-detail-top> -->
<div class="common-detail-tab">
<el-tabs v-model="activeName" class="daily-set-tab" @tab-click="handleTabClick">
<el-tab-pane label="会员搜索设置" name="first"></el-tab-pane>
<el-tab-pane label="会员展示设置" name="second"></el-tab-pane>
<el-tab-pane label="会员分组设置" name="third"></el-tab-pane>
</el-tabs>
</div>
<div v-if="activeName == 'first'" class="app-detail-pane border-box p-20">
<el-checkbox v-model="myCustomData.searchFlag">允许全品牌搜索</el-checkbox>
<div class="m-t-46">
<el-button type="primary" @click="submit('searchFlag')">保 存</el-button>
</div>
</div>
<div v-if="activeName == 'second'" class="app-detail-pane border-box p-20">
<div class="m-b-20">
<el-checkbox class="w-195" v-model="myCustomData.mainStoreFlag">展示服务门店会员</el-checkbox>
<span class="font-14 color-909399">注：保存勾选项后，门店导购和店长可查看本门店作为服务门店名下会员</span>
</div>
<div class="m-b-20">
<el-checkbox class="w-195" v-model="myCustomData.minorStoreFlag">展示协管门店会员</el-checkbox>
<span class="font-14 color-909399">注：保存勾选项后，门店导购和店长可查看本门店作为协管门店名下会员</span>
</div>
<div class="m-b-20">
<el-checkbox class="w-195" v-model="myCustomData.openCardStoreFlag">展示开卡门店会员</el-checkbox>
<span class="font-14 color-909399">注：保存勾选项后，门店导购和店长可查看本门店作为开卡门店名下会员</span>
</div>
<div class="m-b-20">
<el-checkbox class="w-195" v-model="myCustomData.isSeeAuthMember">展示已认证会员</el-checkbox>
<span class="font-14 color-909399">注：保存勾选项后，门店导购和店长可查看本门店已认证会员</span>
</div>
<div class="m-b-20">
<el-checkbox class="w-195" v-model="myCustomData.clerkSeeOtherFlag">允许导购查看其他导购会员</el-checkbox>
<span class="font-14 color-909399">注：保存勾选项后，门店导购可查看本门店其他导购名下会员</span>
</div>
<div class="m-b-20"><el-switch class="" v-model="myCustomData.allowGuideContact" active-text="" inactive-text="" @change="changeAllowGuide"> </el-switch><span class="font-14 color-606266 p-l-10">允许导购主动联系会员</span><span class="font-14 color-909399 p-l-38">注：开启后，可选择导购在 &lt; 我的顾客 &gt; 中是否通过以下方式联系会员</span></div>
<div v-if="myCustomData.allowGuideContact">
<el-checkbox v-model="myCustomData.allowGuideMobile" @change="changeContact">电话</el-checkbox>
<el-checkbox v-model="myCustomData.allowGuideMessage" @change="changeContact">短信</el-checkbox>
<el-checkbox v-model="myCustomData.allowGuideOnlineChat" @change="changeContact">消息</el-checkbox>
</div>
<div class="m-t-46">
<el-button type="primary" @click="submit('showFlag')">保 存</el-button>
</div>
</div>
<div v-if="activeName == 'third'" class="app-detail-pane border-box p-20">
<div class="condition-wrap font-0">
<el-input placeholder="请输入分组名称搜索" v-model="conditionObj.searchInput" class="w-264" style="width: 264px;" prefix-icon="el-icon-search" @keyup.native="value => toInput(value, conditionObj.searchInput)" clearable @clear="clearInput"></el-input>
<el-select class="w-105 m-l-10" v-model="conditionObj.classifyName" placeholder="请选择" @change="changeCondition">
<el-option label="全部" value=""></el-option>
<el-option v-for="item in classifyList" :key="item" :label="item" :value="item"> </el-option>
</el-select>
<el-select class="m-l-10" v-model="conditionObj.effectiveStatus" placeholder="请选择状态" @change="changeCondition">
<el-option label="全部" value=""></el-option>
<el-option label="有效" value="1"></el-option>
<el-option label="失效" value="0"></el-option>
</el-select>
</div>
<div class="condition-tip m-t-20 m-b-20">
<div role="alert" class="el-alert el-alert--info">
<i class="el-alert__icon el-icon-info font-12 color-1890ff"></i>
<div class="el-alert__content"><span class="el-alert__title color-606266 font-14">注：GIC设置分组后，好办会员分组列表次日刷新，每日刷新一次，仅展示GIC中开启【好办展示】的会员分组</span></div>
</div>
<div class="switch-wrap m-t-20">
<el-switch v-model="overTimeSeeFlag" active-text="" inactive-text="" @change="saveGroupSet"> </el-switch>
<el-tooltip class="item" effect="dark" content="开启后，GIC中设置的好办端会员分组到期后，好办移动端将不再展示该条分组" placement="top-start">
<span style="cursor: pointer;">会员分组到期后不展示<span class="el-icon-info font-12 color-909399"></span> </span
></el-tooltip>
</div>
</div>
<div>
<el-table class="select-table" ref="multipleTable" :data="groupListData" tooltip-effect="dark" :style="{ width: '100%' }">
<el-table-column label="分组名称" width="120" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.groupName }}</template>
</el-table-column>
<el-table-column prop="" label="分类">
<template slot-scope="scope">{{ scope.row.memberTagGroupClassifyName }}</template>
</el-table-column>
<el-table-column prop="" label="是否实时" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.isRealTime == 1 ? '是' : '否' }}</template>
</el-table-column>
<el-table-column prop="" label="更新频率" show-overflow-tooltip>
<template slot-scope="scope"
>{{ scope.row.updateType == 1 ? '每日' : scope.row.updateType == 2 ? '每周' : scope.row.updateType == 3 ? '每月' : '-' }} {{ scope.row.updateType == 1 ? '一次' : scope.row.updateType == 2 ? '周' + scope.row.updateDay : scope.row.updateType == 3 ? scope.row.updateDay + '号' : '-' }}
</template>
</el-table-column>
<el-table-column prop="" label="状态" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.effectiveStatus == '1' ? '有效' : '失效' }}</template>
</el-table-column>
<el-table-column prop="" label="覆盖人数" show-overflow-tooltip>
<template slot-scope="scope"
>{{ scope.row.memberCount || 0 }}人</template
>
</el-table-column>
<el-table-column prop="" label="到期时间" show-overflow-tooltip>
<template slot-scope="scope">
<div>{{ scope.row.effectiveDate | timeStampToYmd }}</div>
<div>{{ scope.row.effectiveDate | timeStampToHms }}</div>
</template>
</el-table-column>
<el-table-column>
<template slot="header">
<el-tooltip class="item" effect="dark" content="<前提：开启模板消息开关。仅支持专属导购对<我的顾客-会员分组>中的分组下会员发送模板消息>" placement="right">
<span style="cursor: pointer">模板消息设置<i class="el-icon-info font-12 color-606266"></i></span>
</el-tooltip>
</template>
<template slot-scope="scope">
<el-switch v-model="scope.row.isSendTemplate" active-text="" inactive-text="" @change="toChangeTemp($event, scope.$index, scope.row)"> </el-switch>
</template>
</el-table-column>
<el-table-column>
<template slot="header" >
<el-tooltip class="item" effect="dark" content="仅可编辑能在好办展示的分组" placement="right">
<span style="cursor: pointer">操作<i class="el-icon-info font-12 color-606266"></i></span>
</el-tooltip>
</template>
<template slot-scope="scope">
<el-button type="text" size="small" @click="toEditGroup(scope.$index, scope.row)">编辑分组可见范围</el-button>
</template>
</el-table-column>
</el-table>
<div class="block common-wrap__page text-right m-t-24" v-if="groupListData.length != 0">
<dm-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[20, 40, 60, 80]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </dm-pagination>
</div>
</div>
</div>
</div>
<!--在线沟通-->
<div v-if="tabType == 2">
<online-chat :brandId="brandId"></online-chat>
</div>
<!--聊天记录-->
<div v-if="tabType == 3">
<chat-log :brandId="brandId" :activeGroupId="activeGroupId"></chat-log>
</div>
<vue-select-store ref="storeSelector" :currentBrand="activeGroup" :appScene="appScene" :treeSet="storeTreeSet" :selectType="'group-store'" :defaultList="defaultStoreList" @handleSelectedList="handleSelectedList"> </vue-select-store>
</div>
</template>
<script>
import commonDetailTop from '@/components/app/common-detail-top.vue';
import vueSelectStore from 'components/common/vueSelectStore';
import onlineChat from '@/components/app/online-chat.vue';
import chatLog from '@/components/app/chat-log.vue';
import showMsg from '@/common/js/showmsg';
import errMsg from '@/common/js/error';
import { _debounce } from '@/common/js/public';
import { postRequest } from '@/api/api';
export default {
name: 'app-detail',
props: {
brandId: {
type: String,
default() {
return '';
}
},
tabType: {
type: String,
default() {
return '1';
}
},
activeGroupId: {
type: String,
default() {
return '';
}
}
},
data() {
return {
projectName: '', // 当前项目名
activeName: 'first',
activeGroup: this.activeGroupId, // 商户(品牌) groupId
myCustomData: {
searchFlag: false,
chatFlag: false,
mainStoreFlag: false, // 服务门店显示，1显示0不现实
minorStoreFlag: false, // 协管门店显示，1显示0不显示
openCardStoreFlag: false, // 开卡门店显示，1显示0不显示
clerkSeeOtherFlag: false, // 导购查看其他导购，1显示0不显示
isSeeAuthMember: false,
allowGuideContact: false,
allowGuideMobile: false,
allowGuideMessage: false,
allowGuideOnlineChat: false
},
topMenuData: [
{
id: '1',
name: '会员搜索设置'
}
],
activeId: '1',
overTimeSeeFlag: '',
// 会员分组设置
conditionObj: {
searchInput: '',
classifyName: '',
effectiveStatus: ''
},
groupListData: [], // 列表数据
classifyList: [], // 会员分组
currentPage: 1,
pageSize: 20,
total: 0,
// 门店选择
appScene: 2,
defaultStoreList: [],
storeTreeSet: {
isSelectPerson: false, // 控制只能选部门(false)
dialogVisible: false, // 控制显示/隐藏
isSingle: false // 是否单选
}
};
},
beforeMount() {
let that = this;
let host = window.location.origin;
if (host.indexOf('localhost') != -1) {
that.baseUrl = 'http://www.gicdev.com';
} else {
that.baseUrl = host;
}
},
methods: {
/* eslint-disable */
async handleTabClick(tab, event) {
const that = this;
if (tab.name == 'first') {
that.getCustomerSet(that.brandId);
}else if (tab.name == 'second') {
that.getShowSet(that.brandId);
}else {
await that.getGroupClassSet(that.brandId);
await that.getGroupClassify(that.brandId);
await that.getGroupList(that.brandId);
}
},
/**
* 获取分组设置
*/
getGroupClassSet(brandId) {
const that = this;
let para = {
brandId: brandId
};
postRequest('/haoban-app-member-web/memberGroup/get-member-group-setting', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
that.overTimeSeeFlag = resData.result == 0 ? false : true;
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
},
/**
* 保存分组设置
*/
saveGroupSet() {
const that = this;
let para = {
brandId: that.brandId,
overTimeSeeFlag: that.overTimeSeeFlag == true ? 1 : 0
};
postRequest('/haoban-app-member-web/memberGroup/save-member-group-setting', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
showMsg.showmsg('设置成功', 'success');
return false;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
},
/**
* 输入
*/
toInput: _debounce(function(e, value) {
const that = this;
that.currentPage = 1;
that.getGroupList(that.brandId);
}, 500),
// 搜索清除
clearInput() {
const that = this;
that.currentPage = 1;
that.getGroupList(that.brandId);
},
changeCondition() {
const that = this;
that.currentPage = 1;
that.getGroupList(that.brandId);
},
/**
* 获取会员分组分类
*/
getGroupClassify(brandId) {
const that = this;
let para = {
brandId: brandId
};
postRequest('/haoban-app-member-web/memberGroup/get-member-class-list', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
that.classifyList = resData.result.list || [];
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
},
/**
* 编辑分组可见范围
*
*/
toEditGroup(index, row) {
const that = this;
that.memberTagGroupId = row.memberTagGroupId;
that.getGroupSet();
},
getGroupSet() {
const that = this;
let para = {
brandId: that.brandId,
memberTagGroupId: that.memberTagGroupId
};
postRequest('/haoban-app-member-web/memberGroup/find-gorup-see-range', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
if(resData.result && resData.result.length) {
resData.result.forEach(ele => {
if (Number.parseInt(ele.type) === 2) {
ele.groupId = ele.id;
}
ele.label = ele.name;
})
}
that.defaultStoreList = resData.result || [];
that.storeTreeSet = {
dialogVisible: true,
isSingle: false,
isSelectPerson: false
};
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
},
handleSelectedList(data) {
console.log(data);
const that = this;
that.defaultStoreList = data || [];
that.saveGorupRange();
},
saveGorupRange() {
const that = this;
let storeGroups = [];
let filterStoreIds = [];
that.defaultStoreList.forEach(ele => {
if (ele.type == 2) {
storeGroups.push(ele.groupId);
}
if (ele.type == 3) {
filterStoreIds.push(ele.storeId);
}
});
let para = {
brandId: that.brandId,
memberTagGroupId: that.memberTagGroupId,
groupList: storeGroups || [],
storeList: filterStoreIds || []
};
postRequest('/haoban-app-member-web/memberGroup/save-gorup-see-range', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
showMsg.showmsg('编辑成功', 'success');
that.defaultStoreList = [];
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
},
/**
* 模板消息设置
*/
toChangeTemp(e, index, row) {
const that = this;
console.log(e, index, row)
let para = {
brandId: that.brandId,
memberTagGroupId: row.memberTagGroupId,
isSendTemplate: row.isSendTemplate == true ? 1 : 0
}
postRequest('/haoban-app-member-web/memberGroup/save-member-group-is-template-message', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
showMsg.showmsg('操作成功', 'success');
that.pageNum = 1;
that.getGroupList(that.brandId)
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
},
/**
* 分页---页码变化
*/
handleSizeChange(val) {
const that = this;
that.currentPage = 1;
that.pageSize = val;
that.getGroupList(that.brandId);
},
/**
* 分页---当前页变化
*/
handleCurrentChange(val) {
const that = this;
that.currentPage = val;
that.getGroupList(that.brandId);
},
/**
* 获取会员分组设置列表
*/
getGroupList(brandId) {
const that = this;
let para = {
brandId: brandId,
memberGroupName: that.conditionObj.searchInput,
classifyName: that.conditionObj.classifyName,
effectiveStatus: that.conditionObj.effectiveStatus,
pageNum: that.currentPage,
pageSize: that.pageSize
};
postRequest('/haoban-app-member-web/memberGroup/member-tag-group-list', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
if(resData.result.list && resData.result.list.length) {
resData.result.list.forEach((ele) => {
ele.isSendTemplate = ele.isSendTemplate == 1? true: false;
})
}
that.groupListData = resData.result.list || [];
that.total = resData.result.pageInfo.total;
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
},
/**
* 保存
*/
submit: _debounce(function(type) {
const that = this;
that.setData(type);
}, 500),
/**
* 保存-API
*/
setData(type) {
const that = this;
let para = {
brandId: that.brandId,
enterpriseId: JSON.parse(localStorage.getItem('userInfos')).enterpriseId
};
let url;
if (type != 'showFlag') {
para[type] = !!that.myCustomData[type] ? 1 : 0;
url = '/haoban-app-member-web/customer/save-online-chat-setting';
if (type === 'searchFlag') {
url = '/haoban-app-member-web/customer/save-customer-setting';
}
}else {
para['mainStoreFlag'] = !!that.myCustomData['mainStoreFlag'] ? 1 : 0;
para['minorStoreFlag'] = !!that.myCustomData['minorStoreFlag'] ? 1 : 0;
para['openCardStoreFlag'] = !!that.myCustomData['openCardStoreFlag'] ? 1 : 0;
para['clerkSeeOtherFlag'] = !!that.myCustomData['clerkSeeOtherFlag'] ? 1 : 0;
para['allowGuideContact'] = !!that.myCustomData['allowGuideContact'] ? 1 : 0;
para['allowGuideMobile'] = !!that.myCustomData['allowGuideMobile'] ? 1 : 0;
para['allowGuideMessage'] = !!that.myCustomData['allowGuideMessage'] ? 1 : 0;
para['allowGuideOnlineChat'] = !!that.myCustomData['allowGuideOnlineChat'] ? 1 : 0;
para['isSeeAuthMember'] = !!that.myCustomData['isSeeAuthMember'] ? 1 : 0;
para.chatFlag = that.myCustomData.chatFlag; // 总的
para.isMessageRemind = that.myCustomData.isMessageRemind; // 短信
para.messageRemindTime = that.myCustomData.messageRemindTime;
para.isTemplateMessage = that.myCustomData.isTemplateMessage; // 模板消息
para.isImgMessage = that.myCustomData.isImgMessage; // 图文
para.isGoodMessage = that.myCustomData.isGoodMessage;
para.isIntegralGoodMessage = that.myCustomData.isIntegralGoodMessage;
url = '/haoban-app-member-web/customer/save-member-show-setting';
}
postRequest(url, para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
showMsg.showmsg('保存成功', 'success');
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
},
/**
* 改变
*/
changeAllowGuide(e) {
const that = this;
that.myCustomData.allowGuideMobile = e;
that.myCustomData.allowGuideMessage = e;
that.myCustomData.allowGuideOnlineChat = e;
},
/**
* 改变联系
*/
changeContact() {
const that = this;
if(!that.myCustomData.allowGuideMobile && !that.myCustomData.allowGuideMessage && !that.myCustomData.allowGuideOnlineChat) {
that.myCustomData.allowGuideContact = false;
}
},
/**
* 获取全品牌搜索设置数据
*/
getCustomerSet(brandId) {
const that = this;
let para = {
brandId: brandId
};
postRequest('/haoban-app-member-web/customer/find-customer-setting', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
if (!!resData.result) {
that.myCustomData.searchFlag = !!resData.result.searchFlag ? true : false;
}
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
},
/**
* 获取会员展示设置数据
*/
getShowSet(brandId) {
const that = this;
let para = {
brandId: brandId
};
postRequest('/haoban-app-member-web/customer/find-member-show-setting', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
if (!!resData.result) {
resData.result.mainStoreFlag = resData.result.mainStoreFlag == 1 ? true : false;
resData.result.minorStoreFlag = resData.result.minorStoreFlag == 1 ? true : false;
resData.result.openCardStoreFlag = resData.result.openCardStoreFlag == 1 ? true : false;
resData.result.clerkSeeOtherFlag = resData.result.clerkSeeOtherFlag == 1 ? true : false;
resData.result.allowGuideContact = resData.result.allowGuideContact == 1 ? true : false;
resData.result.allowGuideMobile = resData.result.allowGuideMobile == 1 ? true : false;
resData.result.allowGuideMessage = resData.result.allowGuideMessage == 1 ? true : false;
resData.result.allowGuideOnlineChat = resData.result.allowGuideOnlineChat == 1 ? true : false;
resData.result.isSeeAuthMember = resData.result.isSeeAuthMember == 1 ? true : false;
resData.result.searchFlag = resData.result.searchFlag == 1 ? true : false;
that.myCustomData = resData.result;
}
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
}
},
watch: {
brandId: function(newData, oldData) {
const that = this;
that.getCustomerSet(newData);
that.getShowSet(newData);
that.getGroupClassify(newData);
that.getGroupList(newData);
that.getGroupClassSet(newData);
},
activeGroupId: function(newData, oldData) {
let that = this;
if (!!newData) {
that.activeGroup = newData;
}
},
tabType: function(newData, oldData) {
const that = this;
if (newData == 1) {
that.getShowSet(that.brandId);
that.topMenuData = [
{
id: '1',
name: '会员搜索设置'
}
]
that.activeId = 1;
}else {
that.topMenuData = [
{
id: '2',
name: '在线沟通设置'
}
]
that.activeId = '2';
}
}
},
mounted() {
const that = this;
if(that.brandId && that.brandId != 1) {
that.getCustomerSet(that.brandId);
that.getShowSet(that.brandId);
that.getGroupClassify(that.brandId);
that.getGroupList(that.brandId);
that.getGroupClassSet(that.brandId);
}
},
components: {
commonDetailTop,
vueSelectStore,
onlineChat,
chatLog
}
};
</script>
<style lang="less" scoped>
.w-500 {
width: 500px;
}
.w-195 {
width: 195px;
}
.color-1890ff {
color: #2f54eb;
}
.p-20 {
padding: 20px;
}
.p-l-38 {
padding-left: 38px;
}
.app-detail-wrap {
height: 100%;
background: #fff;
.el-tabs {
background: #fff;
/deep/ .el-tabs__nav-wrap {
/* height: 48px;
line-height: 48px; */
&::after {
height: 1px;
}
/* .el-tabs__nav-scroll {
padding-left: 20px;
} */
}
}
.condition-tip {
width: 740px;
.el-alert--info {
background: #E6F7FF;
border: 1px solid rgba(145,213,255,1);
.el-alert__icon {
font-size: 12px;
}
}
}
}
</style>
src/components/app/common-app-top.vue deleted 100644 → 0
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2019-03-20 14:36:37
* @LastEditors : 无尘
* @LastEditTime : 2019-12-25 09:28:36
-->
<!--
应用公共顶部：
<common-app-top
:appName="appName"
:appIcon="appIcon"
@selectBrandId="selectBrandId">
</common-app-top>
-->
<template>
<div class="app-top-wrap app-detail-wrap">
<div class="my-customer-top">
<div class="my-customer-name">
<span class="app-icon "><img class="" :src="appIcon"/></span><span class="p-l-8">{{ appName }}</span>
</div>
<el-button class="border-radius-18 my-customer-return" @click="returnBack">返回</el-button>
<div v-if="$route.path != '/workSet' && $route.path != '/workGroupSet' && $route.path != '/dayStatistics' && $route.path != '/workGroupSet' && $route.path != '/dayStatistics' && $route.path != '/workTimeManage'" class="my-customer-brand">
<el-tooltip class="item" effect="dark" content="不同品牌的工作台可分别进行管理。点击后切换，可以管理不同品牌下的应用" placement="top-start">
<span class="font-14 color-606266" style="cursor: pointer;">品牌名称<span class="el-icon-info font-12 color-909399 p-l-6"></span> </span>
</el-tooltip>
<el-select class="p-l-10" v-model="activeBrand" placeholder="请选择" @change="changeSelect">
<el-option v-for="item in brandListData" :key="item.brandId" :label="item.name" :value="item.brandId"> </el-option>
</el-select>
</div>
</div>
</div>
</template>
<script>
import errMsg from '@/common/js/error';
import { postRequest } from '@/api/api';
export default {
name: 'common-app-top',
props: {
appName: {
type: String,
default() {
return '';
}
},
appIcon: {
type: String,
default() {
return '';
}
}
},
data() {
return {
projectName: '', // 当前项目名
activeBrand: '',
brandListData: []
};
},
methods: {
/**
* 返回
*/
returnBack() {
let that = this;
that.$router.push('appcenter');
},
/**
* 选择品牌
*/
changeSelect(val) {
let that = this;
let groupId = '';
that.brandListData.forEach(ele => {
if (ele.brandId == val) {
groupId = ele.groupId;
}
});
that.$emit('selectBrandId', val, groupId);
},
/**
* 获取品牌
*/
getBrandData() {
const that = this;
postRequest('/haoban-manage-web/application-brand-list', {})
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
if (!!resData.result && !!resData.result.length) {
that.brandListData = resData.result;
if (!!that.$route.query.brandId) {
that.activeBrand = that.$route.query.brandId;
that.$emit('selectBrandId', that.$route.query.brandId);
return false;
}
that.activeBrand = that.brandListData[0].brandId;
// 由于门店选择组件中没有品牌id ,只有 groupId
that.$emit('selectBrandId', that.brandListData[0].brandId, that.brandListData[0].groupId);
}
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
}
},
watch: {
brandId: function(newData, oldData) {
const that = this;
that.getBrandData();
}
},
mounted() {
const that = this;
that.getBrandData();
}
};
</script>
<style type="text/scss" lang="scss" scoped>
.w-500 {
width: 500px;
}
.color-1890ff {
color: #2f54eb;
}
.app-detail-wrap {
.my-customer-top {
position: relative;
height: 43px;
line-height: 43px;
.my-customer-return {
position: absolute;
left: 0px;
bottom: 10px;
width: 78px;
height: 32px;
border-radius: 18px;
}
.my-customer-brand {
position: absolute;
right: 0;
bottom: 18px;
// width: 93px;
height: 32px;
}
.my-customer-name {
width: 200px;
margin: 0 auto;
i {
font-size: 14px;
color: #fff;
}
span {
font-size: 16px;
color: #000;
}
.app-icon {
display: inline-block;
width: 22px;
height: 22px;
line-height: 22px;
text-align: center;
border-radius: 4px;
/* background: -webkit-gradient(linear, right top, left top, from(#7ab6fb), to(#508bfe));
background: -webkit-linear-gradient(right, #7ab6fb, #508bfe);
background: -moz-linear-gradient(right, #7ab6fb, #508bfe);
background: linear-gradient(right, #7ab6fb, #508bfe);
background: -webkit-linear-gradient(right, #7ab6fb, #508bfe); */
img {
display: inline-block;
max-width: 22px;
max-height: 22px;
vertical-align: bottom;
}
}
}
}
}
</style>
src/components/common/vueSelectEmployee.vue deleted 100644 → 0
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2019-02-19 12:20:38
* @LastEditors: 无尘
* @LastEditTime: 2019-09-25 17:14:44
-->
<template>
<el-dialog :title="treeSet.isSelectPerson ? '选择人员' : '选择部门'" width="660px" :visible.sync="treeSet.dialogVisible" :before-close="handleClose">
<div class="transfer-area">
<div class="select-area t-a-select">
<p class="title">选择</p>
<div class="tree-div">
<div class="input-container">
<el-input v-model="searchText" placeholder="请输入内容" suffix-icon="el-icon-search" @keyup.native="value => toInput(e, searchText)"></el-input>
</div>
<div class="search-tree" v-show="searchText != '' && showSearch">
<el-tree class="search-menu" node-key="id" ref="employTree" :check-strictly="true" :data="searchTextData" show-checkbox :highlight-current="true" :expand-on-click-node="false" icon-class="open-child" :props="myProps" @check="searchCheck">
<span class="custom-tree-node" :class="data.disableOpen ? 'disable-open' : ''" slot-scope="{ node, data }">
<span>{{ data.label }}</span>
</span>
</el-tree>
</div>
<div class="search-menu-tree" v-show="searchText == ''">
<!-- :default-expanded-keys="defaultOpen" -->
<el-tree class="search-menu" node-key="id" ref="tree" :check-strictly="true" :data="menuData" show-checkbox :highlight-current="true" :expand-on-click-node="false" icon-class="open-child" :props="myProps" :filter-node-method="filterNode" @check-change="getCurrentNode" @node-expand="nodeOpen" @node-collapse="nodeClose" @node-click="handleNodeClick">
<span class="custom-tree-node" :class="data.disableOpen ? 'disable-open' : ''" slot-scope="{ node, data }">
<span>{{ data.label }}</span>
<span class="open-btn" v-if="data.childrens">
<el-button @click="nodeOpen(data, node)" :disabled="data.disableOpen" type="text" size="small">{{ data.handleWord }}</el-button>
</span>
</span>
</el-tree>
</div>
</div>
</div>
<div class="selected-area t-a-select">
<p class="title">
已选
<a class="J_del-all" @click="delSelected('empty')">全部清除</a>
</p>
<div class="tree-div">
<ul class="selected-list">
<template v-if="selectedList.length > 0">
<li v-for="li in selectedList" class="list group-li" :class="li.groupId ? 'group-li' : 'person-li'" :key="li.id + li.label">
<div class="label"><i class="iconfont" :class="li.groupId ? 'icon-tongshi-zuzhijiagou' : 'icon-chengyuan'"></i>{{ li.label }}</div>
<div class="close-btn" @click="delSelected(li)">
<i class="el-icon-close"></i>
</div>
</li>
</template>
</ul>
</div>
</div>
</div>
<div class="btn-box t-rt p-b-10">
<el-button @click="treeSet.dialogVisible = false">取消</el-button>
<el-button type="primary" @click="submitSelected">确定</el-button>
</div>
</el-dialog>
</template>
<script>
// import { formatTreeData, deepCopy } from '@/utils/index';
import { getRequest } from '@/api/api';
import { _debounce, _throttle } from '@/common/js/public';
export default {
name: 'vue-select-employee',
props: {
treeSet: {
type: Object,
default() {
return {
isSelectPerson: true, // 是否选人
dialogVisible: false,
isSingle: false // 是否单选
};
}
},
treeData: {
// 树形菜单数据
type: Object,
default() {
return {};
}
},
onlyGroup: {
// 仅显示的分组id，如果数组为空或不传视为默认显示全部
type: Array,
default() {
return [];
}
},
onlyPerson: {
// 是否只显示人
type: Boolean,
default: false
},
defaultSelection: {
// 回显数据，[{id: 222, label: "222"}] id 和 label必传
type: [Object, Array],
default() {
return [];
}
},
changed: {
//同一页面多个场景使用组建，切换场景时要传一个changed字符串告诉组建场景已切换，进行重组数据
type: [String, Number],
default: ''
},
appScene: {
// 使用场景
type: [String, Number],
default: ''
}
},
data() {
return {
searchText: '', // 搜索关键词
searchTextData: [],
searchTextDataCopy: [],
showSearch: false,
myProps: {
children: 'childrens',
label: 'label',
disabled: 'disabled'
},
menusObj: {},
menuData: [],
defaultOpen: [], // 默认展开节点
selectedList: [] // 已选节点
};
},
methods: {
/**
* 关闭对话框
*/
handleClose(done) {
this.searchText = '';
done();
},
/**
* 输入搜索
*
*/
toInput: _debounce(function(e, value) {
let that = this;
that.copyData = JSON.parse(JSON.stringify(that.selectedList));
if (value == '') {
that.showSearch = false;
return false;
}
that.searchTextData = [];
that.getSearchData();
}, 500),
/**
* 获取搜索数据
*
*/
getSearchData() {
let that = this;
if (that.searchText == '') {
return false;
}
let mergeData = that.searchTextDataCopy.filter(ele => {
if (that.onlyPerson) {
return (ele.type == 1 && ele.name.includes(that.searchText)) || (ele.type == 1 && ele.phoneNumber.includes(that.searchText));
} else if (that.treeSet.isSelectPerson) {
return (ele.type == 1 && ele.name.includes(that.searchText)) || (ele.type == 1 && ele.phoneNumber.includes(that.searchText)) || (ele.name.includes(that.searchText) && ele.type == 2 && ele.hasPression == 1);
} else {
return ele.type == 2 && ele.name.includes(that.searchText) && ele.hasPression == 1;
}
});
that.searchTextData = JSON.parse(JSON.stringify(mergeData));
that.showSearch = true;
},
/**
* 获取分组架构
*/
getGroupData() {
let that = this;
let params = {
isStoreGroup: 0,
appScene: that.appScene
};
getRequest('/haoban-manage-web/dept/deptListForCompany', params)
.then(res => {
let treeData = [];
let personData = [];
if (res.data.errorCode == 1) {
treeData = JSON.parse(JSON.stringify(res.data.result.departmentList)) || [];
personData = JSON.parse(JSON.stringify(res.data.result.searchList)) || [];
that.formatGroupData(treeData, personData);
let middleData = [...res.data.result.departmentList, ...res.data.result.searchList];
middleData.forEach(ele => {
ele.label = ele.name; // 新增
ele.id = ele.groupId || ele.employeeClerkId; // 新增
});
that.searchTextDataCopy = middleData;
}
})
.catch(e => {});
},
formatGroupData(treeData, personData) {
let that = this;
let data = treeData;
let employees = personData;
let copyData = data;
// let copyData = JSON.parse(JSON.stringify(data));
let onlyGroup = that.onlyGroup;
that.menuData = [];
that.defaultOpen = [];
that.menusObj = {};
data.forEach(group => {
group.allClerks = null;
group.childrens = null;
group.label = group.name || '';
group.id = group.groupId || '';
group.handleWord = '展开';
let allClerks = [];
let arr = [];
if (onlyGroup.length > 0) {
// 如果设置只显示某几个分组的情况，默认展开
if (onlyGroup.indexOf(group.groupId) > -1) {
group.disableOpen = false;
group.disabled = true;
}
} else {
group.disabled = that.onlyPerson ? true : group.hasPression == 1 ? false : true;
}
copyData.forEach(cG => {
// 根据groupId 和 parentId排列层级关系
cG.label = cG.name || '';
cG.id = cG.groupId || '';
cG.disableOpen = false;
cG.handleWord = '展开';
if (onlyGroup.length > 0) {
if (onlyGroup.indexOf(cG.groupId) > -1) {
cG.disableOpen = false;
cG.disabled = true;
if (cG.parentId == group.groupId) {
arr.push(cG);
}
}
} else {
cG.disabled = that.onlyPerson ? true : cG.hasPression == 1 ? false : true;
if (cG.parentId == group.groupId) {
arr.push(cG);
}
}
});
/* eslint-disable */
if (that.treeSet.isSelectPerson && group.hasPression == 1)
employees.forEach(person => {
// 如果需要显示人，需要将人通过employeeClerkId 和 groupId组装谁
person.label = person.name;
person.id = person.employeeClerkId;
if (person.departmentId == group.groupId) {
arr.push(person);
allClerks.push(person);
}
that.menusObj[person.id] = person;
});
/* eslint-disable */
if (arr.length > 0) group.childrens = arr;
group.allClerks = allClerks; // 当前分组下所有（包括子分组）的人，暂时没啥用
if (onlyGroup.length > 0) {
if (onlyGroup.indexOf(group.groupId) > -1) {
group.hasLoad = true;
group.handleWord = '展开';
that.defaultOpen.push(group.id);
if (onlyGroup.indexOf(group.parentId) < 0) {
that.menuData.push(group);
}
}
} else {
if (group.level == 0) {
group.disabled = that.onlyPerson ? true : group.hasPression == 1 ? false : true;
// !(group.childrens == null || group.childrens.length == 0);
group.hasLoad = true;
that.menuData = [group];
that.defaultOpen.push(group.id);
group.handleWord = '展开';
// console.log(group);
}
}
that.menusObj[group.id] = group;
});
if (that.defaultSelection && that.treeSet.dialogVisible) {
that.renderDefault();
}
},
/**
* 树形菜单选择
*/
handleNodeClick(obj, node) {
this.$emit('handleTreeSelection', obj, node, 'node');
},
/**
* 获取当前复选框状态改变的节点，如果被选中，将禁用展开
*/
getCurrentNode(data, ifChecked) {
data.disableOpen = ifChecked;
this.selectedList = this.$refs.tree.getCheckedNodes();
if (this.treeSet.isSingle && this.selectedList.length > 1) {
let index = this.selectedList.indexOf(data);
this.selectedList.splice(1 - index, 1);
this.$refs.tree.setCheckedNodes(this.selectedList);
}
},
/**
* 搜索 tree 选择
*
*/
searchCheck: _throttle(function(obj, checkObj) {
let that = this;
if (checkObj.checkedKeys.includes(obj.id)) {
that.selectedList.push(obj);
let copySelectedList = JSON.parse(JSON.stringify(that.selectedList));
let midData = [];
copySelectedList.forEach((ele, index) => {
if (ele.id != obj.id) {
midData.push(ele);
}
});
midData.push(obj);
that.selectedList = midData;
that.$refs.tree.setCheckedKeys(that.selectedList.map(ele => ele.id));
if (that.treeSet.isSingle && that.selectedList.length > 1) {
that.selectedList = [obj];
that.$refs.tree.setCheckedKeys([obj.id]);
that.$refs.employTree.setCheckedKeys([obj.id]);
}
} else {
let copySelectedList = JSON.parse(JSON.stringify(that.selectedList));
let midData = [];
copySelectedList.forEach((ele, index) => {
if (ele.id != obj.id) {
midData.push(ele);
}
});
that.selectedList = midData;
that.$refs.tree.setCheckedKeys(that.selectedList.map(ele => ele.id));
if (that.treeSet.isSingle && that.selectedList.length > 1) {
that.selectedList = [];
}
}
this.$forceUpdate();
}, 100),
/**
* 节点展开时，禁用复选框
*/
nodeOpen(data, self) {
// data.disabled = true;
// data.disableOpen = true;
data.handleWord = '收起';
// data.disableOpen = false;
},
/**
* 节点关闭时，取消复选框的禁用
*/
nodeClose(data, node, self) {
// data.disableOpen = true;
data.disabled = this.onlyPerson ? true : data.hasPression != 1;
data.handleWord = '展开';
// data.disableOpen = false;
},
/**
* 关键词搜索
*/
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1 || (data.phoneNumber || '').indexOf(value) !== -1;
},
/**
* 删除已选项
*/
delSelected(obj) {
if (obj == 'empty') {
this.$refs.tree.setCheckedKeys([]);
this.$refs.employTree.setCheckedKeys([]);
this.selectedList = [];
} else {
let index = this.selectedList.indexOf(obj);
this.selectedList.splice(index, 1);
this.$refs.tree.setCheckedNodes(this.selectedList);
this.$refs.employTree.setCheckedNodes(this.selectedList);
}
},
/**
* 外抛已选的数据
*/
submitSelected() {
this.$emit('handleSelectedList', this.treeSet.isSingle ? this.selectedList[0] : this.selectedList);
this.treeSet.dialogVisible = false;
this.searchText = '';
},
/**
* 渲染回显数据
*/
renderDefault() {
let list = this.defaultSelection;
this.$nextTick(() => {
this.selectedList = list;
this.$refs.tree.setCheckedNodes(list);
list.forEach(li => {
if (li.employeeClerkId) {
this.defaultOpen = [li.departmentId];
} else {
this.defaultOpen.push(this.menusObj[li.id].parentId);
}
});
});
}
},
mounted() {
this.getGroupData();
},
watch: {
treeSet: {
handler(newValue, oldValue) {
if (newValue.dialogVisible) {
this.renderDefault();
}
},
deep: true
},
changed() {
this.getGroupData(); // 监听到场景变化，重新渲染数据
}
},
destroyed() {
this.searchText = '';
}
};
</script>
<style lang="scss">
.p-b-10 {
padding-bottom: 10px;
}
.transfer-area {
display: flex;
margin-bottom: 40px;
.t-a-select {
width: 300px;
height: 415px;
background: rgba(255, 255, 255, 1);
border: 1px solid rgba(220, 223, 230, 1);
border-radius: 4px;
overflow: hidden;
&:first-child {
margin-right: 20px;
}
> .title {
width: 100%;
height: 42px;
line-height: 42px;
background: rgba(245, 247, 250, 1);
border-bottom: 1px solid rgba(220, 223, 230, 1);
border-radius: 4px;
text-indent: 15px;
color: #303133;
font-size: 16px;
.J_del-all {
font-size: 14px;
color: #409eff;
float: right;
cursor: pointer;
margin-right: 15px;
}
}
.tree-div {
width: 100%;
height: 373px;
overflow: auto;
padding: 15px;
box-sizing: border-box;
.search-menu {
margin-top: 20px;
color: #606266;
font-size: 14px;
min-width: 100%;
display: inline-block !important;
.el-tree-node {
.el-tree-node__content {
height: 36px;
position: relative;
.el-tree-node__expand-icon {
position: absolute;
right: 0;
top: 0;
width: 36px;
height: 36px;
padding: 0;
box-sizing: border-box;
}
.custom-tree-node {
flex: 1;
height: 100%;
line-height: 36px;
.open-btn {
width: 50px;
height: 14px;
color: #409eff;
float: right;
text-align: right;
border-left: 1px solid #dcdfe6;
margin-top: 11px;
line-height: 14px;
}
&.disable-open {
z-index: 999;
}
}
&:hover {
background: none;
}
}
}
}
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
background: none;
}
}
.selected-list {
.list {
padding: 12px 0;
display: flex;
.label {
flex: 1;
.iconfont {
color: #409eff;
margin-right: 5px;
}
}
.close-btn {
width: 16px;
height: 16px;
line-height: 18px;
text-align: center;
cursor: pointer;
border-radius: 100%;
font-size: 8px;
vertical-align: middle;
&:hover {
color: #fff;
background: #909399;
}
}
}
}
}
}
</style>
src/components/common/vueSelectStore.vue deleted 100644 → 0
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2019-02-19 12:20:38
* @LastEditors: 无尘
* @LastEditTime: 2019-10-30 15:09:38
-->
<template>
<el-dialog :title="selectType == 'all' ? '选择所有' : selectType == 'person' ? '选择人员' : selectType == 'store' ? '选择门店' : selectType == 'group' ? '选择部门' : '选择部门/门店'" width="660px" :visible.sync="treeSet.dialogVisible" :before-close="handleClose">
<div class="transfer-area">
<div class="select-area t-a-select">
<p class="title">选择</p>
<div class="tree-div">
<div class="input-container">
<el-input v-model="searchText" placeholder="请输入内容" @keyup.native="value => toInput(e, searchText)"></el-input>
</div>
<div class="select-div" style="width: 100%;">
<el-select v-model="brandSelection" :disabled="(!!currentBrand && currentBrand != '-1' ? true : false) || (treeSet.storeType == 'addClerk' ? true : false)" placeholder="请选择品牌" @change="selectBrand" style="width: 100%;margin-top:20px;">
<el-option v-for="(item, index) in brands" :key="item.id" :label="item.label" :value="index">
{{ item.label }}
</el-option>
</el-select>
</div>
<div class="search-tree" v-show="searchText != '' && showSearch">
<el-tree class="search-menu" node-key="id" ref="searchTree" :check-strictly="true" :data="searchTextData" show-checkbox :highlight-current="true" :expand-on-click-node="false" icon-class="open-child" :props="myProps" @check="searchCheck">
<span class="custom-tree-node" :class="data.disableOpen ? 'disable-open' : ''" slot-scope="{ node, data }">
<span>{{ data.label }}</span>
</span>
</el-tree>
</div>
<div class="search-menu-tree" v-show="searchText == ''">
<!-- :default-expanded-keys="defaultOpen" -->
<el-tree class="search-menu" node-key="id" ref="tree" :check-strictly="true" :data="menuData" show-checkbox :highlight-current="true" :expand-on-click-node="false" icon-class="open-child" :props="myProps" :filter-node-method="filterNode" @check-change="getCurrentNode" @node-expand="nodeOpen" @node-collapse="nodeClose" @node-click="handleNodeClick">
<span class="custom-tree-node" :class="data.disableOpen ? 'disable-open' : ''" slot-scope="{ node, data }">
<span>{{ data.label }}</span>
<div class="open-btn" v-if="!!data.childrens">
<!-- && !!data.childrens[0].groupId" && !!data.childrens.length-->
<el-button :datatype="data.disableOpen" @click.self.prevent="nodeOpen(data, node)" :disabled="data.disableOpen" type="text" size="small">下级</el-button>
</div>
</span>
</el-tree>
</div>
</div>
</div>
<div class="selected-area t-a-select">
<p class="title">
已选
<a class="J_del-all" @click="delSelected('empty')">全部清除</a>
</p>
<div class="tree-div">
<ul class="selected-list">
<template v-if="selectedList.length > 0">
<li v-for="li in selectedList" class="list group-li" :class="li.groupId ? 'group-li' : 'person-li'" :key="li.id + li.label">
<div class="label"><i class="iconfont" :class="li.groupId || li.type == 2 || li.type == 3 ? 'icon-tongshi-zuzhijiagou' : 'icon-chengyuan'"></i>{{ li.label }}</div>
<div class="close-btn" @click="delSelected(li)">
<i class="el-icon-close"></i>
</div>
</li>
</template>
</ul>
</div>
</div>
</div>
<div class="btn-box t-rt p-b-10">
<el-button @click="treeSet.dialogVisible = false">取消</el-button>
<el-button type="primary" @click="submitSelected">确定</el-button>
</div>
</el-dialog>
</template>
<script>
import { getRequest } from '@/api/api';
import errMsg from '@/common/js/error';
import { _throttle, _debounce } from '@/common/js/public';
export default {
name: 'vue-select-employee',
props: {
treeSet: {
type: Object,
default() {
return {
isSelectPerson: true,
dialogVisible: false,
isSingle: false // 是否单选
};
}
},
currentBrand: {
// 当前传入的品牌 id , 品牌的 brandId 外部传进来的需要是 groupId
type: String,
default() {
return '';
}
},
selectType: {
type: String,
default: 'all' // all 所有都可选, person 只选人， store 只选门店, group 只选分组, group-store 选门店/分组
},
forbidenList: {
// 传入需要禁用的分组的id
type: Array,
default() {
return [];
}
},
visibleNodes: {
type: [Array, String], // 设置仅可见的节点，如果不传则默认展示所有
default() {
return '';
}
},
defaultList: {
// 回显数据
type: Array,
default() {
return [];
}
},
appScene: {
// 使用场景
type: [String, Number],
default: ''
}
},
data() {
return {
searchText: '',
searchTextData: [],
showSearch: false,
myProps: {
children: 'childrens',
label: 'label',
disabled: 'disabled'
},
menuData: [],
menusObj: {},
defaultOpen: [], // 默认展开节点的 key 的数组
selectedList: [], // 已经选择的数据集合
copyData: [], // 搜索的时候 copy 已选
brandSelection: 0, // 看了代码发现这里是取的索引值,不是品牌 id
brands: [],
hasOpened: false,
firstRender: true, // 判断是否是第一次渲染数据，用于切换品牌时判断
renderFlag: true, // 应用判断渲染
storeList: []
};
},
methods: {
/**
* 关闭对话框
*/
handleClose(done) {
this.searchText = '';
done();
},
/**
* 输入搜索
*
*/
toInput: _debounce(function(e, value) {
let that = this;
that.copyData = JSON.parse(JSON.stringify(that.selectedList));
if (value == '') {
that.showSearch = false;
return false;
}
that.searchTextData = [];
that.getSearchData();
}, 500),
/**
* 获取搜索数据
*
*/
getSearchData() {
let that = this;
if (that.searchText == '') {
return false;
}
let params = {
keyWord: that.searchText,
brandId: that.brands[that.brandSelection].brandId,
type: that.selectType,
appScene: that.appScene
};
getRequest('/haoban-manage-web/emp/plugin_search', params)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
that.showSearch = true;
resData.result.departmentList.forEach(ele => {
ele.id = ele.groupId;
});
resData.result.storeList.forEach(ele => {
ele.id = ele.storeId;
});
resData.result.searchList.forEach(ele => {
ele.id = ele.employeeClerkId;
});
let mergeData = [...resData.result.departmentList, ...resData.result.storeList, ...resData.result.searchList];
mergeData.forEach(ele => {
ele.label = ele.name || ele.storeName; // 新增
// ele.id = ele.groupId || ele.storeId || ele.employeeClerkId; // 新增
});
that.searchTextData = mergeData;
that.$nextTick(() => {
// that.$refs.searchTree.setCheckedKeys(that.copyData.map(ele => ele.id));
});
} else {
errMsg.errorMsg(resData);
}
})
.catch(e => {});
},
/**
* 获取分组架构
*/
getGroupData() {
let that = this;
let params = {
isStoreGroup: 1,
appScene: that.appScene
};
getRequest('/haoban-manage-web/dept/deptList', params)
.then(res => {
let treeData = [];
if (res.data.errorCode == 1) {
treeData = res.data.result || [];
that.formatGroupData(treeData);
}
})
.catch(e => {});
},
/**
* 处理获取分组数据
*/
formatGroupData(data) {
let that = this;
let selType = that.selectType; // 传入：选择门店的类型（all 所有都可选, person 只选人，store 只选门店, group 只选分组, group-store 选门店/分组）
let fbdList = that.forbidenList; // 传入： 需要禁用的分组的 id
that.menusObj = {};
data.forEach(group => {
group.label = group.name || ''; // 新增
group.id = group.groupId || ''; // 新增
group.disableOpen = false; // 新增
let isForbiden = !!(fbdList.indexOf(group.id) > -1); // 判断当前分组是否在禁用分组列表内
group.disabled = group.hasPression != 1 || selType == 'person' || selType == 'store' || isForbiden; // 新增
let arr = [];
data.forEach(child => {
child.disableOpen = false;
let childForbid = fbdList.indexOf(child.id) > -1;
child.disabled = child.hasPression != 1 || selType == 'person' || selType == 'store' || childForbid;
if (child.parentId == group.groupId) {
arr.push(child);
}
});
// 把简单 json 数组转换成 父子关系的 json
if (arr.length > 0) {
group.childrens = arr;
} else if (group.level != 0 && that.selectType != 'group') {
group.childrens = [{ label: '' }]; // 默认有子级 { label: '' }
group.isLast = true;
}
if (group.level == 0) {
// 禁用分组 (group.childrens && group.childrens.length > 0) ||
group.disabled = group.hasPression != 1 || selType == 'person' || selType == 'store' || isForbiden;
// console.log(group.disabled, group.childrens && group.childrens.length > 0, group.hasPression != 1 || selType == 'person' || selType == 'store' || isForbiden);
group.hasLoad = true;
that.brands.push(group);
if (group.childrens) {
that.defaultOpen.push(group.id);
}
}
that.menusObj[group.id] = group;
});
let brandSelectionId = that.treeSet.groupId ? that.treeSet.groupId : that.brands[0].id;
that.brands.forEach((el, idx) => {
if (el.id == brandSelectionId || el.brandId == brandSelectionId) {
that.brandSelection = idx;
}
});
that.menuData = [that.brands[that.brandSelection]]; // 设置树形结构数据
if (selType != 'group') {
// && that.treeSet.storeType != 'addClerk'
this.getStoreList(that.menuData[0]);
}
},
/**
* 树形菜单选择
*/
handleNodeClick(obj, node) {
this.$emit('handleTreeSelection', obj, node, 'node');
},
/**
* 去重
*
*/
deleteRepeat(arr) {
let hash = {};
arr = arr.reduce(function(item, next) {
hash[next.id] ? '' : (hash[next.id] = true && item.push(next));
return item;
}, []);
return arr;
},
/**
* 获取当前复选框状态改变的节点，如果被选中，将禁用展开
*/
getCurrentNode: _throttle(function(data, ifChecked, son) {
// console.log('复选框状态变化:', data, ifChecked, son); // 之前会重复触发，原来是每次变化触发了监听 defaultList 方法
let that = this;
data.disableOpen = ifChecked;
if (ifChecked) {
// 选择
that.$nextTick(() => {
// 有一个重复的问题
that.selectedList.push(data);
let copySelectedList = JSON.parse(JSON.stringify(that.selectedList));
let midData = [];
copySelectedList.forEach((ele, index) => {
if (ele.id != data.id) {
midData.push(ele);
}
});
midData.push(data);
that.selectedList = midData;
// console.log(that.selectedList);
that.$refs.tree.setCheckedKeys(that.selectedList.map(ele => ele.id));
if (that.treeSet.isSingle && that.selectedList.length > 1) {
that.selectedList = [data];
that.$refs.tree.setCheckedKeys([data.id]);
}
});
} else {
// 取消选择
that.$nextTick(() => {
let copySelectedList = JSON.parse(JSON.stringify(that.selectedList));
let midData = [];
copySelectedList.forEach((ele, index) => {
if (ele.id != data.id) {
midData.push(ele);
}
});
that.selectedList = midData;
that.$refs.tree.setCheckedKeys(that.selectedList.map(ele => ele.id));
if (that.treeSet.isSingle && that.selectedList.length > 1) {
that.selectedList = [];
}
});
}
}, 100),
/**
* 搜索 tree 选择
*
*/
searchCheck: _throttle(function(obj, checkObj) {
let that = this;
if (checkObj.checkedKeys.includes(obj.id)) {
that.selectedList.push(obj);
let copySelectedList = JSON.parse(JSON.stringify(that.selectedList));
let midData = [];
copySelectedList.forEach((ele, index) => {
if (ele.id != obj.id) {
midData.push(ele);
}
});
midData.push(obj);
that.selectedList = midData;
that.$refs.tree.setCheckedKeys(that.selectedList.map(ele => ele.id));
if (that.treeSet.isSingle && that.selectedList.length > 1) {
that.selectedList = [obj];
that.$refs.tree.setCheckedKeys([obj.id]);
that.$refs.searchTree.setCheckedKeys([obj.id]);
}
} else {
let copySelectedList = JSON.parse(JSON.stringify(that.selectedList));
let midData = [];
copySelectedList.forEach((ele, index) => {
if (ele.id != obj.id) {
midData.push(ele);
}
});
that.selectedList = midData;
that.$refs.tree.setCheckedKeys(that.selectedList.map(ele => ele.id));
if (that.treeSet.isSingle && that.selectedList.length > 1) {
that.selectedList = [];
}
}
}, 100),
/**
* 节点展开时，禁用复选框
*/
nodeOpen(data, node) {
// 如果是第一级（顶级分组即品牌）展开下级，禁用复选框
if (data.level == 0) {
// data.disabled = true;
}
// 如果不是第一级不是门店，展开下级，禁用复选框
if (data.level != 0 && data.type != 1) {
// data.disabled = true;
}
// 如果是首次追加的空数据，先把 childrens 清空;
if (!!data.childrens.length && data.childrens[0].label == '') {
data.childrens = [];
this.$forceUpdate();
}
// data.disabled = true;
// console.log('节点展开时，禁用复选框:', this.menuData, data, !data.hasLoad, this.selectType != 'group', this.treeSet.storeType, this.treeSet.openNextBool);
// openNextBool 没有设置 ， 并且当前选择不是选分组， 并且不是添加店员
if (!data.hasLoad && this.selectType != 'group' && this.treeSet.storeType != 'addClerk' && !this.treeSet.openNextBool) {
this.getStoreList(data, 'openFlag');
data.hasLoad = true; // 标记为已经请求过子分组数据，下次展开不再请求
}
// openNextBool 已经设置 ， 并且当前选择不是选分组， 并且不是添加店员
if (!data.hasLoad && this.selectType != 'group' && this.treeSet.storeType != 'addClerk' && this.treeSet.openNextBool) {
this.getStoreList(data, 'openFlag');
data.hasLoad = true; // 标记为已经请求过子分组数据，下次展开不再请求
}
if (this.treeSet.storeType == 'addClerk' && !data.hasLoad) {
this.getStoreList(data, 'openFlag');
data.hasLoad = true; // 标记为已经请求过子分组数据，下次展开不再请求
}
},
/**
* 获取门店列表
*/
getStoreList(parent, flag) {
let that = this;
let params = {
storeGroupId: parent.groupId,
showChild: 0,
pageNumber: 1,
pageSize: 1000000000, // 因为获取门店列表做了分页，所以取了一个极限值
showType: 2,
appScene: that.appScene
};
getRequest('/haoban-manage-web/store/findSimplePage', params)
.then(res => {
let storeList = [];
let resData = res.data;
if (resData.errorCode == 1) {
if (parent.level != 0) {
/* eslint-disable */
// console.log(!!resData.result.list && !!flag, parent, parent.hasPression, that.selectType);
parent.disabled = (!!resData.result.list && !!resData.result.list.length && !!flag) || parent.hasPression != 1 || that.selectType == 'person' || that.selectType == 'store' ? true : false;
}
that.$forceUpdate();
storeList = resData.result.list == null ? [] : resData.result.list;
that.storeList = resData.result.list == null ? [] : resData.result.list;
if ((!resData.result.list || !resData.result.list.length) && !!parent.childrens.length && parent.childrens[0].label == '') {
// 如果点击下级，不存在门店或店员，childrens = []
// console.log(parent);
// if (!!parent.childrens.length && parent.childrens[0].label == '') {
parent.childrens = [];
// }
that.$forceUpdate();
return false;
}
that.formatStoreList(storeList, parent);
if (that.$refs.tree) {
that.renderDefault();
}
that.renderFlag = false; // 应用中使用：设置默认参数，默认情况传入品牌的 groupId ,不再去请求门店数据，切换的时候再去请求
}
})
.catch(e => {});
},
/**
* 处理获取门店列表的数据
*/
formatStoreList(list, parent) {
let that = this;
let type = this.selectType;
// console.log('处理获取门店列表的数据:' ,list, parent)
list.forEach(li => {
li.id = li.storeId;
li.label = li.storeName;
li.hasLoad = true;
li.disabled = !!(type == 'person');
if (li.clerks.length && (type == 'all' || type == 'person')) {
li.clerks.forEach(clerks => {
clerks.label = clerks.name;
clerks.id = clerks.employeeClerkId;
});
li.childrens = li.clerks;
}
});
that.appendStore(list, parent);
},
// 追加当前门店
appendStore(list, parent) {
let that = this;
if (parent.isLast) {
// 应该是判断是不是最后一层
parent.childrens = list;
} else {
// 现在问题是每次都追加数据了
let arr = !!parent.childrens ? parent.childrens : [];
arr = arr.concat(list);
let hash = {};
// 去重数组对象
arr = arr.reduce(function(item, next) {
hash[next.id] ? '' : (hash[next.id] = true && item.push(next));
return item;
}, []);
parent.childrens = JSON.parse(JSON.stringify(arr));
// parent.isLast = true; // 追加后重新设置isLast
that.$forceUpdate();
}
if (parent.childrens.length > 0 && this.firstRender) {
this.firstRender = false;
this.defaultOpen.push(parent.id);
}
that.$forceUpdate();
//that.$nextTick(() => {
// that.menuData = JSON.parse(JSON.stringify(that.menuData));
//}); // this.renderDefault();
// console.log(that.menuData)
},
/**
* 节点关闭时，取消复选框的禁用
*/
nodeClose(data, node, self) {
let selType = this.selectType;
if (data.storeId) {
data.disabled = selType == 'person';
} else {
let fbdList = this.forbidenList;
let isForbiden = fbdList.indexOf(data.id) > -1;
data.disabled = data.hasPression != 1 || isForbiden || selType == 'store' || selType == 'person';
}
},
/**
* 关键词搜索
*/
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1 || (data.phoneNumber || '').indexOf(value) !== -1;
},
/**
* 删除已选项
*/
delSelected(obj) {
let that = this;
if (obj == 'empty') {
that.$refs.tree.setCheckedKeys([]);
that.$refs.searchTree.setCheckedKeys([]);
that.selectedList = [];
} else {
let index = that.selectedList.indexOf(obj);
that.selectedList.splice(index, 1);
that.$refs.tree.setCheckedNodes(that.selectedList);
that.$refs.searchTree.setCheckedNodes(that.selectedList);
}
},
/**
* 外抛已选的数据
*/
submitSelected(e) {
let that = this;
that.searchText = '';
e.preventDefault();
that.$emit('handleSelectedList', that.selectedList);
that.treeSet.dialogVisible = false;
},
/**
* 选择品牌
*/
async selectBrand(val) {
let that = this;
await that.getSearchData();
that.$nextTick(() => {
that.menuData = [that.brands[val]]; // 默认品牌数据为分组第一层数据
that.brands[val].hasLoad = true;
that.firstRender = true;
if (that.selectType != 'group') {
// 如果选择的不是 group （即：只选分组）
that.getStoreList(that.menuData[0]);
}
that.renderDefault();
});
},
/**
* 渲染回显数据
*/
renderDefault() {
let that = this;
that.$nextTick(() => {
let list = that.selectedList;
if (!!list.length) {
that.$refs.tree.setCheckedNodes(list);
}
list.forEach(item => {
if (item.employeeClerkId) {
that.defaultOpen = [item.storeId];
} else if (!item.storeId && !item.employeeClerkId) {
if (!!that.menusObj[item.id]) {
that.defaultOpen.push(that.menusObj[item.id].parentId);
}
}
});
});
}
},
beforeMount() {
this.getGroupData();
},
/* eslint-disable */
mounted() {
// this.renderDefault();
// 为了切换路由后可以重新选择品牌
const that = this;
that.selectedList = JSON.parse(JSON.stringify(that.defaultList));
if (!!that.currentBrand && that.currentBrand != '-1') {
const mountTime = setTimeout(() => {
that.brands.forEach((ele, index) => {
if (ele.id == that.currentBrand || ele.brandId == that.currentBrand) {
// 目前有些问题，brands 中只有groupId ，没有 brandId
that.brandSelection = index; // 之前 that.brandSelection 都是取得索引值，不是 id 值
}
});
that.selectBrand(that.brandSelection);
clearTimeout(mountTime);
}, 500);
}
},
watch: {
/* searchText(newK, old) {
this.$refs.tree.filter(newK);
}, */
defaultList: {
handler(newValue, oldValue) {
// 每次选择确认后，发现后端接口返回的数据和，这时候确认后返回的数据是不一样的；
// console.log("defaultList 变化了:",newValue,oldValue); // 发现每次复选框状态变了这里也触发了，所以修改
const that = this;
that.selectedList = JSON.parse(JSON.stringify(newValue));
if (!!that.$refs.tree) {
that.renderDefault();
}
}
},
treeSet: {
handler(newValue, oldValue) {
let that = this;
if (newValue.dialogVisible && !that.hasOpened) {
that.hasOpened = true;
that.renderDefault();
}
// 搜索的时候如果传入的有 groupId
if (!!newValue.groupId) {
that.brands.forEach((ele, index) => {
if (ele.brandId == newValue.groupId || ele.id == newValue.groupId) {
// 目前有些问题，brands 中只有groupId ，没有 brandId
that.brandSelection = index; // 之前 that.brandSelection 都是取得索引值，不是 id 值
}
});
that.$nextTick(function() {
that.selectBrand(that.brandSelection);
});
}
// 处理关闭时第一级为禁用的情况,再次打开第一级禁用了(选人的需要禁用分组)
if (!!that.menuData.length && that.selectType != 'person' && that.selectType != 'store' && !that.currentBrand && !!newValue.groupId) {
that.menuData[0].disabled = false;
}
},
deep: true
},
// 应用中使用到，需要禁止选择品牌，品牌的 brandId 外部传进来的需要是 groupId，然后对比当前组件内的 groupId；
currentBrand: function(newData, oldData) {
let that = this;
if (!!newData && newData != '-1') {
let currentTime = setTimeout(() => {
that.brands.forEach((ele, index) => {
if (ele.id == newData || ele.brandId == newData) {
// 目前有些问题，brands 中只有groupId ，没有 brandId
that.brandSelection = index; // 之前 that.brandSelection 都是取得索引值，不是 id 值
}
});
that.selectBrand(that.brandSelection);
clearTimeout(currentTime);
}, 500);
if (!!that.menuData.length && that.selectType != 'person' && that.selectType != 'store') {
that.menuData[0].disabled = false;
}
}
}
},
destroyed() {
this.brandSelection = '';
this.searchText = '';
}
};
</script>
<style lang="scss">
.p-b-10 {
padding-bottom: 10px;
}
.transfer-area {
display: flex;
margin-bottom: 40px;
.t-a-select {
width: 300px;
height: 415px;
background: rgba(255, 255, 255, 1);
border: 1px solid rgba(220, 223, 230, 1);
border-radius: 4px;
overflow: hidden;
&:first-child {
margin-right: 20px;
}
> .title {
width: 100%;
height: 42px;
line-height: 42px;
background: rgba(245, 247, 250, 1);
border-bottom: 1px solid rgba(220, 223, 230, 1);
border-radius: 4px;
text-indent: 15px;
color: #303133;
font-size: 16px;
.J_del-all {
font-size: 14px;
color: #409eff;
float: right;
cursor: pointer;
margin-right: 15px;
}
}
.tree-div {
width: 100%;
height: 373px;
overflow: auto;
padding: 15px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
.search-menu {
margin-top: 20px;
color: #606266;
font-size: 14px;
min-width: 100%;
display: inline-block !important;
.el-tree-node {
.el-tree-node__content {
position: relative;
height: 36px;
max-width: 263px;
overflow: hidden;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
.open-child {
position: absolute;
right: 0;
top: 0;
width: 36px;
height: 36px;
padding: 0;
box-sizing: border-box;
}
.custom-tree-node {
flex: 1;
height: 100%;
line-height: 36px;
.open-btn {
position: absolute;
right: 0px;
top: 0px;
display: block;
width: 50px;
height: 14px;
color: #409eff;
float: right;
text-align: right;
border-left: 1px solid #dcdfe6;
margin-top: 11px;
line-height: 14px;
z-index: 2;
pointer-events: none;
background: #fff;
}
&.disable-open {
z-index: 999;
}
}
&:hover {
background: none;
}
}
}
}
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
background: none;
}
}
.selected-list {
.list {
padding: 12px 0;
display: flex;
.label {
flex: 1;
.iconfont {
color: #409eff;
margin-right: 5px;
}
}
.close-btn {
width: 16px;
height: 16px;
line-height: 18px;
text-align: center;
cursor: pointer;
border-radius: 100%;
font-size: 8px;
vertical-align: middle;
&:hover {
color: #fff;
background: #909399;
}
}
}
}
}
}
</style>
src/components/company/depart-list.vue deleted 100644 → 0
<!--
* @Descripttion : 当前组件信息
* @Author : 无尘
* @Date : 2020-02-13 14:02:22
* @LastEditors: 无尘
* @LastEditTime: 2020-05-19 15:06:22
* @FilePath : \Hapi-demoj:\公司\haoban-3\src\components\company\depart-list.vue
-->
<!--
<depart-list :departObj="departObj" @resetData="resetData" @changeDepart="changeDepart" @addDepart="addDepart"></depart-list>
import departList from '@/components/company/depart-list.vue';
-->
<template>
<div class="depart-list-body">
<div class="depart-name-wrap m-b-20">
<div class="flex flex-space-between">
<div>
<div aria-label="Breadcrumb" role="navigation" class="el-breadcrumb m-b-10">
<span class="el-breadcrumb__item" v-for="(item, index) in navData" :key="index + 'nav'"
><span role="link" class="el-breadcrumb__inner is-link" @click="changeDepart(item, index)"
><span class="el-breadcrumb__inner is-link font-12 color-606266">
{{ item.departmentName }}
</span></span
><i v-if="index != navData.length - 1" class="el-breadcrumb__separator el-icon-arrow-right"></i
></span>
</div>
<div class="depart-name">
<span class="font-16 color-303133 font-w-600">{{ departObj.departmentName }}</span>
<el-popover v-if="!departObj.bindFlag" placement="top" style="min-width: 192px" v-model="nameVisible">
<limitInput :inputWidth="180" :inputValue.sync="departmentName" :holder="'请输入部门名称'" :getByType="'char'" :maxLength="32"> </limitInput>
<div style="text-align: right; margin: 12px 0 0 0">
<el-button size="mini" type="text" @click="cancelMod">取消</el-button>
<el-button type="primary" size="mini" @click="toMod">确定</el-button>
</div>
<span slot="reference"><span class="cursor-pointer iconfont iconchangyongicon- color-909399"></span></span>
</el-popover>
</div>
<div class="depart-id font-12 color-909399">ID：{{ departObj.departmentId }}</div>
</div>
<div class="to-log flex m-t-20">
<el-tooltip content="通讯录日志" placement="top">
<div class="log-icon flex flex-align-center flex-pack-center cursor-pointer " @click="toLog"><span class="font-14 iconfont icontongxunlu color-909399"></span></div>
</el-tooltip>
<div class="to-log-btn font-12 color-2f54eb cursor-pointer" @click="toShowTip">查看帮助提示</div>
</div>
</div>
</div>
<div class="depart-children-list border-box m-t-18">
<div class="depart-children-title"><span class="iconfont iconbumen color-303133"></span><span class="font-16 color-303133 font-w-600 p-l-5">下级部门</span></div>
<div class="depart-condition-wrap flex flex-space-between m-t-20">
<el-input placeholder="请输入部门名称/ID" v-model="searchInput" class="w-274" @keyup.native="value => toInput(value, searchInput)" clearable @clear="clearInput"></el-input>
<el-button type="primary" @click="addChildPart">新建子部门</el-button>
</div>
<div class="m-t-20">
<el-table class="select-table" ref="multipleTable" :data="tableData" tooltip-effect="dark" :style="{ width: '100%', minHeight: tableH }">
<el-table-column class="cursor-pointer" label="部门名称" show-overflow-tooltip>
<template slot-scope="scope"
><div class="cursor-pointer" @click="getChildren(scope.row)">{{ scope.row.departmentName || '--' }}（{{ scope.row.staffCount }}）</div></template
>
</el-table-column>
<el-table-column class="cursor-pointer" prop="" label="企业微信部门ID" show-overflow-tooltip>
<template slot-scope="scope">
<div class="cursor-pointer" @click="getChildren(scope.row)">{{ scope.row.wxDepartmentId || '--' }}</div></template
>
</el-table-column>
<el-table-column class="cursor-pointer" prop="" label="" show-overflow-tooltip>
<template slot-scope="scope">
<div class="cursor-pointer" @click="getChildren(scope.row)"><span class="iconfont iconnavigate_next inline-block cursor-pointer"></span></div>
</template>
</el-table-column>
</el-table>
<div class="block common-wrap__page text-right m-t-24" v-if="tableData.length != 0">
<dm-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize" layout="total, prev, pager, next, jumper" :total="total"> </dm-pagination>
</div>
</div>
</div>
<!-- 新增子部门 -->
<el-dialog width="600px" title="新增子部门" :visible.sync="partVisible" append-to-body :before-close="handleClose">
<el-form :model="partForm" :rules="rules" ref="form" label-width="100px" class="dialog-form">
<el-form-item label="部门名称" prop="departmentName">
<limitInput :inputWidth="440" :inputValue.sync="partForm.departmentName" :holder="'请输入部门名称'" :getByType="'char'" :maxLength="32"> </limitInput>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="cancel('form')">取消</el-button>
<el-button type="primary" @click="submitForm('form')">确定</el-button>
</div>
</el-dialog>
<help-tip v-if="tipShow" @toCloseTip="toCloseTip"></help-tip>
</div>
</template>
<script>
import helpTip from '@/components/company/help-tip.vue';
import { _debounce } from '@/common/js/public';
import { getRequest, postRequest } from '@/api/api';
import errMsg from '@/common/js/error';
import showMsg from '@/common/js/showmsg';
import limitInput from '@/components/limit-input.vue';
export default {
name: 'depart-list',
components: {
limitInput,
helpTip
},
props: {
departObj: {
type: Object,
default() {
return {
departmentId: '',
departmentName: '',
wxDepartmentId: '',
parentId: '',
isStore: '',
staffCount: '',
bindFlag: ''
};
}
}
},
data() {
return {
nameVisible: false,
departmentName: this.departObj.departmentName || '',
searchInput: '',
// 分页参数
currentPage: 1,
pageSize: 10,
total: 0,
tableData: [],
// 新增
partVisible: false,
rules: {
departmentName: [
{
required: true,
message: '请输入部门名称',
trigger: 'blur'
}
]
},
partForm: {
departmentName: ''
},
tipShow: false,
navData: []
};
},
methods: {
changeDepart(item, index) {
const that = this;
if (index == that.navData.length - 1) {
return false;
}
that.$emit('changeDepart', item);
},
/**
* 获取面包屑
*/
toGetNavData() {
const that = this;
let params = {
departmentId: that.departObj.departmentId
};
postRequest('/haoban-manage3-web/department-chain', params)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
that.navData = resData.result || [];
return false;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
},
/**
* 获取同步状态
*/
getStatus() {
const that = this;
return new Promise((resolve, reject) => {
let para = {};
getRequest('/haoban-manage3-web/department-sync-check', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
resolve(resData.result);
return false;
}
resolve(false);
errMsg.errorMsg(resData);
})
.catch(function(error) {
resolve(false);
that.$message.error({
duration: 1000,
message: error.message
});
});
});
},
toLog() {
window.open('/haoban-3/#/syncLog');
},
toShowTip() {
const that = this;
that.tipShow = true;
},
toCloseTip() {
const that = this;
that.tipShow = false;
},
/**
* 取消
*/
cancelMod() {
const that = this;
that.departmentName = '';
that.nameVisible = false;
},
async toMod() {
const that = this;
const tag = await that.getStatus();
if (!!tag && (tag.syncStatus == 0 || tag.syncStatus == 1 || tag.syncStatus == 2 || tag.syncStatus == 3 || tag.syncStatus == 5)) {
showMsg.showmsg('通讯录同步中，暂无法操作', 'warning');
return false;
}
if (!that.departmentName) {
showMsg.showmsg('请输入部门名称！', 'warning');
return false;
}
// let obj = JSON.parse(JSON.stringify(that.departObj));
// obj.departmentName = that.departmentName;
const flag = await that.postMod();
if (!flag) {
return false;
}
that.$emit('resetData', that.departmentName);
that.nameVisible = false;
},
postMod() {
const that = this;
let params = {
parentId: that.departObj.parentDepartmentId,
departmentId: that.departObj.departmentId,
departmentName: that.departmentName
};
return new Promise((resolve, reject) => {
postRequest('/haoban-manage3-web/department-edit', params)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
resolve(true);
showMsg.showmsg('修改成功！', 'success');
return false;
}
resolve(false);
errMsg.errorMsg(resData);
})
.catch(function(error) {
resolve(false);
that.$message.error({
duration: 1000,
message: error.message
});
});
});
},
/**
* 输入
*/
toInput: _debounce(function(e, value) {
const that = this;
that.currentPage = 1;
that.getTableList();
}, 500),
// 搜索清除
clearInput() {
const that = this;
that.currentPage = 1;
that.getTableList();
},
/**
* 获取子部门
*/
getChildren(item) {
const that = this;
that.$emit('changeDepart', item);
// that.currentPage = 1;
// that.getTableList();
},
handleClose(done) {
const that = this;
that.$refs['form'].resetFields();
that.partVisible = false;
done();
},
cancel() {
const that = this;
that.$refs['form'].resetFields();
that.partVisible = false;
},
/**
* 新建子部门
*/
async addChildPart(item) {
const that = this;
const tag = await that.getStatus();
if (!!tag && (tag.syncStatus == 0 || tag.syncStatus == 1 || tag.syncStatus == 2 || tag.syncStatus == 3 || tag.syncStatus == 5)) {
showMsg.showmsg('通讯录同步中，暂无法操作', 'warning');
return false;
}
that.partVisible = true;
},
/**
* 确定授权
*/
submitForm(form) {
const that = this;
that.$refs[form].validate(valid => {
if (valid) {
that.toAddPost();
} else {
return false;
}
});
},
toAddPost() {
const that = this;
let params = {
parentId: that.departObj.departmentId,
departmentName: that.partForm.departmentName
};
postRequest('/haoban-manage3-web/department-add', params)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
showMsg.showmsg('添加成功', 'success');
that.currentPage = 1;
that.getTableList();
// 是否需要更新左侧 tree
that.partVisible = false;
resData.result.children = [];
resData.result.expand = false;
resData.result.level = that.departObj.level + 1;
resData.result.label = resData.result.departmentName;
that.$emit('addDepart', resData.result);
return false;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
},
/**
* 分页---页码变化
*/
handleSizeChange(val) {
const that = this;
that.currentPage = 1;
that.pageSize = val;
that.getTableList();
},
/**
* 分页---当前页变化
*/
handleCurrentChange(val) {
const that = this;
that.currentPage = val;
that.getTableList();
},
/**
* 获取列表数据
*/
getTableList() {
const that = this;
let para = {
parentId: that.departObj.departmentId,
isStore: that.departObj.isStore,
keyWord: that.searchInput || '', // 搜索字段
pageNum: that.currentPage, // 当前页
pageSize: that.pageSize // 一页显示个数
};
getRequest('/haoban-manage3-web/department-list', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
that.tableData = resData.result.list || [];
that.total = resData.result.total;
return false;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
}
},
watch: {
departObj(newData, oldData) {
const that = this;
if (Object.keys(newData)) {
that.departmentName = newData.departmentName || '';
that.currentPage = 1;
that.getTableList();
that.toGetNavData();
}
}
},
mounted() {
const that = this;
if (Object.keys(that.departObj)) {
that.currentPage = 1;
that.getTableList();
that.toGetNavData();
}
}
};
</script>
<style lang="less" scoped>
.m-b-10 {
margin-bottom: 10px;
}
.el-breadcrumb__inner.is-link:hover,
.el-breadcrumb__inner a:hover {
color: #2f54eb;
}
.log-icon {
width: 28px;
height: 28px;
border-radius: 2px;
margin-right: 15px;
span {
color: #c0c4cc;
}
&:hover {
background: rgba(240, 245, 255, 1);
span {
color: #909399;
}
}
}
.to-log-btn {
width: 102px;
height: 28px;
line-height: 28px;
text-align: center;
background: rgba(245, 247, 250, 1);
&:hover {
color: #597ef7;
}
}
.w-274 {
width: 274px;
}
.iconchangyongicon- {
&:hover {
background: #eaedfd;
border-radius: 2px;
}
}
.depart-list-body {
.depart-id {
margin-top: 5px;
}
.depart-children-list {
padding: 16px 10px;
background: #f5f7fa;
}
}
</style>
src/components/company/depart-member.vue deleted 100644 → 0
<!--
* @Descripttion : 当前组件信息
* @Author : 无尘
* @Date : 2020-02-13 14:02:40
* @LastEditors: 无尘
* @LastEditTime: 2020-06-28 11:11:43
* @FilePath : \Hapi-demoj:\公司\haoban-3\src\components\company\depart-member.vue
-->
<!--
<depart-member :departObj="departObj" @resetData="resetData"></depart-member>
import departMember from '@/components/company/depart-member.vue';
-->
<template>
<div class="depart-list-body">
<div class="depart-children-list m-t-20">
<div class="depart-children-title">
<span class="iconfont iconchengyuan color-303133"></span><span class="font-16 color-303133 font-w-600 p-l-5">部门成员</span>
<span class="font-12 color-909399 p-l-10">提示：邀请成员当天对该成员最多发送一次邀请申请</span>
</div>
<div class="depart-condition-wrap flex flex-space-between m-t-20">
<div>
<el-input placeholder="请输入姓名/手机号" v-model="searchInput" class="w-274" @keyup.native="value => toInput(value, searchInput)" clearable @clear="clearInput"></el-input>
<el-select v-model="activeFlag" placeholder="所有状态" class="m-l-6" @change="changeStatus">
<el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
</el-select>
</div>
<div>
<el-button type="primary" plain @click="modifyDepart">调整所在部门</el-button>
<el-button type="primary" plain @click="toInvite('')">邀请</el-button>
<el-button type="danger" plain @click="toDel">删除</el-button>
<el-button type="primary" @click="addMember">新建成员</el-button>
</div>
</div>
<div class="m-t-20">
<el-table class="select-table" ref="multipleDepartTable" :data="tableData" tooltip-effect="dark" :style="{ width: '100%', minHeight: tableH }" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column label="姓名" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.staffName || '--' }}</template>
</el-table-column>
<el-table-column prop="" label="职务" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.postion || '--' }}</template>
</el-table-column>
<el-table-column prop="" label="手机号码" show-overflow-tooltip>
<template slot-scope="scope"
>{{ scope.row.nationCode }}-{{ scope.row.phoneNumber }}</template
>
</el-table-column>
<el-table-column prop="" label="操作" show-overflow-tooltip>
<template slot-scope="scope">
<el-button type="text" @click="showDetail(scope.row)">详情</el-button><el-button v-if="scope.row.activeFlag == 0" type="text" @click="toInvite(scope.row)">邀请</el-button>
</template>
</el-table-column>
</el-table>
<div class="block common-wrap__page text-right m-t-24" v-if="tableData.length != 0">
<dm-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize" layout="total, prev, pager, next, jumper" :total="total"> </dm-pagination>
</div>
</div>
</div>
<add-member v-if="memberVisible" :defaultDepart="defaultDepart" :memberObj="memberObj" @refreshData="refreshData"></add-member>
<mod-depart v-if="modVisible" :selectObj="multipleSelection" @modDepartData="modDepartData"></mod-depart>
</div>
</template>
<script>
/* eslint-disable */
import { _debounce } from '@/common/js/public';
import { getRequest, postRequest } from '@/api/api';
import errMsg from '@/common/js/error';
import showMsg from '@/common/js/showmsg';
import addMember from '@/components/company/add-member.vue';
import modDepart from '@/components/company/mod-depart.vue';
export default {
name: 'depart-list',
components: {
addMember,
modDepart
},
props: {
departObj: {
type: Object,
default() {
return {
departmentId: '',
departmentName: '',
wxDepartmentId: '',
parentId: '',
isStore: '',
staffCount: '',
bindFlag: ''
};
}
}
},
data() {
return {
searchInput: '',
activeFlag: '',
statusOptions: [
{
value: '',
label: '所有状态'
},
{
value: '0',
label: '未激活'
},
{
value: '1',
label: '已激活'
}
],
// 分页参数
currentPage: 1,
pageSize: 20,
total: 0,
tableData: [],
// 新增
memberVisible: false,
memberObj: {},
defaultDepart: [],
multipleSelection: [], //勾选数据
// 调整部门
modVisible: false
};
},
methods: {
/**
* 获取同步状态
*/
getStatus() {
const that = this;
return new Promise((resolve, reject) => {
let para = {};
getRequest('/haoban-manage3-web/department-sync-check', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
resolve(resData.result);
return false;
}
resolve(false);
errMsg.errorMsg(resData);
})
.catch(function(error) {
resolve(false);
that.$message.error({
duration: 1000,
message: error.message
});
});
});
},
/**
* 可选设置
**/
selectInit(row, index) {
if (row.activeFlag == 1) {
return false; //不可勾选
} else {
return true; //可勾选
}
},
/**
* 输入
*/
toInput: _debounce(function(e, value) {
const that = this;
that.currentPage = 1;
that.getTableList();
}, 500),
// 搜索清除
clearInput() {
const that = this;
that.currentPage = 1;
that.getTableList();
},
// 选择状态
changeStatus() {
const that = this;
that.currentPage = 1;
that.getTableList();
},
/**
* 调整部门
*/
async modifyDepart() {
const that = this;
const tag = await that.getStatus();
if (!!tag && (tag.syncStatus == 0 || tag.syncStatus == 1 || tag.syncStatus == 2 || tag.syncStatus == 3||tag.syncStatus == 5)) {
showMsg.showmsg('通讯录同步中，暂无法操作', 'warning');
return false;
}
if (!that.multipleSelection.length) {
showMsg.showmsg('请先选择成员！', 'warning');
return false;
}
that.modVisible = true;
},
modDepartData(res) {
const that = this;
that.modVisible = false;
if (res == 'close') {
return false;
}
that.currentPage = 1;
that.getTableList();
that.multipleSelection = [];
},
/**
* 邀请
*/
async toInvite(item) {
const that = this;
const tag = await that.getStatus();
if (!!tag && (tag.syncStatus == 0 || tag.syncStatus == 1 || tag.syncStatus == 2 || tag.syncStatus == 3||tag.syncStatus == 5)) {
showMsg.showmsg('通讯录同步中，暂无法操作', 'warning');
return false;
}
if (item) {
that.postInvite(item);
return false;
}
if (!that.multipleSelection.length) {
showMsg.showmsg('请先选择成员！', 'warning');
return false;
}
that.postInvite();
},
postInvite(item) {
const that = this;
let params = {
staffIds: item ? item.staffId : that.multipleSelection.map(ele => ele.staffId).join(',')
};
postRequest('/haoban-manage3-web/staff-invite', params)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
showMsg.showmsg('邀请成功', 'success');
that.currentPage = 1;
that.getTableList();
// 是否需要更新左侧 tree
return false;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
},
/**
* 删除
*/
async toDel() {
const that = this;
const tag = await that.getStatus();
if (!!tag && (tag.syncStatus == 0 || tag.syncStatus == 1 || tag.syncStatus == 2 || tag.syncStatus == 3||tag.syncStatus == 5)) {
showMsg.showmsg('通讯录同步中，暂无法操作', 'warning');
return false;
}
if (!that.multipleSelection.length) {
showMsg.showmsg('请先选择成员！', 'warning');
return false;
}
that.postDel();
},
postDel() {
const that = this;
let params = {
staffDepartmentRelatedIds: that.multipleSelection.map(ele => ele.staffDepartmentRelatedId).join(',')
};
postRequest('/haoban-manage3-web/staff-batch-del', params)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
showMsg.showmsg('删除成功', 'success');
that.currentPage = 1;
that.getTableList();
return false;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
},
/**
* 显示详情弹窗
*/
async showDetail(item) {
const that = this;
const tag = await that.getStatus();
if (!!tag && (tag.syncStatus == 0 || tag.syncStatus == 1 || tag.syncStatus == 2 || tag.syncStatus == 3||tag.syncStatus == 5)) {
showMsg.showmsg('通讯录同步中，暂无法操作', 'warning');
return false;
}
that.memberObj = item;
that.memberVisible = true;
},
/**
* 新建成员
*/
async addMember() {
const that = this;
const tag = await that.getStatus();
if (!!tag && (tag.syncStatus == 0 || tag.syncStatus == 1 || tag.syncStatus == 2 || tag.syncStatus == 3||tag.syncStatus == 5)) {
showMsg.showmsg('通讯录同步中，暂无法操作', 'warning');
return false;
}
// 默认当前部门
that.defaultDepart = [that.departObj];
that.memberVisible = true;
that.memberObj = {};
},
/**
* 确认新建后刷新
*/
refreshData(res) {
const that = this;
that.memberVisible = false;
that.memberObj = {};
if (res == 'close') {
return false;
}
that.currentPage = 1;
that.getTableList();
},
/**
* 勾选
*/
handleSelectionChange(val) {
const that = this;
that.multipleSelection = val;
// 如果需要过滤就需要,下面重新勾选过滤后的数据
//rows.forEach(row => {
// this.$refs.multipleDepartTable.toggleRowSelection(row);
//});
},
/**
* 分页---页码变化
*/
handleSizeChange(val) {
const that = this;
that.currentPage = 1;
that.pageSize = val;
that.getTableList();
},
/**
* 分页---当前页变化
*/
handleCurrentChange(val) {
const that = this;
that.currentPage = val;
that.getTableList();
},
/**
* 获取列表数据
*/
getTableList(val) {
const that = this;
let para = {
departmentId: that.departObj.departmentId,
activeFlag: that.activeFlag,
keyWord: that.searchInput || '', // 搜索字段
pageNum: that.currentPage, // 当前页
pageSize: that.pageSize // 一页显示个数
};
getRequest('/haoban-manage3-web/staff-list', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
that.tableData = resData.result.result || resData.result.list || [];
that.total = resData.result.totalCount || resData.result.total;
return false;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
}
},
watch: {
departObj(newData, oldData) {
const that = this;
if (Object.keys(newData)) {
that.currentPage = 1;
that.getTableList();
}
}
},
mounted() {
const that = this;
if (Object.keys(that.departObj)) {
that.currentPage = 1;
that.getTableList();
}
}
};
</script>
<style lang="less" scoped>
.w-274 {
width: 274px;
}
.m-l-6 {
margin-left: 6px;
}
.depart-list-body {
.depart-children-list {
padding: 16px 10px;
background: #f5f7fa;
}
}
</style>
src/components/company/store-member.vue deleted 100644 → 0
<!--
* @Descripttion : 当前组件信息
* @Author : 无尘
* @Date : 2020-02-13 14:02:40
* @LastEditors: 无尘
* @LastEditTime: 2020-06-28 11:12:02
* @FilePath : \Hapi-demoj:\公司\haoban-3\src\components\company\store-member.vue
-->
<!--
<store-member :departObj="departObj"></store-member>
import storeMember from '@/components/company/store-member.vue';
-->
<template>
<div class="depart-list-body">
<div class="depart-name-wrap">
<div aria-label="Breadcrumb" role="navigation" class="el-breadcrumb m-b-10">
<span class="el-breadcrumb__item" v-for="(item, index) in navData" :key="index + 'nav'"
><span role="link" class="el-breadcrumb__inner is-link" @click="changeDepart(item, index)"
><span class="el-breadcrumb__inner is-link font-12 color-606266">
{{ item.departmentName }}
</span></span
><i v-if="index != navData.length - 1" class="el-breadcrumb__separator el-icon-arrow-right"></i
></span>
</div>
<div class="depart-name">
<span class="font-16 color-303133 font-w-600">{{ departObj.departmentName }}</span>
</div>
<div class="depart-id font-12 color-909399">门店code：{{ departObj.relatedCode }}</div>
</div>
<div class="depart-children-list m-t-20">
<div class="depart-children-title"><span class="iconfont iconchengyuan color-303133"></span><span class="font-16 color-303133 font-w-600 p-l-5">门店成员</span><span class="font-12 color-909399 p-l-10">提示：邀请成员当天对该成员最多发送一次邀请申请</span></div>
<div class="depart-condition-wrap flex flex-space-between m-t-20">
<div>
<el-input placeholder="请输入姓名/导购ID/手机号" v-model="searchInput" class="w-274" @keyup.native="value => toInput(value, searchInput)" clearable @clear="clearInput"></el-input>
<el-select v-model="activeFlag" placeholder="所有状态" class="m-l-6" @change="changeStatus">
<el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
</el-select>
</div>
<div>
<el-button type="primary" plain @click="modifyDepart">调整所在部门</el-button>
<el-button type="primary" plain @click="toInvite('')">邀请</el-button>
<el-button type="danger" plain @click="toDel">删除</el-button>
<el-button type="primary" @click="addMember">新建成员</el-button>
</div>
</div>
<div class="m-t-20">
<el-table class="select-table" ref="multipleTable" :data="tableData" tooltip-effect="dark" :style="{ width: '100%', minHeight: tableH }" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column label="姓名" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.staffName || '--' }}</template>
</el-table-column>
<el-table-column prop="" label="职务" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.postion || '--' }}</template>
</el-table-column>
<el-table-column prop="" label="手机号码" show-overflow-tooltip>
<template slot-scope="scope"
>{{ scope.row.nationCode }}-{{ scope.row.phoneNumber }}</template
>
</el-table-column>
<el-table-column prop="" label="导购ID">
<template slot-scope="scope">
<el-select v-model="scope.row.clerkCode" placeholder="请选择" @change="changeClerk($event, scope.row)" @focus="getClerkList($event, scope.row)">
<el-option v-for="item in clerkOptions" :key="item.clerkCode" :label="item.staffName" :value="item.clerkCode"> </el-option>
</el-select>
</template>
</el-table-column>
<el-table-column prop="" label="操作" show-overflow-tooltip>
<template slot-scope="scope">
<el-button type="text" @click="showDetail(scope.row)">详情</el-button><el-button v-if="scope.row.activeFlag == 0" type="text" @click="toInvite(scope.row)">邀请</el-button>
</template>
</el-table-column>
</el-table>
<div class="block common-wrap__page text-right m-t-24" v-if="tableData.length != 0">
<dm-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </dm-pagination>
</div>
</div>
</div>
<add-member v-if="memberVisible" :defaultDepart="defaultDepart" :memberObj="memberObj" @refreshData="refreshData"></add-member>
<mod-depart v-if="modVisible" :selectObj="multipleSelection" @modDepartData="modDepartData"></mod-depart>
</div>
</template>
<script>
import { _debounce } from '@/common/js/public';
import { getRequest, postRequest } from '@/api/api';
import errMsg from '@/common/js/error';
import showMsg from '@/common/js/showmsg';
import addMember from '@/components/company/add-member.vue';
import modDepart from '@/components/company/mod-depart.vue';
export default {
name: 'depart-list',
components: {
addMember,
modDepart
},
props: {
departObj: {
type: Object,
default() {
return {
departmentId: '',
departmentName: '',
wxDepartmentId: '',
parentId: '',
isStore: '',
staffCount: '',
bindFlag: ''
};
}
}
},
data() {
return {
searchInput: '',
activeFlag: '',
statusOptions: [
{
value: '',
label: '所有状态'
},
{
value: '0',
label: '未激活'
},
{
value: '1',
label: '已激活'
}
],
// 分页参数
currentPage: 1,
pageSize: 10,
total: 0,
tableData: [],
clerkOptions: [],
// 新增
memberVisible: false,
memberObj: {},
defaultDepart: [],
multipleSelection: [], //勾选数据
// 调整部门
modVisible: false,
navData: []
};
},
methods: {
changeDepart(item, index) {
const that = this;
if (index == that.navData.length - 1) {
return false;
}
that.$emit('changeDepart', item);
},
/**
* 获取同步状态
*/
getStatus() {
const that = this;
return new Promise((resolve, reject) => {
let para = {};
getRequest('/haoban-manage3-web/department-sync-check', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
resolve(resData.result);
return false;
}
resolve(false);
errMsg.errorMsg(resData);
})
.catch(function(error) {
resolve(false);
that.$message.error({
duration: 1000,
message: error.message
});
});
});
},
/**
* 可选设置
**/
selectInit(row, index) {
if (row.activeFlag == 1) {
return false; //不可勾选
} else {
return true; //可勾选
}
},
/**
* 选择导购
*/
changeClerk(e, item) {
const that = this;
that
.$confirm(`是否确认为【${item.staffName}】绑定导购ID【${e}】`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
that.postChange(item);
})
.catch(() => {
that.getTableList();
});
},
postChange(obj) {
const that = this;
let params = {
fromStaffDepartmentRelatedId: obj.staffDepartmentRelatedId,
toClerkCode: obj.clerkCode
};
postRequest('/haoban-manage3-web/staff-bind', params)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
showMsg.showmsg('绑定成功！', 'success');
that.currentPage = 1;
that.getTableList();
// 是否需要更新左侧 tree
return false;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
},
/**
* 获取未绑定导购
*/
getClerkList(e, item) {
const that = this;
let params = {
departmentId: that.departObj.departmentId,
storeId: that.departObj.relatedId
};
getRequest('/haoban-manage3-web/clerk-code-list', params)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
that.clerkOptions = resData.result;
return false;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
},
/**
* 输入
*/
toInput: _debounce(function(e, value) {
const that = this;
that.currentPage = 1;
that.getTableList();
}, 500),
// 搜索清除
clearInput() {
const that = this;
that.currentPage = 1;
that.getTableList();
},
// 选择状态
changeStatus() {
const that = this;
that.currentPage = 1;
that.getTableList();
},
/**
* 调整部门
*/
async modifyDepart() {
const that = this;
const tag = await that.getStatus();
if (!!tag && (tag.syncStatus == 0 || tag.syncStatus == 1 || tag.syncStatus == 2 || tag.syncStatus == 3 || tag.syncStatus == 5)) {
showMsg.showmsg('通讯录同步中，暂无法操作', 'warning');
return false;
}
if (!that.multipleSelection.length) {
showMsg.showmsg('请先选择成员！', 'warning');
return false;
}
that.modVisible = true;
},
modDepartData(res) {
const that = this;
that.modVisible = false;
if (res == 'close') {
return false;
}
that.currentPage = 1;
that.getTableList();
that.multipleSelection = [];
},
/**
* 邀请
*/
async toInvite(item) {
const that = this;
const tag = await that.getStatus();
if (!!tag && (tag.syncStatus == 0 || tag.syncStatus == 1 || tag.syncStatus == 2 || tag.syncStatus == 3 || tag.syncStatus == 5)) {
showMsg.showmsg('通讯录同步中，暂无法操作', 'warning');
return false;
}
if (item) {
that.postInvite(item);
return false;
}
if (!that.multipleSelection.length) {
showMsg.showmsg('请先选择成员！', 'warning');
return false;
}
that.postInvite();
},
postInvite(item) {
const that = this;
let params = {
staffIds: item ? item.staffId : that.multipleSelection.map(ele => ele.staffId).join(',')
};
postRequest('/haoban-manage3-web/staff-invite', params)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
showMsg.showmsg('邀请成功', 'success');
that.multipleSelection = [];
that.currentPage = 1;
that.getTableList();
// 是否需要更新左侧 tree
return false;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
},
/**
* 删除
*/
async toDel() {
const that = this;
const tag = await that.getStatus();
if (!!tag && (tag.syncStatus == 0 || tag.syncStatus == 1 || tag.syncStatus == 2 || tag.syncStatus == 3 || tag.syncStatus == 5)) {
showMsg.showmsg('通讯录同步中，暂无法操作', 'warning');
return false;
}
if (!that.multipleSelection.length) {
showMsg.showmsg('请先选择成员！', 'warning');
return false;
}
that.postDel();
},
postDel() {
const that = this;
let params = {
staffDepartmentRelatedIds: that.multipleSelection.map(ele => ele.staffDepartmentRelatedId).join(',')
};
postRequest('/haoban-manage3-web/staff-batch-del', params)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
showMsg.showmsg('删除成功', 'success');
that.multipleSelection = [];
that.currentPage = 1;
that.getTableList();
return false;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
},
/**
* 显示详情弹窗
*/
async showDetail(item) {
const that = this;
const tag = await that.getStatus();
if (!!tag && (tag.syncStatus == 0 || tag.syncStatus == 1 || tag.syncStatus == 2 || tag.syncStatus == 3 || tag.syncStatus == 5)) {
showMsg.showmsg('通讯录同步中，暂无法操作', 'warning');
return false;
}
that.memberObj = item;
that.memberVisible = true;
},
/**
* 新建成员
*/
async addMember() {
const that = this;
const tag = await that.getStatus();
if (!!tag && (tag.syncStatus == 0 || tag.syncStatus == 1 || tag.syncStatus == 2 || tag.syncStatus == 3 || tag.syncStatus == 5)) {
showMsg.showmsg('通讯录同步中，暂无法操作', 'warning');
return false;
}
// 默认当前部门
that.defaultDepart = [that.departObj];
that.memberVisible = true;
that.memberObj = {};
},
/**
* 确认新建后刷新
*/
refreshData(res) {
const that = this;
that.memberVisible = false;
that.memberObj = {};
if (res == 'close') {
return false;
}
that.currentPage = 1;
that.getTableList();
},
/**
* 勾选
*/
handleSelectionChange(val) {
this.multipleSelection = val;
},
/**
* 分页---页码变化
*/
handleSizeChange(val) {
const that = this;
that.currentPage = 1;
that.pageSize = val;
that.getTableList();
},
/**
* 分页---当前页变化
*/
handleCurrentChange(val) {
const that = this;
that.currentPage = val;
that.getTableList();
},
/**
* 获取列表数据
*/
getTableList(val) {
const that = this;
let para = {
departmentId: that.departObj.departmentId,
activeFlag: that.activeFlag,
keyWord: that.searchInput || '', // 搜索字段
pageNum: that.currentPage, // 当前页
pageSize: that.pageSize // 一页显示个数
};
getRequest('/haoban-manage3-web/staff-list', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
that.tableData = resData.result.result || resData.result.list || [];
that.total = resData.result.totalCount || resData.result.total;
return false;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
},
/**
* 获取面包屑
*/
toGetNavData() {
const that = this;
let params = {
departmentId: that.departObj.departmentId
};
postRequest('/haoban-manage3-web/department-chain', params)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
that.navData = resData.result || [];
return false;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
}
},
watch: {
departObj(newData, oldData) {
const that = this;
if (Object.keys(newData)) {
that.currentPage = 1;
that.getTableList();
that.toGetNavData();
}
}
},
mounted() {
const that = this;
if (Object.keys(that.departObj)) {
that.currentPage = 1;
that.getTableList();
that.toGetNavData();
}
}
};
</script>
<style lang="less" scoped>
.m-b-10 {
margin-bottom: 10px;
}
.el-breadcrumb__inner.is-link:hover,
.el-breadcrumb__inner a:hover {
color: #2f54eb;
}
.w-274 {
width: 274px;
}
.m-l-6 {
margin-left: 6px;
}
.depart-list-body {
.depart-id {
margin-top: 5px;
}
.depart-children-list {
padding: 16px 10px;
background: #f5f7fa;
}
}
</style>
src/components/company/wx-tree.vue deleted 100644 → 0
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2019-08-14 16:51:07
* @LastEditors: 无尘
* @LastEditTime: 2020-06-12 15:35:20
-->
<!--
<wx-tree v-model="itemData" ></wx-tree>
import wxTree from './wx-tree.vue';
-->
<template>
<ul class="tree-ul-body">
<draggable :list="itemData" class="wx-component" :options="rightOption" @input="emitter" @change="changeData" :move="onMove" @start="isDragging = true" @end="itemMoveEnd">
<li v-for="(item, index) in itemData" :key="index + 'wx'">
<div class="li-cell cursor-pointer">
<div class="li-cell-inner flex flex-space-between boder-box p-r-20" :style="{ 'margin-left': (item.level + 1) * 20 + 'px' }">
<div class="tree-left" :title="item.gicEnterpriseName" @click="toggleExpand(item)">
<span :class="['font-12 color-606266 el-icon-expand', item.isStore == 1 || !item.hasSonNode ? 'color-fff' : '', item.expand ? 'el-icon-caret-bottom' : 'el-icon-caret-right']"></span><span v-if="item.loading" class="el-tree-node__loading-icon el-icon-loading"></span><span :class="['font-14 p-r-10 iconfont', !!item.loading ? '' : 'p-l-10', item.isStore == 1 ? 'icondianpu-kuai' : 'iconqiye-tianchong', item.bindFlag == 1 ? 'color-2f54eb' : 'color-dedfe6']"></span><span class="font-14 color-606266">{{ item.label }}</span>
</div>
<div class="tree-right">
<el-button v-if="item.isStore == 0 && !item.gicBind" type="text" @click.stop="addChild(item)">添加子部门</el-button>
<el-button v-if="!item.gicBind" type="text" @click.stop="modChild(item)">修改名称</el-button>
<el-button v-if="!item.gicBind && ((item.level > 0 && !item.children.length && !item.hasSonNode) || !item.hasSonNode)" type="text" @click.stop="delChild(item)">删除</el-button>
</div>
</div>
</div>
<!-- 门店下级不能放部门，门店不能有下级 -->
<li-row v-show="item.isStore == 0 && !(item.gicBind && !item.children.length)" :class="['cell-child', !item.expand && item.isStore == 0 ? 'cell-child-show' : '']" :itemObj="item" :itemData="item.children" @changeParent="changeParent" @refreshRecycle="refreshRecycle" @checkParent="checkParent"></li-row
><!-- v-show="(item.expand && item.isStore == 0) || (!item.children.length && item.isStore == 0)" -->
</li>
</draggable>
<add-depart v-if="addShow" :departObj="modItem" @refreshData="refreshData"></add-depart>
</ul>
</template>
<script>
import addDepart from '@/components/company/add-depart.vue';
import localforage from 'localforage';
import draggable from 'vuedraggable';
import showMsg from '@/common/js/showmsg';
import errMsg from '@/common/js/error';
import { getRequest, postRequest } from '@/api/api';
import $ from 'jquery';
export default {
name: 'li-row',
components: {
draggable,
addDepart
},
props: {
value: {
type: [Object, Array],
default() {
return [];
}
},
itemData: {
type: [Object, Array],
default() {
return [];
}
},
itemObj: {
type: [Object, Array],
default() {
return {};
}
}
},
data() {
return {
rightOption: {
group: {
name: 'people',
pull: true,
put: true
},
sort: true,
scroll: true,
animation: 100
},
addShow: false,
additem: {},
modItem: {}
};
},
computed: {},
methods: {
/**
* 刷新数据
*/
refreshRecycle() {
const that = this;
that.$emit('refreshRecycle');
},
/**
* 检查父级有没有子级
*/
checkParent(obj) {
const that = this;
that.itemObj.children.forEach(ele => {
if (ele.loaded && ele.children.length) {
ele.hasSonNode = false;
}
});
that.$forceUpdate();
},
/**
* 触发父级
*/
changeParent(itemObj, flag) {
const that = this;
if (itemObj.addFlag) {
that.$emit('changeParent', that.itemObj, flag);
return false;
}
let storeAddData = [];
if (that.$store.state.addDepartment.length) {
// 去掉重复的父级
that.$store.state.addDepartment.forEach(ele => {
if (ele.departmentId != itemObj.departmentId) {
storeAddData.push(ele);
}
});
that.$store.dispatch('clearAddData');
storeAddData.forEach(ele => {
that.$store.dispatch('saveAddInfo', ele);
});
}
let storeEditData = [];
if (that.$store.state.editDepartment.length) {
// 去掉重复的父级
that.$store.state.editDepartment.forEach(ele => {
if (ele.departmentId != itemObj.departmentId) {
storeEditData.push(ele);
}
});
that.$store.dispatch('clearEditData');
storeEditData.forEach(ele => {
that.$store.dispatch('saveEditInfo', ele);
});
}
if (flag == 'add') {
// that.$store.dispatch('saveAddInfo', itemObj);
}
if (flag == 'edit') {
// that.$store.dispatch('saveEditInfo', itemObj);
}
},
/**
* 移动中,如果使用 async 异步方法，下面不能拦截
*/
onMove(evt, originalEvent) {
const that = this;
$('[style="background: rgba(47, 84, 235, 0.05);"]').removeAttr('style');
$('.sortable-chosen.sortable-ghost')
.parent()
.parent()
.siblings('.li-cell')
.css({ background: 'rgba(47,84,235,.05)' });
// 判断中间是否存在父级
// console.log('onMove:',evt, originalEvent);
// console.log('onMove:', that.itemObj, that.itemData);
if (!that.itemObj.children.length) {
that.$set(that.itemObj, 'hasSonNode', false);
that.itemObj.hasSonNode = false;
}
// 为了改变level
const draggedElement = evt.draggedContext.element;
//gic 移动的不能再动
// console.log(!!draggedElement['gicBind']);
if (!!draggedElement && draggedElement.hasOwnProperty('gicBind') && !!draggedElement['gicBind']) {
return false;
}
// 触发父级
that.$emit('checkParent', draggedElement);
const nearElement = evt.relatedContext['element'];
//gic 移动的不能被移入
// console.log(!!nearElement['gicBind']);
if (!!nearElement && nearElement.hasOwnProperty('gicBind') && !!nearElement['gicBind']) {
return false;
}
if (!!nearElement && nearElement.hasOwnProperty('level') && draggedElement['level'] != nearElement['level']) {
that.itemObj.children.forEach(ele => {
if (ele.departmentId == draggedElement['departmentId']) {
ele.level = nearElement['level'];
}
});
}
// 首级
if (draggedElement.level == 0) {
return false;
}
that.$nextTick(() => {
$('.sortable-chosen.sortable-ghost')
.parent()
.parent()
.siblings('.li-cell')
.css({ background: 'rgba(47,84,235,.05)' });
});
return !draggedElement.fixed;
},
/**
* m],ove end
*/
itemMoveEnd(evt) {
const that = this;
$('[style="background: rgba(47, 84, 235, 0.05);"]').removeAttr('style');
// 判断中间是否已经添加
// console.log('移动后：', evt, that.itemObj, that.itemData);
that.$forceUpdate();
},
/**
* 改变数组数据
*/
emitter(value) {
// console.log(value);
this.$emit('input', value);
},
handleAdded(pitem, addFlag) {
const that = this;
pitem.children.forEach((ele, index) => {
ele.parentId = pitem.departmentId;
ele.parentDepartmentId = pitem.departmentId;
ele.level = pitem.level + 1;
// 如果gic部门移入是多层级的，需要设置子级的 addFlag
ele.addFlag = !!addFlag ? true : false;
if (ele.children.length) {
that.$set(ele, 'hasSonNode', true);
that.handleAdded(ele, addFlag);
}
});
},
handleRemoved(pitem) {
const that = this;
pitem.children.forEach((ele, index) => {
ele.parentId = pitem.departmentId;
ele.parentDepartmentId = pitem.departmentId;
ele.level = pitem.level + 1;
if (ele.children.length) {
that.$set(ele, 'hasSonNode', true);
that.handleRemoved(ele);
}
});
},
/* eslint-disable */
async changeData(value) {
const that = this;
// console.log('wx:change:', value, that.itemObj);
// 跨级移动后还要判断原来父级有没有子级，设置
if (value['removed']) {
if (that.itemData.length) {
that.itemObj.hasSonNode = true;
} else {
// that.itemObj.hasSonNode = false;
}
// 企业微信老部门跨级移动，出现 removed
for (let index = 0; index < that.itemData.length; index++) {
const element = that.itemData[index];
// 如果移入到有子级却没有加载子级的部门时候，
if (!that.itemData[index].loaded && that.itemData[index].children.length) {
await that.handleRemoved(that.itemData[index]);
const childLevelData = that.itemData[index].hasSonNode ? await that.getChildData(that.itemData[index]) : [];
childLevelData.forEach(ele => {
that.itemData[index].children.push(ele);
});
// console.log('移入到还没有加载子级的部门1：',that.itemData)
let hash = {};
let arr = JSON.parse(JSON.stringify(that.itemData[index].children));
arr = arr.reduce(function(item, next) {
hash[next.departmentId] ? '' : (hash[next.departmentId] = true && item.push(next));
return item;
}, []);
that.itemData[index].children = arr;
}
}
}
const objKey = !!value['added'] ? 'added' : !!value['moved'] ? 'moved' : 'removed';
if (!!objKey && objKey != 'removed') {
// 如果移入的父级原来子级是空的，需要判断来设置有没有子级字段
if (that.itemObj.children.length) {
that.$set(that.itemObj, 'hasSonNode', true);
}
let sort = '';
for (let index = 0; index < that.itemObj.children.length; index++) {
that.itemObj.children[index].sort = index;
if (value[objKey].element.departmentId == that.itemObj.children[index].departmentId) {
sort = index;
that.itemObj.children[index].parentDepartmentIdOld = that.itemObj.children[index].parentDepartmentId;
that.itemObj.children[index].parentId = that.itemObj.departmentId;
that.itemObj.children[index].parentDepartmentId = that.itemObj.departmentId;
that.itemObj.children[index].level = that.itemObj.level + 1;
// added 且 wxEnterpriseId 不存在
that.itemObj.children[index].addFlag = that.itemObj.children[index].addFlag ? that.itemObj.children[index].addFlag : objKey == 'added' && !that.itemObj.children[index].wxEnterpriseId ? true : false;
}
if (that.itemObj.children[index].children.length) {
that.$set(that.itemObj.children[index], 'hasSonNode', true);
await that.handleAdded(that.itemObj.children[index], that.itemObj.children[index].addFlag ? that.itemObj.children[index].addFlag : objKey == 'added' && !that.itemObj.children[index].wxEnterpriseId);
}
}
// console.log('父级:', that.itemObj);
if (!that.itemObj.loaded && that.itemObj.hasSonNode) {
const childData = await that.getChildData(that.itemObj);
childData.forEach(ele => {
that.itemObj.children.push(ele);
});
// console.log('移入到还没有加载子级的部门2：',that.itemObj);
let hashObj = {};
let arrObj = JSON.parse(JSON.stringify(that.itemObj.children));
arrObj = arrObj.reduce(function(item, next) {
hashObj[next.departmentId] ? '' : (hashObj[next.departmentId] = true && item.push(next));
return item;
}, []);
that.itemObj.children = arrObj;
}
let newEle = JSON.parse(JSON.stringify(value[objKey].element));
newEle.parentDepartmentIdOld = newEle.parentDepartmentId;
newEle.parentId = that.itemObj.departmentId;
newEle.parentDepartmentId = that.itemObj.departmentId;
newEle.storeFlag = newEle.isStore;
newEle.level = that.itemObj.level + 1;
newEle.sort = sort;
// 只有gic部门移入企业微信才加 addFlag
newEle.addFlag = newEle.addFlag ? newEle.addFlag : objKey == 'added' && !newEle.wxEnterpriseId ? true : false;
// 移入如果是多层级结构，就要循环遍历
if (newEle.children.length) {
await that.handleAdded(newEle, newEle.addFlag);
}
// console.log('移入部门数据：', newEle,that.itemObj);
that.$nextTick(() => {
// 同级移动，如果是新增部门同级移动，不用存数据
if (objKey == 'moved' && newEle.addFlag) {
// console.log('同级移动，如果是新增部门同级移动！不用存数据:');
return false;
}
// 企业微信同级移动排序, 移动的时候还要去重
if (objKey == 'moved') {
// 从存储的数据中查找当前移动的部门是否存在，存在了就要删除老数据，
// 去掉重复的父级,不要 判断存储中不存在 才添加
let storeEditData = [];
that.$store.state.editDepartment.forEach(ele => {
if (ele.departmentId != newEle.departmentId) {
storeEditData.push(ele);
}
});
that.$store.dispatch('clearEditData');
storeEditData.forEach(ele => {
that.$store.dispatch('saveEditInfo', ele);
});
that.$store.dispatch('saveEditInfo', newEle);
if (that.itemObj.addFlag) {
return false;
}
// 父级去重
let storeEditObj = [];
that.$store.state.editDepartment.forEach(ele => {
if (ele.departmentId != that.itemObj.departmentId) {
storeEditObj.push(ele);
}
});
that.$store.dispatch('clearEditData');
storeEditObj.forEach(ele => {
that.$store.dispatch('saveEditInfo', ele);
});
return false;
}
// 企业微信跨级移动,如果是新增部门跨级移动，删老数据---属于新增
if (objKey == 'added' && newEle.addFlag && !newEle.wxEnterpriseId) {
// console.log('跨级移动，如果是新增部门跨级移动！，删除老数据,--属于新增');
// 去掉重复的父级
let storeEditDataWxAdd = [];
that.$store.state.addDepartment.forEach(ele => {
if (ele.departmentId != newEle.departmentId) {
storeEditDataWxAdd.push(ele);
}
});
that.$store.dispatch('clearAddData');
storeEditDataWxAdd.forEach(ele => {
that.$store.dispatch('saveAddInfo', ele);
});
that.$store.dispatch('saveAddInfo', newEle);
// 判断父级是否新增
if (that.itemObj.addFlag) {
return false;
}
return false;
}
// 企业微信跨级移动,如果是老部门
if (objKey == 'added' && !newEle.addFlag && !!newEle.wxEnterpriseId) {
if (that.itemData.length) {
// console.log('企业微信跨级移动,是老部门:',that.itemObj)
that.itemObj.hasSonNode = true;
}
// 去掉重复的父级
let storeEditDataWx = [];
that.$store.state.editDepartment.forEach(ele => {
if (ele.departmentId != newEle.departmentId) {
storeEditDataWx.push(ele);
}
});
that.$store.dispatch('clearEditData');
storeEditDataWx.forEach(ele => {
that.$store.dispatch('saveEditInfo', ele);
});
that.$store.dispatch('saveEditInfo', newEle);
if (that.itemObj.addFlag) {
return false;
}
// 父级去重
let storeEditWx = [];
that.$store.state.editDepartment.forEach(ele => {
if (ele.departmentId != that.itemObj.departmentId) {
storeEditWx.push(ele);
}
});
that.$store.dispatch('clearEditData');
storeEditWx.forEach(ele => {
that.$store.dispatch('saveEditInfo', ele);
});
}
// gic 移动到企业微信
if (objKey == 'added' && !newEle.wxEnterpriseId) {
that.$store.dispatch('saveAddInfo', newEle);
if (that.itemObj.addFlag) {
return false;
}
// console.log('addFlag: gic 移动到企业微信:');
// 父级去重
let storeEditGic = [];
that.$store.state.editDepartment.forEach(ele => {
if (ele.departmentId != that.itemObj.departmentId) {
storeEditGic.push(ele);
}
});
that.$store.dispatch('clearEditData');
storeEditGic.forEach(ele => {
that.$store.dispatch('saveEditInfo', ele);
});
}
});
that.$forceUpdate();
}
},
/**
* 展开或者关闭下级
*/
async toggleExpand(item) {
const that = this;
item.expand = item.expand ? false : true;
// 如果gic 部门，没有加载数据
if (item.gicBind && item.isStore == 0 && !item.children.length && !item.loaded && item.hasSonNode) {
item.loading = true;
item.children = await that.getGicChildData(item);
item.loading = false;
return false;
}
// 新增加子部门不存本地数据
if (item.addFlag) {
return false;
}
// 点击的时候，如果非门店且子级是空的需要请求获取子级
if (item.isStore == 0 && !item.children.length && !item.loaded && item.hasSonNode) {
item.loading = true;
item.children = await that.getChildData(item);
item.loading = false;
}
// 只有展开且不是门店的才会保存
if (item.expand && !item.isStore) {
localforage.setItem('org' + item.departmentId, item);
}
if (!item.expand) {
localforage.removeItem('org' + item.departmentId);
}
that.$emit('getSelectData', item);
that.$forceUpdate();
},
/**
* 获取GIC下级数据
*/
getGicChildData(item) {
const that = this;
let para = {
enterpriseId: item.enterpriseId,
departmentId: item.departmentId, //
type: item.type //
};
return new Promise((resolve, reject) => {
if (item.type == 3) {
resolve([]);
return false;
}
getRequest('/haoban-manage3-web/unbind-department-list', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
// 加一个已加载标志
if (resData.result.length) {
item.loaded = true;
resData.result.forEach(ele => {
ele.loading = false;
ele.expand = false;
ele.children = [];
ele.gicBind = true;
ele.level = item.level + 1;
ele.label = ele.departmentName;
ele.enterpriseId = item.enterpriseId;
});
}
resolve(resData.result || []);
return false;
}
resolve([]);
errMsg.errorMsg(resData);
})
.catch(function(error) {
resolve([]);
that.$message.error({
duration: 1000,
message: error.message
});
});
});
},
/**
* 添加子部门
*/
async addChild(item) {
const that = this;
const tag = await that.getStatus();
if (!!tag && (tag.syncStatus == 0 || tag.syncStatus == 1 || tag.syncStatus == 2 || tag.syncStatus == 3||tag.syncStatus == 5)) {
showMsg.showmsg('通讯录同步中，暂无法操作', 'warning');
return false;
}
that.addShow = true;
that.additem = item;
that.modItem = {};
},
/**
* 修改名称
*/
async modChild(item) {
const that = this;
const tag = await that.getStatus();
if (!!tag && (tag.syncStatus == 0 || tag.syncStatus == 1 || tag.syncStatus == 2 || tag.syncStatus == 3||tag.syncStatus == 5)) {
showMsg.showmsg('通讯录同步中，暂无法操作', 'warning');
return false;
}
that.modItem = item;
that.addShow = true;
that.$forceUpdate();
},
/**
* 获取同步状态
*/
getStatus() {
const that = this;
return new Promise((resolve, reject) => {
let para = {};
getRequest('/haoban-manage3-web/department-sync-check', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
resolve(resData.result);
return false;
}
resolve(false);
errMsg.errorMsg(resData);
})
.catch(function(error) {
resolve(false);
that.$message.error({
duration: 1000,
message: error.message
});
});
});
},
async refreshData(name, mod) {
const that = this;
that.addShow = false;
if (name == 'close') {
return false;
}
if (mod == 'modify') {
const modFlag = await that.toModDepart(name);
if (!modFlag) {
return false;
}
that.modItem.label = name;
that.modItem.departmentName = name;
return false;
}
// 添加子部门的时候判断是否有子级且不是新添加
const arr = !that.additem.addFlag && !that.additem.children.length ? await that.getChildData(that.additem) : [];
if (arr.length && !that.additem.addFlag) {
arr.forEach(ele => {
that.additem.children.push(ele);
});
}
let childObj = await that.toAddOrMod(name);
if (!childObj) {
return false;
}
childObj.level = that.additem.level + 1;
that.$set(that.additem, 'hasSonNode', true);
that.additem.children.push(childObj);
that.$forceUpdate();
},
/**
* 新增 --- api
*/
toAddOrMod(departmentName) {
const that = this;
return new Promise((resolve, reject) => {
let para = {
departmentName: departmentName,
parentId: that.additem.departmentId
};
postRequest('/haoban-manage3-web/department-add', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
showMsg.showmsg('新增成功！', 'success');
resData.result.label = departmentName;
resData.result.expand = true;
resData.result.children = [];
resolve(resData.result);
return;
}
errMsg.errorMsg(resData);
resolve(false);
})
.catch(function(error) {
resolve(false);
that.$message.error({
duration: 1000,
message: error.message
});
});
});
},
/**
* 修改 --- api
*/
toModDepart(departmentName) {
const that = this;
return new Promise((resolve, reject) => {
let para = {
departmentId: that.modItem.departmentId,
departmentName: departmentName,
parentId: that.modItem.parentDepartmentId
};
postRequest('/haoban-manage3-web/department-edit', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
showMsg.showmsg('修改成功！', 'success');
resolve(true);
return;
}
errMsg.errorMsg(resData);
resolve(false);
})
.catch(function(error) {
resolve(false);
that.$message.error({
duration: 1000,
message: error.message
});
});
});
},
/**
* 删除
*/
delPost(item) {
const that = this;
let params = {
departmentId: item.departmentId
};
return new Promise((resolve, reject) => {
postRequest('/haoban-manage3-web/department-del', params)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
showMsg.showmsg('删除成功', 'success');
that.$emit('refreshRecycle');
resolve(true);
return false;
}
errMsg.errorMsg(resData);
resolve(false);
})
.catch(function(error) {
resolve(false);
that.$message.error({
duration: 1000,
message: error.message
});
});
});
},
/**
* 用来处理删除部门
*/
async handleDelDepart(item) {
const that = this;
for (let index = 0; index < item.children.length; index++) {
const ele = item.children[index];
!ele.addFlag ? await that.delPost(ele) : '';
if (ele.children.length) {
await that.handleDelDepart(ele);
}
}
},
/**
* 删除
*/
async delChild(item) {
const that = this;
const tag = await that.getStatus();
if (!!tag && (tag.syncStatus == 0 || tag.syncStatus == 1 || tag.syncStatus == 2 || tag.syncStatus == 3||tag.syncStatus == 5)) {
showMsg.showmsg('通讯录同步中，暂无法操作', 'warning');
return false;
}
let key = '';
that.itemData.forEach((ele, index) => {
if (ele.departmentId == item.departmentId) {
key = index;
}
});
// 如果是新增的子部门删除，就直接删除掉，不用调接口
if (item.addFlag) {
// 不需要判断子级有没有已存在部门
// if (item.children.length) {
// await that.handleDelDepart(item);
// }
that.itemData.splice(key, 1);
if (!that.itemData.length) {
that.itemObj.hasSonNode = false;
}
showMsg.showmsg('删除成功', 'success');
that.$forceUpdate();
return false;
}
that.$confirm('此操作将永久删除该分组, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(async () => {
// 如果是以前的部门，需要先调接口删除
const flag = await that.delPost(item);
if (!flag) {
return false;
}
that.itemData.splice(key, 1);
if (!that.itemData.length) {
that.itemObj.hasSonNode = false;
}
// 去掉存储的数据
let storeEditDataWxAdd = [];
that.$store.state.addDepartment.forEach(ele => {
if (ele.departmentId != item.departmentId) {
storeEditDataWxAdd.push(ele);
}
});
that.$store.dispatch('clearAddData');
storeEditDataWxAdd.forEach(ele => {
that.$store.dispatch('saveAddInfo', ele);
});
// 去掉存储编辑
let storeEditDataWx = [];
that.$store.state.editDepartment.forEach(ele => {
if (ele.departmentId != item.departmentId) {
storeEditDataWx.push(ele);
}
});
that.$store.dispatch('clearEditData');
storeEditDataWx.forEach(ele => {
that.$store.dispatch('saveEditInfo', ele);
});
that.$forceUpdate();
}).catch(() => {})
},
/* *
* 获取下级数据
*/
getChildData(item) {
const that = this;
let para = {
parentId: item.departmentId, //
isStore: item.isStore, //
keyword: '' //
};
return new Promise((resolve, reject) => {
getRequest('/haoban-manage3-web/department-list-level', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
// 加一个已加载标志,用来判断是否请求加载过
item.loaded = true;
if (resData.result.length) {
item.loaded = true;
resData.result.forEach(ele => {
ele.loading = false;
ele.expand = false;
ele.children = [];
ele.level = item.level + 1;
ele.label = ele.departmentName;
});
}
resolve(resData.result || []);
return false;
}
resolve([]);
errMsg.errorMsg(resData);
})
.catch(function(error) {
resolve([]);
that.$message.error({
duration: 1000,
message: error.message
});
});
});
},
async checkLocal(data) {
// con st that = this;
return new Promise((resolve, reject) => {
localforage
.getItem('org' + data.departmentId)
.then(value => {
// 当离线仓库中的值被载入时，此处代码运行
value ? resolve(true) : resolve(false);
})
.catch(function(err) {
// 当出错时，此处代码运行
resolve(false);
});
});
},
/**
* 处理变化的数据
*/
handleChangeChild(parent, item) {
const that = this;
for (let index = 0; index < item.length; index++) {
item[index].parentDepartmentId = parent.departmentId;
item[index].level = parent.level + 1;
if (item[index].children.length) {
item[index].hasSonNode = true;
that.handleChangeChild(item[index], item[index].children);
}
}
},
/**
* 获取存储的数据
*/
async getLocalData() {
const that = this;
for (let index = 0; index < that.itemData.length; index++) {
const flag = await that.checkLocal(that.itemData[index]);
if (flag) {
that.itemData[index].expand = true;
// 获取子集的时候会加一个加载的标志，来避免移动后重复加载子集
if (!that.itemData[index].loaded && that.itemData[index].isStore == 0 && that.itemData[index].hasSonNode == true) {
that.itemData[index].loading = true;
// console.log('存储：',that.itemData[index])
// children 改为不直接赋值，避免有移入数据被替换掉-20200520
const childData = await that.getChildData(that.itemData[index]);
childData.forEach(ele => {
that.itemData[index].children.push(ele);
});
that.itemData[index].loading = false;
}
// 拖拽进去
if (that.itemData[index].loaded && !that.itemData[index].children.length) {
that.$set(that.itemData[index], 'hasSonNode', false);
that.itemData[index].hasSonNode = false;
}
if (that.itemData[index].children.length) {
that.$set(that.itemData[index], 'hasSonNode', true);
that.itemData[index].hasSonNode = true;
that.handleChangeChild(that.itemData[index], that.itemData[index].children);
}
}
}
}
},
watch: {
itemData: function(newData, oldData) {
const that = this;
// console.log('watch: itemData:',newData);
if (newData.length) {
setTimeout(() => {
that.getLocalData();
}, 0);
}
},
itemObj: function(newData, oldData) {
// const that = this;
// console.log('watch: itemObj:',that.itemObj);
}
},
mounted() {
const that = this;
document.body.ondrop = function(event) {
event.preventDefault();
event.stopPropagation();
};
if (that.itemData.length) {
that.getLocalData();
}
}
};
</script>
<style lang="less" scoped>
.drag-indicator {
position: absolute;
left: 0;
right: 0;
height: 1px;
background-color: #409eff;
}
.tree-ul-body {
min-height: 6px;
&.cell-child-show {
// min-height: 10px;
max-height: 10px;
overflow: hidden;
opacity: 0;
.wx-component {
// min-height: 10px;
}
}
.wx-component {
min-height: 6px;
}
}
ul {
min-height: 6px;
.wx-component {
min-height: 6px;
}
}
.li-cell {
min-height: 26px;
line-height: 26px;
white-space: nowrap;
// overflow: hidden;
text-overflow: ellipsis;
.li-cell-inner {
line-height: 33px;
}
.tree-left {
.color-fff {
color: #fff;
}
}
.tree-right {
display: none;
}
&:hover {
background: rgba(47, 84, 235, 0.05);
.tree-left {
.color-fff {
color: rgba(47, 84, 235, 0.05);
}
}
.tree-right {
display: block;
}
}
}
.w-110 {
width: 110px;
}
.w-320 {
width: 320px;
}
.m-t-14 {
margin-top: 14px;
}
.child-row {
padding-left: 10px;
}
</style>
src/components/module-view.vue deleted 100644 → 0
<template>
<router-view/>
</template>
<script>
export default {
name: 'module-view'
}
</script>
src/components/vue-office-header.vue
......@@ -4,7 +4,7 @@
* @Author: 无尘
* @Date: 2018-10-10 17:21:32
* @LastEditors: 无尘
* @LastEditTime: 2020-07-17 11:15:24
* @LastEditTime: 2020-07-20 14:35:39
-->
<template>
<div class="navheader">
......@@ -64,6 +64,13 @@ export default {
},
{
menuCode: null,
rightName: '通讯录',
url: '/contactsList',
parentCode: null,
project: 'office'
},
{
menuCode: null,
rightName: '审核中心',
url: '/unreview?/reviewed/reviewSet',
parentCode: null,
......
src/main.js
......@@ -4,11 +4,12 @@
* @Author: 无尘
* @Date: 2020-07-16 16:37:05
* @LastEditors: 无尘
* @LastEditTime: 2020-07-17 12:13:44
* @LastEditTime: 2020-07-20 14:28:50
*/
import 'babel-polyfill';
import '@/styles/reset.less';
import 'element-ui/lib/theme-chalk/index.css';
import '@/styles/reset.less';
import '@/styles/font/iconfont.css';
import Vue from 'vue';
import VueRouter from 'vue-router';
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment