kh-one-ui 2.0.0

package/packages/one-form/src/form-input/index.vue

@@ -0,0 +1,41 @@
+<template>
+	<div v-if="item.widget == 'input'" :style="contentStyle">
+		<!--普通文本框-->
+		<el-input 
+			v-if="!fieldIsReadonly" 
+			type="text" 
+			v-model="valueModel"
+			:placeholder="getValue(item, 'placeholder', item.displayName)" 
+			:disabled="fieldIsDisabled"
+			:readonly="getValue(item, 'click', false) ? true : false" 
+			:prefix-icon="item.prefixIcon"
+			:label-suffix="item.labelSuffix" 
+			:maxlength="item.maxlength || null" 
+			:minlength="item.minlength || 0"
+			:show-password="item.showPassword"
+			:show-word-limit="item.showWordLimit || false" 
+			:clearable="getValue(item, 'clear', false) ? true : false"
+			v-on:click.native="() => $emit('click', item)" 
+			@clear="() => $emit('clear', item)"
+			@blur="handleBlur"
+			@input="handleChange"
+			@change="handleChange"
+		>
+			<div slot="suffix">
+				<i v-if="item.suffixIcon" :class="item.suffixIcon"></i>
+				<i v-if="getValue(item, 'clear', false) ? true : false"
+					class="el-input__icon el-icon-circle-close el-input__clear" @click="handleClear"></i>
+			</div>
+			<template v-if="item.append" slot="append">
+				{{item.append}}
+			</template>
+			<template v-if="item.prepend" slot="prepend">
+				{{item.prepend}}
+			</template>
+		</el-input>
+		<div v-else-if="item.isHtml" v-html="valueModel|| readDefaultVal"></div>
+		<div v-else>{{ valueModel|| readDefaultVal }}</div>
+	</div>
+</template>
+
+<script type="text/javascript" src="./index.js"></script>

package/packages/one-form/src/form-inputNumber/index.js

@@ -0,0 +1,29 @@
+import FormitemMix from '../formItemMix.js';
+
+export default {
+	name: 'form-inputNumber',
+	mixins: [FormitemMix],
+	data() {
+		return {
+			valueModel: this.value || null
+		}
+	},
+	props: {
+		value: null
+	},
+	watch: {
+		value(val) {
+			this.valueModel = val;
+		}
+	},
+	components: {},
+	created() {},
+	mounted() {},
+	computed: {},
+	methods: {
+		handleChange() {
+			this.$emit('change', this.valueModel);
+			this.$emit('field-change', this.valueModel);
+		}
+	},
+}

package/packages/one-form/src/form-inputNumber/index.vue

@@ -0,0 +1,28 @@
+<template>
+	<div v-if="item.widget == 'inputNumber'" :style="contentStyle">
+		<!--计数器  -->
+		<template v-if="!fieldIsReadonly">
+			<el-input-number style="width: 100%" :disabled="fieldIsDisabled"
+				:readonly="getValue(item, 'click', false) ? true : false" v-model="valueModel"
+				:placeholder="getValue(item, 'placeholder', item.displayName)" :min="getValue(item, 'min', undefined)"
+				:max="getValue(item, 'max', undefined)" :precision="getValue(item, 'precision', null)"
+				:controls="getValue(item, 'controls', true)" v-on:click.native="() => $emit('click', item)"
+				@input="handleChange" @change="handleChange">
+			</el-input-number>
+			<!-- <el-input-number v-else style="width: 100%" :disabled="fieldIsDisabled"
+				:readonly="getValue(item, 'click', false) ? true : false" v-model="valueModel"
+				:placeholder="getValue(item, 'placeholder', item.displayName)" :min="getValue(item, 'min', undefined)"
+				:max="getValue(item, 'max', undefined)" :controls="getValue(item, 'controls', true)"
+				v-on:click.native="() => $emit('click', item)" @input="handleChange" @change="handleChange">
+			</el-input-number> -->
+		</template>
+		<div v-else-if="item.isHtml" v-html="valueModel|| readDefaultVal">
+		</div>
+		<div v-else>
+			{{valueModel|| readDefaultVal}}
+		</div>
+	</div>
+</template>
+
+<script type="text/javascript" src="./index.js">
+</script>

