udi-spms-vue/src/views/pharmaceuticals/distribution/selectMsfxOrderDialog.vue

<template>
  <div>
    <el-card class="el-card">
      <el-form :model="orderQuery" size="mini" label-width="100px" v-show="showSearch">
<!--        <el-row>-->
<!--          <el-col :span="6">-->
<!--            <el-form-item class="query-form-item" label="单据编号:">-->
<!--              <el-input v-model="orderQuery.bill_code" placeholder="单据编号"-->
<!--                        style="width: 90%"-->
<!--                        clearable="true"-->
<!--              ></el-input>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="6">-->
<!--            <el-form-item label="单据类型:" class="query-form-item">-->
<!--              <el-select v-model="orderQuery.bill_type" style="width: 90%" placeholder="选择单据" clearable>-->
<!--                <el-option label="所有" :value="'A'"></el-option>-->
<!--                <el-option label="入库" :value="'AI'"></el-option>-->
<!--                <el-option label="出库" :value="'AO'"></el-option>-->
<!--              </el-select>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          &lt;!&ndash;<el-col :span="6">&ndash;&gt;-->
<!--          &lt;!&ndash;  <el-form-item class="query-form-item" label="药品信息:">&ndash;&gt;-->
<!--          &lt;!&ndash;    <el-input v-model="orderQuery.cpmctymc" placeholder="药品信息" clearable="true"&ndash;&gt;-->
<!--          &lt;!&ndash;              style="width: 90%"&ndash;&gt;-->
<!--          &lt;!&ndash;    ></el-input>&ndash;&gt;-->
<!--          &lt;!&ndash;  </el-form-item>&ndash;&gt;-->
<!--          &lt;!&ndash;</el-col>&ndash;&gt;-->
<!--          <el-col :span="6">-->
<!--            <el-form-item class="query-form-item" label="发货单位:">-->
<!--              <el-input v-model="orderQuery.bzgg" placeholder="发货单位" clearable="true"-->
<!--                        style="width: 90%"-->
<!--              ></el-input>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="6">-->
<!--            <el-form-item class="query-form-item" label="收货单位:">-->
<!--              <el-input v-model="orderQuery.ylqxzcrbarmc" placeholder="收货单位"-->
<!--                        style="width: 90%"-->
<!--                        clearable="true"-->
<!--              ></el-input>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--        </el-row>-->
        <el-row>

          <el-col :span="6">
            <el-form-item label="单据时间:">
              <el-date-picker
                :picker-options="pickerOptions"
                v-model="actDateRange"
                type="daterange"
                format="yyyy 年 MM 月 dd 日"
                style="width: 300px"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </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="search">查询</el-button>
          <el-button type="primary" icon="el-icon-check" @click="confirmSelect">确定</el-button>
        </el-button-group>
      </div>
      <el-table
        :data="dataList"
        style="width: 100%"
        highlight-current-row="false"
        v-loading="loading"
        border
        @current-change="handleChange"
        ref="multipleTable"
      >
        <el-table-column label width="45">
          <template slot-scope="scope">
            <el-radio :label="scope.row.billCode" v-model="radioCheck"><span></span></el-radio>
          </template>
        </el-table-column>
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="订单编号" prop="billCode" width="140" show-overflow-tooltip ></el-table-column>
        <el-table-column width="180" label="单据时间" prop="billTimeFormat" show-overflow-tooltip ></el-table-column>
<!--        <el-table-column label="单据类型" prop="billType" show-overflow-tooltip ></el-table-column>-->
<!--        <el-table-column label="药品信息" prop="physicInfo" show-overflow-tooltip width="240"></el-table-column>-->
<!--        <el-table-column label="药品名称" prop="physicName" show-overflow-tooltip width="180"></el-table-column>-->
        <el-table-column label="发货企业" prop="fromUserName"  show-overflow-tooltip  width="180"></el-table-column>
        <el-table-column  label="收货企业" prop="toUserName" show-overflow-tooltip  width="180"></el-table-column>
<!--        <el-table-column width="100" label="生产批号" prop="produceBatchNo" show-overflow-tooltip ></el-table-column>-->

<!--        <el-table-column label="生产日期"  prop="produceDate" show-overflow-tooltip width="180"></el-table-column>-->
<!--        <el-table-column label="有效期至" prop="exprieDate" show-overflow-tooltip width="180"></el-table-column>-->
<!--        <el-table-column width="120" label="制剂数量" prop="prepnCount" show-overflow-tooltip ></el-table-column>-->
<!--        <el-table-column  width="120" label="最小包装数量" prop="codeCount"  show-overflow-tooltip ></el-table-column>-->
<!--        <el-table-column  width="120" label="厂商" prop="produceEntName"  show-overflow-tooltip ></el-table-column>-->

      </el-table>
<!--      <pagination-->
<!--        v-show="pageTotal>0"-->
<!--        :total="pageTotal"-->
<!--        :page.sync="orderQuery.page"-->
<!--        :limit.sync="orderQuery.limit"-->
<!--      />-->
      <!--@pagination="getList"-->
    </el-card>
<!--    <el-card>-->
      <el-tabs type="border-card" style="margin: 15px">
        <el-tab-pane label="单据明细">
          <el-table
            :data="aliYljgBillDetailDrugList"
            style="width: 100%"
            highlight-current-row="false"
            v-loading="loading"
            border
            ref="multipleTable"
          >
            <el-table-column label="药品通用名" prop="prodName" width="240" show-overflow-tooltip ></el-table-column>
            <el-table-column width="140" label="药品商品名" prop="prodName" show-overflow-tooltip ></el-table-column>
