<template>
|
<div class="contentBox">
|
<bookList :title="title" @getList="getBookList" />
|
<div class="classBox">
|
<div class="ruleBox" v-html="ruleText"></div>
|
<div class="classCondition">授课情况</div>
|
<div class="formBox">
|
<el-form ref="form" :model="form" :rules="rules" label-width="200px">
|
<el-form-item
|
:label="item.label"
|
:prop="item.prop"
|
v-for="(item, index) in formObj.formItem"
|
:key="index"
|
>
|
<el-input
|
v-model="form[item.prop]"
|
:placeholder="item.placeholder"
|
></el-input>
|
</el-form-item>
|
</el-form>
|
</div>
|
<div class="classCondition">
|
<div>收货人信息</div>
|
<div class="addAddress" @click="addAddress">+ 新增收货地址</div>
|
</div>
|
<div class="tableBox">
|
<el-table
|
:data="tableData"
|
style="width: 100%"
|
v-loading="loading"
|
highlight-current-row
|
@current-change="handleCurrentChange"
|
ref="singleTable"
|
>
|
<el-table-column
|
:prop="item.prop"
|
:label="item.label"
|
v-for="(item, index) in column"
|
:key="index"
|
>
|
<template slot-scope="scope">
|
<span>{{ scope.row[item.prop] }}</span>
|
<span
|
style="color: #ccc; margin-left: 40px"
|
v-if="item.prop == 'address' && scope.row.ifdefalut"
|
>默认地址</span
|
>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<div class="btnBox" v-loading="subloading">
|
<el-button @click="$router.go(-1)">取消</el-button>
|
<el-button type="primary" @click="submit">提交</el-button>
|
</div>
|
</div>
|
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="30%">
|
<el-form
|
ref="addressForm"
|
:model="editForm"
|
:rules="addressRules"
|
label-width="80px"
|
>
|
<el-form-item
|
:label="item.label"
|
:prop="item.prop"
|
v-for="(item, index) in editFormObj.formItem"
|
:key="index"
|
>
|
<el-input
|
v-if="!item.type"
|
v-model="editForm[item.prop]"
|
:placeholder="item.placeholder"
|
></el-input>
|
<el-cascader
|
v-if="item.type"
|
size="large"
|
:options="options"
|
v-model="selectedOptions"
|
@change="handleChange"
|
style="width: 100%"
|
>
|
</el-cascader>
|
</el-form-item>
|
</el-form>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
<el-button type="primary" @click="save" v-loading="saveloading"
|
>确 定</el-button
|
>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import bookList from "@/components/detail/bookList.vue";
|
import { CodeToText, TextToCode, regionData } from "element-china-area-data";
|
import { mapState } from "vuex";
|
|
export default {
|
components: {
|
bookList,
|
},
|
data() {
|
let checkPhone = (rule, value, callback) => {
|
let reg =
|
/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
|
if (!reg.test(value)) {
|
callback(new Error("请输入正确的11位手机号"));
|
} else {
|
callback();
|
}
|
};
|
|
return {
|
ruleText: "",
|
subloading: false,
|
saveloading: false,
|
totalCount: 0,
|
selectedOptions: [],
|
options: regionData,
|
dialogTitle: "新增收货人信息",
|
dialogVisible: false,
|
loading: false,
|
tableData: [],
|
column: [
|
{
|
prop: "name",
|
label: "姓名",
|
},
|
{
|
prop: "tel",
|
label: "联系电话",
|
},
|
{
|
prop: "city",
|
label: "地址",
|
},
|
{
|
prop: "address",
|
label: "详细地址",
|
},
|
],
|
title: "中国农业大学出版社样书申请单（纸质）",
|
editForm: {
|
name: "",
|
tel: "",
|
city: "",
|
ifdefalut: false,
|
address: "",
|
},
|
editFormObj: {
|
formItem: [
|
{
|
label: "姓名",
|
prop: "name",
|
placeholder: "请输入姓名",
|
},
|
{
|
label: "联系电话",
|
prop: "tel",
|
placeholder: "请输入联系电话",
|
},
|
{
|
type: "address",
|
label: "地址",
|
prop: "city",
|
placeholder: "请输入地址",
|
},
|
{
|
label: "详细地址",
|
prop: "address",
|
placeholder: "请输入详细地址",
|
},
|
],
|
},
|
form: {},
|
formObj: {
|
formItem: [
|
{
|
label: "课程名称：",
|
prop: "courseName",
|
placeholder: "请输入课程名称",
|
},
|
{
|
label: "学生层次：",
|
prop: "studentLevel",
|
placeholder: "请输入学生层次",
|
},
|
{
|
label: "学生人数/年：",
|
prop: "studentsNumber",
|
placeholder: "请输入学生人数/年",
|
},
|
{
|
label: "现在使用教材所属出版社：",
|
prop: "teachingMaterialPress",
|
placeholder: "请输入现在使用教材所属出版社",
|
},
|
{
|
label: "所用教材：",
|
prop: "teachingMaterials",
|
placeholder: "请输入所用教材",
|
},
|
],
|
},
|
|
addressRules: {
|
name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
|
tel: [
|
{
|
required: true,
|
type: "number",
|
validator: checkPhone,
|
trigger: "blur",
|
},
|
],
|
address: [
|
{ required: true, message: "请输入详细地址", trigger: "blur" },
|
],
|
city: [{ required: true, message: "请选择所在城市", trigger: "blur" }],
|
},
|
rules: {
|
courseName: [
|
{ required: true, message: "请输入课程名称", trigger: "blur" },
|
],
|
studentLevel: [
|
{ required: true, message: "请输入学生层次", trigger: "blur" },
|
],
|
studentsNumber: [
|
{ required: true, message: "请输入学生人数/年", trigger: "blur" },
|
],
|
teachingMaterialPress: [
|
{
|
required: true,
|
message: "请输入现在使用教材所属出版社",
|
trigger: "blur",
|
},
|
],
|
teachingMaterials: [
|
{ required: true, message: "请输入所用教材", trigger: "blur" },
|
],
|
},
|
workInfo: [],
|
temp_defalutAddress: false,
|
bookList: [],
|
currentAddress: null,
|
};
|
},
|
created() {
|
this.getAddress();
|
this.getTicketRes();
|
this.getType();
|
this.getTeachingSituation();
|
this.getExplainType();
|
},
|
computed: {
|
...mapState(["userInfo"]),
|
},
|
methods: {
|
//获取纸质书说明
|
getExplainType() {
|
const data = {
|
refCodes: ["paperSampleApplication"],
|
};
|
this.MG.resource.getCmsTypeByRefCode(data).then((res) => {
|
try {
|
this.ruleText = res[0].description;
|
} catch (e) {
|
this.ruleText = "暂无规则";
|
}
|
});
|
},
|
//
|
getType() {
|
const data = {
|
refCodes: ["paperSampleApplication"],
|
roleId: this.userInfo.roleId,
|
};
|
this.MG.resource.getCmsTypeByRefCode(data).then((res) => {
|
this.workInfo = res[0].cmsTypeLinks[0].children;
|
});
|
},
|
getTeachingSituation() {
|
this.MG.identity
|
.getUserKey({
|
domain: "teachingSituation",
|
keys: [this.userInfo.roleId + ""],
|
})
|
.then((res) => {
|
if (res.length > 0) {
|
this.form = JSON.parse(res[0].value);
|
}
|
});
|
},
|
//提交样书申请
|
submit() {
|
let that = this;
|
if (this.totalCount == 0) {
|
this.$message({
|
showClose: true,
|
message: "申请次数已用完！",
|
type: "error",
|
});
|
return;
|
}
|
this.$refs.form.validate((valid) => {
|
if (valid) {
|
let defalutAddress = {};
|
if (this.currentAddress) {
|
defalutAddress = this.currentAddress;
|
} else {
|
this.tableData.forEach((item, index) => {
|
if (item.ifdefalut) return (defalutAddress = item);
|
});
|
}
|
if (!defalutAddress.city) {
|
this.$message({
|
showClose: true,
|
message: "请选择地址！",
|
type: "error",
|
});
|
return;
|
}
|
defalutAddress = { ...this.form, ...defalutAddress };
|
defalutAddress.phone = defalutAddress.tel;
|
defalutAddress.user = defalutAddress.name;
|
delete defalutAddress.tel;
|
delete defalutAddress.name;
|
defalutAddress = this.tool.worksDataBytool(
|
this.workInfo,
|
defalutAddress
|
);
|
let checkedBook = [];
|
let chenckIndex = [];
|
this.bookList.forEach((item, index) => {
|
if (item.checked) {
|
checkedBook.push(item);
|
chenckIndex.push(index);
|
}
|
});
|
if (checkedBook.length == 0) {
|
this.$message({
|
showClose: true,
|
message: "请选择书籍！",
|
type: "error",
|
});
|
return;
|
}
|
if (checkedBook.length > 3) {
|
this.$message({
|
showClose: true,
|
message: "单次申请书籍不能超过三本！",
|
type: "error",
|
});
|
return;
|
}
|
const data = {
|
topicIdOrRefCode: "applyEntityBook",
|
name: "纸质样书申请",
|
content: JSON.stringify(checkedBook),
|
state: "WaitAudit",
|
type: "applyForPbook",
|
cmsTypeRefCode: "paperSampleApplication",
|
newDataListRequest: defalutAddress,
|
};
|
this.subloading = true;
|
|
this.MG.ugc.newTopicMessage(data).then((res) => {
|
console.log(this.form, "setUserKey");
|
this.MG.identity
|
.setUserKey({
|
setKeyRequests: [
|
{
|
domain: "teachingSituation",
|
key: this.userInfo.roleId + "",
|
value: JSON.stringify(this.form),
|
},
|
],
|
})
|
.then((res) => {
|
console.log(res);
|
});
|
this.MG.app
|
.useTicket({
|
ticketRefCodeOrGuid: "paperSampleBookapplyNum",
|
roleId: this.userInfo.roleId,
|
refType: "applyEntityBook",
|
})
|
.then((aRes) => {
|
this.subloading = false;
|
|
this.$message({
|
message: "申请成功！",
|
type: "success",
|
});
|
chenckIndex = chenckIndex.reverse();
|
chenckIndex.forEach((item) => {
|
this.$store.commit("deletePbookList", item);
|
});
|
that.$router.push({
|
path: "/personalCenter",
|
query: {
|
tabsSelected: 6,
|
},
|
});
|
});
|
});
|
}
|
});
|
},
|
|
//选择地址
|
handleCurrentChange(val) {
|
console.log(val);
|
this.currentAddress = val;
|
},
|
|
//设置默认选中地址
|
setCurrent(row) {
|
this.$refs.singleTable.setCurrentRow(row);
|
},
|
|
//获取剩余申请次数
|
getTicketRes() {
|
this.MG.app
|
.getTicketResult({
|
ticketRefCodeOrGuid: "paperSampleBookapplyNum",
|
roleId: this.userInfo.roleId,
|
})
|
.then((res) => {
|
this.totalCount = res.totalCount - res.usedCount;
|
});
|
},
|
|
//更改默认地址
|
setAddress(row) {
|
this.tableData.forEach((item) => {
|
item.ifdefalut = false;
|
});
|
this.editForm = JSON.parse(JSON.stringify(row));
|
row.ifdefalut = true;
|
this.temp_defalutAddress = true;
|
this.save();
|
},
|
|
//编辑收货人信息
|
handleClick(row) {
|
this.dialogTitle = "编辑收货人信息";
|
this.dialogVisible = true;
|
this.editForm = JSON.parse(JSON.stringify(row));
|
let city = this.editForm.city.split("/");
|
if (city[0] == city[1]) {
|
city[1] = "市辖区";
|
}
|
this.selectedOptions.push(TextToCode[city[0]].code);
|
this.selectedOptions.push(TextToCode[city[0]][city[1]].code);
|
this.selectedOptions.push(TextToCode[city[0]][city[1]][city[2]].code);
|
},
|
|
//新增收货人信息
|
addAddress() {
|
this.dialogTitle = "新增收货人信息";
|
this.dialogVisible = true;
|
for (let k in this.editForm) {
|
if (k !== "ifdefalut") {
|
this.editForm[k] = "";
|
}
|
}
|
this.selectedOptions = [];
|
},
|
|
// 获取所有地址
|
getAddress(isAdd) {
|
this.loading = true;
|
this.MG.identity.getCurrentAppUser().then((res) => {
|
this.loading = false;
|
let storeInfoList = res.infoList.find((i) => i.type == "Address");
|
this.tableData = [];
|
if (storeInfoList && storeInfoList.data) {
|
if (!Array.isArray(JSON.parse(storeInfoList.data))) {
|
this.tableData.unshift(JSON.parse(storeInfoList.data));
|
} else {
|
this.tableData = JSON.parse(storeInfoList.data)
|
? JSON.parse(storeInfoList.data)
|
: [];
|
}
|
this.tableData.forEach((item, index) => {
|
if (item.ifdefalut) {
|
this.setCurrent(item);
|
}
|
});
|
this.tableData = this.tableData.reverse();
|
if (isAdd) {
|
this.setCurrent(this.tableData.at(0));
|
}
|
} else {
|
// 用户为第一次添加地址，则当前所选地址为默认地址
|
this.addressItem.ifdefalut = true;
|
}
|
});
|
},
|
|
//保存收货人地址
|
save() {
|
if (this.temp_defalutAddress) {
|
this.addressSave();
|
} else {
|
this.saveloading = true;
|
this.$refs.addressForm.validate((valid) => {
|
if (valid) {
|
if (this.editForm.id) {
|
this.tableData.forEach((item, index) => {
|
if (item.id == this.editForm.id) {
|
this.temp_index = index;
|
}
|
});
|
this.tableData[this.temp_index] = { ...this.editForm };
|
} else {
|
this.editForm.id = this.tableData.length + 1;
|
this.tableData.push(this.editForm);
|
}
|
}
|
});
|
this.addressSave();
|
}
|
},
|
|
addressSave() {
|
const userInfo = {
|
requests: [
|
{
|
data: JSON.stringify(this.tableData),
|
name: "地址管理",
|
type: "Address",
|
},
|
],
|
};
|
this.MG.identity.setAppUserInfo(userInfo).then((res) => {
|
this.loading = false;
|
if (res) {
|
this.$message({
|
showClose: true,
|
message: "成功",
|
type: "success",
|
});
|
this.dialogVisible = false;
|
this.getAddress(true);
|
} else {
|
this.$message({
|
showClose: true,
|
message: "失败，请稍后重试",
|
type: "error",
|
});
|
}
|
this.saveloading = false;
|
});
|
},
|
|
//处理级联数据
|
handleChange(city) {
|
let cityStr =
|
CodeToText[city[0]] +
|
"/" +
|
CodeToText[city[1]] +
|
"/" +
|
CodeToText[city[2]];
|
let cityArr = cityStr.split("/");
|
if (cityArr[1] == "市辖区") {
|
cityArr[1] = cityArr[0];
|
}
|
this.editForm.city = cityArr.join("/");
|
},
|
|
//获取样书列表
|
getBookList(val) {
|
this.bookList = [];
|
val.forEach((item) => {
|
const templateObj = {
|
id: item.id,
|
title: item.name,
|
icon: item.icon,
|
author: item.caupress_author,
|
defaultSaleMethodId: item.defaultSaleMethodId,
|
isbn: item.caupress_ISBN,
|
price: item.price,
|
checked: item.checked ? item.checked : false,
|
cmsPath: item.rootCmsItemId,
|
};
|
this.bookList.push(templateObj);
|
});
|
},
|
|
//删除地址
|
// 删除地址
|
deleteAddress(id) {
|
let that = this;
|
this.$confirm("是否移除该地址", "提示", {
|
type: "warning",
|
})
|
.then(() => {
|
let basicInfo = "";
|
that.tableData.forEach((item) => {
|
if (item.id == id) {
|
basicInfo = item;
|
}
|
});
|
const userInfo = {
|
requests: [
|
{
|
data: JSON.stringify(basicInfo),
|
name: "地址管理",
|
type: "Address",
|
},
|
],
|
};
|
this.MG.identity.setAppUserInfo(userInfo).then((res) => {
|
if (res) {
|
this.$message({
|
type: "success",
|
message: "地址移除成功",
|
});
|
this.isAdd = false;
|
// 重新获取数据
|
this.getAddress();
|
}
|
});
|
})
|
.catch(() => {});
|
},
|
},
|
};
|
</script>
|
|
<style scoped>
|
.classBox {
|
width: 100%;
|
height: 1000px;
|
background-color: #fff;
|
padding: 0 40px;
|
/* display: flex;
|
justify-content: center; */
|
box-sizing: border-box;
|
}
|
.ruleBox {
|
/* text-align: center; */
|
padding-left: 20px;
|
background-color: #f2f7f4;
|
/* width: 100%; */
|
/* height: 50px; */
|
line-height: 40px;
|
border-radius: 5px;
|
margin: 0 auto;
|
}
|
.classCondition {
|
display: flex;
|
justify-content: space-between;
|
margin-top: 50px;
|
font-size: 16px;
|
font-weight: 700;
|
height: 50px;
|
line-height: 50px;
|
border-bottom: 1px solid #dbdbdb;
|
color: #333;
|
}
|
.formBox {
|
margin-top: 30px;
|
padding: 0 100px;
|
}
|
.tableBox {
|
margin-top: 20px;
|
max-height: 300px;
|
overflow-y: auto;
|
}
|
.addAddress {
|
font-size: 14px;
|
color: #009341;
|
cursor: pointer;
|
}
|
.btnBox {
|
margin-top: 30px;
|
float: right;
|
}
|
</style>
|
<style>
|
.el-table tbody tr:hover > td {
|
background-color: #e7f3ec !important;
|
}
|
</style>
|
