nsgk_mobile/src/views/sunVillage_info/resourceDetail.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 readonly v-model="form.code" label="资源编码" placeholder="不输入时系统自动分配" input-align="right" :border="false" />
           <van-field readonly v-model="form.name" label="资源名称" placeholder="资源名称" input-align="right" :border="false" />

           <van-field
             readonly
             label="资源分类"
             placeholder="请选择"
             v-model="resourceType"
             input-align="right"
             right-icon="arrow-down"
             label-width="auto"
             :border="false"
           />

           <van-field
             readonly
             label="资源类型"
             placeholder="请选择"
             v-model="resourceSort"
             input-align="right"
             right-icon="arrow-down"
             label-width="auto"
             :border="false"
           />

           <van-field readonly v-model="form.location" label="坐落位置" placeholder="坐落位置" input-align="right" :border="false" />
           <van-field readonly v-model="form.east" label="东至" placeholder="东至" input-align="right" :border="false" />
           <van-field readonly v-model="form.west" label="西至" placeholder="西至" input-align="right" :border="false" />
           <van-field readonly v-model="form.south" label="南至" placeholder="南至" input-align="right" :border="false" />
           <van-field readonly v-model="form.north" label="北至" placeholder="北至" input-align="right" :border="false" />
           <van-field readonly v-model="form.totalArea" label="总面积(亩)" placeholder="总面积(亩)" required :rules="[{ required: true }]" input-align="right" :border="false" />

           <field-select
             v-model="form.operationType"
             label="经营属性"
             value-key="dictLabel"
             data-key="dictValue"
             placeholder="请选择"
             remote-url="/open/zdzh/list/operation_type"
             :on-remote-response="'data'"/>

           <field-select
             v-model="form.useType"
             label="使用情况"
             value-key="dictLabel"
             data-key="dictValue"
             placeholder="请选择"
             remote-url="/open/zdzh/list/use_type"
             :on-remote-response="'data'"/>

           <field-select
             v-model="form.status"
             label="资产状态"
             value-key="dictLabel"
             data-key="dictValue"
             placeholder="请选择"
             remote-url="/open/zdzh/list/sys_normal_disable"
             :on-remote-response="'data'"/>

           <field-select
             v-model="form.utilizationStatus"
             label="利用现状"
             value-key="dictLabel"
             data-key="dictValue"
             placeholder="请选择"
             remote-url="/open/zdzh/list/utilization_status"
             :on-remote-response="'data'"/>


           <van-field v-model="form.useBy" label="使用人" placeholder="使用人" input-align="right" :border="false" />
           <van-field v-model="form.checkSituation" 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 v-model="form.sumArea" label="总面积(亩)" placeholder="总面积(亩)" input-align="right" :border="false" />-->

<!--           <van-divider>集体经营</van-divider>-->

<!--           <van-field v-model="form.groupArea" label="面积(亩)" placeholder="面积(亩)" input-align="right" :border="false" />-->
<!--           <van-field v-model="form.groupValue" label="年收益(元)" placeholder="年收益(元)" input-align="right" :border="false" />-->

<!--           <van-divider>出租经营</van-divider>-->

<!--           <van-field v-model="form.rentArea" label="面积(亩)" placeholder="面积(亩)" input-align="right" :border="false" />-->
<!--           <van-field v-model="form.rentValue" label="年租金(元)" placeholder="年租金(元)" input-align="right" :border="false" />-->
<!--           <van-field v-model="form.rentLessee" label="承租人" placeholder="承租人" input-align="right" :border="false" />-->

<!--           <van-field-->
<!--             autocomplete="off"-->
<!--             input-align="right"-->
<!--             v-model="form.rentStartTime"-->
<!--             name="开始时间"-->
<!--             label="开始时间"-->
<!--             placeholder="开始时间"-->
<!--             readonly-->
<!--             @click="showStartTime = true"-->
<!--             :border="false"-->
<!--           />-->
<!--           <van-popup v-model:show="showStartTime" position="bottom">-->
<!--             <van-datetime-picker-->
<!--               type="date"-->
<!--               v-model="buildTime"-->
<!--               @confirm="onConfirStartTime"-->
<!--               @cancel="showStartTime = false"-->
<!--               :min-date="minDate"-->
<!--             />-->
<!--           </van-popup>-->

