style:申请业务规则
Showing
2 changed files
with
202 additions
and
183 deletions
| 1 | import filter from '@/utils/filter.js' | 1 | import filter from '@/utils/filter.js' |
| 2 | import store from '@/store/index.js' | ||
| 2 | let vm = null | 3 | let vm = null |
| 3 | 4 | ||
| 4 | const sendThis = (_this) => { | 5 | const sendThis = (_this) => { |
| ... | @@ -8,7 +9,7 @@ class data extends filter { | ... | @@ -8,7 +9,7 @@ class data extends filter { |
| 8 | constructor() { | 9 | constructor() { |
| 9 | super() | 10 | super() |
| 10 | } | 11 | } |
| 11 | djqxCol() { | 12 | djqxCol () { |
| 12 | return [ | 13 | return [ |
| 13 | { | 14 | { |
| 14 | width: '60', | 15 | width: '60', |
| ... | @@ -104,7 +105,7 @@ class data extends filter { | ... | @@ -104,7 +105,7 @@ class data extends filter { |
| 104 | ] | 105 | ] |
| 105 | } | 106 | } |
| 106 | 107 | ||
| 107 | clxxCol() { | 108 | clxxCol () { |
| 108 | return [ | 109 | return [ |
| 109 | { | 110 | { |
| 110 | width: '60', | 111 | width: '60', |
| ... | @@ -167,7 +168,7 @@ class data extends filter { | ... | @@ -167,7 +168,7 @@ class data extends filter { |
| 167 | <el-select value={scope.row[scope.column.property]} | 168 | <el-select value={scope.row[scope.column.property]} |
| 168 | onChange={(val) => { scope.row[scope.column.property] = val }} clearable> | 169 | onChange={(val) => { scope.row[scope.column.property] = val }} clearable> |
| 169 | { | 170 | { |
| 170 | vm.dictData['A40'].map(option => { | 171 | store.getters.dictData['A40'].map(option => { |
| 171 | return ( | 172 | return ( |
| 172 | <el-option label={option.dname} value={option.dcode}></el-option> | 173 | <el-option label={option.dname} value={option.dcode}></el-option> |
| 173 | ) | 174 | ) | ... | ... |
| ... | @@ -68,8 +68,8 @@ | ... | @@ -68,8 +68,8 @@ |
| 68 | </el-col> | 68 | </el-col> |
| 69 | <el-col :span="1"> | 69 | <el-col :span="1"> |
| 70 | <el-upload ref="upload" :action="imgUploadUrl" :limit="1" accept=".xls, .xlsx" :show-file-list="false" | 70 | <el-upload ref="upload" :action="imgUploadUrl" :limit="1" accept=".xls, .xlsx" :show-file-list="false" |
| 71 | :disabled="requested" :file-list="fileList" :before-upload="uploadRecord" :on-success="handleSuccess"> | 71 | :before-upload="uploadRecord" :on-success="handleSuccess"> |
| 72 | <el-button type="primary" icon="el-icon-upload" :loading="requested">上传材料</el-button> | 72 | <el-button type="primary" icon="el-icon-upload">上传材料</el-button> |
| 73 | </el-upload> | 73 | </el-upload> |
| 74 | </el-col> | 74 | </el-col> |
| 75 | </el-row> | 75 | </el-row> |
| ... | @@ -128,209 +128,227 @@ | ... | @@ -128,209 +128,227 @@ |
| 128 | </div> | 128 | </div> |
| 129 | </template> | 129 | </template> |
| 130 | <script> | 130 | <script> |
| 131 | import { mapGetters } from "vuex"; | 131 | import { uploadUrl } from '@/api/file' |
| 132 | import { upward, down } from "@/utils/operation"; | 132 | import { upward, down } from "@/utils/operation"; |
| 133 | import { getDjlxInfo, getSqdjywDetail, saveSqdjyw } from "@/api/system.js"; | 133 | import { getDjlxInfo, getSqdjywDetail, saveSqdjyw } from "@/api/system.js"; |
| 134 | import { datas, sendThis } from "./sqywDetail"; | 134 | import { datas, sendThis } from "./sqywDetail"; |
| 135 | export default { | 135 | export default { |
| 136 | name: "componentDialog", | 136 | name: "componentDialog", |
| 137 | props: { | 137 | props: { |
| 138 | formData: { | 138 | formData: { |
| 139 | type: Object, | 139 | type: Object, |
| 140 | default: () => { } | 140 | default: () => { } |
| 141 | } | 141 | } |
| 142 | }, | 142 | }, |
| 143 | data () { | 143 | data () { |
| 144 | return { | 144 | return { |
| 145 | tn: 0, | 145 | tn: 0, |
| 146 | n: 0, | 146 | n: 0, |
| 147 | djlxList: [], | 147 | djlxList: [], |
| 148 | title: "", | 148 | options: [], |
| 149 | activeName: "1", | 149 | imgUploadUrl: uploadUrl(), |
| 150 | form: {}, | 150 | title: "", |
| 151 | djqxCol: datas.djqxCol(), | 151 | activeName: "1", |
| 152 | clxxCol: datas.clxxCol(), | 152 | form: { |
| 153 | }; | 153 | ywDetail: {} |
| 154 | }, | 154 | }, |
| 155 | computed: { | 155 | djqxCol: datas.djqxCol(), |
| 156 | ...mapGetters(["dictData"]), | 156 | clxxCol: datas.clxxCol(), |
| 157 | }, | 157 | }; |
| 158 | mounted () { | ||
| 159 | sendThis(this) | ||
| 160 | this.init() | ||
| 161 | }, | ||
| 162 | methods: { | ||
| 163 | //页面初始化 | ||
| 164 | init () { | ||
| 165 | this.tn = 0; | ||
| 166 | getDjlxInfo(this.formData.bsmSqyw).then((res) => { | ||
| 167 | let { result } = res; | ||
| 168 | this.djlxList = result ? result : []; | ||
| 169 | if (this.djlxList.length > 0) { | ||
| 170 | this.getDetail(this.djlxList[0].bsmSqyw); | ||
| 171 | } else { | ||
| 172 | this.getDetail(this.formData.bsmSqyw); | ||
| 173 | } | ||
| 174 | }) | ||
| 175 | }, | 158 | }, |
| 176 | //tab选项卡事件 | 159 | mounted () { |
| 177 | handleTitleSelct (obj, index) { | 160 | sendThis(this) |
| 178 | this.n = 0; | 161 | this.init() |
| 179 | this.tn = index; | ||
| 180 | this.getDetail(this.djlxList[index].bsmSqyw); | ||
| 181 | }, | 162 | }, |
| 182 | //获取业务具体明细内容 | 163 | methods: { |
| 183 | getDetail (bsmSqyw) { | 164 | //页面初始化 |
| 184 | getSqdjywDetail(bsmSqyw).then((res) => { | 165 | init () { |
| 185 | if (res.code === 200) { | 166 | this.tn = 0; |
| 186 | this.form = res.result; | 167 | getDjlxInfo(this.formData.bsmSqyw).then((res) => { |
| 187 | console.log(this.form, 'this.formthis.formthis.form'); | 168 | let { result } = res; |
| 169 | this.djlxList = result ? result : []; | ||
| 170 | if (this.djlxList.length > 0) { | ||
| 171 | this.getDetail(this.djlxList[0].bsmSqyw); | ||
| 172 | } else { | ||
| 173 | this.getDetail(this.formData.bsmSqyw); | ||
| 174 | } | ||
| 175 | }) | ||
| 176 | }, | ||
| 177 | uploadRecord (file) { | ||
| 178 | this.requested = true | ||
| 179 | this.files = file; | ||
| 180 | const extension = file.name.split('.')[1] === 'xls' | ||
| 181 | const extension2 = file.name.split('.')[1] === 'xlsx' | ||
| 182 | const isLt5M = file.size / 1024 / 1024 < 5 | ||
| 183 | if (!extension && !extension2) { | ||
| 184 | this.$message.warning('上传模板只能是 xls、xlsx格式!') | ||
| 185 | this.requested = false | ||
| 186 | } | ||
| 187 | if (!isLt5M) { | ||
| 188 | this.$message.warning('上传模板大小不能超过 5MB!') | ||
| 189 | this.requested = false | ||
| 190 | } | ||
| 191 | return (extension || extension2) && isLt5M | ||
| 192 | }, | ||
| 193 | handleSuccess () { }, | ||
| 194 | //tab选项卡事件 | ||
| 195 | handleTitleSelct (obj, index) { | ||
| 196 | this.n = 0; | ||
| 197 | this.tn = index; | ||
| 198 | this.getDetail(this.djlxList[index].bsmSqyw); | ||
| 199 | }, | ||
| 200 | //获取业务具体明细内容 | ||
| 201 | getDetail (bsmSqyw) { | ||
| 202 | getSqdjywDetail(bsmSqyw).then((res) => { | ||
| 203 | if (res.code === 200) { | ||
| 204 | this.form = res.result; | ||
| 205 | console.log(this.form, 'this.formthis.formthis.form'); | ||
| 206 | } else { | ||
| 207 | this.$alert(res.message); | ||
| 208 | } | ||
| 209 | }); | ||
| 210 | }, | ||
| 211 | //提交保存数据 | ||
| 212 | submit () { | ||
| 213 | let that = this; | ||
| 214 | saveSqdjyw(this.form).then((res) => { | ||
| 215 | if (res.code == 200) { | ||
| 216 | that.$message({ | ||
| 217 | message: "修改成功", | ||
| 218 | type: "success", | ||
| 219 | }); | ||
| 220 | this.$popupCacel() | ||
| 221 | } | ||
| 222 | }); | ||
| 223 | }, | ||
| 224 | // 上移下移 | ||
| 225 | moveUpward (index, row, type) { | ||
| 226 | if (type == "clxx") { | ||
| 227 | upward(index, this.form.clxx); | ||
| 188 | } else { | 228 | } else { |
| 189 | this.$alert(res.message); | 229 | upward(index, this.form.djqx); |
| 190 | } | 230 | } |
| 191 | }); | 231 | }, |
| 192 | }, | 232 | moveDown (index, row, type) { |
| 193 | //提交保存数据 | 233 | if (type == "clxx") { |
| 194 | submit () { | 234 | down(index, this.form.clxx); |
| 195 | let that = this; | 235 | } else { |
| 196 | saveSqdjyw(this.form).then((res) => { | 236 | down(index, this.form.djqx); |
| 197 | if (res.code == 200) { | ||
| 198 | that.$message({ | ||
| 199 | message: "修改成功", | ||
| 200 | type: "success", | ||
| 201 | }); | ||
| 202 | this.$popupCacel() | ||
| 203 | } | 237 | } |
| 204 | }); | 238 | }, |
| 205 | }, | 239 | addDjqx () { |
| 206 | // 上移下移 | 240 | this.form.djqx.push({ |
| 207 | moveUpward (index, row, type) { | 241 | nodecode: "", |
| 208 | if (type == "clxx") { | 242 | nodename: "", |
| 209 | upward(index, this.form.clxx); | 243 | enabled: "1", |
| 210 | } else { | 244 | djyy: "", |
| 211 | upward(index, this.form.djqx); | 245 | sfqydjyymb: "0", |
| 212 | } | 246 | }); |
| 247 | }, | ||
| 248 | removeDjqx (index, row) { | ||
| 249 | this.form.djqx.splice(index, 1); | ||
| 250 | }, | ||
| 251 | addClxx () { | ||
| 252 | this.form.clxx.push({ | ||
| 253 | isrequired: "1", | ||
| 254 | djqxbm: "", | ||
| 255 | clbm: "", | ||
| 256 | clmc: "", | ||
| 257 | cllx: "", | ||
| 258 | sfggcl: "1", | ||
| 259 | }); | ||
| 260 | }, | ||
| 261 | removeClxx (index, row) { | ||
| 262 | this.form.clxx.splice(index, 1); | ||
| 263 | }, | ||
| 213 | }, | 264 | }, |
| 214 | moveDown (index, row, type) { | 265 | }; |
| 215 | if (type == "clxx") { | ||
| 216 | down(index, this.form.clxx); | ||
| 217 | } else { | ||
| 218 | down(index, this.form.djqx); | ||
| 219 | } | ||
| 220 | }, | ||
| 221 | addDjqx () { | ||
| 222 | this.form.djqx.push({ | ||
| 223 | nodecode: "", | ||
| 224 | nodename: "", | ||
| 225 | enabled: "1", | ||
| 226 | djyy: "", | ||
| 227 | sfqydjyymb: "0", | ||
| 228 | }); | ||
| 229 | }, | ||
| 230 | removeDjqx (index, row) { | ||
| 231 | this.form.djqx.splice(index, 1); | ||
| 232 | }, | ||
| 233 | addClxx () { | ||
| 234 | this.form.clxx.push({ | ||
| 235 | isrequired: "1", | ||
| 236 | djqxbm: "", | ||
| 237 | clbm: "", | ||
| 238 | clmc: "", | ||
| 239 | cllx: "", | ||
| 240 | sfggcl: "1", | ||
| 241 | }); | ||
| 242 | }, | ||
| 243 | removeClxx (index, row) { | ||
| 244 | this.form.clxx.splice(index, 1); | ||
| 245 | }, | ||
| 246 | }, | ||
| 247 | }; | ||
| 248 | </script> | 266 | </script> |
| 249 | <style lang='scss' scoped> | 267 | <style lang='scss' scoped> |
| 250 | @import "~@/styles/mixin.scss"; | 268 | @import "~@/styles/mixin.scss"; |
| 251 | @import "~@/styles/dialogBox.scss"; | 269 | @import "~@/styles/dialogBox.scss"; |
| 252 | @import "~@/styles/collapse.scss"; | 270 | @import "~@/styles/collapse.scss"; |
| 253 | @import "~@/styles/dialogBoxheader.scss"; | 271 | @import "~@/styles/dialogBoxheader.scss"; |
| 254 | 272 | ||
| 255 | .contentBox { | 273 | .contentBox { |
| 256 | height: 75vh; | 274 | height: 75vh; |
| 257 | overflow-y: scroll; | 275 | overflow-y: scroll; |
| 258 | } | 276 | } |
| 259 | 277 | ||
| 260 | .el-radio-group { | 278 | .el-radio-group { |
| 261 | white-space: nowrap; | 279 | white-space: nowrap; |
| 262 | } | 280 | } |
| 263 | 281 | ||
| 264 | .form { | 282 | .form { |
| 265 | background: #eee; | 283 | background: #eee; |
| 266 | padding: 0 10px; | 284 | padding: 0 10px; |
| 267 | } | 285 | } |
| 268 | 286 | ||
| 269 | .edit-title-list { | 287 | .edit-title-list { |
| 270 | @include flex; | 288 | @include flex; |
| 271 | 289 | ||
| 272 | li { | 290 | li { |
| 273 | flex: 1; | 291 | flex: 1; |
| 274 | @include flex-center; | 292 | @include flex-center; |
| 275 | border: 1px solid $borderColor; | 293 | border: 1px solid $borderColor; |
| 276 | line-height: 36px; | 294 | line-height: 36px; |
| 277 | margin-bottom: 10px; | 295 | margin-bottom: 10px; |
| 278 | cursor: pointer; | 296 | cursor: pointer; |
| 279 | transition: all 0.3s; | 297 | transition: all 0.3s; |
| 280 | 298 | ||
| 281 | &:hover { | 299 | &:hover { |
| 282 | @extend .active; | 300 | @extend .active; |
| 301 | } | ||
| 283 | } | 302 | } |
| 284 | } | 303 | } |
| 285 | } | ||
| 286 | |||
| 287 | .active { | ||
| 288 | background: $light-blue !important; | ||
| 289 | color: #fff; | ||
| 290 | } | ||
| 291 | |||
| 292 | .dyztsd-title { | ||
| 293 | @include flex; | ||
| 294 | align-items: center; | ||
| 295 | justify-content: space-between; | ||
| 296 | padding-left: 20px; | ||
| 297 | } | ||
| 298 | |||
| 299 | .qlxx-list { | ||
| 300 | @include flex; | ||
| 301 | flex-wrap: wrap; | ||
| 302 | padding-left: 20px; | ||
| 303 | 304 | ||
| 304 | li { | 305 | .active { |
| 305 | width: 25%; | 306 | background: $light-blue !important; |
| 306 | margin-bottom: 15px; | 307 | color: #fff; |
| 307 | } | 308 | } |
| 308 | } | ||
| 309 | 309 | ||
| 310 | .screen-list { | 310 | .dyztsd-title { |
| 311 | @include flex; | ||
| 312 | align-items: center; | ||
| 313 | flex-wrap: wrap; | ||
| 314 | border: 1px solid $borderColor; | ||
| 315 | border-bottom: none; | ||
| 316 | |||
| 317 | li { | ||
| 318 | @include flex; | 311 | @include flex; |
| 319 | align-items: center; | 312 | align-items: center; |
| 320 | width: 25%; | 313 | justify-content: space-between; |
| 321 | line-height: 50px; | ||
| 322 | border-bottom: 1px solid $borderColor; | ||
| 323 | padding-left: 20px; | 314 | padding-left: 20px; |
| 324 | } | 315 | } |
| 325 | 316 | ||
| 326 | &-left { | 317 | .qlxx-list { |
| 327 | margin-right: 20px; | 318 | @include flex; |
| 328 | width: 160px; | 319 | flex-wrap: wrap; |
| 329 | white-space: nowrap; | 320 | padding-left: 20px; |
| 321 | |||
| 322 | li { | ||
| 323 | width: 25%; | ||
| 324 | margin-bottom: 15px; | ||
| 325 | } | ||
| 330 | } | 326 | } |
| 331 | 327 | ||
| 332 | li:nth-child(odd) { | 328 | .screen-list { |
| 333 | border-right: 1px solid $borderColor; | 329 | @include flex; |
| 330 | align-items: center; | ||
| 331 | flex-wrap: wrap; | ||
| 332 | border: 1px solid $borderColor; | ||
| 333 | border-bottom: none; | ||
| 334 | |||
| 335 | li { | ||
| 336 | @include flex; | ||
| 337 | align-items: center; | ||
| 338 | width: 25%; | ||
| 339 | line-height: 50px; | ||
| 340 | border-bottom: 1px solid $borderColor; | ||
| 341 | padding-left: 20px; | ||
| 342 | } | ||
| 343 | |||
| 344 | &-left { | ||
| 345 | margin-right: 20px; | ||
| 346 | width: 160px; | ||
| 347 | white-space: nowrap; | ||
| 348 | } | ||
| 349 | |||
| 350 | li:nth-child(odd) { | ||
| 351 | border-right: 1px solid $borderColor; | ||
| 352 | } | ||
| 334 | } | 353 | } |
| 335 | } | ||
| 336 | </style> | 354 | </style> | ... | ... |
-
Please register or sign in to post a comment