| | |
| | | <!-- :rules="createRoleRules" --> |
| | | <el-form ref="user" label-width="140px" autoComplete="on" :model="role" label-position="right"> |
| | | <div class="things"> |
| | | <div>填写基础信息</div> |
| | | <div class="title">填写基础信息</div> |
| | | <!-- 问题类型 --> |
| | | <el-form-item class="optionItem" label="角色名称:" prop="name"> |
| | | <el-input v-model="role.name" placeholder="请填写角色名称"></el-input> |
| | | <el-form-item class="optionItem" label="问题类型:" prop="name"> |
| | | <el-select v-model="role.type" placeholder="违规"> |
| | | <el-option v-for="item in typeList" :key="item.name" :label="item.name" :value="item.value" |
| | | :disabled="item.disabled"> |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <!-- 大类名称 --> |
| | | <el-form-item class="optionItems" label="角色类型:" prop="status"> |
| | | <el-select v-model="role.type" placeholder="请选择角色类型"> |
| | | <el-form-item class="optionItems" label="大类名称:" prop="status"> |
| | | <el-select v-model="role.type" placeholder="请选择大类名称"> |
| | | <el-option v-for="item in typeList" :key="item.name" :label="item.name" :value="item.value" |
| | | :disabled="item.disabled"> |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <!-- 小类名称 --> |
| | | <el-form-item class="optionItem" label="角色描述:" prop="description"> |
| | | <el-input v-model="role.description" placeholder="请输入描述内容200字以内"></el-input> |
| | | </el-form-item> |
| | | <!-- 事件等级 --> |
| | | <el-form-item class="optionItem" label="角色名称:" prop="name"> |
| | | <el-input v-model="role.name" placeholder="请填写角色名称"></el-input> |
| | | </el-form-item> |
| | | <!-- 案由 --> |
| | | <el-form-item class="optionItem" label="角色名称:" prop="name"> |
| | | <el-input v-model="role.name" placeholder="请填写角色名称"></el-input> |
| | | </el-form-item> |
| | | <!-- 所属县区 --> |
| | | <el-form-item class="optionItem" label="角色名称:" prop="name"> |
| | | <el-input v-model="role.name" placeholder="请填写角色名称"></el-input> |
| | | </el-form-item> |
| | | <!-- 所属社区 --> |
| | | <el-form-item class="optionItem" label="角色名称:" prop="name"> |
| | | <el-input v-model="role.name" placeholder="请填写角色名称"></el-input> |
| | | </el-form-item> |
| | | <!-- 所属街道 --> |
| | | <el-form-item class="optionItem" label="角色名称:" prop="name"> |
| | | <el-input v-model="role.name" placeholder="请填写角色名称"></el-input> |
| | | </el-form-item> |
| | | <!-- 事发地点 --> |
| | | <el-form-item class="optionItem" label="角色名称:" prop="name"> |
| | | <el-input v-model="role.name" placeholder="请填写角色名称"></el-input> |
| | | </el-form-item> |
| | | <!-- 是否关联商铺 --> |
| | | <el-form-item class="optionItem" label="角色名称:" prop="name"> |
| | | <el-input v-model="role.name" placeholder="请填写角色名称"></el-input> |
| | | </el-form-item> |
| | | <!-- 关联商铺名称 --> |
| | | <el-form-item class="optionItem" label="角色名称:" prop="name"> |
| | | <el-input v-model="role.name" placeholder="请填写角色名称"></el-input> |
| | | </el-form-item> |
| | | <!-- 填写车牌号 --> |
| | | <el-form-item class="optionItem" label="角色名称:" prop="name"> |
| | | <el-input v-model="role.name" placeholder="请填写角色名称"></el-input> |
| | | </el-form-item> |
| | | <!-- 问题描述 --> |
| | | <el-form-item class="optionItem" label="角色名称:" prop="name"> |
| | | <el-input v-model="role.name" placeholder="请填写角色名称"></el-input> |
| | | </el-form-item> |
| | | </div> |
| | | <div class="person"> |
| | | <div>填写反映人信息</div> |
| | | <!-- 反映人 --> |
| | | <el-form-item class="optionItem" label="角色名称:" prop="name"> |
| | | <el-input v-model="role.name" placeholder="请填写角色名称"></el-input> |
| | | </el-form-item> |
| | | <!-- 联系方式 --> |
| | | <el-form-item class="optionItems" label="角色类型:" prop="status"> |
| | | <el-select v-model="role.type" placeholder="请选择角色类型"> |
| | | <el-form-item class="optionItem" label="小类名称:" prop="description"> |
| | | <el-select v-model="role.type" placeholder="请选择小类名称"> |
| | | <el-option v-for="item in typeList" :key="item.name" :label="item.name" :value="item.value" |
| | | :disabled="item.disabled"> |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <!-- 事件等级 --> |
| | | <el-form-item class="optionItem" label="事件等级:" prop="name"> |
| | | <el-select v-model="role.type" placeholder="请选择案件等级"> |
| | | <el-option v-for="item in typeList" :key="item.name" :label="item.name" :value="item.value" |
| | | :disabled="item.disabled"> |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <!-- 案由 --> |
| | | <el-form-item class="optionItem" label="案由:" prop="name"> |
| | | <el-input v-model="role.name" placeholder="请输入案由"></el-input> |
| | | </el-form-item> |
| | | <!-- 所属县区 --> |
| | | <el-form-item class="optionItem" label="所属县区:" prop="name"> |
| | | <el-select v-model="role.type" placeholder="请选择所属县区"> |
| | | <el-option v-for="item in typeList" :key="item.name" :label="item.name" :value="item.value" |
| | | :disabled="item.disabled"> |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <!-- 所属社区 --> |
| | | <el-form-item class="optionItem" label="所属社区:" prop="name"> |
| | | <el-select v-model="role.type" placeholder="请选择所属社区"> |
| | | <el-option v-for="item in typeList" :key="item.name" :label="item.name" :value="item.value" |
| | | :disabled="item.disabled"> |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <!-- 所属街道 --> |
| | | <el-form-item class="optionItem" label="所属街道:" prop="name"> |
| | | <el-select v-model="role.type" placeholder="请选择所属街道"> |
| | | <el-option v-for="item in typeList" :key="item.name" :label="item.name" :value="item.value" |
| | | :disabled="item.disabled"> |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <!-- 事发地点 --> |
| | | <el-form-item class="optionItem" label="事发地点:" prop="name"> |
| | | <el-input v-model="role.name" placeholder="请输入事发地点详细位置"></el-input> |
| | | </el-form-item> |
| | | <!-- 是否关联商铺 --> |
| | | <el-form-item class="optionItem" label="是否关联商铺:" prop="name"> |
| | | <el-radio v-model="role.name"> |
| | | 是 |
| | | </el-radio> |
| | | <el-radio v-model="role.name"> |
| | | 否 |
| | | </el-radio> |
| | | </el-form-item> |
| | | <!-- 关联商铺名称 --> |
| | | <el-form-item class="optionItem" label="关联商铺名称:" prop="name"> |
| | | <el-input v-model="role.name" placeholder="请填写关联商铺名称"></el-input> |
| | | </el-form-item> |
| | | <!-- 填写车牌号 --> |
| | | <el-form-item class="optionItem" label="填写车牌号:" prop="name"> |
| | | <el-input v-model="role.name" placeholder="请填写车牌号"></el-input> |
| | | </el-form-item> |
| | | <!-- 问题描述 --> |
| | | <el-form-item class="optionItem" label="问题描述:" prop="name"> |
| | | <el-input v-model="role.name" placeholder="请填写内容200字以内"></el-input> |
| | | </el-form-item> |
| | | </div> |
| | | <div class="person"> |
| | | <div class="title">填写反映人信息</div> |
| | | <!-- 反映人 --> |
| | | <el-form-item class="optionItem" label="反映人:" prop="name"> |
| | | <el-input v-model="role.name"></el-input> |
| | | </el-form-item> |
| | | <!-- 联系方式 --> |
| | | <el-form-item class="optionItems" label="联系方式:" prop="status"> |
| | | <el-input v-model="role.name"></el-input> |
| | | </el-form-item> |
| | | <!-- 身份证号 --> |
| | | <el-form-item class="optionItem" label="角色描述:" prop="description"> |
| | | <el-input v-model="role.description" placeholder="请输入描述内容200字以内"></el-input> |
| | | <el-form-item class="optionItem" label="身份证号:" prop="description"> |
| | | <el-input v-model="role.description"></el-input> |
| | | </el-form-item> |
| | | </div> |
| | | <el-form-item> |
| | | <div class="optionBtn"> |
| | | <el-button class="btn cancel">取消</el-button> |
| | | <el-button type="primary" class="btn submit" @click.native.prevent="handleUser">提交 |
| | | <!-- @click.native.prevent="handleUser" --> |
| | | <el-button type="primary" class="btn submit">提交 |
| | | </el-button> |
| | | </div> |
| | | </el-form-item> |
| | | </el-form> |
| | | |
| | | </div> |
| | | <div class="map">地图</div> |
| | | <div class="map"> |
| | | <myMap></myMap> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | <script> |
| | | import myMap from '@/components/map' |
| | | export default { |
| | | components: { |
| | | myMap, |
| | | }, |
| | | data() { |
| | | return { |
| | | role: { |
| | |
| | | } |
| | | </script> |
| | | <style lang="scss" scoped> |
| | | .checkIn { |
| | | display: flex; |
| | | |
| | | .form { |
| | | flex: 1; |
| | | color: #4b9bb7; |
| | | .title { |
| | | line-height: 40px; |
| | | } |
| | | |
| | | &::v-deep .el-form-item__label { |
| | | color: #4b9bb7; |
| | | } |
| | | .el-form{ |
| | | .el-input{ |
| | | &::v-deep .el-input__inner{ |
| | | width: 60%; |
| | | } |
| | | } |
| | | } |
| | | &::v-deep .el-input__inner { |
| | | background-color: #09152f; |
| | | border: 1px solid #17324c; |
| | | } |
| | | } |
| | | .map{ |
| | | flex: 1; |
| | | } |
| | | } |
| | | </style> |