xt_vue/src/xt_pages/stock/Dialog/stockInDialog.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.goodType"
          ref="templatetable"
          border
          highlight-current-row
          max-height="250"
          @current-change="goodTypeTableChange"
          :header-cell-style="{ backgroundColor: 'rgb(245, 247, 250)'}"
          style="width: 100%">
          <el-table-column
            prop="type_name"
            label="商品类型">
          </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-all="changeAllGoodInfoTableData"
          row-key="row_key"
          style="width: 100%"
          :header-cell-style="{ backgroundColor: 'rgb(245, 247, 250)'}"
        >
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            label="规格名称"
            property="specification_name"
            style="word-break: keep-all;white-space:nowrap;"
          ></el-table-column>
          <el-table-column
            label="单位"
            property="good_unit"
          >
            <template slot-scope="scope">
              <span>{{getName(scope.row.good_unit)}}</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: 'stockInDialog',
    data() {
      return {
        goodInfo: [],
        goodInfoTableData: [],
        keywords: '',
        multipleSelection: [],
        currentGoodTypeId: 0,
        isClose: false,
        visibility: false,
      }
    },
    props: {
      propForm: {
        type: Object
      },
    },
    methods: {
      hide:function(){
        this.visibility = false
      },
      show:function(){
        this.visibility = true
      },
      goodTypeTableChange: function(currentRow, oldCurrentRow) {
        this.currentGoodTypeId = currentRow.id
        const params = {
          id: currentRow.id
        }
        this.goodInfoTableData = []
        this.goodInfo = []
        GetGoodInfoByGoodId(params).then(response => {
          if (response.data.state == 0) {
            this.$message.error(response.data.msg)
            return false
          } else {
            for (let i = 0; i < response.data.data.list.length; i++) {
              this.goodInfo.push(response.data.data.list[i])
              this.goodInfoTableData.push(response.data.data.list[i])
            }
          }
        })
      },
      cancle: function(formName) {
        this.goodInfo = []
        this.goodInfoTableData = []
        this.$emit('dialog-cancle', this.getValue())
        this.$refs.multipleTable.clearSelection()
      },
      comfirm: function(formName) {
        this.goodInfo = []
        this.goodInfoTableData = []
        this.$emit('dialog-comfirm', this.getValue())
        this.$refs.multipleTable.clearSelection()
      },
      getValue: function() {
        const obj = {
          selectedGoodInfo: this.multipleSelection,
          goodTypeId: this.currentGoodTypeId
        }
        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].specification_name.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) {
        this.multipleSelection = val
      }, changeAllGoodInfoTableData: function(val) {
        this.multipleSelection = val
      },clickRow:function(row) {
        this.$refs.multipleTable.toggleRowSelection(row)
      }
    }
  }

</script>

<style scoped>

</style>