php/houde_web_back
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat:完成关于我们-教学环境-环境类型模块

Browse Source
This commit is contained in:
xjh 2023-04-22 17:24:42 +08:00
parent 94cb22ee35
commit 2db184d519
7 changed files with 704 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

150
src/pages/index/about_us/teaching_envir/teaching_envir_type/components/AddTeachingEnvirTypeDialog.vue Normal file
View File

@ -0,0 +1,150 @@
<template>
<el-dialog v-model="dialogVisible" title="添加教学环境类型" width="900px" @closed="closeDialog" @open="openDialog">
<el-form ref="formRef" :model="formData" :rules="rules">
<!-- <el-row>
<el-col :lg="24">
<el-form-item :label-width="labelWidth" label="上级类型" prop="teaching_envir_type_parent_guid">
<el-cascader class="w100" filterable :options="dataList"
:props="{ checkStrictly: true, value: 'teaching_envir_type_guid', label: 'teaching_envir_type_name', emitPath: false }"
placeholder="请选择上级类型" clearable v-model="formData.teaching_envir_type_parent_guid">
<template #default="{ node, data }">
<span>{{ data.teaching_envir_type_name }}</span>
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
</template>
</el-cascader>
</el-form-item>
</el-col>
</el-row> -->
<el-row>
<el-col :span="10">
<el-form-item :label-width="labelWidth" label="类型名称" prop="teaching_envir_type_name">
<el-input v-model='formData.teaching_envir_type_name' type="text" placeholder='请输入环境类型名称'></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="10">
<el-form-item :label-width="labelWidth" label="类型排序" prop="teaching_envir_type_order">
<el-input-number v-model='formData.teaching_envir_type_order' controls-position='right'></el-input-number>
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button type="primary" @click="handleAddClick(formRef)" :loading="isBtnLod">添加</el-button>
<el-button @click="handleResetClick(formRef)">重置</el-button>
</span>
</template>
</el-dialog>
</template>
<script setup>
import { reactive, ref, watch } from "vue";
import { addTeachingEnvirType, getTeachingEnvirTypeList } from "~/service/teaching_envir_type";
import { useLoginStore } from "~/store";
// --业务参数
// --业务方法
const dataList = ref();
async function getList() {
getTeachingEnvirTypeList().then((res) => {
if (res.code == 0) {
dataList.value = res.data
}
})
}
// --基础参数
const store = useLoginStore();
const headers = {
Accept: "application/json",
...store.headers,
};
const formRef = ref();
const labelWidth = 90;
const props = defineProps({
modelValue: Boolean,
done: Function,
});
const emits = defineEmits(["update:modelValue"]);
const dialogVisible = ref(props.modelValue);
const formData = reactive({
teaching_envir_type_order: 0,
teaching_envir_type_parent_guid: '0',
});
const uoloadData = ref({
dirName: "TeachingEnvirType"
})
watch(props, (v) => {
dialogVisible.value = v.modelValue;
});
const rules = reactive({
teaching_envir_type_name: [
{
required: true,
message: '环境类型名称不能为空'
}
],
teaching_envir_type_order: [
{
required: true,
message: '环境类型排序不能为空'
}
],
});
// --基础方法
// 打开弹窗时执行
const openDialog = () => {
// getList()
};
const closeDialog = () => {
handleResetClick(formRef.value);
dialogVisible.value = false;
emits("update:modelValue", false);
};
const isBtnLod = ref(false);
const handleAddClick = async (formEl) => {
console.log(formData);
if (!formEl) return;
formEl.validate(async (valid) => {
if (!valid) {
return;
}
isBtnLod.value = true;
const { code, msg } = await addTeachingEnvirType(formData);
if (code == 0) {
closeDialog();
props.done();
ElMessage.success(msg);
} else {
ElMessage.error(msg);
}
isBtnLod.value = false;
});
};
const handleResetClick = async (formEl) => {
if (!formEl) return;
formEl.resetFields();
};
</script>
<style lang="less" scoped></style>

90
src/pages/index/about_us/teaching_envir/teaching_envir_type/components/DetailTeachingEnvirTypeDialog.vue Normal file
View File