<!--           <van-field-->
<!--             autocomplete="off"-->
<!--             input-align="right"-->
<!--             v-model="form.rentEndTime"-->
<!--             name="到期时间"-->
<!--             label="到期时间"-->
<!--             placeholder="到期时间"-->
<!--             readonly-->
<!--             @click="showEndTime = true"-->
<!--             :border="false"-->
<!--           />-->
<!--           <van-popup v-model:show="showEndTime" position="bottom">-->
<!--             <van-datetime-picker-->
<!--               type="date"-->
<!--               v-model="buildTime"-->
<!--               @confirm="onConfirEndTime"-->
<!--               @cancel="showEndTime = false"-->
<!--               :min-date="minDate"-->
<!--             />-->
<!--           </van-popup>-->

<!--&lt;!&ndash;           <van-field v-model="form.rentStartTime" label="开始时间" placeholder="开始时间" input-align="right" :border="false" />&ndash;&gt;-->
<!--&lt;!&ndash;           <van-field v-model="form.rentEndTime" label="到期时间" placeholder="到期时间" input-align="right" :border="false" />&ndash;&gt;-->


<!--           <van-divider>其他经营</van-divider>-->

<!--           <van-field v-model="form.otherArea" label="面积(亩)" placeholder="面积(亩)" input-align="right" :border="false" />-->
<!--           <van-field v-model="form.otherValue" 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 v-model="form.farmerArea" label="总面积(亩)" placeholder="总面积(亩)" input-align="right" :border="false" />-->

<!--           <van-divider>流转入集体统一经营</van-divider>-->

<!--           <van-field v-model="form.circulationArea" label="面积(亩)" placeholder="面积(亩)" input-align="right" :border="false" />-->
<!--           <van-field v-model="form.circulationValue" label="年收益(元)" placeholder="年收益(元)" input-align="right" :border="false" />-->

