BOM-search.vue 2.9 KB

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