FE-V2-PC/src/views/gasManage_syd/manage/gasManage/gasManageAdd.vue

<!--资格申请-添加-->
<template>
  <div class="addPage">
    <div class="addPage_title">
      <p>气瓶入库</p>
      <p  class="reset-button-one" @click="backPage">返回</p>
    </div>
    <div class="addPage_b">
      <el-form class="addPage_b_b" :model="form" ref="form" :rules="rules" label-position="right" label-width="100px">
        <el-form-item label="气表压力" prop="phone" >
          <el-input  style="width: 300px" v-model="form.phone"  placeholder="请输入气表压力，精确到小数点后一位" maxlength="50" />
        </el-form-item>
        <el-form-item label="检验有效期" prop="dateRange" >
          <el-date-picker
            :clearable="false"
            v-model="form.dateRange"
            size="small"
            style="width: 300px"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            :picker-options="pickerOptions0"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="电子标签" prop="status">
          <el-select v-model="form.status" clearable placeholder="请选择电子标签" style="width: 300px">
            <el-option
              v-for="item in optionsListTwo"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="有无手轮" prop="type">
          <el-radio-group v-model="form.type">
            <el-radio :label="1">有</el-radio>
            <el-radio :label="2">无</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否固定" prop="type">
          <el-radio-group v-model="form.type">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="2">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="气瓶状态标牌" prop="type">
          <el-radio-group v-model="form.type">
            <el-radio :label="1">有</el-radio>
            <el-radio :label="2">无</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="验收备注" prop="phone" >
          <el-input type="textarea" style="width: 300px" v-model="form.phone"  placeholder="请输入验收备注" maxlength="200" />
        </el-form-item>
        <p class="inquire-button-one" style="width:300px;margin-left: 100px" @click="handleClick('','form','next')">提交申请</p>
      </el-form>

    </div>
  </div>
</template>
<script>

import { getToken } from "@/utils/auth";
import { gasApplyDetail, } from '@/api/gasManage3_0/gasManage'
let Base64 = require('js-base64').Base64;
export default {
  name: "addPage",
  props:{
    pageData: {},
  },
  data() {
    // 时间的校验
    const validateTime = (rule, value, callback) => {
      console.log(value)
      if(value && value.length>0){
        this.form.startTime=value[0]
        this.form.endTime=value[1]
        callback();
      }else{
        this.form.startTime=null;
        this.form.endTime=null
        callback(new Error('请选择使用期限'))
      }
    }
    return {
      pageType:1,
      uploadImgUrl: window.location.href.split('://')[0]+'://' + process.env.VUE_APP_BASE_API + "/file/upload", // 上传的图片服务器地址
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      // 设置只能选择当前日期及之后的日期
      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;//如果没有后面的-8.64e7就是不可以选择今天的
        }
      },

      loading:false,
      form:{
      },

      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize:20,
      },
      total:0,
      tableData:[{
        num:0,
      }],
      optionsListTwo:[],
      // 表单校验
      rules: {

        applyCertificate: [
          { required: true, message: "请上传用气申请表", trigger: "change" }
        ],
        dateRange: [
          {required: true, validator: validateTime, trigger: 'blur' },
        ],
      },
    };
  },
  created() {

  },
  methods: {

    /* 详情 */
    getInfo(id){
      let _this=this;
      gasApplyDetail(id).then( response => {
        let res=response.data;
        if(response.code==200){
          _this.form=res;
        }
      });

    },
    //返回
    backPage(){
      this.$parent.handleClick('','','back');
    },

  },
  mounted() {

    //this.getInfo(this.pageData2.id);
  }

};
</script>

<style scoped lang="scss">
.addPage {
  flex:1;
  display: flex!important;
  flex-direction: column;
  box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
  border-radius:10px;
  /*顶部*/
  .addPage_title{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #E0E0E0;
    padding-top:20px;
    p:nth-child(1){
      flex: 1;
      line-height:60px;
      color: #0045AF;
      font-size:18px;
      margin:0 12px 0 20px;
    }
    p:nth-child(2){
      margin-right:20px;
    }
    p:nth-child(3){
      margin-right:20px;
    }
  }
  /*入库*/
  .addPage_b{
    display: flex;
    justify-content: center;
    padding-top: 60px;
  }
}
</style>