Investment-data-system/src/views/message/index.vue

<template>
	<!--我的职位-->
	<div class="p-manage-myJob">
		<div class="m-select g_flex_row_between g_pt_16">
			<div class="g_flex_row_start">
				<div class="g_w_320 g-search-btn g_mr_16">
					<a-input-search v-model:value="tableData.keyword" placeholder="请输入关键字" @search="searchList" @change="handleChangeSearch" allowClear />
				</div>
				<a-radio-group v-model:value="infoType" @change="handleUpdateStatus">
					<a-radio-button class="g_minw_80 g_p_0 g_text_c" :value="1">已发布</a-radio-button>
					<a-radio-button class="g_minw_80 g_p_0 g_text_c" :value="0">草稿</a-radio-button>
				</a-radio-group>
			</div>
			<div>
				<!-- @click="openAdd" -->
				<a-button type="primary" @click="openAdd('add')" :icon="h(PlusOutlined)">新增内容</a-button>
				<!-- <a-button type="" class="g_border_d g_ml_16" @click="handleToForm('add', { id: 0 })" :icon="h(DownloadOutlined)">导出模版</a-button> -->
				<!-- 
        <a-dropdown :trigger="['click']">
          <template #overlay>
            <a-menu>
              <a-menu-item key="1" @click="goShareList">共享职位</a-menu-item>
              <a-menu-item key="2" @click="handleToForm('add',{id:0})">自有职位</a-menu-item>
            </a-menu>
          </template>
          <a-button>
            新增职位
            <DownOutlined style="zoom:.8" />
          </a-button>
        </a-dropdown> -->
			</div>
		</div>
		<div class="m-table g_mt_20 antd-table">
			<a-table sticky :columns="columns" :data-source="tableData.records" size="middle" :pagination="false" :loading="tableData.loading" class="g_clear_scroll" style="max-width: calc(100% - 0px)">
				<template #bodyCell="{ column, record }">
					<template v-if="column.key === 'job'">
						<!-- @click="goDetail(record)" -->
						<div class="btn g_fs_14 g_cursor_point g_mr_13 g_flex_row_start">
							<div class="g_ell_1">{{ "" }}</div>
						</div>
					</template>
					<template v-if="column.key === 'age'">
						<div class="g_ell_1">{{ record.sex + " " + record.age }}</div>
					</template>
					<template v-if="column.key === 'price'">
						<!-- <div v-html="record.price"></div> -->
					</template>
					<template v-if="column.key === 'content'">
						<!-- <div v-html="record.content"></div> -->
					</template>
					<template v-if="column.key === 'status'">
						<a-switch @change="(e) => handleStatus(e, record)" :checked="record.status == 1 ? true : false" checked-children="正常" un-checked-children="禁用" />
					</template>
					
					<template v-if="column.key === 'state'">
						<div class="g_flex_row_between">
							<!-- <div
								class="btn g_fs_14 g_mr_13"
								:class="'g_c_main g_cursor_point'"
								:style="{
									cursor: !record.statusBool ? 'not-allowed' : '',
									color: !record.statusBool ? '#d8d8d8' : '#1677ff',
								}"
								@click="handleApplication(record)"
							>
								报名
							</div> -->
							<div class="btn g_c_main g_fs_14 g_cursor_point g_mr_13" @click="openAdd('edit', record)">编辑</div>
							<div class="btn g_c_main g_fs_14 g_cursor_point" @click="handleDel(record)">删除</div>
						</div>
					</template>
				</template>
				<!-- <template #summary class="fixed-obj">
					<div style="width: 70vw" class="g_pb_16 g_pt_16">
						<a-table-summary fixed="bottom"> </a-table-summary>
					</div>
				</template> -->
			</a-table>
			<div class="g_pb_16 g_pt_16 g_pageBottom" v-if="tableData.records.length > 0">
				<a-pagination v-model:current="tableData.page" v-model:page-size="tableData.size" :total="tableData.total" :pageSize="tableData.size" :show-total="(total) => `共 ${total} 条`" @change="handleModalPage" @showSizeChange="handleModalSize" :show-quick-jumper="tableData.total < tableData.size ? false : true" :showSizeChanger="tableData.total < tableData.size ? false : true" :hideOnSinglePage="false" />
			</div>
		</div>

		<!-- <a-modal v-model:open="modalInfo.isShow" 
							:title="modalInfo.title" 
							width="640px" 
							centered
							:destroyOnClose="true" 
							:forceRender="true"
		>
		   <div class="g_pt_30 modal-box">
		      <a-form :model="modalInfo.form" 
									name="basic" 
									:label-col="{ span: 6 }" 
									:wrapper-col="{ span: 18 }" 
									autocomplete="off" 
									style="width: 80%;" 
									class="g_ml_51"
				  >
		       <a-form-item label="职位要求标签" name="name" required>
		         <a-input style="width: 100%" placeholder="请输入职位要求标签" v-model:value="modalInfo.form.name" />
		       </a-form-item>
					 <a-form-item label="标签类型" name="typeClassify" required>
					   <a-select v-model:value="modalInfo.form.typeClassify" 
											:getPopupContainer="(triggerNode) => triggerNode.parentNode.parentNode" 
											placeholder="请选择职位分类" 
											@change="handleUpdateSelect"
						 >
					   	<a-select-option v-for="item in typeClassifyList" :value="item.id" :title="item.id">{{ item.name }}</a-select-option>
					   </a-select>
					 </a-form-item>
					 <a-form-item label="说明" name="desp">
					   <a-textarea :rows='6' style="width: 100%" placeholder="请输入职位说明" v-model:value="modalInfo.form.desp" />
					 </a-form-item>
		      </a-form>
		   </div>
		   <template #footer>
		     <a-button @click="modalInfo.isShow = false">关闭</a-button>
				 <a-button @click="submitForm" type="primary">确定</a-button>
		   </template>
		</a-modal> -->

		<a-modal v-model:open="showAdd" :title="modalInfo.title" style="width: 734px" :destroyOnClose="true">
			<div class="g_pt_30 modal-box">
				<a-form :model="modalInfo.form" name="basic" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" autocomplete="off" style="width: 80%" class="g_ml_51">
					<a-form-item label="姓名" name="name" required>
						<a-input style="width: 100%" placeholder="请输入姓名" v-model:value="modalInfo.form.name" />
					</a-form-item>
					<a-form-item label="电话" name="name" required>
						<a-input style="width: 100%" placeholder="请输入电话" v-model:value="modalInfo.form.username" />
					</a-form-item>
					<a-form-item label="身份证号" name="name">
						<a-input style="width: 100%" placeholder="请输入身份证号" v-model:value="modalInfo.form.idcard" />
					</a-form-item>

					<a-form-item label="备注" name="desp">
						<a-textarea :rows="6" style="width: 100%" placeholder="请输入备注" v-model:value="modalInfo.form.description" />
					</a-form-item>
				</a-form>
			</div>
			<template #footer>
				<a-button @click="showAdd = false">关闭</a-button>
				<a-button @click="submitForm" type="primary">确定</a-button>
			</template>
		</a-modal>
	</div>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance, h, watch } from "vue";
