nsgk_mobile/src/views/agriculturalTrusteeship/socialization/release.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 label="所属主体" required :rules="[{ required: true }]" v-model="supplyDemand.entityName" input-align="right" placeholder="请输入所属主体" />

        <van-field label="单价" required :rules="[{ required: true }]" v-model="supplyDemand.unitPrice" type="number" input-align="right" placeholder="请输入单价" />
        <van-field label="数量" v-model="supplyDemand.number" type="digit" 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" type="digit" input-align="right" placeholder="请输入联系电话" />
        <van-field label="联系人" required :rules="[{ required: true }]" v-model="supplyDemand.linker" input-align="right" placeholder="请输入联系人" />

        <van-field
          readonly
          clickable
          required
          :rules="[{ required: true , message:'请选择服务区域'}]"
          v-model="supplyDemand.serviceDeptName"
          label="服务区域"
          placeholder="请选择服务区域"
          @click="showDeptId = true"
          input-align="right"
          right-icon="arrow-down"
          label-width="auto"
        />
        <van-popup v-model="showDeptId" position="bottom" get-container="body">
          <van-cascader
            v-model="villageValue"
            title="请选择"
            :options="deptOptions"
            @close="showDeptId = false"
            @finish="onConfirmDept"
            active-color="#1989fa"
            :field-names="hcAreaInfoFieldName"
          />
        </van-popup>

        <van-field label="地址" v-model="supplyDemand.address" input-align="right" placeholder="请输入地址" />
        <van-field label="简介" required :rules="[{ required: true }]" v-model="supplyDemand.introduction" type="textarea" autosize input-align="right" placeholder="请输入简介" />
        <van-field label="详情" v-model="supplyDemand.particulars" type="textarea" autosize input-align="right" placeholder="请输入详情" />
        <van-field label="图片" :border="false" input-align="right" readonly />
        <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 {commonUpload, productTypes, supplyDemandAdd, treeselect} 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:'',
        deptOptions:[],
        deptName:'张村',
        showDeptId:false,
        villageValue : '',
        hcAreaInfoFieldName: {
          text: "label",
          value: "value",
          children: "children",
        },
      };
    },
    created() {
      let query = {
        parentId : '',
        tree : true
      }
      let query1 = {
        tree : true
      }
      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;
      });
      this.getDicts("publish_status").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;
      });
      treeselect().then(res=>{
        if (res.code == 200) {
          this.deptOptions = res.data;
        }
      })
    },
    methods: {
      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.bodyType = data.value;
        this.bodyType = data.text;
        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;
        supplyDemandAdd(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)
          }
        })
      },
      //选择案件属地
      onConfirmDept({ selectedOptions }){
        this.supplyDemand.serviceDeptId = selectedOptions[selectedOptions.length-1].value;
        this.supplyDemand.serviceDeptName = selectedOptions[selectedOptions.length-1].label;
        this.showDeptId = false
      },
    },
  }
</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>