20260715173700

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

@@ -0,0 +1,235 @@
+<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";
+
+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 },
+});
+
+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)"
+      />
+      <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>