sagaSupplement.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463
  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="ProdCode">
  13. <el-select v-model="ruleForm.ProdCode" 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="BrandID">
  21. <el-select v-model="ruleForm.BrandID" 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="Model">
  29. <el-input v-model="ruleForm.Model" />
  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 in TechnicalData">
  35. <el-form-item :label="item.Name" :key="item.Code">
  36. <el-input
  37. v-if="item.InputMode == 'B1' || item.InputMode == 'B2'"
  38. v-model="ruleForm.ProdParam[item.Code]"/>
  39. <el-input
  40. v-else-if="item.InputMode == 'A1'||item.InputMode == 'A2'"
  41. type="number"
  42. v-model="ruleForm.ProdParam[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' || item.InputMode == 'D1L'"
  47. placeholder="请选择"
  48. v-model="ruleForm.ProdParam[item.Code]"
  49. clearable>
  50. <el-option :key="`${item.Code}-${op.code}`" :label="op.name" :value="op.code" v-for="op in item.DataSource"></el-option>
  51. </el-select>
  52. <el-select
  53. v-else-if="item.InputMode == 'D2'"
  54. placeholder="请选择"
  55. v-model="ruleForm.ProdParam[item.Code]"
  56. clearable
  57. multiple
  58. collapse-tags>
  59. <el-option :key="`${item.Code}-${op.code}`" :label="op.name" :value="op.code" v-for="op in item.DataSource"></el-option>
  60. </el-select>
  61. <el-select
  62. v-else-if="item.InputMode == 'D3'"
  63. placeholder="请选择"
  64. v-model="ruleForm.ProdParam[item.Code]"
  65. clearable
  66. multiple
  67. collapse-tags>
  68. <el-option :key="`${item.Code}-${op.code}`" :label="op.name" :value="op.code" v-for="op in item.DataSource"></el-option>
  69. </el-select>
  70. <el-date-picker
  71. v-else-if="item.InputMode == 'C6'"
  72. v-model="ruleForm.ProdParam[item.Code]"
  73. type="daterange"
  74. value-format="yyyy-MM-dd"
  75. range-separator="至"
  76. start-placeholder="开始日期"
  77. end-placeholder="结束日期"/>
  78. <!-- <el-cascader
  79. v-else-if="item.InputMode == 'D1L'"
  80. placeholder="请选择"
  81. :options="item.options"
  82. v-model="ruleForm.ProdParam[item.Code]"
  83. :props="item.props"
  84. filterable
  85. :show-all-levels="false"
  86. clearable
  87. style="width: 200px"/> -->
  88. <el-input
  89. v-else-if="item.InputMode == 'L'||item.InputMode == 'L1'||item.InputMode == 'L2'||item.InputMode == 'M'"
  90. v-model="ruleForm.ProdParam[item.Code]">
  91. <template slot="append" v-if="item.Unit">{{item.Unit}}</template>
  92. </el-input>
  93. <el-date-picker
  94. v-else-if="item.InputMode == 'C5'" v-model="ruleForm.ProdParam[item.Code]"
  95. placeholder="选择日期"
  96. value-format="yyyy-MM-dd"
  97. type="date">
  98. </el-date-picker>
  99. <el-input v-else v-model="ruleForm.ProdParam[item.Code]"/>
  100. </el-form-item>
  101. </template>
  102. </section>
  103. <section class="d_jump">
  104. <p class="title"><i class="iconfont iconjuxing" style="color:#3A8DDE;"></i>附件信息</p>
  105. <template v-for="item in AttachmentInfo">
  106. <el-form-item :label="item.Name" :key="item.Code">
  107. <uploadFiles :readOnly="read" :defined="item.Code" :keysArr="ruleForm.ProdFile[item.Code]" @change="changeItem"/>
  108. </el-form-item>
  109. </template>
  110. </section>
  111. </el-form>
  112. </div>
  113. </div>
  114. </template>
  115. <script>
  116. import uploadFiles from "@/components/public/uploadFiles"
  117. import {defFuncidQuery, prodRecordQuery, prodTypeCreate, prodTypeUpdate} from "@/api/product"
  118. import {brandQueryByKeyword, brandRecordQuery} from "@/api/brand"
  119. import {mapGetters} from "vuex"
  120. export default {
  121. components: {uploadFiles},
  122. created() {
  123. this.getProdType()
  124. this.getBrandNum5()
  125. },
  126. mounted() {
  127. let listener = document.querySelector('.saga-brand-box')
  128. listener.addEventListener('scroll', this.onScroll)
  129. window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
  130. },
  131. destroyed() {
  132. window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))
  133. },
  134. data() {
  135. let checkBrand = (rule, value, callback) => {
  136. if (value == '') {
  137. return callback(new Error('请选择品牌'))
  138. } else {
  139. callback()
  140. }
  141. }
  142. return {
  143. TechnicalData: [],
  144. AttachmentInfo: [],
  145. read: false,
  146. loading: false,
  147. defaultBrandList: [],
  148. brandList: [],
  149. productList: [],
  150. stepActive: '0',
  151. tabPosition: 'left',
  152. ruleForm: {
  153. ProdCode: '',
  154. BrandID: '',
  155. Model: '',
  156. ProdParam: {},
  157. ProdFile: {},
  158. },
  159. rules: {
  160. ProdCode: [
  161. {required: true, message: '请选择产品类型', trigger: 'change'}
  162. ],
  163. BrandID: [
  164. {required: true, validator: checkBrand, trigger: 'blur'}
  165. ],
  166. Model: [
  167. {required: true, message: '请输入型号', trigger: 'blur'}
  168. ]
  169. }
  170. }
  171. },
  172. computed: {
  173. ...mapGetters('layout', ['dictionary']),
  174. },
  175. methods: {
  176. beforeunloadHandler(e) {
  177. let {BrandID, ProdCode, Model, ProdFile, ProdParam} = this.ruleForm
  178. // if (BrandID || ProdCode || ruleForm || Object.keys(ProdFile).length > 0 || Object.keys(ProdParam).length > 0) {
  179. if (BrandID || ProdCode || Model) {
  180. e.preventDefault();
  181. // 兼容IE8和Firefox之前的版本
  182. if (e) {
  183. e.returnValue = '系统可能不会保存您所做的更改'
  184. }
  185. return '系统可能不会保存您所做的更改'
  186. }
  187. },
  188. getProdType() {// 获取产品类型
  189. let params = {
  190. Type: this.dictionary.dictionaryType,
  191. GroupId: this.dictionary.groupId,
  192. ProjectId: this.dictionary.projectId,
  193. }
  194. prodRecordQuery(params, res => {
  195. res.Content.map(item => {
  196. if (item.label == 'record') {
  197. item.text = `最近使用`
  198. } else if (item.label == 'all') {
  199. item.text = ''
  200. }
  201. })
  202. this.productList = res.Content
  203. if (this.$route.params.ProdCode) {//如果是修改,加载信息点
  204. this.handleChangeProduct(this.$route.params.ProdCode)
  205. }
  206. if (this.$route.params.BrandID) {
  207. this.ruleForm.BrandID = this.$route.params.Brand.BrandID
  208. }
  209. })
  210. },
  211. getBrandNum5() {// 获取最新创建过产品型号的5个品牌(如果是修改的话只显示修改产品的品牌)
  212. // if (this.$route.params.Brand) {
  213. if (this.$route.params.Brand && Object.keys(this.$route.params.Brand).length > 0) {
  214. this.defaultBrandList = [this.$route.params.Brand]
  215. this.brandList = [this.$route.params.Brand]
  216. } else {
  217. let params = {
  218. Type: this.dictionary.dictionaryType,
  219. GroupId: this.dictionary.groupId,
  220. ProjectId: this.dictionary.projectId,
  221. }
  222. brandRecordQuery(params, res => {
  223. this.defaultBrandList = res.Content
  224. this.brandList = res.Content
  225. })
  226. }
  227. },
  228. handleChangeProduct(item) {// 切换产品类型
  229. let param = {
  230. Type: this.dictionary.dictionaryType,
  231. GroupId: this.dictionary.groupId,
  232. ProjectId: this.dictionary.projectId,
  233. ClassCode: item
  234. }
  235. defFuncidQuery(param, res => {
  236. this.TechnicalData = []
  237. this.ruleForm.ProdParam = {}
  238. this.ruleForm.ProdFile = {}
  239. res.Content.TechnicalData.forEach(group => {
  240. for (let key in group) {
  241. group[key].forEach(i => {
  242. if (i.DataType == 'ENUM' || i.DataType == 'MENUM') {
  243. i.DataSource = JSON.parse(i.DataSource)
  244. }
  245. this.TechnicalData.push(i)
  246. })
  247. }
  248. })
  249. this.AttachmentInfo = res.Content.AttachmentInfo
  250. if (this.$route.params.ProdCode) {//判断是否是修改,回显修改内容
  251. if (!this.ruleForm.ProdCode) {
  252. let {Brand, ProdID, prodCname, ...ruleForm} = this.$route.params
  253. this.ruleForm = Object.assign(this.ruleForm, ruleForm)
  254. }
  255. }
  256. })
  257. },
  258. handleChangeBrand(item) {// 切换品牌
  259. console.log(item)
  260. },
  261. jump(tab, event) {
  262. this.stepActive = tab.index
  263. let jump = document.querySelectorAll('.d_jump'),
  264. total = jump[this.stepActive].offsetTop,//获取需要滚动的距离
  265. listener = document.querySelector('.saga-brand-box'),
  266. distance = listener.scrollTop,
  267. step = total / 50;
  268. if (total > distance) {
  269. smoothDown()
  270. } else {
  271. let newTotal = distance - total + 100
  272. step = newTotal / 50
  273. smoothUp()
  274. }
  275. function smoothDown() {
  276. if (distance < total) {
  277. distance += step
  278. listener.scrollTop = distance
  279. setTimeout(smoothDown, 10)
  280. } else {
  281. listener.scrollTop = total
  282. }
  283. }
  284. function smoothUp() {
  285. if (distance > total) {
  286. distance -= step
  287. listener.scrollTop = distance
  288. setTimeout(smoothUp, 10)
  289. } else {
  290. listener.scrollTop = total
  291. }
  292. }
  293. },
  294. onScroll() {
  295. let scrolled = document.querySelector('.saga-brand-box').scrollTop
  296. let jump = document.querySelectorAll('.d_jump')
  297. for (let i = 0; i < jump.length; i++) {
  298. if (jump[i].offsetTop >= scrolled) {
  299. this.stepActive = i.toString()
  300. break
  301. }
  302. }
  303. },
  304. remoteMethods(query) {// 品牌搜索(显示50条)
  305. if (query !== '') {
  306. this.loading = true
  307. brandQueryByKeyword({keyword: query, PageSize: 50,}, res => {
  308. this.loading = false
  309. this.brandList = res.Content
  310. })
  311. } else {
  312. this.brandList = this.defaultBrandList
  313. }
  314. },
  315. submitForm() {
  316. this.$refs.ruleForm.validate((valid) => {
  317. let type = {
  318. Type: this.dictionary.dictionaryType,
  319. GroupId: this.dictionary.groupId,
  320. ProjectId: this.dictionary.projectId,
  321. }
  322. if (valid) {
  323. if (this.$route.params.ProdID) {//修改
  324. let params = {
  325. Content: [{ProdID: this.$route.params.ProdID, ...this.ruleForm}]
  326. }
  327. prodTypeUpdate(params, res => {
  328. this.$message.success('修改成功!')
  329. this.$router.go(-1)
  330. })
  331. } else {//添加
  332. let param = Object.assign(this.ruleForm, {
  333. Type: this.dictionary.dictionaryType,
  334. GroupId: this.dictionary.groupId,
  335. ProjectId: this.dictionary.projectId,
  336. })
  337. let params = {
  338. Content: [param]
  339. }
  340. prodTypeCreate(params, res => {
  341. this.$message.success('创建成功!')
  342. this.$router.push('/product')
  343. })
  344. }
  345. } else {
  346. console.log('error submit!!');
  347. return false;
  348. }
  349. });
  350. },
  351. resetForm() {
  352. this.$refs.ruleForm.validate((valid) => {
  353. if (valid) {
  354. let param = Object.assign(this.ruleForm, {
  355. Type: this.dictionary.dictionaryType,
  356. GroupId: this.dictionary.groupId,
  357. ProjectId: this.dictionary.projectId,
  358. })
  359. let params = {
  360. Content: [param]
  361. }
  362. prodTypeCreate(params, res => {
  363. this.$message.success('创建成功!')
  364. this.ruleForm.ProdParam = {}
  365. this.ruleForm.ProdFile = {}
  366. this.ruleForm.Model = ''
  367. })
  368. } else {
  369. return false;
  370. }
  371. });
  372. },
  373. changeItem(files, code) {
  374. this.ruleForm.ProdFile[code] = files
  375. }
  376. },
  377. watch: {}
  378. }
  379. </script>
  380. <style lang="scss" scoped>
  381. .saga-supplement-box {
  382. position: relative;
  383. height: 100%;
  384. margin-top: 90px;
  385. background: #fff;
  386. .saga-brand-box {
  387. width: 100%;
  388. height: 100%;
  389. padding: 16px;
  390. box-sizing: border-box;
  391. background: rgba(255, 255, 255, 1);
  392. overflow-y: auto;
  393. .reset-steps {
  394. position: absolute;
  395. left: 0;
  396. top: 0;
  397. height: 100%;
  398. }
  399. .d_jump {
  400. display: inline-block;
  401. width: calc(100% - 108px);
  402. position: relative;
  403. left: 100px;
  404. .title {
  405. margin: 25px 70px;
  406. padding-bottom: 10px;
  407. font-size: 16px;
  408. color: #1f2429;
  409. border-bottom: 1px solid #eff0f1;
  410. }
  411. .el-select,/deep/ .el-form-item__content, .el-cascader {
  412. width: 320px;
  413. }
  414. }
  415. .el-form-item--mini.el-form-item,
  416. .el-form-item--small.el-form-item {
  417. padding: 0 340px;
  418. }
  419. }
  420. /deep/ .el-scrollbar__wrap {
  421. overflow-x: hidden;
  422. }
  423. }
  424. ::-webkit-scrollbar-thumb {
  425. height: 50px;
  426. outline-offset: -2px;
  427. outline: 2px solid #dddee0;
  428. border: 2px solid #dddee0;
  429. background-color: #dddee0;
  430. border-radius: 4px;
  431. }
  432. ::-webkit-scrollbar {
  433. width: 8px;
  434. height: 8px;
  435. }
  436. </style>