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

<template>
  <div class="create-container">
    <div class="create-body">
      <div class="title">修改能力和资源</div>
      <el-form v-loading="loading" :model="agency" :rules="rules" ref="agency" label-width="12%" class="demo-report">
        <el-form-item prop="file" label="机构logo">
          <span>
          <el-image
            style="width: 100px;"
            :src="agency.agencyPhoto"
            fit="scale-down"></el-image>
        </span>
        </el-form-item>
        <el-form-item label="机构名称" prop="name">
          <!--<el-input size="small" v-if="isModifyMode" v-model="agency.name"></el-input>-->
          <span>{{agency.evaluationAgencyName}}</span>
        </el-form-item>
        <el-form-item size="small" label="机构账户" prop="bankAccount">
          <!--<el-input v-if="isModifyMode" v-model="agency.bankAccount"></el-input>-->
          <span>{{agency.bankAccount}}</span>
        </el-form-item>
        <el-form-item size="small" label="机构地址" prop="address">
          <!--<el-input v-if="isModifyMode" v-model="agency.address"></el-input>-->
          <span>{{agency.address}}</span>
        </el-form-item>
        <el-form-item label="机构能力" prop="evaluationAgencyAbilityList">
          <el-checkbox-group v-if="isModifyMode" v-model="agency.evaluationAgencyAbilityList">
            <span v-for="(item,index) in serviceTypes" :key="index">
              <el-checkbox :label="item"
                           name="evaluationAgencyAbilityList">{{item}}&nbsp;&nbsp;&nbsp;&nbsp;</el-checkbox>
            </span>
          </el-checkbox-group>
          <span v-if="!isModifyMode">
            <span v-for="(item,index) in agency.evaluationAgencyAbilityList" :key="index">
              <el-tag>{{item}}</el-tag>&nbsp;
            </span>
          </span>
        </el-form-item>
        <el-form-item label="机构资源" prop="evaluationAgencyResourceList">
          <span v-if="isModifyMode" v-for="item in agency.evaluationAgencyResourceList" :key="item.id">
            资源类型：&nbsp;<el-select size="small" v-model="item.type" placeholder="请选择"
                                  style="width: 15%;margin-bottom: 10px"
                                  :value="item.type">
              <el-option
                v-for="item in resourceTypes"
                :key="item"
                :label="item"
                :value="item">
              </el-option>
            </el-select>
            资源名称：&nbsp;<el-input size="small" v-model="item.name" style="width: 15%" prop="resourceName"></el-input>
            总量：&nbsp;<el-input-number size="small" :min="0" v-model="item.totalNum"></el-input-number>
            可用数量：&nbsp;<el-input-number size="small" :min="0" :max="item.totalNum"
                                        v-model="item.availableNum"></el-input-number>
            <el-button size="small" type="danger" icon="el-icon-delete"
                       @click="removeAgencyResource(item.id)"></el-button>
            <br/>
          </span>
          <el-button v-if="isModifyMode" type="primary" icon="el-icon-circle-plus" plain size="mini"
                     @click="addAgencyResource">添加资源
          </el-button>
          <span v-if="!isModifyMode" v-for="item in agency.evaluationAgencyResourceList" :key="item.id">
            资源类型：{{item.type}}；&nbsp;&nbsp;资源名称：{{item.name}}；&nbsp;&nbsp;资源总量：{{item.totalNum}}；&nbsp;&nbsp;可用资源：{{item.availableNum}}<br/>
          </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>
          <el-button v-if="isModifyMode" type="primary" size="small" @click="submitInfo()">提交</el-button>
          <el-button v-if="isModifyMode" type="info" size="small" @click="cancelModify()">取消</el-button>
          <el-button v-if="!isModifyMode" type="primary" size="small" @click="modifyInfo()">修改</el-button>
          <!--<div class="btn btn-primary" @click="cancelModify()">取消</div>-->
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import {notify} from '@/constants/index'
import {
  getAllAbilities,
  getAllAgencyResourceTypes,
  getCurrentAgencyAuthInfo,
  storageGet,
  updateAgencyResourceAndAbility
} from '@/js/index'

