[li_she]
4 years ago
8 changed files with 1649 additions and 21 deletions
-
19src/api/print/outBoxPrint.js
-
2src/api/print/print.js
-
30src/utils/decimalUtil.js
-
25src/views/modules/common/print-list.vue
-
26src/views/modules/common/user-print-list.vue
-
701src/views/modules/labelPrint/outer-box-label-roll.vue
-
694src/views/modules/labelPrint/outer-box-label.vue
-
173src/views/modules/oss/oss1.vue
@ -0,0 +1,19 @@ |
|||
import { createAPI } from "@/utils/httpRequest.js"; |
|||
|
|||
// 根据订单获取打印数据
|
|||
export const getBoxLabelSO = data => createAPI(`/outBoxPrint/getBoxLabelSO/${data}`,'get') |
|||
|
|||
// 根据卷号获取 打印数据
|
|||
export const getBoxLabelSOByRollNo = data => createAPI(`/outBoxPrint/getBoxLabelSOByRollNo/${data}`,'get') |
|||
|
|||
// 获取可用模板列表
|
|||
export const getReportFileByCustomer = data => createAPI(`/outBoxPrint/getReportFileByCustomer/${data.customerId}/${data.reportFamily}`,'get') |
|||
|
|||
// 获取子模版列表
|
|||
export const getReportSubFileList = data => createAPI(`/outBoxPrint/getReportSubFileList`,'post',data) |
|||
|
|||
// 获取模板手工参数
|
|||
export const getReportParameters = data => createAPI(`/outBoxPrint/getReportParameters/${data}`,'get') |
|||
|
|||
// 打印
|
|||
export const ouBoxPrintLabel = data => createAPI(`/outBoxPrint/ouBoxPrintLabel`,'post',data) |
|||
@ -1,7 +1,7 @@ |
|||
import { createAPI } from "@/utils/httpRequest.js"; |
|||
|
|||
// 获取用户打印机
|
|||
export const getUserLabelPrintList = data => createAPI(`/sysUserPrinter/getUserPrint/${data.userName}`,'get') |
|||
export const getUserLabelPrintList = data => createAPI(`/sysUserPrinter/getUserPrintReportList`,'post',data) |
|||
|
|||
// 保存用户打印机
|
|||
export const saveUserLabelPrint = data => createAPI('/sysUserPrinter/saveUserLabelPrint','post',data) |
|||
@ -0,0 +1,701 @@ |
|||
<template> |
|||
<div class="sl-el"> |
|||
|
|||
<el-container> |
|||
<el-main style="width: 75%"> |
|||
<el-row> |
|||
<el-col :span="18"> |
|||
<el-form @submit.native.prevent label-position="top"> |
|||
<el-form-item style="width: 60%" :label="'请输入卷号:'"> |
|||
<el-input placeholder="请输入内容" v-model="rollNo" class="input-with-select" |
|||
@keyup.enter.native="getBoxSoAndReportFile()"> |
|||
<el-button @click="getBoxSoAndReportFile()" slot="append" icon="el-icon-search"></el-button> |
|||
</el-input> |
|||
</el-form-item> |
|||
</el-form> |
|||
</el-col> |
|||
<el-col :span="6"></el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="24"> |
|||
<span>请选择标签:</span> |
|||
<el-table |
|||
:data="reportFileList" |
|||
border |
|||
ref="reportFileTable" |
|||
highlight-current-row |
|||
@current-change="handleCurrentChange" |
|||
height="150px"> |
|||
<el-table-column |
|||
v-for="(item,index) in reportColumnList" :key="index" |
|||
:sortable="item.columnSortable" |
|||
:prop="item.columnProp" |
|||
:header-align="item.headerAlign" |
|||
:show-overflow-tooltip="item.showOverflowTooltip" |
|||
:align="item.align" |
|||
:fixed="item.fixed" |
|||
:min-width="item.columnWidth" |
|||
|
|||
:label="item.columnLabel"> |
|||
<template slot-scope="scope"> |
|||
<span v-if="!item.columnHidden"> {{ scope.row[item.columnProp] }}</span> |
|||
<span v-if="item.columnImage"><img :src="scope.row[item.columnProp]" |
|||
style="width: 100px; height: 80px"/></span> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</el-col> |
|||
|
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="24"> |
|||
<span>打印格式名称:</span> |
|||
<el-input type="textarea" v-model="selectReportString" readonly :rows="3"></el-input> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="24"> |
|||
<fieldset class="customer-fieldset" style="width: 100%; margin-left: 0px"> |
|||
<legend>数量</legend> |
|||
<el-form inline="inline" style="width: 100%" label-position="top"> |
|||
<el-form-item style="width: 23%;" label="总数量"> |
|||
<el-input type="number" v-model="orderInfo.totalQty" min="1"></el-input> |
|||
</el-form-item> |
|||
<el-form-item style="width: 23%;" label="每箱数量"> |
|||
<el-input type="number" v-model="orderInfo.perBoxQty" min="1"></el-input> |
|||
</el-form-item> |
|||
<el-form-item style="width: 23%;" label="箱数"> |
|||
<el-input v-model="orderInfo.boxQty" readonly></el-input> |
|||
</el-form-item> |
|||
<el-form-item style="width: 23%;" label="末箱数量"> |
|||
<el-input v-model="orderInfo.lastBoxQty" readonly></el-input> |
|||
</el-form-item> |
|||
</el-form> |
|||
</fieldset> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="24"> |
|||
<el-tabs style="font-size: 14px" v-model="activeName" type="border-card" @tab-click="handleClick" |
|||
class="customer-tab"> |
|||
<el-tab-pane label="打印参数" name="first"> |
|||
<el-table |
|||
:data="reportParamList" |
|||
:cell-style="customerCellStyle" :cell-class-name="customerCellClassName" |
|||
border |
|||
:height="height" |
|||
> |
|||
<el-table-column |
|||
v-for="(item,index) in printParamColumnList" :key="index" |
|||
:sortable="item.columnSortable" |
|||
:prop="item.columnProp" |
|||
:header-align="item.headerAlign" |
|||
:show-overflow-tooltip="item.showOverflowTooltip" |
|||
:align="item.align" |
|||
:fixed="item.fixed" |
|||
:min-width="item.columnWidth" |
|||
:label="item.columnLabel"> |
|||
<template slot-scope="scope"> |
|||
<span v-if="item.columnHidden"> |
|||
<span v-if="scope.row.valuetypeDb === 'T'"> |
|||
<el-input v-model='scope.row[item.columnProp]'> </el-input> |
|||
</span> |
|||
<span v-if="scope.row.valuetypeDb === 'D'"> |
|||
<el-date-picker style="width: 100%;" |
|||
v-model='scope.row[item.columnProp]'> </el-date-picker> |
|||
</span> |
|||
<span v-if="scope.row.valuetypeDb === 'I'"> |
|||
<el-input type="number" v-model='scope.row[item.columnProp]' min="1"> </el-input> |
|||
</span> |
|||
|
|||
</span> |
|||
<span v-else>{{ scope.row[item.columnProp] }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</el-tab-pane> |
|||
<el-tab-pane style="font-size: 12px" label="标签内容预览" name="second"> |
|||
<el-table |
|||
border |
|||
:height="height" |
|||
> |
|||
<el-table-column |
|||
v-for="(item,index) in reportContextColumnList" :key="index" |
|||
:sortable="item.columnSortable" |
|||
:prop="item.columnProp" |
|||
:header-align="item.headerAlign" |
|||
:show-overflow-tooltip="item.showOverflowTooltip" |
|||
:align="item.align" |
|||
:fixed="item.fixed" |
|||
:min-width="item.columnWidth" |
|||
|
|||
:label="item.columnLabel"> |
|||
<template slot-scope="scope"> |
|||
<span v-if="!item.columnHidden"> {{ scope.row[item.columnProp] }}</span> |
|||
<span v-if="item.columnImage"><img :src="scope.row[item.columnProp]" |
|||
style="width: 100px; height: 80px"/></span> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</el-tab-pane> |
|||
</el-tabs> |
|||
</el-col> |
|||
</el-row> |
|||
</el-main> |
|||
<el-main style="margin-left: 0px"> |
|||
<el-row> |
|||
<el-col :span="6"> |
|||
<el-form> |
|||
<el-form-item style="margin-top: 20px"> |
|||
<el-button type="primary">列表</el-button> |
|||
</el-form-item> |
|||
<el-form-item style="margin-top: 20px"> |
|||
<el-button type="primary" @click="bartenderPrint">打印</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</el-col> |
|||
</el-row> |
|||
</el-main> |
|||
</el-container> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
import { |
|||
getBoxLabelSOByRollNo, |
|||
getReportFileByCustomer, |
|||
getReportSubFileList, |
|||
getReportParameters, |
|||
ouBoxPrintLabel |
|||
} from '@/api/print/outBoxPrint.js'; |
|||
|
|||
export default { |
|||
components: {}, |
|||
data() { |
|||
return { |
|||
rollNo: '', |
|||
activeName: 'first', |
|||
height: 200, |
|||
// 模板 |
|||
reportColumnList: [ |
|||
{ |
|||
tableId: "common1001", |
|||
tableName: "common", |
|||
columnProp: "reportid", |
|||
columnLabel: "报告编号", |
|||
columnHidden: false, |
|||
columnImage: false, |
|||
columnSortable: false, |
|||
columnWidth: null, |
|||
format: null, |
|||
functionId: this.$route.meta.menuId, |
|||
sortLv: 0, |
|||
status: true, |
|||
fixed: false, |
|||
serialNumber: null, |
|||
columnType: null, |
|||
align: null |
|||
}, { |
|||
tableId: "common1001", |
|||
tableName: "common", |
|||
columnProp: "Reportfile", |
|||
columnLabel: "报告文件名", |
|||
columnHidden: false, |
|||
columnImage: false, |
|||
columnSortable: false, |
|||
columnWidth: null, |
|||
format: null, |
|||
functionId: this.$route.meta.menuId, |
|||
sortLv: 0, |
|||
status: true, |
|||
fixed: false, |
|||
serialNumber: null, |
|||
columnType: null, |
|||
align: null |
|||
}, { |
|||
tableId: "common1001", |
|||
tableName: "common", |
|||
columnProp: "Remark", |
|||
columnLabel: "备注", |
|||
columnHidden: false, |
|||
columnImage: false, |
|||
columnSortable: false, |
|||
columnWidth: null, |
|||
format: null, |
|||
functionId: this.$route.meta.menuId, |
|||
sortLv: 0, |
|||
status: true, |
|||
fixed: false, |
|||
serialNumber: null, |
|||
columnType: null, |
|||
align: null |
|||
}, { |
|||
tableId: "common1001", |
|||
tableName: "common", |
|||
columnProp: "DefaultFlag", |
|||
columnLabel: "默认格式", |
|||
columnHidden: false, |
|||
columnImage: false, |
|||
columnSortable: false, |
|||
columnWidth: null, |
|||
format: null, |
|||
functionId: this.$route.meta.menuId, |
|||
sortLv: 0, |
|||
status: true, |
|||
fixed: false, |
|||
serialNumber: null, |
|||
columnType: null, |
|||
align: null |
|||
}, |
|||
|
|||
], |
|||
// 打印参数 |
|||
printParamColumnList: [ |
|||
{ |
|||
tableId: "common1001", |
|||
tableName: "common", |
|||
columnProp: "parametername", |
|||
columnLabel: "参数名", |
|||
columnHidden: false, |
|||
columnImage: false, |
|||
columnSortable: false, |
|||
columnWidth: null, |
|||
format: null, |
|||
functionId: this.$route.meta.menuId, |
|||
sortLv: 0, |
|||
status: true, |
|||
fixed: false, |
|||
serialNumber: null, |
|||
columnType: null, |
|||
align: null |
|||
}, { |
|||
tableId: "common1001", |
|||
tableName: "common", |
|||
columnProp: "parameterdesc", |
|||
columnLabel: "参数标题", |
|||
columnHidden: false, |
|||
columnImage: false, |
|||
columnSortable: false, |
|||
columnWidth: null, |
|||
format: null, |
|||
functionId: this.$route.meta.menuId, |
|||
sortLv: 0, |
|||
status: true, |
|||
fixed: false, |
|||
serialNumber: null, |
|||
columnType: null, |
|||
align: null |
|||
}, { |
|||
tableId: "common1001", |
|||
tableName: "common", |
|||
columnProp: "optionvalue", |
|||
columnLabel: "参数值", |
|||
columnHidden: true, |
|||
columnImage: false, |
|||
columnSortable: false, |
|||
columnWidth: null, |
|||
format: null, |
|||
functionId: this.$route.meta.menuId, |
|||
sortLv: 0, |
|||
status: true, |
|||
fixed: false, |
|||
serialNumber: null, |
|||
columnType: null, |
|||
align: null |
|||
}, { |
|||
tableId: "common1001", |
|||
tableName: "common", |
|||
columnProp: "valuetype", |
|||
columnLabel: "参数类型", |
|||
columnHidden: false, |
|||
columnImage: false, |
|||
columnSortable: false, |
|||
columnWidth: null, |
|||
format: null, |
|||
functionId: this.$route.meta.menuId, |
|||
sortLv: 0, |
|||
status: true, |
|||
fixed: false, |
|||
serialNumber: null, |
|||
columnType: null, |
|||
align: null |
|||
}, |
|||
|
|||
], |
|||
// 标签内容 |
|||
reportContextColumnList: [ |
|||
{ |
|||
tableId: "common1001", |
|||
tableName: "common", |
|||
columnProp: "functionId", |
|||
columnLabel: "报告编号", |
|||
columnHidden: false, |
|||
columnImage: false, |
|||
columnSortable: false, |
|||
columnWidth: null, |
|||
format: null, |
|||
functionId: this.$route.meta.menuId, |
|||
sortLv: 0, |
|||
status: true, |
|||
fixed: false, |
|||
serialNumber: null, |
|||
columnType: null, |
|||
align: null |
|||
}, { |
|||
tableId: "common1001", |
|||
tableName: "common", |
|||
columnProp: "functionId", |
|||
columnLabel: "内容描述", |
|||
columnHidden: false, |
|||
columnImage: false, |
|||
columnSortable: false, |
|||
columnWidth: null, |
|||
format: null, |
|||
functionId: this.$route.meta.menuId, |
|||
sortLv: 0, |
|||
status: true, |
|||
fixed: false, |
|||
serialNumber: null, |
|||
columnType: null, |
|||
align: null |
|||
}, { |
|||
tableId: "common1001", |
|||
tableName: "common", |
|||
columnProp: "functionId", |
|||
columnLabel: "Bartender子字符串名", |
|||
columnHidden: false, |
|||
columnImage: false, |
|||
columnSortable: false, |
|||
columnWidth: null, |
|||
format: null, |
|||
functionId: this.$route.meta.menuId, |
|||
sortLv: 0, |
|||
status: true, |
|||
fixed: false, |
|||
serialNumber: null, |
|||
columnType: null, |
|||
align: null |
|||
}, { |
|||
tableId: "common1001", |
|||
tableName: "common", |
|||
columnProp: "functionId", |
|||
columnLabel: "内容值", |
|||
columnHidden: false, |
|||
columnImage: false, |
|||
columnSortable: false, |
|||
columnWidth: null, |
|||
format: null, |
|||
functionId: this.$route.meta.menuId, |
|||
sortLv: 0, |
|||
status: true, |
|||
fixed: false, |
|||
serialNumber: null, |
|||
columnType: null, |
|||
align: null |
|||
}, |
|||
|
|||
], |
|||
// 数据 |
|||
// 可用模板列表 |
|||
reportFileList: [], |
|||
// 选中模板列表 |
|||
selectReportFileList: [], |
|||
selectReportString: '', |
|||
// 数量 |
|||
orderInfo: { |
|||
userName: this.$store.state.user.name, |
|||
rollNo: '', |
|||
customerId: '', |
|||
totalQty: 0, |
|||
perBoxQty: 0, |
|||
boxQty: 0, |
|||
lastBoxQty: 0, |
|||
// 选中模板列表 |
|||
reportFileList: [], |
|||
// 手工参数 |
|||
param:[] |
|||
}, |
|||
// 临时参数记录 |
|||
tempParamList:[], |
|||
// 模板参数列表 |
|||
reportParamList: [], |
|||
buttons: { |
|||
settingLanguageList: '按语言设置', |
|||
edit: '编辑', |
|||
delete: '删除', |
|||
deleteList: '批量删除', |
|||
cz: '操作', |
|||
search: '查询', |
|||
download: '导出', |
|||
settingTable: '设置列表', |
|||
defaultTable: '设置默认配置', |
|||
list: "列表", |
|||
addList: '批量添加', |
|||
settingLanguage: "按控件设置" |
|||
}, |
|||
// 导出 end |
|||
buttonList: [ |
|||
{ |
|||
functionId: this.$route.meta.menuId, |
|||
languageValue: '按语言设置', |
|||
objectId: 'settingLanguageList', |
|||
objectType: "button", |
|||
tableId: "common1001" |
|||
}, |
|||
{ |
|||
functionId: this.$route.meta.menuId, |
|||
languageValue: '编辑', |
|||
objectId: 'edit', |
|||
objectType: "button", |
|||
tableId: "common1001" |
|||
}, |
|||
{ |
|||
functionId: this.$route.meta.menuId, |
|||
languageValue: '删除', |
|||
objectId: 'delete', |
|||
objectType: "button", |
|||
tableId: "common1001" |
|||
}, |
|||
{ |
|||
functionId: this.$route.meta.menuId, |
|||
languageValue: '批量删除', |
|||
objectId: 'deleteList', |
|||
objectType: "button", |
|||
tableId: "common1001" |
|||
}, |
|||
{ |
|||
functionId: this.$route.meta.menuId, |
|||
languageValue: '操作', |
|||
objectId: 'cz', |
|||
objectType: "button", |
|||
tableId: "common1001" |
|||
}, |
|||
{ |
|||
functionId: this.$route.meta.menuId, |
|||
languageValue: '查询', |
|||
objectId: 'search', |
|||
objectType: "button", |
|||
tableId: "common1001" |
|||
}, |
|||
{ |
|||
functionId: this.$route.meta.menuId, |
|||
languageValue: '导出', |
|||
objectId: 'download', |
|||
objectType: "button", |
|||
tableId: "common1001" |
|||
}, |
|||
{ |
|||
functionId: this.$route.meta.menuId, |
|||
languageValue: '设置列表', |
|||
objectId: 'settingTable', |
|||
objectType: "button", |
|||
tableId: "common1001" |
|||
}, |
|||
{ |
|||
functionId: this.$route.meta.menuId, |
|||
languageValue: '设置默认配置', |
|||
objectId: 'defaultTable', |
|||
objectType: "button", |
|||
tableId: "common1001" |
|||
}, |
|||
{ |
|||
functionId: this.$route.meta.menuId, |
|||
languageValue: '列表', |
|||
objectId: 'list', |
|||
objectType: "button", |
|||
tableId: "common1001" |
|||
}, |
|||
{ |
|||
functionId: this.$route.meta.menuId, |
|||
languageValue: '按控件设置', |
|||
objectId: 'settingLanguage', |
|||
objectType: "button", |
|||
tableId: "common1001" |
|||
} |
|||
], |
|||
} |
|||
}, |
|||
watch: { |
|||
orderInfo: { |
|||
handler: function (val, oldVal) { |
|||
if (this.orderInfo.totalQty > 0 && this.orderInfo.perBoxQty > 0) { |
|||
this.orderInfo.lastBoxQty = this.decimalUtil.mod(this.orderInfo.totalQty, this.orderInfo.perBoxQty) |
|||
if (this.decimalUtil.div(this.orderInfo.totalQty, this.orderInfo.perBoxQty) < 1) { |
|||
this.orderInfo.boxQty = 1 |
|||
} else { |
|||
this.orderInfo.boxQty = this.decimalUtil.formatDown(this.decimalUtil.div(this.orderInfo.totalQty, this.orderInfo.perBoxQty), 0) |
|||
} |
|||
|
|||
} |
|||
}, |
|||
// 深度观察监听 |
|||
deep: true |
|||
}, |
|||
updateData: { |
|||
deep: true, |
|||
handler: function (newV, oldV) { |
|||
this.updateData.projectID = this.updateData.projectID.toUpperCase(); |
|||
this.updateData.oriSOOrderNo = this.updateData.oriSOOrderNo.toUpperCase(); |
|||
this.updateData.orderType = this.updateData.orderType.toUpperCase(); |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.$nextTick(() => { |
|||
this.height = window.innerHeight - 510; |
|||
}) |
|||
}, |
|||
|
|||
methods: { |
|||
// 调用bartender打印 |
|||
bartenderPrint() { |
|||
if (this.selectReportFileList.length === 0) { |
|||
this.$message.warning('选择模板进行打印') |
|||
return |
|||
} |
|||
this.orderInfo.reportFileList = this.selectReportFileList |
|||
this.orderInfo.param = this.reportParamList |
|||
this.tempParamList = this.reportParamList |
|||
ouBoxPrintLabel(this.orderInfo).then(({data}) =>{ |
|||
if (data.code === 0 ){ |
|||
this.$message.success(data.msg) |
|||
}else { |
|||
this.$message.warning(data.msg) |
|||
} |
|||
}) |
|||
}, |
|||
// 获取订单信息 |
|||
searchBoxLabelSO() { |
|||
this.reportFileList = [] |
|||
getBoxLabelSOByRollNo(this.rollNo).then(({data}) => { |
|||
if (data.code === 0) { |
|||
this.orderInfo.customerId = data.data.customerId ? data.data.customerId : '*' |
|||
this.orderInfo.totalQty = data.data.sumQty |
|||
this.orderInfo.perBoxQty = data.data.boxQty |
|||
this.orderInfo.rollNo = this.rollNo |
|||
let query = { |
|||
customerId: data.data.customerId ? data.data.customerId : '*', |
|||
reportFamily: '外箱标签' |
|||
} |
|||
getReportFileByCustomer(query).then(({data}) => { |
|||
if (data.code === 0) { |
|||
this.reportFileList = data.dataList |
|||
this.$refs.reportFileTable.setCurrentRow(this.reportFileList[0]); |
|||
} else { |
|||
this.$message.warning(data.msg) |
|||
Object.assign(this.$data, this.$options.data.call(this.orderInfo)); |
|||
Object.assign(this.$data, this.$options.data.call(this.selectReportString)); |
|||
Object.assign(this.$data, this.$options.data.call(this.reportParamList)); |
|||
} |
|||
}) |
|||
} else { |
|||
this.$message.warning(data.msg) |
|||
Object.assign(this.$data, this.$options.data.call(this)); |
|||
} |
|||
}) |
|||
}, |
|||
// 获取订单数数据 和 打印 模板数据 |
|||
getBoxSoAndReportFile() { |
|||
this.searchBoxLabelSO() |
|||
}, |
|||
handleClick() { |
|||
|
|||
}, |
|||
// 选择模板 |
|||
handleCurrentChange(val) { |
|||
if (!val) return |
|||
this.selectReportFileList = [] |
|||
let query = { |
|||
reportId: val.reportid, |
|||
defaultFlag: val.DefaultFlag, |
|||
reportFile: val.Reportfile, |
|||
reportFamily: '外箱标签', |
|||
customerId: this.orderInfo.customerId, |
|||
} |
|||
this.selectReportFileList.push(query) |
|||
this.searchReportSubFileList(query) |
|||
this.searchReportParameters(query) |
|||
|
|||
}, |
|||
// 获取子模版 |
|||
searchReportSubFileList(val) { |
|||
let str = '' |
|||
str += val.reportId + ' | ' + val.reportFile + '\n' |
|||
this.selectReportString = str |
|||
getReportSubFileList(val).then(({data}) => { |
|||
if (data.code === 0) { |
|||
for (let item of data.data) { |
|||
str += item.reportid + ' | ' + item.Reportfile + '\n' |
|||
let reportFile = { |
|||
reportId: item.reportid, |
|||
defaultFlag: 'Y', |
|||
reportFile: item.Reportfile, |
|||
reportFamily: '外箱标签', |
|||
customerId: this.orderInfo.customerId, |
|||
} |
|||
this.selectReportFileList.push(reportFile) |
|||
} |
|||
this.selectReportString = str |
|||
} |
|||
}) |
|||
|
|||
}, |
|||
// 获取柱模版打印参数 |
|||
searchReportParameters(val) { |
|||
getReportParameters(val.reportId).then(({data}) => { |
|||
if (data.code === 0) { |
|||
this.reportParamList = data.data |
|||
this.tempParamList |
|||
for (let item of this.tempParamList) { |
|||
|
|||
} |
|||
} |
|||
}) |
|||
}, |
|||
/*添加定制的css类*/ |
|||
customerCellClassName({row, column, rowIndex, columnIndex}) { |
|||
if (columnIndex === 2) { |
|||
return 'customer-text-cell'; |
|||
} |
|||
}, |
|||
|
|||
/*添加定制的cess样式*/ |
|||
customerCellStyle({row, column, rowIndex, columnIndex}) { |
|||
if (columnIndex === 2) { |
|||
return 'padding: 0px 0px;'; |
|||
} |
|||
}, |
|||
}, |
|||
created() { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
<style scoped> |
|||
|
|||
/deep/ .customer-tab .el-tabs__content { |
|||
padding: 0px !important; |
|||
} |
|||
|
|||
/deep/ .sl-el .el-tabs__item { |
|||
padding: 0 13px; |
|||
height: 26px; |
|||
line-height: 26px; |
|||
font-size: 12px; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
/deep/ div.table-input { |
|||
padding: 0px 0px; |
|||
height: 25px !important; |
|||
} |
|||
|
|||
/*table中input*/ |
|||
div.table-input /deep/ input.el-input__inner { |
|||
padding: 0px 0px; |
|||
height: 23px !important; |
|||
text-align: right; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,694 @@ |
|||
<template> |
|||
<div class="sl-el"> |
|||
|
|||
<el-container> |
|||
<el-main style="width: 75%"> |
|||
<el-row> |
|||
<el-col :span="18"> |
|||
<el-form @submit.native.prevent label-position="top"> |
|||
<el-form-item style="width: 60%" :label="'请输入订单号:'"> |
|||
<el-input placeholder="请输入内容" v-model="orderNo" class="input-with-select" |
|||
@keyup.enter.native="getBoxSoAndReportFile()"> |
|||
<el-button @click="getBoxSoAndReportFile()" slot="append" icon="el-icon-search"></el-button> |
|||
</el-input> |
|||
</el-form-item> |
|||
</el-form> |
|||
</el-col> |
|||
<el-col :span="6"></el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="24"> |
|||
<span>请选择标签:</span> |
|||
<el-table |
|||
:data="reportFileList" |
|||
border |
|||
ref="reportFileTable" |
|||
highlight-current-row |
|||
@current-change="handleCurrentChange" |
|||
height="150px"> |
|||
<el-table-column |
|||
v-for="(item,index) in reportColumnList" :key="index" |
|||
:sortable="item.columnSortable" |
|||
:prop="item.columnProp" |
|||
:header-align="item.headerAlign" |
|||
:show-overflow-tooltip="item.showOverflowTooltip" |
|||
:align="item.align" |
|||
:fixed="item.fixed" |
|||
:min-width="item.columnWidth" |
|||
|
|||
:label="item.columnLabel"> |
|||
<template slot-scope="scope"> |
|||
<span v-if="!item.columnHidden"> {{ scope.row[item.columnProp] }}</span> |
|||
<span v-if="item.columnImage"><img :src="scope.row[item.columnProp]" |
|||
style="width: 100px; height: 80px"/></span> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</el-col> |
|||
|
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="24"> |
|||
<span>打印格式名称:</span> |
|||
<el-input type="textarea" v-model="selectReportString" readonly :rows="3"></el-input> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="24"> |
|||
<fieldset class="customer-fieldset" style="width: 100%; margin-left: 0px"> |
|||
<legend>数量</legend> |
|||
<el-form inline="inline" style="width: 100%" label-position="top"> |
|||
<el-form-item style="width: 23%;" label="总数量"> |
|||
<el-input type="number" v-model="orderInfo.totalQty" min="1"></el-input> |
|||
</el-form-item> |
|||
<el-form-item style="width: 23%;" label="每箱数量"> |
|||
<el-input type="number" v-model="orderInfo.perBoxQty" min="1"></el-input> |
|||
</el-form-item> |
|||
<el-form-item style="width: 23%;" label="箱数"> |
|||
<el-input v-model="orderInfo.boxQty" readonly></el-input> |
|||
</el-form-item> |
|||
<el-form-item style="width: 23%;" label="末箱数量"> |
|||
<el-input v-model="orderInfo.lastBoxQty" readonly></el-input> |
|||
</el-form-item> |
|||
</el-form> |
|||
</fieldset> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="24"> |
|||
<el-tabs style="font-size: 14px" v-model="activeName" type="border-card" @tab-click="handleClick" |
|||
class="customer-tab"> |
|||
<el-tab-pane label="打印参数" name="first"> |
|||
<el-table |
|||
:data="reportParamList" |
|||
:cell-style="customerCellStyle" :cell-class-name="customerCellClassName" |
|||
border |
|||
:height="height" |
|||
> |
|||
<el-table-column |
|||
v-for="(item,index) in printParamColumnList" :key="index" |
|||
:sortable="item.columnSortable" |
|||
:prop="item.columnProp" |
|||
:header-align="item.headerAlign" |
|||
:show-overflow-tooltip="item.showOverflowTooltip" |
|||
:align="item.align" |
|||
:fixed="item.fixed" |
|||
:min-width="item.columnWidth" |
|||
:label="item.columnLabel"> |
|||
<template slot-scope="scope"> |
|||
<span v-if="item.columnHidden"> |
|||
<span v-if="scope.row.valuetypeDb === 'T'"> |
|||
<el-input v-model='scope.row[item.columnProp]'> </el-input> |
|||
</span> |
|||
<span v-if="scope.row.valuetypeDb === 'D'"> |
|||
<el-date-picker style="width: 100%;" |
|||
v-model='scope.row[item.columnProp]'> </el-date-picker> |
|||
</span> |
|||
<span v-if="scope.row.valuetypeDb === 'I'"> |
|||
<el-input type="number" v-model='scope.row[item.columnProp]' min="1"> </el-input> |
|||
</span> |
|||
|
|||
</span> |
|||
<span v-else>{{ scope.row[item.columnProp] }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</el-tab-pane> |
|||
<el-tab-pane style="font-size: 12px" label="标签内容预览" name="second"> |
|||
<el-table |
|||
border |
|||
:height="height" |
|||
> |
|||
<el-table-column |
|||
v-for="(item,index) in reportContextColumnList" :key="index" |
|||
:sortable="item.columnSortable" |
|||
:prop="item.columnProp" |
|||
:header-align="item.headerAlign" |
|||
:show-overflow-tooltip="item.showOverflowTooltip" |
|||
:align="item.align" |
|||
:fixed="item.fixed" |
|||
:min-width="item.columnWidth" |
|||
|
|||
:label="item.columnLabel"> |
|||
<template slot-scope="scope"> |
|||
<span v-if="!item.columnHidden"> {{ scope.row[item.columnProp] }}</span> |
|||
<span v-if="item.columnImage"><img :src="scope.row[item.columnProp]" |
|||
style="width: 100px; height: 80px"/></span> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</el-tab-pane> |
|||
</el-tabs> |
|||
</el-col> |
|||
</el-row> |
|||
</el-main> |
|||
<el-main style="margin-left: 0px"> |
|||
<el-row> |
|||
<el-col :span="6"> |
|||
<el-form> |
|||
<el-form-item style="margin-top: 20px"> |
|||
<el-button type="primary">列表</el-button> |
|||
</el-form-item> |
|||
<el-form-item style="margin-top: 20px"> |
|||
<el-button type="primary" @click="bartenderPrint">打印</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</el-col> |
|||
</el-row> |
|||
</el-main> |
|||
</el-container> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
import { |
|||
getBoxLabelSO, |
|||
getReportFileByCustomer, |
|||
getReportSubFileList, |
|||
getReportParameters, |
|||
ouBoxPrintLabel |
|||
} from '@/api/print/outBoxPrint.js'; |
|||
|
|||
export default { |
|||
components: {}, |
|||
data() { |
|||
return { |
|||
orderNo: '', |
|||
activeName: 'first', |
|||
height: 200, |
|||
// 模板 |
|||
reportColumnList: [ |
|||
{ |
|||
tableId: "common1001", |
|||
tableName: "common", |
|||
columnProp: "reportid", |
|||
columnLabel: "报告编号", |
|||
columnHidden: false, |
|||
columnImage: false, |
|||
columnSortable: false, |
|||
columnWidth: null, |
|||
format: null, |
|||
functionId: this.$route.meta.menuId, |
|||
sortLv: 0, |
|||
status: true, |
|||
fixed: false, |
|||
serialNumber: null, |
|||
columnType: null, |
|||
align: null |
|||
}, { |
|||
tableId: "common1001", |
|||
tableName: "common", |
|||
columnProp: "Reportfile", |
|||
columnLabel: "报告文件名", |
|||
columnHidden: false, |
|||
columnImage: false, |
|||
columnSortable: false, |
|||
columnWidth: null, |
|||
format: null, |
|||
functionId: this.$route.meta.menuId, |
|||
sortLv: 0, |
|||
status: true, |
|||
fixed: false, |
|||
serialNumber: null, |
|||
columnType: null, |
|||
align: null |
|||
}, { |
|||
tableId: "common1001", |
|||
tableName: "common", |
|||
columnProp: "Remark", |
|||
columnLabel: "备注", |
|||
columnHidden: false, |
|||
columnImage: false, |
|||
columnSortable: false, |
|||
columnWidth: null, |
|||
format: null, |
|||
functionId: this.$route.meta.menuId, |
|||
sortLv: 0, |
|||
status: true, |
|||
fixed: false, |
|||
serialNumber: null, |
|||
columnType: null, |
|||
align: null |
|||
}, { |
|||
tableId: "common1001", |
|||
tableName: "common", |
|||
columnProp: "DefaultFlag", |
|||
columnLabel: "默认格式", |
|||
columnHidden: false, |
|||
columnImage: false, |
|||
columnSortable: false, |
|||
columnWidth: null, |
|||
format: null, |
|||
functionId: this.$route.meta.menuId, |
|||
sortLv: 0, |
|||
status: true, |
|||
fixed: false, |
|||
serialNumber: null, |
|||
columnType: null, |
|||
align: null |
|||
}, |
|||
|
|||
], |
|||
// 打印参数 |
|||
printParamColumnList: [ |
|||
{ |
|||
tableId: "common1001", |
|||
tableName: "common", |
|||
columnProp: "parametername", |
|||
columnLabel: "参数名", |
|||
columnHidden: false, |
|||
columnImage: false, |
|||
columnSortable: false, |
|||
columnWidth: null, |
|||
format: null, |
|||
functionId: this.$route.meta.menuId, |
|||
sortLv: 0, |
|||
status: true, |
|||
fixed: false, |
|||
serialNumber: null, |
|||
columnType: null, |
|||
align: null |
|||
}, { |
|||
tableId: "common1001", |
|||
tableName: "common", |
|||
columnProp: "parameterdesc", |
|||
columnLabel: "参数标题", |
|||
columnHidden: false, |
|||
columnImage: false, |
|||
columnSortable: false, |
|||
columnWidth: null, |
|||
format: null, |
|||
functionId: this.$route.meta.menuId, |
|||
sortLv: 0, |
|||
status: true, |
|||
fixed: false, |
|||
serialNumber: null, |
|||
columnType: null, |
|||
align: null |
|||
}, { |
|||
tableId: "common1001", |
|||
tableName: "common", |
|||
columnProp: "optionvalue", |
|||
columnLabel: "参数值", |
|||
columnHidden: true, |
|||
columnImage: false, |
|||
columnSortable: false, |
|||
columnWidth: null, |
|||
format: null, |
|||
functionId: this.$route.meta.menuId, |
|||
sortLv: 0, |
|||
status: true, |
|||
fixed: false, |
|||
serialNumber: null, |
|||
columnType: null, |
|||
align: null |
|||
}, { |
|||
tableId: "common1001", |
|||
tableName: "common", |
|||
columnProp: "valuetype", |
|||
columnLabel: "参数类型", |
|||
columnHidden: false, |
|||
columnImage: false, |
|||
columnSortable: false, |
|||
columnWidth: null, |
|||
format: null, |
|||
functionId: this.$route.meta.menuId, |
|||
sortLv: 0, |
|||
status: true, |
|||
fixed: false, |
|||
serialNumber: null, |
|||
columnType: null, |
|||
align: null |
|||
}, |
|||
|
|||
], |
|||
// 标签内容 |
|||
reportContextColumnList: [ |
|||
{ |
|||
tableId: "common1001", |
|||
tableName: "common", |
|||
columnProp: "functionId", |
|||
columnLabel: "报告编号", |
|||
columnHidden: false, |
|||
columnImage: false, |
|||
columnSortable: false, |
|||
columnWidth: null, |
|||
format: null, |
|||
functionId: this.$route.meta.menuId, |
|||
sortLv: 0, |
|||
status: true, |
|||
fixed: false, |
|||
serialNumber: null, |
|||
columnType: null, |
|||
align: null |
|||
}, { |
|||
tableId: "common1001", |
|||
tableName: "common", |
|||
columnProp: "functionId", |
|||
columnLabel: "内容描述", |
|||
columnHidden: false, |
|||
columnImage: false, |
|||
columnSortable: false, |
|||
columnWidth: null, |
|||
format: null, |
|||
functionId: this.$route.meta.menuId, |
|||
sortLv: 0, |
|||
status: true, |
|||
fixed: false, |
|||
serialNumber: null, |
|||
columnType: null, |
|||
align: null |
|||
}, { |
|||
tableId: "common1001", |
|||
tableName: "common", |
|||
columnProp: "functionId", |
|||
columnLabel: "Bartender子字符串名", |
|||
columnHidden: false, |
|||
columnImage: false, |
|||
columnSortable: false, |
|||
columnWidth: null, |
|||
format: null, |
|||
functionId: this.$route.meta.menuId, |
|||
sortLv: 0, |
|||
status: true, |
|||
fixed: false, |
|||
serialNumber: null, |
|||
columnType: null, |
|||
align: null |
|||
}, { |
|||
tableId: "common1001", |
|||
tableName: "common", |
|||
columnProp: "functionId", |
|||
columnLabel: "内容值", |
|||
columnHidden: false, |
|||
columnImage: false, |
|||
columnSortable: false, |
|||
columnWidth: null, |
|||
format: null, |
|||
functionId: this.$route.meta.menuId, |
|||
sortLv: 0, |
|||
status: true, |
|||
fixed: false, |
|||
serialNumber: null, |
|||
columnType: null, |
|||
align: null |
|||
}, |
|||
|
|||
], |
|||
// 数据 |
|||
// 可用模板列表 |
|||
reportFileList: [], |
|||
// 选中模板列表 |
|||
selectReportFileList: [], |
|||
selectReportString: '', |
|||
// 数量 |
|||
orderInfo: { |
|||
userName: this.$store.state.user.name, |
|||
orderNo: '', |
|||
customerId: '', |
|||
totalQty: 0, |
|||
perBoxQty: 0, |
|||
boxQty: 0, |
|||
lastBoxQty: 0, |
|||
// 选中模板列表 |
|||
reportFileList: [], |
|||
// 手工参数 |
|||
param:[] |
|||
}, |
|||
// 模板参数列表 |
|||
reportParamList: [], |
|||
buttons: { |
|||
settingLanguageList: '按语言设置', |
|||
edit: '编辑', |
|||
delete: '删除', |
|||
deleteList: '批量删除', |
|||
cz: '操作', |
|||
search: '查询', |
|||
download: '导出', |
|||
settingTable: '设置列表', |
|||
defaultTable: '设置默认配置', |
|||
list: "列表", |
|||
addList: '批量添加', |
|||
settingLanguage: "按控件设置" |
|||
}, |
|||
// 导出 end |
|||
buttonList: [ |
|||
{ |
|||
functionId: this.$route.meta.menuId, |
|||
languageValue: '按语言设置', |
|||
objectId: 'settingLanguageList', |
|||
objectType: "button", |
|||
tableId: "common1001" |
|||
}, |
|||
{ |
|||
functionId: this.$route.meta.menuId, |
|||
languageValue: '编辑', |
|||
objectId: 'edit', |
|||
objectType: "button", |
|||
tableId: "common1001" |
|||
}, |
|||
{ |
|||
functionId: this.$route.meta.menuId, |
|||
languageValue: '删除', |
|||
objectId: 'delete', |
|||
objectType: "button", |
|||
tableId: "common1001" |
|||
}, |
|||
{ |
|||
functionId: this.$route.meta.menuId, |
|||
languageValue: '批量删除', |
|||
objectId: 'deleteList', |
|||
objectType: "button", |
|||
tableId: "common1001" |
|||
}, |
|||
{ |
|||
functionId: this.$route.meta.menuId, |
|||
languageValue: '操作', |
|||
objectId: 'cz', |
|||
objectType: "button", |
|||
tableId: "common1001" |
|||
}, |
|||
{ |
|||
functionId: this.$route.meta.menuId, |
|||
languageValue: '查询', |
|||
objectId: 'search', |
|||
objectType: "button", |
|||
tableId: "common1001" |
|||
}, |
|||
{ |
|||
functionId: this.$route.meta.menuId, |
|||
languageValue: '导出', |
|||
objectId: 'download', |
|||
objectType: "button", |
|||
tableId: "common1001" |
|||
}, |
|||
{ |
|||
functionId: this.$route.meta.menuId, |
|||
languageValue: '设置列表', |
|||
objectId: 'settingTable', |
|||
objectType: "button", |
|||
tableId: "common1001" |
|||
}, |
|||
{ |
|||
functionId: this.$route.meta.menuId, |
|||
languageValue: '设置默认配置', |
|||
objectId: 'defaultTable', |
|||
objectType: "button", |
|||
tableId: "common1001" |
|||
}, |
|||
{ |
|||
functionId: this.$route.meta.menuId, |
|||
languageValue: '列表', |
|||
objectId: 'list', |
|||
objectType: "button", |
|||
tableId: "common1001" |
|||
}, |
|||
{ |
|||
functionId: this.$route.meta.menuId, |
|||
languageValue: '按控件设置', |
|||
objectId: 'settingLanguage', |
|||
objectType: "button", |
|||
tableId: "common1001" |
|||
} |
|||
], |
|||
} |
|||
}, |
|||
watch: { |
|||
orderInfo: { |
|||
handler: function (val, oldVal) { |
|||
if (this.orderInfo.totalQty > 0 && this.orderInfo.perBoxQty > 0) { |
|||
this.orderInfo.lastBoxQty = this.decimalUtil.mod(this.orderInfo.totalQty, this.orderInfo.perBoxQty) |
|||
if (this.decimalUtil.div(this.orderInfo.totalQty, this.orderInfo.perBoxQty) < 1) { |
|||
this.orderInfo.boxQty = 1 |
|||
} else { |
|||
this.orderInfo.boxQty = this.decimalUtil.formatDown(this.decimalUtil.div(this.orderInfo.totalQty, this.orderInfo.perBoxQty), 0) |
|||
} |
|||
|
|||
} |
|||
}, |
|||
// 深度观察监听 |
|||
deep: true |
|||
}, |
|||
updateData: { |
|||
deep: true, |
|||
handler: function (newV, oldV) { |
|||
this.updateData.projectID = this.updateData.projectID.toUpperCase(); |
|||
this.updateData.oriSOOrderNo = this.updateData.oriSOOrderNo.toUpperCase(); |
|||
this.updateData.orderType = this.updateData.orderType.toUpperCase(); |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.$nextTick(() => { |
|||
this.height = window.innerHeight - 510; |
|||
}) |
|||
}, |
|||
|
|||
methods: { |
|||
// 调用bartender打印 |
|||
bartenderPrint() { |
|||
if (this.selectReportFileList.length === 0) { |
|||
this.$message.warning('选择模板进行打印') |
|||
return |
|||
} |
|||
this.orderInfo.reportFileList = this.selectReportFileList |
|||
this.orderInfo.param = this.reportParamList |
|||
ouBoxPrintLabel(this.orderInfo).then(({data}) =>{ |
|||
if (data.code === 0 ){ |
|||
this.$message.success(data.msg) |
|||
}else { |
|||
this.$message.warning(data.msg) |
|||
} |
|||
}) |
|||
}, |
|||
// 获取订单信息 |
|||
searchBoxLabelSO() { |
|||
this.reportFileList = [] |
|||
getBoxLabelSO(this.orderNo).then(({data}) => { |
|||
if (data.code === 0) { |
|||
this.orderInfo.customerId = data.data.customerId ? data.data.customerId : '*' |
|||
this.orderInfo.totalQty = data.data.sumQty |
|||
this.orderInfo.perBoxQty = data.data.boxQty |
|||
this.orderInfo.orderNo = this.orderNo |
|||
let query = { |
|||
customerId: data.data.customerId ? data.data.customerId : '*', |
|||
reportFamily: '外箱标签' |
|||
} |
|||
getReportFileByCustomer(query).then(({data}) => { |
|||
if (data.code === 0) { |
|||
this.reportFileList = data.dataList |
|||
this.$refs.reportFileTable.setCurrentRow(this.reportFileList[0]); |
|||
} else { |
|||
this.$message.warning(data.msg) |
|||
Object.assign(this.$data, this.$options.data.call(this.orderInfo)); |
|||
Object.assign(this.$data, this.$options.data.call(this.selectReportString)); |
|||
Object.assign(this.$data, this.$options.data.call(this.reportParamList)); |
|||
} |
|||
}) |
|||
} else { |
|||
this.$message.warning(data.msg) |
|||
Object.assign(this.$data, this.$options.data.call(this)); |
|||
} |
|||
}) |
|||
}, |
|||
// 获取订单数数据 和 打印 模板数据 |
|||
getBoxSoAndReportFile() { |
|||
this.searchBoxLabelSO() |
|||
}, |
|||
handleClick() { |
|||
|
|||
}, |
|||
// 选择模板 |
|||
handleCurrentChange(val) { |
|||
if (!val) return |
|||
this.selectReportFileList = [] |
|||
let query = { |
|||
reportId: val.reportid, |
|||
defaultFlag: val.DefaultFlag, |
|||
reportFile: val.Reportfile, |
|||
reportFamily: '外箱标签', |
|||
customerId: this.orderInfo.customerId, |
|||
} |
|||
this.selectReportFileList.push(query) |
|||
this.searchReportSubFileList(query) |
|||
this.searchReportParameters(query) |
|||
|
|||
}, |
|||
// 获取子模版 |
|||
searchReportSubFileList(val) { |
|||
let str = '' |
|||
str += val.reportId + ' | ' + val.reportFile + '\n' |
|||
this.selectReportString = str |
|||
getReportSubFileList(val).then(({data}) => { |
|||
if (data.code === 0) { |
|||
for (let item of data.data) { |
|||
str += item.reportid + ' | ' + item.Reportfile + '\n' |
|||
let reportFile = { |
|||
reportId: item.reportid, |
|||
defaultFlag: 'Y', |
|||
reportFile: item.Reportfile, |
|||
reportFamily: '外箱标签', |
|||
customerId: this.orderInfo.customerId, |
|||
} |
|||
this.selectReportFileList.push(reportFile) |
|||
} |
|||
this.selectReportString = str |
|||
} |
|||
}) |
|||
|
|||
}, |
|||
// 获取柱模版打印参数 |
|||
searchReportParameters(val) { |
|||
getReportParameters(val.reportId).then(({data}) => { |
|||
if (data.code === 0) { |
|||
this.reportParamList = data.data |
|||
} |
|||
}) |
|||
}, |
|||
/*添加定制的css类*/ |
|||
customerCellClassName({row, column, rowIndex, columnIndex}) { |
|||
if (columnIndex === 2) { |
|||
return 'customer-text-cell'; |
|||
} |
|||
}, |
|||
|
|||
/*添加定制的cess样式*/ |
|||
customerCellStyle({row, column, rowIndex, columnIndex}) { |
|||
if (columnIndex === 2) { |
|||
return 'padding: 0px 0px;'; |
|||
} |
|||
}, |
|||
}, |
|||
created() { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
<style scoped> |
|||
|
|||
/deep/ .customer-tab .el-tabs__content { |
|||
padding: 0px !important; |
|||
} |
|||
|
|||
/deep/ .sl-el .el-tabs__item { |
|||
padding: 0 13px; |
|||
height: 26px; |
|||
line-height: 26px; |
|||
font-size: 12px; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
/deep/ div.table-input { |
|||
padding: 0px 0px; |
|||
height: 25px !important; |
|||
} |
|||
|
|||
/*table中input*/ |
|||
div.table-input /deep/ input.el-input__inner { |
|||
padding: 0px 0px; |
|||
height: 23px !important; |
|||
text-align: right; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,173 @@ |
|||
<template> |
|||
<div class="mod-oss"> |
|||
<el-form :inline="true" :model="dataForm"> |
|||
<el-form-item> |
|||
<el-button type="primary" @click="configHandle()">云存储配置</el-button> |
|||
<el-button type="primary" @click="uploadHandle()">上传文件</el-button> |
|||
<el-button type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
<el-table |
|||
:data="dataList" |
|||
border |
|||
v-loading="dataListLoading" |
|||
@selection-change="selectionChangeHandle" |
|||
style="width: 100%;"> |
|||
<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column> |
|||
<el-table-column |
|||
prop="url" |
|||
header-align="center" |
|||
align="center" |
|||
label="URL地址"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="createDate" |
|||
header-align="center" |
|||
align="center" |
|||
width="180" |
|||
label="创建时间"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
fixed="right" |
|||
header-align="center" |
|||
align="center" |
|||
width="150" |
|||
label="操作"> |
|||
<template slot-scope="scope"> |
|||
<a type="text" size="small" @click="deleteHandle(scope.row.id)">删除</a> |
|||
<a @click="downloadFile(scope.row.fileName, scope.row.url)">下载</a> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<el-pagination |
|||
@size-change="sizeChangeHandle" |
|||
@current-change="currentChangeHandle" |
|||
:current-page="pageIndex" |
|||
:page-sizes="[20, 50, 100 , 200, 500]" |
|||
:page-size="pageSize" |
|||
:total="totalPage" |
|||
layout="total, sizes, prev, pager, next, jumper"> |
|||
</el-pagination> |
|||
<!-- 弹窗, 云存储配置 --> |
|||
<config v-if="configVisible" ref="config"></config> |
|||
<!-- 弹窗, 上传文件 --> |
|||
<upload v-if="uploadVisible" ref="upload" @refreshDataList="getDataList"></upload> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Config from './oss-config' |
|||
import Upload from './oss-upload' |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
dataForm: {}, |
|||
dataList: [], |
|||
pageIndex: 1, |
|||
pageSize: 20, |
|||
totalPage: 0, |
|||
dataListLoading: false, |
|||
dataListSelections: [], |
|||
configVisible: false, |
|||
uploadVisible: false |
|||
} |
|||
}, |
|||
components: { |
|||
Config, |
|||
Upload |
|||
}, |
|||
activated() { |
|||
this.getDataList() |
|||
}, |
|||
methods: { |
|||
downloadFile(fileName, data) { |
|||
if (!data) { |
|||
return; |
|||
} |
|||
let url = window.URL.createObjectURL(new Blob([data])); |
|||
let link = document.createElement('a'); |
|||
link.style.display = 'none'; |
|||
link.href = url; |
|||
link.setAttribute('download', fileName); |
|||
document.body.appendChild(link); |
|||
link.click(); |
|||
}, |
|||
// 获取数据列表 |
|||
getDataList() { |
|||
this.dataListLoading = true |
|||
this.$http({ |
|||
url: this.$http.adornUrl('/sys/oss/list'), |
|||
method: 'get', |
|||
params: this.$http.adornParams({ |
|||
'page': this.pageIndex, |
|||
'limit': this.pageSize |
|||
}) |
|||
}).then(({data}) => { |
|||
if (data && data.code === 0) { |
|||
this.dataList = data.page.list |
|||
this.totalPage = data.page.totalCount |
|||
} else { |
|||
this.dataList = [] |
|||
this.totalPage = 0 |
|||
} |
|||
this.dataListLoading = false |
|||
}) |
|||
}, |
|||
// 每页数 |
|||
sizeChangeHandle(val) { |
|||
this.pageSize = val |
|||
this.pageIndex = 1 |
|||
this.getDataList() |
|||
}, |
|||
// 当前页 |
|||
currentChangeHandle(val) { |
|||
this.pageIndex = val |
|||
this.getDataList() |
|||
}, |
|||
// 多选 |
|||
selectionChangeHandle(val) { |
|||
this.dataListSelections = val |
|||
}, |
|||
// 云存储配置 |
|||
configHandle() { |
|||
this.configVisible = true |
|||
this.$nextTick(() => { |
|||
this.$refs.config.init() |
|||
}) |
|||
}, |
|||
// 上传文件 |
|||
uploadHandle() { |
|||
this.uploadVisible = true |
|||
this.$nextTick(() => { |
|||
this.$refs.upload.init() |
|||
}) |
|||
}, |
|||
// 删除 |
|||
deleteHandle(id) { |
|||
var ids = id ? [id] : this.dataListSelections.map(item => { |
|||
return item.id |
|||
}) |
|||
this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', { |
|||
confirmButtonText: '确定', |
|||
cancelButtonText: '取消', |
|||
type: 'warning' |
|||
}).then(() => { |
|||
this.$http({ |
|||
url: this.$http.adornUrl('/sys/oss/delete'), |
|||
method: 'post', |
|||
data: this.$http.adornData(ids, false) |
|||
}).then(({data}) => { |
|||
if (data && data.code === 0) { |
|||
this.$message.success('操作成功') |
|||
this.getDataList() |
|||
} else { |
|||
this.$message.error(data.msg) |
|||
} |
|||
}) |
|||
}).catch(() => { |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue