|
@@ -15,8 +15,8 @@ export default {
|
|
|
};
|
|
|
},
|
|
|
async mounted() {
|
|
|
- await this.getTemplateList()
|
|
|
- this.templateList.length && this.$emit('click', this.templateList[0])
|
|
|
+ await this.getTemplateList();
|
|
|
+ this.templateList.length && this.$emit('click', this.templateList[0]);
|
|
|
},
|
|
|
methods: {
|
|
|
/* 获取模板列表 */
|
|
@@ -25,32 +25,31 @@ export default {
|
|
|
const res = await getTemplateList({
|
|
|
current: 1,
|
|
|
size: 8,
|
|
|
- departmentId:undefined,// 等登录了联调
|
|
|
- })
|
|
|
- this.templateList = res.data.records || []
|
|
|
+ departmentId: undefined // 等登录了联调
|
|
|
+ });
|
|
|
+ this.templateList = res.data.records || [];
|
|
|
for (const [index, item] of this.templateList.entries()) {
|
|
|
await this.handleDownImg(item.iconUrl, index);
|
|
|
}
|
|
|
} catch (e) {
|
|
|
- console.log(e)
|
|
|
+ console.log(e);
|
|
|
}
|
|
|
},
|
|
|
/* 点击模板 */
|
|
|
handleClick(item) {
|
|
|
- this.$emit('click', item)
|
|
|
+ this.$emit('click', item);
|
|
|
},
|
|
|
- async handleDownImg(iconUrl,index) {
|
|
|
- if(!iconUrl) {
|
|
|
- this.templateList[index].imgUrl = TemplateImg
|
|
|
- }else {
|
|
|
- let res = await downFileBase64({
|
|
|
+ async handleDownImg(iconUrl, index) {
|
|
|
+ if (!iconUrl) {
|
|
|
+ this.templateList[index].imgUrl = TemplateImg;
|
|
|
+ } else {
|
|
|
+ let res = await downFileBase64({
|
|
|
uuid: iconUrl
|
|
|
- })
|
|
|
- this.templateList[index].imgUrl = 'data:image/jpeg;base64,' + res.data
|
|
|
+ });
|
|
|
+ this.templateList[index].imgUrl = 'data:image/jpeg;base64,' + res.data;
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
- },
|
|
|
+ }
|
|
|
};
|
|
|
</script>
|
|
|
|
|
@@ -60,13 +59,13 @@ export default {
|
|
|
@click="handleClick(item)"
|
|
|
:class="{active: item.uuid === activeTemplateId}">
|
|
|
<img :src="item.imgUrl" style="border-radius: 5px" alt="">
|
|
|
- <view>{{item.name}}</view>
|
|
|
+ <view class="text-overflow">{{item.name}}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
-//box每行显示4个,超出换行,靠右
|
|
|
+// box每行显示4个,超出换行,靠右
|
|
|
.box {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
@@ -76,17 +75,18 @@ export default {
|
|
|
box-sizing: border-box;
|
|
|
padding: 20px 10px;
|
|
|
background-image: linear-gradient(180deg, #FFFFFF 87%, #F2F3F5 100%);
|
|
|
- view {
|
|
|
+ > view {
|
|
|
margin: 0 2% 0 0;
|
|
|
width: 23%;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
- view {
|
|
|
+ > view {
|
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
|
white-space: nowrap;
|
|
|
width: 100%;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
img {
|
|
|
width: 42px;
|
|
@@ -97,4 +97,12 @@ export default {
|
|
|
.active {
|
|
|
transform: scale(1.1);
|
|
|
}
|
|
|
-</style>
|
|
|
+.text-overflow {
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ width: 100%;
|
|
|
+ display: block;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+</style>
|