修改测试用例

src/views/system/subject/form/index.vue

@@ -1,12 +1,12 @@
 <template>
-    <el-dialog draggable  v-model="dialogVisible" :title="title" :before-close="Cancel">
-        <el-form :inline="false" :model="configStore" label-width="auto">
+    <el-dialog draggable v-model="dialogVisible" :title="title" :before-close="Cancel">
+        <el-form :inline="false" :model="configStore" label-width="auto" ref="formRef" :rules="rules">
             <el-divider border-style="dashed">全局</el-divider>
             <div class="layout-config-global form-two">
-                <el-form-item label="组件主名称">
-                    <el-input v-model="configStore.name" placeholder="请输入主题名称" />
+                <el-form-item label="组件主名称" prop="name">
+                    <el-input v-model.trim="configStore.name" placeholder="请输入主题名称" maxlength="32" show-word-limit />
                 </el-form-item>
-                <el-form-item label="后台页面切换动画">
+                <el-form-item label="后台页面切换动画" prop="mainAnimation">
                     <el-select v-model="configStore.mainAnimation">
                         <el-option label="slide-right" value="slide-right"></el-option>
                         <el-option label="slide-left" value="slide-left"></el-option>
@@ -17,22 +17,23 @@
                         <el-option label="el-zoom-in-bottom" value="el-zoom-in-bottom"></el-option>
                     </el-select>
                 </el-form-item>
-                <el-form-item label="组件主题色">
+                <el-form-item label="组件主题色" prop="elementUiPrimary">
                     <el-color-picker v-model="configStore.elementUiPrimary[0]" />
                 </el-form-item>
-                <el-form-item label="表格标题栏背景颜色">
+                <el-form-item label="表格标题栏背景颜色" prop="tableHeaderBackground">
                     <el-color-picker v-model="configStore.tableHeaderBackground[0]" />
                 </el-form-item>
-                <el-form-item label="表格标题栏文字颜色">
+                <el-form-item label="表格标题栏文字颜色" prop="tableHeaderColor">
                     <el-color-picker v-model="configStore.tableHeaderColor[0]" />
                 </el-form-item>
-                <el-form-item label="表格激活栏颜色">
+                <el-form-item label="表格激活栏颜色" prop="tableCurrent">
                     <el-color-picker v-model="configStore.tableCurrent[0]" />
                 </el-form-item>
-                <el-form-item label="组件主描述">
+                <el-form-item label="组件主描述" prop="remark">
                     <el-input
-                        v-model="configStore.remark"
+                        v-model.trim="configStore.remark"
                         :autosize="{ minRows: 2, maxRows: 4 }"
+                        maxlength="300" show-word-limit
                         type="textarea"
                         placeholder="请输入描述"
                     />
@@ -40,32 +41,32 @@
             </div>
             <el-divider border-style="dashed">侧边栏</el-divider>
             <div class="layout-config-aside form-two">
-                <el-form-item label="侧边菜单栏背景色">
+                <el-form-item label="侧边菜单栏背景色" prop="menuBackground">
                     <el-color-picker v-model="configStore.menuBackground[0]" />
                 </el-form-item>
-                <el-form-item label="侧边菜单文字颜色">
+                <el-form-item label="侧边菜单文字颜色" prop="menuColor">
                     <el-color-picker v-model="configStore.menuColor[0]" />
                 </el-form-item>
-                <el-form-item label="侧边菜单激活项背景色">
+                <el-form-item label="侧边菜单激活项背景色" prop="menuActiveBackground">
                     <el-color-picker v-model="configStore.menuActiveBackground[0]" />
                 </el-form-item>
-                <el-form-item label="侧边菜单激活项文字色">
+                <el-form-item label="侧边菜单激活项文字色" prop="menuActiveColor">
                     <el-color-picker v-model="configStore.menuActiveColor[0]" />
                 </el-form-item>
-                <el-form-item label="侧边菜单顶栏背景色">
+                <el-form-item label="侧边菜单顶栏背景色" prop="menuTopBarBackground">
                     <el-color-picker v-model="configStore.menuTopBarBackground[0]" />
                 </el-form-item>
             </div>
 
             <el-divider border-style="dashed">顶栏</el-divider>
             <div class="layout-config-aside form-two">
