订单管理列表页面代码调整

src/api/management/goods.js

@@ -148,3 +148,10 @@ export function postCreatePackage(data) {
         data: data
     });
 }
+// 获取订单对应的商品列表
+export function getGoodsListByOrderId(id) {
+    return request({
+        url: `/api/order/${id}`,
+        method: 'get'
+    });
+}

src/views/orderauthor/order/detail.vue

@@ -1,89 +1,61 @@
 <template>
-  <el-dialog v-dialogDrag :title="this.$t('orderAuthor.orderDetails')" :visible.sync="show" width="500px" :before-do-close="doClose" :close-on-click-modal="false">
+  <el-dialog v-dialogDrag :title="this.$t('orderAuthor.orderDetails')" :visible.sync="show" width="1000px" :before-do-close="doClose" :close-on-click-modal="false">
-    <el-scrollbar wrap-class="scrollbar-wrapper" style="height: 400px">
+    <el-table
-      <data-form ref="dataform" :form="form" :form-model="formModel" class="data-box" />
+      ref="table2"
-    </el-scrollbar>
+      highlight-current-row
-    <div slot="footer" class="dialog-footer">
+      stripe
-      <el-button type="primary" @click="doClose">{{ $t('global.close') }}</el-button>
+      border
-    </div>
+      :data="orderList"
+      size="medium"
+    >
+      <el-table-column :key="goodsName" :label="this.$t('orderAuthor.commodityName')" prop="goodsName" />
+      <el-table-column :key="forever" :label="this.$t('orderAuthor.permanenceOrNot')" prop="forever">
+        <template slot-scope="scope">
+          {{ scope.row.forever?'是':'否' }}
+        </template>
+      </el-table-column>
+
+      <el-table-column :key="goodsName" label="商品个数" prop="goodsAmount" />
+      <el-table-column :key="goodsName" :label="this.$t('orderAuthor.itemPricing')" prop="price" />
+      <el-table-column :key="goodsName" :label="this.$t('orderAuthor.startDate')" prop="startTime" />
+      <el-table-column :key="goodsName" :label="this.$t('orderAuthor.purchaseMonths')" prop="monthAmount">
+        <template slot-scope="scope">
+          {{ scope.row.forever?'/':scope.row.monthAmount }}
+        </template>
+      </el-table-column>
+    </el-table>
   </el-dialog>
 </template>
 
 <script>
