udi-cpt-vue/src/views/udi/trace/search/index.vue

<template>
  <div>
    <el-card>
      <el-form>
        <el-form-item prop="parent" >
          <el-select v-model="form.parent" @change="onReset" placeholder="查询方式" clearable>
            <el-option v-for="item in options" :key="item.value"
                       :label="item.label" :value="item.value"
            />
          </el-select>
        </el-form-item>
        <!--上级选择 “显示” 时，则显示该输入框-->
        <el-form-item prop="child" v-if="form.parent == 'A'">
          <el-input v-model="filterQuery.udiCode" placeholder="UDI码查询(源头查询)" style="width: 1000px;" clearable></el-input>
          <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
          <el-button type="primary" icon="el-icon-refresh" @click="onReset">重置</el-button>
        </el-form-item>
        <el-form-item prop="child" v-if="form.parent == 'B'">
          <el-input v-model="filterQuery.ylqxzcrbarmc" placeholder="医疗器械注册人" style="width: 200px;" clearable></el-input>
          <el-input v-model="filterQuery.cpmctymc" placeholder="产品名称" style="width: 200px;" clearable></el-input>
          <el-input v-model="filterQuery.ggxh" placeholder="规格型号" style="width: 200px;" clearable></el-input>
          <el-input v-model="filterQuery.nameCode" placeholder="DI标识" style="width: 200px;" clearable></el-input>
          <el-input v-model="filterQuery.batchNo" placeholder="批次号" style="width: 200px;" clearable></el-input>
          <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
          <el-button type="primary" icon="el-icon-refresh" @click="onReset">重置</el-button>
        </el-form-item>
        <el-form-item prop="child" v-if="form.parent == 'C'">
          <el-input v-model="filterQuery.companyName"
                    style="width: 200px;"
                    placeholder="当前所在企业"
                    @keyup.native="onSubmit"></el-input>
          <el-input v-model="filterQuery.udiCode" placeholder="UDI码查询(源头查询)" style="width: 800px;" clearable></el-input>
          <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
          <el-button type="primary" icon="el-icon-refresh" @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="loading" :data="list"
                style="width: 100%"
                border highlight-current-row>
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="单据号" prop="billNo"></el-table-column>
        <el-table-column label="单据日期" prop="billDate"></el-table-column>
        <el-table-column label="单据类型" prop="billType"></el-table-column>
        <el-table-column label="发货单位" prop="fromCorp"></el-table-column>
        <el-table-column label="收货单位" prop="toCorp"></el-table-column>
        <el-table-column label="所属企业" prop="companyName"></el-table-column>
        <el-table-column label="上传人" prop="uploadUser"></el-table-column>
        <el-table-column label="备注" prop="remark"></el-table-column>

        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click.native="handleView(scope.row,scope.index)"
            >详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :limit.sync="filterQuery.limit"
        :page.sync="filterQuery.page"
        @pagination="getList"
      ></pagination>
    </el-card>
    <el-dialog title="单据-详情" :visible.sync="open" width="700px" append-to-body>
      <el-form ref="formView" :model="formView" label-width="100px" size="mini">
        <el-row>
          <el-col :span="12">
            <el-form-item label="id：">{{ formView.id }}</el-form-item>
            <el-form-item label="单据号：">{{ formView.billNo }}</el-form-item>
            <el-form-item label="单据时间：">{{ formView.billDate }}</el-form-item>
            <el-form-item label="出入库类型：">{{ formView.inOutType }}</el-form-item>
            <el-form-item label="单据类型：">{{ formView.billType }}</el-form-item>
            <el-form-item label="发货企业：">{{ formView.fromCorp }}</el-form-item>
            <el-form-item label="发货企业统一社会信用号：">{{ formView.fromCorpCreditNum }}</el-form-item>
            <el-form-item label="收货企业：">{{ formView.toCorp }}</el-form-item>
            <el-form-item label="收货企业统一社会信用号：">{{ formView.toCorpCreditNum }}</el-form-item>
            <el-form-item label="单据创建者：">{{ formView.createUser }}</el-form-item>
            <el-form-item label="企业信息ID外键：">{{ formView.companyIdFk }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户端类型：">{{ formView.clientType }}</el-form-item>
            <el-form-item label="退货原因：">{{ formView.returnReason }}</el-form-item>
            <el-form-item label="销毁原因：">{{ formView.destoryReason }}</el-form-item>
            <el-form-item label="执行销毁人：">{{ formView.excuseUser }}</el-form-item>
            <el-form-item label="执行销毁人证件号：">{{ formView.excuseCode }}</el-form-item>
            <el-form-item label="监督人姓名：">{{ formView.superviserUser }}</el-form-item>
            <el-form-item label="监督人证件号：">{{ formView.superviserCode }}</el-form-item>
            <el-form-item label="上传着ID：">{{ formView.uploadUser }}</el-form-item>
            <el-form-item label="备注：">{{ formView.remark }}</el-form-item>
            <el-form-item label="更新时间：">{{ formView.updateTime }}</el-form-item>
            <el-form-item label="查询记录号外键：">{{ formView.recordCodeFk }}</el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="open = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import {getTraceOrderList} from "@/api/udi/udiTraceSearch";

export default {
  data() {
    return {
      filterQuery: {
        udiCode: null,
        ylqxzcrbarmc: null,
        cpmctymc: null,
        ggxh: null,
        nameCode: null,
        batchNo: null,
        companyName: "",
        page: 1,
        limit: 10,
      },
      options: [
        {value: 'A', label: 'UDI码查询(源头查询)'},
        {value: 'B', label: '按产品信息组合查询'},
        {value: 'C', label: '现场检查查询'}
      ],
      form:{
        parent:'',
        child:'',
      },
      total: 0,
      loading: true,
      list: [],
      open: false,
      formView: {}
    }
  },
  methods: {
    handleView(row){
      this.list.forEach(obj => {
        if (row.id == obj.id) {
          this.formView = obj
        }
      })
      console.log(this.formView)
      this.open = true
    },
    onReset(){
      this.$router.push({
        path: "",
      });
      this.filterQuery = {
        udiCode: null,
        ylqxzcrbarmc: null,
        cpmctymc: null,
        ggxh: null,
        nameCode: null,
        batchNo: null,
        companyName: "",
        page: 1,
        limit: 10,
      };
      this.getList();
    },
    onSubmit(){
      this.filterQuery.page = 1;
      this.getList()
    },
    getList() {
      this.loading = true;
      getTraceOrderList(this.filterQuery).then((res) => {
        this.loading = false;
        if (res.code === 20000) {
          this.list = res.data.list || [];
          this.total = res.data.total || 0;
          console.log(this.list)
        } else {
          this.$message.error(res.message);
          this.list = [];
          this.total = 0;
        }
      }).catch((error) => {
        this.loading = false;
        this.$message.error(error.message);
        this.list = [];
        this.total = 0;
      })
    },
  },
  created() {
    this.getList()
  }
}
</script>

<style scoped>


</style>