Skip to content

Y
ybf
Commit da8847ef authored by xd's avatar xd
Browse files
Options

加入弹窗

parent 17e52b9e
Show whitespace changes
Inline Side-by-side
Showing with 863 additions and 45 deletions
ybf_admin/src/pages/in/contact/components/history.vue 0 → 100644
View file @ da8847ef
<template>
<div class="main">
<div class="title ">
<span>同步成员历史</span>
<el-button class="button buttondark" size="small" @click="handleCancel">返回</el-button>
</div>
<div class="lists">
<el-table
stripe
class="list"
ref="multipleTable"
:data="list.main"
tooltip-effect="dark"
style="width: 100%"
:header-cell-style="setListsHeadStyle"
>
<el-table-column label="序号" width="70" type="index" align="center"></el-table-column>
<el-table-column
prop="taskName"
label="门店名称"
align="center"
></el-table-column>
<el-table-column
prop="taskType"
label="姓名"
align="center"
width="120"
></el-table-column>
<el-table-column
prop="bar"
label="微信号"
align="center"
></el-table-column>
<el-table-column
prop="bar"
label="更新时间"
align="center"
width="120"
></el-table-column>
<el-table-column
prop="bar"
label="备注"
align="center"
width="120"
></el-table-column>
</el-table>
</div>
<div class="pages">
<el-pagination
@size-change="pagesSizeChange"
@current-change="pagesNowPageChange"
:current-page="currentPage4"
:page-sizes="[100, 200, 300, 400]"
:page-size="100"
layout="prev, pager, next, sizes, jumper"
:total="400"
></el-pagination>
</div>
</div>
</template>
<script>
export default {
data () {
return {
list: {
main: [
{
id: "1001",
taskName: "2019年男装销售任务",
taskType: "拉新",
bar: "男装",
taskContent: "任务内容任务内容任务内容...",
sendDate: "2019/02/08"
},
{
id: "1002",
taskName: "2019年男装销售任务",
taskType: "拉新",
bar: "男装",
taskContent: "任务内容任务内容任务内容...",
sendDate: "2019/02/08"
},
{
id: "1003",
taskName: "2019年男装销售任务",
taskType: "拉新",
bar: "男装",
taskContent: "任务内容任务内容任务内容...",
sendDate: "2019/02/08"
}
],
search: {
bar: [
{
id: "1",
name: "全部"
},
{
id: "2",
name: "测试"
}
],
taskType: [
{
id: "1",
name: "全部"
},
{
id: "2",
name: "测试"
}
]
}
},
data: {
search: {
bar: "",
taskType: "",
date: "",
keys: ""
},
page: {
nowPageNum: 4
}
},
isShow: true
}
},
created () {},
methods: {
listPick () {},
testButtonClick () {},
pagesSizeChange () {},
pagesNowPageChange () {},
setListsHeadStyle ({ row, column, rowIndex, columnIndex }) {
if (rowIndex === 0) {
return "background-color: #0B0F32; border-right: 1px solid white;color: white;"
} else {
return ''
}
},
handleCancel () {
this.isShow = false
this.$emit('isShow', false)
}
}
}
</script>
<style lang="scss" scoped>
.btn {
font-size:14px;
font-weight:bold;
color:rgba(102,102,102,1);
}
.main {
height: 100vh;
padding: 0px 16px 16px;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.searchs {
height: 40px;
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.buttons {
width: 266px;
display: flex;
flex-direction: row;
justify-content: flex-start;
}
.buttonlight {
background-color: #e8e9fe;
color: #4e59c7;
border: 1px solid #4e59c7;
box-sizing: border-box;
}
.buttonlight:hover {
}
.buttondark {
width: 88px;
height: 32px;
background-color: #4e59c7;
color: #ffffff;
border: 1px solid #4e59c7;
box-sizing: border-box;
}
.buttondark:hover {
}
.searchzone {
height: 40px;
width: auto;
min-width: 654px;
text-align: right;
}
.lists {
height: auto;
min-height: 70%;
width: 100%;
margin-top: 20px;
}
.listButtonRed {
color: red;
}
.pages {
height: 40px;
width: 100%;
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
}
.title {
height: 48px;
font-size: 16px;
font-weight: bold;
display: flex;
justify-content: space-between;
align-items: center;
color: rgba(56, 56, 56, 1);
border-bottom: 1px solid #f8f8f8;
margin-bottom: 16px;
}
</style>
ybf_admin/src/pages/in/contact/components/move.vue 0 → 100644
View file @ da8847ef
<template>
<div>
<el-dialog title="提示" :visible.sync="moveDialog" width="60%">
<span>这是一段信息</span>
<span slot="footer" class="dialog-footer">
<el-button @click="handleCancel">取 消</el-button>
<el-button type="primary" @click="handleFinish">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
props: {
moveDialog: {
type: Boolean,
default: false
}
},
data () {
return {
}
},
methods: {
handleCancel () {
// this.moveDialog = false
this.$emit('handleCancel')
},
handleFinish () {
// this.moveDialog = false
this.$emit('handleFinish', false)
}
}
};
</script>
<style scoped></style>
ybf_admin/src/pages/in/contact/counter.vue
View file @ da8847ef
<template>
<div>
<div>柜台</div>
<div class="main">
<div class="title">全部柜组（ 共5个 ）</div>
<div class="searchs">
<div class="buttons">
<el-button class="button buttonlight" size="small">添加柜组</el-button>
<el-button class="button buttondark" size="small">批量删除</el-button>
</div>
</template>
<!-- 搜索区 -->
<el-form
class="searchzone"
:inline="true"
:model="data.search"
label-width="auto"
>
<el-form-item label="关键词">
<el-input
size="small"
v-model="data.search.keys"
style="width:160px"
placeholder="请输入关键词"
/>
</el-form-item>
<el-button class="button buttondark" size="small" style="margin-top:4px;">搜索</el-button>
</el-form>
</div>
<div class="lists">
<el-table
stripe
class="list"
ref="multipleTable"
:data="list.main"
tooltip-effect="dark"
style="width: 100%"
@selection-change="listPick"
:header-cell-style="setListsHeadStyle"
>
<el-table-column type="selection" width="60"></el-table-column>
<el-table-column
prop="taskName"
label="柜组名称"
align="center"
></el-table-column>
<el-table-column
prop="taskType"
label="柜组负责人"
align="center"
width="120"
></el-table-column>
<el-table-column
prop="bar"
label="柜组编号"
align="center"
width="120"
></el-table-column>
<el-table-column
prop="bar"
label="所有区域"
align="center"
width="120"
></el-table-column>
<el-table-column
prop="bar"
label="门店数量"
align="center"
width="120"
></el-table-column>
<el-table-column label="创建时间" width="120" align="center">
<template slot-scope="scope">{{ scope.row.sendDate }}</template>
</el-table-column>
<el-table-column label="操作" align="center" fixed="right" width="200">
<template slot-scope="scope">
<el-button type="text" class="btn" @click="testButtonClick(scope.row)"
>详情</el-button
>
<el-button type="text" class="btn" @click="testButtonClick(scope.row)"
>编辑</el-button
>
<el-button
type="text"
@click="testButtonClick(scope.row)"
class="listButtonRed"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
</div>
<div class="pages">
<el-pagination
@size-change="pagesSizeChange"
@current-change="pagesNowPageChange"
:current-page="currentPage4"
:page-sizes="[100, 200, 300, 400]"
:page-size="100"
layout="prev, pager, next, sizes, jumper"
:total="400"
></el-pagination>
</div>
</div>
</template>
<script>
export default {
}
components: {},
data() {
return {
list: {
main: [
{
id: "1001",
taskName: "2019年男装销售任务",
taskType: "拉新",
bar: "男装",
taskContent: "任务内容任务内容任务内容...",
sendDate: "2019/02/08"
},
{
id: "1002",
taskName: "2019年男装销售任务",
taskType: "拉新",
bar: "男装",
taskContent: "任务内容任务内容任务内容...",
sendDate: "2019/02/08"
},
{
id: "1003",
taskName: "2019年男装销售任务",
taskType: "拉新",
bar: "男装",
taskContent: "任务内容任务内容任务内容...",
sendDate: "2019/02/08"
}
],
search: {
bar: [
{
id: "1",
name: "全部"
},
{
id: "2",
name: "测试"
}
],
taskType: [
{
id: "1",
name: "全部"
},
{
id: "2",
name: "测试"
}
]
}
},
data: {
search: {
bar: "",
taskType: "",
date: "",
keys: ""
},
page: {
nowPageNum: 4
}
}
};
},
created() {},
methods: {
listPick() {},
testButtonClick() {},
pagesSizeChange() {},
pagesNowPageChange() {},
setListsHeadStyle({ row, column, rowIndex, columnIndex }) {
if (rowIndex === 0) {
return "background-color: #0B0F32; border-right: 1px solid white;color: white;";
} else {
return "";
}
}
}
};
</script>
<style>
<style lang="scss" scoped>
.main {
height: 100vh;
padding: 0px 16px 16px;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.searchs {
height: 40px;
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.buttons {
width: 266px;
display: flex;
flex-direction: row;
justify-content: flex-start;
}
.buttonlight {
background-color: #e8e9fe;
color: #4e59c7;
border: 1px solid #4e59c7;
box-sizing: border-box;
}
.buttonlight:hover {
}
.btn {
font-size:14px;
font-weight:bold;
color:rgba(102,102,102,1);
}
.buttondark {
width: 88px;
height: 32px;
background-color: #4e59c7;
color: #ffffff;
border: 1px solid #4e59c7;
box-sizing: border-box;
}
.buttondark:hover {
}
.searchzone {
height: 40px;
width: auto;
min-width: 654px;
text-align: right;
}
.lists {
height: auto;
min-height: 70%;
width: 100%;
margin-top: 20px;
}
.listButtonRed {
color: red;
}
.pages {
height: 40px;
width: 100%;
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
}
.title {
height: 48px;
line-height: 48px;
font-size:16px;
font-weight:bold;
color:rgba(56,56,56,1);
border-bottom: 1px solid #f8f8f8;
margin-bottom: 16px;
}
</style>
ybf_admin/src/pages/in/contact/index.vue
View file @ da8847ef
......@@ -25,9 +25,10 @@
</div>
</div>
<div class="content">
<mail v-if="index == '1'"></mail>
<store v-if="index == '2'"></store>
<counter v-if="index == '3'"></counter>
<mail v-if="index == '1' && isHistoryShow == false" @isShow="contorlHistoryShow"></mail>
<counter v-if="index == '2'"></counter>
<store v-if="index == '3'"></store>
<history v-if="isHistoryShow == true" @isShow="contorlHistoryShow"></history>
</div>
</d2-container>
</template>
......@@ -36,15 +37,18 @@
import Mail from "./mail";
import Store from "./store";
import Counter from "./counter";
import History from "./components/history";
export default {
components: {
Mail,
Store,
Counter
Counter,
History
},
data () {
return {
index: '1'
index: '1',
isHistoryShow: false
}
},
methods: {
......@@ -53,6 +57,11 @@ export default {
},
handleMenuChange (index) {
this.index = index
},
contorlHistoryShow (val) {
console.log(val, "val");
this.isHistoryShow = val
}
}
}
......
ybf_admin/src/pages/in/contact/mail.vue
View file @ da8847ef
......@@ -28,7 +28,7 @@
</div>
</div>
<el-tree
:data="data"
:data="data1"
show-checkbox
node-key="id"
default-expand-all
......@@ -56,24 +56,26 @@
<div class="main">
<div class="searchs">
<div class="buttons">
<el-button class="button buttonlight" size="small"
<el-button
class="button buttonlight"
size="small"
@click="synchronismMember"
>同步成员</el-button
>
<el-button class="button buttondark" size="small"
>移动 </el-button
>
<el-button
class="button buttondark"
size="small"
@click="handleMove"
>移动
</el-button>
</div>
<!-- 搜索区 -->
<el-form
class="searchzone"
:inline="true"
:model="data.search"
label-width="auto"
>
<!-- 关键字 -->
<!-- <el-col :span="6"> -->
<el-form-item label="关键词">
<el-input
size="small"
......@@ -82,11 +84,8 @@
placeholder="请输入关键词"
/>
</el-form-item>
<!-- </el-col> -->
<!-- </el-row> -->
<el-button class="button buttondark" size="small"
>搜索</el-button
>
<el-button class="button buttondark" size="small">搜索</el-button>
</el-form>
</div>
<div class="lists">
......@@ -105,13 +104,12 @@
prop="taskName"
label="姓名"
align="center"
width="200"
></el-table-column>
<el-table-column
prop="taskType"
label="部门"
align="center"
width="120"
width="150"
></el-table-column>
<el-table-column
prop="taskType"
......@@ -123,9 +121,9 @@
prop="bar"
label="手机号"
align="center"
width="120"
width="150"
></el-table-column>
<el-table-column label="同步时间" width="178" align="center">
<el-table-column label="同步时间" width="180" align="center">
<template slot-scope="scope">{{ scope.row.sendDate }}</template>
</el-table-column>
<el-table-column
......@@ -140,7 +138,7 @@
<el-pagination
@size-change="pagesSizeChange"
@current-change="pagesNowPageChange"
:current-page="currentPage4"
:current-page="pageData.pageSize"
:page-sizes="[100, 200, 300, 400]"
:page-size="100"
layout="prev, pager, next, sizes, jumper"
......@@ -149,13 +147,21 @@
</div>
</div>
</div>
<move-dialog v-if = "moveDialogShow" :moveDialog = "moveDialogShow" @handleCancel="moveDialogShow = false" @handleFinish="removeFinish"></move-dialog>
<!-- <share
v-if="showReviewModel"
:dialogVisible="showReviewModel"
@handleCancel="showReviewModel = false"
@handlePeopleId="getPeopleId"
></share>-->
</div>
</template>
<script>
import MoveDialog from "./components/move"
export default {
data() {
const data = [
const data1 = [
{
id: 1,
label: "一级 1",
......@@ -206,7 +212,7 @@ export default {
}
];
return {
data: JSON.parse(JSON.stringify(data)),
data1: JSON.parse(JSON.stringify(data1)),
list: {
main: [
{
......@@ -257,6 +263,7 @@ export default {
]
}
},
isShow: false,
data: {
search: {
bar: "",
......@@ -267,9 +274,17 @@ export default {
page: {
nowPageNum: 4
}
},
moveDialogShow: false,
pageData: {
pageSize: 1,
total: 10
}
};
},
components: {
MoveDialog
},
methods: {
append(data) {
const newChild = { id: id++, label: "testtest", children: [] };
......@@ -295,6 +310,21 @@ export default {
} else {
return "";
}
},
synchronismMember() {
this.isShow = true;
this.$emit("isShow", this.isShow);
},
handleMove() {
this.moveDialogShow = true
console.log(111111);
},
removeFinish() {
this.moveDialogShow = false
},
currentPage() {
}
}
};
......@@ -359,7 +389,7 @@ export default {
}
.left {
position: relative;
width: 180px;
width: 20%;
}
.left,
.right {
......@@ -369,6 +399,7 @@ export default {
.right {
padding: 10px;
margin-left: 10px;
width: 80%;
}
.number {
font-size: 14px;
......@@ -435,6 +466,7 @@ main {
height: 40px;
width: auto;
min-width: 654px;
text-align: right;
}
.lists {
/* // border: 2px solid greenyellow; */
......
ybf_admin/src/pages/in/contact/store.vue
View file @ da8847ef
<template>
<div>
<div>门店管理</div>
<div class="main">
<div class="title">全部门店（ 共5个 ）</div>
<div class="searchs">
<div class="buttons">
<el-button class="button buttonlight" size="small">添加门店</el-button>
<el-button class="button buttondark" size="small">批量删除</el-button>
</div>
</template>
<!-- 搜索区 -->
<el-form
class="searchzone"
:inline="true"
:model="data.search"
label-width="auto"
>
<el-form-item label="关键词">
<el-input
size="small"
v-model="data.search.keys"
style="width:160px"
placeholder="请输入关键词"
/>
</el-form-item>
<el-button
class="button buttondark"
size="small"
style="margin-top:4px;"
>搜索</el-button
>
</el-form>
</div>
<div class="lists">
<el-table
stripe
class="list"
ref="multipleTable"
:data="list.main"
tooltip-effect="dark"
style="width: 100%"
@selection-change="listPick"
:header-cell-style="setListsHeadStyle"
>
<el-table-column type="selection" width="60"></el-table-column>
<el-table-column
prop="taskName"
label="门店名称"
align="center"
></el-table-column>
<el-table-column
prop="taskType"
label="门店类型"
align="center"
width="120"
></el-table-column>
<el-table-column
prop="bar"
label="门店负责人"
align="center"
width="120"
></el-table-column>
<el-table-column
prop="bar"
label="所属柜组"
align="center"
width="120"
></el-table-column>
<el-table-column
prop="bar"
label="位置"
align="center"
width="120"
></el-table-column>
<el-table-column
prop="bar"
label="门牌号"
align="center"
width="120"
></el-table-column>
<el-table-column label="操作" align="center" fixed="right" width="200">
<template slot-scope="scope">
<el-button type="text" class="btn" @click="testButtonClick(scope.row)"
>详情</el-button
>
<el-button type="text" class="btn" @click="testButtonClick(scope.row)"
>编辑</el-button
>
<el-button
type="text"
@click="testButtonClick(scope.row)"
class="listButtonRed"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
</div>
<div class="pages">
<el-pagination
@size-change="pagesSizeChange"
@current-change="pagesNowPageChange"
:current-page="currentPage4"
:page-sizes="[100, 200, 300, 400]"
:page-size="100"
layout="prev, pager, next, sizes, jumper"
:total="400"
></el-pagination>
</div>
</div>
</template>
<script>
export default {
}
components: {},
data() {
return {
list: {
main: [
{
id: "1001",
taskName: "2019年男装销售任务",
taskType: "拉新",
bar: "男装",
taskContent: "任务内容任务内容任务内容...",
sendDate: "2019/02/08"
},
{
id: "1002",
taskName: "2019年男装销售任务",
taskType: "拉新",
bar: "男装",
taskContent: "任务内容任务内容任务内容...",
sendDate: "2019/02/08"
},
{
id: "1003",
taskName: "2019年男装销售任务",
taskType: "拉新",
bar: "男装",
taskContent: "任务内容任务内容任务内容...",
sendDate: "2019/02/08"
}
],
search: {
bar: [
{
id: "1",
name: "全部"
},
{
id: "2",
name: "测试"
}
],
taskType: [
{
id: "1",
name: "全部"
},
{
id: "2",
name: "测试"
}
]
}
},
data: {
search: {
bar: "",
taskType: "",
date: "",
keys: ""
},
page: {
nowPageNum: 4
}
}
};
},
created() {},
methods: {
listPick() {},
testButtonClick() {},
pagesSizeChange() {},
pagesNowPageChange() {},
setListsHeadStyle({ row, column, rowIndex, columnIndex }) {
if (rowIndex === 0) {
return "background-color: #0B0F32; border-right: 1px solid white;color: white;";
} else {
return "";
}
}
}
};
</script>
<style>
<style lang="scss" scoped>
.btn {
font-size:14px;
font-weight:bold;
color:rgba(102,102,102,1);
}
.main {
height: 100vh;
padding: 0px 16px 16px;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.searchs {
height: 40px;
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.buttons {
width: 266px;
display: flex;
flex-direction: row;
justify-content: flex-start;
}
.buttonlight {
background-color: #e8e9fe;
color: #4e59c7;
border: 1px solid #4e59c7;
box-sizing: border-box;
}
.buttonlight:hover {
}
.buttondark {
width: 88px;
height: 32px;
background-color: #4e59c7;
color: #ffffff;
border: 1px solid #4e59c7;
box-sizing: border-box;
}
.buttondark:hover {
}
.searchzone {
height: 40px;
width: auto;
min-width: 654px;
text-align: right;
}
.lists {
height: auto;
min-height: 70%;
width: 100%;
margin-top: 20px;
}
.listButtonRed {
color: red;
}
.pages {
height: 40px;
width: 100%;
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
}
.title {
height: 48px;
line-height: 48px;
font-size: 16px;
font-weight: bold;
color: rgba(56, 56, 56, 1);
border-bottom: 1px solid #f8f8f8;
margin-bottom: 16px;
}
</style>
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