Browse Source

Merge branch 'dev2' of http://git.elinkit.com.cn:7070/r/epmet-oper into dev2

preview
jiangyy 4 years ago
parent
commit
4cd6978bcd
  1. 284
      epmet-oper-web/package-lock.json
  2. 705
      epmet-oper-web/src/views/components/editResi.vue
  3. 575
      epmet-oper-web/src/views/components/resiForm.vue
  4. 336
      epmet-oper-web/src/views/components/resiSearch.vue
  5. 9
      epmet-oper-web/src/views/main.vue
  6. 1010
      epmet-oper-web/src/views/modules/base/resi.vue

284
epmet-oper-web/package-lock.json

@ -1418,6 +1418,48 @@
}
}
},
"@mapbox/jsonlint-lines-primitives": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz",
"integrity": "sha1-zlblOfg1UrWNENZy6k1vya3HsjQ=",
"dev": true
},
"@mapbox/mapbox-gl-style-spec": {
"version": "13.22.0",
"resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-style-spec/-/mapbox-gl-style-spec-13.22.0.tgz",
"integrity": "sha512-35skPiyM1reMRHA+X+DgbT3WG8hXMpqy1Ncs66ZvtVWUvvA9CtERSx5kq+o5S1ZrvDISuyBzrVzyty7PkuStkQ==",
"dev": true,
"requires": {
"@mapbox/jsonlint-lines-primitives": "~2.0.2",
"@mapbox/point-geometry": "^0.1.0",
"@mapbox/unitbezier": "^0.0.0",
"csscolorparser": "~1.0.2",
"json-stringify-pretty-compact": "^2.0.0",
"minimist": "^1.2.5",
"rw": "^1.3.3",
"sort-object": "^0.3.2"
},
"dependencies": {
"minimist": {
"version": "1.2.5",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
"integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
"dev": true
}
}
},
"@mapbox/point-geometry": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz",
"integrity": "sha1-ioP5M1x4YO/6Lu7KJUMyqgru2PI=",
"dev": true
},
"@mapbox/unitbezier": {
"version": "0.0.0",
"resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.0.tgz",
"integrity": "sha1-FWUb1VOme4WB+zmIEMmK2Go0Uk4=",
"dev": true
},
"@mrmlnc/readdir-enhanced": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
@ -1434,6 +1476,12 @@
"integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==",
"dev": true
},
"@petamoriken/float16": {
"version": "3.5.4",
"resolved": "https://registry.npmjs.org/@petamoriken/float16/-/float16-3.5.4.tgz",
"integrity": "sha512-RWVPoDJ3q0vOinFEjEOFP+GPSL9cMZNwD9iSafIRXOOUKCQW0j+RAPH0CojMbaHkWlVBRJ40L9RFuSL/oLd+vg==",
"dev": true
},
"@soda/friendly-errors-webpack-plugin": {
"version": "1.7.1",
"resolved": "https://registry.npmjs.org/@soda/friendly-errors-webpack-plugin/-/friendly-errors-webpack-plugin-1.7.1.tgz",
@ -5177,6 +5225,12 @@
"resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.3.tgz",
"integrity": "sha512-a+EPoD+uZiNfh+5fxw2nO9QwFa6nJe2Or35fGY6Ipw1R3R4AGz1d1TEZrCegvw2YTmZ0jXirGYlzxxpYSHwpEg=="
},
"csscolorparser": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/csscolorparser/-/csscolorparser-1.0.3.tgz",
"integrity": "sha1-s085HupNqPPpgjHizNjfnAQfFxs=",
"dev": true
},
"cssesc": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-2.0.0.tgz",
@ -6840,6 +6894,13 @@
"resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz",
"integrity": "sha512-qzm/XxIbxm/FHyH341ZrbnMUpe+5Bocte9xkmFMzPMjRaZMcXww+MpBptFvtU+79L362nqiLhekCxCxDPaUMBQ=="
},
"esm": {
"version": "3.2.25",
"resolved": "https://registry.npmjs.org/esm/-/esm-3.2.25.tgz",
"integrity": "sha512-U1suiZ2oDVWv4zPO56S0NcR5QriEahGtdN2OR6FiOG4WJvcjBVFB0qI4+eKoWFH483PKGuLuu6V8Z4T5g63UVA==",
"dev": true,
"optional": true
},
"espree": {
"version": "3.5.4",
"resolved": "https://registry.npmjs.org/espree/-/espree-3.5.4.tgz",
@ -8262,6 +8323,44 @@
"globule": "~0.1.0"
}
},
"geotiff": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/geotiff/-/geotiff-1.0.8.tgz",
"integrity": "sha512-3YA6NpGuuXF+WwwgA7moSHIw1U0XHxBY8W5bjjoSGBCVuw6s+DOgt7Z95Y3bf5k19RHixv6zW8KpW/yrRno43Q==",
"dev": true,
"requires": {
"@petamoriken/float16": "^3.4.7",
"lerc": "^3.0.0",
"lru-cache": "^6.0.0",
"pako": "^2.0.4",
"parse-headers": "^2.0.2",
"threads": "^1.7.0",
"xml-utils": "^1.0.2"
},
"dependencies": {
"lru-cache": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
"integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
"dev": true,
"requires": {
"yallist": "^4.0.0"
}
},
"pako": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/pako/-/pako-2.0.4.tgz",
"integrity": "sha512-v8tweI900AUkZN6heMU/4Uy4cXRc2AYNRggVmTR+dEncawDJgCdLMximOVA2p4qO57WMynangsfGRb5WD6L1Bg==",
"dev": true
},
"yallist": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
"dev": true
}
}
},
"get-caller-file": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-1.0.3.tgz",
@ -10320,6 +10419,12 @@
"integrity": "sha1-PkcprB9f3gJc19g6iW2rn09n2w8=",
"dev": true
},
"is-observable": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/is-observable/-/is-observable-2.1.0.tgz",
"integrity": "sha512-DailKdLb0WU+xX8K5w7VsJhapwHLZ9jjmazqCJq4X12CTgqq73TKnbRcnSLuXYPOoLQgV5IrD7ePiX/h1vnkBw==",
"dev": true
},
"is-path-cwd": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/is-path-cwd/-/is-path-cwd-2.2.0.tgz",
@ -10624,6 +10729,12 @@
"dev": true,
"optional": true
},
"json-stringify-pretty-compact": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/json-stringify-pretty-compact/-/json-stringify-pretty-compact-2.0.0.tgz",
"integrity": "sha512-WRitRfs6BGq4q8gTgOy4ek7iPFXjbra0H3PmDLKm2xnZ+Gh1HUhiKGgCZkSPNULlP7mvfu6FV/mOLhCarspADQ==",
"dev": true
},
"json-stringify-safe": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
@ -10741,6 +10852,12 @@
"invert-kv": "^1.0.0"
}
},
"lerc": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/lerc/-/lerc-3.0.0.tgz",
"integrity": "sha512-Rm4J/WaHhRa93nCN2mwWDZFoRVF18G1f47C+kvQWyHGEZxFpTUi73p7lMVSAndyxGt6lJ2/CFbOcf9ra5p8aww==",
"dev": true
},
"levn": {
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz",
@ -11229,6 +11346,12 @@
"object-visit": "^1.0.0"
}
},
"mapbox-to-css-font": {
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/mapbox-to-css-font/-/mapbox-to-css-font-2.4.0.tgz",
"integrity": "sha512-v674D0WtpxCXlA6E+sBlG1QJWdUkz/s9qAD91bJSXBGuBL5lL4tJXpoJEftecphCh2SVQCjWMS2vhylc3AIQTg==",
"dev": true
},
"md5.js": {
"version": "1.3.5",
"resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
@ -12185,12 +12308,41 @@
"has": "^1.0.3"
}
},
"observable-fns": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/observable-fns/-/observable-fns-0.6.1.tgz",
"integrity": "sha512-9gRK4+sRWzeN6AOewNBTLXir7Zl/i3GB6Yl26gK4flxz8BXVpD3kt8amREmWNb0mxYOGDotvE5a4N+PtGGKdkg==",
"dev": true
},
"obuf": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz",
"integrity": "sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==",
"dev": true
},
"ol": {
"version": "6.9.0",
"resolved": "https://registry.npmjs.org/ol/-/ol-6.9.0.tgz",
"integrity": "sha512-VmU5HKHwO2O1uGgmBcng/dL1PouVB1jKiYUbiXPR5l1i/3B3qatexl4rapZAnsGx0vsOC7lI1GLx7jEZro8C8Q==",
"dev": true,
"requires": {
"geotiff": "^1.0.8",
"ol-mapbox-style": "^6.5.1",
"pbf": "3.2.1",
"rbush": "^3.0.1"
}
},
"ol-mapbox-style": {
"version": "6.5.1",
"resolved": "https://registry.npmjs.org/ol-mapbox-style/-/ol-mapbox-style-6.5.1.tgz",
"integrity": "sha512-diGjCUlYjCA855vJjQjPzxXLn/skm0iQLD2/yDsXaKdNxFd35hNfRm5Li+Vxh/FxraCodxRvd8IplhrhvXoqbQ==",
"dev": true,
"requires": {
"@mapbox/mapbox-gl-style-spec": "^13.20.1",
"mapbox-to-css-font": "^2.4.0",
"webfont-matcher": "^1.1.0"
}
},
"on-finished": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
@ -12467,6 +12619,12 @@
"path-root": "^0.1.1"
}
},
"parse-headers": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/parse-headers/-/parse-headers-2.0.4.tgz",
"integrity": "sha512-psZ9iZoCNFLrgRjZ1d8mn0h9WRqJwFxM9q3x7iUjN/YT2OksthDJ5TiPCu2F38kS4zutqfW+YdVVkBZZx3/1aw==",
"dev": true
},
"parse-json": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/parse-json/-/parse-json-2.2.0.tgz",
@ -12580,6 +12738,16 @@
}
}
},
"pbf": {
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/pbf/-/pbf-3.2.1.tgz",
"integrity": "sha512-ClrV7pNOn7rtmoQVF4TS1vyU0WhYRnP92fzbfF75jAIwpnzdJXf8iTd4CMEqO4yUenH6NDqLiwjqlh6QgZzgLQ==",
"dev": true,
"requires": {
"ieee754": "^1.1.12",
"resolve-protobuf-schema": "^2.1.0"
}
},
"pbkdf2": {
"version": "3.0.17",
"resolved": "https://registry.npmjs.org/pbkdf2/-/pbkdf2-3.0.17.tgz",
@ -15260,6 +15428,12 @@
"integrity": "sha1-mEcocL8igTL8vdhoEputEsPAKeM=",
"dev": true
},
"protocol-buffers-schema": {
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/protocol-buffers-schema/-/protocol-buffers-schema-3.6.0.tgz",
"integrity": "sha512-TdDRD+/QNdrCGCE7v8340QyuXd4kIWIgapsE2+n/SaGiSSbomYl4TjHlvIoCWRpE7wFt02EpB35VVA2ImcBVqw==",
"dev": true
},
"proxy-addr": {
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.5.tgz",
@ -15425,6 +15599,12 @@
"integrity": "sha512-w7fLxIRCRT7U8Qu53jQnJyPkYZIaR4n5151KMfcJlO/A9397Wxb1amJvROTK6TOnp7PfoAmg/qXiNHI+08jRfA==",
"dev": true
},
"quickselect": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/quickselect/-/quickselect-2.0.0.tgz",
"integrity": "sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw==",
"dev": true
},
"quill": {
"version": "1.3.6",
"resolved": "https://registry.npmjs.org/quill/-/quill-1.3.6.tgz",
@ -15498,6 +15678,15 @@
"integrity": "sha1-DD0L6u2KAclm2Xh793goElKpeao=",
"dev": true
},
"rbush": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/rbush/-/rbush-3.0.1.tgz",
"integrity": "sha512-XRaVO0YecOpEuIvbhbpTrZgoiI6xBlz6hnlr6EHhd+0x9ase6EmeN+hdwwUaJvLcsFFQ8iWVF1GAK1yB0BWi0w==",
"dev": true,
"requires": {
"quickselect": "^2.0.0"
}
},
"read-pkg": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
@ -15866,6 +16055,15 @@
"dev": true,
"optional": true
},
"resolve-protobuf-schema": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/resolve-protobuf-schema/-/resolve-protobuf-schema-2.1.0.tgz",
"integrity": "sha512-kI5ffTiZWmJaS/huM8wZfEMer1eRd7oJQhDuxeCLe3t7N7mX3z94CN0xPxBQxFYQTSNz9T0i+v6inKqSdK8xrQ==",
"dev": true,
"requires": {
"protocol-buffers-schema": "^3.3.1"
}
},
"resolve-url": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
@ -15972,6 +16170,12 @@
"gulp-util": "*"
}
},
"rw": {
"version": "1.3.3",
"resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
"integrity": "sha1-P4Yt+pGrdmsUiF700BEkv9oHT7Q=",
"dev": true
},
"rx-lite": {
"version": "4.0.8",
"resolved": "https://registry.npmjs.org/rx-lite/-/rx-lite-4.0.8.tgz",
@ -16574,6 +16778,18 @@
}
}
},
"sort-asc": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/sort-asc/-/sort-asc-0.1.0.tgz",
"integrity": "sha1-q3md9h/HPqCVbHnEtTHtHp53J+k=",
"dev": true
},
"sort-desc": {
"version": "0.1.1",
"resolved": "https://registry.npmjs.org/sort-desc/-/sort-desc-0.1.1.tgz",
"integrity": "sha1-GYuMDN6wlcRjNBhh45JdTuNZqe4=",
"dev": true
},
"sort-keys": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/sort-keys/-/sort-keys-2.0.0.tgz",
@ -16583,6 +16799,16 @@
"is-plain-obj": "^1.0.0"
}
},
"sort-object": {
"version": "0.3.2",
"resolved": "https://registry.npmjs.org/sort-object/-/sort-object-0.3.2.tgz",
"integrity": "sha1-mODRme3kDgfGGoRAPGHWw7KQ+eI=",
"dev": true,
"requires": {
"sort-asc": "^0.1.0",
"sort-desc": "^0.1.1"
}
},
"sortablejs": {
"version": "1.12.0",
"resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.12.0.tgz",
@ -17731,6 +17957,42 @@
"neo-async": "^2.6.0"
}
},
"threads": {
"version": "1.7.0",
"resolved": "https://registry.npmjs.org/threads/-/threads-1.7.0.tgz",
"integrity": "sha512-Mx5NBSHX3sQYR6iI9VYbgHKBLisyB+xROCBGjjWm1O9wb9vfLxdaGtmT/KCjUqMsSNW6nERzCW3T6H43LqjDZQ==",
"dev": true,
"requires": {
"callsites": "^3.1.0",
"debug": "^4.2.0",
"is-observable": "^2.1.0",
"observable-fns": "^0.6.1",
"tiny-worker": ">= 2"
},
"dependencies": {
"callsites": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
"integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
"dev": true
},
"debug": {
"version": "4.3.2",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
"integrity": "sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==",
"dev": true,
"requires": {
"ms": "2.1.2"
}
},
"ms": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
"dev": true
}
}
},
"throttle-debounce": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-3.0.1.tgz",
@ -17813,6 +18075,16 @@
"integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=",
"dev": true
},
"tiny-worker": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/tiny-worker/-/tiny-worker-2.3.0.tgz",
"integrity": "sha512-pJ70wq5EAqTAEl9IkGzA+fN0836rycEuz2Cn6yeZ6FRzlVS5IDOkFHpIoEsksPRQV34GDqXm65+OlnZqUSyK2g==",
"dev": true,
"optional": true,
"requires": {
"esm": "^3.2.25"
}
},
"tmp": {
"version": "0.0.33",
"resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
@ -18714,6 +18986,12 @@
"defaults": "^1.0.3"
}
},
"webfont-matcher": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/webfont-matcher/-/webfont-matcher-1.1.0.tgz",
"integrity": "sha1-mM6VCXsp4x++czBT4Q5XFkLRxsc=",
"dev": true
},
"webidl-conversions": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-6.1.0.tgz",
@ -19301,6 +19579,12 @@
"resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-3.0.0.tgz",
"integrity": "sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw=="
},
"xml-utils": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/xml-utils/-/xml-utils-1.0.2.tgz",
"integrity": "sha512-rEn0FvKi+YGjv9omf22oAf+0d6Ly/sgJ/CUufU/nOzS7SRLmgwSujrewc03KojXxt+aPaTRpm593TgehtUBMSQ==",
"dev": true
},
"xmlchars": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",

