<template>
|
<div
|
class="page_status"
|
v-loading="loading"
|
element-loading-text="拼命加载中"
|
element-loading-spinner="el-icon-loading"
|
>
|
<v-header
|
title="用户列表"
|
:bar="bar"
|
search
|
@on-search="onSearch"
|
></v-header>
|
<el-button type="primary" size="small" @click.stop="clickHandle('add')"
|
>新增</el-button
|
>
|
<div class="tab">
|
<v-tool-table :trs="trs" :tds="tds">
|
<template v-slot:btn="item">
|
<div class="table_flex">
|
<!-- {{item.scope.id}} -->
|
<span class="col_primary" @click="onCheck(item.scope)">查看</span>
|
<span class="col_primary" @click="clickHandle('edit', item.scope)"
|
>编辑</span
|
>
|
<span class="col_primary" @click="clickHandle('delete', item.scope)"
|
>删除</span
|
>
|
<span class="col_primary" @click="clickHandle('SOS', item.scope)"
|
>设置SOS</span
|
>
|
</div>
|
</template>
|
</v-tool-table>
|
</div>
|
<v-tool-page :item="paged" @on-page="onPage"></v-tool-page>
|
<!-- 新增弹框 -->
|
<el-dialog
|
:title="dialogTitle"
|
:visible.sync="dialogVisible"
|
width="550px"
|
:before-close="handleCloseData"
|
append-to-body
|
>
|
<div>
|
<el-form
|
:model="form"
|
:rules="rules"
|
ref="ruleForm"
|
label-width="150px"
|
label-position="top"
|
:inline="true"
|
class="demo-ruleForm"
|
>
|
<el-form-item label="设备ID" prop="deviceId">
|
<el-input
|
class="input-width"
|
placeholder="请输入设备ID"
|
v-model.trim="form.deviceId"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="姓名" prop="name">
|
<el-input
|
class="input-width"
|
placeholder="请输入姓名"
|
v-model.trim="form.userName"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="年龄">
|
<el-input
|
class="input-width"
|
placeholder="请输入年龄"
|
v-model.trim="form.ageNum"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="性别:">
|
<div class="input-width">
|
<el-radio-group v-model="form.sex">
|
<el-radio label="男">男</el-radio>
|
<el-radio label="女">女</el-radio>
|
</el-radio-group>
|
</div>
|
</el-form-item>
|
<el-form-item label="身份证" prop="identityCard">
|
<el-input
|
class="input-width"
|
placeholder="请输入身份证"
|
v-model.trim="form.identityCard"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="居住住址" prop="address">
|
<el-input
|
class="input-width"
|
placeholder="请输入居住住址"
|
v-model.trim="form.address"
|
@focus="mapCheck"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="详细地址">
|
<el-input
|
class="input-width"
|
placeholder="请输入详细地址"
|
v-model.trim="form.detailAddress"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="设备绑定手机号">
|
<el-input
|
class="input-width"
|
placeholder="请输入设备绑定手机号"
|
v-model.trim="form.binPhone"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="紧急联系人">
|
<el-input
|
class="input-width"
|
placeholder="请输入紧急联系人"
|
v-model.trim="form.emergencyContact"
|
></el-input>
|
</el-form-item>
|
</el-form>
|
<div class="fl-cen">
|
<el-button size="small" @click="handleCloseData">取 消</el-button>
|
<el-button type="primary" :loading="btnloading" @click="submitHandle"
|
>确 定</el-button
|
>
|
</div>
|
</div>
|
</el-dialog>
|
<!-- SOS弹框 -->
|
<el-dialog
|
:title="dialogTitle"
|
:visible.sync="SOSdialogVisible"
|
width="350px"
|
:before-close="handleCloseSOS"
|
append-to-body
|
>
|
<div>
|
<el-form
|
:model="sosForm"
|
:rules="sosRules"
|
ref="sosForm"
|
label-width="150px"
|
label-position="top"
|
:inline="true"
|
class="demo-ruleForm"
|
>
|
<el-form-item label="SOS1：" prop="emergencyContact1">
|
<el-input
|
class="input-width"
|
placeholder="请输入sos手机号1"
|
v-model.trim="sosForm.emergencyContact1"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="SOS2：" prop="emergencyContact2">
|
<el-input
|
class="input-width"
|
placeholder="请输入sos手机号2"
|
v-model.trim="sosForm.emergencyContact2"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="SOS3：" prop="emergencyContact3">
|
<el-input
|
class="input-width"
|
placeholder="请输入sos手机号3"
|
v-model.trim="sosForm.emergencyContact3"
|
></el-input>
|
</el-form-item>
|
</el-form>
|
<div class="fl-cen">
|
<el-button size="small" @click="handleCloseSOS">取 消</el-button>
|
<el-button
|
type="primary"
|
:loading="btnloading"
|
@click="sosSubmitHandle"
|
>确 定</el-button
|
>
|
</div>
|
</div>
|
</el-dialog>
|
<!-- 地图选择 -->
|
<el-dialog
|
title="设置居住地址"
|
:visible.sync="dialogVisibleMap"
|
:before-close="handleCloseMap"
|
append-to-body
|
>
|
<MapBox ref="mapContent" @setLocation="setLocation" />
|
<div style="text-align: center; margin-top: 20px">
|
<el-button @click="handleCloseMap">取 消</el-button>
|
<el-button type="primary" @click="mapComfirm">确 定</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import { isvalidPhone, isIdcard } from "../../assets/js/fromValidate";
|
import MapBox from "../../components/map/map.vue";
|
|
import { mapState } from "vuex";
|
var validPhone = (rule, value, callback) => {
|
if (!value) {
|
callback(new Error("请输入电话号码"));
|
} else if (!isvalidPhone(value)) {
|
callback(new Error("请输入正确的11位手机号码"));
|
} else {
|
callback();
|
}
|
};
|
var sosValidPhone = (rule, value, callback) => {
|
if (value && !isvalidPhone(value)) {
|
callback(new Error("请输入正确的11位手机号码"));
|
} else {
|
callback();
|
}
|
};
|
var validIdcrad = (rule, value, callback) => {
|
if (!value) {
|
callback(new Error("请输入身份证号码"));
|
} else if (!isIdcard(value)) {
|
callback(new Error("请输入正确的身份证号码"));
|
} else {
|
callback();
|
}
|
};
|
|
export default {
|
props: {},
|
components: { MapBox },
|
data() {
|
return {
|
bar: [
|
{ title: "姓名", name: "userName" },
|
{ title: "绑定手机号", name: "phone" }
|
],
|
trs: [
|
{ text: "序号", val: "index", width: "50px" },
|
{ text: "设备ID", val: "deviceId" },
|
{ text: "姓名", val: "userName", width: "80px" },
|
{ text: "年龄", val: "ageNum", width: "40px" },
|
{ text: "性别", val: "sex", width: "40px" },
|
{ text: "身份证", val: "identityCard" },
|
{ text: "居住地址", val: "address" },
|
{ text: "详细地址", val: "detailAddress" },
|
{ text: "设备绑定手机号", val: "binPhone" },
|
{ text: "紧急联系人", val: "emergencyContact" },
|
{ text: "操作", val: "btn" }
|
],
|
tds: [],
|
paged: { page: 0, total: 0, r: 0, limit: 10 },
|
labelPosition: "top",
|
SOSdialogVisible: false,
|
dialogVisible: false,
|
dialogTitle: "新增",
|
loading: false,
|
btnloading: false,
|
dialogVisibleMap: false,
|
os: {},
|
search: {},
|
sosForm: {
|
deviceId: "",
|
emergencyContact1: "",
|
emergencyContact2: "",
|
emergencyContact3: ""
|
},
|
form: {
|
deviceId: "",
|
userName: "",
|
ageNum: "",
|
sex: "",
|
identityCard: "",
|
binPhone: "",
|
address: "",
|
detailAddress: "",
|
emergencyContact: ""
|
}, // 表单
|
sosRules: {
|
emergencyContact1: [
|
{
|
required: true,
|
// message: "请输入设备绑定手机号",
|
validator: validPhone,
|
trigger: "blur"
|
}
|
],
|
emergencyContact2: [
|
{
|
required: false,
|
// message: "请输入设备绑定手机号",
|
validator: sosValidPhone,
|
trigger: "blur"
|
}
|
],
|
emergencyContact3: [
|
{
|
required: false,
|
// message: "请输入设备绑定手机号",
|
validator: sosValidPhone,
|
trigger: "blur"
|
}
|
]
|
},
|
rules: {
|
userName: [
|
{
|
required: true,
|
message: "请输入姓名",
|
trigger: "blur"
|
}
|
],
|
deviceId: [
|
{
|
required: true,
|
message: "请输入设备ID",
|
trigger: "blur"
|
}
|
],
|
identityCard: [
|
{
|
required: true,
|
|
validator: validIdcrad,
|
trigger: "blur"
|
}
|
],
|
address: [
|
{
|
required: true,
|
message: "请输入地址",
|
trigger: "blur"
|
}
|
],
|
binPhone: [
|
{
|
required: true,
|
// message: "请输入设备绑定手机号",
|
validator: validPhone,
|
trigger: "blur"
|
}
|
]
|
} // 表单验证
|
};
|
},
|
computed: {
|
...mapState({ vuex_page: "pageReset" })
|
},
|
watch: {
|
vuex_page: {
|
handler(n) {
|
if (n.page === this.$route.path) {
|
this.paged.page = 1;
|
this.init();
|
}
|
},
|
deep: true
|
}
|
},
|
methods: {
|
// 置顶
|
onSearch(v) {
|
this.search = demo.copy(v);
|
this.paged.page = 1;
|
this.init();
|
},
|
// 分页点击
|
onPage(v) {
|
if (v.page === this.paged.page && v.page && !v.reset) {
|
return 0;
|
}
|
this.paged.page = v.page;
|
this.paged.limit = v.limit;
|
this.init();
|
},
|
// 获取数据
|
init() {
|
let user = demo.$session.get("user") || {};
|
let v = demo.copy(
|
Object.assign(this.search, {
|
pageNum: this.paged.page,
|
pageSize: this.paged.limit,
|
communityId: user.communityId
|
})
|
);
|
this.$api.get("JinhuibraceletApi/getData", v, e => {
|
this.paged.total = e.total;
|
this.paged.r++;
|
this.tds = e.records || [];
|
e.records.map((item, index) => {
|
item.index = (this.paged.page - 1) * this.paged.limit + index + 1;
|
item.sex = item.sex === "1" ? "男" : "女";
|
});
|
});
|
},
|
onCheck(item) {
|
this.$router.push({
|
path: "/jh_OldManWristband_Detail",
|
query: item
|
});
|
},
|
mergeFunc(prev, next) {
|
return next === undefined ? prev : next;
|
},
|
clickHandle(type, row) {
|
console.log(row);
|
switch (type) {
|
case "add": {
|
this.dialogTitle = "新增";
|
this.dialogVisible = true;
|
break;
|
}
|
case "edit": {
|
// this.$api.get(
|
// "comActHelpPeople/getComActHelpPeopleById?id=" + row.id,
|
// {},
|
// (e) => {
|
// // this.form = objCopyPro(this.form, row);
|
// this.form = row;
|
// console.log(this.form);
|
// this.dialogTitle = "编辑";
|
// this.dialogVisible = true;
|
// }
|
// );
|
this.form = Object.keys(this.form).reduce((acc, key) => {
|
acc[key] = this.mergeFunc(this.form[key], row[key]);
|
return acc;
|
}, {});
|
|
// this.form = { ...this.form, ...row };
|
console.log("this.form==" + JSON.stringify(this.form));
|
this.dialogTitle = "编辑";
|
this.dialogVisible = true;
|
break;
|
}
|
case "delete": {
|
this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning"
|
}).then(() => {
|
this.deleteDevice(row);
|
});
|
|
break;
|
}
|
case "SOS": {
|
// this.sosForm = { ...this.sosForm, ...row };
|
this.sosForm = Object.keys(this.sosForm).reduce((acc, key) => {
|
acc[key] = this.mergeFunc(this.sosForm[key], row[key]);
|
return acc;
|
}, {});
|
console.log("this.sosForm==" + JSON.stringify(this.sosForm));
|
this.sosForm.emergencyContact1 = row.sgtel1;
|
this.sosForm.emergencyContact2 = row.sgtel2;
|
this.sosForm.emergencyContact3 = row.sgtel3;
|
this.dialogTitle = "设置SOS";
|
this.SOSdialogVisible = true;
|
break;
|
}
|
default: {
|
break;
|
}
|
}
|
},
|
deleteDevice(item) {
|
this.$api.del(
|
"JinhuibraceletApi/delectData?id=" + item.deviceId,
|
"",
|
e => {
|
demo.toast("删除成功");
|
this.handleCloseData();
|
this.init();
|
}
|
);
|
},
|
submitHandle() {
|
this.$refs["ruleForm"].validate(val => {
|
if (val) {
|
if (this.form.sex && this.form.sex.length) {
|
this.form.sex = this.form.sex === "男" ? "1" : "2";
|
}
|
let user = demo.$session.get("user") || {};
|
if (user.communityId) {
|
this.form.communityId = user.communityId;
|
}
|
console.log("this.form" + JSON.stringify(this.form));
|
if (this.dialogTitle === "新增") {
|
// return;
|
this.$api.post(
|
"JinhuibraceletApi/addBraceletUser",
|
this.form,
|
e => {
|
demo.toast("新增成功");
|
this.handleCloseData();
|
this.init();
|
}
|
);
|
} else if (this.dialogTitle === "编辑") {
|
this.$api.post("JinhuibraceletApi/upBracelet", this.form, e => {
|
console.log("e====" + JSON.stringify(e));
|
|
demo.toast("编辑成功");
|
this.handleCloseData();
|
this.init();
|
});
|
}
|
}
|
});
|
},
|
sosSubmitHandle() {
|
this.$refs["sosForm"].validate(val => {
|
if (val) {
|
this.loading = true;
|
this.handleCloseSOS();
|
console.log("this.sosForm" + JSON.stringify(this.sosForm));
|
// bracelet/setSOS
|
this.$api.post("JinhuibraceletApi/setSOS", this.sosForm, e => {
|
this.loading = false;
|
// demo.toast(e.msg);
|
demo.toast("设置成功");
|
this.init();
|
});
|
}
|
});
|
},
|
handleCloseSOS() {
|
this.SOSdialogVisible = false;
|
},
|
handleCloseData() {
|
// this.$refs["ruleForm"].resetFields(); // 重置表单
|
this.form = {
|
deviceId: "",
|
userName: "",
|
ageNum: "",
|
sex: "",
|
identityCard: "",
|
binPhone: "",
|
address: "",
|
emergencyContact: ""
|
};
|
this.dialogVisible = false;
|
},
|
mapCheck() {
|
console.log("mapcheck");
|
this.dialogVisibleMap = true;
|
this.$nextTick(() => {
|
this.$refs.mapContent.getLocation({
|
val: this.form.address,
|
l: this.form.addLat,
|
r: this.form.addLng
|
});
|
});
|
},
|
mapComfirm() {
|
if (this.positionData.addr) {
|
this.form.address = this.positionData.addr;
|
this.form.addLat = this.positionData.lat;
|
this.form.addLng = this.positionData.lng;
|
}
|
this.dialogVisibleMap = false;
|
this.positionData = {};
|
},
|
setLocation(data) {
|
this.positionData = data;
|
},
|
handleCloseMap() {
|
this.dialogVisibleMap = false;
|
this.positionData = {};
|
}
|
},
|
mounted() {
|
//查询动态分类列表
|
// this.queryDynamic();
|
this.search = { userName: "", phone: "" };
|
}
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.page_status {
|
overflow-y: auto;
|
.add,
|
.tab {
|
margin-top: 10px;
|
margin-bottom: 10px;
|
}
|
}
|
.el-form-item {
|
width: 230px;
|
}
|
</style>
|
