初始化项目
This commit is contained in:
87
src/views/pages/awesome/index.vue
Normal file
87
src/views/pages/awesome/index.vue
Normal file
@@ -0,0 +1,87 @@
|
||||
<template>
|
||||
<div class="awesome-container">
|
||||
<el-card shadow="hover" :header="`fontawesome 字体图标(自动载入)：${sheetsIconList.length - 24}个`">
|
||||
<el-row class="iconfont-row">
|
||||
<el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="2" v-for="(v, k) in sheetsIconList" :key="k">
|
||||
<div class="iconfont-warp">
|
||||
<div class="flex-margin">
|
||||
<div class="iconfont-warp-value">
|
||||
<i :class="v" class="fa"></i>
|
||||
</div>
|
||||
<div class="iconfont-warp-label mt10">{{ v }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, onMounted, defineComponent } from 'vue';
|
||||
import initIconfont from '/@/utils/getStyleSheets';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'pagesAwesome',
|
||||
setup() {
|
||||
const state = reactive({
|
||||
sheetsIconList: [],
|
||||
});
|
||||
// 初始化获取 css 样式，这里使用fontawesome的图标(记得加上前缀 `fa`)，其它第三方请自行做判断
|
||||
const initGetStyleSheets = () => {
|
||||
initIconfont.awe().then((res: any) => (state.sheetsIconList = res));
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
initGetStyleSheets();
|
||||
});
|
||||
return {
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.awesome-container {
|
||||
.iconfont-row {
|
||||
border-top: 1px solid var(--next-border-color-light);
|
||||
border-left: 1px solid var(--next-border-color-light);
|
||||
.iconfont-warp {
|
||||
text-align: center;
|
||||
border-right: 1px solid var(--next-border-color-light);
|
||||
border-bottom: 1px solid var(--next-border-color-light);
|
||||
height: 120px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
transition: all 0.3s ease;
|
||||
&:hover {
|
||||
box-shadow: 0 2px 12px var(--next-color-dark-hover);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
.iconfont-warp-value {
|
||||
i {
|
||||
color: var(--el-color-primary);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
.iconfont-warp-label {
|
||||
color: var(--el-color-primary);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
.iconfont-warp-value {
|
||||
i {
|
||||
color: #606266;
|
||||
font-size: 32px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
.iconfont-warp-label {
|
||||
color: #99a9bf;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
66
src/views/pages/drag/index.vue
Normal file
66
src/views/pages/drag/index.vue
Normal file
@@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<div class="drag-container">
|
||||
<el-card shadow="hover" header="拖动指令效果（v-drag）作用于 Dialog 对话框">
|
||||
<el-button type="primary" @click="dialogVisible = true" size="default">
|
||||
<el-icon>
|
||||
<ele-Pointer />
|
||||
</el-icon>
|
||||
点击打开 Dialog
|
||||
</el-button>
|
||||
</el-card>
|
||||
|
||||
<el-card shadow="hover" header="自定义div" class="mt15">
|
||||
<div class="drag-dom">
|
||||
<div class="drag-header">
|
||||
<el-button type="success" size="default" v-drag="['.drag-container .drag-dom', '.drag-container .drag-header']">
|
||||
<el-icon>
|
||||
<ele-Pointer />
|
||||
</el-icon>
|
||||
按住进行拖动测试
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-dialog v-model="dialogVisible" width="769px">
|
||||
<template #header>
|
||||
<div v-drag="['.drag-container .el-dialog', '.drag-container .el-dialog__header']">拖动指令效果（v-drag）</div>
|
||||
</template>
|
||||
<p>鼠标放标题头进行 Dialog 对话框拖动</p>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false" size="default">取 消</el-button>
|
||||
<el-button type="primary" @click="dialogVisible = false" size="default">确 定</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'pagesDrag',
|
||||
setup() {
|
||||
const state = reactive({
|
||||
dialogVisible: false,
|
||||
});
|
||||
return {
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.drag-container {
|
||||
.drag-dom {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
.drag-header {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
204
src/views/pages/dynamicForm/index.vue
Normal file
204
src/views/pages/dynamicForm/index.vue
Normal file
@@ -0,0 +1,204 @@
|
||||
<template>
|
||||
<div class="dynamic-form-container">
|
||||
<el-card shadow="hover" header="动态复杂表单">
|
||||
<el-form :model="form" ref="formRulesOneRef" size="default" label-width="100px" class="mt35">
|
||||
<el-row :gutter="35">
|
||||
<el-col
|
||||
:xs="val.xs"
|
||||
:sm="val.sm"
|
||||
:md="val.md"
|
||||
:lg="val.md"
|
||||
:xl="val.xl"
|
||||
class="mb20"
|
||||
v-show="val.isShow"
|
||||
v-for="(val, key) in formData"
|
||||
:key="key"
|
||||
>
|
||||
<template v-if="val.type !== ''">
|
||||
<el-form-item
|
||||
:label="val.label"
|
||||
:prop="val.prop"
|
||||
:rules="[{ required: val.required, message: `${val.label}不能为空`, trigger: val.type === 'input' ? 'blur' : 'change' }]"
|
||||
v-if="val.type !== ''"
|
||||
>
|
||||
<el-input
|
||||
v-model="form[val.prop]"
|
||||
:placeholder="val.placeholder"
|
||||
clearable
|
||||
v-if="val.type === 'input'"
|
||||
style="width: 100%"
|
||||
:disabled="val.disabled"
|
||||
></el-input>
|
||||
<el-date-picker
|
||||
v-model="form[val.prop]"
|
||||
type="date"
|
||||
:placeholder="val.placeholder"
|
||||
v-else-if="val.type === 'date'"
|
||||
style="width: 100%"
|
||||
:disabled="val.disabled"
|
||||
>
|
||||
</el-date-picker>
|
||||
<el-select
|
||||
v-model="form[val.prop]"
|
||||
:placeholder="val.placeholder"
|
||||
v-else-if="val.type === 'select'"
|
||||
style="width: 100%"
|
||||
:disabled="val.disabled"
|
||||
>
|
||||
<el-option v-for="item in val.options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
|
||||
</el-select>
|
||||
<el-input
|
||||
type="textarea"
|
||||
v-model="form[val.prop]"
|
||||
:placeholder="val.placeholder"
|
||||
clearable
|
||||
v-if="val.type === 'textarea'"
|
||||
style="width: 100%"
|
||||
:disabled="val.disabled"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-row :gutter="35" v-for="(v, k) in form.list" :key="k">
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
|
||||
<el-form-item label="年度" :prop="`list[${k}].year`" :rules="[{ required: true, message: `年度不能为空`, trigger: 'blur' }]">
|
||||
<template #label>
|
||||
<el-button type="primary" circle size="small" @click="onAddRow" v-if="k === 0">
|
||||
<el-icon>
|
||||
<ele-Plus />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
<el-button type="danger" circle size="small" @click="onDelRow(k)" v-else>
|
||||
<el-icon>
|
||||
<ele-Delete />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
<span class="ml10">年度</span>
|
||||
</template>
|
||||
<el-input v-model="form.list[k].year" style="width: 100%" placeholder="请输入"> </el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
|
||||
<el-form-item label="月度" :prop="`list[${k}].month`" :rules="[{ required: true, message: `月度不能为空`, trigger: 'blur' }]">
|
||||
<el-input v-model="form.list[k].month" style="width: 100%" placeholder="请输入"> </el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
|
||||
<el-form-item label="日度" :prop="`list[${k}].day`" :rules="[{ required: true, message: `日度不能为空`, trigger: 'blur' }]">
|
||||
<el-input v-model="form.list[k].day" style="width: 100%" placeholder="请输入"> </el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-card>
|
||||
<el-row class="flex mt15">
|
||||
<div class="flex-margin">
|
||||
<el-button size="default" @click="onResetForm">
|
||||
<el-icon>
|
||||
<ele-RefreshRight />
|
||||
</el-icon>
|
||||
重置表单
|
||||
</el-button>
|
||||
<el-button size="default" type="primary" @click="onSubmitForm">
|
||||
<SvgIcon name="iconfont icon-shuxing" />
|
||||
验证表单
|
||||
</el-button>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, onMounted, getCurrentInstance, defineComponent } from 'vue';
|
||||
import { formData } from './mock';
|
||||
|
||||
// 定义接口来定义对象的类型
|
||||
interface FormDataOptions {
|
||||
label: string;
|
||||
value: string;
|
||||
}
|
||||
interface FormDataState {
|
||||
label: string;
|
||||
prop: string;
|
||||
placeholder: string;
|
||||
clearable: boolean;
|
||||
disabled: boolean;
|
||||
required: boolean;
|
||||
type: string;
|
||||
i18n: boolean;
|
||||
i18nText: string;
|
||||
isShow: boolean;
|
||||
xs: number;
|
||||
sm: number;
|
||||
md: number;
|
||||
lg: number;
|
||||
xl: number;
|
||||
options?: FormDataOptions[];
|
||||
}
|
||||
interface DynamicFormState {
|
||||
formData: FormDataState[];
|
||||
form: any;
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'pagesDynamicForm',
|
||||
setup() {
|
||||
const { proxy } = <any>getCurrentInstance();
|
||||
const state = reactive<DynamicFormState>({
|
||||
formData,
|
||||
form: {
|
||||
name: '',
|
||||
email: '',
|
||||
autograph: '',
|
||||
occupation: '',
|
||||
list: [
|
||||
{
|
||||
year: '',
|
||||
month: '',
|
||||
day: '',
|
||||
},
|
||||
],
|
||||
remarks: '',
|
||||
},
|
||||
});
|
||||
// 新增行
|
||||
const onAddRow = () => {
|
||||
state.form.list.push({
|
||||
year: '',
|
||||
month: '',
|
||||
day: '',
|
||||
});
|
||||
};
|
||||
// 删除行
|
||||
const onDelRow = (k: number) => {
|
||||
state.form.list.splice(k, 1);
|
||||
};
|
||||
// 表单验证
|
||||
const onSubmitForm = () => {
|
||||
proxy.$refs.formRulesOneRef.validate((valid: boolean) => {
|
||||
if (valid) {
|
||||
proxy.$message.success('验证成功');
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
};
|
||||
// 重置表单
|
||||
const onResetForm = () => {
|
||||
proxy.$refs.formRulesOneRef.resetFields();
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {});
|
||||
return {
|
||||
onAddRow,
|
||||
onDelRow,
|
||||
onSubmitForm,
|
||||
onResetForm,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
119
src/views/pages/dynamicForm/mock.ts
Normal file
119
src/views/pages/dynamicForm/mock.ts
Normal file
@@ -0,0 +1,119 @@
|
||||
// 表单数据选项(自行扩展)
|
||||
export const formData = [
|
||||
{
|
||||
label: '姓名',
|
||||
prop: 'name',
|
||||
placeholder: '请输入姓名',
|
||||
clearable: true,
|
||||
disabled: false,
|
||||
required: true,
|
||||
type: 'input',
|
||||
i18n: false,
|
||||
i18nText: '',
|
||||
isShow: true,
|
||||
xs: 24,
|
||||
sm: 12,
|
||||
md: 8,
|
||||
lg: 6,
|
||||
xl: 4,
|
||||
},
|
||||
{
|
||||
label: '邮箱',
|
||||
prop: 'email',
|
||||
placeholder: '请输入用户邮箱',
|
||||
clearable: true,
|
||||
disabled: false,
|
||||
required: true,
|
||||
type: 'input',
|
||||
i18n: false,
|
||||
i18nText: '',
|
||||
isShow: true,
|
||||
xs: 24,
|
||||
sm: 12,
|
||||
md: 8,
|
||||
lg: 6,
|
||||
xl: 4,
|
||||
},
|
||||
{
|
||||
label: '登陆时间',
|
||||
prop: 'autograph',
|
||||
placeholder: '选择时间',
|
||||
clearable: true,
|
||||
disabled: false,
|
||||
required: true,
|
||||
type: 'date',
|
||||
i18n: false,
|
||||
i18nText: '',
|
||||
isShow: true,
|
||||
xs: 24,
|
||||
sm: 12,
|
||||
md: 8,
|
||||
lg: 6,
|
||||
xl: 4,
|
||||
},
|
||||
{
|
||||
label: '职务',
|
||||
prop: 'occupation',
|
||||
placeholder: '请选择职务',
|
||||
clearable: true,
|
||||
disabled: false,
|
||||
required: true,
|
||||
type: 'select',
|
||||
i18n: false,
|
||||
i18nText: '',
|
||||
options: [
|
||||
{
|
||||
label: '计算机 / 互联网 / 通信',
|
||||
value: '1',
|
||||
},
|
||||
{
|
||||
label: '生产 / 工艺 / 制造',
|
||||
value: '2',
|
||||
},
|
||||
{
|
||||
label: '医疗 / 护理 / 制药',
|
||||
value: '3',
|
||||
},
|
||||
],
|
||||
isShow: true,
|
||||
xs: 24,
|
||||
sm: 12,
|
||||
md: 8,
|
||||
lg: 6,
|
||||
xl: 4,
|
||||
},
|
||||
{
|
||||
label: '',
|
||||
prop: '',
|
||||
placeholder: '',
|
||||
clearable: true,
|
||||
disabled: false,
|
||||
required: true,
|
||||
type: '',
|
||||
i18n: false,
|
||||
i18nText: '',
|
||||
isShow: true,
|
||||
xs: 24,
|
||||
sm: 24,
|
||||
md: 24,
|
||||
lg: 24,
|
||||
xl: 24,
|
||||
},
|
||||
{
|
||||
label: '备注',
|
||||
prop: 'remarks',
|
||||
placeholder: '请输入',
|
||||
clearable: true,
|
||||
disabled: false,
|
||||
required: true,
|
||||
type: 'textarea',
|
||||
i18n: false,
|
||||
i18nText: '',
|
||||
isShow: true,
|
||||
xs: 24,
|
||||
sm: 24,
|
||||
md: 24,
|
||||
lg: 24,
|
||||
xl: 24,
|
||||
},
|
||||
];
|
||||
89
src/views/pages/element/index.vue
Normal file
89
src/views/pages/element/index.vue
Normal file
@@ -0,0 +1,89 @@
|
||||
<template>
|
||||
<div class="element-container">
|
||||
<el-card shadow="hover" :header="`element plus 字体图标(自动载入，增加了 ele- 前缀，使用时：ele-Aim)：${sheetsIconList.length}个`">
|
||||
<el-row class="iconfont-row">
|
||||
<el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="2" v-for="(v, k) in sheetsIconList" :key="k">
|
||||
<div class="iconfont-warp">
|
||||
<div class="flex-margin">
|
||||
<div class="iconfont-warp-value">
|
||||
<SvgIcon :name="v" :size="30" />
|
||||
</div>
|
||||
<div class="iconfont-warp-label mt10">{{ v }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, onMounted, defineComponent } from 'vue';
|
||||
import initIconfont from '/@/utils/getStyleSheets';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'pagesElement',
|
||||
setup() {
|
||||
const state = reactive({
|
||||
sheetsIconList: [],
|
||||
});
|
||||
// 初始化获取 css 样式，获取 element plus 自带 svg 图标，增加了 ele- 前缀，使用时：ele-Aim
|
||||
const initGetStyleSheets = () => {
|
||||
initIconfont.ele().then((res: any) => {
|
||||
state.sheetsIconList = res;
|
||||
});
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
initGetStyleSheets();
|
||||
});
|
||||
return {
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.element-container {
|
||||
.iconfont-row {
|
||||
border-top: 1px solid var(--next-border-color-light);
|
||||
border-left: 1px solid var(--next-border-color-light);
|
||||
.iconfont-warp {
|
||||
text-align: center;
|
||||
border-right: 1px solid var(--next-border-color-light);
|
||||
border-bottom: 1px solid var(--next-border-color-light);
|
||||
height: 120px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
transition: all 0.3s ease;
|
||||
&:hover {
|
||||
box-shadow: 0 2px 12px var(--next-color-dark-hover);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
.iconfont-warp-value {
|
||||
i {
|
||||
color: var(--el-color-primary);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
.iconfont-warp-label {
|
||||
color: var(--el-color-primary);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
.iconfont-warp-value {
|
||||
i {
|
||||
color: #606266;
|
||||
font-size: 32px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
.iconfont-warp-label {
|
||||
color: #99a9bf;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
39
src/views/pages/filtering/details.vue
Normal file
39
src/views/pages/filtering/details.vue
Normal file
@@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<div :style="{ height: `calc(100vh - ${initTagViewHeight}` }">
|
||||
<div class="layout-view-bg-white">
|
||||
<div class="w100 h100 flex">
|
||||
<div class="flex-margin color-primary">filtering-details 测试界面</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useThemeConfig } from '/@/stores/themeConfig';
|
||||
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'pagesFilteringDetails',
|
||||
setup() {
|
||||
const storesTagsViewRoutes = useTagsViewRoutes();
|
||||
const storesThemeConfig = useThemeConfig();
|
||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||
const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
|
||||
// 设置主内容的高度
|
||||
const initTagViewHeight = computed(() => {
|
||||
let { isTagsview } = themeConfig.value;
|
||||
if (isTagsViewCurrenFull.value) {
|
||||
return `30px`;
|
||||
} else {
|
||||
if (isTagsview) return `114px`;
|
||||
else return `80px`;
|
||||
}
|
||||
});
|
||||
return {
|
||||
initTagViewHeight,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
39
src/views/pages/filtering/details1.vue
Normal file
39
src/views/pages/filtering/details1.vue
Normal file
@@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<div :style="{ height: `calc(100vh - ${initTagViewHeight}` }">
|
||||
<div class="layout-view-bg-white">
|
||||
<div class="w100 h100 flex">
|
||||
<div class="flex-margin color-primary">测试界面</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useThemeConfig } from '/@/stores/themeConfig';
|
||||
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'pagesFilteringDetails1',
|
||||
setup() {
|
||||
const storesTagsViewRoutes = useTagsViewRoutes();
|
||||
const storesThemeConfig = useThemeConfig();
|
||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||
const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
|
||||
// 设置主内容的高度
|
||||
const initTagViewHeight = computed(() => {
|
||||
let { isTagsview } = themeConfig.value;
|
||||
if (isTagsViewCurrenFull.value) {
|
||||
return `30px`;
|
||||
} else {
|
||||
if (isTagsview) return `114px`;
|
||||
else return `80px`;
|
||||
}
|
||||
});
|
||||
return {
|
||||
initTagViewHeight,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
355
src/views/pages/filtering/index.vue
Normal file
355
src/views/pages/filtering/index.vue
Normal file
@@ -0,0 +1,355 @@
|
||||
<template>
|
||||
<div class="filtering">
|
||||
<el-card
|
||||
shadow="hover"
|
||||
class="filtering-list br-top-no"
|
||||
v-loading="tableData.loading"
|
||||
element-loading-text="加载中..."
|
||||
element-loading-background="rgba(255, 255, 255, 0.1)"
|
||||
:class="{ 'min-h-360': tableData.data.length <= 0 }"
|
||||
>
|
||||
<div
|
||||
v-for="(val, key) in filtering"
|
||||
:key="key"
|
||||
:ref="
|
||||
(el) => {
|
||||
if (el) dlRefs[key] = el;
|
||||
}
|
||||
"
|
||||
class="filtering-list-flex"
|
||||
>
|
||||
<div class="filtering-list-title">{{ val.title }}</div>
|
||||
<div class="filtering-list-item" :style="{ height: val.isMore ? 'auto' : '50px' }">
|
||||
<span class="span" :class="v.active ? 'dd-active' : ''" v-for="(v, k) in val.children" :key="k" @click="onSelItem(val, v)">{{
|
||||
v.label
|
||||
}}</span>
|
||||
<div class="dd-more" v-if="val.isShowMore" @click="val.isMore = !val.isMore">
|
||||
<span>{{ val.isMore ? '收起' : '展开' }}</span>
|
||||
<i :class="val.isMore ? 'el-icon-arrow-down' : 'el-icon-arrow-right'"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-warp mt15 mb15" v-if="tableData.data.length > 0">
|
||||
<el-row :gutter="15">
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb15" v-for="(v, k) in tableData.data" :key="k" @click="onTableItemClick(v)">
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<div class="item-img">
|
||||
<img :src="v.img" />
|
||||
</div>
|
||||
<div class="item-txt">
|
||||
<div class="item-txt-title">{{ v.title }}</div>
|
||||
<div class="item-txt-other">
|
||||
<div style="width: 100%">
|
||||
<div class="item-txt-msg mb10">
|
||||
<span>评价 {{ v.evaluate }}</span>
|
||||
<span class="ml10">收藏 {{ v.collection }}</span>
|
||||
</div>
|
||||
<div class="item-txt-msg item-txt-price">
|
||||
<span class="font-price">
|
||||
<span>￥</span>
|
||||
<span class="font">{{ v.price }}</span>
|
||||
</span>
|
||||
<span>月销{{ v.monSales }}笔</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div v-else class="filtering-no-data">
|
||||
<div class="no-data-box">
|
||||
<i class="el-icon-search"></i>
|
||||
<div class="no-txt">暂无数据</div>
|
||||
</div>
|
||||
</div>
|
||||
<template v-if="tableData.data.length > 0">
|
||||
<el-pagination
|
||||
style="text-align: right"
|
||||
background
|
||||
@size-change="onHandleSizeChange"
|
||||
@current-change="onHandleCurrentChange"
|
||||
:page-sizes="[10, 20, 30]"
|
||||
:current-page="tableData.param.pageNum"
|
||||
:page-size="tableData.param.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="tableData.total"
|
||||
>
|
||||
</el-pagination>
|
||||
</template>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { ref, toRefs, reactive, onMounted, nextTick, defineComponent } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { filtering, filterList } from './mock';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'pagesFiltering',
|
||||
setup() {
|
||||
const dlRefs: any = ref([]);
|
||||
const router = useRouter();
|
||||
const state = reactive({
|
||||
filtering,
|
||||
tableData: {
|
||||
data: filterList,
|
||||
total: 99,
|
||||
loading: false,
|
||||
param: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
},
|
||||
});
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
initBtnToggle();
|
||||
window.onresize = () => {
|
||||
initBtnToggle();
|
||||
};
|
||||
});
|
||||
// 初始化 `收起、展开` 按钮
|
||||
const initBtnToggle = () => {
|
||||
nextTick(() => {
|
||||
const els = dlRefs.value;
|
||||
els.map((v: any, k: number) => {
|
||||
v.scrollHeight < v.lastChild.scrollHeight ? (state.filtering[k].isShowMore = true) : (state.filtering[k].isShowMore = false);
|
||||
});
|
||||
});
|
||||
};
|
||||
// 过滤当前选中的数据
|
||||
const onSelItem = (val: any, v: any) => {
|
||||
val.children.map((v: any) => (v.active = false));
|
||||
v.active = true;
|
||||
let arr = [];
|
||||
state.filtering.map((item: any) => {
|
||||
item.children.map((chil: any) => {
|
||||
if (chil.active) {
|
||||
arr.push({
|
||||
...item,
|
||||
children: [{ ...chil }],
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
state.tableData.loading = true;
|
||||
setTimeout(() => {
|
||||
state.tableData.loading = false;
|
||||
}, 500);
|
||||
};
|
||||
// 当前列表项点击
|
||||
const onTableItemClick = (v: any) => {
|
||||
if (v.id === 1) {
|
||||
router.push({
|
||||
path: '/pages/filtering/details',
|
||||
query: { id: v.id },
|
||||
});
|
||||
} else {
|
||||
router.push({
|
||||
path: '/pages/filtering/details1',
|
||||
query: { id: v.id },
|
||||
});
|
||||
}
|
||||
};
|
||||
// 分页点击
|
||||
const onHandleSizeChange = (val: number) => {
|
||||
state.tableData.param.pageSize = val;
|
||||
};
|
||||
// 分页点击
|
||||
const onHandleCurrentChange = (val: number) => {
|
||||
state.tableData.param.pageNum = val;
|
||||
};
|
||||
return {
|
||||
dlRefs,
|
||||
onSelItem,
|
||||
onTableItemClick,
|
||||
onHandleSizeChange,
|
||||
onHandleCurrentChange,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.filtering {
|
||||
.filtering-list {
|
||||
overflow: hidden;
|
||||
border-bottom: none !important;
|
||||
.filtering-list-flex {
|
||||
&:last-of-type {
|
||||
.filtering-list-item {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
}
|
||||
.filtering-list-title {
|
||||
float: left;
|
||||
width: 64px;
|
||||
font-weight: 700;
|
||||
position: relative;
|
||||
color: #909399;
|
||||
margin: 15px 0;
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border: 1px solid #909399;
|
||||
border-width: 0 1px 1px 0;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
transform: rotate(-45deg) translateY(-50%);
|
||||
right: 10px;
|
||||
top: 50%;
|
||||
}
|
||||
}
|
||||
.filtering-list-item {
|
||||
border-bottom: 1px dotted var(--next-border-color-light);
|
||||
margin-left: 64px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
.span {
|
||||
color: #8d8d91;
|
||||
font-size: 14px;
|
||||
float: left;
|
||||
padding: 0 15px;
|
||||
margin: 15px 0;
|
||||
&:hover {
|
||||
color: var(--el-color-primary);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.dd-active {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
.dd-more {
|
||||
font-size: 12px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 16px;
|
||||
color: #a5a5a5;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: #8d8d91;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.br-top-no {
|
||||
border-top: none;
|
||||
.flex-warp {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
margin: 0 -5px;
|
||||
.flex-warp-item {
|
||||
padding: 5px;
|
||||
width: 100%;
|
||||
height: 360px;
|
||||
.flex-warp-item-box {
|
||||
border: 1px solid var(--next-border-color-light);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: all 0.3s ease;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
border: 1px solid var(--el-color-primary);
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.03);
|
||||
.item-txt-title {
|
||||
color: var(--el-color-primary) !important;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.item-img {
|
||||
img {
|
||||
transition: all 0.3s ease;
|
||||
transform: translateZ(0) scale(1.05);
|
||||
}
|
||||
}
|
||||
}
|
||||
.item-img {
|
||||
width: 100%;
|
||||
height: 215px;
|
||||
overflow: hidden;
|
||||
img {
|
||||
transition: all 0.3s ease;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.item-txt {
|
||||
flex: 1;
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
.item-txt-title {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
display: -webkit-box;
|
||||
color: #666666;
|
||||
transition: all 0.3s ease;
|
||||
&:hover {
|
||||
color: var(--el-color-primary);
|
||||
text-decoration: underline;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
.item-txt-other {
|
||||
flex: 1;
|
||||
align-items: flex-end;
|
||||
display: flex;
|
||||
.item-txt-msg {
|
||||
font-size: 12px;
|
||||
color: #8d8d91;
|
||||
}
|
||||
.item-txt-price {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.font-price {
|
||||
color: #ff5000;
|
||||
.font {
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.el-card__body) {
|
||||
height: 100%;
|
||||
.filtering-no-data {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
.no-data-box {
|
||||
color: #cccccc;
|
||||
margin: auto;
|
||||
i {
|
||||
font-size: 70px;
|
||||
}
|
||||
.no-txt {
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.min-h-360 {
|
||||
height: 360px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
201
src/views/pages/filtering/mock.ts
Normal file
201
src/views/pages/filtering/mock.ts
Normal file
@@ -0,0 +1,201 @@
|
||||
// 导航数据
|
||||
export const filtering = [
|
||||
{
|
||||
title: '权限',
|
||||
isMore: false,
|
||||
isShowMore: false,
|
||||
id: 0,
|
||||
children: [
|
||||
{
|
||||
id: '01',
|
||||
label: '全部',
|
||||
active: true,
|
||||
},
|
||||
{
|
||||
id: '02',
|
||||
label: '普通用户',
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
id: '03',
|
||||
label: '管理员',
|
||||
active: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '布局',
|
||||
isMore: false,
|
||||
isShowMore: false,
|
||||
id: 1,
|
||||
children: [
|
||||
{
|
||||
id: 11,
|
||||
label: '全部',
|
||||
active: true,
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
label: '默认',
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
id: 13,
|
||||
label: '经典',
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
id: 14,
|
||||
label: '横向',
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
id: 15,
|
||||
label: '分栏',
|
||||
active: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '配置',
|
||||
isMore: false,
|
||||
isShowMore: false,
|
||||
id: 2,
|
||||
children: [
|
||||
{
|
||||
id: 21,
|
||||
label: '全部',
|
||||
active: true,
|
||||
},
|
||||
{
|
||||
id: 22,
|
||||
label: '开启 Breadcrumb',
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
id: 23,
|
||||
label: '开启 Tags-View',
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
id: 24,
|
||||
label: '固定 Header',
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
id: 25,
|
||||
label: '侧边栏 Logo',
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
id: 26,
|
||||
label: '开启折叠 NavMenu',
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
id: 27,
|
||||
label: '开启一个 NavMenu 展开',
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
id: 28,
|
||||
label: '登录用户头像',
|
||||
active: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
// 列表数据
|
||||
export const filterList = [
|
||||
{
|
||||
img: 'http://news.sznews.com/pic/2020-08/14/9d9c9a60-f0af-41aa-b617-683b07c87642.jpg',
|
||||
title: '嘉陵江2020年第1号洪水”在嘉陵江支流涪江形成',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 1,
|
||||
},
|
||||
{
|
||||
img: 'http://www.sznews.com/news/pic/2020-08/13/0ea47d3c-feb9-4bd7-8597-a8a373aa6340c6ec12c7-3b33-4528-91a6-85ec8ca1df67_watermark.png',
|
||||
title: '让《民法典》走近群众 盐田街道开展人民调解宣传活动',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 2,
|
||||
},
|
||||
{
|
||||
img: 'http://www.sznews.com/photo/pic/2020-08/12/a08d6eb0-1d53-4f76-a313-ad3e5d701f98.jpg',
|
||||
title: '记者手记：可可西里，“挪”向“藏羚羊大产房”的14个半小时',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 3,
|
||||
},
|
||||
{
|
||||
img: 'http://www.sznews.com/photo/pic/2020-08/11/43cc0e14-9bca-45b9-9a8b-342e09d6a4c7.jpg',
|
||||
title: '以优异成绩庆祝深圳经济特区建立40周年',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 4,
|
||||
},
|
||||
{
|
||||
img: 'http://www.sznews.com/photo/pic/2020-08/11/a4dc322b-68ec-40e6-8906-3124142c3e49.jpg',
|
||||
title: '草原上的“太阳姑娘”',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 5,
|
||||
},
|
||||
{
|
||||
img: 'http://www.sznews.com/zhuanti/pic/2020-08/07/57f087b4-4812-46cc-adb9-ead73621284e.png',
|
||||
title: '奇观天下|带你走进非洲野生动物观光第一目的地',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 6,
|
||||
},
|
||||
{
|
||||
img: 'http://news.sznews.com/pic/2020-09/02/t2_(101X54X600X335)7cd39301-d9cf-45f1-91c3-9575b1e5ce0e.jpg.2',
|
||||
title: '五角大楼发布“中国军力报告” 华春莹： 罔顾事实，充满偏见',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 7,
|
||||
},
|
||||
{
|
||||
img: 'http://news.sznews.com/pic/2020-09/02/b8b41d9c-0508-4498-8d37-6e597493769f.jpg',
|
||||
title: '最新地铁消息汇总：4号线北延、2号线三期、8号线一期等今年通车',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 8,
|
||||
},
|
||||
{
|
||||
img: 'http://www.sznews.com/photo/pic/2020-08/10/1635374c-f4d6-475c-ac47-1334176f365d.png',
|
||||
title: '9月1日深圳新增5例无症状感染者！钟南山这段话冲上热搜！',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 9,
|
||||
},
|
||||
{
|
||||
img: 'http://www.sznews.com/news/pic/2020-08/13/646e5458-92b7-4636-9940-9b0799babfe1.png',
|
||||
title: '全能“小福宝” 为文明社区建设添砖加瓦',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 10,
|
||||
},
|
||||
];
|
||||
114
src/views/pages/formAdapt/index.vue
Normal file
114
src/views/pages/formAdapt/index.vue
Normal file
@@ -0,0 +1,114 @@
|
||||
<template>
|
||||
<div class="form-adapt-container">
|
||||
<el-card shadow="hover" header="表单自适应演示(改变窗口查看效果)">
|
||||
<el-form :model="form" size="default" label-width="100px" class="mt35 mb35">
|
||||
<el-row :gutter="35">
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="姓名">
|
||||
<el-input v-model="form.name" placeholder="请输入姓名" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="用户归属部门">
|
||||
<el-input v-model="form.email" placeholder="请输入用户归属部门" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="登陆账户名">
|
||||
<el-input v-model="form.autograph" placeholder="请输入登陆账户名" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="职务">
|
||||
<el-select v-model="form.occupation" placeholder="请选择职务" clearable class="w100">
|
||||
<el-option label="计算机 / 互联网 / 通信" value="1"></el-option>
|
||||
<el-option label="生产 / 工艺 / 制造" value="2"></el-option>
|
||||
<el-option label="医疗 / 护理 / 制药" value="3"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="手机">
|
||||
<el-input v-model="form.phone" placeholder="请输入手机" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="性别">
|
||||
<el-select v-model="form.sex" placeholder="请选择性别" clearable class="w100">
|
||||
<el-option label="男" value="1"></el-option>
|
||||
<el-option label="女" value="2"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="登录密码">
|
||||
<el-input v-model="form.phone1" placeholder="请输入登录密码" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="权限角色">
|
||||
<el-input v-model="form.phone2" placeholder="请输入权限角色" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="创建用户">
|
||||
<el-input v-model="form.phone3" placeholder="请输入创建用户" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="修改用户">
|
||||
<el-input v-model="form.phone4" placeholder="请输入修改用户" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="所属用户">
|
||||
<el-input v-model="form.phone5" placeholder="请输入所属用户" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="所属部门">
|
||||
<el-input v-model="form.phone6" placeholder="请输入所属部门" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
||||
<el-form-item>
|
||||
<el-button type="primary">
|
||||
<SvgIcon name="iconfont icon-biaodan" />
|
||||
更新个人信息
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'pagesFormAdapt',
|
||||
setup() {
|
||||
const state = reactive({
|
||||
form: {
|
||||
name: '',
|
||||
email: '',
|
||||
autograph: '',
|
||||
occupation: '',
|
||||
phone: '',
|
||||
sex: '',
|
||||
phone1: '',
|
||||
phone2: '',
|
||||
phone3: '',
|
||||
phone4: '',
|
||||
phone5: '',
|
||||
phone6: '',
|
||||
},
|
||||
});
|
||||
return {
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
59
src/views/pages/formI18n/index.vue
Normal file
59
src/views/pages/formI18n/index.vue
Normal file
@@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<div class="form-i18n-container">
|
||||
<el-card shadow="hover" header="表单国际化演示(不适用于动态项 form-item)">
|
||||
<div style="text-align: center; margin-top: 15px">
|
||||
<el-radio-group v-model="radio" size="default" @change="onRadioChange">
|
||||
<el-radio-button label="zh-cn">中文简体</el-radio-button>
|
||||
<el-radio-button label="en">英文</el-radio-button>
|
||||
<el-radio-button label="zh-tw">中文繁体</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<el-form :model="form" size="default" label-width="100px" class="mt35 mb35">
|
||||
<el-row :gutter="35">
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" class="mb20">
|
||||
<el-form-item :label="$t('message.formI18nLabel.name')">
|
||||
<el-input v-model="form.name" :placeholder="$t('message.formI18nPlaceholder.name')" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" class="mb20">
|
||||
<el-form-item :label="$t('message.formI18nLabel.email')">
|
||||
<el-input v-model="form.email" :placeholder="$t('message.formI18nPlaceholder.email')" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" class="mb20">
|
||||
<el-form-item :label="$t('message.formI18nLabel.autograph')">
|
||||
<el-input v-model="form.autograph" :placeholder="$t('message.formI18nPlaceholder.autograph')" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, defineComponent, getCurrentInstance } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'pagesFormI18n',
|
||||
setup() {
|
||||
const { proxy } = <any>getCurrentInstance();
|
||||
const state = reactive({
|
||||
radio: 'zh-cn',
|
||||
form: {
|
||||
name: '',
|
||||
email: '',
|
||||
autograph: '',
|
||||
},
|
||||
});
|
||||
// 单选框改变时
|
||||
const onRadioChange = () => {
|
||||
proxy.$i18n.locale = state.radio;
|
||||
};
|
||||
return {
|
||||
onRadioChange,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
68
src/views/pages/formRules/component/formRulesOne.vue
Normal file
68
src/views/pages/formRules/component/formRulesOne.vue
Normal file
@@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<div class="form-rules-one-container">
|
||||
<el-form :model="form" :rules="rules" ref="formRulesOneRef" size="default" label-width="100px" class="mt35">
|
||||
<el-row :gutter="35">
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="姓名" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入姓名" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="邮箱" prop="email">
|
||||
<el-input v-model="form.email" placeholder="请输入用户邮箱" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="登陆账户名" prop="autograph">
|
||||
<el-input v-model="form.autograph" placeholder="请输入登陆账户名" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="职务" prop="occupation">
|
||||
<el-select v-model="form.occupation" placeholder="请选择职务" clearable class="w100">
|
||||
<el-option label="计算机 / 互联网 / 通信" value="1"></el-option>
|
||||
<el-option label="生产 / 工艺 / 制造" value="2"></el-option>
|
||||
<el-option label="医疗 / 护理 / 制药" value="3"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, onMounted, defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'pagesFormRulesOne',
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const state = reactive({
|
||||
form: { name: '', email: '', autograph: '', occupation: '' },
|
||||
rules: {
|
||||
name: { required: true, message: '请输入姓名', trigger: 'blur' },
|
||||
email: { required: true, message: '请输入用户邮箱', trigger: 'blur' },
|
||||
autograph: { required: true, message: '请输入登陆账户名', trigger: 'blur' },
|
||||
occupation: { required: true, message: '请选择职务', trigger: 'change' },
|
||||
},
|
||||
});
|
||||
// 赋值回显
|
||||
const initForm = () => {
|
||||
state.form = <any>props.data;
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
initForm();
|
||||
});
|
||||
return {
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
50
src/views/pages/formRules/component/formRulesThree.vue
Normal file
50
src/views/pages/formRules/component/formRulesThree.vue
Normal file
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<div class="form-rules-three-container">
|
||||
<el-form :model="form" :rules="rules" ref="formRulesThreeRef" size="default" label-width="100px" class="mt35">
|
||||
<el-row :gutter="35">
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="创建用户" prop="createUser">
|
||||
<el-input v-model="form.createUser" placeholder="请输入创建用户" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="修改用户" prop="editUser">
|
||||
<el-input v-model="form.editUser" placeholder="请输入修改用户" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="所属用户" prop="user">
|
||||
<el-input v-model="form.user" placeholder="请输入所属用户" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="所属部门" prop="department">
|
||||
<el-input v-model="form.department" placeholder="请输入所属部门" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'pagesFormRulesThree',
|
||||
setup() {
|
||||
const state = reactive({
|
||||
form: { createUser: '', editUser: '', user: '', department: '' },
|
||||
rules: {
|
||||
createUser: { required: true, message: '请输入创建用户', trigger: 'blur' },
|
||||
editUser: { required: true, message: '请输入修改用户', trigger: 'blur' },
|
||||
user: { required: true, message: '请输入所属用户', trigger: 'blur' },
|
||||
department: { required: true, message: '请输入所属部门', trigger: 'blur' },
|
||||
},
|
||||
});
|
||||
return {
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
52
src/views/pages/formRules/component/formRulesTwo.vue
Normal file
52
src/views/pages/formRules/component/formRulesTwo.vue
Normal file
@@ -0,0 +1,52 @@
|
||||
<template>
|
||||
<div class="form-rules-two-container">
|
||||
<el-form :model="form" :rules="rules" ref="formRulesTwoRef" size="default" label-width="100px" class="mt35">
|
||||
<el-row :gutter="35">
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="手机" prop="phone">
|
||||
<el-input v-model="form.phone" placeholder="请输入手机" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="性别">
|
||||
<el-select v-model="form.sex" placeholder="请选择性别" clearable class="w100">
|
||||
<el-option label="男" value="1"></el-option>
|
||||
<el-option label="女" value="2"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="登录密码" prop="password">
|
||||
<el-input v-model="form.password" placeholder="请输入登录密码" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="权限角色" prop="auth">
|
||||
<el-input v-model="form.auth" placeholder="请输入权限角色" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'pagesFormRulesTwo',
|
||||
setup() {
|
||||
const state = reactive({
|
||||
form: { phone: '', sex: '', password: '', auth: '' },
|
||||
rules: {
|
||||
phone: { required: true, message: '请输入手机', trigger: 'blur' },
|
||||
password: { required: true, message: '请输入登录密码', trigger: 'blur' },
|
||||
auth: { required: true, message: '请输入权限角色', trigger: 'blur' },
|
||||
},
|
||||
});
|
||||
return {
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
80
src/views/pages/formRules/index.vue
Normal file
80
src/views/pages/formRules/index.vue
Normal file
@@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<div class="form-rules-container">
|
||||
<el-card shadow="hover" header="表单组件1"> <FormRulesOne :data="formRulesOneData" ref="pagesFormRulesOneRef" /></el-card>
|
||||
<el-card shadow="hover" header="表单组件2" class="mt15"><FormRulesTwo ref="pagesFormRulesTwoRef" /> </el-card>
|
||||
<el-card shadow="hover" header="表单组件3" class="mt15"> <FormRulesThree ref="pagesFormRulesThreeRef" /></el-card>
|
||||
<el-row class="flex mt15">
|
||||
<div class="flex-margin">
|
||||
<el-button size="default" @click="onResetForm">
|
||||
<SvgIcon name="ele-RefreshRight" />
|
||||
重置表单
|
||||
</el-button>
|
||||
<el-button size="default" type="primary" @click="onSubmitForm">
|
||||
<SvgIcon name="iconfont icon-shuxing" />
|
||||
验证表单
|
||||
</el-button>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, defineComponent, getCurrentInstance } from 'vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import FormRulesOne from '/@/views/pages/formRules/component/formRulesOne.vue';
|
||||
import FormRulesTwo from '/@/views/pages/formRules/component/formRulesTwo.vue';
|
||||
import FormRulesThree from '/@/views/pages/formRules/component/formRulesThree.vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'pagesFormRules',
|
||||
components: {
|
||||
FormRulesOne,
|
||||
FormRulesTwo,
|
||||
FormRulesThree,
|
||||
},
|
||||
setup() {
|
||||
const { proxy } = <any>getCurrentInstance();
|
||||
const state = reactive({
|
||||
formRulesOneData: {
|
||||
name: 'lyt',
|
||||
email: 'lyt123@.com',
|
||||
autograph: 'lyt123456',
|
||||
occupation: '1',
|
||||
},
|
||||
});
|
||||
// 表单组件验证
|
||||
const formRulesValidate = (pageRef: string, sonRef: string) => {
|
||||
return new Promise((resolve) => {
|
||||
proxy.$refs[pageRef].$refs[sonRef].validate((valid: boolean) => {
|
||||
if (valid) resolve(valid);
|
||||
});
|
||||
});
|
||||
};
|
||||
// 表单组件重置
|
||||
const formRulesResetFields = () => {
|
||||
proxy.$refs.pagesFormRulesOneRef.$refs.formRulesOneRef.resetFields();
|
||||
proxy.$refs.pagesFormRulesTwoRef.$refs.formRulesTwoRef.resetFields();
|
||||
proxy.$refs.pagesFormRulesThreeRef.$refs.formRulesThreeRef.resetFields();
|
||||
};
|
||||
// 验证表单
|
||||
const onSubmitForm = () => {
|
||||
Promise.all([
|
||||
formRulesValidate('pagesFormRulesOneRef', 'formRulesOneRef'),
|
||||
formRulesValidate('pagesFormRulesTwoRef', 'formRulesTwoRef'),
|
||||
formRulesValidate('pagesFormRulesThreeRef', 'formRulesThreeRef'),
|
||||
]).then(() => {
|
||||
ElMessage.success('表单全部验证成功');
|
||||
});
|
||||
};
|
||||
// 重置表单
|
||||
const onResetForm = () => {
|
||||
formRulesResetFields();
|
||||
};
|
||||
return {
|
||||
onSubmitForm,
|
||||
onResetForm,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
87
src/views/pages/iocnfont/index.vue
Normal file
87
src/views/pages/iocnfont/index.vue
Normal file
@@ -0,0 +1,87 @@
|
||||
<template>
|
||||
<div class="iconfont-container">
|
||||
<el-card shadow="hover" :header="`iconfont 字体图标(自动载入)：${sheetsIconList.length}个`">
|
||||
<el-row class="iconfont-row">
|
||||
<el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="2" v-for="(v, k) in sheetsIconList" :key="k">
|
||||
<div class="iconfont-warp">
|
||||
<div class="flex-margin">
|
||||
<div class="iconfont-warp-value">
|
||||
<i :class="v" class="iconfont"></i>
|
||||
</div>
|
||||
<div class="iconfont-warp-label mt10">{{ v }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, onMounted, defineComponent } from 'vue';
|
||||
import initIconfont from '/@/utils/getStyleSheets';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'pagesIocnfont',
|
||||
setup() {
|
||||
const state = reactive({
|
||||
sheetsIconList: [],
|
||||
});
|
||||
// 初始化获取 css 样式，这里使用阿里的图标(记得加上前缀 `iconfont`)，其它第三方请自行做判断
|
||||
const initGetStyleSheets = () => {
|
||||
initIconfont.ali().then((res: any) => (state.sheetsIconList = res));
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
initGetStyleSheets();
|
||||
});
|
||||
return {
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.iconfont-container {
|
||||
.iconfont-row {
|
||||
border-top: 1px solid var(--next-border-color-light);
|
||||
border-left: 1px solid var(--next-border-color-light);
|
||||
.iconfont-warp {
|
||||
text-align: center;
|
||||
border-right: 1px solid var(--next-border-color-light);
|
||||
border-bottom: 1px solid var(--next-border-color-light);
|
||||
height: 120px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
transition: all 0.3s ease;
|
||||
&:hover {
|
||||
box-shadow: 0 2px 12px var(--next-color-dark-hover);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
.iconfont-warp-value {
|
||||
i {
|
||||
color: var(--el-color-primary);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
.iconfont-warp-label {
|
||||
color: var(--el-color-primary);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
.iconfont-warp-value {
|
||||
i {
|
||||
color: #606266;
|
||||
font-size: 32px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
.iconfont-warp-label {
|
||||
color: #99a9bf;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
194
src/views/pages/lazyImg/index.vue
Normal file
194
src/views/pages/lazyImg/index.vue
Normal file
@@ -0,0 +1,194 @@
|
||||
<template>
|
||||
<div class="lazy-img-container">
|
||||
<el-card shadow="hover" header="图片懒加载演示（F12 切换到 Network Img下进行图片加载查看）">
|
||||
<div class="flex-warp" v-if="tableData.data.length > 0">
|
||||
<el-row :gutter="15">
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb15" v-for="(v, k) in tableData.data" :key="k" @click="onTableItemClick(v)">
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<div class="item-img" v-loading="v.loading">
|
||||
<img :data-img="v.img" :data-key="k" :data-lazy-img-list="k" />
|
||||
</div>
|
||||
<div class="item-txt">
|
||||
<div class="item-txt-title">{{ v.title }}</div>
|
||||
<div class="item-txt-other">
|
||||
<div style="width: 100%">
|
||||
<div class="item-txt-msg mb10">
|
||||
<span>评价 {{ v.evaluate }}</span>
|
||||
<span class="ml10">收藏 {{ v.collection }}</span>
|
||||
</div>
|
||||
<div class="item-txt-msg item-txt-price">
|
||||
<span class="font-price">
|
||||
<span>￥</span>
|
||||
<span class="font">{{ v.price }}</span>
|
||||
</span>
|
||||
<span>月销{{ v.monSales }}笔</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<el-empty v-else description="暂无数据"></el-empty>
|
||||
<template v-if="tableData.data.length > 0">
|
||||
<el-pagination
|
||||
style="text-align: right"
|
||||
background
|
||||
@size-change="onHandleSizeChange"
|
||||
@current-change="onHandleCurrentChange"
|
||||
:page-sizes="[10, 20, 30]"
|
||||
:current-page="tableData.param.pageNum"
|
||||
:page-size="tableData.param.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="tableData.total"
|
||||
>
|
||||
</el-pagination>
|
||||
</template>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, onMounted, defineComponent } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import other from '/@/utils/other';
|
||||
import { filterList } from './mock';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'pagesListAdapt',
|
||||
setup() {
|
||||
const router = useRouter();
|
||||
const state = reactive({
|
||||
tableData: {
|
||||
data: filterList,
|
||||
total: 99,
|
||||
loading: false,
|
||||
param: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
},
|
||||
});
|
||||
// 当前列表项点击
|
||||
const onTableItemClick = (v: any) => {
|
||||
router.push({
|
||||
path: '/pages/filteringDetails',
|
||||
query: { id: v.id },
|
||||
});
|
||||
};
|
||||
// 分页点击
|
||||
const onHandleSizeChange = (val: number) => {
|
||||
state.tableData.param.pageSize = val;
|
||||
};
|
||||
// 分页点击
|
||||
const onHandleCurrentChange = (val: number) => {
|
||||
state.tableData.param.pageNum = val;
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
other.lazyImg('[data-lazy-img-list]', state.tableData.data);
|
||||
});
|
||||
return {
|
||||
onTableItemClick,
|
||||
onHandleSizeChange,
|
||||
onHandleCurrentChange,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.lazy-img-container {
|
||||
.flex-warp {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
margin: 0 -5px;
|
||||
.flex-warp-item {
|
||||
padding: 5px;
|
||||
width: 100%;
|
||||
height: 360px;
|
||||
.flex-warp-item-box {
|
||||
border: 1px solid var(--next-border-color-light);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: all 0.3s ease;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
border: 1px solid var(--el-color-primary);
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.03);
|
||||
.item-txt-title {
|
||||
color: var(--el-color-primary) !important;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.item-img {
|
||||
img {
|
||||
transition: all 0.3s ease;
|
||||
transform: translateZ(0) scale(1.05);
|
||||
}
|
||||
}
|
||||
}
|
||||
.item-img {
|
||||
width: 100%;
|
||||
height: 215px;
|
||||
overflow: hidden;
|
||||
img {
|
||||
transition: all 0.3s ease;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.item-txt {
|
||||
flex: 1;
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
.item-txt-title {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
display: -webkit-box;
|
||||
color: #666666;
|
||||
transition: all 0.3s ease;
|
||||
&:hover {
|
||||
color: var(--el-color-primary);
|
||||
text-decoration: underline;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
.item-txt-other {
|
||||
flex: 1;
|
||||
align-items: flex-end;
|
||||
display: flex;
|
||||
.item-txt-msg {
|
||||
font-size: 12px;
|
||||
color: #8d8d91;
|
||||
}
|
||||
.item-txt-price {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.font-price {
|
||||
color: #ff5000;
|
||||
.font {
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
313
src/views/pages/lazyImg/mock.ts
Normal file
313
src/views/pages/lazyImg/mock.ts
Normal file
@@ -0,0 +1,313 @@
|
||||
// 列表数据
|
||||
export const filterList = [
|
||||
{
|
||||
img: 'https://news.sznews.com/pic/2021-03/09/e37326cc-4583-48f3-aa00-ecc2392d319d.jpg',
|
||||
title: '36分钟，深圳平均通勤时间出炉！GDP10强城市中仅输杭州',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 1,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'http://news.sznews.com/pic/2021-03/09/78cf72b6-e2d9-459d-a368-470414a027f4679cf4ea-26fa-48c8-9fee-c2d092a91400.png',
|
||||
title: '为爱而动，“红色鹊桥”三八妇女节交友联谊活动助力深圳女孩脱单',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 2,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'http://news.sznews.com/pic/2021-03/09/1faf3c6e-1250-4e6b-b072-4a331553e027.jpg',
|
||||
title: '粤桂协作“背水一战” 解决广西大化县3.7万人饮水难题',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 3,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'https://news.sznews.com/pic/2021-03/09/9fcf6dd4-1e80-4497-bdc9-83dc7246d170.jpg.2',
|
||||
title: '城镇就业女性平均薪酬6847元 女性职场渗透率提升',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 4,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'https://news.sznews.com/pic/2021-03/09/1bd78227-4126-4a43-bdf6-48ead6edd1bf.jpg.2',
|
||||
title: '深圳：实现“从0到1”源头创新，推进大湾区综合性国家科学中心建设！',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 5,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'http://news.sznews.com/pic/2021-03/08/9ea943a3-3ae8-4f49-8296-711ec36ef8c6_watermark.png',
|
||||
title: '煖声音第126期|愿你有诗酒趁年华的洒脱，也有岁月沉淀后的坚定从容',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 6,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'https://news.sznews.com/pic/2021-03/08/a95ba232-1422-4f7e-b85f-c61d486c8659.jpg.2',
|
||||
title: '姐妹们一起来吐槽，最不能接受男人的缺点！',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 7,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'http://news.sznews.com/pic/2021-03/08/76816bf0-3899-4c7e-bc6e-079b5ba8725e.jpg',
|
||||
title: '民生小事 | 手机遗落出租车 热心民警帮找回',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 8,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'https://news.sznews.com/pic/2021-03/08/28ed70d4-71f5-4abb-bf7b-0294bece9e43.jpg.2',
|
||||
title: '“十三五”：深圳交上靓丽答卷 发展动力加快转换',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 9,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'http://news.sznews.com/pic/2021-03/05/d13ae31f-fd45-431a-b48e-c5895bbc193e.png',
|
||||
title: '深圳湾公园一女子落水，三名男子接力及时施救',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 10,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210704/653/w930h523/20210704/d5d2-krwipas6444058.jpg',
|
||||
title: '36分钟，深圳平均通勤时间出炉！GDP10强城市中仅输杭州',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 1,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210704/766/w930h636/20210704/b1ae-krwipas6332914.jpg',
|
||||
title: '为爱而动，“红色鹊桥”三八妇女节交友联谊活动助力深圳女孩脱单',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 2,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210704/750/w930h620/20210704/2886-krwipas6264821.jpg',
|
||||
title: '粤桂协作“背水一战” 解决广西大化县3.7万人饮水难题',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 3,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210704/750/w930h620/20210704/767c-krwipas6387862.jpg',
|
||||
title: '城镇就业女性平均薪酬6847元 女性职场渗透率提升',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 4,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210704/111/w1024h687/20210704/1f65-krwipas5871436.jpg',
|
||||
title: '盛夏的那考河湿地公园！',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 5,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210704/657/w930h527/20210704/7eae-krwipas5866609.jpg',
|
||||
title: '煖声音第126期|愿你有诗酒趁年华的洒脱，也有岁月沉淀后的坚定从容',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 6,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210703/760/w930h630/20210703/124e-krwipas5596390.jpg',
|
||||
title: '姐妹们一起来吐槽，最不能接受男人的缺点！',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 7,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210703/27/w930h697/20210703/9630-krwipas5514972.jpg',
|
||||
title: '民生小事 | 手机遗落出租车 热心民警帮找回',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 8,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210703/750/w930h620/20210703/2fe3-krwipas5388050.jpg',
|
||||
title: '“十三五”：深圳交上靓丽答卷 发展动力加快转换',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 9,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210703/724/w930h594/20210703/98b6-krwipas5234060.jpg',
|
||||
title: '深圳湾公园一女子落水，三名男子接力及时施救',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 10,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210703/750/w930h620/20210703/f765-krwipas5194727.jpg',
|
||||
title: '36分钟，深圳平均通勤时间出炉！GDP10强城市中仅输杭州',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 1,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210702/750/w930h620/20210702/5dde-krwipas4724976.jpg',
|
||||
title: '为爱而动，“红色鹊桥”三八妇女节交友联谊活动助力深圳女孩脱单',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 2,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210702/750/w930h620/20210702/f45e-krwipas4566804.jpg',
|
||||
title: '粤桂协作“背水一战” 解决广西大化县3.7万人饮水难题',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 3,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210702/750/w930h620/20210702/5579-krwipas4551382.jpg',
|
||||
title: '城镇就业女性平均薪酬6847元 女性职场渗透率提升',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 4,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210702/750/w930h620/20210702/7c75-krwipas4543661.jpg',
|
||||
title: '深圳：实现“从0到1”源头创新，推进大湾区综合性国家科学中心建设！',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 5,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210702/653/w930h523/20210702/ece2-krwipas4411140.jpg',
|
||||
title: '煖声音第126期|愿你有诗酒趁年华的洒脱，也有岁月沉淀后的坚定从容',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 6,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210702/750/w930h620/20210702/f5c2-krwipas4215211.jpg',
|
||||
title: '姐妹们一起来吐槽，最不能接受男人的缺点！',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 7,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210701/720/w930h590/20210701/eabc-krwipas3509204.jpg',
|
||||
title: '民生小事 | 手机遗落出租车 热心民警帮找回',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 8,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210701/797/w930h667/20210701/4667-krwipas3365057.jpg',
|
||||
title: '“十三五”：深圳交上靓丽答卷 发展动力加快转换',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 9,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210701/750/w930h620/20210701/baea-krwipas2976622.jpg',
|
||||
title: '民众前往中共一大纪念馆参观',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 10,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210630/617/w850h567/20210630/5c96-krwipas1819108.jpg',
|
||||
title: '延吉灯光秀美轮美奂 市民徜徉璀璨夜景',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 10,
|
||||
loading: true,
|
||||
},
|
||||
];
|
||||
209
src/views/pages/listAdapt/index.vue
Normal file
209
src/views/pages/listAdapt/index.vue
Normal file
@@ -0,0 +1,209 @@
|
||||
<template>
|
||||
<div class="list-adapt-container">
|
||||
<el-card shadow="hover" header="列表自适应演示(改变窗口查看效果)">
|
||||
<div class="flex-warp" v-if="tableData.data.length > 0">
|
||||
<el-row :gutter="15">
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb15" v-for="(v, k) in tableData.data" :key="k" @click="onTableItemClick(v)">
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<div class="item-img">
|
||||
<img :src="v.img" />
|
||||
</div>
|
||||
<div class="item-txt">
|
||||
<div class="item-txt-title">{{ v.title }}</div>
|
||||
<div class="item-txt-other">
|
||||
<div style="width: 100%">
|
||||
<div class="item-txt-msg mb10">
|
||||
<span>评价 {{ v.evaluate }}</span>
|
||||
<span class="ml10">收藏 {{ v.collection }}</span>
|
||||
</div>
|
||||
<div class="item-txt-msg item-txt-price">
|
||||
<span class="font-price">
|
||||
<span>￥</span>
|
||||
<span class="font">{{ v.price }}</span>
|
||||
</span>
|
||||
<span>月销{{ v.monSales }}笔</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<el-empty v-else description="暂无数据"></el-empty>
|
||||
<template v-if="tableData.data.length > 0">
|
||||
<el-pagination
|
||||
style="text-align: right"
|
||||
background
|
||||
@size-change="onHandleSizeChange"
|
||||
@current-change="onHandleCurrentChange"
|
||||
:page-sizes="[10, 20, 30]"
|
||||
:current-page="tableData.param.pageNum"
|
||||
:page-size="tableData.param.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="tableData.total"
|
||||
>
|
||||
</el-pagination>
|
||||
</template>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, defineComponent } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { filterList } from './mock';
|
||||
|
||||
// 定义接口来定义对象的类型
|
||||
interface ListAdaptRow {
|
||||
img: string;
|
||||
title: string;
|
||||
evaluate: string;
|
||||
collection: string;
|
||||
price: string;
|
||||
monSales: string;
|
||||
id: number;
|
||||
}
|
||||
interface TableDataState {
|
||||
tableData: {
|
||||
data: Array<ListAdaptRow>;
|
||||
total: number;
|
||||
loading: boolean;
|
||||
param: {
|
||||
pageNum: number;
|
||||
pageSize: number;
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'pagesListAdapt',
|
||||
setup() {
|
||||
const router = useRouter();
|
||||
const state = reactive<TableDataState>({
|
||||
tableData: {
|
||||
data: filterList,
|
||||
total: 99,
|
||||
loading: false,
|
||||
param: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
},
|
||||
});
|
||||
// 当前列表项点击
|
||||
const onTableItemClick = (v: ListAdaptRow) => {
|
||||
router.push({
|
||||
path: '/pages/filteringDetails',
|
||||
query: { id: v.id },
|
||||
});
|
||||
};
|
||||
// 分页点击
|
||||
const onHandleSizeChange = (val: number) => {
|
||||
state.tableData.param.pageSize = val;
|
||||
};
|
||||
// 分页点击
|
||||
const onHandleCurrentChange = (val: number) => {
|
||||
state.tableData.param.pageNum = val;
|
||||
};
|
||||
return {
|
||||
onTableItemClick,
|
||||
onHandleSizeChange,
|
||||
onHandleCurrentChange,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.flex-warp {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
margin: 0 -5px;
|
||||
.flex-warp-item {
|
||||
padding: 5px;
|
||||
width: 100%;
|
||||
height: 360px;
|
||||
.flex-warp-item-box {
|
||||
border: 1px solid var(--next-border-color-light);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: all 0.3s ease;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
border: 1px solid var(--el-color-primary);
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.03);
|
||||
.item-txt-title {
|
||||
color: var(--el-color-primary) !important;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.item-img {
|
||||
img {
|
||||
transition: all 0.3s ease;
|
||||
transform: translateZ(0) scale(1.05);
|
||||
}
|
||||
}
|
||||
}
|
||||
.item-img {
|
||||
width: 100%;
|
||||
height: 215px;
|
||||
overflow: hidden;
|
||||
img {
|
||||
transition: all 0.3s ease;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.item-txt {
|
||||
flex: 1;
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
.item-txt-title {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
display: -webkit-box;
|
||||
color: #666666;
|
||||
transition: all 0.3s ease;
|
||||
&:hover {
|
||||
color: var(--el-color-primary);
|
||||
text-decoration: underline;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
.item-txt-other {
|
||||
flex: 1;
|
||||
align-items: flex-end;
|
||||
display: flex;
|
||||
.item-txt-msg {
|
||||
font-size: 12px;
|
||||
color: #8d8d91;
|
||||
}
|
||||
.item-txt-price {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.font-price {
|
||||
color: #ff5000;
|
||||
.font {
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
93
src/views/pages/listAdapt/mock.ts
Normal file
93
src/views/pages/listAdapt/mock.ts
Normal file
@@ -0,0 +1,93 @@
|
||||
// 列表数据
|
||||
export const filterList = [
|
||||
{
|
||||
img: 'https://news.sznews.com/pic/2021-03/09/e37326cc-4583-48f3-aa00-ecc2392d319d.jpg',
|
||||
title: '36分钟，深圳平均通勤时间出炉！GDP10强城市中仅输杭州',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 1,
|
||||
},
|
||||
{
|
||||
img: 'http://news.sznews.com/pic/2021-03/09/78cf72b6-e2d9-459d-a368-470414a027f4679cf4ea-26fa-48c8-9fee-c2d092a91400.png',
|
||||
title: '为爱而动，“红色鹊桥”三八妇女节交友联谊活动助力深圳女孩脱单',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 2,
|
||||
},
|
||||
{
|
||||
img: 'http://news.sznews.com/pic/2021-03/09/1faf3c6e-1250-4e6b-b072-4a331553e027.jpg',
|
||||
title: '粤桂协作“背水一战” 解决广西大化县3.7万人饮水难题',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 3,
|
||||
},
|
||||
{
|
||||
img: 'https://news.sznews.com/pic/2021-03/09/9fcf6dd4-1e80-4497-bdc9-83dc7246d170.jpg.2',
|
||||
title: '城镇就业女性平均薪酬6847元 女性职场渗透率提升',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 4,
|
||||
},
|
||||
{
|
||||
img: 'https://news.sznews.com/pic/2021-03/09/1bd78227-4126-4a43-bdf6-48ead6edd1bf.jpg.2',
|
||||
title: '深圳：实现“从0到1”源头创新，推进大湾区综合性国家科学中心建设！',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 5,
|
||||
},
|
||||
{
|
||||
img: 'http://news.sznews.com/pic/2021-03/08/9ea943a3-3ae8-4f49-8296-711ec36ef8c6_watermark.png',
|
||||
title: '煖声音第126期|愿你有诗酒趁年华的洒脱，也有岁月沉淀后的坚定从容',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 6,
|
||||
},
|
||||
{
|
||||
img: 'https://news.sznews.com/pic/2021-03/08/a95ba232-1422-4f7e-b85f-c61d486c8659.jpg.2',
|
||||
title: '姐妹们一起来吐槽，最不能接受男人的缺点！',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 7,
|
||||
},
|
||||
{
|
||||
img: 'http://news.sznews.com/pic/2021-03/08/76816bf0-3899-4c7e-bc6e-079b5ba8725e.jpg',
|
||||
title: '民生小事 | 手机遗落出租车 热心民警帮找回',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 8,
|
||||
},
|
||||
{
|
||||
img: 'https://news.sznews.com/pic/2021-03/08/28ed70d4-71f5-4abb-bf7b-0294bece9e43.jpg.2',
|
||||
title: '“十三五”：深圳交上靓丽答卷 发展动力加快转换',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 9,
|
||||
},
|
||||
{
|
||||
img: 'http://news.sznews.com/pic/2021-03/05/d13ae31f-fd45-431a-b48e-c5895bbc193e.png',
|
||||
title: '深圳湾公园一女子落水，三名男子接力及时施救',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 10,
|
||||
},
|
||||
];
|
||||
28
src/views/pages/preview/index.vue
Normal file
28
src/views/pages/preview/index.vue
Normal file
@@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<div class="preview-container">
|
||||
<el-card shadow="hover" header="element-plus 大图预览">
|
||||
<el-image style="width: 100px; height: 100px; border-radius: 5px" :src="url" :preview-src-list="srcList" title="点击查看大图预览"> </el-image>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'pagesPreview',
|
||||
setup() {
|
||||
const state = reactive({
|
||||
url: 'https://img2.baidu.com/it/u=1978192862,2048448374&fm=253&fmt=auto&app=138&f=JPEG?w=504&h=500',
|
||||
srcList: [
|
||||
'https://img2.baidu.com/it/u=1978192862,2048448374&fm=253&fmt=auto&app=138&f=JPEG?w=504&h=500',
|
||||
'https://img2.baidu.com/it/u=2370931438,70387529&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
|
||||
'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg',
|
||||
],
|
||||
});
|
||||
return {
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
51
src/views/pages/steps/index.vue
Normal file
51
src/views/pages/steps/index.vue
Normal file
@@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<div class="steps-container">
|
||||
<el-card shadow="hover" header="element-plus 步骤条">
|
||||
<el-steps :active="stepsActive">
|
||||
<el-step title="第一步">
|
||||
<template #icon>
|
||||
<SvgIcon name="iconfont icon-0_round_solid" :size="20" />
|
||||
</template>
|
||||
</el-step>
|
||||
<el-step title="第二步">
|
||||
<template #icon>
|
||||
<SvgIcon name="iconfont icon-2_round_solid" :size="20" />
|
||||
</template>
|
||||
</el-step>
|
||||
<el-step title="第三步">
|
||||
<template #icon>
|
||||
<SvgIcon name="iconfont icon-3_round_solid" :size="20" />
|
||||
</template>
|
||||
</el-step>
|
||||
</el-steps>
|
||||
<el-result icon="success" title="成功提示" subTitle="请根据提示进行操作" v-if="stepsActive === 1"> </el-result>
|
||||
<el-result icon="warning" title="警告提示" subTitle="请根据提示进行操作" v-else-if="stepsActive === 2"> </el-result>
|
||||
<el-result icon="error" title="错误提示" subTitle="请根据提示进行操作" v-else-if="stepsActive === 3"> </el-result>
|
||||
<el-button @click="onNextSteps" size="default" class="mt15" type="primary">
|
||||
<SvgIcon name="iconfont icon-step" />
|
||||
下一步
|
||||
</el-button>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'pagesSteps',
|
||||
setup() {
|
||||
const state = reactive({
|
||||
stepsActive: 1,
|
||||
});
|
||||
// 下一步点击
|
||||
const onNextSteps = () => {
|
||||
if (state.stepsActive++ > 2) state.stepsActive = 1;
|
||||
};
|
||||
return {
|
||||
onNextSteps,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
129
src/views/pages/tableRules/index.vue
Normal file
129
src/views/pages/tableRules/index.vue
Normal file
@@ -0,0 +1,129 @@
|
||||
<template>
|
||||
<el-card shadow="hover" header="表单表格验证">
|
||||
<el-form ref="tableRulesRef" :model="tableData" size="default">
|
||||
<el-table :data="tableData.data" border class="module-table-uncollected">
|
||||
<el-table-column
|
||||
v-for="(item, index) in tableData.header"
|
||||
:key="index"
|
||||
show-overflow-tooltip
|
||||
:prop="item.prop"
|
||||
:width="item.width"
|
||||
:label="item.label"
|
||||
>
|
||||
<template v-slot:header>
|
||||
<span v-if="item.isRequired" class="color-danger">*</span>
|
||||
<span class="pl5">{{ item.label }}</span>
|
||||
<el-tooltip v-if="item.isTooltip" effect="dark" content="这是tooltip" placement="top">
|
||||
<i class="iconfont icon-quanxian" />
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<template v-slot="scope">
|
||||
<el-form-item
|
||||
:prop="`data.${scope.$index}.${item.prop}`"
|
||||
:rules="[{ required: item.isRequired, message: '不能为空', trigger: `${item.type}` == 'input' ? 'blur' : 'change' }]"
|
||||
>
|
||||
<el-select v-if="item.type === 'select'" v-model="scope.row[item.prop]" placeholder="请选择">
|
||||
<el-option v-for="sel in tableData.option" :key="sel.id" :label="sel.label" :value="sel.value" />
|
||||
</el-select>
|
||||
<el-date-picker
|
||||
v-else-if="item.type === 'date'"
|
||||
v-model="scope.row[item.prop]"
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
style="width: 100%"
|
||||
/>
|
||||
<el-input v-else-if="item.type === 'input'" v-model="scope.row[item.prop]" placeholder="请输入内容" />
|
||||
<el-input v-else-if="item.type === 'dialog'" v-model="scope.row[item.prop]" readonly placeholder="请输入内容">
|
||||
<template v-slot:suffix>
|
||||
<i class="iconfont icon-shouye_dongtaihui" />
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-form>
|
||||
<el-row class="flex mt15">
|
||||
<div class="flex-margin">
|
||||
<el-button size="default" type="success" @click="onValidate">表格验证</el-button>
|
||||
<el-button size="default" type="primary" @click="onAddRow">新增一行</el-button>
|
||||
</div>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, toRefs, reactive, ref } from 'vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
|
||||
// 定义接口来定义对象的类型
|
||||
interface TableHeader {
|
||||
prop: string;
|
||||
width: string | number;
|
||||
label: string;
|
||||
isRequired?: boolean;
|
||||
isTooltip?: boolean;
|
||||
type: string;
|
||||
}
|
||||
interface TableRulesState {
|
||||
tableData: {
|
||||
data: any[];
|
||||
header: TableHeader[];
|
||||
option: any[];
|
||||
};
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'pagesTableRules',
|
||||
setup() {
|
||||
const tableRulesRef = ref();
|
||||
const state = reactive<TableRulesState>({
|
||||
tableData: {
|
||||
data: [],
|
||||
header: [
|
||||
{ prop: 'a1', width: '', label: '一级分类', isRequired: true, type: 'select' },
|
||||
{ prop: 'a2', width: '', label: '二级分类', isRequired: true, type: 'select' },
|
||||
{ prop: 'a3', width: '', label: '三级分类', isRequired: true, type: 'select' },
|
||||
{ prop: 'a4', width: '', label: '四级分类', isRequired: true, type: 'date' },
|
||||
{ prop: 'a5', width: '', label: '五级分类', isRequired: true, type: 'input' },
|
||||
{ prop: 'a6', width: '', label: '六级分类', isTooltip: true, type: 'dialog' },
|
||||
{ prop: 'a7', width: '', label: '演示级分类', type: 'input' },
|
||||
{ prop: 'a8', width: '', label: '颜色是分类', type: 'input' },
|
||||
],
|
||||
option: [
|
||||
{ value: '选项1', label: '黄金糕' },
|
||||
{ value: '选项2', label: '双皮奶' },
|
||||
{ value: '选项3', label: '蚵仔煎' },
|
||||
],
|
||||
},
|
||||
});
|
||||
// 表格验证
|
||||
const onValidate = () => {
|
||||
if (state.tableData.data.length <= 0) return ElMessage.warning('请先点击增加一行');
|
||||
tableRulesRef.value.validate((valid: any) => {
|
||||
if (!valid) return ElMessage.warning('表格项必填未填');
|
||||
ElMessage.success('全部验证通过');
|
||||
});
|
||||
};
|
||||
// 新增一行
|
||||
const onAddRow = () => {
|
||||
state.tableData.data.push({
|
||||
a1: '',
|
||||
a2: '',
|
||||
a3: '',
|
||||
a4: '',
|
||||
a5: '',
|
||||
a6: '',
|
||||
a7: '',
|
||||
a8: '',
|
||||
});
|
||||
};
|
||||
return {
|
||||
onValidate,
|
||||
onAddRow,
|
||||
tableRulesRef,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
258
src/views/pages/tree/index.vue
Normal file
258
src/views/pages/tree/index.vue
Normal file
@@ -0,0 +1,258 @@
|
||||
<template>
|
||||
<div class="tree-container">
|
||||
<el-card shadow="hover" header="element plus Tree 树形控件改成表格">
|
||||
<div v-loading="treeLoading">
|
||||
<div class="tree-head">
|
||||
<div class="tree-head-check"><el-checkbox v-model="treeCheckAll" @change="onCheckAllChange"></el-checkbox></div>
|
||||
<div class="tree-head-one">商品 ID</div>
|
||||
<div style="flex: 1; display: flex">
|
||||
<div class="tree-head-two">商品名称</div>
|
||||
<div class="tree-head-three">描述</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-tree :data="treeTableData" show-checkbox node-key="id" ref="treeTable" :props="treeDefaultProps" @check="onCheckTree">
|
||||
<template #default="{ node, data }">
|
||||
<span class="tree-custom-node">
|
||||
<span style="flex: 1">{{ node.label }}</span>
|
||||
<span v-if="data.isShow" style="flex: 1; display: flex">
|
||||
<span type="text" size="default" style="flex: 1">{{ data.label1 }}</span>
|
||||
<span type="text" size="default" style="flex: 1">{{ data.label2 }}</span>
|
||||
</span>
|
||||
</span>
|
||||
</template>
|
||||
</el-tree>
|
||||
</div>
|
||||
<el-button @click="onSelect" class="mt15" size="default" type="primary">
|
||||
<SvgIcon name="iconfont icon-shuxingtu" />
|
||||
选择元素
|
||||
</el-button>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, onBeforeMount, getCurrentInstance, defineComponent } from 'vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
|
||||
// 定义接口来定义对象的类型
|
||||
interface TreeDataState {
|
||||
id: number;
|
||||
label: string;
|
||||
label1: string;
|
||||
label2: string;
|
||||
isShow: boolean;
|
||||
children?: TreeDataState[];
|
||||
}
|
||||
interface TreeSate {
|
||||
treeCheckAll: boolean;
|
||||
treeLoading: boolean;
|
||||
treeTableData: TreeDataState[];
|
||||
treeDefaultProps: {
|
||||
children: string;
|
||||
label: string;
|
||||
};
|
||||
treeSelArr: TreeDataState[];
|
||||
treeLength: number;
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'pagesTree',
|
||||
setup() {
|
||||
const { proxy } = <any>getCurrentInstance();
|
||||
const state = reactive<TreeSate>({
|
||||
treeCheckAll: false,
|
||||
treeLoading: false,
|
||||
treeTableData: [],
|
||||
treeDefaultProps: {
|
||||
children: 'children',
|
||||
label: 'label',
|
||||
},
|
||||
treeSelArr: [],
|
||||
treeLength: 0,
|
||||
});
|
||||
// 初始化树的长度
|
||||
const initTreeLengh = (arr: TreeDataState[]) => {
|
||||
let count = 0;
|
||||
arr.map((item) => {
|
||||
if (item.children) {
|
||||
count += item.children.length;
|
||||
}
|
||||
});
|
||||
state.treeLength = count + arr.length;
|
||||
};
|
||||
// 全选改变时
|
||||
const onCheckAllChange = () => {
|
||||
if (state.treeCheckAll) {
|
||||
proxy.$refs.treeTable.setCheckedNodes(state.treeTableData);
|
||||
} else {
|
||||
proxy.$refs.treeTable.setCheckedKeys([]);
|
||||
}
|
||||
};
|
||||
// 节点选中状态发生变化时的回调
|
||||
const onCheckTree = () => {
|
||||
state.treeSelArr = [];
|
||||
state.treeSelArr = proxy.$refs.treeTable.getCheckedNodes();
|
||||
state.treeSelArr.length == state.treeLength ? (state.treeCheckAll = true) : (state.treeCheckAll = false);
|
||||
};
|
||||
// 选择元素按钮
|
||||
const onSelect = () => {
|
||||
let treeArr = proxy.$refs.treeTable.getCheckedNodes();
|
||||
if (treeArr.length <= 0) {
|
||||
ElMessage.warning('请选择元素');
|
||||
return;
|
||||
} else {
|
||||
// console.log(proxy.$refs.treeTable.getCheckedNodes());
|
||||
}
|
||||
};
|
||||
// 初始化树模拟数据
|
||||
const getTreeData = () => {
|
||||
state.treeTableData = [
|
||||
{
|
||||
id: 1,
|
||||
label: '12987121',
|
||||
label1: '好滋好味鸡蛋仔',
|
||||
label2: '荷兰优质淡奶，奶香浓而不腻',
|
||||
isShow: true,
|
||||
children: [
|
||||
{
|
||||
id: 11,
|
||||
label: '一级 1-1',
|
||||
label1: '好滋好味鸡蛋仔',
|
||||
label2: '荷兰优质淡奶，奶香浓而不腻',
|
||||
isShow: false,
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
label: '一级 1-2',
|
||||
label1: '好滋好味鸡蛋仔',
|
||||
label2: '荷兰优质淡奶，奶香浓而不腻',
|
||||
isShow: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: '12987122',
|
||||
label1: '好滋好味鸡蛋仔',
|
||||
label2: '荷兰优质淡奶，奶香浓而不腻',
|
||||
isShow: true,
|
||||
children: [
|
||||
{
|
||||
id: 21,
|
||||
label: '二级 2-1',
|
||||
label1: '好滋好味鸡蛋仔',
|
||||
label2: '荷兰优质淡奶，奶香浓而不腻',
|
||||
isShow: false,
|
||||
},
|
||||
{
|
||||
id: 22,
|
||||
label: '二级 2-2',
|
||||
label1: '好滋好味鸡蛋仔',
|
||||
label2: '荷兰优质淡奶，奶香浓而不腻',
|
||||
isShow: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
label: '12987123',
|
||||
label1: '好滋好味鸡蛋仔',
|
||||
label2: '荷兰优质淡奶，奶香浓而不腻',
|
||||
isShow: true,
|
||||
children: [
|
||||
{
|
||||
id: 31,
|
||||
label: '二级 3-1',
|
||||
label1: '好滋好味鸡蛋仔',
|
||||
label2: '荷兰优质淡奶，奶香浓而不腻',
|
||||
isShow: false,
|
||||
},
|
||||
{
|
||||
id: 32,
|
||||
label: '二级 3-2',
|
||||
label1: '好滋好味鸡蛋仔',
|
||||
label2: '荷兰优质淡奶，奶香浓而不腻',
|
||||
isShow: false,
|
||||
},
|
||||
{
|
||||
id: 33,
|
||||
label: '二级 3-3',
|
||||
label1: '好滋好味鸡蛋仔',
|
||||
label2: '荷兰优质淡奶，奶香浓而不腻',
|
||||
isShow: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
initTreeLengh(state.treeTableData);
|
||||
};
|
||||
// 页面加载前
|
||||
onBeforeMount(() => {
|
||||
getTreeData();
|
||||
});
|
||||
return {
|
||||
getTreeData,
|
||||
onCheckAllChange,
|
||||
onCheckTree,
|
||||
onSelect,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.tree-container {
|
||||
.tree-head {
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
border: 1px solid var(--next-border-color-light);
|
||||
border-bottom: none;
|
||||
display: flex;
|
||||
padding-right: 8px;
|
||||
font-weight: bold;
|
||||
color: #909399;
|
||||
.tree-head-check {
|
||||
width: 38px;
|
||||
text-align: right;
|
||||
}
|
||||
.tree-head-one,
|
||||
.tree-head-two,
|
||||
.tree-head-three {
|
||||
flex: 1;
|
||||
}
|
||||
.tree-head-one {
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
.el-tree {
|
||||
overflow: hidden;
|
||||
border-bottom: 1px solid var(--next-border-color-light);
|
||||
.tree-custom-node {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-right: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
&:deep(.el-tree-node) {
|
||||
border: 1px solid var(--next-border-color-light);
|
||||
border-bottom: none;
|
||||
color: #606266;
|
||||
.el-tree-node__content {
|
||||
line-height: 57px !important;
|
||||
height: 57px !important;
|
||||
}
|
||||
.el-tree-node__children {
|
||||
.el-tree-node {
|
||||
border: none;
|
||||
}
|
||||
.el-tree-node__content {
|
||||
border-top: 1px solid var(--next-border-color-light);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
174
src/views/pages/waterfall/index.vue
Normal file
174
src/views/pages/waterfall/index.vue
Normal file
@@ -0,0 +1,174 @@
|
||||
<template>
|
||||
<div class="waterfall-container">
|
||||
<el-card shadow="hover" header="瀑布屏（布局一）" class="mb15">
|
||||
<div class="waterfall-first">
|
||||
<div class="waterfall-first-item" v-for="v in 30" :key="v" v-waves>
|
||||
<div class="w100 h100 flex">
|
||||
<span class="flex-margin">{{ v }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card shadow="hover" header="瀑布屏（布局二）">
|
||||
<div class="waterfall-last">
|
||||
<div class="waterfall-last-item" v-for="v in 30" :key="v" v-waves="'light'">
|
||||
<div class="w100 h100 flex">
|
||||
<span class="flex-margin">{{ v }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'pagesWaterfall',
|
||||
setup() {
|
||||
const state = reactive({});
|
||||
return {
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.waterfall-container {
|
||||
.waterfall-first {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(188px, 1fr));
|
||||
grid-gap: 0.25em;
|
||||
grid-auto-flow: row dense;
|
||||
grid-auto-rows: 20px;
|
||||
.waterfall-first-item {
|
||||
width: 100%;
|
||||
background: var(--el-color-primary);
|
||||
color: var(--el-color-white);
|
||||
transition: all 0.3s ease;
|
||||
border-radius: 3px;
|
||||
&:nth-of-type(3n + 1) {
|
||||
grid-row: auto / span 5;
|
||||
}
|
||||
&:nth-of-type(3n + 2) {
|
||||
grid-row: auto / span 6;
|
||||
}
|
||||
&:nth-of-type(3n + 3) {
|
||||
grid-row: auto / span 8;
|
||||
}
|
||||
&:hover {
|
||||
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.waterfall-last {
|
||||
display: grid;
|
||||
grid-gap: 0.25em;
|
||||
grid-auto-flow: row dense;
|
||||
grid-auto-rows: minmax(188px, 20vmin);
|
||||
grid-template-columns: 1fr;
|
||||
.waterfall-last-item {
|
||||
height: 100%;
|
||||
background: var(--el-color-primary);
|
||||
color: var(--el-color-white);
|
||||
transition: all 0.3s ease;
|
||||
border-radius: 3px;
|
||||
&:hover {
|
||||
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (min-width: 576px) {
|
||||
.waterfall-last {
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
.waterfall-last-item {
|
||||
&:nth-of-type(9n + 9) {
|
||||
grid-column: auto / span 2;
|
||||
}
|
||||
&:nth-of-type(9n + 8) {
|
||||
grid-column: auto / span 2;
|
||||
}
|
||||
&:nth-of-type(9n + 7) {
|
||||
grid-column: auto / span 3;
|
||||
}
|
||||
&:nth-of-type(9n + 6) {
|
||||
grid-column: auto / span 2;
|
||||
}
|
||||
&:nth-of-type(9n + 5) {
|
||||
grid-column: auto / span 3;
|
||||
}
|
||||
&:nth-of-type(9n + 4) {
|
||||
grid-column: auto / span 2;
|
||||
}
|
||||
&:nth-of-type(9n + 3) {
|
||||
grid-column: auto / span 3;
|
||||
}
|
||||
&:nth-of-type(9n + 2) {
|
||||
grid-column: auto / span 2;
|
||||
}
|
||||
&:nth-of-type(9n + 1) {
|
||||
grid-column: auto / span 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (min-width: 576px) and (min-width: 1024px) {
|
||||
.waterfall-last {
|
||||
grid-template-columns: repeat(14, 1fr);
|
||||
.waterfall-last-item {
|
||||
&:nth-of-type(15n + 15) {
|
||||
grid-column: auto / span 3;
|
||||
}
|
||||
&:nth-of-type(15n + 14) {
|
||||
grid-column: auto / span 3;
|
||||
}
|
||||
&:nth-of-type(15n + 13) {
|
||||
grid-column: auto / span 2;
|
||||
}
|
||||
&:nth-of-type(15n + 12) {
|
||||
grid-column: auto / span 3;
|
||||
}
|
||||
&:nth-of-type(15n + 11) {
|
||||
grid-column: auto / span 3;
|
||||
}
|
||||
&:nth-of-type(15n + 10) {
|
||||
grid-column: auto / span 2;
|
||||
}
|
||||
&:nth-of-type(15n + 9) {
|
||||
grid-column: auto / span 3;
|
||||
}
|
||||
&:nth-of-type(15n + 8) {
|
||||
grid-column: auto / span 3;
|
||||
}
|
||||
&:nth-of-type(15n + 7) {
|
||||
grid-column: auto / span 3;
|
||||
}
|
||||
&:nth-of-type(15n + 6) {
|
||||
grid-column: auto / span 3;
|
||||
}
|
||||
&:nth-of-type(15n + 5) {
|
||||
grid-column: auto / span 3;
|
||||
}
|
||||
&:nth-of-type(15n + 4) {
|
||||
grid-column: auto / span 3;
|
||||
}
|
||||
&:nth-of-type(15n + 3) {
|
||||
grid-column: auto / span 3;
|
||||
}
|
||||
&:nth-of-type(15n + 2) {
|
||||
grid-column: auto / span 3;
|
||||
}
|
||||
&:nth-of-type(15n + 1) {
|
||||
grid-column: auto / span 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
134
src/views/pages/waves/index.vue
Normal file
134
src/views/pages/waves/index.vue
Normal file
@@ -0,0 +1,134 @@
|
||||
<template>
|
||||
<div class="preview-container">
|
||||
<el-card shadow="hover" header="波浪指令效果（v-waves）作用于 btn">
|
||||
<el-row class="mb10" style="color: #808080">可选参数 v-waves=" |light|red|orange|purple|green|teal"</el-row>
|
||||
<div class="flex-warp">
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button size="default" v-waves>
|
||||
<SvgIcon name="iconfont icon-bolangnengshiyanchang" />
|
||||
默认效果
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="primary" size="default" v-waves="'light'">
|
||||
<SvgIcon name="iconfont icon-bolangnengshiyanchang" />
|
||||
light 效果
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="success" size="default" v-waves="'red'">
|
||||
<SvgIcon name="iconfont icon-bolangnengshiyanchang" />
|
||||
red 效果
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="info" size="default" v-waves="'orange'">
|
||||
<SvgIcon name="iconfont icon-bolangnengshiyanchang" />
|
||||
orange 效果
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="warning" size="default" v-waves="'purple'">
|
||||
<SvgIcon name="iconfont icon-bolangnengshiyanchang" />
|
||||
purple 效果
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="danger" size="default" v-waves="'green'">
|
||||
<SvgIcon name="iconfont icon-bolangnengshiyanchang" />
|
||||
green 效果
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="primary" size="default" v-waves="'teal'">
|
||||
<SvgIcon name="iconfont icon-bolangnengshiyanchang" />
|
||||
teal 效果
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card shadow="hover" header="波浪指令效果（v-waves）作用于 div" class="mt15">
|
||||
<div class="waterfall-first">
|
||||
<div class="waterfall-first-item" v-for="v in 12" :key="v" v-waves>
|
||||
<div class="w100 h100 flex">
|
||||
<span class="flex-margin">{{ v }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'pagesWaves',
|
||||
setup() {
|
||||
const state = reactive({});
|
||||
return {
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.preview-container {
|
||||
.flex-warp {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
margin: 0 -5px;
|
||||
.flex-warp-item {
|
||||
padding: 5px;
|
||||
.flex-warp-item-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.waterfall-first {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(188px, 1fr));
|
||||
grid-gap: 0.25em;
|
||||
grid-auto-flow: row dense;
|
||||
grid-auto-rows: 20px;
|
||||
.waterfall-first-item {
|
||||
width: 100%;
|
||||
background: var(--el-color-primary);
|
||||
color: var(--el-color-white);
|
||||
transition: all 0.3s ease;
|
||||
border-radius: 3px;
|
||||
&:nth-of-type(3n + 1) {
|
||||
grid-row: auto / span 5;
|
||||
}
|
||||
&:nth-of-type(3n + 2) {
|
||||
grid-row: auto / span 6;
|
||||
}
|
||||
&:nth-of-type(3n + 3) {
|
||||
grid-row: auto / span 8;
|
||||
}
|
||||
&:hover {
|
||||
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
107
src/views/pages/workflow/component/contextmenu/index.vue
Normal file
107
src/views/pages/workflow/component/contextmenu/index.vue
Normal file
@@ -0,0 +1,107 @@
|
||||
<template>
|
||||
<transition name="el-zoom-in-center">
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="el-dropdown__popper el-popper is-light is-pure custom-contextmenu"
|
||||
role="tooltip"
|
||||
data-popper-placement="bottom"
|
||||
:style="`top: ${dropdowns.y + 5}px;left: ${dropdowns.x}px;`"
|
||||
:key="Math.random()"
|
||||
v-show="isShow"
|
||||
>
|
||||
<ul class="el-dropdown-menu">
|
||||
<li
|
||||
v-for="(v, k) in dropdownList"
|
||||
class="el-dropdown-menu__item"
|
||||
aria-disabled="false"
|
||||
tabindex="-1"
|
||||
:key="k"
|
||||
@click="onCurrentClick(v.contextMenuClickId)"
|
||||
>
|
||||
<SvgIcon :name="v.icon" />
|
||||
<span>{{ v.txt }}{{ item.type === 'line' ? '线' : '节点' }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="el-popper__arrow" style="left: 10px"></div>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, reactive, toRefs, onMounted, onUnmounted } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'pagesWorkflowContextmenu',
|
||||
props: {
|
||||
dropdown: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
setup(props, { emit }) {
|
||||
const state = reactive({
|
||||
isShow: false,
|
||||
dropdownList: [
|
||||
{ contextMenuClickId: 0, txt: '删除', icon: 'ele-Delete' },
|
||||
{ contextMenuClickId: 1, txt: '编辑', icon: 'ele-Edit' },
|
||||
],
|
||||
item: {
|
||||
type: 'node',
|
||||
},
|
||||
conn: {},
|
||||
});
|
||||
// 父级传过来的坐标 x,y 值
|
||||
const dropdowns = computed(() => {
|
||||
return <any>props.dropdown;
|
||||
});
|
||||
// 当前项菜单点击
|
||||
const onCurrentClick = (contextMenuClickId: number) => {
|
||||
emit('current', Object.assign({}, { contextMenuClickId }, state.item), state.conn);
|
||||
};
|
||||
// 打开右键菜单：判断是否固定，固定则不显示关闭按钮
|
||||
const openContextmenu = (item: any, conn = {}) => {
|
||||
state.item = item;
|
||||
state.conn = conn;
|
||||
closeContextmenu();
|
||||
setTimeout(() => {
|
||||
state.isShow = true;
|
||||
}, 10);
|
||||
};
|
||||
// 关闭右键菜单
|
||||
const closeContextmenu = () => {
|
||||
state.isShow = false;
|
||||
};
|
||||
// 监听页面监听进行右键菜单的关闭
|
||||
onMounted(() => {
|
||||
document.body.addEventListener('click', closeContextmenu);
|
||||
document.body.addEventListener('contextmenu', closeContextmenu);
|
||||
});
|
||||
// 页面卸载时，移除右键菜单监听事件
|
||||
onUnmounted(() => {
|
||||
document.body.removeEventListener('click', closeContextmenu);
|
||||
document.body.removeEventListener('contextmenu', closeContextmenu);
|
||||
});
|
||||
return {
|
||||
dropdowns,
|
||||
openContextmenu,
|
||||
closeContextmenu,
|
||||
onCurrentClick,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.custom-contextmenu {
|
||||
transform-origin: center top;
|
||||
z-index: 2190;
|
||||
position: fixed;
|
||||
.el-dropdown-menu__item {
|
||||
font-size: 12px !important;
|
||||
white-space: nowrap;
|
||||
i {
|
||||
font-size: 12px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
73
src/views/pages/workflow/component/drawer/index.vue
Normal file
73
src/views/pages/workflow/component/drawer/index.vue
Normal file
@@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-drawer :title="`${nodeData.type === 'line' ? '线' : '节点'}操作`" v-model="isOpen" size="320px">
|
||||
<el-scrollbar>
|
||||
<Line v-if="nodeData.type === 'line'" @change="onLineChange" @close="close" ref="lineRef" />
|
||||
<Node v-else @submit="onNodeSubmit" @close="close" ref="nodeRef" />
|
||||
</el-scrollbar>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, reactive, toRefs, ref, nextTick } from 'vue';
|
||||
import Line from './line.vue';
|
||||
import Node from './node.vue';
|
||||
|
||||
// 定义接口来定义对象的类型
|
||||
interface WorkflowDrawerState {
|
||||
isOpen: boolean;
|
||||
nodeData: {
|
||||
type: string;
|
||||
};
|
||||
jsplumbConn: any;
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'pagesWorkflowDrawer',
|
||||
components: { Line, Node },
|
||||
setup(props, { emit }) {
|
||||
const lineRef = ref();
|
||||
const nodeRef = ref();
|
||||
const state = reactive<WorkflowDrawerState>({
|
||||
isOpen: false,
|
||||
nodeData: {
|
||||
type: 'node',
|
||||
},
|
||||
jsplumbConn: {},
|
||||
});
|
||||
// 打开抽屉
|
||||
const open = (item: any, conn: any) => {
|
||||
state.isOpen = true;
|
||||
state.jsplumbConn = conn;
|
||||
state.nodeData = item;
|
||||
nextTick(() => {
|
||||
if (item.type === 'line') lineRef.value.getParentData(item);
|
||||
else nodeRef.value.getParentData(item);
|
||||
});
|
||||
};
|
||||
// 关闭
|
||||
const close = () => {
|
||||
state.isOpen = false;
|
||||
};
|
||||
// 线 label 内容改变时
|
||||
const onLineChange = (label: any) => {
|
||||
state.jsplumbConn.label = label;
|
||||
emit('label', state.jsplumbConn);
|
||||
};
|
||||
// 节点内容改变时
|
||||
const onNodeSubmit = (data: object) => {
|
||||
emit('node', data);
|
||||
};
|
||||
return {
|
||||
lineRef,
|
||||
nodeRef,
|
||||
open,
|
||||
close,
|
||||
onLineChange,
|
||||
onNodeSubmit,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
62
src/views/pages/workflow/component/drawer/line.vue
Normal file
62
src/views/pages/workflow/component/drawer/line.vue
Normal file
@@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<div class="pt15 pr15 pb15 pl15">
|
||||
<el-form :model="line" size="default" label-width="50px">
|
||||
<el-form-item label="来往">
|
||||
<el-input v-model="line.contact" placeholder="来往" clearable disabled></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型">
|
||||
<el-input v-model="line.type" placeholder="类型" clearable disabled></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="label">
|
||||
<el-input v-model="line.label" placeholder="请输入label内容" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="onLineTextReset">
|
||||
<SvgIcon name="ele-RefreshRight" />
|
||||
重置
|
||||
</el-button>
|
||||
<el-button @click="onLineTextChange" type="primary">
|
||||
<SvgIcon name="ele-Check" />
|
||||
保存
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, reactive, toRefs } from 'vue';
|
||||
|
||||
// 定义接口来定义对象的类型
|
||||
interface WorkflowDrawerLineState {
|
||||
line: any;
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'pagesWorkflowDrawerLine',
|
||||
setup(props, { emit }) {
|
||||
const state = reactive<WorkflowDrawerLineState>({
|
||||
line: {},
|
||||
});
|
||||
// 获取父组件数据
|
||||
const getParentData = (data: object) => {
|
||||
state.line = data;
|
||||
};
|
||||
// 重置
|
||||
const onLineTextReset = () => {
|
||||
state.line.label = '';
|
||||
};
|
||||
// 保存
|
||||
const onLineTextChange = () => {
|
||||
emit('change', state.line.label);
|
||||
emit('close');
|
||||
};
|
||||
return {
|
||||
getParentData,
|
||||
onLineTextReset,
|
||||
onLineTextChange,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
272
src/views/pages/workflow/component/drawer/node.vue
Normal file
272
src/views/pages/workflow/component/drawer/node.vue
Normal file
@@ -0,0 +1,272 @@
|
||||
<template>
|
||||
<div class="workflow-drawer-node">
|
||||
<el-tabs type="border-card" v-model="tabsActive">
|
||||
<!-- 节点编辑 -->
|
||||
<el-tab-pane label="节点编辑" name="1">
|
||||
<el-scrollbar>
|
||||
<el-form :model="node" :rules="nodeRules" ref="nodeFormRef" size="default" label-width="80px" class="pt15 pr15 pb15 pl15">
|
||||
<el-form-item label="数据id" prop="id">
|
||||
<el-input v-model="node.id" placeholder="请输入数据id" clearable disabled></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="节点id" prop="nodeId">
|
||||
<el-input v-model="node.nodeId" placeholder="请输入节点id" clearable disabled></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-input v-model="node.type" placeholder="请输入类型" clearable disabled></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="left坐标" prop="left">
|
||||
<el-input v-model="node.left" placeholder="请输入left坐标" clearable disabled></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="top坐标" prop="top">
|
||||
<el-input v-model="node.top" placeholder="请输入top坐标" clearable disabled></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="icon图标" prop="icon">
|
||||
<el-input v-model="node.icon" placeholder="请输入icon图标" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input v-model="node.name" placeholder="请输入名称" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button class="mb15" @click="onNodeRefresh">
|
||||
<SvgIcon name="ele-RefreshRight" />
|
||||
重置
|
||||
</el-button>
|
||||
<el-button type="primary" class="mb15" @click="onNodeSubmit">
|
||||
<SvgIcon name="ele-Check" />
|
||||
保存
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-scrollbar>
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- 扩展表单 -->
|
||||
<el-tab-pane label="扩展表单" name="2">
|
||||
<el-scrollbar>
|
||||
<el-form :model="form" ref="extendFormRef" size="default" label-width="80px" class="pt15 pr15 pb15 pl15">
|
||||
<el-form-item
|
||||
:label="val.label"
|
||||
:prop="val.prop"
|
||||
v-for="(val, key) in node.from"
|
||||
:key="key"
|
||||
:rules="[{ required: val.required, message: `${val.label}不能为空`, trigger: 'blur' }]"
|
||||
>
|
||||
<el-input
|
||||
v-model="form[val.prop]"
|
||||
:placeholder="val.placeholder"
|
||||
clearable
|
||||
v-if="val.type === 'input'"
|
||||
:disabled="val.disabled"
|
||||
></el-input>
|
||||
<el-select v-model="form[val.prop]" placeholder="请选择" v-if="val.type === 'select'" clearable :disabled="val.disabled">
|
||||
<el-option v-for="item in val.options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
|
||||
</el-select>
|
||||
<el-checkbox-group v-model="form[val.prop]" v-if="val.type === 'checkbox'" :disabled="val.disabled">
|
||||
<el-checkbox label="美食推荐" name="type"></el-checkbox>
|
||||
<el-checkbox label="统计分析" name="type"></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button class="mb15" @click="onExtendRefresh">
|
||||
<SvgIcon name="ele-RefreshRight" />
|
||||
重置
|
||||
</el-button>
|
||||
<el-button type="primary" class="mb15" @click="onExtendSubmit" :loading="loading.extend">
|
||||
<SvgIcon name="ele-Check" />
|
||||
保存
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-scrollbar>
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- 图表可视化 -->
|
||||
<el-tab-pane label="图表可视化" name="3">
|
||||
<el-scrollbar>
|
||||
<div class="flex-content-right">
|
||||
<div style="height: 200px; width: 320px" ref="chartsMonitorRef"></div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, reactive, toRefs, ref, nextTick, getCurrentInstance } from 'vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
// 定义接口来定义对象的类型
|
||||
interface WorkflowDrawerNodeState {
|
||||
node: { [key: string]: any };
|
||||
nodeRules: any;
|
||||
form: any;
|
||||
tabsActive: string;
|
||||
loading: {
|
||||
extend: boolean;
|
||||
};
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'pagesWorkflowDrawerNode',
|
||||
setup(props, { emit }) {
|
||||
const { proxy } = <any>getCurrentInstance();
|
||||
const nodeFormRef = ref();
|
||||
const extendFormRef = ref();
|
||||
const chartsMonitorRef = ref();
|
||||
const state = reactive<WorkflowDrawerNodeState>({
|
||||
node: {},
|
||||
nodeRules: {
|
||||
id: [{ required: true, message: '请输入数据id', trigger: 'blur' }],
|
||||
nodeId: [{ required: true, message: '请输入节点id', trigger: 'blur' }],
|
||||
type: [{ required: true, message: '请输入类型', trigger: 'blur' }],
|
||||
left: [{ required: true, message: '请输入left坐标', trigger: 'blur' }],
|
||||
top: [{ required: true, message: '请输入top坐标', trigger: 'blur' }],
|
||||
icon: [{ required: true, message: '请输入icon图标', trigger: 'blur' }],
|
||||
name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
|
||||
},
|
||||
form: {
|
||||
module: [],
|
||||
},
|
||||
tabsActive: '1',
|
||||
loading: {
|
||||
extend: false,
|
||||
},
|
||||
});
|
||||
// 获取父组件数据
|
||||
const getParentData = (data: object) => {
|
||||
state.tabsActive = '1';
|
||||
state.node = data;
|
||||
initChartsMonitor();
|
||||
};
|
||||
// 节点编辑-重置
|
||||
const onNodeRefresh = () => {
|
||||
state.node.icon = '';
|
||||
state.node.name = '';
|
||||
};
|
||||
// 节点编辑-保存
|
||||
const onNodeSubmit = () => {
|
||||
nodeFormRef.value.validate((valid: boolean) => {
|
||||
if (valid) {
|
||||
emit('submit', state.node);
|
||||
emit('close');
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
};
|
||||
// 扩展表单-重置
|
||||
const onExtendRefresh = () => {
|
||||
extendFormRef.value.resetFields();
|
||||
};
|
||||
// 扩展表单-保存
|
||||
const onExtendSubmit = () => {
|
||||
extendFormRef.value.validate((valid: boolean) => {
|
||||
if (valid) {
|
||||
state.loading.extend = true;
|
||||
setTimeout(() => {
|
||||
state.loading.extend = false;
|
||||
ElMessage.success('保存成功');
|
||||
emit('close');
|
||||
}, 1000);
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
};
|
||||
// 图表可视化-初始化
|
||||
const initChartsMonitor = () => {
|
||||
const myChart = echarts.init(proxy.$refs.chartsMonitorRef);
|
||||
const numsOne = [];
|
||||
const numsTwo = [];
|
||||
for (let i = 0; i < 7; i++) {
|
||||
numsOne.push(`${Math.floor(Math.random() * 52 + 10)}:${Math.floor(Math.random() * 52 + 1)}`);
|
||||
numsTwo.push(Math.floor(Math.random() * 52 + 1));
|
||||
}
|
||||
const option = {
|
||||
grid: {
|
||||
top: 50,
|
||||
right: 30,
|
||||
bottom: 30,
|
||||
left: 50,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: numsOne,
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
itemStyle: {
|
||||
color: '#289df5',
|
||||
borderColor: '#289df5',
|
||||
areaStyle: {
|
||||
type: 'default',
|
||||
opacity: 0.1,
|
||||
},
|
||||
},
|
||||
data: numsTwo,
|
||||
type: 'line',
|
||||
areaStyle: {},
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(option);
|
||||
nextTick(() => {
|
||||
myChart.resize();
|
||||
});
|
||||
};
|
||||
return {
|
||||
nodeFormRef,
|
||||
extendFormRef,
|
||||
chartsMonitorRef,
|
||||
getParentData,
|
||||
onNodeRefresh,
|
||||
onNodeSubmit,
|
||||
onExtendRefresh,
|
||||
onExtendSubmit,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.workflow-drawer-node {
|
||||
:deep {
|
||||
.el-tabs {
|
||||
box-shadow: unset;
|
||||
border: unset;
|
||||
.el-tabs__nav {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
.el-tabs__item {
|
||||
flex: 1;
|
||||
padding: unset;
|
||||
text-align: center;
|
||||
&:first-of-type.is-active {
|
||||
border-left-color: transparent;
|
||||
}
|
||||
&:last-of-type.is-active {
|
||||
border-right-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-tabs__content {
|
||||
padding: 0;
|
||||
height: calc(100vh - 90px);
|
||||
.el-tab-pane {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
39
src/views/pages/workflow/component/tool/help.vue
Normal file
39
src/views/pages/workflow/component/tool/help.vue
Normal file
@@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<div class="workflow-tool-help">
|
||||
<el-dialog v-model="isShow" width="769px">
|
||||
<template #header>
|
||||
<div v-drag="['.workflow-tool-help .el-dialog', '.workflow-tool-help .el-dialog__header']">使用帮助</div>
|
||||
</template>
|
||||
<div>1、拖入：鼠标移入左侧导航中，鼠标形状改变时拖动到右侧网格状的视图中。</div>
|
||||
<div class="mt10">2、移动：鼠标移入到视图中的某个节点元素，鼠标形状改变时拖动改变位置。</div>
|
||||
<div class="mt10">3、连线：鼠标移入到视图中的某个节点元素的icon(图标)，鼠标形状改变（变成"+"），按下鼠标左键进行拖线连接。</div>
|
||||
<div class="mt10">4、节点：鼠标移入到视图中的某个节点元素，点击鼠标右键可进行删除、编辑节点。</div>
|
||||
<div class="mt10 mb10">5、线条：鼠标移入到视图中的某个线条，线条颜色改变时，点击鼠标右键可进行删除、编辑线条。</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, reactive, toRefs } from 'vue';
|
||||
export default defineComponent({
|
||||
name: 'pagesWorkflowToolHelp',
|
||||
setup() {
|
||||
const state = reactive({
|
||||
isShow: false,
|
||||
});
|
||||
// 打开弹窗
|
||||
const open = () => {
|
||||
state.isShow = true;
|
||||
};
|
||||
// 关闭弹窗
|
||||
const close = () => {
|
||||
state.isShow = false;
|
||||
};
|
||||
return {
|
||||
open,
|
||||
close,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
79
src/views/pages/workflow/component/tool/index.vue
Normal file
79
src/views/pages/workflow/component/tool/index.vue
Normal file
@@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<div class="workflow-tool">
|
||||
<div class="pl15">{{ setToolTitle }}</div>
|
||||
<div class="workflow-tool-right">
|
||||
<div class="workflow-tool-icon" v-for="(v, k) in toolList" :key="k" :title="v.title" @click="onToolClick(v.fnName)">
|
||||
<SvgIcon :name="v.icon" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, computed, reactive, toRefs } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useThemeConfig } from '/@/stores/themeConfig';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'pagesWorkflowTool',
|
||||
setup(props, { emit }) {
|
||||
const storesThemeConfig = useThemeConfig();
|
||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||
const state = reactive({
|
||||
toolList: [
|
||||
{ icon: 'ele-Help', title: '帮助', fnName: 'help' },
|
||||
{ icon: 'ele-Download', title: '下载', fnName: 'download' },
|
||||
{ icon: 'ele-Check', title: '提交', fnName: 'submit' },
|
||||
{ icon: 'ele-DocumentCopy', title: '复制', fnName: 'copy' },
|
||||
{ icon: 'ele-Delete', title: '删除', fnName: 'del' },
|
||||
{ icon: 'ele-FullScreen', title: '全屏', fnName: 'fullscreen' },
|
||||
],
|
||||
});
|
||||
// 设置 tool 标题
|
||||
const setToolTitle = computed(() => {
|
||||
let { globalTitle } = themeConfig.value;
|
||||
return `${globalTitle}工作流`;
|
||||
});
|
||||
// 顶部工具栏
|
||||
const onToolClick = (fnName: string) => {
|
||||
emit('tool', fnName);
|
||||
};
|
||||
return {
|
||||
setToolTitle,
|
||||
onToolClick,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.workflow-tool {
|
||||
height: 35px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid var(--el-border-color-light, #ebeef5);
|
||||
color: var(--el-text-color-primary);
|
||||
.workflow-tool-right {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
&-icon {
|
||||
padding: 0 10px;
|
||||
cursor: pointer;
|
||||
color: var(--next-bg-topBarColor);
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
i {
|
||||
display: inline-block;
|
||||
animation: logoAnimation 0.3s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
693
src/views/pages/workflow/index.vue
Normal file
693
src/views/pages/workflow/index.vue
Normal file
@@ -0,0 +1,693 @@
|
||||
<template>
|
||||
<div class="workflow-container">
|
||||
<div class="workflow-mask" v-if="isShow"></div>
|
||||
<div class="layout-view-bg-white flex" :style="{ height: `calc(100vh - ${setViewHeight}` }">
|
||||
<div class="workflow">
|
||||
<!-- 顶部工具栏 -->
|
||||
<Tool @tool="onToolClick" />
|
||||
|
||||
<!-- 左侧导航区 -->
|
||||
<div class="workflow-content">
|
||||
<div class="workflow-left">
|
||||
<el-scrollbar>
|
||||
<div
|
||||
ref="leftNavRefs"
|
||||
v-for="(val, key) in leftNavList"
|
||||
:key="val.id"
|
||||
:style="{ height: val.isOpen ? 'auto' : '50px', overflow: 'hidden' }"
|
||||
class="workflow-left-id"
|
||||
>
|
||||
<div class="workflow-left-title" @click="onTitleClick(val)">
|
||||
<span>{{ val.title }}</span>
|
||||
<SvgIcon :name="val.isOpen ? 'ele-ArrowDown' : 'ele-ArrowRight'" />
|
||||
</div>
|
||||
<div class="workflow-left-item" v-for="(v, k) in val.children" :key="k" :data-name="v.name" :data-icon="v.icon" :data-id="v.id">
|
||||
<div class="workflow-left-item-icon">
|
||||
<SvgIcon :name="v.icon" class="workflow-icon-drag" />
|
||||
<div class="font10 pl5 name">{{ v.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
|
||||
<!-- 右侧绘画区 -->
|
||||
<div class="workflow-right" ref="workflowRightRef">
|
||||
<div
|
||||
v-for="(v, k) in jsplumbData.nodeList"
|
||||
:key="v.nodeId"
|
||||
:id="v.nodeId"
|
||||
:data-node-id="v.nodeId"
|
||||
:class="v.class"
|
||||
:style="{ left: v.left, top: v.top }"
|
||||
@click="onItemCloneClick(k)"
|
||||
@contextmenu.prevent="onContextmenu(v, k, $event)"
|
||||
>
|
||||
<div class="workflow-right-box" :class="{ 'workflow-right-active': jsPlumbNodeIndex === k }">
|
||||
<div class="workflow-left-item-icon">
|
||||
<SvgIcon :name="v.icon" class="workflow-icon-drag" />
|
||||
<div class="font10 pl5 name">{{ v.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 节点右键菜单 -->
|
||||
<Contextmenu :dropdown="dropdownNode" ref="contextmenuNodeRef" @current="onCurrentNodeClick" />
|
||||
<!-- 线右键菜单 -->
|
||||
<Contextmenu :dropdown="dropdownLine" ref="contextmenuLineRef" @current="onCurrentLineClick" />
|
||||
<!-- 抽屉表单、线 -->
|
||||
<Drawer ref="drawerRef" @label="setLineLabel" @node="setNodeContent" />
|
||||
|
||||
<!-- 顶部工具栏-帮助弹窗 -->
|
||||
<Help ref="helpRef" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, toRefs, reactive, computed, onMounted, onUnmounted, nextTick, ref } from 'vue';
|
||||
import { ElMessage, ElMessageBox } from 'element-plus';
|
||||
import { jsPlumb } from 'jsplumb';
|
||||
import Sortable from 'sortablejs';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useThemeConfig } from '/@/stores/themeConfig';
|
||||
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
|
||||
import Tool from './component/tool/index.vue';
|
||||
import Help from './component/tool/help.vue';
|
||||
import Contextmenu from './component/contextmenu/index.vue';
|
||||
import Drawer from './component/drawer/index.vue';
|
||||
import commonFunction from '/@/utils/commonFunction';
|
||||
import { leftNavList } from './js/mock';
|
||||
import { jsplumbDefaults, jsplumbMakeSource, jsplumbMakeTarget, jsplumbConnect } from './js/config';
|
||||
|
||||
// 定义接口来定义对象的类型
|
||||
interface NodeListState {
|
||||
id: string | number;
|
||||
nodeId: string | undefined;
|
||||
class: HTMLElement | string;
|
||||
left: number | string;
|
||||
top: number | string;
|
||||
icon: string;
|
||||
name: string;
|
||||
}
|
||||
interface LineListState {
|
||||
sourceId: string;
|
||||
targetId: string;
|
||||
label: string;
|
||||
}
|
||||
interface XyState {
|
||||
x: string | number;
|
||||
y: string | number;
|
||||
}
|
||||
interface WorkflowState {
|
||||
workflowRightRef: HTMLDivElement | null;
|
||||
leftNavRefs: any[];
|
||||
leftNavList: any[];
|
||||
dropdownNode: XyState;
|
||||
dropdownLine: XyState;
|
||||
isShow: boolean;
|
||||
jsPlumb: any;
|
||||
jsPlumbNodeIndex: null | number;
|
||||
jsplumbDefaults: any;
|
||||
jsplumbMakeSource: any;
|
||||
jsplumbMakeTarget: any;
|
||||
jsplumbConnect: any;
|
||||
jsplumbData: {
|
||||
nodeList: Array<NodeListState>;
|
||||
lineList: Array<LineListState>;
|
||||
};
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'pagesWorkflow',
|
||||
components: { Tool, Contextmenu, Drawer, Help },
|
||||
setup() {
|
||||
const contextmenuNodeRef = ref();
|
||||
const contextmenuLineRef = ref();
|
||||
const drawerRef = ref();
|
||||
const helpRef = ref();
|
||||
const stores = useTagsViewRoutes();
|
||||
const storesThemeConfig = useThemeConfig();
|
||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||
const { isTagsViewCurrenFull } = storeToRefs(stores);
|
||||
const { copyText } = commonFunction();
|
||||
const state = reactive<WorkflowState>({
|
||||
workflowRightRef: null as HTMLDivElement | null,
|
||||
leftNavRefs: [],
|
||||
leftNavList: [],
|
||||
dropdownNode: { x: '', y: '' },
|
||||
dropdownLine: { x: '', y: '' },
|
||||
isShow: false,
|
||||
jsPlumb: null,
|
||||
jsPlumbNodeIndex: null,
|
||||
jsplumbDefaults,
|
||||
jsplumbMakeSource,
|
||||
jsplumbMakeTarget,
|
||||
jsplumbConnect,
|
||||
jsplumbData: {
|
||||
nodeList: [],
|
||||
lineList: [],
|
||||
},
|
||||
});
|
||||
// 设置 view 的高度
|
||||
const setViewHeight = computed(() => {
|
||||
let { isTagsview } = themeConfig.value;
|
||||
if (isTagsViewCurrenFull.value) {
|
||||
return `30px`;
|
||||
} else {
|
||||
if (isTagsview) return `114px`;
|
||||
else return `80px`;
|
||||
}
|
||||
});
|
||||
// 设置 宽度小于 768，不支持操
|
||||
const setClientWidth = () => {
|
||||
const clientWidth = document.body.clientWidth;
|
||||
clientWidth < 768 ? (state.isShow = true) : (state.isShow = false);
|
||||
};
|
||||
// 左侧导航-数据初始化
|
||||
const initLeftNavList = () => {
|
||||
state.leftNavList = leftNavList;
|
||||
state.jsplumbData = {
|
||||
nodeList: [
|
||||
{ nodeId: 'huej738hbji', left: '148px', top: '93px', class: 'workflow-right-clone', icon: 'iconfont icon-gongju', name: '引擎', id: '11' },
|
||||
{
|
||||
nodeId: '52kcszzyxrd',
|
||||
left: '458px',
|
||||
top: '203px',
|
||||
class: 'workflow-right-clone',
|
||||
icon: 'iconfont icon-shouye_dongtaihui',
|
||||
name: '模版',
|
||||
id: '12',
|
||||
},
|
||||
{
|
||||
nodeId: 'nltskl6k4me',
|
||||
left: '164px',
|
||||
top: '350px',
|
||||
class: 'workflow-right-clone',
|
||||
icon: 'iconfont icon-zhongduancanshuchaxun',
|
||||
name: '名称',
|
||||
id: '13',
|
||||
},
|
||||
],
|
||||
lineList: [
|
||||
{ sourceId: 'huej738hbji', targetId: '52kcszzyxrd', label: '传送' },
|
||||
{ sourceId: 'huej738hbji', targetId: 'nltskl6k4me', label: '' },
|
||||
],
|
||||
};
|
||||
};
|
||||
// 左侧导航-初始化拖动
|
||||
const initSortable = () => {
|
||||
state.leftNavRefs.forEach((v) => {
|
||||
Sortable.create(v as HTMLDivElement, {
|
||||
group: {
|
||||
name: 'vue-next-admin-1',
|
||||
pull: 'clone',
|
||||
put: false,
|
||||
},
|
||||
animation: 0,
|
||||
sort: false,
|
||||
draggable: '.workflow-left-item',
|
||||
forceFallback: true,
|
||||
onEnd: function (evt: any) {
|
||||
const { name, icon, id } = evt.clone.dataset;
|
||||
const { layerX, layerY, clientX, clientY } = evt.originalEvent;
|
||||
const el = state.workflowRightRef!;
|
||||
const { x, y, width, height } = el.getBoundingClientRect();
|
||||
if (clientX < x || clientX > width + x || clientY < y || y > y + height) {
|
||||
ElMessage.warning('请把节点拖入到画布中');
|
||||
} else {
|
||||
// 节点id（唯一）
|
||||
const nodeId = Math.random().toString(36).substr(2, 12);
|
||||
// 处理节点数据
|
||||
const node = {
|
||||
nodeId,
|
||||
left: `${layerX - 40}px`,
|
||||
top: `${layerY - 15}px`,
|
||||
class: 'workflow-right-clone',
|
||||
name,
|
||||
icon,
|
||||
id,
|
||||
};
|
||||
// 右侧视图内容数组
|
||||
state.jsplumbData.nodeList.push(node);
|
||||
// 元素加载完毕时
|
||||
nextTick(() => {
|
||||
// 整个节点作为source或者target
|
||||
state.jsPlumb.makeSource(nodeId, state.jsplumbMakeSource);
|
||||
// // 整个节点作为source或者target
|
||||
state.jsPlumb.makeTarget(nodeId, state.jsplumbMakeTarget, jsplumbConnect);
|
||||
// 设置节点可以拖拽（此处为id值，非class）
|
||||
state.jsPlumb.draggable(nodeId, {
|
||||
containment: 'parent',
|
||||
stop: (el: any) => {
|
||||
state.jsplumbData.nodeList.forEach((v) => {
|
||||
if (v.nodeId === el.el.id) {
|
||||
// 节点x, y重新赋值，防止再次从左侧导航中拖拽节点时，x, y恢复默认
|
||||
v.left = `${el.pos[0]}px`;
|
||||
v.top = `${el.pos[1]}px`;
|
||||
}
|
||||
});
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
});
|
||||
};
|
||||
// 初始化 jsPlumb
|
||||
const initJsPlumb = () => {
|
||||
(<any>jsPlumb).ready(() => {
|
||||
state.jsPlumb = (<any>jsPlumb).getInstance({
|
||||
detachable: false,
|
||||
Container: 'workflow-right',
|
||||
});
|
||||
state.jsPlumb.fire('jsPlumbDemoLoaded', state.jsPlumb);
|
||||
// 导入默认配置
|
||||
state.jsPlumb.importDefaults(state.jsplumbDefaults);
|
||||
// 会使整个jsPlumb立即重绘。
|
||||
state.jsPlumb.setSuspendDrawing(false, true);
|
||||
// 初始化节点、线的链接
|
||||
initJsPlumbConnection();
|
||||
// 点击线弹出右键菜单
|
||||
state.jsPlumb.bind('contextmenu', (conn: any, originalEvent: MouseEvent) => {
|
||||
originalEvent.preventDefault();
|
||||
const { sourceId, targetId } = conn;
|
||||
const { clientX, clientY } = originalEvent;
|
||||
state.dropdownLine.x = clientX;
|
||||
state.dropdownLine.y = clientY;
|
||||
const v: any = state.jsplumbData.nodeList.find((v) => v.nodeId === targetId);
|
||||
const line: any = state.jsplumbData.lineList.find((v) => v.sourceId === sourceId && v.targetId === targetId);
|
||||
v.type = 'line';
|
||||
v.label = line.label;
|
||||
contextmenuLineRef.value.openContextmenu(v, conn);
|
||||
});
|
||||
// 连线之前
|
||||
state.jsPlumb.bind('beforeDrop', (conn: any) => {
|
||||
const { sourceId, targetId } = conn;
|
||||
const item = state.jsplumbData.lineList.find((v) => v.sourceId === sourceId && v.targetId === targetId);
|
||||
if (item) {
|
||||
ElMessage.warning('关系已存在，不可重复连接');
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
});
|
||||
// 连线时
|
||||
state.jsPlumb.bind('connection', (conn: any) => {
|
||||
const { sourceId, targetId } = conn;
|
||||
state.jsplumbData.lineList.push({
|
||||
sourceId,
|
||||
targetId,
|
||||
label: '',
|
||||
});
|
||||
});
|
||||
// 删除连线时回调函数
|
||||
state.jsPlumb.bind('connectionDetached', (conn: any) => {
|
||||
const { sourceId, targetId } = conn;
|
||||
state.jsplumbData.lineList = state.jsplumbData.lineList.filter((line) => {
|
||||
if (line.sourceId == sourceId && line.targetId == targetId) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
});
|
||||
});
|
||||
};
|
||||
// 初始化节点、线的链接
|
||||
const initJsPlumbConnection = () => {
|
||||
// 节点
|
||||
state.jsplumbData.nodeList.forEach((v) => {
|
||||
// 整个节点作为source或者target
|
||||
state.jsPlumb.makeSource(v.nodeId, state.jsplumbMakeSource);
|
||||
// 整个节点作为source或者target
|
||||
state.jsPlumb.makeTarget(v.nodeId, state.jsplumbMakeTarget, jsplumbConnect);
|
||||
// 设置节点可以拖拽（此处为id值，非class）
|
||||
state.jsPlumb.draggable(v.nodeId, {
|
||||
containment: 'parent',
|
||||
stop: (el: any) => {
|
||||
state.jsplumbData.nodeList.forEach((v) => {
|
||||
if (v.nodeId === el.el.id) {
|
||||
// 节点x, y重新赋值，防止再次从左侧导航中拖拽节点时，x, y恢复默认
|
||||
v.left = `${el.pos[0]}px`;
|
||||
v.top = `${el.pos[1]}px`;
|
||||
}
|
||||
});
|
||||
},
|
||||
});
|
||||
});
|
||||
// 线
|
||||
state.jsplumbData.lineList.forEach((v) => {
|
||||
state.jsPlumb.connect(
|
||||
{
|
||||
source: v.sourceId,
|
||||
target: v.targetId,
|
||||
label: v.label,
|
||||
},
|
||||
state.jsplumbConnect
|
||||
);
|
||||
});
|
||||
};
|
||||
// 左侧导航-菜单标题点击
|
||||
const onTitleClick = (val: any) => {
|
||||
val.isOpen = !val.isOpen;
|
||||
};
|
||||
// 右侧内容区-当前项点击
|
||||
const onItemCloneClick = (k: number) => {
|
||||
state.jsPlumbNodeIndex = k;
|
||||
};
|
||||
// 右侧内容区-当前项右键菜单点击
|
||||
const onContextmenu = (v: any, k: number, e: MouseEvent) => {
|
||||
state.jsPlumbNodeIndex = k;
|
||||
const { clientX, clientY } = e;
|
||||
state.dropdownNode.x = clientX;
|
||||
state.dropdownNode.y = clientY;
|
||||
v.type = 'node';
|
||||
v.label = '';
|
||||
let item: any = {};
|
||||
state.leftNavList.forEach((l) => {
|
||||
if (l.children) if (l.children.find((c: any) => c.id === v.id)) item = l.children.find((c: any) => c.id === v.id);
|
||||
});
|
||||
v.from = item.form;
|
||||
contextmenuNodeRef.value.openContextmenu(v);
|
||||
};
|
||||
// 右侧内容区-当前项右键菜单点击回调(节点)
|
||||
const onCurrentNodeClick = (item: any) => {
|
||||
const { contextMenuClickId, nodeId } = item;
|
||||
if (contextMenuClickId === 0) {
|
||||
const nodeIndex = state.jsplumbData.nodeList.findIndex((item) => item.nodeId === nodeId);
|
||||
state.jsplumbData.nodeList.splice(nodeIndex, 1);
|
||||
state.jsPlumb.removeAllEndpoints(nodeId);
|
||||
state.jsPlumbNodeIndex = null;
|
||||
} else if (contextMenuClickId === 1) {
|
||||
drawerRef.value.open(item);
|
||||
}
|
||||
};
|
||||
// 右侧内容区-当前项右键菜单点击回调(线)
|
||||
const onCurrentLineClick = (item: any, conn: any) => {
|
||||
const { contextMenuClickId } = item;
|
||||
const { endpoints } = conn;
|
||||
const intercourse: any = [];
|
||||
endpoints.forEach((v: any) => {
|
||||
intercourse.push({
|
||||
id: v.element.id,
|
||||
innerText: v.element.innerText,
|
||||
});
|
||||
});
|
||||
item.contact = `${intercourse[0].innerText}(${intercourse[0].id}) => ${intercourse[1].innerText}(${intercourse[1].id})`;
|
||||
if (contextMenuClickId === 0) state.jsPlumb.deleteConnection(conn);
|
||||
else if (contextMenuClickId === 1) drawerRef.value.open(item, conn);
|
||||
};
|
||||
// 设置线的 label
|
||||
const setLineLabel = (obj: any) => {
|
||||
const { sourceId, targetId, label } = obj;
|
||||
const conn = state.jsPlumb.getConnections({
|
||||
source: sourceId,
|
||||
target: targetId,
|
||||
})[0];
|
||||
conn.setLabel(label);
|
||||
if (!label || label === '') {
|
||||
conn.addClass('workflow-right-empty-label');
|
||||
} else {
|
||||
conn.removeClass('workflow-right-empty-label');
|
||||
conn.addClass('workflow-right-label');
|
||||
}
|
||||
state.jsplumbData.lineList.forEach((v) => {
|
||||
if (v.sourceId === sourceId && v.targetId === targetId) v.label = label;
|
||||
});
|
||||
};
|
||||
// 设置节点内容
|
||||
const setNodeContent = (obj: any) => {
|
||||
const { nodeId, name, icon } = obj;
|
||||
// 设置节点 name 与 icon
|
||||
state.jsplumbData.nodeList.forEach((v) => {
|
||||
if (v.nodeId === nodeId) {
|
||||
v.name = name;
|
||||
v.icon = icon;
|
||||
}
|
||||
});
|
||||
// 重绘
|
||||
nextTick(() => {
|
||||
state.jsPlumb.setSuspendDrawing(false, true);
|
||||
});
|
||||
};
|
||||
// 顶部工具栏-当前项点击
|
||||
const onToolClick = (fnName: String) => {
|
||||
switch (fnName) {
|
||||
case 'help':
|
||||
onToolHelp();
|
||||
break;
|
||||
case 'download':
|
||||
onToolDownload();
|
||||
break;
|
||||
case 'submit':
|
||||
onToolSubmit();
|
||||
break;
|
||||
case 'copy':
|
||||
onToolCopy();
|
||||
break;
|
||||
case 'del':
|
||||
onToolDel();
|
||||
break;
|
||||
case 'fullscreen':
|
||||
onToolFullscreen();
|
||||
break;
|
||||
}
|
||||
};
|
||||
// 顶部工具栏-帮助
|
||||
const onToolHelp = () => {
|
||||
nextTick(() => {
|
||||
helpRef.value.open();
|
||||
});
|
||||
};
|
||||
// 顶部工具栏-下载
|
||||
const onToolDownload = () => {
|
||||
const { globalTitle } = themeConfig.value;
|
||||
const href = 'data:text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(state.jsplumbData, null, '\t'));
|
||||
const aLink = document.createElement('a');
|
||||
aLink.setAttribute('href', href);
|
||||
aLink.setAttribute('download', `${globalTitle}工作流.json`);
|
||||
aLink.click();
|
||||
aLink.remove();
|
||||
ElMessage.success('下载成功');
|
||||
};
|
||||
// 顶部工具栏-提交
|
||||
const onToolSubmit = () => {
|
||||
// console.log(state.jsplumbData);
|
||||
ElMessage.success('数据提交成功');
|
||||
};
|
||||
// 顶部工具栏-复制
|
||||
const onToolCopy = () => {
|
||||
copyText(JSON.stringify(state.jsplumbData));
|
||||
};
|
||||
// 顶部工具栏-删除
|
||||
const onToolDel = () => {
|
||||
ElMessageBox.confirm('此操作将清空画布，是否继续？', '提示', {
|
||||
confirmButtonText: '清空',
|
||||
cancelButtonText: '取消',
|
||||
})
|
||||
.then(() => {
|
||||
state.jsplumbData.nodeList.forEach((v) => {
|
||||
state.jsPlumb.removeAllEndpoints(v.nodeId);
|
||||
});
|
||||
nextTick(() => {
|
||||
state.jsplumbData = {
|
||||
nodeList: [],
|
||||
lineList: [],
|
||||
};
|
||||
ElMessage.success('清空画布成功');
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
// 顶部工具栏-全屏
|
||||
const onToolFullscreen = () => {
|
||||
stores.setCurrenFullscreen(true);
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(async () => {
|
||||
await initLeftNavList();
|
||||
initSortable();
|
||||
initJsPlumb();
|
||||
setClientWidth();
|
||||
window.addEventListener('resize', setClientWidth);
|
||||
});
|
||||
// 页面卸载时
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', setClientWidth);
|
||||
});
|
||||
return {
|
||||
setViewHeight,
|
||||
setClientWidth,
|
||||
setLineLabel,
|
||||
setNodeContent,
|
||||
onTitleClick,
|
||||
onItemCloneClick,
|
||||
onContextmenu,
|
||||
onCurrentNodeClick,
|
||||
onCurrentLineClick,
|
||||
contextmenuNodeRef,
|
||||
contextmenuLineRef,
|
||||
drawerRef,
|
||||
helpRef,
|
||||
onToolClick,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.workflow-container {
|
||||
position: relative;
|
||||
.workflow {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
.workflow-content {
|
||||
display: flex;
|
||||
height: calc(100% - 35px);
|
||||
.workflow-left {
|
||||
width: 220px;
|
||||
height: 100%;
|
||||
border-right: 1px solid var(--el-border-color-light, #ebeef5);
|
||||
:deep(.el-collapse-item__content) {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.workflow-left-title {
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
border-top: 1px solid var(--el-border-color-light, #ebeef5);
|
||||
color: var(--el-text-color-primary);
|
||||
cursor: default;
|
||||
span {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.workflow-left-item {
|
||||
display: inline-block;
|
||||
width: calc(50% - 15px);
|
||||
position: relative;
|
||||
cursor: move;
|
||||
margin: 0 0 10px 10px;
|
||||
.workflow-left-item-icon {
|
||||
height: 35px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: all 0.3s ease;
|
||||
padding: 5px 10px;
|
||||
border: 1px dashed transparent;
|
||||
background: var(--next-bg-color);
|
||||
border-radius: 3px;
|
||||
i,
|
||||
.name {
|
||||
color: var(--el-text-color-secondary);
|
||||
transition: all 0.3s ease;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
&:hover {
|
||||
transition: all 0.3s ease;
|
||||
border: 1px dashed var(--el-color-primary);
|
||||
background: var(--el-color-primary-light-9);
|
||||
border-radius: 5px;
|
||||
i,
|
||||
.name {
|
||||
transition: all 0.3s ease;
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
& .workflow-left-id:first-of-type {
|
||||
.workflow-left-title {
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.workflow-right {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
background-image: linear-gradient(90deg, rgb(156 214 255 / 15%) 10%, rgba(0, 0, 0, 0) 10%),
|
||||
linear-gradient(rgb(156 214 255 / 15%) 10%, rgba(0, 0, 0, 0) 10%);
|
||||
background-size: 10px 10px;
|
||||
.workflow-right-clone {
|
||||
position: absolute;
|
||||
.workflow-right-box {
|
||||
height: 35px;
|
||||
align-items: center;
|
||||
color: var(--el-text-color-secondary);
|
||||
padding: 0 10px;
|
||||
border-radius: 3px;
|
||||
cursor: move;
|
||||
transition: all 0.3s ease;
|
||||
min-width: 94.5px;
|
||||
background: var(--el-color-white);
|
||||
border: 1px solid var(--el-border-color-light, #ebeef5);
|
||||
.workflow-left-item-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 35px;
|
||||
}
|
||||
&:hover {
|
||||
border: 1px dashed var(--el-color-primary);
|
||||
background: var(--el-color-primary-light-9);
|
||||
transition: all 0.3s ease;
|
||||
color: var(--el-color-primary);
|
||||
i {
|
||||
cursor: Crosshair;
|
||||
}
|
||||
}
|
||||
}
|
||||
.workflow-right-active {
|
||||
border: 1px dashed var(--el-color-primary);
|
||||
background: var(--el-color-primary-light-9);
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
:deep(.jtk-overlay):not(.aLabel) {
|
||||
padding: 4px 10px;
|
||||
border: 1px solid var(--el-border-color-light, #ebeef5) !important;
|
||||
color: var(--el-text-color-secondary) !important;
|
||||
background: var(--el-color-white) !important;
|
||||
border-radius: 3px;
|
||||
font-size: 10px;
|
||||
}
|
||||
:deep(.jtk-overlay.workflow-right-empty-label) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.workflow-mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
&::after {
|
||||
content: '手机版不支持 jsPlumb 操作';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
color: #666666;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
99
src/views/pages/workflow/js/config.ts
Normal file
99
src/views/pages/workflow/js/config.ts
Normal file
@@ -0,0 +1,99 @@
|
||||
// jsplumb 默认配置
|
||||
export const jsplumbDefaults = {
|
||||
// 多个锚点 [源锚点，目标锚点]
|
||||
Anchors: [
|
||||
'Top',
|
||||
'TopCenter',
|
||||
'TopRight',
|
||||
'TopLeft',
|
||||
'Right',
|
||||
'RightMiddle',
|
||||
'Bottom',
|
||||
'BottomCenter',
|
||||
'BottomRight',
|
||||
'BottomLeft',
|
||||
'Left',
|
||||
'LeftMiddle',
|
||||
],
|
||||
// 连线的容器id
|
||||
Container: 'workflow-right',
|
||||
// 设置链接线的形状，如直线或者曲线之类的。anchor可以去设置锚点的位置。可选值"<Bezier|Flowchart|StateMachine|Straight>"
|
||||
Connector: ['Bezier', { curviness: 100 }],
|
||||
// 节点是否可以用鼠标拖动使其断开，默认为true。即用鼠标链接上的连线，也可以使用鼠标拖动让其断开。设置成false，可以让其拖动也不会自动断开
|
||||
ConnectionsDetachable: false,
|
||||
// 删除线的时候节点不删除
|
||||
DeleteEndpointsOnDetach: false,
|
||||
// 每当添加或以其他方式创建 Endpoint 并且 jsPlumb 尚未给出任何明确的 Endpoint 定义时将使用
|
||||
Endpoint: ['Blank', { Overlays: '' }],
|
||||
// 连接中源和目标端点的默认外观
|
||||
EndpointStyle: { fill: '#1879ffa1', outlineWidth: 1 },
|
||||
// jsPlumb 的内部日志记录是否打开
|
||||
LogEnabled: true,
|
||||
// 连接器的默认外观
|
||||
PaintStyle: {
|
||||
stroke: '#E0E3E7',
|
||||
strokeWidth: 1,
|
||||
outlineStroke: 'transparent',
|
||||
outlineWidth: 10,
|
||||
},
|
||||
// 用于配置任何可拖动元素的默认选项jsPlumb.draggable
|
||||
DragOptions: { cursor: 'pointer', zIndex: 2000 },
|
||||
// 添加到连接器和端点的默认叠加层。已弃用：从 4.x 开始，将不支持此功能。并非所有叠加层都可以连接到连接器和端点。
|
||||
Overlays: [
|
||||
[
|
||||
'Arrow',
|
||||
{
|
||||
width: 10, // 箭头尾部的宽度
|
||||
length: 8, // 从箭头的尾部到头部的距离
|
||||
location: 1, // 位置，建议使用0～1之间
|
||||
direction: 1, // 方向，默认值为1（表示向前），可选-1（表示向后）
|
||||
foldback: 0.623, // 折回，也就是尾翼的角度，默认0.623，当为1时，为正三角
|
||||
},
|
||||
],
|
||||
[
|
||||
'Label',
|
||||
{
|
||||
label: '',
|
||||
location: 0.5,
|
||||
cssClass: 'aLabel',
|
||||
},
|
||||
],
|
||||
],
|
||||
// 默认渲染模式 svg、canvas
|
||||
RenderMode: 'svg',
|
||||
// 悬停状态下连接的默认外观
|
||||
HoverPaintStyle: { stroke: '#b0b2b5', strokeWidth: 1 },
|
||||
// 悬停状态下端点的默认外观
|
||||
EndpointHoverStyle: { fill: 'red' },
|
||||
// 端点和连接的默认范围。范围提供了对哪些端点可以连接到哪些其他端点的基本控制
|
||||
Scope: 'jsPlumb_DefaultScope',
|
||||
};
|
||||
|
||||
// 整个节点作为source或者target
|
||||
export const jsplumbMakeSource = {
|
||||
// 设置可以拖拽的类名，只要鼠标移动到该类名上的DOM，就可以拖拽连线
|
||||
filter: '.workflow-icon-drag',
|
||||
filterExclude: false,
|
||||
anchor: 'Continuous',
|
||||
// 是否允许自己连接自己
|
||||
allowLoopback: true,
|
||||
maxConnections: -1,
|
||||
};
|
||||
|
||||
// 整个节点作为source或者target
|
||||
export const jsplumbMakeTarget = {
|
||||
filter: '.workflow-icon-drag',
|
||||
filterExclude: false,
|
||||
// 是否允许自己连接自己
|
||||
anchor: 'Continuous',
|
||||
allowLoopback: true,
|
||||
dropOptions: { hoverClass: 'ef-drop-hover' },
|
||||
};
|
||||
|
||||
// 连线参数
|
||||
export const jsplumbConnect = {
|
||||
isSource: true,
|
||||
isTarget: true,
|
||||
// 动态锚点、提供了4个方向 Continuous、AutoDefault
|
||||
anchor: 'Continuous',
|
||||
};
|
||||
262
src/views/pages/workflow/js/mock.ts
Normal file
262
src/views/pages/workflow/js/mock.ts
Normal file
@@ -0,0 +1,262 @@
|
||||
// 左侧菜单导航数据
|
||||
export const leftNavList = [
|
||||
{
|
||||
title: '工作流',
|
||||
icon: 'iconfont icon-shouye',
|
||||
isOpen: true,
|
||||
id: '1',
|
||||
children: [
|
||||
{
|
||||
icon: 'iconfont icon-gongju',
|
||||
name: '引擎',
|
||||
id: '11',
|
||||
form: [
|
||||
{
|
||||
type: 'input',
|
||||
label: '客户姓名',
|
||||
prop: 'name',
|
||||
placeholder: '请输入客户姓名',
|
||||
required: true,
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
label: '性别',
|
||||
prop: 'sex',
|
||||
placeholder: '请选择性别',
|
||||
required: true,
|
||||
disabled: false,
|
||||
options: [
|
||||
{
|
||||
value: '0',
|
||||
label: '女',
|
||||
},
|
||||
{
|
||||
value: '1',
|
||||
label: '男',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
label: '员工编号',
|
||||
prop: 'number',
|
||||
placeholder: '请输入员工编号',
|
||||
required: true,
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
label: '办公电话',
|
||||
prop: 'mobile',
|
||||
placeholder: '请输入办公电话',
|
||||
required: true,
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
label: '权限分配',
|
||||
prop: 'role',
|
||||
placeholder: '请选择性别',
|
||||
required: true,
|
||||
disabled: false,
|
||||
options: [
|
||||
{
|
||||
value: '0',
|
||||
label: '编辑权限',
|
||||
},
|
||||
{
|
||||
value: '1',
|
||||
label: '删除权限',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'checkbox',
|
||||
label: '模块选择',
|
||||
prop: 'module',
|
||||
placeholder: '请选择模块',
|
||||
required: true,
|
||||
disabled: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: 'iconfont icon-shouye_dongtaihui',
|
||||
name: '模版',
|
||||
id: '12',
|
||||
form: [
|
||||
{
|
||||
type: 'input',
|
||||
label: '等级',
|
||||
prop: 'grade',
|
||||
placeholder: '请输入等级',
|
||||
required: true,
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
label: '登记密码',
|
||||
prop: 'password',
|
||||
placeholder: '请输入登记密码',
|
||||
required: true,
|
||||
disabled: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: 'iconfont icon-zhongduancanshuchaxun',
|
||||
name: '名称',
|
||||
id: '13',
|
||||
form: [
|
||||
{
|
||||
type: 'input',
|
||||
label: '数据表',
|
||||
prop: 'dataSheet',
|
||||
placeholder: '请输入数据表',
|
||||
required: true,
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
label: '字段配置',
|
||||
prop: 'field',
|
||||
placeholder: '请输入字段配置',
|
||||
required: true,
|
||||
disabled: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: 'iconfont icon-zhongduancanshu',
|
||||
name: '版本',
|
||||
id: '14',
|
||||
form: [
|
||||
{
|
||||
type: 'input',
|
||||
label: '发布模板',
|
||||
prop: 'publish',
|
||||
placeholder: '请输入发布模板',
|
||||
required: true,
|
||||
disabled: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: 'iconfont icon-bolangnengshiyanchang',
|
||||
name: '建模',
|
||||
id: '15',
|
||||
form: [
|
||||
{
|
||||
type: 'input',
|
||||
label: '内容模板',
|
||||
prop: 'content',
|
||||
placeholder: '请输入内容模板',
|
||||
required: true,
|
||||
disabled: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: 'iconfont icon-xingqiu',
|
||||
name: '节点',
|
||||
id: '16',
|
||||
form: [
|
||||
{
|
||||
type: 'input',
|
||||
label: '活动名称6',
|
||||
prop: 'name16',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '流程',
|
||||
isOpen: true,
|
||||
icon: 'iconfont icon-caijian',
|
||||
id: '2',
|
||||
children: [
|
||||
{
|
||||
icon: 'iconfont icon-fuwenben',
|
||||
name: '实例',
|
||||
id: '21',
|
||||
form: [
|
||||
{
|
||||
type: 'input',
|
||||
label: '活动名称7',
|
||||
prop: 'name21',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: 'iconfont icon-fuwenbenkuang',
|
||||
name: '轨迹',
|
||||
id: '22',
|
||||
form: [
|
||||
{
|
||||
type: 'input',
|
||||
label: '活动名称8',
|
||||
prop: 'name22',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: 'iconfont icon-shangchuan',
|
||||
name: '数据',
|
||||
id: '23',
|
||||
form: [
|
||||
{
|
||||
type: 'input',
|
||||
label: '活动名称9',
|
||||
prop: 'name23',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '任务',
|
||||
isOpen: true,
|
||||
icon: 'iconfont icon-shuju',
|
||||
id: '3',
|
||||
children: [
|
||||
{
|
||||
icon: 'iconfont icon-icon-',
|
||||
name: '参与人',
|
||||
id: '31',
|
||||
form: [
|
||||
{
|
||||
type: 'input',
|
||||
label: '活动名称1',
|
||||
prop: 'name31',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: 'iconfont icon-gerenzhongxin',
|
||||
name: '执行人',
|
||||
id: '32',
|
||||
form: [
|
||||
{
|
||||
type: 'input',
|
||||
label: '活动名称2',
|
||||
prop: 'name32',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: 'iconfont icon-fangkuang',
|
||||
name: '工单',
|
||||
id: '33',
|
||||
form: [
|
||||
{
|
||||
type: 'input',
|
||||
label: '活动名称3',
|
||||
prop: 'name33',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
Reference in New Issue
Block a user