parameter.vue 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. <template>
  2. <HcTabsSimple :cur="tabsKey" :datas="tabsData" @tabClick="tabsClick">
  3. <template #tab-pricetype>
  4. <TabPriceType :cur="tabsKey" :type="1"/>
  5. </template>
  6. <template #tab-tasktype>
  7. <TabTaskType :cur="tabsKey" :type="2"/>
  8. </template>
  9. <template #tab-price>
  10. <TabPrice :cur="tabsKey" :type="3"/>
  11. </template>
  12. <template #tab-reimbursement>
  13. <TabReimbursement :cur="tabsKey" :type="4"/>
  14. </template>
  15. <template #tab-cost>
  16. <TabCost :cur="tabsKey" :type="5"/>
  17. </template>
  18. <template #tab-approve>
  19. <TabApprove :cur="tabsKey" :type="6"/>
  20. </template>
  21. <template #tab-other>
  22. <TabOther :cur="tabsKey" :type="11"/>
  23. </template>
  24. </HcTabsSimple>
  25. </template>
  26. <script setup>
  27. import {ref, watch, onMounted} from "vue";
  28. import TabPriceType from "./components/tab-pricetype.vue";
  29. import TabTaskType from "./components/tab-tasktype.vue";
  30. import TabPrice from "./components/tab-price.vue";
  31. import TabReimbursement from "./components/tab-reimbursement.vue";
  32. import TabCost from "./components/tab-cost.vue";
  33. import TabApprove from "./components/tab-approve.vue";
  34. import TabOther from './components/tab-other.vue'
  35. //类型处理
  36. const tabsKey = ref('pricetype')
  37. const tabsData = ref([
  38. {icon: 'bar-chart-box', label: '财务费用字典', key: 'pricetype'},
  39. {icon: 'tools', label: '任务类型字典', key: 'tasktype'},
  40. {icon: 'sun-cloudy', label: '岗位类型字典', key: 'price'},
  41. {icon: 'sun-cloudy', label: '报销类型字典', key: 'reimbursement'},
  42. {icon: 'sun-cloudy', label: '成本测算类型', key: 'cost'},
  43. {icon: 'sun-cloudy', label: '审批流程', key: 'approve'},
  44. {icon: 'sun-cloudy', label: '其他', key: 'other'},
  45. ])
  46. //渲染完成
  47. onMounted(() => {
  48. })
  49. const tabsClick = (key) => {
  50. tabsKey.value = key
  51. }
  52. </script>
  53. <style lang="scss" scoped>
  54. </style>
  55. <style lang="scss">
  56. </style>