addDevice.vue 7.4 KB
<template>
    <el-dialog
      :title="$t('dialog.addDevice')"
      class="manage-dialog"
      :visible.sync="addDialogVisible"
      :close-on-click-modal="false"
      @open="dialogOpen(addForm)"
      @close="addDialogClose">
        <el-form :model="addForm" status-icon :rules="rules" ref="addForm">
            <el-form-item :label="$t('dialog.number')" prop="serialnum">
                <el-input v-model="addForm.serialnum"></el-input>
                <i class="error-tip">*</i>
            </el-form-item>
            <el-form-item :label="$t('dialog.deviceName')" prop="name">
                <el-input v-model="addForm.name"></el-input>
            </el-form-item>
            <el-form-item :label="$t('table.channelNum')" prop="channelCount">
                <el-input v-model="addForm.channelCount"></el-input>
            </el-form-item>
            <el-form-item :label="$t('dialog.Mac')" prop="mac">
                <el-input v-model="addForm.mac"></el-input>
            </el-form-item>
            <el-form-item :label="$t('table.state')" prop="status">
                <el-select class="manage-sel" v-model="addForm.status" :placeholder="$t('pholder.state')">
                    <el-option :label="$t('pholder.stateA')" :value="1"></el-option>
                    <el-option :label="$t('pholder.stateB')" :value="0"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item :label="$t('table.localIP')" prop="localIp">
                <el-input v-model="addForm.localIp"></el-input>
            </el-form-item>
            <el-form-item :label="$t('table.extranet')" prop="wanIp">
                <el-input v-model="addForm.wanIp"></el-input>
            </el-form-item>
            <el-form-item :label="$t('dialog.swVersion')" prop="software">
                <el-input v-model="addForm.software"></el-input>
            </el-form-item>
            <el-form-item :label="$t('dialog.hwVersion')" prop="hardware">
                <el-input v-model="addForm.hardware"></el-input>
            </el-form-item>
            <el-form-item :label="$t('table.bloc')" prop="accountId">
                <el-select class="manage-sel" v-model="addForm.accountId" filterable :placeholder="$t('pholder.select')" @change="changeAddAccount" :no-data-text="$t('pholder.nodata')">
                    <el-option v-for="item in accountList" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
                <i class="error-tip">*</i>
            </el-form-item>
            <el-form-item :label="$t('table.square')" prop="mallId">
                <el-select class="manage-sel" v-model="addForm.mallId" filterable :placeholder="$t('pholder.select')" :no-data-text="$t('pholder.nodata')">
                    <el-option v-for="item in mallList" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
                <i class="error-tip">*</i>
            </el-form-item>
            <!-- <el-form-item label="描述">
                <el-input type="textarea" v-model="addForm.intro"></el-input>
            </el-form-item> -->
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="addDialogVisible = false" class="dialog-btn">{{ $t('dialog.cancel') }}</el-button>
            <el-button type="primary" @click="addSubmit('addForm')" class="dialog-btn dialog-confirm-btn">{{ $t('dialog.confirm') }}</el-button>
        </div>
    </el-dialog>
</template>

<script>
export default {
    data() {
        var validatorSerialnum = (rule, value, callback) => {
			// if (value === '') {
			// 	return callback(new Error('请输入设备序列号'));
			// } else 
			if (!value) {
				return callback(new Error('请输入设备序列号'));
			}
			this.$api.management.deviceList({
                serialnum: value,
                // _t: Date.parse(new Date()) / 1000
			})
				.then((res) => {
					if (res.data.data.length > 0) {
						if (res.data.data[0].mallId) {
							callback();
						} else {
							return callback(new Error('该设备序列号已绑定, 请重新输入'));
						}
					} else {
						callback();
					}
				})
				.catch((error) => { })
		};
        return {
            addDialogVisible: false,
            accountList: [],
            mallList: [],
            addForm: {
                serialnum: '',
                name: '',
                channelCount: '',
                mac: '',
                status: null,
                localIp: '',
                wanIp: '',
                software: '',
                hardware: '',
                accountId: '',
                mallId: ''
            },
            rules: {
				serialnum: [
					{ required: true, message: '请输入设备序列号', trigger: 'blur' }
				],
				accountId: [{
					required: true, message: '请选择集团', trigger: 'change'
				}],
				mallId: [{
					required: true, message: '请选择门店', trigger: 'change'
				}]
            },
            curMallId: null,
        }
    },
    created() {
    },
    methods: {
        dialogInit(mall_id) {
            this.curMallId = mall_id;
            this.addDialogVisible = true;
        },
        dialogOpen(formDatas) {
            this.getAccountList();
		},
        getAccountList() {
            this.accountList = [];
			this.$api.base.account({
                // _t: Date.parse(new Date()) / 1000
			})
				.then((data) => {
                    let result = data.data;
                    result.data.forEach(item => {
                        if(item.id == this.$cookie.get('accountId')) {
                            this.addForm.accountId = item.id;
                        }
                    })
                    this.accountList = result.data;
                    this.getMallList(this.addForm.accountId);
				})
				.catch((error) => { })
		},
        changeAddAccount(val) {
			this.getMallList(val)
		},
        getMallList(accountId) {
			this.mallList = [];
			this.addForm.mallId = '';
            if(!accountId) return;
			this.$api.base.mall({
                accountId: accountId,
                // status: 1,
                status_arr: '1,3'
                // _t: Date.parse(new Date()) / 1000
			},null,true)
				.then((data) => {
                    let result = data.data;
                    result.data.forEach(item => {
                        if(item.id == this.curMallId) {
                            this.addForm.mallId = item.id;
                        }
                    })
					this.mallList = result.data;
					if (this.mallList.length > 0) {
                        if(!this.curMallId) {
                            this.addForm.mallId = this.mallList[0].id;
                        }
						// this.editForm.mallId = this.mallList[0].id;
						// this.getFloorList(this.addForm.mallId)
					}
				})
				.catch((error) => { })
		},
        addSubmit(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					// this.addForm.accountId = this.$cookie.get('accountId');
					this.addForm.createUser = this.$cookie.get('userId');
					this.addForm.modifyUser = this.$cookie.get('userId');
                    this.$api.management.addDevice(this.addForm)
						.then((data) => {
							this.addDialogVisible = false;
							this.$parent.getTableData();
						})
						.catch((error) => { })
				} else {
					return false;
				}
			});
		},
        addDialogClose() {
			this.$refs.addForm.resetFields();
		},
    }
}
</script>