You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

269 lines
8.0 KiB

<template>
<!-- 纳排条件管理 -->
<!-- 内容 -->
<div class="content">
<!-- 或并 -->
<el-table :data="formContent" style="width: 100%" :show-header="false">
<el-table-column width="120">
<template slot-scope="scope">
<!-- v-show="scope.$index!=0" -->
<el-select
v-model="filterItemList[scope.$index].connection"
placeholder="请选择"
class="select-join"
size="small"
clearable
@change="joinContentChange(scope.$index,$event)"
>
<el-option
v-for="item in scope.row.joinContent[0].join"
:key="item.value"
:label="item.label"
:value="item.value"
:style="{'display': item.value==='should'&& pageName=='condition' ? 'none' : 'block'}"
:disabled="item.value==='should'&& pageName=='condition' ? true :false"
/>
</el-select>
</template>
</el-table-column>
<!-- 患者信息 -->
<el-table-column width="350">
<template slot-scope="scope">
<el-select
v-model="filterItemList[scope.$index].id"
filterable
placeholder="请选择"
class="select-info"
size="small"
clearable
@change="patientInfoChange(scope.$index,$event)"
>
<el-option-group
v-for="group in scope.row.patientInfoContent[0].patientInfo"
:key="group.tableDescription"
:label="group.tableDescription"
class="select-group"
>
<el-option
v-for="item in group.list"
:key="item.id"
:label="item.fieldDescription"
:value="item.id"
/>
</el-option-group>
</el-select>
</template>
</el-table-column>
<!-- 匹配 -->
<el-table-column width="200">
<template slot-scope="scope">
<el-select
v-model="filterItemList[scope.$index].queryType"
placeholder="请选择"
class="select-matching"
size="small"
clearable
@change="matchingChange(scope.$index,$event)"
>
<el-option
v-for="item in scope.row.matchingContent[0].matching"
:key="item.value"
:label="item.label"
:value="item.value"
:disabled="item.disabled"
/>
</el-select>
</template>
</el-table-column>
<!-- 大于等于符号 -->
<!-- <el-table-column width="160">
<template slot-scope="scope">
<el-select v-model="scope.row.symbolContent[0].selectValueArr[scope.$index]"
placeholder="请选择" class="select-symbol" size="small">
<el-option v-for="item in scope.row.symbolContent[0].symbol" :key="item.value"
:label="item.label" :value="item.value">
</el-option>
</el-select>
</template>
</el-table-column> -->
<!-- 输入字符串/日期/范围-->
<el-table-column width="400">
<template slot-scope="scope">
<!-- 字符串 -->
<el-input
v-show="scope.row.patientInfoContent[0].showMode[scope.$index]!='date' && scope.row.patientInfoContent[0].showMode[scope.$index]!='number'"
v-model="filterItemList[scope.$index].queryValue.eq"
placeholder="请输入内容"
class="patient-input-content"
size="small"
clearable
@input="stringInput(scope.$index,$event)"
/>
<!-- 日期 -->
<el-date-picker
v-show="scope.row.patientInfoContent[0].showMode[scope.$index]=='date'"
v-model="scope.row.InputData[0].dataRange[scope.$index]"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
size="small"
clearable
@change="dateChange(scope.$index,$event)"
/>
<!-- 范围 -->
<div v-show="scope.row.patientInfoContent[0].showMode[scope.$index]=='number'" class="number-range">
<el-input
v-model="filterItemList[scope.$index].queryValue.gte"
placeholder="区间范围"
class="patient-number-content"
size="small"
clearable
@input="numberOneInput(scope.$index,$event)"
/>
<span class="number-line">-</span>
<el-input
v-model="filterItemList[scope.$index].queryValue.lte"
placeholder="区间范围"
class="patient-number-content"
size="small"
clearable
@input="numberTwoInput(scope.$index,$event)"
/>
</div>
</template>
</el-table-column>
<el-table-column>
<template slot-scope="scope">
<span v-show="scope.row.iconState[scope.$index].state!=true">
<slot name="check" :index="scope.$index" />
</span>
<span>
<slot name="close" :index="scope.$index" />
</span>
<span v-show="scope.row.iconState[scope.$index].state==true">
<slot name="plus" :index="scope.$index" />
</span>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
props: {
filterItemList: {
type: Array,
default: () => []
},
formContent: {
type: Array,
default: () => []
},
conditionObj: {
type: Object,
default: () => {
return {}
}
},
pageName: {
type: String,
default: ''
}
},
data() {
return {
}
},
methods: {
// 或并选择
joinContentChange(index, e) {
this.$emit('setIconStateFalse', index)
},
// 患者信息选择
patientInfoChange(index, e) {
// 患者数据只要发生改变就可以从新查询
this.$emit('setIconStateFalse', index)
this.$emit('patientInfoChange', index, e)
},
// 匹配选择
matchingChange(index, e) {
this.$emit('setIconStateFalse', index)
},
// 字符串输入框内容发生变化时
stringInput(index, e) {
this.$emit('setIconStateFalse', index)
},
// 范围1-输入框内容发生变化时
numberOneInput(index, e) {
this.$emit('setIconStateFalse', index)
},
// 范围2-输入框内容发生变化时
numberTwoInput(index, e) {
this.$emit('setIconStateFalse', index)
},
// 日期区间
dateChange(index, e) {
console.log(index, e)
this.$emit('setIconStateFalse', index)
// this.$parent.setIconStateFalse(index, e)
this.filterItemList[index].queryValue.gte = this.$moment(e[0]).format('l')
this.filterItemList[index].queryValue.lte = this.$moment(e[1]).format('l')
}
}
}
</script>
<style lang='scss' scoped>
.content {
// padding: 16px;
.el-select {
display: block;
}
.select-symbol {
margin-right: 5px;
}
.el-icon-close {
font-size: 30px;
color: #ff4d4f;
}
.el-icon-plus {
font-size: 26px;
color: #1890ff;
}
.el-icon-check {
font-size: 30px;
color: #52c41a;
}
.number-range {
display: flex;
align-items: center;
.number-line {
padding: 0 8px;
}
}
.select-group >>> .el-select-group__title {
font-size: 14px;
font-weight: 600;
color: #409eff;
/* background-color: aliceblue; */
}
}
</style>
<style lang="scss">
.content {
.el-table .cell {
padding-right: 0 !important;
}
.el-table--enable-row-hover .el-table__body tr:hover>td {
background: none;
}
}
</style>