前4个模块的表单样式
This commit is contained in:
88
src/views/wmsOutStore/components/outStoreDocumentsAdd.vue
Normal file
88
src/views/wmsOutStore/components/outStoreDocumentsAdd.vue
Normal file
@@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog
|
||||
:title="dialogTitle"
|
||||
:visible.sync="dialogVisible"
|
||||
width="50%"
|
||||
>
|
||||
<el-form ref="formList" label-position="right" label-width="80px" :model="formList">
|
||||
<el-form-item label="出库单号" prop="outboundOrderNo">
|
||||
<el-input v-model="formList.outboundOrderNo" />
|
||||
</el-form-item>
|
||||
<el-form-item label="客户名称" prop="customerName">
|
||||
<el-input v-model="formList.customerName" />
|
||||
</el-form-item>
|
||||
<el-form-item label="发货缓存区" prop="shipmentCacheArea">
|
||||
<el-input v-model="formList.shipmentCacheArea" />
|
||||
</el-form-item>
|
||||
<el-form-item label="规格" prop="spec">
|
||||
<el-input v-model="formList.spec" />
|
||||
</el-form-item>
|
||||
<el-form-item label="数量" prop="num">
|
||||
<el-input v-model="formList.num" />
|
||||
</el-form-item>
|
||||
<el-form-item label="要求发货时间" prop="deliveryTime">
|
||||
<el-input v-model="formList.deliveryTime" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="resetForm('formList')">取 消</el-button>
|
||||
<el-button type="primary" @click="submitForm('formList')">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'OutStoreDocumentsAdd',
|
||||
props: {
|
||||
dialogTitle: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
formList: {
|
||||
outboundOrderNo: '',
|
||||
customerName: '',
|
||||
shipmentCacheArea: '',
|
||||
spec: '',
|
||||
num: '',
|
||||
deliveryTime: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
init(val) {
|
||||
if (val) {
|
||||
console.log(val)
|
||||
this.$nextTick(() => {
|
||||
this.formList.outboundOrderNo = val.outboundOrderNo
|
||||
this.formList.customerName = val.customerName
|
||||
this.formList.shipmentCacheArea = val.shipmentCacheArea
|
||||
this.formList.spec = val.spec
|
||||
this.formList.num = val.num
|
||||
this.formList.deliveryTime = val.deliveryTime
|
||||
})
|
||||
}
|
||||
this.dialogVisible = true
|
||||
},
|
||||
submitForm(formName) {
|
||||
this.$refs[formName].resetFields()
|
||||
this.dialogVisible = false
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: this.dialogTitle + '成功'
|
||||
})
|
||||
},
|
||||
resetForm(formName) {
|
||||
this.$refs[formName].resetFields()
|
||||
console.log(this.formList)
|
||||
this.dialogVisible = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,8 +1,181 @@
|
||||
<template>
|
||||
<div>1</div>
|
||||
<div class="app-container">
|
||||
<head-form :form-config="headFormConfig" @headBtnClick="btnClick" />
|
||||
<base-table
|
||||
:top-btn-config="topBtnConfig"
|
||||
:page="listQuery.current"
|
||||
:limit="listQuery.size"
|
||||
:height="tableH"
|
||||
:table-config="tableProps"
|
||||
:table-data="list"
|
||||
:is-loading="listLoading"
|
||||
@clickTopBtn="clickTopBtn"
|
||||
>
|
||||
<method-btn
|
||||
v-if="tableBtn.length"
|
||||
slot="handleBtn"
|
||||
:method-list="tableBtn"
|
||||
:width="trueWidth"
|
||||
@clickBtn="handleClick"
|
||||
/>
|
||||
</base-table>
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="listQuery.current"
|
||||
:limit.sync="listQuery.size"
|
||||
@pagination="getList()"
|
||||
/>
|
||||
<out-store-documents-add ref="outStoreDocumentsAdd" :dialog-title="showTitle" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import HeadForm from '@/components/basicData/HeadForm'
|
||||
import BaseTable from '@/components/BaseTable'
|
||||
import Pagination from '@/components/Pagination'
|
||||
import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
|
||||
import { tableHeight } from '@/utils/index'
|
||||
import outStoreDocumentsAdd from './components/outStoreDocumentsAdd.vue'
|
||||
const topBtnConfig = [
|
||||
{
|
||||
type: 'add',
|
||||
btnName: 'btn.add'
|
||||
}
|
||||
]
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'outboundOrderNo',
|
||||
label: '出库单号'
|
||||
},
|
||||
{
|
||||
prop: 'customerName',
|
||||
label: '客户名称'
|
||||
},
|
||||
{
|
||||
prop: 'shipmentCacheArea',
|
||||
label: '发货缓存区'
|
||||
},
|
||||
{
|
||||
prop: 'spec',
|
||||
label: '规格'
|
||||
},
|
||||
{
|
||||
prop: 'num',
|
||||
label: '数量'
|
||||
},
|
||||
{
|
||||
prop: 'deliveryTime',
|
||||
label: '要求发货时间'
|
||||
}
|
||||
]
|
||||
const tableBtn = [
|
||||
{
|
||||
type: 'edit',
|
||||
btnName: 'btn.edit'
|
||||
},
|
||||
{
|
||||
type: 'delete',
|
||||
btnName: 'btn.delete'
|
||||
},
|
||||
{
|
||||
type: 'print',
|
||||
btnName: 'btn.print'
|
||||
}
|
||||
]
|
||||
export default {
|
||||
name: 'OutStoreDocuments'
|
||||
name: 'OutStoreDocuments',
|
||||
components: { HeadForm, BaseTable, Pagination, MethodBtn, outStoreDocumentsAdd },
|
||||
data() {
|
||||
return {
|
||||
headFormConfig: [
|
||||
{
|
||||
type: 'input',
|
||||
label: '关键字',
|
||||
placeholder: '出库单号或客户名称',
|
||||
param: 'name',
|
||||
width: 300
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: 'btn.search',
|
||||
name: 'search',
|
||||
color: 'primary'
|
||||
}
|
||||
],
|
||||
topBtnConfig,
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 20
|
||||
},
|
||||
tableH: tableHeight(275),
|
||||
tableProps,
|
||||
list: [],
|
||||
listLoading: false,
|
||||
tableBtn,
|
||||
total: 0,
|
||||
trueWidth: 120,
|
||||
showTitle: ''
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener('resize', () => {
|
||||
this.tableH = tableHeight(275)
|
||||
})
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
const temp = []
|
||||
const num = 20
|
||||
const spcList = ['50*50m', '100*50m', '100*100m', '70*100m', '100*120m']
|
||||
for (let i = 0; i < num; i++) {
|
||||
const obj = {}
|
||||
obj.outboundOrderNo = '1020' + i
|
||||
obj.customerName = '客户' + i
|
||||
obj.shipmentCacheArea = '20221020100' + i
|
||||
obj.num = parseInt(Math.random() * 200 + 100)
|
||||
const sj = Math.floor(Math.random() * 5)
|
||||
obj.spec = spcList[sj]
|
||||
obj.deliveryTime = '2022-10-' + (i + 1)
|
||||
temp.push(obj)
|
||||
}
|
||||
this.list = temp
|
||||
this.total = num
|
||||
},
|
||||
btnClick(val) {
|
||||
console.log(val)
|
||||
this.getList()
|
||||
},
|
||||
clickTopBtn(val) {
|
||||
console.log(val)
|
||||
this.$refs.outStoreDocumentsAdd.init()
|
||||
this.showTitle = '新增'
|
||||
},
|
||||
handleClick(val) {
|
||||
// console.log(val)
|
||||
if (val.type === 'delete') {
|
||||
this.$confirm('确定删除出库单号为[ ' + val.data.outboundOrderNo + ' ]的数据吗？', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(async() => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '删除成功'
|
||||
})
|
||||
this.getList()
|
||||
})
|
||||
} else if (val.type === 'edit') {
|
||||
console.log(val)
|
||||
this.showTitle = '编辑'
|
||||
this.$refs.outStoreDocumentsAdd.init(val.data)
|
||||
} else {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '打印成功'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,8 +1,180 @@
|
||||
<template>
|
||||
<div>2</div>
|
||||
<div class="app-container">
|
||||
<head-form :form-config="headFormConfig" @headBtnClick="btnClick" />
|
||||
<base-table
|
||||
:page="listQuery.current"
|
||||
:limit="listQuery.size"
|
||||
:height="tableH"
|
||||
:table-config="tableProps"
|
||||
:table-data="list"
|
||||
:is-loading="listLoading"
|
||||
>
|
||||
<method-btn
|
||||
v-if="tableBtn.length"
|
||||
slot="handleBtn"
|
||||
:method-list="tableBtn"
|
||||
:width="trueWidth"
|
||||
@clickBtn="handleClick"
|
||||
/>
|
||||
</base-table>
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="listQuery.current"
|
||||
:limit.sync="listQuery.size"
|
||||
@pagination="getList()"
|
||||
/>
|
||||
<out-store-documents-add ref="outStoreDocumentsAdd" :dialog-title="showTitle" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import HeadForm from '@/components/basicData/HeadForm'
|
||||
import BaseTable from '@/components/BaseTable'
|
||||
import Pagination from '@/components/Pagination'
|
||||
import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
|
||||
import { tableHeight } from '@/utils/index'
|
||||
import outStoreDocumentsAdd from './components/outStoreDocumentsAdd.vue'
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'operationCode',
|
||||
label: '作业号'
|
||||
},
|
||||
{
|
||||
prop: 'outboundOrderNo',
|
||||
label: '出库单号'
|
||||
},
|
||||
{
|
||||
prop: 'goodsArea',
|
||||
label: '货位'
|
||||
},
|
||||
{
|
||||
prop: 'shipmentCacheArea',
|
||||
label: '缓存区号'
|
||||
},
|
||||
{
|
||||
prop: 'startTime',
|
||||
label: '开始时间'
|
||||
},
|
||||
{
|
||||
prop: 'endTime',
|
||||
label: '结束时间'
|
||||
},
|
||||
{
|
||||
prop: 'driverCode',
|
||||
label: '司机/AGV编号'
|
||||
}
|
||||
]
|
||||
const tableBtn = [
|
||||
{
|
||||
type: 'complete',
|
||||
btnName: 'btn.complete'
|
||||
},
|
||||
{
|
||||
type: 'cancellation',
|
||||
btnName: 'btn.cancellation'
|
||||
}
|
||||
]
|
||||
export default {
|
||||
name: 'OutStoreOperation'
|
||||
name: 'OutStoreOperation',
|
||||
components: { HeadForm, BaseTable, Pagination, MethodBtn, outStoreDocumentsAdd },
|
||||
data() {
|
||||
return {
|
||||
headFormConfig: [
|
||||
{
|
||||
type: 'input',
|
||||
label: '关键字',
|
||||
placeholder: '作业号或出库单号',
|
||||
param: 'name',
|
||||
width: 300
|
||||
},
|
||||
{
|
||||
type: 'datePicker',
|
||||
label: '时间范围',
|
||||
dateType: 'daterange',
|
||||
format: 'yyyy-MM-dd',
|
||||
valueFormat: 'yyyy-MM-dd',
|
||||
rangeSeparator: '-',
|
||||
startPlaceholder: '开始时间',
|
||||
endPlaceholder: '结束时间',
|
||||
param: 'searchTime'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: 'btn.search',
|
||||
name: 'search',
|
||||
color: 'primary'
|
||||
}
|
||||
],
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 20
|
||||
},
|
||||
tableH: tableHeight(275),
|
||||
tableProps,
|
||||
list: [],
|
||||
listLoading: false,
|
||||
tableBtn,
|
||||
total: 0,
|
||||
trueWidth: 80,
|
||||
showTitle: ''
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener('resize', () => {
|
||||
this.tableH = tableHeight(275)
|
||||
})
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
const temp = []
|
||||
const num = 20
|
||||
for (let i = 0; i < num; i++) {
|
||||
const obj = {}
|
||||
obj.operationCode = '200101' + i
|
||||
obj.outboundOrderNo = '1020' + i
|
||||
obj.goodsArea = '1-1-' + i
|
||||
obj.shipmentCacheArea = '20221020100' + i
|
||||
obj.startTime = '2022-10-' + (i + 1)
|
||||
obj.endTime = '2022-10-' + (i + 2)
|
||||
obj.driverCode = 'd20152' + i
|
||||
temp.push(obj)
|
||||
}
|
||||
this.list = temp
|
||||
this.total = num
|
||||
},
|
||||
btnClick(val) {
|
||||
console.log(val)
|
||||
this.getList()
|
||||
},
|
||||
handleClick(val) {
|
||||
// console.log(val)
|
||||
if (val.type === 'complete') {
|
||||
this.$confirm('确定完成[ ' + val.data.outboundOrderNo + ' ]的吗？', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(async() => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '确定完成成功'
|
||||
})
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
this.$confirm('确定作废[ ' + val.data.outboundOrderNo + ' ]的吗？', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(async() => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '确定作废成功'
|
||||
})
|
||||
this.getList()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user