sagaSupplement.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379
  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="基本信息" name="0"/>
  6. <el-tab-pane label="技术参数" name="1"/>
  7. <el-tab-pane label="附件信息" name="2"/>
  8. </el-tabs>
  9. <el-form label-position="top" :model="ruleForm" :rules="rules" ref="ruleForm">
  10. <section class="d_jump">
  11. <p class="title"><i class="iconfont iconjuxing" style="color:#3A8DDE;"></i>基本信息</p>
  12. <el-form-item label="产品类型" prop="product">
  13. <el-select v-model="ruleForm.product" filterable placeholder="请选择" @change="handleChangeProduct">
  14. <el-option-group v-for="group in productList" :key="group.label" :label="group.text">
  15. <el-option v-for="item in group.options" :key="item.Code" :label="item.AliasName"
  16. :value="item.Code"></el-option>
  17. </el-option-group>
  18. </el-select>
  19. </el-form-item>
  20. <el-form-item label="品牌" prop="brand">
  21. <el-select v-model="ruleForm.brand" filterable remote @change="handleChangeBrand"
  22. placeholder="请选择" :remote-method="remoteMethods" :loading="loading">
  23. <el-option v-for="item in brandList" :key="item.BrandID"
  24. :label="`${item.BrandCname}${item.BrandName?`(${item.BrandCname})`:''}`"
  25. :value="item.BrandID"/>
  26. </el-select>
  27. </el-form-item>
  28. <el-form-item label="型号" prop="type">
  29. <el-input v-model="ruleForm.type" />
  30. </el-form-item>
  31. </section>
  32. <section class="d_jump">
  33. <p class="title"><i class="iconfont iconjuxing" style="color:#3A8DDE;"></i>技术参数</p>
  34. <template v-for="(item,index) in TechnicalData">
  35. <el-form-item :label="item.Name">
  36. <el-input
  37. v-if="item.InputMode == 'B1' || item.InputMode == 'B2'"
  38. v-model="ruleForm[item.Code]"/>
  39. <el-input
  40. v-else-if="item.InputMode == 'A1'||item.InputMode == 'A2'"
  41. type="number"
  42. v-model="ruleForm[item.Code]">
  43. <template slot="append" v-if="item.Unit">{{item.Unit}}</template>
  44. </el-input>
  45. <el-select
  46. v-else-if="item.InputMode == 'D1' || item.InputMode == 'E2'"
  47. placeholder="请选择"
  48. v-model="ruleForm[item.Code]">
  49. <el-option :key="op.Name" :label="op.Name" :value="op.Code" v-for="op in item.options"></el-option>
  50. </el-select>
  51. <!-- <el-select-->
  52. <!-- v-else-if="item.InputMode == 'D2'"-->
  53. <!-- placeholder="请选择"-->
  54. <!-- v-model="ruleForm[item.Code]"-->
  55. <!-- multiple-->
  56. <!-- collapse-tags>-->
  57. <!-- <el-option :key="op.Name" :label="op.Name" :value="op.Code" v-for="op in item.options"></el-option>-->
  58. <!-- </el-select>-->
  59. <el-date-picker
  60. v-else-if="item.InputMode == 'C6'"
  61. v-model="ruleForm[item.Code]"
  62. type="daterange"
  63. value-format="yyyy-MM-dd"
  64. range-separator="至"
  65. start-placeholder="开始日期"
  66. end-placeholder="结束日期"/>
  67. <el-cascader
  68. v-else-if="item.InputMode == 'D1L'"
  69. placeholder="请选择"
  70. :options="item.options"
  71. v-model="ruleForm[item.Code]"
  72. :props="item.props"
  73. filterable
  74. :show-all-levels="false"
  75. clearable
  76. style="width: 200px"/>
  77. <el-input
  78. v-else-if="item.InputMode == 'L'||item.InputMode == 'L1'||item.InputMode == 'L2'||item.InputMode == 'M'"
  79. v-model="ruleForm[item.Code]">
  80. <template slot="append" v-if="item.Unit">{{item.Unit}}</template>
  81. </el-input>
  82. <el-date-picker
  83. v-else-if="item.InputMode == 'C5'" v-model="ruleForm[item.Code]"
  84. placeholder="选择日期"
  85. value-format="yyyy-MM-dd"
  86. type="date">
  87. </el-date-picker>
  88. <el-input v-else v-model="ruleForm[item.Code]"/>
  89. </el-form-item>
  90. </template>
  91. </section>
  92. <section class="d_jump">
  93. <p class="title"><i class="iconfont iconjuxing" style="color:#3A8DDE;"></i>附件信息</p>
  94. <template v-for="(item,index) in AttachmentInfo">
  95. <el-form-item :label="item.Name">
  96. <uploadFiles :readOnly="read" :keysArr="keysArr" @change="changeItem" v-model="ruleForm[item.Code]"/>
  97. </el-form-item>
  98. </template>
  99. </section>
  100. </el-form>
  101. </div>
  102. </div>
  103. </template>
  104. <script>
  105. import uploadFiles from "@/components/public/uploadFiles"
  106. import {defFuncidQuery, prodRecordQuery} from "@/api/product"
  107. import {brandQueryByKeyword, brandRecordQuery} from "@/api/brand"
  108. import {mapGetters} from "vuex"
  109. export default {
  110. components: {uploadFiles},
  111. created() {
  112. this.getProdType()
  113. this.getBrandNum5()
  114. },
  115. mounted() {
  116. console.log(this.$route.query)
  117. let listener = document.querySelector('.saga-brand-box')
  118. listener.addEventListener('scroll', this.onScroll)
  119. // option
  120. this.list = this.states.map(item => {
  121. return {value: `value:${item}`, label: `label:${item}`}
  122. })
  123. },
  124. data() {
  125. let checkBrand = (rule, value, callback) => {
  126. if (value == '') {
  127. return callback(new Error('请选择品牌'))
  128. } else {
  129. callback()
  130. }
  131. }
  132. return {
  133. TechnicalData: [],
  134. AttachmentInfo: [],
  135. read: false,
  136. list: [],
  137. keysArr: [],
  138. loading: false,
  139. bbs: [],
  140. brandList: [],
  141. productList: [],
  142. stepActive: '0',
  143. tabPosition: 'left',
  144. ruleForm: {
  145. product: '',
  146. brand: [],
  147. type: '',
  148. },
  149. rules: {
  150. product: [
  151. {required: true, message: '请选择产品类型', trigger: 'change'}
  152. ],
  153. brand: [
  154. {required: true, validator: checkBrand, trigger: 'blur'}
  155. ],
  156. type: [
  157. {required: true, message: '请输入型号', trigger: 'blur'}
  158. ]
  159. }
  160. }
  161. },
  162. computed: {
  163. ...mapGetters('layout', ['dictionary']),
  164. },
  165. methods: {
  166. getProdType() {// 获取产品类型
  167. let params = {
  168. Type: this.dictionary.dictionaryType,
  169. GroupId: this.dictionary.groupId,
  170. ProjectId: this.dictionary.projectId,
  171. }
  172. prodRecordQuery(params, res => {
  173. res.Content.map(item => {
  174. if (item.label == 'record') {
  175. item.text = `最近使用`
  176. } else if (item.label == 'all') {
  177. item.text = ''
  178. }
  179. })
  180. this.productList = res.Content
  181. })
  182. },
  183. getBrandNum5() {// 获取最新创建过产品型号的5个品牌
  184. let params = {
  185. Type: this.dictionary.dictionaryType,
  186. GroupId: this.dictionary.groupId,
  187. ProjectId: this.dictionary.projectId,
  188. }
  189. brandRecordQuery(params, res => {
  190. this.bbs = res.Content
  191. this.brandList = res.Content
  192. })
  193. },
  194. handleChangeProduct(item) {// 切换产品类型
  195. let param = {
  196. Type: this.dictionary.dictionaryType,
  197. GroupId: this.dictionary.groupId,
  198. ProjectId: this.dictionary.projectId,
  199. ClassCode: item
  200. }
  201. defFuncidQuery(param, res => {
  202. this.TechnicalData = []
  203. res.Content.TechnicalData.forEach(i => {
  204. for (let key in i) {
  205. i[key].forEach(i => this.TechnicalData.push(i))
  206. }
  207. })
  208. this.AttachmentInfo = res.Content.AttachmentInfo
  209. })
  210. },
  211. handleChangeBrand(item) {// 切换品牌
  212. debugger
  213. },
  214. jump(tab, event) {
  215. this.stepActive = tab.index
  216. let jump = document.querySelectorAll('.d_jump'),
  217. total = jump[this.stepActive].offsetTop,//获取需要滚动的距离
  218. listener = document.querySelector('.saga-brand-box'),
  219. distance = listener.scrollTop,
  220. step = total / 50;
  221. if (total > distance) {
  222. smoothDown()
  223. } else {
  224. let newTotal = distance - total + 100
  225. step = newTotal / 50
  226. smoothUp()
  227. }
  228. function smoothDown() {
  229. if (distance < total) {
  230. distance += step
  231. listener.scrollTop = distance
  232. setTimeout(smoothDown, 10)
  233. } else {
  234. listener.scrollTop = total
  235. }
  236. }
  237. function smoothUp() {
  238. if (distance > total) {
  239. distance -= step
  240. listener.scrollTop = distance
  241. setTimeout(smoothUp, 10)
  242. } else {
  243. listener.scrollTop = total
  244. }
  245. }
  246. },
  247. onScroll() {
  248. let scrolled = document.querySelector('.saga-brand-box').scrollTop
  249. let jump = document.querySelectorAll('.d_jump')
  250. for (let i = 0; i < jump.length; i++) {
  251. if (jump[i].offsetTop >= scrolled) {
  252. this.stepActive = i.toString()
  253. break
  254. }
  255. }
  256. },
  257. remoteMethods(query) {
  258. if (query !== '') {
  259. this.loading = true
  260. brandQueryByKeyword({keyword: query, PageSize: 50,}, res => {
  261. this.loading = false
  262. this.brandList = res.Content
  263. })
  264. } else {
  265. this.brandList = this.bbs
  266. }
  267. },
  268. submitForm() {
  269. this.$refs.ruleForm.validate((valid) => {
  270. if (valid) {
  271. console.log(this.ruleForm);
  272. } else {
  273. console.log('error submit!!');
  274. return false;
  275. }
  276. });
  277. },
  278. changeItem(file) {
  279. let arr = []
  280. file.forEach(({ Key }) => arr.push({ Key }))
  281. }
  282. },
  283. watch: {}
  284. }
  285. </script>
  286. <style lang="scss" scoped>
  287. @media screen and (max-width: 1500px) {
  288. .saga-supplement-box {
  289. height: 500px;
  290. border: 1px solid #42b983;
  291. }
  292. }
  293. .saga-supplement-box {
  294. position: relative;
  295. height: 800px;
  296. margin-top: 90px;
  297. background: #fff;
  298. .saga-brand-box {
  299. width: 100%;
  300. max-height: 800px;
  301. /*margin-top: 90px;*/
  302. padding: 16px;
  303. box-sizing: border-box;
  304. background: rgba(255, 255, 255, 1);
  305. overflow-y: auto;
  306. .reset-steps {
  307. position: absolute;
  308. left: 0;
  309. top: 0;
  310. height: 100%;
  311. }
  312. .d_jump {
  313. display: inline-block;
  314. width: calc(100% - 108px);
  315. position: relative;
  316. left: 100px;
  317. .title {
  318. margin: 25px 70px;
  319. padding-bottom: 10px;
  320. font-size: 16px;
  321. color: #1f2429;
  322. border-bottom: 1px solid #eff0f1;
  323. }
  324. /deep/ .el-input__inner {
  325. width: 320px;
  326. }
  327. }
  328. .el-form-item--mini.el-form-item,
  329. .el-form-item--small.el-form-item {
  330. padding: 0 340px;
  331. }
  332. }
  333. /deep/ .el-scrollbar__wrap {
  334. overflow-x: hidden;
  335. }
  336. }
  337. ::-webkit-scrollbar-thumb {
  338. height: 50px;
  339. outline-offset: -2px;
  340. outline: 2px solid #dddee0;
  341. border: 2px solid #dddee0;
  342. background-color: #dddee0;
  343. border-radius: 4px;
  344. }
  345. ::-webkit-scrollbar {
  346. width: 8px;
  347. height: 8px;
  348. }
  349. </style>