#修改了SampletreesAdd,SamplebushAdd1,SampleherbalAdd1,SampletreesUpdateForm,SamplebushUpdateForm,SampleherbalUpdateForm页面

src/views/data/SamplebushAdd1.vue

@@ -82,7 +82,7 @@
                 <el-col :span="4" class="alreadyAdd">已添加物种</el-col>
                 <el-col :span="4"><el-button type="primary" class="addit" @click="newit">点击新建物种</el-button></el-col>
                 <div class="col4" v-show="stat==1" v-for="(v,i) in count" :key="i" :id="i" @click="disp(i)">
-                    <div class="wu">{{v.chinesename}}{{stats}}<img :src="v.picture" class="img"/></div>
+                    <div class="wu">{{v.chinesename}}</div>
                 </div>
               </el-col>
             </el-row>
@@ -140,19 +140,19 @@
                    </el-select>
                 </el-col>
           </el-row>
+            <div class="outside"><span>已选图片类型：</span>
+              <div class="inline" v-for="(v,i) in upload" :key="i">
+                <span class="tit">{{v.u}}<span class="x" @click="xx(i)">x</span></span>
+              </div>
+            </div>
             <el-form-item label="图片文件" prop="file" class="posi">
-              <el-upload @blur="pic" class="pic" :action='url' ref="upload" :disabled="bool" :http-request="uploadOk" :file-list="fileList" :limit="10" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :auto-upload="false" style="float: left;" :on-change="handleChange">
+              <el-upload class="pic" :action='url' ref="upload" :disabled="bool" :http-request="uploadOk" :file-list="fileList" :limit="10" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :auto-upload="false" style="float: left;" :on-change="handleChange">
                 <i class="el-icon-plus"></i>
               </el-upload>
               <el-dialog :visible.sync="dialogVisible">
                 <img width="100%" :src="dialogImageUrl" alt="">
               </el-dialog>
             </el-form-item>
-          <div class="outside">
-            <div class="inline" v-for="(v,i) in upload" :key="i">
-              <span class="tit">{{v.u}}</span>
-            </div>
-          </div>
             <el-form-item>
               <el-button type="primary" @click="onSubmit">立即创建</el-button>
               <el-button>取消</el-button>
@@ -202,6 +202,7 @@ export default {
         typical: ''
       },
       type_list: '',
+      fileList: [],
       enfor: [{
         value: '选项1',
         label: '是'
@@ -272,8 +273,7 @@ export default {
       }).catch(
       )
       this.count.push({
-        chinesename: _this.form.chinesename,
+        chinesename: _this.form.chinesename
-        picture: 'http://img1.imgtn.bdimg.com/it/u=4235894642,1878306555&fm=11&gp=0.jpg'
       })
       this.stat = 1
       console.log('11111')
@@ -312,6 +312,22 @@ export default {
       this.form.canopy = ''
       this.form.enforcement = ''
       this.form.typical = ''
+      this.form.imagetype = ''
+      this.upload = []
+      this.files = []
+      this.$refs.upload.clearFiles()
+      var _this = this
+      axios({
+        method: 'get',
+        url: this.GLOBAL.baseURL + '/sampletrees/add/'
+      }).then(function (response) {
+        _this.name_list = response.data.name_choices
+        _this.wuhou_list = response.data.wuhou_choices
+        _this.life_list = response.data.life_choices
+        _this.type_list = response.data.image_choices
+      }).catch(function (error) {
+        alert(error)
+      })
     },
     uploadOk (val) {
       var _this = this
@@ -340,6 +356,16 @@ export default {
       })
       _this.form.imagetype = ''
       console.log(_this.upload)
+    },
+    xx (i) {
+      var _this = this
+      _this.upload.splice(i, 1)
+      console.log('ssssss')
+      console.log(i)
+      console.log(_this.upload)
+    },
+    clearFiles () {
+      console.log('clearFiles')
     }
   }
 }
