查询 表格模版

<template>
  <div class="container">
    <div class="sel">
      <el-form ref="queryForm" :model="queryForm" :inline="true" size="small" label-width="100px">
        <el-form-item label="供应商类别:" prop="type">
          <el-input v-model="queryForm.type"/>
        </el-form-item>
        <el-form-item label="供应商名称:" prop="name">
          <el-input v-model="queryForm.name"/>
        </el-form-item>
        <el-form-item label="联系人:" prop="contacts">
          <el-input v-model="queryForm.contacts"/>
        </el-form-item>
        <el-form-item label="电话号码:" prop="mobile">
          <el-input v-model="queryForm.mobile"/>
        </el-form-item>
        <el-form-item label="联系地址:" prop="address">
          <el-input v-model="queryForm.address"/>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="btn_query">查询</el-button>
          <el-button size="small" type="warning" @click="show_add('add',null)">新增</el-button>
          <upload-excel-component
            :on-success="handleSuccess"
            :before-upload="beforeUpload"
            style="display: inline-block"/>
          <el-button size="small" type="info" @click="get_xls">下载导入模版</el-button>
          <el-button size="small" @click="reset('queryForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table">
      <el-table
        v-loading="listLoading"
        :data="filterDataList"
        stripe
        element-loading-text="加载中..."
        border
        fit
        size="small"
        highlight-current-row>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div>
              <el-button type="primary" size="mini" @click="show_add('edit',scope.row)">编辑</el-button>
            </div>
            <div style="margin-top: 2px">
              <el-button type="danger" size="mini" @click="show_delete(scope.row)">删除</el-button>
            </div>

          </template>
        </el-table-column>
        <el-table-column label="供应商编号" align="center">
          <template slot-scope="scope">
            {{ scope.row.id }}
          </template>
        </el-table-column>
        <el-table-column label="供应商类别" align="center">
          <template slot-scope="scope">
            {{ scope.row.type }}
          </template>
        </el-table-column>

        <el-table-column label="供应商名称" align="center">
          <template slot-scope="scope">
            {{ scope.row.name }}
          </template>
        </el-table-column>
        <el-table-column label="联系人" align="center">
          <template slot-scope="scope">
            {{ scope.row.contacts }}
          </template>
        </el-table-column>

        <el-table-column label="电话号码" align="center">
          <template slot-scope="scope">
            {{ scope.row.mobile }}
          </template>
        </el-table-column>

        <el-table-column label="联系地址" align="center">
          <template slot-scope="scope">
            {{ scope.row.address }}
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center">
          <template slot-scope="scope">
            <div> {{ scope.row.createdAt | split }}</div>
            <div> {{ scope.row.createdAt | Split }}</div>
          </template>
        </el-table-column>
        <el-table-column label="更新时间" align="center">
          <template slot-scope="scope">
            <div> {{ scope.row.updatedAt | split }}</div>
            <div> {{ scope.row.updatedAt | Split }}</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination
        :current-page="pageParams.page"
        :page-size="pageParams.limit"
        :total="pageParams.totalCount"
        layout="total, prev, pager, next, jumper"
        @current-change="handleCurrentChange"
      />
      <el-button
        :loading="downloadLoading"
        type="primary"
        size="small"
        style="float: right;margin-right: 20px;"
        class="xls"
        @click="excldownload">
        导出
      </el-button>
    </div>
    <!--新增对话框-->
    <el-dialog
      :visible="dia_add_visi"
      center
      title="确认下线"
      width="40%"
      @close="dia_add_visi=false">
      <span slot="title">
        <div class="wrap_line_txt">
          <div class="line"/>
          <div
            class="txt">
            <span v-show="!addForm.id">新增</span><span v-show="addForm.id">编辑</span>
          </div>
        </div>
      </span>
      <el-form ref="addForm" :model="addForm" :inline="true" size="small" label-width="100px" label-position="left">
        <el-form-item style="display: none" label="供应商ID：" prop="id">
          <el-input v-model="addForm.id"/>
        </el-form-item>
        <el-form-item label="供应商类别：" prop="type">
          <el-input v-model="addForm.type"/>
        </el-form-item>
        <el-form-item label="供应商名称:" prop="name">
          <el-input v-model="addForm.name"/>
        </el-form-item>
        <el-form-item label="联系人：" prop="contacts">
          <el-input v-model="addForm.contacts"/>
        </el-form-item>
        <el-form-item label="电话号码：" prop="mobile">
          <el-input v-model="addForm.mobile"/>
        </el-form-item>
        <el-form-item label="联系地址：" prop="address">
          <el-input v-model="addForm.address"/>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="warning" @click="add(addForm)"><span v-show="!addForm.id">新增</span><span
            v-show="addForm.id">编辑</span></el-button>
          <el-button size="small" @click="reset('addForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 删除 弹出框 -->
    <el-dialog
      :visible.sync="dia_delete_visi"
      title="提示"
      width="25%"
      @close="dia_delete_visi=false">
      <span/>
      <span slot="title">
        <div class="wrap_line_txt">
          <div class="line"/>
          <div
            class="txt">
            提示
          </div>
        </div>
      </span>
      <span>是否删除该条数据</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="delete1">确定</el-button>
        <el-button type="info" size="small" @click="dia_delete_visi=false">取消</el-button>
      </span>
    </el-dialog>
    <!--批量导入 弹出框-->
    <el-dialog
      :visible.sync="dia_batch_visi"
      title="提示"
      width="70%"
      @close="dia_batch_visi=false">
      <span/>
      <span slot="title">
        <div class="wrap_line_txt">
          <div class="line"/>
          <div
            class="txt">
            提示
          </div>
        </div>
      </span>
      <span>是否批量导入下列数据？</span>
      <el-table
        v-loading="listLoading"
        :data="batchDataList"
        stripe
        element-loading-text="加载中..."
        border
        fit
        size="small"
        highlight-current-row>
        <el-table-column label="供应商类别" align="center">
          <template slot-scope="scope">
            {{ scope.row.供应商类别 }}
          </template>
        </el-table-column>

        <el-table-column label="供应商名称" align="center">
          <template slot-scope="scope">
            {{ scope.row.供应商名称 }}
          </template>
        </el-table-column>
        <el-table-column label="联系人" align="center">
          <template slot-scope="scope">
            {{ scope.row.联系人 }}
          </template>
        </el-table-column>

        <el-table-column label="电话号码" align="center">
          <template slot-scope="scope">
            {{ scope.row.电话号码 }}
          </template>
        </el-table-column>

        <el-table-column label="联系地址" align="center">
          <template slot-scope="scope">
            {{ scope.row.联系地址 }}
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="batch">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { axiosPostForm } from '@/api/static'
import UploadExcelComponent from '@/components/UploadExcel/index.vue'
import { parseTime } from '@/utils'

