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

<script setup>
import { nextTick, ref, watch } from "vue";
import G3Field from "@/components/g3Field.vue";
import g3OtherCompanyType from "@/components/other/g3OtherCompanyType.vue";
import { getDataBySql } from "@/utils/doSql";

const props = defineProps({
  modelValue: {
    type: Object,
    default: () => ({}),
  },
  viewtable: { type: String, required: true },
  groupName: {
    type: String,
    default: "",
  },
  showGroupTitle: {
    type: Boolean,
    default: false,
  },
  leftBgColor: {
    type: String,
    default: "#f1b408",
  },
});

const emit = defineEmits(["update:modelValue", "select", "field-input"]);

// 更新字段
function updateFields(fields) {
  // console.log(fields);

  emit("update:modelValue", {
    ...props.modelValue,
    ...fields,
  });
  console.log("===1===");
}
// function updateField(prop, value) {
//   emit("update:modelValue", {
//     ...props.modelValue,
//     [prop]: value,
//   });
// }

function getFieldType(column) {
  if (column.edit_type === "selectid") {
    return "select";
  }

  if (column.edit_type === "selectname") {
    return "select";
  }

  if (column.edit_type === "calculate") {
    return "input";
  }

  return column.edit_type || "input";
}
function getFieldProps(column) {
  return {
    field: column.prop,
    disabled: String(column.readOnly) === "1",
    required: String(column.allowNull) !== "1",
    class: column.edit_type === "textarea" ? "fieldremark" : "",
  };
}

const handleSelect = (column, val) => {
  if (column.edit_type === "selectid") {
    updateFields({
      [column.prop]: val?.b_name || "",
      [column.field_id]: val?.b_id || "",
    });
  }

  console.log(column);
  console.log(val);

  emit("select", {
    column,
    value: val,
  });
};

const columns = ref([]);

watch(
  () => [props.viewtable, props.groupName],
  async ([table, group]) => {
    if (!table) return;

    columns.value = [];

    await addColumns(table, group);
  },
  { immediate: true },
);

async function addColumns(viwetable, groupName) {
  try {
    let sql = `SELECT col_FieldName as prop,col_Field_id as field_id, col_Caption as label, col_Width as width, col_edit_type as edit_type,col_edit_width as edit_width,col_ReadOnly as readOnly,col_AllowNull as allowNull,col_edit_source_table as edit_source_table,col_edit_height as edit_height,col_DisplayFormat as displayFormat,col_edit_pycode as pycode FROM s_columnLib WHERE col_TableName = '${viwetable}' and col_edit= '1' `;

    if (groupName !== null && groupName !== undefined && groupName !== "") {
      sql += ` AND col_edit_grouping='${groupName}'`;
    }
    sql += ` ORDER BY col_edit_position`;
    let datas = await getDataBySql(sql);
    if (!datas.records || datas.records.length === 0) {
      ElMessage.warning("返回数据格式异常");
      return;
    }
    columns.value = datas.records;
  } catch (err) {
    console.log(err);
    ElMessage.warning(err.message || "加载列配置失败");
  }
}
</script>

<template>
  <div :class="props.showGroupTitle ? 'g3group' : ''">
    <div
      v-if="props.showGroupTitle"
      class="g3grouptitle"
      :style="{ backgroundColor: props.leftBgColor }"
    >
      <span v-for="(char, index) in props.groupName" :key="index">
        {{ char }}
      </span>
    </div>
    <div class="g3panel" :class="{ g3marginleft15: props.showGroupTitle }">
      <template v-for="column in columns" :key="column.prop">
        <template v-if="column.edit_type === 'selectid'">
          <G3Field
            :model-value="modelValue[column.prop]"
            :model-id="modelValue[column.field_id]"
            @update:model-value="
              updateFields({
                [column.prop]: $event,
              })
            "
            @update:model-id="
              updateFields({
                [column.field_id]: $event,
              })
            "
            :label="column.label"
            :type="getFieldType(column)"
            :pycode="column.pycode == 'true'"
            :mustmatch="true"
            :query-params="{ dataset: column.edit_source_table }"
            v-bind="getFieldProps(column)"
            @select="handleSelect(column, $event)"
          />
        </template>
        <template v-else-if="column.edit_type === 'selectname'">
          <G3Field
            :model-value="modelValue[column.prop]"
            @update:model-value="
              updateFields({
                [column.prop]: $event,
              })
            "
            :label="column.label"
            :type="getFieldType(column)"
            :query-params="{ dataset: column.edit_source_table }"
            v-bind="getFieldProps(column)"
            @select="handleSelect(column, $event)"
          />
        </template>
        <template v-else-if="column.edit_type === 'othercompanytype'">
          <g3OtherCompanyType
            :model-value="modelValue[column.prop]"
            :label="column.label"
            @update:model-value="
              updateFields({
                [column.prop]: $event,
              })
            "
            v-bind="getFieldProps(column)"
          />
        </template>
        <template v-else>
          <G3Field
            :model-value="modelValue[column.prop]"
            @update:model-value="
              updateFields({
                [column.prop]: $event,
              })
            "
            :label="column.label"
            :type="getFieldType(column)"
            v-bind="getFieldProps(column)"
            @input="
              emit('field-input', {
                column,
                value: $event,
              })
            "
          />
        </template>
      </template>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.g3group {
  background: #fff;
  padding: 4px 4px;
  display: flex;
}
.g3grouptitle {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  text-align: center;
  color: #fff;
  font-size: 14px;
  padding: 0px 5px;
  background-color: #f1b408;
  width: 30px;
  white-space: normal;
  word-break: break-all;
  min-height: 100%;
}

.g3panel {
  width: 620px;
  height: auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  align-content: start;
}

.g3panel .fieldremark {
  grid-column: span 2;
  height: 72px;
}

.g3panel .fieldremark :deep(textarea) {
  height: 100%;
  min-height: 100%;
  resize: none;
  box-sizing: border-box;
}
.g3panel .fieldremark :deep(.g3content) {
  width: 100%;
}
.g3marginleft15 {
  margin-left: 15px;
}
</style>