package/packages/one-form/src/form-inputSelect/index.js

@@ -0,0 +1,78 @@
+import FormitemMix from '../formItemMix.js';
+
+export default {
+	name: 'form-inputSelect',
+	mixins: [FormitemMix],
+	data() {
+		return {
+			valueModel: this.getInitValue()
+		}
+	},
+	props: {
+		// 接收绑定参数
+		value: {
+			type: Array,
+			required: false,
+		},
+	},
+	components: {},
+	created() {},
+	mounted() {
+		//加载选项
+		this.loadOptions();
+	},
+	computed: {},
+	watch: {
+		value(val) {
+			//初始数据
+			this.init();
+		},
+		'item.remoteUrl'(val) {
+			//加载选项
+			this.loadOptions();
+		},
+		'item.optionName'(val) {
+			//加载选项
+			this.loadOptions();
+		},
+	},
+	methods: {
+		//初始数据
+		init() {
+			this.valueModel = this.getInitValue();
+
+			if (Array.isArray(this.valueModel)) {
+				if (!this.value || !Array.isArray(this.value)) {
+					this.$emit('change', this.valueModel);
+				} else if (JSON.stringify(this.value) != JSON.stringify(this.valueModel)) {
+					this.$emit('change', this.valueModel);
+				}
+			} else if (this.value != this.valueModel) {
+				this.$emit('change', this.valueModel);
+			}
+		},
+		//获取初始数据
+		getInitValue() {
+			let val = this.value;
+			let out = [null, null];
+
+			if (val) {
+				if (Array.isArray(val)) {
+					out[0] = val.length > 0 ? val[0] : null;
+					out[1] = val.length > 1 ? val[1] : null;
+				} else {
+					out = [val, null]
+				}
+			}
+
+			return out;
+		},
+		valueChange() {
+			if (!this.valueModel) {
+				this.valueModel = [null, null];
+			}
+			this.$emit('change', this.valueModel)
+			this.$emit('field-change', this.valueModel);
+		},
+	},
+}

package/packages/one-form/src/form-inputSelect/index.vue

@@ -0,0 +1,59 @@
+<template>
+	<div v-if="item.widget == 'inputSelect'" :style="contentStyle">
+		<template v-if="!fieldIsReadonly">
+			<!--文本框-->
+			<el-input v-if="item.firstWidget == 'input'" 
+				type="text" 
+				v-model="valueModel[0]" 
+				:placeholder="getValue(item, 'placeholder', item.displayName)" 
+				:disabled="fieldIsDisabled" 
+				:readonly="getValue(item, 'click', false) ? true : false" 
+				:style="getValue(item, 'inputStyle', 'width:calc(50% - 5px)')"
+				:prefix-icon="item.prefixIcon" 
+				:suffix-icon="item.suffixIcon" 
+				:clearable="getValue(item, 'clear', false) ? true : false" 
+				v-on:click.native="() => $emit('click', item)" 
+				@clear="() => $emit('clear', item)"
+				@change="valueChange"
+				class="one-input-select-input">
+			</el-input>
+			<!--计数器  -->
+			<el-input-number v-else 
+				:disabled="fieldIsDisabled" 
+				v-model="valueModel[0]" 
+				:placeholder="getValue(item, 'placeholder', item.displayName)"
+				:style="getValue(item, 'inputStyle', 'width:calc(50% - 5px)')"
+				:min="getValue(item, 'min', undefined)" 
+				:max="getValue(item, 'max', undefined)" 
+				:precision="getValue(item, 'precision', undefined)"
+				:controls="getValue(item, 'controls', true)"
+				@change="valueChange"
+			></el-input-number>
+			<!--选择控件-->
+			<el-select 
+			    :popper-class="getValue(item, 'popperClass', '')"
+				:disabled="fieldIsDisabled" 
+				v-model="valueModel[1]" 
+				:placeholder="'请选择'"
+				:clearable="item.clearable" 
+				:filterable="getValue(item, 'filterable', false) ? true : false" 
+				@change="valueChange"
+				:style="getValue(item, 'selectStyle', 'width:calc(50%)') + ';vertical-align: top;'">
+				<el-option 
+					v-for="(optItem, optIndex) in getSelectOptions(item.options, item.optionName)" 
+					:label="optItem[getOptionsValue(item.props, 'name')]" 
+					:value="optItem[getOptionsValue(item.props, 'id')]" 
+					:key="optItem[getOptionsValue(item.props, 'id')]">
+				</el-option>
+			</el-select>
+		</template>
+		<div v-else-if="item.isHtml" v-html="inputSelectValue(valueModel)|| readDefaultVal">
+		</div>
+		<div v-else>
+			{{inputSelectValue(valueModel)|| readDefaultVal}}
+		</div>
+	</div>
+</template>
+
+<script type="text/javascript" src="./index.js">
+</script>

