新增组件

package.json

@@ -13,6 +13,7 @@
         "vue": "^3.2.13",
         "vue-class-component": "^8.0.0-0",
         "element-plus": "2.2.18",
+        "axios": "^0.19.2",
         "vue-router": "^4.0.3",
         "vuex": "^4.0.0"
     },

packages/index.ts

@@ -1,4 +1,6 @@
 import WkbTag from './tag';
 import ListTable from './list-table';
+import SearchRow from './search-row';
+import ModifyForm from './modify-form';
 
-export { WkbTag, ListTable };
+export { WkbTag, ListTable, SearchRow };

packages/modify-form/index.ts

@@ -0,0 +1,2 @@
+import ModifyForm from "./src/modifyForm.vue"
+export default ModifyForm;

packages/modify-form/src/modifyForm.vue

@@ -0,0 +1,66 @@
+<template>
+    <div class="modify-form">
+        <el-form label-position="right" :class="class" :label-width="width ? width + 'px' : ''" :model="param"
+            ref="modifyForm" :rules="rules">
+            <slot></slot>
+            <el-form-item class="form-btns">
+                <el-button type="info" @click="formConfirm">确定</el-button>
+                <el-button type="info" @click="emit('cancel')">取消</el-button>
+            </el-form-item>
+        </el-form>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref, watch } from "vue";
+import { FormInstance } from "element-plus";
+
+const prop = defineProps({
+    width: {
+        type: Number,
+        default: 80,
+    },
+    param: {
+        type: Object,
+        default: {},
+    },
+    rules: {
+        type: Object,
+        default: {},
+    },
+    class: {
+        type: String,
+        default: '',
+    },
+});
+const emit = defineEmits(["confirm", "cancel"]);
+const modifyForm = ref<FormInstance>();
+
+const formConfirm = () => {
+    if (!modifyForm.value) return;
+    modifyForm.value?.validate((valid, fields) => {
+        if (valid) {
+            emit("confirm");
+        }
+    });
+};
+
+const clearValidate = () => {
+    modifyForm.value?.clearValidate();
+}
+
+watch(() => prop.param, () => {
+    modifyForm.value?.clearValidate();
+});
+
+onMounted(() => {
+});
+</script>
+<style lang="scss" scoped>
+//@import url(); 引入公共css类
+.modify-form {
+    .el-select {
+        width: 100%;
+    }
+}
+</style>

packages/search-row/index.ts

@@ -0,0 +1,2 @@
+import SearchRow from "./src/searchRow.vue"
+export default SearchRow;

packages/search-row/src/searchRow.vue

@@ -0,0 +1,63 @@
+<template>
+    <div class="search-row">
+        <div class="left">
+            <span class="title" v-if="title">{{ title }}</span>
+            <el-button v-if="fresh" type="info" icon="Refresh" @click="emit('query')"> </el-button>
+            <el-button v-if="add" type="primary" icon="Plus" @click="emit('add')"> 添加 </el-button>
+            <el-button v-if="del" type="danger" icon="Delete" @click="emit('delete')"> 删除 </el-button>
+            <slot name="left"></slot>
+        </div>
+        <div class="query">
+            <slot></slot>
+            <el-button v-if="query" type="primary" icon="Search" @click="emit('query')"> 查询 </el-button>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, defineProps, defineEmits } from "vue";
+const prop = defineProps({
+    title: {
+        type: String,
+        default: null
+    },
+    fresh: {
+        type: Boolean,
+        default: true,
+    },
+    add: {
+        type: Boolean,
+        default: true,
+    },
+    del: {
+        type: Boolean,
+        default: true,
+    },
+    query: {
+        type: Boolean,
+        default: true,
+    },
+});
+
+const emit = defineEmits(["query", "add", "delete"]);
+
+onMounted(() => { });
+</script>
+<style lang="scss" scoped>
+//@import url(); 引入公共css类
+.query {
+    text-align: right;
+    float: right;
+}
+
+.left {
+    float: left;
+}
+
+.title {
+    font-weight: bold;
+    padding-right: 15px;
+    font-size: 20px;
+    min-width: 20px;
+}
+</style>

yarn.lock

@@ -1991,6 +1991,13 @@ autoprefixer@^10.2.4:
     picocolors "^1.0.0"
     postcss-value-parser "^4.2.0"
 
+axios@^0.19.2:
+  version "0.19.2"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.19.2.tgz#3ea36c5d8818d0d5f8a8a97a6d36b86cdc00cb27"
+  integrity sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==
+  dependencies:
+    follow-redirects "1.5.10"
+
 babel-loader@^8.2.2:
   version "8.3.0"
   resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.3.0.tgz#124936e841ba4fe8176786d6ff28add1f134d6a8"
@@ -2640,6 +2647,13 @@ debug@2.6.9:
   dependencies:
     ms "2.0.0"
 
+debug@=3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
+  integrity sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==
+  dependencies:
+    ms "2.0.0"
+
 debug@^3.2.7:
   version "3.2.7"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
@@ -3094,6 +3108,13 @@ find-up@^4.0.0, find-up@^4.1.0:
     locate-path "^5.0.0"
     path-exists "^4.0.0"
 
+follow-redirects@1.5.10:
+  version "1.5.10"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.5.10.tgz#7b7a9f9aea2fdff36786a94ff643ed07f4ff5e2a"
+  integrity sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==
+  dependencies:
+    debug "=3.1.0"
+
 follow-redirects@^1.0.0:
   version "1.15.2"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.2.tgz#b460864144ba63f2681096f274c4e57026da2c13"