Fedex / EcomWeb

Go to a project
Toggle navigation Toggle navigation pinning
zhanbo.xu
5a8460ea 1 parent 56ebc7af

feat: 开发模拟回执

Inline Side-by-side
Showing 4 changed files with 194 additions and 233 deletions
......@@ -3,7 +3,7 @@ import request from "@/utils/request";
// POST
// /mockReceipt/add
// 新增模拟回执
export function add(data) {
export function addInfo(data) {
return request({
url: "/bus-customer/mockReceipt/add",
method: "post",
......
<template>
<el-dialog
class="entryDialog classCUploadDialog"
:title="title"
title="新增模拟回执管理"
:visible.sync="outerVisible"
:show-close="false"
width="40%"
......@@ -21,51 +21,42 @@
>
<el-row :gutter="5">
<el-col :span="8">
<Formitem
label="监管场所经营人代码"
prop="operatorCode"
type="edit"
>
<el-input
<Formitem label="回执类型" prop="receiptType" type="edit">
<el-select
type="text"
class="inputShadow"
id="inputInner-edit-operatorCode"
resize="none"
v-model="formData.operatorCode"
id="inputInner--receiptType"
v-model="formData.receiptType"
clearable
filterable
placeholder=""
></el-input>
</Formitem>
</el-col>
<el-col :span="8">
<Formitem
label="监管场所经营人名称"
prop="operatorName"
type="edit"
@change="getOrderList"
>
<el-input
type="text"
class="inputShadow"
id="inputInner-edit-operatorName"
resize="none"
v-model="formData.operatorName"
clearable
placeholder=""
></el-input>
<el-option
v-for="item in receiptTypeList"
:key="item.value"
:label="item.itemChineseName"
:value="item.itemValue"
></el-option>
</el-select>
</Formitem>
</el-col>
<el-col :span="8">
<Formitem label="所属口岸" prop="portCode" type="edit">
<Formitem label="订单编号" prop="orderNo" type="edit">
<el-select
type="text"
id="inputInner--portCode"
v-model="formData.portCode"
id="inputInner--orderNo"
v-model="formData.orderNo"
multiple
:remote="true"
clearable
filterable
reserve-keyword
:remote-method="remoteMethod"
placeholder=""
@change="receiptXml"
>
<el-option
v-for="item in portCodeList"
v-for="item in orderNoList"
:key="item"
:label="item"
:value="item"
......@@ -73,50 +64,52 @@
</el-select>
</Formitem>
</el-col>
</el-row>
<el-row :gutter="5">
<el-col :span="8">
<Formitem label="监管场所代码" prop="loctNo" type="edit">
<el-input
<Formitem label="回执状态" prop="receiptStatus">
<el-select
type="text"
class="inputShadow"
id="inputInner-edit-loctNo"
resize="none"
v-model="formData.loctNo"
id="inputInner--receiptStatus"
v-model="formData.receiptStatus"
clearable
filterable
placeholder=""
></el-input>
@change="receiptXml"
>
<el-option
v-for="item in receiptStatusList"
:key="item.value"
:label="item.itemChineseName"
:value="item.itemValue"
></el-option>
</el-select>
</Formitem>
</el-col>
<el-col :span="8">
<Formitem
label="监管场所负责人"
prop="operatorPersonInCharge"
type="edit"
>
</el-row>
<el-row :gutter="5">
<el-col :span="24">
<!-- <Formitem label="回执文本" prop="receiptInfo" type="edit">
<el-input
type="text"
type="textarea"
:rows="4"
class="inputShadow"
id="inputInner-edit-operatorPersonInCharge"
id="inputInner-edit-receiptInfo"
resize="none"
v-model="formData.operatorPersonInCharge"
v-model="formData.receiptInfo"
clearable
placeholder=""
></el-input>
</Formitem>
</el-col>
<el-col :span="8">
<Formitem label="联系电话" prop="contactNumber" type="edit">
</Formitem> -->
<div class="textarea-text">
<div style="color: #777777; margin-bottom: 10px">回执文本</div>
<el-input
type="text"
type="textarea"
:rows="4"
class="inputShadow"
id="inputInner-edit-contactNumber"
resize="none"
v-model="formData.contactNumber"
clearable
placeholder=""
:readonly="true"
v-model="receiptInfo"
></el-input>
</Formitem>
</div>
</el-col>
</el-row>
</el-form>
......@@ -128,163 +121,142 @@
@click="submit"
>确 定</el-button
>
<el-button
class="entrySaveButton"
:disabled="loadings.uploadLoading"
@click="close"
>关 闭</el-button
>
<el-button class="entrySaveButton" @click="close">关 闭</el-button>
</div>
</el-dialog>
</template>
<script>
import {
addOperatorPlace,
updateOperatorPlace,
} from "@/api/supervisePlaceManage-api.js";
searchOrderNo,
generateReceiptXml,
addInfo,
} from "@/api/receiptManagement-api.js";
export default {
props: {
outerVisible: {
type: Boolean,
default: false,
},
title: {
type: String,
default: "监管场所管理新增",
},
type: {
type: String,
default: "",
receiptStatusList: {
type: Array,
default: () => {
return [];
},
active: {
type: Object,
default: null,
},
portCodeList: {
receiptTypeList: {
type: Array,
default: () => {
return [];
},
},
},
watch: {
outerVisible(val) {
if (val) {
this.loadings.dialogLoading = false;
if (this.type == "update") {
this.formData = this.active;
}
}
},
},
data() {
return {
formData: {
operatorCode: "",
operatorName: "",
portCode: "",
loctNo: "",
operatorPersonInCharge: "",
contactNumber: "",
receiptType: "",
orderNo: [],
receiptStatus: "",
},
receiptInfo: "",
rules: {
operatorCode: [
receiptType: [
{
required: true,
trigger: "blur",
message: "监管场所代码不能为空！",
message: "请选择回执类型！",
},
],
operatorName: [
orderNo: [
{
required: true,
trigger: "blur",
message: "监管场所负责人不能为空！",
message: "订单编号不能为空！",
},
],
receiptStatus: [
{
required: true,
trigger: "blur",
message: "请选择回执状态！",
},
searchForm: {},
],
},
orderNoList: [],
loadings: {
dialogLoading: false,
uploadLoading: false,
submitLoading: false,
},
loadingText: "",
};
},
methods: {
//数据保存
submit() {
this.loadings.dialogLoading = true;
let obj = {
...this.formData,
};
if (this.type == "add") {
this.$refs.formData.validate((valid) => {
if (valid) {
this.addapi(obj);
} else {
this.loadings.dialogLoading = false;
// 生成xml
receiptXml() {
if (!this.formData.receiptType) {
return;
}
});
} else if (this.type == "update") {
this.$refs.formData.validate((valid) => {
if (valid) {
obj.id = this.active.id;
this.updateapi(obj);
} else {
this.loadings.dialogLoading = false;
if (this.formData.orderNo.length < 1) {
return;
}
});
if (!this.formData.receiptStatus) {
return;
}
},
//新增
addapi(val) {
addOperatorPlace(val)
.then((res) => {
generateReceiptXml({
...this.formData,
orderNo: this.formData.orderNo[0],
}).then((res) => {
console.log(res);
if (res.code === "200") {
this.msgSuccess(res.message);
this.close();
this.receiptInfo = res.data;
} else {
this.alertWarningMsg(res.message);
this.loadings.dialogLoading = false;
}
})
.catch((err) => {
console.log(err);
this.loadings.dialogLoading = false;
});
},
//修改
updateapi(val) {
updateOperatorPlace(val)
.then((res) => {
remoteMethod(query) {
console.log(query);
this.getOrderList(query, true);
},
getOrderList(val, flag) {
if (!this.formData.receiptType) {
return;
}
searchOrderNo({
receiptType: this.formData.receiptType,
orderNo: flag ? val : "",
}).then((res) => {
if (res.code === "200") {
this.msgSuccess(res.message);
this.close();
this.orderNoList = res.data;
} else {
this.alertWarningMsg(res.message);
this.loadings.dialogLoading = false;
}
})
.catch((err) => {
console.log(err);
this.loadings.dialogLoading = false;
});
this.receiptXml();
},
//菜单权限修改
menuChangeapi(val) {
updateOperatorPlace(val)
//数据保存
submit() {
let obj = {
...this.formData,
};
this.$refs.formData.validate((valid) => {
if (valid) {
this.addapi(obj);
}
});
},
//新增
addapi(val) {
this.loadings.dialogLoading = true;
addInfo(val)
.then((res) => {
if (res.code === "200") {
this.msgSuccess(res.message);
this.close();
this.$store.dispatch("GenerateRoutes");
} else {
this.alertWarningMsg(res.message);
this.loadings.dialogLoading = false;
}
})
.catch((err) => {
......@@ -295,13 +267,12 @@ export default {
close() {
this.formData = {
operatorCode: "",
operatorName: "",
portCode: "",
loctNo: "",
operatorPersonInCharge: "",
contactNumber: "",
receiptType: "",
orderNo: [],
receiptStatus: "",
};
this.loadings.dialogLoading = false;
this.receiptInfo = "";
this.$emit("close");
},
},
......@@ -319,4 +290,20 @@ export default {
border: 1px solid #999;
padding: 10px;
}
.textarea-text {
background-color: #f2f2f2;
padding: 10px;
.inputShadow {
border: none;
}
.el-textarea__inner {
border: none !important;
}
::v-deep {
.el-textarea textarea {
border: none !important;
background-color: #f2f2f2;
}
}
}
</style>
......
......@@ -10,46 +10,52 @@
<el-row class="row-border">
<!-- 角色名称 -->
<el-col :span="5">
<Formitem label="经营人代码" prop="operatorCode">
<el-input
<Formitem label="回执类型" prop="receiptType">
<el-select
type="text"
class="inputShadow"
id="inputInner--operatorCode"
resize="none"
v-model="sreachFormData.operatorCode"
id="inputInner--receiptType"
v-model="sreachFormData.receiptType"
clearable
filterable
placeholder=""
></el-input>
>
<el-option
v-for="item in receiptTypeList"
:key="item.value"
:label="item.itemChineseName"
:value="item.itemValue"
></el-option>
</el-select>
</Formitem>
</el-col>
<el-col :span="5">
<Formitem label="经营人名称" prop="operatorName">
<Formitem label="订单编号" prop="orderNo">
<el-input
type="text"
class="inputShadow"
id="inputInner--operatorName"
id="inputInner--orderNo"
resize="none"
v-model="sreachFormData.operatorName"
v-model="sreachFormData.orderNo"
clearable
placeholder=""
></el-input>
</Formitem>
</el-col>
<el-col :span="5">
<Formitem label="所属口岸" prop="portCode">
<Formitem label="回执状态" prop="receiptStatus">
<el-select
type="text"
id="inputInner--portCode"
v-model="sreachFormData.portCode"
id="inputInner--receiptStatus"
v-model="sreachFormData.receiptStatus"
clearable
filterable
placeholder=""
>
<el-option
v-for="item in portCodeList"
:key="item"
:label="item"
:value="item"
v-for="item in receiptStatusList"
:key="item.value"
:label="item.itemChineseName"
:value="item.itemValue"
></el-option>
</el-select>
</Formitem>
......@@ -109,31 +115,20 @@
:selectFixed="false"
:rowSelectDataType="false"
>
<template slot="optionColumn">
<el-table-column align="left" label="操作">
<template slot-scope="scope">
<el-button type="text" @click="update(scope.row)"> 修改 </el-button>
</template>
</el-table-column>
</template>
</Table>
<DialogVue
:outerVisible="outerVisible"
:title="dialogTitle"
:type="editType"
:active="activeData"
@close="dialogClose"
:portCodeList="portCodeList"
:receiptStatusList="receiptStatusList"
:receiptTypeList="receiptTypeList"
/>
</div>
</template>
<script>
import {
getOperatorPlaceList,
getPortCodeList,
} from "@/api/supervisePlaceManage-api.js";
import { searchList } from "@/api/receiptManagement-api.js";
import { getDictData } from "@/api/system/dict-api.js";
import DialogVue from "./dialog.vue";
export default {
name: "SupervisePlaceManage",
......@@ -143,16 +138,15 @@ export default {
data() {
return {
sreachFormData: {
portCode: "",
operatorCode: "",
operatorName: "",
receiptType: "",
orderNo: "",
receiptStatus: "",
},
page: {
pageIndex: 1,
pageSize: 20,
total: 0,
},
activeData: null,
tableData: [],
headerData: [
{
......@@ -191,32 +185,39 @@ export default {
},
tableMaxheight: null,
outerVisible: false,
dialogTitle: "",
editType: "",
portCodeList: [],
receiptStatusList: [],
receiptTypeList: [],
};
},
created() {
this.search(0);
this.fetchReceiptStatus();
},
mounted() {
this.tableMaxheight = window.innerHeight - 300;
this.fetchPortCodeList();
},
methods: {
// 获取所属口岸
fetchPortCodeList() {
getPortCodeList()
fetchReceiptStatus() {
getDictData({ doctCode: "RECEIPT_TYPE" })
.then((res) => {
if (res.code === "200") {
this.portCodeList = res.data;
} else {
if (res.code == "200") {
this.receiptTypeList = res.data;
}
})
.catch((err) => {
console.log(err);
console.error(err);
});
getDictData({ doctCode: "RECEIPT_STATUS" })
.then((res) => {
if (res.code == "200") {
this.receiptStatusList = res.data;
}
})
.catch((err) => {
console.error(err);
});
},
clear() {
this.$refs.sreachForm.resetFields();
},
......@@ -248,20 +249,11 @@ export default {
});
},
addRole() {
this.dialogTitle = "监管场所管理新增";
this.editType = "add";
this.outerVisible = true;
},
update(val) {
this.dialogTitle = "监管场所管理修改";
this.editType = "update";
this.outerVisible = true;
this.activeData = JSON.parse(JSON.stringify(val));
},
dialogClose() {
this.outerVisible = false;
this.activeData = null;
this.search(1);
},
//分页
......
......@@ -274,24 +274,6 @@ export default {
this.loadings.dialogLoading = false;
});
},
//菜单权限修改
menuChangeapi(val) {
updateOperatorPlace(val)
.then((res) => {
if (res.code === "200") {
this.msgSuccess(res.message);
this.close();
this.$store.dispatch("GenerateRoutes");
} else {
this.alertWarningMsg(res.message);
this.loadings.dialogLoading = false;
}
})
.catch((err) => {
console.log(err);
this.loadings.dialogLoading = false;
});
},
close() {
this.formData = {
......