02 采购后台-新增

1 跳转路由

添加需要跳转新的二级路由页面

   <el-button size="small" type="warning" icon="el-icon-plus" @click="toProductPage">添加商品</el-button>

   //点击添加跳转界面---------------11111111111111111
    toProductPage() {
      this.$router.push('/product/add-product')
    },

vue-router中子路由带/和不带/的区别

2  跳转到添加页面， 产品列表并没有高亮

 解决

2 布局

用弹性盒子或者el-raw写

 3 tree组件-懒加载

调用两个接口： 1获取一级类目   

                          2 点击一级类目。获取二级类目数据 实现懒加载

                         二级类目之后调用接口一样：【传几级类目+ 父id】 查询 该类目数据

封装成组件：

<template>
    <!-- 
        el-tree 树状结构
            show-checkbox  节点是否可被选择	boolean	—	false  
            props	配置选项，具体看下表	object
                label	指定节点标签为节点对象的某个属性值	string, function(data, node)	—	—
                children	指定子树为节点对象的某个属性值	string	—	—
                disabled	指定节点选择框是否禁用为节点对象的某个属性值	boolean, function(data, node)	—	—
                isLeaf	指定节点是否为叶子节点，仅在指定了 lazy 属性的情况下生效	boolean, function(data, node)
            load	加载子树数据的方法，仅当 lazy 属性为true 时生效	function(node, resolve)
            lazy	是否懒加载子节点，需与 load 方法结合使用	boolean	—	false
     -->
    <el-tree :props="props" :load="loadNode" lazy @node-click="clickHandle" accordion>
    </el-tree>

</template>

<script>
export default {
    data() {
        return {
            props: {
                label: 'name',
                children: 'zones',
                isLeaf: 'leaf'
            },
            treeData: []
        };
    },
    methods: {
        //点击tree的节点触发的事件--------------------
        clickHandle(data,node){
            // console.log('data',data,'node',node);
            this.$emit('sendTreeData',data)
        },

        //tree懒加载自动调用这个函数---自动调用不需要手动调用
        loadNode(node, resolve) {
            // console.log('node--', node);
            if (node.level === 0) {
                this.$api.selectItemCategoryByParentId()
                    .then(res => {
                        if (res.data.status == 200) {
                            return resolve(res.data.result);
                        }else{
                            return resolve([])
                        }
                    })
            }
            if (node.level >= 1){
                //请求--------
                this.$api.selectItemCategoryByParentId({type:node.data.cid})
                    .then(res => {
                        if (res.data.status == 200) {
                            return resolve(res.data.result);
                        }else{
                            return resolve([])
                        }
                    })
            } 
        },
        //请求tree数据类目结构----------------------
        // async selectItemCategoryByParentId(type) {
        //     let res = await this.$api.selectItemCategoryByParentId({ type })
        //     console.log('tree数据类目结构------', res.data);
        // }
    }
};
</script>

<style>

</style>

2 将当前节点数据传给form 

@node-click="clickHandle" 获取当前点击节点的数据  

获取到展示到页面中

4 图片上传

1 action 调用后台接口，会上传到服务器上，同时返回一个【图片地址】

2我们需要把获取到的图片地址保存到 form对象中 在 :on-success="handleSuccess"  事件中进行保存

3 可以上传多张图片（互不影响）： 上传一次，调用一次这些事件（ :on-success="handleSuccess" ）

封装组件：

<template>
    <div>
        <!-- 
            el-upload 上传图片
                action	必选参数，上传的地址	string
                list-type	文件列表的类型	string	text/picture/picture-card	text
                on-preview	点击文件列表中已上传的文件时的钩子	function(file)	—	—
                on-remove	文件列表移除文件时的钩子	function(file, fileList)	—	—
                on-success	文件上传成功时的钩子	function(response, file, fileList)
                multiple	是否支持多选文件	boolean
                file-list	上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]	array	—	[]
                disabled	是否禁用	boolean	—	false
                limit	最大允许上传个数	number	—	—
                on-exceed	文件超出个数限制时的钩子	function(files, fileList)

                方法：
                    clearFiles
      
         -->
        <el-upload 
            :action="uploadUrl" 
            list-type="picture-card"
            :on-preview="handlePictureCardPreview" 
            :on-remove="handleRemove"
            :on-success="handleSuccess"
            :file-list="fileList"
            ref="upload"
            multiple>
            <i class="el-icon-plus"></i>
        </el-upload>
    </div>
</template>

