调整 crud 部分写法

This commit is contained in:
icssoa 2022-08-21 02:03:01 +08:00
parent 83859b685a
commit 31fa1f43b3
10 changed files with 84 additions and 109 deletions

View File

@ -1,6 +1,6 @@
{
"name": "front-next",
"version": "5.8.1",
"version": "5.9.0",
"scripts": {
"dev": "vite --host",
"build": "vite build",
@ -11,7 +11,7 @@
"dependencies": {
"@codemirror/lang-javascript": "^6.0.1",
"@codemirror/theme-one-dark": "^6.0.0",
"@cool-vue/crud": "^5.4.0",
"@cool-vue/crud": "^5.5.4",
"@element-plus/icons-vue": "^2.0.6",
"@vueuse/core": "^9.1.0",
"@wangeditor/editor": "^5.1.14",

View File

@ -136,7 +136,9 @@ onBeforeUnmount(() => {
<style lang="scss" scoped>
.cl-editor-wang {
border: 1px solid var(--el-border-color);
border-radius: var(--el-border-radius-base);
box-sizing: border-box;
overflow: hidden;
:deep(.w-e-toolbar) {
border-bottom: 1px solid var(--el-border-color);

View File

@ -14,7 +14,6 @@
label: 'name',
children: 'children'
}"
:default-checked-keys="checked"
:filter-node-method="filterNode"
:check-strictly="checkStrictly"
@check="onCheckChange"
@ -24,10 +23,10 @@
</template>
<script lang="ts" name="dept-check" setup>
import { onMounted, ref, watch } from "vue";
import { ref, watch } from "vue";
import { deepTree } from "/@/cool/utils";
import { ElMessage } from "element-plus";
import { useCool } from "/@/cool";
import { useUpsert } from "@cool-vue/crud";
const props = defineProps({
modelValue: {
@ -45,24 +44,16 @@ const { service } = useCool();
const Tree = ref();
//
const list = ref<any[]>([]);
//
const checked = ref();
const list = ref();
//
const keyword = ref("");
//
function refresh() {
service.base.sys.department
.list()
.then((res) => {
list.value = deepTree(res);
})
.catch((err) => {
ElMessage.error(err.message);
});
async function refresh() {
return service.base.sys.department.list().then((res) => {
list.value = deepTree(res);
});
}
//
@ -81,16 +72,11 @@ watch(keyword, (val: string) => {
Tree.value.filter(val);
});
//
watch(
() => props.modelValue,
(val) => {
checked.value = val || [];
useUpsert({
async onOpened() {
await refresh();
Tree.value.setCheckedKeys(props.modelValue || []);
}
);
onMounted(() => {
refresh();
});
</script>

View File

@ -12,7 +12,6 @@
label: 'name',
children: 'children'
}"
:default-checked-keys="checked"
:filter-node-method="filterNode"
@check="onCheckChange"
/>
@ -21,10 +20,10 @@
</template>
<script lang="ts" name="menu-check" setup>
import { onMounted, ref, watch } from "vue";
import { ElMessage } from "element-plus";
import { ref, watch } from "vue";
import { deepTree } from "/@/cool/utils";
import { useCool } from "/@/cool";
import { useUpsert } from "@cool-vue/crud";
const props = defineProps({
modelValue: {
@ -37,28 +36,20 @@ const emit = defineEmits(["update:modelValue"]);
const { service } = useCool();
//
const list = ref<any[]>([]);
// el-tree
const Tree = ref();
//
const checked = ref<any[]>([]);
//
const list = ref();
//
const keyword = ref("");
// el-tree
const Tree = ref();
//
function refresh() {
service.base.sys.menu
.list()
.then((res) => {
list.value = deepTree(res);
})
.catch((err) => {
ElMessage.error(err.message);
});
async function refresh() {
return service.base.sys.menu.list().then((res) => {
list.value = deepTree(res);
});
}
//
@ -77,16 +68,13 @@ watch(keyword, (val: string) => {
Tree.value.filter(val);
});
//
watch(
() => props.modelValue,
(val) => {
checked.value = (val || []).filter((e) => Tree.value.getNode(e)?.isLeaf);
useUpsert({
async onOpened() {
await refresh();
Tree.value.setCheckedKeys(
(props.modelValue || []).filter((e) => Tree.value.getNode(e)?.isLeaf)
);
}
);
onMounted(() => {
refresh();
});
</script>

View File

@ -114,24 +114,21 @@ const Upsert = useUpsert({
prop: "name",
label: "名称",
span: 12,
required: true,
component: {
name: "el-input"
},
required: true
}
},
{
prop: "keyName",
label: "keyName",
span: 12,
required: true,
component: {
name: "el-input",
props: {
placeholder: "请输入Key"
}
},
rules: {
required: true,
message: "Key不能为空"
}
},
{
@ -155,14 +152,14 @@ const Upsert = useUpsert({
}
],
onOpened(isEdit, data) {
onOpened(data) {
tab.index = null;
nextTick(() => {
if (isEdit) {
tab.index = /<*>/g.test(data.data) ? 1 : 0;
} else {
if (Upsert.value?.mode == "add") {
tab.index = 1;
} else {
tab.index = /<*>/g.test(data.data) ? 1 : 0;
}
});
}

View File

@ -103,19 +103,26 @@ const Upsert = useUpsert({
},
{
label: "数据权限",
prop: "relevance",
flex: false,
component: {
name: "slot-relevance"
}
},
{
label: "",
prop: "departmentIdList",
value: [],
component: {
vm: DeptCheck,
props: {}
},
append: {
name: "slot-relevance"
style: {
marginTop: "-10px"
}
}
}
],
onOpened(_, data) {
onOpened(data) {
onRelevanceChange(data.relevance || 0);
}
});

View File

@ -214,24 +214,26 @@ const Upsert = useUpsert({
name: "el-input"
}
},
{
prop: "password",
label: "密码",
span: 12,
required: true,
component: {
name: "el-input",
props: {
type: "password"
}
},
rules: [
{
min: 6,
max: 16,
message: "密码长度在 6 到 16 个字符"
}
]
() => {
return {
prop: "password",
label: "密码",
span: 12,
required: Upsert.value?.mode == "add",
component: {
name: "el-input",
props: {
type: "password"
}
},
rules: [
{
min: 6,
max: 16,
message: "密码长度在 6 到 16 个字符"
}
]
};
},
{
prop: "roleIdList",
@ -294,14 +296,14 @@ const Upsert = useUpsert({
}
],
onSubmit(_, data, { next }) {
onSubmit(data, { next }) {
next({
...data,
departmentId: selects.dept?.id
});
},
async onOpen(isEdit) {
async onOpen() {
const list = await service.base.sys.role.list();
//
@ -314,15 +316,6 @@ const Upsert = useUpsert({
};
})
);
//
if (isEdit) {
Upsert.value?.setData("password", {
rules: {
required: false
}
});
}
}
});

View File

@ -119,13 +119,13 @@ const Upsert = useUpsert({
// done({ name: "🐑" });
// close();
},
onSubmit(isEdit, data, { next }) {
console.log(isEdit, data);
onSubmit(data, { next }) {
console.log(data);
next(data);
// Upsert.value?.close();
},
onOpen(isEdit, data) {
console.log(isEdit, data);
onOpen(data) {
console.log(data);
},
onClose(done) {
console.log("onclose");

View File

@ -1,5 +1,5 @@
import { defineStore } from "pinia";
import { computed, reactive } from "vue";
import { computed, reactive, toRaw } from "vue";
import { isDev, service } from "/@/cool";
declare interface Data {
@ -36,7 +36,9 @@ export const useDictStore = defineStore("dict", () => {
Object.assign(data, d);
if (isDev) {
console.log("字典数据", data);
console.group("字典数据");
console.log(toRaw(data));
console.groupEnd();
}
return data;

View File

@ -1052,10 +1052,10 @@
style-mod "^4.0.0"
w3c-keyname "^2.2.4"
"@cool-vue/crud@^5.4.0":
version "5.4.0"
resolved "https://registry.npmjs.org/@cool-vue/crud/-/crud-5.4.0.tgz#2c174c9184ad7bd34fb4faf981e3406d3ef05bf0"
integrity sha512-7su1XhOMaRZbwbmVb9UOxxsyUB5bug7BRtu3Gpz/2sOVkolCsJJBqDqF8K5wiLmx1/ZXtjbzK797AywoMIpzyA==
"@cool-vue/crud@^5.5.4":
version "5.5.4"
resolved "https://registry.npmjs.org/@cool-vue/crud/-/crud-5.5.4.tgz#f6874c46fa76494a9255249d64656ab9f22c7554"
integrity sha512-Z5s+OL/DQiFfKmhSns6g84MdVKlnatLnlGXFFJr9Y/WpCsbnLzdjIQsA7YKNzVGWuKVCPxc2Zd18QjYwWu97WA==
dependencies:
array.prototype.flat "^1.2.4"
core-js "^3.21.1"