变更数据悬浮显示,格式化数字(金额),日期格式化

#####最近换了一个vue框架（iview），样式比较好看些 ，方法比较全
iview地址： iview

// 选择框悬浮显示
<Tooltip
      :content="ctrtStasText"
       placement="top"
       :disabled="!ctrtStasBlue"
       max-width="200">
      <FormItem
              label="XXX状态"
              prop="ctrtStas"
              :class="{ 'change-label': ctrtStasBlue }"
      >
        <Select
                v-model="queryForm.ctrtStas"
                filterable
                disabled
                v-focusNext
                placeholder=""
                clearable>
          <Option
                  v-for="item in ctrtList"
                  :value="item.value"
                  :key="item.value">
          {{ item.codeName }}
          </Option>
        </Select>
      </FormItem>
</Tooltip>
// 输入框悬浮显示
<Tooltip
      :content="grteCtrtCcyBalc1Text"
      placement="top"
      :disabled="!grteCtrtCcyBalc1Blue"
      max-width="200"
    >
      <FormItem
         label="担保余额（人民币）"
         prop="grteCtrtCcyBalc1"
         :class="{ 'change-label': grteCtrtCcyBalc1Blue }"
       >
         <Input
           v-model="queryForm.grteCtrtCcyBalc1"
           v-focusNext
           class="input-right"
           disabled
         />
       </FormItem>
</Tooltip>
// 日期悬浮显示
<Tooltip
      :content="trmnDateText"
      placement="top"
      :disabled="!trmnDateBlue"
      max-width="200"
    >
      <FormItem
         label="担保合同终止日期"
          prop="trmnDate"
          :class="{ 'change-label': trmnDateBlue }"
         >
           <DatePicker
             type="date"
             v-model="queryForm.trmnDate"
             style="width: 100%"
             v-focusNext
           ></DatePicker>
         </FormItem>	
</Tooltip>



