289 lines
7.3 KiB
Vue
289 lines
7.3 KiB
Vue
<template>
|
|
<!-- 面包屑 -->
|
|
<el-breadcrumb>
|
|
<el-breadcrumb-item>师资力量</el-breadcrumb-item>
|
|
<el-breadcrumb-item to="/subject/list">授课科目列表</el-breadcrumb-item>
|
|
</el-breadcrumb>
|
|
<!-- 搜索 -->
|
|
<el-form inline :model="params">
|
|
<el-form-item label="科目名字">
|
|
<el-input
|
|
v-model="params.subject_name"
|
|
placeholder="请输入科目名字"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="tableRef.reload()" icon="ElIconSearch">
|
|
搜索
|
|
</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
<el-space style="margin-bottom: 10px">
|
|
<!-- 添加授课科目 -->
|
|
<el-col :span="1">
|
|
<el-button type="primary" @click="addSubjectDialogVisible = true">
|
|
添加
|
|
</el-button>
|
|
</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-button type="primary">导入</el-button>
|
|
</el-upload>
|
|
|
|
<!-- 下载导入模板 -->
|
|
<el-button icon="ElIconDownload" @click="downloadTemplate()"
|
|
>下载导入模板</el-button
|
|
>
|
|
|
|
<!-- 导出 -->
|
|
<el-button icon="ElIconDocument" @click="exportExcel(params)"
|
|
>导出</el-button
|
|
>
|
|
|
|
<!-- 下拉操作 -->
|
|
<el-dropdown v-if="selectionData.length">
|
|
<el-button type="primary">
|
|
批量操作<el-icon class="el-icon--right"><arrow-down /></el-icon>
|
|
</el-button>
|
|
<template #dropdown>
|
|
<el-dropdown-menu>
|
|
<el-dropdown-item @click="handleDelete(selectionData)">
|
|
批量删除
|
|
</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
</el-space>
|
|
<!-- 数据表格 -->
|
|
<DataTable
|
|
ref="tableRef"
|
|
style="width: 100%"
|
|
:onSelectionChange="data => (selectionData = data)"
|
|
:column="column"
|
|
:params="params"
|
|
v-loading="loading"
|
|
:request="params => tableDataInit(params)"
|
|
>
|
|
<!-- 排序 -->
|
|
<template #subject_sort="scope">
|
|
<el-input-number :disabled="loading" v-model='scope.row.subject_sort' controls-position="right"
|
|
@change="handleEditOrder(scope.row)"></el-input-number>
|
|
</template>
|
|
<template #chaoz="scope">
|
|
<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>
|
|
</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>
|
|
|
|
<!-- 添加授课科目 -->
|
|
<AddSubjectDialog
|
|
v-model="addSubjectDialogVisible"
|
|
:done="() => tableRef.reload()"
|
|
></AddSubjectDialog>
|
|
<!-- 编辑授课科目 -->
|
|
<EditSubjectDialog
|
|
v-model="EditSubjectDialogVisible"
|
|
:data="EditSubjectDialogRow"
|
|
:done="() => tableRef.reload()"
|
|
></EditSubjectDialog>
|
|
<!-- 授课科目详情 -->
|
|
<DetailSubjectDialog
|
|
v-model="DetailSubjectDialogVisible"
|
|
:data="DetailSubjectDialogRow"
|
|
></DetailSubjectDialog>
|
|
</template>
|
|
<script setup>
|
|
import { ArrowDown } from '@element-plus/icons-vue';
|
|
import { ref, reactive, watch } from 'vue';
|
|
import { useLoginStore } from '~/store';
|
|
import {
|
|
getSubjectList,
|
|
deleteSubject,
|
|
downloadTemplate,
|
|
importExcel,
|
|
exportExcel,
|
|
editSubject
|
|
} from '~/service/subject';
|
|
import AddSubjectDialog from './components/AddSubjectDialog.vue';
|
|
import EditSubjectDialog from './components/EditSubjectDialog.vue';
|
|
import DetailSubjectDialog from './components/DetailSubjectDialog.vue';
|
|
import createDraw from 'hyw-drag'
|
|
|
|
const tableRef = ref();
|
|
const selectionData = ref([]);
|
|
const store = useLoginStore();
|
|
|
|
const addSubjectDialogVisible = ref(false);
|
|
const EditSubjectDialogVisible = ref(false);
|
|
const EditSubjectDialogRow = ref({});
|
|
const DetailSubjectDialogVisible = ref(false);
|
|
const DetailSubjectDialogRow = ref({});
|
|
|
|
const headers = {
|
|
Accept: 'application/json',
|
|
...store.headers
|
|
};
|
|
|
|
// 查询参数
|
|
const params = reactive({
|
|
subject_name: '',
|
|
subject_sort: ''
|
|
});
|
|
const column = [
|
|
{
|
|
fixed: true,
|
|
type: 'selection'
|
|
},
|
|
{
|
|
prop: 'subject_sort',
|
|
label: '排序',
|
|
width: '180'
|
|
},
|
|
{
|
|
prop: 'subject_name',
|
|
label: '科目名字',
|
|
width: '150'
|
|
},
|
|
|
|
{
|
|
label: '操作',
|
|
prop: 'chaoz',
|
|
width: '250',
|
|
fixed: 'right'
|
|
}
|
|
];
|
|
|
|
const handleCommand = ({ type, row }) => {
|
|
switch (type) {
|
|
case 'detail':
|
|
handleDetail(row);
|
|
break;
|
|
case 'delete':
|
|
handleDelete([row]);
|
|
break;
|
|
}
|
|
};
|
|
|
|
// 删除数据
|
|
const handleDelete = data => {
|
|
ElMessageBox.confirm(`您确定要删除该授课科目吗？`).then(async () => {
|
|
const res = await deleteSubject({
|
|
subject_guid: data.map(v => v.subject_guid).join()
|
|
});
|
|
if (res) {
|
|
tableRef.value.reload();
|
|
}
|
|
});
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
//表格数据获取及拖拽处理
|
|
let drag = ref(false)
|
|
let tableData = ref();
|
|
async function tableDataInit(params) {
|
|
await getSubjectList(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 = 'subject_sort';
|
|
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 editSubject(data);
|
|
if (code == 0) {
|
|
loading.value = false
|
|
tableRef.value.reload()
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 修改
|
|
function handleUpdate(row) {
|
|
EditSubjectDialogVisible.value = true;
|
|
EditSubjectDialogRow.value = row;
|
|
}
|
|
|
|
// 详情
|
|
function handleDetail(row) {
|
|
DetailSubjectDialogVisible.value = true;
|
|
DetailSubjectDialogRow.value = row;
|
|
}
|
|
|
|
// 导入方法
|
|
let loadingImoprt = null;
|
|
const uploadLoading = () => {
|
|
loadingImoprt = ElLoading.service({
|
|
lock: true,
|
|
text: '正在导入中...',
|
|
background: 'rgba(255, 255, 255, 0.7)'
|
|
});
|
|
};
|
|
const closeUploadLoading = () => loadingImoprt.close();
|
|
const handleExcelSuccess = value => {
|
|
if (value.code == 0) {
|
|
ElMessageBox.alert(value.msg, '导入信息', {
|
|
dangerouslyUseHTMLString: true,
|
|
confirmButtonText: '确定'
|
|
});
|
|
} else {
|
|
ElMessage.error(value.msg);
|
|
}
|
|
closeUploadLoading();
|
|
tableRef.value.reload();
|
|
};
|
|
</script>
|