sd-new-vue/src/views/system/msg/index.vue

<template>
	<div class="app-container">
		<div class="content">
			<byTable
				:source="sourceList.data"
				:pagination="sourceList.pagination"
				:config="config"
				:loading="loading"
				:selectConfig="selectConfig"
				highlight-current-row
				:action-list="[
					{
						text: '添加模板',
						action: () => openModal(),
					},
				]"
				@get-list="getList"
			>
			</byTable>
		</div>

		<el-dialog
			:title="modalType == 'add' ? '新增' : '编辑'"
			v-if="dialogVisible"
			v-model="dialogVisible"
			width="500"
			v-loading="loadingOperation"
		>
			<byForm
				:formConfig="formConfig"
				:formOption="formOption"
				v-model="formData.data"
				:rules="rules"
				ref="submit"
			>
			</byForm>
			<template #footer>
				<el-button @click="dialogVisible = false" size="large"
					>取 消</el-button
				>
				<el-button type="primary" @click="submitForm()" size="large"
					>确 定</el-button
				>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import byTable from '/src/components/byTable/index'
import byForm from '/src/components/byForm/index'
import { computed, ref } from 'vue'
import Editor from '/src/components/Editor/index.vue'

const { proxy } = getCurrentInstance()
const loading = ref(false)
const companyList = ref({})
const sourceList = ref({
	data: [],
	pagination: {
		total: 0,
		pageNum: 1,
		pageSize: 10,
		corporationId: '',
		keyword: '',
	},
})
const selectConfig = computed(() => {
	return [
        {
			label: '消息类型',
			prop: 'status',
			data: [
				{
					label: '已发送',
					value: '1',
				},
                {
                    label: '未发送',
                    value: '0',
                },
			],
		},
		{
			label: '消息类型',
			prop: 'type',
			data: [
				{
					label: '系统公告',
					value: '1',
				},
			],
		},
	]
})
const config = computed(() => {
	return [
		{
			attrs: {
				label: '消息类型',
				prop: 'type',
			},
			render(type) {
				return type == 1 ? '系统公告' : ''
			},
		},
		{
			attrs: {
				label: '标题',
				prop: 'title',
			},
		},
		{
			attrs: {
				label: '正文',
				prop: 'content',
			},
		},
		{
			attrs: {
				label: '添加时间',
				prop: 'createTime',
			},
		},
		{
			attrs: {
				label: '发送时间',
				prop: 'sendTime',
			},
		},
		{
			attrs: {
				label: '消息状态',
				prop: 'status',
			},
            render(status) {
				return status == 1 ? '已发送' : '未发送'
			},
		},
		{
			attrs: {
				label: '操作',
				width: '120',
				align: 'center',
			},
			renderHTML(row) {
				return [
					row.status == 0 ? {
						attrs: {
							label: '发送',
							type: 'primary',
							text: true,
						},
						el: 'button',
						click() {
							ElMessageBox.confirm(
								'你确定发送此条信息?',
								'提示',
								{
									confirmButtonText: '确定',
									cancelButtonText: '取消',
									type: 'warning',
								}
							).then(() => {
								proxy
									.post('/sendMeg/edit', {
										...row,
                                        status:1,
									})
									.then(() => {
										ElMessage({
											message: '发送成功',
											type: 'success',
										})
										getList()
									})
							})
						},
					} : {},
					{
						attrs: {
							label: '删除',
							type: 'primary',
							text: true,
						},
						el: 'button',
						click() {
							ElMessageBox.confirm(
								'此操作将永久删除该数据, 是否继续?',
								'提示',
								{
									confirmButtonText: '确定',
									cancelButtonText: '取消',
									type: 'warning',
								}
							).then(() => {
								proxy
									.post('/sendMeg/delete', {
										id: row.id,
									})
									.then(() => {
										ElMessage({
											message: '删除成功',
											type: 'success',
										})
										getList()
									})
							})
						},
					},
				]
			},
		},
	]
})
const getDict = () => {
	proxy
		.post('/corporation/page', { pageNum: 1, pageSize: 999 })
		.then((res) => {
			companyList.value = res.rows.map((item) => {
				return {
					label: item.name,
					value: item.id,
				}
			})
		})
}
const getList = async (req) => {
	sourceList.value.pagination = { ...sourceList.value.pagination, ...req }
	loading.value = true
	proxy.post('/sendMeg/page', sourceList.value.pagination).then((res) => {
		sourceList.value.data = res.rows
		sourceList.value.pagination.total = res.total
		setTimeout(() => {
			loading.value = false
		}, 200)
	})
}
getDict()
getList()
const modalType = ref('add')
const dialogVisible = ref(false)
const loadingOperation = ref(false)
const submit = ref(null)
const formData = reactive({
	data: {
		countryId: '44',
	},
})
const formOption = reactive({
	inline: true,
	labelWidth: 100,
	itemWidth: 100,
	rules: [],
})
const formConfig = computed(() => {
	return [
		{
			label: '基础信息',
		},
		{
			type: 'select',
			prop: 'type',
			label: '消息类型',
            data: [
				{
					label: '系统公告',
					value: '1',
				},
			],
		},
		{
			type: 'input',
			prop: 'title',
			label: '标题',
			itemType: 'text',
			placeholder: '请输入标题',
		},
        {
            type: 'input',
            prop: 'content',
            label: '正文',
            itemType: 'textarea',
            placeholder: '请输入正文',
        },
        
        {
            type: 'date',
            prop: 'sendTime',
            label: '发送时间',
            placeholder: '请选择发送时间',
            itemType: 'date',
        },
		{
            type: 'date',
            prop: 'endTime',
            label: '结束时间',
            placeholder: '请选择结束时间',
            itemType: 'date',
        },

	]
})
let rules = ref({
	sendTime: [
		{ required: true, message: '请选择时间', trigger: 'blur' },
	],
	type: [
		{ required: true, message: '请选择类型', trigger: 'change' },
	],
    title: [
        { required: true, message: '请输入标题', trigger: 'blur' },
    ],
    content: [
        { required: true, message: '请输入正文', trigger: 'blur' },
    ],
})
const openModal = () => {
	modalType.value = 'add'
	formData.data = {}
	loadingOperation.value = false
	dialogVisible.value = true
}
const submitForm = () => {
	submit.value.handleSubmit(() => {
		loadingOperation.value = true
		proxy.post('/sendMeg/' + modalType.value, formData.data).then(
			() => {
				ElMessage({
					message: modalType.value == 'add' ? '添加成功' : '编辑成功',
					type: 'success',
				})
				dialogVisible.value = false
				getList()
			},
			(err) => {
				console.log(err)
				loadingOperation.value = false
			}
		)
	})
}
const update = (row) => {
	modalType.value = 'edit'
	loadingOperation.value = true
	proxy.post('/contractTemplate/detail', { id: row.id }).then((res) => {
		formData.data = res
		loadingOperation.value = false
		dialogVisible.value = true
	})
}
</script>

<style lang="scss" scoped>
.tenant {
	padding: 20px;
}
</style>