99ditui-admin-ui/src/views/admin/projectlink/components/link.vue

<template>    
    <el-dialog v-model="state.showDialog" destroy-on-close :title="title" draggable :close-on-click-modal="false"
        :close-on-press-escape="false" width="769px">
        <div class="my-layout">            
            <el-card class="mt8" shadow="never" :body-style="{ paddingBottom: '0' }">
                <el-form :inline="true" @submit.stop.prevent>
                    <el-form-item>
                            <!-- <el-select lable="选择项目" v-model="state.filter.projectId" value-key="id" clearable >                                         
                                <el-option v-for="item in state.uploadProjectList" :key="item.id" :label="item.name" :value="item.id" ></el-option>
                            </el-select> -->
                        </el-form-item>
                    <el-form-item label="推广码来源">
                    <el-input v-model="state.filter.keywords" placeholder="请输入推广码来源" />
                    </el-form-item>
                    <el-form-item>
                    <el-button type="primary" icon="ele-Search" @click="onQuery"> 查询 </el-button>          
                    </el-form-item>
                </el-form>
            </el-card>
            <el-card class="my-fill mt8" shadow="never">
                <el-table v-loading="state.loading" :data="state.projectLinkListData" row-key="id" height="'100%'" style="width: 100%; height: 100%">
                    <el-table-column label="项目名称" prop="projectName" min-width="120" show-overflow-tooltip/>
                    <el-table-column label="推广码来源" prop="company" min-width="120" show-overflow-tooltip/>
                    <el-table-column label="推广码数量(已使用/总数" prop="projectName" min-width="120" show-overflow-tooltip>
                            <template #default="{ row }">
                            {{ row.useCount }}/{{ row.count }}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="180" header-align="center" align="center" fixed="right">
                    <!-- <template #default="{ row }">                
                    <el-button size="small" text type="primary" @click="onEdit(row)">查看明细</el-button>                
                    <el-button size="small" text type="primary" @click="onEdit(row)">补充推广码</el-button>                
                    </template> -->
                </el-table-column>
                </el-table>
            </el-card>
        </div> 
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="onCancel" size="default">关 闭</el-button>                    
            </span>
        </template>
    </el-dialog>
    
</template>

<script lang="ts" setup name="admin/projectlink/link">
import { reactive } from 'vue'
import { PageInputProjectLinkGetPageDto, ProjectLinkListOutput } from '/@/api/admin/data-contracts'
import { ProjectLinkApi } from '/@/api/admin/ProjectLink'
// import eventBus from '/@/utils/mitt'


defineProps({
    title: {
        type: String,
        default: '',
    },
})


const state = reactive({
    showDialog: false,
    loading:false,
    projectName:"",
    filter: {
        projectId: 0,        
        isUse: 0,
        tenantId: 0,
        keywords: ''
    }, pageInput: {
        currentPage: 1,
        pageSize: 20,
    } as PageInputProjectLinkGetPageDto,
    total: 0,
    projectLinkListData: [] as Array<ProjectLinkListOutput>,
})
//  const { from } = toRefs(state)


// 打开对话框
const open = async (row: any = {}) => {
    state.showDialog = true;
    // console.log("aaaaa");
    state.filter.projectId = row.id;
    state.projectName = row.projectName;

    
    onQuery();
        
}
//查询
const onQuery = async () => {
    state.loading = true
    
    state.pageInput.filter = state.filter
    const res = await new ProjectLinkApi().getPage(state.pageInput).catch(() => {
        state.loading = false
    })
    state.projectLinkListData = res?.data?.list ?? []
    state.total = res?.data?.total ?? 0
    state.loading = false
}
// 取消
const onCancel = () => {
    state.showDialog = false
}



defineExpose({
    open,
})
</script>