askbot-dragon 1.7.0-beta → 1.7.11-beta

package/src/components/message/TextMessage.vue

@@ -1,929 +1,929 @@
-<!-- 消息记录容器 -->
-<template>
-  <div class="media-body">
-   <div class="textMessage" id="textMessage" :class="{remPhoneClass:isPhone,remCompanyClass:isCompany}">
-    <div style="display: flex;height: auto;line-height: 2;" @mousemove="clickClick" class="htmlClass">
-      <div v-html="text.template" id="html" :class="{notClickClass:disableds === true}">
-        {{text.template}}
-      </div>
-    </div>
-    <div   id="submit">
-      <el-button  plain size="small" @click="submitClick" :disabled="disableds" >{{submitValue}}</el-button>
-    </div>
-    <div v-if="isCompany">
-      <div v-if="single === true"  class="editMessage">
-        <el-input v-model="input" :placeholder="$t('common.inputPlaceholder')"  class="inputClass" @input="testClick" @blur="inputBlur"></el-input>
-      <!--  <span @click="quedingClick" style="display: flex;align-items: center"><i class="el-icon-success" style="color: #4C61E1;font-size: 32px;cursor: pointer"></i></span>
-     --> </div>
-      <div v-if="date" class="editMessage">
-        <el-date-picker
-            v-model="dateValue"
-            type="date"
-            :placeholder="$t('common.selectDate')"
-            style="width: 100%;margin: 10px 0 10px 0"
-            :clearable=false
-            @change="dataclick"
-
-        >
-        </el-date-picker>
-       <!-- <span @click="quedingClick" style="display: flex;align-items: center"><i class="el-icon-success" style="color: #4C61E1;font-size: 32px;cursor: pointer"></i></span>
-   -->   </div>
-      <div v-if="time"  class="editMessage">
-        <el-time-picker
-            v-model="timeValue"
-            :placeholder="$t('common.selectTime')"
-            style="margin: 10px 0 10px 0;width: 100%"
-            :clearable=false
-            @change="dataclick"
-        >
-        </el-time-picker>
-       <!-- <span @click="quedingClick" style="display: flex;align-items: center"><i class="el-icon-success" style="color: #4C61E1;font-size: 32px;cursor: pointer"></i></span>
-    -->  </div>
-      <div v-if="dateTime" class="editMessage">
-        <el-date-picker
-            v-model="dateTimeValue"
-            type="datetime"
-            :placeholder="$t('common.selectDateTime')"
-            style="width: 100%;margin: 10px 0 10px 0"
-            @change="dataclick"
-        >
-        </el-date-picker>
-     <!--   <span @click="quedingClick(bianliangId)" style="display:flex;align-items:center;"><i class="el-icon-success" style="color: #4C61E1;font-size: 32px;cursor: pointer"></i></span>
-     --> </div>
-      <!--<div v-if="dateRange" style="border-top: 1px dashed #ebebeb;">
-        <el-date-picker
-            v-model="dateRangeValue"
-            type="daterange"
-            range-separator="至"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"
-            style="margin: 10px 16px;width: 80%"
-        >
-        </el-date-picker>
-        <span @click="quedingClick(bianliangId)" ><i class="el-icon-success" style="color: #409eff;font-size: 32px;text-align: center;vertical-align: middle;cursor: pointer"></i></span>
-      </div>
-      <div v-if="timeRange" style="border-top: 1px dashed #ebebeb;">
-        <el-time-picker
-            is-range
-            v-model="timeRangeValue"
-            range-separator="至"
-            start-placeholder="开始时间"
-            end-placeholder="结束时间"
-            placeholder="选择时间范围"
-            style="margin: 10px 16px;width: 80%"
-        >
-        </el-time-picker>
-        <span @click="quedingClick(bianliangId)" ><i class="el-icon-success" style="color: #409eff;font-size: 32px;text-align: center;vertical-align: middle;cursor: pointer"></i></span>
-
-      </div>
-      <div v-if="dateTimeRange" style="border-top: 1px dashed #ebebeb;">
-        <el-date-picker
-            v-model="dateTimeValue"
-            type="datetimerange"
-            range-separator="至"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"
-            style="width: 80%;margin: 10px 16px"
-
-        >
-        </el-date-picker>
-        <span @click="quedingClick(bianliangId)" ><i class="el-icon-success" style="color: #409eff;font-size: 32px;text-align: center;vertical-align: middle;cursor: pointer"></i></span>
-      </div>-->
-    </div>
-    <div v-if="isPhone">
-      <div v-if="single"  class="editMessage">
-        <el-input v-model="input" :placeholder="$t('common.inputPlaceholder')" class="inputClass" @input="testClick" @blur="inputBlur"></el-input>
-       <!-- <span @click="quedingClick" style="display: flex;align-items: center"><i class="el-icon-success" style="color: #4C61E1;font-size: 32px;cursor: pointer"></i></span>
-     --> </div>
-      <div v-if="date">
-        <van-calendar v-model="show" @confirm="onConfirm" :default-date="defaultDate"/>
-       <!-- <el-date-picker
-            v-model="dateValue"
-            type="date"
-            placeholder="选择日期"
-            style="width: 80%;margin: 10px 10px 10px 0"
-            :editable=false
-        >
-        </el-date-picker>
-        <span @click="quedingClick" style="display: flex;align-items: center"><i class="el-icon-success" style="color: #4C61E1;font-size: 32px;cursor: pointer"></i></span>
-      --></div>
-
-      <div v-if="time">
-        <van-popup v-model="showTimePicker" position="bottom">
-          <van-datetime-picker
-              v-model="timeValue"
-              type="datetime"
-              :title="$t('common.selectTime')"
-              :min-date="minDate"
-              :formatter="formatter"
-              @cancel="showTimePicker = false"
-              @confirm="onConfirmTime"
-          />
-        </van-popup>
-      <!--  <el-time-picker
-            v-model="timeValue"
-            placeholder="任意时间点"
-            style="margin: 10px 10px 10px 0;width: 80%"
-            :editable=false
-        >
-        </el-time-picker>
-        <span @click="quedingClick" style="display: flex;align-items: center"><i class="el-icon-success" style="color: #4C61E1;font-size: 32px;cursor: pointer"></i></span>
-     --> </div>
-      <div v-if="dateTime">
-        <van-popup v-model="showDateTimePicker" position="bottom">
-        <van-datetime-picker
-            v-model="dateTimeValue"
-            type="datetime"
-            :title="$t('common.selectDateTime')"
-            :min-date="minDate"
-            :formatter="formatter"
-            @cancel="showDateTimePicker = false"
-            @confirm="onConfirmDateTime"
-        />
-        </van-popup>
-      <!--  <el-date-picker
-            v-model="dateTimeValue"
-            type="datetime"
-            placeholder="选择日期时间"
-            style="width: 80%;margin: 10px 10px 10px 0"
-            :editable=false
-
-        >
-        </el-date-picker>
-        <span @click="quedingClick(bianliangId)" style="display: flex;align-items: center"><i class="el-icon-success" style="color: #4C61E1;font-size: 32px;cursor: pointer"></i></span>
-      --></div>
-     <!-- <div v-if="dateRange" style="border-top: 1px dashed #ebebeb;display: flex">
-        &lt;!&ndash;<el-date-picker
-            v-model="dateRangeValue"
-            type="daterange"
-            range-separator="至"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"
-            style="margin: 10px 16px;width: 80%"
-            :editable=false
-
-        >
-        </el-date-picker>&ndash;&gt;
-        <div style="width: 90%">
-          <van-cell title="选择日期区间" :value="dateRangeValue" @click="show = true" />
-          <van-calendar v-model="show" type="range" @confirm="onConfirm" />
-        </div>
-        <span @click="quedingClick(bianliangId)" ><i class="el-icon-success" style="color: #409eff;font-size: 32px;text-align: center;vertical-align: middle;cursor: pointer"></i></span>
-
-
-
-      </div>
-      <div v-if="timeRange" style="border-top: 1px dashed #ebebeb;">
-        <el-time-picker
-            is-range
-            v-model="timeRangeValue"
-            range-separator="至"
-            start-placeholder="开始时间"
-            end-placeholder="结束时间"
-            placeholder="选择时间范围"
-            style="margin: 10px 16px;width: 80%"
-
-            :editable=false
-        >
-        </el-time-picker>
-        <span @click="quedingClick(bianliangId)" ><i class="el-icon-success" style="color: #409eff;font-size: 32px;text-align: center;vertical-align: middle;cursor: pointer"></i></span>
-
-      </div>
-      <div v-if="dateTimeRange" style="border-top: 1px dashed #ebebeb;display: flex">
-        &lt;!&ndash; <el-date-picker
-             v-model="dateTimeValue"
-             type="datetimerange"
-             range-separator="至"
-             start-placeholder="开始日期"
-             end-placeholder="结束日期"
-             style="width: 80%;margin: 10px 16px"
-             :editable=false
-
-
-         >
-         </el-date-picker>&ndash;&gt;
-        <div style="width: 90%">
-          <van-field
-              readonly
-              clickable
-              name="datetimePicker"
-              :value=dateTimeValue[0]
-              label='选择时间'
-              placeholder="点击选择开始日期时间"
-              @click="showDateTimePicker=true"
-          />
-          <van-popup v-model="showDateTimePicker" position="bottom">
-            <van-datetime-picker
-                v-model="currentDate"
-                type="datetime"
-                title="选择开始日期时间"
-                @confirm="onConfirmDateTime($event)"
-                @cancel="showDateTimePicker = false"
-                :min-date="minDate"
-                :formatter="formatter"
-            />
-          </van-popup>
-          <van-field
-              readonly
-              clickable
-              name="datetimePicker"
-              :value=dateTimeValue1[0]
-              label=" "
-              placeholder="点击选择结束日期时间"
-              @click="showDateTimePicker1=true"
-          />
-          <van-popup v-model="showDateTimePicker1" position="bottom">
-            <van-datetime-picker
-                v-model="currentDate"
-                type="datetime"
-                title="选择结束日期时间"
-                @confirm="onConfirmDateTime1($event)"
-                @cancel="showDateTimePicker1 = false"
-                :min-date="minDate"
-                :formatter="formatter"
-            />
-          </van-popup>
-        </div>
-
-        <span @click="quedingClick(bianliangId)" ><i class="el-icon-success" style="color: #409eff;font-size: 32px;text-align: center;vertical-align: middle;cursor: pointer"></i></span>
-      </div>-->
-    </div>
-  </div>
-  </div>
-</template>
-
-<script>
-/*import $ from 'jquery'*/
-export default {
-  name: 'TextMessage',
-  data(){
-    return{
-      show:false,
-      single:false,
-      date:false,
-      time:false,
-      dateTime:false,
-      dateRange:false,
-      timeRange:false,
-      input:'',
-      bianliangId:'',
-      dateValue:'',
-      message:[{content:'王亚欣',type:'SINGLE',value:'',id:1},{content:['2020-11-18T07:25:16.000+0000','2020-11-21T07:25:16.000+0000'],type:'DATE-RANGE',value:'',id:2},{content:'2020-11-18T07:25:16.000+0000',type:'TIME',value:'',id:3},{content:'2020-11-18T07:25:16.000+0000',type:'DATE',value:'',id:4},{content:['2020-11-18T07:25:16.000+0000','2020-11-21T07:25:16.000+0000'],type:'DATERANGE',value:'',id:5},{content:['2020-11-18T08:25:16.000+0000','2020-11-21T07:25:16.000+0000'],type:'TIMERANGE',value:'',id:6},],
-      isPhone:false,
-      isCompany:false,
-      dateTimeValue:'',
-      timeValue:'',
-      dateRangeValue:'',
-      dateRangeValues:'',
-      timeRangeValue:[],
-      dateTimeValue1:[],
-      test:0,
-      currentDate:new Date(),
-      minDate: new Date(2020, 0, 1),
-      showDateTimePicker1:false,
-      showDateTimePicker:false,
-      values:[],
-      checkValue:'',
-      disableds:false,
-      submitValue:'确认',
-      dateInnerText:'',
-      defaultDate:'',
-      showTimePicker:false,
-
-    }
-  },
-  props:{
-    text:{
-      type:Object,
-      default(){
-        return {}
-      }
-    },
-    type:String,
-    disable:Boolean,
-    submit:Boolean,
-    language:{
-      type:String,
-      default:"cn"
-    }
-  },
-  mounted() {
-    this.isMobile()
-    let span=this.$el
-    let defaults=span.getElementsByClassName('ask-component-placeholder-span')
-    for (let i=0;i<defaults.length;i++)
-    {
-      this.values.push({})
-      this.values[i]['key']=defaults[i].getAttribute('data')
-      this.values[i]['value']=defaults[i].innerText
-      this.values[i]['type']=defaults[i].getAttribute('type')
-    }
-    let text=this.$el
-    let test=text.getElementsByClassName('ask-component-placeholder-span')
-    let cpntain=text.getElementsByClassName('ask-component-placeholder-container')
-    let icon=text.getElementsByClassName('arsenalkebianji')
-    for (let i=0;i<icon.length;i++)
-    {
-      icon[i].style.color='#366aff'
-    }
-    for (let i=0;i<cpntain.length;i++)
-    {
-      if(this.type)
-      {
-        cpntain[i].style.paddingRight=0.2+'rem'
-        cpntain[i].style.paddingLeft=0.2+'rem'
-      }
-      else
-      {
-        cpntain[i].style.paddingRight=4+'px'
-        cpntain[i].style.paddingLeft=4+'px'
-      }
-
-    }
-    for (let i=0;i<test.length;i++)
-    {
-      if(test[i].getAttribute('type')==='DATE_PICKER')
-      {
-        let date=Number(test[i].innerText)*1000
-        test[i].innerText=new Date(date).Format("MM-dd")
-      }
-      if(test[i].getAttribute('type')==='TIME_PICKER')
-      {
-        let time=Number(test[i].innerText)*1000
-        test[i].innerText=new Date(time).Format("hh:mm")
-      }
-      if(test[i].getAttribute('type') === 'DATE_TIME_PICKER'){
-        let time=Number(test[i].innerText)*1000
-        test[i].innerText=new Date(time).Format("yyyy-MM-dd hh:mm")
-      }
-    }
-  },
-  beforeMount() {
-    this.$i18n.locale = this.language;
-    if(this.disable===true)
-    {
-      this.disableds=true
-
-    }
-    else
-    {
-      this.disableds=false
-
-    }
-    if(this.submit===true)
-    {
-      this.submitValue=this.$t('common.confirmed')
-    }
-    else
-    {
-      this.submitValue=this.$t('common.confirm')
-    }
-  },
-  methods:{
-    dataclick(){
-      if(this.checkValue.getAttribute('type') === 'DATE_PICKER')
-      {
-        for (let i=0;i<this.values.length;i++)
-        {
-          if(this.values[i].key === this.checkValue.getAttribute('data'))
-          {
-            if(this.dateValue!=='')
-            {
-              this.checkValue.innerText=new Date(this.dateValue).Format('MM-dd')
-              this.values[i].value=new Date(this.dateValue).getTime()
-            }
-            else
-            {
-              this.values[i].value=this.checkValue.innerText
-            }
-          }
-        }
-      }
-      if(this.checkValue.getAttribute('type') === 'TIME_PICKER')
-      {
-        for (let i=0;i<this.values.length;i++)
-        {
-          if(this.values[i].key === this.checkValue.getAttribute('data') )
-          {
-            if(this.timeValue!=='')
-            {
-
-              this.checkValue.innerText=new Date(this.timeValue).Format('hh:mm')
-              this.values[i].value=new Date(this.timeValue).getTime()
-            }
-            else
-            {
-              this.values[i].value=this.checkValue.innerText
-            }
-          }
-        }
-      }
-      if(this.checkValue.getAttribute('type') === 'DATE_TIME_PICKER')
-      {
-        for (let i=0;i<this.values.length;i++)
-        {
-          if(this.values[i].key === this.checkValue.getAttribute('data') )
-          {
-            if(this.dateTimeValue!=='')
-            {
-
-              this.checkValue.innerText=new Date(this.dateTimeValue).Format('yyyy-MM-dd hh:mm')
-              this.values[i].value=new Date(this.dateTimeValue).getTime()
-            }
-            else
-            {
-              this.values[i].value=this.checkValue.innerText
-            }
-          }
-        }
-      }
-    },
-    clickClick(e){
-      if(e.target.onclick!==null)
-      {
-        let that=this
-        window._askEditValue=that._askEditValue;
-      }
-    },
-    _askEditValue(a,b){
-      let type=b.getAttribute('type')
-      this.checkValue=b
-      if(type === 'INPUT')
-      {
-        this.single=true
-        this.date=false
-        this.time=false
-        this.dateTime=false
-        this.input= b.innerText
-      }
-      if(type === 'DATE_PICKER')
-      {
-        this.single=false
-        this.date=true
-        this.time=false
-        this.dateTime=false
-        this.show=true
-        for (let i=0;i<this.values.length;i++)
-        {
-          if(b.getAttribute('data') === this.values[i].key)
-          {
-            if(typeof this.values[i].value == 'string')
-            {
-              this.dateInnerText=Number(this.values[i].value)*1000
-            }
-          else
-            {
-              this.dateInnerText=Number(this.values[i].value)
-            }
-            this.dateValue=new Date(this.dateInnerText).Format("yyyy:MM-dd")
-            this.defaultDate=new Date(this.dateInnerText)
-          }
-          return
-        }
-
-      }
-      if(type === 'TIME_PICKER')
-      {
-        this.single=false
-        this.date=false
-        this.time=true
-        this.dateTime=false
-        this.showTimePicker=true
-        for (let i=0;i<this.values.length;i++)
-        {
-          if(b.getAttribute('data') === this.values[i].key)
-          {
-            let time
-            if(typeof this.values[i].value == 'string'){
-               time=Number(this.values[i].value)*1000
-            }
-          else
-            {
-               time=Number(this.values[i].value)
-            }
-          if(this.isPhone ===true)
-          {
-            this.timeValue=new Date(time)
-          }
-          else
-          {
-            this.timeValue=new Date(time).Format("yyyy-MM-dd hh:mm")
-          }
-          }
-        }
-      }
-      if(type === 'DATE_TIME_PICKER')
-      {
-        this.single=false
-        this.date=false
-        this.time=false
-        this.dateTime=true
-        this.showDateTimePicker=true
-        for (let i=0;i<this.values.length;i++)
-        {
-          if(b.getAttribute('data') === this.values[i].key)
-          {
-            let time
-            if(typeof this.values[i].value == 'string'){
-              time=Number(this.values[i].value)*1000
-            }
-            else
-            {
-              time=Number(this.values[i].value)
-            }
-            if(this.isPhone===true)
-            {
-              this.dateTimeValue=new Date(time)
-            }
-            else
-            {
-              this.dateTimeValue=new Date(time).Format("yyyy-MM-dd hh:mm:ss")
-            }
-          }
-        }
-      }
-
-    },
-    formatter(type, value) {
-      // 格式化选择器日期
-      if (type === "year") {
-        return `${value}年`;
-      } else if (type === "month") {
-        return `${value}月`;
-      } else if (type === "day") {
-        return `${value}日`;
-      } else if (type === "hour") {
-        return `${value}时`;
-      } else if (type === "minute") {
-        return `${value}分`;
-      }
-      return value;
-    },
-    //提交按钮
-    submitClick(){
-      this.single=false
-      this.date=false
-      this.time=false
-      this.dateTime=false
-      let infomation={}
-      let obj = {}
-      this.values.map(item => {
-        obj[item.key] = item
-      })
-      let result = Object.values(obj)
-      let text=this.$el
-      let test=text.getElementsByClassName('ask-component-placeholder-span')
-      for (let i=0;i<test.length;i++)
-      {
-        if(test[i].getAttribute('type')==='DATE_PICKER')
-        {
-          if(test[i].getAttribute('data')===result[i].key)
-          {
-            if(typeof result[i].value =='number'){
-              result[i].value/=1000
-              let resu=String(result[i].value)
-              result[i].value=resu
-            }
-          }
-        }
-        if(test[i].getAttribute('type')==='TIME_PICKER')
-        {
-          if(test[i].getAttribute('data')===result[i].key)
-          {
-            if(typeof result[i].value =='number')
-            {
-              result[i].value/=1000
-              let resu=String(result[i].value)
-              result[i].value=resu
-            }
-          }
-        }
-        if(test[i].getAttribute('type')==='DATE_TIME_PICKER')
-        {
-          if(test[i].getAttribute('data')===result[i].key)
-          {
-            if(typeof result[i].value =='number')
-            {
-              result[i].value/=1000
-              let resu=String(result[i].value)
-              result[i].value=resu
-            }
-          }
-        }
-      }
-      infomation['values']=result
-      infomation['goToAction']=this.text.goToAction
-      let innerhtml=this.$el
-      infomation['template']=innerhtml.querySelector('#html').innerHTML
-        infomation['apiKey']=this.text.apiKey
-      this.$emit('submitClick',infomation,this.text.apiKey)
-      this.submitValue=this.$t('common.confirmed')
-      this.disableds=true
-    },
-    addZero(i){
-      if (i<10) {
-        i="0" + i;
-      }
-      return i;
-    },
-    formatDate(date) {
-      if(typeof date == 'object')
-      {
-          const dateTime = new Date(date[0])
-          const dateTime1=new Date(date[1])
-          return `${dateTime.getMonth() + 1}月${dateTime.getDate()}日 ${this.addZero(dateTime.getHours())} : ${this.addZero(dateTime.getMinutes())} - ${dateTime1.getMonth() + 1}月${dateTime1.getDate()}日 ${this.addZero(dateTime1.getHours())} : ${this.addZero(dateTime1.getMinutes())}`;
-      }
-      else
-      {
-        const dateTime = new Date(date)
-        return `${dateTime.getMonth() + 1}月${dateTime.getDate()}日`;
-      }
-
-    },
-    //格式成时间
-    formatDate1(date){
-      const dateTime = new Date(date)
-      return `${this.addZero(dateTime.getHours())}:${this.addZero(dateTime.getMinutes())}`;
-    },
-    //格式成日期
-    formatDate2(date){
-      const dateTime = new Date(date)
-      return `${dateTime.getMonth() + 1} - ${dateTime.getDate()}`;
-    },
-    //日期范围
-    formatDate3(date){
-      const dateTime = new Date(date[0])
-      const dateTime1=new Date(date[1])
-      return `${dateTime.getMonth() + 1}月 ${dateTime.getDate()}日 - ${dateTime1.getMonth() + 1}月 ${dateTime1.getDate()}日`;
-    },
-    //时间范围
-    formatDate4(date){
-      const dateTime = new Date(date[0])
-      const dateTime1=new Date(date[1])
-      return `${dateTime.getHours()}: ${dateTime.getMinutes()} - ${dateTime1.getHours()}: ${dateTime1.getMinutes()}`;
-    },
-    testClick(value){
-      if(this.checkValue.getAttribute('type') === 'INPUT')
-      {
-        for (let i=0;i<this.values.length;i++)
-        {
-          if(this.values[i].key === this.checkValue.getAttribute('data') )
-          {
-              this.checkValue.innerText=value
-            this.values[i].value=this.checkValue.innerText
-          }
-        }
-      }
-    },
-    inputBlur(){
-      console.debug('inputBlur')
-      this.single=false
-    },
-    quedingClick(){
-      if(this.checkValue.getAttribute('type') === 'INPUT')
-      {
-        for (let i=0;i<this.values.length;i++)
-        {
-          if(this.values[i].key === this.checkValue.getAttribute('data') )
-          {
-            if(this.input!=='')
-            {
-              this.checkValue.innerText=this.input
-            }
-            this.values[i].value=this.checkValue.innerText
-          }
-        }
-        this.single = false
-        this.input=''
-      }
-      if(this.checkValue.getAttribute('type') === 'DATE_PICKER')
-
-      {
-        for (let i=0;i<this.values.length;i++)
-        {
-          if(this.values[i].key === this.checkValue.getAttribute('data'))
-          {
-            if(this.dateValue!=='')
-            {
-              this.checkValue.innerText=new Date(this.dateValue).Format('MM-dd')
-              this.values[i].value=new Date(this.dateValue).getTime()
-            }
-            else
-            {
-              this.values[i].value=this.checkValue.innerText
-            }
-          }
-        }
-        this.date = false
-        this.dateValue=''
-      }
-      if(this.checkValue.getAttribute('type') === 'TIME_PICKER')
-      {
-        for (let i=0;i<this.values.length;i++)
-        {
-          if(this.values[i].key === this.checkValue.getAttribute('data') )
-          {
-            if(this.timeValue!=='')
-            {
-
-              this.checkValue.innerText=new Date(this.timeValue).Format('hh:mm')
-              this.values[i].value=new Date(this.timeValue).getTime()
-            }
-            else
-            {
-              this.values[i].value=this.checkValue.innerText
-            }
-          }
-        }
-        this.time = false
-        this.timeValue=''
-      }
-      if(this.checkValue.getAttribute('type') === 'DATE_TIME_PICKER')
-      {
-        for (let i=0;i<this.values.length;i++)
-        {
-          if(this.values[i].key === this.checkValue.getAttribute('data') )
-          {
-            if(this.dateTimeValue!=='')
-            {
-
-              this.checkValue.innerText=new Date(this.dateTimeValue).Format('yyyy-MM-dd hh:mm')
-              this.values[i].value=new Date(this.dateTimeValue).getTime()
-            }
-            else
-            {
-              this.values[i].value=this.checkValue.innerText
-            }
-          }
-        }
-        this.dateTime = false
-        this.dateTimeValue=''
-      }
-
-    },
-    isMobile() {
-      let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);
-      if (flag) {
-        this.isPhone=true
-      }
-      else
-      {
-        this.isCompany=true
-
-      }
-    },
-    onConfirmDateTime(){
-      if(this.checkValue.getAttribute('type') === 'DATE_TIME_PICKER')
-      {
-        for (let i=0;i<this.values.length;i++)
-        {
-          if(this.values[i].key === this.checkValue.getAttribute('data') )
-          {
-            if(this.dateTimeValue!=='')
-            {
-
-              this.checkValue.innerText=new Date(this.dateTimeValue).Format('yyyy-MM-dd hh:mm')
-              this.values[i].value=new Date(this.dateTimeValue).getTime()
-            }
-            else
-            {
-              this.values[i].value=this.checkValue.innerText
-            }
-          }
-        }
-      }
-    this.showDateTimePicker = false;
-    },
-
-    onConfirm(date) {
-      this.show = false;
-      if(this.checkValue.getAttribute('type') === 'DATE_PICKER')
-
-      {
-        for (let i=0;i<this.values.length;i++)
-        {
-          if(this.values[i].key === this.checkValue.getAttribute('data'))
-          {
-            if(date!=='')
-            {
-              this.checkValue.innerText=new Date(date).Format('MM-dd')
-              this.values[i].value=new Date(date).getTime()
-            }
-            else
-            {
-              this.values[i].value=this.checkValue.innerText
-            }
-          }
-        }
-        this.date = false
-        this.dateValue=''
-      }
-
-    },
-    onConfirmTime(){
-      this.showTimePicker=false
-      if(this.checkValue.getAttribute('type') === 'TIME_PICKER')
-      {
-        for (let i=0;i<this.values.length;i++)
-        {
-          if(this.values[i].key === this.checkValue.getAttribute('data') )
-          {
-            if(this.timeValue!=='')
-            {
-
-              this.checkValue.innerText=new Date(this.timeValue).Format('hh:mm')
-              this.values[i].value=new Date(this.timeValue).getTime()
-            }
-            else
-            {
-              this.values[i].value=this.checkValue.innerText
-            }
-          }
-        }
-      }
-    }
-  }
-}
-</script>
-
-
-<style lang="less">
-@import "../../assets/less/common.css";
-#textMessage{
-  min-width: 200px;
-  .editMessage{
-    display: flex;
-    justify-content: space-between;
-    margin-top: 10px;
-    border-top: 1px dashed #ebebeb;
-  }
-  #submit{
-    margin-top: 10px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    .el-button{
-      border: 1px solid #BBCDFF;
-      border-radius: 14px;
-      background-color: white;
-      color: #366aff;
-      font-weight: 400;
-    }
-    .el-button--small{
-      padding: 9px 30px;
-      font-size: 1em;
-    }
-  }
-  #html{
-    p{
-      color:#A9B3C6;
-    }
-    .ask-component-placeholder-icon{
-      padding-left: 12px;
-      color: #366aff;
-      font-size: 18px;
-    }
-    .ask-component-placeholder-span{
-      color: #616161!important;
-    }
-  }
-}
-.remPhoneClass{
-  margin: 0 auto;
-  /*width: 80vw;*/
-  .inputClass{
-    margin-top: 8px;
-    width: 100%;
-    .el-input__inner{
-      border-radius: 9px;
-    }
-  }
-  .htmlClass{
-    padding: 4px 0;
-  }
-
-}
-.remCompanyClass{
-
-  margin: 0 auto;
-  /*width: 300px;*/
-  .inputClass{
-    padding: 10px 0 10px 0;
-    width: 100%;
-    .el-input__inner{
-      border-radius: 9px;
-    }
-  }
-
-
-}
-.van-cell::after{
-  content: none!important;
-}
-i{
-  cursor: pointer;
-}
-.notClickClass{
-  pointer-events: none;
-}
-</style>
+<!-- 消息记录容器 -->
+<template>
+  <div class="media-body">
+   <div class="textMessage" id="textMessage" :class="{remPhoneClass:isPhone,remCompanyClass:isCompany}">
+    <div style="display: flex;height: auto;line-height: 2;" @mousemove="clickClick" class="htmlClass">
+      <div v-html="text.template" id="html" :class="{notClickClass:disableds === true}">
+        {{text.template}}
+      </div>
+    </div>
+    <div   id="submit">
+      <el-button  plain size="small" @click="submitClick" :disabled="disableds" >{{submitValue}}</el-button>
+    </div>
+    <div v-if="isCompany">
+      <div v-if="single === true"  class="editMessage">
+        <el-input v-model="input" :placeholder="$t('common.inputPlaceholder')"  class="inputClass" @input="testClick" @blur="inputBlur"></el-input>
+      <!--  <span @click="quedingClick" style="display: flex;align-items: center"><i class="el-icon-success" style="color: #4C61E1;font-size: 32px;cursor: pointer"></i></span>
+     --> </div>
+      <div v-if="date" class="editMessage">
+        <el-date-picker
+            v-model="dateValue"
+            type="date"
+            :placeholder="$t('common.selectDate')"
+            style="width: 100%;margin: 10px 0 10px 0"
+            :clearable=false
+            @change="dataclick"
+
+        >
+        </el-date-picker>
+       <!-- <span @click="quedingClick" style="display: flex;align-items: center"><i class="el-icon-success" style="color: #4C61E1;font-size: 32px;cursor: pointer"></i></span>
+   -->   </div>
+      <div v-if="time"  class="editMessage">
+        <el-time-picker
+            v-model="timeValue"
+            :placeholder="$t('common.selectTime')"
+            style="margin: 10px 0 10px 0;width: 100%"
+            :clearable=false
+            @change="dataclick"
+        >
+        </el-time-picker>
+       <!-- <span @click="quedingClick" style="display: flex;align-items: center"><i class="el-icon-success" style="color: #4C61E1;font-size: 32px;cursor: pointer"></i></span>
+    -->  </div>
+      <div v-if="dateTime" class="editMessage">
+        <el-date-picker
+            v-model="dateTimeValue"
+            type="datetime"
+            :placeholder="$t('common.selectDateTime')"
+            style="width: 100%;margin: 10px 0 10px 0"
+            @change="dataclick"
+        >
+        </el-date-picker>
+     <!--   <span @click="quedingClick(bianliangId)" style="display:flex;align-items:center;"><i class="el-icon-success" style="color: #4C61E1;font-size: 32px;cursor: pointer"></i></span>
+     --> </div>
+      <!--<div v-if="dateRange" style="border-top: 1px dashed #ebebeb;">
+        <el-date-picker
+            v-model="dateRangeValue"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            style="margin: 10px 16px;width: 80%"
+        >
+        </el-date-picker>
+        <span @click="quedingClick(bianliangId)" ><i class="el-icon-success" style="color: #409eff;font-size: 32px;text-align: center;vertical-align: middle;cursor: pointer"></i></span>
+      </div>
+      <div v-if="timeRange" style="border-top: 1px dashed #ebebeb;">
+        <el-time-picker
+            is-range
+            v-model="timeRangeValue"
+            range-separator="至"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            placeholder="选择时间范围"
+            style="margin: 10px 16px;width: 80%"
+        >
+        </el-time-picker>
+        <span @click="quedingClick(bianliangId)" ><i class="el-icon-success" style="color: #409eff;font-size: 32px;text-align: center;vertical-align: middle;cursor: pointer"></i></span>
+
+      </div>
+      <div v-if="dateTimeRange" style="border-top: 1px dashed #ebebeb;">
+        <el-date-picker
+            v-model="dateTimeValue"
+            type="datetimerange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            style="width: 80%;margin: 10px 16px"
+
+        >
+        </el-date-picker>
+        <span @click="quedingClick(bianliangId)" ><i class="el-icon-success" style="color: #409eff;font-size: 32px;text-align: center;vertical-align: middle;cursor: pointer"></i></span>
+      </div>-->
+    </div>
+    <div v-if="isPhone">
+      <div v-if="single"  class="editMessage">
+        <el-input v-model="input" :placeholder="$t('common.inputPlaceholder')" class="inputClass" @input="testClick" @blur="inputBlur"></el-input>
+       <!-- <span @click="quedingClick" style="display: flex;align-items: center"><i class="el-icon-success" style="color: #4C61E1;font-size: 32px;cursor: pointer"></i></span>
+     --> </div>
+      <div v-if="date">
+        <van-calendar v-model="show" @confirm="onConfirm" :default-date="defaultDate"/>
+       <!-- <el-date-picker
+            v-model="dateValue"
+            type="date"
+            placeholder="选择日期"
+            style="width: 80%;margin: 10px 10px 10px 0"
+            :editable=false
+        >
+        </el-date-picker>
+        <span @click="quedingClick" style="display: flex;align-items: center"><i class="el-icon-success" style="color: #4C61E1;font-size: 32px;cursor: pointer"></i></span>
+      --></div>
+
+      <div v-if="time">
+        <van-popup v-model="showTimePicker" position="bottom">
+          <van-datetime-picker
+              v-model="timeValue"
+              type="datetime"
+              :title="$t('common.selectTime')"
+              :min-date="minDate"
+              :formatter="formatter"
+              @cancel="showTimePicker = false"
+              @confirm="onConfirmTime"
+          />
+        </van-popup>
+      <!--  <el-time-picker
+            v-model="timeValue"
+            placeholder="任意时间点"
+            style="margin: 10px 10px 10px 0;width: 80%"
+            :editable=false
+        >
+        </el-time-picker>
+        <span @click="quedingClick" style="display: flex;align-items: center"><i class="el-icon-success" style="color: #4C61E1;font-size: 32px;cursor: pointer"></i></span>
+     --> </div>
+      <div v-if="dateTime">
+        <van-popup v-model="showDateTimePicker" position="bottom">
+        <van-datetime-picker
+            v-model="dateTimeValue"
+            type="datetime"
+            :title="$t('common.selectDateTime')"
+            :min-date="minDate"
+            :formatter="formatter"
+            @cancel="showDateTimePicker = false"
+            @confirm="onConfirmDateTime"
+        />
+        </van-popup>
+      <!--  <el-date-picker
+            v-model="dateTimeValue"
+            type="datetime"
+            placeholder="选择日期时间"
+            style="width: 80%;margin: 10px 10px 10px 0"
+            :editable=false
+
+        >
+        </el-date-picker>
+        <span @click="quedingClick(bianliangId)" style="display: flex;align-items: center"><i class="el-icon-success" style="color: #4C61E1;font-size: 32px;cursor: pointer"></i></span>
+      --></div>
+     <!-- <div v-if="dateRange" style="border-top: 1px dashed #ebebeb;display: flex">
+        &lt;!&ndash;<el-date-picker
+            v-model="dateRangeValue"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            style="margin: 10px 16px;width: 80%"
+            :editable=false
+
+        >
+        </el-date-picker>&ndash;&gt;
+        <div style="width: 90%">
+          <van-cell title="选择日期区间" :value="dateRangeValue" @click="show = true" />
+          <van-calendar v-model="show" type="range" @confirm="onConfirm" />
+        </div>
+        <span @click="quedingClick(bianliangId)" ><i class="el-icon-success" style="color: #409eff;font-size: 32px;text-align: center;vertical-align: middle;cursor: pointer"></i></span>
+
+
+
+      </div>
+      <div v-if="timeRange" style="border-top: 1px dashed #ebebeb;">
+        <el-time-picker
+            is-range
+            v-model="timeRangeValue"
+            range-separator="至"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            placeholder="选择时间范围"
+            style="margin: 10px 16px;width: 80%"
+
+            :editable=false
+        >
+        </el-time-picker>
+        <span @click="quedingClick(bianliangId)" ><i class="el-icon-success" style="color: #409eff;font-size: 32px;text-align: center;vertical-align: middle;cursor: pointer"></i></span>
+
+      </div>
+      <div v-if="dateTimeRange" style="border-top: 1px dashed #ebebeb;display: flex">
+        &lt;!&ndash; <el-date-picker
+             v-model="dateTimeValue"
+             type="datetimerange"
+             range-separator="至"
+             start-placeholder="开始日期"
+             end-placeholder="结束日期"
+             style="width: 80%;margin: 10px 16px"
+             :editable=false
+
+
+         >
+         </el-date-picker>&ndash;&gt;
+        <div style="width: 90%">
+          <van-field
+              readonly
+              clickable
+              name="datetimePicker"
+              :value=dateTimeValue[0]
+              label='选择时间'
+              placeholder="点击选择开始日期时间"
+              @click="showDateTimePicker=true"
+          />
+          <van-popup v-model="showDateTimePicker" position="bottom">
+            <van-datetime-picker
+                v-model="currentDate"
+                type="datetime"
+                title="选择开始日期时间"
+                @confirm="onConfirmDateTime($event)"
+                @cancel="showDateTimePicker = false"
+                :min-date="minDate"
+                :formatter="formatter"
+            />
+          </van-popup>
+          <van-field
+              readonly
+              clickable
+              name="datetimePicker"
+              :value=dateTimeValue1[0]
+              label=" "
+              placeholder="点击选择结束日期时间"
+              @click="showDateTimePicker1=true"
+          />
+          <van-popup v-model="showDateTimePicker1" position="bottom">
+            <van-datetime-picker
+                v-model="currentDate"
+                type="datetime"
+                title="选择结束日期时间"
+                @confirm="onConfirmDateTime1($event)"
+                @cancel="showDateTimePicker1 = false"
+                :min-date="minDate"
+                :formatter="formatter"
+            />
+          </van-popup>
+        </div>
+
+        <span @click="quedingClick(bianliangId)" ><i class="el-icon-success" style="color: #409eff;font-size: 32px;text-align: center;vertical-align: middle;cursor: pointer"></i></span>
+      </div>-->
+    </div>
+  </div>
+  </div>
+</template>
+
+<script>
+/*import $ from 'jquery'*/
+export default {
+  name: 'TextMessage',
+  data(){
+    return{
+      show:false,
+      single:false,
+      date:false,
+      time:false,
+      dateTime:false,
+      dateRange:false,
+      timeRange:false,
+      input:'',
+      bianliangId:'',
+      dateValue:'',
+      message:[{content:'王亚欣',type:'SINGLE',value:'',id:1},{content:['2020-11-18T07:25:16.000+0000','2020-11-21T07:25:16.000+0000'],type:'DATE-RANGE',value:'',id:2},{content:'2020-11-18T07:25:16.000+0000',type:'TIME',value:'',id:3},{content:'2020-11-18T07:25:16.000+0000',type:'DATE',value:'',id:4},{content:['2020-11-18T07:25:16.000+0000','2020-11-21T07:25:16.000+0000'],type:'DATERANGE',value:'',id:5},{content:['2020-11-18T08:25:16.000+0000','2020-11-21T07:25:16.000+0000'],type:'TIMERANGE',value:'',id:6},],
+      isPhone:false,
+      isCompany:false,
+      dateTimeValue:'',
+      timeValue:'',
+      dateRangeValue:'',
+      dateRangeValues:'',
+      timeRangeValue:[],
+      dateTimeValue1:[],
+      test:0,
+      currentDate:new Date(),
+      minDate: new Date(2020, 0, 1),
+      showDateTimePicker1:false,
+      showDateTimePicker:false,
+      values:[],
+      checkValue:'',
+      disableds:false,
+      submitValue:'确认',
+      dateInnerText:'',
+      defaultDate:'',
+      showTimePicker:false,
+
+    }
+  },
+  props:{
+    text:{
+      type:Object,
+      default(){
+        return {}
+      }
+    },
+    type:String,
+    disable:Boolean,
+    submit:Boolean,
+    language:{
+      type:String,
+      default:"cn"
+    }
+  },
+  mounted() {
+    this.isMobile()
+    let span=this.$el
+    let defaults=span.getElementsByClassName('ask-component-placeholder-span')
+    for (let i=0;i<defaults.length;i++)
+    {
+      this.values.push({})
+      this.values[i]['key']=defaults[i].getAttribute('data')
+      this.values[i]['value']=defaults[i].innerText
+      this.values[i]['type']=defaults[i].getAttribute('type')
+    }
+    let text=this.$el
+    let test=text.getElementsByClassName('ask-component-placeholder-span')
+    let cpntain=text.getElementsByClassName('ask-component-placeholder-container')
+    let icon=text.getElementsByClassName('arsenalkebianji')
+    for (let i=0;i<icon.length;i++)
+    {
+      icon[i].style.color='#366aff'
+    }
+    for (let i=0;i<cpntain.length;i++)
+    {
+      if(this.type)
+      {
+        cpntain[i].style.paddingRight=0.2+'rem'
+        cpntain[i].style.paddingLeft=0.2+'rem'
+      }
+      else
+      {
+        cpntain[i].style.paddingRight=4+'px'
+        cpntain[i].style.paddingLeft=4+'px'
+      }
+
+    }
+    for (let i=0;i<test.length;i++)
+    {
+      if(test[i].getAttribute('type')==='DATE_PICKER')
+      {
+        let date=Number(test[i].innerText)*1000
+        test[i].innerText=new Date(date).Format("MM-dd")
+      }
+      if(test[i].getAttribute('type')==='TIME_PICKER')
+      {
+        let time=Number(test[i].innerText)*1000
+        test[i].innerText=new Date(time).Format("hh:mm")
+      }
+      if(test[i].getAttribute('type') === 'DATE_TIME_PICKER'){
+        let time=Number(test[i].innerText)*1000
+        test[i].innerText=new Date(time).Format("yyyy-MM-dd hh:mm")
+      }
+    }
+  },
+  beforeMount() {
+    this.$i18n.locale = this.language;
+    if(this.disable===true)
+    {
+      this.disableds=true
+
+    }
+    else
+    {
+      this.disableds=false
+
+    }
+    if(this.submit===true)
+    {
+      this.submitValue=this.$t('common.confirmed')
+    }
+    else
+    {
+      this.submitValue=this.$t('common.confirm')
+    }
+  },
+  methods:{
+    dataclick(){
+      if(this.checkValue.getAttribute('type') === 'DATE_PICKER')
+      {
+        for (let i=0;i<this.values.length;i++)
+        {
+          if(this.values[i].key === this.checkValue.getAttribute('data'))
+          {
+            if(this.dateValue!=='')
+            {
+              this.checkValue.innerText=new Date(this.dateValue).Format('MM-dd')
+              this.values[i].value=new Date(this.dateValue).getTime()
+            }
+            else
+            {
+              this.values[i].value=this.checkValue.innerText
+            }
+          }
+        }
+      }
+      if(this.checkValue.getAttribute('type') === 'TIME_PICKER')
+      {
+        for (let i=0;i<this.values.length;i++)
+        {
+          if(this.values[i].key === this.checkValue.getAttribute('data') )
+          {
+            if(this.timeValue!=='')
+            {
+
+              this.checkValue.innerText=new Date(this.timeValue).Format('hh:mm')
+              this.values[i].value=new Date(this.timeValue).getTime()
+            }
+            else
+            {
+              this.values[i].value=this.checkValue.innerText
+            }
+          }
+        }
+      }
+      if(this.checkValue.getAttribute('type') === 'DATE_TIME_PICKER')
+      {
+        for (let i=0;i<this.values.length;i++)
+        {
+          if(this.values[i].key === this.checkValue.getAttribute('data') )
+          {
+            if(this.dateTimeValue!=='')
+            {
+
+              this.checkValue.innerText=new Date(this.dateTimeValue).Format('yyyy-MM-dd hh:mm')
+              this.values[i].value=new Date(this.dateTimeValue).getTime()
+            }
+            else
+            {
+              this.values[i].value=this.checkValue.innerText
+            }
+          }
+        }
+      }
+    },
+    clickClick(e){
+      if(e.target.onclick!==null)
+      {
+        let that=this
+        window._askEditValue=that._askEditValue;
+      }
+    },
+    _askEditValue(a,b){
+      let type=b.getAttribute('type')
+      this.checkValue=b
+      if(type === 'INPUT')
+      {
+        this.single=true
+        this.date=false
+        this.time=false
+        this.dateTime=false
+        this.input= b.innerText
+      }
+      if(type === 'DATE_PICKER')
+      {
+        this.single=false
+        this.date=true
+        this.time=false
+        this.dateTime=false
+        this.show=true
+        for (let i=0;i<this.values.length;i++)
+        {
+          if(b.getAttribute('data') === this.values[i].key)
+          {
+            if(typeof this.values[i].value == 'string')
+            {
+              this.dateInnerText=Number(this.values[i].value)*1000
+            }
+          else
+            {
+              this.dateInnerText=Number(this.values[i].value)
+            }
+            this.dateValue=new Date(this.dateInnerText).Format("yyyy:MM-dd")
+            this.defaultDate=new Date(this.dateInnerText)
+          }
+          return
+        }
+
+      }
+      if(type === 'TIME_PICKER')
+      {
+        this.single=false
+        this.date=false
+        this.time=true
+        this.dateTime=false
+        this.showTimePicker=true
+        for (let i=0;i<this.values.length;i++)
+        {
+          if(b.getAttribute('data') === this.values[i].key)
+          {
+            let time
+            if(typeof this.values[i].value == 'string'){
+               time=Number(this.values[i].value)*1000
+            }
+          else
+            {
+               time=Number(this.values[i].value)
+            }
+          if(this.isPhone ===true)
+          {
+            this.timeValue=new Date(time)
+          }
+          else
+          {
+            this.timeValue=new Date(time).Format("yyyy-MM-dd hh:mm")
+          }
+          }
+        }
+      }
+      if(type === 'DATE_TIME_PICKER')
+      {
+        this.single=false
+        this.date=false
+        this.time=false
+        this.dateTime=true
+        this.showDateTimePicker=true
+        for (let i=0;i<this.values.length;i++)
+        {
+          if(b.getAttribute('data') === this.values[i].key)
+          {
+            let time
+            if(typeof this.values[i].value == 'string'){
+              time=Number(this.values[i].value)*1000
+            }
+            else
+            {
+              time=Number(this.values[i].value)
+            }
+            if(this.isPhone===true)
+            {
+              this.dateTimeValue=new Date(time)
+            }
+            else
+            {
+              this.dateTimeValue=new Date(time).Format("yyyy-MM-dd hh:mm:ss")
+            }
+          }
+        }
+      }
+
+    },
+    formatter(type, value) {
+      // 格式化选择器日期
+      if (type === "year") {
+        return `${value}年`;
+      } else if (type === "month") {
+        return `${value}月`;
+      } else if (type === "day") {
+        return `${value}日`;
+      } else if (type === "hour") {
+        return `${value}时`;
+      } else if (type === "minute") {
+        return `${value}分`;
+      }
+      return value;
+    },
+    //提交按钮
+    submitClick(){
+      this.single=false
+      this.date=false
+      this.time=false
+      this.dateTime=false
+      let infomation={}
+      let obj = {}
+      this.values.map(item => {
+        obj[item.key] = item
+      })
+      let result = Object.values(obj)
+      let text=this.$el
+      let test=text.getElementsByClassName('ask-component-placeholder-span')
+      for (let i=0;i<test.length;i++)
+      {
+        if(test[i].getAttribute('type')==='DATE_PICKER')
+        {
+          if(test[i].getAttribute('data')===result[i].key)
+          {
+            if(typeof result[i].value =='number'){
+              result[i].value/=1000
+              let resu=String(result[i].value)
+              result[i].value=resu
+            }
+          }
+        }
+        if(test[i].getAttribute('type')==='TIME_PICKER')
+        {
+          if(test[i].getAttribute('data')===result[i].key)
+          {
+            if(typeof result[i].value =='number')
+            {
+              result[i].value/=1000
+              let resu=String(result[i].value)
+              result[i].value=resu
+            }
+          }
+        }
+        if(test[i].getAttribute('type')==='DATE_TIME_PICKER')
+        {
+          if(test[i].getAttribute('data')===result[i].key)
+          {
+            if(typeof result[i].value =='number')
+            {
+              result[i].value/=1000
+              let resu=String(result[i].value)
+              result[i].value=resu
+            }
+          }
+        }
+      }
+      infomation['values']=result
+      infomation['goToAction']=this.text.goToAction
+      let innerhtml=this.$el
+      infomation['template']=innerhtml.querySelector('#html').innerHTML
+        infomation['apiKey']=this.text.apiKey
+      this.$emit('submitClick',infomation,this.text.apiKey)
+      this.submitValue=this.$t('common.confirmed')
+      this.disableds=true
+    },
+    addZero(i){
+      if (i<10) {
+        i="0" + i;
+      }
+      return i;
+    },
+    formatDate(date) {
+      if(typeof date == 'object')
+      {
+          const dateTime = new Date(date[0])
+          const dateTime1=new Date(date[1])
+          return `${dateTime.getMonth() + 1}月${dateTime.getDate()}日 ${this.addZero(dateTime.getHours())} : ${this.addZero(dateTime.getMinutes())} - ${dateTime1.getMonth() + 1}月${dateTime1.getDate()}日 ${this.addZero(dateTime1.getHours())} : ${this.addZero(dateTime1.getMinutes())}`;
+      }
+      else
+      {
+        const dateTime = new Date(date)
+        return `${dateTime.getMonth() + 1}月${dateTime.getDate()}日`;
+      }
+
+    },
+    //格式成时间
+    formatDate1(date){
+      const dateTime = new Date(date)
+      return `${this.addZero(dateTime.getHours())}:${this.addZero(dateTime.getMinutes())}`;
+    },
+    //格式成日期
+    formatDate2(date){
+      const dateTime = new Date(date)
+      return `${dateTime.getMonth() + 1} - ${dateTime.getDate()}`;
+    },
+    //日期范围
+    formatDate3(date){
+      const dateTime = new Date(date[0])
+      const dateTime1=new Date(date[1])
+      return `${dateTime.getMonth() + 1}月 ${dateTime.getDate()}日 - ${dateTime1.getMonth() + 1}月 ${dateTime1.getDate()}日`;
+    },
+    //时间范围
+    formatDate4(date){
+      const dateTime = new Date(date[0])
+      const dateTime1=new Date(date[1])
+      return `${dateTime.getHours()}: ${dateTime.getMinutes()} - ${dateTime1.getHours()}: ${dateTime1.getMinutes()}`;
+    },
+    testClick(value){
+      if(this.checkValue.getAttribute('type') === 'INPUT')
+      {
+        for (let i=0;i<this.values.length;i++)
+        {
+          if(this.values[i].key === this.checkValue.getAttribute('data') )
+          {
+              this.checkValue.innerText=value
+            this.values[i].value=this.checkValue.innerText
+          }
+        }
+      }
+    },
+    inputBlur(){
+      console.debug('inputBlur')
+      this.single=false
+    },
+    quedingClick(){
+      if(this.checkValue.getAttribute('type') === 'INPUT')
+      {
+        for (let i=0;i<this.values.length;i++)
+        {
+          if(this.values[i].key === this.checkValue.getAttribute('data') )
+          {
+            if(this.input!=='')
+            {
+              this.checkValue.innerText=this.input
+            }
+            this.values[i].value=this.checkValue.innerText
+          }
+        }
+        this.single = false
+        this.input=''
+      }
+      if(this.checkValue.getAttribute('type') === 'DATE_PICKER')
+
+      {
+        for (let i=0;i<this.values.length;i++)
+        {
+          if(this.values[i].key === this.checkValue.getAttribute('data'))
+          {
+            if(this.dateValue!=='')
+            {
+              this.checkValue.innerText=new Date(this.dateValue).Format('MM-dd')
+              this.values[i].value=new Date(this.dateValue).getTime()
+            }
+            else
+            {
+              this.values[i].value=this.checkValue.innerText
+            }
+          }
+        }
+        this.date = false
+        this.dateValue=''
+      }
+      if(this.checkValue.getAttribute('type') === 'TIME_PICKER')
+      {
+        for (let i=0;i<this.values.length;i++)
+        {
+          if(this.values[i].key === this.checkValue.getAttribute('data') )
+          {
+            if(this.timeValue!=='')
+            {
+
+              this.checkValue.innerText=new Date(this.timeValue).Format('hh:mm')
+              this.values[i].value=new Date(this.timeValue).getTime()
+            }
+            else
+            {
+              this.values[i].value=this.checkValue.innerText
+            }
+          }
+        }
+        this.time = false
+        this.timeValue=''
+      }
+      if(this.checkValue.getAttribute('type') === 'DATE_TIME_PICKER')
+      {
+        for (let i=0;i<this.values.length;i++)
+        {
+          if(this.values[i].key === this.checkValue.getAttribute('data') )
+          {
+            if(this.dateTimeValue!=='')
+            {
+
+              this.checkValue.innerText=new Date(this.dateTimeValue).Format('yyyy-MM-dd hh:mm')
+              this.values[i].value=new Date(this.dateTimeValue).getTime()
+            }
+            else
+            {
+              this.values[i].value=this.checkValue.innerText
+            }
+          }
+        }
+        this.dateTime = false
+        this.dateTimeValue=''
+      }
+
+    },
+    isMobile() {
+      let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);
+      if (flag) {
+        this.isPhone=true
+      }
+      else
+      {
+        this.isCompany=true
+
+      }
+    },
+    onConfirmDateTime(){
+      if(this.checkValue.getAttribute('type') === 'DATE_TIME_PICKER')
+      {
+        for (let i=0;i<this.values.length;i++)
+        {
+          if(this.values[i].key === this.checkValue.getAttribute('data') )
+          {
+            if(this.dateTimeValue!=='')
+            {
+
+              this.checkValue.innerText=new Date(this.dateTimeValue).Format('yyyy-MM-dd hh:mm')
+              this.values[i].value=new Date(this.dateTimeValue).getTime()
+            }
+            else
+            {
+              this.values[i].value=this.checkValue.innerText
+            }
+          }
+        }
+      }
+    this.showDateTimePicker = false;
+    },
+
+    onConfirm(date) {
+      this.show = false;
+      if(this.checkValue.getAttribute('type') === 'DATE_PICKER')
+
+      {
+        for (let i=0;i<this.values.length;i++)
+        {
+          if(this.values[i].key === this.checkValue.getAttribute('data'))
+          {
+            if(date!=='')
+            {
+              this.checkValue.innerText=new Date(date).Format('MM-dd')
+              this.values[i].value=new Date(date).getTime()
+            }
+            else
+            {
+              this.values[i].value=this.checkValue.innerText
+            }
+          }
+        }
+        this.date = false
+        this.dateValue=''
+      }
+
+    },
+    onConfirmTime(){
+      this.showTimePicker=false
+      if(this.checkValue.getAttribute('type') === 'TIME_PICKER')
+      {
+        for (let i=0;i<this.values.length;i++)
+        {
+          if(this.values[i].key === this.checkValue.getAttribute('data') )
+          {
+            if(this.timeValue!=='')
+            {
+
+              this.checkValue.innerText=new Date(this.timeValue).Format('hh:mm')
+              this.values[i].value=new Date(this.timeValue).getTime()
+            }
+            else
+            {
+              this.values[i].value=this.checkValue.innerText
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</script>
+
+
+<style lang="less">
+@import "../../assets/less/common.css";
+#textMessage{
+  min-width: 200px;
+  .editMessage{
+    display: flex;
+    justify-content: space-between;
+    margin-top: 10px;
+    border-top: 1px dashed #ebebeb;
+  }
+  #submit{
+    margin-top: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .el-button{
+      border: 1px solid #BBCDFF;
+      border-radius: 14px;
+      background-color: white;
+      color: #366aff;
+      font-weight: 400;
+    }
+    .el-button--small{
+      padding: 9px 30px;
+      font-size: 1em;
+    }
+  }
+  #html{
+    p{
+      color:#A9B3C6;
+    }
+    .ask-component-placeholder-icon{
+      padding-left: 12px;
+      color: #366aff;
+      font-size: 18px;
+    }
+    .ask-component-placeholder-span{
+      color: #616161!important;
+    }
+  }
+}
+.remPhoneClass{
+  margin: 0 auto;
+  /*width: 80vw;*/
+  .inputClass{
+    margin-top: 8px;
+    width: 100%;
+    .el-input__inner{
+      border-radius: 9px;
+    }
+  }
+  .htmlClass{
+    padding: 4px 0;
+  }
+
+}
+.remCompanyClass{
+
+  margin: 0 auto;
+  /*width: 300px;*/
+  .inputClass{
+    padding: 10px 0 10px 0;
+    width: 100%;
+    .el-input__inner{
+      border-radius: 9px;
+    }
+  }
+
+
+}
+.van-cell::after{
+  content: none!important;
+}
+i{
+  cursor: pointer;
+}
+.notClickClass{
+  pointer-events: none;
+}
+</style>