初始提交
This commit is contained in:
219
pages/apply/dynamicModel/components/list/list.vue
Normal file
219
pages/apply/dynamicModel/components/list/list.vue
Normal file
@@ -0,0 +1,219 @@
|
||||
<template>
|
||||
<view class="list u-p-b-20 u-p-l-20 u-p-r-20" ref="tableRef">
|
||||
<view class="list-box">
|
||||
<SwipeItem :list="list" :buttons="options" @action="actionClick" ref="swipeItem" :marginB="20">
|
||||
<template v-slot="{ item }">
|
||||
<view class="item" @tap.stop="goDetail(item)" style="border: 1px solid #fff;">
|
||||
<view class="u-m-b-10 checkbox_box" v-if="showCheckbox">
|
||||
<u-checkbox @change="checkboxChange($event,item)" v-model="item.checked" class="checkbox"
|
||||
@tap.stop shape="circle"></u-checkbox>
|
||||
</view>
|
||||
<view class="item-cell" v-for="(column,i) in columnList" :key="i">
|
||||
<template v-if="column.jnpfKey != 'table'">
|
||||
<text class="item-cell-label">{{column.label}}:</text>
|
||||
<text class="item-cell-content"
|
||||
v-if="['calculate','inputNumber'].includes(column.jnpfKey)">
|
||||
{{toThousands(item[column.prop],column)}}
|
||||
</text>
|
||||
<text class="item-cell-content text-primary"
|
||||
v-else-if="column.jnpfKey == 'relationForm'"
|
||||
@click.stop="relationFormClick(item,column)">
|
||||
{{item[column.prop]}}
|
||||
</text>
|
||||
<view class="item-cell-content" v-else-if="column.jnpfKey == 'sign'">
|
||||
<JnpfSign v-model="item[column.prop]" align="left" detailed />
|
||||
</view>
|
||||
<view class="item-cell-content" v-else-if="column.jnpfKey == 'signature'">
|
||||
<JnpfSignature v-model="item[column.prop]" align="left" detailed />
|
||||
</view>
|
||||
<view class="item-cell-content" v-else-if="column.jnpfKey == 'uploadImg'" @click.stop>
|
||||
<JnpfUploadImg v-model="item[column.prop]" detailed simple
|
||||
v-if="item[column.prop]&&item[column.prop].length" />
|
||||
</view>
|
||||
<!-- #ifndef APP-HARMONY -->
|
||||
<view class="item-cell-content" v-else-if="column.jnpfKey == 'uploadFile'" @click.stop>
|
||||
<JnpfUploadFile v-model="item[column.prop]" detailed
|
||||
v-if="item[column.prop]&&item[column.prop].length" align="left" />
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP-HARMONY -->
|
||||
<view class="item-cell-content" v-else-if="column.jnpfKey == 'uploadFile'" @click.stop>
|
||||
<JnpfUploadFileH v-model="item[column.prop]" detailed
|
||||
v-if="item[column.prop]&&item[column.prop].length" align="left" />
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<view class="item-cell-content" v-else-if="column.jnpfKey == 'rate'">
|
||||
<JnpfRate v-model="item[column.prop]" :max="column.count"
|
||||
:allowHalf="column.allowHalf" disabled />
|
||||
</view>
|
||||
<view class="item-cell-content item-cell-slider" v-else-if="column.jnpfKey == 'slider'">
|
||||
<JnpfSlider v-model="item[column.prop]" :min="column.min" :max="column.max"
|
||||
:step="column.step" disabled />
|
||||
</view>
|
||||
<view class="item-cell-content" v-else-if="column.jnpfKey == 'input'">
|
||||
<JnpfInput v-model="item[column.prop]" detailed showOverflow
|
||||
:useMask="column.useMask" :maskConfig="column.maskConfig" align='left' />
|
||||
</view>
|
||||
<text class="item-cell-content" v-else>{{item[column.prop]}}</text>
|
||||
</template>
|
||||
<tableCell v-else @click.stop class="tableCell" ref="tableCell" :label="column.label"
|
||||
:childList="item[column.prop]" :children="column.children" :pageLen="3"
|
||||
@cRelationForm="relationFormClick" :key="item.id+i">
|
||||
</tableCell>
|
||||
</view>
|
||||
<view class="item-cell" v-if="config.enableFlow==1">
|
||||
<text class="item-cell-label">审批状态:</text>
|
||||
<text :style="{color:useDefine.getFlowStatusColor(item.flowState)}">
|
||||
{{useDefine.getFlowStatusContent(item.flowState)}}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</SwipeItem>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
useDefineSetting
|
||||
} from '@/utils/useDefineSetting';
|
||||
import tableCell from '../tableCell.vue'
|
||||
import SwipeItem from "@/components/SwipeItem/index"
|
||||
export default {
|
||||
emits: ['selectCheckbox', 'handleClick', 'handleMoreClick', 'goDetail', 'relationFormClick', 'update:modelValue'],
|
||||
components: {
|
||||
tableCell,
|
||||
SwipeItem
|
||||
},
|
||||
props: ['config', 'list', 'columnList', 'actionOptions', 'showSelect', 'checkedAll', 'modelValue', 'isMoreBtn',
|
||||
'customBtnsList'
|
||||
],
|
||||
data() {
|
||||
return {
|
||||
selectData: [],
|
||||
useDefine: useDefineSetting()
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
checkedAll: {
|
||||
handler(val) {
|
||||
this.handleCheckAll()
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
options() {
|
||||
if (!this.customBtnsList?.length) return this.actionOptions;
|
||||
return [{
|
||||
text: this.$t('common.moreText'),
|
||||
value: 'more',
|
||||
style: {
|
||||
backgroundColor: '#007aff'
|
||||
}
|
||||
},
|
||||
...this.actionOptions,
|
||||
];
|
||||
},
|
||||
showCheckbox() {
|
||||
return this.showSelect
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/* 关联表单操作 */
|
||||
relationFormClick(item, column) {
|
||||
this.$emit('relationFormClick', item, column)
|
||||
},
|
||||
/* 跳转详情 */
|
||||
goDetail(item) {
|
||||
this.$emit('goDetail', item)
|
||||
},
|
||||
actionClick(data) {
|
||||
const {
|
||||
index,
|
||||
value
|
||||
} = data
|
||||
if (value === 'remove') return this.$emit('handleClick', index)
|
||||
if (value === 'more') return this.$emit('handleMoreClick', index)
|
||||
},
|
||||
/* 列表选择框 */
|
||||
checkboxChange(e, item) {
|
||||
const isSelected = e.value;
|
||||
const selectedItemsSet = new Set(this.selectData.map(selectedItem => {
|
||||
return selectedItem.id;
|
||||
}));
|
||||
if (isSelected) {
|
||||
selectedItemsSet.add(item.id);
|
||||
} else {
|
||||
selectedItemsSet.delete(item.id);
|
||||
}
|
||||
this.selectData = [...selectedItemsSet.values()].map(id => {
|
||||
return this.list.find(listItem => listItem.id === id);
|
||||
});
|
||||
this.$emit('selectCheckbox', this.selectData);
|
||||
},
|
||||
/* 全部选中 */
|
||||
handleCheckAll() {
|
||||
this.selectData = []
|
||||
if (this.checkedAll) this.selectData = this.list.filter(o => o.checked)
|
||||
this.$emit('selectCheckbox', this.selectData)
|
||||
},
|
||||
/* 千分位操作 */
|
||||
toThousands(val, column) {
|
||||
if (val) {
|
||||
let valList = val.toString().split('.')
|
||||
let num = Number(valList[0])
|
||||
let newVal = column.thousands ? num.toLocaleString() : num
|
||||
return valList[1] ? newVal + '.' + valList[1] : newVal
|
||||
} else {
|
||||
return val
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.list {
|
||||
.list_box {
|
||||
.item {
|
||||
padding: 0;
|
||||
|
||||
.checkbox_box {
|
||||
width: 60rpx;
|
||||
height: 46rpx;
|
||||
position: relative;
|
||||
|
||||
.checkbox {
|
||||
position: absolute;
|
||||
top: 6rpx;
|
||||
left: 8rpx;
|
||||
z-index: 9999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.right-option-box {
|
||||
display: flex;
|
||||
width: max-content;
|
||||
|
||||
.right-option {
|
||||
width: 144rpx;
|
||||
height: 100%;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
background-color: #dd524d;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.more-option {
|
||||
background-color: #1890ff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user