equity-web/src/views/Shareholders/Information/index.vue

<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
            <el-form-item label="股东名称" prop="shareholderName">
                <el-input v-model="queryParams.shareholderName" placeholder="请输入股东名称" clearable
                    @keyup.enter="handleQuery" />
            </el-form-item>

            <el-form-item label="公司名称" prop="companyName">
                <el-select v-model="queryParams.companyName" placeholder="请选择控制公司" clearable style="width: 100%;">
                    <el-option v-for="company in companyList" :key="company.shareholderId"
                        :label="company.shareholderName" :value="company.shareholderId" />
                </el-select>
                <!-- <el-input v-model="queryParams.companyName" placeholder="请输入公司名称" clearable /> -->
            </el-form-item>

            <el-form-item label="股东类型" prop="shareholderType">
                <el-select v-model="queryParams.shareholderType" placeholder="请选择股东类型" clearable>
                    <el-option v-for="dict in e_shareholder_type" :key="dict.value" :label="dict.label"
                        :value="dict.value" />
                </el-select>
            </el-form-item>
            <!-- <el-form-item label="受控公司" prop="companyName">
                <el-input v-model="queryParams.companyName" placeholder="请输入受控公司" clearable
                    @keyup.enter="handleQuery" />
            </el-form-item> -->
            <el-form-item>
                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" plain icon="Plus" @click="handleAdd"
                    v-hasPermi="['equity:info:add']">新增</el-button>
            </el-col>
            <!-- <el-col :span="1.5">
                <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate"
                    v-hasPermi="['equity:info:edit']">修改</el-button>
            </el-col> -->
            <el-col :span="1.5">
                <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete"
                    v-hasPermi="['equity:info:remove']">批量删除</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="warning" plain icon="Download" @click="handleExport"
                    v-hasPermi="['equity:info:export']">导出</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="info" plain icon="Upload" @click="handleImport"
                    v-hasPermi="['system:user:import']">导入</el-button>
            </el-col>
            <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table v-loading="loading" :data="infoList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <!-- <el-table-column label="股东ID" align="center" prop="shareholderId" /> -->
            <el-table-column label="股东名称" align="center" prop="shareholderName" />
            <el-table-column label="股东类型" align="center" prop="shareholderType">
                <template #default="scope">
                    <dict-tag :options="e_shareholder_type" :value="scope.row.shareholderType" />
                </template>
            </el-table-column>
            <el-table-column label="股份占比" align="center" prop="shareholdingRatio" />
            <el-table-column label="公司" align="center" prop="companyName" />
            <el-table-column label="公司估值" align="center" prop="companyValuation" />
            <el-table-column label="是否为主体公司" align="center" prop="isSubject">
                <template #default="scope">
                    <span>{{ scope.row.isSubject === 1 ? '是' : '否' }}</span>
                </template>
            </el-table-column>
            <el-table-column label="备注" align="center" prop="remark" />
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template #default="scope">
                    <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
                        v-hasPermi="['equity:info:edit']">修改</el-button>
                    <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
                        v-hasPermi="['equity:info:remove']">删除</el-button>
                    <el-popconfirm title="请确定退出个人股份？" @confirm="handWithdrawal(scope.row)">
                        <template #reference>
                            <el-button link type="primary" icon="Filter" v-hasPermi="['equity:info:remove']">
                                退股
                            </el-button>
                        </template>
                    </el-popconfirm>

                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize" @pagination="getList" />

        <!-- 添加或修改股东信息对话框 -->
        <el-dialog :title="title" v-model="open" width="500px" append-to-body>
            <el-form ref="infoRef" :model="form" :rules="RefCheckList" label-width="120px">
                <el-form-item label="股东名称" prop="shareholderName">
                    <el-input v-model="form.shareholderName" placeholder="请输入股东名称" />
                </el-form-item>
                <el-form-item label="股东类型" prop="shareholderType">
                    <el-select v-model="form.shareholderType" placeholder="请选择股东类型" style="width: 100%;">
                        <el-option v-for="dict in e_shareholder_type" :key="dict.value" :label="dict.label"
                            :value="dict.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="股份占比" prop="shareholdingRatio">
                    <el-input v-model="form.shareholdingRatio" placeholder="请输入股份占比" disabled />
                </el-form-item>
                <el-form-item label="受控公司" prop="companyName">
                    <el-input v-model="form.companyName" placeholder="请输入受控公司" disabled />
                </el-form-item>
                <el-form-item label="公司估值" prop="companyValuation">
                    <el-input v-model="form.companyValuation" placeholder="请输入公司估值" :disabled="form.isSubject !== 1" />
                </el-form-item>
                <el-form-item label="是否为主体公司" prop="isSubject">
                    <el-select v-model="form.isSubject" placeholder="请选择是否为主体公司" style="width: 100%;">
                        <el-option :value="1" label="是" />
                        <el-option :value="0" label="否" />
                    </el-select>
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </div>
            </template>
        </el-dialog>
        <!-- 用户导入 -->
        <el-dialog :title="upload.title" v-model="upload.open" width="400px" append-to-body>
            <el-upload ref="uploadRef" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
                :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading"
                :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
                <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <template #tip>
                    <div class="el-upload__tip text-center">
                        <div class="el-upload__tip">
                            <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的用户数据
                        </div>
                        <span>仅允许导入xls、xlsx格式文件。</span>
                        <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;"
                            @click="importTemplate">下载模板</el-link>
                    </div>
                </template>
            </el-upload>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitFileForm">确 定</el-button>
                    <el-button @click="upload.open = false">取 消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup name="Info">
