P0006/src/view/vip-apply.vue

<template>
  <el-main class="main-container">
    <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
      <el-breadcrumb-item class="location">您的位置:</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>会员服务</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row class="card_menu">
      <el-col :span="4">
        <el-card class="box-card" shadow="never" :body-style="{ padding: '10px 0'}">
          <div slot="header">
            <span>会员服务</span>
          </div>
          <div class="menu-item">
            <router-link to="/vip-service">会员名录</router-link>
          </div>
          <div class="menu-item">会员介绍</div>
          <div class="menu-item active">入会申请</div>
          <div class="menu-item">问题反馈</div>
        </el-card>
      </el-col>
      <el-col :span="20">
        <el-card shadow="never" style="margin: 0 10px;">
          <h2 style="color: #333;text-align: center;margin: 15px auto">上海市集成电路行业协会入会申请表</h2>
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="form" label-position="left">
            <div class="table el-table el-table--fit el-table--border" style="width: 100%;border-radius: 4px">
              <div class="el-table__body-wrapper">
                <table class="el-table__body" cellspacing="0" cellpadding="0" border="0">
                  <colgroup>
                    <col width="8.3333333333%">
                    <col width="8.3333333333%">
                    <col width="8.3333333333%">
                    <col width="8.3333333333%">
                    <col width="8.3333333333%">
                    <col width="8.3333333333%">
                    <col width="8.3333333333%">
                    <col width="8.3333333333%">
                    <col width="8.3333333333%">
                    <col width="8.3333333333%">
                    <col width="8.3333333333%">
                    <col width="8.3333333333%">
                  </colgroup>
                  <tbody>
                  <tr class="el-table__row">
                    <td colspan="6" class="el-table__cell">
                      <el-form-item label="单位中文名称" prop="name">
                        <el-input v-model="ruleForm.name"></el-input>
                      </el-form-item>
                    </td>
                    <td colspan="6" class="el-table__cell">
                      <el-form-item label="单位中文名称" prop="name">
                        <el-input v-model="ruleForm.name"></el-input>
                      </el-form-item>
                    </td>
                  </tr>
                  <tr class="el-table__row">
                    <td colspan="7" class="el-table__cell">
                      <el-form-item label="地址" prop="name" label-width="50px">
                        <el-input v-model="ruleForm.name"></el-input>
                      </el-form-item>
                    </td>
                    <td colspan="5" class="el-table__cell">
                      <el-form-item label="邮编" prop="name" label-width="50px">
                        <el-input v-model="ruleForm.name"></el-input>
                      </el-form-item>
                    </td>
                  </tr>
                  <tr class="el-table__row">
                    <td colspan="12" class="el-table__cell">
                      <el-form-item label="所有制形式" prop="resource">
                        <el-radio-group v-model="ruleForm.resource">
                          <el-radio label="国企"></el-radio>
                          <el-radio label="外资"></el-radio>
                          <el-radio label="合资"></el-radio>
                          <el-radio label="民营"></el-radio>
                        </el-radio-group>
                      </el-form-item>
                    </td>
                  </tr>
                  <tr class="el-table__row">
                    <td colspan="6" class="el-table__cell">
                      <el-form-item label="总投资" prop="name" label-width="60px">
                        <el-input v-model="ruleForm.name"></el-input>
                      </el-form-item>
                    </td>
                    <td colspan="6" class="el-table__cell">
                      <el-form-item label="注册资本" prop="name" label-width="70px">
                        <el-input v-model="ruleForm.name"></el-input>
                      </el-form-item>
                    </td>
                  </tr>
                  <tr class="el-table__row">
                    <td colspan="6" class="el-table__cell">
                      <el-form-item label="营业执照登记号" prop="name" label-width="120px">
                        <el-input v-model="ruleForm.name"></el-input>
                      </el-form-item>
                    </td>
                    <td colspan="6" class="el-table__cell">
                      <el-form-item label="企业代码" prop="name" label-width="70px">
                        <el-input v-model="ruleForm.name"></el-input>
                      </el-form-item>
                    </td>
                  </tr>
                  <tr class="el-table__row">
                    <td colspan="6" class="el-table__cell" style="padding: 0 !important;">
                      <el-form-item label="单位网址" prop="name" label-width="70px">
                        <el-input v-model="ruleForm.name"></el-input>
                      </el-form-item>
                    </td>
                    <td colspan="6" class="el-table__cell" style="padding-right: 10px">
                      <el-row>
                        <el-col span="12">
                          <el-form-item label="单位人数" prop="name" label-width="70px" style="margin: 0">
                            <el-input v-model="ruleForm.name"></el-input>
                          </el-form-item>
                        </el-col>
                        <el-col span="12">
                          <el-form-item label="技术人员" prop="name" label-width="70px" style="margin: 0">
                            <el-input v-model="ruleForm.name"></el-input>
                          </el-form-item>
                        </el-col>
                      </el-row>
                    </td>
                  </tr>
                  <tr class="el-table__row">
                    <td colspan="4" class="el-table__cell">
                      <el-form-item label="单位法人代表" prop="name">
                        <el-input v-model="ruleForm.name"></el-input>
                      </el-form-item>
                    </td>
                    <td colspan="4" class="el-table__cell">
                      <el-form-item label="职务" prop="name" label-width="50px">
                        <el-input v-model="ruleForm.name"></el-input>
                      </el-form-item>
                    </td>
                    <td colspan="4" class="el-table__cell">
                      <el-form-item label="手机号" prop="name" label-width="70px">
                        <el-input v-model="ruleForm.name"></el-input>
                      </el-form-item>
                    </td>
                  </tr>
                  <tr class="el-table__row">
                    <td colspan="2" class="el-table__cell td-text">
                      单位对口协会<br/>负责人
                    </td>
                    <td colspan="4" class="el-table__cell">
                      <el-form-item label="姓名" prop="name" label-width="70px" style="margin-bottom: 10px;">
                        <el-input v-model="ruleForm.name"></el-input>
                      </el-form-item>
                      <el-form-item label="职务" prop="name" label-width="70px" style="margin-bottom: 10px;">
                        <el-input v-model="ruleForm.name"></el-input>
                      </el-form-item>
                      <el-form-item label="手机号" prop="name" label-width="70px" style="margin-bottom: 10px;">
                        <el-input v-model="ruleForm.name"></el-input>
                      </el-form-item>
                      <el-form-item label="电话" prop="name" label-width="70px" style="margin-bottom: 10px;">
                        <el-input v-model="ruleForm.name"></el-input>
                      </el-form-item>
                      <el-form-item label="传真" prop="name" label-width="70px" style="margin-bottom: 10px;">
                        <el-input v-model="ruleForm.name"></el-input>
                      </el-form-item>
                      <el-form-item label="E-mail" prop="name" label-width="70px" style="margin-bottom: 10px;">
                        <el-input v-model="ruleForm.name"></el-input>
                      </el-form-item>
                    </td>
                    <td colspan="2" class="el-table__cell td-text">
                      单位对口协会<br/>联系人
                    </td>
                    <td colspan="4" class="el-table__cell">
                      <el-form-item label="姓名" prop="name" label-width="70px" style="margin-bottom: 10px;">
                        <el-input v-model="ruleForm.name"></el-input>
                      </el-form-item>
                      <el-form-item label="职务" prop="name" label-width="70px" style="margin-bottom: 10px;">
                        <el-input v-model="ruleForm.name"></el-input>
                      </el-form-item>
                      <el-form-item label="手机号" prop="name" label-width="70px" style="margin-bottom: 10px;">
                        <el-input v-model="ruleForm.name"></el-input>
                      </el-form-item>
                      <el-form-item label="电话" prop="name" label-width="70px" style="margin-bottom: 10px;">
                        <el-input v-model="ruleForm.name"></el-input>
                      </el-form-item>
                      <el-form-item label="传真" prop="name" label-width="70px" style="margin-bottom: 10px;">
                        <el-input v-model="ruleForm.name"></el-input>
                      </el-form-item>
                      <el-form-item label="E-mail" prop="name" label-width="70px">
                        <el-input v-model="ruleForm.name"></el-input>
                      </el-form-item>
                    </td>
                  </tr>
                  <tr class="el-table__row">
                    <td colspan="2" class="el-table__cell td-text">
                      现有股东及<br/>持股情况
                    </td>
                    <td colspan="6" class="el-table__cell">
                      <el-form-item label="控股方持股金额" prop="name" label-width="120px" style="margin-bottom: 10px">
                        <el-input v-model="ruleForm.name"></el-input>
                      </el-form-item>
                      <el-form-item label="其它股东持股金额" prop="name" label-width="120px">
                        <el-input v-model="ruleForm.name"></el-input>
                      </el-form-item>
                    </td>
                    <td colspan="4" class="el-table__cell">
                      <el-form-item label="持股比例" prop="name">
                        <el-input v-model="ruleForm.name"></el-input>
                      </el-form-item>
                      <el-form-item label="持股比例" prop="name">
                        <el-input v-model="ruleForm.name"></el-input>
                      </el-form-item>
                    </td>
                  </tr>
                  <tr class="el-table__row">
                    <td colspan="2" class="el-table__cell td-text" style="text-align: left !important;padding-left: 20px">
                      <el-checkbox v-model="checked">晶圆制造</el-checkbox>
                    </td>
                    <td colspan="6" class="el-table__cell" style="margin: 0 !important;padding: 10px 0">
                      <el-row style="padding: 0 10px;">
                        <el-col span="20">
                          <el-form-item label="制造技术" prop="name" style="margin-bottom: 0">
                            <el-input v-model="ruleForm.name"></el-input>
                          </el-form-item>
                        </el-col>
                        <el-col span="4" style="text-align: center;line-height: 30px">
                          um工艺
                        </el-col>
                      </el-row>

                    </td>
                    <td colspan="4" class="el-table__cell">
                      <el-form-item label="年销售额" prop="name">
                        <el-input v-model="ruleForm.name"></el-input>
                      </el-form-item>
                    </td>
                  </tr>
                  <tr class="el-table__row">
                    <td colspan="2" class="el-table__cell td-text" style="text-align: left !important;padding-left: 20px">
                      <el-checkbox v-model="checked">封装测试</el-checkbox>
                    </td>
                    <td colspan="6" class="el-table__cell">
                      <el-form-item label=" 封装形式及型号" prop="name" label-width="110px">
                        <el-input v-model="ruleForm.name"></el-input>
                      </el-form-item>
                    </td>
                    <td colspan="4" class="el-table__cell">
                      <el-form-item label="年销售额" prop="name">
                        <el-input v-model="ruleForm.name"></el-input>
                      </el-form-item>
                    </td>
                  </tr>
                  <tr class="el-table__row">
                    <td colspan="2" class="el-table__cell td-text" style="text-align: left !important;padding-left: 20px">
                      <el-checkbox v-model="checked">设计</el-checkbox>
                    </td>
                    <td colspan="6" class="el-table__cell">
                      <el-form-item label=" 产品及性能" prop="name">
                        <el-input v-model="ruleForm.name"></el-input>
                      </el-form-item>
                    </td>
                    <td colspan="4" class="el-table__cell">
                      <el-form-item label="年销售额" prop="name">
                        <el-input v-model="ruleForm.name"></el-input>
                      </el-form-item>
                    </td>
                  </tr>
                  <tr class="el-table__row">
                    <td colspan="2" class="el-table__cell td-text" style="text-align: left !important;padding-left: 20px">
                      <el-checkbox v-model="checked">设备材料</el-checkbox>
                    </td>
                    <td colspan="6" class="el-table__cell">
                      <el-form-item label=" 产品及性能" prop="name">
                        <el-input v-model="ruleForm.name"></el-input>
                      </el-form-item>
                    </td>
                    <td colspan="4" class="el-table__cell">
                      <el-form-item label="年销售额" prop="name">
                        <el-input v-model="ruleForm.name"></el-input>
                      </el-form-item>
                    </td>
                  </tr>
                  <tr class="el-table__row">
                    <td colspan="2" class="el-table__cell td-text" style="text-align: left !important;padding-left: 20px">
                      <el-checkbox v-model="checked">智能卡</el-checkbox>
                    </td>
                    <td colspan="6" class="el-table__cell">
                      <el-form-item label=" 产品及性能" prop="name">
                        <el-input v-model="ruleForm.name"></el-input>
                      </el-form-item>
                    </td>
                    <td colspan="4" class="el-table__cell">
                      <el-form-item label="年销售额" prop="name">
                        <el-input v-model="ruleForm.name"></el-input>
                      </el-form-item>
                    </td>
                  </tr>
                  <tr class="el-table__row">
                    <td colspan="2" class="el-table__cell td-text" style="text-align: left !important;padding-left: 20px">
                      <el-checkbox v-model="checked">其它</el-checkbox>
                    </td>
                    <td colspan="10" class="el-table__cell">
                      <el-form-item label=" 产品及性能" prop="name">
                        <el-input v-model="ruleForm.name"></el-input>
                      </el-form-item>
                    </td>
                  </tr>
                  <tr class="el-table__row">
                    <td colspan="2" class="el-table__cell td-text">
                      公司简介
                    </td>
                    <td colspan="10" class="el-table__cell" style="padding-left: 10px;padding-right: 10px">
                      <el-input v-model="ruleForm.name"></el-input>
                    </td>
                  </tr>
                  <tr class="el-table__row">
                    <td colspan="12" class="el-table__cell">
                      <el-form-item label="会员等级" prop="desc">
                        <el-radio-group v-model="ruleForm.resource">
                          <el-radio label="一般会员">一般会员</el-radio>
                          <el-radio label="理事长单位">理事长单位</el-radio>
                          <el-radio label="副会长">副会长</el-radio>
                          <el-radio label="会长">会长</el-radio>
                        </el-radio-group>
                      </el-form-item>
                    </td>
                  </tr>
                  <tr class="el-table__row">
                    <td colspan="12" class="el-table__cell">
                      <el-form-item label="产业链" prop="desc">
                        <el-radio-group v-model="ruleForm.resource">
                          <el-radio label="设计" style="margin-right: 10px">设计</el-radio>
                          <el-radio label="制造" style="margin-right: 10px">制造</el-radio>
                          <el-radio label="封装测试" style="margin-right: 10px">封装测试</el-radio>
                          <el-radio label="设备材料" style="margin-right: 10px">设备材料</el-radio>
                          <el-radio label="投融资" style="margin-right: 10px">投融资</el-radio>
                          <el-radio label="科研院所" style="margin-right: 10px">科研院所</el-radio>
                          <el-radio label="其它">其它</el-radio>
                        </el-radio-group>
                      </el-form-item>
                    </td>
                  </tr>
                  <tr class="el-table__row">
                    <td colspan="6" class="el-table__cell">
                      <el-form-item label="会员标准" prop="name" label-width="70px">
                        <el-input v-model="ruleForm.name"></el-input>
                      </el-form-item>
                    </td>
                    <td colspan="6" class="el-table__cell">
                      <el-form-item label="入会时间" prop="name" label-width="70px">
                        <el-input v-model="ruleForm.name"></el-input>
                      </el-form-item>
                    </td>
                  </tr>
                  <tr class="el-table__row">
                    <td colspan="12" class="el-table__cell">
                      <el-row>
                        <el-col span="8" style="padding: 0 20px">
                          <el-form-item label="填表单位（盖章）" label-width="120px" style="margin-bottom: 0">
                        </el-form-item>
                        </el-col>
                        <el-col span="8" style="padding: 0 20px">
                          <el-form-item label="填表人（签字）" label-width="100px" style="margin-bottom: 0">
                            <el-input v-model="ruleForm.name"></el-input>
                          </el-form-item>
                        </el-col>
                        <el-col span="8" style="padding: 0 20px">
                          <el-form-item label="填表日期" label-width="70px" style="margin-bottom: 0">
                            <el-input v-model="ruleForm.name"></el-input>
                          </el-form-item>
                        </el-col>
                      </el-row>
                    </td>
                  </tr>
                  <tr class="el-table__row">
                    <td colspan="12" class="el-table__cell" style="padding-left: 20px">
                      备注：选择参加专业请在      里打“✔️”
                    </td>
                  </tr>
                  <tr class="el-table__row">
                    <td colspan="2" class="el-table__cell" style="padding-left: 20px">
                      联系人：石建
                    </td>
                    <td colspan="3" class="el-table__cell" style="padding-left: 20px">
                      电话：50809814
                    </td>
                    <td colspan="3" class="el-table__cell" style="padding-left: 20px">
                      传真：60805259
                    </td>
                    <td colspan="4" class="el-table__cell" style="padding-left: 20px">
                      E-mail：wrr@sica.org.cn
                    </td>
                  </tr>
                  </tbody>
                </table>
              </div>
            </div>
            <div style="margin: 20px auto;text-align: center">
              <el-button plain class="text-linear">上传附件</el-button>
              <el-button type="primary" style="letter-spacing: 3px">下载申请表</el-button>
            </div>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </el-main>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      rules: {
        name: [
          {required: true, message: 'Please input Activity name', trigger: 'blur'},
          {min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur'}
        ],
        region: [
          {required: true, message: 'Please select Activity zone', trigger: 'change'}
        ],
        date1: [
          {type: 'date', required: true, message: 'Please pick a date', trigger: 'change'}
        ],
        date2: [
          {type: 'date', required: true, message: 'Please pick a time', trigger: 'change'}
        ],
        type: [
          {type: 'array', required: true, message: 'Please select at least one activity type', trigger: 'change'}
        ],
        resource: [
          {required: true, message: 'Please select activity resource', trigger: 'change'}
        ],
        desc: [
          {required: true, message: 'Please input activity form', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>
<style>
.form .el-input__inner {
  border-radius: 0 !important;
}

.table td.el-table__cell {
  border-bottom: 1px solid #ebeef5;
  border-right: 1px solid #ebeef5;

}

.table td > .el-form-item {
  margin-bottom: 0;
  padding: 0 10px;
}
.table{
  font-size: 12px !important;
}
.table .el-radio__label,.table .el-checkbox__label{
  font-size: 12px !important;
}

.el-form-item__label {
  font-size: 12px;
}
.td-text{
  text-align: center !important;
  margin: 0 auto !important;
}
</style>