refactor: 删除选择器组件多余配置

main
wu.jian2 2 years ago
parent b91c001326
commit 44df75cc81

@ -59,7 +59,8 @@ export default {
} }
}, },
watch: { }, watch: { },
created () { }, created () {
},
mounted () { mounted () {
window.dataSetFields = [] window.dataSetFields = []
this.changeStyle(this.config) this.changeStyle(this.config)
@ -120,6 +121,7 @@ export default {
return config return config
}, },
changeStyle (config) { changeStyle (config) {
config = { ...this.config, ...config }
this.innerConfig = config this.innerConfig = config
// //
const selectInputEl = document.querySelector(`.select-${config.code} .el-input__inner`) const selectInputEl = document.querySelector(`.select-${config.code} .el-input__inner`)
@ -164,11 +166,11 @@ export default {
item.style.setProperty('--dropDownHoverBackgroundColor', this.innerConfig.customize.dropDownHoverBackgroundColor) item.style.setProperty('--dropDownHoverBackgroundColor', this.innerConfig.customize.dropDownHoverBackgroundColor)
}) })
// //
const selectDropdownItemSelectedEl = document.querySelectorAll(`.select-popper-${this.innerConfig.code} .el-select-dropdown__item.selected`) // const selectDropdownItemSelectedEl = document.querySelectorAll(`.select-popper-${this.innerConfig.code} .el-select-dropdown__item.selected`)
selectDropdownItemSelectedEl.forEach(item => { // selectDropdownItemSelectedEl.forEach(item => {
item.style.color = this.innerConfig.customize.activeFontColor // item.style.color = this.innerConfig.customize.activeFontColor
item.style.backgroundColor = this.innerConfig.customize.activeBackgroundColor // item.style.backgroundColor = this.innerConfig.customize.activeBackgroundColor
}) // })
} }
// 使 // 使
const selectDropdownItemEl = document.querySelectorAll(`.select-popper-${this.innerConfig.code} .el-select-dropdown__item`) const selectDropdownItemEl = document.querySelectorAll(`.select-popper-${this.innerConfig.code} .el-select-dropdown__item`)

@ -19,7 +19,9 @@
<div class="lc-field-body"> <div class="lc-field-body">
<PosWhSetting :config="config" /> <PosWhSetting :config="config" />
</div> </div>
<SettingTitle v-if="config.border"></SettingTitle> <SettingTitle v-if="config.border">
边框
</SettingTitle>
<div class="lc-field-body"> <div class="lc-field-body">
<BorderSetting <BorderSetting
v-if="config.border" v-if="config.border"
@ -52,31 +54,6 @@
:predefine="predefineThemeColors" :predefine="predefineThemeColors"
/> />
</el-form-item> </el-form-item>
<!-- 下拉框是否需要边框 -->
<!-- <el-form-item label="下拉框边框">
<el-switch v-model="config.customize.dropDownBorder" />
</el-form-item> -->
<!-- 下拉框如果有边框再选择边框颜色 -->
<!-- <el-form-item
v-if="config.customize.dropDownBorder"
label="下拉框边框颜色"
>
<ColorPicker
v-model="config.customize.dropDownBorderColor"
:predefine="predefineThemeColors"
/>
</el-form-item> -->
<!-- hover 颜色 -->
<!-- 下拉框字体大小 -->
<!-- <el-form-item label="下拉框字体大小">
<el-input-number
v-model="config.customize.dropDownFontSize"
class="bs-el-input-number"
:min="12"
:max="100"
/>
</el-form-item> -->
<!-- 下拉框字体颜色 -->
</div> </div>
<SettingTitle>下拉项</SettingTitle> <SettingTitle>下拉项</SettingTitle>
<!-- 选择器下拉框背景颜色 --> <!-- 选择器下拉框背景颜色 -->
@ -107,20 +84,6 @@
:predefine="predefineThemeColors" :predefine="predefineThemeColors"
/> />
</el-form-item> </el-form-item>
<!-- 激活项背景颜色 -->
<el-form-item label="激活项背景颜色">
<ColorPicker
v-model="config.customize.activeBackgroundColor"
:predefine="predefineThemeColors"
/>
</el-form-item>
<!-- 激活项文字颜色 -->
<el-form-item label="激活项文字颜色">
<ColorPicker
v-model="config.customize.activeFontColor"
:predefine="predefineThemeColors"
/>
</el-form-item>
</div> </div>
</el-form> </el-form>
</div> </div>

