You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
426 lines
14 KiB
HTML
426 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta
|
|
name="viewport"
|
|
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
|
|
/>
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
|
<link type="image/x-icon" rel="shortcut icon" href="./favicon.png" />
|
|
<link rel="stylesheet" href="./assets/import/element-plus.css" />
|
|
<link rel="stylesheet" href="./assets/import/element.css" />
|
|
<link href="./assets/import/tailwind.min.css" rel="stylesheet" />
|
|
<script src="./assets/import/vue.js"></script>
|
|
<script src="./assets/import/element-plus.js"></script>
|
|
<link rel="stylesheet" href="./assets/import/icon/style.css" />
|
|
<script src="./assets/import/axios.js"></script>
|
|
<title>体检登记</title>
|
|
<style>
|
|
[v-cloak] {
|
|
display: none;
|
|
}
|
|
.cursor-pointer {
|
|
cursor: pointer;
|
|
}
|
|
.page_wrapper {
|
|
width: calc(100vw - 40px);
|
|
margin: 0 auto;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 20px 0;
|
|
}
|
|
|
|
.input_box_wrapper {
|
|
width: 300px;
|
|
}
|
|
|
|
.select_box_wrapper {
|
|
width: calc(100% - 300px - 20px);
|
|
}
|
|
|
|
.select_input_wrapper {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.price_wrapper {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.price_value_wrapper {
|
|
font-size: 18px;
|
|
color: rgb(201, 90, 90);
|
|
}
|
|
</style>
|
|
<script></script>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<el-config-provider :button="button_config">
|
|
<div class="page_wrapper">
|
|
<div class="input_box_wrapper">
|
|
<el-form label-width="80px">
|
|
<el-form-item label="院区">
|
|
<el-select
|
|
v-model="input_data.hospital"
|
|
placeholder="请选择院区"
|
|
>
|
|
<el-option label="海南现代妇幼" value="1"></el-option>
|
|
<el-option label="府城院区" value="4"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="姓名">
|
|
<el-input v-model="input_data.name" placeholder="请输入姓名" />
|
|
</el-form-item>
|
|
<el-form-item label="身份证号">
|
|
<el-input
|
|
@change="idNumberUpdate"
|
|
v-model="input_data.id_number"
|
|
placeholder="请输入身份证号"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="手机号">
|
|
<el-input
|
|
v-model="input_data.phone"
|
|
placeholder="请输入手机号"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="性别">
|
|
<el-select v-model="input_data.gender" placeholder="请选择性别">
|
|
<el-option label="男" value="1"></el-option>
|
|
<el-option label="女" value="2"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="出生日期">
|
|
<el-date-picker
|
|
v-model="input_data.birthday"
|
|
type="date"
|
|
placeholder="请选择出生日期"
|
|
format="YYYY-MM-DD"
|
|
value-format="YYYY-MM-DD"
|
|
></el-date-picker>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
<div class="select_box_wrapper">
|
|
<div class="select_input_wrapper">
|
|
<div>
|
|
<el-form label-width="40px" inline>
|
|
<el-form-item label="简拼">
|
|
<el-input
|
|
v-model="search_input"
|
|
placeholder=""
|
|
/> </el-form-item
|
|
></el-form>
|
|
</div>
|
|
<div>
|
|
<el-button type="primary">选择套餐</el-button>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<el-table
|
|
border
|
|
@selection-change="itemSelectionChange"
|
|
row-class-name="cursor-pointer"
|
|
highlight-current-row
|
|
@row-click="tableRowClick"
|
|
ref="item_table_ref"
|
|
show-overflow-tooltip
|
|
:data="item_list_computed"
|
|
style="width: 100%"
|
|
height="calc(50vh - 100px)"
|
|
>
|
|
<el-table-column type="selection" width="38"></el-table-column>
|
|
<el-table-column
|
|
property="title"
|
|
label="项目名称"
|
|
width="120"
|
|
></el-table-column>
|
|
<el-table-column
|
|
property="price"
|
|
label="价格"
|
|
width="80"
|
|
></el-table-column>
|
|
<el-table-column
|
|
property="group"
|
|
label="科室"
|
|
width="80"
|
|
></el-table-column>
|
|
<el-table-column property="desc" label="备注"></el-table-column>
|
|
<el-table-column
|
|
property="id"
|
|
label="项目ID"
|
|
width="120"
|
|
></el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<div class="mt-3">
|
|
<el-table
|
|
border
|
|
:data="select_table_computed"
|
|
style="width: 100%"
|
|
height="calc(50vh - 45px)"
|
|
>
|
|
<el-table-column type="selection" width="38"></el-table-column>
|
|
<el-table-column
|
|
property="title"
|
|
label="项目名称"
|
|
width="120"
|
|
></el-table-column>
|
|
<el-table-column
|
|
property="price"
|
|
label="价格"
|
|
width="120"
|
|
></el-table-column>
|
|
<el-table-column
|
|
property="group"
|
|
label="科室"
|
|
width="120"
|
|
></el-table-column>
|
|
<el-table-column property="desc" label="备注"></el-table-column>
|
|
<el-table-column
|
|
property="id"
|
|
label="项目ID"
|
|
width="120"
|
|
></el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<div class="price_wrapper">
|
|
<div class="price_value_wrapper">合计价格：¥ 9999.99</div>
|
|
<div>
|
|
<el-button type="primary">预约登记</el-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-config-provider>
|
|
</div>
|
|
</body>
|
|
<script>
|
|
const { createApp, onMounted, ref, nextTick, computed } = Vue;
|
|
const { ElLoading, ElMessage, ElMessageBox } = ElementPlus;
|
|
</script>
|
|
<script src="./assets/mounting.js"></script>
|
|
<script>
|
|
const App = {
|
|
setup() {
|
|
const button_config = {
|
|
autoInsertSpace: true,
|
|
};
|
|
|
|
const search_input = ref("");
|
|
const select_items_deep = ref("");
|
|
const select_data_default = {
|
|
combo: "",
|
|
items: "",
|
|
};
|
|
const select_data = ref(
|
|
JSON.parse(JSON.stringify(select_data_default))
|
|
);
|
|
|
|
const formatDatetime = (datetime, format = "YYYY-MM-DD HH:mm:ss") => {
|
|
let date = new Date(datetime);
|
|
let year = date.getFullYear();
|
|
let month = date.getMonth() + 1;
|
|
let day = date.getDate();
|
|
let hour = date.getHours();
|
|
let minute = date.getMinutes();
|
|
let second = date.getSeconds();
|
|
if (month < 10) month = "0" + month;
|
|
if (day < 10) day = "0" + day;
|
|
if (hour < 10) hour = "0" + hour;
|
|
if (minute < 10) minute = "0" + minute;
|
|
if (second < 10) second = "0" + second;
|
|
return format
|
|
.replace("YYYY", year)
|
|
.replace("MM", month)
|
|
.replace("DD", day)
|
|
.replace("HH", hour)
|
|
.replace("mm", minute)
|
|
.replace("ss", second);
|
|
};
|
|
const input_data_default = {
|
|
hospital: "1",
|
|
name: "",
|
|
id_number: "",
|
|
phone: "",
|
|
gender: "1",
|
|
birthday: formatDatetime(new Date(), "YYYY-MM-DD"),
|
|
};
|
|
const api_map = {
|
|
ItemGetList: "/api/Web/ItemGetList",
|
|
ComboGetList: "/api/Web/ComboGetList",
|
|
BuyInfo: "/api/Web/BuyInfo",
|
|
Create: "/api/Web/Create",
|
|
};
|
|
const $api = (key) => {
|
|
return api_map[key];
|
|
};
|
|
const item_list = ref([]);
|
|
const item_list_computed = computed(() => {
|
|
if (!!search_input.value) {
|
|
let il = [];
|
|
for (let i in item_list.value) {
|
|
let item = item_list.value[i];
|
|
if (!!item.pinyin.includes(search_input.value.toUpperCase())) {
|
|
il.push(item);
|
|
}
|
|
}
|
|
if (!select_items_deep.value) {
|
|
select_items_deep.value = select_data.value.items;
|
|
}
|
|
return il;
|
|
} else {
|
|
if (!select_items_deep.value) {
|
|
select_items_deep.value = select_data.value.items;
|
|
}
|
|
return item_list.value;
|
|
}
|
|
});
|
|
const getItemGetList = async () => {
|
|
const response = await axios.post($api("ItemGetList"));
|
|
window.$response(response.data, () => {
|
|
let il_map = response.data.data.list;
|
|
let il = [];
|
|
for (let i in il_map) {
|
|
for (let j in il_map[i].children) {
|
|
il.push({
|
|
...il_map[i].children[j],
|
|
group: il_map[i].title,
|
|
group_id: il_map[i].id,
|
|
});
|
|
}
|
|
}
|
|
item_list.value = il;
|
|
});
|
|
};
|
|
const input_data = ref(JSON.parse(JSON.stringify(input_data_default)));
|
|
const idNumberUpdate = () => {
|
|
input_data.value.id_number = input_data.value.id_number.toUpperCase();
|
|
let id_number = input_data.value.id_number;
|
|
if (id_number.length !== 15 && id_number.length !== 18) {
|
|
return;
|
|
}
|
|
let birthday = "";
|
|
switch (id_number.length) {
|
|
case 15:
|
|
birthday = "19" + id_number.substr(6, 6);
|
|
break;
|
|
case 18:
|
|
birthday = id_number.substr(6, 8);
|
|
break;
|
|
}
|
|
birthday = formatDatetime(
|
|
new Date(
|
|
birthday.substr(0, 4) +
|
|
"-" +
|
|
birthday.substr(4, 2) +
|
|
"-" +
|
|
birthday.substr(6, 2) +
|
|
" 00:00:00"
|
|
),
|
|
"YYYY-MM-DD"
|
|
);
|
|
!!birthday && (input_data.value.birthday = birthday);
|
|
let gender = "";
|
|
switch (id_number.substr(-2, 1)) {
|
|
case "1":
|
|
case "3":
|
|
case "5":
|
|
case "7":
|
|
case "9":
|
|
gender = "1";
|
|
break;
|
|
case "2":
|
|
case "4":
|
|
case "6":
|
|
case "8":
|
|
gender = "2";
|
|
break;
|
|
}
|
|
!!gender && (input_data.value.gender = gender);
|
|
};
|
|
|
|
const getQueryData = () => {
|
|
let query = {};
|
|
let query_str = location.search.substr(1);
|
|
let query_arr = query_str.split("&");
|
|
query_arr.forEach((item) => {
|
|
let item_arr = item.split("=");
|
|
query[item_arr[0]] = decodeURIComponent(item_arr[1]);
|
|
});
|
|
for (let i in input_data_default) {
|
|
input_data.value[i] = query[i] || input_data_default[i];
|
|
}
|
|
for (let i in select_data_default) {
|
|
select_data.value[i] = query[i] || select_data_default[i];
|
|
}
|
|
};
|
|
const item_table_ref = ref(false);
|
|
const select_table_computed = computed(() => {
|
|
console.log("item_table_ref", item_table_ref.value);
|
|
return [];
|
|
});
|
|
const tableRowClick = (e, index) => {
|
|
const select_rows = item_table_ref.value.getSelectionRows();
|
|
let is_exist = false;
|
|
select_rows.forEach((item) => {
|
|
if (item.id === e.id) {
|
|
is_exist = true;
|
|
}
|
|
});
|
|
item_table_ref.value.toggleRowSelection(e, !is_exist);
|
|
};
|
|
const itemSelectionChange = () => {
|
|
if (select_items_deep.value !== "") {
|
|
const sid = select_items_deep.value;
|
|
const sl = JSON.parse(JSON.stringify(item_list_computed.value));
|
|
select_items_deep.value = "";
|
|
const select_items_array = sid.split(",");
|
|
for (let i in sl) {
|
|
if (select_items_array.includes(sl[i].id)) {
|
|
item_table_ref.value.toggleRowSelection(sl[i], true);
|
|
}
|
|
}
|
|
}
|
|
const select_items = item_table_ref.value.getSelectionRows();
|
|
let ids = [];
|
|
select_items.forEach((item) => {
|
|
if(!ids.includes(item.id)){
|
|
ids.push(item.id);
|
|
}
|
|
});
|
|
select_data.value.items = ids.join(",");
|
|
console.log("select_data.value.items", select_data.value.items);
|
|
};
|
|
|
|
onMounted(() => {
|
|
getQueryData();
|
|
getItemGetList();
|
|
});
|
|
|
|
return {
|
|
itemSelectionChange,
|
|
idNumberUpdate,
|
|
tableRowClick,
|
|
item_list_computed,
|
|
select_table_computed,
|
|
item_table_ref,
|
|
item_list,
|
|
search_input,
|
|
select_data,
|
|
input_data,
|
|
button_config,
|
|
};
|
|
},
|
|
};
|
|
const app = createApp(App);
|
|
app.use(ElementPlus);
|
|
app.mount("#app");
|
|
</script>
|
|
</html>
|