update

admin-code/src/components/module/sel-search.vue

@@ -0,0 +1,152 @@
+<template>
+	<el-dialog
+		title="选择商品"
+		:visible.sync="selDialog"
+		:close-on-click-modal="false"
+		:append-to-body="true"
+		width="800px"
+	>
+		<div class="recharge-modal-content">
+			<el-radio-group v-model="radio" class="radio-wrap">
+				<cl-crud class="liu-crud-wrap" @load="onLoad">
+					<template #table-column-radio="{scope}">
+						<div><el-radio :label="scope.row.index">选择</el-radio></div>
+					</template>
+
+					<template #table-column-imgUrl="{scope}">
+						<div>
+							<cl-avatar
+								shape="square"
+								:size="40"
+								:src="scope.row.imgUrl"
+								:style="{ margin: 'auto' }"
+							></cl-avatar>
+						</div>
+					</template>
+				</cl-crud>
+			</el-radio-group>
+		</div>
+		<div slot="footer" class="dialog-footer">
+			<el-button size="small" @click="resetForm">取 消</el-button>
+			<el-button type="primary" size="small" @click="confirmFn">确定</el-button>
+		</div>
+	</el-dialog>
+</template>
+
+<script>
+export default {
+	name: 'sel-search',
+	props: {
+		show: {
+			type: Boolean,
+			default: false
+		},
+		multi: {
+			type: Boolean,
+			default: false
+		}
+	},
+	data() {
+		return {
+			selDialog: false,
+			ruleForm: {},
+			radio: '',
+			list: [],
+			selData: {}
+		};
+	},
+	computed: {
+		// imgUrl() {
+		// this.
+		// return imgUrl
+		// }
+	},
+	watch: {
+		show(val) {
+			this.selDialog = val;
+		}
+	},
+	created() {},
+	methods: {
+		confirmFn() {
+			this.$emit('confirm', this.list[this.radio]);
+		},
+		resetForm() {
+			this.$refs['ruleForm'].resetFields();
+			this.$emit('cancel');
+		}, // cl-crud 组件ad
+		onLoad({ ctx, app }) {
+			this.app = app;
+			ctx.service(this.$service.goods)
+				.set('table', {
+					columns: [
+						{
+							prop: 'radio',
+							label: '选择',
+							align: 'center',
+							'min-width': 60
+						},
+						{
+							prop: 'imgUrl',
+							label: '商品图片',
+							align: 'center'
+						},
+						{
+							prop: 'goodsName',
+							label: '商品名称',
+							align: 'center'
+						},
+						{
+							prop: 'price',
+							label: '商品价格',
+							align: 'center'
+						}
+					],
+					// 操作列
+					op: {
+						visible: false // 是否显示
+						// 同 element-ui Table-column Attributes
+					}
+				})
+				.set('dict', {
+					search: {
+						keyWord: 'goodsName'
+					}
+				})
+				.set('search', {
+					key: {
+						placeholder: '商品名称'
+					}
+				})
+				.set('pagination', {
+					size: 6
+				})
+				.set('layout', [
+					['slot-tabs'],
+					['search-key', 'flex1', 'refresh-btn'],
+					['data-table'],
+					['flex1', 'pagination']
+				])
+				.on('refresh', async (params, { next, render }) => {
+					// 继续执行刷新
+					let { list } = await next(params);
+					list.map((e, index) => {
+						e.index = index;
+						e.imgUrl = e.smallImgList[0];
+					});
+					this.list = list;
+					render(list);
+				})
+				.done();
+			app.refresh({ type: this.tabIndex });
+		}
+	}
+};
+</script>
+
+<style lang="scss">
+// 列表
+.radio-wrap {
+	display: block;
+}
+</style>

admin-code/src/main.js