-                <el-form-item label="顶栏背景色">
+                <el-form-item label="顶栏背景色" prop="headerBarBackground">
                     <el-color-picker v-model="configStore.headerBarBackground[0]" />
                 </el-form-item>
-                <el-form-item label="顶栏文字色">
+                <el-form-item label="顶栏文字色" prop="headerBarTabColor">
                     <el-color-picker v-model="configStore.headerBarTabColor[0]" />
                 </el-form-item>
-                <el-form-item label="顶栏logo">
+                <el-form-item label="顶栏logo" prop="logoFile">
                     <el-image
                         style="height: 50px"
                         :src="logoFile.url"
@@ -133,11 +134,176 @@ const configStore = ref({
     faviconFile: '',
     remark: ''
 })
-
+// 完善校验规则
+const rules = reactive({
+    name: [{ required: true, message: '请输入组件主名称', trigger: 'blur' }],
+    remark: [{ required: true, message: '请输入组件备注', trigger: 'blur' }],
+    mainAnimation: [{ required: true, message: '请选择页面切换动画', trigger: 'change' }],
+    elementUiPrimary: [
+        {
+            required: true,
+            validator: (rule: any, value: any, callback: any) => {
+                if (!value || !value[0]) {
+                    callback(new Error('请选择组件主题色'))
+                } else {
+                    callback()
+                }
+            },
+            trigger: 'change'
+        }
+    ],
+    tableHeaderBackground: [
+        {
+            required: true,
+            validator: (rule: any, value: any, callback: any) => {
+                if (!value || !value[0]) {
+                    callback(new Error('请选择表格标题栏背景颜色'))
+                } else {
+                    callback()
+                }
+            },
+            trigger: 'change'
+        }
+    ],
+    tableHeaderColor: [
+        {
+            required: true,
+            validator: (rule: any, value: any, callback: any) => {
+                if (!value || !value[0]) {
+                    callback(new Error('请选择表格标题栏文字颜色'))
+                } else {
+                    callback()
+                }
+            },
+            trigger: 'change'
+        }
+    ],
+    tableCurrent: [
+        {
+            required: true,
+            validator: (rule: any, value: any, callback: any) => {
+                if (!value || !value[0]) {
+                    callback(new Error('请选择表格激活栏颜色'))
+                } else {
+                    callback()
+                }
+            },
+            trigger: 'change'
+        }
+    ],
+    menuBackground: [
+        {
+            required: true,
+            validator: (rule: any, value: any, callback: any) => {
+                if (!value || !value[0]) {
+                    callback(new Error('请选择侧边菜单栏背景色'))
+                } else {
+                    callback()
+                }
+            },
+            trigger: 'change'
+        }
+    ],
+    menuColor: [
+        {
+            required: true,
+            validator: (rule: any, value: any, callback: any) => {
+                if (!value || !value[0]) {
+                    callback(new Error('请选择侧边菜单文字颜色'))
+                } else {
+                    callback()
+                }
+            },
+            trigger: 'change'
+        }
+    ],
+    menuActiveBackground: [
+        {
+            required: true,
+            validator: (rule: any, value: any, callback: any) => {
+                if (!value || !value[0]) {
+                    callback(new Error('请选择侧边菜单激活项背景色'))
+                } else {
+                    callback()
+                }
+            },
+            trigger: 'change'
+        }
+    ],
+    menuActiveColor: [
+        {
+            required: true,
+            validator: (rule: any, value: any, callback: any) => {
+                if (!value || !value[0]) {
+                    callback(new Error('请选择侧边菜单激活项文字色'))
+                } else {
+                    callback()
+                }
+            },
+            trigger: 'change'
+        }
+    ],
+    menuTopBarBackground: [
+        {
+            required: true,
+            validator: (rule: any, value: any, callback: any) => {
+                if (!value || !value[0]) {
+                    callback(new Error('请选择侧边菜单顶栏背景色'))
+                } else {
+                    callback()
+                }
+            },
+            trigger: 'change'
+        }
+    ],
+    headerBarBackground: [
+        {
+            required: true,
+            validator: (rule: any, value: any, callback: any) => {
+                if (!value || !value[0]) {
+                    callback(new Error('请选择顶栏背景色'))
+                } else {
+                    callback()
+                }
+            },
+            trigger: 'change'
+        }
+    ],
+    headerBarTabColor: [
+        {
+            required: true,
+            validator: (rule: any, value: any, callback: any) => {
+                if (!value || !value[0]) {
+                    callback(new Error('请选择顶栏文字色'))
+                } else {
+                    callback()
+                }
+            },
+            trigger: 'change'
+        }
+    ],
+    logoFile: [
+        {
+            required: true,
+            validator: (rule: any, value: any, callback: any) => {
+                // 编辑时如果已有图片则不校验
+                if (title.value === '修改主题' && logoFile.url) {
+                    callback()
+                } else if (!value && !logoFile.url) {
+                    callback(new Error('请上传顶栏logo'))
+                } else {
+                    callback()
+                }
+            },
+            trigger: 'change'
+        }
+    ]
+})
 const logoFile = reactive({
     url: '',
     raw: ''
 })
