修改商品

admin-update/src/components/common/elx-upload.vue

@@ -71,7 +71,7 @@
                 this.$emit('handleRemove', {file, fileList})
             },
             handlePictureCardPreview(file) {
-                this.dialogImageUrl = file.url;
+                this.dialogImageUrl =file.showBBGG|| file.url;
                 this.dialogVisible = true;
             },
             exceed() {

admin-update/src/views/goods/goods-add.vue

@@ -312,6 +312,14 @@
         },
         methods: {
             init() {
+                this.pageParams = this.$route.query
+                if (this.pageParams.editType == '2') {
+                    this.$service.goods.detail({id: this.pageParams.id}).then(res => {
+                        this.ruleForm = res
+                        this.fliterData(res)
+                        console.log(this.ruleForm)
+                    })
+                }
                 this.$store.dispatch('getCategory');
                 this._getImgStore();
             },
@@ -329,27 +337,52 @@
             addFn(type) {
                 let form = JSON.parse(JSON.stringify(this.ruleForm));
                 let status = type // 0加入仓库 ,1上架
-                this.$service.goods
-                    .add({
-                        ...form,
-                        goodsStyleList: this.styleStoreData
-                    })
-                    .then(res => {
-                        this.resetForm('ruleForm');
-                        this.$message.success('添加成功！');
-                        this.$router.push('/goods/list');
-                    });
+
+                let serverType = 'add'
+                if (this.pageParams.editType  == '2') {
+                    serverType = 'update'
+                   delete form.shortImgList
+                   delete form.imgList
+                   delete form.smallImgList
+                }
+                this.$service.goods[serverType]({
+                    ...form,
+                    goodsStyleList: this.styleStoreData
+                }).then(res => {
+                    this.resetForm('ruleForm');
+                    this.$message.success('添加成功！');
+                    this.$router.push('/goods/list');
+                });
+            },
+
+            //编辑的时候初始化数据
+            fliterData(res) {
+                // 图片
+                let list=res.smallImgList
+                let list2=res.imgList
+                let list3=res.shortImgList
+                let newList = []
+                for (let i = 0; i < list.length; i++) {
+                    newList.push({url: list[i],showBBGG:list2[i]})
+                }
+                this.ruleForm.shopImg = list3
+                this.fileList_show = newList
+                console.log( this.fileList_show, this.ruleForm.shopImg)
+
+                // 商品分类
+               this.ruleForm.categoryIdList= res.categoryIdList.map(String)
             },
-            fromToData({file, fileList}){
-                let list=[]
+            //上传图片组件逻辑
+            fromToData({file, fileList}) {
+                let list = []
                 // console.log( file, fileList)
-                for (let i = 0; i <fileList.length ; i++) {
-                    if(fileList[i].response){
-                        list.push(fileList[i].response.url)
+                for (let i = 0; i < fileList.length; i++) {
+                    if (fileList[i].response) {
+                        list.push(fileList[i].response.shortUrl)
                     }
                 }
-                this.ruleForm.shopImg= list
-                console.log(  this.ruleForm.shopImg)
+                this.$set( this.ruleForm,'shopImg',list)
+                console.log(this.ruleForm.shopImg)
             },
             // operate
             changeStyleFn(val) {

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

@@ -1,240 +1,245 @@
 <template>
-	<div class="app-list-content">
-		<cl-crud class="liu-crud-wrap" @load="onLoad">
-			<template #slot-tabs="{ scope }">
-				<el-tabs
-					class="liu-tabs"
-					type="border-card"
-					v-model="tabIndex"
-					@tab-click="handleClick"
-				>
-					<el-tab-pane
-						v-for="(item, index) in tabsData"
-						:key="index"
-						:label="item.text"
-						:name="item.key"
-					>
-					</el-tab-pane>
-				</el-tabs>
-			</template>
+    <div class="app-list-content">
+        <cl-crud class="liu-crud-wrap" @load="onLoad">
+            <template #slot-tabs="{ scope }">
+                <el-tabs
+                        class="liu-tabs"
+                        type="border-card"
+                        v-model="tabIndex"
+                        @tab-click="handleClick"
+                >
+                    <el-tab-pane
+                            v-for="(item, index) in tabsData"
+                            :key="index"
+                            :label="item.text"
+                            :name="item.key"
+                    >
+                    </el-tab-pane>
+                </el-tabs>
+            </template>
 
-			<template #table-column-avatarUrl="{scope}">
-				<cl-avatar
-					shape="square"
-					:size="40"
-					:src="scope.row.smallImgList[0] | default_avatar"
-					:style="{ margin: 'auto' }"
-				></cl-avatar>
-			</template>
+            <template #table-column-avatarUrl="{scope}">
+                <cl-avatar
+                        shape="square"
+                        :size="40"
+                        :src="scope.row.smallImgList[0] | default_avatar"
+                        :style="{ margin: 'auto' }"
+                ></cl-avatar>
+            </template>
 
-			<template #table-column-goodsName="{scope}">
-				<span>{{ scope.row.goodsName }}</span>
-				<!-- <span>二维码</span> -->
-				<span class="short-link" @click="openLinkFn(scope.row)">链接</span>
-			</template>
+            <template #table-column-goodsName="{scope}">
+                <span>{{ scope.row.goodsName }}</span>
+                <!-- <span>二维码</span> -->
+                <span class="short-link" @click="openLinkFn(scope.row)">链接</span>
+            </template>
 
-			<!-- 添加商品 -->
-			<template #slot-add-goods-btn="{scope}">
-				<el-button type="primary" size="mini" @click="addFn">添加</el-button>
-			</template>
+            <!-- 添加商品 -->
+            <template #slot-add-goods-btn="{scope}">
+                <el-button type="primary" size="mini" @click="addFn">添加</el-button>
+            </template>
 
-			<!-- 状态 -->
-			<template #table-column-status="{scope}">
-				<span>{{ scope.row.status == 1 ? '上架' : '下架' }}</span>
-			</template>
+            <!-- 状态 -->
+            <template #table-column-status="{scope}">
+                <span>{{ scope.row.status == 1 ? '上架' : '下架' }}</span>
+            </template>
 
-			<!-- 修改 -->
-			<template #slot-modify="{scope}">
-				<el-button type="text">修改</el-button>
-			</template>
+            <!-- 修改 -->
+            <template #slot-modify="{scope}">
+                <el-button type="text" @click="addFn(2,scope.row)">修改</el-button>
+            </template>
 
-			<!-- 下架 -->
-			<template #slot-takeOff="{scope}">
-				<el-button type="text" @click="downFn(scope.row)">下架</el-button>
-			</template>
-		</cl-crud>
-		<!-- 添加商品 -->
-		<el-dialog title="商品短链接：" :visible.sync="dialogFormVisible" width="40%">
-			<div>
-				<el-input v-model="sortLink" :disabled="true"></el-input>
-			</div>
-			<div slot="footer" class="dialog-footer">
-				<el-button @click="dialogFormVisible = false">取 消</el-button>
-				<el-button type="primary" @click="sendPhoneFn">发到手机</el-button>
-			</div>
-		</el-dialog>
-	</div>
+            <!-- 下架 -->
+            <template #slot-takeOff="{scope}">
+                <el-button type="text" @click="downFn(scope.row)">下架</el-button>
+            </template>
+        </cl-crud>
+        <!-- 添加商品 -->
+        <el-dialog title="商品短链接：" :visible.sync="dialogFormVisible" width="40%">
+            <div>
+                <el-input v-model="sortLink" :disabled="true"></el-input>
+            </div>
+            <div slot="footer" class="dialog-footer">
+                <el-button @click="dialogFormVisible = false">取 消</el-button>
+                <el-button type="primary" @click="sendPhoneFn">发到手机</el-button>
+            </div>
+        </el-dialog>
+    </div>
 </template>
 
 <script>
-export default {
-	data() {
-		return {
-			app: null,
-			dialogFormVisible: false,
-			sortLink: '',
-			operateData: {},
-			tabIndex: '-1',
-			tabsData: [
-				{
-					text: '全部',
-					key: '-1'
-				},
-				{
-					text: '上架',
-					key: '1'
-				},
-				{
-					text: '下架',
-					key: '0'
-				}
-			]
-		};
-	},
-	methods: {
-		handleClick(tab, e) {
-			console.log(tab, e);
-			this.app.refresh({ type: this.tabIndex });
-		},
-		// 打开链接
-		openLinkFn(item) {
-			this.operateData = item;
-			this.sortLink = item.shortUrl || '';
-			this.dialogFormVisible = true;
-		},
-		sendPhoneFn() {
-			this.$service.goods.sendPhone({ id: this.operateData.id }).then(res => {
-				this.$message.success('发送成功！');
-				this.dialogFormVisible = false;
-			});
-		},
-		// 添加商品
-		addFn() {
-			this.$router.push('/goods/add');
-		},
-		downFn(item) {
-			this.$confirm('是否下架该商品?', '提示', {
-				confirmButtonText: '确定',
-				cancelButtonText: '取消',
-				type: 'warning'
-			})
-				.then(() => {
-					this.$service.goods
-						.changeStatus({
-							id: item.id,
-							status: item.status == 0 ? 1 : 0
-						})
-						.then(res => {
-							item.status = item.status == 0 ? 1 : 0;
-							this.$message.success('操作成功！');
-						})
-						.catch(e => {
-							this.$message.error(e);
-						});
-				})
-				.catch(() => {
-					this.$message({
-						type: 'info',
-						message: '已取消删除'
-					});
-				});
-		},
-		// cl-crud 组件
-		onLoad({ ctx, app }) {
-			this.app = app;
-			ctx.service(this.$service.goods)
-				.set('table', {
-					columns: [
-						{
-							prop: 'id',
-							label: 'ID',
-							align: 'center'
-						},
-						{
-							prop: 'avatarUrl',
-							label: '封面',
-							align: 'center'
-						},
-						{
-							prop: 'goodsName',
-							label: '标题',
-							align: 'center',
-							'min-width': 180
-						},
-						{
-							prop: 'inTurn',
-							label: '顺序',
-							align: 'center'
-						},
-						{
-							prop: 'price',
-							label: '价格',
-							align: 'center',
-							emptyText: '无',
-							'min-width': 150
-						},
-						{
-							prop: 'actualSold',
-							label: '销量',
-							align: 'center'
-						},
-						{
-							prop: 'viewNum',
-							label: '浏览量',
-							align: 'center'
-						},
-						{
-							prop: 'status',
-							label: '状态',
-							align: 'center'
-						},
-						{
-							prop: 'createDate',
-							label: '创建时间',
-							align: 'center'
-						}
-					],
-					// 操作列
-					op: {
-						visible: true, // 是否显示
-						// 同 element-ui Table-column Attributes
-						props: {
-							width: 150,
-							align: 'center',
-							fixed: 'right',
-							label: '操作'
-						},
-						// 布局，请移步 `layout`
-						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'],
-					['data-table'],
-					['flex1', 'pagination']
-				])
-				.done();
-			app.refresh({ status: this.tabIndex });
-		}
-	}
-};
+    export default {
+        data() {
+            return {
+                app: null,
+                dialogFormVisible: false,
+                sortLink: '',
+                operateData: {},
+                tabIndex: '-1',
+                tabsData: [
+                    {
+                        text: '全部',
+                        key: '-1'
+                    },
+                    {
+                        text: '上架',
+                        key: '1'
+                    },
+                    {
+                        text: '下架',
+                        key: '0'
+                    }
+                ]
+            };
+        },
+        methods: {
+            handleClick(tab, e) {
+                console.log(tab, e);
+                this.app.refresh({type: this.tabIndex});
+            },
+            // 打开链接
+            openLinkFn(item) {
+                this.operateData = item;
+                this.sortLink = item.shortUrl || '';
+                this.dialogFormVisible = true;
+            },
+            sendPhoneFn() {
+                this.$service.goods.sendPhone({id: this.operateData.id}).then(res => {
+                    this.$message.success('发送成功！');
+                    this.dialogFormVisible = false;
+                });
+            },
+            // 添加商品
+            addFn(type, data) {
+                let query = {}
+                if (type === 2) {
+                    query.id = data.id
+                    query.editType =type
+                }
+                this.$router.push({path: `/goods/add/`,query});
+            },
+            downFn(item) {
+                this.$confirm('是否下架该商品?', '提示', {
+                    confirmButtonText: '确定',
+                    cancelButtonText: '取消',
+                    type: 'warning'
+                })
+                    .then(() => {
+                        this.$service.goods
+                            .changeStatus({
+                                id: item.id,
+                                status: item.status == 0 ? 1 : 0
+                            })
+                            .then(res => {
+                                item.status = item.status == 0 ? 1 : 0;
+                                this.$message.success('操作成功！');
+                            })
+                            .catch(e => {
+                                this.$message.error(e);
+                            });
+                    })
+                    .catch(() => {
+                        this.$message({
+                            type: 'info',
+                            message: '已取消删除'
+                        });
+                    });
+            },
+            // cl-crud 组件
+            onLoad({ctx, app}) {
+                this.app = app;
+                ctx.service(this.$service.goods)
+                    .set('table', {
+                        columns: [
+                            {
+                                prop: 'id',
+                                label: 'ID',
+                                align: 'center'
+                            },
+                            {
+                                prop: 'avatarUrl',
+                                label: '封面',
+                                align: 'center'
+                            },
+                            {
+                                prop: 'goodsName',
+                                label: '标题',
+                                align: 'center',
+                                'min-width': 180
+                            },
+                            {
+                                prop: 'inTurn',
+                                label: '顺序',
+                                align: 'center'
+                            },
+                            {
+                                prop: 'price',
+                                label: '价格',
+                                align: 'center',
+                                emptyText: '无',
+                                'min-width': 150
+                            },
+                            {
+                                prop: 'actualSold',
+                                label: '销量',
+                                align: 'center'
+                            },
+                            {
+                                prop: 'viewNum',
+                                label: '浏览量',
+                                align: 'center'
+                            },
+                            {
+                                prop: 'status',
+                                label: '状态',
+                                align: 'center'
+                            },
+                            {
+                                prop: 'createDate',
+                                label: '创建时间',
+                                align: 'center'
+                            }
+                        ],
+                        // 操作列
+                        op: {
+                            visible: true, // 是否显示
+                            // 同 element-ui Table-column Attributes
+                            props: {
+                                width: 150,
+                                align: 'center',
+                                fixed: 'right',
+                                label: '操作'
+                            },
+                            // 布局，请移步 `layout`
+                            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'],
+                        ['data-table'],
+                        ['flex1', 'pagination']
+                    ])
+                    .done();
+                app.refresh({status: this.tabIndex});
+            }
+        }
+    };
 </script>
 
 <style lang="scss" scoped>
-.short-link {
-	color: $mainColor;
-	margin-left: 10px;
-	cursor: pointer;
-}
+    .short-link {
+        color: $mainColor;
+        margin-left: 10px;
+        cursor: pointer;
+    }
 </style>