1

cnpm install element-ui -S

1

2

import ElementUI from 'element-ui'

import 'element-ui/lib/theme-default/index.css'

1

Vue.use(ElementUI)

1

2

3

4

5

6

7

8

9

10

11

12

<el-upload class="upload-demo"

  :action="importUrl"

  :name ="name"//上傳的檔案欄位名

  :headers="importHeaders"//請求頭格式

  :on-preview="handlePreview"//可以通過 file.response 拿到服務端返回資料

  :on-remove="handleRemove"//檔案移除

  :before-upload="beforeUpload"//上傳前配置

  :on-error="uploadFail"//上傳錯誤

  :on-success

  :file-list="fileList"//上傳的檔案列表

  :with-credentials="withCredentials">//是否支援cookie資訊傳送

</el-upload>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

export const downloadTemplate = function (scheduleType) {

 axios.get('/rest/schedule/template', {

  params: {

   "scheduleType": scheduleType

  },

  responseType: 'arraybuffer'

 }).then((response) => {

  //建立一個blob物件,file的一種

  let blob = new Blob([response.data], { type: 'application/x-xls' })

  let link = document.createElement('a')

  link.href = window.URL.createObjectURL(blob)

  //配置下載的檔名

  link.download = fileNames[scheduleType] + '_' + response.headers.datestr + '.xls'

  link.click()

 })

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

<template>

<div>

 <el-table

 ref="multipleTable"

 :data="tableData3"

 tooltip-effect="dark"

 border

 style="width: 80%"

 @selection-change="handleSelectionChange">

 <el-table-column

  type="selection"

  width="55">

 </el-table-column>

 <el-table-column

  label="日期"

  width="120">

  <template slot-scope="scope">{{ scope.row.date }}</template>

 </el-table-column>

 <el-table-column

  prop="name"

  label="姓名"

  width="120">

 </el-table-column>

 <el-table-column

  prop="address"

  label="地址"

  show-overflow-tooltip>

 </el-table-column>

 </el-table>

 <div style="margin-top: 20px">

 <el-button @click="toggleSelection([tableData3[1], tableData3[2]])">切換第二、第三行的選中狀態</el-button>

 <el-button @click="toggleSelection()">取消選擇</el-button>

 <el-button type="primary" @click="importData">匯入</el-button>

 <el-button type="primary" @click="outportData">匯出</el-button>

 </div>

 <!-- 匯入 -->

 <el-dialog title="匯入" :visible.sync="dialogImportVisible" :modal-append-to-body="false" :close-on-click-modal="false" class="dialog-import">

  <div :class="{'import-content': importFlag === 1, 'hide-dialog': importFlag !== 1}">

  <el-upload class="upload-demo"

  :action="importUrl"

  :name ="name"

  :headers="importHeaders"

  :on-preview="handlePreview"

  :on-remove="handleRemove"

  :before-upload="beforeUpload"

  :on-error="uploadFail"

  :on-success="uploadSuccess"

  :file-list="fileList"

  :with-credentials="withCredentials">

  <!-- 是否支援傳送cookie資訊 -->

   <el-button size="small" type="primary" :disabled="processing">{{uploadTip}}</el-button>

   <div slot="tip" class="el-upload__tip">只能上傳excel檔案</div>

  </el-upload>

  <div class="download-template">

   <a class="btn-download" @click="download">

   <i class="icon-download"></i>下載模板</a>

  </div>

  </div>

  <div :class="{'import-failure': importFlag === 2, 'hide-dialog': importFlag !== 2}" >

  <div class="failure-tips">

   <i class="el-icon-warning"></i>匯入失敗</div>

  <div class="failure-reason">

   <h4>失敗原因</h4>

   <ul>

   <li v-for="(error,index) in errorResults" :key="index">第{{error.rowIdx + 1}}行，錯誤：{{error.column}},{{error.value}},{{error.errorInfo}}</li>

   </ul>

  </div>

  </div>

 </el-dialog>

 <!-- 匯出 -->

</div>

</template>

<script>

import * as scheduleApi from '@/api/schedule'

export default {

 data() {

 return {

  tableData3: [

  {

   date: "2016-05-03",

   name: "王小虎",

   address: "上海市普陀區金沙江路 1518 弄"

  },

  {

   date: "2016-05-02",

   name: "王小虎",

   address: "上海市普陀區金沙江路 1518 弄"

  },

  {

   date: "2016-05-04",

   name: "王小虎",

   address: "上海市普陀區金沙江路 1518 弄"

  },

  {

   date: "2016-05-01",

   name: "王小虎",

   address: "上海市普陀區金沙江路 1518 弄"

  },

  {

   date: "2016-05-08",

   name: "王小虎",

   address: "上海市普陀區金沙江路 1518 弄"

  },

  {

   date: "2016-05-06",

   name: "王小虎",

   address: "上海市普陀區金沙江路 1518 弄"

  },

  {

   date: "2016-05-07",

   name: "王小虎",

   address: "上海市普陀區金沙江路 1518 弄"

  }

  ],

  multipleSelection: [],

  importUrl:'www.baidu.com',//後臺介面config.admin_url+'rest/schedule/import/'

  importHeaders:{

  enctype:'multipart/form-data',

  cityCode:''

  },

  name: 'import',

  fileList: [],

  withCredentials: true,

  processing: false,

  uploadTip:'點選上傳',

  importFlag:1,

  dialogImportVisible:false,

  errorResults:[]

 };

 },

 methods: {

 toggleSelection(rows) {

  if (rows) {

  rows.forEach(row => {

   this.$refs.multipleTable.toggleRowSelection(row);

  });

  } else {

  this.$refs.multipleTable.clearSelection();

  }

 },

 handleSelectionChange(val) {

  //複選框選擇回填函式,val返回一整行的資料

  this.multipleSelection = val;

 },

 importData() {

  this.importFlag = 1

  this.fileList = []

  this.uploadTip = '點選上傳'

  this.processing = false

  this.dialogImportVisible = true

 },

 outportData() {

  scheduleApi.downloadTemplate()

 },

 handlePreview(file) {

  //可以通過 file.response 拿到服務端返回資料

 },

 handleRemove(file, fileList) {

  //檔案移除

 },

 beforeUpload(file){

  //上傳前配置

  this.importHeaders.cityCode='上海'//可以配置請求頭

  let excelfileExtend = ".xls,.xlsx"//設定檔案格式

  let fileExtend = file.name.substring(file.name.lastIndexOf('.')).toLowerCase();

  if (excelfileExtend.indexOf(fileExtend) <= -1) {

   this.$message.error('檔案格式錯誤')

   return false

  }

  this.uploadTip = '正在處理中...'

  this.processing = true

 },

 //上傳錯誤

 uploadFail(err, file, fileList) {

  this.uploadTip = '點選上傳'

  this.processing = false

  this.$message.error(err)

 },

 //上傳成功

 uploadSuccess(response, file, fileList) {

  this.uploadTip = '點選上傳'

  this.processing = false

  if (response.status === -1) {

  this.errorResults = response.data

  if (this.errorResults) {

   this.importFlag = 2

  } else {

   this.dialogImportVisible = false

   this.$message.error(response.errorMsg)

  }

  } else {

  this.importFlag = 3

  this.dialogImportVisible = false

  this.$message.info('匯入成功')

  this.doSearch()

  }

 },

 //下載模板

 download() {

  //呼叫後臺模板方法,和匯出類似

  scheduleApi.downloadTemplate()

 },

 }

};

</script>

<style scoped>

.hide-dialog{

 display:none;

}

</style>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

import axios from 'axios'

// 下載模板

 export const downloadTemplate = function (scheduleType) {

  axios.get('/rest/schedule/template', {

   params: {

    "scheduleType": scheduleType

   },

   responseType: 'arraybuffer'

  }).then((response) => {

   //建立一個blob物件,file的一種

   let blob = new Blob([response.data], { type: 'application/x-xls' })

   let link = document.createElement('a')

   link.href = window.URL.createObjectURL(blob)

   link.download = fileNames[scheduleType] + '_' + response.headers.datestr + '.xls'

   link.click()

  })

 }