<template>
|
<el-header height="auto">
|
|
|
</el-header>
|
|
<el-main style="padding-top: 5px;height:100%">
|
|
<!-- 创建表头模拟样式一-->
|
<div>创建表头类一</div>
|
<el-form label-width="100px" :inline="true" :model="formInline" class="demo-form-inline">
|
<div class="order-primary" style="background-color: white; border: #181818 1px solid">
|
<el-row>
|
<el-col class="elcolStyle" :span="2">
|
<el-text>*项目名称：</el-text>
|
</el-col>
|
<el-col class="elcolStyle" :span="2">
|
<el-input/>
|
</el-col>
|
<el-col class="elcolStyle" :span="2">
|
<el-text>*客户选择：</el-text>
|
</el-col>
|
<el-col class="elcolStyle" :span="2">
|
<el-select clearable placeholder=" ">
|
<el-option/>
|
</el-select>
|
</el-col>
|
<el-col class="elcolStyle" :span="2">
|
<el-text>*订单类型：</el-text>
|
</el-col>
|
<el-col class="elcolStyle" :span="2">
|
<el-select clearable placeholder=" ">
|
<el-option/>
|
</el-select>
|
</el-col>
|
<el-col class="elcolStyle" :span="2">
|
<el-text>订单分类：</el-text>
|
</el-col>
|
<el-col class="elcolStyle" :span="2">
|
<el-select clearable placeholder=" ">
|
<el-option/>
|
</el-select>
|
</el-col>
|
<el-col class="elcolStyle" :span="2">
|
<el-text>商标选项：</el-text>
|
</el-col>
|
<el-col class="elcolStyle" :span="2">
|
<el-select clearable placeholder=" ">
|
<el-option/>
|
</el-select>
|
</el-col>
|
<el-col class="elcolStyle" :span="2">
|
<el-text>包装方式：</el-text>
|
</el-col>
|
<el-col class="elcolStyle" :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 class="elcolStyle" :span="2">
|
<el-text>销售单号：</el-text>
|
</el-col>
|
<el-col class="elcolStyle" :span="2">
|
<el-text/>
|
</el-col>
|
<el-col class="elcolStyle" :span="2">
|
<el-text>交货日期：</el-text>
|
</el-col>
|
<el-col class="elcolStyle" :span="2">
|
<el-date-picker
|
type="week"
|
format="[Week] ww"
|
placeholder="选择日期" style="width: 100%"/>
|
</el-col>
|
<el-col class="elcolStyle" :span="2">
|
<el-text>批次：</el-text>
|
</el-col>
|
<el-col class="elcolStyle" :span="2">
|
<el-input/>
|
</el-col>
|
<el-col class="elcolStyle" :span="2">
|
<el-text>计算方式：</el-text>
|
</el-col>
|
<el-col class="elcolStyle" :span="2">
|
<el-select clearable placeholder=" ">
|
<el-option/>
|
</el-select>
|
</el-col>
|
<el-col class="elcolStyle" :span="2">
|
<el-text>*业务员：</el-text>
|
</el-col>
|
<el-col class="elcolStyle" :span="2">
|
<el-select clearable placeholder=" ">
|
<el-option/>
|
</el-select>
|
</el-col>
|
<el-col class="elcolStyle" :span="2">
|
<el-text>铝条方式：</el-text>
|
</el-col>
|
<el-col class="elcolStyle" :span="2">
|
<el-select clearable placeholder=" ">
|
<el-option/>
|
</el-select>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col class="elcolStyle" :span="2">
|
<el-text>总金额：</el-text>
|
</el-col>
|
<el-col class="elcolStyle" :span="2">
|
<el-text/>
|
</el-col>
|
|
<el-col class="elcolStyle" :span="2">
|
<el-text>合同编号：</el-text>
|
</el-col>
|
<el-col class="elcolStyle" :span="2">
|
<el-input/>
|
</el-col>
|
<el-col class="elcolStyle" :span="2">
|
<el-text>客户批次：</el-text>
|
</el-col>
|
<el-col class="elcolStyle" :span="2">
|
<el-text/>
|
</el-col>
|
<el-col class="elcolStyle" :span="2">
|
<el-text>联系人：</el-text>
|
</el-col>
|
<el-col class="elcolStyle" :span="2">
|
<el-input/>
|
</el-col>
|
<el-col class="elcolStyle" :span="2">
|
<el-text>联系电话：</el-text>
|
</el-col>
|
<el-col class="elcolStyle" :span="2">
|
<el-input/>
|
</el-col>
|
<el-col class="elcolStyle" :span="2">
|
<el-text>送货地址：</el-text>
|
</el-col>
|
<el-col class="elcolStyle" :span="2">
|
<el-input/>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col class="elcolStyle" :span="2">
|
<el-text>其他金额：</el-text>
|
</el-col>
|
<el-col class="elcolStyle" :span="2">
|
<el-text/>
|
</el-col>
|
<el-col class="elcolStyle" :span="2">
|
<el-text>其他金额备注：</el-text>
|
</el-col>
|
<el-col class="elcolStyle" :span="2">
|
<el-text/>
|
</el-col>
|
|
</el-row>
|
</div>
|
</el-form>
|
|
<br/>
|
<div>创建表头类二</div>
|
<!-- 创建表头模拟样式二-->
|
<!-- <el-form label-width="80px" :inline="true" :model="formInline2" class="demo-form-inline">-->
|
<div class="header2">
|
<el-row :gutter="10" style="height: 35px">
|
<el-col :span="4">
|
<el-form-item label="项目名称" class="item-style">
|
<el-input></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="4">
|
<el-form-item label="客户选择" class="item-style" prop="name">
|
<el-select v-model="cgBuMen" class="m-2" placeholder="选择采购部门" clearable>
|
<el-option
|
v-for="item in CGBuMenOptions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="4">
|
<el-form-item label="订单类型" class="item-style">
|
<el-cascader
|
placeholder="订单类型"
|
:options="buyerOptions"
|
filterable
|
clearable
|
empty-text="empty-text"
|
:v-model="form.supplier"
|
>
|
</el-cascader>
|
</el-form-item>
|
</el-col>
|
<el-col :span="4">
|
<el-form-item label="订单分类" class="item-style">
|
<el-select v-model="form.buyer" class="m-2" placeholder="订单分类" clearable>
|
<el-option
|
v-for="item in BuyerOptions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="4">
|
<el-form-item label="商品选项" class="item-style">
|
<el-select v-model="form.buyer" class="m-2" placeholder="商品选项" clearable>
|
<el-option
|
v-for="item in BuyerOptions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="4">
|
<el-form-item label="包装方式" class="item-style">
|
<el-select v-model="form.buyer" class="m-2" placeholder="包装方式" clearable>
|
<el-option
|
v-for="item in BuyerOptions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="10" style="height: 35px">
|
<el-col :span="4">
|
<el-form-item label="销售单号" class="item-style">
|
<el-input></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="4">
|
<el-form-item label="交货日期" class="item-style">
|
<el-date-picker
|
type="week"
|
format="[Week] ww"
|
placeholder="选择日期" style="width: 100%"/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="4">
|
<el-form-item label="订单批次" class="item-style">
|
<el-input></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="4">
|
<el-form-item label="计算方式" class="item-style">
|
<el-select v-model="form.buyer" class="m-2" placeholder="计算方式" clearable>
|
<el-option
|
v-for="item in BuyerOptions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="4">
|
<el-form-item label="业务员" class="item-style">
|
<el-select v-model="form.buyer" class="m-2" placeholder="业务员" clearable>
|
<el-option
|
v-for="item in BuyerOptions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="4">
|
<el-form-item label="铝条方式" class="item-style">
|
<el-select v-model="form.buyer" class="m-2" placeholder="铝条方式" clearable>
|
<el-option
|
v-for="item in BuyerOptions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="10" style="height: 35px">
|
<el-col :span="4">
|
<el-form-item label="总金额" class="item-style">
|
<el-input></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="4">
|
<el-form-item label="合同编号" class="item-style">
|
<el-input></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="4">
|
<el-form-item label="客户批次" class="item-style">
|
<el-input></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="4">
|
<el-form-item label="联系人" class="item-style">
|
<el-input></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="4">
|
<el-form-item label="联系电话" class="item-style">
|
<el-input></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="4">
|
<el-form-item label="送货地址" class="item-style">
|
<el-input></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="10" style="height: 35px">
|
<el-col :span="4">
|
<el-form-item label="其他金额" class="item-style">
|
<el-input></el-input>
|
</el-form-item>
|
</el-col>
|
<!-- <el-col :span="4">
|
<span>其他金额备注</span>
|
<el-input ></el-input>
|
</el-col>-->
|
<el-col :span="4">
|
<el-form-item label="其他金额备注" class="item-style">
|
<el-input></el-input>
|
</el-form-item>
|
</el-col>
|
|
</el-row>
|
|
</div>
|
<!-- </el-form>-->
|
|
<!-- 创建表头模拟样式三-->
|
<br/>
|
<div>创建表头类三</div>
|
<!-- <el-form label-width="100px" :inline="true" :model="formInline3" class="demo-form-inline">-->
|
<el-descriptions
|
class="margin-top"
|
title=""
|
:column="6"
|
:size="'small'"
|
border
|
>
|
|
<el-descriptions-item>
|
<template #label>
|
<span style="color:red">*</span>
|
项目名称
|
</template>
|
<el-input></el-input>
|
</el-descriptions-item>
|
<el-descriptions-item>
|
<template #label>
|
<span style="color:red">*</span>
|
客户选择
|
</template>
|
<el-select></el-select>
|
|
</el-descriptions-item>
|
<el-descriptions-item>
|
<template #label>
|
<span style="color:red">*</span>
|
订单类型
|
</template>
|
<el-select></el-select>
|
</el-descriptions-item>
|
<el-descriptions-item>
|
<template #label>
|
<span style="color:red">*</span>
|
订单分类
|
</template>
|
<el-select></el-select>
|
</el-descriptions-item>
|
<el-descriptions-item>
|
<template #label>
|
<span style="color:red">*</span>
|
商标选项
|
</template>
|
<el-select></el-select>
|
</el-descriptions-item>
|
<el-descriptions-item>
|
<template #label>
|
<span style="color:red">*</span>
|
包装方式
|
</template>
|
<el-select></el-select>
|
</el-descriptions-item>
|
<el-descriptions-item>
|
<template #label>
|
<span style="color:red">*</span>
|
销售单号
|
</template>
|
<el-input></el-input>
|
</el-descriptions-item>
|
<el-descriptions-item>
|
<template #label>
|
<span style="color:red">*</span>
|
交货日期
|
</template>
|
<el-date-picker
|
type="week"
|
format="[Week] ww"
|
placeholder="选择日期" style="width: 100%"/>
|
</el-descriptions-item>
|
<el-descriptions-item>
|
<template #label>
|
<span style="color:red">*</span>
|
批次
|
</template>
|
<el-input></el-input>
|
</el-descriptions-item>
|
<el-descriptions-item>
|
<template #label>
|
<span style="color:red">*</span>
|
计算方式
|
</template>
|
<el-select></el-select>
|
</el-descriptions-item>
|
<el-descriptions-item>
|
<template #label>
|
<span style="color:red">*</span>
|
业务员
|
</template>
|
<el-select></el-select>
|
</el-descriptions-item>
|
<el-descriptions-item>
|
<template #label>
|
铝条方式
|
</template>
|
<el-select></el-select>
|
</el-descriptions-item>
|
<el-descriptions-item>
|
<template #label>
|
总金额
|
</template>
|
<el-input></el-input>
|
</el-descriptions-item>
|
<el-descriptions-item>
|
<template #label>
|
合同编号
|
</template>
|
<el-input></el-input>
|
</el-descriptions-item>
|
<el-descriptions-item>
|
<template #label>
|
客户批次
|
</template>
|
<el-input></el-input>
|
</el-descriptions-item>
|
<el-descriptions-item>
|
<template #label>
|
联系人
|
</template>
|
<el-input></el-input>
|
</el-descriptions-item>
|
<el-descriptions-item>
|
<template #label>
|
联系电话
|
</template>
|
<el-input></el-input>
|
</el-descriptions-item>
|
<el-descriptions-item>
|
<template #label>
|
送货地址
|
</template>
|
<el-input></el-input>
|
</el-descriptions-item>
|
<el-descriptions-item>
|
<template #label>
|
|
其他金额
|
</template>
|
<el-input></el-input>
|
</el-descriptions-item>
|
<el-descriptions-item>
|
<template #label>
|
其他金额备注
|
</template>
|
<el-input />
|
</el-descriptions-item>
|
|
<el-descriptions-item></el-descriptions-item>
|
<!-- <el-descriptions-item></el-descriptions-item>
|
<el-descriptions-item></el-descriptions-item>
|
<el-descriptions-item></el-descriptions-item>
|
<el-descriptions-item></el-descriptions-item>-->
|
</el-descriptions>
|
|
<!-- </el-form>-->
|
</el-main>
|
|
</template>
|
|
<script setup>
|
import {ref, reactive} from 'vue'
|
|
let router = useRouter()
|
|
|
const openAlert = (options) => {
|
if (options.type === 'message') {
|
VXETable.modal.message(options)
|
} else {
|
VXETable.modal.alert(options)
|
}
|
|
}
|
|
|
const form = reactive({
|
name: '',
|
region: '',
|
date: '',
|
delivery: false,
|
type: [],
|
resource: '',
|
desc: '',
|
supplier: '',
|
buyer: '',
|
buyItem: '',
|
buyType: ''
|
|
})
|
|
const onSubmit = () => {
|
console.log('submit!')
|
}
|
|
//供应商
|
const buyerOptions = [
|
{value: '0', label: '供应商1'},
|
{value: '1', label: '供应商2'},
|
{value: '2', label: '供应商3'},
|
{value: '3', label: '供应商4'},
|
{value: '4', label: '供应商5'},
|
{value: '5', label: '供应商6'},
|
]
|
|
|
const value = ref('')
|
const cgBuMen = ref('')
|
|
//采购类型
|
const CGTypeOptions = [
|
{
|
value: '1',
|
label: '标准类型',
|
},
|
{
|
value: '2',
|
label: '非标准类型',
|
},
|
{
|
value: '3',
|
label: '追加采购',
|
},
|
|
]
|
|
//采购部门
|
const CGBuMenOptions = [
|
{
|
value: '0',
|
label: '采购华北部',
|
},
|
{
|
value: '1',
|
label: '采购东南部',
|
},
|
{
|
value: '2',
|
label: '采购西北部',
|
},
|
{
|
value: '3',
|
label: '采购中原部',
|
},
|
{
|
value: '4',
|
label: '采购外国部',
|
},
|
|
]
|
|
//采购人
|
const BuyerOptions = [
|
{
|
value: '0',
|
label: '采购员1',
|
},
|
{
|
value: '1',
|
label: '采购员2',
|
},
|
{
|
value: '2',
|
label: '采购员3',
|
},
|
{
|
value: '3',
|
label: '采购员4',
|
},
|
{
|
value: '4',
|
label: '采购员5',
|
},
|
|
]
|
|
import dayjs from 'dayjs'
|
import {VXETable} from "vxe-table";
|
import {useRouter} from "vue-router";
|
import {User} from "@element-plus/icons-vue";
|
|
const now = new Date()
|
|
const tableData = ref([
|
{
|
wlcode: '202312205101',
|
wlname: '这是一个物料名称',
|
cd: '产地12',
|
hd: '8',
|
gd: '2440',
|
kd: '3660',
|
xh: 'CN10P'
|
},
|
{
|
wlcode: '202312305101',
|
wlname: '这是一个物料名称',
|
cd: '产地1',
|
gd: '2440',
|
kd: '3660',
|
hd: '5',
|
xh: 'CN10P'
|
},
|
{
|
wlcode: '202312405101',
|
wlname: '这是一个物料名称',
|
cd: '产地13',
|
hd: '12',
|
gd: '2440',
|
kd: '3660',
|
xh: 'CN10P'
|
},
|
])
|
|
|
const onAddItem = () => {
|
now.setDate(now.getDate() + 1)
|
tableData.value.push({
|
wlcode: dayjs(now).format('YYYYMMDDss') + '01',
|
wlname: '这是一个物料名称',
|
cd: '产地1',
|
hd: '6',
|
xh: 'CN10P',
|
gd: '2440',
|
kd: '3660',
|
})
|
}
|
|
|
</script>
|
|
|
<style scoped>
|
.custom-header {
|
.el-checkbox {
|
display: flex;
|
height: unset;
|
}
|
}
|
|
.item-style {
|
width: 92%;
|
}
|
|
|
.main-div {
|
width: 100%;
|
height: 100%;
|
text-align: center;
|
}
|
|
/*.el-col{
|
border: #181818 1px solid;
|
}*/
|
|
.elcolStyle {
|
border: #181818 1px solid;
|
}
|
|
header2 :deep(.el-col) {
|
padding: 0;
|
margin: 0;
|
//height: 35px; color: red;
|
|
}
|
|
order-primary :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%;
|
}
|
|
/*.cell-item {
|
display: flex;
|
align-items: center;
|
}*/
|
|
:deep(.el-descriptions__label) {
|
width: 90px;
|
text-align: center;
|
}
|
</style>
|
