Geeker-Admin/src/views/base/scheme/components/SchemeDialog.vue

<template>
  <el-dialog v-model="dialogFormVisible" :title="`${paramsProps.title}`" 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="请选择学段">
          <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="subject_name">
        <el-input v-model="paramsProps.row.subject_name" autocomplete="off" placeholder="请输入版本名称" />
      </el-form-item>
      <el-form-item label="类型">
        <el-radio-group v-model="form.resource">
          <el-radio value="1">章节目录</el-radio>
          <el-radio value="2">知识点</el-radio>
        </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, getSubjectInfoById, addSubject, updateSubject } 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("");
const subjectSelectedId = ref("");

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_name: [{ required: true, message: "请输入学科名称", trigger: "blur" }],
  subject_code: [{ validator: checkSubjectCode, trigger: "blur" }],
  sort_id: [{ required: true, message: "请输入排序号", trigger: "blur" }]
});

const paramsProps = ref<View.DefaultParams>({
  title: "",
  row: {},
  updateId: 0,
  refreshParentFun: undefined
});

const acceptParams = (params: View.DefaultParams) => {
  paramsProps.value = params;
  getStageSelect();
  if (paramsProps.value.updateId !== 0) {
    getFormInfo();
  }
  dialogFormVisible.value = true;
};

const getFormInfo = async () => {
  const res = await getSubjectInfoById({ subject_id: paramsProps.value.updateId });
  paramsProps.value.row = res.data as any;
};

const getStageSelect = async () => {
  const res = await getStageList();
  stageSelectList.value = res.data.list as never[];
};

const getSubjectSelect = async () => {
  const res = await getSubjectList({ stage_id: parseInt(stageSelectedId.value), 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 {
      if (paramsProps.value.updateId === 0) {
        await addSubject(paramsProps.value.row);
      } else {
        await updateSubject(paramsProps.value.row);
      }
      ElMessage.success({ message: `成功！` });
      paramsProps.value.getTableList!();
      dialogFormVisible.value = false;
    } catch (error) {
      console.log(error);
    }
  });
};

defineExpose({
  acceptParams
});
</script>