| <template> | 
|   <div class="sales-return"> | 
|     <div v-if="isDetail" class="detail-top"> | 
|       <DetailListCommonBtn :query-class-options="queryClassOptions" /> | 
|     </div> | 
|   | 
|     <div v-else class="filter"> | 
|       <div class="filter-card"> | 
|         <CommonSearch | 
|             :show-add="false" | 
|             :show-download="false" | 
|             :amount-view="false" | 
|             :show-action-btn="false" | 
|             placeholder="请输入销售退货单编号" | 
|             @searchClick="onFilterSearch" | 
|         > | 
|           <template slot="leftButton"> | 
|             <el-button size="small" type="primary"  @click="addBtnClick">新建</el-button> | 
|             <!-- <el-button size="small"  @click="delClick">删除</el-button> --> | 
|           </template> | 
|         </CommonSearch> | 
|       </div> | 
|     </div> | 
|   | 
|     <div class="body"> | 
|       <div class="body-card"> | 
|         <div class="list-view"> | 
|           <TableCommonView | 
|               ref="tableListRef" | 
|               :table-list="tableList" | 
|               @selClientClick="selClientClick" | 
|               @selCommonClick="selCommonClick" | 
|               @getSelectArray="getSelectArray" | 
|               @selTableCol="selTableCol" | 
|           > | 
|             <template slot="tableButton"> | 
|               <el-table-column label="操作" width="90"> | 
|                 <template slot-scope="scope"> | 
|                   <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button> | 
|                   <el-button @click="delClick(scope.row.id)" type="text" size="small">删除</el-button> | 
|                 </template> | 
|               </el-table-column> | 
|             </template> | 
|           </TableCommonView> | 
|         </div> | 
|         <div class="btn-pager"> | 
|           <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" /> | 
|         </div> | 
|       </div> | 
|     </div> | 
|     <!-- 新建/编辑 --> | 
|     <AddSalesReturnDialog v-if="editConfig.visible" :edit-common-config="editConfig" /> | 
|     <!-- 销售退货单详情 --> | 
|     <DetailReturn v-if="returnDetail.visible" :return-detail="returnDetail" /> | 
|     <!-- 客户详情 --> | 
|     <DetailClientManage v-if="clientDeail.visible" :client-manage-detail="clientDeail" /> | 
|   </div> | 
| </template> | 
|   | 
| <script> | 
| import AddSalesReturnDialog from "@/views/sales/salesReturn/AddSalesReturnDialog" | 
| import { getSalesReturnList, getDelSalesReturn } from "@/api/sales/salesReturn" | 
| import pageMixin from "@/components/makepager/pager/mixin/pageMixin" | 
| import DetailReturn from "@/views/sales/salesReturn/DetailReturn" | 
|   | 
| export default { | 
|   name: "SalesReturn", | 
|   props: { | 
|     isDetail: { | 
|       type: Boolean, | 
|       default: false | 
|     }, | 
|     addConfig: { | 
|       type: Object, | 
|       default: () => { | 
|         return {} | 
|       } | 
|     } | 
|   }, | 
|   mixins: [pageMixin], | 
|   components: { | 
|     AddSalesReturnDialog, | 
|     DetailReturn, | 
|     DetailClientManage: () => import("@/views/client/client/DetailClientManage") | 
|   }, | 
|   computed: { | 
|     searchCommonHeight() { | 
|       return this.$refs.searchCommonView.offsetHeight | 
|     } | 
|   }, | 
|   data() { | 
|     return { | 
|       tableList: {}, | 
|       queryClassOptions: [ | 
|         { value: "1", label: "全部" }, | 
|         { value: "2", label: "中止" }, | 
|         { value: "3", label: "结束" }, | 
|         { value: "4", label: "已入库" }, | 
|         { value: "5", label: "未入库" } | 
|       ], | 
|       searchOptions: [], | 
|       operatesList: [ | 
|         { id: "1", name: "共享" }, | 
|         { id: "2", name: "批量编辑" }, | 
|         { id: "3", name: "导出" }, | 
|         { id: "4", name: "下载全部附件" }, | 
|         { id: "5", name: "更改创建人" }, | 
|         { id: "6", name: "树结构设置" }, | 
|         { id: "7", name: "审批设置" }, | 
|         { id: "8", name: "恢复预设列宽" } | 
|       ], | 
|       editConfig: { | 
|         visible: false, | 
|         title: "新建", | 
|         infomation: {} | 
|       }, | 
|       returnDetail: { | 
|         visible: false, | 
|         infomation: {} | 
|       }, | 
|       clientDeail: { | 
|         visible: false, | 
|         infomation: {} | 
|       }, | 
|       selValueList: [], | 
|       search_map: {}, | 
|       searchSel: { | 
|         value: "number", | 
|         label: "销售退货单编号" | 
|       }, | 
|       keyword: "", | 
|       keywordType: "", | 
|       tableColumn: [ | 
|         { label: "销售退货单编号", prop: "number", min: 120, isCommonClick: true ,default:true }, | 
|         { label: "客户名称", prop: "client_name", min: 90, isClientClick: true }, | 
|         { label: "退货日期", prop: "returnDate", min: 130 }, | 
|         { label: "状态", prop: "salesReturnStatus_name" }, | 
|         { label: "退入仓库", prop: "repository" }, | 
|         { label: "应退款", prop: "refundabe" }, | 
|         { label: "已退款", prop: "refunded" }, | 
|         { label: "销售负责人", prop: "member_name" } | 
|         // { label: "修改时间", prop: "modifyTime", isTime: true, min: 130 } | 
|       ], | 
|       showCol:["销售退货单编号", "客户名称", "退货日期", "状态", "退入仓库", "应退款", "已退款", "销售负责人"] | 
|     } | 
|   }, | 
|   created() { | 
|     this.setTable() | 
|     if (!this.isDetail) { | 
|       this.keyword = "" | 
|       this.keywordType = "" | 
|     } else { | 
|       this.keyword = this.addConfig.keyword | 
|       this.keywordType = this.addConfig.keywordType | 
|     } | 
|     this.getData() | 
|   }, | 
|   methods: { | 
|     setTable() { | 
|       this.tableList = { | 
|         selectIndex: true, | 
|         tableInfomation: [], | 
|         allcol: [], | 
|         showcol: this.showCol, | 
|         tableColumn:this.setColumnVisible(this.showCol) | 
|       } | 
|       this.tableList.allcol = this.tableList.tableColumn.filter(ele=>!ele.default).map(ele=>ele.label); | 
|       this.searchOptions = [] | 
|       for (let i = 0; i < this.tableList.tableColumn.length; i++) { | 
|         const label = this.tableList.tableColumn[i].label | 
|         const value = this.tableList.tableColumn[i].prop | 
|         this.searchOptions.push({ value: value, label: label }) | 
|       } | 
|     }, | 
|     setColumnVisible(showCol){ | 
|       return  this.tableColumn.map(ele=>{ | 
|         return { | 
|           ...ele, | 
|           isShowColumn:showCol.includes(ele.label) | 
|         } | 
|       }) | 
|     }, | 
|     selTableCol(val) { | 
|       this.showcol = val; | 
|       this.tableList.tableColumn = this.setColumnVisible(val); | 
|     }, | 
|     // 请求数据 | 
|     async getData() { | 
|       this.loading = true | 
|       await getSalesReturnList({ | 
|         keyword: this.keyword, | 
|         keywordType: this.keywordType, | 
|         page: this.pagerOptions.currPage, | 
|         pageSize: this.pagerOptions.pageSize | 
|       }) | 
|         .then((res) => { | 
|           console.log(res) | 
|           if (res.code === 200) { | 
|             if (res.data.list && res.data.list.length > 0) { | 
|               const list = res.data.list.map((item) => { | 
|                 return { | 
|                   ...item, | 
|                   member_name: item.Member.username, | 
|                   salesReturnStatus_name: item.SalesReturnStatus.name, | 
|                   client_name: item.client.name | 
|                 } | 
|               }) | 
|               this.tableList.tableInfomation = list || [] | 
|               this.pagerOptions.totalCount = res.data.count | 
|             } else { | 
|               this.tableList.tableInfomation = [] | 
|             } | 
|           } else { | 
|             this.tableList.tableInfomation = [] | 
|           } | 
|           this.loading = false | 
|         }) | 
|         .catch((err) => { | 
|           console.log(err) | 
|           this.tableList.tableInfomation = [] | 
|           this.loading = false | 
|         }) | 
|     }, | 
|     // 搜索 | 
|     onFilterSearch(searchText){ | 
|       this.keyword = searchText ?? '' | 
|       this.keywordType = "销售退货单编号" | 
|       this.pagerOptions.currPage = 1 | 
|       this.getData() | 
|     }, | 
|     // 新建 | 
|     addBtnClick() { | 
|       this.editConfig.visible = true | 
|       this.editConfig.title = "新建" | 
|       this.editConfig.infomation = { currency: "人民币" } | 
|     }, | 
|     // 编辑 | 
|     handleClick(row) { | 
|       console.log(row) | 
|       this.editConfig.visible = true | 
|       this.editConfig.title = "编辑" | 
|       this.editConfig.infomation = { ...row, currency: "人民币", salesDetailNumber: row.Source.number } | 
|     }, | 
|     // 删除 | 
|     delClick(rowID) { | 
|       // if (this.selValueList && this.selValueList.length > 0) { | 
|         this.$confirm("是否确认删除?", "警告", { | 
|           confirmButtonText: "确定", | 
|           cancelButtonText: "取消", | 
|           type: "warning" | 
|         }) | 
|           .then(() => { | 
|             getDelSalesReturn({ ids:[rowID] }).then((response) => { | 
|               if (response.code === 200) { | 
|                 this.$message.success("删除成功") | 
|                 this.getData() | 
|               } else { | 
|                 this.$message.warning("删除失败") | 
|               } | 
|             }) | 
|           }) | 
|           .catch(() => {}) | 
|       // } else { | 
|       //   this.$message.warning("请至少选择一条记录") | 
|       // } | 
|     }, | 
|     getSelectArray(val) { | 
|       console.log(val) | 
|       this.selValueList = [] | 
|       const list = val.map((item) => { | 
|         return item.id | 
|       }) | 
|       this.selValueList = list | 
|     }, | 
|     // 客户名称详情 | 
|     selClientClick(row) { | 
|       console.log(row) | 
|       this.clientDeail.visible = true | 
|       this.clientDeail.infomation = { | 
|         ...row.client, | 
|         client_name: row.name, | 
|         member: row.Member, | 
|         client_level: row.client.client_level.name, | 
|         client_status: row.client.client_status.name | 
|       } | 
|     }, | 
|     // 联系人详情 | 
|     selCommonClick(row) { | 
|       console.log(row) | 
|       this.returnDetail.visible = true | 
|       this.returnDetail.infomation = { ...row } | 
|     } | 
|   } | 
| } | 
| </script> | 
|   | 
| <!-- Add "scoped" attribute to limit CSS to this component only --> | 
| <style lang="scss" scoped> | 
| .sales-return { | 
|   height: 100%; | 
|   overflow: hidden; | 
|   .filter{ | 
|     height: 80px; | 
|     display: flex; | 
|     align-items: center; | 
|     padding: 12px 20px 0 20px; | 
|     &-card{ | 
|       height: 80px; | 
|       display: flex; | 
|       align-items: center; | 
|       box-sizing: border-box; | 
|       padding: 10px 20px; | 
|       flex: 1; | 
|       border-radius: 12px; | 
|       background-color: #fff; | 
|     } | 
|   } | 
|   .body{ | 
|     box-sizing: border-box; | 
|     padding: 10px 20px; | 
|     border-radius: 12px; | 
|     height: calc(100% - 92px); | 
|     .body-card { | 
|       background-color: #fff; | 
|       border-radius: 12px; | 
|       height: 100%; | 
|       overflow: hidden; | 
|     } | 
|     .list-view { | 
|       height: calc(100% - 60px); | 
|       overflow: hidden; | 
|     } | 
|     .btn-pager { | 
|       display: flex; | 
|       margin-top: 10px; | 
|       .page { | 
|         margin-left: auto; | 
|       } | 
|     } | 
|   } | 
| } | 
| </style> |