|
@@ -0,0 +1,223 @@
|
|
|
|
+<template>
|
|
|
|
+ <div class="create-container">
|
|
|
|
+ <div class="create-body">
|
|
|
|
+ <div class="title">创建项目</div>
|
|
|
|
+ <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.resource}}</span>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item prop="file" label="项目需求文档">
|
|
|
|
+ <el-upload
|
|
|
|
+ v-if="isModifyMode"
|
|
|
|
+ drag
|
|
|
|
+ class="upload-demo"
|
|
|
|
+ action="https://jsonplaceholder.typicode.com/posts/"
|
|
|
|
+ :on-remove="handleRemove"
|
|
|
|
+ :before-remove="beforeRemove"
|
|
|
|
+ multiple
|
|
|
|
+ :limit="1"
|
|
|
|
+ :on-exceed="handleExceed"
|
|
|
|
+ :before-upload="beforeFileUpload"
|
|
|
|
+ :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">暂无文件</span>
|
|
|
|
+ <a :href="project.photo" v-if="project.photo!=null"><i class="fa fa-file-text-o"></i>
|
|
|
|
+ {{project.photo}}</a>
|
|
|
|
+ </div>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item prop="file" label="项目待测文件">
|
|
|
|
+ <el-upload
|
|
|
|
+ v-if="isModifyMode"
|
|
|
|
+ drag
|
|
|
|
+ class="upload-demo"
|
|
|
|
+ action="https://jsonplaceholder.typicode.com/posts/"
|
|
|
|
+ :on-remove="handleRemove"
|
|
|
|
+ :before-remove="beforeRemove"
|
|
|
|
+ multiple
|
|
|
|
+ :limit="1"
|
|
|
|
+ :on-exceed="handleExceed"
|
|
|
|
+ :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">暂无文件</span>
|
|
|
|
+ <a :href="project.photo" v-if="project.photo!=null"><i class="fa fa-file-text-o"></i>
|
|
|
|
+ {{project.photo}}</a>
|
|
|
|
+ </div>
|
|
|
|
+ </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 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>
|
|
|
|
+ <div class="btn btn-primary" @click="cancelModify()">取消</div>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ </el-form>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+import Http from '../../js/http'
|
|
|
|
+import Apis from '../../js/api'
|
|
|
|
+
|
|
|
|
+export default {
|
|
|
|
+ name: 'ProjectAdd',
|
|
|
|
+ data () {
|
|
|
|
+ return {
|
|
|
|
+ userId: 0,
|
|
|
|
+ isModifyMode: true,
|
|
|
|
+ project: {
|
|
|
|
+ name: '',
|
|
|
|
+ description: '',
|
|
|
|
+ contactName: '',
|
|
|
|
+ contactPhone: '',
|
|
|
|
+ platform: '',
|
|
|
|
+ type: '',
|
|
|
|
+ requireDoc: [],
|
|
|
|
+ file: [],
|
|
|
|
+ price: [],
|
|
|
|
+ datetime: ''
|
|
|
|
+ },
|
|
|
|
+ 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)
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ ]
|
|
|
|
+ },
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ //加载数据
|
|
|
|
+ loadData: function () {
|
|
|
|
+ },
|
|
|
|
+ modifyInfo () {
|
|
|
|
+ this.isModifyMode = true
|
|
|
|
+ },
|
|
|
|
+ submitInfo () {
|
|
|
|
+ this.isModifyMode = false
|
|
|
|
+ Http.post(Apis.PROJECT.ADD_PROJECT, this.project).then((res) => {
|
|
|
|
+ console.log(res)
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ 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 () {
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ 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;
|
|
|
|
+ }
|
|
|
|
+</style>
|