crowd-test-service-frontend/src/components/project/ProjectCreate.vue

<template>
  <div class="create-container">
    <div class="title h1">申请项目</div>
    <div class="create-body">
      <el-form :model="project" :rules="rules" ref="project" label-width="12%" class="demo-project">
        <el-form-item label="项目名称" prop="name">
          <el-input v-model="project.name"></el-input>
        </el-form-item>
        <el-form-item label="联系方式" prop="contact">
          <div>
            <el-row :gutter="2">
              <el-col :span="2">
                <span>联系人</span>
              </el-col>
              <el-col :span="10">
                <el-input v-model="project.contact.name" placeholder="请输入联系人姓名"></el-input>
              </el-col>
            </el-row>
            <el-row :gutter="2">
              <el-col :span="2">
                <span>联系人电话</span>
              </el-col>
              <el-col :span="10">
                <el-input v-model="project.contact.phone" placeholder="请输入联系人电话"></el-input>
              </el-col>
            </el-row>
          </div>
        </el-form-item>
        <el-form-item label="平台" prop="platform">
          <el-checkbox-group v-model="project.platform">
            <el-checkbox label="0">IOS</el-checkbox>
            <el-checkbox label="1">ANDROID</el-checkbox>
            <el-checkbox label="2">WEB</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="需求描述" prop="desc">
          <el-input type="textarea" v-model="project.desc"></el-input>
        </el-form-item>
        <el-form-item label="价格" prop="price">
          <el-input type="number" v-model="project.price">
            <template slot="append">¥</template>
          </el-input>
        </el-form-item>
        <el-form-item label="服务类型" prop="type">
          <el-checkbox-group v-model="project.type">
            <el-checkbox label="接口测试" name="type"></el-checkbox>
            <el-checkbox label="安全漏洞扫描" name="type"></el-checkbox>
            <el-checkbox label="风险评估服务" name="type"></el-checkbox>
            <el-checkbox label="源代码安全审计服务" name="type"></el-checkbox>
            <el-checkbox label="功能测试服务" name="type"></el-checkbox>
            <el-checkbox label="性能测试" name="type"></el-checkbox>
            <el-checkbox label="功能和易用性测试" name="type"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="用途" prop="useage">
          <el-input v-model="project.useage"></el-input>
        </el-form-item>
        <el-form-item label="预算" prop="budget">
          <el-input type="number" v-model="project.budget">
            <template slot="append">¥</template>
          </el-input>
        </el-form-item>
        <el-form-item label="项目可见性" prop="resource">
          <el-tabs
            :tab-position="tabPosition"
            v-model="project.resource"
            style="max-height: 200px;"
          >
            <el-tab-pane label="定向" name="定向">
              <el-radio-group v-model="project.institution">
                <el-radio
                  :label="item"
                  name="type"
                  v-for="item,index in institutionArray"
                  :key="index"
                ></el-radio>
              </el-radio-group>
            </el-tab-pane>
            <el-tab-pane label="非定向" name="非定向"></el-tab-pane>
          </el-tabs>
        </el-form-item>
        <el-form-item label="需求文档" prop="doc">
          <el-upload
            class="upload-demo"
            drag
            action="https://jsonplaceholder.typicode.com/posts/"
            multiple
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或
              <em>点击上传</em>
            </div>
            <div class="el-upload__tip" slot="tip">请上传需求文档</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="安装包" prop="file">
          <el-upload
            class="upload-demo"
            drag
            action="https://jsonplaceholder.typicode.com/posts/"
            multiple
            :before-upload="beforeFileUpload"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或
              <em>点击上传</em>
            </div>
            <div class="el-upload__tip" slot="tip">只能上传Android或IOS安装包文件</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="项目截止时间" prop="datetime">
          <div class="block">
            <el-date-picker
              v-model="project.datetime"
              type="datetime"
              placeholder="选择截止时间"
              align="right"
              :picker-options="pickerOptions"
            ></el-date-picker>
          </div>
        </el-form-item>
        <el-form-item>
          <div class="btn btn-medium btn-info" @click="submitForm('project')">立即申请</div>
          <div class="btn btn-medium" @click="resetForm('project')">重置</div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import Enum from "@/constants/enum/index";
import PlatformType from "@/constants/enum/platform-type";
import provinceCity from "@/constants/provinceCity.json";
export default {
  name: "ProjectCreate",
  data() {
    var validatePass = (rule, value, callback) => {
      var reg = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
      if (value.phone) {
        if (!reg.test(value.phone)) {
          callback(new Error("请检查手机号码"));
        } else {
          callback();
        }
      }
    };
    return {
      tabPosition: "top",
      institutionArray: Enum.institution,
      platformType: [],
      project: {
        name: "",
        contact: {
          name: "",
          phone: ""
        },
        type: [],
        platform: [],
        desc: "",
        doc: "",
        file: "",
        resource: "非定向",
        institution: "",
        datetime: "",
        price: "",
        useage: "",
        budget: ""
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            }
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            }
          }
        ]
      },
      rules: {
        name: [
          { required: true, message: "请输入项目名称", trigger: "blur" }
          // { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        type: [
          {
            type: "array",
            required: true,
            message: "请至少选择一种服务类型",
            trigger: "change"
          }
        ],
        platform: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个平台",
            trigger: "change"
          }
        ],
        desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }],
        contact: [{ validator: validatePass, trigger: "blur" }],
        resource: [
          {
            required: true,
            message: "请选择项目可见性",
            trigger: "change"
          }
        ]
      }
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.init();
    });
  },
  watch: {
    "project.resource"() {
      if (this.project.resource == "非定向") {
        this.project.institution = "";
      }
    },
    deep: true
  },
  methods: {
    init() {
      this.project.platform.map(item => {
        this.platformType.push(PlatformType[item]);
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          console.log(this.project);
          //提交 project
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.project.name = "";
      this.project.type = [];
      this.project.platform = [];
      this.project.desc = "";
      this.project.file = "";
      this.project.doc = "";
      this.project.contact = {
        name: "",
        phone: ""
      };

      this.project.resource = "非定向";
      this.project.institution = "";
      this.project.datetime = "";
      this.project.price = "";
      this.project.useage = "";
      this.project.budget = "";
    },
    beforeFileUpload(file) {
      const isAPK = file.type === "application/vnd.android.package-archive";
      const isDMG = file.type === "application/octet-stream";

      if (!isAPK && !isDMG) {
        this.$message.error("上传安装包只能是 APK 或 DMG 格式!");
      }
      return isAPK && isDMG;
    }
  }
};
</script>

<style lang="less" scoped>
.el-col {
  padding: 0 !important;
}
.el-row {
  margin-bottom: 10px;
}
.el-radio {
  margin: 10px 20px 10px 0;
}
.el-form-item /deep/.el-tabs__content {
  max-height: 120px !important;
  overflow: auto;
}
</style>