Commit 07a507de authored by xd's avatar xd

弹窗和部分页面调整

parent 2c5101df
<template> <template>
<div class="ct"> <div class="ct">
<el-dialog <el-dialog
:visible.sync="moveDialog" :visible.sync="counterDialog"
width="65%" width="65%"
:show-close="false" :show-close="false"
:close-on-click-modal="false" :before-close="handleClose"
> >
<div class="choose"> <div class="choose">
<div class="title"> <div class="title">
...@@ -14,7 +14,13 @@ ...@@ -14,7 +14,13 @@
</div> </div>
</div> </div>
<div class="br"> <div class="br">
<el-form class="searchzone" :model="formData" label-width="auto" ref="counterForm" :rules = "rules" > <el-form
class="searchzone"
:model="formData"
label-width="auto"
ref="addCounter"
:rules="rules"
>
<el-form-item label="柜组名称:" prop="name"> <el-form-item label="柜组名称:" prop="name">
<el-input <el-input
size="small" size="small"
...@@ -55,8 +61,7 @@ ...@@ -55,8 +61,7 @@
/> />
</el-form-item> </el-form-item>
<div class="cs"> <div class="cs">
<el-form-item label="门店:"> <el-form-item label="门店:"> </el-form-item>
</el-form-item>
<div> <div>
<el-transfer <el-transfer
style="text-align: left; display: inline-block" style="text-align: left; display: inline-block"
...@@ -78,8 +83,8 @@ ...@@ -78,8 +83,8 @@
</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('addCounter')" size="small">取 消</el-button>
<el-button type="primary" @click="handleFinish" size="small" <el-button type="primary" @click="handleFinish('addCounter')" size="small"
>确 定</el-button >确 定</el-button
> >
</span> </span>
...@@ -89,12 +94,6 @@ ...@@ -89,12 +94,6 @@
<script> <script>
export default { export default {
props: {
moveDialog: {
type: Boolean,
default: false
}
},
data() { data() {
const generateData = _ => { const generateData = _ => {
const data = []; const data = [];
...@@ -107,6 +106,7 @@ export default { ...@@ -107,6 +106,7 @@ export default {
return data; return data;
}; };
return { return {
counterDialog: false,
data: generateData(), data: generateData(),
value: [1], value: [1],
value4: [1], value4: [1],
...@@ -133,27 +133,46 @@ export default { ...@@ -133,27 +133,46 @@ export default {
} }
], ],
rules: { rules: {
name: [ name: [{ required: true, message: "请输入柜组名称", trigger: "blur" }],
{ required: true, message: '请输入柜组名称', trigger: 'blur' }, people: [
], { required: true, message: "请选择活动负责人", trigger: "change" }
people: [ ]
{ required: true, message: '请选择活动负责人', trigger: 'change' } }
]
}
}; };
}, },
methods: { methods: {
handleCancel() { handleChange() {},
this.$emit("handleCancel"); handleClose(done) {
this.$confirm("确认关闭?")
.then(_ => {
this.counterDialog = false;
})
.catch(_ => {});
}, },
handleFinish() { handleCancel(formName) {
this.$emit("handleFinish", false); this.$refs[formName].resetFields();
this.counterDialog = false;
}, },
handleChange() {}, handleFinish(formName) {
handleClose() { this.$refs[formName].validate((valid) => {
this.$emit("handleCancel"); if (valid) {
this.counterDialog = false;
} else {
console.log('error submit!!');
return false;
}
});
},
},
watch:{
counterDialog(){
if(this.counterDialog){
if(this.$refs.addCounter){
this.$refs.addCounter.resetFields();
}
}
}
} }
}
}; };
</script> </script>
...@@ -167,7 +186,6 @@ export default { ...@@ -167,7 +186,6 @@ export default {
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;
} }
.title { .title {
display: flex; display: flex;
......
<template> <template>
<div class="ct"> <div class="ct">
<el-dialog <el-dialog
:visible.sync="moveDialog" :visible.sync="addStoreDialog"
width="65%" width="65%"
:show-close="false" :show-close="false"
:close-on-click-modal="false" :before-close="handleClose"
> >
<div class="choose"> <div class="choose">
<div class="title"> <div class="title">
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
class="searchzone" class="searchzone"
:model="formData" :model="formData"
label-width="auto" label-width="auto"
ref="counterForm" ref="addStore"
:rules="rules" :rules="rules"
> >
<el-form-item label="柜组名称:" prop="name"> <el-form-item label="柜组名称:" prop="name">
...@@ -93,7 +93,7 @@ ...@@ -93,7 +93,7 @@
<div class="cs"> <div class="cs">
<el-form-item label="绑定店员:"> <el-form-item label="绑定店员:">
</el-form-item> </el-form-item>
<div> <div style="display:inline-block;">
<el-transfer <el-transfer
style="text-align: left; display: inline-block" style="text-align: left; display: inline-block"
v-model="value4" v-model="value4"
...@@ -111,14 +111,11 @@ ...@@ -111,14 +111,11 @@
</div> </div>
</div> </div>
</el-form> </el-form>
</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('addStore')" size="small">取 消</el-button>
<el-button type="primary" @click="handleFinish" size="small" <el-button type="primary" @click="handleFinish('addStore')" size="small">确 定</el-button>
>确 定</el-button
>
</span> </span>
</el-dialog> </el-dialog>
</div> </div>
...@@ -126,12 +123,6 @@ ...@@ -126,12 +123,6 @@
<script> <script>
export default { export default {
props: {
moveDialog: {
type: Boolean,
default: false
}
},
data() { data() {
const generateData = _ => { const generateData = _ => {
const data = []; const data = [];
...@@ -145,6 +136,7 @@ export default { ...@@ -145,6 +136,7 @@ export default {
return data; return data;
}; };
return { return {
addStoreDialog: false,
data: generateData(), data: generateData(),
value: [1], value: [1],
value4: [1], value4: [1],
...@@ -181,17 +173,39 @@ export default { ...@@ -181,17 +173,39 @@ export default {
}; };
}, },
methods: { methods: {
handleCancel() { handleClose(done) {
this.$emit("handleCancel"); this.$confirm('确认关闭?')
.then(_ => {
this.addStoreDialog = false
})
.catch(_ => {});
}, },
handleFinish() { handleCancel(formName) {
this.$emit("handleFinish", false); this.$refs[formName].resetFields();
this.addStoreDialog = false
},
handleFinish(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.addStoreDialog = false
} else {
console.log('error submit!!');
return false;
}
});
}, },
handleChange() {}, handleChange() {},
handleClose() {
this.$emit("handleCancel"); },
watch:{
addStoreDialog(){
if(this.addStoreDialog){
if(this.$refs.addStore){
this.$refs.addStore.resetFields();
}
}
}
} }
}
}; };
</script> </script>
...@@ -202,7 +216,6 @@ export default { ...@@ -202,7 +216,6 @@ export default {
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;
} }
.title { .title {
display: flex; display: flex;
......
<template> <template>
<div class="ct"> <div class="ct">
<el-dialog <el-dialog
:visible.sync="moveDialog" :visible.sync="detailDialog"
width="65%" width="65%"
:show-close="false" :show-close="false"
:close-on-click-modal="false"
> >
<div class="choose"> <div class="choose">
<div class="title"> <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>
...@@ -51,7 +50,8 @@ ...@@ -51,7 +50,8 @@
placeholder="请输入所在区域" placeholder="请输入所在区域"
/> />
</el-form-item> </el-form-item>
<el-form-item label="门店:"> <div class="tb">
<el-form-item label="门店:"> </el-form-item>
<el-table <el-table
stripe stripe
class="list" class="list"
...@@ -59,9 +59,12 @@ ...@@ -59,9 +59,12 @@
:data="tableData" :data="tableData"
tooltip-effect="dark" tooltip-effect="dark"
style="width: 100%" style="width: 100%"
height="calc(100% - 120px)"
> >
<el-table-column type="index" label="序号" width="60"></el-table-column> <el-table-column
type="index"
label="序号"
width="60"
></el-table-column>
<el-table-column <el-table-column
prop="taskName" prop="taskName"
label="柜组名称" label="柜组名称"
...@@ -73,22 +76,15 @@ ...@@ -73,22 +76,15 @@
align="center" align="center"
></el-table-column> ></el-table-column>
</el-table> </el-table>
</el-form-item> </div>
</el-form> </el-form>
</div> </div>
</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> </el-dialog>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
props: { props: {
moveDialog: { moveDialog: {
...@@ -98,6 +94,7 @@ export default { ...@@ -98,6 +94,7 @@ export default {
}, },
data() { data() {
return { return {
detailDialog: false,
formData: { formData: {
name: "", name: "",
code: "", code: "",
...@@ -117,39 +114,32 @@ export default { ...@@ -117,39 +114,32 @@ export default {
}; };
}, },
methods: { methods: {
handleCancel() {
this.$emit("handleCancel");
},
handleFinish() {
this.$emit("handleFinish", false);
},
handleChange() {},
handleClose() { handleClose() {
this.$emit("handleCancel"); this.detailDialog = false
}
},
watch:{
} }
}
}; };
</script> </script>
<style > <style>
/* .table >>> .el-table td, .el-table th {
padding: 0 !important;
} */
</style> </style>
<style scoped> <style scoped>
.tb {
display: flex;
}
.choose { .choose {
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;
} }
.title { .title {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
/* border-bottom: 1px solid #f8f8f8; */
padding-bottom: 10px; padding-bottom: 10px;
} }
.transfer-footer { .transfer-footer {
......
...@@ -154,7 +154,10 @@ export default { ...@@ -154,7 +154,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;
...@@ -217,8 +220,6 @@ export default { ...@@ -217,8 +220,6 @@ export default {
} }
.title { .title {
height: 48px; height: 48px;
font-size: 16px;
font-weight: bold;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
......
...@@ -96,7 +96,6 @@ export default { ...@@ -96,7 +96,6 @@ export default {
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;
} }
.title { .title {
display: flex; display: flex;
......
<template> <template>
<div class="ct"> <div class="ct">
<el-dialog <el-dialog
:visible.sync="moveDialog" :visible.sync="detailDialog"
width="65%" width="65%"
:show-close="false" :show-close="false"
:close-on-click-modal="false"
> >
<div class="choose"> <div class="choose">
<div class="title"> <div class="title">
...@@ -14,8 +13,13 @@ ...@@ -14,8 +13,13 @@
</div> </div>
</div> </div>
<div class="br"> <div class="br">
<el-form class="searchzone" :model="formData" label-width="auto" ref="counterForm" disabled > <el-form
<el-form-item label="柜组名称:" > class="searchzone"
:model="formData"
label-width="auto"
disabled
>
<el-form-item label="柜组名称:">
<el-input <el-input
size="small" size="small"
v-model="formData.name" v-model="formData.name"
...@@ -38,7 +42,7 @@ ...@@ -38,7 +42,7 @@
></el-option> ></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="所属柜组:" > <el-form-item label="所属柜组:">
<el-select <el-select
size="small" size="small"
v-model="formData.counter" v-model="formData.counter"
...@@ -53,7 +57,7 @@ ...@@ -53,7 +57,7 @@
></el-option> ></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="柜组负责人:" > <el-form-item label="柜组负责人:">
<el-select <el-select
size="small" size="small"
v-model="formData.people" v-model="formData.people"
...@@ -84,7 +88,8 @@ ...@@ -84,7 +88,8 @@
placeholder="请输入位置" placeholder="请输入位置"
/> />
</el-form-item> </el-form-item>
<el-form-item label="绑定店员:"> <div class="tb">
<el-form-item label="绑定店员:"> </el-form-item>
<el-table <el-table
stripe stripe
class="list" class="list"
...@@ -92,9 +97,12 @@ ...@@ -92,9 +97,12 @@
:data="tableData" :data="tableData"
tooltip-effect="dark" tooltip-effect="dark"
style="width: 100%" style="width: 100%"
height="calc(100% - 120px)"
> >
<el-table-column type="index" label="序号" width="60"></el-table-column> <el-table-column
type="index"
label="序号"
width="60"
></el-table-column>
<el-table-column <el-table-column
prop="taskName" prop="taskName"
label="门店名称" label="门店名称"
...@@ -106,51 +114,18 @@ ...@@ -106,51 +114,18 @@
align="center" align="center"
></el-table-column> ></el-table-column>
</el-table> </el-table>
</el-form-item> </div>
</el-form> </el-form>
</div> </div>
</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> </el-dialog>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
props: {
moveDialog: {
type: Boolean,
default: false
},
tableData: []
},
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: "",
...@@ -169,32 +144,28 @@ export default { ...@@ -169,32 +144,28 @@ export default {
name: "李四" name: "李四"
} }
], ],
tableData: [] tableData: [],
detailDialog: false
}; };
}, },
methods: { methods: {
handleCancel() {
this.$emit("handleCancel")
},
handleFinish() {
this.$emit("handleFinish", false)
},
handleChange() {},
handleClose() { handleClose() {
this.$emit("handleCancel"); this.detailDialog = false
} }
} }
}; };
</script> </script>
<style scoped> <style scoped>
.tb {
display: flex;
}
.choose { .choose {
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;
} }
.title { .title {
display: flex; display: flex;
......
...@@ -99,8 +99,8 @@ ...@@ -99,8 +99,8 @@
:total="400" :total="400"
></el-pagination> ></el-pagination>
</div> </div>
<add-counter v-if="counterDialog" :moveDialog="counterDialog" @handleCancel="counterDialog = false" @handleFinish="addCounterFinish"></add-counter> <add-counter ref="addCounter"></add-counter>
<counter-detail v-if="detailDialog" :moveDialog="detailDialog" @handleCancel="detailDialog = false" ></counter-detail> <counter-detail ref="counterDetail" ></counter-detail>
</div> </div>
</template> </template>
<script> <script>
...@@ -185,11 +185,12 @@ export default { ...@@ -185,11 +185,12 @@ export default {
pagesSizeChange() {}, pagesSizeChange() {},
pagesNowPageChange() {}, pagesNowPageChange() {},
handleDetail() { handleDetail() {
this.detailDialog = true this.$refs.counterDetail.detailDialog = true
}, },
addCounter() { addCounter() {
this.counterDialog = true this.$refs.addCounter.counterDialog= true
}, },
addCounterFinish() { addCounterFinish() {
this.counterDialog = false this.counterDialog = false
} }
......
...@@ -57,9 +57,7 @@ export default { ...@@ -57,9 +57,7 @@ export default {
handleMenuChange (index) { handleMenuChange (index) {
this.index = index this.index = index
}, },
contorlHistoryShow (val) { contorlHistoryShow (val) {
console.log(val, "val");
this.isHistoryShow = val this.isHistoryShow = val
} }
} }
...@@ -94,8 +92,6 @@ export default { ...@@ -94,8 +92,6 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
box-shadow:0px 2px 4px 0px rgba(221,221,221,1); 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 { .tac >>> .el-menu {
border-right: none; border-right: none;
......
...@@ -49,7 +49,7 @@ ...@@ -49,7 +49,7 @@
</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" @click="addDept">添加部门</span> <span class="add-r" @click="addStore">添加门店/专柜</span>
</div> </div>
</div> </div>
<div class="right"> <div class="right">
...@@ -143,8 +143,8 @@ ...@@ -143,8 +143,8 @@
@handleCancel="moveDialogShow = false" @handleCancel="moveDialogShow = false"
@handleFinish="removeFinish" @handleFinish="removeFinish"
></move-dialog> ></move-dialog>
<add-counter v-if="counterDialog" :moveDialog="counterDialog" @handleCancel="counterDialog = false" @handleFinish="addCounterFinish"></add-counter> <add-counter ref="addCounter"></add-counter>
<add-store v-if="storeDialog" :moveDialog="storeDialog" @handleCancel="storeDialog = false" @handleFinish="addStoreFinish"></add-store> <add-store ref="addStore"></add-store>
</div> </div>
</template> </template>
...@@ -317,16 +317,10 @@ export default { ...@@ -317,16 +317,10 @@ export default {
}, },
currentPage() {}, currentPage() {},
addCounter() { addCounter() {
this.counterDialog = true this.$refs.addCounter.counterDialog= true
}, },
addCounterFinish() { addStore() {
this.counterDialog = false this.$refs.addStore.addStoreDialog = true
},
addDept() {
this.counterDialog = true
},
addStoreFinish() {
this.storeDialog = false
} }
} }
}; };
......
...@@ -108,8 +108,9 @@ ...@@ -108,8 +108,9 @@
:total="400" :total="400"
></el-pagination> ></el-pagination>
</div> </div>
<add-store v-if="storeDialog" :moveDialog="storeDialog" @handleCancel="storeDialog = false" @handleFinish="addStoreFinish"></add-store> <add-store ref="addStore"></add-store>
<store-detail v-if="detailDialog" :moveDialog="detailDialog" @handleCancel="detailDialog = false" ></store-detail> <store-detail ref="storeDetail" ></store-detail>
</div> </div>
</template> </template>
<script> <script>
...@@ -214,9 +215,7 @@ export default { ...@@ -214,9 +215,7 @@ export default {
page: { page: {
nowPageNum: 4 nowPageNum: 4
} }
}, }
storeDialog: false,
detailDialog: false
}; };
}, },
created() {}, created() {},
...@@ -229,17 +228,14 @@ export default { ...@@ -229,17 +228,14 @@ export default {
if (rowIndex === 0) { if (rowIndex === 0) {
return "background-color: #0B0F32; border-right: 1px solid white;color: white;"; return "background-color: #0B0F32; border-right: 1px solid white;color: white;";
} else { } else {
return ""; return ""
} }
}, },
addStore() { addStore() {
this.storeDialog = true this.$refs.addStore.addStoreDialog = true
}, },
handleDetail() { handleDetail() {
this.detailDialog = true this.$refs.storeDetail.detailDialog = true
},
addStoreFinish() {
this.storeDialog = false
} }
} }
}; };
......
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