152 lines
4.9 KiB
Vue
152 lines
4.9 KiB
Vue
<template>
|
|
<div>
|
|
<el-card class="!border-none" shadow="never">
|
|
<el-form class="mb-[-16px]" :model="queryParams" inline>
|
|
<el-form-item label="商品名称" prop="company_name">
|
|
<el-input class="w-[280px]" v-model="queryParams.keyword" clearable placeholder="请输入商品名称" />
|
|
</el-form-item>
|
|
<el-form-item label="商品编号" prop="company_type">
|
|
<el-input class="w-[280px]" v-model="queryParams.no" clearable placeholder="商品编号" />
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="resetPage">查询</el-button>
|
|
<el-button @click="resetParams">重置</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-card>
|
|
<!-- <el-card class="!border-none" v-loading="pager.loading" shadow="never"> -->
|
|
<el-card class="!border-none" shadow="never">
|
|
<div class="mt-4">
|
|
<el-table ref="tableRef" :data="pager.lists" @selection-change="handleSelectionChange">
|
|
<el-table-column type="selection" width="55" />
|
|
<el-table-column label="ID" property="product_id" />
|
|
<el-table-column label="图片" property="image">
|
|
<template #default="{ row }">
|
|
<el-image :src="row.image" style="width: 80px; height: 80px" fit="cover"></el-image>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="商品名称" property="store_name" />
|
|
<el-table-column label="价格" property="price" />
|
|
</el-table>
|
|
</div>
|
|
<div class="flex justify-end mt-4">
|
|
<pagination v-model="pager" @change="getLists" :pageSizes="[10]" />
|
|
</div>
|
|
<div class="flex justify-end mt-2">
|
|
<el-button type="primary" @click="handleCurrentChange(changeList)">确认</el-button>
|
|
<el-button @click="commodityClose">取消</el-button>
|
|
</div>
|
|
</el-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup name="companyLists">
|
|
import { usePaging } from "@/hooks/usePaging";
|
|
import { useDictData } from "@/hooks/useDictOptions";
|
|
import { apiGetProductList } from "@/api/task_template";
|
|
import { defineEmits, computed, watch } from "vue";
|
|
|
|
const tableRef = ref(null);
|
|
|
|
// 当前类型
|
|
const props = defineProps({
|
|
ids: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
});
|
|
|
|
let goods_id = props?.ids?.split(",") || [];
|
|
|
|
// 查询条件
|
|
const queryParams = reactive({
|
|
keyword: "",
|
|
no: "",
|
|
});
|
|
|
|
// 选中数据
|
|
const emits = defineEmits(["customEvent", "close"]);
|
|
|
|
// 选中数据子父传递
|
|
const handleCurrentChange = (value: any) => {
|
|
let arr: any = [];
|
|
value.forEach((item: any) => {
|
|
arr = [...arr, ...item];
|
|
});
|
|
// return console.log(value, arr);
|
|
emits("customEvent", arr);
|
|
};
|
|
|
|
const changeList = ref([[]]);
|
|
let count = 0;
|
|
const handleSelectionChange = (value: any[]) => {
|
|
// 在翻页时,上一页的数据会被清空, 不得已使用二维数组存取数据
|
|
let index = pager.page ? pager.page - 1 : 0;
|
|
// 同一页选择多个商品时, 每选择一次, 此方法都会被调用, 所以选择多个时此方法会被调用多次, 在翻页时会出现漏选, 使用此方法避免
|
|
if (index != count && value.length < changeList.value[index].length) {
|
|
console.log("加载中");
|
|
} else {
|
|
count = index;
|
|
changeList.value[index] = JSON.parse(JSON.stringify(value));
|
|
console.log("加载完成");
|
|
}
|
|
}; // 多选
|
|
|
|
const commodityClose = () => {
|
|
emits("close", null);
|
|
};
|
|
|
|
// 分页相关
|
|
const { pager, getLists, resetParams, resetPage } = usePaging({
|
|
fetchFun: apiGetProductList,
|
|
params: queryParams,
|
|
size: 10,
|
|
});
|
|
|
|
getLists().then(res=>{
|
|
for(let i=0;i<Math.ceil(pager.count / pager.size)-1;i++){
|
|
changeList.value.push([])
|
|
}
|
|
|
|
});
|
|
|
|
// 监听数据变化进行勾选
|
|
watch(
|
|
() => pager.lists,
|
|
(n, o) => {
|
|
// 进行勾选
|
|
nextTick(() => {
|
|
n.forEach((item: any) => {
|
|
item.product_id += "";
|
|
// console.log("过滤前", goods_id);
|
|
let f_ids = new Set(); // 删除选中的id
|
|
// 对选择过的列表进行回显
|
|
if (goods_id.includes(item.product_id)) {
|
|
let index = pager.page ? pager.page - 1 : 0;
|
|
if (
|
|
!changeList.value[index]?.find(
|
|
(e: any) => e.product_id == item.product_id
|
|
)
|
|
) {
|
|
f_ids.add(item.product_id);
|
|
changeList.value[index]?.push(item);
|
|
}
|
|
}
|
|
goods_id = goods_id.filter((item: string) => !f_ids.has(item)); // 已选择过的进行删除
|
|
// console.log("长度", goods_id);
|
|
// console.log("已选", changeList.value);
|
|
// 把changeList列表中的所有值进行勾选
|
|
changeList.value.forEach((c: any) => {
|
|
c.forEach((e: any) => {
|
|
if (e.product_id == item.product_id) {
|
|
tableRef.value.toggleRowSelection(item, true);
|
|
}
|
|
});
|
|
});
|
|
});
|
|
});
|
|
},
|
|
{ deep: true, immediate: true }
|
|
);
|
|
</script>
|