import { InfoList, equityInfo, EditInfo, EquityHolderIds, getOnlyCompanyList, ExportEquityInfo, getExitShareholderId } from "@/api/InformationWrapper/index"
import { getToken } from "@/utils/auth";
import { onMounted } from "vue";
const { proxy } = getCurrentInstance();
const { e_shareholder_type } = proxy.useDict('e_shareholder_type');

const companyList = ref([]);/**所有公司 */
const infoList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");


const data = reactive({
    form: {},
    queryParams: {
        pageNum: 1,
        pageSize: 10,
        controlledCompany: null,
        shareholderId: null,
        controlledCompany: null, // 新增字段，控制的公司
        shareholderName: null, // 股东名称
        shareholderType: null, // 股东类型
        companyName: null, // 公司名称
    },
    rules: {
    }
});

const { queryParams, form, rules } = toRefs(data);

/*** 导入参数 */
const upload = reactive({
    // 是否显示弹出层（用户导入）
    open: false,
    // 弹出层标题（用户导入）
    title: "",
    // 是否禁用上传
    isUploading: false,
    // 是否更新已经存在的用户数据
    updateSupport: 0,
    // 设置上传的请求头部
    headers: { Authorization: "Bearer " + getToken() },
    // 上传的地址
    url: import.meta.env.VITE_APP_BASE_API + "/equity/info/importEquityInfo"
});
const RefCheckList = {
    shareholderName: [{ required: true, trigger: "blur", message: "请输入股东名称" }],
    shareholderType: [{ required: true, trigger: "change", message: "请选择股东类型" }],
    isSubject: [{ required: true, trigger: "change", message: "请选择是否为主体公司" }],
};

/** 查询股东信息列表 */
function getList(e) {
    if (e?.page) queryParams.value.pageNum = e.page;
    loading.value = true;
    InfoList(queryParams.value).then(response => {
        infoList.value = response.rows;
        total.value = response.total;
        loading.value = false;
    });
}

/**获取所有公司 */
function getCompany(becomeShareholderId = null) {
    getOnlyCompanyList({ becomeShareholderId }).then(response => {
        companyList.value = response.data;
    });
}

// 取消按钮
function cancel() {
    open.value = false;
    reset();
}

// 表单重置
function reset() {
    form.value = {
        shareholderId: null,
        ancestors: null,
        shareholderName: null,
        shareholderType: null,
        shareholdingRatio: null,
        controlledCompany: null,
        companyValuation: null,
        isSubject: 0,
        nodeType: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: '',
        companyName: null,
    };
    proxy.resetForm("infoRef");
}

