lshcomment 1.0.0

package/src/components/iris-ticket-modal/index.vue

@@ -0,0 +1,355 @@
+<template>
+    <div class="ticket-select-modal">
+        <b-modal id="modalPrevent"
+                ref="ticketModal"
+                title="券信息"
+                size="lg"
+                :hide-footer="true">
+                <div class="row card-select-modal-search">
+                    <div class="col-md-4 col-lg-4">
+                        <b-form-input placeholder="请输入券号" v-model="searchValue"/>
+                    </div>
+                    <!-- <div class="col-md-2 col-lg-2">
+                        <div class="pull-left">
+                            <b-button size="sm" variant="primary" @click="search">确定</b-button>
+                        </div>
+                    </div> -->
+                </div>
+                <div class="ticket-select-layout">
+                    <div class="table-scrollable" v-if="isShowChoose">
+                        <b-table striped hover bordered show-empty :items="mainlist" :fields="fields">
+                            <template slot="index" slot-scope="row">
+                                <div>
+                                    <input type="radio" name="selected" :value="row.item" v-model="selectObj"/>
+                                </div>
+                            </template>
+                            <template slot="show_details" slot-scope="row">
+                                <a @click.stop="queryDetailList(row)">{{ row.item.couponNo }}</a> 
+                            </template>
+                            <template slot="row-details" slot-scope="row">
+                                <div class="tableIntable">
+                                    <b-table show-empty :items="row.item.detailList" :fields="fields_detail">
+                                        <template slot="index" slot-scope="data">
+                                            {{ data.index + 1 }}
+                                        </template>
+                                        <template slot="empty">
+                                            暂无数据
+                                        </template>
+                                    </b-table>
+                                </div> 
+                            </template>
+                            <template slot="empty">
+                                暂无数据
+                            </template>
+                        </b-table>
+                    </div>
+                    <div class="table-scrollable" v-if="!isShowChoose">
+                        <b-table striped hover bordered show-empty :items="mainlist" :fields="showFields">
+                            <template slot="show_details" slot-scope="row">
+                                <a @click.stop="queryDetailList(row)">{{ row.item.couponNo }}</a> 
+                            </template>
+                            <template slot="row-details" slot-scope="row">
+                                <div class="tableIntable">
+                                    <b-table show-empty :items="row.item.detailList" :fields="fields_detail">
+                                        <template slot="index" slot-scope="data">
+                                            {{ data.index + 1 }}
+                                        </template>
+                                        <template slot="empty">
+                                            暂无数据
+                                        </template>
+                                    </b-table>
+                                </div> 
+                            </template>
+                            <template slot="empty">
+                                暂无数据
+                            </template>
+                        </b-table>
+                    </div>
+                    <div v-if="isShowTips" class="ticket-warning-tips">
+                        <span></span>警示: 本券包含多个服务,仅用于洗车将作废其他服务项目,请确认！
+                    </div>
+                    <div class="ticket-select-right-detail-button" v-if="isShowChoose" @click="useNow">
+                        立即使用
+                    </div>
+                </div>
+                
+        </b-modal>
+    </div>
+</template>
+<script>
+    import api from 'common/api'
+    import { Message, MessageBox } from 'element-ui'
+    export default {
+        props: {
+            acceptObj: {
+                type: Object,
+                default: function() {
+                    return {}
+                }
+            },
+            isShowChoose: {
+                type: Boolean,
+                default: true
+            }
+        },
+        data() {
+            return {
+                isShowTips: false,
+                selectObj: '',
+                searchValue: '',
+                detaillist: [],
+                mainlist: [],
+                fields: {
+                    index: {
+                        label: '选择'
+                    },
+                    show_details: {
+                        label: '券号'
+                    },
+                    couponName: {
+                        label: '券名称'
+                    },
+                    couponTypeName: {
+                        label: '券类型'
+                    },
+                    endDateStr: {
+                        label: '截止时间'
+                    },
+                    availableDays: {
+                        label: '剩余天数'
+                    }
+                },
+                showFields: {
+                    show_details: {
+                        label: '券号'
+                    },
+                    couponName: {
+                        label: '券名称'
+                    },
+                    couponTypeName: {
+                        label: '券类型'
+                    },
+                    endDateStr: {
+                        label: '截止时间'
+                    },
+                    availableDays: {
+                        label: '剩余天数'
+                    }
+                },
+                fields_detail: {
+                    detailName: {
+                        label: '服务'
+                    },
+                    detailNums: {
+                        label: '次数'
+                    },
+                    discountValue: {
+                        label: '折扣'
+                    }
+                }
+            }
+        },
+        methods: {
+            search() {
+                if(!this.searchValue) {
+                    // Message({
+                    //     type: 'warning',
+                    //     message: '请输入券号'
+                    // })
+                    // return
+                    // this.getFirstData()
+                }else {
+                    let option = {
+                        couponNo: this.searchValue
+                    }   
+                    this.mainlist = []
+                    this.selectObj = ''
+                    api.ticketManage.getCouponInfoByCode(option, res => {
+                        if(res.data.code === 'success') {
+                            this.mainlist.push(res.data.obj)
+                        }
+                    })
+                }
+                
+            },
+            useNow() {
+                if(!this.selectObj) {
+                    Message({
+                        type: 'warning',
+                        message: '请选择要使用的券'
+                    })
+                    return
+                }
+                this.$emit('use', this.selectObj)
+                this.reset()
+                this.hideTicketModal()
+            },
+            queryDetailList(value) {
+                value.toggleDetails()
+                if(value.detailsShowing) {
+                    
+                }else { 
+                    let option = {
+                        couponNo: value.item.couponNo
+                    }
+                    api.ticketManage.getCouponInfoByCode(option, res => {
+                        if(res.data.code === 'success') {
+                            // console.log(value)
+                            let currentIndex = value.index
+                            for(let i = 0; i< this.mainlist.length; i++) {
+                                if(i === currentIndex) {
+                                    this.mainlist[currentIndex].detailList = res.data.obj.couponDetailInfoVos
+                                }
+                            }
+                            this.mainlist[currentIndex] = JSON.parse(JSON.stringify(this.mainlist[currentIndex]))
+                            this.mainlist = JSON.parse(JSON.stringify(this.mainlist))
+                        }
+                    })
+                }
+            },
+            reset() {
+                this.searchValue = ''
+                this.selectObj = ''
+                this.mainlist = []
+            },
+            showTicketModal() {
+                this.reset()
+                this.$refs.ticketModal.show()
+            },
+            getFirstData(params) {
+                // let option = {
+                    // storeCode: 'STORE2000905',
+                    // customCode: 'CUSTOM2004669',
+                    // vehicleCode: 'CV20180529000140',
+                    // detailCodes: []
+                // }
+                // let option = {
+                //     storeCode: this.acceptObj.storeCode,
+                //     customCode: this.acceptObj.customCode,
+                //     vehicleCode: this.acceptObj.vehicleCode,
+                //     detailCodes: this.acceptObj.detailCodes
+                // }
+
+                // add by lwx on 2018/07/10
+                api.ticketManage.getCouponListByCustomer(params, res => {
+                    if(res.data.code === 'success') {
+                        this.mainlist = res.data.obj
+                        if(this.isShowChoose) {
+                            let params = {
+                                custCode: this.acceptObj.customCode
+                                // custCode: 'CUSTOM2004669'
+                            }
+                            api.ticketManage.queryOrderServiceCouponInfo(params, res => {
+                                if(res.data.code === 'success') {
+                                    let judgeObj = res.data.obj
+                                    for(let i = 0; i< this.mainlist.length; i++) {
+                                        if(judgeObj[this.mainlist[i].couponNo]) {
+                                            this.mainlist.splice(i, 1)
+                                            i--
+                                        }
+                                    }
+                                }
+                            })
+                        }else {
+
+                        }  
+                    }
+                })
+            },
+            hideTicketModal() {
+                this.$refs.ticketModal.hide()
+            }
+        },
+        watch: {
+            selectObj: function(value) {
+                if(!value) {
+                    this.isShowTips = false
+                }else {
+                    this.isShowTips = true
+                }
+            },
+            searchValue: function(value) {
+
+            }
+        }
+    }
+</script>
+<style>
+    .ticket-select-layout table a {
+        cursor: pointer;
+    }
+    .ticket-select-layout table td .tableIntable {
+        width: 50%;
+        margin: 0 auto;
+    }
+    .ticket-select-layout table td .tableIntable table th {
+        color: rgb(102, 126, 233);
+        border: none;
+    }
+    .ticket-select-layout table td .tableIntable table td {
+        border: none;
+    }
+    .ticket-select-layout table .b-table-details:hover {
+        background-color: #fff;
+    }
+    .ticket-select-layout table td .tableIntable table tr {
+        background-color: #fff !important;
+    }
+    /* .ticket-select-layout table td .tableIntable table tbody tr {
+        background-color: #fff;
+    } */
+    .ticket-select-layout table td .tableIntable table tr:hover {
+        background-color: #fff;
+    }
+    .ticket-select-layout table td .tableIntable table {
+        border: none;
+    }
+    .ticket-warning-tips {
+        margin-top: 10px;
+        display: inline-block;
+        color: rgb(170, 32, 32);
+        padding: 5px;
+        background-color: rgb(138, 127, 127);
+    }
+    .ticket-warning-tips>span:first-child {
+        display: inline-block;
+        height: 15px;
+        width: 15px;
+        background-image: url(../../../static/image/warning.png);
+        background-size: 15px 15px;
+        background-position: bottom center;
+        vertical-align: middle;
+    }
+    .ticket-select-modal .modal-body {
+        padding-top: 0px;
+    }
+    .ticket-select-modal header {
+        border-bottom: none;
+    }
+    .ticket-select-modal header h5 {
+        padding-bottom: 5px;
+        border-bottom: 2px solid rgb(228, 96, 96);
+    }
+    .ticket-select-layout {
+        padding-bottom: 40px;
+        position: relative;
+    }
+    .card-select-modal-search {
+        margin-bottom: 10px;
+    }
+    .ticket-select-right-detail-button {
+        position: absolute;
+        right: 5%;
+        bottom: 5px;
+        height: 30px;
+        line-height: 30px;
+        width: 15%;
+        font-size: 18px;
+        text-align: center;
+        border-radius: 5px;
+        border: 1px solid #ccc;
+        margin: 0 auto;
+        cursor: pointer;
+    }
+</style>
+

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

