crowd-test-service-frontend/src/components/cheat/ProjectAdd.vue

<template>
  <div class="create-container">
    <div class="create-body">
      <div class="title">创建项目</div>
      <el-tabs tabPosition="top" type="card">
        <el-tab-pane label="单个创建项目">
          <el-form :model="project" :rules="rules" ref="project" label-width="12%" class="demo-report">
            <el-form-item label="项目名称" prop="name">
              <el-input v-if="isModifyMode" v-model="project.name"></el-input>
              <!--<span v-if="!isModifyMode">{{project.name}}</span>-->
            </el-form-item>
            <el-form-item label="项目描述" prop="name">
              <el-input v-if="isModifyMode" v-model="project.description"></el-input>
              <!--<span v-if="!isModifyMode">{{project.description}}</span>-->
            </el-form-item>
            <el-form-item label="联系人姓名" prop="name">
              <el-input v-if="isModifyMode" v-model="project.contactName"></el-input>
              <!--<span v-if="!isModifyMode">{{project.contactName}}</span>-->
            </el-form-item>
            <el-form-item label="联系人电话" prop="name">
              <el-input v-if="isModifyMode" v-model="project.contactPhone"></el-input>
              <!--<span v-if="!isModifyMode">{{project.contactPhone}}</span>-->
            </el-form-item>
            <el-form-item label="项目定价" prop="name">
              <el-input v-if="isModifyMode" v-model="project.price"></el-input>
              <!--<span v-if="!isModifyMode">{{project.price}}</span>-->
            </el-form-item>
            <el-form-item label="平台" prop="platform">
              <el-checkbox-group v-if="isModifyMode" 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>
              <!--<span-->
              <!--v-if="!isModifyMode"-->
              <!--class="badge"-->
              <!--v-for="item in project.platform"-->
              <!--&gt;{{platformType[item]}}</span>-->
            </el-form-item>
            <el-form-item label="服务类型" prop="type">
              <el-checkbox-group v-if="isModifyMode" v-model="project.type">
            <span v-for="(item,index) in serviceType" :key="index">
              <el-checkbox :label="item" name="type">{{item}}&nbsp;&nbsp;&nbsp;&nbsp;</el-checkbox>
            </span>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item prop="file" label="项目需求文档">
              <el-upload
                v-if="isModifyMode"
                drag
                class="upload-demo"
                action=""
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                multiple
                :limit="1"
                :on-exceed="handleExceed"
                :before-upload="beforeFileUpload"
                :http-request="uploadRequireDoc"
                :file-list="project.requireDoc"
              >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">
                  将文件拖到此处，或
                  <em>点击上传</em>
                </div>
                <div class="el-upload__tip" slot="tip">请上传报告文件</div>
              </el-upload>
              <!--<div v-if="!isModifyMode">-->
              <!--<span v-if="project.file==null || project.file.length === 0">暂无文件</span>-->
              <!--<a :href="project.file[0]" v-if="project.file!=null && project.file.length > 0"><i-->
              <!--class="fa fa-file-text-o"></i>-->
              <!--{{project.file[0]}}</a>-->
              <!--</div>-->
            </el-form-item>
            <el-form-item prop="file" label="项目待测文件">
              <el-upload
                v-if="isModifyMode"
                drag
                class="upload-demo"
                action=""
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                multiple
                :limit="1"
                :on-exceed="handleExceed"
                :http-request="uploadApkFile"
                :before-upload="beforeFileUpload"
                :file-list="project.file"
              >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">
                  将文件拖到此处，或
                  <em>点击上传</em>
                </div>
                <div class="el-upload__tip" slot="tip">请上传报告文件</div>
              </el-upload>
              <!--<div v-if="!isModifyMode">-->
              <!--<span v-if="project.file==null || project.file.length === 0">暂无文件</span>-->
              <!--<a :href="project.file[0]" v-if="project.file!=null && project.file.length > 0"><i-->
              <!--class="fa fa-file-text-o"></i>-->
              <!--{{project.file[0]}}</a>-->
              <!--</div>-->
            </el-form-item>
            <el-form-item label="项目截止时间" prop="datetime">
              <div class="block" v-if="isModifyMode">
                <el-date-picker
                  v-model="project.datetime"
                  type="datetime"
                  placeholder="选择截止时间"
                  align="right"
                  :picker-options="pickerOptions"
                ></el-date-picker>
              </div>
              <span v-if="!isModifyMode">{{new Date(project.datetime)}}</span>
            </el-form-item>
            <!--<el-form-item v-if="!isModifyMode">-->
            <!--<div class="btn btn-medium btn-info" @click="modifyInfo()">修改</div>-->
            <!--<div class="btn btn-medium" @click="cancelModify()">返回</div>-->
            <!--</el-form-item>-->
            <el-form-item v-if="isModifyMode">
              <div class="btn btn-primary btn-info" @click="submitInfo()">确认提交</div>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="批量创建项目">
          <el-form :model="project" :rules="rules" ref="project" label-width="12%" class="demo-report">
            <el-form-item prop="file" label="Excel模板文件">
              <div>
                <a :href="downloadFile"><i
                  class="fa fa-file-text-o"></i>
                  {{downloadFile}}</a>
              </div>
            </el-form-item>
            <el-form-item type="file" prop="file" label="Excel文件">
              <el-upload
                v-if="isModifyMode"
                drag
                class="upload-demo"
                action=""
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                :limit="1"
                :on-exceed="handleExceed"
                :before-upload="beforeFileUpload"
                :http-request="uploadProjectCreateExcelFile"
                :file-list="project.excelFile"
              >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">
                  将文件拖到此处，或
                  <em>点击上传</em>
                </div>
                <div class="el-upload__tip" slot="tip">请上传报告文件</div>
              </el-upload>
              <!--<div v-if="!isModifyMode">-->
              <!--<span v-if="project.file==null">暂无文件</span>-->
              <!--<a :href="project.file" v-if="project.file!=null"><i class="fa fa-file-text-o"></i>-->
              <!--{{project.file}}</a>-->
              <!--</div>-->
            </el-form-item>
            <el-form-item v-if="isModifyMode">
              <div class="btn btn-primary btn-info" @click="ensureSubmitExcel()">确认提交</div>
            </el-form-item>
          </el-form>
          <el-dialog
            title="您添加的项目"
            :visible.sync="dialogVisible"
            width="80%"
            :before-close="handleDialogClose"
            center>
        <span>
          <el-table
            :data="projectList"
            style="width: auto">
      <el-table-column
        prop="projectDetails.name"
        label="项目名称">
      </el-table-column>
            <el-table-column
              prop="projectDetails.platform"
              label="项目测试平台">
            </el-table-column>
            <el-table-column
              prop="projectDetails.contactName"
              label="项目联系人">
            </el-table-column>
            <el-table-column
              prop="projectDetails.contactPhone"
              label="联系方式">
            </el-table-column>
            <el-table-column
              prop="projectDetails.type"
              label="项目测试类型">
            </el-table-column>
            <el-table-column
              prop="projectDetails.desc"
              label="项目需求描述">
            </el-table-column>
            <el-table-column
              prop="projectDetails.desc"
              label="测试报告内容">
            </el-table-column>
            <el-table-column
              prop="projectDetails.desc"
              label="测试报告结论">
            </el-table-column>
    </el-table>
        </span>
            <span slot="footer" class="dialog-footer">
    <el-button @click="handleDialogClose">取消</el-button>
    <el-button type="primary" @click="ensureSubmitExcel">确认</el-button>
  </span>
          </el-dialog>
        </el-tab-pane>

      </el-tabs>

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

