update 完成房屋详情编辑的第一个页签
This commit is contained in:
@@ -133,7 +133,7 @@ namespace Ewide.Core.Service
|
||||
var file = await GetFileInfo(input);
|
||||
var filePath = Path.Combine(App.WebHostEnvironment.WebRootPath, file.FileBucket, file.FileObjectName);
|
||||
var fileName = HttpUtility.UrlEncode(file.FileOriginName, Encoding.GetEncoding("UTF-8"));
|
||||
return new FileStreamResult(new FileStream(filePath, FileMode.Open), "application/octet-stream") { FileDownloadName = fileName };
|
||||
return new FileStreamResult(new FileStream(filePath, FileMode.Open), Util.MimeMapping.GetMimeMapping(filePath)) { FileDownloadName = fileName };
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
|
||||
232
Api/Ewide.Core/Util/MimeMapping.cs
Normal file
232
Api/Ewide.Core/Util/MimeMapping.cs
Normal file
@@ -0,0 +1,232 @@
|
||||
using System;
|
||||
using System.Collections;
|
||||
|
||||
namespace Ewide.Core.Util
|
||||
{
|
||||
public class MimeMapping
|
||||
{
|
||||
private static Hashtable _mimeMappingTable;
|
||||
|
||||
private static void AddMimeMapping(string extension, string MimeType)
|
||||
{
|
||||
MimeMapping._mimeMappingTable.Add(extension, MimeType);
|
||||
}
|
||||
|
||||
public static string GetMimeMapping(string FileName)
|
||||
{
|
||||
string text = null;
|
||||
int num = FileName.LastIndexOf('.');
|
||||
if (0 < num && num > FileName.LastIndexOf('\\'))
|
||||
{
|
||||
text = (string)MimeMapping._mimeMappingTable[FileName.Substring(num)];
|
||||
}
|
||||
if (text == null)
|
||||
{
|
||||
text = (string)MimeMapping._mimeMappingTable[".*"];
|
||||
}
|
||||
return text;
|
||||
}
|
||||
|
||||
static MimeMapping()
|
||||
{
|
||||
MimeMapping._mimeMappingTable = new Hashtable(190, StringComparer.CurrentCultureIgnoreCase);
|
||||
MimeMapping.AddMimeMapping(".323", "text/h323");
|
||||
MimeMapping.AddMimeMapping(".asx", "video/x-ms-asf");
|
||||
MimeMapping.AddMimeMapping(".acx", "application/internet-property-stream");
|
||||
MimeMapping.AddMimeMapping(".ai", "application/postscript");
|
||||
MimeMapping.AddMimeMapping(".aif", "audio/x-aiff");
|
||||
MimeMapping.AddMimeMapping(".aiff", "audio/aiff");
|
||||
MimeMapping.AddMimeMapping(".axs", "application/olescript");
|
||||
MimeMapping.AddMimeMapping(".aifc", "audio/aiff");
|
||||
MimeMapping.AddMimeMapping(".asr", "video/x-ms-asf");
|
||||
MimeMapping.AddMimeMapping(".avi", "video/x-msvideo");
|
||||
MimeMapping.AddMimeMapping(".asf", "video/x-ms-asf");
|
||||
MimeMapping.AddMimeMapping(".au", "audio/basic");
|
||||
MimeMapping.AddMimeMapping(".application", "application/x-ms-application");
|
||||
MimeMapping.AddMimeMapping(".bin", "application/octet-stream");
|
||||
MimeMapping.AddMimeMapping(".bas", "text/plain");
|
||||
MimeMapping.AddMimeMapping(".bcpio", "application/x-bcpio");
|
||||
MimeMapping.AddMimeMapping(".bmp", "image/bmp");
|
||||
MimeMapping.AddMimeMapping(".cdf", "application/x-cdf");
|
||||
MimeMapping.AddMimeMapping(".cat", "application/vndms-pkiseccat");
|
||||
MimeMapping.AddMimeMapping(".crt", "application/x-x509-ca-cert");
|
||||
MimeMapping.AddMimeMapping(".c", "text/plain");
|
||||
MimeMapping.AddMimeMapping(".css", "text/css");
|
||||
MimeMapping.AddMimeMapping(".cer", "application/x-x509-ca-cert");
|
||||
MimeMapping.AddMimeMapping(".crl", "application/pkix-crl");
|
||||
MimeMapping.AddMimeMapping(".cmx", "image/x-cmx");
|
||||
MimeMapping.AddMimeMapping(".csh", "application/x-csh");
|
||||
MimeMapping.AddMimeMapping(".cod", "image/cis-cod");
|
||||
MimeMapping.AddMimeMapping(".cpio", "application/x-cpio");
|
||||
MimeMapping.AddMimeMapping(".clp", "application/x-msclip");
|
||||
MimeMapping.AddMimeMapping(".crd", "application/x-mscardfile");
|
||||
MimeMapping.AddMimeMapping(".deploy", "application/octet-stream");
|
||||
MimeMapping.AddMimeMapping(".dll", "application/x-msdownload");
|
||||
MimeMapping.AddMimeMapping(".dot", "application/msword");
|
||||
MimeMapping.AddMimeMapping(".doc", "application/msword");
|
||||
MimeMapping.AddMimeMapping(".dvi", "application/x-dvi");
|
||||
MimeMapping.AddMimeMapping(".dir", "application/x-director");
|
||||
MimeMapping.AddMimeMapping(".dxr", "application/x-director");
|
||||
MimeMapping.AddMimeMapping(".der", "application/x-x509-ca-cert");
|
||||
MimeMapping.AddMimeMapping(".dib", "image/bmp");
|
||||
MimeMapping.AddMimeMapping(".dcr", "application/x-director");
|
||||
MimeMapping.AddMimeMapping(".disco", "text/xml");
|
||||
MimeMapping.AddMimeMapping(".exe", "application/octet-stream");
|
||||
MimeMapping.AddMimeMapping(".etx", "text/x-setext");
|
||||
MimeMapping.AddMimeMapping(".evy", "application/envoy");
|
||||
MimeMapping.AddMimeMapping(".eml", "message/rfc822");
|
||||
MimeMapping.AddMimeMapping(".eps", "application/postscript");
|
||||
MimeMapping.AddMimeMapping(".flr", "x-world/x-vrml");
|
||||
MimeMapping.AddMimeMapping(".fif", "application/fractals");
|
||||
MimeMapping.AddMimeMapping(".gtar", "application/x-gtar");
|
||||
MimeMapping.AddMimeMapping(".gif", "image/gif");
|
||||
MimeMapping.AddMimeMapping(".gz", "application/x-gzip");
|
||||
MimeMapping.AddMimeMapping(".hta", "application/hta");
|
||||
MimeMapping.AddMimeMapping(".htc", "text/x-component");
|
||||
MimeMapping.AddMimeMapping(".htt", "text/webviewhtml");
|
||||
MimeMapping.AddMimeMapping(".h", "text/plain");
|
||||
MimeMapping.AddMimeMapping(".hdf", "application/x-hdf");
|
||||
MimeMapping.AddMimeMapping(".hlp", "application/winhlp");
|
||||
MimeMapping.AddMimeMapping(".html", "text/html");
|
||||
MimeMapping.AddMimeMapping(".htm", "text/html");
|
||||
MimeMapping.AddMimeMapping(".hqx", "application/mac-binhex40");
|
||||
MimeMapping.AddMimeMapping(".isp", "application/x-internet-signup");
|
||||
MimeMapping.AddMimeMapping(".iii", "application/x-iphone");
|
||||
MimeMapping.AddMimeMapping(".ief", "image/ief");
|
||||
MimeMapping.AddMimeMapping(".ivf", "video/x-ivf");
|
||||
MimeMapping.AddMimeMapping(".ins", "application/x-internet-signup");
|
||||
MimeMapping.AddMimeMapping(".ico", "image/x-icon");
|
||||
MimeMapping.AddMimeMapping(".jpg", "image/jpeg");
|
||||
MimeMapping.AddMimeMapping(".jfif", "image/pjpeg");
|
||||
MimeMapping.AddMimeMapping(".jpe", "image/jpeg");
|
||||
MimeMapping.AddMimeMapping(".jpeg", "image/jpeg");
|
||||
MimeMapping.AddMimeMapping(".js", "application/x-javascript");
|
||||
MimeMapping.AddMimeMapping(".lsx", "video/x-la-asf");
|
||||
MimeMapping.AddMimeMapping(".latex", "application/x-latex");
|
||||
MimeMapping.AddMimeMapping(".lsf", "video/x-la-asf");
|
||||
MimeMapping.AddMimeMapping(".manifest", "application/x-ms-manifest");
|
||||
MimeMapping.AddMimeMapping(".mhtml", "message/rfc822");
|
||||
MimeMapping.AddMimeMapping(".mny", "application/x-msmoney");
|
||||
MimeMapping.AddMimeMapping(".mht", "message/rfc822");
|
||||
MimeMapping.AddMimeMapping(".mid", "audio/mid");
|
||||
MimeMapping.AddMimeMapping(".mpv2", "video/mpeg");
|
||||
MimeMapping.AddMimeMapping(".man", "application/x-troff-man");
|
||||
MimeMapping.AddMimeMapping(".mvb", "application/x-msmediaview");
|
||||
MimeMapping.AddMimeMapping(".mpeg", "video/mpeg");
|
||||
MimeMapping.AddMimeMapping(".m3u", "audio/x-mpegurl");
|
||||
MimeMapping.AddMimeMapping(".mdb", "application/x-msaccess");
|
||||
MimeMapping.AddMimeMapping(".mpp", "application/vnd.ms-project");
|
||||
MimeMapping.AddMimeMapping(".m1v", "video/mpeg");
|
||||
MimeMapping.AddMimeMapping(".mpa", "video/mpeg");
|
||||
MimeMapping.AddMimeMapping(".me", "application/x-troff-me");
|
||||
MimeMapping.AddMimeMapping(".m13", "application/x-msmediaview");
|
||||
MimeMapping.AddMimeMapping(".movie", "video/x-sgi-movie");
|
||||
MimeMapping.AddMimeMapping(".m14", "application/x-msmediaview");
|
||||
MimeMapping.AddMimeMapping(".mpe", "video/mpeg");
|
||||
MimeMapping.AddMimeMapping(".mp2", "video/mpeg");
|
||||
MimeMapping.AddMimeMapping(".mov", "video/quicktime");
|
||||
MimeMapping.AddMimeMapping(".mp3", "audio/mpeg");
|
||||
MimeMapping.AddMimeMapping(".mpg", "video/mpeg");
|
||||
MimeMapping.AddMimeMapping(".ms", "application/x-troff-ms");
|
||||
MimeMapping.AddMimeMapping(".nc", "application/x-netcdf");
|
||||
MimeMapping.AddMimeMapping(".nws", "message/rfc822");
|
||||
MimeMapping.AddMimeMapping(".oda", "application/oda");
|
||||
MimeMapping.AddMimeMapping(".ods", "application/oleobject");
|
||||
MimeMapping.AddMimeMapping(".pmc", "application/x-perfmon");
|
||||
MimeMapping.AddMimeMapping(".p7r", "application/x-pkcs7-certreqresp");
|
||||
MimeMapping.AddMimeMapping(".p7b", "application/x-pkcs7-certificates");
|
||||
MimeMapping.AddMimeMapping(".p7s", "application/pkcs7-signature");
|
||||
MimeMapping.AddMimeMapping(".pmw", "application/x-perfmon");
|
||||
MimeMapping.AddMimeMapping(".ps", "application/postscript");
|
||||
MimeMapping.AddMimeMapping(".p7c", "application/pkcs7-mime");
|
||||
MimeMapping.AddMimeMapping(".pbm", "image/x-portable-bitmap");
|
||||
MimeMapping.AddMimeMapping(".ppm", "image/x-portable-pixmap");
|
||||
MimeMapping.AddMimeMapping(".pub", "application/x-mspublisher");
|
||||
MimeMapping.AddMimeMapping(".pnm", "image/x-portable-anymap");
|
||||
MimeMapping.AddMimeMapping(".png", "image/png");
|
||||
MimeMapping.AddMimeMapping(".pml", "application/x-perfmon");
|
||||
MimeMapping.AddMimeMapping(".p10", "application/pkcs10");
|
||||
MimeMapping.AddMimeMapping(".pfx", "application/x-pkcs12");
|
||||
MimeMapping.AddMimeMapping(".p12", "application/x-pkcs12");
|
||||
MimeMapping.AddMimeMapping(".pdf", "application/pdf");
|
||||
MimeMapping.AddMimeMapping(".pps", "application/vnd.ms-powerpoint");
|
||||
MimeMapping.AddMimeMapping(".p7m", "application/pkcs7-mime");
|
||||
MimeMapping.AddMimeMapping(".pko", "application/vndms-pkipko");
|
||||
MimeMapping.AddMimeMapping(".ppt", "application/vnd.ms-powerpoint");
|
||||
MimeMapping.AddMimeMapping(".pmr", "application/x-perfmon");
|
||||
MimeMapping.AddMimeMapping(".pma", "application/x-perfmon");
|
||||
MimeMapping.AddMimeMapping(".pot", "application/vnd.ms-powerpoint");
|
||||
MimeMapping.AddMimeMapping(".prf", "application/pics-rules");
|
||||
MimeMapping.AddMimeMapping(".pgm", "image/x-portable-graymap");
|
||||
MimeMapping.AddMimeMapping(".qt", "video/quicktime");
|
||||
MimeMapping.AddMimeMapping(".ra", "audio/x-pn-realaudio");
|
||||
MimeMapping.AddMimeMapping(".rgb", "image/x-rgb");
|
||||
MimeMapping.AddMimeMapping(".ram", "audio/x-pn-realaudio");
|
||||
MimeMapping.AddMimeMapping(".rmi", "audio/mid");
|
||||
MimeMapping.AddMimeMapping(".ras", "image/x-cmu-raster");
|
||||
MimeMapping.AddMimeMapping(".roff", "application/x-troff");
|
||||
MimeMapping.AddMimeMapping(".rtf", "application/rtf");
|
||||
MimeMapping.AddMimeMapping(".rtx", "text/richtext");
|
||||
MimeMapping.AddMimeMapping(".sv4crc", "application/x-sv4crc");
|
||||
MimeMapping.AddMimeMapping(".spc", "application/x-pkcs7-certificates");
|
||||
MimeMapping.AddMimeMapping(".setreg", "application/set-registration-initiation");
|
||||
MimeMapping.AddMimeMapping(".snd", "audio/basic");
|
||||
MimeMapping.AddMimeMapping(".stl", "application/vndms-pkistl");
|
||||
MimeMapping.AddMimeMapping(".setpay", "application/set-payment-initiation");
|
||||
MimeMapping.AddMimeMapping(".stm", "text/html");
|
||||
MimeMapping.AddMimeMapping(".shar", "application/x-shar");
|
||||
MimeMapping.AddMimeMapping(".sh", "application/x-sh");
|
||||
MimeMapping.AddMimeMapping(".sit", "application/x-stuffit");
|
||||
MimeMapping.AddMimeMapping(".spl", "application/futuresplash");
|
||||
MimeMapping.AddMimeMapping(".sct", "text/scriptlet");
|
||||
MimeMapping.AddMimeMapping(".scd", "application/x-msschedule");
|
||||
MimeMapping.AddMimeMapping(".sst", "application/vndms-pkicertstore");
|
||||
MimeMapping.AddMimeMapping(".src", "application/x-wais-source");
|
||||
MimeMapping.AddMimeMapping(".sv4cpio", "application/x-sv4cpio");
|
||||
MimeMapping.AddMimeMapping(".tex", "application/x-tex");
|
||||
MimeMapping.AddMimeMapping(".tgz", "application/x-compressed");
|
||||
MimeMapping.AddMimeMapping(".t", "application/x-troff");
|
||||
MimeMapping.AddMimeMapping(".tar", "application/x-tar");
|
||||
MimeMapping.AddMimeMapping(".tr", "application/x-troff");
|
||||
MimeMapping.AddMimeMapping(".tif", "image/tiff");
|
||||
MimeMapping.AddMimeMapping(".txt", "text/plain");
|
||||
MimeMapping.AddMimeMapping(".texinfo", "application/x-texinfo");
|
||||
MimeMapping.AddMimeMapping(".trm", "application/x-msterminal");
|
||||
MimeMapping.AddMimeMapping(".tiff", "image/tiff");
|
||||
MimeMapping.AddMimeMapping(".tcl", "application/x-tcl");
|
||||
MimeMapping.AddMimeMapping(".texi", "application/x-texinfo");
|
||||
MimeMapping.AddMimeMapping(".tsv", "text/tab-separated-values");
|
||||
MimeMapping.AddMimeMapping(".ustar", "application/x-ustar");
|
||||
MimeMapping.AddMimeMapping(".uls", "text/iuls");
|
||||
MimeMapping.AddMimeMapping(".vcf", "text/x-vcard");
|
||||
MimeMapping.AddMimeMapping(".wps", "application/vnd.ms-works");
|
||||
MimeMapping.AddMimeMapping(".wav", "audio/wav");
|
||||
MimeMapping.AddMimeMapping(".wrz", "x-world/x-vrml");
|
||||
MimeMapping.AddMimeMapping(".wri", "application/x-mswrite");
|
||||
MimeMapping.AddMimeMapping(".wks", "application/vnd.ms-works");
|
||||
MimeMapping.AddMimeMapping(".wmf", "application/x-msmetafile");
|
||||
MimeMapping.AddMimeMapping(".wcm", "application/vnd.ms-works");
|
||||
MimeMapping.AddMimeMapping(".wrl", "x-world/x-vrml");
|
||||
MimeMapping.AddMimeMapping(".wdb", "application/vnd.ms-works");
|
||||
MimeMapping.AddMimeMapping(".wsdl", "text/xml");
|
||||
MimeMapping.AddMimeMapping(".xap", "application/x-silverlight-app");
|
||||
MimeMapping.AddMimeMapping(".xml", "text/xml");
|
||||
MimeMapping.AddMimeMapping(".xlm", "application/vnd.ms-excel");
|
||||
MimeMapping.AddMimeMapping(".xaf", "x-world/x-vrml");
|
||||
MimeMapping.AddMimeMapping(".xla", "application/vnd.ms-excel");
|
||||
MimeMapping.AddMimeMapping(".xls", "application/vnd.ms-excel");
|
||||
MimeMapping.AddMimeMapping(".xof", "x-world/x-vrml");
|
||||
MimeMapping.AddMimeMapping(".xlt", "application/vnd.ms-excel");
|
||||
MimeMapping.AddMimeMapping(".xlc", "application/vnd.ms-excel");
|
||||
MimeMapping.AddMimeMapping(".xsl", "text/xml");
|
||||
MimeMapping.AddMimeMapping(".xbm", "image/x-xbitmap");
|
||||
MimeMapping.AddMimeMapping(".xlw", "application/vnd.ms-excel");
|
||||
MimeMapping.AddMimeMapping(".xpm", "image/x-xpixmap");
|
||||
MimeMapping.AddMimeMapping(".xwd", "image/x-xwindowdump");
|
||||
MimeMapping.AddMimeMapping(".xsd", "text/xml");
|
||||
MimeMapping.AddMimeMapping(".z", "application/x-compress");
|
||||
MimeMapping.AddMimeMapping(".zip", "application/x-zip-compressed");
|
||||
MimeMapping.AddMimeMapping(".*", "application/octet-stream");
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -19,6 +19,7 @@
|
||||
"less-loader": "4.1.0",
|
||||
"lodash": "^4.17.21",
|
||||
"nprogress": "^0.2.0",
|
||||
"photoswipe": "^4.1.3",
|
||||
"swiper": "^6.5.0",
|
||||
"vue": "^2.6.11",
|
||||
"vue-awesome-swiper": "^4.1.1",
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
<script src="https://webapi.amap.com/maps?v=1.4.15&key=c6a4832b8afbde0361b36630a3fc5bdc"></script>
|
||||
<script src="https://webapi.amap.com/maps?v=2.0&key=c6a4832b8afbde0361b36630a3fc5bdc"></script>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
|
||||
@@ -27,10 +27,13 @@
|
||||
@import './lib/select.less';
|
||||
@import './lib/checkbox.less';
|
||||
@import './lib/cascader.less';
|
||||
@import './lib/upload.less';
|
||||
@import './lib/dropdown.less';
|
||||
@import './lib/modal.less';
|
||||
@import './lib/tree-layout.less';
|
||||
@import './lib/authority-view.less';
|
||||
@import './lib/icon-selector.less';
|
||||
@import './lib/anchor.less';
|
||||
@import './theme/primary.less';
|
||||
// @import './lib/font-weight.less';
|
||||
@import './public.less';
|
||||
|
||||
11
Web/src/assets/style/lib/anchor.less
Normal file
11
Web/src/assets/style/lib/anchor.less
Normal file
@@ -0,0 +1,11 @@
|
||||
@import (reference) '~@/assets/style/extend.less';
|
||||
.ant-anchor-ink-ball {
|
||||
width: 2px;
|
||||
height: 28px;
|
||||
|
||||
transform: translate(-50%, -10px);
|
||||
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background-color: @primary-color;
|
||||
}
|
||||
@@ -282,3 +282,49 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-form-item-required {
|
||||
@keyframes required-animation {
|
||||
// 0% {
|
||||
// transform: translateX(-5px) scale(.1);
|
||||
|
||||
// opacity: .1;
|
||||
// }
|
||||
|
||||
// 15% {
|
||||
// transform: translateX(-3px) scale(.5);
|
||||
|
||||
// opacity: .5;
|
||||
// }
|
||||
|
||||
// 30%,
|
||||
// 70% {
|
||||
// transform: translateX(0) scale(1);
|
||||
|
||||
// opacity: 1;
|
||||
// }
|
||||
|
||||
// 85% {
|
||||
// transform: translateX(-3px) scale(.5);
|
||||
|
||||
// opacity: .5;
|
||||
// }
|
||||
|
||||
// 100% {
|
||||
// transform: translateX(-5px) scale(.1);
|
||||
|
||||
// opacity: .1;
|
||||
// }
|
||||
}
|
||||
&::before {
|
||||
margin-top: -4px;
|
||||
|
||||
content: '';
|
||||
animation: required-animation 2s linear infinite;
|
||||
vertical-align: middle;
|
||||
|
||||
border-top: 4px solid transparent;
|
||||
border-bottom: 4px solid transparent;
|
||||
border-left: 5px solid #f5222d;
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,10 @@
|
||||
@import (reference) '~@/assets/style/extend.less';
|
||||
/* input前缀有2个字符的 */
|
||||
.yo-input-prefix-2 {
|
||||
.ant-input:not(:first-child) {
|
||||
padding-left: 45px;
|
||||
}
|
||||
}
|
||||
.yo-addon {
|
||||
padding: 0 @padding-xs;
|
||||
}
|
||||
|
||||
29
Web/src/assets/style/lib/upload.less
Normal file
29
Web/src/assets/style/lib/upload.less
Normal file
@@ -0,0 +1,29 @@
|
||||
@import (reference) '~@/assets/style/extend.less';
|
||||
.ant-upload-list-text {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.ant-upload-list-item {
|
||||
height: auto;
|
||||
margin-right: @padding-xs;
|
||||
}
|
||||
.ant-upload-list-item-info {
|
||||
position: relative;
|
||||
|
||||
padding: @padding-xxs @padding-xs;
|
||||
|
||||
border: @border-width-base @border-style-base @border-color-split;
|
||||
.anticon-paper-clip {
|
||||
top: 7.5px;
|
||||
}
|
||||
>span {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
.ant-upload-list-item-card-actions {
|
||||
position: relative;
|
||||
|
||||
margin-left: @padding-xs;
|
||||
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
@@ -1,25 +1,26 @@
|
||||
@import (reference) '~@/assets/style/extend.less';
|
||||
.w-100-p {
|
||||
width: 100%;
|
||||
}
|
||||
.w-100 {
|
||||
width: 100px;
|
||||
}
|
||||
.w-200 {
|
||||
width: 200px;
|
||||
}
|
||||
.w-300 {
|
||||
width: 300px;
|
||||
}
|
||||
.h-100-p {
|
||||
height: 100%;
|
||||
}
|
||||
.h-100 {
|
||||
height: 100px;
|
||||
}
|
||||
.h-200 {
|
||||
height: 200px;
|
||||
}
|
||||
.h-300 {
|
||||
height: 300px;
|
||||
|
||||
.width-height (@i) when (@i <=20) {
|
||||
|
||||
@n : @i * 50;
|
||||
|
||||
.w-@{n} {
|
||||
width: @n * 1px;
|
||||
}
|
||||
|
||||
.h-@{n} {
|
||||
height: @n * 1px;
|
||||
}
|
||||
|
||||
.w-@{n}-p {
|
||||
width: @n * 1%;
|
||||
}
|
||||
|
||||
.h-@{n}-p {
|
||||
height: @n * 1%;
|
||||
}
|
||||
|
||||
.width-height(@i + 1);
|
||||
}
|
||||
|
||||
.width-height(0);
|
||||
32
Web/src/assets/style/public.less
Normal file
32
Web/src/assets/style/public.less
Normal file
@@ -0,0 +1,32 @@
|
||||
@import (reference) './extend.less';
|
||||
.yo-map {
|
||||
&-container {
|
||||
position: relative;
|
||||
|
||||
padding: @padding-sm;
|
||||
|
||||
border: @border-width-base @border-style-base @border-color-split;
|
||||
border-radius: @border-radius-base;
|
||||
background-color: @white;
|
||||
.amap-icon {
|
||||
img {
|
||||
width: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&--search {
|
||||
position: absolute;
|
||||
top: @padding-md;
|
||||
left: @padding-md;
|
||||
z-index: 20;
|
||||
|
||||
width: 25%;
|
||||
min-width: 300px;
|
||||
padding: @padding-xxs @padding-sm;
|
||||
|
||||
background: fade(@black, 20%);
|
||||
box-shadow: @box-shadow-base;
|
||||
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
}
|
||||
@@ -19,6 +19,10 @@ export default {
|
||||
* 获取字典类型下所有字典，举例，返回格式为：[{code:"M",value:"男"},{code:"F",value:"女"}]
|
||||
*/
|
||||
sysDictTypeDropDown: ['/sysDictType/dropDown', 'get'],
|
||||
/**
|
||||
* 获取字典类型下所有的字典,可批量获取
|
||||
*/
|
||||
sysDictTypeDropDowns: ['/sysDictType/dropDowns', 'get'],
|
||||
/**
|
||||
* 获取所有字典，启动时加入缓存使用
|
||||
*/
|
||||
|
||||
56
Web/src/components/photoSwipe/index.vue
Normal file
56
Web/src/components/photoSwipe/index.vue
Normal file
@@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<div aria-hidden="true" class="pswp" role="dialog" tabindex="-1">
|
||||
<div class="pswp__bg"></div>
|
||||
<div class="pswp__scroll-wrap">
|
||||
<div class="pswp__container">
|
||||
<div class="pswp__item"></div>
|
||||
<div class="pswp__item"></div>
|
||||
<div class="pswp__item"></div>
|
||||
</div>
|
||||
<div class="pswp__ui pswp__ui--hidden">
|
||||
<div class="pswp__top-bar">
|
||||
<div class="pswp__counter"></div>
|
||||
<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
|
||||
<button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
|
||||
<button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
|
||||
<div class="pswp__preloader">
|
||||
<div class="pswp__preloader__icn">
|
||||
<div class="pswp__preloader__cut">
|
||||
<div class="pswp__preloader__donut"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
|
||||
<div class="pswp__share-tooltip"></div>
|
||||
</div>
|
||||
<button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button>
|
||||
<button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button>
|
||||
<div class="pswp__caption">
|
||||
<div class="pswp__caption__center"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import 'photoswipe/dist/photoswipe.css';
|
||||
import 'photoswipe/dist/default-skin/default-skin.css';
|
||||
import PhotoSwipe from 'photoswipe';
|
||||
import PhotoSwipeUI_Default from 'photoswipe/dist/photoswipe-ui-default';
|
||||
|
||||
const defaultOptions = {
|
||||
index: 0,
|
||||
bgOpacity: 0.75,
|
||||
};
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
initPhotoSwipe(items = [], options) {
|
||||
const pswpElement = this.$el;
|
||||
const gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, Object.assign(defaultOptions, options));
|
||||
gallery.init();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -1,4 +1,4 @@
|
||||
import { ArrayBufferToBase64 } from '@/util/file'
|
||||
import { PreviewFileBase64 } from '@/util/file'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
@@ -31,11 +31,9 @@ export default {
|
||||
|
||||
methods: {
|
||||
|
||||
getSrc() {
|
||||
return this.$api.sysFileInfoPreview({ id: this.id }).then(async ({ data }) => {
|
||||
const base64 = await ArrayBufferToBase64(data)
|
||||
return base64
|
||||
})
|
||||
async getSrc() {
|
||||
const base64 = await PreviewFileBase64(this.id)
|
||||
return base64
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
217
Web/src/pages/business/house/houseInfo/form/base/aspect.vue
Normal file
217
Web/src/pages/business/house/houseInfo/form/base/aspect.vue
Normal file
@@ -0,0 +1,217 @@
|
||||
<template>
|
||||
<!--
|
||||
整页表单的分片表单
|
||||
v 1.0
|
||||
2021-05-12
|
||||
Lufthafen
|
||||
-->
|
||||
<a-form-model
|
||||
:label-col="labelCol"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:wrapper-col="wrapperCol"
|
||||
ref="form"
|
||||
>
|
||||
<a-spin :spinning="loading">
|
||||
<a-icon slot="indicator" spin type="loading" />
|
||||
<!-- 表单控件 -->
|
||||
<!-- ... -->
|
||||
<a-form-model-item class="ant-row-flex" label="外立面照片" prop="facadePhoto">
|
||||
<a-upload
|
||||
:custom-request="onFileUpload"
|
||||
:file-list="form.facadePhoto"
|
||||
:preview-file="onPreviewFile"
|
||||
@change="onFileChange"
|
||||
@preview="onFilePreview"
|
||||
list-type="picture-card"
|
||||
>
|
||||
<div>
|
||||
<a-icon type="plus" />
|
||||
<div class="ant-upload-text">外立面照片</div>
|
||||
</div>
|
||||
</a-upload>
|
||||
</a-form-model-item>
|
||||
</a-spin>
|
||||
<PhotoSwipe ref="photo-swipe" />
|
||||
</a-form-model>
|
||||
</template>
|
||||
<script>
|
||||
import { PreviewFile, BlobToBase64 } from '@/util/file';
|
||||
|
||||
import PhotoSwipe from '@/components/photoSwipe';
|
||||
|
||||
/* 表单内容默认值 */
|
||||
const defaultForm = {
|
||||
/* ... */
|
||||
facadePhoto: [],
|
||||
};
|
||||
|
||||
export default {
|
||||
components: {
|
||||
PhotoSwipe,
|
||||
},
|
||||
|
||||
props: ['param'],
|
||||
|
||||
data() {
|
||||
return {
|
||||
labelCol: { flex: '150px' },
|
||||
wrapperCol: { flex: '1' },
|
||||
|
||||
/** 表单数据 */
|
||||
form: {},
|
||||
/** 验证格式 */
|
||||
rules: {
|
||||
/* ... */
|
||||
facadePhoto: [{ required: true, message: '请上传外立面照片' }],
|
||||
},
|
||||
|
||||
/** 加载异步数据状态 */
|
||||
loading: false,
|
||||
|
||||
/** 其他成员属性 */
|
||||
/* ... */
|
||||
previewVisible: false,
|
||||
previewImage: '',
|
||||
};
|
||||
},
|
||||
|
||||
async created() {
|
||||
await this.onInit();
|
||||
this.onFillData();
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在打开编辑页时允许填充数据
|
||||
*/
|
||||
async onFillData() {
|
||||
/** 将默认数据覆盖到form */
|
||||
const record = this.param && this.param.record,
|
||||
facadePhoto = [];
|
||||
|
||||
// 从数据中的文件id转换成uploader所需的格式
|
||||
if (record) {
|
||||
const fileList = record.facadePhoto.split(',');
|
||||
for (let i = 0; i < fileList.length; i++) {
|
||||
const file = await PreviewFile(fileList[i]);
|
||||
const base64 = await BlobToBase64(file);
|
||||
facadePhoto.push({
|
||||
uid: fileList[i],
|
||||
response: fileList[i], // 用于和新上传的文件一同回传
|
||||
name: file.name,
|
||||
url: base64,
|
||||
status: 'done',
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
this.form = this.$_.cloneDeep({
|
||||
...defaultForm,
|
||||
...record,
|
||||
/** 在此处添加其他默认数据转换 */
|
||||
/* ... */
|
||||
facadePhoto,
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 验证表单并获取表单数据
|
||||
*/
|
||||
onGetData() {
|
||||
return new Promise((reslove, reject) => {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
const record = this.$_.cloneDeep(this.form);
|
||||
|
||||
/** 验证通过后可以对数据进行转换得到想要提交的格式 */
|
||||
/* ... */
|
||||
record.facadePhoto = record.facadePhoto.map((p) => p.response).join(',');
|
||||
|
||||
reslove(record);
|
||||
} else {
|
||||
reject();
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口进行保存时调用表单验证
|
||||
*/
|
||||
onValidate(callback) {
|
||||
this.$refs.form.validate(callback);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口关闭或重置时对表单验证进行初始化
|
||||
*/
|
||||
onResetFields() {
|
||||
setTimeout(() => {
|
||||
this.$refs.form.resetFields();
|
||||
|
||||
/** 在这里可以初始化当前组件中其他属性 */
|
||||
/* ... */
|
||||
}, 300);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 加载当前表单中所需要的异步数据
|
||||
*/
|
||||
async onInit() {
|
||||
this.loading = true;
|
||||
/** 可以在这里await获取一些异步数据 */
|
||||
/* ... */
|
||||
this.loading = false;
|
||||
},
|
||||
|
||||
/** 当前组件的其他方法 */
|
||||
/* ... */
|
||||
|
||||
/* 上传图片相关 Begin */
|
||||
onFileChange({ fileList }) {
|
||||
this.form.facadePhoto = fileList;
|
||||
},
|
||||
onPreviewFile(file) {
|
||||
return new Promise((resolve) => {
|
||||
const base64 = BlobToBase64(file);
|
||||
resolve(base64);
|
||||
});
|
||||
},
|
||||
async onFileUpload({ file, onProgress, onSuccess, onError }) {
|
||||
onProgress();
|
||||
const fd = new FormData();
|
||||
fd.append('file', file);
|
||||
try {
|
||||
const { data: fileId } = await this.$api.sysFileInfoUpload(fd);
|
||||
onSuccess(fileId);
|
||||
} catch {
|
||||
onError();
|
||||
}
|
||||
},
|
||||
onFilePreview(file) {
|
||||
const items = [];
|
||||
for (let i = 0; i < this.form.facadePhoto.length; i++) {
|
||||
const _file = this.form.facadePhoto[i];
|
||||
const img = new Image();
|
||||
const src = _file.url || _file.thumbUrl;
|
||||
img.src = src;
|
||||
items.push({
|
||||
src,
|
||||
w: img.naturalWidth,
|
||||
h: img.naturalHeight,
|
||||
});
|
||||
}
|
||||
this.$refs['photo-swipe'].initPhotoSwipe(items, {
|
||||
index: this.form.facadePhoto.indexOf(file),
|
||||
});
|
||||
},
|
||||
/* 上传图片相关 End */
|
||||
},
|
||||
};
|
||||
</script>
|
||||
252
Web/src/pages/business/house/houseInfo/form/base/attachments.vue
Normal file
252
Web/src/pages/business/house/houseInfo/form/base/attachments.vue
Normal file
@@ -0,0 +1,252 @@
|
||||
<template>
|
||||
<!--
|
||||
整页表单的分片表单
|
||||
v 1.0
|
||||
2021-05-12
|
||||
Lufthafen
|
||||
-->
|
||||
<a-form-model
|
||||
:label-col="labelCol"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:wrapper-col="wrapperCol"
|
||||
ref="form"
|
||||
>
|
||||
<a-spin :spinning="loading">
|
||||
<a-icon slot="indicator" spin type="loading" />
|
||||
<!-- 表单控件 -->
|
||||
<!-- ... -->
|
||||
<a-row type="flex">
|
||||
<a-col :span="24">
|
||||
<a-form-model-item class="ant-row-flex" label="立项文件" prop="anEntryDocument">
|
||||
<a-upload
|
||||
:custom-request="onFileUpload"
|
||||
:file-list="form.anEntryDocument"
|
||||
:showUploadList=" { showRemoveIcon: true, showDownloadIcon: true }"
|
||||
@change="(data) => onFileChange(data, 'anEntryDocument')"
|
||||
@download="onFileDownload"
|
||||
>
|
||||
<a-button icon="upload" type="dashed">上传立项文件</a-button>
|
||||
</a-upload>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :span="24">
|
||||
<a-form-model-item class="ant-row-flex" label="规划许可" prop="planningPermission">
|
||||
<a-upload
|
||||
:custom-request="onFileUpload"
|
||||
:file-list="form.planningPermission"
|
||||
:showUploadList=" { showRemoveIcon: true, showDownloadIcon: true }"
|
||||
@change="(data) => onFileChange(data, 'planningPermission')"
|
||||
@download="onFileDownload"
|
||||
>
|
||||
<a-button icon="upload" type="dashed">上传规划许可</a-button>
|
||||
</a-upload>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :span="24">
|
||||
<a-form-model-item class="ant-row-flex" label="竣工验收备案" prop="completionRecord">
|
||||
<a-upload
|
||||
:custom-request="onFileUpload"
|
||||
:file-list="form.completionRecord"
|
||||
:showUploadList=" { showRemoveIcon: true, showDownloadIcon: true }"
|
||||
@change="(data) => onFileChange(data, 'completionRecord')"
|
||||
@download="onFileDownload"
|
||||
>
|
||||
<a-button icon="upload" type="dashed">上传竣工验收备案</a-button>
|
||||
</a-upload>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :span="24">
|
||||
<a-form-model-item class="ant-row-flex" label="监理文件" prop="monitor">
|
||||
<a-upload
|
||||
:custom-request="onFileUpload"
|
||||
:file-list="form.monitor"
|
||||
:showUploadList=" { showRemoveIcon: true, showDownloadIcon: true }"
|
||||
@change="(data) => onFileChange(data, 'monitor')"
|
||||
@download="onFileDownload"
|
||||
>
|
||||
<a-button icon="upload" type="dashed">上传监理文件</a-button>
|
||||
</a-upload>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :span="24">
|
||||
<a-form-model-item class="ant-row-flex" label="鉴定报告" prop="identificationReport">
|
||||
<a-upload
|
||||
:custom-request="onFileUpload"
|
||||
:file-list="form.identificationReport"
|
||||
:showUploadList=" { showRemoveIcon: true, showDownloadIcon: true }"
|
||||
@change="(data) => onFileChange(data, 'identificationReport')"
|
||||
@download="onFileDownload"
|
||||
>
|
||||
<a-button icon="upload" type="dashed">上传鉴定报告</a-button>
|
||||
</a-upload>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :span="24">
|
||||
<a-form-model-item class="ant-row-flex" label="其他附件" prop="otherDocument">
|
||||
<a-upload
|
||||
:custom-request="onFileUpload"
|
||||
:file-list="form.otherDocument"
|
||||
:showUploadList=" { showRemoveIcon: true, showDownloadIcon: true }"
|
||||
@change="(data) => onFileChange(data, 'otherDocument')"
|
||||
@download="onFileDownload"
|
||||
>
|
||||
<a-button icon="upload" type="dashed">上传其他附件</a-button>
|
||||
</a-upload>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-spin>
|
||||
</a-form-model>
|
||||
</template>
|
||||
<script>
|
||||
import { GetFileName } from '@/util/file';
|
||||
|
||||
/* 表单内容默认值 */
|
||||
const defaultForm = {
|
||||
/* ... */
|
||||
anEntryDocument: [],
|
||||
planningPermission: [],
|
||||
completionRecord: [],
|
||||
monitor: [],
|
||||
identificationReport: [],
|
||||
otherDocument: [],
|
||||
};
|
||||
|
||||
export default {
|
||||
props: ['param'],
|
||||
|
||||
data() {
|
||||
return {
|
||||
labelCol: { flex: '150px' },
|
||||
wrapperCol: { flex: '1' },
|
||||
|
||||
/** 表单数据 */
|
||||
form: {},
|
||||
/** 验证格式 */
|
||||
rules: {
|
||||
/* ... */
|
||||
},
|
||||
|
||||
/** 加载异步数据状态 */
|
||||
loading: false,
|
||||
|
||||
/** 其他成员属性 */
|
||||
/* ... */
|
||||
};
|
||||
},
|
||||
|
||||
async created() {
|
||||
await this.onInit();
|
||||
this.onFillData();
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在打开编辑页时允许填充数据
|
||||
*/
|
||||
onFillData() {
|
||||
/** 将默认数据覆盖到form */
|
||||
const record = this.param && this.param.record;
|
||||
|
||||
this.form = this.$_.cloneDeep({
|
||||
...defaultForm,
|
||||
...record,
|
||||
/** 在此处添加其他默认数据转换 */
|
||||
/* ... */
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 验证表单并获取表单数据
|
||||
*/
|
||||
onGetData() {
|
||||
return new Promise((reslove, reject) => {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
const record = this.$_.cloneDeep(this.form);
|
||||
|
||||
/** 验证通过后可以对数据进行转换得到想要提交的格式 */
|
||||
/* ... */
|
||||
|
||||
reslove(record);
|
||||
} else {
|
||||
reject();
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口进行保存时调用表单验证
|
||||
*/
|
||||
onValidate(callback) {
|
||||
this.$refs.form.validate(callback);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口关闭或重置时对表单验证进行初始化
|
||||
*/
|
||||
onResetFields() {
|
||||
setTimeout(() => {
|
||||
this.$refs.form.resetFields();
|
||||
|
||||
/** 在这里可以初始化当前组件中其他属性 */
|
||||
/* ... */
|
||||
}, 300);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 加载当前表单中所需要的异步数据
|
||||
*/
|
||||
async onInit() {
|
||||
this.loading = true;
|
||||
/** 可以在这里await获取一些异步数据 */
|
||||
/* ... */
|
||||
this.loading = false;
|
||||
},
|
||||
|
||||
/** 当前组件的其他方法 */
|
||||
/* ... */
|
||||
|
||||
/* 上传下载文件相关 Begin */
|
||||
async onFileUpload({ file, onProgress, onSuccess, onError }) {
|
||||
onProgress();
|
||||
const fd = new FormData();
|
||||
fd.append('file', file);
|
||||
try {
|
||||
const { data: fileId } = await this.$api.sysFileInfoUpload(fd);
|
||||
onSuccess(fileId);
|
||||
} catch {
|
||||
onError();
|
||||
}
|
||||
},
|
||||
onFileChange({ fileList }, key) {
|
||||
this.form[key] = fileList;
|
||||
},
|
||||
onFileDownload(file) {
|
||||
this.$api.sysFileInfoDownload({ id: file.response }).then((res) => {
|
||||
const url = window.URL.createObjectURL(res.data);
|
||||
const fileName = GetFileName(res.headers['content-disposition']);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = fileName;
|
||||
a.click();
|
||||
window.URL.revokeObjectURL(url);
|
||||
a.remove();
|
||||
});
|
||||
},
|
||||
/* 上传图片相关 End */
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<!--
|
||||
普通编辑窗体
|
||||
v 1.2
|
||||
2021-04-30
|
||||
整页表单的分片表单
|
||||
v 1.0
|
||||
2021-05-12
|
||||
Lufthafen
|
||||
-->
|
||||
<a-form-model
|
||||
@@ -47,192 +47,445 @@
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-model-item class="ant-row-flex" label="项目名称" prop="projectName">
|
||||
<a-input v-model="form.projectName" />
|
||||
<a-input placeholder="请输入项目名称" v-model="form.projectName" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-model-item class="ant-row-flex" label="幢名称">
|
||||
<a-input />
|
||||
<a-form-model-item class="ant-row-flex" label="幢名称" prop="buildingName">
|
||||
<a-input placeholder="请输入幢名称" v-model="form.buildingName" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-model-item class="ant-row-flex" label="坐落地址">
|
||||
<a-input />
|
||||
<a-form-model-item class="ant-row-flex" label="坐落地址" prop="address">
|
||||
<a-input placeholder="请输入坐落地址" v-model="form.address" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-model-item class="ant-row-flex" label="坐落地址">
|
||||
<a-input />
|
||||
<a-form-model-item class="ant-row-flex" label="土地性质" prop="natureLand">
|
||||
<a-radio-group button-style="solid" v-model="form.natureLand">
|
||||
<a-radio-button
|
||||
:key="item.code"
|
||||
:value="item.code"
|
||||
v-for="item in codes.natureLand"
|
||||
>{{ item.value }}</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-model-item class="ant-row-flex" label="地理坐标">
|
||||
<a-form-model-item class="ant-row-flex mb-none" label="地理坐标">
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="12">
|
||||
<a-form-model-item class="mb-none">
|
||||
<a-input class="yo-input-prefix-2" disabled placeholder="请在地图上选择坐标" prefix="经度" />
|
||||
<a-form-model-item prop="axisX">
|
||||
<a-input
|
||||
class="yo-input-prefix-2"
|
||||
disabled
|
||||
placeholder="请在地图上选择坐标"
|
||||
prefix="经度"
|
||||
v-model="form.axisX"
|
||||
/>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-model-item class="mb-none">
|
||||
<a-input class="yo-input-prefix-2" disabled placeholder="请在地图上选择坐标" prefix="纬度" />
|
||||
<a-form-model-item prop="axisY">
|
||||
<a-input
|
||||
class="yo-input-prefix-2"
|
||||
disabled
|
||||
placeholder="请在地图上选择坐标"
|
||||
prefix="纬度"
|
||||
v-model="form.axisY"
|
||||
/>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item :colon="false" :label="true" class="ant-row-flex">
|
||||
<div class="yo-map-container">
|
||||
缺搜索
|
||||
<div class="h-300" ref="map"></div>
|
||||
<div class="yo-map--search">
|
||||
<a-input-search allow-clear placeholder="请输入关键字" ref="map-search" />
|
||||
</div>
|
||||
<div class="h-500" ref="map"></div>
|
||||
</div>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-model-item class="ant-row-flex" label="结构类型">
|
||||
<a-select>
|
||||
<a-form-model-item class="ant-row-flex" label="结构类型" prop="structureType">
|
||||
<a-select placeholder="请选择结构类型" v-model="form.structureType">
|
||||
<a-select-option
|
||||
:key="item.code"
|
||||
:value="item.code"
|
||||
v-for="item in houseStructureType"
|
||||
v-for="item in codes.houseStructureType"
|
||||
>{{ item.value }}</a-select-option>
|
||||
</a-select>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-model-item class="ant-row-flex" label="抗震等级">
|
||||
<a-radio-group button-style="solid">
|
||||
<a-form-model-item class="ant-row-flex" label="抗震等级" prop="aseismicGrade">
|
||||
<a-radio-group button-style="solid" v-model="form.aseismicGrade">
|
||||
<a-radio-button
|
||||
:key="item.code"
|
||||
:value="item.code"
|
||||
v-for="item in houseSseismicGrade"
|
||||
v-for="item in codes.houseSseismicGrade"
|
||||
>{{ item.value }}</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-model-item class="ant-row-flex" label="基础情况">
|
||||
<a-radio-group button-style="solid">
|
||||
<a-form-model-item class="ant-row-flex" label="基础情况" prop="baseInfo">
|
||||
<a-radio-group button-style="solid" v-model="form.baseInfo">
|
||||
<a-radio-button
|
||||
:key="item.code"
|
||||
:value="item.code"
|
||||
v-for="item in houseBaseInfo"
|
||||
v-for="item in codes.houseBaseInfo"
|
||||
>{{ item.value }}</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-model-item class="ant-row-flex" label="外墙保温材料" prop="insulationMaterial">
|
||||
<a-checkbox-group button-style="solid" v-model="form.insulationMaterial">
|
||||
<a-checkbox-group v-model="form.insulationMaterial">
|
||||
<a-checkbox
|
||||
:key="item.code"
|
||||
:value="item.code"
|
||||
v-for="item in houseInsulationMaterial"
|
||||
class="mb-xs"
|
||||
v-for="item in codes.houseInsulationMaterial"
|
||||
>{{ item.value }}</a-checkbox>
|
||||
<a-input
|
||||
class="w-300"
|
||||
placeholder="请输入其他外墙保温材料"
|
||||
v-if="form.insulationMaterial && form.insulationMaterial.indexOf(houseInsulationMaterial[houseInsulationMaterial.length - 1].code) >= 0"
|
||||
v-if="form.insulationMaterial && form.insulationMaterial.indexOf(codes.houseInsulationMaterial[codes.houseInsulationMaterial.length - 1].code) >= 0"
|
||||
v-model="form.keepWarmMaterialRest"
|
||||
/>
|
||||
</a-checkbox-group>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-model-item class="ant-row-flex" label="外墙墙体材料"></a-form-model-item>
|
||||
<a-form-model-item class="ant-row-flex" label="外墙墙体材料" prop="wallMaterial">
|
||||
<a-checkbox-group v-model="form.wallMaterial">
|
||||
<a-checkbox
|
||||
:key="item.code"
|
||||
:value="item.code"
|
||||
class="mb-xs"
|
||||
v-for="item in codes.houseWallMaterial"
|
||||
>{{ item.value }}</a-checkbox>
|
||||
</a-checkbox-group>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-model-item class="ant-row-flex" label="外墙外保温材料防火等级"></a-form-model-item>
|
||||
<a-form-model-item class="ant-row-flex" label="外墙外保温材料防火等级" prop="fireproofGrade">
|
||||
<a-radio-group button-style="solid" v-model="form.fireproofGrade">
|
||||
<a-radio-button
|
||||
:key="item.code"
|
||||
:value="item.code"
|
||||
v-for="item in codes.houseFireproofGrade"
|
||||
>{{ item.value }}</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-model-item class="ant-row-flex" label="建筑幕墙"></a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-model-item class="ant-row-flex" label="外墙面砖"></a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-model-item class="ant-row-flex" label="外墙粉刷"></a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-model-item class="ant-row-flex" label="外墙涂料"></a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-model-item class="ant-row-flex" label="电梯"></a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-model-item class="ant-row-flex" label="竣工日期">
|
||||
<a-date-picker class="w-100-p" />
|
||||
<a-form-model-item class="ant-row-flex" label="建筑幕墙" prop="curtainWall">
|
||||
<a-radio-group button-style="solid" v-model="form.curtainWall">
|
||||
<a-radio-button
|
||||
:key="item.code"
|
||||
:value="item.code"
|
||||
v-for="item in codes.houseBuildingCurtainWall"
|
||||
>{{ item.value }}</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-model-item class="ant-row-flex" label="设计使用年限">
|
||||
<a-input-number :formatter="(number) => `${number}年`" :min="0" class="w-100-p" />
|
||||
<a-form-model-item class="ant-row-flex" label="有无外墙面砖" prop="exteriorWallTile">
|
||||
<a-switch v-model="form.exteriorWallTile" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-model-item class="ant-row-flex" label="总建筑面积"></a-form-model-item>
|
||||
<a-form-model-item class="ant-row-flex" label="有无外墙粉刷" prop="whiteWash">
|
||||
<a-switch v-model="form.whiteWash" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-model-item class="ant-row-flex" label="总户数"></a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-model-item class="ant-row-flex" label="房屋单元数"></a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-model-item class="ant-row-flex" label="每层每单元户数"></a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-model-item class="ant-row-flex" label="建设单位"></a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-model-item class="ant-row-flex" label="建设单位联系人"></a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-model-item class="ant-row-flex" label="建设单位联系电话"></a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-model-item class="ant-row-flex" label="设计单位"></a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-model-item class="ant-row-flex" label="施工单位"></a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-model-item class="ant-row-flex" label="监理单位"></a-form-model-item>
|
||||
<a-form-model-item class="ant-row-flex" label="有无外墙涂料" prop="coating">
|
||||
<a-switch v-model="form.coating" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<fieldset>
|
||||
<legend>建筑层数</legend>
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="8">
|
||||
<a-form-model-item class="ant-row-flex" label="地上">
|
||||
<a-input-number
|
||||
:formatter="(number) => `${number}层`"
|
||||
:min="0"
|
||||
:step="1"
|
||||
class="w-100-p"
|
||||
/>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item class="ant-row-flex" label="电梯" prop="elevator">
|
||||
<a-radio-group button-style="solid" v-model="form.elevator">
|
||||
<a-radio-button
|
||||
:key="item.code"
|
||||
:value="item.code"
|
||||
v-for="item in codes.houseElevator"
|
||||
>{{ item.value }}</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-model-item class="ant-row-flex" label="竣工日期" prop="completedDate">
|
||||
<a-date-picker class="w-100-p" placeholder="请选择竣工日期" v-model="form.completedDate" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-model-item class="ant-row-flex" label="设计使用年限" prop="useYear">
|
||||
<a-row type="flex">
|
||||
<a-col flex="1">
|
||||
<a-input-number
|
||||
:min="0"
|
||||
class="w-100-p"
|
||||
placeholder="请输入设计使用年限"
|
||||
v-model="form.useYear"
|
||||
/>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-model-item class="ant-row-flex" label="地下">
|
||||
<a-input-number
|
||||
:formatter="(number) => `${number}层`"
|
||||
:min="0"
|
||||
:step="1"
|
||||
class="w-100-p"
|
||||
/>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-model-item class="ant-row-flex" label="总共">
|
||||
<a-input-number
|
||||
:formatter="(number) => `${number}层`"
|
||||
class="w-100-p"
|
||||
disabled
|
||||
suffix="层"
|
||||
/>
|
||||
</a-form-model-item>
|
||||
<a-col>
|
||||
<span class="yo-addon">年</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</fieldset>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-model-item class="ant-row-flex" label="总建筑面积" prop="areaCount">
|
||||
<a-row type="flex">
|
||||
<a-col flex="1">
|
||||
<a-input-number
|
||||
:min="0"
|
||||
class="w-100-p"
|
||||
placeholder="请输入总建筑面积"
|
||||
v-model="form.areaCount"
|
||||
/>
|
||||
</a-col>
|
||||
<a-col>
|
||||
<span class="yo-addon">m²</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-model-item class="ant-row-flex" label="总户数" prop="households">
|
||||
<a-row type="flex">
|
||||
<a-col flex="1">
|
||||
<a-input-number
|
||||
:min="0"
|
||||
:step="1"
|
||||
class="w-100-p"
|
||||
placeholder="请输入总户数"
|
||||
v-model="form.households"
|
||||
/>
|
||||
</a-col>
|
||||
<a-col>
|
||||
<span class="yo-addon">户</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-model-item class="ant-row-flex" label="房屋单元数" prop="units">
|
||||
<a-row type="flex">
|
||||
<a-col flex="1">
|
||||
<a-input-number
|
||||
:min="0"
|
||||
:step="1"
|
||||
class="w-100-p"
|
||||
placeholder="请输入房屋单元数"
|
||||
v-model="form.units"
|
||||
/>
|
||||
</a-col>
|
||||
<a-col>
|
||||
<span class="yo-addon">单元</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-model-item class="ant-row-flex" label="每层每单元户数" prop="unitHouseholds">
|
||||
<a-row type="flex">
|
||||
<a-col flex="1">
|
||||
<a-input-number
|
||||
:min="0"
|
||||
:step="1"
|
||||
class="w-100-p"
|
||||
placeholder="请输入每层每单元户数"
|
||||
v-model="form.unitHouseholds"
|
||||
/>
|
||||
</a-col>
|
||||
<a-col>
|
||||
<span class="yo-addon">户</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-model-item class="ant-row-flex" label="建设单位" prop="buildingUnit">
|
||||
<a-input placeholder="请输入建设单位" v-model="form.buildingUnit" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-model-item class="ant-row-flex" label="建设单位联系人" prop="buildingUnitUser">
|
||||
<a-input placeholder="请输入建设单位联系人" v-model="form.buildingUnitUser" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-model-item class="ant-row-flex" label="建设单位联系电话" prop="buildingUnitTel">
|
||||
<a-input placeholder="请输入建设单位联系电话" v-model="form.buildingUnitTel" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-model-item class="ant-row-flex" label="设计单位" prop="desingerUnit">
|
||||
<a-input placeholder="请输入设计单位" v-model="form.desingerUnit" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-model-item class="ant-row-flex" label="施工单位" prop="constructionUnit">
|
||||
<a-input placeholder="请输入施工单位" v-model="form.constructionUnit" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-model-item class="ant-row-flex" label="监理单位" prop="monitorUnit">
|
||||
<a-input placeholder="请输入监理单位" v-model="form.monitorUnit" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-model-item class="ant-row-flex ant-form-inline mb-none" label="建筑层数">
|
||||
<a-form-model-item :colon="false" class="ant-row-flex" label="地上" prop="landLevelCount">
|
||||
<a-row type="flex">
|
||||
<a-col flex="1">
|
||||
<a-input-number
|
||||
:min="0"
|
||||
:step="1"
|
||||
class="w-100-p"
|
||||
placeholder="请输入地上层"
|
||||
v-model="form.landLevelCount"
|
||||
/>
|
||||
</a-col>
|
||||
<a-col>
|
||||
<span class="yo-addon">层</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item
|
||||
:colon="false"
|
||||
class="ant-row-flex"
|
||||
label="地下"
|
||||
prop="undergroundLevelCount"
|
||||
>
|
||||
<a-row type="flex">
|
||||
<a-col flex="1">
|
||||
<a-input-number
|
||||
:min="0"
|
||||
:step="1"
|
||||
class="w-100-p"
|
||||
placeholder="请输入地下层"
|
||||
v-model="form.undergroundLevelCount"
|
||||
/>
|
||||
</a-col>
|
||||
<a-col>
|
||||
<span class="yo-addon">层</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item :colon="false" class="ant-row-flex" label="总共" prop="levelCount">
|
||||
<a-row type="flex">
|
||||
<a-col flex="1">
|
||||
<a-input-number
|
||||
:min="0"
|
||||
:step="1"
|
||||
class="w-100-p"
|
||||
disabled
|
||||
placeholder="请输入总层数"
|
||||
v-model="form.levelCount"
|
||||
/>
|
||||
</a-col>
|
||||
<a-col>
|
||||
<span class="yo-addon">层</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form-model-item>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item class="ant-row-flex ant-form-inline" label="其中">
|
||||
<a-form-model-item class="ant-row-flex">
|
||||
<a-row type="flex">
|
||||
<a-col>
|
||||
<span class="yo-addon">地上第</span>
|
||||
</a-col>
|
||||
<a-col flex="1">
|
||||
<a-form-model-item class="mr-none" prop="landBusiness1">
|
||||
<a-input-number
|
||||
:min="0"
|
||||
:step="1"
|
||||
placeholder="几"
|
||||
v-model="form.landBusiness1"
|
||||
/>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col>
|
||||
<span class="yo-addon">层，至</span>
|
||||
</a-col>
|
||||
<a-col flex="1">
|
||||
<a-form-model-item class="mr-none" prop="landBusiness2">
|
||||
<a-input-number
|
||||
:min="0"
|
||||
:step="1"
|
||||
placeholder="几"
|
||||
v-model="form.landBusiness2"
|
||||
/>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col>
|
||||
<span class="yo-addon">层为商业用房</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item class="ant-row-flex">
|
||||
<a-row type="flex">
|
||||
<a-col>
|
||||
<span class="yo-addon">地上</span>
|
||||
</a-col>
|
||||
<a-col flex="1">
|
||||
<a-form-model-item class="mr-none" prop="landBikeshed1">
|
||||
<a-input-number
|
||||
:min="0"
|
||||
:step="1"
|
||||
placeholder="几"
|
||||
v-model="form.landBikeshed1"
|
||||
/>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col>
|
||||
<span class="yo-addon">层为车棚层</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item class="ant-row-flex">
|
||||
<a-row type="flex">
|
||||
<a-col>
|
||||
<span class="yo-addon">地上第</span>
|
||||
</a-col>
|
||||
<a-col flex="1">
|
||||
<a-form-model-item class="mr-none" prop="landResidence1">
|
||||
<a-input-number
|
||||
:min="0"
|
||||
:step="1"
|
||||
placeholder="几"
|
||||
v-model="form.landResidence1"
|
||||
/>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col>
|
||||
<span class="yo-addon">层，至</span>
|
||||
</a-col>
|
||||
<a-col flex="1">
|
||||
<a-form-model-item class="mr-none" prop="landResidence2">
|
||||
<a-input-number
|
||||
:min="0"
|
||||
:step="1"
|
||||
placeholder="几"
|
||||
v-model="form.landResidence2"
|
||||
/>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col>
|
||||
<span class="yo-addon">层为住宅</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form-model-item>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-spin>
|
||||
@@ -242,6 +495,9 @@
|
||||
/* 表单内容默认值 */
|
||||
const defaultForm = {
|
||||
/* ... */
|
||||
address: '',
|
||||
axisX: '',
|
||||
axisY: '',
|
||||
};
|
||||
|
||||
export default {
|
||||
@@ -258,6 +514,29 @@ export default {
|
||||
rules: {
|
||||
/* ... */
|
||||
projectName: [{ required: true, message: '请输入项目名称' }],
|
||||
buildingName: [{ required: true, message: '请输入幢名称' }],
|
||||
address: [{ required: true, message: '请输入坐落地址' }],
|
||||
natureLand: [{ required: true, message: '请选择土地性质' }],
|
||||
axisX: [{ required: true, message: '请在地图上选择坐标' }],
|
||||
axisY: [{ required: true, message: '请在地图上选择坐标' }],
|
||||
structureType: [{ required: true, message: '请选择结构类型' }],
|
||||
aseismicGrade: [{ required: true, message: '请选择抗震等级' }],
|
||||
baseInfo: [{ required: true, message: '请选择基础情况' }],
|
||||
curtainWall: [{ required: true, message: '请选择建筑幕墙' }],
|
||||
elevator: [{ required: true, message: '请选择电梯' }],
|
||||
completedDate: [{ required: true, message: '请选择竣工日期' }],
|
||||
useYear: [{ required: true, message: '请输入设计使用年限' }],
|
||||
areaCount: [{ required: true, message: '请输入总建筑面积' }],
|
||||
households: [{ required: true, message: '请输入总户数' }],
|
||||
units: [{ required: true, message: '请输入房屋单元数' }],
|
||||
unitHouseholds: [{ required: true, message: '请输入每层每单元户数' }],
|
||||
buildingUnit: [{ required: true, message: '请输入建设单位' }],
|
||||
buildingUnitUser: [{ required: true, message: '请输入建设单位联系人' }],
|
||||
buildingUnitTel: [{ required: true, message: '请输入建设单位联系电话' }],
|
||||
desingerUnit: [{ required: true, message: '请输入设计单位' }],
|
||||
constructionUnit: [{ required: true, message: '请输入施工单位' }],
|
||||
landLevelCount: [{ required: true, message: '请输入地上层' }],
|
||||
undergroundLevelCount: [{ required: true, message: '请输入地下层' }],
|
||||
},
|
||||
|
||||
/** 加载异步数据状态 */
|
||||
@@ -265,17 +544,24 @@ export default {
|
||||
|
||||
/** 其他成员属性 */
|
||||
/* ... */
|
||||
houseStructureType: [],
|
||||
houseSseismicGrade: [],
|
||||
houseBaseInfo: [],
|
||||
houseInsulationMaterial: [],
|
||||
codes: {
|
||||
natureLand: [],
|
||||
houseStructureType: [],
|
||||
houseSseismicGrade: [],
|
||||
houseBaseInfo: [],
|
||||
houseInsulationMaterial: [],
|
||||
houseWallMaterial: [],
|
||||
houseFireproofGrade: [],
|
||||
houseBuildingCurtainWall: [],
|
||||
houseElevator: [],
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
'form.insulationMaterial'(value, oldValue) {
|
||||
// 选中"无"时全不选,反之取消选择"无"
|
||||
if ((value.indexOf('0') >= 0 && oldValue.indexOf('0') === -1) || !value.length) {
|
||||
if (value.indexOf('0') >= 0 && oldValue.indexOf('0') === -1) {
|
||||
this.form.insulationMaterial = ['0'];
|
||||
} else if (value.indexOf('0') >= 0 && value.length > 1) {
|
||||
this.form.insulationMaterial.splice(value.indexOf('0'), 1);
|
||||
@@ -289,7 +575,11 @@ export default {
|
||||
},
|
||||
|
||||
mounted() {
|
||||
new AMap.Map(this.$refs.map);
|
||||
this.onMapInit();
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
this.map.destroy();
|
||||
},
|
||||
|
||||
methods: {
|
||||
@@ -355,7 +645,7 @@ export default {
|
||||
* 必要方法
|
||||
* 加载当前表单中所需要的异步数据
|
||||
*/
|
||||
async onInit(params) {
|
||||
async onInit() {
|
||||
this.loading = true;
|
||||
/** 可以在这里await获取一些异步数据 */
|
||||
/* ... */
|
||||
@@ -367,26 +657,118 @@ export default {
|
||||
/* ... */
|
||||
onLoadCodes() {
|
||||
return this.$api
|
||||
.$queue([
|
||||
this.$api.sysDictTypeDropDownAwait({ code: 'dic_house_structure_type' }),
|
||||
this.$api.sysDictTypeDropDownAwait({ code: 'dic_house_aseismic_grade' }),
|
||||
this.$api.sysDictTypeDropDownAwait({ code: 'dic_house_base_info' }),
|
||||
this.$api.sysDictTypeDropDownAwait({ code: 'dic_house_insulation_material' }),
|
||||
])
|
||||
.sysDictTypeDropDowns({
|
||||
code: [
|
||||
'dic_nature_land',
|
||||
'dic_house_structure_type',
|
||||
'dic_house_aseismic_grade',
|
||||
'dic_house_base_info',
|
||||
'dic_house_insulation_material',
|
||||
'dic_house_wall_material',
|
||||
'dic_house_fireproof_grade',
|
||||
'dic_house_building_curtain_wall',
|
||||
'dic_house_elevator',
|
||||
],
|
||||
})
|
||||
.then(
|
||||
([
|
||||
dic_house_structure_type,
|
||||
dic_house_aseismic_grade,
|
||||
dic_house_base_info,
|
||||
dic_house_insulation_material,
|
||||
]) => {
|
||||
this.houseStructureType = dic_house_structure_type.data;
|
||||
this.houseSseismicGrade = dic_house_aseismic_grade.data;
|
||||
this.houseBaseInfo = dic_house_base_info.data;
|
||||
this.houseInsulationMaterial = dic_house_insulation_material.data;
|
||||
({
|
||||
data: {
|
||||
dic_nature_land,
|
||||
dic_house_structure_type,
|
||||
dic_house_aseismic_grade,
|
||||
dic_house_base_info,
|
||||
dic_house_insulation_material,
|
||||
dic_house_wall_material,
|
||||
dic_house_fireproof_grade,
|
||||
dic_house_building_curtain_wall,
|
||||
dic_house_elevator,
|
||||
},
|
||||
}) => {
|
||||
this.codes = {
|
||||
natureLand: dic_nature_land,
|
||||
houseStructureType: dic_house_structure_type,
|
||||
houseSseismicGrade: dic_house_aseismic_grade,
|
||||
houseBaseInfo: dic_house_base_info,
|
||||
houseInsulationMaterial: dic_house_insulation_material,
|
||||
houseWallMaterial: dic_house_wall_material,
|
||||
houseFireproofGrade: dic_house_fireproof_grade,
|
||||
houseBuildingCurtainWall: dic_house_building_curtain_wall,
|
||||
houseElevator: dic_house_elevator,
|
||||
};
|
||||
}
|
||||
);
|
||||
},
|
||||
|
||||
onMapInit() {
|
||||
const city = '3302';
|
||||
|
||||
// 挂载map到this,但不监听
|
||||
this.map = new AMap.Map(this.$refs.map, { city });
|
||||
|
||||
this.map.plugin(['AMap.Geocoder', 'AMap.AutoComplete', 'AMap.PlaceSearch'], () => {
|
||||
const geocoder = new AMap.Geocoder({ city });
|
||||
|
||||
let marker;
|
||||
const setMarker = (position) => {
|
||||
if (marker) {
|
||||
marker.setPosition(position);
|
||||
} else {
|
||||
marker = new AMap.Marker({
|
||||
map: this.map,
|
||||
icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
|
||||
position,
|
||||
offset: new AMap.Pixel(-13, -30),
|
||||
});
|
||||
}
|
||||
|
||||
geocoder.getAddress(position, (status, result) => {
|
||||
if (status === 'complete' && result.regeocode) {
|
||||
this.onSetPosition(result.regeocode.formattedAddress, position);
|
||||
} else {
|
||||
console.error('根据经纬度查询地址失败');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
this.map.on('click', (e) => {
|
||||
setMarker(e.lnglat);
|
||||
});
|
||||
|
||||
const auto = new AMap.AutoComplete({
|
||||
input: this.$refs['map-search'].$el.querySelector('input'),
|
||||
city,
|
||||
citylimit: true,
|
||||
});
|
||||
|
||||
const placeSearch = new AMap.PlaceSearch({
|
||||
city,
|
||||
pageSize: 1,
|
||||
});
|
||||
|
||||
auto.on('select', ({ poi: { name: keywords, adcode } }) => {
|
||||
this.map.clearMap();
|
||||
marker = null;
|
||||
placeSearch.search(keywords, (status, result) => {
|
||||
const {
|
||||
poiList: { pois },
|
||||
} = result;
|
||||
pois.forEach((p) => {
|
||||
setMarker(p.location);
|
||||
});
|
||||
|
||||
this.map.setFitView();
|
||||
});
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
onSetPosition(address, { lng, lat }) {
|
||||
Object.assign(this.form, {
|
||||
address,
|
||||
axisX: lng.toString(),
|
||||
axisY: lat.toString(),
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
162
Web/src/pages/business/house/houseInfo/form/base/drawing.vue
Normal file
162
Web/src/pages/business/house/houseInfo/form/base/drawing.vue
Normal file
@@ -0,0 +1,162 @@
|
||||
<template>
|
||||
<!--
|
||||
整页表单的分片表单
|
||||
v 1.0
|
||||
2021-05-12
|
||||
Lufthafen
|
||||
-->
|
||||
<a-form-model
|
||||
:label-col="labelCol"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:wrapper-col="wrapperCol"
|
||||
ref="form"
|
||||
>
|
||||
<a-spin :spinning="loading">
|
||||
<a-icon slot="indicator" spin type="loading" />
|
||||
<!-- 表单控件 -->
|
||||
<!-- ... -->
|
||||
<a-form-model-item class="ant-row-flex" label="图纸资料存档处" prop="drawingMaterial">
|
||||
<a-checkbox-group v-model="form.drawingMaterial">
|
||||
<a-checkbox
|
||||
:key="item.code"
|
||||
:value="item.code"
|
||||
class="mb-xs"
|
||||
v-for="item in codes.houseStorageOfDrawings"
|
||||
>{{ item.value }}</a-checkbox>
|
||||
<a-input
|
||||
class="w-300"
|
||||
placeholder="请输入其他图纸资料存档处"
|
||||
v-if="form.drawingMaterial && form.drawingMaterial.indexOf(codes.houseStorageOfDrawings[codes.houseStorageOfDrawings.length - 1].code) >= 0"
|
||||
v-model="form.drawingMaterialText"
|
||||
/>
|
||||
</a-checkbox-group>
|
||||
</a-form-model-item>
|
||||
</a-spin>
|
||||
</a-form-model>
|
||||
</template>
|
||||
<script>
|
||||
/* 表单内容默认值 */
|
||||
const defaultForm = {
|
||||
/* ... */
|
||||
};
|
||||
|
||||
export default {
|
||||
props: ['param'],
|
||||
|
||||
data() {
|
||||
return {
|
||||
labelCol: { flex: '150px' },
|
||||
wrapperCol: { flex: '1' },
|
||||
|
||||
/** 表单数据 */
|
||||
form: {},
|
||||
/** 验证格式 */
|
||||
rules: {
|
||||
/* ... */
|
||||
drawingMaterial: [{ required: true, message: '请选择图纸资料存档处' }],
|
||||
},
|
||||
|
||||
/** 加载异步数据状态 */
|
||||
loading: false,
|
||||
|
||||
/** 其他成员属性 */
|
||||
/* ... */
|
||||
codes: {
|
||||
houseStorageOfDrawings: [],
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
async created() {
|
||||
await this.onInit();
|
||||
this.onFillData();
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在打开编辑页时允许填充数据
|
||||
*/
|
||||
onFillData() {
|
||||
/** 将默认数据覆盖到form */
|
||||
const record = this.param && this.param.record;
|
||||
|
||||
this.form = this.$_.cloneDeep({
|
||||
...defaultForm,
|
||||
...record,
|
||||
/** 在此处添加其他默认数据转换 */
|
||||
/* ... */
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 验证表单并获取表单数据
|
||||
*/
|
||||
onGetData() {
|
||||
return new Promise((reslove, reject) => {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
const record = this.$_.cloneDeep(this.form);
|
||||
|
||||
/** 验证通过后可以对数据进行转换得到想要提交的格式 */
|
||||
/* ... */
|
||||
|
||||
reslove(record);
|
||||
} else {
|
||||
reject();
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口进行保存时调用表单验证
|
||||
*/
|
||||
onValidate(callback) {
|
||||
this.$refs.form.validate(callback);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口关闭或重置时对表单验证进行初始化
|
||||
*/
|
||||
onResetFields() {
|
||||
setTimeout(() => {
|
||||
this.$refs.form.resetFields();
|
||||
|
||||
/** 在这里可以初始化当前组件中其他属性 */
|
||||
/* ... */
|
||||
}, 300);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 加载当前表单中所需要的异步数据
|
||||
*/
|
||||
async onInit() {
|
||||
this.loading = true;
|
||||
/** 可以在这里await获取一些异步数据 */
|
||||
/* ... */
|
||||
await this.onLoadCodes();
|
||||
this.loading = false;
|
||||
},
|
||||
|
||||
/** 当前组件的其他方法 */
|
||||
/* ... */
|
||||
onLoadCodes() {
|
||||
return this.$api
|
||||
.sysDictTypeDropDowns({
|
||||
code: ['dic_house_storage_of_drawings'],
|
||||
})
|
||||
.then(({ data: { dic_house_storage_of_drawings } }) => {
|
||||
this.codes = {
|
||||
houseStorageOfDrawings: dic_house_storage_of_drawings,
|
||||
};
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
202
Web/src/pages/business/house/houseInfo/form/base/fund.vue
Normal file
202
Web/src/pages/business/house/houseInfo/form/base/fund.vue
Normal file
@@ -0,0 +1,202 @@
|
||||
<template>
|
||||
<!--
|
||||
整页表单的分片表单
|
||||
v 1.0
|
||||
2021-05-12
|
||||
Lufthafen
|
||||
-->
|
||||
<a-form-model
|
||||
:label-col="labelCol"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:wrapper-col="wrapperCol"
|
||||
ref="form"
|
||||
>
|
||||
<a-spin :spinning="loading">
|
||||
<a-icon slot="indicator" spin type="loading" />
|
||||
<!-- 表单控件 -->
|
||||
<!-- ... -->
|
||||
<a-row type="flex">
|
||||
<a-col :span="12">
|
||||
<a-form-model-item class="ant-row-flex" label="物业保证金" prop="propertySecurity">
|
||||
<a-switch v-model="form.propertySecurity" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-model-item
|
||||
class="ant-row-flex"
|
||||
label="物业保证金余额"
|
||||
prop="propertySecurity1"
|
||||
v-if="form.propertySecurity"
|
||||
>
|
||||
<a-row type="flex">
|
||||
<a-col flex="1">
|
||||
<a-input-number
|
||||
class="w-100-p"
|
||||
placeholder="请输入物业保证金余额"
|
||||
v-model="form.propertySecurity1"
|
||||
/>
|
||||
</a-col>
|
||||
<a-col>
|
||||
<span class="yo-addon">元</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-model-item class="ant-row-flex" label="物业专项维修资金" prop="maintenanceFunds">
|
||||
<a-switch v-model="form.maintenanceFunds" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-model-item
|
||||
class="ant-row-flex"
|
||||
label="物业管理专项资金余额"
|
||||
prop="maintenanceFunds1"
|
||||
v-if="form.maintenanceFunds"
|
||||
>
|
||||
<a-row type="flex">
|
||||
<a-col flex="1">
|
||||
<a-input-number
|
||||
class="w-100-p"
|
||||
placeholder="请输入物业管理专项资金余额"
|
||||
v-model="form.maintenanceFunds1"
|
||||
/>
|
||||
</a-col>
|
||||
<a-col>
|
||||
<span class="yo-addon">元</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-model-item class="ant-row-flex" label="房改房维修资金余额" prop="maintenanceFunds2">
|
||||
<a-row type="flex">
|
||||
<a-col flex="1">
|
||||
<a-input-number
|
||||
class="w-100-p"
|
||||
placeholder="请输入房改房维修资金余额"
|
||||
v-model="form.maintenanceFunds2"
|
||||
/>
|
||||
</a-col>
|
||||
<a-col>
|
||||
<span class="yo-addon">元</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-spin>
|
||||
</a-form-model>
|
||||
</template>
|
||||
<script>
|
||||
/* 表单内容默认值 */
|
||||
const defaultForm = {
|
||||
/* ... */
|
||||
};
|
||||
|
||||
export default {
|
||||
props: ['param'],
|
||||
|
||||
data() {
|
||||
return {
|
||||
labelCol: { flex: '150px' },
|
||||
wrapperCol: { flex: '1' },
|
||||
|
||||
/** 表单数据 */
|
||||
form: {},
|
||||
/** 验证格式 */
|
||||
rules: {
|
||||
/* ... */
|
||||
propertySecurity1: [{ required: true, message: '请输入物业保证金余额' }],
|
||||
maintenanceFunds1: [{ required: true, message: '请输入物业管理专项资金余额' }],
|
||||
},
|
||||
|
||||
/** 加载异步数据状态 */
|
||||
loading: false,
|
||||
|
||||
/** 其他成员属性 */
|
||||
/* ... */
|
||||
};
|
||||
},
|
||||
|
||||
async created() {
|
||||
await this.onInit();
|
||||
this.onFillData();
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在打开编辑页时允许填充数据
|
||||
*/
|
||||
onFillData() {
|
||||
/** 将默认数据覆盖到form */
|
||||
const record = this.param && this.param.record;
|
||||
|
||||
this.form = this.$_.cloneDeep({
|
||||
...defaultForm,
|
||||
...record,
|
||||
/** 在此处添加其他默认数据转换 */
|
||||
/* ... */
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 验证表单并获取表单数据
|
||||
*/
|
||||
onGetData() {
|
||||
return new Promise((reslove, reject) => {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
const record = this.$_.cloneDeep(this.form);
|
||||
|
||||
/** 验证通过后可以对数据进行转换得到想要提交的格式 */
|
||||
/* ... */
|
||||
|
||||
reslove(record);
|
||||
} else {
|
||||
reject();
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口进行保存时调用表单验证
|
||||
*/
|
||||
onValidate(callback) {
|
||||
this.$refs.form.validate(callback);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口关闭或重置时对表单验证进行初始化
|
||||
*/
|
||||
onResetFields() {
|
||||
setTimeout(() => {
|
||||
this.$refs.form.resetFields();
|
||||
|
||||
/** 在这里可以初始化当前组件中其他属性 */
|
||||
/* ... */
|
||||
}, 300);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 加载当前表单中所需要的异步数据
|
||||
*/
|
||||
async onInit() {
|
||||
this.loading = true;
|
||||
/** 可以在这里await获取一些异步数据 */
|
||||
/* ... */
|
||||
this.loading = false;
|
||||
},
|
||||
|
||||
/** 当前组件的其他方法 */
|
||||
/* ... */
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,206 @@
|
||||
<template>
|
||||
<!--
|
||||
整页表单的分片表单
|
||||
v 1.0
|
||||
2021-05-12
|
||||
Lufthafen
|
||||
-->
|
||||
<a-form-model
|
||||
:label-col="labelCol"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:wrapper-col="wrapperCol"
|
||||
ref="form"
|
||||
>
|
||||
<a-spin :spinning="loading">
|
||||
<a-icon slot="indicator" spin type="loading" />
|
||||
<!-- 表单控件 -->
|
||||
<!-- ... -->
|
||||
<a-row type="flex">
|
||||
<a-col :span="24">
|
||||
<a-form-model-item class="ant-row-flex" label="鉴定等级" prop="identification">
|
||||
<a-radio-group button-style="solid" v-model="form.identification">
|
||||
<a-radio-button
|
||||
:key="item.code"
|
||||
:value="item.code"
|
||||
v-for="item in codes.houseIdentification"
|
||||
>{{ item.value }}</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item class="ant-row-flex" label="治理改造措施" prop="government">
|
||||
<a-radio-group button-style="solid" v-model="form.government">
|
||||
<a-radio-button
|
||||
:key="item.code"
|
||||
:value="item.code"
|
||||
v-for="item in codes.houseGovernment"
|
||||
>{{ item.value }}</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item class="ant-row-flex" label="是否已通过解危鉴定" prop="fireproofGrade">
|
||||
<a-switch />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item class="ant-row-flex" label="房屋使用状态" prop="houseStatus">
|
||||
<a-radio-group button-style="solid" v-model="form.houseStatus">
|
||||
<a-radio-button
|
||||
:key="item.code"
|
||||
:value="item.code"
|
||||
v-for="item in codes.houseStatus"
|
||||
>{{ item.value }}</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item class="ant-row-flex" label="综合等级" prop="comprehensiveGrade">
|
||||
<a-radio-group button-style="solid" v-model="form.comprehensiveGrade">
|
||||
<a-radio-button
|
||||
:key="item.code"
|
||||
:value="item.code"
|
||||
v-for="item in codes.houseComprehensiveGrade"
|
||||
>{{ item.value }}</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-spin>
|
||||
</a-form-model>
|
||||
</template>
|
||||
<script>
|
||||
/* 表单内容默认值 */
|
||||
const defaultForm = {
|
||||
/* ... */
|
||||
};
|
||||
|
||||
export default {
|
||||
props: ['param'],
|
||||
|
||||
data() {
|
||||
return {
|
||||
labelCol: { flex: '150px' },
|
||||
wrapperCol: { flex: '1' },
|
||||
|
||||
/** 表单数据 */
|
||||
form: {},
|
||||
/** 验证格式 */
|
||||
rules: {
|
||||
/* ... */
|
||||
identification: [{ required: true, message: '请选择鉴定等级' }],
|
||||
houseStatus: [{ required: true, message: '请选择房屋使用状态' }],
|
||||
comprehensiveGrade: [{ required: true, message: '请选择综合等级' }],
|
||||
},
|
||||
|
||||
/** 加载异步数据状态 */
|
||||
loading: false,
|
||||
|
||||
/** 其他成员属性 */
|
||||
/* ... */
|
||||
codes: {
|
||||
houseIdentification: [],
|
||||
houseGovernment: [],
|
||||
houseStatus: [],
|
||||
houseComprehensiveGrade: [],
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
async created() {
|
||||
await this.onInit();
|
||||
this.onFillData();
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在打开编辑页时允许填充数据
|
||||
*/
|
||||
onFillData() {
|
||||
/** 将默认数据覆盖到form */
|
||||
const record = this.param && this.param.record;
|
||||
|
||||
this.form = this.$_.cloneDeep({
|
||||
...defaultForm,
|
||||
...record,
|
||||
/** 在此处添加其他默认数据转换 */
|
||||
/* ... */
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 验证表单并获取表单数据
|
||||
*/
|
||||
onGetData() {
|
||||
return new Promise((reslove, reject) => {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
const record = this.$_.cloneDeep(this.form);
|
||||
|
||||
/** 验证通过后可以对数据进行转换得到想要提交的格式 */
|
||||
/* ... */
|
||||
|
||||
reslove(record);
|
||||
} else {
|
||||
reject();
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口进行保存时调用表单验证
|
||||
*/
|
||||
onValidate(callback) {
|
||||
this.$refs.form.validate(callback);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口关闭或重置时对表单验证进行初始化
|
||||
*/
|
||||
onResetFields() {
|
||||
setTimeout(() => {
|
||||
this.$refs.form.resetFields();
|
||||
|
||||
/** 在这里可以初始化当前组件中其他属性 */
|
||||
/* ... */
|
||||
}, 300);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 加载当前表单中所需要的异步数据
|
||||
*/
|
||||
async onInit() {
|
||||
this.loading = true;
|
||||
/** 可以在这里await获取一些异步数据 */
|
||||
/* ... */
|
||||
await this.onLoadCodes();
|
||||
this.loading = false;
|
||||
},
|
||||
|
||||
/** 当前组件的其他方法 */
|
||||
/* ... */
|
||||
onLoadCodes() {
|
||||
return this.$api
|
||||
.sysDictTypeDropDowns({
|
||||
code: [
|
||||
'dic_house_identification',
|
||||
'dic_house_government',
|
||||
'dic_house_status',
|
||||
'dic_house_comprehensive_grade',
|
||||
],
|
||||
})
|
||||
.then(
|
||||
({
|
||||
data: { dic_house_identification, dic_house_government, dic_house_status, dic_house_comprehensive_grade },
|
||||
}) => {
|
||||
this.codes = {
|
||||
houseIdentification: dic_house_identification,
|
||||
houseGovernment: dic_house_government,
|
||||
houseStatus: dic_house_status,
|
||||
houseComprehensiveGrade: dic_house_comprehensive_grade,
|
||||
};
|
||||
}
|
||||
);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -51,7 +51,40 @@ export default {
|
||||
component: () => import('./building'),
|
||||
},
|
||||
{
|
||||
title: '第二部分',
|
||||
title: '权属情况',
|
||||
component: () => import('./ownership'),
|
||||
},
|
||||
{
|
||||
title: '管理情况',
|
||||
component: () => import('./manager'),
|
||||
},
|
||||
{
|
||||
title: '调查情况',
|
||||
component: () => import('./investigation'),
|
||||
},
|
||||
{
|
||||
title: '鉴定治理',
|
||||
component: () => import('./identification'),
|
||||
},
|
||||
{
|
||||
title: '图纸资料存档处',
|
||||
component: () => import('./drawing'),
|
||||
},
|
||||
{
|
||||
title: '相关附件资料',
|
||||
component: () => import('./attachments'),
|
||||
},
|
||||
{
|
||||
title: '物业维修资金',
|
||||
component: () => import('./fund'),
|
||||
},
|
||||
{
|
||||
title: '建筑概貌',
|
||||
component: () => import('./aspect'),
|
||||
},
|
||||
{
|
||||
title: '调查单位',
|
||||
component: () => import('./unit'),
|
||||
},
|
||||
],
|
||||
};
|
||||
@@ -63,7 +96,8 @@ export default {
|
||||
*/
|
||||
onGetData() {
|
||||
return new Promise(async (resolve, reject) => {
|
||||
let formData = {};
|
||||
let formData = {},
|
||||
flag = true;
|
||||
for (let i = 0; i < this.$refs.forms.length; i++) {
|
||||
const form = this.$refs.forms[i];
|
||||
try {
|
||||
@@ -73,11 +107,14 @@ export default {
|
||||
...data,
|
||||
};
|
||||
} catch {
|
||||
reject();
|
||||
return;
|
||||
flag = false;
|
||||
}
|
||||
}
|
||||
resolve(formData);
|
||||
if (flag) {
|
||||
resolve(formData);
|
||||
} else {
|
||||
reject();
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
|
||||
@@ -0,0 +1,317 @@
|
||||
<template>
|
||||
<!--
|
||||
整页表单的分片表单
|
||||
v 1.0
|
||||
2021-05-12
|
||||
Lufthafen
|
||||
-->
|
||||
<a-form-model
|
||||
:label-col="labelCol"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:wrapper-col="wrapperCol"
|
||||
ref="form"
|
||||
>
|
||||
<a-spin :spinning="loading">
|
||||
<a-icon slot="indicator" spin type="loading" />
|
||||
<!-- 表单控件 -->
|
||||
<!-- ... -->
|
||||
<a-row type="flex">
|
||||
<a-col :span="24">
|
||||
<a-form-model-item class="ant-row-flex" label="房屋场地" prop="houseSite">
|
||||
<a-checkbox-group v-model="form.houseSite">
|
||||
<a-checkbox
|
||||
:key="item.code"
|
||||
:value="item.code"
|
||||
class="mb-xs"
|
||||
v-for="item in codes.houseHouseSite"
|
||||
>{{ item.value }}</a-checkbox>
|
||||
</a-checkbox-group>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-model-item class="ant-row-flex" label="相邻施工" prop="adjacentConstruction">
|
||||
<a-checkbox-group v-model="form.adjacentConstruction">
|
||||
<a-checkbox
|
||||
:key="item.code"
|
||||
:value="item.code"
|
||||
class="mb-xs"
|
||||
v-for="item in codes.houseAdjacentConstruction"
|
||||
>{{ item.value }}</a-checkbox>
|
||||
</a-checkbox-group>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-model-item class="ant-row-flex" label="化学侵蚀" prop="chemicalErosion">
|
||||
<a-checkbox-group v-model="form.chemicalErosion">
|
||||
<a-checkbox
|
||||
:key="item.code"
|
||||
:value="item.code"
|
||||
class="mb-xs"
|
||||
v-for="item in codes.houseChemicalErosion"
|
||||
>{{ item.value }}</a-checkbox>
|
||||
</a-checkbox-group>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-model-item class="ant-row-flex" label="结构拆改" prop="structuralDismantling">
|
||||
<a-radio-group button-style="solid" v-model="form.structuralDismantling">
|
||||
<a-radio-button
|
||||
:key="item.code"
|
||||
:value="item.code"
|
||||
v-for="item in codes.houseStructuralDismantling"
|
||||
>{{ item.value }}</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-model-item class="ant-row-flex" label="加层改造" prop="addingLayer">
|
||||
<a-radio-group button-style="solid" v-model="form.addingLayer">
|
||||
<a-radio-button
|
||||
:key="item.code"
|
||||
:value="item.code"
|
||||
v-for="item in codes.houseAddingLayer"
|
||||
>{{ item.value }}</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-model-item class="ant-row-flex" label="修缮加固" prop="repairAndReinforce">
|
||||
<a-checkbox-group v-model="form.repairAndReinforce">
|
||||
<a-checkbox
|
||||
:key="item.code"
|
||||
:value="item.code"
|
||||
class="mb-xs"
|
||||
v-for="item in codes.houseRepairAndReinforce"
|
||||
>{{ item.value }}</a-checkbox>
|
||||
</a-checkbox-group>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-model-item class="ant-row-flex" label="历史灾害" prop="historicalCalamity">
|
||||
<a-checkbox-group v-model="form.historicalCalamity">
|
||||
<a-checkbox
|
||||
:key="item.code"
|
||||
:value="item.code"
|
||||
class="mb-xs"
|
||||
v-for="item in codes.houseHistoricalCalamity"
|
||||
>{{ item.value }}</a-checkbox>
|
||||
</a-checkbox-group>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-model-item class="ant-row-flex" label="使用功能变更" prop="functionalChange">
|
||||
<a-checkbox-group v-model="form.functionalChange">
|
||||
<a-checkbox
|
||||
:key="item.code"
|
||||
:value="item.code"
|
||||
class="mb-xs"
|
||||
v-for="item in codes.houseFunctionalChange"
|
||||
>{{ item.value }}</a-checkbox>
|
||||
</a-checkbox-group>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-model-item class="ant-row-flex" label="其他调查内容">
|
||||
<a-textarea auto-size placeholder="请输入其他调查内容" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-spin>
|
||||
</a-form-model>
|
||||
</template>
|
||||
<script>
|
||||
/* 表单内容默认值 */
|
||||
const defaultForm = {
|
||||
/* ... */
|
||||
};
|
||||
|
||||
export default {
|
||||
props: ['param'],
|
||||
|
||||
data() {
|
||||
return {
|
||||
labelCol: { flex: '150px' },
|
||||
wrapperCol: { flex: '1' },
|
||||
|
||||
/** 表单数据 */
|
||||
form: {},
|
||||
/** 验证格式 */
|
||||
rules: {
|
||||
/* ... */
|
||||
houseSite: [{ required: true, message: '请选择房屋场地' }],
|
||||
adjacentConstruction: [{ required: true, message: '请选择相邻施工' }],
|
||||
chemicalErosion: [{ required: true, message: '请选择化学侵蚀' }],
|
||||
structuralDismantling: [{ required: true, message: '请选择结构拆改' }],
|
||||
addingLayer: [{ required: true, message: '请选择加层改造' }],
|
||||
repairAndReinforce: [{ required: true, message: '请选择修缮加固' }],
|
||||
historicalCalamity: [{ required: true, message: '请选择历史灾害' }],
|
||||
functionalChange: [{ required: true, message: '请选择使用功能变更' }],
|
||||
},
|
||||
|
||||
/** 加载异步数据状态 */
|
||||
loading: false,
|
||||
|
||||
/** 其他成员属性 */
|
||||
/* ... */
|
||||
codes: {
|
||||
houseHouseSite: [],
|
||||
houseAdjacentConstruction: [],
|
||||
houseChemicalErosion: [],
|
||||
houseStructuralDismantling: [],
|
||||
houseAddingLayer: [],
|
||||
houseRepairAndReinforce: [],
|
||||
houseHistoricalCalamity: [],
|
||||
houseFunctionalChange: [],
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
'form.adjacentConstruction'(value, oldValue) {
|
||||
this.onCheckedNone(value, oldValue, 'adjacentConstruction');
|
||||
},
|
||||
'form.chemicalErosion'(value, oldValue) {
|
||||
this.onCheckedNone(value, oldValue, 'chemicalErosion');
|
||||
},
|
||||
'form.repairAndReinforce'(value, oldValue) {
|
||||
this.onCheckedNone(value, oldValue, 'repairAndReinforce');
|
||||
},
|
||||
'form.historicalCalamity'(value, oldValue) {
|
||||
this.onCheckedNone(value, oldValue, 'historicalCalamity');
|
||||
},
|
||||
'form.functionalChange'(value, oldValue) {
|
||||
this.onCheckedNone(value, oldValue, 'functionalChange');
|
||||
},
|
||||
},
|
||||
|
||||
async created() {
|
||||
await this.onInit();
|
||||
this.onFillData();
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在打开编辑页时允许填充数据
|
||||
*/
|
||||
onFillData() {
|
||||
/** 将默认数据覆盖到form */
|
||||
const record = this.param && this.param.record;
|
||||
|
||||
this.form = this.$_.cloneDeep({
|
||||
...defaultForm,
|
||||
...record,
|
||||
/** 在此处添加其他默认数据转换 */
|
||||
/* ... */
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 验证表单并获取表单数据
|
||||
*/
|
||||
onGetData() {
|
||||
return new Promise((reslove, reject) => {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
const record = this.$_.cloneDeep(this.form);
|
||||
|
||||
/** 验证通过后可以对数据进行转换得到想要提交的格式 */
|
||||
/* ... */
|
||||
|
||||
reslove(record);
|
||||
} else {
|
||||
reject();
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口进行保存时调用表单验证
|
||||
*/
|
||||
onValidate(callback) {
|
||||
this.$refs.form.validate(callback);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口关闭或重置时对表单验证进行初始化
|
||||
*/
|
||||
onResetFields() {
|
||||
setTimeout(() => {
|
||||
this.$refs.form.resetFields();
|
||||
|
||||
/** 在这里可以初始化当前组件中其他属性 */
|
||||
/* ... */
|
||||
}, 300);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 加载当前表单中所需要的异步数据
|
||||
*/
|
||||
async onInit() {
|
||||
this.loading = true;
|
||||
/** 可以在这里await获取一些异步数据 */
|
||||
/* ... */
|
||||
await this.onLoadCodes();
|
||||
this.loading = false;
|
||||
},
|
||||
|
||||
/** 当前组件的其他方法 */
|
||||
/* ... */
|
||||
onLoadCodes() {
|
||||
return this.$api
|
||||
.sysDictTypeDropDowns({
|
||||
code: [
|
||||
'dic_house_house_site',
|
||||
'dic_house_adjacent_construction',
|
||||
'dic_house_chemical_erosion',
|
||||
'dic_house_structural_dismantling',
|
||||
'dic_house_adding_layer',
|
||||
'dic_house_repair_and_reinforce',
|
||||
'dic_house_historical_calamity',
|
||||
'dic_house_functional_change',
|
||||
],
|
||||
})
|
||||
.then(
|
||||
({
|
||||
data: {
|
||||
dic_house_house_site,
|
||||
dic_house_adjacent_construction,
|
||||
dic_house_chemical_erosion,
|
||||
dic_house_structural_dismantling,
|
||||
dic_house_adding_layer,
|
||||
dic_house_repair_and_reinforce,
|
||||
dic_house_historical_calamity,
|
||||
dic_house_functional_change,
|
||||
},
|
||||
}) => {
|
||||
this.codes = {
|
||||
houseHouseSite: dic_house_house_site,
|
||||
houseAdjacentConstruction: dic_house_adjacent_construction,
|
||||
houseChemicalErosion: dic_house_chemical_erosion,
|
||||
houseStructuralDismantling: dic_house_structural_dismantling,
|
||||
houseAddingLayer: dic_house_adding_layer,
|
||||
houseRepairAndReinforce: dic_house_repair_and_reinforce,
|
||||
houseHistoricalCalamity: dic_house_historical_calamity,
|
||||
houseFunctionalChange: dic_house_functional_change,
|
||||
};
|
||||
}
|
||||
);
|
||||
},
|
||||
|
||||
onCheckedNone(value, oldValue, key) {
|
||||
// 选中"无"时全不选,反之取消选择"无"
|
||||
if (value.indexOf('0') >= 0 && oldValue.indexOf('0') === -1) {
|
||||
this.form[key] = ['0'];
|
||||
} else if (value.indexOf('0') >= 0 && value.length > 1) {
|
||||
this.form[key].splice(value.indexOf('0'), 1);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
167
Web/src/pages/business/house/houseInfo/form/base/manager.vue
Normal file
167
Web/src/pages/business/house/houseInfo/form/base/manager.vue
Normal file
@@ -0,0 +1,167 @@
|
||||
<template>
|
||||
<!--
|
||||
整页表单的分片表单
|
||||
v 1.0
|
||||
2021-05-12
|
||||
Lufthafen
|
||||
-->
|
||||
<a-form-model
|
||||
:label-col="labelCol"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:wrapper-col="wrapperCol"
|
||||
ref="form"
|
||||
>
|
||||
<a-spin :spinning="loading">
|
||||
<a-icon slot="indicator" spin type="loading" />
|
||||
<!-- 表单控件 -->
|
||||
<!-- ... -->
|
||||
<a-row type="flex">
|
||||
<a-col :span="24">
|
||||
<a-form-model-item class="ant-row-flex" label="物业（经营）单位" prop="wuYeUnit">
|
||||
<a-input placeholder="请输入物业（经营）单位" v-model="form.wuYeUnit" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-model-item class="ant-row-flex" label="负责人" prop="wuYeUnitUser">
|
||||
<a-input placeholder="请输入负责人" v-model="form.wuYeUnitUser" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-model-item class="ant-row-flex" label="电话" prop="wuYeUnitUserTel">
|
||||
<a-input placeholder="请输入负责人电话" v-model="form.wuYeUnitUserTel" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-model-item class="ant-row-flex" label="属地管理社区负责人" prop="manageAreaUser">
|
||||
<a-input placeholder="请输入属地管理社区负责人" v-model="form.manageAreaUser" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-model-item class="ant-row-flex" label="电话" prop="manageAreaUserTel">
|
||||
<a-input placeholder="请输入属地管理社区负责人电话" v-model="form.manageAreaUserTel" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-model-item class="ant-row-flex" label="属地管理社区联系人" prop="manageAreaConent">
|
||||
<a-input placeholder="请输入属地管理社区联系人" v-model="form.manageAreaConent" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-model-item class="ant-row-flex" label="电话" prop="manageAreaConentTel">
|
||||
<a-input placeholder="请输入属地管理社区联系人电话" v-model="form.manageAreaConentTel" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-spin>
|
||||
</a-form-model>
|
||||
</template>
|
||||
<script>
|
||||
/* 表单内容默认值 */
|
||||
const defaultForm = {
|
||||
/* ... */
|
||||
};
|
||||
|
||||
export default {
|
||||
props: ['param'],
|
||||
|
||||
data() {
|
||||
return {
|
||||
labelCol: { flex: '150px' },
|
||||
wrapperCol: { flex: '1' },
|
||||
|
||||
/** 表单数据 */
|
||||
form: {},
|
||||
/** 验证格式 */
|
||||
rules: {
|
||||
/* ... */
|
||||
},
|
||||
|
||||
/** 加载异步数据状态 */
|
||||
loading: false,
|
||||
|
||||
/** 其他成员属性 */
|
||||
/* ... */
|
||||
};
|
||||
},
|
||||
|
||||
async created() {
|
||||
await this.onInit();
|
||||
this.onFillData();
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在打开编辑页时允许填充数据
|
||||
*/
|
||||
onFillData() {
|
||||
/** 将默认数据覆盖到form */
|
||||
const record = this.param && this.param.record;
|
||||
|
||||
this.form = this.$_.cloneDeep({
|
||||
...defaultForm,
|
||||
...record,
|
||||
/** 在此处添加其他默认数据转换 */
|
||||
/* ... */
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 验证表单并获取表单数据
|
||||
*/
|
||||
onGetData() {
|
||||
return new Promise((reslove, reject) => {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
const record = this.$_.cloneDeep(this.form);
|
||||
|
||||
/** 验证通过后可以对数据进行转换得到想要提交的格式 */
|
||||
/* ... */
|
||||
|
||||
reslove(record);
|
||||
} else {
|
||||
reject();
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口进行保存时调用表单验证
|
||||
*/
|
||||
onValidate(callback) {
|
||||
this.$refs.form.validate(callback);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口关闭或重置时对表单验证进行初始化
|
||||
*/
|
||||
onResetFields() {
|
||||
setTimeout(() => {
|
||||
this.$refs.form.resetFields();
|
||||
|
||||
/** 在这里可以初始化当前组件中其他属性 */
|
||||
/* ... */
|
||||
}, 300);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 加载当前表单中所需要的异步数据
|
||||
*/
|
||||
async onInit() {
|
||||
this.loading = true;
|
||||
/** 可以在这里await获取一些异步数据 */
|
||||
/* ... */
|
||||
this.loading = false;
|
||||
},
|
||||
|
||||
/** 当前组件的其他方法 */
|
||||
/* ... */
|
||||
},
|
||||
};
|
||||
</script>
|
||||
340
Web/src/pages/business/house/houseInfo/form/base/ownership.vue
Normal file
340
Web/src/pages/business/house/houseInfo/form/base/ownership.vue
Normal file
@@ -0,0 +1,340 @@
|
||||
<template>
|
||||
<!--
|
||||
整页表单的分片表单
|
||||
v 1.0
|
||||
2021-05-12
|
||||
Lufthafen
|
||||
-->
|
||||
<a-form-model
|
||||
:label-col="labelCol"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:wrapper-col="wrapperCol"
|
||||
ref="form"
|
||||
>
|
||||
<a-spin :spinning="loading">
|
||||
<a-icon slot="indicator" spin type="loading" />
|
||||
<!-- 表单控件 -->
|
||||
<!-- ... -->
|
||||
<a-row type="flex">
|
||||
<a-col :span="24">
|
||||
<a-form-model-item class="ant-row-flex" label="产权性质" prop="propertyRights">
|
||||
<a-radio-group button-style="solid" v-model="form.propertyRights">
|
||||
<a-radio-button
|
||||
:key="item.code"
|
||||
:value="item.code"
|
||||
v-for="item in codes.housePropertyRights"
|
||||
>{{ item.value }}</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-model-item class="ant-row-flex ant-form-inline" label="房屋包含的住宅总套数">
|
||||
<section>
|
||||
<a-form-model-item
|
||||
:colon="false"
|
||||
class="ant-row-flex"
|
||||
label="直管公房"
|
||||
prop="straightHouseCount"
|
||||
>
|
||||
<a-row type="flex">
|
||||
<a-col flex="1">
|
||||
<a-input-number
|
||||
:min="0"
|
||||
:step="1"
|
||||
placeholder="几"
|
||||
v-model="form.straightHouseCount"
|
||||
/>
|
||||
</a-col>
|
||||
<a-col>
|
||||
<span class="yo-addon">套</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item
|
||||
:colon="false"
|
||||
class="ant-row-flex"
|
||||
label="单位自管公房"
|
||||
prop="selfHouseCount"
|
||||
>
|
||||
<a-row type="flex">
|
||||
<a-col flex="1">
|
||||
<a-input-number
|
||||
:min="0"
|
||||
:step="1"
|
||||
placeholder="几"
|
||||
v-model="form.selfHouseCount"
|
||||
/>
|
||||
</a-col>
|
||||
<a-col>
|
||||
<span class="yo-addon">套</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item :colon="false" class="ant-row-flex" label="其他" props="otherCount">
|
||||
<a-row type="flex">
|
||||
<a-col flex="1">
|
||||
<a-input-number :min="0" :step="1" placeholder="几" v-model="form.otherCount" />
|
||||
</a-col>
|
||||
<a-col>
|
||||
<span class="yo-addon">套</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form-model-item>
|
||||
</section>
|
||||
<section>
|
||||
<a-form-model-item
|
||||
:colon="false"
|
||||
class="ant-row-flex"
|
||||
label="商品房"
|
||||
prop="businessCount"
|
||||
>
|
||||
<a-row type="flex">
|
||||
<a-col flex="1">
|
||||
<a-input-number
|
||||
:min="0"
|
||||
:step="1"
|
||||
placeholder="几"
|
||||
v-model="form.businessCount"
|
||||
/>
|
||||
</a-col>
|
||||
<a-col>
|
||||
<span class="yo-addon">套</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item
|
||||
:colon="false"
|
||||
class="ant-row-flex"
|
||||
label="房改房"
|
||||
prop="changeHouseCount"
|
||||
>
|
||||
<a-row type="flex">
|
||||
<a-col flex="1">
|
||||
<a-input-number
|
||||
:min="0"
|
||||
:step="1"
|
||||
placeholder="几"
|
||||
v-model="form.changeHouseCount"
|
||||
/>
|
||||
</a-col>
|
||||
<a-col>
|
||||
<span class="yo-addon">套</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item
|
||||
:colon="false"
|
||||
class="ant-row-flex"
|
||||
label="拆迁安置房"
|
||||
prop="resettlementHouseCount"
|
||||
>
|
||||
<a-row type="flex">
|
||||
<a-col flex="1">
|
||||
<a-input-number
|
||||
:min="0"
|
||||
:step="1"
|
||||
placeholder="几"
|
||||
v-model="form.resettlementHouseCount"
|
||||
/>
|
||||
</a-col>
|
||||
<a-col>
|
||||
<span class="yo-addon">套</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form-model-item>
|
||||
</section>
|
||||
<section>
|
||||
<a-form-model-item
|
||||
:colon="false"
|
||||
class="ant-row-flex"
|
||||
label="私房"
|
||||
prop="privateHouseCount"
|
||||
>
|
||||
<a-row type="flex">
|
||||
<a-col flex="1">
|
||||
<a-input-number
|
||||
:min="0"
|
||||
:step="1"
|
||||
placeholder="几"
|
||||
v-model="form.privateHouseCount"
|
||||
/>
|
||||
</a-col>
|
||||
<a-col>
|
||||
<span class="yo-addon">套</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item :colon="false" class="ant-row-flex" label="总共" prop="houseCount">
|
||||
<a-row type="flex">
|
||||
<a-col flex="1">
|
||||
<a-input-number :min="0" :step="1" placeholder="几" v-model="form.houseCount" />
|
||||
</a-col>
|
||||
<a-col>
|
||||
<span class="yo-addon">套</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form-model-item>
|
||||
</section>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-model-item class="ant-row-flex" label="产权单位" prop="propertyUnit">
|
||||
<a-input placeholder="请输入产权单位" v-model="form.propertyUnit" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-model-item class="ant-row-flex" label="负责人" prop="propertyUnitUser">
|
||||
<a-input placeholder="请输入负责人" v-model="form.propertyUnitUser" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-model-item class="ant-row-flex" label="负责人电话" prop="propertyUnitUserTel">
|
||||
<a-input placeholder="请输入负责人电话" v-model="form.propertyUnitUserTel" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-model-item class="ant-row-flex" label="联系人" prop="propertyUnitConent">
|
||||
<a-input placeholder="请输入联系人" v-model="form.propertyUnitConent" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-model-item class="ant-row-flex" label="联系人电话" prop="propertyUnitConentTel">
|
||||
<a-input placeholder="请输入联系人电话" v-model="form.propertyUnitConentTel" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-spin>
|
||||
</a-form-model>
|
||||
</template>
|
||||
<script>
|
||||
/* 表单内容默认值 */
|
||||
const defaultForm = {
|
||||
/* ... */
|
||||
};
|
||||
|
||||
export default {
|
||||
props: ['param'],
|
||||
|
||||
data() {
|
||||
return {
|
||||
labelCol: { flex: '150px' },
|
||||
wrapperCol: { flex: '1' },
|
||||
|
||||
/** 表单数据 */
|
||||
form: {},
|
||||
/** 验证格式 */
|
||||
rules: {
|
||||
/* ... */
|
||||
propertyRights: [{ required: true, message: '请选择产权性质' }],
|
||||
straightHouseCount: [{ required: true, message: '请输入直管公房' }],
|
||||
selfHouseCount: [{ required: true, message: '请输入单位自管公房' }],
|
||||
otherCount: [{ required: true, message: '请输入其他' }],
|
||||
businessCount: [{ required: true, message: '请输入商品房' }],
|
||||
changeHouseCount: [{ required: true, message: '请输入房改房' }],
|
||||
resettlementHouseCount: [{ required: true, message: '请输入拆迁安置房' }],
|
||||
},
|
||||
|
||||
/** 加载异步数据状态 */
|
||||
loading: false,
|
||||
|
||||
/** 其他成员属性 */
|
||||
/* ... */
|
||||
codes: {
|
||||
housePropertyRights: [],
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
async created() {
|
||||
await this.onInit();
|
||||
this.onFillData();
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在打开编辑页时允许填充数据
|
||||
*/
|
||||
onFillData() {
|
||||
/** 将默认数据覆盖到form */
|
||||
const record = this.param && this.param.record;
|
||||
|
||||
this.form = this.$_.cloneDeep({
|
||||
...defaultForm,
|
||||
...record,
|
||||
/** 在此处添加其他默认数据转换 */
|
||||
/* ... */
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 验证表单并获取表单数据
|
||||
*/
|
||||
onGetData() {
|
||||
return new Promise((reslove, reject) => {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
const record = this.$_.cloneDeep(this.form);
|
||||
|
||||
/** 验证通过后可以对数据进行转换得到想要提交的格式 */
|
||||
/* ... */
|
||||
|
||||
reslove(record);
|
||||
} else {
|
||||
reject();
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口进行保存时调用表单验证
|
||||
*/
|
||||
onValidate(callback) {
|
||||
this.$refs.form.validate(callback);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口关闭或重置时对表单验证进行初始化
|
||||
*/
|
||||
onResetFields() {
|
||||
setTimeout(() => {
|
||||
this.$refs.form.resetFields();
|
||||
|
||||
/** 在这里可以初始化当前组件中其他属性 */
|
||||
/* ... */
|
||||
}, 300);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 加载当前表单中所需要的异步数据
|
||||
*/
|
||||
async onInit() {
|
||||
this.loading = true;
|
||||
/** 可以在这里await获取一些异步数据 */
|
||||
/* ... */
|
||||
await this.onLoadCodes();
|
||||
this.loading = false;
|
||||
},
|
||||
|
||||
/** 当前组件的其他方法 */
|
||||
/* ... */
|
||||
onLoadCodes() {
|
||||
return this.$api
|
||||
.sysDictTypeDropDowns({
|
||||
code: ['dic_house_property_rights'],
|
||||
})
|
||||
.then(({ data: { dic_house_property_rights } }) => {
|
||||
this.codes = {
|
||||
housePropertyRights: dic_house_property_rights,
|
||||
};
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
156
Web/src/pages/business/house/houseInfo/form/base/unit.vue
Normal file
156
Web/src/pages/business/house/houseInfo/form/base/unit.vue
Normal file
@@ -0,0 +1,156 @@
|
||||
<template>
|
||||
<!--
|
||||
整页表单的分片表单
|
||||
v 1.0
|
||||
2021-05-12
|
||||
Lufthafen
|
||||
-->
|
||||
<a-form-model
|
||||
:label-col="labelCol"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:wrapper-col="wrapperCol"
|
||||
ref="form"
|
||||
>
|
||||
<a-spin :spinning="loading">
|
||||
<a-icon slot="indicator" spin type="loading" />
|
||||
<!-- 表单控件 -->
|
||||
<!-- ... -->
|
||||
<a-row type="flex">
|
||||
<a-col :span="12">
|
||||
<a-form-model-item class="ant-row-flex" label="调查登记机构" prop="aegistrationAgency">
|
||||
<a-input placeholder="请输入登记机构" v-model="form.aegistrationAgency" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-model-item class="ant-row-flex" label="调查人员" prop="aegistrationUser">
|
||||
<a-input placeholder="请输入调查人员" v-model="form.aegistrationUser" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-model-item class="ant-row-flex" label="审核人员" prop="checkUser">
|
||||
<a-input placeholder="请输入审核人员" v-model="form.checkUser" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-model-item class="ant-row-flex" label="主管部门" prop="competentDepartment">
|
||||
<a-input placeholder="请输入主管部门" v-model="form.competentDepartment" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-spin>
|
||||
</a-form-model>
|
||||
</template>
|
||||
<script>
|
||||
/* 表单内容默认值 */
|
||||
const defaultForm = {
|
||||
/* ... */
|
||||
};
|
||||
|
||||
export default {
|
||||
props: ['param'],
|
||||
|
||||
data() {
|
||||
return {
|
||||
labelCol: { flex: '150px' },
|
||||
wrapperCol: { flex: '1' },
|
||||
|
||||
/** 表单数据 */
|
||||
form: {},
|
||||
/** 验证格式 */
|
||||
rules: {
|
||||
/* ... */
|
||||
aegistrationAgency: [{ required: true, message: '请输入调查登记机构' }],
|
||||
aegistrationUser: [{ required: true, message: '请输入调查人员' }],
|
||||
checkUser: [{ required: true, message: '请输入审核人员' }],
|
||||
competentDepartment: [{ required: true, message: '请输入主管部门' }],
|
||||
},
|
||||
|
||||
/** 加载异步数据状态 */
|
||||
loading: false,
|
||||
|
||||
/** 其他成员属性 */
|
||||
/* ... */
|
||||
};
|
||||
},
|
||||
|
||||
async created() {
|
||||
await this.onInit();
|
||||
this.onFillData();
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在打开编辑页时允许填充数据
|
||||
*/
|
||||
onFillData() {
|
||||
/** 将默认数据覆盖到form */
|
||||
const record = this.param && this.param.record;
|
||||
|
||||
this.form = this.$_.cloneDeep({
|
||||
...defaultForm,
|
||||
...record,
|
||||
/** 在此处添加其他默认数据转换 */
|
||||
/* ... */
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 验证表单并获取表单数据
|
||||
*/
|
||||
onGetData() {
|
||||
return new Promise((reslove, reject) => {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
const record = this.$_.cloneDeep(this.form);
|
||||
|
||||
/** 验证通过后可以对数据进行转换得到想要提交的格式 */
|
||||
/* ... */
|
||||
|
||||
reslove(record);
|
||||
} else {
|
||||
reject();
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口进行保存时调用表单验证
|
||||
*/
|
||||
onValidate(callback) {
|
||||
this.$refs.form.validate(callback);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口关闭或重置时对表单验证进行初始化
|
||||
*/
|
||||
onResetFields() {
|
||||
setTimeout(() => {
|
||||
this.$refs.form.resetFields();
|
||||
|
||||
/** 在这里可以初始化当前组件中其他属性 */
|
||||
/* ... */
|
||||
}, 300);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 加载当前表单中所需要的异步数据
|
||||
*/
|
||||
async onInit() {
|
||||
this.loading = true;
|
||||
/** 可以在这里await获取一些异步数据 */
|
||||
/* ... */
|
||||
this.loading = false;
|
||||
},
|
||||
|
||||
/** 当前组件的其他方法 */
|
||||
/* ... */
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -7,7 +7,6 @@
|
||||
<span>
|
||||
<!-- 可以在工具栏中增加其他控件(只能在一行内) -->
|
||||
<!-- ... -->
|
||||
<a-input />
|
||||
</span>
|
||||
<span>
|
||||
<a-button @click="closeContentWindow()">取消</a-button>
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
import app from '@/main'
|
||||
|
||||
const _getFileTypeByBase64 = (base64) => {
|
||||
let arr = base64.split(','),
|
||||
fileType = arr[0].match(/:(.*?);/)[1]
|
||||
@@ -82,4 +84,42 @@ export const BlobToBase64 = async (blob) => {
|
||||
resolve(e.target.result)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export const GetFileName = (disposition) => {
|
||||
const dispositionSplit = disposition.split(';')
|
||||
const fileName = decodeURI(
|
||||
dispositionSplit[1].split('=')[1],
|
||||
dispositionSplit[2].match(/(?<=\*=).*?(?=\')/)[0]
|
||||
)
|
||||
return fileName
|
||||
}
|
||||
|
||||
export const PreviewFileResponse = async (id) => {
|
||||
return app.$api.sysFileInfoPreview({ id }).then((res) => {
|
||||
return res
|
||||
})
|
||||
}
|
||||
|
||||
export const PreviewFileArrayBuffer = async (id) => {
|
||||
const response = await PreviewFileResponse(id)
|
||||
return response.data
|
||||
}
|
||||
|
||||
export const PreviewFileBase64 = async (id) => {
|
||||
const file = await PreviewFile(id)
|
||||
if (!file) return
|
||||
const base64 = await BlobToBase64(file)
|
||||
return base64
|
||||
}
|
||||
|
||||
export const PreviewFile = async (id) => {
|
||||
const response = await PreviewFileResponse(id)
|
||||
const arrayBuffer = response.data
|
||||
const blob = ArrayBufferToBlob(arrayBuffer)
|
||||
const disposition = response.headers['content-disposition']
|
||||
if (!disposition) return
|
||||
const fileName = GetFileName(disposition)
|
||||
const file = BlobToFile(blob, fileName, response.headers['content-type'])
|
||||
return file
|
||||
}
|
||||
@@ -6438,6 +6438,11 @@ performance-now@^2.1.0:
|
||||
resolved "https://registry.npm.taobao.org/performance-now/download/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
|
||||
integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=
|
||||
|
||||
photoswipe@^4.1.3:
|
||||
version "4.1.3"
|
||||
resolved "https://registry.npm.taobao.org/photoswipe/download/photoswipe-4.1.3.tgz#59f49494eeb9ddab5888d03392926a19bc197550"
|
||||
integrity sha1-WfSUlO653atYiNAzkpJqGbwZdVA=
|
||||
|
||||
picomatch@^2.0.4, picomatch@^2.0.5, picomatch@^2.2.1:
|
||||
version "2.2.2"
|
||||
resolved "https://registry.npm.taobao.org/picomatch/download/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad"
|
||||
|
||||
Reference in New Issue
Block a user