zhaoshangyinzi/ruoyi-ui/src/components/ProjectDec/SignContract.vue

<template>
  <div class="sign_box">
    <el-form label-position="right" ref="form" :model="form" label-width="80px">
      <div class="sign_tit">
        项目签约信息
      </div>
      <el-row>
        <el-form-item label-width="120px" label="活动名称:" class="elItem" prop="date1">
          <el-col :span="6">
            <el-date-picker type="date" placeholder="请选择签约日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
          </el-col>
        </el-form-item>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label-width="120px" label="投资方式:" class="elItem" prop="tz">
            <el-col :span="24">
              <el-radio-group v-model="form.resource" style="width: 100%;">
                <el-col :span="12">
                  <el-radio label="独资"></el-radio>
                </el-col>
                <el-col :span="12">
                  <el-radio label="合资"></el-radio>
                </el-col>
              </el-radio-group>
            </el-col>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="是否外资:" class="elItem" prop="tz1">
            <el-col :span="6">
              <el-checkbox-group v-model="form.resource1">
                <el-checkbox label="外资" name="type"></el-checkbox>
              </el-checkbox-group>
            </el-col>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="7">
          <el-form-item label-width="120px" label="总投资额度:" class="elItem" prop="je">
            <el-col :span="18">
              <el-input type="number" placeholder="请输入总投资额度" v-model="form.je"></el-input>
            </el-col>
            <div class="dw_name">万元</div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="1">
          <div class="qz_name">其中</div>
        </el-col>
        <el-col :span="10">
          <el-form-item label-width="182px" label="境外投资(含港澳台投资):" class="elItem" prop="je">
            <el-col :span="18">
              <el-input type="number" placeholder="请输入总投资额度" v-model="form.je"></el-input>
            </el-col>
            <div class="dw_name">万元</div>
          </el-form-item>
          <el-form-item label-width="182px" label="境内省外投资:" class="elItem" prop="je">
            <el-col :span="18">
              <el-input type="number" placeholder="请输入境内省外投资额度" v-model="form.je"></el-input>
            </el-col>
            <div class="dw_name">万元</div>
          </el-form-item>
          <el-form-item label-width="182px" label="省内市外投资:" class="elItem" prop="je">
            <el-col :span="18">
              <el-input type="number" placeholder="请输入省内市外投资额度" v-model="form.je"></el-input>
            </el-col>
            <div class="dw_name">万元</div>
          </el-form-item>
          <el-form-item label-width="182px" label="市内县外投资:" class="elItem" prop="je">
            <el-col :span="18">
              <el-input type="number" placeholder="请输入市内县外投资额度" v-model="form.je"></el-input>
            </el-col>
            <div class="dw_name">万元</div>
          </el-form-item>
          <el-form-item label-width="182px" label="县内投资:" class="elItem" prop="je">
            <el-col :span="18">
              <el-input type="number" placeholder="请输入县内投资额度" v-model="form.je"></el-input>
            </el-col>
            <div class="dw_name">万元</div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="5">
          <el-form-item label-width="121px" label="是否独立供地:" class="elItem" prop="je">
            <el-select v-model="form.region" placeholder="请选择">
              <el-option label="是" value="shanghai"></el-option>
              <el-option label="否" value="beijing"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label-width="93px" label="供地面积:" class="elItem" prop="je">
            <el-col :span="20">
              <el-input placeholder="请输入供地面积" v-model="form.gdmj"></el-input>
            </el-col>
            <div class="dw_name">亩</div>
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label-width="93px" label="供地位置:" class="elItem" prop="je">
            <el-input placeholder="请输入供地位置" v-model="form.gdmj"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label-width="82px" label="土地证:" class="elItem" prop="je">
            <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/">
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label-width="121px" label="流转土地面积:" class="elItem" prop="je">
            <el-col :span="18">
              <el-input placeholder="请输入" v-model="form.gdmj"></el-input>
            </el-col>
            <div class="dw_name">亩</div>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label-width="111px" label="流转土地位置:" class="elItem" prop="je">
            <el-input placeholder="请输入流转土地位置" v-model="form.gdmj"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label-width="119px" label="土地流转合同:" class="elItem" prop="je">
            <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/">
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label-width="94px" label="产权证:" class="elItem" prop="je">
            <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/">
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="7">
          <el-form-item label-width="121px" label="租赁厂房面积:" class="elItem" prop="je">
            <el-col :span="16">
              <el-input placeholder="请输入" v-model="form.gdmj"></el-input>
            </el-col>
            <div class="dw_name">平方米</div>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label-width="111px" label="租赁厂房位置:" class="elItem" prop="je">
            <el-input placeholder="请输入租赁厂房位置" v-model="form.gdmj"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item label-width="94px" label="租赁合同:" class="elItem" prop="je">
            <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/">
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label-width="94px" label="产权证:" class="elItem" prop="je">
            <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/">
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label-width="121px" label="合同约定产值:" class="elItem" prop="je">
            <el-col :span="18">
              <el-input placeholder="请输入" v-model="form.gdmj"></el-input>
            </el-col>
            <div class="dw_name">万元</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label-width="121px" label="合同约定税收:" class="elItem" prop="je">
            <el-col :span="18">
              <el-input placeholder="请输入" v-model="form.gdmj"></el-input>
            </el-col>
            <div class="dw_name">万元</div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row style="margin-left: -10px;">
        <el-col :span="8">
          <el-form-item label-width="131px" label="合同约定开工时间:" class="elItem" prop="je">
            <el-col :span="18">
              <el-date-picker type="date" placeholder="请选择开工时间" v-model="form.date1" style="width: 100%;"></el-date-picker>
            </el-col>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label-width="131px" label="合同约定竣工时间:" class="elItem" prop="je">
            <el-col :span="18">
              <el-date-picker type="date" placeholder="请选择竣工时间" v-model="form.date1" style="width: 100%;"></el-date-picker>
            </el-col>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item label-width="121px" label="合同签约方:" class="elItem" prop="je">
        </el-form-item>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label-width="121px" label="对方:" class="elItem" prop="je">
            <el-input placeholder="请输入对方" v-model="form.gdmj"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label-width="121px" label="签约人:" class="elItem" prop="je">
            <el-input placeholder="请输入签约人" v-model="form.gdmj"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label-width="121px" label="我方:" class="elItem" prop="je">
            <el-input placeholder="请输入我方" v-model="form.gdmj"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label-width="121px" label="签约人:" class="elItem" prop="je">
            <el-input placeholder="请输入签约人" v-model="form.gdmj"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label-width="121px" label="第三方:" class="elItem" prop="je">
            <el-input placeholder="请输入第三方" v-model="form.gdmj"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label-width="121px" label="签约人:" class="elItem" prop="je">
            <el-input placeholder="请输入签约人" v-model="form.gdmj"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="18">
          <el-form-item label-width="121px" label="合同文本:" class="elItem" prop="je">
            <el-upload class="upload-demo" ref="upload" action="https://jsonplaceholder.typicode.com/posts/"
              :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" :auto-upload="false">
              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
              <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="sign_tit">
        企业注册信息
      </div>
      <el-row>
          <el-col :span="6" style="margin-right: -10px;">
            <el-form-item label-width="131px" label="在潜注册公司名称:" class="elItem" prop="je">
              <el-input placeholder="请输入在潜注册公司名称" v-model="form.gdmj"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label-width="109px" label="法定代表人:" class="elItem" prop="je">
              <el-input placeholder="请输入法定代表人" v-model="form.gdmj"></el-input>
            </el-form-item>
          </el-col>
      </el-row>
      <el-row>
          <el-col :span="6" style="margin-right: -10px;">
            <el-form-item label-width="131px" label="注册资本金:" class="elItem" prop="je">
              <el-input placeholder="请输入注册资本金" v-model="form.gdmj"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="109px" label="注册地址:" class="elItem" prop="je">
              <el-input placeholder="请输入注册地址" v-model="form.gdmj"></el-input>
            </el-form-item>
          </el-col>
      </el-row>
      <el-row>
          <el-col :span="6" style="margin-right: -10px;">
            <el-form-item label-width="131px" label="注册资本金:" class="elItem" prop="je">
              <el-input placeholder="请输入注册资本金" v-model="form.gdmj"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="173px" label="营业执照复印件:" class="elItem" prop="je">
              <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/">
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
      </el-row>
      <div class="sign_tit">
        企业股东构成
      </div>
      <el-row>
        <div class="ads_box">
          <img src="../../assets/images/icon_add@2x.png" alt="" class="add_icon">
          <span>添加企业股东构成</span>
        </div>
      </el-row>
      <el-row>
        <el-table v-loading="loading" class="elItem" :data="configList">
          <!-- <el-table-column type="selection" width="55" align="center" /> -->
          <el-table-column label="姓名" align="center" prop="configId" />
          <el-table-column label="股权比例" align="center" prop="configName" :show-overflow-tooltip="true" />
          <el-table-column label="身份证号码" align="center" prop="configKey" :show-overflow-tooltip="true" />
          <el-table-column label="身份证(正面)" align="center" prop="configValue">
            <template>
              <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/">
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
            </template>
          </el-table-column>
          <el-table-column label="身份证(反面)" align="center" prop="configType">
            <template>
              <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/">
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
            </template>
          </el-table-column>
          <!-- <el-table-column label="操作" align="center" prop="remark" :show-overflow-tooltip="true" /> -->
          <el-table-column label="操作" align="center">
            <!-- class-name="small-padding fixed-width" -->
            <template slot-scope="scope">
              <el-button size="mini" type="warning" @click="handleUpdate(scope.row)" v-hasPermi="['system:config:edit']">修改</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.row)" v-hasPermi="['system:config:remove']">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <div class="sign_tit">
        企业备案信息
      </div>
      <el-row>
          <el-col :span="6">
            <el-form-item label-width="121px" label="备案单位:" class="elItem" prop="je">
              <el-input placeholder="请输入备案单位" v-model="form.gdmj"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label-width="109px" label="备案文号:" class="elItem" prop="je">
              <el-input placeholder="请输入备案文号" v-model="form.gdmj"></el-input>
            </el-form-item>
          </el-col>
      </el-row>
      <el-row>
          <el-col :span="6">
            <el-form-item label-width="121px" label="备案总投资额:" class="elItem" prop="je">
              <el-col :span="18">
                <el-input placeholder="请输入备案总投资额" v-model="form.gdmj"></el-input>
              </el-col>
              <div class="dw_name">万元</div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label-width="109px" label="备案建设周期:" class="elItem" prop="je">
              <el-input placeholder="请输入备案建设周期" v-model="form.gdmj"></el-input>
            </el-form-item>
          </el-col>
      </el-row>
      <el-row>
        <el-col :span="18">
          <el-form-item label-width="121px" label="备案表:" class="elItem" prop="je">
            <el-upload class="upload-demo" ref="upload" action="https://jsonplaceholder.typicode.com/posts/"
              :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" :auto-upload="false">
              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
              <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="sign_tit">
        企业包保服务
      </div>
      <el-row>
        <el-col :span="8">
          <el-form-item label-width="122px" label="联系领导:" class="elItem" prop="je">
            <el-input placeholder="请输入联系领导" v-model="form.gdmj"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label-width="98px" label="联系方式:" class="elItem" prop="je">
            <el-input placeholder="请输入联系方式" v-model="form.gdmj"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label-width="122px" label="责任单位:" class="elItem" prop="je">
            <el-input placeholder="请输入责任单位" v-model="form.gdmj"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label-width="98px" label="责任人:" class="elItem" prop="je">
            <el-input placeholder="请输入责任人" v-model="form.gdmj"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label-width="98px" label="联系方式:" class="elItem" prop="je">
            <el-input placeholder="请输入联系方式" v-model="form.gdmj"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        configList: [{}],
        form: {
          resource1: false,
        },
        fileList: []
      }
    },
    methods: {
      submitUpload() {
        this.$refs.upload.submit();
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      }
    }
  }
</script>

<style lang="scss" scoped>
  .ads_box {
    margin: 18px 0;
    font-size: 14px;
    color: #666;
    display: flex;
    align-items: center;

    .add_icon {
      margin-right: 6px;
      width: 15px;
      height: 15px;
    }
  }

  .sign_box {
    padding: 26px 23px;


    .sign_tit {
      font-size: 14px;
      border-left: 3px solid #1C84C6;
      padding: 5px 0 5px 13px;
      color: #343434;
      line-height: 1;
      margin: 8px 0;
      font-weight: bold;
    }

    .elItem {
      margin: 15px 0;
    }
  }

  .qz_name {
    font-size: 14px;
    color: #606266;
    display: inline-block;
    margin: 15px 0 15px;
    font-weight: bold;
    text-align: right;
    line-height: 36px;
    width: 100%;
  }
</style>