nsgk_mobile/src/views/sunVillage_info/fixedAssetsAdd.vue

 <template>
     <div class="home_wrapper">
         <div class="header_main">
             固定资产
             <div class="return_btn" @click="onClickLeft"></div>
         </div>
       <van-form @submit="onSubmit">
         <div class="list_main">
           <div class="titBox">
             <img src="../../assets/images/sunVillage_info/add_icon_1.png" style="width:22PX;height:22PX;margin-right: 10px;"/>
             <p class="tit">基本信息</p>
           </div>
           <van-field v-model="form.code" label="资产编码" placeholder="不输入时系统自动分配" input-align="right" :border="false" />
           <van-field required :rules="[{ required: true, message: '请填写资产名称' }]" v-model="form.name" label="资产名称" placeholder="资产名称" input-align="right" :border="false" />

           <van-field
             readonly
             clickable
             label="资产类别"
             placeholder="请选择"
             v-model="assetType"
             @click="showAssetType = true"
             input-align="right"
             right-icon="arrow-down"
             label-width="auto"
             required
             :border="false"
             :rules="[{ required: true , message:'请选择资产类别' }]"
           />
           <van-popup v-model="showAssetType" position="bottom">
             <van-picker
               show-toolbar
               :columns="assetTypeOptions"
               @confirm="onConfirmAssetType"
               @cancel="showAssetType = false"
             />
           </van-popup>

           <van-field
             readonly
             clickable
             label="经营属性"
             placeholder="请选择"
             v-model="operationType"
             @click="showOperationType = true"
             input-align="right"
             right-icon="arrow-down"
             label-width="auto"
             required
             :border="false"
             :rules="[{ required: true , message:'请选择经营属性' }]"
           />
           <van-popup v-model="showOperationType" position="bottom">
             <van-picker
               show-toolbar
               :columns="operationTypeOptions"
               @confirm="onConfirmOperationType"
               @cancel="showOperationType = false"
             />
           </van-popup>

           <van-field
             readonly
             clickable
             label="增加方式"
             placeholder="请选择"
             v-model="addType"
             @click="showAddType = true"
             input-align="right"
             right-icon="arrow-down"
             label-width="auto"
             required
             :border="false"
             :rules="[{ required: true , message:'请选择增加方式' }]"
           />
           <van-popup v-model="showAddType" position="bottom">
             <van-picker
               show-toolbar
               :columns="addTypeOptions"
               @confirm="onConfirmAddType"
               @cancel="showAddType = false"
             />
           </van-popup>

           <van-field
             readonly
             clickable
             label="购建时间"
             placeholder="请选择"
             v-model="form.buildTime"
             @click="showBuildTime = true"
             input-align="right"
             right-icon="arrow-down"
             label-width="auto"
             required
             :border="false"
             :rules="[{ required: true , message:'请选择购建时间' }]"
           />
           <van-popup v-model="showBuildTime" position="bottom">
             <van-datetime-picker
               type="date"
               title="选择年月日"
               :min-date="minDate"
               v-model="buildTime"
               @confirm="onConfirmBuildTime"
               @cancel="showBuildTime = false"
             />
           </van-popup>

           <van-field v-model="form.location" label="坐落位置" placeholder="坐落位置" input-align="right" :border="false" />
           <van-field v-model="form.specification" label="规格型号" placeholder="规格型号" input-align="right" :border="false" />
           <van-field v-model="form.supplier" label="供应商" placeholder="供应商" input-align="right" :border="false" />

           <van-field
             readonly
             clickable
             label="使用情况"
             placeholder="请选择"
             v-model="useType"
             @click="showUseType = true"
             input-align="right"
             right-icon="arrow-down"
             label-width="auto"
             required
             :border="false"
             :rules="[{ required: true , message:'请选择使用情况' }]"
           />
           <van-popup v-model="showUseType" position="bottom">
             <van-picker
               show-toolbar
               :columns="useTypeOptions"
               @confirm="onConfirmUseType"
               @cancel="showUseType = false"
             />
           </van-popup>

           <van-field
             readonly
             clickable
             label="资产状态"
             placeholder="请选择"
             v-model="assetStatus"
             @click="showAssetStatus = true"
             input-align="right"
             right-icon="arrow-down"
             label-width="auto"
             required
             :border="false"
             :rules="[{ required: true , message:'请选择资产状态' }]"
           />
           <van-popup v-model="showAssetStatus" position="bottom">
             <van-picker
               show-toolbar
               :columns="assetStatusOptions"
               @confirm="onConfirmAssetStatus"
               @cancel="showAssetStatus = false"
             />
           </van-popup>

           <van-field name="radio" label="单元资产" input-align="right" :border="false">
             <template #input>
               <van-radio-group v-model="form.isMin" direction="horizontal">
                 <van-radio name="Y">是</van-radio>
                 <van-radio name="N">否</van-radio>
               </van-radio-group>
             </template>
           </van-field>

           <van-field name="radio" label="扶贫资产" input-align="right" :border="false">
             <template #input>
               <van-radio-group v-model="form.isFormAsset" direction="horizontal">
                 <van-radio name="Y">是</van-radio>
                 <van-radio name="N">否</van-radio>
               </van-radio-group>
             </template>
           </van-field>
         </div>

         <div class="list_main">
           <div class="titBox">
             <img src="../../assets/images/sunVillage_info/add_icon_1.png" style="width:22PX;height:22PX;margin-right: 10px;"/>
             <p class="tit">资产数据</p>
           </div>
           <van-field required label="数量/面积" input-align="right" :border="false">
             <template #input>
               <van-stepper v-model="form.quantity" input-width="100" :decimal-length="2" />
             </template>
           </van-field>

           <van-field required :rules="[{ required: true, message: '请填写计量单位' }]" v-model="form.unit" label="计量单位" placeholder="计量单位" input-align="right" :border="false" />

           <van-field required label="原值（元）" input-align="right" :border="false">
             <template #input>
               <van-stepper v-model="form.originalValue" input-width="100" min="0.00" :decimal-length="2" @change="changeOriginalValue"/>
             </template>
           </van-field>

           <van-field label="净值（元）" input-align="right" :border="false">
             <template #input>
               <van-stepper v-model="form.netValue" disabled input-width="100" min="0.00" :decimal-length="2" />
             </template>
           </van-field>

           <van-field label="残值率N%" input-align="right" :border="false">
             <template #input>
               <van-stepper v-model="form.residualsRate" input-width="100" @change="changeResidualsRate"/>
             </template>
           </van-field>

           <van-field label="净残值（元）" input-align="right" :border="false">
             <template #input>
               <van-stepper v-model="form.netSalvage" input-width="100" min="0.00" :decimal-length="2" @changexxx="changeNetSalvage" />
             </template>
           </van-field>

           <van-field readonly v-model="form.fixedValue" label="资产清理（元）" placeholder="无需输入" input-align="right" :border="false" />
           <van-field readonly v-model="form.fixedSubject" label="资产清理科目" placeholder="资产清理科目" input-align="right" :border="false" />
           <van-field readonly v-model="form.depreciationSubject" label="折旧科目" placeholder="折旧科目" input-align="right" :border="false" />
           <van-field readonly v-model="form.depreciationFeeSubject" label="折旧费用科目" placeholder="折旧费用科目" input-align="right" :border="false" />
           <van-field v-model="form.remark" label="备注" placeholder="备注" input-align="right" :border="false" />
         </div>

         <div class="list_main">
           <div class="titBox">
             <img src="../../assets/images/sunVillage_info/add_icon_1.png" style="width:22PX;height:22PX;margin-right: 10px;"/>
             <p class="tit">折旧方式</p>
           </div>

           <van-field
             readonly
             clickable
             label="折旧方式"
             placeholder="请选择"
             v-model="depreciationType"
             @click="showDepreciationType = true"
             input-align="right"
             right-icon="arrow-down"
             label-width="auto"
             required
             :border="false"
             :rules="[{ required: true , message:'请选择折旧方式' }]"
           />
           <van-popup v-model="showDepreciationType" position="bottom">
             <van-picker
               show-toolbar
               :columns="depreciationTypeOptions"
               @confirm="onConfirmDepreciationType"
               @cancel="showDepreciationType = false"
             />
           </van-popup>

           <van-field label="预计使用期数" input-align="right" :border="false">
             <template #input>
               <van-stepper v-model="form.expectedYears" input-width="100" @change="changeExpectedYears" />
             </template>
           </van-field>

           <van-field readonly v-model="form.perYearDepreciationValue" label="每期折旧额" placeholder="(原值-净残值)/预计使用期数" input-align="right" :border="false" />

           <van-field label="已折旧期数" input-align="right" :border="false">
             <template #input>
               <van-stepper v-model="form.depreciationYears" input-width="100" min="0" @change="changeDepreciationYears" />
             </template>
           </van-field>
           <van-field v-model="form.depreciationValue" label="累计折旧(元)" placeholder="0" input-align="right" :border="false" @change="changeDepreciationValue"
           >
             <template #button>
               <van-button size="small" type="primary" round @click="calcDepreciationValue" native-type="button">重新计算</van-button>
             </template>
           </van-field>
         </div>

         <div style="margin: 16px auto;width: 50%;">
           <van-button round block type="primary" native-type="submit">
             保存
           </van-button>
         </div>
       </van-form>
     </div>
 </template>
 <script>
   import { addPermanent } from "@/api/sunVillage_info/fixedAssets";
   export default {
     name: "certificateList",
     data() {
       return {
         minDate:new Date(1900,1,1),
         applicationList:[],
         applicationListSecond:[],
         form:{
           assetType:'151001',
           operationType:'1',
           addType:'1',
           buildTime:this.format(new Date(),'yyyy-MM-dd'),
           useType:'1',
           assetStatus:'1',
           isMin:'Y',
           isFormAsset:'N',
           quantity:1.00,
           depreciationSubject:"152:累计折旧",
           fixedSubject:"153:固定资产清理",
           depreciationFeeSubject:"541005:管理费用-折旧及修理费",
           depreciationType:'3',
           expectedYears:1,
           depreciationYears:0,
           netValue:0.00,
           originalValue:0.00,
           residualsRate:1,
           netSalvage:0.00,
           fixedValue:null,
           perYearDepreciationValue:null,
           depreciationValue:0
         },
         //资产类别
         assetType:'房屋及建筑物',
         showAssetType:false,
         assetTypeOptions:[],
         //经营属性
         operationType:'经营性',
         showOperationType:false,
         operationTypeOptions:[],
         //增加方式
         addTypeOptions:[],
         showAddType:false,
         addType:'购入',
         //使用情况
         useTypeOptions:[],
         showUseType:false,
         useType:'自用',
         //资产状态
         assetStatusOptions:[],
         showAssetStatus:false,
         assetStatus:'正常',
         //资产状态
         depreciationTypeOptions:[],
         showDepreciationType:false,
         depreciationType:'不折旧',

         showBuildTime:false,
         auditStatus:[],
         loading: false,
         finished: false,
         listLength:'0',
         searchInput:'',
         queryParams:{
           pageNum:1,
           pageSize:10,
           orderByColumn:'createTime',
           isAsc:'desc',
           name:'',
         },
         buildTime:new Date()
       };
     },
     created() {
       this.houseGetDicts("asset_type").then((response) => {
         for(var i = 0 ; i < response.data.length ; i++){
           this.assetTypeOptions.push({text:response.data[i].dictLabel,value:response.data[i].dictValue});
         }
       });
       this.houseGetDicts("operation_type").then((response) => {
         for(var i = 0 ; i < response.data.length ; i++){
           this.operationTypeOptions.push({text:response.data[i].dictLabel,value:response.data[i].dictValue});
         }
       });
       this.houseGetDicts("add_type").then((response) => {
         for(var i = 0 ; i < response.data.length ; i++){
           this.addTypeOptions.push({text:response.data[i].dictLabel,value:response.data[i].dictValue});
         }
       });
       this.houseGetDicts("use_type").then((response) => {
         for(var i = 0 ; i < response.data.length ; i++){
           this.useTypeOptions.push({text:response.data[i].dictLabel,value:response.data[i].dictValue});
         }
       });
       this.houseGetDicts("asset_status").then((response) => {
         for(var i = 0 ; i < response.data.length ; i++){
           this.assetStatusOptions.push({text:response.data[i].dictLabel,value:response.data[i].dictValue});
         }
       });
       this.houseGetDicts("depreciation_type").then((response) => {
         for(var i = 0 ; i < response.data.length ; i++){
           this.depreciationTypeOptions.push({text:response.data[i].dictLabel,value:response.data[i].dictValue});
         }
       });
     },
     methods: {
       onConfirmAssetType(data){
         this.assetType = data.text;
         this.form.assetType = data.value;
         this.showAssetType = false;
       },
       onConfirmOperationType(data){
         this.operationType = data.text;
         this.form.operationType = data.value;
         this.showOperationType = false;
       },
       onConfirmAddType(data){
         this.addType = data.text;
         this.form.addType = data.value;
         this.showAddType = false;
       },
       onConfirmUseType(data){
         this.useType = data.text;
         this.form.useType = data.value;
         this.showUseType = false;
       },
       onConfirmAssetStatus(data){
         this.assetStatus = data.text;
         this.form.assetStatus = data.value;
         this.showAssetStatus = false;
       },
       onConfirmDepreciationType(data){
         this.depreciationType = data.text;
         this.form.depreciationType = data.value;
         this.showDepreciationType = false;
       },
       onConfirmBuildTime(data){
         this.form.buildTime = this.format(data,'yyyy-MM-dd');
         this.showBuildTime = false;
       },
       // 原值变动监听
       changeOriginalValue(val) {
         if (this.form.depreciationValue != null) {
           // 净值 = 原值-累计折旧
           this.form.netValue = val - this.form.depreciationValue;
         }
         if (this.form.residualsRate != null) {
           // 净残值 = 原值*残值率
           this.form.netSalvage = (val * this.form.residualsRate) / 100;
         }
         if (this.form.netSalvage != null && this.form.expectedYears != null) {
           // 每年折旧额 = (原值-净残值）/ 预计使用年数
           this.form.perYearDepreciationValue =
             (val - this.form.netSalvage) / this.form.expectedYears;
         }
       },
       // 累计折旧变动监听
       changeDepreciationValue(val) {
         if (val == null)
           return;

         // 每期折旧额 = (原值-净残值）/ 预计使用期数
         let depreciation = this.form.originalValue - this.form.netSalvage;
         depreciation -= val;
         let periods = this.form.expectedYears - (this.form.depreciationYears || 0);
         if(periods > 0 && depreciation > 0)
           this.form.perYearDepreciationValue = (depreciation / periods).toFixed(2);
         else
           this.form.perYearDepreciationValue = 0;

         // 净值 = 原值-累计折旧
         this.form.netValue = (this.form.originalValue || 0) - val;
       },

       // 残值率变动监听
       changeResidualsRate(val) {
         if (val == null)
           return;

         // 净残值 = 原值*残值率
         this.form.netSalvage = val > 0 ? ((this.form.originalValue * val) / 100).toFixed(2) : 0;

         if (this.form.expectedYears > 0) {
           // 每期折旧额 = (原值-净残值）/ 预计使用期数
           let depreciation = this.form.originalValue - (this.form.netSalvage || 0);
           depreciation -= (this.form.depreciationValue || 0);
           let periods = this.form.expectedYears - (this.form.depreciationYears || 0);
           if(periods > 0 && depreciation > 0)
             this.form.perYearDepreciationValue = (depreciation / periods).toFixed(2);
           else
             this.form.perYearDepreciationValue = 0;
         }
         else
           this.form.perYearDepreciationValue = 0;
       },

       // 净残值变动监听
       changeNetSalvage(val) {
         if (this.form.originalValue != null && this.form.expectedYears != null) {
           // 每年折旧额 = （原值-净残值）/ 预计使用年数
           this.form.perYearDepreciationValue =
             (this.form.originalValue - val) / this.form.expectedYears;
         }
       },

       // 预计使用年数变动监听
       changeExpectedYears(val) {
         if (val == null)
           return;

         // 每期折旧额 = (原值-净残值）/ 预计使用期数
         let depreciation = this.form.originalValue - this.form.netSalvage;
         depreciation -= this.form.depreciationValue;
         let periods = val - (this.form.depreciationYears || 0);
         if(periods > 0 && depreciation > 0)
           this.form.perYearDepreciationValue = (depreciation / periods).toFixed(2);
         else
           this.form.perYearDepreciationValue = 0;
       },

       // 已折旧年数变动监听
       changeDepreciationYears(val) {
         if (val == null)
           return;

         //if(!this.form.depreciationValueManual)
         {
           if (this.form.perYearDepreciationValue > 0) {
             // 累计折旧 = 已折旧期数 * 每期折旧额
             this.form.depreciationValue = val * this.form.perYearDepreciationValue;
           }
           else
             this.form.depreciationValue = 0;
         }

         // 净值 = 原值-累计折旧
         this.form.netValue = (this.form.originalValue || 0) - (this.form.depreciationValue || 0);
       },
       onSubmit(){
         addPermanent(this.form).then((response) => {
           if (response.code == 200){
             this.$notify({ type: 'success', message: '新增成功' });
             setTimeout(function(){
               history.back(-1);
             },2000)
           }
         });
       },
       calcDepreciationValue() {
         this.form.depreciationValue = 0;
         const depreciationYears = this.form.depreciationYears;
         this.form.depreciationYears = 0;
         this.changeOriginalValue(this.form.originalValue);
         this.form.depreciationYears = depreciationYears;
         this.changeDepreciationYears(depreciationYears);
       },
     },
   }
 </script>
 <style scoped lang="scss">
   /deep/ .van-button--primary{
     background: url("../../assets/images/sunVillage_info/btn_bg.png") no-repeat;
     background-size: 100% 100%;
     border: none;
   }
  .home_wrapper{
    background: #e9e9e9;
    min-height: 100vh;
    width: 100vw;
    .header_main {
        height: 116px;
        background: url('../../assets/images/sunVillage_info/list_head.png') no-repeat;
        background-size: 100% 100%;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        font-size: 36px;
        line-height: 116px;
        text-align: center;
        color: #fff;
        position: relative;

        .return_btn {
            width: 24px;
            height: 43.2px;
            background: url('../../assets/images/sunVillage_info/list_icon_5.png') center center no-repeat;
            background-size: 20px 36px;
            position: absolute;
            left: 38px;
            top: 36px;
        }

        .add_btn {
            width: 56.4px;
            height: 40.8px;
            background: url('../../assets/images/sunVillage_info/list_icon_9.png') center center no-repeat;
            background-size: 47px 34px;
            position: absolute;
            right: 38px;
            top: 36px;
        }
    }
    .list_main{
      padding:25px;
      background: #ffffff;
      width: 94%;
      margin: 25px auto 0;
      border-radius: 15PX;
      box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1);
    }
    .titBox{
      display: flex;
      align-items: center;
    }
    .tit{
      font-size: 36px;
      font-weight: bold;
    }
    /deep/ .van-cell{
      padding-left: 0!important;
      padding-right: 0!important;
      padding-bottom: 0!important;
    }
    /deep/ .van-field__label{
      padding-left: 10PX;
      width: 8.2em;
    }
    /deep/ .van-cell--required::before{
      left: 0;
    }

}







 </style>