@@ -0,0 +1,217 @@
+<template>
+        <div class="text-left inblock">
+            <div>
+                <el-upload
+                    class="upload-demo"
+                    :before-upload="beforeUpload"
+                    :action="uploadUrl"
+                    :data = 'addParams'
+                    :show-file-list = 'false'
+                    :on-progress = 'loading'
+                    :on-success="handleSuccess"
+                    :on-error="handleErr"
+                    :disabled="disabled"
+                    >
+                    <b-button size="sm" :variant="variant">{{ buttonName }}</b-button>
+                </el-upload>
+            </div>
+            <div :class="{'cover': proshow}">
+                <div class="loading"  v-if="loading2">
+                    <div v-loading="loading2" element-loading-text="解析中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" style="width: 100%"></div>
+                </div>
+            </div> 
+        </div>
+</template>
+
+<script>
+import api from "../../common/api";
+import config from "../../common/config";
+import Vue from "vue";
+import { Upload, Button, Progress, Loading, Message } from "element-ui";
+Vue.use(Upload);
+Vue.use(Button);
+// Vue.use(Progress)
+Vue.use(Loading);
+export default {
+  props: {
+    variant:{
+      type: String,
+      default: "success"
+    },
+    addParams: {
+      type: Object,
+      default: function() {
+        return {};
+      }
+    },
+    buttonName: {
+      type: String,
+      default: ""
+    },
+    analysisExcel: {
+      type: Function,
+      default: function() {}
+    },
+    url: {
+      type: String,
+      default: ""
+    },
+    messageTip: {
+      type: String,
+      default: "上传成功"
+    },
+    showBack: {
+      type: Object,
+      default: function() {
+        return {};
+      }
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    theEcho: {
+      type: Function,
+      default: function() {}
+    },
+    validate: {
+      type: Function,
+      default: function() {
+        return true;
+      }
+    },
+    beforeUpload:{
+      type:Function,
+      default: function(){
+        return true;
+      }
+    }
+  },
+  data() {
+    return {
+      showMadel: false,
+      imgPath: "",
+      showImg: false,
+      imageName: "",
+      analysisExcelprops: {},
+      uploadUrl: config.uploadUrl,
+      proshow: false,
+      schedule: "",
+      loading2: false
+    };
+  },
+  methods: {
+    showMadelImg: function() {
+      this.showMadel = true;
+    },
+    loading: function() {
+      // this.proshow = true
+      for (let i = 0; i < 50; i++) {
+        this.schedule = i++;
+      }
+    },
+    handleSuccess(file, fileList) {
+      const $this = this;
+      // $this.imageName = fileList.name
+      // $this.imgPath = config.serviceId + file.obj[0].filePath
+      // $this.showImg = true
+      let fileName = fileList.name;
+      let filepath = config.serviceId + file.obj[0].filePath;
+      for (let i = 50; i < 50; i++) {
+        $this.schedule = i++;
+      }
+      this.theEcho(fileName, filepath);
+      Message({
+        type: "success",
+        message: this.messageTip
+      });
+      if ($this.url != "") {
+        $this.loading2 = true;
+        this.analysisExcelprops = this.showBack;
+        this.analysisExcelprops.fileName = file.obj[0].fileName;
+        if (this.validate && this.validate()) {
+          api.analysisExcel
+            .methods(this.analysisExcelprops, $this.url)
+            .then(res => {
+              this.proshow = false;
+              this.loading2 = false;
+              if (res.data.code == "success") {
+                $this.analysisExcel(res);
+                Message({
+                  type: "success",
+                  message: "解析成功"
+                });
+              }else {
+                $this.$emit('error-event', res)
+              }
+            });
+        } else {
+          Message({
+            type: "error",
+            message: "解析参数不全"
+          });
+          this.loading2 = false;
+          this.proshow = false;
+        }
+      } else {
+        this.proshow = false;
+      }
+    },
+    handleErr(file) {
+      Message({
+        type: "error",
+        Message: "上传失败"
+      });
+    }
+  }
+};
+</script>
+<style>
+.inblock{
+	display: inline-block;
+}
+.img-name {
+  /* background: red; */
+}
+.upload {
+  /* display: inline */
+  /* position: fixed;
+        top: 0;
+        left: 0;
+        height: 100%;
+        width: 100%;
+        background-color: rgba(0,0,0,.5);
+        z-index: 9999; */
+}
+.imgModal {
+  position: fixed;
+  left: 0;
+  top: 0;
+  height: 50%;
+  width: 50%;
+  /* background-color: rgba(0,0,0,.5); */
+  z-index: 99999;
+}
+.cover {
+  position: fixed;
+  left: 0;
+  top: 0;
+  height: 100%;
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 9999;
+}
+.loading {
+  position: fixed;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+}
+.loading > div {
+  position: absolute !important;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+</style>