mosr-web/src/views/project-management/implementation/account.vue

<template>
  <baseTitle title="基础信息"></baseTitle>
  <fvForm :schema="schema" @getInstance="(e)=>baseForm = e"></fvForm>
  <fvSearchForm :searchConfig="searchConfig" @search="search"></fvSearchForm>
  <fvTable ref="tableIns" :tableConfig="tableConfig" @headBtnClick="headBtnClick">
    <template #empty>
      <el-empty description="暂无数据"/>
    </template>
  </fvTable>
</template>

<script setup lang="jsx">
import fvSelect from '@/fvcomponents/fvSelect/index.vue'
import {toThousands} from '@/utils/changePrice.js'
import {computed, ref} from "vue";
import {getBaseInfoApi} from "@/components/steps/api";

const router = useRouter()
const route = useRoute()
const schema = computed(() => {
  return [
    {
      label: '征集名称',
      prop: 'requirementName',
      colProps: {
        span: 12
      }
    },
    {
      label: '项目名称',
      prop: 'projectName',
      colProps: {
        span: 12
      }
    }
  ]
})
const baseForm = ref()
const searchConfig = reactive([
  {
    label: '项目名称',
    prop: 'projectName',
    component: 'el-input',
    props: {
      placeholder: '请输入项目名称查询',
      clearable: true,
      filterable: true,
      checkStrictly: true
    }
  },
  {
    label: '时间',
    prop: 'time',
    component: 'el-date-picker',
    props: {
      placeholder: '请选择时间',
      clearable: true,
      valueFormat: 'YYYY-MM-DD HH:mm:ss',
    },
    colProps: {}
  }, {
    label: '项目费用',
    prop: 'requirementName',
    component: shallowRef(fvSelect),
    props: {
      placeholder: '请选择项目费用查询',
      clearable: true,
      filterable: true,
      cacheKey: 'project_cost',
    }
  }, {
    label: '项目阶段',
    prop: 'researchStage',
    component: shallowRef(fvSelect),
    props: {
      placeholder: '请选择项目阶段查询',
      clearable: true,
      filterable: true,
      checkStrictly: true,
      cacheKey: 'research_stage',
    }
  },
  {
    label: '税后余额',
    prop: 'afterTax',
    component: 'el-input',
    props: {
      placeholder: '请输入税后余额查询',
      clearable: true,
      filterable: true,
      checkStrictly: true
    }
  },
  {
    label: '摘要',
    prop: 'digest',
    component: 'el-input',
    props: {
      placeholder: '请输入摘要查询',
      clearable: true,
      filterable: true,
      checkStrictly: true
    }
  },
])
const tableConfig = reactive({
  columns: [
    {
      prop: 'name',
      type: 'index',
      label: '序号',
      width:'80',
      align: 'center'
    },
    {
      prop: 'time',
      label: '时间',
      align: 'center'
    },
    {
      prop: 'projectCost',
      label: '项目费用',
      align: 'center',
      currentRender: ({row, index}) => {
        if (row.projectCost !== null&&row.projectCost !== null&&row.projectCost!==undefined) {
          if(typeof Number(row.projectCost) === 'number'){
            return '--'
          }else {
            return (<Tag dictType={'project_cost'} value={row.projectCost}/>)
          }
        } else {
          return '--'
        }
      }
    },
    {
      prop: 'researchStage',
      label: '项目阶段',
      align: 'center',
      currentRender: ({row, index}) => {
        if (row.researchStage&&row.researchStage !== null&&row.researchStage!==undefined) {
          return (<Tag dictType={'research_stage'} value={row.researchStage}/>)
        } else {
          return '--'
        }
      }
    },
    {
      prop: 'digest',
      label: '摘要',
      align: 'center'
    },
    {
      prop: 'afterTax',
      label: '税后余额(元)',
      align: 'center',
      currentRender:({row})=>{
        return <span>{toThousands(row.afterTax)}</span>
      }
    }
  ],
  api: '/workflow/mosr/expense/ledger',
  params: {
    projectId:route.query.id
  },
  btns: [
    {name: '上传费用', key: 'add', color: '#DED0B2',auth: ''}
  ]
})
const tableIns=ref()
const getBaseInfo = async () => {
  try {
    const {code, data} = await getBaseInfoApi(route.query.id)
    baseForm.value.setValues(data)
  } catch {
  }
}

getBaseInfo()
const headBtnClick = (key) => {
  switch (key) {
    case 'add':
      handleUploadFee()
      break;
  }
}
const handleUploadFee = () => {
  router.push({
    name: 'Implementation/uploadFee',
    query: {
      id:route.query.id
    }
  })
}

const search = (val) => {
  console.log('val',val)
  tableConfig.params = {...val}
  tableIns.value.refresh()
}
</script>

<style scoped>

</style>