丢单管理功能

src/common/api/operation/lossOrder.js

+import axios from '../axios'
+
+export function listTableData(data) {
+  return axios.post('/order/loseOrderInfo/list_page', data)
+}
+
+export function listShopPlateformData() {
+  return axios.get('/order/loseOrderInfo/getPlatform')
+}
+
+export function deleteData(data) {
+  return axios.post('/order/loseOrderInfo/deleteLoseOrderInfoByIds?ids=' + data)
+}

src/router/index.js

@@ -117,6 +117,12 @@ const routes = [
           title: '商品属性管理',
           title: '商品属性管理',
         },
         },
       },
       },
+      {
+        path: '/operation/lossOrder',
+        component: () => import('@/views/operation/lossOrder/index.vue'),
+        name: 'system_management',
+        meta: { title: '丢单管理' },
+      },
     ],
     ],
   },
   },
 ]
 ]

src/views/home/navMenu.vue

@@ -250,7 +250,7 @@ export default {
             {
             {
               id: 9,
               id: 9,
               path: '',
               path: '',
-              label: '属性类别管理',
+              label: '属性类管理',
               icon: 'el-icon-box',
               icon: 'el-icon-box',
               index: '/saas/sku-sort',
               index: '/saas/sku-sort',
               children: []
               children: []
@@ -258,7 +258,7 @@ export default {
             {
             {
               id: 10,
               id: 10,
               path: '',
               path: '',
-              label: '商品属性管理',
+              label: '商品值管理',
               icon: 'el-icon-box',
               icon: 'el-icon-box',
               index: '/saas/sku-manage',
               index: '/saas/sku-manage',
               children: []
               children: []
@@ -266,13 +266,22 @@ export default {
           ]
           ]
         },
         },
         {
         {
-          id: 9,
+          id: 6,
           path: '',
           path: '',
-          label: '运维工具',
-          icon: 'el-icon-bank-card',
-          index: '',
-          children: [],
-        }
+          label: '运维',
+          icon: 'el-icon-s-operation',
+          index: '/operation',
+          children: [
+            {
+              id: 6_1,
+              path: '',
+              label: '丢单管理',
+              icon: 'el-icon-s-order',
+              index: '/operation/lossOrder',
+              children: [],
+            },
+          ],
+        },
       ],
       ],
       dialogVisible: false,
       dialogVisible: false,
       oldPwd: '',
       oldPwd: '',

src/views/operation/lossOrder/index.vue

+<template>
+  <div class="saas-manage card">
+    <div class="search">
+      <el-form
+        :model="searchForm"
+        size="small"
+        :inline="true"
+      >
+      <el-form-item label="所属平台">
+          <el-select
+            style="width: 120px"
+            filterable
+            clearable
+            v-model="searchForm.salesPlatform"
+            placeholder="请选择所属平台"
+          >
+            <el-option
+              v-for="(value,
+              index) in plateformList"
+              :key="index"
+              :value="value"
+              :label="index"
+            ></el-option>
+          </el-select>
+      </el-form-item>
+      <el-form-item label="三方平台订单ID">
+        <el-input
+          style="width: 160px"
+          clearable
+          v-model="searchForm.orderThirdId"
+          placeholder="请输入三方平台订单ID"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="店铺单号">
+        <el-input
+          style="width: 140px"
+          clearable
+          v-model="searchForm.shopNumber"
+          placeholder="请输入店铺单号"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="创建时间">
+        <el-date-picker
+          style="width: 360px"
+          v-model="searchForm.createTimeText"
+          type="datetimerange"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+        >
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          type="primary"
+          size="small"
+          icon="el-icon-search"
+          @click="search"
+          >查询</el-button
+        >
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          type="danger"
+          size="small"
+          icon="el-icon-delete"
+          @click="deleteData()"
+          >删除</el-button
+        >
+      </el-form-item>
+      </el-form>
+    </div>
+    <div class="table-wrap" v-loading="loading">
+      <el-table
+        ref="table"
+        :data="manageData"
+        border
+        width="100%"
+        height="100%"
+        :highlight-current-row="true"
+        @selection-change="handleSelectionChange"
+        @row-click="rowClick"
+        header-row-class-name="header-row-class-name"
+      >
+        <el-table-column type="expand">
+          <template slot-scope="props">
+            <el-form label-position="right" inline class="demo-table-expand" style="display: none;">
+              <el-form-item label="所属平台">
+                <span>{{ props.row.salesPlatform }}</span>
+              </el-form-item>
+              <el-form-item label="三方平台订单ID">
+                <span>{{ props.row.orderThirdId }}</span>
+              </el-form-item>
+              <el-form-item label="店铺单号">
+                <span>{{ props.row.shopNumber }}</span>
+              </el-form-item>
+            </el-form>
+            <el-form label-position="right" label-width="100px" size="medium"  class="demo-table-expand">
+              <el-form-item label="失败原因：">
+                <span style="background-color: #f8f8f9;display: block;padding: 0 13px 0 13px;">{{ props.row.failReason }}</span>
+              </el-form-item>
+            </el-form>
+          </template>
+        </el-table-column>
+        <el-table-column
+          type="selection"
+          width="55"
+          header-align="center"
+          align="center"
+        >
+        </el-table-column>
+        <el-table-column
+          label="序号"
+          type="index"
+          width="50"
+          align="center"
+          header-align="center"
+        >
+        </el-table-column>
+        <el-table-column
+          label="所属平台"
+          prop="salesPlatform"
+          header-align="center"
+          align="center"
+          width="180"
+          :show-overflow-tooltip="true"
+        ></el-table-column>
+        <el-table-column
+          label="三方平台订单ID"
+          prop="orderThirdId"
+          width="200"
+          header-align="center"
+        >
+        </el-table-column>
+        <el-table-column
+          label="店铺单号"
+          prop="shopNumber"
+          header-align="center"
+          align="center"
+          width="200"
+          :show-overflow-tooltip="true"
+        ></el-table-column>
+        <el-table-column
+          label="失败原因"
+          prop="failReason"
+          header-align="center"
+          align="center"
+          min-width="160"
+          :show-overflow-tooltip="true"
+        ></el-table-column>
+        <el-table-column
+          label="创建时间"
+          prop="createTime"
+          header-align="center"
+          align="center"
+          width="160"
+          :show-overflow-tooltip="true"
+        ></el-table-column>
+        <el-table-column
+          label="操作"
+          header-align="center"
+          align="center"
+          width="55"
+          fixed="right"
+        >
+          <template slot-scope="scope">
+                <i
+                  style="cursor: pointer;color:#F56C6C"
+                  class="el-icon-delete"
+                  @click="deleteData(scope.row)"
+              ></i>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <div class="pagination">
+      <el-pagination
+        layout="sizes, total, prev, pager, next, jumper"
+        background
+        :total="total"
+        :page-size="pageSize"
+        :current-page="currentPage"
+        @size-change="sizeChange"
+        @current-change="onCurrentChange"
+      >
+      </el-pagination>
+    </div>
+
+  </div>
+</template>
+<script>
+import {
+  listTableData,
+  deleteData, // eslint-disable-line no-unused-vars
+  listShopPlateformData,
+} from '@/common/api/operation/lossOrder'
+export default {
+  name: 'lossOrderManage',
+  data() {
+    return {
+      manageData: [],
+      searchForm: {},
+      total: 0,
+      pageSize: 50,
+      currentPage: 1,
+      loading: false,
+      selection: [],
+      plateformList: [],
+    }
+  },
+  async created() {
+    this.getList()
+    this.getShopPlateform()
+  },
+  methods: {
+    async getList() {
+      this.loading = true
+      try {
+        const res = await listTableData(
+          {
+            ...this.searchForm,
+            createTimeStart: this.searchForm.createTimeText && this.searchForm.createTimeText[0],
+            createTimeEnd: this.searchForm.createTimeText && this.searchForm.createTimeText[1],
+            currentPage: this.currentPage,
+            pageSize: this.pageSize,
+          },
+
+        )
+        this.manageData = res.data.records
+        this.total = res.data.total
+      } catch (e) {
+        console.error(e)
+      } finally {
+        this.loading = false
+      }
+    },
+    async getShopPlateform() {
+      const res = await listShopPlateformData()
+      this.plateformList = res.data
+    },
+    search() {
+      this.getList()
+    },
+    async deleteData(row) {
+      let ids = []
+      let arr = [] // eslint-disable-line no-unused-vars
+      if (row) {
+        arr.push(row)
+      } else {
+        arr = this.selection
+      }
+      console.log(this.selection)
+      if (arr.length === 0) {
+          this.$message.error('请至少选择一条记录')
+          return
+      }
+      try {
+        await this.$confirm('确认删除？', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning',
+        })
+      } catch {
+        return
+      }
+      ids = this.selection.map((item) => item.id)
+      ids = ids.join()
+      const l = this.$loading({
+        background: 'rgba(0, 0, 0, 0.3)',
+      })
+      try {
+        await deleteData(ids)
+        this.selection = []
+        this.getList()
+      } catch (e) {
+        console.error(e)
+      } finally {
+        l.close()
+      }
+    },
+    handleSelectionChange(selection) {
+      this.selection = selection
+    },
+    onCurrentChange(currentPage) {
+      this.currentPage = currentPage
+      this.getList()
+    },
+    sizeChange(pageSize) {
+      this.pageSize = pageSize
+      this.getList()
+    },
+    rowClick(row) {
+      if (
+        this.selection.length === 1 &&
+        this.selection[0] === row
+      ) {
+        this.selection = []
+        this.$refs.table.clearSelection()
+      } else {
+        this.selection = [row]
+        this.$refs.table.clearSelection()
+        this.$refs.table.toggleRowSelection(row, true)
+      }
+    },
+  },
+}
+</script>
+<style lang="scss" scoped>
+.saas-manage {
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+
+  &::v-deep {
+    .el-table .el-table__cell {
+      padding: 6px 0;
+    }
+    .el-input__inner {
+      padding: 0 4px;
+    }
+    .el-input--small .el-input__inner {
+      height: 30px;
+      line-height: 30px;
+    }
+    .el-icon-time:before {
+      content: '';
+    }
+    .el-dialog__footer {
+      text-align: center;
+
+      .el-button--small {
+        padding: 9px 50px;
+      }
+    }
+    .el-dialog__body {
+      padding: 10px 20px;
+    }
+    .el-icon-edit:before {
+      color: #ff9800;
+      font-weight: bold;
+    }
+
+    .el-range-editor--small .el-range-separator {
+      line-height: 31px;
+    }
+
+    .header-row-class-name th {
+      background-color: #f8f8f9;
+    }
+
+    .el-input-group__append {
+      padding-left: 0;
+    }
+  }
+}
+
+.search {
+  background: #fff;
+}
+
+.table-wrap {
+  background: #fff;
+  flex: 1;
+  overflow: hidden;
+}
+
+.demo-table-expand {
+    font-size: 0;
+    //padding: 0 20px 0 20px;
+}
+
+.el-form-item__label{
+  width: 90px!important;
+  color: #99a9bf!important;
+}
+</style>