ewide/zsxt_nbzs_h5
22
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update 房屋编码管理

Browse Source
This commit is contained in:
自带大佬气场
2021-05-11 19:59:59 +08:00
parent 452c0291aa
commit 9ec4f127f1
6 changed files with 252 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
Web/public/index.html
View File

@@ -6,6 +6,7 @@
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title> <title><%= htmlWebpackPlugin.options.title %></title>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=c6a4832b8afbde0361b36630a3fc5bdc"></script>
</head> </head>
<body> <body>
<noscript> <noscript>

35
Web/src/assets/style/lib/form.less
View File

@@ -179,6 +179,41 @@
margin-left: 0; margin-left: 0;
} }
} }
.yo-form-link {
display: flex;
align-items: center;
margin-bottom: -1px;
padding: @padding-md;
cursor: pointer;
border: @border-width-base @border-style-base @border-color-split;
background-color: @white;
&:hover {
background-color: darken(@white, 1%);
}
&:active {
background-color: darken(@white, 3%);
}
&--title {
font-size: @font-size-base + 1px;
flex: 1;
}
&--content {
flex: 1;
text-align: right;
color: fade(@black, 35%);
}
&--right-icon {
margin-left: @padding-xs;
color: fade(@black, 50%);
}
}
} }
.yo-modal-form { .yo-modal-form {
.ant-modal-body { .ant-modal-body {

15
Web/src/assets/style/lib/visibility.less
View File

@@ -5,3 +5,18 @@
.hidden { .hidden {
display: none !important; display: none !important;
} }
.block {
display: block;
}
.inline-block {
display: inline-block;
}
.inline {
display: inline;
}
.inline-flex {
display: inline-flex;
}
.flex {
display: flex;
}

21
Web/src/assets/style/lib/width-height.less
View File

@@ -2,3 +2,24 @@
.w-100-p { .w-100-p {
width: 100%; 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;
}

26
Web/src/components/yoFormLink/index.js Normal file
View File

@@ -0,0 +1,26 @@
export default {
props: {
title: {
type: [String, Number],
default: ''
},
content: {
type: [String, Number],
default: ''
}
},
render() {
return (
<div class="yo-form-link">
<div class="yo-form-link--title">
{this.$scopedSlots.default ? this.$scopedSlots.default() : this.title}
</div>
<div class="yo-form-link--content">
{this.$scopedSlots.content ? this.$scopedSlots.content() : this.content}
</div>
<a-icon type="right" class="yo-form-link--right-icon" />
</div>
)
}
}

156
Web/src/pages/business/house/houseCode/form.vue
View File

@@ -5,8 +5,14 @@
2021-04-30 2021-04-30
Lufthafen Lufthafen
--> -->
<container> <container mode="container-sm">
<br /> <br />
<div class="yo-form">
<div class="yo-form-group">
<yo-form-link content="对片区信息进行管理" title="片区管理" />
<yo-form-link content="对项目信息进行管理" title="项目管理" />
</div>
</div>
<a-card> <a-card>
<a-form-model <a-form-model
:label-col="labelCol" :label-col="labelCol"
@@ -17,8 +23,88 @@
> >
<a-spin :spinning="loading"> <a-spin :spinning="loading">
<a-icon slot="indicator" spin type="loading" /> <a-icon slot="indicator" spin type="loading" />
<a-form-model-item class="ant-row-flex" label="房屋编码">
<a-row align="top" type="flex">
<a-col flex="50px">
<span>宁波市 -</span>
</a-col>
<a-col flex="auto">
<a-form-model-item class="mb-none" prop="areaCode">
<a-cascader
:display-render="({labels}) => labels.join(' - ')"
:options="options"
placeholder="请选择项目"
v-model="form.areaCode"
/>
</a-form-model-item>
</a-col>
<a-col class="text-center" flex="20px">
<span>-</span>
</a-col>
<a-col flex="150px">
<a-form-model-item class="mb-none" prop="code">
<a-input-number
:formatter="(number) => `000${number}`.slice(-3)"
:max="999"
:min="1"
:precision="0"
:step="1"
class="w-100-p"
placeholder="请输入房屋序号"
v-model="form.code"
/>
</a-form-model-item>
</a-col>
</a-row>
</a-form-model-item>
<a-form-model-item class="ant-row-flex" label="地理坐标">
<a-row :gutter="16">
<a-col :span="12">
<a-form-model-item class="mb-none">
<a-input disabled placeholder="请在地图上选择坐标" prefix="经度" />
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item class="mb-none">
<a-input disabled placeholder="请在地图上选择坐标" prefix="纬度" />
</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>
</a-form-model-item>
<a-form-model-item class="ant-row-flex" label="房屋地址" prop="address">
<a-input placeholder="请输入房屋地址或在地图上选择地点" v-model="form.address" />
</a-form-model-item>
<a-form-model-item class="ant-row-flex" label="所属片区">
<a-select placeholder="请选择所属片区"></a-select>
</a-form-model-item>
<a-form-model-item class="ant-row-flex" label="房屋性质"> <a-form-model-item class="ant-row-flex" label="房屋性质">
<a-input /> <a-radio-group button-style="solid" v-model="form.nature">
<a-radio-button
:key="item.code"
:value="item.code"
v-for="item in houseType"
>{{ item.value }}</a-radio-button>
</a-radio-group>
</a-form-model-item>
<a-form-model-item
class="ant-row-flex"
label="所属行业、系统"
prop="industry"
v-if="form.nature == 2"
>
<a-select placeholder="请选择所属行业、系统" v-model="form.industry">
<a-select-option
:key="item.code"
:value="item.code"
v-for="item in houseIndustry"
>{{ item.value }}</a-select-option>
</a-select>
</a-form-model-item> </a-form-model-item>
</a-spin> </a-spin>
</a-form-model> </a-form-model>
@@ -26,14 +112,21 @@
</container> </container>
</template> </template>
<script> <script>
import YoFormLink from '@/components/yoFormLink';
/* 表单内容默认值 */ /* 表单内容默认值 */
const defaultForm = { const defaultForm = {
/* ... */ /* ... */
nature: '1',
}; };
export default { export default {
props: ['param'], props: ['param'],
components: {
YoFormLink,
},
data() { data() {
return { return {
labelCol: { flex: '150px' }, labelCol: { flex: '150px' },
@@ -44,6 +137,8 @@ export default {
/** 验证格式 */ /** 验证格式 */
rules: { rules: {
/* ... */ /* ... */
areaCode: [{ required: true, message: '请选择房屋所在区域' }],
code: [{ required: true, message: '请输入房屋序号' }],
}, },
/** 加载异步数据状态 */ /** 加载异步数据状态 */
@@ -51,9 +146,54 @@ export default {
/** 其他成员属性 */ /** 其他成员属性 */
/* ... */ /* ... */
houseType: [],
houseIndustry: [],
options: [
{
value: 'zhejiang',
label: 'Zhejiang',
children: [
{
value: 'hangzhou',
label: 'Hangzhou',
children: [
{
value: 'xihu',
label: 'West Lake',
},
],
},
],
},
{
value: 'jiangsu',
label: 'Jiangsu',
children: [
{
value: 'nanjing',
label: 'Nanjing',
children: [
{
value: 'zhonghuamen',
label: 'Zhong Hua Men',
},
],
},
],
},
],
}; };
}, },
async created() {
await this.onInit();
this.onFillData({});
},
mounted() {
new AMap.Map(this.$refs.map);
},
methods: { methods: {
/** /**
* 必要的方法 * 必要的方法
@@ -119,11 +259,23 @@ export default {
this.loading = true; this.loading = true;
/** 可以在这里await获取一些异步数据 */ /** 可以在这里await获取一些异步数据 */
/* ... */ /* ... */
await this.onLoadCodes();
this.loading = false; this.loading = false;
}, },
/** 当前组件的其他方法 */ /** 当前组件的其他方法 */
/* ... */ /* ... */
onLoadCodes() {
return this.$api
.$queue([
this.$api.sysDictTypeDropDownAwait({ code: 'dic_house_type' }),
this.$api.sysDictTypeDropDownAwait({ code: 'dic_house_industry' }),
])
.then(([dic_house_type, dic_house_industry]) => {
this.houseType = dic_house_type.data;
this.houseIndustry = dic_house_industry.data;
});
},
}, },
}; };
</script> </script>