@@ -408,6 +434,8 @@ export default {
     margin-left: 15px;
   }
   .wu {
+    /*padding: 15px 10px;*/
+    /*background-color: #99a9bf;*/
     /*padding: 15px 10px;*/
     /*background-color: #99a9bf;*/
     width: auto;
@@ -419,6 +447,7 @@ export default {
     padding: 6px 20px;
     color: #889EFF;
     /*float: left;*/
+    margin: 10px 0;
   }
   .col4 {
     display: inline-block;
@@ -452,7 +481,7 @@ export default {
   }
   .outside {
     display: inline-block;
-    margin-left: 150px;
+    margin-left: 65px;
     float: left;
   }
   .inline {
@@ -460,7 +489,21 @@ export default {
   }
   .tit {
     display: inline-block;
-    width: 150px;
+    width: 50px;
+    position: relative;
+  }
+  .x {
+    position: absolute;
+    color: #99a9bf;
+    font-size: 12px;
+    top: -1px;
+    left: 33px;
+  }
+  .tit:hover {
+    cursor: pointer;
+  }
+  .tit:hover .x {
+    color: red;
   }
   /*.hi {*/
   /*  text-align: left;*/

src/views/data/SamplebushUpdateFrom.vue

@@ -84,19 +84,19 @@
                    </el-select>
                 </el-col>
           </el-row>
+            <div class="outside"><span>已选图片类型：</span>
+              <div class="inline" v-for="(v,i) in upload" :key="i">
+                <span class="tit">{{v.u}}<span class="x" @click="xx(i)">x</span></span>
+              </div>
+            </div>
             <el-form-item label="图片文件" prop="file" class="posi">
-              <el-upload @blur="pic" class="pic" :action='url' ref="upload" :disabled="bool" :http-request="uploadOk" :file-list="fileList" :limit="10" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :auto-upload="false" style="float: left;" :on-change="handleChange">
+              <el-upload class="pic" :action='url' ref="upload" :disabled="bool" :http-request="uploadOk" :file-list="fileList" :limit="10" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :auto-upload="false" style="float: left;" :on-change="handleChange">
                 <i class="el-icon-plus"></i>
               </el-upload>
               <el-dialog :visible.sync="dialogVisible">
                 <img width="100%" :src="dialogImageUrl" alt="">
               </el-dialog>
             </el-form-item>
-          <div class="outside">
-            <div class="inline" v-for="(v,i) in upload" :key="i">
-              <span class="tit">{{v.u}}</span>
-            </div>
-          </div>
             <el-form-item>
             <el-button type="primary" @click="update()">提交修改</el-button>
             <el-button>取消</el-button>
@@ -143,6 +143,7 @@ export default {
         enforcement: '',
         typical: ''
       },
+      fileList: [],
       samplebushrichness: '',
       samplebushdensity: '',
       smallkindarea_list: '',
@@ -238,6 +239,27 @@ export default {
       }).catch(function (error) {
         alert(error)
       })
+      // 向后台发送图片及图片类型
+      axios({
+        method: 'post',
+        url: _this.url,
+        data: {
+          fd: _this.fd,
+          files: _this.files,
+          upload: _this.upload,
+          form: _this.form,
+          username: _this.username,
+          findingscode: _this.findingscode
+        }
+      }).then(function (response) {
+        _this.name_list = response.data.name_choices
+        _this.wuhou_list = response.data.wuhou_choices
+        _this.life_list = response.data.life_choices
+        _this.type_list = response.data.image_choices
+      }).catch(function (error) {
+        alert(error)
+      })
+      console.log('访问后台')
     },
     change (e) {
       this.$forceUpdate()
@@ -269,6 +291,13 @@ export default {
       })
       _this.form.imagetype = ''
       console.log(_this.upload)
+    },
+    xx (i) {
+      var _this = this
+      _this.upload.splice(i, 1)
+      console.log('ssssss')
+      console.log(i)
+      console.log(_this.upload)
     }
   }
 }
