JNDemo/target/classes/templates/zmquotation/index.html

614 lines
26 KiB
HTML
Raw Normal View History

2024-01-18 13:05:55 +08:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>报价</title>
<meta name="author" content="JIAL">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="HandheldFriendly" content="true">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<link rel="icon" href="/static/image/JNlogo.png" type="image/x-icon">
<link rel="stylesheet" href="/plugins/element-ui/index.css">
<!-- import CSS -->
<link rel="stylesheet" href="/static/zmquotation/css/index.css">
</head>
<body>
<div class="container" id="index-app">
<div class="center-container">
<div class="form-box">
2024-02-18 09:42:08 +08:00
<el-form label-width="45%" :model="formLabelAlign">
2024-01-18 13:05:55 +08:00
<el-row>
2024-01-25 13:25:57 +08:00
<el-col :span="6">
2024-02-17 12:34:00 +08:00
<el-form-item label="加工费" title="蒸汽费/钢丝铠装材料及加工费">
2024-01-30 16:03:30 +08:00
<el-input v-model="formLabelAlign.processingFee" placeholder="蒸汽费/钢丝铠装材料及加工费">
2024-01-25 13:25:57 +08:00
<template slot="append">%</template>
</el-input>
2024-01-18 13:05:55 +08:00
</el-form-item>
</el-col >
2024-01-25 13:25:57 +08:00
<el-col :span="6">
<el-form-item label="生产财务成本" title="生产财务成本">
2024-01-30 16:03:30 +08:00
<el-input v-model="formLabelAlign.prodFinancialCost" placeholder="生产财务成本">
2024-01-25 13:25:57 +08:00
<template slot="append">%</template>
</el-input>
2024-01-18 13:05:55 +08:00
</el-form-item>
</el-col>
2024-01-25 13:25:57 +08:00
<el-col :span="6">
2024-02-18 09:42:08 +08:00
<el-form-item label="额外账期" title="额外账期">
2024-01-30 16:03:30 +08:00
<el-input v-model="formLabelAlign.accountPeriod" placeholder="账期">
<template slot="append">%</template>
</el-input>
2024-01-18 13:05:55 +08:00
</el-form-item>
</el-col>
2024-01-25 13:25:57 +08:00
<el-col :span="6">
<el-form-item label="承兑" title="承兑">
2024-01-30 16:03:30 +08:00
<el-input v-model="formLabelAlign.acceptance" placeholder="承兑">
<template slot="append">%</template>
</el-input>
2024-01-18 13:05:55 +08:00
</el-form-item>
</el-col>
</el-row>
<el-row>
2024-01-25 13:25:57 +08:00
<el-col :span="6">
<el-form-item label="公司管理成本" title="公司管理成本">
2024-01-30 16:03:30 +08:00
<el-input v-model="formLabelAlign.companyMgmtCost" placeholder="公司管理成本">
<template slot="append">%</template>
</el-input>
2024-01-25 13:25:57 +08:00
</el-form-item>
</el-col >
<el-col :span="6">
<el-form-item label="中标服务费" title="中标服务费">
2024-01-30 16:03:30 +08:00
<el-input v-model="formLabelAlign.bidServiceFee" placeholder="中标服务费">
2024-01-25 13:25:57 +08:00
<template slot="append">%</template>
</el-input>
2024-01-19 16:40:15 +08:00
</el-form-item>
</el-col>
2024-01-25 13:25:57 +08:00
<el-col :span="6">
<el-form-item label="公司净利润" title="公司净利润">
2024-01-30 16:03:30 +08:00
<el-input v-model="formLabelAlign.netProfit" placeholder="公司净利润">
<template slot="append">%</template>
</el-input>
2024-01-19 16:40:15 +08:00
</el-form-item>
2024-01-18 13:05:55 +08:00
</el-col>
2024-01-25 13:25:57 +08:00
<el-col :span="6">
2024-01-30 16:03:30 +08:00
<el-form-item label="业务费" title="业务费">
<el-input v-model="formLabelAlign.businessFee" placeholder="业务费">
<template slot="append">%</template>
</el-input>
2024-01-18 13:05:55 +08:00
</el-form-item>
</el-col>
</el-row>
2024-01-25 13:25:57 +08:00
<el-row>
<el-col :span="6">
<el-form-item label="省">
2024-01-30 16:03:30 +08:00
<el-input :disabled="true" v-model="formLabelAlign.province" placeholder="省"></el-input>
2024-01-25 13:25:57 +08:00
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="市">
2024-01-30 16:03:30 +08:00
<el-input :disabled="true" v-model="formLabelAlign.city" placeholder="市"></el-input>
2024-01-25 13:25:57 +08:00
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="区">
2024-01-30 16:03:30 +08:00
<el-input :disabled="true" v-model="formLabelAlign.district" placeholder="区"></el-input>
2024-01-25 13:25:57 +08:00
</el-form-item>
</el-col>
<el-col :span="6" >
2024-01-30 16:03:30 +08:00
<el-form-item label="公里数">
<el-input v-model="formLabelAlign.kilometers" placeholder="公里数">
<template slot="append">KM</template>
</el-input>
2024-01-25 13:25:57 +08:00
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
2024-02-18 09:42:08 +08:00
<el-form-item label="可下浮点数" title="可下浮点数">
2024-01-30 16:03:30 +08:00
<el-input v-model="formLabelAlign.canFloat" placeholder="可下浮">
<template slot="append">%</template>
</el-input>
2024-01-25 13:25:57 +08:00
</el-form-item>
</el-col>
2024-02-18 09:42:08 +08:00
<el-col :span="6" >
<el-form-item label="运费">
<el-input v-model="formLabelAlign.freight" placeholder="运费">
<template slot="append"></template>
2024-01-30 16:03:30 +08:00
</el-input>
2024-01-25 13:25:57 +08:00
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
2024-02-18 09:42:08 +08:00
<el-form-item label="净重合计" title="净重合计">
<el-input v-model="formLabelAlign.netWeightTotal" placeholder="净重合计">
<template slot="append">KG</template>
2024-01-30 16:03:30 +08:00
</el-input>
2024-01-25 13:25:57 +08:00
</el-form-item>
</el-col >
<el-col :span="6">
2024-02-18 09:42:08 +08:00
<el-form-item label="重量合计" title="重量合计">
<el-input v-model="formLabelAlign.weightTotal" placeholder="重量合计">
<template slot="append">KG</template>
2024-01-30 16:03:30 +08:00
</el-input>
2024-01-25 13:25:57 +08:00
</el-form-item>
</el-col>
2024-02-18 09:42:08 +08:00
<el-col :span="6" >
<el-form-item label="厂价金额合计" title="厂价金额合计">
<el-input v-model="formLabelAlign.totalFactoryAmount" placeholder="厂价金额合计">
2024-01-30 16:03:30 +08:00
<template slot="append"></template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="6" >
2024-02-18 09:42:08 +08:00
<el-form-item label="实际金额合计" title="实际金额合计">
<el-input v-model="formLabelAlign.totalActualAmount" placeholder="实际金额合计">
2024-01-30 16:03:30 +08:00
<template slot="append"></template>
</el-input>
2024-01-25 13:25:57 +08:00
</el-form-item>
</el-col>
</el-row>
2024-01-18 13:05:55 +08:00
</el-form>
</div>
2024-01-25 13:25:57 +08:00
<div class="button-box">
2024-02-19 14:38:00 +08:00
<el-button type="text" @click="selectedRegion">选择地区</el-button>
2024-02-20 13:39:33 +08:00
<el-button type="text" @click="addMaterial">添加物料</el-button>
2024-01-25 13:25:57 +08:00
<el-button type="text">刷新界面</el-button>
2024-01-30 16:03:30 +08:00
<el-button type="text"></el-button>
2024-01-25 13:25:57 +08:00
</div>
2024-01-18 13:05:55 +08:00
<div class="table-box">
<el-table
2024-02-24 08:54:55 +08:00
:data="materialData"
2024-02-18 09:42:08 +08:00
border
:cell-style="cellStyle"
:header-cell-style="{ background: '#eef1f6', color: '#606266', 'text-align': 'center' }">
<el-table-column
fixed
label="编号"
type="index"
width="50">
</el-table-column>
<el-table-column
2024-01-18 13:05:55 +08:00
fixed
width="180"
2024-02-24 08:54:55 +08:00
prop="materialName"
2024-02-20 13:39:33 +08:00
label="物料名称">
2024-02-18 09:42:08 +08:00
</el-table-column>
<el-table-column
2024-01-18 13:05:55 +08:00
width="180"
2024-02-24 08:54:55 +08:00
prop="quantity"
2024-02-18 09:42:08 +08:00
label="数量">
<template slot-scope="scope">
2024-02-24 08:54:55 +08:00
<el-input v-model="scope.row.quantity" >
2024-02-18 09:42:08 +08:00
</el-input>
</template>
</el-table-column>
<el-table-column
2024-01-18 13:05:55 +08:00
width="180"
2024-02-24 08:54:55 +08:00
prop="voltage"
2024-02-18 09:42:08 +08:00
label="电压">
</el-table-column>
<el-table-column
2024-01-18 13:05:55 +08:00
width="180"
2024-02-24 08:54:55 +08:00
prop="standard"
2024-02-18 09:42:08 +08:00
label="标准">
</el-table-column>
<el-table-column
2024-01-18 13:05:55 +08:00
width="180"
2024-02-24 08:54:55 +08:00
prop="core"
label="线芯">
2024-02-18 09:42:08 +08:00
</el-table-column>
<el-table-column
2024-01-18 13:05:55 +08:00
width="180"
2024-02-24 08:54:55 +08:00
prop="costPrice"
2024-02-18 09:42:08 +08:00
label="成本价">
</el-table-column>
<el-table-column
2024-01-18 13:05:55 +08:00
width="180"
2024-02-24 08:54:55 +08:00
prop="factoryPrice"
2024-02-18 09:42:08 +08:00
label="厂价">
</el-table-column>
<el-table-column
width="180"
2024-02-24 08:54:55 +08:00
prop="netVolume"
2024-02-18 09:42:08 +08:00
label="净量">
</el-table-column>
<el-table-column
width="180"
2024-02-24 08:54:55 +08:00
prop="inventory"
2024-02-18 09:42:08 +08:00
label="盘具">
<template slot-scope="scope">
2024-02-24 08:54:55 +08:00
<el-input v-model="scope.row.inventory" >
2024-02-18 09:42:08 +08:00
</el-input>
</template>
</el-table-column>
<el-table-column
2024-01-18 13:05:55 +08:00
width="180"
2024-02-24 08:54:55 +08:00
prop="weighInv"
2024-02-18 09:42:08 +08:00
label="盘重">
</el-table-column>
<el-table-column
width="180"
2024-02-24 08:54:55 +08:00
prop="totalWeight"
2024-02-18 09:42:08 +08:00
label="总重">
</el-table-column>
<el-table-column
fixed="right"
width="120"
2024-02-24 08:54:55 +08:00
prop="totalCost"
2024-02-18 09:42:08 +08:00
label="总成本">
</el-table-column>
<el-table-column
fixed="right"
width="120"
2024-02-24 08:54:55 +08:00
prop="totalFacPrice"
2024-02-18 09:42:08 +08:00
label="总厂价">
</el-table-column>
<el-table-column
fixed="right"
width="120"
2024-02-24 08:54:55 +08:00
prop="totalNetWt"
2024-02-18 09:42:08 +08:00
label="总净重">
</el-table-column>
<el-table-column
2024-01-18 13:05:55 +08:00
fixed="right"
2024-01-30 16:03:30 +08:00
width="80"
2024-01-18 13:05:55 +08:00
label="操作">
2024-02-18 09:42:08 +08:00
<template slot-scope="scope">
<el-button @click="handleDeleteClick(scope.row)" style="color: red;" type="text">删除</el-button>
</template>
</el-table-column>
2024-01-18 13:05:55 +08:00
</el-table>
</div>
</div>
2024-02-24 08:54:55 +08:00
<el-dialog class="regionDialogTable" :visible.sync="dialogRegionVisible" width="932px" >
2024-02-19 14:38:00 +08:00
<div slot="title" class="regionTable-title" style="margin: 0px">
<el-form>
<el-form-item >
<el-input style="width: 300px; " v-model="regionName" placeholder="请输入地区名称">
</el-input>
<el-button type="primary" size="small" @click="searchRegion">查询地区</el-button>
</el-form-item>
</el-form>
</div>
2024-02-24 08:54:55 +08:00
<div>
<el-table
:data="getCurrentRegionData"
:header-cell-style="{ background: '#eef1f6', color: '#606266', 'text-align': 'center', 'padding': '0px'}"
:cell-style="{'text-align': 'center', 'padding': '0px'}"
highlight-current-row
border>
2024-02-19 14:38:00 +08:00
<el-table-column
2024-02-24 08:54:55 +08:00
label="序号"
type="index"
width="50">
2024-02-19 14:38:00 +08:00
</el-table-column>
<el-table-column
2024-02-24 08:54:55 +08:00
width="180"
prop="province"
label="省">
2024-02-19 14:38:00 +08:00
</el-table-column>
<el-table-column
2024-02-24 08:54:55 +08:00
width="180"
prop="city"
label="市">
2024-02-19 14:38:00 +08:00
</el-table-column>
<el-table-column
2024-02-24 08:54:55 +08:00
width="200"
prop="district"
label="区">
2024-02-19 14:38:00 +08:00
</el-table-column>
<el-table-column
2024-02-24 08:54:55 +08:00
width="200"
prop="kilometers"
label="公里数">
2024-02-19 14:38:00 +08:00
</el-table-column>
<el-table-column
width="80"
label="操作">
<template slot-scope="scope">
<el-button @click="chooseRegion(scope.row)" style="color: blue;" type="text">选择</el-button>
</template>
</el-table-column>
2024-02-24 08:54:55 +08:00
</el-table>
</div>
2024-02-19 14:38:00 +08:00
<div style="text-align: center; margin-top: 10px;">
<el-pagination
@size-change="handleRegionSizeChange"
@current-change="handleRegionCurrentChange"
:current-page.sync="regionCurrentPage"
:page-sizes="[10, 20, 30, 40]"
:page-size="pageSize"
:total="regionTableData.length"
></el-pagination>
</div>
</el-dialog>
2024-02-20 13:39:33 +08:00
<el-dialog class="materialDialogTable" :visible.sync="dialogMaterialVisible" width="1300px">
<div slot="title" class="regionTable-title" style="margin: 0px">
<el-form>
<el-form-item >
<el-input style="width: 200px; " v-model="regionName" placeholder="开头精确查询">
</el-input>
<el-input style="width: 200px; " v-model="regionName" placeholder="模糊查询">
</el-input>
<el-input style="width: 200px; " v-model="regionName" placeholder="结尾精确查询">
</el-input>
<el-button type="primary" size="small" @click="searchRegion">查询物料</el-button>
</el-form-item>
</el-form>
</div>
2024-02-24 08:54:55 +08:00
<div style="display: flex; flex-direction: row;">
<div style="width: 866px">
<el-table
:data="materialTableData"
ref="materialTable"
@selection-change="handleSelectionChange"
:header-cell-style="{ background: '#eef1f6', color: '#606266', 'text-align': 'center', 'padding': '0px'}"
:cell-style="{'text-align': 'center', 'padding': '5px 0px'}"
highlight-selection-row
border>
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
label="序号"
type="index"
width="50">
</el-table-column>
<el-table-column
width="200"
prop="materialName"
label="物料名称">
</el-table-column>
<el-table-column
width="120"
prop="model"
label="型号">
</el-table-column>
<el-table-column
width="120"
prop="specification"
label="规格">
</el-table-column>
<el-table-column
width="120"
prop="voltage"
label="电压">
</el-table-column>
<el-table-column
width="100"
prop="standard"
label="标准">
</el-table-column>
<el-table-column
width="100"
prop="core"
label="线芯">
</el-table-column>
</el-table>
</div>
<div style="flex-grow: 1; padding-left: 20px;">
<div
v-for="(selectedItem, index) in selectedMaterialItems"
:key="index"
class="selected-item"
>
{{ selectedItem.materialName }} - {{ selectedItem.voltage }}
<el-button @click="removeSelectedItem(selectedItem)" type="text" class="remove-btn">&#10006;</el-button>
</div>
</div>
</div>
<div style="text-align: center; padding-top: 20px">
<el-button-group>
<el-button type="primary" size="small" style="margin-right: 80px" @click="addMaterialToTable">确认</el-button>
<el-button type="warning" size="small" @click="closeMaterialDialog">取消</el-button>
</el-button-group>
2024-02-20 13:39:33 +08:00
</div>
</el-dialog>
2024-01-18 13:05:55 +08:00
</div>
<script src="/plugins/vue/vue.js"></script>
<script src="/plugins/element-ui/index.js"></script>
<script src="/plugins/calendar/calendar.js"></script>
<script src="/plugins/axios/axios.min.js"></script>
<script src="/plugins/axios/request.js"></script>
<!-- import Script -->
<script src="/static/zmquotation/js/index.js"></script>
<script>
new Vue({
el: '#index-app',
data() {
return {
formLabelAlign: {
2024-01-30 16:03:30 +08:00
processingFee: '0.60', /*蒸汽费/钢丝铠装材料及加工费*/
prodFinancialCost: '0.40', /*生产财务成本*/
accountPeriod: '1.20', /*账期*/
acceptance: '0.90', /*承兑*/
companyMgmtCost: '1.50', /*公司管理成本*/
bidServiceFee: '0.44', /*中标服务费*/
netProfit: '3.00', /*公司净利润*/
businessFee: '2.00', /*业务费*/
province: '', /*省*/
city: '', /*市*/
district: '', /*区*/
freight: '', /*运费*/
2024-02-18 09:42:08 +08:00
canFloat: '', /*可下浮点数*/
2024-01-30 16:03:30 +08:00
kilometers: '', /*公里数*/
2024-02-18 09:42:08 +08:00
netWeightTotal: '', /*净重合计*/
weightTotal: '', /*重量合计*/
totalFactoryAmount: '', /*厂价金额合计*/
totalActualAmount: '', /*实际金额合计*/
2024-01-18 13:05:55 +08:00
},
2024-02-24 08:54:55 +08:00
materialData: [
],
regionTableData: [
{
province: '浙江',
city: '杭州',
district: '西湖区',
kilometers: 10
},
{
province: '上海',
city: '上海',
district: '黄浦区',
kilometers: 20
},
2024-01-18 13:05:55 +08:00
],
2024-02-19 14:38:00 +08:00
price_0t_5t: '',
price_5t_10t: '',
price_10t_25t: '',
price_25t_100t: '',
price_100t: '',
dialogRegionVisible: false,
regionName: '',
regionCurrentPage: 1,
pageSize: 10,
2024-02-20 13:39:33 +08:00
dialogMaterialVisible: false,
2024-02-24 08:54:55 +08:00
materialTableData: [
2024-02-20 13:39:33 +08:00
{
materialName: 'Material 1',
model: 'Model A',
district: 'Spec 1',
voltage: '220V',
standard: 'Standard 1',
core: 'Core X'
},
{
materialName: 'Material 2',
model: 'Model B',
district: 'Spec 2',
voltage: '110V',
standard: 'Standard 2',
core: 'Core Y'
},
// Add more data as needed
2024-02-24 08:54:55 +08:00
],
selectedMaterialItems: [], // 选中的数据
2024-01-18 13:05:55 +08:00
}
},
computed: {
2024-02-19 14:38:00 +08:00
getCurrentRegionData() {
const start = (this.regionCurrentPage - 1) * this.pageSize;
const end = start + this.pageSize;
return this.regionTableData.slice(start, end);
},
2024-02-20 13:39:33 +08:00
getCurrentMaterialData(){
},
2024-01-18 13:05:55 +08:00
},
created() {
},
mounted() {
2024-01-25 13:25:57 +08:00
2024-01-18 13:05:55 +08:00
},
methods: {
async init () {
},
2024-01-30 16:03:30 +08:00
cellStyle({row, column, rowIndex, columnIndex}) {
if(columnIndex === 0) {
2024-02-20 13:39:33 +08:00
return 'color : black; text-align : center; background : #E0E0E0; padding: 0px';
2024-01-30 16:03:30 +08:00
} else if (columnIndex === 8) {
2024-02-20 13:39:33 +08:00
return 'text-align : center; background : #F5F5F5; padding: 0px';
2024-01-30 16:03:30 +08:00
} else {
2024-02-20 13:39:33 +08:00
return ' text-align : center; padding: 0px';
2024-01-30 16:03:30 +08:00
}
},
2024-02-17 12:34:00 +08:00
handleDeleteClick(index){
2024-02-24 08:54:55 +08:00
this.materialData.splice(index, 1)
2024-02-19 14:38:00 +08:00
},
2024-02-17 12:34:00 +08:00
2024-02-19 14:38:00 +08:00
selectedRegion(){
this.dialogRegionVisible = true;
},
chooseRegion(row) {
this.dialogRegionVisible = false;
this.formLabelAlign.province = row.province
this.formLabelAlign.city = row.city
this.formLabelAlign.district = row.district
this.formLabelAlign.kilometers = row.kilometers
this.price_0t_5t = row.price01
this.price_5t_10t = row.price02
this.price_10t_25t = row.price03
this.price_25t_100t = row.price04
this.price_100t = row.price05
},
searchRegion(){
if(this.regionName === ''){
this.$message({
message: '请输入你要查询的地区名称',
type: 'warning'
});
}else{
const params = {
regionName : this.regionName
}
console.log(params)
queryRegionListByName(params).then(res => {
this.regionTableData = res.data || []
2024-02-19 16:56:07 +08:00
this.regionCurrentPage = 1;
2024-02-19 14:38:00 +08:00
}).catch(err => {
this.$message.error('请求出错了:' + err)
})
}
},
handleRegionSizeChange(val) {
this.pageSize = val;
this.currentPage = 1; // 切换每页显示条目数时回到第一页
},
handleRegionCurrentChange(val) {
this.currentPage = val;
},
2024-02-17 12:34:00 +08:00
2024-02-20 13:39:33 +08:00
addMaterial(){
this.dialogMaterialVisible = true;
2024-02-24 08:54:55 +08:00
},
handleSelectionChange(selection) {
// 当选择发生变化时更新选中数据
this.selectedMaterialItems = selection;
},
removeSelectedItem(selectedItem) {
// 移除选中的记录
const index = this.selectedMaterialItems.indexOf(selectedItem);
if (index !== -1) {
this.selectedMaterialItems.splice(index, 1);
}
// 同步取消左侧表格中对应项的选择
const tableIndex = this.materialTableData.indexOf(selectedItem);
if (tableIndex !== -1) {
this.$refs.materialTable.toggleRowSelection(this.materialTableData[tableIndex]);
}
},
addMaterialToTable() {
// 将选中的物料信息添加到表格中
this.materialData = this.materialData.concat(this.selectedMaterialItems);
// 清空选中的物料信息
this.selectedMaterialItems = [];
this.$refs.materialTable.clearSelection();
this.dialogMaterialVisible = false;
},
closeMaterialDialog() {
this.dialogMaterialVisible = false;
2024-02-20 13:39:33 +08:00
}
2024-01-30 16:03:30 +08:00
2024-01-19 08:47:04 +08:00
},
2024-01-18 13:05:55 +08:00
})
</script>
</body>
</html>