bj-maritime-dcds-web/src/views/addressBook/index.vue

<template>
    <el-tabs type="card" v-model="activeTab" style="height: 100%">
        <el-tab-pane 
            v-for="tab in tabs" 
            :key="tab.key"
            :label="tab.label"
            :name="tab.key"
        >
            <div class="sensitive-words flex">
                <TreeSelect class="mr20"></TreeSelect>
                <div class="table-box">
                    <pageSearch
                        ref="searchTableRef"
                        :searchConfig="activeTab === 'industry' ? searchConfig : searchNonIndustryConfig"
                        />
                    <pageContent
                        ref="tableListRef"
                        :total="total"
                        :contentConfig="activeTab === 'industry' ? contentConfig : contentNonIndustryConfig" :pageList="tableData"
                        >
                        <template #button>
                            <el-button type="primary" @click="onImport()">导入</el-button>
                            <el-button type="primary" @click="onImport()">下载模版</el-button>
                            <el-button type="primary" @click="onAdd()">新增</el-button>
                            <el-button type="primary" @click="onExport()">导出</el-button>
                        </template>
                        <template #operate="scope">
                            <el-button type="primary" link @click="handleEdit(scope.row.rentalCompanyId)">
                                编辑
                            </el-button>
                            <el-button type="primary" link @click="handleCheck(scope.row.rentalCompanyId)">
                                查看
                            </el-button>
                            <el-button type="primary" link @click="onDelete(scope.row.rentalCompanyId)">
                                删除
                            </el-button>
                        </template>
                    </pageContent>
                </div>
            </div>
        </el-tab-pane>
    </el-tabs>
    <pageDetail
        :modalConfig="activeTab === 'industry' ? detailConfig : detailNonIndustryConfig"
        ref="modalRef">
    </pageDetail>
</template>

<script setup lang="ts">
import contentConfig from './config/content.config';
import contentNonIndustryConfig from './config/content.nonIndustry.config';
import pageContent from '@/components/components/pageContent.vue';
import searchConfig from './config/search.config';
import searchNonIndustryConfig from './config/search.nonIndustry.config';
import pageSearch from '@/components/components/pageSearch.vue';
import detailConfig from './config/detail.config';
import detailNonIndustryConfig from './config/detail.nonIndustry.config';
import pageDetail from './components/detail.vue';
import useSystemStore from '@/store/main';
import FileUpload from '@/components/FileUpload/index.vue'
import TreeSelect from './components/treeSelect.vue';
// 使用pinia数据
const systemStore = useSystemStore();
const { pageDetailInfo } = storeToRefs(systemStore);

const total = ref(0);
const pageSize = ref([10, 20, 30]);
const tableData = ref([]);
const tableListRef = ref();

const tabs = reactive([
  {
    key: 'industry',
    label: '行业内联络员',
    total: 0,
    tableData: [],
    loading: false,
    showDetail: true
  },
  {
    key: 'nonIndustry',
    label: '行业外联络员',
    total: 0,
    tableData: [],
    loading: false,
    showDetail: true
  }
]);

const activeTab = ref('industry');

// 操作弹框
import usePageModal from '@/components/components/hooks/usePageDetails';
const { modalRef, handleNewDataClick, handleEditDataClick, handleCheckDataClick, handlePageDetail } =
    usePageModal();

const handleEdit = async (id: string) => {
    await handlePageDetail(id);
    await handleEditDataClick();
};

const handleCheck = async (id: string) => {
    await handlePageDetail(id);
    await handleCheckDataClick();
}

// 新增按钮
const onAdd = () => {
    handleNewDataClick();
};
const onImport = () => {}
const onExport = () => {}
const searchTableRef = ref();
// 删除按钮
function onDelete(value: any) {
    ElMessageBox.confirm('确定删除该条违法信息通报通讯录吗？', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    })
        .then(() => {
            systemStore.deletePageDataAction(contentConfig.pageName, value);
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除',
            });
        });
}

// 筛选-状态赋值
async function searchItem() {
    searchConfig.formItems.forEach(item => {
        if (item.prop === 'status') {
            // item.options = searchList.value;
        }
    });
}
searchItem();
</script>

<style scoped lang="scss">
.sensitive-words {
    margin: 20px;
    height: calc(100vh - 130px);
}

.status {
    cursor: pointer;
    position: relative;

    .status-tip {
        position: absolute;
        top: 2px;
        left: 60px;
    }
}

.dialog-tip {
    text-align: center;
}

.table-box {
    width: 70%;
    display: flex;
    flex-direction: column;
}

:deep .el-tabs__item.is-active {
    color: #fff;
    background-color: #409EFF;
}
</style>