Skip to content

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

新增复选框组

parent 8195b62a
Hide whitespace changes
Inline Side-by-side
Showing with 216 additions and 84 deletions
src/packages/hs-checkbox-group/index.vue 0 → 100644
View file @ ea0363dd
<template>
<div
class="hsInputBox"
:id='elId'
>
<div class="inputCurr">
<el-checkbox-group v-model="value_inner">
<el-checkbox
v-for="(item,index) in dataList"
:key='index'
:label='item.label'
:disabled='item.disabled'
>
</el-checkbox>
</el-checkbox-group>
</div>
<jsoneditor
v-model='jsoneditorVisible'
:elInfo='elInfo'
:layout='layout'
:jsoneditorCloseAfter='jsoneditorCloseAfter'
:jsoneditorOpenAfter='jsoneditorOpenAfter'
>
</jsoneditor>
</div>
</template>
<script>
import ucComponent from "../ucClass/uc_component";
import jsoneditor from "../common/jsoneditor";
import _ from "lodash";
export default {
mixins: [ucComponent],
components: {
jsoneditor
},
name: "hsCheckbox",
props: {
allSourceData: {
type: Object,
default() {
return {};
}
},
elInfo: {
type: Object,
default() {
return {};
}
},
value: "",
layout: {},
jsoneditorCloseAfter: {
type: Function
},
jsoneditorOpenAfter: {
type: Function
}
},
watch: {
allSourceData: {
handler: function(newVal, oldVal) {
const { config, sourceData } = newVal;
this.initConfigData(config, sourceData);
},
deep: true
},
value(val) {
this.value_inner = val;
},
value_inner(val) {
this.$emit("input", val);
}
},
data() {
return {
elId: "",
value_inner: "",
jsoneditorVisible: false,
configData: {
title: ""
},
dataList: []
};
},
mounted() {
this.$nextTick(() => {
const { config, sourceData } = this.allSourceData;
this.initConfigData(config, sourceData);
});
},
methods: {
initConfigData(config, sourceData) {
this.initConfig(_.cloneDeep(config));
this.initConfig(_.cloneDeep(sourceData));
},
initConfig(config = {}) {
this.configData = Object.assign(this.configData, config);
},
initData(list = []) {
this.dataList = list;
}
}
};
</script>
<style scoped>
.hsInputBox {
padding: 1px;
width: 100%;
height: 100%;
display: flex;
}
.inputCurr {
display: flex;
justify-content: center;
align-items: center;
}
</style>
src/packages/hs-input/index.vue
View file @ ea0363dd
<template> <template>
<div class="hsInputBox" :id='elId'> <div
<div class="inputTitle" v-if='title'>{{title}}</div> class="hsInputBox"
<div class="inputCurr"> :id='elId'
<el-input >
:size='size' <div
@keyup.enter.native="submitInput" class="inputTitle"
v-model="value_inner" v-if='configData.title'
@input='inputFun' >{{configData.title}}</div>
@change='changeFun' <div class="inputCurr">
@blur="inputBlur" <el-input
:disabled="isReadOnly" :clearable='clearable'
:placeholder="placeholder||elInfo.placeholder"></el-input> :size='configData.size'
</div> @clear='clear'
<jsoneditor v-model='jsoneditorVisible' @keyup.enter.native="submitInput"
:elInfo='elInfo' v-model="value_inner"
:layout='layout' @input='inputFun'
:jsoneditorCloseAfter='jsoneditorCloseAfter' @change='changeFun'
:jsoneditorOpenAfter='jsoneditorOpenAfter' @blur="inputBlur"
> :disabled="isReadOnly"
:placeholder="configData.placeholder"
></el-input>
</div>
<jsoneditor
v-model='jsoneditorVisible'
:elInfo='elInfo'
:layout='layout'
:jsoneditorCloseAfter='jsoneditorCloseAfter'
:jsoneditorOpenAfter='jsoneditorOpenAfter'
>
</jsoneditor> </jsoneditor>
</div> </div>
</template> </template>
<script> <script>
import ucComponent from '../ucClass/uc_component' import ucComponent from "../ucClass/uc_component";
import uuidv1 from 'uuid/v1' import uuidv1 from "uuid/v1";
import jsoneditor from '../common/jsoneditor' import jsoneditor from "../common/jsoneditor";
import _ from "lodash";
export default { export default {
mixins: [ucComponent], mixins: [ucComponent],
components: { components: {
jsoneditor jsoneditor
}, },
name: 'hsInput', name: "hsInput",
props: { props: {
prop: {}, prop: {},
formData: { formData: {
type: Object, type: Object,
default() { default() {
return {} return {};
} }
}, },
allSourceData: { allSourceData: {
type: Object, type: Object,
default() { default() {
return {} return {};
} }
}, },
elInfo: { elInfo: {
type: Object, type: Object,
default() { default() {
return {} return {};
} }
}, },
value: '', value: "",
layout: {}, layout: {},
jsoneditorCloseAfter: { jsoneditorCloseAfter: {
type: Function, type: Function,
default() { default() {
return () => {} return () => {};
} }
}, },
jsoneditorOpenAfter: { jsoneditorOpenAfter: {
type: Function, type: Function,
default() { default() {
return () => {} return () => {};
} }
}, },
readonly: { readonly: {
...@@ -73,120 +84,123 @@ export default { ...@@ -73,120 +84,123 @@ export default {
formData: { formData: {
handler: function(newVal, oldVal) { handler: function(newVal, oldVal) {
if (!this.isInputed) { if (!this.isInputed) {
const linkProps = this.configData.linkProps || [] const linkProps = this.configData.linkProps || [];
if (!linkProps.length) { if (!linkProps.length) {
this.inputComputed(this.value) this.inputComputed(this.value);
} }
linkProps.forEach(item => { linkProps.forEach(item => {
if (this.formData[`_${item}_`]) { if (this.formData[`_${item}_`]) {
this.inputComputed(this.value) this.inputComputed(this.value);
} }
}) });
} }
}, },
deep: true deep: true
}, },
allSourceData: { allSourceData: {
handler: function(newVal, oldVal) { handler: function(newVal, oldVal) {
const { config } = newVal const { config } = newVal;
this.initConfig(config) this.initConfig(config);
}, },
deep: true deep: true
}, },
value(val, oldVal) { value(val, oldVal) {
this.value_inner = val this.value_inner = val;
this.valueChange(val) this.valueChange(val);
}, },
value_inner(val) { value_inner(val) {
this.$emit('input', val) this.$emit("input", val);
} }
}, },
computed: { computed: {
isReadOnly: function() { isReadOnly: function() {
return this.readonly || this.configData.disabled return this.readonly || this.configData.disabled;
} }
}, },
data() { data() {
return { return {
elId: '', elId: "",
value_inner: '', value_inner: "",
jsoneditorVisible: false, jsoneditorVisible: false,
title: '', isInputed: false,
placeholder: '', clearable: true,
size: 'mini', configData: {
configData: {}, title: "",
isInputed: false placeholder: "",
} size: "mini",
clearable: true,
placeholder: ""
}
};
}, },
created() { created() {
this.elId = uuidv1() // 获取随机id this.elId = uuidv1(); // 获取随机id
}, },
mounted() { mounted() {
const { config } = this.allSourceData const { config } = this.allSourceData;
this.initConfig(config)
this.initConfig(config);
}, },
methods: { methods: {
inputBlur() { inputBlur() {
this.isInputed = false this.isInputed = false;
this.formData[`_${this.prop}_`] = false this.formData[`_${this.prop}_`] = false;
}, },
execAction(actionName, value) { execAction(actionName, value) {
const type = typeof actionName const type = typeof actionName;
if (type === 'function') { if (type === "function") {
actionName(value, this.formData) actionName(value, this.formData);
} }
}, },
valueChange(value) { valueChange(value) {
const { changing } = this.configData const { changing } = this.configData;
this.execAction(changing, value) this.execAction(changing, value);
},
clear(value) {
const { clear } = this.configData;
this.execAction(clear, value);
}, },
inputComputed(value) { inputComputed(value) {
const { computed } = this.configData const { computed } = this.configData;
this.execAction(computed, value) this.execAction(computed, value);
}, },
changeFun(value) { changeFun(value) {
const { changeed } = this.configData const { changeed } = this.configData;
this.execAction(changeed, value) this.execAction(changeed, value);
}, },
inputFun(value) { inputFun(value) {
this.isInputed = true this.isInputed = true;
this.formData[`_${this.prop}_`] = true this.formData[`_${this.prop}_`] = true;
const { inputed } = this.configData const { inputed } = this.configData;
this.execAction(inputed, value) this.execAction(inputed, value);
}, },
initConfig(config) { initConfig(config) {
if (typeof config !== 'object') return if (typeof config !== "object") return;
const { title, placeholder, size } = config const config_ = _.cloneDeep(config);
this.configData = config this.configData = Object.assign(this.configData, config_);
this.title = title
this.placeholder = placeholder
if (size) {
this.size = size
}
}, },
submitInput(val) { submitInput(val) {
const parm = {} const { entered } = this.configData;
parm[this.elInfo.prop] = this.value_inner this.execAction(entered, value, this.elInfo);
this.$emit('enterInput', parm) this.$emit("enterInput", this.value_inner, this.elInfo);
} }
} }
} };
</script> </script>
<style scoped> <style scoped>
.hsInputBox{ .hsInputBox {
padding: 1px; padding: 1px;
width:100%; width: 100%;
height:100%; height: 100%;
display: flex; display: flex;
} }
.inputTitle{ .inputTitle {
flex:1; flex: 1;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.inputCurr{ .inputCurr {
flex: 3; flex: 3;
display: flex; display: flex;
justify-content: center; justify-content: 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