update

gaoshp

2024-06-23 2634869dd5db5b0391dc8817b464c830275fc15e

update

 src/views/console/basic-data/tpm-data-header.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,153 @@
<!--
 * @Date: 2024-06-16 19:51:01
 * @LastEditors: Sneed
 * @LastEditTime: 2024-06-23 19:53:09
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/console/basic-data/tpm-data-header.vue
-->
<template>
    <div style="width: 100%;display: flex;">
        <el-button type="primary" @click="addNew">新建</el-button>
        <!-- <el-button type="primary">导入</el-button> -->
        <import-table style="margin:0 8px" :exportUrl="exportUrlTpl" :uploadUrl="uploadUrl"></import-table>
        <el-button type="primary" @click="exportData">导出</el-button>
        <el-popconfirm width="220" cancel-button-text="停用" confirm-button-text="删除"
            title="删除数据会影响已关联的业务 ,若您想在已关联的业务中依然显示这些数据, æ‚¨å¯ä»¥é€‰æ‹© åœç”¨ æ“ä½œã€‚停用后此数据将不能再被新业务使用。"
            @confirm="table_del(selection, '0')" @cancel="table_del(selection, '1')">
            <template #reference>
                <el-button :disabled="selection.length == 0" type="danger" plain icon="el-icon-delete"></el-button>
            </template>
        </el-popconfirm>
        <el-select v-model="params.status" placeholder="请选择" style="width: 240px;margin-left: auto;">
            <template #prefix><span style="margin-right: 6px;">状态</span></template>
            <el-option key="0" label="停用" :value="0" />
            <el-option key="1" label="启用" :value="1" />
        </el-select>
        <el-input style="width: 240px;margin-left: 8px;" v-model="params.keyWord" placeholder="请输入检索内容"></el-input>
        <el-button @click="search" style="margin-left: 8px;" type="primary" icon="el-icon-search"></el-button>
        <scDialog v-model="visible">
            <scForm v-if="visible" ref="form" :config="config" :rules="rules" v-model="form" @submit="submit">
            </scForm>
        </scDialog>
    </div>
</template>

<script>
import importTable from '@/layout/components/importTable.vue'
export default {
    components: {
        importTable,
    },
    props: {
        exportUrl: {
            type: String,
        },
        uploadUrl: {
            type: String,
        },
        exportUrlTpl: {
            type: String,
        },
        modelValue: {
            type: Object,
            default: () => {
                return {}
            }
        },
        rules: {
            type: Object,
            default: () => {
                return {}
            }
        },
        config: {
            type: Object,
            default() {
                return {}
            }
        },
        formData: {
            type: Object,
            default() {
                return {}
            }
        },
        selection: {
            type: Array,
            default() {
                return []
            }
        }
    },
    watch: {
        modelValue(val) {
            this.params = val || {}
        },
        params(val) {
            this.$emit('update:modelValue', val)
        },
        visible(val) {
            if (val) {
                // this.form = {
                //     ...this.formData
                // }
                this.$refs?.form?.resetFields()
            }
        },
        formData() {
            this.form = {
                ...this.formData
            }
        }
    },
    data() {
        return {
            visible: false,
            params: {
                status: 1,
                keyWord: ''
            },
            addCon: {

            },
            form: {
            },
        }
    },
    mounted() {
        this.params = this.modelValue
    },
    methods: {
        search() {
            this.$emit('search', this.params)
        },
        edit(row) {
            this.form = { ...row }
            console.log(row, '____')
            this.visible = true
        },
        addNew() {
            this.form = {}
            this.config.formItems.forEach(v => {
                v.disabled = false
            })
            this.visible = true
        },
        submit() {
            this.$emit('submit', this.form)
            this.visible = false
        },
        table_del(selection, type) {
            this.$emit('del', selection, type)
        },
        exportData() {
            this.$HTTP.post(this.exportUrl, this.params).then(res => {
                if (res.success) {
                    window.open(res.data.link)
                }
            })
        }
    },
}
</script>

<style lang="scss" scoped></style>

 src/views/console/basic-data/tpm-data.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,398 @@
