增加table组件
This commit is contained in:
@@ -20,6 +20,8 @@
|
||||
<template v-if="form.type==1">
|
||||
<view class=" u-m-t-32 ">
|
||||
<view class="u-m-b-24">购物车商品</view>
|
||||
<!-- <goodsTable :data="nowCartData" :columns="columnsCheck1" row-key="id"
|
||||
@selection-change="handleSelectionChange($event,'now')"></goodsTable> -->
|
||||
<u-table2 :data="nowCartData" :columns="columnsCheck1" row-key="id"
|
||||
@selection-change="handleSelectionChange($event,'now')" />
|
||||
|
||||
@@ -55,9 +57,11 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import goodsTable from './goods-table.vue'
|
||||
import {
|
||||
reactive,
|
||||
ref
|
||||
ref,
|
||||
watch
|
||||
} from 'vue';
|
||||
import chooseTable from './choose-table.vue'
|
||||
import {
|
||||
@@ -73,6 +77,11 @@
|
||||
},
|
||||
nowCartData: []
|
||||
})
|
||||
watch(() => props.nowCartData, (newval) => {
|
||||
console.log('props.nowCartData', props.nowCartData)
|
||||
}, {
|
||||
deep: true
|
||||
})
|
||||
|
||||
function close() {
|
||||
show.value = false
|
||||
@@ -151,7 +160,7 @@
|
||||
if (props.nowCartData.length <= 0) {
|
||||
mergeOrder({
|
||||
allMerge: 1,
|
||||
sourceOrderId:props.order? props.order.id:'',
|
||||
sourceOrderId: props.order ? props.order.id : '',
|
||||
targetTableCode: form.mewTable.tableCode,
|
||||
detailIds: Object.entries(props.goodsList).reduce((prve, cur) => {
|
||||
prve.push(...cur.map(v => v.id))
|
||||
@@ -171,8 +180,8 @@
|
||||
emits('confirm', {
|
||||
targetTableCode: form.mewTable.tableCode,
|
||||
old: {
|
||||
allMerge:1,
|
||||
sourceOrderId:props.order? props.order.id:'',
|
||||
allMerge: 1,
|
||||
sourceOrderId: props.order ? props.order.id : '',
|
||||
targetTableCode: form.mewTable.tableCode,
|
||||
detailIds: Object.entries(props.goodsList).reduce((prve, cur) => {
|
||||
prve.push(...cur.map(v => v.id))
|
||||
@@ -180,8 +189,8 @@
|
||||
}, [])
|
||||
},
|
||||
now: {
|
||||
allMerge:1,
|
||||
cart_id: props.nowCartData.map(v=>v.id)
|
||||
allMerge: 1,
|
||||
cart_id: props.nowCartData.map(v => v.id)
|
||||
}
|
||||
})
|
||||
}
|
||||
@@ -198,7 +207,7 @@
|
||||
if (props.nowCartData.length <= 0) {
|
||||
mergeOrder({
|
||||
allMerge,
|
||||
sourceOrderId:props.order? props.order.id:'',
|
||||
sourceOrderId: props.order ? props.order.id : '',
|
||||
targetTableCode: form.mewTable.tableCode,
|
||||
detailIds: form.old.map(v => v.id)
|
||||
}).then(res => {
|
||||
@@ -216,7 +225,7 @@
|
||||
targetTableCode: form.mewTable.tableCode,
|
||||
old: {
|
||||
allMerge,
|
||||
sourceOrderId:props.order? props.order.id:'',
|
||||
sourceOrderId: props.order ? props.order.id : '',
|
||||
targetTableCode: form.mewTable.tableCode,
|
||||
detailIds: form.old.map(v => v.id)
|
||||
},
|
||||
|
||||
151
components/goods-table.vue
Normal file
151
components/goods-table.vue
Normal file
@@ -0,0 +1,151 @@
|
||||
<template>
|
||||
<view class="table u-font-28">
|
||||
<!-- 表头:根据 columns 渲染 + 全选框 -->
|
||||
<view class="u-flex u-row-between no-wrap title">
|
||||
<!-- 全选框 -->
|
||||
<view class="table-th">
|
||||
<my-radio
|
||||
@change="handleSelectAll"
|
||||
v-model="internalAllChecked"
|
||||
shape="square"
|
||||
:size="20"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<!-- 动态列标题 -->
|
||||
<view class="table-th" v-for="col in columns" :key="col.key" :style="col.style || {}">
|
||||
{{ col.label }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 表格行 -->
|
||||
<view
|
||||
@click="handleRowCheck(item)"
|
||||
class="u-m-t-12 u-flex u-p-24 u-row-between row"
|
||||
v-for="(item, index) in internalData"
|
||||
:key="item.id || index"
|
||||
row-key="id"
|
||||
>
|
||||
<!-- 单选框 -->
|
||||
<view class="table-td">
|
||||
<my-radio
|
||||
v-model="item._checked"
|
||||
shape="square"
|
||||
:size="20"
|
||||
@change="handleRowCheck(item)"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<!-- 动态列内容 -->
|
||||
<view class="table-td" v-for="col in columns" :key="col.key" :style="col.style || {}">
|
||||
<!-- 支持自定义渲染 / 直接取值 -->
|
||||
<slot v-if="col.slot" :name="col.slot" :row="item" />
|
||||
<template v-else>
|
||||
{{ item[col.key] }}
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, watch } from 'vue';
|
||||
|
||||
// 完全对齐 u-table2 的 props
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
columns: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
rowKey: {
|
||||
type: String,
|
||||
default: 'id'
|
||||
}
|
||||
});
|
||||
|
||||
// 抛出和 u-table2 一样的 selection-change 事件
|
||||
const emits = defineEmits(['selection-change']);
|
||||
|
||||
// 内部数据(增加选中状态 _checked)
|
||||
const internalData = ref([]);
|
||||
|
||||
// 全选状态
|
||||
const internalAllChecked = ref(false);
|
||||
|
||||
// 监听外部 data 变化,自动注入选中状态
|
||||
watch(
|
||||
() => props.data,
|
||||
(val) => {
|
||||
internalData.value = val.map(item => ({
|
||||
...item,
|
||||
_checked: item._checked || false
|
||||
}));
|
||||
},
|
||||
{ immediate: true, deep: true }
|
||||
);
|
||||
|
||||
// 全选切换
|
||||
function handleSelectAll() {
|
||||
const checked = internalAllChecked.value;
|
||||
internalData.value.forEach(item => {
|
||||
item._checked = checked;
|
||||
});
|
||||
emitChange();
|
||||
}
|
||||
|
||||
// 行选中切换
|
||||
function handleRowCheck(row) {
|
||||
row._checked = !row._checked;
|
||||
emitChange();
|
||||
}
|
||||
|
||||
// 抛出选中结果(和 u-table2 行为一致)
|
||||
function emitChange() {
|
||||
const selectedRows = internalData.value.filter(item => item._checked);
|
||||
emits('selection-change', selectedRows);
|
||||
}
|
||||
|
||||
// 监听所有行选中状态,自动更新全选框
|
||||
watch(
|
||||
() => internalData.value,
|
||||
() => {
|
||||
const total = internalData.value.length;
|
||||
const checkedCount = internalData.value.filter(i => i._checked).length;
|
||||
internalAllChecked.value = total > 0 && checkedCount === total;
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.table {
|
||||
background: #f9f9f9;
|
||||
border-radius: 8rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.title {
|
||||
padding: 12rpx 24rpx;
|
||||
background: #aebad2;
|
||||
border-radius: 8rpx 8rpx 0 0;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.table-th,
|
||||
.table-td {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.row {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.row:nth-of-type(2n + 1) {
|
||||
background: #f0f0f0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,5 +1,5 @@
|
||||
//当前环境 test,prod
|
||||
export const ENV = 'prod'
|
||||
export const ENV = 'test'
|
||||
export const ENV_BASE_URL = {
|
||||
java: {
|
||||
prod: 'https://cashier.sxczgkj.com/',
|
||||
|
||||
Reference in New Issue
Block a user