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