Skip to content

H
hs-sky-ui
Commit b943f812 authored by 何虹's avatar 何虹 💬
Browse files
Options

优化组件

parent 0a056cc4
Show whitespace changes
Inline Side-by-side
Showing with 204 additions and 227 deletions
src/components/HelloWorld.vue
View file @ b943f812
<template>
<div style="width:500px">
<hsSelectPlus
ref='select'
v-model="selectValue"
:allSourceData='allSourceData'
:requestMethod='requestMethod'
></hsSelectPlus>
<el-button @click="change1">change1</el-button>
<el-button @click="change2">change2</el-button>
<hsCheckboxGroup
<hsSwitch
v-model="checkList"
:allSourceData='configData'
></hsCheckboxGroup>
></hsSwitch>
</div>
</template>
......@@ -21,77 +13,20 @@ export default {
mixins: [uc],
data() {
return {
checkList:'B,A',
selectValue: "1052069380861628416",
allSourceData: {
config: {
url: "",
isInnerRequest: true,
proxyTag: "commonUtilAPI",
ref: {
const_id: "0",
table_name: "im_store_group",
columns: "id,name",
remote_condition: "",
displayfield: "",
writebackfield: []
},
dyncQueryParms: {},
multiple: false,
disabled: false,
size: "mini",
clearable: true,
title: "标题",
placeholder: "请选择",
value: "id",
label: "name",
is_computed: false
},
sourceData: []
},
show: false,
config: {
url: "",
proxyTag: "commonUtilAPI",
ref: {
const_id: "0",
table_name: "im_store_group",
columns: "id,name",
remote_condition: "",
displayfield: "",
writebackfield: []
},
dyncQueryParms: {},
multiple: false,
disabled: false,
size: "mini",
clearable: true,
title: "标题",
placeholder: "请选择",
value: "id",
label: "name",
is_computed: false
},
value1: "",
checkList: "",
configData: {
sourceData: [
{
label: "A"
},
{
label: "B"
sourceData: [],
config: {
activeText: "A",
inactiveText: "B",
changeed: () => {
console.log(21312);
}
}
],
config: {}
}
};
},
methods: {
change1() {
this.allSourceData.sourceData = [{ value: 1, label: 2 }];
},
change2() {
this.allSourceData.sourceData = [{ value: 2, label: 3 }];
}
}
methods: {}
};
</script>
\ No newline at end of file
src/packages/hs-computed/index.vue
View file @ b943f812
<template>
<div class="hsInputBox" :id='elId'>
<div
class="hsInputBox"
:id='elId'
>
<div class="inputCurr">
<span>{{valueTxt}}</span>
</div>
<jsoneditor v-model='jsoneditorVisible'
<jsoneditor
v-model='jsoneditorVisible'
:elInfo='elInfo'
:layout='layout'
:jsoneditorCloseAfter='jsoneditorCloseAfter'
......@@ -13,28 +17,28 @@
</div>
</template>
<script>
import ucComponent from '../ucClass/uc_component'
import jsoneditor from '../common/jsoneditor'
import ucComponent from "../ucClass/uc_component";
import jsoneditor from "../common/jsoneditor";
export default {
mixins: [ucComponent],
components: {
jsoneditor
},
name: 'hsComputed',
name: "hsComputed",
props: {
allSourceData: {
type: Object,
default() {
return {}
return {};
}
},
elInfo: {
type: Object,
default() {
return {}
return {};
}
},
value: '',
value: "",
layout: {},
jsoneditorCloseAfter: {
type: Function
......@@ -45,73 +49,72 @@ export default {
formData: {
type: Object,
default() {
return {}
return {};
}
}
},
watch: {
allSourceData: {
handler: function(newVal, oldVal) {
const { config } = newVal
this.initConfig(config)
const { config } = newVal;
this.initConfig(config);
},
deep: true
},
value(val) {
this.value_inner = val
this.value_inner = val;
},
value_inner(val) {
this.$emit('input', val)
this.$emit("input", val);
},
formData: {
handler: function(newVal, oldVal) {
this.computedTxt(newVal)
this.valueTxt = this.computedTxt(newVal);
},
deep: true
}
},
data() {
return {
elId: '',
value_inner: '',
elId: "",
value_inner: "",
jsoneditorVisible: false,
sourceData: [],
configData: {
},
valueTxt: '0'
}
configData: {},
valueTxt: "0"
};
},
mounted() {
this.$nextTick(() => {
const { config, sourceData } = this.allSourceData
this.sourceData = sourceData
this.initConfig(config)
})
const { config, sourceData } = this.allSourceData;
this.sourceData = sourceData;
this.initConfig(config);
});
},
methods: {
computedTxt() {
const { click } = this.configData
const type = typeof click
if (type === 'function') {
click(this.formData)
const { click } = this.configData;
const type = typeof click;
if (type === "function") {
return click(this.formData);
}
},
initConfig(config = {}) {
this.configData = Object.assign(this.configData, config)
this.computedTxt()
this.configData = Object.assign(this.configData, config);
this.valueTxt = this.computedTxt();
}
}
}
};
</script>
<style scoped>
.hsInputBox{
.hsInputBox {
padding: 1px;
width:100%;
height:100%;
width: 100%;
height: 100%;
display: flex;
}
.inputCurr{
.inputCurr {
display: flex;
justify-content: center;
align-items: center;
......
src/packages/hs-date-picker/index.vue
View file @ b943f812
<template>
<div :id='elId' class="selectBoxPlus" style='width:100%;height:100%;'>
<div class="contarnBox" style='width:100%;height:100%;'>
<div class="selectTitle" v-show='configData.title'>{{configData.title}}</div>
<div class="selectCurr" style='width:80%;height:100%;'>
<template v-if='elInfo.el=="hsDatePicker"'>
<div
:id='elId'
class="selectBoxPlus"
style='width:100%;height:100%;'
>
<div
class="contarnBox"
style='width:100%;height:100%;'
>
<div
class="selectTitle"
v-show='configData.title'
>{{configData.title}}</div>
<div
class="selectCurr"
style='width:80%;height:100%;'
>
<el-date-picker
@change='changed'
size='mini'
v-model="value_inner"
:type="configData.type"
......@@ -12,12 +25,13 @@
:placeholder="configData.placeholder"
:range-separator="configData.rangeSeparator"
:start-placeholder="configData.startPlaceholder"
:end-placeholder="configData.endPlaceholder">
:end-placeholder="configData.endPlaceholder"
>
</el-date-picker>
</template>
</div>
</div>
<jsoneditor v-model='jsoneditorVisible'
<jsoneditor
v-model='jsoneditorVisible'
:elInfo='elInfo'
:layout='layout'
:jsoneditorCloseAfter='jsoneditorCloseAfter'
......@@ -27,28 +41,28 @@
</div>
</template>
<script>
import jsoneditor from '../common/jsoneditor'
import ucComponent from '../ucClass/uc_component'
import jsoneditor from "../common/jsoneditor";
import ucComponent from "../ucClass/uc_component";
export default {
mixins: [ucComponent],
components: {
jsoneditor
},
name: 'hsDatePicker',
name: "hsDatePicker",
props: {
elInfo: {
type: Object,
default() {
return {}
return {};
}
},
allSourceData: {
type: Object,
default() {
return {}
return {};
}
},
value: '',
value: "",
layout: {},
jsoneditorCloseAfter: {
type: Function
......@@ -60,81 +74,92 @@ export default {
watch: {
allSourceData: {
handler: function(newVal, oldVal) {
const { config } = newVal
this.initConfig(config)
const { config } = newVal;
this.initConfig(config);
},
deep: true
},
value(val) {
this.value_inner = val
this.value_inner = val;
},
value_inner(val) {
this.$emit('input', val)
this.$emit("input", val);
}
},
data() {
return {
elId: '',
value_inner: '',
elId: "",
value_inner: "",
jsoneditorVisible: false,
configData: {}
}
};
},
mounted() {
const { config } = this.allSourceData
this.initConfig(config)
const { config } = this.allSourceData;
this.initConfig(config);
},
methods: {
execAction(actionName, value) {
const type = typeof actionName;
if (type === "function") {
actionName(value, this.formData);
}
},
changed(value) {
this.$emit('changed',value);
const { changed } = this.configData;
this.execAction(changed,value)
},
initConfig(config) {
if (!config) return
this.configData = config
if (!config) return;
this.configData = config;
}
}
}
};
</script>
<style scoped>
.hsInputBox{
.hsInputBox {
padding: 1px;
width:100%;
height:100%;
width: 100%;
height: 100%;
display: flex;
}
.hsInputInner{
.hsInputInner {
height: 80%;
width: 80%;
}
.inputTitle{
flex:1;
.inputTitle {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.inputCurr{
flex:1;
.inputCurr {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.contarnBox{
.contarnBox {
display: flex;
}
.selectTitle{
flex:1;
.selectTitle {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.selectCurr{
.selectCurr {
flex: 3;
display: flex;
justify-content: center;
align-items: center;
}
.selectBoxPlus>>> .el-select>.el-input{
.selectBoxPlus >>> .el-select > .el-input {
height: 100%;
}
.selectBoxPlus>>>.el-select .el-input__inner{
.selectBoxPlus >>> .el-select .el-input__inner {
height: 100%;
}
</style>
src/packages/hs-switch/index.vue
View file @ b943f812
<template>
<div class="hsControlBoxOut" :id='elId'>
<div
class="hsControlBoxOut"
:id='elId'
>
<div class="hsControlBoxInner">
<el-switch
v-model="value_inner"
:active-text="configData.activeText"
:inactive-text="configData.inactiveText"
@change='change'
:disabled='disabled'
:disabled='configData.disabled'
>
</el-switch>
</div>
<jsoneditor v-model='jsoneditorVisible'
<jsoneditor
v-model='jsoneditorVisible'
:elInfo='elInfo'
:layout='layout'
:jsoneditorCloseAfter='jsoneditorCloseAfter'
......@@ -20,14 +24,14 @@
</div>
</template>
<script>
import ucComponent from '../ucClass/uc_component'
import jsoneditor from '../common/jsoneditor'
import ucComponent from "../ucClass/uc_component";
import jsoneditor from "../common/jsoneditor";
export default {
mixins: [ucComponent],
components: {
jsoneditor
},
name: 'hsSwitch',
name: "hsSwitch",
props: {
disabled: {
type: Boolean,
......@@ -36,16 +40,16 @@ export default {
allSourceData: {
type: Object,
default() {
return {}
return {};
}
},
elInfo: {
type: Object,
default() {
return {}
return {};
}
},
value: '',
value: "",
layout: {},
jsoneditorCloseAfter: {
type: Function
......@@ -57,74 +61,84 @@ export default {
watch: {
allSourceData: {
handler: function(newVal, oldVal) {
const { config } = newVal
this.initConfig(config)
const { config } = newVal;
this.initConfig(config);
},
deep: true
},
value(val) {
// 只接受0、1、true、false
if (typeof val === 'boolean') {
this.value_inner = val
if (typeof val === "boolean") {
this.value_inner = val;
} else {
this.value_inner = !!Number(val)
this.value_inner = !!Number(val);
}
},
value_inner(val) {
if (typeof this.value === 'boolean') {
this.$emit('input', val)
if (typeof this.value === "boolean") {
this.$emit("input", val);
} else {
let v = val
if (typeof this.value === 'string') {
v = Number(val) + ''
let v = val;
if (typeof this.value === "string") {
v = Number(val) + "";
} else {
v = Number(val)
v = Number(val);
}
this.$emit('input', v)
this.$emit("input", v);
}
}
},
data() {
return {
elId: '',
elId: "",
value_inner: false,
jsoneditorVisible: false,
sourceData: [],
configData: {
activeText:'',
inactiveText:''
}
}
};
},
mounted() {
this.$nextTick(() => {
const { config, sourceData } = this.allSourceData
this.sourceData = sourceData
this.initConfig(config)
if (typeof this.value === 'boolean') {
this.value_inner = this.value
const { config, sourceData } = this.allSourceData;
this.sourceData = sourceData;
this.initConfig(config);
if (typeof this.value === "boolean") {
this.value_inner = this.value;
} else {
this.value_inner = !!Number(this.value)
this.value_inner = !!Number(this.value);
}
})
});
},
methods: {
execAction(actionName, value) {
const type = typeof actionName;
if (type === "function") {
actionName(value, this.formData);
}
},
change(val) {
const { changeed } = this.configData;
this.execAction(changeed)
},
initConfig(config = {}) {
this.configData = Object.assign(this.configData, config)
this.configData = Object.assign(this.configData, config);
}
}
}
};
</script>
<style scoped>
.hsControlBoxOut{
.hsControlBoxOut {
padding: 1px;
width:100%;
height:100%;
width: 100%;
height: 100%;
display: flex;
box-sizing:border-box;
box-sizing: border-box;
}
.hsControlBoxInner{
.hsControlBoxInner {
display: flex;
justify-content: center;
align-items: center;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment