工作內容

• 用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和優化細節