LdForm 表单组件 #

<template>
  <LdForm ref="deptFormRef" @register="register" @submit="onSubmit"></LdForm>
</template>
<script>
import { defineComponent, ref, nextTick, unref } from "vue";
import { DeptService } from "@/service";
import { useToggle } from "@/landao/hooks";
import { useForm } from "@/components/LdForm";
import { ElMessage, ElMessageBox } from "element-plus";
import { deepTree } from "@/landao/utils";

export default defineComponent({
  name: "DeptForm",
  setup() {
    const deptFormRef = ref(null);

    //需要更新的部门ID
    const { state: updateDeptId, toggle: setUpdateDeptId } = useToggle(0);

    //注册表单
    const [register, { resetFields, setProps, setFieldsValue }] = useForm({
      labelPosition: "right",
      labelWidth: "150px",
      schemas: [
        {
          field: "parent_id",
          label: "上级部门",
          required: true,
          component: "ApiTreeSelect",
          defaultValue: 0,
          componentProps: {
            placeholder: "请选择上级部门",
            api: getList,
            filterable: true,
            checkStrictly: true,
            nodeKey: "dept_id",
            props: {
              label: "dept_name",
            },
            afterFetch: (data) => {
              data.unshift({
                dept_name: "一级部门",
                dept_id: 0,
              });
              return deepTree(data, "dept_id", "parent_id", "dept_order");
            },
          },
        },
        {
          field: "dept_name",
          label: "部门名称",
          component: "Input",
          required: true,
          defaultValue: "",
        },
        {
          field: "dept_desc",
          label: "备注",
          component: "Input",
          required: true,
          defaultValue: "",
          componentProps: {
            type: "textarea",
          },
        },
        {
          field: "dept_order",
          label: "排序",
          component: "InputNumber",
          defaultValue: 1,
          componentProps: {
            controlsPosition: "right",
            min: 0,
          },
        },
      ],
      showResetButton: false,
    });

    const onSubmit = async (data) => {
      setProps({ submitButtonOptions: { loading: true, label: "提交中..." } });
      if (unref(updateDeptId) > 0) {
        await DeptService.update(unref(updateDeptId), data)
          .then((res) => {
            ElMessage.success(res.message);
            clearTableForm();
          })
          .catch((err) => {
            ElMessage.error("1" + err);
          });
      } else {
        await DeptService.doStore(data)
          .then((res) => {
            ElMessage.success(res.message);
            clearTableForm();
          })
          .catch((err) => {
            ElMessage.error("2" + err);
          });
      }
      setProps({ submitButtonOptions: { loading: false, label: "提 交" } });
    };

    return {
      deptFormRef,
      register,
      onSubmit
    };
  },
});
</script>

<template>
 <div class="ld-form">
    <ld-form label-position="right" label-width="150px" :schemas="schemas">
        <!-- #slotName 或 v-slot:slotName -->
      <template #menuFileSlot="{ model, field, values }">
        <menu-file v-model="model[field]" />
      </template>
    </ld-form>
  </div>
</template>
<script>
  import { defineComponent } from 'compatible-vue';
  import menuFile from "@/views/system/components/menu-file";
  export default defineComponent({
    name: 'FormDemo',
     components: { menuFile },
    setup(props) {
      const schemas = [
      {
        field: "menu_component",
        label: "文件路径：",
        slot: "menuFileSlot",
      },
    ];

    return {
      schemas,
    };
    },
  });
</script>

<template>
  <div class="m-4">
    <LdForm @register="register" />
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { useForm } from "@/components/LdForm";
  const schemas = [
    {
      field: 'field1',
      component: 'Input',
      label: '字段1',
      colProps: {
        span: 8,
      },
      show: ({ values }) => {
        return !!values.field5;
      },
    },
    {
      field: 'field2',
      component: 'Input',
      label: '字段2',
      colProps: {
        span: 8,
      },
      ifShow: ({ values }) => {
        return !!values.field6;
      },
    }
  ];

  export default defineComponent({
    components: { BasicForm },
    setup() {
      const [register, { setProps }] = useForm({
        labelWidth: 120,
        schemas,
      });
      return {
        register,
        schemas,
        setProps,
      };
    },
  });
</script>

<template>
  <SelectPage
        placeholder="请选择授课校区"
        v-model="schoolValue"
        :api="schoolPageApi"
        :columns="schoolColumn"
        :form-config="formConfig"
        value-key="school_id"
        label-key="school_name"
      >
        <template #search>
          <el-form-item prop="school_name">
            <el-input
              size="default"
              v-model="formSearch.school_name"
              placeholder="请输入校名"
            ></el-input>
          </el-form-item>
        </template>
      </SelectPage>
      <SelectPage
        placeholder="请选择授课校区，多选"
        v-model="schoolValueArr"
        :api="schoolPageApi"
        :columns="schoolColumn"
        value-key="school_id"
        label-key="school_name"
        multiple
      ></SelectPage>
</template>
<script>
import { defineComponent, reactive, ref } from "vue";
import { useBaseStore } from "@/store";
import { CourseService, SchoolService } from "@/service";
import SelectPage from "@/components/LdForm/components/widget/SelectPageWidget";
export default defineComponent({
  name: "CourseList",
  components: {
    CourseCategoryTree,
    SelectPage,
  },
  setup() {
     // 要删除掉的
    const { app: appStore } = useBaseStore();
    const { school_type } = appStore.dictionary;

    const schoolColumn = reactive([
      {
        prop: "school_name",
        label: "学校",
        width: 300,
      },
      {
        prop: "school_type",
        label: "类型",
        width: 100,
        format: (value, row, column) => {
          const constantItem = school_type.find((item) => item.value == value);
          return constantItem.label ?? "-";
        },
      },
    ]);
    const schoolValue = ref({ school_id: 1002, school_name: "福州16中" });
    const schoolValueArr = ref([
      { school_id: 1002, school_name: "福州16中" },
      { school_id: 1003, school_name: "福州19中" },
    ]);

    const formConfig = reactive([
      {
        field: "district_id",
        component: "Cascader",
        defaultValue: "",
        colProps: {
          span: 8,
        },
        componentProps: {
          placeholder: "请选择学校所在区域",
          options: appStore.operationArea,
          showAllLevels: false,
          props: { emitPath: false },
          clearable: true,
        },
      },
      {
        field: "school_name",
        component: "Input",
        defaultValue: "",
        colProps: {
          span: 8,
        },
        componentProps: {
          placeholder: "请输入学校名称",
          clearable: true,
        },
      },
    ]);
    return {
       schoolPageApi: SchoolService.page,
      schoolColumn,
      schoolValue,
      schoolValueArr,
      formConfig,
    }
  })