渲染基础Table列表

封装获取企业列表接口

export function getEnterpriseListAPI(params) {
  return request({
    url: '/park/enterprise',
    params
  })
}

组件中获取数据

<script>
import { getEnterpriseListAPI } from '@/apis/enterprise'
export default {
  name: 'Building',
  data() {
    return {
      exterpriseList: [],
      params: {
        page: 1,
        pageSize: 10
      }
    }
  },
  mounted() {
    this.getExterpriseList()
  },
  methods: {
    async getExterpriseList() {
      const res = await getEnterpriseListAPI(this.params)
      this.exterpriseList = res.data.rows
    }
  }
}
</script>

绑定模版

<template>
  <div class="building-container">
    <!-- 表格区域 -->
    <div class="table">
      <el-table style="width: 100%" :data="exterpriseList">
        <el-table-column type="index" label="序号" />
        <el-table-column label="企业名称" width="320" prop="name" />
        <el-table-column label="联系人" prop="contact" />
        <el-table-column
          label="联系电话"
          prop="contactNumber"
        />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="mini" type="text">添加合同</el-button>
            <el-button size="mini" type="text">查看</el-button>
            <el-button size="mini" type="text">编辑</el-button>
            <el-button size="mini" type="text">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

分页管理

渲染分页

data() {
  return {
    total: 0
  }
}


async getExterpriseList() {
  const res = await getEnterpriseListAPI(this.params)
  this.exterpriseList = res.data.rows
  this.total = res.data.total
}


<el-pagination
  layout="total, prev, pager, next"
  :total="total"
  :page-size="params.pageSize"
/>

点击实现分页切换

1. 通过事件拿到当前页数

2. 以当前页数作为参数发送数据请求获取当前页数据

3. 重新把列表交给buildingList

<el-pagination
  @current-change="pageChange"
/>

pageChange(page) {
  // 更改参数
  this.params.page = page
  // 重新获取数据渲染
  this.getExterpriseList()
}

查询搜索

1. 用户输入查询内容之后点击查询按钮以当前输入关键词做为参数获取数据

2. 点击清空按钮时复原初始数据

思路：作为查询的name其实也是一个接口参数，通过input双向绑定，然后通过它来获取数据重新渲染列表

// 绑定查询回调
<div class="search-container">
  <div class="search-label">企业名称：</div>
  <el-input v-model="params.name" clearable placeholder="请输入内容" class="search-main" @clear="doSearch" />
  <el-button type="primary" @click="doSearch">查询</el-button>
</div>

// 准备查询后调方法
doSearch() {
  this.params.page = 1
  this.getExterpriseList()
}

添加企业

绑定路由

 {
    path: '/exterpriseAdd',
    component: () => import('@/views/park/enterprise/Add')
}


<el-button type="primary" @click="$router.push('/exterpriseAdd')">添加企业</el-button>

行业字段渲染

封装接口

export function getIndustryListAPI() {
  return request({
    url: '/park/industry'
  })
}

获取数据

<script>
import { getIndustryListAPI } from '@/api/enterprise'
export default {
  data() {
    return {
      industryList: [] // 可选行业列表
    }
  },
  mounted() {
    this.getIndustryList()
  },
  methods: {
    async getIndustryList() {
      const res = await getIndustryListAPI()
      this.industryList = res.data
    }
  }
}
</script>

绑定下拉框

 <el-form-item label="所在行业" prop="name">
    <el-select v-model="addForm.industryCode">
      <el-option
        v-for="item in industryList"
        :key="item.industryCode"
        :value="item.industryCode"
        :label="item.industryName"
      />
    </el-select>
  </el-form-item>

营业执照上传基础功能实现

准备自定义上传组件

<el-form-item label="营业执照">
    <el-upload
      action="#"
      :http-request="uploadRequest"
    >
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>
</el-form-item>

封装上传接口

export function uploadAPI(data) {
  return request({
    url: '/upload',
    method: 'POST',
    data
  })
}

调用接口完成上传

import { getIndustryListAPI, uploadAPI } from '@/apis/enterprise'

async uploadRequest(data) {
  const file = data.file

  // 处理formData类型参数
  const formData = new FormData()
  formData.append('file', file)
  formData.append('type', 'businessLicense')
  const res = await uploadAPI(formData)

  // 赋值表单数据
  this.addForm.businessLicenseId = res.data.id
  this.addForm.businessLicenseUrl = res.data.url
}

上传前验证文件

// 绑定上传前回调
<el-upload
  action="#"
  :http-request="uploadRequest"
  :before-upload="beforeUpload"
  >
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">支持扩展名：.png .jpg .jpeg，文件大小不得超过5M</div>
</el-upload>


// 编写校验逻辑
beforeUpload(file) {
  const allowImgType = ['image/jpeg', 'image/png', 'image/jpg'].includes(file.type)
  const isLt5M = file.size / 1024 / 1024 < 5

  if (!allowImgType) {
    this.$message.error('上传合同图片只能是 PNG/JPG/JPEG 格式!')
  }
  if (!isLt5M) {
    this.$message.error('上传合同图片大小不能超过 5MB!')
  }
  return allowImgType && isLt5M
}