中煤报表页面
This commit is contained in:
parent
85e5edf3f2
commit
1a33a7f7e2
|
@ -11,4 +11,7 @@
|
|||
<component name="ProjectRootManager" version="2" languageLevel="JDK_1_8" default="true" project-jdk-name="1.8" project-jdk-type="JavaSDK">
|
||||
<output url="file://$PROJECT_DIR$/out" />
|
||||
</component>
|
||||
<component name="ProjectType">
|
||||
<option name="id" value="jpab" />
|
||||
</component>
|
||||
</project>
|
12833
logs/JIAL-ss.log
12833
logs/JIAL-ss.log
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
@ -1,23 +1,26 @@
|
|||
.container {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
|
||||
width: 100vw; /* 设置页面宽度为视口宽度的100% */
|
||||
}
|
||||
|
||||
.center-container {
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
width: 95%;
|
||||
padding: 35px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.el-input {
|
||||
height: 20px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.el-input__inner {
|
||||
height: 30px;
|
||||
font-family: Roboto, serif;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
/*font-family: Roboto, serif;*/
|
||||
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
}
|
||||
|
@ -33,5 +36,60 @@
|
|||
line-height: inherit;
|
||||
}
|
||||
.el-input__suffix-inner {
|
||||
display: inline-block;
|
||||
margin-top: 10px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.el-form-item__label {
|
||||
text-align: justify;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.el-input-group{
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.el-form-item__label::after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
|
||||
.el-form-item {
|
||||
margin: 0px 15px 0px 15px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.el-row {
|
||||
|
||||
}
|
||||
|
||||
.el-col {
|
||||
height: 42px;
|
||||
}
|
||||
|
||||
.button-box .el-button {
|
||||
margin: 10px 80px 10px 0px;
|
||||
}
|
||||
|
||||
.form-box {
|
||||
background-color: #f0f0f0; /* 浅灰色背景 */
|
||||
border-radius: 10px; /* 可以根据需要调整边框圆角 */
|
||||
backdrop-filter: blur(10px); /* 调整模糊度 */
|
||||
-webkit-backdrop-filter: blur(10px); /* 兼容性处理,适用于一些WebKit浏览器 */
|
||||
}
|
||||
|
||||
.button-box {
|
||||
margin: 10px 0px 10px 0px;
|
||||
background-color: #f0f0f0; /* 浅灰色背景 */
|
||||
border-radius: 10px; /* 可以根据需要调整边框圆角 */
|
||||
backdrop-filter: blur(10px); /* 调整模糊度 */
|
||||
-webkit-backdrop-filter: blur(10px); /* 兼容性处理,适用于一些WebKit浏览器 */
|
||||
}
|
||||
|
||||
.table-box {
|
||||
|
||||
}
|
|
@ -16,55 +16,132 @@
|
|||
<div class="container" id="index-app">
|
||||
<div class="center-container">
|
||||
<div class="form-box">
|
||||
<el-form :label-position="labelPosition" label-width="35%" :model="formLabelAlign">
|
||||
<el-form label-width="45%" :model="formLabelAlign">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-form-item label="名称">
|
||||
<el-input v-model="formLabelAlign.name"></el-input>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="加工费" title="蒸汽费/钢丝铠装材料及加工费">
|
||||
<el-input v-model="formLabelAlign.name" placeholder="蒸汽费/钢丝铠装材料及加工费">
|
||||
<template slot="append">%</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col >
|
||||
<el-col :span="5">
|
||||
<el-form-item label="活动区域">
|
||||
<el-input v-model="formLabelAlign.region"></el-input>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="生产财务成本" title="生产财务成本">
|
||||
<el-input v-model="formLabelAlign.region" placeholder="生产财务成本">
|
||||
<template slot="append">%</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<el-form-item label="活动形式">
|
||||
<el-input v-model="formLabelAlign.type"></el-input>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="账期" title="账期">
|
||||
<el-input v-model="formLabelAlign.type" placeholder="账期"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<el-form-item label="活动形式">
|
||||
<el-input v-model="formLabelAlign.type"></el-input>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="承兑" title="承兑">
|
||||
<el-input v-model="formLabelAlign.type" placeholder="承兑"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="3">
|
||||
<el-form-item >
|
||||
<el-input v-model="formLabelAlign.type"></el-input>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="公司管理成本" title="公司管理成本">
|
||||
<el-input v-model="formLabelAlign.name" placeholder="公司管理成本"></el-input>
|
||||
</el-form-item>
|
||||
</el-col >
|
||||
<el-col :span="3">
|
||||
<el-form-item >
|
||||
<el-input v-model="formLabelAlign.type"></el-input>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="中标服务费" title="中标服务费">
|
||||
<el-input v-model="formLabelAlign.region" placeholder="中标服务费">
|
||||
<template slot="append">%</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="3">
|
||||
<el-form-item >
|
||||
<el-input v-model="formLabelAlign.type"></el-input>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="公司净利润" title="公司净利润">
|
||||
<el-input v-model="formLabelAlign.type" placeholder="公司净利润"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="业务费">
|
||||
<el-input v-model="formLabelAlign.type" placeholder="业务费"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="省">
|
||||
<el-input :disabled="true" v-model="formLabelAlign.type" placeholder="省"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="市">
|
||||
<el-input :disabled="true" v-model="formLabelAlign.type" placeholder="市"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="区">
|
||||
<el-input :disabled="true" v-model="formLabelAlign.type" placeholder="区"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6" >
|
||||
<el-form-item label="运费">
|
||||
<el-input v-model="formLabelAlign.type" placeholder="运费"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="成本累计">
|
||||
<el-input v-model="formLabelAlign.name" placeholder="成本累计"></el-input>
|
||||
|
||||
</el-form-item>
|
||||
</el-col >
|
||||
<el-col :span="6">
|
||||
<el-form-item label="底价">
|
||||
<el-input v-model="formLabelAlign.region" placeholder="底价"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="可下浮">
|
||||
<el-input v-model="formLabelAlign.type" placeholder="可下浮"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="实际材料成本厂价比例">
|
||||
<el-input v-model="formLabelAlign.type" placeholder="实际材料成本占厂价比例"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="厂家金额">
|
||||
<el-input v-model="formLabelAlign.name" placeholder="厂家金额"></el-input>
|
||||
</el-form-item>
|
||||
</el-col >
|
||||
<el-col :span="6">
|
||||
<el-form-item label="人工费">
|
||||
<el-input v-model="formLabelAlign.region" placeholder="人工费"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="盘具">
|
||||
<el-input v-model="formLabelAlign.type" placeholder="盘具"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="button-box">
|
||||
<el-button type="text">选择地区</el-button>
|
||||
<el-button type="text">添加物料</el-button>
|
||||
<el-button type="text">刷新界面</el-button>
|
||||
</div>
|
||||
<div class="table-box">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
border
|
||||
row-height="20px"
|
||||
:row-style="{height: '0px'}"
|
||||
:cell-style="{padding: '2px'}"
|
||||
:header-cell-style="{ background: '#eef1f6', color: '#606266' }">
|
||||
<el-table-column
|
||||
fixed
|
||||
|
@ -158,7 +235,7 @@
|
|||
|
||||
},
|
||||
mounted() {
|
||||
this.getChinaData();
|
||||
|
||||
},
|
||||
methods: {
|
||||
async init () {
|
||||
|
|
|
@ -40,18 +40,18 @@
|
|||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="6">
|
||||
<el-cascader
|
||||
v-model="selectedValues"
|
||||
:options="options"
|
||||
:props="{ checkStrictly: true }"
|
||||
:style="{ width: '100%' }"
|
||||
clearable
|
||||
@change="handleChange">
|
||||
</el-cascader>
|
||||
<el-col :span="3">
|
||||
<el-form-item >
|
||||
<el-input v-model="formLabelAlign.type"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="3">
|
||||
<el-form-item label="区">
|
||||
<el-form-item >
|
||||
<el-input v-model="formLabelAlign.type"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="3">
|
||||
<el-form-item >
|
||||
<el-input v-model="formLabelAlign.type"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
@ -148,9 +148,6 @@
|
|||
{ kunnr1: '101', kunnr2: '102', kunnr3: '103', kunnr4: '104', kunnr5: '105', kunnr6: '106', kunnr7: '107', kunnr8: '108' },
|
||||
// Add more rows as needed
|
||||
],
|
||||
value: [],
|
||||
options: [],
|
||||
selectedValues: [], // 用于绑定选择的值
|
||||
|
||||
}
|
||||
},
|
||||
|
@ -167,65 +164,6 @@
|
|||
async init () {
|
||||
|
||||
},
|
||||
handleChange(value) {
|
||||
console.log(value);
|
||||
console.log(value[0]);
|
||||
},
|
||||
async getChinaData() {
|
||||
try {
|
||||
const response = await axios.get('https://restapi.amap.com/v3/config/district', {
|
||||
params: {
|
||||
key: 'b3cfce12e9b6ae37d0599623870404d5',
|
||||
keywords: '中国',
|
||||
subdistrict: 1,
|
||||
extensions: 'all',
|
||||
level: 'province'
|
||||
}
|
||||
});
|
||||
|
||||
if (response.data && response.data.districts && response.data.districts.length > 0) {
|
||||
const provinces = response.data.districts[0].districts;
|
||||
this.options = this.transformDistrictData(provinces);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching China data:', error);
|
||||
}
|
||||
},
|
||||
transformDistrictData(districts) {
|
||||
return districts.map(province => {
|
||||
return {
|
||||
value: province.adcode,
|
||||
label: province.name,
|
||||
children: [] // 初始状态下,市级数据为空
|
||||
};
|
||||
});
|
||||
},
|
||||
async loadCityData(selectedOptions) {
|
||||
const targetOption = selectedOptions[selectedOptions.length - 1];
|
||||
targetOption.loading = true;
|
||||
|
||||
try {
|
||||
const response = await axios.get('https://restapi.amap.com/v3/config/district', {
|
||||
params: {
|
||||
key: 'b3cfce12e9b6ae37d0599623870404d5',
|
||||
keywords: targetOption.label,
|
||||
subdistrict: 1,
|
||||
extensions: 'all',
|
||||
level: 'city'
|
||||
}
|
||||
});
|
||||
|
||||
if (response.data && response.data.districts && response.data.districts.length > 0) {
|
||||
const cities = response.data.districts[0].districts;
|
||||
targetOption.children = this.transformDistrictData(cities);
|
||||
targetOption.isLeaf = true; // 设置省级节点为叶子节点
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching city data:', error);
|
||||
} finally {
|
||||
targetOption.loading = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
|
Loading…
Reference in New Issue