233 lines
8.7 KiB
HTML
233 lines
8.7 KiB
HTML
<!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">
|
|
<el-form :label-position="labelPosition" label-width="35%" :model="formLabelAlign">
|
|
<el-row>
|
|
<el-col :span="5">
|
|
<el-form-item label="名称">
|
|
<el-input v-model="formLabelAlign.name"></el-input>
|
|
</el-form-item>
|
|
</el-col >
|
|
<el-col :span="5">
|
|
<el-form-item label="活动区域">
|
|
<el-input v-model="formLabelAlign.region"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="5">
|
|
<el-form-item label="活动形式">
|
|
<el-input v-model="formLabelAlign.type"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="5">
|
|
<el-form-item label="活动形式">
|
|
<el-input v-model="formLabelAlign.type"></el-input>
|
|
</el-form-item>
|
|
</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>
|
|
<el-col :span="3">
|
|
<el-form-item label="区">
|
|
<el-input v-model="formLabelAlign.type"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
|
|
</el-row>
|
|
|
|
</el-form>
|
|
</div>
|
|
<div class="table-box">
|
|
<el-table
|
|
:data="tableData"
|
|
border
|
|
row-height="20px"
|
|
:header-cell-style="{background:'#eef1f6',color:'#606266'}">
|
|
<el-table-column
|
|
fixed
|
|
width="180"
|
|
prop="kunnr1"
|
|
label="客户编号">
|
|
</el-table-column>
|
|
<el-table-column
|
|
width="180"
|
|
prop="kunnr2"
|
|
label="客户编号">
|
|
</el-table-column>
|
|
<el-table-column
|
|
width="180"
|
|
prop="kunnr3"
|
|
label="客户编号">
|
|
</el-table-column>
|
|
<el-table-column
|
|
width="180"
|
|
prop="kunnr4"
|
|
label="客户编号">
|
|
</el-table-column>
|
|
<el-table-column
|
|
width="180"
|
|
prop="kunnr5"
|
|
label="客户编号"
|
|
style="color: red">
|
|
</el-table-column>
|
|
<el-table-column
|
|
width="180"
|
|
prop="kunnr6"
|
|
label="客户编号">
|
|
</el-table-column>
|
|
<el-table-column
|
|
width="180"
|
|
prop="kunnr7"
|
|
label="客户编号">
|
|
</el-table-column>
|
|
<el-table-column
|
|
width="180"
|
|
prop="kunnr8"
|
|
label="客户编号">
|
|
</el-table-column>
|
|
<el-table-column
|
|
fixed="right"
|
|
width="180"
|
|
label="操作">
|
|
<template slot-scope="scope">
|
|
<el-button @click="handleClick(scope.row)" type="text">查看</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</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 {
|
|
labelPosition: 'right',
|
|
formLabelAlign: {
|
|
name: '',
|
|
region: '',
|
|
type: ''
|
|
},
|
|
tableData: [
|
|
{ kunnr1: '001', kunnr2: '002', kunnr3: '003', kunnr4: '004', kunnr5: '005', kunnr6: '006', kunnr7: '007', kunnr8: '008' },
|
|
{ kunnr1: '101', kunnr2: '102', kunnr3: '103', kunnr4: '104', kunnr5: '105', kunnr6: '106', kunnr7: '107', kunnr8: '108' },
|
|
// Add more rows as needed
|
|
],
|
|
value: [],
|
|
options: [],
|
|
selectedValues: [], // 用于绑定选择的值
|
|
|
|
}
|
|
},
|
|
computed: {
|
|
|
|
},
|
|
created() {
|
|
|
|
},
|
|
mounted() {
|
|
this.getChinaData();
|
|
},
|
|
methods: {
|
|
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>
|
|
</body>
|
|
</html> |