<template>
<div class="auditInfo itemForm">
<el-form :model="form" ref="formList" label-width="110px" :key="key">
<div v-for="(item, index) in form.auditInfo" :key="index" class="auditInfo-item">
<p class="auditInfo-item-name">审核信息{{ index + 1 }}</p>
<div class="auditInfo-item-list">
<el-row class="auditInfo-item-input">
<el-col :span="8">
<el-form-item :prop="'auditInfo.' + index + '.YSDM'" :rules="rules.YSDM">
<span slot="label">
要素代码： <br />
<p class="label-detail">（YSDM）</p>
</span>
<el-input :disabled="$store.state.business.Edit" v-model="form.auditInfo[index].YSDM"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item :prop="'auditInfo.' + index + '.YWH'" :rules="rules.YWH">
<span slot="label">
业务号： <br />
<p class="label-detail">（YWH）</p>
</span>
<el-input :disabled="$store.state.business.Edit" v-model="form.auditInfo[index].YWH"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item :prop="'auditInfo.' + index + '.JDMC'" :rules="rules.JDMC">
<span slot="label">
节点名称： <br />
<p class="label-detail">（JDMC）</p>
</span>
<el-input :disabled="$store.state.business.Edit" v-model="form.auditInfo[index].JDMC"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row class="auditInfo-item-input">
<el-col :span="24">
<el-form-item :prop="'auditInfo.' + index + '.SHYJ'" :rules="rules.SHYJ">
<span slot="label">
审核意见： <br />
<p class="label-detail">（SHYJ）</p>
</span>
<el-input :disabled="$store.state.business.Edit" v-model="form.auditInfo[index].SHYJ" type="textarea"
:rows="2"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row class="auditInfo-item-input">
<el-col :span="8">
<el-form-item :prop="'auditInfo.' + index + '.SHRYXM'" :rules="rules.SHRYXM">
<span slot="label">
审核人员姓名： <br />
<p class="label-detail">（SHRYXM）</p>
</span>
<el-input :disabled="$store.state.business.Edit" v-model="form.auditInfo[index].SHRYXM"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item :prop="'auditInfo.' + index + '.SHKSSJ'" :rules="rules.SHKSSJ">
<span slot="label">
审核开始时间： <br />
<p class="label-detail">（SHKSSJ）</p>
</span>
<el-date-picker :disabled="$store.state.business.Edit" type="datetime" clearable
v-model="form.auditInfo[index].SHKSSJ" value-format="yyyy-MM-dd HH:mm:ss"
:picker-options="item.traceStart" @change="changeTraceStart(item)"></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item :prop="'auditInfo.' + index + '.SHJSSJ'" :rules="rules.SHJSSJ">
<span slot="label">
审核结束时间： <br />
<p class="label-detail">（SHJSSJ）</p>
</span>
<el-date-picker :disabled="$store.state.business.Edit" type="datetime" clearable
v-model="form.auditInfo[index].SHJSSJ" :picker-options="item.traceEnd" @change="changeTraceEnd(item)"
value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
</el-form-item>
</el-col>
</el-row>
<el-row class="auditInfo-item-input">
<el-col :span="8">
<el-form-item :prop="'auditInfo.' + index + '.SXH'" :rules="{ ...rules.SXH, ...typeNum }">
<span slot="label">
顺序号： <br />
<p class="label-detail">（SXH）</p>
</span>
<el-input-number controls-position="right" :disabled="$store.state.business.Edit"
v-model.number="form.auditInfo[index].SXH" type="number"
v-only-number="{ max: 9999, min: 0, precision: 0 }"></el-input-number>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item :prop="'auditInfo.' + index + '.CZJG'" :rules="rules.SHKSSJ">
<span slot="label">
操作结果： <br />
<p class="label-detail">（CZJG）</p>
</span>
<el-select :disabled="$store.state.business.Edit" v-model="form.auditInfo[index].CZJG">
<el-option v-for="item in dicData['A37']" :key="item.DCODE" :label="item.DNAME" :value="item.DCODE">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item :prop="'auditInfo.' + index + '.QXDM'" :rules="rules.QXDM">
<span slot="label">
区县代码： <br />
<p class="label-detail">（QXDM）</p>
</span>
<el-input :disabled="$store.state.business.Edit" v-model="form.auditInfo[index].QXDM"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item :prop="'auditInfo.' + index + '.BZ'" :rules="rules.BZ">
<span slot="label">
区县代码： <br />
<p class="label-detail">（BZ）</p>
</span>
<el-input :disabled="$store.state.business.Edit" v-model="form.auditInfo[index].BZ"></el-input>
</el-form-item>
</el-col>
</el-row>
</div>
</div>
</el-form>
<message-tips ref="msg" />
</div>
</template>
<script>
import djfDjSh from "@/api/djfDjSh";
import ruleMixin from "@/mixins/ruleMixin.js";
// 审核信息
export default {
mixins: [ruleMixin],
props: {
bsmSjsb: {
type: String,
default: "",
},
bsmYwsjb: {
type: String,
default: "",
},
},
data() {
return {
form: {
auditInfo: [
{
YSDM: "",
YWH: "",
JDMC: "",
SHYJ: "",
SHRYXM: "",
SHKSSJ: "",
traceStart: {},
SHJSSJ: "",
traceEnd: {},
SXH: "",
CZJG: "",
QXDM: "",
BZ: "",
},
],
},
};
},
methods: {
changeTraceEnd(item) {
if (item.SHJSSJ !== null) {
//当前值为空 也会进行判断 所以条件最好不要非空验证
item.traceStart = {
disabledDate: (time) => {
return time.getTime() > new Date(item.SHJSSJ).getTime(); //大于结束时间的不选
},
};
} else {
item.traceStart = {};
}
},
//跟踪API结束时间限制开始时间
changeTraceStart(item) {
if (item.SHKSSJ !== null) {
//当前值为空 也会进行判断 所以条件最好不要非空验证
item.traceEnd = {
disabledDate: (time) => {
return time.getTime() < new Date(item.SHKSSJ).getTime(); //小于开始时间的不选
},
};
} else {
item.traceEnd = {};
}
},
async featchData() {
try {
let { result: res } = await djfDjSh.getDjfDjShById(this.bsmSjsb);
this.form.auditInfo = res;
//this.featchRule()
} catch (error) {
this.$refs.msg.messageShow();
}
},
handleUpdateForm() {
return new Promise(async (resolve) => {
try {
let res = await djfDjSh.updateDjfDjSh(this.form.auditInfo);
// this.$refs['formList'].resetFields();
resolve(res.code);
} catch (error) {
this.$refs.msg.messageShow();
}
});
},
},
};
</script>
<style scoped lang="scss">
@import "./css/itemForm.scss";
.auditInfo-item {
display: flex;
height: 100%;
margin-bottom: 15px;
margin-right: 5px;
&-name {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
padding: 10px 20px;
line-height: 28px;
border: 1px solid #ccc;
margin-right: 15px;
border-radius: 3px;
}
&-list {
width: 100%;
flex: 1;
display: flex;
justify-content: center;
flex-direction: column;
}
}
</style>