You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

246 lines
8.9 KiB
Vue

<template>
<el-dialog :close-on-click-modal="false" :title="title" :visible.sync="dialogFormVisible" width="80%" v-dialogDrag>
<el-form :model="form" inline ref="form" class="max-height-60" label-width="80px">
<el-form-item label="转出门店">
<el-select class="form-width-m" filterable default-first-option clearable v-model="form.storesNum" placeholder="请选择" @change="changeOut">
<el-option v-for="(item,index) in options" :key="index" :label="item.storeNum" :value="item.storeNum">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="门店名称">
<div class="form-width-m">
{{form.storesName}}
</div>
</el-form-item>
<el-form-item label="手机号码">
<el-input class="form-width-ms" style="padding-left:0px;" ref="" oninput="this.value=this.value.replace(/\D/g,'')" pattern="[0-9]*" :maxlength="11" v-model="form.mobilePhone" @blur="query" @change="query">
<el-button size="mini" slot="append" icon="el-icon-search" @click="openMember"></el-button>
</el-input>
</el-form-item>
<el-form-item label="会员名字">
{{form.memberName}}
</el-form-item>
<el-table :data="list" max-height="600" ref="list" v-loading="listLoading" :element-loading-text="elementLoadingText" @row-click="getCurrentRow" :row-class-name="rowName" @selection-change="handleSelectionChange" :header-cell-style="{background: 'linear-gradient(#6cb3ff, #1873d4)',color:'#eeeeee'}">
<el-table-column type="selection" width="50"></el-table-column>
<el-table-column align="center" prop="courseProjectNum" label="项目编码" sortable min-width="80"></el-table-column>
<el-table-column align="center" prop="courseProjectName" label="项目名称" sortable min-width="80"></el-table-column>
<el-table-column align="center" prop="price" label="项目单价" sortable min-width="80"></el-table-column>
<el-table-column align="center" prop="courseRestCount" label="剩余次数" sortable min-width="80"></el-table-column>
<el-table-column align="center" prop="courseRestPrice" label="剩余金额" sortable min-width="80"></el-table-column>
<el-table-column align="center" prop="courseConsumeCount" label="可用次数" sortable min-width="80"></el-table-column>
<el-table-column align="center" prop="courseConsumePrice" label="可用金额" sortable min-width="80"></el-table-column>
<el-table-column align="center" label="转入门店">
<el-table-column align="center" prop="storeNum" label="编码" min-width="80"></el-table-column>
<el-table-column align="center" prop="storeName" label="名称" min-width="180">
<template slot-scope="scope">
<el-select filterable default-first-option clearable @clear='clear(scope.row)' v-model="scope.row.storeName" @change="changeIn($event,scope.row)" placeholder="请选择">
<el-option v-for="(item,index) in storeList" :key="index" :label="item.storeName" :value="item.storeName">
</el-option>
</el-select>
</template>
</el-table-column>
</el-table-column>
</el-table>
</el-form>
<member ref="member" @memberData="memberData"></member>
<div slot="footer" class="dialog-footer">
<el-button size="mini" type="primary" @click="dialogFormVisible = false">取 消</el-button>
<el-button size="mini" type="primary" @click="confirm()"> </el-button>
</div>
</el-dialog>
</template>
<script>
import {
addStoreTurnTreatment,
staffPage,
organizations,
} from "@/api/storeManage.js";
import { storeMemberOne, couAccountList } from "@/api/eashier.js";
import member from "@/components/member/index";
export default {
components: { member },
data() {
return {
dialogFormVisible: false, //弹窗开关
listLoading: false, //list加载提示开启动画
elementLoadingText: "加载中...", //list加载提示文字
title: "", //弹窗标题
form: {}, //主对象
list: [], //主数组
selection: [], //选中的会员列表
queryForm: {
pageNum: 1,
pageSize: 10,
},
options: [], //下拉门店列表
storeList: [], //门店列表
};
},
methods: {
//转出门店改变
changeOut(e) {
this.options.forEach((item) => {
if (item.storeNum == e) {
this.form.storesName = item.storeName;
this.form.storesId = item.id;
}
});
this.getData();
},
//转入门店改变
changeIn(e, row) {
let form = { ...row };
this.storeList.forEach((item) => {
if (item.storeName == e) {
form.storeName = item.storeName;
form.storeId = item.id;
form.storeNum = item.storeNum;
}
});
this.list.splice(row.index, 1, form);
this.getCurrentRow(row);
this.$nextTick(() => {
this.$refs["list"].toggleRowSelection(this.list[row.index], true);
});
console.log(this.selection);
},
//删除下拉选择
clear(row) {
this.$nextTick(() => {
this.$refs["list"].toggleRowSelection(this.list[row.index], false);
});
},
//打开会员弹窗
openMember() {
this.$refs.member.show();
},
//会员弹窗返回值
memberData(v) {
this.form.mobilePhone = v.mobilePhone;
this.query();
},
//查询会员信息
query() {
storeMemberOne({
mobilePhone: this.form.mobilePhone,
storeId: sessionStorage.getItem("parentId"),
}).then((res) => {
if (res.code == "000000") {
this.form.memberId = res.data.id;
this.form.memberNum = res.data.memberNum;
this.form.memberName = res.data.memberName;
this.form.mobilePhone = res.data.mobilePhone;
this.getCourse();
} else {
this.$alert(res.message, "查询会员", {
confirmButtonText: "确定",
confirmButtonClass: "confirmbtnFalses",
type: "warning",
center: true,
callback: (action) => {},
});
}
});
},
//获取会员疗程卡包
getCourse() {
var ids = {
memberId: this.form.memberId,
storeId: this.form.storesId,
};
couAccountList(ids).then((res) => {
if (res.code == "000000") {
res.rows.forEach((item) => {
item.storeNum = null;
item.storeName = null;
item.courseAccountId = item.id;
});
this.list = res.rows;
} else {
this.$alert(res.message, "查询会员疗程", {
confirmButtonText: "确定",
confirmButtonClass: "confirmbtnFalses",
type: "warning",
center: true,
callback: (action) => {},
});
}
});
},
//多选方法
getCurrentRow(row) {
this.$refs["list"].toggleRowSelection(row);
},
//列表返回方法
rowName({ row, rowIndex }) {
row.index = rowIndex;
},
//多选变动方法
handleSelectionChange(selection) {
this.selection = selection;
},
//组件传值
show(row) {
this.title = "员工转出门店";
this.dialogFormVisible = true;
this.getData();
},
//获取数据
async getData() {
let parentId = JSON.parse(sessionStorage.getItem("storeInfo")).id;
organizations({ pageSize: 999 }).then((res) => {
if (res.code == "000000") {
let list = [];
res.rows.forEach((item) => {
if (this.form.storesNum != item.storeNum) {
list.push(item);
}
});
this.options = res.rows;
this.storeList = list;
} else {
this.$alert(res.message, "获取门店信息", {
confirmButtonText: "确定",
confirmButtonClass: "confirmbtnFalses",
type: "warning",
center: true,
callback: (action) => {},
});
}
});
},
//确定返回方法
confirm() {
this.selection.forEach((item) => {
item.storesId = this.form.storesId;
item.storesName = this.form.storesName;
item.storesNum = this.form.storesNum;
item.memberId = this.form.memberId;
item.memberNum = this.form.memberNum;
item.memberName = this.form.memberName;
item.mobilePhone = this.form.mobilePhone;
});
addStoreTurnTreatment(this.selection).then((res) => {
if (res.code == "000000") {
this.dialogFormVisible = false;
this.$emit("editData");
} else {
this.$alert(res.message, "提示", {
confirmButtonText: "确定",
confirmButtonClass: "confirmbtnFalses",
type: "warning",
center: true,
callback: (action) => {},
});
}
});
},
},
};
</script>
<style>
</style>