|
|
@@ -1,144 +1,249 @@
|
|
|
<template>
|
|
|
- <div style="text-align:left;margin-top:30px;margin-left:20px;">
|
|
|
- <span style="font-size:20px;">客户：</span>
|
|
|
- <el-select @change="selectCustomFn" v-model="selectCustomName" filterable remote reserve-keyword placeholder="搜索客户，光标插入 Ctrl + C" clearable ref="customref"
|
|
|
- :remote-method="searchCustomInfo" :loading="loading" style="width:500px;margin-left:20px;" size="big">
|
|
|
- <el-option v-for="item in customInfoList" :key="item.id" :label="`${item.name}`" :value="item" style="margin:12px 0 12px 0;"></el-option>
|
|
|
- </el-select>
|
|
|
- </div>
|
|
|
+ <div class="app-list-content">
|
|
|
+ <x-crud class="liu-crud-wrap" @load="onLoad">
|
|
|
+ <template #slot-tabs>
|
|
|
+ <el-tabs class="liu-tabs" type="border-card" v-model="tabIndex" @tab-click="handleClick">
|
|
|
+ <el-tab-pane v-for="(item, index) in tabsData" :key="index" :label="`${item.text}`" :name="item.key"></el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template #table-column-mobile="{scope}">
|
|
|
+ <span v-if="scope.row.mobile != ''">{{ scope.row.mobile }}</span>
|
|
|
+ <span v-else>-</span>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template #table-column-debtAmount="{scope}">
|
|
|
+ {{ scope.row.debtAmount?parseFloat(scope.row.debtAmount):0 }}
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template #table-column-balance="{scope}">
|
|
|
+ <span style="cursor: pointer;" @click="goBalanceChange(scope.row)">{{ scope.row.balance }}</span>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template #table-column-actDebt="{scope}">
|
|
|
+ <span v-if="Number(scope.row.debtAmount) > Number(scope.row.balance)" style="color:blue;font-weight:bold;cursor: pointer;" @click="goChange(scope.row)">
|
|
|
+ {{ parseFloat((Number(scope.row.debtAmount)-Number(scope.row.balance)).toFixed(2)) }}
|
|
|
+ </span>
|
|
|
+ <span v-else style="font-weight:bold;cursor: pointer;" @click="goChange(scope.row)">-</span>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template #table-column-buyAmount="{scope}">
|
|
|
+ <span>{{ scope.row.buyAmount ? parseFloat(scope.row.buyAmount) : 0 }}</span>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template #slot-column-option="{scope}">
|
|
|
+ <el-button size="small" type="primary" @click="kd(scope.row,1)">开预订单</el-button>
|
|
|
+ <el-button size="small" type="primary" @click="kd(scope.row,0)" style="margin-left:30px;">开单</el-button>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template #table-column-recentExpend="{scope}">
|
|
|
+ <span v-if="scope.row.recentExpend == '0000-00-00 00:00:00'">没有下过单</span>
|
|
|
+ <span v-else>{{ scope.row.recentExpend ? scope.row.recentExpend.substr(0,11) : 0 }}</span>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template #table-column-visitTime="{scope}">
|
|
|
+ <span>{{ scope.row.visitTime ? scope.row.visitTime.substr(0,11) : 0 }}</span>
|
|
|
+ </template>
|
|
|
+
|
|
|
+
|
|
|
+ <template #slot-top-element>
|
|
|
+ <el-input v-model="name" placeholder="搜索客户" size="big" style="width:400px;" ref="customSearchRef" @input="changeText()"></el-input>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ </x-crud>
|
|
|
+
|
|
|
+ </div>
|
|
|
</template>
|
|
|
+
|
|
|
<script>
|
|
|
-import { mapGetters } from 'vuex';
|
|
|
+import { mapGetters, mapActions } from 'vuex';
|
|
|
+import { baseUrl } from '@/config/env';
|
|
|
export default {
|
|
|
- name: 'add',
|
|
|
- data() {
|
|
|
- return {
|
|
|
- customInfoList:[],
|
|
|
- loading: false,
|
|
|
- selectCustomName:''
|
|
|
- };
|
|
|
- },
|
|
|
- mixins: [],
|
|
|
- computed: {
|
|
|
-
|
|
|
- },
|
|
|
- created() {
|
|
|
-
|
|
|
- },
|
|
|
- mounted() {
|
|
|
-
|
|
|
- this.$nextTick(() => {
|
|
|
- this.$refs.customref.focus()
|
|
|
- })
|
|
|
-
|
|
|
- let that = this;
|
|
|
- document.onkeydown=function(e) {
|
|
|
- if(e && e.key && e.key.toLowerCase() =='c' && e.ctrlKey){
|
|
|
- that.$refs['customref'].focus();
|
|
|
- }
|
|
|
- }
|
|
|
+ components: {
|
|
|
|
|
|
- },
|
|
|
- methods: {
|
|
|
- selectCustomFn(e){
|
|
|
- if(e.id && e.name){
|
|
|
- let query = {};
|
|
|
- query.customId = e.id
|
|
|
- query.customName = e.name
|
|
|
- query.book = 0
|
|
|
- this.$router.push({path:'/order/confirm', query})
|
|
|
- }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ app: null,
|
|
|
+ tabIndex: '0',
|
|
|
+ tabsData: [
|
|
|
+ {
|
|
|
+ text: '客户列表',
|
|
|
+ key: '0',
|
|
|
+ val: 0
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ modalData: {},
|
|
|
+ drapShow: false,
|
|
|
+ confirmMobile1:'',
|
|
|
+ addPop:false,
|
|
|
+ name:''
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapGetters({ levelData: 'level' }),
|
|
|
+ ...mapGetters(['token'])
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getLevel();
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.customSearchRef.focus()
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ ...mapActions(['getLevel']),
|
|
|
+ changeText(){
|
|
|
+ this.app.refresh({ type: this.tabIndex,name:this.name })
|
|
|
},
|
|
|
- searchCustomInfo(query) {
|
|
|
- let that = this
|
|
|
- if (query !== '') {
|
|
|
- this.loading = true;
|
|
|
- this.$service.custom.list({name:query}).then(res=>{
|
|
|
- that.loading = false
|
|
|
- that.customInfoList = res.list
|
|
|
- })
|
|
|
- } else {
|
|
|
- this.customInfoList = []
|
|
|
+ goChange(data){
|
|
|
+ let query = {};
|
|
|
+ query.customId = data.id
|
|
|
+ query.endTime = ''
|
|
|
+ this.$router.push({ path: '/custom/pastAccountChange', query });
|
|
|
+ },
|
|
|
+ goBalanceChange(data){
|
|
|
+ let query = {};
|
|
|
+ query.customId = data.id
|
|
|
+ query.customName = data.name
|
|
|
+ this.$router.push({ path: '/member/custom-balance-list', query });
|
|
|
+ },
|
|
|
+ kd(info,book){
|
|
|
+ let query = {}
|
|
|
+ query.customId = info.id
|
|
|
+ query.customName = info.name
|
|
|
+ query.book = book
|
|
|
+ if(book == 1){
|
|
|
+ this.$router.push({path:'/order/confirm',query})
|
|
|
+ }else{
|
|
|
+ this.$router.push({path:'/order/confirm',query})
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleClick(tab, e) {
|
|
|
+ this.app.refresh({ type: this.tabIndex,name:this.name });
|
|
|
+ },
|
|
|
+ onLoad({ ctx, app }) {
|
|
|
+ this.app = app;
|
|
|
+ if (this.$route.query.type) {
|
|
|
+ this.tabIndex = this.$route.query.type;
|
|
|
}
|
|
|
+ ctx.service(this.$service.custom)
|
|
|
+ .set('table', {
|
|
|
+ columns: [
|
|
|
+ {
|
|
|
+ prop: 'name',
|
|
|
+ label: '名称',
|
|
|
+ align: 'center',
|
|
|
+ width: 160
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'mobile',
|
|
|
+ label: '手机号',
|
|
|
+ align: 'center',
|
|
|
+ width: 110
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'id',
|
|
|
+ label: 'ID',
|
|
|
+ align: 'center',
|
|
|
+ width: 90
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'debtAmount',
|
|
|
+ label: '欠款',
|
|
|
+ align: 'center',
|
|
|
+ width: 100
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'balance',
|
|
|
+ label: '余额',
|
|
|
+ align: 'center',
|
|
|
+ width: 90
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'actDebt',
|
|
|
+ label: '待结欠款',
|
|
|
+ align: 'center',
|
|
|
+ width: 100
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'buyNum',
|
|
|
+ label: '消费次数',
|
|
|
+ align: 'center',
|
|
|
+ width: 90
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'buyAmount',
|
|
|
+ label: '累计消费',
|
|
|
+ align: 'center',
|
|
|
+ width: 110
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'recentExpend',
|
|
|
+ label: '最近下单',
|
|
|
+ align: 'center',
|
|
|
+ width: 120
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'visitTime',
|
|
|
+ label: '最近访问',
|
|
|
+ align: 'center',
|
|
|
+ width: 120
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ op: {
|
|
|
+ visible: true,
|
|
|
+ props: {
|
|
|
+ width: 220,
|
|
|
+ align: 'center',
|
|
|
+ fixed: 'left',
|
|
|
+ label: '操作'
|
|
|
+ },
|
|
|
+ layout: ['slot-column-option']
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .set('layout', [
|
|
|
+ ['slot-tabs'],
|
|
|
+ ['slot-top-element','flex1'],
|
|
|
+ ['data-table'],
|
|
|
+ ['flex1', 'pagination']
|
|
|
+ ])
|
|
|
+ .on('refresh', async (params, { next }) => {
|
|
|
+ let result = await next(params)
|
|
|
+ })
|
|
|
+ .done();
|
|
|
+ app.refresh({ type: this.tabIndex,name:this.name })
|
|
|
}
|
|
|
- }
|
|
|
+ }
|
|
|
};
|
|
|
</script>
|
|
|
-<style lang="scss">
|
|
|
-.tableBox {
|
|
|
- th {
|
|
|
- padding: 0 !important;
|
|
|
- height: 40px;
|
|
|
- line-height: 40px;
|
|
|
- }
|
|
|
- td {
|
|
|
- padding: 0 !important;
|
|
|
- height: 45px;
|
|
|
- line-height: 45px;
|
|
|
- }
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.user-name-warp {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ span {
|
|
|
+ margin-left: 6px;
|
|
|
+ }
|
|
|
}
|
|
|
-.app-list-content {
|
|
|
- position: relative;
|
|
|
-
|
|
|
- .right_box {
|
|
|
- float: right;
|
|
|
- width: 20%;
|
|
|
- // margin-top: 40px;
|
|
|
- // background: #ffffff;
|
|
|
- // border: 1px solid #ebeef5;
|
|
|
- box-sizing: border-box;
|
|
|
- vertical-align: top;
|
|
|
- margin-left: -1px;
|
|
|
- }
|
|
|
|
|
|
- .left_box {
|
|
|
- //float: left;
|
|
|
- width: 90%;
|
|
|
- margin: 0 auto;
|
|
|
- vertical-align: top;
|
|
|
-
|
|
|
- .tor {
|
|
|
- line-height: 40px;
|
|
|
- color: #999;
|
|
|
- text-align: center;
|
|
|
- font-size: 15px;
|
|
|
- span{
|
|
|
- margin-right:20px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .seek-list-box{
|
|
|
- position: absolute;
|
|
|
- bottom: 70px;
|
|
|
- right: 15vw;
|
|
|
- min-height: 310px;
|
|
|
- overflow: hidden;
|
|
|
- z-index:9999;
|
|
|
- }
|
|
|
- .bottom_input {
|
|
|
- position: absolute;
|
|
|
- bottom: 18px;
|
|
|
- width:100%;
|
|
|
- text-align: center;
|
|
|
- .allPrice {
|
|
|
- margin-left:30px;
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 700;
|
|
|
- &.active{
|
|
|
- margin-left: 200px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .el-dialog-center{
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- span{
|
|
|
- padding: 0 20px;
|
|
|
- }
|
|
|
+.store-icon {
|
|
|
+ i {
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
|
|
|
- }
|
|
|
- .accounts-list{
|
|
|
+ .el-icon-check {
|
|
|
+ color: #fee470;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-icon-close {
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+}
|
|
|
+.accounts-list{
|
|
|
width: 80%;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
@@ -149,19 +254,4 @@ export default {
|
|
|
width: 80%;
|
|
|
}
|
|
|
}
|
|
|
- .remark{
|
|
|
- margin-top: 20px;
|
|
|
- text-align: center;
|
|
|
- color: #999999;
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
- .flex{display: flex;align-items: center;}
|
|
|
- .flex-center{display: flex;align-items: center;justify-content: center;}
|
|
|
- .flex-center{display: flex;align-items: center;justify-content: space-between;}
|
|
|
- .print-html {
|
|
|
- position: fixed;
|
|
|
- left: 0;
|
|
|
- top: 9990px;
|
|
|
- }
|
|
|
-}
|
|
|
</style>
|
