udi-spms-vue/src/views/diSearch/udiInfoSearch.vue

<template>
  <div>
    <el-card>
      <el-form :inline="true" :model="unionQuery" size="mini">
        <el-form-item class="query-form-item">
          <el-input v-model="unionQuery.udiCode"
                    style="width: 600px"
                    placeholder="请扫描或输入UDI码"
                    clearable="true"
                    @keyup.enter.native="keyup_submit($event)"></el-input>
        </el-form-item>
        <el-form-item class="query-form-item">
          <el-button-group>
            <el-button type="primary" icon="search" @click="searchList" size="mini"
            >查询
            </el-button
            >
            <el-button type="primary" icon="search" @click="getSuperSeaech" size="mini"
            >国家同步库查询
            </el-button
            >
          </el-button-group>
        </el-form-item>
      </el-form>

      <el-form :model="editQuery" :rules="rules" ref="editQuery"   label-width="150px" style="margin-top: 20px" >
        <el-collapse v-model="activeNames">
          <el-collapse-item name="1">
            <template slot="title">
              <p class="form-title">产品标识基本信息</p>
            </template>
            <el-row>
              <el-col :span="12" class="el-col">
                <el-form-item label="产品标识:">
                  <el-input style="width: 90%" :disabled="true" size="small" splaceholder="请输入内容" v-model="editQuery.nameCode"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" class="el-col">
                <el-form-item label="使用单元数量:">
                  <el-input style="width: 90%" :disabled="true" size="small" splaceholder="请输入内容" v-model="editQuery.zxxsbzbhsydysl"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12" class="el-col">
                <el-form-item label="包含下级产品编码:">
                  <el-input style="width: 90%" size="small" :disabled="true" splaceholder="请输入内容" v-model="editQuery.bhxjcpbm"></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="12" class="el-col">
                <el-form-item label="包含最小销售包装数量:">
                  <el-input style="width: 90%" size="small" :disabled="true" splaceholder="请输入内容" v-model="editQuery.bhzxxsbzsl"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

          </el-collapse-item>

          <el-collapse-item name="2">
            <template slot="title">
              <p class="form-title">产品基本信息</p>
            </template>

            <el-row >
              <el-col :span="12" class="el-col">
                <el-form-item label="产品名称:">
                  <el-input style="width: 90%" size="small" splaceholder="请输入内容" :disabled="true" v-model="editQuery.cpmctymc"></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="12" class="el-col">
                <el-form-item label="规格型号:">
                  <el-input style="width: 90%" :disabled="true" size="small" splaceholder="请输入内容" v-model="editQuery.ggxh"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row >
              <el-col :span="12" class="el-col">
                <el-form-item label="产品类别:">
                  <el-input style="width: 90%" :disabled="true" size="small" splaceholder="请输入内容" v-model="editQuery.hchzsb"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" class="el-col">
                <el-form-item label="分类编码:">
                  <el-input style="width: 90%" :disabled="true" size="small" splaceholder="请输入内容" v-model="editQuery.flbm"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12" class="el-col">
                <el-form-item label="医疗器械注册人:">
                  <el-input style="width: 90%" :disabled="true" size="small" splaceholder="ylqxzcrbarmc" v-model="editQuery.ylqxzcrbarmc"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" class="el-col">
                <el-form-item label="注册人英文名称:">
                  <el-input style="width: 90%" :disabled="true" size="small" splaceholder="请输入内容" v-model="editQuery.ylqxzcrbarywmc"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12" class="el-col">
                <el-form-item label="器械类别:">
                  <el-input style="width: 90%" :disabled="true" size="small" splaceholder="请输入内容" v-model="editQuery.cplx"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" class="el-col">
                <el-form-item label="生产厂家:">
                  <el-input style="width: 90%" :disabled="true" size="small" splaceholder="请输入内容" v-model="editQuery.manufactory"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row >
              <el-col :span="12" class="el-col">
                <el-form-item label="商品条码:">
                  <el-input style="width: 90%" size="small" :disabled="true" splaceholder="请输入内容" v-model="editQuery.sptm"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" class="el-col">
                <el-form-item label="医保编码:">
                  <el-input style="width: 90%" :disabled="true" size="small" splaceholder="请输入内容" v-model="editQuery.ybbm"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12" class="el-col">
                <el-form-item label="统一社会信用号:">
                  <el-input style="width: 90%" :disabled="true" size="small" splaceholder="请输入内容" v-model="editQuery.tyshxydm"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" class="el-col">
                <el-form-item label="注册证/备案号:">
                  <el-input style="width: 90%" :disabled="true" size="small" splaceholder="请输入内容" v-model="editQuery.zczbhhzbapzbh"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12" class="el-col">
                <el-form-item label="产品描述:">
                  <el-input style="width: 90%" :disabled="!checked" size="small" splaceholder="请输入内容" v-model="editQuery.cpms"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-collapse-item>


          <el-collapse-item name="3">
            <template slot="title">
              <p class="form-title">生产标识基本信息</p>
            </template>

            <el-row >
              <el-col :span="12" class="el-col">
                <el-form-item label="是否包含批号:">
                  <el-input style="width: 90%" :disabled="true" size="small" splaceholder="请输入内容" v-model="editQuery.scbssfbhph"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" class="el-col">
                <el-form-item label="是否包含序列号:">
                  <el-input style="width: 90%" :disabled="true" size="small" v-model="editQuery.scbssfbhxlh" splaceholder="请输入内容"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12" class="el-col">
                <el-form-item label="是否包含生产日期:">
                  <el-input style="width: 90%" :disabled="true" size="small" splaceholder="请输入内容" v-model="editQuery.scbssfbhscrq"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" class="el-col">
                <el-form-item label="是否包含失效日期:">
                  <el-input style="width: 90%" :disabled="true" v-model="editQuery.scbssfbhsxrq" size="small" splaceholder="请输入内容"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-collapse-item>

          <el-collapse-item name="4">
            <template slot="title">
              <p class="form-title">包装标识信息</p>
            </template>

            <el-row>
              <el-col :span="12" class="el-col">
                <el-form-item label="上级产品编码:">
                  <el-input style="width: 90%" :disabled="true" size="small" splaceholder="请输入内容" v-model="editQuery.sjcpbm"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" class="el-col">
                <el-form-item label="包装级别:">
                  <el-input style="width: 90%" size="small" splaceholder="请输入内容" :disabled="true" v-model="editQuery.packLevel"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12" class="el-col">
                <el-form-item label="包装单位/包装级别:">
                  <el-input style="width: 90%" size="small" splaceholder="请输入内容" v-model="editQuery.bzcj" :disabled="true"></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="12" class="el-col">
                <el-form-item label="包含下级包装数量:">
                  <el-input style="width: 90%" size="small" splaceholder="请输入内容" :disabled="true" v-model="editQuery.bhxjsl"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-collapse-item>

        </el-collapse>

      </el-form>

    </el-card>

  </div>
