<script setup>
|
import {reactive, ref} from "vue"
|
import {VXETable} from "vxe-table"
|
import {useRouter} from "vue-router"
|
const router = useRouter()
|
|
const xGrid = ref()
|
const gridOptions = reactive({
|
border: "full",//表格加边框
|
keepSource: true,//保持源数据
|
align: 'center',//文字居中
|
stripe:true,//斑马纹
|
rowConfig: {isCurrent: true, isHover: true,height: 50},//鼠标移动或选择高亮
|
id: 'OrderList',
|
showFooter: true,//显示脚
|
printConfig: {},
|
importConfig: {},
|
exportConfig: {},
|
scrollY:{ enabled: true },//开启虚拟滚动
|
showOverflow:true,
|
columnConfig: {
|
resizable: true,
|
useKey: true
|
},
|
filterConfig: { //筛选配置项
|
remote: true
|
},
|
customConfig: {
|
storage: true
|
},
|
editConfig: {
|
trigger: 'click',
|
mode: 'row',
|
showStatus: true
|
},//表头参数
|
columns:[
|
{type: 'seq',fixed:"left", title: '自序', width: 80 },
|
{field: 'orderID',width:120, title: '楼号',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
|
{field: 'orderID',width:120, title: '产品',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
|
{field: 'orderID',width:120, title: '宽',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
|
{field: 'orderID',width:120, title: '高',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
|
{field: 'orderID',width:120, title: '数量',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
|
{field: 'orderID',width:120, title: '单价',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
|
{field: 'orderID',width:120, title: '形状',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
|
{field: 'orderID',width:120, title: '总面积',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
|
{field: 'orderID',width:120, title: '单片面积',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
|
{field: 'orderID',width:120, title: '结算单片面积',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
|
{field: 'orderID',width:120, title: '结算总面积',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
|
{field: 'orderID',width:120, title: '磨边类型',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
|
{field: 'orderID',width:120, title: '加工要求',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
|
{field: 'orderID',width:120, title: '备注',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
|
{field: 'orderID',width:120, title: '外购',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true}
|
|
|
|
],//表头按钮
|
toolbarConfig: {
|
buttons: [
|
{'code': 'remarks', 'name': '加工要求'},
|
{'code': 'Craft', 'name': '工艺',status: 'primary'},
|
{'code': 'add', 'name': '审核',status: 'primary',disabled: true},
|
{'code': 'add', 'name': '保存',status: 'primary',icon: 'vxe-icon-save'}
|
],
|
import: false,
|
export: true,
|
print: true,
|
zoom: true,
|
custom: true
|
},
|
data: [
|
],//table body实际数据
|
footerMethod ({ columns, data }) {//页脚函数
|
return[
|
columns.map((column, columnIndex) => {
|
if (columnIndex === 0) {
|
return '合计:'
|
}
|
// if (props.tableProp.footList.includes(column.field)) {
|
// return sumNum(data, column.field)
|
// }
|
return ''
|
})
|
]
|
}
|
|
})
|
|
const gridEvents = {
|
toolbarButtonClick ({ code }) {
|
const $grid = xGrid.value
|
if ($grid) {
|
switch (code) {
|
case 'Craft': {
|
router.push({path: '/main/order/updateOrderCraft', query: { orderID: 12123 }})
|
break
|
}
|
}
|
}
|
}
|
}
|
|
</script>
|
|
<template>
|
<div class="main-div">
|
|
<div class="order-primary" style="background-color: white">
|
<el-row>
|
<el-col :span="2"><el-text>*项目名称：</el-text></el-col>
|
<el-col :span="2"><el-input/></el-col>
|
<el-col :span="2"><el-text>*客户选择：</el-text></el-col>
|
<el-col :span="2">
|
<el-select clearable placeholder=" " >
|
<el-option/>
|
</el-select>
|
</el-col>
|
<el-col :span="2"><el-text>*订单类型：</el-text></el-col>
|
<el-col :span="2">
|
<el-select clearable placeholder=" " >
|
<el-option />
|
</el-select>
|
</el-col>
|
<el-col :span="2"><el-text>订单分类：</el-text></el-col>
|
<el-col :span="2">
|
<el-select clearable placeholder=" " >
|
<el-option/>
|
</el-select>
|
</el-col>
|
<el-col :span="2"><el-text>商标选项：</el-text></el-col>
|
<el-col :span="2">
|
<el-select clearable placeholder=" " >
|
<el-option/>
|
</el-select>
|
</el-col>
|
<el-col :span="2"><el-text>包装方式：</el-text></el-col>
|
<el-col :span="2">
|
<el-select clearable placeholder=" " >
|
<el-option/>
|
</el-select>
|
</el-col>
|
<!-- <el-col :span="2"><el-text /></el-col>-->
|
</el-row>
|
<el-row>
|
<el-col :span="2"><el-text>销售单号：</el-text></el-col>
|
<el-col :span="2"><el-text /></el-col>
|
<el-col :span="2"><el-text>交货日期：</el-text></el-col>
|
<el-col :span="2">
|
<el-date-picker
|
type="week"
|
format="[Week] ww"
|
placeholder="选择日期"/>
|
</el-col>
|
<el-col :span="2"><el-text>批次：</el-text></el-col>
|
<el-col :span="2"><el-input/></el-col>
|
<el-col :span="2"><el-text>计算方式：</el-text></el-col>
|
<el-col :span="2">
|
<el-select clearable placeholder=" " >
|
<el-option/>
|
</el-select>
|
</el-col>
|
<el-col :span="2"><el-text>*业务员：</el-text></el-col>
|
<el-col :span="2">
|
<el-select clearable placeholder=" " >
|
<el-option/>
|
</el-select>
|
</el-col>
|
<el-col :span="2"><el-text>铝条方式：</el-text></el-col>
|
<el-col :span="2">
|
<el-select clearable placeholder=" " >
|
<el-option/>
|
</el-select>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="2"><el-text>总金额：</el-text></el-col>
|
<el-col :span="2"><el-text /></el-col>
|
|
<el-col :span="2"><el-text>合同编号：</el-text></el-col>
|
<el-col :span="2"><el-input/></el-col>
|
<el-col :span="2"><el-text>客户批次：</el-text></el-col>
|
<el-col :span="2"><el-text /></el-col>
|
<el-col :span="2"><el-text>联系人：</el-text></el-col>
|
<el-col :span="2"><el-input/></el-col>
|
<el-col :span="2"><el-text>联系电话：</el-text></el-col>
|
<el-col :span="2"><el-input/></el-col>
|
<el-col :span="2"><el-text>送货地址：</el-text></el-col>
|
<el-col :span="2"><el-input/></el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="2"><el-text>其他金额：</el-text></el-col>
|
<el-col :span="2"><el-text /></el-col>
|
<el-col :span="2"><el-text>其他金额备注：</el-text></el-col>
|
<el-col :span="2"><el-text /></el-col>
|
|
</el-row>
|
</div>
|
<div class="order-detail">
|
<vxe-grid
|
max-height="97%"
|
class="mytable-scrollbar"
|
ref="xGrid"
|
v-bind="gridOptions"
|
v-on="gridEvents"
|
>
|
<template #num1_filter="{ column, $panel }">
|
<div>
|
<div v-for="(option, index) in column.filters" :key="index">
|
<input type="type" v-model="option.data" @input="changeFilterEvent($event, option, $panel)"/>
|
</div>
|
</div>
|
</template>
|
</vxe-grid>
|
</div>
|
</div>
|
</template>
|
|
<style scoped>
|
.main-div {
|
width: 100%;
|
height: 100%;
|
text-align: center;
|
}
|
.el-col{
|
border: #181818 1px solid;
|
}
|
:deep(.el-input__wrapper) {
|
box-shadow: 0 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset;
|
cursor: default;
|
border: none !important;
|
background-color: transparent;
|
}
|
.order-primary{
|
width: 100%;
|
}
|
.order-detail{
|
width: 100%;
|
height: 80%;
|
}
|
|
</style>
|