package/packages/one-form/src/form-month/index.js

@@ -0,0 +1,85 @@
+import FormitemMix from '../formItemMix.js';
+
+export default {
+	name: 'form-month',
+	mixins: [FormitemMix],
+	data() {
+		return {
+			valueModel: this.getInitValue()
+		}
+	},
+	props: {
+		// 接收绑定参数
+		value: null,
+	},
+	components: {},
+	created() {},
+	mounted() {},
+	computed: {},
+	watch: {
+		'item.range'(val) {
+			this.init();
+		},
+		value(val) {
+			this.init();
+		},
+	},
+	methods: {
+		//初始数据
+		init() {
+			this.valueModel = this.getInitValue();
+
+			if (Array.isArray(this.valueModel)) {
+				if (!this.value || !Array.isArray(this.value)) {
+					this.$emit('change', this.valueModel);
+				} else if (JSON.stringify(this.value) != JSON.stringify(this.valueModel)) {
+					this.$emit('change', this.valueModel);
+				}
+			} else if (this.value != this.valueModel) {
+				this.$emit('change', this.valueModel);
+			}
+		},
+		//获取value
+		getInitValue() {
+			let val = this.value;
+			let out = null;
+
+			if (this.item.range) {
+				if (val) {
+					if (Array.isArray(val)) {
+						if (val.length < 1) {
+							out = [null, null];
+						} else if (val.length < 2) {
+							out = [val[0], null];
+						} else {
+							out = [val[0], val[1]];
+						}
+					} else {
+						out = [val, null]
+					}
+				} else {
+					out = [null, null]
+				}
+			} else {
+				if (Array.isArray(val)) {
+					if (val.length > 0) {
+						out = val[0];
+					} else {
+						out = null;
+					}
+				} else {
+					out = val;
+				}
+			}
+
+			return out;
+		},
+		valueChange() {
+			if (!this.valueModel && this.item.range) {
+				this.valueModel = [null, null];
+			}
+			this.$emit('change', this.valueModel);
+			this.$emit('field-change', this.valueModel);
+		},
+	},
+}

package/packages/one-form/src/form-month/index.vue

