pref_mail@163.com
1 year ago
10 changed files with 1220 additions and 143 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