-
+import { getGoodsListByOrderId } from '@/api/management/goods';
 export default {
     name: 'RouteDetail',
     data() {
         return {
             show: false,
-            formModel: {
+            orderId:'',
-                organizationName: '',
+            orderList:[]
-                userName: '',
-                goodsName: '',
-                amount: '',
-                forever: '',
-                startTime: '',
-                monthAmount: '',
-                totalPrice: '',
-                payWays: '',
-                createTime: '',
-                orderType: '',
-                contractNo: '',
-                bizType: '',
-                payStatusZh: '',
-                sellerName: ''
-            }
         };
     },
-    computed: {
-        form() {
-            const form = {
-                labelWidth: '120px',
-                items: [
-                    { prop: 'organizationName', label: `${this.$t('orderAuthor.organizationOrEnterprise')}:`, type: 'text', disabled: true },
-                    { prop: 'userName', label: `${this.$t('orderAuthor.userName')}:`, type: 'text', disabled: true },
-                    { prop: 'goodsName', label: `${this.$t('orderAuthor.commodityName')}:`, type: 'text', disabled: true },
-                    { prop: 'amount', label: `${this.$t('orderAuthor.permissionNumber')}:`, type: 'text', disabled: true },
-                    { prop: 'forever', label: `${this.$t('orderAuthor.permanenceOrNot')}:`, type: 'radio', disabled: true, required: false, options: this.$ConstSelect.Whether },
-                    { prop: 'startTime', label: `${this.$t('orderAuthor.startDate')}:`, type: 'text', disabled: true },
-                    { prop: 'monthAmount', label: `${this.$t('orderAuthor.purchaseMonths')}:`, type: 'text', disabled: true },
-                    { prop: 'totalPrice', label: `${this.$t('orderAuthor.totalPrice')}:`, type: 'text', disabled: true },
-                    { prop: 'payWays', label: `${this.$t('orderAuthor.paymentMethod')}:`, type: 'text', disabled: true },
-                    { prop: 'createTime', label: `${this.$t('orderAuthor.creationDate')}:`, type: 'text', disabled: true },
-                    { prop: 'orderType', label: `${this.$t('orderAuthor.orderType')}:`, type: 'text', disabled: true },
-                    { prop: 'contractNo', label: `${this.$t('orderAuthor.contractNumber')}:`, type: 'text', disabled: true },
-                    { prop: 'bizType', label: `${this.$t('orderAuthor.businessType')}:`, type: 'text', disabled: true },
-                    { prop: 'payStatusZh', label: `${this.$t('orderAuthor.paymentStatus')}:`, type: 'text', disabled: true },
-                    { prop: 'sellerName', label: `${this.$t('orderAuthor.salesman')}:`, type: 'text', disabled: true }
-                ]
-
-            };
-            return form;
-        }
-    },
     methods: {
         doShow(data) {
+            this.orderId = data.id;
+            this.reloadTable();
             this.show = true;
-            this.formModel = {
-                organizationName: data.organizationName,
-                userName: data.userName,
-                goodsName: data.goodsName,
-                amount: data.amount,
-                forever: data.forever,
-                startTime: data.startTime,
-                monthAmount: data.monthAmount,
-                totalPrice: data.totalPrice,
-                payWays: data.payWays,
-                createTime: data.createTime,
-                orderType: data.orderType,
-                contractNo: data.contractNo,
-                bizType: data.bizType,
-                payStatusZh: data.payStatusZh,
-                sellerName: data.sellerName
-            };
         },
         doClose() {
             this.show = false;
+        },
+        reloadTable() {
+            if (this.orderId) {
+                this.initData();
+            }
+        },
+        initData() {
+            getGoodsListByOrderId(this.orderId).then(res=>{
+                this.orderList = res.data;
+            });
         }
     }
 };

src/views/orderauthor/order/list.vue

@@ -74,10 +74,6 @@ export default {
                         title: this.$t('orderAuthor.userMobile'),
                         prop: 'userMobile'
                     },
-                    {
-                        title: this.$t('orderAuthor.commodityName'),
-                        prop: 'goodsName'
-                    },
                     // {
                     // 	title: this.$t('orderAuthor.permissionType'),
                     // 	prop: 'permissionType',
@@ -85,10 +81,10 @@ export default {
                     // 	columnValue: (row) => { return this.$convertField(row.permissionType, this.PermissionTypeList, ['value', 'label']); },
                     // 	tagType: (row) => { return ''; }
                     // },
-                    {
+                    // {
-                        title: this.$t('orderAuthor.permissionNumber'),
+                    //     title: this.$t('orderAuthor.permissionNumber'),
-                        prop: 'amount'
+                    //     prop: 'amount'
-                    },
+                    // },
                     {
                         title: this.$t('orderAuthor.permanenceOrNot'),
                         prop: 'forever',
@@ -106,7 +102,12 @@ export default {
                     },
                     {
                         title: this.$t('orderAuthor.purchaseMonths'),
-                        prop: 'monthAmount'
+                        prop: 'monthAmount',
+                        type: 'tag',
+                        columnValue: (row) => {
+                            return row.forever ? '/' : row.monthAmount;
+                        },
+                        tagType: (row) => { return ''; }
                     },
                     // {
                     // 	title: this.$t('orderAuthor.totalPrice'),
@@ -246,10 +247,6 @@ export default {
             this.$router.push({ path: `${UrlConfig.orderauthor.orderDraft}/add/0` });
         },
         handleDetail(index, data) {
-            data.payWays = this.$convertField(data.payWays, this.PayTypeList, ['value', 'label']);
-            data.orderType = this.$convertField(data.orderType, this.OrderTypeList, ['value', 'label']);
-            data.bizType = this.$convertField(data.bizType, this.BizTypeList, ['value', 'label']);
-            data.payStatusZh = this.$convertField(data.payStatus, this.PayStatusList, ['value', 'label']);
             this.$refs.detail.doShow(data);
         },
         handleCanDistribute(index, data) {