|
@@ -0,0 +1,396 @@
|
|
|
+<template>
|
|
|
+ <div class="AddChemicalAndCommonMappingWrapper clearfix">
|
|
|
+ <div class="groupTitle"><i
|
|
|
+ class="el-icon-back"
|
|
|
+ @click="back"
|
|
|
+ ></i>化验大小项与公表项对应维护--添加关联</div>
|
|
|
+ <div class="AddChemicalAndCommonMappingBox clearfix">
|
|
|
+ <div class="titleBox clearfix">
|
|
|
+ <h3 class="title">关联公表项</h3>
|
|
|
+ <h3 class="title">关联化验项</h3>
|
|
|
+ </div>
|
|
|
+ <div class="leftBox clearfix" >
|
|
|
+
|
|
|
+ <div class="itemLabel clearfix">
|
|
|
+ <label class="itemLabelName">选择化验大项:</label>
|
|
|
+ <input class="searchInput" @focus="focuInput" type="text" v-model = "mealText">
|
|
|
+ <span class="searchName" @click="searchMealItem(1)">搜索</span>
|
|
|
+ <ul class="itemList mealNameList" ref="mealNameList">
|
|
|
+ <li
|
|
|
+ v-for="item in mealNameList"
|
|
|
+ class="mealNameItem ellipsis"
|
|
|
+ :title="item.tagName"
|
|
|
+ @click="selectMealName(item)"
|
|
|
+ :key="item.id">
|
|
|
+ {{item.tagName}}
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="itemLabel clearfix">
|
|
|
+ <label class="itemLabelName isRequired">已选择化验大项:</label>
|
|
|
+ <span class="selectItemName">{{form.mealName}}</span>
|
|
|
+ </div>
|
|
|
+ <div class="itemLabel clearfix">
|
|
|
+ <label class="itemLabelName">选择化验小项:</label>
|
|
|
+ <input class="searchInput" @focus="focuInput" type="text" v-model = "itemText">
|
|
|
+ <span class="searchName" @click="searchMealItem(2)">搜索</span>
|
|
|
+ <ul class="itemList itemNameList" ref="itemNameList">
|
|
|
+ <li
|
|
|
+ v-for="item in itemNameList"
|
|
|
+ class="mealNameItem ellipsis"
|
|
|
+ :title="item.tagName"
|
|
|
+ @click="selectItemName(item)"
|
|
|
+ :key="item.id">
|
|
|
+ {{item.tagName}}
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="itemLabel">
|
|
|
+ <label class="itemLabelName">已选择化验小项:</label>
|
|
|
+ <span class="selectItemName">{{form.itemName}}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="midBox">
|
|
|
+ <h3>相互关联</h3>
|
|
|
+ </div>
|
|
|
+ <div class="rightBox">
|
|
|
+ <div class="itemLabel">
|
|
|
+ <label class="itemLabelName">选择公表项:</label>
|
|
|
+ <input class="searchInput" @focus="focuInput" type="text" v-model = "uniqueText">
|
|
|
+ <span class="searchName" @click="searchMealItem(3)">搜索</span>
|
|
|
+ <ul class="itemList uniqueNameList" ref="uniqueNameList">
|
|
|
+ <li
|
|
|
+ v-for="item in uniqueNameList"
|
|
|
+ class="mealNameItem ellipsis"
|
|
|
+ :title="item.conceptName"
|
|
|
+ @click="selectUniqueName(item)"
|
|
|
+ :key="item.conceptName">
|
|
|
+ {{item.conceptName}}
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="itemLabel">
|
|
|
+ <label class="itemLabelName isRequired">已选择公表项:</label>
|
|
|
+ <span class="selectItemName">{{form.uniqueName}}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="sumbitBox">
|
|
|
+ <!-- <span class="sumbit" @click="submitForm">建立关联</span> -->
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ @click="submitForm"
|
|
|
+ >建立关联</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import api from '@api/icss.js';
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'AddChemicalAndCommonMapping',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ mealText: '', //化验大项搜索文字内容
|
|
|
+ itemText: '', //化验小项搜索文字内容
|
|
|
+ uniqueText: '', //公表项搜索文字内容
|
|
|
+ isEdit: false,
|
|
|
+ mealNameList:[],
|
|
|
+ itemNameList: [],
|
|
|
+ uniqueNameList:[],
|
|
|
+ form: {
|
|
|
+ mealName: '', //大项名称
|
|
|
+ itemName: '', //小项名称
|
|
|
+ uniqueName: '', //公表名称,必填
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ //修改(不需要)
|
|
|
+ // const { isEdit, data } = this.$route.params
|
|
|
+ // if(isEdit) {
|
|
|
+ // this.isEdit = isEdit;
|
|
|
+ // this.form.mealName = data.mealName
|
|
|
+ // this.form.itemName = data.itemName
|
|
|
+ // this.form.uniqueName = data.uniqueName
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ back() {
|
|
|
+ this.$router.go(-1)
|
|
|
+ },
|
|
|
+ searchMealItem(type) {
|
|
|
+ if( type == '1' || type == '2') {
|
|
|
+ this.getTagList(type)
|
|
|
+ } else if ( type == '3') {
|
|
|
+ this.getAllLisConcept()
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ getTagList(type) {
|
|
|
+ let param = {}
|
|
|
+ if (type == 1) {
|
|
|
+ param.tagName = this.mealText
|
|
|
+ param.tagType = [7]
|
|
|
+ } else if (type == 2) {
|
|
|
+ param.tagName = this.itemText
|
|
|
+ param.tagType = [1]
|
|
|
+ }
|
|
|
+ api.searchTagList(param).then((res) => {
|
|
|
+ if (res.data.code === '0') {
|
|
|
+ if (type == 1) {
|
|
|
+ this.$refs['mealNameList'].style.display='block'
|
|
|
+ this.mealNameList = res.data.data
|
|
|
+ } else if (type == 2) {
|
|
|
+ this.$refs['itemNameList'].style.display='block'
|
|
|
+ this.itemNameList = res.data.data
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ getAllLisConcept() {
|
|
|
+ const param = {
|
|
|
+ conceptName: this.uniqueText
|
|
|
+ }
|
|
|
+ api.getAllLisConcept(param).then((res) => {
|
|
|
+ if(res.data.code === '0') {
|
|
|
+ this.$refs['uniqueNameList'].style.display='block'
|
|
|
+ this.uniqueNameList = res.data.data
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ focuInput() {
|
|
|
+ this.$refs['mealNameList'].style.display='none'
|
|
|
+ this.$refs['itemNameList'].style.display='none'
|
|
|
+ this.$refs['uniqueNameList'].style.display='none'
|
|
|
+ },
|
|
|
+ selectMealName(item) {
|
|
|
+ this.form.mealName = item.tagName
|
|
|
+ this.$refs['mealNameList'].style.display='none'
|
|
|
+ this.mealText = ''
|
|
|
+ this.mealNameList = []
|
|
|
+ },
|
|
|
+ selectItemName(item) {
|
|
|
+ this.form.itemName = item.tagName
|
|
|
+ this.$refs['itemNameList'].style.display='none'
|
|
|
+ this.itemText = ''
|
|
|
+ this.itemNameList = []
|
|
|
+ },
|
|
|
+ selectUniqueName(item) {
|
|
|
+ this.form.uniqueName = item.conceptName
|
|
|
+ this.$refs['uniqueNameList'].style.display='none'
|
|
|
+ this.uniqueText = ''
|
|
|
+ this.uniqueNameList = []
|
|
|
+ },
|
|
|
+ initForm() {
|
|
|
+ this.form.mealName = ''
|
|
|
+ this.form.itemName = ''
|
|
|
+ this.form.uniqueName = ''
|
|
|
+ },
|
|
|
+ submitForm() {
|
|
|
+ const { mealName, itemName, uniqueName } = this.form
|
|
|
+ if (!mealName || !uniqueName) {
|
|
|
+ this.warning('请填写相关数据')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ //通过必填验证,提交保存
|
|
|
+ const param = {
|
|
|
+ "itemName": itemName,
|
|
|
+ "mealName": mealName,
|
|
|
+ "uniqueName": uniqueName
|
|
|
+ }
|
|
|
+ console.log(param);
|
|
|
+ this.showSaveDialog(param);
|
|
|
+ },
|
|
|
+ addLisMapping(param, msg, type) {
|
|
|
+ api.addLisMapping(param).then((res) => {
|
|
|
+ if (res.data.code === '0') {
|
|
|
+ this.warning(res.data.msg || msg, type);
|
|
|
+ // this.$router.push({name: 'ChemicalAndCommonMapping'});
|
|
|
+ this.initForm();
|
|
|
+ } else {
|
|
|
+ this.warning(res.data.msg)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ showSaveDialog(param) {
|
|
|
+ // 修改(不需要)
|
|
|
+ // if(this.isEdit) {
|
|
|
+ // this.addLisMapping(param)
|
|
|
+ // } else {
|
|
|
+ api.hasLisMapping(param).then((res) => {
|
|
|
+ if (!res.data.data) {
|
|
|
+ this.addLisMapping(param, '关联建立成功', 'success' )
|
|
|
+ } else {
|
|
|
+ this.showConfirmDialog('该关联已存在是否替换旧的关系信息', () => {
|
|
|
+ this.addLisMapping(param, '关联建立成功', 'success' )
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }).catch((err) => {
|
|
|
+ this.warning(err);
|
|
|
+ })
|
|
|
+
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ showConfirmDialog(msg, resolve) {
|
|
|
+ this.$confirm(msg, '提示', {
|
|
|
+ customClass: 'confirmRealation',
|
|
|
+ confirmButtonText: '是',
|
|
|
+ cancelButtonText: '否',
|
|
|
+ cancelButtonClass: 'cancelButton',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ resolve();
|
|
|
+ }).catch(() => {
|
|
|
+ this.warning('建立失败','error')
|
|
|
+ });
|
|
|
+ },
|
|
|
+ warning(msg, type) {
|
|
|
+ this.$message({
|
|
|
+ showClose: true,
|
|
|
+ message: msg,
|
|
|
+ type: type || 'warning'
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="less">
|
|
|
+.AddChemicalAndCommonMappingWrapper {
|
|
|
+ min-width: 980px;
|
|
|
+ background: #fff;
|
|
|
+ .groupTitle {
|
|
|
+ width: calc(100% - 50px);
|
|
|
+ height: 40px;
|
|
|
+ background: #fff;
|
|
|
+ padding: 0 20px 0 30px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ line-height: 40px;
|
|
|
+ position: relative;
|
|
|
+ z-index: 5;
|
|
|
+
|
|
|
+ }
|
|
|
+ .titleBox {
|
|
|
+ border-bottom: 1px solid #000;
|
|
|
+ padding: 0 0 10px 0px;
|
|
|
+ }
|
|
|
+ .title {
|
|
|
+ width: 50%;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ .AddChemicalAndCommonMappingBox {
|
|
|
+ padding: 0 30px 20px 30px;
|
|
|
+ }
|
|
|
+ .leftBox , .midBox, .rightBox{
|
|
|
+ width: 40%;
|
|
|
+ float: left;
|
|
|
+ height: 200px;
|
|
|
+ }
|
|
|
+ .midBox {
|
|
|
+ width: 10%;
|
|
|
+ padding: 50px 0 0 0;
|
|
|
+ }
|
|
|
+ .itemLabel {
|
|
|
+ width: 100%;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .itemLabelName, .searchInput, .searchName{
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ .itemLabelName {
|
|
|
+ width: 150px;
|
|
|
+ }
|
|
|
+ .isRequired::before {
|
|
|
+ content: '*';
|
|
|
+ color: red;
|
|
|
+ }
|
|
|
+ .searchInput, .mealNameItem {
|
|
|
+ padding: 0 5px;
|
|
|
+ }
|
|
|
+ .searchInput, .searchName {
|
|
|
+ display: inline-block;
|
|
|
+ height: 22px;
|
|
|
+ line-height: 22px;
|
|
|
+ border: 1px solid gray;
|
|
|
+ margin: 9px 0 0 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .searchName {
|
|
|
+ border-left: none;
|
|
|
+ }
|
|
|
+ .itemList {
|
|
|
+ position: absolute;
|
|
|
+ display: none;
|
|
|
+ background: #fff;
|
|
|
+ width: 162px;
|
|
|
+ height: 80px;
|
|
|
+ border: 1px solid gray;
|
|
|
+ left: 150px;
|
|
|
+ top: 35px;
|
|
|
+ z-index: 2;
|
|
|
+ overflow-y: auto;
|
|
|
+ }
|
|
|
+ .mealNameItem {
|
|
|
+ height: 20px;
|
|
|
+ line-height: 20px;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ .mealNameItem:hover {
|
|
|
+ border: 1px solid #22ccc8;
|
|
|
+ }
|
|
|
+ .selectItemName {
|
|
|
+ display: inline-block;
|
|
|
+ width: calc(100% - 160px);
|
|
|
+ }
|
|
|
+ .sumbitBox {
|
|
|
+ position: relative;
|
|
|
+ background-color: #fff;
|
|
|
+ margin: 0px 20px;
|
|
|
+ padding: 20px;
|
|
|
+ .el-button {
|
|
|
+ position: absolute;
|
|
|
+ right: 80px;
|
|
|
+ top: -20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .sumbit {
|
|
|
+ position: absolute;
|
|
|
+ display: inline-block;
|
|
|
+ width: 80px;
|
|
|
+ height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+ border: 1px solid #000;
|
|
|
+ text-align: center;
|
|
|
+ right: 100px;
|
|
|
+ }
|
|
|
+ .confirmRealation {
|
|
|
+ .cancelButton{
|
|
|
+ span {
|
|
|
+ border: 1px solid #000;
|
|
|
+ color: #000 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ .el-message-box__btns .el-button--default {
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+}
|
|
|
+.confirmRealation {
|
|
|
+ .cancelButton{
|
|
|
+ border-color: #000;
|
|
|
+ color: #000 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+}
|
|
|
+</style>
|