优化预约记录页面

src/views/base/appointmentRecord/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
+    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="90px">
       <el-form-item label="预约单号" prop="appointmentNo">
         <el-input
           v-model="queryParams.appointmentNo"
@@ -17,54 +17,44 @@
           @keyup.enter="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="访客手机号" prop="mobile">
+      <el-form-item label="手机号" prop="mobile">
         <el-input
           v-model="queryParams.mobile"
-          placeholder="请输入访客手机号"
+          placeholder="请输入手机号"
           clearable
+          maxlength="11"
+          @input="handleMobileInput"
           @keyup.enter="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="被访人/被访对象" prop="visitedPerson">
+      <el-form-item label="被访对象" prop="visitedPerson">
         <el-input
           v-model="queryParams.visitedPerson"
-          placeholder="请输入被访人/被访对象"
+          placeholder="请输入被访对象"
           clearable
           @keyup.enter="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="预约到访时间" prop="appointmentTime">
-        <el-date-picker clearable
-          v-model="queryParams.appointmentTime"
-          type="date"
-          value-format="YYYY-MM-DD"
-          placeholder="请选择预约到访时间">
-        </el-date-picker>
-      </el-form-item>
       <el-form-item label="预约状态" prop="status">
-        <el-select v-model="queryParams.status" placeholder="请选择预约状态" clearable>
+        <el-select v-model="queryParams.status" placeholder="请选择预约状态" clearable style="width: 180px">
           <el-option
             v-for="dict in appointment_record_status"
             :key="dict.value"
             :label="dict.label"
-            :value="dict.value"
+            :value="String(dict.value)"
           />
         </el-select>
       </el-form-item>
-      <el-form-item label="同步到本地时间" prop="syncTime">
-        <el-date-picker clearable
-          v-model="queryParams.syncTime"
-          type="date"
-          value-format="YYYY-MM-DD"
-          placeholder="请选择同步到本地时间">
-        </el-date-picker>
-      </el-form-item>
-      <el-form-item label="来源平台" prop="sourcePlatform">
-        <el-input
-          v-model="queryParams.sourcePlatform"
-          placeholder="请输入来源平台"
+      <el-form-item label="预约时间" prop="appointmentTimeRange">
+        <el-date-picker
+          v-model="appointmentTimeRange"
+          type="datetimerange"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          range-separator="至"
+          start-placeholder="开始时间"
+          end-placeholder="结束时间"
           clearable
-          @keyup.enter="handleQuery"
+          style="width: 360px"
         />
       </el-form-item>
       <el-form-item>
@@ -74,35 +64,6 @@
     </el-form>
 
     <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button
-          type="primary"
-          plain
-          icon="Plus"
-          @click="handleAdd"
-          v-hasPermi="['base:appointmentRecord:add']"
-        >新增</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="success"
-          plain
-          icon="Edit"
-          :disabled="single"
-          @click="handleUpdate"
-          v-hasPermi="['base:appointmentRecord:edit']"
-        >修改</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="danger"
-          plain
-          icon="Delete"
-          :disabled="multiple"
-          @click="handleDelete"
-          v-hasPermi="['base:appointmentRecord:remove']"
-        >删除</el-button>
-      </el-col>
       <el-col :span="1.5">
         <el-button
           type="warning"
@@ -115,38 +76,34 @@
       <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="appointmentRecordList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="主键ID" align="center" prop="id" />
-      <el-table-column label="预约单号" align="center" prop="appointmentNo" />
-      <el-table-column label="访客姓名" align="center" prop="visitorName" />
-      <el-table-column label="访客手机号" align="center" prop="mobile" />
-      <el-table-column label="被访人/被访对象" align="center" prop="visitedPerson" />
-      <el-table-column label="预约到访时间" align="center" prop="appointmentTime" width="180">
+    <el-table v-loading="loading" :data="appointmentRecordList">
+      <el-table-column label="预约单号" align="center" prop="appointmentNo" min-width="160" show-overflow-tooltip />
+      <el-table-column label="访客姓名" align="center" prop="visitorName" min-width="120" show-overflow-tooltip />
+      <el-table-column label="手机号" align="center" prop="mobile" width="140" />
+      <el-table-column label="被访对象" align="center" prop="visitedPerson" min-width="140" show-overflow-tooltip />
+      <el-table-column label="预约时间" align="center" prop="appointmentTime" width="170">
         <template #default="scope">
