Fedex / EcomWeb

Go to a project
Toggle navigation Toggle navigation pinning
jinhui.wang
a8da7796 1 parent 1ad688bf

组件增加，回执状态增加，字典表增加

Expand all
Inline Side-by-side
Showing 11 changed files with 493 additions and 146 deletions
......@@ -55,7 +55,6 @@ export default {
};
},
created() {
this.$store.dispatch("GetLink");
localStorage.getItem("EcomLang")
? (this.$i18n.locale = localStorage.getItem("EcomLang"))
: localStorage.setItem("EcomLang", this.$i18n.locale);
......
<template>
<div>
<el-popover
placement="bottom"
width="320"
trigger="manual"
:popper-class="`popover${dataKey}`"
v-model="textareaVisible"
>
<el-input
:name="`${dataKey}-textarea`"
type="textarea"
:rows="5"
:id="`popoverInput${dataKey}`"
class="inputShadow textareaPopover"
v-model="formData[dataKey]"
resize="none"
maxlength="13000"
placeholder=""
@blur="textareaBlur"
@input="input"
></el-input>
<el-input
slot="reference"
:name="dataKey"
type="textarea"
:rows="1"
class="inputShadow"
:id="`inputInner--${dataKey}`"
v-model="formData[dataKey]"
resize="none"
placeholder=""
@focus="textareaFocus"
@input="input"
></el-input>
</el-popover>
<el-badge
v-if="
!textareaVisible &&
textareaLength({
key: dataKey,
value: formData[dataKey],
}) > 1
"
type="info"
:value="`+${textareaLength({
key: dataKey,
value: formData[dataKey],
})}`"
class="item texttareaTip"
/>
</div>
</template>
<script>
export default {
props: {
formData: {
type: Object,
default: null,
},
dataKey: {
type: String,
default: "",
},
},
data() {
return {
textareaVisible: false,
};
},
methods: {
//文本域展示状态切换
textareaFocus(val) {
this.textareaVisible = true;
this.$nextTick(() => {
document
.querySelector("#popoverInput" + val.target.name.split("-")[0])
.focus();
document.querySelector(
"#inputInner--" + val.target.name.split("-")[0]
).style.display = "none";
});
},
textareaBlur(val) {
let inputInner = document.querySelector(
"#inputInner--" + val.target.name.split("-")[0]
);
this.textareaVisible = false;
inputInner.style.display = "block";
this.$nextTick(() => {
inputInner.blur();
if (
inputInner.value != undefined &&
inputInner.value != "" &&
inputInner.value != null
) {
inputInner.classList.add("inputFocus");
} else {
inputInner.classList.remove("inputFocus");
}
});
let arr = [];
this.formData[val.target.name.split("-")[0]]
.replace(/[\n\，\；\;]/g, ",")
.replace(/[\t]/g, "")
.split(",")
.forEach((str, index) => {
if (str != null && str != "" && index <= 1000) {
arr.push(str.trim());
}
});
this.formData[val.target.name.split("-")[0]] = arr.join("\n");
this.$emit("formChange", this.formData);
this.$forceUpdate();
},
//文本域输入内容数量处理
textareaLength(val) {
if (val.value != "" && val.value != null) {
let arr = [];
val.value
.trim()
.replace(/[\n\，\；\;]/g, ",")
.split(",")
.forEach((item) => {
if (item != "" && item != null) {
arr.push(item);
}
});
return arr.length;
} else {
return 0;
}
},
input() {
this.$forceUpdate();
},
},
};
</script>
<style scoped lang="scss">
@import "@/assets/styles/variables.scss";
.texttareaTip {
position: absolute;
top: 52%;
right: 20px;
transform: translate(0, -50%);
z-index: 10;
}
</style>
<template>
<el-popover
:popper-class="`popper${dataKey}${rowData.declareId} portLogPopper`"
placement="left"
:visible-arrow="false"
title=""
width="750"
trigger="manual"
v-model="rowData[`${dataKey}PopoverType`]"
>
<div style="text-align: right">
<i
class="el-icon-close"
style="cursor: pointer; font-size: 20px; font-weight: 700"
@click.stop="popoverClose"
></i>
</div>
<div v-loading="rowData.popoverLoading">
<slot name="title"></slot>
<Table
class="fedexDetialTable mt20"
:data="rowData[`${dataKey}PopoverData`]"
:headerData="receiptDataHead"
:selection="false"
:selectFixed="false"
:order="false"
:border="true"
:rowSelectDataType="false"
:pagination="false"
:page="1"
:pageSizes="[20, 30, 50, 100]"
:totalCount="0"
:emptyText="$t('portEntry.emptyText')"
height="350px"
maxHeight="500px"
rowKey="id"
>
</Table>
</div>
<el-button
slot="reference"
type="text"
@click.stop="popoverChange(rowData, dataKey)"
>
<slot name="buttonLabel"></slot>
</el-button>
</el-popover>
</template>
<script>
export default {
props: {
dataKey: {
type: String,
default: "",
},
rowData: {
tpye: Object,
default: null,
},
tableData: {
type: Array,
default() {
return [];
},
},
receiptDataHead: {
type: Array,
default() {
return [];
},
},
parentDom: {
type: Object,
default: null,
},
},
data() {
return {};
},
methods: {
//弹框关闭
popoverClose() {
this.$emit("popoverClose");
this.parentDom.$refs.tables.$refs.bodyWrapper.style.overflowY = "auto";
},
//弹框状态改版
popoverChange(data, type) {
this.popoverClose();
let arr = JSON.parse(JSON.stringify(this.tableData));
arr.forEach((item) => {
item[`${type}PopoverData`] = [];
if (data.declareId != item.declareId) {
// item[`${type}PopoverLoading`] = false;
item[`${type}PopoverType`] = false;
} else {
// item[`${type}PopoverLoading`] = true;
item[`${type}PopoverType`] = !JSON.parse(
JSON.stringify(item[`${type}PopoverType`])
);
}
});
if (!data[`${type}PopoverType`]) {
this.parentDom.$refs.tables.$refs.bodyWrapper.style.overflowY =
"hidden";
} else {
this.parentDom.$refs.tables.$refs.bodyWrapper.style.overflowY = "auto";
}
this.$emit("popoverChange", {
tableData: arr,
data: data,
type: !data[`${type}PopoverType`],
status: type,
});
this.$nextTick(() => {
document.getElementsByClassName("el-table__row").forEach((dom1, i) => {
if (i == data.index) {
dom1.classList.add("activeRow");
} else {
dom1.classList.remove("hover-row");
dom1.classList.remove("activeRow");
}
});
let interval = setInterval(() => {
if (
document.getElementsByClassName(`popper${type}${data.declareId}`)
.length == 1
) {
clearInterval(interval);
}
document
.getElementsByClassName(`popper${type}${data.declareId}`)
.forEach((dom, index) => {
if (index > 0) {
dom.style.display = "none";
dom.remove();
}
});
}, 100);
});
},
},
};
</script>
<style></style>
......@@ -19,6 +19,7 @@ import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels,
import { formatDate, debounce, alertWarningMsg, alertSuccessMsg, alertErrorMsg, alertInfoMsg, toHead, compare, createRandom, ctho, base64ConvertFile } from "@/utils/index";
import * as fileDownload from '@/utils/zipdownload.js'
import * as filters from '@/utils/filters.js'
import dictData from '@/utils/dict.js'
import regExp from '@/utils/regExp.js'
import Pagination from "@/components/Pagination";
// 自定义表格工具扩展
......@@ -35,6 +36,8 @@ import CustomTransfer from '@/components/CustomTransfer'
import CustomForm from '@/components/CustomForm'
import CustomTable from '@/components/CustomTable'
import EditTag from '@/components/EditTag'
import TablePopover from '@/components/TablePopover'
import FormTextareaInput from '@/components/FormTextareaInput'
(function () {
if (typeof EventTarget !== "undefined") {
let func = EventTarget.prototype.addEventListener;
......@@ -85,6 +88,7 @@ Vue.prototype.approvalPortType = approvalPortType
Vue.prototype.getSystemOption = getSystemOption
Vue.prototype.currencySystemDisableType = currencySystemDisableType
Vue.prototype.imageTaskStatusShowType = imageTaskStatusShowType
Vue.prototype.dictData = dictData
Vue.prototype.msgSuccess = function (msg) {
this.$message({ showClose: true, message: msg, type: "success" });
......@@ -117,6 +121,8 @@ Vue.component('CustomTransfer', CustomTransfer)
Vue.component('CustomForm', CustomForm)
Vue.component('CustomTable', CustomTable)
Vue.component('EditTag', EditTag)
Vue.component('TablePopover', TablePopover)
Vue.component('FormTextareaInput', FormTextareaInput)
Vue.use(permission)
......
This diff is collapsed. Click to expand it.
......@@ -18,7 +18,15 @@
}"
:expandRowKeys="expandRowKeys"
>
<template slot="optionColumn">
<template v-slot:unit="scope">
<span>{{ selectDictLabel(scope.row.unit, "unit", "code") }}</span>
</template>
<template v-slot:currency="scope">
<span>{{
selectDictLabel(scope.row.currency, "currency", "value")
}}</span>
</template>
<!-- <template slot="optionColumn">
<el-table-column
header-align="center"
align="center"
......@@ -26,7 +34,6 @@
width="120"
>
<template slot-scope="scope">
<!-- 展开/收起 -->
<el-button
type="text"
@click="
......@@ -35,12 +42,10 @@
: editDetail(scope.row)
"
>
<!-- 收起 -->
<span v-show="expandRowKeys.includes(scope.row.index)">
<svg-icon icon-class="upIcon" />
{{ $t("entry.detial.form.up") }}
</span>
<!-- 展开 -->
<span v-show="!expandRowKeys.includes(scope.row.index)"
><svg-icon icon-class="downIcon" />
{{ $t("entry.detial.form.down") }}
......@@ -48,7 +53,7 @@
</el-button>
</template>
</el-table-column>
</template>
</template> -->
</Table>
</template>
......@@ -73,7 +78,23 @@ export default {
expandRowKeys: [],
};
},
methods: {},
methods: {
editDetail(val) {
this.expandRowKeys = [val.index];
},
closeEdit() {
this.expandRowKeys = [];
},
selectDictLabel(value, dictkey, key) {
let str = value;
this.dictData[dictkey].forEach((item) => {
if (value == item[key]) {
str = item.name;
}
});
return str;
},
},
};
</script>
......
......@@ -123,15 +123,20 @@
</el-col>
<el-col :span="3">
<Formitem label="币制" prop="currency">
<el-input
<el-select
type="text"
class="inputShadow"
id="inputInner--currency"
resize="none"
v-model="formData.currency"
clearable
placeholder=""
></el-input>
>
<el-option
v-for="(item, index) in dictData.currency"
:key="index"
:label="item.name"
:value="item.value"
></el-option>
</el-select>
</Formitem>
</el-col>
<!-- <el-col :span="3">
......@@ -149,15 +154,20 @@
</el-col> -->
<el-col :span="3">
<Formitem label="申报类型" prop="appType">
<el-input
<el-select
type="text"
class="inputShadow"
id="inputInner--appType"
resize="none"
v-model="formData.appType"
clearable
placeholder=""
></el-input>
>
<el-option
v-for="(item, index) in dictData.appType"
:key="index"
:label="item.name"
:value="item.value"
></el-option>
</el-select>
</Formitem>
</el-col>
<el-col :span="3">
......@@ -250,61 +260,63 @@ export default {
detialHeaderData: [
{
name: "企业商品货号",
value: "",
value: "itemNo",
width: "",
align: "left",
},
{
name: "商品企业商品名称",
value: "",
value: "itemName",
width: "",
align: "left",
},
{
name: "企业商品描述",
value: "",
value: "itemDescribe",
width: "",
align: "left",
},
{
name: "条码",
value: "",
value: "barCode",
width: "",
align: "left",
},
{
name: "计量单位",
value: "",
value: "unit",
width: "",
align: "left",
slot: true,
},
{
name: "币制",
value: "",
value: "currency",
width: "",
align: "left",
slot: true,
},
{
name: "数量",
value: "",
value: "qty",
width: "",
align: "left",
},
{
name: "单价",
value: "",
value: "price",
width: "",
align: "left",
},
{
name: "总价",
value: "",
value: "totalPrice",
width: "",
align: "left",
},
{
name: "备注",
value: "",
value: "note",
width: "",
align: "left",
},
......
......@@ -11,74 +11,25 @@
<!-- 订单编号 -->
<el-col :span="5">
<Formitem label="订单编号" prop="orderNo">
<el-popover
placement="bottom"
width="320"
trigger="manual"
popper-class="popoverorderNo"
v-model="textareaVisible.formItemorderNo"
>
<el-input
name="orderNo-textarea"
type="textarea"
:rows="5"
id="popoverInputorderNo"
class="inputShadow textareaPopover"
v-model="sreachFormData.orderNo"
resize="none"
maxlength="13000"
placeholder=""
@blur="textareaBlur"
@input="input"
></el-input>
<el-input
slot="reference"
name="orderNo"
type="textarea"
:rows="1"
class="inputShadow"
id="inputInner--orderNo"
v-model="sreachFormData.orderNo"
resize="none"
placeholder=""
@focus="textareaFocus"
@input="input"
></el-input>
</el-popover>
<el-badge
v-if="
!textareaVisible.formItemorderNo &&
textareaLength({
key: 'orderNo',
value: sreachFormData.orderNo,
}) > 1
"
type="info"
:value="`+${textareaLength({
key: 'orderNo',
value: sreachFormData.orderNo,
})}`"
class="item texttareaTip"
<FormTextareaInput
:formData="sreachFormData"
dataKey="orderNo"
@formChange="formChange"
/>
</Formitem>
</el-col>
<!-- 电商企业代码 -->
<el-col :span="5">
<Formitem label="电商企业代码" prop="ebccode">
<el-select
<el-input
type="text"
class="inputShadow"
id="inputInner--ebccode"
resize="none"
v-model="sreachFormData.ebccode"
clearable
placeholder=""
>
<el-option
v-for="(item, index) in dictData.ebccode"
:key="index"
:label="item.name"
:value="item.code"
></el-option>
</el-select>
></el-input>
</Formitem>
</el-col>
<!-- 回执状态 -->
......@@ -171,7 +122,23 @@
:rowSelectDataType="false"
>
<template v-slot:returnStatus="scope">
<span>{{ scope.row.returnStatus }}</span>
<TablePopover
dataKey="returnStatus"
:parentDom="$refs.entryTable"
:receiptDataHead="receiptDataHead"
:rowData="scope.row"
:tableData="tableData"
@popoverChange="popoverChange"
@popoverClose="popoverClose"
>
<div slot="title">
<span style="font-weight: 700; color: #515a6e">订单编号：</span
>{{ scope.row.orderno }}
</div>
<div slot="buttonLabel">
{{ scope.row.returnStatus }}
</div>
</TablePopover>
</template>
<template v-slot:orderNo="scope">
<el-button type="text" @click="view(scope.row)">{{
......@@ -259,6 +226,26 @@ export default {
align: "left",
},
],
receiptDataHead: [
{
name: "回执状态",
value: "",
width: "",
align: "left",
},
{
name: "状态时间",
value: "",
width: "",
align: "left",
},
{
name: "回执描述",
value: "",
width: "",
align: "left",
},
],
dictData: {
ebccode: [],
returnStatus: [],
......@@ -304,7 +291,7 @@ export default {
item.index = idx;
item.popoverLoading = false;
item.returnStatusPopoverType = false;
item.returnStatusPopoverData = false;
item.returnStatusPopoverData = [];
});
} else {
this.alertWarningMsg(res.message);
......@@ -334,66 +321,21 @@ export default {
params: { data: val },
});
},
//文本域展示状态切换
textareaFocus(val) {
this.textareaVisible["formItem" + val.target.name.split("-")[0]] = true;
this.$nextTick(() => {
document
.querySelector("#popoverInput" + val.target.name.split("-")[0])
.focus();
document.querySelector(
"#inputInner--" + val.target.name.split("-")[0]
).style.display = "none";
});
popoverChange(val) {
this.tableData = val.tableData;
console.log(this.tableData);
},
textareaBlur(val) {
let inputInner = document.querySelector(
"#inputInner--" + val.target.name.split("-")[0]
);
this.textareaVisible["formItem" + val.target.name.split("-")[0]] = false;
inputInner.style.display = "block";
this.$nextTick(() => {
inputInner.blur();
if (
inputInner.value != undefined &&
inputInner.value != "" &&
inputInner.value != null
) {
inputInner.classList.add("inputFocus");
} else {
inputInner.classList.remove("inputFocus");
}
popoverClose(val) {
this.tableData.forEach((item) => {
item.popoverLoading = false;
item.returnStatusPopoverType = false;
item.returnStatusPopoverData = [];
});
let arr = [];
this.sreachFormData[val.target.name.split("-")[0]]
.replace(/[\n\，\；\;]/g, ",")
.replace(/[\t]/g, "")
.split(",")
.forEach((str, index) => {
if (str != null && str != "" && index <= 1000) {
arr.push(str.trim());
}
});
this.sreachFormData[val.target.name.split("-")[0]] = arr.join("\n");
this.$forceUpdate();
this.$refs.entryTable.$refs.tables.$refs.bodyWrapper.style.overflowY =
"auto";
},
//文本域输入内容数量处理
textareaLength(val) {
if (val.value != "" && val.value != null) {
let arr = [];
val.value
.trim()
.replace(/[\n\，\；\;]/g, ",")
.split(",")
.forEach((item) => {
if (item != "" && item != null) {
arr.push(item);
}
});
return arr.length;
} else {
return 0;
}
formChange(val) {
this.sreachFormData = val;
},
//分页
currentChange(val) {
......
......@@ -12,7 +12,7 @@
>
<div class="modelItem">
<div class="modelItem-title">
<div>数据导入</div>
<div>申报数据导入</div>
<div>
<el-button
type="text"
......@@ -76,6 +76,30 @@
</div>
</div>
</div>
<div class="modelItem-title" v-if="errorData.length > 0">
<div>导入结果</div>
</div>
<Table
v-if="errorData.length > 0"
class="fedexDetialTable"
ref="entryTable"
:data="errorData"
:headerData="headerData"
:maxHeight="200"
:border="false"
:pagination="false"
:order="false"
:page="1"
:pageSizes="[20, 30, 50, 100]"
:totalCount="0"
:selection="false"
:selectFixed="false"
:rowSelectDataType="false"
>
<template v-slot:message="scope">
<div class="errorMessage">{{ scope.row.message }}</div>
</template>
</Table>
</div>
<div class="dialogOption entrySave">
<el-button
......@@ -103,6 +127,34 @@ export default {
file: null,
},
searchForm: {},
errorData: [],
headerData: [
{
name: "sheet",
value: "sheetName",
width: "100",
align: "left",
},
{
name: "行号",
value: "rowIndex",
width: "50",
align: "left",
},
{
name: "清单编号",
value: "orderNo",
width: "150",
align: "left",
},
{
name: "校验结果",
value: "message",
width: "",
align: "left",
slot: true,
},
],
loadings: {
dialogLoading: false,
uploadLoading: false,
......@@ -116,6 +168,7 @@ export default {
watch: {
outerVisible(val) {
if (val) {
this.loadings.dialogLoading = false;
this.uploadType = false;
}
},
......@@ -152,10 +205,21 @@ export default {
uploadDeclareData(obj)
.then((res) => {
if (res.code === "200") {
this.msgSuccess("上传成功！");
this.handleRemove();
this.close();
this.uploadType = true;
let arr = [];
res.data.forEach((item) => {
if (item.message != null && item.message != "") {
arr.push(item);
}
});
if (arr.length == 0) {
this.msgSuccess("上传成功！");
this.handleRemove();
this.close();
this.uploadType = true;
} else {
this.errorData = arr;
this.loadings.dialogLoading = false;
}
} else {
this.alertWarningMsg(res.message);
this.loadings.dialogLoading = false;
......@@ -268,4 +332,8 @@ export default {
font-size: 20px;
}
}
.errorMessage {
color: $fedexError;
}
</style>
......
This diff is collapsed. Click to expand it.
......@@ -178,6 +178,7 @@ export default {
dialogClose() {
this.outerVisible = false;
this.activeData = null;
this.search(1);
},
//分页
currentChange(val) {
......