Commit dec0c328 authored by 严宝瑞's avatar 严宝瑞

Initial commit

parents
> 1%
last 2 versions
not dead
module.exports = {
root: true,
env: {
node: true
},
extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
parserOptions: {
ecmaVersion: 2020
},
rules: {
"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"
}
};
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
# query
## Project setup
```
npm install
```
### Compiles and hot-reloads for development
```
npm run serve
```
### Compiles and minifies for production
```
npm run build
```
### Lints and fixes files
```
npm run lint
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
This source diff could not be displayed because it is too large. You can view the blob instead.
{
"name": "query",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^0.21.0",
"vue": "^2.6.11"
},
"devDependencies": {
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/eslint-config-prettier": "^6.0.0",
"eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.1.3",
"eslint-plugin-vue": "^6.2.2",
"lint-staged": "^9.5.0",
"prettier": "^1.19.1",
"vue-template-compiler": "^2.6.11"
},
"gitHooks": {
"pre-commit": "lint-staged"
},
"lint-staged": {
"*.{js,jsx,vue}": [
"vue-cli-service lint",
"git add"
]
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<!-- <title><%= htmlWebpackPlugin.options.title %></title> -->
<title>Order inquiry</title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
<template>
<div id="app">
<Page />
</div>
</template>
<script>
import Page from "./components/Page.vue";
export default {
name: "App",
components: {
Page
}
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* text-align: center; */
color: #2c3e50;
/* margin-top: 60px; */
}
</style>
<template>
<div class="query-page">
<h3>Order inquiry</h3>
<el-input
clearable
style="width:500px;border-radius:0"
v-model="no"
placeholder="Please enter the PO NO.(Order NO.) for enquiry"
>
<el-button
slot="append"
icon="el-icon-search"
@click="query"
:loading="pageLoading"
></el-button>
</el-input>
<div class="resultTable" v-if="result.id">
<el-table class="table1" :data="[result]" border>
<el-table-column label="Odd No" prop="prefix_site_order_no" />
<el-table-column label="Main order No" prop="order_no" />
<el-table-column label="Customer" prop="customer_name" />
<el-table-column label="Email of Customer" prop="email" />
<el-table-column label="Date for Order" prop="order_created_at" />
<el-table-column label="Quantity" prop="required_num" />
<el-table-column
label="Order status"
prop="order_status.en_for_translator"
/>
<el-table-column
label="Payment status"
prop="payment_status.en_for_translator"
/>
<el-table-column
label="Shipment status"
prop="delivery_status.en_for_translator"
/>
</el-table>
<el-table class="table2" size="mini" :data="result.sub_orders" border>
<el-table-column label="Picture" width="80">
<template slot-scope="{ row }">
<el-image
v-if="row.product_child && row.product_child.image"
:src="row.product_child.image"
:preview-src-list="[row.product_child.image]"
/>
<span v-else>No Picture</span>
</template>
</el-table-column>
<el-table-column label="Sub Order No" prop="sub_order_no" />
<el-table-column
label="Order Status"
prop="sub_order_status.en_for_translator"
/>
<el-table-column
label="Shipment Status"
prop="sub_order_ship_status.en_for_translator"
/>
<el-table-column label="Shipping Date" prop="ship_time" />
<el-table-column label="Issued Quantity" prop="actual_num" />
<el-table-column label="Colour" prop="product_child.color.en_name" />
<el-table-column label="Size" prop="product_child.size.name" />
<el-table-column label="Urgent type">
<template slot-scope="{ row }">
<span v-if="row.is_urgent === 1">Urgent</span>
<span v-else>Ordinary</span>
</template>
</el-table-column>
<el-table-column
label="Logistics Company"
prop="logistics_info.logistic.name"
/>
<el-table-column
label="Logistics tracing No"
prop="logistics_info.logistics_no"
/>
</el-table>
</div>
<div v-else style="width:100%;margin:0 auto;text-align:center">
<img src="../assets/noData.png" style="margin:0 auto;" alt="" />
</div>
</div>
</template>
<script>
export default {
name: "Page",
props: {
msg: String
},
data() {
return {
no: "",
pageLoading: false,
result: {}
};
},
methods: {
query() {
if (!this.no) {
this.result = {};
return;
}
this.pageLoading = true;
this.$http({
method: "get",
url: `api/order/search/${this.no}`
})
.then(res => {
this.result = res.data.data;
this.pageLoading = false;
console.log(this.result);
})
.catch(err => {
this.pageLoading = false;
console.log(err);
});
}
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.resultTable {
padding: 20px 0;
}
.query-page {
padding: 10px;
}
.query-page .table1 ::v-deep .el-table__header th {
background-color: #d7d7d7;
}
.query-page .table2 ::v-deep .el-table__header th {
background-color: #f2f2f2;
}
.query-page ::v-deep .el-input__inner {
border-radius: 0;
}
.query-page ::v-deep .el-input-group__append,
.el-input-group__prepend {
border-radius: 0;
background-color: #d9001b;
color: white;
}
</style>
import Vue from "vue";
import App from "./App.vue";
import { Input, Button, Table, TableColumn, Image } from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import lang from "element-ui/lib/locale/lang/en";
import locale from "element-ui/lib/locale";
// 设置语言
locale.use(lang);
Vue.use(Input);
Vue.use(Button);
Vue.use(Table);
Vue.use(TableColumn);
Vue.use(Image);
import axios from "axios";
Vue.prototype.$http = axios;
Vue.config.productionTip = false;
new Vue({
render: function(h) {
return h(App);
}
}).$mount("#app");
"use strict";
module.exports = {
publicPath: process.env.VUE_APP_PUBLIC_PATH,
outputDir: "dist",
assetsDir: "static",
lintOnSave: process.env.NODE_ENV === "development",
productionSourceMap: false,
devServer: {
port: 8080,
open: true,
overlay: {
warnings: false,
errors: true
},
headers: {
"Access-Control-Allow-Origin": "*"
},
proxy: {
"/api": {
target: "http://api.oa.wy",
changeOrigin: true,
pathRewrite: {
"^/api": ""
}
}
}
}
};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment