客户导入

src/apis/setting.js

 const type = 'setting'
 const setting = {
+  getListImportFile: {
+    url: '/vue/setting/list-import-file'
+  },
+
+  saveNewImportFile: {
+    url: 'http://vue.jinchangxiao.com/vue/setting/save-new-import-file'
+  },
+
+  importClient: {
+    url: '/vue/setting/import-client'
+  },
+
   getSettingIndex: {
     url: '/vue/setting/index'
+  },
+
+  deleteImportFile: {
+    url: '/vue/setting/delete-import-file'
   }
 }
 function temp (t, tt) {

src/components/setting_list/import-history/form.vue

+<template>
+  <section class="ec-page-wrapper" style="overflow: hidden; padding-bottom: 0px;">
+    <el-form label-width="120px" ref="form" :rules="rules" :model="model" class="ec-create-form">
+      <el-form-item label="文件名：" prop="attachment_id" class="ec-clear-left ec-form-item-lg">
+        <single-upload
+          label=""
+          :file-name="getFileName('receiptScan')"
+          tips=""
+          :form-item="model.id"
+          @update:item="reload">
+        </single-upload>
+      </el-form-item>
+    </el-form>
+  </section>
+</template>
+<script>
+import singleUpload from './singleUpload'
+export default {
+  name: 'implementForm',
+
+  props: {
+    model: Object
+  },
+
+  components: {
+    singleUpload
+  },
+
+  data () {
+    return {
+      rules: {
+      }
+    }
+  },
+
+  created () {
+  },
+
+  mounted () {
+  },
+
+  computed: {
+  },
+
+  methods: {
+    getNew () {
+    },
+
+    getEdit () {
+    },
+
+    _validate (cb) {
+      this.$refs['form'].validate((valid) => {
+        if (valid) {
+          cb && cb()
+        }
+      })
+    },
+
+    _resetFields () {
+      this.$refs['form'].resetFields()
+    },
+
+    getFileName () {},
+
+    reload () {
+      this.$parent.$parent._reload()
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.ec-create-form .el-form-item {
+  width: 70%;
+}
+// .ec-create-form .el-form-item {
+//   width: 100%;
+// }
+</style>

src/components/setting_list/import-history/import_history_list.vue

@@ -15,27 +15,42 @@
         <el-table :data="result.list" border stripe style="width: 100%;margin-top:20px;">
           <el-table-column align="center" label="原文件名">
             <template slot-scope="scope">
-              {{ scope.row.display_name}}
+              {{ scope.row.orig_name }}
             </template>
           </el-table-column>
           <el-table-column prop="description" align="center" label="导入信息">
+            <template slot-scope="scope">
+              <a @click="showTip(scope.row)"><i class="fa fa-fw fa-file"></i></a>
+            </template>
           </el-table-column>
-          <el-table-column prop="updated_at" align="center" label="状态">
+          <el-table-column prop="status_display" align="center" label="状态">
           </el-table-column>
-          <el-table-column prop="updated_at" align="center" label="全部条数">
+          <el-table-column align="center" label="全部条数">
+            <template slot-scope="scope">
+              {{ scope.row.total_records }}条
+            </template>
           </el-table-column>
-          <el-table-column prop="updated_at" align="center" label="成功条数">
+          <el-table-column align="center" label="成功条数">
+            <template slot-scope="scope">
+              {{ scope.row.imported_records }}条
+            </template>
           </el-table-column>
-          <el-table-column prop="updated_at" align="center" label="失败条数">
+          <el-table-column align="center" label="失败条数">
+            <template slot-scope="scope">
+              {{ scope.row.total_records - scope.row.imported_records }}条
+            </template>
           </el-table-column>
-          <el-table-column prop="updated_at" align="center" label="录入人">
+          <el-table-column align="center" label="录入人">
+            <template slot-scope="scope">
+              {{ scope.row.createdBy.name }}条
+            </template>
           </el-table-column>
-          <el-table-column prop="updated_at" align="center" label="创建时间">
+          <el-table-column prop="created_at" align="center" label="创建时间">
           </el-table-column>
           <el-table-column align="center" label="操作">
             <template slot-scope="scope">
-              <el-button type="primary" size="mini" @click.prevent.stop="editEvent(scope.row)" :disabled="!scope.row.can_update"><i class="fa fa-edit animated"></i>编辑</el-button>
-              <el-button type="primary" size="mini" @click.prevent.stop="deleteEvent(scope.row.id)" :disabled="!scope.row.can_delete"><i class="fa fa-trash-o animated-hove"></i>删除</el-button>
+              <el-button type="primary" size="mini" @click.prevent.stop="editEvent(scope.row.id)" :disabled="!scope.row.can_import"><i class="fa fa-fw fa-sign-in"></i></el-button>
+              <el-button type="primary" size="mini" @click.prevent.stop="deleteEvent(scope.row.id)" :disabled="!scope.row.can_delete"><i class="fa fa-trash-o animated-hove"></i></el-button>
            </template>
           </el-table-column>
         </el-table>
@@ -45,7 +60,7 @@
         </Pagenation>
       </div>
     </div>
-    <FormModal ref="formModal" :t="t" :tt="tt"></FormModal>
+    <FormModal ref="formModal"></FormModal>
   </section>
 </template>
 <script>
@@ -91,8 +106,8 @@ export default {
   },
 
   methods: {
-    getList (params) {
-      requestAPI(api[`getList${this.t}${this.tt}`], params)
+    getList () {
+      requestAPI(api.getListImportFile, {})
         .then((res) => {
           this.result.list = res.list
           this.result.pagenation = res.pagenation
@@ -110,14 +125,30 @@ export default {
       this.getList({page: this.pagenation.thispage})
     },
 
+    showTip (model) {
+      // this.$refs.
+    },
+
     // 6.1新增
     add () {
       this.$refs.formModal.show()
     },
 
     // 6.2编辑
-    editEvent (item) {
-      this.$refs.formModal.show(item)
+    editEvent (id) {
+      this.$confirm(`您确定要导入?`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        requestAPI(api.deleteImportFile, { id })
+        .then((res) => {
+          this.$message.success(`导入成功`)
+          this._reload()
+        })
+      }).catch(() => {
+        this.$message.info(`取消导入`)
+      })
     },
 
     deleteEvent (id) {
@@ -127,7 +158,7 @@ export default {
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
-        requestAPI(api[`delete${this.t}${this.tt}`], { id })
+        requestAPI(api.deleteImportFile, { id })
         .then((res) => {
           this.$message.success(`${deleteTip}成功`)
           this._reload()

src/components/setting_list/import-history/modal.vue

+<template>
+  <section>
+    <sidePopup ref="sidePopup" title="客户导入" :width="50" @update:close="() => btnClose()">
+      <Foom
+        ref="form"
+        :model="model">
+      </Foom>
+    </sidePopup>
+  </section>
+</template>
+<script>
+import Foom from './form'
+export default {
+
+  components: {
+    Foom
+  },
+
+  data () {
+    return {
+      diaVis: false,
+      model: {
+        id: ''
+      }
+    }
+  },
+
+  methods: {
+    show () {
+      this.$refs.sidePopup.show()
+    },
+
+    _reload () {
+      this.handleClose()
+      this.$parent._reload()
+    },
+
+    handleClose () {
+      this.$refs.sidePopup.close(() => {
+        this.$refs.form._resetFields()
+      })
+    },
+
+    btnClose () {
+      this.$refs.form._resetFields()
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+</style>

src/components/setting_list/import-history/singleUpload.vue

+<template>
+  <div class="single-upload">
+    <el-row :gutter="10">
+      <el-col :span="4" :class="['client-label', 'text-right', {'required': required}]">
+        <span>{{label}}</span>
+      </el-col>
+      <el-col :span="14">
+        <el-upload
+          ref="upload"
+          :limit="1"
+          class="upload-single"
+          :http-request="upload"
+          :auto-upload="false"
+          list-type="text"
+          :multiple="false"
+          :before-upload="beforeUpload"
+          :on-remove="handleRemove"
+          action="/vue/upload/single"
+          :on-change="handleChange"
+          accept=".jpg,.jpeg,.png,.gif,.bmp,.pdf,.JPG,.JPEG,.PBG,.GIF,.BMP,.PDF,.xls"
+          :file-list="fileList">
+          <el-button size="small" type="primary" @click="submitUpload" :disabled="fileList.length > 0">上传到服务器
+          </el-button>
+          <el-button slot="trigger" size="small" type="primary">选择文件</el-button>
+          <div class="progress">
+            <el-progress :percentage="progress" v-if="progress > 0 && progress < 100"></el-progress>
+          </div>
+        </el-upload>
+        <span class="tips">{{tips}}
+          <span class="text-danger">当有新文件上传时, 之前上传的文件将会被删除</span></span>
+      </el-col>
+      <el-col :span="6">
+        <slot name="formError"></slot>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+  import $ from 'jquery'
+  import { request } from '@/lib/request'
+  import {
+    api
+  } from '@/lib/commonMixin'
+  // import itemMixin from '../../lib/singleItemMixin'
+
+  export default {
+    name: 'single-upload',
+    // mixins: [itemMixin],
+    data () {
+      return {
+        fileList: [],
+        progress: 0
+      }
+    },
+    methods: {
+      beforeUpload (file, upload) {
+        const isLt50M = file.size / 1024 / 1024 < 50
+        if (!isLt50M) {
+          this.$message.error('上传文件大小不能超过50MB!请重新选择文件') // 上传头像图片大小不能超过 2MB
+        }
+        return isLt50M
+      },
+      handleRemove (file, fileList) {
+        this.fileList = fileList
+        this.$refs.upload.abort()
+        this.$refs.upload.clearFiles()
+        this.$emit('update:item', '')
+      },
+      progressBar (evt) {
+        var loaded = evt.loaded // 已经上传大小情况
+        var tot = evt.total // 附件总大小
+        var per = Math.floor(100 * loaded / tot) // 已经上传的百分比
+        this.progress = per // 绘制经度条
+      },
+      handleChange () {
+      },
+      submitUpload () {
+        this.$refs.upload.submit()
+      },
+      upload (item) {
+        let formData = new FormData()
+        formData.append('UploadImportFileForm[file]', item.file)
+        let _this = this
+        request({
+          url: api.saveNewImportFile.url,
+          // url: 'http://localhost:13009/bankimage/uploadImgToBank',
+          type: 'POST',
+          cache: false,
+          data: formData,
+          contentType: false,
+          processData: false,
+          xhr () {
+            let xhr = $.ajaxSettings.xhr()
+            if (xhr.upload) {
+              xhr.upload.addEventListener('progress', _this.progressBar, false)
+              return xhr
+            }
+          }
+        }).then(res => {
+          this.progress = 95
+          this.fileList.push({
+            name: res.orig_name,
+            url: res.path
+          })
+          this.$emit('update:item', res.key)
+        }).finally(() => {
+          this.progress = 100
+        })
+      }
+    },
+    props: {
+      tips: {
+        type: String,
+        default: ''
+      },
+      label: {
+        type: String,
+        default: ''
+      },
+      required: {
+        type: Boolean,
+        default: false
+      },
+      fileName: {
+        type: String,
+        default: ''
+      }
+    },
+    watch: {
+      fileName: {
+        handler (val) {
+          if (val !== '') {
+            this.fileList.push({
+              name: val
+            })
+          }
+        },
+        immediate: true
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .tips {
+    display: block;
+    line-height: 1.5;
+    color: #6c757d;
+    font-size: 12px;
+  }
+</style>
+<style>
+  .single-upload {
+    width: 100%;
+  }
+
+  .single-upload .tips {
+    display: block;
+    margin: 0
+  }
+
+  .single-upload .upload-single {
+    position: relative;
+    clear: both;
+    overflow: hidden;
+  }
+
+  .single-upload .progress {
+    position: absolute;
+    width: 100%;
+    right: 0;
+    bottom: -17px;
+    height: 15px;
+    box-shadow: none;
+  }
+
+  .single-upload .upload-single .el-upload-list--text {
+    height: 32px;
+    display: inline-block;
+    border: 1px solid #ffffff;
+    width: 100%;
+    border-radius: 4px;
+    background: #fff;
+    vertical-align: middle;
+  }
+
+  .single-upload .upload-single .el-upload {
+    display: inline-block;
+  }
+
+  .single-upload .upload-single > .el-button {
+    display: inline-block;
+  }
+
+  .single-upload .upload-single > .el-button {
+    vertical-align: middle;
+  }
+
+  .single-upload .upload-single .el-upload-list__item:first-child {
+    margin-top: 3px;
+  }
+</style>

src/components/setting_list/import-history/tipModal.vue

+<template>
+  <section>
+    <sidePopup ref="sidePopup" title="客户导入" :width="50" @update:close="() => btnClose()">
+      <ul>
+        <li v-for="(index, item) in model.fail_description">
+        </li>
+      </ul>
+    </sidePopup>
+  </section>
+</template>
+<script>
+export default {
+
+  components: {
+  },
+
+  data () {
+    return {
+      diaVis: false,
+      model: null
+    }
+  },
+
+  methods: {
+    show (model) {
+      this.model = model
+      this.$refs.sidePopup.show()
+    },
+
+    handleClose () {
+      this.$refs.sidePopup.close(() => {
+        this.$refs.form._resetFields()
+      })
+    },
+
+    btnClose () {
+      this.$refs.form._resetFields()
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+</style>

src/lib/request.js

@@ -67,9 +67,11 @@ export function request (option) {
 
         if (res.msg) {
           // 先让界面变化
-          // setTimeout(function () {
-          //   window.alert(res.msg)
-          // }, 300)
+          setTimeout(function () {
+            res.msg.forEach(item => {
+              window.alert(item.error)
+            })
+          }, 300)
         }
       }
     }, function (xhr, status, error) {

src/routes/setting.js

@@ -30,7 +30,12 @@ import TaxonomyTerm9List from '../components/setting_list/taxonomy_term_9/taxono
 import TaxonomyTerm10List from '../components/setting_list/taxonomy_term_10/taxonomy_term_10'
 import TaxonomyTerm13List from '../components/setting_list/taxonomy_term_13/taxonomy_term_13'
 import ProjectProgressList from '../components/setting_list/project_progress/project_progress_list'
+import ImportHistoryList from '../components/setting_list/import-history/import_history_list.vue'
 const routes = [{
+  path: '/setting/import-history',
+  name: 'importHistoryList',
+  component: ImportHistoryList
+}, {
   path: '/setting',
   name: 'settingIndex',
   component: SettingIndex