+const formRef = ref()
 
 const open = (e: any) => {
     title.value = e.text
@@ -167,50 +333,54 @@ const open = (e: any) => {
 }
 // 确定主题
 const onSubmit = () => {
-    configStore.value.faviconFile = configStore.value.logoFile
-    configStore.value.color = configStore.value.elementUiPrimary[0]
-    let form = new FormData()
-    for (let k in configStore.value) {
-        if (
-            k == 'logoFile' ||
-            k == 'faviconFile' ||
-            k == 'name' ||
-            k == 'color' ||
-            k == 'remark' ||
-            k == 'mainAnimation' ||
-            k == 'id'
-        ) {
-            form.append(k, configStore.value[k])
-        } else if (k == 'logoUrl' || k == 'faviconUrl') {
-            if (configStore.value.logoFile == null) {
-                let str = configStore.value[k].match(/base64,([^"]+)/)[1]
-                let bin = atob(str)
-                let arr = new Array(bin.length)
-                for (let i = 0; i < bin.length; i++) {
-                    arr[i] = bin.charCodeAt(i)
+    formRef.value.validate((valid: boolean) => {
+        if (valid) {
+            configStore.value.faviconFile = configStore.value.logoFile
+            configStore.value.color = configStore.value.elementUiPrimary[0]
+            let form = new FormData()
+            for (let k in configStore.value) {
+                if (
+                    k == 'logoFile' ||
+                    k == 'faviconFile' ||
+                    k == 'name' ||
+                    k == 'color' ||
+                    k == 'remark' ||
+                    k == 'mainAnimation' ||
+                    k == 'id'
+                ) {
+                    form.append(k, configStore.value[k])
+                } else if (k == 'logoUrl' || k == 'faviconUrl') {
+                    if (configStore.value.logoFile == null) {
+                        let str = configStore.value[k].match(/base64,([^"]+)/)[1]
+                        let bin = atob(str)
+                        let arr = new Array(bin.length)
+                        for (let i = 0; i < bin.length; i++) {
+                            arr[i] = bin.charCodeAt(i)
+                        }
+                        let b = new Uint8Array(arr)
+                        const blob = new Blob([b], { type: 'image/jpeg' })
+                        form.append('faviconFile', blob)
+                        form.append('logoFile', blob)
+                    }
+                } else {
+                    form.append(k, JSON.stringify(configStore.value[k]))
                 }
-                let b = new Uint8Array(arr)
-                const blob = new Blob([b], { type: 'image/jpeg' })
-                form.append('faviconFile', blob)
-                form.append('logoFile', blob)
             }
-        } else {
-            form.append(k, JSON.stringify(configStore.value[k]))
-        }
-    }
 
-    if (title.value == '新增主题') {
-        addTheme(form).then(res => {
-            ElMessage.success('新增成功')
-            Cancel()
-        })
-    }
-    if (title.value == '修改主题') {
-        updateTheme(form).then(res => {
-            ElMessage.success('修改成功')
-            Cancel()
-        })
-    }
+            if (title.value == '新增主题') {
+                addTheme(form).then(res => {
+                    ElMessage.success('新增成功')
+                    Cancel()
+                })
+            }
+            if (title.value == '修改主题') {
+                updateTheme(form).then(res => {
+                    ElMessage.success('修改成功')
+                    Cancel()
+                })
+            }
+        }
+    })
 }
 // 取消
 const Cancel = () => {