data() {
    return {
    ctrtStasText: "",
    grteCtrtCcyBalc1Text: "",
    trmnDateText: "",
    ctrtStasBlue: false,
    grteCtrtCcyBalc1Blue: false,
    trmnDateBlue: false,
    queryForm: {
    ctrtStas: "",
    trmnDate: "",
    grteCtrtCcyBalc: "",
    grteCtrtCcyBalc1: "",
    },
    oldForm: {
    ctrtStas: "",
    trmnDate: "",
    grteCtrtCcyBalc: "",
    grteCtrtCcyBalc1: "",
    },
    newReady: false,
    oldReady: false,
    ctrtShow: {},
    ctrtList: [],
	}
},
 created() {
 	this.getQueryInfo();
    this.getList();
  },
   methods: {
   // 格式化金额，不四舍五入
   moneyFormat (money, len) {
    // money：要格式化的数字
    // len：保留几位小数
    if (isEmpty(money)){
        return '0.00';
    }
    len = len || 2
    let arr = (money + '').split('.')
    let intStr = arr[0] ? arr[0] : 0
    let floatStr = arr[1] ? arr[1]  : 0
    if (floatStr == 0) {
      floatStr = 0
      for (var i = 0; i < len - 1; i++) {
        floatStr += '0'
      }
    } else {
       if(floatStr.toString().split('').length < 2){
           floatStr = floatStr + '0'
       }else{
        floatStr = floatStr.toString().substring(0, len)
       } 
    }
    money = (intStr + '.' + floatStr).replace(/(\d{1,3})(?=(?:\d{3})+\.)/g, '$1,')
    return money
  },
  // 日期格式化 (日期，格式)
  dateFormat (date, fmt) {
    if (!date) {
        return '';
    }
    // 如果是时间戳则转化为时间
    if (typeof date === 'number') {
        date = new Date(date);
    }
    let o = {
        'M+': date.getMonth() + 1, // 月份
        'd+': date.getDate(), // 日
        'h+': date.getHours(), // 小时
        'm+': date.getMinutes(), // 分
        's+': date.getSeconds(), // 秒
        'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
        'S': date.getMilliseconds() // 毫秒
    };
    if (/(y+)/.test(fmt))
     fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
    for (var k in o) {
        if (new RegExp('(' + k + ')').test(fmt))
         fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) :
          (('00' + o[k]).substr(('' + o[k]).length)));
    }
    return fmt;
}
  
   getList() {
      // 合同状态
    this.$net
        .send({
           server: "请求地址",
           data: "参数",
         })
         .then((data) => {
           if (data.code == 200) {
             this.ctrtList = data.data;
             for (let i = 0; i < data.data.length; i++) {
               var key = data.data[i].value;
               var value = data.data[i].name;
               // map形式，{key:value}
               this.ctrtShow[key] = value;
             }
           }
         });
   },
   getQueryInfo() {
   this.getQueryRequisNum(this.newQueryId, true);
   this.getQueryRequisNum(this.oldQueryId, false);
   },
   getQueryRequisNum(id, whichForm) {
  	 let form = {};
   	this.$net
        .send({
          server: "请求方法",
          data: "请求参数",
        })
        .then((data) => {
          if (data.code == 200) {
            form = data.data;
            form.grteCtrtCcyBalc1 =
              this.moneyFormat(form.grteCtrtCcyBalc) == undefined
                ? "0.00"
                : this.moneyFormat(form.grteCtrtCcyBalc);
           
            if (whichForm) {
              this.queryForm = { ...form };
              this.newReady = true;
            } else {
              this.oldForm = { ...form };
              this.oldReady = true;
            }
            if (this.newReady && this.oldReady) {
              setTimeout(() => {
              // 数据改变-判断
                this.changeColor();
              }, 200);
            }
          } else {
            this.$Message.error(data.msg);
          }
        });
   },
   changeColor() {
   		let arr = [];
   		 for (let key in this.queryForm) {
   		 // 比较值
   		  if (this.queryForm[key] != this.oldForm[key]) {
   		  // 时间单独处理
          if (key == "trmnDate") {
            let newTrmnDate1 = ""
            // 时间是否被格式化
            if (this.queryForm["trmnDate"].toString().indexOf("T") != -1) {
              newTrmnDate1 = dateFormat(this.queryForm["trmnDate"], "yyyy-MM-dd");
            } else {
              newTrmnDate1 = this.queryForm["trmnDate"]
            }
            if (newTrmnDate1 != oldTrmnDate1) {
              arr.push(key);
            }
          } else {
            arr.push(key);
          }
        }
   	 }
   	  setTimeout(() => {
   	  arr.forEach((v) => {
   	  // 选择框值显示
   	  if (v == "ctrtStas") {
            this.ctrtStasBlue = true;
            var text = ""
            if (this.oldForm[v]) {
              text +=  "变更前:" +
                      new Map(Object.entries(this.ctrtShow)).get(this.oldForm[v])
            } else {
              text += "变更前:" + ""
            }
            if (this.queryForm[v]) {
              text +=  " 变更后:" +
                      new Map(Object.entries(this.ctrtShow)).get(this.queryForm[v])
            } else {
              text += " 变更后:" + ""
            }
            this.ctrtStasText = text;
          }
          // 输入框值显示
          if (v == "grteCtrtCcyBalc1") {
            this.grteCtrtCcyBalc1Blue = true;
            var text = ""
            if (this.oldForm[v]) {
              text +=  "变更前:" + this.oldForm[v]
            } else {
              text += "变更前:" + ""
            }
            if (this.queryForm[v]) {
              text += " 变更后:" + this.queryForm[v]
            } else {
              text += " 变更后:" + ""
            }
            this.grteCtrtCcyBalc1Text = text;
          }
          if (v == "trmnDate") {
            this.trmnDateBlue = true;
            var text = ""
            if (this.oldForm[v]) {
              if (this.oldForm[v].toString().indexOf("T") != -1) {
                const oldTrmnDate = this.dateFormat(this.oldForm[v], "yyyy-MM-dd");
                text += "变更前:" + oldTrmnDate
              } else {
                text += "变更前:" + this.oldForm[v]
              }
            } else {
              text += "变更前:" + ""
            }
            if (this.queryForm[v]) {
              if (this.queryForm[v].toString().indexOf("T") != -1) {
                const newTrmnDate = this.dateFormat(this.queryForm[v], "yyyy-MM-dd");
                text += " 变更后:" + newTrmnDate
              } else {
                text += " 变更后:" + this.queryForm[v]
              }
            } else {
              text += " 变更后:" + ""
            }
            this.trmnDateText = text;
          }
   	  })
   	  },500)
   },
 }