12 changed files with 402 additions and 178 deletions
@ -0,0 +1,264 @@ |
|||||
|
<template> |
||||
|
<view style="border: 1px solid #e5e5e5"> |
||||
|
<view v-for="(item, index) in medicineInfo" :key="index"> |
||||
|
<view class="pl-4 py-3 font-bold border-b">{{ item.title }}</view> |
||||
|
<template v-for="(colItem, itemIndex) in item.date"> |
||||
|
<view :key="itemIndex" class="flex justify-between items-center text-sm border-b"> |
||||
|
<view class="ml-4 my-3">{{ colItem.name }}</view> |
||||
|
<!-- 单选 --> |
||||
|
<view v-if="colItem.type === 1"> |
||||
|
<u-radio-group v-model="colItem.value" class="flex items-center"> |
||||
|
<u-radio |
||||
|
@change="change(radioIndex, index, itemIndex, colItem.type)" |
||||
|
v-for="(radioItem, radioIndex) in colItem.radioList" |
||||
|
:key="radioIndex" |
||||
|
:name="radioItem" |
||||
|
> |
||||
|
{{ radioItem }} |
||||
|
</u-radio> |
||||
|
</u-radio-group> |
||||
|
</view> |
||||
|
<!-- 数字输入框 --> |
||||
|
<view v-if="colItem.type === 3" class="pr-7"> |
||||
|
<u-input |
||||
|
v-model="colItem.value" |
||||
|
type="number" |
||||
|
:clearable="false" |
||||
|
input-align="right" |
||||
|
@blur="change(colItem.value, index, itemIndex, colItem.type)" |
||||
|
/> |
||||
|
</view> |
||||
|
<!-- 数字输入框+单选 --> |
||||
|
<view v-if="colItem.type === 4" class="flex flex-nowrap items-center"> |
||||
|
<u-input |
||||
|
:clearable="false" |
||||
|
class="flex-1 mr-3" |
||||
|
v-model="colItem.value" |
||||
|
placeholder="每日总剂量(单位: mg)" |
||||
|
type="number" |
||||
|
input-align="center" |
||||
|
@focus="cancelChecked(index, itemIndex)" |
||||
|
@blur="change(colItem.value, index, itemIndex, colItem.type)" |
||||
|
/> |
||||
|
<u-checkbox-group @change="change($event, index, itemIndex, 99)"> |
||||
|
<u-checkbox v-model="colItem.checked" shape="circle">未服用</u-checkbox> |
||||
|
</u-checkbox-group> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
<view class="w-full h-2 bg-gray-100" v-if="index !== medicineInfo.length - 1"></view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="flex flex-nowrap border-b py-1"> |
||||
|
<u-input |
||||
|
:clearable="false" |
||||
|
class="pl-4" |
||||
|
style="width: 100px" |
||||
|
placeholder="其他药物" |
||||
|
v-model="otherName.value" |
||||
|
@blur="changeOther(otherName)" |
||||
|
/> |
||||
|
<u-input |
||||
|
:clearable="false" |
||||
|
class="flex-1" |
||||
|
placeholder="每日总剂量(单位: mg)" |
||||
|
type="number" |
||||
|
v-model="otherMedicine.value" |
||||
|
@blur="changeOther(otherMedicine)" |
||||
|
/> |
||||
|
</view> |
||||
|
|
||||
|
<view class="p-4"> |
||||
|
<u-button type="primary" @click="addMedicine" v-if="show">添加</u-button> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { mapGetters } from 'vuex'; |
||||
|
import { medicineInfo } from '@/config/yyInfo'; |
||||
|
|
||||
|
export default { |
||||
|
name: 'Info', |
||||
|
data() { |
||||
|
return { |
||||
|
medicineInfo, |
||||
|
show: true, |
||||
|
params: {}, |
||||
|
otherName: { |
||||
|
label: 'sevName', |
||||
|
value: '', |
||||
|
name: '其他药物', |
||||
|
}, |
||||
|
otherMedicine: { |
||||
|
label: 'sevMedicine', |
||||
|
value: '', |
||||
|
name: '其他药物服用情况', |
||||
|
}, |
||||
|
}; |
||||
|
}, |
||||
|
|
||||
|
computed: mapGetters('project', ['projectId']), |
||||
|
|
||||
|
mounted() { |
||||
|
this.queryMedicine(); |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
cancelChecked(index, itemIndex) { |
||||
|
this.medicineInfo[index].date[itemIndex].checked = false; |
||||
|
}, |
||||
|
|
||||
|
change(e, index, itemIndex, type) { |
||||
|
let item = this.medicineInfo[index].date[itemIndex]; |
||||
|
if (type === 99) { |
||||
|
item.checked = true; |
||||
|
item.value = null; |
||||
|
if (!this.show) { |
||||
|
this.updateMedicine(item); |
||||
|
} else { |
||||
|
this.params[item.label] = '未服用'; |
||||
|
} |
||||
|
} else { |
||||
|
item.value = e; |
||||
|
if (!this.show) { |
||||
|
this.updateMedicine(item); |
||||
|
} else { |
||||
|
this.params[item.label] = item.value; |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
changeOther(item) { |
||||
|
if (!this.show) { |
||||
|
this.updateMedicine(item); |
||||
|
} else { |
||||
|
this.params[item.label] = item.value; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 查询药物使用 |
||||
|
* @param { String } projectId 项目id |
||||
|
*/ |
||||
|
async queryMedicine() { |
||||
|
try { |
||||
|
const params = { projectId: this.projectId }; |
||||
|
const date = await this.$u.api.queryMedicine(params); |
||||
|
if (!date.length) { |
||||
|
this.show = true; |
||||
|
} else { |
||||
|
this.show = false; |
||||
|
} |
||||
|
this.setDate(date); |
||||
|
} catch (error) { |
||||
|
console.error('error: ', error); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 添加药物使用 |
||||
|
* @param { Object } params |
||||
|
*/ |
||||
|
async addMedicine() { |
||||
|
try { |
||||
|
const params = this.params; |
||||
|
if (!this.validationRequired(params)) return; |
||||
|
params.projectId = this.projectId; |
||||
|
await this.$u.api.addMedicine(params); |
||||
|
this.$emit('showToast', 'success', '药物使用添加成功'); |
||||
|
this.show = false; |
||||
|
} catch (error) { |
||||
|
console.error('error: ', error); |
||||
|
this.$emit('showToast', 'error', '药物使用添加失败'); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 验证必填项 |
||||
|
validationRequired() { |
||||
|
let isComplete = true; |
||||
|
for (let i = 0; i < this.medicineInfo.length; i++) { |
||||
|
const info = this.medicineInfo[i]; |
||||
|
for (let j = 0; j < info.date.length; j++) { |
||||
|
const item = info.date[j]; |
||||
|
if (item.type !== 4) { |
||||
|
if (!item.value) { |
||||
|
this.$t.ui.showToast(`请填写${item.name}`); |
||||
|
isComplete = false; |
||||
|
break; |
||||
|
} |
||||
|
} else { |
||||
|
if (!item.value && !item.checked) { |
||||
|
this.$t.ui.showToast(`请填写${item.name}`); |
||||
|
isComplete = false; |
||||
|
break; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
if (!isComplete) { |
||||
|
break; |
||||
|
} |
||||
|
} |
||||
|
if (!this.otherName.value) { |
||||
|
this.$t.ui.showToast(`请填写${this.otherName.name}`); |
||||
|
isComplete = false; |
||||
|
return; |
||||
|
} |
||||
|
if (!this.otherMedicine.value) { |
||||
|
this.$t.ui.showToast(`请填写${this.otherMedicine.name}`); |
||||
|
isComplete = false; |
||||
|
return; |
||||
|
} |
||||
|
if (isComplete) return true; |
||||
|
}, |
||||
|
|
||||
|
// 回显 |
||||
|
setDate(date) { |
||||
|
if (!date || !date.id) return; |
||||
|
const { medicineInfo, otherName, otherMedicine } = this; |
||||
|
otherName.value = date[otherName.label]; |
||||
|
otherMedicine.value = date[otherMedicine.label]; |
||||
|
for (let i = 0; i < medicineInfo.length; i++) { |
||||
|
const info = medicineInfo[i]; |
||||
|
for (let j = 0; j < info.date.length; j++) { |
||||
|
const item = info.date[j]; |
||||
|
switch (item.type) { |
||||
|
case 1: |
||||
|
item.value = date[item.label] === '0' ? '未作测评' : '已测评'; |
||||
|
break; |
||||
|
case 3: |
||||
|
item.value = date[item.label]; |
||||
|
break; |
||||
|
default: |
||||
|
if (date[item.label] !== '未服用') { |
||||
|
item.value = date[item.label]; |
||||
|
} else { |
||||
|
item.value = null; |
||||
|
item.checked = true; |
||||
|
} |
||||
|
break; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 修改药物使用 |
||||
|
* @param { Object } params |
||||
|
*/ |
||||
|
async updateMedicine(item) { |
||||
|
try { |
||||
|
const params = { projectId: this.projectId }; |
||||
|
params[item.label] = item.value; |
||||
|
console.log('params: ', params); |
||||
|
await this.$u.api.updateMedicine(params); |
||||
|
} catch (error) { |
||||
|
console.error('error: ', error); |
||||
|
this.$emit('showToast', 'error', '修改失败'); |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped></style> |
||||
Loading…
Reference in new issue