build

package.json

@@ -12,6 +12,7 @@
     "preview:build": "pnpm build && vite preview",
     "cloc": "cross-env --max_old_space_size=4096 cloc . --exclude-dir=node_modules --exclude-lang=YAML",
     "clean:cache": "rm -rf node_modules && rm -rf .eslintcache && pnpm install",
+    "lint:eslint": "eslint --cache --max-warnings 0  \"{src,mock}/**/*.{vue,ts,tsx}\" --fix",
     "lint:prettier": "prettier --write  \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\"",
     "lint:stylelint": "stylelint --cache --fix \"**/*.{vue,css,scss,postcss,less}\" --cache --cache-location node_modules/.cache/stylelint/",
     "lint:lint-staged": "lint-staged -c ./.husky/lintstagedrc.js",

scripts/generateComponent.js

@@ -1,93 +0,0 @@
-// generateComponent.js 文件，放置生成组件的代码
-const chalk = require("chalk");
-const path = require("path");
-const fs = require("fs");
-const resolve = (...file) => path.resolve(__dirname, ...file);
-// const log = message => console.log(chalk.green(`${message}`));
-// const successLog = message => console.log(chalk.blue(`${message}`));
-const log = message => console.log(chalk.yellow(`${message}`));
-const successLog = message => console.log(chalk.green(`${message}`));
-const errorLog = error => console.log(chalk.red(`${error}`));
-const { vueTemplate, entryTemplate } = require("./template");
-
-const generateFile = (path, data) => {
-  if (fs.existsSync(path)) {
-    errorLog(`${path}文件已存在`);
-    return;
-  }
-  return new Promise((resolve, reject) => {
-    fs.writeFile(path, data, "utf8", err => {
-      if (err) {
-        errorLog(err.message);
-        reject(err);
-      } else {
-        resolve(true);
-      }
-    });
-  });
-};
-log("请输入要生成的组件名称、如需生成全局组件，请加 global/ 前缀");
-let componentName = "";
-process.stdin.on("data", async chunk => {
-  const inputName = String(chunk)
-    .trim()
-    .toString();
-  // 组件目录路径
-  const componentDirectory = resolve("../src/components", inputName);
-
-  // vue组件路径
-  const componentVueName = resolve(componentDirectory, "main.vue");
-  // 入口文件路径
-  const entryComponentName = resolve(componentDirectory, "index.js");
-
-  const hasComponentDirectory = fs.existsSync(componentDirectory);
-  if (hasComponentDirectory) {
-    errorLog(`${inputName}组件目录已存在，请重新输入`);
-    return;
-  } else {
-    log(`正在生成 component 目录 ${componentDirectory}`);
-    await dotExistDirectoryCreate(componentDirectory);
-    // fs.mkdirSync(componentDirectory);
-  }
-  try {
-    if (inputName.includes("/")) {
-      const inputArr = inputName.split("/");
-      componentName = inputArr[inputArr.length - 1];
-    } else {
-      componentName = inputName;
-    }
-    log(`正在生成 vue 文件 ${componentVueName}`);
-    await generateFile(componentVueName, vueTemplate(componentName));
-    log(`正在生成 entry 文件 ${entryComponentName}`);
-    await generateFile(entryComponentName, entryTemplate);
-    successLog("生成成功");
-  } catch (e) {
-    errorLog(e.message);
-  }
-
-  process.stdin.emit("end");
-});
-process.stdin.on("end", () => {
-  log("exit");
-  process.exit();
-});
-function dotExistDirectoryCreate(directory) {
-  return new Promise(resolve => {
-    mkdirs(directory, function() {
-      resolve(true);
-    });
-  });
-}
-
-// 递归创建目录
-function mkdirs(directory, callback) {
-  var exists = fs.existsSync(directory);
-  if (exists) {
-    callback();
-  } else {
-    mkdirs(path.dirname(directory), function() {
-      fs.mkdirSync(directory);
-      callback();
-    });
-  }
-}

scripts/generatePage.js

@@ -1,103 +0,0 @@
-// generatePage.js 文件，放置生成组件的代码
-const chalk = require("chalk");
-const path = require("path");
-const fs = require("fs");
-const resolve = (...file) => path.resolve(__dirname, ...file);
-const log = message => console.log(chalk.yellow(`${message}`));
-const successLog = message => console.log(chalk.green(`${message}`));
-const errorLog = error => console.log(chalk.red(`${error}`));
-const { indexPage, addEditPage, servicePage } = require("./template");
-
-const generateFile = (path, data) => {
-  if (fs.existsSync(path)) {
-    errorLog(`${path}文件已存在`);
-    return;
-  }
-  return new Promise((resolve, reject) => {
-    fs.writeFile(path, data, "utf8", err => {
-      if (err) {
-        errorLog(err.message);
-        reject(err);
-      } else {
-        resolve(true);
-      }
-    });
-  });
-};
-log("请输入要生成的页面名称：");
-let componentName = "";
-process.stdin.on("data", async chunk => {
-  const inputName = String(chunk).trim().toString();
-  // 页面组件目录路径
-  const componentDirectory = resolve("../src/views", inputName);
-  // apis-service 目录路径
-  const apisServiceDirectory = resolve("../src/apis/service", inputName);
-  // // apis-model 目录路径
-  // const apisModelDirectory = resolve("../src/apis/model", inputName);
-  // vue组件路径--首页--列表页
-  const listTablePath = resolve(componentDirectory, "index.vue");
-  // vue组件路径--添加修改详情
-  const addEditPath = resolve(componentDirectory, "addEdit.vue");
-  // service文件路径
-  const servicePath = resolve(apisServiceDirectory, "index.js");
-  // views页面文件目录
-  const hasComponentDirectory = fs.existsSync(componentDirectory);
-  if (hasComponentDirectory) {
-    errorLog(`${inputName}组件目录已存在，请重新输入`);
-    return;
-  } else {
-    log(`正在生成 component 目录 ${componentDirectory}`);
-    await dotExistDirectoryCreate(componentDirectory);
-  }
-  // service文件目录
-  const hasService = fs.existsSync(apisServiceDirectory);
-  if (hasService) {
-    errorLog(`${inputName}service目录已存在，请重新输入`);
-    return;
-  } else {
-    log(`正在生成 apis/service 目录 ${apisServiceDirectory}`);
-    await dotExistDirectoryCreate(apisServiceDirectory);
-  }
-  try {
-    if (inputName.includes("/")) {
-      const inputArr = inputName.split("/");
-      componentName = inputArr[inputArr.length - 1];
-    } else {
-      componentName = inputName;
-    }
-    log(`正在生成 views-列表 文件 ${listTablePath}`);
-    await generateFile(listTablePath, indexPage(componentName));
-    log(`正在生成 views-添加修改详情 文件 ${addEditPath}`);
-    await generateFile(addEditPath, addEditPage(componentName));
-    log(`正在生成 apis-service 文件 ${servicePath}`);
-    await generateFile(servicePath, servicePage);
-    successLog("生成成功");
-  } catch (e) {
-    errorLog(e.message);
-  }
-  process.stdin.emit("end");
-});
-process.stdin.on("end", () => {
-  log("exit");
-  process.exit();
-});
-function dotExistDirectoryCreate(directory) {
-  return new Promise(resolve => {
-    mkdirs(directory, function () {
-      resolve(true);
-    });
-  });
-}
-
-// 递归创建目录
-function mkdirs(directory, callback) {
-  var exists = fs.existsSync(directory);
-  if (exists) {
-    callback();
-  } else {
-    mkdirs(path.dirname(directory), function () {
-      fs.mkdirSync(directory);
-      callback();
-    });
-  }
-}

