应付接口

wujianwei

2025-12-23 331cd2ed3eb71666947d1e46201fca8a99a004ed

 ui/admin-ui3/src/components/bankCardCate/index.vue

@@ -6,14 +6,37 @@
        <el-form ref="formRef" :model="form" :rules="formRules" label-width="140px" size="default"
            class="form-container">
            <!-- 关联客户（带搜索图标） -->
            <el-form-item label="关联客户" prop="customerName">
                <el-input v-model="form.customerName" placeholder="请选择关联客户" readonly suffix-icon="Search"
                    @click="openCustomerSelectDialog" class="search-input" />
            <el-form-item label="关联客户" v-if="ishowBank" prop="customerName">
                <!-- <el-input v-model="form.customerName" placeholder="请选择关联客户" readonly suffix-icon="Search"
                    @click="openCustomerSelectDialog" class="search-input" /> -->
                   <el-input v-model="form.customerName" placeholder="请选择关联客户" readonly class="search-input"
                    @click="openCustomerSelectDialog">
                    <template #suffix>
                        <el-icon class="el-input__icon" style="cursor: pointer;" @click="openCustomerSelectDialog">
                            <Search />
                        </el-icon>
                    </template>
                </el-input>    
            </el-form-item>

            <el-form-item label="关联主体" v-if="!ishowBank" prop="customerName">
                <el-input v-model="form.customerName" placeholder="请选择关联主体" readonly class="search-input"
                    @click="subjectPerationSelectDialog">
                    <template #suffix>
                        <el-icon class="el-input__icon" style="cursor: pointer;" @click="subjectPerationSelectDialog">
                            <Search />
                        </el-icon>
                    </template>
                </el-input>
            </el-form-item>

            <!-- 抬头公司 -->
            <el-form-item label="账号编号" prop="accountNo">
            <el-form-item label="账号编号" v-if="ishowBank" prop="accountNo">
                <el-input v-model="form.accountNo" placeholder="请输入账号编号" />
            </el-form-item>

            <el-form-item label="银行账号" v-if="!ishowBank" prop="accountNo">
                <el-input v-model="form.accountNo" placeholder="请输入银行账号" />
            </el-form-item>

            <!-- 统一社会信用代码 -->
@@ -21,7 +44,7 @@
                <el-input v-model="form.accountName" placeholder="请输入户名" maxlength="18" />
            </el-form-item>

                 <!-- 开户银行名称 -->
            <!-- 开户银行名称 -->
            <el-form-item label="银行名称" prop="bankName">
                <el-input v-model="form.bankName" placeholder="请输入开户银行名称" />
            </el-form-item>
@@ -30,33 +53,39 @@
                <el-input v-model="form.branchName" placeholder="请输入支行名称" />
            </el-form-item>

            <el-form-item label="账号类型" prop="accountType">
            <el-form-item label="账号类型" v-if="ishowBank" prop="accountType">
                <el-select v-model="form.accountType" placeholder="请选账号类型" clearable>
                    <el-option v-for="dict in sys_invoice_type" :key="dict.value" :label="dict.label"
                        :value="dict.value" />
                </el-select>
            </el-form-item>

                  <el-form-item label="币种" prop="currency">
                <el-select v-model="form.currency" placeholder="请选币种" clearable>
                    <el-option v-for="dict in sys_currency" :key="dict.value" :label="dict.label"
              <el-form-item label="账号类型" v-if="!ishowBank" prop="accountType">
                <el-select v-model="form.accountType" placeholder="请选账号类型" clearable>
                    <el-option v-for="dict in sys_internal_type" :key="dict.value" :label="dict.label"
                        :value="dict.value" />
                </el-select>
            </el-form-item>

            <el-form-item label="币种" prop="currency">
                <el-select v-model="form.currency" placeholder="请选币种" clearable>
                    <el-option v-for="dict in sys_currency" :key="dict.value" :label="dict.label" :value="dict.value" />
                </el-select>
            </el-form-item>

                     <el-form-item label="账户状态" prop="status">

            <el-form-item label="账户状态" prop="status">
                <el-select v-model="form.status" placeholder="请选账户状态" clearable>
                    <el-option v-for="dict in sys_bank_type" :key="dict.value" :label="dict.label"
                        :value="dict.value" />
                </el-select>
            </el-form-item>

       

          

         



        </el-form>

        <!-- 底部按钮 -->
@@ -69,12 +98,10 @@
    </el-dialog>

    <!-- 关联客户选择弹窗 -->
    <CustomerSelectDialog
        :visible="isCustomerSelectVisibleIshow"
        :default-selected-id="form.customerId"
        @confirm="handleCustomerSelect"
        @close="isCustomerSelectVisibleIshow = false"
    />
    <CustomerSelectDialog :visible="isCustomerSelectVisibleIshow" :default-selected-id="form.customerId"
        @confirm="handleCustomerSelect" @close="isCustomerSelectVisibleIshow = false" />
    <subjectPeration :visible="subjectPerationShow" :default-selected-id="form.customerId"
        @confirm="subjectPerationSelect" @close="subjectPerationShow = false" />