export default {
  name: 'Agency',
  data () {
    return {
      user: {},
      userId: 0,
      loading: false,
      isModifyMode: false,
      dialogVisible: false,
      serviceTypes: [],
      resourceTypes: [],
      agency: {
        evaluationAgencyName: '',
        bankAccount: '',
        address: '',
        evaluationAgencyAbilityList: [],
        evaluationAgencyResourceList: [
          {
            id: 0,
            type: '',
            name: '',
            totalNum: 0,
            availableNum: 0,
          }
        ],
        agencyPhoto: '',
      },
      rules: {
        evaluationAgencyAbilityList: [
          {type: 'array', required: true, message: '请至少选择一个机构能力', trigger: 'change'}
          // { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        evaluationAgencyResourceList: [
          {
            validator: (rule, value, callback) => {
              var isError = false
              for (var i = 0; i < value.length; i++) {
                if (value[i].name == '') {
                  isError = true
                  break
                }
              }
              if (isError) {
                callback(new Error('资源名称不可为空'))
              } else {
                callback()
              }
            }, trigger: 'blur'
          },
        ],
        resourceName: [
          {required: true, message: '请输入地址', trigger: 'blur'}
        ]
      },
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
    //初始化
    init () {
      this.setServiceTypes()
      this.setResourceTypes()
      this.setUserInfo()
      this.getAgencyInfo()
    },
    getAgencyInfo () {
      this.showLoading()
      getCurrentAgencyAuthInfo(this.user.userVO.id, this.getAgencyInfoSuccess, this.getAgencyInfoFail)
    },
    getAgencyInfoSuccess (res) {
      this.hideLoading()
      this.agency.evaluationAgencyName = res.evaluationAgencyName
      this.agency.bankAccount = res.bankAccount
      this.agency.address = res.address
      this.agency.evaluationAgencyAbilityList = res.evaluationAgencyAbilityList
      this.agency.evaluationAgencyResourceList = res.evaluationAgencyResourceList
      this.agency.agencyPhoto = res.agencyPhoto
    },
    getAgencyInfoFail (error) {
      this.hideLoading()
      notify('error', '获取机构信息失败：' + error.data)
    },
    //表单进入可编辑状态，可修改表单，不再使用
    modifyInfo () {
      this.isModifyMode = true
    },
    //提交表单
    submitInfo () {
      this.$refs['agency'].validate(valid => {
        if (valid) {
          this.showLoading()
          const data = {
            evaluationAgencyAbilityList: this.agency.evaluationAgencyAbilityList,
            evaluationAgencyResourceList: this.agency.evaluationAgencyResourceList
          }
          updateAgencyResourceAndAbility(this.user.userVO.id, data, this.submitInfoSuccess, this.submitInfoFail)
        } else {
          notify('error', '表单填写错误!')
          return false
        }
      })
    },
    submitInfoSuccess (res) {
      this.hideLoading()
      notify('success', '修改成功')
      this.cancelModify()
    },
    submitInfoFail (error) {
      this.hideLoading()
      notify('error', '修改资源能力失败：' + error.data)
    },
    //取消修改表单，表单进入不可编辑状态，不再使用
    cancelModify () {
      this.isModifyMode = false
      this.getAgencyInfo()
    },
    //TODO 跳转到登录页面
    toLogin () {
      this.hideDialog()
      this.$router.push({
        name: 'Home',
        // params: {projectId: projectId, taskId: taskId}
      })
    },
    //设置服务类型
    setServiceTypes () {
      this.serviceTypes = getAllAbilities()
    },
    //添加一项测评机构资源
    addAgencyResource () {
      const tmpResource = {
        id: this.agency.evaluationAgencyResourceList.length,
        type: this.resourceTypes[0],
        name: '',
        totalNum: 0,
        availableNum: 0,
      }
      this.agency.evaluationAgencyResourceList.push(tmpResource)
    },
    //删除一项测评机构资源
    removeAgencyResource (id) {
      this.agency.evaluationAgencyResourceList.splice(id, 1)
      for (var i = 0; i < this.agency.evaluationAgencyResourceList.length; i++) {
        this.agency.evaluationAgencyResourceList[i].id = i
      }
    },
    //设置测评机构资源类型
    setResourceTypes () {
      this.resourceTypes = getAllAgencyResourceTypes()
    },
    //检测测评机构资源填写是否有效
    checkAgencyResourceVaild () {
      if (this.agency.evaluationAgencyResourceList.length === 0) {
        return true
      }
      for (var i = 0; i < this.agency.evaluationAgencyResourceList.length; i++) {
        const item = this.agency.evaluationAgencyResourceList[i]
        if (item.type === '') {
          notify('error', '资源类型不能为空')
          return false
        }
        if (item.name === '') {
          notify('error', '资源名称不能为空')
          return false
        }
        if (item.totalNum < item.availableNum) {
          notify('error', '资源总数量不能低于可用数量')
          return false
        }
      }
      return true
    },
    //获取用户信息
    setUserInfo () {
      this.user = storageGet('user')
    },
    //显示loading
    showLoading () {
      this.loading = true
    },
    //隐藏loading
    hideLoading () {
      this.loading = false
    }
  },
  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;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

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