<script>
import Http from '@/js/http.js'
import Apis from '@/js/api.js'
import PlatformType from '@/constants/enum/platform-type.js'
import {notify} from '@/constants/index'
import {getAllServiceTypes} from '@/js/index'

export default {
  name: 'ProjectAdd',
  data () {
    return {
      userId: 0,
      dialogVisible: false,
      isModifyMode: true,
      serviceType: [],
      platform: PlatformType,
      isFormSubmit: true,
      downloadFile: '123.xls',
      project: {
        name: '',
        description: '',
        contactName: '',
        contactPhone: '',
        platform: [],
        type: [],
        requireDoc: [],
        requireDocUrl: '',
        file: [],
        fileUrl: '',
        excelFile: [],
        excelFileUrl: '',
        price: '',
        datetime: ''
      },
      projectList: [
        {
          'projectDetails': {
            'id': 'PROJECT-2019081319025',
            'name': '网易云测试',
            'contactName': '孙加辉',
            'contactPhone': '13628972489',
            'type': [
              1
            ],
            'platform': [
              1,
              0
            ],
            'desc': '无',
            'doc': '',
            'file': '',
            'resource': 1,
            'location': {
              'provinceCode': '江苏',
              'cityCode': '南京'
            },
            'institution': 1,
            'datetime': '2019-08-13T11:14:08.192+0000',
            'price': 30000.0,
            'budget': 30000.0,
            'usage': null
          },
          'taskList': [
            {
              'id': 'TASK-LDSM-2019081319013',
              'projectId': 'PROJECT-2019081319025',
              'title': '网易云测试-安全漏洞扫描',
              'description': null,
              'quotePrice': 30000.0,
              'fixedPrice': 30000.0,
              'resource': 0,
              'location': {
                'provinceCode': '江苏',
                'cityCode': '南京'
              },
              'institution': 1,
              'serviceType': 1,
              'status': 5,
              'datetime': '2019-08-13T11:14:08.192+0000'
            }
          ],
          'reportList': null
        },
        {
          'projectDetails': {
            'id': 'PROJECT-2019081319026',
            'name': '网易测试',
            'contactName': '孙加辉',
            'contactPhone': '0797-8877663',
            'type': [
              4,
              3
            ],
            'platform': [
              2
            ],
            'desc': '无',
            'doc': '',
            'file': '',
            'resource': 1,
            'location': {
              'provinceCode': '江苏',
              'cityCode': '南京'
            },
            'institution': 1,
            'datetime': '2019-08-13T11:14:08.194+0000',
            'price': 30000.0,
            'budget': 30000.0,
            'usage': null
          },
          'taskList': [
            {
              'id': 'TASK-GNCS-2019081319006',
              'projectId': 'PROJECT-2019081319026',
              'title': '网易测试-功能测试',
              'description': null,
              'quotePrice': 30000.0,
              'fixedPrice': 30000.0,
              'resource': 0,
              'location': {
                'provinceCode': '江苏',
                'cityCode': '南京'
              },
              'institution': 1,
              'serviceType': 4,
              'status': 5,
              'datetime': '2019-08-13T11:14:08.194+0000'
            }
          ],
          'reportList': null
        }
      ],
      excelFile: {},
      rules: {
        // name: [
        //   {required: true, message: '请输入报告名称', trigger: 'blur'}
        //   // { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        // ],
        // abstract: [
        //   {
        //     required: true,
        //     message: '请输入摘要信息',
        //     trigger: 'change'
        //   }
        // ],
        // type: [
        //   {required: true, message: '请选择报告类型', trigger: 'change'}
        // ],
        // conclusion: [
        //   {required: true, message: '请输入报告结论', trigger: 'blur'}
        // ]
      },
      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)
            }
          }
        ]
      },
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
    init () {
      this.setServiceType()
    },
    //加载数据
    loadData: function () {
    },
    modifyInfo () {
      this.isModifyMode = true
    },
    submitInfo () {
      //this.isModifyMode = false
      const newProject = {
        userId: 3,
        name: this.project.name,
        description: this.project.description,
        contactName: this.project.contactName,
        contactPhone: this.project.contactPhone,
        platform: this.project.platform,
        type: this.project.type,
        doc: this.project.requireDocUrl,
        file: this.project.fileUrl,
        price: this.project.price,
        datetime: this.project.datetime
      }
      Http.post(Apis.PROJECT.ADD_PROJECT, newProject).then((res) => {
        notify('success', '项目添加成功')
        console.log(res)
      }).catch(error => {
        notify('error', error.data.msg)
      })
    },
    // cancelModify () {
    //   this.isModifyMode = false
    // },
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handleExceed (files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${
          files.length
          } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      )
    },
    beforeRemove (file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    beforeFileUpload () {

    },
    uploadProjectCreateExcelFile (param) {
      const formData = new FormData()
      let config = {
        //添加请求头
        headers: {'Content-Type': 'multipart/form-data'},
      }
      formData.append('file', param.file)
      Http.upload(Apis.PROJECT.ADD_PROJECT_BY_EXCEL, formData, config).then((res) => {
        console.log(res)
        this.projectList = res.data
        this.showDialog()
        //notify('success', '项目添加成功')
      }).catch(error => {
        notify('error', error)
      })
    },
    uploadRequireDoc (param) {
      const formData = new FormData()
      let config = {
        //添加请求头
        headers: {'Content-Type': 'multipart/form-data'},
      }
      formData.append('file', param.file)
      Http.upload(Apis.FILE.REQUIREMENT_FILE.replace('{userId}', 3), formData, config).then((res) => {
        console.log('上传成功')
        this.project.requireDocUrl = res.data
        console.log(res.data)
        notify('success', '上传成功')
      }).catch(error => {
        notify('error', error.data.msg)
      })
    },
    uploadApkFile (param) {
      const formData = new FormData()
      let config = {
        //添加请求头
        headers: {'Content-Type': 'multipart/form-data'},
      }
      formData.append('file', param.file)
      Http.upload(Apis.FILE.APK.replace('{userId}', 3), formData, config).then((res) => {
        console.log('上传成功')
        this.project.fileUrl = res.data
        console.log(res)
        notify('success', '上传成功')
      }).catch(error => {
        notify('error', error.data.msg)
      })
    },
    handleDialogClose (done) {
      this.$confirm('确认退出？退出前请记录下登录账号和密码，否则无法找回！！！')
        .then(_ => {
          //done()
          this.hideDialog()
        })
        .catch(_ => {
        })
    },
    ensureSubmitExcel () {
      notify('success', '添加成功')
      // Http.post('',this.projectList).then((res)=>{
      //
      // }).catch((error)=>{
      //
      // })
    },
    showDialog () {
      this.dialogVisible = true
    },
    hideDialog () {
      this.dialogVisible = false
      this.resetForm()
    },
    setServiceType () {
      this.serviceType = getAllServiceTypes()
    }
  },
  created: function () {
  }
}
</script>

<style scoped>
  .el-radio {
    margin: 10px 20px 10px 0;
  }

  .el-form-item /deep/ .el-tabs__content {
    max-height: 120px !important;
    overflow: auto;
  }

  .el-row {
    margin-bottom: 10px;
  }

  .el-input {
    width: 400px;
  }
</style>