1

lzhe

2024-06-03 a786409d7f6769f43c107159dd84faf4a2927a9a

 src/views/console/basic-data/material-warehousing-data/material-infoComp2.vue

@@ -1,37 +1,225 @@
<!--
 * @Date: 2024-05-08 21:29:54
 * @Date: 2024-05-08 21:29:53
 * @LastEditors: Sneed
 * @LastEditTime: 2024-05-08 21:29:59
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/console/basic-data/material-warehousing-data/material-info copy 2.vue
-->
<!--
 * @Date: 2024-05-08 21:29:54
 * @LastEditors: Sneed
 * @LastEditTime: 2024-05-08 21:29:58
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/console/basic-data/material-warehousing-data/material-info copy 2.vue
 * @LastEditTime: 2024-05-09 20:55:54
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/console/basic-data/material-warehousing-data/material-infoComp2.vue
-->
<template>
    <el-main style="height: 100%;">
        <el-card shadow="never" style="height: 100%;" body-style="height: 100%">
            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                <el-tab-pane label="物料信息" name="1">
    <el-containter>
        <el-header>
            <el-button @click="table_add" type="primary" icon="el-icon-plus"></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"
                        @click="batchDel"></el-button>
                </template>
            </el-popconfirm>

                </el-tab-pane>
                <el-tab-pane label="物料类型" name="2">

                </el-tab-pane>
            </el-tabs>
        </el-card>
    </el-main>
            <el-select v-model="params.status" style="width: 240px;margin-left: auto;" :prefix-icon="Search">
                <template #prefix>
                    状态
                </template>
                <el-option v-for="item in options.status" :key="item.value" :label="item.label" :value="item.value" />
            </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>
        </el-header>
        <el-main>
            <scTable ref="table" @selection-change="handleSelectionChange" row-key="id" border :params="params"
                :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="status" label="状态">
                    <template #default="scope">
                        {{ this.options.status.find(v => v.value == scope.row.status)?.label }}
                    </template>
                </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 v-if="scope.row == 1" 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 text type="primary" size="small">删除</el-button>
                                </template>
                            </el-popconfirm>
                            <el-popconfirm v-else width="220" title="确定将选择的数据删除" @confirm="table_del([scope.row], '0')">
                                <template #reference>
                                    <el-button text type="primary" size="small">删除</el-button>
                                </template>
                            </el-popconfirm>
                        </el-button-group>
                    </template>
                </el-table-column>
            </scTable>
        </el-main>
        <el-drawer v-model="drawer" title="物料类型">
            <el-form :model="form" :rules="rules" ref="dialogForm" label-width="120px" label-position="center">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="物料类型编码" prop="code">
                            <el-input style="width: 240px" v-model="form.code" placeholder=""></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="物料类型名称" prop="name">
                            <el-input style="width: 240px" v-model="form.name" placeholder=""></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="备注" prop="remark">
                            <el-input type="textarea" style="width: 240px" v-model="form.remark"
                                placeholder=""></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="状态" prop="status">
                            <el-select v-model="form.status" 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>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <el-button type="primary" @click="save">保存</el-button>
            </template>
        </el-drawer>
    </el-containter>
</template>

<script>
export default {
    data() {
        return {
            activeName: '1'
            activeName: '1',
            options: {
                status: [
                    {
                        label: '启用',
                        value: 1
                    },
                    {
                        label: '停用',
                        value: 0
                    },
                ],
            },
            params: {
                keyWord: '',
                status: 1
            },
            apiObj: {
                get: async (data) => {
                    let params = {
                        ...data
                    }
                    return await this.$HTTP.get(`/api/blade-cps/material-type/page`, params).then(res => {
                        return res
                    })
                }
            },
            selection: [],
            drawer: false,
            form: {
                id: '',
                status: 1,
                remark: '',
                name: '',
                code: '',
            },
            rules: {
                name: [
                    { required: true, message: '必填' }
                ],
                code: [
                    { required: true, message: '必填' }
                ],
            },
        }
    },
    created() {
        this.init()
    },
    methods: {
        init() {
            this.$HTTP.get(`/api/blade-cps/material-type/list`).then(res => {
                this.options.typeId = res.data.map(item => ({
                    label: item.name,
                    value: item.id
                }))
            })
            this.$HTTP.get(`/api/blade-system/dict/dictionary?code=material_property`).then(res => {
                this.options.property = res.data.map(item => ({
                    label: item.dictValue,
                    value: item.dictKey - 0
                }))
            })
        },
        search() {
            this.$refs.table.reload(this.params)
        },
        handleSelectionChange(selection) {
            this.selection = selection
        },
        table_add() {
            this.drawer = true
            this.form = {
                status: 1
            }
        },
        table_edit(row) {
            this.drawer = true
            this.form = {
                ...row
            }
        },
        batchDel() {

        },
        dataChange() {

        },
        table_del(rowArr, type) {
            this.$HTTP.delete(`/api/blade-cps/material-type/delete-material-type?ids=${rowArr.map(v => v.id).toString()}&type=${type}`).then(res => {
                if (res.code === 200) {
                    this.$message.success("操作成功");
                    this.$refs.table.reload(this.params)
                }
            })
        },
        save() {
            this.$refs.dialogForm.validate(async (valid) => {
                if (valid) {
                    if (this.form.id) {
                        this.$HTTP.put(`/api/blade-cps/material-type/update-material-type`, {
                            ...this.form
                        }).then(res => {
                            this.drawer = false
                            this.$refs.table.reload(this.params)
                        })
                    } else {
                        this.$HTTP.post(`/api/blade-cps/material-type/create-material-type`, {
                            ...this.form
                        }).then(res => {
                            this.drawer = false
                            this.$refs.table.reload(this.params)
                        })
                    }
                }
            })

        }
    }
}
</script>