Elements-SY

modify

1 -import request from "@/utils/request";
2 -
3 -// HScode黑名单查询
4 -export function findHsCodeList(data) {
5 - return request({
6 - url: "/etes/findHsCodeList",
7 - method: "post",
8 - data: data,
9 - });
10 -}
11 -
12 -// HScode黑名单删除
13 -export function delBlackList(data) {
14 - return request({
15 - url: "/etes/delBlackList",
16 - method: "post",
17 - data: data,
18 - });
19 -}
20 -
21 -// HScode黑名单下载模板
22 -export function downLoadTemplate(template) {
23 - return request({
24 - url: "/etes/downLoadTemplate?template=" + template,
25 - method: "get",
26 - responseType: "blob",
27 - });
28 -}
29 -
30 -// HScode黑名单导入
31 -export function uploadHsCode(data) {
32 - return request({
33 - url: "/etes/uploadHsCode",
34 - method: "post",
35 - data: data,
36 - });
37 -}
38 -
1 -import request from "@/utils/request";
2 -
3 -// HScode英文品名黑名单查询
4 -export function findShipmentDescList(data) {
5 - return request({
6 - url: "/etes/findShipmentDescList",
7 - method: "post",
8 - data: data,
9 - });
10 -}
11 -
12 -// HScode英文品名黑名单导入
13 -export function uploadShipmentDesc(data) {
14 - return request({
15 - url: "/etes/uploadShipmentDesc",
16 - method: "post",
17 - data: data,
18 - });
19 -}
20 -
21 -// HScode黑名单/英文品名删除
22 -export function delBlackList(data) {
23 - return request({
24 - url: "/etes/delBlackList ",
25 - method: "post",
26 - data: data,
27 - });
28 -}
29 -
30 -
1 -<template>
2 - <div class="form-header container">
3 - <yl-table
4 - :attrs="tableAttr"
5 - :loadingTable="tableAttr.loadingTable"
6 - :columns="columns"
7 - :tableData="tableData"
8 - :pageConfig="pageConfig"
9 - @sizeChange="handleSizeChange"
10 - @currentChange="handleCurrentChange"
11 - >
12 - </yl-table>
13 - </div>
14 -</template>
15 -
16 -<script>
17 -import YlTable from "@/components/YlTable";
18 -import { tableAttr, columnHeader } from "./tableConfig";
19 -export default {
20 - name: "ErrorInfo",
21 - components: {
22 - YlTable,
23 - },
24 - data() {
25 - return {
26 - pageConfig: {
27 - // 分页配置项
28 - isPagination: false,
29 - total: 0,
30 - pageData: {
31 - page: 1,
32 - size: 10,
33 - },
34 - },
35 - tableAttr: tableAttr, // table配置项
36 - columns: columnHeader(), // 表头
37 - tableData: [], // 表格数据
38 - };
39 - },
40 - created() {
41 - const { data } = this.$route.query;
42 - this.tableData = JSON.parse(data);
43 - },
44 - methods: {
45 - //条数变化
46 - handleSizeChange(e) {
47 - this.pageConfig.pageData.size = e;
48 - this.pageConfig.pageData.page = 1;
49 - this.searchBtn();
50 - },
51 - //页码变化
52 - handleCurrentChange(e) {
53 - this.pageConfig.pageData.page = e;
54 - this.searchBtn();
55 - },
56 - // 搜索
57 - searchBtn() {},
58 - },
59 -};
60 -</script>
61 -<style lang="scss" scoped></style>
1 -export const tableAttr = {
2 - border: true,
3 - loadingTable: false,
4 - isDragSort: false, // 拖拽tableData数据一定要加id字段
5 - maxHeight: 300,
6 - btnCofig: {
7 - isBtn: false,
8 - btnGroup: [],
9 - },
10 -};
11 -export const columnHeader = () => [
12 - {
13 - type: "index",
14 - label: "序号",
15 - prop: "rowNum",
16 - align: "center",
17 - width: "70",
18 - },
19 - {
20 - label: "错误信息",
21 - prop: "msg",
22 - align: "center",
23 - minWidth: 150,
24 - },
25 -];
1 -<template>
2 - <div class="error-container">
3 - <el-dialog
4 - :width="width"
5 - :title="title"
6 - :center="center"
7 - :visible.sync="dialogVisible"
8 - :close-on-click-modal="onModalClickClose"
9 - @open="dialogOpenEvent"
10 - @close="dialogCloseEvent"
11 - >
12 - <slot></slot>
13 - <span slot="footer" class="dialog-footer">
14 - <el-button @click="cancel">取 消</el-button>
15 - <el-button type="primary" @click="confirm">{{
16 - confirmBtnName
17 - }}</el-button>
18 - </span>
19 - </el-dialog>
20 - </div>
21 -</template>
22 -
23 -<script>
24 -export default {
25 - props: {
26 - width: {
27 - type: String,
28 - default: "50%",
29 - },
30 - title: {
31 - type: String,
32 - default: "标题",
33 - },
34 - center: {
35 - type: String,
36 - default: "center",
37 - },
38 - confirmBtnName: {
39 - type: String,
40 - default: "确 定",
41 - },
42 - onModalClickClose: {
43 - type: Boolean,
44 - default: false,
45 - },
46 - },
47 - data() {
48 - return {
49 - dialogVisible: false,
50 - };
51 - },
52 - computed: {},
53 - created() {},
54 - mounted() {},
55 - methods: {
56 - dialogOpenEvent(data) {
57 - if (data && data.length) {
58 - console.log(data);
59 - }
60 - this.dialogVisible = true;
61 - this.$emit("open");
62 - },
63 - dialogCloseEvent() {
64 - this.dialogVisible = false;
65 - this.$emit("close");
66 - },
67 - // 确认事件
68 - confirm() {
69 - this.dialogVisible = false;
70 - this.$emit("confirm");
71 - },
72 - // 取消事件
73 - cancel() {
74 - this.dialogVisible = false;
75 - this.$emit("cancel");
76 - },
77 - },
78 -};
79 -</script>
80 -<style lang='scss' scoped>
81 -
82 -</style>
1 -export const formConfig = [
2 - {
3 - label: "HSCODE",
4 - type: "Input",
5 - name: "searchValue",
6 - prop: "searchValue",
7 - placeholder: "根据Hscode查询",
8 - span: 6,
9 - trigger: "blur", // 事件名
10 - },
11 -];
1 -<template>
2 - <div ref="formHeaderRef" class="form-header container">
3 - <el-row>
4 - <el-col>
5 - <yl-form
6 - ref="ruleForm"
7 - :formConfig="formConfig"
8 - :queryForm="queryForm"
9 - :inline="false"
10 - formWidth="auto"
11 - @blur="blurEvent"
12 - />
13 - </el-col>
14 - </el-row>
15 - <yl-table
16 - ref="ylTable"
17 - :attrs="tableAttr"
18 - :loadingTable="tableAttr.loadingTable"
19 - :columns="columns"
20 - :tableData="tableData"
21 - :pageConfig="pageConfig"
22 - @search="searchBtn"
23 - @download="downloadTemplate"
24 - @upload="toUpload"
25 - @rmfile="onRemoveUpload"
26 - @export="exportTemplate"
27 - @delete="deleteData"
28 - @sizeChange="handleSizeChange"
29 - @currentChange="handleCurrentChange"
30 - @selectionEvent="tableSelectionChange"
31 - >
32 - </yl-table>
33 - <!-- <modle-view
34 - ref="modleViewRef"
35 - width="30%"
36 - title="导入Excel"
37 - confirmBtnName="导入Excel"
38 - @confirm="dialogConfirm"
39 - >
40 - <el-form
41 - :model="paramsForm"
42 - :rules="rules"
43 - ref="ruleForm"
44 - label-width="80px"
45 - >
46 - <el-row>
47 - <el-col :span="20">
48 - <el-form-item
49 - label="商品名称"
50 - prop="skuName"
51 - size="small"
52 - label-position="left"
53 - >
54 - <el-input
55 - v-model="paramsForm.skuName"
56 - placeholder="请输入商品名称"
57 - ></el-input>
58 - </el-form-item>
59 - </el-col>
60 - </el-row>
61 - <el-row>
62 - <el-col>
63 - <el-form-item prop="file">
64 - <el-upload
65 - ref="upload"
66 - action="/goods/uploadGoodsExcel"
67 - name="file"
68 - :http-request="toUpload"
69 - :on-remove="onRemoveUpload"
70 - :limit="1"
71 - accept=".xlsx"
72 - class="upload"
73 - >
74 - <el-button type="primary" icon="el-icon-upload2" size="small"
75 - >选择文件</el-button
76 - >
77 - </el-upload>
78 - </el-form-item>
79 - </el-col>
80 - </el-row>
81 - </el-form>
82 - </modle-view> -->
83 - </div>
84 -</template>
85 -<script>
86 -import YlForm from "@/components/YlForm";
87 -import YlTable from "@/components/YlTable";
88 -import ModleView from "./components/ModleView";
89 -import { formConfig } from "./formConfig";
90 -import { tableAttr, columnHeader } from "./tableConfig";
91 -import { restTableHeight } from "@/utils";
92 -import {
93 - findHsCodeList, // ShipmentDesc查询
94 - delBlackList, // ShipmentDesc删除
95 - downLoadTemplate, // ShipmentDesc下载模板
96 - uploadHsCode, // ShipmentDesc导入
97 -} from "@/api/et86HsCodeBlack";
98 -import { downLoadXlsx } from "@/utils/zipdownload";
99 -export default {
100 - name: "Et86HsCodeBlack",
101 - components: {
102 - YlForm,
103 - YlTable,
104 - ModleView,
105 - },
106 - data() {
107 - return {
108 - formConfig: formConfig, // 表单配置项
109 - queryForm: {
110 - searchValue: "",
111 - }, // 表单参数
112 - paramsForm: {
113 - skuName: "",
114 - file: null,
115 - },
116 - rules: {
117 - skuName: [
118 - { required: true, message: "请输入商品名称", trigger: "blur" },
119 - ],
120 - },
121 - pageConfig: {
122 - // 分页配置项
123 - isPagination: true,
124 - total: 0,
125 - pageData: {
126 - page: 1,
127 - size: 10,
128 - },
129 - },
130 - tableAttr: tableAttr, // table配置项
131 - columns: columnHeader(this.deleteRow), // 表头
132 - tableData: [], // 表格数据
133 - multipleSelection: [],
134 - };
135 - },
136 - created() {
137 - // 黑名单查询
138 - this.$nextTick(() => {
139 - this.searchBtn();
140 - });
141 - },
142 - mounted() {
143 - this.$nextTick(() => {
144 - this.tableAttr.maxHeight =
145 - window.innerHeight - restTableHeight(this.$refs);
146 - });
147 - },
148 - methods: {
149 - // HScode黑名单查询
150 - queryFindHsCodeList() {
151 - const { page, size } = this.pageConfig.pageData;
152 - let params = {
153 - limitStart: (page - 1) * size,
154 - limitSize: size,
155 - ...this.queryForm,
156 - };
157 - this.tableAttr.loadingTable = true;
158 - findHsCodeList(params)
159 - .then((res) => {
160 - this.tableAttr.loadingTable = false;
161 - const { code, data } = res;
162 - if (code == 200) {
163 - this.tableData = data.list;
164 - this.pageConfig.total = data.total;
165 - }
166 - })
167 - .catch(() => {});
168 - },
169 - // 删除黑名单
170 - toDelBlackList(params) {
171 - delBlackList(params)
172 - .then((res) => {
173 - const { code, msg } = res;
174 - if (code == 200) {
175 - this.searchBtn();
176 - this.msgSuccess(msg || "删除成功!");
177 - } else {
178 - this.$message.error(msg || "删除失败");
179 - }
180 - })
181 - .catch(() => {});
182 - },
183 - // 失焦事件
184 - blurEvent() {},
185 - // 选择上传【HScode黑名单导入】
186 - toUpload({ file }) {
187 - const formData = new FormData();
188 - formData.append("file", file);
189 - uploadHsCode(formData)
190 - .then((res) => {
191 - const { code, data, msg } = res;
192 - if (code == 200) {
193 - this.searchBtn();
194 - this.msgSuccess(msg || "导入成功!");
195 - } else {
196 - this.$message.error(msg || "导入失败");
197 - this.$router.push({
198 - path: "/errorInfo",
199 - query: {
200 - name: "errorInfo",
201 - error: code,
202 - data: JSON.stringify(data),
203 - },
204 - });
205 - }
206 - })
207 - .catch(() => {});
208 - },
209 - //移除上传
210 - onRemoveUpload(options) {
211 - console.log(options);
212 - },
213 - // 搜索
214 - searchBtn() {
215 - this.pageConfig.pageData.page = 1;
216 - this.pageConfig.pageData.size = 10;
217 - this.$refs.ruleForm.handleSearch("ruleForm", (val) => {
218 - this.queryFindHsCodeList();
219 - });
220 - },
221 - // 确认对话框
222 - dialogConfirm() {},
223 - // 下载【HScode黑名单下载模板】
224 - downloadTemplate() {
225 - downLoadTemplate("hsCode")
226 - .then((res) => {
227 - if (res) {
228 - const blob = new Blob([res]);
229 - const link = document.createElement("a"); //创建a标签
230 - link.download = "HSCODE黑名单表.xlsx"; //a标签添加属性
231 - link.style.display = "none";
232 - link.href = URL.createObjectURL(blob);
233 - document.body.appendChild(link);
234 - link.click(); //执行下载
235 - URL.revokeObjectURL(link.href); //释放url
236 - document.body.removeChild(link); //释放标签
237 - } else {
238 - this.$message.error("下载失败");
239 - }
240 - })
241 - .catch(() => {});
242 - },
243 - // 上传
244 - upLoadTemplate() {
245 - // console.log(this.$refs.modleViewRef);
246 - },
247 - // 导出
248 - exportTemplate(row, i) {
249 - this.tableAttr.btnCofig.btnGroup[i].loading = true;
250 - downLoadXlsx("/etes/exportHsCodeList", this.queryForm, "HSCODE黑名单表")
251 - .then(() => {
252 - this.tableAttr.btnCofig.btnGroup[i].loading = false;
253 - })
254 - .catch(() => {
255 - this.$message.error("导出失败");
256 - });
257 - },
258 - // 删除
259 - deleteData(row) {
260 - if (this.multipleSelection.length) {
261 - let params = [];
262 - this.multipleSelection.map((item) => {
263 - params.push(item.id);
264 - });
265 - this.$confirm("是否确认删除?", "提示", {
266 - confirmButtonText: "确定",
267 - cancelButtonText: "取消",
268 - type: "warning",
269 - center: true,
270 - })
271 - .then(() => {
272 - this.toDelBlackList(params);
273 - })
274 - .catch(() => {});
275 - } else {
276 - this.$message.error("请勾选一条或者多条数据再操作!");
277 - }
278 - },
279 - //条数变化
280 - handleSizeChange(e) {
281 - this.pageConfig.pageData.size = e;
282 - this.pageConfig.pageData.page = 1;
283 - this.queryFindHsCodeList();
284 - },
285 - //页码变化
286 - handleCurrentChange(e) {
287 - this.pageConfig.pageData.page = e;
288 - this.queryFindHsCodeList();
289 - },
290 - // table勾选
291 - tableSelectionChange(val) {
292 - this.multipleSelection = val;
293 - },
294 - // 删除
295 - deleteRow({ row }) {
296 - this.$confirm("是否确认删除?", "提示", {
297 - confirmButtonText: "确定",
298 - cancelButtonText: "取消",
299 - type: "warning",
300 - center: true,
301 - })
302 - .then(() => {
303 - this.toDelBlackList([row.id]);
304 - })
305 - .catch(() => {});
306 - },
307 - },
308 -};
309 -</script>
310 -<style lang="scss" scoped></style>
1 -export const tableAttr = {
2 - border: true,
3 - loadingTable: false,
4 - isDragSort: false, // 拖拽tableData数据一定要加id字段
5 - maxHeight: 0,
6 - btnCofig: {
7 - isBtn: true,
8 - btnGroup: [
9 - {
10 - type: "primary", // text、primary、danger
11 - icon: "el-icon-search", // el-icon-edit 、el-icon-delete、el-icon-plus、el-icon-download、el-icon-upload el-icon--right
12 - btnName: "搜索",
13 - size: "mini", // medium / small / mini
14 - round: false,
15 - loading: false,
16 - event: "search",
17 - },
18 - {
19 - type: "primary",
20 - icon: "el-icon-download",
21 - btnName: "下载模板",
22 - size: "mini",
23 - round: false,
24 - loading: false,
25 - event: "download",
26 - },
27 - {
28 - type: "primary",
29 - icon: "el-icon-upload",
30 - btnName: "导入",
31 - size: "mini",
32 - round: false,
33 - loading: false,
34 - event: "upLoad",
35 - action: "/goods/uploadGoodsExcel",
36 - fileName: "name",
37 - limit: 1,
38 - accept: ".xlsx",
39 - },
40 - {
41 - type: "primary",
42 - icon: "el-icon-download",
43 - btnName: "导出",
44 - size: "mini",
45 - round: false,
46 - loading: false,
47 - event: "export",
48 - },
49 - {
50 - type: "danger",
51 - icon: "el-icon-delete",
52 - btnName: "删除",
53 - size: "mini",
54 - round: false,
55 - loading: false,
56 - event: "delete",
57 - },
58 - ],
59 - },
60 -};
61 -export const columnHeader = (deleteRow) => [
62 - {
63 - type: "selection",
64 - align: "center",
65 - prop: "selection",
66 - width: "50",
67 - },
68 - {
69 - type: "index",
70 - label: "序号",
71 - prop: "id",
72 - align: "center",
73 - width: "50",
74 - },
75 - {
76 - label: "HSCODE",
77 - prop: "blackValue",
78 - align: "center",
79 - minWidth: 100,
80 - },
81 - {
82 - label: "创建时间",
83 - prop: "createTime",
84 - align: "center",
85 - minWidth: 100,
86 - },
87 - {
88 - label: "创建人",
89 - prop: "createUserName",
90 - align: "center",
91 - minWidth: 100,
92 - },
93 - {
94 - label: "文件名",
95 - prop: "uploadFileName",
96 - align: "center",
97 - minWidth: 100,
98 - },
99 -
100 - {
101 - label: "操作",
102 - prop: "operate",
103 - align: "center",
104 - minWidth: 120,
105 - fixed: "right",
106 - render: (h, params) => {
107 - return h("div", [
108 - h(
109 - "el-button",
110 - {
111 - style: {
112 - color: "#ff4949",
113 - },
114 - props: {
115 - type: "text",
116 - size: "mini",
117 - icon: "el-icon-delete",
118 - },
119 - on: {
120 - click() {
121 - deleteRow(params);
122 - },
123 - },
124 - },
125 - "删除"
126 - ),
127 - ]);
128 - },
129 - },
130 -];
1 -<template>
2 - <div class="error-container">
3 - <el-dialog
4 - :width="width"
5 - :title="title"
6 - :center="center"
7 - :visible.sync="dialogVisible"
8 - :close-on-click-modal="onModalClickClose"
9 - @open="dialogOpenEvent"
10 - @close="dialogCloseEvent"
11 - >
12 - <slot></slot>
13 - <span slot="footer" class="dialog-footer">
14 - <el-button @click="cancel">取 消</el-button>
15 - <el-button type="primary" @click="confirm">{{
16 - confirmBtnName
17 - }}</el-button>
18 - </span>
19 - </el-dialog>
20 - </div>
21 -</template>
22 -
23 -<script>
24 -export default {
25 - props: {
26 - width: {
27 - type: String,
28 - default: "50%",
29 - },
30 - title: {
31 - type: String,
32 - default: "标题",
33 - },
34 - center: {
35 - type: String,
36 - default: "center",
37 - },
38 - confirmBtnName: {
39 - type: String,
40 - default: "确 定",
41 - },
42 - onModalClickClose: {
43 - type: Boolean,
44 - default: false,
45 - },
46 - },
47 - data() {
48 - return {
49 - dialogVisible: false,
50 - };
51 - },
52 - computed: {},
53 - created() {},
54 - mounted() {},
55 - methods: {
56 - dialogOpenEvent(data) {
57 - if (data && data.length) {
58 - console.log(data);
59 - }
60 - this.dialogVisible = true;
61 - this.$emit("open");
62 - },
63 - dialogCloseEvent() {
64 - this.dialogVisible = false;
65 - this.$emit("close");
66 - },
67 - // 确认事件
68 - confirm() {
69 - this.dialogVisible = false;
70 - this.$emit("confirm");
71 - },
72 - // 取消事件
73 - cancel() {
74 - this.dialogVisible = false;
75 - this.$emit("cancel");
76 - },
77 - },
78 -};
79 -</script>
80 -<style lang='scss' scoped>
81 -
82 -</style>
1 -export const formConfig = [
2 - {
3 - label: "ShipmentDesc",
4 - type: "Input",
5 - name: "searchValue",
6 - prop: "searchValue",
7 - placeholder: "根据ShipmentDesc查询",
8 - span: 7,
9 - trigger: "blur", // 事件名
10 - },
11 -];
1 -<template>
2 - <div ref="formHeaderRef" class="form-header container">
3 - <el-row>
4 - <el-col>
5 - <yl-form
6 - ref="ruleForm"
7 - :formConfig="formConfig"
8 - :queryForm="queryForm"
9 - :inline="false"
10 - formWidth="auto"
11 - @blur="blurEvent"
12 - />
13 - </el-col>
14 - </el-row>
15 - <yl-table
16 - ref="ylTable"
17 - :attrs="tableAttr"
18 - :loadingTable="tableAttr.loadingTable"
19 - :columns="columns"
20 - :tableData="tableData"
21 - :pageConfig="pageConfig"
22 - @search="searchBtn"
23 - @upload="toUpload"
24 - @rmfile="onRemoveUpload"
25 - @export="exportTemplate"
26 - @delete="deleteData"
27 - @sizeChange="handleSizeChange"
28 - @currentChange="handleCurrentChange"
29 - @selectionEvent="tableSelectionChange"
30 - >
31 - </yl-table>
32 - <!-- <modle-view
33 - ref="modleViewRef"
34 - width="30%"
35 - title="导入Excel"
36 - confirmBtnName="导入Excel"
37 - @confirm="dialogConfirm"
38 - >
39 - <el-form
40 - :model="paramsForm"
41 - :rules="rules"
42 - ref="ruleForm"
43 - label-width="80px"
44 - >
45 - <el-row>
46 - <el-col :span="20">
47 - <el-form-item
48 - label="商品名称"
49 - prop="skuName"
50 - size="small"
51 - label-position="left"
52 - >
53 - <el-input
54 - v-model="paramsForm.skuName"
55 - placeholder="请输入商品名称"
56 - ></el-input>
57 - </el-form-item>
58 - </el-col>
59 - </el-row>
60 - <el-row>
61 - <el-col>
62 - <el-form-item prop="file">
63 - <el-upload
64 - ref="upload"
65 - action="/goods/uploadGoodsExcel"
66 - name="file"
67 - :http-request="toUpload"
68 - :on-remove="onRemoveUpload"
69 - :limit="1"
70 - accept=".xlsx"
71 - class="upload"
72 - >
73 - <el-button type="primary" icon="el-icon-upload2" size="small"
74 - >选择文件</el-button
75 - >
76 - </el-upload>
77 - </el-form-item>
78 - </el-col>
79 - </el-row>
80 - </el-form>
81 - </modle-view> -->
82 - </div>
83 -</template>
84 -<script>
85 -import YlForm from "@/components/YlForm";
86 -import YlTable from "@/components/YlTable";
87 -import ModleView from "./components/ModleView";
88 -import { formConfig } from "./formConfig";
89 -import { tableAttr, columnHeader } from "./tableConfig";
90 -import { restTableHeight } from "@/utils";
91 -import {
92 - findShipmentDescList, // HScode英文品名黑名单查询
93 - uploadShipmentDesc, // HScode英文品名黑名单导入
94 - delBlackList, // HScode黑名单/英文品名删除
95 -} from "@/api/et86ShipmentDesc";
96 -import { downLoadXlsx } from "@/utils/zipdownload";
97 -export default {
98 - name: "et86ShipmentDesc",
99 - components: {
100 - YlForm,
101 - YlTable,
102 - ModleView,
103 - },
104 - data() {
105 - return {
106 - formConfig: formConfig, // 表单配置项
107 - queryForm: {
108 - searchValue: "",
109 - }, // 表单参数
110 - paramsForm: {
111 - skuName: "",
112 - file: null,
113 - },
114 - rules: {
115 - skuName: [
116 - { required: true, message: "请输入ShipmentDesc", trigger: "blur" },
117 - ],
118 - },
119 - pageConfig: {
120 - // 分页配置项
121 - isPagination: true,
122 - total: 0,
123 - pageData: {
124 - page: 1,
125 - size: 10,
126 - },
127 - },
128 - tableAttr: tableAttr, // table配置项
129 - columns: columnHeader(this.deleteRow), // 表头
130 - tableData: [], // 表格数据
131 - multipleSelection: [],
132 - };
133 - },
134 - created() {
135 - // 黑名单查询
136 - this.$nextTick(() => {
137 - this.searchBtn();
138 - });
139 - },
140 - mounted() {
141 - this.$nextTick(() => {
142 - this.tableAttr.maxHeight =
143 - window.innerHeight - restTableHeight(this.$refs);
144 - });
145 - },
146 - methods: {
147 - // HScode黑名单查询
148 - queryFindShipmentDescList() {
149 - const { page, size } = this.pageConfig.pageData;
150 - let params = {
151 - limitStart: (page - 1) * size,
152 - limitSize: size,
153 - ...this.queryForm,
154 - };
155 - this.tableAttr.loadingTable = true;
156 - findShipmentDescList(params)
157 - .then((res) => {
158 - this.tableAttr.loadingTable = false;
159 - const { code, data } = res;
160 - if (code == 200) {
161 - this.tableData = data.list;
162 - this.pageConfig.total = data.total;
163 - }
164 - })
165 - .catch(() => {});
166 - },
167 - // 删除黑名单
168 - toDelBlackList(params) {
169 - delBlackList(params)
170 - .then((res) => {
171 - const { code, msg } = res;
172 - if (code == 200) {
173 - this.searchBtn();
174 - this.msgSuccess(msg || "删除成功!");
175 - } else {
176 - this.$message.error(msg || "删除失败");
177 - }
178 - })
179 - .catch(() => {});
180 - },
181 - // 失焦事件
182 - blurEvent() {},
183 - // 选择上传【HScode黑名单导入】
184 - toUpload({ file }) {
185 - const formData = new FormData();
186 - formData.append("file", file);
187 - uploadShipmentDesc(formData)
188 - .then((res) => {
189 - const { code, data, msg } = res;
190 - if (code == 200) {
191 - this.searchBtn();
192 - this.msgSuccess(msg || "导入成功!");
193 - } else {
194 - this.$message.error(msg || "导入失败");
195 - this.$router.push({
196 - path: "/errorInfo",
197 - query: {
198 - name: "errorInfo",
199 - error: code,
200 - data: JSON.stringify(data),
201 - },
202 - });
203 - }
204 - })
205 - .catch(() => {});
206 - },
207 - //移除上传
208 - onRemoveUpload(options) {
209 - console.log(options);
210 - },
211 - // 搜索
212 - searchBtn() {
213 - this.pageConfig.pageData.page = 1;
214 - this.pageConfig.pageData.size = 10;
215 - this.$refs.ruleForm.handleSearch("ruleForm", (val) => {
216 - this.queryFindShipmentDescList();
217 - });
218 - },
219 - // 确认对话框
220 - dialogConfirm() {},
221 - // 上传
222 - upLoadTemplate() {
223 - // console.log(this.$refs.modleViewRef);
224 - },
225 - // 导出
226 - exportTemplate(row, i) {
227 - this.tableAttr.btnCofig.btnGroup[i].loading = true;
228 - downLoadXlsx("/etes/exportShipmentDescList", this.queryForm, "HSCODE英文品名黑名单表")
229 - .then(() => {
230 - this.tableAttr.btnCofig.btnGroup[i].loading = false;
231 - })
232 - .catch(() => {
233 - this.$message.error("导出失败");
234 - });
235 - },
236 - // 删除
237 - deleteData(row) {
238 - if (this.multipleSelection.length) {
239 - let params = [];
240 - this.multipleSelection.map((item) => {
241 - params.push(item.id);
242 - });
243 - this.$confirm("是否确认删除?", "提示", {
244 - confirmButtonText: "确定",
245 - cancelButtonText: "取消",
246 - type: "warning",
247 - center: true,
248 - })
249 - .then(() => {
250 - this.toDelBlackList(params);
251 - })
252 - .catch(() => {});
253 - } else {
254 - this.$message.error("请勾选一条或者多条数据再操作!");
255 - }
256 - },
257 - //条数变化
258 - handleSizeChange(e) {
259 - this.pageConfig.pageData.size = e;
260 - this.pageConfig.pageData.page = 1;
261 - this.queryFindShipmentDescList();
262 - },
263 - //页码变化
264 - handleCurrentChange(e) {
265 - this.pageConfig.pageData.page = e;
266 - this.queryFindShipmentDescList();
267 - },
268 - // table勾选
269 - tableSelectionChange(val) {
270 - this.multipleSelection = val;
271 - },
272 - // 删除
273 - deleteRow({ row }) {
274 - this.$confirm("是否确认删除?", "提示", {
275 - confirmButtonText: "确定",
276 - cancelButtonText: "取消",
277 - type: "warning",
278 - center: true,
279 - })
280 - .then(() => {
281 - this.toDelBlackList([row.id]);
282 - })
283 - .catch(() => {});
284 - },
285 - },
286 -};
287 -</script>
288 -<style lang="scss" scoped></style>
1 -export const tableAttr = {
2 - border: true,
3 - loadingTable: false,
4 - isDragSort: false, // 拖拽tableData数据一定要加id字段
5 - maxHeight: 300,
6 - btnCofig: {
7 - isBtn: true,
8 - btnGroup: [
9 - {
10 - type: "primary", // text、primary、danger
11 - icon: "el-icon-search", // el-icon-edit 、el-icon-delete、el-icon-plus、el-icon-download、el-icon-upload el-icon--right
12 - btnName: "搜索",
13 - size: "mini", // medium / small / mini
14 - round: false,
15 - loading: false,
16 - event: "search",
17 - },
18 - {
19 - type: "primary",
20 - icon: "el-icon-upload",
21 - btnName: "导入",
22 - size: "mini",
23 - round: false,
24 - loading: false,
25 - event: "upLoad",
26 - action: "/goods/uploadGoodsExcel",
27 - fileName: "name",
28 - limit: 1,
29 - accept: ".xlsx",
30 - },
31 - {
32 - type: "primary",
33 - icon: "el-icon-download",
34 - btnName: "导出",
35 - size: "mini",
36 - round: false,
37 - loading: false,
38 - event: "export",
39 - },
40 - {
41 - type: "danger",
42 - icon: "el-icon-delete",
43 - btnName: "删除",
44 - size: "mini",
45 - round: false,
46 - loading: false,
47 - event: "delete",
48 - },
49 - ],
50 - },
51 -};
52 -export const columnHeader = (deleteRow) => [
53 - {
54 - type: "selection",
55 - align: "center",
56 - prop: "selection",
57 - width: "50",
58 - },
59 - {
60 - type: "index",
61 - label: "序号",
62 - prop: "id",
63 - align: "center",
64 - width: "50",
65 - },
66 - {
67 - label: "ShipmentDesc",
68 - prop: "blackValue",
69 - align: "center",
70 - minWidth: 100,
71 - },
72 - {
73 - label: "创建时间",
74 - prop: "createTime",
75 - align: "center",
76 - minWidth: 100,
77 - },
78 - {
79 - label: "创建人",
80 - prop: "createUserName",
81 - align: "center",
82 - minWidth: 100,
83 - },
84 - {
85 - label: "文件名",
86 - prop: "uploadFileName",
87 - align: "center",
88 - minWidth: 100,
89 - },
90 -
91 - {
92 - label: "操作",
93 - prop: "operate",
94 - align: "center",
95 - minWidth: 120,
96 - fixed: "right",
97 - render: (h, params) => {
98 - return h("div", [
99 - h(
100 - "el-button",
101 - {
102 - style: {
103 - color: "#ff4949",
104 - },
105 - props: {
106 - type: "text",
107 - size: "mini",
108 - icon: "el-icon-delete",
109 - },
110 - on: {
111 - click() {
112 - deleteRow(params);
113 - },
114 - },
115 - },
116 - "删除"
117 - ),
118 - ]);
119 - },
120 - },
121 -];