<!--
 * @Date: 2024-06-16 19:47:41
 * @LastEditors: Sneed
 * @LastEditTime: 2024-06-23 19:54:17
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/console/basic-data/tpm-data.vue
-->
<template>
    <el-main style="height: 100%;">
        <el-card shadow="never" style="height: 100%;">
            <el-tabs v-model="activeName" type="card" class="custom-tabs" @tab-click="handleClick">
                <el-tab-pane label="保养项" name="1">
                    <el-container>
                        <el-header>
                            <Header key="1" ref="header1" :config="config1" v-model="params" :rules="rules1"
                                @search="search1" @submit="submit1" :formData="form1" :selection="selection1"
                                exportUrlTpl="/api/blade-cps/maintain-item/export/template"
                                exportUrl="/api/blade-cps/maintain-item/export"
                                uploadUrl="/api/blade-cps/maintain-item/import-maintain-item" @del="del1" />
                        </el-header>
                        <el-main>
                            <TpmData1 key="1" ref="tpmData1" :apiObj="apiObj1" :params="params" :cols="cols1"
                                @selection-change="handleSelectionChange1" @del="del1" @edit="edit1" />
                        </el-main>
                    </el-container>
                </el-tab-pane>
                <el-tab-pane label="点检项目" name="2">

                </el-tab-pane>
                <el-tab-pane label="故障类型" name="3">
                    <el-container>
                        <el-header>
                            <Header key="2" ref="header2" :config="config2" v-model="params" :rules="rules2"
                                @search="search2" @submit="submit2" :formData="form2" :selection="selection2"
                                exportUrlTpl="/api/blade-cps/malfunction/export-template"
                                exportUrl="/api/blade-cps/malfunction/export-malfunctionType"
                                uploadUrl="/api/blade-cps/malfunction/import-malfunctionType" @del="del2" />
                        </el-header>
                        <el-main>
                            <TpmData1 key="2" ref="tpmData2" :apiObj="apiObj2" :params="params" :cols="cols2"
                                @selection-change="handleSelectionChange2" @del="del2" @edit="edit2" />
                        </el-main>
                    </el-container>
                </el-tab-pane>
                <el-tab-pane label="机器类型" name="4">

                </el-tab-pane>
            </el-tabs>
        </el-card>
    </el-main>

</template>

