|
@@ -11,23 +11,23 @@
|
|
|
<!-- 项目名称、类型开始 -->
|
|
|
<div class="Apply1">
|
|
|
<div class="inpInterval">项目名称</div>
|
|
|
- <el-select v-model="value" style="width: 30%;" placeholder="请选择">
|
|
|
+ <el-select v-model="selects.projectName" style="width: 30%;" placeholder="请选择">
|
|
|
<el-option
|
|
|
- v-for="item in options"
|
|
|
- :key="item.value"
|
|
|
- :label="item.label"
|
|
|
- :value="item.value">
|
|
|
+ v-for="item in projectFilter"
|
|
|
+ :key="item.id"
|
|
|
+ :label="item.title"
|
|
|
+ :value="item.id">
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
</div>
|
|
|
<div class="Apply1">
|
|
|
<div class="inpInterval">项目类型</div>
|
|
|
- <el-select v-model="value" placeholder="请选择">
|
|
|
+ <el-select v-model="selects.projectType" placeholder="请选择">
|
|
|
<el-option
|
|
|
- v-for="item in options"
|
|
|
- :key="item.value"
|
|
|
- :label="item.label"
|
|
|
- :value="item.value">
|
|
|
+ v-for="item in projectType"
|
|
|
+ :key="item.id"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.id">
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
</div>
|
|
@@ -42,13 +42,13 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<hr>
|
|
|
- <div class="moneyBlock">
|
|
|
+ <div class="moneyBlock" v-for="(item,index) in directFundBlock" :key="index"> <!-- 直接经费 -->
|
|
|
<div class="howMoneyFlex">
|
|
|
<div class="howMoney">
|
|
|
<div class="inpInterval">直接经费</div>
|
|
|
- <el-select v-model="value" placeholder="请选择">
|
|
|
+ <el-select v-model="item.directFundData" placeholder="请选择">
|
|
|
<el-option
|
|
|
- v-for="item in options"
|
|
|
+ v-for="item in item.directFundSelects"
|
|
|
:key="item.value"
|
|
|
:label="item.label"
|
|
|
:value="item.value">
|
|
@@ -57,19 +57,19 @@
|
|
|
</div>
|
|
|
<div class="howMoney">
|
|
|
<div class="inpInterval twoStyle">预算</div>
|
|
|
- <input type="text" class="howMoneyInp" placeholder="金额" value="">
|
|
|
+ <el-input v-model="item.budget" class="howMoneyInp" placeholder="金额"></el-input>
|
|
|
</div>
|
|
|
<div class="howMoney">
|
|
|
<div class="inpInterval twoStyle">已支付</div>
|
|
|
- <input type="text" class="howMoneyInp" placeholder="金额" value="">
|
|
|
+ <el-input v-model="item.usedFund" class="howMoneyInp" placeholder="金额"></el-input>
|
|
|
</div>
|
|
|
<div class="howMoney">
|
|
|
<div class="inpInterval twoStyle">余额</div>
|
|
|
- <input type="text" class="howMoneyInp" placeholder="金额" value="">
|
|
|
+ <el-input v-model="item.remainFund" class="howMoneyInp" placeholder="金额"></el-input>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="howMoney" style="margin-top:20px">
|
|
|
- <div class="inpInterval">事由</div>
|
|
|
+ <div class="inpInterval" style="position: relative;top:-20px">事由</div>
|
|
|
<el-input
|
|
|
type="textarea"
|
|
|
:rows="3"
|
|
@@ -77,81 +77,92 @@
|
|
|
resize="none"
|
|
|
style="width:800px"
|
|
|
placeholder="请输入内容"
|
|
|
- v-model="textarea">
|
|
|
+ v-model="item.reason">
|
|
|
</el-input>
|
|
|
</div>
|
|
|
- <div>
|
|
|
- <div class="addMoneyBtn">
|
|
|
- <div class="jia">+</div>添加
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="addMoneyBtn" @click="addDirectFund">
|
|
|
+ <div class="jia">+</div>添加
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="moneyBlock">
|
|
|
- <div class="howMoneyFlex">
|
|
|
- <div class="howMoney">
|
|
|
- <div class="inpInterval">间接经费</div>
|
|
|
- <el-select v-model="value" placeholder="请选择">
|
|
|
- <el-option
|
|
|
- v-for="item in options"
|
|
|
- :key="item.value"
|
|
|
- :label="item.label"
|
|
|
- :value="item.value">
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
- </div>
|
|
|
- <div class="howMoney">
|
|
|
- <div class="inpInterval twoStyle">预算</div>
|
|
|
- <input type="text" class="howMoneyInp" placeholder="金额" value="">
|
|
|
- </div>
|
|
|
- <div class="howMoney">
|
|
|
- <div class="inpInterval twoStyle">已支付</div>
|
|
|
- <input type="text" class="howMoneyInp" placeholder="金额" value="">
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <div> <!-- 间接经费 -->
|
|
|
+ <div class="moneyBlock" v-for="(item,i) in indirectFundBlock" :key="i">
|
|
|
+ <div class="howMoneyFlex">
|
|
|
+ <div class="howMoney">
|
|
|
+ <div class="inpInterval">间接经费</div>
|
|
|
+ <el-select v-model="item.indirectFundData" placeholder="请选择">
|
|
|
+ <el-option
|
|
|
+ v-for="item in item.indirectFundSelects"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="howMoney">
|
|
|
+ <div class="inpInterval twoStyle">预算</div>
|
|
|
+ <el-input v-model="item.budget" class="howMoneyInp" placeholder="金额"></el-input>
|
|
|
+ </div>
|
|
|
+ <div class="howMoney">
|
|
|
+ <div class="inpInterval twoStyle">已支付</div>
|
|
|
+ <el-input v-model="item.usedFund" class="howMoneyInp" placeholder="金额"></el-input>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="howMoney">
|
|
|
+ <div class="inpInterval twoStyle">余额</div>
|
|
|
+ <el-input v-model="item.reason" class="howMoneyInp" placeholder="金额"></el-input>
|
|
|
+
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="howMoney">
|
|
|
- <div class="inpInterval twoStyle">余额</div>
|
|
|
- <input type="text" class="howMoneyInp" placeholder="金额" value="">
|
|
|
+ <div class="howMoney" style="margin-top:20px">
|
|
|
+ <div class="inpInterval" style="position: relative;top:-20px">事由</div>
|
|
|
+ <el-input
|
|
|
+ type="textarea"
|
|
|
+ :rows="3"
|
|
|
+ class="textArea"
|
|
|
+ resize="none"
|
|
|
+ style="width:800px"
|
|
|
+ placeholder="请输入内容"
|
|
|
+ v-model="item.reason">
|
|
|
+ </el-input>
|
|
|
</div>
|
|
|
+
|
|
|
</div>
|
|
|
- <div class="howMoney" style="margin-top:20px">
|
|
|
- <div class="inpInterval">事由</div>
|
|
|
- <el-input
|
|
|
- type="textarea"
|
|
|
- :rows="3"
|
|
|
- class="textArea"
|
|
|
- resize="none"
|
|
|
- style="width:800px"
|
|
|
- placeholder="请输入内容"
|
|
|
- v-model="textarea">
|
|
|
- </el-input>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <div class="addMoneyBtn">
|
|
|
- <div class="jia">+</div>添加
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="addMoneyBtn" @click="addIndirectFund">
|
|
|
+ <div class="jia">+</div>添加
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <div class="moneyBlock">
|
|
|
+
|
|
|
+
|
|
|
+ <div class="moneyBlock"> <!-- 其他经费 -->
|
|
|
<div class="howMoneyFlex">
|
|
|
<div class="howMoney">
|
|
|
<div class="inpInterval" >其他</div>
|
|
|
- <el-input v-model="input" placeholder="请输入内容"></el-input>
|
|
|
+ <el-input v-model="residue.elseReason" placeholder="请输入内容"></el-input>
|
|
|
</div>
|
|
|
<div class="howMoney">
|
|
|
<div class="inpInterval twoStyle">预算</div>
|
|
|
- <input type="text" class="howMoneyInp" placeholder="金额" value="">
|
|
|
+ <el-input v-model="residue.budget" class="howMoneyInp" placeholder="金额"></el-input>
|
|
|
</div>
|
|
|
<div class="howMoney">
|
|
|
<div class="inpInterval twoStyle">已支付</div>
|
|
|
- <input type="text" class="howMoneyInp" placeholder="金额" value="">
|
|
|
+ <el-input v-model="residue.usedFund" class="howMoneyInp" placeholder="金额"></el-input>
|
|
|
</div>
|
|
|
<div class="howMoney">
|
|
|
<div class="inpInterval twoStyle">余额</div>
|
|
|
- <input type="text" class="howMoneyInp" placeholder="金额" value="">
|
|
|
+ <el-input v-model="residue.remainFund" class="howMoneyInp" placeholder="金额"></el-input>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="howMoney" style="margin-top:20px">
|
|
|
- <div class="inpInterval">备注</div>
|
|
|
+ <div class="inpInterval" style="position: relative;top:-20px">备注</div>
|
|
|
<el-input
|
|
|
type="textarea"
|
|
|
:rows="3"
|
|
@@ -159,12 +170,14 @@
|
|
|
class="textArea"
|
|
|
style="width:800px"
|
|
|
placeholder="请输入内容"
|
|
|
- v-model="textarea">
|
|
|
+ v-model="residue.reason">
|
|
|
</el-input>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
- <div>
|
|
|
+
|
|
|
+
|
|
|
+ <div> <!-- 附件上传 -->
|
|
|
<div class="tabTit">
|
|
|
<div><p>附件上传</p></div>
|
|
|
</div>
|
|
@@ -174,7 +187,10 @@
|
|
|
<div class="jia">+</div>添加
|
|
|
</div>
|
|
|
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
<div class="baseBtn">
|
|
|
<div class="blockWidth">
|
|
|
<el-button type="primary">生成表单</el-button>
|
|
@@ -191,16 +207,135 @@ export default {
|
|
|
textarea:'',
|
|
|
value: '',
|
|
|
input:'',
|
|
|
- options: [{
|
|
|
- value: '选项1',
|
|
|
- label: '黄金糕'
|
|
|
- }],
|
|
|
+ selects:{
|
|
|
+ projectName:'',
|
|
|
+ projectType:''
|
|
|
+ },
|
|
|
+ projectFilter:[], //项目名称
|
|
|
+ projectType:[ //项目类型
|
|
|
+
|
|
|
+ {
|
|
|
+ id:1,
|
|
|
+ name:'个人创客'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id:2,
|
|
|
+ name:'创客活动'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ directFundBlock:[ //直接经费
|
|
|
+ {
|
|
|
+ directFundData:'',
|
|
|
+ directFundSelects:[
|
|
|
+ {
|
|
|
+ value:1,
|
|
|
+ label:'小型仪器设备费'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value:2,
|
|
|
+ label:'材料费'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value:3,
|
|
|
+ label:'测试化验加工费'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value:4,
|
|
|
+ label:'项目协作费'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value:5,
|
|
|
+ label:'其他支出'
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ budget:'', //预算
|
|
|
+ usedFund:'', //已使用
|
|
|
+ remainFund:'',
|
|
|
+ reason:'' //理由
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ newDirectFundBlock:{ //添加直接经费
|
|
|
+ directFundData:'',
|
|
|
+ directFundSelects:[],
|
|
|
+ budget:'', //预算
|
|
|
+ usedFund:'', //已使用
|
|
|
+ remainFund:'',
|
|
|
+ reason:'' //理由
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ indirectFundBlock:[ //间接经费
|
|
|
+ {
|
|
|
+ indirectFundData:'',
|
|
|
+ indirectFundSelects:[
|
|
|
+ {
|
|
|
+ value:1,
|
|
|
+ label:'项目成功鉴定费'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value:2,
|
|
|
+ label:'参展参赛费'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value:3,
|
|
|
+ label:'创客交流活动费'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value:4,
|
|
|
+ label:'知识产权事务费'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value:5,
|
|
|
+ label:'其他支出'
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ budget:'', //预算
|
|
|
+ usedFund:'', //已使用
|
|
|
+ remainFund:'',
|
|
|
+ reason:'' //理由
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ newIndirectFundBlock:{ //添加间接经费
|
|
|
+ indirectFundData:'',
|
|
|
+ indirectFundSelects:[],
|
|
|
+ budget:'', //预算
|
|
|
+ usedFund:'', //已使用
|
|
|
+ remainFund:'',
|
|
|
+ reason:'' //理由
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ residue:{ //其他
|
|
|
+ elseReason:'',
|
|
|
+ budget:'',
|
|
|
+ usedFund:'',
|
|
|
+ remainFund:'',
|
|
|
+ reason:'',
|
|
|
+ }
|
|
|
+ ,
|
|
|
}
|
|
|
},
|
|
|
methods:{
|
|
|
getData(){
|
|
|
-
|
|
|
+ this.ajax
|
|
|
+ .get(this.$store.state.api+'/SelectMakerFundSelects',{uid:this.$store.state.userInfo.userid})
|
|
|
+ .then(res=>{
|
|
|
+ console.log(res.data);
|
|
|
+ this.projectFilter=res.data[0]
|
|
|
+ },err=>{
|
|
|
+ console.log(err);
|
|
|
+ })
|
|
|
+ },
|
|
|
+ addDirectFund(){
|
|
|
+ this.directFundBlock.push(this.newDirectFundBlock)
|
|
|
},
|
|
|
+ addIndirectFund(){
|
|
|
+ this.indirectFundBlock.push(this.newIndirectFundBlock)
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted(){
|
|
|
+ this.getData()
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
@@ -237,6 +372,7 @@ export default {
|
|
|
|
|
|
.moneyBlock{
|
|
|
max-width: 100%;
|
|
|
+ margin-bottom: 20px;
|
|
|
.howMoney{
|
|
|
display: flex;
|
|
|
margin-right: 10px;
|
|
@@ -246,13 +382,9 @@ export default {
|
|
|
display: flex;
|
|
|
}
|
|
|
.howMoneyInp{
|
|
|
- height: 40px;
|
|
|
- outline:none ;
|
|
|
- width: 70%;
|
|
|
- border: #ccc 1px solid;
|
|
|
- border-radius: 5px;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 1px 15px;
|
|
|
+ .el-input__inner{
|
|
|
+ width: 170px;
|
|
|
+ }
|
|
|
}
|
|
|
.addMoneyBtn{ //添加样式
|
|
|
width: 120px;
|