<template>
<div class="liuone">
<el-row v-if="seen">
<el-col :span="24"
><div class="grid-content bg-purple-dark">1</div></el-col
>
<el-col :span="24"
><div class="grid-content bg-purple-dark">2</div></el-col
>
</el-row>
<el-row :gutter="20" v-if="!seen">
<el-col :span="16"
><div class="grid-content bg-purple">
<el-table
:data="data"
style="width: 100%"
highlight-current-row
stripe
>
<el-table-column prop="startTime" label="日期" width="180">
</el-table-column>
<el-table-column prop="startTime" label="项目名称" width="180">
</el-table-column>
<el-table-column prop="startTime" label="金额"> </el-table-column>
<el-table-column prop="startTime" label="备注"> </el-table-column>
<el-table-column
label="操作"
align="center"
fixed="left"
width="150"
>
<template slot-scope="scope">
<el-tooltip
class="item"
effect="dark"
content="编辑"
placement="bottom"
>
<el-button
icon="el-icon-edit"
circle
size="mini"
type="primary"
@click="handleEdit(scope.$index, scope.row)"
></el-button>
</el-tooltip>
</template>
</el-table-column>
</el-table></div
></el-col>
<el-col :span="8"
><div class="grid-content bg-purple">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>新建项目</span>
<el-button style="float: right; padding: 3px 0" type="text">
<el-switch
v-model="disabled"
active-color="#13ce66"
inactive-color="#ff4949"
>
</el-switch
></el-button>
</div>
<dv-decoration-3 style="width: 100%; height: 30px" />
<div class="text item">
<span class="title_class"
>日 期:</span
>
<el-date-picker
clearable
:disabled="disabled"
class="input_class"
v-model="blog.stat"
type="date"
placeholder="选择日期"
>
</el-date-picker>
<br />
<span class="title_class">项目名称:</span>
<el-input
clearable
v-model="blog.xiangmumingcheng"
@keyup.native="ipnutone = oninput(ipnutone)"
class="input_class"
></el-input>
<br />
<span class="title_class"
>金 额:</span
>
<el-input
clearable
v-model="blog.xiangmujiner"
@keyup.native="ipnutone = oninput(ipnutone)"
class="input_class"
></el-input>
<div class="jisuanjiner">
<div>{{ blog.xiangmujiner | money }}元</div>
<div>{{ blog.xiangmujiner | smallToBig }}</div>
</div>
<span class="title_class"
>备 注:</span
>
<el-input
class="input_class"
type="textarea"
v-model="blog.beizhu"
></el-input>
<el-button
@click="querenxiangmu"
style="float: right"
type="success"
icon="el-icon-check"
circle
></el-button>
</div>
</el-card>
<el-card class="box-card" style="margin-top: 10px">
<div slot="header" class="clearfix">
<span>利率调整</span>
</div>
<dv-decoration-3
style="width: 100%; height: 30px; margin-bottom: 10px"
/>
<div class="text item">
年化利率:
<el-input
placeholder="年化利率"
v-model="nianhualilv"
clearable
class="input_class"
>
</el-input
>%
<br />
投资预算:
<el-input
placeholder="投资预算"
v-model="touziyusuan"
clearable
class="input_class"
>
</el-input
>元
<div class="jisuanjiner">
<div>{{ touziyusuan | money }}元</div>
<div>{{ touziyusuan | smallToBig }}</div>
</div>
峰值金额:
<el-input
placeholder="峰值金额"
v-model="fengzhijiner"
clearable
class="input_class"
>
</el-input
>元
<div class="jisuanjiner">
<div>{{ fengzhijiner | money }}元</div>
<div>{{ fengzhijiner | smallToBig }}</div>
</div>
<el-button
@click="lilvqueren"
style="float: right"
type="success"
icon="el-icon-check"
circle
></el-button>
</div>
</el-card></div
></el-col>
</el-row>
<el-dialog
:close-on-click-modal="false"
:modal-append-to-body="false"
:title="dialogTitle"
width="800px"
:visible.sync="formVisible"
@close="resetForm('blogForm')"
>
<el-form :model="blog" :rules="rules" ref="blogForm">
<el-form-item label="ID" prop="id" label-width="30%" hidden>
<el-input v-model="blog.id" autocomplete="off"></el-input>
</el-form-item>
</el-form>
</el-dialog>
</div>
</template>
<script>
import { lilvweihu } from "@/api/index/index";
export default {
data() {
return {
dialogTitle: "编辑",
// 是否显示
formVisible: false,
disabled: true,
ipnutone: "0",
input: "",
data: [],
seen: false,
screenWidth: "",
screenHeight: "",
nianhualilv: "",
touziyusuan: "",
fengzhijiner: "",
blog: {
id: "",
stat: "",
beizhu: "",
xiangmumingcheng: "",
xiangmujiner: "",
},
};
},
created() {
this.onLoad();
},
methods: {
onLoad() {
this.screenWidth = document.body.clientWidth;
this.screenHeight = document.body.clientHeight;
console.log(this.screenWidth);
if (this.screenWidth < 500) {
this.seen = true;
}
// 日期
var now = new Date();
var year = now.getFullYear(); //得到年份
var month = now.getMonth(); //得到月份
var date = now.getDate(); //得到日期
var hours = now.getHours(); //得到小时
var Minutes = now.getMinutes(); //得到分钟
month = month + 1;
month = month.toString().padStart(2, "0");
date = date.toString().padStart(2, "0");
hours = hours.toString().padStart(2, "0");
Minutes = Minutes.toString().padStart(2, "0");
var defaultDate = `${year}-${month}-${date}`;
// this.blog = "";
this.$set(this.blog, "stat", defaultDate);
lilvweihu().then((res) => {
console.log(12111);
console.log(res);
});
// getList().then((res) => {
// this.data = res.data.data.records;
// });
},
lilvqueren() {
console.log(1211);
this.$message({
message: "恭喜你,这是一条成功消息",
type: "success",
});
// let params = {
// startTime: this.startTime,
// endTime: this.endTime,
// content: this.content,
// issueState: this.fabuzhuangtai,
// exeState: this.zhixingzhuangtai
// };
// lilvweihu().then((res) => {
// console.log(res);
// });
},
querenxiangmu() {
console.log(1211);
this.$message({
message: "恭喜你,这是一条成功消息",
type: "success",
});
},
//mobile
oninput(num) {
var str = num;
var len1 = str.substr(0, 1);
var len2 = str.substr(1, 1);
//如果第一位是0,第二位不是点,就用数字把点替换掉
if (str.length > 1 && len1 == 0 && len2 != ".") {
str = str.substr(1, 1);
}
//第一位不能是.
if (len1 == ".") {
str = "";
}
//限制只能输入一个小数点
if (str.indexOf(".") != -1) {
var str_ = str.substr(str.indexOf(".") + 1);
if (str_.indexOf(".") != -1) {
str = str.substr(0, str.indexOf(".") + str_.indexOf(".") + 1);
}
}
//正则替换
str = str.replace(/[^\d^\.]+/g, ""); // 保留数字和小数点
str = str.replace(/\.\d\d\d$/, ""); // 小数点后只能输两位
return str;
},
},
mounted() {},
filters: {
money(value) {
if (!value) return "0.00";
var intPart = Number(value).toFixed(0); //获取整数部分
var intPartFormat = intPart
.toString()
.replace(/(\d)(?=(?:\d{3})+$)/g, "$1,"); //将整数部分逢三一断
var floatPart = ".00"; //预定义小数部分
var value2Array = value.split(".");
//=2表示数据有小数位
if (value2Array.length == 2) {
floatPart = value2Array[1].toString(); //拿到小数部分
if (floatPart.length == 1) {
//补0,实际上用不着
return intPartFormat + "." + floatPart + "0";
} else {
return intPartFormat + "." + floatPart;
}
} else {
return intPartFormat + floatPart;
}
},
smallToBig(money) {
// 将数字金额转换为大写金额
var cnNums = new Array(
"零",
"壹",
"贰",
"叁",
"肆",
"伍",
"陆",
"柒",
"捌",
"玖"
); //汉字的数字
var cnIntRadice = new Array("", "拾", "佰", "仟"); //基本单位
var cnIntUnits = new Array("", "万", "亿", "兆"); //对应整数部分扩展单位
var cnDecUnits = new Array("角", "分", "毫", "厘"); //对应小数部分单位
var cnInteger = "整"; //整数金额时后面跟的字符
var cnIntLast = "元"; //整数完以后的单位
//最大处理的数字
var maxNum = 999999999999999.99;
var integerNum; //金额整数部分
var decimalNum; //金额小数部分
//输出的中文金额字符串
var chineseStr = "";
var parts; //分离金额后用的数组,预定义
if (money == "") {
return "";
}
money = parseFloat(money);
if (money >= maxNum) {
//超出最大处理数字
return "超出最大处理数字";
}
if (money == 0) {
chineseStr = cnNums[0] + cnIntLast + cnInteger;
return chineseStr;
}
//四舍五入保留两位小数,转换为字符串
money = Math.round(money * 100).toString();
integerNum = money.substr(0, money.length - 2);
decimalNum = money.substr(money.length - 2);
//获取整型部分转换
if (parseInt(integerNum, 10) > 0) {
var zeroCount = 0;
var IntLen = integerNum.length;
for (var i = 0; i < IntLen; i++) {
var n = integerNum.substr(i, 1);
var p = IntLen - i - 1;
var q = p / 4;
var m = p % 4;
if (n == "0") {
zeroCount++;
} else {
if (zeroCount > 0) {
chineseStr += cnNums[0];
}
//归零
zeroCount = 0;
chineseStr += cnNums[parseInt(n)] + cnIntRadice[m];
}
if (m == 0 && zeroCount < 4) {
chineseStr += cnIntUnits[q];
}
}
chineseStr += cnIntLast;
}
//小数部分
if (decimalNum != "") {
var decLen = decimalNum.length;
for (var i = 0; i < decLen; i++) {
var n = decimalNum.substr(i, 1);
if (n != "0") {
chineseStr += cnNums[Number(n)] + cnDecUnits[i];
}
}
}
if (chineseStr == "") {
chineseStr += cnNums[0] + cnIntLast + cnInteger;
} else if (decimalNum == "" || /^0*$/.test(decimalNum)) {
chineseStr += cnInteger;
}
return chineseStr;
},
},
};
</script>
<style>
.liuone .el-input--suffix .el-input__inner {
padding: 3px;
}
.liuone .el-input__icon {
display: none;
}
</style>
<style scoped>
.input_class {
width: 320px;
margin-bottom: 10px;
}
.input_class_two {
width: 70px;
margin-bottom: 10px;
}
.jisuanjiner {
width: 100%;
margin-left: 87px;
height: 60px;
}
.title_class {
float: left;
line-height: 35px;
}
</style>