<script>
import Header from './tpm-data-header.vue'
import TpmData1 from './tpm-data1.vue'
export default {
    components: {
        Header,
        TpmData1
    },
    data() {
        return {
            activeName: '1',
            params: {
                keyWord: '',
                status: 1
            },
            rules1: {
                code: [
                    { required: true, message: '请输入' },
                ],
                name: [
                    { required: true, message: '请输入' },
                ]
            },
            config1: {
                labelWidth: 120,
                formItems: [
                    {
                        component: 'input',
                        label: '保养项编号',
                        name: 'code',
                        options: {
                            placeholder: '',
                            maxlength: 100,
                        }
                    },
                    {
                        component: 'input',
                        label: '保养项名称',
                        name: 'name',
                        options: {
                            multiple: false,
                            data: []
                        },
                        disabled: false
                    },
                    {
                        component: 'input',
                        label: '保养要求',
                        name: 'requirement',
                        type: 'textarea',
                        options: {
                            multiple: false,
                            data: []
                        },
                        disabled: false
                    },
                    {
                        component: 'input',
                        label: '备注',
                        name: 'remark',
                        type: 'textarea',
                        options: {
                            multiple: false,
                            data: []
                        },
                        disabled: false
                    },
                    {
                        component: 'select',
                        label: '状态',
                        name: 'status',
                        options: {
                            multiple: false,
                            items: [
                                {
                                    value: 1,
                                    label: '启用'
                                },
                                {
                                    value: 0,
                                    label: '停用'
                                },
                            ]
                        },
                        disabled: false
                    }
                ]
            },
            cols1: [
                {
                    prop: 'code',
                    label: '保养项编号'
                },
                {
                    prop: 'name',
                    label: '保养项名称'
                },
                {
                    prop: 'requirement',
                    label: '保养要求'
                },
                {
                    prop: 'remark',
                    label: '备注'
                },
                {
                    prop: 'statusName',
                    label: '状态'
                },
            ],
            apiObj1: {
                get: async (data) => {
                    let params = {
                        ...data,
                        ...this.params
                    }
                    return await this.$HTTP.get(`/api/blade-cps/maintain-item/page`, {}, { params }).then(res => {
                        res.data.records = res?.data?.records.map(v => {
                            return {
                                ...v,
                                statusName: v.status ? '启用' : '禁用'
                            }
                        })
                        return res
                    })
                }
            },
            form1: {
                status: 1,
            },
            apiObj2: {
                get: async (data) => {
                    let params = {
                        ...data,
                        ...this.params,
                        malfunctionTypeCodeOrName: this.params.keyWord
                    }
                    return await this.$HTTP.get(`/api/blade-cps/malfunction/page`, {}, { params }).then(res => {
                        res.data.records = res?.data?.records.map(v => {
                            return {
                                ...v,
                                statusName: v.status ? '启用' : '禁用'
                            }
                        })
                        return res
                    })
                }
            },
            selection1: [],
            rules2: {
                code: [
                    { required: true, message: '请输入' },
                ],
                name: [
                    { required: true, message: '请输入' },
                ]
            },
            config2: {
                labelWidth: 120,
                formItems: [
                    {
                        component: 'input',
                        label: '故障类型编号',
                        name: 'code',
                        options: {
                            placeholder: '',
                            maxlength: 100,
                        }
                    },
                    {
                        component: 'input',
                        label: '故障类型名称',
                        name: 'name',
                        options: {
                            multiple: false,
                            data: []
                        },
                        disabled: false
                    },
                    {
                        component: 'input',
                        label: '备注',
                        name: 'remark',
                        type: 'textarea',
                        options: {
                            multiple: false,
                            data: []
                        },
                        disabled: false
                    },
                    {
                        component: 'select',
                        label: '状态',
                        name: 'status',
                        options: {
                            multiple: false,
                            items: [
                                {
                                    value: 1,
                                    label: '启用'
                                },
                                {
                                    value: 0,
                                    label: '停用'
                                },
                            ]
                        },
                        disabled: false
                    }
                ]
            },
            cols2: [
                {
                    prop: 'code',
                    label: '故障类型编号'
                },
                {
                    prop: 'name',
                    label: '故障类型名称'
                },
                {
                    prop: 'remark',
                    label: '备注'
                },
                {
                    prop: 'statusName',
                    label: '状态'
                },
            ],
            form2: {
                status: 1,
            },
            selection2: []
        }
    },
    methods: {
        search1() {
            this.$refs?.tpmData1.query(this.params)
        },
        handleSelectionChange1(selection) {
            this.selection1 = selection
        },
        submit1(val) {
            console.log(val)
            if (!val.id) {
                this.$HTTP.post(`/api/blade-cps/maintain-item/create-maintain-item`, val).then(res => {
                    if (res.success) {
                        this.search1()
                    } else {
                        this.$message.error(res.msg)
                    }
                })
            } else {
                this.$HTTP.post(`/api/blade-cps/maintain-item/edit-maintain-item`, val).then(res => {
                    if (res.success) {
                        this.search1()
                    } else {
                        this.$message.error(res.msg)
                    }
                })
            }
        },
        del1(selection, type) {
            this.$HTTP.post(`/api/blade-cps/maintain-item/delete-maintain-item`, {}, {
                params: {
                    ids: selection.map(v => v.id).toString(),
                    type
                }
            }).then(res => {
                if (res.success) {
                    this.search1()
                } else {
                    this.$message.error(res.msg)
                }
            })
        },
        edit1(row) {
            this.config1.formItems[0].disabled = true
            this.config1.formItems[1].disabled = true
            // this.form1 = { ...row }
            this.$refs?.header1.edit(row)
        },
        edit2(row) {
            this.config2.formItems[0].disabled = true
            this.config2.formItems[1].disabled = true
            this.form2 = { ...row }
            this.$refs?.header2.edit(row)
        },
        search2() {
            this.$refs?.tpmData2.query(this.params)
        },
        handleSelectionChange2(selection) {
            this.selection1 = selection
        },
        submit2(val) {
            console.log(val)
            // if (!val.id) {
            this.$HTTP.post(`/api/blade-cps/malfunction/save`, val).then(res => {
                if (res.success) {
                    this.search2()
                } else {
                    this.$message.error(res.msg)
                }
            })
            // }
            // else {
            //     this.$HTTP.post(`/api/blade-cps/malfunction/save`, val).then(res => {
            //         if (res.success) {
            //             this.search2()
            //         } else {
            //             this.$message.error(res.msg)
            //         }
            //     })
            // }
        },
        del2(selection, type) {
            this.$HTTP.delete(`/api/blade-cps/malfunction/delete`, {}, {
                params: {
                    malfunctionTypeIds: selection.map(v => v.id).toString(),
                    type
                }
            }).then(res => {
                if (res.success) {
                    this.search2()
                } else {
                    this.$message.error(res.msg)
                }
            })
        }
    },
}
</script>