scripts/generateView.js

@@ -1,93 +0,0 @@
-// generateView.js 文件，放置生成页面组件的代码
-const chalk = require("chalk");
-const path = require("path");
-const fs = require("fs");
-const resolve = (...file) => path.resolve(__dirname, ...file);
-const log = message => console.log(chalk.green(`${message}`));
-const successLog = message => console.log(chalk.blue(`${message}`));
-const errorLog = error => console.log(chalk.red(`${error}`));
-const { vueTemplate } = require("./template");
-
-const generateFile = (path, data) => {
-  if (fs.existsSync(path)) {
-    errorLog(`${path}文件已存在`);
-    return;
-  }
-  return new Promise((resolve, reject) => {
-    fs.writeFile(path, data, "utf8", err => {
-      if (err) {
-        errorLog(err.message);
-        reject(err);
-      } else {
-        resolve(true);
-      }
-    });
-  });
-};
-log("请输入要生成的页面组件名称、会生成在 views/目录下");
-let componentName = "";
-process.stdin.on("data", async chunk => {
-  const inputName = String(chunk)
-    .trim()
-    .toString();
-  /**
-   * Vue页面组件路径
-   */
-  let componentVueName = resolve("../src/views", inputName);
-  // 如果不是以 .vue 结尾的话，自动加上
-  if (!componentVueName.endsWith(".vue")) {
-    componentVueName += ".vue";
-  }
-  /**
-   * vue组件目录路径
-   */
-  const componentDirectory = path.dirname(componentVueName);
-
-  const hasComponentExists = fs.existsSync(componentVueName);
-  if (hasComponentExists) {
-    errorLog(`${inputName}页面组件已存在，请重新输入`);
-    return;
-  } else {
-    log(`正在生成 component 目录 ${componentDirectory}`);
-    await dotExistDirectoryCreate(componentDirectory);
-  }
-  try {
-    if (inputName.includes("/")) {
-      const inputArr = inputName.split("/");
-      componentName = inputArr[inputArr.length - 1];
-    } else {
-      componentName = inputName;
-    }
-    log(`正在生成 vue 文件 ${componentVueName}`);
-    await generateFile(componentVueName, vueTemplate(componentName));
-    successLog("生成成功");
-  } catch (e) {
-    errorLog(e.message);
-  }
-
-  process.stdin.emit("end");
-});
-process.stdin.on("end", () => {
-  log("exit");
-  process.exit();
-});
-function dotExistDirectoryCreate(directory) {
-  return new Promise(resolve => {
-    mkdirs(directory, function() {
-      resolve(true);
-    });
-  });
-}
-
-// 递归创建目录
-function mkdirs(directory, callback) {
-  var exists = fs.existsSync(directory);
-  if (exists) {
-    callback();
-  } else {
-    mkdirs(path.dirname(directory), function() {
-      fs.mkdirSync(directory);
-      callback();
-    });
-  }
-}

scripts/page/addEditPage.js

