wujianwei
2025-12-23 8194a67f3b9248cc80137c78bd3e005949ec38dc
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>
            <!-- 统一社会信用代码 -->
@@ -30,17 +53,23 @@
                <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="账号类型" 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-option v-for="dict in sys_currency" :key="dict.value" :label="dict.label" :value="dict.value" />
                </el-select>
            </el-form-item>
@@ -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(用于回显选中)
@@ -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;
}
.dialog-footer { text-align: right; }
    :deep(.el-icon-search) {
        color: #409eff;
    }
}
.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>