@@ -0,0 +1,65 @@
+<template>
+	<div v-if="item.widget == 'month'" :style="contentStyle">
+		<template v-if="item.range">
+			<!-- 范围 -->
+			<template v-if="!fieldIsReadonly">
+				<!-- 日期 -->
+				<el-date-picker
+					type="month"
+					:popper-class="getValue(item, 'popperClass', '')"
+					v-model="valueModel[0]"
+					:placeholder="getValue(item, 'startPlaceholder', '选择月份')"
+					:disabled="fieldIsDisabled"
+					style="display: inline-block;vertical-align: top;width: calc(50% - 20px);"
+					:format="getValue(item, 'format', 'yyyy-MM')"
+					:value-format="getValue(item, 'valueFormat', 'yyyy-MM')"
+					:picker-options="{
+						disabledDate(time) {
+							return formDisabledDate(valueModel, 1, time, 'start');
+						}
+					}"
+					@change="valueChange"
+				></el-date-picker>
+				<div style="display: inline-block;vertical-align: top;width: 30px;text-align: center;">{{ getValue(item, 'rangeSeparator', '至') }}</div>
+				<el-date-picker
+					type="month"
+					:popper-class="getValue(item, 'popperClass', '')"
+					v-model="valueModel[1]"
+					:disabled="fieldIsDisabled"
+					:placeholder="getValue(item, 'endPlaceholder', '选择月份')"
+					style="display: inline-block;vertical-align: top;width: calc(50% - 20px);"
+					:format="getValue(item, 'format', 'yyyy-MM')"
+					:value-format="getValue(item, 'valueFormat', 'yyyy-MM')"
+					:picker-options="{
+						disabledDate(time) {
+							return formDisabledDate(valueModel, 0, time, 'end');
+						}
+					}"
+					@change="valueChange"
+				></el-date-picker>
+			</template>
+			<div v-else>
+				{{ valueModel[0]|| readDefaultVal }}
+				{{ getValue(item, 'rangeSeparator', '至') }}
+				{{ valueModel[1] || readDefaultVal}}</div>
+		</template>
+		<template v-else>
+			<!-- 日期 -->
+			<el-date-picker
+				v-if="!fieldIsReadonly"
+				type="month"
+				:popper-class="getValue(item, 'popperClass', '')"
+				style="width: 100%;"
+				v-model="valueModel"
+				:placeholder="getValue(item, 'placeholder', '选择月份')"
+				:disabled="fieldIsDisabled"
+				:format="getValue(item, 'format', 'yyyy-MM')"
+				:value-format="getValue(item, 'valueFormat', 'yyyy-MM')"
+				@change="valueChange"
+			></el-date-picker>
+			<div v-else>{{ valueModel|| readDefaultVal }}</div>
+		</template>
+	</div>
+</template>
+
+<script type="text/javascript" src="./index.js"></script>

package/packages/one-form/src/form-password/index.js

@@ -0,0 +1,30 @@
+import FormitemMix from '../formItemMix.js';
+
+export default {
+  name: 'form-password',
+  mixins: [FormitemMix],
+  data() {
+    return {
+      valueModel: null,
+	  showPassword: false
+    }
+  },
+  props: {
+    value: null,
+  },
+  watch: {
+    value(val) {
+      this.valueModel = val;
+    }
+  },
+  components: {},
+  created() {},
+  mounted() {},
+  computed: {},
+  methods: {
+    handleChange() {
+      this.$emit('change', this.valueModel);
+      this.$emit('field-change', this.valueModel);
+    }
+  },
+}

package/packages/one-form/src/form-password/index.vue

@@ -0,0 +1,24 @@
+<template>
+  <div v-if="item.widget == 'password'" :style="contentStyle">
+    <!--密码框-->
+    <el-input
+      v-if="!fieldIsReadonly"
+      type="password"
+      v-model="valueModel"
+      :placeholder="getValue(item, 'placeholder', item.displayName)"
+      :disabled="fieldIsDisabled"
+      :prefix-icon="item.prefixIcon"
+      :suffix-icon="item.suffixIcon"
+	  :show-password="item.showPassword"
+	  @input="handleChange"
+      @change="handleChange"
+    ></el-input>
+    <div v-else>
+      <template v-if="valueModel">
+        {{ (showPassword ? valueModel : valueModel.replace(/./g, '*')) || readDefaultVal }} <i style="margin-left: 10px;" class="el-icon-view"></i>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script type="text/javascript" src="./index.js"></script>

package/packages/one-form/src/form-radio/index.js