@@ -1,275 +0,0 @@
-module.exports = function(compoenntName) {
-  return `<template>
-  <el-dialog
-    :title="title"
-    :center="true"
-    align="left"
-    top="5vh"
-    width="1040px"
-    @close="closeModel"
-    :close-on-click-modal="false"
-    :visible.sync="showModelThis"
-    v-loading="loading"
-    element-loading-text="拼命加载中"
-    element-loading-spinner="el-icon-loading"
-    element-loading-background="rgba(0, 0, 0, 0.8)"
-  >
-    <el-card>
-      <el-row :gutter="10">
-        <el-col :span="24">
-          <el-form
-            :model="ruleForm"
-            status-icon
-            :rules="rulesThis"
-            ref="ruleForm"
-            label-width="110px"
-            class="demo-ruleForm"
-          >
-            <el-form-item
-              label="登录名"
-              prop="loginName"
-              v-if="id === 'add' || isDetail"
-            >
-              <el-input
-                v-model="ruleForm.loginName"
-                :disabled="isDetail"
-              ></el-input>
-            </el-form-item>
-            <el-form-item label="姓名" prop="fullName">
-              <el-input
-                v-model="ruleForm.fullName"
-                :disabled="isDetail"
-              ></el-input>
-            </el-form-item>
-            <el-form-item label="手机号" prop="tel">
-              <el-input v-model="ruleForm.tel" :disabled="isDetail"></el-input>
-            </el-form-item>
-            <el-form-item label="密码" prop="password" v-if="id === 'add'">
-              <el-input
-                type="password"
-                placeholder="密码"
-                :maxlength="20"
-                v-model="ruleForm.password"
-              ></el-input>
-            </el-form-item>
-            <el-form-item label="确认密码" prop="password2" v-if="id === 'add'">
-              <el-input
-                type="password"
-                placeholder="再次输入密码"
-                :maxlength="20"
-                v-model="ruleForm.password2"
-              ></el-input>
-            </el-form-item>
-          </el-form>
-        </el-col>
-        <el-col :span="24" style="text-align: right;">
-          <el-button type="primary" @click="submitForm" v-if="!isDetail"
-            >保 存
-          </el-button>
-          <el-button @click="showModelThis = false">{{ isDetail ? "关 闭" : "取 消" }}</el-button>
-        </el-col>
-      </el-row>
-    </el-card>
-  </el-dialog>
-   </template>
-   <script>
-   import asyncRequest from "@/apis/service/${compoenntName}";
-
-   export default {
-    name: '${compoenntName}',
-    props: ["showModel", "id", "isDetail"],
-    data() {
-      let validatePass = (rule, value, callback) => {
-        if (value === "" || value === undefined) {
-          callback(new Error("请输入新密码"));
-        } else {
-          if (value.length < 6 || value.length > 15) {
-            callback(new Error("必须是6到15位,支持数字、字母、符号组合"));
-          } else {
-            if (this.ruleForm.password2 !== "") {
-              this.$refs.ruleForm.validateField("password2");
-            }
-            callback();
-          }
-        }
-      };
-      let validatePass2 = (rule, value, callback) => {
-        if (value === "" || value === undefined) {
-          callback(new Error("请再次输入密码"));
-        } else if (value !== this.ruleForm.password) {
-          callback(new Error("两次输入密码不一致!"));
-        } else {
-          if (value.length < 6 || value.length > 15) {
-            callback(new Error("必须是6到15位,支持数字、字母、符号组合"));
-          } else {
-            callback();
-          }
-        }
-      };
-      return {
-        loading: false,
-        title: "添加管理人员",
-        showModelThis: this.showModel,
-        ruleForm: {
-          tel: "",
-          fullName: "",
-          loginName: "",
-          passport: ""
-          // isAdmin: 0
-        },
-        rulesThis: this.rules,
-        rules: {
-          loginName: [
-            {
-              required: true,
-              message: "请输入登录名",
-              trigger: "blur"
-            },
-            {
-              min: 2,
-              max: 30,
-              message: "长度在 2 到 30 个字符",
-              trigger: "blur"
-            }
-          ],
-          fullName: [
-            {
-              required: true,
-              message: "请输入姓名",
-              trigger: "blur"
-            },
-            {
-              min: 2,
-              max: 30,
-              message: "长度在 2 到 30 个字符",
-              trigger: "blur"
-            }
-          ],
-          password: [
-            {
-              required: true,
-              validator: validatePass,
-              trigger: "blur"
-            }
-          ],
-          password2: [
-            {
-              required: true,
-              validator: validatePass2,
-              trigger: "blur"
-            }
-          ],
-          tel: [
-            {
-              required: true,
-              message: "请输入手机号码",
-              trigger: "blur"
-            },
-            {
-              validator: this.$rulesPhone,
-              trigger: "blur"
-            }
-          ]
-        }
-      };
-    },
-    methods: {
-      closeModel() {
-        console.log("closeModel!!");
-      },
-      async initForm() {
-        if (this.id === "add") {
-          this.title = "添加管理人员";
-          // this.ruleForm.isAdmin = 0;
-          this.loading = false;
-          this.rulesThis = this.rules;
-          await this.resetForm();
-        } else {
-          if (this.isDetail) {
-            this.title = "管理人员详情";
-            this.rulesThis = {};
-          } else {
-            this.title = "修改管理人员";
-            this.rulesThis = this.rules;
-          }
-          await this.resetForm();
-          await this.initData();
-        }
-      },
-      async initData() {
-        this.loading = true;
-        let res = await asyncRequest.detail({id:this.id});
-        this.loading = false;
-        if (res.code === 0) {
-          this.ruleForm = res.data;
-        }
-      },
-      async resetForm() {
-        // 重置
-        await this.$nextTick(() => {
-          if (this.$refs.ruleForm) {
-            this.$refs.ruleForm.resetFields();
-            this.$refs.ruleForm.clearValidate();
-            this.ruleForm = {
-              tel: "",
-              fullName: "",
-              loginName: "",
-              passport: ""
-              // isAdmin: 0
-            };
-          }
-        });
-      },
-      async submitForm() {
-        await this.$refs.ruleForm.validate(async valid => {
-          if (valid) {
-            this.loading = true;
-            let obj = JSON.parse(JSON.stringify(this.ruleForm));
-            let res = {};
-            if (this.id === "add") {
-              obj.passport = obj.password;
-              res = await asyncRequest.add(obj);
-            } else {
-              res = await asyncRequest.update(obj);
-            }
-            this.loading = false;
-            if (res.code === 0) {
-              let title = this.id === "add" ? "添加成功" : "修改成功";
-              this.$notify.success({
-                title,
-                message: ""
-              });
-              this.showModelThis = false;
-              // 刷新
-              this.$emit("refresh");
-            }
-          } else {
-            console.log("error submit!!");
-            return false;
-          }
-        });
-      }
-    },
-    watch: {
-      showModel: function(val) {
-        this.showModelThis = val;
-        if (val) {
-          this.initForm();
-        }
-      },
-      showModelThis(val) {
-        if (!val) {
-          this.$emit("cancel");
-        }
-      }
-    }
-  };
-  </script>
-
-   <style lang="scss" scoped>
-   .${compoenntName} {
-    
-   }
-   </style>
-   `;
-};

scripts/page/indexPage.js

