|  |  |  | 
|---|
|  |  |  | <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 | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|