Skip to content

O
office-web
Commit f451fb0f by xiaohai
Options

添加店员

parent 115521d3
Showing with 561 additions and 61 deletions
src/components/contacts/searchMenu.vue
......@@ -2,6 +2,7 @@
<div class="searh-menu-container">
<div class="p-0-15">
<el-input prefix-icon="el-icon-search" v-model="searchKey" placeholder="姓名/手机号/部门名称" clearable @clear="clearFn" @keyup.enter.native="searchFn"></el-input>
<slot name="buttonBox"></slot>
<el-tree
v-if="!searchResultShow"
class="search-menu"
......@@ -254,8 +255,16 @@
margin-top: 50px;
color: #5b6a80;
}
.slot-button {
text-align: center;
margin-top: 20px;
.el-icon-question {
color: #C0C4CC;
cursor: pointer;
}
}
.search-menu {
margin-top: 30px;
margin-top: 20px;
color: #606266;
font-size: 14px;
background: #EEF1F8;
......
src/components/contacts/storeFrame/addBrand.vue 0 → 100644
<template>
<div>
<el-dialog
title="新建品牌"
width="422px"
:visible.sync="dialogVisible">
<p>请输入品牌名称</p>
<el-input v-model="brandName" class="m-t-20"></el-input>
<p class="danger-tip">
<i class="el-icon-info"></i>
下列两项选择后将无法修改，请谨慎选择
</p>
<p class="m-t-20">请选择所要关联gic的品牌</p>
<el-select v-model="brand" placeholder="请选择" class="select-brand select-div">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<p class="m-t-20">首次同步主题设置</p>
<el-select v-model="brand" placeholder="请选择" class="select-type select-div">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<div class="btn-box t-rt m-t-20 m-b-10">
<el-button @click="dialogVisible = false;">取消</el-button>
<el-button type="primary">确定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
name: "add-brand-dialog",
data() {
return {
dialogVisible: false,
brandName: "",
options: [
{
value: '选项1',
label: '黄金糕'
},
{
value: '选项2',
label: '双皮奶'
},
{
value: '选项3',
label: '蚵仔煎'
},
{
value: '选项4',
label: '龙须面'
},
{
value: '选项5',
label: '北京烤鸭'
}
],
brand: ""
};
}
};
</script>
<style lang="scss">
.danger-tip {
width:100%;
height:36px;
line-height: 36px;
background:rgba(253,246,236,1);
border-radius:4px;
padding: 0 14px;
box-sizing: border-box;
margin-top: 24px;
color: #E6A23C;
font-size: 13px;
.el-icon-info {
font-size: 16px;
margin-right: 7px;
vertical-align: middle;
}
}
.select-div {
width: 100%;
margin-top: 20px;
}
</style>
src/components/contacts/storeFrame/storeInfo.vue
......@@ -6,8 +6,8 @@
class="store-info-form info-form"
label-width="90px">
<el-form-item label="门店名称" prop="name">
<el-input v-model="storeInfo.name">
<template slot="suffix">{{storeInfo.name.length}}/20</template>
<el-input v-model="storeInfo.storeName">
<template slot="suffix">{{storeInfo.storeName.length}}/20</template>
</el-input>
</el-form-item>
<el-form-item label="所属分组" prop="group">
......@@ -16,22 +16,12 @@
</el-input>
</el-form-item>
<el-form-item label="门店图片" prop="imageUrls">
<ul class="img-list">
<li class="img-li" v-if="storeInfo.imageUrls.split(',').length == 0" v-for="(img, index) in storeInfo.imageUrls.split(',')" :key="index + '_' + img ">
<img :src="img">
<i class="el-icon-circle-close J_del-img"></i>
</li>
<li class="img-li J_add-img">
<i class="el-icon-plus"></i>
<p class="tip">图片规格640*340像素</p>
</li>
</ul>
<div class="member-upload-image">
<vue-gic-upload-image
projectName="gic-web"
wxFlag="0"
actionUrl="/api-plug/upload-img"
:imageList="storeInfo.imageUrls.split(',')"
:imageList="(storeInfo.imageUrls || '').split(',')"
:limitW="500"
:limitH="500"
:maxImageLength="5"
......@@ -78,12 +68,12 @@
<el-form-item label="门店地址">
<vue-office-area :areaOptions="areaOptions" @selected="selected" projectName="haoban-web" postUrl="/api-admin/dict-district-list"></vue-office-area>
<el-input v-model="areaOptions.postAddress">
<template slot="suffix">{{storeInfo.postAddress.length}}/50</template>
<template slot="suffix">{{(storeInfo.postAddress || "").length}}/50</template>
</el-input>
</el-form-item>
<el-form-item label="GPS坐标">
<el-input v-model="location" class="m-r-10"></el-input>
<a href="http://m.gpsspg.com/maps.htm" class="a-href">经纬度测试工具</a>
<a href="http://m.gpsspg.com/maps.htm" class="a-href" target="_blank">经纬度测试工具</a>
</el-form-item>
<el-form-item>
<template slot="label">
......@@ -91,7 +81,7 @@
<i class="el-icon-question" style="color:#C0C4CC;"></i>
</template>
<el-input v-model="storeInfo.storeCode">
<template slot="suffix">{{storeInfo.storeCode.length}}/20</template>
<template slot="suffix">{{(storeInfo.storeCode || "").length}}/20</template>
</el-input>
</el-form-item>
</el-form>
......@@ -103,7 +93,7 @@
label-width="90px">
<el-form-item label="店长姓名" prop="name">
<el-input v-model="storeInfo.managerName">
<template slot="suffix">{{storeInfo.managerName.length}}/10</template>
<template slot="suffix">{{(storeInfo.managerName || "").length}}/10</template>
</el-input>
</el-form-item>
<el-form-item label="手机号码" prop="phone">
......@@ -117,7 +107,7 @@
</el-form-item>
<el-form-item label="店长代码">
<el-input v-model="storeInfo.managerCode">
<template slot="suffix">{{storeInfo.managerCode.length}}/20</template>
<template slot="suffix">{{(storeInfo.managerCode || "").length}}/20</template>
</el-input>
</el-form-item>
</el-form>
......@@ -129,7 +119,7 @@
label-width="90px">
<el-form-item label="特色服务">
<el-input type="textarea" :rows="2" v-model="storeInfo.specialService"></el-input>
<p class="counter t-rt c-909399">{{storeInfo.specialService.length}}/20</p>
<p class="counter t-rt c-909399">{{(storeInfo.specialService || "").length}}/20</p>
</el-form-item>
<el-form-item label="人均消费">
<el-input v-model="storeInfo.personCost">
......@@ -138,11 +128,11 @@
</el-form-item>
<el-form-item label="推荐商品">
<el-input type="textarea" :rows="2" v-model="storeInfo.recommendGoods"></el-input>
<p class="counter t-rt c-909399">{{storeInfo.recommendGoods.length}}/100</p>
<p class="counter t-rt c-909399">{{(storeInfo.recommendGoods || "").length}}/100</p>
</el-form-item>
<el-form-item label="品牌介绍">
<el-input type="textarea" :rows="2" v-model="storeInfo.brandDes"></el-input>
<p class="counter t-rt c-909399">{{storeInfo.recommendGoods.length}}/200</p>
<p class="counter t-rt c-909399">{{(storeInfo.recommendGoods || "").length}}/200</p>
</el-form-item>
</el-form>
</div>
......@@ -151,39 +141,13 @@
<script>
export default {
name: "storeInfo",
data() {
return {
storeInfo: {
name: "",
groupChainName: "",
group: "",
imageUrls: "",
phoneNumber: 18758198024,
openTime: "08:00",
closeTime: "18:00",
storeCode: "code222",
managerName: "翠花",
storeType: 0,
managerPhoneNumber: 13777800255,
longitude: "40.5585354733",
latitude: "106.284122062",
managerSex: "女",
managerCode: "m220",
specialService: "脚底按摩了解一下",
personCost: 1000,
recommendGoods: "瓜子，花生，马应龙",
brandDes: "are you ok",
areaChainName: "河北省/邯郸市/成安县",
postAddress: "河源",
provinceId: "130000",
cityId: "130300",
countyId: "130302"
},
opts: {
selectableRange: '18:30 - 20:30',
format: 'HH:mm'
props: {
storeInfo: {
type: Object,
default() {
return {};
}
};
}
},
methods: {
selected(val) {
......@@ -216,6 +180,8 @@ export default {
<style lang="scss">
.store-info {
flex: 1;
height: 690px;
overflow: auto;
.info-cell {
margin-bottom: 24px;
background: #fff;
......
src/components/contacts/storeFrame/storeView.vue
......@@ -42,7 +42,7 @@
></el-table-column>
<el-table-column
label="所属分组"
prop="departName"
prop="departmentName"
:show-overflow-tooltip="true"
></el-table-column>
<el-table-column
......
src/components/test.vue 0 → 100644
<template>
<div class="gic-upload__img">
<!-- 上传成功的图片展示 -->
<div class="gic-upload__img__drag">
<draggable
:options="{group:{name:'people', pull:false, put:true },sort: true}"
v-model="dragImageList"
@end="itemMoveEnd"
class="drag-wrap" style="display: contents;">
<transition-group name="slide-fade">
<div v-for="(item, index) in imageList" :class="['img-content',index>=6?'m-t-8': '']" :key="index">
<a class="item-img" :href="item.url">
<img :src="item.url" alt="上传图片">
</a>
<!-- 预览和删除按钮 -->
<div class="upload-icon__btn">
<i class="el-icon-view" @click="previewImage(index)"></i>
<i class="el-icon-delete" @click="deleteImage(index)"></i>
</div>
</div>
</transition-group>
</draggable>
<!-- 上传进度条 -->
<div :class="['img-content', 'img-progress',imageList.length >= 6? 'm-t-8':'']" v-if="!pass && progress !== 0">
<el-progress class="gic-img-progress" :width="102" :percentage="progress" :status="propStatus" style="line-height: 102px;"></el-progress>
</div>
<!-- 图片上传部分 -->
<div :class="['img-upload',imageList.length >= 6? 'm-t-8':'']" v-if="imageList && imageList.length < maxImageLength">
<el-upload
class="loader"
accept="image/jpg,image/jpeg,image/png,image/gif"
:action="uploadUrl()"
list-type="picture-card"
:on-change="uploadOnChange"
:before-upload="beforeAvatarUpload"
:on-success="uploadOnSuccess"
:on-error="uploadOnError"
:on-progress="uploadOnProgress">
<i class="el-icon-plus gic-upload-btn"></i>
</el-upload>
</div>
</div>
<el-dialog
title="图片预览"
:visible.sync="isEnlargeImage"
:modal-append-to-body="false"
:before-close="handleClose"
width="520px">
<el-carousel v-if="isEnlargeImage" trigger="click" :initial-index="initialImg" :autoplay="false" height="500px">
<el-carousel-item v-for="(img, index) in imageList" :key="index" style="display: flex;align-items: center;justify-content: center;">
<img @click="isEnlargeImage = false" style="max-width: 480px;max-height: 500px;" :src="img.url">
</el-carousel-item>
</el-carousel>
</el-dialog>
</div>
</template>
<script>
/**
放大预览
删除
添加到循环里面
开始上传 上传失败 上传成功三个步骤
上传图片的进度条是固定的样式大小、如果我这边修改的话
会不会影响其他地方的样式
*/
import draggable from 'vuedraggable';
export default {
name: 'vue-gic-upload-image',
props: {
projectName: {
type: String,
default: 'gic-web'
},
wxFlag: {
type: String,
default: '1'
},
imgRate: {
type: String
},
// 上传地址
actionUrl: {
type: String,
default: ''
},
// 图片限制 不能超过 超过隐藏上传按钮
maxImageLength: {
type: Number,
default: 5
},
limitW: {
type: Number
},
limitH: {
type: Number
},
imageList: {
type: Array,
default() {
return [];
}
}
},
data() {
return {
dragImageList: this.imageList,// 传递的图片数据
initialImg: 0, // 初始索引
progress: 0, // 上传进度
pass: null, // 是否上传成功
isEnlargeImage: false, // 放大图片
enlargeImage: '' // 放大的图片的地址
};
},
computed: {
propStatus() {
console.log(this.pass);
if (this.pass) {
return 'success';
} else if (this.pass === false) {
return 'exception';
} else {
return '';
}
}
},
beforeMount() {
// this.action = this.actionUrl;
},
methods: {
// 获取 action 的 url
uploadUrl() {
var that = this
var host = window.location.origin;
var baseUrl;
var wxFlag;
wxFlag = !!that.wxFlag && that.wxFlag != ''? 'wxFlag='+that.wxFlag + '&': '';
console.log("当前host:",host)
if (host.indexOf('localhost') != '-1') {
baseUrl = 'http://gicdev.demogic.com';
}else {
baseUrl = host
}
// that.upUrl = baseUrl + that.actionUrl +'?'+ wxFlag+ 'requestProject=' + that.projectName
that.upUrl = that.actionUrl;
console.log(that.upUrl, 999999999999)
return that.upUrl
},
// 上传之前回调
beforeAvatarUpload(file) {
var that = this
const isJPG = file.type === 'image/jpeg' || file.type === 'image/jpg' || file.type === 'image/jpg';
const isLt2M = file.size / 1024 / 1024 < 2;
// if (!isJPG) {
// that.$message.error('上传图片只能是 JPG/JPEG 格式!');
// }
if (!isLt2M) {
that.$message.error('上传图片大小不能超过 2MB!');
}
return isLt2M && new Promise(function(resolve, reject) {
let reader = new FileReader();
reader.onload = function(event) {
let image = new Image();
image.onload = function () {
let width = this.width;
let height = this.height;
// console.log(width,height,!that.imgRate)
if (!!that.imgRate && that.imgRate !=='' ){
let limitRate = Number(that.imgRate.split(':')[0])/Number(that.imgRate.split(':')[1]);
let realRate = Number(width)/Number(height);
console.log(limitRate,realRate)
if (limitRate != realRate) {
that.$message.error('上传图片比例不正确!');
reject();
}
}
if ((!that.imgRate||that.imgRate =='') && !!that.limitW && that.limitH && width !== that.limitW && height !== that.limitH){
that.$message.error('上传图片尺寸不正确!');
reject();
}
resolve();
};
image.src = event.target.result;
console.log("上传 onload:",event.target.result)
};
reader.readAsDataURL(file);
})
},
// 上传成功
uploadOnSuccess(res, file) {
var that = this
this.pass = true;
if (res.errorCode == 0) {
that.$message.success('上传成功');
that.$emit('uploadOnSuccess',{res:res,file:file});
}else {
that.$message.error(res.message)
}
},
// 开始上传
uploadOnProgress(e, file) {
if (e && e.percent) {
this.progress = Math.floor(e.percent);
}
},
uploadOnChange(file) {
console.log(this.pass);
console.log(file, "file");
if (file.status === 'ready') {
this.pass = null;
this.progress = 0;
} else if (file.status === 'fail') {
this.$message.error('图片上传失败，请重试！');
}
console.log(this.pass);
},
uploadOnError() {
},
// 预览图片
previewImage(i) {
this.isEnlargeImage = true;
this.initialImg = i;
},
// 删除图片
deleteImage(i) {
this.$emit('deleteImage', i);
// this.imageList.splice(i, 1);
},
// 关闭弹层
handleClose(done) {
done();
},
// move end
itemMoveEnd(evt) {
var that = this
that.$emit('sortImg', that.dragImageList);
}
},
watch: {
imageList: function(newData,oldData){
var that = this;
that.dragImageList = newData;
},
},
/* 接收数据 */
mounted() {
var that = this
// that.dragImageList = that.imageList
},
components: {
draggable
},
};
</script>
<style>
.el-upload-dragger {
height: 104px;
line-height: 104px;
width: 104px;
background-color: transparent;
}
.gic-upload__img {
display: inline-block;
}
.gic-upload__img__drag {
max-width: 680px;
display: inline-block;
font-size: 0;
}
.gic-upload__img .img-content {
position: relative;
display: inline-block;
vertical-align: middle;
margin-right: 8px;
width: 104px;
height: 104px;
box-sizing: border-box;
border: 1px solid #dcdfe6;
border-radius: 4px;
cursor: pointer;
}
.img-content.m-t-8 {
margin-top: 8px;
}
.gic-upload__img .img-content .upload-icon__btn{
position: absolute;
font-size: 16px;
display: none;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.gic-upload__img .img-content .item-img {
display: flex;
align-items: center;
justify-content: center;
margin: 8px;
height: 86px;
width: 86px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
/*border: 1px solid #dcdfe6;*/
border-radius: 0;
}
.gic-upload__img .img-content .item-img img{
position: static;
display: block;
max-width: 86px;
max-height: 86px;
}
.gic-upload__img .img-content::after{
position: absolute;
top: 8px;
left: 8px;
z-index: 1;
content: ' ';
display: block;
height: 86px;
width: 86px;
background-color: rgba(0, 0, 0, .5);
transition: all .3s;
opacity: 0;
}
.gic-upload__img .img-content:hover::after{
opacity: 1;
}
.gic-upload__img .img-content:hover .upload-icon__btn{
display: block;
z-index: 100;
color: #fff;
}
.gic-upload__img .img-upload{
display: inline-block;
vertical-align: middle;
font-size: 28px;
}
.img-upload.m-t-8 {
margin-top: 8px;
}
.el-upload-list--picture-card{
display: none;
}
.el-upload--picture-card {
width: 104px;
height: 104px;
line-height: 104px;
}
.slide-fade-enter-active {
transition: all .6s ease;
}
.slide-fade-leave-active {
transition: all .6s cubic-bezier(.55, 0, .1, 1);
}
.slide-fade-enter, .slide-fade-leave-to {
opacity: 0;
}
</style>
src/router/index.js
......@@ -55,6 +55,11 @@ export const constantRouterMap = [
component: _import('contacts','addDepartment')
},
{
path: '/addClerk',
name: '添加店员',
component: _import('contacts','addClerk')
},
{
path: '/storeFrame',
name: '门店架构',
component: _import('contacts','storeFrame')
......
src/views/contacts/addClerk.vue 0 → 100644
<template>
<div class="add-clerk-page"></div>
</template>
<script>
export default {
name: "add-clerk-page"
}
</script>
<style lang="scss">
</style>
src/views/contacts/storeFrame.vue
......@@ -8,9 +8,21 @@
@handleTreeSelection="handleTreeSelection"
@handleStoreSelection="handleStoreSelection"
@handleEmployeeSelection="handleEmployeeSelection">
<template slot="buttonBox">
<div class="slot-button">
<el-button @click="addBrand" :disabled="disableBtn">新建品牌</el-button>
<el-popover
placement="right"
width="550"
content="若您的企业为集团企业，可通过新建品牌，不同品牌的门店可以创建在不同的品牌下面"
trigger="hover">
<i class="el-icon-question" slot="reference"></i>
</el-popover>
</div>
</template>
</search-menu>
<employee-info v-if="showEmployee == 'employee'" :info="selectedEmployee"></employee-info>
<store-info v-else-if="showEmployee == 'store'"></store-info>
<store-info v-else-if="showEmployee == 'store'" :storeInfo="storeInfo"></store-info>
<div class="sf-right-container"
v-else
v-loading="loading">
......@@ -48,6 +60,7 @@
</el-pagination>
</div>
</div>
<add-brand ref="add_brand"></add-brand>
</div>
</template>
<script>
......@@ -55,6 +68,7 @@ import searchMenu from "components/contacts/searchMenu";
import storeView from "components/contacts/storeFrame/storeView";
import clerkView from "components/contacts/storeFrame/clerkView";
import storeInfo from "components/contacts/storeFrame/storeInfo";
import addBrand from "components/contacts/storeFrame/addBrand";
import employeeInfo from "components/contacts/employeeInfo";
import { getRequest, postRequest, postJsonRequest } from '@/api/api';
export default {
......@@ -64,7 +78,8 @@ export default {
storeView,
clerkView,
employeeInfo,
storeInfo
storeInfo,
addBrand
},
data() {
return {
......@@ -81,8 +96,10 @@ export default {
pageNumber: 1,
storeList: [],
tableView: 1,
showEmployee: 'store',
selectedEmployee: {}
showEmployee: 'node',
selectedEmployee: {},
storeInfo: {},
disableBtn: true
};
},
methods: {
......@@ -107,10 +124,18 @@ export default {
this.showEmployee = showEmployee;
},
/**
* 新建品牌
*/
addBrand() {
this.$refs.add_brand.dialogVisible = true;
},
/**
* 树形搜索结果选门店处理
*/
handleStoreSelection(store) {
console.log(store);
this.storeInfo = store;
this.showEmployee = "store";
},
handleSizeChange(size) {
this.pageSize = size;
......@@ -186,6 +211,9 @@ export default {
},
beforeMount() {
this.getGroupData();
},
mounted() {
this.disableBtn = false;
}
};
</script>
......
static/css/public.css
......@@ -341,6 +341,9 @@ input:focus {
.m-t-15 {
margin-top: 15px;
}
.m-t-20 {
margin-top: 20px;
}
.m-t-30 {
margin-top: 30px;
}
......
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