更新商品多选
This commit is contained in:
weipengfei
parent
369e7a5c23
commit
c422239a05
@ -26,7 +26,12 @@
|
||||
</el-card>
|
||||
<el-card class="!border-none" v-loading="pager.loading" shadow="never">
|
||||
<div class="mt-4">
|
||||
<el-table :data="pager.lists" @cell-click="handleCurrentChange">
|
||||
<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 }">
|
||||
@ -44,6 +49,12 @@
|
||||
<div class="flex mt-4 justify-end">
|
||||
<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>
|
||||
@ -52,22 +63,21 @@
|
||||
import { usePaging } from "@/hooks/usePaging";
|
||||
import { useDictData } from "@/hooks/useDictOptions";
|
||||
import { apiGetProductList } from "@/api/task_template";
|
||||
import { defineEmits } from "vue";
|
||||
import { defineEmits, computed, watch } from "vue";
|
||||
|
||||
const tableRef = ref(null);
|
||||
|
||||
// 当前类型
|
||||
const props = defineProps({
|
||||
type: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
companyTypeList: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
ids: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
});
|
||||
|
||||
let goods_id = props.ids?.split(",") || [];
|
||||
// console.log(goods_id);
|
||||
|
||||
// 查询条件
|
||||
const queryParams = reactive({
|
||||
keyword: "",
|
||||
@ -75,11 +85,36 @@ const queryParams = reactive({
|
||||
});
|
||||
|
||||
// 选中数据
|
||||
const emits = defineEmits(["customEvent"]);
|
||||
const emits = defineEmits(["customEvent", "close"]);
|
||||
|
||||
// 选中数据子父传递
|
||||
const handleCurrentChange = (value: any) => {
|
||||
emits("customEvent", value);
|
||||
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 (!changeList.value[index]) changeList.value.push([]);
|
||||
// 同一页选择多个商品时, 每选择一次, 此方法都会被调用, 所以选择多个时此方法会被调用多次, 在翻页时会出现漏选, 使用此方法避免
|
||||
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);
|
||||
};
|
||||
|
||||
// 分页相关
|
||||
@ -90,4 +125,43 @@ const { pager, getLists, resetParams, resetPage } = usePaging({
|
||||
});
|
||||
|
||||
getLists();
|
||||
|
||||
// 监听数据变化进行勾选
|
||||
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>
|
||||
|
||||
@ -76,19 +76,20 @@
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="showCommodity"
|
||||
label="商品"
|
||||
prop="extend.product_id"
|
||||
>
|
||||
<el-input
|
||||
<el-form-item v-if="showCommodity" label="商品" prop="extend.goods_id">
|
||||
<!-- <el-input
|
||||
readonly
|
||||
:value="formData.extend.store_name"
|
||||
clearable
|
||||
placeholder="请选择商品"
|
||||
@click="openCommodity"
|
||||
placeholder="请选择"
|
||||
type="textarea"
|
||||
autosize
|
||||
>
|
||||
</el-input> -->
|
||||
<div style="width: 100%">{{ formData.extend.store_name }}</div>
|
||||
<el-button class="mt-2" type="primary" @click="openCommodity"
|
||||
>选择商品</el-button
|
||||
>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="showTarget" label="目标数" prop="extend.target">
|
||||
<el-input
|
||||
@ -210,8 +211,9 @@
|
||||
</el-dialog>
|
||||
<el-dialog v-model="showDialogCommodity">
|
||||
<dialogCommodity
|
||||
:type="30"
|
||||
:ids="formData.extend.goods_id"
|
||||
@customEvent="customEventCommodity"
|
||||
@close="commodityClose"
|
||||
></dialogCommodity>
|
||||
</el-dialog>
|
||||
</popup>
|
||||
@ -294,7 +296,7 @@ const formData = reactive({
|
||||
extend: {
|
||||
task_role: "", // 任务角色
|
||||
target: "", //目标数量
|
||||
product_id: "", //商品id
|
||||
goods_id: "", //商品id
|
||||
store_name: "", // 商品名字
|
||||
},
|
||||
});
|
||||
@ -373,9 +375,19 @@ const openCommodity = () => {
|
||||
};
|
||||
|
||||
const customEventCommodity = (e: any) => {
|
||||
formData.extend.product_id = e.product_id;
|
||||
formData.extend.store_name = e.store_name;
|
||||
formRef.value?.clearValidate("extend.product_id");
|
||||
let id: string[] | number[] = [];
|
||||
let name: string[] = [];
|
||||
e.forEach((item: any) => {
|
||||
id.push(item.product_id);
|
||||
name.push(item.store_name);
|
||||
});
|
||||
formData.extend.goods_id = id.join(",");
|
||||
formData.extend.store_name = name.join(";");
|
||||
formRef.value?.clearValidate("extend.goods_id");
|
||||
showDialogCommodity.value = false;
|
||||
};
|
||||
|
||||
const commodityClose = () => {
|
||||
showDialogCommodity.value = false;
|
||||
};
|
||||
|
||||
@ -452,7 +464,7 @@ const formRules = reactive<any>({
|
||||
trigger: ["blur"],
|
||||
},
|
||||
],
|
||||
"extend.product_id": [
|
||||
"extend.goods_id": [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择商品",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user