turnovercar-search.vue 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
  1. <!-- 搜索表单 -->
  2. <template>
  3. <el-form
  4. label-width="75px"
  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. <el-form-item label="生命周期:">
  39. <DictSelection dictName="生命周期" clearable v-model="where.source">
  40. </DictSelection>
  41. </el-form-item>
  42. </el-col>
  43. <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
  44. <el-form-item label="材质:" label-width="50px">
  45. <el-input clearable v-model="where.texture" placeholder="请输入" />
  46. </el-form-item>
  47. <div class="ele-form-actions">
  48. <el-button
  49. type="primary"
  50. icon="el-icon-search"
  51. class="ele-btn-icon"
  52. @click="search"
  53. size="small"
  54. >
  55. 查询
  56. </el-button>
  57. <el-button @click="reset"
  58. icon="el-icon-refresh-left"
  59. size="small"
  60. type="primary"
  61. >重置</el-button>
  62. </div>
  63. </el-col>
  64. </el-row>
  65. </el-form>
  66. </template>
  67. <script>
  68. import { login } from '@/api/login';
  69. import {
  70. listOrganizations
  71. } from '@/api/system/organization';
  72. export default {
  73. data() {
  74. // 默认表单数据
  75. const defaultWhere = {
  76. name: '',
  77. code: '',
  78. fixCode:'',
  79. ownershipGroupId:''
  80. };
  81. return {
  82. // 表单数据
  83. where: { ...defaultWhere },
  84. treeData:[]
  85. };
  86. },
  87. computed: {
  88. // 是否开启响应式布局
  89. styleResponsive() {
  90. return this.$store.state.theme.styleResponsive;
  91. }
  92. },
  93. created(){
  94. this.query()
  95. },
  96. methods: {
  97. /* 搜索 */
  98. search() {
  99. console.log(this.where);
  100. this.$emit('search', this.where);
  101. },
  102. /* 重置 */
  103. reset() {
  104. this.where = { ...this.defaultWhere };
  105. this.search();
  106. },
  107. query() {
  108. listOrganizations()
  109. .then((list) => {
  110. this.treeData = this.$util.toTreeData({
  111. data: list,
  112. idField: 'id',
  113. parentIdField: 'parentId'
  114. });
  115. })
  116. .catch((e) => {
  117. });
  118. },
  119. }
  120. };
  121. </script>