workspace/code/g3hd/frontend/src/components/g3Field.vue

<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";
import G3Memo from "@/components/g3Memo.vue";
import G3Number from "@/components/g3Number.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 },
  maxlength: { type: Number, default: 1000 },
  field: { type: String, default: "" },
});

const emit = defineEmits(["update:modelValue", "update:modelId", "select"]);

function onInput(val) {
  emit("update:modelValue", val);
}
</script>

<template>
  <div class="g3field" :field="props.field">
    <!-- 标签 -->
    <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="String(modelValue) === '1'"
        :disabled="disabled"
        :readonly="readonly"
        @change="onInput($event.target.checked ? '1' : '0')"
      />
      <G3Number
        v-else-if="type === 'g3Number'"
        :model-value="modelValue"
        :disabled="disabled"
        :readonly="readonly"
        @update:model-value="emit('update:modelValue', $event)"
       />

      <G3Memo
        v-else-if="type === 'g3memo'"
        :model-value="modelValue"
        :disabled="disabled"
        :readonly="readonly"
        @update:model-value="emit('update:modelValue', $event)"
        :maxlength="maxlength"
      />
      <textarea
        v-else-if="type === 'textarea'"
        class="g3textarea"
        :value="modelValue"
        :disabled="disabled"
        :readonly="readonly"
        @input="onInput($event.target.value)"
      />
    </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;
}

.req {
  color: #d32f2f;
  margin-left: 2px;
}

/* ======================
   内容区
   ====================== */
.g3content {
  /* flex: 1;
  min-width: 0; */
  width: 221px;
  height: 100%;
  background: transparent;
  align-items: center;
}

.g3content > * {
  max-width: 100%;
}
/* 
.g3content {

 flex:1;

 width:0;

 min-width:0;

 height:100%;

 overflow:hidden;

 display:flex;

 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: 17px;
  overflow: auto;
}

/* ======================
   禁用态
   ====================== */
.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>