1

lzhe

2024-06-21 9c094a1fe3e1ae3dadef6433f8401818fe2b8304

 src/views/console/workstation/Dialog.vue

@@ -7,123 +7,138 @@
                    基础信息
                </el-col>
                <el-col :span="12">
                    <el-form-item label="工位编号" prop="userName">
                        <el-input style="width: 240px" v-model="form.userName" placeholder="工位编号" clearable></el-input>
                    <el-form-item label="工位编号" prop="code">
                        <el-input style="width: 240px" :disabled="form.id" v-model="form.code" placeholder="工位编号"
                            clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="工位名称" prop="userName">
                        <el-input style="width: 240px" v-model="form.userName" placeholder="工位名称" clearable></el-input>
                    <el-form-item label="工位名称" prop="name">
                        <el-input style="width: 240px" v-model="form.name" placeholder="工位名称" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="工位类型" prop="userName">
                        <el-select v-model="type" style="width: 240px">
                    <el-form-item label="工位类型" prop="type">
                        <el-select v-model="form.type" style="width: 240px" :disabled="form.id">
                            <el-option v-for="item in options.types" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="所属工位组" prop="userName">
                        <el-tree-select v-model="form.userName" :data="options.group" :render-after-expand="false"
                            style="width: 240px" />
                        <!-- <el-select v-model="type" style="width: 240px">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select> -->
                    <el-form-item label="所属工位组" prop="groupName">
                        <el-tree-select @node-click="nodeClick" v-model="form.groupName" :data="options.group"
                            :check-on-click-node="true" style="width: 240px" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="状态" prop="userName">
                        <el-select v-model="type" style="width: 240px">
                            <el-option v-for="item in options.status" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    <el-form-item label="状态" prop="status">
                        <el-switch v-model="form.status" :active-value="1" :inactive-value="0" />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="工位图片" prop="avatar">
                        <sc-upload v-model="form.avatar" title="工位图片"></sc-upload>
                        <scUpload v-model="form.avatar" title="工位图片"></scUpload>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="生产日历" prop="userName">
                        <el-select v-model="type" style="width: 240px">
                    <el-form-item label="生产日历" prop="calendarCode">
                        <el-select v-model="form.calendarCode" style="width: 240px">
                            <el-option v-for="item in options.calendarList" :key="item.id" :label="item.name"
                                :value="item.id" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="24" style="padding:12px 0;">
                <el-col :span="24" style="padding:12px 0;" v-if="form.type == 0">
                    机器信息
                </el-col>

                <el-col :span="12">
                    <el-form-item label="选择机器" prop="userName">
                        <!-- <el-select v-model="type" style="width: 240px">
                            <el-option v-for="item in options.linkWays" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select> -->
                        <el-radio-group v-model="form.userName">
                            <el-radio v-for="item in options.linkWays" :key="item.value" :value="item.value">{{item.label}}</el-radio>
                <el-col :span="12" v-if="form.type == 0 && !form.id">
                    <el-form-item label="选择机器" prop="linkWay">
                        <el-radio-group v-model="form.linkWay">
                            <el-radio v-for="item in options.linkWays" :key="item.value"
                                :label="item.value">{{ item.label }}</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="机器编号" prop="userName">
                        <el-input style="width: 240px" v-model="form.userName" placeholder="机器编号" clearable></el-input>
                <el-col :span="12" v-if="(form.type == 0 && form.linkWay == 0) || form.id">
                    <!-- machineCode -->
                    <el-form-item label="机器编号" prop="machineId">
                        <!-- <el-input style="width: 240px" v-model="form.machineId" placeholder="机器编号" clearable></el-input> -->
                        <el-select v-if="!form.id" v-model="form.machineId" style="width: 240px" @change="change" clear
                            filterable>
                            <el-option v-for="item in options.listnoband" :key="item.id" :label="item.machineName"
                                :value="item.id">
                                {{ `${item?.machineCode}-${item?.machineName}-${item?.brand}` }}</el-option>
                        </el-select>
                        <el-input v-if="form.id" :disabled="form.id" v-model="form.machineName"></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="userName">
                        <el-select v-model="type" style="width: 240px">
                    <el-form-item label="工种" prop="deviceType">
                        <el-select v-model="form.deviceType" style="width: 240px">
                            <el-option v-for="item in options.work_type" :key="item.dictKey" :label="item.dictValue"
                                :value="item.dictKey" />
                                :value="item.dictKey - 0" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="加工属性" prop="userName">
                        <el-select v-model="type" style="width: 240px">
                            <el-option v-for="item in options.machining_type" :key="item.dictKey" :label="item.dictValue"
                                :value="item.dictKey" />
                    <el-form-item label="加工属性" prop="properties">
                        <el-select v-model="form.properties" style="width: 240px">
                            <el-option v-for="item in options.machining_type" :key="item.dictKey"
                                :label="item.dictValue" :value="item.dictKey" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="程序传输方式" prop="userName">
                        <el-select v-model="type" style="width: 240px">
                            <el-option   label="FTP"  value="1" />
                            <el-option   label="串口"  value="" />
                    <el-form-item label="程序传输方式" prop="transmissionMethod">
                        <el-select v-model="form.transmissionMethod" style="width: 240px">
                            <el-option label="FTP" :value="1" />
                            <el-option label="串口" :value="2" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="FTP目录" prop="userName">
                        <el-select v-model="type" style="width: 240px">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                    <el-form-item label="FTP目录" prop="ftpDirectoryType">
                        <el-select v-model="form.ftpDirectoryType" style="width: 240px">
                            <el-option v-for="item in options.ftpDirectoryType" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="工作台" prop="userName">
                        <el-select v-model="type" style="width: 240px">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value" />
                <el-col :span="12" v-if="form.ftpDirectoryType == 1">
                    <el-form-item label="关联目录" prop="directoryId">
                        <el-select v-model="form.directoryId" style="width: 240px">
                            <el-option v-for="item in options.directorys" :key="item.id" :label="item.name"
                                :value="item.id" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <!-- <el-form-item label="工作台" prop="workbenchVOList"> -->

                    <!-- </el-form-item> -->
                    <span>工作台</span>

                </el-col>
                <el-col style="margin-bottom: 14px;">
                    <ul class="workbranch">
                        <li v-for="item in form.workbenchVOList">
                            <span>{{ item.sort }}</span>
                            <el-input v-model="item.name" style="width: 200px"></el-input>
                        </li>
                    </ul>
                    <el-button style="margin-left: 50px;margin-top: 8px" @click="addWork">添加工作台</el-button>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="数据权限" prop="userName">
                        <el-select v-model="type" style="width: 240px">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    <el-form-item label="数据权限" prop="createDept">
                        <el-tree-select clearable @node-click="nodeClickTree" v-model="form.createDept" :data="tree"
                            :check-on-click-node="true" style="width: 240px">
                            <template #default="{ data: { title } }">
                                {{ title }}</template>
                        </el-tree-select>
                    </el-form-item>
                </el-col>
            </el-row>