<!--            <el-table-column label="生产企业名称" prop="productEntName" show-overflow-tooltip ></el-table-column>-->
<!--            <el-table-column label="药品信息" prop="physicInfo" show-overflow-tooltip ></el-table-column>-->
<!--            <el-table-column label="药品名称" prop="physicName" show-overflow-tooltip ></el-table-column>-->
<!--            <el-table-column label="制剂数量" prop="prepnCount" show-overflow-tooltip ></el-table-column>-->
            <el-table-column width="100" label="生产批号" prop="produceBatchNo" show-overflow-tooltip ></el-table-column>
<!--            <el-table-column label="包装单位描述" prop="pkgUnitDesc"  show-overflow-tooltip  ></el-table-column>-->

            <el-table-column width="180" label="生产日期"  prop="produceDate" show-overflow-tooltip ></el-table-column>
            <el-table-column width="180" label="有效期至" prop="validEndDate" show-overflow-tooltip ></el-table-column>
            <el-table-column  width="180" label="制剂规格描述" prop="prepnSpec" show-overflow-tooltip  ></el-table-column>
            <el-table-column width="120" label="制剂数量" prop="leastPrepnAmount" show-overflow-tooltip ></el-table-column>
            <el-table-column  width="120" label="最小包装数量" prop="leastPkgAmount"  show-overflow-tooltip ></el-table-column>
            <el-table-column  width="120" label="厂商" prop="productEntName"  show-overflow-tooltip ></el-table-column>


            <el-table-column label="操作" width="160" fixed="right">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click.native.stop="handleCodeDetailClick(scope.row)"
                >追溯码明细
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>

<!--    </el-card>-->


    <el-dialog
      title="追溯码明细"
      :visible.sync="codeDetailVisible"
      append-to-body width="65%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      v-if="codeDetailVisible"
    >
      <retraceCodeDetailDialog
      :dataList="this.codes">

      </retraceCodeDetailDialog>
    </el-dialog>
  </div>
</template>

<script>
import retraceCodeDetailDialog from './retraceCodeDetailDialog'
import { aliYljgSearchbillPage,aliYljgBillDetail } from '@/api/thrsys/alihealthBus.js'
import { addAliBizProduct } from '@/api/inout/order.js'

export default {
  components: { retraceCodeDetailDialog },
  props: {
    closeDialog: {
      type: Function,
      required: true,
    },
    orderFormData: {
      type: Object,
      required: true,
    }
  },
  data() {
    return {
      orderQuery: {
        beginDate:null,
        ensDate:null,
        page: 1,
        limit: 100
      },
      pageTotal: 10,
      dataList: [],
      aliYljgBillDetailDrugList: [],
      codes: [],
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      actDateRange: [],
      showSearch: true,
      codeDetailVisible: false,
      radioCheck: null,
      currentRow: null
    }
  },
  methods: {
    onReset() {
      this.orderQuery = {
        beginDate: null,
        ensDate: null,
        page: 1,
        limit: 100
      },
        this.getList()
    },
    confirmSelect() {
      if (this.currentRow == null) {
        this.$message.error('请选择要选入的单据！')
        return
      }
      if (this.orderFormData.action == null) {
        this.$message.error('请选择单据类型！')
        return
      }
      this.orderFormData.orderEntity = JSON.parse(JSON.stringify(this.orderFormData));
      this.orderFormData.aliData = this.currentRow
      addAliBizProduct(this.orderFormData).then((res) => {
        if (res.code === 20000) {
          this.codeDetailVisible = false
          this.$message.success('选入成功')
          this.closeDialog()

        } else {
          this.$message.error(res.message)
        }
      }).catch((error) => {
        this.$message.error('选入失败')
      })
    },
    hideSearch() {
      this.showSearch = !this.showSearch
    },
    search() {
      this.getList()
    },
    handleCodeDetailClick(row) {
      this.codes = row.aliYljgBillDetailDrugCodeList
      this.codeDetailVisible = true
    },
    handleChange(currentRow) {
      this.radioCheck = currentRow.billCode
      this.currentRow = currentRow
      this.getBillDetail(currentRow)
    },
    createDateTime() {
      const end = new Date(); // 结束日期为当前日期
      const start = new Date(); // 开始日期为当前日期
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); // 减去7天
      const formatDate = (date) => {
        const year = date.getFullYear();
        const month = (date.getMonth() + 1).toString().padStart(2, '0');
        const day = date.getDate().toString().padStart(2, '0');
        return `${year}-${month}-${day}`;
      };
      this.actDateRange = [formatDate(start), formatDate(end)];
    },
    getList() {
      if (this.actDateRange !== null) {
        this.orderQuery.beginDate = this.actDateRange[0]
        this.orderQuery.ensDate = this.actDateRange[1]
      }else {
        this.$message.error('请先选择查询日期范围！')
      }
      aliYljgSearchbillPage(this.orderQuery).then(res => {
        if (res.code == 20000) {
          this.dataList = res.data.list || []
          this.radioCheck = null
        }
      })
    },
    getBillDetail(currentRow) {
      aliYljgBillDetail(currentRow).then(res => {
        if (res.code == 20000) {
          this.aliYljgBillDetailDrugList = res.data.aliYljgBillDetailDrugList || []
        }
      })
    }

  },
  created() {
    this.createDateTime()
    this.getList()
  }
}
</script>

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

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

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