</template>

<script>


import {getUdiInfos, superSearch} from "@/api/biz/udiInfo";

export default {
  name: "UdiInfoSearch",
  data() {
    return {
      activeNames: ['1'],
      unionQuery: {
        page: 1,
        limit: 10,
        udiCode: null,
      },
      udidlList: [],
      editQuery: {},
    }
  },
  methods: {
    searchList() {
      this.unionQuery.page = 1;
      this.getList();
    },

    keyup_submit(event) {
      this.unionQuery.page = 1;
      this.getList();
      event.target.select();
    },
    getList() {
      this.loading = true;
      getUdiInfos(this.unionQuery)
        .then((response) => {
          this.loading = false;
          if (response.code == 20000) {
            this.udidlList = response.data.list || [];
            if (this.udidlList == null || this.udidlList.length == 0) {
              this.$message.error("未查询到DI信息！");
            } else {
              this.editQuery = this.udidlList[0];
            }
          } else {
            this.$message.error(response.message);
          }
        })
        .catch(() => {
          this.loading = false;
          this.udidlList = [];
          this.total = 0;
        });
    },

    getSuperSeaech() {

      this.$confirm("此操作将访问国家库查询DI数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.loading = true;
          superSearch(this.unionQuery)
            .then((response) => {
              this.loading = false;
              if (response.code == 20000) {
                this.udidlList = response.data.list || [];
                if (this.udidlList == null || this.udidlList.length == 0) {
                  this.$message.error("未查询到DI信息！");
                } else {
                  this.editQuery = this.udidlList[0];
                }
              } else {
                this.$message.error(response.message);
              }
            })
            .catch(() => {
              this.loading = false;
              this.udidlList = [];
              this.total = 0;
            });
        })
        .catch(() => {
        });
    },
  },
  mounted() {
    document.body.ondrop = function (event) {
      event.preventDefault();
      event.stopPropagation();
    };
  },
}
</script>

<style scoped>
.form-title {
  font-size: 16px;
  font-family: Noto Sans SC;
  font-weight: bold;
  color: #303133;
  padding-bottom: 17px;
  padding-top: 17px;
}
</style>