FE-V2-PC/src/views/secureAccess/accessRequirement/addPage.vue

<!--新增/编辑准入条件-->
<template>
  <div class="accessRequirementAddPage">
    <el-form :model="form" ref="form" label-width="100px" :rules="rules">
      <el-form-item label="材料名称" prop="materialName">
        <el-input v-model="form.materialName" placeholder="请输入材料名称" style="width:320px;" maxlength="15" ></el-input>
      </el-form-item>
      <el-form-item label="材料描述" prop="materialDescribe">
        <el-input v-model="form.materialDescribe" type="textarea" placeholder="请输入材料描述" style="width:320px;" maxlength="50" ></el-input>
      </el-form-item>
      <!--        <el-form-item label="适用身份" prop="materialSuit">
                <el-radio-group v-model="form.materialSuit" @change="materialTypeChange">
                  <el-radio :label="1">通用</el-radio>
                  <el-radio :label="2">教职工</el-radio>
                  <el-radio :label="3">学生</el-radio>
                </el-radio-group>
              </el-form-item>-->
      <el-form-item label="材料类型" prop="materialType">
        <el-radio-group v-model="form.materialType" @change="radioChange">
          <el-radio :label="1">上传材料</el-radio>
          <el-radio :label="2">关联材料</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="文件格式" prop="fileType" v-if="form.materialType==1">
        <el-checkbox-group v-model="form.fileType">
          <el-checkbox :label="1">PDF</el-checkbox>
          <el-checkbox :label="2">WORD</el-checkbox>
          <el-checkbox :label="3">图片</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="关联材料" prop="relationType" v-if="form.materialType == 2">
        <el-select v-model="form.relationType" placeholder="请选择关联材料">
          <el-option :label="item.name" :value="item.id" v-for="(item,index) in materialTypeList" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="准入说明" prop="text">
        <el-input v-model="form.text" type="textarea" placeholder="请输入准入说明" style="width:320px;" maxlength="50" ></el-input>
      </el-form-item>
      <div class="bottom-button-box">
        <p class="reset-button-one" @click="backPage">取消</p>
        <p class="inquire-button-one" @click="upData">提交</p>
      </div>
    </el-form>
  </div>
</template>

<script>
  import { materialdata,materialdataPut } from "@/api/laboratory/accessRequirement"
  export default {
    name: 'accessRequirementAddPage',
    props:{
      propsData:{},
    },
    data() {
      return {
        materialTypeList:[
          {name:"身份信息",id:1},
          {name:"安全考试证书",id:2}
        ],
        form:{
          materialName:"",
          materialDescribe:"",
          materialSuit:3,
          materialType:1,
          relationType:"",
          fileType:[],
        },
        // 表单校验
        rules: {
          materialName: [
            { required: true, message: "请输入材料名称", trigger: "change" },
            { required: true, message: "请输入材料名称", validator: this.spaceJudgment, trigger: "blur" }
          ],
          materialDescribe: [
            { required: true, message: "请输入材料描述", trigger: "change" },
            { required: true, message: "请输入材料描述", validator: this.spaceJudgment, trigger: "blur" }
          ],
          materialSuit: [
            { required: true, message: "请选择适用身份", trigger: "change" }
          ],
          materialType: [
            { required: true, message: "请选择材料类型", trigger: "change" }
          ],
          relationType: [
            { required: true, message: "请选择关联材料", trigger: "change" }
          ],
          fileType: [
            { required: true, message: "请选择文件格式", trigger: "change" }
          ],
        },

      }
    },
    created() {
      if(this.propsData.id){
        this.form = this.propsData;
        console.log(this.form)
        if(this.form.fileType){
          this.form.fileType=this.form.fileType.map(Number)
        }else{
          this.form.fileType=[];
        }

        if(this.form.materialSuit == 2){
          let newList = [
            {name:"身份信息",id:1},
          ];
          this.$set(this,'materialTypeList',newList)
        }
      }
    },
    mounted(){

    },
    methods: {
      //单选事件
      radioChange(e){
        console.log(e)
        if(e==1){//上传材料

        }else if(e==2){//关联材料
          this.form.fileType=[];
          this.form.fileTypeName='';
        }
      },
      materialTypeChange(e){
        if(e == 2){
          let newList = [
            {name:"身份信息",id:1},
          ];
          this.$set(this,'materialTypeList',newList)
          this.$set(this.form,'relationType',"");
        }else{
          let newList = [
            {name:"身份信息",id:1},
            {name:"安全考试证书",id:2}
          ];
          this.$set(this,'materialTypeList',newList)
        }
      },
      //返回
      backPage(){
        this.$parent.offPage();
      },
      upData(){
        let self = this;
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.$confirm('是否确认提交?', "", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }).then(function() {
              if(self.form.id){
                self.materialdataPut();
              }else{
                self.materialdata();
              }
            }).then(() => {}).catch(() => {});
          }
        });
      },
      materialdata(){
        if(this.form.fileType){
          let newFileType = this.form.fileType.join(',')
          this.form.fileType = newFileType;
        }

        materialdata(this.form).then( response => {
          this.msgSuccess("提交成功")
          this.backPage();
        });
      },
      materialdataPut(){
        if(this.form.fileType){
          let newFileType = this.form.fileType.join(',')
          this.form.fileType = newFileType;
        }
        materialdataPut(this.form).then( response => {
          this.msgSuccess("编辑成功")
          this.backPage();
        });
      },
    }
  }
</script>

<style scoped lang="scss">
  .accessRequirementAddPage{
    flex:1;
    overflow-y: scroll;
    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
    padding:50px 0 50px 60px!important;
    border-radius: 10px;
    .bottom-button-box{
      margin-top:50px;
      display: flex;
      p:nth-child(1){
        margin:0 20px 0 100px;
      }
      .inquire-button-one{
        width: 140px;
      }
    }
  }
</style>