pref_mail@163.com
1 year ago
11 changed files with 1224 additions and 144 deletions
@ -0,0 +1,18 @@ |
|||||||
|
import request from '@/axios'; |
||||||
|
// 同步老系统盘点数据列表接口
|
||||||
|
export const $_SyncInventoryList = data => { |
||||||
|
return request({ |
||||||
|
url: '/logpm-patch/syncInventory/list', |
||||||
|
method: 'POST', |
||||||
|
data, |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
// 新增同步老系统盘点数据
|
||||||
|
export const $_SyncInventorySubmit = data => { |
||||||
|
return request({ |
||||||
|
url: '/logpm-patch/syncInventory/submit', |
||||||
|
method: 'POST', |
||||||
|
data, |
||||||
|
}); |
||||||
|
}; |
||||||
@ -0,0 +1,941 @@ |
|||||||
|
<template> |
||||||
|
<!-- 表格组件 --> |
||||||
|
<div class="el-content-el" ref="TabHeight"> |
||||||
|
<!-- 顶部开始 --> |
||||||
|
|
||||||
|
<!-- 搜索功能 --> |
||||||
|
<div class="SoInput" v-show="searchSo"> |
||||||
|
<el-form label-position="top" label-width="100px" :model="AddForm"> |
||||||
|
<el-form-item label="盘点任务编码:"> |
||||||
|
<el-input v-model="AddForm.inventoryNo" placeholder="请输入盘点任务编码" /> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
<div class="SoBtn"> |
||||||
|
<el-button type="primary" @click="SoInput" |
||||||
|
><el-icon><Search /></el-icon>搜索</el-button |
||||||
|
> |
||||||
|
<el-button type="primary" @click="SoEmpty"> |
||||||
|
<el-icon><Delete /></el-icon> 清空 |
||||||
|
</el-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="el-Cart-button"> |
||||||
|
<!-- 表格顶部左侧按钮 --> |
||||||
|
<div class="el-Cart-button-left"> |
||||||
|
<el-button type="primary" @click="AddInfo" |
||||||
|
><el-icon><Plus /></el-icon>新 增</el-button |
||||||
|
> |
||||||
|
</div> |
||||||
|
<!-- 表格顶部右侧按钮 --> |
||||||
|
<div class="el-Cart-button-right"> |
||||||
|
<!-- 刷新按钮 --> |
||||||
|
<button @click="refresh"> |
||||||
|
<el-icon color="#ccc"><Refresh /></el-icon> |
||||||
|
</button> |
||||||
|
<!-- 功能按钮 --> |
||||||
|
<button @click="menu = true"> |
||||||
|
<el-icon color="#ccc"><Operation /></el-icon> |
||||||
|
</button> |
||||||
|
<!-- 搜索按钮 --> |
||||||
|
<button @click="search"> |
||||||
|
<el-icon color="#ccc"><Search /></el-icon> |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<!-- 顶部结束 --> |
||||||
|
<div class="el-Cart"> |
||||||
|
<!-- 表格列开始 --> |
||||||
|
<el-table |
||||||
|
:data="data" |
||||||
|
row-key="name" |
||||||
|
v-loading="loading" |
||||||
|
element-loading-text="数据正在更新中..." |
||||||
|
border |
||||||
|
:height="TabHeight + 'px'" |
||||||
|
style="width: 100%" |
||||||
|
ref="tableRef" |
||||||
|
@select-all="selectAll" |
||||||
|
@select="selectChange" |
||||||
|
> |
||||||
|
<el-table-column type="selection" width="55" fixed /> |
||||||
|
<el-table-column type="index" fixed width="50" height="100" label="#" align="center" /> |
||||||
|
<template v-for="(item, index) in menuData" :key="item.label"> |
||||||
|
<!-- |
||||||
|
Type ===1 普通文本 |
||||||
|
Type ===2 图片显示 |
||||||
|
Type ===3 操作功能 |
||||||
|
label: 标题 |
||||||
|
width: 宽度 |
||||||
|
prop: 数据字段 |
||||||
|
--> |
||||||
|
<template v-if="item.type === 1"> |
||||||
|
<el-table-column |
||||||
|
v-if="item.head" |
||||||
|
:prop="item.prop" |
||||||
|
:label="item.label" |
||||||
|
:width="item.width" |
||||||
|
:fixed="item.fixed" |
||||||
|
align="center" |
||||||
|
/> |
||||||
|
</template> |
||||||
|
|
||||||
|
<template v-if="item.type === 4"> |
||||||
|
<el-table-column |
||||||
|
v-if="item.head" |
||||||
|
:prop="item.prop" |
||||||
|
:label="item.label" |
||||||
|
:width="item.width" |
||||||
|
:fixed="item.fixed" |
||||||
|
align="center" |
||||||
|
> |
||||||
|
<template #default="props"> |
||||||
|
<span>{{ |
||||||
|
props.row[item.prop] === 0 |
||||||
|
? '未开始' |
||||||
|
: props.row[item.prop] === 1 |
||||||
|
? '同步中' |
||||||
|
: props.row[item.prop] === 2 |
||||||
|
? '同步完成' |
||||||
|
: props.row[item.prop] === 2 |
||||||
|
? '同步异常' |
||||||
|
: '/' |
||||||
|
}}</span> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</template> |
||||||
|
|
||||||
|
<!-- |
||||||
|
<el-table-column prop="ctime" label="创建时间" min-width="150"> |
||||||
|
<template #default="props"> |
||||||
|
<span>{{ props.row.ctime }}</span> |
||||||
|
</template> |
||||||
|
</el-table-column> --> |
||||||
|
|
||||||
|
<template v-if="item.type === 2"> |
||||||
|
<el-table-column |
||||||
|
v-if="item.head" |
||||||
|
:label="item.label" |
||||||
|
:width="item.width" |
||||||
|
:fixed="item.fixed" |
||||||
|
align="center" |
||||||
|
> |
||||||
|
<template #default="props"> |
||||||
|
<img :src="props.row[item.prop]" class="el-Img" /> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</template> |
||||||
|
|
||||||
|
<template v-if="item.type === 3"> |
||||||
|
<el-table-column |
||||||
|
v-if="item.head" |
||||||
|
fixed="right" |
||||||
|
label="操作" |
||||||
|
width="280" |
||||||
|
align="center " |
||||||
|
> |
||||||
|
<template #default="scope"> |
||||||
|
<div :class="ElBtnClass"> |
||||||
|
<el-button |
||||||
|
:link="ElButtonS[0].link" |
||||||
|
:class="ElButtonS[0].class" |
||||||
|
:auto-insert-space="ElButtonS[0].space" |
||||||
|
:size="ElButtonS[0].size" |
||||||
|
:icon="ElButtonS[0].icon" |
||||||
|
@click="DeleteEvent(scope.row)" |
||||||
|
>删除</el-button |
||||||
|
> |
||||||
|
<el-button |
||||||
|
:link="ElButtonS[1].link" |
||||||
|
:class="ElButtonS[1].class" |
||||||
|
:auto-insert-space="ElButtonS[1].space" |
||||||
|
:size="ElButtonS[1].size" |
||||||
|
:icon="ElButtonS[1].icon" |
||||||
|
@click="EditEvent(scope.row)" |
||||||
|
>编辑</el-button |
||||||
|
> |
||||||
|
<el-button |
||||||
|
:link="ElButtonS[2].link" |
||||||
|
:class="ElButtonS[2].class" |
||||||
|
:auto-insert-space="ElButtonS[2].space" |
||||||
|
:size="ElButtonS[2].size" |
||||||
|
:icon="ElButtonS[2].icon" |
||||||
|
@click="ViewEvent(scope.row)" |
||||||
|
>查看</el-button |
||||||
|
> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</template> |
||||||
|
</template> |
||||||
|
</el-table> |
||||||
|
<!-- 表格翻页功能 --> |
||||||
|
<div class="demo-pagination-block"> |
||||||
|
<el-pagination |
||||||
|
v-model:current-page="currentPage" |
||||||
|
v-model:page-size="pageSize" |
||||||
|
:page-sizes="pageList" |
||||||
|
:disabled="disabled" |
||||||
|
:background="background" |
||||||
|
layout="total, sizes, prev, pager, next, jumper" |
||||||
|
:total="total" |
||||||
|
@size-change="PageSizeChange" |
||||||
|
@current-change="SizeChange" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<!-- 弹窗组件 --> |
||||||
|
<div class="addlalog"> |
||||||
|
<el-dialog v-model="AddLalog" title="新增盘点数据"> |
||||||
|
<el-form label-position="top" label-width="100px" :model="AddForm"> |
||||||
|
<el-form-item label="盘点任务编码"> |
||||||
|
<el-input v-model="AddForm.inventoryNo" placeholder="请输入盘点任务编码" /> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
<!-- 弹窗底部提交按钮 --> |
||||||
|
<div class="el-dialog-button"> |
||||||
|
<el-button type="danger" @click="submit"> |
||||||
|
<el-icon><Select /></el-icon> |
||||||
|
确认提交 |
||||||
|
</el-button> |
||||||
|
</div> |
||||||
|
</el-dialog> |
||||||
|
|
||||||
|
<el-dialog v-model="dialogVisible" title="Tips" width="30%" draggable> |
||||||
|
<span>It's a draggable Dialog</span> |
||||||
|
<template #footer> |
||||||
|
<span class="dialog-footer"> |
||||||
|
<el-button @click="dialogVisible = false">Cancel</el-button> |
||||||
|
<el-button type="primary" @click="dialogVisible = false"> Confirm </el-button> |
||||||
|
</span> |
||||||
|
</template> |
||||||
|
</el-dialog> |
||||||
|
</div> |
||||||
|
<!-- 弹窗结束 --> |
||||||
|
|
||||||
|
<!-- 右侧功能列表弹窗 --> |
||||||
|
<div class="el-menu-load"> |
||||||
|
<el-drawer v-model="menu" direction="rtl"> |
||||||
|
<template #header> |
||||||
|
<h4>菜单功能列表</h4> |
||||||
|
</template> |
||||||
|
<!-- 默认插入到侧边栏内容 --> |
||||||
|
<!-- 表格功能列表 --> |
||||||
|
<template #default> |
||||||
|
<div v-if="!Btn"> |
||||||
|
<el-tabs type="border-card"> |
||||||
|
<el-tab-pane label="表格功能"> |
||||||
|
<el-table :data="menuData" border :height="menuHeight + 'px'"> |
||||||
|
<el-table-column |
||||||
|
v-for="column in MenuTop" |
||||||
|
:key="column.prop" |
||||||
|
:prop="column.prop" |
||||||
|
:label="column.label" |
||||||
|
:width="column.width" |
||||||
|
> |
||||||
|
<!-- |
||||||
|
/ |
||||||
|
MenuTop: 0:菜单选项 |
||||||
|
true-label: 1.选中时候的值 |
||||||
|
false-label: 2.没有选中时候的值 |
||||||
|
@change: 3.当绑定时候的值发生变化的时候触发 |
||||||
|
label: 4.选中状态的值 |
||||||
|
|
||||||
|
/ |
||||||
|
--> |
||||||
|
<!-- 标题 --> |
||||||
|
<template #default="scope"> |
||||||
|
<template v-if="column.prop == 'label'"> |
||||||
|
<el-text class="mx-1">{{ scope.row[column.prop] }}</el-text> |
||||||
|
</template> |
||||||
|
<!-- 隐藏复选框 --> |
||||||
|
<template v-else-if="column.label == '隐藏'"> |
||||||
|
<el-checkbox-group v-model="checkList"> |
||||||
|
<el-checkbox |
||||||
|
:key="scope.row['label']" |
||||||
|
:label="scope.row['label']" |
||||||
|
@change="CheckBox(scope.row, 1)" |
||||||
|
> |
||||||
|
<!-- 用于隐藏文字 --> |
||||||
|
<template #default="scope"> |
||||||
|
<!-- {{ scope }} --> |
||||||
|
</template> |
||||||
|
</el-checkbox> |
||||||
|
</el-checkbox-group> |
||||||
|
</template> |
||||||
|
|
||||||
|
<template v-else-if="column.label == '冻结'"> |
||||||
|
<el-checkbox-group v-model="flexList"> |
||||||
|
<el-checkbox |
||||||
|
:key="scope.row['label']" |
||||||
|
:label="scope.row['label']" |
||||||
|
@change="CheckBox(scope.row, 2)" |
||||||
|
> |
||||||
|
<!-- 用于隐藏文字 --> |
||||||
|
<template #default="scope"> |
||||||
|
<!-- {{ scope }} --> |
||||||
|
</template> |
||||||
|
</el-checkbox> |
||||||
|
</el-checkbox-group> |
||||||
|
</template> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
</el-tab-pane> |
||||||
|
<el-tab-pane label="按钮功能"> |
||||||
|
<!-- <div class="el-title-btn"> |
||||||
|
<span> 表格操作按钮风格选择 </span> |
||||||
|
</div> --> |
||||||
|
<el-radio-group v-model="BtnRadio" @change="btnClass"> |
||||||
|
<el-radio label="1" size="default" border>链接样式风格</el-radio> |
||||||
|
<el-radio label="2" size="default" border>按钮样式风格</el-radio> |
||||||
|
</el-radio-group> |
||||||
|
</el-tab-pane> |
||||||
|
<el-tab-pane label="表格导出">Role</el-tab-pane> |
||||||
|
<el-tab-pane label="待添加">Task</el-tab-pane> |
||||||
|
</el-tabs> |
||||||
|
</div> |
||||||
|
<!-- 按钮功能结束--> |
||||||
|
</template> |
||||||
|
</el-drawer> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script setup lang="ts"> |
||||||
|
import { ref, reactive, onMounted, computed } from 'vue'; |
||||||
|
import { getList, getDetail, $_AddInfo, update, remove, $_TableList } from '@/api/basic/basicPda'; //API |
||||||
|
import { ElMessage, type UploadProps } from 'element-plus'; |
||||||
|
import { getToken } from '@/utils/auth'; |
||||||
|
import { |
||||||
|
$_SyncInventoryList, |
||||||
|
$_SyncInventorySubmit, |
||||||
|
} from '@/api/LsystemsInventory/LsystemsInventory'; |
||||||
|
const currentPage = ref(1); // 默认页码 |
||||||
|
const pageSize = ref(20); // 默认每一页几条 |
||||||
|
const pageList = ref([5, 10, 50, 100, 200]); // 选择每页显示多少条 |
||||||
|
const background = ref(true); // 是否开启背景颜色 |
||||||
|
const disabled = ref(false); // 是否禁止使用页码功能 |
||||||
|
const data = ref([]); // 表格数据 |
||||||
|
const TabHeight = ref(); //动态获取表格高度 |
||||||
|
const AddLalog = ref(false); //提交弹窗 |
||||||
|
const AddForm = ref({}); //表单所有信息 |
||||||
|
const tableRef = ref(null); // 用于引用 table 实例 |
||||||
|
const menu = ref(false); //功能菜单列表 |
||||||
|
const menuHeight = ref(); //右侧菜单栏高度,用于固定表头 |
||||||
|
const total = ref(100); //页码总数 |
||||||
|
const checkList = ref<(string | number)[]>([]); //隐藏 |
||||||
|
const flexList = ref<(string | number)[]>([]); //冻结 |
||||||
|
const loading = ref(false); //刷新功能 |
||||||
|
const BG = ref(false); //表格功能列表 |
||||||
|
const BtnRadio = ref('1'); //按钮样式风格切换 |
||||||
|
const ElBtnClass = ref('el-Btn-link'); //按钮样式风格类名 |
||||||
|
const searchSo = ref(false); //搜索弹窗 |
||||||
|
const dialogVisible = ref(false); |
||||||
|
const btnClass = type => { |
||||||
|
// 切换链接样式风格 |
||||||
|
if (type == 1) { |
||||||
|
ElBtnClass.value = 'el-Btn-link'; |
||||||
|
} |
||||||
|
// 切换按钮样式风格 |
||||||
|
if (type == 2) { |
||||||
|
ElBtnClass.value = 'el-Btn-btn'; |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
const handleSizeChange = () => { |
||||||
|
console.log(1); |
||||||
|
}; |
||||||
|
// 按钮配置 |
||||||
|
const ElButtonS = ref([ |
||||||
|
// 1.class 按钮样式名(用于切换按钮样式) |
||||||
|
// 2.space 是否开启按钮文子直接间距(true开启 ,false关闭) |
||||||
|
// 3.size 按钮尺寸默认小尺寸('large'| 'default'| 'small') |
||||||
|
// 4.icon 按钮图标 |
||||||
|
// 5.table 按钮名称 |
||||||
|
{ |
||||||
|
class: 'el-btn-danger', |
||||||
|
space: true, |
||||||
|
size: 'small', |
||||||
|
icon: 'el-icon-delete', |
||||||
|
table: '删除', |
||||||
|
}, |
||||||
|
{ |
||||||
|
class: 'el-btn-success', |
||||||
|
space: true, |
||||||
|
size: 'small', |
||||||
|
icon: 'Edit', |
||||||
|
table: '编辑', |
||||||
|
}, |
||||||
|
{ |
||||||
|
class: 'el-btn-view', |
||||||
|
space: true, |
||||||
|
size: 'small', |
||||||
|
icon: 'el-icon-view', |
||||||
|
table: '查看', |
||||||
|
}, |
||||||
|
]); |
||||||
|
// 菜单配置 |
||||||
|
const MenuTop = ref([ |
||||||
|
{ |
||||||
|
prop: 'label', |
||||||
|
label: '列名', |
||||||
|
width: '', |
||||||
|
}, |
||||||
|
{ |
||||||
|
prop: '', |
||||||
|
label: '隐藏', |
||||||
|
}, |
||||||
|
{ |
||||||
|
prop: '', |
||||||
|
label: '冻结', |
||||||
|
}, |
||||||
|
{ |
||||||
|
prop: '', |
||||||
|
label: '排序', |
||||||
|
}, |
||||||
|
]); |
||||||
|
|
||||||
|
// 菜单功能配置项 |
||||||
|
const menuData = ref([ |
||||||
|
{ |
||||||
|
prop: 'inventoryNo', |
||||||
|
label: '任务编码', |
||||||
|
type: 1, |
||||||
|
values: '', |
||||||
|
width: '260', |
||||||
|
checkarr: [], |
||||||
|
fixed: false, |
||||||
|
sortable: true, |
||||||
|
head: true, |
||||||
|
}, |
||||||
|
{ |
||||||
|
prop: 'inventoryId', |
||||||
|
label: 'ID', |
||||||
|
type: 1, |
||||||
|
values: '', |
||||||
|
width: '265', |
||||||
|
checkarr: [], |
||||||
|
fixed: false, |
||||||
|
sortable: true, |
||||||
|
head: true, |
||||||
|
}, |
||||||
|
{ |
||||||
|
prop: 'syncStartDate', |
||||||
|
label: '同步开始时间', |
||||||
|
type: 1, |
||||||
|
values: '', |
||||||
|
width: '260', |
||||||
|
checkarr: [], |
||||||
|
fixed: false, |
||||||
|
sortable: true, |
||||||
|
head: true, |
||||||
|
}, |
||||||
|
{ |
||||||
|
prop: 'syncEndDate', |
||||||
|
label: '同步结束时间', |
||||||
|
type: 1, |
||||||
|
values: '', |
||||||
|
width: '260', |
||||||
|
checkarr: [], |
||||||
|
fixed: false, |
||||||
|
sortable: true, |
||||||
|
head: true, |
||||||
|
}, |
||||||
|
{ |
||||||
|
prop: 'syncStatus', |
||||||
|
label: '同步状态', |
||||||
|
type: 4, |
||||||
|
values: '', |
||||||
|
width: '260', |
||||||
|
checkarr: [], |
||||||
|
fixed: false, |
||||||
|
sortable: true, |
||||||
|
head: true, |
||||||
|
}, |
||||||
|
{ |
||||||
|
prop: 'warehouseName', |
||||||
|
label: '仓库', |
||||||
|
type: 1, |
||||||
|
values: '', |
||||||
|
width: '260', |
||||||
|
checkarr: [], |
||||||
|
fixed: false, |
||||||
|
sortable: true, |
||||||
|
head: true, |
||||||
|
}, |
||||||
|
]); |
||||||
|
|
||||||
|
// 获取表格数据 |
||||||
|
function onLoad() { |
||||||
|
// 获取表格数据API（$_TableList） |
||||||
|
$_SyncInventoryList({ |
||||||
|
pageNum: currentPage.value, |
||||||
|
pageSize: pageSize.value, |
||||||
|
inventoryNo: AddForm.value.inventoryNo, |
||||||
|
// inventoryNo:123123 |
||||||
|
}).then(res => { |
||||||
|
//表格信息 |
||||||
|
data.value = res.data.data.records; |
||||||
|
console.log(res, 'res'); |
||||||
|
}); |
||||||
|
} |
||||||
|
// 同步老系统盘点数据列表接口 |
||||||
|
const Sub = () => { |
||||||
|
onLoad(); |
||||||
|
}; |
||||||
|
|
||||||
|
// 动态获取DOM高度给表单防止页面出现滚动条 |
||||||
|
onMounted(() => { |
||||||
|
//默认值88 |
||||||
|
TabHeight.value = TabHeight.value.offsetHeight - 91; |
||||||
|
menuHeight.value = window.innerHeight - 136; |
||||||
|
console.log('元素的高度：', menuHeight.value); |
||||||
|
// 等待DOM高度被复制之后在请求数据，防止被数据撑开高度 |
||||||
|
onLoad(); |
||||||
|
}); |
||||||
|
|
||||||
|
// 新增数据功能 |
||||||
|
const AddInfo = () => { |
||||||
|
AddLalog.value = true; //展开表单弹窗 |
||||||
|
}; |
||||||
|
// 每页多少条触发 |
||||||
|
const PageSizeChange = val => { |
||||||
|
pageSize.value = val; |
||||||
|
onLoad(); |
||||||
|
console.log('每一页', val, '条'); |
||||||
|
}; |
||||||
|
// 页码翻页触发 |
||||||
|
const SizeChange = val => { |
||||||
|
currentPage.value = val; |
||||||
|
onLoad(); |
||||||
|
console.log('当前是第', val, '页'); |
||||||
|
}; |
||||||
|
|
||||||
|
// 表单信息提交 |
||||||
|
const submit = () => { |
||||||
|
console.log(AddForm.value); |
||||||
|
$_SyncInventorySubmit(AddForm.value).then(res => { |
||||||
|
console.log(res); |
||||||
|
}); |
||||||
|
}; |
||||||
|
// 菜单触发功能 |
||||||
|
// Type ===1 隐藏列 |
||||||
|
// Type ===2 冻结列 |
||||||
|
const CheckBox = (scope, type: number) => { |
||||||
|
console.log(scope, 'scope'); |
||||||
|
if (type === 1) { |
||||||
|
scope.head = !scope.head; |
||||||
|
} |
||||||
|
if (type === 2) { |
||||||
|
scope.fixed = !scope.fixed; |
||||||
|
} |
||||||
|
}; |
||||||
|
// 表格全选功能触发 |
||||||
|
const selectAll = val => { |
||||||
|
console.log(val); |
||||||
|
}; |
||||||
|
// 表格单个选中触发事件 |
||||||
|
const selectChange = (selection, row) => { |
||||||
|
// 1.selection 选中的数组 |
||||||
|
// 2.row 选中的当前行 |
||||||
|
console.log(selection); |
||||||
|
}; |
||||||
|
// 删除触发事件 |
||||||
|
const DeleteEvent = val => { |
||||||
|
// 接收点击删除当前行数据 |
||||||
|
console.log('触发了删除事件', val); |
||||||
|
}; |
||||||
|
// 编辑触发事件 |
||||||
|
const EditEvent = val => { |
||||||
|
// 接收点击编辑当前行数据 |
||||||
|
console.log('触发了编辑事件', val); |
||||||
|
}; |
||||||
|
// 查看事件 |
||||||
|
const ViewEvent = val => { |
||||||
|
//接收点击查看当前行数据; |
||||||
|
console.log('触发了查看事件', val); |
||||||
|
}; |
||||||
|
// 刷新功能触发事件 |
||||||
|
const refresh = () => { |
||||||
|
// loading.value = !loading.value; |
||||||
|
}; |
||||||
|
// 搜索展开功能 |
||||||
|
const search = () => { |
||||||
|
searchSo.value = !searchSo.value; |
||||||
|
}; |
||||||
|
// 顶部搜索功能 |
||||||
|
const SoInput = () => { |
||||||
|
onLoad(); |
||||||
|
}; |
||||||
|
// 顶部清空搜索 |
||||||
|
const SoEmpty = () => { |
||||||
|
AddForm.value.inventoryNo = ''; |
||||||
|
onLoad(); |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped lang="scss"> |
||||||
|
// 最外层 IDV |
||||||
|
.el-content-el { |
||||||
|
padding: 0 8px; |
||||||
|
padding-top: 8px; |
||||||
|
background-color: #fff; |
||||||
|
height: 100%; |
||||||
|
box-sizing: border-box; |
||||||
|
// 表格顶部按钮 |
||||||
|
:deep(.el-Cart-button) { |
||||||
|
margin-bottom: 8px; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
// 表格顶部左侧、右侧按钮样式 |
||||||
|
.el-Cart-button-left, |
||||||
|
.el-Cart-button-right { |
||||||
|
display: flex; |
||||||
|
margin: 0 0px; |
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
.el-Cart-button-left { |
||||||
|
:deep(button) { |
||||||
|
padding: 0 14px; |
||||||
|
min-width: 70px; |
||||||
|
display: flex; |
||||||
|
span { |
||||||
|
width: 100%; |
||||||
|
display: inline-flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
i { |
||||||
|
margin-right: 6px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.el-Cart-button-right { |
||||||
|
display: flex; |
||||||
|
margin: 0 0px; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
button { |
||||||
|
background-color: transparent; |
||||||
|
border-radius: 50%; |
||||||
|
width: 30px; |
||||||
|
height: 30px; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
border: 1px solid #ccc; |
||||||
|
margin-right: 8px; |
||||||
|
|
||||||
|
&:hover { |
||||||
|
background-color: #172e601f; |
||||||
|
i { |
||||||
|
color: #0e2549; |
||||||
|
} |
||||||
|
} |
||||||
|
// 去掉最后一个按钮右侧边距 |
||||||
|
&:last-child { |
||||||
|
margin-right: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.el-Cart { |
||||||
|
// 表格标题颜色 |
||||||
|
:deep(.el-table__header) { |
||||||
|
th { |
||||||
|
background-color: #fafafa; |
||||||
|
color: #000; |
||||||
|
} |
||||||
|
} |
||||||
|
// 组件样式开始 |
||||||
|
// 分页样式 |
||||||
|
.demo-pagination-block { |
||||||
|
display: flex; |
||||||
|
justify-content: flex-end; |
||||||
|
margin-top: 6px; |
||||||
|
} |
||||||
|
|
||||||
|
// 表格行高度 |
||||||
|
:deep(.el-table__row) { |
||||||
|
height: 60px; |
||||||
|
} |
||||||
|
// 表格图片 |
||||||
|
.el-Img { |
||||||
|
width: 100%; |
||||||
|
height: 40px; |
||||||
|
|
||||||
|
img { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
// 新增数据弹窗组件样式 |
||||||
|
:deep(.addlalog) { |
||||||
|
// 弹窗 |
||||||
|
.el-dialog__header { |
||||||
|
border-bottom: 1px solid #172e607d; |
||||||
|
margin-right: 0; |
||||||
|
margin-bottom: 0; |
||||||
|
padding-bottom: 20px; |
||||||
|
position: relative; |
||||||
|
i { |
||||||
|
color: #172e60; |
||||||
|
border-radius: 50%; |
||||||
|
border: 1px solid; |
||||||
|
transition: transform 1s; |
||||||
|
} |
||||||
|
} |
||||||
|
.el-dialog__header button:hover { |
||||||
|
i { |
||||||
|
transform: rotate(360deg); |
||||||
|
} |
||||||
|
} |
||||||
|
// 弹窗标题左侧小竖线 |
||||||
|
.el-dialog__header::after { |
||||||
|
content: ''; |
||||||
|
display: block; |
||||||
|
width: 3px; |
||||||
|
height: 16px; |
||||||
|
background-color: #172e60; |
||||||
|
position: absolute; |
||||||
|
left: 8px; |
||||||
|
top: 24px; |
||||||
|
} |
||||||
|
.el-dialog__body { |
||||||
|
.el-form { |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
flex-wrap: wrap; |
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
.el-form-item { |
||||||
|
width: 276px; |
||||||
|
.el-form-item__label { |
||||||
|
font-family: '黑体'; |
||||||
|
} |
||||||
|
} |
||||||
|
/* 去掉第三个、第六个、第九个div的右外边距 */ |
||||||
|
.el-form-item:nth-child(3n) { |
||||||
|
margin-right: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.el-form-item__content { |
||||||
|
height: 30px; |
||||||
|
// 日期选择框 |
||||||
|
.el-input { |
||||||
|
width: 100%; |
||||||
|
height: 30px !important; |
||||||
|
} |
||||||
|
// 下拉选择框 |
||||||
|
.el-select { |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// 底部提交 |
||||||
|
:deep(.el-dialog-button) { |
||||||
|
display: flex; |
||||||
|
justify-content: flex-end; |
||||||
|
} |
||||||
|
.el-dialog-button button:hover { |
||||||
|
color: #fff; |
||||||
|
background-color: #10d070; |
||||||
|
transition: all 0.3s ease-in-out; /* 添加动画效果 */ |
||||||
|
background-color: #10d070; |
||||||
|
border: 1px solid #10d070; |
||||||
|
} |
||||||
|
// 图片上传 |
||||||
|
.img-icon { |
||||||
|
width: 100%; |
||||||
|
position: relative; |
||||||
|
.el-button { |
||||||
|
width: 100%; |
||||||
|
background-color: #fff; |
||||||
|
color: #a8abb9; |
||||||
|
justify-content: flex-start; |
||||||
|
border: 1px solid #dcdfe6; |
||||||
|
} |
||||||
|
i { |
||||||
|
position: absolute; |
||||||
|
left: 110px; |
||||||
|
top: 8px; |
||||||
|
font-size: 18px; |
||||||
|
} |
||||||
|
} |
||||||
|
:deep(.el-load-img) { |
||||||
|
width: 100%; |
||||||
|
height: 32px; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
.el-image { |
||||||
|
width: 100%; |
||||||
|
height: auto; |
||||||
|
img { |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
} |
||||||
|
.el-image-viewer__canvas { |
||||||
|
img { |
||||||
|
width: 50%; |
||||||
|
height: 50%; |
||||||
|
z-index: 10; |
||||||
|
} |
||||||
|
} |
||||||
|
.el-z { |
||||||
|
.el-image { |
||||||
|
position: absolute; |
||||||
|
height: 28px; |
||||||
|
top: 2px; |
||||||
|
left: 1px; |
||||||
|
} |
||||||
|
} |
||||||
|
.el-icon { |
||||||
|
color: #10d070; |
||||||
|
} |
||||||
|
} |
||||||
|
:deep(.upload-demo) { |
||||||
|
width: 100%; |
||||||
|
.el-upload { |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
ul { |
||||||
|
margin-top: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
// 图片上传成功 |
||||||
|
.el-img { |
||||||
|
border: 1px solid #ccc; |
||||||
|
width: 100%; |
||||||
|
border-radius: 4px; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
height: 30px; |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
.el-img-left { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
span { |
||||||
|
z-index: 9; |
||||||
|
} |
||||||
|
i { |
||||||
|
margin-right: 8px; |
||||||
|
color: #10d070; |
||||||
|
z-index: 9; |
||||||
|
} |
||||||
|
} |
||||||
|
i { |
||||||
|
color: #10d070; |
||||||
|
margin-left: 6px; |
||||||
|
} |
||||||
|
} |
||||||
|
// 侧边弹窗功能样式 |
||||||
|
:deep(.el-menu-load) { |
||||||
|
.el-drawer__header { |
||||||
|
padding: 0; |
||||||
|
padding-left: 20px; |
||||||
|
position: relative; |
||||||
|
border-bottom: 1px solid #172e5f; |
||||||
|
margin-bottom: 0; |
||||||
|
i { |
||||||
|
color: #172e60; |
||||||
|
} |
||||||
|
} |
||||||
|
.el-drawer__header::after { |
||||||
|
content: ''; |
||||||
|
display: block; |
||||||
|
width: 4px; |
||||||
|
height: 18px; |
||||||
|
background-color: #172e60; |
||||||
|
position: absolute; |
||||||
|
top: 23px; |
||||||
|
left: 9px; |
||||||
|
} |
||||||
|
.el-table__inner-wrapper { |
||||||
|
.cell { |
||||||
|
text-align: center; |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
.el-table__row { |
||||||
|
height: 40px; |
||||||
|
.el-btn-danger { |
||||||
|
background-color: #f56c6c !important; |
||||||
|
border: 1px solid #f56c6c; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
// 上移,下移按钮 |
||||||
|
.el-text { |
||||||
|
margin: 0 5px; |
||||||
|
} |
||||||
|
// 按钮功能样式标题 |
||||||
|
.el-title-btn { |
||||||
|
margin-bottom: 20px; |
||||||
|
} |
||||||
|
} |
||||||
|
.el-table__row { |
||||||
|
height: 40px; |
||||||
|
|
||||||
|
// 链接样式风格(默认) |
||||||
|
.el-Btn-link { |
||||||
|
.el-btn-danger, |
||||||
|
.el-btn-success, |
||||||
|
.el-btn-view { |
||||||
|
color: #172e60; |
||||||
|
background-color: transparent; |
||||||
|
border: 1px solid transparent; |
||||||
|
} |
||||||
|
} |
||||||
|
// 按钮样式风格 |
||||||
|
.el-Btn-btn { |
||||||
|
// 删除按钮颜色 |
||||||
|
.el-btn-danger { |
||||||
|
background-color: #f56c6c; |
||||||
|
border: 1px solid #f56c6c; |
||||||
|
color: #fff; |
||||||
|
padding: 5px 11px; |
||||||
|
} |
||||||
|
// 编辑按钮颜色 |
||||||
|
.el-btn-success { |
||||||
|
background-color: #409eff; |
||||||
|
border: 1px solid #409eff; |
||||||
|
color: #fff; |
||||||
|
padding: 5px 11px; |
||||||
|
} |
||||||
|
// 查看按钮颜色 |
||||||
|
.el-btn-view { |
||||||
|
background-color: #172e60; |
||||||
|
border: 1px solid #172e60; |
||||||
|
color: #fff; |
||||||
|
padding: 5px 11px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.SoInput { |
||||||
|
width: 100%; |
||||||
|
transition: all 0.5s; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
|
||||||
|
.el-form-item { |
||||||
|
width: 300px; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-items: center; |
||||||
|
margin-bottom: 8px; |
||||||
|
} |
||||||
|
.el-form-item__label { |
||||||
|
margin-bottom: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue