<!-- 法院立案 -->
|
|
<template>
|
<div>
|
<div class="header-block">
|
<p class="section-title">法院立案</p>
|
</div>
|
<div class="form-content">
|
<el-form
|
:inline="true"
|
:label-width="'180px'"
|
size="small"
|
:model="formValues"
|
:rules="rules"
|
:class="`form-cols-3`"
|
:disabled="!canEdit"
|
>
|
<el-form-item
|
v-for="(item, index) in computedFormList"
|
:prop="item.name"
|
:key="index"
|
:label="item.label"
|
:class="[
|
{
|
'textarea-item': item.type === 'textarea' || item.isLong,
|
},
|
{ 'textarea-grid': item.multiRow },
|
]"
|
>
|
<CommInput
|
:info="item"
|
@updateValue="updateValue"
|
@handleBlur="handleBlur"
|
@handleFocus="handleFocus"
|
:showList="computedFormList"
|
></CommInput>
|
</el-form-item>
|
</el-form>
|
</div>
|
</div>
|
</template>
|
<script>
|
import CommInput from "../CommInput.vue";
|
import { overdueCourtRecordDetail } from "@comprehensive/serve/public";
|
export default {
|
props: {
|
// 申请编号
|
serialNo: {
|
type: String,
|
// required: true,
|
},
|
|
canEdit: {
|
type: Boolean,
|
},
|
caseId: {
|
type: String,
|
},
|
promissNoteNo: {
|
type: String,
|
},
|
},
|
components: {
|
CommInput,
|
},
|
computed: {},
|
data() {
|
return {
|
formValues: {},
|
computedFormList: [
|
{
|
type: "input",
|
label: "起诉法院",
|
value: "",
|
name: "indictCourtName",
|
attrs: ["readonly"],
|
disable: true,
|
},
|
{
|
type: "date",
|
label: "起诉时间",
|
value: "",
|
name: "indictTime",
|
attrs: ["readonly"],
|
disable: true,
|
},
|
{
|
type: "input",
|
label: "立案号",
|
value: "",
|
name: "filingNo",
|
},
|
{
|
type: "input",
|
label: "诉讼费用(元)",
|
value: "",
|
name: "lawsuitFee",
|
},
|
{
|
type: "select",
|
label: "费用是否缴纳",
|
value: "",
|
name: "lawsuitFeeStatus",
|
options: [
|
{ label: "已缴费", value: "1" },
|
{ label: "未缴费", value: "0" },
|
],
|
},
|
{
|
type: "date",
|
label: "立案时间",
|
value: "",
|
name: "filingTime",
|
},
|
{
|
type: "date",
|
label: "开庭时间",
|
value: "",
|
name: "courtTime",
|
},
|
{
|
type: "textarea",
|
label: "备注",
|
value: "",
|
name: "lawsuitMemo",
|
style: {
|
width: "562px",
|
height: "100px",
|
},
|
},
|
],
|
rules: {},
|
};
|
},
|
created() {
|
this.init();
|
},
|
mounted() {},
|
beforeDestroy() {},
|
methods: {
|
init() {
|
this.formValues = this.initFormValues();
|
this.requestOverdueCourtRecordDetail();
|
},
|
async requestOverdueCourtRecordDetail() {
|
const resp = await overdueCourtRecordDetail({ caseId: this.caseId });
|
if (resp.code == "00") {
|
this.formValues = {
|
indictCourtName: resp.result.indictCourtName,
|
indictTime: resp.result.indictTime,
|
caseLifeSerialNo: resp.result.serialNo,
|
filingNo: resp.result.filingNo,
|
lawsuitFee: resp.result.lawsuitFee,
|
lawsuitFeeStatus: resp.result.lawsuitFeeStatus,
|
filingTime: resp.result.filingTime,
|
courtTime: resp.result.courtTime,
|
lawsuitMemo: resp.result.lawsuitMemo,
|
};
|
this.computedFormList = this.computedFormList.reduce((pre, curr) => {
|
const { name } = curr;
|
if (name === "lawsuitFeeStatus") {
|
pre.push({
|
...curr,
|
value:
|
this.formValues.lawsuitFeeStatus == 1 ? "已缴费" : "未缴费",
|
});
|
}else if (name === 'lawsuitFee') {
|
pre.push({
|
...curr,
|
value:this.getMoney(this.formValues.lawsuitFee),
|
});
|
}
|
else {
|
pre.push({
|
...curr,
|
value: this.formValues[name],
|
});
|
}
|
return pre;
|
}, []);
|
this.$emit("OverdueCourtFilingCom", this.formValues);
|
}
|
},
|
initFormValues() {
|
let tempFormValues = this.computedFormList.reduce((pre, curr) => {
|
const { name, value } = curr;
|
pre[name] = value;
|
return pre;
|
}, {});
|
return tempFormValues;
|
},
|
updateValue(index, info) {
|
console.log("updateValue", index, info);
|
const { computedFormList, formValues } = this;
|
computedFormList.map((item) => {
|
if (item.name == info.name) {
|
item.value = index;
|
formValues[item.name] = index;
|
}
|
});
|
console.log("formValues法院立案", formValues);
|
this.$emit("OverdueCourtFilingCom", formValues);
|
},
|
handleBlur(index, info) {
|
const { computedFormList, formValues } = this;
|
console.log("handleBlur", index, info);
|
if (info.name === "lawsuitFee") {
|
computedFormList.map((item) => {
|
if (item.name === "lawsuitFee") {
|
item.value = this.getMoney(item.value);
|
}
|
});
|
}
|
},
|
handleFocus(index, info) {
|
const { computedFormList, formValues } = this;
|
console.log("handleFocus", index, info);
|
if (info.name === "lawsuitFee") {
|
computedFormList.map((item) => {
|
if (item.name === "lawsuitFee") {
|
item.value = this.revertMoneyFormat(item.value);
|
}
|
});
|
}
|
},
|
// 格式化金额
|
getMoney(money) {
|
if (money && money != null) {
|
money = String(money);
|
let left = money.split(".")[0];
|
let right = money.split(".")[1];
|
right = right
|
? right.length >= 2
|
? "." + right.substr(0, 2)
|
: "." + right + "0"
|
: ".00";
|
var temp = left
|
.split("")
|
.reverse()
|
.join("")
|
.match(/(\d{1,3})/g);
|
|
return (
|
(Number(money) < 0 ? "-" : "") +
|
temp.join(",").split("").reverse().join("") +
|
right
|
);
|
} else if (Number(money) === 0) {
|
// 注意===在这里的使用，如果传入的money为0,if中会将其判定为boolean类型，故而要另外做===判断
|
return "0.00";
|
} else {
|
return "";
|
}
|
},
|
// 反向格式化金额
|
revertMoneyFormat(formattedMoney) {
|
if (!formattedMoney || formattedMoney === "") {
|
return null;
|
}
|
|
// 去除金额中的逗号和货币符号
|
const moneyWithoutCommas = formattedMoney.replace(/,/g, "");
|
const isNegative = moneyWithoutCommas.startsWith("-");
|
|
let [integerPart, decimalPart] = moneyWithoutCommas.split(".");
|
|
// 重新组合整数部分和小数部分
|
integerPart = integerPart.replace("-", ""); // 移除可能存在的负号
|
|
if (!decimalPart || decimalPart === "00") {
|
return isNegative ? -parseInt(integerPart) : parseInt(integerPart);
|
} else {
|
decimalPart = decimalPart.padEnd(2, "0"); // 补齐两位小数
|
const amount = parseFloat(`${integerPart}.${decimalPart}`);
|
return isNegative ? -amount : amount;
|
}
|
},
|
},
|
};
|
</script>
|
|
<style lang="postcss" scoped>
|
.form-section {
|
display: flex;
|
align-items: baseline;
|
& .search {
|
margin: 10px 0 0 50px;
|
padding: 0;
|
}
|
}
|
.header-block {
|
margin-bottom: 25px;
|
& .section-title {
|
margin: 30px 0 20px 0;
|
padding: 0 0 0 10px;
|
border-left: solid 2px #0081f0;
|
line-height: 16px;
|
font-size: 14px;
|
color: #222222;
|
}
|
}
|
.form-content {
|
& >>> .el-form {
|
display: grid;
|
padding-bottom: 6px;
|
& .el-form-item {
|
display: flex;
|
align-items: center;
|
padding-right: 40px;
|
margin: 0 0 24px 0;
|
& label {
|
padding: 0;
|
text-align: right;
|
margin-right: 10px;
|
line-height: 16px;
|
}
|
& .el-form-item__content {
|
flex: 1;
|
margin: 0;
|
}
|
&.right-item {
|
justify-content: right;
|
grid-column-start: 3;
|
grid-column-end: 4;
|
}
|
& .el-date-editor {
|
width: 100%;
|
}
|
& .el-input--small {
|
font-size: 14px;
|
}
|
& .el-select {
|
width: 100%;
|
}
|
}
|
& .form-sign {
|
& label::after {
|
content: ":";
|
}
|
}
|
}
|
|
& >>> .el-tag--info {
|
max-width: 94%;
|
overflow: hidden;
|
}
|
& >>> .el-select__tags-text {
|
display: inline-block;
|
max-width: 110px;
|
overflow: hidden;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
}
|
& .from-buttons {
|
/* padding-left: 82px; */
|
display: flex;
|
justify-content: flex-end;
|
& p {
|
margin: 0;
|
padding: 0;
|
}
|
& >>> .el-button {
|
height: 32px;
|
font-size: 12px;
|
margin-left: 12px;
|
}
|
& .normal-button {
|
height: 32px;
|
font-size: 14px;
|
margin-left: 22px;
|
}
|
& .el-button--primary {
|
background-color: #0081f0;
|
border-color: #0081f0;
|
}
|
}
|
& >>> .el-tag__close {
|
top: -5px;
|
right: -6px;
|
}
|
& >>> .el-form-item__label {
|
color: #888888;
|
}
|
& >>> .el-input__inner {
|
border-color: #eeeeee;
|
color: #222222;
|
}
|
|
& .is-error >>> .el-input__inner {
|
border-color: #f56c6c;
|
}
|
|
& .long-lable >>> .el-form-item__label {
|
line-height: 1.3em;
|
padding-top: 0;
|
}
|
& .textarea {
|
width: 100%;
|
& >>> textarea {
|
height: 100%;
|
}
|
}
|
& .range-separato {
|
width: 10px;
|
display: inline-block;
|
text-align: center;
|
}
|
& .range-input-item {
|
display: inline-block;
|
}
|
|
& .form-cols-1 {
|
grid-template-columns: 1fr;
|
& .textarea-item {
|
grid-column-start: 1;
|
grid-column-end: 1;
|
}
|
& .form-right {
|
grid-column-start: 1;
|
grid-column-end: 1;
|
}
|
}
|
|
& .form-cols-2 {
|
grid-template-columns: repeat(2, 1fr);
|
& .textarea-item {
|
grid-column-start: 1;
|
grid-column-end: 3;
|
}
|
& .form-right {
|
grid-column-start: 2;
|
grid-column-end: 3;
|
}
|
}
|
& .form-cols-3 {
|
grid-template-columns: repeat(3, 1fr);
|
& .textarea-item {
|
grid-column-start: 1;
|
grid-column-end: 4;
|
}
|
& .form-right {
|
grid-column-start: 3;
|
grid-column-end: 4;
|
}
|
}
|
|
& .form-cols-4,
|
& .form-cols-5 {
|
grid-template-columns: repeat(4, 1fr);
|
|
& .textarea-item {
|
grid-column-start: 1;
|
grid-column-end: 5;
|
}
|
& .form-right {
|
grid-column-start: 4;
|
grid-column-end: 5;
|
}
|
& .textarea-grid {
|
grid-column-start: 1;
|
grid-column-end: 1;
|
grid-row-end: span 3;
|
align-self: start;
|
&:nth-child(2) {
|
grid-column-start: 2;
|
grid-column-end: 2;
|
}
|
}
|
& .textarea-grid {
|
& >>> .el-textarea__inner {
|
height: 88px;
|
}
|
}
|
& .textarea-grid1 {
|
& >>> .el-textarea__inner {
|
height: 88px;
|
}
|
}
|
}
|
& .form-cols-5 {
|
grid-template-columns: repeat(5, 1fr);
|
& .form-right {
|
grid-column-start: 5;
|
}
|
|
& >>> .el-range-editor {
|
width: 215px !important;
|
}
|
}
|
}
|
</style>
|
