Project-Annex/operationSupport/src/views/facilityInspections/popups/add.vue

<template>
    <zz-form :cols="formCols" :data="formData" :rules="formRules" labelWidth="120" ref="form">
        <template slot="communityId">
            <el-select class="width65" v-model="formData.communityId" clearable>
                <el-option
                    :label="item.communityName"
                    :value="item.id"
                    v-for="item in $store.getters['getAreaSelect']"
                    :key="item.id"
                ></el-option>
            </el-select>
        </template>
        <template slot="cameraSettings">
            <el-select class="width65" v-model="formData.cameraSettings" clearable>
                <el-option label="是" :value="1"></el-option>
                <el-option label="否" :value="0"></el-option>
            </el-select>
        </template>

        <template slot="typeValue">
            <el-cascader
                ref="typeValue"
                v-model="formData.typeValue"
                :props="defaultProps"
                :options="deviceArr"
                @change="deviceArrToggle"
            ></el-cascader>
            <div style="text-align: center; margin-top: 20px">
                <el-transfer
                    style="text-align: left; display: inline-block"
                    v-model="formData.deviceIds"
                    filterable
                    :props="{
                        key: 'id',
                        label: 'deviceName'
                    }"
                    :titles="['待选列表', '已选列表']"
                    @change="handleChange"
                    :data="devicesArr"
                >
                </el-transfer>
            </div>
        </template>

        <el-date-picker
            class="width100"
            slot="startDate"
            v-model="effectiveDate"
            value-format="yyyy-MM-dd "
            type="daterange"
            range-separator="至"
            start-placeholder="选择开始日期"
            end-placeholder="选择结束日期"
            @change="effectiveDateToggle"
            :editable="false"
        ></el-date-picker>
        <el-cascader
            ref="userName"
            v-model="formData.peopleId"
            :props="defaultProps"
            slot="peopleId"
            :options="findUser"
            @change="findUserToggle"
        ></el-cascader>
    </zz-form>
</template>
<script >
export default {
    props: ['params'],
    data() {
        return {
            formData: {
                communityId: '',
                inspectionName: '',
                cameraSettings: '',
                peopleId: '',
                peopleName: '',
                startDate: '',
                endDate: '',
                deviceIds: [],
                type: '',
                typeValue: '',
                remark: ''
            },

            formRules: {
                communityId: [this.$valid.selectRequired('社区')],
                peopleId: [this.$valid.selectRequired('巡检人员')],
                startDate: [this.$valid.selectRequired('巡检时间')],
                inspectionName: [this.$valid.inputRequired('巡检计划名称')],
                address: 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();
                        }
                    }
                }),
                repairName: 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();
                        }
                    }
                }),
                typeValue: [this.$valid.selectRequired('设备/设施类型')]
            },
            formCols: [
                [
                    {
                        label: '所属社区',
                        prop: 'communityId',
                        slot: 'communityId'
                    },
                    {
                        label: '巡检计划名称',
                        prop: 'inspectionName',
                        input: true
                    },
                    {
                        label: '设备/设施类型',
                        prop: 'typeValue',
                        slot: 'typeValue'
                    },
                    {
                        label: '巡检时间',
                        prop: 'startDate',
                        slot: 'startDate'
                    },
                    {
                        label: '巡检人员',
                        prop: 'peopleId',
                        slot: 'peopleId'
                    },
                    {
                        label: '拍照要求',
                        prop: 'cameraSettings',
                        slot: 'cameraSettings'
                    },
                    {
                        label: ' 备注信息',
                        prop: 'remark',
                        maxlength: '100',
                        rows: 3,
                        textarea: true
                    }
                ]
            ],
            findUser: [],
            deviceArr: [],
            devicesArr: [],
            defaultProps: {
                value: 'id', // 唯一标识
                label: 'label', // 标签显示
                children: 'children',
                emitPath: false
            },
            effectiveDate: []
        };
    },

    methods: {
        submit() {
            new Promise((resolve) => {
                this.$refs.form.validate(resolve);
            }).then(() => {
                var loading = this.$loading();
                let url = '/sc-community/inspection/add';

                if (this.params.todo === 'edit') {
                    url = '/sc-community/inspection/update';
                }
                this.$http
                    .post(url, this.formData)
                    .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();
                    });
            });
        },

        findUserToggle() {
            this.formData.peopleName = this.$refs.userName.getCheckedNodes()[0].label;
        },
        deviceArrToggle() {
            this.formData.type = this.$refs.typeValue.getCheckedNodes()[0].data.type;
            this.getTypes();
        },
        getTypes() {
            this.$http
                .get('/sc-community/inspection/getDevices', { type: this.formData.type, typeId: this.formData.typeValue })
                .then(({ data, msg }) => {
                    this.devicesArr = data;
                });
        },
        handleChange(e) {
            console.log(this.rightChecked);
        },
        effectiveDateToggle(va) {
            let arr = va;
            if (!arr) {
                arr = ['', ''];
            }
            this.formData.startDate = arr[0];
            this.formData.endDate = arr[1];
        },
        getDetails(id, resolve) {
            this.$http.get('/sc-community/inspection/find/' + id).then(({ data, msg }) => {
                const {
                    communityId,
                    inspectionName,
                    cameraSettings,
                    peopleId,
                    peopleName,
                    startDate,
                    endDate,
                    remark,
                    type,
                    typeValue,
                    id
                } = data;
                this.formData = {
                    communityId: communityId,
                    inspectionName: inspectionName,
                    cameraSettings: cameraSettings,
                    peopleId: peopleId,
                    peopleName: peopleName,
                    startDate: startDate,
                    endDate: endDate,
                    deviceIds: [],
                    type: type,
                    typeValue: typeValue,
                    remark: remark,
                    id: id
                };
                this.effectiveDate = [data.startDate, data.endDate];
                resolve && resolve(true);
            });
        },
        getSelectDevice(id) {
            this.$http.get('/sc-community/inspection/getInspectionDevices?id=' + id).then(({ data, msg }) => {
                if (!!data && data.length > 0) {
                    let deviceIds = [];
                    data.map((item) => {
                        deviceIds.push(item.deviceId);
                    });
                    this.formData.deviceIds = deviceIds;
                }
            });
        }
    },
    created() {
        this.deviceArr = this.params.deviceArr;
        this.findUser = this.params.arrData;
        if (!!this.params.data && !!this.params.data.id) {
            new Promise((resolve) => {
                this.getDetails(this.params.data.id, resolve);
            }).then((_) => {
                this.getTypes();
                this.getSelectDevice(this.params.data.id);
            });
        }
    }
};
</script>
<style scoped  lang='scss' scoped>
/deep/ .el-date-editor .el-range-separator {
    padding: 0;
}
</style>