import { PlusOutlined, EllipsisOutlined, UploadOutlined, DownOutlined } from "@ant-design/icons-vue";
import { Modal, message } from "ant-design-vue";
import { useRouter, useRoute } from "vue-router";
import { getUserListApi, updateUserStatusApi, addUserApi, delUserApi, updateUserApi } from "../../api/userList/userList";
import { getMessageListApi,delMessageApi } from "../../api/messageConfig/message";

import { DownloadOutlined } from "@ant-design/icons-vue";
import idCardPanel from "../components/upload/image.vue";
import dayjs from "dayjs"
dayjs.locale("zh-cn");

/* #################### 初始化事件 #################### */
const router = useRouter(); // 应用路由
const route = useRoute();
const commonJS = getCurrentInstance().appContext.app.config.globalProperties.G;
const speed = ref(0);
const showAdd = ref(false);
const infoType = ref(1);

onMounted(() => {
	getTable();
});
/**
 * 搜索事件
 */
const searchList = (e) => {
	console.log("searchList", e);
	tableData.value.page = 1;
	getTable();
};
/* #################### 顶部事件 #################### */
const handleChangeSearch = (e) => {
	if (tableData.value.keyword == "") {
		getTable();
	}
};
const modalInfo = ref({
	title: "新增用户",
	id: 0,
	form: {
		name: "",
		username: "",
		idcard: "",
		description: "",
	},
});

const submitForm = () => {
	let url = "",
		params = {};
	params = {
		name: modalInfo.value.form.name,
		username: modalInfo.value.form.username,
		idcard: modalInfo.value.form.idcard,
		description: modalInfo.value.form.description,
		password: "123456",
		id: modalInfo.value.id,
	};

	if (!commonJS.regular(modalInfo.value.form.username, "tel")) {
		message.warning("请输入正确的手机号");
		return false;
	}

	if (modalInfo.value.id) {
		delete params.password;
		updateUserApi(params).then((res) => {
			showAdd.value = false;
			message.success("修改成功");
			getTable();
		});
	} else {
		addUserApi(params).then((res) => {
			showAdd.value = false;
			message.success("新增成功");
			getTable();
		});
	}
};
const handleToForm = ($type, $data) => {
	showAdd.value = true;
	console.log($data.id);
	modalInfo.value = {
		isShow: true,
		title: "修改用户",
		form: {
			name: $data.name,
			username: $data.username,
			idcard: $data.idcard,
			description: $data.description,
		},
		id: $data.id,
	};

	// updateUserApi({
	// 	description: "测试备注",
	// 	idcard: "123123123123123123",
	// 	name: "测试真名",
	// 	username: "13214534564",
	// 	password: 123456,
	// 	status: 0,
	// 	username: "测试用户名",
	// }).then(() => {
	// 	message.success("新增成功");
	// 	getTable();
	// });
	// if ($data.id > 0) {
	// 	router.push({
	// 		path: "/merchantManagement/jobForm",
	// 		query: {
	// 			id: $data.id ? $data.id : 0,
	// 			type: $type,
	// 			templateId: $data.templateId ? $data.templateId : 0,
	// 		},
	// 	});
	// } else {
	// 	router.push({
	// 		path: "/merchantManagement/jobForm",
	// 		query: {
	// 			id: $data.id ? $data.id : 0,
	// 			type: $type,
	// 		},
	// 	});
	// }
};

