aizuda-web-vue3/src/views/components/index.vue

<template>
	<div class="flex-column-page-wrap pageWrap">
		Home
		<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>
				<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="55"></SelectUser>
				</el-form-item>
			</el-form>
			<el-form-item>
				<el-button type="primary" @click="submitForm">Submit</el-button>
			</el-form-item>
		</div>
		<div class="common_title">多语言 使用</div>
		<div class="content">
			<el-button size="small" @click="switchLang">
				lang: 切换
				<LeIcon icon-class="le-frozen" />
				<LeIcon icon-class="le-warning" />
				{{ $i18n.locale }}
			</el-button>
			<div>local文字: {{ $t('route.dashboard') }}</div>
			<div>src/locale 文字(携带 le前缀做区分): {{ $t('le.btn.add') }}</div>
		</div>
		<SearchGroup2Popover v-if="false" />
		<LeSelectDemo v-if="true" />
		<InputNumberDemo v-if="true" />
		<LeDraggableNestDemo v-if="true" />
		<Watermark v-if="true" />

		<div class="common_title">le-iconfont && LeIcon</div>
		<div class="content">
			<!--  单色样式类  -->
			<!--也可拼接 对应icon文件夹注入的icon 文件-->
			<SvgIcon icon-class="logo" />
			<LeIcon icon-class="icon-logo" />
			<span class="le-iconfont le-review"></span>
			<LeIcon icon-class="le-checkbox_checked"></LeIcon>
			<span class="le-iconfont le-checkbox_checked"></span>
			<LeIcon icon-class="le-checkbox"></LeIcon>
			<span class="le-iconfont le-checkbox"></span>
			<LeIcon icon-class="le-radio_checked"></LeIcon>
			<span class="le-iconfont le-radio_checked"></span>
			<LeIcon icon-class="le-radio"></LeIcon>
			<span class="le-iconfont le-radio"></span>
			<!--  svg  -->
			<LeIcon icon-class="le-frozen" @click="testHandler"></LeIcon>
			<!--Table 操作 用： Icon按钮-->
			<el-tooltip placement="top" :content="$t('le.btn.search')">
				<el-button class="le-icon-button" @click="testHandler('row')">
					<LeIcon icon-class="le-view"></LeIcon>
				</el-button>
			</el-tooltip>
		</div>

		<!--    <div class="common_title">下拉Dropdown LeDropdown</div>
    <div class="content">
      <LeDropdown v-model="dropdownValue" :options="dropdownOptions" clearable modelValue>
&lt;!&ndash;        <template #btn="{ selectOption, showClear }">
          <span class="le-dropdown-link">
            {{$log(showClear, 'showClear')}}
            {{selectOption.label}}
             <i :class="['action el-icon-arrow-down']" />
          </span>
        </template>&ndash;&gt;
      </LeDropdown>

      <LeDropdown v-model="dropdownValue" :options="dropdownOptions" @command="$log($event, 'command 测试')">
        <template #btn="testHandler">
          <span class="le-dropdown-link">
            {{testHandler}}
             <i :class="['action el-icon-arrow-down']" />
          </span>
        </template>
        <template slot="options">
          <el-dropdown-item
            v-for="opt in dropdownOptions"
            :key="opt.value"
            :command="opt.value"
            :disabled="opt.disabled"
          >
            -&#45;&#45;{{ opt.label }}&#45;&#45;&#45;&#45; label
          </el-dropdown-item>
        </template>
      </LeDropdown>
    </div>-->
		<div class="common_title">暂无数据 LeNoData</div>
		<div class="content">
			<LeNoData :message="`<div style='background: var(--el-color-danger);'>test: lang: ${$i18n.locale}</div>`" @click="$log('test....')">
				<template #extraContent>no data</template>
			</LeNoData>
		</div>

		<!--    <div class="common_title">ElCard Style</div>
    <div class="content">...</div>
    <div class="common_title">iconfont && LeIcon</div>
    <div class="content">
      <el-card shadow="never" class="le-card-bg picking-list" header="Picking List">
        <template slot="header">
          Picking List&#45;&#45;&#45;&#45;
          <el-button type="text">Clear</el-button>
        </template>
        123456
      </el-card>
    </div>-->
	</div>
</template>

<script setup name="home" lang="tsx">
import { ref, reactive } from 'vue'
import SearchGroup2Popover from './components/SearchGroup2Popover'
import LeSelectDemo from './components/LeSelectDemo'
import InputNumberDemo from './components/InputNumberDemo'
import LeDraggableNestDemo from './components/LeDraggableNestDemo'
import Watermark from './components/Watermark'
import SelectRole from '@/components/SelectRole.vue'
import SelectUser from '@/components/SelectUser.vue'
import useStore from '@/store/index'
import { useI18n } from 'vue-i18n'
// import i18n from '@/lang'
const dropdownValue = ref()
const dropdownOptions = ref([
	{
		label: 'in',
		value: 0
	},
	{
		label: 'cm',
		value: 1
	}
])
const testHandler = () => {
	console.error('testHandler...')
}
const { locale } = useI18n()
const switchLang = () => {
	// let lang = this.$i18n.locale
	// let lang = i18n.global.locale.value
	let lang = locale.value
	if (lang === 'en') {
		lang = 'zh-cn'
	} else {
		lang = 'en'
	}
	// console.error(lang, 'lang')
	locale.value = lang
	const { app } = useStore()
	app.setLanguage(lang)
	// i18n.global.setLocaleMessage(lang)
	// this.$i18n.locale = lang
	// this.$i18n.fallbackLocale = lang
}
const formRef = ref()
const numberValidateForm = reactive({
	age: '',
	roles: undefined,
	// roles: [
	// 	{id: "1456247408778260482",
	// 	name: "技术总监"}
	// ],
	users: undefined
})
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']*/ }
	],
	roles: [
		// { required: true, message: '请输入 roles', trigger: 'blur' },
		{
			required: true,
			validator: (rule, value, callback) => {
				if (!value || !value.length) callback(new Error('请选择 roles'))
			}
			// trigger: ['change', 'blur']
		}
	],
	users: [
		// { required: true, message: '请输入 users' },
		{
			required: true,
			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 => {
		if (valid) {
			console.log('submit!', numberValidateForm)
		} else {
			console.log('error submit!')
		}
	})
}
</script>
<style lang="scss" scoped>
.pageWrap {
	padding: 10px 12px;
	overflow: auto;
}
.le-iconfont {
	color: #0d84ff;
}
</style>