|
|
@@ -0,0 +1,231 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <div
|
|
|
+ style="height: 400px"
|
|
|
+ class="bg-white"
|
|
|
+ >
|
|
|
+ <div class="basicInformation">
|
|
|
+ <div style="padding-top: 10px;margin-left: 90px">
|
|
|
+ <el-image :src="sign" />
|
|
|
+ </div>
|
|
|
+ <div style="display: flex;align-items: center">
|
|
|
+ <el-text
|
|
|
+ style="margin-left: 10px"
|
|
|
+ size="large"
|
|
|
+ tag="b"
|
|
|
+ >项目基本信息</el-text>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-row style="margin-top: 20px">
|
|
|
+ <el-col
|
|
|
+ :span="16"
|
|
|
+ style="margin-left: 90px"
|
|
|
+ >
|
|
|
+ <el-steps
|
|
|
+ class="mb-4"
|
|
|
+ style="max-width: 750px"
|
|
|
+ :space="250"
|
|
|
+ :active="infoSteps"
|
|
|
+ simple
|
|
|
+ >
|
|
|
+ <el-step
|
|
|
+ title="甲方信息"
|
|
|
+ :icon="Document"
|
|
|
+ />
|
|
|
+ <el-step
|
|
|
+ title="乙方信息"
|
|
|
+ :icon="Document"
|
|
|
+ />
|
|
|
+ <el-step
|
|
|
+ title="丙方信息"
|
|
|
+ :icon="Document"
|
|
|
+ />
|
|
|
+ </el-steps>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row style="margin-top: 30px">
|
|
|
+ <el-col
|
|
|
+ style="margin-left: 90px"
|
|
|
+ >
|
|
|
+ <el-form
|
|
|
+ label-width="100"
|
|
|
+ label-position="left"
|
|
|
+ >
|
|
|
+ <div v-show="infoSteps === 0">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="5">
|
|
|
+ <el-form-item
|
|
|
+ label="项目名称"
|
|
|
+ size="large"
|
|
|
+ >
|
|
|
+ <el-input placeholder="请输入项目名称" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col
|
|
|
+ :span="5"
|
|
|
+ :offset="1"
|
|
|
+ >
|
|
|
+ <el-form-item
|
|
|
+ label="项目地址："
|
|
|
+ size="large"
|
|
|
+ >
|
|
|
+ <el-input placeholder="请输入项目地址" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row style="margin-top: 10px">
|
|
|
+ <el-col :span="5">
|
|
|
+ <el-form-item
|
|
|
+ label="甲方电话"
|
|
|
+ size="large"
|
|
|
+ >
|
|
|
+ <el-input placeholder="请输入甲方负责人电话" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col
|
|
|
+ :span="5"
|
|
|
+ :offset="1"
|
|
|
+ >
|
|
|
+ <el-form-item
|
|
|
+ label="甲方负责人"
|
|
|
+ size="large"
|
|
|
+ >
|
|
|
+ <el-input placeholder="请输入甲方负责人名称" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ <div v-show="infoSteps === 1">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="5">
|
|
|
+ <el-form-item
|
|
|
+ label="乙方负责人"
|
|
|
+ size="large"
|
|
|
+ >
|
|
|
+ <el-input placeholder="请输入乙方负责人名称" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col
|
|
|
+ :span="5"
|
|
|
+ :offset="1"
|
|
|
+ >
|
|
|
+ <el-form-item
|
|
|
+ label="合同金额"
|
|
|
+ size="large"
|
|
|
+ >
|
|
|
+ <el-input-number v-model="condition.projectPrice" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="5" :offset="1">
|
|
|
+ <el-form-item
|
|
|
+ label="合同签订时间"
|
|
|
+ size="large"
|
|
|
+ >
|
|
|
+ <el-date-picker
|
|
|
+ v-model="condition.signTime"
|
|
|
+ type="date"
|
|
|
+ placeholder="请选择合同签订时间"
|
|
|
+ format="YYYY-MM-DD"
|
|
|
+ value-format="YYYY-MM-DD"
|
|
|
+ clearable
|
|
|
+ @clear="condition.signTime = ''"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row style="margin-top: 10px">
|
|
|
+ <el-col :span="5">
|
|
|
+ <el-form-item
|
|
|
+ label="进场施工时间"
|
|
|
+ size="large"
|
|
|
+ >
|
|
|
+ <el-date-picker
|
|
|
+ v-model="condition.intoConstructionTime"
|
|
|
+ type="date"
|
|
|
+ placeholder="请选择进场施工时间"
|
|
|
+ format="YYYY-MM-DD"
|
|
|
+ value-format="YYYY-MM-DD"
|
|
|
+ clearable
|
|
|
+ @clear="condition.intoConstructionTime = ''"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="5" :offset="1">
|
|
|
+ <el-form-item
|
|
|
+ label="竣工时间"
|
|
|
+ size="large"
|
|
|
+ >
|
|
|
+ <el-date-picker
|
|
|
+ v-model="condition.completedTime"
|
|
|
+ type="date"
|
|
|
+ placeholder="请选择竣工时间"
|
|
|
+ format="YYYY-MM-DD"
|
|
|
+ value-format="YYYY-MM-DD"
|
|
|
+ clearable
|
|
|
+ @clear="condition.completedTime = ''"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ <el-row style="margin-top: 20px">
|
|
|
+ <el-col :offset="11">
|
|
|
+ <el-form :inline="true">
|
|
|
+ <el-form-item>
|
|
|
+ <el-button size="large">
|
|
|
+ 上一页
|
|
|
+ </el-button>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ size="large"
|
|
|
+ >下一页</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { reactive, ref } from 'vue'
|
|
|
+import { Document } from '@element-plus/icons-vue'
|
|
|
+import sign from '@/assets/sign.png'
|
|
|
+defineOptions({
|
|
|
+ name: 'ProjectTest'
|
|
|
+})
|
|
|
+// 数据
|
|
|
+const condition = reactive({
|
|
|
+ code: '', // 项目编号
|
|
|
+ name: '', // 项目名称
|
|
|
+ address: '', // 项目地址
|
|
|
+ firstPrincipal: '', // 甲方负责人
|
|
|
+ firstPhone: '', // 甲方电话
|
|
|
+ projectPrice: 0, // 合同金额
|
|
|
+ secondPrincipal: '', // 乙方负责人
|
|
|
+ signTime: '', // 合同签订日期
|
|
|
+ intoConstructionTime: '', // 进场施工时间
|
|
|
+ completedTime: '', // 竣工时间
|
|
|
+ supervisorUint: '', // 监理单位
|
|
|
+ supervisorName: '', // 监理姓名
|
|
|
+ supervisorPhone: '', // 监理电话
|
|
|
+ illustrate: '', // 说明
|
|
|
+ state: '' // 状态
|
|
|
+})
|
|
|
+
|
|
|
+const infoSteps = ref(1)
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="less">
|
|
|
+.basicInformation{
|
|
|
+ height: 40px;
|
|
|
+ background-color: #f8fafd;
|
|
|
+ display: flex;
|
|
|
+//align-items: center;
|
|
|
+}
|
|
|
+</style>
|