@@ -28,6 +28,11 @@ Vue.use(crud, {
 			// 搜索
 			search: {
 				keyWord: 'search' // 模糊查询的关键字
+			},
+			// 分页参数
+			pagination: {
+				page: 'page', // 页数
+				size: 'pageSize' // 每页显示的条目
 			}
 		},
 		search: {

admin-code/src/views/ad/list.vue

@@ -43,9 +43,18 @@
 				></el-switch>
 			</template>
 
+			<!-- 编辑 -->
+			<template #slot-modify="{scope}">
+				<el-button type="text" @click="modifyBtnFn(scope.row)">编辑</el-button>
+			</template>
+			<!-- 删除 -->
+			<template #slot-del="{scope}">
+				<el-button type="text" @click="delBtnFn(scope.row)">删除</el-button>
+			</template>
+
 			<!-- 添加 -->
 			<template #slot-add-ad-btn="{scope}">
-				<el-button type="primary" size="mini" @click="changeStatus">添加</el-button>
+				<el-button type="primary" size="mini" @click="addBtnFn">添加</el-button>
 			</template>
 		</cl-crud>
 		<!-- 新增弹窗 -->
@@ -74,7 +83,7 @@
 						<el-col :span="11">
 							<el-date-picker
 								type="date"
-								placeholder="选择日期"
+								placeholder="选择开始日期"
 								v-model="adForm.startTime"
 								value-format="yyyy-MM-dd"
 								style="width: 100%;"
@@ -84,7 +93,7 @@
 						<el-col :span="11">
 							<el-date-picker
 								type="date"
-								placeholder="选择日期"
+								placeholder="选择结束日期"
 								v-model="adForm.endTime"
 								value-format="yyyy-MM-dd"
 								style="width: 100%;"
@@ -109,7 +118,7 @@
 						<template v-if="adForm.style == 0">
 							<div>
 								<el-input
-									v-model="appendForm.url"
+									v-model="adForm.url"
 									placeholder="请填写链接，留空点图片不跳转"
 									size="small"
 								></el-input>
@@ -117,9 +126,26 @@
 						</template>
 						<template v-else>
 							<div>
-								<el-button type="primary" size="small" @click="selGoods"
-									>选择商品</el-button
-								>
+								<div class="goods-list-wrap" v-if="!$util.isEmpty(goodsData)">
+									<div class="goods-list">
+										<div class="list-img">
+											<img
+												:src="goodsData.imgUrl"
+												alt="商品图片"
+												mode="center"
+											/>
+										</div>
+										<div class="list-right">
+											<div>{{ goodsData.goodsName }}</div>
+											<div class="app-price">￥{{ goodsData.price }}</div>
+										</div>
+									</div>
+								</div>
+								<div>
+									<el-button type="primary" size="small" @click="selGoods"
+										>选择商品</el-button
+									>
+								</div>
 							</div>
 						</template>
 					</el-form-item>
@@ -130,11 +156,22 @@
 				<el-button type="primary" size="small" @click="addFn">确认</el-button>
 			</div>
 		</el-dialog>
+		<!-- 选择商品 -->
+		<sel-Search
+			:show.sync="selGoodsModal"
+			@confirm="selGoodsConfirmFn"
+			@cancel="selGoodsModal = false"
+		></sel-Search>
 	</div>
 </template>
 
 <script>
+import selSearch from '@/components/module/sel-search';
 export default {
+	name: 'list-ad',
+	components: {
+		selSearch
+	},
 	data() {
 		return {
 			app: null,
@@ -149,8 +186,10 @@ export default {
 					key: '0'
 				}
 			],
+			// 修改弹窗
+			modifyData: {},
 			// 新增弹窗
-			addDialog: true,
+			addDialog: false,
 			adForm: {
 				adName: '',
 				adImg: '',
@@ -159,15 +198,46 @@ export default {
 				type: '1',
 				style: '0',
 				startTime: '',
+				url: '',
 				endTime: ''
 			},
-			appendForm: {
-				url: '',
-				goodsId: ''
-			}
+			// 商品列表
+			selGoodsModal: false,
+			goodsData: {},
+			goodsList: []
 		};
 	},
 	methods: {
+		// api
+		delBtnFn(item) {
+			this.$confirm('是否删除该广告?', '提示', {
+				confirmButtonText: '确定',
+				cancelButtonText: '取消',
+				type: 'warning'
+			})
+				.then(() => {
+					this.$service.ad.delete({ id: item.id }).then(res => {
+						this.$message.success('删除成功!');
+						this.app.refresh({ type: this.tabIndex });
+					});
+				})
+				.catch();
+		},
+		// operate
+		modifyBtnFn(item) {
+			this.modifyData = item;
+			this.addDialog = true;
+			let data = JSON.parse(JSON.stringify(item));
+			data.startTime = this.$util.$formatDate(data.startTime);
+			data.endTime = this.$util.$formatDate(data.endTime);
+			if (this.$util.isEmpty(data)) return;
+			Object.keys(data).forEach((i, index) => {
+				this.adForm[i] = data[i];
+			});
+		},
+		addBtnFn() {
+			this.addDialog = true;
+		},
 		handleClick(tab, e) {
 			this.app.refresh({ type: this.tabIndex });
 		},
@@ -184,9 +254,9 @@ export default {
 			let form = JSON.parse(JSON.stringify(this.adForm));
 			form.type = this.tabIndex;
 			if (form.style == '0') {
-				form.url = this.appendForm.url;
+				form.url = '';
 			} else {
-				form.goodsId = this.appendForm.goodsId;
+				form.goodsId = this.goodsData.id;
 			}
 			this.$service.ad.add(form).then(res => {
 				this.$message.success('操作成功!');
@@ -194,7 +264,14 @@ export default {
 				this.app.refresh({ type: this.tabIndex });
 			});
 		},
-		selGoods() {},
+		// 选择商品
+		selGoods() {
+			this.selGoodsModal = true;
+		},
+		selGoodsConfirmFn(item) {
+			this.goodsData = item;
+			this.selGoodsModal = false;
+		},
 		// cl-crud 组件ad
 		onLoad({ ctx, app }) {
 			this.app = app;
@@ -249,7 +326,7 @@ export default {
 							label: '操作'
 						},
 						// 布局，请移步 `layout`
-						layout: ['slot-column-redeem']
+						layout: ['slot-modify', 'slot-del']
 					}
 				})
 				.set('layout', [
@@ -267,4 +344,25 @@ export default {
 
 <style lang="scss" scoped>
 // module
+.ad-modal-content {
+	.goods-list-wrap {
+		.goods-list {
+			@include disFlex(center, flex-start);
+			margin-bottom: 10px;
+			.list-img {
+				width: 60px;
+				height: 60px;
+				margin-right: 10px;
+				img {
+					height: 100%;
+				}
+			}
+			.list-right {
+				.app-price {
+					margin-top: 5px;
+				}
+			}
+		}
+	}
+}
 </style>

admin-code/src/views/goods/goods-list.vue

@@ -193,6 +193,16 @@ export default {
 						layout: ['slot-modify', 'slot-takeOff']
 					}
 				})
+				.set('dict', {
+					search: {
+						keyWord: 'goodsName'
+					}
+				})
+				.set('search', {
+					key: {
+						placeholder: '商品名称'
+					}
+				})
 				.set('layout', [
 					['slot-tabs'],
 					['search-key', 'flex1', 'refresh-btn', 'slot-add-goods-btn'],