工作内容

• 用vue重构ifish编辑水产品详细信息管理页面的保存以及基础信息搜索还有pdf文件上传的功能

QQ20170323-225733.png

可以直接在表单上输入内容用ajax加载搜索项，比原来的页面要方便

remoteMethod(query) {
        if (query !== '') {
          this.sLoading = true;
          axios.get(`${API.ifish_baseinfo_list}?name=${query}&categoryId=`)
            .then((res) => {
              this.searchBaseInfoList = res.data.content;
              this.sLoading = false;
            });
        }
      },

保存编辑的表单

loadData(id) {
        axios.get(`${API.ifish_aquatic_show}/${id}`)
        // load数据前先将搜索基础信息select option初始以便将获取的id值转成对应的中文显示
          .then((res) => {
            this.searchBaseInfoList.push({
              id: res.data.aquaticBaseInfoId,
              commonName: res.data.commonName,
              aquaticCategoryName: res.data.categoryChineseName
            });

            // 覆盖初始化数据
            /* eslint-disable */
            for (let key in this.dataInfo) {
              if (Object.prototype.hasOwnProperty.call(this.dataInfo, key)) {
                // 如果ajax取得的数据为空就不覆盖，防止post提交后端数据解析错误
                if (res.data[key] !== null) {
                  this.dataInfo[key] = res.data[key];
                }
              }
            }
            // 将编辑的数据id加入dataInfo中以便保存
            this.dataInfo.id = res.data.id;
          });
      },

通过FormData的方式提交表单

handleSave() {
        const formData = new FormData();
        /* eslint-disable */
        for (let key in this.dataInfo) {
          if (Object.prototype.hasOwnProperty.call(this.dataInfo, key)) {
            formData.append(key, this.dataInfo[key]);
          }
        }
        axios.post(API.ifish_source_save, formData, {headers: {'content-type': 'multipart/form-data'}})
          .then((res) => {
            console.log(res);
          });
        this.$router.push('/source/list');
      },

文件上传通过覆盖element ui上传组件的默认上传行为来实现，当用户选择要上传的文件后将文件的file对象添加到dataInfo属性上(将要post上传的属性)

upload(data) {
   this.dataInfo.sourcePdf = data.file;
 },

通过element ui上传组件提供的http-request属性来覆盖上传的默认行为

<el-upload
    action=""
    :http-request="upload">
    <el-button size="small" type="primary">点击上传</el-button>
 </el-upload>

总结

• 不足
• 上传文件成功但是前台页面下载不了
• 页面存在诸多细节问题待优化
• 进展
• 完成ifish后台的大部分，接下来就是添加余下页面的新增和修改功能还有解决bug和优化细节