电子面单前端页面
chc
parent
32336decc6
commit
9ce3a5e916
|
|
@ -10,6 +10,9 @@
|
|||
<FormItem label="reqURL" prop="reqURL">
|
||||
<Input v-model="formValidate.reqURL" />
|
||||
</FormItem>
|
||||
<FormItem label="电子面单URL" prop="sheetReqURL">
|
||||
<Input v-model="formValidate.sheetReqURL" />
|
||||
</FormItem>
|
||||
<div class="label-btns">
|
||||
<Button type="primary" @click="submit('formValidate')">保存</Button>
|
||||
|
||||
|
|
@ -24,7 +27,7 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
ruleValidate: {}, // 验证规则
|
||||
formValidate: { ebusinessID: "", reqURL: "", appKey: "" }, // 表单数据
|
||||
formValidate: { ebusinessID: "", reqURL: "", appKey: "" ,sheetReqURL: "" ,}, // 表单数据
|
||||
};
|
||||
},
|
||||
props: ["res",'type'],
|
||||
|
|
|
|||
|
|
@ -41,6 +41,10 @@ export const getBillDetail = (id, params) => {
|
|||
export const getLogistics = (id, params) => {
|
||||
return getRequest(`/other/logistics`, params)
|
||||
}
|
||||
//返回信息
|
||||
export const getIsCheck =(logisticsId) =>{
|
||||
return getRequest(`other/logistics/${logisticsId}/getStoreLogistics`)
|
||||
}
|
||||
|
||||
// 开启物流公司
|
||||
export const logisticsChecked = (id, params) => {
|
||||
|
|
@ -117,4 +121,9 @@ export const editShipTemplate = (id, params, headers) => {
|
|||
return putRequest(`/setting/freightTemplate/${id}`, params, headers)
|
||||
}
|
||||
|
||||
//修改电子面单等信息
|
||||
export const editChecked = (logisticsId,params) => {
|
||||
return putRequest(`/other/logistics/${logisticsId}/updateStoreLogistics`,params)
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -9,154 +9,338 @@
|
|||
ref="table"
|
||||
></Table>
|
||||
</Card>
|
||||
<Modal v-model="openModal" :title="openModalTitle" @on-ok="submit">
|
||||
<h3 style="color: #ff3c2a; margin-bottom: 10px">是否需要电子面单</h3>
|
||||
<RadioGroup
|
||||
v-model="faceSheetForm.faceSheetFlag"
|
||||
style="margin-bottom: 20px"
|
||||
@on-change="getfaceSheetFlag($event)"
|
||||
>
|
||||
<Radio :label="true">
|
||||
<span>需要</span>
|
||||
</Radio>
|
||||
<Radio :label="false">
|
||||
<span>不需要</span>
|
||||
</Radio>
|
||||
</RadioGroup>
|
||||
<Card v-if="onpenText" class="modalStyle">
|
||||
<h3 style="color: #ff3c2a; margin-bottom: 10px">请输入详细信息</h3>
|
||||
<Form ref="formValidate" :label-width="150" label-position="right" :model="faceSheetForm" :rules="ruleValidate">
|
||||
<FormItem label="customerName" prop="customerName">
|
||||
<Input
|
||||
v-model="faceSheetForm.customerName"
|
||||
type="text"
|
||||
class="faceSheetInput"
|
||||
></Input
|
||||
></FormItem>
|
||||
<FormItem label="customerPwd" prop="customerPwd">
|
||||
<Input
|
||||
v-model="faceSheetForm.customerPwd"
|
||||
type="text"
|
||||
class="faceSheetInput"
|
||||
></Input>
|
||||
</FormItem>
|
||||
<FormItem label="customerPwd" prop="monthCode">
|
||||
<Input
|
||||
v-model="faceSheetForm.monthCode"
|
||||
type="text"
|
||||
class="faceSheetInput"
|
||||
></Input
|
||||
></FormItem>
|
||||
<FormItem label="customerPwd" prop="sendSite">
|
||||
<Input
|
||||
v-model="faceSheetForm.sendSite"
|
||||
type="text"
|
||||
class="faceSheetInput"
|
||||
></Input
|
||||
></FormItem>
|
||||
<FormItem label="customerPwd" prop="sendStaff">
|
||||
<Input
|
||||
v-model="faceSheetForm.sendStaff"
|
||||
type="text"
|
||||
class="faceSheetInput"
|
||||
></Input
|
||||
></FormItem>
|
||||
<FormItem label="支付方式" prop="payType">
|
||||
<Select
|
||||
v-model="faceSheetForm.payType"
|
||||
class="faceSheetInput">
|
||||
<Option value="1">现付</Option>
|
||||
<Option value="2">到付</Option>
|
||||
<Option value="3">月结</Option>
|
||||
<Option value="4">第三方支付(仅SF支持)</Option>
|
||||
</Select
|
||||
></FormItem>
|
||||
<FormItem label="快递类型" prop="expType">
|
||||
<Input
|
||||
v-model="faceSheetForm.expType"
|
||||
type="text"
|
||||
class="faceSheetInput"/>
|
||||
</FormItem>
|
||||
<div style="width:100%;text-align:center;">
|
||||
<a style="padding-right: 20px" @click="frontDownload('use')">使用说明</a>
|
||||
<a @click="frontDownload('type')">快递类型</a>
|
||||
</div>
|
||||
</Form>
|
||||
</Card>
|
||||
<br/>
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as API_Shop from "@/api/shops";
|
||||
import * as API_Shop from "@/api/shops";
|
||||
|
||||
export default {
|
||||
name: "logistics",
|
||||
data() {
|
||||
return {
|
||||
loading: true, // 表单加载状态
|
||||
searchForm: {
|
||||
// 搜索框初始化对象
|
||||
pageNumber: 1, // 当前页数
|
||||
pageSize: 10, // 页面大小
|
||||
sort: "createTime", // 默认排序字段
|
||||
order: "desc", // 默认排序方式
|
||||
export default {
|
||||
name: "logistics",
|
||||
data() {
|
||||
return {
|
||||
openModal: true,
|
||||
loading: true, // 表单加载状态
|
||||
searchForm: {
|
||||
// 搜索框初始化对象
|
||||
pageNumber: 1, // 当前页数
|
||||
pageSize: 10, // 页面大小
|
||||
sort: "createTime", // 默认排序字段
|
||||
order: "desc", // 默认排序方式
|
||||
},
|
||||
openModalTitle: '开启信息',
|
||||
ruleValidate: {
|
||||
customerName: [{ required: true, message: "请填写必填项" ,trigger: "blur" }],
|
||||
payType: [{ required: true, message: "请填写必填项" ,trigger: "change" }],
|
||||
expType: [{ required: true, message: "请填写必填项" ,trigger: "blur" }],
|
||||
customerPwd: [{ required: true, message: "请填写必填项" ,trigger: "blur" }],
|
||||
monthCode: [{ required: true, message: "请填写必填项" ,trigger: "blur" }],
|
||||
sendSite: [{ required: true, message: "请填写必填项" ,trigger: "blur" }],
|
||||
sendStaff: [{ required: true, message: "请填写必填项" ,trigger: "blur" }],
|
||||
|
||||
},
|
||||
faceSheetForm: {
|
||||
faceSheetFlag: false,
|
||||
customerName: "",
|
||||
payType: '1',
|
||||
expType: '1',
|
||||
customerPwd: "",
|
||||
monthCode: "",
|
||||
sendSite: "",
|
||||
sendStaff: "",
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
title: "物流公司",
|
||||
key: "name",
|
||||
minWidth: 120,
|
||||
sortable: false,
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
title: "物流公司",
|
||||
key: "name",
|
||||
minWidth: 120,
|
||||
sortable: false,
|
||||
},
|
||||
{
|
||||
title: "状态",
|
||||
key: "selected",
|
||||
minWidth: 120,
|
||||
sortable: true,
|
||||
render: (h, params) => {
|
||||
if(params.row.selected === null || params.row.selected === ""){
|
||||
return h("div", [h("tag", {props: {color: "volcano"}}, "关闭")]);
|
||||
}else{
|
||||
return h("div", [h("tag", {props: {color: "green"}}, "开启")]);
|
||||
}
|
||||
{
|
||||
title: "状态",
|
||||
key: "selected",
|
||||
minWidth: 120,
|
||||
sortable: true,
|
||||
render: (h, params) => {
|
||||
if (params.row.selected === null || params.row.selected === "") {
|
||||
return h("div", [h("tag", {props: {color: "volcano"}}, "关闭")]);
|
||||
} else {
|
||||
return h("div", [h("tag", {props: {color: "green"}}, "开启")]);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
key: "action",
|
||||
align: "center",
|
||||
width: 200,
|
||||
render: (h, params) => {
|
||||
if(params.row.selected === null){
|
||||
return h("div", [
|
||||
h(
|
||||
"Button",
|
||||
{
|
||||
props: {
|
||||
type: "success",
|
||||
size: "small",
|
||||
},
|
||||
style: {
|
||||
marginRight: "5px",
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.open(params.row);
|
||||
},
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
key: "action",
|
||||
align: "center",
|
||||
width: 200,
|
||||
render: (h, params) => {
|
||||
if (params.row.selected === null) {
|
||||
return h("div", [
|
||||
h(
|
||||
"Button",
|
||||
{
|
||||
props: {
|
||||
type: "success",
|
||||
size: "small",
|
||||
},
|
||||
style: {
|
||||
marginRight: "5px",
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.open(params.row);
|
||||
},
|
||||
},
|
||||
"开启"
|
||||
),
|
||||
]);
|
||||
}else{
|
||||
return h("div", [
|
||||
h(
|
||||
"Button",
|
||||
{
|
||||
props: {
|
||||
type: "error",
|
||||
size: "small",
|
||||
},
|
||||
style: {
|
||||
marginRight: "5px",
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.close(params.row);
|
||||
},
|
||||
},
|
||||
"开启"
|
||||
),
|
||||
]);
|
||||
} else {
|
||||
return h("div", [
|
||||
h(
|
||||
"Button",
|
||||
{
|
||||
props: {
|
||||
type: "error",
|
||||
size: "small",
|
||||
},
|
||||
style: {
|
||||
marginRight: "5px",
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.close(params.row);
|
||||
},
|
||||
},
|
||||
"关闭"
|
||||
),
|
||||
]);
|
||||
}
|
||||
},
|
||||
"关闭"
|
||||
),
|
||||
h(
|
||||
"Button",
|
||||
{
|
||||
props: {
|
||||
type: "info",
|
||||
size: "small",
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.getFaceSheetInfo(params.row);
|
||||
},
|
||||
},
|
||||
},
|
||||
"修改"
|
||||
),
|
||||
]);
|
||||
}
|
||||
|
||||
},
|
||||
},
|
||||
],
|
||||
data: [], // 表单数据
|
||||
};
|
||||
},
|
||||
],
|
||||
data: [], // 表单数据
|
||||
onpenText: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
//获取状态
|
||||
getfaceSheetFlag(e) {
|
||||
console.log(e);
|
||||
if (e === true) {
|
||||
console.log("打开");
|
||||
this.onpenText = true;
|
||||
} else {
|
||||
console.log("关闭");
|
||||
this.onpenText = false;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 初始化数据
|
||||
init() {
|
||||
this.getDataList();
|
||||
},
|
||||
// 获取数据
|
||||
getDataList() {
|
||||
this.loading = true;
|
||||
API_Shop.getLogistics().then((res) => {
|
||||
this.loading = false;
|
||||
if (res.success) {
|
||||
this.data = res.result;
|
||||
}
|
||||
});
|
||||
// 初始化数据
|
||||
init() {
|
||||
this.getDataList();
|
||||
},
|
||||
// 获取数据
|
||||
getDataList() {
|
||||
this.loading = true;
|
||||
API_Shop.getLogistics().then((res) => {
|
||||
this.loading = false;
|
||||
},
|
||||
// 开启
|
||||
open(v) {
|
||||
this.$Modal.confirm({
|
||||
title: "确认开启",
|
||||
// 记得确认修改此处
|
||||
content: "您确认开启此物流公司?",
|
||||
loading: true,
|
||||
onOk: () => {
|
||||
API_Shop.logisticsChecked(v.id).then((res) => {
|
||||
this.$Modal.remove();
|
||||
if (res.success) {
|
||||
this.$Message.success("物流公司开启成功");
|
||||
this.init();
|
||||
}
|
||||
});
|
||||
if (res.success) {
|
||||
this.data = res.result;
|
||||
}
|
||||
});
|
||||
this.loading = false;
|
||||
},
|
||||
// 开启
|
||||
open(v) {
|
||||
this.modalTitle = v;
|
||||
this.openModal = true;
|
||||
this.searchForm.faceSheetFlag = "false"; //开弹框 等于v
|
||||
if (this.searchForm.faceSheetFlag == "true") {
|
||||
this.onpenText = true;
|
||||
} else {
|
||||
this.onpenText = false;
|
||||
}
|
||||
},
|
||||
//修改
|
||||
getFaceSheetInfo(v) {
|
||||
this.logisticsId = v.logisticsId;
|
||||
this.openModalTitle = '修改信息';
|
||||
API_Shop.getIsCheck(this.logisticsId).then((res) => {
|
||||
if (res.success) {
|
||||
// this.searchForm = res.result.recordes;
|
||||
this.faceSheetForm.faceSheetFlag = String(res.result.faceSheetFlag); //开弹框 等于v
|
||||
if (this.faceSheetForm.faceSheetFlag == "true") {
|
||||
this.onpenText = true;
|
||||
} else {
|
||||
this.onpenText = false;
|
||||
}
|
||||
this.faceSheetForm.customerName = res.result.customerName;
|
||||
this.faceSheetForm.customerPwd = res.result.customerPwd;
|
||||
this.faceSheetForm.monthCode = res.result.monthCode;
|
||||
this.faceSheetForm.sendSite = res.result.sendSite;
|
||||
this.faceSheetForm.sendStaff = res.result.sendStaff;
|
||||
}
|
||||
});
|
||||
},
|
||||
frontDownload(val) {
|
||||
var a = document.createElement("a"); //创建一个<a></a>标签
|
||||
//根据点击按钮来下载不同文件
|
||||
if (val === 'use') {
|
||||
a.href = "static/open.xlsx"; // 给a标签的href属性值加上地址，注意，这里是绝对路径，不用加 点.
|
||||
a.download = "使用说明.xlsx"; //设置下载文件文件名，这里加上.xlsx指定文件类型，pdf文件就指定.fpd即可
|
||||
} else if (val === 'type') {
|
||||
a.href = "static/logisticsType.xlsx"; // 给a标签的href属性值加上地址，注意，这里是绝对路径，不用加 点.
|
||||
a.download = "快递类型.xlsx"; //设置下载文件文件名，这里加上.xlsx指定文件类型，pdf文件就指定.fpd即可
|
||||
}
|
||||
a.style.display = "none"; // 障眼法藏起来a标签
|
||||
document.body.appendChild(a); // 将a标签追加到文档对象中
|
||||
a.click(); // 模拟点击了a标签，会触发a标签的href的读取，浏览器就会自动下载了
|
||||
a.remove(); // 一次性的，用完就删除a标签
|
||||
},
|
||||
|
||||
submit() {
|
||||
if (v.selected === null || v.selected === "") {
|
||||
|
||||
API_Shop.logisticsChecked(
|
||||
this.modalTitle.logisticsId,
|
||||
this.faceSheetForm
|
||||
).then((res) => {
|
||||
this.openModal = false;
|
||||
this.$Modal.remove();
|
||||
if (res.success) {
|
||||
this.$Message.success("物流公司开启成功");
|
||||
this.init();
|
||||
}
|
||||
});
|
||||
},
|
||||
// 关闭
|
||||
close(v){
|
||||
this.$Modal.confirm({
|
||||
title: "确认关闭",
|
||||
content: "您确认关闭此物流公司?",
|
||||
loading: true,
|
||||
onOk: () => {
|
||||
API_Shop.logisticsUnChecked(v.selected).then((res) => {
|
||||
this.$Modal.remove();
|
||||
if (res.success) {
|
||||
this.$Message.success("物流公司关闭成功");
|
||||
this.init();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
API_Shop.editChecked(this.logisticsId, this.faceSheetForm).then((res) => {
|
||||
if (res.success) {
|
||||
this.$Message.success("修改成功");
|
||||
this.init();
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
};
|
||||
// 关闭
|
||||
close(v) {
|
||||
this.$Modal.confirm({
|
||||
title: "确认关闭",
|
||||
content: "您确认关闭此物流公司?",
|
||||
loading: true,
|
||||
onOk: () => {
|
||||
API_Shop.logisticsUnChecked(v.selected).then((res) => {
|
||||
this.$Modal.remove();
|
||||
if (res.success) {
|
||||
this.$Message.success("物流公司关闭成功");
|
||||
this.init();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.faceSheetInput{
|
||||
width: 300px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue