|
|
@@ -1,82 +1,137 @@
|
|
|
<template>
|
|
|
- <el-form ref="form" :model="form" :rules="rules">
|
|
|
- <ele-pro-table ref="table" :needPage="false" :columns="columns" :datasource="form.datasource"
|
|
|
- cache-key="systemRoleTable17" class="time-form">
|
|
|
- <!-- 表头工具栏 -->
|
|
|
- <template v-slot:toolbar>
|
|
|
- <el-button size="small" type="primary" icon="el-icon-plus" class="ele-btn-icon" @click="handlAdd">
|
|
|
- 新增
|
|
|
- </el-button>
|
|
|
- </template>
|
|
|
- <template v-slot:moneyName="scope">
|
|
|
- <el-form-item style="margin-bottom: 20px;" :prop="'datasource.' + scope.$index + '.moneyName'" :rules="{
|
|
|
+ <el-form ref="form" :model="form" :rules="rules">
|
|
|
+ <ele-pro-table
|
|
|
+ ref="table"
|
|
|
+ :needPage="false"
|
|
|
+ :columns="columns"
|
|
|
+ :datasource="form.datasource"
|
|
|
+ cache-key="systemRoleTable17"
|
|
|
+ class="time-form"
|
|
|
+ >
|
|
|
+ <!-- 表头工具栏 -->
|
|
|
+ <template v-slot:toolbar>
|
|
|
+ <el-button
|
|
|
+ size="small"
|
|
|
+ type="primary"
|
|
|
+ icon="el-icon-plus"
|
|
|
+ class="ele-btn-icon"
|
|
|
+ @click="handlAdd"
|
|
|
+ >
|
|
|
+ 新增
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ <template v-slot:moneyName="scope">
|
|
|
+ <el-form-item
|
|
|
+ style="margin-bottom: 20px"
|
|
|
+ :prop="'datasource.' + scope.$index + '.moneyName'"
|
|
|
+ :rules="{
|
|
|
required: true,
|
|
|
message: '请输入',
|
|
|
trigger: 'blur'
|
|
|
- }">
|
|
|
- <el-input v-model="scope.row.moneyName" placeholder="请输入"></el-input>
|
|
|
- </el-form-item>
|
|
|
- </template>
|
|
|
-
|
|
|
- <template v-slot:ratio="scope">
|
|
|
- <el-form-item style="margin-bottom: 20px" :prop="'datasource.' + scope.$index + '.ratio'" :rules="{
|
|
|
- required: true,
|
|
|
- pattern:numberReg,
|
|
|
- message: '请输入正确的比例',
|
|
|
- trigger: 'change'
|
|
|
- }">
|
|
|
- <el-input v-model="scope.row.ratio" placeholder="请输入" @input="(val)=>ratioInput(val,scope.$index)">
|
|
|
- <template slot="append">%</template>
|
|
|
- </el-input>
|
|
|
- </el-form-item>
|
|
|
- </template>
|
|
|
- <template v-slot:price="scope">
|
|
|
- <el-form-item style="margin-bottom: 20px" :prop="'datasource.' + scope.$index + '.price'" :rules="{
|
|
|
- required: true,
|
|
|
- pattern:numberReg,
|
|
|
- message: '请输入正确的金额',
|
|
|
- trigger: 'change'
|
|
|
- }">
|
|
|
- {{scope.row.price||0.00}}元
|
|
|
- <!-- <el-input v-model="scope.row.price" placeholder="请输入" disabled>
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ v-model="scope.row.moneyName"
|
|
|
+ placeholder="请输入"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </template>
|
|
|
+ <template v-slot:headerMoneyName="{ column }">
|
|
|
+ <span class="is-required">{{ column.label }}</span>
|
|
|
+ </template>
|
|
|
+ <template v-slot:ratio="scope">
|
|
|
+ <el-form-item
|
|
|
+ style="margin-bottom: 20px"
|
|
|
+ :prop="'datasource.' + scope.$index + '.ratio'"
|
|
|
+ :rules="{
|
|
|
+ required: true,
|
|
|
+ pattern: numberReg,
|
|
|
+ message: '请输入正确的比例',
|
|
|
+ trigger: 'change'
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ v-model="scope.row.ratio"
|
|
|
+ placeholder="请输入"
|
|
|
+ @input="(val) => ratioInput(val, scope.$index)"
|
|
|
+ >
|
|
|
+ <template slot="append">%</template>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </template>
|
|
|
+ <template v-slot:headerRatio="{ column }">
|
|
|
+ <span class="is-required">{{ column.label }}</span>
|
|
|
+ </template>
|
|
|
+ <template v-slot:price="scope">
|
|
|
+ <el-form-item
|
|
|
+ style="margin-bottom: 20px"
|
|
|
+ :prop="'datasource.' + scope.$index + '.price'"
|
|
|
+ :rules="{
|
|
|
+ required: true,
|
|
|
+ pattern: numberReg,
|
|
|
+ message: '请输入正确的金额',
|
|
|
+ trigger: 'change'
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ {{ scope.row.price || 0.0 }}元
|
|
|
+ <!-- <el-input v-model="scope.row.price" placeholder="请输入" disabled>
|
|
|
<template slot="append">元</template>
|
|
|
</el-input> -->
|
|
|
</el-form-item>
|
|
|
- </template>
|
|
|
- <template v-slot:deadLine="scope">
|
|
|
- <el-form-item style="margin-bottom: 20px" :prop="'datasource.' + scope.$index + '.deadLine'" :rules="{
|
|
|
+ </template>
|
|
|
+ <template v-slot:deadLine="scope">
|
|
|
+ <el-form-item
|
|
|
+ style="margin-bottom: 20px"
|
|
|
+ :prop="'datasource.' + scope.$index + '.deadLine'"
|
|
|
+ :rules="{
|
|
|
required: true,
|
|
|
message: '请选择日期',
|
|
|
trigger: 'change'
|
|
|
- }">
|
|
|
- <el-date-picker
|
|
|
- style="width:140px"
|
|
|
- v-model="scope.row.deadLine"
|
|
|
- type="date"
|
|
|
- placeholder="选择日期">
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <el-date-picker
|
|
|
+ style="width: 140px"
|
|
|
+ v-model="scope.row.deadLine"
|
|
|
+ type="date"
|
|
|
+ placeholder="选择日期"
|
|
|
+ >
|
|
|
</el-date-picker>
|
|
|
- </el-form-item>
|
|
|
- </template>
|
|
|
- <template v-slot:remark="scope">
|
|
|
- <el-form-item style="margin-bottom: 20px" :prop="'datasource.' + scope.$index + '.remark'">
|
|
|
- <el-input v-model="scope.row.remark" type="textarea" placeholder="请输入"></el-input>
|
|
|
</el-form-item>
|
|
|
</template>
|
|
|
- <!-- 操作列 -->
|
|
|
- <template v-slot:action="{ row }">
|
|
|
- <el-popconfirm class="ele-action" title="确定要删除吗?" @confirm="remove(row)">
|
|
|
- <template v-slot:reference>
|
|
|
- <el-link type="danger" :underline="false" icon="el-icon-delete">
|
|
|
- 删除
|
|
|
- </el-link>
|
|
|
- </template>
|
|
|
- </el-popconfirm>
|
|
|
- </template>
|
|
|
- </ele-pro-table>
|
|
|
- </el-form>
|
|
|
- </template>
|
|
|
- <script>
|
|
|
- import { emailReg, phoneReg,numberReg } from 'ele-admin';
|
|
|
+ <template v-slot:headerDeadLine="{ column }">
|
|
|
+ <span class="is-required">{{ column.label }}</span>
|
|
|
+ </template>
|
|
|
+ <template v-slot:remark="scope">
|
|
|
+ <el-form-item
|
|
|
+ style="margin-bottom: 20px"
|
|
|
+ :prop="'datasource.' + scope.$index + '.remark'"
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ v-model="scope.row.remark"
|
|
|
+ type="textarea"
|
|
|
+ placeholder="请输入"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </template>
|
|
|
+ <!-- 操作列 -->
|
|
|
+ <template v-slot:action="{ row }">
|
|
|
+ <el-popconfirm
|
|
|
+ class="ele-action"
|
|
|
+ title="确定要删除吗?"
|
|
|
+ @confirm="remove(row)"
|
|
|
+ >
|
|
|
+ <template v-slot:reference>
|
|
|
+ <el-link type="danger" :underline="false" icon="el-icon-delete">
|
|
|
+ 删除
|
|
|
+ </el-link>
|
|
|
+ </template>
|
|
|
+ </el-popconfirm>
|
|
|
+ </template>
|
|
|
+ </ele-pro-table>
|
|
|
+ </el-form>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+ import { emailReg, phoneReg, numberReg } from 'ele-admin';
|
|
|
export default {
|
|
|
props: {
|
|
|
delDetailIds: Array
|
|
|
@@ -84,11 +139,11 @@
|
|
|
data() {
|
|
|
const defaultForm = {
|
|
|
key: null,
|
|
|
- deadLine:null,
|
|
|
- moneyName:'',
|
|
|
- price:null,
|
|
|
- ratio:null,
|
|
|
- remark:''
|
|
|
+ deadLine: null,
|
|
|
+ moneyName: '',
|
|
|
+ price: null,
|
|
|
+ ratio: null,
|
|
|
+ remark: ''
|
|
|
};
|
|
|
return {
|
|
|
numberReg,
|
|
|
@@ -105,18 +160,20 @@
|
|
|
align: 'center',
|
|
|
fixed: 'left'
|
|
|
},
|
|
|
-
|
|
|
+
|
|
|
{
|
|
|
width: 240,
|
|
|
prop: 'moneyName',
|
|
|
label: '款项名称',
|
|
|
- slot: 'moneyName'
|
|
|
+ slot: 'moneyName',
|
|
|
+ headerSlot: 'headerMoneyName'
|
|
|
},
|
|
|
{
|
|
|
width: 170,
|
|
|
prop: 'ratio',
|
|
|
label: '比例',
|
|
|
- slot: 'ratio'
|
|
|
+ slot: 'ratio',
|
|
|
+ headerSlot: 'headerRatio'
|
|
|
},
|
|
|
{
|
|
|
width: 150,
|
|
|
@@ -124,12 +181,13 @@
|
|
|
label: '金额',
|
|
|
slot: 'price'
|
|
|
},
|
|
|
-
|
|
|
+
|
|
|
{
|
|
|
width: 160,
|
|
|
prop: 'deadLine',
|
|
|
label: '截止日期',
|
|
|
- slot: 'deadLine'
|
|
|
+ slot: 'deadLine',
|
|
|
+ headerSlot: 'headerDeadLine'
|
|
|
},
|
|
|
{
|
|
|
width: 260,
|
|
|
@@ -145,87 +203,93 @@
|
|
|
slot: 'action',
|
|
|
showOverflowTooltip: true
|
|
|
}
|
|
|
- ],
|
|
|
+ ]
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
canHandl() {
|
|
|
return this.form.datasource.length;
|
|
|
},
|
|
|
- discountAmount(){
|
|
|
- return this.$store.state.concact.discountAmount
|
|
|
+ discountAmount() {
|
|
|
+ return this.$store.state.concact.discountAmount;
|
|
|
}
|
|
|
},
|
|
|
- watch:{
|
|
|
- discountAmount(newval){
|
|
|
- if(newval){
|
|
|
- this.refreshprice()
|
|
|
+ watch: {
|
|
|
+ discountAmount(newval) {
|
|
|
+ if (newval) {
|
|
|
+ this.refreshprice();
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
//输入比例更新金额
|
|
|
- async ratioInput(val,index=null){
|
|
|
- val=Number(val)
|
|
|
- try {
|
|
|
- if(index!=null){
|
|
|
- await this.checkRatio()
|
|
|
- }
|
|
|
- let newval=(val/100).toFixed(2)
|
|
|
- let price=(this.discountAmount*newval).toFixed(2)
|
|
|
- console.log(newval,price,index,'88888')
|
|
|
- if(index!=null){
|
|
|
- console.log(newval,price,index,'999999')
|
|
|
- this.$set( this.form.datasource[index], 'price', price)
|
|
|
- }else{
|
|
|
- return price
|
|
|
+ async ratioInput(val, index = null) {
|
|
|
+ val = Number(val);
|
|
|
+ try {
|
|
|
+ if (index != null) {
|
|
|
+ await this.checkRatio();
|
|
|
}
|
|
|
- } catch (error) {
|
|
|
- return 0
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- //this.$set( this.form.datasource[index], 'price', price)
|
|
|
+ let newval = (val / 100).toFixed(2);
|
|
|
+ let price = (this.discountAmount * newval).toFixed(2);
|
|
|
+ console.log(newval, price, index, '88888');
|
|
|
+ if (index != null) {
|
|
|
+ console.log(newval, price, index, '999999');
|
|
|
+ this.$set(this.form.datasource[index], 'price', price);
|
|
|
+ } else {
|
|
|
+ return price;
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ return 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ //this.$set( this.form.datasource[index], 'price', price)
|
|
|
},
|
|
|
//检验比例
|
|
|
- checkRatio(){
|
|
|
+ checkRatio() {
|
|
|
return new Promise((resolve, reject) => {
|
|
|
- let newData=this.form.datasource,sum=0
|
|
|
- newData.forEach(r=>{
|
|
|
- if(r.ratio){
|
|
|
- sum+=Number(r.ratio)
|
|
|
- }
|
|
|
- })
|
|
|
- console.log(sum,'3333333')
|
|
|
- if(sum>100){
|
|
|
- this.$message.error('总共比例不能超过100')
|
|
|
- this.$set( this.form.datasource[this.form.datasource.length-1], 'ratio', null)
|
|
|
- this.$set( this.form.datasource[this.form.datasource.length-1], 'price', 0.00)
|
|
|
- reject(false);
|
|
|
- }else{
|
|
|
- resolve(true)
|
|
|
- }
|
|
|
- })
|
|
|
-
|
|
|
+ let newData = this.form.datasource,
|
|
|
+ sum = 0;
|
|
|
+ newData.forEach((r) => {
|
|
|
+ if (r.ratio) {
|
|
|
+ sum += Number(r.ratio);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ console.log(sum, '3333333');
|
|
|
+ if (sum > 100) {
|
|
|
+ this.$message.error('总共比例不能超过100');
|
|
|
+ this.$set(
|
|
|
+ this.form.datasource[this.form.datasource.length - 1],
|
|
|
+ 'ratio',
|
|
|
+ null
|
|
|
+ );
|
|
|
+ this.$set(
|
|
|
+ this.form.datasource[this.form.datasource.length - 1],
|
|
|
+ 'price',
|
|
|
+ 0.0
|
|
|
+ );
|
|
|
+ reject(false);
|
|
|
+ } else {
|
|
|
+ resolve(true);
|
|
|
+ }
|
|
|
+ });
|
|
|
},
|
|
|
- refreshprice(){
|
|
|
- let newData=this.form.datasource
|
|
|
- newData.forEach(async (r,index)=>{
|
|
|
- if(r.ratio){
|
|
|
- console.log(this.ratioInput(Number(r.ratio)),'9999888888')
|
|
|
- r.price =await this.ratioInput(Number(r.ratio));
|
|
|
+ refreshprice() {
|
|
|
+ let newData = this.form.datasource;
|
|
|
+ newData.forEach(async (r, index) => {
|
|
|
+ if (r.ratio) {
|
|
|
+ console.log(this.ratioInput(Number(r.ratio)), '9999888888');
|
|
|
+ r.price = await this.ratioInput(Number(r.ratio));
|
|
|
}
|
|
|
- })
|
|
|
+ });
|
|
|
},
|
|
|
- // 返回列表数据
|
|
|
- getTableValue(){
|
|
|
- return this.form.datasource
|
|
|
+ // 返回列表数据
|
|
|
+ getTableValue() {
|
|
|
+ return this.form.datasource;
|
|
|
},
|
|
|
//修改回显
|
|
|
- putTableValue(data){
|
|
|
- if(data&&data?.length){
|
|
|
- this.form.datasource=data
|
|
|
+ putTableValue(data) {
|
|
|
+ if (data && data?.length) {
|
|
|
+ this.form.datasource = data;
|
|
|
}
|
|
|
},
|
|
|
remove(row) {
|
|
|
@@ -254,22 +318,18 @@
|
|
|
item.key = this.form.datasource.length + 1;
|
|
|
this.form.datasource.push(item);
|
|
|
},
|
|
|
-
|
|
|
|
|
|
- validateForm (callback) {
|
|
|
+ validateForm(callback) {
|
|
|
//开始表单校验
|
|
|
this.$refs.form.validate((valid) => {
|
|
|
callback(valid);
|
|
|
});
|
|
|
- },
|
|
|
-
|
|
|
-
|
|
|
+ }
|
|
|
}
|
|
|
};
|
|
|
- </script>
|
|
|
- <style lang="scss" scoped>
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
.time-form .el-form-item {
|
|
|
margin-bottom: 0 !important;
|
|
|
}
|
|
|
- </style>
|
|
|
-
|
|
|
+</style>
|