<!-- 标签分配表单组件 -->
|
<template>
|
<view class="m-form">
|
<view class="m-form-head"><u-icon name="close-circle" color="#fff" size="40" @click="cancel"></u-icon></view>
|
<!-- 分配 -->
|
<view class="m-form-label" v-if="tallyType == 'allot'">
|
<u--form labelPosition="left" labelAlign="right" :model="model" :rules="rules" ref="form" labelWidth="100"
|
:labelStyle="{'color':'rgb(129, 129, 129)'}">
|
<u-form-item label="序号" prop="id" borderBottom ref="item">
|
<u--input
|
:customStyle="{ 'background-color': 'rgb(233, 233, 233)','box-shadow':'inset 2px 1.464px 5px 0px #ccccc4, 1.464px 1.464px 5px 0px rgba(255, 255, 255, 0.75)'}"
|
placeholderStyle="color:#000" color="#000" v-model="model.id" border="none"></u--input>
|
</u-form-item>
|
<u-form-item label="标签ID" prop="p_tagid" borderBottom ref="item">
|
<u--input
|
:customStyle="{ 'background-color': 'rgb(233, 233, 233)','box-shadow':'inset 2px 1.464px 5px 0px #ccccc4, 1.464px 1.464px 5px 0px rgba(255, 255, 255, 0.75)'}"
|
placeholderStyle="color:#000" color="#000" v-model="model.p_tagid" border="none"></u--input>
|
</u-form-item>
|
<u-form-item label="绑定围栏" prop="baoliu12" borderBottom ref="item">
|
<uni-data-select v-model="value_range" :localdata="range" @change="changeRange"></uni-data-select>
|
</u-form-item>
|
<!-- <uni-section title="基础多选" type="line"> -->
|
<u-form-item label="提醒标签" prop="p_warn" borderBottom ref="item">
|
<view class="uni-px-5 uni-pb-5" style="width: 100%">
|
<mySelectCheckbox v-model="value1" multiple dataKey="label" dataValue="value" :localdata="tally"
|
clear style="margin-right: -10px;" @change="change"></mySelectCheckbox>
|
</view>
|
</u-form-item>
|
<u-form-item label="联动闭锁" prop="p_atre" borderBottom ref="item">
|
<view class="uni-px-5 uni-pb-5" style="width: 100%">
|
<mySelectCheckbox v-model="value2" multiple dataKey="label" dataValue="value" :localdata="atre"
|
clear style="margin-right: -10px;" @change="change1"></mySelectCheckbox>
|
</view>
|
</u-form-item>
|
<!-- </uni-section> -->
|
</u--form>
|
</view>
|
<!-- 修改 -->
|
<view class="m-form-label" v-if="tallyType == 'update'">
|
<u--form labelPosition="left" labelAlign="right" :model="model" :rules="rules" ref="form" labelWidth="100"
|
:labelStyle="{'color':'rgb(129, 129, 129)'}">
|
<u-form-item label="所属部门" prop="p_department" borderBottom ref="item">
|
<uni-data-select v-model="value_bumen" :localdata="rangeBuMen"
|
@change="changeRangeBuMen"></uni-data-select>
|
</u-form-item>
|
<u-form-item label="标签序号" prop="id" borderBottom ref="item">
|
<u--input
|
:customStyle="{ 'background-color': 'rgb(233, 233, 233)','box-shadow':'inset 2px 1.464px 5px 0px #ccccc4, 1.464px 1.464px 5px 0px rgba(255, 255, 255, 0.75)'}"
|
disabled placeholderStyle="color:#000" color="#000" v-model="model.id" border="none"></u--input>
|
</u-form-item>
|
<u-form-item label="标签ID" prop="p_tagid" borderBottom ref="item">
|
<u--input
|
:customStyle="{ 'background-color': 'rgb(233, 233, 233)','box-shadow':'inset 2px 1.464px 5px 0px #ccccc4, 1.464px 1.464px 5px 0px rgba(255, 255, 255, 0.75)'}"
|
readonly placeholderStyle="color:#000" color="#000" v-model="model.p_tagid"
|
border="none"></u--input>
|
</u-form-item>
|
<u-form-item label="绑定名称" prop="p_name" borderBottom ref="item">
|
<u--input
|
:customStyle="{ 'background-color': 'rgb(233, 233, 233)','box-shadow':'inset 2px 1.464px 5px 0px #ccccc4, 1.464px 1.464px 5px 0px rgba(255, 255, 255, 0.75)'}"
|
placeholderStyle="color:#000" color="#000" v-model="model.p_name" border="none"></u--input>
|
</u-form-item>
|
<u-form-item label="标签高度" prop="baoliu4" borderBottom ref="item">
|
<u--input
|
:customStyle="{ 'background-color': 'rgb(233, 233, 233)','box-shadow':'inset 2px 1.464px 5px 0px #ccccc4, 1.464px 1.464px 5px 0px rgba(255, 255, 255, 0.75)'}"
|
placeholderStyle="color:#000" color="#000" v-model="model.baoliu4" border="none"></u--input>
|
</u-form-item>
|
</u--form>
|
</view>
|
<!-- 添加 -->
|
<view class="m-form-label" v-if="tallyType == 'add'">
|
<u--form labelPosition="left" labelAlign="right" :model="model" :rules="rules" ref="form" labelWidth="100"
|
:labelStyle="{'color':'rgb(129, 129, 129)'}">
|
<u-form-item label="标签ID" prop="p_tagid" borderBottom ref="item">
|
<u--input
|
:customStyle="{ 'background-color': 'rgb(233, 233, 233)','box-shadow':'inset 2px 1.464px 5px 0px #ccccc4, 1.464px 1.464px 5px 0px rgba(255, 255, 255, 0.75)'}"
|
placeholderStyle="color:#000" color="#000" v-model="model.p_tagid" border="none"></u--input>
|
</u-form-item>
|
</u--form>
|
</view>
|
<view class="m-form-button-list"><u-button type="primary" text="确定" @click="save"></u-button></view>
|
</view>
|
</template>
|
|
<script>
|
import mySelectCheckbox from './my-selelctCheckbox.vue'
|
import {
|
connChart
|
} from '../../../common/utils.js'
|
export default {
|
components: {
|
mySelectCheckbox
|
},
|
props: {
|
deviceId:String,
|
tallyType: String,
|
tallyFormData: Object
|
},
|
data() {
|
return {
|
fenceid:'',
|
value1: '',
|
data: [],
|
value2: '',
|
model: {
|
p_tagid: ''
|
},
|
addModel: {
|
p_tagid: ''
|
},
|
rules: {
|
p_tagid: {
|
validator: (rule, value, callback) => {
|
// 返回true表示校验通过，返回false表示不通过
|
var pattern = /^((?![0-9]+$)(?![a-zA-Z]+$)|[0-9A-Za-z]{1,1000})$/;
|
console.log(pattern.test(value))
|
return pattern.test(value);
|
},
|
required: true,
|
message: '请输入字母或数字',
|
trigger: ['blur', 'change']
|
}
|
},
|
value_bumen: '',
|
rangeBuMen: [],
|
value_range: '',
|
range: [],
|
tally: [],
|
atre: [],
|
labelModel: null
|
|
};
|
},
|
watch: {
|
value1(newval) {}
|
},
|
created() {
|
setTimeout(() => {
|
//获取提醒标签数据循环把数据放到lable中
|
this.data.push({
|
value: '选项1',
|
label: '清华大学'
|
});
|
this.data.push({
|
value: '选项2',
|
label: '北京大学'
|
});
|
// this.data = [{
|
// value: '选项1',
|
// label: '清华大学'
|
// }, {
|
// value: '选项2',
|
// label: '北京大学'
|
// }, {
|
// value: '选项3',
|
// label: '北京航空航天大学'
|
// }, {
|
// value: '选项4',
|
// label: '北京理工大学'
|
// }, {
|
// value: '选项5',
|
// label: '中国人民大学'
|
// }, {
|
// value: '选项6',
|
// label: '北京科技大学'
|
// }, {
|
// value: '选项7',
|
// label: '北京交通大学'
|
// }]
|
}, 1000)
|
},
|
methods: {
|
|
//保存
|
save() {
|
if (this.tallyType == 'add') {
|
//查重
|
|
this.labelModel.find(`p_tagid=${this.model.p_tagid}`, (e, r) => {
|
if (r.length > 0) {
|
uni.$u.toast('标签ID重复')
|
} else {
|
//添加
|
this.labelModel.insert({
|
p_name: '未命名',
|
p_tagid: this.model.p_tagid,
|
baoliu4: '150',
|
baoliu12: '未命名',
|
p_department: '系统默认',
|
}, (err, results) => {
|
// if (!err) {
|
uni.$u.toast('添加成功')
|
console.log(this.model.p_tagid);
|
var ipa = this.model.p_tagid + ","
|
this.$emit('submitTallyForm', {
|
add: this.model.p_tagid + ","
|
});
|
// this.$emit('submitTallyForm ', {
|
// // type: 'add',
|
// ipa: ipa
|
// });
|
// this.$emit('submitTallyForm');
|
// }
|
});
|
}
|
})
|
} else if (this.tallyType == 'update') {
|
//修改
|
this.labelModel.update(`id='${this.model.id}'`, {
|
p_name: this.model.p_name,
|
p_department: this.model.p_department,
|
baoliu4: this.model.baoliu4
|
}, (err, results) => {
|
var ipa = this.model.p_tagid+"," +this.model.p_name + ","
|
this.$emit('submitTallyForm', {
|
upp: ipa
|
});
|
// this.$emit('submitTallyForm');
|
});
|
} else if (this.tallyType == 'allot') {
|
var list = ''
|
if (this.value1 != null) {
|
for (var i = 0; i < this.value1.length; i++) {
|
if (i == this.value1.length - 1) {
|
list += this.value1[i]
|
} else {
|
list += this.value1[i] + ";"
|
}
|
}
|
}
|
|
var list2 = ''
|
if (this.value2 != null) {
|
for (var i = 0; i < this.value2.length; i++) {
|
if (i == this.value2.length - 1) {
|
list2 += this.value2[i]
|
} else {
|
list2 += this.value2[i] + ";"
|
}
|
}
|
}
|
|
//分配-与修改共用接口
|
this.labelModel.update(`id='${this.model.id}'`, {
|
p_atre: list2,
|
p_warn: list,
|
p_tagid: this.model.p_tagid,
|
baoliu12: this.model.baoliu12
|
}, (err, results) => {
|
console.log(list);
|
if (this.value1 != null) {
|
console.log(222);
|
if (list == '') {
|
this.$emit('submitTallyForm', {
|
|
detx: this.model.p_tagid + ","
|
});
|
}
|
}
|
if (list != '') {
|
this.$emit('submitTallyForm', {
|
tx: this.model.p_tagid + "," + list + ","
|
});
|
}
|
console.log(this.model.baoliu12);
|
var ipa = this.model.p_tagid + "," + this.model.baoliu12
|
this.$emit('submitTallyForm', {
|
|
allot: ipa
|
});
|
// this.$emit('submitTallyForm');
|
});
|
}
|
},
|
change(e) {},
|
change1(e) {},
|
//取消
|
cancel() {
|
this.$emit('cancelTallyForm');
|
},
|
//部门查询
|
jiedepartment() {
|
let labelModel = connChart('department')
|
labelModel.find((e, r) => {
|
r.forEach(e => {
|
this.rangeBuMen.push({
|
text: e.department_name,
|
value: e.department_name
|
});
|
});
|
})
|
},
|
changeRangeBuMen(e) {
|
this.model.p_department = e;
|
},
|
//围栏查询
|
fenceLista() {
|
this.status = 'loading'
|
var sys = this.$store.state.sys;
|
console.log(sys);
|
|
|
// setTimeout(() => {
|
if (sys.local==false) {
|
var method ='GET'
|
var data = {}
|
data.serialNumber = this.deviceId
|
data.name = 'ALL'
|
data.baoliu7 = 1
|
console.log(data);
|
var contentType='application/x-www-form-urlencoded'
|
uni.request({
|
// url: "http://192.168.31.101:8181/Fence/", //接口地址。
|
// url: "http://111.198.60.6:6008/Fence/", //接口地址。
|
url: "http://"+sys.baoliu20host+":8181/Fence/", //接口地址。
|
data: data,
|
method: method,
|
header: { //请求头可自定义
|
'content-type': contentType,
|
},
|
timeout:5000,//设置超时时间,默认5秒
|
success: (rep) => { //具体捕获请看自己接口返回的形式
|
console.log(87654345678);
|
console.log(rep)
|
// r.forEach(e => {
|
// this.range.push({
|
// text: e.name,
|
// value: e.name
|
// });
|
// });
|
|
// this.railList = [];
|
if (rep.statusCode==200) {
|
rep.data.forEach((e, i) => {
|
console.log(e);
|
e.name=e.name.split(this.deviceId)[0]
|
this.range.push({
|
text: e.name,
|
value: e.name
|
});
|
})
|
// this.valueList.push(...rep.data)
|
}else{
|
// this.status = 'nomore'
|
}
|
},
|
// fail(error) {
|
// console.log(error);
|
// uni.hideLoading();
|
// uni.$u.toast('网络不通');
|
// // reject(error)
|
// },
|
complete() {
|
uni.hideLoading();
|
}
|
});
|
}else{
|
let labelModel = connChart('fence')
|
labelModel.find((e, r) => {
|
r.forEach(e => {
|
this.range.push({
|
text: e.name,
|
value: e.name
|
});
|
});
|
})
|
}
|
|
},
|
//围栏查询
|
warnLista() {
|
let labelModel = connChart('warn')
|
labelModel.find((e, r) => {
|
r.forEach(e => {
|
this.tally.push({
|
label: e.equipmentcode,
|
value: e.equipmentcode
|
});
|
});
|
})
|
},
|
//围栏查询
|
atreLista() {
|
let labelModel = connChart('block')
|
labelModel.find((e, r) => {
|
r.forEach(e => {
|
this.atre.push({
|
label: e.equipmentcode,
|
value: e.equipmentcode
|
});
|
});
|
})
|
},
|
changeRange(e) {
|
var fence = connChart('fence');
|
fence.find(`name='${e}'`, (e, r) => {
|
this.fenceid=r[0].id
|
})
|
this.model.baoliu12= e;
|
this.value_range=e
|
|
},
|
connDB() {
|
this.labelModel = connChart('label')
|
}
|
},
|
mounted() {
|
if (this.tallyType == 'add') {
|
// this.model = this.addModel;
|
// console.log(this.model)
|
} else if (this.tallyType == 'update' || this.tallyType == 'allot') {
|
let list1 = []
|
let list2 = []
|
// list1.push()
|
if (this.tallyFormData.p_warn != '') {
|
this.value1 = this.tallyFormData.p_warn
|
this.value2 = this.tallyFormData.p_atre
|
}
|
|
var list = this.tallyFormData.p_warn
|
if (list != null) {
|
var dataList = list.split(';');
|
for (var i = 0; i < dataList.length; i++) {
|
dataList[i]
|
list1.push(dataList[i]);
|
}
|
this.value1 = list1
|
}
|
|
// this.value1 = list1
|
|
var list3 = this.tallyFormData.p_atre
|
if (list3 != null) {
|
var dataList1 = list3.split(';');
|
for (var i = 0; i < dataList1.length; i++) {
|
dataList1[i]
|
list2.push(dataList1[i]);
|
// this.atre.push({
|
// label: dataList1[i],
|
// value: dataList1[i]
|
// });
|
}
|
this.value2 = list2
|
}
|
|
this.model = this.tallyFormData;
|
this.value_range = this.model.baoliu12
|
this.value_bumen = this.model.p_department
|
if (this.tallyFormData.p_warn == '') {
|
this.value1 = this.tallyFormData.p_warn
|
this.value2 = this.tallyFormData.p_atre
|
}
|
// this.value1 = this.tallyFormData.p_warn
|
// this.value2 = this.tallyFormData.p_atre
|
}
|
this.connDB();
|
this.jiedepartment();
|
this.fenceLista();
|
this.warnLista();
|
this.atreLista();
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
// .uni-px-5 {
|
// padding-left: 10px;
|
// padding-right: 10px;
|
// }
|
|
// .uni-pb-5 {
|
// padding-bottom: 10px;
|
// }
|
.m-form {
|
position: fixed;
|
top: 50%;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
background-color: rgba(233, 233, 233, 0.95);
|
width: 60%;
|
display: flex;
|
flex-direction: column;
|
z-index: 99999;
|
}
|
|
.m-form-head {
|
width: 100%;
|
border-bottom: 1px solid #fff;
|
}
|
|
.m-form-head .u-icon {
|
float: right;
|
}
|
|
/deep/ .u-form-item__body__left__content__label {
|
color: #fff;
|
}
|
|
.m-form-label {
|
width: 80%;
|
margin: 0 auto;
|
margin-bottom: 0.5em;
|
}
|
|
input {
|
width: 50px;
|
}
|
|
.m-form-button-list {
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
margin-bottom: 1em;
|
}
|
|
.m-form-button-list .u-button {
|
width: 5em;
|
}
|
|
.m-form-button-list .u-button:nth-child(2),
|
.m-form-button-list .u-button:nth-child(3),
|
.m-form-button-list .u-button:nth-child(4) {
|
margin-top: 2em;
|
}
|
</style>
|
