|
|
@@ -1,60 +1,226 @@
|
|
|
<template>
|
|
|
- <hc-dialog v-model="isShow" widths="40rem" :title="`${disabled?'查看项目':formModel.id?'编辑项目':'新增项目'}`" :footer="!disabled" is-footer-center @close="dialogClose">
|
|
|
- <el-form ref="formRef" :model="formModel" :rules="formRules" label-position="top" label-width="auto">
|
|
|
- <el-row :gutter="20">
|
|
|
- <el-col :span="24">
|
|
|
- <el-form-item label="项目名称:" prop="name">
|
|
|
- <el-input v-model="formModel.name" placeholder="请输入项目名称" clearable :disabled="disabled"/>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item label="运营时间:">
|
|
|
- <hc-date-picker :dates="formModel.time1" clearable :disabled="disabled"/>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item label="收费时间:">
|
|
|
- <hc-date-picker :dates="formModel.time2" clearable :disabled="disabled"/>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item label="初始成本:">
|
|
|
- <el-input v-model="formModel.key10" placeholder="请输入初始成本" clearable :disabled="disabled"/>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item label="人工成本:">
|
|
|
- <el-input v-model="formModel.key11" placeholder="请输入人工成本" clearable :disabled="disabled"/>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item label="管理成本:">
|
|
|
- <el-input v-model="formModel.key12" placeholder="请输入管理成本" clearable :disabled="disabled"/>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item label="养护成本:">
|
|
|
- <el-input v-model="formModel.key13" placeholder="请输入人工成本" clearable :disabled="disabled"/>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item label="大修成本:">
|
|
|
- <el-input v-model="formModel.key14" placeholder="请输入大修成本" clearable :disabled="disabled"/>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </el-form>
|
|
|
- <slot/>
|
|
|
- <template #footer>
|
|
|
- <el-button hc-btn @click="dialogClose">取消</el-button>
|
|
|
- <el-button hc-btn type="primary" :loading="submitLoading" @click="dialogSubmit" v-if="formModel.id">保存</el-button>
|
|
|
- <el-button hc-btn type="primary" :loading="submitLoading" @click="dialogSubmit" v-else>创建</el-button>
|
|
|
- </template>
|
|
|
- </hc-dialog>
|
|
|
+ <hc-drawer v-model="isShow" to-id="add-card-target" is-close>
|
|
|
+ <div class="relative h-95% overflow-y-auto bg-#F2F3F5 p-2">
|
|
|
+ <div>
|
|
|
+ <hc-icon class="text-18px text-black font-600" name="add-box" />
|
|
|
+ <span class="ml-2 text-18px text-black font-800">新增项目</span>
|
|
|
+ </div>
|
|
|
+ <div class="mt-4">
|
|
|
+ <hc-card-item class="hac-card-item">
|
|
|
+ <template #header>
|
|
|
+ <div class="hac-card-title g">基础信息</div>
|
|
|
+ </template>
|
|
|
+ <el-form ref="formRef" :inline="true" :model="baseForm" :rules="formRules" label-width="auto" label-position="left">
|
|
|
+ <div>
|
|
|
+ <div class="hc-form-item">
|
|
|
+ <el-form-item label="路线名称:" prop="key1">
|
|
|
+ <el-input v-model="baseForm.key1" clearable placeholder="请输入" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="项目类型:" prop="key2">
|
|
|
+ <el-input v-model="baseForm.key2" clearable placeholder="请输入" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="路线类型:" prop="key3">
|
|
|
+ <el-input v-model="baseForm.key3" clearable placeholder="请输入" />
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <div class="hc-form-item">
|
|
|
+ <el-form-item label="项目阶段:" prop="key4">
|
|
|
+ <el-input v-model="baseForm.key4" clearable placeholder="请输入" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="建设时期时间:" prop="key5">
|
|
|
+ <el-input v-model="baseForm.key5" clearable placeholder="请输入" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="运用期时间:" prop="key6">
|
|
|
+ <el-input v-model="baseForm.key6" clearable placeholder="请输入" />
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <div class="hc-form-item">
|
|
|
+ <el-form-item label="运营公司:" prop="key7">
|
|
|
+ <el-input v-model="baseForm.key7" clearable placeholder="请输入" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="实际运营里程(公里):" prop="key8">
|
|
|
+ <el-input v-model="baseForm.key8" clearable placeholder="请输入" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="车道数" prop="key9">
|
|
|
+ <el-input v-model="baseForm.key9" clearable placeholder="请输入" />
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ </hc-card-item>
|
|
|
+ </div>
|
|
|
+ <div class="mt-4">
|
|
|
+ <hc-card-item class="hac-card-item">
|
|
|
+ <template #header>
|
|
|
+ <div class="hac-card-title g">
|
|
|
+ <div class="w-[150px]">
|
|
|
+ <el-select v-model="baseForm.stage" filterable clearable block placeholder="建设期" @change="stageClick">
|
|
|
+ <el-option v-for="item in stageOptions" :key="item.value" :label="item.label" :value="item.value" />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <span class="ml-2">项目信息</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div class="flex p-1 text-sm font-bold">
|
|
|
+ <hc-icon name="arrow-down" class="mr-1 text-lightBlue" /><div>现金流入</div>
|
|
|
+ </div>
|
|
|
+ <div class="cash-in-list mt-2 flex justify-between">
|
|
|
+ <div class="cash-in-list-item text-sm">
|
|
|
+ <div class="flex font-bold">
|
|
|
+ <hc-icon name="coupon-2" class="mr-1 text-lightBlue" /><div>通行费</div>
|
|
|
+ </div>
|
|
|
+ <div class="jitems-center mt-1 w-full flex justify-between">
|
|
|
+ <span class="text-gray">年度收入</span>
|
|
|
+ <div class="ml-3 w-64">
|
|
|
+ <el-input v-model="stage.key1" clearable placeholder="请输入" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="cash-in-list-item text-sm">
|
|
|
+ <div class="flex items-center font-bold">
|
|
|
+ <img :src="totalPng" class="icon-avatar mr-1">
|
|
|
+ <div>其他收入</div>
|
|
|
+ </div>
|
|
|
+ <div class="mt-1 w-full flex items-center justify-between">
|
|
|
+ <span class="text-gray">年度收入</span>
|
|
|
+ <div class="ml-3 w-64">
|
|
|
+ <el-input v-model="stage.key1" clearable placeholder="请输入" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="mt-2 flex p-1 text-sm font-bold">
|
|
|
+ <hc-icon name="arrow-up" class="mr-1 text-orange" /><div>现金流出</div>
|
|
|
+ </div>
|
|
|
+ <div class="cash-in-list1 mt-2 flex justify-between">
|
|
|
+ <div class="cash-in-list-item text-sm">
|
|
|
+ <div class="flex items-center font-bold">
|
|
|
+ <img :src="jianshePng" class="icon-avatar mr-1">
|
|
|
+ <div>建设期总投资额</div>
|
|
|
+ </div>
|
|
|
+ <div class="jitems-center mt-1 w-full flex justify-between">
|
|
|
+ <span class="text-gray">总投资</span>
|
|
|
+ <div class="ml-3 w-64">
|
|
|
+ <el-input v-model="stage.key1" clearable placeholder="请输入" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="cash-in-list-item text-sm">
|
|
|
+ <div class="flex items-center font-bold">
|
|
|
+ <img :src="sizePng" class="icon-avatar mr-1">
|
|
|
+ <div>建设期各年份投入比例</div>
|
|
|
+ </div>
|
|
|
+ <div class="mt-1 w-full flex items-center justify-between">
|
|
|
+ <span class="text-gray">投入比例</span>
|
|
|
+ <div class="ml-3 w-64">
|
|
|
+ <el-input v-model="stage.key1" clearable placeholder="请输入" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="cash-in-list-item text-sm">
|
|
|
+ <div class="flex items-center font-bold">
|
|
|
+ <img :src="jiechangPng" class="icon-avatar mr-1"><div>借款本金偿还</div>
|
|
|
+ </div>
|
|
|
+ <div class="mt-1 w-full flex items-center justify-between">
|
|
|
+ <span class="text-gray">年度偿还</span>
|
|
|
+ <div class="ml-3 w-64">
|
|
|
+ <el-input v-model="stage.key1" clearable placeholder="请输入" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="cash-in-list1 mt-4 flex justify-between">
|
|
|
+ <div class="cash-in-list-item text-sm">
|
|
|
+ <div class="flex font-bold">
|
|
|
+ <hc-icon name="percent" class="mr-1 text-lightBlue" /><div>借款利息偿还</div>
|
|
|
+ </div>
|
|
|
+ <div class="jitems-center mt-1 w-full flex justify-between">
|
|
|
+ <span class="text-gray">年度偿还</span>
|
|
|
+ <div class="ml-3 w-64">
|
|
|
+ <el-input v-model="stage.key1" clearable placeholder="请输入" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="cash-in-list-item text-sm">
|
|
|
+ <div class="flex items-center font-bold">
|
|
|
+ <img :src="chengbenPng" class="icon-avatar mr-1">
|
|
|
+ <div>经营成本</div>
|
|
|
+ </div>
|
|
|
+ <div class="mt-1 w-full flex items-center justify-between">
|
|
|
+ <span class="text-gray">养护、小修费</span>
|
|
|
+ <div class="ml-3 w-64">
|
|
|
+ <el-input v-model="stage.key1" clearable placeholder="请输入" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="mt-1 w-full flex items-center justify-between">
|
|
|
+ <span class="text-gray">大修费</span>
|
|
|
+ <div class="ml-3 w-64">
|
|
|
+ <el-input v-model="stage.key1" clearable placeholder="请输入" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="mt-1 w-full flex items-center justify-between">
|
|
|
+ <span class="text-gray">资本性支出</span>
|
|
|
+ <div class="ml-3 w-64">
|
|
|
+ <el-input v-model="stage.key1" clearable placeholder="请输入" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="mt-1 w-full flex items-center justify-between">
|
|
|
+ <span class="text-gray">运营管理费</span>
|
|
|
+ <div class="ml-3 w-64">
|
|
|
+ <el-input v-model="stage.key1" clearable placeholder="请输入" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="mt-1 w-full flex items-center justify-between">
|
|
|
+ <span class="text-gray">其他费用</span>
|
|
|
+ <div class="ml-3 w-64">
|
|
|
+ <el-input v-model="stage.key1" clearable placeholder="请输入" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="cash-in-list-item text-sm">
|
|
|
+ <div class="flex items-center font-bold">
|
|
|
+ <img :src="shuijinPng" class="icon-avatar mr-1">
|
|
|
+ <div>运营期税金</div>
|
|
|
+ </div>
|
|
|
+ <div class="mt-1 w-full flex items-center justify-between">
|
|
|
+ <span class="text-gray">年度税金</span>
|
|
|
+ <div class="ml-3 w-64">
|
|
|
+ <el-input v-model="stage.key1" clearable placeholder="请输入" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="cash-in-list1 mt-2 flex justify-between">
|
|
|
+ <div class="cash-in-list-item text-sm">
|
|
|
+ <div class="flex font-bold">
|
|
|
+ <hc-icon name="bank-card" class="mr-1 text-purple" /><div>其他费用</div>
|
|
|
+ </div>
|
|
|
+ <div class="jitems-center mt-1 w-full flex justify-between">
|
|
|
+ <span class="text-gray">年度费用</span>
|
|
|
+ <div class="ml-3 w-64">
|
|
|
+ <el-input v-model="stage.key1" clearable placeholder="请输入" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </hc-card-item>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="mt-4 text-center">
|
|
|
+ <el-button type="info" style="background-color: white; color: black; border-color: white" @click="dialogSubmit">退出</el-button>
|
|
|
+ <el-button type="primary" style="background-color: #2550A2; color: white; border-color: #2550A2" @click="dialogClose">保存</el-button>
|
|
|
+ </div>
|
|
|
+ </hc-drawer>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
import { ref, watch } from 'vue'
|
|
|
+import jianshePng from '~src/assets/view/jianshe.png'
|
|
|
+import sizePng from '~src/assets/view/size.png'
|
|
|
+import jiechangPng from '~src/assets/view/jiechang.png'
|
|
|
+import chengbenPng from '~src/assets/view/chengben.png'
|
|
|
+import shuijinPng from '~src/assets/view/shuijin.png'
|
|
|
+import totalPng from '~src/assets/view/total.png'
|
|
|
|
|
|
const props = defineProps({
|
|
|
data: {
|
|
|
@@ -64,7 +230,7 @@ const props = defineProps({
|
|
|
disabled: {
|
|
|
type: Boolean,
|
|
|
default: false,
|
|
|
- }
|
|
|
+ },
|
|
|
})
|
|
|
|
|
|
//事件
|
|
|
@@ -76,25 +242,32 @@ const isShow = defineModel('modelValue', {
|
|
|
})
|
|
|
|
|
|
//监听
|
|
|
-const formModel = ref(props.data)
|
|
|
+const baseForm = ref(props.data)
|
|
|
watch(() => props.data, (data) => {
|
|
|
- formModel.value = data
|
|
|
+ baseForm.value = data
|
|
|
}, { immediate: true, deep: true })
|
|
|
|
|
|
//监听
|
|
|
watch(isShow, (val) => {
|
|
|
if (val) setDataApi()
|
|
|
})
|
|
|
-
|
|
|
+const stage = ref({
|
|
|
+
|
|
|
+})
|
|
|
//设置数据
|
|
|
const setDataApi = () => {
|
|
|
|
|
|
}
|
|
|
-
|
|
|
+const stageOptions = ref([
|
|
|
+
|
|
|
+])
|
|
|
+const stageClick = (val) => {
|
|
|
+ console.log(val)
|
|
|
+}
|
|
|
//新增、编辑 显示
|
|
|
const formRef = ref(null)
|
|
|
const formRules = {
|
|
|
- name: {required: true, trigger: 'blur', message: '请输入菜单名称'},
|
|
|
+ name: { required: true, trigger: 'blur', message: '请输入菜单名称' },
|
|
|
}
|
|
|
|
|
|
//新增、编辑提交
|
|
|
@@ -107,7 +280,62 @@ const dialogSubmit = () => {
|
|
|
//新增、编辑关闭
|
|
|
const dialogClose = () => {
|
|
|
isShow.value = false
|
|
|
- formModel.value = {}
|
|
|
+ baseForm.value = {}
|
|
|
emit('close')
|
|
|
}
|
|
|
</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+.hac-card-item.hc-card-item-box {
|
|
|
+ background: white;
|
|
|
+ .hc-card-item-header {
|
|
|
+ .item-header, .item-extra {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ .item-extra {
|
|
|
+ margin-left: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.hac-card-title {
|
|
|
+ color: #000;
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: 100%;
|
|
|
+ margin-left: 8px;
|
|
|
+ &::before {
|
|
|
+ content: '';
|
|
|
+ position: relative;
|
|
|
+ display: inline-block;
|
|
|
+ width: 5px;
|
|
|
+ height: 18px;
|
|
|
+ border-radius: 10px;
|
|
|
+ background-color: var(--el-color-primary-dark-2);
|
|
|
+ right: 8px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.cash-in-list{
|
|
|
+ width: 100%;
|
|
|
+ .cash-in-list-item{
|
|
|
+ padding: 10px;
|
|
|
+ width: 48%;
|
|
|
+ border: 1px solid #E6E6E6;
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+.cash-in-list1{
|
|
|
+ width: 100%;
|
|
|
+ .cash-in-list-item{
|
|
|
+ padding: 10px;
|
|
|
+ width: 32%;
|
|
|
+ border: 1px solid #E6E6E6;
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+.icon-avatar{
|
|
|
+ width: 14px;
|
|
|
+ height: 14px;
|
|
|
+}
|
|
|
+</style>
|