|
|
@@ -0,0 +1,378 @@
|
|
|
+<!-- 新增/编辑弹窗 -->
|
|
|
+<template>
|
|
|
+ <ele-modal
|
|
|
+ width="700px"
|
|
|
+ :visible="visible"
|
|
|
+ :append-to-body="true"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ custom-class="ele-dialog-form"
|
|
|
+ :title="isDetail ? '收款条件详情' : (isUpdate ? '修改收款条件' : '新增收款条件')"
|
|
|
+ @update:visible="updateVisible"
|
|
|
+ >
|
|
|
+ <el-form
|
|
|
+ ref="form"
|
|
|
+ :model="form"
|
|
|
+ :rules="rules"
|
|
|
+ label-width="140px"
|
|
|
+ >
|
|
|
+ <!-- 收款条件编码 -->
|
|
|
+ <el-form-item label="收款条件编码:" prop="code">
|
|
|
+ <el-input
|
|
|
+ v-model="form.code"
|
|
|
+ placeholder="SKTJ+年月日+3位数字"
|
|
|
+ :disabled="true"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <!-- 收款条件名称 -->
|
|
|
+ <el-form-item label="收款条件名称:" prop="name">
|
|
|
+ <el-input
|
|
|
+ clearable
|
|
|
+ v-model="form.name"
|
|
|
+ placeholder="请输入收款条件名称"
|
|
|
+ :disabled="isDetail"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <!-- 收款日计算日期 -->
|
|
|
+ <el-form-item label="收款日计算日期:" prop="calcDateType">
|
|
|
+ <el-select
|
|
|
+ v-model="form.calcDateType"
|
|
|
+ placeholder="请选择"
|
|
|
+ style="width: 100%"
|
|
|
+ :disabled="isDetail"
|
|
|
+ >
|
|
|
+ <el-option v-for="item in calcReceiveDateTypeOp" :key="item.value" :label="item.label" :value="item.value" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <!-- 收款日确定方式 -->
|
|
|
+ <el-form-item label="收款日确定方式:" prop="confirmType">
|
|
|
+ <el-select
|
|
|
+ v-model="form.confirmType"
|
|
|
+ placeholder="请选择"
|
|
|
+ style="width: 100%"
|
|
|
+ :disabled="isDetail"
|
|
|
+ @change="handleConfirmTypeChange"
|
|
|
+ >
|
|
|
+ <el-option v-for="item in payConfirmTypeOp" :key="item.value" :label="item.label" :value="item.value" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <!-- 月数(X天后显示) -->
|
|
|
+ <el-form-item label="月数:" v-if="form.confirmType === 2">
|
|
|
+ <el-input-number
|
|
|
+ v-model="form.months"
|
|
|
+ :min="0"
|
|
|
+ :precision="0"
|
|
|
+ controls-position="right"
|
|
|
+ style="width: 100%"
|
|
|
+ :disabled="isDetail"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <!-- 天数(X天后显示) -->
|
|
|
+ <el-form-item label="天数:" v-if="form.confirmType === 2">
|
|
|
+ <el-input-number
|
|
|
+ v-model="form.days"
|
|
|
+ :min="0"
|
|
|
+ :precision="0"
|
|
|
+ controls-position="right"
|
|
|
+ style="width: 100%"
|
|
|
+ :disabled="isDetail"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <!-- 支付方式列表 -->
|
|
|
+ <el-form-item
|
|
|
+ v-for="(item, index) in form.paymentList"
|
|
|
+ :key="item.id"
|
|
|
+ :label="index === 0 ? '支付方式:' : ''"
|
|
|
+ :required="index === 0"
|
|
|
+ class="payment-method-item"
|
|
|
+ >
|
|
|
+ <div class="payment-method-row">
|
|
|
+ <el-input-number
|
|
|
+ v-model="item.ratio"
|
|
|
+ :min="0"
|
|
|
+ :max="100"
|
|
|
+ :precision="0"
|
|
|
+ controls-position="right"
|
|
|
+ class="payment-input"
|
|
|
+ placeholder="比例"
|
|
|
+ :disabled="isDetail"
|
|
|
+ />
|
|
|
+ <span class="payment-unit">%</span>
|
|
|
+ <el-input-number
|
|
|
+ v-model="item.months"
|
|
|
+ :min="0"
|
|
|
+ :precision="0"
|
|
|
+ controls-position="right"
|
|
|
+ class="payment-input"
|
|
|
+ placeholder="月数"
|
|
|
+ :disabled="isDetail"
|
|
|
+ />
|
|
|
+ <span class="payment-unit">月</span>
|
|
|
+ <DictSelection
|
|
|
+ v-model="item.type"
|
|
|
+ dictName="支付类型"
|
|
|
+ placeholder="请选择"
|
|
|
+ class="payment-select"
|
|
|
+ :disabled="isDetail"
|
|
|
+ />
|
|
|
+ <el-button
|
|
|
+ v-if="!isDetail && index === form.paymentList.length - 1"
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-circle-plus-outline"
|
|
|
+ class="add-payment-btn"
|
|
|
+ @click="addPaymentRow"
|
|
|
+ />
|
|
|
+ <el-button
|
|
|
+ v-if="!isDetail && form.paymentList.length > 1 && index !== 0"
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-remove-outline"
|
|
|
+ class="remove-payment-btn"
|
|
|
+ @click="removePaymentRow(index)"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <!-- 备注 -->
|
|
|
+ <el-form-item label="备注:" prop="remark">
|
|
|
+ <el-input
|
|
|
+ type="textarea"
|
|
|
+ :rows="3"
|
|
|
+ v-model="form.remark"
|
|
|
+ placeholder="请输入"
|
|
|
+ :disabled="isDetail"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <template v-slot:footer>
|
|
|
+ <template v-if="isDetail">
|
|
|
+ <el-button @click="updateVisible(false)">关闭</el-button>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <el-button type="primary" :loading="loading" @click="save">
|
|
|
+ 确定
|
|
|
+ </el-button>
|
|
|
+ <el-button @click="updateVisible(false)">取消</el-button>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ </ele-modal>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import { addReceiveTerms, updateReceiveTerms } from '@/api/rulesManagement/receiveTerms';
|
|
|
+ import { calcReceiveDateTypeOp, payConfirmTypeOp } from '@/enum/dict';
|
|
|
+
|
|
|
+ let paymentId = 0;
|
|
|
+
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ visible: false,
|
|
|
+ loading: false,
|
|
|
+ isUpdate: false,
|
|
|
+ isDetail: false,
|
|
|
+ calcReceiveDateTypeOp,
|
|
|
+ payConfirmTypeOp,
|
|
|
+ form: {
|
|
|
+ id: null,
|
|
|
+ code: '',
|
|
|
+ name: '',
|
|
|
+ calcDateType: null,
|
|
|
+ confirmType: null,
|
|
|
+ months: 0,
|
|
|
+ days: 0,
|
|
|
+ paymentList: [],
|
|
|
+ remark: ''
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ code: [{ required: true, message: '请输入收款条件编码', trigger: 'blur' }],
|
|
|
+ name: [{ required: true, message: '请输入收款条件名称', trigger: 'blur' }],
|
|
|
+ calcDateType: [{ required: true, message: '请选择收款日计算日期', trigger: 'change' }],
|
|
|
+ confirmType: [{ required: true, message: '请选择收款日确定方式', trigger: 'change' }]
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 生成编码 SKTJ+年月日+3位数字
|
|
|
+ generateCode() {
|
|
|
+ const now = new Date();
|
|
|
+ const year = now.getFullYear();
|
|
|
+ const month = String(now.getMonth() + 1).padStart(2, '0');
|
|
|
+ const day = String(now.getDate()).padStart(2, '0');
|
|
|
+ const random = String(Math.floor(Math.random() * 900) + 100);
|
|
|
+ this.form.code = `SKTJ${year}${month}${day}${random}`;
|
|
|
+ },
|
|
|
+
|
|
|
+ open(type, row) {
|
|
|
+ this.visible = true;
|
|
|
+ this.isUpdate = type === 'edit';
|
|
|
+ this.isDetail = type === 'detail';
|
|
|
+ if ((this.isUpdate || this.isDetail) && row) {
|
|
|
+ this.form = {
|
|
|
+ ...row,
|
|
|
+ paymentList: this.parsePaymentMethod(row.paymentMethod)
|
|
|
+ };
|
|
|
+ if (!this.form.paymentList || this.form.paymentList.length === 0) {
|
|
|
+ this.form.paymentList = [this.createEmptyPayment()];
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.resetForm();
|
|
|
+ this.generateCode();
|
|
|
+ }
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.form && this.$refs.form.clearValidate();
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ resetForm() {
|
|
|
+ this.form = {
|
|
|
+ id: null,
|
|
|
+ code: '',
|
|
|
+ name: '',
|
|
|
+ calcDateType: 1, // 默认:订单日期
|
|
|
+ confirmType: 1, // 默认:交易日(隐藏月数、天数)
|
|
|
+ months: 0,
|
|
|
+ days: 0,
|
|
|
+ paymentList: [this.createEmptyPayment()], // 默认:100% 0月 现金
|
|
|
+ remark: ''
|
|
|
+ };
|
|
|
+ },
|
|
|
+
|
|
|
+ createEmptyPayment() {
|
|
|
+ return {
|
|
|
+ id: ++paymentId,
|
|
|
+ ratio: 100,
|
|
|
+ months: 0,
|
|
|
+ type: '现金'
|
|
|
+ };
|
|
|
+ },
|
|
|
+
|
|
|
+ // 解析支付方式字符串为数组
|
|
|
+ parsePaymentMethod(methodStr) {
|
|
|
+ if (!methodStr) return [this.createEmptyPayment()];
|
|
|
+ const parts = methodStr.split(',');
|
|
|
+ return parts.map(part => {
|
|
|
+ const match = part.trim().match(/(\d+)%\s*(\d+)月\s*(.+)/);
|
|
|
+ if (match) {
|
|
|
+ return {
|
|
|
+ id: ++paymentId,
|
|
|
+ ratio: parseInt(match[1]),
|
|
|
+ months: parseInt(match[2]),
|
|
|
+ type: match[3]
|
|
|
+ };
|
|
|
+ }
|
|
|
+ return null;
|
|
|
+ }).filter(Boolean);
|
|
|
+ },
|
|
|
+
|
|
|
+ // 收款日确定方式变化
|
|
|
+ handleConfirmTypeChange() {
|
|
|
+ if (this.form.confirmType === 1) {
|
|
|
+ this.form.months = 0;
|
|
|
+ this.form.days = 0;
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 添加支付方式行
|
|
|
+ addPaymentRow() {
|
|
|
+ this.form.paymentList.push(this.createEmptyPayment());
|
|
|
+ },
|
|
|
+
|
|
|
+ // 移除支付方式行
|
|
|
+ removePaymentRow(index) {
|
|
|
+ this.form.paymentList.splice(index, 1);
|
|
|
+ },
|
|
|
+
|
|
|
+ // 构建支付方式字符串
|
|
|
+ buildPaymentMethod() {
|
|
|
+ return this.form.paymentList
|
|
|
+ .map(item => `${item.ratio}% ${item.months}月 ${item.type}`)
|
|
|
+ .join(',');
|
|
|
+ },
|
|
|
+
|
|
|
+ // 构建确认方式描述
|
|
|
+ buildConfirmDesc() {
|
|
|
+ if (this.form.confirmType === 1) {
|
|
|
+ return '交易日';
|
|
|
+ }
|
|
|
+ const parts = [];
|
|
|
+ if (this.form.months > 0) parts.push(`月数:${this.form.months}`);
|
|
|
+ if (this.form.days > 0) parts.push(`天数:${this.form.days}`);
|
|
|
+ if (parts.length === 0) return '0月0天即交易日';
|
|
|
+ return parts.join(',');
|
|
|
+ },
|
|
|
+
|
|
|
+ save() {
|
|
|
+ this.$refs.form.validate((valid) => {
|
|
|
+ if (!valid) return;
|
|
|
+
|
|
|
+ // 校验支付方式比例总和
|
|
|
+ const totalRatio = this.form.paymentList.reduce((sum, item) => sum + item.ratio, 0);
|
|
|
+ if (totalRatio !== 100) {
|
|
|
+ this.$message.warning('支付比例总和必须等于100%');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ this.loading = true;
|
|
|
+
|
|
|
+ const data = {
|
|
|
+ ...this.form,
|
|
|
+ paymentMethod: this.buildPaymentMethod(),
|
|
|
+ confirmDesc: this.buildConfirmDesc()
|
|
|
+ };
|
|
|
+ delete data.paymentList;
|
|
|
+
|
|
|
+ const saveOrUpdate = this.isUpdate ? updateReceiveTerms : addReceiveTerms;
|
|
|
+ saveOrUpdate(data)
|
|
|
+ .then(() => {
|
|
|
+ this.loading = false;
|
|
|
+ this.$message.success(this.isUpdate ? '修改成功' : '新增成功');
|
|
|
+ this.updateVisible(false);
|
|
|
+ this.$emit('done');
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ updateVisible(value) {
|
|
|
+ this.visible = value;
|
|
|
+ if (!value) {
|
|
|
+ this.resetForm();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .payment-method-row {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ }
|
|
|
+ .payment-input {
|
|
|
+ width: 100px;
|
|
|
+ }
|
|
|
+ .payment-unit {
|
|
|
+ color: #606266;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ .payment-select {
|
|
|
+ width: 120px!important;
|
|
|
+ }
|
|
|
+ .add-payment-btn,
|
|
|
+ .remove-payment-btn {
|
|
|
+ font-size: 18px;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ .remove-payment-btn {
|
|
|
+ color: #f56c6c;
|
|
|
+ }
|
|
|
+</style>
|