#####最近换了一个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)
},
}