platformFront/src/components/icss/ChronicDiseaseManageAdd.vue

<template>
  <div>
    <crumbs
      :title="minTitle"
      class="topBack"
      linkTo="/admin/LT-YXSJWH-MBGLYPG"
    ></crumbs>
    <div class="ChronicDiseaseAddWrap">
      <div class="ChronicDisease">
        <p class="ChronicDiseaseTop">
          <span>选择诊断标签：</span>
          <input
            type="text"
            v-model="region"
          >
          <i>搜索</i>
          <ul>
            <li>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</li>
            <li>呵呵呵</li>
            <li>咯咯咯</li>
          </ul>
        </p>
        <p class="ChronicDiseaseBtm">
          <span>已选择诊断：</span>
          <i>{{region}}</i>
        </p>
      </div>
      <div class="ChronicDiseaseDetail">
         <el-form
            class="ChronicDiseaseForm"
          >
            <el-form-item
              label="数据来源："
              prop="comes"
            >
              <el-select
                v-model="comes"
                placeholder="请选择数据来源"
              >
                <el-option
                  v-for="item in Adscriptions"
                  :label="item.name"
                  :value="item.id"
                  :key="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        <div class="ChronicDiseaseLeft">
          <h4>操作栏：</h4>
          <ul>
            <li>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</li>
            <li>呵呵呵</li>
            <li>咯咯咯</li>
          </ul>
        </div>
        <div class="bottomPartMid fl">
          <p><span
              class="el-icon-arrow-right"
              @click="toRightPool"
            ></span></p>
          <p><span
              class="el-icon-arrow-left"
              @click="toLeftPool"
            ></span></p>
        </div>
        <div class="ChronicDiseaseRight">
          <h4>内容池：</h4>
          <ul>
            <li>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</li>
            <li>呵呵呵</li>
            <li>咯咯咯</li>
          </ul>
        </div>
        <div class="bottomPartMid fl">
          <p><span
              class="el-icon-arrow-up"
              @click="toTopPool"
            ></span></p>
          <p><span
              class="el-icon-arrow-down"
              @click="toBtmPool"
            ></span></p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import api from '@api/icss.js';
import utils from '@api/utils.js';

/**
 * 归属type
 * 1：主诉模板 2：现病史模板 3：现病史空模板 4 : 其他史模板 5：嵌套模板 6：慢病模板
 */


export default {
  data() {
    return {
      region: '',    //量表标签
      AdscriptionsType: [],
      Adscriptions:[
        {name:'图谱',id:'1'},
        {name:'后端',id:'2'},
        {name:'前端',id:'3'},
      ],
      editData: {},
      comes:'',
      minTitle: '慢病评估维护-添加管理评估'
    }
  },
  mounted() {
    console.log(this.$route.params, 78787)
    let tmpEditData = this.$route.params
    this.editData = tmpEditData
    if (tmpEditData.isEdit) {      //修改
      this.minTitle = '慢病评估维护-修改管理评估'
      this.form = Object.assign({}, this.form, editData);
      this.form.region1 = (editData.type + '')
      this.form.region2 = editData.name
    }
    this.$emit('changeVal', this.form, false)
    // this.searchTagList()
  },
  methods: {
    sendData(val) {
      this.$emit('changeVal', this.form, false)
    },
    toRightPool() {

    },
    toLeftPool() {

    },
    toTopPool() {

    },
    toBtmPool() {

    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$emit('validatePass', this.form, false)
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
  }
}
</script>
<style lang="less" scoped>
@import "../../less/common.less";
.topBack {
  top: 0;
}
.ChronicDiseaseAddWrap {
  margin: 20px;
  box-sizing: border-box;
  background-color: #fff;
  color: #606266;
  .ChronicDisease {
    border-bottom: 1px solid #c0c4cc;
    padding: 20px;
    margin-top: 60px;
    span {
      width: 160px;
      display: inline-block;
    }
    .ChronicDiseaseTop {
      input {
        width: 221px;
        height: 34px;
        line-height: 34px;
        padding-left: 7px;
        padding-right: 56px;
        box-sizing: border-box;
      }
      i {
        display: inline-block;
        width: 56px;
        height: 34px;
        line-height: 32px;
        border-left: 1px solid #ccc;
        position: relative;
        left: -57px;
        vertical-align: middle;
        text-align: center;
        cursor: default;
      }
      ul {
        margin-left: 160px;
        width: 219px;
        border: 1px solid #ccc;
        background: #fff;
        max-height: 291px;
        overflow-y: auto;
        li {
          border: 1px solid #fff;
          padding-left: 7px;
          height: 27px;
          line-height: 27px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        li:hover {
          border-color: #22ccc8;
        }
      }
    }
    .ChronicDiseaseBtm {
      margin: 10px 0;
    }
  }
  .ChronicDiseaseDetail {
    padding: 20px;
    overflow: hidden;
    min-width: 650px;
    .ChronicDiseaseForm {
      margin-bottom: 15px;
      .el-form-item__content {
        font-size: 16px;
      }
    }
    h4 {
      margin-bottom: 10px;
      font-weight: normal;
    }
    .bottomPartMid {
      width: 60px;
      margin-top: 60px;
      p {
        width: 100%;
        text-align: center;
        span {
          cursor: pointer;
          display: inline-block;
          width: 30px;
          height: 40px;
          line-height: 40px;
          margin: 0 auto;
          border: 1px solid @icssBorder;
          margin-bottom: 15px;
          font-size: 18px;
        }
      }
    }
    .ChronicDiseaseLeft {
      float: left;
    }
  }
  .ChronicDiseaseRight {
    float: left;
    ul {
      width: auto;
    }
  }
  ul {
    width: 219px;
    border: 1px solid #ccc;
    background: #fff;
    height: 400px;
    overflow-y: auto;
    li {
      border: 1px solid #fff;
      padding: 0 7px;
      height: 27px;
      line-height: 27px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    li:hover {
      border-color: #22ccc8;
    }
  }
}
</style>