nalinv-ui/src/components/dialog/input-select-dialog-sale-out.vue

<template>
  <el-dialog v-el-drag-dialog
             :title="$t(modalObj.title)"
             :visible="visible"
             top="10"
             width="60%"
             center
             :append-to-body="true"
             :before-close="modalClose"
             @open="getData">
    <div style="display:flex; align-items:center; justify-content:center; flex-direction:column">
      <div style="width: 100%;">
        <el-input ref="searchInput"
                  size="small"
                  v-model="searchVal"
                  @change="getData"
                  :disabled="tableLoading">
          <el-button slot="append"
                     icon="el-icon-search"
                     @click="getData"></el-button>
        </el-input>
      </div>
      <br>
      <div v-if="modalObj.page !== false"
           style="width: 100%">
        <el-table border
                  highlight-current-row
                  :data="dataList.records"
                  :height="tableHeight"
                  @row-click="handleRowDblclick"
                  v-loading="tableLoading">
          <el-table-column v-for="(item, key) in modalObj.tableColumn"
                           :prop="item.prop"
                           :label="$t(item.label)"
                           :width="item.width"
                           :key="key"
                           :formatter="item.formatter"></el-table-column>
        </el-table>
      </div>
      <div v-else
           style="width: 100%">
        <el-table border
                  highlight-current-row
                  :data="dataListWithoutPage"
                  :height="tableHeight"
                  @row-click="handleRowDblclick"
                  v-loading="tableLoading">
          <el-table-column v-for="(item, key) in modalObj.tableColumn"
                           :prop="item.prop"
                           :label="$t(item.label)"
                           :width="item.width"
                           :key="key"
                           :formatter="item.formatter"></el-table-column>
        </el-table>
      </div>
      <div v-if="modalObj.page !== false"
           style="width: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;">
        <el-pagination layout="total, sizes, prev, pager, next, jumper"
                       :total="dataList.total"
                       :page-size="dataList.size"
                       :current-page="queryParam.current"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import '@/util/dialogdrag.js' // 引入移动事件（el-drag-dialog.js的内容为上面的代码块）

export default {
  name: 'input-select-dialog-sale-out',
  props: {
    modalObj: Object,
    modalFetchFun: Function,
    beforeLoadingFun: Function,
    modalShow: Boolean
  },
  data () {
    return {
      searchVal: '',
      tableHeight: 500,
      tableLoading: false,
      visible: this.modalShow,
      dataList: {},
      dataListWithoutPage: [],
      queryParam: { current: 1, size: 100 }
    }
  },
  methods: {
    modalClose () {
      this.visible = false
      this.searchVal = ''
    },
    getData (key) {
      let me = this
      if (me.searchVal) {
        me.queryParam[me.modalObj.condition || 'searchText'] = me.searchVal
      } else {
        delete me.queryParam[me.modalObj.condition || 'searchText']
      }
      me.tableLoading = true
      let req = Object.assign(me.queryParam, me.modalObj.queryParam)
      debugger
      if (key != 'pagination') {
        req = Object.assign(me.queryParam, me.modalObj.queryParam, { current: 1, size: 100 })
      }
      let fetch = me.modalFetchFun(req)
      fetch.then(function (resp) {
        me.tableLoading = false
        if (me.beforeLoadingFun) {
          me.beforeLoadingFun(resp)
        }
        if (me.modalObj.page !== false) {
          me.dataList = resp.data.data || []
        } else {
          me.dataListWithoutPage = resp.data.data
        }
        me.$nextTick(function () {
          me.$refs.searchInput.focus()
        })
      }).catch(function (e) {
        me.tableLoading = false
        me.$message({
          message: e,
          type: 'warning'
        })
        me.$nextTick(function () {
          me.$refs.searchInput.focus()
        })
      })
    },
    handleRowDblclick (row, column, event) {
      let me = this
      me.$emit('inputDialogSelected', row)
      me.modalClose()
    },
    handleSizeChange (val) {
      let me = this
      me.queryParam.size = val
      me.queryParam.current = 1
      me.getData('pagination')
    },
    handleCurrentChange (val) {
      let me = this
      me.queryParam.current = val
      me.getData('pagination')
    }
  },
  computed: {
    /*tableHeight () {
      return document.body.clientHeight - 200
    }*/
  },
  //这个地方需要监听modalShow的变化,如果modalShow发生变化后,触发父组件对modal-show的更新
  watch: {
    modalShow: function (val) {
      this.$emit('update:modalShow', null)
      this.visible = true
      this.tableHeight = document.body.clientHeight - 250
    }
  }
}
</script>

<style scoped></style>