parent
fc683779ba
commit
e9849a699f
@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="dialogFormVisible"
|
||||
:title="`${paramsProps.title}`"
|
||||
draggable
|
||||
append-to-body
|
||||
:destroy-on-close="true"
|
||||
width="500"
|
||||
>
|
||||
<el-form :model="paramsProps.row" ref="ruleFormRef" :rules="rules">
|
||||
<el-form-item label="上级节点" :label-width="formLabelWidth">
|
||||
<el-input v-model="parentName" disabled />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="节点名称" :label-width="formLabelWidth" prop="structure_name">
|
||||
<el-input v-model="paramsProps.row.structure_name" placeholder="请输入节点名称" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序号" :label-width="formLabelWidth" prop="sort_id">
|
||||
<el-input v-model="paramsProps.row.sort_id" placeholder="请输入排序号" clearable />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="dialogFormVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="handleSubmit">确定</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from "vue";
|
||||
import { getStructureInfoById, addStructure, updateStructure, deleteStructure } from "@/api/modules/base";
|
||||
import { ElMessage, FormInstance, type ElForm } from "element-plus";
|
||||
|
||||
const dialogFormVisible = ref(false);
|
||||
const formLabelWidth = "80px";
|
||||
const parentName = ref("");
|
||||
|
||||
const rules = reactive({
|
||||
structure_name: [{ required: true, message: "请输入节点名称" }],
|
||||
sort_id: [{ required: true, message: "请输入排序号" }]
|
||||
});
|
||||
|
||||
const paramsProps = ref<View.DefaultParams>({
|
||||
title: "",
|
||||
row: {},
|
||||
getTableList: undefined
|
||||
});
|
||||
|
||||
const acceptParams = (params: View.DefaultParams) => {
|
||||
paramsProps.value = params;
|
||||
dialogFormVisible.value = true;
|
||||
getParnetName();
|
||||
};
|
||||
|
||||
const getParnetName = async () => {
|
||||
const res = await getStructureInfoById({ structure_id: paramsProps.value.row.parent_id });
|
||||
const _data = res.data as any;
|
||||
parentName.value = _data.structure_name;
|
||||
};
|
||||
|
||||
const ruleFormRef = ref<FormInstance>();
|
||||
const handleSubmit = () => {
|
||||
ruleFormRef.value!.validate(async valid => {
|
||||
if (!valid) return;
|
||||
try {
|
||||
if (paramsProps.value.ctlType === "add") {
|
||||
await addStructure(paramsProps.value.row);
|
||||
} else {
|
||||
await updateStructure(paramsProps.value.row);
|
||||
}
|
||||
ElMessage.success({ message: `成功！` });
|
||||
paramsProps.value.getTableList!();
|
||||
dialogFormVisible.value = false;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
acceptParams
|
||||
});
|
||||
</script>
|
||||
@ -0,0 +1,191 @@
|
||||
<template>
|
||||
<div class="table-box">
|
||||
<div class="card table-search">
|
||||
<el-row>
|
||||
<el-col :span="20">
|
||||
<el-form :inline="true">
|
||||
<el-form-item label="学段 : ">
|
||||
<el-select v-model="stageSelect" style="width: 200px" @change="stageChange">
|
||||
<el-option v-for="(item, index) in stageList" :key="index" :label="item.stage_name" :value="item.stage_id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="学科 : ">
|
||||
<el-select v-model="subjectSelect" style="width: 200px" @change="subjectChange">
|
||||
<el-option
|
||||
v-for="(item, index) in subjectList"
|
||||
:key="index"
|
||||
:label="item.subject_name"
|
||||
:value="item.subject_id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="版本 : ">
|
||||
<el-select v-model="schemeSelect" style="width: 200px" @change="schemeChange">
|
||||
<el-option v-for="(item, index) in schemeList" :key="index" :label="item.scheme_name" :value="item.scheme_id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
<el-col :span="4" style="text-align: right">
|
||||
<el-button type="primary" :icon="Search">搜索</el-button>
|
||||
<el-button :icon="Delete"> 重置 </el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<ProTable
|
||||
ref="proTable"
|
||||
:indent="20"
|
||||
:columns="columns"
|
||||
:request-api="getTableList"
|
||||
:initParam="initParam"
|
||||
row-key="structure_id"
|
||||
:pagination="false"
|
||||
:border="false"
|
||||
:default-expand-all="defaultExpandAllKey"
|
||||
:toolButton="false"
|
||||
>
|
||||
<!-- 表格操作 -->
|
||||
<template #operation="scope">
|
||||
<el-button type="primary" link :icon="CirclePlus" @click="openDrawer('新增', scope.row, 'add')">新增</el-button>
|
||||
<el-button
|
||||
v-if="scope.row.parent_id !== -1"
|
||||
type="primary"
|
||||
link
|
||||
:icon="EditPen"
|
||||
@click="openDrawer('编辑', scope.row, 'edit')"
|
||||
>编辑</el-button
|
||||
>
|
||||
<el-button
|
||||
v-if="scope.row.parent_id !== -1"
|
||||
type="primary"
|
||||
link
|
||||
:icon="Delete"
|
||||
@click="deleteData(scope.row.structure_id)"
|
||||
>删除</el-button
|
||||
>
|
||||
</template>
|
||||
</ProTable>
|
||||
<StructureDialog ref="dialogRef" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref, onMounted } from "vue";
|
||||
import { CirclePlus, Delete, EditPen, Search } from "@element-plus/icons-vue";
|
||||
import { ElMessageBox, ElMessage } from "element-plus";
|
||||
import ProTable from "@/components/ProTable/index.vue";
|
||||
import { Structure } from "@/api/interface";
|
||||
import { getStructureList, deleteStructure, getStageList, getSubjectList, getSchemeList } from "@/api/modules/base";
|
||||
import type { ColumnProps, ProTableInstance } from "@/components/ProTable/interface";
|
||||
|
||||
import StructureDialog from "@/views/base/structure/components/StructureDialog.vue";
|
||||
|
||||
const stageList = ref<any>([]);
|
||||
const stageSelect = ref("");
|
||||
|
||||
const subjectList = ref<any>([]);
|
||||
const subjectSelect = ref("");
|
||||
|
||||
const schemeList = ref<any>([]);
|
||||
const schemeSelect = ref("");
|
||||
|
||||
// ProTable 实例
|
||||
const proTable = ref<ProTableInstance>();
|
||||
|
||||
const initParam = reactive({ scheme_id: 0 });
|
||||
// 表格配置项
|
||||
const columns: ColumnProps<Structure.ResStructureList>[] = [
|
||||
{ prop: "structure_name", label: "节点名称", align: "left" },
|
||||
{ prop: "sort_id", label: "排序号", width: 300 },
|
||||
{ prop: "operation", label: "操作", width: 240, align: "left" }
|
||||
];
|
||||
const defaultExpandAllKey = ref(true);
|
||||
// 获取table列表
|
||||
const getTableList = (params: any) => {
|
||||
return getStructureList(params);
|
||||
};
|
||||
|
||||
const dialogRef = ref<InstanceType<typeof StructureDialog> | null>(null);
|
||||
const openDrawer = (title: string, row: any = {}, ctlType: string) => {
|
||||
let _row = {};
|
||||
if (ctlType === "add") {
|
||||
_row = {
|
||||
scheme_id: row.scheme_id,
|
||||
parent_id: row.structure_id
|
||||
};
|
||||
} else {
|
||||
_row = row;
|
||||
}
|
||||
const params = {
|
||||
title,
|
||||
row: { ..._row },
|
||||
getTableList: proTable.value?.getTableList,
|
||||
ctlType
|
||||
};
|
||||
dialogRef.value?.acceptParams(params);
|
||||
};
|
||||
|
||||
const deleteData = async (structure_id: number) => {
|
||||
ElMessageBox.confirm(`是否删除该节点?`, "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
draggable: true
|
||||
}).then(async () => {
|
||||
await deleteStructure({ structure_id });
|
||||
ElMessage.success({ message: `成功！` });
|
||||
|
||||
proTable.value?.getTableList();
|
||||
});
|
||||
};
|
||||
|
||||
const getSssSelectList = async () => {
|
||||
const resStage = await getStageList();
|
||||
stageList.value = resStage.data.list;
|
||||
stageSelect.value = stageList.value[0].stage_id;
|
||||
|
||||
const resSubject = await getSubjectList({ stage_id: stageList.value[0].stage_id, pageNum: 1, pageSize: 100 });
|
||||
subjectList.value = resSubject.data.list;
|
||||
subjectSelect.value = subjectList.value[0].subject_id;
|
||||
|
||||
const resScheme = await getSchemeList({
|
||||
stage_id: stageList.value[0].stage_id,
|
||||
subject_id: subjectList.value[0].subject_id,
|
||||
pageNum: 1,
|
||||
pageSize: 100
|
||||
});
|
||||
schemeList.value = resScheme.data.list;
|
||||
schemeSelect.value = schemeList.value[0].scheme_id;
|
||||
|
||||
initParam.scheme_id = schemeList.value[0].scheme_id;
|
||||
};
|
||||
|
||||
const stageChange = async value => {
|
||||
const resSubject = await getSubjectList({ stage_id: value, pageNum: 1, pageSize: 100 });
|
||||
subjectList.value = resSubject.data.list;
|
||||
subjectSelect.value = "";
|
||||
|
||||
schemeList.value = [];
|
||||
schemeSelect.value = "";
|
||||
};
|
||||
|
||||
const subjectChange = async value => {
|
||||
const resScheme = await getSchemeList({
|
||||
stage_id: stageSelect.value as any,
|
||||
subject_id: value,
|
||||
pageNum: 1,
|
||||
pageSize: 100
|
||||
});
|
||||
schemeList.value = resScheme.data.list;
|
||||
schemeSelect.value = "";
|
||||
};
|
||||
|
||||
const schemeChange = async value => {
|
||||
initParam.scheme_id = value;
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getSssSelectList();
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="scss"></style>
|
||||
Loading…
Reference in new issue