feat: 完成字段管理页面样式改造

main/manager-web/src/components/CustomButton.vue

@@ -31,6 +31,7 @@ export default {
   transition: all 0.3s ease;
 
   &.el-button--small {
+    padding: 10px;
     font-size: 14px;
   }
   &.el-button--medium {
@@ -91,7 +92,7 @@ export default {
 
 .custom-button--delete {
   width: fit-content;
-  background: linear-gradient(to right, #ff6b6b, #ff8e8e);
+  background: #ff6b6b;
   color: white;
   border: none;
   border-radius: 6px;

main/manager-web/src/components/DictDataDialog.vue

@@ -1,116 +1,117 @@
 <template>
-    <el-dialog :title="title" :visible.sync="dialogVisible" width="30%" @close="handleClose">
+  <CustomDialog
-        <el-form :model="form" :rules="rules" ref="form" label-width="auto">
+    :title="title"
-            <el-form-item :label="$t('dictDataDialog.dictLabel')" prop="dictLabel">
+    :visible.sync="dialogVisible"
-                <el-input v-model="form.dictLabel" :placeholder="$t('dictDataDialog.dictLabelPlaceholder')"></el-input>
+    width="600px"
-            </el-form-item>
+    @confirm="submit"
-            <el-form-item :label="$t('dictDataDialog.dictValue')" prop="dictValue">
+    @close="cancel"
-                <el-input v-model="form.dictValue" :placeholder="$t('dictDataDialog.dictValuePlaceholder')"></el-input>
+    :confirmLoading="saving"
-            </el-form-item>
+  >
-            <el-form-item :label="$t('dictDataDialog.sort')" prop="sort">
+    <el-form :model="form" :rules="rules" ref="form" label-width="auto" label-position="left">
-                <el-input-number v-model="form.sort" :min="0" :max="999" style="width: 100%;"></el-input-number>
+      <el-form-item :label="$t('dictDataDialog.dictLabel')" prop="dictLabel" class="form-item">
-            </el-form-item>
+        <el-input v-model="form.dictLabel" :placeholder="$t('dictDataDialog.dictLabelPlaceholder')" />
-        </el-form>
+      </el-form-item>
-        <div slot="footer" class="dialog-footer">
+      <el-form-item :label="$t('dictDataDialog.dictValue')" prop="dictValue" class="form-item">
-            <el-button @click="handleClose">{{ $t('button.cancel') }}</el-button>
+        <el-input v-model="form.dictValue" :placeholder="$t('dictDataDialog.dictValuePlaceholder')" />
-            <el-button type="primary" @click="handleSave">{{ $t('button.save') }}</el-button>
+      </el-form-item>
-        </div>
+      <el-form-item :label="$t('dictDataDialog.sort')" prop="sort" class="form-item">
-    </el-dialog>
+        <el-input-number v-model="form.sort" :min="0" :max="999" class="custom-input-number"></el-input-number>
+      </el-form-item>
+    </el-form>
+  </CustomDialog>
 </template>
 
 <script>
+import CustomDialog from './CustomDialog.vue';
 export default {
-    name: 'DictDataDialog',
+  name: 'DictDataDialog',
-    props: {
+  props: {
-        visible: {
+    visible: {
-            type: Boolean,
+      type: Boolean,
-            default: false
+      default: false
-        },
-        title: {
-            type: String,
-            default: () => this.$t('dictDataDialog.addDictData')
-        },
-        dictData: {
-            type: Object,
-            default: () => ({})
-        },
-        dictTypeId: {
-            type: [Number, String],
-            default: null
-        }
     },
-    data() {
+    title: {
-        return {
+      type: String,
-            dialogVisible: this.visible,
+      default: () => this.$t('dictDataDialog.addDictData')
-            form: {
-                id: null,
-                dictTypeId: null,
-                dictLabel: '',
-                dictValue: '',
-                sort: 0
-            },
-            rules: {
-                dictLabel: [{ required: true, message: this.$t('dictDataDialog.requiredDictLabel'), trigger: 'blur' }],
-                dictValue: [{ required: true, message: this.$t('dictDataDialog.requiredDictValue'), trigger: 'blur' }]
-            }
-        }
     },
-    watch: {
+    dictData: {
-        dictData: {
+      type: Object,
-            handler(val) {
+      default: () => ({})
-                if (val) {
-                    this.form = { ...val }
-                }
-            },
-            immediate: true
-        },
-        dictTypeId: {
-            handler(val) {
-                if (val) {
-                    this.form.dictTypeId = val
-                }
-            },
-            immediate: true
-        },
-        visible(val) {
-          this.dialogVisible = val;
-        },
-        dialogVisible(val) {
-          this.$emit('update:visible', val);
-        }
     },
-    methods: {
+    dictTypeId: {
-        handleClose() {
+      type: [Number, String],
-          this.dialogVisible = false;
+      default: null
-          this.resetForm();
-        },
-        resetForm() {
-            this.form = {
-                id: null,
-                dictTypeId: this.dictTypeId,
-                dictLabel: '',
-                dictValue: '',
-                sort: 0
-            }
-            this.$refs.form?.resetFields()
-        },
-        handleSave() {
-            this.$refs.form.validate(valid => {
-                if (valid) {
-                    this.$emit('save', this.form)
-                }
-            })
-        }
     }
-}
+  },
+  components: {
+    CustomDialog
+  },
+  data() {
+    return {
+      dialogVisible: this.visible,
+      saving: false,
+      form: {
+        id: null,
+        dictTypeId: null,
+        dictLabel: '',
+        dictValue: '',
+        sort: 0
+      },
+      rules: {
+        dictLabel: [{ required: true, message: this.$t('dictDataDialog.requiredDictLabel'), trigger: 'blur' }],
+        dictValue: [{ required: true, message: this.$t('dictDataDialog.requiredDictValue'), trigger: 'blur' }]
+      }
+    };
+  },
+  watch: {
+    visible(val) {
+      this.dialogVisible = val;
+    },
+    dialogVisible(val) {
+      this.$emit('update:visible', val);
+      if (!val) {
+        this.saving = false;
+      }
+    },
+    dictData: {
+      handler(val) {
+        if (val) {
+          this.form = { ...val };
+        }
+      },
+      immediate: true
+    },
+    dictTypeId: {
+      handler(val) {
+        if (val) {
+          this.form.dictTypeId = val;
+        }
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    submit() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          this.saving = true;
+          this.$emit('save', this.form);
+        }
+      });
+    },
+    cancel() {
+      this.saving = false;
+      this.$emit('cancel');
+    },
+    resetSaving() {
+      this.saving = false;
+    }
+  }
+};
 </script>
 
-<style scoped>
+<style scoped lang="scss">
-.dialog-footer {
+.custom-input-number {
-    text-align: right;
+  width: 100%;
 }
-:deep(.el-dialog) {
+</style>
-    border-radius: 15px;
-}
-
-</style>

main/manager-web/src/components/DictTypeDialog.vue

@@ -1,97 +1,94 @@
 <template>
-    <el-dialog :title="title" :visible.sync="dialogVisible"  width="30%" @close="handleClose">
+  <CustomDialog
-        <el-form :model="form" :rules="rules" ref="form" label-width="auto">
+    :title="title"
-            <el-form-item :label="$t('dictTypeDialog.dictName')" prop="dictName">
+    :visible.sync="dialogVisible"
-                <el-input v-model="form.dictName" :placeholder="$t('dictTypeDialog.dictNamePlaceholder')"></el-input>
+    width="600px"
-            </el-form-item>
+    @confirm="submit"
-            <el-form-item :label="$t('dictTypeDialog.dictType')" prop="dictType">
+    @close="cancel"
-                <el-input v-model="form.dictType" :placeholder="$t('dictTypeDialog.dictTypePlaceholder')"></el-input>
+    :confirmLoading="saving"
-            </el-form-item>
+  >
-        </el-form>
+    <el-form :model="form" :rules="rules" ref="form" label-width="auto" label-position="left">
-        <div slot="footer" class="dialog-footer">
+      <el-form-item :label="$t('dictTypeDialog.dictName')" prop="dictName" class="form-item">
-            <el-button @click="handleClose">{{ $t('button.cancel') }}</el-button>
+        <el-input v-model="form.dictName" :placeholder="$t('dictTypeDialog.dictNamePlaceholder')" />
-            <el-button type="primary" @click="handleSave">{{ $t('button.save') }}</el-button>
+      </el-form-item>
-        </div>
+      <el-form-item :label="$t('dictTypeDialog.dictType')" prop="dictType" class="form-item">
-    </el-dialog>
+        <el-input v-model="form.dictType" :placeholder="$t('dictTypeDialog.dictTypePlaceholder')" />
+      </el-form-item>
+    </el-form>
+  </CustomDialog>
 </template>
 
 <script>
+import CustomDialog from './CustomDialog.vue';
 export default {
-    name: 'DictTypeDialog',
+  name: 'DictTypeDialog',
-    props: {
+  props: {
-        visible: {
+    visible: {
-            type: Boolean,
+      type: Boolean,
-            default: false
+      default: false
-        },
-        title: {
-            type: String,
-            default: () => this.$t('dictTypeDialog.addDictType')
-        },
-        dictTypeData: {
-            type: Object,
-            default: () => ({})
-        }
     },
-    data() {
+    title: {
-        return {
+      type: String,
-            dialogVisible: this.visible,
+      default: () => this.$t('dictTypeDialog.addDictType')
-            form: {
-                id: null,
-                dictName: '',
-                dictType: ''
-            },
-            rules: {
-                dictName: [{ required: true, message: this.$t('dictTypeDialog.requiredDictName'), trigger: 'blur' }],
-                dictType: [{ required: true, message: this.$t('dictTypeDialog.requiredDictType'), trigger: 'blur' }]
-            }
-        }
     },
-    watch: {
+    dictTypeData: {
-        visible(val) {
+      type: Object,
-          this.dialogVisible = val;
+      default: () => ({})
-        },
-        dialogVisible(val) {
-          this.$emit('update:visible', val);
-        },
-        dictTypeData: {
-            handler(val) {
-                if (val) {
-                    this.form = { ...val }
-                }
-            },
-            immediate: true
-        }
-    },
-    methods: {
-        handleClose() {
-            this.dialogVisible = false;
-            this.resetForm()
-        },
-        resetForm() {
-            this.form = {
-                id: null,
-                dictName: '',
-                dictType: ''
-            }
-            this.$refs.form?.resetFields()
-        },
-        handleSave() {
-            this.$refs.form.validate(valid => {
-                if (valid) {
-                    this.$emit('save', this.form)
-                }
-            })
-        }
     }
-}
+  },
+  components: {
+    CustomDialog
+  },
+  data() {
+    return {
+      dialogVisible: this.visible,
+      saving: false,
+      form: {
+        id: null,
+        dictName: '',
+        dictType: ''
+      },
+      rules: {
+        dictName: [{ required: true, message: this.$t('dictTypeDialog.requiredDictName'), trigger: 'blur' }],
+        dictType: [{ required: true, message: this.$t('dictTypeDialog.requiredDictType'), trigger: 'blur' }]
+      }
+    };
+  },
+  watch: {
+    visible(val) {
+      this.dialogVisible = val;
+    },
+    dialogVisible(val) {
+      this.$emit('update:visible', val);
+      if (!val) {
+        this.saving = false;
+      }
+    },
+    dictTypeData: {
+      handler(val) {
+        if (val) {
+          this.form = { ...val };
+        }
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    submit() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          this.saving = true;
+          this.$emit('save', this.form);
+        }
+      });
+    },
+    cancel() {
+      this.saving = false;
+      this.$emit('cancel');
+    },
+    resetSaving() {
+      this.saving = false;
+    }
+  }
+};
 </script>
-
-<style scoped>
-.dialog-footer {
-    text-align: right;
-}
-:deep(.el-dialog) {
-    border-radius: 15px;
-}
-
-</style>