|
|
@@ -1,166 +0,0 @@
|
|
|
-<template>
|
|
|
- <div id="card-mode">
|
|
|
- <el-row type="flex" v-if="view == 'list'">
|
|
|
- <el-col :span="20">
|
|
|
- <el-input v-model="sform.order_no" placeholder="请填写要查询的订单号" style="width:170px;padding-right: 5px;"></el-input>
|
|
|
- <el-select v-model="sform.client" placeholder="请选择要查询客户的订单" style="width:200px;padding-right: 5px;"></el-select>
|
|
|
- <el-select v-model="sform.contact" placeholder="请选择要查询的合同" style="width:200px;padding-right: 5px;"></el-select>
|
|
|
- <el-select v-model="sform.project" placeholder="请选择要查询的项目" style="width:200px;padding-right: 5px;"></el-select>
|
|
|
- <el-select v-model="sform.way" placeholder="请选择要查询的运输方式" style="width:200px;padding-right: 5px;"></el-select>
|
|
|
- <el-date-picker
|
|
|
- v-model="sform.date"
|
|
|
- type="daterange"
|
|
|
- format="yyyy-MM-dd"
|
|
|
- value-format="yyyy-MM-dd"
|
|
|
- start-placeholder="开始日期"
|
|
|
- end-placeholder="结束日期"
|
|
|
- style="width:270px;padding-right: 5px;"
|
|
|
- ></el-date-picker>
|
|
|
- </el-col>
|
|
|
- <el-col :span="2">
|
|
|
- <el-button type="primary" @click="search">查询</el-button>
|
|
|
- </el-col>
|
|
|
- <el-col :span="2" style="text-align:right;padding-bottom:10px">
|
|
|
- <el-button type="primary" @click="toAdd">新建订单</el-button>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row :gutter="20" style="overflow-y:auto; height: 74vh;">
|
|
|
- <transition-group
|
|
|
- mode="out-in"
|
|
|
- enter-active-class="animate__animated animate__zoomIn animate__delay "
|
|
|
- leave-active-class="animate__animated animate__zoomOutDown"
|
|
|
- >
|
|
|
- <template v-if="view == 'list'">
|
|
|
- <el-col :span="span" v-for="(i, index) in list" :key="`col${index}`" style="padding-top:10px">
|
|
|
- <el-card body-style="height:250px; overflow-y:auto">
|
|
|
- <template #header>
|
|
|
- <el-row type="flex" justify="space-between" align="middle">
|
|
|
- <el-col :span="10"> 订单号:{{ i.order_no }} </el-col>
|
|
|
- <el-col :span="2">
|
|
|
- <el-link type="primary" :underline="false" @click="toEdit(i)">编辑</el-link>
|
|
|
- </el-col>
|
|
|
- <el-col :span="2">
|
|
|
- <el-link type="danger" :underline="false">删除</el-link>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </template>
|
|
|
- <el-row class="row">
|
|
|
- <el-col :span="24">客户:长春市福瑞科技有限公司</el-col>
|
|
|
- <el-col :span="24">发货时间:2020-11-11</el-col>
|
|
|
- <el-col :span="24">要求到达时间: 2020-11-15</el-col>
|
|
|
- <el-col :span="24">
|
|
|
- 货物:
|
|
|
- <el-col :span="24">玻璃 1t 5件 30m³</el-col>
|
|
|
- <el-col :span="24">铁桶 0.5t 1件 5m³</el-col>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </el-card>
|
|
|
- </el-col>
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <order-form v-model="form" key="detail" @toReturn="toReturn"></order-form>
|
|
|
- <el-row key="detailRow" type="flex" justify="space-around">
|
|
|
- <el-col :span="4">
|
|
|
- <el-button type="primary" @click="toSave">保存订单</el-button>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </template>
|
|
|
- </transition-group>
|
|
|
- </el-row>
|
|
|
- <page @query="search" :total="total" :limit="limit" :step="8"></page>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-const _ = require('lodash');
|
|
|
-import page from '@f/components/pagination.vue';
|
|
|
-import orderForm from './index-parts/form.vue';
|
|
|
-import { mapState, createNamespacedHelpers } from 'vuex';
|
|
|
-export default {
|
|
|
- name: 'card-mode',
|
|
|
- props: {},
|
|
|
- components: { orderForm, page },
|
|
|
- data: function() {
|
|
|
- return {
|
|
|
- form: {},
|
|
|
- list: [],
|
|
|
- total: 50,
|
|
|
- sform: {},
|
|
|
- view: 'list',
|
|
|
- limit: 8,
|
|
|
- step: 8,
|
|
|
- span: 6,
|
|
|
- };
|
|
|
- },
|
|
|
- created() {
|
|
|
- this.search();
|
|
|
- },
|
|
|
- methods: {
|
|
|
- async search({ skip = 0, limit = this.limit } = {}) {
|
|
|
- if (this.limit !== limit) this.$set(this, `limit`, limit);
|
|
|
- const l = skip;
|
|
|
- let arr = [];
|
|
|
- for (let i = 1; i <= limit; i++) {
|
|
|
- const obj = { order_no: `no${l + i}`, goods: [{ name: `g${l + i}`, number: l + i }] };
|
|
|
- arr.push(obj);
|
|
|
- }
|
|
|
- this.$set(this, `list`, arr);
|
|
|
- // let duplicate = _.cloneDeep(this.sform);
|
|
|
- // let { date, ...info } = duplicate;
|
|
|
- // if (date && _.isArray(date) && date.length == 2) {
|
|
|
- // info.start = date[0];
|
|
|
- // info.end = date[1];
|
|
|
- // }
|
|
|
- // const res = await this.query({ skip, limit, ...info });
|
|
|
- // if (this.$checkRes(res)) {
|
|
|
- // this.$set(this, `list`, res);
|
|
|
- // }
|
|
|
- },
|
|
|
- // 保存
|
|
|
- async toSave() {
|
|
|
- // let duplicate = _.cloneDeep(this.form);
|
|
|
- // const { id } = this.form;
|
|
|
- // let res;
|
|
|
- // if (id) {
|
|
|
- // res = await this.update(duplicate);
|
|
|
- // } else {
|
|
|
- // res = await this.create(duplicate);
|
|
|
- // }
|
|
|
- // if (this.$checkRes(res, '保存成功', '保存失败')) {
|
|
|
- // this.search();
|
|
|
- // }
|
|
|
- },
|
|
|
- // 编辑
|
|
|
- async toEdit(data) {
|
|
|
- this.$set(this, `form`, data);
|
|
|
- this.view = 'detail';
|
|
|
- },
|
|
|
- // 删除
|
|
|
- async toDelete({ data }) {
|
|
|
- console.log('in function:delete');
|
|
|
- // const res = await this.delete(data);
|
|
|
- // if (this.$checkRes(res, '删除成功')) {
|
|
|
- // this.search();
|
|
|
- // }
|
|
|
- },
|
|
|
- toAdd() {
|
|
|
- this.view = 'detail';
|
|
|
- },
|
|
|
- toReturn() {
|
|
|
- this.view = 'list';
|
|
|
- this.form = {};
|
|
|
- },
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...mapState(['user']),
|
|
|
- pageTitle() {
|
|
|
- return `${this.$route.meta.title}`;
|
|
|
- },
|
|
|
- },
|
|
|
- metaInfo() {
|
|
|
- return { title: this.$route.meta.title };
|
|
|
- },
|
|
|
-};
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="less" scoped></style>
|