@@ -155,7 +170,10 @@
                calendarList: this.calendarList,
                linkWays: this.linkWays,
                work_type: this.work_type,
                machining_type: this.machining_type
                machining_type: this.machining_type,
                listnoband: this.listnoband,
                directorys: this.directorys,
                ftpDirectoryType: this.ftpDirectoryType
            }
        }
    },
@@ -172,67 +190,82 @@
            isSaveing: false,
            //表单数据
            form: {
                id: "",
                userName: "",
                avatar: "",
                name: "",
                dept: "",
                group: []
                id: '',
                code: '',
                name: '',
                type: '',
                groupName: '',
                status: '',
                avatar: '',
                calendarCode: '',
                linkWay: '',
                machineId: '',
                machineCode: '',
                machineName: '',
                deviceType: '',
                properties: '',
                transmissionMethod: '',
                ftpDirectoryType: '',
                workbenchVOList: [],
                createDept: '',
            },
            //验证规则
            rules: {
                avatar: [
                    { required: true, message: '请上传头像' }
                ],
                userName: [
                    { required: true, message: '请输入登录账号' }
                code: [
                    { required: true, message: '必填' }
                ],
                name: [
                    { required: true, message: '请输入真实姓名' }
                    { required: true, message: '必填' }
                ],
                password: [
                    { required: true, message: '请输入登录密码' },
                    {
                        validator: (rule, value, callback) => {
                            if (this.form.password2 !== '') {
                                this.$refs.dialogForm.validateField('password2');
                            }
                            callback();
                        }
                    }
                type: [
                    { required: true, message: '必填' }
                ],
                password2: [
                    { required: true, message: '请再次输入密码' },
                    {
                        validator: (rule, value, callback) => {
                            if (value !== this.form.password) {
                                callback(new Error('两次输入密码不一致!'));
                            } else {
                                callback();
                            }
                        }
                    }
                groupName: [
                    { required: true, message: '必填' }
                ],
                dept: [
                    { required: true, message: '请选择所属部门' }
                status: [
                    { required: true, message: '必填' }
                ],
                group: [
                    { required: true, message: '请选择所属角色', trigger: 'change' }
                ]
                linkWay: [
                    { required: true, message: '必填' }
                ],
                machineId: [
                    { required: true, message: '必填' }
                ],
                directoryId: [
                    { required: true, message: '必填' }
                ],
            },
            //所需数据选项
            calendarList: [],
            work_type: [],
            machining_type: [],
            listnoband: [],
            directorys: [],
            ftpDirectoryType: [
                {
                    label: '不关联目录',
                    value: 0
                },
                {
                    label: '关联目录',
                    value: 1
                },
                {
                    label: '创建同名目录',
                    value: 2
                },
            ],
            linkWays: [
                {
                    label: '关联机器',
                    value: '0'
                    value: 0
                }, {
                    label: '创建同名机器',
                    value: '1'
                    value: 1
                }
            ]
            ],
            tree: []
        }
    },
    created() {
@@ -245,13 +278,40 @@
        this.$API.system.dic.getDic.get({ code: 'machining_type' }).then(res => {
            this.machining_type = res.data
        })
        this.$API.workstation.getlistnoband.get().then(res => {
            this.listnoband = res.data
        })
        this.$HTTP.get(`/api/blade-system/data-scope-manager/tree`).then(res => {
            this.tree = res.data.map(item => {
                return {
                    ...item,
                    label: item.title
                }
            })
        })
    },
    methods: {
        //显示
        open(mode = 'add', params) {
            this.mode = mode;
            this.visible = true;
            this.params = params

            if (params) {
                Object.keys(this.form).forEach(key => {
                    this.form[key] = params[key]
                })
                this.$HTTP.get(`/api/blade-cps/workstation/get?workstationId=${params.id}`).then(res => {
                    this.form = res?.data
                    this.$HTTP.get(`/api/blade-cps/workstation-workbench/listWorkbench?workstationId=${params.id}`).then(res => {
                        this.form.workbenchVOList = res?.data?.workstationList || []
                    })
                })
            } else {
                this.form.id = ''
                Object.keys(this.form).forEach(key => {
                    this.form[key] = ''
                })
            }
            return this
        },
        //表单提交方法
@@ -259,7 +319,7 @@
            this.$refs.dialogForm.validate(async (valid) => {
                if (valid) {
                    this.isSaveing = true;
                    var res = await this.$API.demo.post.post(this.form);
                    var res = await this.$API.workstation.add.post(this.form);
                    this.isSaveing = false;
                    if (res.code == 200) {
                        this.$emit('success', this.form, this.mode)
@@ -279,14 +339,71 @@
            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)
        },
        change(id) {
            let row = this.options.listnoband.find(v => v.id == id)
            if (!row) {
                this.form.machineCode = ''
                this.form.machineId = ''
                this.form.machineName = ''

            } else {
                this.form.machineCode = row.machineCode
                this.form.machineId = row.id
                this.form.machineName = row.machineName
            }
            this.$HTTP.get(`/api/blade-dnc/ftp-director/get-machine-of-workstation-ftp?id=${this.form.machineId}`).then(res => {
                this.directorys = res.data
            })
            console.log(row)
        },
        nodeClick(node) {
            console.log(node)
            if (node.parentId == 0) return
            this.$nextTick(() => {
                this.form.groupId = node.id
                this.form.groupName = node.name
            })
        },
        nodeClickTree(node) {
            this.$nextTick(() => {
                this.form.createDept = node.id
            })
        },
        addWork() {
            this.form.workbenchVOList.push({
                sort: this.form.workbenchVOList.length + 1,
                name: ''
            })
        }
    }
}
</script>

<style></style>
<style lang="scss" scoped>
.workbranch {
    list-style: none;
    padding-left: 50px;

    li {
        margin-top: 8px;

        span {
            display: inline-block;
            width: 25px;
            height: 25px;
            line-height: 25px;
            text-align: center;
            border-radius: 50%;
            background: #ccc;
            margin-right: 8px;
        }


    }
}
</style>