<style lang="scss">
.custom-tabs {
    height: 100%;
}

.custom-tabs .el-tabs__content {
    height: calc(100% - 40px);
}

.custom-tabs .el-tab-pane {
    height: 100%;
}
</style>

 src/views/console/basic-data/tpm-data1.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,103 @@
<!--
 * @Date: 2024-06-23 09:25:40
 * @LastEditors: Sneed
 * @LastEditTime: 2024-06-23 19:43:23
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/console/basic-data/tpm-data1.vue
-->
<template>
    <div>
        <scTable :ref="'table' + key" @selection-change="handleSelectionChange" row-key="id" border :apiObj="apiObj"
            stripe @dataChange="dataChange">
            <el-table-column type="selection" width="55" />
            <el-table-column :prop="item.prop" :label="item.label" :key="item.prop" v-for="item in cols">
            </el-table-column>
            <el-table-column label="操作" fixed="right" align="left" width="160">
                <template #default="scope">
                    <el-button-group>
                        <el-button text type="primary" size="small"
                            @click="table_edit(scope.row, scope.$index)">编辑</el-button>
                        <el-popconfirm width="220" cancel-button-text="停用" confirm-button-text="删除"
                            title="删除数据会影响已关联的业务 ,若您想在已关联的业务中依然显示这些数据, æ‚¨å¯ä»¥é€‰æ‹© åœç”¨ æ“ä½œã€‚停用后此数据将不能再被新业务使用。"
                            @confirm="table_del([scope.row], '0')" @cancel="table_del([scope.row], '1')">
                            <template #reference>
                                <el-button type="danger" text size="small">删除</el-button>
                            </template>
                        </el-popconfirm>
                    </el-button-group>
                </template>
            </el-table-column>
        </scTable>
    </div>
</template>

<script>
export default {
    props: {
        key: {
            type: String
        },
        params: {
            type: Object,
            default() {
                return {
                    keyWord: '',
                    status: 1
                }
            }
        },
        cols: {
            type: Array,
            default() {
                return []
            }
        },
        apiObj: {
            type: Object,
            default() {
                return {}
            }
        }
    },
    data() {
        return {
            // apiObj: {
            //     get: async (data) => {
            //         let params = {
            //             ...data,
            //             ...this.params
            //         }
            //         return await this.$HTTP.get(`/api/blade-cps/maintain-item/page`, {}, { params }).then(res => {
            //             res.data.records = res?.data?.records.map(v => {
            //                 return {
            //                     ...v,
            //                     statusName: v.status ? '启用' : '禁用'
            //                 }
            //             })
            //             return res
            //         })
            //     }
            // }
        }
    },
    methods: {
        query() {
            this.$refs?.[`table${this.key}`]?.reload()
        },
        handleSelectionChange(val) {
            this.$emit('selection-change', val)
        },
        dataChange() {

        },
        table_edit(row) {
            console.log(row, 'eeeeeee')
            this.$emit('edit', { ...row })
        },
        table_del(selection, type) {
            this.$emit('del', selection, type)
        }
    },
}
</script>

<style lang="scss" scoped></style>