Skip to content

jml0128 / xrk-bi

Go to a project
Commit e1805ec1 by admin
Options

feat:编辑照片墙的按钮和弹层合并成一个组件

1 parent 28c86c72
Inline Side-by-side
Showing with 282 additions and 151 deletions
src/packages/bi/src/components/photo-wall/del.vue
<template>
<div></div>
<el-button @click="handleRemove" class="bi-photo_btn">
<img src="http://cdn.yxvzb.com/WEB/SaaS/images/bi/svg/delete.svg" alt="" />
删除
</el-button>
</template>
<script>
import { MessageBox, Message, Button } from 'element-ui';
export default {
name: '',
mixins: [],
components: {},
data() {
return {};
name: 'photo-wall-del',
components: {
[Button.name]: Button
},
computed: {},
watch: {},
methods: {},
created() {},
beforeDestroy() {}
methods: {
handleRemove() {
MessageBox.confirm(
'是否确认删除?删除后可在撤销删除里面回复该分析',
'提示',
{
confirmButtonText: '是',
cancelButtonText: '否',
type: 'warning'
}
)
.then(() => {
Message({
type: 'success',
message: '删除成功!'
});
})
.catch(() => {
Message({
type: 'info',
message: '已取消删除'
});
});
}
}
};
</script>
<style scoped lang="scss"></style>
<style scoped lang="scss">
.bi-photo {
// page-break-before: always;
// page-break-after: always;
padding-bottom: 50px;
&_btn {
display: inline-block;
min-width: 42px;
height: 42px;
border: 1px solid #bac1ce;
border-radius: 4px;
vertical-align: top;
text-align: center;
line-height: 42px;
padding: 0 15px;
font-size: 16px;
font-weight: 500;
color: #6f7a91;
cursor: pointer;
position: relative;
&_group {
position: absolute;
right: 16px;
top: 50%;
margin-top: -21px;
z-index: 3;
&_item {
& + .bi-chart-title_btn_group_item {
margin-left: 8px;
}
}
}
}
}
</style>
src/packages/bi/src/components/photo-wall/index.vue
......@@ -6,44 +6,14 @@
<div class="bi-photo" ref="bi-photo">
<BiTitle :index="index" :name="name">
<template #handler>
<div>
<el-button @click="selectStyleShow = true" class="bi-photo_btn">
<img
src="http://cdn.yxvzb.com/WEB/SaaS/images/bi/svg/delete.svg"
alt=""
/>
选择样式
</el-button>
<el-button @click="selectImgShow = true" class="bi-photo_btn">
<img
src="http://cdn.yxvzb.com/WEB/SaaS/images/bi/svg/delete.svg"
alt=""
/>
选择图片
</el-button>
<el-button @click="handleRemove" class="bi-photo_btn">
<img
src="http://cdn.yxvzb.com/WEB/SaaS/images/bi/svg/delete.svg"
alt=""
/>
删除
</el-button>
<div class="bi-title-photo-btn">
<SelectStyle @handleSave="selectStyleSave" />
<SelectImages @handleSave="selectImgSave" />
<Del />
</div>
</template>
</BiTitle>
<BiImages />
<SelectImages
v-if="selectImgShow"
@handleClose="selectImgShow = false"
@handleSave="selectImgSave"
:selectImgShow="selectImgShow"
/>
<SelectStyle
v-if="selectStyleShow"
@handleClose="selectStyleShow = false"
@handleSave="selectStyleSave"
:selectStyleShow="selectStyleShow"
/>
</div>
</template>
......@@ -52,6 +22,7 @@ import BiTitle from '../../commonComponents/title.vue';
import BiImages from './images';
import SelectImages from './select';
import SelectStyle from './style';
import Del from './del';
import { heightToPage } from '../../chart-type/common';
import { MessageBox, Message } from 'element-ui';
......@@ -61,7 +32,8 @@ export default {
BiTitle,
BiImages,
SelectImages,
SelectStyle
SelectStyle,
Del
},
props: {
name: String,
......@@ -75,10 +47,7 @@ export default {
}
},
data() {
return {
selectImgShow: false,
selectStyleShow: false
};
return {};
},
methods: {
// 选择图片的保存
......@@ -162,4 +131,9 @@ export default {
}
}
}
.bi-title-photo-btn {
display: flex;
width: 320px;
justify-content: space-between;
}
</style>
src/packages/bi/src/components/photo-wall/select.vue
<template>
<el-dialog
title="选择图片"
:visible.sync="selectImgShow"
width="36%"
center
:before-close="handleClose"
>
<div class="select-img-main">
<div
class="select-img-item"
v-for="item in imgWallPageList"
:key="item.id"
>
<div>
<el-button @click="openDialog" class="bi-photo_btn">
<img
src="http://cdn.yxvzb.com/WEB/SaaS/images/bi/svg/delete.svg"
alt=""
/>
选择图片
</el-button>
<el-dialog
title="选择图片"
:visible.sync="selectImgShow"
width="36%"
center
:before-close="handleClose"
>
<div class="select-img-main">
<div
class="select-img-item"
v-for="item in imgWallPageList"
:key="item.id"
>
<el-checkbox
:disabled="selectSum >= 50 && item.isSelect === 0"
class="select-box"
:value="item.isSelect === 1"
@change="
e => {
selectChange(e, item);
}
"
></el-checkbox>
<img :src="item.imgUrl" />
</div>
</div>
<div style="margin: 10px">
<el-checkbox
:disabled="selectSum >= 50 && item.isSelect === 0"
class="select-box"
:value="item.isSelect === 1"
@change="
e => {
selectChange(e, item);
}
"
></el-checkbox>
<img :src="item.imgUrl" />
:indeterminate="selectSum > 0 && selectSum < imgWallList.length"
@change="selectAll"
>
全选
</el-checkbox>
<span>当前选中{{ selectSum }}张</span>
<span style="color: red">(最大选取50张)</span>
</div>
</div>
<div style="margin: 10px">
<el-checkbox
:indeterminate="selectSum > 0 && selectSum < imgWallList.length"
@change="selectAll"
>
全选
</el-checkbox>
<span>当前选中{{ selectSum }}张</span>
<span style="color: red">(最大选取50张)</span>
</div>
<el-pagination
:current-page.sync="currentPage"
:page-size="pageSize"
layout="total, prev, pager, next, jumper"
:total="imgWallList.length"
></el-pagination>
<span slot="footer" class="dialog-footer">
<el-button @click="handleClose">取 消</el-button>
<el-button type="primary" @click="handleSave">保 存</el-button>
</span>
</el-dialog>
<el-pagination
:current-page.sync="currentPage"
:page-size="pageSize"
layout="total, prev, pager, next, jumper"
:total="imgWallList.length"
></el-pagination>
<span slot="footer" class="dialog-footer">
<el-button @click="handleClose">取 消</el-button>
<el-button type="primary" @click="handleSave">保 存</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
......@@ -59,10 +68,7 @@ import {
} from 'element-ui';
export default {
name: 'selectImg',
props: {
selectImgShow: Boolean
},
name: 'select-img',
mixins: [],
components: {
[Dialog.name]: Dialog,
......@@ -73,26 +79,44 @@ export default {
},
data() {
return {
selectImgShow: false,
currentPage: 1,
pageSize: 6,
imgWallList: [
imgWallList: []
};
},
methods: {
openDialog() {
this.selectImgShow = true;
const asyncData = [];
for (let a = 1; a < 60; a++) {
asyncData.push({
isSelect: 0,
imgUrl:
'http://yiyang.oss-cn-beijing.aliyuncs.com/WEB/SaaS/images/2103251844.png',
id: a
});
}
this.imgWallList = [
{
isSelect: 1,
imgUrl:
'http://yiyang.oss-cn-beijing.aliyuncs.com/WEB/SaaS/images/2103251844.png',
id: 0
}
]
};
},
methods: {
},
...asyncData
];
},
// 全选/取消全选
selectAll(e) {
// 选择并且超出50条弹出提示
if (e && this.imgWallList.length > 50) {
Message.error('当前可选照片超过50张，已为您自动选择前50张照片');
this.imgWallList.forEach(item => {
item.isSelect = 0;
});
this.imgWallList.slice(0, 50).forEach(item => {
item.isSelect = e ? 1 : 0;
item.isSelect = 1;
});
} else {
this.imgWallList.forEach(item => {
......@@ -105,7 +129,7 @@ export default {
item.isSelect = e ? 1 : 0;
},
handleClose() {
this.$emit('handleClose');
this.selectImgShow = false;
},
handleSave() {
this.$emit(
......@@ -127,20 +151,45 @@ export default {
return this.imgWallList.filter(item => item.isSelect === 1).length;
}
},
created() {
for (let a = 1; a < 60; a++) {
this.imgWallList.push({
isSelect: 0,
imgUrl:
'http://yiyang.oss-cn-beijing.aliyuncs.com/WEB/SaaS/images/2103251844.png',
id: a
});
}
}
created() {}
};
</script>
<style scoped lang="scss">
.bi-photo {
// page-break-before: always;
// page-break-after: always;
padding-bottom: 50px;
&_btn {
display: inline-block;
min-width: 42px;
height: 42px;
border: 1px solid #bac1ce;
border-radius: 4px;
vertical-align: top;
text-align: center;
line-height: 42px;
padding: 0 15px;
font-size: 16px;
font-weight: 500;
color: #6f7a91;
cursor: pointer;
position: relative;
&_group {
position: absolute;
right: 16px;
top: 50%;
margin-top: -21px;
z-index: 3;
&_item {
& + .bi-chart-title_btn_group_item {
margin-left: 8px;
}
}
}
}
}
.select-img-main {
display: flex;
flex-wrap: wrap;
......
src/packages/bi/src/components/photo-wall/style.vue
<template>
<el-dialog
title="选择样式"
:visible.sync="selectStyleShow"
width="25%"
center
:before-close="handleClose"
>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="布局样式:">
<el-radio-group v-model="form.layoutStyle">
<el-radio :label="1">流式布局</el-radio>
<el-radio :label="2">平铺布局</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="图片大小:">
<el-radio-group v-model="form.imgSize">
<el-radio :label="1">大图</el-radio>
<el-radio :label="2">中图</el-radio>
<el-radio :label="3">小图</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="handleClose">取 消</el-button>
<el-button type="primary" @click="handleSave">保 存</el-button>
</span>
</el-dialog>
<div>
<el-button @click="openDialog" class="bi-photo_btn">
<img
src="http://cdn.yxvzb.com/WEB/SaaS/images/bi/svg/delete.svg"
alt=""
/>
选择样式
</el-button>
<el-dialog
title="选择样式"
:visible.sync="selectStyleShow"
width="25%"
center
:before-close="handleClose"
>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="布局样式:">
<el-radio-group v-model="form.layoutStyle">
<el-radio :label="1">流式布局</el-radio>
<el-radio :label="2">平铺布局</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="图片大小:">
<el-radio-group v-model="form.imgSize">
<el-radio :label="1">大图</el-radio>
<el-radio :label="2">中图</el-radio>
<el-radio :label="3">小图</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="handleClose">取 消</el-button>
<el-button type="primary" @click="handleSave">保 存</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import { Dialog, Button, Radio, RadioGroup, Form, FormItem } from 'element-ui';
export default {
name: 'selectStyle',
props: {
selectStyleShow: Boolean
},
name: 'select-style',
mixins: [],
components: {
[Form.name]: Form,
......@@ -47,6 +53,7 @@ export default {
},
data() {
return {
selectStyleShow: false,
form: {
layoutStyle: 1,
imgSize: 2
......@@ -54,8 +61,16 @@ export default {
};
},
methods: {
openDialog() {
this.selectStyleShow = true;
const asyncData = {
layoutStyle: 1,
imgSize: 2
};
this.form = asyncData;
},
handleClose() {
this.$emit('handleClose');
this.selectStyleShow = false;
},
handleSave() {
this.$emit('handleSave', this.form);
......@@ -66,4 +81,39 @@ export default {
};
</script>
<style scoped lang="scss"></style>
<style scoped lang="scss">
.bi-photo {
// page-break-before: always;
// page-break-after: always;
padding-bottom: 50px;
&_btn {
display: inline-block;
min-width: 42px;
height: 42px;
border: 1px solid #bac1ce;
border-radius: 4px;
vertical-align: top;
text-align: center;
line-height: 42px;
padding: 0 15px;
font-size: 16px;
font-weight: 500;
color: #6f7a91;
cursor: pointer;
position: relative;
&_group {
position: absolute;
right: 16px;
top: 50%;
margin-top: -21px;
z-index: 3;
&_item {
& + .bi-chart-title_btn_group_item {
margin-left: 8px;
}
}
}
}
}
</style>
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!