energy_app/src/views/enterprise/fengjiSystemAddEdit.vue

<template>
    <div>
        <!-- <Header :title="title" @onClickLeft="onClickLeft" /> -->
        <van-form ref="form" @submit="handleClick">
            <div class="yearenergy">
                <div class="year-main">
                    <div class="nengyuan">
                        <van-cell-group>
                            <van-field v-model="form.systemModel" required :rules="[{  required: true },{pattern:/^.{2,20}$/, message:'2≤型号长度≤20'}]" label="风机型号" placeholder="请输入风机型号" maxlength="20" />
                            <van-field v-model="form.motorModel" required :rules="[{  required: true },{pattern:/^.{2,20}$/, message:'2≤型号长度≤20'}]" label="电机型号" placeholder="请输入电机型号" maxlength="20"/>
                            <van-field label="设备类型" v-model="form.equipTypeName" required :rules="[{  required: true }]" placeholder="请选择设备类型" is-link  readonly @click="handelClickOptionShow('equipType','03')" />
                            <van-field label="设备能效等级" v-model="form.equipEfficiencyName" required :rules="[{  required: true }]" placeholder="请选择设备能效等级" is-link  readonly @click="handelClickOptionShow('equipEfficiency')" />
                            <van-field v-input.numNo0 v-model="form.systemNum" required :rules="[{  required: true }]" type="number" label="台数（台）" placeholder="请输入台数" />
                            <van-field v-input.floatNo0 v-model="form.ratedPowerValue" required :rules="[{  required: true }]" type="number" label="单台额定功率（kW）" placeholder="请输入" @blur="handelChange('ratedPowerValue',20,'单台额定功率')"/>
                            <van-field v-input.float v-model="form.frequencyPerValue" required :rules="[{  required: true }]" type="number" label="变频占比（%）" placeholder="请输入" @input="handelChangeNumber('frequencyPerValue','变频占比')"  />
                            <van-field v-input.num v-model="form.absoleteElecNum" type="number" label="淘汰电机数量" placeholder="请输入" />
                            <van-field v-input.num v-model="form.absoleteNum" type="number" label="淘汰风机数量" placeholder="请输入" />
                            <van-field v-input.floatNo0 v-model="form.efficiency" type="number" label="风机效率（%）" placeholder="请输入"  @input="handelChangeNumber('efficiency','风机效率')" />
                            <van-field v-input.num v-model="form.userYear" type="number" label="投入年份" placeholder="请选择投入年份" is-link  readonly @click="handelClickYear('userYear', 'SET_CON_YEAR')" />
                            <van-field label="设备生产日期" v-model="form.produceDate" required :rules="[{  required: true }]" placeholder="请选择设备生产日期" is-link  readonly @click="datePicker = true" />
                            <van-field v-input.num v-model="form.runHours" type="number" label="累计运行小时数" required :rules="[{  required: true }]" placeholder="请输入" />
                        </van-cell-group>
                    </div>
                </div>
                <div class="btn">
                    <van-button size="large" class="faqi" native-type="submit">
                        保存
                    </van-button>
                </div>
            </div>
        </van-form>
        <van-overlay :show="show">
            <div class="wrapper" @click.stop>
                <div class="block">
                    <van-loading size="24px" color="#34baae" vertical>加载中...</van-loading>
                </div>
            </div>
        </van-overlay>
        <Year :show="yearShow" :num="1" @onConfirmYear="onConfirmYear" @onCancelYear="onCancelYear" />
        <!-- 年份选择 -->
        <van-popup v-model="datePicker" position="bottom">
            <van-datetime-picker v-model="currentDate" type="date"  :max-date="maxDate" @confirm="onConfirmDate" @cancel="datePicker = false" />
        </van-popup>
        <VanPickerNew :show="showOption" :columns="columnsList" :loading="loading" @onConfirm="onConfirmOption" @onCancel="showOption=false" />
     </div>
</template>

