feat(销售出货处理平台)：
1.销售出库平台里销售出货单号弹窗，默认每页显示100条
This commit is contained in:
parent
f5af0ea37b
commit
8e6e31237a
167
src/components/dialog/input-select-dialog-sale-out.vue
Normal file
167
src/components/dialog/input-select-dialog-sale-out.vue
Normal file
@ -0,0 +1,167 @@
|
||||
<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>
|
||||
@ -22,6 +22,7 @@ import './styles/common.scss'
|
||||
import AvueFormDesign from 'pig-avue-form-design'
|
||||
import basicContainer from './components/basic-container/main'
|
||||
import inputSelectDialog from './components/dialog/input-select-dialog'
|
||||
import inputSelectDialogSaleOut from './components/dialog/input-select-dialog-sale-out.vue'
|
||||
import inputSelectCustDialog from './components/dialog/input-select-dialog-cust'
|
||||
import inputMultipleSelectCheckboxDialog from './components/dialog/input-multiple-select-checkbox-dialog'
|
||||
import inputMultipleSelectDialog from './components/dialog/input-multiple-select-dialog'
|
||||
@ -146,6 +147,7 @@ Vue.component('DictTag', DictTag)
|
||||
Vue.component('attachment-upload', AttachmentUpload)
|
||||
// 注册公用input弹出框
|
||||
Vue.component('input-select-dialog', inputSelectDialog)
|
||||
Vue.component('input-select-dialog-sale-out', inputSelectDialogSaleOut)
|
||||
Vue.component('input-select-dialog-cust', inputSelectCustDialog)
|
||||
// 多选项含checkBox的弹出框，多选后点击确定按钮回传选中的参数
|
||||
Vue.component('input-multiple-select-checkbox-dialog', inputMultipleSelectCheckboxDialog)
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<div class="execution">
|
||||
|
||||
<input-select-dialog :modal-obj='productionRequisitionDialog'
|
||||
<input-select-dialog-sale-out :modal-obj='productionRequisitionDialog'
|
||||
:modal-fetch-fun='productionRequisitionDialog.fetchFun'
|
||||
:modal-show.sync="productionRequisitionDialog.visible"
|
||||
@inputDialogSelected="productionRequisitionSelect" ref="documentDialog">
|
||||
</input-select-dialog>
|
||||
</input-select-dialog-sale-out>
|
||||
|
||||
<el-dialog title="附件列表" :visible.sync="dnOrderFileDialogVisible">
|
||||
<el-table :data="dnOrderFileList">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user