search-1.vue 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. <template>
  2. <div id="search-1">
  3. <el-row>
  4. <el-col :span="24" class="main">
  5. <el-form :model="form" ref="form" label-width="130px">
  6. <el-col>
  7. <el-col :span="6">
  8. <el-form-item label="订单号" prop="no">
  9. <el-input v-model="form.no" placeholder="请输入订单号" size="small"></el-input>
  10. </el-form-item>
  11. </el-col>
  12. <el-col :span="6">
  13. <el-form-item label="商品名称" prop="goods">
  14. <el-input v-model="form.goods" placeholder="请输入商品名称" size="small"></el-input>
  15. </el-form-item>
  16. </el-col>
  17. <el-col :span="6">
  18. <el-form-item label="店铺名称" prop="type">
  19. <el-select
  20. v-model="form.shop"
  21. filterable
  22. remote
  23. reserve-keyword
  24. placeholder="请输入商铺名称"
  25. :remote-method="querySearch"
  26. :loading="loading"
  27. @change="handleSelect"
  28. >
  29. <el-option v-for="item in shopList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
  30. </el-select>
  31. </el-form-item>
  32. </el-col>
  33. </el-col>
  34. <el-col>
  35. <el-col :span="7">
  36. <el-form-item label="下单日期" prop="buy_time">
  37. <el-date-picker
  38. v-model="form.buy_time"
  39. type="daterange"
  40. range-separator="至"
  41. start-placeholder="开始日期"
  42. end-placeholder="结束日期"
  43. value-format="yyyy-MM-dd"
  44. >
  45. </el-date-picker>
  46. </el-form-item>
  47. </el-col>
  48. </el-col>
  49. <el-col :span="24" class="btn">
  50. <el-button type="primary" icon="el-icon-search" size="mini" @click="onSubmit('form')">搜索</el-button>
  51. <el-button icon="el-icon-refresh" size="mini" @click="toReset('form')">重置</el-button>
  52. </el-col>
  53. </el-form>
  54. </el-col>
  55. </el-row>
  56. </div>
  57. </template>
  58. <script>
  59. import { mapState, createNamespacedHelpers } from 'vuex';
  60. export default {
  61. name: 'search-1',
  62. props: { form: { type: Object }, shopList: { type: Array } },
  63. components: {},
  64. data: function () {
  65. return {
  66. loading: false,
  67. };
  68. },
  69. created() {},
  70. methods: {
  71. querySearch(value) {
  72. this.loading = true;
  73. this.$emit('querySearch', value);
  74. this.loading = false;
  75. },
  76. handleSelect(value) {
  77. this.$set(this.form, `shop`, value);
  78. },
  79. onSubmit() {
  80. this.$emit('onSubmit');
  81. },
  82. toReset(formName) {
  83. this.$refs[formName].resetFields();
  84. this.$emit('toReset');
  85. },
  86. },
  87. computed: {},
  88. metaInfo() {
  89. return { title: this.$route.meta.title };
  90. },
  91. watch: {
  92. test: {
  93. deep: true,
  94. immediate: true,
  95. handler(val) {},
  96. },
  97. },
  98. };
  99. </script>
  100. <style lang="less" scoped>
  101. .main {
  102. .btn {
  103. text-align: right;
  104. }
  105. /deep/.el-form-item {
  106. float: left;
  107. width: 100%;
  108. margin: 0 0 10px 0;
  109. }
  110. }
  111. </style>