<!--         </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 { updateResource,getResource } from "@/api/sunVillage_info/fixedAssets";
   import FieldSelect from "@/components/form/FieldSelect.vue";
   export default {
     name: "certificateList",
     components: {FieldSelect},
     data() {
       return {
         // 资源分类字典
         resourceTypeOptions: [],
         //农用地资源类型字典
         farmingResourceTypeOptions: [],
         //建设用地资源类型字典
         buildResourceTypeOptions: [],
         //未利用地、林木用地资源类型字典
         unusedResourceTypeOptions: [],
         showStartTime:false,
         showEndTime:false,
         showResourceType:false,
         resourceType:'',
         showResourceSort:false,
         resourceSort:'',
         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',
           status:'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,
           utilizationStatus: null,
           useBy: null,
           checkSituation: null,
         },
         //资产类别
         assetType:'房屋及建筑物',
         showAssetType:false,
         resourceSortOptions:[],
         //经营属性
         operationType:'经营性',
         showOperationType:false,
         operationTypeOptions:[],
         //增加方式
         addTypeOptions:[],
         showAddType:false,
         addType:'购入',
         //使用情况
         useTypeOptions:[],
         showUseType:false,
         useType:'自用',
         //资产状态
         assetStatusOptions:[],
         showAssetStatus:false,
         assetStatus:'正常',
         //资产状态
         depreciationTypeOptions:[],
         showDepreciationType:false,
         depreciationType:'不折旧',
         utilizationStatusOptions: [],
         showUtilizationStatus:false,
         utilizationStatus: '已利用',
         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("resource_sort").then((response) => {
         for(var i = 0 ; i < response.data.length ; i++){
           this.resourceSortOptions.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.getDicts("utilization_status").then(response => {
         for(var i = 0 ; i < response.data.length ; i++){
           this.utilizationStatusOptions.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("sys_normal_disable").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});
         }
       });*/
       this.houseGetDicts("resource_type").then((response) => {
         this.resourceTypeOptionsSelect = response.data;
         for(var i = 0 ; i < response.data.length ; i++){
           this.resourceTypeOptions.push({text:response.data[i].dictLabel,value:response.data[i].dictValue});
         }
       });

       this.houseGetDicts("resource_farming_type").then((response) => {
         this.farmingResourceTypeOptionsSelect = response.data;
       });
       this.houseGetDicts("resources_build_type").then((response) => {
         this.buildResourceTypeOptionsSelect = response.data;
       });
       this.houseGetDicts("resources_unused_type").then((response) => {
         this.unusedResourceTypeOptionsSelect = response.data;
       });
       this.getDetail();
     },
     methods: {
       getDetail(){
         getResource(this.$route.query.id).then(response => {

           this.form = response.data;
           this.resourceType = this.selectDictLabel(this.resourceTypeOptionsSelect, response.data.resourceType);
           if(response.data.resourceType == 1){
             this.resourceSort = this.selectDictLabel(this.farmingResourceTypeOptionsSelect, response.data.resourceSort);
           }
           if(response.data.resourceType == 2){
             this.resourceSort = this.selectDictLabel(this.buildResourceTypeOptionsSelect, response.data.resourceSort);
           }
           if(response.data.resourceType == 3){
             this.resourceSort = this.selectDictLabel(this.unusedResourceTypeOptionsSelect, response.data.resourceSort);
           }

         });
       },
       onConfirStartTime(val){
         let year = val.getFullYear()
         let month = val.getMonth() + 1
         let day = val.getDate()
         if (month >= 1 && month <= 9) { month = `0${month}` }
         if (day >= 1 && day <= 9) { day = `0${day}` }
         this.form.rentStartTime = year+"-"+month+"-"+day
         this.showStartTime= false
       },
       onConfirEndTime(val){
         let year = val.getFullYear()
         let month = val.getMonth() + 1
         let day = val.getDate()
         if (month >= 1 && month <= 9) { month = `0${month}` }
         if (day >= 1 && day <= 9) { day = `0${day}` }
         this.form.rentEndTime = year+"-"+month+"-"+day
         this.showEndTime= false
       },
       onConfirmResourceType(data){
         this.resourceType = data.text;
         this.form.resourceType = data.value;
         this.showResourceType = false;
         this.farmingResourceTypeOptions = [];
         this.resourceSort = '';
         this.form.resourceSort = '';
         if (data.value == '1'){//农用地
           this.houseGetDicts("resource_farming_type").then((response) => {
             for(var i = 0 ; i < response.data.length ; i++){
               this.farmingResourceTypeOptions.push({text:response.data[i].dictLabel,value:response.data[i].dictValue});
             }
           });
         }
         if (data.value == '2'){//建设用地
           this.houseGetDicts("resources_build_type").then((response) => {
             for(var i = 0 ; i < response.data.length ; i++){
               this.farmingResourceTypeOptions.push({text:response.data[i].dictLabel,value:response.data[i].dictValue});
             }
           });
         }
         if (data.value == '3'){//未利用地
           this.houseGetDicts("resources_unused_type").then((response) => {
             for(var i = 0 ; i < response.data.length ; i++){
               this.farmingResourceTypeOptions.push({text:response.data[i].dictLabel,value:response.data[i].dictValue});
             }
           });
         }



       },
       onConfirmResourceSort(data){
         this.resourceSort = data.text;
         this.form.resourceSort = data.value;
         this.showResourceSort = false;
       },
       onConfirmUseType(data){
         this.useType = data.text;
         this.form.useType = data.value;
         this.showUseType = false;
       },
       onConfirmAssetStatus(data){
         this.assetStatus = data.text;
         this.form.status = data.value;
         this.showAssetStatus = false;
       },
       onConfirmUtilizationStatus(data){
         this.utilizationStatus = data.text;
         this.form.utilizationStatus = data.value;
         this.showUtilizationStatus = false;
       },
       onSubmit(){
         updateResource(this.form).then(response => {
           if (response.code == 200){
             this.$notify({ type: 'success', message: '修改成功' });
             setTimeout(function(){
               history.back(-1);
             },2000)
           }
         });
       }
     },
   }
 </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>