search.vue 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  1. <!-- 搜索表单 -->
  2. <template>
  3. <el-form
  4. label-width="90px"
  5. class="ele-form-search"
  6. @keyup.enter.native="search"
  7. @submit.native.prevent
  8. >
  9. <el-row :gutter="15">
  10. <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
  11. <el-form-item label="处置方式:">
  12. <DictSelection
  13. dictName="设备处置方式"
  14. v-model="where.type"
  15. ></DictSelection>
  16. </el-form-item>
  17. </el-col>
  18. <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
  19. <el-form-item label="编码:">
  20. <el-input
  21. clearable
  22. v-model="where.code"
  23. placeholder="请输入"
  24. />
  25. </el-form-item>
  26. </el-col>
  27. <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
  28. <el-form-item label="名称:">
  29. <el-input
  30. clearable
  31. v-model="where.name"
  32. placeholder="请输入"
  33. />
  34. </el-form-item>
  35. </el-col>
  36. <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
  37. <el-form-item label="固资编码:">
  38. <el-input
  39. clearable
  40. v-model="where.fixCode"
  41. placeholder="请输入"
  42. />
  43. </el-form-item>
  44. </el-col>
  45. <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
  46. <el-form-item label="物品名称:">
  47. <el-input
  48. clearable
  49. v-model="where.categoryName"
  50. placeholder="请输入"
  51. />
  52. </el-form-item>
  53. </el-col>
  54. <el-col
  55. style="display: flex; justify-content: flex-end"
  56. v-bind="styleResponsive ? { lg: 24, md: 24 } : { span: 24 }"
  57. >
  58. <el-form-item label-width="0px">
  59. <el-button
  60. type="primary"
  61. icon="el-icon-search"
  62. class="ele-btn-icon"
  63. @click="search"
  64. >
  65. 查询
  66. </el-button>
  67. <el-button @click="reset" icon="el-icon-refresh-left" type="primary"
  68. >重置</el-button
  69. >
  70. </el-form-item>
  71. </el-col>
  72. </el-row>
  73. </el-form>
  74. </template>
  75. <script>
  76. export default {
  77. props: [],
  78. data() {
  79. // 默认表单数据
  80. const defaultWhere = {
  81. code: '',
  82. name: '',
  83. fixCode:'',
  84. type:'',
  85. categoryName: '',
  86. deptIds: '',
  87. };
  88. return {
  89. // 表单数据
  90. where: { ...defaultWhere }
  91. };
  92. },
  93. computed: {
  94. // 是否开启响应式布局
  95. styleResponsive() {
  96. return this.$store.state.theme.styleResponsive;
  97. }
  98. },
  99. watch: {},
  100. created() {},
  101. methods: {
  102. /* 搜索 */
  103. search() {
  104. this.$emit('search', this.where);
  105. },
  106. /* 重置 */
  107. reset() {
  108. this.where = { ...this.defaultWhere };
  109. this.search();
  110. }
  111. }
  112. };
  113. </script>
  114. <style lang="scss" scoped>
  115. </style>