elizebeth/src/xt_pages/stock/selfPreparedMedicine/components/medicineDetail.vue

<template>
    <el-dialog
        :title="formTitle"
        width="900px"
        :visible.sync="visible"
        :before-close="_close"
    >
        <div style="margin-bottom:10px;">
            <el-select v-model="type" placeholder="请选择"
            @change="changOption">
                <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
            <el-date-picker
                v-model="start_time"
                prefix-icon="el-icon-date"
                :editable="false"
                style="width: 196px;margin-right:10px;"
                type="date"
                placeholder="选择日期时间"
                align="right"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                @change="changeStartime">
            </el-date-picker>
                <el-date-picker
                v-model="end_time"
                prefix-icon="el-icon-date"
                :editable="false"
                style="width: 196px;margin-right:10px;"
                type="date"
                placeholder="选择日期时间"
                align="right"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                @change="changeEndtime">
            </el-date-picker>
        </div>
        <el-table :data="tableData" border style="width: 100%;" height="300" :row-style="{ color: '#303133' }" :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}" highlight-current-row>
            <el-table-column align="center" prop="name" label="日期">
                <template slot-scope="scope">
                    {{getTimes(scope.row.storck_time)}}
                </template>
            </el-table-column>
            <el-table-column align="center" prop="name" label="操作类型">
                <template slot-scope="scope">
                   <span v-if="scope.row.opration_type == 1">入库</span>
                   <span v-if="scope.row.opration_type == 2">出库</span>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="name" label="数量">
                <template slot-scope="scope">
                   <span v-if="scope.row.opration_type == 1">{{scope.row.store_number}}</span>
                   <span v-if="scope.row.opration_type == 2">{{scope.row.outstore_number}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="name" label="操作人">
                <template slot-scope="scope">
                    {{getName(scope.row.admin_user_id)}}
               </template>
            </el-table-column>
            <el-table-column align="center" prop="name" label="出库方式">
                <template slot-scope="scope">
                  <span v-if="scope.row.opration_type == 1 && scope.row.storage_mode == 1">手动入库</span>
                  <span v-if="scope.row.opration_type == 2 && scope.row.exit_mode == 1">手动出库</span>
                  <span v-if="scope.row.opration_type == 2 && scope.row.exit_mode == 2">自动出库</span>
               </template>
            </el-table-column>
            <el-table-column align="center" prop="name" label="备注">
                <template slot-scope="scope">
                    {{scope.row.remarks}}
                </template>
            </el-table-column>
        </el-table>
    </el-dialog>         
</template>

<script>
const moment = require('moment')
import { uParseTime } from "@/utils/tools";
import { getDrugDetail,getCurrentOrgAllStaff } from "@/api/drug/drug"
export default {
    data(){
        return{
            visible:false,
            formTitle:'',
            tableData: [],
            options: [{
            value: 1,
            label: '全部'
            }, {
            value: 2,
            label: '入库'
            }, {
            value: 3,
            label: '出库'
            }],
            value: '',
            drug_name:"",
            drug_spec:"",
            patient_id:"",
            type:1,
            start_time:moment(new Date()).add('year',0).format("YYYY-MM-DD"),
            end_time:moment(new Date()).add('year',0).format("YYYY-MM-DD"),
            staffList:[]
        }
    },
    methods:{
        _close: function(done) {
            // this.clear()
            done()
        },
        clear: function() {
            this.form.id = 0;
            this.form.name = "";
            this.form.intro = "";
        },
        show(name,drugspec,patientid) {
          this.formTitle = "明细("+name+")" 
          this.drug_name = name
          this.drug_spec = drugspec
          this.patient_id = patientid
          this.visible = true
          this.getDrugDetail()
        },
        hide() {
            // this.clear()
            this.visible = false
        },
        changOption(){
          this.getDrugDetail()
        },
        getDrugDetail(){
            const params = {
                drug_name:this.drug_name,
                drug_spec:this.drug_spec,
                patient_id:this.patient_id,
                start_time:this.start_time,
                end_time:this.end_time
             }
           getDrugDetail(params).then(response=>{
              if(response.data.state == 1){
                var stockDetail =  response.data.data.stockDetail
                for(let i=0;i<stockDetail.length;i++){
                    stockDetail[i].opration_type = 1
                }
                var outStockDetail = response.data.data.outStockDetail
                for(let j=0;j<outStockDetail.length;j++){
                   outStockDetail[j].opration_type = 2
                }
                if(this.type == 1){
                   stockDetail.push(...outStockDetail)
                   var arr = stockDetail
                  var newarr  =  arr.sort((a,b)=>{ return a.storck_time-b.storck_time})
                  this.tableData = newarr
                }
                
                if(this.type == 2){
                   this.tableData = stockDetail
                }
                if(this.type == 3){
                  this.tableData = outStockDetail
                }
              }
          })
        },

         getCurrentOrgAllStaff(){
           getCurrentOrgAllStaff().then(response=>{
              if(response.data.state == 1){
               var staff = response.data.data.staff
               this.staffList = staff
             }
           })  
        },

        getName(adminUserId){
          var user_name = ""
          for(let i=0;i<this.staffList.length;i++){
             if(this.staffList[i].admin_user_id == adminUserId){
                user_name = this.staffList[i].user_name
             }
          }
          return user_name
        },

       getTimes(time) {
        return uParseTime(time, "{y}-{m}-{d}");
      },
      changeStartime(){
        this.getDrugDetail()   
      },
      changeEndtime(){
        this.getDrugDetail()
      }
    },

    created(){
      this.getCurrentOrgAllStaff() 
    }
}
</script>