123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382 |
- <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 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>
- </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 "@/components/public/uploadFiles"
- import { prodRecordQuery } from "@/api/product"
- import { mapGetters } from "vuex"
- export default {
- components: { uploadFiles },
- created() {
- this.getProdType()
- },
- 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}` }
- })
- },
- 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: '龙须面'
- }, {
- 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: {
- 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
- })
- },
- 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 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) {
- 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 {
- console.log('error submit!!');
- return false;
- }
- });
- },
- 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;
- }
- }
- .saga-supplement-box {
- position: relative;
- height: 800px;
- margin-top: 90px;
- .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 {
- position: absolute;
- left: 0;
- top: 0;
- height: 100%;
- }
- .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;
- }
- /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>
|