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