ComponentProps-f457cff6.js
18.8 KB
var R=(e,r,n)=>new Promise((m,f)=>{var I=p=>{try{t(n.next(p))}catch(u){f(u)}},o=p=>{try{t(n.throw(p))}catch(u){f(u)}},t=p=>p.done?m(p.value):Promise.resolve(p.value).then(I,o);t((n=n.apply(e,r)).next())});import{R as E}from"./RadioButtonGroup-72b65d2e.js";import{d as _,k as G,w as y,e as S,a8 as h,_ as a,$ as s,a9 as b,ac as c,f as C,aa as i,F as P,ab as N,ai as T,ad as F,E as V,a1 as D}from"./vue-5a35c3f5.js";import{a as B}from"./useFormDesignState-032955db.js";import O from"./FormOptions-6bfae01f.js";import{a as U,c as z}from"./index-15077a33.js";import{a4 as L,a1 as $,ay as H,bJ as W,aX as J,az as X,aI as j,aV as q,bh as K,bf as Q,be as Z}from"./antd-6b087f69.js";import{_ as ee}from"./index.js";import"./useFormItem-9ea791b8.js";import"./message-c4c6f446.js";const oe=[{name:"disabled",label:"禁用"},{name:"autofocus",label:"自动获取焦点",includes:["Input","Select","InputTextArea","InputNumber","DatePicker","RangePicker","MonthPicker","TimePicker","Cascader","TreeSelect","Switch","AutoComplete","Slider"]},{name:"allowClear",label:"可清除",includes:["Input","Select","InputTextArea","InputNumber","DatePicker","RangePicker","MonthPicker","TimePicker","Cascader","TreeSelect","AutoComplete"]},{name:"fullscreen",label:"全屏",includes:["Calendar"]},{name:"showSearch",label:"可搜索",includes:["Select","TreeSelect","Cascader","Transfer"]},{name:"showTime",label:"显示时间",includes:["DatePicker","RangePicker","MonthPicker"]},{name:"range",label:"双向滑动",includes:[]},{name:"allowHalf",label:"允许半选",includes:["Rate"]},{name:"multiple",label:"多选",includes:["Select","TreeSelect","Upload"]},{name:"directory",label:"文件夹",includes:["Upload"]},{name:"withCredentials",label:"携带cookie",includes:["Upload"]},{name:"bordered",label:"是否有边框",includes:["Select","Input"]},{name:"defaultActiveFirstOption",label:"高亮第一个选项",component:"Checkbox",includes:["Select","AutoComplete"]},{name:"dropdownMatchSelectWidth",label:"下拉菜单和选择器同宽",component:"Checkbox",includes:["Select","TreeSelect","AutoComplete"]}],ne=[{name:"size",label:"尺寸",component:"RadioGroup",componentProps:{options:[{label:"默认",value:"default"},{label:"大",value:"large"},{label:"小",value:"small"}]},includes:["InputNumber","Input","Cascader","Button"]},{name:"placeholder",label:"占位符",component:"Input",componentProps:{placeholder:"请输入占位符"},includes:["AutoComplete","InputTextArea","InputNumber","Input","InputTextArea","Select","DatePicker","MonthPicker","TimePicker","TreeSelect","Cascader"]},{name:"style",label:"样式",component:"Input",componentProps:{placeholder:"请输入样式"}},{name:"open",label:"一直展开下拉菜单",component:"RadioGroup",componentProps:{options:[{label:"默认",value:void 0},{label:"是",value:!0},{label:"否",value:!1}]},includes:["Select","AutoComplete"]}],d={AutoComplete:[{name:"backfill",label:"自动回填",component:"Switch",componentProps:{span:8}},{name:"defaultOpen",label:"是否默认展开下拉菜单",component:"Checkbox"}],IconPicker:[{name:"mode",label:"模式",component:"RadioGroup",componentProps:{options:[{label:"ICONIFY",value:null},{label:"SVG",value:"svg"}]}}],Input:[{name:"type",label:"类型",component:"Select",componentProps:{options:[{value:"text",label:"文本"},{value:"search",label:"搜索"},{value:"number",label:"数字"},{value:"range",label:"数字范围"},{value:"password",label:"密码"},{value:"date",label:"日期"},{value:"datetime-local",label:"日期-无时区"},{value:"time",label:"时间"},{value:"month",label:"年月"},{value:"week",label:"星期"},{value:"email",label:"邮箱"},{value:"url",label:"URL"},{value:"tel",label:"电话号码"},{value:"file",label:"文件"},{value:"button",label:"按钮"},{value:"submit",label:"提交按钮"},{value:"reset",label:"重置按钮"},{value:"radio",label:"单选按钮"},{value:"checkbox",label:"复选框"},{value:"color",label:"颜色"},{value:"image",label:"图像"},{value:"hidden",label:"隐藏"}]}},{name:"defaultValue",label:"默认值",component:"Input",componentProps:{type:"text",placeholder:"请输入默认值"}},{name:"prefix",label:"前缀",component:"Input",componentProps:{type:"text",placeholder:"请输入前缀"}},{name:"suffix",label:"后缀",component:"Input",componentProps:{type:"text",placeholder:"请输入后缀"}},{name:"addonBefore",label:"前置标签",component:"Input",componentProps:{type:"text",placeholder:"请输入前置标签"}},{name:"addonAfter",label:"后置标签",component:"Input",componentProps:{type:"text",placeholder:"请输入后置标签"}},{name:"maxLength",label:"最大长度",component:"InputNumber",componentProps:{type:"text",placeholder:"请输入最大长度"}}],InputNumber:[{name:"defaultValue",label:"默认值",component:"InputNumber",componentProps:{placeholder:"请输入默认值"}},{name:"min",label:"最小值",component:"InputNumber",componentProps:{type:"text",placeholder:"请输入最小值"}},{name:"max",label:"最大值",component:"InputNumber",componentProps:{type:"text",placeholder:"请输入最大值"}},{name:"precision",label:"数值精度",component:"InputNumber",componentProps:{type:"text",placeholder:"请输入最大值"}},{name:"step",label:"步长",component:"InputNumber",componentProps:{type:"text",placeholder:"请输入步长"}},{name:"decimalSeparator",label:"小数点",component:"Input",componentProps:{type:"text",placeholder:"请输入小数点"}},{name:"addonBefore",label:"前置标签",component:"Input",componentProps:{type:"text",placeholder:"请输入前置标签"}},{name:"addonAfter",label:"后置标签",component:"Input",componentProps:{type:"text",placeholder:"请输入后置标签"}},{name:"controls",label:"是否显示增减按钮",component:"Checkbox"},{name:"keyboard",label:"是否启用键盘快捷行为",component:"Checkbox"},{name:"stringMode",label:"字符值模式",component:"Checkbox"},{name:"bordered",label:"是否有边框",component:"Checkbox"}],InputTextArea:[{name:"defaultValue",label:"默认值",component:"Input",componentProps:{type:"text",placeholder:"请输入默认值"}},{name:"maxlength",label:"最大长度",component:"InputNumber",componentProps:{placeholder:"请输入最大长度"}},{name:"minlength",label:"最小长度",component:"InputNumber",componentProps:{placeholder:"请输入最小长度"}},{name:"cols",label:"可见列数",component:"InputNumber",componentProps:{placeholder:"请输入可见列数",min:0}},{name:"rows",label:"可见行数",component:"InputNumber",componentProps:{placeholder:"请输入可见行数",min:0}},{name:"minlength",label:"最小长度",component:"InputNumber",componentProps:{placeholder:"请输入最小长度"}},{name:"autosize",label:"自适应内容高度",component:"Checkbox"},{name:"showCount",label:"是否展示字数",component:"Checkbox"},{name:"readonly",label:"是否只读",component:"Checkbox"},{name:"spellcheck",label:"读写检查",component:"Checkbox"},{name:"autocomplete",label:"是否自动完成",component:"RadioGroup",componentProps:{options:[{label:"正常",value:null},{label:"开",value:"on"},{label:"关",value:"off"}]}},{name:"autocorrect",label:"是否自动纠错",component:"RadioGroup",componentProps:{options:[{label:"正常",value:null},{label:"开",value:"on"},{label:"关",value:"off"}]}}],Select:[{name:"mode",label:"选择模式(默认单选)",component:"RadioGroup",componentProps:{options:[{label:"单选",value:null},{label:"多选",value:"multiple"},{label:"标签",value:"tags"}]}},{name:"autoClearSearchValue",label:"是否在选中项后清空搜索框",component:"Checkbox"},{name:"labelInValue",label:"选项的label包装到value中",component:"Checkbox"},{name:"showArrow",label:"显示下拉小箭头",component:"Checkbox"},{name:"defaultOpen",label:"默认展开下拉菜单",component:"Checkbox"}],Checkbox:[{name:"indeterminate",label:"设置indeterminate状态",component:"Checkbox"}],CheckboxGroup:[],RadioGroup:[{name:"defaultValue",label:"默认值",component:"Input",componentProps:{placeholder:"请输入默认值"}},{name:"buttonStyle",label:"RadioButton的风格样式",component:"RadioGroup",componentProps:{options:[{label:"outline",value:"outline"},{label:"solid",value:"solid"}]}},{name:"optionType",label:"options类型",component:"RadioGroup",componentProps:{options:[{label:"默认",value:"default"},{label:"按钮",value:"button"}]}},{name:"size",label:"尺寸",component:"RadioGroup",componentProps:{options:[{label:"默认",value:"default"},{label:"大",value:"large"},{label:"小",value:"small"}]}}],DatePicker:[{name:"format",label:"展示格式(format)",component:"Input",componentProps:{placeholder:"YYYY-MM-DD"}},{name:"valueFormat",label:"绑定值格式(valueFormat)",component:"Input",componentProps:{placeholder:"YYYY-MM-DD"}}],RangePicker:[{name:"placeholder",label:"占位符",children:[{name:"",label:"",component:"Input"},{name:"",label:"",component:"Input"}]},{name:"format",label:"展示格式(format)",component:"Input",componentProps:{placeholder:"YYYY-MM-DD HH:mm:ss"}},{name:"valueFormat",label:"绑定值格式(valueFormat)",component:"Input",componentProps:{placeholder:"YYYY-MM-DD"}}],MonthPicker:[{name:"format",label:"展示格式(format)",component:"Input",componentProps:{placeholder:"YYYY-MM"}},{name:"valueFormat",label:"绑定值格式(valueFormat)",component:"Input",componentProps:{placeholder:"YYYY-MM"}}],TimePicker:[{name:"format",label:"展示格式(format)",component:"Input",componentProps:{placeholder:"YYYY-MM"}},{name:"valueFormat",label:"绑定值格式(valueFormat)",component:"Input",componentProps:{placeholder:"YYYY-MM"}}],Slider:[{name:"defaultValue",label:"默认值",component:"InputNumber",componentProps:{placeholder:"请输入默认值"}},{name:"min",label:"最小值",component:"InputNumber",componentProps:{placeholder:"请输入最小值"}},{name:"max",label:"最大值",component:"InputNumber",componentProps:{placeholder:"请输入最大值"}},{name:"step",label:"步长",component:"InputNumber",componentProps:{placeholder:"请输入步长"}},{name:"tooltipPlacement",label:"Tooltip 展示位置",component:"Select",componentProps:{options:[{value:"top",label:"上"},{value:"left",label:"左"},{value:"right",label:"右"},{value:"bottom",label:"下"},{value:"topLeft",label:"上右"},{value:"topRight",label:"上左"},{value:"bottomLeft",label:"右下"},{value:"bottomRight",label:"左下"},{value:"leftTop",label:"左下"},{value:"leftBottom",label:"左上"},{value:"rightTop",label:"右下"},{value:"rightBottom",label:"右上"}]}},{name:"tooltipVisible",label:"始终显示Tooltip",component:"Checkbox"},{name:"dots",label:"只能拖拽到刻度上",component:"Checkbox"},{name:"range",label:"双滑块模式",component:"Checkbox"},{name:"reverse",label:"反向坐标轴",component:"Checkbox"},{name:"vertical",label:"垂直方向",component:"Checkbox"},{name:"included",label:"值为包含关系",component:"Checkbox"}],Rate:[{name:"defaultValue",label:"默认值",component:"InputNumber",componentProps:{placeholder:"请输入默认值"}},{name:"character",label:"自定义字符",component:"Input",componentProps:{placeholder:"请输入自定义字符"}},{name:"count",label:"start 总数",component:"InputNumber",componentProps:{placeholder:"请输入自定义字符"}}],Switch:[{name:"checkedChildren",label:"选中时的内容",component:"Input",componentProps:{placeholder:"请输入选中时的内容"}},{name:"checkedValue",label:"选中时的值",component:"Input",componentProps:{placeholder:"请输入选中时的值"}},{name:"unCheckedChildren",label:"非选中时的内容",component:"Input",componentProps:{placeholder:"请输入非选中时的内容"}},{name:"unCheckedValue",label:"非选中时的值",component:"Input",componentProps:{placeholder:"请输入非选中时的值"}},{name:"loading",label:"加载中的开关",component:"Checkbox"},{name:"size",label:"尺寸",component:"RadioGroup",componentProps:{options:[{label:"默认",value:"default"},{label:"小",value:"small"}]}}],TreeSelect:[{name:"defaultValue",label:"默认值",component:"Input",componentProps:{placeholder:"请输入默认值"}},{name:"searchPlaceholder",label:"搜索框默认文字",component:"Input",componentProps:{placeholder:"请输入搜索框默认文字"}},{name:"treeNodeFilterProp",label:"输入项过滤对应的 treeNode 属性",component:"Input",componentProps:{defaultValue:"value"}},{name:"treeNodeLabelProp",label:"作为显示的 prop 设置",component:"Input",componentProps:{defaultValue:"title"}},{name:"dropdownClassName",label:"下拉菜单的 className 属性",component:"Input",componentProps:{placeholder:"请输入下拉菜单的 className 属性"}},{name:"labelInValue",label:"选项的label包装到value中",component:"Checkbox"},{name:"treeIcon",label:"展示TreeNode title前的图标",component:"Checkbox"},{name:"treeCheckable",label:"选项可勾选",component:"Checkbox"},{name:"treeCheckStrictly",label:"节点选择完全受控",component:"Checkbox"},{name:"treeDefaultExpandAll",label:"默认展开所有",component:"Checkbox"},{name:"treeLine",label:"是否展示线条样式",component:"Checkbox"},{name:"maxTagCount",label:"最多显示多少个 tag",component:"InputNumber",componentProps:{placeholder:"最多显示多少个 tag"}},{name:"size",label:"尺寸",component:"RadioGroup",componentProps:{options:[{label:"默认",value:"default"},{label:"小",value:"small"}]}}],Cascader:[{name:"expandTrigger",label:"次级展开方式(默认click)",component:"RadioGroup",componentProps:{options:[{label:"click",value:"click"},{label:"hover",value:"hover"}]}}],Button:[{name:"type",label:"类型",component:"RadioGroup",componentProps:{options:[{label:"default",value:"default"},{label:"primary",value:"primary"},{label:"danger",value:"danger"},{label:"dashed",value:"dashed"}]}},{name:"handle",label:"操作",component:"RadioGroup",componentProps:{options:[{label:"提交",value:"submit"},{label:"重置",value:"reset"}]}}],Upload:[{name:"action",label:"上传地址",component:"Input"},{name:"name",label:"附件参数名(name)",component:"Input"}],slot:[{name:"slotName",label:"插槽名称",component:"Input"}],Transfer:[{name:"oneWay",label:"展示为单向样式",component:"Checkbox"},{name:"pagination",label:"使用分页样式",component:"Checkbox"},{name:"showSelectAll",label:"展示全选勾选框",component:"Checkbox"}]};function k(e,r){e.forEach((n,m)=>{n.name==r&&e.splice(m,1)})}d.StrengthMeter=d.Input;d.StrengthMeter.push({name:"visibilityToggle",label:"是否显示切换按钮",component:"Checkbox"});k(d.StrengthMeter,"type");k(d.StrengthMeter,"prefix");k(d.StrengthMeter,"defaultValue");k(d.StrengthMeter,"suffix");const A=d,le=(e,r)=>{const n=e.findIndex((m,f)=>m.name==r);if(n&&e[n].componentProps)return e[n].componentProps},ae={RadioGroup:(e,r)=>{const n=le(r,"size");n&&(e.optionType&&e.optionType!="button"?(n.disabled=!0,e.size=null):n.disabled=!1)}},te=_({name:"ComponentProps",components:{FormOptions:O,Empty:L,Input:$,Form:H,FormItem:W,Switch:J,Checkbox:X,Select:j,InputNumber:q,RadioGroup:K,RadioButtonGroup:E,Col:Q,Row:Z},setup(){const e=G([]),r=o=>o?o.includes(n.value.currentItem.component):!0,{formConfig:n}=B();n.value.currentItem&&(n.value.currentItem.componentProps=n.value.currentItem.componentProps||{}),y(()=>{var o;return(o=n.value.currentItem)==null?void 0:o.field},(o,t)=>{n.value.schemas&&U(n.value.schemas,p=>{if(p.link){const u=p.link.findIndex(g=>g===t);u!==-1&&z(p.link,u)}})}),y(()=>n.value.currentItem&&n.value.currentItem.component,()=>{e.value=[],oe.forEach(o=>{o.category="control",o.includes?o.includes.includes(n.value.currentItem.component)&&e.value.push(o):e.value.push(o)}),ne.forEach(o=>{o.category="input",o.includes?o.includes.includes(n.value.currentItem.component)&&e.value.push(o):o.exclude&&o.exclude.includes(n.value.currentItem.component)||e.value.push(o)}),A[n.value.currentItem.component]&&A[n.value.currentItem.component].forEach(o=>R(this,null,function*(){o.component&&(["Switch","Checkbox","Radio"].includes(o.component)?(o.category="control",e.value.push(o)):(o.category="input",e.value.push(o)))}))},{immediate:!0});const m=S(()=>e.value.filter(o=>o.category=="control")),f=S(()=>e.value.filter(o=>o.category=="input"));y(()=>n.value.currentItem.componentProps,()=>{const o=ae[n.value.currentItem.component];o&&o(n.value.currentItem.componentProps,e.value)},{immediate:!0,deep:!0});const I=S(()=>n.value.schemas&&n.value.schemas.filter(o=>o.key!==n.value.currentItem.key).map(({label:o,field:t})=>({label:o+"/"+t,value:t})));return{formConfig:n,showControlAttrs:r,linkOptions:I,controlOptions:m,inputOptions:f}}}),pe={class:"properties-content"},re={key:0,class:"properties-body"},ce={key:0},me={key:0};function ue(e,r,n,m,f,I){const o=h("Empty"),t=h("FormItem"),p=h("Checkbox"),u=h("Col"),g=h("Select"),Y=h("FormOptions"),M=h("Form");return a(),s("div",pe,[e.formConfig.currentItem?(a(),s("div",re,[e.formConfig.currentItem.key?c("v-if",!0):(a(),b(o,{key:0,class:"hint-box",description:"未选择组件"})),C(M,{"label-align":"left",layout:"vertical"},{default:i(()=>[c(" 循环遍历渲染组件属性 "),e.formConfig.currentItem&&e.formConfig.currentItem.componentProps?(a(),s("div",ce,[(a(!0),s(P,null,N(e.inputOptions,l=>(a(),b(t,{key:l.name,label:l.label},{default:i(()=>[c(" 处理数组属性,placeholder "),l.children?(a(),s("div",me,[(a(!0),s(P,null,N(l.children,(v,x)=>(a(),b(T(v.component),F({key:x},v.componentProps,{value:e.formConfig.currentItem.componentProps[l.name][x],"onUpdate:value":w=>e.formConfig.currentItem.componentProps[l.name][x]=w}),null,16,["value","onUpdate:value"]))),128))])):(a(),s(P,{key:1},[c(" 如果不是数组,则正常处理属性值 "),(a(),b(T(l.component),F({class:"component-prop"},l.componentProps,{value:e.formConfig.currentItem.componentProps[l.name],"onUpdate:value":v=>e.formConfig.currentItem.componentProps[l.name]=v}),null,16,["value","onUpdate:value"]))],2112))]),_:2},1032,["label"]))),128)),C(t,{label:"控制属性"},{default:i(()=>[(a(!0),s(P,null,N(e.controlOptions,l=>(a(),b(u,{key:l.name},{default:i(()=>[e.showControlAttrs(l.includes)?(a(),b(p,F({key:0},l.componentProps,{checked:e.formConfig.currentItem.componentProps[l.name],"onUpdate:checked":v=>e.formConfig.currentItem.componentProps[l.name]=v}),{default:i(()=>[V(D(l.label),1)]),_:2},1040,["checked","onUpdate:checked"])):c("v-if",!0)]),_:2},1024))),128))]),_:1})])):c("v-if",!0),C(t,{label:"关联字段"},{default:i(()=>[C(g,{mode:"multiple",value:e.formConfig.currentItem.link,"onUpdate:value":r[0]||(r[0]=l=>e.formConfig.currentItem.link=l),options:e.linkOptions},null,8,["value","options"])]),_:1}),["Select","CheckboxGroup","RadioGroup","TreeSelect","Cascader","AutoComplete"].includes(e.formConfig.currentItem.component)?(a(),b(t,{key:1,label:"选项"},{default:i(()=>[C(Y)]),_:1})):c("v-if",!0),["Grid"].includes(e.formConfig.currentItem.component)?(a(),b(t,{key:2,label:"栅格"},{default:i(()=>[C(Y)]),_:1})):c("v-if",!0)]),_:1})])):c("v-if",!0)])}const ke=ee(te,[["render",ue],["__file","E:/allcode/erp/test7901/order-erp-front/src/views/form-design/components/VFormDesign/components/ComponentProps.vue"]]);export{ke as default};