新增分屏功能
Showing
2 changed files
with
67 additions
and
46 deletions
... | @@ -213,38 +213,6 @@ import InformationTable from "./InformationTable"; | ... | @@ -213,38 +213,6 @@ import InformationTable from "./InformationTable"; |
213 | import { Init, fristReg } from "@/api/cfdjFlow.js"; | 213 | import { Init, fristReg } from "@/api/cfdjFlow.js"; |
214 | import { mapGetters } from "vuex"; | 214 | import { mapGetters } from "vuex"; |
215 | export default { | 215 | export default { |
216 | created() { | ||
217 | // console.log(1111111111111111); | ||
218 | var bsmSldy = this.$parent._data.unitData[0].bsmSldy; | ||
219 | var formdata = new FormData(); | ||
220 | formdata.append("bsmSldy", bsmSldy); | ||
221 | Init(formdata).then((res) => { | ||
222 | if (res.code === 200 && res.result) { | ||
223 | this.ruleForm = { | ||
224 | ...res.result, | ||
225 | ...res.result.qlxxdatas, | ||
226 | ...res.result.djQlxxCfdjDo, | ||
227 | }; | ||
228 | } | ||
229 | }); | ||
230 | }, | ||
231 | watch: { | ||
232 | |||
233 | }, | ||
234 | components: { InformationTable }, | ||
235 | props: { | ||
236 | flag: { | ||
237 | type: Boolean, | ||
238 | default: false, | ||
239 | }, | ||
240 | fetch: { | ||
241 | type: Boolean, | ||
242 | default: false, | ||
243 | }, | ||
244 | }, | ||
245 | computed: { | ||
246 | ...mapGetters(["dictData"]), | ||
247 | }, | ||
248 | data() { | 216 | data() { |
249 | return { | 217 | return { |
250 | disabled: true, | 218 | disabled: true, |
... | @@ -279,8 +247,43 @@ export default { | ... | @@ -279,8 +247,43 @@ export default { |
279 | czr: "", | 247 | czr: "", |
280 | }, | 248 | }, |
281 | rules: {}, | 249 | rules: {}, |
250 | //传递参数 | ||
251 | propsParam: {}, | ||
282 | }; | 252 | }; |
283 | }, | 253 | }, |
254 | created() { | ||
255 | // console.log(1111111111111111); | ||
256 | this.propsParam = this.$attrs; | ||
257 | var formdata = new FormData(); | ||
258 | formdata.append("bsmSldy", this.propsParam.bsmSldy); | ||
259 | Init(formdata).then((res) => { | ||
260 | if (res.code === 200 && res.result) { | ||
261 | this.ruleForm = { | ||
262 | ...res.result, | ||
263 | ...res.result.qlxxdatas, | ||
264 | ...res.result.djQlxxCfdjDo, | ||
265 | }; | ||
266 | } | ||
267 | }); | ||
268 | }, | ||
269 | watch: { | ||
270 | |||
271 | }, | ||
272 | components: { InformationTable }, | ||
273 | props: { | ||
274 | flag: { | ||
275 | type: Boolean, | ||
276 | default: false, | ||
277 | }, | ||
278 | fetch: { | ||
279 | type: Boolean, | ||
280 | default: false, | ||
281 | }, | ||
282 | }, | ||
283 | computed: { | ||
284 | ...mapGetters(["dictData"]), | ||
285 | }, | ||
286 | |||
284 | methods: { | 287 | methods: { |
285 | list(bsmSldy) { | 288 | list(bsmSldy) { |
286 | var formdata = new FormData(); | 289 | var formdata = new FormData(); | ... | ... |
... | @@ -43,6 +43,9 @@ | ... | @@ -43,6 +43,9 @@ |
43 | </el-menu-item> | 43 | </el-menu-item> |
44 | </el-menu> | 44 | </el-menu> |
45 | </div> | 45 | </div> |
46 | <div v-if="splitScreen" class="splitScreen-con"> | ||
47 | <component :is="clxxForm" v-bind="currentSelectProps" :key="fresh" /> | ||
48 | </div> | ||
46 | <!-- 表单内容区域 --> | 49 | <!-- 表单内容区域 --> |
47 | <div id="rightContainer"> | 50 | <div id="rightContainer"> |
48 | <div class="tabDiv"> | 51 | <div class="tabDiv"> |
... | @@ -61,9 +64,6 @@ | ... | @@ -61,9 +64,6 @@ |
61 | v-bind="currentSelectProps" | 64 | v-bind="currentSelectProps" |
62 | /> | 65 | /> |
63 | </div> | 66 | </div> |
64 | <!-- <div style="width: 100%"> | ||
65 | |||
66 | </div> --> | ||
67 | </div> | 67 | </div> |
68 | </div> | 68 | </div> |
69 | </div> | 69 | </div> |
... | @@ -89,9 +89,9 @@ export default { | ... | @@ -89,9 +89,9 @@ export default { |
89 | data() { | 89 | data() { |
90 | return { | 90 | return { |
91 | //受理申请标识码 | 91 | //受理申请标识码 |
92 | bsmSlsq: "", | 92 | bsmSlsq: this.$route.query.bsmSlsq, |
93 | //当前流程所在环节 | 93 | //当前流程所在环节 |
94 | bestepid: "", | 94 | bestepid: this.$route.query.bestepid, |
95 | //顶部左侧按钮集合 | 95 | //顶部左侧按钮集合 |
96 | leftButtonList: [], | 96 | leftButtonList: [], |
97 | //顶部右侧按钮集合 | 97 | //顶部右侧按钮集合 |
... | @@ -108,11 +108,17 @@ export default { | ... | @@ -108,11 +108,17 @@ export default { |
108 | fresh: 0, | 108 | fresh: 0, |
109 | //设置表单传递数据 | 109 | //设置表单传递数据 |
110 | currentSelectProps: {}, | 110 | currentSelectProps: {}, |
111 | //是否开启材料分屏 | ||
112 | splitScreen: false, | ||
113 | //材料分屏表单 | ||
114 | clxxForm: "", | ||
115 | //材料信息选择卡索引 | ||
116 | clxxIndex: "", | ||
117 | //材料信息选项卡对象 | ||
118 | clxxTab: {}, | ||
111 | }; | 119 | }; |
112 | }, | 120 | }, |
113 | mounted() { | 121 | mounted() { |
114 | this.bsmSlsq = this.$route.query.bsmSlsq; | ||
115 | this.bestepid = this.$route.query.bestepid; | ||
116 | this.loadBdcdylist(); | 122 | this.loadBdcdylist(); |
117 | this.flowInitParam(); | 123 | this.flowInitParam(); |
118 | }, | 124 | }, |
... | @@ -129,6 +135,14 @@ export default { | ... | @@ -129,6 +135,14 @@ export default { |
129 | this.tabList = res.result.form; | 135 | this.tabList = res.result.form; |
130 | //默认选择第一个选项卡内容 | 136 | //默认选择第一个选项卡内容 |
131 | this.tabName = res.result.form[0].value; | 137 | this.tabName = res.result.form[0].value; |
138 | let that = this; | ||
139 | this.tabList.forEach(function (item, index) { | ||
140 | if (item.value == "clxx") { | ||
141 | that.clxxIndex = index; | ||
142 | that.clxxForm = getForm(item.value); | ||
143 | that.clxxTab = item; | ||
144 | } | ||
145 | }); | ||
132 | //默认加载第一个选项卡的组件内容 | 146 | //默认加载第一个选项卡的组件内容 |
133 | this.getFromRouter(res.result.form[0].value); | 147 | this.getFromRouter(res.result.form[0].value); |
134 | } | 148 | } |
... | @@ -142,13 +156,17 @@ export default { | ... | @@ -142,13 +156,17 @@ export default { |
142 | this.zsylFlag = true; | 156 | this.zsylFlag = true; |
143 | break; | 157 | break; |
144 | case "clfp": | 158 | case "clfp": |
145 | this.key++; | 159 | this.splitScreen = this.splitScreen ? false : true; |
146 | this.issplitScreen = !this.issplitScreen; | 160 | //this.$alert(this.tabName); |
147 | this.flag = !this.flag; | 161 | if (this.splitScreen) { |
148 | if (this.issplitScreen) { | 162 | //如果当前选项卡为材料信息内容,递减到上一个选项卡内容 |
149 | this.tabList.splice(1, 1); | 163 | if (this.tabName == this.clxxTab.value) { |
164 | this.tabName = this.tabList[this.clxxIndex - 1].value; | ||
165 | this.getFromRouter(this.tabList[this.clxxIndex - 1].value); | ||
166 | } | ||
167 | this.tabList.splice(this.clxxIndex, 1); | ||
150 | } else { | 168 | } else { |
151 | this.tabList = [...this.tabList1]; | 169 | this.tabList.splice(this.clxxIndex, 1, this.clxxTab); |
152 | } | 170 | } |
153 | break; | 171 | break; |
154 | case "th": | 172 | case "th": |
... | @@ -206,11 +224,11 @@ export default { | ... | @@ -206,11 +224,11 @@ export default { |
206 | }, | 224 | }, |
207 | //表单选项卡事件 | 225 | //表单选项卡事件 |
208 | tabClick(tab, event) { | 226 | tabClick(tab, event) { |
227 | //this.$alert(tab.name); | ||
209 | this.getFromRouter(tab.name); | 228 | this.getFromRouter(tab.name); |
210 | }, | 229 | }, |
211 | //切换选项卡内容组件 | 230 | //切换选项卡内容组件 |
212 | getFromRouter(tabname) { | 231 | getFromRouter(tabname) { |
213 | //this.$alert(getForm(tabname)); | ||
214 | this.componentTag = getForm(tabname); | 232 | this.componentTag = getForm(tabname); |
215 | }, | 233 | }, |
216 | }, | 234 | }, | ... | ... |
-
Please register or sign in to post a comment