|
@@ -1,413 +1,382 @@
|
|
|
<template>
|
|
|
<div class="saga-supplement-box">
|
|
|
- <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" 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"
|
|
|
- >
|
|
|
+ <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 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"><i class="iconfont iconjuxing" style="color:#3A8DDE;"></i>基本信息</p>
|
|
|
+ <el-form-item label="产品类型" prop="product">
|
|
|
+ <el-select v-model="ruleForm.product" placeholder="请选择">
|
|
|
+ <el-option-group v-for="group in productList" :key="group.label" :label="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"><i class="iconfont iconjuxing" style="color:#3A8DDE;"></i>技术参数</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>
|
|
|
|
|
|
- </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="设备文档:">
|
|
|
- <uploadFiles
|
|
|
- :readOnly="read"
|
|
|
- :keysArr="keysArr"
|
|
|
- @change="changeItem"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- </section>
|
|
|
- </el-form>
|
|
|
- </div>
|
|
|
+ </section>
|
|
|
+ <section class="d_jump">
|
|
|
+ <p class="title"><i class="iconfont iconjuxing" style="color:#3A8DDE;"></i>附件信息</p>
|
|
|
+ <el-form-item label="设备文档:">
|
|
|
+ <uploadFiles :readOnly="read" :keysArr="keysArr" @change="changeItem" />
|
|
|
+ </el-form-item>
|
|
|
+ </section>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import uploadFiles from "../public/uploadFiles";
|
|
|
+import uploadFiles from "@/components/public/uploadFiles"
|
|
|
+import { prodRecordQuery } from "@/api/product"
|
|
|
+import { mapGetters } from "vuex"
|
|
|
|
|
|
- export default {
|
|
|
- components: {uploadFiles},
|
|
|
- created() {
|
|
|
+export default {
|
|
|
+ components: { uploadFiles },
|
|
|
+ created() {
|
|
|
+ this.getProdType()
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ // this.$refs.ruleForm.validate(valid => {
|
|
|
+ // console.log(valid)
|
|
|
+ // })
|
|
|
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- // this.$refs.ruleForm.validate(valid => {
|
|
|
- // console.log(valid)
|
|
|
- // })
|
|
|
+ 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}` }
|
|
|
+ })
|
|
|
|
|
|
- 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() {
|
|
|
- let checkBrand = (rule, value, callback) => {
|
|
|
- if (value == '') {
|
|
|
- return callback(new Error('请选择品牌'))
|
|
|
- } else {
|
|
|
- callback()
|
|
|
- }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ let checkBrand = (rule, value, callback) => {
|
|
|
+ if (value == '') {
|
|
|
+ return callback(new Error('请选择品牌'))
|
|
|
+ } else {
|
|
|
+ callback()
|
|
|
}
|
|
|
- return {
|
|
|
- read: false,
|
|
|
- list: [],
|
|
|
- keysArr: [],
|
|
|
- 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: '龙须面'
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ read: false,
|
|
|
+ list: [],
|
|
|
+ keysArr: [],
|
|
|
+ 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: '选项5',
|
|
|
- label: '北京烤鸭'
|
|
|
- }],
|
|
|
- brandList: [{
|
|
|
- value: '选项1',
|
|
|
- label: '黄金糕'
|
|
|
+ value: 'Beijing',
|
|
|
+ label: '北京'
|
|
|
+ }]
|
|
|
+ }, {
|
|
|
+ label: '城市名',
|
|
|
+ options: [{
|
|
|
+ value: 'Chengdu',
|
|
|
+ label: '成都'
|
|
|
}, {
|
|
|
- value: '选项2',
|
|
|
- label: '双皮奶'
|
|
|
+ value: 'Shenzhen',
|
|
|
+ label: '深圳'
|
|
|
}, {
|
|
|
- value: '选项3',
|
|
|
- label: '蚵仔煎'
|
|
|
+ value: 'Guangzhou',
|
|
|
+ label: '广州'
|
|
|
}, {
|
|
|
- value: '选项4',
|
|
|
- label: '龙须面'
|
|
|
+ value: 'Dalian',
|
|
|
+ label: '大连'
|
|
|
+ }]
|
|
|
+ }],
|
|
|
+ labelKey: [
|
|
|
+ {
|
|
|
+ name: '基本信息',
|
|
|
}, {
|
|
|
- value: '选项5',
|
|
|
- label: '北京烤鸭'
|
|
|
- }],
|
|
|
- productList: [{
|
|
|
- label: '热门城市',
|
|
|
- options: [{
|
|
|
- value: 'Shanghai',
|
|
|
- label: '上海'
|
|
|
- }, {
|
|
|
- value: 'Beijing',
|
|
|
- label: '北京'
|
|
|
- }]
|
|
|
+ name: '技术参数',
|
|
|
}, {
|
|
|
- label: '城市名',
|
|
|
- options: [{
|
|
|
- value: 'Chengdu',
|
|
|
- label: '成都'
|
|
|
- }, {
|
|
|
- value: 'Shenzhen',
|
|
|
- label: '深圳'
|
|
|
- }, {
|
|
|
- value: 'Guangzhou',
|
|
|
- label: '广州'
|
|
|
- }, {
|
|
|
- value: 'Dalian',
|
|
|
- label: '大连'
|
|
|
- }]
|
|
|
- }],
|
|
|
- labelKey: [
|
|
|
- {
|
|
|
- name: '基本信息',
|
|
|
- }, {
|
|
|
- name: '技术参数',
|
|
|
- }, {
|
|
|
- name: '附件信息',
|
|
|
- }
|
|
|
- ],
|
|
|
- stepActive: '0',
|
|
|
- tabPosition: 'left',
|
|
|
- ruleForm: {
|
|
|
- product: '',
|
|
|
- brand: '',
|
|
|
- type: '',
|
|
|
-
|
|
|
- },
|
|
|
- rules: {
|
|
|
- product: [
|
|
|
- {required: true, message: '请选择产品类型', trigger: 'change'}
|
|
|
- ],
|
|
|
- brand: [
|
|
|
- {required: true, validator: checkBrand, trigger: 'focus,blur'}
|
|
|
- ],
|
|
|
- type: [
|
|
|
- {required: true, message: '请输入型号', trigger: 'blur'}
|
|
|
- ]
|
|
|
+ name: '附件信息',
|
|
|
}
|
|
|
+ ],
|
|
|
+ stepActive: '0',
|
|
|
+ tabPosition: 'left',
|
|
|
+ ruleForm: {
|
|
|
+ product: '',
|
|
|
+ brand: '',
|
|
|
+ type: '',
|
|
|
+
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ product: [
|
|
|
+ { required: true, message: '请选择产品类型', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ brand: [
|
|
|
+ { required: true, validator: checkBrand, trigger: 'focus,blur' }
|
|
|
+ ],
|
|
|
+ type: [
|
|
|
+ { required: true, message: '请输入型号', trigger: 'blur' }
|
|
|
+ ]
|
|
|
}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapGetters('layout', ['dictionary']),
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getProdType() {
|
|
|
+ let params = {
|
|
|
+ Type: this.dictionary.dictionaryType,
|
|
|
+ GroupId: this.dictionary.groupId,
|
|
|
+ ProjectId: this.dictionary.projectId,
|
|
|
+ }
|
|
|
+ prodRecordQuery(params, res => {
|
|
|
+ debugger
|
|
|
+ })
|
|
|
},
|
|
|
- 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;
|
|
|
- if (total > distance) {
|
|
|
- smoothDown()
|
|
|
- } else {
|
|
|
- let newTotal = distance - total + 100
|
|
|
- step = newTotal / 50
|
|
|
- smoothUp()
|
|
|
- }
|
|
|
+ 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;
|
|
|
+ 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 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
|
|
|
- }
|
|
|
+ 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
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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) {
|
|
|
- console.log(query, '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)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ remoteMethods(query) {
|
|
|
+ console.log(query, '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 {
|
|
|
- this.brandList = []
|
|
|
+ console.log('error submit!!');
|
|
|
+ return false;
|
|
|
}
|
|
|
- },
|
|
|
- focus() {
|
|
|
- this.brandList = this.bbs
|
|
|
- },
|
|
|
- submitForm() {
|
|
|
- this.$refs.ruleForm.validate((valid) => {
|
|
|
- if (valid) {
|
|
|
- console.log(this.ruleForm);
|
|
|
- } else {
|
|
|
- console.log('error submit!!');
|
|
|
- return false;
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- changeItem(file) {
|
|
|
- let arr = []
|
|
|
- file.forEach(({Key}) => arr.push({Key}))
|
|
|
- }
|
|
|
+ });
|
|
|
},
|
|
|
- watch: {}
|
|
|
- }
|
|
|
+ changeItem(file) {
|
|
|
+ let arr = []
|
|
|
+ file.forEach(({ Key }) => arr.push({ Key }))
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {}
|
|
|
+}
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
- @media screen and (max-width: 1500px) {
|
|
|
- .saga-supplement-box {
|
|
|
- height: 500px;
|
|
|
- border: 1px solid #42b983;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
+@media screen and (max-width: 1500px) {
|
|
|
.saga-supplement-box {
|
|
|
- position: relative;
|
|
|
- height: 800px;
|
|
|
- margin-top: 90px;
|
|
|
+ height: 500px;
|
|
|
+ border: 1px solid #42b983;
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
- .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;
|
|
|
+.saga-supplement-box {
|
|
|
+ position: relative;
|
|
|
+ height: 800px;
|
|
|
+ margin-top: 90px;
|
|
|
|
|
|
- .reset-steps {
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
+ .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;
|
|
|
|
|
|
- .d_jump {
|
|
|
- display: inline-block;
|
|
|
- width: calc(100% - 108px);
|
|
|
- position: relative;
|
|
|
- left: 100px;
|
|
|
-
|
|
|
- .title {
|
|
|
- margin: 25px 70px;
|
|
|
- padding-bottom: 10px;
|
|
|
- font-size: 16px;
|
|
|
- color: #1F2429;
|
|
|
- border-bottom: 1px solid #EFF0F1;
|
|
|
- }
|
|
|
+ .reset-steps {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 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;
|
|
|
}
|
|
|
|
|
|
- .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
|
|
|
- padding: 0 340px;
|
|
|
+ /deep/ .el-input__inner {
|
|
|
+ width: 320px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- /deep/ .el-scrollbar__wrap {
|
|
|
- overflow-x: hidden;
|
|
|
+ .el-form-item--mini.el-form-item,
|
|
|
+ .el-form-item--small.el-form-item {
|
|
|
+ padding: 0 340px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- ::-webkit-scrollbar-thumb {
|
|
|
- height: 50px;
|
|
|
- outline-offset: -2px;
|
|
|
- outline: 2px solid #dddee0;
|
|
|
- border: 2px solid #dddee0;
|
|
|
- background-color: #dddee0;
|
|
|
- border-radius: 4px;
|
|
|
+ /deep/ .el-scrollbar__wrap {
|
|
|
+ overflow-x: hidden;
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
- ::-webkit-scrollbar {
|
|
|
- width: 8px;
|
|
|
- height: 8px;
|
|
|
- }
|
|
|
+::-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>
|