platform-customsdeclaration-ssr/pages/severPage/elements/index.vue

<template>
  <div class="search-history">
    <div class="headline">
      <span>申报要素维护</span>
      <div class="search_time">
        <el-input style="width:400px" placeholder="请输入品牌/型号/商品名称进行查询" v-model="key" @keyup.native.enter='searchSheet'>
          <el-button slot="append" @click.native="searchSheet">搜索</el-button>
        </el-input>
        <a @click="updateItem()"><i class="border_radius">+</i>新增</a>
      </div>
    </div>
    <ctable
      :headArr="headArr"
      :StyleWidth="StyleWidth"
      :data="tableData"
      :totalElements="totalElements"
      @handleCurrentChange="handleCurrentChange"
      :currentPage="currentPage"
      :controlArray="controlArray"
      @updateItem="updateItem"
      @lookItem="lookItem"
      :controlStyle="'height'"
    >

    </ctable>

    <element-alert :AlertTitle="AlertTitle"
                    @closeAlert="closeAlert"
                    :chooseItem="chooseItem"
                    ref="elementAlert"
                    :IslookOrUpdate="IslookOrUpdate">
    </element-alert>
  </div>
</template>

<script>
  import { clone, Vuehttp } from '@/utils/tools'
  import { CtableClass } from '@/utils/CtableClass'
  import { Ctable } from '@/components/base/table'
  import { elementAlert } from '@/components/severPage'
  export default {
    name: 'SearchElements',
    components: { Ctable, elementAlert },
    layout: 'default',
    middleware: 'authenticated',
    fetch({store}) {
      return Promise.all([
        store.dispatch('loadDeclarationElementsInfo', {count: 10, page: 1})
      ])
    },
    data () {
      return {
        hasDialog: false,
        key: '',
        currentPage: 1,
        count: 10,
        chooseItem: {},
        IslookOrUpdate: 'update'
      }
    },
    computed: {
      headArr() {
        return ['序号', '商品名称', '品牌', '规格型号', '海关编码', '申报要素', '规格书', '操作']
      },
      StyleWidth() {
        return [60, 150, 170, 234, 164, 240, 74, 72]
      },
      tableData() {
        // console.log(CtableClass(this.getHttpResource, ['序号', 'commodityName', 'brand', 'cmpCode', 'customerHouseCode', 'description', ['规格书', 'dataSheetUrl'], '操作']))
        return CtableClass(this.getHttpResource, ['序号', 'commodityName', 'brand', 'cmpCode', 'customerHouseCode', 'description', ['规格书', 'dataSheetUrl'], '操作'])
      },
      getHttpResource() {
        return this.$store.state.declarationElements.list.data.content.content
      },
      totalElements() {
        return this.$store.state.declarationElements.list.data.content.totalElements
      },
      controlArray() {
        return [['修改', 'updateItem'], ['查看', 'lookItem']]
      },
      AlertTitle() {
        return this.IslookOrUpdate === 'add' ? '新增申报要素' : (this.IslookOrUpdate === 'update' ? '修改申报要素' : '查看申报要素')
      }
    },
    methods: {
      updateItem(index) {
        this.chooseItem = {}
        this.IslookOrUpdate = 'add'
        if (index !== undefined) {
          this.IslookOrUpdate = 'update'
          this.chooseItem = clone(this.getHttpResource[index])
        }
        this.$refs.elementAlert.show()
      },
      lookItem(index) {
        this.IslookOrUpdate = 'look'
        this.chooseItem = clone(this.getHttpResource[index])
        this.$refs.elementAlert.show()
      },
      // 分页调整数据
      handleCurrentChange (page) {
        this.currentPage = page
        this.$store.dispatch('loadDeclarationElementsInfo', {count: this.count, page: this.currentPage, keyword: this.key})
      },
      // 修改数据内容
      // redactInfo (type) {
      //   this.$router.push('/severPage/entrustApply/' + type.id)
      // },
      // 数据详情跳转
      // detailsInfo (type) {
      //   this.$router.push('/severPage/elements/' + type.id)
      // },
      // 搜索内容
      searchSheet () {
        this.handleCurrentChange(1)
      },
      closeAlert(tp, item, file) {
        if (tp === 'save') {
          let params = {
            DeclarationElements: item,
            file: [file]
          }
          Vuehttp(params, '/facilitator/declarationElements/persist').then(res => {
            if (res.data.code !== 1) {
              this.$message.error(res.data.message)
            } else {
              this.handleCurrentChange(1)
              this.$refs.elementAlert.hide()
            }
          })
        } else {
          this.$refs.elementAlert.hide()
        }
      }
      // 新增加申报要素信息
      // submitForm (type) {
      //   this.$refs[type].validate((valid) => {
      //     if (!valid) {
      //       this.$message({
      //         message: '请正确填写信息',
      //         type: 'warning'
      //       })
      //       return false
      //     } else {
      //       let params = new FormData()
      //       params.append('params', JSON.stringify(this.form))
      //       let config = {
      //         headers: {'Content-Type': 'multipart/form-data'}
      //       }
      //       this.$http.post('/facilitator/declarationElements/persist', params, config)
      //         .then(response => {
      //           if (response.data.success) {
      //             this.hasDialog = false
      //             this.$message({
      //               message: '保存成功',
      //               type: 'success'
      //             })
      //             this.$store.dispatch('loadDeclarationElementsInfo', {count: this.count, page: 1})
      //           } else {
      //             this.$message({
      //               message: response.data.message,
      //               type: 'warning'
      //             })
      //           }
      //         })
      //         .catch(() => {
      //           this.$message.error('请检查网络是否正常！')
      //         })
      //     }
      //   })
      // }
    }
  }
</script>

<style type="text/scss" lang="scss">
  .search-history{
    /*padding:20px 10px;*/
    .search{
      margin-bottom:50px;
      position:relative;
      .el-input{
        max-width:50%;
      }
      .add{
        position:absolute;
        right:60px;
      }
    }
  }
  .block {
    padding-top:20px;
    text-align: right;
  }
  .dialog{
    .el-input{
      width:100%;
    }
  }
  .el-pagination {
    .el-pagination__jump .el-input{
      width: 60px !important;
    }
  }
  .el-input{
    .el-input-group__append{
      width:100px;
      color:#fff;
      background: #1890ff;
      text-align: center;
    }
  }
  .el-table{
    thead{
      color:#686c75;
      font-weight: bold;
      th{
        background: #f6f6f6;
      }
    }
  }
</style>