失败类型-8.22

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-form :model="searchForm" size="small" :inline="true">
+        <el-form-item label="所属平台">
           <el-select
             style="width: 120px"
             filterable
             clearable
             v-model="searchForm.salesPlatform"
-            placeholder="请选择所属平台"
-          >
+            placeholder="请选择所属平台">
             <el-option
-              v-for="(value,
-              index) in plateformList"
+              v-for="(value, index) in plateformList"
               :key="index"
               :value="value"
-              :label="index"
-            ></el-option>
+              :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-item>
-        <el-button
-          type="primary"
-          size="small"
-          icon="el-icon-download"
-          @click="downloadData()"
-          >重新下载</el-button
-        >
-      </el-form-item>
-      <el-form-item>
-        <el-button
-          type="default"
-          size="small"
-          icon="el-icon-refresh"
-          @click="transformData()"
-          >重新转化</el-button
-        >
-      </el-form-item>
+        </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 label="失败类型">
+          <el-select
+            v-model="searchForm.failType"
+            style="width: 120px"
+            filterable
+            clearable
+            value-key=""
+            placeholder="请选择失败类型">
+            <el-option
+              v-for="(type, index) in failTypes"
+              :key="index"
+              :label="type.value"
+              :value="type.id"></el-option>
+          </el-select>
+        </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-item>
+          <el-button
+            type="primary"
+            size="small"
+            icon="el-icon-download"
+            @click="downloadData()">
+            重新下载
+          </el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button
+            type="default"
+            size="small"
+            icon="el-icon-refresh"
+            @click="transformData()">
+            重新转化
+          </el-button>
+        </el-form-item>
       </el-form>
     </div>
     <div class="table-wrap" v-loading="loading">
@@ -99,11 +103,14 @@
         :highlight-current-row="true"
         @selection-change="handleSelectionChange"
         @row-click="rowClick"
-        header-row-class-name="header-row-class-name"
-      >
+        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
+              label-position="right"
+              inline
+              class="demo-table-expand"
+              style="display: none">
               <el-form-item label="所属平台">
                 <span>{{ props.row.salesPlatform }}</span>
               </el-form-item>
@@ -114,9 +121,20 @@
                 <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
+              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>
+                <span
+                  style="
+                    background-color: #f8f8f9;
+                    display: block;
+                    padding: 0 13px 0 13px;
+                  ">
+                  {{ props.row.failReason }}
+                </span>
               </el-form-item>
             </el-form>
           </template>
@@ -125,59 +143,56 @@
           type="selection"
           width="55"
           header-align="center"
-          align="center"
-        >
-        </el-table-column>
+          align="center"></el-table-column>
         <el-table-column
           label="序号"
           type="index"
           width="50"
           align="center"
-          header-align="center"
-        >
-        </el-table-column>
+          header-align="center"></el-table-column>
         <el-table-column
           label="namespace"
           prop="namespace"
           header-align="center"
           align="center"
           width="180"
-          :show-overflow-tooltip="true"
-        ></el-table-column>
+          :show-overflow-tooltip="true"></el-table-column>
         <el-table-column
           label="所属平台"
           prop="salesPlatform"
           header-align="center"
           align="center"
           width="180"
-          :show-overflow-tooltip="true"
-        ></el-table-column>
+          :show-overflow-tooltip="true"></el-table-column>
+          <el-table-column
+          label="店铺简称"
+          prop="shopShortName"
+          header-align="center"
+          align="center"
+          width="200"
+          :show-overflow-tooltip="true"></el-table-column>
         <el-table-column
           label="三方平台订单ID"
           prop="orderThirdId"
           width="200"
-          header-align="center"
-        >
-        </el-table-column>
+          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>
+          :show-overflow-tooltip="true"></el-table-column>
         <el-table-column
           label="失败类型"
           prop="failType"
           header-align="center"
           align="center"
           min-width="50"
-          :show-overflow-tooltip="true"
-        >
-        <template #default="{row}">
-          {{['下载失败','转化失败'][row.failType-1]}}
-        </template>
+          :show-overflow-tooltip="true">
+          <template #default="{ row }">
+            {{ ['下载失败', '转化失败'][row.failType - 1] }}
+          </template>
         </el-table-column>
         <el-table-column
           label="失败原因"
@@ -185,29 +200,25 @@
           header-align="center"
           align="center"
           min-width="160"
-          :show-overflow-tooltip="true"
-        ></el-table-column>
+          :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>
+          :show-overflow-tooltip="true"></el-table-column>
         <el-table-column
           label="操作"
           header-align="center"
           align="center"
           width="55"
-          fixed="right"
-        >
+          fixed="right">
           <template slot-scope="scope">