@@ -321,28 +350,16 @@ export default {
   .choice {
     display: inline-block;
     width: 200px;
-    margin-left: 167px;
+    margin-left: 80px;
     margin-top: 10px;
   }
-  .outside {
-    display: inline-block;
-    margin-left: 150px;
-    float: left;
-  }
-  .inline {
-    display: inline-block;
-  }
-  .tit {
-    display: inline-block;
-    width: 150px;
-  }
   /*.hi {*/
   /*  text-align: left;*/
   /*}*/
   .before {
     display: inline-block;
     position: absolute;
-    left: 55px;
+    left: 14px;
     margin-bottom: 10px;
     font-size: 14px;
     color: indianred;
@@ -352,9 +369,38 @@ export default {
     position: relative;
   }
   .posi {
-    margin-left: 86px;
+    margin-left: 14px;
+    padding-top: 20px;
   }
   .areas {
     margin-top: 30px;
   }
+  .outside {
+    display: inline-block;
+    margin-left: 22px;
+    margin-top: 16px;
+    /*margin-bottom: 20px;*/
+    float: left;
+  }
+  .inline {
+    display: inline-block;
+  }
+  .tit {
+    display: inline-block;
+    width: 50px;
+    position: relative;
+  }
+  .x {
+    position: absolute;
+    color: #99a9bf;
+    font-size: 12px;
+    top: -1px;
+    left: 33px;
+  }
+  .tit:hover {
+    cursor: pointer;
+  }
+  .tit:hover .x {
+    color: red;
+  }
 </style>

src/views/data/SampleherbalAdd1.vue

@@ -86,7 +86,7 @@
                 <el-col :span="4" class="alreadyAdd">已添加物种</el-col>
                 <el-col :span="4"><el-button type="primary" class="addit" @click="newit">点击新建物种</el-button></el-col>
                 <div class="col4" v-show="stat==1" v-for="(v,i) in count" :key="i" :id="i" @click="disp(i)">
-                    <div class="wu">{{v.chinesename}}{{stats}}<img :src="v.picture" class="img"/></div>
+                    <div class="wu">{{v.chinesename}}</div>
                 </div>
               </el-col>
             </el-row>
@@ -135,19 +135,19 @@
                    </el-select>
                 </el-col>
           </el-row>
+            <div class="outside"><span>已选图片类型：</span>
+              <div class="inline" v-for="(v,i) in upload" :key="i">
+                <span class="tit">{{v.u}}<span class="x" @click="xx(i)">x</span></span>
+              </div>
+            </div>
             <el-form-item label="图片文件" prop="file" class="posi">
-              <el-upload @blur="pic" class="pic" :action='url' ref="upload" :disabled="bool" :http-request="uploadOk" :file-list="fileList" :limit="10" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :auto-upload="false" style="float: left;" :on-change="handleChange">
+              <el-upload class="pic" :action='url' ref="upload" :disabled="bool" :http-request="uploadOk" :file-list="fileList" :limit="10" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :auto-upload="false" style="float: left;" :on-change="handleChange">
                 <i class="el-icon-plus"></i>
               </el-upload>
               <el-dialog :visible.sync="dialogVisible">
                 <img width="100%" :src="dialogImageUrl" alt="">
               </el-dialog>
             </el-form-item>
-          <div class="outside">
-            <div class="inline" v-for="(v,i) in upload" :key="i">
-              <span class="tit">{{v.u}}</span>
-            </div>
-          </div>
           <el-form-item>
             <el-button type="primary" @click="onSubmit">立即创建</el-button>
             <el-button>取消</el-button>
@@ -176,6 +176,7 @@ export default {
       upload: [],
       files: [],
       bool: false,
+      fileList: [],
       form: {
         sampleherbalrichness: '',
         sampleherbaldensity: '',
@@ -274,8 +275,7 @@ export default {
       }).catch(
       )
       this.count.push({
-        chinesename: _this.form.chinesename,
+        chinesename: _this.form.chinesename
-        picture: 'http://img1.imgtn.bdimg.com/it/u=4235894642,1878306555&fm=11&gp=0.jpg'
       })
       this.stat = 1
       console.log('11111')
@@ -312,6 +312,22 @@ export default {
       this.form.pointscoverage = ''
       this.form.enforcement = ''
       this.form.typical = ''
+      this.form.imagetype = ''
+      this.upload = []
+      this.files = []
+      this.$refs.upload.clearFiles()
+      var _this = this
+      axios({
+        method: 'get',
+        url: this.GLOBAL.baseURL + '/sampletrees/add/'
+      }).then(function (response) {
+        _this.name_list = response.data.name_choices
+        _this.wuhou_list = response.data.wuhou_choices
+        _this.life_list = response.data.life_choices
+        _this.type_list = response.data.image_choices
+      }).catch(function (error) {
+        alert(error)
+      })
     },
     uploadOk (val) {
       var _this = this
@@ -340,6 +356,13 @@ export default {
       })
       _this.form.imagetype = ''
       console.log(_this.upload)
+    },
+    xx (i) {
+      var _this = this
+      _this.upload.splice(i, 1)
+      console.log('ssssss')
+      console.log(i)
+      console.log(_this.upload)
     }
   }
 }
