lshcomment 1.0.0

package/src/components/iris-upload-2.2/index.vue

@@ -0,0 +1,317 @@
+<template>
+    <div class="upload_box">
+      <div class="upload_warp_img  clearfix">
+        <div class="upload_warp_img_div" v-for="(item,index) of fileList" :key="index">
+          <div>
+            <div class="upload_warp_img_div_top" v-if="!disabled">
+              <i class="el-icon-close upload_warp_img_div_del" @click="fileDel(item)"> </i>
+            </div>
+            <img  class="list-img"  @click="open(item.url)" :src="item.url">
+          </div>
+          <el-tooltip class="item" effect="dark" :content="item.name" placement="top">
+            <div class="img_title">{{item.name}}</div>
+          </el-tooltip>
+        </div>
+        <div class="upload_warp" v-if="buttonShow">
+          <div class="upload_warp_left" @click="fileClick">
+            <div class="el-upload el-upload--picture-card">
+              <i v-if="!title" class="el-icon-plus"></i>
+              <!-- {{title}} -->
+            </div>
+            <el-tooltip class="item" effect="dark" :content="title" placement="top">
+              <div class="item_title">{{title}}</div>
+            </el-tooltip>
+          </div>
+        </div>
+      </div>
+      <input ref="uploadFile" @change="fileChange($event)" type="file" class="upload_file" style="display: none;" />
+    </div>
+</template>
+<script>
+  import config from 'common/config'
+  import axios from 'axios'
+  import Vue from 'vue'
+  import {Tooltip , Message} from 'element-ui'
+  axios.defaults.withCredentials = false
+  Vue.use(Tooltip)
+  export default {
+    name: 'upload',
+    props: {
+      onSuccess: {
+        type: Function,
+        default: function() {
+          return function(){};
+        }
+      },
+      onError: {
+        type: Function,
+        default: function() {
+          return function(){};
+        }
+      },
+      fileList: {
+        type: Array,
+        default: function() {
+          return [];
+        }
+      },
+      onRemove: {
+        type: Function,
+        default: function() {
+          return function(){};
+        }
+      },
+      uploadBefore: {
+        type: Function,
+        default: function() {
+          return function(){};
+        }
+      },
+      parame: {
+        type: Object,
+        default: function() {
+          return {}
+        }
+      },
+      limit: {
+        type: Number,
+        validator: function (value) {
+            return value > 0
+        },
+        default: 1
+      },
+      title:{
+        type: String,
+        default: function() {
+          return ""
+        }
+      },
+      disabled: {
+        type: Boolean,
+        default: function() {
+          return false
+        }
+      },
+      maximum: {
+        type: Number,
+        validator: function (value) {
+            return value > 0
+        },
+        default: 5000000
+      },
+      acceptImg: {
+        type: String,
+        default: function() {
+          return 'image/png,image/gif,image/jpg,image/jpeg'
+        }
+      },
+      
+    },
+    data() {
+      return {
+        imgList: [],
+        size: 0,
+        uploadUrl:config.uploadUrl,
+        buttonShow:true
+      }
+    },
+    watch:{
+      fileList:{
+        handler:function(){
+          const _this = this;
+          _this.single()
+        },
+        deep:true
+      }
+    },
+    created(){
+      const _this = this;
+      _this.single()        
+    },
+    methods: {
+      single(){
+        const _this = this;
+        if(_this.limit == 1){
+          if(_this.fileList.length > 0){
+            _this.buttonShow = false
+          }else{
+            _this.buttonShow = true
+          }
+        }
+      },
+      open(url){
+        window.open(url)
+      },
+      fileClick() {
+        const _this = this;
+        if(!_this.disabled){
+          _this.$refs.uploadFile.click()          
+        }
+      },
+      fileChange(el) {
+        if(el.target.files[0]){
+          let fileArr = el.target.files[0].name.split(".");
+          let suffix = fileArr[fileArr.length - 1];
+          if (!/(png|jpg|jpeg|bmp)/i.test(suffix)) {
+            Message({
+                type: 'warning',
+                message: "请上传 png/jpg/jpeg/bmp 格式的图片"
+            });
+            return false;
+          }
+          this.handlerFile(el.target);
+          el.target.value = ''
+        }
+      },
+      handlerFile(fileList) {
+        const _this = this
+        let files = fileList.files;
+        _this.uploadBefore()
+        for (let i = 0; i < files.length; i++) {
+          if (files[i].type != '') {
+            if(files[i].size > _this.maximum){
+              Message({
+                  type: 'warning',
+                  message: `上传文件不得超过${_this.bytesToSize(_this.maximum)}！`
+              });
+              return;  
+            }
+            var formData=new FormData(); 
+            formData.append("file" , files[i]);
+            for (const key in _this.parame) {
+              if (_this.parame.hasOwnProperty(key)) {
+                formData.append(key ,_this.parame[key]);
+              }
+            }
+            let config = {
+              headers: {
+                'Content-Type': 'multipart/form-data',
+              }
+            }
+            axios.post(this.uploadUrl, formData, config).then(function (res) {
+            	  console.log(formData)
+                _this.onSuccess(res)
+            },function (res) {
+                _this.onError(files[i])
+            })
+          }
+        }
+      },
+      fileDel(item){
+        const _this = this;
+        _this.onRemove(item)
+      },
+      bytesToSize(bytes) {
+        if (bytes === 0) return '0 B';
+        let k = 1000, // or 1024
+          sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
+          i = Math.floor(Math.log(bytes) / Math.log(k));
+        return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i];
+      },
+    }
+  }
+</script>
+<style scoped lang="scss">
+  .upload_warp_img_div_del {
+    color: #48576a;
+  }
+  .upload_box .upload_warp_img .upload_warp_img_div .img_title{
+    margin-top: 15px;
+    width: 120px;
+    height:18px;
+    text-align: center;
+    overflow:hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    -o-text-overflow:ellipsis;
+  }
+  .upload_warp_img_div .item.el-tooltip.tiele{
+    display: inline-block;
+    width: 80px;
+    overflow: hidden;
+  }
+  .upload_warp_img_div_top {
+    position: absolute;
+    display: none;
+    top: 2px;
+    right: 2px;
+    font-size: 12px;
+    text-indent: 4px;
+  }
+  .upload_warp_img_div_text {
+    white-space: nowrap;
+    width: 80%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .upload_warp_img_div .list-img {
+    width: 100px;
+    height: 95px;
+    vertical-align: middle;
+    // border: 1px solid #c0ccda;
+  }
+  .upload_warp_img_div {
+    position: relative;
+    height: 120px;
+    width: 120px;
+    margin-left: 5px;
+    margin-right: 5px;
+    margin-top: 20px;
+    border: 1px solid rgb(192, 204, 218);
+    float: left;
+    padding: 12px 12px 100px 8px;
+    border-radius: 6px;
+    background-color: #fff;
+    box-sizing: border-box;
+    cursor: pointer;
+  }
+  .upload_warp_img_div:hover .upload_warp_img_div_top{
+    display: block;
+  }
+  .upload_warp_text {
+    text-align: left;
+    margin-bottom: 10px;
+    padding-top: 10px;
+    text-indent: 14px;
+    border-top: 1px solid #ccc;
+    font-size: 14px;
+  }
+  .upload_warp_left {
+    border-radius: 4px;
+    margin-top: 6px; 
+    cursor: pointer;
+    .item_title {
+      width: 120px;
+      overflow: hidden;
+      text-align: center;
+      height:18px;
+      white-space:nowrap; 
+      overflow:hidden; 
+      text-overflow:ellipsis;
+    }
+  }
+  .upload_warp_left .el-upload.el-upload--picture-card{
+    width: 110px;
+    height: 110px;
+    line-height: 110px;
+  }
+  .upload_warp {
+    float: left;
+    margin-left: 10px;
+    margin-top: 10px;   
+    margin-right: 10px;   
+    padding: 0 6px 0 6px; 
+    position: relative;
+    min-height: 90px;
+  }
+  .upload_box {
+    /* border: 1px solid #ccc;
+    background-color: #fff;
+    box-shadow: 0px 1px 0px #ccc;
+    border-radius: 4px;
+    display: inline-block; */
+  }
+  .upload_warp_img{
+    padding-bottom: 10px; 
+  }
+</style>

package/src/components/list-btn-group/list-btn-group.vue

@@ -0,0 +1,205 @@
+<template>
+<div class="row">
+    <div class="col-md-12">
+        <b-button 
+            v-if="showInsert"
+            :disabled="disabledInsert"
+            :size="insertOptions.size" 
+            :variant="insertOptions.variant" 
+            @click="insertClick">{{insertOptions.name}}</b-button>
+        <b-button 
+            v-if="showUpdate"
+            :disabled="disabledUpdate"
+            :size="updateOptions.size" 
+            :variant="updateOptions.variant" 
+            @click="updateClick">{{updateOptions.name}}</b-button>
+               <b-button 
+            v-if="showDel"
+            :size="delOptions.size" 
+            :variant="delOptions.variant" 
+            @click="delClick">{{delOptions.name}}</b-button>
+              <b-button 
+            v-if="showConfig"
+            :size="configOptions.size" 
+            :variant="configOptions.variant" 
+            @click="configClick">{{configOptions.name}}</b-button>
+              <b-button 
+            v-if="showImport"
+            :size="importOptions.size" 
+            :variant="importOptions.variant" 
+            @click="importClick">{{importOptions.name}}</b-button>
+               <b-button 
+            v-if="showCar"
+            :size="carOptions.size" 
+            :variant="carOptions.variant" 
+            @click="carClick">{{carOptions.name}}</b-button>
+        <b-button 
+            v-if="showInit"
+            :disabled="disabledInit"
+            :size="initOptions.size" 
+            :variant="initOptions.variant" 
+            class="pull-right" 
+            @click="initClick">{{initOptions.name}}</b-button>
+            <b-button 
+            v-if="showBtn"
+            :size="initMenus.size" 
+            :variant="initMenus.variant" 
+            class="pull-right"
+            style="margin-right:10px" 
+            @click="initClickMenu">{{initMenus.name}}</b-button>
+    </div>
+</div>
+</template>
+<script>
+const insertOptions = {
+    size: 'sm',
+    variant: 'success', 
+    name: '新增',
+    // show: true        
+}
+const updateOptions = {
+    size: 'sm',
+    variant: 'primary', 
+    name: '编辑',
+    // show: true        
+}
+const initMenus = {
+    size: 'sm',
+    variant: 'warning', 
+    name: '同步菜单',
+    // show: true        
+}
+const initOptions = {
+    size: 'sm',
+    variant: 'warning', 
+    name: '同步数据',
+    // show: true        
+}
+const delOptions = {
+    size: 'sm',
+    variant: 'danger',
+    name: '删除'
+}
+const configOptions = {
+    size: 'sm',
+    variant: 'primary',
+    name: '经销商费率配置'
+}
+const importOptions = {
+    size: 'sm',
+    variant: 'primary',
+    name: '导入'
+}
+const carOptions = {
+    size: 'sm',
+    variant: 'primary',
+    name: '车型库导出'
+}
+export default {
+    props: {
+        insertOptions: {
+            type: Object,
+            default: () => insertOptions
+        },
+        updateOptions: {
+            type: Object,
+            default: () => updateOptions
+        },
+        initMenus: {
+            type: Object,
+            default: () => initMenus
+        },
+        initOptions: {
+            type: Object,
+            default: () => initOptions
+        },
+        delOptions: {
+            type: Object,
+            default: () => delOptions
+        },
+        configOptions: {
+            type: Object,
+            default: () => configOptions
+        },
+        importOptions: {
+            type: Object,
+            default: () => importOptions
+        },
+             carOptions: {
+            type: Object,
+            default: () => carOptions
+        },
+        showInsert: {
+            type: [Boolean], 
+            default: true,
+        },
+        showUpdate: {
+            type: [Boolean], 
+            default: true,
+        },
+        showInit: {
+            type: [Boolean], 
+            default: true,
+        },
+        showBtn: {
+            type: [Boolean], 
+            default: false,
+        },
+        disabledInsert: {
+            type: [Boolean], 
+            default: false,
+        },
+        disabledUpdate: {
+            type: [Boolean], 
+            default: false,
+        },
+        disabledInit: {
+            type: [Boolean], 
+            default: false,
+        },
+        showDel: {
+            type: [Boolean],
+            default: true
+        },
+        showConfig: {
+            type: [Boolean],
+            default: false
+        },
+        showImport: {
+            type: [Boolean],
+            default: false
+        },
+        showCar: {
+            type: [Boolean],
+            default: false
+        }
+    },
+    methods: {
+        insertClick() {
+            this.$emit('insert')
+        },
+        updateClick() {
+            this.$emit('update')
+        },
+        initClick() {
+            this.$emit('init')
+        },
+        initClickMenu() {
+            this.$emit('initMenu')
+        },
+        delClick() {
+            this.$emit('del')
+        },
+        configClick() {
+            this.$emit('config')
+        },
+        importClick() {
+            this.$emit('import')
+        },
+        carClick() {
+            this.$emit('carImport')
+        }
+    },
+}
+</script>
+

package/src/components/lsh-customer/dialog.vue

@@ -0,0 +1,66 @@
+<!--
+ * @Author: luwenxiang
+ * @Date: 2020-05-27 17:10:35
+ * @LastEditors: luwenxiang
+ * @LastEditTime: 2020-05-27 17:36:52
+ * @Description: 人车组件二次包装 （ dialog ）
+ * @FilePath: /livecs/src/components/lsh-customer/dialog.vue
+-->
+
+<template>
+	<el-dialog
+		title="客户主档"
+		no-close-on-backdrop
+		size="large" :before-close="hide"
+		:visible.sync="visible"
+		:modal-append-to-body="false">
+		<customer-vehicle :phoneNo="phoneNo" ref="vehicle" @comfirm="handleConfirm" @handleCancel="handleCancel" />
+	</el-dialog>
+</template>
+<script>
+
+import Vue from 'vue'
+import { Dialog } from 'element-ui'
+import CustomerVehicle from './index'
+Vue.use(Dialog)
+
+export default {
+	props: {
+		// 取消事件是否交由外部处理
+		cancel: {
+			type: Boolean,
+			default: false
+		}
+	},
+	components: {
+		CustomerVehicle
+	},
+    data() {
+        return {
+			visible: false,
+			phoneNo: null
+        }
+    },
+    methods: {
+		show({ mobilePhone }) {
+			console.log('test:>show', mobilePhone)
+			this.phoneNo = +mobilePhone
+			this.visible = true
+		},
+		hide() {
+			this.visible = false
+			this.phoneNo = null
+			this.$refs.vehicle.handleReset()
+		},
+		handleConfirm(info) {
+			this.$emit('handleConfirm', info)
+			this.hide()
+		},
+		handleCancel() {
+			this.cancel && this.$emit('handleCancel')
+			!this.cancel && this.hide()
+		}
+    }
+}
+</script>
+