|
|
|
@@ -76,6 +76,14 @@ export default {
|
|
|
|
|
return {
|
|
|
|
|
active: 0,
|
|
|
|
|
items: [
|
|
|
|
|
{
|
|
|
|
|
title: "完整前端功能扩展",
|
|
|
|
|
content: [
|
|
|
|
|
`其他功能扩展，如：查询前后，保存前后等，参照sellOrder.js或viewGrid组件api`
|
|
|
|
|
],
|
|
|
|
|
tips: ` 前端功能扩展覆盖了常用操作，可通过扩展实现任意功能`,
|
|
|
|
|
img: ""
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "第一个扩展：动态添加按钮",
|
|
|
|
|
content: [
|
|
|
|
@@ -627,6 +635,505 @@ export default {
|
|
|
|
|
tips: `在前端表的扩展js中,onInit与onInited初始化要统计的字段，后台在xxxService.cs中重写查询方法，并实现要统计的字段即可完成表格统计，无需其他操作`,
|
|
|
|
|
img: "https://doc-vue-1256993465.cos.ap-chengdu.myqcloud.com/09.png"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "级联操作",
|
|
|
|
|
content: [
|
|
|
|
|
`<div style="color:#D4D4D4;background-color:#1E1E1E;font-family:Consolas, "font-size:14px;line-height:19px;white-space:pre;">
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#6a9955;">/*</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#6a9955;"> 详细配置数据源及格式见Iview组件</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#6a9955;"> https://iviewui.com/components/cascader</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#6a9955;"> */</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#dcdcaa;">onInit</span>() {
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#6a9955;">//级联操作基于Iview组件cascader(数据源的格式见iview原生组件demo配置)span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#6a9955;">//设置表单的默认值,没有值就设置为空数组(必须)</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#6a9955;">//在数据库中保存后的多个值实际是以逗号的字符串</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#569cd6;">this</span>.<span style="color:#9cdcfe;">editFormFileds</span>.<span style="color:#9cdcfe;">ExpertName</span> = []; <span style="color:#6a9955;">//["北京","天坛"]</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#6a9955;">//设置数据源(必须)</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#569cd6;">this</span>.<span style="color:#9cdcfe;">editFormOptions</span>.<span style="color:#dcdcaa;">forEach</span>(<span style="color:#9cdcfe;">x</span> <span style="color:#569cd6;">=></span> {
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#9cdcfe;">x</span>.<span style="color:#dcdcaa;">forEach</span>(<span style="color:#9cdcfe;">item</span> <span style="color:#569cd6;">=></span> {
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#c586c0;">if</span> (<span style="color:#9cdcfe;">item</span>.<span style="color:#9cdcfe;">field</span> == <span style="color:#ce9178;">'ExpertName'</span>) {
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#6a9955;">//设置为级联类型(必须)</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#9cdcfe;">item</span>.<span style="color:#9cdcfe;">type</span> = <span style="color:#ce9178;">"cascader"</span>;
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#6a9955;">//初始数据源对象,格式见iview原生cascader组件(必须)</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#6a9955;">//注意：value与label不同时，保存后存储的就是value值，在table上显示的就是value</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#6a9955;">//解决办法：需要在table(this.columns)中设置formatter处理(建议value与lable相同)</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#9cdcfe;">item</span>.<span style="color:#9cdcfe;">data</span> = [{
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#9cdcfe;">value</span><span style="color:#9cdcfe;">:</span> <span style="color:#ce9178;">"北京"</span>,
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#9cdcfe;">label</span><span style="color:#9cdcfe;">:</span> <span style="color:#ce9178;">"北京"</span>,
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#9cdcfe;">children</span><span style="color:#9cdcfe;">:</span> [
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
{ <span style="color:#9cdcfe;">value</span><span style="color:#9cdcfe;">:</span> <span style="color:#ce9178;">"天坛"</span>, <span style="color:#9cdcfe;">label</span><span style="color:#9cdcfe;">:</span> <span style="color:#ce9178;">"天坛"</span> },
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
{ <span style="color:#9cdcfe;">value</span><span style="color:#9cdcfe;">:</span> <span style="color:#ce9178;">"王府井"</span>, <span style="color:#9cdcfe;">label</span><span style="color:#9cdcfe;">:</span> <span style="color:#ce9178;">"王府井"</span> }
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
]
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
}];
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#6a9955;">//格式化显示(非必须)</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#6a9955;">// item.formatter=(labels, selectedData)=>{</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#6a9955;">// const index = labels.length - 1;</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#6a9955;">// const data = selectedData[index] || false;</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#6a9955;">// if (data && data.label) {</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#6a9955;">// return labels[index] + ' - ' + data.label+"888";</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#6a9955;">// }</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#6a9955;">// return labels[index];</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#6a9955;">// }</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
}
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
})
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
})
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
}
|
|
|
|
|
</div>
|
|
|
|
|
</div>`
|
|
|
|
|
],
|
|
|
|
|
tips: `级联操作基于Iview组件cascader(数据源的格式见iview原生组件demo配置),数据量少的情况下建议直接把数据源加载出来绑定，数据量过多时使用懒加载`,
|
|
|
|
|
img: "https://doc-vue-1256993465.cos.ap-chengdu.myqcloud.com/14.png"
|
|
|
|
|
|
|
|
|
|
},{
|
|
|
|
|
title: "级联(后台加载数据源)",
|
|
|
|
|
content: [`<div style="color:#D4D4D4;background-color:#1E1E1E;font-family:Consolas, "font-size:14px;line-height:19px;white-space:pre;">
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#dcdcaa;">onInit</span>() {
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#6a9955;">//设置表单的默认值,没有值就设置为空数组(必须)</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#6a9955;">//在数据库中保存后的多个值实际是以逗号的字符串</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#569cd6;">this</span>.<span style="color:#9cdcfe;">editFormFileds</span>.<span style="color:#9cdcfe;">ExpertName</span> = []; <span style="color:#6a9955;">//["北京","天坛"]</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#6a9955;">//设置数据源(必须)</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#569cd6;">this</span>.<span style="color:#9cdcfe;">editFormOptions</span>.<span style="color:#dcdcaa;">forEach</span>(<span style="color:#9cdcfe;">x</span> <span style="color:#569cd6;">=></span> {
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#9cdcfe;">x</span>.<span style="color:#dcdcaa;">forEach</span>(<span style="color:#9cdcfe;">item</span> <span style="color:#569cd6;">=></span> {
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#c586c0;">if</span> (<span style="color:#9cdcfe;">item</span>.<span style="color:#9cdcfe;">field</span> == <span style="color:#ce9178;">'ExpertName'</span>) {
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#6a9955;">//设置为级联类型(必须)</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#9cdcfe;">item</span>.<span style="color:#9cdcfe;">type</span> = <span style="color:#ce9178;">"cascader"</span>;
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#6a9955;">//初始一个空的数据源(必须)</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#9cdcfe;">item</span>.<span style="color:#9cdcfe;">data</span> = [];
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#6a9955;">//从后台接口返回数据源,格式见iview组件result(建议在modelOpenBefore方法中设置数据源)</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#569cd6;">this</span>.<span style="color:#9cdcfe;">http</span>.<span style="color:#dcdcaa;">post</span>(<span style="color:#ce9178;">"xxx"</span>).<span style="color:#dcdcaa;">then</span>(<span style="color:#9cdcfe;">result</span><span style="color:#569cd6;">=></span>{
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#9cdcfe;">item</span>.<span style="color:#9cdcfe;">data</span>.<span style="color:#dcdcaa;">push</span>(...<span style="color:#9cdcfe;">result</span>);
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#6a9955;">//result数据格式或见iview组件cascader数据源配置格式</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#6a9955;">// [{</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#6a9955;">// value: "北京",</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#6a9955;">// label: "北京",</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#6a9955;">// children: [</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#6a9955;">// { value: "天坛", label: "天坛" },</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#6a9955;">// { value: "王府井", label: "王府井" }</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#6a9955;">// ]</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#6a9955;">// }];</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
})
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
}
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
})
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
})
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
},
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#dcdcaa;">modelOpenBefore</span>(){<span style="color:#6a9955;">//打开弹出框时</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#6a9955;">//如果考虑性能，建议在此处调用 this.http.post设置级联数据源</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
},
|
|
|
|
|
</div>
|
|
|
|
|
</div>`], tips: `级联操作基于Iview组件cascader(数据源的格式见iview原生组件demo配置),数据量少的情况下建议直接把数据源加载出来绑定，数据量过多时使用懒加载`,
|
|
|
|
|
img: ""
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "级联赖(动态)加载",
|
|
|
|
|
content: [`<div style="color:#D4D4D4;background-color:#1E1E1E;font-family:Consolas, "font-size:14px;line-height:19px;white-space:pre;">
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#6a9955;">/*</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#6a9955;"> 详细配置数据源及格式见Iview组件</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#6a9955;"> https://iviewui.com/components/cascader</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#6a9955;"> */</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#dcdcaa;">onInit</span>() {
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#569cd6;">this</span>.<span style="color:#9cdcfe;">editFormFileds</span>.<span style="color:#9cdcfe;">ExpertName</span> = []; <span style="color:#6a9955;">//["北京","天坛"]</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#6a9955;">//设置数据源(必须)</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#569cd6;">this</span>.<span style="color:#9cdcfe;">editFormOptions</span>.<span style="color:#dcdcaa;">forEach</span>(<span style="color:#9cdcfe;">x</span> <span style="color:#569cd6;">=></span> {
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#9cdcfe;">x</span>.<span style="color:#dcdcaa;">forEach</span>(<span style="color:#9cdcfe;">option</span> <span style="color:#569cd6;">=></span> {
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#c586c0;">if</span> (<span style="color:#9cdcfe;">option</span>.<span style="color:#9cdcfe;">field</span> == <span style="color:#ce9178;">'ExpertName'</span>) {
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#6a9955;">//设置为级联类型(必须)</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#9cdcfe;">option</span>.<span style="color:#9cdcfe;">type</span> = <span style="color:#ce9178;">"cascader"</span>;
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#6a9955;">//初始数据源对象,格式见iview原生cascader组件(必须)</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#6a9955;">//懒加载必须初始化一级选择项(可以从后台加载出来data一级选项)</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#9cdcfe;">option</span>.<span style="color:#9cdcfe;">data</span> = [{
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#9cdcfe;">value</span><span style="color:#9cdcfe;">:</span> <span style="color:#ce9178;">"北京"</span>,
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#9cdcfe;">loading</span><span style="color:#9cdcfe;">:</span> <span style="color:#569cd6;">false</span>, <span style="color:#6a9955;">//懒加载此属性必须设置</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#9cdcfe;">label</span><span style="color:#9cdcfe;">:</span> <span style="color:#ce9178;">"北京"</span>,
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#9cdcfe;">children</span><span style="color:#9cdcfe;">:</span> []
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
}];
|
|
|
|
|
</div>
|
|
|
|
|
<br />
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#6a9955;">//触发懒加载</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#9cdcfe;">option</span>.<span style="color:#dcdcaa;">loadData</span> = (<span style="color:#9cdcfe;">item</span>, <span style="color:#9cdcfe;">callback</span>) <span style="color:#569cd6;">=></span> {
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#c586c0;">if</span> (<span style="color:#9cdcfe;">item</span>.<span style="color:#9cdcfe;">children</span>.<span style="color:#9cdcfe;">length</span> > <span style="color:#b5cea8;">0</span>) <span style="color:#c586c0;">return</span>;
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#9cdcfe;">item</span>.<span style="color:#9cdcfe;">loading</span> = <span style="color:#569cd6;">true</span>;
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#569cd6;">this</span>.<span style="color:#9cdcfe;">http</span>.<span style="color:#dcdcaa;">post</span>(<span style="color:#ce9178;">"xxx"</span>).<span style="color:#dcdcaa;">then</span>(<span style="color:#9cdcfe;">children</span> <span style="color:#569cd6;">=></span> {
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#9cdcfe;">item</span>.<span style="color:#9cdcfe;">loading</span> = <span style="color:#569cd6;">false</span>;
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#9cdcfe;">item</span>.<span style="color:#9cdcfe;">children</span> = <span style="color:#9cdcfe;">children</span>;
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
callback()<span style="color:#9cdcfe;">loading</span> = <span style="color:#569cd6;">false</span>;
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#6a9955;">//children格式或参照iview组件cascader动态加载选项的配置</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#6a9955;">// [{</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#6a9955;">// value: 'hangzhou',</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#6a9955;">// label: '杭州',</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#6a9955;">// children: [{</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#6a9955;">// value: 'xihu',</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#6a9955;">// label: '西湖',</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#6a9955;">// code: 1000</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#6a9955;">// }]</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#6a9955;">// }]</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
})
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
}
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
}
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
})
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
})
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
}
|
|
|
|
|
</div>
|
|
|
|
|
</div><div style="color:#D4D4D4;background-color:#1E1E1E;font-family:Consolas, "font-size:14px;line-height:19px;white-space:pre;">
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#6a9955;">/*</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#6a9955;"> 详细配置数据源及格式见Iview组件</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#6a9955;"> https://iviewui.com/components/cascader</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#6a9955;"> */</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#dcdcaa;">onInit</span>() {
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#569cd6;">this</span>.<span style="color:#9cdcfe;">editFormFileds</span>.<span style="color:#9cdcfe;">ExpertName</span> = []; <span style="color:#6a9955;">//["北京","天坛"]</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#6a9955;">//设置数据源(必须)</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#569cd6;">this</span>.<span style="color:#9cdcfe;">editFormOptions</span>.<span style="color:#dcdcaa;">forEach</span>(<span style="color:#9cdcfe;">x</span> <span style="color:#569cd6;">=></span> {
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#9cdcfe;">x</span>.<span style="color:#dcdcaa;">forEach</span>(<span style="color:#9cdcfe;">option</span> <span style="color:#569cd6;">=></span> {
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#c586c0;">if</span> (<span style="color:#9cdcfe;">option</span>.<span style="color:#9cdcfe;">field</span> == <span style="color:#ce9178;">'ExpertName'</span>) {
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#6a9955;">//设置为级联类型(必须)</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#9cdcfe;">option</span>.<span style="color:#9cdcfe;">type</span> = <span style="color:#ce9178;">"cascader"</span>;
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#6a9955;">//初始数据源对象,格式见iview原生cascader组件(必须)</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#6a9955;">//懒加载必须初始化一级选择项(可以从后台加载出来data一级选项)</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#9cdcfe;">option</span>.<span style="color:#9cdcfe;">data</span> = [{
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#9cdcfe;">value</span><span style="color:#9cdcfe;">:</span> <span style="color:#ce9178;">"北京"</span>,
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#9cdcfe;">loading</span><span style="color:#9cdcfe;">:</span> <span style="color:#569cd6;">false</span>, <span style="color:#6a9955;">//懒加载此属性必须设置</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#9cdcfe;">label</span><span style="color:#9cdcfe;">:</span> <span style="color:#ce9178;">"北京"</span>,
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#9cdcfe;">children</span><span style="color:#9cdcfe;">:</span> []
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
}];
|
|
|
|
|
</div>
|
|
|
|
|
<br />
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#6a9955;">//触发懒加载</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#9cdcfe;">option</span>.<span style="color:#dcdcaa;">loadData</span> = (<span style="color:#9cdcfe;">item</span>, <span style="color:#9cdcfe;">callback</span>) <span style="color:#569cd6;">=></span> {
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#c586c0;">if</span> (<span style="color:#9cdcfe;">item</span>.<span style="color:#9cdcfe;">children</span>.<span style="color:#9cdcfe;">length</span> > <span style="color:#b5cea8;">0</span>) <span style="color:#c586c0;">return</span>;
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#9cdcfe;">item</span>.<span style="color:#9cdcfe;">loading</span> = <span style="color:#569cd6;">true</span>;
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#569cd6;">this</span>.<span style="color:#9cdcfe;">http</span>.<span style="color:#dcdcaa;">post</span>(<span style="color:#ce9178;">"xxx"</span>).<span style="color:#dcdcaa;">then</span>(<span style="color:#9cdcfe;">children</span> <span style="color:#569cd6;">=></span> {
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#9cdcfe;">item</span>.<span style="color:#9cdcfe;">loading</span> = <span style="color:#569cd6;">false</span>;
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#9cdcfe;">item</span>.<span style="color:#9cdcfe;">children</span> = <span style="color:#9cdcfe;">children</span>;
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#6a9955;">//children格式或参照iview组件cascader动态加载选项的配置</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#6a9955;">// [{</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#6a9955;">// value: 'hangzhou',</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#6a9955;">// label: '杭州',</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#6a9955;">// children: [{</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#6a9955;">// value: 'xihu',</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#6a9955;">// label: '西湖',</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#6a9955;">// code: 1000</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#6a9955;">// }]</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span style="color:#6a9955;">// }]</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
})
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
}
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
}
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
})
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
})
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
}
|
|
|
|
|
</div>
|
|
|
|
|
</div>`],
|
|
|
|
|
tips: `级联操作基于Iview组件cascader(数据源的格式见iview原生组件demo配置),数据量少的情况下建议直接把数据源加载出来绑定，数据量过多时使用懒加载`,
|
|
|
|
|
img: ""
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "编辑多图/文件上传",
|
|
|
|
|
content: [
|
|
|
|
@@ -895,14 +1402,6 @@ export default {
|
|
|
|
|
img: ""
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "完整前端功能扩展",
|
|
|
|
|
content: [
|
|
|
|
|
`其他功能扩展，如：查询前后，保存前后等，参照sellOrder.js或viewGrid组件api`
|
|
|
|
|
],
|
|
|
|
|
tips: ` 前端功能扩展覆盖了常用操作，可通过扩展实现任意功能`,
|
|
|
|
|
img: ""
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "自动绑定表单/表数据源",
|
|
|
|
|
content: [
|
|
|
|
|
`
|
|
|
|
@@ -914,7 +1413,7 @@ export default {
|
|
|
|
|
tips: `字典绑定数据还支持远程模糊查询与自动模糊查询,提前在菜单[下拉框绑定设置]配置好，不需要写任何代码`,
|
|
|
|
|
img: ""
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
{
|
|
|
|
|
title: "select远程搜索",
|
|
|
|
|
content: [
|
|
|
|
|
`<div style="color:#D4D4D4;background-color:#1E1E1E;font-family:Consolas, "font-size:14px;line-height:19px;white-space:pre;">
|
|
|
|
|
jxx