Merge branch 'gaoshp'

gaoshp

2024-03-27 a98deb841df1cf0fa5df1f91d034e224c4c0dbc0

Merge branch 'gaoshp'

 README.md

@@ -1,75 +1,12 @@

<div align="center">

![logo](https://lolicode.gitee.io/scui-doc/logo.png)

<p align="center">
    <a href="https://v3.vuejs.org/" target="_blank">
        <img src="https://img.shields.io/badge/VueCLI-5-green" alt="VueCLI">
    </a>
    <a href="https://v3.vuejs.org/" target="_blank">
        <img src="https://img.shields.io/badge/Vue.js-3.x-green" alt="Vue">
    </a>
    <a href="https://element-plus.gitee.io/#/zh-CN/component/changelog" target="_blank">
        <img src="https://img.shields.io/badge/element--plus-latest-blue" alt="element plus">
    </a>
</p>

<h1>SCUI Admin</h1>

</div>

## 介绍
SCUI 是一个中后台前端解决方案，基于VUE3和elementPlus实现。
使用最新的前端技术栈，提供各类实用的组件方便在业务开发时的调用，并且持续性的提供丰富的业务模板帮助你快速搭建企业级中后台前端任务。

SCUI的宗旨是 让一切复杂的东西傻瓜化。

![logo](https://lolicode.gitee.io/scui-doc/g_1.jpg)

## 演示和文档

| 类型 | 链接 |
| -------- | -------- |
| 文档地址 | https://lolicode.gitee.io/scui-doc/ |
| 演示地址  | https://lolicode.gitee.io/scui-doc/demo/#/login |



## 特点

- **组件** 多个独家组件、业务模板
- **权限** 完整的鉴权体系和高精度权限控制
- **布局** 提供多套布局模式，满足各种视觉需求
- **API** 完善的API管理，使用真实网络MOCK
- **配置** 统一的全局配置和组件配置，支持build后配置热更新
- **性能** 在减少带宽请求和前端算力上多次优化，并且持续着
- **其他** 多功能视图标签、动态权限菜单、控制台组态化、统一异常处理等等


## 部分截图

![logo](https://lolicode.gitee.io/scui-doc/g_2.jpg)

## 安装教程
``` sh
# 克隆项目
git clone https://gitee.com/lolicode/scui.git

# 进入项目目录
cd scui

# 安装依赖
npm i

# 启动项目(开发模式)
npm run serve
```
启动完成后浏览器访问 http://localhost:2800

## 鸣谢

<img src="https://www.fastmock.site/resource/images/logo.png" style="height:40px"/>

## 支持
如果觉得本项目还不错或在工作中有所启发，请在Gitee(码云)帮开发者点亮星星，这是对开发者最大的支持和鼓励！
<!--
 * @Date: 2024-03-23 09:49:06
 * @LastEditors: gaoshp
 * @LastEditTime: 2024-03-25 23:32:24
 * @FilePath: /cps-web/README.md
-->
## 接口文档地址
http://116.63.148.72:31002/doc.html
## git
http://gaosp@www.beijingsoft.cn:9090/r/smart-web.git
##  Admin
http://116.63.148.72:31002/instances/0ff8ab977c9e/details

 src/App.vue

@@ -1,3 +1,9 @@
<!--
 * @Date: 2024-03-23 09:49:06
 * @LastEditors: gaoshp
 * @LastEditTime: 2024-03-26 21:41:35
 * @FilePath: /cps-web/src/App.vue
-->
<template>
    <el-config-provider :locale="locale" :size="config.size" :zIndex="config.zIndex" :button="config.button">
        <router-view></router-view>
@@ -5,42 +11,63 @@
</template>

<script>
    import colorTool from '@/utils/color'
import colorTool from '@/utils/color'

    export default {
        name: 'App',
        data() {
            return {
                config: {
                    size: "default",
                    zIndex: 2000,
                    button: {
                        autoInsertSpace: false
                    }
                }
            }
        },
        computed: {
            locale(){
                return this.$i18n.messages[this.$i18n.locale].el
            },
        },
        created() {
            //设置主题颜色
            const app_color = this.$CONFIG.COLOR || this.$TOOL.data.get('APP_COLOR')
            if(app_color){
                document.documentElement.style.setProperty('--el-color-primary', app_color);
                for (let i = 1; i <= 9; i++) {
                    document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, colorTool.lighten(app_color,i/10));
                }
                for (let i = 1; i <= 9; i++) {
                    document.documentElement.style.setProperty(`--el-color-primary-dark-${i}`, colorTool.darken(app_color,i/10));
export default {
    name: 'App',
    data() {
        return {
            config: {
                size: "default",
                zIndex: 2000,
                button: {
                    autoInsertSpace: false
                }
            }
        }
    },
    computed: {
        locale() {
            return this.$i18n.messages[this.$i18n.locale].el
        },
    },
    created() {
        //设置主题颜色
        const app_color = this.$CONFIG.COLOR || this.$TOOL.data.get('APP_COLOR')
        if (app_color) {
            document.documentElement.style.setProperty('--el-color-primary', app_color);
            for (let i = 1; i <= 9; i++) {
                document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, colorTool.lighten(app_color, i / 10));
            }
            for (let i = 1; i <= 9; i++) {
                document.documentElement.style.setProperty(`--el-color-primary-dark-${i}`, colorTool.darken(app_color, i / 10));
            }
        }
    },
    mounted() {
        const debounce = (fn, delay) => {
            let timer
            return (...args) => {
                if (timer) {
                    clearTimeout(timer)
                }
                timer = setTimeout(() => {
                    fn(...args)
                }, delay)
            }
        }

        const _ResizeObserver = window.ResizeObserver;
        window.ResizeObserver = class ResizeObserver extends _ResizeObserver {
            constructor(callback) {
                callback = debounce(callback, 200);
                super(callback);
            }
        }
    }
}
</script>

<style lang="scss">
    @import '@/style/style.scss';
@import '@/style/style.scss';
</style>

 src/api/model/basicdata.js

@@ -1,7 +1,7 @@
/*
 * @Date: 2024-03-24 11:37:47
 * @LastEditors: gaoshp
 * @LastEditTime: 2024-03-24 14:30:13
 * @LastEditTime: 2024-03-27 20:46:02
 * @FilePath: /cps-web/src/api/model/basicdata.js
 */
import config from "@/config"
@@ -15,4 +15,21 @@
            return await http.get(this.url, params);
        }
    },
    saveWorkstationGroup: {
        url: `${config.API_URL}/blade-cps/group`,
        name: "保存工位组",
        put: async function(params){
            return await http.put(this.url, params);
        },
        post: async function(params){
            return await http.post(this.url, params);
        },
    },
    deleteWorkGroup: {
        url: `${config.API_URL}/blade-cps/workstation/deleteGroup`,
        name: "删除工位组",
        delete: async function(params){
            return await http.delete(this.url, params);
        }
    }
}

 src/api/model/system.js

@@ -39,6 +39,13 @@
            get: async function(params){
                return await http.get(this.url, params);
            }
        },
        getDic: {
            url: `${config.API_URL}/blade-system/dict/dictionary`,
            name: "获取字典数据",
            get: async function(params){
                return await http.get(this.url, params);
            }
        }
    },
    role: {

 src/assets/pms.png

 src/main.js

@@ -1,3 +1,9 @@
/*
 * @Date: 2024-03-23 09:49:06
 * @LastEditors: gaoshp
 * @LastEditTime: 2024-03-26 21:40:32
 * @FilePath: /cps-web/src/main.js
 */
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

 src/utils/request.js

@@ -205,7 +205,7 @@
            axios({
                method: 'delete',
                url: url,
                data: data,
                params: data,
                ...config
            }).then((response) => {
                resolve(response.data);

 src/views/basicdata/machine/workstation.vue

@@ -65,15 +65,142 @@
                                            </el-button-group>
                                        </template>
                                    </el-table-column>

                                </scTable>
                            </el-main>
                        </el-container>
                    </el-container>
                </el-tab-pane>

                <!-- 工位组 -->
                <el-tab-pane label="工位组" name="2">

                    <el-container>
                        <el-aside width="200px" v-loading="showGrouploading">
                            <el-container>
                                <el-main class="nopadding">
                                    <el-tree ref="group" class="menu" node-key="id" :data="group"
                                        :current-node-key="treeCheckKey" 
                                        :highlight-current="true"
                                        :expand-on-click-node="false" 
                                        :check-on-click-node="true"
                                        :default-expanded-keys="[1]"
                                        :render-content="renderContent"
                                        :filter-node-method="groupFilterNode"
                                        @node-click="groupClick"></el-tree>
                                </el-main>
                            </el-container>
                        </el-aside>
                        <el-container>
                            <el-main class="" v-show="addGroupShow">
                                <el-form
                                    v-show="treeCheckedNode.id == 1"
                                    :model="form" :rules="rules" ref="dialogForm" label-width="200px"
                                    label-position="left">
                                    <el-form-item label="产线标签" prop="groupTag">
                                        <el-select v-model="form.groupTag" clearable placeholder="产线标签"
                                            style="width: 240px">
                                            <el-option v-for="item in beltline_type" :key="item.dictKey"
                                                :label="item.dictValue" :value="item.dictKey" />
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="产线名称" prop="name">
                                        <el-input style="width: 240px" v-model="form.name" clearable
                                            placeholder="产线名称"></el-input>
                                    </el-form-item>
                                    <el-form-item label="产线排序" prop="sort">
                                        <el-input-number v-model="form.sort" :min="0" :max="10" />
                                    </el-form-item>
                                    <el-form-item label="备注" prop="remark">
                                        <el-input type="textarea" style="width: 240px" v-model="form.remark" clearable
                                            placeholder="备注"></el-input>
                                    </el-form-item>
                                </el-form>
                                <el-form v-show="group_tag.map(item => item.dictKey).includes(treeCheckedNode.groupTag) || beltline_type.map(item => item.dictKey).includes(treeCheckedNode.groupTag) || treeCheckedNode.id == 101"
                                    :model="form" :rules="rules" ref="dialogForm" label-width="200px"
                                    label-position="left">
                                    <el-form-item label="工位组标签" prop="groupTag">
                                        <el-select v-model="form.groupTag" clearable placeholder="工位组标签"
                                            style="width: 240px">
                                            <el-option v-for="item in group_tag" :key="item.dictKey"
                                                :label="item.dictValue" :value="item.dictKey" />
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="工位组名称" prop="name">
                                        <el-input style="width: 240px" v-model="form.name" clearable
                                            placeholder="工位组名称"></el-input>
                                    </el-form-item>
                                    <el-form-item label="工位组排序" prop="sort">
                                        <el-input-number v-model="form.sort" :min="0" :max="10" />
                                    </el-form-item>
                                    <el-form-item label="备注" prop="remark">
                                        <el-input type="textarea" style="width: 240px" v-model="form.remark" clearable
                                            placeholder="备注"></el-input>
                                    </el-form-item>
                                </el-form>
                            </el-main>
                            <el-header v-show="!addGroupShow">
                                <div class="left-panel">
                                    <el-button @click="addChild" type="primary" plain>新增下级</el-button>
                                    <el-button @click="deleteWorkGroup" v-show="!['1', '101'].includes(treeCheckedNode.id)" type="danger"
                                        plain>删除</el-button>
                                </div>
                            </el-header>
                            <el-main class="" v-show="!addGroupShow">
                                <ul class="show-info" v-show="['1', '101'].includes(treeCheckedNode.id)">
                                    <li>名称: {{ treeCheckedNode.name }}</li>
                                    <li>排序: {{ treeCheckedNode.sort }}</li>
                                    <li>备注: {{ treeCheckedNode.remark }}</li>
                                </ul>
                                <el-form
                                    v-show="beltline_type.map(item => item.dictKey).includes(treeCheckedNode.groupTag)"
                                    :model="form" :rules="rules" ref="dialogForm" label-width="200px"
                                    label-position="left">
                                    <el-form-item label="产线标签" prop="groupTag">
                                        <el-select v-model="form.groupTag" clearable placeholder="产线标签"
                                            style="width: 240px">
                                            <el-option v-for="item in beltline_type" :key="item.dictKey"
                                                :label="item.dictValue" :value="item.dictKey" />
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="产线名称" prop="name">
                                        <el-input style="width: 240px" v-model="form.name" clearable
                                            placeholder="产线名称"></el-input>
                                    </el-form-item>
                                    <el-form-item label="产线排序" prop="sort">
                                        <el-input-number v-model="form.sort" :min="0" :max="10" />
                                    </el-form-item>
                                    <el-form-item label="备注" prop="remark">
                                        <el-input type="textarea" style="width: 240px" v-model="form.remark" clearable
                                            placeholder="备注"></el-input>
                                    </el-form-item>
                                </el-form>
                                <el-form v-show="group_tag.map(item => item.dictKey).includes(treeCheckedNode.groupTag)"
                                    :model="form" :rules="rules" ref="dialogForm" label-width="200px"
                                    label-position="left">
                                    <el-form-item label="工位组标签" prop="groupTag">
                                        <el-select v-model="form.groupTag" clearable placeholder="工位组标签"
                                            style="width: 240px">
                                            <el-option v-for="item in group_tag" :key="item.dictKey"
                                                :label="item.dictValue" :value="item.dictKey" />
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="工位组名称" prop="name">
                                        <el-input style="width: 240px" v-model="form.name" clearable
                                            placeholder="工位组名称"></el-input>
                                    </el-form-item>
                                    <el-form-item label="工位组排序" prop="sort">
                                        <el-input-number v-model="form.sort" :min="0" :max="10" />
                                    </el-form-item>
                                    <el-form-item label="备注" prop="remark">
                                        <el-input type="textarea" style="width: 240px" v-model="form.remark" clearable
                                            placeholder="备注"></el-input>
                                    </el-form-item>
                                </el-form>
                            </el-main>
                            <el-main v-show="!['1', '101'].includes(treeCheckedNode.id) || addGroupShow">
                                <el-button @click="saveWorkstationGroup" style="width: 100px" type="primary"
                                    plain>提交</el-button>
                            </el-main>
                        </el-container>
                    </el-container>
                </el-tab-pane>

            </el-tabs>
@@ -82,46 +209,156 @@
</template>

<script>
import pmsPng from '@/assets/pms.png'
export default {
    name: 'system',
    data() {
        return {
            activeName: '1',
            showGrouploading: false,
            options: [],
            activeName: '2',
            group: [],
            groupFilterText: ''
            groupFilterText: '',
            // --------
            form: {
                groupTag: '',
                name: '',
                sort: '',
                remark: ''
            },
            rules: {
                groupTag: { required: true, message: '必填', trigger: 'blur' },
                name: { required: true, message: '必填', trigger: 'blur' },
                sort: { required: true, message: '必填', trigger: 'blur' }
            },
            treeCheckedNode: {},
            treeCheckKey: [],
            beltline_type: [],
            group_tag: [],
            addGroupShow: false
        }
    },
    watch: {
        activeName() {
            this.queryList()
        },
        treeCheckedNode: {
            handler(val) {
                this.addGroupShow = false
                Object.keys(this.form).forEach(key => {
                    this.form[key] = val?.[key]
                })
            },
            deep: true
        }
    },
    created() {
        this.$API.basicdata.getWorkstationGroup.get().then(res => {
            if (res.code == 200) {
                let data = this.formatData(res.data)
                this.group = data
            }
        })
        this.init()
        this.queryList()
    },
    methods: {
        renderContent (h, {node,data}) {
            console.log(node,data)
            let img = data.groupTag == 'fms_beltline'
            return h('span',{

            },
            img ? h('img', {
                src: pmsPng
            }, '') : '',
            data.name)
        },
        init() {
            this.$API.system.dic.getDic.get({ code: 'beltline_type' }).then(res => {
                this.beltline_type = res.data
            })
            this.$API.system.dic.getDic.get({ code: 'group_tag' }).then(res => {
                this.group_tag = res.data
            })

        },
        queryList(flag) {
            this.showGrouploading = true
            this.$API.basicdata.getWorkstationGroup.get().then(res => {
                if (res.code == 200) {
                    if (!flag) {
                        let parent = res.data.filter(item => item.parentId == 0)[0]
                        this.treeCheckedNode = parent
                        this.treeCheckKey = parent.id
                    } else {
                        let parent = res.data.filter(item => item.id == this.treeCheckedNode.id)[0]
                        this.treeCheckedNode = parent
                        this.treeCheckKey = parent.id
                    }
					
                    let data = this.formatData(res.data)
                    this.group = data
                    this.showGrouploading = false
                }
            })
        },
        formatData(data, current) {
            let newData = []
            if (!current) {
                newData = data.filter(item => item.parentId == 0).map(v => {
                    v.children = this.formatData(data, v)
                    v.children = this.formatData(data, v).sort((a, b) => {
                        return b.sort - a.sort
                    })
                    return v
                })
            } else {
                let res = data.filter(v => v.parentId === current.id)
                res = res.map(item => {
                    item.children = this.formatData(data, item)
                    item.children = this.formatData(data, item).sort((a, b) => {
                        return b.sort - a.sort
                    })
                    return item
                })
                return res
            }
            return newData
        },
        async saveWorkstationGroup() {
            const validate = await this.$refs.dialogForm.validate().catch(()=>{})
            if(!validate){ return false }
            if (this.addGroupShow) {
                let data = Object.assign({
                    code: "",
                    fullName: "",
                    id: "",
                    parentId: this.treeCheckedNode.id,
                    status: 1,
                    groupType: this.treeCheckedNode.groupType,
                    groupCategory: this.treeCheckedNode.groupCategory
                },this.form)
                return this.$API.basicdata.saveWorkstationGroup.post(data).then(res => {
                    console.log(res)
                    this.queryList(true)
                })
            }
            let data = Object.assign({},this.treeCheckedNode,this.form)
            this.$API.basicdata.saveWorkstationGroup.put(data).then(res => {
                console.log(res)
                this.queryList(true)
            })
        },
        deleteWorkGroup () {
            this.$API.basicdata.deleteWorkGroup.delete({
                groupId: this.treeCheckedNode.id
            }).then(() => {
                this.queryList()
            })
        },
        addChild () {
            this.addGroupShow = true
            this.$refs.dialogForm.resetFields()
        },
        groupFilterNode() {

        },
        groupClick() {

        groupClick(node) {
            console.log(node)
            this.treeCheckedNode = node
        },
        table_add() {
            var newRow = {
@@ -146,4 +383,9 @@
}
</script>

<style></style>
<style scoped>
.show-info {
    list-style: none;
    font-size: 14px;
}
</style>