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