Merge remote-tracking branch 'origin/gyj'
This commit is contained in:
@@ -211,7 +211,7 @@ const handleApprove = (item) => {
|
||||
item.status = 2;
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '申请已被通过！'
|
||||
message: '审核完成'
|
||||
})
|
||||
})
|
||||
}).catch(() => {
|
||||
@@ -228,7 +228,7 @@ const handleReject = (item) => {
|
||||
item.status = 1;
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '申请已被拒绝！'
|
||||
message: '驳回完成'
|
||||
})
|
||||
})
|
||||
}).catch(() => {
|
||||
|
||||
@@ -1,297 +0,0 @@
|
||||
<template>
|
||||
<el-card shadow="never" class="henader-card">
|
||||
<div class="flx-row">
|
||||
<el-form :inline="true" :model="queryData" style="flex: 1">
|
||||
<el-input placeholder="请输入搜索内容" v-model="queryData.keyWord">
|
||||
</el-input>
|
||||
<el-date-picker
|
||||
class="ml20"
|
||||
v-model="queryData.date"
|
||||
type="datetimerange"
|
||||
:shortcuts="shortcuts"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
/>
|
||||
</el-form>
|
||||
<div class="flex-right">
|
||||
<el-button type="primary" :icon="Search" @click="initData" class="ml20"
|
||||
>搜索</el-button
|
||||
>
|
||||
<el-button type="primary" @click="dialogVisibleShow">+添加</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card shadow="never">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
:header-cell-style="{ backgroundColor: '#ecf5ff' }"
|
||||
border
|
||||
stripe
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column
|
||||
v-for="item in options"
|
||||
:key="item.type"
|
||||
:prop="item.props"
|
||||
:label="item.label"
|
||||
:width="item.width"
|
||||
:align="item.align"
|
||||
show-overflow-tooltip
|
||||
:fixed="item.fixed"
|
||||
>
|
||||
<template v-slot:default="scope" v-if="item.props === 'actions'">
|
||||
<el-icon class="icon-view" @click="ItemView(scope.row)"
|
||||
><View
|
||||
/></el-icon>
|
||||
<el-icon class="icon-edit" @click="editorClick(scope.row)"
|
||||
><Edit
|
||||
/></el-icon>
|
||||
<el-popconfirm
|
||||
confirm-button-text="确认"
|
||||
cancel-button-text="取消"
|
||||
:icon="InfoFilled"
|
||||
icon-color="#626AEF"
|
||||
title="确认删除该用户?"
|
||||
@confirm="DeleteItem(index)"
|
||||
>
|
||||
<template #reference>
|
||||
<el-icon class="icon-dele"><Delete /></el-icon>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
small
|
||||
background
|
||||
:page-size="queryData.size"
|
||||
layout="prev, pager, next"
|
||||
:total="total"
|
||||
class="mt-4"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</el-card>
|
||||
|
||||
<el-dialog
|
||||
v-model="dialogVisible"
|
||||
:title="`${dialogData.title}用户`"
|
||||
:width="dialogWidth"
|
||||
:hide-required-asterisk="dialogData.isView"
|
||||
draggable
|
||||
>
|
||||
<el-form
|
||||
:model="dialogData.FormData"
|
||||
:rules="rules"
|
||||
ref="FormRef"
|
||||
class="demo-ruleForm"
|
||||
>
|
||||
<el-form-item
|
||||
label="用户名"
|
||||
:label-width="formLabelWidth"
|
||||
prop="username"
|
||||
>
|
||||
<el-input v-model="dialogData.FormData.username" autocomplete="off" />
|
||||
</el-form-item>
|
||||
<el-form-item label="邮箱" :label-width="formLabelWidth" prop="email">
|
||||
<el-input v-model="dialogData.FormData.email" autocomplete="off" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="地址" :label-width="formLabelWidth" prop="address">
|
||||
<el-input v-model="dialogData.FormData.address" type="textarea" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" :label-width="formLabelWidth" prop="content">
|
||||
<el-input v-model="dialogData.FormData.content" type="textarea" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="onSubmit()">确认</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
Search,
|
||||
Edit,
|
||||
Delete,
|
||||
UserFilled,
|
||||
InfoFilled,
|
||||
View,
|
||||
} from '@element-plus/icons-vue'
|
||||
import {
|
||||
getUserList,
|
||||
addUserList,
|
||||
listUpdate,
|
||||
} from '../../../api/modules/index.js'
|
||||
import { options } from './options.js'
|
||||
import { onMounted, reactive, ref } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { getDateTime } from '../../../utils/index.js'
|
||||
const queryData = ref({
|
||||
keyWord: '',
|
||||
page: 1,
|
||||
size: 10,
|
||||
})
|
||||
const FormRef = ref()
|
||||
const formLabelWidth = '140px'
|
||||
const dialogData = reactive({
|
||||
isView: true,
|
||||
title: '添加',
|
||||
FormData: {
|
||||
username: '',
|
||||
email: '',
|
||||
address: '',
|
||||
content: '',
|
||||
},
|
||||
})
|
||||
|
||||
const dialogWidth = ref('0')
|
||||
const rules = reactive({
|
||||
username: [{ required: true, message: '请填写用户姓名', trigger: 'change' }],
|
||||
email: [{ required: true, message: '请填写邮箱', trigger: 'change' }],
|
||||
address: [{ required: true, message: '请填写居住地址', trigger: 'change' }],
|
||||
content: [{ required: true, message: '请填写备注信息', trigger: 'change' }],
|
||||
})
|
||||
const oldTableData = ref([])
|
||||
const dialogVisible = ref(false)
|
||||
const tableData = ref([])
|
||||
const total = ref(0)
|
||||
|
||||
const initData = () => {
|
||||
getUserList(queryData.value).then((res) => {
|
||||
total.value = res.data.data.total
|
||||
tableData.value = res.data.data.userList
|
||||
})
|
||||
}
|
||||
|
||||
const dialogVisibleShow = () => {
|
||||
dialogData.FormData = {
|
||||
username: '',
|
||||
email: '',
|
||||
address: '',
|
||||
content: '',
|
||||
}
|
||||
dialogVisible.value = true
|
||||
}
|
||||
const onSubmit = () => {
|
||||
FormRef.value.validate(async (valid) => {
|
||||
if (!valid) return
|
||||
try {
|
||||
if (dialogData.FormData.id) {
|
||||
listUpdate(dialogData.FormData).then((res) => {
|
||||
console.log('编辑数据成功')
|
||||
console.log(ElMessage)
|
||||
ElMessage({
|
||||
message: '编辑用户成功',
|
||||
type: 'success',
|
||||
})
|
||||
tableData.value = res.data.data
|
||||
})
|
||||
} else {
|
||||
dialogData.FormData.date = getDateTime('')
|
||||
addUserList(dialogData.FormData)
|
||||
.then((res) => {
|
||||
ElMessage({
|
||||
message: '添加用户成功',
|
||||
type: 'success',
|
||||
})
|
||||
dialogData.FormData.id = res.data.data.id
|
||||
tableData.value.unshift(dialogData.FormData)
|
||||
})
|
||||
.catch((err) => {})
|
||||
}
|
||||
dialogVisible.value = false
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
})
|
||||
}
|
||||
const handleCurrentChange = (val) => {
|
||||
queryData.value.page = val
|
||||
initData(queryData.value)
|
||||
}
|
||||
const editorClick = (item) => {
|
||||
dialogVisible.value = true
|
||||
|
||||
dialogData.FormData = item
|
||||
console.log(dialogData.FormData)
|
||||
dialogData.isView = false
|
||||
dialogData.title = '编辑'
|
||||
}
|
||||
|
||||
const ItemView = (item) => {
|
||||
dialogVisible.value = true
|
||||
dialogData.FormData = item
|
||||
dialogData.isView = false
|
||||
dialogData.title = ''
|
||||
}
|
||||
|
||||
const DeleteItem = (index) => {
|
||||
console.log(index)
|
||||
tableData.value.splice(index, 1)
|
||||
}
|
||||
const cancelEvent = () => {
|
||||
console.log('cancel!')
|
||||
}
|
||||
const setDialogWidth = () => {
|
||||
console.log(document.body.clientWidth)
|
||||
var val = document.body.clientWidth
|
||||
const def = 800 // 默认宽度
|
||||
if (val < def) {
|
||||
dialogWidth.value = '100%'
|
||||
} else {
|
||||
dialogWidth.value = def + 'px'
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
setDialogWidth()
|
||||
window.onresize = () => {
|
||||
return (() => {
|
||||
setDialogWidth()
|
||||
})()
|
||||
}
|
||||
initData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.henader-card {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.icon-view {
|
||||
font-size: 20px;
|
||||
color: #673ab7;
|
||||
margin: 0 10px;
|
||||
}
|
||||
.icon-edit {
|
||||
font-size: 20px;
|
||||
color: #2f60c2;
|
||||
margin: 0 10px;
|
||||
}
|
||||
.icon-dele {
|
||||
font-size: 20px;
|
||||
color: #ff5722;
|
||||
}
|
||||
.mt-4 {
|
||||
float: right;
|
||||
text-align: right;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.el-button--text {
|
||||
margin-right: 15px;
|
||||
}
|
||||
.el-select {
|
||||
width: 300px;
|
||||
}
|
||||
.el-input {
|
||||
width: 300px;
|
||||
}
|
||||
.dialog-footer button:first-child {
|
||||
margin-right: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,39 +0,0 @@
|
||||
export const options = [{
|
||||
label: '用户名',
|
||||
props: 'username',
|
||||
width: 'auto',
|
||||
align: 'left'
|
||||
},
|
||||
{
|
||||
label: '邮箱',
|
||||
props: 'email',
|
||||
width: 'auto',
|
||||
align: 'left'
|
||||
},
|
||||
{
|
||||
label: '创建时间',
|
||||
props: 'date',
|
||||
width: 'auto',
|
||||
align: 'left'
|
||||
},
|
||||
{
|
||||
label: '地址',
|
||||
props: 'address',
|
||||
width: 'auto',
|
||||
align: 'left'
|
||||
},
|
||||
{
|
||||
label: '备注',
|
||||
props: 'content',
|
||||
width: 'auto',
|
||||
align: 'left',
|
||||
show: true
|
||||
},
|
||||
{
|
||||
label: '操作',
|
||||
props: 'actions',
|
||||
width: '150',
|
||||
align: 'center',
|
||||
fixed: 'right',
|
||||
}
|
||||
]
|
||||
@@ -1,34 +0,0 @@
|
||||
<template>
|
||||
<el-card>
|
||||
<el-button type="primary" @click="importExcel">导入Excel</el-button>
|
||||
</el-card>
|
||||
<filesUpload ref="importRef" @gatewayData="gatewayData"></filesUpload>
|
||||
|
||||
<el-card class="mt10">
|
||||
<el-table :data="tableData" border size="small"></el-table>
|
||||
</el-card>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
// import XLSX from 'xlsx'
|
||||
import filesUpload from '../../../components/filesUpload.vue'
|
||||
const importRef = ref('')
|
||||
const tableData = ref([])
|
||||
const importExcel = () => {
|
||||
let params = {}
|
||||
importRef.value.acceptParams(params)
|
||||
console.log(importRef.value.acceptParams(params))
|
||||
}
|
||||
|
||||
const gatewayData = (params) => {
|
||||
console.log(params)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mt-4 {
|
||||
float: right;
|
||||
text-align: right;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,248 +0,0 @@
|
||||
<template>
|
||||
<el-card>
|
||||
<el-button type="primary" class="mt-4" @click="dialogVisibleHanle"
|
||||
>编辑表格</el-button
|
||||
>
|
||||
</el-card>
|
||||
<el-card class="mt10">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
:header-cell-style="{ backgroundColor: '#ecf5ff' }"
|
||||
border
|
||||
stripe
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column
|
||||
v-for="item in columnData"
|
||||
:key="item.props"
|
||||
:prop="item.props"
|
||||
:label="item.label"
|
||||
:width="item.width"
|
||||
v-show="item.show"
|
||||
:fixed="item.fixed"
|
||||
:align="item.align"
|
||||
show-overflow-tooltip
|
||||
></el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
class="mt10 mt-4"
|
||||
v-model:currentPage="queryData.page"
|
||||
v-model:page-size="queryData.size"
|
||||
:page-sizes="[10]"
|
||||
:disabled="disabled"
|
||||
background
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</el-card>
|
||||
|
||||
<el-dialog
|
||||
v-model="dialogVisible"
|
||||
title="编辑列表"
|
||||
width="80%"
|
||||
:before-close="handleClose"
|
||||
>
|
||||
<el-table
|
||||
class="t1"
|
||||
row-key="id"
|
||||
ref="dragTable"
|
||||
:data="tableDialog"
|
||||
:row-class-name="tableRowClassName"
|
||||
:header-cell-style="{ backgroundColor: '#ecf5ff' }"
|
||||
border
|
||||
stripe
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column
|
||||
v-for="item in DialogColumn"
|
||||
:key="item.props"
|
||||
:prop="item.props"
|
||||
:label="item.label"
|
||||
>
|
||||
<template v-slot:default="scope" v-if="item.props === 'label'">
|
||||
<el-input v-model.trim="scope.row.label"></el-input>
|
||||
</template>
|
||||
<template v-slot:default="scope" v-if="item.props === 'width'">
|
||||
<el-input v-model.trim="scope.row.width"></el-input>
|
||||
</template>
|
||||
<template v-slot:default="scope" v-if="item.props === 'align'">
|
||||
<el-select
|
||||
v-model="scope.row[scope.column.property]"
|
||||
placeholder="Select"
|
||||
>
|
||||
<el-option
|
||||
v-for="i in optionsType"
|
||||
:key="i.value"
|
||||
:label="i.label"
|
||||
:value="i.value"
|
||||
/>
|
||||
</el-select>
|
||||
</template>
|
||||
<template v-slot:default="scope" v-if="item.props === 'show'">
|
||||
<el-switch v-model="scope.row.show" />
|
||||
</template>
|
||||
<template v-slot:default="scope" v-if="item.props === 'fiexd'">
|
||||
<el-select v-model="scope.row.fixed" placeholder="Select">
|
||||
<el-option
|
||||
v-for="i in fiexdType"
|
||||
:key="i.value"
|
||||
:label="i.label"
|
||||
:value="i.value"
|
||||
/>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="dialogSubmit">确认</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script setup>
|
||||
import { nextTick, onMounted, reactive, ref } from 'vue'
|
||||
import { getUserList } from '../../../api/modules/index.js'
|
||||
import { options } from './options.js'
|
||||
import Sortable from 'sortablejs'
|
||||
const tableData = ref([])
|
||||
const id = ref('')
|
||||
const tableDialog = ref([])
|
||||
const optionsType = ref([
|
||||
{ value: 'left', label: '右对齐' },
|
||||
{ value: 'right', label: '左对齐' },
|
||||
{ value: 'center', label: '居中' },
|
||||
])
|
||||
const fiexdType = ref([
|
||||
{ value: true, label: '是' },
|
||||
{ value: false, label: '否' },
|
||||
])
|
||||
const DialogColumn = ref([
|
||||
{
|
||||
label: '表头',
|
||||
props: 'label',
|
||||
},
|
||||
{
|
||||
label: '对应列的宽度',
|
||||
props: 'width',
|
||||
},
|
||||
{
|
||||
label: '对齐方式',
|
||||
props: 'align',
|
||||
},
|
||||
{
|
||||
label: '是否显示',
|
||||
props: 'show',
|
||||
},
|
||||
{
|
||||
label: '列是否固定',
|
||||
props: 'fiexd',
|
||||
},
|
||||
])
|
||||
|
||||
const columnData = ref(JSON.parse(JSON.stringify(options)))
|
||||
const disabled = ref(false)
|
||||
const dialogVisible = ref(false)
|
||||
const total = ref(0)
|
||||
const queryData = ref({
|
||||
keyWord: '',
|
||||
page: 1,
|
||||
size: 10,
|
||||
})
|
||||
const initData = () => {
|
||||
getUserList(queryData.value).then((res) => {
|
||||
total.value = res.data.data.total
|
||||
tableData.value = res.data.data.userList
|
||||
})
|
||||
}
|
||||
const handleSizeChange = (val) => {
|
||||
console.log(val)
|
||||
}
|
||||
|
||||
const handleCurrentChange = (val) => {
|
||||
queryData.value.page = val
|
||||
initData(queryData.value)
|
||||
}
|
||||
const handleClose = () => {}
|
||||
const dialogVisibleHanle = () => {
|
||||
console.log(tableData.value)
|
||||
console.log(columnData)
|
||||
tableDialog.value = columnData.value
|
||||
console.log(tableDialog.value)
|
||||
dialogVisible.value = true
|
||||
nextTick(() => {
|
||||
initSortable('t1')
|
||||
})
|
||||
}
|
||||
|
||||
const dialogSubmit = () => {
|
||||
console.log(tableDialog.value)
|
||||
dialogVisible.value = false
|
||||
console.log(columnData.value)
|
||||
}
|
||||
onMounted(() => {
|
||||
console.log(columnData.value)
|
||||
initData()
|
||||
})
|
||||
|
||||
const initSortable = (className) => {
|
||||
console.log(className)
|
||||
// 获取表格row的父节点
|
||||
const table = document.querySelector(
|
||||
'.' + className + ' .el-table__body-wrapper tbody'
|
||||
)
|
||||
// 创建拖拽实例
|
||||
console.log(table)
|
||||
console.log(Sortable)
|
||||
let dragTable = Sortable.create(table, {
|
||||
animation: 150, //动画
|
||||
// disabled: false, // 拖拽不可用? false 启用（刚刚渲染表格的时候起作用，后面不起作用）
|
||||
// handle: ".move", //指定拖拽目标，点击此目标才可拖拽元素(此例中设置操作按钮拖拽)
|
||||
// filter: ".disabled", //指定不可拖动的类名（el-table中可通过row-class-name设置行的class）
|
||||
// dragClass: "dragClass", //设置拖拽样式类名
|
||||
// ghostClass: "ghostClass", //设置拖拽停靠样式类名
|
||||
// chosenClass: "chosenClass", //设置选中样式类名
|
||||
// 开始拖动事件
|
||||
onStart: () => {
|
||||
console.log('开始拖动')
|
||||
},
|
||||
// 结束拖动事件
|
||||
onEnd: ({ newIndex, oldIndex }) => {
|
||||
console.log('结束拖动', `拖动前索引${oldIndex}---拖动后索引${newIndex}`)
|
||||
const currRow = tableDialog.value.splice(oldIndex, 1)[0]
|
||||
tableDialog.value.splice(newIndex, 0, currRow)
|
||||
console.log('结束拖动', tableDialog.value)
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
function tableRowClassName({ row }) {
|
||||
if (row.disabled) {
|
||||
return 'disabled'
|
||||
}
|
||||
return ''
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mt-4 {
|
||||
float: right;
|
||||
text-align: right;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.dragClass {
|
||||
background: rgba($color: #41c21a, $alpha: 0.5) !important;
|
||||
}
|
||||
// 停靠
|
||||
.ghostClass {
|
||||
background: rgba($color: #6cacf5, $alpha: 0.5) !important;
|
||||
}
|
||||
// 选择
|
||||
.chosenClass:hover > td {
|
||||
background: rgba($color: #f56c6c, $alpha: 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
@@ -1,41 +0,0 @@
|
||||
export const options = [{
|
||||
label: "用户名",
|
||||
props: "username",
|
||||
width: "auto",
|
||||
align: "left",
|
||||
show: true,
|
||||
fixed: false,
|
||||
},
|
||||
{
|
||||
label: "邮箱",
|
||||
props: "email",
|
||||
width: "auto",
|
||||
align: "left",
|
||||
show: true,
|
||||
fixed: false,
|
||||
},
|
||||
{
|
||||
label: "创建时间",
|
||||
props: "date",
|
||||
width: "auto",
|
||||
align: "left",
|
||||
show: true,
|
||||
fixed: false,
|
||||
},
|
||||
{
|
||||
label: "地址",
|
||||
props: "address",
|
||||
width: "auto",
|
||||
align: "left",
|
||||
show: true,
|
||||
fixed: false,
|
||||
},
|
||||
{
|
||||
label: "备注",
|
||||
props: "content",
|
||||
width: "auto",
|
||||
align: "left",
|
||||
show: true,
|
||||
fixed: false,
|
||||
},
|
||||
];
|
||||
@@ -1,175 +0,0 @@
|
||||
<template>
|
||||
<el-card class="flx-row-right">
|
||||
<!-- <el-button type="primary" v-print="'#printMe'">打印</el-button> -->
|
||||
<el-button type="primary" @click="scrollHanlde">滑动加载</el-button>
|
||||
<el-button type="primary" @click="isShowPagHandle">分页加载</el-button>
|
||||
<el-button type="primary" @click="educeExcel">导出表格</el-button>
|
||||
</el-card>
|
||||
<el-card class="mt10" id="printMe">
|
||||
<el-table id="mutipleTable" :data="tableData" :header-cell-style="{ backgroundColor: '#ecf5ff' }" border stripe style="width: 100%" :height="heightTbale">
|
||||
<el-table-column v-for="item in columnData" :key="item.props" :sortable="item.sortable" :prop="item.props" :label="item.label" :width="item.width" :fixed="item.fixed" :align="item.align">
|
||||
<template v-slot:default="scope" v-if="item.props !== 'actions'">
|
||||
<el-input v-model="scope.row[item.props]" v-if="scope.row.itemEdit"></el-input>
|
||||
<div v-else class="one-cut-txt">{{ scope.row[item.props] }}</div>
|
||||
</template>
|
||||
<template v-slot:default="scope" v-if="item.props === 'actions'">
|
||||
<el-icon class="icon-edit" @click="itemEditHanld(scope.row)"><Finished v-if="scope.row.itemEdit" /><Edit v-else /></el-icon>
|
||||
<el-popconfirm confirm-button-text="确认" cancel-button-text="取消" :icon="InfoFilled" icon-color="#626AEF" title="确认删除该用户?" @confirm="DeleteItem(index)" @cancel="cancelEvent">
|
||||
<template #reference>
|
||||
<el-icon class="icon-dele"><Delete /></el-icon>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination v-if="isShowPag" small background layout="prev, pager, next" :total="60" class="mt-4 mt10" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
|
||||
</el-card>
|
||||
</template>
|
||||
<script setup>
|
||||
import print from "vue3-print-nb";
|
||||
|
||||
import * as XLSX from "xlsx";
|
||||
import { Edit, Delete, InfoFilled, View } from "@element-plus/icons-vue";
|
||||
import { nextTick, onMounted, reactive, ref } from "vue";
|
||||
import { orderLists } from "../../../api/modules/index.js";
|
||||
import { options } from "./options.js";
|
||||
const tableData = ref([]);
|
||||
const oldTableData = ref([]);
|
||||
const tabclickIndex = ref();
|
||||
|
||||
const columnData = ref(JSON.parse(JSON.stringify(options)));
|
||||
const disabled = ref(false);
|
||||
const dialogVisible = ref(false);
|
||||
const total = ref(0);
|
||||
const queryData = ref({
|
||||
keyWord: "",
|
||||
page: 1,
|
||||
size: 10,
|
||||
});
|
||||
|
||||
const heightTbale = ref("auto");
|
||||
const isShowPag = ref(true);
|
||||
const scrollHanlde = () => {
|
||||
heightTbale.value = "75vh";
|
||||
isShowPag.value = false;
|
||||
oldTableData.value = [];
|
||||
queryData.value.page = 1;
|
||||
queryData.value.size = 15;
|
||||
initData();
|
||||
|
||||
// let table = mutipleTable.value._value.layout.table.refs.bodyWrapper;
|
||||
let table = document.getElementById("mutipleTable");
|
||||
table.addEventListener(
|
||||
"scroll",
|
||||
(res) => {
|
||||
console.log("/监听表格滚动事件");
|
||||
loadmore(res);
|
||||
},
|
||||
true
|
||||
);
|
||||
};
|
||||
const isShowPagHandle = () => {
|
||||
isShowPag.value = true;
|
||||
heightTbale.value = "auto";
|
||||
queryData.value.page = 1;
|
||||
queryData.value.size = 10;
|
||||
initData();
|
||||
};
|
||||
const cancelEvent = (val) => {
|
||||
console.log("取消");
|
||||
};
|
||||
const initData = () => {
|
||||
orderLists(queryData.value).then((res) => {
|
||||
console.log(res.data.data);
|
||||
// total.value = res.data.data.total
|
||||
if (queryData.value.size == 10) {
|
||||
tableData.value = res.data.data;
|
||||
} else {
|
||||
tableData.value = res.data.data.slice(queryData.value.page - 1, queryData.value.size);
|
||||
oldTableData.value = res.data.data;
|
||||
}
|
||||
});
|
||||
};
|
||||
const itemEditHanld = (item) => {
|
||||
item.itemEdit = !item.itemEdit;
|
||||
// // console.log(JSON.stringify(item));
|
||||
// tabclickIndex.value = item;
|
||||
};
|
||||
const handleSizeChange = (val) => {
|
||||
console.log(val);
|
||||
};
|
||||
|
||||
const handleCurrentChange = (val) => {
|
||||
queryData.value.page = val;
|
||||
initData(queryData.value);
|
||||
};
|
||||
const handleClose = () => {};
|
||||
const dialogVisibleHanle = () => {
|
||||
console.log("滑动加载");
|
||||
};
|
||||
const educeExcel = () => {
|
||||
console.log("导出表格");
|
||||
const data = XLSX.utils.json_to_sheet(tableData.value); //此处tableData.value为表格的数据
|
||||
const wb = XLSX.utils.book_new();
|
||||
XLSX.utils.book_append_sheet(wb, data, "test-data"); //test-data为自定义的sheet表名
|
||||
XLSX.writeFile(wb, "测试.xlsx"); //test.xlsx为自定义的文件名
|
||||
};
|
||||
|
||||
// https://www.zcool.com.cn/work/ZMzUzMDA0MDQ=.html
|
||||
|
||||
onMounted(() => {
|
||||
console.log(columnData.value);
|
||||
initData();
|
||||
});
|
||||
|
||||
const loadmore = (res) => {
|
||||
// 再距离底部20px的时候滚动加载下一条
|
||||
if (res.target.scrollTop && res.target.scrollHeight - 2 <= res.target.scrollTop + res.target.clientHeight) {
|
||||
console.log(queryData.value.page);
|
||||
queryData.value.page++;
|
||||
if (queryData.value.page > 5) return;
|
||||
tableData.value = tableData.value.concat(
|
||||
// res.data.data
|
||||
oldTableData.value.slice(queryData.value.size * queryData.value.page - queryData.value.size, queryData.value.size * queryData.value.page)
|
||||
);
|
||||
}
|
||||
};
|
||||
const vPrint = (event) => {
|
||||
event.print;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mt-4 {
|
||||
float: right;
|
||||
text-align: right;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.dragClass {
|
||||
background: rgba($color: #41c21a, $alpha: 0.5) !important;
|
||||
}
|
||||
// 停靠
|
||||
.ghostClass {
|
||||
background: rgba($color: #6cacf5, $alpha: 0.5) !important;
|
||||
}
|
||||
// 选择
|
||||
.chosenClass:hover > td {
|
||||
background: rgba($color: #f56c6c, $alpha: 0.5) !important;
|
||||
}
|
||||
|
||||
.icon-view {
|
||||
font-size: 20px;
|
||||
color: #673ab7;
|
||||
margin: 0 10px;
|
||||
}
|
||||
.icon-edit {
|
||||
font-size: 20px;
|
||||
color: #2f60c2;
|
||||
margin: 0 10px;
|
||||
}
|
||||
.icon-dele {
|
||||
font-size: 20px;
|
||||
color: #ff5722;
|
||||
}
|
||||
</style>
|
||||
@@ -1,122 +0,0 @@
|
||||
export const options = [
|
||||
{
|
||||
label: "序号",
|
||||
props: "goodsId",
|
||||
width: "60",
|
||||
align: "left",
|
||||
show: true,
|
||||
fixed: false,
|
||||
itemEdit: "itemEdit",
|
||||
sortable: false,
|
||||
},
|
||||
{
|
||||
label: "机构代码",
|
||||
props: "code",
|
||||
width: "auto",
|
||||
align: "left",
|
||||
show: true,
|
||||
fixed: false,
|
||||
itemEdit: "itemEdit",
|
||||
sortable: false,
|
||||
},
|
||||
{
|
||||
label: "机构名",
|
||||
props: "title",
|
||||
width: "auto",
|
||||
align: "left",
|
||||
show: true,
|
||||
fixed: false,
|
||||
itemEdit: "itemEdit",
|
||||
sortable: false,
|
||||
},
|
||||
{
|
||||
label: "商品名称",
|
||||
props: "goodsname",
|
||||
width: "auto",
|
||||
align: "left",
|
||||
show: true,
|
||||
fixed: false,
|
||||
itemEdit: "itemEdit",
|
||||
sortable: false,
|
||||
},
|
||||
{
|
||||
label: "商品条码",
|
||||
props: "commodity",
|
||||
width: "auto",
|
||||
align: "left",
|
||||
show: true,
|
||||
fixed: false,
|
||||
itemEdit: "itemEdit",
|
||||
sortable: false,
|
||||
},
|
||||
{
|
||||
label: "规格",
|
||||
props: "sku",
|
||||
width: "auto",
|
||||
align: "left",
|
||||
show: true,
|
||||
fixed: false,
|
||||
itemEdit: "itemEdit",
|
||||
sortable: false,
|
||||
},
|
||||
{
|
||||
label: "品牌",
|
||||
props: "brand",
|
||||
width: "auto",
|
||||
align: "left",
|
||||
show: true,
|
||||
fixed: false,
|
||||
itemEdit: "itemEdit",
|
||||
sortable: false,
|
||||
},
|
||||
{
|
||||
label: "销售数量",
|
||||
props: "number",
|
||||
width: "auto",
|
||||
align: "left",
|
||||
show: true,
|
||||
fixed: false,
|
||||
itemEdit: "itemEdit",
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
label: "剩余库存",
|
||||
props: "inventory",
|
||||
width: "auto",
|
||||
align: "left",
|
||||
show: true,
|
||||
fixed: false,
|
||||
itemEdit: "itemEdit",
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
label: "成本价",
|
||||
props: "costPrice",
|
||||
width: "auto",
|
||||
align: "left",
|
||||
show: true,
|
||||
fixed: false,
|
||||
itemEdit: "itemEdit",
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
label: "成本金额",
|
||||
props: "amount",
|
||||
width: "auto",
|
||||
align: "left",
|
||||
show: true,
|
||||
fixed: false,
|
||||
itemEdit: "itemEdit",
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
label: "操作",
|
||||
props: "actions",
|
||||
width: "auto",
|
||||
align: "left",
|
||||
show: true,
|
||||
fixed: "right",
|
||||
itemEdit: "itemEdit",
|
||||
sortable: false,
|
||||
},
|
||||
];
|
||||
@@ -1,208 +0,0 @@
|
||||
<template>
|
||||
<el-card>
|
||||
<div class="mt-4">
|
||||
<el-button type="primary" @click="handleExpand">折叠全部</el-button>
|
||||
<el-button type="primary" @click="handleOpen">展开全部</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-card class="mt10">
|
||||
<el-table
|
||||
ref="table"
|
||||
:data="tableData"
|
||||
:header-cell-style="{ backgroundColor: '#ecf5ff' }"
|
||||
border
|
||||
stripe
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column type="expand">
|
||||
<template #default="props">
|
||||
<div class="m10">
|
||||
<div class="expand-title">机构信息</div>
|
||||
<el-table
|
||||
:header-cell-style="{ backgroundColor: '#FAFAFA' }"
|
||||
:data="props.row.ItemData"
|
||||
border
|
||||
style="border-bottom: none"
|
||||
>
|
||||
<el-table-column
|
||||
v-for="ctx in ItemData"
|
||||
:key="ctx.props"
|
||||
:sortable="ctx.sortable"
|
||||
:prop="ctx.props"
|
||||
:label="ctx.label"
|
||||
:width="ctx.width"
|
||||
:fixed="ctx.fixed"
|
||||
:align="ctx.align"
|
||||
show-overflow-tooltip
|
||||
>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
v-for="item in columnData"
|
||||
:key="item.props"
|
||||
:sortable="item.sortable"
|
||||
:prop="item.props"
|
||||
:label="item.label"
|
||||
:width="item.width"
|
||||
:fixed="item.fixed"
|
||||
:align="item.align"
|
||||
show-overflow-tooltip
|
||||
>
|
||||
<template v-slot:default="scope" v-if="item.props !== 'actions'">
|
||||
<el-input
|
||||
v-model="scope.row[item.props]"
|
||||
v-if="scope.row.itemEdit"
|
||||
></el-input>
|
||||
<div v-else class="one-cut-txt">{{ scope.row[item.props] }}</div>
|
||||
</template>
|
||||
<template v-slot:default="scope" v-if="item.props === 'actions'">
|
||||
<el-icon class="icon-edit" @click="itemEditHanld(scope.row)"
|
||||
><Finished v-if="scope.row.itemEdit" /><Edit v-else
|
||||
/></el-icon>
|
||||
<el-popconfirm
|
||||
confirm-button-text="确认"
|
||||
cancel-button-text="取消"
|
||||
:icon="InfoFilled"
|
||||
icon-color="#626AEF"
|
||||
title="确认删除该数据?"
|
||||
@confirm="DeleteItem(index)"
|
||||
>
|
||||
<template #reference>
|
||||
<el-icon class="icon-dele"><Delete /></el-icon>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
small
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
:total="50"
|
||||
class="mt-4 mt10"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</el-card>
|
||||
</template>
|
||||
<script setup>
|
||||
import * as XLSX from 'xlsx'
|
||||
import {
|
||||
Edit,
|
||||
Delete,
|
||||
InfoFilled,
|
||||
View,
|
||||
ArrowDownBold,
|
||||
Plus,
|
||||
} from '@element-plus/icons-vue'
|
||||
import { nextTick, onMounted, reactive, ref } from 'vue'
|
||||
import { orderLists } from '../../../api/modules/index.js'
|
||||
import { options, ItemData } from './options.js'
|
||||
const tableData = ref([])
|
||||
const table = ref()
|
||||
const tabclickIndex = ref()
|
||||
const isExpand = ref(false)
|
||||
const columnData = ref(JSON.parse(JSON.stringify(options)))
|
||||
const disabled = ref(false)
|
||||
const dialogVisible = ref(false)
|
||||
const total = ref(0)
|
||||
const formInline = ref({})
|
||||
const queryData = ref({
|
||||
keyWord: '',
|
||||
page: 1,
|
||||
size: 10,
|
||||
})
|
||||
const initData = () => {
|
||||
orderLists(queryData.value).then((res) => {
|
||||
console.log(res.data.data)
|
||||
// total.value = res.data.data.total
|
||||
tableData.value = res.data.data
|
||||
})
|
||||
}
|
||||
const itemEditHanld = (item) => {
|
||||
item.itemEdit = !item.itemEdit
|
||||
// // console.log(JSON.stringify(item));
|
||||
// tabclickIndex.value = item;
|
||||
}
|
||||
const handleSizeChange = (val) => {
|
||||
console.log(val)
|
||||
}
|
||||
const handleSelectionChange = (val) => {}
|
||||
const handleCurrentChange = (val) => {
|
||||
queryData.value.size = 10
|
||||
queryData.value.page = val
|
||||
initData(queryData.value)
|
||||
}
|
||||
const handleClose = () => {}
|
||||
const dialogVisibleHanle = () => {
|
||||
console.log('滑动加载')
|
||||
}
|
||||
const handleExpand = () => {
|
||||
isExpand.value = false
|
||||
tableData.value.forEach((item) => {
|
||||
table.value.toggleRowExpansion(item, isExpand.value)
|
||||
})
|
||||
}
|
||||
|
||||
const handleOpen = () => {
|
||||
isExpand.value = true
|
||||
tableData.value.forEach((item) => {
|
||||
table.value.toggleRowExpansion(item, isExpand.value)
|
||||
})
|
||||
}
|
||||
|
||||
// https://www.zcool.com.cn/work/ZMzUzMDA0MDQ=.html
|
||||
|
||||
onMounted(() => {
|
||||
console.log(columnData.value)
|
||||
initData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mt-4 {
|
||||
float: right;
|
||||
text-align: right;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.demo-form-inline {
|
||||
}
|
||||
.dragClass {
|
||||
background: rgba($color: #41c21a, $alpha: 0.5) !important;
|
||||
}
|
||||
// 停靠
|
||||
.ghostClass {
|
||||
background: rgba($color: #6cacf5, $alpha: 0.5) !important;
|
||||
}
|
||||
// 选择
|
||||
.chosenClass:hover > td {
|
||||
background: rgba($color: #f56c6c, $alpha: 0.5) !important;
|
||||
}
|
||||
|
||||
.icon-view {
|
||||
font-size: 20px;
|
||||
color: #673ab7;
|
||||
margin: 0 10px;
|
||||
}
|
||||
.icon-edit {
|
||||
font-size: 20px;
|
||||
color: #2f60c2;
|
||||
margin: 0 10px;
|
||||
}
|
||||
.icon-dele {
|
||||
font-size: 20px;
|
||||
color: #ff5722;
|
||||
}
|
||||
.btn-color {
|
||||
background: #fff;
|
||||
color: #4c60cc;
|
||||
}
|
||||
.expand-title {
|
||||
padding: 10px;
|
||||
color: #919399;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
@@ -1,163 +0,0 @@
|
||||
export const options = [{
|
||||
label: "序号",
|
||||
props: "goodsId",
|
||||
width: "60",
|
||||
align: "left",
|
||||
show: true,
|
||||
fixed: false,
|
||||
itemEdit: "itemEdit",
|
||||
sortable: false,
|
||||
},
|
||||
{
|
||||
label: "机构代码",
|
||||
props: "code",
|
||||
width: "auto",
|
||||
align: "left",
|
||||
show: true,
|
||||
fixed: false,
|
||||
itemEdit: "itemEdit",
|
||||
sortable: false,
|
||||
},
|
||||
{
|
||||
label: "机构名",
|
||||
props: "title",
|
||||
width: "auto",
|
||||
align: "left",
|
||||
show: true,
|
||||
fixed: false,
|
||||
itemEdit: "itemEdit",
|
||||
sortable: false,
|
||||
},
|
||||
{
|
||||
label: "商品名称",
|
||||
props: "goodsname",
|
||||
width: "auto",
|
||||
align: "left",
|
||||
show: true,
|
||||
fixed: false,
|
||||
itemEdit: "itemEdit",
|
||||
sortable: false,
|
||||
},
|
||||
{
|
||||
label: "商品条码",
|
||||
props: "commodity",
|
||||
width: "auto",
|
||||
align: "left",
|
||||
show: true,
|
||||
fixed: false,
|
||||
itemEdit: "itemEdit",
|
||||
sortable: false,
|
||||
},
|
||||
{
|
||||
label: "规格",
|
||||
props: "sku",
|
||||
width: "auto",
|
||||
align: "left",
|
||||
show: true,
|
||||
fixed: false,
|
||||
itemEdit: "itemEdit",
|
||||
sortable: false,
|
||||
},
|
||||
{
|
||||
label: "品牌",
|
||||
props: "brand",
|
||||
width: "auto",
|
||||
align: "left",
|
||||
show: true,
|
||||
fixed: false,
|
||||
itemEdit: "itemEdit",
|
||||
sortable: false,
|
||||
},
|
||||
{
|
||||
label: "销售数量",
|
||||
props: "number",
|
||||
width: "auto",
|
||||
align: "left",
|
||||
show: true,
|
||||
fixed: false,
|
||||
itemEdit: "itemEdit",
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
label: "剩余库存",
|
||||
props: "inventory",
|
||||
width: "auto",
|
||||
align: "left",
|
||||
show: true,
|
||||
fixed: false,
|
||||
itemEdit: "itemEdit",
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
label: "成本价",
|
||||
props: "costPrice",
|
||||
width: "auto",
|
||||
align: "left",
|
||||
show: true,
|
||||
fixed: false,
|
||||
itemEdit: "itemEdit",
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
label: "成本金额",
|
||||
props: "amount",
|
||||
width: "auto",
|
||||
align: "left",
|
||||
show: true,
|
||||
fixed: false,
|
||||
itemEdit: "itemEdit",
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
label: "操作",
|
||||
props: "actions",
|
||||
width: "auto",
|
||||
align: "left",
|
||||
show: true,
|
||||
fixed: "right",
|
||||
itemEdit: "itemEdit",
|
||||
sortable: false,
|
||||
},
|
||||
];
|
||||
export const ItemData = [{
|
||||
label: "地址信息",
|
||||
props: "address",
|
||||
width: "auto",
|
||||
align: "left",
|
||||
show: true,
|
||||
fixed: false,
|
||||
itemEdit: "itemEdit",
|
||||
sortable: false,
|
||||
},
|
||||
{
|
||||
label: "联系方式",
|
||||
props: "email",
|
||||
width: "auto",
|
||||
align: "left",
|
||||
show: true,
|
||||
fixed: false,
|
||||
itemEdit: "itemEdit",
|
||||
sortable: false,
|
||||
},
|
||||
{
|
||||
label: "营业状态",
|
||||
props: "state",
|
||||
width: "auto",
|
||||
align: "left",
|
||||
show: true,
|
||||
fixed: false,
|
||||
itemEdit: "itemEdit",
|
||||
sortable: false,
|
||||
},
|
||||
{
|
||||
label: "销售额",
|
||||
props: "salenumber",
|
||||
width: "auto",
|
||||
align: "left",
|
||||
show: true,
|
||||
fixed: false,
|
||||
itemEdit: "itemEdit",
|
||||
sortable: false,
|
||||
},
|
||||
|
||||
];
|
||||
+282
-138
@@ -32,52 +32,46 @@
|
||||
</template>
|
||||
<template #default>
|
||||
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="max-width: 600px;margin-bottom: 20px"
|
||||
placeholder="请输入活动名称"
|
||||
>
|
||||
<template #prepend>活动名称</template>
|
||||
</el-input>
|
||||
<el-form
|
||||
:model="formData"
|
||||
label-width="auto" style="max-width: 600px">
|
||||
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
drag
|
||||
action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
|
||||
multiple
|
||||
>
|
||||
<el-icon class="el-icon--upload">
|
||||
<upload-filled/>
|
||||
</el-icon>
|
||||
<div class="el-upload__text">
|
||||
点击或拖拽上传缩略图(横幅缩略图)
|
||||
</div>
|
||||
<template #tip>
|
||||
<div class="el-upload__tip">
|
||||
文件格式：jpg/png
|
||||
</div>
|
||||
</template>
|
||||
</el-upload>
|
||||
<el-form-item label="活动名称">
|
||||
<el-input
|
||||
v-model="formData.title"
|
||||
placeholder="请输入活动名称"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
drag
|
||||
action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
|
||||
multiple
|
||||
>
|
||||
<el-icon class="el-icon--upload">
|
||||
<upload-filled/>
|
||||
</el-icon>
|
||||
<div class="el-upload__text">
|
||||
点击或拖拽上传活动长图（活动详情）
|
||||
</div>
|
||||
<template #tip>
|
||||
<div class="el-upload__tip">
|
||||
文件格式：jpg/png
|
||||
</div>
|
||||
</template>
|
||||
</el-upload>
|
||||
<el-form-item label="轮播图">
|
||||
<el-upload
|
||||
v-model:file-list="fileBannerList"
|
||||
list-type="picture-card"
|
||||
:before-upload="beforeUpload"
|
||||
:http-request="addUploadBannerFile"
|
||||
:limit="1"
|
||||
:on-exceed="handleBannerExceed"
|
||||
:on-remove="handleBannerRemove"
|
||||
>
|
||||
<el-icon><Plus /></el-icon>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="详情图">
|
||||
<el-upload
|
||||
v-model:file-list="fileDetailList"
|
||||
list-type="picture-card"
|
||||
:before-upload="beforeUpload"
|
||||
:http-request="addUploadDetailFile"
|
||||
:limit="1"
|
||||
:on-exceed="handleDetailExceed"
|
||||
:on-remove="handleDetailRemove"
|
||||
>
|
||||
<el-icon><Plus /></el-icon>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
<div style="display: flex;justify-content: flex-end;margin-top: 50px">
|
||||
<el-button @click="cancelClick">取消</el-button>
|
||||
<el-button type="primary" @click="confirmClick">确认</el-button>
|
||||
@@ -101,7 +95,7 @@
|
||||
|
||||
<el-table-column
|
||||
label="序号"
|
||||
prop="userId"
|
||||
prop="id"
|
||||
width="120"
|
||||
align="center"
|
||||
show-overflow-tooltip
|
||||
@@ -110,21 +104,27 @@
|
||||
|
||||
<el-table-column
|
||||
label="活动名称"
|
||||
prop="name"
|
||||
prop="title"
|
||||
width="600"
|
||||
align="left"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
|
||||
<el-table-column label="展示图" width="600px" align="center">
|
||||
<el-table-column label="展示图" width="300px" align="center">
|
||||
<template #default="scope">
|
||||
<el-image style="width: 600px; height: 50px" :src="scope.row.avatar" :fit="fit" lazy />
|
||||
<el-image style="width: 200px; height: 50px" :src="scope.row.thumbnail" lazy />
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="详情图" width="300px" align="center">
|
||||
<template #default="scope">
|
||||
<el-image style="width: 200px; height: 50px" :src="scope.row.detailImg" lazy />
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
label="发布时间"
|
||||
prop="date"
|
||||
prop="createdAt"
|
||||
width="auto"
|
||||
align="center"
|
||||
show-overflow-tooltip
|
||||
@@ -133,8 +133,11 @@
|
||||
|
||||
<el-table-column label="操作" width="200px" align="center">
|
||||
<template v-slot:default="scope">
|
||||
<el-button type="info">编辑</el-button>
|
||||
<el-button type="danger">删除</el-button>
|
||||
<el-popconfirm title="确认删除这张图片吗?" @confirm="deleteData(scope.row)">
|
||||
<template #reference>
|
||||
<el-button type="danger">删除</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
@@ -150,7 +153,6 @@
|
||||
</el-card>
|
||||
</template>
|
||||
<script setup>
|
||||
import * as XLSX from 'xlsx'
|
||||
import {
|
||||
Edit,
|
||||
Delete,
|
||||
@@ -161,20 +163,21 @@ import {
|
||||
} from '@element-plus/icons-vue'
|
||||
import {nextTick, onMounted, reactive, ref} from 'vue'
|
||||
|
||||
import {options} from './options.js'
|
||||
import {getUserList} from "../../api/modules/user";
|
||||
import {ElMessage} from "element-plus";
|
||||
import {addFile} from "../../api/modules/upload";
|
||||
import {getConfigList, updateSystem} from "../../api/modules/system";
|
||||
|
||||
const tableData = ref([])
|
||||
const dataList = ref([])
|
||||
const table = ref()
|
||||
const tabclickIndex = ref()
|
||||
const isExpand = ref(false)
|
||||
const columnData = ref(JSON.parse(JSON.stringify(options)))
|
||||
const disabled = ref(false)
|
||||
|
||||
const dialogVisible = ref(false)
|
||||
const total = ref(0)
|
||||
const formInline = ref({})
|
||||
const registerDate = ref('');
|
||||
|
||||
const fileBannerList = ref([]);
|
||||
const fileDetailList = ref([]);
|
||||
|
||||
const searchName = ref('');
|
||||
const drawer = ref(false)
|
||||
const queryData = ref({
|
||||
@@ -183,49 +186,239 @@ const queryData = ref({
|
||||
size: 10,
|
||||
})
|
||||
|
||||
const formData = ref({
|
||||
id: 1,
|
||||
title: '',
|
||||
thumbnail:'',
|
||||
detailImg: '',
|
||||
createdAt: '',
|
||||
});
|
||||
|
||||
// 初始化数据
|
||||
const initData = () => {
|
||||
|
||||
tableData.value = columnData.value;
|
||||
getConfigList(queryData.value).then((res) => {
|
||||
|
||||
// orderLists(queryData.value).then((res) => {
|
||||
// console.log(res.data.data)
|
||||
// // total.value = res.data.data.total
|
||||
// tableData.value = res.data.data
|
||||
// })
|
||||
if(res.data[1].content !== '[]' && res.data[1].content !== null)
|
||||
{
|
||||
tableData.value = JSON.parse(res.data[1].content);
|
||||
// 找出最ID
|
||||
const id = Math.max.apply(null, tableData.value.map(item => item.id));
|
||||
formData.value.id = id+1;
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
const itemEditHanld = (item) => {
|
||||
item.itemEdit = !item.itemEdit
|
||||
// // console.log(JSON.stringify(item));
|
||||
// tabclickIndex.value = item;
|
||||
|
||||
// 删除数据
|
||||
const deleteData = (row) => {
|
||||
|
||||
// 过滤掉需要删除的项
|
||||
tableData.value = tableData.value.filter(item => item.id !== row.id);
|
||||
|
||||
let params = {
|
||||
id: 2,
|
||||
content: JSON.stringify(tableData.value)
|
||||
};
|
||||
|
||||
// 更新系统配置
|
||||
updateSystem(params).then((res) => {
|
||||
|
||||
initData();
|
||||
|
||||
// 显示删除成功的消息
|
||||
ElMessage({
|
||||
message: '删除成功',
|
||||
type: 'success'
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
const handleSizeChange = (val) => {
|
||||
console.log(val)
|
||||
|
||||
// 提交表单
|
||||
const confirmClick = () => {
|
||||
|
||||
// 检查表单数据完整性
|
||||
if (!formData.value.title) {
|
||||
ElMessage.error('请添加活动名称');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!formData.value.thumbnail) {
|
||||
ElMessage.error('请上传轮播图片');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!formData.value.detailImg) {
|
||||
ElMessage.error('请上传详情图片');
|
||||
return;
|
||||
}
|
||||
|
||||
formData.value.createdAt = formatDate(); // 创建时间
|
||||
|
||||
// 合并旧数据，写入新数据
|
||||
let newData = tableData.value.concat([formData.value]);
|
||||
|
||||
let params = {
|
||||
id: 2,
|
||||
content: JSON.stringify(newData)
|
||||
};
|
||||
|
||||
// 更新系统配置
|
||||
updateSystem(params).then((res) => {
|
||||
|
||||
drawer.value = false;
|
||||
|
||||
formData.value = {
|
||||
id: 1,
|
||||
title: '',
|
||||
thumbnail:'',
|
||||
detailImg: '',
|
||||
createdAt: ''
|
||||
}
|
||||
|
||||
fileBannerList.value = [];
|
||||
fileDetailList.value = [];
|
||||
|
||||
initData();
|
||||
|
||||
ElMessage({
|
||||
message: '添加成功',
|
||||
type: 'success',
|
||||
})
|
||||
});
|
||||
|
||||
}
|
||||
const handleSelectionChange = (val) => {
|
||||
|
||||
// 创建格式化日期的函数
|
||||
const formatDate = () => {
|
||||
|
||||
const date = new Date();
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
const hours = String(date.getHours()).padStart(2, '0');
|
||||
const minutes = String(date.getMinutes()).padStart(2, '0');
|
||||
const seconds = String(date.getSeconds()).padStart(2, '0');
|
||||
|
||||
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
||||
}
|
||||
|
||||
// 取消事件
|
||||
const cancelClick = () => {
|
||||
|
||||
drawer.value = false;
|
||||
|
||||
formData.value = {
|
||||
id: formData.value.id,
|
||||
title: '',
|
||||
thumbnail:'',
|
||||
detailImg: ''
|
||||
}
|
||||
|
||||
fileBannerList.value = [];
|
||||
fileDetailList.value = [];
|
||||
|
||||
}
|
||||
|
||||
// 图片上传前检测
|
||||
const beforeUpload = (file) => {
|
||||
const maxSize = 10 * 1024 * 1024; // 最大 2MB
|
||||
if (file.size > maxSize) {
|
||||
alert('文件大小不能超过 10MB');
|
||||
return false;
|
||||
}
|
||||
|
||||
const allowedTypes = ['image/jpeg', 'image/png'];
|
||||
if (!allowedTypes.includes(file.type)) {
|
||||
alert('只允许上传 JPEG 或 PNG 图片');
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
// 轮播图图片上传限制
|
||||
const handleBannerExceed= (files, uploadFiles) => {
|
||||
ElMessage.warning(
|
||||
`轮播图最多可上传1张`
|
||||
)
|
||||
}
|
||||
|
||||
// 详情图片上传限制
|
||||
const handleDetailExceed= (files, uploadFiles) => {
|
||||
ElMessage.warning(
|
||||
`详情图最多可上传1张`
|
||||
)
|
||||
}
|
||||
|
||||
// 轮播图移除
|
||||
const handleBannerRemove = (file, fileList) => {
|
||||
formData.value.thumbnail = '';
|
||||
}
|
||||
|
||||
// 详情图移除
|
||||
const handleDetailRemove = (file, fileList) => {
|
||||
formData.value.detailImg = '';
|
||||
}
|
||||
|
||||
// 轮播图上传
|
||||
const addUploadBannerFile = (params) => {
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('files', params.file);
|
||||
|
||||
addFile(formData)
|
||||
.then((response) => {
|
||||
handleBannerSuccess(response, params.file, params.fileList);
|
||||
})
|
||||
.catch((error) => {
|
||||
if(!error)
|
||||
{
|
||||
handleError(error, params.file, params.fileList);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 详情图上传
|
||||
const addUploadDetailFile = (params) => {
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('files', params.file);
|
||||
|
||||
addFile(formData)
|
||||
.then((response) => {
|
||||
handleDetailSuccess(response, params.file, params.fileList);
|
||||
})
|
||||
.catch((error) => {
|
||||
if(!error)
|
||||
{
|
||||
handleError(error, params.file, params.fileList);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 处理轮播上传成功的回调
|
||||
const handleBannerSuccess = (response) => {
|
||||
formData.value.thumbnail = response.data[0];
|
||||
}
|
||||
|
||||
// 处理详情上传成功的回调
|
||||
const handleDetailSuccess = (response) => {
|
||||
formData.value.detailImg = response.data[0];
|
||||
}
|
||||
|
||||
// 处理上传失败的回调
|
||||
const handleError = (error, file, fileList) => {
|
||||
console.error('上传失败:', error, file, fileList);
|
||||
}
|
||||
|
||||
const handleCurrentChange = (val) => {
|
||||
queryData.value.size = 10
|
||||
queryData.value.page = val
|
||||
initData(queryData.value)
|
||||
}
|
||||
const handleClose = () => {
|
||||
}
|
||||
const dialogVisibleHanle = () => {
|
||||
console.log('滑动加载')
|
||||
}
|
||||
const handleExpand = () => {
|
||||
isExpand.value = false
|
||||
tableData.value.forEach((item) => {
|
||||
table.value.toggleRowExpansion(item, isExpand.value)
|
||||
})
|
||||
}
|
||||
|
||||
const handleOpen = () => {
|
||||
isExpand.value = true
|
||||
tableData.value.forEach((item) => {
|
||||
table.value.toggleRowExpansion(item, isExpand.value)
|
||||
})
|
||||
}
|
||||
|
||||
// 搜索事件
|
||||
const searchEvnt = ()=> {
|
||||
@@ -238,54 +431,5 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mt-4 {
|
||||
float: right;
|
||||
text-align: right;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.demo-form-inline {
|
||||
}
|
||||
|
||||
.dragClass {
|
||||
background: rgba($color: #41c21a, $alpha: 0.5) !important;
|
||||
}
|
||||
|
||||
// 停靠
|
||||
.ghostClass {
|
||||
background: rgba($color: #6cacf5, $alpha: 0.5) !important;
|
||||
}
|
||||
|
||||
// 选择
|
||||
.chosenClass:hover > td {
|
||||
background: rgba($color: #f56c6c, $alpha: 0.5) !important;
|
||||
}
|
||||
|
||||
.icon-view {
|
||||
font-size: 20px;
|
||||
color: #673ab7;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.icon-edit {
|
||||
font-size: 20px;
|
||||
color: #2f60c2;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.icon-dele {
|
||||
font-size: 20px;
|
||||
color: #ff5722;
|
||||
}
|
||||
|
||||
.btn-color {
|
||||
background: #fff;
|
||||
color: #4c60cc;
|
||||
}
|
||||
|
||||
.expand-title {
|
||||
padding: 10px;
|
||||
color: #919399;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -8,13 +8,12 @@
|
||||
</el-icon>
|
||||
</el-button>
|
||||
|
||||
<el-drawer v-model="drawer" :direction="direction">
|
||||
<el-drawer v-model="drawer">
|
||||
<template #header>
|
||||
<h4>上传图片</h4>
|
||||
</template>
|
||||
<template #default>
|
||||
|
||||
|
||||
<el-form
|
||||
:model="formData"
|
||||
label-width="auto" style="max-width: 600px">
|
||||
@@ -23,18 +22,17 @@
|
||||
<el-input
|
||||
v-model="formData.sort"
|
||||
type="number"
|
||||
style="max-width: 600px;margin-bottom: 20px"
|
||||
placeholder="请输入图片排序"
|
||||
>
|
||||
</el-input>
|
||||
disabled
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="首页图">
|
||||
<el-upload
|
||||
v-model:file-list="fileDetail"
|
||||
v-model:file-list="fileList"
|
||||
list-type="picture-card"
|
||||
:before-upload="beforeUpload"
|
||||
:http-request="addUploadDetailFile"
|
||||
:limit="5"
|
||||
:limit="1"
|
||||
:on-exceed="handleDetailExceed"
|
||||
:on-remove="handleDetailRemove"
|
||||
>
|
||||
@@ -43,7 +41,7 @@
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div style="display: flex;justify-content: flex-end;margin-top: 50px">
|
||||
<el-button @click="drawer = false">取消</el-button>
|
||||
<el-button @click="cancelClick">取消</el-button>
|
||||
<el-button type="primary" @click="confirmClick">确认</el-button>
|
||||
</div>
|
||||
</template>
|
||||
@@ -79,7 +77,11 @@
|
||||
|
||||
<el-table-column label="操作" align="center">
|
||||
<template v-slot:default="scope">
|
||||
<el-button type="danger">删除</el-button>
|
||||
<el-popconfirm title="确认删除这张图片吗?" @confirm="deleteData(scope.row)">
|
||||
<template #reference>
|
||||
<el-button type="danger">删除</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
@@ -105,17 +107,10 @@ import {addFile} from "../../api/modules/upload";
|
||||
import {ElMessage} from "element-plus";
|
||||
|
||||
const tableData = ref([])
|
||||
const dataList = ref([])
|
||||
const table = ref()
|
||||
const tabclickIndex = ref()
|
||||
const isExpand = ref(false)
|
||||
const columnData = ref(JSON.parse(JSON.stringify(options)))
|
||||
const disabled = ref(false)
|
||||
const dialogVisible = ref(false)
|
||||
const total = ref(0)
|
||||
const formInline = ref({})
|
||||
const registerDate = ref('');
|
||||
const searchName = ref('');
|
||||
|
||||
const drawer = ref(false)
|
||||
const queryData = ref({
|
||||
keyWord: '',
|
||||
@@ -123,8 +118,10 @@ const queryData = ref({
|
||||
size: 10,
|
||||
})
|
||||
|
||||
const fileList = ref([]);
|
||||
|
||||
const formData = ref({
|
||||
sort: '',
|
||||
sort: 1,
|
||||
img: ''
|
||||
});
|
||||
|
||||
@@ -132,41 +129,97 @@ const formData = ref({
|
||||
const initData = () => {
|
||||
|
||||
getConfigList(queryData.value).then((res) => {
|
||||
tableData.value = JSON.parse(res.data[0].content);
|
||||
|
||||
console.log('cccc',tableData.value);
|
||||
if(res.data[0].content !== '[]' && res.data[0].content !== null)
|
||||
{
|
||||
tableData.value = JSON.parse(res.data[0].content);
|
||||
// 找出最大序号
|
||||
const sort = Math.max.apply(null, tableData.value.map(item => item.sort));
|
||||
formData.value.sort = sort+1;
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
// 提交表单
|
||||
const confirmClick = () => {
|
||||
|
||||
if (!formData.value.sort || !formData.value.img ) {
|
||||
ElMessage.error('请填写完整信息');
|
||||
// 检查表单数据完整性
|
||||
if (!formData.value.img) {
|
||||
ElMessage.error('请上传图片');
|
||||
return;
|
||||
}
|
||||
|
||||
// 合并旧数据，写入新数据
|
||||
let newData = tableData.value.concat([formData.value]);
|
||||
|
||||
let params = {
|
||||
id: 1,
|
||||
content: JSON.stringify(formData.value)
|
||||
content: JSON.stringify(newData)
|
||||
};
|
||||
|
||||
// 更新系统配置
|
||||
updateSystem(params).then((res) => {
|
||||
|
||||
drawer.value = false;
|
||||
|
||||
fileList.value = [];
|
||||
|
||||
formData.value = {
|
||||
sort: 1,
|
||||
img: ''
|
||||
}
|
||||
|
||||
initData();
|
||||
|
||||
ElMessage({
|
||||
message: '添加成功',
|
||||
type: 'success',
|
||||
})
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
// 取消
|
||||
const cancelClick = () => {
|
||||
|
||||
drawer.value = false;
|
||||
|
||||
formData.value = {
|
||||
sort: '',
|
||||
sort: formData.value.sort,
|
||||
img: ''
|
||||
}
|
||||
|
||||
fileList.value = [];
|
||||
|
||||
}
|
||||
|
||||
|
||||
// 移除数据
|
||||
const deleteData = (row) => {
|
||||
|
||||
// 过滤掉需要删除的项
|
||||
tableData.value = tableData.value.filter(item => item.sort !== row.sort);
|
||||
|
||||
let params = {
|
||||
id: 1,
|
||||
content: JSON.stringify(tableData.value)
|
||||
};
|
||||
|
||||
// 更新系统配置
|
||||
updateSystem(params).then((res) => {
|
||||
|
||||
// 显示删除成功的消息
|
||||
ElMessage({
|
||||
message: '删除成功',
|
||||
type: 'success'
|
||||
});
|
||||
|
||||
initData();
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
// 上传前的钩子
|
||||
const beforeUpload = (file) => {
|
||||
const maxSize = 10 * 1024 * 1024; // 最大 2MB
|
||||
@@ -181,7 +234,6 @@ const beforeUpload = (file) => {
|
||||
return false;
|
||||
}
|
||||
|
||||
console.log('文件准备上传:', file);
|
||||
return true;
|
||||
}
|
||||
|
||||
|
||||
@@ -47,7 +47,7 @@
|
||||
<el-table-column
|
||||
label="序号"
|
||||
prop="id"
|
||||
width="120"
|
||||
width="200"
|
||||
align="center"
|
||||
show-overflow-tooltip
|
||||
sortable
|
||||
@@ -120,7 +120,7 @@ const queryData = ref({
|
||||
|
||||
const initData = () => {
|
||||
|
||||
queryData.value.roleld = 2;
|
||||
queryData.value.roleld = 1;
|
||||
|
||||
// 获取用户列表
|
||||
getUserList(queryData.value).then((res) => {
|
||||
|
||||
@@ -76,8 +76,8 @@
|
||||
|
||||
<el-table-column
|
||||
label="序号"
|
||||
prop="userId"
|
||||
width="120"
|
||||
prop="id"
|
||||
width="200"
|
||||
align="center"
|
||||
show-overflow-tooltip
|
||||
sortable
|
||||
@@ -158,7 +158,7 @@ const queryData = ref({
|
||||
|
||||
const initData = () => {
|
||||
|
||||
queryData.value.roleld = 2;
|
||||
queryData.value.roleld = 3;
|
||||
|
||||
// 获取维修工程师列表
|
||||
getUserList(queryData.value).then((res) => {
|
||||
|
||||
@@ -76,8 +76,8 @@
|
||||
|
||||
<el-table-column
|
||||
label="序号"
|
||||
prop="userId"
|
||||
width="120"
|
||||
prop="id"
|
||||
width="200"
|
||||
align="center"
|
||||
show-overflow-tooltip
|
||||
sortable
|
||||
|
||||
@@ -1,24 +0,0 @@
|
||||
<template>
|
||||
<el-card class="col-center">
|
||||
<div>视频播放器🍲🍲🍲🍲🍲🍲🍲</div>
|
||||
<div class="mt10 myVideo">
|
||||
<VideoJs :videoSrc="data.videoSrc" autoPlay />
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive } from 'vue'
|
||||
// //找到你的组件地址引入进来
|
||||
import VideoJs from '../../components/VideoPlay.vue'
|
||||
const data = reactive({
|
||||
videoSrc:
|
||||
'https://prod-streaming-video-msn-com.akamaized.net/178161a4-26a5-4f84-96d3-6acea1909a06/2213bcd0-7d15-4da0-a619-e32d522572c0.mp4',
|
||||
})
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.myVideo {
|
||||
width: 50vw;
|
||||
height: auto;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user