carOwner.vue 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  1. <template>
  2. <div>
  3. <el-form inline>
  4. <el-form-item>
  5. <el-input>
  6. <template #append>
  7. <el-button>搜索</el-button>
  8. </template>
  9. </el-input>
  10. </el-form-item>
  11. <el-form-item>
  12. <el-button icon="Plus" @click="openCarOwner('新增车主','')">新增</el-button>
  13. </el-form-item>
  14. <el-form-item>
  15. <el-button icon="Edit">编辑</el-button>
  16. </el-form-item>
  17. <el-form-item>
  18. <el-button icon="Delete">删除</el-button>
  19. </el-form-item>
  20. <el-form-item>
  21. <el-button icon="Download">导入</el-button>
  22. </el-form-item>
  23. <el-form-item>
  24. <el-button icon="Download">导入模板</el-button>
  25. </el-form-item>
  26. <el-form-item>
  27. <el-button icon="Upload">导出</el-button>
  28. </el-form-item>
  29. <el-form-item>
  30. <el-button icon="Memo">操作记录</el-button>
  31. </el-form-item>
  32. <el-form-item>
  33. <el-button icon="ChatLineRound">其他</el-button>
  34. </el-form-item>
  35. </el-form>
  36. <el-table :data="carOwnerList">
  37. <el-table-column label="名字"></el-table-column>
  38. <el-table-column label="姓氏"></el-table-column>
  39. <el-table-column label="手机"></el-table-column>
  40. <el-table-column label="邮箱"></el-table-column>
  41. <el-table-column label="住址"></el-table-column>
  42. <el-table-column label="备注"></el-table-column>
  43. <el-table-column label="操作">
  44. <template #default="scope">
  45. <el-button @click="putCarOwner" icon="edit">编辑</el-button>
  46. <el-button @click="deleteCarOwner" icon="delete">删除</el-button>
  47. </template>
  48. </el-table-column>
  49. </el-table>
  50. <el-dialog v-model="carOwnerShow" :title="carOwnerTitle">
  51. <el-form label-width="100">
  52. <el-form-item label="名称:">
  53. <el-input/>
  54. </el-form-item>
  55. <el-form-item label="姓氏:">
  56. <el-input/>
  57. </el-form-item>
  58. <el-form-item label="手机:">
  59. <el-input/>
  60. </el-form-item>
  61. <el-form-item label="邮箱:">
  62. <el-input/>
  63. </el-form-item>
  64. <el-form-item label="vip:">
  65. <el-input/>
  66. </el-form-item>
  67. </el-form>
  68. </el-dialog>
  69. </div>
  70. </template>
  71. <script setup>
  72. import { obtainCarOwnerList } from '@/api/carOwner'
  73. import { onMounted, reactive, ref } from 'vue'
  74. const carOwnerList = reactive([])
  75. const carOwnerShow = ref(false)
  76. const carOwnerTitle = ref('')
  77. const getCarOwnerList = () => {
  78. obtainCarOwnerList().then(res => {
  79. if (res.code === 0) {
  80. console.log(res.data)
  81. carOwnerList.length = 0
  82. carOwnerList.push(...res.data.list)
  83. }
  84. })
  85. }
  86. const deleteCarOwner = () => {
  87. }
  88. const putCarOwner = () => {
  89. }
  90. const openCarOwner = (head,data) => {
  91. }
  92. const carOwnerOperation = () => {
  93. }
  94. onMounted(() => {
  95. getCarOwnerList()
  96. })
  97. </script>
  98. <style scoped lang="scss">
  99. </style>