update

gaoshp

2024-06-23 ad22765071f05ddf543dd531c019f35e9fca6682

update

 src/components/scFormTable/index.vue

@@ -4,12 +4,12 @@
 * @Author: sakuya
 * @Date: 2023å¹´2月9日12:32:26
 * @LastEditors: Sneed
 * @LastEditTime: 2024-04-17 22:09:27
 * @LastEditTime: 2024-06-23 22:43:27
-->

<template>
    <div class="sc-form-table" ref="scFormTable">
        <el-table :data="data" ref="table" border stripe>
        <el-table :data="data" ref="table" border stripe @row-click="rowClick">
            <el-table-column type="index" width="50" fixed="left">
                <template #header>
                    <el-button v-if="!hideAdd" type="primary" icon="el-icon-plus" size="small" circle
@@ -119,6 +119,9 @@
        //根据index删除
        deleteRow(index) {
            this.data.splice(index, 1)
        },
        rowClick(row) {
            this.$emit('row-click', row)
        }
    }
}

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

@@ -1,7 +1,7 @@
<!--
 * @Date: 2024-06-16 19:47:41
 * @LastEditors: Sneed
 * @LastEditTime: 2024-06-23 19:59:13
 * @LastEditTime: 2024-06-23 21:32:29
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/console/basic-data/tpm-data.vue
-->
<template>
@@ -42,7 +42,7 @@
                    </el-container>
                </el-tab-pane>
                <el-tab-pane label="机器类型" name="4">

                    <tpmComp2 />
                </el-tab-pane>
            </el-tabs>
        </el-card>
