<template>
<!-- 切换主题时样式切换 -->
<div v-loading="loading" :id="this.$store.state.settings.version">
<div class="nostalgia-block-table">
<div class="nostalgia-block-title">
<el-row type="flex" justify="space-between">
<el-col :span="24">
<div style="display: flex;justify-content: space-between;">
<div class="el-button--primary nostalgia-block-query">
<div class="nostalgia-round-title">
<div class="nostalgia-round el-button--primary"></div>
<div class="nostalgia-round-opacity el-button--primary"></div>
</div>
<!-- 标题 -->
<div>TUI中高低档病人量</div>
<span class="el-button--primary"></span>
</div>
<!-- 新增 -->
<el-button style="float: right;" round size="small" icon="el-icon-plus" type="primary" @click="handleAdd"
class="nostalgia-button70">新增
</el-button>
</div>
</el-col>
</el-row>
</div>
<div class="nostalgia-customer-table">
<el-table :data="dataList" border class="no-bottom-border" style="width: 100%" fit
:row-class-name="tableRowClassName">
<!-- IB Modality -->
<el-table-column label="IB Modality" prop="ibModality" align="center"/>
<el-table-column label="Series" prop="series" align="center"/>
<!-- 高病人(>) -->
<el-table-column label="高病人(>)" prop="highCount" align="center"/>
<!-- 中病人(中间包含=) -->
<el-table-column label="中病人(中间包含=)" prop="mediumCount" align="center"/>
<!-- 低病人(<) -->
<el-table-column label="低病人(<)" prop="lowCount" align="center"/>
<!-- Status 固定列 -->
<el-table-column align="center" prop="status" label="Status"/>
<!-- 操作 -->
<el-table-column label="Action" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<!-- 修改操作 -->
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
</template>
</el-table-column>
</el-table>
</div>
<!-- 分页 -->
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
@pagination="getList()"/>
</div>
<!-- 添加或修改Dicount对话框 -->
<el-dialog :id="this.$store.state.settings.version + '-pop'" :visible.sync="open" width="900px" append-to-body>
<div class="dialog-title">
<div class="title-line left"></div>
<div>{{ title }}</div>
<div class="title-line right"></div>
</div>
<el-form ref="form" :model="form" :rules="rules" label-width="150px" :validate-on-rule-change="false">
<el-row>
<el-col :span="12">
<el-form-item label="IB Modality" prop="ibModality">
<!-- <el-input v-model="form.ibModality" :disabled="true" style="width: 100%"/>-->
<el-select
v-model="form.ibModality"
placeholder="请选择"
clearable
filterable
:disabled="isEdit"
@change="getSeries"
>
<el-option
v-for="item in modalityList"
:key="item.value"
:label="item.label"
:value="item.value"
style="width: 280px" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="Series" prop="series">
<!-- <el-input v-model="form.series" :disabled="true" style="width: 100%"/>-->
<el-select
v-model="form.series"
placeholder="请选择"
clearable
filterable
multiple
collapse-tags
popper-class="select-popover-class"
value-key="series"
@change="changeSeries"
>
<el-checkbox v-if="seriesList.length > 0" v-model="form.allSeriesSelected" class="custom-checkbox"
@change="handleSeriesSelectAll">
<i style="margin:0 3px;font-weight:600;font-size: 12px" v-show="form.allSeriesSelected" class="el-icon-check"></i>
<span :style="{ fontWeight: form.allSeriesSelected ? '600' : '500', 'margin-left': form.allSeriesSelected ? '2px' : '20px' }">全选</span>
</el-checkbox>
<el-option
v-for="item in seriesList"
:key="item.value"
:label="item.label"
:value="item.value"
style="width: 280px"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="Status" prop="status">
<el-select v-model="form.status">
<el-option
v-for="item in statusList"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="高病人(>)" prop="highCount">
<el-input-number :min="0" :max="999999999999999" :precision="0" v-model="form.highCount" style="width: 100%"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="低病人(<)" prop="lowCount">
<el-input-number :min="0" :max="999999999999999" :precision="0" v-model="form.lowCount" style="width: 100%"/>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="from-buttom">
<el-button type="primary" class="nostalgia-button70" @click="submitForm">确 定</el-button>
<el-button @click="cancel" class="button-cancel-70">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {
getSvcTuiTieredPatientsList,
submitSvcTuiTieredPatients,
edit,
selectSvcTuiTieredPatientsInfo,
} from '@/api/svcepop/tuiPatientVolume';
import {getModality, getSeriesByModality} from '@/api/svcepop/modalityAndSeries/modalityAndSeries.js';
export default {
name: "tuiPatientVolume",
props: {
componentName: String,
},
directives: {
'el-select-loadmore': {
bind(el, binding) {
const scrollHandler = function () {
const ratio = parseFloat((1 / window.devicePixelRatio).toFixed(2)) + 0.01;
const condition = this.scrollHeight - (this.scrollTop + ratio) <= this.clientHeight;
if (condition) {
binding.value();
}
};
const SELECTWRAP_DOM = el.querySelector(
".el-select-dropdown .el-select-dropdown__wrap"
);
SELECTWRAP_DOM.addEventListener("scroll", scrollHandler);
// 保存引用以便unbind时移除
el._scrollHandler = scrollHandler;
el._scrollElement = SELECTWRAP_DOM;
},
unbind(el) {
if (el._scrollElement && el._scrollHandler) {
el._scrollElement.removeEventListener("scroll", el._scrollHandler);
}
}
}
},
data() {
return {
// 遮罩层
loading: true,
// 总条数
total: 0,
// 项目流程自动化管理表格数据
manageList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
},
// 表单参数
form: {
ibModality: '',
series: '',
status: 'Active'
},
// 表单校验
rules: {
highCount: [{
validator: (rule, value, callback) => {
let lowCount = this.form.lowCount;
let hasHighCount = value || value == 0;
let hasLowCount = lowCount || lowCount == 0;
if (!hasHighCount && hasLowCount) {
callback(new Error('请输入高病人(>)'));
} else if (hasHighCount && hasLowCount && lowCount > value) {
callback(new Error('请输入正确的高病人(>)'));
} else {
callback();
}
},
trigger: 'blur'
}],
lowCount: [{
validator: (rule, value, callback) => {
let highCount = this.form.highCount;
let hasHighCount = highCount || highCount == 0;
let hasLowCount = value || value == 0;
if (!hasLowCount && hasHighCount) {
callback(new Error('请输入低病人(<)'));
} else if (hasLowCount && hasHighCount && highCount < value) {
callback(new Error('请输入正确的低病人(<)'));
} else {
callback();
}
},
trigger: 'blur'
}],
ibModality: [{required: true, message: '请选择Modality', trigger: 'change'}],
series: [{required: true, message: '请选择Series', trigger: 'change'}],
status: [{required: true, message: '请选择Status', trigger: 'change'}],
},
// 新增或编辑标识
isEdit: false,
// 列表数据
dataList: [],
// status下拉框数据
statusList: ['Active', 'Inactive'],
modalityList: [],
seriesList: [],
};
},
created() {
this.getModalityList();
this.getList();
},
methods: {
getModalityList() {
getModality().then((res) => {
this.modalityList = res.data;
})
},
async getSeries(modality) {
if (!modality) {
this.form.series = "";
this.seriesList = [];
return
}
let param = {
modality: modality
}
await getSeriesByModality(param).then((res) => {
this.seriesList = res.data
})
},
changeSeries() {
// 更新全选状态
this.form.allSeriesSelected = this.seriesList.length > 0 &&
this.form.series.length === this.seriesList.length;
},
handleSeriesSelectAll(val) {
if (val) {
this.form.series = this.seriesList.map(m => m.value);
} else {
this.form.series = [];
}
this.changeSeries();
},
// 设置奇数和偶数行样式
tableRowClassName({row, rowIndex}) {
if (rowIndex % 2 === 1) {
return 'warning-row';
}
return '';
},
// 查询TUI中高低档病人量列表数据
getList() {
this.loading = true;
let query = {
...this.queryParams,
...this.query,
}
// 接口
getSvcTuiTieredPatientsList(query).then(response => {
this.dataList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 新增按钮操作
handleAdd() {
this.reset();
this.isEdit = false;
this.open = true;
this.title = "添加TUI中高低档病人量";
},
// 修改按钮操作
async handleUpdate(row) {
this.reset();
this.isEdit = true;
let query = {
groupId: row.groupId,
}
const response = await selectSvcTuiTieredPatientsInfo(query);
this.form = response.data;
if (!response.data?.highCount && response.data?.highCount != 0) {
this.$delete(this.form, 'highCount');
}
if (!response.data?.lowCount && response.data?.lowCount != 0) {
this.$delete(this.form, 'lowCount');
}
this.title = "修改TUI中高低档病人量";
await this.getSeries(this.form.ibModality);
if (this.form.series) {
this.form.series = this.form.series.split(",");
// 更新全选状态 全选后台存All(一条)
this.form.allSeriesSelected = this.seriesList.length > 0 &&
this.form.series.length === 1 && this.form.series[0] === 'ALL';
if (this.form.allSeriesSelected) {
this.form.series = this.seriesList.map(m => m.value)
}
}
this.open = true;
},
// 提交按钮
submitForm: function () {
this.$refs["form"].validate(valid => {
if (valid) {
let highCount = this.form.highCount;
let lowCount = this.form.lowCount;
if ((highCount || highCount == 0) && (lowCount || lowCount == 0)) {
this.form.mediumCount = lowCount + '-' + highCount;
}else{
this.form.mediumCount = '';
}
let query = {
...this.form,
series: this.form.series?.join(",")
}
// 编辑和提交调用相同接口,后端通过id判断
if (this.form.groupId) {
edit(query).then(response => {
if (response.code == 200) {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.queryParams = {
pageNum: 1,
pageSize: 10,
};
this.getList();
} else {
this.$modal.msgError(response.message);
}
});
} else {
submitSvcTuiTieredPatients(query).then(response => {
if (response.code == 200) {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.queryParams = {
pageNum: 1,
pageSize: 10,
};
this.getList();
} else {
this.$modal.msgError(response.message);
}
});
}
}
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
console.log('中高低')
this.form = {
ibModality: '',
series: '',
status: 'Active'
};
this.seriesList = [];
this.resetForm("form");
this.$nextTick(() => {
this.$refs.form.resetFields(); // 重置表单(包括清除错误提示)
});
},
},
};
</script>
<style scoped lang="scss">
#public-container-pop {
::v-deep .el-input-number--medium .el-input-number__decrease,
::v-deep .el-input-number--medium .el-input-number__increase {
height: 29px !important;
line-height: 29px !important;
margin-top: 1px !important;
}
}
.custom-checkbox {
::v-deep .el-checkbox__inner {
display: none !important;
}
::v-deep .el-checkbox__label {
padding-left: 0px !important;
line-height: 34px !important;
}
}
</style>
这里的表单校验, 在首次打开dialog的时候series就会被触发, 而modality则不会, 关掉再次打开就不会触发了
最新发布