新建圈子和编辑圈子逻辑处理

src/components/yqrange/baseinfo.vue

 <template>
   <el-form ref="formData" :model="formData" :rules="rules" label-width="150px" label-suffix="：" class="basic-form">
-    <el-form-item label="圈子名称" prop="projectName">
+    <el-form-item label="圈子名称" prop="name">
       <el-col :span="13">
-        <el-input size="small" v-model="formData.projectName" placeholder="请输入圈子名称" style="width:70%;" @change="returnTypeData('projectName')"></el-input>
-        <span class="word-num">{{(formData.projectName).replace(/\s+/g,"").length}}/24</span>
+        <el-input size="small" v-model="formData.name" placeholder="请输入圈子名称" style="width:70%;" @change="returnTypeData('name')"></el-input>
+        <span class="word-num">{{(formData.name).replace(/\s+/g,"").length}}/24</span>
       </el-col>
     </el-form-item>
     <div class="basic-item-icon">
       <el-form-item label="圈子头像" class="required-label">
-        <el-upload v-model="formData.imgUrl1" class="bg-uploader" action="#" :show-file-list="false"
+        <el-upload v-model="formData.headUrl" class="bg-uploader" action="#" :show-file-list="false"
           :before-upload="beforeUploadPic1">
-          <img v-if="formData.imgUrl1" :src="formData.imgUrl1" @mouseover.stop="imgMouseOver1=true" class="bg-img" />
-          <img v-if="!formData.imgUrl1" class="bg-img" src="../../assets/image/small.png" />
+          <img v-if="formData.headUrl" :src="formData.headUrl" @mouseover.stop="imgMouseOver1=true" class="bg-img" />
+          <img v-if="!formData.headUrl" class="bg-img" src="../../assets/image/small.png" />
           <div class="img-delete" v-show="imgMouseOver1" @click.stop="deleteImg(1)"
             @mouseout.stop="imgMouseOver1=false">
             <i class="el-icon-delete"></i>
@@ -27,10 +27,10 @@
     </div>
     <div class="basic-item-icon">
       <el-form-item label="圈子封面" class="required-label">
-        <el-upload v-model="formData.imgUrl2" class="bg-uploader" @change="returnTypeData('imgUrl2')" action="#" :show-file-list="false"
+        <el-upload v-model="formData.coverUrl" class="bg-uploader" @change="returnTypeData('coverUrl')" action="#" :show-file-list="false"
           :before-upload="beforeUploadPic2">
-          <img v-if="formData.imgUrl2" :src="formData.imgUrl2" @mouseover.stop="imgMouseOver2=true" class="bg-img" />
-          <img v-if="!formData.imgUrl2" class="bg-img" src="../../assets/image/small.png" />
+          <img v-if="formData.coverUrl" :src="formData.coverUrl" @mouseover.stop="imgMouseOver2=true" class="bg-img" />
+          <img v-if="!formData.coverUrl" class="bg-img" src="../../assets/image/small.png" />
           <div class="img-delete" v-show="imgMouseOver2" @click.stop="deleteImg(2)"
             @mouseout.stop="imgMouseOver2=false">
             <i class="el-icon-delete"></i>
@@ -51,16 +51,17 @@
         <span class="word-num">{{(formData.introduce).replace(/\s+/g,"").length}}/24</span>
       </el-col>
     </el-form-item>
-    <el-form-item label="内容发布权限" prop="contentRole">
-      <el-select v-model="formData.contentRole" @change="returnTypeData('contentRole')" placeholder="请选择发布权限"
+    <el-form-item label="内容发布权限" prop="dynamicFlag">
+      <el-select v-model="formData.dynamicFlag" @change="returnTypeData('dynamicFlag')" placeholder="请选择发布权限"
         size="small" clearable>
-        <el-option v-for="item in contentList" :key="item.value" :label="item.label" :value="item.label">
+        <el-option v-for="(item,index) in contentList" :key="index" :label="item.label" :value="item.value">
         </el-option>
       </el-select>
     </el-form-item>
   </el-form>
 </template>
 <script>
+  let vm = null;
   import { openLoading, closeLoading } from "../../utils/utils";
   import { doUpload, getFilePath } from "../../utils/qiniu-util";
   export default {
@@ -73,6 +74,9 @@
         }
       }
     },
