user-search.vue 2.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  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="15">
  10. <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
  11. <el-form-item label="参数名称:">
  12. <el-input
  13. clearable
  14. v-model="where.inspectionName"
  15. placeholder="请输入"
  16. />
  17. </el-form-item>
  18. </el-col>
  19. <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
  20. <el-form-item label="参数编码:">
  21. <el-input
  22. clearable
  23. v-model="where.inspectionCode"
  24. placeholder="请输入"
  25. />
  26. </el-form-item>
  27. </el-col>
  28. <!-- <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
  29. <el-form-item label="组织机构:">
  30. <auth-selection
  31. data-type="Array"
  32. v-model="where.deptIds"
  33. style="width: 100%"
  34. ></auth-selection>
  35. </el-form-item>
  36. </el-col> -->
  37. <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
  38. <el-form-item label-width="50px">
  39. <el-button
  40. type="primary"
  41. icon="el-icon-search"
  42. class="ele-btn-icon"
  43. @click="search"
  44. size="small"
  45. >
  46. 查询
  47. </el-button>
  48. <el-button
  49. @click="reset"
  50. icon="el-icon-refresh-left"
  51. size="small"
  52. type="primary"
  53. >重置</el-button
  54. >
  55. </el-form-item>
  56. </el-col>
  57. </el-row>
  58. </el-form>
  59. </template>
  60. <script>
  61. export default {
  62. data() {
  63. // 默认表单数据
  64. const defaultWhere = {
  65. inspectionName: '',
  66. inspectionCode: '',
  67. status: 1
  68. };
  69. return {
  70. // 表单数据
  71. where: { ...defaultWhere }
  72. };
  73. },
  74. computed: {
  75. // 是否开启响应式布局
  76. styleResponsive() {
  77. return this.$store.state.theme.styleResponsive;
  78. }
  79. },
  80. methods: {
  81. /* 搜索 */
  82. search() {
  83. console.log(this.where);
  84. this.$emit('search', this.where);
  85. },
  86. /* 重置 */
  87. reset() {
  88. this.where = { ...this.defaultWhere };
  89. this.search();
  90. }
  91. }
  92. };
  93. </script>