platformFront/src/components/knowledgeExtra/AddZskRegisteredDrug.vue

<template>
  <div style="min-height:100%" ref="viewBox">
    <crumbs :title="title" :param="$route.params" linkTo="ZskRegisteredDrug"></crumbs>
    <div class="contents">
      <div class="content">
        <el-form
          :inline="true"
          ref="formInline"
          :model="formInline"
          class="demo-form-inline"
          label-width="100px"
        >
          <el-form-item label="药品代码:">
            <el-input v-model="formInline.drugCode" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="最小包装单位:">
            <el-input v-model="formInline.minPackUnit" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="注册名称:">
            <el-input v-model="formInline.name" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="药品企业:">
            <el-input v-model="formInline.company" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="英文名称:">
            <el-input v-model="formInline.enName" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="批准文号:">
            <el-input v-model="formInline.approval" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="商品名称:">
            <el-input v-model="formInline.tradeName" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="药品本位码:">
            <el-input v-model="formInline.standardCode" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="药品剂型:">
            <el-input v-model="formInline.form" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="医保类型:">
            <el-input v-model="formInline.insuranceType" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="注册规格:">
            <el-input v-model="formInline.specification" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="医保备注:">
            <el-input v-model="formInline.insuranceRemrk" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="最小包装数量:">
            <el-input v-model="formInline.minPackQuantity" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="药品类别:">
            <el-input v-model="formInline.drugType" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="关联通用名:">
            <el-select
              clearable
              remote
              filterable
              :remote-method="searchConcept"
              v-model.trim="value"
            >
              <el-option
                v-for="item in conceptList"
                :key="item.conceptId"
                :label="item.conceptName"
                :value="item.conceptId"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div class="Butn">
          <el-button class="disclButn" size="small" type="primary" @click="confirm">确定</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
import api from '@api/icss.js';
import config from '@api/config.js';
import utils from '@api/utils.js';

export default {
  name: 'AddZskDiagBase',
  data() {
    return {
      formInline: {
        drugCode: '', //药品代码
        name: '', //注册名称
        enName: '', //英文名称
        tradeName: '', //商品名称
        form: '', //药品剂型
        specification: '', //注册规格
        minPackQuantity: '', //最小包装数量
        minPackUnit: '', //最小包装单位
        company: '', //药品企业
        approval: '', //批准文号
        standardCode: '', //药品本位码
        insuranceType: '', //医保类型
        insuranceRemrk: '', //医保备注
        drugType: '', //药品类别
        drugConceptId: '' //药品通用名Id
      },
      conceptList: [],
      value: '',
      isEdit: false,
      title: '注册药品维护-添加注册药品'
    };
  },
  created() {
    console.log(this.$route.params);
    let type = this.$route.params.type;
    if (type == 2) {
      api.getByParam({ id: this.$route.params.id }).then(res => {
        if (res.data.code == 0) {
          const data = res.data.data;
          this.formInline.drugCode = data.drugCode;
          this.formInline.name = data.name;
          this.formInline.enName = data.enName;
          this.formInline.tradeName = data.tradeName;
          this.formInline.form = data.form;
          this.formInline.specification = data.specification;
          this.formInline.minPackQuantity = data.minPackQuantity;
          this.formInline.minPackUnit = data.minPackUnit;
          this.formInline.company = data.company;
          this.formInline.approval = data.approval;
          this.formInline.standardCode = data.standardCode;
          this.formInline.insuranceType = data.insuranceType;
          this.formInline.insuranceRemrk = data.insuranceRemrk;
          this.formInline.drugType = data.drugType;
          this.formInline.drugConceptId = data.drugConceptId;
          this.conceptList = [
            { drugConceptId: data.drugConceptId, drugName: data.drugName }
          ];
        } else {
          this.$message({
            message: res.data.msg,
            type: 'warning'
          });
        }
      });
    }
  },
  methods: {
    searchConcept(val) {
      api
        .getsearchDrug({ name: val })
        .then(res => {
          if (res.data.code == '0') {
            const data = res.data.data;

            this.$nextTick(() => {
              // dom元素更新后执行，因此这里能正确打印更改之后的值
              this.conceptList = data; // 改变了的值
            });
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    validateForms(callBack) {
      this.$refs['formInline'].validate(valid => {
        if (valid) {
          callBack();
        } else {
          return false;
        }
      });
    },
    saveOrUpdate(params) {
      api.saveOrUpdate(params).then(res => {
        if (res.data.code == 0) {
          this.$message({
            message: '操作成功',
            type: 'success'
          });
          this.$router.push({
            name: 'ZskRegisteredDrug',
            params: this.$route.params
          });
        } else {
          this.$message({
            message: res.data.msg,
            type: 'warning'
          });
        }
      });
    },
    confirm() {
      let _this = this;
      this.validateForms(function() {
        let params = _this.formInline;
        _this.saveOrUpdate(params);
      });
    }
  }
};
</script>
<style lang="less" scoped>
@import '../../less/admin.less';
.container {
  top: 0;
}
.contents {
  height: 100%;
  .content {
    height: 600px;
    background: #fff;
    padding: 20px 20px 0;
    color: #545455;
    min-width: 980px;
    position: relative;
    /deep/ .el-form-item {
      width: 45%;
      margin-bottom: 20px;
      .el-form-item__label {
        margin-right: 20px;
      }

      .el-input {
        .el-input__inner {
          width: 300px;
        }
      }
    }
  }
}
</style>