Showing
5 changed files
with
187 additions
and
40 deletions
| ... | @@ -2,17 +2,43 @@ | ... | @@ -2,17 +2,43 @@ |
| 2 | <div class="table-container"> | 2 | <div class="table-container"> |
| 3 | <el-row v-if="attrs.btnCofig.isBtn" style="margin-bottom: 15px"> | 3 | <el-row v-if="attrs.btnCofig.isBtn" style="margin-bottom: 15px"> |
| 4 | <el-col> | 4 | <el-col> |
| 5 | - <el-button | 5 | + <span |
| 6 | - v-for="item in attrs.btnCofig.btnGroup" | 6 | + v-for="(item, i) in attrs.btnCofig.btnGroup" |
| 7 | :key="item.btnName" | 7 | :key="item.btnName" |
| 8 | + :class="i == 0 ? 'first-span' : 'span'" | ||
| 9 | + > | ||
| 10 | + <el-button | ||
| 8 | :type="item.type" | 11 | :type="item.type" |
| 9 | :icon="item.icon" | 12 | :icon="item.icon" |
| 10 | :round="item.round" | 13 | :round="item.round" |
| 11 | :size="item.size" | 14 | :size="item.size" |
| 12 | :loading="item.loading" | 15 | :loading="item.loading" |
| 13 | @click="handleClick(item)" | 16 | @click="handleClick(item)" |
| 17 | + v-if="item.btnName !== '导入' && item.btnName !== '导出'" | ||
| 18 | + >{{ item.btnName }}</el-button | ||
| 19 | + > | ||
| 20 | + <el-upload | ||
| 21 | + v-else | ||
| 22 | + ref="upload" | ||
| 23 | + :action="item.action" | ||
| 24 | + :fileName="item.fileName" | ||
| 25 | + :http-request="toUpload" | ||
| 26 | + :on-remove="onRemoveUpload" | ||
| 27 | + :limit="item.limit" | ||
| 28 | + :accept="item.accept" | ||
| 29 | + :show-file-list="false" | ||
| 30 | + class="upload" | ||
| 31 | + > | ||
| 32 | + <el-button | ||
| 33 | + :type="item.type" | ||
| 34 | + :icon="item.icon" | ||
| 35 | + :round="item.round" | ||
| 36 | + :size="item.size" | ||
| 37 | + :loading="item.loading" | ||
| 14 | >{{ item.btnName }}</el-button | 38 | >{{ item.btnName }}</el-button |
| 15 | > | 39 | > |
| 40 | + </el-upload> | ||
| 41 | + </span> | ||
| 16 | </el-col> | 42 | </el-col> |
| 17 | </el-row> | 43 | </el-row> |
| 18 | <el-table | 44 | <el-table |
| ... | @@ -231,6 +257,14 @@ export default { | ... | @@ -231,6 +257,14 @@ export default { |
| 231 | }, | 257 | }, |
| 232 | }); | 258 | }); |
| 233 | }, | 259 | }, |
| 260 | + // 选择上传 | ||
| 261 | + toUpload(options) { | ||
| 262 | + this.$emit("upload", options); | ||
| 263 | + }, | ||
| 264 | + //移除上传 | ||
| 265 | + onRemoveUpload(file, fileList) { | ||
| 266 | + this.$emit("rmfile", { file, fileList }); | ||
| 267 | + }, | ||
| 234 | }, | 268 | }, |
| 235 | watch: { | 269 | watch: { |
| 236 | data() { | 270 | data() { |
| ... | @@ -250,4 +284,10 @@ export default { | ... | @@ -250,4 +284,10 @@ export default { |
| 250 | padding: 0; | 284 | padding: 0; |
| 251 | } | 285 | } |
| 252 | } | 286 | } |
| 287 | + .first-span,.span{ | ||
| 288 | + display: inline-block; | ||
| 289 | + } | ||
| 290 | + .span{ | ||
| 291 | + margin-left: 6px; | ||
| 292 | + } | ||
| 253 | </style> | 293 | </style> | ... | ... |
| 1 | <template> | 1 | <template> |
| 2 | <div class="error-container"> | 2 | <div class="error-container"> |
| 3 | <el-dialog | 3 | <el-dialog |
| 4 | - title="错误信息" | 4 | + :width="width" |
| 5 | + :title="title" | ||
| 6 | + :center="center" | ||
| 5 | :visible.sync="dialogVisible" | 7 | :visible.sync="dialogVisible" |
| 8 | + :close-on-click-modal="onModalClickClose" | ||
| 6 | @open="dialogOpenEvent" | 9 | @open="dialogOpenEvent" |
| 7 | @close="dialogCloseEvent" | 10 | @close="dialogCloseEvent" |
| 8 | > | 11 | > |
| 9 | - <el-table :data="errorMessageData"> | 12 | + <slot></slot> |
| 10 | - <el-table-column | 13 | + <span slot="footer" class="dialog-footer"> |
| 11 | - type="index" | 14 | + <el-button @click="cancel">取 消</el-button> |
| 12 | - width="50" | 15 | + <el-button type="primary" @click="confirm">{{ |
| 13 | - align="center" | 16 | + confirmBtnName |
| 14 | - ></el-table-column> | 17 | + }}</el-button> |
| 15 | - <el-table-column label="错误信息" prop="errorMessage" width="200"> | 18 | + </span> |
| 16 | - <template slot-scope="scope"> | ||
| 17 | - <div v-for="(m, key) in scope.row.errorMessage" :key="key"> | ||
| 18 | - {{ m }} | ||
| 19 | - </div> | ||
| 20 | - </template> | ||
| 21 | - </el-table-column> | ||
| 22 | - </el-table> | ||
| 23 | </el-dialog> | 19 | </el-dialog> |
| 24 | </div> | 20 | </div> |
| 25 | </template> | 21 | </template> |
| 26 | 22 | ||
| 27 | - <script> | 23 | +<script> |
| 28 | export default { | 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 | + }, | ||
| 29 | data() { | 47 | data() { |
| 30 | return { | 48 | return { |
| 31 | dialogVisible: false, | 49 | dialogVisible: false, |
| 32 | - errorMessageData: [], | ||
| 33 | }; | 50 | }; |
| 34 | }, | 51 | }, |
| 35 | computed: {}, | 52 | computed: {}, |
| ... | @@ -38,7 +55,6 @@ export default { | ... | @@ -38,7 +55,6 @@ export default { |
| 38 | methods: { | 55 | methods: { |
| 39 | dialogOpenEvent(data) { | 56 | dialogOpenEvent(data) { |
| 40 | if (data && data.length) { | 57 | if (data && data.length) { |
| 41 | - this.errorMessageData = data; | ||
| 42 | console.log(data); | 58 | console.log(data); |
| 43 | } | 59 | } |
| 44 | this.dialogVisible = true; | 60 | this.dialogVisible = true; |
| ... | @@ -48,9 +64,19 @@ export default { | ... | @@ -48,9 +64,19 @@ export default { |
| 48 | this.dialogVisible = false; | 64 | this.dialogVisible = false; |
| 49 | this.$emit("close"); | 65 | this.$emit("close"); |
| 50 | }, | 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 | + }, | ||
| 51 | }, | 77 | }, |
| 52 | }; | 78 | }; |
| 53 | </script> | 79 | </script> |
| 54 | - <style lang='scss' scoped> | 80 | +<style lang='scss' scoped> |
| 55 | 81 | ||
| 56 | - </style> | 82 | +</style> | ... | ... |
| ... | @@ -20,19 +20,69 @@ | ... | @@ -20,19 +20,69 @@ |
| 20 | :pageConfig="pageConfig" | 20 | :pageConfig="pageConfig" |
| 21 | @search="searchBtn" | 21 | @search="searchBtn" |
| 22 | @download="downloadTemplate" | 22 | @download="downloadTemplate" |
| 23 | - @upLoad="upLoadTemplate" | 23 | + @upload="toUpload" |
| 24 | - @export="exportTemplate" | 24 | + @rmfile="onRemoveUpload" |
| 25 | @delete="deleteData" | 25 | @delete="deleteData" |
| 26 | @sizeChange="handleSizeChange" | 26 | @sizeChange="handleSizeChange" |
| 27 | @currentChange="handleCurrentChange" | 27 | @currentChange="handleCurrentChange" |
| 28 | > | 28 | > |
| 29 | </yl-table> | 29 | </yl-table> |
| 30 | + <!-- <modle-view | ||
| 31 | + ref="modleViewRef" | ||
| 32 | + width="30%" | ||
| 33 | + title="导入Excel" | ||
| 34 | + confirmBtnName="导入Excel" | ||
| 35 | + @confirm="dialogConfirm" | ||
| 36 | + > | ||
| 37 | + <el-form | ||
| 38 | + :model="paramsForm" | ||
| 39 | + :rules="rules" | ||
| 40 | + ref="ruleForm" | ||
| 41 | + label-width="80px" | ||
| 42 | + > | ||
| 43 | + <el-row> | ||
| 44 | + <el-col :span="20"> | ||
| 45 | + <el-form-item | ||
| 46 | + label="商品名称" | ||
| 47 | + prop="skuName" | ||
| 48 | + size="small" | ||
| 49 | + label-position="left" | ||
| 50 | + > | ||
| 51 | + <el-input | ||
| 52 | + v-model="paramsForm.skuName" | ||
| 53 | + placeholder="请输入商品名称" | ||
| 54 | + ></el-input> | ||
| 55 | + </el-form-item> | ||
| 56 | + </el-col> | ||
| 57 | + </el-row> | ||
| 58 | + <el-row> | ||
| 59 | + <el-col> | ||
| 60 | + <el-form-item prop="file"> | ||
| 61 | + <el-upload | ||
| 62 | + ref="upload" | ||
| 63 | + action="/goods/uploadGoodsExcel" | ||
| 64 | + name="file" | ||
| 65 | + :http-request="toUpload" | ||
| 66 | + :on-remove="onRemoveUpload" | ||
| 67 | + :limit="1" | ||
| 68 | + accept=".xlsx" | ||
| 69 | + class="upload" | ||
| 70 | + > | ||
| 71 | + <el-button type="primary" icon="el-icon-upload2" size="small" | ||
| 72 | + >选择文件</el-button | ||
| 73 | + > | ||
| 74 | + </el-upload> | ||
| 75 | + </el-form-item> | ||
| 76 | + </el-col> | ||
| 77 | + </el-row> | ||
| 78 | + </el-form> | ||
| 79 | + </modle-view> --> | ||
| 30 | </div> | 80 | </div> |
| 31 | </template> | 81 | </template> |
| 32 | - | ||
| 33 | <script> | 82 | <script> |
| 34 | import YlForm from "@/components/YlForm"; | 83 | import YlForm from "@/components/YlForm"; |
| 35 | import YlTable from "@/components/YlTable"; | 84 | import YlTable from "@/components/YlTable"; |
| 85 | +import ModleView from "./components/ModleView"; | ||
| 36 | import { formConfig } from "./formConfig"; | 86 | import { formConfig } from "./formConfig"; |
| 37 | import { tableAttr, columnHeader } from "./tableConfig"; | 87 | import { tableAttr, columnHeader } from "./tableConfig"; |
| 38 | export default { | 88 | export default { |
| ... | @@ -40,11 +90,21 @@ export default { | ... | @@ -40,11 +90,21 @@ export default { |
| 40 | components: { | 90 | components: { |
| 41 | YlForm, | 91 | YlForm, |
| 42 | YlTable, | 92 | YlTable, |
| 93 | + ModleView, | ||
| 43 | }, | 94 | }, |
| 44 | data() { | 95 | data() { |
| 45 | return { | 96 | return { |
| 46 | formConfig: formConfig, // 表单配置项 | 97 | formConfig: formConfig, // 表单配置项 |
| 47 | queryForm: {}, // 表单参数 | 98 | queryForm: {}, // 表单参数 |
| 99 | + paramsForm: { | ||
| 100 | + skuName: "", | ||
| 101 | + file: null, | ||
| 102 | + }, | ||
| 103 | + rules: { | ||
| 104 | + skuName: [ | ||
| 105 | + { required: true, message: "请输入商品名称", trigger: "blur" }, | ||
| 106 | + ], | ||
| 107 | + }, | ||
| 48 | pageConfig: { | 108 | pageConfig: { |
| 49 | // 分页配置项 | 109 | // 分页配置项 |
| 50 | isPagination: true, | 110 | isPagination: true, |
| ... | @@ -63,17 +123,29 @@ export default { | ... | @@ -63,17 +123,29 @@ export default { |
| 63 | created() {}, | 123 | created() {}, |
| 64 | methods: { | 124 | methods: { |
| 65 | // 失焦事件 | 125 | // 失焦事件 |
| 66 | - blurEvent() { | 126 | + blurEvent() {}, |
| 67 | - | 127 | + // 选择上传 |
| 128 | + toUpload(options) { | ||
| 129 | + console.log(options); | ||
| 130 | + }, | ||
| 131 | + //移除上传 | ||
| 132 | + onRemoveUpload(options) { | ||
| 133 | + console.log(options); | ||
| 68 | }, | 134 | }, |
| 69 | // 搜索 | 135 | // 搜索 |
| 70 | searchBtn() { | 136 | searchBtn() { |
| 71 | this.$refs.ruleForm.handleSearch("ruleForm", (val) => {}); | 137 | this.$refs.ruleForm.handleSearch("ruleForm", (val) => {}); |
| 72 | }, | 138 | }, |
| 139 | + // 确认对话框 | ||
| 140 | + dialogConfirm() {}, | ||
| 73 | // 下载 | 141 | // 下载 |
| 74 | - downloadTemplate() {}, | 142 | + downloadTemplate() { |
| 143 | + // this.$refs.modleViewRef.dialogOpenEvent(); | ||
| 144 | + }, | ||
| 75 | // 上传 | 145 | // 上传 |
| 76 | - upLoadTemplate() {}, | 146 | + upLoadTemplate() { |
| 147 | + // console.log(this.$refs.modleViewRef); | ||
| 148 | + }, | ||
| 77 | // 导出 | 149 | // 导出 |
| 78 | exportTemplate() {}, | 150 | exportTemplate() {}, |
| 79 | // 删除 | 151 | // 删除 | ... | ... |
| ... | @@ -32,6 +32,10 @@ export const tableAttr = { | ... | @@ -32,6 +32,10 @@ export const tableAttr = { |
| 32 | round: false, | 32 | round: false, |
| 33 | loading: false, | 33 | loading: false, |
| 34 | event: "upLoad", | 34 | event: "upLoad", |
| 35 | + action: "/goods/uploadGoodsExcel", | ||
| 36 | + fileName: "name", | ||
| 37 | + limit: 1, | ||
| 38 | + accept: ".xlsx", | ||
| 35 | }, | 39 | }, |
| 36 | { | 40 | { |
| 37 | type: "primary", | 41 | type: "primary", |
| ... | @@ -41,6 +45,10 @@ export const tableAttr = { | ... | @@ -41,6 +45,10 @@ export const tableAttr = { |
| 41 | round: false, | 45 | round: false, |
| 42 | loading: false, | 46 | loading: false, |
| 43 | event: "export", | 47 | event: "export", |
| 48 | + action: "/goods/uploadGoodsExcel", | ||
| 49 | + fileName: "name", | ||
| 50 | + limit: 1, | ||
| 51 | + accept: ".xlsx", | ||
| 44 | }, | 52 | }, |
| 45 | { | 53 | { |
| 46 | type: "danger", | 54 | type: "danger", |
| ... | @@ -69,35 +77,36 @@ export const columnHeader = (deleteRow) => [ | ... | @@ -69,35 +77,36 @@ export const columnHeader = (deleteRow) => [ |
| 69 | width: "50", | 77 | width: "50", |
| 70 | }, | 78 | }, |
| 71 | { | 79 | { |
| 72 | - label: "货站名称", | 80 | + label: "口岸", |
| 73 | prop: "portName", | 81 | prop: "portName", |
| 74 | align: "center", | 82 | align: "center", |
| 75 | minWidth: 100, | 83 | minWidth: 100, |
| 76 | }, | 84 | }, |
| 77 | { | 85 | { |
| 78 | - label: "品名", | 86 | + label: "HSCODE", |
| 79 | - prop: "goodsName", | 87 | + prop: "goodsCode", |
| 80 | align: "center", | 88 | align: "center", |
| 81 | minWidth: 100, | 89 | minWidth: 100, |
| 82 | }, | 90 | }, |
| 83 | { | 91 | { |
| 84 | - label: "操作人", | 92 | + label: "创建时间", |
| 85 | - prop: "updateUserName", | 93 | + prop: "createTime", |
| 86 | align: "center", | 94 | align: "center", |
| 87 | minWidth: 100, | 95 | minWidth: 100, |
| 88 | }, | 96 | }, |
| 89 | { | 97 | { |
| 90 | - label: "操作时间", | 98 | + label: "创建人", |
| 91 | - prop: "updateTime", | 99 | + prop: "createUserName", |
| 92 | align: "center", | 100 | align: "center", |
| 93 | minWidth: 100, | 101 | minWidth: 100, |
| 94 | }, | 102 | }, |
| 95 | { | 103 | { |
| 96 | - label: "创建时间", | 104 | + label: "文件名", |
| 97 | - prop: "createTime", | 105 | + prop: "fileName", |
| 98 | align: "center", | 106 | align: "center", |
| 99 | minWidth: 100, | 107 | minWidth: 100, |
| 100 | }, | 108 | }, |
| 109 | + | ||
| 101 | { | 110 | { |
| 102 | label: "操作", | 111 | label: "操作", |
| 103 | prop: "operate", | 112 | prop: "operate", | ... | ... |
| ... | @@ -186,7 +186,7 @@ export default { | ... | @@ -186,7 +186,7 @@ export default { |
| 186 | cancelButtonText: '取消', | 186 | cancelButtonText: '取消', |
| 187 | type: "warning", | 187 | type: "warning", |
| 188 | }).then(() => { | 188 | }).then(() => { |
| 189 | - this.statusChange({ id: val.id, status: status }) | 189 | + this.statusChange({ id: val.id, status: status, tip: tip }) |
| 190 | }).catch(() => { }) | 190 | }).catch(() => { }) |
| 191 | } else { | 191 | } else { |
| 192 | this.msgWarning(res.msg) | 192 | this.msgWarning(res.msg) |
| ... | @@ -200,7 +200,7 @@ export default { | ... | @@ -200,7 +200,7 @@ export default { |
| 200 | cancelButtonText: '取消', | 200 | cancelButtonText: '取消', |
| 201 | type: "warning", | 201 | type: "warning", |
| 202 | }).then(() => { | 202 | }).then(() => { |
| 203 | - this.statusChange({ id: val.id, status: status }) | 203 | + this.statusChange({ id: val.id, status: status, tip: tip }) |
| 204 | }).catch(() => { }) | 204 | }).catch(() => { }) |
| 205 | } | 205 | } |
| 206 | }, | 206 | }, | ... | ... |
-
Please register or login to post a comment