epdc-admin-yushan/src/views/modules/heart/volunteerorg-look.vue

<template>
  <el-dialog :visible.sync="visible" title="查看" :close-on-click-modal="false" :close-on-press-escape="false">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'">
        <el-form-item label="组织类型：" prop="orgType" label-width="100px">
<!--            <el-select v-model="dataForm.orgType" clearable placeholder="组织类型" style="width:300px">-->
<!--                <el-option v-for="item in orgTypeList" :key="item.id" :label="item.typeName" :value="item.id">-->
<!--                </el-option>-->
<!--            </el-select>-->
                {{getTypeName(dataForm.orgType)}}
        </el-form-item>
          <el-form-item label="组织名称：" prop="volunteerOrgName"  label-width="100px">
              {{dataForm.volunteerOrgName}}
      </el-form-item>
        <el-form-item label="组织管理员：" prop="headName" label-width="100px">
            {{dataForm.headName}}
        </el-form-item>
        <el-form-item label="管理员电话：" prop="mobile" label-width="100px">
            {{dataForm.mobile}}
        </el-form-item>
<!--          <el-form-item label="组织编码" prop="volunteerOrgCode">-->
<!--          <el-input v-model="dataForm.volunteerOrgCode" placeholder="组织编码"></el-input>-->
<!--      </el-form-item>-->
<!--          <el-form-item label="是否启用" prop="isOpen">-->
<!--          <el-input v-model="dataForm.isOpen" placeholder="是否启用"></el-input>-->
<!--      </el-form-item>-->
        <el-form-item label="是否启用：" prop="isOpen" label-width="100px">
            <template slot-scope="scope">
                {{
                dataForm.isOpen == 0
                ? "启用"
                : dataForm.isOpen == 1
                ? "禁用"
                : ""
                }}
            </template>
        </el-form-item>
        <el-form-item prop="sort" label="排序：" label-width="100px">
            {{dataForm.sort}}
        </el-form-item>
        <el-form-item label="照片："
                      label-width="100px"
                      v-loading="loading"
                      prop="imgUrl">
            <el-upload class="avatar-uploader"
                       :action="uploadUrl"
                       :show-file-list="false"
                       :disabled="true">
                <img v-if="dataForm.imgUrl"
                     :src="dataForm.imgUrl"
                     class="avatar">
                <i v-else
                   class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </el-form-item>
          <el-form-item label="地址：" prop="address" label-width="100px">
              {{dataForm.address}}
      </el-form-item>
        <el-form-item label="组织介绍：" prop="note" label-width="100px">
            {{dataForm.note}}
        </el-form-item>
<!--          <el-form-item label="删除标识 0-否，1-是" prop="delFlag">-->
<!--          <el-input v-model="dataForm.delFlag" placeholder="删除标识 0-否，1-是"></el-input>-->
<!--      </el-form-item>-->
<!--          <el-form-item label="乐观锁" prop="revision">-->
<!--          <el-input v-model="dataForm.revision" placeholder="乐观锁"></el-input>-->
<!--      </el-form-item>-->
<!--          <el-form-item label="创建人" prop="createdBy">-->
<!--          <el-input v-model="dataForm.createdBy" placeholder="创建人"></el-input>-->
<!--      </el-form-item>-->
<!--          <el-form-item label="创建时间" prop="createdTime">-->
<!--          <el-input v-model="dataForm.createdTime" placeholder="创建时间"></el-input>-->
<!--      </el-form-item>-->
<!--          <el-form-item label="更新人" prop="updatedBy">-->
<!--          <el-input v-model="dataForm.updatedBy" placeholder="更新人"></el-input>-->
<!--      </el-form-item>-->
<!--          <el-form-item label="更新时间" prop="updatedTime">-->
<!--          <el-input v-model="dataForm.updatedTime" placeholder="更新时间"></el-input>-->
<!--      </el-form-item>-->
      </el-form>
    <template slot="footer">
      <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
      <el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
    </template>
  </el-dialog>
</template>

<script>
import debounce from 'lodash/debounce'
export default {
  data () {
    return {
      visible: false,
      dataForm: {
        id: '',
        volunteerOrgName: '',
        volunteerOrgCode: '',
        isOpen: '',
        sort: '',
        headName: '',
        mobile: '',
        address: '',
        delFlag: '',
        revision: '',
        createdBy: '',
        createdTime: '',
        updatedBy: '',
        updatedTime: '',
          note:''
      },
        uploadUrl: '',
        loading: false,
        orgTypeList:[],
        isOpenList: [
            {dictValue: '0', dictName: '启用'},
            {dictValue: '1', dictName: '禁用'},
        ]
    }
  },
  computed: {
      getTypeName(orgType){
          return function(orgType){
              let typeName;
              this.orgTypeList.forEach(item =>{
                 if(item.id == orgType){
                     typeName =  item.typeName;
                 }
               })
              return typeName;
          }
      },
    dataRule () {
      return {
      }
    }
  },
    created: function () {
        this.getOrgTypeList()
    },
  methods: {
      getOrgTypeList() {
          this.$http.get(`heart/vactorgtype/getOrgTypeList`).then(({data: res}) => {
              this.orgTypeList = res.data
          }).catch(() => {
          })
      },
    init () {
      this.visible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        if (this.dataForm.id) {
          this.getInfo()
        }
      })
    },
    // 获取信息
    getInfo () {
      this.$http.get(`/heart/volunteerorg/${this.dataForm.id}`).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.dataForm = {
          ...this.dataForm,
          ...res.data
        }
      }).catch(() => {})
    },
  }
}
</script>
<style>
    .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;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>