|
@@ -1,79 +1,394 @@
|
|
|
<template>
|
|
|
- <div class="saga-brand-box">
|
|
|
-
|
|
|
- <el-tabs :tab-position="tabPosition" style="float: left">
|
|
|
- <el-tab-pane label="基本信息"></el-tab-pane>
|
|
|
- <el-tab-pane label="基本信息"></el-tab-pane>
|
|
|
- <el-tab-pane label="基本信息"></el-tab-pane>
|
|
|
- <el-tab-pane label="基本信息"></el-tab-pane>
|
|
|
- </el-tabs>
|
|
|
- <section class="content">
|
|
|
- <el-form
|
|
|
- label-position="top"
|
|
|
- :model="ruleForm"
|
|
|
- :rules="rules"
|
|
|
- >
|
|
|
- <p class="title">
|
|
|
- <img src="../../assets/images/rectangle.png" height="16" style="vertical-align: middle">
|
|
|
- 基本信息</p>
|
|
|
- <el-form-item label="产品类型" prop="product">
|
|
|
- <el-input v-model="ruleForm.product"/>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="品牌" prop="brand">
|
|
|
- <el-input v-model="ruleForm.brand"/>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="型号" prop="type">
|
|
|
- <el-input v-model="ruleForm.type"/>
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- </el-form>
|
|
|
- </section>
|
|
|
- </div>
|
|
|
+ <div class="saga-supplement-box">
|
|
|
+ <el-scrollbar style="height:100%" class="saga-supplement-scroll">
|
|
|
+ <div class="saga-brand-box">
|
|
|
+ <el-tabs :tab-position="tabPosition" class="reset-steps" @tab-click="jump" v-model="stepActive">
|
|
|
+ <el-tab-pane
|
|
|
+ :label="item.name || '信息'"
|
|
|
+ v-for="(item,index) in labelKey"
|
|
|
+ :key="item.name"/>
|
|
|
+ </el-tabs>
|
|
|
+ <el-form
|
|
|
+ label-position="top"
|
|
|
+ :model="ruleForm"
|
|
|
+ :rules="rules"
|
|
|
+ ref="ruleForm"
|
|
|
+ >
|
|
|
+ <section class="d_jump">
|
|
|
+ <p class="title">
|
|
|
+ <img src="../../assets/images/rectangle.png" height="16" style="vertical-align: middle">
|
|
|
+ 基本信息</p>
|
|
|
+ <el-form-item label="产品类型" prop="product">
|
|
|
+ <el-select v-model="ruleForm.product" prop="product" placeholder="请选择">
|
|
|
+ <el-option-group
|
|
|
+ v-for="group in productList"
|
|
|
+ :key="group.label"
|
|
|
+ :labe="group.label"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in group.options"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ >
|
|
|
+
|
|
|
+ </el-option>
|
|
|
+ </el-option-group>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="品牌" prop="brand">
|
|
|
+ <el-select
|
|
|
+ v-model="ruleForm.brand"
|
|
|
+ multiple
|
|
|
+ :multiple-limit="1"
|
|
|
+ filterable
|
|
|
+ @focus="focus"
|
|
|
+ remote
|
|
|
+ placeholder="请选择"
|
|
|
+ :remote-method="remoteMethods"
|
|
|
+ :loading="loading"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in brandList"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+
|
|
|
+
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="型号" prop="type">
|
|
|
+ <el-input v-model="ruleForm.type"/>
|
|
|
+ </el-form-item>
|
|
|
+ </section>
|
|
|
+ <section class="d_jump">
|
|
|
+ <p class="title">
|
|
|
+ <img src="../../assets/images/rectangle.png" height="16" style="vertical-align: middle">
|
|
|
+ 技术参数
|
|
|
+ </p>
|
|
|
+ <el-form-item label="CPU规格:">
|
|
|
+ <el-input />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="CPU规格:">
|
|
|
+ <el-input/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="CPU规格:">
|
|
|
+ <el-input/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="CPU规格:">
|
|
|
+ <el-input/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="CPU规格:">
|
|
|
+ <el-input/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="CPU规格:">
|
|
|
+ <el-input/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="CPU规格:">
|
|
|
+ <el-input/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="CPU规格:">
|
|
|
+ <el-input/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="CPU规格:">
|
|
|
+ <el-input/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="CPU规格:">
|
|
|
+ <el-input/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="CPU规格:">
|
|
|
+ <el-input/>
|
|
|
+ </el-form-item>
|
|
|
|
|
|
+
|
|
|
+ </section>
|
|
|
+ <section class="d_jump">
|
|
|
+ <p class="title">
|
|
|
+ <img src="../../assets/images/rectangle.png" height="16" style="vertical-align: middle">
|
|
|
+ 附件信息
|
|
|
+ </p>
|
|
|
+ <el-form-item label="设备文档:">
|
|
|
+ <uploadDrag/>
|
|
|
+ </el-form-item>
|
|
|
+ </section>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </el-scrollbar>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ import uploadDrag from "../public/uploadDrag";
|
|
|
+
|
|
|
export default {
|
|
|
- components: {},
|
|
|
+ components: {uploadDrag},
|
|
|
created() {
|
|
|
},
|
|
|
mounted() {
|
|
|
+ let listener = document.querySelector('.saga-brand-box')
|
|
|
+ listener.addEventListener('scroll', this.onScroll)
|
|
|
+ // option
|
|
|
+ this.list = this.states.map(item => {
|
|
|
+ return {value: `value:${item}`, label: `label:${item}`}
|
|
|
+ })
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
+ list: [],
|
|
|
+ loading: false,
|
|
|
+ states: ["Alabama", "Alaska", "Arizona",
|
|
|
+ "Arkansas", "California", "Colorado",
|
|
|
+ "Connecticut", "Delaware", "Florida",
|
|
|
+ "Georgia", "Hawaii", "Idaho", "Illinois",
|
|
|
+ "Indiana", "Iowa", "Kansas", "Kentucky",
|
|
|
+ "Louisiana", "Maine", "Maryland",
|
|
|
+ "Massachusetts", "Michigan", "Minnesota",
|
|
|
+ "Mississippi", "Missouri", "Montana",
|
|
|
+ "Nebraska", "Nevada", "New Hampshire",
|
|
|
+ "New Jersey", "New Mexico", "New York",
|
|
|
+ "North Carolina", "North Dakota", "Ohio",
|
|
|
+ "Oklahoma", "Oregon", "Pennsylvania",
|
|
|
+ "Rhode Island", "South Carolina",
|
|
|
+ "South Dakota", "Tennessee", "Texas",
|
|
|
+ "Utah", "Vermont", "Virginia",
|
|
|
+ "Washington", "West Virginia", "Wisconsin",
|
|
|
+ "Wyoming"],
|
|
|
+ bbs: [{
|
|
|
+ value: '选项1',
|
|
|
+ label: '黄金糕'
|
|
|
+ }, {
|
|
|
+ value: '选项2',
|
|
|
+ label: '双皮奶'
|
|
|
+ }, {
|
|
|
+ value: '选项3',
|
|
|
+ label: '蚵仔煎'
|
|
|
+ }, {
|
|
|
+ value: '选项4',
|
|
|
+ label: '龙须面'
|
|
|
+ }, {
|
|
|
+ value: '选项5',
|
|
|
+ label: '北京烤鸭'
|
|
|
+ }],
|
|
|
+ brandList: [{
|
|
|
+ value: '选项1',
|
|
|
+ label: '黄金糕'
|
|
|
+ }, {
|
|
|
+ value: '选项2',
|
|
|
+ label: '双皮奶'
|
|
|
+ }, {
|
|
|
+ value: '选项3',
|
|
|
+ label: '蚵仔煎'
|
|
|
+ }, {
|
|
|
+ value: '选项4',
|
|
|
+ label: '龙须面'
|
|
|
+ }, {
|
|
|
+ value: '选项5',
|
|
|
+ label: '北京烤鸭'
|
|
|
+ }],
|
|
|
+ productList: [{
|
|
|
+ label: '热门城市',
|
|
|
+ options: [{
|
|
|
+ value: 'Shanghai',
|
|
|
+ label: '上海'
|
|
|
+ }, {
|
|
|
+ value: 'Beijing',
|
|
|
+ label: '北京'
|
|
|
+ }]
|
|
|
+ }, {
|
|
|
+ label: '城市名',
|
|
|
+ options: [{
|
|
|
+ value: 'Chengdu',
|
|
|
+ label: '成都'
|
|
|
+ }, {
|
|
|
+ value: 'Shenzhen',
|
|
|
+ label: '深圳'
|
|
|
+ }, {
|
|
|
+ value: 'Guangzhou',
|
|
|
+ label: '广州'
|
|
|
+ }, {
|
|
|
+ value: 'Dalian',
|
|
|
+ label: '大连'
|
|
|
+ }]
|
|
|
+ }],
|
|
|
+ labelKey: [
|
|
|
+ {
|
|
|
+ name: '基本信息',
|
|
|
+ }, {
|
|
|
+ name: '技术参数',
|
|
|
+ }, {
|
|
|
+ name: '附件信息',
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ stepActive: '0',
|
|
|
tabPosition: 'left',
|
|
|
- ruleForm: '',
|
|
|
- rules: []
|
|
|
+ ruleForm: {
|
|
|
+ product: '',
|
|
|
+ brand: '',
|
|
|
+ type: '',
|
|
|
+
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ product: [
|
|
|
+ {required: true, message: '请输入产品类型', trigger: 'change'}
|
|
|
+ ],
|
|
|
+ brand: [
|
|
|
+ {required: true, message: '请输入品牌', trigger: 'change'}
|
|
|
+ ],
|
|
|
+ type: [
|
|
|
+ {required: true, message: '请输入型号', trigger: 'change'}
|
|
|
+ ]
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
- methods: {}
|
|
|
+ methods: {
|
|
|
+ jump(tab, event) {
|
|
|
+ this.stepActive = tab.index
|
|
|
+ let jump = document.querySelectorAll('.d_jump'),
|
|
|
+ total = jump[this.stepActive].offsetTop,//获取需要滚动的距离
|
|
|
+ listener = document.querySelector('.saga-brand-box'),
|
|
|
+ distance = listener.scrollTop,
|
|
|
+ step = total / 50;
|
|
|
+ console.log(jump, total, listener, distance, step)
|
|
|
+ if (total > distance) {
|
|
|
+ smoothDown()
|
|
|
+ } else {
|
|
|
+ let newTotal = distance - total + 100
|
|
|
+ step = newTotal / 50
|
|
|
+ smoothUp()
|
|
|
+ }
|
|
|
+
|
|
|
+ function smoothDown() {
|
|
|
+ if (distance < total) {
|
|
|
+ distance += step
|
|
|
+ listener.scrollTop = distance
|
|
|
+ setTimeout(smoothDown, 10)
|
|
|
+ } else {
|
|
|
+ listener.scrollTop = total
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function smoothUp() {
|
|
|
+ if (distance > total) {
|
|
|
+ distance -= step
|
|
|
+ listener.scrollTop = distance
|
|
|
+ setTimeout(smoothUp, 10)
|
|
|
+ } else {
|
|
|
+ listener.scrollTop = total
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onScroll() {
|
|
|
+ let scrolled = document.querySelector('.saga-brand-box').scrollTop
|
|
|
+ let jump = document.querySelectorAll('.d_jump')
|
|
|
+ for (let i = 0; i < jump.length; i++) {
|
|
|
+ if (jump[i].offsetTop >= scrolled) {
|
|
|
+ this.stepActive = i.toString()
|
|
|
+ break
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ remoteMethods(query) {
|
|
|
+ if (query !== '') {
|
|
|
+ this.loading = true
|
|
|
+ setTimeout(() => {
|
|
|
+ this.loading = false
|
|
|
+ this.brandList = this.list.filter(item => {
|
|
|
+ return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1
|
|
|
+ })
|
|
|
+ }, 200)
|
|
|
+ } else {
|
|
|
+ this.brandList = []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ focus() {
|
|
|
+ this.brandList = this.bbs
|
|
|
+ },
|
|
|
+ submitForm() {
|
|
|
+ this.$refs.ruleForm.validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ console.log(this.ruleForm);
|
|
|
+ } else {
|
|
|
+ console.log('error submit!!');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {}
|
|
|
}
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
- .saga-brand-box {
|
|
|
- width: 100%;
|
|
|
+ @media screen and (max-width: 1500px) {
|
|
|
+ .saga-supplement-box {
|
|
|
+ height: 500px;
|
|
|
+ border: 1px solid #42b983;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .saga-supplement-box {
|
|
|
+ position: relative;
|
|
|
+ height: 800px;
|
|
|
margin-top: 90px;
|
|
|
- padding: 16px;
|
|
|
- box-sizing: border-box;
|
|
|
- background: rgba(255, 255, 255, 1);
|
|
|
-
|
|
|
- .content {
|
|
|
- display: inline-block;
|
|
|
- width: calc(100% - 108px);
|
|
|
-
|
|
|
- .title {
|
|
|
- margin: 25px 70px;
|
|
|
- padding-bottom: 10px;
|
|
|
- font-size: 16px;
|
|
|
- color: #1F2429;
|
|
|
- border-bottom: 1px solid #EFF0F1;
|
|
|
+
|
|
|
+ .saga-brand-box {
|
|
|
+ width: 100%;
|
|
|
+ max-height: 800px;
|
|
|
+ /*margin-top: 90px;*/
|
|
|
+ padding: 16px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: rgba(255, 255, 255, 1);
|
|
|
+ overflow-y: auto;
|
|
|
+
|
|
|
+ .reset-steps {
|
|
|
+ /*height: 780px;*/
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ height: 100%;
|
|
|
}
|
|
|
|
|
|
+ .d_jump {
|
|
|
+ display: inline-block;
|
|
|
+ width: calc(100% - 108px);
|
|
|
+ position: relative;
|
|
|
+ left: 100px;
|
|
|
|
|
|
- /deep/ .el-input__inner {
|
|
|
- width: 320px;
|
|
|
+ .title {
|
|
|
+ margin: 25px 70px;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #1F2429;
|
|
|
+ border-bottom: 1px solid #EFF0F1;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ /deep/ .el-input__inner {
|
|
|
+ width: 320px;
|
|
|
+ }
|
|
|
}
|
|
|
+
|
|
|
+ .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
|
|
|
+ padding: 0 340px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-scrollbar__wrap {
|
|
|
+ overflow-x: hidden;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ ::-webkit-scrollbar-thumb {
|
|
|
+ height: 50px;
|
|
|
+ outline-offset: -2px;
|
|
|
+ outline: 2px solid #dddee0;
|
|
|
+ border: 2px solid #dddee0;
|
|
|
+ background-color: #dddee0;
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ ::-webkit-scrollbar {
|
|
|
+ width: 8px;
|
|
|
+ height: 8px;
|
|
|
+ }
|
|
|
</style>
|