Vue_New/src/xt_pages/outpatientTool/components/goodDetail.vue

<template>
    <div>
        <div style="display: flex;justify-content: space-between;margin-bottom:10px;">
            <div>
                <el-input size="small" style="width:150px;" v-model="keywords" 
                          placeholder="请输入耗材名称"
                          class="filter-item"/>
                 <el-button size="small" class="filter-item" type="primary" @click="searchAction">搜索</el-button>
                <el-date-picker
                        v-model="chargeDate"
                        type="daterange"
                        value-format="yyyy-MM-dd"
                        range-separator="至"
                        start-placeholder="开始日期"
                        @change="changeDate"
                        end-placeholder="结束日期">
                </el-date-picker>
            </div>
        </div>
        <el-table :data="tableData" border :row-style="{ color: '#303133' }" ref="table"
                  :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}"
                  max-height="600"
                  highlight-current-row>

            <el-table-column align="center" prop="name" label="序号">
                <template slot-scope="scope">
                    {{scope.$index +1}}
                </template>
            </el-table-column>
          
            <el-table-column align="center" prop="name" label="日期">
                <template slot-scope="scope">
                {{getTime(scope.row.record_date)}}
                </template>
            </el-table-column>
            <el-table-column align="center" prop="name" label="耗材类型">
                <template slot-scope="scope">
                 {{getGoodType(scope.row.project_id)}}
                </template>
            </el-table-column>
            <el-table-column align="center" prop="name" label="耗材名称">
                <template slot-scope="scope">
                  {{getGoodName(scope.row.project_id)}}
                </template>
            </el-table-column>
            <el-table-column align="center" prop="name" label="规格">
                <template slot-scope="scope">
                    {{getSpecificatioName(scope.row.project_id)}}
                </template>
            </el-table-column>
            <el-table-column align="center" prop="name" label="数量">
                <template slot-scope="scope">
                  {{getCount(scope.row.child)}}
                </template>
            </el-table-column>

            <el-table-column align="center" prop="name" label="单位">
                <template slot-scope="scope">
                   {{getUnit(scope.row.project_id)}}
                </template>
            </el-table-column>

            <el-table-column align="center" prop="total" label="操作">
                <template slot-scope="scope">
                   <div style="color: #589ff8" @click="jump(scope.row.child,scope.row.project_id)">使用明细</div>
                </template>
            </el-table-column>

        </el-table>


             
       <el-dialog
        title="耗材明细"
        :visible.sync="dialogVisible"
        width="60%">
        <div style="margin-bottom:10px"> <span>耗材类型:{{getGoodType(good_id)}}</span>
              <span>耗材名称:{{getGoodName(good_id)}}</span>
        </div>
        <span>
            <el-table :data="tableList" border :row-style="{ color: '#303133' }" ref="table"
                  :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}"
                  max-height="600"
                  highlight-current-row>

            <el-table-column align="center" prop="name" label="序号">
                <template slot-scope="scope">
                    {{scope.$index + 1}}
                </template>
            </el-table-column>
          
            <el-table-column align="center" prop="name" label="使用日期">
                <template slot-scope="scope">
                    {{getTime(scope.row.record_date)}}
                </template>
            </el-table-column>
            <el-table-column align="center" prop="name" label="患者名字">
                <template slot-scope="scope">
                   {{getPatientName(scope.row.patient_id)}}
                </template>
            </el-table-column>
            <el-table-column align="center" prop="name" label="数量">
                <template slot-scope="scope">
                   {{scope.row.count}}
                </template>
            </el-table-column>
            <el-table-column align="center" prop="name" label="单位">
                <template slot-scope="scope">
                  {{getUnit(scope.row.project_id)}}   
                </template>
            </el-table-column>
        
        </el-table>
        </span>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
     </el-dialog>
    </div>

</template>


<script>
  import BreadCrumb from '@/xt_pages/components/bread-crumb'
  const moment = require('moment')
import {getGoodDetailSummary} from "@/api/stock"
  import { uParseTime } from '@/utils/tools'
  export default {
    components: {
      BreadCrumb

    },
    data() {
      return {
        detail_loading: false,
        tempArr: [],
        pos: 0,
        sameRowArr: [],
        keywords: '',
        tableData: [],
        chargeDate: [moment(new Date()).add('year', 0).format('YYYY-MM-DD'), moment(new Date()).add('year', 0).format('YYYY-MM-DD')],
        limit:1000,
        page:1,
        total:0,
        goodList:[],
        patients:[],
        good_id:0,
        goodType:[],
        dialogVisible:false,
        tableList:[],
      }
    },
    methods:{
     changeDate(){
      this.tableData = []
      this.getlist()
     },
     getlist(){
       let start_time = this.chargeDate[0]
        let end_time = this.chargeDate[1]
        var params = {
            start_time: start_time,
            end_time: end_time,
            keyword: this.keywords,
            limit:this.limit,
            page:this.page,
        }  
       getGoodDetailSummary(params).then(response=>{
         if(response.data.state == 1){
           var list = response.data.data.list
         
           this.total = response.data.data.total
           this.goodList = response.data.data.good
           this.goodType = response.data.data.goodType
           for(let i=0;i<list.length;i++){
            for(let j=0;j<this.goodList.length;j++){
              if(list[i].project_id == this.goodList[j].id){
                 this.tableData.push(list[i])
              }
            }
           }
           this.patients = response.data.data.patients
           console.log("@33232322332",this.tableData)
         }
       })   
     },
     jump(val,good_id){
         this.dialogVisible = true
         this.tableList= val
         this.good_id = good_id
       },
       getPatientName(id){
         var name = ""
         for(let i=0;i<this.patients.length;i++){
            if(id == this.patients[i].id){
              name = this.patients[i].name
            }
         }
         return name
       },
       getTime(val) {
         if(val < 0){
           return ""
         }
         if(val == ""){
          return ""
         }else {
          return uParseTime(val, '{y}-{m}-{d}')
         }
      },  
      getGoodType(id){
       var good_type = 0
       for(let i=0;i<this.goodList.length;i++){
         if(id == this.goodList[i].id){
           good_type = this.goodList[i].good_type_id
         }
       }
       var type_name = ""
       for(let i=0;i<this.goodType.length;i++){
         if(good_type == this.goodType[i].id){
           type_name = this.goodType[i].type_name
         }
       }
       return type_name
      },
      getGoodName(good_id){
        var good_name = ""
        for(let i=0;i<this.goodList.length;i++){
          if(good_id == this.goodList[i].id){
             good_name = this.goodList[i].good_name
          }
        }
        return good_name
      },
      getSpecificatioName(good_id){
        var specification_name = ""
        for(let i=0;i<this.goodList.length;i++){
          if(good_id == this.goodList[i].id){
             specification_name = this.goodList[i].specification_name
          }
        }
        return specification_name
      },
      getCount(val){
        var total = 0
        for(let i=0;i<val.length;i++){
           total += parseInt(val[i].count)
        }
        return total
      },
      getUnit(id){
        var packing_unit = ""
        for(let i=0;i<this.goodList.length;i++){
          if(id == this.goodList[i].id){
            packing_unit = this.goodList[i].packing_unit
          }
        }
        return packing_unit
      },
      searchAction(){
        this.tableData = []
        this.getlist()
      }
    },
    created() {
      this.getlist()
    }
  }
</script>