mould-search.vue 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
  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="编码:" label-width="50px">
  12. <el-input clearable v-model="where.code" placeholder="请输入" />
  13. </el-form-item>
  14. <el-form-item label="型号:" label-width="50px">
  15. <el-input clearable v-model="where.module" placeholder="请输入" />
  16. </el-form-item>
  17. </el-col>
  18. <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
  19. <el-form-item label="名称:" label-width="50px">
  20. <el-input clearable v-model="where.name" placeholder="请输入" />
  21. </el-form-item>
  22. <el-form-item label="所在部门:">
  23. <ele-tree-select
  24. clearable
  25. :data="treeData"
  26. v-model="where.ownershipGroupId"
  27. placeholder="请选择"
  28. default-expand-all
  29. labelKey="name"
  30. valueKey="id"
  31. />
  32. </el-form-item>
  33. </el-col>
  34. <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
  35. <el-form-item label="固定资产编码:" label-width="100px">
  36. <el-input clearable v-model="where.fixCode" placeholder="请输入" />
  37. </el-form-item>
  38. <div class="ele-form-actions">
  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. </div>
  56. </el-col>
  57. <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
  58. <el-form-item label="牌号:" label-width="50px">
  59. <el-input clearable v-model="where.brand" placeholder="请输入" />
  60. </el-form-item>
  61. </el-col>
  62. </el-row>
  63. </el-form>
  64. </template>
  65. <script>
  66. import { login } from '@/api/login';
  67. import { listOrganizations } from '@/api/system/organization';
  68. export default {
  69. props: {
  70. isConsumer: Boolean
  71. },
  72. data() {
  73. // 默认表单数据
  74. const defaultWhere = {
  75. name: '',
  76. code: '',
  77. fixCode: '',
  78. module: '',
  79. brand: '',
  80. ownershipGroupId: ''
  81. };
  82. return {
  83. // 表单数据
  84. where: { ...defaultWhere },
  85. treeData: []
  86. };
  87. },
  88. watch: {
  89. isConsumer() {
  90. this.where.isConsumer = this.isConsumer;
  91. this.search();
  92. }
  93. },
  94. computed: {
  95. // 是否开启响应式布局
  96. styleResponsive() {
  97. return this.$store.state.theme.styleResponsive;
  98. }
  99. },
  100. created() {
  101. this.query();
  102. },
  103. methods: {
  104. /* 搜索 */
  105. search() {
  106. const obj = {
  107. ...this.where,
  108. ownershipGroupId: this.where.ownershipGroupId || ''
  109. };
  110. this.$emit('search', obj);
  111. },
  112. /* 重置 */
  113. reset() {
  114. this.where = { ...this.defaultWhere, isConsumer: this.isConsumer };
  115. this.search();
  116. },
  117. query() {
  118. listOrganizations()
  119. .then((list) => {
  120. this.treeData = this.$util.toTreeData({
  121. data: list,
  122. idField: 'id',
  123. parentIdField: 'parentId'
  124. });
  125. })
  126. .catch((e) => {});
  127. }
  128. }
  129. };
  130. </script>