-                <i
-                  style="cursor: pointer;color:#F56C6C"
-                  class="el-icon-delete"
-                  @click="deleteData(scope.row)"
-              ></i>
+            <i
+              style="cursor: pointer; color: #f56c6c"
+              class="el-icon-delete"
+              @click="deleteData(scope.row)"></i>
           </template>
         </el-table-column>
       </el-table>
@@ -220,11 +231,8 @@
         :page-size="pageSize"
         :current-page="currentPage"
         @size-change="sizeChange"
-        @current-change="onCurrentChange"
-      >
-      </el-pagination>
+        @current-change="onCurrentChange"></el-pagination>
     </div>
-
   </div>
 </template>
 <script>
@@ -233,12 +241,16 @@ import {
   downloadData,
   convertOrderAgain,
   deleteData, // eslint-disable-line no-unused-vars
-  listShopPlateformData,
+  listShopPlateformData
 } from '@/common/api/operation/lossOrder'
 export default {
   name: 'lossOrderManage',
   data() {
     return {
+      failTypes: [
+        { id: 1, value: '下载失败' },
+        { id: 2, value: '转化失败' }
+      ],
       manageData: [],
       searchForm: {},
       total: 0,
@@ -246,7 +258,7 @@ export default {
       currentPage: 1,
       loading: false,
       selection: [],
-      plateformList: [],
+      plateformList: []
     }
   },
   async created() {
@@ -257,16 +269,15 @@ export default {
     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,
-          },
-
-        )
+        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) {
@@ -292,14 +303,14 @@ export default {
       }
       console.log(this.selection)
       if (arr.length === 0) {
-          this.$message.error('请至少选择一条记录')
-          return
+        this.$message.error('请至少选择一条记录')
+        return
       }
       try {
         await this.$confirm('确认重新下载？', '提示', {
           confirmButtonText: '确定',
           cancelButtonText: '取消',
-          type: 'warning',
+          type: 'warning'
         })
       } catch {
         return
@@ -307,7 +318,7 @@ export default {
       ids = this.selection.map((item) => item.id)
       ids = ids.join()
       const l = this.$loading({
-        background: 'rgba(0, 0, 0, 0.3)',
+        background: 'rgba(0, 0, 0, 0.3)'
       })
       try {
         await downloadData(ids)
@@ -329,14 +340,14 @@ export default {
       }
       console.log(this.selection)
       if (arr.length === 0) {
-          this.$message.error('请至少选择一条记录')
-          return
+        this.$message.error('请至少选择一条记录')
+        return
       }
       try {
         await this.$confirm('确认重新转化？', '提示', {
           confirmButtonText: '确定',
           cancelButtonText: '取消',
-          type: 'warning',
+          type: 'warning'
         })
       } catch {
         return
@@ -344,7 +355,7 @@ export default {
       ids = this.selection.map((item) => item.id)
       ids = ids.join()
       const l = this.$loading({
-        background: 'rgba(0, 0, 0, 0.3)',
+        background: 'rgba(0, 0, 0, 0.3)'
       })
       try {
         await convertOrderAgain(ids)
@@ -366,14 +377,14 @@ export default {
       }
       console.log(this.selection)
       if (arr.length === 0) {
-          this.$message.error('请至少选择一条记录')
-          return
+        this.$message.error('请至少选择一条记录')
+        return
       }
       try {
         await this.$confirm('确认删除？', '提示', {
           confirmButtonText: '确定',
           cancelButtonText: '取消',
-          type: 'warning',
+          type: 'warning'
         })
       } catch {
         return
@@ -381,7 +392,7 @@ export default {
       ids = this.selection.map((item) => item.id)
       ids = ids.join()
       const l = this.$loading({
-        background: 'rgba(0, 0, 0, 0.3)',
+        background: 'rgba(0, 0, 0, 0.3)'
       })
       try {
         await deleteData(ids)
@@ -405,10 +416,7 @@ export default {
       this.getList()
     },
     rowClick(row) {
-      if (
-        this.selection.length === 1 &&
-        this.selection[0] === row
-      ) {
+      if (this.selection.length === 1 && this.selection[0] === row) {
         this.selection = []
         this.$refs.table.clearSelection()
       } else {
@@ -416,8 +424,8 @@ export default {
         this.$refs.table.clearSelection()
         this.$refs.table.toggleRowSelection(row, true)
       }
-    },
-  },
+    }
+  }
 }
 </script>
 <style lang="scss" scoped>
@@ -481,12 +489,12 @@ export default {
 }
 
 .demo-table-expand {
-    font-size: 0;
-    //padding: 0 20px 0 20px;
+  font-size: 0;
+  //padding: 0 20px 0 20px;
 }
 
-.el-form-item__label{
-  width: 90px!important;
-  color: #99a9bf!important;
+.el-form-item__label {
+  width: 90px !important;
+  color: #99a9bf !important;
 }
 </style>