/** 搜索按钮操作 */
function handleQuery() {
    queryParams.value.pageNum = 1;

    getList();
}

/** 重置按钮操作 */
function resetQuery() {
    proxy.resetForm("queryRef");
    handleQuery();
}

// 多选框选中数据
function handleSelectionChange(selection) {
    ids.value = selection.map(item => item.shareholderId);
    single.value = selection.length != 1;
    multiple.value = !selection.length;
}

/** 新增按钮操作 */
function handleAdd() {
    reset();
    open.value = true;
    title.value = "添加股东信息";
}

/** 修改回显 */
function handleUpdate(row) {
    reset();
    form.value = { ...row };
    Object.assign(form.value, row); // 确保 Vue 能正确检测到变更
    open.value = true;
    title.value = "修改股东信息";
}

/** 提交按钮 */
function submitForm() {
    proxy.$refs["infoRef"].validate(valid => {
        if (valid) {
            if (form.value.shareholderId != null) {
                EditInfo(form.value).then(response => {
                    proxy.$modal.msgSuccess("修改成功");
                    open.value = false;
                    getList();
                });
            } else {
                equityInfo(form.value).then(response => {
                    proxy.$modal.msgSuccess("新增成功");
                    open.value = false;
                    getList();
                });
            }
        }
    });
}
watch(() => form.isSubject, (newValue) => {
    if (newValue !== 1) {
        form.companyValuation = null; // 如果选择“否”，清空公司估值
    }
});
/** 删除按钮操作 */
function handleDelete(row) {
    const _shareholderIds = row.shareholderId || ids.value;
    proxy.$modal.confirm('是否确认删除股东信息编号为"' + _shareholderIds + '"的数据项？').then(function () {
        return EquityHolderIds(_shareholderIds);
    }).then(() => {
        getList();
        proxy.$modal.msgSuccess("删除成功");
    }).catch(() => { });
}

/** 导出按钮操作 */
/** 导出按钮操作 */
function handleExport() {
    // 获取当前时间
    const now = new Date();
    // 格式化时间为 YYYYMMDD_HHmmss
    const formattedTime = `${now.getFullYear()}${String(now.getMonth() + 1).padStart(2, '0')}${String(now.getDate()).padStart(2, '0')}_${String(now.getHours()).padStart(2, '0')}${String(now.getMinutes()).padStart(2, '0')}${String(now.getSeconds()).padStart(2, '0')}`;
    // 生成文件名
    const fileName = `股东信息_${formattedTime}.xlsx`;

    console.log("格式化时间：", formattedTime); // 打印格式化时间
    console.log("生成的文件名：", fileName); // 打印生成的文件名

    // 调用下载方法
    proxy.download('/equity/info/exportEquityInfo', {
        ...queryParams.value
    }, fileName);
}
/**导入 */
function handleImport() {
    upload.title = "用户导入";
    upload.open = true;
};
/** 下载模板操作 */
function importTemplate() {
    proxy.download("equity/info/importEquityInfo", {
    }, `user_template_${new Date().getTime()}.xlsx`);
};
/**文件上传中处理 */
const handleFileUploadProgress = (event, file, fileList) => {
    upload.isUploading = true;
};
/** 文件上传成功处理 */
const handleFileSuccess = (response, file, fileList) => {
    upload.open = false;
    upload.isUploading = false;
    proxy.$refs["uploadRef"].handleRemove(file);
    proxy.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
    getList();
};
/** 提交上传文件 */
function submitFileForm() {
    proxy.$refs["uploadRef"].submit();
};

/**股东退股 */
function handWithdrawal(row) {
    getExitShareholderId(row.shareholderId).then(res => {
        if (res.code === 200) {
            proxy.$modal.msgSuccess("退股成功");
            getList();
        }
    });
}
onMounted(() => {
    getList();
    getCompany();
})

</script>