<script>
import {uploadUrl,host} from '@/api/base'
export default {
    props:{
        fileList:{
            type:Array,
            default:function(){
                return []
            }
        }
    },
    data() {
        return {
            uploadUrl,
            // fileList:[],
            //上传的文件列表 [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]
        };
    },
    methods: {
        //上传成功-----------------------------
        handleSuccess(response, file, fileList){
            console.log('成功',response, file, fileList);
            //获取上传成功后的图片的地址 <img src=''/> http://localhost:7788/+相对路径
            let url = response.url.slice(7);
            let imgUrl = host+'/'+url
            // console.log('url',imgUrl);
            this.$emit('sendImg',imgUrl)
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        //清空图片列表展示---------------
        clear(){
            // console.log('清空图片列表展示-------');
            // this.fileList=[]
            this.$refs.upload.clearFiles();
        }
    }
}
</script>

<style>

</style>

看：

图片上传vue --file_喵喵酱仔__的博客-CSDN博客

5 富文本编译使用

wangEditor富文本编译器：官方文档：wangEditor

使用步骤：用于 Vue React | wangEditor

按照使用步骤--》封装成组件

1监听修改动作on-change  ，能读到里边的文本： 将数据发送给fome表单

2toolbarKeys ：重新配置工具栏，显示哪些菜单，以及菜单的排序、分组。

<template>
    <div style="border: 1px solid #ccc;">
        <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" :mode="mode" />
        <Editor style="height: 300px; overflow-y: hidden;" v-model="html" :defaultConfig="editorConfig" :mode="mode"
            @onCreated="onCreated" @onChange="onChange" />
    </div>
</template>

<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
export default {
    components: { Editor, Toolbar },
    data() {
        return {
            editor: null,
            html: '<p>hello</p>',
            toolbarConfig: {//菜单栏配置
                 //toolbarKeys-重新配置工具栏，显示哪些菜单，以及菜单的排序、分组
                 toolbarKeys: [
                    'headerSelect', 'bold', 'underline', 'italic', 'color', 'bgColor', 'fontSize', 'fontFamily', 'lineHeight', 'bulletedList', 'numberedList', 'todo', '|', 'emotion', 'uploadImage', 'insertLink', 'insertTable', 'codeBlock', 'divider',
                ],
                //隐藏的菜单栏
                // excludeKeys:['headerSelect', 'blockquote', '|', 'bold', 'underline','group-justify']
            },
            editorConfig: { placeholder: '请输入内容...' },
            mode: 'default', // or 'simple'
        }
    },
    methods: {
        //wangeditor创建的生命周期函数-------------------------
        onCreated(editor) {
            this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
        },
        onChange() {
            console.log('监听-修改', this.html);
            //发送给父组件---- 把wangEditor用户输入的商品描述--发送-商品添加存储
            this.$emit('sendWangEditor', this.html)
        }
    },
    mounted() {
    },
    beforeDestroy() {
        const editor = this.editor
        if (editor == null) return
        editor.destroy() // 组件销毁时，及时销毁编辑器
    }
}
</script>

<style src="@wangeditor/editor/dist/css/style.css">

</style>
<style>

</style>

6 点取消要清空列表

  resetForm(formName) {
            if (this.title == '添加') {
                this.$refs[formName].resetFields();
                //图片列表
                this.$refs.uploadImg.clear();
                //wangEditor 
                this.$refs.wangEditor.html = ''//方法1
                // this.$refs.wangEditor.editor.clear();//方法2 调用自身的清空方法
            }
）

7  编辑 的图片和 wangEditor的回显

 编辑页面： 图片是一个数组，赋值给fileList

 mounted() {
        //进入页面--渲染编辑的数据
        console.log('created---进入页面--渲染编辑的数据---------');
        if (this.title === '编辑'|| this.title==='详情' ) {
            //赋值的rowData是一个新的值  深拷贝：JSON.parse(JSON.stringify())
            // this.ruleForm = { ...this.rowData };//image字符串 浅拷贝
            this.ruleForm = JSON.parse(JSON.stringify(this.rowData)) //image字符串
            this.ruleForm.isShow = true;
            let imgs = this.ruleForm.image;//字符串类型---需要转数组格式 
            let arr = JSON.parse(imgs);//转数组
            this.ruleForm.image = arr;
            console.log('arr---', arr);
            arr.forEach(ele => {
                this.fileList.push({ name: '', url: ele });//fileList 回显图片--传递给UploadImg组件
            });
            console.log('this.fileList---', this.fileList);
            //富文本--------------
            console.log('wangEditor--------------', this.$refs.wangEditor, this.$refs.wangEditor.html);//undefined
            //this.$nextTick() 等待DOM加载完毕执行 延迟加载
            this.$nextTick(() => {
                this.$refs.wangEditor.html = this.rowData.descs;
            })
        }
    }