crowd-test-service-frontend/src/components/task/TaskCreate.vue

<template>
  <div class="create-container" v-loading="loading">
    <div class="title h1">创建任务</div>
    <div class="create-body">
      <el-form :model="task" :rules="rules" ref="task" label-width="120px" class="demo-task" style="margin:0 100px">
        <el-form-item label="任务名称" prop="name" style="width:700px;">
          <el-input size="small" v-model="task.name"></el-input>
        </el-form-item>
        <el-form-item label="任务描述" prop="desc" style="width:700px;">
          <el-input autosize type="textarea" style="width: 400px" v-model="task.desc"></el-input>
        </el-form-item>
        <el-form-item label="任务报价" prop="quotePrice" style="width:700px;">
          <el-input size="small" type="number" v-model="task.quotePrice">
            <template slot="append">¥</template>
          </el-input>
        </el-form-item>
        <!--<el-form-item type="number" label="任务定价" prop="fixedPrice">-->
        <!--<el-input v-model="task.fixedPrice">-->
        <!--<template slot="append">¥</template>-->
        <!--</el-input>-->
        <!--</el-form-item>-->
        <el-form-item label="测试类型" prop="type">
          <el-radio-group v-model="task.type" @change="handleTestTypeChange">
            <span v-for="(item,index) in serviceType" :key="index">
              <el-radio :label="item.code" name="type">{{ item.name }}</el-radio>
            </span>
          </el-radio-group>
        </el-form-item>


        <el-form-item label="协同模式" prop="collaborativeType" style="width:700px;" v-if="currType.type==1">
          <el-radio-group v-model="task.endPoint.collaborativeType">
            <el-radio :label="0">协同</el-radio>
            <el-radio :label="1">非协同</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="任务可见性" prop="resource" style="width:1000px;">
          <el-tabs :tab-position="tabPosition" v-model="task.resource">
            <el-tab-pane v-if="currType.type==0" :label="resourceType[0]" name="0">
              <el-radio-group v-model="task.institution">
                <el-radio
                  :label="item"
                  name="type"
                  v-for="item,index in institutionArray"
                  :key="index"
                >{{ item.name }}
                </el-radio>
              </el-radio-group>
            </el-tab-pane>
            <!--<el-tab-pane :label="resourceType[1]" name="1">-->
            <!--<provincecity-->
            <!--ref="addFormProvince"-->
            <!--@selectChange="locationChange"-->
            <!--:provinceCode="task.location.provinceCode"-->
            <!--:cityCode="task.location.cityCode"-->
            <!--&gt;</provincecity>-->
            <!--</el-tab-pane>-->
            <el-tab-pane :label="resourceType[2]" name="2"></el-tab-pane>
          </el-tabs>
        </el-form-item>

        <el-form-item label="领取人数" prop="contactPhone" v-if="task.resource !== '0' && currType.type===0">
          <el-input-number v-model="task.participantCount" :min="1" :max="1000" label="领取人数"></el-input-number>
        </el-form-item>
        <el-form-item label="领取人数" prop="contactPhone" v-if="task.resource !== '0' && currType.type===1">
          <el-input-number v-model="task.participantCount" :min="2" :max="1000" label="领取人数"></el-input-number>
        </el-form-item>
        <el-form-item label="需求文档" prop="doc">
          <el-upload
            drag
            style="width: 400px"
            class="upload-demo"
            action=""
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :limit="1"
            :on-exceed="handleExceed"
            :before-upload="beforeFileUpload"
            :http-request="uploadRequireDoc"
            :file-list="task.doc"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或
              <em>点击上传</em>
            </div>

          </el-upload>
          <span v-if="task.requireDocUrl != null && task.requireDocUrl != ''">
                <a :href="task.requireDocUrl"><el-link :underline="false" type="primary"><i
                  class="el-icon-document"></i>下载文档</el-link></a>
              </span>
        </el-form-item>

        <el-form-item label="测试大纲" prop="endPoint.threePageUrl" v-if="currType.type==1"
                      class="three-page-upload">
          <el-upload
            drag
            style="width: 400px"
            class="upload-demo"
            action=""
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :limit="1"
            :on-exceed="handleExceed"
            :before-upload="beforeFileUpload"
            :http-request="uploadThreePageDoc"
            :file-list="task.threePageList"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或
              <em>点击上传</em>
            </div>

          </el-upload>
          <span v-if="task.endPoint.threePageUrl != null && task.endPoint.threePageUrl != ''">
            <a :href="task.endPoint.threePageUrl"><el-link :underline="false" type="primary"><i
              class="el-icon-document"></i>下载文档</el-link></a>
          </span>
          <span> <a href="http://mooctest-site.oss-cn-shanghai.aliyuncs.com/excel-template.xlsx"><i class="el-icon-document"></i>示例下载</a></span>
        </el-form-item>

        <el-form-item size="small" label="任务截止时间" prop="datetime">
          <div class="block">
            <el-date-picker
              v-model="task.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('task')">立即创建</div>
          <!--<div class="btn btn-medium" @click="resetForm('task')">重置</div>-->
          <div class="btn btn-medium" @click="cancelCreate('task')">取消</div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import provincecity from '@/components/commons/ProvinceCity'
