element-ui 导入 相关

<template>
  <div class="main-wrapper">
    <!-- 头部搜索等 -->
    <div class="box-head">
      <el-form ref="searchform" :model="searchform" :inline="true">
        <el-form-item label="统计期">
          <el-select v-model="searchform.statisticalPeriod" placeholder="请选择" size="mini" clearable>
            <el-option label="2019" value="2019年" />
            <el-option label="2018" value="2018年" />
            <el-option label="2017" value="2017年" />
          </el-select>
          <el-select v-model="searchform.quarter" placeholder="请选择" size="mini" clearable>
            <el-option label="一季度" value="1" />
            <el-option label="二季度" value="2" />
            <el-option label="三季度" value="3" />
            <el-option label="四季度" value="4" />
          </el-select>
        </el-form-item>
        <el-form-item label="企业名称">
          <!-- <el-select v-model="form.region" placeholder="请选择" size="mini">
            <el-option label="1111" value></el-option>
          </el-select>-->
          <!-- <el-input placeholder="请输入企业名称" v-model="searchform.companyName" size="mini" clearable></el-input> -->
          <el-select
            v-model="searchform.companyName"
            filterable
            placeholder="请选择"
            size="mini"
            clearable
            @change="selectCompanyName"
          >
            <el-option
              v-for="item in restaurants"
              :key="item.id"
              :label="item.name"
              :value="item.name"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="search">搜索</el-button>
          <el-button type="primary" size="mini" @click="add">添加</el-button>
          <el-button type="primary" size="mini" @click="_reportimport">导入</el-button>
          <!-- <el-upload
            class="upload-demo"
            ref="upload"
            action="http://115.239.137.3:9000/enterprise/report/import"
            :show-file-list="false"
            :file-list="fileArr"
            :before-upload="beforeUploadFile"
            style="display: inline"
            :on-success="handleSuccess"
          >
            <el-button type="primary" style="margin-bottom:15px;margin-left: 10px;" size="mini">导入</el-button>
          </el-upload>-->
          <el-button type="primary" size="mini" @click="_reportexport">导出</el-button>
          <el-button type="primary" size="mini" @click="_reportdownload">模板下载</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格部分 -->
    <el-table :data="records" border style="width: 100%" size="mini" fit>
      <!-- <el-table-column prop="statisticalPeriod" label="统计期" align="center"></el-table-column> -->
      <el-table-column label="统计期" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.statisticalPeriod }}</span>
          <span>({{ QUARTER[scope.row.quarter] }})</span>

          <!-- <el-button type="primary" size="small" @click="edit(scope.$index, scope.row)">修改</el-button>
          <el-button type="danger" size="small" @click="del(scope.$index, scope.row)">删除</el-button>-->
        </template>
      </el-table-column>
      <el-table-column prop="companyName" label="企业名称" align="center" />
      <el-table-column prop="productValue" label="产值" align="center" />
      <el-table-column prop="revenue" label="税收" align="center" />
      <el-table-column prop="workNumber" label="从业人员数" align="center" />
      <el-table-column prop="assets" label="固定资产" align="center" />
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="edit(scope.$index, scope.row)">修改</el-button>
          <el-button type="danger" size="small" @click="del(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="margin-left:20px"
      :current-page="currentPage"
      :page-sizes="pagesizes"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    />
    <!-- 弹框 新增/编辑 -->
    <el-dialog title="新增" :visible.sync="dialogFormVisible" @close="closeDialog">
      <el-form
        ref="ruleForm"
        label-width="100px"
        label-position="right"
        :model="form"
        :rules="formrules"
      >
        <el-form-item label="统计期:" prop="statisticalPeriod">
          <el-select v-model="form.statisticalPeriod" placeholder="请选择" size="mini" clearable>
            <el-option label="2019" value="2019年" />
            <el-option label="2018" value="2018年" />
            <el-option label="2017" value="2017年" />
          </el-select>
        </el-form-item>
        <el-form-item label="统计季度:" prop="quarter">
          <el-select v-model="form.quarter" placeholder="请选择" size="mini" clearable>
            <el-option label="一季度" value="1" />
            <el-option label="二季度" value="2" />
            <el-option label="三季度" value="3" />
            <el-option label="四季度" value="4" />
          </el-select>
        </el-form-item>
        <el-form-item label="企业名称:" prop="companyName">
          <!-- <el-select v-model="form.companyName" placeholder="请选择" size="mini">
            <el-option label="1111" value></el-option>
          </el-select>-->
          <!-- <el-input placeholder="请输入企业名称" v-model="form.companyName" size="mini" clearable></el-input> -->
          <el-select
            v-model="form.companyName"
            filterable
            placeholder="请选择"
            size="mini"
            clearable
            @change="AddselectCompanyName"
          >
            <el-option
              v-for="items in restaurants"
              :key="items.id"
              :label="items.name"
              :value="items.name"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="企业产值:" prop="productValue">
          <el-input v-model="form.productValue" placeholder="请输入产值" size="mini" />
        </el-form-item>
        <el-form-item label="企业税收:" prop="revenue">
          <el-input v-model="form.revenue" placeholder="请输入税收" size="mini" />
        </el-form-item>
        <el-form-item label="从业人员数:" prop="workNumber">
          <el-input v-model="form.workNumber" placeholder="请输入人数" size="mini" />
        </el-form-item>
        <el-form-item label="固定资产:" prop="assets">
          <el-input v-model="form.assets" placeholder="请输入资产" size="mini" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 导入弹框 -->
    <el-dialog title="导入" :visible.sync="daorudialogFormVisible" @close="daorucloseDialog">
      <el-form
        ref="daoruForm"
        label-width="100px"
        label-position="right"
        :model="daoru"
        :rules="daorurules"
      >
        <el-form-item label="统计期" prop="statisticalPeriod">
          <el-select v-model="daoru.statisticalPeriod" placeholder="请选择" size="mini" clearable>
            <el-option label="2019" value="2019年" />
            <el-option label="2018" value="2018年" />
            <el-option label="2017" value="2017年" />
          </el-select>
        </el-form-item>
        <el-form-item label="统计季度" prop="quarter">
          <el-select v-model="daoru.quarter" placeholder="请选择" size="mini" clearable>
            <el-option label="一季度" value="1" />
            <el-option label="二季度" value="2" />
            <el-option label="三季度" value="3" />
            <el-option label="四季度" value="4" />
          </el-select>
        </el-form-item>
        <!-- <el-upload
            class="upload-demo"
            ref="upload"
            action="http://115.239.137.3:9000/enterprise/report/import"
            :show-file-list="false"
            :file-list="fileArr"
            :before-upload="beforeUploadFile"
            style="display: inline"
            :on-success="handleSuccess"
          >
            <el-button type="primary" style="margin-bottom:15px;margin-left: 10px;" size="mini">导入</el-button>
        </el-upload>-->
        <el-form-item>
          <el-upload
            ref="upload"
            class="upload-demo"
            :action="daoruUrls"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :file-list="fileArr"
            :on-success="handleSuccess"
            :before-upload="beforeUploadFile"
            :auto-upload="false"
            :data="daoru"
            :limit="1"
            :on-exceed="onexceed"
          >
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <el-button
              style="margin-left: 10px;"
              size="small"
              type="success"
              @click="daorusubmitForm('daoruForm')"
            >导入</el-button>
            <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
          </el-upload>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import {
  reportList,
  reportCheck,
  reportadd,
  reportview,
  reportupdate,
  reportdelete,
  reportcompanies,
  reportdownload,
  reportexport,
  reportimport
} from '../../api/dashboard'
import { mapGetters } from 'vuex'

