nsgk_mobile/src/views/sunVillage_info/fixedAssetsDetail.vue

 <template>
     <div class="home_wrapper">
         <div class="header_main">
             固定资产
             <div class="return_btn" @click="onClickLeft"></div>
         </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 required :rules="[{ required: true, message: '请填写资产名称' }]" v-model="form.name" label="资产名称" placeholder="资产名称" input-align="right" :border="false" />
           <van-field readonly v-model="form.code" label="资产编码" placeholder="资产编码" input-align="right" :border="false" />

           <van-field
             readonly
             clickable
             label="资产类别"
             placeholder="请选择"
             v-model="assetType"
             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"
             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"
             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"
             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="选择年月日"
               @confirm="onConfirmBuildTime"
               @cancel="showBuildTime = false"
             />
           </van-popup>

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

           <van-field
             readonly
             clickable
             label="使用情况"
             placeholder="请选择"
             v-model="useType"
             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"
             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" disabled>是</van-radio>
                 <van-radio name="N" disabled>否</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" disabled>是</van-radio>
                 <van-radio name="N" disabled>否</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 disabled 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 disabled 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 disabled v-model="form.residualsRate" input-width="100" @change="changeResidualsRate"/>
             </template>
           </van-field>

           <van-field label="净残值（元）" input-align="right" :border="false">
             <template #input>
               <van-stepper disabled v-model="form.netSalvage" input-width="100" min="0.00" :decimal-length="2" @change="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 readonly 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"
             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 disabled 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 disabled v-model="form.depreciationYears" input-width="100" min="0" @change="changeDepreciationYears" />
             </template>
           </van-field>
           <van-field readonly v-model="form.depreciationValue" label="累计折旧(元)" placeholder="0" input-align="right" :border="false" @change="changeDepreciationValue" />
         </div>
     </div>
 </template>
 <script>
   import { getPermanent } from "@/api/sunVillage_info/fixedAssets";
   export default {
     name: "certificateList",
     data() {
       return {
         applicationList:[],
         applicationListSecond:[],
         assetStatusOptions:[],
         form:{

         },
         //资产类别
         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:'',
         }
       };
     },
     created() {
       this.houseGetDicts("asset_type").then((response) => {
           this.assetTypeOptions = response.data;
       });
       this.houseGetDicts("operation_type").then((response) => {
           this.operationTypeOptions = response.data;
       });
       this.houseGetDicts("add_type").then((response) => {
           this.addTypeOptions = response.data;
       });
       this.houseGetDicts("use_type").then((response) => {
           this.useTypeOptions = response.data;
       });
       this.houseGetDicts("asset_status").then((response) => {
           this.assetStatusOptions = response.data;
       });
       this.houseGetDicts("depreciation_type").then((response) => {
           this.depreciationTypeOptions = response.data;
       });
       this.getDetail(this.$route.query.id)
     },
     methods: {
       getDetail(id){
         getPermanent(id).then((response) => {
           if (response.code == 200){
             this.form = response.data;
             this.assetType = this.selectDictLabel(this.assetTypeOptions, response.data.assetType);
             this.operationType = this.selectDictLabel(this.operationTypeOptions, response.data.operationType);
             this.addType = this.selectDictLabel(this.addTypeOptions, response.data.addType);
             this.useType = this.selectDictLabel(this.useTypeOptions, response.data.useType);
             this.assetStatus = this.selectDictLabel(this.assetStatusOptions, response.data.assetStatus);
             this.depreciationType = this.selectDictLabel(this.depreciationTypeOptions, response.data.depreciationType);
           }
         });

       },
       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 (this.form.originalValue != null) {
           // 净值 = 原值-累计折旧
           this.form.netValue = this.form.originalValue - val;
         }
       },

       // 残值率变动监听
       changeResidualsRate(val) {
         if (this.form.originalValue != null) {
           // 净残值 = 原值*残值率
           this.form.netSalvage = (this.form.originalValue * val) / 100;
         }
       },

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

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

       // 已折旧年数变动监听
       changeDepreciationYears(val) {
         if (this.form.perYearDepreciationValue != null) {
           this.form.depreciationValue = val * this.form.perYearDepreciationValue;
         }
       },

     },
   }
 </script>
 <style scoped lang="scss">
  .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>