shishengliang/log-lottery
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: new

Browse Source
This commit is contained in:
ex_zhangwenlei@exiot.cmcc
2024-01-06 00:53:50 +08:00
parent f66a1d2ae9
commit 4076bbe72e
27 changed files with 1094 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
src/views/Config/Global/FaceConfig.vue
View File

@@ -1,11 +1,29 @@
<script setup lang='ts'>
import { ref, watch } from 'vue'
import { ref, watch, onMounted } from 'vue'
import useStore from '@/store'
import { themeChange } from 'theme-change';
import zod from 'zod';
import daisyuiThemes from 'daisyui/src/theming/themes'
import { ColorPicker } from 'vue3-colorpicker';
import 'vue3-colorpicker/style.css';
import {isRgbOrRgba,isHex} from '@/utils/color'
const personConfig = useStore().personConfig
const { getTableRowCount: tableRowCount, getShowField} = personConfig
const globalConfig = useStore().globalConfig
const { getTheme: localTheme, getCardColor: cardColor,getTextColor:textColor,getCardSize:cardSize,getTextSize: textSize} = globalConfig
const { getTableRowCount: tableRowCount, getShowField } = personConfig
const colorPickerRef = ref()
interface ThemeDaType {
[key: string]: any
}
const themeValue = ref(localTheme.name)
const cardColorValue = ref(cardColor)
const textColorValue = ref(textColor)
const cardSizeValue = ref(cardSize)
const textSizeValue = ref(textSize)
const themeList = ref(Object.keys(daisyuiThemes))
const daisyuiThemeList = ref<ThemeDaType>(daisyuiThemes)
const formData = ref({
rowCount: tableRowCount,
showField: getShowField
@@ -34,19 +52,18 @@ const parseSchema = (props: ValidatePayload) => {
}
const handleChangeShowFields = (fieldItem: any) => {
formData.value.showField.map((item)=>{
if(item.label===fieldItem.label){
item.value=!item.value
}
})
}
// const handleChangeShowFields = (fieldItem: any) => {
// formData.value.showField.map((item) => {
// if (item.label === fieldItem.label) {
// item.value = !item.value
// }
// })
// }
watch(() => formData.value.rowCount, () => {
payload.rowCount = formData.value.rowCount
parseSchema(payload).then(res => {
console.log('code line-40 \n\r😀 res:\n\r', res);
if(res.rowCount){
if (res.rowCount) {
personConfig.setTableRowCount(res.rowCount)
}
})
@@ -56,7 +73,31 @@ watch(() => formData.value.rowCount, () => {
})
watch(() => formData.value.showField, () => {
personConfig.setShowFields(formData.value.showField)
},{deep:true})
}, { deep: true })
watch(themeValue, (val: any) => {
const selectedThemeDetail = daisyuiThemeList.value[val]
globalConfig.setTheme({ name: val, detail: selectedThemeDetail })
themeChange(val)
if(selectedThemeDetail.primary&&(isHex(selectedThemeDetail.primary)||isRgbOrRgba(selectedThemeDetail.primary))){
globalConfig.setCardColor(selectedThemeDetail.primary)
cardColorValue.value=selectedThemeDetail.primary
}
}, { deep: true })
watch(cardColorValue, (val: string) => {
globalConfig.setCardColor(val)
}, { deep: true })
watch(textColorValue, (val: string) => {
globalConfig.setTextColor(val)
}, { deep: true })
watch(cardSizeValue, (val: { width: number; height: number; }) => {
globalConfig.setCardSize(val)
}, { deep: true })
onMounted(() => {
})
</script>
<template>
@@ -73,16 +114,72 @@ watch(() => formData.value.showField, () => {
</span>
</div>
</label>
<label class="w-full max-w-xs form-control">
<!-- <label class="w-full max-w-xs form-control">
<div class="label">
<span class="label-text">展示字段</span>
</div>
<ul class="flex gap-6 pl-0">
<li v-for="item in formData.showField" :key="item" class="flex items-center gap-1">
<input type="checkbox" :checked="item.value" class="border-solid checkbox checkbox-primary border-1" @change="handleChangeShowFields(item)"/>
<input type="checkbox" :checked="item.value" class="border-solid checkbox checkbox-primary border-1"
@change="handleChangeShowFields(item)" />
<span class="label-text">{{ item.label }}</span>
</li>
</ul>
</label> -->
<label class="w-full max-w-xs form-control">
<div class="label">
<span class="label-text">选择主题</span>
</div>
<select data-choose-theme class="w-full max-w-xs border-solid select border-1" v-model="themeValue">
<option disabled selected>选取主题</option>
<option v-for="(item, index) in themeList" :key="index" :value="item">{{ item }}</option>
</select>
</label>
<label class="w-full max-w-xs form-control">
<div class="label">
<span class="label-text">卡片颜色</span>
</div>
<ColorPicker ref="colorPickerRef" v-model="cardColorValue" v-model:pure-color="cardColorValue"></ColorPicker>
</label>
<label class="w-full max-w-xs form-control">
<div class="label">
<span class="label-text">文字颜色</span>
</div>
<ColorPicker ref="colorPickerRef" v-model="textColorValue" v-model:pure-color="textColorValue"></ColorPicker>
</label>
<label class="flex flex-row w-full max-w-xs gap-10 mb-10 form-control">
<div>
<div class="label">
<span class="label-text">卡片宽度</span>
</div>
<input type="number" v-model="cardSizeValue.width" placeholder="Type here"
class="w-full max-w-xs input input-bordered" />
<div class="help">
<span class="text-sm text-red-400 help-text" v-if="formErr.rowCount">
{{ formErr.rowCount }}
</span>
</div>
</div>
<div>
<div class="label">
<span class="label-text">卡片高度</span>
</div>
<input type="number" v-model="cardSizeValue.height" placeholder="Type here"
class="w-full max-w-xs input input-bordered" />
<div class="help">
<span class="text-sm text-red-400 help-text" v-if="formErr.rowCount">
{{ formErr.rowCount }}
</span>
</div>
</div>
</label>
<label class="w-full max-w-xs mb-10 form-control">
<div class="label">
<span class="label-text">文字大小</span>
</div>
<input type="number" v-model="textSizeValue" placeholder="Type here"
class="w-full max-w-xs input input-bordered" />
</label>
</div>
</template>