| <template> | 
|   <TableLayout :permissions="['business:backorder:query']"> | 
|     <!-- 搜索表单 --> | 
|      | 
|     <el-form ref="searchForm" slot="search-form" :model="searchForm" label-width="100px" label-suffix=":" inline> | 
|       <el-form-item label="申请信息" prop="queryParam"> | 
|         <el-input v-model="searchForm.queryParam" placeholder="请输入申请单号/标题" @keypress.enter.native="search"></el-input> | 
|       </el-form-item> | 
|       <!-- <el-form-item label="申请标题" prop="title"> | 
|         <el-input v-model="searchForm.title" placeholder="请输入申请标题" @keypress.enter.native="search"></el-input> | 
|       </el-form-item> --> | 
|       <el-form-item label="申请单类型" prop="type"> | 
|         <el-select v-model="searchForm.type" clearable filterable placeholder="全部"> | 
|           <el-option | 
|             v-for="item in types" | 
|             :key="item.id" | 
|             :label="item.name" | 
|             :value="item.id" | 
|           > | 
|           </el-option> | 
|         </el-select> | 
|       </el-form-item> | 
|       <el-form-item label="创建时间" prop="planDate"> | 
|         <el-date-picker | 
|           size="mini" | 
|           value-format="yyyy-MM-dd" | 
|           v-model="time" | 
|           type="daterange" | 
|           range-separator="至" | 
|           start-placeholder="开始日期" | 
|           end-placeholder="结束日期" | 
|           @change="selectDate" | 
|         ></el-date-picker> | 
|       </el-form-item> | 
|       <section> | 
|         <el-button type="primary" @click="search">搜索</el-button> | 
|         <el-button @click="reset">重置</el-button> | 
|       </section> | 
|     </el-form> | 
|     <!-- 表格和分页 --> | 
|     <template v-slot:table-wrap> | 
|       <ul class="toolbar"> | 
|         <li><el-button type="primary" @click="exportExcel">导出</el-button></li> | 
|       </ul> | 
|       <el-table | 
|         v-loading="isWorking.search" | 
|         :data="tableData.list" | 
|         stripe | 
|         border | 
|       > | 
|         <el-table-column prop="code" label="申请单号" fixed="left" show-overflow-tooltip min-width="140px"> | 
|           <template slot-scope="{row}"> | 
|             <span class="long-title-style">{{ row.code }}</span> | 
|           </template> | 
|         </el-table-column> | 
|         <el-table-column label="申请单类型" min-width="140px"> | 
|           <template slot-scope="{row}"> | 
|             {{ typeToStr(row.type) }} | 
|           </template> | 
|         </el-table-column> | 
|         <el-table-column label="申请标题" show-overflow-tooltip min-width="180px"> | 
|            <template slot-scope="{row}"> | 
|             <span class="long-title-style">{{ row.title }}</span> | 
|           </template> | 
|         </el-table-column> | 
|         <el-table-column label="申请内容" show-overflow-tooltip min-width="230px"> | 
|           <template slot-scope="{row}"> | 
|             <span class="long-title-style">{{ row.remark }}</span> | 
|           </template> | 
|         </el-table-column> | 
|         <el-table-column prop="status" label="审批状态" min-width="100px"> | 
|           <template slot-scope="{row}"> | 
|             {{ statusToStr(row.status) }} | 
|           </template> | 
|         </el-table-column> | 
|         <el-table-column prop="createUserName" label="创建人" min-width="100px"></el-table-column> | 
|         <el-table-column prop="createTime" label="创建时间" min-width="140px"></el-table-column> | 
|         <el-table-column label="操作" fixed="right" min-width="100px"> | 
|           <template slot-scope="{ row }"> | 
|             <el-button type="text" @click="showDetail(row)">查看详情</el-button> | 
|           </template> | 
|         </el-table-column> | 
|       </el-table> | 
|       <pagination | 
|         @size-change="handleSizeChange" | 
|         @current-change="handlePageChange" | 
|         :pagination="tableData.pagination" | 
|       > | 
|       </pagination> | 
|       <BackorderDetailExtWindow ref="backorderDetailExtWindow"/> | 
|     </template> | 
|   </TableLayout> | 
| </template> | 
|   | 
| <script> | 
| import BaseTable from '@/components/base/BaseTable' | 
| import TableLayout from '@/layouts/TableLayout' | 
| import Pagination from '@/components/common/Pagination' | 
| import BackorderDetailExtWindow from '@/components/ext/BackorderDetailExtWindow' | 
| import { backorderDetail } from '@/api/ext/backorder' | 
| export default { | 
|   name: 'Backorder', | 
|   extends: BaseTable, | 
|   components: { TableLayout, Pagination, BackorderDetailExtWindow }, | 
|   data () { | 
|     return { | 
|       // 搜索 | 
|       searchForm: { | 
|         queryParam: '', | 
|         title: '', | 
|         startDate: '', | 
|         endDate: '', | 
|         type: '', | 
|         code: '' | 
|       }, | 
|       // 0不良返工 1客退 2客返 3报废申请 | 
|       types: [ | 
|         { name: '返工返修', id: 0 }, | 
|         // { name: '客退', id: 1 }, | 
|         // { name: '客返', id: 2 }, | 
|         { name: '工序报废', id: 3 } | 
|       ], | 
|       status: [ | 
|         //  0待审批 1审批通过 2审批未通过  3审批终止 | 
|         { name: '待审批', id: 0 }, | 
|         { name: '审批通过', id: 1 }, | 
|         { name: '审批未通过', id: 2 }, | 
|         { name: '审批终止', id: 3 } | 
|       ], | 
|       time: [] | 
|     } | 
|   }, | 
|   created () { | 
|     this.config({ | 
|       module: '工单类-返修申请单信息表', | 
|       api: '/ext/backorder', | 
|       'field.id': 'id', | 
|       'field.main': 'id' | 
|     }) | 
|     this.search() | 
|   }, | 
|   methods: { | 
|     selectDate (v) { | 
|       // console.log(v) | 
|       this.searchForm.startDate = v[0] | 
|       this.searchForm.endDate = v[1] | 
|     }, | 
|     reset () { | 
|       this.$refs.searchForm.resetFields() | 
|       this.searchForm.startDate = null | 
|       this.searchForm.endDate = null | 
|       this.time = [] | 
|       this.search() | 
|     }, | 
|     typeToStr (type) { | 
|       for (const item of this.types) { | 
|         if (item.id === type) return item.name | 
|       } | 
|       return '-' | 
|     }, | 
|     statusToStr (status) { | 
|       for (const item of this.status) { | 
|         if (item.id === status) return item.name | 
|       } | 
|       return '-' | 
|     }, | 
|     showDetail (row) { | 
|       backorderDetail(row.id) | 
|         .then(res => { | 
|           this.$refs.backorderDetailExtWindow.open('申请单详情', res) | 
|         }) | 
|         .catch(err => { | 
|           this.$tip.error(err.message) | 
|         }) | 
|     } | 
|   } | 
| } | 
| </script> |