123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369 |
- <!--
- * @Description:
- * @Version: 1.0
- * @Autor: zhuyijun
- * @Date: 2021-11-29 22:13:51
- * @LastEditTime: 2022-02-20 18:54:19
- -->
- <template>
- <div>
- <!-- 面包屑导航区 -->
- <el-breadcrumb separator-class="el-icon-arrow-right">
- <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
- <el-breadcrumb-item>商品管理</el-breadcrumb-item>
- <el-breadcrumb-item :to="{path:'/goods'}">商品列表</el-breadcrumb-item>
- <el-breadcrumb-item>编辑商品</el-breadcrumb-item>
- </el-breadcrumb>
- <!-- 卡片区 -->
- <el-card>
- <!-- 提示区域 -->
- <el-alert title="添加商品信息"
- center
- show-icon
- :closable="false"
- type="info">
- </el-alert>
- <!-- 步骤条 -->
- <el-steps :space="200"
- :active="activeIndex - 0"
- finish-status="success"
- align-center>
- <el-step title="基本信息"></el-step>
- <el-step title="商品参数"></el-step>
- <el-step title="商品属性"></el-step>
- <el-step title="商品图片"></el-step>
- <el-step title="商品内容"></el-step>
- <el-step title="完成"></el-step>
- </el-steps>
- <el-form :model="editForm"
- :rules="editFormRules"
- ref="editFormRef"
- label-width="100px"
- label-position="top">
- <!-- tab栏区域 -->
- <el-tabs v-model="activeIndex"
- :tab-position="tabPosition"
- :before-leave="beforeTabLeave"
- @tab-click="tabClicked">
- <el-tab-pane label="基本信息"
- name="0">
- <el-form-item label="商品名称"
- prop="goods_name">
- <el-input v-model="editForm.goods_name"></el-input>
- </el-form-item>
- <el-form-item label="商品价格"
- prop="goods_price">
- <el-input v-model="editForm.goods_price"></el-input>
- </el-form-item>
- <el-form-item label="商品重量"
- prop="goods_weight">
- <el-input v-model="editForm.goods_weight"></el-input>
- </el-form-item>
- <el-form-item label="商品数量"
- prop="goods_number">
- <el-input v-model="editForm.goods_number"></el-input>
- </el-form-item>
- <el-form-item label="商品分类"
- prop="goods_cat">
- <el-cascader v-model="editForm.goods_cat"
- :options="cateList"
- :props="cateProps"
- @change="handleChange"></el-cascader>
- </el-form-item>
- </el-tab-pane>
- <el-tab-pane label="商品参数"
- name="1">
- <!-- 渲染表单的Item项 -->
- <el-form-item v-for="item in manyTableData"
- :key="item.attr_id+''"
- :label="item.attr_name">
- <el-checkbox-group v-model="item.attr_vals">
- <el-checkbox :label="cb"
- v-for="(cb, i) in item.attr_vals"
- :key="i+''"></el-checkbox>
- </el-checkbox-group>
- </el-form-item>
- </el-tab-pane>
- <el-tab-pane label="商品属性"
- name="2">
- <!-- 渲染表单的Item项 -->
- <el-form-item v-for="item in onlyTableData"
- :key="item.attr_id +''"
- :label="item.attr_name">
- <el-input v-model="item.attr_vals"></el-input>
- </el-form-item>
- </el-tab-pane>
- <el-tab-pane label="商品图片"
- name="3">
- <!-- 上传图片
- action: 表示上传api地址
- list-type: 指定预览组件呈现方式
- -->
- <el-upload :action="uploadURL"
- :on-preview="handlePreview"
- :on-remove="handleRemove"
- list-type="picture"
- :headers="headerObj"
- :on-success="handleSuccess"
- v-model="editForm.pics">
- <el-button size="small"
- type="primary">点击上传</el-button>
- </el-upload>
- </el-tab-pane>
- <el-tab-pane label="商品内容"
- name="4">
- <!-- 富文本编辑器 -->
- <quill-editor v-model="editForm.goods_introduce">
- </quill-editor>
- <!-- <editor v-model="editForm.goods_introduce"
- :upload-url='uploadURL'></editor> -->
- </el-tab-pane>
- <el-tab-pane label="完成"
- name="5">
- <!-- 添加商品按钮 -->
- <el-button type="primary"
- class="btnedit"
- @click="edit">编辑商品</el-button>
- </el-tab-pane>
- </el-tabs>
- </el-form>
- </el-card>
- <el-dialog title="图片预览"
- :visible.sync="previewVisible"
- width="75%"
- @close="previewClosed">
- <img :src="previewPath"
- class="previewImg">
- </el-dialog>
- </div>
- </template>
- <script>
- // import editor from '../markdown/markdown.vue'
- export default {
- components: {
- // editor
- },
- data () {
- return {
- activeIndex: 0,
- tabPosition: 'left',
- editForm: {
- goods_id: '',
- goods_name: '',
- goods_price: 0,
- goods_weight: 0,
- goods_number: 0,
- //商品所属分类数组
- goods_cat: [],
- // 图片数组
- pics: [],
- //商品详情描述
- goods_introduce: '',
- attrs: []
- },
- editFormRules: {
- goods_name: [
- { required: true, message: '请输入商品名称', trigger: 'blur' }
- ],
- goods_price: [
- { required: true, message: '请输入商品价格', trigger: 'blur' }
- ],
- goods_weight: [
- { required: true, message: '请输入商品重量', trigger: 'blur' }
- ],
- goods_number: [
- { required: true, message: '请输入商品数量', trigger: 'blur' }
- ],
- goods_cat: [
- { required: true, message: '请选择商品分类', trigger: 'blur' }
- ]
- },
- cateList: [],
- cateProps: {
- expandTrigger: 'hover',
- label: 'cat_name',
- value: 'cat_id',
- children: 'children'
- },
- manyTableData: [],
- onlyTableData: [],
- // 上传图片的url地址
- uploadURL: 'http://localhost:8888/api/private/v1/upload',
- headerObj: {
- Authorization: window.localStorage.getItem('token')
- },
- previewPath: '',
- previewVisible: false,
- quillOption: {
- }
- }
- },
- created () {
- const id = this.$route.query.id
- if (id) {
- this.editForm.goods_id = id
- }
- this.getCateList()
- this.getGoodById(id)
- },
- methods: {
- async getCateList () {
- const { data: res } = await this.$http.get('categories')
- if (res.meta.status !== 200) {
- this.$message.error(res.meta.msg)
- }
- this.cateList = res.data
- // console.log(res.data)
- },
- //TODO 商品分类回显代写
- //递归设置分类
- handlerCate (list, id) {
- }
- ,
- async getGoodById (id) {
- const { data: res } = await this.$http.get(`goods/${id}`)
- if (res.meta.status !== 200) {
- this.$message.error(res.meta.msg)
- }
- // console.log(res.data)
- this.editForm = res.data
- },
- handleChange () {
- if (this.editForm.goods_cat.length !== 3) {
- this.editForm.goods_cat.length = []
- this.$message.info('请选择三级分类')
- }
- },
- // 监听标签切换
- beforeTabLeave (activeName, oldActiveName) {
- if (oldActiveName === '0' && this.editForm.goods_cat.length !== 3) {
- this.$message.error('请选择商品分类')
- return false
- }
- return true
- },
- async getManyAttribute () {
- const { data: res } = await this.$http.get(`categories/${this.cateId}/attributes`, {
- params: { sel: 'many' }
- })
- if (res.meta.status !== 200) {
- this.$message.error(res.meta.msg)
- }
- res.data.forEach(item => {
- let vals = item.attr_vals
- item.attr_vals = vals.length === 0 ? [] : vals.split(' ')
- })
- this.manyTableData = res.data
- },
- async getOnlyAttribute () {
- const { data: res } = await this.$http.get(`categories/${this.cateId}/attributes`, {
- params: { sel: 'only' }
- })
- if (res.meta.status !== 200) {
- this.$message.error(res.meta.msg)
- }
- // res.data.forEach(item => {
- // let vals = item.attr_vals
- // item.attr_vals = vals.length === 0 ? [] : vals.split(' ')
- // })
- this.onlyTableData = res.data
- // console.log(res.data)
- },
- tabClicked () {
- switch (this.activeIndex) {
- case '1':
- this.getManyAttribute()
- break
- case '2':
- this.getOnlyAttribute()
- break
- case '3': break
- case '4': break
- default:
- }
- },
- // 处理图片预览效果
- handlePreview (file) {
- this.previewPath = file.response.data.url
- this.previewVisible = true
- },
- // 处理已出图片操作
- handleRemove (file) {
- // 1、获取将要删除的图片的临时路径
- const filePath = file.response.data.tmp_path
- // 2、从pics素组中,找到这个图片的索引值
- const i = this.editForm.pics.findIndex(item => item.pic === filePath)
- // 3、调用数组的splice方法,把图片信息对象,从pics数组中移除
- this.editForm.pics.splice(i, 1)
- },
- // 监听上传成功的事件
- handleSuccess (response) {
- //1、拼接得到一个图片信息对象
- const picInfo = { pic: response.data.tmp_path }
- // 2、将图片信息对象 push到pics数组中
- this.editForm.pics.push(picInfo)
- },
- previewClosed () {
- this.previewPath = ''
- },
- // 编辑商品函数
- edit () {
- this.$refs.editFormRef.validate(async (valid) => {
- if (!valid) return this.$message.error('请填写必要的表单项!')
- // 深拷贝
- let form = JSON.parse(JSON.stringify(this.editForm))
- form.goods_cat = form.goods_cat.join(',')
- // 处理动态参数
- this.manyTableData.forEach(item => {
- const attrInfo = {
- attr_id: item.attr_id,
- attr_value: item.attr_vals.join(' ')
- }
- form.attrs.push(attrInfo)
- })
- // 处理静态属性
- this.onlyTableData.forEach(item => {
- const attrInfo = {
- attr_id: item.attr_id,
- attr_value: item.attr_vals
- }
- form.attrs.push(attrInfo)
- })
- // 商品名称唯一
- // 执行添加逻辑
- const { data: res } = await this.$http.put(`goods/${form.goods_id}`, form)
- if (res.meta.status !== 201) {
- this.$message.error(res.meta.msg)
- }
- this.$message.success(res.meta.msg)
- })
- }
- },
- computed: {
- cateId () {
- if (this.editForm.goods_cat.length === 3) {
- return this.editForm.goods_cat[2]
- }
- return null
- }
- }
- }
- </script>
- <style lang="less" scoped>
- .el-checkbox {
- margin: 0 10px 0 0 !important;
- }
- .previewImg {
- width: 100%;
- }
- .btnedit {
- margin-top: 15px;
- }
- </style>
|