20260711173006
This commit is contained in:
oneao committed
1 parent
d080a2a48d
commit
446758b2fe
384 files changed
+153926
-5937
No files matched your search
@@ -0,0 +1,214 @@
|
||||
<script setup>
|
||||
import { computed } from "vue";
|
||||
import G3DatePicker from "@/components/g3-date-picker/G3DatePicker.vue";
|
||||
import G3DateTimePicker from "@/components/g3-date-picker/G3DateTimePicker.vue";
|
||||
import G3Select from "@/components/g3Select.vue";
|
||||
|
||||
const props = defineProps({
|
||||
label: { type: String, required: true },
|
||||
modelValue: { type: [String, Number], default: "" },
|
||||
modelId: { type: [String, Number], default: "" },
|
||||
type: { type: String, default: "input" },
|
||||
mustmatch: { type: Boolean, default: false },
|
||||
pycode: { type: Boolean, default: false },
|
||||
queryParams: { type: Object, default: () => ({}) },
|
||||
disabled: { type: Boolean, default: false },
|
||||
required: { type: Boolean, default: false },
|
||||
readonly: { type: Boolean, default: false },
|
||||
});
|
||||
|
||||
const emit = defineEmits(["update:modelValue", "update:modelId", "select"]);
|
||||
|
||||
function onInput(val) {
|
||||
emit("update:modelValue", val);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="g3field">
|
||||
<!-- 标签 -->
|
||||
<div class="label">
|
||||
<span v-if="required" class="req">*</span>
|
||||
{{ label }}
|
||||
</div>
|
||||
|
||||
<!-- 内容 -->
|
||||
<div class="g3content">
|
||||
<G3Select
|
||||
v-if="type === 'select'"
|
||||
:model-value="modelValue"
|
||||
:model-id="modelId"
|
||||
:query-params="queryParams"
|
||||
:mustmatch="mustmatch"
|
||||
:pycode="pycode"
|
||||
:disabled="disabled"
|
||||
:readonly="readonly"
|
||||
@update:model-value="emit('update:modelValue', $event)"
|
||||
@update:model-id="emit('update:modelId', $event)"
|
||||
@select="emit('select', $event)"
|
||||
v-bind="$attrs"
|
||||
/>
|
||||
|
||||
<G3DatePicker
|
||||
v-else-if="type === 'date'"
|
||||
:model-value="modelValue"
|
||||
:disabled="disabled"
|
||||
:readonly="readonly"
|
||||
@update:model-value="emit('update:modelValue', $event)"
|
||||
v-bind="$attrs"
|
||||
/>
|
||||
|
||||
<G3DateTimePicker
|
||||
v-else-if="type === 'datetime'"
|
||||
:model-value="modelValue"
|
||||
:disabled="disabled"
|
||||
:readonly="readonly"
|
||||
@update:model-value="emit('update:modelValue', $event)"
|
||||
v-bind="$attrs"
|
||||
/>
|
||||
|
||||
<input
|
||||
v-else-if="type === 'input'"
|
||||
class="g3input"
|
||||
:value="modelValue"
|
||||
:disabled="disabled"
|
||||
:readonly="readonly"
|
||||
@input="onInput($event.target.value)"
|
||||
/>
|
||||
<input
|
||||
v-else-if="type === 'checkbox'"
|
||||
class="g3checkbox"
|
||||
type="checkbox"
|
||||
:checked="modelValue == 1"
|
||||
:disabled="disabled"
|
||||
:readonly="readonly"
|
||||
@change="onInput($event.target.checked ? 1 : 0)"
|
||||
/>
|
||||
<!-- <el-checkbox
|
||||
v-else-if="type === 'checkbox'"
|
||||
class="g3checkbox"
|
||||
:value="modelValue"
|
||||
true-value="1"
|
||||
false-value="0"
|
||||
size="large"
|
||||
:disabled="disabled"
|
||||
:readonly="readonly"
|
||||
/> -->
|
||||
<textarea
|
||||
v-else-if="type === 'textarea'"
|
||||
class="g3textarea"
|
||||
:value="modelValue"
|
||||
:disabled="disabled"
|
||||
:readonly="readonly"
|
||||
@input="onInput($event.target.value)"
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* ======================
|
||||
SAP Field（24px）
|
||||
====================== */
|
||||
|
||||
.g3field {
|
||||
display: flex;
|
||||
height: 24px;
|
||||
box-sizing: border-box;
|
||||
background: #fff;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
/* ======================
|
||||
标签
|
||||
====================== */
|
||||
.label {
|
||||
width: 90px;
|
||||
flex-shrink: 0;
|
||||
text-align: right;
|
||||
padding-right: 8px;
|
||||
line-height: 24px;
|
||||
font-size: 14px;
|
||||
/* color: #333;
|
||||
background: #f0f0f0;
|
||||
border-right: 1px solid #e0e0e0; */
|
||||
}
|
||||
|
||||
.req {
|
||||
color: #d32f2f;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
/* ======================
|
||||
内容区
|
||||
====================== */
|
||||
.g3content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
height: 100%;
|
||||
background: transparent;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* ======================
|
||||
Input / Textarea
|
||||
====================== */
|
||||
.g3input,
|
||||
.g3textarea {
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
padding: 0 6px;
|
||||
font-size: 12px;
|
||||
/* color: #000; */
|
||||
color: #606266;
|
||||
background: #fff;
|
||||
border: 1px solid #dcdcdc;
|
||||
/* ✅ 有边框 */
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
.g3checkbox {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.g3input:focus,
|
||||
.g3textarea:focus {
|
||||
border-color: #1976d2;
|
||||
box-shadow: 0 0 0 1px rgba(25, 118, 210, 0.1);
|
||||
}
|
||||
|
||||
.g3textarea {
|
||||
resize: none;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
/* ======================
|
||||
禁用态
|
||||
====================== */
|
||||
.g3input:disabled,
|
||||
.g3textarea:disabled,
|
||||
.g3checkbox:disabled {
|
||||
background: #f3f3f3;
|
||||
color: #666;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* ======================
|
||||
只读态
|
||||
====================== */
|
||||
.g3input[readonly],
|
||||
.g3textarea[readonly],
|
||||
.g3checkbox[readonly] {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
/* ======================
|
||||
large复选框 高度
|
||||
====================== */
|
||||
:deep(el-checkbox--large) {
|
||||
height: 24px !important;
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user