ezhizao_yzbh_vue/src/views/business/invoice/ContractChoice.vue

<template>
    <el-dialog v-model="visible" width="55%" append-to-body draggable :close-on-click-modal="false">
        <template #header>
            <div class="dialog-title-container">
                <span class="title-label" style="color: white"><i class="el-icon-document" style="color: white" />
                    合同选择</span>
                <i class="el-icon-close" @click="close" />
            </div>
        </template>
        <!-- 功能按钮 -->
        <el-form class="list-search-container" :model="queryParams" ref="queryRef" :inline="true" label-width="68px">
            <el-form-item label="客户名称：" prop="companyName">
                <el-input v-model="queryParams.companyName" size="small" placeholder="请输入客户名称" clearable
                    style="width: 150px" @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="合同编号：" prop="contractNo">
                <el-input v-model="queryParams.contractNo" size="small" placeholder="请输入合同编号" clearable
                    style="width: 150px" @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="服务类型：" prop="serviceType">
                <el-select size="small" v-model="queryParams.serviceType" placeholder="服务类型" clearable
                    style="width: 150px" @keyup.enter="handleQuery">
                    <el-option v-for="item in serviceTypes" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="Search" @click="handleQuery" size="small">搜索</el-button>
                <el-button icon="Refresh" @click="resetQuery" size="small">重置</el-button>
            </el-form-item>
        </el-form>
        <div class="dialog-list-container">
            <el-table :data="list" size="small" border height="400px" header-row-class-name="list-header-row"
                row-class-name="list-row" @selection-change="handleSelectionChange">
                <el-table-column v-if="multiple" type="selection" width="40" align="center" />
                <el-table-column type="index" label="序号" width="46" align="center" />
                <el-table-column label="合同编号" prop="contractNo" width="100" align="center" />
                <el-table-column label="客户名称" prop="companyName" width="200" align="center" />
                <el-table-column label="签约时间" prop="formDate" width="200" align="center" />
                <el-table-column label="备注" prop="remark" header-align="center" />
                <el-table-column v-if="!multiple" label="操作" width="50" align="center">
                    <template #default="scope">
                        <el-button link type="success" size="small"
                            @click="handleSimpleSelected(scope.row)">选择</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize" @pagination="getList" style="background-color: rgba(0, 0, 0, 0);" />
    </el-dialog>
</template>
<script setup>
    import { toRef } from 'vue'
    import { listOrder2 } from "@/api/business/crm/contract";
    const { proxy } = getCurrentInstance();
    const props = defineProps({
        width: {
            type: String,
            default: '800px'
        },
        multiple: {
            type: Boolean,
            default: () => false
        }
    })
    const total = ref(0);
    const emit = defineEmits(['choice']);
    const { width, multiple } = toRefs(props)
    const data = reactive({
        visible: false,
        query: {
            pageNum: 1,
            pageSize: 15,
            total: 0
        },
        list: [],
        selections: [],
        options: {}
    })

    const serviceTypes = ref([
        {
            label: "循环服务",
            value: 1,
        },
        {
            label: "单次服务",
            value: 2,
        },
    ]);
    const queryParams = ref({
        pageNum: 1,
        pageSize: 20,
        fromId: 0,
        orderByColumn: "create_time",
        category: null,
        code: null,
        name: null,
        shortName: null,
        companyName: null,
        oldName: null,
        owner: null,
        phone: null,
        email: null,
        contactAddress: null,
        source: null,
        type: null,
        socialCreditCode: null,
        mainBusiness: null,
        legalRepresentative: null,
        foundationDate: null,
        licenceDate: null,
        businessStartDate: null,
        businessEndDate: null,
        isPermanentlyEffective: null,
        registerMoney: null,
        registerMoneyUnit: null,
        provinceCode: null,
        province: null,
        cityCode: null,
        city: null,
        districtCode: null,
        district: null,
        address: null,
        businessField: null,
        taxType: null,
        isZero: null,
        competentTaxAuthority: null,
        taxCollectorName: null,
        taxCollectorPhone: null,
        taxMonth: null,
        openingBank: null,
        bankAccount: null,
        annualIncome: null,
        governmentAccountNo: null,
        governmentPassword: null,
        socialSecurityAccountNo: null,
        socialSecurityPassword: null,
        employeePassword: null,
        housingFundPassword: null,
        housingFundUnitAccount: null,
        housingFundDeductionPassword: null,
        collectionMethod: null,
        quotaAmount: null,
        isPayOnWindow: null,
        isFirstSocialSecurity: null,
        isFirstHousingFund: null,
        customerLabelId: [],
        boss: null
    });
    const { visible, query, list, selections, options } = toRefs(data)

    function open(input) {
        visible.value = true;

        getList()
    }
    function close() {
        visible.value = false;
    }
    const getList = () => {
        listOrder2(queryParams.value)
            .then(res => {
                total.value = res.total
                list.value = res.rows

            }).catch(err => {
                console.log(err)
            })
    }
    function resetQuery() {
        proxy.resetForm("queryRef");
        handleQuery();
    }
    const handleMultipleSelected = () => {
        emit('choice', selections.value)
        close()
    }

    const handleSimpleSelected = (row) => {
        emit('choice', row)
        close()
    }
    /** 搜索按钮操作 */
    function handleQuery() {
        queryParams.value.pageNum = 1;
        getList();
    }
    const handleSelectionChange = (choiceSelections) => {
        selections.value = choiceSelections
    }
    getList()
    defineExpose({
        open,
        close
    })
</script>