|
@@ -0,0 +1,231 @@
|
|
|
+<template>
|
|
|
+ <div id="goods">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24" class="container">
|
|
|
+ <el-col :span="24" class="info">
|
|
|
+ <data-table :fields="fields" :data="list" :opera="opera" :total="total" :size="50" :step="10" @split="split">
|
|
|
+ <template #options="{item}">
|
|
|
+ <template v-if="item.model == 'name'">
|
|
|
+ <el-option v-for="(item, index) in nameList" :key="index" :value="item.name" :label="item.name"></el-option>
|
|
|
+ </template>
|
|
|
+ <template v-if="item.model == 'route'">
|
|
|
+ <el-option v-for="(item, index) in routeList" :key="index" :value="item.name" :label="item.name"></el-option>
|
|
|
+ </template>
|
|
|
+ <template v-if="item.model == 'contract'">
|
|
|
+ <el-option v-for="(item, index) in contractList" :key="index" :value="item.name" :label="item.name"></el-option>
|
|
|
+ </template>
|
|
|
+ <template v-if="item.model == 'project'">
|
|
|
+ <el-option v-for="(item, index) in projectList" :key="index" :value="item.name" :label="item.name"></el-option>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ </data-table>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-dialog :visible.sync="dialog" title="货物编辑" @close="toClose" width="50%">
|
|
|
+ <!-- <el-form ref="form" :model="form" label-width="80px" class="goods">
|
|
|
+ <el-form-item label="活动名称">
|
|
|
+ <el-input v-model="form.name"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-col :span="24" class="title">原订单</el-col>
|
|
|
+ <el-col :span="4" class="title2">订单号</el-col>
|
|
|
+ <el-col :span="4" class="title2">拆分单号</el-col>
|
|
|
+ <el-col :span="4" class="title2">货物名称</el-col>
|
|
|
+ <el-col :span="4" class="title2">数量</el-col>
|
|
|
+ <el-col :span="4" class="title2">重量</el-col>
|
|
|
+ <el-col :span="4" class="title2">体积</el-col>
|
|
|
+ <el-col :span="4" class="con">123</el-col>
|
|
|
+ <el-col :span="4" class="con">1_2_3</el-col>
|
|
|
+ <el-col :span="4" class="con">器具</el-col>
|
|
|
+ <el-col :span="4" class="con">4</el-col>
|
|
|
+ <el-col :span="4" class="con">400</el-col>
|
|
|
+ <el-col :span="4" class="con">24</el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-form> -->
|
|
|
+ <el-table :data="tableData" style="width: 100%">
|
|
|
+ <el-table-column label="原订单">
|
|
|
+ <el-table-column prop="ordernum" label="订单号"></el-table-column>
|
|
|
+ <el-table-column prop="splitnum" label="拆分单号"></el-table-column>
|
|
|
+ <el-table-column prop="goods" label="货物"></el-table-column>
|
|
|
+ <el-table-column prop="number" label="数量"></el-table-column>
|
|
|
+ <el-table-column prop="weight" label="重量"></el-table-column>
|
|
|
+ <el-table-column prop="volume" label="体积"></el-table-column>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <el-col :span="24" class="splite">
|
|
|
+ <el-button type="primary" size="mini">拆分</el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-table :data="tableData" style="width: 100%">
|
|
|
+ <el-table-column label="拆分订单">
|
|
|
+ <el-table-column prop="splitnum" label="拆分单号"></el-table-column>
|
|
|
+ <el-table-column prop="goods" label="货物"></el-table-column>
|
|
|
+ <el-table-column prop="number" label="数量"
|
|
|
+ ><template slot-scope="scope">
|
|
|
+ <el-input-number
|
|
|
+ v-model="scope.row.number"
|
|
|
+ controls-position="right"
|
|
|
+ @change="handleChange"
|
|
|
+ :min="1"
|
|
|
+ :max="100"
|
|
|
+ size="mini"
|
|
|
+ style="width: 100px"
|
|
|
+ ></el-input-number> </template
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column prop="weight" label="重量">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-input-number
|
|
|
+ v-model="scope.row.weight"
|
|
|
+ controls-position="right"
|
|
|
+ @change="handleChange"
|
|
|
+ :min="1"
|
|
|
+ :max="100"
|
|
|
+ size="mini"
|
|
|
+ style="width: 100px"
|
|
|
+ ></el-input-number>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="volume" label="体积">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-input-number
|
|
|
+ v-model="scope.row.volume"
|
|
|
+ controls-position="right"
|
|
|
+ @change="handleChange"
|
|
|
+ :min="1"
|
|
|
+ :max="100"
|
|
|
+ size="mini"
|
|
|
+ style="width: 100px"
|
|
|
+ ></el-input-number>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button type="primary" @click="dialog = false">拆分订单</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { mapState, createNamespacedHelpers } from 'vuex';
|
|
|
+export default {
|
|
|
+ metaInfo() {
|
|
|
+ return { title: this.$route.meta.title };
|
|
|
+ },
|
|
|
+ name: 'goods',
|
|
|
+ props: {},
|
|
|
+ components: {},
|
|
|
+ data: function() {
|
|
|
+ return {
|
|
|
+ fields: [
|
|
|
+ { label: '订单号', model: 'ordernum' },
|
|
|
+ { label: '客户', model: 'name', filter: 'select' },
|
|
|
+ { label: '线路', model: 'route', filter: 'select' },
|
|
|
+ { label: '拆分单号', model: 'splitnum' },
|
|
|
+ { label: '货物', model: 'goods' },
|
|
|
+ { label: '数量', model: 'number' },
|
|
|
+ { label: '重量', model: 'weight' },
|
|
|
+ { label: '体积', model: 'volume' },
|
|
|
+ { label: '要求发货日期', model: 'time' },
|
|
|
+ { label: '合同', model: 'contract', notable: 'true', filter: 'select' },
|
|
|
+ { label: '项目', model: 'project', notable: 'true', filter: 'select' },
|
|
|
+ ],
|
|
|
+ list: [
|
|
|
+ {
|
|
|
+ ordernum: '111111',
|
|
|
+ name: '张三',
|
|
|
+ route: '减速电机卢新',
|
|
|
+ splitnum: '111_222',
|
|
|
+ goods: '好吃的',
|
|
|
+ number: '20',
|
|
|
+ weight: '20',
|
|
|
+ volume: '100',
|
|
|
+ time: '2020-9-19',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ ordernum: '111111',
|
|
|
+ name: '张三',
|
|
|
+ route: '减速电机卢新',
|
|
|
+ splitnum: '111_222',
|
|
|
+ goods: '好吃的',
|
|
|
+ number: '20',
|
|
|
+ weight: '20',
|
|
|
+ volume: '100',
|
|
|
+ time: '2020-9-19',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ total: 0,
|
|
|
+ opera: [{ label: '拆分', method: 'split' }],
|
|
|
+ //客户列表
|
|
|
+ nameList: [{ name: '客户一' }, { name: '客户二' }, { name: '客户三' }],
|
|
|
+ //路线列表
|
|
|
+ routeList: [
|
|
|
+ { name: '路线一' },
|
|
|
+ { name: '路线二' },
|
|
|
+ {
|
|
|
+ name: '路线三',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ form: {},
|
|
|
+ dialog: false,
|
|
|
+ tableData: [
|
|
|
+ {
|
|
|
+ ordernum: '111111',
|
|
|
+ splitnum: '111_222',
|
|
|
+ goods: '好吃的',
|
|
|
+ number: '20',
|
|
|
+ weight: '20',
|
|
|
+ volume: '8',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ //合同列表
|
|
|
+ contractList: [{ name: '合同一' }, { name: '合同二' }],
|
|
|
+ //项目列表
|
|
|
+ projectList: [{ name: '项目一' }, { name: '项目二' }],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {},
|
|
|
+ methods: {
|
|
|
+ //关闭
|
|
|
+ toClose() {
|
|
|
+ this.dialog = false;
|
|
|
+ },
|
|
|
+ //保存
|
|
|
+ turnSave(data) {
|
|
|
+ console.log(data);
|
|
|
+ },
|
|
|
+ //拆分货物
|
|
|
+ split() {
|
|
|
+ this.dialog = true;
|
|
|
+ },
|
|
|
+ handleChange(value) {
|
|
|
+ console.log(value);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState(['user']),
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.goods {
|
|
|
+ height: 300px;
|
|
|
+ text-align: center;
|
|
|
+ .title {
|
|
|
+ padding: 6px 0px;
|
|
|
+ background: #f5f7fa;
|
|
|
+ }
|
|
|
+}
|
|
|
+.splite {
|
|
|
+ text-align: right;
|
|
|
+ padding: 10px;
|
|
|
+}
|
|
|
+/deep/.el-table .cell {
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+/deep/.el-dialog__footer {
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+</style>
|