feat:app预约时间列表

src/views/hard/hard-appt/form.vue

@@ -1,5 +1,5 @@
 <template>
-	<el-dialog :title="form.id ? '编辑' : '新增'" v-model="visible" :close-on-click-modal="false" draggable>
+	<el-dialog :title="form.id ? '编辑' : '新增'" width="35%" v-model="visible" :close-on-click-modal="false" draggable>
 		<el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="90px" v-loading="loading">
 			<el-row :gutter="24">
 				<el-col :span="24" class="mb20">
@@ -8,23 +8,22 @@
 					</el-form-item>
 				</el-col>
 				<el-col :span="24" class="mb20">
-					<el-form-item label="开始时间" prop="startTime">
-						<el-input v-model="form.startTime" placeholder="请输入开始时间" />
+					<el-form-item label="预约时间" prop="displayTime">
+						<el-time-picker v-model="form.displayTime" value-format="HH:mm" format="HH:mm" is-range />
 					</el-form-item>
 				</el-col>
 				<el-col :span="24" class="mb20">
-					<el-form-item label="结束时间" prop="endTime">
-						<el-input v-model="form.endTime" placeholder="请输入结束时间" />
-					</el-form-item>
-				</el-col>
-				<el-col :span="24" class="mb20">
-					<el-form-item label="状态" prop="status">
-						<el-input v-model="form.status" placeholder="请输入状态" />
+					<el-form-item label="是否启用" prop="status">
+						<el-radio-group v-model="form.status">
+							<el-radio v-for="v in yes_no_type" :key="v.value" :label="v.value" border>
+								{{ v.label }}
+							</el-radio>
+						</el-radio-group>
 					</el-form-item>
 				</el-col>
 				<el-col :span="24" class="mb20">
 					<el-form-item label="备注" prop="remark">
-						<el-input v-model="form.remark" placeholder="请输入备注" />
+						<el-input v-model="form.remark" placeholder="请输入备注" type="textarea" :autosize="{ minRows: 6 }" />
 					</el-form-item>
 				</el-col>
 			</el-row>
@@ -42,6 +41,7 @@
 import { useDict } from "/@/hooks/dict"
 import { useMessage } from "/@/hooks/message"
 import * as hardApptApi from "/@/api/hard/hard-appt"
+import dayjs from "dayjs"
 import { rule } from "/@/utils/validate"
 const emit = defineEmits(["refresh"])
 
@@ -50,30 +50,33 @@ const dataFormRef = ref()
 const visible = ref(false)
 const loading = ref(false)
 // 定义字典
-
+const { yes_no_type } = useDict("yes_no_type")
 // 提交表单数据
 const form = reactive({
 	id: "",
 	title: "",
+	displayTime: [],
 	startTime: "",
 	endTime: "",
-	status: "",
+	status: "1",
 	remark: "",
 })
 
 // 定义校验规则
