front-end/ghsApp/src/pagesPurchase/suppAdd.vue

<template>
  <div class="app-content">
      <form @submit="formSubmit">

        <div class="module-com input-line-wrap">
          <tui-list-cell class="line-cell" :hover="false">
            <div class="tui-title required">名称</div>
            <input v-model="form.name" class="tui-input" placeholder="请填写名称" maxlength="50" type="text" name="username" @input="searchGhs" />
          </tui-list-cell>

          <tui-list-cell class="line-cell" :hover="false">
            <view class="tui-title required">所在地</view>
            <radio-group class="tui-input" @change="locationChange">
              <label class="list" for="jdLink">
                <radio id="jdLink" value="0" :checked="form.location == 0" style="transform:scale(0.7,0.7)" />
                <span class="checkbox-text">上游</span>
              </label>
              <label class="list" for="localLink">
                <radio id="localLink" value="1" :checked="form.location == 1" style="transform:scale(0.7,0.7)" />
                <span class="checkbox-text">本地</span>
              </label>
            </radio-group>
          </tui-list-cell>
          <view style="margin-top:20upx;padding:0 30upx 0 30upx;">选本地，录采购单，没有打包费、运费填写入口。</view>

          <view style="margin-top:50upx;padding-left:50upx;font-size:38upx;margin-bottom:90upx;" v-if="!$util.isEmpty(supplierList)">
            <view v-for="(item, index) in supplierList" :key="index" @click="goToCg(item)" style="margin-bottom:30upx;">{{ item.name }}</view>
          </view>

        </div>

        <view class="app-footer">
          <button class="admin-button-com big default" @click="goBack()">取消</button>
          <button class="admin-button-com big blue" formType="submit">确认</button>
        </view>

      </form>

  </div>
</template>

<script>
import TuiListCell from "@/components/plugin/list-cell";
import { ghsAdd,getList } from "@/api/ghs"
const form = require("@/utils/formValidation.js");
import ModalModule from "@/components/plugin/modal";
export default {
  components: {
    TuiListCell,ModalModule
  },
  data() {
    return {
      form: {
        name: '',
        location:0,
        mobile:''
      },
      supplierList:[]
    }
  },
  methods: {
    goToCg(item){
      this.pageTo({url: '/pagesPurchase/add?ghsId='+item.id+'&ghsName='+item.name+'&location='+item.location,type:2})
    },
    searchGhs(e){
      let that = this
      let name = e.target.value ? e.target.value : ''
      this.showGhsModel = true
      getList({ pageSize:20, name:name }).then(res => {
        that.supplierList = res.data.list ? res.data.list : []
      })
    },
		locationChange(e){
			this.form.location = e.detail.value
		},
    init(){
      if(this.option.location){
        this.form.location = this.option.location
      }
    },
    formSubmit(e) {
      let rules = [
        {
          name: "username",
          rule: ["required"],
          msg: ["请填写名称"]
        }
      ];
      let formData = e.detail.value;
      let checkRes = form.validation(formData, rules);
      if (!checkRes) {
        this.confirmFn();
      } else {
        this.$msg(checkRes);
      }
    },
    confirmFn() {
      uni.showLoading({mask:true})
      ghsAdd(this.form).then(res => {
		    uni.setStorageSync('newGhs', res.data)
        uni.hideLoading()
        setTimeout(() => {
          this.$util.pageTo(1)
        }, 1000)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.app-content {
  min-height: calc(100vh - 20upx);
  padding-top: 20upx;
}
.prompt-text {
  color: $fontColor3;
  padding-left: 30upx;
  margin-bottom: 30upx;
}
.module-com {
  margin-bottom: 20upx;
  .member-wrap {
    .member-det {
      font-size: 24upx;
      margin-left: 20upx;
    }
  }
  .remark-wrap {
    align-items: flex-start;
    .remark {
      height: 240upx;
    }
  }
}
// 按钮
.confirm-btn {
  width: calc(100% - 60upx);
  margin: 60upx 30upx 20upx;
  .admin-button-com {
    width: 100%;
  }
}
.select-cmd_bx {
		.num_bx {
			margin-top:30upx;
			margin-bottom:50upx;
			margin-left:80upx;
			view{
				height: 80upx;
				font-size: 28upx;
			}
			input {
				height: 70upx;
				border: 1upx solid #dddddd;
				border-radius: 4upx;
				text-align: left;
				margin-right: 24upx;
				font-size: 35upx;
				width:300upx;
			}
		}
	}
  .app-footer {
  justify-content: space-evenly;
  z-index: 9999;
  .admin-button-com {
    width: 46%;
  }
}
</style>