<template>
|
<view class="container">
|
<u-form labelWidth="70" :model="form" :rules="rules" ref="form">
|
<view class="box-title">
|
<box-title title="基础信息"></box-title>
|
</view>
|
<view class="item">
|
|
<!-- <u-form-item class="form-item" labelWidth="100" label="场所地址:" required prop="location">
|
<u--input border="none" v-model="form.location" placeholder="请选择场所地址">
|
</u--input>
|
</u-form-item> -->
|
|
<u-form-item class="form-item" labelWidth="100" label="场所名称:" required prop="placeName">
|
<u--input border="none" v-model="form.placeName" placeholder="请输入当前位置">
|
</u--input>
|
</u-form-item>
|
|
<u-form-item @click="popup" class="form-item" labelWidth="100" label="标签:" required prop="label">
|
<u--input border="none" placeholder="请选择地址标签">
|
</u--input>
|
<u-icon slot="right" name="arrow-right"></u-icon>
|
</u-form-item>
|
<view v-if="showLabelList.length>0" class="label">
|
<view v-for="(item,index) in showLabelList" :key="index" class="activeLabel">
|
<u-tag closable :show="!item.isClose" size="mini" @close="delTag(item)"
|
:text="item.text"></u-tag>
|
</view>
|
</view>
|
|
<u-form-item class="form-item" labelWidth="100" label="备注:" prop="location">
|
<u--input border="none" v-model="form.remark" placeholder="请输入备注">
|
</u--input>
|
</u-form-item>
|
|
<u-form-item class="form-item" labelWidth="100" label="经纬度:" prop="location">
|
<u--input border="none" v-model="form.jwd" placeholder="请输入经纬度">
|
</u--input>
|
</u-form-item>
|
</view>
|
|
<view class="box-title">
|
<box-title title="负责人信息"></box-title>
|
</view>
|
|
<view class="item">
|
<u-form-item class="form-item" labelWidth="100" label="场所负责人:" prop="principal">
|
<u--input border="none" v-model="form.principal" placeholder="请输入场所负责人">
|
</u--input>
|
</u-form-item>
|
<u-form-item class="form-item" labelWidth="100" label="手机号:" prop="location">
|
<u--input border="none" v-model="form.phone" placeholder="请输入手机号">
|
</u--input>
|
</u-form-item>
|
</view>
|
|
|
<view class="box-title">
|
<box-title title="场所照片"></box-title>
|
</view>
|
|
<view class="item pic">
|
<u-upload :fileList="form.images" :previewFullImage="uploadConfig.previewFullImage"
|
:accept="uploadConfig.acceptImg" :multiple="uploadConfig.multiple" :maxCount="uploadConfig.maxCount"
|
:capture="uploadConfig.capture" @afterRead="afterReadImg" @delete="deletePic">
|
</u-upload>
|
</view>
|
|
|
|
|
</u-form>
|
|
<view class="box-title">
|
<box-title title="综治网格">
|
<template slot="titleMore">
|
<view class="title-more">
|
<view class="red item"></view>
|
<view class="orange item">85.9</view>
|
<view class="green item"></view>
|
</view>
|
</template>
|
</box-title>
|
</view>
|
|
<view class="item">
|
<lineItem :dataInfo="comprehensiveData.basic">
|
</lineItem>
|
|
<lineItem :dataInfo="comprehensiveData.scene">
|
<template v-slot:pic="{scope}">
|
{{scope.value}}
|
</template>
|
</lineItem>
|
</view>
|
|
<view class="box-title">
|
<box-title title="公安网格">
|
<template slot="titleMore">
|
<view class="title-more">
|
<view class="red item"></view>
|
<view class="orange item">85.9</view>
|
<view class="green item"></view>
|
</view>
|
</template></box-title>
|
</view>
|
|
<view class="item">
|
<lineItem :dataInfo="comprehensiveData.basic">
|
</lineItem>
|
|
<lineItem :dataInfo="comprehensiveData.scene">
|
<template v-slot:pic="{scope}">
|
{{scope.value}}
|
</template>
|
</lineItem>
|
</view>
|
|
|
<view class="bottom">
|
<view class="btn">
|
<u-button @click="addRent" type="primary" text="提交"></u-button>
|
</view>
|
</view>
|
|
|
|
<uni-popup class="citys_win popup_win" ref="uniPopup" type="bottom">
|
<wyh-tree-select :items="labelList" title="标签选择" :showNav="true" defaultActiveColor="#4586fe"
|
:activeIds="activeIds" @clickItem="labelClick" :showCancel="false" :showConfirm="false">
|
</wyh-tree-select>
|
</uni-popup>
|
|
|
</view>
|
</template>
|
|
<script>
|
import uploadMixin from "@/mixin/uploadMixin";
|
import lineItem from "@/subPackage/workbench/components/lineItem.vue"
|
import {
|
getLabelList
|
} from "@/api/label/label";
|
export default {
|
mixins: [uploadMixin],
|
components: {
|
lineItem
|
},
|
data() {
|
return {
|
form: {},
|
rules: {
|
'userInfo.name': {
|
type: 'string',
|
required: true,
|
message: '请填写姓名',
|
trigger: ['blur', 'change']
|
},
|
},
|
|
labelList: [{
|
text: '全部标签',
|
children: [],
|
dot: false
|
}, ],
|
|
comprehensiveData: {
|
basic: [{
|
label: "社区名称",
|
value: "暂无数据"
|
},
|
{
|
label: "网格名称",
|
value: "暂无数据"
|
},
|
{
|
label: "网格员",
|
value: "暂无数据"
|
},
|
{
|
label: "联系电话",
|
value: "暂无数据"
|
}
|
],
|
scene: [{
|
label: "场所照片",
|
value: "",
|
useSlot: "pic",
|
},
|
{
|
label: "采集人",
|
value: "未完善"
|
},
|
{
|
label: "采集时间",
|
value: "未完善"
|
},
|
{
|
label: "场所负责人",
|
value: "未完善",
|
},
|
{
|
label: "采集人",
|
value: "未完善"
|
},
|
{
|
label: "采集时间",
|
value: "未完善",
|
},
|
{
|
label: "历史事件",
|
value: "未完善",
|
}
|
],
|
},
|
publicData: {
|
basic: [{
|
label: "公安局",
|
value: "暂无数据"
|
},
|
{
|
label: "派出所",
|
value: "暂无数据"
|
},
|
{
|
label: "辖区民警",
|
value: "暂无数据"
|
},
|
{
|
label: "联系电话",
|
value: "暂无数据"
|
}
|
],
|
scene: [{
|
label: "消防照片",
|
value: "",
|
useSlot: "pic",
|
},
|
{
|
label: "采集人",
|
value: "未完善"
|
},
|
{
|
label: "采集时间",
|
value: "未完善"
|
},
|
{
|
label: "消防负责人",
|
value: "未完善",
|
},
|
{
|
label: "采集人",
|
value: "未完善"
|
},
|
{
|
label: "采集时间",
|
value: "未完善",
|
},
|
{
|
label: "历史事件",
|
value: "未完善",
|
}
|
],
|
},
|
|
activeIds: [],
|
showLabelList: []
|
}
|
},
|
created() {},
|
mounted() {
|
|
},
|
onLoad(option) {
|
|
},
|
onShow() {
|
this.getLabel()
|
},
|
methods: {
|
//弹出层打开
|
popup() {
|
this.$refs.uniPopup.open()
|
},
|
|
getLabel() {
|
getLabelList({
|
size: -1
|
}).then(res => {
|
let data = res.data.records
|
data.sort((a, b) => a.sort - b.sort)
|
|
data.forEach(label => {
|
this.labelList[0].children.push({
|
id: label.id,
|
text: label.labelName
|
})
|
})
|
})
|
},
|
|
labelClick(item) {
|
|
//判断label是否已在
|
const label = this.showLabelList.find(e => e.id == item.id)
|
if (label) {
|
//在，去掉
|
this.showLabelList = this.showLabelList.filter(e => e.id != label.id)
|
this.activeIds = this.activeIds.filter(e => e != label.id)
|
} else {
|
//不在，添加
|
item.isClose = false
|
this.showLabelList.push(item)
|
this.activeIds.push(item.id)
|
}
|
|
this.showLabelList.sort((a, b) => a.sort - b.sort)
|
|
},
|
delTag(label) {
|
label.isClose = true
|
this.showLabelList = this.showLabelList.filter(e => e.id != label.id)
|
this.activeIds = this.activeIds.filter(e => e != label.id)
|
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.container {
|
position: relative;
|
width: 100%;
|
// height: 100%;
|
display: flex;
|
flex-direction: column;
|
background: #F9F9FA;
|
|
.box-title {
|
padding: 10px 0;
|
|
.title-more {
|
display: flex;
|
align-items: center;
|
height: 100%;
|
|
.item {
|
width: 50rpx;
|
height: 40rpx;
|
color: #ffffff;
|
padding: 6rpx;
|
font-size: 2rpx;
|
text-align: center;
|
line-height: 20px;
|
}
|
|
}
|
}
|
|
.item {
|
|
.form-item {
|
background-color: #ffffff;
|
padding: 2rpx 10px;
|
border-bottom: 1px solid #eff1f3;
|
}
|
|
.label {
|
padding: 10rpx 30rpx;
|
display: flex;
|
background-color: #ffffff;
|
flex-wrap: wrap;
|
|
.activeLabel {
|
// width: 80rpx;
|
margin-left: 10rpx;
|
margin-top: 10rpx
|
}
|
}
|
|
|
|
}
|
|
.pic {
|
background-color: #ffffff;
|
padding: 40rpx 30rpx;
|
}
|
|
.bottom {
|
padding: 20rpx;
|
background-color: #ffffff;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
|
.btn {
|
width: calc(100% - 40rpx);
|
}
|
}
|
}
|
|
.red {
|
background-color: red;
|
border-radius: 10rpx 0rpx 0rpx 10rpx;
|
}
|
|
.orange {
|
background-color: orange;
|
}
|
|
.green {
|
background-color: green;
|
border-radius: 0rpx 10rpx 10rpx 0rpx;
|
}
|
</style>
|
