25 changed files with 4711 additions and 1557 deletions
@ -0,0 +1,665 @@
|
||||
<template> |
||||
<div class="maboxhi" id="bodys"> |
||||
<el-table |
||||
:data="tableData" |
||||
style="width: 100%" |
||||
:show-summary="shownm" |
||||
:summary-method="getSummaries" |
||||
v-loading="loading" |
||||
@selection-change="handleSelectionChange" |
||||
border |
||||
height="100%" |
||||
:row-class-name="tableRowClassName" |
||||
ref="selecttable" |
||||
> |
||||
<el-table-column |
||||
:type="column.type == 0 ? 'selection' : ''" |
||||
:min-width="column.width" |
||||
v-for="(column, index) in newcolumnList" |
||||
:key="column.prop" |
||||
:prop="column.prop" |
||||
:label="column.label" |
||||
:fixed="column.fixed" |
||||
:sortable="column.sortable" |
||||
:selectable="isselectfun" |
||||
v-show="column.head" |
||||
> |
||||
<el-table-column |
||||
:type="column.type == 12 ? 'index' : ''" |
||||
:min-width="column.width" |
||||
:prop="column.prop" |
||||
:label="column.label" |
||||
v-if="column.type != 0" |
||||
flexible |
||||
show-overflow-tooltip |
||||
> |
||||
<template #header> |
||||
<!-- <el-text class="mx-1">{{ column.label }}</el-text> --> |
||||
<el-input |
||||
v-if="column.type == 2" |
||||
v-model="column.values" |
||||
clearable |
||||
:placeholder="`请输入${column.label}`" |
||||
@change="inputchange($event, column)" |
||||
@blur="inputchange($event, column)" |
||||
@clear="inputclear($event, column)" |
||||
/> |
||||
<el-select |
||||
v-if="column.type == 3" |
||||
v-model="column.values" |
||||
class="m-2 selectbr" |
||||
clearable |
||||
:placeholder="`请选择${column.label}`" |
||||
@change="selectchange($event, column)" |
||||
@clear="selectclear($event, column)" |
||||
> |
||||
<el-option |
||||
v-for="item in column.checkarr" |
||||
:key="item.value" |
||||
:label="item.label" |
||||
:value="item.value" |
||||
/> |
||||
</el-select> |
||||
<el-date-picker |
||||
v-model="column.values" |
||||
v-if="column.type == 4" |
||||
type="date" |
||||
clearable |
||||
style="width: auto" |
||||
:placeholder="`请选择${column.label}`" |
||||
@change="timechange($event, column)" |
||||
@clear="timeclear($event, column)" |
||||
/> |
||||
<el-date-picker |
||||
v-model="column.values" |
||||
v-if="column.type == 5" |
||||
type="datetime" |
||||
clearable |
||||
style="width: auto" |
||||
:placeholder="`请选择${column.label}`" |
||||
format="YYYY/MM/DD HH:mm:ss" |
||||
@change="timechange($event, column)" |
||||
@clear="timeclear($event, column)" |
||||
/> |
||||
</template> |
||||
|
||||
<template #default="scope"> |
||||
<el-text |
||||
class="mx-2 tabculconte" |
||||
v-if="Number(column.type) < 6 && Number(column.type) > 0" |
||||
>{{ scope.row[column.prop] }}</el-text |
||||
> |
||||
<el-switch |
||||
@change="makeCargo(scope.row, column)" |
||||
v-if="column.type == 11" |
||||
v-model="scope.row[column.prop]" |
||||
/> |
||||
<el-text |
||||
style="" |
||||
class="mx-2 tabculconte colors" |
||||
v-if="column.type == 9" |
||||
@click="godowns(scope.row[column.downprop])" |
||||
>{{ scope.row[column.prop] }}</el-text |
||||
> |
||||
<el-input |
||||
@blur="handleNumberRange(column, scope.row)" |
||||
v-if="column.type == 10" |
||||
v-model="scope.row[column.prop]" |
||||
type="number" |
||||
:min="0" |
||||
:max="scope.row.residueNumber" |
||||
></el-input> |
||||
<div class="slotbuts" v-if="column.type == 6"> |
||||
<slot v-if="column.type == 6" :scope="scope"> </slot> |
||||
</div> |
||||
<el-image |
||||
preview-teleported |
||||
v-if="column.type == 7" |
||||
style="width: 60px; height: 60px; margin-left: 10px" |
||||
:initial-index="index" |
||||
:z-index="100" |
||||
v-for="(item, index) in scope.row[column.prop].split(',')" |
||||
:src="item" |
||||
:preview-src-list="scope.row[column.prop].split(',')" |
||||
/> |
||||
</template> |
||||
</el-table-column> |
||||
|
||||
<template #header> |
||||
<div style="display: inline-block"> |
||||
<div class="tilbox"> |
||||
<el-text class="mx-1 tabtitles" @click.stop @dblclick.stop="copyalls(column)">{{ |
||||
column.label |
||||
}}</el-text> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
</div> |
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
import { computed, ref, watchEffect, getCurrentInstance, onMounted, defineExpose } from 'vue'; |
||||
import type { PropType } from 'vue'; |
||||
const { proxy } = getCurrentInstance() as any; |
||||
const selecttable = ref(null); |
||||
/** |
||||
* 对应通知事件 |
||||
* inputTxt:输入框输入的确认事件 |
||||
* timeCheck:时间选择器选择事件 |
||||
* selectCheck:下拉框选中事件 |
||||
* selection:勾选框事件 |
||||
*/ |
||||
onMounted(() => { |
||||
function getWinHight() { |
||||
var windowHight = 0; |
||||
if (document.body.clientHeight && document.documentElement.clientHeight) { |
||||
windowHight = |
||||
document.body.clientHeight < document.documentElement.clientHeight |
||||
? document.body.clientHeight |
||||
: document.documentElement.clientHeight; |
||||
} else { |
||||
// windowHight=(document.body.clientHeight>document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight; |
||||
} |
||||
// return windowHight; |
||||
return document.documentElement.clientHeight; |
||||
} |
||||
|
||||
var bodyContent = document.querySelectorAll('.maboxhi'); |
||||
const _height = getWinHight(); |
||||
console.log('bodyContent :>> ', bodyContent); |
||||
// 设置列表的高度 |
||||
bodyContent.forEach(val => { |
||||
val.style.height = _height - val.getBoundingClientRect().top - 65 + 'px'; |
||||
}); |
||||
}); |
||||
interface TableColumnType { |
||||
/** 表格列的key */ |
||||
prop: string; |
||||
/** 表格列的名字 */ |
||||
label: string; |
||||
/** |
||||
* 对应列表头的类型 |
||||
* 0:直接显示为单选，prop，label，全部传空 |
||||
* 1:普通表格，正常显示 |
||||
* 2:带输入框表格 |
||||
* 3:带下拉框表格 |
||||
* 4:带日期选择器列 |
||||
* 5:带日期时间选择器 |
||||
* 6:操作栏，prop，label，全部传空 |
||||
* 7:图片 |
||||
* 8:带背景的文字 |
||||
* 9:下载附件 |
||||
* 10.输入框的表格内容 |
||||
* 11.开关类型 |
||||
*/ |
||||
type: number | string; |
||||
/** 用于接受表头的值 */ |
||||
values: number | string; |
||||
/** 表头宽度 number string undefined */ |
||||
width: number | string | undefined; |
||||
/** 下拉框可选项 */ |
||||
checkarr?: { |
||||
value: string | number; |
||||
label: string | number; |
||||
}[]; |
||||
/** 是否固定表头 |
||||
* true false |
||||
* left right |
||||
*/ |
||||
fixed: boolean | string; |
||||
/** 是否统计 |
||||
* true false 或者直接不写该参数 |
||||
*/ |
||||
isshowSummary?: boolean; |
||||
/** 是否排序 |
||||
* true false 或者直接不写该参数 |
||||
*/ |
||||
sortable?: boolean; |
||||
/** 是否显示列 |
||||
* true false 或者直接不写该参数 |
||||
*/ |
||||
head?: boolean; |
||||
/** 是否文字超出隐藏 |
||||
* 默认超出隐藏 |
||||
* true是不隐藏 |
||||
* false 隐藏 |
||||
*/ |
||||
isextrahide?: boolean; |
||||
/** 下载文件的url的key |
||||
*/ |
||||
downprop?: string; |
||||
/** 输入框内容需要小于的对应字段 |
||||
*/ |
||||
lessThanNum?: string; |
||||
} |
||||
interface TableDataType { |
||||
[key: string]: any; |
||||
} |
||||
let props = defineProps({ |
||||
columnList: { |
||||
type: Array as PropType<TableColumnType[]>, |
||||
required: true, |
||||
}, |
||||
tableData: { |
||||
type: Array as PropType<TableDataType[]>, |
||||
required: true, |
||||
}, |
||||
loading: { |
||||
type: Boolean as PropType<boolean>, |
||||
required: true, |
||||
}, |
||||
//回显勾选的数据列表 |
||||
checkselect: { |
||||
type: Array as PropType<TableDataType[]>, |
||||
required: false, |
||||
}, |
||||
//是否可选择的函数 |
||||
isselectfun: { |
||||
type: Function as PropType<(row: TableDataType) => boolean>, |
||||
required: false, |
||||
default: null, |
||||
}, |
||||
}); |
||||
let selectarr = ref([]); |
||||
const tableRowClassName = ({ row, rowIndex }: { row: TableDataType; rowIndex: number }) => { |
||||
let sfcheck = false; |
||||
selectarr.value.map(item => { |
||||
if (item == row) { |
||||
sfcheck = true; |
||||
} |
||||
}); |
||||
if (sfcheck) { |
||||
return 'table-SelectedRow-bgcolor'; |
||||
} |
||||
return ''; |
||||
}; |
||||
let emit = defineEmits(['inputTxt', 'timeCheck', 'selectCheck', 'selection', 'makeCargo']); |
||||
let newcolumnList = ref<TableColumnType[]>([]); |
||||
watchEffect(() => { |
||||
newcolumnList.value = []; |
||||
props.columnList.map(item => { |
||||
if (!item.head) { |
||||
newcolumnList.value.push(item); |
||||
} |
||||
}); |
||||
}); |
||||
onMounted(() => { |
||||
if (props.checkselect) { |
||||
props.checkselect.map(item => { |
||||
if (props.isselectfun) { |
||||
if (props.isselectfun(item)) { |
||||
selecttable.value.toggleRowSelection(item, true); |
||||
} |
||||
} else { |
||||
selecttable.value.toggleRowSelection(item, true); |
||||
} |
||||
}); |
||||
} |
||||
}); |
||||
function godowns(url) { |
||||
let a = document.createElement('a'); //创建一个a标签用来跳转 |
||||
a.href = url; //myurl 是后端返回的下载地址 |
||||
// a.target = '_blank'; |
||||
a.download = 'xixi.zip'; //设置下载文件的文件名和文件格式 |
||||
document.body.appendChild(a); //将标签DOM，放置页面 |
||||
a.click(); |
||||
window.URL.revokeObjectURL(url); //释放 url 对象内存 |
||||
document.body.removeChild(a); |
||||
} |
||||
let shownm = ref(false); |
||||
|
||||
function copyalls(column: TableColumnType) { |
||||
const _isReturn = column.type == 1 || column.type == 2 || column.type == 3; |
||||
if (!_isReturn) return; |
||||
let text = ''; |
||||
props.tableData.map((item, index) => { |
||||
if (index < props.tableData.length - 1) { |
||||
if (item[column.prop]) { |
||||
text += `${item[column.prop]}\n`; |
||||
} |
||||
} else { |
||||
if (item[column.prop]) { |
||||
text += `${item[column.prop]}`; |
||||
} else { |
||||
} |
||||
} |
||||
}); |
||||
copyContent(text); |
||||
} |
||||
function handleNumberRange(column: TableColumnType, row: TableDataType) { |
||||
row[column.prop] = row[column.prop].replace(/[^\.\d]/g, ''); //替换掉与数字无关的字符（中英文与符号都会被替换掉，只留下数字，此时值类型为字符串） |
||||
if (row[column.prop]) { |
||||
//如果替换后还有值 |
||||
row[column.prop] = parseInt(row[column.prop]); //把字符型转成整数型 |
||||
} |
||||
|
||||
// if (column.lessThanNum) { |
||||
// if (row[column.prop] > row[column.lessThanNum]) { |
||||
// row[column.prop] = row[column.lessThanNum]; |
||||
// proxy.$message({ |
||||
// type: 'error', |
||||
// message: '数量不能大于可用数量', |
||||
// }); |
||||
// } |
||||
// } |
||||
// 上架数量判断 |
||||
if (row.residueNumber) { |
||||
if (row.enterNum > row.residueNumber) { |
||||
proxy.$message({ |
||||
type: 'error', |
||||
message: '数量不能大于可上架总数,已调整为最大数量！', |
||||
}); |
||||
row.enterNum = row.residueNumber; |
||||
} |
||||
} |
||||
// 下架数量判断 |
||||
if (row.num) { |
||||
if (row.enterNum > row.num) { |
||||
proxy.$message({ |
||||
type: 'error', |
||||
message: '数量不能大于可下架总数,已调整为最大数量！', |
||||
}); |
||||
row.enterNum = row.num; |
||||
} |
||||
} |
||||
|
||||
console.log(row, 'row'); |
||||
} |
||||
function handleEdit(index: number, row: TableDataType) { |
||||
console.log(index, row); |
||||
} |
||||
function makeCargo(value, column: TableColumnType) { |
||||
emit('makeCargo', value, column); |
||||
} |
||||
function inputchange(value, column: TableColumnType) { |
||||
if (typeof value == 'string') { |
||||
console.log(value, column); |
||||
emit('inputTxt', value, column); |
||||
} |
||||
} |
||||
function selectchange(value, column: TableColumnType) { |
||||
console.log(value, column); |
||||
emit('selectCheck', value, column); |
||||
} |
||||
function timechange(value, column: TableColumnType) { |
||||
console.log(value, column); |
||||
emit('timeCheck', value, column); |
||||
} |
||||
const handleSelectionChange = (param: TableDataType[]) => { |
||||
// console.log(param) |
||||
selectarr.value = param; |
||||
emit('selection', param); |
||||
}; |
||||
function inputclear(value, column: TableColumnType) { |
||||
console.log('', column); |
||||
emit('inputTxt', '', column); |
||||
} |
||||
function selectclear(value, column: TableColumnType) { |
||||
console.log('', column); |
||||
emit('selectCheck', '', column); |
||||
} |
||||
function timeclear(value, column: TableColumnType) { |
||||
console.log('', column); |
||||
emit('timeCheck', '', column); |
||||
} |
||||
function handleDelete(index: number, row: TableDataType) { |
||||
console.log(index, row); |
||||
} |
||||
const getSummaries = (param: any) => { |
||||
const { columns, data } = param; |
||||
let newarr = []; |
||||
let tji = 0; |
||||
console.log(columns, data); |
||||
columns.map((item, index) => { |
||||
if (index == 0) { |
||||
newarr[index] = '总计'; |
||||
return; |
||||
} |
||||
tji = 0; |
||||
if (props.columnList[index]?.isshowSummary) { |
||||
data.map(ite => { |
||||
tji += Number(ite[props.columnList[index]?.prop] || 0); |
||||
}); |
||||
newarr[index] = tji; |
||||
// shownm.value=true |
||||
} else { |
||||
newarr[index] = null; |
||||
} |
||||
}); |
||||
// console.log(columns) |
||||
console.log(newarr); |
||||
return newarr; |
||||
}; |
||||
watchEffect(() => { |
||||
props.columnList.map(item => { |
||||
if (item.isshowSummary) { |
||||
shownm.value = true; |
||||
} |
||||
}); |
||||
}); |
||||
// 复制文本内容 |
||||
function copyContent(content: string) { |
||||
// 复制结果 |
||||
let copyResult = true; |
||||
// 设置想要复制的文本内容 |
||||
const text = content || '让我们一起快乐的敲代码吧~'; |
||||
// 判断是否支持clipboard方式 |
||||
if (!!window.navigator.clipboard) { |
||||
// 利用clipboard将文本写入剪贴板（这是一个异步promise） |
||||
window.navigator.clipboard |
||||
.writeText(text) |
||||
.then(res => { |
||||
proxy.$message({ |
||||
type: 'success', |
||||
message: '复制成功', |
||||
}); |
||||
// 返回复制操作的最终结果 |
||||
return copyResult; |
||||
}) |
||||
.catch(err => { |
||||
copyResult = false; |
||||
console.log('复制失败', err); |
||||
proxy.$message({ |
||||
type: 'error', |
||||
message: '复制失败', |
||||
}); |
||||
// 返回复制操作的最终结果 |
||||
return copyResult; |
||||
}); |
||||
} else { |
||||
// 不支持clipboard方式 则采用document.execCommand()方式 |
||||
// 创建一个input元素 |
||||
let inputDom = document.createElement('textarea'); |
||||
// 设置为只读 防止移动端手机上弹出软键盘 |
||||
inputDom.setAttribute('readonly', 'readonly'); |
||||
// 给input元素赋值 |
||||
inputDom.value = text; |
||||
// 将创建的input添加到body |
||||
document.body.appendChild(inputDom); |
||||
// 选中input元素的内容 |
||||
inputDom.select(); |
||||
// 执行浏览器复制命令 |
||||
// 复制命令会将当前选中的内容复制到剪切板中（这里就是创建的input标签中的内容） |
||||
// Input要在正常的编辑状态下原生复制方法才会生效 |
||||
const result = document.execCommand('copy'); |
||||
// 判断是否复制成功 |
||||
if (result) { |
||||
proxy.$message({ |
||||
type: 'success', |
||||
message: '复制成功', |
||||
}); |
||||
} else { |
||||
console.log('复制失败'); |
||||
proxy.$message({ |
||||
type: 'error', |
||||
message: '复制失败', |
||||
}); |
||||
copyResult = false; |
||||
} |
||||
// 复制操作后再将构造的标签 移除 |
||||
document.body.removeChild(inputDom); |
||||
// 返回复制操作的最终结果 |
||||
return copyResult; |
||||
} |
||||
} |
||||
|
||||
defineExpose({}); |
||||
</script> |
||||
<style lang="scss" scope> |
||||
// :root{ |
||||
// --el-checkbox-checked-bg-color:'#D3832A'; |
||||
// --el-checkbox-checked-input-border-color:'#D3832A'; |
||||
// } |
||||
|
||||
.el-table { |
||||
//悬停 |
||||
--el-table-row-hover-bg-color: #d3832a; |
||||
} |
||||
|
||||
// .el-table .warning-row { |
||||
// --el-table-tr-bg-color: var(--el-color-warning-light-9); |
||||
// } |
||||
// .el-table .success-row { |
||||
// --el-table-tr-bg-color: var(--el-color-success-light-9); |
||||
// } |
||||
.maboxhi { |
||||
width: 100%; |
||||
// min-height: 950px; |
||||
// height: 841px; |
||||
// flex:1; |
||||
// min-height: 100%; |
||||
} |
||||
.on { |
||||
overflow: hidden; |
||||
white-space: nowrap; |
||||
text-overflow: ellipsis; |
||||
font-size: 12px !important; |
||||
} |
||||
.selectbr { |
||||
border: none !important; |
||||
font-size: 12px !important; |
||||
} |
||||
.tabtitles { |
||||
color: #092c4d !important; |
||||
font-size: 12px !important; |
||||
margin-right: 5px !important; |
||||
} |
||||
.el-table .ascending .sort-caret.ascending { |
||||
border-bottom-color: #d3832a !important; |
||||
font-size: 12px !important; |
||||
} |
||||
.el-table .descending .sort-caret.descending { |
||||
border-top-color: #d3832a !important; |
||||
font-size: 12px !important; |
||||
} |
||||
.tabculconte { |
||||
color: #333333 !important; |
||||
font-size: 12px !important; |
||||
} |
||||
.slotbuts { |
||||
height: 25px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
font-size: 12px !important; |
||||
} |
||||
.slotbuts .el-text { |
||||
color: #d3832a !important; |
||||
margin-right: 10px !important; |
||||
cursor: pointer; |
||||
font-size: 12px !important; |
||||
&:nth-last-child(1) { |
||||
margin-right: 0px !important; |
||||
} |
||||
} |
||||
.el-popper.is-pure.is-light.el-dropdown__popper .el-text { |
||||
color: #d3832a !important; |
||||
margin-right: 10px !important; |
||||
cursor: pointer; |
||||
font-size: 12px !important; |
||||
&:nth-last-child(1) { |
||||
margin-right: 0px !important; |
||||
} |
||||
} |
||||
.el-table .el-input__inner { |
||||
height: 23px !important; |
||||
} |
||||
// .el-checkbox__input.is-checked .el-checkbox__inner{ |
||||
// background-color: #D3832A !important; |
||||
// border-color: #D3832A !important; |
||||
// } |
||||
// .is .el-checkbox__input.is-checked .el-checkbox__inner{ |
||||
// background-color: #D3832A !important; |
||||
// border-color: #D3832A !important; |
||||
// } |
||||
// .is-checked .el-checkbox__inner:hover{ |
||||
// border-color: #D3832A !important; |
||||
// } |
||||
// .el-checkbox__input.is-indeterminate .el-checkbox__inner{ |
||||
// background-color: #D3832A !important; |
||||
// border-color: #D3832A !important; |
||||
// } |
||||
.el-table .el-table__cell { |
||||
padding: 0px !important; |
||||
} |
||||
.el-checkbox__input.is-checked .el-checkbox__inner, |
||||
.el-checkbox__input.is-indeterminate .el-checkbox__inner { |
||||
border-color: #d3832a !important; |
||||
background-color: #d3832a !important; |
||||
} |
||||
.el-checkbox__input.is-focus .el-checkbox__inner { |
||||
border-color: #d3832a !important; |
||||
} |
||||
//修改选中后文本的颜色 |
||||
.el-checkbox__input.is-checked + .el-checkbox__label { |
||||
color: #d3832a !important; |
||||
} |
||||
.el-checkbox__inner:hover { |
||||
border-color: #d3832a !important; |
||||
font-size: 12px !important; |
||||
} |
||||
.table-SelectedRow-bgcolor { |
||||
> td { |
||||
background-color: #f7e8d7 !important; |
||||
} |
||||
} |
||||
.colors { |
||||
color: #409eff !important; |
||||
cursor: pointer !important; |
||||
} |
||||
.el-table .cell { |
||||
line-height: 22px !important; |
||||
} |
||||
.el-table .el-input__inner { |
||||
font-size: 12px !important; |
||||
} |
||||
.el-table__body tr.hover-row.current-row > td, |
||||
.el-table__body tr.hover-row.el-table__row--striped.current-row > td, |
||||
.el-table__body tr.hover-row.el-table__row--striped > td, |
||||
.el-table__body tr.hover-row > td { |
||||
background-color: #d3d8e1 !important; |
||||
} |
||||
.el-date-editor.el-input, |
||||
.el-date-editor.el-input__wrapper { |
||||
height: 23px !important; |
||||
} |
||||
.copys { |
||||
display: inline-block; |
||||
margin-left: 5px; |
||||
padding-top: 5px; |
||||
margin-right: 5px; |
||||
} |
||||
.tilbox { |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
|
||||
.el-table .el-popper { |
||||
max-width: 20% !important; |
||||
} |
||||
.el-input { |
||||
// width: 200px !important; |
||||
} |
||||
</style> |
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -1,266 +1,249 @@
|
||||
<template> |
||||
<basic-container> |
||||
<avue-crud :option="option" |
||||
v-model:search="search" |
||||
v-model:page="page" |
||||
v-model="form" |
||||
:table-loading="loading" |
||||
:data="data" |
||||
:permission="permissionList" |
||||
:before-open="beforeOpen" |
||||
ref="crud" |
||||
@row-update="rowUpdate" |
||||
@row-save="rowSave" |
||||
@row-del="rowDel" |
||||
@search-change="searchChange" |
||||
@search-reset="searchReset" |
||||
@selection-change="selectionChange" |
||||
@current-change="currentChange" |
||||
@size-change="sizeChange" |
||||
@refresh-change="refreshChange" |
||||
@on-load="onLoad"> |
||||
<template #id-header="{column}"> |
||||
<span>{{ column.label }}</span> |
||||
<el-input size="autosize" v-model="query.id" placeholder="请输入内容" suffix-icon="el-icon-search" /> |
||||
<!-- <el-tag>{{(column || {}).label}}-{{(column || {}).prop}}</el-tag> --> |
||||
</template> |
||||
<avue-crud :option="option" v-model:search="search" v-model:page="page" v-model="form" :table-loading="loading" |
||||
:data="data" :permission="permissionList" :before-open="beforeOpen" ref="crud" @row-update="rowUpdate" |
||||
@row-save="rowSave" @row-del="rowDel" @search-change="searchChange" @search-reset="searchReset" |
||||
@selection-change="selectionChange" @current-change="currentChange" @size-change="sizeChange" |
||||
@refresh-change="refreshChange" @on-load="onLoad"> |
||||
<template #id-header="{ column }"> |
||||
<span>{{ column.label }}</span> |
||||
<el-input size="autosize" v-model="query.id" placeholder="请输入内容" suffix-icon="el-icon-search" /> |
||||
<!-- <el-tag>{{(column || {}).label}}-{{(column || {}).prop}}</el-tag> --> |
||||
</template> |
||||
|
||||
<template #logisticsLineNumber-header="{column}"> |
||||
<span>{{ column.label }}</span> |
||||
<el-input size="autosize" v-model="query.logisticsLineNumber" placeholder="请输入内容" suffix-icon="el-icon-search" /> |
||||
<!-- <el-tag>{{(column || {}).label}}-{{(column || {}).prop}}</el-tag> --> |
||||
</template> |
||||
<template #logisticsLineNumber-header="{ column }"> |
||||
<span>{{ column.label }}</span> |
||||
<el-input size="autosize" v-model="query.logisticsLineNumber" placeholder="请输入内容" suffix-icon="el-icon-search" /> |
||||
<!-- <el-tag>{{(column || {}).label}}-{{(column || {}).prop}}</el-tag> --> |
||||
</template> |
||||
|
||||
<template #logisticsLineName-header="{column}"> |
||||
<span>{{ column.label }}</span> |
||||
<el-input size="autosize" v-model="query.logisticsLineName" placeholder="请输入内容" suffix-icon="el-icon-search" /> |
||||
<!-- <el-tag>{{(column || {}).label}}-{{(column || {}).prop}}</el-tag> --> |
||||
</template> |
||||
<template #logisticsLineName-header="{ column }"> |
||||
<span>{{ column.label }}</span> |
||||
<el-input size="autosize" v-model="query.logisticsLineName" placeholder="请输入内容" suffix-icon="el-icon-search" /> |
||||
<!-- <el-tag>{{(column || {}).label}}-{{(column || {}).prop}}</el-tag> --> |
||||
</template> |
||||
|
||||
<template #menu-left> |
||||
<el-button type="danger" |
||||
icon="el-icon-delete" |
||||
plain |
||||
v-if="permission.stationlinenum_delete" |
||||
@click="handleDelete">删 除 |
||||
<el-button type="danger" icon="el-icon-delete" plain v-if="permission.stationlinenum_delete" |
||||
@click="handleDelete">删 除 |
||||
</el-button> |
||||
<el-button type="warning" |
||||
plain |
||||
icon="el-icon-download" |
||||
@click="handleExport">导 出 |
||||
<el-button type="warning" plain icon="el-icon-download" @click="handleExport">导 出 |
||||
</el-button> |
||||
</template> |
||||
|
||||
|
||||
|
||||
|
||||
</avue-crud> |
||||
</basic-container> |
||||
</template> |
||||
|
||||
<script> |
||||
import {getList, getDetail, add, update, remove} from "@/api/factory/snm/stationlinenum"; |
||||
import option from "@/option/factory/snm/stationlinenum"; |
||||
import {mapGetters} from "vuex"; |
||||
import {exportBlob} from "@/api/common"; |
||||
import {getToken} from '@/utils/auth'; |
||||
import {downloadXls} from "@/utils/util"; |
||||
import {dateNow} from "@/utils/date"; |
||||
import NProgress from 'nprogress'; |
||||
import 'nprogress/nprogress.css'; |
||||
import { getList, getDetail, add, update, remove } from "@/api/factory/snm/stationlinenum"; |
||||
import option from "@/option/factory/snm/stationlinenum"; |
||||
import { mapGetters } from "vuex"; |
||||
import { exportBlob } from "@/api/common"; |
||||
import { getToken } from '@/utils/auth'; |
||||
import { downloadXls } from "@/utils/util"; |
||||
import { dateNow } from "@/utils/date"; |
||||
import NProgress from 'nprogress'; |
||||
import 'nprogress/nprogress.css'; |
||||
|
||||
export default { |
||||
data() { |
||||
return { |
||||
form: {}, |
||||
query: {}, |
||||
search: {}, |
||||
loading: true, |
||||
page: { |
||||
pageSize: 30, |
||||
currentPage: 1, |
||||
total: 0 |
||||
}, |
||||
selectionList: [], |
||||
option: option, |
||||
data: [] |
||||
}; |
||||
}, |
||||
computed: { |
||||
...mapGetters(["permission"]), |
||||
permissionList() { |
||||
|
||||
export default { |
||||
data() { |
||||
return { |
||||
form: {}, |
||||
query: {}, |
||||
search: {}, |
||||
loading: true, |
||||
page: { |
||||
pageSize: 30, |
||||
currentPage: 1, |
||||
total: 0 |
||||
}, |
||||
selectionList: [], |
||||
option: option, |
||||
data: [] |
||||
addBtn: this.validData(this.permission.stationlinenum_add, false), |
||||
viewBtn: this.validData(this.permission.stationlinenum_view, false), |
||||
delBtn: this.validData(this.permission.stationlinenum_delete, false), |
||||
editBtn: this.validData(this.permission.stationlinenum_edit, false) |
||||
}; |
||||
}, |
||||
computed: { |
||||
...mapGetters(["permission"]), |
||||
permissionList() { |
||||
|
||||
return { |
||||
addBtn: this.validData(this.permission.stationlinenum_add, false), |
||||
viewBtn: this.validData(this.permission.stationlinenum_view, false), |
||||
delBtn: this.validData(this.permission.stationlinenum_delete, false), |
||||
editBtn: this.validData(this.permission.stationlinenum_edit, false) |
||||
}; |
||||
}, |
||||
ids() { |
||||
let ids = []; |
||||
this.selectionList.forEach(ele => { |
||||
ids.push(ele.id); |
||||
ids() { |
||||
let ids = []; |
||||
this.selectionList.forEach(ele => { |
||||
ids.push(ele.id); |
||||
}); |
||||
return ids.join(","); |
||||
} |
||||
}, |
||||
methods: { |
||||
rowSave(row, done, loading) { |
||||
add(row).then(() => { |
||||
this.onLoad(this.page); |
||||
this.$message({ |
||||
type: "success", |
||||
message: "操作成功!" |
||||
}); |
||||
return ids.join(","); |
||||
} |
||||
done(); |
||||
}, error => { |
||||
loading(); |
||||
window.console.log(error); |
||||
}); |
||||
}, |
||||
rowUpdate(row, index, done, loading) { |
||||
update(row).then(() => { |
||||
this.onLoad(this.page); |
||||
this.$message({ |
||||
type: "success", |
||||
message: "操作成功!" |
||||
}); |
||||
done(); |
||||
}, error => { |
||||
loading(); |
||||
console.log(error); |
||||
}); |
||||
}, |
||||
methods: { |
||||
rowSave(row, done, loading) { |
||||
add(row).then(() => { |
||||
rowDel(row) { |
||||
this.$confirm("确定将选择数据删除?", { |
||||
confirmButtonText: "确定", |
||||
cancelButtonText: "取消", |
||||
type: "warning" |
||||
}) |
||||
.then(() => { |
||||
return remove(row.id); |
||||
}) |
||||
.then(() => { |
||||
this.onLoad(this.page); |
||||
this.$message({ |
||||
type: "success", |
||||
message: "操作成功!" |
||||
}); |
||||
done(); |
||||
}, error => { |
||||
loading(); |
||||
window.console.log(error); |
||||
}); |
||||
}, |
||||
rowUpdate(row, index, done, loading) { |
||||
update(row).then(() => { |
||||
}, |
||||
handleDelete() { |
||||
if (this.selectionList.length === 0) { |
||||
this.$message.warning("请选择至少一条数据"); |
||||
return; |
||||
} |
||||
this.$confirm("确定将选择数据删除?", { |
||||
confirmButtonText: "确定", |
||||
cancelButtonText: "取消", |
||||
type: "warning" |
||||
}) |
||||
.then(() => { |
||||
return remove(this.ids); |
||||
}) |
||||
.then(() => { |
||||
this.onLoad(this.page); |
||||
this.$message({ |
||||
type: "success", |
||||
message: "操作成功!" |
||||
}); |
||||
done(); |
||||
}, error => { |
||||
loading(); |
||||
console.log(error); |
||||
this.$refs.crud.toggleSelection(); |
||||
}); |
||||
}, |
||||
rowDel(row) { |
||||
this.$confirm("确定将选择数据删除?", { |
||||
confirmButtonText: "确定", |
||||
cancelButtonText: "取消", |
||||
type: "warning" |
||||
}) |
||||
.then(() => { |
||||
return remove(row.id); |
||||
}) |
||||
.then(() => { |
||||
this.onLoad(this.page); |
||||
this.$message({ |
||||
type: "success", |
||||
message: "操作成功!" |
||||
}); |
||||
}); |
||||
}, |
||||
handleDelete() { |
||||
if (this.selectionList.length === 0) { |
||||
this.$message.warning("请选择至少一条数据"); |
||||
return; |
||||
} |
||||
this.$confirm("确定将选择数据删除?", { |
||||
confirmButtonText: "确定", |
||||
cancelButtonText: "取消", |
||||
type: "warning" |
||||
}, |
||||
handleExport() { |
||||
let downloadUrl = `/logpm-factory/snm/stationlinenum/export-stationlinenum?${this.website.tokenHeader}=${getToken()}`; |
||||
const { |
||||
logisticsLineNumber, |
||||
logisticsLineName, |
||||
} = this.query; |
||||
let values = { |
||||
logisticsLineNumber_equal: logisticsLineNumber, |
||||
logisticsLineName_like: logisticsLineName, |
||||
}; |
||||
this.$confirm("是否导出数据?", "提示", { |
||||
confirmButtonText: "确定", |
||||
cancelButtonText: "取消", |
||||
type: "warning" |
||||
}).then(() => { |
||||
NProgress.start(); |
||||
exportBlob(downloadUrl, values).then(res => { |
||||
downloadXls(res.data, `诗尼曼线路${dateNow()}.xlsx`); |
||||
NProgress.done(); |
||||
}) |
||||
.then(() => { |
||||
return remove(this.ids); |
||||
}) |
||||
.then(() => { |
||||
this.onLoad(this.page); |
||||
this.$message({ |
||||
type: "success", |
||||
message: "操作成功!" |
||||
}); |
||||
this.$refs.crud.toggleSelection(); |
||||
}); |
||||
}, |
||||
handleExport() { |
||||
let downloadUrl = `/logpm-factory/snm/stationlinenum/export-stationlinenum?${this.website.tokenHeader}=${getToken()}`; |
||||
const { |
||||
logisticsLineNumber, |
||||
logisticsLineName, |
||||
} = this.query; |
||||
let values = { |
||||
logisticsLineNumber_equal: logisticsLineNumber, |
||||
logisticsLineName_like: logisticsLineName, |
||||
}; |
||||
this.$confirm("是否导出数据?", "提示", { |
||||
confirmButtonText: "确定", |
||||
cancelButtonText: "取消", |
||||
type: "warning" |
||||
}).then(() => { |
||||
NProgress.start(); |
||||
exportBlob(downloadUrl, values).then(res => { |
||||
downloadXls(res.data, `诗尼曼线路${dateNow()}.xlsx`); |
||||
NProgress.done(); |
||||
}) |
||||
}); |
||||
}, |
||||
beforeOpen(done, type) { |
||||
if (["edit", "view"].includes(type)) { |
||||
getDetail(this.form.id).then(res => { |
||||
this.form = res.data.data; |
||||
}); |
||||
}, |
||||
beforeOpen(done, type) { |
||||
if (["edit", "view"].includes(type)) { |
||||
getDetail(this.form.id).then(res => { |
||||
this.form = res.data.data; |
||||
}); |
||||
} |
||||
done(); |
||||
}, |
||||
searchReset() { |
||||
this.query = {}; |
||||
this.onLoad(this.page); |
||||
}, |
||||
searchChange(params, done) { |
||||
this.query = params; |
||||
this.page.currentPage = 1; |
||||
this.onLoad(this.page, params); |
||||
done(); |
||||
}, |
||||
selectionChange(list) { |
||||
this.selectionList = list; |
||||
}, |
||||
selectionClear() { |
||||
this.selectionList = []; |
||||
this.$refs.crud.toggleSelection(); |
||||
}, |
||||
currentChange(currentPage){ |
||||
this.page.currentPage = currentPage; |
||||
}, |
||||
sizeChange(pageSize){ |
||||
this.page.pageSize = pageSize; |
||||
}, |
||||
refreshChange() { |
||||
this.onLoad(this.page, this.query); |
||||
}, |
||||
onLoad(page, params = {}) { |
||||
this.loading = true; |
||||
} |
||||
done(); |
||||
}, |
||||
searchReset() { |
||||
this.query = {}; |
||||
this.onLoad(this.page); |
||||
}, |
||||
searchChange(params, done) { |
||||
this.query = params; |
||||
this.page.currentPage = 1; |
||||
this.onLoad(this.page, params); |
||||
done(); |
||||
}, |
||||
selectionChange(list) { |
||||
this.selectionList = list; |
||||
}, |
||||
selectionClear() { |
||||
this.selectionList = []; |
||||
this.$refs.crud.toggleSelection(); |
||||
}, |
||||
currentChange(currentPage) { |
||||
this.page.currentPage = currentPage; |
||||
}, |
||||
sizeChange(pageSize) { |
||||
this.page.pageSize = pageSize; |
||||
}, |
||||
refreshChange() { |
||||
this.onLoad(this.page, this.query); |
||||
}, |
||||
onLoad(page, params = {}) { |
||||
this.loading = true; |
||||
|
||||
const { |
||||
logisticsLineNumber, |
||||
logisticsLineName, |
||||
} = this.query; |
||||
const { |
||||
logisticsLineNumber, |
||||
logisticsLineName, |
||||
} = this.query; |
||||
|
||||
let values = { |
||||
logisticsLineNumber_equal: logisticsLineNumber, |
||||
logisticsLineName_like: logisticsLineName, |
||||
}; |
||||
let values = { |
||||
logisticsLineNumber_equal: logisticsLineNumber, |
||||
logisticsLineName_like: logisticsLineName, |
||||
}; |
||||
|
||||
getList(page.currentPage, page.pageSize, values).then(res => { |
||||
const data = res.data.data; |
||||
this.page.total = data.total; |
||||
this.data = data.records; |
||||
this.loading = false; |
||||
this.selectionClear(); |
||||
}); |
||||
} |
||||
getList(page.currentPage, page.pageSize, values).then(res => { |
||||
const data = res.data.data; |
||||
this.page.total = data.total; |
||||
this.data = data.records; |
||||
this.loading = false; |
||||
this.selectionClear(); |
||||
}); |
||||
} |
||||
}; |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped lang='scss'> |
||||
:deep(.no-print){ |
||||
margin-left:auto; |
||||
.el-button{ |
||||
margin-right:0 |
||||
:deep(.no-print) { |
||||
margin-left: auto; |
||||
|
||||
.el-button { |
||||
margin-right: 0 |
||||
} |
||||
} |
||||
:deep(.avue-form__row){ |
||||
max-width:300px!important; |
||||
|
||||
:deep(.avue-form__row) { |
||||
max-width: 300px !important; |
||||
} |
||||
:deep(.el-form-item__label){ |
||||
width:auto !important; |
||||
|
||||
:deep(.el-form-item__label) { |
||||
width: auto !important; |
||||
} |
||||
</style> |
||||
|
||||
Loading…
Reference in new issue