Você não pode selecionar mais de 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.

userQueryChange.vue 4.1KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  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. carId: '贵CEP186_0',
  34. customerNo: '52010116110441017',
  35. customerName: '周金碧',
  36. certificatesType: '身份证(含临时身份证)',
  37. identificationNo: '522125196110110029',
  38. phone: '15885137270',
  39. handler: '周金碧',
  40. handlerTime: '2018/03/17 21:15:13',
  41. department: '技术部',
  42. },
  43. ]
  44. const handleClick = () => {
  45. console.log('click')
  46. }
  47. </script>
  48. <template>
  49. <div class="OBU-query content-warpper">
  50. <el-form :inline="true" :model="OBUList" class="demo-form-inline">
  51. <el-form-item label="证件类型">
  52. <el-select v-model="OBUList.carColors" class="m-2" placeholder="请选择">
  53. <el-option
  54. v-for="item in options"
  55. :key="item.value"
  56. :label="item.label"
  57. :value="item.value"
  58. />
  59. </el-select>
  60. </el-form-item>
  61. <el-form-item label="证件号码">
  62. <el-input v-model="OBUList.OBUno" placeholder="证件号码" />
  63. </el-form-item>
  64. <el-form-item label="客户编号">
  65. <el-input v-model="OBUList.OBUno" placeholder="客户编号" />
  66. </el-form-item>
  67. <el-form-item label="客户名称">
  68. <el-input v-model="OBUList.OBUno" placeholder="客户名称" />
  69. </el-form-item>
  70. <el-form-item label="手机号码">
  71. <el-input v-model="OBUList.OBUno" placeholder="手机号码" />
  72. </el-form-item>
  73. <el-form-item label="指定经办人">
  74. <el-input v-model="OBUList.OBUno" placeholder="指定经办人" />
  75. </el-form-item>
  76. <el-form-item label="每条页数">
  77. <el-select v-model="OBUList.carColors" class="m-2" placeholder="请选择">
  78. <el-option
  79. v-for="item in options"
  80. :key="item.value"
  81. :label="item.label"
  82. :value="item.value"
  83. />
  84. </el-select>
  85. </el-form-item>
  86. <el-form-item><el-button type="primary" icon="Search">查询</el-button></el-form-item>
  87. <el-form-item><el-button type="warning" plain icon="Refresh">重置</el-button></el-form-item>
  88. </el-form>
  89. <el-table :data="tableData" style="width: 100%">
  90. <el-table-column type="index" label="序号" width="64" fixed align="center" />
  91. <el-table-column prop="customerNo" label="客户编号" width="180" align="center" />
  92. <el-table-column prop="customerName" label="客户名称" width="100" align="center" />
  93. <el-table-column prop="certificatesType" label="客户证件类型" width="180" align="center" />
  94. <el-table-column prop="identificationNo" label="客户证件号码" width="180" align="center" />
  95. <el-table-column prop="phone" label="手机号" width="100" align="center" />
  96. <el-table-column prop="handler" label="指定经办人" width="120" align="center" />
  97. <el-table-column prop="handlerTime" label="经办时间" width="100" align="center" />
  98. <el-table-column prop="department" label="部门" width="180" align="center" />
  99. <el-table-column fixed="right" label="操作" width="160" align="center" >
  100. <template #default>
  101. <el-button type="success" size="small" @click="handleClick">修改</el-button>
  102. <el-button type="primary" size="small">查看</el-button>
  103. </template>
  104. </el-table-column>
  105. </el-table>
  106. </div>
  107. </template>
  108. <style scoped>
  109. </style>