</template>

<script setup lang="ts">
@@ -83,11 +110,21 @@
import { ElMessage } from 'element-plus';
// 引入客户选择弹窗组件
import CustomerSelectDialog from '../CustomerSelectDialog/index';
import subjectPeration from '../subjectPeration/index';


import useCurrentInstance from "@/utils/useCurrentInstance";
const { proxy } = useCurrentInstance();
const { sys_invoice_type,sys_currency,sys_bank_type } = proxy.useDict('sys_invoice_type','sys_currency','sys_bank_type');
const { sys_invoice_type, sys_currency, sys_bank_type,sys_internal_type } = proxy.useDict('sys_invoice_type', 'sys_currency', 'sys_bank_type',
    'sys_internal_type'
);
const props = defineProps({
    ishowBank: {
        type: Boolean,
        default: true
    },

});
// 定义表单数据类型（新增customerId字段，避免赋值时报错）
interface InvoiceForm {
    customerId?: string | number; // 新增：客户ID（用于回显选中）
@@ -120,12 +157,12 @@
    accountType: '',
    bankName: '',
    branchName: '',
     id:'',
    id: '',
    invoiceOperatingLicenseAddress: '',
    invoiceOperatingLicensePhone: '',
    invoiceOperatingLicenseEmail: '',
    currency:'',
    status:'',
    currency: '',
    status: '',
});

// 表单校验规则
@@ -158,14 +195,14 @@
// 打开弹窗（供父组件调用，修复回显逻辑）
const openDialog = (data?: Partial<InvoiceForm>) => {
    dialogVisible.value = true;
    

    // 先重置表单，避免旧数据残留
    nextTick(() => {
        formRef.value?.resetFields();
        

        // 有回显数据时，逐个赋值（核心修复：避免整体赋值form = data）
        if (data && Object.keys(data).length > 0) {
           // 遍历data的所有字段，赋值到form（仅覆盖对应字段）
            // 遍历data的所有字段，赋值到form（仅覆盖对应字段）
            Object.assign(form, data);
            // 清空表单校验状态
            formRef.value?.clearValidate();
@@ -179,12 +216,12 @@
                accountType: '',
                bankName: '',
                branchName: '',
                id:'',
                id: '',
                invoiceOperatingLicenseAddress: '',
                invoiceOperatingLicensePhone: '',
                invoiceOperatingLicenseEmail: '',
                 currency:'',
                 status:''
                currency: '',
                status: ''
            });
        }
    });
@@ -201,7 +238,16 @@
    form.customerId = selectedCustomer.id; // 现在字段已声明，赋值有效
    isCustomerSelectVisibleIshow.value = false;
};
const subjectPerationShow = ref(false);
const subjectPerationSelectDialog = () => {
    subjectPerationShow.value = true;

};
const subjectPerationSelect = (selectedCustomer) => {
    form.customerName = selectedCustomer.customerFullName;
    form.customerId = selectedCustomer.id; // 现在字段已声明，赋值有效
    isCustomerSelectVisibleIshow.value = false;
};
// 提交表单（修复校验逻辑 + 关闭弹窗）
const handleSubmit = async () => {
    if (!formRef.value) return;
@@ -241,13 +287,41 @@
<style scoped lang="scss">
.form-container {
    padding: 10px 0;
    :deep(.el-form-item) { margin-bottom: 18px; }

    :deep(.el-form-item) {
        margin-bottom: 18px;
    }
}

.search-input {
    :deep(.el-input__inner) { cursor: pointer; background-color: #f8f9fa; }
    :deep(.el-icon-search) { color: #409eff; }
    :deep(.el-input__inner) {
        cursor: pointer;
        background-color: #f8f9fa;
    }

    :deep(.el-icon-search) {
        color: #409eff;
    }
}

.dialog-footer { text-align: right; }
.dialog-footer {
    text-align: right;
}
/*  */
/* 使用 :deep() 穿透组件样式 */
:deep(.search-input .el-input__wrapper) {
  background-color: #ffffff !important; /* 强制背景为白色 */
  box-shadow: 0 0 0 1px var(--el-input-border-color, #dcdfe6) inset; /* 保持边框 */
}

/* 针对 readonly 状态下的特定处理（如果需要更精确控制） */
:deep(.search-input .el-input__inner[readonly]) {
  background-color: #ffffff !important;
  cursor: pointer; /* 既然是点击弹出，建议鼠标手势设为 pointer */
}

/* 如果你还想去掉鼠标滑过时的灰色感（如果有的话） */
:deep(.search-input .el-input__wrapper:hover) {
  background-color: #ffffff !important;
}
</style>