Commit e3f95781 by wuqian

卡片

parent 5034da30
<!--
* @Description: 描述
* @Author: chd
* @Date: 2021-06-07 11:13:02
* @LastEditors: chd
* @LastEditTime: 2021-07-03 14:42:26
-->
<script>
export default {
functional: true,
name: 'image-view',
props: {
proportion: {
type: Number,
default: 0,
},
image: {
type: String,
default: '',
},
},
render(h, { children, listeners, props, data }) {
const title = data?.attrs?.title
return (
<div
title={title}
class={'image-view'}
style={data.style}
onClick={(e) => listeners.click && listeners.click(e)}>
<div
class="before"
style={{
paddingBottom: props.proportion ? props.proportion + '%' : '100%',
}}></div>
<div
style={{
position: 'absolute',
top: 0,
right: 0,
bottom: 0,
left: 0,
overflow: 'hidden',
textAlign: 'center',
}}>
<img
height="100%"
loading="lazy"
src={props.image}
alt=""
onError={(e) => {
e.target.title = '加载失败'
}}
/>
</div>
{children}
</div>
)
},
}
</script>
<style scoped>
.image-view {
background-position: center;
background-size: cover;
background-repeat: no-repeat;
position: relative;
cursor: pointer;
}
.image-view .before {
height: 0;
padding-bottom: 100%;
}
.image-view img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
.image-view img[src=''],
.image-view img:not([src]) {
opacity: 0;
}
</style>
......@@ -101,7 +101,7 @@
</el-button>
</el-form-item>
</el-form>
<div
<!-- <div
class="table_wrap"
style="min-height: 50%; max-height: 82%; padding: 0">
<table-view
......@@ -111,9 +111,94 @@
ref="multipleTable"
@selectionChange="selectionChange"
:selection="true"></table-view>
</div> -->
<div
class="table_wrap scroll"
style="min-height: 50%; max-height: 82%; padding: 0">
<div class="card-mode" v-if="sourceData.length > 0">
<div
class="card-item"
v-for="(item, index) in sourceData"
:key="index"
@click="onCardClicked(item)">
<app-list
:data="item"
:index="index"
:isFormat="true"
isShowHomeSku="bottom"
:isSkuImageList="true"
:hasWidth="true"
:isShowSku="false"
:isShowSales="false"
:isCustom="true"
:selectIds="selectIds">
<template slot="operations">
<img
:class="{ 'icon-disabled': !item.synthesizeStatus }"
@click.stop="editInfo(item)"
title="编辑"
width="24"
height="24"
:src="require('@/assets/images/edit.png')"
alt="" />
<img
title="删除"
width="24"
height="24"
@click.stop="deleteSection(item)"
:src="require('@/assets/images/delete.png')"
alt="" />
</template>
<template slot="price">
<span class="price" :title="item.name">
{{ item.name }}
</span>
</template>
<template slot="synthesizeStatus">
<div title="应用类型" style="position: absolute; right: 0">
<el-tag :type="!item.isCollectFee ? 'success' : 'warning'">
{{ !item.isCollectFee ? '免费' : '收费' }}
</el-tag>
</div>
</template>
<template slot="otherContent">
<div
:title="item.description"
class="sds-base-sku"
style="font-size: 14px">
<span>简述:{{ item.description }}</span>
</div>
<div class="sds-keyid">
<div class="product-id" v-show="item.id">
<img
:title="'appId:' + item.id"
height="20"
:src="require('@/assets/images/id.png')"
alt="" />
<span :title="item.id">
{{ item.id }}
</span>
</div>
<div class="product-sku">
<span :title="item.categoryName">
{{ item.categoryName }}
</span>
</div>
</div>
</template>
</app-list>
</div>
</div>
<div class="empty" v-else>暂无数据</div>
</div>
<div slot="footer" style="display: flex; justify-content: center">
<!-- <pagination :setValue="setpaginationOptions" :options="paginationOptions" /> -->
<div slot="footer" style="display: flex; justify-content: center;align-items: center;">
<div class="select-number">
选中
<span style="color: red; font-weight: bold">
{{ selection.length }}
</span>
</div>
<el-pagination
layout="sizes, total, prev, pager, next, jumper"
background
......@@ -352,9 +437,9 @@
</template>
<script>
import Editor from '@/components/wangeditor/index.vue'
import tableView from '@/common/components/base/tableView.vue'
import ChooseTimePeriod from '@/components/base/chooseTimePeriod.vue'
// import ImageView from '@/components/base/ImageView.vue'
import appList from '@/components/app/app-list.vue'
import pagination from '../../mixins/pagination'
import { get, post } from '@/common/api/axios'
import UploadImages from '@/components/base/image-list.vue'
......@@ -364,7 +449,7 @@ export default {
components: {
UploadImages,
'v-editor': Editor,
tableView,
appList,
layout,
ChooseTimePeriod
// ImageView
......@@ -444,6 +529,9 @@ export default {
this.loadTypesData()
},
computed: {
selectIds() {
return this.selection.map((item) => item.id)
},
tableColumns() {
return [
{
......@@ -512,6 +600,23 @@ export default {
}
},
methods: {
onCardClicked(item) {
const status = this.isItemSelected(item)
if (!status) {
this.selection.push(item)
} else {
const index = this.selection.findIndex((e) => {
return e.id === item.id
})
this.selection.splice(index, 1)
}
},
isItemSelected(item) {
const index = this.selection.findIndex((e) => {
return item.id === e.id
})
return index !== -1
},
toggleNodeExpanded(node) {
node.expanded = !node.expanded
},
......@@ -538,7 +643,7 @@ export default {
const arr = v ? [v] : this.selection
if (arr.length === 0) return this.$message('请勾选至少一条记录')
const ids = arr.map((item) => item.id).join()
this.$confirm('确定删除选中的信息?', '提示', {
this.$confirm('确定删除选中的应用?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
......@@ -553,7 +658,7 @@ export default {
})
this.getList()
this.selection = []
this.$refs.multipleTable.clearSelectionBox()
// this.$refs.multipleTable.clearSelectionBox()
} else {
this.$alert(res.message, '错误提示', {
dangerouslyUseHTMLString: true
......@@ -563,7 +668,7 @@ export default {
})
.catch(() => {
this.selection = []
this.$refs.multipleTable.clearSelectionBox()
// this.$refs.multipleTable.clearSelectionBox()
})
},
// 分页
......@@ -843,7 +948,7 @@ export default {
}
</script>
<style scoped>
<style scoped lang="scss">
.customize-tree-node__label {
margin-left: 4px;
flex: 1;
......@@ -851,7 +956,76 @@ export default {
text-overflow: ellipsis;
white-space: nowrap;
}
::v-deep .card-mode {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 10px;
.price {
color: rgba(181, 124, 91, 1);
font-size: 14px;
font-weight: bold;
margin-right: 5px;
}
.sds-base-sku {
height: 30px;
line-height: 30px;
display: flex;
cursor: pointer;
white-space: nowrap;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.sds-keyid {
height: 30px;
align-items: center;
display: flex;
}
.product-id {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
line-height: 30px;
display: flex;
align-items: center;
background: rgba(255, 255, 255, 0.5);
border-radius: 5px;
margin-right: 6px;
position: relative;
z-index: 1;
flex: 1;
cursor: pointer;
}
.product-id > span {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
font-size: 14px;
vertical-align: top;
margin-left: 5px;
color: #222;
}
.product-sku {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
line-height: 30px;
flex: 1;
text-align: right;
cursor: pointer;
}
.product-sku > span {
font-size: 14px;
border: solid 1px #9ac1f5;
background-color: #9ac1f5;
border-radius: 4px;
color: #fff;
padding: 2px 6px;
}
}
.customize-tree-node {
font-size: 14px;
flex: 1;
......
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