...

src/components/SearchForm.vue

@@ -39,7 +39,7 @@ export const SearchFormProps = {
 		default: false
 	},
 	reset: {
-		type: Function as PropType<((initSearchData: Record<string, any>) => any)>
+		type: Function as PropType<(initSearchData: Record<string, any>) => any>
 	}
 }
 export const SearchForm = defineComponent({
@@ -89,7 +89,7 @@ export const SearchForm = defineComponent({
 		})
 		const vSlots = ctx.slots
 		const realForms = computed(() => {
-			return (props.forms || []).map((form) => {
+			return (props.forms || []).map(form => {
 				return {
 					...form,
 					le_slots: get_formSlots(vSlots, form.slots)
@@ -109,7 +109,7 @@ export const SearchForm = defineComponent({
 			const { searchData, formConfig = {}, triggerSearchAuto } = props
 			let warpClass = 'le-search-form-container' // labelStyle
 			const getItemStyle = (itemStyle, defaultWidth) => {
-				return itemStyle + ((/width\:/g).test(itemStyle) ? '' : `;width:${defaultWidth}`)
+				return itemStyle + (/width\:/g.test(itemStyle) ? '' : `;width:${defaultWidth}`)
 			}
 			const itemRender = (form, _label) => {
 				// 申明: onChange 会导致(类input) change后触发两次(组件定义一次,原生change一次) 对组件定义进行过滤,仅留原生触发,组件触发onChange 用change 替代
@@ -163,10 +163,7 @@ export const SearchForm = defineComponent({
 
 					// 自定义render
 					case 'render':
-						return <CustomRender
-							form={form}
-							params={searchData}
-						/>
+						return <CustomRender form={form} params={searchData} />
 					// 下拉框
 					case 'select':
 						return (
@@ -298,13 +295,7 @@ export const SearchForm = defineComponent({
 						)
 					// switch
 					case 'switch':
-						return <el-switch
-							{...formOthers}
-							v-model={searchData[prop]}
-							onChange={changeAndSearch}
-							style={_itemStyle}
-							disabled={disabled}
-						/>
+						return <el-switch {...formOthers} v-model={searchData[prop]} onChange={changeAndSearch} style={_itemStyle} disabled={disabled} />
 					case 'input':
 					default:
 						return (
@@ -351,21 +342,11 @@ export const SearchForm = defineComponent({
 							</el-row>
 						</el-form>
 						<div class="action-wrap">
-							<el-button
-								size="default"
-								plain
-								icon={Refresh}
-								disabled={props.loading}
-								onClick={local_resetHandler}>
-								{ t('le.btn.reset') }
+							<el-button size="default" plain icon={Refresh} disabled={props.loading} onClick={local_resetHandler}>
+								{t('le.btn.reset')}
 							</el-button>
-							<el-button
-								size="default"
-								type="primary"
-								loading={props.loading}
-								icon={Search}
-								onClick={searchHandler}>
-								{ t('le.btn.search') }
+							<el-button size="default" type="primary" loading={props.loading} icon={Search} onClick={searchHandler}>
+								{t('le.btn.search')}
 							</el-button>
 						</div>
 					</div>

src/views/components/index.vue

@@ -4,27 +4,14 @@
 		<div class="common_title" style="background: #f00">todo 选择人员 选择角色</div>
 		<div class="content">
 			<el-form ref="formRef" :class="`le-form-config`" :rules="rules" :model="numberValidateForm">
-				<el-form-item
-					label="age"
-					prop="age"
-				>
-					<el-input
-						v-model.number="numberValidateForm.age"
-						type="text"
-						autocomplete="off"
-					/>
+				<el-form-item label="age" prop="age">
+					<el-input v-model.number="numberValidateForm.age" type="text" autocomplete="off" />
 				</el-form-item>
-				<el-form-item
-					label="roles"
-					prop="roles"
-				>
+				<el-form-item label="roles" prop="roles">
 					<SelectRole v-model="numberValidateForm.roles"></SelectRole>
 				</el-form-item>
-				<el-form-item
-					label="users"
-					prop="users"
-				>
-					<SelectUser v-model="numberValidateForm.users" :max="1"></SelectUser>
+				<el-form-item label="users" prop="users">
+					<SelectUser v-model="numberValidateForm.users" :max="55"></SelectUser>
 				</el-form-item>
 			</el-form>
 			<el-form-item>
@@ -184,15 +171,15 @@ const rules = {
 	age: [
 		// { required: true, message: '请输入用户名', trigger: 'blur' },
 		// { min: 3, max: 15, message: '用户名长度应在3到15个字符之间', trigger: 'blur' }
-		{ required: true, message: '角色 is required'/*, trigger: ['blur', 'change']*/ }
+		{ required: true, message: '角色 is required' /*, trigger: ['blur', 'change']*/ }
 	],
 	roles: [
 		// { required: true, message: '请输入 roles', trigger: 'blur' },
 		{
 			required: true,
 			validator: (rule, value, callback) => {
-			if (!value || !value.length) callback(new Error('请选择 roles'))
-			},
+				if (!value || !value.length) callback(new Error('请选择 roles'))
+			}
 			// trigger: ['change', 'blur']
 		}
 	],
@@ -203,14 +190,14 @@ const rules = {
 			validator: (rule, value, callback) => {
 				console.error(value, ' xxxxxxxxxxxx')
 				if (!value || !value.length) callback(new Error('请选择 users'))
-			},
+			}
 			// trigger: ['change', 'blur']
 		}
 	]
 }
 const submitForm = () => {
 	if (!formRef.value) return
-	formRef.value.validate((valid) => {
+	formRef.value.validate(valid => {
 		if (valid) {
 			console.log('submit!', numberValidateForm)
 		} else {

src/views/dashboard/index.vue

@@ -1,8 +1,8 @@
 <template>
 	<el-scrollbar ref="dashboardRef" class="dashboard-container column-page-wrap">
 		<el-row :gutter="24">
-      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
-        <el-card class="info-wrap">
+			<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+				<el-card class="info-wrap">
 					<div class="desc-box pc:flex-1">
 						<img class="logo" src="@/assets/images/logo.png" />
 						<div class="desc-wrap pc:min-w-[300px]">
@@ -25,9 +25,8 @@
 						</div>
 					</div>
 				</el-card>
-      </el-col>
-    </el-row>
-
+			</el-col>
+		</el-row>
 
 		<el-row :gutter="12">
 			<el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
@@ -43,7 +42,7 @@
 								<svg-icon :icon-class="v.icon" class-name="icon" />
 								<div class="desc">
 									<div class="text-overflow_ellipsis">{{ v.label }}</div>
-									<le-text class="tip" :value="`${ v.label }快捷入口`"></le-text>
+									<le-text class="tip" :value="`${v.label}快捷入口`"></le-text>
 								</div>
 							</div>
 						</el-col>
@@ -51,18 +50,17 @@
 				</el-card>
 			</el-col>
 			<el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
-        <el-carousel style="margin-top: 12px;border-radius: 8px;" height="288px">
-          <el-carousel-item>
-            <img class="banner-img" src="@/assets/images/banner_01.webp" alt=""/>
-          </el-carousel-item>
-          <el-carousel-item>
-            <img class="banner-img" src="@/assets/images/banner_02.webp" alt=""/>
-          </el-carousel-item>
-        </el-carousel>
+				<el-carousel style="margin-top: 12px; border-radius: 8px" height="288px">
+					<el-carousel-item>
+						<img class="banner-img" src="@/assets/images/banner_01.webp" alt="" />
+					</el-carousel-item>
+					<el-carousel-item>
+						<img class="banner-img" src="@/assets/images/banner_02.webp" alt="" />
+					</el-carousel-item>
+				</el-carousel>
 			</el-col>
 		</el-row>
 
-
 		<el-row :gutter="12">
 			<el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
 				<el-card class="box-card">
@@ -74,28 +72,28 @@
 					<LeTable class="local_table" v-bind="tableOpts"></LeTable>
 				</el-card>
 			</el-col>
-		  <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
-        <!-- Echarts 图表 -->
-        <el-row :gutter="12">
-          <el-col :span="24" class="card-panel__col">
-            <el-card class="box-card box-card--type2">
-              <template #header>
-                <div class="common_title">
-                  <span>流量概况</span>
-                </div>
-              </template>
-              <LeChart
-                  ref="chartRef"
-                  style="background-color: var(--el-color-primary-light-9)"
-                  class="local_chartWrap"
-                  :loading="chartLoading"
-                  :show-chart="showChart"
-                  :option="chartOption"
-                  :height="height"
-              />
-            </el-card>
-          </el-col>
-<!--          <el-col :sm="24" :lg="12" class="card-panel__col">
+			<el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
+				<!-- Echarts 图表 -->
+				<el-row :gutter="12">
+					<el-col :span="24" class="card-panel__col">
+						<el-card class="box-card box-card--type2">
+							<template #header>
+								<div class="common_title">
+									<span>流量概况</span>
+								</div>
+							</template>
+							<LeChart
+								ref="chartRef"
+								style="background-color: var(--el-color-primary-light-9)"
+								class="local_chartWrap"
+								:loading="chartLoading"
+								:show-chart="showChart"
+								:option="chartOption"
+								:height="height"
+							/>
+						</el-card>
+					</el-col>
+					<!--          <el-col :sm="24" :lg="12" class="card-panel__col">
             <el-card class="box-card box-card&#45;&#45;type3">
               <template #header>
                 <div class="common_title">
@@ -111,8 +109,8 @@
               />
             </el-card>
           </el-col>-->
-        </el-row>
-      </el-col>
+				</el-row>
+			</el-col>
 		</el-row>
 	</el-scrollbar>
 </template>
@@ -338,54 +336,54 @@ new Promise(resolve => {
 	state.chartLoading2 = false
 })
 const flowList = [
-  {
-    icon: 'flow-car',
-    label: '组织管理'
-  },
-  {
-    icon: 'flow-cart',
-    label: '用户管理'
-  },
-  {
-    icon: 'flow-checklist',
-    label: '职位管理'
-  },
-  {
-    icon: 'flow-bank-card',
-    label: '角色管理'
-  },
-  {
-    icon: 'flow-approval',
-    label: '模块管理'
-  },
-  {
-    icon: 'flow-bell',
-    label: '菜单管理'
-  },
-  {
-    icon: 'flow-calendar',
-    label: '三方管理'
-  },
-  {
-    icon: 'flow-clock',
-    label: '数据字典'
-  },
-  {
-    icon: 'flow-coin',
-    label: '系统管理'
-  },
-  {
-    icon: 'flow-contract',
-    label: '会话管理'
-  },
-  {
-    icon: 'flow-dimission',
-    label: '访问日志'
-  },
-  {
-    icon: 'flow-exchange',
-    label: '操作日志'
-  }
+	{
+		icon: 'flow-car',
+		label: '组织管理'
+	},
+	{
+		icon: 'flow-cart',
+		label: '用户管理'
+	},
+	{
+		icon: 'flow-checklist',
+		label: '职位管理'
+	},
+	{
+		icon: 'flow-bank-card',
+		label: '角色管理'
+	},
+	{
+		icon: 'flow-approval',
+		label: '模块管理'
+	},
+	{
+		icon: 'flow-bell',
+		label: '菜单管理'
+	},
+	{
+		icon: 'flow-calendar',
+		label: '三方管理'
+	},
+	{
+		icon: 'flow-clock',
+		label: '数据字典'
+	},
+	{
+		icon: 'flow-coin',
+		label: '系统管理'
+	},
+	{
+		icon: 'flow-contract',
+		label: '会话管理'
+	},
+	{
+		icon: 'flow-dimission',
+		label: '访问日志'
+	},
+	{
+		icon: 'flow-exchange',
+		label: '操作日志'
+	}
 ]
 const tableOpts = ref({
 	list: [
@@ -432,46 +430,46 @@ const tableOpts = ref({
 		{
 			label: '协作者',
 			prop: 'users',
-      showOverflowTooltip: false,
-      slots: {
-        default: ({ row }) => {
-          return <div>
-            {
-              row.users.map(id => {
-                return <SvgIcon class="avatar-icon" icon-class={`avatar-${id}`}></SvgIcon>
-              })
-            }
-          </div>
-        }
-      }
-      // minWidth: '220px',
+			showOverflowTooltip: false,
+			slots: {
+				default: ({ row }) => {
+					return (
+						<div>
+							{row.users.map(id => {
+								return <SvgIcon class="avatar-icon" icon-class={`avatar-${id}`}></SvgIcon>
+							})}
+						</div>
+					)
+				}
+			}
+			// minWidth: '220px',
 		},
 		{
 			label: '测试者',
 			prop: 'tests',
-      showOverflowTooltip: false,
-      slots: {
-        default: ({ row }) => {
-          return <div>
-            {
-              row.tests.map(id => {
-                return <SvgIcon class="avatar-icon" icon-class={`avatar-${id}`}></SvgIcon>
-              })
-            }
-          </div>
-        }
-      }
+			showOverflowTooltip: false,
+			slots: {
+				default: ({ row }) => {
+					return (
+						<div>
+							{row.tests.map(id => {
+								return <SvgIcon class="avatar-icon" icon-class={`avatar-${id}`}></SvgIcon>
+							})}
+						</div>
+					)
+				}
+			}
 			// minWidth: '220px',
 		},
 		{
 			label: '完成度',
 			prop: 'status',
-      slots: {
-        default: ({ row }) => {
-          const config = ({ 1: { type: 'success', text: '完成' }, 2: { type: 'danger', text: '未完成' } })[row.status]
-          return <el-tag type={config.type}>{config.text}</el-tag>
-        }
-      }
+			slots: {
+				default: ({ row }) => {
+					const config = { 1: { type: 'success', text: '完成' }, 2: { type: 'danger', text: '未完成' } }[row.status]
+					return <el-tag type={config.type}>{config.text}</el-tag>
+				}
+			}
 			// minWidth: '220px',
 		}
 	],
@@ -572,7 +570,7 @@ const tableOpts = ref({
 	display: flex;
 	align-items: center;
 	margin-bottom: 16px;
-  overflow: hidden;
+	overflow: hidden;
 	&:hover {
 		cursor: pointer;
 		color: var(--el-color-primary);
@@ -580,7 +578,7 @@ const tableOpts = ref({
 	.icon {
 		color: #fff;
 		font-size: 50px;
-    flex-shrink: 0;
+		flex-shrink: 0;
 	}
 	.desc {
 		//padding-top: 10px;
@@ -628,17 +626,17 @@ const tableOpts = ref({
 			}
 		}
 	}
-  .avatar-icon {
-    font-size: 24px;
+	.avatar-icon {
+		font-size: 24px;
 		display: inline-block;
-    & + .avatar-icon {
-      margin-left: 4px;
-    }
-  }
+		& + .avatar-icon {
+			margin-left: 4px;
+		}
+	}
 }
 .banner-img {
-  width: 100%;
-  height: 100%;
+	width: 100%;
+	height: 100%;
 }
 
 // 手机端兼容