|  |  | 
 |  |  | <template> | 
 |  |  |   <GlobalWindow title="选择客户" width="1000px" @close="close" :visible.sync="isShowMemberList"> | 
 |  |  |   <GlobalWindow title="选择客户" width="80%" :withFooter="false" @close="close" :visible.sync="isShowMemberList"> | 
 |  |  |     <div> | 
 |  |  |       <div class="df_ac mb20"> | 
 |  |  |         <el-input v-model="modalSearchValue" placeholder="请输入客户名称" class="w400" @keyup.enter.native="queryList"> | 
 |  |  |           <!-- <el-button slot="append" icon="el-icon-search" @click="queryList()" /> --> | 
 |  |  |         </el-input> | 
 |  |  |         <el-button class="ml10" type="primary" @click="queryList()">查询</el-button> | 
 |  |  |         <el-button class="ml10 mr10" type="primary" @click="queryList()">查询</el-button> | 
 |  |  |         <el-button class="ml10" @click="clear()">重置</el-button> | 
 |  |  |         <el-button class="ml10" type="primary" @click="$refs.operaYwCustomerWindow.open('新建客户')">新建客户</el-button> | 
 |  |  |       </div> | 
 |  |  |       <el-table ref="table" v-loading="listLoading" :data="list" element-loading-text="Loading" border fit | 
 |  |  |         :header-row-class-name="'table-header'" class="doumee-element-table doumee-element-tableb" | 
 |  |  |         @row-click="rowClick"> | 
 |  |  |  | 
 |  |  |         <el-table-column align="center" label="客户类型" prop="cardName" show-overflow-tooltip min-width="80" /> | 
 |  |  |         <el-table-column align="center" label="客户名称" show-overflow-tooltip prop="remainingMoney" min-width="80" /> | 
 |  |  |         <el-table-column align="center" label="联系人" show-overflow-tooltip prop="remainingGiveMoney" min-width="80" /> | 
 |  |  |         <el-table-column label="联系电话" prop="createTime" min-width="100" align="center" /> | 
 |  |  |         <el-table-column label="统一信用代码" prop="createTime" min-width="120" align="center" /> | 
 |  |  |         <el-table-column label="营业期限" prop="createTime" min-width="100" align="center" /> | 
 |  |  |         <el-table-column label="默认发票类型" prop="createTime" min-width="100" align="center" /> | 
 |  |  |         <el-table-column align="center" label="客户类型" show-overflow-tooltip min-width="80"> | 
 |  |  |           <template slot-scope="{row}"> | 
 |  |  |             <span v-if="row.type === 0">个人</span> | 
 |  |  |             <span v-if="row.type === 1">企业</span> | 
 |  |  |           </template> | 
 |  |  |         </el-table-column> | 
 |  |  |         <el-table-column align="center" label="客户名称" show-overflow-tooltip prop="name" min-width="80" /> | 
 |  |  |         <el-table-column align="center" label="联系人" show-overflow-tooltip prop="memberName" min-width="80" /> | 
 |  |  |         <el-table-column label="联系电话" prop="memberPhone" min-width="100" align="center" /> | 
 |  |  |         <el-table-column label="统一信用代码" prop="creditCard" min-width="120" align="center"> | 
 |  |  |           <template slot-scope="{row}"> | 
 |  |  |             <div v-if="row.type === 1"> | 
 |  |  |               <span v-if="row.fpType === 0">增值税普通发票</span> | 
 |  |  |               <span v-else-if="row.fpType === 1">增值税专用发票</span> | 
 |  |  |               <span v-else>-</span> | 
 |  |  |             </div> | 
 |  |  |             <div v-else>-</div> | 
 |  |  |           </template> | 
 |  |  |         </el-table-column> | 
 |  |  |         <el-table-column label="营业期限" prop="validity" min-width="100" align="center"> | 
 |  |  |           <template slot-scope="{row}"> | 
 |  |  |             <div v-if="row.type === 1"> | 
 |  |  |               <span>{{row.validity || '-'}}</span> | 
 |  |  |             </div> | 
 |  |  |             <div v-else>-</div> | 
 |  |  |           </template> | 
 |  |  |         </el-table-column> | 
 |  |  |         <el-table-column label="默认发票类型" min-width="100" align="center"> | 
 |  |  |           <template slot-scope="{row}"> | 
 |  |  |             <div v-if="row.type === 1"> | 
 |  |  |               <span v-if="row.fpType === 0">增值税普通发票</span> | 
 |  |  |               <span v-else-if="row.fpType === 1">增值税专用发票</span> | 
 |  |  |               <span v-else>-</span> | 
 |  |  |             </div> | 
 |  |  |             <div v-else>-</div> | 
 |  |  |           </template> | 
 |  |  |         </el-table-column> | 
 |  |  |         <el-table-column label="操作" min-width="100" align="center"> | 
 |  |  |           <template slot-scope="{row}"> | 
 |  |  |             <span class="primaryColor cu" @click="selectItem(row)">选择</span> | 
 |  |  |           </template> | 
 |  |  |         </el-table-column> | 
 |  |  |       </el-table> | 
 |  |  |       <Pagination @size-change="handleSizeChange" @current-change="getList" :pagination="pagination" /> | 
 |  |  |       <div style="text-align: right; margin-top: 15px;"> | 
 |  |  |         <Pagination @size-change="handleSizeChange" @current-change="getList" :pagination="pagination" /> | 
 |  |  |       </div> | 
 |  |  |     </div> | 
 |  |  |     <!-- 新建/修改 --> | 
 |  |  |     <OperaYwCustomerWindow ref="operaYwCustomerWindow" @success="clear" /> | 
 |  |  |   </GlobalWindow> | 
 |  |  | </template> | 
 |  |  |  | 
 |  |  | <script> | 
 |  |  | import { memberList, memberDetailInfo } from '@/api' | 
 |  |  | import { fetchList } from '@/api/customer' | 
 |  |  | import GlobalWindow from '@/components/common/GlobalWindow' | 
 |  |  | import dayjs from 'dayjs' | 
 |  |  | // import { debounce } from '@/utils/debounce' | 
 |  |  |  | 
 |  |  | import Pagination from '@/components/common/Pagination' | 
 |  |  | import OperaYwCustomerWindow from '@/views/client/components/OperaYwCustomerWindow' | 
 |  |  | export default { | 
 |  |  |   components: { | 
 |  |  |     Pagination, | 
 |  |  |     GlobalWindow | 
 |  |  |     GlobalWindow, | 
 |  |  |     OperaYwCustomerWindow | 
 |  |  |   }, | 
 |  |  |   props: { | 
 |  |  |     isShowChooseBtn: { | 
 |  |  |       type: Boolean, | 
 |  |  |       default: () => true | 
 |  |  |     }, | 
 |  |  |     type: { // (10: 商品折扣  20: 订场折扣 30: 门票折扣 40: 套餐折扣 50:活动折扣 60:课程折扣) | 
 |  |  |       type: String, | 
 |  |  |       default: 'default' | 
 |  |  |     } | 
 |  |  |   }, | 
 |  |  |   data() { | 
 |  |  |   data () { | 
 |  |  |     return { | 
 |  |  |       searchValue: '', | 
 |  |  |       isShowMemberList: false, | 
 |  |  |       modalSearchValue: '', | 
 |  |  |       list: [], | 
 |  |  |       totalCount: 0, | 
 |  |  |       pagination: { | 
 |  |  |         pageSize: 10, | 
 |  |  |         page: 1, | 
 |  |  |         total: 0 | 
 |  |  |       }, | 
 |  |  |       listLoading: false, | 
 |  |  |  | 
 |  |  |       listLoading: false | 
 |  |  |     } | 
 |  |  |   }, | 
 |  |  |   created() { | 
 |  |  |     // (10: 商品折扣  20: 订场折扣 30: 门票折扣 40: 套餐折扣 50:活动折扣 60:课程折扣) | 
 |  |  |   }, | 
 |  |  |   methods: { | 
 |  |  |     clearSearch() { | 
 |  |  |       this.searchValue = '' | 
 |  |  |     open () { | 
 |  |  |       this.modalSearchValue = '' | 
 |  |  |       this.filters = {} | 
 |  |  |       this.pagination.page = 1 | 
 |  |  |       this.pagination.pageSize = 10 | 
 |  |  |       this.isShowMemberList = true | 
 |  |  |       this.getList() | 
 |  |  |     }, | 
 |  |  |     handleMemberSelect(item) { | 
 |  |  |       memberDetailInfo({ param: { memberId: item.id } }).then((res) => { | 
 |  |  |         if (res.errorCode !== '000000') return | 
 |  |  |         const obj = res.record || {} | 
 |  |  |         obj.searchValue = this.searchValue | 
 |  |  |         this.$emit('select', obj) | 
 |  |  |       }) | 
 |  |  |     }, | 
 |  |  |     clear() { | 
 |  |  |       this.searchValue = '' | 
 |  |  |       setTimeout(() => { | 
 |  |  |         this.$refs.searchValueRef.focus() | 
 |  |  |       }) | 
 |  |  |       this.$emit('clear') | 
 |  |  |     }, | 
 |  |  |     rowClick(item) { | 
 |  |  |       memberDetailInfo({ param: { memberId: item.id } }).then((res) => { | 
 |  |  |         if (res.errorCode !== '000000') return | 
 |  |  |         const obj = res.record || {} | 
 |  |  |         this.searchValue = obj.nickName | 
 |  |  |         obj.searchValue = this.modalSearchValue | 
 |  |  |         if (item.phone) { | 
 |  |  |           this.searchValue += '-' + item.phone | 
 |  |  |         } | 
 |  |  |         if (item.number) { | 
 |  |  |           this.searchValue += '(' + item.number + ')' | 
 |  |  |         } | 
 |  |  |         this.$emit('select', obj) | 
 |  |  |       }) | 
 |  |  |       this.isShowMemberList = false | 
 |  |  |     }, | 
 |  |  |     getList() { | 
 |  |  |     getList () { | 
 |  |  |       const { pagination, modalSearchValue } = this | 
 |  |  |       this.listLoading = true | 
 |  |  |       memberList({ pagination, param: { keyword: modalSearchValue } }).then((res) => { | 
 |  |  |       fetchList({ | 
 |  |  |         capacity: pagination.pageSize, | 
 |  |  |         page: pagination.page, | 
 |  |  |         model: { | 
 |  |  |           name: modalSearchValue | 
 |  |  |         } | 
 |  |  |       }).then((res) => { | 
 |  |  |         this.listLoading = false | 
 |  |  |         if (res.errorCode !== '000000') return | 
 |  |  |         this.list = res.recordList | 
 |  |  |         this.list = res.records | 
 |  |  |         this.pagination.total = res.total || 0 | 
 |  |  |         this.totalCount = res.totalCount | 
 |  |  |       }, () => { | 
 |  |  |         this.listLoading = false | 
 |  |  |       }) | 
 |  |  |     }, | 
 |  |  |     openModal() { | 
 |  |  |       this.modalSearchValue = '' | 
 |  |  |       // this.queryList() | 
 |  |  |       this.isShowMemberList = true | 
 |  |  |     selectItem (row) { | 
 |  |  |       this.$emit('select', row) | 
 |  |  |       this.isShowMemberList = false | 
 |  |  |     }, | 
 |  |  |     queryList() { | 
 |  |  |     queryList () { | 
 |  |  |       this.pagination.page = 1 | 
 |  |  |       this.getList() | 
 |  |  |     }, | 
 |  |  |     currentChange(val) { | 
 |  |  |     currentChange (val) { | 
 |  |  |       this.pagination.page = val | 
 |  |  |       this.getList() | 
 |  |  |     }, | 
 |  |  |     clear() { | 
 |  |  |     clear () { | 
 |  |  |       this.filters = {} | 
 |  |  |       this.pagination.pageSize = 10 | 
 |  |  |       this.pagination.page = 1 | 
 |  |  |       this.getList() | 
 |  |  |     }, | 
 |  |  |     handleSizeChange(capacity) { | 
 |  |  |     handleSizeChange (capacity) { | 
 |  |  |       this.pagination.pageSize = capacity | 
 |  |  |       this.getList() | 
 |  |  |     }, | 
 |  |  |     close() { | 
 |  |  |     close () { | 
 |  |  |       this.isShowMemberList = false | 
 |  |  |     } | 
 |  |  |   } |