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