123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114 |
- <template>
- <div id="search-1">
- <el-row>
- <el-col :span="24" class="main">
- <el-form :model="form" ref="form" label-width="130px">
- <el-col>
- <el-col :span="6">
- <el-form-item label="订单号" prop="no">
- <el-input v-model="form.no" placeholder="请输入订单号" size="small"></el-input>
- </el-form-item>
- </el-col>
- <el-col :span="6">
- <el-form-item label="商品名称" prop="goods">
- <el-input v-model="form.goods" placeholder="请输入商品名称" size="small"></el-input>
- </el-form-item>
- </el-col>
- <el-col :span="6">
- <el-form-item label="店铺名称" prop="type">
- <el-select
- v-model="form.shop"
- filterable
- remote
- reserve-keyword
- placeholder="请输入商铺名称"
- :remote-method="querySearch"
- :loading="loading"
- @change="handleSelect"
- >
- <el-option v-for="item in shopList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
- </el-select>
- </el-form-item>
- </el-col>
- </el-col>
- <el-col>
- <el-col :span="7">
- <el-form-item label="下单日期" prop="buy_time">
- <el-date-picker
- v-model="form.buy_time"
- type="daterange"
- range-separator="至"
- start-placeholder="开始日期"
- end-placeholder="结束日期"
- value-format="yyyy-MM-dd"
- >
- </el-date-picker>
- </el-form-item>
- </el-col>
- </el-col>
- <el-col :span="24" class="btn">
- <el-button type="primary" icon="el-icon-search" size="mini" @click="onSubmit('form')">搜索</el-button>
- <el-button icon="el-icon-refresh" size="mini" @click="toReset('form')">重置</el-button>
- </el-col>
- </el-form>
- </el-col>
- </el-row>
- </div>
- </template>
- <script>
- import { mapState, createNamespacedHelpers } from 'vuex';
- export default {
- name: 'search-1',
- props: { form: { type: Object }, shopList: { type: Array } },
- components: {},
- data: function () {
- return {
- loading: false,
- };
- },
- created() {},
- methods: {
- querySearch(value) {
- this.loading = true;
- this.$emit('querySearch', value);
- this.loading = false;
- },
- handleSelect(value) {
- this.$set(this.form, `shop`, value);
- },
- onSubmit() {
- this.$emit('onSubmit');
- },
- toReset(formName) {
- this.$refs[formName].resetFields();
- this.$emit('toReset');
- },
- },
- computed: {},
- metaInfo() {
- return { title: this.$route.meta.title };
- },
- watch: {
- test: {
- deep: true,
- immediate: true,
- handler(val) {},
- },
- },
- };
- </script>
- <style lang="less" scoped>
- .main {
- .btn {
- text-align: right;
- }
- /deep/.el-form-item {
- float: left;
- width: 100%;
- margin: 0 0 10px 0;
- }
- }
- </style>
|