pharmacy.admin/src/components/selectTable/selectOutTable.vue

<template>
	<div>
		<el-select
    v-model="drugsId"
    @visible-change="visibleChange"
    @change="handleDrugsId($event)"
    filterable
    remote
    reserve-keyword
    placeholder="药品名称"
    :remote-method="remoteMethod"
    :loading="loading">
    <el-option disabled value="-1">
      <table class="select-table select-table-head">
        <tr>
          <td>名称</td>
          <td>规格</td>
          <td>产地</td>
          <td>零售价</td>
        </tr>
      </table>
    </el-option>
    <el-option
      v-for="(item,index) in options"
      :key="index"
      :value="index"
      :label="item.drugsName"
    >
      <table class="select-table">
        <tr>
          <td>{{ item.drugsName }}</td>
          <td>{{item.specsName}}</td>
          <td>{{item.priceName}}</td>
          <td>{{item.retail||item.retailPrice}}</td>
        </tr>
      </table>
    </el-option>
  </el-select>

	  <!-- 选取规格 -->
	  <el-dialog title="选择批次" :close-on-click-modal="false" :visible.sync="pvisible" width="600px" :append-to-body="true">
	    <el-table
	      size="small"
	      ref="singleTable"
	      :data="prows"
	      highlight-current-row
        :row-class-name="setRowClass"
	      @current-change="handleCurrentChange"
	      style="width: 100%">
	      <el-table-column
	        type="index"
	        width="50">
	      </el-table-column>
	      <el-table-column
	        property="productionCode"
	        label="生产批号">
	      </el-table-column>
	      <el-table-column
	        property="purchasePrice"
	        label="进货单价">
	      </el-table-column>
	      <el-table-column
	        property="stock"
	        label="库存数量">
	      </el-table-column>
	    </el-table>
	    <!-- <span slot="footer">
	      <el-button @click="pvisible = false">取 消</el-button>
	      <el-button type="primary" @click="confirmP">确 定</el-button>
	    </span> -->
	  </el-dialog>
	</div>
</template>


<script>
import { listAll } from "@/api/drugs/drugs";
import { listSpecs } from "@/api/drugs/specs";
import { listInventory, detailGroupList } from "@/api/inventory/inventory";
export default {
	props: {
    info: {
      type: Object,
      default: () => {}
    },
    toBank: {
      type: Boolean,
      default: false
    },
		index: {},
		pharmacyId: {},
		disableDetails: {
			type: Boolean,
			default: false
		}
	},
	data () {
		return {
			pvisible: false,
      prevDrugsId: '',
			drugsId: '',
			drugsType: '',
			drugsArr: [],
			selectOne: '',
			currentRow: '',
			name: '',
			prows: [],
			options: [],
			loading: false
		}
	},
	watch: {
    drugsId () {
      this.$emit('selectChange', {
        //val: this.drugsId,
        //drugsType: this.drugsType,
        index: this.index,
        data: this.selectOne
      })
    }
  },
	mounted () {
		//获取药品名称
    if (this.info&&JSON.stringify(this.info) != '{}') {
      this.drugsId = this.info.drugsName
      this.selectOne = this.info
    }
    this.getDataList()
	},
	methods: {
    setRowClass (data) {
      if (this.toBank) {
        return data.row.validState == 3 ? 'row-disabled' : ''
      } else {
        return ''
      }
    },
		remoteMethod(query) {
      if (query !== '') {
        this.loading = true;
        listInventory({
          drugsName: query,
					pharmacyId: this.pharmacyId
        }).then((res) => {
          this.loading = false
          this.options = res.rows
        })
      }
    },
    handleCurrentChange(val) {
      if (!val) {
        return
      }
      if (this.toBank && val.validState == 3) {
        return this.$message.warning('过期药品不可选')
      }
      this.currentRow = val
      this.confirmP()
    },
    confirmP () {
      if (!this.currentRow) {
        return this.$message.warning('请选择批次')
      }
      this.selectOne.productionCode = this.currentRow.productionCode;
      this.selectOne.purchasePrice = this.currentRow.purchasePrice;
      this.selectOne.stock = this.currentRow.stock;
      this.selectOne.drugsId = this.currentRow.drugsId;
      this.selectOne.priceId = this.currentRow.priceId;
      this.selectOne.specsId = this.currentRow.specsId;
      this.selectOne.inventoryId = this.currentRow.id;
      this.selectOne.dosageSizeUnit = this.currentRow.dosageSizeUnit;
      this.selectOne.validTime = this.currentRow.validTime;
      this.pvisible = false
      this.$emit('selectChange', {
      	index: this.index,
      	data: this.selectOne
      })
    },
		getDataList () {
			listInventory({
				drugsName: this.name,
				pharmacyId: this.pharmacyId
			}).then((res) => {
	      this.options = res.rows;
	    })
		},
		filterFn (val) {
			this.name = val
			this.drugsId = val
			this.getDataList()
		},
    visibleChange (e) {
      if (e) {
        if (this.drugsId !== '') {
          this.prevDrugsId = this.drugsId
          this.drugsId = ''
        }
      } else {
        if (this.drugsId === '') {
          this.drugsId = this.prevDrugsId
          this.prevDrugsId = ''
        }
      }
    },
		handleDrugsId(e) {
			this.drugsId = e
			this.selectOne = this.options[e]
      // let newArr = this.drugsArr.filter((item) => {
      //   return item.drugsId === e;
      // });
      // this.drugsId = e;
      // //console.log('newArr', newArr)
      // this.drugsType = newArr[0].drugsType
      // this.getListSpecs();
      this.getSumStockS();
    },
    getSumStockS () {
    	let params = {
        pharmacyId: this.selectOne.pharmacyId,
        drugsId: this.selectOne.drugsId,
        specsId: this.selectOne.specsId,
        priceId: this.selectOne.priceId,
      };
      detailGroupList(params).then((res) => {
        if (res.rows) {
          this.prows = res.rows
          this.pvisible = true
          this.currentRow = ''
          this.$nextTick(() => {
            this.$refs.singleTable.setCurrentRow()
          })
        }
        /*res.data
          ? this.$set(this.modifyPriceDetails[index], "stock", res.data.stock)
          : this.$set(this.modifyPriceDetails[index], "stock", 0);*/
      });
    },
    //获取药品规格
    /*getListSpecs() {
    	var drugsId = this.selectOne.drugsId
      listSpecs({ drugsId }).then((res) => {
	      this.$emit('selectChange', {
	      	//val: this.drugsId,
	      	//drugsType: this.drugsType,
	      	index: this.index,
	      	data: this.selectOne
	      })
      });
    },*/
	}
}
</script>
<style lang="scss" scoped>
.select-table {
  width: 100%;
  td {
    &:first-of-type {
      width: 250px;
    }
  }
}
</style>
<style scoped>
.el-table >>> tr.row-disabled { cursor: not-allowed; color: #999; background: #eee; }
.select-table-head { background-color: #17C7B1; color: #fff; }
</style>