123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485 |
- <template>
- <HcTabsSimple :cur="tabsKey" :datas="tabsData" @tabClick="tabsClick">
- <template #tab-base>
- <HcCard scrollbar actionUi="text-center">
- <div class="hc-card-form-center">
- <el-form ref="formBaseRef" :model="formBaseModel" :rules="formBaseRules" label-width="auto" size="large">
- <el-form-item label="项目名称:" prop="projectId">
- <el-select v-model="formBaseModel.projectId" block placeholder="项目名称">
- <el-option v-for="item in projectList" :label="item.name" :value="item.id"/>
- </el-select>
- </el-form-item>
- <el-form-item label="成本测算总金额:">
- <el-input v-model="formBaseModel.projectCostTotal" disabled/>
- </el-form-item>
- <el-form-item label="研发部成本总金额:">
- <el-input v-model="formBaseModel.devCostTotal" disabled/>
- </el-form-item>
- <el-form-item label="业务部成本总金额:">
- <el-input v-model="formBaseModel.businessCostTotal" disabled/>
- </el-form-item>
- <el-form-item label="市场部成本总金额:">
- <el-input v-model="formBaseModel.marketCostTotal" disabled/>
- </el-form-item>
- <el-form-item label="维护部成本总金额:">
- <el-input v-model="formBaseModel.maintainCostTotal" disabled/>
- </el-form-item>
- <el-form-item label="外包劳务成本总金额:">
- <el-input v-model="formBaseModel.outsourceCostTotal" disabled/>
- </el-form-item>
- <el-form-item label="管理费成本总金额:">
- <el-input v-model="formBaseModel.manageCostTotal" disabled/>
- </el-form-item>
- </el-form>
- </div>
- <template #action>
- <el-button size="large" type="info" hc-btn @click="goBackClick">
- <HcIcon name="arrow-go-back"/>
- <span>取消并返回</span>
- </el-button>
- <el-button size="large" type="primary" hc-btn @click="submitForm" :loading="submitLoaing">
- <HcIcon name="check-double"/>
- <span>提交保存</span>
- </el-button>
- </template>
- </HcCard>
- </template>
- <template #tab-table>
- <HcCard actionUi="text-center" :title="formBaseModel.projectName">
- <template #extra>
- <HcNewSwitch :datas="tabTab" :keys="tabKey" @change="tabChange" :round="false"/>
- </template>
-
- <HcTable :isIndex="false" :column="tableColumn" :datas="tableData">
- <template #deptId="{row,index}">
- <el-select v-model="row.deptId" block placeholder="请选择" :disabled="!row.isEdit">
- <el-option v-for="item in departMent" :label="item.deptName" :value="item.id"/>
- </el-select>
-
- </template>
- <template #costType="{row,index}">
- <el-select v-model="row.costType" block placeholder="请选择" :disabled="!row.isEdit">
- <el-option v-for="item in costTypeList" :label="item.dictName" :value="item.dictValue"/>
- </el-select>
- </template>
- <template #projectProcess="{row,index}">
- <el-select v-model="row.projectProcess" block placeholder="请选择" :disabled="!row.isEdit">
- <el-option v-for="item in processList" :label="item.name" :value="item.id"/>
- </el-select>
- </template>
- <template #budgetType="{row,index}">
- <el-select v-model="row.budgetType" :disabled="!row.isEdit">
- <el-option v-for="item in budgetTypeList" :label="item.dictName" :value="item.dictValue"/>
- </el-select>
- </template>
- <template #taskDetail="{row,index}">
- <el-select v-model="row.taskDetail" :getdata="budgetTypeChange(row?.budgetType,index)" :disabled="!row.isEdit">
- <el-option v-for="item in taskDetailList[index]" :label="item.dictName" :value="item.dictValue"/>
- </el-select>
- </template>
- <template #budgetDays="{row,index}">
- <el-input v-model="row.budgetDays" :disabled="!row.isEdit"/>
- </template>
- <template #postType="{row,index}">
- <el-select v-model="row.postType" :disabled="!row.isEdit">
- <el-option v-for="item in postTypeList" :label="item.dictName" :value="item.id"/>
- </el-select>
- </template>
-
- <template #staffCount="{row,index}">
- <el-input v-model="row.staffCount" :disabled="!row.isEdit"/>
- </template>
- <template #budgetStaffCost="{row,index}">
- <el-input v-model="row.budgetStaffCost" disabled/>
- </template>
- <template #budgetTravelExpense="{row,index}">
- <el-input v-model="row.budgetTravelExpense" :disabled="!row.isEdit"/>
- </template>
- <template #outsourceUnitPrice="{row,index}">
- <el-input v-model="row.outsourceUnitPrice" :disabled="!row.isEdit"/>
- </template>
- <template #outsourcePeopleCount="{row,index}">
- <el-input v-model="row.outsourcePeopleCount" :disabled="!row.isEdit"/>
- </template>
- <template #outsourceCountMoney="{row,index}">
- <el-input v-model="row.outsourceCountMoney" disabled />
- </template>
- <template #otherBudgetMoney="{row,index}">
- <el-input v-model="row.otherBudgetMoney" :disabled="!row.isEdit" onkeyup="this.value=this.value.match(/\d+\.?\d{0,2}/)"/>
- </template>
- <template #budgetCountMoney="{row,index}">
- <el-input v-model="row.budgetCountMoney" disabled/>
- </template>
- <template #budgetRemark="{row,index}">
- <el-input v-model="row.budgetRemark" :disabled="!row.isEdit"/>
- </template>
- <template #key15="{row,index}">
- <el-input v-model="row.key15"/>
- </template>
- <template #action="{row,index}">
- <el-button size="small" type="primary" @click="addRow">
- <HcIcon name="add"/>
- <span>新增</span>
- </el-button>
- <el-button size="small" type="success" v-if="row.isEdit" @click="saveRow(row)">保存</el-button>
- <el-button size="small" type="primary" v-else @click="row.isEdit = true" :disabled="row?.approve===1||row?.approve===2">编辑</el-button>
- <el-button size="small" type="danger" @click="delRow(index)" :disabled="row?.approve===1||row?.approve===2">
- <HcIcon name="delete-bin"/>
- <span>删除</span>
- </el-button>
- </template>
- </HcTable>
- <template #action>
- <el-button size="large" type="info" hc-btn @click="goBackClick">
- <HcIcon name="arrow-go-back"/>
- <span>取消并返回</span>
- </el-button>
- <el-button size="large" type="primary" hc-btn @click="submitForm" :loading="submitLoaing">
- <HcIcon name="check-double"/>
- <span>提交保存</span>
- </el-button>
- </template>
- </HcCard>
- </template>
- </HcTabsSimple>
- </template>
- <script setup>
- import {onActivated, ref,watch} from "vue";
- import {useRouter, useRoute} from 'vue-router'
- import costApi from '~api/project/cost.js';
- import {getArrValue,getObjValue,formValidate,objHasKey} from "js-fast-way"
- import { getdepartmentList} from "~api/other";
- //初始变量
- const router = useRouter()
- const useRoutes = useRoute()
- const dataId = ref(useRoutes?.query?.id ?? '')
- //缓存页面被激活时
- onActivated(() => {
- dataId.value = useRoutes?.query?.id ?? ''
- //清除数据
- tableData.value=[{}]
- constructUnitData.value=[]
- supervisorUnitData.value=[]
- bulidUnitData.value=[]
- tableData.value=[{}]
- tabsKey.value = 'base'
- tabKey.value='construction'
- getBudgetTypeList()
- if(dataId.value.length>0){
- getBudgetStatsById()
- getProjectList(2)
- }else{
- getProjectList(1)
- formBaseModel.value={}
- }
- getCostTypeDict()
-
- getPostDict()
- getdepartmentListData()
-
-
-
- })
- const projectList=ref([])
- //获取项目下拉框
- const getProjectList=async(type)=>{
- const {error, code, data} = await costApi.getProjectList({type})
- if (!error && code === 200) {
- projectList.value=getArrValue(data)
- } else {
- projectList.value={}
- }
- }
- //获取费用分类
- const costTypeList=ref([])
- const getCostTypeDict=async(type)=>{
- const {error, code, data} = await costApi.getCostTypeDict()
- if (!error && code === 200) {
- costTypeList.value=getArrValue(data)
- } else {
- costTypeList.value={}
- }
- }
- //获取项目环节
- const processList=ref([])
- const getProcessList=async(projectId)=>{
- const {error, code, data} = await costApi.getProcessList({projectId:projectId})
- if (!error && code === 200) {
- processList.value=getArrValue(data)
- } else {
- processList.value={}
- }
- }
- //获取预算分类getSecondSubject
- const budgetTypeList=ref([])
- const getBudgetTypeList=async()=>{
- const {error, code, data} = await costApi.getSecondSubject()
- if (!error && code === 200) {
- budgetTypeList.value=getArrValue(data)
-
- } else {
- budgetTypeList.value={}
- }
- }
- //任务明细
- const taskDetailList=ref({})
- const budgetTypeChange=async(val,index)=>{
- let id=''
- budgetTypeList.value.forEach((ele)=>{
- if(ele.dictValue===val){
- id=ele.id
- }
- })
- if(id.length>0){
- const {error, code, data} = await costApi.getChlidList({parentId:id,type:1})
- if (!error && code === 200) {
- taskDetailList.value[index]=getArrValue(data)
- } else {
- taskDetailList.value[index]={}
- }
- }
-
- }
- //获取岗位分类postTypeList
- const postTypeList=ref([])
- const getPostDict=async(type)=>{
- const {error, code, data} = await costApi.getPostDict()
- if (!error && code === 200) {
- postTypeList.value=getArrValue(data)
- } else {
- postTypeList.value=[]
- }
- }
- //费用分摊部门
- const departMent = ref([])
- const getdepartmentListData = async () => {
- const {error, code, data} = await getdepartmentList({deptType:2})
- //判断状态
- if (!error && code === 200) {
- departMent.value = getArrValue(data)
- } else {
- departMent.value = []
- }
- }
- //测算表格数据
- const constructUnitData=ref([])
- const bulidUnitData=ref([])
- const supervisorUnitData=ref([])
- //获取详情
- const getBudgetStatsById=async()=>{
- const {error, code, data} = await costApi.getBudgetStatsById({id: dataId.value})
- if (!error && code === 200) {
- formBaseModel.value=getObjValue(data)
- tableData.value= formBaseModel.value?.constructUnit||[{}]
- constructUnitData.value=formBaseModel.value?.constructUnit||[]
- bulidUnitData.value=formBaseModel.value?.buildUnit||[]
- supervisorUnitData.value=formBaseModel.value?.supervisorUnit||[]
- } else {
- formBaseModel.value={}
- }
- }
- //选项卡
- const tabsKey = ref('base')
- const tabsData = ref([
- {icon: 'file-list-3', label: '基础信息', key: 'base'},
- {icon: 'file-list-2', label: '成本测算', key: 'table'},
- ])
- const tabsClick = (key) => {
-
- if(!formBaseModel.value.projectId){
- window.$message.warning('请先在基础信息栏选择项目')
- }else{
- if(key==='table'){
- tabsKey.value = key
-
- getProcessList(formBaseModel.value.projectId)
- }
- }
-
- }
- //任务操作数据
- const formBaseRef = ref(null)
- const formBaseModel = ref({})
- const formBaseRules = {
- projectId: {
- required: true,
- trigger: 'blur',
- message: "请选择项目名称"
- },
- }
- //类型tab数据和相关处理
- const tabKey = ref('')
- const tableData = ref([])//成本测算表格
- //深度监听
- watch(() => [
- tabKey.value,
- tableData.value,
- ], ([val,table]) => {
- if(val==='construction'){
- constructUnitData.value=table
- formBaseModel.value.constructUnit=table
- }
- }, {deep: true})
- const tabTab = ref([
- {key: 'bulid', name: '施工单位成本'},
- {key: 'supervision', name: '监理单位成本'},
- {key: 'construction', name: '建设单位成本'}
- ]);
- const savetabdata=ref([])//当前数据
- const tabChange = ({key}) => {
- tabKey.value = key
- if(key=='supervision'){
- tableData.value=supervisorUnitData.value.length>0?supervisorUnitData.value:[{}]
- formBaseModel.value.supervisorUnit=tableData.value
- }else if(key=='construction'){
- tableData.value=constructUnitData.value.length>0?constructUnitData.value:[{}]
- formBaseModel.value.constructUnit=tableData.value
- console.log( formBaseModel.value.constructUnit,' formBaseModel.value.constructUnit');
- }else if(key=='bulid'){
- console.log(bulidUnitData.value,'=bulidUnitData.value');
-
- tableData.value=bulidUnitData.value.length>0?bulidUnitData.value:[{}]
- console.log( originTableData.value,' originTableData.value.value');
- formBaseModel.value.buildUnit=tableData.value
- }
-
- }
- //成本测算表格
- const tableColumn = [
- {key: 'deptId', name: '费用分摊部门', width: '160', align: 'center'},
- {key: 'costType', name: '费用分类', width: '160', align: 'center'},
- {key: 'projectProcess', name: '项目环节', width: '160', align: 'center'},
- {key: 'budgetType', name: '预算类型', width: '160', align: 'center'},
- {key: 'taskDetail', name: '任务明细', width: '160', align: 'center'},
- {key: 'budgetDays', name: '预计工作量(小数/整数/天)', width: '160', align: 'center'},
- {key: 'postType', name: '投入岗位类型(日单价)', width: '160', align: 'center'},
- {key: 'staffCount', name: '投入人员数量', width: '160', align: 'center'},
- {key: 'budgetStaffCost', name: '预计人工成本(元)', width: '160', align: 'center'},
- {key: 'budgetTravelExpense', name: '预计差旅费(元)', width: '160', align: 'center'},
- {key: 'outsourceUnitPrice', name: '外包单价', width: '160', align: 'center'},
- {key: 'outsourcePeopleCount', name: '外包数量', width: '160', align: 'center'},
- {key: 'outsourceCountMoney', name: '外包金额', width: '160', align: 'center'},
- {key: 'otherBudgetMoney', name: '其他预算金额', width: '160', align: 'center'},
- {key: 'budgetCountMoney', name: '总预算金额', width: '160', align: 'center'},
- {key: 'budgetRemark', name: '测算备注', width: '160', align: 'center'},
- {key: 'action', name: '操作', width: '300', align: 'center', fixed: 'right'},
- ]
- const originTableData=ref([{}])
- const addRow=()=>{
- tableData.value.push({
- isEdit:true
- })
- }
- const delRow=(index)=>{
- tableData.value.splice(index, 1)
- console.log( tableData.value,' tableData.value');
- if( tableData.value.length===0){
- tableData.value.push({})
- }
-
- }
- //保存单行
- const saveRow=async(row)=>{
- row.isEdit=false
- //统一测算金额
- const {error, code, data} = await costApi.saveCountMoney(row)
- if (!error && code === 200) {
- let obj=getObjValue(data)
- row.budgetCountMoney=obj.budgetCountMoney
- row.outsourceCountMoney=obj.outsourceCountMoney
- row.budgetStaffCost=obj.budgetStaffCost
- } else {
-
- }
-
- }
- //取消并返回
- const goBackClick = () => {
- router.back()
- }
- const isEmptyObj=(obj)=> {
- let arr = Object.keys(obj);
- return(arr.length == 0)
- }
- //保存submitForm
- const submitLoaing=ref(false)
- const submitForm=async()=>{
- console.log(formBaseModel.value.supervisorUnit,'formBaseModel.value.supervisorUnit');
- //取消空对象提交
- if(formBaseModel.value?.supervisorUnit?.length>0){
- let suisnullObj= isEmptyObj(formBaseModel.value?.supervisorUnit[0])
- if(suisnullObj===true){
- formBaseModel.value.supervisorUnit=null
- }
- }
- if(formBaseModel.value?.constructUnit?.length>0){
- let coisnullObj= isEmptyObj(formBaseModel.value?.constructUnit[0])
- if(coisnullObj){
- formBaseModel.value.constructUnit=null
- }
- }
- if(formBaseModel.value?.buildUnit?.length>0){
- let buisnullObj= isEmptyObj(formBaseModel.value?.buildUnit[0])
- if(buisnullObj){
- formBaseModel.value.buildUnit=null
- }
- }
- const res = await formValidate(formBaseRef.value)
- if(res){
- submitLoaing.value=true
- const {error, code, data,msg} = await costApi.AddOrUpdate( formBaseModel.value)
- submitLoaing.value=false
- if (!error && code === 200) {
- window.$message.success(msg)
-
- router.push({
- name: 'project-cost',
-
- })
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- .hc-card-form-center {
- position: relative;
- width: 80%;
- margin-left: 10%;
- margin-top: 10%;
- }
- </style>
|