705
epmet-oper-web/src/views/components/editResi.vue

@ -0,0 +1,705 @@
<template>
<div :id="formId" class="resi-container">
<el-form :ref="formId" class="resi-form" :model="form" :rules="rules" :label-width="labelWidth">
<template v-if="supportAdd">
<el-row style="margin-bottom: 10px;">
<el-col :span="24">
<el-button icon="el-icon-plus" size="small" @click="handleAddRow"></el-button>
</el-col>
</el-row>
<resi-form v-for="(item, index) in addList" :key="index" :ref="'baseForms' + index" :columns="3"
:form-list="item.itemList" :form-id="'baseForms' + item" />
</template>
<template v-else>
<el-row v-if="fixed" class="resi-row">
<!-- <el-col v-for="n in item" :key="n.id" :span="n.itemType === 'textarea'&&24 || (24/columns)"> -->
<el-col :span="6">
<el-form-item :prop="form.GRID_ID" label="所属网格">
<!-- <div class="resi-cell"> -->
<!-- <div class="resi-cell-label">{{n.label}}</div> -->
<div class="resi-cell-value">
<el-select v-model="form.GRID_ID" placeholder="请选择网格" size="small"
clearable class="resi-cell-select"
>
<el-option
v-for="item in optionsG"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
<!-- </div> -->
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item :prop="form.VILLAGE_ID" label="所属小区">
<!-- <div class="resi-cell"> -->
<!-- <div class="resi-cell-label">{{n.label}}</div> -->
<div class="resi-cell-value">
<el-select v-model="form.VILLAGE_ID" placeholder="请选择小区" size="small"
clearable class="resi-cell-select"
>
<el-option
v-for="item in optionsV"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
<!-- </div> -->
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item :prop="form.BUILD_ID" label="所属楼宇">
<!-- <div class="resi-cell"> -->
<!-- <div class="resi-cell-label">{{n.label}}</div> -->
<div class="resi-cell-value">
<el-select v-model="form.BUILD_ID" placeholder="请选择楼号" size="small"
clearable class="resi-cell-select"
>
<el-option
v-for="item in optionsB"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
<!-- </div> -->
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item :prop="form.HOME_ID" label="所属家庭">
<!-- <div class="resi-cell"> -->
<!-- <div class="resi-cell-label">{{n.label}}</div> -->
<div class="resi-cell-value">
<el-select v-model="form.HOME_ID" placeholder="请选择" size="small"
clearable class="resi-cell-select"
>
<el-option
v-for="item in optionsH"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
<!-- </div> -->
</el-form-item>
</el-col>
</el-row>
<el-row v-for="(item, index) in sliceList(formList, columns)" :key="index" class="resi-row">
<!-- <el-col v-for="n in item" :key="n.id" :span="n.itemType === 'textarea'&&24 || (24/columns)"> -->
<el-col v-for="n in item" :key="n.itemId" :span="item.length === 1 ? 24 : (24/columns)"
:style="n.itemType === 'divider' && 'display: none;'">
<el-form-item :prop="n.columnName" :label="n.label">
<!-- <div class="resi-cell"> -->
<!-- <div class="resi-cell-label">{{n.label}}</div> -->
<div class="resi-cell-value">
<template v-if="n.itemType === 'input' || n.itemType === 'textarea'">
<el-input
v-if="n.validType"
v-model="form[n.columnName]"
class="resi-cell-input"
size="small"
clearable
placeholder="请输入内容"
>
</el-input>
<el-input
v-else
v-model="form[n.columnName]"
class="resi-cell-input"
size="small"
clearable
placeholder="请输入内容"
>
</el-input>
</template>
<!-- <template v-if="n.itemType === 'textarea'">
<el-input
v-model="form[n.columnName]"
class="resi-cell-textarea"
size="small"
type="textarea"
clearable
placeholder="请输入内容"
>
</el-input>
</template> -->
<el-date-picker
v-else-if="n.itemType === 'datepicker'"
v-model="form[n.columnName]"
class="resi-cell-input"
type="date"
size="small"
clearable
placeholder="选择日期"
format="yyyy 年 MM 月 dd 日"
value-format="yyyy-MM-dd">
</el-date-picker>
<el-date-picker
v-else-if="n.itemType === 'dateRange'"
v-model="form[n.columnName]"
type="daterange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions">
</el-date-picker>
<el-time-picker
v-else-if="n.itemType === 'timepicker'"
v-model="form[n.columnName]"
placeholder="任意时间点">
</el-time-picker>
<el-time-picker
v-else-if="n.itemType === 'timeRange'"
v-model="form[n.columnName]"
is-range
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
placeholder="选择时间范围">
</el-time-picker>
<el-select v-else-if="n.itemType === 'select'" v-model="form[n.columnName]"
:multiple="n.multiSelect"
placeholder="请选择" size="small" clearable class="resi-cell-select">
<el-option
v-for="item in n.options || options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<!-- <el-cascader
:options="options"
:props="{ checkStrictly: true }"
clearable></el-cascader> -->
<el-cascader
v-else-if="n.itemType === 'cascader'"
v-model="form[n.columnName]"
:options="n.options"
:props="{ checkStrictly: true }"
clearable
size="small"
class="resi-cell-select">
</el-cascader>
<template v-else-if="n.itemType === 'radio'">
<el-radio v-for="ns in n.options" :key="ns.value" v-model="form[n.columnName]"
:label="ns.value">
{{ ns.label }}
</el-radio>
<!-- <el-radio v-model="form[n.columnName]" label="1">备选项</el-radio> -->
</template>
<template v-else-if="n.itemType === 'checkbox'">
<el-checkbox-group v-model="form[n.columnName]">
<el-checkbox v-for="ns in n.options" :key="ns.value" :label="ns.value">{{ns.label}}</el-checkbox>
<!-- <el-checkbox label="n.la"></el-checkbox> -->
</el-checkbox-group>
</template>
</div>
<!-- </div> -->
</el-form-item>
</el-col>
</el-row>
</template>
</el-form>
</div>
</template>
<script>
import { isCard, isMobile } from '@/utils/validate'
export default {
name: 'resiForm',
props: {
fixed: {
type: Boolean,
default: false
},
labelWidth: {
type: String,
default: '100px'
},
formId: {
type: String,
default: 'resiForm'
},
formList: {
type: Array,
default: function () {
return []
}
},
formInfo: {
type: Object,
default: function () {
return {}
}
},
mutiList: {
type: Array,
default: function () {
return []
}
},
//
columns: {
type: Number,
default: 4
},
supportAdd: { //
type: Boolean,
default: false
}
},
data () {
// let form = {}
// let rules = {}
let checkMObile = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入手机号'))
} else {
if (!isMobile(value)) {
callback(new Error('手机号格式不正确'))
}
callback()
}
}
let checkIdCard = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入身份证'))
} else {
if (!isCard(value)) {
callback(new Error('身份证号格式不正确'))
}
callback()
}
}
let initForm = (obj, arr) => {
let _form = {}
// console.log('formInfo', obj)
if (Object.keys(obj).length > 0) {
_form = { ...obj }
return _form
}
arr.forEach(item => {
if (item.multiSelect || item.itemType === 'cascader') {
if (item.columnValue && item.columnValue.indexOf(',') > -1) _form[item.columnName] = item.columnValue.split(',')
else _form[item.columnName] = [item.columnValue]
} else _form[item.columnName] = item.columnValue
})
return _form
}
let initRules = (arr) => {
let rules = {}
arr.forEach(item => {
if (item.required) {
if (item.validType === 'mobile') {
rules[item.columnName] = [
{ validator: checkMObile, trigger: 'blur' }
]
} else if (item.validType === 'id_card') {
rules[item.columnName] = [
{ validator: checkIdCard, trigger: 'blur' }
]
} else {
rules[item.columnName] = [
{ required: true, message: `请输入${item.label}`, trigger: 'blur' }
]
}
}
})
return rules
}
let form = initForm(this.formInfo, this.formList)
let rules = initRules(this.formList)
let tempFormList = [ ...this.formList ]
let constForm = {
...form,
GRID_ID: '',
VILLAGE_ID: '',
BUILD_ID: '',
HOME_ID: ''
}
return {
openSearch: false,
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
fixedForm: {
GRID_ID: '',
VILLAGE_ID: '',
BUILD_ID: '',
HOME_ID: ''
},
fixedList: {
AGENCY_ID: this.$store.state.user.agencyId
},
form: {
...form,
GRID_ID: '',
VILLAGE_ID: '',
BUILD_ID: '',
HOME_ID: ''
},
constForm,
tempFormList,
addCount: 0,
addList: [],
rules,
value: '',
optionsV: [],
optionsB: [],
optionsH: [],
optionsG: [],
checkList: ['选中且禁用', '复选框 A'],
pickerOptions: {
shortcuts: [{
text: '最近一周',
onClick (picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
picker.$emit('pick', [start, end])
}
}, {
text: '最近一个月',
onClick (picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
picker.$emit('pick', [start, end])
}
}, {
text: '最近三个月',
onClick (picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
picker.$emit('pick', [start, end])
}
}]
}
}
},
computed: {
sliceList () {
return function (data, count) {
if (data !== undefined) {
let index = 0
let arrTemp = []
let arrTemp1 = []
let arr1 = []
let arr2 = []
let _i = 0
let _index = 0
for (let i = 0; i < data.length; i++) {
if (data[i].itemType === 'divider' || data[i].itemType === 'checkbox') {
_i = i + 1
}
}
arr1 = data.slice(0, _i)
arr2 = data.slice(_i, data.length)
for (let i = 0; i < arr1.length; i++) {
index = parseInt(i / count)
if (arrTemp.length <= index) {
arrTemp.push([])
}
arrTemp[index].push(arr1[i])
}
for (let i = 0; i < arr2.length; i++) {
_index = parseInt(i / count)
if (arrTemp1.length <= _index) {
arrTemp1.push([])
}
arrTemp1[_index].push(arr2[i])
}
arrTemp = arrTemp.concat(arrTemp1)
return arrTemp
}
}
}
},
watch: {
form: {
handler (val, val2) {
// console.log('valpppp----', val, val2)
for (let n in val) {
if (this.constForm[n] !== val[n]) {
this.handleChangeForm(n)
console.log('nnnnnn', n)
this.handleChangeGroup(n, val[n])
}
}
this.constForm = { ...val }
},
deep: true
}
},
created () {
// this.initForm()
// console.log('formInfo---ggg', this.form)
if (this.supportAdd) {
this.addList = [...this.mutiList]
}
// } this.addList.push(this.addCount++)
this.getOptionsList()
},
methods: {
initForm () {
console.log('formInfo', this.formInfo)
if (Object.keys(this.formInfo).length > 0) {
this.form = { ...this.formInfo }
return
}
this.formList.forEach(item => {
this.$set(this.form, item.columnName, '')
})
},
handleOpenSearch () {
this.openSearch = !this.openSearch
},
handleAddRow () {
this.addList.push(this.addCount++)
},
//
handleFiexedForm (val) {
let item = {
[val]: this.fixedForm[val]
}
this.fixedList.push(item)
this.$set(this.fixedList, val, this.fixedForm[val])
},
//
handleChangeGroup (columnName, value) {
this.tempFormList.forEach(item => {
if (item.columnName === columnName && item.itemType === 'radio' && item.childGroup) {
console.log('columnName', item.columnName, columnName)
this.$emit('changegroup', { value, childGroup: item.childGroup })
}
})
},
// form
handleChangeForm (val) {
if (this.fixed) {
// let item = {}
for (let n in this.fixedForm) {
if (n === val) {
// item = {
// [val]: this.form[val]
// }
// this.fixedList.push(item)
this.$set(this.fixedList, val, this.form[val])
}
}
}
console.log('fixedList----999', this.fixedList)
this.tempFormList.forEach(item => {
if (item.columnName === val) item.isChange = true
})
},
handlerMuscForm () {
let arr = []
this.addList.forEach(item => {
// console.log('handlerMuscForm----000', this.$refs['baseForms' + item][0].handleForm())
arr.push([ ...this.$refs['baseForms' + item][0].handleForm() ])
})
// console.log('handlerMuscForm----111', arr)
let arr2 = arr.reduce(function (a, b) { return a.concat(b) })
// console.log('handlerMuscForm----222', arr2)
let hash = {}
let i = 0
let res = []
// let finalArr = []
arr2.forEach((item) => {
let name = item.tableName
if (hash[name]) {
res[hash[name] - 1].list.push(...item.list)
// console.log('hash[name]---', hash[name], res, res[hash[name] - 1], item)
} else {
hash[name] = ++i
res.push({
list: [...item.list],
supportAdd: this.supportAdd,
tableName: name
})
// console.log('hash[name]0000---', hash[name], res)
}
})
// console.log('handlerMuscForm----333', res)
return res
},
resetForm () {
this.$refs[this.formId].resetFields()
},
handleForm () {
let newForm = []
this.$refs[this.formId].validate((valid) => {
if (valid) {
var hash = {}
var i = 0
var res = []
this.tempFormList.forEach(function (item) {
var name = item.tableName
hash[name] ? res[hash[name] - 1].list.push(item) : hash[name] = ++i && res.push({
list: [item],
tableName: name
})
})
res.forEach(item => {
let _form = {}
item.list.filter(n => n.isChange).forEach(r => {
_form[r.columnName] = r.multiSelect || r.itemType === 'cascader' ? this.form[r.columnName].toString() : this.form[r.columnName]
// return _form
})
if (this.fixed) {
for (let n in this.fixedList) {
_form[n] = this.fixedList[n]
}
}
newForm.push({
tableName: item.tableName,
supportAdd: this.supportAdd,
list: [{ ..._form }]
})
})
return newForm
} else {
console.log('error submit!!')
return false
}
})
if (this.supportAdd) newForm = this.handlerMuscForm()
return newForm
},
getOptionsList () {
const { user } = this.$store.state
this.$http
.post('/gov/org/customergrid/gridoption', { agencyId: user.agencyId })
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
} else {
console.log('获取查询详情成功', res.data)
this.optionsG = res.data
}
})
.catch(() => {
return this.$message.error('网络错误')
})
this.$http
.post('/gov/org/icneighborhood/neighborhoodoption', { GRID_ID: this.form.GRID_ID })
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
} else {
console.log('获取查询详情成功', res.data)
this.optionsV = res.data
}
})
.catch(() => {
return this.$message.error('网络错误')
})
this.$http
.post('/gov/org/icbuilding/buildingoption', { VILLAGE_ID: this.form.VILLAGE_ID })
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
} else {
console.log('获取查询详情成功', res.data)
this.optionsB = res.data
}
})
.catch(() => {
return this.$message.error('网络错误')
})
this.$http
.post('/gov/org/ichouse/houseoption', { BUILD_ID: this.form.BUILD_ID })
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
} else {
console.log('获取查询详情成功', res.data)
this.optionsH = res.data
}
})
.catch(() => {
return this.$message.error('网络错误')
})
}
}
}
</script>
<style lang="scss">
.resi-form {
.el-date-editor.el-input, .el-date-editor.el-input__inner {
width: 100% !important;
}
}
.resi-cell-value .resi-cell-input {
max-width: 180px;
}
</style>
<style lang="scss" scoped>
.resi-form .resi-row {
margin-bottom: 0;
}
// .resi-form .resi-cell {
// display: flex;
// align-items: center;
// .resi-cell-label {
// width: 70px;
// box-sizing: border-box;
// margin-right: 15px;
// text-align: right;
// }
// .resi-cell-value-radio {
// display: flex;
// align-items: center;
// min-height: 36px;
// }
// .resi-cell-value .resi-cell-input {
// width: 180px;
// }
.resi-cell-value .resi-cell-textarea {
width: 300px;
}
// .resi-cell-select {
// width: 180px;
// box-sizing: border-box;
// margin-right: 10px;
// &-middle {
// width: 130px;
// }
// &-small {
// width: 88px;
// }
// }
.resi-cell-select:last-child {
margin-right: 0;
}
// }
</style>

