|
@@ -1,49 +1,39 @@
|
|
<template>
|
|
<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>
|
|
|
|
|
|
+ <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>
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
<script setup lang="ts">
|
|
@@ -57,7 +47,7 @@ import detailConfig from './config/detail.config';
|
|
import detailNonIndustryConfig from './config/detail.nonIndustry.config';
|
|
import detailNonIndustryConfig from './config/detail.nonIndustry.config';
|
|
import pageDetail from './components/detail.vue';
|
|
import pageDetail from './components/detail.vue';
|
|
import useSystemStore from '@/store/main';
|
|
import useSystemStore from '@/store/main';
|
|
-import FileUpload from '@/components/FileUpload/index.vue'
|
|
|
|
|
|
+import FileUpload from '@/components/FileUpload/index.vue';
|
|
import TreeSelect from './components/treeSelect.vue';
|
|
import TreeSelect from './components/treeSelect.vue';
|
|
// 使用pinia数据
|
|
// 使用pinia数据
|
|
const systemStore = useSystemStore();
|
|
const systemStore = useSystemStore();
|
|
@@ -69,22 +59,22 @@ const tableData = ref([]);
|
|
const tableListRef = ref();
|
|
const tableListRef = ref();
|
|
|
|
|
|
const tabs = reactive([
|
|
const tabs = reactive([
|
|
- {
|
|
|
|
- key: 'industry',
|
|
|
|
- label: '行业内联络员',
|
|
|
|
- total: 0,
|
|
|
|
- tableData: [],
|
|
|
|
- loading: false,
|
|
|
|
- showDetail: true
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- key: 'nonIndustry',
|
|
|
|
- label: '行业外联络员',
|
|
|
|
- total: 0,
|
|
|
|
- tableData: [],
|
|
|
|
- loading: false,
|
|
|
|
- showDetail: true
|
|
|
|
- }
|
|
|
|
|
|
+ {
|
|
|
|
+ key: 'industry',
|
|
|
|
+ label: '行业内联络员',
|
|
|
|
+ total: 0,
|
|
|
|
+ tableData: [],
|
|
|
|
+ loading: false,
|
|
|
|
+ showDetail: true,
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ key: 'nonIndustry',
|
|
|
|
+ label: '行业外联络员',
|
|
|
|
+ total: 0,
|
|
|
|
+ tableData: [],
|
|
|
|
+ loading: false,
|
|
|
|
+ showDetail: true,
|
|
|
|
+ },
|
|
]);
|
|
]);
|
|
|
|
|
|
const activeTab = ref('industry');
|
|
const activeTab = ref('industry');
|
|
@@ -92,83 +82,91 @@ const activeTab = ref('industry');
|
|
// 操作弹框
|
|
// 操作弹框
|
|
import usePageModal from '@/components/components/hooks/usePageDetails';
|
|
import usePageModal from '@/components/components/hooks/usePageDetails';
|
|
const { modalRef, handleNewDataClick, handleEditDataClick, handleCheckDataClick, handlePageDetail } =
|
|
const { modalRef, handleNewDataClick, handleEditDataClick, handleCheckDataClick, handlePageDetail } =
|
|
- usePageModal();
|
|
|
|
|
|
+ usePageModal();
|
|
|
|
|
|
const handleEdit = async (id: string) => {
|
|
const handleEdit = async (id: string) => {
|
|
- await handlePageDetail(id);
|
|
|
|
- await handleEditDataClick();
|
|
|
|
|
|
+ await handlePageDetail(id);
|
|
|
|
+ await handleEditDataClick();
|
|
};
|
|
};
|
|
|
|
|
|
const handleCheck = async (id: string) => {
|
|
const handleCheck = async (id: string) => {
|
|
- await handlePageDetail(id);
|
|
|
|
- await handleCheckDataClick();
|
|
|
|
-}
|
|
|
|
|
|
+ await handlePageDetail(id);
|
|
|
|
+ await handleCheckDataClick();
|
|
|
|
+};
|
|
|
|
|
|
// 新增按钮
|
|
// 新增按钮
|
|
const onAdd = () => {
|
|
const onAdd = () => {
|
|
- handleNewDataClick();
|
|
|
|
|
|
+ handleNewDataClick();
|
|
|
|
+};
|
|
|
|
+const onImport = () => {
|
|
|
|
+ const link = document.createElement('a');
|
|
|
|
+ link.href = `/assets/address-book.xlsx`;
|
|
|
|
+ link.download = '违法信息通报通讯录人员导入模板.xlsx'; // 指定下载后的文件名
|
|
|
|
+ link.style.display = 'none';
|
|
|
|
+ document.body.appendChild(link);
|
|
|
|
+ link.click();
|
|
|
|
+ document.body.removeChild(link);
|
|
};
|
|
};
|
|
-const onImport = () => {}
|
|
|
|
-const onExport = () => {}
|
|
|
|
|
|
+const onExport = () => {};
|
|
const searchTableRef = ref();
|
|
const searchTableRef = ref();
|
|
// 删除按钮
|
|
// 删除按钮
|
|
function onDelete(value: any) {
|
|
function onDelete(value: any) {
|
|
- ElMessageBox.confirm('确定删除该条违法信息通报通讯录吗?', '删除提示', {
|
|
|
|
- confirmButtonText: '确定',
|
|
|
|
- cancelButtonText: '取消',
|
|
|
|
- type: 'warning',
|
|
|
|
- })
|
|
|
|
- .then(() => {
|
|
|
|
- systemStore.deletePageDataAction(contentConfig.pageName, value);
|
|
|
|
- })
|
|
|
|
- .catch(() => {
|
|
|
|
- ElMessage({
|
|
|
|
- type: 'info',
|
|
|
|
- message: '取消删除',
|
|
|
|
- });
|
|
|
|
- });
|
|
|
|
|
|
+ ElMessageBox.confirm('确定删除该条违法信息通报通讯录吗?', '删除提示', {
|
|
|
|
+ confirmButtonText: '确定',
|
|
|
|
+ cancelButtonText: '取消',
|
|
|
|
+ type: 'warning',
|
|
|
|
+ })
|
|
|
|
+ .then(() => {
|
|
|
|
+ systemStore.deletePageDataAction(contentConfig.pageName, value);
|
|
|
|
+ })
|
|
|
|
+ .catch(() => {
|
|
|
|
+ ElMessage({
|
|
|
|
+ type: 'info',
|
|
|
|
+ message: '取消删除',
|
|
|
|
+ });
|
|
|
|
+ });
|
|
}
|
|
}
|
|
|
|
|
|
// 筛选-状态赋值
|
|
// 筛选-状态赋值
|
|
async function searchItem() {
|
|
async function searchItem() {
|
|
- searchConfig.formItems.forEach(item => {
|
|
|
|
- if (item.prop === 'status') {
|
|
|
|
- // item.options = searchList.value;
|
|
|
|
- }
|
|
|
|
- });
|
|
|
|
|
|
+ searchConfig.formItems.forEach(item => {
|
|
|
|
+ if (item.prop === 'status') {
|
|
|
|
+ // item.options = searchList.value;
|
|
|
|
+ }
|
|
|
|
+ });
|
|
}
|
|
}
|
|
searchItem();
|
|
searchItem();
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
<style scoped lang="scss">
|
|
.sensitive-words {
|
|
.sensitive-words {
|
|
- margin: 20px;
|
|
|
|
- height: calc(100vh - 130px);
|
|
|
|
|
|
+ margin: 20px;
|
|
|
|
+ height: calc(100vh - 130px);
|
|
}
|
|
}
|
|
|
|
|
|
.status {
|
|
.status {
|
|
- cursor: pointer;
|
|
|
|
- position: relative;
|
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ position: relative;
|
|
|
|
|
|
- .status-tip {
|
|
|
|
- position: absolute;
|
|
|
|
- top: 2px;
|
|
|
|
- left: 60px;
|
|
|
|
- }
|
|
|
|
|
|
+ .status-tip {
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 2px;
|
|
|
|
+ left: 60px;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
|
|
|
|
.dialog-tip {
|
|
.dialog-tip {
|
|
- text-align: center;
|
|
|
|
|
|
+ text-align: center;
|
|
}
|
|
}
|
|
|
|
|
|
.table-box {
|
|
.table-box {
|
|
- width: 70%;
|
|
|
|
- display: flex;
|
|
|
|
- flex-direction: column;
|
|
|
|
|
|
+ width: 70%;
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
}
|
|
}
|
|
|
|
|
|
:deep .el-tabs__item.is-active {
|
|
:deep .el-tabs__item.is-active {
|
|
- color: #fff;
|
|
|
|
- background-color: #409EFF;
|
|
|
|
|
|
+ color: #fff;
|
|
|
|
+ background-color: #409eff;
|
|
}
|
|
}
|
|
</style>
|
|
</style>
|