@@ -410,8 +433,6 @@ export default {
     margin-left: 15px;
   }
   .wu {
-    /*padding: 15px 10px;*/
-    /*background-color: #99a9bf;*/
     width: auto;
     height: auto;
     /*border: 1px solid #EBEBEB;*/
@@ -421,6 +442,7 @@ export default {
     padding: 6px 20px;
     color: #889EFF;
     /*float: left;*/
+    margin: 10px 0;
   }
   .col4 {
     display: inline-block;
@@ -454,7 +476,7 @@ export default {
   }
   .outside {
     display: inline-block;
-    margin-left: 150px;
+    margin-left: 65px;
     float: left;
   }
   .inline {
@@ -462,7 +484,21 @@ export default {
   }
   .tit {
     display: inline-block;
-    width: 150px;
+    width: 50px;
+    position: relative;
+  }
+  .x {
+    position: absolute;
+    color: #99a9bf;
+    font-size: 12px;
+    top: -1px;
+    left: 33px;
+  }
+  .tit:hover {
+    cursor: pointer;
+  }
+  .tit:hover .x {
+    color: red;
   }
   /*.hi {*/
   /*  text-align: left;*/

src/views/data/SampleherbalUpdateFrom.vue

@@ -81,19 +81,19 @@
                    </el-select>
                 </el-col>
           </el-row>
+            <div class="outside"><span>已选图片类型：</span>
+              <div class="inline" v-for="(v,i) in upload" :key="i">
+                <span class="tit">{{v.u}}<span class="x" @click="xx(i)">x</span></span>
+              </div>
+            </div>
             <el-form-item label="图片文件" prop="file" class="posi">
-              <el-upload @blur="pic" class="pic" :action='url' ref="upload" :http-request="uploadOk" :file-list="fileList" :limit="10" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :auto-upload="false" style="float: left;" :on-change="handleChange">
+              <el-upload class="pic" :action='url' ref="upload" :http-request="uploadOk" :file-list="fileList" :limit="10" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :auto-upload="false" style="float: left;" :on-change="handleChange">
                 <i class="el-icon-plus"></i>
               </el-upload>
               <el-dialog :visible.sync="dialogVisible">
                 <img width="100%" :src="dialogImageUrl" alt="">
               </el-dialog>
             </el-form-item>
-          <div class="outside">
-            <div class="inline" v-for="(v,i) in upload" :key="i">
-              <span class="tit">{{v.u}}</span>
-            </div>
-          </div>
             <el-form-item>
             <el-button type="primary" @click="update()">提交修改</el-button>
             <el-button>取消</el-button>
@@ -137,6 +137,7 @@ export default {
         undergroundbiomass: '',
         typical: ''
       },
+      fileList: [],
       sampleherbalrichness: '',
       sampleherbaldensity: '',
       sampleherbalcoverdegree: '',
@@ -229,6 +230,27 @@ export default {
       }).catch(function (error) {
         alert(error)
       })
+      // 向后台发送图片及图片类型
+      axios({
+        method: 'post',
+        url: _this.url,
+        data: {
+          fd: _this.fd,
+          files: _this.files,
+          upload: _this.upload,
+          form: _this.form,
+          username: _this.username,
+          findingscode: _this.findingscode
+        }
+      }).then(function (response) {
+        _this.name_list = response.data.name_choices
+        _this.wuhou_list = response.data.wuhou_choices
+        _this.life_list = response.data.life_choices
+        _this.type_list = response.data.image_choices
+      }).catch(function (error) {
+        alert(error)
+      })
+      console.log('访问后台')
     },
     change (e) {
       this.$forceUpdate()
@@ -260,6 +282,13 @@ export default {
       })
       _this.form.imagetype = ''
       console.log(_this.upload)
+    },
+    xx (i) {
+      var _this = this
+      _this.upload.splice(i, 1)
+      console.log('ssssss')
+      console.log(i)
+      console.log(_this.upload)
     }
   }
 }
