配合 keylion 项目使用，自动生成对应的 curd 页面

下载

npm install keylion-gen-curd -g

使用

keylion-gen gen -f '文件夹名字' -path '所需要载入的路径'

解析

自动生成index.vue、useForm.js、table.config.json 三个文件

文件内容如下示例

index.vue

<script lang="jsx">
    import configTable from "@/components/config-table/index.vue";
    import znForm from "@/components/zn-form/index.vue";
    import {useRequest} from "keylion-hooks";
    import {useForm} from "./useForm";
    import useCURD from "@/hooks/useCURD";
    import usePagination from "@/hooks/usePagination";
    import {computed, ref} from "vue";
    import tableConfigJson from "./table.config.json";
    import {
      xxxAdd,
       xxxUpdate,
        xxxDel,
        xxxList,
    } from "@/api/organization";
    export default {
      components: {
        configTable,
        znForm,
      },
      setup() {
        const organ = ref();
        let searchRef = ref();
        let {formModelData, schemas, baseColProps} = useForm();

        let {run: insertRun} = useRequest(
            xxxAdd, {
          manual: true,
        });
        let {run: delRun} = useRequest(
             xxxDel, {
          manual: true,
        });
        let {run: listRun, data: oraList} = useRequest(
            xxxList
        );
        let {run: updateRun} = useRequest(
             xxxUpdate, {
          manual: true,
        });

        let {total, currentPage, tableList, currentChange, getTable, searchRun} =
          usePagination({
            _run: listRun,
            data: oraList,
            params: {},
            form: searchRef,
          });
        let {add, submitForm, modalVisibleMixins, closeModal, del, modify} =
          useCURD({
            form: organ,
            request: {
              GET: getTable,
              POST: insertRun,
              DELETE: delRun,
              PUT: updateRun,
            },
            data: formModelData,
            changeCallback: {
              _modify(value) {

                return value;
              },
            },
          });

        let znFormSlots = {
          footer: (form) => {
            return (
              <div class={"flex"} style={"display:flex"}>
                <el-button onClick={submitForm}>确认</el-button>
                <el-button class={"ml-[10px]"} onClick={closeModal}>
                  取消
                </el-button>
              </div>
            );
          },
        };

        return () => (
          <div>
            <div class="title-wrap">
              <el-button onClick={add}>新增</el-button>
            </div>
            <el-dialog v-model={modalVisibleMixins.value} v-slots={znFormSlots}>
              <znForm
                baseColProps={baseColProps}
                ref={organ}
                model={formModelData}
                validateFormColProps={{span: 3}}
                hide-required-asterisk
                class={"zn-form work-order-search pl-[40px]"}
                schemas={schemas}
                fieldMapToTime={[
                  ["time", ["startTime", "endTime"], "YYYY-MM-DD HH:mm:ss"],
                ]}
              ></znForm>
            </el-dialog>
            <configTable
              onCurrentPage={currentChange}
              total={total.value}
              currentPage={currentPage.value}
              columns={tableConfigJson}
              data={tableList.value}
              v-slots={{
                opera: (v) => {
                  return (
                    <div>
                      <el-button onClick={() => modify(v.value)}>修改</el-button>
                      <el-button onClick={() => del(v.value)}>
                        删除
                      </el-button>
                    </div>
                  );
                },
              }}
            ></configTable>
          </div>
        );
      },
    };
    </script>

useForm.js

import {reactive} from "vue";

export function useForm() {
  let formModelData = reactive({});

  let baseColProps = {
    span: 12,
  };

  let schemas = [
    {
      itemProps: {
        prop: "name",
        label: "名称",
        labelWidth: "80px",
        required: true,
      },
      changeEvent: "input", // 捕获事件类型 跟v-model对应
      component: "Input", // 组件
      componentProps: {
        // 组件属性
        placeholder: "请填写名称",
      },
    },
  ];

  return {
    formModelData,
    schemas,
    baseColProps,
  };
}

table.config.json

[
  {
    title: "操作",
    key: "opera",
    slot: "opera",
  },
];