123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379 |
- <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="基本信息" name="0"/>
- <el-tab-pane label="技术参数" name="1"/>
- <el-tab-pane label="附件信息" name="2"/>
- </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" filterable placeholder="请选择" @change="handleChangeProduct">
- <el-option-group v-for="group in productList" :key="group.label" :label="group.text">
- <el-option v-for="item in group.options" :key="item.Code" :label="item.AliasName"
- :value="item.Code"></el-option>
- </el-option-group>
- </el-select>
- </el-form-item>
- <el-form-item label="品牌" prop="brand">
- <el-select v-model="ruleForm.brand" filterable remote @change="handleChangeBrand"
- placeholder="请选择" :remote-method="remoteMethods" :loading="loading">
- <el-option v-for="item in brandList" :key="item.BrandID"
- :label="`${item.BrandCname}${item.BrandName?`(${item.BrandCname})`:''}`"
- :value="item.BrandID"/>
- </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>
- <template v-for="(item,index) in TechnicalData">
- <el-form-item :label="item.Name">
- <el-input
- v-if="item.InputMode == 'B1' || item.InputMode == 'B2'"
- v-model="ruleForm[item.Code]"/>
- <el-input
- v-else-if="item.InputMode == 'A1'||item.InputMode == 'A2'"
- type="number"
- v-model="ruleForm[item.Code]">
- <template slot="append" v-if="item.Unit">{{item.Unit}}</template>
- </el-input>
- <el-select
- v-else-if="item.InputMode == 'D1' || item.InputMode == 'E2'"
- placeholder="请选择"
- v-model="ruleForm[item.Code]">
- <el-option :key="op.Name" :label="op.Name" :value="op.Code" v-for="op in item.options"></el-option>
- </el-select>
- <!-- <el-select-->
- <!-- v-else-if="item.InputMode == 'D2'"-->
- <!-- placeholder="请选择"-->
- <!-- v-model="ruleForm[item.Code]"-->
- <!-- multiple-->
- <!-- collapse-tags>-->
- <!-- <el-option :key="op.Name" :label="op.Name" :value="op.Code" v-for="op in item.options"></el-option>-->
- <!-- </el-select>-->
- <el-date-picker
- v-else-if="item.InputMode == 'C6'"
- v-model="ruleForm[item.Code]"
- type="daterange"
- value-format="yyyy-MM-dd"
- range-separator="至"
- start-placeholder="开始日期"
- end-placeholder="结束日期"/>
- <el-cascader
- v-else-if="item.InputMode == 'D1L'"
- placeholder="请选择"
- :options="item.options"
- v-model="ruleForm[item.Code]"
- :props="item.props"
- filterable
- :show-all-levels="false"
- clearable
- style="width: 200px"/>
- <el-input
- v-else-if="item.InputMode == 'L'||item.InputMode == 'L1'||item.InputMode == 'L2'||item.InputMode == 'M'"
- v-model="ruleForm[item.Code]">
- <template slot="append" v-if="item.Unit">{{item.Unit}}</template>
- </el-input>
- <el-date-picker
- v-else-if="item.InputMode == 'C5'" v-model="ruleForm[item.Code]"
- placeholder="选择日期"
- value-format="yyyy-MM-dd"
- type="date">
- </el-date-picker>
- <el-input v-else v-model="ruleForm[item.Code]"/>
- </el-form-item>
- </template>
- </section>
- <section class="d_jump">
- <p class="title"><i class="iconfont iconjuxing" style="color:#3A8DDE;"></i>附件信息</p>
- <template v-for="(item,index) in AttachmentInfo">
- <el-form-item :label="item.Name">
- <uploadFiles :readOnly="read" :keysArr="keysArr" @change="changeItem" v-model="ruleForm[item.Code]"/>
- </el-form-item>
- </template>
- </section>
- </el-form>
- </div>
- </div>
- </template>
- <script>
- import uploadFiles from "@/components/public/uploadFiles"
- import {defFuncidQuery, prodRecordQuery} from "@/api/product"
- import {brandQueryByKeyword, brandRecordQuery} from "@/api/brand"
- import {mapGetters} from "vuex"
- export default {
- components: {uploadFiles},
- created() {
- this.getProdType()
- this.getBrandNum5()
- },
- mounted() {
- console.log(this.$route.query)
- 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 {
- TechnicalData: [],
- AttachmentInfo: [],
- read: false,
- list: [],
- keysArr: [],
- loading: false,
- bbs: [],
- brandList: [],
- productList: [],
- stepActive: '0',
- tabPosition: 'left',
- ruleForm: {
- product: '',
- brand: [],
- type: '',
- },
- rules: {
- product: [
- {required: true, message: '请选择产品类型', trigger: 'change'}
- ],
- brand: [
- {required: true, validator: checkBrand, trigger: '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 => {
- res.Content.map(item => {
- if (item.label == 'record') {
- item.text = `最近使用`
- } else if (item.label == 'all') {
- item.text = ''
- }
- })
- this.productList = res.Content
- })
- },
- getBrandNum5() {// 获取最新创建过产品型号的5个品牌
- let params = {
- Type: this.dictionary.dictionaryType,
- GroupId: this.dictionary.groupId,
- ProjectId: this.dictionary.projectId,
- }
- brandRecordQuery(params, res => {
- this.bbs = res.Content
- this.brandList = res.Content
- })
- },
- handleChangeProduct(item) {// 切换产品类型
- let param = {
- Type: this.dictionary.dictionaryType,
- GroupId: this.dictionary.groupId,
- ProjectId: this.dictionary.projectId,
- ClassCode: item
- }
- defFuncidQuery(param, res => {
- this.TechnicalData = []
- res.Content.TechnicalData.forEach(i => {
- for (let key in i) {
- i[key].forEach(i => this.TechnicalData.push(i))
- }
- })
- this.AttachmentInfo = res.Content.AttachmentInfo
- })
- },
- handleChangeBrand(item) {// 切换品牌
- 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) {
- if (query !== '') {
- this.loading = true
- brandQueryByKeyword({keyword: query, PageSize: 50,}, res => {
- this.loading = false
- this.brandList = res.Content
- })
- } else {
- 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;
- background: #fff;
- .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>
|