|
@@ -1,501 +0,0 @@
|
|
|
-<template>
|
|
|
- <view class="appWrapper">
|
|
|
- <form action="" v-if="type==1" @submit="formSubmit">
|
|
|
- <view class="form-item margin-top">
|
|
|
- <view class="title">
|
|
|
- <text class="necessary">*</text>
|
|
|
- 用户名称:
|
|
|
- </view>
|
|
|
- <input name="userName" v-model="formMess.userName"></input>
|
|
|
- </view>
|
|
|
- <view class="form-item">
|
|
|
- <view class="title">地址:</view>
|
|
|
- <input name="input" v-model="formMess.place"></input>
|
|
|
- </view>
|
|
|
- <view class="form-item">
|
|
|
- <view class="title">经度:</view>
|
|
|
- <input name="input" v-model="formMess.longitude"></input>
|
|
|
- </view>
|
|
|
- <view class="form-item">
|
|
|
- <view class="title">维度:</view>
|
|
|
- <input name="input" v-model="formMess.dimension"></input>
|
|
|
- </view>
|
|
|
- <view class="form-item">
|
|
|
- <view class="title">联系人:</view>
|
|
|
- <input name="input" v-model="formMess.contactor"></input>
|
|
|
- </view>
|
|
|
- <view class="form-item">
|
|
|
- <view class="title">手机号码:</view>
|
|
|
- <input name="input" v-model="formMess.mobile"></input>
|
|
|
- </view>
|
|
|
-
|
|
|
-
|
|
|
- <view class="btn-area submitBottomBtn padding-lr-sm">
|
|
|
- <button class="bg-blue round margin-top" form-type="submit">提 交 </button>
|
|
|
- </view>
|
|
|
- </form>
|
|
|
- <form action="" v-else-if="type==2">
|
|
|
- <view class="form-item margin-top">
|
|
|
- <view class="title">
|
|
|
- <text class="necessary">*</text>
|
|
|
- 设备编号:
|
|
|
- </view>
|
|
|
- <input name="input" v-model="formMess.deviceNo"></input>
|
|
|
- </view>
|
|
|
- <view class="form-item">
|
|
|
- <view class="title">设备名称:</view>
|
|
|
- <input name="input" v-model="formMess.deviceName"></input>
|
|
|
- </view>
|
|
|
- <view class="form-item">
|
|
|
- <view class="title">安装位置:</view>
|
|
|
- <input name="input" v-model="formMess.place"></input>
|
|
|
- </view>
|
|
|
- <view class="form-item">
|
|
|
- <view class="title">所属楼层:</view>
|
|
|
- <select name="" id="">
|
|
|
- <option value="">楼层一</option>
|
|
|
- <option value="">楼层一</option>
|
|
|
- <option value="">楼层一</option>
|
|
|
- </select>
|
|
|
- </view>
|
|
|
- <view class="form-item">
|
|
|
- <view class="title">站点:</view>
|
|
|
- <select name="" id="">
|
|
|
- <option value="">站点一</option>
|
|
|
- <option value="">站点一</option>
|
|
|
- <option value="">站点一</option>
|
|
|
- </select>
|
|
|
- </view>
|
|
|
- <view class="form-item">
|
|
|
- <view class="title">设备类型:</view>
|
|
|
- <select name="" id="">
|
|
|
- <option value="">智慧用电</option>
|
|
|
- <option value="">视频监控</option>
|
|
|
- </select>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="btn-area submitBottomBtn padding-lr-sm">
|
|
|
- <button class="bg-blue round margin-top">提 交 </button>
|
|
|
- </view>
|
|
|
- </form>
|
|
|
- <!-- 权限管理 start -->
|
|
|
- <form action="" v-else>
|
|
|
- <view class="form-item margin-top">
|
|
|
- <view class="title">
|
|
|
- <text class="necessary">*</text>
|
|
|
- 角色名称
|
|
|
- </view>
|
|
|
- <input name="userName" v-model="formMess.userName"></input>
|
|
|
- </view>
|
|
|
- <view class="form-item">
|
|
|
- <view class="title " style="vertical-align:top">
|
|
|
- <text class="necessary">*</text>
|
|
|
- 站点:
|
|
|
- </view>
|
|
|
- <view style="position:relative" class="innerZd">
|
|
|
- <input name="siteName" v-model="formMess.siteName" @click="test" @focus="focusfns" @input="handleInput()" placeholder="请选择"></input>
|
|
|
-
|
|
|
- <view class="siteItems" v-if="isShow">
|
|
|
- <view class=" site-item" v-if="!siteItemData.length">暂无结果</view>
|
|
|
-
|
|
|
- <view class="site-item" v-for="(item,index) in siteItemData" @click="add(item,index)" :key="index">{{item}}</view>
|
|
|
- </view>
|
|
|
- <view style="width:500rpx" class="selectedBox">
|
|
|
- <button class="cu-btn sm margin-xs" v-for="(item,index) in selectedData" @click="deleteItem(item,index)">
|
|
|
- {{item}}
|
|
|
- <text class="lg text-gray cuIcon-close"></text>
|
|
|
- </button>
|
|
|
-
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="form-item margin-top">
|
|
|
- <view class="title">
|
|
|
- <text class="necessary">*</text>
|
|
|
- 告警类型
|
|
|
- </view>
|
|
|
- <radio-group name="gender">
|
|
|
- <label class="margin-right">
|
|
|
- <radio value="全部告警" checked /><text>全部告警</text>
|
|
|
- </label>
|
|
|
- <label>
|
|
|
- <radio value="维保告警" /><text>维保告警</text>
|
|
|
- </label>
|
|
|
- </radio-group>
|
|
|
- </view>
|
|
|
-
|
|
|
-
|
|
|
- <view class="btn-area submitBottomBtn padding-lr-sm">
|
|
|
- <button class="bg-blue round margin-top" form-type="submit">提 交 </button>
|
|
|
- </view>
|
|
|
- </form>
|
|
|
- <!-- 权限管理 end -->
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
- // var graceChecker = require("../../common/graceChecker.js");
|
|
|
- // import add from '../../common/select.js';
|
|
|
- export default {
|
|
|
-
|
|
|
- data() {
|
|
|
- return {
|
|
|
- index: -1,
|
|
|
- picker: ['楼层一', '楼层二', '楼层三'],
|
|
|
- type: '0',
|
|
|
-
|
|
|
- isShow: false,
|
|
|
- formMess: {
|
|
|
- "userName": "sss",
|
|
|
- "siteName": "",
|
|
|
- "place": "",
|
|
|
- "longitude": "",
|
|
|
- "dimension": "",
|
|
|
- "contactor": "",
|
|
|
- "mobile": "",
|
|
|
- },
|
|
|
-
|
|
|
- // 站点多选下拉
|
|
|
- siteItemDataOrigin: ["站点一", "站点二", "站点三", "站点四", "站点五", "站点六"],
|
|
|
- // newDataList: [],
|
|
|
-
|
|
|
- selectedData: [],
|
|
|
- siteItemData: ["站点一", "站点二", "站点三", "站点四", "站点五", "站点六"],
|
|
|
-
|
|
|
- }
|
|
|
- },
|
|
|
- onLoad: function(option) {
|
|
|
- console.log(option.type); //打印出上个页面传递的参数。
|
|
|
- this.type = option.type;
|
|
|
- if (option.type == 1) {
|
|
|
- uni.setNavigationBarTitle({
|
|
|
- title: '站点新增'
|
|
|
- });
|
|
|
- } else if (option.type == 2) {
|
|
|
- uni.setNavigationBarTitle({
|
|
|
- title: '设备新增'
|
|
|
- });
|
|
|
- } else {
|
|
|
- uni.setNavigationBarTitle({
|
|
|
- title: '权限新增'
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- mounted() {
|
|
|
- document.addEventListener('click', (e) => {
|
|
|
- if (e.target.className != 'uni-input-input') {
|
|
|
- this.isShow = false;
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- methods: {
|
|
|
- add: function(item, index) {
|
|
|
- this.selectedData.push(item);
|
|
|
- this.isShow = false;
|
|
|
- this.formMess.siteName=''
|
|
|
- this.siteItemData.splice(index, 1);
|
|
|
-
|
|
|
- },
|
|
|
- deleteItem: function(item, index) {
|
|
|
- // this.selectedData.remove(item);
|
|
|
-
|
|
|
-
|
|
|
- this.selectedData.splice(index, 1);
|
|
|
- this.siteItemDataOrigin.push(item);
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- //将元素根据搜索内容过滤出来 这里改变了siteItemData
|
|
|
-
|
|
|
- this.siteItemData = this.getNotSelectItem();
|
|
|
-
|
|
|
-
|
|
|
- this.siteItemData = this.siteItemData.filter(item => item.indexOf(this.formMess.siteName) > -1);
|
|
|
- // console.log('这是过滤来的');
|
|
|
- // console.log(this.siteItemData);
|
|
|
-
|
|
|
- // this.selectedData = newlist;
|
|
|
- // console.log(this.selectedData)
|
|
|
-
|
|
|
-
|
|
|
- },
|
|
|
-
|
|
|
- // 站点多选下拉
|
|
|
- test: function() {
|
|
|
- this.isShow = !this.isShow;
|
|
|
- },
|
|
|
- test2: function() {
|
|
|
- this.isShow = false;
|
|
|
- },
|
|
|
- handleInput() {
|
|
|
- // this.getNotSelectItem();
|
|
|
-
|
|
|
- //将元素根据搜索内容过滤出来 这里改变了siteItemData
|
|
|
-
|
|
|
- this.siteItemData = this.getNotSelectItem();
|
|
|
- this.siteItemData = this.siteItemData.filter(item => item.indexOf(this.formMess.siteName) > -1);
|
|
|
-
|
|
|
- // this.selectedData = newlist;
|
|
|
- // console.log(this.selectedData)
|
|
|
-
|
|
|
- },
|
|
|
- // 站点多选下拉 end
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- getNotSelectItem(){
|
|
|
-
|
|
|
- let ok1 = this.siteItemDataOrigin;
|
|
|
- let ok2 = this.selectedData;
|
|
|
- // console.log('选中值',ok2);
|
|
|
- // console.log('全部值',ok1);
|
|
|
-
|
|
|
-
|
|
|
- if(ok2.length){
|
|
|
- for(let i = 0; i < ok2.length; i++){
|
|
|
- for(let j = 0; j < ok1.length; j++){
|
|
|
- if(ok1[j] === ok2[i]){//值已经被选中
|
|
|
- ok1.splice(j, 1);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- return ok1;
|
|
|
-
|
|
|
-
|
|
|
- },
|
|
|
-
|
|
|
- formSubmit: function(e) {
|
|
|
- console.log('form发生了submit事件,携带数据为:' + JSON.stringify(e.detail.value))
|
|
|
- //定义表单规则
|
|
|
- var rule = [{
|
|
|
- name: "userName",
|
|
|
- checkType: "string",
|
|
|
- checkRule: "1,3",
|
|
|
- errorMsg: "姓名应为1-3个字符..."
|
|
|
- },
|
|
|
- // {name:"gender", checkType : "in", checkRule:"男,女", errorMsg:"请选择性别"},
|
|
|
- // {name:"loves", checkType : "notnull", checkRule:"", errorMsg:"请选择爱好"}
|
|
|
- ];
|
|
|
- //进行表单检查
|
|
|
- var formData = e.detail.value;
|
|
|
- var checkRes = graceChecker.check(formData, rule);
|
|
|
- if (checkRes) {
|
|
|
- uni.showToast({
|
|
|
- title: "验证通过!",
|
|
|
- icon: "none"
|
|
|
- });
|
|
|
- } else {
|
|
|
- uni.showToast({
|
|
|
- title: graceChecker.error,
|
|
|
- icon: "none"
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- formReset: function(e) {
|
|
|
- console.log('清空数据')
|
|
|
- },
|
|
|
- focusfns:function(e){
|
|
|
- // this.getNotSelectItem();
|
|
|
-
|
|
|
- //将元素根据搜索内容过滤出来 这里改变了siteItemData
|
|
|
-
|
|
|
- this.siteItemData = this.getNotSelectItem();
|
|
|
-
|
|
|
-
|
|
|
- this.siteItemData = this.siteItemData.filter(item => item.indexOf(this.formMess.siteName) > -1);
|
|
|
- },
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
-</script>
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-<style lang="scss">
|
|
|
- .cu-form-group {
|
|
|
- border-top: 0;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- input,
|
|
|
- select,
|
|
|
- option {
|
|
|
- line-height: 70rpx;
|
|
|
- padding: 0 20rpx;
|
|
|
- height: 70rpx;
|
|
|
- border: 1px solid #EDEDED;
|
|
|
- // width:500rpx!important;
|
|
|
- background-color: #fff;
|
|
|
- box-sizing: border-box;
|
|
|
- appearance: none;
|
|
|
- -moz-appearance: none;
|
|
|
- -webkit-appearance: none;
|
|
|
- color: #999;
|
|
|
-
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- select:focus,
|
|
|
- select:active,
|
|
|
- select:hover {
|
|
|
- outline: none;
|
|
|
- }
|
|
|
-
|
|
|
- select {
|
|
|
- background: url(../../static/arrow.png) no-repeat scroll 98% center;
|
|
|
- background-size: 6%;
|
|
|
- }
|
|
|
-
|
|
|
- .form-item label text {
|
|
|
- position: relative;
|
|
|
- top: 2rpx
|
|
|
- }
|
|
|
-
|
|
|
- .form-item {
|
|
|
- padding: 0 40rpx;
|
|
|
- display: flex;
|
|
|
- align-items: top;
|
|
|
- margin-bottom: 20rpx;
|
|
|
-
|
|
|
-
|
|
|
- .title {
|
|
|
- width: 170rpx;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- .necessary {
|
|
|
- color: red;
|
|
|
- display: inline-block;
|
|
|
- position: absolute;
|
|
|
- top: -2rpx;
|
|
|
- left: -20rpx;
|
|
|
- font-size: 40rpx;
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- input,
|
|
|
- select {
|
|
|
- width: 500rpx;
|
|
|
- font-size: 28rpx;
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- /* 站点多选下拉样式 start */
|
|
|
-
|
|
|
- .layui-btn {
|
|
|
- background-color: #5fb878;
|
|
|
- }
|
|
|
-
|
|
|
- a {
|
|
|
- text-decoration: none;
|
|
|
- }
|
|
|
-
|
|
|
- .label {
|
|
|
- padding: 2px 0px;
|
|
|
- background: #aaa;
|
|
|
- border-radius: 2px;
|
|
|
- color: #fff;
|
|
|
- display: block;
|
|
|
- line-height: 20px;
|
|
|
- height: 20px;
|
|
|
- margin: 2px 5px 2px 0;
|
|
|
- float: left;
|
|
|
- }
|
|
|
-
|
|
|
- .label span {
|
|
|
- padding: 0 5px;
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
-
|
|
|
- .close {
|
|
|
- padding: 1px 5px !important;
|
|
|
- }
|
|
|
-
|
|
|
- .close:hover {
|
|
|
- /* background-color: #009E94;
|
|
|
- border-radius: 2px;
|
|
|
- color: tomato; */
|
|
|
- }
|
|
|
-
|
|
|
- .selectId input {
|
|
|
- width: 100% !important;
|
|
|
- }
|
|
|
-
|
|
|
- .selectId input {
|
|
|
- height: 25px;
|
|
|
- padding: 1px 5px;
|
|
|
- border-radius: 3px;
|
|
|
- width: calc(100% - 12px);
|
|
|
- outline-color: #5fb878;
|
|
|
- border: 1px solid #5fb878;
|
|
|
- }
|
|
|
-
|
|
|
- .selectId {
|
|
|
- position: relative;
|
|
|
- }
|
|
|
-
|
|
|
- .selectId dl {
|
|
|
- border: 1px solid #eee;
|
|
|
- border-radius: 3px;
|
|
|
- margin: 2px 0px;
|
|
|
- max-height: 300px;
|
|
|
- overflow-x: hidden;
|
|
|
- white-space: nowrap;
|
|
|
- position: absolute;
|
|
|
- width: 100%;
|
|
|
- top: 40px;
|
|
|
- background: #fff;
|
|
|
- z-index: 1000
|
|
|
- }
|
|
|
-
|
|
|
- .selectId dl dd {
|
|
|
- margin: 0;
|
|
|
- padding: 5px 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .selectId dl dd:hover {
|
|
|
- background-color: #5FB878;
|
|
|
- color: white;
|
|
|
- }
|
|
|
-
|
|
|
- .AD {
|
|
|
- /* width: 210px;
|
|
|
- margin-left: 40px; */
|
|
|
- overflow-y: auto;
|
|
|
- max-height: 200px;
|
|
|
- /* border: 2px solid #5fb878;
|
|
|
- border-radius: 6px;
|
|
|
- padding: 1px 2px; */
|
|
|
- }
|
|
|
-
|
|
|
- form .AD span {
|
|
|
- width: auto;
|
|
|
- }
|
|
|
-
|
|
|
- .siteSelect {
|
|
|
- width: 71%;
|
|
|
- display: inline-block;
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- /* 站点多选下拉样式end */
|
|
|
-</style>
|