11

src/router/order.js

@@ -14,6 +14,11 @@ export default [
     component: () => import('../views/order/in.vue'),
     meta: { title: '收入管理' },
   },
+  {
+    path: '/order/goods',
+    component: () => import('../views/order/goods.vue'),
+    meta: { title: '货物管理' },
+  },
   {
     path: '/order/transport',
     component: () => import('../views/order/transport/index.vue'),
@@ -24,4 +29,9 @@ export default [
     component: () => import('../views/order/transport/sign.vue'),
     meta: { title: '签收管理' },
   },
+  {
+    path: '/order/transport/detail',
+    component: () => import('../views/order/transport/detail.vue'),
+    meta: { title: '签收详情' },
+  },
 ];

src/views/order/goods.vue

@@ -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>

src/views/order/transport/detail.vue

@@ -0,0 +1,60 @@
+<template>
+  <div id="detail">
+    <el-row>
+      <el-col :span="24" class="container">
+        <el-col :span="24" class="top">
+          <el-button type="primary" size="mini" @click="$router.go(-1)">返回</el-button>
+        </el-col>
+        <!-- 从后台可能得到的是一个对象,可以拿到数据之后转换一下 -->
+        <el-col :span="24" class="info">
+          <data-table :fields="fields" :data="list" :usePage="false"> </data-table>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  name: 'detail',
+  props: {},
+  components: {},
+  data: function() {
+    return {
+      fields: [
+        { label: '订单号', model: 'ordernum' },
+        { label: '运输单号', model: 'transportnum' },
+        { label: '发货时间', model: 'time' },
+        { label: '花费', model: 'cost' },
+      ],
+      list: [
+        {
+          ordernum: '66464',
+          time: '2020-2-14',
+          transportnum: '11111',
+          cost: '400',
+        },
+      ],
+    };
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.container {
+  min-height: 300px;
+  .top {
+    text-align: left;
+    margin: 15px 0;
+  }
+}
+</style>

src/views/order/transport/sign.vue

@@ -1,10 +1,25 @@
 <template>
   <div id="sign">
     <el-row>
-      <el-col :span="24">
-        <p>sign</p>
+      <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" @query="search" @sign="sign" @detail="detail">
+            <template #options="{item}">
+              <template v-if="item.model == 'state'">
+                <el-option v-for="(item, index) in stateList" :key="index" :value="item.name" :label="item.name"></el-option>
+              </template>
+              <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>
+          </data-table>
+        </el-col>
       </el-col>
     </el-row>
+    <el-dialog :visible.sync="dialog" title="签收" @close="toClose" width="50%">
+      <!-- 物流里面的:data要换成v-model -->
+      <data-form v-model="form" :fields="formFields" :rules="rules" @save="turnSave"> </data-form>
+    </el-dialog>
   </div>
 </template>
 
@@ -18,10 +33,94 @@ export default {
   props: {},
   components: {},
   data: function() {
-    return {};
+    return {
+      fields: [
+        { label: '订单号', model: 'ordernum', filter: 'input' },
+        { label: '客户', model: 'name', filter: 'select' },
+        { label: '地点', model: 'palce' },
+        { label: '运输单号', model: 'transportnum' },
+        { label: '发货时间', model: 'time' },
+        { label: '运输内容', model: 'content' },
+        { label: '状态', model: 'state', filter: 'select' },
+      ],
+      list: [
+        {
+          ordernum: '66464',
+          name: '伟巴斯特（长春）车顶系统有限公司-北京天津线',
+          palce: '地点1',
+          time: '2020-2-14',
+          transportnum: '11111',
+          content: '一大堆好吃的',
+          state: '到达',
+          flag: '0',
+        },
+        {
+          ordernum: '66464',
+          name: '伟巴斯特（长春）车顶系统有限公司-北京天津线',
+          palce: '地点1',
+          time: '2020-2-14',
+          transportnum: '11111',
+          content: '快递',
+          state: '到达',
+          flag: '0',
+        },
+      ],
+      total: 0,
+      opera: [
+        { label: '详情', method: 'detail' },
+        {
+          label: '签收',
+          method: 'sign',
+          display: i => {
+            if (i.flag == '0') {
+              return true;
+            } else {
+              return false;
+            }
+          },
+        },
+      ],
+      //客戶列表
+      nameList: [{ name: '客户1' }, { name: '客户2' }, { name: '客户3' }, { name: '客户4' }, { name: '客户5' }],
+      //状态列表
+      stateList: [{ name: '运输中' }, { name: '到达' }],
+      dialog: false,
+      form: {},
+      formFields: [
+        { label: '签收人', model: 'signer' },
+        { label: '签收日期', model: 'receiptdate', type: 'date' },
+      ],
+      rules: {
+        signer: [{ required: true, message: '请输入签收人', trigger: 'blur' }],
+        receiptdate: [{ required: true, message: '请选择签收日期', trigger: 'blur' }],
+      },
+      backup: '',
+    };
   },
   created() {},
-  methods: {},
+  methods: {
+    async search() {
+      console.log('查询');
+    },
+    //关闭
+    toClose() {
+      this.dialog = false;
+    },
+    //保存
+    turnSave(data) {
+      console.log(data);
+      this.$set(this.backup, `flag`, '2');
+      this.dialog = false;
+    },
+    sign({ data }) {
+      this.backup = data;
+      this.dialog = true;
+    },
+    //详情
+    detail() {
+      this.$router.push({ path: '/order/transport/detail' });
+    },
+  },
   computed: {
     ...mapState(['user']),
   },