fix:拖拽和上下排序
This commit is contained in:
ll
parent
b66c17b045
commit
4619cc317f
@ -2,12 +2,17 @@
|
||||
<!-- 面包屑 -->
|
||||
<el-breadcrumb>
|
||||
<el-breadcrumb-item>艺考资讯</el-breadcrumb-item>
|
||||
<el-breadcrumb-item to="/info_article/list">资讯文章</el-breadcrumb-item>
|
||||
<el-breadcrumb-item to="/info_article/list"
|
||||
>资讯文章</el-breadcrumb-item
|
||||
>
|
||||
</el-breadcrumb>
|
||||
<!-- 搜索 -->
|
||||
<el-form inline :model="params">
|
||||
<el-form-item label="文章标题">
|
||||
<el-input v-model="params.info_article_title" placeholder="请输入文章标题"></el-input>
|
||||
<el-input
|
||||
v-model="params.info_article_title"
|
||||
placeholder="请输入文章标题"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="tableRef.reload()" icon="ElIconSearch">
|
||||
@ -24,16 +29,28 @@
|
||||
</el-col>
|
||||
|
||||
<!-- 导入 -->
|
||||
<el-upload class="upload-demo" :action="importExcel" :headers="headers" :on-success="handleExcelSuccess"
|
||||
:on-progress="uploadLoading" :on-error="closeUploadLoading" style="margin-left: 10px" :show-file-list="false">
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
:action="importExcel"
|
||||
:headers="headers"
|
||||
:on-success="handleExcelSuccess"
|
||||
:on-progress="uploadLoading"
|
||||
:on-error="closeUploadLoading"
|
||||
style="margin-left: 10px"
|
||||
:show-file-list="false"
|
||||
>
|
||||
<el-button type="primary">导入</el-button>
|
||||
</el-upload>
|
||||
|
||||
<!-- 下载导入模板 -->
|
||||
<el-button icon="ElIconDownload" @click="downloadTemplate()">下载导入模板</el-button>
|
||||
<el-button icon="ElIconDownload" @click="downloadTemplate()"
|
||||
>下载导入模板</el-button
|
||||
>
|
||||
|
||||
<!-- 导出 -->
|
||||
<el-button icon="ElIconDocument" @click="exportExcel(params)">导出</el-button>
|
||||
<el-button icon="ElIconDocument" @click="exportExcel(params)"
|
||||
>导出</el-button
|
||||
>
|
||||
|
||||
<!-- 下拉操作 -->
|
||||
<el-dropdown v-if="selectionData.length">
|
||||
@ -50,66 +67,102 @@
|
||||
</el-dropdown>
|
||||
</el-space>
|
||||
<!-- 数据表格 -->
|
||||
|
||||
<DataTable ref="tableRef" style="width: 100%" :onSelectionChange="data => (selectionData = data)" :column="column"
|
||||
:params="params" :request="params => getinfoArticleList(params)">
|
||||
|
||||
<DataTable
|
||||
ref="tableRef"
|
||||
style="width: 100%"
|
||||
:onSelectionChange="data => (selectionData = data)"
|
||||
:column="column"
|
||||
:params="params"
|
||||
v-loading="loading"
|
||||
:request="params => tableDataInit(params)"
|
||||
>
|
||||
|
||||
<!-- 排序 -->
|
||||
<template #info_article_order="scope">
|
||||
<el-input-number :disabled="loading" v-model='scope.row.info_article_order' controls-position="right"
|
||||
@change="handleEditOrder(scope.row)"></el-input-number>
|
||||
</template>
|
||||
|
||||
<template #info_article_cover="scope">
|
||||
|
||||
<el-image v-if="scope.row.info_article_cover" :src="scope.row.info_article_cover.split(',')[0]" lazy
|
||||
:preview-src-list="scope.row.info_article_cover.split(',')" :preview-teleported="true" :hide-on-click-modal="true"
|
||||
fit="contain" class="el-avatar"></el-image>
|
||||
|
||||
|
||||
<el-image
|
||||
v-if="scope.row.info_article_cover"
|
||||
:src="scope.row.info_article_cover.split(',')[0]"
|
||||
lazy
|
||||
:preview-src-list="scope.row.info_article_cover.split(',')"
|
||||
:preview-teleported="true"
|
||||
:hide-on-click-modal="true"
|
||||
fit="contain"
|
||||
class="el-avatar"
|
||||
></el-image>
|
||||
|
||||
<template v-else>暂无图片</template>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<el-space>
|
||||
<el-button size="small" @click="handleUpdate(scope.row)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-dropdown @command="handleCommand">
|
||||
<el-button type="primary" size="small">
|
||||
更多<el-icon class="el-icon--right"><arrow-down /></el-icon>
|
||||
<template #chaoz="scope">
|
||||
<el-space>
|
||||
<el-button size="small" @click="handleUpdate(scope.row)">
|
||||
编辑
|
||||
</el-button>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item :command="{ type: 'detail', row: scope.row }">
|
||||
详情
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item :command="{ type: 'delete', row: scope.row }">
|
||||
删除
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</el-space>
|
||||
<el-dropdown @command="handleCommand">
|
||||
<el-button type="primary" size="small">
|
||||
更多<el-icon class="el-icon--right"><arrow-down /></el-icon>
|
||||
</el-button>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item :command="{ type: 'detail', row: scope.row }">
|
||||
详情
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item :command="{ type: 'delete', row: scope.row }">
|
||||
删除
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</el-space>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
</DataTable>
|
||||
|
||||
<!-- 添加资讯文章 -->
|
||||
<AddinfoArticleDialog v-model="addinfoArticleDialogVisible" :done="() => tableRef.reload()"></AddinfoArticleDialog>
|
||||
<AddinfoArticleDialog
|
||||
v-model="addinfoArticleDialogVisible"
|
||||
:done="() => tableRef.reload()"
|
||||
></AddinfoArticleDialog>
|
||||
<!-- 编辑资讯文章 -->
|
||||
<EditinfoArticleDialog v-model="EditinfoArticleDialogVisible" :data="EditinfoArticleDialogRow"
|
||||
:done="() => tableRef.reload()"></EditinfoArticleDialog>
|
||||
<EditinfoArticleDialog
|
||||
v-model="EditinfoArticleDialogVisible"
|
||||
:data="EditinfoArticleDialogRow"
|
||||
:done="() => tableRef.reload()"
|
||||
></EditinfoArticleDialog>
|
||||
<!-- 资讯文章详情 -->
|
||||
<DetailinfoArticleDialog v-model="DetailinfoArticleDialogVisible" :data="DetailinfoArticleDialogRow">
|
||||
</DetailinfoArticleDialog>
|
||||
<DetailinfoArticleDialog
|
||||
v-model="DetailinfoArticleDialogVisible"
|
||||
:data="DetailinfoArticleDialogRow"
|
||||
></DetailinfoArticleDialog>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ArrowDown } from '@element-plus/icons-vue';
|
||||
import { ref, reactive } from 'vue';
|
||||
import { ref, reactive ,watch} from 'vue';
|
||||
import { useLoginStore } from '~/store';
|
||||
import {
|
||||
getinfoArticleList,
|
||||
deleteinfoArticle,
|
||||
downloadTemplate,
|
||||
importExcel,
|
||||
exportExcel
|
||||
exportExcel,
|
||||
editinfoArticle
|
||||
} from '~/service/info_article';
|
||||
import AddinfoArticleDialog from './components/AddinfoArticleDialog.vue';
|
||||
import EditinfoArticleDialog from './components/EditinfoArticleDialog.vue';
|
||||
import DetailinfoArticleDialog from './components/DetailinfoArticleDialog.vue';
|
||||
import createDraw from 'hyw-drag'
|
||||
|
||||
const tableRef = ref();
|
||||
const selectionData = ref([]);
|
||||
@ -135,11 +188,11 @@ const column = [
|
||||
fixed: true,
|
||||
type: 'selection'
|
||||
},
|
||||
// {
|
||||
// prop: 'info_article_order',
|
||||
// label: '文章排序',
|
||||
// width: '150'
|
||||
// },
|
||||
{
|
||||
prop: 'info_article_order',
|
||||
label: '文章排序',
|
||||
width: '180'
|
||||
},
|
||||
{
|
||||
prop: 'info_article_title',
|
||||
label: '文章标题',
|
||||
@ -174,6 +227,44 @@ const handleCommand = ({ type, row }) => {
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
//表格数据获取及拖拽处理
|
||||
let drag = ref(false)
|
||||
let tableData = ref();
|
||||
async function tableDataInit(params) {
|
||||
await getinfoArticleList(params).then((res) => tableData.value = res)
|
||||
setTimeout(() => {
|
||||
[...document.getElementsByClassName('el-table__row')].map(item => { item.classList.add('row1') });
|
||||
drag.value === false && (drag.value = createDraw(document.getElementsByClassName('el-table__row')[0].parentElement))
|
||||
})
|
||||
return tableData.value;
|
||||
}
|
||||
watch(drag, () => {
|
||||
const orderField = 'info_article_order';
|
||||
drag.value.drop((info) => {
|
||||
let targetIdx = [...document.getElementsByClassName('row1')].indexOf(info.el)
|
||||
let sourceIdx = [...document.getElementsByClassName('row1')].indexOf(info.info.source.el)
|
||||
let orderIdx = tableData.value.data[sourceIdx][orderField]
|
||||
tableData.value.data[targetIdx][orderField] = orderIdx
|
||||
handleEditOrder(tableData.value.data[targetIdx])
|
||||
})
|
||||
})
|
||||
|
||||
//排序
|
||||
const loading = ref(false)
|
||||
async function handleEditOrder(data) {
|
||||
loading.value = true
|
||||
const { code } = await editinfoArticle(data);
|
||||
if (code == 0) {
|
||||
loading.value = false
|
||||
tableRef.value.reload()
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 删除数据
|
||||
const handleDelete = data => {
|
||||
ElMessageBox.confirm(`您确定要删除该资讯文章吗？`).then(async () => {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user