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="120px">
        <el-form-item label="气表压力" prop="gasPressure" >
          <el-input  style="width: 300px" v-model="form.gasPressure"  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="electronicTag">-->
<!--          <el-select v-model="form.electronicTag" 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="electronicTag">
          <el-input  style="width: 300px" v-model="form.electronicTag"  placeholder="请输入电子标签" maxlength="50" />
        </el-form-item>
        <el-form-item label="有无手轮" prop="isHandwheel">
          <el-radio-group v-model="form.isHandwheel">
            <el-radio :label="1">有</el-radio>
            <el-radio :label="0">无</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否固定" prop="isFixed">
          <el-radio-group v-model="form.isFixed">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="气瓶状态标牌" prop="isStatusSign">
          <el-radio-group v-model="form.isStatusSign">
            <el-radio :label="1">有</el-radio>
            <el-radio :label="0">无</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="验收备注" prop="phone" >
          <el-input type="textarea" style="width: 300px" v-model="form.remake"  placeholder="请输入验收备注" maxlength="200" />
        </el-form-item>
        <p class="inquire-button-one" style="width:300px;margin-left: 100px" @click="submitForm()">提交申请</p>
      </el-form>

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

import { getToken } from "@/utils/auth";
import { gasManageAdd  } from '@/api/gasManage3_0/gasManageSYD'
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.validateStartTime=value[0]
        this.form.validateEndTime=value[1]
        callback();
      }else{
        this.form.validateStartTime=null;
        this.form.validateEndTime=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:{
        isHandwheel:1,
        isFixed:1,
        isStatusSign:1,
      },

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

        gasPressure: [
          { required: true, message: "请输入气表压力，精确到小数点后一位", trigger: "change" }
        ],
        electronicTag: [
          { required: true, message: "请选择电子标签", trigger: "change" }
        ],
        isStatusSign: [
          { required: true, message: "请选择有无手轮", trigger: "change" }
        ],
        isFixed: [
          { required: true, message: "请选择是否固定", trigger: "change" }
        ],
        applyCertificate: [
          { required: true, message: "请选择气瓶状态标牌", trigger: "change" }
        ],
        dateRange: [
          {required: true, validator: validateTime, trigger: 'blur' },
        ],
      },
    };
  },
  created() {

  },
  methods: {

    /* 详情 */
    submitForm(){
      let _this=this;

      this.$refs["form"].validate(valid => {
        if (valid) {
          gasManageAdd(this.form).then(response => {
           if(response.code==200){
             this.msgSuccess("入库成功");
             this.$parent.handleClick('','','back');
           }
          });
        }
      });

    },
    //返回
    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>