@ -0,0 +1,90 @@
<template>
<el-dialog v-model="props.modelValue" title="教学环境类型详情" width="900px" @closed="closeDialog" @open="openDialog">
<el-form ref="formRef" :model="formData" :disabled="true">
<!-- <el-row>
<el-col :lg="24">
<el-form-item :label-width="labelWidth" label="上级类型" prop="teaching_envir_type_parent_guid">
<el-cascader class="w100" filterable :options="dataList"
:props="{ checkStrictly: true, value: 'teaching_envir_type_guid', label: 'teaching_envir_type_name', emitPath: false }"
placeholder="请选择上级类型" clearable v-model="formData.teaching_envir_type_parent_guid">
<template #default="{ node, data }">
<span>{{ data.teaching_envir_type_name }}</span>
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
</template>
</el-cascader>
</el-form-item>
</el-col>
</el-row> -->
<el-row>
<el-col :span="10">
<el-form-item :label-width="labelWidth" label="类型名称" prop="teaching_envir_type_name">
<el-input v-model='formData.teaching_envir_type_name' type="text" placeholder='请输入环境类型名称'></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="10">
<el-form-item :label-width="labelWidth" label="类型排序" prop="teaching_envir_type_order">
<el-input-number v-model='formData.teaching_envir_type_order' controls-position='right'></el-input-number>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-dialog>
</template>
<script setup>
import { reactive, ref, watch } from "vue";
import { isEmptyObject } from "~/utils/index";
import { getTeachingEnvirTypeList } from "~/service/teaching_envir_type";
// --业务参数
// --业务方法
const dataList = ref();
async function getList() {
getTeachingEnvirTypeList().then((res) => {
if (res.code == 0) {
dataList.value = res.data
}
})
}
// --基础参数
const formRef = ref();
const labelWidth = 100;
const props = defineProps({
modelValue: Boolean,
data: Object,
done: Function,
});
const emits = defineEmits(["update:modelValue"]);
const formData = ref({
...props.data,
});
// --基础方法
watch(props, (v) => {
formData.value = v.data;
});
// 打开弹窗时执行
const openDialog = () => {
// getList()
};
const closeDialog = () => {
emits("update:modelValue", false);
};
</script>
<style lang="less" scoped></style>

145
src/pages/index/about_us/teaching_envir/teaching_envir_type/components/EditTeachingEnvirTypeDialog.vue Normal file
View File

@ -0,0 +1,145 @@
<template>
<el-dialog v-model="props.modelValue" title="编辑教学环境类型" width="900px" @closed="closeDialog" @open="openDialog">
<el-form ref="formRef" :model="formData" :rules="rules">
<!-- <el-row>
<el-col :lg="24">
<el-form-item :label-width="labelWidth" label="上级类型" prop="teaching_envir_type_parent_guid">
<el-cascader class="w100" filterable :options="dataList"
:props="{ checkStrictly: true, value: 'teaching_envir_type_guid', label: 'teaching_envir_type_name', emitPath: false }"
placeholder="请选择上级类型" clearable v-model="formData.teaching_envir_type_parent_guid">
<template #default="{ node, data }">
<span>{{ data.teaching_envir_type_name }}</span>
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
</template>
</el-cascader>
</el-form-item>
</el-col>
</el-row> -->
<el-row>
<el-col :span="10">
<el-form-item :label-width="labelWidth" label="类型名称" prop="teaching_envir_type_name">
<el-input v-model='formData.teaching_envir_type_name' type="text" placeholder='请输入环境类型名称'></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="10">
<el-form-item :label-width="labelWidth" label="类型排序" prop="teaching_envir_type_order">
<el-input-number v-model='formData.teaching_envir_type_order' controls-position='right'></el-input-number>
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button type="primary" @click="handleEditClick(formRef)" :loading="isBtnLod">编辑</el-button>
<el-button @click="handleResetClick(formRef)">重置</el-button>
</span>
</template>
</el-dialog>
</template>
<script setup>
import { reactive, ref, watch } from "vue";
import { editTeachingEnvirType, getTeachingEnvirTypeList } from "~/service/teaching_envir_type";
import { useLoginStore } from "~/store";
// --业务参数
// --业务方法
const dataList = ref();
async function getList() {
getTeachingEnvirTypeList().then((res) => {
if (res.code == 0) {
dataList.value = res.data
}
})
}
// --基础参数
const store = useLoginStore();
const headers = {
Accept: "application/json",
...store.headers,
};
const formRef = ref();
const labelWidth = 100;
const props = defineProps({
modelValue: Boolean,
data: Object,
done: Function,
});
const emits = defineEmits(["update:modelValue"]);
const formData = ref({
...props.data,
});
const uoloadData = ref({
dirName: "TeachingEnvirType"
})
// --基础方法
watch(props, (v) => {
formData.value = v.data;
});
// 打开弹窗时执行
const openDialog = () => {
// getList()
};
const closeDialog = () => {
props.done();
emits("update:modelValue", false);
};
const rules = reactive({
teaching_envir_type_name: [
{
required: true,
message: '环境类型名称不能为空'
}
],
teaching_envir_type_order: [
{
required: true,
message: '环境类型排序不能为空'
}
],
});
const isBtnLod = ref(false);
const handleEditClick = async (formEl) => {
console.log(formData.value);
if (!formEl) return;
formEl.validate(async (valid) => {
if (!valid) {
return;
}
isBtnLod.value = true;
const { code, msg } = await editTeachingEnvirType(formData.value);
if (code == 0) {
closeDialog();
props.done();
ElMessage.success(msg);
} else {
ElMessage.error(msg);
}
isBtnLod.value = false;
});
};
const handleResetClick = async (formEl) => {
if (!formEl) return;
formEl.resetFields();
};
</script>
<style lang="less" scoped></style>

237
src/pages/index/about_us/teaching_envir/teaching_envir_type/index.vue Normal file
View File

@ -0,0 +1,237 @@
<template>
<!-- 面包屑 -->
<el-breadcrumb>
<el-breadcrumb-item>教学环境类型管理</el-breadcrumb-item>
<el-breadcrumb-item to="/teaching_envir_type/list">教学环境类型列表</el-breadcrumb-item>
</el-breadcrumb>
<!-- 搜索 -->
<el-form inline :model="params">
<el-form-item label="环境类型名称">
<el-input v-model='params.teaching_envir_type_name' placeholder='请输入环境类型名称'></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="getList(params)" icon="ElIconSearch">
搜索
</el-button>
</el-form-item>
</el-form>
<el-space style="margin-bottom: 10px;">
<!-- 添加教学环境类型 -->
<el-col :span="1">
<el-button type="primary" @click="addTeachingEnvirTypeDialogVisible = true"> 添加 </el-button>
</el-col>
<!-- 导出 -->
<el-button icon="ElIconDocument"
@click="exportExcel({ teaching_envir_type_guids: selectionData.map(v => v.teaching_envir_type_guid).join() })">导出</el-button>
<!-- 导入 -->
<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-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>
<!-- 数据表格 -->
<el-table v-loading="loading" :data="dataList" ref="tableRef" border highlight-current-row
:onSelectionChange="data => (selectionData = data)" :default-expand-all="tableExpandAll"
row-key="teaching_envir_type_guid" :tree-props="{ children: 'children' }">
<el-table-column type="selection" width="50" align="center" />
<el-table-column prop="teaching_envir_type_name" width="200" label="作品类型名称" :show-overflow-tooltip="true">
</el-table-column>
<el-table-column sortable prop="teaching_envir_type_order" width="200" label="排序" sort>
<template #default="scope">
<el-input-number v-model='scope.row.teaching_envir_type_order' controls-position="right"
@change="handleEditOrder(scope.row)"></el-input-number>
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="250" fixed='right'>
<template #default="scope">
<el-button size="small" type="primary" @click="handleUpdate(scope.row)">编辑</el-button>
<el-button size="small" type="danger" @click="handleDelete([scope.row])">删除</el-button>
<el-button size="small" type="info" @click="handleDetail(scope.row)">查看</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<pagination :total="pageCount" v-model:page="params.page" v-model:limit="params.limit" @pagination="getList()" />
<!-- 添加教学环境类型 -->
<AddTeachingEnvirTypeDialog v-model="addTeachingEnvirTypeDialogVisible" :done="() => getList()">
</AddTeachingEnvirTypeDialog>
<!-- 编辑教学环境类型 -->
<EditTeachingEnvirTypeDialog v-model="EditTeachingEnvirTypeDialogVisible" :data="EditTeachingEnvirTypeDialogRow"
:done="() => getList()"></EditTeachingEnvirTypeDialog>
<!-- 教学环境类型详情 -->
<DetailTeachingEnvirTypeDialog v-model="DetailTeachingEnvirTypeDialogVisible" :data="DetailTeachingEnvirTypeDialogRow">
</DetailTeachingEnvirTypeDialog>
</template>
<script setup>
import { ArrowDown } from '@element-plus/icons-vue';
import { ref, reactive, watch } from 'vue';
import { useLoginStore } from "~/store";
import { getTeachingEnvirTypeList, editTeachingEnvirType, deleteTeachingEnvirType, exportExcel, downloadTemplate, importExcel } from '~/service/teaching_envir_type';
import AddTeachingEnvirTypeDialog from './components/AddTeachingEnvirTypeDialog.vue';
import EditTeachingEnvirTypeDialog from './components/EditTeachingEnvirTypeDialog.vue';
import DetailTeachingEnvirTypeDialog from './components/DetailTeachingEnvirTypeDialog.vue';
import createDraw from 'hyw-drag'
const tableRef = ref();
const selectionData = ref([]);
const store = useLoginStore();
const addTeachingEnvirTypeDialogVisible = ref(false);
const EditTeachingEnvirTypeDialogVisible = ref(false);
const EditTeachingEnvirTypeDialogRow = ref({});
const DetailTeachingEnvirTypeDialogVisible = ref(false);
const DetailTeachingEnvirTypeDialogRow = ref({});
const headers = {
Accept: "application/json",
...store.headers,
};
const handleCommand = ({ type, row }) => {
switch (type) {
case "detail":
handleDetail(row);
break;
case 'delete':
handleDelete([row]);
break;
}
};
// 查询参数
const pageCount = ref(0)
const params = reactive({
teaching_envir_type_name: "",
page: 1,
limit: 10,
});
//表格数据获取及拖拽处理
const loading = ref(false)
const dataList = ref([])
let drag = ref(false)
function getList() {
loading.value = true
getTeachingEnvirTypeList(params).then((res) => {
if (res.code == 0) {
dataList.value = res.data
pageCount.value = res.count
setTimeout(() => {
[...document.getElementsByClassName('el-table__row')].map(item => { item.classList.add('row1') });
[...document.getElementsByClassName('el-table__row--level-1')].map(item => { item.classList.remove('row1') })
drag.value === false && (drag.value = createDraw(document.getElementsByClassName('el-table__row')[0].parentElement))
})
loading.value = false
}
})
}
watch(drag, () => {
const orderField = 'teaching_envir_type_order';
drag.value.start(() => {
dataList.value.map(item => {
tableRef.value.toggleRowExpansion(item, false)
})
tableExpandAll.value = false
})
drag.value.drop((info) => {
let targetIdx = [...document.getElementsByClassName('row1')].indexOf(info.el)
let sourceIdx = [...document.getElementsByClassName('row1')].indexOf(info.info.source.el)
let orderIdx = dataList.value[sourceIdx][orderField]
dataList.value[targetIdx][orderField] = orderIdx
handleEditOrder(dataList.value[targetIdx])
})
})
getList()
//排序
async function handleEditOrder(data) {
loading.value = true
const { code, msg } = await editTeachingEnvirType(data);
if (code == 0) {
ElMessage.success(msg);
getList();
} else {
ElMessage.error(msg);
}
}
// 删除数据
const handleDelete = data => {
ElMessageBox.confirm(`您确定要删除该教学环境类型吗？`).then(async () => {
const res = await deleteTeachingEnvirType({
teaching_envir_type_guid: data.map(v => v.teaching_envir_type_guid).join()
});
if (res) {
getList();
}
});
};
// 修改
function handleUpdate(row) {
EditTeachingEnvirTypeDialogVisible.value = true
EditTeachingEnvirTypeDialogRow.value = row
}
// 详情
function handleDetail(row) {
DetailTeachingEnvirTypeDialogVisible.value = true
DetailTeachingEnvirTypeDialogRow.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();
getList();
};
</script>

