Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
0dacd01e by 任超
Options

feat:申请业务规则配置

1 parent 642b2203
Inline Side-by-side
Showing 7 changed files with 332 additions and 111 deletions
1 class fileController {
2 uploadUrl () {
3 return process.env.VUE_APP_BASE_API + '/file/upload'
4 }
5 }
6 export default new fileController()
...@@ -36,12 +36,8 @@ ...@@ -36,12 +36,8 @@
36 } 36 }
37 37
38 .dialog_footer { 38 .dialog_footer {
39 flex-direction: column; 39 margin-top: 8px;
40 40 @include flex-center;
41 .dialog_button {
42 margin-top: 8px;
43 @include flex-center;
44 }
45 } 41 }
46 } 42 }
47 43
......
1 <template> 1 <template>
2 <el-dialog :visible.sync="dialogVisible" :width="width" :fullscreen="fullscreen" top="0" :append-to-body="true" 2 <el-dialog :visible.sync="dialogVisible" :width="width" :fullscreen="fullscreen" top="0" :append-to-body="true"
3 :lock-scroll="true" :close-on-click-modal="false" 3 :lock-scroll="true" :close-on-click-modal="false" @close="closeDialog"
4 :custom-class="isMain ? 'mainCenter dialogBox' : 'contentCenter dialogBox'" :destroy-on-close="true" 4 :custom-class="isMain ? 'mainCenter dialogBox' : 'contentCenter dialogBox'" :destroy-on-close="true" ref="dialogBox"
5 ref="dialogBox"> 5 id="dialogBox">
6 <div slot="title" class="dialog_title" ref="dialogTitle"> 6 <div slot="title" class="dialog_title" ref="dialogTitle">
7 <b>{{ title }}</b> 7 <b>{{ title }}</b>
8 <div v-if="isFullscreen" class="dialog_full"> 8 <div v-if="isFullscreen" class="dialog_full">
...@@ -13,12 +13,10 @@ ...@@ -13,12 +13,10 @@
13 <div class="dialogBox-content" :style="{ height: scrollerHeight ? scrollerHeight : 'auto' }" :key="key"> 13 <div class="dialogBox-content" :style="{ height: scrollerHeight ? scrollerHeight : 'auto' }" :key="key">
14 <slot></slot> 14 <slot></slot>
15 </div> 15 </div>
16 <div slot="footer" class="dialog_footer" ref="dialogFooter" v-if="isButton"> 16 <div slot="footer" class="dialog_footer" v-if="isButton">
17 <div class="dialog_button"> 17 <el-button @click="closeDialog" v-if="isReset">取消</el-button>
18 <el-button @click="closeDialog" v-if="isReset">取消</el-button> 18 <el-button type="primary" plain @click="submitForm" v-if="isSave" :loading="saveloding">
19 <el-button type="primary" plain @click="submitForm" v-if="isSave" :loading="saveloding"> 19 {{ saveButton }}</el-button>
20 {{ saveButton }}</el-button>
21 </div>
22 </div> 20 </div>
23 </el-dialog> 21 </el-dialog>
24 </template> 22 </template>
...@@ -87,8 +85,6 @@ export default { ...@@ -87,8 +85,6 @@ export default {
87 } 85 }
88 }, 86 },
89 submitForm () { 87 submitForm () {
90 this.key++
91 this.$emit('input', false)
92 this.$emit('submitForm'); 88 this.$emit('submitForm');
93 }, 89 },
94 closeDialog () { 90 closeDialog () {
......
1 ## 这个是弹框组件，对于element自带的组件进行封装，方便修改全局样式做统一操作 1 ## 这个是弹框组件，对于element自带的组件进行封装，方便修改全局样式做统一操作
2 ### 使用时在组件中引用 2 ### 使用时在组件中引用
3
4 ```
5 import dialogBox from '@/components/dialogBox/index'
6
7 <dialogBox ref="dialog" title="标题">
8 **在这里面写弹框内容**
9 </dialogBox>
10 *在父组件中使用 的按钮提交方法*
11 submitForm(ruleForm) {
12
13 }
14 ```
15 ##### 如果有多个弹框
16
17 ```
18 import dialogBox from '@/components/dialogBox/index'
19
20 <dialogBox ref="dialog" @submitForm="自定义方法" title="标题" :multiple="true">
21 **在这里面写弹框内容**
22 </dialogBox>
23 *在父组件中使用 的按钮提交方法*
24 自定义方法(ruleForm) {
25
26 }
27 ```
28
29 ## 打开该dialog：
30 this.$refs.dialog.isShow();
31 ## 隐藏该dialog：
32 this.$refs.dialog.isHide();
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -169,11 +169,6 @@ input[type="number"] { ...@@ -169,11 +169,6 @@ input[type="number"] {
169 -moz-appearance: textfield; 169 -moz-appearance: textfield;
170 } 170 }
171 171
172 // Radio 单选框升级之后的问题
173 .el-radio {
174 margin-right: 0 !important;
175 }
176
177 // Divider 分割线 样式的修改 172 // Divider 分割线 样式的修改
178 .el-divider--horizontal { 173 .el-divider--horizontal {
179 margin: 10px 0 !important; 174 margin: 10px 0 !important;
...@@ -257,22 +252,11 @@ input[type="number"] { ...@@ -257,22 +252,11 @@ input[type="number"] {
257 } 252 }
258 253
259 // 全局修改button颜色 254 // 全局修改button颜色
260 .el-button--primary { 255 .el-select {
261 background-color: #2FA5FF; 256 width: 100%;
262 }
263
264 .el-button--primary.is-plain {
265 background: rgba(15, 147, 246, 0.12);
266 border: 1px solid #0F93F6;
267 color: #0F93F6;
268 }
269
270 .el-button--warning {
271 background-color: #FFB135;
272 } 257 }
273 258
274 .el-form-item__content { 259 .el-form-item__content {
275 //width: 100%;
276 flex: 1; 260 flex: 1;
277 } 261 }
278 262
...@@ -283,12 +267,6 @@ input[type="number"] { ...@@ -283,12 +267,6 @@ input[type="number"] {
283 } 267 }
284 } 268 }
285 269
286 .el-date-editor .el-input__prefix,
287 .el-select .el-input .el-select__caret,
288 .el-date-editor .el-range__icon {
289 color: #686666;
290 }
291
292 // 日期选择-日历图标位置 270 // 日期选择-日历图标位置
293 .el-date-editor .el-input__prefix { 271 .el-date-editor .el-input__prefix {
294 left: auto; 272 left: auto;
......
1 <template>
2 <dialogBox title="申请业务规则配置" @submitForm="submitForm" @closeDialog="closeDialog" v-model="value">
3 <div class="sqywgz-edit">
4 <ul class="sqywgz-edit-left">
5 <li v-for="(item, index) in leftList" :key="index" :class="{ active: index == n }" @click="hanldeItem(index)">{{
6 item.name
7 }}</li>
8 </ul>
9 <div class="sqywgz-edit-right">
10 <el-form :model="ruleForm" :rules="rules" label-width="135px" ref="ruleForm">
11 <el-row>
12 <el-col :span="8">
13 <el-form-item label="权利类型编码" prop="qllxbm">
14 <el-input v-model="ruleForm.qllxbm"></el-input>
15 </el-form-item>
16 </el-col>
17 <el-col :span="8">
18 <el-form-item label="权利类型名称" prop="qllxmc">
19 <el-input v-model="ruleForm.qllxmc"></el-input>
20 </el-form-item>
21 </el-col>
22 <el-col :span="8">
23 <el-form-item label="申请分类" prop="sqfl">
24 <el-select v-model="ruleForm.sqfl" placeholder="请选择">
25 <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
26 </el-option>
27 </el-select>
28 </el-form-item>
29 </el-col>
30 </el-row>
31
32
33 <el-row>
34 <el-col :span="8">
35 <el-form-item label="登记类型编码" prop="djlxbm">
36 <el-input v-model="ruleForm.djlxbm"></el-input>
37 </el-form-item>
38 </el-col>
39 <el-col :span="8">
40 <el-form-item label="登记类型名称" prop="djlxmc">
41 <el-input v-model="ruleForm.djlxmc"></el-input>
42 </el-form-item>
43 </el-col>
44 <el-col :span="8">
45 <el-form-item label="发起业务单元类型" prop="fqywdylx">
46 <el-select v-model="ruleForm.fqywdylx" placeholder="请选择">
47 <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
48 </el-option>
49 </el-select>
50 </el-form-item>
51 </el-col>
52 </el-row>
53
54 <el-row>
55 <el-col :span="8">
56 <el-form-item label="登记业务编码" prop="djywbm">
57 <el-input v-model="ruleForm.djywbm"></el-input>
58 </el-form-item>
59 </el-col>
60 <el-col :span="16">
61 <el-form-item label="登记业务名称" prop="djywmc">
62 <el-input v-model="ruleForm.djywmc"></el-input>
63 </el-form-item>
64 </el-col>
65 </el-row>
66
67 <el-row>
68 <el-col :span="8">
69 <el-form-item label="是否启用" prop="sfqy">
70 <el-radio-group v-model="ruleForm.sfqy">
71 <el-radio :label="1">启用</el-radio>
72 <el-radio :label="0">禁用</el-radio>
73 </el-radio-group>
74 </el-form-item>
75 </el-col>
76 <el-col :span="16">
77 <el-form-item label="业务流程ID" prop="ywlc">
78 <el-input v-model="ruleForm.ywlc"></el-input>
79 </el-form-item>
80 </el-col>
81 </el-row>
82
83 <el-row>
84 <el-col :span="8">
85 <el-form-item label="登记情形及材料" prop="djqxcl">
86 <el-input v-model="ruleForm.djqxcl" placeholder="仅支持execl文件导入"></el-input>
87 </el-form-item>
88 </el-col>
89 <el-col :span="1">
90 <el-upload ref="upload" :action="imgUploadUrl" :limit="1" accept=".xls, .xlsx" :show-file-list="false"
91 :disabled='requested' :file-list="fileList" :before-upload="uploadRecord" :on-success="handleSuccess">
92 <el-button type="primary" icon="el-icon-upload" :loading="requested">上传材料</el-button>
93 </el-upload>
94 </el-col>
95 </el-row>
96
97 <el-row>
98 <el-col :span="8">
99 <el-form-item label="登记原因设置" prop="djyysz">
100 <el-radio-group v-model="ruleForm.djyysz">
101 <el-radio :label="1">启用</el-radio>
102 <el-radio :label="0">禁用</el-radio>
103 </el-radio-group>
104 </el-form-item>
105 </el-col>
106 </el-row>
107 <el-row>
108 <el-col :span="24">
109 <el-form-item label="登记原因模板" prop="djyymb">
110 <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="ruleForm.djyymb">
111 </el-input>
112 </el-form-item>
113 </el-col>
114 </el-row>
115 </el-form>
116 </div>
117 </div>
118 </dialogBox>
119 </template>
120
121 <script>
122 import fileController from '@/api/fileController'
123 export default {
124 props: {
125 value: { type: Boolean, default: false },
126 },
127 data () {
128 return {
129 imgUploadUrl: fileController.uploadUrl(),
130 n: 0,
131 leftList: [
132 {
133 name: '业务详情',
134 select: true
135 },
136 {
137 name: '登记情形设定'
138 },
139 {
140 name: '材料规则设定'
141 },
142 {
143 name: '单元状态设定'
144 }
145 ],
146 ruleForm: {
147 qllxbm: '',
148 qllxmc: '',
149 sqfl: '',
150 djlxbm: '',
151 djlxmc: '',
152 fqywdylx: '',
153 djywbm: '',
154 djywmc: '',
155 sfqy: 1,
156 ywlc: '',
157 djqxcl: '',
158 djyysz: 1,
159 djyymb: ''
160 },
161 requested: false,
162 fileList: [],
163 options: [{
164 value: '选项1',
165 label: '黄金糕'
166 }],
167 rules: {
168 qllxbm: [
169 { required: true, message: '请输入权利类型编码', trigger: 'blur' },
170 ],
171 qllxmc: [
172 { required: true, message: '请输入权利类型名称', trigger: 'blur' },
173 ],
174 sqfl: [
175 { required: true, message: '请选择申请分类', trigger: 'change' },
176 ],
177 djlxbm: [
178 { required: true, message: '请输入登记类型编码', trigger: 'blur' },
179 ],
180 djlxmc: [
181 { required: true, message: '请输入登记类型名称', trigger: 'blur' },
182 ],
183 fqywdylx: [
184 { required: true, message: '请选择发起业务单元类型', trigger: 'change' },
185 ],
186 djywbm: [
187 { required: true, message: '请输入登记业务编码', trigger: 'blur' },
188 ],
189 djywmc: [
190 { required: true, message: '请输入登记业务名称', trigger: 'blur' },
191 ],
192 sfqy: [
193 { required: true, message: '请选择是否启用', trigger: 'change' },
194 ],
195 ywlc: [
196 { required: true, message: '请输入业务流程ID', trigger: 'blur' },
197 ],
198 djqxcl: [
199 { required: true, message: '请选择登记情形及材料', trigger: 'blur' },
200 ],
201 djyysz: [
202 { required: true, message: '请选择登记原因设置', trigger: 'change' },
203 ],
204 djyymb: [
205 { required: true, message: '请输入登记原因模板', trigger: 'blur' },
206 ],
207 }
208 };
209 },
210 methods: {
211 submitForm () {
212 this.$refs['ruleForm'].validate(async (valid) => {
213 if (valid) {
214 this.$emit('input', false)
215 } else {
216 this.$message('请检查表单完整性')
217 return false;
218 }
219 })
220 },
221 closeDialog () {
222 this.$emit('input', false)
223 },
224 hanldeItem (index) {
225 this.n = index
226 },
227 uploadRecord (file) {
228 this.requested = true
229 this.files = file;
230 const extension = file.name.split('.')[1] === 'xls'
231 const extension2 = file.name.split('.')[1] === 'xlsx'
232 const isLt5M = file.size / 1024 / 1024 < 5
233 if (!extension && !extension2) {
234 this.$message.warning('上传模板只能是 xls、xlsx格式!')
235 this.requested = false
236 }
237 if (!isLt5M) {
238 this.$message.warning('上传模板大小不能超过 5MB!')
239 this.requested = false
240 }
241 return (extension || extension2) && isLt5M
242 },
243 handleSuccess (res) {
244 if (res.code === 200) {
245 this.requested = false
246 this.$message({
247 message: '上传成功',
248 type: 'success',
249 })
250 console.log(res);
251 } else {
252 this.loading = false
253 this.$message.error(res.message)
254 }
255 }
256 },
257 };
258 </script>
259 <style scoped lang="scss">
260 @import "~@/styles/mixin.scss";
261
262 .sqywgz-edit {
263 @include flex;
264 width: 100%;
265
266 &-left {
267 width: 26px;
268
269 .active {
270 background: $light-blue;
271 color: #fff;
272 }
273
274 li {
275 @include flex-center;
276 background-color: #E4E7ED;
277 border-bottom-right-radius: 5px;
278 padding: 10px 5px;
279 cursor: pointer;
280
281 &:hover {
282 @extend .active;
283 }
284 }
285
286 li:not(:last-child) {
287 margin-bottom: 10px;
288 }
289 }
290
291 &-right {
292 margin-left: 20px;
293 flex: 1;
294 width: 100%;
295 }
296 }
297 </style>
...@@ -6,30 +6,15 @@ ...@@ -6,30 +6,15 @@
6 <el-row> 6 <el-row>
7 <el-col :span="6"> 7 <el-col :span="6">
8 <el-form-item label="权利类型"> 8 <el-form-item label="权利类型">
9 <el-select 9 <el-select v-model="queryForm.qllx" filterable clearable placeholder="请选择权利类型">
10 v-model="queryForm.qllx" 10 <el-option v-for="item in qllxs" :key="item.value" :label="item.label" :value="item.value">
11 filterable
12 clearable
13 placeholder="请选择权利类型"
14 >
15 <el-option
16 v-for="item in qllxs"
17 :key="item.value"
18 :label="item.label"
19 :value="item.value"
20 >
21 </el-option> 11 </el-option>
22 </el-select> 12 </el-select>
23 </el-form-item> 13 </el-form-item>
24 </el-col> 14 </el-col>
25 <el-col :span="6"> 15 <el-col :span="6">
26 <el-form-item label="登记业务编码"> 16 <el-form-item label="登记业务编码">
27 <el-input 17 <el-input placeholder="请输入登记业务编码" v-model="queryForm.djywbm" clearable class="width200px">
28 placeholder="请输入登记业务编码"
29 v-model="queryForm.djywbm"
30 clearable
31 class="width200px"
32 >
33 </el-input> 18 </el-input>
34 </el-form-item> 19 </el-form-item>
35 </el-col> 20 </el-col>
...@@ -47,33 +32,30 @@ ...@@ -47,33 +32,30 @@
47 </div> 32 </div>
48 <!-- 表格 --> 33 <!-- 表格 -->
49 <div class="from-clues-content"> 34 <div class="from-clues-content">
50 <lb-table 35 <lb-table :page-size="pageData.size" @sort-change="handleSort" :current-page.sync="pageData.current"
51 :page-size="pageData.size" 36 :total="pageData.total" @selection-change="handleSelectionChange" @size-change="handleSizeChange"
52 @sort-change="handleSort" 37 @p-current-change="handleCurrentChange" :column="tableData.columns" :data="tableData.data">
53 :current-page.sync="pageData.current"
54 :total="pageData.total"
55 @selection-change="handleSelectionChange"
56 @size-change="handleSizeChange"
57 @p-current-change="handleCurrentChange"
58 :column="tableData.columns"
59 :data="tableData.data"
60 >
61 </lb-table> 38 </lb-table>
62 </div> 39 </div>
40 <editDialog v-model="isDialog" />
63 </div> 41 </div>
64 </template> 42 </template>
65 <script> 43 <script>
66 import table from "@/utils/mixin/table"; 44 import table from "@/utils/mixin/table";
45 import editDialog from "./components/editDialog.vue"
67 import { datas, sendThis } from "./sqywgzdata"; 46 import { datas, sendThis } from "./sqywgzdata";
68 export default { 47 export default {
69 name: "djbcx", 48 name: "djbcx",
70 components: {}, 49 components: {
50 editDialog
51 },
71 mixins: [table], 52 mixins: [table],
72 mounted() { 53 mounted () {
73 sendThis(this); 54 sendThis(this);
74 }, 55 },
75 data() { 56 data () {
76 return { 57 return {
58 isDialog: false,
77 queryForm: { 59 queryForm: {
78 qllx: "", 60 qllx: "",
79 djywbm: "", 61 djywbm: "",
...@@ -101,16 +83,12 @@ export default { ...@@ -101,16 +83,12 @@ export default {
101 }, 83 },
102 methods: { 84 methods: {
103 // 初始化数据 85 // 初始化数据
104 fetchData() {}, 86 fetchData () { },
105 handleSort(name, sort) { 87 handleSort (name, sort) {
106 console.log(name, sort); 88 console.log(name, sort);
107 }, 89 },
108 openDialog() { 90 editClick () {
109 console.log(999999999999999); 91 this.isDialog = true
110 },
111
112 editClick(){
113 alert("edit");
114 } 92 }
115 }, 93 },
116 }; 94 };
......