style:申请业务规则配置
Showing
3 changed files
with
382 additions
and
1 deletions
| 1 | <!-- | ||
| 2 | 功能:登记情形设定 | ||
| 3 | --> | ||
| 4 | <template> | ||
| 5 | <div class='该组件名称'> | ||
| 6 | <el-form :model="ruleForm" :rules="rules" label-width="135px"> | ||
| 7 | <el-row :gutter="20"> | ||
| 8 | <el-col :span="8"> | ||
| 9 | <el-form-item label="登记业务编码" prop="djywbm"> | ||
| 10 | <el-input v-model="ruleForm.djywbm"></el-input> | ||
| 11 | </el-form-item> | ||
| 12 | </el-col> | ||
| 13 | <el-col :span="16"> | ||
| 14 | <el-form-item label="登记业务名称" prop="djywmc"> | ||
| 15 | <el-input v-model="ruleForm.djywmc"></el-input> | ||
| 16 | </el-form-item> | ||
| 17 | </el-col> | ||
| 18 | </el-row> | ||
| 19 | </el-form> | ||
| 20 | <lb-table :column="column" border :key="key" :heightNum="390" :pagination="false" heightNumSetting | ||
| 21 | :data="tableData"> | ||
| 22 | </lb-table> | ||
| 23 | </div> | ||
| 24 | </template> | ||
| 25 | <script> | ||
| 26 | import { upward, down } from '@/utils/operation' | ||
| 27 | export default { | ||
| 28 | data () { | ||
| 29 | return { | ||
| 30 | key: 0, | ||
| 31 | ruleForm: { | ||
| 32 | djywbm: '', | ||
| 33 | djywmc: '' | ||
| 34 | }, | ||
| 35 | cllxOptions: [ | ||
| 36 | { | ||
| 37 | name: '买卖', | ||
| 38 | value: '1' | ||
| 39 | }, | ||
| 40 | { | ||
| 41 | name: '买卖继承', | ||
| 42 | value: '2' | ||
| 43 | } | ||
| 44 | ], | ||
| 45 | rules: { | ||
| 46 | djywbm: [ | ||
| 47 | { required: true, message: '登记业务编码', trigger: 'blur' }, | ||
| 48 | ], | ||
| 49 | djywmc: [ | ||
| 50 | { required: true, message: '登记业务名称', trigger: 'blur' }, | ||
| 51 | ], | ||
| 52 | }, | ||
| 53 | column: [ | ||
| 54 | { | ||
| 55 | width: '60', | ||
| 56 | renderHeader: (h, scope) => { | ||
| 57 | return <i class="el-icon-plus pointer" onClick={() => { this.handleAdd() }} style="color:#409EFF"></i> | ||
| 58 | }, | ||
| 59 | render: (h, scope) => { | ||
| 60 | return ( | ||
| 61 | <i class="el-icon-minus pointer" onClick={() => { this.handleMinus(scope.$index, scope.row) }}></i> | ||
| 62 | ) | ||
| 63 | } | ||
| 64 | }, | ||
| 65 | { | ||
| 66 | width: '60', | ||
| 67 | label: '序号', | ||
| 68 | type: 'index' | ||
| 69 | }, | ||
| 70 | { | ||
| 71 | prop: 'sfbx', | ||
| 72 | label: '是否必须', | ||
| 73 | width: '80', | ||
| 74 | render: (h, scope) => { | ||
| 75 | return ( | ||
| 76 | <el-input value={scope.row[scope.column.property]} | ||
| 77 | onInput={(val) => { scope.row[scope.column.property] = val }}></el-input> | ||
| 78 | ) | ||
| 79 | } | ||
| 80 | }, | ||
| 81 | { | ||
| 82 | prop: 'djqx', | ||
| 83 | label: '登记情形', | ||
| 84 | render: (h, scope) => { | ||
| 85 | return ( | ||
| 86 | <el-input placeholder="登记情形" value={scope.row[scope.column.property]} | ||
| 87 | onInput={(val) => { scope.row[scope.column.property] = val }}></el-input> | ||
| 88 | ) | ||
| 89 | } | ||
| 90 | }, | ||
| 91 | { | ||
| 92 | prop: 'clbm', | ||
| 93 | label: '材料编码', | ||
| 94 | render: (h, scope) => { | ||
| 95 | return ( | ||
| 96 | <el-input placeholder="材料编码" value={scope.row[scope.column.property]} | ||
| 97 | onInput={(val) => { scope.row[scope.column.property] = val }}></el-input> | ||
| 98 | ) | ||
| 99 | } | ||
| 100 | }, | ||
| 101 | { | ||
| 102 | prop: 'clmc', | ||
| 103 | label: '材料名称', | ||
| 104 | render: (h, scope) => { | ||
| 105 | return ( | ||
| 106 | <el-input placeholder="材料名称" value={scope.row[scope.column.property]} | ||
| 107 | onInput={(val) => { scope.row[scope.column.property] = val }}></el-input> | ||
| 108 | ) | ||
| 109 | } | ||
| 110 | }, | ||
| 111 | { | ||
| 112 | prop: 'cllx', | ||
| 113 | label: '材料类型', | ||
| 114 | render: (h, scope) => { | ||
| 115 | return ( | ||
| 116 | <el-select value={scope.row[scope.column.property]} | ||
| 117 | onChange={(val) => { scope.row[scope.column.property] = val }}> | ||
| 118 | { | ||
| 119 | this.cllxOptions.map(option => { | ||
| 120 | return ( | ||
| 121 | <el-option label={option.name} value={option.value}></el-option> | ||
| 122 | ) | ||
| 123 | }) | ||
| 124 | } | ||
| 125 | </el-select> | ||
| 126 | ) | ||
| 127 | } | ||
| 128 | }, | ||
| 129 | { | ||
| 130 | label: '移动', | ||
| 131 | width: '90', | ||
| 132 | render: (h, scope) => { | ||
| 133 | return ( | ||
| 134 | <div> | ||
| 135 | <i class="el-icon-top pointer" disabled={scope.$index == 0} style="color:#409EFF" onClick={() => { this.moveUpward(scope.$index, scope.row) }}></i> | ||
| 136 | <i class="el-icon-bottom pointer" disabled={(scope.$index + 1) == this.tableData.length} style="color:#409EFF" onClick={() => { this.moveDown(scope.$index, scope.row) }}></i> | ||
| 137 | </div> | ||
| 138 | ) | ||
| 139 | } | ||
| 140 | } | ||
| 141 | ], | ||
| 142 | tableData: [ | ||
| 143 | { | ||
| 144 | sfbx: '', | ||
| 145 | djqx: '', | ||
| 146 | clbm: '', | ||
| 147 | clmc: '', | ||
| 148 | cllx: '' | ||
| 149 | } | ||
| 150 | ] | ||
| 151 | } | ||
| 152 | }, | ||
| 153 | watch: { | ||
| 154 | tableData: { | ||
| 155 | handler (newValue, oldValue) { | ||
| 156 | this.$emit('updateValue', newValue) | ||
| 157 | }, | ||
| 158 | deep: true | ||
| 159 | } | ||
| 160 | }, | ||
| 161 | methods: { | ||
| 162 | handleAdd () { | ||
| 163 | this.tableData.push( | ||
| 164 | { | ||
| 165 | sfbx: '', | ||
| 166 | djqx: '', | ||
| 167 | clbm: '', | ||
| 168 | clmc: '', | ||
| 169 | cllx: '' | ||
| 170 | } | ||
| 171 | ) | ||
| 172 | }, | ||
| 173 | handleMinus () { }, | ||
| 174 | // 上移下移 | ||
| 175 | moveUpward (index, row) { | ||
| 176 | upward(index, this.tableData) | ||
| 177 | this.key++ | ||
| 178 | }, | ||
| 179 | moveDown (index, row) { | ||
| 180 | down(index, this.tableData) | ||
| 181 | this.key++ | ||
| 182 | }, | ||
| 183 | } | ||
| 184 | } | ||
| 185 | </script> | ||
| 186 | <style scoped lang='scss'> | ||
| 187 | </style> | ||
| ... | \ No newline at end of file | ... | \ No newline at end of file |
| 1 | <!-- | ||
| 2 | 功能:单元状态设定 | ||
| 3 | --> | ||
| 4 | <template> | ||
| 5 | <div class='该组件名称'> | ||
| 6 | <el-form :model="ruleForm" :rules="rules" label-width="135px"> | ||
| 7 | <el-row :gutter="20"> | ||
| 8 | <el-col :span="8"> | ||
| 9 | <el-form-item label="登记业务编码" prop="djywbm"> | ||
| 10 | <el-input v-model="ruleForm.djywbm"></el-input> | ||
| 11 | </el-form-item> | ||
| 12 | </el-col> | ||
| 13 | <el-col :span="16"> | ||
| 14 | <el-form-item label="登记业务名称" prop="djywmc"> | ||
| 15 | <el-input v-model="ruleForm.djywmc"></el-input> | ||
| 16 | </el-form-item> | ||
| 17 | </el-col> | ||
| 18 | </el-row> | ||
| 19 | </el-form> | ||
| 20 | <div class="dyztsd-title"> | ||
| 21 | <b>请勾选需要查询的权利信息</b> | ||
| 22 | <div> | ||
| 23 | <el-button type="text" @click="handleSelectall">选择全部</el-button> | ||
| 24 | <el-button type="text" @click="handleInvert">清除全部</el-button> | ||
| 25 | </div> | ||
| 26 | </div> | ||
| 27 | <el-divider></el-divider> | ||
| 28 | <ul class="qlxx-list"> | ||
| 29 | <li v-for="(item, index) in dataList.qlxxList" :key="index"> | ||
| 30 | <el-checkbox v-model="item.checked">{{ item.name }}</el-checkbox> | ||
| 31 | </li> | ||
| 32 | </ul> | ||
| 33 | <ul class="screen-list"> | ||
| 34 | <li v-for="(item, index) in dataList.screenList" :key="index"> | ||
| 35 | <div class="screen-list-left"> | ||
| 36 | <el-switch v-model="item.checked"> | ||
| 37 | </el-switch> | ||
| 38 | {{ item.name }} | ||
| 39 | </div> | ||
| 40 | <el-radio-group v-model="item.radio"> | ||
| 41 | <el-radio :label="1">正在办理</el-radio> | ||
| 42 | <el-radio :label="2">未办理</el-radio> | ||
| 43 | </el-radio-group> | ||
| 44 | </li> | ||
| 45 | </ul> | ||
| 46 | </div> | ||
| 47 | </template> | ||
| 48 | <script> | ||
| 49 | export default { | ||
| 50 | data () { | ||
| 51 | return { | ||
| 52 | ruleForm: { | ||
| 53 | djywbm: '', | ||
| 54 | djywmc: '' | ||
| 55 | }, | ||
| 56 | rules: { | ||
| 57 | djywbm: [ | ||
| 58 | { required: true, message: '登记业务编码', trigger: 'blur' }, | ||
| 59 | ], | ||
| 60 | djywmc: [ | ||
| 61 | { required: true, message: '登记业务名称', trigger: 'blur' }, | ||
| 62 | ], | ||
| 63 | }, | ||
| 64 | dataList: { | ||
| 65 | qlxxList: [ | ||
| 66 | { | ||
| 67 | checked: false, | ||
| 68 | name: '国有建设用地使用权' | ||
| 69 | }, | ||
| 70 | { | ||
| 71 | checked: false, | ||
| 72 | name: '宅基地使用权' | ||
| 73 | }, | ||
| 74 | { | ||
| 75 | checked: false, | ||
| 76 | name: '国有建设用地使用权' | ||
| 77 | }, | ||
| 78 | { | ||
| 79 | checked: false, | ||
| 80 | name: '宅基地使用权/房屋所有权' | ||
| 81 | }, | ||
| 82 | { | ||
| 83 | checked: false, | ||
| 84 | name: '国有建设用地使用权' | ||
| 85 | }, | ||
| 86 | { | ||
| 87 | checked: false, | ||
| 88 | name: '国有建设用地使用权' | ||
| 89 | }, | ||
| 90 | ], | ||
| 91 | screenList: [ | ||
| 92 | { | ||
| 93 | checked: true, | ||
| 94 | name: '筛选单元办理状态条件', | ||
| 95 | radio: 1 | ||
| 96 | }, | ||
| 97 | { | ||
| 98 | checked: true, | ||
| 99 | name: '筛选单元办理状态条件', | ||
| 100 | radio: 1 | ||
| 101 | }, | ||
| 102 | { | ||
| 103 | checked: true, | ||
| 104 | name: '筛选单元办理状态条件', | ||
| 105 | radio: 1 | ||
| 106 | }, | ||
| 107 | { | ||
| 108 | checked: true, | ||
| 109 | name: '筛选单元办理状态条件', | ||
| 110 | radio: 1 | ||
| 111 | } | ||
| 112 | ] | ||
| 113 | }, | ||
| 114 | |||
| 115 | } | ||
| 116 | }, | ||
| 117 | watch: { | ||
| 118 | dataList: { | ||
| 119 | handler (newValue, oldValue) { | ||
| 120 | this.$emit('updateValue', newValue) | ||
| 121 | }, | ||
| 122 | deep: true | ||
| 123 | } | ||
| 124 | }, | ||
| 125 | methods: { | ||
| 126 | handleSelectall () { | ||
| 127 | this.qlxxList.forEach(item => { | ||
| 128 | item.checked = true | ||
| 129 | }) | ||
| 130 | }, | ||
| 131 | handleInvert () { | ||
| 132 | this.qlxxList.forEach(item => { | ||
| 133 | item.checked = false | ||
| 134 | }) | ||
| 135 | } | ||
| 136 | } | ||
| 137 | } | ||
| 138 | </script> | ||
| 139 | <style scoped lang='scss'> | ||
| 140 | @import "~@/styles/mixin.scss"; | ||
| 141 | |||
| 142 | .dyztsd-title { | ||
| 143 | @include flex; | ||
| 144 | align-items: center; | ||
| 145 | justify-content: space-between; | ||
| 146 | padding-left: 20px; | ||
| 147 | } | ||
| 148 | |||
| 149 | .qlxx-list { | ||
| 150 | @include flex; | ||
| 151 | flex-wrap: wrap; | ||
| 152 | padding-left: 20px; | ||
| 153 | |||
| 154 | li { | ||
| 155 | width: 20%; | ||
| 156 | margin-bottom: 15px; | ||
| 157 | } | ||
| 158 | } | ||
| 159 | |||
| 160 | .screen-list { | ||
| 161 | @include flex; | ||
| 162 | align-items: center; | ||
| 163 | flex-wrap: wrap; | ||
| 164 | border: 1px solid $borderColor; | ||
| 165 | border-bottom: none; | ||
| 166 | |||
| 167 | li { | ||
| 168 | @include flex; | ||
| 169 | align-items: center; | ||
| 170 | width: 50%; | ||
| 171 | line-height: 50px; | ||
| 172 | border-bottom: 1px solid $borderColor; | ||
| 173 | padding-left: 20px; | ||
| 174 | } | ||
| 175 | |||
| 176 | &-left { | ||
| 177 | margin-right: 20px; | ||
| 178 | } | ||
| 179 | |||
| 180 | li:nth-child(odd) { | ||
| 181 | border-right: 1px solid $borderColor; | ||
| 182 | } | ||
| 183 | } | ||
| 184 | </style> | ||
| ... | \ No newline at end of file | ... | \ No newline at end of file |
| ... | @@ -108,6 +108,8 @@ | ... | @@ -108,6 +108,8 @@ |
| 108 | </el-row> | 108 | </el-row> |
| 109 | </el-form> | 109 | </el-form> |
| 110 | <djqxsd v-else-if="n == 1" @updateValue="getValue" /> | 110 | <djqxsd v-else-if="n == 1" @updateValue="getValue" /> |
| 111 | <clgzsd v-else-if="n == 2" @updateValue="getClValue" /> | ||
| 112 | <dyztsd v-else /> | ||
| 111 | </div> | 113 | </div> |
| 112 | </div> | 114 | </div> |
| 113 | </dialogBox> | 115 | </dialogBox> |
| ... | @@ -116,9 +118,14 @@ | ... | @@ -116,9 +118,14 @@ |
| 116 | <script> | 118 | <script> |
| 117 | import fileController from '@/api/fileController' | 119 | import fileController from '@/api/fileController' |
| 118 | import djqxsd from './djqxsd.vue' | 120 | import djqxsd from './djqxsd.vue' |
| 121 | import clgzsd from './clgzsd.vue' | ||
| 122 | |||
| 123 | import dyztsd from './dyztsd.vue' | ||
| 119 | export default { | 124 | export default { |
| 120 | components: { | 125 | components: { |
| 121 | djqxsd | 126 | djqxsd, |
| 127 | clgzsd, | ||
| 128 | dyztsd | ||
| 122 | }, | 129 | }, |
| 123 | props: { | 130 | props: { |
| 124 | value: { type: Boolean, default: false }, | 131 | value: { type: Boolean, default: false }, |
| ... | @@ -210,6 +217,9 @@ export default { | ... | @@ -210,6 +217,9 @@ export default { |
| 210 | getValue (val) { | 217 | getValue (val) { |
| 211 | console.log(val); | 218 | console.log(val); |
| 212 | }, | 219 | }, |
| 220 | getClValue (val) { | ||
| 221 | console.log(val); | ||
| 222 | }, | ||
| 213 | submitForm () { | 223 | submitForm () { |
| 214 | this.$refs['ruleForm'].validate(async (valid) => { | 224 | this.$refs['ruleForm'].validate(async (valid) => { |
| 215 | if (valid) { | 225 | if (valid) { | ... | ... |
-
Please register or sign in to post a comment