elizebeth/src/xt_pages/stock/drugs/drugsStockDialog/index.vue

<template>
  <el-dialog title="选择药品" :visible.sync="visibility" :close-on-click-modal="isClose"
             :close-on-press-escape="isClose">

    <div class="filter-container">
      <el-input style="width: 150px;" class="filter-item" placeholder="药品规格名称" v-model="keywords"/>
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
    </div>

    <el-row :gutter="20">
      <el-col :span="8">
        <el-table
          :data="propForm.goods"
          ref="table"
          border
          highlight-current-row
          max-height="250"
          :row-class-name="tableRows"
          @row-click="onRowClicks"
          @current-change="goodTypeTableChange"
          :header-cell-style="{ backgroundColor: 'rgb(245, 247, 250)'}"
          style="width: 100%">
          <el-table-column
            align="center"
            label="药品规格">
            <template slot-scope="scope">
              <span>{{scope.row.drug_name}}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="16">
        <el-table
          :data="goodInfoTableData"
          border
          ref="multipleTable"
          max-height="250"
          @row-click="clickRow"
          @selection-change="changeGoodInfoTableData"
          @select="selectGoodInfo"
          @select-all="changeAllGoodInfoTableData"
          row-key="row_key"
          style="width: 100%"
          :header-cell-style="{ backgroundColor: 'rgb(245, 247, 250)'}"
        >
          <el-table-column
            align="center"
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            align="center"
            label="规格名称"
            property="drug_spec"
            style="word-break: keep-all;white-space:nowrap;"
          ></el-table-column>
          <!--<el-table-column-->
            <!--align="center"-->
            <!--label="单位"-->
            <!--property="good_unit"-->
          <!--&gt;-->
            <!--<template slot-scope="scope">-->
              <!--&lt;!&ndash;<span>{{getName(scope.row.good_unit)}}</span>&ndash;&gt;-->
            <!--</template>-->
          <!--</el-table-column>-->

          <el-table-column
            align="center"
            label="上次进货价"
            property="buy_price"
          >
            <template slot-scope="scope">
              <span>{{scope.row.last_price}}</span>
            </template>
          </el-table-column>


          <el-table-column
            align="center"
            label="零售价"
            property="buy_price"
          >
            <template slot-scope="scope">
              <span>{{scope.row.retail_price}}</span>
            </template>
          </el-table-column>

        </el-table>
      </el-col>
    </el-row>


    <span slot="footer" class="dialog-footer">
    <el-button @click="cancle('form')">取 消</el-button>
    <el-button type="primary" @click="comfirm('form')">保 存</el-button>
  </span>
  </el-dialog>

</template>

<script>
  import { GetGoodInfoByGoodId } from '@/api/stock'

  export default {
    name: 'drugsStockDialog',
    data() {
      return {
        goodInfo: [],
        goodInfoTableData: [],
        keywords: '',
        multipleSelection: [],
        currentGoodTypeId: 0,
        isClose: false,
        visibility: false,
        SelectedDatas: [],
        table_current_index: -1
      }
    },
    props: {
      propForm: {
        type: Object
      }
    },
    methods: {
      hide: function() {
        this.visibility = false
      },
      show: function() {
        this.visibility = true

      },
      goodTypeTableChange: function(currentRow, oldCurrentRow) {
        this.goodInfoTableData = currentRow.drug_specs != null ? currentRow.drug_specs : []
        for (let i = 0; i < this.goodInfoTableData.length; i++) {
          if (this.goodInfoTableData[i].isSelected) {
            this.$nextTick(function() {
              this.$refs.multipleTable.toggleRowSelection(this.goodInfoTableData[i])
            })
          }
        }

      },
      cancle: function(formName) {
        this.goodInfoTableData = []
        this.$emit('dialog-cancle', this.getValue())
        this.$refs.multipleTable.clearSelection()
        this.$refs.table.setCurrentRow(null)

      },
      comfirm: function(formName) {
        this.goodInfoTableData = []
        this.$emit('dialog-comfirm', this.getValue())
        this.$refs.multipleTable.clearSelection()
        this.$refs.table.setCurrentRow(null)
      },
      getValue: function() {
        this.multipleSelection = []
        for (let i = 0; i < this.propForm.goods.length; i++) {
          for (let a = 0; a < this.propForm.goods[i].drug_specs.length; a++) {
                if (this.propForm.goods[i].drug_specs[a].isSelected) {
                  this.multipleSelection.push(this.propForm.goods[i].drug_specs[a])
                }
          }
        }
        const obj = {
          selectedGoodInfo: this.multipleSelection,
        }
        console.log(obj)
        return obj
      }, goodTypeSelect: function(id) {
        this.tempGoodInfo = []
        this.goodInfo = []
        for (let i = 0; i < this.propForm.goodInfo.length; i++) {
          if (this.propForm.goodInfo[i].good_type_id == id) {
            this.tempGoodInfo.push(this.propForm.goodInfo[i])
          }
        }
      }, goodInfoSelect: function(id) {
        let index = 0
        for (let i = 0; i < this.propForm.goodInfo.length; i++) {
          if (this.propForm.goodInfo[i].id == id) {
            index = i
          }
        }
        this.form.good_type_id = this.propForm.goodInfo[index].good_type_id
      }, getName: function(id) {
        if (id == 0) {
          return ''
        }

        for (let i = 0; i < this.propForm.goodUnit.length; i++) {
          if (this.propForm.goodUnit[i].id == id) {
            return this.propForm.goodUnit[i].name
          }
        }
      }, search: function() {
        if (this.keywords.length <= 0) {
          this.$message.error('搜索关键字不能为空')
          return
        }
        const searchArr = []
        for (let i = 0; i < this.goodInfoTableData.length; i++) {
          if (this.goodInfoTableData[i].drug_spec.indexOf(this.keywords) != -1) {
            searchArr.push(this.goodInfoTableData[i])
          }
        }
        this.goodInfoTableData = []
        for (let i = 0; i < searchArr.length; i++) {
          this.goodInfoTableData.push(searchArr[i])
        }
      }, changeGoodInfoTableData: function(val) {
        console.log(val)
      },
       changeAllGoodInfoTableData: function(selection) {
        var goodInfos = this.propForm.goods[this.table_current_index].drug_specs
        if (selection.length > 0) {
          for (let y = 0; y < goodInfos.length; y++) {
            for (let i = 0; i < selection.length; i++) {
              if (goodInfos[y].id == selection[i].id) {
                goodInfos[y].isSelected = true
              }
            }
          }
        }
      }, clickRow: function(row) {
        // this.$refs.multipleTable.toggleRowSelection(row)

      },tableRows({ row, rowIndex }) {
        // 把每一行的索引放进row
        row.index = rowIndex
      },
      onRowClicks(row, event, column) {
        this.table_current_index = row.index
      }, selectGoodInfo(selection, row) {

        var goodInfos = this.propForm.goods[this.table_current_index].drug_specs
        // for (let y = 0; y < goodInfos.length; y++) {
        //   goodInfos[y].isSelected = false
        // }
        if (selection.length > 0) {
          for (let y = 0; y < goodInfos.length; y++) {
            for (let i = 0; i < selection.length; i++) {
              if (goodInfos[y].id == selection[i].id) {
                goodInfos[y].isSelected = true
              }
            }
          }
        }
      }
    }

  }

</script>

<style scoped>

</style>