sagaSupplement.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382
  1. <template>
  2. <div class="saga-supplement-box">
  3. <div class="saga-brand-box">
  4. <el-tabs :tab-position="tabPosition" class="reset-steps" @tab-click="jump" v-model="stepActive">
  5. <el-tab-pane :label="item.name || '信息'" v-for="item in labelKey" :key="item.name" />
  6. </el-tabs>
  7. <el-form label-position="top" :model="ruleForm" :rules="rules" ref="ruleForm">
  8. <section class="d_jump">
  9. <p class="title"><i class="iconfont iconjuxing" style="color:#3A8DDE;"></i>基本信息</p>
  10. <el-form-item label="产品类型" prop="product">
  11. <el-select v-model="ruleForm.product" placeholder="请选择">
  12. <el-option-group v-for="group in productList" :key="group.label" :label="group.label">
  13. <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value"></el-option>
  14. </el-option-group>
  15. </el-select>
  16. </el-form-item>
  17. <el-form-item label="品牌" prop="brand">
  18. <el-select v-model="ruleForm.brand" multiple :multiple-limit="1" filterable @focus="focus" remote
  19. placeholder="请选择" :remote-method="remoteMethods" :loading="loading">
  20. <el-option v-for="item in brandList" :key="item.value" :label="item.label" :value="item.value" />
  21. </el-select>
  22. </el-form-item>
  23. <el-form-item label="型号" prop="type">
  24. <el-input v-model="ruleForm.type" />
  25. </el-form-item>
  26. </section>
  27. <section class="d_jump">
  28. <p class="title"><i class="iconfont iconjuxing" style="color:#3A8DDE;"></i>技术参数</p>
  29. <el-form-item label="CPU规格:">
  30. <el-input />
  31. </el-form-item>
  32. <el-form-item label="CPU规格:">
  33. <el-input />
  34. </el-form-item>
  35. <el-form-item label="CPU规格:">
  36. <el-input />
  37. </el-form-item>
  38. <el-form-item label="CPU规格:">
  39. <el-input />
  40. </el-form-item>
  41. <el-form-item label="CPU规格:">
  42. <el-input />
  43. </el-form-item>
  44. <el-form-item label="CPU规格:">
  45. <el-input />
  46. </el-form-item>
  47. <el-form-item label="CPU规格:">
  48. <el-input />
  49. </el-form-item>
  50. <el-form-item label="CPU规格:">
  51. <el-input />
  52. </el-form-item>
  53. <el-form-item label="CPU规格:">
  54. <el-input />
  55. </el-form-item>
  56. <el-form-item label="CPU规格:">
  57. <el-input />
  58. </el-form-item>
  59. <el-form-item label="CPU规格:">
  60. <el-input />
  61. </el-form-item>
  62. </section>
  63. <section class="d_jump">
  64. <p class="title"><i class="iconfont iconjuxing" style="color:#3A8DDE;"></i>附件信息</p>
  65. <el-form-item label="设备文档:">
  66. <uploadFiles :readOnly="read" :keysArr="keysArr" @change="changeItem" />
  67. </el-form-item>
  68. </section>
  69. </el-form>
  70. </div>
  71. </div>
  72. </template>
  73. <script>
  74. import uploadFiles from "@/components/public/uploadFiles"
  75. import { prodRecordQuery } from "@/api/product"
  76. import { mapGetters } from "vuex"
  77. export default {
  78. components: { uploadFiles },
  79. created() {
  80. this.getProdType()
  81. },
  82. mounted() {
  83. // this.$refs.ruleForm.validate(valid => {
  84. // console.log(valid)
  85. // })
  86. let listener = document.querySelector('.saga-brand-box')
  87. listener.addEventListener('scroll', this.onScroll)
  88. // option
  89. this.list = this.states.map(item => {
  90. return { value: `value:${item}`, label: `label:${item}` }
  91. })
  92. },
  93. data() {
  94. let checkBrand = (rule, value, callback) => {
  95. if (value == '') {
  96. return callback(new Error('请选择品牌'))
  97. } else {
  98. callback()
  99. }
  100. }
  101. return {
  102. read: false,
  103. list: [],
  104. keysArr: [],
  105. loading: false,
  106. states: ["Alabama", "Alaska", "Arizona",
  107. "Arkansas", "California", "Colorado",
  108. "Connecticut", "Delaware", "Florida",
  109. "Georgia", "Hawaii", "Idaho", "Illinois",
  110. "Indiana", "Iowa", "Kansas", "Kentucky",
  111. "Louisiana", "Maine", "Maryland",
  112. "Massachusetts", "Michigan", "Minnesota",
  113. "Mississippi", "Missouri", "Montana",
  114. "Nebraska", "Nevada", "New Hampshire",
  115. "New Jersey", "New Mexico", "New York",
  116. "North Carolina", "North Dakota", "Ohio",
  117. "Oklahoma", "Oregon", "Pennsylvania",
  118. "Rhode Island", "South Carolina",
  119. "South Dakota", "Tennessee", "Texas",
  120. "Utah", "Vermont", "Virginia",
  121. "Washington", "West Virginia", "Wisconsin",
  122. "Wyoming"],
  123. bbs: [{
  124. value: '选项1',
  125. label: '黄金糕'
  126. }, {
  127. value: '选项2',
  128. label: '双皮奶'
  129. }, {
  130. value: '选项3',
  131. label: '蚵仔煎'
  132. }, {
  133. value: '选项4',
  134. label: '龙须面'
  135. }, {
  136. value: '选项5',
  137. label: '北京烤鸭'
  138. }],
  139. brandList: [{
  140. value: '选项1',
  141. label: '黄金糕'
  142. }, {
  143. value: '选项2',
  144. label: '双皮奶'
  145. }, {
  146. value: '选项3',
  147. label: '蚵仔煎'
  148. }, {
  149. value: '选项4',
  150. label: '龙须面'
  151. }, {
  152. value: '选项5',
  153. label: '北京烤鸭'
  154. }],
  155. productList: [{
  156. label: '热门城市',
  157. options: [{
  158. value: 'Shanghai',
  159. label: '上海'
  160. }, {
  161. value: 'Beijing',
  162. label: '北京'
  163. }]
  164. }, {
  165. label: '城市名',
  166. options: [{
  167. value: 'Chengdu',
  168. label: '成都'
  169. }, {
  170. value: 'Shenzhen',
  171. label: '深圳'
  172. }, {
  173. value: 'Guangzhou',
  174. label: '广州'
  175. }, {
  176. value: 'Dalian',
  177. label: '大连'
  178. }]
  179. }],
  180. labelKey: [
  181. {
  182. name: '基本信息',
  183. }, {
  184. name: '技术参数',
  185. }, {
  186. name: '附件信息',
  187. }
  188. ],
  189. stepActive: '0',
  190. tabPosition: 'left',
  191. ruleForm: {
  192. product: '',
  193. brand: '',
  194. type: '',
  195. },
  196. rules: {
  197. product: [
  198. { required: true, message: '请选择产品类型', trigger: 'change' }
  199. ],
  200. brand: [
  201. { required: true, validator: checkBrand, trigger: 'focus,blur' }
  202. ],
  203. type: [
  204. { required: true, message: '请输入型号', trigger: 'blur' }
  205. ]
  206. }
  207. }
  208. },
  209. computed: {
  210. ...mapGetters('layout', ['dictionary']),
  211. },
  212. methods: {
  213. getProdType() {
  214. let params = {
  215. Type: this.dictionary.dictionaryType,
  216. GroupId: this.dictionary.groupId,
  217. ProjectId: this.dictionary.projectId,
  218. }
  219. prodRecordQuery(params, res => {
  220. debugger
  221. })
  222. },
  223. jump(tab, event) {
  224. this.stepActive = tab.index
  225. let jump = document.querySelectorAll('.d_jump'),
  226. total = jump[this.stepActive].offsetTop,//获取需要滚动的距离
  227. listener = document.querySelector('.saga-brand-box'),
  228. distance = listener.scrollTop,
  229. step = total / 50;
  230. if (total > distance) {
  231. smoothDown()
  232. } else {
  233. let newTotal = distance - total + 100
  234. step = newTotal / 50
  235. smoothUp()
  236. }
  237. function smoothDown() {
  238. if (distance < total) {
  239. distance += step
  240. listener.scrollTop = distance
  241. setTimeout(smoothDown, 10)
  242. } else {
  243. listener.scrollTop = total
  244. }
  245. }
  246. function smoothUp() {
  247. if (distance > total) {
  248. distance -= step
  249. listener.scrollTop = distance
  250. setTimeout(smoothUp, 10)
  251. } else {
  252. listener.scrollTop = total
  253. }
  254. }
  255. },
  256. onScroll() {
  257. let scrolled = document.querySelector('.saga-brand-box').scrollTop
  258. let jump = document.querySelectorAll('.d_jump')
  259. for (let i = 0; i < jump.length; i++) {
  260. if (jump[i].offsetTop >= scrolled) {
  261. this.stepActive = i.toString()
  262. break
  263. }
  264. }
  265. },
  266. remoteMethods(query) {
  267. console.log(query, 'query')
  268. if (query !== '') {
  269. this.loading = true
  270. setTimeout(() => {
  271. this.loading = false
  272. this.brandList = this.list.filter(item => {
  273. return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1
  274. })
  275. }, 200)
  276. } else {
  277. this.brandList = []
  278. }
  279. },
  280. focus() {
  281. this.brandList = this.bbs
  282. },
  283. submitForm() {
  284. this.$refs.ruleForm.validate((valid) => {
  285. if (valid) {
  286. console.log(this.ruleForm);
  287. } else {
  288. console.log('error submit!!');
  289. return false;
  290. }
  291. });
  292. },
  293. changeItem(file) {
  294. let arr = []
  295. file.forEach(({ Key }) => arr.push({ Key }))
  296. }
  297. },
  298. watch: {}
  299. }
  300. </script>
  301. <style lang="scss" scoped>
  302. @media screen and (max-width: 1500px) {
  303. .saga-supplement-box {
  304. height: 500px;
  305. border: 1px solid #42b983;
  306. }
  307. }
  308. .saga-supplement-box {
  309. position: relative;
  310. height: 800px;
  311. margin-top: 90px;
  312. .saga-brand-box {
  313. width: 100%;
  314. max-height: 800px;
  315. /*margin-top: 90px;*/
  316. padding: 16px;
  317. box-sizing: border-box;
  318. background: rgba(255, 255, 255, 1);
  319. overflow-y: auto;
  320. .reset-steps {
  321. position: absolute;
  322. left: 0;
  323. top: 0;
  324. height: 100%;
  325. }
  326. .d_jump {
  327. display: inline-block;
  328. width: calc(100% - 108px);
  329. position: relative;
  330. left: 100px;
  331. .title {
  332. margin: 25px 70px;
  333. padding-bottom: 10px;
  334. font-size: 16px;
  335. color: #1f2429;
  336. border-bottom: 1px solid #eff0f1;
  337. }
  338. /deep/ .el-input__inner {
  339. width: 320px;
  340. }
  341. }
  342. .el-form-item--mini.el-form-item,
  343. .el-form-item--small.el-form-item {
  344. padding: 0 340px;
  345. }
  346. }
  347. /deep/ .el-scrollbar__wrap {
  348. overflow-x: hidden;
  349. }
  350. }
  351. ::-webkit-scrollbar-thumb {
  352. height: 50px;
  353. outline-offset: -2px;
  354. outline: 2px solid #dddee0;
  355. border: 2px solid #dddee0;
  356. background-color: #dddee0;
  357. border-radius: 4px;
  358. }
  359. ::-webkit-scrollbar {
  360. width: 8px;
  361. height: 8px;
  362. }
  363. </style>