罗斌杰
11 months ago
3 changed files with 244 additions and 0 deletions
-
237src/components/order_statistics/orderStatistics.vue
-
6src/router/index.js
-
1src/views/home/Home.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> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue