dbsd_kczx/src/views/kc/ktgl/KcKetangbiaoList.vue

325 lines
10 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div>
<!--查询区域-->
<div class="jeecg-basic-table-form-container">
<a-form @keyup.enter.native="searchQuery" :model="queryParam" :label-col="labelCol" :wrapper-col="wrapperCol">
<a-row :gutter="24">
<a-col :span="24">
<strong style="font-size: 1.5rem;color:#676a6c;">
课堂管理{{props.currentRowKey?.kcmc}}-{{props.currentRowKey?.skjs}}-星期{{props.currentRowKey?.week}}-{{props.currentRowKey?.hh_dictText}}
</strong>
</a-col>
<!-- <a-col :lg="8">kcmc skjs hh_dictText week
<a-form-item label="节次">
<j-dict-select-tag placeholder="请选择节次" v-model:value="queryParam.hh" dictCode="skjc"/>
</a-form-item>
</a-col>
<a-col :lg="8">
<a-form-item label="周几">
<j-dict-select-tag placeholder="请选择周几" v-model:value="queryParam.week" dictCode="week"/>
</a-form-item>
</a-col> -->
<a-col :xl="6" :lg="7" :md="8" :sm="24">
<span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
<a-col :lg="6">
<!-- <a-button type="primary" preIcon="ant-design:search-outlined" @click="searchQuery">查询</a-button>
<a-button type="primary" preIcon="ant-design:reload-outlined" @click="searchReset" style="margin-left: 8px">重置</a-button> -->
<!--<a @click="toggleSearchStatus = !toggleSearchStatus" style="margin-left: 8px">
{{ toggleSearchStatus ? '收起' : '展开' }}
<Icon :icon="toggleSearchStatus ? 'ant-design:up-outlined' : 'ant-design:down-outlined'" />
</a>-->
</a-col>
</span>
</a-col>
</a-row>
</a-form>
</div>
<!--引用表格-->
<BasicTable @register="registerTable" :rowSelection="rowSelection">
<!--插槽:table标题-->
<template #tableTitle>
<a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增</a-button>
<a-button type="danger" @click="batchHandleDelete" preIcon="ant-design:delete-outlined">删除</a-button>
<a-button type="primary" @click="handleEditPtxx" preIcon="ant-design:plus-outlined"> 修改平台信息</a-button>
<a-button type="primary" @click="handleEditTeacher" preIcon="ant-design:plus-outlined"> 修改教师</a-button>
<!-- <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出</a-button>
<j-upload-button type="primary" preIcon="ant-design:import-outlined" @click="onImportXls">导入</j-upload-button> -->
<!-- <a-dropdown v-if="selectedRowKeys.length > 0">
<template #overlay>
<a-menu>
<a-menu-item key="1" @click="batchHandleDelete">
<Icon icon="ant-design:delete-outlined"></Icon>
删除
</a-menu-item>
</a-menu>
</template>
<a-button>批量操作
<Icon icon="mdi:chevron-down"></Icon>
</a-button>
</a-dropdown> -->
</template>
<!-- 不显示【未选中任何数据】栏 -->
<template #tableTop><span></span></template>
<!--操作栏-->
<template #action="{ record }">
<TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)"/>
</template>
<!--字段回显插槽-->
<template #htmlSlot="{text}">
<div v-html="text"></div>
</template>
<template #toUrl="{ text }">
<a-tooltip placement="left" trigger="click">
<template #title>
<a :href="text" target="_blank" style="color:white;">{{ text }}</a>
</template>
<a-button type="primary">查看</a-button>
</a-tooltip>
</template>
<!--省市区字段回显插槽-->
<!--<template #pcaSlot="{text}">
{{ getAreaTextByCode(text) }}
</template>-->
<template #fileSlot="{text}">
<span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
<a-button v-else :ghost="true" type="primary" preIcon="ant-design:download-outlined" size="small" @click="downloadFile(text)">下载</a-button>
</template>
</BasicTable>
<!-- 表单区域 -->
<KcKetangbiaoModal ref="registerModal" @success="handleSuccess"></KcKetangbiaoModal>
</div>
</template>
<script lang="ts" name="ktgl-kcKetangbiao" setup>
import { ref, reactive, watch } from 'vue';
import { BasicTable, useTable, TableAction } from '/@/components/Table';
import { useListPage } from '/@/hooks/system/useListPage';
import { useMessage } from '/@/hooks/web/useMessage';
import { columns } from './KcKetangbiao.data';
import { list, deleteOne, batchDelete, getImportUrl, getExportUrl } from './KcKetangbiao.api';
import { downloadFile } from '/@/utils/common/renderUtils';
import KcKetangbiaoModal from './components/KcKetangbiaoModal.vue'
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
const queryParam = ref<any>({kechengbiaoid: '-1'});
const toggleSearchStatus = ref<boolean>(false);
const { createMessage } = useMessage();
const registerModal = ref();
//注册table数据
const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
tableProps: {
title: '课堂管理-子表',
api: list,
columns,
canResize:false,
useSearchForm: false,
showActionColumn: false,
clickToRowSelect: true,
rowSelection: {
type: 'radio'
},
actionColumn: {
width: 120,
fixed: 'right',
},
beforeFetch: (params) => {
params.column = '',params.order = '';//新生成的默认不带排序
return Object.assign(params, queryParam.value);
},
},
exportConfig: {
name: "课堂管理-子表",
url: getExportUrl,
},
importConfig: {
url: getImportUrl,
success: handleSuccess
},
});
const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys, selectedRows }] = tableContext;
const labelCol = reactive({
xs: { span: 24 },
sm: { span: 7 },
});
const wrapperCol = reactive({
xs: { span: 24 },
sm: { span: 16 },
});
const props = defineProps({
currentRowKey: Object,
})
watch(() => props.currentRowKey, async (newRow, oldRow) => {
// console.log('newRow =>',newRow);
queryParam.value.kechengbiaoid = (newRow?.id)??'-1';
if(queryParam.value.kechengbiaoid != '-1'){
reload();
}
selectedRows.value = [];
selectedRowKeys.value = [];
});
/**
* 新增事件
*/
function handleAdd() {
registerModal.value.pFormData = {
kechengbiaoid: queryParam.value.kechengbiaoid
};
console.log('queryParam.value.kechengbiaoid ->',queryParam.value.kechengbiaoid);
registerModal.value.disableSubmit = false;
registerModal.value.type = 'all';
registerModal.value.add();
}
/**
* 修改平台信息
*/
function handleEditPtxx(){
let record = selectedRows.value[0];
console.log(`🚀 ----------------------------------------------------------------------🚀`);
console.log(`🚀 ~ file: KcKetangbiaoList.vue:161 ~ handleEditPtxx ~ record:`, selectedRows,record);
console.log(`🚀 ----------------------------------------------------------------------🚀`);
if(!record){
createMessage.error('请您至少选择一条记录进行操作。');
return;
}
registerModal.value.disableSubmit = false;
registerModal.value.type = 'pt';
registerModal.value.edit(record);
}
/**
* 修改教师
*/
function handleEditTeacher(){
let record = selectedRows.value[0];
if(!record){
createMessage.error('请您至少选择一条记录进行操作。');
return;
}
registerModal.value.disableSubmit = false;
registerModal.value.type = 'js';
registerModal.value.edit(record);
}
/**
* 编辑事件
*/
function handleEdit(record: Recordable) {
registerModal.value.disableSubmit = false;
registerModal.value.type = 'all';
registerModal.value.edit(record);
}
/**
* 详情
*/
function handleDetail(record: Recordable) {
registerModal.value.disableSubmit = true;
registerModal.value.edit(record);
}
/**
* 删除事件
*/
async function handleDelete(record) {
await deleteOne({ id: record.id }, handleSuccess);
}
/**
* 批量删除事件
*/
async function batchHandleDelete() {
let record = selectedRows.value[0];
if(!record){
createMessage.error('请您至少选择一条记录进行操作。');
return;
}
await batchDelete({ ids: selectedRowKeys.value }, handleSuccess);
}
/**
* 成功回调
*/
function handleSuccess() {
(selectedRowKeys.value = []) && reload();
}
/**
* 操作栏
*/
function getTableAction(record) {
return [
{
label: '编辑',
onClick: handleEdit.bind(null, record),
},
];
}
/**
* 下拉操作栏
*/
function getDropDownAction(record) {
return [
{
label: '详情',
onClick: handleDetail.bind(null, record),
}, {
label: '删除',
popConfirm: {
title: '是否确认删除',
confirm: handleDelete.bind(null, record),
}
}
]
}
/**
* 查询
*/
function searchQuery() {
reload();
}
/**
* 重置
*/
function searchReset() {
queryParam.value = {};
selectedRowKeys.value = [];
//刷新数据
reload();
}
</script>
<style lang="less" scoped>
.jeecg-basic-table-form-container {
.table-page-search-submitButtons {
display: block;
margin-bottom: 24px;
white-space: nowrap;
}
.query-group-cust{
width: calc(50% - 15px);
min-width: 100px !important;
}
.query-group-split-cust{
width: 30px;
display: inline-block;
text-align: center
}
}
</style>