public/FastapiAdmin
1
0
Fork 0
mirror of https://github.com/fastapiadmin/FastapiAdmin.git synced 2026-10-08 18:49:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: 升级Vue SFC深度选择器语法为::v-deep

Browse Source 
本次提交将项目中所有使用`::deep`的CSS深度选择器统一替换为Vue 3官方推荐的`::v-deep`语法，修复了旧版语法在新版本Vue生态中的兼容性问题，同时修正了部分组件的响应式表单定义方式，将`reactive`配合`Object.assign`的写法调整为更符合Vue 3组合式API规范的`ref`响应式状态写法，整体优化了代码的可维护性和兼容性。
This commit is contained in:
zhangtao
2026-05-11 15:46:18 +08:00
parent 4112942a14
commit 80d4f18e8b
64 changed files with 510 additions and 501 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/web/src/views/current/profile.vue
+1 -1
View File
@@ -609,7 +609,7 @@ onMounted(async () => {
bottom: 0;
z-index: 2;
::deep(.el-upload) {
::v-deep(.el-upload) {
display: inline-flex;
}
frontend/web/src/views/dashboard/article/components/ArticleDetailDrawer.vue
+5 -5
View File
@@ -127,12 +127,12 @@ watch(
.article-detail-markdown {
margin-top: 8px;
::deep(img) {
::v-deep(img) {
width: 100%;
border: 1px solid var(--fa-gray-200);
}
::deep(pre) {
::v-deep(pre) {
position: relative;
&:hover {
@@ -152,11 +152,11 @@ watch(
}
}
::deep(.code-wrapper) {
::v-deep(.code-wrapper) {
overflow-x: auto;
}
::deep(.line-number) {
::v-deep(.line-number) {
position: sticky;
left: 0;
z-index: 2;
@@ -169,7 +169,7 @@ watch(
text-align: center;
}
::deep(.copy-button) {
::v-deep(.copy-button) {
position: absolute;
top: 6px;
right: 6px;
frontend/web/src/views/dashboard/console/modules/new-user.vue
+1 -1
View File
@@ -164,7 +164,7 @@ onMounted(() => {
<style lang="scss" scoped>
.fa-card {
::deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
::v-deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
color: var(--el-color-primary) !important;
background: transparent !important;
}
frontend/web/src/views/dashboard/index.vue
+7 -7
View File
@@ -727,13 +727,13 @@ const currentUser = {
border: 1px solid var(--el-border-color-lighter);
border-radius: var(--workplace-radius);
::deep(.el-card__header) {
::v-deep(.el-card__header) {
border-bottom-color: var(--el-border-color-extra-light);
}
}
.workplace-calendar-card {
::deep(.el-card__body) {
::v-deep(.el-card__body) {
padding: 8px 10px 10px;
}
}
@@ -756,7 +756,7 @@ const currentUser = {
/* —— 顶栏 —— */
.workplace-hero-card {
::deep(.el-card__body) {
::v-deep(.el-card__body) {
padding: 20px 22px;
}
}
@@ -841,7 +841,7 @@ const currentUser = {
}
.workplace-modules-card {
::deep(.el-card__body) {
::v-deep(.el-card__body) {
display: flex;
flex: 1;
flex-direction: column;
@@ -857,7 +857,7 @@ const currentUser = {
}
.workplace-bookmarks-card {
::deep(.el-card__body) {
::v-deep(.el-card__body) {
display: flex;
flex: 1;
flex-direction: column;
@@ -937,7 +937,7 @@ const currentUser = {
}
.workplace-section-card {
::deep(.el-card__body) {
::v-deep(.el-card__body) {
padding: 12px 18px 18px;
}
}
@@ -976,7 +976,7 @@ const currentUser = {
width: 100%;
min-width: 0;
::deep(.el-card__body) {
::v-deep(.el-card__body) {
display: flex;
flex: 1;
flex-direction: column;
frontend/web/src/views/dashboard/tutorial/index.vue
+1 -1
View File
@@ -1012,7 +1012,7 @@ function handleAnchorClick(ev: MouseEvent) {
&__tabs {
width: 100%;
::deep(.el-tab-pane) {
::v-deep(.el-tab-pane) {
box-sizing: border-box;
}
}
frontend/web/src/views/module_ai/chat/components/ChatInput.vue
+2 -2
View File
@@ -225,7 +225,7 @@ defineExpose({
flex: 1;
min-width: 0;
::deep(.el-textarea__inner) {
::v-deep(.el-textarea__inner) {
padding: 0;
line-height: 1.6;
color: var(--el-text-color-primary);
@@ -235,7 +235,7 @@ defineExpose({
box-shadow: none;
}
::deep(.el-textarea) {
::v-deep(.el-textarea) {
padding: 0;
}
}
frontend/web/src/views/module_ai/chat/components/ChatNavbar.vue
+2 -2
View File
@@ -145,7 +145,7 @@ const toggleSidebar = () => {
align-items: center;
/* EP 相邻按钮自带 margin-left，叠在 flex gap 上会导致间距忽大忽小 */
::deep(.el-button) {
::v-deep(.el-button) {
margin: 0;
}
@@ -159,7 +159,7 @@ const toggleSidebar = () => {
font-size: 14px;
line-height: 1;
::deep(.el-tag__content) {
::v-deep(.el-tag__content) {
display: inline-flex;
gap: 6px;
align-items: center;
frontend/web/src/views/module_ai/chat/components/MessageItem.vue
+11 -11
View File
@@ -371,7 +371,7 @@ const formatFileSize = (bytes: number): string => {
}
}
::deep(pre) {
::v-deep(pre) {
padding: 12px;
margin: 12px 0;
overflow-x: auto;
@@ -384,7 +384,7 @@ const formatFileSize = (bytes: number): string => {
}
}
::deep(code) {
::v-deep(code) {
padding: 2px 6px;
font-family: "Courier New", Courier, monospace;
font-size: 13px;
@@ -392,21 +392,21 @@ const formatFileSize = (bytes: number): string => {
border-radius: 3px;
}
::deep(p) {
::v-deep(p) {
margin: 8px 0;
}
::deep(ul),
::deep(ol) {
::v-deep(ul),
::v-deep(ol) {
padding-left: 24px;
margin: 8px 0;
}
::deep(li) {
::v-deep(li) {
margin: 4px 0;
}
::deep(a) {
::v-deep(a) {
color: var(--el-color-primary);
text-decoration: none;
@@ -415,14 +415,14 @@ const formatFileSize = (bytes: number): string => {
}
}
::deep(blockquote) {
::v-deep(blockquote) {
padding: 8px 16px;
margin: 12px 0;
background: var(--el-fill-color-light);
border-left: 4px solid var(--el-color-primary);
}
::deep(table) {
::v-deep(table) {
width: 100%;
margin: 12px 0;
border-collapse: collapse;
@@ -501,11 +501,11 @@ const formatFileSize = (bytes: number): string => {
background: linear-gradient(transparent, var(--el-color-primary-light-9));
}
::deep(pre) {
::v-deep(pre) {
border: 1px solid var(--el-border-color-lighter);
}
::deep(code:not(pre code)) {
::v-deep(code:not(pre code)) {
border: 1px solid var(--el-border-color-lighter);
}
}
frontend/web/src/views/module_ai/chat/components/Sidebar.vue
+2 -2
View File
@@ -400,7 +400,7 @@ defineExpose({
.search-section {
margin-bottom: 16px;
::deep(.el-input__wrapper) {
::v-deep(.el-input__wrapper) {
border-radius: 20px;
box-shadow: 0 0 0 1px var(--el-border-color) inset;
transition: all 0.2s ease;
@@ -414,7 +414,7 @@ defineExpose({
}
}
::deep(.el-input__inner) {
::v-deep(.el-input__inner) {
font-size: 13px;
}
}
frontend/web/src/views/module_ai/memory/index.vue
+6 -6
View File
@@ -422,7 +422,7 @@ const {
},
});
const formData = reactive({
const formData = ref({
id: undefined as string | undefined,
title: "",
});
@@ -486,7 +486,7 @@ async function handleOpenDialog(type: "create" | "detail", id?: string) {
}
} else {
dialogVisible.title = "新增会话";
formData.id = undefined;
formData.value.id = undefined;
}
memoryFormRenderKey.value += 1;
dialogVisible.visible = true;
@@ -560,7 +560,7 @@ async function handleSubmit() {
dataFormRef.value?.validate(async (valid: boolean) => {
if (!valid) return;
try {
await AiChatAPI.createSession({ title: formData.title });
await AiChatAPI.createSession({ title: formData.value.title });
dialogVisible.visible = false;
await resetForm();
await refreshCreate();
@@ -625,17 +625,17 @@ pre {
border-radius: 4px;
}
::deep(.session-detail-dialog .el-dialog__body) {
::v-deep(.session-detail-dialog .el-dialog__body) {
max-height: 60vh;
padding: 20px;
overflow-y: auto;
}
.crud-dialog-art-form ::deep(.el-row > .el-col:last-child) {
.crud-dialog-art-form ::v-deep(.el-row > .el-col:last-child) {
display: none;
}
.crud-dialog-art-form ::deep(.el-form-item__content) {
.crud-dialog-art-form ::v-deep(.el-form-item__content) {
max-width: 100%;
}
</style>
frontend/web/src/views/module_application/portal/index.vue
+8 -8
View File
@@ -343,7 +343,7 @@ const {
},
});
const formData = reactive<ApplicationForm>({
const formData = ref<ApplicationForm>({
name: "",
access_url: "",
icon_url: "",
@@ -471,10 +471,10 @@ async function handleSubmit() {
await formRef.value?.validate();
if (dialogType.value === "create") {
await ApplicationAPI.createApp(formData);
await ApplicationAPI.createApp(formData.value);
await refreshCreate();
} else {
await ApplicationAPI.updateApp(currentApp.value!.id!, formData);
await ApplicationAPI.updateApp(currentApp.value!.id!, formData.value);
await refreshUpdate();
}
@@ -532,12 +532,12 @@ async function handleSubmit() {
opacity: 0.55;
}
::deep(.el-card__header) {
::v-deep(.el-card__header) {
padding: 14px 14px 12px;
border-bottom: none;
}
::deep(.el-card__body) {
::v-deep(.el-card__body) {
display: flex;
flex: 1;
flex-direction: column;
@@ -546,7 +546,7 @@ async function handleSubmit() {
padding: 12px 14px;
}
::deep(.el-card__footer) {
::v-deep(.el-card__footer) {
padding: 10px 14px 14px;
margin-top: auto;
}
@@ -634,11 +634,11 @@ async function handleSubmit() {
}
}
.crud-dialog-art-form ::deep(.el-row > .el-col:last-child) {
.crud-dialog-art-form ::v-deep(.el-row > .el-col:last-child) {
display: none;
}
.crud-dialog-art-form ::deep(.el-form-item__content) {
.crud-dialog-art-form ::v-deep(.el-form-item__content) {
max-width: 100%;
}
</style>
frontend/web/src/views/module_example/demo/index.vue
+9 -9
View File
@@ -497,7 +497,7 @@ const dialogVisible = reactive({
const detailFormData = ref<DemoTable>({});
const formData = reactive<DemoForm>({
const formData = ref<DemoForm>({
id: undefined,
name: "",
status: "0",
@@ -620,15 +620,15 @@ async function openEditDialog(type: "add" | "edit", row?: DemoTable) {
dialogVisible.type = type === "add" ? "create" : "update";
if (type === "add") {
dialogVisible.title = "新增示例";
Object.assign(formData, initialFormData);
formData.id = undefined;
Object.assign(formData.value, initialFormData);
formData.value.id = undefined;
metadataList.value = [];
} else if (row?.id) {
dialogVisible.title = "修改";
const response = await DemoAPI.getDemoDetail(row.id);
Object.assign(formData, response.data.data);
if (formData.i && typeof formData.i === "object") {
metadataList.value = Object.entries(formData.i).map(([key, value]) => ({
Object.assign(formData.value, response.data.data);
if (formData.value.i && typeof formData.value.i === "object") {
metadataList.value = Object.entries(formData.value.i).map(([key, value]) => ({
key,
value: String(value),
}));
@@ -644,7 +644,7 @@ async function resetForm() {
dataFormRef.value.resetFields();
dataFormRef.value.clearValidate();
}
Object.assign(formData, initialFormData);
Object.assign(formData.value, initialFormData);
metadataList.value = [];
}
@@ -656,7 +656,7 @@ async function handleCloseDialog() {
async function handleSubmit() {
dataFormRef.value.validate(async (valid: boolean) => {
if (!valid) return;
const submitData = { ...formData };
const submitData = { ...formData.value };
if (metadataList.value.length > 0) {
const metadataObj: Record<string, string> = {};
metadataList.value.forEach((item) => {
@@ -668,7 +668,7 @@ async function handleSubmit() {
} else {
submitData.i = undefined;
}
const id = formData.id;
const id = formData.value.id;
try {
if (id) {
await DemoAPI.updateDemo(id, { id, ...submitData });
frontend/web/src/views/module_example/demo01/index.vue
+10 -10
View File
@@ -368,7 +368,7 @@ const dialogVisible = reactive({
const detailFormData = ref<Demo01Table>({});
const formData = reactive<Demo01Form>({
const formData = ref<Demo01Form>({
id: undefined,
name: "",
status: "0",
@@ -499,12 +499,12 @@ async function openEditDialog(type: "add" | "edit", row?: Demo01Table) {
dialogVisible.type = type === "add" ? "create" : "update";
if (type === "add") {
dialogVisible.title = "新增示例01";
Object.assign(formData, initialFormData);
formData.id = undefined;
Object.assign(formData.value, initialFormData);
formData.value.id = undefined;
} else if (row?.id) {
dialogVisible.title = "修改";
const response = await Demo01API.getDemo01Detail(row.id);
Object.assign(formData, response.data.data);
Object.assign(formData.value, response.data.data);
}
demo01FormRenderKey.value += 1;
dialogVisible.visible = true;
@@ -513,7 +513,7 @@ async function openEditDialog(type: "add" | "edit", row?: Demo01Table) {
async function resetForm() {
dataFormRef.value?.ref?.resetFields();
dataFormRef.value?.ref?.clearValidate();
Object.assign(formData, initialFormData);
Object.assign(formData.value, initialFormData);
}
async function handleCloseDialog() {
@@ -524,13 +524,13 @@ async function handleCloseDialog() {
async function handleSubmit() {
dataFormRef.value?.validate(async (valid: boolean) => {
if (!valid) return;
const id = formData.id;
const id = formData.value.id;
try {
if (id) {
await Demo01API.updateDemo01(id, { id, ...formData });
await Demo01API.updateDemo01(id, { id, ...formData.value });
await refreshUpdate();
} else {
await Demo01API.createDemo01(formData);
await Demo01API.createDemo01(formData.value);
await refreshCreate();
}
dialogVisible.visible = false;
@@ -627,11 +627,11 @@ function openExportModal() {
</script>
<style scoped lang="scss">
.crud-dialog-art-form ::deep(.el-row > .el-col:last-child) {
.crud-dialog-art-form ::v-deep(.el-row > .el-col:last-child) {
display: none;
}
.crud-dialog-art-form ::deep(.el-form-item__content) {
.crud-dialog-art-form ::v-deep(.el-form-item__content) {
max-width: 100%;
}
</style>
frontend/web/src/views/module_generator/gencode/components/CreateTableDialog.vue
+5 -5
View File
@@ -426,7 +426,7 @@ function handleCancel() {
position: relative;
}
.visual-pane ::deep(.el-textarea__inner) {
.visual-pane ::v-deep(.el-textarea__inner) {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
@@ -437,20 +437,20 @@ function handleCancel() {
/* 表结构：描述列表表格化，标签列对齐、内容区可伸缩 */
.visual-structure {
.visual-desc {
::deep(.el-descriptions__label) {
::v-deep(.el-descriptions__label) {
width: 108px;
vertical-align: middle;
}
::deep(.el-descriptions__cell) {
::v-deep(.el-descriptions__cell) {
vertical-align: middle;
}
::deep(.el-descriptions__content) {
::v-deep(.el-descriptions__content) {
min-width: 0;
}
::deep(.el-descriptions__title) {
::v-deep(.el-descriptions__title) {
margin-bottom: 8px;
}
}
frontend/web/src/views/module_generator/gencode/components/GenBasicStep.vue
+7 -7
View File
@@ -352,15 +352,15 @@ onUnmounted(() => {
min-width: 0;
}
.gen-basic-step ::deep(.el-col) {
.gen-basic-step ::v-deep(.el-col) {
min-width: 0;
}
.gen-basic-step ::deep(.el-form-item__content) {
.gen-basic-step ::v-deep(.el-form-item__content) {
min-width: 0;
}
.gen-basic-step ::deep(.el-input-group) {
.gen-basic-step ::v-deep(.el-input-group) {
width: 100%;
min-width: 0;
max-width: 100%;
@@ -383,11 +383,11 @@ onUnmounted(() => {
border: 1px solid var(--el-border-color-lighter);
}
.master-sub-card ::deep(.el-card__header) {
.master-sub-card ::v-deep(.el-card__header) {
padding: 8px 10px;
}
.master-sub-card ::deep(.el-card__body) {
.master-sub-card ::v-deep(.el-card__body) {
padding: 10px;
}
@@ -396,7 +396,7 @@ onUnmounted(() => {
border: 1px solid var(--el-border-color-lighter);
}
.gen-form-card ::deep(.el-card__body) {
.gen-form-card ::v-deep(.el-card__body) {
overflow-x: hidden;
}
@@ -425,7 +425,7 @@ onUnmounted(() => {
border-bottom: 1px solid var(--el-border-color-lighter);
}
.gen-echo-card ::deep(.el-card__body) {
.gen-echo-card ::v-deep(.el-card__body) {
padding: 6px 8px;
}
frontend/web/src/views/module_generator/gencode/components/GencodeHelpPanel.vue
+4 -4
View File
@@ -66,18 +66,18 @@ const rows = [
border-radius: var(--el-border-radius-base);
}
.gencode-help-collapse ::deep(.el-collapse-item__header) {
.gencode-help-collapse ::v-deep(.el-collapse-item__header) {
padding: 8px 12px;
font-size: 13px;
font-weight: 500;
background: var(--el-fill-color-light);
}
.gencode-help-collapse ::deep(.el-collapse-item__wrap) {
.gencode-help-collapse ::v-deep(.el-collapse-item__wrap) {
border-top: 1px solid var(--el-border-color-lighter);
}
.gencode-help-collapse ::deep(.el-collapse-item__content) {
.gencode-help-collapse ::v-deep(.el-collapse-item__content) {
padding: 10px 12px 12px;
}
@@ -91,7 +91,7 @@ const rows = [
flex-shrink: 0;
}
.gencode-rules-table ::deep(.el-table__cell) {
.gencode-rules-table ::v-deep(.el-table__cell) {
font-size: 12px;
}
frontend/web/src/views/module_generator/gencode/index.vue
+4 -4
View File
@@ -90,7 +90,7 @@
<ImportDbTableDialog
ref="importDbDialogRef"
v-model="importVisible"
v-model:query="importQueryFormData"
v-model:query="formData"
:data="dbTableList"
:total="importTotal"
:confirm-loading="importLoading"
@@ -216,7 +216,7 @@ const tableNames = ref<string[]>([]);
// 导入弹窗专用状态
const importLoading = ref(false);
const importTotal = ref<number>(0);
const importQueryFormData = ref<GenTablePageQuery>({
const formData = ref<GenTablePageQuery>({
page_no: 1,
page_size: 10,
table_name: undefined,
@@ -1009,7 +1009,7 @@ async function handleImportTable(): Promise<void> {
async function getDbList(): Promise<void> {
importLoading.value = true;
try {
const res = await GencodeAPI.listDbTable(importQueryFormData.value);
const res = await GencodeAPI.listDbTable(formData.value);
if (res.data && res.data.data) {
dbTableList.value = res.data.data.items;
importTotal.value = res.data.data.total;
@@ -1023,7 +1023,7 @@ async function getDbList(): Promise<void> {
/** 导入弹窗搜索按钮操作 */
async function handleImportQuery(): Promise<void> {
importQueryFormData.value.page_no = 1;
formData.value.page_no = 1;
await getDbList();
}
frontend/web/src/views/module_monitor/cache/index.vue
Vendored
+2 -2
View File
@@ -567,7 +567,7 @@ onUnmounted(() => {
flex-direction: column;
min-height: 0;
::deep(.el-card__body) {
::v-deep(.el-card__body) {
display: flex;
flex: 1;
flex-direction: column;
@@ -607,7 +607,7 @@ onUnmounted(() => {
flex-direction: column;
min-height: 0;
::deep(.el-card__body) {
::v-deep(.el-card__body) {
display: flex;
flex: 1;
flex-direction: column;
frontend/web/src/views/module_monitor/resource/index.vue
+2 -2
View File
@@ -633,14 +633,14 @@ async function handleBatchDelete() {
</script>
<style lang="scss" scoped>
.resource-monitor-page ::deep(.resource-monitor-card.el-card > .el-card__body) {
.resource-monitor-page ::v-deep(.resource-monitor-card.el-card > .el-card__body) {
display: flex;
flex: 1;
flex-direction: column;
min-height: 0;
}
::deep(.el-breadcrumb__item) {
::v-deep(.el-breadcrumb__item) {
&.is-link {
color: var(--el-color-primary);
cursor: pointer;
frontend/web/src/views/module_system/auth/login/components/LoginAuthLinkRow.vue
+2 -2
View File
@@ -22,8 +22,8 @@ defineEmits<{ link: [] }>();
<style scoped lang="scss">
.login-auth-link-row {
::deep(.el-link),
::deep(.el-link__inner) {
::v-deep(.el-link),
::v-deep(.el-link__inner) {
line-height: inherit;
}
}
frontend/web/src/views/module_system/auth/login/components/LoginMobilePanel.vue
+2 -2
View File
@@ -246,11 +246,11 @@ html.dark {
/* EP 全局规则：相邻 .el-button { margin-left: 12px }，纵向叠放时仍会命中，导致第二颗按钮横向错位 */
.login-mobile-actions {
::deep(.el-button + .el-button) {
::v-deep(.el-button + .el-button) {
margin-left: 0 !important;
}
::deep(.el-button) {
::v-deep(.el-button) {
box-sizing: border-box;
width: 100%;
min-width: 0;
frontend/web/src/views/module_system/auth/login/components/LoginQrPanel.vue
+1 -1
View File
@@ -78,7 +78,7 @@ const qrPayload = computed(() => {
/* EP：相邻按钮横向间距；单列返回按钮无需处理 */
.login-mobile-actions {
::deep(.el-button) {
::v-deep(.el-button) {
box-sizing: border-box;
width: 100%;
min-width: 0;
frontend/web/src/views/module_system/auth/login/index.vue
+15 -15
View File
@@ -661,68 +661,68 @@ async function submitForget() {
<style lang="scss" scoped>
.login-page-panel {
::deep(.btn) {
::v-deep(.btn) {
border-radius: 8px;
}
}
html.dark .login-page-panel {
::deep(.text-g-800) {
::v-deep(.text-g-800) {
color: rgb(255 255 255 / 78%) !important;
}
}
/* 副标题与表单块间距（login-page-form 在子组件内，须 :deep） */
::deep(.login-page-form) {
::v-deep(.login-page-form) {
margin-top: 1rem;
}
::deep(.login-page-form .el-form-item) {
::v-deep(.login-page-form .el-form-item) {
margin-bottom: 1.1rem;
}
::deep(.el-select__wrapper) {
::v-deep(.el-select__wrapper) {
min-height: 42px !important;
}
/* 仅账号登录底部「手机号 / 扫码」双列按钮需要 42px；手机号登录页的返回钮与主按钮同为 h-11，勿全局压高度 */
::deep(.login-secondary-actions .login-secondary-btn) {
::v-deep(.login-secondary-actions .login-secondary-btn) {
height: 42px;
border-radius: 8px;
}
html.dark {
::deep(.login-page-form .el-input__wrapper) {
::v-deep(.login-page-form .el-input__wrapper) {
background-color: rgb(255 255 255 / 6%) !important;
box-shadow: 0 0 0 1px rgb(255 255 255 / 10%) inset !important;
}
::deep(.login-page-form .el-input__inner) {
::v-deep(.login-page-form .el-input__inner) {
color: rgb(255 255 255 / 92%);
}
::deep(.login-page-form .el-input__inner::placeholder) {
::v-deep(.login-page-form .el-input__inner::placeholder) {
color: rgb(255 255 255 / 35%);
}
::deep(.login-page-form .el-select .el-select__wrapper) {
::v-deep(.login-page-form .el-select .el-select__wrapper) {
background-color: rgb(255 255 255 / 6%) !important;
box-shadow: 0 0 0 1px rgb(255 255 255 / 10%) inset !important;
}
::deep(.login-page-form .el-select__placeholder) {
::v-deep(.login-page-form .el-select__placeholder) {
color: rgb(255 255 255 / 40%);
}
::deep(.login-page-form .el-select__selected-item) {
::v-deep(.login-page-form .el-select__selected-item) {
color: rgb(255 255 255 / 92%);
}
::deep(.login-remember .el-checkbox__label) {
::v-deep(.login-remember .el-checkbox__label) {
color: rgb(255 255 255 / 65%);
}
::deep(.login-secondary-btn) {
::v-deep(.login-secondary-btn) {
color: rgb(255 255 255 / 85%) !important;
background: transparent !important;
border-color: rgb(255 255 255 / 22%) !important;
@@ -735,7 +735,7 @@ html.dark {
}
}
::deep(.login-secondary-actions .login-secondary-btn) {
::v-deep(.login-secondary-actions .login-secondary-btn) {
height: 42px;
}
}
frontend/web/src/views/module_system/dept/index.vue
+10 -10
View File
@@ -362,7 +362,7 @@ const { columnChecks, columns } = useTableColumns<DeptTable>(() => [
const detailFormData = ref<DeptTable>({ code: "" });
const formData = reactive<DeptForm>({
const formData = ref<DeptForm>({
id: undefined,
name: undefined,
code: "",
@@ -515,10 +515,10 @@ async function handleOpenDialog(
}
} else {
dialogVisible.title = "新增部门";
Object.assign(formData, initialFormData);
formData.id = undefined;
Object.assign(formData.value, initialFormData);
formData.value.id = undefined;
if (parentId) {
formData.parent_id = parentId;
formData.value.parent_id = parentId;
}
}
deptFormRenderKey.value += 1;
@@ -528,12 +528,12 @@ async function handleOpenDialog(
async function handleSubmit() {
dataFormRef.value?.validate(async (valid: boolean) => {
if (!valid) return;
const id = formData.id;
const id = formData.value.id;
try {
if (id) {
await DeptAPI.updateDept(id, { id, ...formData });
await DeptAPI.updateDept(id, { id, ...formData.value });
} else {
await DeptAPI.createDept(formData);
await DeptAPI.createDept(formData.value);
}
dialogVisible.visible = false;
await resetForm();
@@ -614,15 +614,15 @@ onMounted(() => {
</script>
<style scoped lang="scss">
.crud-dialog-art-form ::deep(.el-row > .el-col:last-child) {
.crud-dialog-art-form ::v-deep(.el-row > .el-col:last-child) {
display: none;
}
.crud-dialog-art-form ::deep(.el-form-item__content) {
.crud-dialog-art-form ::v-deep(.el-form-item__content) {
max-width: 100%;
}
::deep(.dept-table-actions .inline-flex) {
::v-deep(.dept-table-actions .inline-flex) {
vertical-align: middle;
}
</style>
frontend/web/src/views/module_system/dict/components/DataDrawer.vue
+13 -13
View File
@@ -541,7 +541,7 @@ const dialogVisible = reactive({
const detailFormData = ref<DictDataTable>({});
const formData = reactive<DictDataForm>({
const formData = ref<DictDataForm>({
id: undefined,
dict_sort: 1,
dict_label: "",
@@ -715,11 +715,11 @@ async function handleOpenDialog(type: "create" | "update" | "detail", id?: numbe
}
} else {
dialogVisible.title = "新增字典数据";
Object.assign(formData, initialFormData);
formData.dict_type = props.dictType;
formData.dict_type_id = props.dictTypeId;
formData.status = "0";
formData.id = undefined;
Object.assign(formData.value, initialFormData);
formData.value.dict_type = props.dictType;
formData.value.dict_type_id = props.dictTypeId;
formData.value.status = "0";
formData.value.id = undefined;
}
dictDataFormRenderKey.value += 1;
dialogVisible.visible = true;
@@ -728,20 +728,20 @@ async function handleOpenDialog(type: "create" | "update" | "detail", id?: numbe
async function handleSubmit() {
dataFormRef.value?.validate(async (valid: boolean) => {
if (!valid) return;
const id = formData.id;
const id = formData.value.id;
try {
if (id) {
await DictAPI.updateDictData(id, { id, ...formData });
await DictAPI.updateDictData(id, { id, ...formData.value });
await refreshUpdate();
} else {
await DictAPI.createDictData(formData);
await DictAPI.createDictData(formData.value);
await refreshCreate();
}
dialogVisible.visible = false;
await resetForm();
dictStore.clearDictData();
if (formData.dict_type) {
await dictStore.getDict([formData.dict_type]);
if (formData.value.dict_type) {
await dictStore.getDict([formData.value.dict_type]);
}
} catch (error: unknown) {
console.error(error);
@@ -890,11 +890,11 @@ function openExportModal() {
border-color: var(--el-border-color-lighter);
}
.crud-dialog-art-form ::deep(.el-row > .el-col:last-child) {
.crud-dialog-art-form ::v-deep(.el-row > .el-col:last-child) {
display: none;
}
.crud-dialog-art-form ::deep(.el-form-item__content) {
.crud-dialog-art-form ::v-deep(.el-form-item__content) {
max-width: 100%;
}
</style>
frontend/web/src/views/module_system/dict/index.vue
+10 -10
View File
@@ -359,7 +359,7 @@ const dialogVisible = reactive({
const detailFormData = ref<DictTable>({});
const formData = reactive<DictForm>({
const formData = ref<DictForm>({
id: undefined,
dict_name: "",
dict_type: "",
@@ -529,8 +529,8 @@ async function handleOpenDialog(type: "create" | "update" | "detail", id?: numbe
}
} else {
dialogVisible.title = "新增字典";
Object.assign(formData, initialFormData);
formData.id = undefined;
Object.assign(formData.value, initialFormData);
formData.value.id = undefined;
}
dictFormRenderKey.value += 1;
dialogVisible.visible = true;
@@ -539,20 +539,20 @@ async function handleOpenDialog(type: "create" | "update" | "detail", id?: numbe
async function handleSubmit() {
dataFormRef.value?.validate(async (valid: boolean) => {
if (!valid) return;
const id = formData.id;
const id = formData.value.id;
try {
if (id) {
await DictAPI.updateDictType(id, { id, ...formData });
await DictAPI.updateDictType(id, { id, ...formData.value });
await refreshUpdate();
} else {
await DictAPI.createDictType(formData);
await DictAPI.createDictType(formData.value);
await refreshCreate();
}
dialogVisible.visible = false;
await resetForm();
dictStore.clearDictData();
if (formData.dict_type) {
await dictStore.getDict([formData.dict_type]);
if (formData.value.dict_type) {
await dictStore.getDict([formData.value.dict_type]);
}
} catch (error: unknown) {
console.error(error);
@@ -636,11 +636,11 @@ function openExportModal() {
</script>
<style scoped lang="scss">
.crud-dialog-art-form ::deep(.el-row > .el-col:last-child) {
.crud-dialog-art-form ::v-deep(.el-row > .el-col:last-child) {
display: none;
}
.crud-dialog-art-form ::deep(.el-form-item__content) {
.crud-dialog-art-form ::v-deep(.el-form-item__content) {
max-width: 100%;
}
</style>
frontend/web/src/views/module_system/log/index.vue
+2 -2
View File
@@ -446,7 +446,7 @@ function onResetSearch() {
}
async function resetForm() {
formData.value = {};
Object.assign(formData, {});
}
async function handleCloseDialog() {
@@ -457,7 +457,7 @@ async function handleCloseDialog() {
async function handleOpenDialog(id: number) {
dialogVisible.value.title = "日志详情";
const response = await LogAPI.detailLog(id);
Object.assign(formData.value, response.data.data ?? {});
Object.assign(formData, response.data.data ?? {});
dialogVisible.value.visible = true;
}
frontend/web/src/views/module_system/menu/index.vue
+17 -17
View File
@@ -692,7 +692,7 @@ const createParentLocked = ref(false);
const detailFormData = ref<MenuTable>({});
const formData = reactive<MenuForm>({
const formData = ref<MenuForm>({
id: undefined,
name: undefined,
type: MenuTypeEnum.CATALOG,
@@ -959,7 +959,7 @@ const rules = reactive({
redirect: [
{
validator: (_rule: unknown, value: string | undefined, callback: (e?: Error) => void) => {
if (formData.type === MenuTypeEnum.CATALOG) {
if (formData.value.type === MenuTypeEnum.CATALOG) {
if (value === undefined || value === null || String(value).trim() === "") {
callback(new Error("目录类型必须填写重定向地址"));
return;
@@ -1012,7 +1012,7 @@ async function handleRowClick(row: MenuTable) {
}
const allowedMenuTypeValues = computed(() => {
const pid = formData.parent_id;
const pid = formData.value.parent_id;
const parentNode = findMenuNodeById(pid);
if (!parentNode?.type) {
return [MenuTypeEnum.CATALOG, MenuTypeEnum.MENU, MenuTypeEnum.EXTLINK];
@@ -1046,28 +1046,28 @@ async function handleOpenDialog(
dialogVisible.title = "新增菜单";
Object.assign(formData, initialFormData);
if (parentRow?.id != null) {
formData.parent_id = parentRow.id;
formData.client = (parentRow.client as MenuClientEnum) || menuClientTab.value;
formData.value.parent_id = parentRow.id;
formData.value.client = (parentRow.client as MenuClientEnum) || menuClientTab.value;
if (parentRow.type === MenuTypeEnum.MENU) {
createParentLocked.value = true;
formData.type = MenuTypeEnum.BUTTON;
formData.value.type = MenuTypeEnum.BUTTON;
} else if (parentRow.type === MenuTypeEnum.CATALOG) {
formData.type = MenuTypeEnum.MENU;
formData.value.type = MenuTypeEnum.MENU;
}
} else {
formData.client = menuClientTab.value;
formData.value.client = menuClientTab.value;
}
}
dialogVisible.visible = true;
}
function handleMenuTypeChange() {
if (formData.type === MenuTypeEnum.MENU) {
formData.component_path = "";
if (formData.value.type === MenuTypeEnum.MENU) {
formData.value.component_path = "";
}
nextTick(() => {
dataFormRef.value?.clearValidate("redirect");
if (formData.type === MenuTypeEnum.CATALOG) {
if (formData.value.type === MenuTypeEnum.CATALOG) {
dataFormRef.value?.validateField("redirect").catch(() => {});
}
});
@@ -1076,19 +1076,19 @@ function handleMenuTypeChange() {
async function handleSubmit() {
const allowed = allowedMenuTypeValues.value;
if (!allowed.length) return;
const t = formData.type as MenuTypeEnum;
const t = formData.value.type as MenuTypeEnum;
if (!allowed.includes(t)) {
formData.type = allowed[0] as MenuForm["type"];
formData.value.type = allowed[0] as MenuForm["type"];
}
dataFormRef.value?.validate(async (valid: boolean) => {
if (!valid) return;
submitLoading.value = true;
const id = formData.id;
const id = formData.value.id;
try {
if (id) {
await MenuAPI.updateMenu(id, { id, ...formData });
await MenuAPI.updateMenu(id, { id, ...formData.value });
} else {
await MenuAPI.createMenu(formData);
await MenuAPI.createMenu(formData.value);
}
dialogVisible.visible = false;
await resetForm();
@@ -1153,7 +1153,7 @@ onMounted(() => {
</script>
<style scoped lang="scss">
::deep(.menu-table-actions .inline-flex) {
::v-deep(.menu-table-actions .inline-flex) {
vertical-align: middle;
}
</style>
frontend/web/src/views/module_system/notice/index.vue
+18 -18
View File
@@ -450,7 +450,7 @@ const detailHasRenderableContent = computed(() => {
return plain.length > 0;
});
const formData = reactive<NoticeForm>({
const formData = ref<NoticeForm>({
id: undefined,
notice_title: "",
notice_type: "",
@@ -606,8 +606,8 @@ async function handleOpenDialog(type: "create" | "update" | "detail", id?: numbe
}
} else {
dialogVisible.title = "新增公告通知";
Object.assign(formData, initialFormData);
formData.id = undefined;
Object.assign(formData.value, initialFormData);
formData.value.id = undefined;
}
noticeFormRenderKey.value += 1;
dialogVisible.visible = true;
@@ -617,13 +617,13 @@ async function handleSubmit() {
dataFormRef.value?.validate(async (valid: boolean) => {
if (!valid) return;
submitLoading.value = true;
const id = formData.id;
const id = formData.value.id;
try {
if (id) {
await NoticeAPI.updateNotice(id, { id, ...formData });
await NoticeAPI.updateNotice(id, { id, ...formData.value });
await refreshUpdate();
} else {
await NoticeAPI.createNotice(formData);
await NoticeAPI.createNotice(formData.value);
await refreshCreate();
}
dialogVisible.visible = false;
@@ -747,11 +747,11 @@ onMounted(async () => {
<style scoped lang="scss">
/* FaForm 底部预留的操作栏列在弹窗内不需要占位 */
.crud-dialog-art-form ::deep(.el-row > .el-col:last-child) {
.crud-dialog-art-form ::v-deep(.el-row > .el-col:last-child) {
display: none;
}
.crud-dialog-art-form ::deep(.el-form-item__content) {
.crud-dialog-art-form ::v-deep(.el-form-item__content) {
max-width: 100%;
}
@@ -773,27 +773,27 @@ onMounted(async () => {
color: var(--el-text-color-placeholder);
}
.notice-html-preview ::deep(h1),
.notice-html-preview ::deep(h2),
.notice-html-preview ::deep(h3) {
.notice-html-preview ::v-deep(h1),
.notice-html-preview ::v-deep(h2),
.notice-html-preview ::v-deep(h3) {
margin: 12px 0 8px;
}
.notice-html-preview ::deep(p) {
.notice-html-preview ::v-deep(p) {
margin: 8px 0;
line-height: 1.6;
}
.notice-html-preview ::deep(table) {
.notice-html-preview ::v-deep(table) {
margin: 12px 0;
}
.notice-html-preview ::deep(table th),
.notice-html-preview ::deep(table td) {
.notice-html-preview ::v-deep(table th),
.notice-html-preview ::v-deep(table td) {
padding: 8px 12px;
}
.notice-html-preview ::deep(pre) {
.notice-html-preview ::v-deep(pre) {
padding: 12px;
margin: 12px 0;
overflow-x: auto;
@@ -801,14 +801,14 @@ onMounted(async () => {
border-radius: 4px;
}
.notice-html-preview ::deep(blockquote) {
.notice-html-preview ::v-deep(blockquote) {
padding-left: 16px;
margin: 12px 0;
color: var(--el-text-color-regular);
border-left: 4px solid var(--el-color-primary);
}
.notice-html-preview ::deep(img) {
.notice-html-preview ::v-deep(img) {
max-width: 100%;
height: auto;
}
frontend/web/src/views/module_system/param/index.vue
+8 -8
View File
@@ -357,7 +357,7 @@ const paramExportContentConfig = computed(() => ({
const detailFormData = ref<ConfigTable>({} as ConfigTable);
const formData = reactive<ConfigForm>({
const formData = ref<ConfigForm>({
id: undefined,
config_name: "",
config_key: "",
@@ -478,8 +478,8 @@ async function handleOpenDialog(type: "create" | "update" | "detail", id?: numbe
}
} else {
dialogVisible.title = "新增系统配置";
Object.assign(formData, initialFormData);
formData.id = undefined;
Object.assign(formData.value, initialFormData);
formData.value.id = undefined;
}
paramFormRenderKey.value += 1;
dialogVisible.visible = true;
@@ -489,13 +489,13 @@ async function handleSubmit() {
dataFormRef.value?.validate(async (valid: boolean) => {
if (!valid) return;
submitLoading.value = true;
const id = formData.id;
const id = formData.value.id;
try {
if (id) {
await ParamsAPI.updateParams(id, { id, ...formData });
await ParamsAPI.updateParams(id, { id, ...formData.value });
await refreshUpdate();
} else {
await ParamsAPI.createParams(formData);
await ParamsAPI.createParams(formData.value);
await refreshCreate();
}
dialogVisible.visible = false;
@@ -598,11 +598,11 @@ function openExportModal() {
</script>
<style scoped lang="scss">
.crud-dialog-art-form ::deep(.el-row > .el-col:last-child) {
.crud-dialog-art-form ::v-deep(.el-row > .el-col:last-child) {
display: none;
}
.crud-dialog-art-form ::deep(.el-form-item__content) {
.crud-dialog-art-form ::v-deep(.el-form-item__content) {
max-width: 100%;
}
</style>
frontend/web/src/views/module_system/position/index.vue
+9 -9
View File
@@ -524,7 +524,7 @@ const positionExportContentConfig = computed(() => ({
const detailFormData = ref<PositionTable>({});
const formData = reactive<PositionForm>({
const formData = ref<PositionForm>({
id: undefined,
name: undefined,
order: 1,
@@ -649,8 +649,8 @@ async function handleOpenDialog(type: "create" | "update" | "detail", id?: numbe
}
} else {
dialogVisible.title = "新增岗位";
Object.assign(formData, initialFormData);
formData.id = undefined;
Object.assign(formData.value, initialFormData);
formData.value.id = undefined;
}
positionFormRenderKey.value += 1;
dialogVisible.visible = true;
@@ -660,13 +660,13 @@ async function handleSubmit() {
dataFormRef.value?.validate(async (valid: boolean) => {
if (!valid) return;
submitLoading.value = true;
const id = formData.id;
const id = formData.value.id;
try {
if (id) {
await PositionAPI.updatePosition(id, { id, ...formData });
await PositionAPI.updatePosition(id, { id, ...formData.value });
await refreshUpdate();
} else {
await PositionAPI.createPosition(formData);
await PositionAPI.createPosition(formData.value);
await refreshCreate();
}
dialogVisible.visible = false;
@@ -728,15 +728,15 @@ function handleMoreClick(status: string) {
</script>
<style scoped lang="scss">
.crud-dialog-art-form ::deep(.el-row > .el-col:last-child) {
.crud-dialog-art-form ::v-deep(.el-row > .el-col:last-child) {
display: none;
}
.crud-dialog-art-form ::deep(.el-form-item__content) {
.crud-dialog-art-form ::v-deep(.el-form-item__content) {
max-width: 100%;
}
::deep(.position-table-actions .inline-flex) {
::v-deep(.position-table-actions .inline-flex) {
vertical-align: middle;
}
</style>
frontend/web/src/views/module_system/role/index.vue
+9 -9
View File
@@ -547,7 +547,7 @@ const roleExportContentConfig = computed(() => ({
const detailFormData = ref<RoleTable>({} as RoleTable);
const formData = reactive<RoleForm>({
const formData = ref<RoleForm>({
id: undefined,
name: undefined,
order: 1,
@@ -684,8 +684,8 @@ async function handleOpenDialog(type: "create" | "update" | "detail", id?: numbe
}
} else {
dialogVisible.title = "新增角色";
Object.assign(formData, initialFormData);
formData.id = undefined;
Object.assign(formData.value, initialFormData);
formData.value.id = undefined;
}
roleFormRenderKey.value += 1;
dialogVisible.visible = true;
@@ -695,13 +695,13 @@ async function handleSubmit() {
dataFormRef.value?.validate(async (valid: boolean) => {
if (!valid) return;
submitLoading.value = true;
const id = formData.id;
const id = formData.value.id;
try {
if (id) {
await RoleAPI.updateRole(id, { id, ...formData });
await RoleAPI.updateRole(id, { id, ...formData.value });
await refreshUpdate();
} else {
await RoleAPI.createRole(formData);
await RoleAPI.createRole(formData.value);
await refreshCreate();
}
dialogVisible.visible = false;
@@ -766,15 +766,15 @@ function openExportModal() {
</script>
<style scoped lang="scss">
.crud-dialog-art-form ::deep(.el-row > .el-col:last-child) {
.crud-dialog-art-form ::v-deep(.el-row > .el-col:last-child) {
display: none;
}
.crud-dialog-art-form ::deep(.el-form-item__content) {
.crud-dialog-art-form ::v-deep(.el-form-item__content) {
max-width: 100%;
}
::deep(.role-table-actions .inline-flex) {
::v-deep(.role-table-actions .inline-flex) {
vertical-align: middle;
}
</style>
frontend/web/src/views/module_system/tenant/index.vue
+16 -12
View File
@@ -440,7 +440,7 @@ const detailFormData = ref<TenantTable>({ code: "", name: "", status: "0" });
const currentEditId = ref<number | null>(null);
const formData = reactive<TenantForm>({
const formData = ref<TenantForm>({
name: "",
code: "",
status: "0",
@@ -458,7 +458,11 @@ const dialogVisible = reactive({
const CODE_PATTERN = /^[A-Za-z0-9]+$/;
const validateTimeRange = (rule: unknown, value: unknown, callback: (e?: Error) => void) => {
if (formData.start_time && formData.end_time && formData.start_time > formData.end_time) {
if (
formData.value.start_time &&
formData.value.end_time &&
formData.value.start_time > formData.value.end_time
) {
callback(new Error("结束时间不能早于开始时间"));
} else {
callback();
@@ -618,18 +622,18 @@ async function handleSubmit() {
try {
if (id) {
const payload: TenantUpdateForm = {
name: formData.name,
start_time: formData.start_time,
end_time: formData.end_time,
name: formData.value.name,
start_time: formData.value.start_time,
end_time: formData.value.end_time,
};
await TenantAPI.updateTenant(id, payload);
await refreshUpdate();
} else {
const payload: TenantCreateForm = {
name: formData.name as string,
code: formData.code as string,
start_time: formData.start_time,
end_time: formData.end_time,
name: formData.value.name as string,
code: formData.value.code as string,
start_time: formData.value.start_time,
end_time: formData.value.end_time,
};
await TenantAPI.createTenant(payload);
await refreshCreate();
@@ -668,15 +672,15 @@ function handleBatchDelete() {
</script>
<style scoped lang="scss">
.crud-dialog-art-form ::deep(.el-row > .el-col:last-child) {
.crud-dialog-art-form ::v-deep(.el-row > .el-col:last-child) {
display: none;
}
.crud-dialog-art-form ::deep(.el-form-item__content) {
.crud-dialog-art-form ::v-deep(.el-form-item__content) {
max-width: 100%;
}
::deep(.tenant-table-actions .inline-flex) {
::v-deep(.tenant-table-actions .inline-flex) {
vertical-align: middle;
}
</style>
frontend/web/src/views/module_system/user/components/UserTableSelect.vue
+2 -2
View File
@@ -1,6 +1,6 @@
<!-- 列表选择器 -->
<template>
<table-select
<FaTableSelect
:text="text"
:select-config="selectConfig"
@confirm-click="handleConfirm"
@@ -11,7 +11,7 @@
{{ scope.row[scope.prop] === "0" ? "启用" : "停用" }}
</ElTag>
</template>
</table-select>
</FaTableSelect>
</template>
<script setup lang="ts">
frontend/web/src/views/module_system/user/index.vue
+11 -9
View File
@@ -731,7 +731,7 @@ const userExportContentConfig = computed(() => ({
},
}));
const formData = reactive<UserForm>({
const formData = ref<UserForm>({
id: undefined,
username: undefined,
name: undefined,
@@ -882,13 +882,15 @@ async function handleOpenDialog(type: "create" | "update" | "detail", id?: numbe
Object.assign(detailFormData.value, response.data.data ?? {});
} else if (type === "update") {
dialogVisible.title = "修改用户";
Object.assign(formData, response.data.data);
formData.role_ids = (response.data.data.roles || []).map((item) => item.id as number);
formData.position_ids = (response.data.data.positions || []).map((item) => item.id as number);
Object.assign(formData.value, response.data.data);
formData.value.role_ids = (response.data.data.roles || []).map((item) => item.id as number);
formData.value.position_ids = (response.data.data.positions || []).map(
(item) => item.id as number
);
}
} else {
dialogVisible.title = "新增用户";
formData.id = undefined;
formData.value.id = undefined;
}
dialogVisible.visible = true;
await nextTick();
@@ -926,13 +928,13 @@ async function handleSubmit() {
dataFormRef.value.validate(async (valid: boolean) => {
if (!valid) return;
submitLoading.value = true;
const id = formData.id;
const id = formData.value.id;
try {
if (id) {
await UserAPI.updateUser(id, { id, ...formData });
await UserAPI.updateUser(id, { id, ...formData.value });
await refreshUpdate();
} else {
await UserAPI.createUser(formData);
await UserAPI.createUser(formData.value);
await refreshCreate();
}
dialogVisible.visible = false;
@@ -1002,7 +1004,7 @@ function handleMoreClick(status: string) {
<style lang="scss" scoped>
/* 左侧部门树内容区：card body 纵向 flex + 滚动条占满剩余高度（布局在 index，内边距在 DeptTree） */
.tree-card ::deep(.el-card__body) {
.tree-card ::v-deep(.el-card__body) {
display: flex;
flex: 1;
flex-direction: column;
frontend/web/src/views/module_task/cronjob/job/index.vue
+2 -2
View File
@@ -1039,7 +1039,7 @@ function handleViewJobState(row: JobLogTable) {
</script>
<style scoped>
.job-page ::deep(.data-table) {
.job-page ::v-deep(.data-table) {
height: 100%;
}
@@ -1151,7 +1151,7 @@ function handleViewJobState(row: JobLogTable) {
min-height: 0;
}
.execution-log-drawer ::deep(.el-card.data-table) {
.execution-log-drawer ::v-deep(.el-card.data-table) {
flex: 1;
min-height: 0;
}
frontend/web/src/views/module_task/cronjob/node/index.vue
+24 -24
View File
@@ -583,7 +583,7 @@ const defaultCodeBlock = `def handler(*args, **kwargs):
}
`;
const formData = reactive<NodeForm>({
const formData = ref<NodeForm>({
id: undefined,
name: "",
code: undefined,
@@ -603,7 +603,7 @@ const kwargsList = ref<{ key: string; value: string }[]>([]);
const executeDialogVisible = ref(false);
const currentExecuteNode = ref<NodeTable | null>(null);
const executeFormData = reactive<{
const executeFormData = ref<{
node_display_name: string;
trigger: TriggerType;
trigger_args?: string;
@@ -618,7 +618,7 @@ const executeFormData = reactive<{
});
const executeDialogFormItems = computed<FormItem[]>(() => {
const trig = executeFormData.trigger;
const trig = executeFormData.value.trigger;
const showRange = !!trig && trig !== "now" && trig !== "date";
let triggerArgsLabel = "执行参数";
if (trig === "cron") triggerArgsLabel = "Cron表达式";
@@ -802,7 +802,7 @@ async function handleOpenDialog(type: "create" | "update", id?: number) {
: [];
} else {
dialogVisible.title = "新增节点";
formData.id = undefined;
formData.value.id = undefined;
argsList.value = [];
kwargsList.value = [];
}
@@ -822,10 +822,10 @@ async function handleSubmit() {
dataFormRef.value?.validate(async (valid: any) => {
if (valid) {
submitLoading.value = true;
const id = formData.id;
const id = formData.value.id;
try {
const submitData = {
...formData,
...formData.value,
args: argsList.value.filter((v) => v.trim()).join(",") || undefined,
kwargs:
kwargsList.value.filter((v) => v.key.trim()).length > 0
@@ -859,22 +859,22 @@ async function handleSubmit() {
const handlechangeCron = (cronStr: string) => {
if (typeof cronStr == "string") {
executeFormData.trigger_args = cronStr;
executeFormData.value.trigger_args = cronStr;
}
};
const handleIntervalConfirm = (value: string) => {
executeFormData.trigger_args = value;
executeFormData.value.trigger_args = value;
openInterval.value = false;
};
function handleOpenExecuteDialog(row: NodeTable) {
currentExecuteNode.value = row;
executeFormData.node_display_name = row.name ?? "";
executeFormData.trigger = "now";
executeFormData.trigger_args = undefined;
executeFormData.start_date = undefined;
executeFormData.end_date = undefined;
executeFormData.value.node_display_name = row.name ?? "";
executeFormData.value.trigger = "now";
executeFormData.value.trigger_args = undefined;
executeFormData.value.start_date = undefined;
executeFormData.value.end_date = undefined;
executeFormRenderKey.value += 1;
executeDialogVisible.value = true;
}
@@ -886,7 +886,7 @@ function handleCloseExecuteDialog() {
}
async function handleExecuteNode() {
if (executeFormData.trigger !== "now") {
if (executeFormData.value.trigger !== "now") {
const execForm = executeFormRef.value;
const elForm = execForm?.ref;
if (!elForm) return;
@@ -897,13 +897,13 @@ async function handleExecuteNode() {
try {
submitLoading.value = true;
const params: any = {
trigger: executeFormData.trigger,
trigger: executeFormData.value.trigger,
};
if (executeFormData.trigger !== "now") {
params.trigger_args = executeFormData.trigger_args;
params.start_date = executeFormData.start_date;
params.end_date = executeFormData.end_date;
if (executeFormData.value.trigger !== "now") {
params.trigger_args = executeFormData.value.trigger_args;
params.start_date = executeFormData.value.start_date;
params.end_date = executeFormData.value.end_date;
}
await NodeAPI.executeNode(currentExecuteNode.value?.id as number, params);
@@ -986,17 +986,17 @@ onMounted(async () => {
margin-top: 16px;
}
.node-splitter-art-form ::deep(.el-row > .el-col:last-child),
.execute-debug-art-form ::deep(.el-row > .el-col:last-child) {
.node-splitter-art-form ::v-deep(.el-row > .el-col:last-child),
.execute-debug-art-form ::v-deep(.el-row > .el-col:last-child) {
display: none;
}
.node-splitter-art-form ::deep(.el-form-item__content),
.execute-debug-art-form ::deep(.el-form-item__content) {
.node-splitter-art-form ::v-deep(.el-form-item__content),
.execute-debug-art-form ::v-deep(.el-form-item__content) {
max-width: 100%;
}
.node-splitter-art-form ::deep(section) {
.node-splitter-art-form ::v-deep(section) {
padding-right: 10px;
padding-left: 10px;
}
frontend/web/src/views/module_task/workflow/components/EdgeConfigPanel.vue
+3 -3
View File
@@ -193,15 +193,15 @@ function handleDelete() {
flex: 1;
}
.panel-art-form ::deep(.el-row > .el-col:last-child) {
.panel-art-form ::v-deep(.el-row > .el-col:last-child) {
display: none;
}
.panel-art-form ::deep(.el-form-item__content) {
.panel-art-form ::v-deep(.el-form-item__content) {
max-width: 100%;
}
.panel-art-form ::deep(section) {
.panel-art-form ::v-deep(section) {
padding: 0;
}
</style>
frontend/web/src/views/module_task/workflow/components/NodeConfigPanel.vue
+5 -5
View File
@@ -159,13 +159,13 @@ watch(
}
}
formData.value = {
Object.assign(formData, {
type: newNode.type || "",
label: newNode.data?.label || "",
args: newNode.data?.args || "",
kwargsStr,
description: newNode.data?.description || "",
};
});
}
},
{ deep: true, immediate: true }
@@ -250,15 +250,15 @@ onMounted(() => {
flex: 1;
}
.panel-art-form ::deep(.el-row > .el-col:last-child) {
.panel-art-form ::v-deep(.el-row > .el-col:last-child) {
display: none;
}
.panel-art-form ::deep(.el-form-item__content) {
.panel-art-form ::v-deep(.el-form-item__content) {
max-width: 100%;
}
.panel-art-form ::deep(section) {
.panel-art-form ::v-deep(section) {
padding: 0;
}
</style>
frontend/web/src/views/module_task/workflow/components/WorkflowDesignDrawer.vue
+11 -11
View File
@@ -183,7 +183,7 @@
</template>
<script setup lang="ts">
import { ref, reactive, watch, computed, onMounted, markRaw, type Component } from "vue";
import { ref, watch, computed, onMounted, markRaw, type Component } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { Panel, VueFlow, useVueFlow } from "@vue-flow/core";
import { Background } from "@vue-flow/background";
@@ -230,7 +230,7 @@ const emit = defineEmits(["update:visible", "refresh"]);
const formRef = ref<InstanceType<typeof FaForm> | null>(null);
const workflowId = ref<number>();
const formData = reactive<Partial<WorkflowForm>>({
const formData = ref<Partial<WorkflowForm>>({
code: "",
name: "",
description: "",
@@ -904,7 +904,7 @@ function deleteEdge(edgeId: string, getEdges: () => Edge[], setEdges: (edges: Ed
<style scoped lang="scss">
.workflow-drawer {
::deep(.el-drawer__body) {
::v-deep(.el-drawer__body) {
display: flex;
flex-direction: column;
}
@@ -916,11 +916,11 @@ function deleteEdge(edgeId: string, getEdges: () => Edge[], setEdges: (edges: Ed
height: 100%;
}
::deep(.el-splitter) {
::v-deep(.el-splitter) {
flex: 1;
}
::deep(.el-splitter-panel) {
::v-deep(.el-splitter-panel) {
overflow: hidden;
}
@@ -961,12 +961,12 @@ function deleteEdge(edgeId: string, getEdges: () => Edge[], setEdges: (edges: Ed
overflow: hidden;
}
::deep(.vue-flow__controls) {
::v-deep(.vue-flow__controls) {
display: flex;
flex-direction: column;
}
::deep(.vue-flow__controls-button) {
::v-deep(.vue-flow__controls-button) {
display: flex;
align-items: center;
justify-content: center;
@@ -978,7 +978,7 @@ function deleteEdge(edgeId: string, getEdges: () => Edge[], setEdges: (edges: Ed
border: none;
}
::deep(.el-dropdown) {
::v-deep(.el-dropdown) {
display: flex;
}
@@ -996,15 +996,15 @@ function deleteEdge(edgeId: string, getEdges: () => Edge[], setEdges: (edges: Ed
justify-content: flex-end;
}
.workflow-base-art-form ::deep(.el-row > .el-col:last-child) {
.workflow-base-art-form ::v-deep(.el-row > .el-col:last-child) {
display: none;
}
.workflow-base-art-form ::deep(.el-form-item__content) {
.workflow-base-art-form ::v-deep(.el-form-item__content) {
max-width: 100%;
}
.workflow-base-art-form ::deep(section) {
.workflow-base-art-form ::v-deep(section) {
padding: 0;
}
</style>
frontend/web/src/views/module_task/workflow/node-type/index.vue
+18 -18
View File
@@ -84,7 +84,7 @@
<FaForm
:key="nodeTypeFormRenderKey"
ref="formRef"
v-model="form"
v-model="formData"
:items="nodeTypeDialogFormItems"
:rules="rules"
label-width="100px"
@@ -125,7 +125,7 @@ import { useTable } from "@/hooks/core/useTable";
import type { ColumnOption } from "@/types/component";
import { ElMessage, ElMessageBox, ElTag } from "element-plus";
import type { FormRules } from "element-plus";
import { computed, h, reactive, ref } from "vue";
import { computed, h, ref } from "vue";
const BATCH_DELETE_MSG = "确认删除选中的编排节点类型吗？";
@@ -438,7 +438,7 @@ const defaultForm = (): WorkflowNodeTypeForm => ({
is_active: true,
});
const form = reactive<WorkflowNodeTypeForm>(defaultForm());
const formData = ref<WorkflowNodeTypeForm>(defaultForm());
const rules: FormRules = {
name: [{ required: true, message: "请输入名称", trigger: "blur" }],
@@ -448,7 +448,7 @@ const rules: FormRules = {
};
function resetForm() {
Object.assign(form, defaultForm());
Object.assign(formData.value, defaultForm());
editingId.value = null;
formRef.value?.ref?.resetFields();
formRef.value?.ref?.clearValidate();
@@ -467,14 +467,14 @@ async function openDialog(id?: number) {
const res = await WorkflowNodeTypeAPI.getWorkflowNodeTypeDetail(id);
const d = res.data?.data as WorkflowNodeTypeTable | undefined;
if (d) {
form.name = d.name || "";
form.code = d.code || "";
form.category = (d.category as WorkflowNodeTypeForm["category"]) || "action";
form.func = d.func || "";
form.args = d.args || "";
form.kwargs = d.kwargs || "{}";
form.sort_order = d.sort_order ?? 0;
form.is_active = d.is_active ?? true;
formData.value.name = d.name || "";
formData.value.code = d.code || "";
formData.value.category = (d.category as WorkflowNodeTypeForm["category"]) || "action";
formData.value.func = d.func || "";
formData.value.args = d.args || "";
formData.value.kwargs = d.kwargs || "{}";
formData.value.sort_order = d.sort_order ?? 0;
formData.value.is_active = d.is_active ?? true;
}
} catch {
ElMessage.error("加载详情失败");
@@ -488,9 +488,9 @@ async function openDialog(id?: number) {
async function submitForm() {
if (!formRef.value) return;
await formRef.value.validate();
if (form.kwargs?.trim()) {
if (formData.value.kwargs?.trim()) {
try {
JSON.parse(form.kwargs);
JSON.parse(formData.value.kwargs);
} catch {
ElMessage.error("关键字参数须为合法 JSON");
return;
@@ -499,12 +499,12 @@ async function submitForm() {
submitting.value = true;
try {
if (editingId.value) {
await WorkflowNodeTypeAPI.updateWorkflowNodeType(editingId.value, form);
await WorkflowNodeTypeAPI.updateWorkflowNodeType(editingId.value, formData.value);
ElMessage.success("更新成功");
dialogVisible.value = false;
await refreshUpdate();
} else {
await WorkflowNodeTypeAPI.createWorkflowNodeType(form);
await WorkflowNodeTypeAPI.createWorkflowNodeType(formData.value);
ElMessage.success("创建成功");
dialogVisible.value = false;
await refreshCreate();
@@ -518,11 +518,11 @@ async function submitForm() {
</script>
<style scoped lang="scss">
.crud-dialog-art-form ::deep(.el-row > .el-col:last-child) {
.crud-dialog-art-form ::v-deep(.el-row > .el-col:last-child) {
display: none;
}
.crud-dialog-art-form ::deep(.el-form-item__content) {
.crud-dialog-art-form ::v-deep(.el-form-item__content) {
max-width: 100%;
}
</style>