|
|
|
|
@ -485,6 +485,103 @@ const emRef3 = proxy.$refs.emRef3;
|
|
|
|
|
|
|
|
|
|
</el-tab-pane>
|
|
|
|
|
|
|
|
|
|
<el-tab-pane label="字典数据">
|
|
|
|
|
<h2>字典显示组件: w-tag</h2>
|
|
|
|
|
<div>操作类型(sys_oper_type):<w-tag name="sys_oper_type" v-for="i in 9" :key="i" :value="i"/></div>
|
|
|
|
|
<div>其他设置:<w-tag name="sys_oper_type" value="2" border />
|
|
|
|
|
<w-tag name="sys_oper_type" value="3" border style="--margin: 0 2em;" />
|
|
|
|
|
<w-tag name="sys_oper_type" value="4" border style="color:red;" />
|
|
|
|
|
</div>
|
|
|
|
|
<div>使用插槽:<w-tag name="sys_oper_type" value="2" border >
|
|
|
|
|
<template #default="{dict}">
|
|
|
|
|
{{ JSON.stringify(dict) }}
|
|
|
|
|
</template>
|
|
|
|
|
</w-tag>
|
|
|
|
|
</div>
|
|
|
|
|
<w-code language="html">{{ ` <div>操作类型(sys_oper_type):<w-tag name="sys_oper_type" v-for="i in 9" :key="i" :value="i"/></div>
|
|
|
|
|
<div>其他设置:<w-tag name="sys_oper_type" value="2" border />
|
|
|
|
|
<w-tag name="sys_oper_type" value="3" border style="--margin: 0 2em;" />
|
|
|
|
|
<w-tag name="sys_oper_type" value="4" border style="color:red;" />
|
|
|
|
|
</div>
|
|
|
|
|
<div>使用插槽:<w-tag name="sys_oper_type" value="2" border >
|
|
|
|
|
<template #default="{dict}">
|
|
|
|
|
\{\{ JSON.stringify(dict) \}\}
|
|
|
|
|
</template>
|
|
|
|
|
</w-tag>
|
|
|
|
|
</div>` }}</w-code>
|
|
|
|
|
<h3>参数说明</h3>
|
|
|
|
|
<ol style="margin: 1em 3em;">
|
|
|
|
|
<li>name: 必填,字典类型</li>
|
|
|
|
|
<li>value: 必填,字典值,Number,String</li>
|
|
|
|
|
<li>border: 是否显示边框</li>
|
|
|
|
|
<li>--margin: CSS变量,外边距,可以直接使用margin</li>
|
|
|
|
|
<li>--color: 颜色,优先,可以直接使用color</li>
|
|
|
|
|
<li>插槽(default): dict</li>
|
|
|
|
|
</ol>
|
|
|
|
|
|
|
|
|
|
<h2>字典列表显示组件: w-tags</h2>
|
|
|
|
|
<div>操作类型(sys_oper_type):<w-tags name="sys_oper_type" border/></div>
|
|
|
|
|
<div style="--margin: 0 2em; --color: red;">操作类型(sys_oper_type):<w-tags name="sys_oper_type" border/></div>
|
|
|
|
|
<div >操作类型(sys_oper_type):<w-tags name="sys_oper_type">
|
|
|
|
|
<template #default="{dict,index}">
|
|
|
|
|
<div>{{ index }}:{{ dict }}</div>
|
|
|
|
|
</template>
|
|
|
|
|
</w-tags></div>
|
|
|
|
|
<w-code language="html">{{ ` <div>操作类型(sys_oper_type):<w-tags name="sys_oper_type" border/></div>
|
|
|
|
|
<div style="--margin: 0 2em; --color: red;">操作类型(sys_oper_type):<w-tags name="sys_oper_type" border/></div>
|
|
|
|
|
<div >操作类型(sys_oper_type):<w-tags name="sys_oper_type">
|
|
|
|
|
<template #default="{dict,index}">
|
|
|
|
|
<div>\{\{ index \}\}:\{\{ dict \}\}</div>
|
|
|
|
|
</template>
|
|
|
|
|
</w-tags></div>` }}</w-code>
|
|
|
|
|
|
|
|
|
|
<h3>参数说明</h3>
|
|
|
|
|
<ol style="margin: 1em 3em;">
|
|
|
|
|
<li>name: 必填,字典类型</li>
|
|
|
|
|
<li>border: 是否显示边框</li>
|
|
|
|
|
<li>--margin: CSS变量,需要父元素设定</li>
|
|
|
|
|
<li>--color: 颜色,优先,需要父元素设定</li>
|
|
|
|
|
<li>插槽(default): dict,index</li>
|
|
|
|
|
</ol>
|
|
|
|
|
|
|
|
|
|
<h2>下拉选择组件: w-tag-select</h2>
|
|
|
|
|
<w-tag-select name="sys_oper_type" v-model="tag1"/>{{ tag1 }}
|
|
|
|
|
<w-tag-select name="sys_oper_type" v-model="tag2"/>{{ tag2 }}
|
|
|
|
|
|
|
|
|
|
<w-code language="html">{{ ` <w-tag-select name="sys_oper_type" v-model="tag1"/>\{\{ tag1 \}\}
|
|
|
|
|
<w-tag-select name="sys_oper_type" v-model="tag2"/>\{\{ tag2 \}\}` }}</w-code>
|
|
|
|
|
|
|
|
|
|
<h3>参数说明</h3>
|
|
|
|
|
<ol style="margin: 1em 3em;">
|
|
|
|
|
<li>name: 必填,字典类型</li>
|
|
|
|
|
<li>说明: 本组使用el-select进行简单封装,复杂应用请使用字典数据仓库完成</li>
|
|
|
|
|
<li>可以使用的el-select属性:clearable,size,placeholder,disabled</li>
|
|
|
|
|
</ol>
|
|
|
|
|
<h2>字典数据仓库</h2>
|
|
|
|
|
<w-code language="javascript">{{ ` import { useDictStore } from '@/store';
|
|
|
|
|
const dictStore = useDictStore();` }}
|
|
|
|
|
</w-code>
|
|
|
|
|
<div>获取列表: dictStore.list('sys_oper_type')</div>
|
|
|
|
|
<pre style="font-size: .7em; height: 15em; margin: 1em; overflow-y: scroll; border: #FFF4 solid 1px; padding: 1em; border-radius: 1em; background-color: #fff1; ">{{ JSON.stringify(dictStore.list('sys_oper_type'),null,2) }}</pre>
|
|
|
|
|
<div>获取单个: dictStore.get('sys_oper_type',1)</div>
|
|
|
|
|
<pre style="font-size: .7em; height: 10em; margin: 1em; overflow-y: scroll; border: #FFF4 solid 1px; padding: 1em; border-radius: 1em; background-color: #fff1; ">{{ JSON.stringify(dictStore.get('sys_oper_type',1),null,2) }}</pre>
|
|
|
|
|
<div>同步获取列表: dictStore.listAsync('sys_oper_type')</div>
|
|
|
|
|
<w-code language="javascript">{{ ` const dictList = ref([]);
|
|
|
|
|
onMounted(async() => {
|
|
|
|
|
dictList.value = await dictStore.listAsync('sys_oper_type');
|
|
|
|
|
})` }}
|
|
|
|
|
</w-code>
|
|
|
|
|
<pre style="font-size: .7em; height: 15em; margin: 1em; overflow-y: scroll; border: #FFF4 solid 1px; padding: 1em; border-radius: 1em; background-color: #fff1; ">{{ JSON.stringify(dictList,null,2) }}</pre>
|
|
|
|
|
<div>同步获取单个: dictStore.getAsync('sys_oper_type',1)</div>
|
|
|
|
|
<w-code language="javascript">{{ `const dictOne = ref({});
|
|
|
|
|
onMounted(async() => {
|
|
|
|
|
dictOne.value = await dictStore.getAsync('sys_oper_type',1);
|
|
|
|
|
})` }}
|
|
|
|
|
</w-code>
|
|
|
|
|
<pre style="font-size: .7em; height: 10em; margin: 1em; overflow-y: scroll; border: #FFF4 solid 1px; padding: 1em; border-radius: 1em; background-color: #fff1; ">{{ JSON.stringify(dictOne,null,2) }}</pre>
|
|
|
|
|
|
|
|
|
|
<h2>原始请求方法: getDicts(name)</h2>
|
|
|
|
|
</el-tab-pane>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</el-tabs>
|
|
|
|
|
@ -494,8 +591,24 @@ const emRef3 = proxy.$refs.emRef3;
|
|
|
|
|
<script setup>
|
|
|
|
|
|
|
|
|
|
import { ElMessage } from 'element-plus';
|
|
|
|
|
import { ref, useTemplateRef } from 'vue';
|
|
|
|
|
import { ref, useTemplateRef,onMounted } from 'vue';
|
|
|
|
|
import { unit } from '@/util'
|
|
|
|
|
import { useDictStore } from '@/store'
|
|
|
|
|
|
|
|
|
|
const tag1 = ref(undefined);
|
|
|
|
|
const tag2 = ref(2);
|
|
|
|
|
|
|
|
|
|
const dictStore = useDictStore();
|
|
|
|
|
|
|
|
|
|
const dictList = ref([]);
|
|
|
|
|
onMounted(async() => {
|
|
|
|
|
dictList.value = await dictStore.listAsync('sys_oper_type');
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
const dictOne = ref({});
|
|
|
|
|
onMounted(async() => {
|
|
|
|
|
dictOne.value = await dictStore.getAsync('sys_oper_type',1);
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
const tabIndex = ref(localStorage.getItem('componentsTabIndex') || 'code');
|
|
|
|
|
|
|
|
|
|
@ -525,6 +638,18 @@ const resize = ({ chart, px, setOption }) => {
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
h2 {
|
|
|
|
|
margin: 2em 0 1em;
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
|
|
&::before {
|
|
|
|
|
content: '';
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 1px;
|
|
|
|
|
background-color: #FFF7;
|
|
|
|
|
bottom: -.4em;
|
|
|
|
|
transform: scaleY(.1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
h3 {
|
|
|
|
|
|