修改
This commit is contained in:
‘937886381’
15
src/views/ai/chat/index/index.vue
Normal file
15
src/views/ai/chat/index/index.vue
Normal file
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert title="AI 聊天对话" url="https://doc.iocoder.cn/ai/chat/" />
|
||||
|
||||
<el-link type="danger" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3">
|
||||
该功能支持 Vue3 + element-plus 版本！
|
||||
</el-link>
|
||||
<br />
|
||||
<el-text>
|
||||
可参考 https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/ai/chat/index/index.vue 代码，pull request 贡献给我们！
|
||||
</el-text>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
</script>
|
||||
15
src/views/ai/chat/manager/index.vue
Normal file
15
src/views/ai/chat/manager/index.vue
Normal file
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert title="AI 聊天对话" url="https://doc.iocoder.cn/ai/chat/" />
|
||||
|
||||
<el-link type="danger" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3">
|
||||
该功能支持 Vue3 + element-plus 版本！
|
||||
</el-link>
|
||||
<br />
|
||||
<el-text>
|
||||
可参考 https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/ai/chat/manager/index.vue 代码，pull request 贡献给我们！
|
||||
</el-text>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
</script>
|
||||
15
src/views/ai/image/index/index.vue
Normal file
15
src/views/ai/image/index/index.vue
Normal file
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert title="AI 绘画创作" url="https://doc.iocoder.cn/ai/image/" />
|
||||
|
||||
<el-link type="danger" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3">
|
||||
该功能支持 Vue3 + element-plus 版本！
|
||||
</el-link>
|
||||
<br />
|
||||
<el-text>
|
||||
可参考 https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/ai/image/index/index.vue 代码，pull request 贡献给我们！
|
||||
</el-text>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
</script>
|
||||
15
src/views/ai/image/manager/index.vue
Normal file
15
src/views/ai/image/manager/index.vue
Normal file
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert title="AI 聊天对话" url="https://doc.iocoder.cn/ai/image/" />
|
||||
|
||||
<el-link type="danger" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3">
|
||||
该功能支持 Vue3 + element-plus 版本！
|
||||
</el-link>
|
||||
<br />
|
||||
<el-text>
|
||||
可参考 https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/ai/image/manager/index.vue 代码，pull request 贡献给我们！
|
||||
</el-text>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
</script>
|
||||
15
src/views/ai/image/square/index.vue
Normal file
15
src/views/ai/image/square/index.vue
Normal file
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert title="AI 聊天对话" url="https://doc.iocoder.cn/ai/image/" />
|
||||
|
||||
<el-link type="danger" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3">
|
||||
该功能支持 Vue3 + element-plus 版本！
|
||||
</el-link>
|
||||
<br />
|
||||
<el-text>
|
||||
可参考 https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/ai/image/square/index.vue 代码，pull request 贡献给我们！
|
||||
</el-text>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
</script>
|
||||
15
src/views/ai/model/apiKey/index.vue
Normal file
15
src/views/ai/model/apiKey/index.vue
Normal file
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert title="AI 聊天对话" url="https://doc.iocoder.cn/ai/chat/" />
|
||||
|
||||
<el-link type="danger" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3">
|
||||
该功能支持 Vue3 + element-plus 版本！
|
||||
</el-link>
|
||||
<br />
|
||||
<el-text>
|
||||
可参考 https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/ai/model/apiKey/index.vue 代码，pull request 贡献给我们！
|
||||
</el-text>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
</script>
|
||||
15
src/views/ai/model/chatModel/index.vue
Normal file
15
src/views/ai/model/chatModel/index.vue
Normal file
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert title="AI 聊天对话" url="https://doc.iocoder.cn/ai/chat/" />
|
||||
|
||||
<el-link type="danger" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3">
|
||||
该功能支持 Vue3 + element-plus 版本！
|
||||
</el-link>
|
||||
<br />
|
||||
<el-text>
|
||||
可参考 https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/ai/model/chatModel/index.vue 代码，pull request 贡献给我们！
|
||||
</el-text>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
</script>
|
||||
15
src/views/ai/model/chatRole/index.vue
Normal file
15
src/views/ai/model/chatRole/index.vue
Normal file
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert title="AI 聊天对话" url="https://doc.iocoder.cn/ai/chat/" />
|
||||
|
||||
<el-link type="danger" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3">
|
||||
该功能支持 Vue3 + element-plus 版本！
|
||||
</el-link>
|
||||
<br />
|
||||
<el-text>
|
||||
可参考 https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/ai/model/chatRole/index.vue 代码，pull request 贡献给我们！
|
||||
</el-text>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
</script>
|
||||
15
src/views/ai/music/index/index.vue
Normal file
15
src/views/ai/music/index/index.vue
Normal file
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert title="AI 音乐创作" url="https://doc.iocoder.cn/ai/music/" />
|
||||
|
||||
<el-link type="danger" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3">
|
||||
该功能支持 Vue3 + element-plus 版本！
|
||||
</el-link>
|
||||
<br />
|
||||
<el-text>
|
||||
可参考 https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/ai/music/index/index.vue 代码，pull request 贡献给我们！
|
||||
</el-text>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
</script>
|
||||
15
src/views/ai/music/manager/index.vue
Normal file
15
src/views/ai/music/manager/index.vue
Normal file
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert title="AI 音乐创作" url="https://doc.iocoder.cn/ai/music/" />
|
||||
|
||||
<el-link type="danger" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3">
|
||||
该功能支持 Vue3 + element-plus 版本！
|
||||
</el-link>
|
||||
<br />
|
||||
<el-text>
|
||||
可参考 https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/ai/music/manager/index.vue 代码，pull request 贡献给我们！
|
||||
</el-text>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
</script>
|
||||
15
src/views/ai/write/index/index.vue
Normal file
15
src/views/ai/write/index/index.vue
Normal file
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert title="AI 写作助手" url="https://doc.iocoder.cn/ai/write/" />
|
||||
|
||||
<el-link type="danger" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3">
|
||||
该功能支持 Vue3 + element-plus 版本！
|
||||
</el-link>
|
||||
<br />
|
||||
<el-text>
|
||||
可参考 https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/ai/write/index/index.vue 代码，pull request 贡献给我们！
|
||||
</el-text>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
</script>
|
||||
15
src/views/ai/write/manager/index.vue
Normal file
15
src/views/ai/write/manager/index.vue
Normal file
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert title="AI 写作助手" url="https://doc.iocoder.cn/ai/write/" />
|
||||
|
||||
<el-link type="danger" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3">
|
||||
该功能支持 Vue3 + element-plus 版本！
|
||||
</el-link>
|
||||
<br />
|
||||
<el-text>
|
||||
可参考 https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/ai/write/mananger/index.vue 代码，pull request 贡献给我们！
|
||||
</el-text>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
</script>
|
||||
15
src/views/bpm/category/index.vue
Normal file
15
src/views/bpm/category/index.vue
Normal file
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert title="工作流手册" url="https://doc.iocoder.cn/bpm/" />
|
||||
|
||||
<el-link type="danger" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3">
|
||||
该功能支持 Vue3 + element-plus 版本！
|
||||
</el-link>
|
||||
<br />
|
||||
<el-text>
|
||||
可参考 https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/categroy/index.vue 代码，pull request 贡献给我们！
|
||||
</el-text>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
</script>
|
||||
174
src/views/bpm/definition/index.vue
Normal file
174
src/views/bpm/definition/index.vue
Normal file
@@ -0,0 +1,174 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert title="工作流" url="https://doc.iocoder.cn/bpm" />
|
||||
|
||||
<!-- 列表 -->
|
||||
<el-table v-loading="loading" :data="list">
|
||||
<el-table-column label="定义编号" align="center" prop="id" width="400" />
|
||||
<el-table-column label="定义名称" align="center" prop="name" width="100">
|
||||
<template v-slot="scope">
|
||||
<el-button type="text" @click="handleBpmnDetail(scope.row)">
|
||||
<span>{{ scope.row.name }}</span>
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="定义分类" align="center" prop="category" width="100">
|
||||
<template v-slot="scope">
|
||||
<dict-tag :type="DICT_TYPE.BPM_MODEL_CATEGORY" :value="scope.row.category" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="表单信息" align="center" prop="formType" width="200">
|
||||
<template v-slot="scope">
|
||||
<el-button v-if="scope.row.formId" type="text" @click="handleFormDetail(scope.row)">
|
||||
<span>{{ scope.row.formName }}</span>
|
||||
</el-button>
|
||||
<el-button v-else-if="scope.row.formCustomCreatePath" type="text" @click="handleFormDetail(scope.row)">
|
||||
<span>{{ scope.row.formCustomCreatePath }}</span>
|
||||
</el-button>
|
||||
<label v-else>暂无表单</label>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="流程版本" align="center" prop="processDefinition.version" width="80">
|
||||
<template v-slot="scope">
|
||||
<el-tag size="medium" v-if="scope.row">v{{ scope.row.version }}</el-tag>
|
||||
<el-tag size="medium" type="warning" v-else>未部署</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" align="center" prop="version" width="80">
|
||||
<template v-slot="scope">
|
||||
<el-tag type="success" v-if="scope.row.suspensionState === 1">激活</el-tag>
|
||||
<el-tag type="warning" v-if="scope.row.suspensionState === 2">挂起</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="部署时间" align="center" prop="deploymentTime" width="180">
|
||||
<template v-slot="scope">
|
||||
<span>{{ parseTime(scope.row.deploymentTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="定义描述" align="center" prop="description" width="300" show-overflow-tooltip />
|
||||
<el-table-column label="操作" align="center" width="150" fixed="right">
|
||||
<template v-slot="scope">
|
||||
<el-button size="mini" type="text" icon="el-icon-s-custom" @click="handleAssignRule(scope.row)"
|
||||
v-hasPermi="['bpm:task-assign-rule:update']">分配规则</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 流程表单配置详情 -->
|
||||
<el-dialog title="表单详情" :visible.sync="detailOpen" width="50%" append-to-body>
|
||||
<parser :key="new Date().getTime()" :form-conf="detailForm" />
|
||||
</el-dialog>
|
||||
|
||||
<!-- 流程模型图的预览 -->
|
||||
<el-dialog title="流程图" :visible.sync="showBpmnOpen" width="80%" append-to-body>
|
||||
<my-process-viewer key="designer" v-model="bpmnXML" v-bind="bpmnControlForm" />
|
||||
</el-dialog>
|
||||
|
||||
<!-- 分页组件 -->
|
||||
<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"/>
|
||||
|
||||
<!-- ========== 流程任务分配规则 ========== -->
|
||||
<taskAssignRuleDialog ref="taskAssignRuleDialog" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getProcessDefinitionBpmnXML, getProcessDefinitionPage} from "@/api/bpm/definition";
|
||||
import {DICT_TYPE, getDictDatas} from "@/utils/dict";
|
||||
import {decodeFields} from "@/utils/formGenerator";
|
||||
import Parser from '@/components/parser/Parser'
|
||||
import taskAssignRuleDialog from "../taskAssignRule/taskAssignRuleDialog";
|
||||
|
||||
export default {
|
||||
name: "BpmProcessDefinition",
|
||||
components: {
|
||||
Parser,
|
||||
taskAssignRuleDialog
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 表格数据
|
||||
list: [],
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNo: 1,
|
||||
pageSize: 10
|
||||
},
|
||||
|
||||
// 流程表单详情
|
||||
detailOpen: false,
|
||||
detailForm: {
|
||||
fields: []
|
||||
},
|
||||
|
||||
// BPMN 数据
|
||||
showBpmnOpen: false,
|
||||
bpmnXML: null,
|
||||
bpmnControlForm: {
|
||||
prefix: "flowable"
|
||||
},
|
||||
|
||||
// 数据字典
|
||||
categoryDictDatas: getDictDatas(DICT_TYPE.BPM_MODEL_CATEGORY),
|
||||
};
|
||||
},
|
||||
created() {
|
||||
const key = this.$route.query && this.$route.query.key
|
||||
if (key) {
|
||||
this.queryParams['key'] = key
|
||||
}
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询流程定义列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
getProcessDefinitionPage(this.queryParams).then(response => {
|
||||
this.list = response.data.list;
|
||||
this.total = response.data.total;
|
||||
this.loading = false;
|
||||
}
|
||||
);
|
||||
},
|
||||
/** 流程表单的详情按钮操作 */
|
||||
handleFormDetail(row) {
|
||||
// 流程表单
|
||||
if (row.formId) {
|
||||
// 设置值
|
||||
this.detailForm = {
|
||||
...JSON.parse(row.formConf),
|
||||
fields: decodeFields(row.formFields)
|
||||
}
|
||||
// 弹窗打开
|
||||
this.detailOpen = true
|
||||
// 业务表单
|
||||
} else if (row.formCustomCreatePath) {
|
||||
this.$router.push({ path: row.formCustomCreatePath});
|
||||
}
|
||||
},
|
||||
/** 流程图的详情按钮操作 */
|
||||
handleBpmnDetail(row) {
|
||||
getProcessDefinitionBpmnXML(row.id).then(response => {
|
||||
this.bpmnXML = response.data
|
||||
// 弹窗打开
|
||||
this.showBpmnOpen = true
|
||||
})
|
||||
},
|
||||
/** 处理任务分配规则列表的按钮操作 */
|
||||
handleAssignRule(row) {
|
||||
this.$refs['taskAssignRuleDialog'].initProcessDefinition(row.id);
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.my-process-designer {
|
||||
height: calc(100vh - 200px);
|
||||
}
|
||||
</style>
|
||||
567
src/views/bpm/form/formEditor.vue
Normal file
567
src/views/bpm/form/formEditor.vue
Normal file
@@ -0,0 +1,567 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="left-board">
|
||||
<div class="logo-wrapper">
|
||||
<div class="logo">流程表单</div>
|
||||
</div>
|
||||
<el-scrollbar class="left-scrollbar">
|
||||
<!-- 左边：表单项 -->
|
||||
<div class="components-list">
|
||||
<div v-for="(item, listIndex) in leftComponents" :key="listIndex">
|
||||
<div class="components-title">
|
||||
<svg-icon icon-class="component" />
|
||||
{{ item.title }}
|
||||
</div>
|
||||
<draggable
|
||||
class="components-draggable"
|
||||
:list="item.list"
|
||||
:group="{ name: 'componentsGroup', pull: 'clone', put: false }"
|
||||
:clone="cloneComponent"
|
||||
draggable=".components-item"
|
||||
:sort="false"
|
||||
@end="onEnd"
|
||||
>
|
||||
<div
|
||||
v-for="(element, index) in item.list"
|
||||
:key="index"
|
||||
class="components-item"
|
||||
@click="addComponent(element)"
|
||||
>
|
||||
<div class="components-body">
|
||||
<svg-icon :icon-class="element.__config__.tagIcon" />
|
||||
{{ element.__config__.label }}
|
||||
</div>
|
||||
</div>
|
||||
</draggable>
|
||||
</div>
|
||||
|
||||
<!-- 左边：动态表单 -->
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="表单名" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入表单名" />
|
||||
</el-form-item>
|
||||
<el-form-item label="开启状态" prop="status">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio v-for="dict in this.getDictDatas(DICT_TYPE.COMMON_STATUS)"
|
||||
:key="dict.value" :label="parseInt(dict.value)">{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input type="textarea" v-model="form.remark" placeholder="请输入备注" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
|
||||
<div class="center-board">
|
||||
<div class="action-bar">
|
||||
<el-button icon="el-icon-check" type="text" @click="save">保存</el-button>
|
||||
<!-- <el-button icon="el-icon-video-play" type="text" @click="run">-->
|
||||
<!-- 运行-->
|
||||
<!-- </el-button>-->
|
||||
<el-button icon="el-icon-view" type="text" @click="showJson">
|
||||
查看json
|
||||
</el-button>
|
||||
<!-- <el-button icon="el-icon-download" type="text" @click="download">-->
|
||||
<!-- 导出vue文件-->
|
||||
<!-- </el-button>-->
|
||||
<!-- <el-button class="copy-btn-main" icon="el-icon-document-copy" type="text" @click="copy">-->
|
||||
<!-- 复制代码-->
|
||||
<!-- </el-button>-->
|
||||
<el-button class="delete-btn" icon="el-icon-delete" type="text" @click="empty">
|
||||
清空
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 中间，表单项 -->
|
||||
<el-scrollbar class="center-scrollbar">
|
||||
<el-row class="center-board-row" :gutter="formConf.gutter">
|
||||
<el-form
|
||||
:size="formConf.size"
|
||||
:label-position="formConf.labelPosition"
|
||||
:disabled="formConf.disabled"
|
||||
:label-width="formConf.labelWidth + 'px'"
|
||||
>
|
||||
<draggable class="drawing-board" :list="drawingList" :animation="340" group="componentsGroup">
|
||||
<draggable-item
|
||||
v-for="(item, index) in drawingList"
|
||||
:key="item.renderKey"
|
||||
:drawing-list="drawingList"
|
||||
:current-item="item"
|
||||
:index="index"
|
||||
:active-id="activeId"
|
||||
:form-conf="formConf"
|
||||
@activeItem="activeFormItem"
|
||||
@copyItem="drawingItemCopy"
|
||||
@deleteItem="drawingItemDelete"
|
||||
/>
|
||||
</draggable>
|
||||
<div v-show="!drawingList.length" class="empty-info">
|
||||
从左侧拖入或点选组件进行表单设计
|
||||
</div>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
|
||||
<!-- 右边：组件属性/表单属性 -->
|
||||
<right-panel
|
||||
:active-data="activeData"
|
||||
:form-conf="formConf"
|
||||
:show-field="!!drawingList.length"
|
||||
@tag-change="tagChange"
|
||||
@fetch-data="fetchData"
|
||||
/>
|
||||
|
||||
<!-- <form-drawer-->
|
||||
<!-- :visible.sync="drawerVisible"-->
|
||||
<!-- :form-data="formData"-->
|
||||
<!-- size="100%"-->
|
||||
<!-- :generate-conf="generateConf"-->
|
||||
<!-- />-->
|
||||
|
||||
<json-drawer
|
||||
size="60%"
|
||||
:visible.sync="jsonDrawerVisible"
|
||||
:json-str="JSON.stringify(formData)"
|
||||
@refresh="refreshJson"
|
||||
/>
|
||||
|
||||
<!-- <code-type-dialog-->
|
||||
<!-- :visible.sync="dialogVisible"-->
|
||||
<!-- title="选择生成类型"-->
|
||||
<!-- :show-file-name="showFileName"-->
|
||||
<!-- @confirm="generate"-->
|
||||
<!-- />-->
|
||||
|
||||
<!-- <input id="copyNode" type="hidden">-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import draggable from 'vuedraggable'
|
||||
import { debounce } from 'throttle-debounce'
|
||||
import { saveAs } from 'file-saver'
|
||||
import ClipboardJS from 'clipboard'
|
||||
import render from '@/components/render/render'
|
||||
import FormDrawer from '@/views/infra/build/FormDrawer'
|
||||
import JsonDrawer from '@/views/infra/build/JsonDrawer'
|
||||
import RightPanel from '@/views/infra/build/RightPanel'
|
||||
import {
|
||||
inputComponents, selectComponents, layoutComponents, formConf
|
||||
} from '@/components/generator/config'
|
||||
import {beautifierConf, titleCase, deepClone, isObjectObject} from '@/utils'
|
||||
import {
|
||||
makeUpHtml, vueTemplate, vueScript, cssStyle
|
||||
} from '@/components/generator/html'
|
||||
import { makeUpJs } from '@/components/generator/js'
|
||||
import { makeUpCss } from '@/components/generator/css'
|
||||
import drawingDefalut from '@/components/generator/drawingDefalut'
|
||||
import logo from '@/assets/logo/logo.png'
|
||||
import CodeTypeDialog from '@/views/infra/build/CodeTypeDialog'
|
||||
import DraggableItem from '@/views/infra/build/DraggableItem'
|
||||
import {
|
||||
getDrawingList, saveDrawingList, getIdGlobal, saveIdGlobal, getFormConf
|
||||
} from '@/utils/db'
|
||||
import loadBeautifier from '@/utils/loadBeautifier'
|
||||
import {CommonStatusEnum} from "@/utils/constants";
|
||||
import {createForm, getForm, updateForm} from "@/api/bpm/form";
|
||||
import {decodeFields} from "@/utils/formGenerator";
|
||||
|
||||
let beautifier
|
||||
const emptyActiveData = { style: {}, autosize: {} }
|
||||
let oldActiveId
|
||||
let tempActiveData
|
||||
const drawingListInDB = getDrawingList()
|
||||
const formConfInDB = getFormConf()
|
||||
const idGlobal = getIdGlobal()
|
||||
|
||||
export default {
|
||||
components: {
|
||||
draggable,
|
||||
render,
|
||||
FormDrawer,
|
||||
JsonDrawer,
|
||||
RightPanel,
|
||||
CodeTypeDialog,
|
||||
DraggableItem
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
logo,
|
||||
idGlobal,
|
||||
formConf,
|
||||
inputComponents,
|
||||
selectComponents,
|
||||
layoutComponents,
|
||||
labelWidth: 100,
|
||||
// drawingList: drawingDefalut,
|
||||
drawingData: {}, // 生成后的表单数据
|
||||
activeId: drawingDefalut[0].__config__.formId,
|
||||
|
||||
drawingList: [], // 表单项的数组
|
||||
// activeId: undefined,
|
||||
// activeData: {},
|
||||
|
||||
drawerVisible: false,
|
||||
formData: {},
|
||||
dialogVisible: false,
|
||||
jsonDrawerVisible: false,
|
||||
generateConf: null,
|
||||
showFileName: false,
|
||||
activeData: drawingDefalut[0], // 右边编辑器激活的表单项
|
||||
saveDrawingListDebounce: debounce(340, saveDrawingList),
|
||||
saveIdGlobalDebounce: debounce(340, saveIdGlobal),
|
||||
leftComponents: [
|
||||
{
|
||||
title: '输入型组件',
|
||||
list: inputComponents
|
||||
},
|
||||
{
|
||||
title: '选择型组件',
|
||||
list: selectComponents
|
||||
},
|
||||
{
|
||||
title: '布局型组件',
|
||||
list: layoutComponents
|
||||
}
|
||||
],
|
||||
|
||||
// 表单参数
|
||||
form: {
|
||||
status: CommonStatusEnum.ENABLE,
|
||||
},
|
||||
// 表单校验
|
||||
rules: {
|
||||
name: [{ required: true, message: "表单名不能为空", trigger: "blur" }],
|
||||
status: [{ required: true, message: "开启状态不能为空", trigger: "blur" }],
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
watch: {
|
||||
// eslint-disable-next-line func-names
|
||||
'activeData.__config__.label': function (val, oldVal) {
|
||||
if (
|
||||
this.activeData.placeholder === undefined
|
||||
|| !this.activeData.__config__.tag
|
||||
|| oldActiveId !== this.activeId
|
||||
) {
|
||||
return
|
||||
}
|
||||
this.activeData.placeholder = this.activeData.placeholder.replace(oldVal, '') + val
|
||||
},
|
||||
activeId: {
|
||||
handler(val) {
|
||||
oldActiveId = val
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
drawingList: {
|
||||
handler(val) {
|
||||
this.saveDrawingListDebounce(val)
|
||||
if (val.length === 0) this.idGlobal = 100
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
idGlobal: {
|
||||
handler(val) {
|
||||
this.saveIdGlobalDebounce(val)
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 【add by 芋道源码】不读缓存
|
||||
// if (Array.isArray(drawingListInDB) && drawingListInDB.length > 0) {
|
||||
// this.drawingList = drawingListInDB
|
||||
// } else {
|
||||
// this.drawingList = drawingDefalut
|
||||
// }
|
||||
// this.activeFormItem(this.drawingList[0])
|
||||
// if (formConfInDB) {
|
||||
// this.formConf = formConfInDB
|
||||
// }
|
||||
loadBeautifier(btf => {
|
||||
beautifier = btf
|
||||
})
|
||||
const clipboard = new ClipboardJS('#copyNode', {
|
||||
text: trigger => {
|
||||
const codeStr = this.generateCode()
|
||||
this.$notify({
|
||||
title: '成功',
|
||||
message: '代码已复制到剪切板，可粘贴。',
|
||||
type: 'success'
|
||||
})
|
||||
return codeStr
|
||||
}
|
||||
})
|
||||
clipboard.on('error', e => {
|
||||
this.$message.error('代码复制失败')
|
||||
})
|
||||
},
|
||||
created() {
|
||||
// 读取表单配置
|
||||
const formId = this.$route.query && this.$route.query.formId
|
||||
if (formId) {
|
||||
getForm(formId).then(response => {
|
||||
const data = response.data
|
||||
this.form = {
|
||||
id: data.id,
|
||||
name: data.name,
|
||||
status: data.status,
|
||||
remark: data.remark
|
||||
}
|
||||
this.formConf = JSON.parse(data.conf)
|
||||
this.drawingList = decodeFields(data.fields)
|
||||
// 设置激活的表单项
|
||||
this.activeData = this.drawingList[0]
|
||||
this.activeId = this.activeData.__config__.formId
|
||||
// 设置 idGlobal，避免重复
|
||||
this.idGlobal += this.drawingList.length
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setObjectValueReduce(obj, strKeys, data) {
|
||||
const arr = strKeys.split('.')
|
||||
arr.reduce((pre, item, i) => {
|
||||
if (arr.length === i + 1) {
|
||||
pre[item] = data
|
||||
} else if (!isObjectObject(pre[item])) {
|
||||
pre[item] = {}
|
||||
}
|
||||
return pre[item]
|
||||
}, obj)
|
||||
},
|
||||
setRespData(component, resp) {
|
||||
const { dataPath, renderKey, dataConsumer } = component.__config__
|
||||
if (!dataPath || !dataConsumer) return
|
||||
const respData = dataPath.split('.').reduce((pre, item) => pre[item], resp)
|
||||
|
||||
// 将请求回来的数据，赋值到指定属性。
|
||||
// 以el-tabel为例，根据Element文档，应该将数据赋值给el-tabel的data属性，所以dataConsumer的值应为'data';
|
||||
// 此时赋值代码可写成 component[dataConsumer] = respData；
|
||||
// 但为支持更深层级的赋值（如：dataConsumer的值为'options.data'）,使用setObjectValueReduce
|
||||
this.setObjectValueReduce(component, dataConsumer, respData)
|
||||
const i = this.drawingList.findIndex(item => item.__config__.renderKey === renderKey)
|
||||
if (i > -1) this.$set(this.drawingList, i, component)
|
||||
},
|
||||
fetchData(component) {
|
||||
const { dataType, method, url } = component.__config__
|
||||
if (dataType === 'dynamic' && method && url) {
|
||||
this.setLoading(component, true)
|
||||
this.$axios({
|
||||
method,
|
||||
url
|
||||
}).then(resp => {
|
||||
this.setLoading(component, false)
|
||||
this.setRespData(component, resp.data)
|
||||
})
|
||||
}
|
||||
},
|
||||
setLoading(component, val) {
|
||||
const { directives } = component
|
||||
if (Array.isArray(directives)) {
|
||||
const t = directives.find(d => d.name === 'loading')
|
||||
if (t) t.value = val
|
||||
}
|
||||
},
|
||||
activeFormItem(currentItem) {
|
||||
this.activeData = currentItem
|
||||
this.activeId = currentItem.__config__.formId
|
||||
},
|
||||
onEnd(obj) {
|
||||
if (obj.from !== obj.to) {
|
||||
this.fetchData(tempActiveData)
|
||||
this.activeData = tempActiveData
|
||||
this.activeId = this.idGlobal
|
||||
}
|
||||
},
|
||||
addComponent(item) {
|
||||
const clone = this.cloneComponent(item)
|
||||
this.fetchData(clone)
|
||||
this.drawingList.push(clone)
|
||||
this.activeFormItem(clone)
|
||||
},
|
||||
cloneComponent(origin) {
|
||||
const clone = deepClone(origin)
|
||||
const config = clone.__config__
|
||||
config.span = this.formConf.span // 生成代码时，会根据span做精简判断
|
||||
this.createIdAndKey(clone)
|
||||
clone.placeholder !== undefined && (clone.placeholder += config.label)
|
||||
tempActiveData = clone
|
||||
return tempActiveData
|
||||
},
|
||||
createIdAndKey(item) {
|
||||
const config = item.__config__
|
||||
config.formId = ++this.idGlobal
|
||||
config.renderKey = `${config.formId}${+new Date()}` // 改变renderKey后可以实现强制更新组件
|
||||
if (config.layout === 'colFormItem') {
|
||||
item.__vModel__ = `field${this.idGlobal}`
|
||||
} else if (config.layout === 'rowFormItem') {
|
||||
config.componentName = `row${this.idGlobal}`
|
||||
!Array.isArray(config.children) && (config.children = [])
|
||||
delete config.label // rowFormItem无需配置label属性
|
||||
}
|
||||
if (Array.isArray(config.children)) {
|
||||
config.children = config.children.map(childItem => this.createIdAndKey(childItem))
|
||||
}
|
||||
return item
|
||||
},
|
||||
// 获得表单数据
|
||||
AssembleFormData() {
|
||||
this.formData = {
|
||||
fields: deepClone(this.drawingList),
|
||||
...this.formConf
|
||||
}
|
||||
},
|
||||
save() {
|
||||
// this.AssembleFormData()
|
||||
// console.log(this.formData)
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (!valid) {
|
||||
return;
|
||||
}
|
||||
const form = {
|
||||
conf: JSON.stringify(this.formConf), // 表单配置
|
||||
fields: this.encodeFields(), // 表单项的数组
|
||||
...this.form // 表单名等
|
||||
}
|
||||
// 修改的提交
|
||||
if (this.form.id != null) {
|
||||
updateForm(form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.close()
|
||||
});
|
||||
return;
|
||||
}
|
||||
// 添加的提交
|
||||
createForm(form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.close()
|
||||
});
|
||||
});
|
||||
},
|
||||
/** 关闭按钮 */
|
||||
close() {
|
||||
this.$tab.closeOpenPage({ path: "/bpm/manager/form" });
|
||||
},
|
||||
encodeFields() {
|
||||
const fields = []
|
||||
this.drawingList.forEach(item => {
|
||||
fields.push(JSON.stringify(item))
|
||||
})
|
||||
return fields
|
||||
},
|
||||
generate(data) {
|
||||
const func = this[`exec${titleCase(this.operationType)}`]
|
||||
this.generateConf = data
|
||||
func && func(data)
|
||||
},
|
||||
execRun(data) {
|
||||
this.AssembleFormData()
|
||||
this.drawerVisible = true
|
||||
},
|
||||
execDownload(data) {
|
||||
const codeStr = this.generateCode()
|
||||
const blob = new Blob([codeStr], { type: 'text/plain;charset=utf-8' })
|
||||
saveAs(blob, data.fileName)
|
||||
},
|
||||
execCopy(data) {
|
||||
document.getElementById('copyNode').click()
|
||||
},
|
||||
empty() {
|
||||
this.$confirm('确定要清空所有组件吗？', '提示', { type: 'warning' }).then(
|
||||
() => {
|
||||
this.drawingList = []
|
||||
this.idGlobal = 100
|
||||
}
|
||||
)
|
||||
},
|
||||
drawingItemCopy(item, list) {
|
||||
let clone = deepClone(item)
|
||||
clone = this.createIdAndKey(clone)
|
||||
list.push(clone)
|
||||
this.activeFormItem(clone)
|
||||
},
|
||||
drawingItemDelete(index, list) {
|
||||
list.splice(index, 1)
|
||||
this.$nextTick(() => {
|
||||
const len = this.drawingList.length
|
||||
if (len) {
|
||||
this.activeFormItem(this.drawingList[len - 1])
|
||||
}
|
||||
})
|
||||
},
|
||||
generateCode() {
|
||||
const { type } = this.generateConf
|
||||
this.AssembleFormData()
|
||||
const script = vueScript(makeUpJs(this.formData, type))
|
||||
const html = vueTemplate(makeUpHtml(this.formData, type))
|
||||
const css = cssStyle(makeUpCss(this.formData))
|
||||
return beautifier.html(html + script + css, beautifierConf.html)
|
||||
},
|
||||
showJson() {
|
||||
this.AssembleFormData()
|
||||
this.jsonDrawerVisible = true
|
||||
},
|
||||
download() {
|
||||
this.dialogVisible = true
|
||||
this.showFileName = true
|
||||
this.operationType = 'download'
|
||||
},
|
||||
run() {
|
||||
this.dialogVisible = true
|
||||
this.showFileName = false
|
||||
this.operationType = 'run'
|
||||
},
|
||||
copy() {
|
||||
this.dialogVisible = true
|
||||
this.showFileName = false
|
||||
this.operationType = 'copy'
|
||||
},
|
||||
tagChange(newTag) {
|
||||
newTag = this.cloneComponent(newTag)
|
||||
const config = newTag.__config__
|
||||
newTag.__vModel__ = this.activeData.__vModel__
|
||||
config.formId = this.activeId
|
||||
config.span = this.activeData.__config__.span
|
||||
this.activeData.__config__.tag = config.tag
|
||||
this.activeData.__config__.tagIcon = config.tagIcon
|
||||
this.activeData.__config__.document = config.document
|
||||
if (typeof this.activeData.__config__.defaultValue === typeof config.defaultValue) {
|
||||
config.defaultValue = this.activeData.__config__.defaultValue
|
||||
}
|
||||
Object.keys(newTag).forEach(key => {
|
||||
if (this.activeData[key] !== undefined) {
|
||||
newTag[key] = this.activeData[key]
|
||||
}
|
||||
})
|
||||
this.activeData = newTag
|
||||
this.updateDrawingList(newTag, this.drawingList)
|
||||
},
|
||||
updateDrawingList(newTag, list) {
|
||||
const index = list.findIndex(item => item.__config__.formId === this.activeId)
|
||||
if (index > -1) {
|
||||
list.splice(index, 1, newTag)
|
||||
} else {
|
||||
list.forEach(item => {
|
||||
if (Array.isArray(item.__config__.children)) this.updateDrawingList(newTag, item.__config__.children)
|
||||
})
|
||||
}
|
||||
},
|
||||
refreshJson(data) {
|
||||
this.drawingList = deepClone(data.fields)
|
||||
delete data.fields
|
||||
this.formConf = data
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss'>
|
||||
@import '@/styles/home';
|
||||
</style>
|
||||
161
src/views/bpm/form/index.vue
Normal file
161
src/views/bpm/form/index.vue
Normal file
@@ -0,0 +1,161 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert title="审批接入（流程表单）" url="https://doc.iocoder.cn/bpm/use-bpm-form/" />
|
||||
|
||||
<!-- 搜索工作栏 -->
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="表单名" prop="name">
|
||||
<el-input v-model="queryParams.name" placeholder="请输入表单名" clearable @keyup.enter.native="handleQuery"/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- 操作工具栏 -->
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
|
||||
v-hasPermi="['bpm:form:create']">新增</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<!-- 列表 -->
|
||||
<el-table v-loading="loading" :data="list">
|
||||
<el-table-column label="编号" align="center" prop="id" />
|
||||
<el-table-column label="表单名" align="center" prop="name" />
|
||||
<el-table-column label="开启状态" align="center" prop="status">
|
||||
<template v-slot="scope">
|
||||
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="备注" align="center" prop="remark" />
|
||||
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
|
||||
<template v-slot="scope">
|
||||
<span>{{ parseTime(scope.row.createTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template v-slot="scope">
|
||||
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleDetail(scope.row)"
|
||||
v-hasPermi="['bpm:form:query']">详情</el-button>
|
||||
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['bpm:form:update']">修改</el-button>
|
||||
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
|
||||
v-hasPermi="['bpm:form:delete']">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页组件 -->
|
||||
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"/>
|
||||
|
||||
<!--表单配置详情-->
|
||||
<el-dialog title="表单详情" :visible.sync="detailOpen" width="50%" append-to-body>
|
||||
<div class="test-form">
|
||||
<parser :key="new Date().getTime()" :form-conf="detailForm" />
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {deleteForm, getForm, getFormPage} from "@/api/bpm/form";
|
||||
import Parser from '@/components/parser/Parser'
|
||||
import {decodeFields} from "@/utils/formGenerator";
|
||||
|
||||
export default {
|
||||
name: "BpmForm",
|
||||
components: {
|
||||
Parser
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 工作流的列表
|
||||
list: [],
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
name: null,
|
||||
},
|
||||
// 表单详情
|
||||
detailOpen: false,
|
||||
detailForm: {
|
||||
fields: []
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
// 执行查询
|
||||
getFormPage(this.queryParams).then(response => {
|
||||
this.list = response.data.list;
|
||||
this.total = response.data.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNo = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
/** 详情按钮操作 */
|
||||
handleDetail(row) {
|
||||
getForm(row.id).then(response => {
|
||||
// 设置值
|
||||
const data = response.data
|
||||
this.detailForm = {
|
||||
...JSON.parse(data.conf),
|
||||
fields: decodeFields(data.fields)
|
||||
}
|
||||
// 弹窗打开
|
||||
this.detailOpen = true
|
||||
})
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.$router.push({
|
||||
name: "BpmFormEditor"
|
||||
});
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.$router.push({
|
||||
name: "BpmFormEditor",
|
||||
query:{
|
||||
formId: row.id
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const id = row.id;
|
||||
this.$modal.confirm('是否确认删除工作表单的编号为"' + id + '"的数据项?').then(function() {
|
||||
return deleteForm(id);
|
||||
}).then(() => {
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
246
src/views/bpm/group/index.vue
Normal file
246
src/views/bpm/group/index.vue
Normal file
@@ -0,0 +1,246 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert title="工作流" url="https://doc.iocoder.cn/bpm" />
|
||||
|
||||
<!-- 搜索工作栏 -->
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="组名" prop="name">
|
||||
<el-input v-model="queryParams.name" placeholder="请输入组名" clearable @keyup.enter.native="handleQuery"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
|
||||
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.COMMON_STATUS)"
|
||||
:key="dict.value" :label="dict.label" :value="dict.value"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="创建时间" prop="createTime">
|
||||
<el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
|
||||
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- 操作工具栏 -->
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
|
||||
v-hasPermi="['bpm:user-group:create']">新增</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<!-- 列表 -->
|
||||
<el-table v-loading="loading" :data="list">
|
||||
<el-table-column label="编号" align="center" prop="id" />
|
||||
<el-table-column label="组名" align="center" prop="name" />
|
||||
<el-table-column label="描述" align="center" prop="description" />
|
||||
<el-table-column label="成员" align="center">
|
||||
<template v-slot="scope">
|
||||
<span v-for="userId in scope.row.memberUserIds">
|
||||
{{ getUserNickname(userId) }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" align="center" prop="status">
|
||||
<template v-slot="scope">
|
||||
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
|
||||
<template v-slot="scope">
|
||||
<span>{{ parseTime(scope.row.createTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template v-slot="scope">
|
||||
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['bpm:user-group:update']">修改</el-button>
|
||||
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
|
||||
v-hasPermi="['bpm:user-group:delete']">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页组件 -->
|
||||
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"/>
|
||||
|
||||
<!-- 对话框(添加 / 修改) -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="组名" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入组名" />
|
||||
</el-form-item>
|
||||
<el-form-item label="描述" prop="description">
|
||||
<el-input v-model="form.description" placeholder="请输入描述" />
|
||||
</el-form-item>
|
||||
<el-form-item label="成员" prop="memberUserIds">
|
||||
<el-select v-model="form.memberUserIds" multiple placeholder="请选择成员">
|
||||
<el-option v-for="user in users" :key="parseInt(user.id)" :label="user.nickname" :value="parseInt(user.id)"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio v-for="dict in this.getDictDatas(DICT_TYPE.COMMON_STATUS)"
|
||||
:key="dict.value" :label="parseInt(dict.value)">{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { createUserGroup, updateUserGroup, deleteUserGroup, getUserGroup, getUserGroupPage } from "@/api/bpm/userGroup";
|
||||
import {CommonStatusEnum} from "@/utils/constants";
|
||||
import {listSimpleUsers} from "@/api/system/user";
|
||||
|
||||
export default {
|
||||
name: "BpmUserGroup",
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 用户组列表
|
||||
list: [],
|
||||
// 用户列表
|
||||
users: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
name: null,
|
||||
status: null,
|
||||
createTime: []
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
name: [{ required: true, message: "组名不能为空", trigger: "blur" }],
|
||||
description: [{ required: true, message: "描述不能为空", trigger: "blur" }],
|
||||
memberUserIds: [{ required: true, message: "成员不能为空", trigger: "change" }],
|
||||
status: [{ required: true, message: "状态不能为空", trigger: "blur" }],
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
// 获得用户列表
|
||||
listSimpleUsers().then(response => {
|
||||
this.users = response.data;
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
/** 查询列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
// 执行查询
|
||||
getUserGroupPage(this.queryParams).then(response => {
|
||||
this.list = response.data.list;
|
||||
this.total = response.data.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
/** 取消按钮 */
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
/** 表单重置 */
|
||||
reset() {
|
||||
this.form = {
|
||||
id: undefined,
|
||||
name: undefined,
|
||||
description: undefined,
|
||||
memberUserIds: [],
|
||||
status: CommonStatusEnum.ENABLE,
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNo = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset();
|
||||
this.open = true;
|
||||
this.title = "添加用户组";
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset();
|
||||
const id = row.id;
|
||||
getUserGroup(id).then(response => {
|
||||
this.form = response.data;
|
||||
this.open = true;
|
||||
this.title = "修改用户组";
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (!valid) {
|
||||
return;
|
||||
}
|
||||
// 修改的提交
|
||||
if (this.form.id != null) {
|
||||
updateUserGroup(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
return;
|
||||
}
|
||||
// 添加的提交
|
||||
createUserGroup(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
});
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const id = row.id;
|
||||
this.$modal.confirm('是否确认删除用户组编号为"' + id + '"的数据项?').then(function() {
|
||||
return deleteUserGroup(id);
|
||||
}).then(() => {
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {});
|
||||
},
|
||||
getUserNickname(userId) {
|
||||
for (const user of this.users) {
|
||||
if (user.id === userId) {
|
||||
return user.nickname;
|
||||
}
|
||||
}
|
||||
return '未知(' + userId + ')';
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
554
src/views/bpm/model/index.vue
Normal file
554
src/views/bpm/model/index.vue
Normal file
@@ -0,0 +1,554 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert title="流程设计器（BPMN）" url="https://doc.iocoder.cn/bpm/model-designer-dingding/" />
|
||||
<doc-alert
|
||||
title="流程设计器（钉钉、飞书）"
|
||||
url="https://doc.iocoder.cn/bpm/model-designer-bpmn/"
|
||||
/>
|
||||
<doc-alert title="选择审批人、发起人自选" url="https://doc.iocoder.cn/bpm/assignee/" />
|
||||
<doc-alert title="会签、或签、依次审批" url="https://doc.iocoder.cn/bpm/multi-instance/" />
|
||||
|
||||
<!-- 搜索工作栏 -->
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="流程标识" prop="key">
|
||||
<el-input v-model="queryParams.key" placeholder="请输入流程标识" clearable style="width: 240px;"
|
||||
@keyup.enter.native="handleQuery"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="流程名称" prop="name">
|
||||
<el-input v-model="queryParams.name" placeholder="请输入流程名称" clearable style="width: 240px;"
|
||||
@keyup.enter.native="handleQuery"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="流程分类" prop="category">
|
||||
<el-select v-model="queryParams.category" placeholder="流程分类" clearable style="width: 240px">
|
||||
<el-option v-for="dict in categoryDictDatas" :key="parseInt(dict.value)" :label="dict.label" :value="parseInt(dict.value)"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- 操作工具栏 -->
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
|
||||
v-hasPermi="['bpm:model:create']">新建流程</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="info" icon="el-icon-upload2" size="mini" @click="handleImport"
|
||||
v-hasPermi="['bpm:model:import']">导入流程</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<!-- 列表 -->
|
||||
<el-table v-loading="loading" :data="list">
|
||||
<el-table-column label="流程标识" align="center" prop="key" />
|
||||
<el-table-column label="流程名称" align="center" prop="name" width="200">
|
||||
<template v-slot="scope">
|
||||
<el-button type="text" @click="handleBpmnDetail(scope.row)">
|
||||
<span>{{ scope.row.name }}</span>
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="流程分类" align="center" prop="category" width="100">
|
||||
<template v-slot="scope">
|
||||
<dict-tag :type="DICT_TYPE.BPM_MODEL_CATEGORY" :value="scope.row.category" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="表单信息" align="center" prop="formType" width="200">
|
||||
<template v-slot="scope">
|
||||
<el-button v-if="scope.row.formId" type="text" @click="handleFormDetail(scope.row)">
|
||||
<span>{{ scope.row.formName }}</span>
|
||||
</el-button>
|
||||
<el-button v-else-if="scope.row.formCustomCreatePath" type="text" @click="handleFormDetail(scope.row)">
|
||||
<span>{{ scope.row.formCustomCreatePath }}</span>
|
||||
</el-button>
|
||||
<label v-else>暂无表单</label>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
|
||||
<template v-slot="scope">
|
||||
<span>{{ parseTime(scope.row.createTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="最新部署的流程定义" align="center">
|
||||
<el-table-column label="流程版本" align="center" prop="processDefinition.version" width="80">
|
||||
<template v-slot="scope">
|
||||
<el-tag size="medium" v-if="scope.row.processDefinition">v{{ scope.row.processDefinition.version }}</el-tag>
|
||||
<el-tag size="medium" type="warning" v-else>未部署</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="激活状态" align="center" prop="processDefinition.version" width="80">
|
||||
<template v-slot="scope">
|
||||
<el-switch v-if="scope.row.processDefinition" v-model="scope.row.processDefinition.suspensionState"
|
||||
:active-value="1" :inactive-value="2" @change="handleChangeState(scope.row)" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="部署时间" align="center" prop="deploymentTime" width="180">
|
||||
<template v-slot="scope">
|
||||
<span v-if="scope.row.processDefinition">{{ parseTime(scope.row.processDefinition.deploymentTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="450" fixed="right">
|
||||
<template v-slot="scope">
|
||||
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['bpm:model:update']">修改流程</el-button>
|
||||
<el-button size="mini" type="text" icon="el-icon-setting" @click="handleDesign(scope.row)"
|
||||
v-hasPermi="['bpm:model:update']">设计流程</el-button>
|
||||
<el-button size="mini" type="text" icon="el-icon-s-custom" @click="handleAssignRule(scope.row)"
|
||||
v-hasPermi="['bpm:task-assign-rule:query']">分配规则</el-button>
|
||||
<el-button size="mini" type="text" icon="el-icon-thumb" @click="handleDeploy(scope.row)"
|
||||
v-hasPermi="['bpm:model:deploy']">发布流程</el-button>
|
||||
<el-button size="mini" type="text" icon="el-icon-ice-cream-round" @click="handleDefinitionList(scope.row)"
|
||||
v-hasPermi="['bpm:process-definition:query']">流程定义</el-button>
|
||||
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
|
||||
v-hasPermi="['bpm:model:delete']">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页组件 -->
|
||||
<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"/>
|
||||
|
||||
<!-- 流程表单配置详情 -->
|
||||
<el-dialog title="表单详情" :visible.sync="detailOpen" width="50%" append-to-body>
|
||||
<parser :key="new Date().getTime()" :form-conf="detailForm" />
|
||||
</el-dialog>
|
||||
|
||||
<!-- 流程模型图的预览 -->
|
||||
<el-dialog title="流程图" :visible.sync="showBpmnOpen" width="80%" append-to-body>
|
||||
<my-process-viewer key="designer" v-model="bpmnXML" v-bind="bpmnControlForm" />
|
||||
</el-dialog>
|
||||
|
||||
<!-- 对话框(添加 / 修改) -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="110px">
|
||||
<el-form-item label="流程标识" prop="key">
|
||||
<el-input v-model="form.key" placeholder="请输入流标标识" style="width: 330px;" :disabled="!!form.id" />
|
||||
<el-tooltip v-if="!form.id" class="item" effect="light" content="新建后，流程标识不可修改！" placement="top">
|
||||
<i style="padding-left: 5px;" class="el-icon-question" />
|
||||
</el-tooltip>
|
||||
<el-tooltip v-else class="item" effect="light" content="流程标识不可修改！" placement="top">
|
||||
<i style="padding-left: 5px;" class="el-icon-question" />
|
||||
</el-tooltip>
|
||||
</el-form-item>
|
||||
<el-form-item label="流程名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入流程名称" :disabled="!!form.id" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.id" label="流程分类" prop="category">
|
||||
<el-select v-model="form.category" placeholder="请选择流程分类" clearable style="width: 100%">
|
||||
<el-option v-for="dict in categoryDictDatas" :key="dict.value" :label="dict.label" :value="dict.value"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="流程描述" prop="description">
|
||||
<el-input type="textarea" v-model="form.description" clearable />
|
||||
</el-form-item>
|
||||
<div v-if="form.id">
|
||||
<el-form-item label="表单类型" prop="formType">
|
||||
<el-radio-group v-model="form.formType">
|
||||
<el-radio v-for="dict in modelFormTypeDictDatas" :key="parseInt(dict.value)" :label="parseInt(dict.value)">
|
||||
{{dict.label}}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.formType === 10" label="流程表单" prop="formId">
|
||||
<el-select v-model="form.formId" clearable style="width: 100%">
|
||||
<el-option v-for="form in forms" :key="form.id" :label="form.name" :value="form.id"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.formType === 20" label="表单提交路由" prop="formCustomCreatePath" >
|
||||
<el-input v-model="form.formCustomCreatePath" placeholder="请输入表单提交路由" style="width: 330px;" />
|
||||
<el-tooltip class="item" effect="light" content="自定义表单的提交路径，使用 Vue 的路由地址，例如说：bpm/oa/leave/create" placement="top">
|
||||
<i style="padding-left: 5px;" class="el-icon-question" />
|
||||
</el-tooltip>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.formType === 20" label="表单查看路由" prop="formCustomViewPath">
|
||||
<el-input v-model="form.formCustomViewPath" placeholder="请输入表单查看路由" style="width: 330px;" />
|
||||
<el-tooltip class="item" effect="light" content="自定义表单的查看路径，使用 Vue 的路由地址，例如说：bpm/oa/leave/view" placement="top">
|
||||
<i style="padding-left: 5px;" class="el-icon-question" />
|
||||
</el-tooltip>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 用户导入对话框 -->
|
||||
<el-dialog title="导入流程" :visible.sync="upload.open" width="400px" append-to-body>
|
||||
<el-upload ref="upload" :limit="1" accept=".bpmn, .xml" :headers="upload.headers" :action="upload.url"
|
||||
:disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess"
|
||||
:auto-upload="false" name="bpmnFile" :data="upload.form" drag>
|
||||
<i class="el-icon-upload"></i>
|
||||
<div class="el-upload__text">
|
||||
将文件拖到此处，或
|
||||
<em>点击上传</em>
|
||||
</div>
|
||||
<div class="el-upload__tip" style="color:red" slot="tip">提示：仅允许导入“bpm”或“xml”格式文件！</div>
|
||||
<div class="el-upload__tip" slot="tip">
|
||||
<el-form ref="uploadForm" size="mini" label-width="90px" :model="upload.form" :rules="upload.rules" @submit.native.prevent>
|
||||
<el-form-item label="流程标识" prop="key">
|
||||
<el-input v-model="upload.form.key" placeholder="请输入流标标识" style="width: 250px;" />
|
||||
<el-tooltip class="item" effect="light" content="新建后，流程标识不可修改！" placement="top">
|
||||
<i style="padding-left: 5px;" class="el-icon-question" />
|
||||
</el-tooltip>
|
||||
</el-form-item>
|
||||
<el-form-item label="流程名称" prop="name">
|
||||
<el-input v-model="upload.form.name" placeholder="请输入流程名称" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="流程描述" prop="description">
|
||||
<el-input type="textarea" v-model="upload.form.description" clearable />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</el-upload>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitFileForm">确 定</el-button>
|
||||
<el-button @click="uploadClose">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<!-- ========== 流程任务分配规则 ========== -->
|
||||
<taskAssignRuleDialog ref="taskAssignRuleDialog" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
deleteModel,
|
||||
deployModel,
|
||||
getModelPage,
|
||||
getModel,
|
||||
updateModelState,
|
||||
createModel,
|
||||
updateModel
|
||||
} from "@/api/bpm/model";
|
||||
import {DICT_TYPE, getDictDatas} from "@/utils/dict";
|
||||
import {getForm, getSimpleForms} from "@/api/bpm/form";
|
||||
import {decodeFields} from "@/utils/formGenerator";
|
||||
import Parser from '@/components/parser/Parser'
|
||||
import {getBaseHeader} from "@/utils/request";
|
||||
import taskAssignRuleDialog from "../taskAssignRule/taskAssignRuleDialog";
|
||||
|
||||
import Treeselect from "@riophae/vue-treeselect";
|
||||
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
||||
|
||||
export default {
|
||||
name: "BpmModel",
|
||||
components: {
|
||||
Parser,
|
||||
Treeselect,
|
||||
taskAssignRuleDialog
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 表格数据
|
||||
list: [],
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNo: 1,
|
||||
pageSize: 10
|
||||
},
|
||||
|
||||
// BPMN 数据
|
||||
showBpmnOpen: false,
|
||||
bpmnXML: null,
|
||||
bpmnControlForm: {
|
||||
prefix: "flowable"
|
||||
},
|
||||
|
||||
// 流程表单详情
|
||||
detailOpen: false,
|
||||
detailForm: {
|
||||
fields: []
|
||||
},
|
||||
|
||||
// 流程表单
|
||||
title: "",
|
||||
open: false,
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
key: [{ required: true, message: "流程标识不能为空", trigger: "blur" }],
|
||||
name: [{ required: true, message: "流程名称不能为空", trigger: "blur" }],
|
||||
formType: [{ required: true, message: "流程名称不能为空", trigger: "blur" }],
|
||||
formId: [{ required: true, message: "业务表单不能为空", trigger: "blur" }],
|
||||
category: [{ required: true, message: "流程分类不能为空", trigger: "blur" }],
|
||||
formCustomCreatePath: [{ required: true, message: "表单提交路由不能为空", trigger: "blur" }],
|
||||
formCustomViewPath: [{ required: true, message: "表单查看路由不能为空", trigger: "blur" }],
|
||||
},
|
||||
|
||||
// 流程导入参数
|
||||
upload: {
|
||||
// 是否显示弹出层（用户导入）
|
||||
open: false,
|
||||
// 是否禁用上传
|
||||
isUploading: false,
|
||||
// 设置上传的请求头部
|
||||
headers: getBaseHeader(),
|
||||
// 上传的地址
|
||||
url: process.env.VUE_APP_BASE_API + '/admin-api' + "/bpm/model/import",
|
||||
// 表单
|
||||
form: {},
|
||||
// 校验规则
|
||||
rules: {
|
||||
key: [{ required: true, message: "流程标识不能为空", trigger: "blur" }],
|
||||
name: [{ required: true, message: "流程名称不能为空", trigger: "blur" }],
|
||||
},
|
||||
},
|
||||
// 流程表单的下拉框的数据
|
||||
forms: [],
|
||||
|
||||
// 数据字典
|
||||
categoryDictDatas: getDictDatas(DICT_TYPE.BPM_MODEL_CATEGORY),
|
||||
modelFormTypeDictDatas: getDictDatas(DICT_TYPE.BPM_MODEL_FORM_TYPE),
|
||||
taskAssignRuleDictDatas: getDictDatas(DICT_TYPE.BPM_TASK_ASSIGN_RULE_TYPE),
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
// 获得流程表单的下拉框的数据
|
||||
getSimpleForms().then(response => {
|
||||
this.forms = response.data
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
/** 查询流程模型列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
getModelPage(this.queryParams).then(response => {
|
||||
this.list = response.data.list;
|
||||
this.total = response.data.total;
|
||||
this.loading = false;
|
||||
}
|
||||
);
|
||||
},
|
||||
/** 取消按钮 */
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: undefined,
|
||||
key: undefined,
|
||||
name: undefined,
|
||||
description: undefined,
|
||||
category: undefined,
|
||||
formType: undefined,
|
||||
formId: undefined,
|
||||
formCustomCreatePath: undefined,
|
||||
formCustomViewPath: undefined
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNo = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.dateRange = [];
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset();
|
||||
this.title = "新建模型";
|
||||
this.open = true;
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset();
|
||||
this.title = "修改模型";
|
||||
this.open = true;
|
||||
// 设置 form
|
||||
this.form = {
|
||||
...row
|
||||
};
|
||||
// 触发一次校验
|
||||
// this.$refs["form"].validate();
|
||||
},
|
||||
/** 设计按钮操作 */
|
||||
handleDesign(row) {
|
||||
this.$router.push({
|
||||
name: "BpmModelEditor",
|
||||
query:{
|
||||
modelId: row.id
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (!valid) {
|
||||
return;
|
||||
}
|
||||
// 更新
|
||||
if (this.form.id) {
|
||||
updateModel({
|
||||
...this.form,
|
||||
formId: this.form.formType === 10 ? this.form.formId : undefined,
|
||||
formCustomCreatePath: this.form.formType === 20 ? this.form.formCustomCreatePath : undefined,
|
||||
formCustomViewPath: this.form.formType === 20 ? this.form.formCustomViewPath : undefined,
|
||||
}).then(response => {
|
||||
this.$modal.msgSuccess("修改模型成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
return;
|
||||
}
|
||||
// 创建
|
||||
createModel(this.form).then(response => {
|
||||
this.open = false;
|
||||
this.getList();
|
||||
this.$alert('<strong>新建模型成功！</strong>后续需要执行如下 4 个步骤：' +
|
||||
'<div>1. 点击【修改流程】按钮，配置流程的分类、表单信息</div>' +
|
||||
'<div>2. 点击【设计流程】按钮，绘制流程图</div>' +
|
||||
'<div>3. 点击【分配规则】按钮，设置每个用户任务的审批人</div>' +
|
||||
'<div>4. 点击【发布流程】按钮，完成流程的最终发布</div>' +
|
||||
'另外，每次流程修改后，都需要点击【发布流程】按钮，才能正式生效！！！',
|
||||
'重要提示', {
|
||||
dangerouslyUseHTMLString: true,
|
||||
type: 'success'
|
||||
});
|
||||
});
|
||||
});
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const that = this;
|
||||
this.$modal.confirm('是否删除该流程！！').then(function() {
|
||||
deleteModel(row.id).then(response => {
|
||||
that.getList();
|
||||
that.$modal.msgSuccess("删除成功");
|
||||
})
|
||||
}).catch(() => {});
|
||||
},
|
||||
/** 部署按钮操作 */
|
||||
handleDeploy(row) {
|
||||
const that = this;
|
||||
this.$modal.confirm('是否部署该流程！！').then(function() {
|
||||
deployModel(row.id).then(response => {
|
||||
that.getList();
|
||||
that.$modal.msgSuccess("部署成功");
|
||||
})
|
||||
}).catch(() => {});
|
||||
},
|
||||
/** 流程表单的详情按钮操作 */
|
||||
handleFormDetail(row) {
|
||||
// 流程表单
|
||||
if (row.formId) {
|
||||
getForm(row.formId).then(response => {
|
||||
// 设置值
|
||||
const data = response.data
|
||||
this.detailForm = {
|
||||
...JSON.parse(data.conf),
|
||||
fields: decodeFields(data.fields)
|
||||
}
|
||||
// 弹窗打开
|
||||
this.detailOpen = true
|
||||
})
|
||||
// 业务表单
|
||||
} else if (row.formCustomCreatePath) {
|
||||
this.$router.push({ path: row.formCustomCreatePath});
|
||||
}
|
||||
},
|
||||
/** 流程图的详情按钮操作 */
|
||||
handleBpmnDetail(row) {
|
||||
getModel(row.id).then(response => {
|
||||
this.bpmnXML = response.data.bpmnXml
|
||||
// 弹窗打开
|
||||
this.showBpmnOpen = true
|
||||
})
|
||||
},
|
||||
/** 跳转流程定义的列表 */
|
||||
handleDefinitionList(row) {
|
||||
this.$router.push({
|
||||
name: "BpmProcessDefinition",
|
||||
query:{
|
||||
key: row.key
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 更新状态操作 */
|
||||
handleChangeState(row) {
|
||||
const id = row.id;
|
||||
let state = row.processDefinition.suspensionState;
|
||||
let statusState = state === 1 ? '激活' : '挂起';
|
||||
this.$modal.confirm('是否确认' + statusState + '流程名字为"' + row.name + '"的数据项?').then(function() {
|
||||
return updateModelState(id, state);
|
||||
}).then(() => {
|
||||
this.getList();
|
||||
this.$modal.msgSuccess(statusState + "成功");
|
||||
}).catch(() => {
|
||||
// 取消后，进行恢复按钮
|
||||
row.processDefinition.suspensionState = (state === 1 ? 2 : 1);
|
||||
});
|
||||
},
|
||||
/** 导入按钮操作 */
|
||||
handleImport() {
|
||||
this.upload.open = true;
|
||||
},
|
||||
// 文件上传中处理
|
||||
handleFileUploadProgress(event, file, fileList) {
|
||||
this.upload.isUploading = true;
|
||||
},
|
||||
// 文件上传成功处理
|
||||
handleFileSuccess(response, file, fileList) {
|
||||
if (response.code !== 0) {
|
||||
this.$modal.msgError(response.msg)
|
||||
return;
|
||||
}
|
||||
// 重置表单
|
||||
this.uploadClose();
|
||||
// 提示，并刷新
|
||||
this.$modal.msgSuccess("导入流程成功！请点击【设计流程】按钮，进行编辑保存后，才可以进行【发布流程】");
|
||||
this.getList();
|
||||
},
|
||||
uploadClose() {
|
||||
// 关闭弹窗
|
||||
this.upload.open = false;
|
||||
// 重置上传状态和文件
|
||||
this.upload.isUploading = false;
|
||||
this.$refs.upload.clearFiles();
|
||||
// 重置表单
|
||||
this.upload.form = {};
|
||||
this.resetForm("uploadForm");
|
||||
},
|
||||
/** 提交上传文件 */
|
||||
submitFileForm() {
|
||||
this.$refs["uploadForm"].validate(valid => {
|
||||
if (!valid) {
|
||||
return;
|
||||
}
|
||||
this.$refs.upload.submit();
|
||||
})
|
||||
},
|
||||
/** 处理任务分配规则列表的按钮操作 */
|
||||
handleAssignRule(row) {
|
||||
this.$refs['taskAssignRuleDialog'].initModel(row.id);
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.my-process-designer {
|
||||
height: calc(100vh - 200px);
|
||||
}
|
||||
</style>
|
||||
170
src/views/bpm/model/modelEditor.vue
Normal file
170
src/views/bpm/model/modelEditor.vue
Normal file
@@ -0,0 +1,170 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
|
||||
<!-- 流程设计器，负责绘制流程等 -->
|
||||
<my-process-designer v-if="xmlString !== undefined" :key="`designer-${reloadIndex}`" v-model="xmlString" v-bind="controlForm"
|
||||
keyboard ref="processDesigner" @init-finished="initModeler"
|
||||
@save="save"/>
|
||||
|
||||
<!-- 流程属性器，负责编辑每个流程节点的属性 -->
|
||||
<my-properties-panel :key="`penal-${reloadIndex}`" :bpmn-modeler="modeler" :prefix="controlForm.prefix" class="process-panel"
|
||||
:model="model" />
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import translations from "@/components/bpmnProcessDesigner/src/translations";
|
||||
// 自定义元素选中时的弹出菜单（修改 默认任务 为 用户任务）
|
||||
import CustomContentPadProvider from "@/components/bpmnProcessDesigner/package/designer/plugins/content-pad";
|
||||
// 自定义左侧菜单（修改 默认任务 为 用户任务）
|
||||
import CustomPaletteProvider from "@/components/bpmnProcessDesigner/package/designer/plugins/palette";
|
||||
// import xmlObj2json from "./utils/xml2json";
|
||||
import MyProcessPalette from "@/components/bpmnProcessDesigner/package/palette/ProcessPalette";
|
||||
import {createModel, getModel, updateModel} from "@/api/bpm/model";
|
||||
// 自定义侧边栏
|
||||
// import MyProcessPanel from "../package/process-panel/ProcessPanel";
|
||||
|
||||
export default {
|
||||
name: "BpmModelEditor",
|
||||
components: { MyProcessPalette },
|
||||
data() {
|
||||
return {
|
||||
xmlString: undefined, // BPMN XML
|
||||
modeler: null,
|
||||
reloadIndex: 0,
|
||||
controlDrawerVisible: false,
|
||||
translationsSelf: translations,
|
||||
controlForm: {
|
||||
simulation: true,
|
||||
labelEditing: false,
|
||||
labelVisible: false,
|
||||
prefix: "flowable",
|
||||
headerButtonSize: "mini",
|
||||
additionalModel: [CustomContentPadProvider, CustomPaletteProvider]
|
||||
},
|
||||
addis: {
|
||||
CustomContentPadProvider,
|
||||
CustomPaletteProvider
|
||||
},
|
||||
// 流程模型的信息
|
||||
model: {},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
// 如果 modelId 非空，说明是修改流程模型
|
||||
const modelId = this.$route.query && this.$route.query.modelId
|
||||
if (modelId) {
|
||||
getModel(modelId).then(response => {
|
||||
this.xmlString = response.data.bpmnXml
|
||||
this.model = {
|
||||
...response.data,
|
||||
bpmnXml: undefined, // 清空 bpmnXml 属性
|
||||
}
|
||||
// this.controlForm.processId = response.data.key
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initModeler(modeler) {
|
||||
setTimeout(() => {
|
||||
this.modeler = modeler;
|
||||
console.log(modeler);
|
||||
}, 10);
|
||||
},
|
||||
save(bpmnXml) {
|
||||
const data = {
|
||||
...this.model,
|
||||
bpmnXml: bpmnXml, // this.bpmnXml 只是初始化流程图，后续修改无法通过它获得
|
||||
}
|
||||
|
||||
// 修改的提交
|
||||
if (data.id) {
|
||||
updateModel(data).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
// 跳转回去
|
||||
this.close()
|
||||
})
|
||||
return
|
||||
}
|
||||
// 添加的提交
|
||||
createModel(data).then(response => {
|
||||
this.$modal.msgSuccess("保存成功")
|
||||
// 跳转回去
|
||||
this.close()
|
||||
})
|
||||
},
|
||||
/** 关闭按钮 */
|
||||
close() {
|
||||
this.$tab.closeOpenPage({ path: "/bpm/manager/model" });
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
//body {
|
||||
// overflow: hidden;
|
||||
// margin: 0;
|
||||
// box-sizing: border-box;
|
||||
//}
|
||||
//.app {
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// box-sizing: border-box;
|
||||
// display: inline-grid;
|
||||
// grid-template-columns: 100px auto max-content;
|
||||
//}
|
||||
.demo-control-bar {
|
||||
position: fixed;
|
||||
right: 8px;
|
||||
bottom: 8px;
|
||||
z-index: 1;
|
||||
.open-control-dialog {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 4px;
|
||||
font-size: 32px;
|
||||
background: rgba(64, 158, 255, 1);
|
||||
color: #ffffff;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
// TODO 芋艿：去掉多余的 faq
|
||||
//.info-tip {
|
||||
// position: fixed;
|
||||
// top: 40px;
|
||||
// right: 500px;
|
||||
// z-index: 10;
|
||||
// color: #999999;
|
||||
//}
|
||||
|
||||
.control-form {
|
||||
.el-radio {
|
||||
width: 100%;
|
||||
line-height: 32px;
|
||||
}
|
||||
}
|
||||
.element-overlays {
|
||||
box-sizing: border-box;
|
||||
padding: 8px;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
border-radius: 4px;
|
||||
color: #fafafa;
|
||||
}
|
||||
|
||||
.my-process-designer {
|
||||
height: calc(100vh - 84px);
|
||||
}
|
||||
.process-panel__container {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 55px;
|
||||
height: calc(100vh - 84px);
|
||||
}
|
||||
|
||||
</style>
|
||||
75
src/views/bpm/oa/leave/create.vue
Normal file
75
src/views/bpm/oa/leave/create.vue
Normal file
@@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!-- 对话框(添加 / 修改) -->
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="开始时间" prop="startTime">
|
||||
<el-date-picker clearable size="small" v-model="form.startTime" type="date" value-format="timestamp" placeholder="选择开始时间" />
|
||||
</el-form-item>
|
||||
<el-form-item label="结束时间" prop="endTime">
|
||||
<el-date-picker clearable size="small" v-model="form.endTime" type="date" value-format="timestamp" placeholder="选择结束时间" />
|
||||
</el-form-item>
|
||||
<el-form-item label="请假类型" prop="type">
|
||||
<el-select v-model="form.type" placeholder="请选择">
|
||||
<el-option v-for="dict in typeDictData" :key="parseInt(dict.value)" :label="dict.label" :value="parseInt(dict.value)"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="原因" prop="reason">
|
||||
<el-col :span="10">
|
||||
<el-input type="textarea" :rows="3" v-model="form.reason" placeholder="请输入原因" />
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitForm">提 交</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { createLeave} from "@/api/bpm/leave"
|
||||
import { getDictDatas, DICT_TYPE } from '@/utils/dict'
|
||||
|
||||
export default {
|
||||
name: "BpmOALeaveCreate",
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 表单参数
|
||||
form: {
|
||||
startTime: undefined,
|
||||
endTime: undefined,
|
||||
type: undefined,
|
||||
reason: undefined,
|
||||
},
|
||||
// 表单校验
|
||||
rules: {
|
||||
startTime: [{ required: true, message: "开始时间不能为空", trigger: "blur" }],
|
||||
endTime: [{ required: true, message: "结束时间不能为空", trigger: "blur" }],
|
||||
type: [{ required: true, message: "请假类型不能为空", trigger: "change" }],
|
||||
reason: [{ required: true, message: "请假原因不能为空", trigger: "change" }],
|
||||
},
|
||||
|
||||
typeDictData: getDictDatas(DICT_TYPE.BPM_OA_LEAVE_TYPE),
|
||||
};
|
||||
},
|
||||
created() {
|
||||
},
|
||||
methods: {
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (!valid) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 添加的提交
|
||||
createLeave(this.form).then(response => {
|
||||
this.$modal.msgSuccess("发起成功");
|
||||
this.$tab.closeOpenPage({ path: "/bpm/oa/leave" });
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
59
src/views/bpm/oa/leave/detail.vue
Normal file
59
src/views/bpm/oa/leave/detail.vue
Normal file
@@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!-- 对话框(添加 / 修改) -->
|
||||
<el-form ref="form" :model="form" label-width="100px">
|
||||
<el-form-item label="开始时间：" prop="startTime"> {{parseTime(form.startTime, '{y}-{m}-{d}')}} </el-form-item>
|
||||
<el-form-item label="结束时间：" prop="endTime"> {{parseTime(form.endTime, '{y}-{m}-{d}')}} </el-form-item>
|
||||
<el-form-item label="请假类型：" prop="type">
|
||||
<dict-tag :type="DICT_TYPE.BPM_OA_LEAVE_TYPE" :value="form.type"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="原因：" prop="reason"> {{ form.reason }}</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getLeave} from "@/api/bpm/leave"
|
||||
import {getDictDatas, DICT_TYPE} from '@/utils/dict'
|
||||
export default {
|
||||
name: "BpmOALeaveDetail",
|
||||
components: {
|
||||
},
|
||||
props: {
|
||||
id: {
|
||||
type: [String, Number],
|
||||
default: undefined
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
leaveId: undefined, // 请假编号
|
||||
// 表单参数
|
||||
form: {
|
||||
startTime: undefined,
|
||||
endTime: undefined,
|
||||
type: undefined,
|
||||
reason: undefined,
|
||||
},
|
||||
|
||||
typeDictData: getDictDatas(DICT_TYPE.BPM_OA_LEAVE_TYPE),
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.leaveId = this.id || this.$route.query.id;
|
||||
if (!this.leaveId) {
|
||||
this.$message.error('未传递 id 参数，无法查看 OA 请假信息');
|
||||
return;
|
||||
}
|
||||
this.getDetail();
|
||||
},
|
||||
methods: {
|
||||
/** 获得请假信息 */
|
||||
getDetail() {
|
||||
getLeave(this.leaveId).then(response => {
|
||||
this.form = response.data;
|
||||
});
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
173
src/views/bpm/oa/leave/index.vue
Normal file
173
src/views/bpm/oa/leave/index.vue
Normal file
@@ -0,0 +1,173 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert title="工作流" url="https://doc.iocoder.cn/bpm" />
|
||||
|
||||
<!-- 搜索工作栏 -->
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="请假类型" prop="type">
|
||||
<el-select v-model="queryParams.type" placeholder="请选择请假类型" clearable>
|
||||
<el-option v-for="dict in leaveTypeDictData" :key="dict.value" :label="dict.label" :value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="申请时间" prop="createTime">
|
||||
<el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
|
||||
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
|
||||
</el-form-item>
|
||||
<el-form-item label="结果" prop="result">
|
||||
<el-select v-model="queryParams.result" placeholder="请选择流结果" clearable>
|
||||
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT)"
|
||||
:key="dict.value" :label="dict.label" :value="dict.value"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="原因" prop="reason">
|
||||
<el-input v-model="queryParams.reason" placeholder="请输入原因" clearable @keyup.enter.native="handleQuery"/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- 操作工具栏 -->
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button type="primary" plain icon="el-icon-plus" size="mini"
|
||||
v-hasPermi="['bpm:oa-leave:create']" @click="handleAdd">发起请假</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<!-- 列表 -->
|
||||
<el-table v-loading="loading" :data="list">
|
||||
<el-table-column label="申请编号" align="center" prop="id" />
|
||||
<el-table-column label="状态" align="center" prop="result">
|
||||
<template v-slot="scope">
|
||||
<dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT" :value="scope.row.result"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="开始时间" align="center" prop="startTime" width="180">
|
||||
<template v-slot="scope">
|
||||
<span>{{ parseTime(scope.row.startTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="结束时间" align="center" prop="endTime" width="180">
|
||||
<template v-slot="scope">
|
||||
<span>{{ parseTime(scope.row.endTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="请假类型" align="center" prop="type">
|
||||
<template v-slot="scope">
|
||||
<dict-tag :type="DICT_TYPE.BPM_OA_LEAVE_TYPE" :value="scope.row.type"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="原因" align="center" prop="reason" />
|
||||
<el-table-column label="申请时间" align="center" prop="applyTime" width="180">
|
||||
<template v-slot="scope">
|
||||
<span>{{ parseTime(scope.row.createTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
|
||||
<template v-slot="scope">
|
||||
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleCancel(scope.row)"
|
||||
v-hasPermi="['bpm:oa-leave:create']" v-if="scope.row.result === 1">取消请假</el-button>
|
||||
<el-button size="mini" type="text" icon="el-icon-view" @click="handleDetail(scope.row)"
|
||||
v-hasPermi="['bpm:oa-leave:query']">详情</el-button>
|
||||
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleProcessDetail(scope.row)">审批进度</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页组件 -->
|
||||
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"/>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getLeavePage } from "@/api/bpm/leave"
|
||||
import { getDictDatas, DICT_TYPE } from '@/utils/dict'
|
||||
import {cancelProcessInstance} from "@/api/bpm/processInstance";
|
||||
|
||||
export default {
|
||||
name: "BpmOALeave",
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 请假申请列表
|
||||
list: [],
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
result: null,
|
||||
type: null,
|
||||
reason: null,
|
||||
createTime: []
|
||||
},
|
||||
|
||||
leaveTypeDictData: getDictDatas(DICT_TYPE.BPM_OA_LEAVE_TYPE),
|
||||
leaveResultData: getDictDatas(DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT),
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
// 执行查询
|
||||
getLeavePage(this.queryParams).then(response => {
|
||||
this.list = response.data.list;
|
||||
this.total = response.data.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNo = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.$router.push({ name: "BpmOALeaveCreate"});
|
||||
},
|
||||
/** 详情按钮操作 */
|
||||
handleDetail(row) {
|
||||
this.$router.push({ name: "BpmOALeaveDetail", query: { id: row.id}});
|
||||
},
|
||||
/** 查看审批进度的操作 */
|
||||
handleProcessDetail(row) {
|
||||
this.$router.push({ name: "BpmProcessInstanceDetail", query: { id: row.processInstanceId}});
|
||||
},
|
||||
/** 取消请假 */
|
||||
handleCancel(row) {
|
||||
const id = row.processInstanceId;
|
||||
this.$prompt('请输入取消原因？', "取消流程", {
|
||||
type: 'warning',
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
inputPattern: /^[\s\S]*.*\S[\s\S]*$/, // 判断非空，且非空格
|
||||
inputErrorMessage: "取消原因不能为空",
|
||||
}).then(({ value }) => {
|
||||
return cancelProcessInstance(id, value);
|
||||
}).then(() => {
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("取消成功");
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
15
src/views/bpm/processExpression/index.vue
Normal file
15
src/views/bpm/processExpression/index.vue
Normal file
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert title="流程表达式" url="https://doc.iocoder.cn/bpm/expression/" />
|
||||
|
||||
<el-link type="danger" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3">
|
||||
该功能支持 Vue3 + element-plus 版本！
|
||||
</el-link>
|
||||
<br />
|
||||
<el-text>
|
||||
可参考 https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/processExpression/index.vue 代码，pull request 贡献给我们！
|
||||
</el-text>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
</script>
|
||||
170
src/views/bpm/processInstance/create/index.vue
Normal file
170
src/views/bpm/processInstance/create/index.vue
Normal file
@@ -0,0 +1,170 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert title="流程发起、取消、重新发起" url="https://doc.iocoder.cn/bpm/process-instance/" />
|
||||
|
||||
<!-- 第一步，通过流程定义的列表，选择对应的流程 -->
|
||||
<div v-if="!selectProcessInstance">
|
||||
<el-table v-loading="loading" :data="list">
|
||||
<el-table-column label="流程名称" align="center" prop="name" width="200">
|
||||
<template v-slot="scope">
|
||||
<el-button type="text" @click="handleBpmnDetail(scope.row)">
|
||||
<span>{{ scope.row.name }}</span>
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="流程分类" align="center" prop="category" width="100">
|
||||
<template v-slot="scope">
|
||||
<dict-tag :type="DICT_TYPE.BPM_MODEL_CATEGORY" :value="scope.row.category" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="流程版本" align="center" prop="processDefinition.version" width="80">
|
||||
<template v-slot="scope">
|
||||
<el-tag size="medium" v-if="scope.row">v{{ scope.row.version }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="流程描述" align="center" prop="description" width="300" show-overflow-tooltip />
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template v-slot="scope">
|
||||
<el-button type="text" size="small" icon="el-icon-plus" @click="handleSelect(scope.row)">选择</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<!-- 第二步，填写表单，进行流程的提交 -->
|
||||
<div v-else>
|
||||
<el-card class="box-card" >
|
||||
<div slot="header" class="clearfix">
|
||||
<span class="el-icon-document">申请信息【{{ selectProcessInstance.name }}】</span>
|
||||
<el-button style="float: right;" type="primary" @click="selectProcessInstance = undefined">选择其它流程</el-button>
|
||||
</div>
|
||||
<el-col :span="16" :offset="6">
|
||||
<div>
|
||||
<parser :key="new Date().getTime()" :form-conf="detailForm" @submit="submitForm" />
|
||||
</div>
|
||||
</el-col>
|
||||
</el-card>
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span class="el-icon-picture-outline">流程图</span>
|
||||
</div>
|
||||
<my-process-viewer key="designer" v-model="bpmnXML" v-bind="bpmnControlForm" />
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getProcessDefinitionBpmnXML, getProcessDefinitionList} from "@/api/bpm/definition";
|
||||
import {DICT_TYPE, getDictDatas} from "@/utils/dict";
|
||||
import {decodeFields} from "@/utils/formGenerator";
|
||||
import Parser from '@/components/parser/Parser'
|
||||
import {createProcessInstance} from "@/api/bpm/processInstance";
|
||||
|
||||
// 流程实例的发起
|
||||
export default {
|
||||
name: "ProcessInstanceCreate",
|
||||
components: {
|
||||
Parser
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 表格数据
|
||||
list: [],
|
||||
|
||||
// 流程表单详情
|
||||
detailForm: {
|
||||
fields: []
|
||||
},
|
||||
|
||||
// BPMN 数据
|
||||
bpmnXML: null,
|
||||
bpmnControlForm: {
|
||||
prefix: "flowable"
|
||||
},
|
||||
|
||||
// 流程表单
|
||||
selectProcessInstance: undefined, // 选择的流程实例
|
||||
|
||||
// 数据字典
|
||||
categoryDictDatas: getDictDatas(DICT_TYPE.BPM_MODEL_CATEGORY),
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询流程定义列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
getProcessDefinitionList({
|
||||
suspensionState: 1
|
||||
}).then(response => {
|
||||
this.list = response.data
|
||||
this.loading = false
|
||||
}
|
||||
);
|
||||
},
|
||||
/** 处理选择流程的按钮操作 **/
|
||||
handleSelect(row) {
|
||||
// 设置选择的流程
|
||||
this.selectProcessInstance = row;
|
||||
|
||||
// 流程表单
|
||||
if (row.formId) {
|
||||
// 设置对应的表单
|
||||
this.detailForm = {
|
||||
...JSON.parse(row.formConf),
|
||||
fields: decodeFields(row.formFields)
|
||||
}
|
||||
|
||||
// 加载流程图
|
||||
getProcessDefinitionBpmnXML(row.id).then(response => {
|
||||
this.bpmnXML = response.data
|
||||
})
|
||||
} else if (row.formCustomCreatePath) {
|
||||
this.$router.push({ path: row.formCustomCreatePath});
|
||||
// 这里暂时无需加载流程图，因为跳出到另外个 Tab；
|
||||
}
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm(params) {
|
||||
if (!params) {
|
||||
return;
|
||||
}
|
||||
// 设置表单禁用
|
||||
const conf = params.conf;
|
||||
conf.disabled = true; // 表单禁用
|
||||
conf.formBtns = false; // 按钮隐藏
|
||||
|
||||
// 提交表单，创建流程
|
||||
const variables = params.values;
|
||||
createProcessInstance({
|
||||
processDefinitionId: this.selectProcessInstance.id,
|
||||
variables: variables
|
||||
}).then(response => {
|
||||
this.$modal.msgSuccess("发起流程成功");
|
||||
// 关闭当前窗口
|
||||
this.$tab.closeOpenPage();
|
||||
this.$router.go(-1);
|
||||
}).catch(() => {
|
||||
conf.disabled = false; // 表单开启
|
||||
conf.formBtns = true; // 按钮展示
|
||||
})
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.my-process-designer {
|
||||
height: calc(100vh - 200px);
|
||||
}
|
||||
|
||||
.box-card {
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
536
src/views/bpm/processInstance/detail.vue
Normal file
536
src/views/bpm/processInstance/detail.vue
Normal file
@@ -0,0 +1,536 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!-- 审批信息 -->
|
||||
<el-card class="box-card" v-loading="processInstanceLoading" v-for="(item, index) in runningTasks" :key="index">
|
||||
<div slot="header" class="clearfix">
|
||||
<span class="el-icon-picture-outline">审批任务【{{ item.name }}】</span>
|
||||
</div>
|
||||
<el-col :span="16" :offset="6">
|
||||
<el-form :ref="'form' + index" :model="auditForms[index]" :rules="auditRule" label-width="100px">
|
||||
<el-form-item label="流程名" v-if="processInstance && processInstance.name">
|
||||
{{ processInstance.name }}
|
||||
</el-form-item>
|
||||
<el-form-item label="流程发起人" v-if="processInstance && processInstance.startUser">
|
||||
{{ processInstance.startUser.nickname }}
|
||||
<el-tag type="info" size="mini">{{ processInstance.startUser.deptName }}</el-tag>
|
||||
</el-form-item>
|
||||
<el-form-item label="审批建议" prop="reason">
|
||||
<el-input type="textarea" v-model="auditForms[index].reason" placeholder="请输入审批建议"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div style="margin-left: 10%; margin-bottom: 20px; font-size: 14px;">
|
||||
<el-button icon="el-icon-edit-outline" type="success" size="mini" @click="handleAudit(item, true)">通过
|
||||
</el-button>
|
||||
<el-button icon="el-icon-circle-close" type="danger" size="mini" @click="handleAudit(item, false)">不通过
|
||||
</el-button>
|
||||
<el-button icon="el-icon-edit-outline" type="primary" size="mini" @click="handleUpdateAssignee(item)">转办
|
||||
</el-button>
|
||||
<el-button icon="el-icon-edit-outline" type="primary" size="mini" @click="handleDelegate(item)">委派
|
||||
</el-button>
|
||||
<el-button icon="el-icon-refresh-left" type="warning" size="mini" @click="handleBackList(item)">退回
|
||||
</el-button>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-card>
|
||||
<!-- 申请信息 -->
|
||||
<el-card class="box-card" v-loading="processInstanceLoading">
|
||||
<div slot="header" class="clearfix">
|
||||
<span class="el-icon-document">申请信息【{{ processInstance.name }}】</span>
|
||||
</div>
|
||||
<el-col v-if="this.processInstance.processDefinition && this.processInstance.processDefinition.formType === 10"
|
||||
:span="16" :offset="6">
|
||||
<div>
|
||||
<parser :key="new Date().getTime()" :form-conf="detailForm"/>
|
||||
</div>
|
||||
</el-col>
|
||||
<div v-if="this.processInstance.processDefinition && this.processInstance.processDefinition.formType === 20">
|
||||
<async-biz-form-component :id="this.processInstance.businessKey"></async-biz-form-component>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<!-- 审批记录 -->
|
||||
<el-card class="box-card" v-loading="tasksLoad">
|
||||
<div slot="header" class="clearfix">
|
||||
<span class="el-icon-picture-outline">审批记录</span>
|
||||
</div>
|
||||
<el-col :span="16" :offset="4">
|
||||
<div class="block">
|
||||
<el-timeline>
|
||||
<el-timeline-item v-for="(item, index) in tasks" :key="index"
|
||||
:icon="getTimelineItemIcon(item)" :type="getTimelineItemType(item)">
|
||||
<p style="font-weight: 700">任务：{{ item.name }}</p>
|
||||
<el-card :body-style="{ padding: '10px' }">
|
||||
<label v-if="item.assigneeUser" style="font-weight: normal; margin-right: 30px;">
|
||||
审批人：{{ item.assigneeUser.nickname }}
|
||||
<el-tag type="info" size="mini">{{ item.assigneeUser.deptName }}</el-tag>
|
||||
</label>
|
||||
<label style="font-weight: normal" v-if="item.createTime">创建时间：</label>
|
||||
<label style="color:#8a909c; font-weight: normal">{{ parseTime(item.createTime) }}</label>
|
||||
<label v-if="item.endTime" style="margin-left: 30px;font-weight: normal">审批时间：</label>
|
||||
<label v-if="item.endTime" style="color:#8a909c;font-weight: normal"> {{
|
||||
parseTime(item.endTime)
|
||||
}}</label>
|
||||
<label v-if="item.durationInMillis" style="margin-left: 30px;font-weight: normal">耗时：</label>
|
||||
<label v-if="item.durationInMillis" style="color:#8a909c;font-weight: normal">
|
||||
{{ getDateStar(item.durationInMillis) }} </label>
|
||||
<p v-if="item.reason">
|
||||
<el-tag :type="getTimelineItemType(item)">{{ item.reason }}</el-tag>
|
||||
</p>
|
||||
</el-card>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-card>
|
||||
|
||||
<!-- 高亮流程图 -->
|
||||
<el-card class="box-card" v-loading="processInstanceLoading">
|
||||
<div slot="header" class="clearfix">
|
||||
<span class="el-icon-picture-outline">流程图</span>
|
||||
</div>
|
||||
<my-process-viewer key="designer" v-model="bpmnXML" v-bind="bpmnControlForm" :activityData="activityList"
|
||||
:processInstanceData="processInstance" :taskData="tasks"/>
|
||||
</el-card>
|
||||
|
||||
<!-- 对话框(转办审批人) -->
|
||||
<el-dialog title="转办审批人" :visible.sync="updateAssignee.open" width="500px" append-to-body>
|
||||
<el-form ref="updateAssigneeForm" :model="updateAssignee.form" :rules="updateAssignee.rules" label-width="110px">
|
||||
<el-form-item label="新审批人" prop="assigneeUserId">
|
||||
<el-select v-model="updateAssignee.form.assigneeUserId" clearable style="width: 100%">
|
||||
<el-option v-for="item in userOptions" :key="parseInt(item.id)" :label="item.nickname"
|
||||
:value="parseInt(item.id)"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitUpdateAssigneeForm">确 定</el-button>
|
||||
<el-button @click="cancelUpdateAssigneeForm">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 对话框(委派审批人) -->
|
||||
<el-dialog title="委派审批人" :visible.sync="updateDelegate.open" width="500px" append-to-body>
|
||||
<el-form ref="updateDelegateForm" :model="updateDelegate.form" :rules="updateDelegate.rules" label-width="110px">
|
||||
<el-form-item label="新审批人" prop="assigneeUserId">
|
||||
<el-select v-model="updateDelegate.form.delegateUserId" clearable style="width: 100%">
|
||||
<el-option v-for="item in userOptions" :key="parseInt(item.id)" :label="item.nickname"
|
||||
:value="parseInt(item.id)"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="委派理由" prop="reason">
|
||||
<el-input v-model="updateDelegate.form.reason" clearable placeholder="请输入委派理由"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitUpdateDelegateForm">确 定</el-button>
|
||||
<el-button @click="cancelUpdateDelegateForm">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!--退回流程-->
|
||||
<el-dialog title="退回流程" :visible.sync="returnOpen" width="40%" append-to-body>
|
||||
<el-form ref="formRef" v-loading="formLoading" :model="formData" :rules="formRules" label-width="110px">
|
||||
<el-form-item label="退回节点" prop="targetDefinitionKey">
|
||||
<el-select v-model="formData.targetDefinitionKey" clearable style="width: 100%">
|
||||
<el-option
|
||||
v-for="item in returnList"
|
||||
:key="item.definitionKey"
|
||||
:label="item.name"
|
||||
:value="item.definitionKey"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="回退理由" prop="reason">
|
||||
<el-input v-model="formData.reason" clearable placeholder="请输入回退理由"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="returnOpen = false">取 消</el-button>
|
||||
<el-button :disabled="formLoading" type="primary" @click="submitReturn">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getProcessDefinitionBpmnXML} from "@/api/bpm/definition";
|
||||
import store from "@/store";
|
||||
import {decodeFields} from "@/utils/formGenerator";
|
||||
import Parser from '@/components/parser/Parser'
|
||||
import {getProcessInstance} from "@/api/bpm/processInstance";
|
||||
import {
|
||||
approveTask,
|
||||
delegateTask,
|
||||
getReturnList,
|
||||
getTaskListByProcessInstanceId,
|
||||
rejectTask,
|
||||
returnTask,
|
||||
updateTaskAssignee,
|
||||
} from "@/api/bpm/task";
|
||||
import {getDate} from "@/utils/dateUtils";
|
||||
import {listSimpleUsers} from "@/api/system/user";
|
||||
import {getActivityList} from "@/api/bpm/activity";
|
||||
import Vue from "vue";
|
||||
|
||||
// 流程实例的详情页，可用于审批
|
||||
export default {
|
||||
name: "ProcessInstanceDetail",
|
||||
components: {
|
||||
Parser
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
processInstanceLoading: true,
|
||||
// 流程实例
|
||||
id: undefined, // 流程实例的编号
|
||||
processInstance: {},
|
||||
formLoading: false,
|
||||
// 流程表单详情
|
||||
detailForm: {
|
||||
fields: []
|
||||
},
|
||||
//回退列表数据
|
||||
returnList: [],
|
||||
formData: {
|
||||
id: '',
|
||||
targetDefinitionKey: undefined,
|
||||
reason: ''
|
||||
},
|
||||
formRules: {
|
||||
targetDefinitionKey: [{required: true, message: '必须选择回退节点', trigger: 'change'}],
|
||||
reason: [{required: true, message: '回退理由不能为空', trigger: 'blur'}]
|
||||
},
|
||||
returnOpen: false,
|
||||
// BPMN 数据
|
||||
bpmnXML: null,
|
||||
bpmnControlForm: {
|
||||
prefix: "flowable"
|
||||
},
|
||||
activityList: [],
|
||||
|
||||
// 审批记录
|
||||
tasksLoad: true,
|
||||
tasks: [],
|
||||
|
||||
// 审批表单
|
||||
runningTasks: [],
|
||||
auditForms: [],
|
||||
auditRule: {
|
||||
reason: [{required: true, message: "审批建议不能为空", trigger: "blur"}],
|
||||
},
|
||||
// 转派审批人
|
||||
userOptions: [],
|
||||
updateAssignee: {
|
||||
open: false,
|
||||
form: {
|
||||
assigneeUserId: undefined,
|
||||
},
|
||||
rules: {
|
||||
assigneeUserId: [{required: true, message: "新审批人不能为空", trigger: "change"}],
|
||||
}
|
||||
},
|
||||
updateDelegate: {
|
||||
open: false,
|
||||
form: {
|
||||
delegateUserId: undefined,
|
||||
reason: ''
|
||||
},
|
||||
rules: {
|
||||
delegateUserId: [{required: true, message: "新审批人不能为空", trigger: "change"}],
|
||||
reason: [{required: true, message: '委派理由不能为空', trigger: 'blur'}]
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.id = this.$route.query.id;
|
||||
if (!this.id) {
|
||||
this.$message.error('未传递 id 参数，无法查看流程信息');
|
||||
return;
|
||||
}
|
||||
this.getDetail();
|
||||
|
||||
// 获得用户列表
|
||||
this.userOptions = [];
|
||||
listSimpleUsers().then(response => {
|
||||
this.userOptions.push(...response.data);
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
/** 获得流程实例 */
|
||||
getDetail() {
|
||||
// 获得流程实例相关
|
||||
this.processInstanceLoading = true;
|
||||
getProcessInstance(this.id).then(response => {
|
||||
if (!response.data) {
|
||||
this.$message.error('查询不到流程信息！');
|
||||
return;
|
||||
}
|
||||
// 设置流程信息
|
||||
this.processInstance = response.data;
|
||||
|
||||
//将业务表单，注册为动态组件
|
||||
const path = this.processInstance.processDefinition.formCustomViewPath;
|
||||
Vue.component("async-biz-form-component", function (resolve) {
|
||||
require([`@/views${path}`], resolve);
|
||||
});
|
||||
|
||||
// 设置表单信息
|
||||
if (this.processInstance.processDefinition.formType === 10) {
|
||||
this.detailForm = {
|
||||
...JSON.parse(this.processInstance.processDefinition.formConf),
|
||||
disabled: true, // 表单禁用
|
||||
formBtns: false, // 按钮隐藏
|
||||
fields: decodeFields(this.processInstance.processDefinition.formFields)
|
||||
}
|
||||
// 设置表单的值
|
||||
this.detailForm.fields.forEach(item => {
|
||||
const val = this.processInstance.formVariables[item.__vModel__]
|
||||
if (val) {
|
||||
item.__config__.defaultValue = val
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 加载流程图
|
||||
getProcessDefinitionBpmnXML(this.processInstance.processDefinition.id).then(response => {
|
||||
this.bpmnXML = response.data
|
||||
});
|
||||
// 加载活动列表
|
||||
getActivityList({
|
||||
processInstanceId: this.processInstance.id
|
||||
}).then(response => {
|
||||
this.activityList = response.data;
|
||||
});
|
||||
|
||||
// 取消加载中
|
||||
this.processInstanceLoading = false;
|
||||
});
|
||||
|
||||
// 获得流程任务列表（审批记录）
|
||||
this.tasksLoad = true;
|
||||
this.runningTasks = [];
|
||||
this.auditForms = [];
|
||||
getTaskListByProcessInstanceId(this.id).then(response => {
|
||||
// 审批记录
|
||||
this.tasks = [];
|
||||
// 移除已取消的审批
|
||||
response.data.forEach(task => {
|
||||
if (task.result !== 4) {
|
||||
this.tasks.push(task);
|
||||
}
|
||||
});
|
||||
// 排序，将未完成的排在前面，已完成的排在后面；
|
||||
this.tasks.sort((a, b) => {
|
||||
// 有已完成的情况，按照完成时间倒序
|
||||
if (a.endTime && b.endTime) {
|
||||
return b.endTime - a.endTime;
|
||||
} else if (a.endTime) {
|
||||
return 1;
|
||||
} else if (b.endTime) {
|
||||
return -1;
|
||||
// 都是未完成，按照创建时间倒序
|
||||
} else {
|
||||
return b.createTime - a.createTime;
|
||||
}
|
||||
});
|
||||
|
||||
// 需要审核的记录
|
||||
const userId = store.getters.userId;
|
||||
this.tasks.forEach(task => {
|
||||
if (task.result !== 1 && task.result !== 6) { // 只有待处理才需要
|
||||
return;
|
||||
}
|
||||
if (!task.assigneeUser || task.assigneeUser.id !== userId) { // 自己不是处理人
|
||||
return;
|
||||
}
|
||||
this.runningTasks.push({...task});
|
||||
this.auditForms.push({
|
||||
reason: ''
|
||||
})
|
||||
});
|
||||
|
||||
// 取消加载中
|
||||
this.tasksLoad = false;
|
||||
});
|
||||
},
|
||||
getDateStar(ms) {
|
||||
return getDate(ms);
|
||||
},
|
||||
getTimelineItemIcon(item) {
|
||||
if (item.result === 1) {
|
||||
return 'el-icon-time';
|
||||
}
|
||||
if (item.result === 2) {
|
||||
return 'el-icon-check';
|
||||
}
|
||||
if (item.result === 3) {
|
||||
return 'el-icon-close';
|
||||
}
|
||||
if (item.result === 4) {
|
||||
return 'el-icon-remove-outline';
|
||||
}
|
||||
if (item.result === 5) {
|
||||
return 'el-icon-back'
|
||||
}
|
||||
return '';
|
||||
},
|
||||
getTimelineItemType(item) {
|
||||
if (item.result === 1) {
|
||||
return 'primary';
|
||||
}
|
||||
if (item.result === 2) {
|
||||
return 'success';
|
||||
}
|
||||
if (item.result === 3) {
|
||||
return 'danger';
|
||||
}
|
||||
if (item.result === 4) {
|
||||
return 'info';
|
||||
}
|
||||
if (item.result === 5) {
|
||||
return 'warning';
|
||||
}
|
||||
if (item.result === 6) {
|
||||
return 'default'
|
||||
}
|
||||
return '';
|
||||
},
|
||||
/** 处理审批通过和不通过的操作 */
|
||||
handleAudit(task, pass) {
|
||||
const index = this.runningTasks.indexOf(task);
|
||||
this.$refs['form' + index][0].validate(valid => {
|
||||
if (!valid) {
|
||||
return;
|
||||
}
|
||||
const data = {
|
||||
id: task.id,
|
||||
reason: this.auditForms[index].reason
|
||||
}
|
||||
if (pass) {
|
||||
approveTask(data).then(response => {
|
||||
this.$modal.msgSuccess("审批通过成功！");
|
||||
this.getDetail(); // 获得最新详情
|
||||
});
|
||||
} else {
|
||||
rejectTask(data).then(response => {
|
||||
this.$modal.msgSuccess("审批不通过成功！");
|
||||
this.getDetail(); // 获得最新详情
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 处理转办审批人 */
|
||||
handleUpdateAssignee(task) {
|
||||
// 设置表单
|
||||
this.resetUpdateAssigneeForm();
|
||||
this.updateAssignee.form.id = task.id;
|
||||
// 设置为打开
|
||||
this.updateAssignee.open = true;
|
||||
},
|
||||
/** 提交转办审批人 */
|
||||
submitUpdateAssigneeForm() {
|
||||
this.$refs['updateAssigneeForm'].validate(valid => {
|
||||
if (!valid) {
|
||||
return;
|
||||
}
|
||||
updateTaskAssignee(this.updateAssignee.form).then(response => {
|
||||
this.$modal.msgSuccess("转办任务成功！");
|
||||
this.updateAssignee.open = false;
|
||||
this.getDetail(); // 获得最新详情
|
||||
});
|
||||
});
|
||||
},
|
||||
/** 取消转办审批人 */
|
||||
cancelUpdateAssigneeForm() {
|
||||
this.updateAssignee.open = false;
|
||||
this.resetUpdateAssigneeForm();
|
||||
},
|
||||
/** 重置转办审批人 */
|
||||
resetUpdateAssigneeForm() {
|
||||
this.updateAssignee.form = {
|
||||
id: undefined,
|
||||
assigneeUserId: undefined,
|
||||
};
|
||||
this.resetForm("updateAssigneeForm");
|
||||
},
|
||||
/** 处理审批委派的操作 */
|
||||
handleDelegate(task) {
|
||||
//this.$modal.msgError("暂不支持【委派】功能，可以使用【转派】替代！");
|
||||
this.resetUpdateDelegateForm();
|
||||
this.updateDelegate.form.id = task.id;
|
||||
// 设置为打开
|
||||
this.updateDelegate.open = true;
|
||||
},
|
||||
/** 提交委派审批人 */
|
||||
submitUpdateDelegateForm() {
|
||||
this.$refs['updateDelegateForm'].validate(valid => {
|
||||
if (!valid) {
|
||||
return;
|
||||
}
|
||||
delegateTask(this.updateDelegate.form).then(response => {
|
||||
this.$modal.msgSuccess("委派任务成功！");
|
||||
this.updateDelegate.open = false;
|
||||
this.getDetail(); // 获得最新详情
|
||||
});
|
||||
});
|
||||
},
|
||||
/** 取消委派审批人 */
|
||||
cancelUpdateDelegateForm() {
|
||||
this.updateDelegate.open = false;
|
||||
this.resetUpdateDelegateForm();
|
||||
},
|
||||
/** 重置委派审批人 */
|
||||
resetUpdateDelegateForm() {
|
||||
this.updateDelegate.form = {
|
||||
id: undefined,
|
||||
delegateUserId: undefined,
|
||||
};
|
||||
this.resetForm("updateDelegateForm");
|
||||
},
|
||||
/** 处理审批退回的操作 */
|
||||
/** 返回退回节点列表 */
|
||||
handleBackList(task) {
|
||||
// 可参考 http://blog.wya1.com/article/636697030/details/7296
|
||||
getReturnList(task.id).then(response => {
|
||||
this.returnList = response.data;
|
||||
if (this.returnList.length == 0) {
|
||||
this.$modal.msgError("当前没有可回退的节点！");
|
||||
return;
|
||||
}
|
||||
this.formData.id = task.id;
|
||||
this.returnOpen = true;
|
||||
});
|
||||
|
||||
},
|
||||
/** 提交退回任务 */
|
||||
submitReturn() {
|
||||
if (!this.formData.targetDefinitionKey) {
|
||||
this.$modal.msgError("请选择退回节点！");
|
||||
}
|
||||
this.$refs['formRef'].validate(valid => {
|
||||
if (!valid) {
|
||||
return;
|
||||
}
|
||||
returnTask(this.formData).then(res => {
|
||||
if (res.data) {
|
||||
this.$modal.msgSuccess("回退成功！");
|
||||
this.returnOpen = false;
|
||||
this.getDetail();
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.my-process-designer {
|
||||
height: calc(100vh - 200px);
|
||||
}
|
||||
|
||||
.box-card {
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
185
src/views/bpm/processInstance/index.vue
Normal file
185
src/views/bpm/processInstance/index.vue
Normal file
@@ -0,0 +1,185 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert title="工作流" url="https://doc.iocoder.cn/bpm" />
|
||||
|
||||
<!-- 搜索工作栏 -->
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="流程名" prop="name">
|
||||
<el-input v-model="queryParams.name" placeholder="请输入流程名" clearable @keyup.enter.native="handleQuery"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="所属流程" prop="processDefinitionId">
|
||||
<el-input v-model="queryParams.processDefinitionId" placeholder="请输入流程定义的编号" clearable @keyup.enter.native="handleQuery"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="流程分类" prop="category">
|
||||
<el-select v-model="queryParams.category" placeholder="请选择流程分类" clearable>
|
||||
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.BPM_MODEL_CATEGORY)"
|
||||
:key="dict.value" :label="dict.label" :value="dict.value"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="提交时间" prop="createTime">
|
||||
<el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
|
||||
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
|
||||
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS)"
|
||||
:key="dict.value" :label="dict.label" :value="dict.value"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="结果" prop="result">
|
||||
<el-select v-model="queryParams.result" placeholder="请选择流结果" clearable>
|
||||
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT)"
|
||||
:key="dict.value" :label="dict.label" :value="dict.value"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- 操作工具栏 -->
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
|
||||
v-hasPermi="['bpm:process-instance:query']">发起流程</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<!-- 列表 -->
|
||||
<el-table v-loading="loading" :data="list">
|
||||
<el-table-column label="编号" align="center" prop="id" width="320" />
|
||||
<el-table-column label="流程名" align="center" prop="name" />
|
||||
<el-table-column label="流程分类" align="center" prop="category">
|
||||
<template v-slot="scope">
|
||||
<dict-tag :type="DICT_TYPE.BPM_MODEL_CATEGORY" :value="scope.row.category" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="当前审批任务" align="center" prop="tasks">
|
||||
<template v-slot="scope">
|
||||
<el-button v-for="task in scope.row.tasks" :key="task.id" type="text"">
|
||||
<span>{{ task.name }}</span>
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" align="center" prop="status">
|
||||
<template v-slot="scope">
|
||||
<dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS" :value="scope.row.status" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="结果" align="center" prop="result">
|
||||
<template v-slot="scope">
|
||||
<dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT" :value="scope.row.result"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="提交时间" align="center" prop="createTime" width="180">
|
||||
<template v-slot="scope">
|
||||
<span>{{ parseTime(scope.row.createTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="结束时间" align="center" prop="createTime" width="180">
|
||||
<template v-slot="scope">
|
||||
<span>{{ parseTime(scope.row.endTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template v-slot="scope">
|
||||
<el-button type="text" size="small" icon="el-icon-delete" v-if="scope.row.result === 1"
|
||||
v-hasPermi="['bpm:process-instance:cancel']" @click="handleCancel(scope.row)">取消</el-button>
|
||||
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleDetail(scope.row)"
|
||||
v-hasPermi="['bpm:process-instance:query']">详情</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页组件 -->
|
||||
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"/>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getMyProcessInstancePage, cancelProcessInstance } from "@/api/bpm/processInstance";
|
||||
|
||||
export default {
|
||||
name: "BpmProcessInstance",
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 工作流的流程实例的拓展列表
|
||||
list: [],
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
name: null,
|
||||
processDefinitionId: null,
|
||||
category: null,
|
||||
status: null,
|
||||
result: null,
|
||||
createTime: []
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
activated() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
// 执行查询
|
||||
getMyProcessInstancePage(this.queryParams).then(response => {
|
||||
this.list = response.data.list;
|
||||
this.total = response.data.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNo = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
/** 新增按钮操作 **/
|
||||
handleAdd() {
|
||||
this.$router.push({ name: "BpmProcessInstanceCreate"})
|
||||
},
|
||||
/** 取消按钮操作 */
|
||||
handleCancel(row) {
|
||||
const id = row.id;
|
||||
this.$prompt('请输入取消原因？', "取消流程", {
|
||||
type: 'warning',
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
inputPattern: /^[\s\S]*.*\S[\s\S]*$/, // 判断非空，且非空格
|
||||
inputErrorMessage: "取消原因不能为空",
|
||||
}).then(({ value }) => {
|
||||
return cancelProcessInstance(id, value);
|
||||
}).then(() => {
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("取消成功");
|
||||
})
|
||||
},
|
||||
/** 处理详情按钮 */
|
||||
handleDetail(row) {
|
||||
this.$router.push({ name: "BpmProcessInstanceDetail", query: { id: row.id}});
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
15
src/views/bpm/processInstance/manager/index.vue
Normal file
15
src/views/bpm/processInstance/manager/index.vue
Normal file
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert title="工作流手册" url="https://doc.iocoder.cn/bpm/" />
|
||||
|
||||
<el-link type="danger" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3">
|
||||
该功能支持 Vue3 + element-plus 版本！
|
||||
</el-link>
|
||||
<br />
|
||||
<el-text>
|
||||
可参考 https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/processInstance/manager/index.vue 代码，pull request 贡献给我们！
|
||||
</el-text>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
</script>
|
||||
15
src/views/bpm/processListener/index.vue
Normal file
15
src/views/bpm/processListener/index.vue
Normal file
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert title="执行监听器、任务监听器" url="https://doc.iocoder.cn/bpm/listener/" />
|
||||
|
||||
<el-link type="danger" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3">
|
||||
该功能支持 Vue3 + element-plus 版本！
|
||||
</el-link>
|
||||
<br />
|
||||
<el-text>
|
||||
可参考 https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/processListener/index.vue 代码，pull request 贡献给我们！
|
||||
</el-text>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
</script>
|
||||
18
src/views/bpm/task/copy/index.vue
Normal file
18
src/views/bpm/task/copy/index.vue
Normal file
@@ -0,0 +1,18 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert
|
||||
title="审批转办、委派、抄送"
|
||||
url="https://doc.iocoder.cn/bpm/task-delegation-and-cc/"
|
||||
/>
|
||||
|
||||
<el-link type="danger" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3">
|
||||
该功能支持 Vue3 + element-plus 版本！
|
||||
</el-link>
|
||||
<br />
|
||||
<el-text>
|
||||
可参考 https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/task/copy/index.vue 代码，pull request 贡献给我们！
|
||||
</el-text>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
</script>
|
||||
120
src/views/bpm/task/done/index.vue
Normal file
120
src/views/bpm/task/done/index.vue
Normal file
@@ -0,0 +1,120 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert title="工作流" url="https://doc.iocoder.cn/bpm" />
|
||||
|
||||
<!-- 搜索工作栏 -->
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="流程名" prop="name">
|
||||
<el-input v-model="queryParams.name" placeholder="请输入流程名" clearable @keyup.enter.native="handleQuery"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="创建时间" prop="createTime">
|
||||
<el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
|
||||
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- 列表 -->
|
||||
<el-table v-loading="loading" :data="list">
|
||||
<el-table-column label="任务编号" align="center" prop="id" width="320" fixed />
|
||||
<el-table-column label="任务名称" align="center" prop="name" width="200" />
|
||||
<el-table-column label="所属流程" align="center" prop="processInstance.name" width="200" />
|
||||
<el-table-column label="流程发起人" align="center" prop="processInstance.startUserNickname" width="120" />
|
||||
<el-table-column label="结果" align="center" prop="result">
|
||||
<template v-slot="scope">
|
||||
<dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT" :value="scope.row.result"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="审批意见" align="center" prop="reason" width="200" />
|
||||
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
|
||||
<template v-slot="scope">
|
||||
<span>{{ parseTime(scope.row.createTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="审批时间" align="center" prop="endTime" width="180">
|
||||
<template v-slot="scope">
|
||||
<span>{{ parseTime(scope.row.endTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="耗时" align="center" prop="durationInMillis" width="180">
|
||||
<template v-slot="scope">
|
||||
<span>{{ getDateStar(scope.row.durationInMillis) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width">
|
||||
<template v-slot="scope">
|
||||
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleAudit(scope.row)"
|
||||
v-hasPermi="['bpm:task:query']">详情</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页组件 -->
|
||||
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"/>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getDoneTaskPage} from '@/api/bpm/task'
|
||||
import {getDate} from "@/utils/dateUtils";
|
||||
|
||||
export default {
|
||||
name: "BpmDoneTask",
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 已办任务列表
|
||||
list: [],
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
name: null,
|
||||
createTime: []
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
getDoneTaskPage(this.queryParams).then(response => {
|
||||
this.list = response.data.list;
|
||||
this.total = response.data.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNo = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
getDateStar(ms) {
|
||||
return getDate(ms);
|
||||
},
|
||||
/** 处理审批按钮 */
|
||||
handleAudit(row) {
|
||||
this.$router.push({ name: "BpmProcessInstanceDetail", query: { id: row.processInstance.id}});
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
15
src/views/bpm/task/manager/index.vue
Normal file
15
src/views/bpm/task/manager/index.vue
Normal file
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert title="工作流手册" url="https://doc.iocoder.cn/bpm/" />
|
||||
|
||||
<el-link type="danger" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3">
|
||||
该功能支持 Vue3 + element-plus 版本！
|
||||
</el-link>
|
||||
<br />
|
||||
<el-text>
|
||||
可参考 https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/task/manager/index.vue 代码，pull request 贡献给我们！
|
||||
</el-text>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
</script>
|
||||
107
src/views/bpm/task/todo/index.vue
Normal file
107
src/views/bpm/task/todo/index.vue
Normal file
@@ -0,0 +1,107 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert title="工作流" url="https://doc.iocoder.cn/bpm" />
|
||||
|
||||
<!-- 搜索工作栏 -->
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="流程名" prop="name">
|
||||
<el-input v-model="queryParams.name" placeholder="请输入流程名" clearable @keyup.enter.native="handleQuery"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="创建时间" prop="createTime">
|
||||
<el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
|
||||
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- 列表 -->
|
||||
<el-table v-loading="loading" :data="list">
|
||||
<el-table-column label="任务编号" align="center" prop="id" width="320" />
|
||||
<el-table-column label="任务名称" align="center" prop="name" />
|
||||
<el-table-column label="所属流程" align="center" prop="processInstance.name" />
|
||||
<el-table-column label="流程发起人" align="center" prop="processInstance.startUserNickname" />
|
||||
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
|
||||
<template v-slot="scope">
|
||||
<span>{{ parseTime(scope.row.createTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" align="center" prop="version" width="80">
|
||||
<template v-slot="scope">
|
||||
<el-tag type="success" v-if="scope.row.suspensionState === 1">激活</el-tag>
|
||||
<el-tag type="warning" v-if="scope.row.suspensionState === 2">挂起</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template v-slot="scope">
|
||||
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleAudit(scope.row)"
|
||||
v-hasPermi="['bpm:task:update']">审批</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页组件 -->
|
||||
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"/>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getTodoTaskPage} from '@/api/bpm/task'
|
||||
|
||||
export default {
|
||||
name: "BpmTodoTask",
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 待办任务列表
|
||||
list: [],
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
name: null,
|
||||
createTime: []
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
// 处理查询参数
|
||||
getTodoTaskPage(this.queryParams).then(response => {
|
||||
this.list = response.data.list;
|
||||
this.total = response.data.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNo = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
/** 处理审批按钮 */
|
||||
handleAudit(row) {
|
||||
this.$router.push({ name: "BpmProcessInstanceDetail", query: { id: row.processInstance.id}});
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
337
src/views/bpm/taskAssignRule/taskAssignRuleDialog.vue
Normal file
337
src/views/bpm/taskAssignRule/taskAssignRuleDialog.vue
Normal file
@@ -0,0 +1,337 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 列表弹窗 -->
|
||||
<el-dialog title="任务分配规则" :visible.sync="visible" width="800px" append-to-body>
|
||||
<el-table v-loading="loading" :data="list">
|
||||
<el-table-column label="任务名" align="center" prop="taskDefinitionName" width="120" fixed />
|
||||
<el-table-column label="任务标识" align="center" prop="taskDefinitionKey" width="120" show-tooltip-when-overflow />
|
||||
<el-table-column label="规则类型" align="center" prop="type" width="120">
|
||||
<template v-slot="scope">
|
||||
<dict-tag :type="DICT_TYPE.BPM_TASK_ASSIGN_RULE_TYPE" :value="scope.row.type" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="规则范围" align="center" prop="options" width="440px">
|
||||
<template v-slot="scope">
|
||||
<el-tag size="medium" v-if="scope.row.options" :key="option" v-for="option in scope.row.options">
|
||||
{{ getAssignRuleOptionName(scope.row.type, option) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column v-if="modelId" label="操作" align="center" width="80" fixed="right">
|
||||
<template v-slot="scope">
|
||||
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdateTaskAssignRule(scope.row)"
|
||||
v-hasPermi="['bpm:task-assign-rule:update']">修改</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-dialog>
|
||||
<!-- 添加/修改弹窗 -->
|
||||
<el-dialog title="修改任务规则" :visible.sync="open" width="500px" append-to-body>
|
||||
<el-form ref="taskAssignRuleForm" :model="form" :rules="rules" label-width="110px">
|
||||
<el-form-item label="任务名称" prop="taskDefinitionName">
|
||||
<el-input v-model="form.taskDefinitionName" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item label="任务标识" prop="taskDefinitionKey">
|
||||
<el-input v-model="form.taskDefinitionKey" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item label="规则类型" prop="type">
|
||||
<el-select v-model="form.type" clearable style="width: 100%">
|
||||
<el-option v-for="dict in taskAssignRuleTypeDictDatas" :key="parseInt(dict.value)" :label="dict.label" :value="parseInt(dict.value)"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.type === 10" label="指定角色" prop="roleIds">
|
||||
<el-select v-model="form.roleIds" multiple clearable style="width: 100%">
|
||||
<el-option v-for="item in roleOptions" :key="parseInt(item.id)" :label="item.name" :value="parseInt(item.id)" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.type === 20 || form.type === 21" label="指定部门" prop="deptIds">
|
||||
<treeselect v-model="form.deptIds" :options="deptTreeOptions" multiple flat :defaultExpandLevel="3"
|
||||
placeholder="请选择指定部门" :normalizer="normalizer"/>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.type === 22" label="指定岗位" prop="postIds">
|
||||
<el-select v-model="form.postIds" multiple clearable style="width: 100%">
|
||||
<el-option v-for="item in postOptions" :key="parseInt(item.id)" :label="item.name" :value="parseInt(item.id)" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.type === 30 || form.type === 31 || form.type === 32" label="指定用户" prop="userIds">
|
||||
<el-select v-model="form.userIds" multiple clearable style="width: 100%">
|
||||
<el-option v-for="item in userOptions" :key="parseInt(item.id)" :label="item.nickname" :value="parseInt(item.id)" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.type === 40" label="指定用户组" prop="userGroupIds">
|
||||
<el-select v-model="form.userGroupIds" multiple clearable style="width: 100%">
|
||||
<el-option v-for="item in userGroupOptions" :key="parseInt(item.id)" :label="item.name" :value="parseInt(item.id)" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.type === 50" label="指定脚本" prop="scripts">
|
||||
<el-select v-model="form.scripts" multiple clearable style="width: 100%">
|
||||
<el-option v-for="dict in taskAssignScriptDictDatas" :key="parseInt(dict.value)"
|
||||
:label="dict.label" :value="parseInt(dict.value)"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitAssignRuleForm">确 定</el-button>
|
||||
<el-button @click="cancelAssignRuleForm">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {DICT_TYPE, getDictDatas} from "@/utils/dict";
|
||||
import {createTaskAssignRule, getTaskAssignRuleList, updateTaskAssignRule} from "@/api/bpm/taskAssignRule";
|
||||
import {listSimpleRoles} from "@/api/system/role";
|
||||
import {listSimpleDepts} from "@/api/system/dept";
|
||||
|
||||
import Treeselect from "@riophae/vue-treeselect";
|
||||
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
||||
import {listSimplePosts} from "@/api/system/post";
|
||||
import {listSimpleUsers} from "@/api/system/user";
|
||||
import {listSimpleUserGroups} from "@/api/bpm/userGroup";
|
||||
|
||||
export default {
|
||||
name: "BpmTaskAssignRule",
|
||||
components: {
|
||||
Treeselect
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 如下参数，可传递
|
||||
modelId: undefined, // 流程模型的编号。如果 modelId 非空，则用于流程模型的查看与配置
|
||||
processDefinitionId: undefined, // 流程定义的编号。如果 processDefinitionId 非空，则用于流程定义的查看，不支持配置
|
||||
visible: false,
|
||||
|
||||
// 任务分配规则表单
|
||||
row: undefined, // 选中的流程模型
|
||||
list: [], // 选中流程模型的任务分配规则们
|
||||
loading: false, // 加载中
|
||||
open: false, // 是否打开
|
||||
form: {}, // 表单
|
||||
rules: { // 表单校验规则
|
||||
type: [{ required: true, message: "规则类型不能为空", trigger: "change" }],
|
||||
roleIds: [{required: true, message: "指定角色不能为空", trigger: "change" }],
|
||||
deptIds: [{required: true, message: "指定部门不能为空", trigger: "change" }],
|
||||
postIds: [{required: true, message: "指定岗位不能为空", trigger: "change"}],
|
||||
userIds: [{required: true, message: "指定用户不能为空", trigger: "change"}],
|
||||
userGroupIds: [{required: true, message: "指定用户组不能为空", trigger: "change"}],
|
||||
scripts: [{required: true, message: "指定脚本不能为空", trigger: "change"}],
|
||||
},
|
||||
|
||||
// 各种下拉框
|
||||
roleOptions: [],
|
||||
deptOptions: [],
|
||||
deptTreeOptions: [],
|
||||
postOptions: [],
|
||||
userOptions: [],
|
||||
userGroupOptions: [],
|
||||
|
||||
// 数据字典
|
||||
modelFormTypeDictDatas: getDictDatas(DICT_TYPE.BPM_MODEL_FORM_TYPE),
|
||||
taskAssignRuleTypeDictDatas: getDictDatas(DICT_TYPE.BPM_TASK_ASSIGN_RULE_TYPE),
|
||||
taskAssignScriptDictDatas: getDictDatas(DICT_TYPE.BPM_TASK_ASSIGN_SCRIPT),
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
initModel(modelId) {
|
||||
this.modelId = modelId;
|
||||
this.processDefinitionId = undefined;
|
||||
|
||||
// 初始化所有下拉框
|
||||
this.init0();
|
||||
},
|
||||
initProcessDefinition(processDefinitionId) {
|
||||
this.modelId = undefined;
|
||||
this.processDefinitionId = processDefinitionId;
|
||||
|
||||
// 初始化所有下拉框
|
||||
this.init0();
|
||||
},
|
||||
/** 初始化 */
|
||||
init0() {
|
||||
// 设置可见
|
||||
this.visible = true;
|
||||
// 获得列表
|
||||
this.getList();
|
||||
|
||||
// 获得角色列表
|
||||
this.roleOptions = [];
|
||||
listSimpleRoles().then(response => {
|
||||
this.roleOptions.push(...response.data);
|
||||
});
|
||||
// 获得部门列表
|
||||
this.deptOptions = [];
|
||||
this.deptTreeOptions = [];
|
||||
listSimpleDepts().then(response => {
|
||||
this.deptOptions.push(...response.data);
|
||||
this.deptTreeOptions.push(...this.handleTree(response.data, "id"));
|
||||
});
|
||||
// 获得岗位列表
|
||||
this.postOptions = [];
|
||||
listSimplePosts().then(response => {
|
||||
this.postOptions.push(...response.data);
|
||||
});
|
||||
// 获得用户列表
|
||||
this.userOptions = [];
|
||||
listSimpleUsers().then(response => {
|
||||
this.userOptions.push(...response.data);
|
||||
});
|
||||
// 获得用户组列表
|
||||
this.userGroupOptions = [];
|
||||
listSimpleUserGroups().then(response => {
|
||||
this.userGroupOptions.push(...response.data);
|
||||
});
|
||||
},
|
||||
/** 获得任务分配规则列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
getTaskAssignRuleList({
|
||||
modelId: this.modelId,
|
||||
processDefinitionId: this.processDefinitionId,
|
||||
}).then(response => {
|
||||
this.loading = false;
|
||||
this.list = response.data;
|
||||
})
|
||||
},
|
||||
/** 处理修改任务分配规则的按钮操作 */
|
||||
handleUpdateTaskAssignRule(row) {
|
||||
// 先重置标识
|
||||
this.resetAssignRuleForm();
|
||||
// 设置表单
|
||||
this.form = {
|
||||
...row,
|
||||
options: [],
|
||||
roleIds: [],
|
||||
deptIds: [],
|
||||
postIds: [],
|
||||
userIds: [],
|
||||
userGroupIds: [],
|
||||
scripts: [],
|
||||
};
|
||||
// 将 options 赋值到对应的 roleIds 等选项
|
||||
if (row.type === 10) {
|
||||
this.form.roleIds.push(...row.options);
|
||||
} else if (row.type === 20 || row.type === 21) {
|
||||
this.form.deptIds.push(...row.options);
|
||||
} else if (row.type === 22) {
|
||||
this.form.postIds.push(...row.options);
|
||||
} else if (row.type === 30 || row.type === 31 || row.type === 32) {
|
||||
this.form.userIds.push(...row.options);
|
||||
} else if (row.type === 40) {
|
||||
this.form.userGroupIds.push(...row.options);
|
||||
} else if (row.type === 50) {
|
||||
this.form.scripts.push(...row.options);
|
||||
}
|
||||
this.open = true;
|
||||
},
|
||||
/** 提交任务分配规则的表单 */
|
||||
submitAssignRuleForm() {
|
||||
this.$refs["taskAssignRuleForm"].validate(valid => {
|
||||
if (valid) {
|
||||
// 构建表单
|
||||
let form = {
|
||||
...this.form,
|
||||
taskDefinitionName: undefined,
|
||||
};
|
||||
// 将 roleIds 等选项赋值到 options 中
|
||||
if (form.type === 10) {
|
||||
form.options = form.roleIds;
|
||||
} else if (form.type === 20 || form.type === 21) {
|
||||
form.options = form.deptIds;
|
||||
} else if (form.type === 22) {
|
||||
form.options = form.postIds;
|
||||
} else if (form.type === 30 || form.type === 31 || form.type === 32) {
|
||||
form.options = form.userIds;
|
||||
} else if (form.type === 40) {
|
||||
form.options = form.userGroupIds;
|
||||
} else if (form.type === 50) {
|
||||
form.options = form.scripts;
|
||||
}
|
||||
form.roleIds = undefined;
|
||||
form.deptIds = undefined;
|
||||
form.postIds = undefined;
|
||||
form.userIds = undefined;
|
||||
form.userGroupIds = undefined;
|
||||
form.scripts = undefined;
|
||||
// 新增
|
||||
if (!form.id) {
|
||||
form.modelId = this.modelId; // 模型编号
|
||||
createTaskAssignRule(form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
// 修改
|
||||
} else {
|
||||
form.taskDefinitionKey = undefined; // 无法修改
|
||||
updateTaskAssignRule(form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 取消任务分配规则的表单 */
|
||||
cancelAssignRuleForm() {
|
||||
this.open = false;
|
||||
this.resetAssignRuleForm();
|
||||
},
|
||||
/** 表单重置 */
|
||||
resetAssignRuleForm() {
|
||||
this.form = {};
|
||||
this.resetForm("taskAssignRuleForm");
|
||||
},
|
||||
getAssignRuleOptionName(type, option) {
|
||||
if (type === 10) {
|
||||
for (const roleOption of this.roleOptions) {
|
||||
if (roleOption.id === option) {
|
||||
return roleOption.name;
|
||||
}
|
||||
}
|
||||
} else if (type === 20 || type === 21) {
|
||||
for (const deptOption of this.deptOptions) {
|
||||
if (deptOption.id === option) {
|
||||
return deptOption.name;
|
||||
}
|
||||
}
|
||||
} else if (type === 22) {
|
||||
for (const postOption of this.postOptions) {
|
||||
if (postOption.id === option) {
|
||||
return postOption.name;
|
||||
}
|
||||
}
|
||||
} else if (type === 30 || type === 31 || type === 32) {
|
||||
for (const userOption of this.userOptions) {
|
||||
if (userOption.id === option) {
|
||||
return userOption.nickname;
|
||||
}
|
||||
}
|
||||
} else if (type === 40) {
|
||||
for (const userGroupOption of this.userGroupOptions) {
|
||||
if (userGroupOption.id === option) {
|
||||
return userGroupOption.name;
|
||||
}
|
||||
}
|
||||
} else if (type === 50) {
|
||||
option = option + ''; // 转换成 string
|
||||
for (const dictData of this.taskAssignScriptDictDatas) {
|
||||
if (dictData.value === option) {
|
||||
return dictData.label;
|
||||
}
|
||||
}
|
||||
}
|
||||
return '未知(' + option + ')';
|
||||
},
|
||||
// 格式化部门的下拉框
|
||||
normalizer(node) {
|
||||
return {
|
||||
id: node.id,
|
||||
label: node.name,
|
||||
children: node.children
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
3
src/views/components/icons/element-icons.js
Normal file
3
src/views/components/icons/element-icons.js
Normal file
@@ -0,0 +1,3 @@
|
||||
const elementIcons = ['platform-eleme', 'eleme', 'delete-solid', 'delete', 's-tools', 'setting', 'user-solid', 'user', 'phone', 'phone-outline', 'more', 'more-outline', 'star-on', 'star-off', 's-goods', 'goods', 'warning', 'warning-outline', 'question', 'info', 'remove', 'circle-plus', 'success', 'error', 'zoom-in', 'zoom-out', 'remove-outline', 'circle-plus-outline', 'circle-check', 'circle-close', 's-help', 'help', 'minus', 'plus', 'check', 'close', 'picture', 'picture-outline', 'picture-outline-round', 'upload', 'upload2', 'download', 'camera-solid', 'camera', 'video-camera-solid', 'video-camera', 'message-solid', 'bell', 's-cooperation', 's-order', 's-platform', 's-fold', 's-unfold', 's-operation', 's-promotion', 's-home', 's-release', 's-ticket', 's-management', 's-open', 's-shop', 's-marketing', 's-flag', 's-comment', 's-finance', 's-claim', 's-custom', 's-opportunity', 's-data', 's-check', 's-grid', 'menu', 'share', 'd-caret', 'caret-left', 'caret-right', 'caret-bottom', 'caret-top', 'bottom-left', 'bottom-right', 'back', 'right', 'bottom', 'top', 'top-left', 'top-right', 'arrow-left', 'arrow-right', 'arrow-down', 'arrow-up', 'd-arrow-left', 'd-arrow-right', 'video-pause', 'video-play', 'refresh', 'refresh-right', 'refresh-left', 'finished', 'sort', 'sort-up', 'sort-down', 'rank', 'loading', 'view', 'c-scale-to-original', 'date', 'edit', 'edit-outline', 'folder', 'folder-opened', 'folder-add', 'folder-remove', 'folder-delete', 'folder-checked', 'tickets', 'document-remove', 'document-delete', 'document-copy', 'document-checked', 'document', 'document-add', 'printer', 'paperclip', 'takeaway-box', 'search', 'monitor', 'attract', 'mobile', 'scissors', 'umbrella', 'headset', 'brush', 'mouse', 'coordinate', 'magic-stick', 'reading', 'data-line', 'data-board', 'pie-chart', 'data-analysis', 'collection-tag', 'film', 'suitcase', 'suitcase-1', 'receiving', 'collection', 'files', 'notebook-1', 'notebook-2', 'toilet-paper', 'office-building', 'school', 'table-lamp', 'house', 'no-smoking', 'smoking', 'shopping-cart-full', 'shopping-cart-1', 'shopping-cart-2', 'shopping-bag-1', 'shopping-bag-2', 'sold-out', 'sell', 'present', 'box', 'bank-card', 'money', 'coin', 'wallet', 'discount', 'price-tag', 'news', 'guide', 'male', 'female', 'thumb', 'cpu', 'link', 'connection', 'open', 'turn-off', 'set-up', 'chat-round', 'chat-line-round', 'chat-square', 'chat-dot-round', 'chat-dot-square', 'chat-line-square', 'message', 'postcard', 'position', 'turn-off-microphone', 'microphone', 'close-notification', 'bangzhu', 'time', 'odometer', 'crop', 'aim', 'switch-button', 'full-screen', 'copy-document', 'mic', 'stopwatch', 'medal-1', 'medal', 'trophy', 'trophy-1', 'first-aid-kit', 'discover', 'place', 'location', 'location-outline', 'location-information', 'add-location', 'delete-location', 'map-location', 'alarm-clock', 'timer', 'watch-1', 'watch', 'lock', 'unlock', 'key', 'service', 'mobile-phone', 'bicycle', 'truck', 'ship', 'basketball', 'football', 'soccer', 'baseball', 'wind-power', 'light-rain', 'lightning', 'heavy-rain', 'sunrise', 'sunrise-1', 'sunset', 'sunny', 'cloudy', 'partly-cloudy', 'cloudy-and-sunny', 'moon', 'moon-night', 'dish', 'dish-1', 'food', 'chicken', 'fork-spoon', 'knife-fork', 'burger', 'tableware', 'sugar', 'dessert', 'ice-cream', 'hot-water', 'water-cup', 'coffee-cup', 'cold-drink', 'goblet', 'goblet-full', 'goblet-square', 'goblet-square-full', 'refrigerator', 'grape', 'watermelon', 'cherry', 'apple', 'pear', 'orange', 'coffee', 'ice-tea', 'ice-drink', 'milk-tea', 'potato-strips', 'lollipop', 'ice-cream-square', 'ice-cream-round']
|
||||
|
||||
export default elementIcons
|
||||
87
src/views/components/icons/index.vue
Normal file
87
src/views/components/icons/index.vue
Normal file
@@ -0,0 +1,87 @@
|
||||
<template>
|
||||
<div class="icons-container">
|
||||
<aside>
|
||||
<a href="#" target="_blank">Add and use
|
||||
</a>
|
||||
</aside>
|
||||
<el-tabs type="border-card">
|
||||
<el-tab-pane label="Icons">
|
||||
<div v-for="item of svgIcons" :key="item">
|
||||
<el-tooltip placement="top">
|
||||
<div slot="content">
|
||||
{{ generateIconCode(item) }}
|
||||
</div>
|
||||
<div class="icon-item">
|
||||
<svg-icon :icon-class="item" class-name="disabled" />
|
||||
<span>{{ item }}</span>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="Element-UI Icons">
|
||||
<div v-for="item of elementIcons" :key="item">
|
||||
<el-tooltip placement="top">
|
||||
<div slot="content">
|
||||
{{ generateElementIconCode(item) }}
|
||||
</div>
|
||||
<div class="icon-item">
|
||||
<i :class="'el-icon-' + item" />
|
||||
<span>{{ item }}</span>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import svgIcons from './svg-icons'
|
||||
import elementIcons from './element-icons'
|
||||
|
||||
export default {
|
||||
name: 'Icons',
|
||||
data() {
|
||||
return {
|
||||
svgIcons,
|
||||
elementIcons
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
generateIconCode(symbol) {
|
||||
return `<svg-icon icon-class="${symbol}" />`
|
||||
},
|
||||
generateElementIconCode(symbol) {
|
||||
return `<i class="el-icon-${symbol}" />`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.icons-container {
|
||||
margin: 10px 20px 0;
|
||||
overflow: hidden;
|
||||
|
||||
.icon-item {
|
||||
margin: 20px;
|
||||
height: 85px;
|
||||
text-align: center;
|
||||
width: 100px;
|
||||
float: left;
|
||||
font-size: 30px;
|
||||
color: #24292e;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
10
src/views/components/icons/svg-icons.js
Normal file
10
src/views/components/icons/svg-icons.js
Normal file
@@ -0,0 +1,10 @@
|
||||
const req = require.context('../../../assets/icons/svg', false, /\.svg$/)
|
||||
const requireAll = requireContext => requireContext.keys()
|
||||
|
||||
const re = /\.\/(.*)\.svg/
|
||||
|
||||
const svgIcons = requireAll(req).map(i => {
|
||||
return i.match(re)[1]
|
||||
})
|
||||
|
||||
export default svgIcons
|
||||
15
src/views/crm/backlog/index.vue
Normal file
15
src/views/crm/backlog/index.vue
Normal file
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert title="【通用】跟进记录、待办事项" url="https://doc.iocoder.cn/crm/follow-up/" />
|
||||
|
||||
<el-link type="danger" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3">
|
||||
该功能支持 Vue3 + element-plus 版本！
|
||||
</el-link>
|
||||
<br />
|
||||
<el-text>
|
||||
可参考 https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/crm/backlog/index.vue 代码，pull request 贡献给我们！
|
||||
</el-text>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
</script>
|
||||
16
src/views/crm/business/index.vue
Normal file
16
src/views/crm/business/index.vue
Normal file
@@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert title="【商机】商机管理、商机状态" url="https://doc.iocoder.cn/crm/business/" />
|
||||
<doc-alert title="【通用】数据权限" url="https://doc.iocoder.cn/crm/permission/" />
|
||||
|
||||
<el-link type="danger" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3">
|
||||
该功能支持 Vue3 + element-plus 版本！
|
||||
</el-link>
|
||||
<br />
|
||||
<el-text>
|
||||
可参考 https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/crm/business/index.vue 代码，pull request 贡献给我们！
|
||||
</el-text>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
</script>
|
||||
16
src/views/crm/business/status/index.vue
Normal file
16
src/views/crm/business/status/index.vue
Normal file
@@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert title="【商机】商机管理、商机状态" url="https://doc.iocoder.cn/crm/business/" />
|
||||
<doc-alert title="【通用】数据权限" url="https://doc.iocoder.cn/crm/permission/" />
|
||||
|
||||
<el-link type="danger" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3">
|
||||
该功能支持 Vue3 + element-plus 版本！
|
||||
</el-link>
|
||||
<br />
|
||||
<el-text>
|
||||
可参考 https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/crm/business/status/index.vue 代码，pull request 贡献给我们！
|
||||
</el-text>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
</script>
|
||||
16
src/views/crm/clue/index.vue
Normal file
16
src/views/crm/clue/index.vue
Normal file
@@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert title="【线索】线索管理" url="https://doc.iocoder.cn/crm/clue/" />
|
||||
<doc-alert title="【通用】数据权限" url="https://doc.iocoder.cn/crm/permission/" />
|
||||
|
||||
<el-link type="danger" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3">
|
||||
该功能支持 Vue3 + element-plus 版本！
|
||||
</el-link>
|
||||
<br />
|
||||
<el-text>
|
||||
可参考 https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/crm/clue/index.vue 代码，pull request 贡献给我们！
|
||||
</el-text>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
</script>
|
||||
16
src/views/crm/contact/index.vue
Normal file
16
src/views/crm/contact/index.vue
Normal file
@@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert title="【客户】客户管理、公海客户" url="https://doc.iocoder.cn/crm/customer/" />
|
||||
<doc-alert title="【通用】数据权限" url="https://doc.iocoder.cn/crm/permission/" />
|
||||
|
||||
<el-link type="danger" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3">
|
||||
该功能支持 Vue3 + element-plus 版本！
|
||||
</el-link>
|
||||
<br />
|
||||
<el-text>
|
||||
可参考 https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/crm/contact/index.vue 代码，pull request 贡献给我们！
|
||||
</el-text>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
</script>
|
||||
16
src/views/crm/contract/config/index.vue
Normal file
16
src/views/crm/contract/config/index.vue
Normal file
@@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert title="【合同】合同管理、合同提醒" url="https://doc.iocoder.cn/crm/contract/" />
|
||||
<doc-alert title="【通用】数据权限" url="https://doc.iocoder.cn/crm/permission/" />
|
||||
|
||||
<el-link type="danger" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3">
|
||||
该功能支持 Vue3 + element-plus 版本！
|
||||
</el-link>
|
||||
<br />
|
||||
<el-text>
|
||||
可参考 https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/crm/contract/config/index.vue 代码，pull request 贡献给我们！
|
||||
</el-text>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
</script>
|
||||
16
src/views/crm/contract/index.vue
Normal file
16
src/views/crm/contract/index.vue
Normal file
@@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert title="【合同】合同管理、合同提醒" url="https://doc.iocoder.cn/crm/contract/" />
|
||||
<doc-alert title="【通用】数据权限" url="https://doc.iocoder.cn/crm/permission/" />
|
||||
|
||||
<el-link type="danger" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3">
|
||||
该功能支持 Vue3 + element-plus 版本！
|
||||
</el-link>
|
||||
<br />
|
||||
<el-text>
|
||||
可参考 https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/crm/contract/index.vue 代码，pull request 贡献给我们！
|
||||
</el-text>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
</script>
|
||||
16
src/views/crm/customer/index.vue
Normal file
16
src/views/crm/customer/index.vue
Normal file
@@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert title="【客户】客户管理、公海客户" url="https://doc.iocoder.cn/crm/customer/" />
|
||||
<doc-alert title="【通用】数据权限" url="https://doc.iocoder.cn/crm/permission/" />
|
||||
|
||||
<el-link type="danger" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3">
|
||||
该功能支持 Vue3 + element-plus 版本！
|
||||
</el-link>
|
||||
<br />
|
||||
<el-text>
|
||||
可参考 https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/crm/customer/index.vue 代码，pull request 贡献给我们！
|
||||
</el-text>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
</script>
|
||||
16
src/views/crm/customer/limitConfig/index.vue
Normal file
16
src/views/crm/customer/limitConfig/index.vue
Normal file
@@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert title="【客户】客户管理、公海客户" url="https://doc.iocoder.cn/crm/customer/" />
|
||||
<doc-alert title="【通用】数据权限" url="https://doc.iocoder.cn/crm/permission/" />
|
||||
|
||||
<el-link type="danger" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3">
|
||||
该功能支持 Vue3 + element-plus 版本！
|
||||
</el-link>
|
||||
<br />
|
||||
<el-text>
|
||||
可参考 https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/crm/customer/limitConfig/index.vue 代码，pull request 贡献给我们！
|
||||
</el-text>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
</script>
|
||||
16
src/views/crm/customer/pool/index.vue
Normal file
16
src/views/crm/customer/pool/index.vue
Normal file
@@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert title="【客户】客户管理、公海客户" url="https://doc.iocoder.cn/crm/customer/" />
|
||||
<doc-alert title="【通用】数据权限" url="https://doc.iocoder.cn/crm/permission/" />
|
||||
|
||||
<el-link type="danger" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3">
|
||||
该功能支持 Vue3 + element-plus 版本！
|
||||
</el-link>
|
||||
<br />
|
||||
<el-text>
|
||||
可参考 https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/crm/customer/pool/index.vue 代码，pull request 贡献给我们！
|
||||
</el-text>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
</script>
|
||||
16
src/views/crm/customer/poolConfig/index.vue
Normal file
16
src/views/crm/customer/poolConfig/index.vue
Normal file
@@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert title="【客户】客户管理、公海客户" url="https://doc.iocoder.cn/crm/customer/" />
|
||||
<doc-alert title="【通用】数据权限" url="https://doc.iocoder.cn/crm/permission/" />
|
||||
|
||||
<el-link type="danger" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3">
|
||||
该功能支持 Vue3 + element-plus 版本！
|
||||
</el-link>
|
||||
<br />
|
||||
<el-text>
|
||||
可参考 https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/crm/customer/poolConfig/index.vue 代码，pull request 贡献给我们！
|
||||
</el-text>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
</script>
|
||||
15
src/views/crm/product/category/index.vue
Normal file
15
src/views/crm/product/category/index.vue
Normal file
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert title="【产品】产品管理、产品分类" url="https://doc.iocoder.cn/crm/product/" />
|
||||
|
||||
<el-link type="danger" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3">
|
||||
该功能支持 Vue3 + element-plus 版本！
|
||||
</el-link>
|
||||
<br />
|
||||
<el-text>
|
||||
可参考 https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/crm/product/category/index.vue 代码，pull request 贡献给我们！
|
||||
</el-text>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
</script>
|
||||
15
src/views/crm/product/index.vue
Normal file
15
src/views/crm/product/index.vue
Normal file
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert title="【产品】产品管理、产品分类" url="https://doc.iocoder.cn/crm/product/" />
|
||||
|
||||
<el-link type="danger" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3">
|
||||
该功能支持 Vue3 + element-plus 版本！
|
||||
</el-link>
|
||||
<br />
|
||||
<el-text>
|
||||
可参考 https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/crm/product/index.vue 代码，pull request 贡献给我们！
|
||||
</el-text>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
</script>
|
||||
16
src/views/crm/receivable/index.vue
Normal file
16
src/views/crm/receivable/index.vue
Normal file
@@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert title="【回款】回款管理、回款计划" url="https://doc.iocoder.cn/crm/receivable/" />
|
||||
<doc-alert title="【通用】数据权限" url="https://doc.iocoder.cn/crm/permission/" />
|
||||
|
||||
<el-link type="danger" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3">
|
||||
该功能支持 Vue3 + element-plus 版本！
|
||||
</el-link>
|
||||
<br />
|
||||
<el-text>
|
||||
可参考 https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/crm/receivable/index.vue 代码，pull request 贡献给我们！
|
||||
</el-text>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
</script>
|
||||
16
src/views/crm/receivable/plan/index.vue
Normal file
16
src/views/crm/receivable/plan/index.vue
Normal file
@@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert title="【回款】回款管理、回款计划" url="https://doc.iocoder.cn/crm/receivable/" />
|
||||
<doc-alert title="【通用】数据权限" url="https://doc.iocoder.cn/crm/permission/" />
|
||||
|
||||
<el-link type="danger" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3">
|
||||
该功能支持 Vue3 + element-plus 版本！
|
||||
</el-link>
|
||||
<br />
|
||||
<el-text>
|
||||
可参考 https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/crm/receivable/plan/index.vue 代码，pull request 贡献给我们！
|
||||
</el-text>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
</script>
|
||||
13
src/views/crm/statistics/rank/index.vue
Normal file
13
src/views/crm/statistics/rank/index.vue
Normal file
@@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-link type="danger" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3">
|
||||
该功能支持 Vue3 + element-plus 版本！
|
||||
</el-link>
|
||||
<br />
|
||||
<el-text>
|
||||
可参考 https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/crm/statistics/rank/index.vue 代码，pull request 贡献给我们！
|
||||
</el-text>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
</script>
|
||||
102
src/views/dashboard/BarChart.vue
Normal file
102
src/views/dashboard/BarChart.vue
Normal file
@@ -0,0 +1,102 @@
|
||||
<template>
|
||||
<div :class="className" :style="{height:height,width:width}" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from './mixins/resize'
|
||||
|
||||
const animationDuration = 6000
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '300px'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$el, 'macarons')
|
||||
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: 10,
|
||||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [{
|
||||
type: 'category',
|
||||
data: ['6月', '7月', '8月', '9月', '10月', '11月'],
|
||||
axisTick: {
|
||||
alignWithLabel: true
|
||||
}
|
||||
}],
|
||||
yAxis: [{
|
||||
type: 'value',
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
}],
|
||||
series: [{
|
||||
name: 'pageA',
|
||||
type: 'bar',
|
||||
stack: 'vistors',
|
||||
barWidth: '60%',
|
||||
data: [79, 52, 200, 334, 390, 330, 220],
|
||||
animationDuration
|
||||
}, {
|
||||
name: 'pageB',
|
||||
type: 'bar',
|
||||
stack: 'vistors',
|
||||
barWidth: '60%',
|
||||
data: [80, 52, 200, 334, 390, 330, 220],
|
||||
animationDuration
|
||||
}, {
|
||||
name: 'pageC',
|
||||
type: 'bar',
|
||||
stack: 'vistors',
|
||||
barWidth: '60%',
|
||||
data: [30, 52, 200, 334, 390, 330, 220],
|
||||
animationDuration
|
||||
}]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
135
src/views/dashboard/LineChart.vue
Normal file
135
src/views/dashboard/LineChart.vue
Normal file
@@ -0,0 +1,135 @@
|
||||
<template>
|
||||
<div :class="className" :style="{height:height,width:width}" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from './mixins/resize'
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '350px'
|
||||
},
|
||||
autoResize: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
chartData: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
chartData: {
|
||||
deep: true,
|
||||
handler(val) {
|
||||
this.setOptions(val)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$el, 'macarons')
|
||||
this.setOptions(this.chartData)
|
||||
},
|
||||
setOptions({ expectedData, actualData } = {}) {
|
||||
this.chart.setOption({
|
||||
xAxis: {
|
||||
data: ['6月', '7月', '8月', '9月', '10月', '11月'],
|
||||
boundaryGap: false,
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: 10,
|
||||
right: 10,
|
||||
bottom: 20,
|
||||
top: 30,
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross'
|
||||
},
|
||||
padding: [5, 10]
|
||||
},
|
||||
yAxis: {
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['expected', 'actual']
|
||||
},
|
||||
series: [{
|
||||
name: 'expected', itemStyle: {
|
||||
normal: {
|
||||
color: '#FF005A',
|
||||
lineStyle: {
|
||||
color: '#FF005A',
|
||||
width: 2
|
||||
}
|
||||
}
|
||||
},
|
||||
smooth: true,
|
||||
type: 'line',
|
||||
data: expectedData,
|
||||
animationDuration: 2800,
|
||||
animationEasing: 'cubicInOut'
|
||||
},
|
||||
{
|
||||
name: 'actual',
|
||||
smooth: true,
|
||||
type: 'line',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#3888fa',
|
||||
lineStyle: {
|
||||
color: '#3888fa',
|
||||
width: 2
|
||||
},
|
||||
areaStyle: {
|
||||
color: '#f3f8ff'
|
||||
}
|
||||
}
|
||||
},
|
||||
data: actualData,
|
||||
animationDuration: 2800,
|
||||
animationEasing: 'quadraticOut'
|
||||
}]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
180
src/views/dashboard/PanelGroup.vue
Normal file
180
src/views/dashboard/PanelGroup.vue
Normal file
@@ -0,0 +1,180 @@
|
||||
<template>
|
||||
<el-row :gutter="40" class="panel-group">
|
||||
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
|
||||
<div class="card-panel" @click="handleSetLineChartData('newVisitis')">
|
||||
<div class="card-panel-icon-wrapper icon-people">
|
||||
<svg-icon icon-class="peoples" class-name="card-panel-icon" />
|
||||
</div>
|
||||
<div class="card-panel-description">
|
||||
<div class="card-panel-text">
|
||||
访客
|
||||
</div>
|
||||
<count-to :start-val="0" :end-val="102400" :duration="2600" class="card-panel-num" />
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
|
||||
<div class="card-panel" @click="handleSetLineChartData('messages')">
|
||||
<div class="card-panel-icon-wrapper icon-message">
|
||||
<svg-icon icon-class="message" class-name="card-panel-icon" />
|
||||
</div>
|
||||
<div class="card-panel-description">
|
||||
<div class="card-panel-text">
|
||||
消息
|
||||
</div>
|
||||
<count-to :start-val="0" :end-val="81212" :duration="3000" class="card-panel-num" />
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
|
||||
<div class="card-panel" @click="handleSetLineChartData('purchases')">
|
||||
<div class="card-panel-icon-wrapper icon-money">
|
||||
<svg-icon icon-class="money" class-name="card-panel-icon" />
|
||||
</div>
|
||||
<div class="card-panel-description">
|
||||
<div class="card-panel-text">
|
||||
金额
|
||||
</div>
|
||||
<count-to :start-val="0" :end-val="9280" :duration="3200" class="card-panel-num" />
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
|
||||
<div class="card-panel" @click="handleSetLineChartData('shoppings')">
|
||||
<div class="card-panel-icon-wrapper icon-shopping">
|
||||
<svg-icon icon-class="shopping" class-name="card-panel-icon" />
|
||||
</div>
|
||||
<div class="card-panel-description">
|
||||
<div class="card-panel-text">
|
||||
订单
|
||||
</div>
|
||||
<count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" />
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CountTo from 'vue-count-to'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
CountTo
|
||||
},
|
||||
methods: {
|
||||
handleSetLineChartData(type) {
|
||||
this.$emit('handleSetLineChartData', type)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.panel-group {
|
||||
margin-top: 18px;
|
||||
|
||||
.card-panel-col {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.card-panel {
|
||||
height: 108px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
color: #666;
|
||||
background: #fff;
|
||||
box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
|
||||
border-color: rgba(0, 0, 0, .05);
|
||||
|
||||
&:hover {
|
||||
.card-panel-icon-wrapper {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.icon-people {
|
||||
background: #40c9c6;
|
||||
}
|
||||
|
||||
.icon-message {
|
||||
background: #36a3f7;
|
||||
}
|
||||
|
||||
.icon-money {
|
||||
background: #f4516c;
|
||||
}
|
||||
|
||||
.icon-shopping {
|
||||
background: #34bfa3
|
||||
}
|
||||
}
|
||||
|
||||
.icon-people {
|
||||
color: #40c9c6;
|
||||
}
|
||||
|
||||
.icon-message {
|
||||
color: #36a3f7;
|
||||
}
|
||||
|
||||
.icon-money {
|
||||
color: #f4516c;
|
||||
}
|
||||
|
||||
.icon-shopping {
|
||||
color: #34bfa3
|
||||
}
|
||||
|
||||
.card-panel-icon-wrapper {
|
||||
float: left;
|
||||
margin: 14px 0 0 14px;
|
||||
padding: 16px;
|
||||
transition: all 0.38s ease-out;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.card-panel-icon {
|
||||
float: left;
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
.card-panel-description {
|
||||
float: right;
|
||||
font-weight: bold;
|
||||
margin: 26px 26px 26px 0;
|
||||
|
||||
.card-panel-text {
|
||||
line-height: 18px;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
font-size: 16px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.card-panel-num {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:550px) {
|
||||
.card-panel-description {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.card-panel-icon-wrapper {
|
||||
float: none !important;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0 !important;
|
||||
|
||||
.svg-icon {
|
||||
display: block;
|
||||
margin: 14px auto !important;
|
||||
float: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
79
src/views/dashboard/PieChart.vue
Normal file
79
src/views/dashboard/PieChart.vue
Normal file
@@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<div :class="className" :style="{height:height,width:width}" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from './mixins/resize'
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '300px'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$el, 'macarons')
|
||||
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
||||
},
|
||||
legend: {
|
||||
left: 'center',
|
||||
bottom: '10',
|
||||
data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts']
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'WEEKLY WRITE ARTICLES',
|
||||
type: 'pie',
|
||||
roseType: 'radius',
|
||||
radius: [15, 95],
|
||||
center: ['50%', '38%'],
|
||||
data: [
|
||||
{ value: 320, name: 'Industries' },
|
||||
{ value: 240, name: 'Technology' },
|
||||
{ value: 149, name: 'Forex' },
|
||||
{ value: 100, name: 'Gold' },
|
||||
{ value: 59, name: 'Forecasts' }
|
||||
],
|
||||
animationEasing: 'cubicInOut',
|
||||
animationDuration: 2600
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
116
src/views/dashboard/RaddarChart.vue
Normal file
116
src/views/dashboard/RaddarChart.vue
Normal file
@@ -0,0 +1,116 @@
|
||||
<template>
|
||||
<div :class="className" :style="{height:height,width:width}" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from './mixins/resize'
|
||||
|
||||
const animationDuration = 3000
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '300px'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$el, 'macarons')
|
||||
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||
}
|
||||
},
|
||||
radar: {
|
||||
radius: '66%',
|
||||
center: ['50%', '42%'],
|
||||
splitNumber: 8,
|
||||
splitArea: {
|
||||
areaStyle: {
|
||||
color: 'rgba(127,95,132,.3)',
|
||||
opacity: 1,
|
||||
shadowBlur: 45,
|
||||
shadowColor: 'rgba(0,0,0,.5)',
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 15
|
||||
}
|
||||
},
|
||||
indicator: [
|
||||
{ name: 'Sales', max: 10000 },
|
||||
{ name: 'Administration', max: 20000 },
|
||||
{ name: 'Information Techology', max: 20000 },
|
||||
{ name: 'Customer Support', max: 20000 },
|
||||
{ name: 'Development', max: 20000 },
|
||||
{ name: 'Marketing', max: 20000 }
|
||||
]
|
||||
},
|
||||
legend: {
|
||||
left: 'center',
|
||||
bottom: '10',
|
||||
data: ['Allocated Budget', 'Expected Spending', 'Actual Spending']
|
||||
},
|
||||
series: [{
|
||||
type: 'radar',
|
||||
symbolSize: 0,
|
||||
areaStyle: {
|
||||
normal: {
|
||||
shadowBlur: 13,
|
||||
shadowColor: 'rgba(0,0,0,.2)',
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 10,
|
||||
opacity: 1
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: [5000, 7000, 12000, 11000, 15000, 14000],
|
||||
name: 'Allocated Budget'
|
||||
},
|
||||
{
|
||||
value: [4000, 9000, 15000, 15000, 13000, 11000],
|
||||
name: 'Expected Spending'
|
||||
},
|
||||
{
|
||||
value: [5500, 11000, 12000, 15000, 12000, 12000],
|
||||
name: 'Actual Spending'
|
||||
}
|
||||
],
|
||||
animationDuration: animationDuration
|
||||
}]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
56
src/views/dashboard/mixins/resize.js
Normal file
56
src/views/dashboard/mixins/resize.js
Normal file
@@ -0,0 +1,56 @@
|
||||
import { debounce } from '@/utils'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
$_sidebarElm: null,
|
||||
$_resizeHandler: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initListener()
|
||||
},
|
||||
activated() {
|
||||
if (!this.$_resizeHandler) {
|
||||
// avoid duplication init
|
||||
this.initListener()
|
||||
}
|
||||
|
||||
// when keep-alive chart activated, auto resize
|
||||
this.resize()
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.destroyListener()
|
||||
},
|
||||
deactivated() {
|
||||
this.destroyListener()
|
||||
},
|
||||
methods: {
|
||||
// use $_ for mixins properties
|
||||
// https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
|
||||
$_sidebarResizeHandler(e) {
|
||||
if (e.propertyName === 'width') {
|
||||
this.$_resizeHandler()
|
||||
}
|
||||
},
|
||||
initListener() {
|
||||
this.$_resizeHandler = debounce(() => {
|
||||
this.resize()
|
||||
}, 100)
|
||||
window.addEventListener('resize', this.$_resizeHandler)
|
||||
|
||||
this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
|
||||
this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
|
||||
},
|
||||
destroyListener() {
|
||||
window.removeEventListener('resize', this.$_resizeHandler)
|
||||
this.$_resizeHandler = null
|
||||
|
||||
this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
|
||||
},
|
||||
resize() {
|
||||
const { chart } = this
|
||||
chart && chart.resize()
|
||||
}
|
||||
}
|
||||
}
|
||||
18
src/views/erp/finance/account/index.vue
Normal file
18
src/views/erp/finance/account/index.vue
Normal file
@@ -0,0 +1,18 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert
|
||||
title="【财务】采购付款、销售收款"
|
||||
url="https://doc.iocoder.cn/sale/finance-payment-receipt/"
|
||||
/>
|
||||
|
||||
<el-link type="danger" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3">
|
||||
该功能支持 Vue3 + element-plus 版本！
|
||||
</el-link>
|
||||
<br />
|
||||
<el-text>
|
||||
可参考 https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/erp/finance/account/index.vue 代码，pull request 贡献给我们！
|
||||
</el-text>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
</script>
|
||||
18
src/views/erp/finance/payment/index.vue
Normal file
18
src/views/erp/finance/payment/index.vue
Normal file
@@ -0,0 +1,18 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert
|
||||
title="【财务】采购付款、销售收款"
|
||||
url="https://doc.iocoder.cn/sale/finance-payment-receipt/"
|
||||
/>
|
||||
|
||||
<el-link type="danger" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3">
|
||||
该功能支持 Vue3 + element-plus 版本！
|
||||
</el-link>
|
||||
<br />
|
||||
<el-text>
|
||||
可参考 https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/erp/finance/payment/index.vue 代码，pull request 贡献给我们！
|
||||
</el-text>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
</script>
|
||||
18
src/views/erp/finance/receipt/index.vue
Normal file
18
src/views/erp/finance/receipt/index.vue
Normal file
@@ -0,0 +1,18 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert
|
||||
title="【财务】采购付款、销售收款"
|
||||
url="https://doc.iocoder.cn/sale/finance-payment-receipt/"
|
||||
/>
|
||||
|
||||
<el-link type="danger" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3">
|
||||
该功能支持 Vue3 + element-plus 版本！
|
||||
</el-link>
|
||||
<br />
|
||||
<el-text>
|
||||
可参考 https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/erp/finance/receipt/index.vue 代码，pull request 贡献给我们！
|
||||
</el-text>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
</script>
|
||||
15
src/views/erp/home/index.vue
Normal file
15
src/views/erp/home/index.vue
Normal file
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert title="ERP 手册（功能开启）" url="https://doc.iocoder.cn/erp/build/" />
|
||||
|
||||
<el-link type="danger" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3">
|
||||
该功能支持 Vue3 + element-plus 版本！
|
||||
</el-link>
|
||||
<br />
|
||||
<el-text>
|
||||
可参考 https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/erp/home/index.vue 代码，pull request 贡献给我们！
|
||||
</el-text>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
</script>
|
||||
15
src/views/erp/product/category/index.vue
Normal file
15
src/views/erp/product/category/index.vue
Normal file
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert title="【产品】产品信息、分类、单位" url="https://doc.iocoder.cn/erp/product/" />
|
||||
|
||||
<el-link type="danger" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3">
|
||||
该功能支持 Vue3 + element-plus 版本！
|
||||
</el-link>
|
||||
<br />
|
||||
<el-text>
|
||||
可参考 https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/erp/product/category/index.vue 代码，pull request 贡献给我们！
|
||||
</el-text>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
</script>
|
||||
15
src/views/erp/product/product/index.vue
Normal file
15
src/views/erp/product/product/index.vue
Normal file
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert title="【产品】产品信息、分类、单位" url="https://doc.iocoder.cn/erp/product/" />
|
||||
|
||||
<el-link type="danger" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3">
|
||||
该功能支持 Vue3 + element-plus 版本！
|
||||
</el-link>
|
||||
<br />
|
||||
<el-text>
|
||||
可参考 https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/erp/product/product/index.vue 代码，pull request 贡献给我们！
|
||||
</el-text>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
</script>
|
||||
15
src/views/erp/product/unit/index.vue
Normal file
15
src/views/erp/product/unit/index.vue
Normal file
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert title="【产品】产品信息、分类、单位" url="https://doc.iocoder.cn/erp/product/" />
|
||||
|
||||
<el-link type="danger" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3">
|
||||
该功能支持 Vue3 + element-plus 版本！
|
||||
</el-link>
|
||||
<br />
|
||||
<el-text>
|
||||
可参考 https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/erp/product/unit/index.vue 代码，pull request 贡献给我们！
|
||||
</el-text>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
</script>
|
||||
15
src/views/erp/purchase/in/index.vue
Normal file
15
src/views/erp/purchase/in/index.vue
Normal file
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert title="【采购】采购订单、入库、退货" url="https://doc.iocoder.cn/erp/purchase/" />
|
||||
|
||||
<el-link type="danger" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3">
|
||||
该功能支持 Vue3 + element-plus 版本！
|
||||
</el-link>
|
||||
<br />
|
||||
<el-text>
|
||||
可参考 https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/erp/purchase/in/index.vue 代码，pull request 贡献给我们！
|
||||
</el-text>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
</script>
|
||||
15
src/views/erp/purchase/order/index.vue
Normal file
15
src/views/erp/purchase/order/index.vue
Normal file
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert title="【采购】采购订单、入库、退货" url="https://doc.iocoder.cn/erp/purchase/" />
|
||||
|
||||
<el-link type="danger" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3">
|
||||
该功能支持 Vue3 + element-plus 版本！
|
||||
</el-link>
|
||||
<br />
|
||||
<el-text>
|
||||
可参考 https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/erp/purchase/order/index.vue 代码，pull request 贡献给我们！
|
||||
</el-text>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
</script>
|
||||
15
src/views/erp/purchase/return/index.vue
Normal file
15
src/views/erp/purchase/return/index.vue
Normal file
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert title="【采购】采购订单、入库、退货" url="https://doc.iocoder.cn/erp/purchase/" />
|
||||
|
||||
<el-link type="danger" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3">
|
||||
该功能支持 Vue3 + element-plus 版本！
|
||||
</el-link>
|
||||
<br />
|
||||
<el-text>
|
||||
可参考 https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/erp/purchase/return/index.vue 代码，pull request 贡献给我们！
|
||||
</el-text>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
</script>
|
||||
15
src/views/erp/purchase/supplier/index.vue
Normal file
15
src/views/erp/purchase/supplier/index.vue
Normal file
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert title="【采购】采购订单、入库、退货" url="https://doc.iocoder.cn/erp/purchase/" />
|
||||
|
||||
<el-link type="danger" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3">
|
||||
该功能支持 Vue3 + element-plus 版本！
|
||||
</el-link>
|
||||
<br />
|
||||
<el-text>
|
||||
可参考 https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/erp/purchase/supplier/index.vue 代码，pull request 贡献给我们！
|
||||
</el-text>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
</script>
|
||||
15
src/views/erp/sale/customer/index.vue
Normal file
15
src/views/erp/sale/customer/index.vue
Normal file
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert title="【销售】销售订单、出库、退货" url="https://doc.iocoder.cn/erp/sale/" />
|
||||
|
||||
<el-link type="danger" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3">
|
||||
该功能支持 Vue3 + element-plus 版本！
|
||||
</el-link>
|
||||
<br />
|
||||
<el-text>
|
||||
可参考 https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/erp/sale/customer/index.vue 代码，pull request 贡献给我们！
|
||||
</el-text>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
</script>
|
||||
15
src/views/erp/sale/order/index.vue
Normal file
15
src/views/erp/sale/order/index.vue
Normal file
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert title="【销售】销售订单、出库、退货" url="https://doc.iocoder.cn/erp/sale/" />
|
||||
|
||||
<el-link type="danger" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3">
|
||||
该功能支持 Vue3 + element-plus 版本！
|
||||
</el-link>
|
||||
<br />
|
||||
<el-text>
|
||||
可参考 https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/erp/sale/order/index.vue 代码，pull request 贡献给我们！
|
||||
</el-text>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
</script>
|
||||
15
src/views/erp/sale/out/index.vue
Normal file
15
src/views/erp/sale/out/index.vue
Normal file
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert title="【销售】销售订单、出库、退货" url="https://doc.iocoder.cn/erp/sale/" />
|
||||
|
||||
<el-link type="danger" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3">
|
||||
该功能支持 Vue3 + element-plus 版本！
|
||||
</el-link>
|
||||
<br />
|
||||
<el-text>
|
||||
可参考 https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/erp/sale/out/index.vue 代码，pull request 贡献给我们！
|
||||
</el-text>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
</script>
|
||||
15
src/views/erp/sale/return/index.vue
Normal file
15
src/views/erp/sale/return/index.vue
Normal file
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert title="【销售】销售订单、出库、退货" url="https://doc.iocoder.cn/erp/sale/" />
|
||||
|
||||
<el-link type="danger" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3">
|
||||
该功能支持 Vue3 + element-plus 版本！
|
||||
</el-link>
|
||||
<br />
|
||||
<el-text>
|
||||
可参考 https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/erp/sale/return/index.vue 代码，pull request 贡献给我们！
|
||||
</el-text>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
</script>
|
||||
18
src/views/erp/stock/check/index.vue
Normal file
18
src/views/erp/stock/check/index.vue
Normal file
@@ -0,0 +1,18 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert
|
||||
title="【库存】库存调拨、库存盘点"
|
||||
url="https://doc.iocoder.cn/erp/stock-move-check/"
|
||||
/>
|
||||
|
||||
<el-link type="danger" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3">
|
||||
该功能支持 Vue3 + element-plus 版本！
|
||||
</el-link>
|
||||
<br />
|
||||
<el-text>
|
||||
可参考 https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/erp/stock/check/index.vue 代码，pull request 贡献给我们！
|
||||
</el-text>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
</script>
|
||||
15
src/views/erp/stock/in/index.vue
Normal file
15
src/views/erp/stock/in/index.vue
Normal file
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert title="【库存】其它入库、其它出库" url="https://doc.iocoder.cn/erp/stock-in-out/" />
|
||||
|
||||
<el-link type="danger" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3">
|
||||
该功能支持 Vue3 + element-plus 版本！
|
||||
</el-link>
|
||||
<br />
|
||||
<el-text>
|
||||
可参考 https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/erp/stock/in/index.vue 代码，pull request 贡献给我们！
|
||||
</el-text>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
</script>
|
||||
18
src/views/erp/stock/move/index.vue
Normal file
18
src/views/erp/stock/move/index.vue
Normal file
@@ -0,0 +1,18 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert
|
||||
title="【库存】库存调拨、库存盘点"
|
||||
url="https://doc.iocoder.cn/erp/stock-move-check/"
|
||||
/>
|
||||
|
||||
<el-link type="danger" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3">
|
||||
该功能支持 Vue3 + element-plus 版本！
|
||||
</el-link>
|
||||
<br />
|
||||
<el-text>
|
||||
可参考 https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/erp/stock/move/index.vue 代码，pull request 贡献给我们！
|
||||
</el-text>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
</script>
|
||||
15
src/views/erp/stock/out/index.vue
Normal file
15
src/views/erp/stock/out/index.vue
Normal file
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert title="【库存】其它入库、其它出库" url="https://doc.iocoder.cn/erp/stock-in-out/" />
|
||||
|
||||
<el-link type="danger" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3">
|
||||
该功能支持 Vue3 + element-plus 版本！
|
||||
</el-link>
|
||||
<br />
|
||||
<el-text>
|
||||
可参考 https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/erp/stock/out/index.vue 代码，pull request 贡献给我们！
|
||||
</el-text>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
</script>
|
||||
15
src/views/erp/stock/record/index.vue
Normal file
15
src/views/erp/stock/record/index.vue
Normal file
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert title="【库存】产品库存、库存明细" url="https://doc.iocoder.cn/erp/stock/" />
|
||||
|
||||
<el-link type="danger" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3">
|
||||
该功能支持 Vue3 + element-plus 版本！
|
||||
</el-link>
|
||||
<br />
|
||||
<el-text>
|
||||
可参考 https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/erp/stock/record/index.vue 代码，pull request 贡献给我们！
|
||||
</el-text>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
</script>
|
||||
15
src/views/erp/stock/stock/index.vue
Normal file
15
src/views/erp/stock/stock/index.vue
Normal file
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert title="【库存】产品库存、库存明细" url="https://doc.iocoder.cn/erp/stock/" />
|
||||
|
||||
<el-link type="danger" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3">
|
||||
该功能支持 Vue3 + element-plus 版本！
|
||||
</el-link>
|
||||
<br />
|
||||
<el-text>
|
||||
可参考 https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/erp/stock/stock/index.vue 代码，pull request 贡献给我们！
|
||||
</el-text>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
</script>
|
||||
15
src/views/erp/stock/warehouse/index.vue
Normal file
15
src/views/erp/stock/warehouse/index.vue
Normal file
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert title="【库存】产品库存、库存明细" url="https://doc.iocoder.cn/erp/stock/" />
|
||||
|
||||
<el-link type="danger" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3">
|
||||
该功能支持 Vue3 + element-plus 版本！
|
||||
</el-link>
|
||||
<br />
|
||||
<el-text>
|
||||
可参考 https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/erp/stock/warehouse/index.vue 代码，pull request 贡献给我们！
|
||||
</el-text>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
</script>
|
||||
88
src/views/error/401.vue
Normal file
88
src/views/error/401.vue
Normal file
@@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<div class="errPage-container">
|
||||
<el-button icon="arrow-left" class="pan-back-btn" @click="back">
|
||||
返回
|
||||
</el-button>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<h1 class="text-jumbo text-ginormous">
|
||||
401错误!
|
||||
</h1>
|
||||
<h2>您没有访问权限！</h2>
|
||||
<h6>对不起，您没有访问权限，请不要进行非法操作！您可以返回主页面</h6>
|
||||
<ul class="list-unstyled">
|
||||
<li class="link-type">
|
||||
<router-link to="/">
|
||||
回首页
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<img :src="errGif" width="313" height="428" alt="Girl has dropped her ice cream.">
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import errGif from '@/assets/401_images/401.gif'
|
||||
|
||||
export default {
|
||||
name: 'Page401',
|
||||
data() {
|
||||
return {
|
||||
errGif: errGif + '?' + +new Date()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
back() {
|
||||
if (this.$route.query.noGoBack) {
|
||||
this.$router.push({ path: '/' })
|
||||
} else {
|
||||
this.$router.go(-1)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.errPage-container {
|
||||
width: 800px;
|
||||
max-width: 100%;
|
||||
margin: 100px auto;
|
||||
.pan-back-btn {
|
||||
background: #008489;
|
||||
color: #fff;
|
||||
border: none!important;
|
||||
}
|
||||
.pan-gif {
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
}
|
||||
.pan-img {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
.text-jumbo {
|
||||
font-size: 60px;
|
||||
font-weight: 700;
|
||||
color: #484848;
|
||||
}
|
||||
.list-unstyled {
|
||||
font-size: 14px;
|
||||
li {
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
a {
|
||||
color: #008489;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
233
src/views/error/404.vue
Normal file
233
src/views/error/404.vue
Normal file
@@ -0,0 +1,233 @@
|
||||
<template>
|
||||
<div class="wscn-http404-container">
|
||||
<div class="wscn-http404">
|
||||
<div class="pic-404">
|
||||
<img class="pic-404__parent" src="@/assets/404_images/404.png" alt="404">
|
||||
<img class="pic-404__child left" src="@/assets/404_images/404_cloud.png" alt="404">
|
||||
<img class="pic-404__child mid" src="@/assets/404_images/404_cloud.png" alt="404">
|
||||
<img class="pic-404__child right" src="@/assets/404_images/404_cloud.png" alt="404">
|
||||
</div>
|
||||
<div class="bullshit">
|
||||
<div class="bullshit__oops">
|
||||
404错误!
|
||||
</div>
|
||||
<div class="bullshit__headline">
|
||||
{{ message }}
|
||||
</div>
|
||||
<div class="bullshit__info">
|
||||
对不起，您正在寻找的页面不存在。尝试检查URL的错误，然后按浏览器上的刷新按钮或尝试在我们的应用程序中找到其他内容。
|
||||
</div>
|
||||
<router-link to="/" class="bullshit__return-home">
|
||||
返回首页
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'Page404',
|
||||
computed: {
|
||||
message() {
|
||||
return '找不到网页！'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.wscn-http404-container{
|
||||
transform: translate(-50%,-50%);
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
left: 50%;
|
||||
}
|
||||
.wscn-http404 {
|
||||
position: relative;
|
||||
width: 1200px;
|
||||
padding: 0 50px;
|
||||
overflow: hidden;
|
||||
.pic-404 {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 600px;
|
||||
overflow: hidden;
|
||||
&__parent {
|
||||
width: 100%;
|
||||
}
|
||||
&__child {
|
||||
position: absolute;
|
||||
&.left {
|
||||
width: 80px;
|
||||
top: 17px;
|
||||
left: 220px;
|
||||
opacity: 0;
|
||||
animation-name: cloudLeft;
|
||||
animation-duration: 2s;
|
||||
animation-timing-function: linear;
|
||||
animation-fill-mode: forwards;
|
||||
animation-delay: 1s;
|
||||
}
|
||||
&.mid {
|
||||
width: 46px;
|
||||
top: 10px;
|
||||
left: 420px;
|
||||
opacity: 0;
|
||||
animation-name: cloudMid;
|
||||
animation-duration: 2s;
|
||||
animation-timing-function: linear;
|
||||
animation-fill-mode: forwards;
|
||||
animation-delay: 1.2s;
|
||||
}
|
||||
&.right {
|
||||
width: 62px;
|
||||
top: 100px;
|
||||
left: 500px;
|
||||
opacity: 0;
|
||||
animation-name: cloudRight;
|
||||
animation-duration: 2s;
|
||||
animation-timing-function: linear;
|
||||
animation-fill-mode: forwards;
|
||||
animation-delay: 1s;
|
||||
}
|
||||
@keyframes cloudLeft {
|
||||
0% {
|
||||
top: 17px;
|
||||
left: 220px;
|
||||
opacity: 0;
|
||||
}
|
||||
20% {
|
||||
top: 33px;
|
||||
left: 188px;
|
||||
opacity: 1;
|
||||
}
|
||||
80% {
|
||||
top: 81px;
|
||||
left: 92px;
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
top: 97px;
|
||||
left: 60px;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes cloudMid {
|
||||
0% {
|
||||
top: 10px;
|
||||
left: 420px;
|
||||
opacity: 0;
|
||||
}
|
||||
20% {
|
||||
top: 40px;
|
||||
left: 360px;
|
||||
opacity: 1;
|
||||
}
|
||||
70% {
|
||||
top: 130px;
|
||||
left: 180px;
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
top: 160px;
|
||||
left: 120px;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes cloudRight {
|
||||
0% {
|
||||
top: 100px;
|
||||
left: 500px;
|
||||
opacity: 0;
|
||||
}
|
||||
20% {
|
||||
top: 120px;
|
||||
left: 460px;
|
||||
opacity: 1;
|
||||
}
|
||||
80% {
|
||||
top: 180px;
|
||||
left: 340px;
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
top: 200px;
|
||||
left: 300px;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.bullshit {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 300px;
|
||||
padding: 30px 0;
|
||||
overflow: hidden;
|
||||
&__oops {
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
line-height: 40px;
|
||||
color: #1482f0;
|
||||
opacity: 0;
|
||||
margin-bottom: 20px;
|
||||
animation-name: slideUp;
|
||||
animation-duration: 0.5s;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
&__headline {
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
color: #222;
|
||||
font-weight: bold;
|
||||
opacity: 0;
|
||||
margin-bottom: 10px;
|
||||
animation-name: slideUp;
|
||||
animation-duration: 0.5s;
|
||||
animation-delay: 0.1s;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
&__info {
|
||||
font-size: 13px;
|
||||
line-height: 21px;
|
||||
color: grey;
|
||||
opacity: 0;
|
||||
margin-bottom: 30px;
|
||||
animation-name: slideUp;
|
||||
animation-duration: 0.5s;
|
||||
animation-delay: 0.2s;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
&__return-home {
|
||||
display: block;
|
||||
float: left;
|
||||
width: 110px;
|
||||
height: 36px;
|
||||
background: #1482f0;
|
||||
border-radius: 100px;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
opacity: 0;
|
||||
font-size: 14px;
|
||||
line-height: 36px;
|
||||
cursor: pointer;
|
||||
animation-name: slideUp;
|
||||
animation-duration: 0.5s;
|
||||
animation-delay: 0.3s;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
@keyframes slideUp {
|
||||
0% {
|
||||
transform: translateY(60px);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
304
src/views/home/PSIAnal.vue
Normal file
304
src/views/home/PSIAnal.vue
Normal file
@@ -0,0 +1,304 @@
|
||||
<template>
|
||||
<div id="dayReport" class="dayReport" :style="styles">
|
||||
<div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
|
||||
<sidebar v-if="!sidebar.hide" class="sidebar-container" />
|
||||
<ReportHeader size="psi" top-title="产销率库存分析" :is-full-screen="isFullScreen" @screenfullChange="screenfullChange"
|
||||
@timeRangeChange="handleTimeChange" />
|
||||
<div class="main-body" style="
|
||||
margin-top: -20px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
padding: 0px 16px 0 272px;
|
||||
flex-direction: column;
|
||||
">
|
||||
<div class="top" style="display: flex; gap: 16px">
|
||||
<div class="top-three" style="
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
grid-template-columns: 414px 1194px;
|
||||
">
|
||||
<costOverview :productSaleData="productSaleData" />
|
||||
<PSDO :stockVO="stockVO" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="top" style="display: flex; gap: 16px;margin-top: 6px;">
|
||||
<div class="left-three" style="
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
grid-template-columns: 1624px;
|
||||
">
|
||||
<psiLineChart :saleAndProductData="saleAndProductData" />
|
||||
<!-- <keyWork /> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="centerImg" style="
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1; /* 确保在 backp 之上、内容之下 */
|
||||
"></div> -->
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import ReportHeader from "./components/noRouterHeader.vue";
|
||||
import { Sidebar } from "../../layout/components";
|
||||
import screenfull from "screenfull";
|
||||
import costOverview from "./components/costOverview.vue";
|
||||
// import salesDataOverview from "./components/salesDataOverview.vue";
|
||||
import { mapState } from "vuex";
|
||||
import PSDO from "./components/PSDO.vue";
|
||||
import psiLineChart from "./components/psiLineChart.vue";
|
||||
import { getProductSaleAnalysis } from '@/api/cockpit'
|
||||
// import coreBottomLeft from "./components/coreBottomLeft.vue";
|
||||
// import orderProgress from "./components/orderProgress.vue";
|
||||
// import keyWork from "./components/keyWork.vue";
|
||||
import moment from "moment";
|
||||
// import html2canvas from 'html2canvas'
|
||||
// import JsPDF from 'jspdf'
|
||||
export default {
|
||||
name: "DayReport",
|
||||
components: {
|
||||
ReportHeader,
|
||||
costOverview,
|
||||
PSDO,
|
||||
Sidebar,
|
||||
psiLineChart
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
weekArr: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
|
||||
isFullScreen: false,
|
||||
timer: null,
|
||||
beilv: 1,
|
||||
value: 100,
|
||||
coreProductVisualAlarmVO: [],
|
||||
defect: {},
|
||||
centerEqInfo: [
|
||||
{ title: "工单数量", num: 0 },
|
||||
{ title: "总产量/吨", num: 0 },
|
||||
{ title: "生产合格率", num: "0%" },
|
||||
{ title: "设备运行数量", num: 0 },
|
||||
{ title: "累计能耗/kwh", num: 0 },
|
||||
],
|
||||
productSaleData: [],
|
||||
stockVO: {},
|
||||
saleAndProductData:[],
|
||||
};
|
||||
},
|
||||
|
||||
created() {
|
||||
this.init();
|
||||
this.windowWidth(document.documentElement.clientWidth);
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
theme: (state) => state.settings.theme,
|
||||
sideTheme: (state) => state.settings.sideTheme,
|
||||
sidebar: (state) => state.app.sidebar,
|
||||
device: (state) => state.app.device,
|
||||
needTagsView: (state) => state.settings.tagsView,
|
||||
fixedHeader: (state) => state.settings.fixedHeader,
|
||||
}),
|
||||
classObj() {
|
||||
return {
|
||||
hideSidebar: !this.sidebar.opened,
|
||||
openSidebar: this.sidebar.opened,
|
||||
withoutAnimation: this.sidebar.withoutAnimation,
|
||||
mobile: this.device === "mobile",
|
||||
};
|
||||
},
|
||||
variables() {
|
||||
return variables;
|
||||
},
|
||||
// ...mapGetters(['sidebar']),
|
||||
styles() {
|
||||
const v = Math.floor(this.value * this.beilv * 100) / 10000;
|
||||
return {
|
||||
transform: `scale(${v})`,
|
||||
transformOrigin: "left top",
|
||||
// overflow: hidden;
|
||||
};
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
clientWidth(val) {
|
||||
if (!this.timer) {
|
||||
this.clientWidth = val;
|
||||
this.beilv2 = this.clientWidth / 1920;
|
||||
this.timer = true;
|
||||
let _this = this;
|
||||
setTimeout(function () {
|
||||
_this.timer = false;
|
||||
}, 500);
|
||||
}
|
||||
// 这里可以添加修改时的方法
|
||||
this.windowWidth(val);
|
||||
},
|
||||
},
|
||||
beforeDestroy() {
|
||||
clearInterval(this.timer);
|
||||
this.destroy();
|
||||
},
|
||||
mounted() {
|
||||
const startTime = moment().startOf("week").format("YYYY-MM-DD");
|
||||
const endTime = moment().format("YYYY-MM-DD");
|
||||
console.log(this.date, "date");
|
||||
this.date = [startTime, endTime];
|
||||
// this.weekDay = this.weekArr[moment(this.date).format('e')]
|
||||
// this.getData()
|
||||
const _this = this;
|
||||
_this.beilv = document.documentElement.clientWidth / 1920;
|
||||
window.onresize = () => {
|
||||
return (() => {
|
||||
_this.clientWidth = `${document.documentElement.clientWidth}`;
|
||||
this.beilv = _this.clientWidth / 1920;
|
||||
})();
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
getData(obj) {
|
||||
getProductSaleAnalysis({
|
||||
startTime: 1762704000000,
|
||||
endTime: 1762790400000,
|
||||
mode: 1
|
||||
}).then((res) => {
|
||||
console.log(res);
|
||||
this.productSaleData = [
|
||||
{
|
||||
name: "销量",
|
||||
targetValue: res.data.productSaleData.saleTarget, // 销量目标：100
|
||||
value: res.data.productSaleData.saleValue, // 实际销量：100
|
||||
proportion: res.data.productSaleData.saleProportion, // 销量占比：1（100%）
|
||||
completed: res.data.productSaleData.saleCompleted
|
||||
},
|
||||
{
|
||||
name: "产量",
|
||||
targetValue: res.data.productSaleData.productTarget, // 产量目标：2000
|
||||
value: res.data.productSaleData.productValue, // 实际产量：1000
|
||||
proportion: res.data.productSaleData.productProportion, // 产量占比：0.5（50%）
|
||||
completed: res.data.productSaleData.productCompleted
|
||||
},
|
||||
{
|
||||
name: "累计完成产销率",
|
||||
targetValue: res.data.productSaleData.productAndSaleTarget, // 数据源中无产销率目标，默认为 null
|
||||
// 产销率 = 销量 / 产量 * 100%（避免除数为0）
|
||||
value: res.data.productSaleData.productAndSaleValue,
|
||||
proportion: res.data.productSaleData.productAndSaleProportion,
|
||||
completed: res.data.productSaleData.productAndSaleCompleted
|
||||
}
|
||||
];
|
||||
this.stockVO = {
|
||||
avgValue: res.data.productSaleData.avgValue,
|
||||
endMonthValue: res.data.productSaleData.endMonthValue,
|
||||
totalDays: res.data.productSaleData.totalDays,
|
||||
stockValues: res.data.productSaleAnalysisBaseFormatVOS
|
||||
}
|
||||
this.saleAndProductData = res.data.productSaleAnalysisBaseFormatVOS
|
||||
})
|
||||
},
|
||||
handleTimeChange(obj) {
|
||||
console.log(obj, 'obj');
|
||||
this.getData(obj)
|
||||
},
|
||||
handleClickOutside() {
|
||||
this.$store.dispatch("app/closeSideBar", { withoutAnimation: false });
|
||||
},
|
||||
windowWidth(value) {
|
||||
this.clientWidth = value;
|
||||
this.beilv2 = this.clientWidth / 1920;
|
||||
},
|
||||
|
||||
change() {
|
||||
this.isFullScreen = screenfull.isFullscreen;
|
||||
},
|
||||
init() {
|
||||
if (!screenfull.isEnabled) {
|
||||
this.$message({
|
||||
message: "you browser can not work",
|
||||
type: "warning",
|
||||
});
|
||||
return false;
|
||||
}
|
||||
screenfull.on("change", this.change);
|
||||
},
|
||||
destroy() {
|
||||
if (!screenfull.isEnabled) {
|
||||
this.$message({
|
||||
message: "you browser can not work",
|
||||
type: "warning",
|
||||
});
|
||||
return false;
|
||||
}
|
||||
screenfull.off("change", this.change);
|
||||
},
|
||||
// 全屏
|
||||
screenfullChange() {
|
||||
console.log("screenfull.enabled", screenfull.isEnabled);
|
||||
|
||||
if (!screenfull.isEnabled) {
|
||||
this.$message({
|
||||
message: "you browser can not work",
|
||||
type: "warning",
|
||||
});
|
||||
return false;
|
||||
}
|
||||
screenfull.toggle(this.$refs.dayReportB);
|
||||
},
|
||||
changeDate(val) {
|
||||
this.date = val;
|
||||
// this.weekDay = this.weekArr[moment(this.date).format('e')]
|
||||
// this.getData()
|
||||
if (this.date === moment().format("yyyy-MM-DD")) {
|
||||
this.loopTime();
|
||||
} else {
|
||||
clearInterval(this.timer);
|
||||
}
|
||||
},
|
||||
// 导出
|
||||
// exportPDF() {
|
||||
// this.$message.success('正在导出，请稍等！')
|
||||
// const element = document.getElementById('dayRepDom')
|
||||
// element.style.display = 'block'
|
||||
// const fileName = '株洲碲化镉生产日报' + moment().format('yyMMDD') + '.pdf'
|
||||
// html2canvas(element, {
|
||||
// dpi: 300, // Set to 300 DPI
|
||||
// scale: 3 // Adjusts your resolution
|
||||
// }).then(function(canvas) {
|
||||
// const imgWidth = 595.28
|
||||
// const imgHeight = 841.89
|
||||
// const pageData = canvas.toDataURL('image/jpeg', 1.0)
|
||||
// const PDF = new JsPDF('', 'pt', [imgWidth, imgHeight])
|
||||
// PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
|
||||
// setTimeout(() => {
|
||||
// PDF.save(fileName) // 导出文件名
|
||||
// }, 1000)
|
||||
// })
|
||||
// element.style.display = 'none'
|
||||
// }
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
// @import "~@/assets/styles/mixin.scss";
|
||||
// @import "~@/assets/styles/variables.scss";
|
||||
.dayReport {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
background: url("../../assets/img/backp.png") no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
.hideSidebar .fixed-header {
|
||||
width: calc(100% - 54px);
|
||||
}
|
||||
|
||||
.sidebarHide .fixed-header {
|
||||
width: calc(100%);
|
||||
}
|
||||
|
||||
.mobile .fixed-header {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
236
src/views/home/components/CostsBottomBar.vue
Normal file
236
src/views/home/components/CostsBottomBar.vue
Normal file
@@ -0,0 +1,236 @@
|
||||
<template>
|
||||
<div class="coreBar">
|
||||
<div class="barTop">
|
||||
<div class="barTop-left" style="display: flex;">
|
||||
<div class="title">费用指标趋势</div>
|
||||
<div class="legend">
|
||||
<span class="legend-item manager">管理费用</span>
|
||||
<span class="legend-item sale">销售费用</span>
|
||||
<span class="legend-item finance">财务费用</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lineBottom" style="height: 214px; width: 100%">
|
||||
<!-- 传递 series 数据给子组件，添加 key 确保数据更新时重新渲染 -->
|
||||
<coreLineChart style="height: 214px; width: 680px" :chart-series="chartSeries"
|
||||
:key="JSON.stringify(chartSeries)" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import coreLineChart from './coresBar.vue';
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
export default {
|
||||
name: "Container",
|
||||
components: { coreLineChart },
|
||||
props: ["name", "size", "icon"],
|
||||
data() {
|
||||
return {
|
||||
activeButton: undefined,
|
||||
itemList: [
|
||||
{ unit: "单价·元/m²", targetValue: 16, currentValue: 14.5, progress: 90 },
|
||||
{ unit: "净价·元/m²", targetValue: 16, currentValue: 15.2, progress: 85 },
|
||||
{ unit: "销量·万m²", targetValue: 20, currentValue: 16, progress: 80 },
|
||||
{ unit: "双镀面板·万m²", targetValue: 15, currentValue: 13.8, progress: 92 },
|
||||
],
|
||||
// 定义要传递的 series 数据（对应图例的三个费用类型）
|
||||
chartSeries: [
|
||||
{
|
||||
name: '管理费用',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
symbol: 'circle',
|
||||
lineStyle: { color: 'rgba(11, 88, 255, .5)' },
|
||||
itemStyle: {
|
||||
color: 'rgba(11, 88, 255, .5)',
|
||||
borderColor: 'rgba(11, 88, 255, 1)',
|
||||
borderWidth: 1
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.5,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(11, 88, 255, .4)' },
|
||||
{ offset: 1, color: 'rgba(18, 255, 245, 0)' },
|
||||
]),
|
||||
},
|
||||
data: [140, 232, 101, 264, 90, 340] // 与 xAxis 数据长度一致（6个月份）
|
||||
},
|
||||
{
|
||||
name: '销售费用',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
symbol: 'circle',
|
||||
lineStyle: { color: 'rgba(54, 181, 138, .5)' },
|
||||
itemStyle: {
|
||||
color: 'rgba(54, 181, 138, .5)',
|
||||
borderColor: 'rgba(54, 181, 138, 1)',
|
||||
borderWidth: 1
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.5,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(54, 181, 138, .4)' },
|
||||
{ offset: 1, color: 'rgba(18, 255, 245, 0)' },
|
||||
]),
|
||||
},
|
||||
data: [120, 282, 111, 234, 220, 340]
|
||||
},
|
||||
{
|
||||
name: '财务费用',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
symbol: 'circle',
|
||||
lineStyle: { color: 'rgba(255, 132, 0, .5)' },
|
||||
itemStyle: {
|
||||
color: 'rgba(255, 132, 0, .5)',
|
||||
borderColor: 'rgba(255, 132, 0, 1)',
|
||||
borderWidth: 1
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.5,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(255, 132, 0, .4)' },
|
||||
{ offset: 1, color: 'rgba(18, 255, 245, 0)' },
|
||||
]),
|
||||
},
|
||||
data: [90, 150, 180, 120, 250, 280]
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
/* 原有样式保持不变 */
|
||||
.coreBar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 12px;
|
||||
|
||||
.barTop {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: space-between;
|
||||
|
||||
.title {
|
||||
height: 18px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
color: #000000;
|
||||
line-height: 18px;
|
||||
letter-spacing: 1px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.legend {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
margin-left: 30px;
|
||||
|
||||
.legend-item {
|
||||
position: relative;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -13px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -16px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 12px;
|
||||
height: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.manager::before,
|
||||
.manager::after {
|
||||
background-color: rgba(11, 88, 255, 1);
|
||||
}
|
||||
|
||||
.sale::before,
|
||||
.sale::after {
|
||||
background-color: rgba(54, 181, 138, 1);
|
||||
}
|
||||
|
||||
.finance::before,
|
||||
.finance::after {
|
||||
background-color: rgba(255, 132, 0, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.button-group {
|
||||
display: flex;
|
||||
position: relative;
|
||||
gap: 2px;
|
||||
width: 252px;
|
||||
align-items: center;
|
||||
height: 24px;
|
||||
background: #ecf4fe;
|
||||
border-radius: 12px;
|
||||
|
||||
.button-line {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 14px;
|
||||
border: 1px solid rgba(11, 88, 255, 0.25);
|
||||
}
|
||||
|
||||
.lineOne {
|
||||
top: 5px;
|
||||
left: 59px;
|
||||
}
|
||||
|
||||
.lineTwo {
|
||||
top: 5px;
|
||||
left: 134px;
|
||||
}
|
||||
|
||||
.lineThree {
|
||||
top: 5px;
|
||||
left: 193px;
|
||||
}
|
||||
|
||||
.item-button {
|
||||
cursor: pointer;
|
||||
width: 54px;
|
||||
height: 24px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #0b58ff;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.item-button.active {
|
||||
width: 54px;
|
||||
height: 24px;
|
||||
background: #3071ff;
|
||||
border-radius: 12px;
|
||||
color: #ffffff;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
422
src/views/home/components/Header.vue
Normal file
422
src/views/home/components/Header.vue
Normal file
@@ -0,0 +1,422 @@
|
||||
<template>
|
||||
<header class="report-header">
|
||||
<!-- 左侧区域：logo + 标题 -->
|
||||
<div class="left-content">
|
||||
<img style="height: 36px;" src="../../../assets/img/cnbm.png" alt="benmaLogo" >
|
||||
<div class="top-title">{{ topTitle }}</div>
|
||||
</div>
|
||||
|
||||
<div class="center-content">
|
||||
<!-- 循环 pageRoutes，不再硬编码文字 -->
|
||||
<div class="item" v-for="(page, index) in pageRoutes" :key="index" @click="goToPage(page.path, index)">
|
||||
<span class="item-text">{{ page.text }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- :class="{ 'no-skew': activeIndex === index }
|
||||
" -->
|
||||
<!-- 右侧区域：全屏按钮 -->
|
||||
<div class="right-content">
|
||||
<el-button type="text" class="screen-btn" :title="isFullScreen ? '退出全屏' : '全屏'" @click="changeFullScreen">
|
||||
<svg-icon style="color: #0B58FF;" v-if="isFullScreen" icon-class="unFullScreenView" />
|
||||
<svg-icon style="color: #0B58FF;" v-else icon-class="fullScreenView" />
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 时间选择区域：日/月/年按钮 + label + 日期选择器 -->
|
||||
<div class="timeType">
|
||||
<div class="item" v-for="(item, index) in timeTypes" :key="index" @click="activeTime = index"
|
||||
:class="{ 'no-skew': activeTime === index }">
|
||||
<span class="item-text">{{ item.text }}</span>
|
||||
</div>
|
||||
<div class="dateP">
|
||||
<div class="label">
|
||||
<span class="label-text">日期选择</span>
|
||||
</div>
|
||||
<el-date-picker v-model="date" :type="getPickerType" :placeholder="getPickerPlaceholder"
|
||||
class="custom-date-picker" style="width: 132px;height: 29px;" @change="emitTimeRange" />
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Header',
|
||||
props: {
|
||||
isFullScreen: { type: Boolean, default: false },
|
||||
topTitle: { type: String, default: '' }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentTime: '',
|
||||
timeTimer: null,
|
||||
date: undefined,
|
||||
activeIndex: -1,
|
||||
activeTime: 1, // 0=日，1=月，2=年（默认选中“日”）
|
||||
pageRoutes: [
|
||||
{ text: '营业收入', path: '/operatingRevenue' },
|
||||
{ text: '利润分析', path: '/profitAnalysis' },
|
||||
{ text: '产销率库存分析', path: '/PSIAnal' },
|
||||
{ text: '成本分析', path: '/cost/cost' },
|
||||
{ text: '驾驶舱报表', path: '/cockpit' }
|
||||
],
|
||||
// 定义时间类型配置：text=按钮文字，pickerType=选择器类型，placeholder=占位符
|
||||
timeTypes: [
|
||||
{ text: '日', pickerType: 'date', placeholder: '选择日期' },
|
||||
{ text: '月', pickerType: 'month', placeholder: '选择月份' },
|
||||
{ text: '年', pickerType: 'year', placeholder: '选择年份' }
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 动态获取日期选择器类型
|
||||
getPickerType() {
|
||||
return this.timeTypes[this.activeTime].pickerType;
|
||||
},
|
||||
// 动态获取日期选择器占位符
|
||||
getPickerPlaceholder() {
|
||||
return this.timeTypes[this.activeTime].placeholder;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
goToPage(path, index) {
|
||||
// 1. 跳转到对应路由
|
||||
this.$router.push(path);
|
||||
// 2. 更新activeIndex，让当前点击项高亮
|
||||
this.activeIndex = index;
|
||||
},
|
||||
changeFullScreen() { this.$emit('screenfullChange') },
|
||||
padZero(num) { return num < 10 ? '0' + num : num },
|
||||
/**
|
||||
* 核心方法1：根据维度计算时间区间（首次进入时基于赋值的当月日期，计算“当月第一天0点→次月第一天0点”）
|
||||
* @returns {Object} 包含 start（开始时间）、end（结束时间）、dimension（维度）的区间对象
|
||||
*/
|
||||
calculateTimeRange() {
|
||||
let startTime = 0;
|
||||
let endTime = 0;
|
||||
const mode = this.activeTime + 1; // 1=日，2=月，3=年
|
||||
const defaultMoment = moment(); // 默认当前时间
|
||||
|
||||
// 处理选择的日期：转为moment对象（兼容不同选择器格式）
|
||||
console.log('this.date', this.date);
|
||||
|
||||
const targetMoment = this.date
|
||||
? moment(this.date, this.getPickerType === 'date' ? 'YYYY-MM-DD' : (this.getPickerType === 'month' ? 'YYYY-MM' : 'YYYY'))
|
||||
: defaultMoment;
|
||||
|
||||
// 验证日期有效性
|
||||
if (!targetMoment.isValid()) {
|
||||
console.error('无效日期:', this.date);
|
||||
return { startTime, endTime, mode };
|
||||
}
|
||||
|
||||
// 1. 日维度：当天0点 → 次日0点
|
||||
if (this.activeTime === 0) {
|
||||
startTime = targetMoment.startOf('day').valueOf(); // 当天00:00:00 时间戳
|
||||
endTime = targetMoment.add(1, 'day').startOf('day').valueOf(); // 次日00:00:00 时间戳
|
||||
}
|
||||
|
||||
// 2. 月维度：当月1日0点 → 次月1日0点
|
||||
else if (this.activeTime === 1) {
|
||||
startTime = targetMoment.startOf('month').valueOf(); // 当月1日00:00:00 时间戳
|
||||
endTime = targetMoment.add(1, 'month').startOf('month').valueOf(); // 次月1日00:00:00 时间戳
|
||||
}
|
||||
|
||||
// 3. 年维度：当年1月1日0点 → 次年1月1日0点
|
||||
else if (this.activeTime === 2) {
|
||||
startTime = targetMoment.startOf('year').valueOf(); // 当年1月1日00:00:00 时间戳
|
||||
endTime = targetMoment.add(1, 'year').startOf('year').valueOf(); // 次年1月1日00:00:00 时间戳
|
||||
}
|
||||
|
||||
// 调试输出（格式化显示，便于验证）
|
||||
console.log('时间范围计算结果:', {
|
||||
mode,
|
||||
startTime: moment(startTime).format('YYYY-MM-DD HH:mm:ss'),
|
||||
endTime: moment(endTime).format('YYYY-MM-DD HH:mm:ss'),
|
||||
startTimeStamp: startTime,
|
||||
endTimeStamp: endTime
|
||||
});
|
||||
|
||||
return { startTime, endTime, mode };
|
||||
},
|
||||
/**
|
||||
* 核心方法2：传递时间区间给父组件（首次进入时触发，传递“当月第一天0点→次月第一天0点”）
|
||||
*/
|
||||
emitTimeRange() {
|
||||
const timeRange = this.calculateTimeRange();
|
||||
this.$emit('timeRangeChange', timeRange);
|
||||
// 调试用：查看首次传递的区间（如{start: "2025-10-01T00:00:00", end: "2025-11-01T00:00:00", dimension: "月"}）
|
||||
console.log('当前时间区间：', timeRange);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// 维度切换时：清空选择的日期，并传递当前维度的默认区间
|
||||
activeTime(newVal, oldVal) {
|
||||
if (newVal !== oldVal) {
|
||||
this.date = undefined;
|
||||
// this.emitTimeRange();
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 核心逻辑：首次进入页面，计算当月默认日期并赋值给选择器，同时传递区间
|
||||
const now = new Date();
|
||||
const year = now.getFullYear();
|
||||
const month = this.padZero(now.getMonth() + 1); // 月份从0开始，+1后补零（如1月→01）
|
||||
// 赋值当月默认日期（格式：YYYY-MM，适配month类型选择器）
|
||||
this.date = `${year}-${month}`;
|
||||
// 确保选择器渲染完成后，传递“当月第一天0点→次月第一天0点”的区间
|
||||
this.$nextTick(() => this.emitTimeRange());
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
/* 原有样式不变，仅补充label文字的倾斜抵消样式 */
|
||||
@font-face {
|
||||
font-family: "YouSheBiaoTiHei";
|
||||
src: url('../../../assets/fonts/YouSheBiaoTiHe.ttf') format('truetype');
|
||||
}
|
||||
|
||||
.report-header {
|
||||
height: 117px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
background: url('../../../assets/img/topTitle.png') no-repeat;
|
||||
background-size: cover;
|
||||
background-position: 0 0;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
/* 确保timeType绝对定位生效 */
|
||||
|
||||
.left-content {
|
||||
margin-top: 11px;
|
||||
margin-left: 44px;
|
||||
height: 55px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.top-title {
|
||||
height: 55px;
|
||||
font-family: "YouSheBiaoTiHei", sans-serif;
|
||||
font-size: 42px;
|
||||
color: #1E1651;
|
||||
line-height: 55px;
|
||||
letter-spacing: 6px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.center-content {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-top: 18px;
|
||||
margin-left: 70px;
|
||||
|
||||
.item {
|
||||
width: 180px;
|
||||
height: 50px;
|
||||
background: #E1EEFC;
|
||||
transform: skew(-20deg);
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
color: #1E1651;
|
||||
line-height: 50px;
|
||||
letter-spacing: 2px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
box-shadow: 0px 13px 16px 0px rgba(179, 217, 255, 0.43),
|
||||
0px 2px 4px 0px rgba(92, 140, 255, 0.25),
|
||||
inset 0px -43px 13px 0px rgba(255, 255, 255, 0.51);
|
||||
|
||||
.item-text {
|
||||
display: inline-block;
|
||||
transform: skew(20deg);
|
||||
}
|
||||
}
|
||||
|
||||
.item.no-skew {
|
||||
background: none !important;
|
||||
transform: none !important;
|
||||
box-shadow: none !important;
|
||||
color: #1E1651;
|
||||
|
||||
.item-text {
|
||||
transform: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.timeType {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* 垂直居中，避免元素高低错位 */
|
||||
top: 42px;
|
||||
right:10px;
|
||||
margin-top: 18px;
|
||||
gap: 0;
|
||||
/* 清除间隙，让按钮与选择器紧密连接 */
|
||||
}
|
||||
|
||||
.timeType .item {
|
||||
width: 40px;
|
||||
height: 28px;
|
||||
background: rgba(236, 244, 254, 1);
|
||||
transform: skew(-20deg);
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: rgba(11, 88, 255, 1);
|
||||
line-height: 28px;
|
||||
letter-spacing: 2px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
/* 选中按钮与未选中按钮倾斜角度统一，避免切换时跳动 */
|
||||
}
|
||||
|
||||
.timeType .item .item-text {
|
||||
display: inline-block;
|
||||
transform: skew(20deg);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.timeType .item.no-skew {
|
||||
background: rgba(11, 88, 255, 1);
|
||||
color: rgba(249, 252, 255, 1);
|
||||
transform: skew(-20deg) !important;
|
||||
/* 统一倾斜角度，修复原30deg的错位 */
|
||||
box-shadow: 0 2px 8px rgba(11, 88, 255, 0.3);
|
||||
}
|
||||
|
||||
.timeType .item.no-skew .item-text {
|
||||
transform: skew(20deg) !important;
|
||||
/* 同步统一文字倾斜角度 */
|
||||
}
|
||||
|
||||
.dateP {
|
||||
position: relative;
|
||||
margin-left: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.dateP .label {
|
||||
width: 70px;
|
||||
height: 28px;
|
||||
background: rgba(236, 244, 254, 1);
|
||||
transform: skew(-25deg);
|
||||
/* 与按钮倾斜角度统一（原30deg改为25deg，避免视觉错位） */
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #0B58FF;
|
||||
line-height: 28px;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 补充：label文字抵消倾斜（原代码遗漏，导致文字倾斜） */
|
||||
.dateP .label-text {
|
||||
display: inline-block;
|
||||
transform: skew(25deg);
|
||||
/* 与label倾斜角度相反，确保文字正立 */
|
||||
}
|
||||
|
||||
.right-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 12px;
|
||||
margin-right: 4px;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.current-time {
|
||||
color: #FFFFFF;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 500;
|
||||
font-size: 22px;
|
||||
line-height: 24px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.screen-btn {
|
||||
width: 26px;
|
||||
margin-left: 300px;
|
||||
color: #00fff0;
|
||||
font-size: 26px;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 日期选择器样式保持不变 */
|
||||
::v-deep .custom-date-picker {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
width: 132px !important;
|
||||
height: 28px !important;
|
||||
position: relative;
|
||||
margin: 0 !important;
|
||||
|
||||
/* 1. 调整输入框文字：确保行高与输入框高度一致，垂直居中 */
|
||||
.el-input__inner {
|
||||
height: 28px !important;
|
||||
width: 132px !important;
|
||||
text-align: center;
|
||||
padding-left: 15px !important;
|
||||
padding-right: 32px !important;
|
||||
/* 给图标留空间，避免文字被遮挡 */
|
||||
font-size: 14px !important;
|
||||
line-height: 28px !important;
|
||||
/* 行高=输入框高度，文字垂直居中 */
|
||||
color: rgba(237, 245, 253, 1) !important;
|
||||
vertical-align: middle !important;
|
||||
/* 强制文字垂直对齐 */
|
||||
clip-path: polygon(18px 0, 100% 0, 100% 100%, 0 100%);
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
background-color: rgba(11, 88, 255, 1) !important;
|
||||
border-left: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
/* 2. 调整图标容器：让图标与文字在同一水平线上 */
|
||||
.el-input__prefix {
|
||||
left: auto !important;
|
||||
right: 8px !important;
|
||||
top: 50% !important;
|
||||
/* 从40%改为50%，基于输入框垂直居中 */
|
||||
transform: translateY(-50%) !important;
|
||||
/* 向上偏移自身50%，精准居中 */
|
||||
display: inline-flex !important;
|
||||
/* 让容器内图标垂直居中 */
|
||||
align-items: center !important;
|
||||
/* 图标在容器内垂直居中 */
|
||||
height: 28px !important;
|
||||
/* 容器高度=输入框高度，避免偏移 */
|
||||
}
|
||||
|
||||
/* 3. 调整图标本身：确保图标大小和对齐方式 */
|
||||
.el-input__icon {
|
||||
color: #ffffff !important;
|
||||
font-size: 16px !important;
|
||||
line-height: 28px !important;
|
||||
/* 图标行高=输入框高度，与文字对齐 */
|
||||
vertical-align: middle !important;
|
||||
/* 强制图标垂直对齐 */
|
||||
}
|
||||
|
||||
/* 4. 图标伪类：确保颜色和对齐继承 */
|
||||
.el-icon-date::before {
|
||||
color: #ffffff !important;
|
||||
font-size: 16px !important;
|
||||
line-height: inherit !important;
|
||||
/* 继承父级行高，避免错位 */
|
||||
}
|
||||
}
|
||||
</style>
|
||||
263
src/views/home/components/KFAP.vue
Normal file
263
src/views/home/components/KFAP.vue
Normal file
@@ -0,0 +1,263 @@
|
||||
<template>
|
||||
<div style="">
|
||||
<Container name="利润影主要响因素" icon="cockpitItemIcon" size="profitMiddleBasic" topSize="KFAPTopTitle">
|
||||
<div class="kpi-content" style="padding: 14px 16px; display: flex;width: 100%;">
|
||||
<div class="left" style="width: 382px;">
|
||||
<top-item :itemList="targetItemList" />
|
||||
</div>
|
||||
<div class="bottom"
|
||||
style="height: 227px; margin-left: 16px; display: flex; width: 100%;background-color: rgba(249, 252, 255, 1);">
|
||||
<KFAPMiddleBar :chartData="{
|
||||
allPlaceNames, incomeValueData, profitProportionData, costValueData, costCompletedData
|
||||
}" />
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Container from './container.vue'
|
||||
import topItem from './profit-item-middle.vue'
|
||||
import KFAPMiddleBar from './KFAPMiddleBar.vue'
|
||||
|
||||
export default {
|
||||
name: 'ProductionStatus',
|
||||
components: { Container, topItem, KFAPMiddleBar },
|
||||
props: {
|
||||
middleChartData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
middleItemData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
parentItemList: [
|
||||
{ name: "营业收入", targetValue: 0, value: 0, proportion: 0, route: 'operatingRevenue' },
|
||||
{ name: "成本", targetValue: 0, value: 0, proportion: 0, route: 'cost/cost' },
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
allPlaceNames() {
|
||||
if (!Array.isArray(this.middleChartData)) return [];
|
||||
return this.middleChartData.map(item => this.cleanPlaceName(item.name)).filter(Boolean)
|
||||
},
|
||||
PlaceNames() {
|
||||
if (!Array.isArray(this.middleChartData)) return [];
|
||||
return this.middleChartData.map(item => item.name).filter(Boolean);
|
||||
},
|
||||
profitProportionData() {
|
||||
if (!Array.isArray(this.middleChartData)) return [];
|
||||
return this.PlaceNames.map(place => {
|
||||
const target = this.middleChartData.find(item => item.name === place);
|
||||
return target?.profitProportion || 0;
|
||||
});
|
||||
},
|
||||
incomeValueData() {
|
||||
if (!Array.isArray(this.middleChartData)) return [];
|
||||
return this.PlaceNames.map(place => {
|
||||
const target = this.middleChartData.find(item => item.name === place);
|
||||
return target?.income || 0;
|
||||
});
|
||||
},
|
||||
costValueData() {
|
||||
if (!Array.isArray(this.middleChartData)) return [];
|
||||
return this.PlaceNames.map(place => {
|
||||
const target = this.middleChartData.find(item => item.name === place);
|
||||
return target?.cost || 0;
|
||||
});
|
||||
},
|
||||
|
||||
costCompletedData() {
|
||||
if (!Array.isArray(this.middleChartData)) return [];
|
||||
return this.PlaceNames.map(place => {
|
||||
const target = this.middleChartData.find(item => item.name === place);
|
||||
return target?.costCompleted || 0;
|
||||
});
|
||||
},
|
||||
|
||||
targetItemList() {
|
||||
// 基于 parentItemList 的名称，匹配 productAndSaleData 中对应名称的数据
|
||||
return this.parentItemList.map(parentItem => {
|
||||
// 按名称精准匹配（name 完全一致才关联）
|
||||
const productItem = this.middleItemData.find(
|
||||
item => item.name === parentItem.name
|
||||
) || {};
|
||||
|
||||
// 优先使用匹配到的 productItem 数据，缺失则用 parentItem 的默认值（0）
|
||||
return {
|
||||
name: parentItem.name, // 保留原名称（销量、产量等）
|
||||
targetValue: productItem.targetValue ?? parentItem.targetValue ?? 0,
|
||||
value: productItem.value ?? parentItem.value ?? 0,
|
||||
proportion: productItem.proportion ?? parentItem.proportion ?? 0,
|
||||
completed: productItem.completed ?? parentItem.completed ?? 1,
|
||||
route: parentItem.route // 路由沿用 parentItem 的配置
|
||||
};
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
cleanPlaceName(place) {
|
||||
return place?.replace('分公司', '') || ''; // 匹配“分公司”并替换为空，兼容null/undefined
|
||||
},
|
||||
// // 唯一的地名提取方法（定义在 methods 中，确保是函数）
|
||||
// extractPlace(item) {
|
||||
// if (!item?.name) return ''; // 处理空值，避免报错
|
||||
// const match = item.name.match(/(.+?)(基地|利润总额|营业收入|成本)/);
|
||||
// return match ? match[1] : item.name;
|
||||
// }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
/* 样式部分保持不变 */
|
||||
.scroll-container {
|
||||
max-height: 210px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
padding: 10px 0;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
.proBarInfo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 8px 27px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.proBarInfoEqInfo {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.slot {
|
||||
width: 21px;
|
||||
height: 23px;
|
||||
background: rgba(0, 106, 205, 0.22);
|
||||
backdrop-filter: blur(1.5px);
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #68B5FF;
|
||||
line-height: 23px;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.eq-name {
|
||||
margin-left: 8px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
line-height: 18px;
|
||||
letter-spacing: 1px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.eqStatus {
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
line-height: 18px;
|
||||
text-align: right;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.splitLine {
|
||||
width: 1px;
|
||||
height: 14px;
|
||||
border: 1px solid #ADADAD;
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
.yield {
|
||||
height: 18px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #00FFFF;
|
||||
line-height: 18px;
|
||||
text-align: right;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.proBarInfoEqInfoLeft {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.proBarInfoEqInfoRight {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.proBarWrapper {
|
||||
position: relative;
|
||||
height: 10px;
|
||||
margin-top: 6px;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.proBarLine {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(65deg, rgba(82, 82, 82, 0) 0%, #ACACAC 100%);
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.proBarLineTop {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
background: linear-gradient(65deg, rgba(53, 223, 247, 0) 0%, rgba(54, 220, 246, 0.92) 92%, #36F6E5 100%, #37ACF5 100%);
|
||||
border-radius: 5px;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.chartImgBottom {
|
||||
position: absolute;
|
||||
bottom: 45px;
|
||||
left: 58px;
|
||||
}
|
||||
|
||||
.line {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: 57px;
|
||||
bottom: 42px;
|
||||
width: 1px;
|
||||
height: 20px;
|
||||
background-color: #00E8FF;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.production-status-chart-tooltip {
|
||||
background: #0a2b4f77 !important;
|
||||
border: none !important;
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
.production-status-chart-tooltip * {
|
||||
color: #fff !important;
|
||||
}
|
||||
</style>
|
||||
273
src/views/home/components/KFAPMiddleBar.vue
Normal file
273
src/views/home/components/KFAPMiddleBar.vue
Normal file
@@ -0,0 +1,273 @@
|
||||
<template>
|
||||
<div class="coreBar" style="height: 100%;">
|
||||
<div class="barTop">
|
||||
<!-- 标题：单独左对齐 -->
|
||||
<!-- <div class="title">销售指标趋势</div> -->
|
||||
<!-- 关键：新增右侧容器，包裹图例和按钮组，实现整体靠右 -->
|
||||
<div class="right-container">
|
||||
<div class="legend">
|
||||
<span class="legend-item">
|
||||
<span class="legend-icon line yield"></span>
|
||||
利润
|
||||
</span>
|
||||
<span class="legend-item">
|
||||
<span class="legend-icon square target"></span>
|
||||
营业收入
|
||||
</span>
|
||||
<!-- 给第三个、第四个图例项加 close-item 类 -->
|
||||
<span class="legend-item close-item">
|
||||
<span class="legend-icon square achieved"></span>
|
||||
<!-- 达标 -->
|
||||
</span>
|
||||
<span class="legend-item close-item">
|
||||
<span class="legend-icon square unachieved"></span>
|
||||
成本
|
||||
</span>
|
||||
</div>
|
||||
<!-- <div class="button-group">
|
||||
<div style="letter-spacing: 8px" class="item-button" :class="{ active: activeButton === 0 }"
|
||||
@click="activeButton = 0">
|
||||
销量
|
||||
</div>
|
||||
<div style="letter-spacing: 8px" class="item-button" :class="{ active: activeButton === 1 }"
|
||||
@click="activeButton = 1">
|
||||
毛利率
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="lineBottom" style="height: 100%; width: 100%">
|
||||
<coreLineChart :chart-data="{
|
||||
series: chartSeries,
|
||||
allPlaceNames: chartData.allPlaceNames
|
||||
}" style="height: 100%; width: 100%" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import coreLineChart from './operatingLineBar.vue';
|
||||
import * as echarts from 'echarts';
|
||||
export default {
|
||||
name: "Container",
|
||||
components: { coreLineChart },
|
||||
props: ['chartData' ],
|
||||
data() {
|
||||
return {
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 原有计算属性（allPlaceNames、profitProportionData 等）保持不变
|
||||
// 新增：定义图表 series 配置
|
||||
chartSeries() {
|
||||
const { allPlaceNames, incomeValueData, profitProportionData, costValueData, costCompletedData } = this.chartData
|
||||
// 处理空数据默认值
|
||||
const incomeData = incomeValueData || Array(allPlaceNames.length).fill(0);
|
||||
const profitData = profitProportionData || Array(allPlaceNames.length).fill(0);
|
||||
const costData = costValueData || Array(allPlaceNames.length).fill(0);
|
||||
|
||||
return [
|
||||
// 1. 利润占比：折线图
|
||||
{
|
||||
name: '利润',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
lineStyle: {
|
||||
color: 'rgba(40, 138, 255, .5)',
|
||||
width: 2
|
||||
},
|
||||
itemStyle: {
|
||||
color: 'rgba(40, 138, 255, 1)',
|
||||
borderColor: 'rgba(40, 138, 255, 1)',
|
||||
borderWidth: 2,
|
||||
radius: 4
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.2,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(40, 138, 255, .9)' },
|
||||
{ offset: 1, color: 'rgba(255, 132, 0, 0)' }
|
||||
])
|
||||
},
|
||||
data: profitData,
|
||||
symbol: 'circle',
|
||||
symbolSize: 6
|
||||
},
|
||||
// 2. 营业收入：柱状图
|
||||
{
|
||||
name: '营业收入',
|
||||
type: 'bar',
|
||||
yAxisIndex: 0,
|
||||
barWidth: 18,
|
||||
itemStyle: {
|
||||
color: '#2889FF',
|
||||
borderRadius: [4, 4, 0, 0]
|
||||
},
|
||||
data: incomeData
|
||||
},
|
||||
// 3. 成本：柱状图（动态颜色）
|
||||
{
|
||||
name: '成本',
|
||||
type: 'bar',
|
||||
yAxisIndex: 0,
|
||||
barWidth: 18,
|
||||
itemStyle: {
|
||||
color: (params) => {
|
||||
const completed = costCompletedData?.[params.dataIndex] ?? 0;
|
||||
return completed === 1 ? 'rgba(255, 132, 0, 1)' : 'rgba(40, 203, 151, 1)';
|
||||
},
|
||||
borderRadius: [4, 4, 0, 0]
|
||||
},
|
||||
data: costData
|
||||
}
|
||||
];
|
||||
}
|
||||
},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.coreBar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
|
||||
.barTop {
|
||||
display: flex;
|
||||
justify-content: flex-end; // 标题左、右侧容器右，整体两端对齐
|
||||
align-items: center; // 垂直居中，避免上下错位
|
||||
gap: 16px; // 标题与右侧容器的最小间距，防止拥挤
|
||||
width: 100%; // 确保占满父容器，实现两端对齐
|
||||
|
||||
.title {
|
||||
height: 18px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
color: #000000;
|
||||
line-height: 18px;
|
||||
letter-spacing: 1px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
// 标题固定在左侧，不挤压右侧空间
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// 1. 右侧容器：包裹图例和按钮组，整体靠右
|
||||
.right-container {
|
||||
display: flex;
|
||||
align-items: center; // 图例和按钮组垂直居中
|
||||
gap: 24px; // 图例与按钮组的间距，避免贴紧
|
||||
margin-right: 46px; // 右侧整体留边，与原按钮组边距一致
|
||||
}
|
||||
|
||||
// 2. 图例：在右侧容器内横向排列
|
||||
.legend {
|
||||
display: flex;
|
||||
gap: 16px; // 图例项之间间距，避免重叠
|
||||
align-items: center;
|
||||
// 移除原margin-left，避免位置偏移
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.legend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
white-space: nowrap; // 防止图例文字换行
|
||||
}
|
||||
|
||||
.legend-icon {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.legend-icon.line {
|
||||
width: 12px;
|
||||
height: 2px;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
top: -2px;
|
||||
left: 3px;
|
||||
width: 6px;
|
||||
border-radius: 50%;
|
||||
height: 6px;
|
||||
background-color: rgba(40, 138, 255, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.legend-icon.square {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
// 图例颜色
|
||||
.yield {
|
||||
background: rgba(40, 138, 255, 1);
|
||||
}
|
||||
|
||||
.target {
|
||||
background: #2889FF;
|
||||
}
|
||||
|
||||
.achieved {
|
||||
background: rgba(40, 203, 151, 1);
|
||||
}
|
||||
|
||||
.unachieved {
|
||||
background: rgba(255, 132, 0, 1);
|
||||
}
|
||||
.legend-item.close-item+.legend-item.close-item {
|
||||
margin-left: -8px; // 负margin抵消默认gap，数值可根据需求调整
|
||||
// 若原gap是16px，想让两者间距变为8px，设置 margin-left: -8px 即可
|
||||
}
|
||||
// 3. 按钮组：在右侧容器内，保留原有样式
|
||||
.button-group {
|
||||
display: flex;
|
||||
position: relative;
|
||||
gap: 2px;
|
||||
width: 283px;
|
||||
align-items: center;
|
||||
height: 24px;
|
||||
background: #ecf4fe;
|
||||
border-radius: 12px;
|
||||
// 移除原margin-right，由右侧容器统一控制
|
||||
margin: 0;
|
||||
|
||||
.item-button {
|
||||
cursor: pointer;
|
||||
width: 142px;
|
||||
height: 24px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #0b58ff;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
letter-spacing: 8px; // 确保文字间距生效
|
||||
padding-left: 8px; // 抵消letter-spacing导致的文字左偏
|
||||
}
|
||||
|
||||
.item-button.active {
|
||||
width: 142px;
|
||||
height: 24px;
|
||||
background: #3071ff;
|
||||
border-radius: 12px;
|
||||
color: #ffffff;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
404
src/views/home/components/PSDO.vue
Normal file
404
src/views/home/components/PSDO.vue
Normal file
@@ -0,0 +1,404 @@
|
||||
<template>
|
||||
<div style="flex: 1">
|
||||
<Container name="库存" icon="cockpitItemIcon" size="psiMiddleBg" topSize="KFAPTopTitle">
|
||||
<!-- 1. 移除 .kpi-content 的固定高度，改为自适应 -->
|
||||
<div class="kpi-content" style="padding: 14px 16px; display: flex;width: 100%;">
|
||||
<div class="bottom"
|
||||
style="height: 376px;display: flex; width: 100%;background-color: rgba(249, 252, 255, 1);flex-direction: column;">
|
||||
<!-- <top-item /> -->
|
||||
<div class="data" style="width: 100%; display: flex;padding: 26px 0 0 0 ;justify-content: space-evenly;">
|
||||
<div class="data-item" style="display: flex;gap: 21px;">
|
||||
<img style="width: 100px;height: 103px;" src="../../../assets/img/monthNum.png" alt="">
|
||||
<div class="text">
|
||||
<div class="number">
|
||||
{{ stockVO.endMonthValue || 0 }}
|
||||
</div>
|
||||
<div class="title">
|
||||
月末数量
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-item" style="display: flex;gap: 21px;">
|
||||
<img style="width: 100px;height: 103px;" src="../../../assets/img/averageNum.png" alt="">
|
||||
<div class="text">
|
||||
<div class="number">
|
||||
{{ stockVO.avgValue || 0 }}
|
||||
</div>
|
||||
<div class="title">
|
||||
平均数量
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-item" style="display: flex;gap: 21px;">
|
||||
<img style="width: 100px;height: 103px;" src="../../../assets/img/dayNum.png" alt="">
|
||||
<div class="text">
|
||||
<div class="number">
|
||||
{{ stockVO.totalDays || 0 }}
|
||||
</div>
|
||||
<div class="title">
|
||||
折合天数
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart" style="height: 240px;">
|
||||
<PSDOBar :stockValues="stockValues" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Container from './container.vue'
|
||||
// import * as echarts from 'echarts'
|
||||
import topItem from './operating-item.vue'
|
||||
import PSDOBar from './PSDOBar.vue'
|
||||
|
||||
export default {
|
||||
name: 'ProductionStatus',
|
||||
components: { Container, topItem, PSDOBar },
|
||||
// mixins: [resize],
|
||||
props: {
|
||||
stockVO: { // 恢复生产概览数据（原代码注释了，需根据实际需求保留）
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
stockValues:[],
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
stockVO: {
|
||||
handler(newValue, oldValue) {
|
||||
this.stockValues = newValue.stockValues
|
||||
},
|
||||
deep: true // 若对象内属性变化需触发，需加 deep: true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 初始化图表（若需展示图表，需在模板中添加对应 DOM）
|
||||
// this.$nextTick(() => this.updateChart())
|
||||
},
|
||||
beforeDestroy() {
|
||||
// 销毁图表，避免内存泄漏
|
||||
if (this.chart) {
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateChart() {
|
||||
// 注意：原代码中图表依赖 id 为 "productionStatusChart" 的 DOM，需在模板中补充，否则会报错
|
||||
// 示例：在 Container 内添加 <div id="productionStatusChart" style="height: 200px;"></div>
|
||||
if (!document.getElementById('productionStatusChart')) return
|
||||
|
||||
if (this.chart) this.chart.dispose()
|
||||
this.chart = echarts.init(document.getElementById('productionStatusChart'))
|
||||
|
||||
const data = [
|
||||
this.productionOverviewVo.input || 0,
|
||||
this.productionOverviewVo.output || 0,
|
||||
this.productionOverviewVo.ng || 0,
|
||||
this.productionOverviewVo.lowValue || 0,
|
||||
this.productionOverviewVo.scrap || 0,
|
||||
this.productionOverviewVo.inProcess || 0,
|
||||
this.productionOverviewVo.engineer || 0
|
||||
]
|
||||
|
||||
const option = {
|
||||
type: 'bar',
|
||||
grid: { left: 51, right: 40, top: 50, bottom: 45 },
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { type: 'shadow' },
|
||||
className: 'production-status-chart-tooltip'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
offset: 8,
|
||||
data: ['投入', '产出', '待判', '低价值', '报废', '在制', '实验片'],
|
||||
axisTick: { show: false },
|
||||
axisLine: { show: true, onZero: false, lineStyle: { color: '#00E8FF' } },
|
||||
axisLabel: {
|
||||
color: 'rgba(255,255,255,0.7)',
|
||||
fontSize: 12,
|
||||
interval: 0,
|
||||
width: 38,
|
||||
overflow: 'break'
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '单位/片',
|
||||
nameTextStyle: { color: 'rgba(255,255,255,0.7)', fontSize: 14, align: 'left' },
|
||||
min: () => 0,
|
||||
max: (value) => Math.ceil(value.max),
|
||||
scale: true,
|
||||
axisTick: { show: false },
|
||||
axisLabel: { color: 'rgba(255,255,255,0.7)', fontSize: 12 },
|
||||
splitLine: { lineStyle: { color: 'RGBA(24, 88, 100, 0.6)', type: 'dashed' } },
|
||||
axisLine: { show: true, lineStyle: { color: '#00E8FF' } }
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'pictorialBar',
|
||||
label: { show: true, position: 'top', distance: -3, color: '#89CDFF', fontSize: 11 },
|
||||
symbolSize: [20, 8],
|
||||
symbolOffset: [0, 5],
|
||||
z: 20,
|
||||
itemStyle: {
|
||||
borderColor: '#3588C7',
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'RGBA(22, 89, 98, 1)' },
|
||||
{ offset: 1, color: '#3588C7' }
|
||||
])
|
||||
},
|
||||
data: data
|
||||
},
|
||||
{
|
||||
type: 'bar',
|
||||
barWidth: 20,
|
||||
itemStyle: {
|
||||
borderWidth: 1,
|
||||
borderColor: '#3588C7',
|
||||
opacity: 0.8,
|
||||
color: {
|
||||
x: 0, y: 0, x2: 0, y2: 1,
|
||||
type: 'linear',
|
||||
global: false,
|
||||
colorStops: [
|
||||
{ offset: 0, color: 'rgba(73,178,255,0)' },
|
||||
{ offset: 0.5, color: 'rgba(0, 232, 255, .5)' },
|
||||
{ offset: 1, color: 'rgba(0, 232, 255, 1)' }
|
||||
]
|
||||
}
|
||||
},
|
||||
tooltip: { show: false },
|
||||
data: data
|
||||
},
|
||||
{
|
||||
type: 'pictorialBar',
|
||||
symbolSize: [20, 8],
|
||||
symbolOffset: [0, -4],
|
||||
z: 12,
|
||||
symbolPosition: 'end',
|
||||
itemStyle: {
|
||||
borderColor: 'rgba(0, 232, 255, 1)',
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'RGBA(22, 89, 98, 1)' },
|
||||
{ offset: 1, color: '#3588C7' }
|
||||
])
|
||||
},
|
||||
tooltip: { show: false },
|
||||
data: data
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
this.chart.setOption(option)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
/* 3. 核心：滚动容器样式（固定高度+溢出滚动+隐藏滚动条） */
|
||||
.scroll-container {
|
||||
/* 1. 固定容器高度：根据页面布局调整（示例300px，超出则滚动） */
|
||||
max-height: 210px;
|
||||
/* 2. 溢出滚动：内容超出高度时显示滚动功能 */
|
||||
overflow-y: auto;
|
||||
/* 3. 隐藏横向滚动条（防止设备名过长导致横向滚动） */
|
||||
overflow-x: hidden;
|
||||
/* 4. 内边距：与标题栏和容器边缘对齐 */
|
||||
padding: 10px 0;
|
||||
|
||||
/* 5. 隐藏滚动条（兼容主流浏览器） */
|
||||
/* Chrome/Safari */
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Firefox */
|
||||
scrollbar-width: none;
|
||||
/* IE/Edge */
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
/* 设备项样式优化：增加间距，避免拥挤 */
|
||||
.proBarInfo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 8px 27px;
|
||||
/* 调整内边距，优化排版 */
|
||||
margin-bottom: 10px;
|
||||
/* 设备项之间的垂直间距 */
|
||||
}
|
||||
|
||||
/* 原有样式保留，优化细节 */
|
||||
.proBarInfoEqInfo {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
/* 垂直居中，避免序号/文字错位 */
|
||||
}
|
||||
|
||||
.slot {
|
||||
width: 21px;
|
||||
height: 23px;
|
||||
background: rgba(0, 106, 205, 0.22);
|
||||
backdrop-filter: blur(1.5px);
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #68B5FF;
|
||||
line-height: 23px;
|
||||
/* 垂直居中文字 */
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.eq-name {
|
||||
margin-left: 8px;
|
||||
/* 增加与序号的间距 */
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
line-height: 18px;
|
||||
letter-spacing: 1px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.eqStatus {
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
line-height: 18px;
|
||||
text-align: right;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.splitLine {
|
||||
width: 1px;
|
||||
height: 14px;
|
||||
border: 1px solid #ADADAD;
|
||||
margin: 0 8px;
|
||||
/* 优化分割线间距 */
|
||||
}
|
||||
|
||||
.yield {
|
||||
height: 18px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #00FFFF;
|
||||
line-height: 18px;
|
||||
text-align: right;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.proBarInfoEqInfoLeft {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* 序号和设备名垂直居中 */
|
||||
}
|
||||
|
||||
.proBarInfoEqInfoRight {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* 状态/分割线/百分比垂直居中 */
|
||||
}
|
||||
|
||||
.proBarWrapper {
|
||||
position: relative;
|
||||
height: 10px;
|
||||
margin-top: 6px;
|
||||
/* 进度条与上方信息的间距 */
|
||||
border-radius: 5px;
|
||||
/* 进度条圆角，优化视觉 */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.proBarLine {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(65deg, rgba(82, 82, 82, 0) 0%, #ACACAC 100%);
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.proBarLineTop {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
background: linear-gradient(65deg, rgba(53, 223, 247, 0) 0%, rgba(54, 220, 246, 0.92) 92%, #36F6E5 100%, #37ACF5 100%);
|
||||
border-radius: 5px;
|
||||
transition: width 0.3s ease;
|
||||
/* 进度变化时添加过渡动画，更流畅 */
|
||||
}
|
||||
|
||||
/* 图表相关样式保留 */
|
||||
.chartImgBottom {
|
||||
position: absolute;
|
||||
bottom: 45px;
|
||||
left: 58px;
|
||||
}
|
||||
|
||||
.line {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: 57px;
|
||||
bottom: 42px;
|
||||
width: 1px;
|
||||
height: 20px;
|
||||
background-color: #00E8FF;
|
||||
}
|
||||
|
||||
.data-item {
|
||||
align-items: center;
|
||||
.number {
|
||||
font-family: "YouSheBiaoTiHei", sans-serif;
|
||||
width: 130px;
|
||||
height: 38px;
|
||||
font-family: YouSheBiaoTiHei;
|
||||
font-size: 38px;
|
||||
color: #000000;
|
||||
line-height: 38px;
|
||||
letter-spacing: 2px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
.title{
|
||||
width: 76px;
|
||||
height: 25px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
color: #868687;
|
||||
line-height: 25px;
|
||||
letter-spacing: 1px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
/* 全局 tooltip 样式（不使用 scoped，确保生效） */
|
||||
.production-status-chart-tooltip {
|
||||
background: #0a2b4f77 !important;
|
||||
border: none !important;
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
.production-status-chart-tooltip * {
|
||||
color: #fff !important;
|
||||
}
|
||||
</style>
|
||||
178
src/views/home/components/PSDOBar.vue
Normal file
178
src/views/home/components/PSDOBar.vue
Normal file
@@ -0,0 +1,178 @@
|
||||
<template>
|
||||
<div class="coreBar" style="height: 100%;">
|
||||
<div class="barTop">
|
||||
<!-- 标题：单独左对齐 -->
|
||||
<!-- <div class="title">销售指标趋势</div> -->
|
||||
<!-- 关键：新增右侧容器，包裹图例和按钮组，实现整体靠右 -->
|
||||
<div class="right-container">
|
||||
<div class="legend">
|
||||
<span class="legend-item close-item">
|
||||
<span class="legend-icon square unachieved"></span>
|
||||
库存
|
||||
</span>
|
||||
</div>
|
||||
<!-- <div class="button-group">
|
||||
<div style="letter-spacing: 8px" class="item-button" :class="{ active: activeButton === 0 }"
|
||||
@click="activeButton = 0">
|
||||
销量
|
||||
</div>
|
||||
<div style="letter-spacing: 8px" class="item-button" :class="{ active: activeButton === 1 }"
|
||||
@click="activeButton = 1">
|
||||
毛利率
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="lineBottom" style="height: 100%; width: 100%">
|
||||
<psrChartBar :stockValues="stockValues" style="height: 100%; width: 100%" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import psrChartBar from './psrChartBar.vue';
|
||||
export default {
|
||||
name: "Container",
|
||||
components: { psrChartBar },
|
||||
props: [ "stockValues"],
|
||||
data() {
|
||||
return {
|
||||
activeButton: 0,
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.coreBar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
|
||||
.barTop {
|
||||
display: flex;
|
||||
justify-content: flex-end; // 标题左、右侧容器右，整体两端对齐
|
||||
align-items: center; // 垂直居中，避免上下错位
|
||||
gap: 16px; // 标题与右侧容器的最小间距，防止拥挤
|
||||
width: 100%; // 确保占满父容器，实现两端对齐
|
||||
|
||||
.title {
|
||||
height: 18px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
color: #000000;
|
||||
line-height: 18px;
|
||||
letter-spacing: 1px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
// 标题固定在左侧，不挤压右侧空间
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// 1. 右侧容器：包裹图例和按钮组，整体靠右
|
||||
.right-container {
|
||||
display: flex;
|
||||
align-items: center; // 图例和按钮组垂直居中
|
||||
gap: 24px; // 图例与按钮组的间距，避免贴紧
|
||||
margin-right: 46px; // 右侧整体留边，与原按钮组边距一致
|
||||
}
|
||||
|
||||
// 2. 图例：在右侧容器内横向排列
|
||||
.legend {
|
||||
display: flex;
|
||||
gap: 16px; // 图例项之间间距，避免重叠
|
||||
align-items: center;
|
||||
// 移除原margin-left，避免位置偏移
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.legend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
white-space: nowrap; // 防止图例文字换行
|
||||
}
|
||||
|
||||
.legend-icon {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.legend-icon.line {
|
||||
width: 12px;
|
||||
height: 2px;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
top: -2px;
|
||||
left: 3px;
|
||||
width: 6px;
|
||||
border-radius: 50%;
|
||||
height: 6px;
|
||||
background-color: rgba(40, 138, 255, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.legend-icon.square {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.unachieved {
|
||||
background: rgba(40, 137, 255, 1);
|
||||
}
|
||||
.legend-item.close-item+.legend-item.close-item {
|
||||
margin-left: -8px; // 负margin抵消默认gap，数值可根据需求调整
|
||||
// 若原gap是16px，想让两者间距变为8px，设置 margin-left: -8px 即可
|
||||
}
|
||||
// 3. 按钮组：在右侧容器内，保留原有样式
|
||||
.button-group {
|
||||
display: flex;
|
||||
position: relative;
|
||||
gap: 2px;
|
||||
width: 283px;
|
||||
align-items: center;
|
||||
height: 24px;
|
||||
background: #ecf4fe;
|
||||
border-radius: 12px;
|
||||
// 移除原margin-right，由右侧容器统一控制
|
||||
margin: 0;
|
||||
|
||||
.item-button {
|
||||
cursor: pointer;
|
||||
width: 142px;
|
||||
height: 24px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #0b58ff;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
letter-spacing: 8px; // 确保文字间距生效
|
||||
padding-left: 8px; // 抵消letter-spacing导致的文字左偏
|
||||
}
|
||||
|
||||
.item-button.active {
|
||||
width: 142px;
|
||||
height: 24px;
|
||||
background: #3071ff;
|
||||
border-radius: 12px;
|
||||
color: #ffffff;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
253
src/views/home/components/baseTable.vue
Normal file
253
src/views/home/components/baseTable.vue
Normal file
@@ -0,0 +1,253 @@
|
||||
<!--
|
||||
* @Date: 2020-12-14 09:07:03
|
||||
* @LastEditors: zhp
|
||||
* @LastEditTime: 2024-09-05 09:50:14
|
||||
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseTable.vue
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="visual-base-table-container">
|
||||
<el-table :max-height="maxHeight" ref="scroll_Table" @mouseenter.native="autoScroll(true)"
|
||||
@mouseleave.native="autoScroll(false)" v-loading="isLoading"
|
||||
:header-cell-style="{ background: 'rgba(218, 226, 237, 1)', color: 'rgba(0, 0, 0, .6)',padding:'3px 2px'}" :row-style="setRowStyle"
|
||||
:data="renderData" border style="width: 100%; background: transparent">
|
||||
<el-table-column v-if="page && limit && showIndex" prop="_pageIndex" label="序号" :width="70" align="center" />
|
||||
<el-table-column v-for="item in renderTableHeadList" :key="item.prop" :show-overflow-tooltip="showOverflow"
|
||||
v-bind="item">
|
||||
<template slot-scope="scope">
|
||||
|
||||
<component :is="item.subcomponent" v-if="item.subcomponent" :inject-data="{...scope.row, ...item}"
|
||||
@emitData="emitData" />
|
||||
<span v-else>{{ scope.row[item.prop] | commonFilter(item.filter) }}</span>
|
||||
|
||||
</template>
|
||||
</el-table-column>
|
||||
<slot name="content" />
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { isObject, isString } from 'lodash'
|
||||
export default {
|
||||
name: 'BaseTable',
|
||||
filters: {
|
||||
commonFilter: (source, filterType = a => a) => {
|
||||
return filterType(source)
|
||||
}
|
||||
},
|
||||
props: {
|
||||
maxHeight: {
|
||||
type: [Number, String], // 支持数字（如300）或字符串（如'300px'）
|
||||
required: false,
|
||||
default: 200 // 原固定值，作为默认 fallback
|
||||
},
|
||||
tableData: {
|
||||
type: Array,
|
||||
required: true,
|
||||
validator: val => val.filter(item => !isObject(item)).length === 0
|
||||
},
|
||||
tableConfig: {
|
||||
type: Array,
|
||||
required: true,
|
||||
validator: val => val.filter(item => !isString(item.prop) || !isString(item.label)).length === 0
|
||||
},
|
||||
isLoading: {
|
||||
type: Boolean,
|
||||
required: false
|
||||
},
|
||||
page: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: 1
|
||||
},
|
||||
limit: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: 5
|
||||
},
|
||||
beilv: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
showOverflow: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showIndex: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableConfigBak: [],
|
||||
selectedBox: new Array(100).fill(true)
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
renderData() {
|
||||
if (this.tableData.length && !this.tableData[0]._pageIndex) {
|
||||
this.tableData.forEach((item, index) => {
|
||||
item._pageIndex = (this.page - 1) * this.limit + index + 1
|
||||
})
|
||||
}
|
||||
return this.tableData.slice((this.page - 1) * this.limit, this.page * this.limit)
|
||||
},
|
||||
renderTableHeadList() {
|
||||
return this.tableConfig.filter((item, index) => {
|
||||
return this.selectedBox[index]
|
||||
})
|
||||
}
|
||||
},
|
||||
beforeMount() {
|
||||
this.selectedBox = new Array(100).fill(true)
|
||||
},
|
||||
mounted() {
|
||||
this.autoScroll()
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.autoScroll(true)
|
||||
},
|
||||
methods: {
|
||||
autoScroll(stop) {
|
||||
const table = this.$refs.scroll_Table
|
||||
if (!table) return; // 防止table未加载时出错
|
||||
|
||||
const divData = table.$refs.bodyWrapper
|
||||
if (stop) {
|
||||
window.clearInterval(this.scrolltimer)
|
||||
} else {
|
||||
// 先清除已有计时器，避免重复创建
|
||||
if (this.scrolltimer) {
|
||||
window.clearInterval(this.scrolltimer)
|
||||
}
|
||||
|
||||
this.scrolltimer = window.setInterval(() => {
|
||||
// 每次滚动1像素
|
||||
divData.scrollTop += 1
|
||||
|
||||
// 关键修改：使用>=判断，允许微小像素偏差
|
||||
if (divData.scrollTop + divData.clientHeight >= divData.scrollHeight - 1) {
|
||||
// 滚动到底部后，重置到顶部（延迟一点更自然）
|
||||
// setTimeout(() => {
|
||||
divData.scrollTop = 0
|
||||
// }, 2000); // 停顿500ms后再从头滚动
|
||||
}
|
||||
}, 200) // 滚动速度（数值越小越快）
|
||||
}
|
||||
},
|
||||
emitData(val) {
|
||||
this.$emit('emitFun', val)
|
||||
},
|
||||
setRowStyle(v) {
|
||||
if (v.rowIndex % 2 === 0) {
|
||||
return {
|
||||
background: '#F9FCFF',
|
||||
color: 'rgba(87, 87, 87, 1)',
|
||||
height: 35 + 'px',
|
||||
lineHeight: 26 + 'px',
|
||||
padding: 0,
|
||||
fontSize: 12 + 'px'
|
||||
}
|
||||
} else {
|
||||
return {
|
||||
background: 'rgba(239, 243, 248, 1)',
|
||||
color: 'rgba(87, 87, 87, 1)',
|
||||
height: 35 + 'px',
|
||||
lineHeight: 26 + 'px',
|
||||
padding: 0,
|
||||
fontSize: 12 + 'px'
|
||||
}
|
||||
}
|
||||
},
|
||||
setCellStyle() {
|
||||
return {
|
||||
// lineHeight: 23 + 'px'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
// @import "./styles/index.scss";
|
||||
.visual-base-table-container {
|
||||
.el-table {
|
||||
border: 0;
|
||||
// .el-table__body-wrapper::-webkit-scrollbar-thumb {
|
||||
// background-color: blue;
|
||||
// border-radius: 3px;
|
||||
// }
|
||||
// 关键修改：隐藏滚动条但保留滚动功能
|
||||
&::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
background: transparent;
|
||||
}
|
||||
// 隐藏表头的gutter
|
||||
.el-table__header .el-table__cell.gutter {
|
||||
display: none !important;
|
||||
}
|
||||
// 表格主体内容区滚动条处理
|
||||
.el-table__body-wrapper {
|
||||
&::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
overflow-y: auto !important; // 确保垂直滚动可用
|
||||
overflow-x: auto !important; // 确保水平滚动可用
|
||||
}
|
||||
|
||||
// 固定列滚动条处理
|
||||
.el-table__fixed,
|
||||
.el-table__fixed-right {
|
||||
.el-table__fixed-body-wrapper {
|
||||
&::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
overflow-y: auto !important;
|
||||
overflow-x: auto !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-table::before,.el-table--border::after {
|
||||
background-color: transparent;
|
||||
}
|
||||
.el-table th,td{
|
||||
border-color: rgba(221, 221, 221, 1) !important;
|
||||
padding: 0;
|
||||
}
|
||||
.el-table tr {
|
||||
background: transparent;
|
||||
}
|
||||
.el-table__row:hover > td {
|
||||
background-color: rgba(79,114,136,0.29) !important;
|
||||
}
|
||||
|
||||
.el-table__row--striped:hover > td {
|
||||
background-color: rgba(79,114,136,0.29) !important;
|
||||
}
|
||||
}
|
||||
// .setting {
|
||||
// text-align: right;
|
||||
// padding: 15px;
|
||||
// .setting-box {
|
||||
// width: 100px;
|
||||
// }
|
||||
// i {
|
||||
// color: #aaa;
|
||||
// @extend .pointer;
|
||||
// }
|
||||
// }
|
||||
|
||||
</style>
|
||||
287
src/views/home/components/bottomLeftContainer.vue
Normal file
287
src/views/home/components/bottomLeftContainer.vue
Normal file
@@ -0,0 +1,287 @@
|
||||
<template>
|
||||
<div class="cockpitContainer" :class="['cockpitContainer__' + size]">
|
||||
<div class="container-top" style="display: flex;gap: 9px;">
|
||||
<div class="title-wrapper content-top-left">
|
||||
<svg-icon class="title-icon" :icon-class="icon" />
|
||||
<span class="title-text">
|
||||
{{ name }}
|
||||
</span>
|
||||
</div>
|
||||
<!-- <div class="content-top-left">
|
||||
<svg-icon style="font-size: 32px; margin-left: 16px" :icon-class="icon" />
|
||||
<span style="
|
||||
width: 412px;
|
||||
height: 32px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
color: #000000;
|
||||
line-height: 60px;
|
||||
letter-spacing: 3px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
">
|
||||
{{ name }}
|
||||
</span>
|
||||
</div> -->
|
||||
<div class="title-wrapper content-top-right">
|
||||
<svg-icon class="title-icon" :icon-class="icon" />
|
||||
<span class="title-text">
|
||||
{{ nameTwo }}
|
||||
</span>
|
||||
</div>
|
||||
<!-- <div class="content-top-right">
|
||||
<svg-icon style="font-size: 32px; margin-left: 16px" :icon-class="icon" />
|
||||
<span style="
|
||||
width: 412px;
|
||||
height: 32px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
color: #000000;
|
||||
line-height: 60px;
|
||||
letter-spacing: 3px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
">
|
||||
{{ nameTwo }}
|
||||
</span>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="container-body">
|
||||
<slot>
|
||||
<div class="test-body">something test....</div>
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Container',
|
||||
components: {},
|
||||
// eslint-disable-next-line vue/require-prop-types
|
||||
props: ['name', 'size', 'icon','nameTwo'],
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.cockpitContainer {
|
||||
display: inline-block;
|
||||
// width: 100%;
|
||||
// height: 00px;
|
||||
padding: 6px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
.title-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// margin-left: 10px;
|
||||
/* 垂直居中关键属性 */
|
||||
height: 100%;
|
||||
/* 继承父容器高度，确保垂直居中范围 */
|
||||
}
|
||||
|
||||
.title-icon {
|
||||
font-size: 30px;
|
||||
margin-right: 12px;
|
||||
margin-top: 4px;
|
||||
margin-left: 10px;
|
||||
/* 图标和文字之间的间距 */
|
||||
flex-shrink: 0;
|
||||
/* 防止图标被压缩 */
|
||||
}
|
||||
|
||||
.title-text {
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
color: #000000;
|
||||
letter-spacing: 3px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
// 移除固定行高，避免影响垂直对齐
|
||||
// line-height: 60px;
|
||||
}
|
||||
.content-top-left {
|
||||
width: 270px;
|
||||
height: 60px;
|
||||
background: linear-gradient(90deg, #FFFFFF 0%, rgba(253, 255, 255, 0) 100%);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 左上角折现边框（主边框） */
|
||||
.content-top-left::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid;
|
||||
border-image: linear-gradient(277deg, rgba(255, 255, 255, 0), rgba(92, 140, 255, 1)) 1 1;
|
||||
clip-path: polygon(20px 0, 100% 0, 100% 100%, 0 100%, 0 20px);
|
||||
/* 切割左上角形成折现 */
|
||||
}
|
||||
|
||||
/* 左上角折现细节（仅保留边框线条，去掉蓝色填充） */
|
||||
.content-top-left::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
/* 调整为纯边框线条，去掉背景填充 */
|
||||
background: #EFF3F8;
|
||||
border-top: 1px solid rgba(92, 140, 255, 1);
|
||||
border-left: 1px solid rgba(92, 140, 255, 1);
|
||||
transform: rotate(135deg) translate(-50%, -50%);
|
||||
transform-origin: top left;
|
||||
}
|
||||
|
||||
.content-top-right {
|
||||
width: 270px;
|
||||
height: 60px;
|
||||
background: linear-gradient(90deg, #FFFFFF 0%, rgba(253, 255, 255, 0) 100%);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 左上角折现边框（主边框） */
|
||||
.content-top-right::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid;
|
||||
border-image: linear-gradient(277deg, rgba(255, 255, 255, 0), rgba(92, 140, 255, 1)) 1 1;
|
||||
clip-path: polygon(20px 0, 100% 0, 100% 100%, 0 100%, 0 20px);
|
||||
/* 切割左上角形成折现 */
|
||||
}
|
||||
|
||||
/* 左上角折现细节（仅保留边框线条，去掉蓝色填充） */
|
||||
.content-top-right::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
/* 调整为纯边框线条，去掉背景填充 */
|
||||
background: #EFF3F8;
|
||||
border-top: 1px solid rgba(92, 140, 255, 1);
|
||||
border-left: 1px solid rgba(92, 140, 255, 1);
|
||||
transform: rotate(135deg) translate(-50%, -50%);
|
||||
transform-origin: top left;
|
||||
}
|
||||
&__topBasic {
|
||||
background: url(../../../assets/img/top-basic.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
}
|
||||
&__bottomBasic {
|
||||
background: url(../../../assets/img/bottom-basic.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
}
|
||||
// &__left {
|
||||
// background: url(../../../../../../../assets/img/left.png) no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
// background-position: 0 0;
|
||||
// }
|
||||
|
||||
// &__energyConsumption {
|
||||
// background: url(../../../../../../../assets/img/energyConsumption.png) no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
// background-position: 0 0;
|
||||
// }
|
||||
|
||||
// &__left2 {
|
||||
// background: url(../../assets/left_2.png) no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
// background-position: 0 0;
|
||||
// }
|
||||
|
||||
// &__left3 {
|
||||
// background: url(../../assets/left_3.png) no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
// background-position: 0 0;
|
||||
// }
|
||||
|
||||
// &__mid2 {
|
||||
// background: url(../../assets/mid_2.png) no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
// background-position: 0 0;
|
||||
// }
|
||||
|
||||
// &__mid3 {
|
||||
// background: url(../../assets/mid_3.png) no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
// background-position: 0 0;
|
||||
// }
|
||||
|
||||
// &__right1 {
|
||||
// background: url(../../assets/right_1.png) no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
// background-position: 0 0;
|
||||
// }
|
||||
|
||||
// &__right2 {
|
||||
// background: url(../../assets/right_2.png) no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
// background-position: 0 0;
|
||||
// }
|
||||
|
||||
// &__right3 {
|
||||
// background: url(../../assets/right_3.png) no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
// background-position: 0 0;
|
||||
// }
|
||||
|
||||
// &__weekRight2 {
|
||||
// background: url(../../assets/week_right_2.png) no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
// background-position: 0 0;
|
||||
// }
|
||||
|
||||
// &__weekMidTop {
|
||||
// background: url(../../assets/week-mid-top.png) no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
// background-position: 0 0;
|
||||
// }
|
||||
|
||||
// &__weekMidMid {
|
||||
// background: url(../../assets/week-mid-mid.png) no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
// background-position: 0 0;
|
||||
// }
|
||||
|
||||
// &::after {
|
||||
// content: ' ';
|
||||
// display: block;
|
||||
// position: absolute;
|
||||
// left: 0;
|
||||
// top: 0;
|
||||
// right: 0;
|
||||
// bottom: 0;
|
||||
// // background: inherit;
|
||||
// /* 设置模糊，不用 filter */
|
||||
// backdrop-filter: blur(5px);
|
||||
// z-index: -1;
|
||||
// }
|
||||
}
|
||||
|
||||
.container-body {
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
212
src/views/home/components/bottomMiddleContainer.vue
Normal file
212
src/views/home/components/bottomMiddleContainer.vue
Normal file
@@ -0,0 +1,212 @@
|
||||
<template>
|
||||
<div class="cockpitContainer" :class="['cockpitContainer__' + size]">
|
||||
<div class="container-top">
|
||||
<div class="title-wrapper">
|
||||
<svg-icon class="title-icon" :icon-class="icon" />
|
||||
<span class="title-text">
|
||||
{{ name }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container-body">
|
||||
<slot>
|
||||
<div class="test-body">something test....</div>
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Container',
|
||||
components: {},
|
||||
// eslint-disable-next-line vue/require-prop-types
|
||||
props: ['name', 'size', 'icon', 'nameTwo'],
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.cockpitContainer {
|
||||
display: inline-block;
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
padding: 6px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
|
||||
.container-top {
|
||||
width: 746px;
|
||||
height: 60px;
|
||||
background: linear-gradient(90deg, #FFFFFF 50%, rgba(253, 255, 255, 0) 100%);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
.title-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 10px;
|
||||
/* 垂直居中关键属性 */
|
||||
height: 100%;
|
||||
/* 继承父容器高度，确保垂直居中范围 */
|
||||
}
|
||||
|
||||
.title-icon {
|
||||
font-size: 30px;
|
||||
margin-right: 12px;
|
||||
margin-top: 4px;
|
||||
/* 图标和文字之间的间距 */
|
||||
flex-shrink: 0;
|
||||
/* 防止图标被压缩 */
|
||||
}
|
||||
|
||||
.title-text {
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
color: #000000;
|
||||
letter-spacing: 3px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
// 移除固定行高，避免影响垂直对齐
|
||||
// line-height: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 左上角折现边框（主边框） */
|
||||
.container-top::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid;
|
||||
border-image: linear-gradient(277deg, rgba(255, 255, 255, 0), rgba(92, 140, 255, 1)) 1 1;
|
||||
clip-path: polygon(20px 0, 100% 0, 100% 100%, 0 100%, 0 20px);
|
||||
/* 切割左上角形成折现 */
|
||||
}
|
||||
|
||||
/* 左上角折现细节（仅保留边框线条，去掉蓝色填充） */
|
||||
.container-top::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
/* 调整为纯边框线条，去掉背景填充 */
|
||||
background: #EFF3F8;
|
||||
border-top: 1px solid rgba(92, 140, 255, 1);
|
||||
border-left: 1px solid rgba(92, 140, 255, 1);
|
||||
transform: rotate(135deg) translate(-50%, -50%);
|
||||
transform-origin: top left;
|
||||
}
|
||||
|
||||
&__topBasic {
|
||||
background: url(../../../assets/img/top-basic.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
&__bottomBasic {
|
||||
background: url(../../../assets/img/bottom-basic.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
// &__left {
|
||||
// background: url(../../../../../../../assets/img/left.png) no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
// background-position: 0 0;
|
||||
// }
|
||||
|
||||
// &__energyConsumption {
|
||||
// background: url(../../../../../../../assets/img/energyConsumption.png) no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
// background-position: 0 0;
|
||||
// }
|
||||
|
||||
// &__left2 {
|
||||
// background: url(../../assets/left_2.png) no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
// background-position: 0 0;
|
||||
// }
|
||||
|
||||
// &__left3 {
|
||||
// background: url(../../assets/left_3.png) no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
// background-position: 0 0;
|
||||
// }
|
||||
|
||||
// &__mid2 {
|
||||
// background: url(../../assets/mid_2.png) no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
// background-position: 0 0;
|
||||
// }
|
||||
|
||||
// &__mid3 {
|
||||
// background: url(../../assets/mid_3.png) no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
// background-position: 0 0;
|
||||
// }
|
||||
|
||||
// &__right1 {
|
||||
// background: url(../../assets/right_1.png) no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
// background-position: 0 0;
|
||||
// }
|
||||
|
||||
// &__right2 {
|
||||
// background: url(../../assets/right_2.png) no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
// background-position: 0 0;
|
||||
// }
|
||||
|
||||
// &__right3 {
|
||||
// background: url(../../assets/right_3.png) no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
// background-position: 0 0;
|
||||
// }
|
||||
|
||||
// &__weekRight2 {
|
||||
// background: url(../../assets/week_right_2.png) no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
// background-position: 0 0;
|
||||
// }
|
||||
|
||||
// &__weekMidTop {
|
||||
// background: url(../../assets/week-mid-top.png) no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
// background-position: 0 0;
|
||||
// }
|
||||
|
||||
// &__weekMidMid {
|
||||
// background: url(../../assets/week-mid-mid.png) no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
// background-position: 0 0;
|
||||
// }
|
||||
|
||||
&::after {
|
||||
content: ' ';
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
// background: inherit;
|
||||
/* 设置模糊，不用 filter */
|
||||
backdrop-filter: blur(5px);
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
.container-body {
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
265
src/views/home/components/container.vue
Normal file
265
src/views/home/components/container.vue
Normal file
@@ -0,0 +1,265 @@
|
||||
<template>
|
||||
<div class="cockpitContainer" :class="['cockpitContainer__' + size]">
|
||||
<div class="content-top" :class="['content-top__' + topSize]">
|
||||
<!-- 使用 flex 容器包裹图标和文字，实现垂直居中 -->
|
||||
<div class="title-wrapper">
|
||||
<svg-icon class="title-icon" :icon-class="icon" />
|
||||
<span class="title-text">
|
||||
{{ name }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cockpitContainer-body">
|
||||
<slot>
|
||||
<div class="test-body">something test....</div>
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Container',
|
||||
components: {},
|
||||
// eslint-disable-next-line vue/require-prop-types
|
||||
props: ['name', 'size', 'icon', 'topSize'],
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.cockpitContainer {
|
||||
display: inline-block;
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
padding: 6px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
|
||||
.content-top {
|
||||
height: 60px;
|
||||
.title-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 10px;
|
||||
/* 垂直居中关键属性 */
|
||||
height: 100%;
|
||||
/* 继承父容器高度，确保垂直居中范围 */
|
||||
}
|
||||
|
||||
.title-icon {
|
||||
font-size: 30px;
|
||||
margin-right: 12px;
|
||||
margin-top: 4px;
|
||||
/* 图标和文字之间的间距 */
|
||||
flex-shrink: 0;
|
||||
/* 防止图标被压缩 */
|
||||
}
|
||||
|
||||
.title-text {
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
color: #000000;
|
||||
letter-spacing: 3px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
// 移除固定行高，避免影响垂直对齐
|
||||
// line-height: 60px;
|
||||
}
|
||||
// width: 547px;
|
||||
// background: url(../../../assets/img/contentTopBasic.png) no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
// background-position: 0 0;
|
||||
&__basic {
|
||||
// width: 547px;
|
||||
background: url(../../../assets/img/contentTopBasic.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
&__middle {
|
||||
background: url(../../../assets/img/topTileMiddle.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
&__large {
|
||||
background: url(../../../assets/img/topTitleLargeBg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
&__KFAPTopTitle {
|
||||
background: url(../../../assets/img/KFAPTopTitle.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
&__psiTopTitleBasic {
|
||||
background: url(../../../assets/img/psiTopTitleBasic.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
}
|
||||
&__rawTopTitleLarge {
|
||||
background: url(../../../assets/img/rawTopTitleLarge.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&__topBasic {
|
||||
background: url(../../../assets/img/top-basic.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
&__bottomBasic {
|
||||
background: url(../../../assets/img/bottom-basic.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
&__operatingBasic {
|
||||
background: url(../../../assets/img/operating-basic.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
&__operatingLarge {
|
||||
background: url(../../../assets/img/operating-large.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
&__profitTopBasic {
|
||||
background: url(../../../assets/img/profitTopBasic.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
&__profitMiddleBasic {
|
||||
background: url(../../../assets/img/profitMiddleBasic.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
&__psiBasicBg {
|
||||
background: url(../../../assets/img/psiBasicBg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
&__psiMiddleBg {
|
||||
background: url(../../../assets/img/psiMiddleBg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
&__costBasicBg {
|
||||
background: url(../../../assets/img/costBasicBg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
}
|
||||
&__rawTopBg {
|
||||
background: url(../../../assets/img/rawTopBg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
}
|
||||
// &__left {
|
||||
// background: url(../../../../../../../assets/img/left.png) no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
// background-position: 0 0;
|
||||
// }
|
||||
|
||||
// &__energyConsumption {
|
||||
// background: url(../../../../../../../assets/img/energyConsumption.png) no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
// background-position: 0 0;
|
||||
// }
|
||||
|
||||
// &__left2 {
|
||||
// background: url(../../assets/left_2.png) no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
// background-position: 0 0;
|
||||
// }
|
||||
|
||||
// &__left3 {
|
||||
// background: url(../../assets/left_3.png) no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
// background-position: 0 0;
|
||||
// }
|
||||
|
||||
// &__mid2 {
|
||||
// background: url(../../assets/mid_2.png) no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
// background-position: 0 0;
|
||||
// }
|
||||
|
||||
// &__mid3 {
|
||||
// background: url(../../assets/mid_3.png) no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
// background-position: 0 0;
|
||||
// }
|
||||
|
||||
// &__right1 {
|
||||
// background: url(../../assets/right_1.png) no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
// background-position: 0 0;
|
||||
// }
|
||||
|
||||
// &__right2 {
|
||||
// background: url(../../assets/right_2.png) no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
// background-position: 0 0;
|
||||
// }
|
||||
|
||||
// &__right3 {
|
||||
// background: url(../../assets/right_3.png) no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
// background-position: 0 0;
|
||||
// }
|
||||
|
||||
// &__weekRight2 {
|
||||
// background: url(../../assets/week_right_2.png) no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
// background-position: 0 0;
|
||||
// }
|
||||
|
||||
// &__weekMidTop {
|
||||
// background: url(../../assets/week-mid-top.png) no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
// background-position: 0 0;
|
||||
// }
|
||||
|
||||
// &__weekMidMid {
|
||||
// background: url(../../assets/week-mid-mid.png) no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
// background-position: 0 0;
|
||||
// }
|
||||
|
||||
&::after {
|
||||
content: ' ';
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
// background: inherit;
|
||||
/* 设置模糊，不用 filter */
|
||||
backdrop-filter: blur(5px);
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
.container-body {
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
199
src/views/home/components/core-bottom-leftItem.vue
Normal file
199
src/views/home/components/core-bottom-leftItem.vue
Normal file
@@ -0,0 +1,199 @@
|
||||
<template>
|
||||
<div class="coreItem">
|
||||
<div class="item" v-for="(item, index) in itemList" :key="index">
|
||||
<div class="unit">{{ item.unit }}</div>
|
||||
<div class="item-content">
|
||||
<div class="content-wrapper">
|
||||
<div class="left">
|
||||
<div class="number">{{ item.targetValue }}</div>
|
||||
<div class="title">目标值</div>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div class="right">
|
||||
<div class="number" :style="{ color: getTargetColor(item.currentValue, item.targetValue) }">
|
||||
{{ item.currentValue }}
|
||||
</div>
|
||||
<div class="title">实际值</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="progress-group">
|
||||
<div class="progress-container">
|
||||
<div class="progress-bar" :style="{
|
||||
width: item.progress + '%',
|
||||
background: getTargetColor(item.currentValue, item.targetValue)
|
||||
}"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="yield" style="display: flex;justify-content: space-between;">
|
||||
<div class="progress-percent" :style="{ color: getTargetColor(item.currentValue, item.targetValue) }">完成率
|
||||
</div>
|
||||
<div class="progress-percent" :style="{ color: getTargetColor(item.currentValue, item.targetValue) }">
|
||||
{{ item.progress }}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Container",
|
||||
components: {},
|
||||
props: ["name", "size", "icon"],
|
||||
data() {
|
||||
return {
|
||||
progress: 90,
|
||||
itemList: [
|
||||
{
|
||||
unit: "本月增效额·万元",
|
||||
targetValue: 16,
|
||||
currentValue: 14.5,
|
||||
progress: 90
|
||||
},
|
||||
{
|
||||
unit: "累计增效额·万元",
|
||||
targetValue: 16,
|
||||
currentValue: 15.2,
|
||||
progress: 85
|
||||
},
|
||||
// {
|
||||
// unit: "销量·万㎡",
|
||||
// targetValue: 20,
|
||||
// currentValue: 16,
|
||||
// progress: 80
|
||||
// },
|
||||
// {
|
||||
// unit: "双镀面板·万㎡",
|
||||
// targetValue: 15,
|
||||
// currentValue: 13.8,
|
||||
// progress: 92
|
||||
// }
|
||||
]
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
getTargetColor(currentValue, targetValue) {
|
||||
return currentValue >= targetValue
|
||||
? "rgba(98, 213, 180, 1)"
|
||||
: "rgba(249, 164, 74, 1)";
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.coreItem {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 252px;
|
||||
height: 122px;
|
||||
background: #f9fcff;
|
||||
padding: 12px 12px 0 12px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.unit {
|
||||
height: 18px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
color: #000000;
|
||||
line-height: 18px;
|
||||
letter-spacing: 1px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.item-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
height: calc(100% - 26px);
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.line {
|
||||
width: 1px;
|
||||
height: 46px;
|
||||
background: linear-gradient(to bottom,
|
||||
rgba(255, 0, 0, 0),
|
||||
rgba(40, 203, 151, 1));
|
||||
}
|
||||
|
||||
.left,
|
||||
.right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.number {
|
||||
height: 22px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: 24px;
|
||||
color: rgba(103, 103, 103, 0.79);
|
||||
line-height: 22px;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.title {
|
||||
height: 14px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #868687;
|
||||
line-height: 14px;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.progress-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.progress-container {
|
||||
width: 230px;
|
||||
height: 10px;
|
||||
background: #ECEFF7;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 100%;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.progress-percent {
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #868687;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.yield {
|
||||
margin-top: 3px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
370
src/views/home/components/coreBottomBar.vue
Normal file
370
src/views/home/components/coreBottomBar.vue
Normal file
@@ -0,0 +1,370 @@
|
||||
<template>
|
||||
<div class="coreBar">
|
||||
<div class="barTop">
|
||||
<div class="title">销售指标趋势</div>
|
||||
<div class="legend">
|
||||
<span class="legend-item target">目标</span>
|
||||
<span class="legend-item real">实际</span>
|
||||
</div>
|
||||
<div class="button-group">
|
||||
<div style="letter-spacing: 4px" class="item-button" :class="{ active: activeButton === 0 }"
|
||||
@click="activeButton = 0">
|
||||
单价
|
||||
</div>
|
||||
<div class="button-line lineOne" v-if="activeButton !== 0 && activeButton !== 1"></div>
|
||||
<div style="letter-spacing: 4px" class="item-button" :class="{ active: activeButton === 1 }"
|
||||
@click="activeButton = 1">
|
||||
净价
|
||||
</div>
|
||||
<div class="button-line lineTwo" v-if="activeButton !== 1 && activeButton !== 2"></div>
|
||||
<div style="letter-spacing: 4px" class="item-button" :class="{ active: activeButton === 2 }"
|
||||
@click="activeButton = 2">
|
||||
销量
|
||||
</div>
|
||||
<div class="button-line lineThree" v-if="activeButton !== 2 && activeButton !== 3"></div>
|
||||
<div class="item-button" :class="{ active: activeButton === 3 }" @click="activeButton = 3">
|
||||
双镀产品
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lineBottom" style="height: 219px; width: 100%">
|
||||
<!-- 传递当前选中的 series 数据给子组件，key 确保数据更新时重新渲染 -->
|
||||
<coreLineChart style="height: 219px; width: 500px" :chart-series="currentSeries"
|
||||
:key="activeButton + JSON.stringify(currentSeries)" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import coreLineChart from './coresBar.vue';
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
export default {
|
||||
name: "Container",
|
||||
components: { coreLineChart },
|
||||
props: ["name", "size", "icon"],
|
||||
data() {
|
||||
return {
|
||||
activeButton: 0,
|
||||
itemList: [
|
||||
{ unit: "单价·元/m²", targetValue: 16, currentValue: 14.5, progress: 90 },
|
||||
{ unit: "净价·元/m²", targetValue: 16, currentValue: 15.2, progress: 85 },
|
||||
{ unit: "销量·万m²", targetValue: 20, currentValue: 16, progress: 80 },
|
||||
{ unit: "双镀面板·万m²", targetValue: 15, currentValue: 13.8, progress: 92 },
|
||||
],
|
||||
// 4个按钮对应的 series 数据（目标+实际两条线）
|
||||
seriesMap: [
|
||||
// 0: 单价（元/m²）
|
||||
[
|
||||
{
|
||||
name: '目标',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
symbol: 'circle',
|
||||
symbolSize: 6,
|
||||
lineStyle: { color: 'rgba(91, 230, 190, 1)', width: 2 },
|
||||
itemStyle: {
|
||||
color: 'rgba(91, 230, 190, 1)',
|
||||
borderColor: '#fff',
|
||||
borderWidth: 1
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.3,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(91, 230, 190, 0.4)' },
|
||||
{ offset: 1, color: 'rgba(91, 230, 190, 0)' },
|
||||
]),
|
||||
},
|
||||
data: [16, 16.2, 15.8, 16.1, 15.9, 16] // 6-11月目标数据
|
||||
},
|
||||
{
|
||||
name: '实际',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
symbol: 'circle',
|
||||
symbolSize: 6,
|
||||
lineStyle: { color: 'rgba(255, 132, 0, 1)', width: 2 },
|
||||
itemStyle: {
|
||||
color: 'rgba(255, 132, 0, 1)',
|
||||
borderColor: '#fff',
|
||||
borderWidth: 1
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.3,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(255, 132, 0, 0.4)' },
|
||||
{ offset: 1, color: 'rgba(255, 132, 0, 0)' },
|
||||
]),
|
||||
},
|
||||
data: [14.5, 14.8, 15.2, 14.6, 15, 14.7] // 6-11月实际数据
|
||||
}
|
||||
],
|
||||
// 1: 净价（元/m²）
|
||||
[
|
||||
{
|
||||
name: '目标',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
symbol: 'circle',
|
||||
symbolSize: 6,
|
||||
lineStyle: { color: 'rgba(91, 230, 190, 1)', width: 2 },
|
||||
itemStyle: {
|
||||
color: 'rgba(91, 230, 190, 1)',
|
||||
borderColor: '#fff',
|
||||
borderWidth: 1
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.3,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(91, 230, 190, 0.4)' },
|
||||
{ offset: 1, color: 'rgba(91, 230, 190, 0)' },
|
||||
]),
|
||||
},
|
||||
data: [16, 16.1, 15.9, 16.2, 16, 16.1]
|
||||
},
|
||||
{
|
||||
name: '实际',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
symbol: 'circle',
|
||||
symbolSize: 6,
|
||||
lineStyle: { color: 'rgba(255, 132, 0, 1)', width: 2 },
|
||||
itemStyle: {
|
||||
color: 'rgba(255, 132, 0, 1)',
|
||||
borderColor: '#fff',
|
||||
borderWidth: 1
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.3,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(255, 132, 0, 0.4)' },
|
||||
{ offset: 1, color: 'rgba(255, 132, 0, 0)' },
|
||||
]),
|
||||
},
|
||||
data: [15.2, 15.5, 15.3, 15.6, 15.4, 15.5]
|
||||
}
|
||||
],
|
||||
// 2: 销量（万m²）
|
||||
[
|
||||
{
|
||||
name: '目标',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
symbol: 'circle',
|
||||
symbolSize: 6,
|
||||
lineStyle: { color: 'rgba(91, 230, 190, 1)', width: 2 },
|
||||
itemStyle: {
|
||||
color: 'rgba(91, 230, 190, 1)',
|
||||
borderColor: '#fff',
|
||||
borderWidth: 1
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.3,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(91, 230, 190, 0.4)' },
|
||||
{ offset: 1, color: 'rgba(91, 230, 190, 0)' },
|
||||
]),
|
||||
},
|
||||
data: [20, 20.5, 19.8, 21, 20.2, 20.8]
|
||||
},
|
||||
{
|
||||
name: '实际',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
symbol: 'circle',
|
||||
symbolSize: 6,
|
||||
lineStyle: { color: 'rgba(255, 132, 0, 1)', width: 2 },
|
||||
itemStyle: {
|
||||
color: 'rgba(255, 132, 0, 1)',
|
||||
borderColor: '#fff',
|
||||
borderWidth: 1
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.3,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(255, 132, 0, 0.4)' },
|
||||
{ offset: 1, color: 'rgba(255, 132, 0, 0)' },
|
||||
]),
|
||||
},
|
||||
data: [16, 16.8, 17.2, 16.5, 17, 17.5]
|
||||
}
|
||||
],
|
||||
// 3: 双镀产品（万m²）
|
||||
[
|
||||
{
|
||||
name: '目标',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
symbol: 'circle',
|
||||
symbolSize: 6,
|
||||
lineStyle: { color: 'rgba(91, 230, 190, 1)', width: 2 },
|
||||
itemStyle: {
|
||||
color: 'rgba(91, 230, 190, 1)',
|
||||
borderColor: '#fff',
|
||||
borderWidth: 1
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.3,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(91, 230, 190, 0.4)' },
|
||||
{ offset: 1, color: 'rgba(91, 230, 190, 0)' },
|
||||
]),
|
||||
},
|
||||
data: [15, 15.2, 14.8, 15.5, 15.1, 15.3]
|
||||
},
|
||||
{
|
||||
name: '实际',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
symbol: 'circle',
|
||||
symbolSize: 6,
|
||||
lineStyle: { color: 'rgba(255, 132, 0, 1)', width: 2 },
|
||||
itemStyle: {
|
||||
color: 'rgba(255, 132, 0, 1)',
|
||||
borderColor: '#fff',
|
||||
borderWidth: 1
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.3,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(255, 132, 0, 0.4)' },
|
||||
{ offset: 1, color: 'rgba(255, 132, 0, 0)' },
|
||||
]),
|
||||
},
|
||||
data: [13.8, 14.2, 14, 14.5, 14.3, 14.6]
|
||||
}
|
||||
]
|
||||
]
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 根据激活按钮动态返回对应 series 数据
|
||||
currentSeries() {
|
||||
return this.seriesMap[this.activeButton] || [];
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
/* 原有样式保持不变 */
|
||||
.coreBar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 12px;
|
||||
|
||||
.barTop {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
align-items: center;
|
||||
|
||||
.title {
|
||||
height: 18px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
color: #000000;
|
||||
line-height: 18px;
|
||||
letter-spacing: 1px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.legend {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
margin-left: 10px;
|
||||
|
||||
.legend-item {
|
||||
position: relative;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -13px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -18px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 16px;
|
||||
height: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.target::before,
|
||||
.target::after {
|
||||
background-color: rgba(91, 230, 190, 1);
|
||||
}
|
||||
|
||||
.real::before,
|
||||
.real::after {
|
||||
background-color: rgba(255, 132, 0, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.button-group {
|
||||
display: flex;
|
||||
position: relative;
|
||||
gap: 2px;
|
||||
margin-left: 30px;
|
||||
width: 230px;
|
||||
align-items: center;
|
||||
height: 24px;
|
||||
background: #ecf4fe;
|
||||
border-radius: 12px;
|
||||
|
||||
.button-line {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 14px;
|
||||
border: 1px solid rgba(11, 88, 255, 0.25);
|
||||
}
|
||||
|
||||
.lineOne {
|
||||
top: 5px;
|
||||
left: 54px;
|
||||
}
|
||||
|
||||
.lineTwo {
|
||||
top: 5px;
|
||||
left: 108px;
|
||||
}
|
||||
|
||||
.lineThree {
|
||||
top: 5px;
|
||||
left: 162px;
|
||||
}
|
||||
|
||||
.item-button {
|
||||
cursor: pointer;
|
||||
width: 54px;
|
||||
height: 24px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #0b58ff;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.item-button.active {
|
||||
background: #3071ff;
|
||||
border-radius: 12px;
|
||||
color: #ffffff;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
363
src/views/home/components/coreBottomLeft.vue
Normal file
363
src/views/home/components/coreBottomLeft.vue
Normal file
@@ -0,0 +1,363 @@
|
||||
<template>
|
||||
<div style="flex: 1">
|
||||
<Container name="采购重点指标" nameTwo="存货重点指标" icon="cockpitItemIcon" size="bottomBasic">
|
||||
<!-- 1. 移除 .kpi-content 的固定高度，改为自适应 -->
|
||||
<div class="bottom-left-content" style="display: flex;gap: 9px;padding: 14px 16px;">
|
||||
<coreBottomLeftItem>
|
||||
</coreBottomLeftItem>
|
||||
<div class="content-right" style="background: #F9FCFF;padding: 15px 12px;">
|
||||
<base-table style="height: 180px;width: 260px;" :page="1" :limit="10" :show-index="true" :beilv="1"
|
||||
:tableConfig="tableProps" :table-data="maintenanceTasks" />
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Container from './bottomLeftContainer.vue'
|
||||
// import * as echarts from 'echarts'
|
||||
import coreBottomLeftItem from './core-bottom-leftItem.vue'
|
||||
import baseTable from './baseTable.vue'
|
||||
|
||||
|
||||
export default {
|
||||
name: 'ProductionStatus',
|
||||
components: { Container, coreBottomLeftItem, baseTable },
|
||||
// mixins: [resize],
|
||||
props: {
|
||||
leftEqInfoData: { // 接收父组件传递的设备数据数组
|
||||
type: Array,
|
||||
default: () => [] // 默认空数组，避免报错
|
||||
},
|
||||
productionOverviewVo: { // 恢复生产概览数据（原代码注释了，需根据实际需求保留）
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
maintenanceTasks: [
|
||||
{ id: 1, eqName: '纯碱', taskName: '1313,252', },
|
||||
{ id: 2, eqName: '硅砂', taskName: '14,252', },
|
||||
{ id: 2, eqName: '白云石', taskName: '23,252', },
|
||||
{ id: 2, eqName: '石灰石', taskName: '34,421', },
|
||||
{ id: 2, eqName: '氧化铝', taskName: '1,251.34', },
|
||||
{ id: 2, eqName: '氢氧化铝', taskName: '14,252', },
|
||||
|
||||
// { id: 2, eqName: '螺杆挤出', taskName: '例行维护', },
|
||||
// { id: 2, eqName: '螺杆挤出', taskName: '例行维护', },
|
||||
// { id: 2, eqName: '螺杆挤出', taskName: '例行维护', },
|
||||
// { id: 2, eqName: '螺杆挤出', taskName: '例行维护', },
|
||||
// { id: 2, eqName: '螺杆挤出', taskName: '例行维护', },
|
||||
|
||||
],
|
||||
tableProps: [
|
||||
// { prop: 'id', label: '序号', width: 50, align: 'center' },
|
||||
{ prop: 'eqName', label: '物料', align: 'left' },
|
||||
{ prop: 'taskName', label: '库存/吨', align: 'left' },
|
||||
]
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
productionOverviewVo: {
|
||||
handler(newValue, oldValue) {
|
||||
this.updateChart()
|
||||
},
|
||||
deep: true // 若对象内属性变化需触发，需加 deep: true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 初始化图表（若需展示图表，需在模板中添加对应 DOM）
|
||||
// this.$nextTick(() => this.updateChart())
|
||||
},
|
||||
beforeDestroy() {
|
||||
// 销毁图表，避免内存泄漏
|
||||
if (this.chart) {
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateChart() {
|
||||
// 注意：原代码中图表依赖 id 为 "productionStatusChart" 的 DOM，需在模板中补充，否则会报错
|
||||
// 示例：在 Container 内添加 <div id="productionStatusChart" style="height: 200px;"></div>
|
||||
if (!document.getElementById('productionStatusChart')) return
|
||||
|
||||
if (this.chart) this.chart.dispose()
|
||||
this.chart = echarts.init(document.getElementById('productionStatusChart'))
|
||||
|
||||
const data = [
|
||||
this.productionOverviewVo.input || 0,
|
||||
this.productionOverviewVo.output || 0,
|
||||
this.productionOverviewVo.ng || 0,
|
||||
this.productionOverviewVo.lowValue || 0,
|
||||
this.productionOverviewVo.scrap || 0,
|
||||
this.productionOverviewVo.inProcess || 0,
|
||||
this.productionOverviewVo.engineer || 0
|
||||
]
|
||||
|
||||
const option = {
|
||||
type: 'bar',
|
||||
grid: { left: 51, right: 40, top: 50, bottom: 45 },
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { type: 'shadow' },
|
||||
className: 'production-status-chart-tooltip'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
offset: 8,
|
||||
data: ['投入', '产出', '待判', '低价值', '报废', '在制', '实验片'],
|
||||
axisTick: { show: false },
|
||||
axisLine: { show: true, onZero: false, lineStyle: { color: '#00E8FF' } },
|
||||
axisLabel: {
|
||||
color: 'rgba(255,255,255,0.7)',
|
||||
fontSize: 12,
|
||||
interval: 0,
|
||||
width: 38,
|
||||
overflow: 'break'
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '单位/片',
|
||||
nameTextStyle: { color: 'rgba(255,255,255,0.7)', fontSize: 14, align: 'left' },
|
||||
min: () => 0,
|
||||
max: (value) => Math.ceil(value.max),
|
||||
scale: true,
|
||||
axisTick: { show: false },
|
||||
axisLabel: { color: 'rgba(255,255,255,0.7)', fontSize: 12 },
|
||||
splitLine: { lineStyle: { color: 'RGBA(24, 88, 100, 0.6)', type: 'dashed' } },
|
||||
axisLine: { show: true, lineStyle: { color: '#00E8FF' } }
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'pictorialBar',
|
||||
label: { show: true, position: 'top', distance: -3, color: '#89CDFF', fontSize: 11 },
|
||||
symbolSize: [20, 8],
|
||||
symbolOffset: [0, 5],
|
||||
z: 20,
|
||||
itemStyle: {
|
||||
borderColor: '#3588C7',
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'RGBA(22, 89, 98, 1)' },
|
||||
{ offset: 1, color: '#3588C7' }
|
||||
])
|
||||
},
|
||||
data: data
|
||||
},
|
||||
{
|
||||
type: 'bar',
|
||||
barWidth: 20,
|
||||
itemStyle: {
|
||||
borderWidth: 1,
|
||||
borderColor: '#3588C7',
|
||||
opacity: 0.8,
|
||||
color: {
|
||||
x: 0, y: 0, x2: 0, y2: 1,
|
||||
type: 'linear',
|
||||
global: false,
|
||||
colorStops: [
|
||||
{ offset: 0, color: 'rgba(73,178,255,0)' },
|
||||
{ offset: 0.5, color: 'rgba(0, 232, 255, .5)' },
|
||||
{ offset: 1, color: 'rgba(0, 232, 255, 1)' }
|
||||
]
|
||||
}
|
||||
},
|
||||
tooltip: { show: false },
|
||||
data: data
|
||||
},
|
||||
{
|
||||
type: 'pictorialBar',
|
||||
symbolSize: [20, 8],
|
||||
symbolOffset: [0, -4],
|
||||
z: 12,
|
||||
symbolPosition: 'end',
|
||||
itemStyle: {
|
||||
borderColor: 'rgba(0, 232, 255, 1)',
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'RGBA(22, 89, 98, 1)' },
|
||||
{ offset: 1, color: '#3588C7' }
|
||||
])
|
||||
},
|
||||
tooltip: { show: false },
|
||||
data: data
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
this.chart.setOption(option)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
/* 3. 核心：滚动容器样式（固定高度+溢出滚动+隐藏滚动条） */
|
||||
.scroll-container {
|
||||
/* 1. 固定容器高度：根据页面布局调整（示例300px，超出则滚动） */
|
||||
max-height: 210px;
|
||||
/* 2. 溢出滚动：内容超出高度时显示滚动功能 */
|
||||
overflow-y: auto;
|
||||
/* 3. 隐藏横向滚动条（防止设备名过长导致横向滚动） */
|
||||
overflow-x: hidden;
|
||||
/* 4. 内边距：与标题栏和容器边缘对齐 */
|
||||
padding: 10px 0;
|
||||
|
||||
/* 5. 隐藏滚动条（兼容主流浏览器） */
|
||||
/* Chrome/Safari */
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Firefox */
|
||||
scrollbar-width: none;
|
||||
/* IE/Edge */
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
/* 设备项样式优化：增加间距，避免拥挤 */
|
||||
.proBarInfo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 8px 27px;
|
||||
/* 调整内边距，优化排版 */
|
||||
margin-bottom: 10px;
|
||||
/* 设备项之间的垂直间距 */
|
||||
}
|
||||
|
||||
/* 原有样式保留，优化细节 */
|
||||
.proBarInfoEqInfo {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
/* 垂直居中，避免序号/文字错位 */
|
||||
}
|
||||
|
||||
.slot {
|
||||
width: 21px;
|
||||
height: 23px;
|
||||
background: rgba(0, 106, 205, 0.22);
|
||||
backdrop-filter: blur(1.5px);
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #68B5FF;
|
||||
line-height: 23px;
|
||||
/* 垂直居中文字 */
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.eq-name {
|
||||
margin-left: 8px;
|
||||
/* 增加与序号的间距 */
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
line-height: 18px;
|
||||
letter-spacing: 1px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.eqStatus {
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
line-height: 18px;
|
||||
text-align: right;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.splitLine {
|
||||
width: 1px;
|
||||
height: 14px;
|
||||
border: 1px solid #ADADAD;
|
||||
margin: 0 8px;
|
||||
/* 优化分割线间距 */
|
||||
}
|
||||
|
||||
.yield {
|
||||
height: 18px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #00FFFF;
|
||||
line-height: 18px;
|
||||
text-align: right;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.proBarInfoEqInfoLeft {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* 序号和设备名垂直居中 */
|
||||
}
|
||||
|
||||
.proBarInfoEqInfoRight {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* 状态/分割线/百分比垂直居中 */
|
||||
}
|
||||
|
||||
.proBarWrapper {
|
||||
position: relative;
|
||||
height: 10px;
|
||||
margin-top: 6px;
|
||||
/* 进度条与上方信息的间距 */
|
||||
border-radius: 5px;
|
||||
/* 进度条圆角，优化视觉 */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.proBarLine {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(65deg, rgba(82, 82, 82, 0) 0%, #ACACAC 100%);
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.proBarLineTop {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
background: linear-gradient(65deg, rgba(53, 223, 247, 0) 0%, rgba(54, 220, 246, 0.92) 92%, #36F6E5 100%, #37ACF5 100%);
|
||||
border-radius: 5px;
|
||||
transition: width 0.3s ease;
|
||||
/* 进度变化时添加过渡动画，更流畅 */
|
||||
}
|
||||
|
||||
/* 图表相关样式保留 */
|
||||
.chartImgBottom {
|
||||
position: absolute;
|
||||
bottom: 45px;
|
||||
left: 58px;
|
||||
}
|
||||
|
||||
.line {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: 57px;
|
||||
bottom: 42px;
|
||||
width: 1px;
|
||||
height: 20px;
|
||||
background-color: #00E8FF;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
/* 全局 tooltip 样式（不使用 scoped，确保生效） */
|
||||
.production-status-chart-tooltip {
|
||||
background: #0a2b4f77 !important;
|
||||
border: none !important;
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
.production-status-chart-tooltip * {
|
||||
color: #fff !important;
|
||||
}
|
||||
</style>
|
||||
347
src/views/home/components/coreSalesKPIs.vue
Normal file
347
src/views/home/components/coreSalesKPIs.vue
Normal file
@@ -0,0 +1,347 @@
|
||||
<template>
|
||||
<div style="flex: 1">
|
||||
<Container name="销售重点指标" icon="cockpitItemIcon" size="topBasic" topSize="basic">
|
||||
<!-- 1. 移除 .kpi-content 的固定高度，改为自适应 -->
|
||||
<div class="kpi-content" style="padding: 14px 16px; display: flex;flex-direction: column; width: 100%;">
|
||||
<!-- 2. .top 保持 flex，无需固定高度，自动跟随子元素拉伸 -->
|
||||
<div class="top" style="display: flex; width: 100%;">
|
||||
<top-item />
|
||||
</div>
|
||||
<div class="bottom"
|
||||
style="display: flex; width: 100%;margin-top: 8px;background-color: rgba(249, 252, 255, 1);">
|
||||
<!-- <top-item /> -->
|
||||
<coreBottomBar />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Container from './container.vue'
|
||||
// import * as echarts from 'echarts'
|
||||
import topItem from './top-item.vue'
|
||||
import coreBottomBar from './coreBottomBar.vue'
|
||||
|
||||
export default {
|
||||
name: 'ProductionStatus',
|
||||
components: { Container, topItem, coreBottomBar },
|
||||
// mixins: [resize],
|
||||
props: {
|
||||
leftEqInfoData: { // 接收父组件传递的设备数据数组
|
||||
type: Array,
|
||||
default: () => [] // 默认空数组，避免报错
|
||||
},
|
||||
productionOverviewVo: { // 恢复生产概览数据（原代码注释了，需根据实际需求保留）
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
productionOverviewVo: {
|
||||
handler(newValue, oldValue) {
|
||||
this.updateChart()
|
||||
},
|
||||
deep: true // 若对象内属性变化需触发，需加 deep: true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 初始化图表（若需展示图表，需在模板中添加对应 DOM）
|
||||
// this.$nextTick(() => this.updateChart())
|
||||
},
|
||||
beforeDestroy() {
|
||||
// 销毁图表，避免内存泄漏
|
||||
if (this.chart) {
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateChart() {
|
||||
// 注意：原代码中图表依赖 id 为 "productionStatusChart" 的 DOM，需在模板中补充，否则会报错
|
||||
// 示例：在 Container 内添加 <div id="productionStatusChart" style="height: 200px;"></div>
|
||||
if (!document.getElementById('productionStatusChart')) return
|
||||
|
||||
if (this.chart) this.chart.dispose()
|
||||
this.chart = echarts.init(document.getElementById('productionStatusChart'))
|
||||
|
||||
const data = [
|
||||
this.productionOverviewVo.input || 0,
|
||||
this.productionOverviewVo.output || 0,
|
||||
this.productionOverviewVo.ng || 0,
|
||||
this.productionOverviewVo.lowValue || 0,
|
||||
this.productionOverviewVo.scrap || 0,
|
||||
this.productionOverviewVo.inProcess || 0,
|
||||
this.productionOverviewVo.engineer || 0
|
||||
]
|
||||
|
||||
const option = {
|
||||
type: 'bar',
|
||||
grid: { left: 51, right: 40, top: 50, bottom: 45 },
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { type: 'shadow' },
|
||||
className: 'production-status-chart-tooltip'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
offset: 8,
|
||||
data: ['投入', '产出', '待判', '低价值', '报废', '在制', '实验片'],
|
||||
axisTick: { show: false },
|
||||
axisLine: { show: true, onZero: false, lineStyle: { color: '#00E8FF' } },
|
||||
axisLabel: {
|
||||
color: 'rgba(255,255,255,0.7)',
|
||||
fontSize: 12,
|
||||
interval: 0,
|
||||
width: 38,
|
||||
overflow: 'break'
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '单位/片',
|
||||
nameTextStyle: { color: 'rgba(255,255,255,0.7)', fontSize: 14, align: 'left' },
|
||||
min: () => 0,
|
||||
max: (value) => Math.ceil(value.max),
|
||||
scale: true,
|
||||
axisTick: { show: false },
|
||||
axisLabel: { color: 'rgba(255,255,255,0.7)', fontSize: 12 },
|
||||
splitLine: { lineStyle: { color: 'RGBA(24, 88, 100, 0.6)', type: 'dashed' } },
|
||||
axisLine: { show: true, lineStyle: { color: '#00E8FF' } }
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'pictorialBar',
|
||||
label: { show: true, position: 'top', distance: -3, color: '#89CDFF', fontSize: 11 },
|
||||
symbolSize: [20, 8],
|
||||
symbolOffset: [0, 5],
|
||||
z: 20,
|
||||
itemStyle: {
|
||||
borderColor: '#3588C7',
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'RGBA(22, 89, 98, 1)' },
|
||||
{ offset: 1, color: '#3588C7' }
|
||||
])
|
||||
},
|
||||
data: data
|
||||
},
|
||||
{
|
||||
type: 'bar',
|
||||
barWidth: 20,
|
||||
itemStyle: {
|
||||
borderWidth: 1,
|
||||
borderColor: '#3588C7',
|
||||
opacity: 0.8,
|
||||
color: {
|
||||
x: 0, y: 0, x2: 0, y2: 1,
|
||||
type: 'linear',
|
||||
global: false,
|
||||
colorStops: [
|
||||
{ offset: 0, color: 'rgba(73,178,255,0)' },
|
||||
{ offset: 0.5, color: 'rgba(0, 232, 255, .5)' },
|
||||
{ offset: 1, color: 'rgba(0, 232, 255, 1)' }
|
||||
]
|
||||
}
|
||||
},
|
||||
tooltip: { show: false },
|
||||
data: data
|
||||
},
|
||||
{
|
||||
type: 'pictorialBar',
|
||||
symbolSize: [20, 8],
|
||||
symbolOffset: [0, -4],
|
||||
z: 12,
|
||||
symbolPosition: 'end',
|
||||
itemStyle: {
|
||||
borderColor: 'rgba(0, 232, 255, 1)',
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'RGBA(22, 89, 98, 1)' },
|
||||
{ offset: 1, color: '#3588C7' }
|
||||
])
|
||||
},
|
||||
tooltip: { show: false },
|
||||
data: data
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
this.chart.setOption(option)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
/* 3. 核心：滚动容器样式（固定高度+溢出滚动+隐藏滚动条） */
|
||||
.scroll-container {
|
||||
/* 1. 固定容器高度：根据页面布局调整（示例300px，超出则滚动） */
|
||||
max-height: 210px;
|
||||
/* 2. 溢出滚动：内容超出高度时显示滚动功能 */
|
||||
overflow-y: auto;
|
||||
/* 3. 隐藏横向滚动条（防止设备名过长导致横向滚动） */
|
||||
overflow-x: hidden;
|
||||
/* 4. 内边距：与标题栏和容器边缘对齐 */
|
||||
padding: 10px 0;
|
||||
|
||||
/* 5. 隐藏滚动条（兼容主流浏览器） */
|
||||
/* Chrome/Safari */
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Firefox */
|
||||
scrollbar-width: none;
|
||||
/* IE/Edge */
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
/* 设备项样式优化：增加间距，避免拥挤 */
|
||||
.proBarInfo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 8px 27px;
|
||||
/* 调整内边距，优化排版 */
|
||||
margin-bottom: 10px;
|
||||
/* 设备项之间的垂直间距 */
|
||||
}
|
||||
|
||||
/* 原有样式保留，优化细节 */
|
||||
.proBarInfoEqInfo {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
/* 垂直居中，避免序号/文字错位 */
|
||||
}
|
||||
|
||||
.slot {
|
||||
width: 21px;
|
||||
height: 23px;
|
||||
background: rgba(0, 106, 205, 0.22);
|
||||
backdrop-filter: blur(1.5px);
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #68B5FF;
|
||||
line-height: 23px;
|
||||
/* 垂直居中文字 */
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.eq-name {
|
||||
margin-left: 8px;
|
||||
/* 增加与序号的间距 */
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
line-height: 18px;
|
||||
letter-spacing: 1px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.eqStatus {
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
line-height: 18px;
|
||||
text-align: right;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.splitLine {
|
||||
width: 1px;
|
||||
height: 14px;
|
||||
border: 1px solid #ADADAD;
|
||||
margin: 0 8px;
|
||||
/* 优化分割线间距 */
|
||||
}
|
||||
|
||||
.yield {
|
||||
height: 18px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #00FFFF;
|
||||
line-height: 18px;
|
||||
text-align: right;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.proBarInfoEqInfoLeft {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* 序号和设备名垂直居中 */
|
||||
}
|
||||
|
||||
.proBarInfoEqInfoRight {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* 状态/分割线/百分比垂直居中 */
|
||||
}
|
||||
|
||||
.proBarWrapper {
|
||||
position: relative;
|
||||
height: 10px;
|
||||
margin-top: 6px;
|
||||
/* 进度条与上方信息的间距 */
|
||||
border-radius: 5px;
|
||||
/* 进度条圆角，优化视觉 */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.proBarLine {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(65deg, rgba(82, 82, 82, 0) 0%, #ACACAC 100%);
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.proBarLineTop {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
background: linear-gradient(65deg, rgba(53, 223, 247, 0) 0%, rgba(54, 220, 246, 0.92) 92%, #36F6E5 100%, #37ACF5 100%);
|
||||
border-radius: 5px;
|
||||
transition: width 0.3s ease;
|
||||
/* 进度变化时添加过渡动画，更流畅 */
|
||||
}
|
||||
|
||||
/* 图表相关样式保留 */
|
||||
.chartImgBottom {
|
||||
position: absolute;
|
||||
bottom: 45px;
|
||||
left: 58px;
|
||||
}
|
||||
|
||||
.line {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: 57px;
|
||||
bottom: 42px;
|
||||
width: 1px;
|
||||
height: 20px;
|
||||
background-color: #00E8FF;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
/* 全局 tooltip 样式（不使用 scoped，确保生效） */
|
||||
.production-status-chart-tooltip {
|
||||
background: #0a2b4f77 !important;
|
||||
border: none !important;
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
.production-status-chart-tooltip * {
|
||||
color: #fff !important;
|
||||
}
|
||||
</style>
|
||||
112
src/views/home/components/coresBar.vue
Normal file
112
src/views/home/components/coresBar.vue
Normal file
@@ -0,0 +1,112 @@
|
||||
<template>
|
||||
<div ref="cockpitEffChip" id="coreLineChart" style="height: 219px; width: 100%;"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
export default {
|
||||
name: 'Container',
|
||||
components: {},
|
||||
// 接收父组件传递的 series 数据
|
||||
props: {
|
||||
chartSeries: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => [] // 默认空数组，避免报错
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
myChart: null // 存储图表实例，方便后续操作
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initData();
|
||||
});
|
||||
},
|
||||
watch: {
|
||||
// 监听 series 数据变化，实时更新图表
|
||||
chartSeries: {
|
||||
handler() {
|
||||
this.updateChart();
|
||||
},
|
||||
deep: true // 深度监听数组内元素变化
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initData() {
|
||||
const chartDom = this.$refs.cockpitEffChip;
|
||||
if (!chartDom) {
|
||||
console.error('图表容器未找到！');
|
||||
return;
|
||||
}
|
||||
this.myChart = echarts.init(chartDom);
|
||||
this.updateChart(); // 初始化时渲染图表
|
||||
|
||||
// 监听窗口缩放
|
||||
window.addEventListener('resize', () => {
|
||||
this.myChart && this.myChart.resize();
|
||||
});
|
||||
|
||||
// 组件销毁时清理
|
||||
this.$once('hook:destroyed', () => {
|
||||
window.removeEventListener('resize', () => {
|
||||
this.myChart && this.myChart.resize();
|
||||
});
|
||||
this.myChart && this.myChart.dispose();
|
||||
});
|
||||
},
|
||||
// 单独提取更新图表的方法，方便复用
|
||||
updateChart() {
|
||||
if (!this.myChart) return;
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
label: { backgroundColor: '#6a7985' }
|
||||
}
|
||||
},
|
||||
grid: { top: 10, bottom: 20, right: 25, left: 30 },
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
axisTick: { show: false },
|
||||
axisLine: {
|
||||
show: true,
|
||||
onZero: false,
|
||||
lineStyle: { color: 'rgba(0, 0, 0, 0.15)' }
|
||||
},
|
||||
axisLabel: {
|
||||
color: 'rgba(0, 0, 0, 0.45)',
|
||||
fontSize: 12,
|
||||
interval: 0,
|
||||
width: 38,
|
||||
overflow: 'break'
|
||||
},
|
||||
data: ['6月', '7月', '8月', '9月', '10月', '11月']
|
||||
}
|
||||
],
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
nameTextStyle: { color: 'rgba(0, 0, 0, 0.45)', fontSize: 14, align: 'left' },
|
||||
min: () => 0,
|
||||
max: (value) => Math.ceil(value.max),
|
||||
scale: true,
|
||||
axisTick: { show: false },
|
||||
axisLabel: { color: 'rgba(0, 0, 0, 0.45)', fontSize: 12 },
|
||||
splitLine: { lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } },
|
||||
axisLine: { show: true, lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } }
|
||||
},
|
||||
series: this.chartSeries // 使用父组件传递的 series 数据
|
||||
};
|
||||
|
||||
this.myChart.setOption(option, true); // 第二个参数 true 表示替换现有配置
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
191
src/views/home/components/cost-Item.vue
Normal file
191
src/views/home/components/cost-Item.vue
Normal file
@@ -0,0 +1,191 @@
|
||||
<template>
|
||||
<div class="coreItem">
|
||||
<!-- 动态生成每个 item -->
|
||||
<div class="item" v-for="(item, index) in itemList" :key="index">
|
||||
<div class="unit">{{ item.unit }}</div>
|
||||
<div class="item-content">
|
||||
<!-- 左右内容容器 -->
|
||||
<div class="content-wrapper">
|
||||
<div class="left">
|
||||
<div class="number">{{ item.targetValue }}</div>
|
||||
<div class="title">上月</div>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div class="right">
|
||||
<!-- 本月数值：动态绑定颜色 -->
|
||||
<div class="number" :style="{ color: getColor(item.currentValue, item.targetValue) }">
|
||||
{{ item.currentValue }}
|
||||
</div>
|
||||
<div class="title">本月</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
|
||||
<div class="right">
|
||||
<!-- 环比额：计算差值并动态绑定颜色 -->
|
||||
<div class="number" :style="{ color: getColor(item.currentValue, item.targetValue) }">
|
||||
{{ get环比额(item.currentValue, item.targetValue) }}
|
||||
</div>
|
||||
<div class="title">环比额</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Container",
|
||||
components: {},
|
||||
props: ["name", "size", "icon"],
|
||||
data() {
|
||||
return {
|
||||
itemList: [
|
||||
{
|
||||
unit: "管理费用·万元",
|
||||
targetValue: 16, // 上月值
|
||||
currentValue: 14.5, // 本月值（小于上月，应显示橙色）
|
||||
},
|
||||
{
|
||||
unit: "销售费用·万元",
|
||||
targetValue: 16,
|
||||
currentValue: 17, // 大于上月，应显示绿色
|
||||
},
|
||||
{
|
||||
unit: "财务费用·万元",
|
||||
targetValue: 16,
|
||||
currentValue: 16, // 等于上月，应显示绿色
|
||||
},
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 颜色判断：本月 >= 上月 绿色，否则 橙色
|
||||
getColor(current, target) {
|
||||
return current >= target
|
||||
? "rgba(98, 213, 180, 1)"
|
||||
: "rgba(249, 164, 74, 1)";
|
||||
},
|
||||
// 计算环比额（本月 - 上月），保留一位小数
|
||||
get环比额(current, target) {
|
||||
const diff = current - target;
|
||||
// 正数加"+"号，负数和零保持原样
|
||||
return diff > 0 ? `${diff.toFixed(1)}` : diff.toFixed(1);
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.coreItem {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 232px;
|
||||
height: 228px;
|
||||
background: #f9fcff;
|
||||
padding: 12px 0px 17px 12px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.unit {
|
||||
height: 18px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
color: #000000;
|
||||
line-height: 18px;
|
||||
letter-spacing: 1px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.item-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
height: calc(100% - 26px);
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.line {
|
||||
width: 149px;
|
||||
height: 1px;
|
||||
background: linear-gradient(to left,
|
||||
rgba(255, 0, 0, 0),
|
||||
#cbcbcb);
|
||||
}
|
||||
|
||||
.left,
|
||||
.right {
|
||||
margin-top: 11px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.number {
|
||||
height: 22px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: 24px;
|
||||
color: rgba(103, 103, 103, 0.79);
|
||||
line-height: 22px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.title {
|
||||
height: 14px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #868687;
|
||||
line-height: 14px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.progress-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.progress-container {
|
||||
width: 138px;
|
||||
height: 10px;
|
||||
background: #ECEFF7;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 100%;
|
||||
background: #28CB97;
|
||||
border-radius: 8px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.progress-percent {
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #868687;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.yield {
|
||||
width: 138px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
237
src/views/home/components/costOverview.vue
Normal file
237
src/views/home/components/costOverview.vue
Normal file
@@ -0,0 +1,237 @@
|
||||
<template>
|
||||
<div style="flex: 1">
|
||||
<Container name="产销率总览·万m²" icon="cockpitItemIcon" size="psiBasicBg" topSize="psiTopTitleBasic">
|
||||
<!-- 1. 移除 .kpi-content 的固定高度，改为自适应 -->
|
||||
<div class="kpi-content" style="padding: 14px 16px; display: flex;flex-direction: column; width: 100%;height: 404px;">
|
||||
<!-- 2. .top 保持 flex，无需固定高度，自动跟随子元素拉伸 -->
|
||||
<div class="top" style="display: flex; width: 100%;">
|
||||
<psr-item :itemList="targetItemList" />
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Container from './container.vue'
|
||||
// import * as echarts from 'echarts'
|
||||
import psrItem from './psr-item.vue'
|
||||
|
||||
export default {
|
||||
name: 'ProductionStatus',
|
||||
components: { Container, psrItem },
|
||||
// mixins: [resize],
|
||||
props: {
|
||||
productSaleData: { // 接收父组件传递的设备数据数组
|
||||
type: Array,
|
||||
default: () => [] // 默认空数组，避免报错
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
parentItemList: [
|
||||
{ name: "销量", targetValue: 0, value: 0, proportion: 0 },
|
||||
{ name: "产量", targetValue: 0, value: 0, proportion: 0 },
|
||||
{ name: "累计完成产销率", targetValue: 0, value: 0, proportion: 0 },
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
targetItemList() {
|
||||
// 基于 parentItemList 的名称，匹配 productAndSaleData 中对应名称的数据
|
||||
return this.parentItemList.map(parentItem => {
|
||||
// 按名称精准匹配（name 完全一致才关联）
|
||||
const productItem = this.productSaleData.find(
|
||||
item => item.name === parentItem.name
|
||||
) || {};
|
||||
|
||||
// 优先使用匹配到的 productItem 数据，缺失则用 parentItem 的默认值（0）
|
||||
return {
|
||||
name: parentItem.name, // 保留原名称（销量、产量等）
|
||||
targetValue: productItem.targetValue ?? parentItem.targetValue ?? 0,
|
||||
value: productItem.value ?? parentItem.value ?? 0,
|
||||
proportion: productItem.proportion ?? parentItem.proportion ?? 0,
|
||||
completed: productItem.completed ?? parentItem.completed ?? 1,
|
||||
route: parentItem.route // 路由沿用 parentItem 的配置
|
||||
};
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 初始化图表（若需展示图表，需在模板中添加对应 DOM）
|
||||
// this.$nextTick(() => this.updateChart())
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
/* 3. 核心：滚动容器样式（固定高度+溢出滚动+隐藏滚动条） */
|
||||
.scroll-container {
|
||||
/* 1. 固定容器高度：根据页面布局调整（示例300px，超出则滚动） */
|
||||
max-height: 210px;
|
||||
/* 2. 溢出滚动：内容超出高度时显示滚动功能 */
|
||||
overflow-y: auto;
|
||||
/* 3. 隐藏横向滚动条（防止设备名过长导致横向滚动） */
|
||||
overflow-x: hidden;
|
||||
/* 4. 内边距：与标题栏和容器边缘对齐 */
|
||||
padding: 10px 0;
|
||||
|
||||
/* 5. 隐藏滚动条（兼容主流浏览器） */
|
||||
/* Chrome/Safari */
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Firefox */
|
||||
scrollbar-width: none;
|
||||
/* IE/Edge */
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
/* 设备项样式优化：增加间距，避免拥挤 */
|
||||
.proBarInfo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 8px 27px;
|
||||
/* 调整内边距，优化排版 */
|
||||
margin-bottom: 10px;
|
||||
/* 设备项之间的垂直间距 */
|
||||
}
|
||||
|
||||
/* 原有样式保留，优化细节 */
|
||||
.proBarInfoEqInfo {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
/* 垂直居中，避免序号/文字错位 */
|
||||
}
|
||||
|
||||
.slot {
|
||||
width: 21px;
|
||||
height: 23px;
|
||||
background: rgba(0, 106, 205, 0.22);
|
||||
backdrop-filter: blur(1.5px);
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #68B5FF;
|
||||
line-height: 23px;
|
||||
/* 垂直居中文字 */
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.eq-name {
|
||||
margin-left: 8px;
|
||||
/* 增加与序号的间距 */
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
line-height: 18px;
|
||||
letter-spacing: 1px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.eqStatus {
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
line-height: 18px;
|
||||
text-align: right;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.splitLine {
|
||||
width: 1px;
|
||||
height: 14px;
|
||||
border: 1px solid #ADADAD;
|
||||
margin: 0 8px;
|
||||
/* 优化分割线间距 */
|
||||
}
|
||||
|
||||
.yield {
|
||||
height: 18px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #00FFFF;
|
||||
line-height: 18px;
|
||||
text-align: right;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.proBarInfoEqInfoLeft {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* 序号和设备名垂直居中 */
|
||||
}
|
||||
|
||||
.proBarInfoEqInfoRight {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* 状态/分割线/百分比垂直居中 */
|
||||
}
|
||||
|
||||
.proBarWrapper {
|
||||
position: relative;
|
||||
height: 10px;
|
||||
margin-top: 6px;
|
||||
/* 进度条与上方信息的间距 */
|
||||
border-radius: 5px;
|
||||
/* 进度条圆角，优化视觉 */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.proBarLine {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(65deg, rgba(82, 82, 82, 0) 0%, #ACACAC 100%);
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.proBarLineTop {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
background: linear-gradient(65deg, rgba(53, 223, 247, 0) 0%, rgba(54, 220, 246, 0.92) 92%, #36F6E5 100%, #37ACF5 100%);
|
||||
border-radius: 5px;
|
||||
transition: width 0.3s ease;
|
||||
/* 进度变化时添加过渡动画，更流畅 */
|
||||
}
|
||||
|
||||
/* 图表相关样式保留 */
|
||||
.chartImgBottom {
|
||||
position: absolute;
|
||||
bottom: 45px;
|
||||
left: 58px;
|
||||
}
|
||||
|
||||
.line {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: 57px;
|
||||
bottom: 42px;
|
||||
width: 1px;
|
||||
height: 20px;
|
||||
background-color: #00E8FF;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
/* 全局 tooltip 样式（不使用 scoped，确保生效） */
|
||||
.production-status-chart-tooltip {
|
||||
background: #0a2b4f77 !important;
|
||||
border: none !important;
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
.production-status-chart-tooltip * {
|
||||
color: #fff !important;
|
||||
}
|
||||
</style>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user