工位信息

gaoshp

2024-03-31 cfe5cd40403eb8c2f10e91f00157a284d3efe190

工位信息

 src/api/model/workstation.js

@@ -1,7 +1,7 @@
/*
 * @Date: 2024-03-24 11:37:47
 * @LastEditors: gaoshp
 * @LastEditTime: 2024-03-27 22:00:10
 * @LastEditTime: 2024-03-31 16:51:53
 * @FilePath: /cps-web/src/api/model/workstation.js
 */
import config from "@/config"
@@ -41,5 +41,14 @@
        delete: async function(params){
            return await http.delete(this.url, params);
        }
    },
    deleteWork: {
        url: `${config.API_URL}/blade-cps/workstation`,
        name: "删除工位",
        delete: async function(params){
            return await http.delete(this.url, params);
        }
        // /blade-cps/workstation?type=1&workstationIds=1689546460820299778
    }
	
}

 src/assets/machine.png

 src/views/console/workstation/Dialog.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,254 @@
<template>
    <el-dialog :title="titleMap[mode]" v-model="visible" :width="800" destroy-on-close @closed="$emit('closed')">
        <el-form :model="form" :rules="rules" :disabled="mode == 'show'" ref="dialogForm" label-width="120px"
            label-position="center">
            <el-row>
                <el-col :span="24" style="padding:12px 0;">
                    åŸºç¡€ä¿¡æ¯
                </el-col>
                <el-col :span="12">
                    <el-form-item label="工号" prop="userName">
                        <el-input v-model="form.userName" placeholder="用于登录系统" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="工位编号" prop="userName">
                        <el-input v-model="form.userName" placeholder="用于登录系统" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="工位名称" prop="userName">
                        <el-input v-model="form.userName" placeholder="用于登录系统" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="工位类型" prop="userName">
                        <el-input v-model="form.userName" placeholder="用于登录系统" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="所属工位组" prop="userName">
                        <el-input v-model="form.userName" placeholder="用于登录系统" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="状态" prop="userName">
                        <el-input v-model="form.userName" placeholder="用于登录系统" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="头像" prop="avatar">
                        <sc-upload v-model="form.avatar" title="上传头像"></sc-upload>
                    </el-form-item>
                </el-col>
                <el-col :span="24" style="padding:12px 0;">
                    æœºå™¨ä¿¡æ¯
                </el-col>
                
                <el-col :span="12">
                    <el-form-item label="工号" prop="userName">
                        <el-input v-model="form.userName" placeholder="用于登录系统" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="姓名" prop="name">
                        <el-input v-model="form.name" placeholder="请输入完整的真实姓名" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="手机号" prop="name">
                        <el-input v-model="form.name" placeholder="请输入手机号" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24" style="padding:12px 0;">
                    æ‰©å±•ä¿¡æ¯
                </el-col>
                <el-col :span="12">
                    <el-form-item label="状态" prop="name">
                        <el-select v-model="form.group" multiple filterable style="width: 100%">
                            <el-option v-for="item in groups" :key="item.id" :label="item.label" :value="item.id" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="岗位" prop="dept">
                        <el-select v-model="form.group" multiple filterable style="width: 100%">
                            <el-option v-for="item in groups" :key="item.id" :label="item.label" :value="item.id" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="邮箱" prop="name">
                        <el-input v-model="form.name" placeholder="请输入邮箱" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="部门" prop="dept">
                        <el-select v-model="form.group" multiple filterable style="width: 100%">
                            <el-option v-for="item in groups" :key="item.id" :label="item.label" :value="item.id" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="PIN码" prop="name">
                        <el-input v-model="form.name" placeholder="请输入PIN码" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="入职时间" prop="name">
                        <el-date-picker style="width: 100%;" v-model="value1" type="date" placeholder="Pick a day"
                            :size="size" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="关联账号" prop="name">
                        <el-input v-model="form.name" placeholder="请输入关联账号" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="数据权限配置" prop="name">
                        <el-input v-model="form.name" placeholder="请输入数据权限配置" clearable></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <el-button @click="visible = false">取 æ¶ˆ</el-button>
            <el-button v-if="mode != 'show'" type="primary" :loading="isSaveing" @click="submit()">保 å­˜</el-button>
        </template>
    </el-dialog>
</template>

