12

src/components/Category/edit.vue

@@ -1,98 +1,98 @@
 <template>
-  <div>
-    
+  <div> 
     <el-form ref="editPram" :model="editPram" label-width="130px">
-      <el-form-item
-        label="分类名称"
-        prop="name"
-        :rules="[{ required:true,message:'请输入分类名称',trigger:['blur','change'] }]"
-      >
-        <el-input v-model="editPram.name"   placeholder="分类名称" />
+      <el-form-item label="分类名称" prop="categoryName" :rules="[{ required: true, message: '请输入分类名称', trigger: ['blur', 'change'] }]">
+        <el-input v-model="editPram.categoryName" placeholder="分类名称" />
       </el-form-item>
-      <!-- <el-form-item label="URL">
-        <el-input v-model="editPram.url" placeholder="URL" />
-      </el-form-item> -->
-      <el-form-item label="父级" >
-        <el-cascader v-model="editPram.pid" :options="parentOptions" :props="categoryProps" style="width:100%" />
+      <el-form-item v-if="editPram.parentCategoryName" label="父级"  > 
+          {{  editPram.parentCategoryName  }}
       </el-form-item>
-      <!-- <el-form-item label="菜单图标" >
-        <el-input placeholder="请选择菜单图标" v-model="editPram.extra">
-          <el-button slot="append" icon="el-icon-circle-plus-outline" @click="addIcon"></el-button>
-        </el-input>
-      </el-form-item> -->
-      <!-- <el-form-item label="分类图标(180*180)">
+      <el-form-item label="分类图标(180*180)">
         <div class="upLoadPicBox" @click="modalPicTap('1')">
-          <div v-if="editPram.extra" class="pictrue">
-            <img :src="editPram.extra">
-          </div>
-          <div v-else class="upLoad">
-            <i class="el-icon-camera cameraIconfont" />
-          </div>
+          <upload :photo="editPram.icon" @success="uploadSuccess" tip="图标尺寸为18*18比例，大小不能超过200KB，图片只能为jpg、png、gif格式"></upload>
         </div>
-      </el-form-item> -->
+      </el-form-item>
       <el-form-item label="排序">
-        <el-input-number v-model="editPram.sort" :min="0"/>
+        <el-input-number v-model="editPram.sort" :min="0" />
       </el-form-item>
       <el-form-item label="状态">
-        <el-switch v-model="editPram.status"  active-text="显示"
-                   inactive-text="隐藏" :active-value="true" :inactive-value="false" />
+        <el-switch v-model="editPram.showFlag" active-text="显示" inactive-text="隐藏" :active-value="1"
+          :inactive-value="2" />
       </el-form-item>
-      <!-- <el-form-item label="扩展字段" >
-        <el-input v-model="editPram.extra" type="textarea" placeholder="扩展字段" />
-      </el-form-item> -->
       <el-form-item>
-        <el-button type="primary" :loading="loadingBtn" @click="handlerSubmit('editPram')">确定</el-button>
+        <el-button type="primary" :loading="loadingBtn" @click="handlerSubmit">确定</el-button>
         <el-button @click="close">取消</el-button>
       </el-form-item>
     </el-form>
   </div>
 </template>
 <!--创建和编辑公用一个组件-->
-<script> 
+<script>
+import upload from '@/components/Upload/index'
+import productApi from '@/api/product/productAttr.js';
+import { loadingFn } from "@/utils/validate"
+
 export default {
-  // name: "edit"
-  props: { },
+  // name: "edit",
+  components: { upload },
+  props: {
+    parentOptions: {
+      type: Array,
+      default: () => []
+    }
+  },
   data() {
-    return {
+    return { 
       loadingBtn: false,
       constants: [],
       editPram: {
-        extra: null,
-        name: null,
-        pid: null,
-        sort: 0,
-        status: true,
-        type: 1,
-        url: null,
-        id: 0
+        level: 1,
+        icon:"",
+        showFlag: 1,
+        categoryName: "",
+        sort:1,
+        parentId:"",
+        parentCategoryName:""
       },
       categoryProps: {
         value: 'id',
-        label: 'name',
-        children: 'child',
-        expandTrigger: 'hover',
-        checkStrictly: true,
-        emitPath: false
-      },
-      parentOptions: []
+        label: 'categoryName',
+        children: 'children'
+      }
     }
   },
   mounted() {
     // this.initEditData()
   },
   methods: {
+    uploadSuccess(e, res) {
+      if (res.code == 20000) {
+        ({ publicUrl: this.editPram.icon } = res.data);
+      }
+    },
     // 点击图标
-    addIcon() {},
+    addIcon() { },
     // 点击商品图
-    modalPicTap (tit, num, i) {
+    modalPicTap(tit, num, i) {
     },
     close() {
+      this.$parent.$parent.editDialogConfig.visible=false; 
     },
     initEditData() {
     },
     addTreeListLabelForCasCard(arr, child) {
     },
-    handlerSubmit(formName) {
+    handlerSubmit() {  
+      productApi.classifySave(this.editPram,).then((result) => {
+        if(result.code==20000){
+          this.$parent.$parent.editDialogConfig.visible=false;
+          this.$message.success("添加成功！");
+          this.$parent.$parent.handleCurrentChange();
+
+        }        
+      }).catch((err) => {
+        
+      });
     },
     handlerSaveOrUpdate(isSave) {
     }
@@ -101,5 +101,7 @@ export default {
 </script>
 
 <style scoped>
-
+::v-deep .photo-container {
+  align-items: flex-start !important;
+}
 </style>