@@ -312,28 +341,16 @@ export default {
   .choice {
     display: inline-block;
     width: 200px;
-    margin-left: 167px;
+    margin-left: 80px;
     margin-top: 10px;
   }
-  .outside {
-    display: inline-block;
-    margin-left: 150px;
-    float: left;
-  }
-  .inline {
-    display: inline-block;
-  }
-  .tit {
-    display: inline-block;
-    width: 150px;
-  }
   /*.hi {*/
   /*  text-align: left;*/
   /*}*/
   .before {
     display: inline-block;
     position: absolute;
-    left: 55px;
+    left: 14px;
     margin-bottom: 10px;
     font-size: 14px;
     color: indianred;
@@ -343,9 +360,38 @@ export default {
     position: relative;
   }
   .posi {
-    margin-left: 86px;
+    margin-left: 14px;
+    padding-top: 20px;
   }
   .areas {
     margin-top: 30px;
   }
+  .outside {
+    display: inline-block;
+    margin-left: 22px;
+    margin-top: 16px;
+    /*margin-bottom: 20px;*/
+    float: left;
+  }
+  .inline {
+    display: inline-block;
+  }
+  .tit {
+    display: inline-block;
+    width: 50px;
+    position: relative;
+  }
+  .x {
+    position: absolute;
+    color: #99a9bf;
+    font-size: 12px;
+    top: -1px;
+    left: 33px;
+  }
+  .tit:hover {
+    cursor: pointer;
+  }
+  .tit:hover .x {
+    color: red;
+  }
 </style>

src/views/data/SampletreesAdd.vue

@@ -500,6 +500,9 @@ export default {
       console.log('ssssss')
       console.log(i)
       console.log(_this.upload)
+    },
+    clearFiles () {
+      console.log('clearFiles')
     }
   }
 }

src/views/data/SampletreesUpdateFrom.vue

@@ -71,6 +71,10 @@
                   <el-option v-for="item in enfor" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
+          <div class="hasupload">
+            <div class="hastype"><span>已选图片类型：</span></div>
+            <div class="hasimage">已选图片：</div>
+          </div>
           <el-row class="fu">
             <div class="before">
               <span class="star">*</span><span>请先选择图片类型</span>
@@ -81,19 +85,19 @@
                    </el-select>
                 </el-col>
           </el-row>
+            <div class="outside"><span>已选图片类型：</span>
+              <div class="inline" v-for="(v,i) in upload" :key="i">
+                <span class="tit">{{v.u}}<span class="x" @click="xx(i)">x</span></span>
+              </div>
+            </div>
             <el-form-item label="图片文件" prop="file" class="posi">
