user-search.vue 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  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: 5, md: 12 } : { span: 6 }">
  11. <el-form-item label="工序编码:">
  12. <el-input clearable v-model="where.code" placeholder="请输入" />
  13. </el-form-item>
  14. </el-col>
  15. <el-col v-bind="styleResponsive ? { lg: 5, md: 12 } : { span: 6 }">
  16. <el-form-item label="工序名称:">
  17. <el-input clearable v-model="where.name" placeholder="请输入" />
  18. </el-form-item>
  19. </el-col>
  20. <el-col v-bind="styleResponsive ? { lg: 5, md: 12 } : { span: 6 }">
  21. <el-form-item label="控制码:" prop="controlId">
  22. <el-select v-model="where.controlId" >
  23. <el-option
  24. v-for="item in controlList"
  25. :key="item.id"
  26. :label="item.name"
  27. :value="item.id"
  28. >
  29. </el-option>
  30. </el-select>
  31. </el-form-item>
  32. </el-col>
  33. <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
  34. <div class="ele-form-actions">
  35. <el-button
  36. type="primary"
  37. icon="el-icon-search"
  38. class="ele-btn-icon"
  39. @click="search"
  40. >
  41. 查询
  42. </el-button>
  43. <el-button @click="reset">重置</el-button>
  44. </div>
  45. </el-col>
  46. </el-row>
  47. </el-form>
  48. </template>
  49. import control from '@/api/technology/control';
  50. <script>
  51. import control from '@/api/technology/control';
  52. export default {
  53. data() {
  54. // 默认表单数据
  55. const defaultWhere = {
  56. code: '',
  57. name: '',
  58. controlId: null
  59. };
  60. return {
  61. // 表单数据
  62. where: { ...defaultWhere },
  63. controlList: [],
  64. };
  65. },
  66. computed: {
  67. // 是否开启响应式布局
  68. styleResponsive() {
  69. return this.$store.state.theme.styleResponsive;
  70. }
  71. },
  72. created() {
  73. this.getControlList()
  74. },
  75. methods: {
  76. /* 搜索 */
  77. search() {
  78. this.$emit('search', this.where);
  79. },
  80. /* 重置 */
  81. reset() {
  82. this.where = { ...this.defaultWhere };
  83. this.search();
  84. },
  85. getControlList(){
  86. const params = {
  87. pageNum: 1, size: -1
  88. }
  89. control.list().then(res=>{
  90. this.controlList = res.list
  91. })
  92. },
  93. }
  94. };
  95. </script>