新增分屏功能
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