export default {
  name: 'Supplier',
  components: { UploadExcelComponent },
  data() {
    return {
      dia_batch_visi: false,
      batchDataList: [],
      batchDataHeader: [],
      downloadLoading: false,
      dia_add_visi: false,
      dia_delete_visi: false,
      queryForm: {
        type: '',
        name: '',
        mobile: '',
        contacts: '',
        address: ''
      },
      addForm: {
        id: '',
        type: '',
        name: '',
        mobile: '',
        contacts: '',
        address: ''
      },
      dataList: null,
      listLoading: false,
      // 分页参数
      pageParams: {
        totalPage: 0, // 数据总页数
        limit: 20, // 每页条数
        page: 1, // 当前页
        jumpPage: 1, // 跳转页
        totalCount: 0, // 数据总条数
        start: 0 // 给后台的开始数
      }
    }
  },
  computed: {
    filterDataList() {
      if (this.dataList === null) return
      const dataList = this.dataList
      return dataList.filter(item => {
        return true
      })
    }
  },
  mounted() {
    this.btn_query()
  },
  methods: {
    batch() {
      console.log('导入')
      axiosPostForm('/api/supplier/batch', {
        content: JSON.stringify(this.batchDataList),
        title: JSON.stringify(this.batchDataHeader)
      }).then(response => {
        this.$message.success('导入成功')
        this.search()
      }).catch(err => {
        console.log(err)
      })
      this.dia_batch_visi = false
    },
    excldownload() { // 导出
      const _this = this
      this.downloadLoading = true
        import('@/vendor/Export2Excel').then(excel => {
          const tHeader = ['供应商编号', '供应商类别', '供应商名称', '联系人', '电话号码', '联系地址', '创建时间', '更新时间']
          const filterVal = ['id', 'type', 'name', 'contacts', 'mobile', 'address', 'createdAt', 'updatedAt']
          axiosPostForm('/api/supplier/list', {}).then(response => {
            const list = response.data.data
            const data = _this.formatJson(filterVal, list)
            excel.export_json_to_excel({
              header: tHeader,
              data,
              filename: '供应商列表',
              autoWidth: true,
              bookType: 'xlsx'
            })
            this.downloadLoading = false
          }).catch(err => {
            console.log(err)
            this.downloadLoading = false
          })
        })
    },
    get_xls() { // 导出模版
      const _this = this
      this.downloadLoading = true
        import('@/vendor/Export2Excel').then(excel => {
          const tHeader = ['供应商类别', '供应商名称', '联系人', '电话号码', '联系地址']
          const filterVal = ['type', 'name', 'contacts', 'mobile', 'address']
          const list = [{
            type: '供应商类别xx',
            name: '供应商xx',
            contacts: '供应商联系人xx',
            mobile: '18978457845xx',
            address: '地址xx'
          }]
          const data = _this.formatJson(filterVal, list)
          excel.export_json_to_excel({
            header: tHeader,
            data,
            filename: '供应商列表',
            autoWidth: true,
            bookType: 'xlsx'
          })
          this.downloadLoading = false
        })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        if (j === 'timestamp') {
          return parseTime(v[j])
        } else {
          return v[j]
        }
      }))
    },

    beforeUpload(file) { // 导入
      const isLt1M = file.size / 1024 / 1024 < 1

      if (isLt1M) {
        return true
      }

      this.$message({
        message: 'Please do not upload files larger than 1m in size.',
        type: 'warning'
      })
      return false
    },
    handleSuccess({ results, header }) {
      this.batchDataList = results
      this.batchDataHeader = header
      this.dia_batch_visi = true
      console.log(this.batchDataList)
      console.log(this.batchDataHeader)
    },
    show_add(operation, item) {
      this.dia_add_visi = true
      if (operation === 'add') {
        this.addForm = {
          type: '',
          name: '',
          mobile: '',
          contacts: '',
          address: ''
        }
      } else {
        this.addForm = item
      }
    },
    show_delete(item) {
      this.dia_delete_visi = true
      this.addForm = item
    },
    delete1() {
      axiosPostForm('/api/supplier/delete', { id: this.addForm.id }).then(response => {
        this.$message.success('删除成功')
        this.search()
      }).catch(err => {
        console.log(err)
      })
      this.dia_delete_visi = false
    },
    add(form) {
      console.log(form)
      axiosPostForm('/api/supplier/save', {
        id: form.id,
        name: form.name,
        contacts: form.contacts,
        mobile: form.mobile,
        type: form.type,
        address: form.address
      }).then(response => {
        if (form.id) {
          this.$message.success('编辑成功')
        } else {
          this.$message.success('添加成功')
        }
        this.search()
      }).catch(err => {
        console.log(err)
      })
      this.dia_add_visi = false
    },
    btn_query() {
      this.pageParams.page = 1
      this.search()
    },
    getParams() {
      const queryData = {
        page: this.pageParams.page,
        pageSize: this.pageParams.limit
      }
      // 选择框验证方法
      queryData.type = this.queryForm.type
      queryData.name = this.queryForm.name
      queryData.contacts = this.queryForm.contacts
      queryData.mobile = this.queryForm.mobile
      queryData.address = this.queryForm.address
      return queryData
    },
    search() {
      // 进行查询接口请求
      this.listLoading = true
      axiosPostForm('/api/supplier/list', this.getParams()).then(response => {
        this.listLoading = false
        this.dataList = response.data.data // 赋予表格数据
        this.pageParams.totalCount = Number(response.data.total) // 赋予总条数
      }).catch(err => {
        console.log(err)
        this.listLoading = false
      })
    },
    // 当前页改变方法
    handleCurrentChange(val) {
      this.pageParams.page = val
      this.search()
    },
    reset(formName) {
      this.$refs[formName].resetFields()
    },
    changeCity(city) {
      console.log(city)
      this.queryForm.cityCode = city
    }

  }

}
</script>

