Vue_New/src/xt_pages/dialysis/components/consumables.vue

<template>
  <div class="page_consumables">
    <div class="cell clearfix">
      <label class="title"> <span class="name">排班班次</span> : </label>
      <div class="time">
        <ul class>
          <li
            :class="item.value == schedulType ? 'active' : ''"
            @click="selectSchedulType(item.value)"
            v-for="item in schedulArr"
            :key="item.value"
          >
            {{ item.label }}
          </li>
        </ul>
      </div>

      <label class="title"><span class="name">日期查询</span> : </label>
      <el-date-picker size="small" v-model="selected_date" prefix-icon="el-icon-date" @change="handleScheduleDateChange"
                      :editable="false" :clearable="false" style="width: 196px;margin-right:10px;" type="date"
                      format="yyyy-MM-dd"
                      value-format="yyyy-MM-dd"
                      placeholder="选择日期时间" align="right"></el-date-picker>
      <el-input size="small" style="width: 180px;" @keyup.enter.native='searchAction' v-model.trim="search_input"
                class="filter-item" v-model="query.keywords"/>
      <el-button size="small" class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
    </div>
    <div class="cell clearfix" style="justify-content: space-between;">
      <div style="display:flex;">
        <label class="title"> <span class="name">分区</span> : </label>
        <div class="time">
          <ul class>
            <li
              :class="item.id == partitionType ? 'active' : ''"
              @click="selectPartitionType(item.id)"
              v-for="item in partitionArr"
              :key="item.id"
            >
              {{ item.name }}
            </li>
          </ul>
        </div>
      </div>
      <div>
        <!-- <el-button size="small" icon="el-icon-printer" @click="exportList" type="primary">导出</el-button> -->
        <el-button size="small" type="primary" @click="statistics">统计表</el-button>
      </div>
    </div>
    <div>
      <el-table
        :data="list"
        border
        :row-style="{ color: '#303133' }"
        :header-cell-style="{
          backgroundColor: 'rgb(245, 247, 250)',
          color: '#606266'
        }"
      >
        <el-table-column
          align="center"
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          align="center"
          prop="name"
          v-for="item,index in good_types"
          :key="index"
          :label="item"
        >
          <template slot-scope="scope">
            <span>{{scope.row.good_type[index].name}}</span>
          </template>

        </el-table-column>

      </el-table>
    </div>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[10, 50, 100]"
      :page-size="10"
      background
      align="right"
      style="margin-top:20px;"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

    <consumables-dialog ref="consumables" :list="new_list"></consumables-dialog>
  </div>
</template>


