123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389 |
- <!-- 添加常见科室症状 -->
- <template>
- <div class="AddChronicAndIndexRelationWrapper" @click="close">
- <!-- <div class="groupTitle"><i
- class="el-icon-back"
- @click="back"
- ></i> 量表管理维护--{{titleText}}</div> -->
- <crumbs
- :title="'慢病指标值关联维护-'+titleText"
- class="topBack"
- :param="$route.params"
- linkTo="ChronicAndIndexRelation"
- ></crumbs>
- <el-form :model="form" ref="ruleForm" class="addDepartForm">
- <el-form-item class="addDepartFormItem" v-if="!isEdit" label="选择慢病标准术语(概念ID):" prop="department">
- <input class="searchInput" @focus="focuInput" type="text" v-model = "searchDiagVal">
- <span class="searchName" @click="searchDiag">搜索</span>
- <ul class="itemList diagList" ref="diagList">
- <li
- v-for="item in diagList"
- class="diagItem ellipsis"
- :title="item.diseaseName"
- @click="selectDiag(item)"
- :key="item.diseaseId">
- {{item.diseaseName}}
- </li>
- </ul>
- </el-form-item>
- <el-form-item class="isRequired" label="已选择慢病标准术语:" prop="type">
- {{form.diseaseName}}
- </el-form-item>
- </el-form>
- <div class="symptomList">
- <div class="screenIndex clearfix">
- <label class="screenIndexLabel">选择化验指标公表项内容(概念ID):</label>
- <input class="searchInput" @focus="focuInput" type="text" v-model = "searchIndexVal">
- <span class="searchName" @click="searchIndex">搜索</span>
- <ul class="itemList indexList" ref="indexList">
- <li
- v-for="item in indexList"
- class="diagItem ellipsis"
- :title="item.conceptName"
- @click="selectIndex(item)"
- :key="item.conceptId">
- {{item.conceptName}}
- </li>
- </ul>
- </div>
- <table class="indexTab">
-
- <tr>
- <td class="selectedContent">已选择内容</td>
- <td class="selectedContentGroup">已选内容分组(只可输入数字,相同数字归为一组展示)</td>
- <td class="selectedContentOpera">操作</td>
- </tr>
- <tr v-for="(item, index) in selectedIndexList" :key="item.indexUnique">
- <td class="selectedContent ">{{item.indexUnique}}</td>
- <td class="selectedContentGroup"><input class="groupInput" type="text" v-model="item.indexDesc" @input="handleInp(index,$event)"></td>
- <td class="selectedContentOpera"><el-button type="text" size="small" class="delete" @click="delSelectedIndex(item, index)">删除</el-button></td>
- </tr>
- </table>
- </div>
- <div class="btn">
- <el-button
- type="primary"
- :disabled = 'saveDisable'
- @click="submitForm('ruleForm')"
- >确 定</el-button>
- </div>
- </div>
-
- </template>
- <script>
- import api from '@api/icss.js';
- export default {
- name: 'AddChronicAndIndexRelation',
- data() {
- return{
-
- form: {
- diseaseId: '', //诊断id
- diseaseName:'' //诊断名称
- },
- titleText: '添加关联',
- diagList: [],
- indexList: [],
- selectedIndexMap: [], //已经选择过的指标
- selectedIndexList: [], //选择的指标列表
- searchDiagVal: '',
- searchIndexVal: '',
- isEdit: false,
- saveDisable: false
- }
- },
- created(){
- const { isEdit, data } = this.$route.params;
- if(isEdit) {
- if(isEdit) {
- this.isEdit = isEdit;
- this.titleText = '修改关联';
- this.form.diseaseId = data.diseaseId
- this.form.diseaseName = data.diseaseName
- this.selectedIndexList = data.data
- for (let i = 0; i < this.selectedIndexList.length; i++) {
- this.selectedIndexMap.push(this.selectedIndexList[i].indexUnique)
- }
- }
- } else {
-
- }
- },
- watch: {
- // searchTagVal(newVal, preVal) {
- // if(newVal.trim() == ''){
- // this.getTagList()
- // }else if(newVal.trim() != preVal.trim()){
- // this.getTagList()
- // }
- // }
- },
- methods: {
- close() {
- this.diagList = [];
- this.indexList = [];
- if(this.diagList.length>0){this.$refs['diagList'].style.display = 'none';}
- if(this.indexList.length>0){this.$refs['indexList'].style.display = 'none';}
- },
- back(){
- this.$router.go(-1);
- },
- searchDiag() {
- const param = {
- "diseaseName": this.searchDiagVal,
- }
- api.queryIndexConfigDiseaseNames(param).then((res)=>{
- if(res.data.code === '0') {
- this.diagList = res.data.data
- if(this.diagList.length>0) {this.$refs['diagList'].style.display = 'block'}
- if(this.indexList.length>0) {this.$refs['indexList'].style.display = 'none'}
- }
- })
- },
- selectDiag(item) {
- this.form.diseaseId = item.diseaseId
- this.form.diseaseName = item.diseaseName
- this.$refs['diagList'].style.display='none'
- this.searchDiagVal = ''
- this.diagList=[]
- },
- focuInput() {
- this.$refs['diagList'].style.display='none'
- this.$refs['indexList'].style.display='none'
-
- },
- searchIndex() {
- const param = {
- conceptName: this.searchIndexVal,
- excludedConceptNames: this.selectedIndexMap
- }
-
- api.getAllLisConcept(param).then((res)=>{
- if(res.data.code === '0') {
- this.indexList = res.data.data
- // this.indexList =[
- // {conceptName : '空腹血糖'},
- // {conceptName : '餐后2小时血糖'},
- // {conceptName : '随机血糖'},
- // {conceptName : '糖化血红蛋白'},
- // {conceptName : '血常规'},
- // ]
- if(this.indexList.length > 0){this.$refs['indexList'].style.display='block'}
- if(this.diagList.length>0) {this.$refs['diagList'].style.display = 'none'}
- }
- })
- },
- selectIndex(item) {
- this.selectedIndexList.push({indexUnique: item.conceptName, conceptId: item.conceptId, indexDesc:''})
- this.selectedIndexMap.push(item.conceptName)
- this.indexList = []
- this.$refs['indexList'].style.display='none'
- },
- delSelectedIndex(selectedItem, index) {
- this.selectedIndexMap = this.selectedIndexMap.filter((item) => {return item != selectedItem.indexUnique})
- this.selectedIndexList.splice(index, 1)
- },
- submitForm(formName) {
- if(!this.form.diseaseId) {
- this.warning('请选择诊断')
- return
- }
- if(this.selectedIndexList.length === 0) {
- this.warning('请选择指标')
- return
- }
- for (let i = 0; i < this.selectedIndexList.length; i++) {
- if(!this.selectedIndexList[i].indexDesc) {
- this.warning('请填写内容分组')
- return
- }
- }
- this.showDelDialog()
- },
- showDelDialog() {
- this.selectedIndexList.map((item) => {
- item.diseaseId = this.form.diseaseId
- return item
- })
- const param ={
- "diseaseId": this.form.diseaseId,
- "indexConfigData": this.selectedIndexList
- }
- this.showConfirmDialog('是否建立该关联?', () => {
- const url = this.isEdit ?api.updateIndexConfigList(param) : api.saveIndexConfigLists(param)
- this.saveDisable = true //提交保存按钮不可点击,返回结果时才可点击,防止频繁发送请求
- url.then((res) => {
- if (res.data.code === '0') {
- this.warning(res.data.msg || '关联成功', 'success','1000')
- setTimeout(() => {
- //返回带搜索条件的首页
- this.$router.push({
- path:'ChronicAndIndexRelation',
- params: Object.assign({}, this.$route.params, {currentPage: 1})
- })
- }, 1000);
- } else {
- this.warning(res.data.msg)
- }
- this.saveDisable = false
- }).catch((err) => {
- this.warning(err);
- })
- });
- },
- showConfirmDialog(msg, resolve) {
- this.$alert(msg, '提示', {
- confirmButtonText: '确定',
- type: 'warning'
- }).then(() => {
- resolve();
- }).catch(() => {});
- },
- warning(msg, type,time) {
- this.$message({
- showClose: true,
- message: msg,
- type: type || 'warning',
- duration:time || '3000'
- })
- },
- handleInp(index,e){ //分组不能输入负数
- const value = e.target.value;
- const item = this.selectedIndexList[index].indexDesc;
- e.target.value = value.replace(/[^\d]/g,'');
- this.selectedIndexList[index].indexDesc = item.replace(/[^\d]/g,'');
- }
- }
- }
- </script>
- <style lang="less">
- @import '../../less/common.less';
- .AddChronicAndIndexRelationWrapper {
- color: #606266;
- .topBack {
- top: 0;
- }
- .groupTitle {
- background-color: #fff;
- height: 40px;
- line-height: 40px;
- padding-left: 20px;
- }
-
- .searchInput, .searchName {
- display: inline-block;
- height: 32px;
- line-height: 32px;
- border: 1px solid #a9a9a9;
- margin: 0px 0 0 0;
- padding: 0 5px;
- float: left;
- margin-top: 4px;
- }
- .isRequired .el-form-item__label::before {
- content: '*';
- color: red;
- }
- .searchName {
- border-left: none;
- cursor: pointer;
- font-size: 16px;
- padding: 0 14px;
- }
- .itemList {
- position: absolute;
- display: none;
- background: #fff;
- width: 162px;
- max-height: 150px;
- border: 1px solid #a9a9a9;
- left: 209px;
- top: 37px;
- z-index: 2;
- overflow-y: auto;
- }
- .diagItem {
- padding: 0 5px;
- height: 30px;
- line-height: 30px;
- font-size: 14px;
- cursor: pointer;
- }
- .diagItem:hover {
- background: #f5f7fa;
- }
- .addDepartForm {
- position: relative;
- background-color: #fff;
- padding: 20px;
- margin: 70px 20px 0px 20px;
- border-bottom: 1px solid #c0c4cc;
- }
- .addDepartFormItem {
- position: relative;
- }
- .symptomList {
- background-color: #fff;
- padding: 20px;
- margin: 0px 20px 0px 20px;
- min-height: 400px;
- }
- .screenIndexLabel {
- float: left;
- height: 40px;
- line-height: 40px;
- font-size: 14px;
- }
- .indexTab {
- width: 100%;
- border-collapse: collapse;
- tr {
- td {
- padding: 5px 10px;
- border-bottom: 1px solid #a9a9a9;
- text-align: center;
- }
- }
- .selectedContent {
- width: 25%;
- }
- .selectedContentGroup {
- width: 55%;
- }
- .selectedContentOpera {
- width: 20%;
- }
- }
- .screenIndex {
- width: 100%;
- margin-bottom: 30px;
- position: relative;
- }
- .indexList {
- left: 239px;
- }
- .groupInput {
- text-align: center;
- height: 28px;
- color: #606266;
- width: 60%;
- }
- .btn {
- position: relative;
- background-color: #fff;
- margin: 0px 20px;
- height: 40px;
- padding: 20px;
- .el-button {
- position: absolute;
- right: 20px;
- }
- }
- .selectDepart {
-
- }
- }
-
- </style>
|