nsgk_mobile/src/views/agriculturalTrusteeship/socialization/projectEdit.vue

<template>
  <div class="home_wrapper">
    <!--  头部开始  -->
    <van-nav-bar
      title="修改服务项目"
      fixed
      placeholder
      left-arrow
      @click-left="onClickLeft"
    />
    <!--  头部结束  -->


    <!--  内容开始  -->
    <van-form @submit="submitForm" ref="formData" show-error :show-error-message="false">
    <div class="main">
      <van-field label="产品名称" required :rules="[{ required: true }]" v-model="supplyDemand.supplyDemandName" input-align="right" placeholder="请输入产品名称" />
<!--      <van-field label="产品类型" v-model="supplyDemand.productType" input-align="right" placeholder="请输入产品类型" />-->
      <van-field
        readonly
        clickable
        required
        :rules="[{ required: true , message:'请选择产品类型'}]"
        v-model="productType"
        label="产品类型"
        placeholder="请选择产品类型"
        @click="showProductType = true"
        input-align="right"
        right-icon="arrow-down"
        label-width="auto"
      />

      <van-popup v-model="showProductType" round position="bottom">
<!--        v-model="cascaderValue"-->
        <van-cascader
          title="请选择产品类型"
          :options="productList"
          @close="showProductType = false"
          @finish="onConfirmProductType"
          :field-names="fieldNames"
        />
      </van-popup>

<!--      <van-field label="二级分类" v-model="supplyDemand.supplyDemandType" input-align="right" placeholder="请输入二级分类" />-->
      <van-field label="产品规格" v-model="supplyDemand.specification" input-align="right" placeholder="请输入产品规格" />
<!--      <van-field label="所属主体" v-model="supplyDemand.bodyType" input-align="right" placeholder="请输入所属主体" />-->
<!--      <van-field-->
<!--        readonly-->
<!--        clickable-->
<!--        required-->
<!--        :rules="[{ required: true , message:'请选择所属主体'}]"-->
<!--        v-model="bodyType"-->
<!--        label="所属主体"-->
<!--        placeholder="请选择所属主体"-->
<!--        @click="showBodyType = true"-->
<!--        input-align="right"-->
<!--        right-icon="arrow-down"-->
<!--        label-width="auto"-->
<!--      />-->
<!--      <van-popup v-model="showBodyType" position="bottom">-->
<!--        <van-picker-->
<!--          show-toolbar-->
<!--          :columns="projectTypeOptions"-->
<!--          @confirm="onConfirmProjectType"-->
<!--          @cancel="showBodyType = false"-->
<!--        />-->
<!--      </van-popup>-->
      <van-field
        readonly
        clickable
        required
        :rules="[{ required: true , message:'请选择所属主体'}]"
        v-model="supplyDemand.entityName"
        label="所属主体"
        placeholder="请选择所属主体"
        @click="showBodyType = true"
        input-align="right"
        right-icon="arrow-down"
        label-width="auto"
      />
      <van-popup v-model="showBodyType" position="bottom">
        <van-picker
          show-toolbar
          :columns="detailListOptions"
          value-key="entityName"
          @confirm="onConfirmProjectType"
          @cancel="showBodyType = false"
        />
      </van-popup>
<!--      <van-field label="所属主体" required :rules="[{ required: true }]" v-model="supplyDemand.entityName" input-align="right" placeholder="请输入所属主体" />-->

      <van-field label="单价" required :rules="[{ required: true }]" v-model="supplyDemand.unitPrice" input-align="right" placeholder="请输入单价" />
      <van-field label="数量" v-model="supplyDemand.number" input-align="right" placeholder="请输入数量" />
      <van-field label="单位" required :rules="[{ required: true }]" v-model="supplyDemand.unit" input-align="right" placeholder="请输入单位" />
      <van-field label="联系电话" required :rules="[{ required: true }]" v-model="supplyDemand.supplyDemandTal" input-align="right" placeholder="请输入联系电话" />
      <van-field label="联系人" required :rules="[{ required: true }]" v-model="supplyDemand.linker" input-align="right" placeholder="请输入联系人" />
      <van-field label="地址" v-model="supplyDemand.address" input-align="right" placeholder="请输入地址" />
      <van-field label="简介" required :rules="[{ required: true }]" v-model="supplyDemand.introduction" input-align="right" placeholder="请输入简介" />
      <van-field label="详情" v-model="supplyDemand.particulars" input-align="right" placeholder="请输入详情" />
      <van-field label="图片" readonly :border="false" input-align="right" />
      <div style="padding: 0 4% 2vh;">
        <van-uploader v-model="supplyDemand.supplyMasterMapList" :after-read="afterReadEvidenceForm" :before-delete="deleteFileEvidenceForm" />
      </div>
    </div>

    <div class="main">
      <baidu-map :center="center" panBy="[50,50]" :zoom="zoom" :scroll-wheel-zoom="true" :pinch-to-zoom="true" map-type="BMAP_NORMAL_MAP" style="height:25vh" >
        <!-- 必须给容器指高度，不然地图将显示在一个高度为0的容器中，看不到 -->
        <bm-marker :position="center" :dragging="true" animation="BMAP_ANIMATION_BOUNCE" :icon="{url: '../../../../static/images/lawEnforcement/new/address.gif', size: {width: 50, height: 50}}"></bm-marker>
      </baidu-map>
    </div>

    <div class="main_btn">
      <p @click="publishStatus = '3',$refs.formData.submit()">发布</p>
      <p @click="publishStatus = '2',$refs.formData.submit()">存稿</p>
    </div>
    </van-form>
    <!--  内容结束  -->
  </div>