-              <el-upload @blur="pic" class="pic" :action='url' ref="upload" :http-request="uploadOk" :file-list="fileList" :limit="10" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :auto-upload="false" style="float: left;" :on-change="handleChange">
+              <el-upload class="pic" :action='url' ref="upload" :http-request="uploadOk" :file-list="fileList" :limit="10" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :auto-upload="false" style="float: left;" :on-change="handleChange">
                 <i class="el-icon-plus"></i>
               </el-upload>
               <el-dialog :visible.sync="dialogVisible">
                 <img width="100%" :src="dialogImageUrl" alt="">
               </el-dialog>
             </el-form-item>
-          <div class="outside">
-            <div class="inline" v-for="(v,i) in upload" :key="i">
-              <span class="tit">{{v.u}}</span>
-            </div>
-          </div>
             <el-form-item>
             <el-button type="primary" @click="update()">提交修改</el-button>
             <el-button>取消</el-button>
@@ -238,6 +242,27 @@ export default {
       }).catch(function (error) {
         alert(error)
       })
+      // 向后台发送图片及图片类型
+      axios({
+        method: 'post',
+        url: _this.url,
+        data: {
+          fd: _this.fd,
+          files: _this.files,
+          upload: _this.upload,
+          form: _this.form,
+          username: _this.username,
+          findingscode: _this.findingscode
+        }
+      }).then(function (response) {
+        _this.name_list = response.data.name_choices
+        _this.wuhou_list = response.data.wuhou_choices
+        _this.life_list = response.data.life_choices
+        _this.type_list = response.data.image_choices
+      }).catch(function (error) {
+        alert(error)
+      })
+      console.log('访问后台')
     },
     uploadOk (val) {
       var _this = this
@@ -269,14 +294,13 @@ export default {
       })
       _this.form.imagetype = ''
       console.log(_this.upload)
-      // var picture = document.getElementsByClassName('el-upload-list__item-actions')[0]
+    },
-      // picture.style.height = '70px'
+    xx (i) {
-      // _this.files.push({
+      var _this = this
-      //   fi: _this.file
+      _this.upload.splice(i, 1)
-      // })
+      console.log('ssssss')
-      // console.log('kkkkkkk')
+      console.log(i)
-      // console.log(_this.files)
+      console.log(_this.upload)
-      // console.log(_this.file)
     }
   }
 }
@@ -329,7 +353,7 @@ export default {
   .choice {
     display: inline-block;
     width: 200px;
-    margin-left: 167px;
+    margin-left: 80px;
     margin-top: 10px;
   }
   .outside {
@@ -350,7 +374,7 @@ export default {
   .before {
     display: inline-block;
     position: absolute;
-    left: 55px;
+    left: 14px;
     margin-bottom: 10px;
     font-size: 14px;
     color: indianred;
@@ -360,9 +384,47 @@ export default {
     position: relative;
   }
   .posi {
-    margin-left: 86px;
+    margin-left: 14px;
+    padding-top: 20px;
   }
   .areas {
     margin-top: 30px;
   }
+  .outside {
+    display: inline-block;
+    margin-left: 22px;
+    margin-top: 16px;
+    /*margin-bottom: 20px;*/
+    float: left;
+  }
+  .inline {
+    display: inline-block;
+  }
+  .tit {
+    display: inline-block;
+    width: 50px;
+    position: relative;
+  }
+  .x {
+    position: absolute;
+    color: #99a9bf;
+    font-size: 12px;
+    top: -1px;
+    left: 33px;
+  }
+  .tit:hover {
+    cursor: pointer;
+  }
+  .tit:hover .x {
+    color: red;
+  }
+  .hasupload {
+    margin: 10px 0 10px 10px;
+  }
+  .hastype {
+    text-align: left;
+  }
+  .hasimage {
+    text-align: left;
+  }
 </style>