文本编辑器

package.json

@@ -40,7 +40,8 @@
     "vue-qr": "^2.2.1",
     "vue-quill-editor": "^3.0.6",
     "vue-router": "3.0.6",
-    "vuex": "3.1.0"
+    "vuex": "3.1.0",
+    "wangeditor": "^4.0.0"
   },
   "devDependencies": {
     "@babel/core": "7.0.0",

src/components/VIdeo/index.vue → src/components/Editor/index.vue

@@ -1,5 +1,152 @@
+
 <template>
   <div class="editor">
+    <div id="demo1"></div>
+    <!-- <button type="button" class="btn" @click="getEditorData">获取当前内容</button> -->
+    <!-- <h3>内容预览</h3> -->
+    <!-- <textarea name="" id="" cols="170" rows="20" readonly v-model="editorData"></textarea> -->
+  </div>
+</template>
+
+<script>
+// 引入 wangEditor
+import wangEditor from 'wangeditor'
+import axios from 'axios'
+import qs from 'qs'
+import load from '@/utils/loading'
+import {
+  getToken
+} from '@/utils/auth'
+export default {
+  data() {
+    return {
+      editor: null,
+      editorData: ''
+    }
+  },
+  mounted() {
+    const editor = new wangEditor(`#demo1`)
+    // 默认情况下，显示所有菜单
+    editor.config.menus = [
+        'head',
+        'bold',
+        'fontSize',
+        'fontName',
+        'italic',
+        'underline',
+        'strikeThrough',
+        'indent',
+        'lineHeight',
+        'foreColor',
+        'backColor',
+        // 'link',
+        'list',
+        'justify',
+        'quote',
+        // 'emoticon',
+        'image',
+        // 'video',
+        'table',
+        // 'code',
+        'splitLine',
+        'undo',
+        'redo',
+    ]
+    // 最大上传图片数
+    editor.config.uploadImgMaxLength = 1
+    // 限制图片大小
+    // editor.config.uploadImgMaxSize = 2 * 1024 * 1024
+    // 配置 onchange 回调函数，将数据同步到 vue 中
+    editor.config.onchange = (newHtml) => {
+       this.editorData = newHtml
+    }
+    // console.log(editor.txt.eventHooks)
+    // editor.txt.eventHooks.clickEvents.push(() => {
+    //   return false
+    // })
+    // editor.txt.eventHooks.imgClickEvents.push(() => {
+
+    // })
+    // editor.config.uploadImgServer = '/api-web/uploadFile'
+    editor.config.customUploadImg = async (resultFiles, insertImgFn) => {
+        // resultFiles 是 input 中选中的文件列表
+        // insertImgFn 是获取图片 url 后，插入到编辑器的方法
+
+        const file = resultFiles[0]
+        const imageType = {
+          "image/png": true,
+          "image/jpeg": true
+        };
+        const isImage = imageType[file.type];
+        const isLt2M = file.size / 1024 / 1024 < 2;
+        if (!isImage) {
+          this.$message.error("只能上传图片格式!");
+        }
+        if (!isLt2M) {
+          this.$message.error("上传图片大小不能超过 2M!");
+        }
+        if(isImage && isLt2M) {
+          // load.startLoading()
+          let form = new FormData()
+          form.append('file', file)
+          await axios({
+            method: 'post',
+            headers: {
+                Authorization: getToken()
+            },
+            data: form,
+            url: '/api-web/uploadFile',
+          }).then(res => {
+            console.log(res)
+            // load.endLoading()
+          }).catch(err => {
+            console.log(err)
+            // load.endLoading()
+          })
+        }
+        // return isImage && isLt2M;
+        // 上传图片，返回结果，将图片插入到编辑器中
+        // insertImgFn(imgUrl)
+    }
+
+    // 创建编辑器
+    editor.create()
+    this.editor = editor
+  },
+  methods: {
+    getEditorData() {
+      // 通过代码获取编辑器内容
+      let data = this.editor.txt.html()
+      this.$emit('getEditorData', data)
+      // alert(data)
+    }
+  },
+  beforeDestroy() {
+    // 调用销毁 API 对当前编辑器实例进行销毁
+    this.editor.destroy()
+  }
+}
+
+</script>
+
+<style lang="scss">
+  .home {
+    margin: auto;
+    position: relative;
+    .btn {
+      position: absolute;
+      right: 0;
+      top: 0;
+      padding: 5px 10px;
+      cursor: pointer;
+    }
+    h3 {
+      margin: 30px 0 15px;
+    }
+  }
+</style>
+<!-- <template>
+  <div class="editor">
     <quill-editor class="ql-editor" v-model="content" ref="myQuillEditor" :options="editorOption" @change="onEditorChange($event)"></quill-editor>
 
     <el-upload class="ivu-upload" :show-upload-list="false" :headers="headers" :on-success="handleSuccess" accept=".jpg, .jpeg, .png"
@@ -59,44 +206,16 @@
   const toolbarOptions = [
     ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
     ["blockquote", "code-block"], // 引用  代码块
-    [{
-      header: 1
-    }, {
-      header: 2
-    }], // 1、2 级标题
-    [{
-      list: "ordered"
-    }, {
-      list: "bullet"
-    }], // 有序、无序列表
-    [{
-      script: "sub"
-    }, {
-      script: "super"
-    }], // 上标/下标
-    [{
-      indent: "-1"
-    }, {
-      indent: "+1"
-    }], // 缩进
+    [{ header: 1 }, { header: 2 }], // 1、2 级标题
+    [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
+    [{ script: "sub" }, { script: "super" }], // 上标/下标
+    [{ indent: "-1" }, { indent: "+1" }], // 缩进
     // [{'direction': 'rtl'}],                         // 文本方向
-    [{
-      size: ["small", false, "large", "huge"]
-    }], // 字体大小
-    [{
-      header: [1, 2, 3, 4, 5, 6, false]
-    }], // 标题
-    [{
-      color: []
-    }, {
-      background: []
-    }], // 字体颜色、字体背景颜色
-    [{
-      font: []
-    }], // 字体种类
-    [{
-      align: []
-    }], // 对齐方式
+    [{ size: ["small", false, "large", "huge"] }], // 字体大小
+    [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
+    [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
+    [{ font: [] }], // 字体种类
+    [{ align: [] }], // 对齐方式
     ["clean"], // 清除文本格式
     ["image", "video"] // 链接、图片、视频
     // ["link", "image", "video"] // 链接、图片、视频
@@ -134,12 +253,27 @@
   Quill.register(Video, true);
   export default {
     name: 'editor',
+    components: { quillEditor },
     data() {
       return {
         content: null,
         headers: {
           Authorization: getToken()
         },
+        dialogFormVisible: false,
+        dialogForm: {
+          poster: null,
+          url: null,
+          videoUrl: null
+        },
+        uploadLoading: false,
+        uploadImgLoading: false,
+        fileList: [],
+        dialogFormRules: {
+          url: [{ required: true, message: "请输入视频地址", trigger: "blur" }],
+          videoUrl: [{ required: true, message: "请上传视频", trigger: 'blur' }]
+        },
+        formRadio: 1,
         editorOption: {
           placeholder: "请输入内容",
           modules: {
@@ -192,7 +326,7 @@
             quill.insertEmbed(this.editorIndex, "video", params);
             // 调整光标到最后
             quill.setSelection(this.editorIndex + 1, { preload: false });
-      
+
             this.dialogFormVisible = false;
             this.dialogForm = {
               poster: null,
@@ -204,6 +338,22 @@
           }
         });
       },
+      handleSuccess (res) {
+        // 获取富文本组件实例
+        let quill = this.editor;
+        // 如果上传成功
+        if (res.code) {
+          // 获取光标所在位置
+          let length = quill.getSelection().index;
+          // 插入图片，res为服务器返回的图片链接地址
+          quill.insertEmbed(length, "image", res.data.url);
+          // 调整光标到最后
+          quill.setSelection(length + 1);
+        } else {
+          // 提示信息，需引入Message
+          this.$message.error("图片插入失败");
+        }
+      },
       addQuillTitle () {
         const oToolBar = document.querySelector(".ql-toolbar"),
           aButton = oToolBar.querySelectorAll("button"),
@@ -327,3 +477,4 @@
     }
   }
 </style>
+ -->

src/views/businessManager/shopManager/shopList.vue

@@ -98,7 +98,7 @@
               </div>
             </template>
           </el-table-column>
-          <el-table-column align='center'
+          <!-- <el-table-column align='center'
                            prop="discountPrice"
                            label="商品采购价1(元)">
             <template slot-scope="scope">
@@ -116,7 +116,7 @@
                 {{scope.row.agreeCostPrice|moneyFormat}}
               </div>
             </template>
-          </el-table-column>
+          </el-table-column> -->
           <el-table-column align='center'
                            cell-style="padding: 0"
                            label="商品缩略图片">
@@ -128,12 +128,12 @@
             </template>
           </el-table-column>
           <el-table-column align='center'
-                           label="商品明细">
+                           label="商品描述">
             <template slot-scope="scope">
               <!-- <div class="shopDesc">
                 {{ scope.row.desc }}
               </div> -->
-              <Tooltip :content="scope.row.desc" />
+              <Tooltip :content="scope.row.brief" />
             </template>
           </el-table-column>
           <el-table-column align='center'
@@ -320,4 +320,4 @@ export default {
   max-height: 70px;
   overflow: hidden;
 }
-</style>
+</style>

src/views/businessManager/shopManager/shopOperation.vue

@@ -1,106 +1,66 @@
 <template>
   <div class="m-container">
     <h2>
-      <el-page-header @back="onCancel"
-                      :content="(pageType == 'create' ? '添加' : '修改') + '商品'"></el-page-header>
+      <el-page-header @back="onCancel" :content="(pageType == 'create' ? '添加' : '修改') + '商品'"></el-page-header>
     </h2>
 
     <div class="m-core">
-      <el-form :model="form"
-               :rules="rules"
-               ref="form"
-               label-width="120px"
-               style="width: 500px">
-        <el-form-item label="商品货号"
-                      prop="sn">
-          <el-input v-model.trim="form.sn"></el-input>
+      <el-form :model="form" :rules="rules" ref="form" label-width="120px">
+        <el-form-item label="商品货号" prop="sn">
+          <el-input v-model.trim="form.sn" style="width: 400px"></el-input>
         </el-form-item>
-        <el-form-item label="品牌"
-                      prop="brand">
-          <el-input v-model.trim="form.brand"></el-input>
+        <el-form-item label="品牌" prop="brand">
+          <el-input v-model.trim="form.brand" style="width: 400px"></el-input>
         </el-form-item>
-        <el-form-item label="商品名称"
-                      prop="name">
-          <el-input v-model.trim="form.name"></el-input>
+        <el-form-item label="商品名称" prop="name">
+          <el-input v-model.trim="form.name" style="width: 400px"></el-input>
         </el-form-item>
-        <el-form-item label="商品类型"
-                      prop="type">
-          <el-select v-model.trim="form.type">
-            <el-option label="乐器"
-                       value="INSTRUMENT"></el-option>
-            <el-option label="辅件"
-                       value="ACCESSORIES"></el-option>
-            <el-option label="教材"
-                       value="TEACHING"></el-option>
-            <el-option label="教谱"
-                       value="STAFF"></el-option>
-            <el-option label="其它"
-                       value="OTHER"></el-option>
+        <el-form-item label="商品类型" prop="type">
+          <el-select v-model.trim="form.type" style="width: 400px !important;">
+            <el-option label="乐器" value="INSTRUMENT"></el-option>
+            <el-option label="辅件" value="ACCESSORIES"></el-option>
+            <el-option label="教材" value="TEACHING"></el-option>
+            <el-option label="教谱" value="STAFF"></el-option>
+            <!-- <el-option label="其它"
+                       value="OTHER"></el-option> -->
           </el-select>
         </el-form-item>
-        <el-form-item label="商品分类"
-                      prop="goodsCategoryId">
-          <el-select v-model.trim="form.goodsCategoryId"
-                     filterable>
-            <el-option v-for="item in categoryList"
-                       :key="item.value"
-                       :label="item.label"
-                       :value="item.value">
+        <el-form-item label="商品分类" prop="goodsCategoryId">
+          <el-select v-model.trim="form.goodsCategoryId" style="width: 400px !important;" filterable>
+            <el-option v-for="item in categoryList" :key="item.value" :label="item.label" :value="item.value">
             </el-option>
           </el-select>
         </el-form-item>
-        <el-form-item label="商品型号"
-                      prop="specification">
-          <el-input v-model.trim="form.specification"></el-input>
+        <el-form-item label="商品型号" prop="specification">
+          <el-input v-model.trim="form.specification" style="width: 400px"></el-input>
         </el-form-item>
-        <el-form-item label="商品价格"
-                      prop="marketPrice">
-          <el-input type="number"
-                    @mousewheel.native.prevent
-                    v-model.trim="form.marketPrice"></el-input>
+        <el-form-item label="商品价格" prop="marketPrice">
+          <el-input type="number" @mousewheel.native.prevent v-model.trim="form.marketPrice" style="width: 400px"></el-input>
         </el-form-item>
-        <el-form-item label="商品团购价"
-                      prop="groupPurchasePrice">
-          <el-input type="number"
-                    @mousewheel.native.prevent
-                    v-model.trim="form.groupPurchasePrice"></el-input>
+        <el-form-item label="商品团购价" prop="groupPurchasePrice">
+          <el-input type="number" @mousewheel.native.prevent v-model.trim="form.groupPurchasePrice" style="width: 400px"></el-input>
         </el-form-item>
-        <el-form-item label="商品采购价1"
-                      prop="discountPrice">
-          <el-input type="number"
-                    @mousewheel.native.prevent
-                    v-model.trim="form.discountPrice"></el-input>
+        <el-form-item label="商品采购价1" prop="discountPrice">
+          <el-input type="number" @mousewheel.native.prevent v-model.trim="form.discountPrice" style="width: 400px"></el-input>
         </el-form-item>
-        <el-form-item label="商品采购价2"
-                      prop="agreeCostPrice">
-          <el-input type="number"
-                    @mousewheel.native.prevent
-                    v-model.trim.number="form.agreeCostPrice"></el-input>
+        <el-form-item label="商品采购价2" prop="agreeCostPrice">
+          <el-input type="number" @mousewheel.native.prevent v-model.trim.number="form.agreeCostPrice" style="width: 400px"></el-input>
         </el-form-item>
-        <el-form-item label="商品图片"
-                      prop="image">
-          <el-upload class="avatar-uploader"
-                     action="/api-web/uploadFile"
-                     accept=".jpg, .jpeg, .png"
-                     :headers="headers"
-                     :show-file-list="false"
-                     :on-success="handleAvatarSuccess"
-                     :before-upload="beforeAvatarUpload">
-            <img v-if="form.image"
-                 :src="form.image"
-                 class="avatar">
-            <i v-else
-               class="el-icon-plus avatar-uploader-icon"></i>
+        <el-form-item label="商品图片" prop="image">
+          <el-upload class="avatar-uploader" action="/api-web/uploadFile" accept=".jpg, .jpeg, .png" :headers="headers"
+            :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
+            <img v-if="form.image" :src="form.image" class="avatar">
+            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
           </el-upload>
         </el-form-item>
-        <el-form-item label="商品描述"
-                      prop="desc">
-          <el-input type="textarea"
-                    v-model.trim="form.desc"></el-input>
+        <el-form-item label="商品描述" prop="brief">
+          <el-input type="textarea" v-model.trim="form.brief" style="width: 400px"></el-input>
+        </el-form-item>
+        <el-form-item label="商品描述" prop="desc">
+          <editor />
         </el-form-item>
         <el-form-item>
-          <el-button @click="onSubmit('form')"
-                     type="primary">立即{{ pageType == "create" ? '创建' : '修改' }}</el-button>
+          <el-button @click="onSubmit('form')" type="primary">立即{{ pageType == "create" ? '创建' : '修改' }}</el-button>
           <el-button @click="onReSet('form')">重置</el-button>
         </el-form-item>
       </el-form>
@@ -108,153 +68,49 @@
   </div>
 </template>
 <script>
-import { categoryListTree, goodsAdd, goodsUpdate, goodsSingleQuery } from '@/api/businessManager'
-// import store from '@/store'
-import { getToken } from '@/utils/auth'
-let validPrice = (rule, value, callback) => {
-  if (value == '' && typeof value == 'string' || value == null) {
-    callback(new Error('请输入金额'))
-  } else if (value < 0) {
-    callback(new Error('输入金额必须大于或等于0'))
-  } else if (value >= 100000) {
-    callback(new Error('输入金额必须小于100000'))
-  } else {
-    callback()
-  }
-}
-let validPrice2 = (rule, value, callback) => {
-  console.log(value)
-  if (typeof value == 'string' || value == null) {
-    callback(new Error('请输入金额'))
-  } else if (value < 0) {
-    callback(new Error('输入金额必须大于或等于0'))
-  } else if (value >= 100000) {
-    callback(new Error('输入金额必须小于100000'))
-  } else {
-    callback()
+  import {
+    categoryListTree,
+    goodsAdd,
+    goodsUpdate,
+    goodsSingleQuery
+  } from '@/api/businessManager'
+  import {
+    getToken
+  } from '@/utils/auth'
+  import editor from '@/components/Editor'
+  let validPrice = (rule, value, callback) => {
+    if (value == '' && typeof value == 'string' || value == null) {
+      callback(new Error('请输入金额'))
+    } else if (value < 0) {
+      callback(new Error('输入金额必须大于或等于0'))
+    } else if (value >= 100000) {
+      callback(new Error('输入金额必须小于100000'))
+    } else {
+      callback()
+    }
   }
-}
-export default {
-  name: 'shopOperation',
-  data () {
-    return {
-      categoryList: [],
-      pageType: null,
-      headers: {
-        Authorization: getToken()
-      },
-      form: {
-        // brand: 'xxxl',
-        // name: '长号',
-        // type: 'INSTRUMENT',
-        // goodsCategoryId: 7,
-        // specification: 'xxxeed',
-        // marketPrice: 10000,
-        // groupPurchasePrice: 9000,
-        // discountPrice: 8000,
-        // image: null,
-        // desc: 'C调、法式键、曲列、E键、白铜按键、台湾镍白'
-        sn: null,
-        brand: null,
-        name: null,
-        type: null,
-        goodsCategoryId: null,
-        specification: null,
-        marketPrice: null,
-        groupPurchasePrice: null,
-        discountPrice: null,
-        agreeCostPrice: null,
-        image: null,
-        desc: null
-      },
-      rules: {
-        sn: [{ required: true, message: '请输入商品货号', trigger: 'blur' }],
-        brand: [{ required: true, message: '请输入品牌', trigger: 'blur' },
-        { min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur' }],
-        name: [{ required: true, message: '请输入商品名称', trigger: 'blur' },
-        { min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur' }],
-        type: [{ required: true, message: '请选择商品分类', trigger: 'change' }],
-        goodsCategoryId: [{ required: true, message: '请选择商品类型', trigger: 'change' }],
-        specification: [{ required: true, message: '请输入商品型号', trigger: 'blur' },
-        { min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur' }],
-        marketPrice: [{ required: true, validator: validPrice, trigger: 'blur' }],
-        groupPurchasePrice: [{ required: true, validator: validPrice, trigger: 'blur' }],
-        discountPrice: [{ required: true, validator: validPrice, trigger: 'blur' }],
-        agreeCostPrice: [{ validator: validPrice2, trigger: 'blur' }],
-        // marketPrice: [{ required: true, message: '请输入商品价格', trigger: 'blur' }],
-        // groupPurchasePrice: [{ required: true, message: '请输入商品团购价', trigger: 'blur' }],
-        // discountPrice: [{ required: true, message: '请输入商品采购价', trigger: 'blur' }],
-        image: [{ required: true, message: '请选择图片', trigger: 'blur' }],
-        desc: [{ required: true, message: '请输入商品描述', trigger: 'blur' }]
-      },
-      Fsearch: null,
-      Frules: null
+  let validPrice2 = (rule, value, callback) => {
+    console.log(value)
+    if (typeof value == 'string' || value == null) {
+      callback(new Error('请输入金额'))
+    } else if (value < 0) {
+      callback(new Error('输入金额必须大于或等于0'))
+    } else if (value >= 100000) {
+      callback(new Error('输入金额必须小于100000'))
+    } else {
+      callback()
     }
-  },
-  created () {
-    this.init()
-  },
-  activated () {
-    this.init()
-  },
-  mounted () {
-
-  },
-  methods: {
-    init () {
-      let query = this.$route.query
-      if (query.paramInfo) {
-        let paramInfo = JSON.parse(query.paramInfo)
-        this.pageType = paramInfo.type
-        this.id = paramInfo.id
-      }
-      if (query.search) {
-        this.Fsearch = query.search;
-      }
-      if (query.pageInfo) {
-        this.Frules = query.pageInfo
-      }
-      this.getList()
-      this.getCatagory()
-    },
-    onSubmit (formName) {
-      this.$refs[formName].validate((valid) => {
-        if (valid) {
-          if (this.pageType == 'create') {
-            if (this.form.id) { // 判断有没有Id，如果有则删除
-              delete this.form.id
-            }
-            this.form.status = 'YES' // 默认上架
-            goodsAdd(this.form).then(res => {
-              this.messageTips('添加', res)
-            })
-          } else if (this.pageType == 'update') {
-            goodsUpdate(this.form).then(res => {
-              this.messageTips('修改', res)
-            })
-          }
-        } else {
-          return false
-        }
-      })
-    },
-    messageTips (title, res) {
-      if (res.code == 200) {
-        this.$message.success(title + '成功')
-        this.$router.push({ path: '/shopManager/shopManager', query: { pageInfo: this.Frules, searchForm: this.Fsearch } })
-      } else {
-        this.$message.error(res.msg)
-      }
-    },
-    onCancel () {
-      this.$router.push({ path: '/shopManager/shopManager', query: { pageInfo: this.Frules, searchForm: this.Fsearch } })
-    },
-    onReSet (formName) {
-      this.$refs[formName].resetFields()
-    },
-    getList () {
-      if (this.pageType == 'create') {
-        this.form = {
+  }
+  export default {
+    name: 'shopOperation',
+    data() {
+      return {
+        categoryList: [],
+        pageType: null,
+        headers: {
+          Authorization: getToken()
+        },
+        form: {
           // brand: 'xxxl',
           // name: '长号',
           // type: 'INSTRUMENT',
@@ -274,130 +130,330 @@ export default {
           marketPrice: null,
           groupPurchasePrice: null,
           discountPrice: null,
+          agreeCostPrice: null,
           image: null,
-          desc: null
+          brief: null
+        },
+        rules: {
+          sn: [{
+            required: true,
+            message: '请输入商品货号',
+            trigger: 'blur'
+          }],
+          brand: [{
+              required: true,
+              message: '请输入品牌',
+              trigger: 'blur'
+            },
+            {
+              min: 2,
+              max: 30,
+              message: '长度在 2 到 30 个字符',
+              trigger: 'blur'
+            }
+          ],
+          name: [{
+              required: true,
+              message: '请输入商品名称',
+              trigger: 'blur'
+            },
+            {
+              min: 2,
+              max: 30,
+              message: '长度在 2 到 30 个字符',
+              trigger: 'blur'
+            }
+          ],
+          type: [{
+            required: true,
+            message: '请选择商品分类',
+            trigger: 'change'
+          }],
+          goodsCategoryId: [{
+            required: true,
+            message: '请选择商品类型',
+            trigger: 'change'
+          }],
+          specification: [{
+              required: true,
+              message: '请输入商品型号',
+              trigger: 'blur'
+            },
+            {
+              min: 2,
+              max: 30,
+              message: '长度在 2 到 30 个字符',
+              trigger: 'blur'
+            }
+          ],
+          marketPrice: [{
+            required: true,
+            validator: validPrice,
+            trigger: 'blur'
+          }],
+          groupPurchasePrice: [{
+            required: true,
+            validator: validPrice,
+            trigger: 'blur'
+          }],
+          discountPrice: [{
+            required: true,
+            validator: validPrice,
+            trigger: 'blur'
+          }],
+          agreeCostPrice: [{
+            validator: validPrice2,
+            trigger: 'blur'
+          }],
+          // marketPrice: [{ required: true, message: '请输入商品价格', trigger: 'blur' }],
+          // groupPurchasePrice: [{ required: true, message: '请输入商品团购价', trigger: 'blur' }],
+          // discountPrice: [{ required: true, message: '请输入商品采购价', trigger: 'blur' }],
+          image: [{
+            required: true,
+            message: '请选择图片',
+            trigger: 'blur'
+          }],
+          brief: [{
+            required: true,
+            message: '请输入商品描述',
+            trigger: 'blur'
+          }]
+        },
+        Fsearch: null,
+        Frules: null
+      }
+    },
+    components: {
+      editor
+    },
+    created() {
+      this.init()
+    },
+    activated() {
+      this.init()
+    },
+    mounted() {
+
+    },
+    methods: {
+      init() {
+        let query = this.$route.query
+        if (query.paramInfo) {
+          let paramInfo = JSON.parse(query.paramInfo)
+          this.pageType = paramInfo.type
+          this.id = paramInfo.id
         }
-        // console.log(this.$refs['form'])
-        if (this.$refs['form']) {
-          this.$refs['form'].resetFields();
+        if (query.search) {
+          this.Fsearch = query.search;
         }
-
-      } else {
-        goodsSingleQuery(this.id).then(res => {
-          if (res.code == 200) {
-            let result = res.data
-            this.form = {
-              id: result.id,
-              sn: result.sn,
-              brand: result.brand,
-              name: result.name,
-              type: result.type,
-              goodsCategoryId: result.goodsCategoryId,
-              specification: result.specification,
-              marketPrice: result.marketPrice,
-              groupPurchasePrice: result.groupPurchasePrice,
-              discountPrice: result.discountPrice,
-              agreeCostPrice: result.agreeCostPrice,
-              image: result.image,
-              desc: result.desc
+        if (query.pageInfo) {
+          this.Frules = query.pageInfo
+        }
+        this.getList()
+        this.getCatagory()
+      },
+      onSubmit(formName) {
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            if (this.pageType == 'create') {
+              if (this.form.id) { // 判断有没有Id，如果有则删除
+                delete this.form.id
+              }
+              this.form.status = 'YES' // 默认上架
+              goodsAdd(this.form).then(res => {
+                this.messageTips('添加', res)
+              })
+            } else if (this.pageType == 'update') {
+              goodsUpdate(this.form).then(res => {
+                this.messageTips('修改', res)
+              })
             }
+          } else {
+            return false
           }
         })
-      }
-
-    },
-    getCatagory () {
-      categoryListTree({
-        delFlag: 0,
-        rows: 9999
-      }).then(res => {
-        let result = res.data
+      },
+      messageTips(title, res) {
         if (res.code == 200) {
-          let tempArray = []
-          result.rows.forEach(row => {
-            tempArray.push({
-              label: row.name,
-              value: row.id
-            })
+          this.$message.success(title + '成功')
+          this.$router.push({
+            path: '/shopManager/shopManager',
+            query: {
+              pageInfo: this.Frules,
+              searchForm: this.Fsearch
+            }
           })
-          this.categoryList = tempArray
+        } else {
+          this.$message.error(res.msg)
         }
-      })
-    },
-    handleAvatarSuccess (res, file) {
-      this.form.image = res.data.url
+      },
+      onCancel() {
+        this.$router.push({
+          path: '/shopManager/shopManager',
+          query: {
+            pageInfo: this.Frules,
+            searchForm: this.Fsearch
+          }
+        })
+      },
+      onReSet(formName) {
+        this.$refs[formName].resetFields()
+      },
+      getList() {
+        if (this.pageType == 'create') {
+          this.form = {
+            // brand: 'xxxl',
+            // name: '长号',
+            // type: 'INSTRUMENT',
+            // goodsCategoryId: 7,
+            // specification: 'xxxeed',
+            // marketPrice: 10000,
+            // groupPurchasePrice: 9000,
+            // discountPrice: 8000,
+            // image: null,
+            // brief: 'C调、法式键、曲列、E键、白铜按键、台湾镍白'
+            sn: null,
+            brand: null,
+            name: null,
+            type: null,
+            goodsCategoryId: null,
+            specification: null,
+            marketPrice: null,
+            groupPurchasePrice: null,
+            discountPrice: null,
+            image: null,
+            brief: null
+          }
+          // console.log(this.$refs['form'])
+          if (this.$refs['form']) {
+            this.$refs['form'].resetFields();
+          }
 
-    },
-    beforeAvatarUpload (file) {
-      const imageType = {
-        'image/png': true,
-        'image/jpeg': true
-      }
-      const isImage = imageType[file.type]
-      const isLt2M = file.size / 1024 / 1024 < 2
+        } else {
+          goodsSingleQuery(this.id).then(res => {
+            if (res.code == 200) {
+              let result = res.data
+              this.form = {
+                id: result.id,
+                sn: result.sn,
+                brand: result.brand,
+                name: result.name,
+                type: result.type,
+                goodsCategoryId: result.goodsCategoryId,
+                specification: result.specification,
+                marketPrice: result.marketPrice,
+                groupPurchasePrice: result.groupPurchasePrice,
+                discountPrice: result.discountPrice,
+                agreeCostPrice: result.agreeCostPrice,
+                image: result.image,
+                brief: result.brief
+              }
+            }
+          })
+        }
 
-      if (!isImage) {
-        this.$message.error('只能上传图片格式!')
-      }
-      if (!isLt2M) {
-        this.$message.error('上传头像图片大小不能超过 2MB!')
-      }
-      return isImage && isLt2M;
-    },
+      },
+      getCatagory() {
+        categoryListTree({
+          delFlag: 0,
+          rows: 9999
+        }).then(res => {
+          let result = res.data
+          if (res.code == 200) {
+            let tempArray = []
+            result.rows.forEach(row => {
+              tempArray.push({
+                label: row.name,
+                value: row.id
+              })
+            })
+            this.categoryList = tempArray
+          }
+        })
+      },
+      handleAvatarSuccess(res, file) {
+        this.form.image = res.data.url
+
+      },
+      beforeAvatarUpload(file) {
+        const imageType = {
+          'image/png': true,
+          'image/jpeg': true
+        }
+        const isImage = imageType[file.type]
+        const isLt2M = file.size / 1024 / 1024 < 2
+
+        if (!isImage) {
+          this.$message.error('只能上传图片格式!')
+        }
+        if (!isLt2M) {
+          this.$message.error('上传头像图片大小不能超过 2MB!')
+        }
+        return isImage && isLt2M;
+      },
+    }
   }
-}
 </script>
 <style lang="scss" scoped>
-.el-button--primary {
-  background: #14928a;
-  border-color: #14928a;
-  color: #fff;
-  &:hover,
-  &:active,
-  &:focus {
+  .el-button--primary {
     background: #14928a;
     border-color: #14928a;
     color: #fff;
+
+    &:hover,
+    &:active,
+    &:focus {
+      background: #14928a;
+      border-color: #14928a;
+      color: #fff;
+    }
+  }
+
+  .el-row {
+    margin-top: 40px;
+  }
+
+  .el-col {
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
+    justify-content: flex-end;
+    margin-right: 50%;
+  }
+
+  .el-input-group {
+    width: 200px;
+    margin: 0 20px;
+  }
+
+  /deep/.el-tree-node__content {
+    height: 40px !important;
+  }
+
+  /deep/.avatar-uploader .el-upload {
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .avatar-uploader .el-upload:hover {
+    border-color: #409eff;
+  }
+
+  .avatar-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+    width: 120px;
+    height: 120px;
+    line-height: 120px;
+    text-align: center;
+  }
+
+  .avatar {
+    width: 120px;
+    height: 120px;
+    display: block;
   }
-}
-.el-row {
-  margin-top: 40px;
-}
-.el-col {
-  display: flex;
-  align-items: center;
-  margin-bottom: 20px;
-  justify-content: flex-end;
-  margin-right: 50%;
-}
-.el-input-group {
-  width: 200px;
-  margin: 0 20px;
-}
-/deep/.el-tree-node__content {
-  height: 40px !important;
-}
-/deep/.avatar-uploader .el-upload {
-  border: 1px dashed #d9d9d9;
-  border-radius: 6px;
-  cursor: pointer;
-  position: relative;
-  overflow: hidden;
-}
-.avatar-uploader .el-upload:hover {
-  border-color: #409eff;
-}
-.avatar-uploader-icon {
-  font-size: 28px;
-  color: #8c939d;
-  width: 120px;
-  height: 120px;
-  line-height: 120px;
-  text-align: center;
-}
-.avatar {
-  width: 120px;
-  height: 120px;
-  display: block;
-}
-</style>
+</style>