-const dataRules = ref({})
+const dataRules = ref({
+	title: [{ required: true, message: "标题不能为空", trigger: "blur" }],
+	displayTime: [{ required: true, message: "预约时间不能为空", type: "array", trigger: "change" }],
+	status: [{ required: true, message: "是否启用不能为空", trigger: "change" }],
+})
 
 // 打开弹窗
 const openDialog = (id: string) => {
 	visible.value = true
 	form.id = ""
-
 	// 重置表单数据
 	nextTick(() => {
 		dataFormRef.value?.resetFields()
 	})
-
 	// 获取hardAppt信息
 	if (id) {
 		form.id = id
@@ -85,10 +88,14 @@ const openDialog = (id: string) => {
 const onSubmit = async () => {
 	const valid = await dataFormRef.value.validate().catch(() => {})
 	if (!valid) return false
-
 	try {
 		loading.value = true
-		form.id ? await hardApptApi.putObj(form) : await hardApptApi.addObj(form)
+		const _pa = {
+			...form,
+			startTime: dayjs(form.displayTime[0], "HH:mm").format("HH:mm:ss"),
+			endTime: dayjs(form.displayTime[1], "HH:mm").format("HH:mm:ss"),
+		}
+		form.id ? await hardApptApi.putObj(_pa) : await hardApptApi.addObj(_pa)
 		useMessage().success(form.id ? "修改成功" : "添加成功")
 		visible.value = false
 		emit("refresh")
@@ -100,17 +107,17 @@ const onSubmit = async () => {
 }
 
 // 初始化表单数据
-const gethardApptData = (id: string) => {
+const gethardApptData = async (id: string) => {
 	// 获取数据
 	loading.value = true
-	hardApptApi
-		.getObj(id)
-		.then((res: any) => {
-			Object.assign(form, res.data)
-		})
-		.finally(() => {
-			loading.value = false
-		})
+	try {
+		const { data } = await hardApptApi.getObj(id)
+		Object.assign(form, data, { displayTime: [data.startTime, data.endTime] })
+	} catch (error) {
+		console.error(error)
+	} finally {
+		loading.value = false
+	}
 }
 
 // 暴露变量

src/views/hard/hard-appt/index.vue

@@ -1,6 +1,17 @@
 <template>
 	<div class="layout-padding">
 		<div class="layout-padding-auto layout-padding-view">
+			<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList">
+				<el-row>
+					<el-form-item style="width: 300px" label="标题" prop="title">
+						<el-input v-model="state.queryForm.title" placeholder="请输入标题" />
+					</el-form-item>
+					<el-form-item>
+						<el-button icon="Search" type="primary" @click="getDataList">{{ $t("common.queryBtn") }}</el-button>
+						<el-button icon="Refresh" @click="resetQuery">{{ $t("common.resetBtn") }}</el-button>
+					</el-form-item>
+				</el-row>
+			</el-form>
 			<el-row>
 				<div class="mb8" style="width: 100%">
 					<el-button icon="folder-add" type="primary" class="ml10" @click="formDialogRef.openDialog()" v-auth="'hard_hardAppt_add'">
@@ -30,11 +41,20 @@
 			>
 				<el-table-column type="selection" width="40" align="center" />
 				<el-table-column type="index" label="#" width="40" />
-				<el-table-column prop="title" label="标题" show-overflow-tooltip />
-				<el-table-column prop="startTime" label="开始时间" show-overflow-tooltip />
-				<el-table-column prop="endTime" label="结束时间" show-overflow-tooltip />
-				<el-table-column prop="status" label="状态" show-overflow-tooltip />
-				<el-table-column prop="remark" label="备注" show-overflow-tooltip />
+				<el-table-column prop="title" label="标题" />
+				<el-table-column label="预约时间">
+					<template #default="{ row }">
+						<span> {{ row.startTime }}</span>
+						<span>-</span>
+						<span> {{ row.endTime }}</span>
+					</template>
+				</el-table-column>
+				<el-table-column prop="status" label="状态">
+					<template #default="{ row }">
+						<dict-tag :options="yes_no_type" :value="row.status" />
+					</template>
+				</el-table-column>
+				<el-table-column prop="remark" label="备注" />
 				<el-table-column label="操作" width="150">
 					<template #default="scope">
 						<el-button icon="edit-pen" text type="primary" v-auth="'hard_hardAppt_edit'" @click="formDialogRef.openDialog(scope.row.id)"
@@ -61,7 +81,7 @@ import { useDict } from "/@/hooks/dict"
 // 引入组件
 const FormDialog = defineAsyncComponent(() => import("./form.vue"))
 // 定义查询字典
-
+const { yes_no_type } = useDict("yes_no_type")
 // 定义变量内容
 const formDialogRef = ref()
 // 搜索变量
@@ -106,7 +126,6 @@ const handleDelete = async (ids: string[]) => {
 	} catch {
 		return
 	}
-
 	try {
 		await hardApptApi.delObjs(ids)
 		getDataList()