351 lines
10 KiB
Vue
351 lines
10 KiB
Vue
<template>
|
|
<div>
|
|
<el-drawer title="新增关联商品" :append-to-body="true" v-show="drawer" :wrapperClosable="false" :visible.sync="drawer" destroy-on-close
|
|
direction="rtl" size="70%">
|
|
|
|
<div class="shop_drawer_box demo-drawer__content">
|
|
<div class="addFormBox">
|
|
<el-form ref="addForm" label-width="80px" :model="dataForm">
|
|
<el-form-item label="商品名称" prop="keywords" class="form_item">
|
|
<el-input size="small" placeholder="请输入商品名称" style="width: 100%" v-model="dataForm.keywords" clearable>
|
|
</el-input>
|
|
</el-form-item>
|
|
<!-- <el-form-item label="商品类型" prop="goodsType" class="form_item">
|
|
<el-select size="small" v-model="dataForm.goodsType" placeholder="请选择" style="width: 100%" clearable>
|
|
<el-option v-for="item in goodsTypeList" :key="item.dictType" :label="item.dictValue"
|
|
:value="item.dictType">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item> -->
|
|
|
|
<el-form-item label="" class="form_item" label-width="20px" style="width: 160px !important">
|
|
<el-button type="primary" plain @click="
|
|
pageIndex = 1;
|
|
getDataList(bookMarketId);
|
|
" size="small">查询</el-button>
|
|
<el-button @click="handleReset()" size="small" plain>重置</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
|
|
<el-table ref="table" height="80%" :data="dataList" :row-key="getRowKeys" border size="mini" highlight-current-row
|
|
v-loading="dataListLoading" @selection-change="handleSelectionChange" @current-change="handleCurrentChange" style="width: 100%">
|
|
<!-- <el-table-column :reserve-selection="true" type="selection" header-align="center" align="center" width="50">
|
|
</el-table-column> -->
|
|
|
|
|
|
<el-table-column label="商品ID" width="70" align="center" prop="productId">
|
|
|
|
</el-table-column>
|
|
<el-table-column prop="productName" header-align="center" align="center" label="商品名称">
|
|
</el-table-column>
|
|
|
|
<el-table-column prop="price" width="120" header-align="center" align="center" sortable label="商品价格">
|
|
</el-table-column>
|
|
<el-table-column prop="activityPrice" width="120" header-align="center" align="center" sortable label="活动价">
|
|
</el-table-column>
|
|
|
|
|
|
<el-table-column header-align="center" align="center" label="商品图" width="120">
|
|
<template slot-scope="scope">
|
|
<img v-if="scope.row.productImages != ''" :src="scope.row.productImages" width="25" height="35"
|
|
class="tableImg" />
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
header-align="center"
|
|
align="center"
|
|
label="操作"
|
|
width="80"
|
|
>
|
|
<template slot-scope="scope">
|
|
<el-button
|
|
type="text"
|
|
@click="handleCurrentChange(scope.row)"
|
|
size="mini"
|
|
>绑定</el-button
|
|
>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
|
|
:page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage"
|
|
layout="total, sizes, prev, pager, next, jumper">
|
|
</el-pagination>
|
|
|
|
<div class="demo-drawer__footer">
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</el-drawer>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
props: ["currentType", "currentId","type"],
|
|
data() {
|
|
return {
|
|
timer: null,
|
|
drawer: false,
|
|
loading: false,
|
|
multipleSelectionAll: [], // 所有选中的数据包含跨页数据
|
|
multipleSelection: [], // 当前页选中的数据
|
|
idKey: "productId", // 标识列表数据中每一行的唯一键的名称(需要按自己的数据改一下)
|
|
dataForm: {
|
|
keywords: "",
|
|
|
|
},
|
|
currentRow:null,
|
|
bookMarketId: null,
|
|
dataList: [],
|
|
publishStatus: false,
|
|
pageIndex: 1,
|
|
pageSize: 10,
|
|
totalPage: 0,
|
|
dataListLoading: false,
|
|
dataListSelections: [],
|
|
addOrUpdateVisible: false,
|
|
chooseBookVisible: false,
|
|
bookIds: [],
|
|
goodsTypeList: [],
|
|
};
|
|
},
|
|
components: {
|
|
// AddOrUpdate,
|
|
// chooseBook
|
|
},
|
|
activated() {
|
|
this.getDataList();
|
|
},
|
|
methods: {
|
|
handleReset() {
|
|
this.dataForm = { keywords: "",
|
|
};
|
|
this.pageIndex = 1;
|
|
this.getDataList();
|
|
},
|
|
submit() {
|
|
var ids = this.multipleSelection.map((e) => e.id).toString(",");
|
|
this.$emit("submit", ids);
|
|
console.log(
|
|
"🚀 ~ submit ~ this.multipleSelection:",
|
|
this.multipleSelection
|
|
);
|
|
},
|
|
|
|
// 获取商品类型
|
|
getGoodsTypeList() {
|
|
this.$http({
|
|
url: this.$http.adornUrl("/book/sysdictdata/selectByType/goodsType"),
|
|
method: "get",
|
|
}).then(({ data }) => {
|
|
// console.log(data.dataList)
|
|
this.goodsTypeList = data.dataList;
|
|
});
|
|
},
|
|
handleClose(done) {
|
|
done();
|
|
// this.$confirm("确认关闭？")
|
|
// .then((_) => {
|
|
// done();
|
|
// })
|
|
// .catch((_) => {});
|
|
},
|
|
async open() {
|
|
this.drawer = true;
|
|
this.dataForm = { keywords: "",
|
|
};
|
|
this.pageIndex = 1;
|
|
// await this.getGoodsTypeList();
|
|
await this.getDataList();
|
|
},
|
|
close() {
|
|
this.drawer = false;
|
|
},
|
|
getRowKeys(row) {
|
|
return row.productId;
|
|
},
|
|
|
|
handleCurrentChange(val) {
|
|
console.log("🚀 ~ handleSelectionChange ~ val:", val);
|
|
|
|
this.$emit("submit", val);
|
|
|
|
this.drawer = false;
|
|
// table组件选中事件,记得加上@selection-change="handleSelectionChange"
|
|
// this.multipleSelection = val;
|
|
// this.changePageCoreRecordData();
|
|
},
|
|
|
|
handleSelectionChange(val) {
|
|
console.log("🚀 ~ handleSelectionChange ~ val:", val);
|
|
// table组件选中事件,记得加上@selection-change="handleSelectionChange"
|
|
this.multipleSelection = val;
|
|
// this.changePageCoreRecordData();
|
|
},
|
|
|
|
closeBookf() {
|
|
this.chooseBookVisible = false;
|
|
},
|
|
showchooseBookf(e) {
|
|
// 显示图书列表
|
|
this.chooseBookVisible = true;
|
|
|
|
},
|
|
// 获取数据列表
|
|
async getDataList() {
|
|
var form = {
|
|
type: this.type,
|
|
...this.dataForm,
|
|
page: this.pageIndex,
|
|
limit: this.pageSize,
|
|
|
|
// productId: "",
|
|
};
|
|
|
|
form.id = this.currentId;
|
|
|
|
this.dataListLoading = true;
|
|
this.clear();
|
|
|
|
await this.$http({
|
|
url: this.$http.adornUrl(`/master/shopProduct/getProductForApp`),
|
|
method: "post",
|
|
data: this.$http.adornData(form),
|
|
}).then(({ data }) => {
|
|
if (data && data.code === 0) {
|
|
this.dataList = data.page.records;
|
|
this.totalPage = data.page.total;
|
|
} else {
|
|
this.dataList = [];
|
|
this.totalPage = 0;
|
|
}
|
|
// setTimeout(async () => {
|
|
// await this.setSelectRow();
|
|
// }, 200);
|
|
this.dataListLoading = false;
|
|
});
|
|
},
|
|
// 获取数据列表
|
|
|
|
clear() {
|
|
// this.$refs.table.clearSelection();
|
|
this.multipleSelection = [];
|
|
},
|
|
|
|
// 每页数
|
|
sizeChangeHandle(val) {
|
|
// this.changePageCoreRecordData();
|
|
this.pageSize = val;
|
|
this.pageIndex = 1;
|
|
this.getDataList();
|
|
},
|
|
// 当前页
|
|
currentChangeHandle(val) {
|
|
// 改变页的时候调用一次
|
|
// this.changePageCoreRecordData();
|
|
this.pageIndex = val;
|
|
this.getDataList();
|
|
},
|
|
// 多选
|
|
selectionChangeHandle(val) {
|
|
this.dataListSelections = val;
|
|
},
|
|
// 新增 / 修改
|
|
addOrUpdateHandle(id) {
|
|
this.addOrUpdateVisible = true;
|
|
this.$nextTick(() => {
|
|
this.$refs.addOrUpdate.init(id);
|
|
});
|
|
},
|
|
// 删除
|
|
deleteHandle(id) {
|
|
var ids = id
|
|
? [id]
|
|
: this.dataListSelections.map((item) => {
|
|
return item.productId;
|
|
});
|
|
this.$confirm(
|
|
`确定对[id=${ids.join(",")}]进行[${id ? "删除" : "批量删除"}]操作?`,
|
|
"提示",
|
|
{
|
|
confirmButtonText: "确定",
|
|
cancelButtonText: "取消",
|
|
type: "warning",
|
|
}
|
|
).then(() => {
|
|
this.$http({
|
|
url: this.$http.adornUrl("/book/shopproduct/delete"),
|
|
method: "post",
|
|
data: this.$http.adornData(ids, false),
|
|
}).then(({ data }) => {
|
|
if (data && data.code === 0) {
|
|
this.$message({
|
|
message: "操作成功",
|
|
type: "success",
|
|
duration: 1500,
|
|
onClose: () => {
|
|
this.getDataList();
|
|
},
|
|
});
|
|
} else {
|
|
this.$message.error(data.msg);
|
|
}
|
|
});
|
|
});
|
|
},
|
|
SwitchChange(event) {
|
|
/*点击时他会自动把你绑定的值变更，直接去请求数据就可以了*/
|
|
var parms = {
|
|
publishStatus: event.publishStatus,
|
|
productId: event.productId,
|
|
};
|
|
// console.log(parms)
|
|
this.$http({
|
|
url: this.$http.adornUrl("/book/shopproduct/update"),
|
|
method: "post",
|
|
data: parms,
|
|
})
|
|
.then((res) => {
|
|
this.$message({
|
|
message: "成功",
|
|
type: "success",
|
|
});
|
|
this.loading = false;
|
|
this.getDataList();
|
|
})
|
|
.catch((error) => {
|
|
this.loading = false;
|
|
console.log(error);
|
|
});
|
|
console.log(event);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.shop_drawer_box {
|
|
padding: 20px !important;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.addFormBox {
|
|
width: 100%;
|
|
|
|
// overflow: hidden;
|
|
.form_item {
|
|
width: 33%;
|
|
float: left;
|
|
}
|
|
}
|
|
|
|
::v-deep.el-drawer__header {
|
|
margin-bottom: 10px !important;
|
|
}
|
|
</style> |