ui

src/components/order_statistics/orderStatistics.vue

@@ -0,0 +1,237 @@
+<template>
+    <div>
+        <!-- 组件主体 -->
+        <div>
+            <!-- 查询条件 -->
+            <div style="display: flex;font-size: 14px;flex-wrap: wrap;">
+                <div style="display: flex;">
+                    <span style="display: flex;width:20%;margin-right: 5px;justify-content: center;align-items: center;">姓名:</span>
+                    <el-input v-model="data.patientName" />
+                </div>
+                <div style="display: flex;">
+                    <span style="display: flex;width:30%;margin-right: 5px;justify-content: center;align-items: center;">手机号:</span>
+                    <el-input v-model="data.mobileTelephone" />
+                </div>
+                <div style="display: flex;">
+                    <span style="display: flex;width:30%;margin-right: 5px;justify-content: center;align-items: center;">身份证:</span>
+                    <el-input v-model="data.idNo" />
+                </div>
+                <div style="display: flex;">
+                    <span style="display: flex;width:30%;margin-right: 5px;justify-content: center;align-items: center;">人员类别:</span>
+                    <el-select v-model="data.personType" placeholder="请选择人员类别" style="width: 240px" clearable >
+                        <el-option v-for="item in data.personTypeList" :key="item.id" :label="item.label"
+                            :value="item.id" />
+                    </el-select>
+                </div>
+                <div style="display: flex;">
+                    <span style="display: flex;width:30%;margin-right: 5px;justify-content: center;align-items: center;">预约开始日期:</span>
+                    <el-date-picker
+                      v-model="data.appointStartDate"
+                      type="date"
+                      placeholder="请选择预约开始日期"
+                      value-format="YYYY-MM-DD"
+                    />
+                </div>
+                <div style="display: flex;">
+                    <span style="display: flex;width:30%;margin-right: 5px;justify-content: center;align-items: center;">预约结束日期:</span>
+                    <el-date-picker
+                      v-model="data.appointEndDate"
+                      type="date"
+                      placeholder="请选择预约结束日期"
+                      value-format="YYYY-MM-DD"
+                    />
+                </div>
+                <div style="display: flex;">
+                    <span style="display: flex;width:30%;margin-right: 5px;justify-content: center;align-items: center;">收费状态:</span>
+                    <el-select v-model="data.chargeFlag" placeholder="请选择收费状态" style="width: 240px" clearable >
+                        <el-option v-for="item in data.chargeFlagList" :key="item.id" :label="item.label"
+                            :value="item.id" />
+                    </el-select>
+                </div>
+                <el-tooltip content="查询或刷新" placement="top">
+                    <el-button :icon="Search" @click="btnQuery"
+                        :style="`margin-left: 0px;min-width:40px;color:#67C23A;font-size: ${state.winForm.icon.size}px;`" />
+                </el-tooltip>
+            </div>
+            <!-- 数据表格 -->
+            <div :id="`el_${data.base.name}_table`">
+                <!--表格-->
+                <el-table ref="ref_table" :data="data.tableData" border
+                    style="width: 100%" id="tableId" :height="tableHeight">
+                    <el-table-column prop="patientName" label="姓名" min-width="80" align="center" />
+                    <el-table-column prop="phoneNumber" label="手机号" min-width="80" align="center" />
+                    <el-table-column prop="idNo" label="身份证" min-width="80" align="center" />
+                    <el-table-column prop="appointDate" label="预约日期" min-width="80" align="center" />
+                    <el-table-column prop="medicalPackageName" label="套餐名称" min-width="80" align="center" />
+                    <el-table-column prop="customerOrgGroupName" label="分组名称" min-width="80" align="center" />
+                    <el-table-column prop="customerOrgName" label="单位名称" min-width="80" align="center" />
+                    <el-table-column prop="departmentName" label="部门名称" min-width="80" align="center" />
+                    <el-table-column prop="chargeFlagName" label="收费状态" min-width="80" align="center" />
+                </el-table>
+            </div>
+        </div>
+        <!-- 弹窗 -->
+        <div>
+
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+// 框架脚手架
+import { reactive, ref, getCurrentInstance, computed, onMounted, watch, nextTick } from 'vue'
+// import type { FormInstance, FormRules } from 'element-plus'
+import { ElTable, ElMessage, ElMessageBox } from 'element-plus'
+import { Plus, Operation, Message, MoreFilled, Search, Setting, Edit, Delete } from '@element-plus/icons-vue'
+import { useStore } from 'vuex'
+
+
+// 项目封装的脚手架
+import { abcfun } from 'abcfun'
+
+
+// 组件申明
+import axios from '../../api/axios'
+
+// 申明的 数据 与 方法  -------------------------------------- start --------------------------------------
+// 获取当前组件实例的全局配置
+const appConfig = getCurrentInstance()!.appContext.config.globalProperties.$appConfig
+const state = useStore().state
+
+const ref_table = ref()
+
+const data = reactive({
+    base: { //本组件基本信息 （支持跨项目、跨数据库）
+        name: 'AppointScheduleTemplate',  // pageName 页面标识名称，用于区分不同页面的对象的id，主要用于通用打印，导出 等功能
+        maxResultCount: 0, //返回最大记录数(1、0表示所有记录，其他表示返回相应的记录数；2、大于1时，表示有分页，需返回符合条件的记录总数；3、删改时不起作用，新增只在 'insert into ... select' 情况下起作用)
+        disabledDragCols: ['_index', '_selection'],  // 禁止拖拽的列名(仅限 index selection 列) 表格中从后往前显示
+    },
+    pagePriv: {
+        route: '/AppointScheduleTemplate', //当前页面归属路由或归属页面权限名称
+        privs: [] as Array<object> // 页面权限( onMounted 中赋值)
+    },
+    patientName:"",
+    idNo:"",
+    mobileTelephone:"",
+    personType:"0",
+    appointStartDate:"" as string,
+    appointEndDate:"" as string,
+    chargeFlag:"",
+    tableData: [] as Array<object>, //表格列表数据
+    tableDataChoosed: [] as Array<object>, //选中表格列表数据 
+    tableDataTotalCount: 0, //列表总数据数（有分页时，才用到）
+    personTypeList:[{
+        id:"0",
+        label:"所有"
+    },{
+        id:"1",
+        label:"个人"
+    },{
+        id:"2",
+        label:"单位"
+    }],
+    chargeFlagList:[{
+        id:"0",
+        label:"未收费"
+    },{
+        id:"1",
+        label:"已收费"
+    },{
+        id:"2",
+        label:"已退费"
+    }]
+})
+
+// 被依赖的方法 建议 放在其他方法前面 --- start ---
+
+const disabledWeeks = (rowIndex: number, weekId: number) => {
+    let ret = false
+    let weeks = []
+    data.tableData.forEach((e, index) => {
+        if (index != rowIndex) weeks.push(e['weekId'])
+    });
+    if (weeks.indexOf(weekId) > -1) ret = true
+    return ret
+}
+
+// 被依赖的方法 建议 放在其他方法前面 ---  end  ---
+
+// 查询操作 --- start ---
+
+// 查询操作 ---  end  ---
+
+// 菜单操作 --- start ---
+// 菜单--选择
+const menuSelect = (key: string, keyPath: string[]) => {
+    console.log(key, keyPath)
+}
+// 菜单--高级查询
+const btnQuery = () => {
+    axios.post(appConfig, '/api/app/AppointPatientRegister/GetAppointPatientRegisterList', {
+        patientName:data.patientName,
+        idNo:data.idNo,
+        phoneNumber:data.mobileTelephone,
+        personType:data.personType,
+        appointStartDate:data.appointStartDate,
+        appointEndDate:data.appointEndDate,
+        chargeFlag:data.chargeFlag==""?null:data.chargeFlag
+    }).then(res => {
+        if (res['code'] > -1) {
+            data.tableData = res.data
+        }
+    })
+}
+
+// 申明的 数据 与 方法  --------------------------------------  end  --------------------------------------
+
+// computed: 计算函数  -------------------------------------- start --------------------------------------
+// 表格高度
+const tableHeight = computed(() => {
+    // 主体高度 - 查询栏30 - 菜单栏 - 分页栏 - 平衡高度
+    let pagination: number = data.base.maxResultCount > 1 ? 22 : 0
+    return state.winForm.mainHeight - 32 - 48 - pagination
+})
+// drawer 宽度
+const drawerWidth = computed(() => {
+    return state.winForm.pageWidth < state.winForm.drawerMaxWidth ? state.winForm.pageWidth : state.winForm.drawerMaxWidth
+})
+
+// computed: 计算函数  --------------------------------------  end  --------------------------------------
+// methods:  方法(函数)-------------------------------------- start --------------------------------------
+
+const getMedicalCenter = () => {
+    return new Promise<void>((resolve, reject) => {
+        // 获取体检中心 
+        axios.post(appConfig, '/api/app/Sex/GetAll')
+            .then(res => {
+                if (res.code > -1) {
+                    
+                    resolve(res)
+                } else {
+                    reject(res.message)
+                }
+            })
+    })
+
+}
+
+
+// methods:  方法(函数)--------------------------------------  end  --------------------------------------
+// 组件挂载完成        -------------------------------------- start --------------------------------------
+onMounted(() => {
+    console.log('onMounted')
+    getMedicalCenter()
+
+
+})
+
+// 组件挂载完成        --------------------------------------  end  --------------------------------------
+// watch:  监听事件    -------------------------------------- start --------------------------------------
+// 监听查询关键字的变化
+// watch(() => data.query.keyWord, (newVal, oldVal) => {
+//     console.log(`watch: data.query.keyWord newVal: ${newVal} oldVal: ${oldVal}`)
+//     if (newVal != oldVal) funCom.madeFuzzyCondition({ newVal, oldVal }, data.query.keyWordCols, data.query.DMQL.condition)
+// })
+// watch:  监听事件    --------------------------------------  end  --------------------------------------
+</script>
+<style scoped></style>

src/router/index.js

@@ -77,6 +77,12 @@ const routes = [{
                 component: () =>
                     import ('../components/applet_info/RegistrationInfo.vue'),
             },
+            {
+                path: '/orderStatistics',
+                name: '小程序预约查询',
+                component: () =>
+                    import ('../components/order_statistics/orderStatistics.vue'),
+            },
             // ---------------- 基础设置  end  ----------------
         ]
     }

src/views/home/Home.vue

@@ -31,6 +31,7 @@
                             <el-sub-menu index="menuAppletInfo" class="no-arrow">
                                 <template #title>小程序信息查询</template>
                                 <el-menu-item index="/RegistrationInfo">小程序注册信息</el-menu-item>
+                                <el-menu-item index="/orderStatistics">小程序预约查询</el-menu-item>
                             </el-sub-menu>
                         </el-menu>
                     </div>