expertGroup.vue

<template>
  <div class="app-content" style="height:80vh;overflow: auto;">
    <a-spin :spinning="loading">
      <a-form-model ref="form" :model="formData" :rules="rules" class="from-table">
        <a-row>
          <a-col :span="2" class="bg-gray">
            <div class="required">年 度：</div>
          </a-col>
          <a-col :span="22">
            <a-form-model-item prop="year">
              <base-select v-model="formData.year" :type="4" :isAll="true" :width="150" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="2" class="bg-gray">
            <div class="required">批 次：</div>
          </a-col>
          <a-col :span="22">
            <a-form-model-item prop="batch">
              <base-select v-model="formData.batch" :type="10" :isAll="true" :width="150" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="2" class="bg-gray expertGroupMembers">
            <div class="required">批次名称：</div>
          </a-col>
          <a-col :span="22">
            <a-form-model-item prop="name">
              <a-input placeholder="批次名称" v-model="formData.name" :maxLength="100" style="width:300px" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="2" class="bg-gray expertGroupMembers">
            <div style="margin-left:10px">备 注：</div>
          </a-col>
          <a-col :span="22">
            <a-form-model-item prop="remark">
              <a-input placeholder="备注" v-model="formData.remark" :maxLength="100" style="width:300px" />
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :span="24">
            <div class="tb-title">
              <span>专家组</span>
            </div>
          </a-col>
        </a-row>

        <a-row style="text-align: center;">
          <a-col :span="2" class="bg-gray">
            序号
          </a-col>
          <a-col :span="8" class="bg-gray required">
            专家组名称
          </a-col>
          <a-col :span="6" class="bg-gray">
            备注
          </a-col>
          <a-col :span="2" class="bg-gray">
            专家数
          </a-col>
          <a-col :span="6" class="bg-gray">
            操作
          </a-col>
        </a-row>

        <a-row v-for="(expert, index) in formData.expertGroup" :key="index">
          <a-col :span="2" style="text-align: center;">
            {{index+1}}
          </a-col>
          <a-col :span="8" style="text-align: left;">
            <a-form-model-item :prop="'expertGroup.' + index + '.name'" :rules="{required: true,message: '*',trigger: 'blur',}">
              <a-input placeholder="名称" v-model="expert.name" :maxLength="200" style="width:80%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="6" style="text-align: left;">
            <a-form-model-item :prop="'expertGroup.' + index + '.remark'">
              <a-input placeholder="备注" v-model="expert.remark" :maxLength="200" style="width:80%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="2" style="text-align: center;">
            {{expert.members.length}}
          </a-col>
          <a-col :span="6" style="text-align: center;">
            <a-popconfirm title="确定要删除吗？" ok-text="确定" cancel-text="取消" @confirm="removeMembers(expert)">
              <a-button type="link" size="small">删除</a-button>
            </a-popconfirm>
            <a-button type="link" @click="selectExpert(expert,index)">选择评审专家</a-button>
          </a-col>
        </a-row>
        <a-row v-if="formData.expertGroup && formData.expertGroup.length < 10">
          <a-col :span="24" style="text-align: center;">
            <a-button type="dashed" style="width: 30%" @click="addMembers">
              <a-icon type="plus" /> 添加
            </a-button>
          </a-col>
        </a-row>
        <a-row>
          <a-col style="text-align: center;">
            <a-button type="primary" @click="submit">提交</a-button>
          </a-col>
        </a-row>
      </a-form-model>
      <!-- @close="() => this.visibleEdit=false" -->
      <a-modal v-model="visibleEdit" :title="'选择专家'" :width="'850px'" :dialog-style="{ top: '11%' }" :maskClosable="false" :footer="null" destroyOnClose>
        <expert-group-members v-model="expertArray" @close="closeWindow" />
      </a-modal>
    </a-spin>
  </div>
</template>

<script>
const Expert = { id: null, name: null, remark: null, members: [] }
import moment from 'moment'
import { isEmptyParams, filterExportExcelData, tableColumnsName } from "@/views/utils/common";
import expertGroupMembers from '@/views/expertGroup/expertGroupMembers'
import baseSelect from '@/views/components/common/baseSelect'
export default {
  name: 'expertGroup',
  components: {
    expertGroupMembers, baseSelect
  },
  data () {
    return {
      // 表单
      formData: { year: null, batch: null, name: null, remark: null, expertGroup: [{ id: null, name: null, remark: null, members: [] }] },
      rules: {
        year: { required: true, message: '请选择年度', trigger: 'change' },
        batch: { required: true, message: '请选择批次', trigger: 'change' },
        name: { required: true, message: '请填写批次名称', trigger: 'blur' },
      },
      // 弹窗标志
      visibleView: false,
      visibleEdit: false,
      expertArray: [{}],
      expertIndex: 0,
      loading: true,
    }
  },
  props: {
    value: {
      type: String,
      default: () => {
        return null
      }
    },
  },
  created () {
    this.load()
  },
  methods: {
    load () {
      if (this.value != null) {
        let pars = { id: this.value }
        this.$api.expertBatch.getBatchById(pars).then(({ data = {} }) => {
          if (data) {
            this.formData = data
            this.loading = false
          }
        }).catch(() => { })
      } else {
        var date = new Date();
        let year = date.getFullYear()
        this.formData.year = year
        this.loading = false
      }
    },
    batchCreate () {
      this.visibleEdit = true
    },
    removeMembers (item) {//移除成员
      if (this.formData.expertGroup.length == 1) {
        alert('至少创建一个专家组')
        return
      }
      let index = this.formData.expertGroup.indexOf(item)
      if (index !== -1) {
        this.formData.expertGroup.splice(index, 1)
      }
    },
    memberToTop (item) {//成员置顶
      let index = this.formData.expertGroup.indexOf(item)
      if (index !== -1) {
        this.formData.expertGroup.splice(index, 1)
        this.formData.expertGroup.unshift({ ...item })
      }
    },
    addMembers () {//添加成员
      this.formData.expertGroup.push({ ...Expert })
    },
    selectExpert (obj, index) {
      this.expertIndex = index
      this.expertArray = obj.members
      this.visibleEdit = true
    },
    closeWindow (value) {
      if (value === 'view') {
        this.visibleView = false
      }
      else {
        this.visibleEdit = false
        this.formData.expertGroup[this.expertIndex].members = this.expertArray
      }
      this.expertIndex = 0
      this.expertArray = []
    },
    submit () {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.loading = true
          let pars = isEmptyParams(this.formData)
          let par = { ...pars }
          this.$api.expertBatch.save(par).then(({ data = {} }) => {
            if (data) {
              this.loading = false
              this.$message.success('提交成功！')
              this.$emit('close', 'edit')
            }
            else
              this.loading = false
          }).catch(() => {
            this.loading = false
          })
        }
      })
    },
  }
}
</script>