Fedex / imac-vue

Go to a project
Toggle navigation Toggle navigation pinning
Elements-SY
92a6ea8c 1 parent 94f12ced

modify

Inline Side-by-side
Showing 12 changed files with 0 additions and 1189 deletions
import request from "@/utils/request";
// HScode黑名单查询
export function findHsCodeList(data) {
return request({
url: "/etes/findHsCodeList",
method: "post",
data: data,
});
}
// HScode黑名单删除
export function delBlackList(data) {
return request({
url: "/etes/delBlackList",
method: "post",
data: data,
});
}
// HScode黑名单下载模板
export function downLoadTemplate(template) {
return request({
url: "/etes/downLoadTemplate?template=" + template,
method: "get",
responseType: "blob",
});
}
// HScode黑名单导入
export function uploadHsCode(data) {
return request({
url: "/etes/uploadHsCode",
method: "post",
data: data,
});
}
import request from "@/utils/request";
// HScode英文品名黑名单查询
export function findShipmentDescList(data) {
return request({
url: "/etes/findShipmentDescList",
method: "post",
data: data,
});
}
// HScode英文品名黑名单导入
export function uploadShipmentDesc(data) {
return request({
url: "/etes/uploadShipmentDesc",
method: "post",
data: data,
});
}
// HScode黑名单/英文品名删除
export function delBlackList(data) {
return request({
url: "/etes/delBlackList ",
method: "post",
data: data,
});
}
<template>
<div class="form-header container">
<yl-table
:attrs="tableAttr"
:loadingTable="tableAttr.loadingTable"
:columns="columns"
:tableData="tableData"
:pageConfig="pageConfig"
@sizeChange="handleSizeChange"
@currentChange="handleCurrentChange"
>
</yl-table>
</div>
</template>
<script>
import YlTable from "@/components/YlTable";
import { tableAttr, columnHeader } from "./tableConfig";
export default {
name: "ErrorInfo",
components: {
YlTable,
},
data() {
return {
pageConfig: {
// 分页配置项
isPagination: false,
total: 0,
pageData: {
page: 1,
size: 10,
},
},
tableAttr: tableAttr, // table配置项
columns: columnHeader(), // 表头
tableData: [], // 表格数据
};
},
created() {
const { data } = this.$route.query;
this.tableData = JSON.parse(data);
},
methods: {
//条数变化
handleSizeChange(e) {
this.pageConfig.pageData.size = e;
this.pageConfig.pageData.page = 1;
this.searchBtn();
},
//页码变化
handleCurrentChange(e) {
this.pageConfig.pageData.page = e;
this.searchBtn();
},
// 搜索
searchBtn() {},
},
};
</script>
<style lang="scss" scoped></style>
export const tableAttr = {
border: true,
loadingTable: false,
isDragSort: false, // 拖拽tableData数据一定要加id字段
maxHeight: 300,
btnCofig: {
isBtn: false,
btnGroup: [],
},
};
export const columnHeader = () => [
{
type: "index",
label: "序号",
prop: "rowNum",
align: "center",
width: "70",
},
{
label: "错误信息",
prop: "msg",
align: "center",
minWidth: 150,
},
];
<template>
<div class="error-container">
<el-dialog
:width="width"
:title="title"
:center="center"
:visible.sync="dialogVisible"
:close-on-click-modal="onModalClickClose"
@open="dialogOpenEvent"
@close="dialogCloseEvent"
>
<slot></slot>
<span slot="footer" class="dialog-footer">
<el-button @click="cancel">取 消</el-button>
<el-button type="primary" @click="confirm">{{
confirmBtnName
}}</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
props: {
width: {
type: String,
default: "50%",
},
title: {
type: String,
default: "标题",
},
center: {
type: String,
default: "center",
},
confirmBtnName: {
type: String,
default: "确 定",
},
onModalClickClose: {
type: Boolean,
default: false,
},
},
data() {
return {
dialogVisible: false,
};
},
computed: {},
created() {},
mounted() {},
methods: {
dialogOpenEvent(data) {
if (data && data.length) {
console.log(data);
}
this.dialogVisible = true;
this.$emit("open");
},
dialogCloseEvent() {
this.dialogVisible = false;
this.$emit("close");
},
// 确认事件
confirm() {
this.dialogVisible = false;
this.$emit("confirm");
},
// 取消事件
cancel() {
this.dialogVisible = false;
this.$emit("cancel");
},
},
};
</script>
<style lang='scss' scoped>
</style>
export const formConfig = [
{
label: "HSCODE",
type: "Input",
name: "searchValue",
prop: "searchValue",
placeholder: "根据Hscode查询",
span: 6,
trigger: "blur", // 事件名
},
];
<template>
<div ref="formHeaderRef" class="form-header container">
<el-row>
<el-col>
<yl-form
ref="ruleForm"
:formConfig="formConfig"
:queryForm="queryForm"
:inline="false"
formWidth="auto"
@blur="blurEvent"
/>
</el-col>
</el-row>
<yl-table
ref="ylTable"
:attrs="tableAttr"
:loadingTable="tableAttr.loadingTable"
:columns="columns"
:tableData="tableData"
:pageConfig="pageConfig"
@search="searchBtn"
@download="downloadTemplate"
@upload="toUpload"
@rmfile="onRemoveUpload"
@export="exportTemplate"
@delete="deleteData"
@sizeChange="handleSizeChange"
@currentChange="handleCurrentChange"
@selectionEvent="tableSelectionChange"
>
</yl-table>
<!-- <modle-view
ref="modleViewRef"
width="30%"
title="导入Excel"
confirmBtnName="导入Excel"
@confirm="dialogConfirm"
>
<el-form
:model="paramsForm"
:rules="rules"
ref="ruleForm"
label-width="80px"
>
<el-row>
<el-col :span="20">
<el-form-item
label="商品名称"
prop="skuName"
size="small"
label-position="left"
>
<el-input
v-model="paramsForm.skuName"
placeholder="请输入商品名称"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col>
<el-form-item prop="file">
<el-upload
ref="upload"
action="/goods/uploadGoodsExcel"
name="file"
:http-request="toUpload"
:on-remove="onRemoveUpload"
:limit="1"
accept=".xlsx"
class="upload"
>
<el-button type="primary" icon="el-icon-upload2" size="small"
>选择文件</el-button
>
</el-upload>
</el-form-item>
</el-col>
</el-row>
</el-form>
</modle-view> -->
</div>
</template>
<script>
import YlForm from "@/components/YlForm";
import YlTable from "@/components/YlTable";
import ModleView from "./components/ModleView";
import { formConfig } from "./formConfig";
import { tableAttr, columnHeader } from "./tableConfig";
import { restTableHeight } from "@/utils";
import {
findHsCodeList, // ShipmentDesc查询
delBlackList, // ShipmentDesc删除
downLoadTemplate, // ShipmentDesc下载模板
uploadHsCode, // ShipmentDesc导入
} from "@/api/et86HsCodeBlack";
import { downLoadXlsx } from "@/utils/zipdownload";
export default {
name: "Et86HsCodeBlack",
components: {
YlForm,
YlTable,
ModleView,
},
data() {
return {
formConfig: formConfig, // 表单配置项
queryForm: {
searchValue: "",
}, // 表单参数
paramsForm: {
skuName: "",
file: null,
},
rules: {
skuName: [
{ required: true, message: "请输入商品名称", trigger: "blur" },
],
},
pageConfig: {
// 分页配置项
isPagination: true,
total: 0,
pageData: {
page: 1,
size: 10,
},
},
tableAttr: tableAttr, // table配置项
columns: columnHeader(this.deleteRow), // 表头
tableData: [], // 表格数据
multipleSelection: [],
};
},
created() {
// 黑名单查询
this.$nextTick(() => {
this.searchBtn();
});
},
mounted() {
this.$nextTick(() => {
this.tableAttr.maxHeight =
window.innerHeight - restTableHeight(this.$refs);
});
},
methods: {
// HScode黑名单查询
queryFindHsCodeList() {
const { page, size } = this.pageConfig.pageData;
let params = {
limitStart: (page - 1) * size,
limitSize: size,
...this.queryForm,
};
this.tableAttr.loadingTable = true;
findHsCodeList(params)
.then((res) => {
this.tableAttr.loadingTable = false;
const { code, data } = res;
if (code == 200) {
this.tableData = data.list;
this.pageConfig.total = data.total;
}
})
.catch(() => {});
},
// 删除黑名单
toDelBlackList(params) {
delBlackList(params)
.then((res) => {
const { code, msg } = res;
if (code == 200) {
this.searchBtn();
this.msgSuccess(msg || "删除成功!");
} else {
this.$message.error(msg || "删除失败");
}
})
.catch(() => {});
},
// 失焦事件
blurEvent() {},
// 选择上传【HScode黑名单导入】
toUpload({ file }) {
const formData = new FormData();
formData.append("file", file);
uploadHsCode(formData)
.then((res) => {
const { code, data, msg } = res;
if (code == 200) {
this.searchBtn();
this.msgSuccess(msg || "导入成功!");
} else {
this.$message.error(msg || "导入失败");
this.$router.push({
path: "/errorInfo",
query: {
name: "errorInfo",
error: code,
data: JSON.stringify(data),
},
});
}
})
.catch(() => {});
},
//移除上传
onRemoveUpload(options) {
console.log(options);
},
// 搜索
searchBtn() {
this.pageConfig.pageData.page = 1;
this.pageConfig.pageData.size = 10;
this.$refs.ruleForm.handleSearch("ruleForm", (val) => {
this.queryFindHsCodeList();
});
},
// 确认对话框
dialogConfirm() {},
// 下载【HScode黑名单下载模板】
downloadTemplate() {
downLoadTemplate("hsCode")
.then((res) => {
if (res) {
const blob = new Blob([res]);
const link = document.createElement("a"); //创建a标签
link.download = "HSCODE黑名单表.xlsx"; //a标签添加属性
link.style.display = "none";
link.href = URL.createObjectURL(blob);
document.body.appendChild(link);
link.click(); //执行下载
URL.revokeObjectURL(link.href); //释放url
document.body.removeChild(link); //释放标签
} else {
this.$message.error("下载失败");
}
})
.catch(() => {});
},
// 上传
upLoadTemplate() {
// console.log(this.$refs.modleViewRef);
},
// 导出
exportTemplate(row, i) {
this.tableAttr.btnCofig.btnGroup[i].loading = true;
downLoadXlsx("/etes/exportHsCodeList", this.queryForm, "HSCODE黑名单表")
.then(() => {
this.tableAttr.btnCofig.btnGroup[i].loading = false;
})
.catch(() => {
this.$message.error("导出失败");
});
},
// 删除
deleteData(row) {
if (this.multipleSelection.length) {
let params = [];
this.multipleSelection.map((item) => {
params.push(item.id);
});
this.$confirm("是否确认删除？", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
center: true,
})
.then(() => {
this.toDelBlackList(params);
})
.catch(() => {});
} else {
this.$message.error("请勾选一条或者多条数据再操作！");
}
},
//条数变化
handleSizeChange(e) {
this.pageConfig.pageData.size = e;
this.pageConfig.pageData.page = 1;
this.queryFindHsCodeList();
},
//页码变化
handleCurrentChange(e) {
this.pageConfig.pageData.page = e;
this.queryFindHsCodeList();
},
// table勾选
tableSelectionChange(val) {
this.multipleSelection = val;
},
// 删除
deleteRow({ row }) {
this.$confirm("是否确认删除？", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
center: true,
})
.then(() => {
this.toDelBlackList([row.id]);
})
.catch(() => {});
},
},
};
</script>
<style lang="scss" scoped></style>
export const tableAttr = {
border: true,
loadingTable: false,
isDragSort: false, // 拖拽tableData数据一定要加id字段
maxHeight: 0,
btnCofig: {
isBtn: true,
btnGroup: [
{
type: "primary", // text、primary、danger
icon: "el-icon-search", // el-icon-edit 、el-icon-delete、el-icon-plus、el-icon-download、el-icon-upload el-icon--right
btnName: "搜索",
size: "mini", // medium / small / mini
round: false,
loading: false,
event: "search",
},
{
type: "primary",
icon: "el-icon-download",
btnName: "下载模板",
size: "mini",
round: false,
loading: false,
event: "download",
},
{
type: "primary",
icon: "el-icon-upload",
btnName: "导入",
size: "mini",
round: false,
loading: false,
event: "upLoad",
action: "/goods/uploadGoodsExcel",
fileName: "name",
limit: 1,
accept: ".xlsx",
},
{
type: "primary",
icon: "el-icon-download",
btnName: "导出",
size: "mini",
round: false,
loading: false,
event: "export",
},
{
type: "danger",
icon: "el-icon-delete",
btnName: "删除",
size: "mini",
round: false,
loading: false,
event: "delete",
},
],
},
};
export const columnHeader = (deleteRow) => [
{
type: "selection",
align: "center",
prop: "selection",
width: "50",
},
{
type: "index",
label: "序号",
prop: "id",
align: "center",
width: "50",
},
{
label: "HSCODE",
prop: "blackValue",
align: "center",
minWidth: 100,
},
{
label: "创建时间",
prop: "createTime",
align: "center",
minWidth: 100,
},
{
label: "创建人",
prop: "createUserName",
align: "center",
minWidth: 100,
},
{
label: "文件名",
prop: "uploadFileName",
align: "center",
minWidth: 100,
},
{
label: "操作",
prop: "operate",
align: "center",
minWidth: 120,
fixed: "right",
render: (h, params) => {
return h("div", [
h(
"el-button",
{
style: {
color: "#ff4949",
},
props: {
type: "text",
size: "mini",
icon: "el-icon-delete",
},
on: {
click() {
deleteRow(params);
},
},
},
"删除"
),
]);
},
},
];
<template>
<div class="error-container">
<el-dialog
:width="width"
:title="title"
:center="center"
:visible.sync="dialogVisible"
:close-on-click-modal="onModalClickClose"
@open="dialogOpenEvent"
@close="dialogCloseEvent"
>
<slot></slot>
<span slot="footer" class="dialog-footer">
<el-button @click="cancel">取 消</el-button>
<el-button type="primary" @click="confirm">{{
confirmBtnName
}}</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
props: {
width: {
type: String,
default: "50%",
},
title: {
type: String,
default: "标题",
},
center: {
type: String,
default: "center",
},
confirmBtnName: {
type: String,
default: "确 定",
},
onModalClickClose: {
type: Boolean,
default: false,
},
},
data() {
return {
dialogVisible: false,
};
},
computed: {},
created() {},
mounted() {},
methods: {
dialogOpenEvent(data) {
if (data && data.length) {
console.log(data);
}
this.dialogVisible = true;
this.$emit("open");
},
dialogCloseEvent() {
this.dialogVisible = false;
this.$emit("close");
},
// 确认事件
confirm() {
this.dialogVisible = false;
this.$emit("confirm");
},
// 取消事件
cancel() {
this.dialogVisible = false;
this.$emit("cancel");
},
},
};
</script>
<style lang='scss' scoped>
</style>
export const formConfig = [
{
label: "ShipmentDesc",
type: "Input",
name: "searchValue",
prop: "searchValue",
placeholder: "根据ShipmentDesc查询",
span: 7,
trigger: "blur", // 事件名
},
];
<template>
<div ref="formHeaderRef" class="form-header container">
<el-row>
<el-col>
<yl-form
ref="ruleForm"
:formConfig="formConfig"
:queryForm="queryForm"
:inline="false"
formWidth="auto"
@blur="blurEvent"
/>
</el-col>
</el-row>
<yl-table
ref="ylTable"
:attrs="tableAttr"
:loadingTable="tableAttr.loadingTable"
:columns="columns"
:tableData="tableData"
:pageConfig="pageConfig"
@search="searchBtn"
@upload="toUpload"
@rmfile="onRemoveUpload"
@export="exportTemplate"
@delete="deleteData"
@sizeChange="handleSizeChange"
@currentChange="handleCurrentChange"
@selectionEvent="tableSelectionChange"
>
</yl-table>
<!-- <modle-view
ref="modleViewRef"
width="30%"
title="导入Excel"
confirmBtnName="导入Excel"
@confirm="dialogConfirm"
>
<el-form
:model="paramsForm"
:rules="rules"
ref="ruleForm"
label-width="80px"
>
<el-row>
<el-col :span="20">
<el-form-item
label="商品名称"
prop="skuName"
size="small"
label-position="left"
>
<el-input
v-model="paramsForm.skuName"
placeholder="请输入商品名称"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col>
<el-form-item prop="file">
<el-upload
ref="upload"
action="/goods/uploadGoodsExcel"
name="file"
:http-request="toUpload"
:on-remove="onRemoveUpload"
:limit="1"
accept=".xlsx"
class="upload"
>
<el-button type="primary" icon="el-icon-upload2" size="small"
>选择文件</el-button
>
</el-upload>
</el-form-item>
</el-col>
</el-row>
</el-form>
</modle-view> -->
</div>
</template>
<script>
import YlForm from "@/components/YlForm";
import YlTable from "@/components/YlTable";
import ModleView from "./components/ModleView";
import { formConfig } from "./formConfig";
import { tableAttr, columnHeader } from "./tableConfig";
import { restTableHeight } from "@/utils";
import {
findShipmentDescList, // HScode英文品名黑名单查询
uploadShipmentDesc, // HScode英文品名黑名单导入
delBlackList, // HScode黑名单/英文品名删除
} from "@/api/et86ShipmentDesc";
import { downLoadXlsx } from "@/utils/zipdownload";
export default {
name: "et86ShipmentDesc",
components: {
YlForm,
YlTable,
ModleView,
},
data() {
return {
formConfig: formConfig, // 表单配置项
queryForm: {
searchValue: "",
}, // 表单参数
paramsForm: {
skuName: "",
file: null,
},
rules: {
skuName: [
{ required: true, message: "请输入ShipmentDesc", trigger: "blur" },
],
},
pageConfig: {
// 分页配置项
isPagination: true,
total: 0,
pageData: {
page: 1,
size: 10,
},
},
tableAttr: tableAttr, // table配置项
columns: columnHeader(this.deleteRow), // 表头
tableData: [], // 表格数据
multipleSelection: [],
};
},
created() {
// 黑名单查询
this.$nextTick(() => {
this.searchBtn();
});
},
mounted() {
this.$nextTick(() => {
this.tableAttr.maxHeight =
window.innerHeight - restTableHeight(this.$refs);
});
},
methods: {
// HScode黑名单查询
queryFindShipmentDescList() {
const { page, size } = this.pageConfig.pageData;
let params = {
limitStart: (page - 1) * size,
limitSize: size,
...this.queryForm,
};
this.tableAttr.loadingTable = true;
findShipmentDescList(params)
.then((res) => {
this.tableAttr.loadingTable = false;
const { code, data } = res;
if (code == 200) {
this.tableData = data.list;
this.pageConfig.total = data.total;
}
})
.catch(() => {});
},
// 删除黑名单
toDelBlackList(params) {
delBlackList(params)
.then((res) => {
const { code, msg } = res;
if (code == 200) {
this.searchBtn();
this.msgSuccess(msg || "删除成功!");
} else {
this.$message.error(msg || "删除失败");
}
})
.catch(() => {});
},
// 失焦事件
blurEvent() {},
// 选择上传【HScode黑名单导入】
toUpload({ file }) {
const formData = new FormData();
formData.append("file", file);
uploadShipmentDesc(formData)
.then((res) => {
const { code, data, msg } = res;
if (code == 200) {
this.searchBtn();
this.msgSuccess(msg || "导入成功!");
} else {
this.$message.error(msg || "导入失败");
this.$router.push({
path: "/errorInfo",
query: {
name: "errorInfo",
error: code,
data: JSON.stringify(data),
},
});
}
})
.catch(() => {});
},
//移除上传
onRemoveUpload(options) {
console.log(options);
},
// 搜索
searchBtn() {
this.pageConfig.pageData.page = 1;
this.pageConfig.pageData.size = 10;
this.$refs.ruleForm.handleSearch("ruleForm", (val) => {
this.queryFindShipmentDescList();
});
},
// 确认对话框
dialogConfirm() {},
// 上传
upLoadTemplate() {
// console.log(this.$refs.modleViewRef);
},
// 导出
exportTemplate(row, i) {
this.tableAttr.btnCofig.btnGroup[i].loading = true;
downLoadXlsx("/etes/exportShipmentDescList", this.queryForm, "HSCODE英文品名黑名单表")
.then(() => {
this.tableAttr.btnCofig.btnGroup[i].loading = false;
})
.catch(() => {
this.$message.error("导出失败");
});
},
// 删除
deleteData(row) {
if (this.multipleSelection.length) {
let params = [];
this.multipleSelection.map((item) => {
params.push(item.id);
});
this.$confirm("是否确认删除？", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
center: true,
})
.then(() => {
this.toDelBlackList(params);
})
.catch(() => {});
} else {
this.$message.error("请勾选一条或者多条数据再操作！");
}
},
//条数变化
handleSizeChange(e) {
this.pageConfig.pageData.size = e;
this.pageConfig.pageData.page = 1;
this.queryFindShipmentDescList();
},
//页码变化
handleCurrentChange(e) {
this.pageConfig.pageData.page = e;
this.queryFindShipmentDescList();
},
// table勾选
tableSelectionChange(val) {
this.multipleSelection = val;
},
// 删除
deleteRow({ row }) {
this.$confirm("是否确认删除？", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
center: true,
})
.then(() => {
this.toDelBlackList([row.id]);
})
.catch(() => {});
},
},
};
</script>
<style lang="scss" scoped></style>
export const tableAttr = {
border: true,
loadingTable: false,
isDragSort: false, // 拖拽tableData数据一定要加id字段
maxHeight: 300,
btnCofig: {
isBtn: true,
btnGroup: [
{
type: "primary", // text、primary、danger
icon: "el-icon-search", // el-icon-edit 、el-icon-delete、el-icon-plus、el-icon-download、el-icon-upload el-icon--right
btnName: "搜索",
size: "mini", // medium / small / mini
round: false,
loading: false,
event: "search",
},
{
type: "primary",
icon: "el-icon-upload",
btnName: "导入",
size: "mini",
round: false,
loading: false,
event: "upLoad",
action: "/goods/uploadGoodsExcel",
fileName: "name",
limit: 1,
accept: ".xlsx",
},
{
type: "primary",
icon: "el-icon-download",
btnName: "导出",
size: "mini",
round: false,
loading: false,
event: "export",
},
{
type: "danger",
icon: "el-icon-delete",
btnName: "删除",
size: "mini",
round: false,
loading: false,
event: "delete",
},
],
},
};
export const columnHeader = (deleteRow) => [
{
type: "selection",
align: "center",
prop: "selection",
width: "50",
},
{
type: "index",
label: "序号",
prop: "id",
align: "center",
width: "50",
},
{
label: "ShipmentDesc",
prop: "blackValue",
align: "center",
minWidth: 100,
},
{
label: "创建时间",
prop: "createTime",
align: "center",
minWidth: 100,
},
{
label: "创建人",
prop: "createUserName",
align: "center",
minWidth: 100,
},
{
label: "文件名",
prop: "uploadFileName",
align: "center",
minWidth: 100,
},
{
label: "操作",
prop: "operate",
align: "center",
minWidth: 120,
fixed: "right",
render: (h, params) => {
return h("div", [
h(
"el-button",
{
style: {
color: "#ff4949",
},
props: {
type: "text",
size: "mini",
icon: "el-icon-delete",
},
on: {
click() {
deleteRow(params);
},
},
},
"删除"
),
]);
},
},
];