udiwms-vue-frame/src/views/basic/product/UdiInfoSelectLocalUdi.vue

<template>
  <div>
    <el-card class="el-card">
      <div>
        <el-form :model="unionQuery" size="mini" label-width="125px" v-show="showSearch">
          <el-row>
            <el-col :span="18">
              <el-form-item class="query-form-item" label="UDI码:">
                <el-input v-model="unionQuery.udiCode"
                          placeholder="请扫描或输入UDI码"
                          clearable="true"
                          @keyup.enter.native="keyup_submit($event)"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="销售单元产品标识:" class="query-form-item">
                <el-input
                  v-model="unionQuery.nameCode" clearable="true"
                  placeholder="请输入完整DI"
                  @keyup.enter.native="keyup_submit($event)"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="医疗器械注册人:" class="query-form-item">
                <el-select
                  v-model="unionQuery.ylqxzcrbarmc"
                  filterable
                  remote
                  clearable="true"
                  style="width: 100%"
                  reserve-keyword
                  placeholder="请输入医疗器械注册人"
                  :remote-method="findMethod"
                  :loading="loading"
                  @clear="clear"
                >
                  <el-option
                    v-for="item in fromOptions"
                    :key="item.ylqxzcrbarmc"
                    :label="item.ylqxzcrbarmc"
                    :value="item.ylqxzcrbarmc"
                  >
                    <span style="float: left">{{ item.ylqxzcrbarmc }}</span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="器械通用名称:" class="query-form-item">
                <el-input
                  :disabled="unionQuery.ylqxzcrbarmc==null || unionQuery.ylqxzcrbarmc==''"
                  v-model="unionQuery.cpmctymc" clearable="true"
                  placeholder="请输入器械通用名称"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="规格型号:" class="query-form-item">
                <el-input
                  v-model="unionQuery.ggxh" clearable="true"
                  :disabled="(unionQuery.cpmctymc=='' && unionQuery.nameCode=='' && (unionQuery.ylqxzcrbarmc==null || unionQuery.ylqxzcrbarmc==''))"
                  placeholder="请输入规格型号"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="注册证/备案号:" class="query-form-item">
                <el-input
                  v-model="unionQuery.zczbhhzbapzbh" clearable="true"
                  :disabled="(unionQuery.cpmctymc=='' && unionQuery.nameCode=='' && (unionQuery.ylqxzcrbarmc==null || unionQuery.ylqxzcrbarmc==''))"
                  placeholder="请输入注册证/备案号"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="top-right-btn">
          <el-button-group>
            <el-button icon="el-icon-view" type="primary" @click="hideSearch">显示/隐藏搜索栏</el-button>
            <el-button type="primary" icon="el-icon-refresh" @click="onReset">重置</el-button>
            <el-button type="primary" icon="el-icon-search" @click="searchList">查询</el-button>
            <el-button type="primary" icon="el-icon-bottom-left" @click="checkCombine"
                       :loading="combineLoading"
            >选入
            </el-button
            >
            <el-button type="primary" icon="el-icon-search" @click="getSuperSeaech" size="mini"
            >国家同步库查询
            </el-button
            >
          </el-button-group>
        </div>
        <el-divider style="margin: 15px"></el-divider>


        <el-table
          :data="udidlList"
          style="width: 100%"
          border
          v-loading="loading"
          highlight-current-row="true"
          :row-class-name="tableRowClassName"
          @current-change="handleErpChange"
          @selection-change="handleSelectionUdiChange"
        >

          <el-table-column
            v-if="relId==null"
            type="selection"
            :selectable="checkSelectable"
            width="55"
          ></el-table-column>
          <el-table-column label="序号" type="index"></el-table-column>
          <el-table-column
            label="产品标识"
            prop="nameCode"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            label="物资名称"
            prop="cpmctymc"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            label="规格型号"
            prop="ggxh"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            label="医疗器械注册人"
            prop="ylqxzcrbarmc"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            label="注册证编号"
            prop="zczbhhzbapzbh"
            show-overflow-tooltip
          ></el-table-column>

          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="diDetail(scope.row)"
              >详情
              </el-button
              >
            </template>
          </el-table-column>

        </el-table>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="unionQuery.page"
          :limit.sync="unionQuery.limit"
          @pagination="getList"
        />
      </div>
    </el-card>
    <el-card class="el-card" v-if="this.isImport">
      <div>
        <el-form label-width="120px">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="物资名称:" class="query-form-item">
                <el-input
                  style="width: 80%"
                  size="small"
                  splaceholder="请输入内容"
                  :disabled="true"
                  v-model="data.cpmctymc"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="产品标识:" class="query-form-item">
                <el-input
                  style="width: 80%"
                  :disabled="true"
                  size="small"
                  splaceholder="请输入内容"
                  v-model="data.nameCode"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="规格型号:" class="query-form-item">
                <el-input
                  style="width: 80%"
                  :disabled="true"
                  size="small"
                  splaceholder="请输入内容"
                  v-model="data.ggxh"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="医疗器械注册人:" class="query-form-item">
                <el-input
                  style="width: 80%"
                  :disabled="true"
                  size="small"
                  splaceholder="ylqxzcrbarmc"
                  v-model="data.ylqxzcrbarmc"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="注册人英文名称:" class="query-form-item">
                <el-input
                  style="width: 80%"
                  :disabled="true"
                  size="small"
                  splaceholder="请输入内容"
                  v-model="data.ylqxzcrbarywmc"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="器械类别:" class="query-form-item">
                <el-input
                  style="width: 80%"
                  :disabled="true"
                  size="small"
                  splaceholder="请输入内容"
                  v-model="data.qxlb"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

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


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

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="统一社会信用号:" class="query-form-item">
                <el-input
                  style="width: 80%"
                  :disabled="true"
                  size="small"
                  splaceholder="请输入内容"
                  v-model="data.tyshxydm"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="注册证/备案号:" class="query-form-item">
                <el-input
                  style="width: 80%"
                  :disabled="true"
                  size="small"
                  splaceholder="请输入内容"
                  v-model="data.zczbhhzbapzbh"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-card>
    <el-dialog
      title="器械信息详情"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="selectDialog"
      width="65%"
      append-to-body
      v-if="selectDialog"
    >
      <selectDiDetail :editQuery="diDetails"
      ></selectDiDetail>
    </el-dialog>

  </div>
