|
@@ -0,0 +1,396 @@
|
|
|
+<template >
|
|
|
+ <div class="addAccess">
|
|
|
+ <el-form ref="form" :model="formData" :rules="formRules" label-width="110px">
|
|
|
+ <el-form-item label="所属社区" prop="communityId">
|
|
|
+ <el-select v-model="formData.communityId" placeholder="选择社区" clearable @change="buildingNameList(formData.communityId)">
|
|
|
+ <el-option v-for="(item, index) in communityArr" :key="index" :label="item.communityName" :value="item.id"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="设备类型" prop="deviceType">
|
|
|
+ <el-select placeholder="请选择设备类型" v-model="formData.deviceType">
|
|
|
+ <el-option label="微信" :value="1"></el-option>
|
|
|
+ <el-option label="支付宝" :value="2"></el-option>
|
|
|
+ <el-option label="现金" :value="3"></el-option>
|
|
|
+ <el-option label="其他" :value="5"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="设备编号" prop="deviceNo">
|
|
|
+ <el-input type="text" maxlength="100" placeholder="请输入设备编号" v-model="formData.deviceNo"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="设备名称" prop="deviceName">
|
|
|
+ <el-input type="text" maxlength="100" placeholder="请输入设备名称" v-model="formData.deviceName"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="门禁机类型" required>
|
|
|
+ <el-radio-group v-model="formData.gateType">
|
|
|
+ <el-radio :label="1">围墙机</el-radio>
|
|
|
+ <el-radio :label="2">单元机</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="进出门类型" required>
|
|
|
+ <el-radio-group v-model="formData.accessType">
|
|
|
+ <el-radio :label="1">进出门</el-radio>
|
|
|
+ <el-radio :label="2">进门</el-radio>
|
|
|
+ <el-radio :label="3">出门</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="安装方位" required>
|
|
|
+ <el-radio-group v-model="formData.installedLocation">
|
|
|
+ <el-radio :label="1">楼面</el-radio>
|
|
|
+ <el-radio :label="2">地下室</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <template v-if="formData.gateType == 1">
|
|
|
+ <el-form-item v-for="(item, index) in formData.gateUnitDtoList" :key="index" label="所属单元" required>
|
|
|
+ <div class="form-item-flex">
|
|
|
+ <el-form-item
|
|
|
+ :prop="`buildingId${index}`"
|
|
|
+ :rules="buildingIdRules('楼栋', item.buildingId)"
|
|
|
+ class="form-item-flex-input"
|
|
|
+ >
|
|
|
+ <el-select v-model="item.buildingId" placeholder="请选择楼栋" clearable @change="unitNameList(item.buildingId)">
|
|
|
+ <el-option
|
|
|
+ v-for="(item, index) in buildingList"
|
|
|
+ :key="index"
|
|
|
+ :label="item.buildingName"
|
|
|
+ :value="item.id"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ <!-- <el-select placeholder="请选择楼栋" v-model="item.buildingId">
|
|
|
+ <el-option label="微信" :value="1"></el-option>
|
|
|
+ <el-option label="支付宝" :value="2"></el-option>
|
|
|
+ <el-option label="现金" :value="3"></el-option>
|
|
|
+ <el-option label="其他" :value="5"></el-option>
|
|
|
+ </el-select> -->
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item :prop="`unitName${index}`" :rules="buildingIdRules('单元', item.unitName)" class="form-item-flex-input">
|
|
|
+ <el-select v-model="item.unitName" placeholder="请选择楼栋" clearable>
|
|
|
+ <el-option
|
|
|
+ v-for="(item, index) in unitList"
|
|
|
+ :key="index"
|
|
|
+ :label="item.unitName"
|
|
|
+ :value="item.unitName"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ <!-- <el-select placeholder="请选择单元" v-model="item.unit">
|
|
|
+ <el-option label="微信" :value="1"></el-option>
|
|
|
+ <el-option label="支付宝" :value="2"></el-option>
|
|
|
+ <el-option label="现金" :value="3"></el-option>
|
|
|
+ <el-option label="其他" :value="5"></el-option>
|
|
|
+ </el-select> -->
|
|
|
+ </el-form-item>
|
|
|
+ <div class="sunm" @click="addUnit">
|
|
|
+ <i class="zoniot_font zoniot-icon-tianjia1"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </template>
|
|
|
+ <el-form-item label="门禁位置" prop="address">
|
|
|
+ <el-input type="text" maxlength="100" placeholder="请输入门禁位置" v-model="formData.address"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="门禁机经纬度" prop="longLat" :rules="longLatRules('经纬度', longLat)">
|
|
|
+ <el-input type="text" maxlength="100" placeholder="请选择门禁机经纬度" disabled v-model="longLat">
|
|
|
+ <i slot="suffix" class="zoniot_font zoniot-icon-dizhi" @click="addressQueryClick"></i>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="门禁机照片">
|
|
|
+ <div class="imgdis-div" v-show="formData.picture">
|
|
|
+ <i class="el-icon-delete" @click="delformphoto"></i>
|
|
|
+ <img :src="envConfig.baseImgApi + formData.picture" alt="" width="60" height="60" />
|
|
|
+ </div>
|
|
|
+ <el-upload
|
|
|
+ v-show="!formData.picture"
|
|
|
+ :headers="token"
|
|
|
+ ref="uploaduserlogo"
|
|
|
+ class="mini-upload"
|
|
|
+ :limit="1"
|
|
|
+ action="/sc-user-center/user/addUserPhoto"
|
|
|
+ list-type="picture-card"
|
|
|
+ :on-success="uploadsuccess"
|
|
|
+ :auto-upload="true"
|
|
|
+ name="avatarfile"
|
|
|
+ >
|
|
|
+ <i slot="default" class="el-icon-plus"></i>
|
|
|
+ <div slot="file" slot-scope="{ file }">
|
|
|
+ <el-image class="el-upload-list__item-thumbnail" :src="file.url" fit="cover"></el-image>
|
|
|
+ <span class="el-upload-list__item-actions">
|
|
|
+ <span class="el-upload-list__item-delete" @click="handleRemove(file)">
|
|
|
+ <i class="el-icon-delete"></i>
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </el-upload>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <!--地图详情地址弹出框-->
|
|
|
+ <el-dialog title="选择地址" :append-to-body="true" :visible.sync="mapPopUpStatus" width="50vw">
|
|
|
+ <map-select ref="mapSelect"></map-select>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="closeMap" class="reset">取消</el-button>
|
|
|
+ <el-button type="primary" @click="submitMap">保存</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script >
|
|
|
+import envConfig from '@/config';
|
|
|
+import mapSelect from './mapSelect.vue';
|
|
|
+export default {
|
|
|
+ props: ['params'],
|
|
|
+ components: {
|
|
|
+ mapSelect
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ cols: [
|
|
|
+ {
|
|
|
+ label: '订单号',
|
|
|
+ prop: 'billNumber'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '费用名称',
|
|
|
+ prop: 'chargeName',
|
|
|
+ width: '200'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '计费日期',
|
|
|
+ prop: 'payBeginTime',
|
|
|
+ slot: 'payBeginTime',
|
|
|
+ width: '150'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '费用金额(元)',
|
|
|
+ prop: 'amount'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '滞纳金(元)',
|
|
|
+ prop: 'lateFee'
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ label: '应收金额(元)',
|
|
|
+ prop: 'receivableAmount'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ tabList: [],
|
|
|
+ formData: {
|
|
|
+ communityId: '',
|
|
|
+ deviceType: '',
|
|
|
+ deviceNo: '',
|
|
|
+ deviceName: '',
|
|
|
+ gateType: 1,
|
|
|
+ accessType: 1,
|
|
|
+ installedLocation: 1,
|
|
|
+ address: '',
|
|
|
+ picture: '',
|
|
|
+ gateUnitDtoList: [
|
|
|
+ {
|
|
|
+ buildingId: '',
|
|
|
+ unitName: ''
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ formRules: {
|
|
|
+ communityId: [this.$valid.selectRequired('所属社区')],
|
|
|
+ deviceType: [this.$valid.selectRequired('设备类型')],
|
|
|
+ deviceNo: [this.$valid.inputRequired('设备编号')],
|
|
|
+ deviceName: [this.$valid.inputRequired('设备名称')],
|
|
|
+ address: [this.$valid.inputRequired('门禁位置')],
|
|
|
+ longLat: this.$valid.custome({
|
|
|
+ validator(rule, value, cb) {
|
|
|
+ const rl = rule;
|
|
|
+ let regExp = /^.{1,20}$/;
|
|
|
+ if (!value) {
|
|
|
+ rl.message = '请选择经纬度';
|
|
|
+ cb(new Error());
|
|
|
+ } else if (!regExp.test(value)) {
|
|
|
+ rl.message = '不能超过20个字';
|
|
|
+ cb(new Error());
|
|
|
+ } else {
|
|
|
+ cb();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ envConfig: envConfig,
|
|
|
+ token: {
|
|
|
+ [localStorage.getItem('SC_token') && 'Authorization']: 'Bearer ' + localStorage.getItem('SC_token')
|
|
|
+ },
|
|
|
+ mapPopUpStatus: false,
|
|
|
+ longLat: '',
|
|
|
+ communityArr: [],
|
|
|
+ buildingList: [],
|
|
|
+ unitList: []
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getorgTree() {
|
|
|
+ this.$http
|
|
|
+ .get('/sc-community/assets/community/list')
|
|
|
+ .then((data) => {
|
|
|
+ this.communityArr = data.data;
|
|
|
+ })
|
|
|
+
|
|
|
+ .catch(function () {});
|
|
|
+ },
|
|
|
+ //查询楼栋下拉列表
|
|
|
+ buildingNameList(id) {
|
|
|
+ this.buildingList = [];
|
|
|
+ this.$http.post('/sc-community/assets/building/list/building', { communityId: id }).then(({ data, status, msg }) => {
|
|
|
+ if (0 === status) {
|
|
|
+ this.buildingList = data;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ unitNameList(id) {
|
|
|
+ this.unitList = [];
|
|
|
+ this.$http.get('/sc-community/assets/building/house/find', { id: id }).then((res) => {
|
|
|
+ if (res.status == 0) {
|
|
|
+ if (res.data.buildingUnitList.length != 0) {
|
|
|
+ this.unitList = res.data.buildingUnitList;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ buildingIdRules(name, val) {
|
|
|
+ return {
|
|
|
+ required: true,
|
|
|
+ message: `${name}不能为空`,
|
|
|
+ trigger: 'change',
|
|
|
+ validator(rule, value, cb) {
|
|
|
+ if (!val) {
|
|
|
+ cb(new Error());
|
|
|
+ } else {
|
|
|
+ cb();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ longLatRules(name, val) {
|
|
|
+ return {
|
|
|
+ required: true,
|
|
|
+ message: `${name}不能为空`,
|
|
|
+ trigger: 'change',
|
|
|
+ validator(rule, value, cb) {
|
|
|
+ if (!val) {
|
|
|
+ cb(new Error());
|
|
|
+ } else {
|
|
|
+ cb();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ submit() {
|
|
|
+ this.$refs.form.validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ let billList = this.tabList.map((item, index) => {
|
|
|
+ return {
|
|
|
+ amount: item.amount,
|
|
|
+ billId: item.id
|
|
|
+ };
|
|
|
+ });
|
|
|
+ let installData = {
|
|
|
+ payType: this.formData.payType,
|
|
|
+ remark: this.formData.remark,
|
|
|
+ billList: billList
|
|
|
+ };
|
|
|
+ var loading = this.$loading();
|
|
|
+ this.$http
|
|
|
+ .post('/sc-gate-web/gate/add', installData)
|
|
|
+ .then(({ status, msg }) => {
|
|
|
+ if (status == 0) {
|
|
|
+ this.$message.success(msg);
|
|
|
+ this.params.callback();
|
|
|
+ this.$emit('close');
|
|
|
+ } else {
|
|
|
+ this.$message.error(msg);
|
|
|
+ }
|
|
|
+ loading.close();
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ loading.close();
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ delformphoto() {
|
|
|
+ this.formData.picture = '';
|
|
|
+ },
|
|
|
+ addressQueryClick() {
|
|
|
+ this.mapPopUpStatus = true;
|
|
|
+ },
|
|
|
+ handleRemove(file) {
|
|
|
+ this.$refs.uploaduserlogo.clearFiles();
|
|
|
+ },
|
|
|
+ uploadsuccess(response, file, fileList) {
|
|
|
+ if (0 === response.status) {
|
|
|
+ this.formData.picture = response.data;
|
|
|
+ }
|
|
|
+ this.$refs.uploaduserlogo.clearFiles();
|
|
|
+ },
|
|
|
+ addUnit() {
|
|
|
+ this.formData.gateUnitDtoList.push({
|
|
|
+ buildingId: '',
|
|
|
+ unit: ''
|
|
|
+ });
|
|
|
+ },
|
|
|
+ closeMap() {
|
|
|
+ this.mapPopUpStatus = false;
|
|
|
+ },
|
|
|
+ submitMap() {
|
|
|
+ const { lat, lng } = this.$refs.mapSelect.thisMapPot;
|
|
|
+ this.longLat = `${lng},${lat}`;
|
|
|
+ this.closeMap();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getorgTree();
|
|
|
+ // this.chiData = this.params.chiData;
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+@import '@assets/css/public-style.scss';
|
|
|
+::v-deep.el-upload--picture-card {
|
|
|
+ width: rem(80);
|
|
|
+ height: rem(80);
|
|
|
+ line-height: rem(90);
|
|
|
+}
|
|
|
+
|
|
|
+/deep/.el-dialog__body {
|
|
|
+ padding: 0 rem(20);
|
|
|
+}
|
|
|
+.imgdis-div {
|
|
|
+ width: rem(80);
|
|
|
+ height: rem(80);
|
|
|
+ position: relative;
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+}
|
|
|
+.imgdis-div i {
|
|
|
+ display: none;
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+}
|
|
|
+.imgdis-div:hover i {
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+.form-item-flex {
|
|
|
+ display: flex;
|
|
|
+ .form-item-flex-input {
|
|
|
+ width: rem(165) !important;
|
|
|
+ margin-left: rem(20);
|
|
|
+ margin-bottom: 0 !important;
|
|
|
+ &:first-child {
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .sunm {
|
|
|
+ margin-left: rem(10);
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|