4
src/pages/index/works/works_type/components/AddWorksTypeDialog.vue
View File

@ -6,7 +6,7 @@
<el-form-item :label-width="labelWidth" label="上级类型" prop="works_type_parent_guid">
<el-cascader class="w100" filterable :options="dataList"
:props="{ checkStrictly: true, value: 'works_type_guid', label: 'works_type_name', emitPath: false }"
placeholder="请选择上级菜单" clearable v-model="formData.works_type_parent_guid">
placeholder="请选择上级类型" clearable v-model="formData.works_type_parent_guid">
<template #default="{ node, data }">
<span>{{ data.works_type_name }}</span>
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
@ -114,7 +114,7 @@ const rules = reactive({
// 打开弹窗时执行
const openDialog = () => {
getList()
// getList()
};
const closeDialog = () => {

5
src/pages/index/works/works_type/index.vue
View File

@ -45,11 +45,11 @@
</el-dropdown>
</el-space>
<!-- 数据表格 -->
<el-table v-loading="loading" :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}" :data="dataList" ref="tableRef" border highlight-current-row
<el-table v-loading="loading" :data="dataList" ref="tableRef" border highlight-current-row
:onSelectionChange="data => (selectionData = data)" :default-expand-all="tableExpandAll" row-key="works_type_guid"
:tree-props="{ children: 'children' }">
<el-table-column type="selection" width="50" align="center" />
<el-table-column prop="works_type_name" width="120" label="作品类型名称" :show-overflow-tooltip="true"> </el-table-column>
<el-table-column prop="works_type_name" width="200" label="作品类型名称" :show-overflow-tooltip="true"> </el-table-column>
<el-table-column sortable prop="works_type_order" width="200" label="排序" sort>
<template #default="scope">
<el-input-number v-model='scope.row.works_type_order' controls-position="right"
@ -66,7 +66,6 @@
</el-table-column>
</el-table>
<!-- 分页 -->
<pagination :total="pageCount" v-model:page="params.page" v-model:limit="params.limit" @pagination="getList()" />
<!-- 添加作品类型 -->

78
src/service/teaching_envir_type.js Normal file
View File

@ -0,0 +1,78 @@
import {
api,
downloadFile,
createApiUrl
} from '~/utils/axios';
/**
* 导出教学环境类型
* @param {Object} data
* @return {Promise} api
*/
export function exportExcel(data) {
downloadFile(createApiUrl('AboutUs.TeachingEnvir.TeachingEnvirType/exportExcel'), data);
}
/**
* 下载教学环境类型模板
* @param {Object} data
* @return {Promise} api
*/
export function downloadTemplate(data) {
downloadFile(createApiUrl('AboutUs.TeachingEnvir.TeachingEnvirType/downloadTemplate'), data);
}
/**
* 导入教学环境类型
* @param {Object} data
* @return {Promise} api
*/
export const importExcel = createApiUrl('AboutUs.TeachingEnvir.TeachingEnvirType/importExcel');
/**
* 获取教学环境类型列表
* @param {Object} data
* @return {Promise} api
*/
export function getTeachingEnvirTypeList(data) {
return api.post('AboutUs.TeachingEnvir.TeachingEnvirType/getTeachingEnvirTypeList', data);
}
/**
* 删除教学环境类型
* @param {Object} data
* @return {Promise} api
*/
export function deleteTeachingEnvirType(data) {
return api.post('AboutUs.TeachingEnvir.TeachingEnvirType/deleteTeachingEnvirType', data, {
isTransformResponse: true,
isShowSuccessMessage: true,
errorMessageText: '删除失败'
});
}
/**
* 添加教学环境类型
* @param {Object} data
* @return {Promise} api
*/
export function addTeachingEnvirType(data) {
return api.post('AboutUs.TeachingEnvir.TeachingEnvirType/addTeachingEnvirType', data, {
// isTransformResponse: true,
// isShowSuccessMessage: true,
errorMessageText: '添加失败'
});
}
/**
* 编辑教学环境类型
* @param {Object} data
* @return {Promise} api
*/
export function editTeachingEnvirType(data) {
return api.post('AboutUs.TeachingEnvir.TeachingEnvirType/editTeachingEnvirType', data, {
// isTransformResponse: true,
// isShowSuccessMessage: true,
errorMessageText: '编辑失败'
});
}