style:发起申请
Showing
5 changed files
with
200 additions
and
56 deletions
| ... | @@ -80,6 +80,15 @@ export const asyncRoutes = [ | ... | @@ -80,6 +80,15 @@ export const asyncRoutes = [ | 
| 80 | component: () => import('@/views/ywbl/ybx/ybx.vue'), | 80 | component: () => import('@/views/ywbl/ybx/ybx.vue'), | 
| 81 | name: 'ybx', | 81 | name: 'ybx', | 
| 82 | meta: { title: '已办箱' } | 82 | meta: { title: '已办箱' } | 
| 83 | }, | ||
| 84 | { | ||
| 85 | path: 'fqsq', | ||
| 86 | id: '24', | ||
| 87 | parentId: '2', | ||
| 88 | component: () => import('@/views/ywbl/fqsq/fqsq.vue'), | ||
| 89 | name: 'fqsq', | ||
| 90 | hidden: true, | ||
| 91 | meta: { title: '发起申请' } | ||
| 83 | } | 92 | } | 
| 84 | ] | 93 | ] | 
| 85 | }, | 94 | }, | ... | ... | 
| 1 | <template> | ||
| 2 | <div class="appli-header"> | ||
| 3 | <ul class="header-left"> | ||
| 4 | <li> | ||
| 5 | 图形定位 | ||
| 6 | </li> | ||
| 7 | <li> | ||
| 8 | 登记薄 | ||
| 9 | </li> | ||
| 10 | <li> | ||
| 11 | 证书预览 | ||
| 12 | </li> | ||
| 13 | <li> | ||
| 14 | 流程图 | ||
| 15 | </li> | ||
| 16 | <li> | ||
| 17 | 材料导入 | ||
| 18 | </li> | ||
| 19 | <li> | ||
| 20 | 打印申请书 | ||
| 21 | </li> | ||
| 22 | </ul> | ||
| 23 | |||
| 24 | <ul class="header-right"> | ||
| 25 | <li> | ||
| 26 | 登簿 | ||
| 27 | </li> | ||
| 28 | <li> | ||
| 29 | 退回 | ||
| 30 | </li> | ||
| 31 | <li> | ||
| 32 | 转出 | ||
| 33 | </li> | ||
| 34 | <li @click="closeDialog" class="pointer"> | ||
| 35 | <i class="el-icon-circle-close"></i> | ||
| 36 | </li> | ||
| 37 | </ul> | ||
| 38 | </div> | ||
| 39 | </template> | ||
| 40 | |||
| 41 | <script> | ||
| 42 | export default { | ||
| 43 | props: { | ||
| 44 | value: { type: Boolean, default: false }, | ||
| 45 | }, | ||
| 46 | methods: { | ||
| 47 | closeDialog () { | ||
| 48 | this.$emit('input', false) | ||
| 49 | } | ||
| 50 | } | ||
| 51 | } | ||
| 52 | </script> | ||
| 53 | <style scoped lang="scss"> | ||
| 54 | @import "~@/styles/mixin.scss"; | ||
| 55 | </style> | 
src/views/ywbl/fqsq/components/slxx.vue
0 → 100644
| 1 | <template> | ||
| 2 | <div class='slxx'> | ||
| 3 | <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px"> | ||
| 4 | <div class="slxx_title">受理信息</div> | ||
| 5 | <el-row> | ||
| 6 | <el-col :span="8"> | ||
| 7 | <el-form-item label="业务号" prop="ywh"> | ||
| 8 | <el-input v-model="ruleForm.ywh"></el-input> | ||
| 9 | </el-form-item> | ||
| 10 | </el-col> | ||
| 11 | </el-row> | ||
| 12 | </el-form> | ||
| 13 | </div> | ||
| 14 | </template> | ||
| 15 | <script> | ||
| 16 | |||
| 17 | export default { | ||
| 18 | /**注册组件*/ | ||
| 19 | components: {}, | ||
| 20 | data () { | ||
| 21 | return { | ||
| 22 | ruleForm: { | ||
| 23 | ywh: '' | ||
| 24 | }, | ||
| 25 | rules: { | ||
| 26 | ywh: [ | ||
| 27 | { required: true, message: '业务号', trigger: 'blur' } | ||
| 28 | ], | ||
| 29 | } | ||
| 30 | }; | ||
| 31 | }, | ||
| 32 | methods: { | ||
| 33 | |||
| 34 | }, | ||
| 35 | } | ||
| 36 | </script> | ||
| 37 | <style scoped lang='scss'> | ||
| 38 | .slxx_title { | ||
| 39 | border-bottom: 1px solid $borderColor; | ||
| 40 | padding-left: 10px; | ||
| 41 | padding-bottom: 15px; | ||
| 42 | margin-bottom: 15px; | ||
| 43 | } | ||
| 44 | </style> | ||
| ... | \ No newline at end of file | ... | \ No newline at end of file | 
src/views/ywbl/fqsq/fqsq.vue
0 → 100644
| 1 | <template> | ||
| 2 | <div class='fqsq'> | ||
| 3 | <div class="fqsq-header"> | ||
| 4 | <ul> | ||
| 5 | <li v-for="(item, index) in headerleftList.slice(0, headerleftList.length - 3)" :key="index"> | ||
| 6 | <svg-icon :icon-class="item.icon" /> | ||
| 7 | {{ item.name }} | ||
| 8 | </li> | ||
| 9 | </ul> | ||
| 10 | <ul> | ||
| 11 | <li v-for="(item, index) in headerleftList.slice(-3)" :key="index"> | ||
| 12 | <svg-icon :icon-class="item.icon" /> | ||
| 13 | {{ item.name }} | ||
| 14 | </li> | ||
| 15 | </ul> | ||
| 16 | </div> | ||
| 17 | <el-tabs v-model="activeName" @tab-click="handleClick"> | ||
| 18 | <el-tab-pane :label="item.name" :name="index + 1 + ''" v-for="(item, index) in tabList" :key="index"> | ||
| 19 | </el-tab-pane> | ||
| 20 | </el-tabs> | ||
| 21 | <component :is="editItem" /> | ||
| 22 | </div> | ||
| 23 | </template> | ||
| 24 | <script> | ||
| 25 | |||
| 26 | export default { | ||
| 27 | /**注册组件*/ | ||
| 28 | components: {}, | ||
| 29 | data () { | ||
| 30 | return { | ||
| 31 | headerleftList: [ | ||
| 32 | { | ||
| 33 | name: '图形定位', | ||
| 34 | icon: '' | ||
| 35 | }, | ||
| 36 | { | ||
| 37 | name: '登记簿', | ||
| 38 | icon: '' | ||
| 39 | }, | ||
| 40 | { | ||
| 41 | name: '证书预览', | ||
| 42 | icon: '' | ||
| 43 | }, | ||
| 44 | { | ||
| 45 | name: '流程图', | ||
| 46 | icon: '' | ||
| 47 | }, | ||
| 48 | { | ||
| 49 | name: '材料分屏', | ||
| 50 | icon: '' | ||
| 51 | }, | ||
| 52 | { | ||
| 53 | name: '材料导入', | ||
| 54 | icon: '' | ||
| 55 | }, | ||
| 56 | { | ||
| 57 | name: '打印申请书', | ||
| 58 | icon: '' | ||
| 59 | }, | ||
| 60 | { | ||
| 61 | name: '登簿', | ||
| 62 | icon: '' | ||
| 63 | }, | ||
| 64 | { | ||
| 65 | name: '退回', | ||
| 66 | icon: '' | ||
| 67 | }, | ||
| 68 | { | ||
| 69 | name: '转出', | ||
| 70 | icon: '' | ||
| 71 | } | ||
| 72 | ], | ||
| 73 | activeName: '1', | ||
| 74 | tabList: [ | ||
| 75 | { | ||
| 76 | name: '受理申请', | ||
| 77 | }, | ||
| 78 | { | ||
| 79 | name: '材料信息', | ||
| 80 | }, | ||
| 81 | { | ||
| 82 | name: '审批意见', | ||
| 83 | }, | ||
| 84 | { | ||
| 85 | name: '宗地基本信息', | ||
| 86 | }, | ||
| 87 | { | ||
| 88 | name: '权利信息', | ||
| 89 | }, | ||
| 90 | ], | ||
| 91 | editItem: 'slxx' | ||
| 92 | }; | ||
| 93 | }, | ||
| 94 | mounted () { | ||
| 95 | let itemObj = { '1': 'slxx' } | ||
| 96 | this.editItem = this.loadView(itemObj[this.activeName]) | ||
| 97 | }, | ||
| 98 | methods: { | ||
| 99 | handleClick (tab, event) { | ||
| 100 | console.log(tab, event); | ||
| 101 | }, | ||
| 102 | loadView (view) { | ||
| 103 | return r => require.ensure([], () => r(require(`./components/${view}`))) | ||
| 104 | }, | ||
| 105 | }, | ||
| 106 | } | ||
| 107 | </script> | ||
| 108 | <style scoped lang='scss'> | ||
| 109 | @import "~@/styles/mixin.scss"; | ||
| 110 | |||
| 111 | /deep/.el-tabs__nav-wrap { | ||
| 112 | padding: 5px 0 0 15px; | ||
| 113 | } | ||
| 114 | |||
| 115 | /deep/.el-tabs__nav-wrap::after { | ||
| 116 | height: 1px; | ||
| 117 | } | ||
| 118 | |||
| 119 | .fqsq { | ||
| 120 | width: 100%; | ||
| 121 | height: 100%; | ||
| 122 | background-color: #ffffff; | ||
| 123 | |||
| 124 | &-header { | ||
| 125 | @include flex; | ||
| 126 | width: 100%; | ||
| 127 | height: 64px; | ||
| 128 | background-color: #10CCB8; | ||
| 129 | color: #ffffff; | ||
| 130 | border-radius: 4px; | ||
| 131 | justify-content: space-between; | ||
| 132 | padding-left: 15px; | ||
| 133 | |||
| 134 | ul { | ||
| 135 | @include flex; | ||
| 136 | |||
| 137 | li { | ||
| 138 | @include flex-center; | ||
| 139 | cursor: pointer; | ||
| 140 | flex-direction: column; | ||
| 141 | margin-right: 15px; | ||
| 142 | } | ||
| 143 | } | ||
| 144 | } | ||
| 145 | } | ||
| 146 | </style> | ||
| ... | \ No newline at end of file | ... | \ No newline at end of file | 
| ... | @@ -95,7 +95,7 @@ export default { | ... | @@ -95,7 +95,7 @@ export default { | 
| 95 | methods: { | 95 | methods: { | 
| 96 | submitForm () { | 96 | submitForm () { | 
| 97 | this.$emit('input', false) | 97 | this.$emit('input', false) | 
| 98 | this.appliDialog = true | 98 | this.$router.push({ name: 'fqsq', query: { id: '1' } }) | 
| 99 | }, | 99 | }, | 
| 100 | closeDialog () { | 100 | closeDialog () { | 
| 101 | this.$emit('input', false) | 101 | this.$emit('input', false) | ... | ... | 
- 
Please register or sign in to post a comment
