Commit 152b8681 authored by xd's avatar xd

进件管理样式调整

parent 35d0e243
...@@ -14,8 +14,8 @@ ...@@ -14,8 +14,8 @@
</div> </div>
</div> </div>
<div class="br"> <div class="br">
<el-form class="searchzone" :model="formData" label-width="auto"> <el-form class="searchzone" :model="formData" label-width="auto" ref="counterForm" :rules = "rules" >
<el-form-item label="柜组名称:"> <el-form-item label="柜组名称:" prop="name">
<el-input <el-input
size="small" size="small"
v-model="formData.name" v-model="formData.name"
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
placeholder="请输入柜组编号" placeholder="请输入柜组编号"
/> />
</el-form-item> </el-form-item>
<el-form-item label="柜组负责人:"> <el-form-item label="柜组负责人:" prop="people">
<el-select <el-select
size="small" size="small"
v-model="formData.people" v-model="formData.people"
...@@ -54,7 +54,9 @@ ...@@ -54,7 +54,9 @@
placeholder="请输入所在区域" placeholder="请输入所在区域"
/> />
</el-form-item> </el-form-item>
<el-form-item label="门店:"> <div class="cs">
<el-form-item label="门店:">
</el-form-item>
<div> <div>
<el-transfer <el-transfer
style="text-align: left; display: inline-block" style="text-align: left; display: inline-block"
...@@ -71,7 +73,7 @@ ...@@ -71,7 +73,7 @@
> >
</el-transfer> </el-transfer>
</div> </div>
</el-form-item> </div>
</el-form> </el-form>
</div> </div>
</div> </div>
...@@ -129,7 +131,15 @@ export default { ...@@ -129,7 +131,15 @@ export default {
id: "2", id: "2",
name: "李四" name: "李四"
} }
] ],
rules: {
name: [
{ required: true, message: '请输入柜组名称', trigger: 'blur' },
],
people: [
{ required: true, message: '请选择活动负责人', trigger: 'change' }
]
}
}; };
}, },
methods: { methods: {
...@@ -148,6 +158,9 @@ export default { ...@@ -148,6 +158,9 @@ export default {
</script> </script>
<style scoped> <style scoped>
.cs {
display: flex;
}
.choose { .choose {
padding: 16px; padding: 16px;
font-size: 16px; font-size: 16px;
......
<template>
<div class="ct">
<el-dialog
:visible.sync="moveDialog"
width="65%"
:show-close="false"
:close-on-click-modal="false"
>
<div class="choose">
<div class="title">
<div class="cg">添加门店</div>
<div class="circle" @click="handleClose">
<d2-icon-svg name="close" class="icon" />
</div>
</div>
<div class="br">
<el-form
class="searchzone"
:model="formData"
label-width="auto"
ref="counterForm"
:rules="rules"
>
<el-form-item label="柜组名称:" prop="name">
<el-input
size="small"
v-model="formData.name"
style="width:240px"
placeholder="请输入门店名称"
/>
</el-form-item>
<el-form-item label="门店类型:">
<el-select
size="small"
v-model="formData.type"
placeholder="请选择门店类型"
style="width:240px"
>
<el-option
v-for="item in personList"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="所属柜组:" prop="counter">
<el-select
size="small"
v-model="formData.counter"
placeholder="请选择所属柜组"
style="width:240px"
>
<el-option
v-for="item in counter"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="柜组负责人:" prop="people">
<el-select
size="small"
v-model="formData.people"
placeholder="请选择柜组负责人"
style="width:240px"
>
<el-option
v-for="item in personList"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="门牌号:">
<el-input
size="small"
v-model="formData.number"
style="width:240px"
placeholder="请输入门牌号"
/>
</el-form-item>
<el-form-item label="位置:">
<el-input
size="small"
v-model="formData.area"
style="width:240px"
placeholder="请输入位置"
/>
</el-form-item>
<div class="cs">
<el-form-item label="绑定店员:">
</el-form-item>
<div>
<el-transfer
style="text-align: left; display: inline-block"
v-model="value4"
:left-default-checked="[]"
:right-default-checked="[]"
:titles="['选择', '已选']"
:button-texts="['删除', '添加']"
@change="handleChange"
:data="data"
>
<span slot-scope="{ option }"
>{{ option.key }} - {{ option.label }}</span
>
</el-transfer>
</div>
</div>
</el-form>
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="handleCancel" size="small">取 消</el-button>
<el-button type="primary" @click="handleFinish" size="small"
>确 定</el-button
>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
props: {
moveDialog: {
type: Boolean,
default: false
}
},
data() {
const generateData = _ => {
const data = [];
for (let i = 1; i <= 15; i++) {
data.push({
key: i,
label: `备选项 ${i}`,
disabled: i % 4 === 0
});
}
return data;
};
return {
data: generateData(),
value: [1],
value4: [1],
renderFunc(h, option) {
return <span>{ option.key } - { option.label }</span>;
},
formData: {
name: "",
code: "",
people: "",
type: "",
number: "",
area: ""
},
personList: [
{
id: "1",
name: "张三"
},
{
id: "2",
name: "李四"
}
],
rules: {
name: [{ required: true, message: "请输入柜组名称", trigger: "blur" }],
people: [
{ required: true, message: "请选择活动负责人", trigger: "change" }
],
counter: [
{ required: true, message: "请选择所属柜组", trigger: "change" }
]
}
};
},
methods: {
handleCancel() {
this.$emit("handleCancel");
},
handleFinish() {
this.$emit("handleFinish", false);
},
handleChange() {},
handleClose() {
this.$emit("handleCancel");
}
}
};
</script>
<style scoped>
.choose {
padding: 16px;
font-size: 16px;
font-weight: bold;
color: rgba(56, 56, 56, 1);
box-sizing: border-box;
margin-bottom: 20px;
}
.title {
display: flex;
align-items: center;
justify-content: space-between;
/* border-bottom: 1px solid #f8f8f8; */
padding-bottom: 10px;
}
.transfer-footer {
margin-left: 20px;
padding: 6px 5px;
}
.ct >>> .el-dialog__header {
padding: 0 !important;
}
.ct >>> .el-dialog__body {
padding: 0;
}
.ct >>> .el-transfer-panel {
width: 250px;
}
.circle {
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 50%;
border: 1px solid rgba(208, 2, 27, 1);
position: relative;
}
.circle >>> .icon {
width: 28px;
height: 28px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.br {
border-top: 1px solid #f8f8f8;
border-bottom: 1px solid #f8f8f8;
padding: 24px 60px;
}
.cs {
display: flex;
}
</style>
...@@ -14,7 +14,12 @@ ...@@ -14,7 +14,12 @@
</div> </div>
</div> </div>
<div class="br"> <div class="br">
<el-form class="searchzone" :model="formData" label-width="auto"> <el-form
class="searchzone"
:model="formData"
label-width="auto"
disabled
>
<el-form-item label="柜组名称:"> <el-form-item label="柜组名称:">
<el-input <el-input
size="small" size="small"
...@@ -32,21 +37,13 @@ ...@@ -32,21 +37,13 @@
/> />
</el-form-item> </el-form-item>
<el-form-item label="柜组负责人:"> <el-form-item label="柜组负责人:">
<el-select <el-input
size="small" size="small"
v-model="formData.people" v-model="formData.people"
placeholder="请选择柜组负责人"
style="width:240px" style="width:240px"
> />
<el-option
v-for="item in personList"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item> </el-form-item>
<el-form-item label="柜组编号:"> <el-form-item label="所在区域:">
<el-input <el-input
size="small" size="small"
v-model="formData.area" v-model="formData.area"
...@@ -55,22 +52,27 @@ ...@@ -55,22 +52,27 @@
/> />
</el-form-item> </el-form-item>
<el-form-item label="门店:"> <el-form-item label="门店:">
<div> <el-table
<el-transfer stripe
style="text-align: left; display: inline-block" class="list"
v-model="value4" ref="multipleTable table"
:left-default-checked="[]" :data="tableData"
:right-default-checked="[]" tooltip-effect="dark"
:titles="['选择', '已选']" style="width: 100%"
:button-texts="['删除', '添加']" height="calc(100% - 120px)"
@change="handleChange" >
:data="data" <el-table-column type="index" label="序号" width="60"></el-table-column>
> <el-table-column
<span slot-scope="{ option }" prop="taskName"
>{{ option.key }} - {{ option.label }}</span label="柜组名称"
> align="center"
</el-transfer> ></el-table-column>
</div> <el-table-column
prop="number"
label="门牌号"
align="center"
></el-table-column>
</el-table>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
...@@ -86,6 +88,7 @@ ...@@ -86,6 +88,7 @@
</template> </template>
<script> <script>
export default { export default {
props: { props: {
moveDialog: { moveDialog: {
...@@ -94,32 +97,13 @@ export default { ...@@ -94,32 +97,13 @@ export default {
} }
}, },
data() { data() {
const generateData = _ => {
const data = [];
for (let i = 1; i <= 15; i++) {
data.push({
key: i,
label: `备选项 ${i}`
});
}
return data;
};
return { return {
data: generateData(),
value: [1],
value4: [1],
renderFunc(h, option) {
return (
<span>
{option.key} - {option.label}
</span>
);
},
formData: { formData: {
name: "", name: "",
code: "", code: "",
people: "" people: ""
}, },
tableData: [],
personList: [ personList: [
{ {
id: "1", id: "1",
...@@ -146,8 +130,13 @@ export default { ...@@ -146,8 +130,13 @@ export default {
} }
}; };
</script> </script>
<style >
/* .table >>> .el-table td, .el-table th {
padding: 0 !important;
} */
</style>
<style scoped> <style scoped>
.choose { .choose {
padding: 16px; padding: 16px;
font-size: 16px; font-size: 16px;
......
<template>
<div class="ct">
<el-dialog
:visible.sync="moveDialog"
width="65%"
:show-close="false"
:close-on-click-modal="false"
>
<div class="choose">
<div class="title">
<div class="cg">门店详情</div>
<div class="circle" @click="handleClose">
<d2-icon-svg name="close" class="icon" />
</div>
</div>
<div class="br">
<el-form class="searchzone" :model="formData" label-width="auto" ref="counterForm" disabled >
<el-form-item label="柜组名称:" >
<el-input
size="small"
v-model="formData.name"
style="width:240px"
placeholder="请输入门店名称"
/>
</el-form-item>
<el-form-item label="门店类型:">
<el-select
size="small"
v-model="formData.type"
placeholder="请选择门店类型"
style="width:240px"
>
<el-option
v-for="item in personList"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="所属柜组:" >
<el-select
size="small"
v-model="formData.counter"
placeholder="请选择所属柜组"
style="width:240px"
>
<el-option
v-for="item in counter"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="柜组负责人:" >
<el-select
size="small"
v-model="formData.people"
placeholder="请选择柜组负责人"
style="width:240px"
>
<el-option
v-for="item in personList"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="门牌号:">
<el-input
size="small"
v-model="formData.number"
style="width:240px"
placeholder="请输入门牌号"
/>
</el-form-item>
<el-form-item label="位置:">
<el-input
size="small"
v-model="formData.area"
style="width:240px"
placeholder="请输入位置"
/>
</el-form-item>
<el-form-item label="绑定店员:">
<el-table
stripe
class="list"
ref="multipleTable table"
:data="tableData"
tooltip-effect="dark"
style="width: 100%"
height="calc(100% - 120px)"
>
<el-table-column type="index" label="序号" width="60"></el-table-column>
<el-table-column
prop="taskName"
label="门店名称"
align="center"
></el-table-column>
<el-table-column
prop="number"
label="门牌号"
align="center"
></el-table-column>
</el-table>
</el-form-item>
</el-form>
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="handleCancel" size="small">取 消</el-button>
<el-button type="primary" @click="handleFinish" size="small"
>确 定</el-button
>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
props: {
moveDialog: {
type: Boolean,
default: false
},
tableData: []
},
data() {
const generateData = _ => {
const data = [];
for (let i = 1; i <= 15; i++) {
data.push({
key: i,
label: `备选项 ${i}`
});
}
return data;
};
return {
data: generateData(),
value: [1],
value4: [1],
renderFunc(h, option) {
return (
<span>
{option.key} - {option.label}
</span>
);
},
formData: {
name: "",
code: "",
people: "",
type: "",
number: "",
area: ""
},
personList: [
{
id: "1",
name: "张三"
},
{
id: "2",
name: "李四"
}
],
tableData: []
};
},
methods: {
handleCancel() {
this.$emit("handleCancel")
},
handleFinish() {
this.$emit("handleFinish", false)
},
handleChange() {},
handleClose() {
this.$emit("handleCancel");
}
}
};
</script>
<style scoped>
.choose {
padding: 16px;
font-size: 16px;
font-weight: bold;
color: rgba(56, 56, 56, 1);
box-sizing: border-box;
margin-bottom: 20px;
}
.title {
display: flex;
align-items: center;
justify-content: space-between;
/* border-bottom: 1px solid #f8f8f8; */
padding-bottom: 10px;
}
.transfer-footer {
margin-left: 20px;
padding: 6px 5px;
}
.ct >>> .el-dialog__header {
padding: 0 !important;
}
.ct >>> .el-dialog__body {
padding: 0;
}
.ct >>> .el-transfer-panel {
width: 250px;
}
.circle {
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 50%;
border: 1px solid rgba(208, 2, 27, 1);
position: relative;
}
.circle >>> .icon {
width: 28px;
height: 28px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.br {
border-top: 1px solid #f8f8f8;
border-bottom: 1px solid #f8f8f8;
padding: 24px 60px;
}
</style>
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<div class="title">全部柜组( 共5个 )</div> <div class="title">全部柜组( 共5个 )</div>
<div class="searchs"> <div class="searchs">
<div class="buttons"> <div class="buttons">
<el-button class="button buttonlight" size="small">添加柜组</el-button> <el-button class="button buttonlight" size="small" @click="addCounter">添加柜组</el-button>
<el-button class="button buttondark" size="small">批量删除</el-button> <el-button class="button buttondark" size="small">批量删除</el-button>
</div> </div>
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
:data="list.main" :data="list.main"
tooltip-effect="dark" tooltip-effect="dark"
style="width: 100%" style="width: 100%"
height="calc(100% - 120px)" height="340"
@selection-change="listPick" @selection-change="listPick"
> >
<el-table-column type="selection" width="60"></el-table-column> <el-table-column type="selection" width="60"></el-table-column>
...@@ -99,14 +99,17 @@ ...@@ -99,14 +99,17 @@
:total="400" :total="400"
></el-pagination> ></el-pagination>
</div> </div>
<counter-detail v-if="DetailDialog" :moveDialog="DetailDialog" @handleCancel="DetailDialog = false" ></counter-detail> <add-counter v-if="counterDialog" :moveDialog="counterDialog" @handleCancel="counterDialog = false" @handleFinish="addCounterFinish"></add-counter>
<counter-detail v-if="detailDialog" :moveDialog="detailDialog" @handleCancel="detailDialog = false" ></counter-detail>
</div> </div>
</template> </template>
<script> <script>
import CounterDetail from "./components/counterDetail" import CounterDetail from "./components/counterDetail"
import AddCounter from "./components/addCounter"
export default { export default {
components: { components: {
CounterDetail CounterDetail,
AddCounter
}, },
data() { data() {
return { return {
...@@ -171,7 +174,8 @@ export default { ...@@ -171,7 +174,8 @@ export default {
nowPageNum: 4 nowPageNum: 4
} }
}, },
DetailDialog: false detailDialog: false,
counterDialog: false,
}; };
}, },
created() {}, created() {},
...@@ -181,14 +185,23 @@ export default { ...@@ -181,14 +185,23 @@ export default {
pagesSizeChange() {}, pagesSizeChange() {},
pagesNowPageChange() {}, pagesNowPageChange() {},
handleDetail() { handleDetail() {
this.detailDialog = true
},
addCounter() {
this.counterDialog = true
}, },
addCounterFinish() {
this.counterDialog = false
}
} }
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.main { .main {
height: 100vh; position: relative;
background-color: #fff;
box-sizing: border-box;
height: 100%;
padding: 0px 16px 16px; padding: 0px 16px 16px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -257,8 +270,6 @@ export default { ...@@ -257,8 +270,6 @@ export default {
.title { .title {
height: 48px; height: 48px;
line-height: 48px; line-height: 48px;
font-size:16px;
font-weight:bold;
color:rgba(56,56,56,1); color:rgba(56,56,56,1);
border-bottom: 1px solid #f8f8f8; border-bottom: 1px solid #f8f8f8;
margin-bottom: 16px; margin-bottom: 16px;
......
...@@ -79,8 +79,8 @@ export default { ...@@ -79,8 +79,8 @@ export default {
.test { .test {
width: 13%; width: 13%;
min-height: 100%; min-height: 100%;
/* box-shadow: 0px 2px 4px 0px rgba(221, 221, 221, 1); */
display: flex; display: flex;
box-shadow:0px 2px 4px 0px rgba(221,221,221,1);
} }
.content { .content {
width: 82%; width: 82%;
...@@ -91,15 +91,22 @@ export default { ...@@ -91,15 +91,22 @@ export default {
padding: 0 !important; padding: 0 !important;
} }
.tac { .tac {
/* width:180px; */ width: 100%;
height: 100%; height: 100%;
box-shadow:0px 2px 4px 0px rgba(221,221,221,1);
/* box-shadow: 0px 4px 0px 0px rgba(221, 221, 221, 1); */ /* box-shadow: 0px 4px 0px 0px rgba(221, 221, 221, 1); */
} }
.tac >>> .el-menu { .tac >>> .el-menu {
border-right: none; border-right: none;
} }
.tac >>> .el-menu-item.is-active{
border-left: 2px solid rgba(78,89,199,1);
}
.content { .content {
flex: 6; flex: 6;
padding: 16px;
background-color: #f8f8f8;
} }
.circle { .circle {
display: inline-block; display: inline-block;
......
...@@ -8,24 +8,24 @@ ...@@ -8,24 +8,24 @@
<span>全部</span> <span>全部</span>
<span class="number">(103)</span> <span class="number">(103)</span>
</div> </div>
<div> <!-- <div>
<span><d2-icon-svg name="edit" class="icon"/></span> <span><d2-icon-svg name="edit" class="icon"/></span>
<span style="margin-left:8px;" <span style="margin-left:8px;"
><d2-icon-svg name="delete" class="icon" ><d2-icon-svg name="delete" class="icon"
/></span> /></span>
</div> </div> -->
</div> </div>
<div class="ty" style="margin:15px 0;"> <div class="ty" style="margin:15px 0;">
<div> <div>
<span>未分组</span> <span>未分组</span>
<span class="number">(8)</span> <span class="number">(8)</span>
</div> </div>
<div> <!-- <div>
<span><d2-icon-svg name="edit" class="icon"/></span> <span><d2-icon-svg name="edit" class="icon"/></span>
<span style="margin-left:8px;" <span style="margin-left:8px;"
><d2-icon-svg name="delete" class="icon" ><d2-icon-svg name="delete" class="icon"
/></span> /></span>
</div> </div> -->
</div> </div>
<el-tree <el-tree
:data="data1" :data="data1"
...@@ -49,13 +49,11 @@ ...@@ -49,13 +49,11 @@
</div> </div>
<div class="end"> <div class="end">
<span class="add-l" @click="addCounter">添加柜组</span> <span class="add-l" @click="addCounter">添加柜组</span>
<span class="add-r">添加部门</span> <span class="add-r" @click="addDept">添加部门</span>
</div> </div>
</div> </div>
<div class="right"> <div class="right">
<template slot="header"> <div class="top">三号柜组(共18人)</div>
全部商品( 共5个 )
</template>
<div class="searchs"> <div class="searchs">
<div class="buttons"> <div class="buttons">
<el-button class="button buttonlight" size="small" @click="synchronismMember" <el-button class="button buttonlight" size="small" @click="synchronismMember"
...@@ -88,8 +86,7 @@ ...@@ -88,8 +86,7 @@
:data="list.main" :data="list.main"
tooltip-effect="dark" tooltip-effect="dark"
style="width: 100%" style="width: 100%"
height="calc(100% - 120px)" height="370px"
@selection-change="listPick"
> >
<el-table-column type="selection" width="60"></el-table-column> <el-table-column type="selection" width="60"></el-table-column>
<el-table-column <el-table-column
...@@ -97,6 +94,12 @@ ...@@ -97,6 +94,12 @@
label="姓名" label="姓名"
align="center" align="center"
></el-table-column> ></el-table-column>
<el-table-column
prop="id"
label="企业微信ID"
align="center"
width = "120"
></el-table-column>
<el-table-column <el-table-column
prop="taskType" prop="taskType"
label="部门" label="部门"
...@@ -141,12 +144,14 @@ ...@@ -141,12 +144,14 @@
@handleFinish="removeFinish" @handleFinish="removeFinish"
></move-dialog> ></move-dialog>
<add-counter v-if="counterDialog" :moveDialog="counterDialog" @handleCancel="counterDialog = false" @handleFinish="addCounterFinish"></add-counter> <add-counter v-if="counterDialog" :moveDialog="counterDialog" @handleCancel="counterDialog = false" @handleFinish="addCounterFinish"></add-counter>
<add-store v-if="storeDialog" :moveDialog="storeDialog" @handleCancel="storeDialog = false" @handleFinish="addStoreFinish"></add-store>
</div> </div>
</template> </template>
<script> <script>
import MoveDialog from "./components/move"; import MoveDialog from "./components/move";
import AddCounter from "./components/addCounter"; import AddCounter from "./components/addCounter";
import AddStore from './components/addStore'
export default { export default {
data() { data() {
const data1 = [ const data1 = [
...@@ -219,6 +224,14 @@ export default { ...@@ -219,6 +224,14 @@ export default {
taskContent: "任务内容任务内容任务内容...", taskContent: "任务内容任务内容任务内容...",
sendDate: "2019/02/08" sendDate: "2019/02/08"
}, },
{
id: "1003",
taskName: "2019年男装销售任务",
taskType: "拉新",
bar: "男装",
taskContent: "任务内容任务内容任务内容...",
sendDate: "2019/02/08"
},
{ {
id: "1003", id: "1003",
taskName: "2019年男装销售任务", taskName: "2019年男装销售任务",
...@@ -263,12 +276,14 @@ export default { ...@@ -263,12 +276,14 @@ export default {
total: 100 total: 100
}, },
moveDialogShow: false, moveDialogShow: false,
counterDialog: false counterDialog: false,
storeDialog: false
}; };
}, },
components: { components: {
MoveDialog, MoveDialog,
AddCounter AddCounter,
AddStore
}, },
methods: { methods: {
append(data) { append(data) {
...@@ -306,12 +321,22 @@ export default { ...@@ -306,12 +321,22 @@ export default {
}, },
addCounterFinish() { addCounterFinish() {
this.counterDialog = false this.counterDialog = false
},
addDept() {
this.counterDialog = true
},
addStoreFinish() {
this.storeDialog = false
} }
} }
}; };
</script> </script>
<style scoped> <style scoped>
.top {
padding-bottom: 10px;
border-bottom: 1px solid #f8f8f8;
}
.end { .end {
position: absolute; position: absolute;
display: flex; display: flex;
...@@ -364,7 +389,6 @@ export default { ...@@ -364,7 +389,6 @@ export default {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
background-color: #f8f8f8; background-color: #f8f8f8;
padding: 16px;
min-height: 100%; min-height: 100%;
} }
.left { .left {
...@@ -380,9 +404,10 @@ export default { ...@@ -380,9 +404,10 @@ export default {
box-sizing: border-box; box-sizing: border-box;
} }
.right { .right {
position: relative;
padding: 10px; padding: 10px;
margin-left: 10px; margin-left: 10px;
width: 78%; width: 80%;
} }
.number { .number {
font-size: 14px; font-size: 14px;
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<div class="title">全部门店( 共5个 )</div> <div class="title">全部门店( 共5个 )</div>
<div class="searchs"> <div class="searchs">
<div class="buttons"> <div class="buttons">
<el-button class="button buttonlight" size="small">添加门店</el-button> <el-button class="button buttonlight" size="small" @click="addStore">添加门店</el-button>
<el-button class="button buttondark" size="small">批量删除</el-button> <el-button class="button buttondark" size="small">批量删除</el-button>
</div> </div>
...@@ -38,6 +38,7 @@ ...@@ -38,6 +38,7 @@
:data="list.main" :data="list.main"
tooltip-effect="dark" tooltip-effect="dark"
style="width: 100%" style="width: 100%"
height="340px"
@selection-change="listPick" @selection-change="listPick"
> >
<el-table-column type="selection" width="60"></el-table-column> <el-table-column type="selection" width="60"></el-table-column>
...@@ -80,7 +81,7 @@ ...@@ -80,7 +81,7 @@
<el-table-column label="操作" align="center" fixed="right" width="200"> <el-table-column label="操作" align="center" fixed="right" width="200">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button type="text" class="btn" @click="testButtonClick(scope.row)" <el-button type="text" class="btn" @click="handleDetail(scope.row)"
>详情</el-button >详情</el-button
> >
<el-button type="text" class="btn" @click="testButtonClick(scope.row)" <el-button type="text" class="btn" @click="testButtonClick(scope.row)"
...@@ -107,11 +108,18 @@ ...@@ -107,11 +108,18 @@
:total="400" :total="400"
></el-pagination> ></el-pagination>
</div> </div>
<add-store v-if="storeDialog" :moveDialog="storeDialog" @handleCancel="storeDialog = false" @handleFinish="addStoreFinish"></add-store>
<store-detail v-if="detailDialog" :moveDialog="detailDialog" @handleCancel="detailDialog = false" ></store-detail>
</div> </div>
</template> </template>
<script> <script>
import AddStore from './components/addStore'
import StoreDetail from './components/storeDetail'
export default { export default {
components: {}, components: {
AddStore,
StoreDetail
},
data() { data() {
return { return {
list: { list: {
...@@ -132,6 +140,38 @@ export default { ...@@ -132,6 +140,38 @@ export default {
taskContent: "任务内容任务内容任务内容...", taskContent: "任务内容任务内容任务内容...",
sendDate: "2019/02/08" sendDate: "2019/02/08"
}, },
{
id: "1003",
taskName: "2019年男装销售任务",
taskType: "拉新",
bar: "男装",
taskContent: "任务内容任务内容任务内容...",
sendDate: "2019/02/08"
},
{
id: "1003",
taskName: "2019年男装销售任务",
taskType: "拉新",
bar: "男装",
taskContent: "任务内容任务内容任务内容...",
sendDate: "2019/02/08"
},
{
id: "1003",
taskName: "2019年男装销售任务",
taskType: "拉新",
bar: "男装",
taskContent: "任务内容任务内容任务内容...",
sendDate: "2019/02/08"
},
{
id: "1003",
taskName: "2019年男装销售任务",
taskType: "拉新",
bar: "男装",
taskContent: "任务内容任务内容任务内容...",
sendDate: "2019/02/08"
},
{ {
id: "1003", id: "1003",
taskName: "2019年男装销售任务", taskName: "2019年男装销售任务",
...@@ -174,7 +214,9 @@ export default { ...@@ -174,7 +214,9 @@ export default {
page: { page: {
nowPageNum: 4 nowPageNum: 4
} }
} },
storeDialog: false,
detailDialog: false
}; };
}, },
created() {}, created() {},
...@@ -189,6 +231,15 @@ export default { ...@@ -189,6 +231,15 @@ export default {
} else { } else {
return ""; return "";
} }
},
addStore() {
this.storeDialog = true
},
handleDetail() {
this.detailDialog = true
},
addStoreFinish() {
this.storeDialog = false
} }
} }
}; };
...@@ -200,7 +251,10 @@ export default { ...@@ -200,7 +251,10 @@ export default {
color:rgba(102,102,102,1); color:rgba(102,102,102,1);
} }
.main { .main {
height: 100vh; position: relative;
background-color: #fff;
box-sizing: border-box;
height: 100%;
padding: 0px 16px 16px; padding: 0px 16px 16px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -257,8 +311,6 @@ export default { ...@@ -257,8 +311,6 @@ export default {
.title { .title {
height: 48px; height: 48px;
line-height: 48px; line-height: 48px;
font-size: 16px;
font-weight: bold;
color: rgba(56, 56, 56, 1); color: rgba(56, 56, 56, 1);
border-bottom: 1px solid #f8f8f8; border-bottom: 1px solid #f8f8f8;
margin-bottom: 16px; margin-bottom: 16px;
......
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