</template>
<script>
  import Cookies from "js-cookie";
  import {
    supplyDemandGet,
    productTypes,
    commonUpload,
    supplyDemandEdit,
    supplyDemandAdd, detailList
  } from "@/api/agriculturalTrusteeship";
  export default {
    name: "agriculturalTrusteeshipSocializationRelease",
    data() {
      return {
        activeKey: 0,
        active: 0,
        loading: false,
        finished: false,
        showProductType: false,
        showBodyType: false,
        center: { lng: 122.089726, lat: 37.540728 }, //经纬度
        zoom: 15, //地图展示级别
        showDialog:false,
        supplyDemand:{},
        productType:'',
        bodyType:'',
        projectTypeOptions:[],
        productList:[],
        productList1:[],
        demandTypeOptions:[],
        productTypeOptions:[],
        supplyMasterMapArr:[],
        bodyTypeOptions:[],
        fieldNames : {
          text: 'dictName',
          value: 'id',
          children: 'children',
        },
        publishStatus:'',
        detailListOptions:[]
      };
    },
    created() {
      let query = {
        parentId : null,
        tree:true
      }
      let query1 = {
        tree : false
      }
      productTypes(query).then(response => {
        this.productList = response.data;
      });
      productTypes(query1).then(response => {
        this.productList1 = response.data;
      });
      this.getDicts("newBusinessEntity_statistics_project").then(response => {
        for (var i = 0; i < response.data.length; i++) {
          this.projectTypeOptions.push({text: response.data[i].dictLabel, value: response.data[i].dictValue});
        }
        this.bodyTypeOptions = response.data;
      });
      detailList().then(res=>{
        if (res.code == 200) {
          this.detailListOptions = res.rows;
        }
      })
      this.getDetail();
    },
    methods: {
      getDetail(){
        supplyDemandGet(this.$route.query.id).then(response => {
          this.bodyType = this.selectDictLabel(this.bodyTypeOptions, response.data.bodyType);
          var that = this ;
          setTimeout(function () {
            that.productType = that.productList1.filter(function (e) { return e.id == response.data.productType; })[0].dictName;
          },1000)
          if (response.data.supplyMasterMap){
            response.data.supplyMasterMapList = [];
            var attachement = response.data.supplyMasterMap.split( "," );
            this.supplyMasterMapArr = response.data.supplyMasterMap.split( "," );
            attachement.forEach(responseAttach=>{
              response.data.supplyMasterMapList.push({
                url:'/api' + responseAttach,
                isImage: true
              });
            })
          }
          this.supplyDemand = response.data;
        });
      },
      onConfirmProductType({ selectedOptions }){
        this.supplyDemand.productType = selectedOptions[selectedOptions.length-1].id;
        this.productType = selectedOptions.map((option) => option.dictName).join('/');
        this.showProductType = false;
      },
      onConfirmProjectType(data){
        this.supplyDemand.entityName = data.entityName;
        this.supplyDemand.entityId = data.id;
        this.showBodyType = false;
      },
      afterReadEvidenceForm(file){
        let params1 = new FormData();
        params1.append("file", file.file);
        commonUpload(params1).then((r1) => {
          // this.tEnforceSamplingGoodsList[index].attachement.push(r1.fileName);
          console.log(r1)
          this.supplyMasterMapArr.push(r1.fileName)
        })
      },
      deleteFileEvidenceForm(file,detail) {
        this.supplyMasterMapArr.splice(detail.index,1);
        this.supplyDemand.supplyMasterMapList.splice(detail.index,1);
      },
      submitForm(publishStatus){
        this.supplyDemand.supplyMasterMap = this.supplyMasterMapArr.join(',')
        this.supplyDemand.supplyDemandType = '1';
        this.supplyDemand.publishStatus = this.publishStatus;
        supplyDemandEdit(this.supplyDemand).then((res) => {
          if(res.code=="200"){
            if (this.publishStatus == '3'){
              this.$notify({ type: 'success', message: '发布成功' });
            }else{
              this.$notify({ type: 'success', message: '存稿成功' });
            }
            setTimeout(function(){
              history.back(-1);
            },2000)
          }
        })
      },
    },
  }
</script>
<style scoped lang="scss">
.home_wrapper{
  background: #F6F6F6;
  min-height: 100vh;
}
.main{
  width: 92%;
  margin: 0 auto;
  margin-top: 2vh;
  border-radius: 10PX;
  overflow: hidden;
  background-color: #FFF;
}
  .main_btn{
    display: flex;
    justify-content: space-around;
    padding: 4vh 0;
    p{
      font-size: .4rem;
      width: 35%;
      text-align: center;
      padding: 10PX 0;
      border-radius: 5rem;
      box-shadow: 0px 3PX 6PX 0px rgba(0,0,0,0.16);
      &:nth-child(1){
        background: #334281;
        color: #ffffff;
      }
      &:nth-child(2){
        background: #D1D5E4;
        color: #334281;
      }
    }
  }
</style>