@@ -1,301 +0,0 @@
-module.exports = function (compoenntName) {
-  return `<template>
-    <div class="${compoenntName} pagePadding">
-      <el-row :gutter="10">
-        <el-col :span="24" style="padding:  0 0 18px 0">
-          <el-col :span="3">
-            <el-input
-            :size="searchSize"
-              v-model="parmValue.loginName"
-              :maxlength="40"
-              placeholder="账户"
-            ></el-input>
-          </el-col>
-          <el-col :span="3">
-            <el-input
-            :size="searchSize"
-              v-model="parmValue.fullName"
-              :maxlength="40"
-              placeholder="姓名"
-            ></el-input>
-          </el-col>
-          <el-col :span="3" style="width: 152px;">
-            <el-button
-              type="primary"
-              :size="searchSize"
-              @click="searchList"
-              icon="el-icon-search"
-            ></el-button>
-            <el-button type="warning" :size="searchSize" @click="restSearch">
-              重置
-            </el-button>
-          </el-col>
-          <el-col :span="3" style="width: 195px;float:right;">
-            <el-button
-              type="primary"
-              :size="searchSize"
-              style="float:right;margin-left:5px;"
-              @click="searchList"
-            >
-              刷新
-            </el-button>
-            <el-button
-              type="success"
-              :size="searchSize"
-              style="float:right;"
-              @click="openModal('add', false)"
-            >
-              添加
-            </el-button>
-          </el-col>
-        </el-col>
-      </el-row>
-      <el-table
-        :data="tableData"
-        stripe
-        v-loading="loading"
-        border
-        :size="size"
-        style="width: 100%;"
-      >
-        <el-table-column
-          prop="loginName"
-          label="账户"
-          show-overflow-tooltip
-          align="center"
-        ></el-table-column>
-        <el-table-column
-          prop="fullName"
-          label="姓名"
-          show-overflow-tooltip
-          align="center"
-        ></el-table-column>
-        <!-- <el-table-column
-          prop="userId"
-          label="所属用户"
-          show-overflow-tooltip
-          align="center"
-        ></el-table-column> -->
-        <el-table-column
-          prop="tel"
-          label="手机号"
-          show-overflow-tooltip
-          align="center"
-        ></el-table-column>
-        <el-table-column label="用户类型" show-overflow-tooltip align="center">
-          <template slot-scope="scope">
-            <el-tag type="success"   :size="tablebtnSize" v-if="scope.row.type === 1">运营人员</el-tag>
-            <el-tag type="warning"   :size="tablebtnSize" v-else>物业人员</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column label="状态" show-overflow-tooltip align="center">
-        <template slot-scope="scope">
-          <el-tooltip
-             
-            effect="dark"
-            :content="scope.row.status === '1' ? '改为禁用' : '改为启用'"
-            placement="top"
-          >
-            <el-tag
-              :size="tablebtnSize"
-              v-if="scope.row.status === '1'"
-              type="success"
-              @click="statusConfirm(scope.row.id, scope.row.status)"
-              >启用</el-tag
-            >
-            <el-tag
-              v-else
-              :size="tablebtnSize"
-              type="warning"
-              @click="statusConfirm(scope.row.id, scope.row.status)"
-              >禁用</el-tag
-            >
-          </el-tooltip>
-        </template>
-      </el-table-column>
-        <el-table-column
-          prop="createTime"
-          label="创建时间"
-          show-overflow-tooltip
-          align="center"
-        ></el-table-column>
-        <el-table-column label="是否超管" show-overflow-tooltip align="center">
-          <template slot-scope="scope">
-            <el-tag type="warning"   :size="tablebtnSize" v-if="scope.row.isAdmin === 0">否</el-tag>
-            <el-tag type="success"   :size="tablebtnSize" v-else>是</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column fixed="right" label="操作" align="center" width="250">
-          <template slot-scope="scope">
-            <el-button
-              type="success"
-              :size="tablebtnSize"
-              @click="openModal(scope.row.id, false)"
-            >
-              修改
-            </el-button>
-            <el-button
-              type="danger"
-              :size="tablebtnSize"
-              :disabled="scope.row.isAdmin === 1"
-              @click="deleteById(scope.row.id)"
-            >
-              删除
-            </el-button>
-            <el-button
-              type="warning"
-              :size="tablebtnSize"
-              @click="openModal(scope.row.id, true)"
-            >
-              详情
-            </el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <div
-        class="Pagination"
-        style="text-align: right;margin-top: 10px;"
-        v-show="count > 0"
-      >
-      <el-pagination
-      :size="searchSize"
-       @size-change="handleSizeChange"
-       @current-change="handlePageChange"
-       :current-page="parmValue.page"
-       :page-sizes="[10, 15, 20, 30, 40]"
-       :page-size="parmValue.size"
-       layout="total, sizes, prev, pager, next, jumper"
-       :total="count"
-     ></el-pagination>
-      </div>
-      <add-edit
-        :showModel="showModel"
-        :id="modelId"
-        :isDetail="isDetail"
-        @refresh="searchList"
-        @cancel="showModel = false"
-      ></add-edit>
-    </div>
-   </template>
-   <script>
-    import mixinPage from "@/mixins/elPaginationHandle";
-    import asyncRequest from "@/apis/service/${compoenntName}";
-    import addEdit from "./addEdit";
-    import { mapGetters } from "vuex";
-   export default {
-    name: '${compoenntName}',
-    computed: {
-      ...mapGetters(["tablebtnSize", "searchSize", "size"]),
-    },
-    data() {
-      return {
-        loading: true,
-        showModel: false,
-        isDetail: false,
-        modelId: 0,
-        parmValue: {
-          loginName: "", // 账户
-          fullName: "", // 姓名
-          type: 2, // 用户类型（1运营人员 2物业人员）
-          page: 1, // 页码
-          size: 10 // 每页显示条数
-        },
-        count: 0, // 总条数
-        tableData: []
-      };
-    },
-    mixins: [mixinPage],
-    mounted() {
-      this.searchList();
-    },
-    components: {
-      addEdit
-    },
-    methods: {
-      restSearch() {
-        this.parmValue = {
-          loginName: "", // 账户
-          fullName: "", // 姓名
-          type: 2, // 用户类型（1运营人员 2物业人员）
-          page: 1, // 页码
-          size: 10 // 每页显示条数
-        };
-        this.searchList();
-      },
-      openModal(id, isDetail) {
-        this.showModel = true;
-        this.modelId = id;
-        this.isDetail = isDetail;
-      },
-      async deleteById(id) {
-        await this.$confirm("确定要删除？", {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          type: "warning"
-        })
-          .then(async () => {
-            let res = await asyncRequest.delete({ id });
-            if (res.code === 0) {
-              this.$notify.success({
-                title: "删除成功",
-                message: ""
-              });
-              this.searchList();
-            }
-          })
-          .catch(() => {
-            console.log("取消");
-          });
-      },
-      async searchList() {
-        this.loading = true;
-        let res = await asyncRequest.list(this.parmValue);
-        if (res.code === 0 && res.data) {
-          this.tableData = res.data.list;
-          this.count = Number(res.data.count);
-        } else {
-          this.tableData = [];
-          this.count = 0;
-        }
-        this.loading = false;
-      },
-      async statusConfirm(id, status) {
-        console.log(id, status);
-        let str= status === "1" ? "禁用" : "启用"
-        await this.$confirm('确定要改为'+str, {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          type: "warning",
-        })
-          .then(async () => {
-            this.loading = true;
-            const model = {
-              id: id,
-              status: status === "1" ? "0" : "1",
-            };
-            const res = await asyncRequest.status(model);
-            if (res.code === 0) {
-              this.loading = false;
-              this.$notify.success({
-                title: "状态修改成功！",
-                message: "",
-              });
-              await this.searchList();
-            } else {
-              this.loading = false;
-            }
-          })
-          .catch(() => {
-            console.log("取消");
-          });
-      },
-    }
-   }
-   </script>
-   <style lang="scss" scoped>
-   .${compoenntName} {
-    
-   }
-   </style>
-   `;
-};

scripts/page/modelPage.js

@@ -1,23 +0,0 @@
-module.exports = function(compoenntName) {
-  return `import asyncService from "@/apis/service/${compoenntName}/index";
-
-    const asyncFn = async (name, data) => {
-      let res = await asyncService[name](data);
-      return res;
-    };
-    export default {
-      // 添加
-      add: async data => await asyncFn("add", data),
-      // 删除
-      delete: async data => await asyncFn("delete", data),
-      // 分页查询
-      list: async data => await asyncFn("list", data),
-      // 详情
-      detail: async data => await asyncFn("detail", data),
-      // 更新
-      update: async data => await asyncFn("update", data),
-      //修改状态
-      status: async data => await asyncFn("accountstatus", data),
-    };
-     `;
-};

scripts/page/servicePage.js

@@ -1,18 +0,0 @@
-module.exports = `// 物业管理员
-import http from "@/apis/axios";
-const api = "admin/";
-export default {
-  // 添加
-  add: (data, params) => http(api + "add", data, "post", params),
-  // 删除
-  delete: (data, params) => http(api + "delete", data, "post", params),
-  // 分页查询
-  list: (data, params) => http(api + "list", data, "post", params),
-  // 详情
-  detail: (data, params) => http(api + "detail", data, "post", params),
-  // 更新
-  update: (data, params) => http(api + "update", data, "post", params),
-  // 修改状态
-  status: (data, params) => http(api + "accountstatus", data, "post", params),
-};
-   `;

