暑期项目实训（三）

---

前言

这几天负责需求分析的同学跟产品顾问进行沟通，明确了各个模块的功能需求，同时也搭建好了项目的前端开发环境，目前可以先不用等后端着手开发前端界面。

---

一、前端基本配置

1.git配置

项目使用gitee仓库进行协同开发，需要用到git,可以参考这篇博客https://www.cnblogs.com/aminor/p/14946341.html，说的比较详细。

2.前端框架及说明

vue版本采用vue 2.6.x版本,
element-ui版本采用vue2配套版本，组件风格保持统一
其他配置版本参见package.json

3.仓库代码说明

代码仓库的init project，是一个由vue-cli 4 构建的脚手架项目，包含：vue-cli 4 脚手架，vue2 框架，element-ui 组件库， vue-router 路由导航，vue-axios 基于 promise 的 HTTP 库，vuex 统一状态管理
拉取代码后，在安装npm包管理器的前提下
使用npm install安装依赖
使用npm run serve运行项目

4.CSS规范

采用flex布局
属性速查博客：https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

5.mockjs

Mock.js用于模拟数据，不需要等后端，可以先做一些简单的界面
mockjs的使用详见
http://mockjs.com/examples.html#String
https://www.jianshu.com/p/5dfa9f0bb11e

二、项目开发

用git将项目导入到本地，前面也说到如何拉取项目，然后就自己开发的模块创建了相应的文件，目前就简单地写了个表单，代码如下：

<template>
  <div>
    <el-form id = "qualityForm" ref="form" :model="qualityForm" label-width="100px" size="large">
      <el-form-item label="瑕疵类别">
        <el-select v-model="qualityForm.name" filterable clearable placeholder="请选择" style="width: 100%;">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="质检时间">
        <el-col :span="10">
          <el-date-picker type="date" placeholder="选择日期" v-model="qualityForm.date1" style="width: 100%;"></el-date-picker>
        </el-col>
        <el-col class="line" :span="4">----</el-col>
        <el-col :span="10">
          <el-time-picker placeholder="选择时间" v-model="qualityForm.date2" style="width: 100%;"></el-time-picker>
        </el-col>
      </el-form-item>

      <el-form-item label="质检地点">
        <el-col :span="10">
          <el-input v-model="qualityForm.workshop" clearable style="width: 100%;"></el-input>
        </el-col>
        <el-col class="line" :span="4">生产线</el-col>
        <el-col :span="10">
          <el-input v-model="qualityForm.productionLine" clearable style="width: 100%;"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="样品数量">
        <el-col :span="10">
            <el-input v-model="qualityForm.total" clearable style="width: 100%;"></el-input>
        </el-col>
        <el-col class="line" :span="4">不合格数量</el-col>
        <el-col :span="10">
            <el-input v-model="qualityForm.unqualifiedNum" clearable style="width: 100%;"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="问题工序">
        <el-input v-model="qualityForm.problemProcess" clearable style="width: 100%;"></el-input>
      </el-form-item>
      <el-form-item label="执行工序人员">
        <el-input v-model="qualityForm.processPersonnel" clearable style="width: 100%;"></el-input>
      </el-form-item>
      <el-form-item label="具体瑕疵描述">
        <el-input v-model="qualityForm.description" clearable style="width: 100%;"></el-input>
      </el-form-item>

      <el-form-item size="large">
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>

    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <span>提交成功</span>
      <span slot="footer" class="dialog-footer">
<!--        <el-button @click="dialogVisible = false">取 消</el-button>-->
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>

export default {
  data() {
    return {
      qualityForm: {
        name: '',
        date1: '',
        date2: '',
        workshop:'',
        productionLine:'',
        total:'',
        unqualifiedNum:'',
        problemProcess:'',
        processPersonnel:'',
        description:'',
      },
      dialogVisible: false,
      options: [{
        value: '选项1',
        label: '瑕疵1'
      }, {
        value: '选项2',
        label: '瑕疵2'
      }, {
        value: '选项3',
        label: '瑕疵3'
      }, {
        value: '选项4',
        label: '瑕疵4'
      }, {
        value: '选项5',
        label: '瑕疵5'
      }],
      value: ''
    };
  },
  methods: {
    onSubmit() {
      this.$axios
          .post('data/quality', {
            name: this.qualityForm.name,
            date1: this.qualityForm.date1,
            date2: this.qualityForm.date2,
            workshop: this.qualityForm.workshop,
            productionLine: this.qualityForm.productionLine,
            total: this.qualityForm.total,
            unqualifiedNum: this.qualityForm.unqualifiedNum,
            problemProcess: this.qualityForm.problemProcess,
            processPersonnel:this.qualityForm.processPersonnel,
            description:this.qualityForm.description,
          }).then(resp => {
            console.log(this.qualityForm)
            if (resp && resp.status === 200) {
              //this.$emit('onSubmit')
              this.clear()
              this.dialogVisible = true
            }
      })
    },
    clear () {
      this.qualityForm = {
        name: '',
        date1: '',
        date2: '',
        workshop:'',
        productionLine:'',
        total:'',
        unqualifiedNum:'',
        problemProcess:'',
        processPersonnel:'',
        description:'',
      }
    },
  }
};
</script>

---

总结

这几天做的内容就这些，接下来还要学习vue，尽力把前端做好。