cloudnote_web/pages/index/note.vue

<template>
  <div>
    <el-row type="flex" justify="center">
      <el-col :span="5">
         <el-form ref="form" :model="form"  label-width="80px">
           <el-form-item :label="$t('note.table.note_title')" prop="note_title">
             <el-input v-model="form.note_title" :placeholder="$t('input_please', { keyword: this.$t('note.table.note_title') })"></el-input>
           </el-form-item>
           <el-form-item :label="$t('note.table.note_content')" prop="note_content">
             <el-input type="textarea" v-model="form.note_content" :placeholder="$t('input_please', { keyword: this.$t('note.table.note_content') })"></el-input>
           </el-form-item>
           <el-form-item class="center">
             <el-button @click="findNote">{{$t('button.query')}}</el-button>
           </el-form-item>
         </el-form>
      </el-col>
    </el-row>
     <el-table :data="tableData" border>
       <el-table-column align="center" :label="$t('note.table.paper_name')">
         <template slot-scope="scope" >
           《{{scope.row.paper.title}}》
         </template>
       </el-table-column>
       <el-table-column align="center" prop="originalText" :label="$t('note.table.original_text')" />
       <el-table-column align="center" prop="noteTitle" :label="$t('note.table.note_title')" />
       <el-table-column align="center" prop="noteContent" :label="$t('note.table.note_content')" />
       <el-table-column align="center" :label="$t('action')" >
         <template slot-scope="scope" >
           <el-button @click="read(scope.row)">{{$t('button.jump_note')}}</el-button>
         </template>
       </el-table-column>
     </el-table>

    <div class="block center mt1">
      <el-pagination
        layout="prev, pager, next"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script lang="ts">
  import Vue from 'vue'

  export default Vue.extend({
    name: 'note',
    data(){
      return {
        tableData:[],
        form:{
          note_title:'',
          note_content:''
        },
        rules:{
          note_title:[{
            required: true,
            message: this.$t('input_please', { keyword: this.$t('note.table.note_title') }),
            trigger: 'blur'
          }],
          note_content:[{
            required: true,
            message: this.$t('input_please', { keyword: this.$t('note.table.note_content') }),
            trigger: 'blur'
          }]
        },
        total:1
      }
    },
    methods:{
      //查找笔记
      findNote(){
        let that=this
        this.GLOBAL.fetchGet("/v1/api/notes/list",{
          noteTitle:that.form.note_title,
          noteContent:that.form.note_content
        },function(res) {
          if(res.code==='200'){
            that.tableData=[]
            that.tableData=res.data.data
            that.total=res.data.total
          }else{
            that.$message.error(that.$t('error_500').toString())
          }
        })
      },
      //打开笔记
      read(row){
        let that=this
        let item=row.paper
        this.GLOBAL.fetchGet("/v1/api/file/find",{
          paperId:item.id,
        },function(res) {
          if(res.code==='200'){
            item.content=res.msg
            that.$store.commit('menus/read')
            that.$store.commit('read/open', item)
            that.$router.push({
              path:that.localePath('/read'),
              query:row
            })
          }else{
            that.$message.error(that.$t('error_500').toString())
          }
        })
      }
    },
    mounted() {
      this.findNote()
    }
  })
</script>