scripts/template.js

@@ -1,27 +0,0 @@
-// template.js 文件，放置组件模板的代码
-module.exports = {
-  indexPage: require("./page/indexPage"),
-  addEditPage: require("./page/addEditPage"),
-  servicePage: require("./page/servicePage"),
-  // modelPage: require("./page/modelPage"),
-  vueTemplate: compoenntName => {
-    return `<template>
-    <div class="${compoenntName}">
-    ${compoenntName}组件
-    </div>
-   </template>
-   <script>
-   export default {
-    name: '${compoenntName}'
-   }
-   </script>
-   <style lang="scss" scoped>
-   .${compoenntName} {
-    
-   }
-   </style>
-   `;
-  },
-  entryTemplate: `import Main from './main.vue'
-   export default Main`
-};

src/utils/responseHandle.ts

@@ -1,6 +1,6 @@
 import { ElMessage } from "element-plus";
 
-export function responseHandle({
+export default function responseHandle({
   code,
   message,
   logout,

src/views/system/menuOperator/addEdit.vue

@@ -1,293 +0,0 @@
-<script setup lang="ts">
-import { httpAdd, httpUpdate } from "/@/api/system/menuOperator";
-import { ElMessage, FormInstance, FormRules } from "element-plus";
-import { reactive, ref, watch, nextTick } from "vue";
-import menuType from "./types";
-import { menuTypeList, menuPrivateList } from "/@/utils/status";
-import { useNav } from "/@/layout/hooks/nav";
-import { IconSelect } from "/@/components/ReIcon";
-const { logout } = useNav();
-const ruleFormRef = ref<FormInstance>();
-
-const props = defineProps({
-  itemId: {
-    type: String,
-    default: ""
-  },
-  showModel: {
-    type: Boolean,
-    default: false
-  },
-  isDetails: {
-    type: String,
-    default: "add"
-  },
-  sitem: {
-    type: Object as PropType<menuType>
-  }
-});
-const showModelThis = ref(false);
-const emit = defineEmits<{
-  (e: "cancel"): void;
-  (e: "refresh"): void;
-}>();
-const id = ref("");
-const editType = ref("add");
-const formModel = {
-  id: "",
-  private: "0",
-  menu_img: "eidt",
-  menu_name: "",
-  menu_route: "",
-  menu_type: "",
-  menu_url: "",
-  pid: "",
-  weight: 0
-};
-const ruleForm = reactive<menuType>(formModel);
-const rules = reactive<FormRules>({
-  menu_name: [
-    { required: true, message: "请输入菜单名称", trigger: "blur" },
-    { min: 1, max: 10, message: "长度在 1 到 10 个字符", trigger: "blur" }
-  ],
-  menu_type: [
-    {
-      required: true,
-      message: "请选择菜单类型",
-      trigger: "change"
-    }
-  ],
-  menu_img: [
-    {
-      required: true,
-      message: "请选择菜单图标",
-      trigger: "change"
-    }
-  ],
-  menu_route: [
-    {
-      required: true,
-      message: "请输入菜单路由",
-      trigger: "blur"
-    },
-    { min: 1, max: 50, message: "长度在 1 到 50 个字符", trigger: "blur" }
-  ],
-
-  menu_url: [
-    {
-      required: true,
-      message: "请输入文件地址",
-      trigger: "blur"
-    },
-    { min: 1, max: 100, message: "长度在 1 到 100 个字符", trigger: "blur" }
-  ],
-  private: [
-    {
-      required: true,
-      message: "请选择页面是否显示",
-      trigger: "change"
-    }
-  ],
-  weight: [
-    {
-      required: true,
-      message: "请输入排序权重",
-      trigger: "blur"
-    }
-  ]
-});
-const submitForm = async (formEl: FormInstance | undefined) => {
-  if (!formEl) return;
-  await formEl.validate(async (valid, fields) => {
-    if (valid) {
-      if (loading.value === true) return;
-      loading.value = true;
-      let model = Object.assign({}, ruleForm);
-      model.menu_img = "eidt";
-      const { code, data, message } =
-        editType.value === "add"
-          ? await httpAdd(model)
-          : await httpUpdate(model);
-      if (code === 0) {
-        emit("refresh");
-      } else if (code > 100 && code < 140) {
-        logout();
-      } else {
-        ElMessage.error(message);
-      }
-      loading.value = false;
-      closeDialog();
-    } else {
-      console.log("error submit!", fields);
-    }
-  });
-};
-
-const closeDialog = () => {
-  showModelThis.value = false;
-  emit("cancel");
-};
-
-const loading = ref(true);
-const titleType = ref("");
-const initForm = async () => {
-  loading.value = true;
-  switch (editType.value) {
-    case "add":
-      titleType.value = "新建菜单";
-      break;
-    case "edit":
-      titleType.value = "编辑菜单";
-      break;
-    case "view":
-      titleType.value = "菜单详情";
-      break;
-    default:
-      titleType.value = "新建菜单";
-  }
-  if (id.value !== "" && editType.value === "add") {
-    ruleForm.pid = id.value;
-  }
-
-  loading.value = false;
-};
-const handleChange = (value: number) => {
-  // console.log(value);
-};
-const menu_type_change = () => {
-  const { menu_type } = ruleForm;
-  rules.menu_url[0].required = menu_type === "2";
-};
-watch(
-  () => {
-    return props.showModel;
-  },
-  () => {
-    const { showModel, itemId, isDetails, sitem } = props;
-    showModelThis.value = showModel;
-
-    if (showModelThis.value) {
-      console.log(props);
-      id.value = itemId;
-      editType.value = isDetails;
-      Object.keys(sitem).forEach(key => {
-        ruleForm[key] = sitem[key];
-      });
-      initForm();
-    }
-  }
-);
-</script>
-
-<template>
-  <el-dialog
-    :close-on-press-escape="false"
-    v-model="showModelThis"
-    append-to-body
-    center
-    :width="'700px'"
-    :title="titleType"
-    v-loading="loading"
-    @close="closeDialog"
-  >
-    <el-form
-      ref="ruleFormRef"
-      :model="ruleForm"
-      :rules="rules"
-      label-width="90px"
-      style="margin-top: -10px"
-      class="demo-ruleForm"
-      status-icon
-    >
-      <el-row>
-        <el-col :span="24">
-          <el-form-item label="菜单名称" prop="menu_name">
-            <el-input
-              v-model="ruleForm.menu_name"
-              :disabled="editType === 'view'"
-              placeholder="菜单名称"
-            /> </el-form-item
-        ></el-col>
-        <el-col :span="12">
-          <el-form-item label="菜单类型" prop="menu_type">
-            <el-select
-              v-model="ruleForm.menu_type"
-              style="width: 100%"
-              @change="menu_type_change"
-              :disabled="editType === 'view'"
-              placeholder="菜单类型"
-            >
-              <el-option
-                v-for="(si, sii) in menuTypeList"
-                :key="'type' + si.value + sii"
-                :label="si.label"
-                :value="si.value"
-              />
-            </el-select> </el-form-item
-        ></el-col>
-        <el-col :span="12">
-          <el-form-item label="菜单图标" prop="menu_img">
-            <IconSelect v-model="ruleForm.menu_img" /> </el-form-item
-        ></el-col>
-        <el-col :span="12">
-          <el-form-item label="菜单路由" prop="menu_route">
-            <el-input
-              v-model="ruleForm.menu_route"
-              :disabled="editType === 'view'"
-              placeholder="菜单路由" /></el-form-item
-        ></el-col>
-        <el-col :span="12">
-          <el-form-item label="页面显示" prop="private">
-            <el-radio-group
-              v-model="ruleForm.private"
-              :disabled="editType === 'view'"
-            >
-              <el-radio
-                v-for="(si, sii) in menuPrivateList"
-                :key="si.value + sii"
-                :label="si.value"
-                :value="si.value"
-                >{{ si.label }}</el-radio
-              >
-            </el-radio-group>
-          </el-form-item></el-col
-        >
-
-        <el-col :span="24" v-show="ruleForm.menu_type === '2'">
-          <el-form-item label="页面地址" prop="menu_url">
-            <el-input
-              v-model="ruleForm.menu_url"
-              placeholder="页面地址"
-              :disabled="editType === 'view'"
-            >
-              <template #prepend>views/</template>
-              <template #append>.vue</template></el-input
-            >
-          </el-form-item></el-col
-        >
-
-        <el-col :span="12">
-          <el-form-item label="排序权重" prop="weight">
-            <el-input-number
-              v-model="ruleForm.weight"
-              :precision="0"
-              style="width: 100%"
-              :min="1"
-              :max="999"
-              :disabled="editType === 'view'"
-              @change="handleChange"
-            /> </el-form-item
-        ></el-col>
-      </el-row>
-      <el-col :span="24" class="clear">
-        <el-button
-          type="primary"
-          class="fr"
-          style="margin: 0 0 0 16px"
-          @click="submitForm(ruleFormRef)"
-          >保存</el-button
-        >
-      </el-col>
-    </el-form>
-  </el-dialog>
-</template>

src/views/system/menuOperator/components/action-table.vue

@@ -0,0 +1,168 @@
+<script setup lang="ts">
+import { reactive, ref } from "vue";
+import { useColumns } from "../columns";
+import { handleTree } from "@pureadmin/utils";
+import { httpList, httpStatus, httpDelete } from "/@/api/system/menuOperator";
+import { TableProBar } from "/@/components/ReTable";
+import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
+import { useNav } from "/@/layout/hooks/nav";
+import responseHandle from "/@/utils/responseHandle";
+const { logout } = useNav();
+const { columns } = useColumns();
+const dataList = ref([]);
+const loading = ref(true);
+const tableRef = ref();
+
+const emit = defineEmits(["edit", "create"]);
+//更新状态
+const handleStatus = async row => {
+  const { id, status } = row;
+  const { code, message } = await httpStatus({
+    id,
+    status: status + "" === "1" ? "0" : "1"
+  });
+  responseHandle({
+    code,
+    message,
+    logout,
+    handler: () => onSearch()
+  });
+};
+//删除
+const handleDelete = async row => {
+  const { id } = row;
+  const { code, message } = await httpDelete({
+    id
+  });
+  responseHandle({
+    code,
+    message,
+    logout,
+    handler: () => onSearch()
+  });
+};
+//勾选
+function handleSelectionChange(val) {
+  console.log("handleSelectionChange", val);
+}
+//列表展示
+async function onSearch() {
+  loading.value = true;
+  const { code, data, message } = await httpList({});
+  responseHandle({
+    code,
+    message,
+    logout,
+    handler: () => {
+      console.log(111);
+      dataList.value = handleTree(data ?? []);
+    }
+  });
+  loading.value = false;
+}
+//编辑
+function editItem(id: string, type: "create" | "edit" | "view", item) {
+  emit(id, type, item);
+}
+
+defineExpose({
+  onSearch
+});
+</script>
+
+<template>
+  <div class="main flex" style="width: 100%">
+    <TableProBar
+      title="菜单列表"
+      :loading="loading"
+      :tableRef="tableRef?.getTableRef()"
+      :dataList="dataList"
+      @refresh="onSearch"
+    >
+      <template #buttons>
+        <el-button
+          type="primary"
+          :icon="useRenderIcon('add')"
+          @click="editItem('', 'create', {})"
+        >
+          新增
+        </el-button>
+      </template>
+      <template v-slot="{ size, checkList }">
+        <PureTable
+          ref="tableRef"
+          border
+          align="left"
+          row-key="id"
+          table-layout="auto"
+          default-expand-all
+          :size="size"
+          :data="dataList"
+          :columns="columns"
+          :checkList="checkList"
+          :tree-props="{ hasChildren: 'hasChildren', children: 'child' }"
+          :header-cell-style="{ background: '#fafafa', color: '#606266' }"
+          @selection-change="handleSelectionChange"
+        >
+          <template #operation="{ row }">
+            <el-button
+              class="reset-margin"
+              link
+              type="primary"
+              :size="size"
+              @click="editItem(row.id, 'view', row)"
+              :icon="useRenderIcon('eye-view')"
+            />
+            <el-button
+              class="reset-margin"
+              link
+              type="primary"
+              :size="size"
+              @click="editItem(row.id, 'edit', row)"
+              :icon="useRenderIcon('edits')"
+            />
+            <el-popconfirm
+              :title="row.status === '1' ? '改为禁用？' : '改为启用？'"
+              @confirm="handleStatus(row)"
+            >
+              <template #reference>
+                <el-button
+                  class="reset-margin"
+                  link
+                  type="primary"
+                  :size="size"
+                  :icon="
+                    useRenderIcon(
+                      row.status === '1'
+                        ? 'close-circle-line'
+                        : 'checkbox-circle-line'
+                    )
+                  "
+                /> </template
+            ></el-popconfirm>
+            <el-popconfirm title="是否确认删除?" @confirm="handleDelete(row)">
+              <template #reference>
+                <el-button
+                  class="reset-margin"
+                  link
+                  type="primary"
+                  :size="size"
+                  :icon="useRenderIcon('delete')"
+                />
+              </template>
+            </el-popconfirm>
+            <el-button
+              v-if="row.menu_type + '' === '1'"
+              class="reset-margin"
+              link
+              type="primary"
+              :size="size"
+              @click="editItem(row.id, 'create', {})"
+              :icon="useRenderIcon('add')"
+            />
+          </template>
+        </PureTable>
+      </template>
+    </TableProBar>
+  </div>
+</template>

src/views/system/menuOperator/components/edit-dialog.vue

@@ -0,0 +1,280 @@
+<script setup lang="ts">
+import { FormRules, ElForm } from "element-plus";
+import { computed, reactive, ref } from "vue";
+import { httpUpdate, httpAdd } from "/@/api/system/buttonOperator";
+import responseHandle from "/@/utils/responseHandle";
+import { useNav } from "/@/layout/hooks/nav";
+import { IMenuTree } from "../types";
+
+enum FROM_TYPE {
+  create = "create",
+  edit = "edit",
+  view = "view"
+}
+const { logout } = useNav();
+const showModel = ref(false);
+const currentMenuId = ref("");
+const TYPE = ref<FROM_TYPE>(FROM_TYPE.create);
+const formRef = ref<InstanceType<typeof ElForm>>(null);
+const currentNode = ref<IMenuTree | null>(null);
+const loading = ref(false);
+const titleType = ref("");
+
+const emit = defineEmits(["reload"]);
+
+const ruleForm = ref({
+  action_code: "",
+  status: ""
+});
+
+// const action_name = computed(() => {
+//   return btnList.filter(b => b.code === ruleForm.value.action_code)[0].name;
+// });
+const rules = reactive<FormRules>({
+  menu_name: [
+    { required: true, message: "请输入菜单名称", trigger: "blur" },
+    { min: 1, max: 10, message: "长度在 1 到 10 个字符", trigger: "blur" }
+  ],
+  menu_type: [
+    {
+      required: true,
+      message: "请选择菜单类型",
+      trigger: "change"
+    }
+  ],
+  menu_img: [
+    {
+      required: true,
+      message: "请选择菜单图标",
+      trigger: "change"
+    }
+  ],
+  menu_route: [
+    {
+      required: true,
+      message: "请输入菜单路由",
+      trigger: "blur"
+    },
+    { min: 1, max: 50, message: "长度在 1 到 50 个字符", trigger: "blur" }
+  ],
+
+  menu_url: [
+    {
+      required: true,
+      message: "请输入文件地址",
+      trigger: "blur"
+    },
+    { min: 1, max: 100, message: "长度在 1 到 100 个字符", trigger: "blur" }
+  ],
+  private: [
+    {
+      required: true,
+      message: "请选择页面是否显示",
+      trigger: "change"
+    }
+  ],
+  weight: [
+    {
+      required: true,
+      message: "请输入排序权重",
+      trigger: "blur"
+    }
+  ]
+});
+
+function show(node: any, isCreate) {
+  showModel.value = true;
+  currentNode.value = node;
+  Object.keys(ruleForm.value).forEach(key => {
+    ruleForm.value[key] = isCreate ? "" : node[key];
+  });
+
+  TYPE.value = isCreate;
+  switch (TYPE.value) {
+    case "create":
+      titleType.value = "新建菜单";
+      break;
+    case "edit":
+      titleType.value = "编辑菜单";
+      break;
+    case "view":
+      titleType.value = "菜单详情";
+      break;
+    default:
+      titleType.value = "新建菜单";
+  }
+  // if (id.value !== "" && editType.value === "add") {
+  //   ruleForm.value.pid = id.value;
+  // }
+}
+
+function handleUpdate() {
+  const data = {
+    menuid: currentMenuId.value,
+    id: currentNode.value.id,
+    // action_name: action_name.value,
+    ...ruleForm.value
+  };
+
+  return {
+    data,
+    api: httpUpdate
+  };
+}
+
+function handleCreate() {
+  const data = {
+    menuid: currentMenuId.value,
+    // action_name: action_name.value,
+    ...ruleForm.value
+  };
+
+  return {
+    data,
+    api: httpAdd
+  };
+}
+
+function handleSave() {
+  formRef.value.validate(async vaild => {
+    if (vaild) {
+      if (showModel.value) return;
+      const handler =
+        TYPE.value === FROM_TYPE.create ? handleCreate : handleUpdate;
+
+      loading.value = true;
+      const { api, data } = handler();
+
+      const { message, code } = await api(data);
+
+      responseHandle({
+        code,
+        message,
+        logout,
+        handler: () => {
+          emit("reload");
+        }
+      });
+
+      showModel.value = false;
+      loading.value = false;
+    }
+  });
+}
+
+defineExpose({
+  show,
+  changeCurrentMenuId: (id: string) => (currentMenuId.value = id)
+});
+</script>
+
+<template>
+  <div>
+    <el-dialog
+      v-model="showModel"
+      append-to-body
+      :close-on-press-escape="false"
+      center
+      :width="'700px'"
+      :title="titleType"
+      v-loading="loading"
+    >
+      <el-form
+        ref="ruleFormRef"
+        :model="ruleForm"
+        :rules="rules"
+        label-width="90px"
+        style="margin-top: -10px"
+        class="demo-ruleForm"
+        status-icon
+      >
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="菜单名称" prop="menu_name">
+              <el-input
+                v-model="ruleForm.menu_name"
+                :disabled="editType === 'view'"
+                placeholder="菜单名称"
+              /> </el-form-item
+          ></el-col>
+          <el-col :span="12">
+            <el-form-item label="菜单类型" prop="menu_type">
+              <el-select
+                v-model="ruleForm.menu_type"
+                style="width: 100%"
+                @change="menu_type_change"
+                :disabled="editType === 'view'"
+                placeholder="菜单类型"
+              >
+                <el-option
+                  v-for="(si, sii) in menuTypeList"
+                  :key="'type' + si.value + sii"
+                  :label="si.label"
+                  :value="si.value"
+                />
+              </el-select> </el-form-item
+          ></el-col>
+          <el-col :span="12">
+            <el-form-item label="菜单图标" prop="menu_img">
+              <IconSelect v-model="ruleForm.menu_img" /> </el-form-item
+          ></el-col>
+          <el-col :span="12">
+            <el-form-item label="菜单路由" prop="menu_route">
+              <el-input
+                v-model="ruleForm.menu_route"
+                :disabled="editType === 'view'"
+                placeholder="菜单路由" /></el-form-item
+          ></el-col>
+          <el-col :span="12">
+            <el-form-item label="页面显示" prop="private">
+              <el-radio-group
+                v-model="ruleForm.private"
+                :disabled="editType === 'view'"
+              >
+                <el-radio
+                  v-for="(si, sii) in menuPrivateList"
+                  :key="si.value + sii"
+                  :label="si.value"
+                  :value="si.value"
+                  >{{ si.label }}</el-radio
+                >
+              </el-radio-group>
+            </el-form-item></el-col
+          >
+
+          <el-col :span="24" v-show="ruleForm.menu_type === '2'">
+            <el-form-item label="页面地址" prop="menu_url">
+              <el-input
+                v-model="ruleForm.menu_url"
+                placeholder="页面地址"
+                :disabled="editType === 'view'"
+              >
+                <template #prepend>views/</template>
+                <template #append>.vue</template></el-input
+              >
+            </el-form-item></el-col
+          >
+
+          <el-col :span="12">
+            <el-form-item label="排序权重" prop="weight">
+              <el-input-number
+                v-model="ruleForm.weight"
+                :precision="0"
+                style="width: 100%"
+                :min="1"
+                :max="999"
+                :disabled="editType === 'view'"
+                @change="handleChange"
+              /> </el-form-item
+          ></el-col>
+        </el-row>
+        <div class="flex justify-end">
+          <el-button :loading="loading" type="primary" @click="handleSave"
+            >保存</el-button
+          >
+          <el-button @click="showModel = false">取消</el-button>
+        </div>
+      </el-form>
+    </el-dialog>
+  </div>
+</template>

src/views/system/menuOperator/index.vue

@@ -1,208 +1,32 @@
 <script setup lang="ts">
-import { useColumns } from "./columns";
-import { handleTree } from "@pureadmin/utils";
-import { httpList, httpStatus, httpDelete } from "/@/api/system/menuOperator";
 import { ref, onMounted } from "vue";
-import { TableProBar } from "/@/components/ReTable";
-import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
-import menuType from "./types";
-import { useNav } from "/@/layout/hooks/nav";
-import addEdit from "./addEdit.vue";
-import { actionWithSuccess } from "/@/utils/actionWithSuccess";
-const { logout } = useNav();
+import ActionTable from "./components/action-table.vue";
+import EditModel from "./components/edit-dialog.vue";
 
-const sitem = {};
-const dataList = ref([]);
-const loading = ref(true);
-const showModel = ref(false);
-const itemId = ref("");
-const isDetails = ref("add");
-const { columns } = useColumns();
+const actionTableRef = ref<InstanceType<typeof ActionTable>>(null);
+const modelRef = ref<InstanceType<typeof EditModel>>(null);
 
-const tableRef = ref();
-
-const handleUpdate = async row => {
-  const { id, status } = row;
-  const { code, message } = await httpStatus({
-    id,
-    status: status + "" === "1" ? "0" : "1"
-  });
-  actionWithSuccess({
-    code,
-    message,
-    logout,
-    handler: () => onSearch()
-  });
-};
-
-const handleDelete = async row => {
-  const { id } = row;
-  const { code, message } = await httpDelete({
-    id
-  });
-  actionWithSuccess({
-    code,
-    message,
-    logout,
-    handler: () => onSearch()
-  });
-};
-
-function handleSelectionChange(val) {
-  console.log("handleSelectionChange", val);
-}
-function editItem(id, type, item) {
-  itemId.value = id;
-  isDetails.value = type;
-  for (let key in item) {
-    sitem[key] = item[key];
-  }
-  showModel.value = true;
+//编辑
+function handleEdit(item: any) {
+  modelRef.value.show(item.id, "edit", item);
 }
 
-const submitRefresh = () => {
-  showModel.value = false;
-  onSearch();
-};
-const submitCancel = () => {
-  showModel.value = false;
-};
-
-const onSearch = async () => {
-  loading.value = true;
-  const { code, data, message } = await httpList({});
-  actionWithSuccess({
-    code,
-    message,
-    logout,
-    handler: () => {
-      dataList.value = handleTree(data ?? []);
-    }
-  });
-  loading.value = false;
-};
-
-const resetForm = () => {
-  onSearch();
-};
-
+//新建
+function handleCreate() {
+  modelRef.value.show("", "create", {});
+}
 onMounted(() => {
-  onSearch();
+  actionTableRef.value.onSearch();
 });
 </script>
 
 <template>
-  <div class="main">
-    <TableProBar
-      title="菜单列表"
-      :loading="loading"
-      :tableRef="tableRef?.getTableRef()"
-      :dataList="dataList"
-      @refresh="onSearch"
-    >
-      <template #buttons>
-        <el-button
-          type="primary"
-          :icon="useRenderIcon('add')"
-          @click="editItem('', 'add', {})"
-        >
-          新增
-        </el-button>
-        <el-button
-          type="primary"
-          :icon="useRenderIcon('search')"
-          :loading="loading"
-          @click="onSearch"
-        >
-          搜索
-        </el-button>
-        <el-button :icon="useRenderIcon('refresh')" @click="resetForm()">
-          重置
-        </el-button>
-      </template>
-      <template v-slot="{ size, checkList }">
-        <PureTable
-          ref="tableRef"
-          border
-          align="left"
-          row-key="id"
-          table-layout="auto"
-          default-expand-all
-          :size="size"
-          :data="dataList"
-          :columns="columns"
-          :checkList="checkList"
-          :tree-props="{ hasChildren: 'hasChildren', children: 'child' }"
-          :header-cell-style="{ background: '#fafafa', color: '#606266' }"
-          @selection-change="handleSelectionChange"
-        >
-          <template #operation="{ row }">
-            <el-button
-              class="reset-margin"
-              link
-              type="primary"
-              :size="size"
-              @click="editItem(row.id, 'view', row)"
-              :icon="useRenderIcon('eye-view')"
-            />
-            <el-button
-              class="reset-margin"
-              link
-              type="primary"
-              :size="size"
-              @click="editItem(row.id, 'edit', row)"
-              :icon="useRenderIcon('edits')"
-            />
-            <el-popconfirm
-              :title="row.status === '1' ? '改为禁用？' : '改为启用？'"
-              @confirm="handleUpdate(row)"
-            >
-              <template #reference>
-                <el-button
-                  class="reset-margin"
-                  link
-                  type="primary"
-                  :size="size"
-                  :icon="
-                    useRenderIcon(
-                      row.status === '1'
-                        ? 'close-circle-line'
-                        : 'checkbox-circle-line'
-                    )
-                  "
-                /> </template
-            ></el-popconfirm>
-            <el-popconfirm title="是否确认删除?" @confirm="handleDelete(row)">
-              <template #reference>
-                <el-button
-                  class="reset-margin"
-                  link
-                  type="primary"
-                  :size="size"
-                  :icon="useRenderIcon('delete')"
-                />
-              </template>
-            </el-popconfirm>
-            <el-button
-              v-if="row.menu_type + '' === '1'"
-              class="reset-margin"
-              link
-              type="primary"
-              :size="size"
-              @click="editItem(row.id, 'add', {})"
-              :icon="useRenderIcon('add')"
-            />
-          </template>
-        </PureTable>
-      </template>
-    </TableProBar>
-    <addEdit
-      :itemId="itemId"
-      :isDetails="isDetails"
-      :show-model="showModel"
-      @refresh="submitRefresh"
-      @cancel="submitCancel"
-      :sitem="sitem"
+  <div class="main flex">
+    <ActionTable
+      ref="actionTableRef"
+      @edit="handleEdit"
+      @create="handleCreate"
     />
+    <EditModel ref="modelRef" @reload="actionTableRef.onSearch()" />
   </div>
 </template>