@ -25,9 +25,8 @@ export const settingConfig = {
const customConfig = { const customConfig = {
type: 'select', type: 'select',
// 名称 // 名称
title: '下拉框',
root: { root: {
version: '2023071001' version: '2023091402'
}, },
// 自定义属性 // 自定义属性
customize: { customize: {
@ -44,11 +43,7 @@ const customConfig = {
// 下拉项hover背景颜色 // 下拉项hover背景颜色
dropDownHoverBackgroundColor: '#6A7E9D', dropDownHoverBackgroundColor: '#6A7E9D',
// 下拉项hover字体颜色 // 下拉项hover字体颜色
dropDownHoverFontColor: '#FFFFFF', dropDownHoverFontColor: '#FFFFFF'
// 激活项背景颜色
activeBackgroundColor: '#6A7E9D',
// 激活项字体颜色
activeFontColor: '#FFFFFF'
} }
} }
export const dataConfig = { export const dataConfig = {

@ -93,7 +93,7 @@ import borderComponents from 'data-room-ui/BorderComponents/bordersList'
export default { export default {
name: 'ComponentDialog', name: 'ComponentDialog',
mixins: [pageMixins], mixins: [pageMixins],
model: { model: {
prop: 'type', prop: 'type',
event: 'select' event: 'select'
}, },
@ -114,19 +114,18 @@ export default {
code: '', code: '',
focus: -1, focus: -1,
searchKey: '', searchKey: '',
remoteComponentlist: [], remoteComponentlist: []
} }
}, },
computed: { computed: {
remoteComponentsGridComputed () { remoteComponentsGridComputed () {
return this.remoteComponentlist.length > 3 return this.remoteComponentlist.length > 3
}, }
}, },
watch: { watch: {
}, },
mounted () { mounted () {
this.remoteComponentlist = [...borderComponents] this.remoteComponentlist = [...borderComponents]
console.log(this.remoteComponentlist)
}, },
methods: { methods: {
chooseComponent (component) { chooseComponent (component) {
@ -144,9 +143,8 @@ export default {
confirm () { confirm () {
this.dialogVisible = false this.dialogVisible = false
if (isEmpty(this.focus)) return if (isEmpty(this.focus)) return
console.log(this.focus.title)
this.$emit('select', this.focus.title) this.$emit('select', this.focus.title)
}, }
} }
} }

@ -29,9 +29,9 @@
class="bs-el-input" class="bs-el-input"
/> />
</el-form-item> </el-form-item>
<el-form-item <el-form-item
label="组件类型"
v-if="type === 'bizComponent'" v-if="type === 'bizComponent'"
label="组件类型"
> >
<el-select <el-select
v-model="bizType" v-model="bizType"
@ -145,20 +145,20 @@ export default {
}, },
data () { data () {
return { return {
bizType:'native', bizType: 'native',
resolutionRatioValue: '', resolutionRatioValue: '',
resolutionRatio: {}, resolutionRatio: {},
BizList:[ BizList: [
{ {
label:'echarts组件', label: 'echarts组件',
value:'echarts' value: 'echarts'
}, { }, {
label:'g2Plot组件', label: 'g2Plot组件',
value:'g2plot' value: 'g2plot'
}, { }, {
label:'基础组件', label: '基础组件',
value:'native' value: 'native'
}, }
], ],
resolutionRatioOptions: [ resolutionRatioOptions: [
{ {
@ -252,7 +252,7 @@ export default {
closeAddDialog () { closeAddDialog () {
this.formVisible = false this.formVisible = false
this.$refs.dataForm.resetFields() this.$refs.dataForm.resetFields()
this.bizType='native' this.bizType = 'native'
}, },
// //
init (nodeData, parentCode) { init (nodeData, parentCode) {
@ -455,13 +455,13 @@ export default {
// //
toDesign (form) { toDesign (form) {
const path = this.type === 'component' ? (window.BS_CONFIG?.routers?.designUrl || '/big-screen/design') : 'big-screen-biz-component-design' const path = this.type === 'component' ? (window.BS_CONFIG?.routers?.designUrl || '/big-screen/design') : 'big-screen-biz-component-design'
const { href: bigScreenHref } =this.type=='bizComponent'? this.$router.resolve({ const { href: bigScreenHref } = this.type == 'bizComponent' ? this.$router.resolve({
path, path,
query: { query: {
code: form.code, code: form.code,
type:this.bizType type: this.bizType
} }
}):this.$router.resolve({ }) : this.$router.resolve({
path, path,
query: { query: {
code: form.code code: form.code

Loading…
Cancel
Save