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

<template>
  <div class="create-container">
    <div class="title h1" v-if="!isModifyMode">项目</div>
    <div class="create-body">
      <div class="title h2" v-if="!isModifyMode">基本信息</div>
      <div v-if="!isModifyMode" class="el-form-item">
        <label class="el-form-item__label" style="width: 12%;">编号</label>
        <div class="el-form-item__content" style="margin-left: 12%;">
          <div>{{project.id}}</div>
        </div>
      </div>
      <el-form :model="project" :rules="rules" ref="project" label-width="12%" class="demo-project">
        <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="contact">
          <div>
            <el-row :gutter="2">
              <el-col :span="2">
                <span>联系人</span>
              </el-col>
              <el-col :span="10">
                <el-input v-if="isModifyMode" v-model="project.contactName" placeholder="请输入联系人姓名"></el-input>
                <div v-if="!isModifyMode">{{project.contactName}}</div>
              </el-col>
            </el-row>
            <el-row :gutter="2">
              <el-col :span="2">
                <span>联系人电话</span>
              </el-col>
              <el-col :span="10">
                <el-input
                  v-if="isModifyMode"
                  v-model="project.contactPhone"
                  placeholder="请输入联系人电话"
                ></el-input>
                <div v-if="!isModifyMode">{{project.contactPhone}}</div>
              </el-col>
            </el-row>
          </div>
        </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"
          >{{platformType[item]}}</span>
        </el-form-item>
        <el-form-item label="需求描述" prop="desc">
          <el-input v-if="isModifyMode" type="textarea" v-model="project.desc"></el-input>
          <span v-if="!isModifyMode">{{project.desc}}</span>
        </el-form-item>
        <el-form-item label="价格" prop="price">
          <el-input v-if="isModifyMode" type="number" v-model="project.price">
            <template slot="append">¥</template>
          </el-input>
          <span v-if="!isModifyMode">{{project.price}}¥</span>
        </el-form-item>

        <el-form-item label="服务类型" prop="type">
          <el-checkbox-group v-if="isModifyMode" 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>
          <span v-if="!isModifyMode" class="badge" v-for="item in project.type">{{serviceType[item]}}</span>
        </el-form-item>
        <el-form-item label="用途" prop="usage">
          <el-input v-if="isModifyMode" v-model="project.usage"></el-input>
          <span v-if="!isModifyMode">{{project.usage}}</span>
        </el-form-item>

        <el-form-item label="预算" prop="budget">
          <el-input v-if="isModifyMode" type="number" v-model="project.budget">
            ¥<template slot="append"></template>
          </el-input>
          <span v-if="!isModifyMode">{{project.budget}}¥</span>
        </el-form-item>
        <el-form-item label="项目可见性" prop="resource">
          <div v-if="!isModifyMode">
            <div v-if="project.resource=='1'">{{updateLocation(project.location)}}</div>
            <div v-if="project.resource=='0'">{{project.institution}}</div>
            <div v-if="project.resource=='2'">{{resourceType[project.resource]}}</div>
          </div>
          <el-tabs
            :tab-position="tabPosition"
            v-model="project.resource"
            style="max-height: 200px;"
            v-if="isModifyMode"
          >
            <el-tab-pane :label="resourceType[0]" name="0">
              <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="resourceType[1]" name="1">
              <provincecity
                ref="addFormProvince"
                @selectChange="locationChange"
                :provinceCode="project.location.provinceCode"
                :cityCode="project.location.cityCode"
              ></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="doc">
          <el-upload
            v-if="isModifyMode"
            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>
          <span v-if="!isModifyMode"><a :href="project.doc">{{project.doc}}</a></span>
        </el-form-item>
        <el-form-item label="安装包" prop="file">
          <el-upload
            v-if="isModifyMode"
            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>
          <span v-if="!isModifyMode"><a :href="project.file">{{project.file}}</a></span>
        </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="submitForm('project')">确认修改</div>
          <div class="btn btn-medium" @click="resetForm('project')">重置</div>
          <div class="btn btn-medium" @click="cancelMode('project')">取消</div>
        </el-form-item>
        <el-form-item v-if="!isModifyMode">
          <div class="btn btn-medium btn-info" @click="modifyForm()">修改</div>
          <div class="btn btn-medium btn-info" @click="analyseDemand()">分析需求</div>
          <div class="btn btn-medium btn-info" @click="createTask()">新建任务</div>
          <div class="btn btn-medium btn-info" @click="createReport()">上传报告</div>
        </el-form-item>
      </el-form>
    </div>

    <div class="create-body" v-if="!isModifyMode">
      <div class="title h2">分析需求</div>
      <div class="task-list">
        <el-table :data="analyseDemandList" style="width: 100%" max-height="400">
          <el-table-column prop="institution" label="承接单位" title="承接单位"></el-table-column>
          <el-table-column prop="feasibilityReport" sortable label="可行性分析报告">
            <template slot-scope="scope">
              <span v-if="!scope.row.feasibilityReport.url">暂无文件</span>
              <a
                :href="scope.row.feasibilityReport.url"
                v-if="scope.row.feasibilityReport.url"
                target="_blank"
              >
                <i class="fa fa-file-text-o"></i>
                {{scope.row.feasibilityReport.name}}
              </a>
            </template>
          </el-table-column>
          <el-table-column prop="priceAuditReport" sortable label="可行性分析报告">
            <template slot-scope="scope">
              <span v-if="!scope.row.priceAuditReport.url">暂无文件</span>
              <a
                :href="scope.row.priceAuditReport.url"
                v-if="scope.row.priceAuditReport.url"
                target="_blank"
              >
                <i class="fa fa-file-text-o"></i>
                {{scope.row.priceAuditReport.name}}
              </a>
            </template>
          </el-table-column>

          <el-table-column align="right" label="操作">
            <template slot-scope="scope">
              <div
                class="btn btn-small btn-info"
                @click="handleAccept(scope.$index, scope.row.id)"
              >接受
              </div>
              <div
                class="btn btn-small btn-danger"
                @click="handleReject(scope.$index, scope.row.id)"
              >拒绝
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <div class="create-body" v-if="!isModifyMode">
      <div class="title h2">任务列表</div>
      <div class="task-list">
        <el-table :showHeader="false" :data="task" style="width: 100%;min-height: 200px" max-height="800px">
          <el-table-column prop="name" label="任务名称" title="任务名称"></el-table-column>
          <el-table-column prop="datetime" sortable label="任务截止时间"></el-table-column>
          <el-table-column prop="resource" label="任务可见性">
            <template slot-scope="scope">
              <div v-if="scope.row.resource=='1'">{{updateLocation(scope.row.location)}}</div>
              <div v-if="scope.row.resource=='0'">{{scope.row.institution}}</div>
              <div v-if="scope.row.resource=='2'">{{resourceType[scope.row.resource]}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="type" label="业务类型">
            <template slot-scope="scope">
              <div class="badge">{{serviceType[scope.row.type]}}</div>
            </template>
          </el-table-column>

          <el-table-column align="right" label="操作">
            <template slot-scope="scope">
              <div
                class="btn btn-small btn-info"
                @click="goToTaskDetail(projectId, scope.row.id)"
              >查看详情
              </div>
              <div
                class="btn btn-small btn-danger"
                @click="handleDelete(scope.$index, scope.row.id)"
              >删除
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <div class="create-body" v-if="!isModifyMode">
      <div class="title h2">报告列表</div>
      <report-list v-bind:reports="project.reportList"/>
    </div>
  </div>
</template>

<script>
import Enum from '@/constants/enum/index'
import PlatformType from '@/constants/enum/platform-type'
import ReportList from '@/components/report/ReportList'
import Http from '@/js/http.js'
import Apis from '@/js/api.js'
import ResourceType from '@/constants/enum/resource-type'
import provincecity from '@/components/commons/ProvinceCity'
import provinceCityJSON from '@/constants/provinceCity.json'
import ServiceType from '@/constants/enum/service-type'
export default {
  name: 'Project',
  components: {
    provincecity,
    ReportList
  },
  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 {
      projectId: 0,
      tabPosition: 'top',
      institutionArray: Enum.institution,
      isModifyMode: false,
      platformType: PlatformType,
      resourceType: ResourceType,
      serviceType:ServiceType,
      project: {},
      task:[],
      analyseDemandList: [],
      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.institution' () {
      if (this.project.institution) {
        this.$refs.addFormProvince.resetProviceCity()
        this.project.location = {provinceCode: '', cityCode: ''}
      }
    },
    'project.location' () {
      if (this.project.location.provinceCode || this.project.location.cityCode) {
        this.project.institution = ''
      }
    },
    'project.resource' () {
      if (this.project.resource == '2') {
        this.$refs.addFormProvince.resetProviceCity()
        this.project.institution = ''
        this.project.location = {provinceCode: '', cityCode: ''}
      }
    },
    deep: true
  },
  methods: {
    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
    },
    init () {
      this.projectId = +this.$route.params.projectId
      this.loadData()
      this.project.platform.map(item => {
        this.platformType.push(PlatformType[item])
      })
    },
    submitForm (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.isModifyMode = false
          console.log(this.project)
          // Http.put(Apis.PROJECT.UPDATE_PROJECT_SUBMIT, this.project).then((res) => {
          //   console.log(res)
          //   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.doc = ''
      this.project.file = ''
      this.project.contact = {
        name: '',
        phone: ''
      }
      this.project.resource = '2'
      this.project.institution = ''
      this.project.datetime = ''
      this.project.price = ''
      this.project.usage = ''
      this.project.budget = ''
    },
    modifyForm () {
      this.isModifyMode = true
      //获得update 信息
      this.loadData()
    },
    cancelMode (formName) {
      this.isModifyMode = false
      this.loadData()

    },
    goToTaskDetail (id) {
      this.$router.push({
        name: 'Task',
        params: {projectId: this.projectId, taskId: id}
      })
    },
    createTask () {
      this.$router.push({name: 'TaskCreate'})
    },
    createReport () {
      this.$router.push({name: 'ReportCreate'})
    },
    handleDelete (index, id) {
      this.task.splice(index, 1)
    },
    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
    },
    analyseDemand () {
      this.$router.push({name: 'AnalyseDemand'})
    },
    handleAccept (index, id) {
      console.log('接受')
    },
    handleReject (index, id) {
      console.log('拒绝')
    },
    loadData () {//.replace('{projectId}','PROJECT_1')
      Http.get(Apis.PAGE.PROJECT_DETAIL_PAGE).then((res) => {
        console.log(res)
        this.project = res.projectDetails
        this.task = res.taskList
        this.analyseDemandList = res.reportList
      })
    },
    locationChange (provinceId, cityId) {
      if (provinceId || cityId) {
        this.project.location = {provinceCode: provinceId, cityCode: cityId}
      }
    },
  }
}
</script>

<style lang="less" scoped>
  .task-list {
    margin: 0 30px;
  }

  .el-col {
    padding: 0 !important;
  }

  .el-row {
    margin-bottom: 10px;
  }
</style>