</template>

<script>
import {getUdiInfos, filterCompany} from "@/api/basic/product/udiInfo";
import {superSearch} from "@/api/basic/udiInfo";
import {combineUdi, combineAllUdi, checkExitUdi} from "@/api/basic/product/udiRelevance";
import selectDiDetail from "./SelectDIDetailDialog"
import {isBlank} from "@/utils/strUtil";

export default {
  name: "closeDialog",
  props: {
    closeDialog: {
      type: Function,
      required: true,
    },
    relId: {
      type: Number,
      required: true,
    },
    isImport: {
      type: Object,
      required: true,
    },
    data: {
      type: Object,
      required: true,
    },
    thirdId: {
      type: Object,
      required: true,
    },
    idSpliUdi: {
      type: Object,
      required: true,
    }
  },

  data() {
    return {
      unionQuery: {
        page: 1,
        limit: 10,
        udiCode: null,
        nameCode: "",
        cpmctymc: "",
        ylqxzcrbarmc: null,
        ggxh: "",
        zczbhhzbapzbh: "",
        isCheck: 1
      },
      cpmctymc1: "",
      combineLoading: false,
      combineQuery: {
        idSpliUdi: false,
        thirdId: "",
        relId: "",
        erpName: "",
        thirdName: null,
        keys: [],
      },
      checked: true,
      udidlList: [],
      erpList: [],
      pageTotal: 0,
      total: 0,
      currentRow: null,
      fromOptions: [],
      loading: false,
      erpLloading: false,
      multipleUdiSelection: [],
      selectDialog: false,
      diDetails: null,
      showSearch: true,
    };
  },
  methods: {

    onReset() {
      this.$router.push({
        path: "",
      });
      this.unionQuery = {
        page: 1,
        limit: 10,
        udiCode: null,
        nameCode: "",
        cpmctymc: "",
        ylqxzcrbarmc: null,
        ggxh: "",
        zczbhhzbapzbh: "",
        isCheck: 1
      };
      this.actDateRange = [];
      this.udidlList = [];
    },
    clear() {
      this.unionQuery.ylqxzcrbarmc == null;
      this.unionQuery.cpmctymc = null;
    },
    searchList() {
      this.unionQuery.page = 1;
      this.getList();
    },
    getSuperSeaech() {

      this.$confirm("此操作将访问国家库查询DI数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          if (this.unionQuery.nameCode == "") {
            this.$message.warning("请输入完成DI信息进行查询！");
            return;
          }
          this.loading = true;
          superSearch(this.unionQuery)
            .then((response) => {
              this.loading = false;
              if (response.code == 20000) {
                this.udidlList = response.data.list || [];
                this.total = response.data.total || 0;
              } else {
                this.$message.error(response.message);
              }
            })
            .catch(() => {
              this.loading = false;
              this.udidlList = [];
              this.total = 0;
            });
        })
        .catch(() => {
        });


    },

    getList() {
      if (
        this.unionQuery.udiCode == "" &&
        this.unionQuery.nameCode == "" &&
        this.unionQuery.cpmctymc == "" &&
        this.unionQuery.ylqxzcrbarmc == "" &&
        this.unionQuery.ggxh == "" &&
        this.unionQuery.zczbhhzbapzbh == ""
      ) {
        this.$message.warning("请输入查询条件");
        return;
      }
      this.loading = true;
      getUdiInfos(this.unionQuery)
        .then((response) => {
          this.loading = false;
          if (response.code == 20000) {
            this.udidlList = response.data.list || [];
            this.total = response.data.total || 0;
          } else {
            this.$message.error(response.message);
          }
        })
        .catch(() => {
          this.loading = false;
          this.udidlList = [];
          this.total = 0;
        });
    },


    hideSearch() {
      this.showSearch = !this.showSearch;
    },

    keyup_submit(event) {
      this.unionQuery.page = 1;
      this.getList();
      event.target.select();
    },

    checkSelectable(row) {
      return !row.check;
    },

    diDetail(row) {
      this.diDetails = row;
      this.selectDialog = true;
    },

    handleCurrentChange(val) {
      this.unionQuery.page = val;
      this.getList();
    },
    tableRowClassName({row, rowIndex}) {
      if (row.check) return "warning-row";
      return "";
    },
    handleErpChange(val) {
      this.cpmctymc1 = val.cpmctymc;
      this.currentRow = val;
    },
    intentBack() {
      this.closeDialog();
    },

    checkCombine() {
       if(isBlank(this.relId)) {
        this.checkedUdi();
      } else {
        this.$confirm("是否确定关联DI产品名称:" + this.cpmctymc1 + ":与第三方产品名称" + this.data.cpmctymc, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.checkedUdi();
          });
      }
    },

    checkedUdi() {
      let selectData = this.multipleUdiSelection;
      let selected = null;
      if (this.multipleUdiSelection.length == 0) {
        if (this.relId != null) {
          this.combineQuery.relId = this.relId;
          this.combineQuery.keys.push(this.currentRow.uuid);
          if (this.currentRow.check) {
            selected = this.currentRow;
          }
        } else{
          this.$message.warning('请选入产品!');
          return;
        }


      } else {
        selectData.forEach((obj) => {
          if (obj.check) {
            selected = obj;
          }
          this.combineQuery.keys.push(obj.uuid);
        });
      }
      if (selected != null) {
        this.$message.warning("UDI编码：" + selected.nameCode + "已被选入");
        return;
      }
      this.combineLoading = true;
      checkExitUdi(this.combineQuery)
        .then((response) => {
          this.combineLoading = false;
          if (response.code == 20000) {
            this.combine();
            // combineUdi(this.combineQuery)
            //     .then((response) => {
            //         this.combineLoading = false;
            //         if (response.code == 20000) {
            //             this.$emit("closeUdi", true);
            //         } else {
            //             this.$emit("closeUdi", false);
            //         }
            //     })
            //     .catch(() => {
            //         this.combineLoading = false;
            //         this.$emit("closeUdi", false);
            //     });
          } else if (response.code == 499) {
            this.$confirm(response.message, {type: "warning"})
              .then(_ => {
                this.combine();
                // combineUdi(this.combineQuery)
                //     .then((response) => {
                //         this.combineLoading = false;
                //         if (response.code == 20000) {
                //             this.$emit("closeUdi", true);
                //         } else {
                //             this.$emit("closeUdi", false);
                //         }
                //     })
                //     .catch(() => {
                //         this.combineLoading = false;
                //         this.$emit("closeUdi", false);
                //     });
              })
              .catch(_ => {

                this.combineQuery.keys = [];
              });
          }
        })
        .catch(() => {
          this.combineLoading = false;
          this.$emit("closeUdi", false);
        });
    },

    combine() {
      if (this.idSpliUdi) {
        this.combineQuery.idSpliUdi = true;
        this.combineQuery.thirdId = this.thirdId;
        this.combineQuery.erpName = this.data.thirdName;
      }
      combineUdi(this.combineQuery)
        .then((response) => {
          this.combineLoading = false;
          if (response.code == 20000) {
            this.$emit("closeUdi", true);
          } else {
            this.$message.error(response.message);
            this.$emit("closeUdi", false);
          }
        })
        .catch(() => {
          this.combineLoading = false;

          this.$emit("closeUdi", false);
        });
    },

    handleSelectionUdiChange(val) {
      this.multipleUdiSelection = val;
    },
    findMethod(query) {
      let cQuery = {
        ylqxzcrbarmc: query,
        page: 1,
        limit: 10,
      };
      filterCompany(cQuery)
        .then((response) => {
          this.loading = false;
          this.fromOptions = response.data || [];
        })
        .catch(() => {
          this.loading = false;
          this.fromOptions = [];
        });
    },
  },
  components: {
    selectDiDetail,
  },
  created() {
  }
};
</script>

<style scoped>
.checkitemTag {
  float: left;
  text-align: left;
  margin-top: 5px;
  width: 100%;
}

div /deep/ .el-table .warning-row {
  background: #bebebe;
}

div /deep/ .el-table .success-row {
  background: #ffffff;
}

.el-card {
  margin-right: 20px;
  /*transition: all .5s;*/
}

.query-form-item {
  display: block !important;
  margin-right: 10px;
  margin-bottom: 5px;
}

</style>