<script>
export default {
    emits: ['success', 'closed'],
    data() {
        return {
            mode: "add",
            titleMap: {
                add: '添加员工',
                edit: '修改员工',
                show: '查看'
            },
            visible: false,
            isSaveing: false,
            //表单数据
            form: {
                id: "",
                userName: "",
                avatar: "",
                name: "",
                dept: "",
                group: []
            },
            //验证规则
            rules: {
                avatar: [
                    { required: true, message: '请上传头像' }
                ],
                userName: [
                    { required: true, message: '请输入登录账号' }
                ],
                name: [
                    { required: true, message: '请输入真实姓名' }
                ],
                password: [
                    { required: true, message: '请输入登录密码' },
                    {
                        validator: (rule, value, callback) => {
                            if (this.form.password2 !== '') {
                                this.$refs.dialogForm.validateField('password2');
                            }
                            callback();
                        }
                    }
                ],
                password2: [
                    { required: true, message: '请再次输入密码' },
                    {
                        validator: (rule, value, callback) => {
                            if (value !== this.form.password) {
                                callback(new Error('两次输入密码不一致!'));
                            } else {
                                callback();
                            }
                        }
                    }
                ],
                dept: [
                    { required: true, message: '请选择所属部门' }
                ],
                group: [
                    { required: true, message: '请选择所属角色', trigger: 'change' }
                ]
            },
            //所需数据选项
            groups: [],
            groupsProps: {
                value: "id",
                multiple: true,
                checkStrictly: true
            },
            depts: [],
            deptsProps: {
                value: "id",
                checkStrictly: true
            }
        }
    },
    mounted() {
        // this.getGroup()
        // this.getDept()
    },
    methods: {
        //显示
        open(mode = 'add') {
            this.mode = mode;
            this.visible = true;
            return this
        },
        //加载树数据
        async getGroup() {
            var res = await this.$API.system.role.list.get();
            this.groups = res.data.rows;
        },
        async getDept() {
            var res = await this.$API.system.dept.list.get();
            this.depts = res.data;
        },
        //表单提交方法
        submit() {
            this.$refs.dialogForm.validate(async (valid) => {
                if (valid) {
                    this.isSaveing = true;
                    var res = await this.$API.demo.post.post(this.form);
                    this.isSaveing = false;
                    if (res.code == 200) {
                        this.$emit('success', this.form, this.mode)
                        this.visible = false;
                        this.$message.success("操作成功")
                    } else {
                        this.$alert(res.message, "提示", { type: 'error' })
                    }
                } else {
                    return false;
                }
            })
        },
        //表单注入数据
        setData(data) {
            this.form.id = data.id
            this.form.userName = data.userName
            this.form.avatar = data.avatar
            this.form.name = data.name
            this.form.group = data.group
            this.form.dept = data.dept

            //可以和上面一样单个注入，也可以像下面一样直接合并进去
            //Object.assign(this.form, data)
        }
    }
}
</script>

<style></style>

 src/views/console/workstation/index.vue

@@ -18,55 +18,90 @@
                        <el-container>
                            <el-header>
                                <div class="left-panel">
                                    <el-button type="primary" icon="el-icon-plus"></el-button>
                                    <el-button @click="table_add" type="primary" icon="el-icon-plus"></el-button>
                                    <el-button type="danger" plain icon="el-icon-delete"></el-button>
                                    <el-button type="primary" plain>导入</el-button>
                                    <el-button type="primary" plain>批量操作</el-button>
                                    <!-- <el-button type="primary" plain>导入</el-button>
                                    <el-button type="primary" plain>批量操作</el-button> -->
                                </div>
                                <div class="right-panel">
                                    <div class="right-panel-search">
                                        <el-select v-model="value" placeholder="Select" style="width: 240px">
                                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                        <span>类型</span>
                                        <el-select v-model="type" style="width: 240px">
                                            <el-option v-for="item in types" :key="item.value" :label="item.label"
                                                :value="item.value" />
                                        </el-select>
                                        <el-select v-model="value" placeholder="Select" style="width: 240px">
                                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                        <span>状态</span>
                                        <el-select v-model="statu" style="width: 240px">
                                            <el-option v-for="item in status" :key="item.value" :label="item.label"
                                                :value="item.value" />
                                        </el-select>
                                        <el-input style="width: 240px" placeholder="请输入工位名称/编号" clearable></el-input>
                                        <el-button type="primary" icon="el-icon-search"></el-button>
                                        <el-input v-model="keyWord" style="width: 240px" placeholder="请输入工位名称/编号" clearable></el-input>
                                        <el-button @click="search" type="primary" icon="el-icon-search"></el-button>
                                    </div>
                                </div>
                            </el-header>
                            <el-main class="nopadding">
                                <scTable ref="table" :params="params" :apiObj="apiObj"
                            <div style="display: flex">
                                <scTable highlight-current-row @dataChange="dataChange" @row-click="rowClick" ref="table" :params="params" :apiObj="apiObj"
                                    @selection-change="selectionChange" stripe>
                                    <el-table-column type="selection" width="50"></el-table-column>
                                    <el-table-column label="工位编号" prop="id" width="120"
                                    <el-table-column label="工位编号" prop="code" width="120"
                                        sortable='custom'></el-table-column>
                                    <el-table-column label="工位名称" prop="id" width="120"
                                    <el-table-column label="工位名称" prop="name" width="120"
                                        sortable='custom'></el-table-column>
                                    <el-table-column label="工位类型" prop="id" width="120"
                                    <el-table-column label="工位类型" prop="type" width="120"
                                        sortable='custom'></el-table-column>
                                    <el-table-column label="工位日历" prop="id" width="120"
                                    <el-table-column label="工位日历" prop="calendarName" width="120"
                                        sortable='custom'></el-table-column>
                                    <el-table-column label="操作" fixed="right" align="right" width="160">
                                        <template #default="scope">
                                            <el-button-group>
                                                <el-button text type="primary" size="small"
                                                    @click="table_show(scope.row, scope.$index)">查看</el-button>
                                                <el-button text type="primary" size="small"
                                                    @click="table_edit(scope.row, scope.$index)">编辑</el-button>
                                                <el-popconfirm title="确定删除吗？"
                                                    @confirm="table_del(scope.row, scope.$index)">
                                                    @confirm="table_del(scope.row, scope.$index, '0')">
                                                    <template #reference>
                                                        <el-button text type="primary" size="small">删除</el-button>
                                                    </template>
                                                </el-popconfirm>
                                                <el-popconfirm title="确定停用吗？"
                                                    @confirm="table_del(scope.row, scope.$index,'1')">
                                                    <template #reference>
                                                        <el-button text type="primary" size="small">停用</el-button>
                                                    </template>
                                                </el-popconfirm>
                                            </el-button-group>
                                        </template>
                                    </el-table-column>
                                </scTable>
                                <div style="margin-left: 14px" v-if="Object.keys(previewData).length > 0">
                                    <div class="header">
                                        <p class="preview-title">工位信息</p>
                                        <div class="preview-content">
                                            <div class="img">
                                                <img :src="machinePng" alt="">
                                            </div>
                                            <ul>
                                                <li>工位编号 {{previewData.code}}</li>
                                                <li>工位组 {{previewData.groupName}}</li>
                                                <li>工位名称 {{previewData.name}}</li>
                                                <li>工位类型 {{previewData.type}}</li>
                                                <li>工位日历 {{previewData.calendarName}}</li>
                                                <li>状态 {{previewData.status}}</li>
                                            </ul>
                                        </div>
                                        <el-tabs tab-position="top" class="custom-tabs" v-model="normal">
                                            <el-tab-pane label="机器信息" name="1">
                                                æœºå™¨ä¿¡æ¯
                                            </el-tab-pane>
                                            <el-tab-pane label="扩展信息" name="2">
                                                æ‰©å±•ä¿¡æ¯
                                            </el-tab-pane>
                                        </el-tabs>
                                    </div>
                                </div>
                            </div>
								
                            </el-main>
                        </el-container>
                    </el-container>
