This commit is contained in:
余同学 2024-12-01 17:26:19 +08:00
parent e70e0e9c0b
commit 7225340c62
3 changed files with 143 additions and 115 deletions

View File

@ -99,6 +99,8 @@
</obj-table-plus> </obj-table-plus>
<!-- 添加或编辑 --> <!-- 添加或编辑 -->
<add-or-update <add-or-update
:marketId="formInline.marketId"
:shopId="formInline.shopId"
@queryList="$refs.oTable.reload()" @queryList="$refs.oTable.reload()"
ref="addOrUpdate" ref="addOrUpdate"
></add-or-update> ></add-or-update>

View File

@ -68,87 +68,109 @@
已选择商品 已选择商品
</div> </div>
<div style="padding: 20px"> <div style="padding: 20px">
<div style="border-top: 1px solid #ccc; padding: 10px 0 0 0"> <div
<div style="font-size: 16px; margin-bottom: 20px"> v-for="item in ruleForm.productList"
<span>商品ID:</span> :key="item.id"
<span style="margin-left: 20px">商品名称:</span> style="border-top: 1px solid #ccc; padding: 10px 0 0 0"
</div>
<el-table
border
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
style="width: 100%"
@selection-change="handleSelectionChange"
> >
<el-table-column align="center" label="是否预售" width="80"> <div style="font-size: 16px; margin-bottom: 20px">
<template slot-scope="scope"> <span>商品ID:{{item.id}}</span>
<el-checkbox v-model="scope.row.isShow"></el-checkbox> <span style="margin-left: 20px">商品名称:{{item.name}}</span>
</template> </div>
</el-table-column> <el-table
<el-table-column align="center" label="SKU-ID" prop="date" /> border
<el-table-column align="center" label="规格" prop="name" /> ref="multipleTable"
<el-table-column align="center" label="属性" prop="address" /> :data="item.productSpecificationList"
<el-table-column tooltip-effect="dark"
align="center" style="width: 100%"
label="销售价" @selection-change="handleSelectionChange"
prop="address" >
width="120" <el-table-column align="center" label="是否预售" width="80">
/> <template slot-scope="scope">
<el-table-column align="center" label="*是否预售" width="200"> <el-checkbox v-model="scope.row.isShow"></el-checkbox>
<template slot="header"> </template>
<span style="color: red">*是否预售</span> </el-table-column>
</template> <el-table-column align="center" label="SKU-ID" prop="id" />
<template slot-scope="scope"> <el-table-column align="center" label="规格" prop="attributeList">
<el-input <template slot-scope="scope">
v-if="scope.row.isShow" <span>{{scope.row.attributeList}}:{{scope.row.attributeValue}}</span>
v-model="scope.row.presalePrice" </template>
placeholder="请输入销售价" </el-table-column>
></el-input> <el-table-column align="center" label="属性" prop="address" />
</template> <el-table-column
</el-table-column> align="center"
<el-table-column align="center" label="*定金" width="200"> label="销售价"
<template slot="header"> prop="address"
<span style="color: red">*定金</span> width="120"
</template> />
<template slot-scope="scope"> <el-table-column align="center" label="*是否预售" width="200">
<el-input <template slot="header">
v-if="scope.row.isShow" <span style="color: red">*是否预售</span>
v-model="scope.row.presalePrice" </template>
placeholder="请输入订金" <template slot-scope="scope">
></el-input> <el-input
</template> v-if="scope.row.isShow"
</el-table-column> v-model="scope.row.presalePrice"
<el-table-column align="center" label="尾款" width="200"> placeholder="请输入销售价"
<template slot-scope="scope"> ></el-input>
<span v-if="scope.row.isShow">{{ </template>
scope.row.presalePrice </el-table-column>
}}</span> <el-table-column align="center" label="*定金" width="200">
</template> <template slot="header">
</el-table-column> <span style="color: red">*定金</span>
<el-table-column align="center" label="*预售库存" width="200"> </template>
<template slot="header"> <template slot-scope="scope">
<span style="color: red">*预售库存</span> <el-input
</template> v-if="scope.row.isShow"
<template slot-scope="scope"> v-model="scope.row.presalePrice"
<el-input placeholder="请输入订金"
v-if="scope.row.isShow" ></el-input>
v-model="scope.row.presalePrice" </template>
placeholder="请输入预售库存" </el-table-column>
></el-input> <el-table-column align="center" label="尾款" width="200">
</template> <template slot-scope="scope">
</el-table-column> <span v-if="scope.row.isShow">{{
</el-table> scope.row.presalePrice
</div> }}</span>
</template>
</el-table-column>
<el-table-column align="center" label="*预售库存" width="200">
<template slot="header">
<span style="color: red">*预售库存</span>
</template>
<template slot-scope="scope">
<el-input
v-if="scope.row.isShow"
v-model="scope.row.presalePrice"
placeholder="请输入预售库存"
></el-input>
</template>
</el-table-column>
</el-table>
</div>
<el-empty v-show="ruleForm.productList.length == 0" description="请选择商品"></el-empty>
</div> </div>
</div> </div>
<!-- 选择商品 -->
</obj-modal> </obj-modal>
<commodity @getProduct="getProduct" ref="commodity"></commodity>
</div> </div>
</template> </template>
<script> <script>
import commodity from "./commodity.vue";
import { debounce, cloneDeep } from "lodash"; import { debounce, cloneDeep } from "lodash";
export default { export default {
components: {}, components: { commodity },
props: {
marketId: {
type: String,
default: "",
},
shopId: {
type: String,
default: "",
},
},
data() { data() {
return { return {
isAdd: true, isAdd: true,
@ -164,6 +186,7 @@ export default {
name: "", name: "",
value: "1", value: "1",
radio: "1", radio: "1",
productList: [],
}, },
orderTime: [], // orderTime: [], //
arrears: [], // arrears: [], //
@ -239,11 +262,23 @@ export default {
} }
}, },
selectProduct() { selectProduct() {
console.log("选择商品"); console.log("选择商品", this.marketId, this.shopId);
this.$nextTick(() => {
this.$refs.commodity.toggle().add({
marketId: this.marketId,
shopId: this.shopId,
});
});
}, },
handleSelectionChange(e) { handleSelectionChange(e) {
console.log(e); console.log(e);
}, },
getProduct(row) {
this.ruleForm.productList = row;
console.log(this.ruleForm.productList, this.ruleForm.productList.length);
console.log("获取商品");
},
}, },
computed: { computed: {
modalHandles() { modalHandles() {

View File

@ -17,39 +17,21 @@
:tableEvent="tableEvent" :tableEvent="tableEvent"
:enableAutoQuery="false" :enableAutoQuery="false"
> >
<!-- <template slot="tableTop"> <template slot="tableTop">
<el-form :inline="true" :model="formInline" class="demo-form-inline"> <el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item v-if="marketList.length > 0" label="菜市场"> <el-form-item label="商品搜索">
<el-select <el-input
@change="getData" v-model="formList.name"
v-model="formInline.marketId" placeholder="商品搜索"
placeholder="请选择菜市场" ></el-input>
> </el-form-item>
<el-option <el-form-item>
v-for="item in marketList" <el-button type="primary" @click="$refs.oTable.reload()"
:key="item.marketId" >查询</el-button
:label="item.marketName" >
:value="item.marketId" </el-form-item>
></el-option> </el-form>
</el-select> </template>
</el-form-item>
<el-form-item v-if="marketList.length > 0" label="店铺">
<el-select v-model="formInline.shopId" placeholder="请选择店铺">
<el-option
v-for="item in storeList"
:key="item.shopId"
:label="item.shopName"
:value="item.shopId"
></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="$refs.oTable.reload()"
>查询</el-button
>
</el-form-item>
</el-form>
</template> -->
</obj-table-plus> </obj-table-plus>
</template> </template>
</obj-modal> </obj-modal>
@ -63,7 +45,7 @@ export default {
isAdd: true, isAdd: true,
// //
modalConfig: { modalConfig: {
title: "请点击选择商品", title: "请点击选择商品 (提示最多选择5个商品)",
show: false, show: false,
width: "1000px", width: "1000px",
}, },
@ -76,14 +58,11 @@ export default {
"row-id": "id", "row-id": "id",
"show-overflow": false, "show-overflow": false,
}, },
selectList: {}, selectList: [],
tableEvent: {
"current-change": async (e) => {
console.log(e.row);
this.selectList = e.row;
},
},
formInline: {}, formInline: {},
formList: {
name: "",
},
}; };
}, },
methods: { methods: {
@ -121,6 +100,7 @@ export default {
} }
return { return {
add: (row) => { add: (row) => {
console.log(row);
this.formInline = row; this.formInline = row;
this.isAdd = true; this.isAdd = true;
this.$nextTick(() => { this.$nextTick(() => {
@ -137,7 +117,7 @@ export default {
computed: { computed: {
tableCols() { tableCols() {
return [ return [
{ type: "seq", width: "60px", align: "center", title: "序号" }, { type: "checkbox", width: "60px", fixed: "left" },
{ {
title: "商品图", title: "商品图",
field: "productPhotoList", field: "productPhotoList",
@ -222,6 +202,17 @@ export default {
}, },
]; ];
}, },
tableEvent() {
return {
"checkbox-all": ({ records, reserves }) => {
this.selectList = [...records, ...reserves];
},
"checkbox-change": ({ records, reserves }) => {
console.log(this.selectList, "2");
this.selectList = [...records, ...reserves];
},
};
},
}, },
}; };
</script> </script>