import provinceCityJSON from '@/constants/provinceCity.json'
import Http from '@/js/http.js'
import Apis from '@/js/api.js'
import ResourceType from '@/constants/enum/resource-type.js'
import {notify} from '@/constants/index'
import {
  getAllAgencies,
  getAllAgencyAndTestUser,
  getAllServiceTypes,
  getProvinceNameByProvinceCode,
  storageGet
} from '@/js/index'

export default {
  name: 'Task',
  components: {
    provincecity
  },
  data() {
    return {
      currType: {},
      user: {},
      projectId: 0,
      institutionArray: [],
      tabPosition: 'top',
      resourceType: ResourceType,
      loading: false,
      serviceType: [],
      task: {
        name: '',
        desc: '',
        type: '',
        resource: '', //如果是广场不用管Location和institution ,定向看institution,区域看location
        // location: {provinceCode: '3200', cityCode: '3201'},
        institution: '',
        datetime: '',
        quotePrice: '',
        fixedPrice: '',
        doc: [],
        requireDocUrl: '',
        participantCount: 1,
        endPoint: {
          collaborativeType: 0, //0-协同（默认） 1-非协同
          threePageUrl: ''
        },
        threePageList: []
      },
      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: 5, max: 50, message: '任务名称长度在 5 到 50 个字符', trigger: 'blur'}
        ],
        type: [
          {required: true, message: '测试类型不可为空'},
        ],
        desc: [{required: true, message: '请填写描述', trigger: 'blur'}],

        'endPoint.threePageUrl': [
          {
            validator: (rule, value, callback) => {
              if (this.currType.type === 1 && this.task.endPoint.threePageUrl === '') {
                callback(new Error('请上传测试大纲'))
              } else {
                callback()
              }
            }, trigger: 'change'
          }
        ],
        //price: [{required: true, message: '请填写价格', trigger: 'blur'}],
        quotePrice: [
          {required: true, message: '预算不可为空', trigger: 'blur'},
          {
            validator: (rule, value, callback) => {
              if (parseInt(value) < 0) {
                callback(new Error('请输入不小于0的数'))
              } else {
                callback()
              }
            }, trigger: 'blur'
          },
        ],
        resource: [
          {required: true},
          {
            validator: (rule, value, callback) => {
              if (value == 0 && this.task.institution.id == null) {
                callback(new Error('定向发布至少要选择一个测评机构'))
              } else {
                callback()
              }
            }, trigger: 'change'
          },
        ],

        datetime: [{required: true, message: '截止时间不可为空', trigger: 'blur'}],
      }
    }
  },
  watch: {
    serviceType(val) {
      this.serviceType = val
    },
    institution(val) {
      this.institution = val
    },
    // 'task.institution' () {
    //   if (this.task.institution) {
    //     this.$refs.addFormProvince.resetProviceCity()
    //     this.task.location = {provinceCode: '', cityCode: ''}
    //   }
    // },
    // 'task.location' () {
    //   if (this.task.location.provinceCode || this.task.location.cityCode) {
    //     this.task.institution = ''
    //   }
    // },
    // 'task.resource' () {
    //   if (this.task.resource == '广场') {
    //     this.$refs.addFormProvince.resetProviceCity()
    //     this.task.institution = ''
    //     this.task.location = {provinceCode: '', cityCode: ''}
    //   }
    // },
    deep: true
  },
  mounted() {
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
    handleTestTypeChange(val) {
      let type = this.serviceType.filter((item) => {
        return item.code === val;
      });
      this.currType = type[0] ? type[0] : {};
      if (this.currType.type === 0) {
        this.$refs.task.clearValidate('endPoint');
      } else {
        this.task.resource = '2'
      }
    },
    init() {
      this.projectId = this.$route.params.projectId
      this.$route.params.code && this.initTask()
      this.setServiceType()
      this.setInstitutions()
      this.setUserInfo()
    },
    initTask() {
      const defaultTask = this.$route.params;
      console.log(this.$route.params);
      this.task.name = defaultTask.title;
      this.task.desc = defaultTask.description;
      this.task.type = defaultTask.serviceType;
      this.task.resource = defaultTask.resource;
      this.task.institution = defaultTask.institution;
      this.task.datetime = defaultTask.datetime;
      this.task.quotePrice = defaultTask.quotePrice;
      this.task.fixedPrice = defaultTask.fixedPrice;
      this.task.requireDocUrl = defaultTask.requireDocUrl;
      this.task.doc = defaultTask.requireDocUrl;
      this.task.participantCount = defaultTask.participantCount;
      this.task.endPoint = defaultTask.endPoint;
    },
    updateLocation(location) {
      var provinceName = ''
      var cityName = ''
      for (var item of provinceCityJSON.provinces) {
        if (item.code === location.provinceCode) {
          provinceName = item.name
          for (var city of item.cities) {
            if (city.code === location.cityCode) {
              cityName = city.name
              break
            }
          }
        }
      }
      return provinceName + ' / ' + cityName
    },
    submitForm(formName) {
      this.$refs['task'].validate(valid => {
        if (valid) {
          this.showLoading()
          const newTask = {
            name: this.task.name,
            desc: this.task.desc,
            type: this.task.type,
            resource: this.task.resource,
            // location: this.task.resource == '0' ? getProvinceNameByProvinceCode(this.task.location.provinceCode, this.task.location.cityCode):null,
            institution: this.task.resource == '0' ? this.task.institution.id : null,
            datetime: this.task.datetime,
            quotePrice: this.task.quotePrice,
            fixedPrice: this.task.fixedPrice,
            requirementFile: this.task.requireDocUrl,
            participantCount: this.task.participantCount,
            endPoint: this.task.endPoint
          }
          Http.post(Apis.TASK.CREATE_TASK.replace('{projectId}', this.projectId), newTask).then((res) => {
            this.hideLoading()
            this.createTaskSuccess(res.crowdTaskVO.id)
          }).catch((error) => {
            console.log(error)
            this.hideLoading()
            notify('error', error.data)
          })
        } else {
          notify('error', '表单填写有误！')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs.addFormProvince.resetProviceCity()
      this.$refs[formName].resetFields()
      this.task.name = ''
      this.task.desc = ''
      this.task.type = ''
      this.task.resource = '广场'; //如果是广场不用管Location和institution ,定向看institution,区域看location
      (this.task.location = {provinceCode: '', cityCode: ''}),
        (this.task.institution = '')
      this.task.datetime = '',
        this.task.participantCount = 1
    },
    locationChange(provinceId, cityId) {
      if (provinceId || cityId) {
        this.task.location = {provinceCode: provinceId, cityCode: cityId}
      }
    },
    cancelCreate() {
      if (window.history.length <= 1) {
        this.$router.push({path: '/'})
        return false
      } else {
        this.$router.go(-1)
      }
    },
    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(file) {
      console.log(file)
      // const isPDF = file.type === 'application/pdf'
      // const isDOC = file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
      // const isEXCEL = file.type === 'application/vnd.ms-excel'
      // const isXLS = file.type === 'application/x-xls'
      // const isTXT = file.type === 'text/plain'
      // const isXLSX = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
      // //console.log(file)
      // if (!(isDOC || isEXCEL || isPDF || isTXT || isXLS || isXLSX)) {
      //   this.$message.error('上传文件只能是 PDF 、 DOC 、DOCX 、XLS、TXT、XLSX 格式!')
      // }
      // return isDOC || isEXCEL || isPDF || isTXT || isXLS || isXLSX
    },
    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}', this.user.userVO.id), formData, config).then((res) => {
        notify('success', '上传成功')
        this.task.requireDocUrl = res.data
      }).catch((error) => {
        notify('error', '上传失败:' + error.data)
      })
    },
    //todo:上传测试大纲
    uploadThreePageDoc(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}', this.user.userVO.id), formData, config).then((res) => {
        notify('success', '上传成功')
        this.task.endPoint.threePageUrl = res.data
      }).catch((error) => {
        notify('error', '上传失败:' + error.data)
      })
    },
    setServiceType() {
      getAllServiceTypes().then((res) => {
        this.serviceType = res
      })
    },
    setInstitutions() {
      getAllAgencyAndTestUser().then((res) => {
        this.institutionArray = res
      }).catch((error) => {
        notify('error', '测评机构加载失败')
      })
    },
    setUserInfo() {
      this.user = storageGet('user')
    },
    createTaskSuccess(taskId) {
      this.$alert('任务创建成功', '创建成功', {
        confirmButtonText: '确定',
        callback: action => {
          this.$router.push({
            name: 'Task',
            params: {projectId: this.projectId, taskId: taskId}
          })
        }
      })
    },
    showLoading() {
      this.loading = true
    },
    hideLoading() {
      this.loading = false
    }
  }
}
</script>

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

.el-input {
  width: 400px;
}

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

</style>
<style lang="scss">
.three-page-upload {
  label {
    &:before{
      content:'* ';
      color:red
    }
  }
}
</style>