Commit 534694f7 authored by xd's avatar xd

柜组添加

parents e1c5c08f 7127565a
# 所有环境默认 # 所有环境默认
# 页面 title 前缀 # 页面 title 前缀
VUE_APP_TITLE=D2Admin VUE_APP_TITLE = 亿百分
# 网络请求公用地址 # 网络请求公用地址
VUE_APP_API=/api/ VUE_APP_API=/api/
......
# 开发环境 # 开发环境
# 页面 title 前缀 # 页面 title 前缀
# VUE_APP_TITLE=D2Admin Dev # VUE_APP_TITLE= D2Admin Dev
VUE_APP_TITLE=亿百分 VUE_APP_TITLE = 亿百分
...@@ -25,6 +25,7 @@ ...@@ -25,6 +25,7 @@
</script> </script>
<style lang="scss"> <style lang="scss">
@import '~@/assets/style/public-class.scss'; @import '~@/assets/style/public-class.scss';
@import '~@/assets/style/button/index.scss';
@import '~@/assets/style/pagination/index.scss';
</style> </style>
This source diff could not be displayed because it is too large. You can view the blob instead.
.searchs{
height: 40px;
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin:16px 0 20px 0;
.buttons{
width: 266px;
display: flex;
flex-direction: row;
justify-content: flex-start;
}
.buttonlight {
width: 88px;
height: 32px;
background-color: #e8e9fe;
color: #4e59c7;
border: 1px solid #4e59c7;
box-sizing: border-box;
margin-top: 4px;
&:hover{
background-color: rgba(78, 89, 199, 0.8);
color: #fff;
}
}
.buttondark {
width: 88px;
height: 32px;
background-color: #4e59c7;
color: #ffffff;
border: 1px solid #4e59c7;
box-sizing: border-box;
margin-top: 4px;
&:hover{
background-color: rgba(78, 89, 199, 0.8);
color: #fff;
}
}
}
.el-pagination{
position: absolute;
bottom:00px;
right: 30px;
}
/*修改滚动条样式*/
div::-webkit-scrollbar{
width:10px;
height:10px;
/**/
}
div::-webkit-scrollbar-track{
background: rgb(239, 239, 239);
border-radius:2px;
}
div::-webkit-scrollbar-thumb{
background: #bfbfbf;
border-radius:10px;
}
div::-webkit-scrollbar-thumb:hover{
background: #555;
}
div::-webkit-scrollbar-corner{
background: #179a16;
}
.el-table.list{
.el-button--text{
color: #666666;
font-weight: normal;
&:hover{
color: #333333;
}
&.listButtonRed{
color: #D0021B;
&:hover{
color: red;
}
}
}
}
...@@ -55,3 +55,7 @@ $sizes: (0, 5, 10, 15, 20); ...@@ -55,3 +55,7 @@ $sizes: (0, 5, 10, 15, 20);
.#{$prefix}-pr { padding-right: 20px !important; } .#{$prefix}-pr { padding-right: 20px !important; }
.#{$prefix}-pb { padding-bottom: 20px !important; } .#{$prefix}-pb { padding-bottom: 20px !important; }
.#{$prefix}-pl { padding-left: 20px !important; } .#{$prefix}-pl { padding-left: 20px !important; }
.pRelative{
position: relative;
}
...@@ -4,12 +4,13 @@ $theme-name: 'd2'; ...@@ -4,12 +4,13 @@ $theme-name: 'd2';
$theme-bg-color: #ebf1f6; $theme-bg-color: #ebf1f6;
// 主题背景图片遮罩 // 主题背景图片遮罩
$theme-bg-mask: rgba(#000, 0); $theme-bg-mask: rgba(#000, 0);
$theme-border-color: #EEEEEE;
// container组件 // container组件
$theme-container-background-color: rgba(#FFF, 1); $theme-container-background-color: rgba(#FFF, 1);
$theme-container-header-footer-background-color: #FFF; $theme-container-header-footer-background-color: #FFF;
$theme-container-border-inner: 1px solid #cfd7e5; $theme-container-border-inner: 1px solid $theme-border-color;
$theme-container-border-outer: 1px solid #cfd7e5; $theme-container-border-outer: 1px solid $theme-border-color;
$theme-multiple-page-control-color: $color-text-normal; $theme-multiple-page-control-color: $color-text-normal;
$theme-multiple-page-control-color-active: #2f74ff; $theme-multiple-page-control-color-active: #2f74ff;
...@@ -58,4 +59,4 @@ $theme-aside-menu-empty-text-color: $color-text-normal; ...@@ -58,4 +59,4 @@ $theme-aside-menu-empty-text-color: $color-text-normal;
$theme-aside-menu-empty-background-color: rgba(#000, .03); $theme-aside-menu-empty-background-color: rgba(#000, .03);
$theme-aside-menu-empty-icon-color-hover: $color-text-main; $theme-aside-menu-empty-icon-color-hover: $color-text-main;
$theme-aside-menu-empty-text-color-hover: $color-text-main; $theme-aside-menu-empty-text-color-hover: $color-text-main;
$theme-aside-menu-empty-background-color-hover: rgba(#000, .05); $theme-aside-menu-empty-background-color-hover: rgba(#000, .05);
\ No newline at end of file
...@@ -288,16 +288,13 @@ ...@@ -288,16 +288,13 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
padding: 16px;
.d2-container-full__header { .d2-container-full__header {
padding: 20px; padding:0 16px 16px 16px;
} }
.d2-container-full__body { .d2-container-full__body {
flex-grow: 1; flex-grow: 1;
// height: 100%;
// Z-style
// border: 2px solid red;
height: 100%; height: 100%;
padding: 20px 20px;
overflow: auto; overflow: auto;
position: relative; position: relative;
} }
......
...@@ -60,7 +60,7 @@ ...@@ -60,7 +60,7 @@
.el-menu--horizontal .el-menu .el-submenu__title:hover { .el-menu--horizontal .el-menu .el-submenu__title:hover {
@include theme-menu-hover-style; @include theme-menu-hover-style;
} }
// 顶栏 // 顶栏
.d2-theme-header { .d2-theme-header {
// 顶栏菜单空间不足时显示的滚动控件 // 顶栏菜单空间不足时显示的滚动控件
...@@ -296,15 +296,14 @@ ...@@ -296,15 +296,14 @@
// [组件] // [组件]
// d2-container-full 填充型 // d2-container-full 填充型
.d2-container-full { .d2-container-full {
border: $theme-container-border-outer; background-color: $theme-container-header-footer-background-color;
border-top: none;
border-bottom: none;
.d2-container-full__header { .d2-container-full__header {
border-bottom: $theme-container-border-inner; border-bottom: $theme-container-border-inner;
background: $theme-container-header-footer-background-color; background: $theme-container-header-footer-background-color;
} }
.d2-container-full__body { .d2-container-full__body {
background: $theme-container-background-color; //background: $theme-container-background-color;
} }
.d2-container-full__footer { .d2-container-full__footer {
border-top: $theme-container-border-inner; border-top: $theme-container-border-inner;
......
<template> <template>
<d2-container> <d2-container class="pRelative">
<template slot="header">header</template> <template slot="header">
goods/main/index.vue 全部商品( 共5个 )
<template slot="footer">footer</template> </template>
<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>
<!-- 搜索区 -->
<el-form class="searchzone" :inline="true" :model="formData" label-width="auto">
<el-form-item label="状态">
<el-select
size="small"
v-model="formData.status"
placeholder="请选择状态"
style="width:160px;"
>
<el-option
v-for="item in statusList"
: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.keys"
style="width:160px"
placeholder="请输入关键词"
/>
</el-form-item>
<el-button class="button buttondark" size="small">搜索</el-button>
</el-form>
</div>
<el-table :data="data" class="list" style="width: 100%" empty-text="暂无商品信息" height="calc(100% - 120px)">
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column prop="name" label="商品图片"></el-table-column>
<el-table-column prop="name" label="商品名称"></el-table-column>
<el-table-column prop="name" label="商品价格"></el-table-column>
<el-table-column prop="name" label="库存"></el-table-column>
<el-table-column prop="name" label="佣金"></el-table-column>
<el-table-column prop="message" label="状态"></el-table-column>
<!-- 查看详情 -->
<el-table-column
fixed="right"
align="center"
label="操作"
width="140"
@selection-change="listPick">
<template slot-scope="scope">
<el-button type="text" @click="">详情</el-button>
<el-button type="text" @click="">编辑</el-button>
<el-button type="text" @click="" class="listButtonRed">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
@current-change="handleCurrentChange"
:current-page="page.currentPage"
:page-size="page.size"
layout="total, prev, pager, next, jumper"
:total="page.total">
</el-pagination>
</d2-container> </d2-container>
</template> </template>
<script>
export default {
data () {
return {
formData:{
status:'',
keys:''
},
statusList:[],
data: [
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
forbidEdit: true,
showEditButton: true
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄',
forbidEdit: false,
showEditButton: true
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
forbidEdit: false,
showEditButton: false
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄',
forbidEdit: false,
showEditButton: true
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄',
forbidEdit: false,
showEditButton: true
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄',
forbidEdit: false,
showEditButton: true
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄',
forbidEdit: false,
showEditButton: true
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄',
forbidEdit: false,
showEditButton: true
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄',
forbidEdit: false,
showEditButton: true
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄',
forbidEdit: false,
showEditButton: true
},
],
page:{
currentPage:1,
size:20,
total:100
}
}
},
methods: {
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
},
listPick() {
},
}
}
</script>
<style lang="scss">
</style>
<template>
<div class="gz">柜组</div>
</template>
<script>
export default {
}
</script>
<style scoped>
.gz {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
<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">
<el-form-item label="柜组名称:">
<el-input
size="small"
v-model="formData.name"
style="width:240px"
placeholder="请输入柜组名称"
/>
</el-form-item>
<el-form-item label="柜组编号:">
<el-input
size="small"
v-model="formData.code"
style="width:240px"
placeholder="请输入柜组编号"
/>
</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.area"
style="width:240px"
placeholder="请输入所在区域"
/>
</el-form-item>
<el-form-item label="门店:">
<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>
</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
}
},
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: ""
},
personList: [
{
id: "1",
name: "张三"
},
{
id: "2",
name: "李四"
}
]
};
},
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>
<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">
<el-form-item label="柜组名称:">
<el-input
size="small"
v-model="formData.name"
style="width:240px"
placeholder="请输入柜组名称"
/>
</el-form-item>
<el-form-item label="柜组编号:">
<el-input
size="small"
v-model="formData.code"
style="width:240px"
placeholder="请输入柜组编号"
/>
</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.area"
style="width:240px"
placeholder="请输入所在区域"
/>
</el-form-item>
<el-form-item label="门店:">
<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>
</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
}
},
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: ""
},
personList: [
{
id: "1",
name: "张三"
},
{
id: "2",
name: "李四"
}
]
};
},
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>
...@@ -7,28 +7,30 @@ ...@@ -7,28 +7,30 @@
:close-on-click-modal="false" :close-on-click-modal="false"
> >
<div class="choose"> <div class="choose">
<div class="br"> <div class="title">
<div class="cg">选择分组</div> <div class="cg">选择分组</div>
<div class="circle" @click="handleClose"> <div class="circle" @click="handleClose">
<d2-icon-svg name="close" class="icon" /> <d2-icon-svg name="close" class="icon" />
</div> </div>
</div> </div>
</div> <div class="br">
<div style="text-align: center"> <div style="text-align: center">
<el-transfer <el-transfer
style="text-align: left; display: inline-block" style="text-align: left; display: inline-block"
v-model="value4" v-model="value4"
:left-default-checked="[]" :left-default-checked="[]"
:right-default-checked="[]" :right-default-checked="[]"
:titles="['选择', '已选']" :titles="['选择', '已选']"
:button-texts="['删除', '添加']" :button-texts="['删除', '添加']"
@change="handleChange" @change="handleChange"
:data="data" :data="data"
> >
<span slot-scope="{ option }" <span slot-scope="{ option }"
>{{ option.key }} - {{ option.label }}</span >{{ option.key }} - {{ option.label }}</span
> >
</el-transfer> </el-transfer>
</div>
</div>
</div> </div>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button @click="handleCancel" size="small">取 消</el-button> <el-button @click="handleCancel" size="small">取 消</el-button>
...@@ -81,7 +83,7 @@ export default { ...@@ -81,7 +83,7 @@ export default {
}, },
handleChange() {}, handleChange() {},
handleClose() { handleClose() {
this.$emit("handleCancel"); this.$emit("handleCancel");
} }
} }
}; };
...@@ -89,21 +91,19 @@ export default { ...@@ -89,21 +91,19 @@ export default {
<style scoped> <style scoped>
.choose { .choose {
height: 52px;
padding: 16px; padding: 16px;
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
color: rgba(56, 56, 56, 1); color: rgba(56, 56, 56, 1);
box-sizing: border-box; box-sizing: border-box;
margin-bottom: 20px; margin-bottom: 20px;
} }
.br { .title {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
border-bottom: 1px solid #f8f8f8; /* border-bottom: 1px solid #f8f8f8; */
padding-bottom: 10px; padding-bottom: 10px;
} }
.transfer-footer { .transfer-footer {
margin-left: 20px; margin-left: 20px;
...@@ -134,4 +134,9 @@ export default { ...@@ -134,4 +134,9 @@ export default {
top: 50%; top: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
.br {
border-top: 1px solid #f8f8f8;
border-bottom: 1px solid #f8f8f8;
padding: 24px 0;
}
</style> </style>
...@@ -33,8 +33,8 @@ ...@@ -33,8 +33,8 @@
:data="list.main" :data="list.main"
tooltip-effect="dark" tooltip-effect="dark"
style="width: 100%" style="width: 100%"
height="calc(100% - 120px)"
@selection-change="listPick" @selection-change="listPick"
:header-cell-style="setListsHeadStyle"
> >
<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
...@@ -72,7 +72,7 @@ ...@@ -72,7 +72,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)"
...@@ -99,11 +99,15 @@ ...@@ -99,11 +99,15 @@
:total="400" :total="400"
></el-pagination> ></el-pagination>
</div> </div>
<counter-detail v-if="DetailDialog" :moveDialog="DetailDialog" @handleCancel="DetailDialog = false" ></counter-detail>
</div> </div>
</template> </template>
<script> <script>
import CounterDetail from "./components/counterDetail"
export default { export default {
components: {}, components: {
CounterDetail
},
data() { data() {
return { return {
list: { list: {
...@@ -166,7 +170,8 @@ export default { ...@@ -166,7 +170,8 @@ export default {
page: { page: {
nowPageNum: 4 nowPageNum: 4
} }
} },
DetailDialog: false
}; };
}, },
created() {}, created() {},
...@@ -175,13 +180,9 @@ export default { ...@@ -175,13 +180,9 @@ export default {
testButtonClick() {}, testButtonClick() {},
pagesSizeChange() {}, pagesSizeChange() {},
pagesNowPageChange() {}, pagesNowPageChange() {},
setListsHeadStyle({ row, column, rowIndex, columnIndex }) { handleDetail() {
if (rowIndex === 0) {
return "background-color: #0B0F32; border-right: 1px solid white;color: white;"; },
} else {
return "";
}
}
} }
}; };
</script> </script>
......
...@@ -67,22 +67,31 @@ export default { ...@@ -67,22 +67,31 @@ export default {
</script> </script>
<style></style> <style></style>
<style scoped> <style scoped>
.ct >>> .d2-container-full__body{
overflow: visible !important;
}
.ct >>> .d2-container-full {
padding: 0 !important;
}
.d2-theme-container-main { .d2-theme-container-main {
background-color: #f8f8f8; background-color: #f8f8f8;
} }
.test { .test {
/* border: 2px solid red; */ width: 13%;
min-height: 100%; min-height: 100%;
/* box-shadow: 0px 2px 4px 0px rgba(221, 221, 221, 1); */ /* box-shadow: 0px 2px 4px 0px rgba(221, 221, 221, 1); */
display: flex; display: flex;
} }
.content {
width: 82%;
}
.ct >>> .d2-container-full__body { .ct >>> .d2-container-full__body {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: 0 !important; padding: 0 !important;
} }
.tac { .tac {
width:180px; /* width:180px; */
height: 100%; height: 100%;
/* box-shadow: 0px 4px 0px 0px rgba(221, 221, 221, 1); */ /* box-shadow: 0px 4px 0px 0px rgba(221, 221, 221, 1); */
} }
......
...@@ -48,117 +48,105 @@ ...@@ -48,117 +48,105 @@
</el-tree> </el-tree>
</div> </div>
<div class="end"> <div class="end">
<span class="add-l">添加柜组</span> <span class="add-l" @click="addCounter">添加柜组</span>
<span class="add-r">添加部门</span> <span class="add-r">添加部门</span>
</div> </div>
</div> </div>
<div class="right"> <div class="right">
<div class="main"> <template slot="header">
<div class="searchs"> 全部商品( 共5个 )
<div class="buttons"> </template>
<el-button <div class="searchs">
class="button buttonlight" <div class="buttons">
size="small" <el-button class="button buttonlight" size="small" @click="synchronismMember"
@click="synchronismMember" >同步成员</el-button
>同步成员</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-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">搜索</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-button class="button buttondark" size="small" @click="handleMove">移动</el-button>
<el-table-column
prop="taskName"
label="姓名"
align="center"
></el-table-column>
<el-table-column
prop="taskType"
label="部门"
align="center"
width="150"
></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="150"
></el-table-column>
<el-table-column label="同步时间" width="180" align="center">
<template slot-scope="scope">{{ scope.row.sendDate }}</template>
</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="pageData.pageSize"
:page-sizes="[100, 200, 300, 400]"
:page-size="100"
layout="prev, pager, next, sizes, jumper"
:total="400"
></el-pagination>
</div> </div>
<!-- 搜索区 -->
<el-form
class="searchzone"
:inline="true"
:model="formData"
label-width="auto"
>
<el-form-item label="关键词">
<el-input
size="small"
v-model="formData.keys"
style="width:160px"
placeholder="请输入关键词"
/>
</el-form-item>
<el-button class="button buttondark" size="small">搜索</el-button>
</el-form>
</div> </div>
<el-table
stripe
class="list"
ref="multipleTable"
:data="list.main"
tooltip-effect="dark"
style="width: 100%"
height="calc(100% - 120px)"
@selection-change="listPick"
>
<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="150"
></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="150"
></el-table-column>
<el-table-column label="同步时间" width="180" align="center">
<template slot-scope="scope">{{ scope.row.sendDate }}</template>
</el-table-column>
<el-table-column
prop="bar"
label="备注"
align="center"
width="120"
></el-table-column>
</el-table>
<el-pagination
@current-change="handleCurrentChange"
:current-page="page.currentPage"
:page-size="page.size"
layout="total, prev, pager, next, jumper"
:total="page.total"
>
</el-pagination>
</div> </div>
<move-dialog v-if = "moveDialogShow" :moveDialog = "moveDialogShow" @handleCancel="moveDialogShow = false" @handleFinish="removeFinish"></move-dialog> <move-dialog
<!-- <share v-if="moveDialogShow"
v-if="showReviewModel" :moveDialog="moveDialogShow"
:dialogVisible="showReviewModel" @handleCancel="moveDialogShow = false"
@handleCancel="showReviewModel = false" @handleFinish="removeFinish"
@handlePeopleId="getPeopleId" ></move-dialog>
></share>--> <add-counter v-if="counterDialog" :moveDialog="counterDialog" @handleCancel="counterDialog = false" @handleFinish="addCounterFinish"></add-counter>
</div> </div>
</template> </template>
<script> <script>
import MoveDialog from "./components/move" import MoveDialog from "./components/move";
import AddCounter from "./components/addCounter";
export default { export default {
data() { data() {
const data1 = [ const data1 = [
...@@ -264,26 +252,23 @@ export default { ...@@ -264,26 +252,23 @@ export default {
} }
}, },
isShow: false, isShow: false,
data: { formData: {
search: { status: "",
bar: "", keys: ""
taskType: "", },
date: "", statusList: [],
keys: "" page: {
}, currentPage: 1,
page: { size: 20,
nowPageNum: 4 total: 100
}
}, },
moveDialogShow: false, moveDialogShow: false,
pageData: { counterDialog: false
pageSize: 1,
total: 10
}
}; };
}, },
components: { components: {
MoveDialog MoveDialog,
AddCounter
}, },
methods: { methods: {
append(data) { append(data) {
...@@ -304,27 +289,23 @@ export default { ...@@ -304,27 +289,23 @@ export default {
testButtonClick() {}, testButtonClick() {},
pagesSizeChange() {}, pagesSizeChange() {},
pagesNowPageChange() {}, pagesNowPageChange() {},
setListsHeadStyle({ row, column, rowIndex, columnIndex }) {
if (rowIndex === 0) {
return "background-color: #0B0F32; border-right: 1px solid white;color: white;";
} else {
return "";
}
},
synchronismMember() { synchronismMember() {
this.isShow = true; this.isShow = true;
this.$emit("isShow", this.isShow); this.$emit("isShow", this.isShow);
}, },
handleMove() { handleMove() {
this.moveDialogShow = true this.moveDialogShow = true;
console.log(111111); console.log(111111);
}, },
removeFinish() { removeFinish() {
this.moveDialogShow = false this.moveDialogShow = false;
}, },
currentPage() { currentPage() {},
addCounter() {
this.counterDialog = true
},
addCounterFinish() {
this.counterDialog = false
} }
} }
}; };
...@@ -333,12 +314,12 @@ export default { ...@@ -333,12 +314,12 @@ export default {
<style scoped> <style scoped>
.end { .end {
position: absolute; position: absolute;
height: 32px;
display: flex; display: flex;
align-items: center; align-items: center;
border: 1px solid rgba(78, 89, 199, 1); border: 1px solid rgba(78, 89, 199, 1);
width: 100%; width: 100%;
bottom: 0; bottom: 0;
box-sizing: border-box;
} }
.add-l, .add-l,
.add-r { .add-r {
...@@ -389,16 +370,19 @@ export default { ...@@ -389,16 +370,19 @@ export default {
.left { .left {
position: relative; position: relative;
width: 20%; width: 20%;
} }
.left, .left,
.right { .right {
background-color: #fff; background-color: #fff;
min-height: 100%; height: 518px;
overflow: auto;
box-sizing: border-box;
} }
.right { .right {
padding: 10px; padding: 10px;
margin-left: 10px; margin-left: 10px;
width: 80%; width: 78%;
} }
.number { .number {
font-size: 14px; font-size: 14px;
...@@ -411,66 +395,21 @@ export default { ...@@ -411,66 +395,21 @@ export default {
height: 16px; height: 16px;
} }
main { .main {
/* // border: 2px solid orange; */ /* // border: 2px solid orange; */
height: 100vh; height: 100vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
} }
.searchs {
/* // border: 2px solid red; */
height: 40px;
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.buttons {
/* // border: 2px solid darkcyan;
// width: 30%;
// min-width: 266px; */
width: 266px;
display: flex;
flex-direction: row;
justify-content: flex-start;
}
.buttonlight {
width: 88px;
height: 32px;
margin-top: 4px;
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;
margin-top: 4px;
}
.buttondark:hover {
}
.searchzone { .searchzone {
/* // border: 2px solid orange; */
height: 40px; height: 40px;
width: auto; width: auto;
min-width: 654px; min-width: 654px;
text-align: right; text-align: right;
} }
.lists { .lists {
/* // border: 2px solid greenyellow; */
height: auto; height: auto;
/* // min-height: 400px; */
min-height: 70%; min-height: 70%;
width: 100%; width: 100%;
margin-top: 20px; margin-top: 20px;
......
...@@ -39,7 +39,6 @@ ...@@ -39,7 +39,6 @@
tooltip-effect="dark" tooltip-effect="dark"
style="width: 100%" style="width: 100%"
@selection-change="listPick" @selection-change="listPick"
:header-cell-style="setListsHeadStyle"
> >
<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
...@@ -207,14 +206,7 @@ export default { ...@@ -207,14 +206,7 @@ export default {
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
} }
.searchs {
height: 40px;
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.buttons { .buttons {
width: 266px; width: 266px;
display: flex; display: flex;
......
<template>
<div class="shop">门店</div>
</template>
<script>
export default {
}
</script>
<style scoped>
.shop {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
<template>
<d2-container>
<template slot="header">header</template>
Hello World
<template slot="footer">footer</template>
</d2-container>
</template>
...@@ -47,6 +47,7 @@ ...@@ -47,6 +47,7 @@
></el-option> ></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<!-- </el-col> --> <!-- </el-col> -->
<!-- 关键字 --> <!-- 关键字 -->
...@@ -73,8 +74,8 @@ ...@@ -73,8 +74,8 @@
tooltip-effect="dark" tooltip-effect="dark"
style="width: 100%" style="width: 100%"
@selection-change="listPick" @selection-change="listPick"
:header-cell-style="setListsHeadStyle"
> >
<!-- :header-cell-style="setListsHeadStyle"-->
<el-table-column type="selection" width="60"></el-table-column> <el-table-column type="selection" width="60"></el-table-column>
<el-table-column prop="taskName" label="任务名" align="center" width="200"></el-table-column> <el-table-column prop="taskName" label="任务名" align="center" width="200"></el-table-column>
<el-table-column prop="taskType" label="任务类型" align="center" width="120"></el-table-column> <el-table-column prop="taskType" label="任务类型" align="center" width="120"></el-table-column>
...@@ -105,173 +106,225 @@ ...@@ -105,173 +106,225 @@
:total="400" :total="400"
></el-pagination> ></el-pagination>
</div> </div>
<div class="dialogs">
<el-dialog
title="创建任务"
:visible.sync="cache.status.createDialog"
width="60%"
:before-close="dialogCreateBeforeClose">
<div class="dialogMain">
<span>会当凌绝顶,一览众山小。</span>
</div>
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="dialogCreateCancel">取 消</el-button>
<el-button size="small" type="primary" @click="dialogCreateSubmit">保 存</el-button>
<el-button size="small" type="primary" @click="dialogCreateSubmitSend">保存并发布</el-button>
</span>
</el-dialog>
</div>
</div> </div>
</template> </template>
<script> <script>
import TaskBar from "../bar/index"; import TaskBar from "../bar/index";
import TaskCom from "../com/index"; import TaskCom from "../com/index";
import TaskCount from "../count/index"; import TaskCount from "../count/index";
export default { export default {
components: {}, components: {},
data() { data() {
return { return {
list: { cache: {
main: [ status: {
{ createDialog: false
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: { list: {
bar: [ main: [
{ {
id: "1", id: "1001",
name: "全部" taskName: "2019年男装销售任务",
taskType: "拉新",
bar: "男装",
taskContent: "任务内容任务内容任务内容...",
sendDate: "2019/02/08"
}, },
{ {
id: "2", id: "1002",
name: "测试" taskName: "2019年男装销售任务",
} taskType: "拉新",
], bar: "男装",
taskType: [ taskContent: "任务内容任务内容任务内容...",
{ sendDate: "2019/02/08"
id: "1",
name: "全部"
}, },
{ {
id: "2", id: "1003",
name: "测试" 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() {
}, },
data: { testButtonClick() {
search: { },
bar: "", pagesSizeChange() {
taskType: "", },
date: "", pagesNowPageChange() {
keys: "" },
}, setListsHeadStyle({row, column, rowIndex, columnIndex}) {
page: { if (rowIndex === 0) {
nowPageNum: 4 return "background-color: #0B0F32; border-right: 1px solid white;color: white;";
} else {
return "";
} }
} },
}; dialogCreateBeforeClose() {
}, },
created() {}, dialogCreateCancel() {
methods: { },
listPick() {}, dialogCreateSubmit() {
testButtonClick() {}, },
pagesSizeChange() {}, dialogCreateSubmitSend() {
pagesNowPageChange() {}, },
setListsHeadStyle({ row, column, rowIndex, columnIndex }) {
if (rowIndex === 0) {
return "background-color: #0B0F32; border-right: 1px solid white;color: white;";
} else {
return "";
}
} }
} };
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.main { .main {
// border: 2px solid orange; // border: 2px solid orange;
height: 100vh; height: 100vh;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.searchs {
// border: 2px solid red;
height: 40px;
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
display: flex; .buttons {
flex-direction: column; // border: 2px solid darkcyan;
justify-content: flex-start; // width: 30%;
} // min-width: 266px;
.searchs { width: 266px;
// border: 2px solid red; display: flex;
height: 40px; flex-direction: row;
width: 100%; justify-content: flex-start;
}
.buttonlight {
background-color: #e8e9fe;
color: #4e59c7;
border: 1px solid #4e59c7;
box-sizing: border-box;
}
.buttonlight:hover {
}
.buttondark {
background-color: #4e59c7;
color: #ffffff;
border: 1px solid #4e59c7;
box-sizing: border-box;
}
.buttondark:hover {
}
display: flex; .searchzone {
flex-direction: row; // border: 2px solid orange;
justify-content: space-between; height: 40px;
align-items: center; width: auto;
} min-width: 654px;
.buttons {
// border: 2px solid darkcyan;
// width: 30%;
// min-width: 266px;
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 {
background-color: #4e59c7;
color: #ffffff;
border: 1px solid #4e59c7;
box-sizing: border-box;
}
.buttondark:hover {
}
.searchzone {
// border: 2px solid orange;
height: 40px;
width: auto;
min-width: 654px;
// display: flex; // display: flex;
// flex-direction: row; // flex-direction: row;
// justify-content: space-between; // justify-content: space-between;
// align-items: center; // align-items: center;
} }
.lists {
// border: 2px solid greenyellow; .lists {
height: auto; /*border: 2px solid greenyellow;*/
// min-height: 400px; height: auto;
min-height: 70%; // min-height: 400px;
width: 100%; min-height: 70%;
margin-top: 20px; width: 100%;
} margin-top: 20px;
.list { }
// border: 1px solid red;
} .list {
.listButtonRed { // border: 1px solid red;
// border: 2px solid green; }
color: red;
} .listButtonRed {
.pages { // border: 2px solid green;
// border: 2px solid steelblue; color: red;
height: 40px; }
width: 100%;
display: flex; .pages {
flex-direction: row; // border: 2px solid steelblue;
justify-content: flex-end; height: 40px;
align-items: center; width: 100%;
} display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
}
</style>
<style lang="scss" scoped>
.dialogMain {
border: 2px solid red;
height: 100%;
}
</style> </style>
...@@ -13,7 +13,6 @@ ...@@ -13,7 +13,6 @@
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</el-card> </el-card>
<!-- </d2-container> -->
</template> </template>
<script> <script>
......
...@@ -121,43 +121,43 @@ const frameIn = [ ...@@ -121,43 +121,43 @@ const frameIn = [
title: '活动商品' title: '活动商品'
} }
}, },
// 演示页面 // // 演示页面
{ // {
path: 'page1', // path: 'page1',
name: 'page1', // name: 'page1',
meta: { // meta: {
title: '页面 1', // title: '页面 1',
auth: true // auth: true
}, // },
component: _import('demo/page1') // component: _import('demo/page1')
}, // },
{ // {
path: 'page2', // path: 'page2',
name: 'page2', // name: 'page2',
meta: { // meta: {
title: '页面 2', // title: '页面 2',
auth: true // auth: true
}, // },
component: _import('demo/page2') // component: _import('demo/page2')
}, // },
{ // {
path: 'page3', // path: 'page3',
name: 'page3', // name: 'page3',
meta: { // meta: {
title: '页面 3', // title: '页面 3',
auth: true // auth: true
}, // },
component: _import('demo/page3') // component: _import('demo/page3')
}, // },
{ // {
path: '/page-demo', // path: '/page-demo',
name: 'page-demo', // name: 'page-demo',
component: () => import('@/pages/page-demo'), // component: () => import('@/pages/page-demo'),
meta: { // meta: {
auth: true, // auth: true,
title: '新建示例' // title: '新建示例'
} // }
}, // },
// 系统 前端日志 // 系统 前端日志
{ {
path: 'log', path: 'log',
......
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