-          <span>{{ parseTime(scope.row.appointmentTime, '{y}-{m}-{d}') }}</span>
+          <span>{{ parseTime(scope.row.appointmentTime, '{y}-{m}-{d} {h}:{i}:{s}') || '-' }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="预约状态" align="center" prop="status">
+      <el-table-column label="预约状态" align="center" prop="status" width="110">
         <template #default="scope">
-          <dict-tag :options="appointment_record_status" :value="scope.row.status"/>
+          <dict-tag :options="appointment_record_status" :value="scope.row.status != null ? String(scope.row.status) : ''" />
         </template>
       </el-table-column>
-      <el-table-column label="同步到本地时间" align="center" prop="syncTime" width="180">
+      <el-table-column label="同步时间" align="center" prop="syncTime" width="170">
         <template #default="scope">
-          <span>{{ parseTime(scope.row.syncTime, '{y}-{m}-{d}') }}</span>
+          <span>{{ parseTime(scope.row.syncTime, '{y}-{m}-{d} {h}:{i}:{s}') || '-' }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="来源平台" align="center" prop="sourcePlatform" />
-      <el-table-column label="备注" align="center" prop="remark" />
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      <el-table-column label="来源平台" align="center" prop="sourcePlatform" min-width="120" show-overflow-tooltip />
+      <el-table-column label="操作" align="center" width="100" fixed="right" class-name="small-padding fixed-width">
         <template #default="scope">
-          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['base:appointmentRecord:edit']">修改</el-button>
-          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['base:appointmentRecord:remove']">删除</el-button>
+          <el-button link type="primary" icon="View" @click="handleDetail(scope.row)">详情</el-button>
         </template>
       </el-table-column>
     </el-table>
-    
+
     <pagination
       v-show="total>0"
       :total="total"
@@ -155,77 +112,24 @@
       @pagination="getList"
     />
 
-    <!-- 添加或修改访客预约记录对话框 -->
-    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
-      <el-form ref="appointmentRecordRef" :model="form" :rules="rules" label-width="100px">
-        <el-row>
-          <el-col :span="24">
-            <el-form-item label="预约单号" prop="appointmentNo">
-              <el-input v-model="form.appointmentNo" placeholder="请输入预约单号" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="24">
-            <el-form-item label="访客姓名" prop="visitorName">
-              <el-input v-model="form.visitorName" placeholder="请输入访客姓名" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="24">
-            <el-form-item label="访客手机号" prop="mobile">
-              <el-input v-model="form.mobile" placeholder="请输入访客手机号" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="24">
-            <el-form-item label="被访人/被访对象" prop="visitedPerson">
-              <el-input v-model="form.visitedPerson" placeholder="请输入被访人/被访对象" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="24">
-            <el-form-item label="预约到访时间" prop="appointmentTime">
-              <el-date-picker clearable
-                v-model="form.appointmentTime"
-                type="date"
-                value-format="YYYY-MM-DD"
-                placeholder="请选择预约到访时间">
-              </el-date-picker>
-            </el-form-item>
-          </el-col>
-          <el-col :span="24">
-            <el-form-item label="预约状态" prop="status">
-              <el-radio-group v-model="form.status">
-                <el-radio
-                  v-for="dict in appointment_record_status"
-                  :key="dict.value"
-                  :label="parseInt(dict.value)"
-                >{{dict.label}}</el-radio>
-              </el-radio-group>
-            </el-form-item>
-          </el-col>
-          <el-col :span="24">
-            <el-form-item label="同步到本地时间" prop="syncTime">
-              <el-date-picker clearable
-                v-model="form.syncTime"
-                type="date"
-                value-format="YYYY-MM-DD"
-                placeholder="请选择同步到本地时间">
-              </el-date-picker>
-            </el-form-item>
-          </el-col>
-          <el-col :span="24">
-            <el-form-item label="来源平台" prop="sourcePlatform">
-              <el-input v-model="form.sourcePlatform" placeholder="请输入来源平台" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="24">
-            <el-form-item label="备注" prop="remark">
-              <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
-            </el-form-item>
-          </el-col>
-        </el-row>
-      </el-form>
+    <!-- 预约记录详情 -->
+    <el-dialog :title="title" v-model="open" width="720px" append-to-body>
+      <el-descriptions :column="2" border>
+        <el-descriptions-item label="预约单号">{{ form.appointmentNo || "-" }}</el-descriptions-item>
+        <el-descriptions-item label="预约状态">
+          <dict-tag :options="appointment_record_status" :value="form.status != null ? String(form.status) : ''" />
+        </el-descriptions-item>
+        <el-descriptions-item label="访客姓名">{{ form.visitorName || "-" }}</el-descriptions-item>
+        <el-descriptions-item label="手机号">{{ form.mobile || "-" }}</el-descriptions-item>
+        <el-descriptions-item label="被访对象">{{ form.visitedPerson || "-" }}</el-descriptions-item>
+        <el-descriptions-item label="预约时间">{{ parseTime(form.appointmentTime, "{y}-{m}-{d} {h}:{i}:{s}") || "-" }}</el-descriptions-item>
+        <el-descriptions-item label="来源平台">{{ form.sourcePlatform || "-" }}</el-descriptions-item>
+        <el-descriptions-item label="同步时间">{{ parseTime(form.syncTime, "{y}-{m}-{d} {h}:{i}:{s}") || "-" }}</el-descriptions-item>
+        <el-descriptions-item label="备注" :span="2">{{ form.remark || "-" }}</el-descriptions-item>
+      </el-descriptions>
       <template #footer>
         <div class="dialog-footer">
-          <el-button type="primary" @click="submitForm">确 定</el-button>
-          <el-button @click="cancel">取 消</el-button>
+          <el-button @click="open = false">关 闭</el-button>
         </div>
       </template>
     </el-dialog>
@@ -233,7 +137,7 @@
 </template>
 
 <script setup name="AppointmentRecord">
-import { listAppointmentRecord, getAppointmentRecord, delAppointmentRecord, addAppointmentRecord, updateAppointmentRecord } from "@/api/base/appointmentRecord"
+import { listAppointmentRecord, getAppointmentRecord } from "@/api/base/appointmentRecord"
 
 const { proxy } = getCurrentInstance()
 const { appointment_record_status } = useDict('appointment_record_status')
@@ -242,11 +146,9 @@ const appointmentRecordList = ref([])
 const open = ref(false)
 const loading = ref(true)
 const showSearch = ref(true)
-const ids = ref([])
-const single = ref(true)
-const multiple = ref(true)
 const total = ref(0)
 const title = ref("")
+const appointmentTimeRange = ref([])
 
 const data = reactive({
   form: {},
@@ -257,39 +159,40 @@ const data = reactive({
     visitorName: undefined,
     mobile: undefined,
     visitedPerson: undefined,
-    appointmentTime: undefined,
-    status: undefined,
-    syncTime: undefined,
-    sourcePlatform: undefined,
-  },
-  rules: {
-    appointmentNo: [
-      { required: true, message: "预约单号不能为空", trigger: "blur" }
-    ],
-    status: [
-      { required: true, message: "预约状态不能为空", trigger: "change" }
-    ],
+    appointmentTimeStart: undefined,
+    appointmentTimeEnd: undefined,
+    status: undefined
   }
 })
 
-const { queryParams, form, rules } = toRefs(data)
+const { queryParams, form } = toRefs(data)
+
+/** 同步预约时间范围 */
+function syncAppointmentTimeRange() {
+  if (appointmentTimeRange.value && appointmentTimeRange.value.length === 2) {
+    queryParams.value.appointmentTimeStart = appointmentTimeRange.value[0]
+    queryParams.value.appointmentTimeEnd = appointmentTimeRange.value[1]
+  } else {
+    queryParams.value.appointmentTimeStart = undefined
+    queryParams.value.appointmentTimeEnd = undefined
+  }
+}
 
 /** 查询访客预约记录列表 */
 function getList() {
   loading.value = true
+  syncAppointmentTimeRange()
   listAppointmentRecord(queryParams.value).then(response => {
-    appointmentRecordList.value = response.rows
-    total.value = response.total
+    appointmentRecordList.value = response.rows || []
+    total.value = response.total || 0
+  }).catch(() => {
+    appointmentRecordList.value = []
+    total.value = 0
+  }).finally(() => {
     loading.value = false
   })
 }
 
-/** 取消按钮 */
-function cancel() {
-  open.value = false
-  reset()
-}
-
 /** 表单重置 */
 function reset() {
   form.value = {
@@ -306,84 +209,62 @@ function reset() {
     createTime: null,
     updateTime: null
   }
-  proxy.resetForm("appointmentRecordRef")
 }
 
 /** 搜索按钮操作 */
 function handleQuery() {
   queryParams.value.pageNum = 1
+  syncAppointmentTimeRange()
   getList()
 }
 
 /** 重置按钮操作 */
 function resetQuery() {
+  appointmentTimeRange.value = []
+  queryParams.value.appointmentTimeStart = undefined
+  queryParams.value.appointmentTimeEnd = undefined
   proxy.resetForm("queryRef")
   handleQuery()
 }
 
-/** 多选框选中数据 */
-function handleSelectionChange(selection) {
-  ids.value = selection.map(item => item.id)
-  single.value = selection.length != 1
-  multiple.value = !selection.length
+/** 手机号查询输入限制：只允许数字，最多 11 位 */
+function handleMobileInput(value) {
+  queryParams.value.mobile = String(value || "").replace(/\D/g, "").slice(0, 11)
 }
 
-/** 新增按钮操作 */
-function handleAdd() {
+/** 查看详情 */
+function handleDetail(row) {
   reset()
-  open.value = true
-  title.value = "添加访客预约记录"
-}
-
-/** 修改按钮操作 */
-function handleUpdate(row) {
-  reset()
-  const _id = row.id || ids.value
+  const _id = row.id
   getAppointmentRecord(_id).then(response => {
-    form.value = response.data
-    open.value = true
-    title.value = "修改访客预约记录"
-  })
-}
-
-/** 提交按钮 */
-function submitForm() {
-  proxy.$refs["appointmentRecordRef"].validate(valid => {
-    if (valid) {
-      if (form.value.id != null) {
-        updateAppointmentRecord(form.value).then(() => {
-          proxy.$modal.msgSuccess("修改成功")
-          open.value = false
-          getList()
-        })
-      } else {
-        addAppointmentRecord(form.value).then(() => {
-          proxy.$modal.msgSuccess("新增成功")
-          open.value = false
-          getList()
-        })
-      }
+    const _data = response.data || {}
+    form.value = {
+      ..._data,
+      status: _data.status != null ? String(_data.status) : null
     }
+    open.value = true
+    title.value = "预约记录详情"
+  }).catch(() => {
+    proxy.$modal.msgError("获取预约记录详情失败")
   })
 }
 
-/** 删除按钮操作 */
-function handleDelete(row) {
-  const _ids = row.id || ids.value
-  proxy.$modal.confirm('是否确认删除访客预约记录编号为"' + _ids + '"的数据项？').then(function() {
-    return delAppointmentRecord(_ids)
-  }).then(() => {
-    getList()
-    proxy.$modal.msgSuccess("删除成功")
-  }).catch(() => {})
-}
-
 /** 导出按钮操作 */
 function handleExport() {
+  syncAppointmentTimeRange()
   proxy.download('base/appointmentRecord/export', {
     ...queryParams.value
-  }, `appointmentRecord_${new Date().getTime()}.xlsx`)
+  }, `预约记录_${new Date().getTime()}.xlsx`)
 }
 
 getList()
 </script>
+
+<style scoped>
+.app-container {
+  padding: 20px;
+}
+:deep(.el-table .cell) {
+  line-height: 22px;
+}
+</style>