575
epmet-oper-web/src/views/components/resiForm.vue

@ -1,79 +1,211 @@
<template>
<div :id="formId" class="resi-container">
<el-form :ref="formId" class="resi-form" :model="form" :rules="rules" :label-width="labelWidth">
<el-row v-for="(item, index) in sliceList(formList, 4)" :key="index" class="resi-row">
<el-col v-for="n in item" :key="n.id" :span="n.item_type === 'textarea'&&24 || 6">
<el-form-item :prop="n.column_name" :label="n.label">
<template v-if="supportAdd">
<el-row style="margin-bottom: 10px;">
<el-col :span="24">
<el-button icon="el-icon-plus" size="small" @click="handleAddRow"></el-button>
</el-col>
</el-row>
<resi-form v-for="(item, index) in addList" :key="index" :ref="'baseForms' + index" :columns="3" :form-list="formList" :form-id="'baseForms' + item" />
</template>
<template v-else>
<el-row v-if="fixed" class="resi-row">
<!-- <el-col v-for="n in item" :key="n.id" :span="n.itemType === 'textarea'&&24 || (24/columns)"> -->
<el-col :span="6">
<el-form-item :prop="form.GRID_ID" label="所属网格">
<!-- <div class="resi-cell"> -->
<!-- <div class="resi-cell-label">{{n.label}}</div> -->
<div class="resi-cell-value">
<template v-if="n.item_type === 'input'">
<el-input
v-if="n.valid_type"
v-model="form[n.column_name]"
class="resi-cell-input"
size="small"
clearable
placeholder="请输入内容"
>
</el-input>
<el-input
v-else
v-model="form[n.column_name]"
class="resi-cell-input"
size="small"
clearable
placeholder="请输入内容"
>
</el-input>
</template>
<template v-if="n.item_type === 'textarea'">
<el-input
v-model="form[n.column_name]"
class="resi-cell-textarea"
size="small"
type="textarea"
clearable
placeholder="请输入内容"
>
</el-input>
</template>
<el-date-picker
v-else-if="n.item_type === 'date'"
v-model="form[n.column_name]"
class="resi-cell-input"
type="date"
size="small"
clearable
placeholder="选择日期">
</el-date-picker>
<el-select v-else-if="n.item_type === 'select'" v-model="form[n.column_name]"
placeholder="请选择" size="small" clearable class="resi-cell-select">
<el-select v-model="form.GRID_ID" placeholder="请选择网格" size="small"
clearable class="resi-cell-select"
>
<el-option
v-for="item in n.option_source_value || options"
v-for="item in optionsG"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
<!-- </div> -->
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item :prop="form.VILLAGE_ID" label="所属小区">
<!-- <div class="resi-cell"> -->
<!-- <div class="resi-cell-label">{{n.label}}</div> -->
<div class="resi-cell-value">
<el-select v-model="form.VILLAGE_ID" placeholder="请选择小区" size="small"
clearable class="resi-cell-select"
>
<el-option
v-for="item in optionsV"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
<!-- </div> -->
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item :prop="form.BUILD_ID" label="所属楼宇">
<!-- <div class="resi-cell"> -->
<!-- <div class="resi-cell-label">{{n.label}}</div> -->
<div class="resi-cell-value">
<el-select v-model="form.BUILD_ID" placeholder="请选择楼号" size="small"
clearable class="resi-cell-select"
>
<el-option
v-for="item in optionsB"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
<!-- </div> -->
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item :prop="form.HOME_ID" label="所属家庭">
<!-- <div class="resi-cell"> -->
<!-- <div class="resi-cell-label">{{n.label}}</div> -->
<div class="resi-cell-value">
<el-select v-model="form.HOME_ID" placeholder="请选择" size="small"
clearable class="resi-cell-select"
>
<el-option
v-for="item in optionsH"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<template v-else-if="n.item_type === 'radio'">
<el-radio v-for="ns in n.option_source_value" :key="ns.value" v-model="form[n.column_name]"
:label="ns.value">
{{ ns.label }}
</el-radio>
<!-- <el-radio v-model="form[n.column_name]" label="1">备选项</el-radio> -->
</template>
<template v-else-if="n.item_type === 'checkbox'">
<el-checkbox-group v-model="form[n.column_name]">
<el-checkbox label="复选框 A"></el-checkbox>
<el-checkbox label="复选框 B"></el-checkbox>
</el-checkbox-group>
</template>
</div>
<!-- </div> -->
</el-form-item>
</el-col>
</el-row>
<el-row v-for="(item, index) in sliceList(formList, columns)" :key="index" class="resi-row">
<!-- <el-col v-for="n in item" :key="n.id" :span="n.itemType === 'textarea'&&24 || (24/columns)"> -->
<el-col v-for="n in item" :key="n.itemId" :span="item.length === 1 ? 24 : (24/columns)"
:style="n.itemType === 'divider' && 'display: none;'">
<el-form-item :prop="n.columnName" :label="n.label">
<!-- <div class="resi-cell"> -->
<!-- <div class="resi-cell-label">{{n.label}}</div> -->
<div class="resi-cell-value">
<template v-if="n.itemType === 'input' || n.itemType === 'textarea'">
<el-input
v-if="n.validType"
v-model="form[n.columnName]"
class="resi-cell-input"
size="small"
clearable
placeholder="请输入内容"
>
</el-input>
<el-input
v-else
v-model="form[n.columnName]"
class="resi-cell-input"
size="small"
clearable
placeholder="请输入内容"
>
</el-input>
</template>
<!-- <template v-if="n.itemType === 'textarea'">
<el-input
v-model="form[n.columnName]"
class="resi-cell-textarea"
size="small"
type="textarea"
clearable
placeholder="请输入内容"
>
</el-input>
</template> -->
<el-date-picker
v-else-if="n.itemType === 'datepicker'"
v-model="form[n.columnName]"
class="resi-cell-input"
type="date"
size="small"
clearable
placeholder="选择日期"
format="yyyy 年 MM 月 dd 日"
value-format="yyyy-MM-dd">
</el-date-picker>
<el-date-picker
v-else-if="n.itemType === 'dateRange'"
v-model="form[n.columnName]"
type="daterange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions">
</el-date-picker>
<el-time-picker
v-else-if="n.itemType === 'timepicker'"
v-model="form[n.columnName]"
placeholder="任意时间点">
</el-time-picker>
<el-time-picker
v-else-if="n.itemType === 'timeRange'"
v-model="form[n.columnName]"
is-range
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
placeholder="选择时间范围">
</el-time-picker>
<el-select v-else-if="n.itemType === 'select'" v-model="form[n.columnName]"
:multiple="n.multiSelect"
placeholder="请选择" size="small" clearable class="resi-cell-select">
<el-option
v-for="item in n.options || options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<!-- <el-cascader
:options="options"
:props="{ checkStrictly: true }"
clearable></el-cascader> -->
<el-cascader
v-else-if="n.itemType === 'cascader'"
v-model="form[n.columnName]"
:options="n.options"
:props="{ checkStrictly: true }"
clearable
size="small"
class="resi-cell-select">
</el-cascader>
<template v-else-if="n.itemType === 'radio'">
<el-radio v-for="ns in n.options" :key="ns.value" v-model="form[n.columnName]"
:label="ns.value">
{{ ns.label }}
</el-radio>
<!-- <el-radio v-model="form[n.columnName]" label="1">备选项</el-radio> -->
</template>
<template v-else-if="n.itemType === 'checkbox'">
<el-checkbox-group v-model="form[n.columnName]">
<el-checkbox v-for="ns in n.options" :key="ns.value" :label="ns.value">{{ns.label}}</el-checkbox>
<!-- <el-checkbox label="n.la"></el-checkbox> -->
</el-checkbox-group>
</template>
</div>
<!-- </div> -->
</el-form-item>
</el-col>
</el-row>
</template>
</el-form>
</div>
</template>
@ -84,6 +216,10 @@ import { isCard, isMobile } from '@/utils/validate'
export default {
name: 'resiForm',
props: {
fixed: {
type: Boolean,
default: false
},
labelWidth: {
type: String,
default: '100px'
@ -103,10 +239,19 @@ export default {
default: function () {
return {}
}
},
//
columns: {
type: Number,
default: 4
},
supportAdd: { //
type: Boolean,
default: false
}
},
data () {
let form = {}
// let form = {}
// let rules = {}
let checkMObile = (rule, value, callback) => {
if (value === '') {
@ -129,29 +274,32 @@ export default {
}
}
let initForm = (obj, arr) => {
console.log('formInfo', obj)
let _form = {}
// console.log('formInfo', obj)
if (Object.keys(obj).length > 0) {
form = { ...obj }
return
_form = { ...obj }
return _form
}
arr.forEach(item => {
form[item.column_name] = ''
if (item.multiSelect) _form[item.columnName] = []
else _form[item.columnName] = ''
})
return _form
}
let initRules = (arr) => {
let rules = {}
arr.forEach(item => {
if (item.require) {
if (item.valid_type === 'mobile') {
rules[item.column_name] = [
if (item.required) {
if (item.validType === 'mobile') {
rules[item.columnName] = [
{ validator: checkMObile, trigger: 'blur' }
]
} else if (item.valid_type === 'id_card') {
rules[item.column_name] = [
} else if (item.validType === 'id_card') {
rules[item.columnName] = [
{ validator: checkIdCard, trigger: 'blur' }
]
} else {
rules[item.column_name] = [
rules[item.columnName] = [
{ required: true, message: `请输入${item.label}`, trigger: 'blur' }
]
}
@ -159,8 +307,16 @@ export default {
})
return rules
}
initForm(this.formInfo, this.formList)
let form = initForm(this.formInfo, this.formList)
let rules = initRules(this.formList)
let tempFormList = [ ...this.formList ]
let constForm = {
...form,
GRID_ID: '',
VILLAGE_ID: '',
BUILD_ID: '',
HOME_ID: ''
}
return {
openSearch: false,
options: [{
@ -179,10 +335,60 @@ export default {
value: '选项5',
label: '北京烤鸭'
}],
form,
fixedForm: {
GRID_ID: '',
VILLAGE_ID: '',
BUILD_ID: '',
HOME_ID: ''
},
fixedList: {
AGENCY_ID: this.$store.state.user.agencyId
},
form: {
...form,
GRID_ID: '',
VILLAGE_ID: '',
BUILD_ID: '',
HOME_ID: ''
},
constForm,
tempFormList,
addCount: 0,
addList: [],
rules,
value: '',
checkList: ['选中且禁用', '复选框 A']
optionsV: [],
optionsB: [],
optionsH: [],
optionsG: [],
checkList: ['选中且禁用', '复选框 A'],
pickerOptions: {
shortcuts: [{
text: '最近一周',
onClick (picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
picker.$emit('pick', [start, end])
}
}, {
text: '最近一个月',
onClick (picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
picker.$emit('pick', [start, end])
}
}, {
text: '最近三个月',
onClick (picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
picker.$emit('pick', [start, end])
}
}]
}
}
},
computed: {
@ -191,21 +397,59 @@ export default {
if (data !== undefined) {
let index = 0
let arrTemp = []
let arrTemp1 = []
let arr1 = []
let arr2 = []
let _i = 0
let _index = 0
for (let i = 0; i < data.length; i++) {
if (data[i].itemType === 'divider' || data[i].itemType === 'checkbox') {
_i = i + 1
}
}
arr1 = data.slice(0, _i)
arr2 = data.slice(_i, data.length)
for (let i = 0; i < arr1.length; i++) {
index = parseInt(i / count)
if (arrTemp.length <= index) {
arrTemp.push([])
}
arrTemp[index].push(data[i])
arrTemp[index].push(arr1[i])
}
for (let i = 0; i < arr2.length; i++) {
_index = parseInt(i / count)
if (arrTemp1.length <= _index) {
arrTemp1.push([])
}
arrTemp1[_index].push(arr2[i])
}
arrTemp = arrTemp.concat(arrTemp1)
return arrTemp
}
}
}
},
watch: {
form: {
handler (val, val2) {
// console.log('valpppp----', val, val2)
for (let n in val) {
if (this.constForm[n] !== val[n]) {
this.handleChangeForm(n)
console.log('nnnnnn', n)
this.handleChangeGroup(n, val[n])
}
}
this.constForm = { ...val }
},
deep: true
}
},
created () {
// this.initForm()
console.log('formInfo---ggg', this.form)
// console.log('formInfo---ggg', this.form)
if (this.supportAdd) this.addList.push(this.addCount++)
this.getOptionsList()
},
methods: {
initForm () {
@ -215,20 +459,194 @@ export default {
return
}
this.formList.forEach(item => {
this.$set(this.form, item.column_name, '')
this.$set(this.form, item.columnName, '')
})
},
handleOpenSearch () {
this.openSearch = !this.openSearch
},
handleAddRow () {
this.addList.push(this.addCount++)
},
//
handleFiexedForm (val) {
let item = {
[val]: this.fixedForm[val]
}
this.fixedList.push(item)
this.$set(this.fixedList, val, this.fixedForm[val])
},
//
handleChangeGroup (columnName, value) {
this.tempFormList.forEach(item => {
if (item.columnName === columnName && item.itemType === 'radio' && item.childGroup) {
console.log('columnName', item.columnName, columnName)
this.$emit('changegroup', { value, childGroup: item.childGroup })
}
})
},
// form
handleChangeForm (val) {
if (this.fixed) {
// let item = {}
for (let n in this.fixedForm) {
if (n === val) {
// item = {
// [val]: this.form[val]
// }
// this.fixedList.push(item)
this.$set(this.fixedList, val, this.form[val])
}
}
}
console.log('fixedList----999', this.fixedList)
this.tempFormList.forEach(item => {
if (item.columnName === val) item.isChange = true
})
},
handlerMuscForm () {
let arr = []
this.addList.forEach(item => {
// console.log('handlerMuscForm----000', this.$refs['baseForms' + item][0].handleForm())
arr.push([ ...this.$refs['baseForms' + item][0].handleForm() ])
})
// console.log('handlerMuscForm----111', arr)
let arr2 = arr.reduce(function (a, b) { return a.concat(b) })
// console.log('handlerMuscForm----222', arr2)
let hash = {}
let i = 0
let res = []
// let finalArr = []
arr2.forEach((item) => {
let name = item.tableName
if (hash[name]) {
res[hash[name] - 1].list.push(...item.list)
// console.log('hash[name]---', hash[name], res, res[hash[name] - 1], item)
} else {
hash[name] = ++i
res.push({
list: [...item.list],
supportAdd: this.supportAdd,
tableName: name
})
// console.log('hash[name]0000---', hash[name], res)
}
})
// console.log('handlerMuscForm----333', res)
return res
},
resetForm () {
this.$refs[this.formId].resetFields()
},
handleForm () {
let newForm = []
this.$refs[this.formId].validate((valid) => {
if (valid) {
var hash = {}
var i = 0
var res = []
this.tempFormList.forEach(function (item) {
var name = item.tableName
hash[name] ? res[hash[name] - 1].list.push(item) : hash[name] = ++i && res.push({
list: [item],
tableName: name
})
})
res.forEach(item => {
let _form = {}
item.list.filter(n => n.isChange).forEach(r => {
_form[r.columnName] = r.multiSelect || r.itemType === 'cascader' ? this.form[r.columnName].toString() : this.form[r.columnName]
// return _form
})
if (this.fixed) {
for (let n in this.fixedList) {
_form[n] = this.fixedList[n]
}
}
newForm.push({
tableName: item.tableName,
supportAdd: this.supportAdd,
list: [{ ..._form }]
})
})
return newForm
} else {
console.log('error submit!!')
return false
}
})
if (this.supportAdd) newForm = this.handlerMuscForm()
return newForm
},
getOptionsList () {
const { user } = this.$store.state
this.$http
.post('/gov/org/customergrid/gridoption', { agencyId: user.agencyId })
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
} else {
console.log('获取查询详情成功', res.data)
this.optionsG = res.data
}
})
.catch(() => {
return this.$message.error('网络错误')
})
this.$http
.post('/gov/org/icneighborhood/neighborhoodoption', { GRID_ID: this.form.GRID_ID })
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
} else {
console.log('获取查询详情成功', res.data)
this.optionsV = res.data
}
})
.catch(() => {
return this.$message.error('网络错误')
})
this.$http
.post('/gov/org/icbuilding/buildingoption', { VILLAGE_ID: this.form.VILLAGE_ID })
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
} else {
console.log('获取查询详情成功', res.data)
this.optionsB = res.data
}
})
.catch(() => {
return this.$message.error('网络错误')
})
this.$http
.post('/gov/org/ichouse/houseoption', { BUILD_ID: this.form.BUILD_ID })
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
} else {
console.log('获取查询详情成功', res.data)
this.optionsH = res.data
}
})
.catch(() => {
return this.$message.error('网络错误')
})
}
}
}
</script>
<style lang="scss">
.el-date-editor.el-input, .el-date-editor.el-input__inner {
width: 100% !important;
.resi-form {
.el-date-editor.el-input, .el-date-editor.el-input__inner {
width: 100% !important;
}
}
.resi-cell-value .resi-cell-input {
max-width: 180px;
}
</style>
<style lang="scss" scoped>
@ -253,6 +671,7 @@ export default {
// .resi-cell-value .resi-cell-input {
// width: 180px;
// }
.resi-cell-value .resi-cell-textarea {
width: 300px;
}

336
epmet-oper-web/src/views/components/resiSearch.vue

@ -2,47 +2,116 @@
<div class="resi-container">
<el-card class="resi-card">
<el-row class="resi-row-box" :class="openSearch && 'resi-row-more'">
<el-row v-for="(item, index) in sliceList(formList, 4)" :key="index" class="resi-row" :gutter="20">
<el-row class="resi-row">
<el-col :span="6">
<div class="resi-cell">
<div class="resi-cell-label">所属网格</div>
<div class="resi-cell-value">
<el-select v-model="form.GRID_ID" placeholder="请选择" size="small" clearable class="resi-cell-select">
<el-option
v-for="item in optionsG"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</div>
</el-col>
<el-col :span="18">
<div class="resi-cell">
<div class="resi-cell-label">所属小区</div>
<div class="resi-cell-value">
<el-select v-model="form.VILLAGE_ID" placeholder="请选择小区" size="small"
clearable class="resi-cell-select"
@clear="handleClearVillage">
<el-option
v-for="item in optionsV"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-select v-model="form.BUILD_ID" placeholder="楼号" size="small" clearable
class="resi-cell-select" :disabled="changeVDisabled" @clear="handleClearBuild">
<el-option
v-for="item in optionsB"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-select v-model="form.HOME_ID" :disabled="changeBDisabled" placeholder="单元" size="small" clearable class="resi-cell-select">
<el-option
v-for="item in optionsH"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</div>
</el-col>
</el-row>
<el-row v-for="(item, index) in sliceList(formList, 4)" :key="index" class="resi-row">
<el-col v-for="n in item" :key="n.id" :span="6">
<div class="resi-cell">
<div class="resi-cell-label">{{n.label}}</div>
<div class="resi-cell-value" :class="n.item_type === 'radio' && 'resi-cell-value-radio'">
<div class="resi-cell-value" :class="n.itemType === 'radio' && 'resi-cell-value-radio'">
<el-input
v-if="n.item_type === 'input'"
v-model="form[n.column_name]"
v-if="n.itemType === 'input' || n.itemType === 'textarea'"
v-model="form[n.columnName]"
class="resi-cell-input"
size="small"
clearable
placeholder="请输入内容"
>
</el-input>
<el-date-picker
v-else-if="n.item_type === 'date'"
v-model="form[n.column_name]"
class="resi-cell-input"
type="date"
size="small"
clearable
placeholder="选择日期">
</el-date-picker>
<el-select v-else-if="n.item_type === 'select'" v-model="form[n.column_name]" placeholder="请选择" size="small" clearable class="resi-cell-select">
<template v-else-if="n.itemType === 'datepicker'">
<el-date-picker
v-if="n.queryType === 'daterange'"
v-model="form[n.columnName]"
type="daterange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
class="resi-cell-input"
size="small"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
:picker-options="pickerOptions">
</el-date-picker>
<el-date-picker
v-else
v-model="form[n.columnName]"
class="resi-cell-input"
type="date"
size="small"
clearable
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
placeholder="选择日期">
</el-date-picker>
</template>
<el-select v-else-if="n.itemType === 'select' || n.itemType === 'radio'" v-model="form[n.columnName]" placeholder="请选择" size="small" clearable class="resi-cell-select">
<el-option
v-for="item in options"
v-for="item in n.options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<template v-else-if="n.item_type === 'radio'">
<el-radio v-model="form[n.column_name]" label="1">备选项</el-radio>
<el-radio v-model="form[n.column_name]" label="2">备选项</el-radio>
</template>
<template v-else-if="n.item_type === 'checkbox'">
<el-checkbox-group v-model="form[n.column_name]">
<el-checkbox label="复选框 A"></el-checkbox>
<el-checkbox label="复选框 B"></el-checkbox>
</el-checkbox-group>
</template>
<el-cascader
v-else-if="n.itemType === 'cascader'"
v-model="form[n.columnName]"
:options="n.options"
:props="{ checkStrictly: true }"
clearable
size="small"
class="resi-cell-select">
</el-cascader>
</div>
</div>
</el-col>
@ -488,6 +557,7 @@
<script>
export default {
name: 'ResiSearch',
props: {
formList: {
type: Array,
@ -495,8 +565,34 @@ export default {
}
},
data () {
let initForm = (arr) => {
let _form = {}
// console.log('formInfo', obj)
// if (Object.keys(obj).length > 0) {
// _form = { ...obj }
// return _form
// }
arr.forEach(item => {
_form[item.columnName] = ''
})
return _form
}
let form = initForm(this.formList)
let tempFormList = [ ...this.formList ]
let constForm = {
...form,
GRID_ID: '',
VILLAGE_ID: '',
BUILD_ID: '',
HOME_ID: ''
}
return {
pageLoading: false,
openSearch: false,
optionsV: [],
optionsB: [],
optionsH: [],
optionsG: [],
options: [{
value: '选项1',
label: '黄金糕'
@ -514,8 +610,50 @@ export default {
label: '北京烤鸭'
}],
value: '',
form: {},
checkList: ['选中且禁用', '复选框 A']
fixedList: [],
fixedForm: {
GRID_ID: '',
VILLAGE_ID: '',
BUILD_ID: '',
HOME_ID: ''
},
constForm,
form: {
...form,
GRID_ID: '',
VILLAGE_ID: '',
BUILD_ID: '',
HOME_ID: ''
},
tempFormList,
checkList: ['选中且禁用', '复选框 A'],
pickerOptions: {
shortcuts: [{
text: '最近一周',
onClick (picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
picker.$emit('pick', [start, end])
}
}, {
text: '最近一个月',
onClick (picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
picker.$emit('pick', [start, end])
}
}, {
text: '最近三个月',
onClick (picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
picker.$emit('pick', [start, end])
}
}]
}
}
},
computed: {
@ -534,24 +672,158 @@ export default {
return arrTemp
}
}
},
changeVDisabled () {
return !this.form.VILLAGE_ID
},
changeBDisabled () {
return !this.form.BUILD_ID
}
},
watch: {
form: {
handler (val, val2) {
// console.log('valpppp----', val, val2)
for (let n in val) {
if (this.constForm[n] !== val[n]) {
this.handleChangeForm(n)
console.log('nnnnnn', n)
}
}
this.constForm = { ...val }
},
deep: true
}
},
created () {
this.initForm()
// this.initForm()
console.log('formcccc---', this.form)
this.getOptionsList()
},
methods: {
initForm () {
this.formList.forEach(item => {
this.$set(this.form, item.column_name, '')
this.$set(this.form, item.columnName, '')
})
// console.log('formcccc---', this.form)
console.log('formcccc---', this.form)
},
handleClearVillage () {
this.form.BUILD_ID = ''
this.form.HOME_ID = ''
},
handleClearBuild () {
this.form.BUILD_ID = ''
this.form.HOME_ID = ''
},
handleSearch () {
// console.log('formmmmm---', this.form)
this.$emit('search', this.form)
let arr = this.tempFormList.filter(n => n.isChange).map(item => {
return {
queryType: item.queryType,
tableName: item.tableName,
columnName: item.columnName,
columnValue: [...this.form[item.columnName]]
// columnValue: item.queryType === 'daterange' ? this.form[item.columnName] : [this.form[item.columnName]]
}
})
let arr1 = this.fixedList.filter(n => n.columnValue.length > 0).map(item => {
return {
...item
}
})
let arr3 = [ ...arr1, ...arr ]
this.$emit('search', arr3)
},
handleOpenSearch () {
this.openSearch = !this.openSearch
},
// form
handleChangeForm (val) {
for (let n in this.fixedForm) {
if (n === val) {
if (this.fixedList.length > 0) {
this.fixedList.forEach((item, index) => {
if (item.columnName === val) {
item.columnValue[0] = this.form[val]
} else {
let _item = {
queryType: 'equal',
tableName: 'ic_resi_user',
columnName: val,
columnValue: [this.form[val]]
}
this.$set(this.fixedList, index, _item)
}
})
} else {
this.$set(this.fixedList, 0, {
queryType: 'equal',
tableName: 'ic_resi_user',
columnName: val,
columnValue: [this.form[val]]
})
}
}
}
console.log('fixedList----999', this.fixedList)
this.tempFormList.forEach(item => {
if (item.columnName === val) item.isChange = true
})
},
getOptionsList () {
const { user } = this.$store.state
this.$http
.post('/gov/org/customergrid/gridoption', { agencyId: user.agencyId })
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
} else {
console.log('获取查询详情成功', res.data)
this.optionsG = res.data
}
})
.catch(() => {
return this.$message.error('网络错误')
})
this.$http
.post('/gov/org/icneighborhood/neighborhoodoption', { GRID_ID: this.form.GRID_ID })
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
} else {
console.log('获取查询详情成功', res.data)
this.optionsV = res.data
}
})
.catch(() => {
return this.$message.error('网络错误')
})
this.$http
.post('/gov/org/icbuilding/buildingoption', { VILLAGE_ID: this.form.VILLAGE_ID })
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
} else {
console.log('获取查询详情成功', res.data)
this.optionsB = res.data
}
})
.catch(() => {
return this.$message.error('网络错误')
})
this.$http
.post('/gov/org/ichouse/houseoption', { BUILD_ID: this.form.BUILD_ID })
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
} else {
console.log('获取查询详情成功', res.data)
this.optionsH = res.data
}
})
.catch(() => {
return this.$message.error('网络错误')
})
}
}
}
@ -597,7 +869,7 @@ export default {
text-align: right;
}
}
.resi-cell {
.resi-container .resi-cell {
display: flex;
align-items: center;
.resi-cell-label {

9
epmet-oper-web/src/views/main.vue

@ -166,10 +166,11 @@ export default {
url,
params,
(data, rspMsg) => {
this.$store.state.user.id = data.id
this.$store.state.user.realName = data.realName
this.$store.state.user.superAdmin = data.superAdmin
this.$store.state.user.gender = data.gender
this.$store.state.user = { ...data }
// this.$store.state.user.id = data.id
// this.$store.state.user.realName = data.realName
// this.$store.state.user.superAdmin = data.superAdmin
// this.$store.state.user.gender = data.gender
localStorage.setItem('roleList', data.roleList)
localStorage.setItem('customerId', data.customerId)
// this.$store.state.user.roleList = data.roleList

1010
epmet-oper-web/src/views/modules/base/resi.vue

File diff suppressed because it is too large
Loading…
Cancel
Save