@@ -0,0 +1,44 @@
+import FormitemMix from '../formItemMix.js';
+
+export default {
+	name: 'form-radio',
+	mixins: [FormitemMix],
+	data() {
+		return {
+			valueModel: this.value
+		}
+	},
+	props: {
+		value: null,
+	},
+	model: {
+		prop: 'value',
+		event: 'change'
+	},
+	components: {},
+	created() {},
+	mounted() {
+		//加载选项
+		this.loadOptions();
+	},
+	computed: {},
+	watch: {
+		'item.remoteUrl'(val) {
+			//加载选项
+			this.loadOptions();
+		},
+		'item.optionName'(val) {
+			//加载选项
+			this.loadOptions();
+		},
+		value(val) {
+			this.valueModel = val;
+		}
+	},
+	methods: {
+		handleChange() {
+			this.$emit('change', this.valueModel);
+			this.$emit('field-change', this.valueModel);
+		},
+	},
+}

package/packages/one-form/src/form-radio/index.vue

@@ -0,0 +1,20 @@
+<template>
+	<div v-if="item.widget == 'radio'" :style="contentStyle">
+		<!--单选-->
+		<template v-if="!fieldIsReadonly">
+			<el-radio
+				v-model="valueModel"
+				:disabled="fieldIsDisabled"
+				v-for="(optItem, optIndex) in getSelectOptions(item.options, item.optionName)"
+				:key="optIndex"
+				:label="optItem[getOptionsValue(item.props, 'id')]"
+				@change="handleChange"
+			>
+				{{ optItem[getOptionsValue(item.props, 'name')] }}
+			</el-radio>
+		</template>
+		<div v-else>{{ getSelectedName(item)|| readDefaultVal }}</div>
+	</div>
+</template>
+
+<script type="text/javascript" src="./index.js"></script>

package/packages/one-form/src/form-rate/index.js

@@ -0,0 +1,59 @@
+import FormitemMix from '../formItemMix.js';
+
+export default {
+	name: 'form-rate',
+	mixins: [FormitemMix],
+	data() {
+		return {
+			valueModel: this.value
+		}
+	},
+	props: {
+		value: null,
+	},
+	watch: {
+		value(val) {
+			this.valueModel = val;
+		},
+	},
+	components: {},
+	created() {},
+	mounted() {},
+	computed: {
+		colors() {
+			let colors = this.item.colors || '';
+			let arr = colors.split(',');
+			if (!arr || arr.length <= 0) {
+				return ['#F7BA2A', '#F7BA2A', '#F7BA2A'];
+			}
+
+			return arr;
+		},
+		iconClasses() {
+			let iconClasses = this.item.iconClasses || '';
+			let arr = iconClasses.split(',');
+
+			if (!arr || arr.length <= 0) {
+				return ['el-icon-star-on', 'el-icon-star-on', 'el-icon-star-on'];
+			}
+
+			return arr;
+		},
+		texts() {
+			let texts = this.item.texts || '';
+			let arr = texts.split(',');
+
+			if (!arr || arr.length <= 0) {
+				return ['极差', '失望', '一般', '满意', '惊喜'];
+			}
+
+			return arr;
+		}
+	},
+	methods: {
+		handleChange() {
+			this.$emit('change', this.valueModel);
+			this.$emit('field-change', this.valueModel);
+		}
+	},
+}

package/packages/one-form/src/form-rate/index.vue

@@ -0,0 +1,19 @@
+<template>
+	<div v-if="item.widget == 'rate'" :style="contentStyle">
+		<el-rate :disabled="fieldIsReadonly || fieldIsDisabled" v-model="valueModel"
+			:max="item.max == undefined ? 5 : item.max" :allow-half="item.allowHalf"
+			:low-threshold="item.lowThreshold || 2" :high-threshold="item.highThreshold || 4" :colors="colors"
+			:void-color="item.voidColor || '#C6D1DE'" 
+			:disabled-void-color="item.disabledVoidColor || '#EFF2F7'"
+			:icon-classes="iconClasses"
+			:void-icon-class="item.voidIconClass || 'el-icon-star-off'"
+			:disabled-void-icon-class="item.disabledVoidIconClass || 'el-icon-star-on'"
+			:show-text="item.showText"
+			:show-score="item.showScore"
+			:text-color="item.textColor || '#1F2D3D'"
+			:texts="texts"
+			@change="handleChange"></el-rate>
+	</div>
+</template>
+
+<script type="text/javascript" src="./index.js"></script>