Skip to content

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

进件管理样式调整

parent 35d0e243
Show whitespace changes
Inline Side-by-side
Showing with 675 additions and 87 deletions
ybf_admin/src/pages/in/contact/components/addCounter.vue
View file @ 152b8681
......@@ -14,8 +14,8 @@
</div>
</div>
<div class="br">
<el-form class="searchzone" :model="formData" label-width="auto">
<el-form-item label="柜组名称:">
<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"
......@@ -31,7 +31,7 @@
placeholder="请输入柜组编号"
/>
</el-form-item>
<el-form-item label="柜组负责人:">
<el-form-item label="柜组负责人:" prop="people">
<el-select
size="small"
v-model="formData.people"
......@@ -54,7 +54,9 @@
placeholder="请输入所在区域"
/>
</el-form-item>
<div class="cs">
<el-form-item label="门店:">
</el-form-item>
<div>
<el-transfer
style="text-align: left; display: inline-block"
......@@ -71,7 +73,7 @@
>
</el-transfer>
</div>
</el-form-item>
</div>
</el-form>
</div>
</div>
......@@ -129,7 +131,15 @@ export default {
id: "2",
name: "李四"
}
],
rules: {
name: [
{ required: true, message: '请输入柜组名称', trigger: 'blur' },
],
people: [
{ required: true, message: '请选择活动负责人', trigger: 'change' }
]
}
};
},
methods: {
......@@ -148,6 +158,9 @@ export default {
</script>
<style scoped>
.cs {
display: flex;
}
.choose {
padding: 16px;
font-size: 16px;
......
ybf_admin/src/pages/in/contact/components/addStore.vue 0 → 100644
View file @ 152b8681
<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>
ybf_admin/src/pages/in/contact/components/counterDetail.vue
View file @ 152b8681
......@@ -14,7 +14,12 @@
</div>
</div>
<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-input
size="small"
......@@ -32,21 +37,13 @@
/>
</el-form-item>
<el-form-item label="柜组负责人:">
<el-select
<el-input
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-form-item label="所在区域:">
<el-input
size="small"
v-model="formData.area"
......@@ -55,22 +52,27 @@
/>
</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-table
stripe
class="list"
ref="multipleTable table"
:data="tableData"
tooltip-effect="dark"
style="width: 100%"
height="calc(100% - 120px)"
>
</el-transfer>
</div>
<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>
......@@ -86,6 +88,7 @@
</template>
<script>
export default {
props: {
moveDialog: {
......@@ -94,32 +97,13 @@ export default {
}
},
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: ""
},
tableData: [],
personList: [
{
id: "1",
......@@ -146,8 +130,13 @@ export default {
}
};
</script>
<style >
/* .table >>> .el-table td, .el-table th {
padding: 0 !important;
} */
</style>
<style scoped>
.choose {
padding: 16px;
font-size: 16px;
......
ybf_admin/src/pages/in/contact/components/storeDetail.vue 0 → 100644
View file @ 152b8681
<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>
ybf_admin/src/pages/in/contact/counter.vue
View file @ 152b8681
......@@ -3,7 +3,7 @@
<div class="title">全部柜组（ 共5个 ）</div>
<div class="searchs">
<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>
</div>
......@@ -33,7 +33,7 @@
:data="list.main"
tooltip-effect="dark"
style="width: 100%"
height="calc(100% - 120px)"
height="340"
@selection-change="listPick"
>
<el-table-column type="selection" width="60"></el-table-column>
......@@ -99,14 +99,17 @@
:total="400"
></el-pagination>
</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>
</template>
<script>
import CounterDetail from "./components/counterDetail"
import AddCounter from "./components/addCounter"
export default {
components: {
CounterDetail
CounterDetail,
AddCounter
},
data() {
return {
......@@ -171,7 +174,8 @@ export default {
nowPageNum: 4
}
},
DetailDialog: false
detailDialog: false,
counterDialog: false,
};
},
created() {},
......@@ -181,14 +185,23 @@ export default {
pagesSizeChange() {},
pagesNowPageChange() {},
handleDetail() {
this.detailDialog = true
},
addCounter() {
this.counterDialog = true
},
addCounterFinish() {
this.counterDialog = false
}
}
};
</script>
<style lang="scss" scoped>
.main {
height: 100vh;
position: relative;
background-color: #fff;
box-sizing: border-box;
height: 100%;
padding: 0px 16px 16px;
display: flex;
flex-direction: column;
......@@ -257,8 +270,6 @@ export default {
.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;
......
ybf_admin/src/pages/in/contact/index.vue
View file @ 152b8681
......@@ -79,8 +79,8 @@ export default {
.test {
width: 13%;
min-height: 100%;
/* box-shadow: 0px 2px 4px 0px rgba(221, 221, 221, 1); */
display: flex;
box-shadow:0px 2px 4px 0px rgba(221,221,221,1);
}
.content {
width: 82%;
......@@ -91,15 +91,22 @@ export default {
padding: 0 !important;
}
.tac {
/* width:180px; */
width: 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); */
}
.tac >>> .el-menu {
border-right: none;
}
.tac >>> .el-menu-item.is-active{
border-left: 2px solid rgba(78,89,199,1);
}
.content {
flex: 6;
padding: 16px;
background-color: #f8f8f8;
}
.circle {
display: inline-block;
......
ybf_admin/src/pages/in/contact/mail.vue
View file @ 152b8681
......@@ -8,24 +8,24 @@
<span>全部</span>
<span class="number">(103)</span>
</div>
<div>
<!-- <div>
<span><d2-icon-svg name="edit" class="icon"/></span>
<span style="margin-left:8px;"
><d2-icon-svg name="delete" class="icon"
/></span>
</div>
</div> -->
</div>
<div class="ty" style="margin:15px 0;">
<div>
<span>未分组</span>
<span class="number">(8)</span>
</div>
<div>
<!-- <div>
<span><d2-icon-svg name="edit" class="icon"/></span>
<span style="margin-left:8px;"
><d2-icon-svg name="delete" class="icon"
/></span>
</div>
</div> -->
</div>
<el-tree
:data="data1"
......@@ -49,13 +49,11 @@
</div>
<div class="end">
<span class="add-l" @click="addCounter">添加柜组</span>
<span class="add-r">添加部门</span>
<span class="add-r" @click="addDept">添加部门</span>
</div>
</div>
<div class="right">
<template slot="header">
全部商品（ 共5个 ）
</template>
<div class="top">三号柜组（共18人）</div>
<div class="searchs">
<div class="buttons">
<el-button class="button buttonlight" size="small" @click="synchronismMember"
......@@ -88,8 +86,7 @@
:data="list.main"
tooltip-effect="dark"
style="width: 100%"
height="calc(100% - 120px)"
@selection-change="listPick"
height="370px"
>
<el-table-column type="selection" width="60"></el-table-column>
<el-table-column
......@@ -97,6 +94,12 @@
label="姓名"
align="center"
></el-table-column>
<el-table-column
prop="id"
label="企业微信ID"
align="center"
width = "120"
></el-table-column>
<el-table-column
prop="taskType"
label="部门"
......@@ -141,12 +144,14 @@
@handleFinish="removeFinish"
></move-dialog>
<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>
</template>
<script>
import MoveDialog from "./components/move";
import AddCounter from "./components/addCounter";
import AddStore from './components/addStore'
export default {
data() {
const data1 = [
......@@ -219,6 +224,14 @@ export default {
taskContent: "任务内容任务内容任务内容...",
sendDate: "2019/02/08"
},
{
id: "1003",
taskName: "2019年男装销售任务",
taskType: "拉新",
bar: "男装",
taskContent: "任务内容任务内容任务内容...",
sendDate: "2019/02/08"
},
{
id: "1003",
taskName: "2019年男装销售任务",
......@@ -263,12 +276,14 @@ export default {
total: 100
},
moveDialogShow: false,
counterDialog: false
counterDialog: false,
storeDialog: false
};
},
components: {
MoveDialog,
AddCounter
AddCounter,
AddStore
},
methods: {
append(data) {
......@@ -306,12 +321,22 @@ export default {
},
addCounterFinish() {
this.counterDialog = false
},
addDept() {
this.counterDialog = true
},
addStoreFinish() {
this.storeDialog = false
}
}
};
</script>
<style scoped>
.top {
padding-bottom: 10px;
border-bottom: 1px solid #f8f8f8;
}
.end {
position: absolute;
display: flex;
......@@ -364,7 +389,6 @@ export default {
display: flex;
flex-direction: row;
background-color: #f8f8f8;
padding: 16px;
min-height: 100%;
}
.left {
......@@ -380,9 +404,10 @@ export default {
box-sizing: border-box;
}
.right {
position: relative;
padding: 10px;
margin-left: 10px;
width: 78%;
width: 80%;
}
.number {
font-size: 14px;
......
ybf_admin/src/pages/in/contact/store.vue
View file @ 152b8681
......@@ -3,7 +3,7 @@
<div class="title">全部门店（ 共5个 ）</div>
<div class="searchs">
<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>
</div>
......@@ -38,6 +38,7 @@
:data="list.main"
tooltip-effect="dark"
style="width: 100%"
height="340px"
@selection-change="listPick"
>
<el-table-column type="selection" width="60"></el-table-column>
......@@ -80,7 +81,7 @@
<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 type="text" class="btn" @click="handleDetail(scope.row)"
>详情</el-button
>
<el-button type="text" class="btn" @click="testButtonClick(scope.row)"
......@@ -107,11 +108,18 @@
:total="400"
></el-pagination>
</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>
</template>
<script>
import AddStore from './components/addStore'
import StoreDetail from './components/storeDetail'
export default {
components: {},
components: {
AddStore,
StoreDetail
},
data() {
return {
list: {
......@@ -132,6 +140,38 @@ export default {
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",
taskName: "2019年男装销售任务",
taskType: "拉新",
bar: "男装",
taskContent: "任务内容任务内容任务内容...",
sendDate: "2019/02/08"
},
{
id: "1003",
taskName: "2019年男装销售任务",
......@@ -174,7 +214,9 @@ export default {
page: {
nowPageNum: 4
}
}
},
storeDialog: false,
detailDialog: false
};
},
created() {},
......@@ -189,6 +231,15 @@ export default {
} else {
return "";
}
},
addStore() {
this.storeDialog = true
},
handleDetail() {
this.detailDialog = true
},
addStoreFinish() {
this.storeDialog = false
}
}
};
......@@ -200,7 +251,10 @@ export default {
color:rgba(102,102,102,1);
}
.main {
height: 100vh;
position: relative;
background-color: #fff;
box-sizing: border-box;
height: 100%;
padding: 0px 16px 16px;
display: flex;
flex-direction: column;
......@@ -257,8 +311,6 @@ export default {
.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;
......
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