/* #################### 表格事件 #################### */
const tableData = ref({
	keyword: "",
	page: 1,
	limit: 20,
	total: 0,
	count: 0,
	loading: false,
	records: [],
	jobType2Num: "-",
	jobType1Num: "-",
});
const handleUpdateStatus = (e) => {
	console.log(e);
	getTable();
};
const getTable = () => {
	console.log(tableData.value);
	tableData.value.loading = true;
	getMessageListApi({ limit: tableData.value.limit, page: tableData.value.page, keyword: tableData.value.keyword, status: infoType.value }).then((res) => {
		console.log(res);
		tableData.value = { ...res.data, keyword: tableData.value.keyword, page: res.data.current, limit: res.data.size };
		tableData.value.records.forEach((item, index) => {
			item.rank = index + 1;
			// item.title = "常用发票主体信息";
			// item.content = "默认主体：郑州伯才科技有限公司 单位名称：郑州伯才科技有限公司 纳税人识别号：91410100MA9L4HDT0L 地址：河南自贸试验区郑州";
		  item.time = dayjs(item.publishTime).format("YYYY-MM-DD HH:mm");
		});
	});
};
const openAdd = (_type, _record) => {
	if (_type == "add") {
		router.push({
			path: "messageAdd",
			// query: {
			// 	type: "add",
			// },
		});
	} else {
		router.push({
			path: "messageEdit",
			query: {
				id: _record.id,
			},
		});
	}
};
const columns = ref([
	{
		title: "序号",
		key: "rank",
		dataIndex: "rank",
		width: "50px",
		ellipsis: true,
	},
	{
		title: "标题",
		key: "title",
		dataIndex: "title",
		width: "240px",
	},

	{
		title: "内容",
		key: "remark",
		dataIndex: "remark",
		ellipsis: true,
	},
	{
		title: "发布时间",
		key: "time",
		dataIndex: "time",
		width: "200px",
		ellipsis: true,
	},

	{
		title: "操作",
		key: "state",
		dataIndex: "state",
		width: "90px",
		ellipsis: true,
	},
]);
/**
 * 切换用户状态
 */
const handleStatus = (e, $data) => {
	updateUserStatusApi({ id: $data.id, status: e ? 1 : 0 }).then(() => {
		message.success("更新成功");
		getTable();
	});
};
const addInfo = ref({});

const goDetail = ($item) => {
	console.log($item);
	// 前往详情页
	if ($item.jobType == 1) {
		// 共享
		router.push({
			path: "/merchantManagement/shareJobDetail",
			query: {
				id: $item.templateId,
				shared: $item.shared,
				form: "joblist",
			},
		});
	} else {
		// 自有
		router.push({
			path: "/merchantManagement/jobDetail",
			query: {
				id: $item.id,
			},
		});
	}
};
const handleApplication = (record) => {
	console.log(record);
	if (!record.statusBool) {
		return false;
	}
	// 报名事件
	router.push({
		path: "/merchantManagement/recordJob",
		query: {
			company: record.boss,
			job: record.job,
			jobId: record.id,
			templateId: record.templateId,
			jobType: record.jobType,
		},
	});
};

const handleDel = ($data) => {
	commonJS.gConfirmModal(
		"删除",
		"确认删除该内容吗？",
		() => {
			delMessageApi($data.id).then(() => {
				message.success("删除成功");
				getTable();
			});
		},
		() => {}
	);
};

/* #################### 分页器事件 #################### */
const handleModalPage = ($page, $size) => {
	// 监听明细页码
	console.log($page);
	console.log($size);
	tableData.value.page = $page;
	getTable();
};
const handleModalSize = ($page, $size) => {
	// 监听明细size
	tableData.value.page = 1;
	tableData.value.size = $size;
	getTable();
};
</script>

<style lang="less">
.ant-table-cell:empty::before {
	content: "-";
}
.p-manage-myJob {
	position: relative;
	min-height: calc(100vh - 213px);
	width: 100%;
	height: 100px;
	.btn-active {
		width: 40px;
		height: 24px;
		margin-left: 6.5px;
		font-size: 12px;
		color: #f6343e;
		background-color: #fff3f3;
		padding: 1px 3px;
		zoom: 0.6;
		margin-top: 8px;
		text-align: center;
	}
}
.ant-spin-blur .ant-empty {
	opacity: 0;
}
</style>