You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

144 lines
4.7 KiB

<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" prop="stage_id">
<el-select v-model="paramsProps.row.stage_id" placeholder="请选择学段" @change="stageChange">
<el-option v-for="item in stageSelectList" :key="item.stage_id" :label="item.stage_name" :value="item.stage_id" />
</el-select>
</el-form-item>
<el-form-item label="学科" :label-width="formLabelWidth" prop="subject_id">
<el-select v-model="paramsProps.row.subject_id" placeholder="请选择学科">
<el-option
v-for="item in stageSubjectList"
:key="item.subject_id"
:label="item.subject_name"
:value="item.subject_id"
/>
</el-select>
</el-form-item>
<el-form-item label="版本名称" :label-width="formLabelWidth" prop="scheme_name">
<el-input v-model="paramsProps.row.scheme_name" autocomplete="off" placeholder="请输入版本名称" />
</el-form-item>
<el-form-item label="类型" :label-width="formLabelWidth" prop="type_id">
<el-radio-group v-model="paramsProps.row.type_id">
<el-radio-button value="1">章节目录</el-radio-button>
<el-radio-button value="2">知识点</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="排序号" :label-width="formLabelWidth" prop="sort_id">
<el-input v-model="paramsProps.row.sort_id" autocomplete="off" placeholder="请输入排序号" />
</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" name="SubjectDialog">
import { ref, reactive } from "vue";
import { getStageList, getSubjectList, getSchemeInfoById, addScheme, updateScheme } from "@/api/modules/base";
import { ElMessage, FormInstance } from "element-plus";
const dialogFormVisible = ref(false);
const formLabelWidth = "80px";
const stageSelectList = ref();
const stageSubjectList = ref();
const stageSelectedId = ref(0);
const subjectSelectedId = ref(0);
const checkSubjectCode = async (rule: any, value: string, callback: any) => {
if (!value) {
callback(new Error("请输入学科代码"));
}
if (value.length < 2) {
callback(new Error("学科代码长度不能小于2位"));
}
};
const rules = reactive({
stage_id: [{ required: true, message: "请选择学段", trigger: "blur" }],
subject_id: [{ required: true, message: "请选择学科", trigger: "blur" }],
scheme_name: [{ required: true, message: "请输入学科名称", trigger: "blur" }],
type_id: [{ required: true, message: "请选择类型", trigger: "blur" }],
sort_id: [{ required: true, message: "请输入排序号", trigger: "blur" }]
});
const paramsProps = ref<View.DefaultParams>({
title: "",
row: {},
updateId: 0,
getTableList: undefined
});
const acceptParams = (params: View.DefaultParams) => {
console.log(params);
paramsProps.value = params;
getStageSelect();
if (paramsProps.value.updateId !== 0) {
getFormInfo();
} else {
paramsProps.value.row.type_id = "1";
}
dialogFormVisible.value = true;
};
const getFormInfo = async () => {
const res = await getSchemeInfoById({ scheme_id: paramsProps.value.updateId });
const _data = res.data as any;
paramsProps.value.row = _data;
getSubjectSelect(_data.stage_id);
paramsProps.value.row.type_id = _data.type_id.toString();
};
const getStageSelect = async () => {
const res = await getStageList();
stageSelectList.value = res.data.list as never[];
};
const stageChange = e => {
paramsProps.value.row.subject_id = "";
getSubjectSelect(e);
};
const getSubjectSelect = async stageId => {
const res = await getSubjectList({ stage_id: stageId, pageNum: 1, pageSize: 100 });
stageSubjectList.value = res.data.list as never[];
};
const ruleFormRef = ref<FormInstance>();
const handleSubmit = () => {
ruleFormRef.value!.validate(async valid => {
if (!valid) return;
try {
const params = { ...paramsProps.value.row, owner_id: 1 };
if (paramsProps.value.updateId === 0) {
await addScheme(params);
} else {
await updateScheme(params);
}
ElMessage.success({ message: `成功!` });
paramsProps.value.getTableList!();
dialogFormVisible.value = false;
} catch (error) {
console.log(error);
}
});
};
defineExpose({
acceptParams
});
</script>