export default {
  name: 'Index',
  components: {},
  computed: {
    ...mapGetters(['parkId'])
  },
  data() {
    return {
      searchform: {
        companyName: '',
        quarter: '',
        statisticalPeriod: ''
      },
      form: {
        statisticalPeriod: '',
        quarter: '',
        companyName: '',
        productValue: '',
        revenue: '',
        workNumber: '',
        assets: '',
        id: ''
      },
      formrules: {
        statisticalPeriod: [
          { required: true, message: '请选择统计期', trigger: 'change' }
        ],
        quarter: [{ required: true, message: '请选择季度', trigger: 'change' }],
        companyName: [
          { required: true, message: '请选择企业名称', trigger: 'change' }
        ],
        productValue: [
          { required: true, message: '请输入产值', trigger: 'blur' }
        ],
        revenue: [{ required: true, message: '请输入税收', trigger: 'blur' }],
        workNumber: [
          { required: true, message: '请输入从业人员数', trigger: 'blur' }
        ],
        assets: [{ required: true, message: '请输入固定资产', trigger: 'blur' }]
      },
      QUARTER: {
        '1': '一季度',
        '2': '二季度',
        '3': '三季度',
        '4': '四季度'
      },
      records: [],
      dialogFormVisible: false, // 弹框
      restaurants: [], // 企业名称
      saveError: false,
      currentPage: 1,
      pagesize: 10,
      pagesizes: [5, 10, 20, 30],
      total: 0,
      // 导入
      daorudialogFormVisible: false, // 导入弹框
      fileArr: [], // 导入文件列表
      daoruUrls: '', // 导入请求接口地址
      daoru: {
        // 导入表单
        statisticalPeriod: '',
        quarter: ''
      },
      daorurules: {
        // 导入验证规则
        statisticalPeriod: [
          { required: true, message: '请选择统计期', trigger: 'change' }
        ],
        quarter: [{ required: true, message: '请选择季度', trigger: 'change' }]
      }
    }
  },
  created() {
    this._reportList()
  },
  mounted() {
    this._reportcompanies()
  },
  methods: {
    handleSizeChange(pagesize) {
      this.pagesize = pagesize
      this._reportList()
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      this._reportList()
    },
    // 企业下拉
    _reportcompanies() {
      reportcompanies(this.parkId).then(res => {
        this.restaurants = res.data.data
      })
    },
    selectCompanyName(item) {
      // console.log("item", item);
    },
    AddselectCompanyName(item) {
      // console.log("item", item);
    },
    // 企业下拉end

    // 企业信息-校验
    _reportCheck(callback) {
      reportCheck({
        statisticalPeriod: this.form.statisticalPeriod,
        quarter: this.form.quarter,
        companyName: this.form.companyName,
        parkId: this.parkId
      }).then(res => {
        console.log('res校验', res)
        if (res.data.status == 400) {
          this.saveError = true
        } else {
          this.saveError = false
        }
        callback(this.saveError)
      })
    },
    // 列表
    _reportList() {
      reportList({
        current: this.currentPage,
        size: this.pagesize,
        companyName: this.searchform.companyName,
        quarter: this.searchform.quarter,
        statisticalPeriod: this.searchform.statisticalPeriod,
        parkId: this.parkId
      }).then(res => {
        // console.log("res", res);
        if (res.status == 200) {
          this.records = res.data.data.records || []
          this.total = res.data.data.total
        }
      })
    },
    add() {
      this.dialogFormVisible = true
      this.form.id = ''
      this.form.statisticalPeriod = ''
      this.form.quarter = ''
      this.form.companyName = ''
      this.form.productValue = '0'
      this.form.revenue = '0'
      this.form.workNumber = '0'
      this.form.assets = '0'
      this.form.parkId = this.parkId
      this.$nextTick(() => {
        // this.$refs["ruleForm"].clearValidate();//移除表单项的校验结果
        this.$refs['ruleForm'].resetFields() // 初始值并移除校验结果
      })
    },
    edit(index, row) {
      this.dialogFormVisible = true
      this.$nextTick(() => {
        // this.$refs["ruleForm"].clearValidate();//移除表单项的校验结果
        this.$refs['ruleForm'].resetFields() // 初始值并移除校验结果
      })

      reportview(row.id).then(res => {
        this.form = res.data.data
      })
    },
    // 保存
    submitForm(form) {
      console.log(form, this.$refs[form])
      this.$refs[form].validate(valid => {
        if (valid) {
          console.log('form', this.form)
          if (this.form.id) {
            // 编辑
            reportupdate(this.form).then(res => {
              if (res.data.status == 200) {
                this.$message({
                  message: '修改成功',
                  type: 'success'
                })
                this.dialogFormVisible = false
                this._reportList()
              } else {
                this.$message({
                  message: '修改失败',
                  type: 'error'
                })
              }
            })
          } else {
            console.log('添加')
            // 添加
            this._reportCheck(saveError => {
              // console.log(111, saveError);
              if (saveError) {
                this.$message({
                  message: '统计期和企业名称的直报已经存在',
                  type: 'error'
                })
              } else {
                reportadd(this.form).then(res => {
                  if (res.data.status == 200) {
                    this.$message({
                      message: '添加成功',
                      type: 'success'
                    })
                    this.dialogFormVisible = false
                    this._reportList()
                  } else {
                    console.log(1111111111)
                    this.$message({
                      message: '添加失败',
                      type: 'error'
                    })
                  }
                })
              }
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 删除
    del(index, row) {
      this.$confirm('是否确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          reportdelete(row.id)
            .then(res => {
              // console.log(res);
              if (res.data.status == 200) {
                this.$message({
                  message: '删除成功',
                  type: 'success'
                })
                this._reportList()
              }
            })
            .catch(e => e)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 关闭添加/编辑弹框
    closeDialog() {
      this.dialogFormVisible = false
    },
    // 搜索
    search() {
      // console.log(this.searchform);
      this.currentPage = 1
      this._reportList()
    },
    // 模板下载
    _reportdownload() {
      // reportdownload({}).then(res => {
      //   // console.log("res", res);
      // });
      // window.open("http://115.239.137.3:9000/enterprise/report/download");
      const urls = process.env.BASE_API + '/report/download'
      window.open(urls)
    },
    // 导出
    _reportexport() {
      // reportexport().then(res => {
      // this.restaurants = res.data.data;
      // });
      // window.open("http://61.174.54.120:9000/enterprise/report/export");
      const urls = process.env.BASE_API + '/report/export?parkId=' + this.parkId
      window.open(urls)
    },
    // 导入

    // 导入弹框显示
    _reportimport() {
      //   reportimport().then(res => {
      //     // console.log("res", res);
      //   });
      // file，parkId ，quarter ，statisticalPeriod
      this.daorudialogFormVisible = true
      // 清空表单
      this.daoru.statisticalPeriod = ''
      this.daoru.quarter = ''
      this.daoru.parkId = this.parkId
      this.fileArr = []

      // this.daoruUrls = "http://115.239.137.3:9000/enterprise/report/import";
      this.daoruUrls = process.env.BASE_API + '/report/import'
      this.$nextTick(() => {
        this.$refs['daoruForm'].resetFields() // 初始值并移除校验结果
      })
    },
    // 导入确认
    daorusubmitForm(form) {
      console.log('111', this.fileArr)
      // console.log("form", form, this.$refs[form]);
      this.$refs[form].validate(valid => {
        this.$refs.upload.submit()
      })
    },
    // 导入关闭
    daorucloseDialog() {
      this.daorudialogFormVisible = false
    },
    // 导入之前
    beforeUploadFile(file) {
      console.log('上传之前', file)
      console.log('daoru', this.daoru)
      const isLt10M = file.size / 1024 / 1024 < 10
      const isText = file.type === 'application/vnd.ms-excel'
      const isTextComputer =
        file.type ===
        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
      if (!isLt10M) {
        this.$message.error('上传文件大小不能超过10MB!')
        return false
      }
      if (!isText && !isTextComputer) {
        this.$message.error('上传文件类型必须为excel!')
        return false
      }
    },
    // 导入成功
    handleSuccess: function(res, file, fileList) {
      console.log('成功', res, file, fileList)
      const _this = this
      console.log(res)
      if (res.success === true) {
        _this.$alert('上传成功', '提示', {
          confirmButtonText: '确定',
          callback: action => {
            this.currentPage = 1
            this._reportList()
            this.daorudialogFormVisible = false
          }
        })
      } else {
        _this.$alert('上传失败，请稍后再试', '提示', {
          confirmButtonText: '确定',
          callback: action => {
            this.daorudialogFormVisible = false
            this.fileArr = []
          }
        })
      }
    },
    // 删除文件
    handleRemove(file, fileList) {
      console.log('file删除', file, fileList)
    },
    // 选中文件
    handlePreview(file) {
      // this.fileArr = file;
      console.log('file选中', file)
    },
    // 文件限制
    onexceed(files, fileList) {
      this.$message({
        message: '最多只能上传一个文件',
        type: 'error'
      })
      console.log('files, fileList', files, fileList)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.main-wrapper {
  width: 100%;
  min-height: calc(100vh - 84px);
  padding: 12px;
  border-top: 1px solid #ddd;
  label {
    font-weight: normal;
  }
}
</style>