+    created() {
+      vm = this;
+    },
     data() {
       let checkProjectStr = (rule, value, callback) => {
         if (value.indexOf("\\") != -1) {
@@ -86,7 +90,7 @@
       };
       return {
         rules: {
-          projectName: [
+          name: [
             { required: true, message: "请输入圈子名称", trigger: "blur" },
             {
               min: 2,
@@ -106,7 +110,7 @@
             },
             { validator: checkProjectStr, trigger: "blur" }
           ],
-          contentRole: [
+          dynamicFlag: [
             { required: true, message: "请选择内容发布权限", trigger: "blur" },
           ]
         },
@@ -116,10 +120,10 @@
         uploadImgMessage2: false,
         contentList: [
           {
-            value: '1',
+            value: 1,
             label: '所有人可发布'
           }, {
-            value: '2',
+            value: 2,
             label: '管理员可发布'
           },
         ],
@@ -142,7 +146,7 @@
           height: 48,
           size: 0.5,
           sizeText: "500K",
-          key: "imgUrl1",
+          key: "headUrl",
           more: "imgUrl1More",
           show: "uploadImgMessage1"
         };
@@ -154,7 +158,7 @@
           height: 420,
           size: 2,
           sizeText: "2Mb",
-          key: "imgUrl2",
+          key: "coverUrl",
           more: "imgUrl2More",
           show: "uploadImgMessage2"
         };
@@ -210,9 +214,13 @@
       //删除图片
       deleteImg(type) {
         if (type == 1) {
-          vm.formData.imgUrl1 = "";
+          vm.formData.headUrl = "";
           vm.imgMouseOver1 = false;
         }
+        if (type == 2) {
+          vm.formData.coverUrl = "";
+          vm.imgMouseOver2 = false;
+        }
       }
     }
   }

src/utils/yqrange/rangeApi.js

+import fetch from '../fetch';
+import { getBaseUrl, getSaasDomain, getSaasApiDomain } from '@/utils/index'
+let headers = {
+  'Content-Type': 'application/json;charset=UTF-8',
+  token: localStorage.getItem('storageToken'),
+};
+
+export const getCircleInfoReq = (id) => {
+  return fetch({
+    headers,
+    url: getBaseUrl(`circle/circle/${id}/info`),
+    method: 'get',
+    description: '获取圈子详情',
+  })
+};
\ No newline at end of file

src/views/yqrange/create-range.vue

@@ -32,6 +32,7 @@
   import BreadCrumb from "@/components/breadcrumb.vue";
   import BaseInfo from '@/components/yqrange/baseinfo.vue';
   import Organzation from '@/components/yqrange/organzation.vue';
+  import { getCircleInfoReq } from '@/utils/yqrange/rangeApi';
   export default {
     name: "create-range",
     components: {
@@ -49,29 +50,27 @@
         //页面展示位置
         stepData: [true, false],
         formData: {
-          projectName: '',
-          imgUrl1: '',
+          name: '',
+          headUrl: '',
           imgUrl1More: {},
-          imgUrl2: '',
+          coverUrl: '',
           imgUrl2More: {},
           introduce: '',
-          contentRole: '',
+          dynamicFlag: '',
         }
       }
     },
     created() {
       vm = this;
-
       // 根据ID是否有值判断编辑还是create
       // debugger
       const { enterType, id } = this.$route.query;
       this.id = id;
       this.enterType = enterType;
-      if (enterType == 1) {
-        //edit
-        console.log("add");
-      } else {
-        console.log("edit");
+    
+      //edit
+      if (this.enterType == 2 && this.id != null) {
+        this.getCircleInfo();
       }
 
     },
@@ -79,34 +78,33 @@
       //下一步
       nextStep() {
         // debugger
-        if (this.enterType == 1) {
-          //create
-          this.commitQuanziInfo();
-        } else {
-          //edit
-          this.active = 1
-          this.stepData = [false, true];
-        }
+        this.commitQuanziInfo();
       },
       //完成
       complete() { },
       returnTypeData(item) {
         this.formData[item.name] = item.val
+      },
+       //获取圈子详情
+       getCircleInfo() {
+        getCircleInfoReq(this.id).then(res => {
+          // closeLoading(this);
+          if (res.code == "000000") {
+             this.formData= res.data;
+          } else {
+            this.$message(res.message);
+          }
+        }).catch(err => {
+          this.$message.error('请求失败');
+        });
       },
       commitQuanziInfo() {
-        let req = {
-          name: this.formData.projectName,
-          headUrl: this.formData.imgUrl1,
-          coverUrl: this.formData.imgUrl2,
-          introduce: this.formData.introduce,
-          dynamicFlag: this.formData.contentRole,
-        };
+        let req = this.formData;
         console.log("commitQuanziInfo() : name = " + req.name + ", headUrl = " + req.headUrl
           + ", coverUrl = " + req.coverUrl + ", introduce = " + req.introduce + ", dynamicFlag = " + req.dynamicFlag)
         vm.POST("circle/circle/save", req).then(res => {
           if (res.code == "000000") {
             // console.log(res);
-            this.formData.id = res.id
             this.active = 1
             this.stepData = [false, true];
           } else {

src/views/yqrange/yq-range.vue

@@ -87,7 +87,7 @@ export default {
       totalRows: 0,
       tableData: [
         {
-          id: 123,
+          id: 12,
           createTime: '',
           name: '浙江基础疾病',
           num: 12,