bj-maritime-dcds-web/src/views/notificationInfoManage/mattersmanage/index.vue

<template>
	<div class="sensitive-words">
		<pageSearch ref="searchTableRef" :searchConfig="searchConfig">
			<template #publishingUnit="scope">
				<el-tree-select
					v-model="scope.value"
					:data="treeData"
					node-key="strId"
					filterable
					@change="newVal => onMessageChange(scope, newVal)"
					placeholder="请选择发布单位"
				/>
			</template>
		</pageSearch>

		<pageContent ref="tableListRef" :total="total" :contentConfig="contentConfig" :pageList="tableData">
			<template #button>
				<el-button type="primary" @click="handleAdd()">新增</el-button>
			</template>

			<!-- 发出单位 -->
			<template #deliveryUnit="scope">
				<template :index="index" v-for="(item, index) in bj_lssuing_unit">
					<template :index="index" v-if="item.value == scope.row.deliveryUnit">{{ item.label }}</template>
				</template>
			</template>
			<!-- 通报类型 -->
			<template #notificationType="scope">
				<template :index="index" v-for="(item, index) in bj_notification_type">
					<el-tag :index="index" v-if="item.value == scope.row.notificationType" type="success">{{
						item.label
					}}</el-tag>
				</template>
			</template>
			<!-- 通报事项类别 -->
			<template #conm="scope">
				<template :index="index" v-for="(item, index) in bj_category_onm">
					<el-tag :index="index" v-if="item.value == scope.row.conm" type="primary">{{ item.label }}</el-tag>
				</template>
			</template>

			<!-- 发布状态 -->
			<template #releaseStatus="scope">
				<template :index="index" v-for="(item, index) in bj_nl_released_status">
					<el-tag
						:index="index"
						v-if="item.value == scope.row.releaseStatus"
						:type="
							scope.row.releaseStatus == '1' ? 'primary' : scope.row.releaseStatus == '2' ? 'success' : 'info'
						"
						>{{ item.label }}</el-tag
					>
				</template>
			</template>
			<template #operate="scope">
				<el-button type="primary" link @click="handleCheck(scope.row.notifiedMattersId)"> 查看 </el-button>
				<!-- 待提交 -->
				<template v-if="scope.row.releaseStatus == '1'">
					<el-button type="primary" link @click="handleEdit(scope.row.notifiedMattersId)"> 编辑 </el-button>
					<el-button type="danger" link @click="handleDelete(scope.row.notifiedMattersId)"> 删除 </el-button>
				</template>
				<!-- 可用 -->
				<template v-if="scope.row.releaseStatus == '2'">
					<el-button type="primary" link @click="handleEdit(scope.row.notifiedMattersId)"> 编辑 </el-button>
					<el-button type="warning" link @click="handleStatus(scope.row.notifiedMattersId, '3', '废止')">
						废止
					</el-button>
				</template>
				<!-- 废止 -->
				<template v-if="scope.row.releaseStatus == '3'">
					<el-button type="success" link @click="handleStatus(scope.row.notifiedMattersId, '2', '启用')">
						启用
					</el-button>
				</template>
			</template>
		</pageContent>
		<pageDetail :modalConfig="detailConfig" ref="modalRef"> </pageDetail>
	</div>
</template>

<script setup lang="ts">
import contentConfig from './config/content.config';
import pageContent from '@/components/components/pageContent.vue';
import searchConfig from './config/search.config';
import pageSearch from '@/components/components/pageSearch.vue';
import detailConfig from './config/detail.config';
import pageDetail from './components/detail.vue';
import { changeInventoryStatus } from '@/api/notificationInfoManage/mattersmanage';
import { categoryOnm, bj_notification_type, bj_lssuing_unit } from '@/plugins/dictData';
import useDeptStore from '@/store/modules/dept';
import useSystemStore from '@/store/main';
import { outTypeList } from '@/libs/commonMeth';
import { TreeOptions } from '@/types/global';

const bj_nl_released_status = outTypeList('bj_nl_released_status'); //通报事项清单发布状态

// 使用pinia数据
const systemStore = useSystemStore();
const { pageDetailInfo } = storeToRefs(systemStore);

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

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

// const onUnitChange = async (row: any, val) => {
// 	console.log(row);
// 	console.log('+++++++++++++++++++++++');
// 	console.log(val);
// };

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

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

const onMessageChange = (scope, newVal) => {
	scope.onInput(newVal);
};

// 新增按钮
const handleAdd = () => {
	handleNewDataClick();
};
const searchTableRef = ref();
// 状态按钮
function handleStatus(value: string, status: string, str: string) {
	ElMessageBox.confirm(`是否${str}这条数据？`, '状态提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(async () => {
			const postData: any = await changeInventoryStatus(value, status);
			if (postData.code === 200) {
				tableListRef.value.fetchPageListData();
				ElMessage.success('操作成功！');
			} else {
				ElMessage.error('操作失败！');
			}
		})
		.catch(() => {
			ElMessage({
				type: 'info',
				message: '取消操作',
			});
		});
}

// 删除按钮
function handleDelete(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 === 'notificationType') {
			item.options = bj_notification_type;
		}
		if (item.prop === 'conm') {
			item.options = categoryOnm;
		}
		if (item.prop === 'releaseStatus') {
			item.options = bj_nl_released_status;
		}
		if (item.prop === 'deliveryUnit') {
			item.options = bj_lssuing_unit;
		}
	});
}

searchItem();
const treeData = ref<TreeOptions[]>();
const deptStore = useDeptStore();
onMounted(async () => {
	// 加载组织架构
	if (!deptStore.hasDeptData) {
		await deptStore.loadDeptDataFromCache();
	}
	treeData.value = deptStore.deptData;
});
</script>

<style scoped lang="scss">
.sensitive-words {
	margin: 20px;
	// background-color: #fff;
}

.status {
	cursor: pointer;
	position: relative;

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

.dialog-tip {
	text-align: center;
}
</style>