gypsy-crm-frontend-vu/pages/mine/components/AddFileDialog.vue

<template>
    <uni-popup ref="fileRef" type="center" background-color="#fff">
        <view class="dialog-container">
            <view class="dialog-header">
                <text class="dialog-title">{{ form.title }}</text>
                <view class="dialog-close" @click="close">
                    <text>×</text>
                </view>
            </view>
            <uni-forms ref="formRef" :rules="rules" :model="form" labelWidth="200" label-position="top"
                class="crm-form">
                <uni-row class="form-row uni-row1">
                    <template v-if="form.type === 1">
                        <uni-col :xs="24">

                            <uni-forms-item :label="t('PersonalManagement.Title.ProofOfIdentity') + 1">
                                <cwg-file-picker v-model="form.file1" :editable="editingId === form.id" :limit="1"
                                    uploadUrl="/custom/file/upload/1" :baseUrl="updateUrl" :imageWidth="150"
                                    :imageHeight="150" uploadText="点击上传" replaceText="点击替换" noImageText="暂无图片"
                                    :showPreviewDelete="editingId === form.id"
                                    @update:modelValue="(val) => handleFileUpdate(val, form, 'file1')" />
                            </uni-forms-item>
                        </uni-col>
                        <uni-col :xs="24">
                            <uni-forms-item :label="t('PersonalManagement.Title.ProofOfIdentity') + 2">
                                <cwg-file-picker v-model="form.file2" :editable="editingId === form.id" :limit="1"
                                    uploadUrl="/custom/file/upload/2" :baseUrl="updateUrl" :imageWidth="150"
                                    :imageHeight="150" uploadText="点击上传" replaceText="点击替换" noImageText="暂无图片"
                                    :showPreviewDelete="editingId === form.id"
                                    @update:modelValue="(val) => handleFileUpdate(val, form, 'file2')" />
                            </uni-forms-item>
                        </uni-col>
                    </template>
                    <template v-if="form.type === 2">
                        <uni-col :xs="24">
                            <uni-forms-item :label="t('PersonalManagement.Title.ProofOfAddress')">
                                <cwg-file-picker v-model="form.file3" :editable="editingId === form.id" :limit="1"
                                    uploadUrl="/custom/file/upload/3" :baseUrl="updateUrl" :imageWidth="150"
                                    :imageHeight="150" uploadText="点击上传" replaceText="点击替换" noImageText="暂无图片"
                                    :showPreviewDelete="editingId === form.id"
                                    @update:modelValue="(val) => handleFileUpdate(val, form, 'file3')" />
                            </uni-forms-item>
                        </uni-col>
                    </template>
                    <template v-if="form.type === 3">
                        <uni-col :xs="24">
                            <uni-forms-item :label="t('PersonalManagement.Title.AttachedFile')">
                                <cwg-file-picker v-model="form.file4" :editable="editingId === form.id" :limit="9"
                                    uploadUrl="/custom/file/upload/10" :baseUrl="updateUrl" :imageWidth="150"
                                    :imageHeight="150" uploadText="点击上传" replaceText="点击替换" noImageText="暂无图片"
                                    :showPreviewDelete="editingId === form.id"
                                    @update:modelValue="(val) => handleFileUpdate(val, form, 'file4')" />
                            </uni-forms-item>
                        </uni-col>
                    </template>
                </uni-row>
            </uni-forms>
            <view class="dialog-footer">
                <view class="btn btn-cancel" @click="close">{{ t('Btn.Cancel') }}</view>
                <view class="btn btn-confirm" @click="submit">{{ t('Btn.Confirm') }}</view>
            </view>
        </view>
    </uni-popup>
</template>

<script setup lang="ts">
import { ref, nextTick, computed, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
import { Validators } from '@/utils/validators';
import { personalApi } from '@/service/personal';
const { t, locale } = useI18n();

interface AddBankForm {
    addressName: string;
    address: string;
    checkboxGroup: string[];
}
const hobbys = computed(() => [
    { value: 1, text: t('blockchain.item8') }
]);
const emit = defineEmits(["success"]);

const fileRef = ref<any>(null);
const formRef = ref<any>(null);

const form = ref<AddBankForm>({});

const rules = {
    addressName: [Validators.required(t('blockchain.item3') + t('common.cannotbeempty'))],
    address: [Validators.required(t('blockchain.item4') + t('common.cannotbeempty'))]
};

// 打开弹窗
const open = async (item) => {
    form.value = {}
    await nextTick();
    console.log(item, 23123);
    form.value = item;
    let files = []
    item?.tableData.forEach(file => {
        if (file.type === 1) {
            form.value.file1 = file.path
        } else if (file.type === 2) {
            form.value.file2 = file.path
        } else if (file.type === 3) {
            form.value.file3 = file.path
        } else if (file.type === 10) {
            files.push(file.path)
        }
    })


    getBankList()
    fileRef.value?.open();
};

// 关闭弹窗
const close = () => {
    fileRef.value?.close();
    resetForm();
};

// 重置表单
const resetForm = () => {
    form.value = {};
    formRef.value?.clearValidate();
};

// 提交表单
const submit = async () => {
    close();
    emit('success');
};

const bankList = ref([])
const isZh = computed(() => ['cn', 'zh', 'zhHant'].includes(locale.value));

const getLangName = (item: any) => (isZh.value ? item.name : item.enName);
const createOptions = (list: any[], valueKey = 'code') => {
    return list.map((item) => ({
        text: getLangName(item),
        value: getLangName(item)
    }));
};

const bankOptions = computed(() => createOptions(bankList.value, 'name'));
// 获取银行列表
const getBankList = async () => {
    const res = await personalApi.BankList({})
    if (res.code === 200) {
        bankList.value = res.data
    }
}
// 文件更新处理
const handleFileUpdate = (newValue, item, field) => {
    item[field] = newValue
}
// 暴露方法
defineExpose({
    open,
    close
});
</script>

<style scoped lang="scss">
@import "@/uni.scss";

.dialog-container {
    width: 80vw;
    max-width: px2rpx(800);
    max-height: 85vh;
    padding: px2rpx(24);
    overflow: hidden;
    border-radius: px2rpx(12);

    .dialog-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: px2rpx(24);
        padding-bottom: px2rpx(16);
        border-bottom: 1px solid #f3f4f6;

        .dialog-title {
            font-size: px2rpx(18);
            font-weight: 600;
            color: #1f2937;
        }

        .dialog-close {
            width: px2rpx(32);
            height: px2rpx(32);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: px2rpx(28);
            color: #9ca3af;
            cursor: pointer;
            transition: all 0.3s;

            &:hover {
                color: #1f2937;
            }
        }
    }

    .dialog-footer {
        display: flex;
        gap: px2rpx(12);
        justify-content: space-around;
        padding: px2rpx(16) 0 0;
        border-top: 1px solid #f3f4f6;

        .btn {
            min-width: px2rpx(120);
            padding: px2rpx(12) px2rpx(24);
            border-radius: px2rpx(6);
            font-size: px2rpx(14);
            font-weight: 600;
            box-sizing: border-box;
            border: none;
            cursor: pointer;
            text-align: center;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;

            &.btn-cancel {
                background: #f3f4f6;
                color: #6b7280;

                &:hover {
                    background: #e5e7eb;
                }

                &:active {
                    background: #d1d5db;
                }
            }

            &.btn-confirm {
                background: #ea2027;
                color: var(--bs-emphasis-color);

                &:hover {
                    background: #d11920;
                }

                &:active {
                    background: #c01819;
                }
            }
        }
    }

    .crm-form {
        overflow-y: auto;
        max-height: 70vh;
    }
}
</style>