sz-kjsxy-web/src/views/student/components/detail.vue

<template>
  <div>
    <xy-dialog ref="dialog" :width="50" :is-show.sync="isShow" :type="'form'" :title="type === 'show' ? '查看个人明细' : '审核'"
      :form="form">
      <template v-slot:show>
        <div class="xy-table-item" style="padding: 0 20px;">
          <div class="xy-table-item-label" style="font-weight: bold;width:0;padding: 0;display: none;">
            <span style="color: red;font-weight: bold;padding-right: 4px;"></span>
          </div>
          <div class="xy-table-item-content" style="flex-grow: 1;">
            <div class="courseName" v-if="type=='check'">
              <div>课程名称：{{subjectObj.title}}</div>
              <div>开课日期：{{subjectObj.date}}</div>
              <div>类别：{{subjectObj.leibie}}</div>
            </div>
            <div>
              <lx-header icon="" text="个人信息" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
              </lx-header>
              <div>
                <el-descriptions class="margin-top" :column="3" border>
                    <el-descriptions-item>
                      <template slot="label">
                        姓名
                      </template>
                      {{student_info.name?student_info.name:''}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">
                        性别
                      </template>
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">
                        出生日期
                      </template>
                    </el-descriptions-item>
                    <el-descriptions-item :span="3">
                      <template slot="label">
                        证件照
                      </template>
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">
                        手机号码
                      </template>
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">
                       邮箱
                      </template>
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">
                       最高学历
                      </template>
                    </el-descriptions-item>
                    <el-descriptions-item :span="3">
                      <template slot="label">
                       最高学历毕业院校及专业
                      </template>
                    </el-descriptions-item>
                    <el-descriptions-item :span="3">
                      <template slot="label">
                       个人荣誉
                      </template>
                    </el-descriptions-item>
                    <el-descriptions-item :span="3">
                      <template slot="label">
                       个人简历
                      </template>
                    </el-descriptions-item>
                  </el-descriptions>

              </div>
              <lx-header icon="" text="公司信息" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
              </lx-header>
              <div>
                <el-descriptions class="margin-top" :column="3" border>
                    <el-descriptions-item>
                      <template slot="label">
                        公司名称
                      </template>
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">
                        个人职务
                      </template>
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">
                        是否有股份
                      </template>
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">
                        公司成立时间
                      </template>
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">
                        公司所属区域
                      </template>
                    </el-descriptions-item>
                    <el-descriptions-item :span="3">
                      <template slot="label">
                       公司地址
                      </template>
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">
                       企业性质
                      </template>
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">
                       所属行业
                      </template>
                    </el-descriptions-item>
                    <el-descriptions-item :span="3">
                      <template slot="label">
                       主营业务
                      </template>
                    </el-descriptions-item>
                    <el-descriptions-item :span="3">
                      <template slot="label">
                       公司简介
                      </template>
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">
                       当前融资情况
                      </template>
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">
                       是否需要融资
                      </template>
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">
                       报名信息来源
                      </template>
                    </el-descriptions-item>
                    <el-descriptions-item :span="3">
                      <template slot="label">
                       备注
                      </template>
                    </el-descriptions-item>
                  </el-descriptions>
              </div>
              <lx-header icon="" text="审核" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
              </lx-header>
              <div v-if="type=='show'">
                <div class="studentInfo">
                  <div>
                    <span>审核结果：</span>
                    <span>未通过</span>
                  </div>
                  <div>
                    <span>不通过原因：</span>
                    <span>1111</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>


      <template v-slot:status v-if="type=='check'">
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;"></span>审核：
          </div>
          <div class="xy-table-item-content">
            <el-select style="width: 300px;" v-model="form.status" placeholder="请选择" clearable>
              <el-option v-for="item in apply_status_list" :key="item.id" :label="item.value" :value="item.id">
              </el-option>
            </el-select>
          </div>
        </div>
      </template>
      <template v-slot:remark v-if="form.status===2">
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;"></span>不通过原因：
          </div>
          <div class="xy-table-item-content">
            <el-input type="textarea" v-model="form.remark" placeholder="请输入不通过原因"></el-input>
          </div>
        </div>
      </template>


      <template v-slot:footerContent>
        <el-button type="primary" style='margin-left:5px;margin-bottom:5px;' v-if="type=='check'" @click="submit">确认</el-button>
        <el-button type="primary" plain style='margin-left:5px;margin-bottom:5px;'  v-if="type=='check'" @click="isShow=false">取消</el-button>
        <el-button type="primary" plain style='margin-left:5px;margin-bottom:5px;' v-if="type=='show'" @click="isShow=false">关闭</el-button>

      </template>

    </xy-dialog>

  </div>
</template>

<script>
  import {
    show
  } from '@/api/student/index.js'
  import {
    save
  } from '@/api/apply/index.js'
  import myMixins from "@/mixin/selectMixin.js";
  export default {
    mixins: [myMixins],
    components: {

    },
    data() {
      return {
        isShow: false,
        type: 'show',
        id: '',
        subjectObj:{},
        student_info: {},
        row:{},
        form: {
          show: '',
          status:'',
          remark:''
        },
      }
    },
    created() {},
    methods: {

      submit() {
        if (this.id) {
          this.form.id = this.id
        }
        save({
          ...this.row,
          status:this.form.status,
          remark:this.form.remark
        }).then(res => {
          this.$message({
            type: 'success',
            message: '审核成功'
          })
          this.isShow = false
          this.$emit('refresh')
        })
      },

      getDetail() {
        show({
          id: this.id,
        }).then(res => {
          this.student_info = res
        })
      }
    },
    watch: {
      isShow(newVal) {
        if (newVal) {
          if (this.type === 'show' || this.type === 'check') {
            this.getDetail()
            console.log("row",this.row)
          }
        } else {
          this.id = ''
          this.subjectObj = {}
          this.$refs['dialog'].reset()
        }
      },
    }

  }
</script>

<style scoped lang="scss">
  ::v-deep .show,
  ::v-deep .status,
  ::v-deep .remark{
    flex-basis: 100%;
  }
  ::v-deep .el-descriptions-item__label{
    width:15%;
  }
  ::v-deep .v-header {
    margin-top: 0 !important;
  }

  .studentInfo {
    &>div {
      display: flex;

      &>div {
        width: 50%;

        span:first-child {
          display: inline-block;
          width: 160px;
          text-align: right;
        }
      }

      img {
        width: 80px;
        height: 80px;
      }
    }
  }

  .companyInfo {
    &>div {
      display: flex;

      span:first-child {
        display: inline-block;
        width: 160px;
        text-align: right;
      }
    }
  }
</style>