<style lang="scss" scoped>
  /deep/ .status-col .cell {
    white-space: pre;
    background-color: red;
  }

  .wrap_line_txt {
    display: flex;
    align-items: center;
    .line {
      width: 2px;
      height: 16px;
      background: #1389EE;
      line-height: 20px;
      margin-right: 20px;
    }
    .txt {
      font-size: 16px;
      color: #707070;
    }
  }

  .container {
    background-color: #F2F4F6;
    width: 98%;
    margin: 0 auto;

    .sel {
      background-color: #ffffff;
      width: 100%;
      border-radius: 5px;
      padding-left: 20px;
      padding-top: 15px;
      /deep/ .el-input__inner {
        width: 200px;
      }
      /deep/ .el-form.my_city {
        width: 200px;
      }
      /deep/ .el-form-item {
        height: 32px;
      }
      /deep/ .el-form-item {
        margin-bottom: 15px;
      }
      /deep/ .el-date-editor--daterange.el-input, .el-date-editor--daterange.el-input__inner, .el-date-editor--timerange.el-input, .el-date-editor--timerange.el-input__inner {
        width: 200px;
      }
    }
    .table {
      background-color: blue;
      width: 100%;
      margin-top: 10px;
    }
    .pagination {
      background-color: #ffffff;
      width: 100%;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

  }

</style>