<script>
import VanPickerNew from '@/components/vanPickerNew'
import { fanAdd, fanGetInfo, fanEdit } from "@/api/universalEnergy.js"
import { Notify } from "vant";
// import Header from "@/components/headerNew";
import mixin from '@/mixins/mixin'
import Year from '../facilityManage/common-vue/year.vue'
import {debounce} from '@/utils/common.js'
export default {
    components: {
        // Header,
        VanPickerNew,
        Year
    },
    mixins: [mixin],
    data() {
        return {
            title: '新增/修改',
            id: '',    // 查详情时取的id
            userMsg: {},    // 任务列表单条数据
            form: {
                systemModel: '',
                motorModel: '',
                systemNum: '',
                ratedPowerValue: '',
                frequencyPerValue: '',
                absoleteElecNum: '',
                absoleteNum: '',
                efficiency: '',
                userYear: '',
                produceDate: '',
                equipType: '',
                equipEfficiency: '',
                runHours: '',
            },
            show: false,
            doDebounce: null,
        };
    },
    activated() {
        this.id = '',
        this.form = {
            systemModel: '',
            motorModel: '',
            systemNum: '',
            ratedPowerValue: '',
            frequencyPerValue: '',
            absoleteElecNum: '',
            absoleteNum: '',
            efficiency: '',
            userYear: '',
            produceDate: '',
            equipType: '',
            equipEfficiency: '',
            runHours: '',
        };
        let msg = JSON.parse(sessionStorage.getItem('tidCid'));
        this.userMsg = msg

        // let msg2 = localStorage.getItem('customerItem');
        // let objMsg2 = JSON.parse(msg2);
        // if(msg) {
        // this.userMsg = JSON.parse(msg);
        // this.addeditId = this.userMsg.id
        // }else {
        // this.userMsg = objMsg2;
        // this.addeditId = localStorage.getItem('taskId')
        // }
        const id = this.$route.query.id;
        if(id.isTrusted == undefined) {
            this.id = this.$route.query.id;
            this.getGetInfo()
        }
    },
    mounted() {
        this.doDebounce = debounce(async function () {
          await this.handelClickSave()
        }, 5000, true)
    },
    methods: {
        handelChange (params,num,name) {
            if(Number(this.form[params]) < Number(num)) {
              Notify({ type: "danger", message: `${name}≥${num}` });
              this.form[params] = ''
            }
        },
        handelChangeNumber (params,name) {
            if(params === 'efficiency'){
                if(!(Number(this.form[params]) < 100)) {
                Notify({ type: "danger", message: `${name}不可超过100%` });
                this.form[params] = 0
                }
            }else{
                if(Number(this.form[params]) > 100) {
                Notify({ type: "danger", message: `${name}不可超过100%` });
                this.form[params] = 0
                }
            }
        },
        // 返回
        onClickLeft() {
            this.$router.go(-1)
        },
        handleClick(){
            this.doDebounce()
        },
        async handelClickSave() {
            if(this.id == '') {
                this.form.id = sessionStorage.getItem('enterpriseSystemId') ? this.form.systemId = sessionStorage.getItem('enterpriseSystemId') : this.userMsg.taskId;
                this.form.customerId = this.userMsg.customerId;
                this.form.systemId = sessionStorage.getItem('enterpriseSystemId') ? this.form.systemId = sessionStorage.getItem('enterpriseSystemId') : this.userMsg.taskId;
                this.form.systemTypes = '03';
                const res = await fanAdd(this.form);
                if(res.code == 0) {
                    this.$router.go(-1);
                    Notify({ type: "success", background: '#34baae', message: "保存成功" });
                    return
                }
                Notify({ type: "error", background: 'red', message: res.msg })
            }else {
                this.form.id = this.id;
                this.form.customerId = this.userMsg.customerId;
                this.form.systemId = sessionStorage.getItem('enterpriseSystemId') ? this.form.systemId = sessionStorage.getItem('enterpriseSystemId') : this.userMsg.taskId;
                this.form.systemTypes = '03';
                const res = await fanEdit(this.form);
                if(res.code == 0) {
                    this.$router.go(-1);
                    Notify({ type: "success", background: '#34baae', message: "保存成功" });
                    return
                }
                Notify({ type: "error", background: 'red', message: res.msg })
            }
        },
        async getGetInfo() {
            this.show = true
            const res = await fanGetInfo(this.id);
            if(res.code == 0) {
                this.form = res.data
                let Efficiency = res.data.equipEfficiency&&this.equipEfficiencyOption.find(item => item.value == res.data.equipEfficiency)
                this.form.equipEfficiencyName = Efficiency&&Efficiency.text
                let equipType = res.data.equipType&&this.equipTypeOption['03'].find(item => item.value == res.data.equipType)
                this.form.equipTypeName = equipType&&equipType.text
                this.show = false
            }else {
                this.show = false
            }
        }
    },
};
</script>

<style lang="less" scoped>
::v-deep .van-field__error-message{
    text-align: right;
}
.yearenergy {
    padding: 15px 10px;
    .year-main {
        height: calc(100vh - 5rem);
        overflow: auto;
    }
    .year {
        // padding: 20px 20px;
        border-radius: 10px;
    }
    .title {
        margin: 10px;
        display: flex;
        .title-img {
            width: 20px;
            img {
                width: 100%;
            }
        }
        p {
            font-size: 14px;
            color: #009999;
            line-height: 20px;
        }
    }
    .nengyuan {
        width: 100%;
        border-radius: 10px;
        background: #fff;
        box-sizing: border-box;
        overflow: hidden;
    }
    .faqi {
        background-color: #63cbb6;
        color: #fff;
        border-radius: 8px;
    }
}

/deep/ .van-cell {
    width: 100%;
    display: flex;
}

.van-cell__title,
.van-cell__value {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    span {
        font-size: 14px;
        color: #333;
    }
}

::v-deep .van-field__label {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    flex: none;
    box-sizing: border-box;
    flex: 1;
    text-align: left;
    word-wrap: break-word;
    span {
        font-size: 14px;
        color: #333;
    }
}

::v-deep .van-cell__value {
    position: relative;
    overflow: hidden;
    color: #969799;
    text-align: right;
    vertical-align: middle;
    word-wrap: break-word;
}

::v-deep .van-field__body {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
}

::v-deep .van-field__control {
    text-align: right;
    font-size: 14px;
}
.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
</style>