@@ -202,22 +237,58 @@

            </el-tabs>
        </el-card>
        <Dialog ref="dialog"></Dialog>
    </el-main>
</template>

<script>
import pmsPng from '@/assets/pms.png'
import Dialog from './Dialog.vue'
import machinePng from '@/assets/machine.png'
export default {
    name: 'system',
    components: {
        Dialog
    },
    data() {
        return {
            machinePng,
            showGrouploading: false,
            options: [],
            activeName: '1',
            normal: '1',
            group: [],
            groupFilterText: '',
            apiObj: '',
            params: {},
            keyWord: '',
            type: '',
            statu: '1',
            types: [
                {
                    label: '所有',
                    value: ''
                },
                {
                    label: '机器',
                    value: '0'
                },
                {
                    label: '人工',
                    value: '1'
                },
            ],
            status: [
                {
                    label: '启用',
                    value: '1'
                },
                {
                    label: '停用',
                    value: '0'
                }
            ],
            previewData: {},
            // --------
            form: {
                groupTag: '',
@@ -376,24 +447,37 @@
        groupClick(node) {
            this.treeCheckedNode = node
        },
        search () {
            this.groupClick1(this.treeCheckedNode)
        },
        rowClick (data) {
            this.previewData = data
            console.log(data)
        },
        groupClick1(data) {
            console.log('-------', data)
            var params = {
                groupId: data.id,
                keyWord: '',
                status: 1,
                type: ''
                keyWord: this.keyWord,
                status: this.statu,
                type: this.type,
            }
            this.$refs.table.reload(params)

        },
        dataChange (res,data) {
			
            if (data.length > 0) {
                console.log(data[0], '>>>>>>>>')
                this.$refs.table.setCurrentRow(data[0])
                this.previewData = data[0]
            }else  {
                this.$refs.table.setCurrentRow()
                this.previewData = {}
            }
        },
        table_add() {
            var newRow = {
                key: "",
                value: "",
                title: "",
                isSet: true
            }
            this.setting.push(newRow)
            this.$refs.dialog.open()
        },
        table_edit(row) {
            if (row.isSet) {
@@ -402,16 +486,44 @@
                row.isSet = true
            }
        },
        table_del(row, index) {
            this.setting.splice(index, 1)
        table_del(row, index,type) {
            this.$API.workstation.deleteWork.delete({
                type,
                workstationIds:row.id
            }).then(() => {
                this.search()
            })
        },
    }
}
</script>

<style scoped>
<style lang="scss" scoped>
.show-info {
    list-style: none;
    font-size: 14px;
}
.preview-title {
    padding: 12px;
    margin-bottom: 14px;
    font-size: 16px;
}
.preview-content {
    font-size: 14px;
    display: flex;
    align-items: center;
    .img {
        width: 30%;
    }
    ul {
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        li {
            width: 50%;
            flex: 1 0 auto;
            margin-bottom: 10px;
        }
    }
}
</style>