@@ -54,11 +54,13 @@
import Header from './tpm-data-header.vue'
import TpmData1 from './tpm-data1.vue'
import tpmComp1 from './tpmComp1.vue'
import tpmComp2 from './tpmComp2.vue'
export default {
    components: {
        Header,
        TpmData1,
        tpmComp1
        tpmComp1,
        tpmComp2
    },
    data() {
        return {

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

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,557 @@
<!--
 * @Date: 2024-06-23 21:32:05
 * @LastEditors: Sneed
 * @LastEditTime: 2024-06-23 23:45:09
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/console/basic-data/tpmComp2.vue
-->
<template>
    <el-conatiner>
        <el-header>
            <el-button type="primary" @click="addNew">新建</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>
        </el-header>
        <el-main>
            <scTable ref="table" @selection-change="handleSelectionChange" row-key="id" border :apiObj="apiObj" stripe
                @dataChange="dataChange">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="code" label="机器类型编号" />
                <el-table-column prop="name" label="机器类型名称" />
                <el-table-column prop="remark" label="备注" />
                <el-table-column prop="statusName" label="状态" />
                <el-table-column label="操作" fixed="right" align="left" width="170">
                    <template #default="scope">
                        <el-button-group>
                            <el-button text type="primary" size="small"
                                @click="viewCheck(scope.row, scope.$index)">点检项目</el-button>
                            <el-button text type="primary" size="small"
                                @click="viewM(scope.row, scope.$index)">保养项目</el-button>
                            <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>
        </el-main>
        <scDialog v-model="visibleCheck">
            <scFormTable ref="table1" v-model="tabledata" stripe hideDelete :addTemplate="addTemplate"
                @row-click="getCheckListChild">
                <el-table-column label="点检项目编号" prop="code">
                    <template #default="scope">
                        <el-select v-if="scope.row.isEdit" v-model="scope.row.checkProjectId" style="width: 100%;"
                            @change="changeCheck">
                            <el-option v-for="(item, index) in options" :key="index" :label="item.code"
                                :value="item.id">{{ item.code }}</el-option>
                        </el-select>
                        <span v-else>{{ scope.row.code }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="点检项目名称" prop="code">
                    <template #default="scope">
                        <el-select v-if="scope.row.isEdit" v-model="scope.row.checkProjectId" style="width: 100%;">
                            <el-option v-for="(item, index) in options" :key="index" :label="item.name"
                                :value="item.id">{{ item.name }}</el-option>
                        </el-select>
                        <span v-else>{{ scope.row.name }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="备注" prop="code">
                    <template #default="scope">
                        <el-select v-if="scope.row.isEdit" v-model="scope.row.checkProjectId" style="width: 100%;">
                            <el-option v-for="(item, index) in options" :key="index" :label="item.remark"
                                :value="item.id">{{ item.remark }}</el-option>
                        </el-select>
                        <span v-else>{{ scope.row.remark }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="点检周期" prop="code">
                    <template #default="scope">
                        <el-input-number v-model="scope.row.intervalTime" v-if="scope.row.isEdit" :min="0" />
                        <span v-else>{{ scope.row.intervalTime }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" prop="state" width="120">
                    <template #default="scope">
                        <el-button-group>
                            <el-button v-show="!scope.row.id || scope.row.isEdit" text type="primary" size="small"
                                @click="addCheck(scope.row)">保存</el-button>
                            <el-button v-show="!scope.row.id || scope.row.isEdit" text type="primary" size="small"
                                @click="cancelCheck(scope.row, scope.$index)">取消</el-button>
                            <el-popconfirm width="220" title="确定将选择的数据删除" @confirm="delCheck(scope.row)">
                                <template #reference>
                                    <el-button v-show="!scope.row.isEdit" text type="primary"
                                        size="small">删除</el-button>
                                </template>
                            </el-popconfirm>
                        </el-button-group>

                    </template>
                </el-table-column>
            </scFormTable>
            <p style="margin: 10px 0;">点检项</p>
            <el-table :data="tableDataList" style="width: 100%; margin-bottom: 20px" row-key="id" border
                default-expand-all>
                <el-table-column prop="name" label="点检项名称" />
                <el-table-column prop="valueType" label="数值类型" />
                <el-table-column prop="requirement" label="点检要求" />
                <el-table-column prop="standardValue" label="标准数值" />
            </el-table>
        </scDialog>
        <!-- ä¿å…»é¡¹ç›® -->
        <scDialog v-model="visibleMaintain">
            <scFormTable ref="table1" v-model="talbeDataM" stripe hideDelete :addTemplate="addTemplateM"
                @row-click="getMlistChild">
                <el-table-column label="保养项目编号" prop="code">
                    <template #default="scope">
                        <el-input v-if="scope.row.isEdit" v-model="scope.row.code"></el-input>
                        <span v-else>{{ scope.row.code }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="保养项目名称" prop="deviceTypeName">
                    <template #default="scope">
                        <el-input v-if="scope.row.isEdit" v-model="scope.row.deviceTypeName"></el-input>
                        <span v-else>{{ scope.row.deviceTypeName }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="保养周期（天）" prop="intervalTime">
                    <template #default="scope">
                        <el-input-number style="width: 120px" v-model="scope.row.intervalTime" v-if="scope.row.isEdit"
                            :min="0" />
                        <span v-else>{{ scope.row.intervalTime }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="保养预警提示（天）" prop="preWarningDays">
                    <template #default="scope">
                        <el-input-number style="width: 120px" v-model="scope.row.preWarningDays" v-if="scope.row.isEdit"
                            :min="0" />
                        <span v-else>{{ scope.row.preWarningDays }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="备注" prop="remark">
                    <template #default="scope">
                        <el-input v-if="scope.row.isEdit" v-model="scope.row.remark"></el-input>
                        <span v-else>{{ scope.row.remark }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" prop="state" width="120">
                    <template #default="scope">
                        <el-button-group>
                            <el-button v-show="!scope.row.id || scope.row.isEdit" text type="primary" size="small"
                                @click="addM(scope.row)">保存</el-button>
                            <el-button v-show="!scope.row.id || scope.row.isEdit" text type="primary" size="small"
                                @click="cancelCheck(scope.row, scope.$index)">取消</el-button>
                            <el-popconfirm width="220" title="确定将选择的数据删除" @confirm="delM(scope.row)">
                                <template #reference>
                                    <el-button v-show="!scope.row.isEdit" text type="primary"
                                        size="small">删除</el-button>
                                </template>
                            </el-popconfirm>
                        </el-button-group>

                    </template>
                </el-table-column>
            </scFormTable>
            <p style="margin: 10px 0">
                ä¿å…»é¡¹
                <el-button @click="addMC">添加</el-button>
            </p>
            <el-table :data="talbeDataMChild" style="width: 100%; margin-bottom: 20px" row-key="id" border
                default-expand-all>
                <el-table-column prop="itemCode" label="保养项编号" />
                <el-table-column prop="itemName" label="保养项名称" />
                <el-table-column prop="itemRequirement" label="保养要求" />
                <el-table-column prop="itemRemark" label="备注" />
                <el-table-column label="操作" prop="state" width="120">
                    <template #default="scope">
                        <el-button-group>
                            <el-popconfirm width="220" title="确定将选择的数据删除" @confirm="delMChild(scope.row)">
                                <template #reference>
                                    <el-button text type="primary" size="small">删除</el-button>
                                </template>
                            </el-popconfirm>
                        </el-button-group>

                    </template>
                </el-table-column>
            </el-table>
        </scDialog>
        <scDialog v-model="visibleAdd">
            <el-select v-model="itemId" style="width: 100%;">
                <el-option v-for=" (item, index) in options1" :key="index" :label="item.code" :value="item.id">{{
                    item.code
                    }}</el-option>
            </el-select>
            <template #footer>
                <div>
                    <el-button type="primary" @click="saveAdd">确定</el-button>
                </div>
            </template>

        </scDialog>
    </el-conatiner>
</template>

<script>
import importTable from '@/layout/components/importTable.vue'
export default {
    components: {
        importTable,
    },
    data() {
        return {
            params: {
                keyWord: '',
                status: 1,
            },
            exportUrlTpl: '/api/blade-cps/device-types/export/template',
            uploadUrl: '/api/blade-cps/device-types/excel/import',
            visible: false,
            config: {
                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
                    }
                ]
            },
            rules: {
                code: [
                    { required: true, message: '请输入' },
                ],
                name: [
                    { required: true, message: '请输入' },
                ]
            },
            form: {},
            apiObj: {
                get: async (data) => {
                    let params = {
                        ...data,
                        ...this.params
                    }
                    return await this.$HTTP.get(`/api/blade-cps/device-types/page`, {}, { params }).then(res => {
                        res.data.records = res?.data?.records.map(v => {
                            return {
                                ...v,
                                statusName: v.status ? '启用' : '禁用'
                            }
                        })
                        return res
                    })
                }
            },
            selection: [],
            visibleCheck: false,
            selectRow: {},
            options: [],
            tabledata: [],
            addTemplate: {
                checkProjectId: '',
                intervalTime: '',
                isEdit: true
            },
            tableDataList: [],
            // baoyang
            visibleMaintain: false,
            addTemplateM: {
                isEdit: true,
            },
            talbeDataM: [],
            talbeDataMChild: [],
            options1: [],
            visibleAdd: false,
            itemId: '',
            selectMRow: {}
        }
    },
    created() {
        this.init()
    },
    methods: {
        init() {
            this.$HTTP.get(`/api/blade-cps/check-project/page?key=&current=1&size=-1`).then(res => {
                this.options = res.data.records
            })
            this.$HTTP.get(`/api/blade-cps/maintain-item/list?keyWord=`).then(res => {
                this.options1 = res.data
            })
        },
        handleSelectionChange(selection) {
            this.selection = selection
        },
        addNew() {
            this.config.formItems[0].disabled = false
            this.form = {
                status: 1,
            }
            this.visible = true
        },
        exportData() {
            this.$HTTP.post(`/api/blade-cps/device-types/excel/export`, {}, { params: this.params }).then(res => {
                if (res.success) {
                    window.open(res.data.link)
                }
            })
        },
        search() {
            this.$refs.table.reload()
        },
        table_del(selection, type) {
            this.$HTTP.delete(`/api/blade-cps/device-types?type=${type}`, {}, {
                data: {
                    idList: selection.map(v => v.id),
                }
            }).then(res => {
                if (res.success) {
                    this.search()
                } else {
                    this.$message.error(res.msg)
                }
            })
        },
        table_edit(row) {
            this.config.formItems[0].disabled = true
            this.form = {
                ...row
            }
            this.visible = true
        },
        submit() {
            if (!this.form.id) {
                this.$HTTP.post(`/api/blade-cps/device-types`, this.form).then(res => {
                    if (res.success) {
                        this.visible = false
                        this.search()
                    }
                })
            } else {
                this.$HTTP.put(`/api/blade-cps/device-types`, this.form).then(res => {
                    if (res.success) {
                        this.visible = false
                        this.search()
                    }
                })
            }

        },
        viewCheck(row) {
            this.selectRow = row

            this.getCheckList().then(res => {
                this.visibleCheck = true
                this.tableDataList = []
            })
        },
        getCheckList() {
            let row = this.selectRow
            return this.$HTTP.get(`/api/blade-cps/device-type-check-projects/page?id=${row.id}`).then(res => {
                if (res.success) {
                    this.tabledata = res.data
                    this.getCheckListChild(this.tabledata[0])
                } else {
                    this.tabledata = []
                }
            })
        },
        getCheckListChild(row) {
            if (!row?.checkProjectId) return this.tableDataList = []
            this.$HTTP.get(`/api/blade-cps/check-item/list?projectId=${row.checkProjectId}`).then(res => {
                if (res.success) {
                    this.tableDataList = res.data
                } else {
                    this.tableDataList = []
                }
            })
        },
        changeCheck(val) {
            this.getCheckListChild({ checkProjectId: val })
        },
        cancelCheck(row, index) {
            row.isEdit = false
            this.tabledata.splice(index, 1)
        },
        delCheck(row) {
            this.$HTTP.delete(`/api/blade-cps/device-type-check-projects`, {}, {
                data: {
                    ids: [row.id]
                }
            }).then(res => {
                if (res.success) {
                    this.getCheckList()
                }
            })
        },
        addCheck(row) {
            this.$HTTP.post(`/api/blade-cps/device-type-check-projects`, {
                deviceTypeId: this.selectRow.id,
                checkProjectId: [row.checkProjectId],
                intervalTime: row.intervalTime
            }).then(res => {
                if (res.success) {
                    this.getCheckList()
                } else {
                    this.$message.error(res.msg)
                }
            })
        },
        // ä¿å…»
        viewM(row) {
            this.selectRow = row
            this.getMList().then(res => {
                this.visibleMaintain = true
                this.tableDataList = []
            })
        },
        getMList() {
            return this.$HTTP.get(`/api/blade-cps/maintain-project/list?deviceTypeId=${this.selectRow.id}`).then(res => {
                if (res.success) {
                    this.talbeDataM = res.data
                    this.getMlistChild(this.talbeDataM?.[0])
                } else {
                    this.talbeDataM = []
                }
            })
        },
        getMlistChild(row) {
            this.selectMRow = row
            if (!row?.id) return this.talbeDataMChild = []
            this.$HTTP.get(`/api/blade-cps/maintain-project-item/item-list?projectId=${row.id}`).then(res => {
                if (res) {
                    this.talbeDataMChild = res
                } else {
                    this.talbeDataMChild = []
                }
            })
        },
        // 
        addM(row) {
            this.$HTTP.post(`/api/blade-cps/maintain-project/create-maintain-project`, {
                code: row.code,
                deviceTypeId: this.selectRow.id,
                deviceTypeName: row.deviceTypeName,
                name: row.deviceTypeName,
                intervalTime: row.intervalTime,
                preWarningDays: row.preWarningDays,
                remark: row.remark
            }).then(res => {
                if (res.success) {
                    this.getMList()
                } else {
                    this.$message.error(res.msg)
                }
            })
        },
        delM(row) {
            this.$HTTP.post(`/api/blade-cps/maintain-project/delete-maintain-project`, {}, {
                params: {
                    id: row.id
                }
            }).then(res => {
                if (res.success) {
                    this.getMList()
                }
            })
        },

        delMChild(row) {
            this.$HTTP.post(`/api/blade-cps/maintain-project-item/delete-maintain-project-item?id=${row.id}`).then(res => {
                if (res.success) {
                    this.getMlistChild(this.selectMRow)
                } else {
                    this.$message.errror(res.msg)
                }
            })
        },
        addMC() {
            this.itemId = ''
            this.visibleAdd = true
        },
        saveAdd() {
            this.$HTTP.post(`/api/blade-cps/maintain-project-item/create-maintain-project-item`, {
                itemId: this.itemId,
                projectId: this.selectMRow.id
            }).then(res => {
                if (res.success) {
                    this.visibleAdd = false
                    this.getMlistChild(this.selectMRow)
                } else {
                    this.$message.errror(res.msg)
                }
            })
        }
    },
}
</script>

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