<script>
  import { GetAllZone,GetDialysisgoods } from '@/api/dialysis'
  import consumablesDialog from './consumablesDialog'
  import { uParseTime } from "@/utils/tools";

  export default {
    components: {
      consumablesDialog
    },
    data() {
      return {
        query:{
          total:"",
          schedule_date:"",
          schedule_type:0,
          partition_id:0,
          page:1,
          limit:10,
          keywords:"",
        },
        schedulType: 0,
        schedulArr: [
          { value: 0, label: '全部' },
          { value: 1, label: '上午' },
          { value: 2, label: '下午' },
          { value: 3, label: '晚上' }
        ],
        selected_date: "",
        partitionArr: [],
        partitionType: 0,
        tableData: [{
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }
        ],
        search_input: '',
        searchAction: '',
        allGoodInfo:[],
        list:[],
        new_list:[],

        good_types: [],
        arrKey:[],

      }
    },
    created() {
      this.getAllZone()
      let date = uParseTime(new Date(), "{y}-{m}-{d}")
      var newDate = new Date();
      var y = newDate.getFullYear();
      var m = newDate.getMonth() + 1;
      var d = newDate.getDate();
      var schedule_date =
        y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d);

      this.selected_date = date
      this.query.schedule_date = schedule_date
      this.query.schedule_type = 0
      this.query.partition_id = 0
      this.query.page = 1
      this.GetDialysisgoods()
    },
    methods: { handleSizeChange(val) {
        this.query.limit = val;
        this.GetDialysisgoods();
      },
      handleCurrentChange(val) {
        this.query.page = val;
        this.GetDialysisgoods();
      },

      calCount(query_warehouseout_info) {
        let total = 0
        var array = []
        array = query_warehouseout_info
        for (let i = 0; i < array.length; i++) {
          total = total + array[i].count
        }
        return total

      },
      getGoodUserInfo(good_type_id,good_user,last_good_user) {
        var arrlist =[] 
        if (good_user != null && good_user.length > 0) {
          let desc = ""
          for (let b = 0; b < good_user.length; b++){
            if(good_type_id == good_user[b].good_type_id)
              desc = desc + "\n" + good_user[b].info.specification_name +"*" +good_user[b].count
          }
          arrlist.push(desc)
          return desc
        }
       console.log("arrlist---------",arrlist)
        return ""
       
        // else if (good_user != null && good_user.length <= 0) {
        //   if (last_good_user != null && last_good_user.length > 0) {
        //     let desc = ""
        //     for (let b = 0; b < last_good_user.length; b++){
        //       if(good_type_id == last_good_user[b].good_type_id)
        //         desc = desc+ "\n" + last_good_user[b].info.specification_name +"*" +last_good_user[b].count
        //     }
        //     console.log(desc)
        //
        //     return desc
        //
        //   }
        //   return ""
        // }
      },
      GetDialysisgoods() {
        GetDialysisgoods(this.query).then(response => {
          if (response.data.state == 0) {
            this.$message.error(response.data.msg)
            return false
          } else {

            this.list = []
            this.good_types = []
            this.allGoodInfo = []

            var res = response.data
            this.total = res.data.total
            this.good_types.push("姓名")
            var arr = []
            arr.push("name")
            for (let a = 0; a <  res.data.good_type.length; a++){
              Object.keys(res.data.good_type[a]).map(item => {
                if(item == 'type_name'){
                  arr.push(item)
                }
              })
              this.good_types.push(res.data.good_type[a].type_name)
            }
            this.arrKey.push(...arr)
          
            this.allGoodInfo = res.data.dialysis_goods
           
            for(let i = 0; i < res.data.dialysis_goods.length; i++){
              let arr =[]
              let obj = {
                id:0,
                name:  res.data.dialysis_goods[i].patient.name,
              }
              arr.push(obj)

              for (let a = 0; a <  res.data.good_type.length; a++){
                let obj = {
                  id:res.data.good_type[a].id,
                  name:""

                }
                arr.push(obj)


              }



              let newObj = {
                "good_type":arr,
                "good_user":res.data.dialysis_goods[i].good_user,
                "last_good_user":res.data.dialysis_goods[i].last_good_user,
                "good_user_detail":res.data.dialysis_goods[i].good_user_detail,
                "last_good_user_detail":res.data.dialysis_goods[i].last_good_user_detail,
              }

              this.list.push(newObj)
            }


            for (let a = 0; a <  this.list.length; a++){
              for (let b = 0; b <  this.list[a].good_type.length; b++){

                if(this.list[a].good_type[b].id > 0){
                  this.list[a].good_type[b].name = this.getGoodUserInfo(this.list[a].good_type[b].id,this.list[a].good_user,this.list[a].last_good_user)
                }

              }
            }

          }

         console.log("list222222",this.list)

        })








      },
      selectSchedulType(scheduleType) {
        this.schedulType = scheduleType
        this.query.schedule_type = scheduleType
        this.query.page = 1
        this.GetDialysisgoods()

      },
      selectPartitionType(partitionType) {
        this.partitionType = partitionType
        this.query.partition_id = partitionType
        this.query.page = 1

        this.GetDialysisgoods()

      },
      getAllZone: function() {
        GetAllZone().then(response => {
          if (response.data.state == 0) {
            this.$message.error(response.data.msg)
            return false
          } else {
            this.partitionArr = response.data.data.zone
            this.partitionArr.unshift({ id: 0, name: '全部' })
          }
        })
      },
      statistics() {
        this.$refs.consumables.show()
      },
      handleScheduleDateChange(val) {
        this.query.schedule_date = val
        this.query.page = 1
        this.GetDialysisgoods()
      },
      search() {
        this.query.page = 1
        this.GetDialysisgoods()
      },

       exportList(){
         import('@/vendor/Export2Excel').then(excel => {
         const tHeader = this.good_types
         const filterVal = this.arrKey
        
         const data = this.formatJson(filterVal, this.list)
         excel.export_json_to_excel({
           header: tHeader,
           data,
           filename: '透析耗材查询'
         })
          this.downloadLoading = false
        })
       },
       formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]));
      },

    }
  }
</script>


<style lang="scss" scoped>
  .page_consumables {

  .clearfix:after {
    content: none;
  }

  }
</style>