|
@@ -0,0 +1,274 @@
|
|
|
+<template>
|
|
|
+ <div class="hui-flex contract-edit">
|
|
|
+ <div class="contract-step">
|
|
|
+ <div class="step-item active">
|
|
|
+ <div class="step-number">1</div>
|
|
|
+ <div class="step-label">基本信息</div>
|
|
|
+ </div>
|
|
|
+ <div class="line"><i class="el-icon-arrow-right"></i></div>
|
|
|
+ <div class="step-item">
|
|
|
+ <div class="step-number">2</div>
|
|
|
+ <div class="step-label">费用条款</div>
|
|
|
+ </div>
|
|
|
+ <div class="line"><i class="el-icon-arrow-right"></i></div>
|
|
|
+ <div class="step-item">
|
|
|
+ <div class="step-number">3</div>
|
|
|
+ <div class="step-label">合同文本</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-form ref="form" :model="form" class="hui-flex-box" label-position="top">
|
|
|
+ <div class="contract-left">
|
|
|
+ <div class="contract-box">
|
|
|
+ <div class="hui-chart-title">所属公司信息</div>
|
|
|
+ <div class="contract-from">
|
|
|
+ <el-form-item label="所属公司">
|
|
|
+ <el-select v-model="form.type" placeholder="请选择所属公司">
|
|
|
+ <el-option :label="item.name" :value="item.id"
|
|
|
+ v-for="(item,index) in $field.field.fieldType" :key="index">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="所属部门">
|
|
|
+ <el-select v-model="form.type" placeholder="请选择所属部门">
|
|
|
+ <el-option :label="item.name" :value="item.id"
|
|
|
+ v-for="(item,index) in $field.field.fieldType" :key="index">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="招商跟进人">
|
|
|
+ <el-select v-model="form.type" placeholder="请选择招商跟进人">
|
|
|
+ <el-option :label="item.name" :value="item.id"
|
|
|
+ v-for="(item,index) in $field.field.fieldType" :key="index">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="运营跟进人">
|
|
|
+ <el-select v-model="form.type" placeholder="请选择运营跟进人">
|
|
|
+ <el-option :label="item.name" :value="item.id"
|
|
|
+ v-for="(item,index) in $field.field.fieldType" :key="index">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="contract-box">
|
|
|
+ <div class="hui-chart-title">租客信息</div>
|
|
|
+ <div class="contract-from">
|
|
|
+ <el-form-item label="所属公司">
|
|
|
+ <el-select v-model="form.type" placeholder="请选择所属公司">
|
|
|
+ <el-option :label="item.name" :value="item.id"
|
|
|
+ v-for="(item,index) in $field.field.fieldType" :key="index">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="所属部门">
|
|
|
+ <el-select v-model="form.type" placeholder="请选择所属部门">
|
|
|
+ <el-option :label="item.name" :value="item.id"
|
|
|
+ v-for="(item,index) in $field.field.fieldType" :key="index">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="招商跟进人">
|
|
|
+ <el-select v-model="form.type" placeholder="请选择招商跟进人">
|
|
|
+ <el-option :label="item.name" :value="item.id"
|
|
|
+ v-for="(item,index) in $field.field.fieldType" :key="index">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="运营跟进人">
|
|
|
+ <el-select v-model="form.type" placeholder="请选择运营跟进人">
|
|
|
+ <el-option :label="item.name" :value="item.id"
|
|
|
+ v-for="(item,index) in $field.field.fieldType" :key="index">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="contract-box">
|
|
|
+ <div class="hui-chart-title">基本信息</div>
|
|
|
+ <div class="contract-from">
|
|
|
+ <el-form-item label="所属公司">
|
|
|
+ <el-select v-model="form.type" placeholder="请选择所属公司">
|
|
|
+ <el-option :label="item.name" :value="item.id"
|
|
|
+ v-for="(item,index) in $field.field.fieldType" :key="index">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="所属部门">
|
|
|
+ <el-select v-model="form.type" placeholder="请选择所属部门">
|
|
|
+ <el-option :label="item.name" :value="item.id"
|
|
|
+ v-for="(item,index) in $field.field.fieldType" :key="index">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="招商跟进人">
|
|
|
+ <el-select v-model="form.type" placeholder="请选择招商跟进人">
|
|
|
+ <el-option :label="item.name" :value="item.id"
|
|
|
+ v-for="(item,index) in $field.field.fieldType" :key="index">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="运营跟进人">
|
|
|
+ <el-select v-model="form.type" placeholder="请选择运营跟进人">
|
|
|
+ <el-option :label="item.name" :value="item.id"
|
|
|
+ v-for="(item,index) in $field.field.fieldType" :key="index">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="contract-right">
|
|
|
+ <div class="contract-project-list">
|
|
|
+ <div class="contract-project-title">
|
|
|
+ <svg-icon name="zhuangshi" width="16" height="20"></svg-icon>
|
|
|
+ <span class="hui-left-tree-sub">房源列表</span>
|
|
|
+ </div>
|
|
|
+ <project-item-tree-select></project-item-tree-select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ <div class="contract-btn">
|
|
|
+ <el-button size="medium">上一步</el-button>
|
|
|
+ <el-button type="primary" size="medium">保存</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import projectItemTreeSelect from '@/components/common/projectItemTreeSelect'
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ form: {
|
|
|
+ type: ''
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ projectItemTreeSelect
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ .contract-edit {
|
|
|
+ .hui-flex-box {
|
|
|
+ background: $--background;
|
|
|
+ display: flex;
|
|
|
+ padding: 12px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .contract-project-title {
|
|
|
+ height: 42px;
|
|
|
+ border-radius: 2px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 12px;
|
|
|
+ border-bottom: 1px solid $--color-border;
|
|
|
+ }
|
|
|
+
|
|
|
+ .contract-left {
|
|
|
+ flex: 2;
|
|
|
+ width: 0;
|
|
|
+ height: 100%;
|
|
|
+ overflow-y: auto;
|
|
|
+ padding-right: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .contract-right {
|
|
|
+ flex: 1;
|
|
|
+ width: 0;
|
|
|
+ height: 100%;
|
|
|
+ padding-left: 5px;
|
|
|
+
|
|
|
+ .contract-project-list {
|
|
|
+ background: $--box-background;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .contract-btn {
|
|
|
+ text-align: right;
|
|
|
+ padding: 10px 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .contract-box {
|
|
|
+ padding: 10px 0 0 10px;
|
|
|
+ background: $--box-background;
|
|
|
+ margin-bottom: 12px;
|
|
|
+
|
|
|
+ .contract-from {
|
|
|
+ padding: 20px 0 0 15px;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+
|
|
|
+ .el-form-item:nth-child(2n-1) {
|
|
|
+ padding-right: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-form-item:nth-child(2n) {
|
|
|
+ padding-left: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-form-item {
|
|
|
+ width: 33.333%;
|
|
|
+ padding-right: 15px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-form-item__label {
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .contract-step {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .step-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 200px;
|
|
|
+ justify-content: center;
|
|
|
+ height: 50px;
|
|
|
+ cursor: pointer;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .step-number {
|
|
|
+ width: 26px;
|
|
|
+ height: 26px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: $--color-background;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-right: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .step-item.active {
|
|
|
+ &::before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ height: 2px;
|
|
|
+ right: 20px;
|
|
|
+ left: 20px;
|
|
|
+ background: $--color-primary;
|
|
|
+ }
|
|
|
+
|
|
|
+ .step-number {
|
|
|
+ background: $--color-primary;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|