sso-parent/sso-manage-console-web/src/components/userspace/modal/SpaceEditModal.vue

<template>
  <div class="modal fade in" role="dialog" aria-hidden="false" style="display: block;" v-if="isVisible">
    <div class="modal-dialog x-modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <!-- tab切换 start-->
        <ul class="nav nav-tabs x-nav-tabs x-navbar-right hidden-xs modal-header" role="tablist">
          <li :class="{active: showTab === 'logs'}"><a aria-controls="userSpaceDetailModal_log" role="tab" data-toggle="tab" aria-expanded="false" @click="showTab = 'logs'">操作日志</a></li>
          <li :class="{active: showTab === 'apps'}"><a aria-controls="userSpaceDetailModal_apps" role="tab" data-toggle="tab" aria-expanded="false" @click="showTab = 'apps'">绑定应用</a></li>
          <li :class="{active: showTab === 'default'}"><a aria-controls="userSpaceDetailModal_info" role="tab" data-toggle="tab" aria-expanded="true" @click="showTab = 'default'">详细资料</a></li>
          <h2 class="hidden-xs">
            <i class="fa fa-file-text-o"></i> {{data.spaceName}}
          </h2>
        </ul>
        <!-- tab切换 end-->
        <div role="tabpanel" id="userSpaceDetailModal_info" class="x-tab-pane" :class="{active: showTab === 'default'}">
          <div class="modal-body">
            <div class="x-group-header">
              <h4>企业注册信息</h4>
            </div>
            <dl class="dl-horizontal x-dl-horizontal">
              <dt>企业名称</dt>
              <dd id="primaryName">{{data.spaceName}} <span class="x-text-muted x-text-small" style="display: none">您可以根据营业执照
							<a id="x-btn-renew" href="javascript:void(0);">修改</a></span></dd>
              <dd id="renewName" style="display: none"><input type="text" value="深圳市超诚电子有限公司" name="renewName">
                <span class="x-text-muted x-text-small">您可以根据营业执照
							<a id="x-btn-cancel" href="javascript:void(0);">取消</a></span>
              </dd>
              <dt>企业简称</dt>
              <dd id="primaryShortName">{{data.spaceName}}</dd>
              <dd id="renewShortName" style="display: none"><input type="text" value="超诚电子有限公司" name="renewShortName">
                <a id="x-btn-confirm" href="javascript:void(0);">确定</a>
              </dd>
              <dt>营业执照</dt>
              <dd id="parimaryUid">
                {{data.businessCode}}&nbsp;<a class="x-btn-image" href="javascript:void(0);" data-src="http://dfs.ubtob.com/group1/M00/0E/EC/CgpkyFf9smiAbYpKAAAklNd_Stw661.jpg">查看附件</a>
              </dd>
              <dd id="renewUid" style="display: none">
                <input type="text" value="201678765678988" name="renewUid">
              </dd>
              <dt>注册地区</dt>
              <dd>{{data.regAddress || '注册地区'}} <span class="x-text-muted x-text-small">您可以根据营业执照<a href="">填写</a></span></dd>
              <dt>企业地址</dt>
              <dd id="primaryAdress">{{data.province || '企业地址'}} <span class="x-text-muted x-text-small"></span></dd>
              <dd id="renewAdress" style="display: none"><input type="text" value="广东省深圳市罗湖区罗湖路266号" name="renewAdress">
              </dd>
              <dt>所属行业</dt>
              <dd>制造行业</dd>
              <dt>官网地址</dt>
              <dd>http://ww.exempIe.com</dd>
            </dl>
            <div class="x-group-header">
              <h4>管理员信息</h4>
            </div>
            <dl class="dl-horizontal x-dl-horizontal">
              <dt>姓名</dt>
              <dd>王超</dd>
              <dt>手机号</dt>
              <dd>15866765672</dd>
              <dt>邮箱</dt>
              <dd>wangchao@exempIe.com &nbsp;
                <a class="x-btn-send" style="display: none" href="javascript:void(0);" data-src="wangchao@exempIe.com">重新发送激活邮件</a>&nbsp;
                <a class="btn x-btn x-btn-blank x-btn-editor" style="display: none" href="javascript:void(0);">邮箱填错了？修改一下</a>
              </dd>
              <dt class="x-dt" style="display: none">修改邮箱</dt>
              <dd><div class="x-form-buttom" style="display: none">
                <div class="col-sm-5" id="newEmail">
                  <input type="text" class="form-control x-input" name="adEmail" x-pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
                </div>
              </div>
                <a class="btn x-btn x-btn-blank x-editor-trigger" style="display: none" href="javascript:void(0);" data-src="">确定修改</a></dd>
            </dl>
            <div id="reasonWrap" style="display: none">
              <div class="x-group-header">
                <h4>审批意见</h4>
              </div>
              <dl class="dl-horizontal x-dl-horizontal">
                <dt>失败原因</dt>
                <dd></dd>
              </dl>
            </div>
            <div id="auditWrap" style="">
              <div class="x-group-header">
                <h4>审批意见</h4>
              </div>
              <form class="x-form">
                <div class="form-group">
                  <label class="radio-inline"> <input type="radio" name="enable" value="1" checked=""> 批准通过
                  </label> <label class="radio-inline"> <input type="radio" name="enable" value="0"> 残忍拒绝
                </label>
                </div>
                <div class="form-group" id="reasonChooseWrap" style="display: none">
                  <label>您拒绝的理由是？</label>
                  <div class="radio">
                    <label> <input type="radio" name="reason" value="营业执照附件看不清" checked=""> 营业执照附件不清晰
                    </label>
                  </div>
                  <div class="radio">
                    <label> <input type="radio" name="reason" value="营业执照附件上的企业名称与填写的企业名称不一致">
                      营业执照附件上的企业名称与填写的企业名称不一致
                    </label>
                  </div>
                  <div class="radio">
                    <label> <input type="radio" name="reason" value="营业执照附件上的注册号与填写的营业执照号不一致">
                      营业执照附件上的注册号与填写的营业执照号不一致
                    </label>
                  </div>
                  <div class="radio">
                    <label> <input type="radio" name="reason" value="other">
                      其他原因
                    </label>
                  </div>
                  <textarea id="otherReason" name="otherReason" class="form-control" placeholder="您拒绝的理由是？" style="display: none"></textarea>
                </div>
              </form>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-blank" data-dismiss="modal" @click="isVisible = false">关闭</button>
            <button type="button" class="btn btn-default btn-submit">确认</button>
          </div>
        </div>
        <div role="tabpanel" id="userSpaceDetailModal_apps" class="x-tab-pane" :class="{active: showTab === 'apps'}">
          <div class="modal-body">
            <div class="x-mod x-list" style="margin: -15px">
              <div class="x-mod-body">
                <div class="x-common-list" id="apps">
                  <!-- userspaces -->
                </div>
                <div class="x-empty" style="display: none">
                  <i class="fa fa-coffee"></i>
                  <p>还没有绑定任何应用</p>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-blank" data-dismiss="modal" @click="isVisible = false">关闭</button>
          </div>
        </div>
        <div role="tabpanel" id="userSpaceDetailModal_log" class="x-tab-pane" :class="{active: showTab === 'logs'}">
          <div class="modal-body">
            <!-- 日志列表 start -->
            <div class="x-mod x-list x-log-list" style="margin: -15px">
              <div class="x-mod-body">
                <div class="x-common-list">
                  <!-- log item -->
                </div>
                <div class="x-empty" style="display: none">
                  <i class="fa fa-coffee"></i>
                  <p>还没有留下任何足迹！</p>
                </div>
              </div>
            </div>
            <!-- 日志列表 end -->
          </div>
          <div class="modal-footer">
            <ul class="pagination pull-left" style="margin: 0"></ul>
            <button type="button" class="btn btn-blank" data-dismiss="modal" @click="isVisible = false">关闭</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'SpaceEditModal',
    props: {
      visible: Boolean,
      data: Object
    },
    data () {
      return {
        isVisible: false,
        showTab: 'default'
      }
    },
    watch: {
      visible: function (value) {
        this.isVisible = value
      },
      isVisible: function (value) {
        this.$emit('update:visible', value)
      }
    }
  }
</script>

<style scoped>

</style>