Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.

cardQueries.vue 5.0KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
  1. <script lang='ts' setup>
  2. import { reactive } from 'vue';
  3. const OBUList = reactive({
  4. cno: '',
  5. carNo: '',
  6. carColors: '',
  7. OBUno: '',
  8. })
  9. const options = [
  10. {
  11. value: 'Option1',
  12. label: 'Option1',
  13. },
  14. {
  15. value: 'Option2',
  16. label: 'Option2',
  17. },
  18. {
  19. value: 'Option3',
  20. label: 'Option3',
  21. },
  22. {
  23. value: 'Option4',
  24. label: 'Option4',
  25. },
  26. {
  27. value: 'Option5',
  28. label: 'Option5',
  29. },
  30. ]
  31. const tableData = [
  32. {
  33. creatTime: '2012-01-10 09:30:15',
  34. customerName: '周金波',
  35. carNo: '贵CEP186',
  36. carColor: '白色',
  37. carStyle: '一型客车',
  38. cardNo: '5202161708027065',
  39. cardType: '一般卡类型',
  40. productType: '一般卡产品类型',
  41. updateTime: '2012-01-10 09:30:15',
  42. modifyTime: '2012-01-10 09:30:15',
  43. cardStatus: '正常',
  44. },
  45. ]
  46. const handleClick = () => {
  47. console.log('click')
  48. }
  49. </script>
  50. <template>
  51. <div class="OBU-query content-warpper">
  52. <el-form :inline="true" :model="OBUList" class="demo-form-inline">
  53. <el-form-item label="客户编号">
  54. <el-input v-model="OBUList.cno" placeholder="客户编号" />
  55. </el-form-item>
  56. <el-form-item label="车牌号码">
  57. <el-input v-model="OBUList.carNo" placeholder="车牌号码" />
  58. </el-form-item>
  59. <el-form-item label="车牌颜色">
  60. <el-select v-model="OBUList.carColors" class="m-2" placeholder="Select">
  61. <el-option
  62. v-for="item in options"
  63. :key="item.value"
  64. :label="item.label"
  65. :value="item.value"
  66. />
  67. </el-select>
  68. </el-form-item>
  69. <el-form-item label="卡表面号">
  70. <el-input v-model="OBUList.OBUno" placeholder="卡表面号" />
  71. </el-form-item>
  72. <el-form-item><el-button type="primary">读卡</el-button></el-form-item>
  73. <el-form-item label="卡类型">
  74. <el-select v-model="OBUList.carColors" class="m-2" placeholder="请选择">
  75. <el-option
  76. v-for="item in options"
  77. :key="item.value"
  78. :label="item.label"
  79. :value="item.value"
  80. />
  81. </el-select>
  82. </el-form-item>
  83. <el-form-item label="状态">
  84. <el-select v-model="OBUList.carColors" class="m-2" placeholder="请选择">
  85. <el-option
  86. v-for="item in options"
  87. :key="item.value"
  88. :label="item.label"
  89. :value="item.value"
  90. />
  91. </el-select>
  92. </el-form-item>
  93. <el-form-item label="每条页数">
  94. <el-select v-model="OBUList.carColors" class="m-2" placeholder="Select">
  95. <el-option
  96. v-for="item in options"
  97. :key="item.value"
  98. :label="item.label"
  99. :value="item.value"
  100. />
  101. </el-select>
  102. </el-form-item>
  103. <el-form-item><el-button type="primary" icon="Search">查询</el-button></el-form-item>
  104. <el-form-item><el-button type="warning" plain icon="Refresh">重置</el-button></el-form-item>
  105. </el-form>
  106. <el-table :data="tableData" style="width: 100%">
  107. <el-table-column type="index" label="序号" width="64" fixed align="center" />
  108. <el-table-column fixed prop="creatTime" label="创建时间" width="100" align="center" />
  109. <el-table-column fixed prop="customerName" label="客户名称" width="100" align="center" />
  110. <el-table-column prop="carNo" label="车牌" width="100" align="center" />
  111. <el-table-column prop="carColor" label="车牌颜色" width="120" align="center" />
  112. <el-table-column prop="carStyle" label="客货类别" width="100" align="center" />
  113. <el-table-column prop="cardNo" label="卡表面号" width="160" align="center" />
  114. <el-table-column prop="cardType" label="卡类型" width="120" align="center" />
  115. <el-table-column prop="productType" label="产品类型" width="120" align="center" />
  116. <el-table-column prop="cardStatus" label="状态" width="100" align="center" />
  117. <el-table-column prop="updateTime" label="状态变更时间" width="100" align="center" />
  118. <el-table-column prop="modifyTime" label="更新时间" width="100" align="center" />
  119. <el-table-column fixed="right" label="操作" width="160" align="center" >
  120. <template #default>
  121. <el-button type="primary" size="small" @click="handleClick">详情</el-button>
  122. <el-button type="success" size="small">修改</el-button>
  123. </template>
  124. </el-table-column>
  125. </el-table>
  126. </div>
  127. </template>
  128. <style scoped>
  129. </style>