|
|
@@ -1,237 +1,47 @@
|
|
|
<template>
|
|
|
- <HcCard>
|
|
|
- <template #header>
|
|
|
- <el-form ref="formRef" inline :model="formModel" :rules="formRules">
|
|
|
- <el-form-item label="关联项目" prop="key1">
|
|
|
- <el-select v-model="formModel.key1" block clearable placeholder="项目名称">
|
|
|
- <el-option v-for="item in projectName" :label="item.name" :value="item.key"/>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="预算制订人" prop="key2">
|
|
|
- <el-input v-model="formModel.key2" placeholder="预算制订人" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="预算总额" prop="key3">
|
|
|
- <el-input v-model="formModel.key3" placeholder="预算总额" disabled>
|
|
|
- <template #append>元</template>
|
|
|
- </el-input>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
+ <HcTabsSimple :cur="tabsKey" :datas="tabsData" @tabClick="tabsClick">
|
|
|
+ <template #tab-base>
|
|
|
+ <baseTabCard :datas="infoData" :disabled="dataType === 'view'" v-if="tabsKey === 'base'"/>
|
|
|
</template>
|
|
|
- <template #extra>
|
|
|
- <el-button type="primary" hc-btn @click="addTableData">
|
|
|
- <HcIcon name="add"/>
|
|
|
- <span>新增预算</span>
|
|
|
- </el-button>
|
|
|
+ <template #tab-file>
|
|
|
+ <fileTabCard :datas="infoData" :disabled="dataType === 'view'" v-if="tabsKey === 'file'"/>
|
|
|
</template>
|
|
|
- <HcTable :isIndex="false" :column="tableColumn" :datas="tableData">
|
|
|
- <template #key1="{row,index}">
|
|
|
- <el-select v-model="row.key1" placeholder="项目进程" v-if="row.isEditMode">
|
|
|
- <el-option v-for="item in projectProcess" :label="item.name" :value="item.key"/>
|
|
|
- </el-select>
|
|
|
- <div v-else>{{row.key1}}</div>
|
|
|
- </template>
|
|
|
- <template #key2="{row,index}">
|
|
|
- <el-select v-model="row.key2" placeholder="预算类型" v-if="row.isEditMode">
|
|
|
- <el-option v-for="item in budgetType" :label="item.name" :value="item.key"/>
|
|
|
- </el-select>
|
|
|
- <div v-else>{{row.key2}}</div>
|
|
|
- </template>
|
|
|
- <template #key3="{row,index}">
|
|
|
- <el-select v-model="row.key3" placeholder="任务明细" v-if="row.isEditMode">
|
|
|
- <el-option v-for="item in taskDetail" :label="item.name" :value="item.key"/>
|
|
|
- </el-select>
|
|
|
- <div v-else>{{row.key3}}</div>
|
|
|
- </template>
|
|
|
- <template #key4="{row,index}">
|
|
|
- <el-input v-model="row.key4" v-if="row.isEditMode"/>
|
|
|
- <div v-else>{{row.key4}}</div>
|
|
|
- </template>
|
|
|
- <template #key5="{row,index}">
|
|
|
- <el-input v-model="row.key5" v-if="row.isEditMode"/>
|
|
|
- <div v-else>{{row.key5}}</div>
|
|
|
- </template>
|
|
|
- <template #key6="{row,index}">
|
|
|
- <el-select v-model="row.key6" v-if="row.isEditMode">
|
|
|
- <el-option label="维护" value="1"/>
|
|
|
- <el-option label="业务" value="2"/>
|
|
|
- </el-select>
|
|
|
- <div v-else>{{row.key6}}</div>
|
|
|
- </template>
|
|
|
- <template #key7="{row,index}">
|
|
|
- <el-input v-model="row.key7" v-if="row.isEditMode" disabled/>
|
|
|
- <div v-else>{{row.key7}}</div>
|
|
|
- </template>
|
|
|
- <template #key8="{row,index}">
|
|
|
- <el-input v-model="row.key8" v-if="row.isEditMode"/>
|
|
|
- <div v-else>{{row.key8}}</div>
|
|
|
- </template>
|
|
|
- <template #key9="{row,index}">
|
|
|
- <el-input v-model="row.key9" v-if="row.isEditMode"/>
|
|
|
- <div v-else>{{row.key9}}</div>
|
|
|
- </template>
|
|
|
- <template #key10="{row,index}">
|
|
|
- <el-input v-model="row.key10" v-if="row.isEditMode"/>
|
|
|
- <div v-else>{{row.key10}}</div>
|
|
|
- </template>
|
|
|
- <template #key11="{row,index}">
|
|
|
- <el-input v-model="row.key11" v-if="row.isEditMode" disabled/>
|
|
|
- <div v-else>{{row.key11}}</div>
|
|
|
- </template>
|
|
|
- <template #key12="{row,index}">
|
|
|
- <el-input v-model="row.key12" v-if="row.isEditMode"/>
|
|
|
- <div v-else>{{row.key12}}</div>
|
|
|
- </template>
|
|
|
- <template #key13="{row,index}">
|
|
|
- <el-input v-model="row.key13" v-if="row.isEditMode" disabled/>
|
|
|
- <div v-else>{{row.key13}}</div>
|
|
|
- </template>
|
|
|
- <template #key14="{row,index}">
|
|
|
- <el-input v-model="row.key14" v-if="row.isEditMode"/>
|
|
|
- <div v-else>{{row.key14}}</div>
|
|
|
- </template>
|
|
|
- <template #action="{row,index}">
|
|
|
- <el-button size="small" type="primary" @click="row.isEditMode = false" v-if="row.isEditMode">
|
|
|
- <HcIcon name="check"/>
|
|
|
- <span>完成</span>
|
|
|
- </el-button>
|
|
|
- <el-button size="small" type="primary" @click="row.isEditMode = true" v-else>
|
|
|
- <HcIcon name="edit"/>
|
|
|
- <span>编辑</span>
|
|
|
- </el-button>
|
|
|
- <el-button size="small" type="danger" @click="delTableData(row,index)">
|
|
|
- <HcIcon name="delete-bin"/>
|
|
|
- <span>删除</span>
|
|
|
- </el-button>
|
|
|
- </template>
|
|
|
- </HcTable>
|
|
|
- </HcCard>
|
|
|
+ <template #tab-milestone>
|
|
|
+ <milestoneTab :datas="infoData" :disabled="dataType === 'view'" v-if="tabsKey === 'milestone'"/>
|
|
|
+ </template>
|
|
|
+ </HcTabsSimple>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
import {onActivated, ref} from "vue";
|
|
|
import {useRouter, useRoute} from 'vue-router'
|
|
|
-import {delMessage} from "~uti/tools";
|
|
|
+import baseTabCard from "./components/base.vue";
|
|
|
+import fileTabCard from "./components/file.vue";
|
|
|
+import milestoneTab from "./components/milestone.vue";
|
|
|
|
|
|
//初始变量
|
|
|
const router = useRouter()
|
|
|
const useRoutes = useRoute()
|
|
|
const dataId = ref(useRoutes?.query?.id ?? '')
|
|
|
+const dataType = ref(useRoutes?.query?.type ?? '')
|
|
|
|
|
|
//缓存页面被激活时
|
|
|
onActivated(() => {
|
|
|
dataId.value = useRoutes?.query?.id ?? ''
|
|
|
- console.log(useRoutes.query)
|
|
|
+ dataType.value = useRoutes?.query?.type ?? ''
|
|
|
})
|
|
|
|
|
|
-//项目名称
|
|
|
-const projectName = ref([
|
|
|
- {name: '陈油路', key: '陈油路'},
|
|
|
- {name: '奉建路', key: '奉建路'}
|
|
|
-])
|
|
|
-
|
|
|
-//项目进程
|
|
|
-const projectProcess = ref([
|
|
|
- {name: '商机-演示沟通', key: '1'},
|
|
|
- {name: '商机-成本核算及报价', key: '2'},
|
|
|
- {name: '合同-服务范围洽谈', key: '3'},
|
|
|
- {name: '产品-研发', key: '4'},
|
|
|
- {name: '产品-配置', key: '5'},
|
|
|
- {name: '产品-测试', key: '6'},
|
|
|
- {name: '产品-交付', key: '7'},
|
|
|
- {name: '实施-系统培训', key: '8'},
|
|
|
- {name: '实施-现场服务', key: '9'},
|
|
|
- {name: '实施-合同回款', key: '10'},
|
|
|
- {name: '项目验收', key: '11'},
|
|
|
-])
|
|
|
-
|
|
|
-//预算类型
|
|
|
-const budgetType = ref([
|
|
|
- {name: '合同签订阶段', key: '1'},
|
|
|
- {name: '项目注册阶段', key: '2'},
|
|
|
- {name: '项目准备阶段', key: '3'},
|
|
|
- {name: '项目研发阶段', key: '4'},
|
|
|
- {name: '项目配置阶段', key: '5'},
|
|
|
- {name: '项目测试阶段', key: '6'},
|
|
|
- {name: '项目培训阶段', key: '7'},
|
|
|
- {name: '项目编辑阶段', key: '8'},
|
|
|
- {name: '资料编辑阶段', key: '9'},
|
|
|
- {name: '过程服务阶段', key: '10'},
|
|
|
- {name: '交工阶段', key: '11'},
|
|
|
- {name: '资料收集阶段', key: '12'},
|
|
|
- {name: '竣工编辑阶段', key: '13'},
|
|
|
- {name: '档案验收阶段', key: '14'},
|
|
|
- {name: '档案移交阶段', key: '15'},
|
|
|
- {name: '耗材', key: '16'},
|
|
|
-])
|
|
|
-
|
|
|
-//任务明细
|
|
|
-const taskDetail = ref([
|
|
|
- {name: '审核图纸', key: '1'},
|
|
|
- {name: '风险评估', key: '2'},
|
|
|
- {name: '合同报价', key: '3'},
|
|
|
- {name: '合同洽谈及签订', key: '4'},
|
|
|
- {name: '项目注册', key: '5'},
|
|
|
- {name: '数据配置', key: '6'},
|
|
|
- {name: '项目WBS划分', key: '7'},
|
|
|
+//选项卡
|
|
|
+const tabsKey = ref('base')
|
|
|
+const tabsData = ref([
|
|
|
+ {icon: 'file-list-3', label: '合同基础信息', key: 'base'},
|
|
|
+ {icon: 'file-word', label: '合同附件', key: 'file'},
|
|
|
+ {icon: 'creative-commons-sa', label: '合同回款里程碑', key: 'milestone'},
|
|
|
])
|
|
|
-
|
|
|
-//顶部表单数据
|
|
|
-const formRef = ref(null)
|
|
|
-const formModel = ref({key1: '', key2: '', key3: ''})
|
|
|
-const formRules = {
|
|
|
- key1: {
|
|
|
- required: true,
|
|
|
- trigger: 'blur',
|
|
|
- message: "请选择关联项目"
|
|
|
- },
|
|
|
- key2: {
|
|
|
- required: true,
|
|
|
- trigger: 'blur',
|
|
|
- message: "请输入预算制订人"
|
|
|
- }
|
|
|
+const tabsClick = (key) => {
|
|
|
+ tabsKey.value = key
|
|
|
}
|
|
|
|
|
|
-//工资预算表格
|
|
|
-const tableColumn = [
|
|
|
- {key: 'key1', name: '项目环节', width: '200'},
|
|
|
- {key: 'key2', name: '预算类型', width: '200'},
|
|
|
- {key: 'key3', name: '任务明细', width: '200'},
|
|
|
- {key: 'key4', name: '预计工作日(小数/整数/天)', width: '160'},
|
|
|
- {key: 'key5', name: '投入人员数量', width: '140'},
|
|
|
- {key: 'key6', name: '人日单价', width: '140'},
|
|
|
- {key: 'key7', name: '预计人工成本', width: '160'},
|
|
|
- {key: 'key8', name: '预计差旅费(元)', width: '160'},
|
|
|
- {key: 'key9', name: '外包单价', width: '140'},
|
|
|
- {key: 'key10', name: '外包数量', width: '140'},
|
|
|
- {key: 'key11', name: '外包金额', width: '140'},
|
|
|
- {key: 'key12', name: '其他', width: '140'},
|
|
|
- {key: 'key13', name: '预算金额', width: '120'},
|
|
|
- {key: 'key14', name: '测算备注', width: '200'},
|
|
|
- {key: 'action', name: '操作', width: '160', align: 'center', fixed: 'right'},
|
|
|
-]
|
|
|
-const tableData = ref([
|
|
|
- {id: 1, key1: '', key2: '', key3: '', key4: '33', key5: '44', key6: '', key7: '22', isEditMode: false},
|
|
|
-])
|
|
|
-
|
|
|
-//新增工资预算表格
|
|
|
-const addTableData = () => {
|
|
|
- tableData.value.unshift({isEditMode: true})
|
|
|
-}
|
|
|
+const infoData = ref({})
|
|
|
|
|
|
-//删除工资预算表格
|
|
|
-const delTableData = (row,index) => {
|
|
|
- delMessage(() => {
|
|
|
- if (!row.id) {
|
|
|
- tableData.value.splice(index, 1)
|
|
|
- }
|
|
|
- })
|
|
|
-}
|
|
|
</script>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
-
|
|
|
-</style>
|
|
|
-
|
|
|
-<style lang="scss">
|
|
|
-
|
|
|
-</style>
|
