明树Git Lab

Commit ea70d53d authored by zhanghan's avatar zhanghan

1

parent ec2bef8a
......@@ -12,7 +12,7 @@
>
<el-option
v-for="(item, index) in currentOptions"
:key="`${dictName}-${index}`"
:key="`${dictName || 'custom'}-${index}`"
:label="item[labelKey]"
:value="item[valueKey]"
></el-option>
......@@ -28,7 +28,7 @@
>
<el-radio
v-for="(item, index) in currentOptions"
:key="`${dictName}-${index}`"
:key="`${dictName || 'custom'}-${index}`"
:value="item[valueKey]"
>
{{ item[labelKey] }}
......@@ -47,17 +47,22 @@ import {
onUnmounted,
} from "vue";
// 极简Props:仅传 v-model + dictName(必传),其余可选
// 极简Props:仅传 v-model + dictName/options(二选一),其余可选
const props = defineProps({
// 双向绑定值(必传)
modelValue: {
type: [String, Number, Object],
default: undefined,
},
// 必传:指定从resourceData中取哪个字典(如dqlx/ zdfx-type/ fileHierarchy)
// 可选:直接传入选项数据(优先级高于 dictName)
options: {
type: Array,
default: () => [],
},
// 可选:指定从resourceData中取哪个字典(如dqlx/ zdfx-type/ fileHierarchy)
dictName: {
type: String,
required: true,
required: false,
},
// 可选:自定义选项标签字段(默认name)
labelKey: {
......@@ -103,8 +108,20 @@ const emit = defineEmits(["update:modelValue", "change"]);
const innerValue = ref(props.modelValue); // 内部绑定值
const currentOptions = ref([]); // 最终渲染的字典数据
// 核心方法:从sessionStorage读取resourceData并匹配字典
// 核心方法:获取选项数据(优先使用传入的 options,否则从 sessionStorage 读取)
const getDictFromStorage = () => {
// 如果传入了 options,优先使用
if (props.options && props.options.length > 0) {
currentOptions.value = props.options;
return;
}
// 否则从 sessionStorage 读取(需要提供 dictName)
if (!props.dictName) {
currentOptions.value = [];
return;
}
try {
// 读取并解析sessionStorage中的resourceData
const resourceStr = sessionStorage.getItem("resourceData") || "{}";
......@@ -143,9 +160,9 @@ watch(
{ immediate: true },
);
// 监听2:dictName/labelKey/valueKey变化,重新读取字典(适配动态切换字典的场景)
// 监听2:dictName/labelKey/valueKey/options变化,重新读取字典(适配动态切换字典或选项的场景)
watch(
() => [props.dictName, props.labelKey, props.valueKey],
() => [props.dictName, props.labelKey, props.valueKey, props.options],
() => {
getDictFromStorage();
},
......
......@@ -174,6 +174,21 @@
:isInline="col.isInline ?? true"
/>
</template>
<!-- CommonSelector 通用选择器类型 -->
<template v-else-if="col.type === 'common-selector'">
<CommonSelector
v-model="scope.row[col.prop]"
:dictName="col.dictName"
:options="col.options"
:labelKey="col.labelKey"
:valueKey="col.valueKey"
:radio="col.radio"
:disabled="disabled || col.disabled"
:placeholder="col.placeholder"
:clearable="col.clearable !== false"
/>
</template>
</template>
</el-table-column>
</el-table-column>
......@@ -309,6 +324,21 @@
:isInline="col.isInline ?? true"
/>
</template>
<!-- CommonSelector 通用选择器类型 -->
<template v-else-if="col.type === 'common-selector'">
<CommonSelector
v-model="scope.row[col.prop]"
:dictName="col.dictName"
:options="col.options"
:labelKey="col.labelKey"
:valueKey="col.valueKey"
:radio="col.radio"
:disabled="disabled || col.disabled"
:placeholder="col.placeholder"
:clearable="col.clearable !== false"
/>
</template>
</template>
</el-table-column>
......@@ -372,6 +402,8 @@ import {
import { ElMessageBox, ElMessage } from "element-plus";
// 引入文件上传组件(适配你的项目路径)
import FileUploader from "@/components/FileUploader/index.vue";
// 引入通用选择器组件
import CommonSelector from "@/components/CommonSelector.vue";
// 获取全局实例(用于接口请求/全局配置)
const { proxy } = getCurrentInstance();
......@@ -517,9 +549,9 @@ const handleAdd = () => {
if (col.type === "upload" && newRow[col.prop] === undefined) {
newRow[col.prop] = [];
}
// Select/Input 初始化为空字符串
// Select/Input/Number/CommonSelector 初始化为空字符串
if (
["input", "select", "number"].includes(col.type) &&
["input", "select", "number", "common-selector"].includes(col.type) &&
newRow[col.prop] === undefined
) {
newRow[col.prop] = "";
......
......@@ -396,12 +396,27 @@
/>
</template>
<!-- 通用选择器 -->
<template v-else-if="item.type === 'selector'">
<CommonSelector
v-model="formData[item.field]"
:dict-name="item.dictName"
:radio="item.radio"
:placeholder="item.placeholder"
:clearable="item.clearable !== false"
:disabled="item.disabled"
:label-key="item.labelKey"
:value-key="item.valueKey"
@change="handleFieldChange(item, $event)"
/>
</template>
<!-- 自定义组件 -->
<template v-else-if="item.type === 'component' && item.component">
<component
:is="item.component"
v-model="formData[item.field]"
v-bind="getItemProps(item)"
v-bind="{ ...getItemProps(item), ...item.componentProps }"
@change="handleFieldChange(item, $event)"
@blur="handleFieldBlur(item, $event)"
@focus="handleFieldFocus(item, $event)"
......@@ -483,6 +498,7 @@
<script setup>
import { ref, reactive, computed, watch, onMounted, getCurrentInstance } from 'vue'
import { UploadFilled } from '@element-plus/icons-vue'
import CommonSelector from '@/components/CommonSelector.vue'
const props = defineProps({
// 表单配置
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment