smart-bid-web/src/views/enterpriseLibrary/tool/index.vue

<template>
    <!-- 工器具库 -->
    <el-card class="tool-container">
        <!-- 返回按钮 -->
        <div class="back-container">
            <el-button type="default" size="small" @click="handleBack" class="back-btn">
                返回
            </el-button>
        </div>
        <TableModel :formLabel="formLabel" :showOperation="true" :showRightTools="false" ref="userTableRef"
            :columnsList="columnsList" :request-api="listUser">
            <template slot="tableTitle">
                <h3>数据列表</h3>
            </template>
            <template slot="tableActions">
                <el-button @click="handleAdd" v-hasPermi="['enterpriseLibrary:technical:add']"
                    class="add-btn">导入模板下载</el-button>
                <el-button @click="handleAdd" v-hasPermi="['enterpriseLibrary:technical:add']"
                    class="add-btn">导入模板下载</el-button>
                <el-button @click="handleAdd" v-hasPermi="['enterpriseLibrary:technical:add']" class="add-btn"><i
                        class="el-icon-plus"></i> 新增工器具</el-button>
            </template>
            <template slot="deptName" slot-scope="{ data }">
                <span>{{ data.dept.deptName || '--' }}</span>
            </template>
            <template slot="handle" slot-scope="{ data }">
                <el-button type="text" v-hasPermi="['enterpriseLibrary:technical:detail']" class="action-btn"
                    @click="handleUpdate(data)">
                    查看
                </el-button>
                <el-button type="text" v-hasPermi="['enterpriseLibrary:technical:edit']" class="action-btn"
                    style="color: #EAA819;" @click="handleUpdate(data)">
                    编辑
                </el-button>
                <el-button type="text" v-hasPermi="['enterpriseLibrary:technical:del']" class="action-btn"
                    style="color: #DB3E29;" @click="handleDelete(data)">
                    删除
                </el-button>
            </template>
        </TableModel>
        <!-- 添加方案类型弹窗 -->
        <ToolForm ref="toolForm" v-if="isflag" :isAdd="isAdd" :rowData="row" @handleQuery="handleQuery" :title="title"
            @closeDialog="closeDialog" :width="600" />
    </el-card>
</template>

<script>
import TableModel from '@/components/TableModel2'
import { columnsList, formLabel } from './config'
import ToolForm from './components/ToolForm.vue'
import {
    listUser,
    delUser,
} from '@/api/system/user'
import { encryptWithSM4, decryptWithSM4 } from '@/utils/sm'

export default {
    name: 'Tool',
    components: {
        TableModel,
        ToolForm
    },
    dicts: ['construction_nature', 'structural_form', 'basic_form'],
    data() {
        return {
            formLabel,
            columnsList,
            listUser,
            enterpriseId: decryptWithSM4(this.$route.query.enterpriseId) || '0',
            title: "",
            isflag: false,
            isAdd: '',
            row: {},
        }
    },

    created() {
        // 将字典数据填充到表单配置的下拉选项中
        if (Array.isArray(this.formLabel)) {
            this.formLabel.forEach((item) => {
                if (item.f_dict && this.dict && this.dict.type && this.dict.type[item.f_dict]) {
                    this.$set(item, 'f_selList', this.dict.type[item.f_dict])
                }
            })
        }
    },

    methods: {
        // 返回上一页
        handleBack() {
            const obj = {
                path: "/enterpriseKnowledge/index",
                query: {
                    enterpriseId: encryptWithSM4(this.enterpriseId || '0'),
                }
            }
            this.$tab.closeOpenPage(obj)
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.title = "新增工器具";
            this.isAdd = 'add';
            this.row = {};
            this.isflag = true;
        },

        /** 修改操作 */
        handleUpdate(row) {
            this.title = "修改";
            this.isAdd = 'edit';
            this.row = row;
            this.isflag = true;
        },
        closeDialog() {
            this.isflag = false;
        },
        /* 搜索操作 */
        handleQuery() {
            this.$refs.userTableRef.getTableList()
        },
        /** 删除操作 */
        handleDelete(row) {
            this.$modal.confirm(`是否确认删除此数据项？`).then(() => {
                // 显示加载遮罩
                this.$modal.loading("正在删除，请稍候...");
                delUser({ userId: row.userId }).then(res => {
                    this.$modal.closeLoading();
                    if (res.code === 200) {
                        this.$modal.msgSuccess("删除成功");
                        this.handleQuery();
                    } else {
                        this.$modal.msgError(res.msg);
                    }
                }).catch(error => {
                    this.$modal.closeLoading();
                    this.$modal.msgError(error);
                });
            }).catch(() => {
                // 用户取消删除，不需要处理
            });
        },
    },
}
</script>
<style scoped lang="scss">
.tool-container {
    height: calc(100vh - 84px);
    overflow: hidden;
    background: linear-gradient(180deg, #F1F6FF 20%, #E5EFFF 100%);
}

.back-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 30px;
    padding: 0 20px;

    .back-btn {
        width: 98px;
        height: 36px;
        background: #FFFFFF;
        box-shadow: 0px 4px 8px 0px rgba(76, 76, 76, 0.2);
        border-radius: 4px;
        border: none;
        color: #666;
        font-size: 14px;
        transition: all 0.3s ease;

        &:hover {
            background: #f5f5f5;
            color: #409EFF;
            box-shadow: 0px 6px 12px 0px rgba(76, 76, 76, 0.3);
        }
    }
}

.right-table-card {
    height: 100%;
    overflow-y: hidden;
    transition: overflow-y 0.3s ease;

    &:hover {
        overflow-y: auto;
    }
}

.add-btn {
    width: 121px;
    height: 36px;
    background: #1F72EA;
    box-shadow: 0px 4px 8px 0px rgba(51, 135, 255, 0.5);
    border-radius: 4px 4px 4px 4px;
    color: #fff;
    border: none;
    font-size: 14px;
    transition: all 0.3s;

    &:hover {
        background: #4A8BFF;
        box-shadow: 0px 6px 12px 0px rgba(51, 135, 255, 0.6);
    }
}

.action-btn {
    margin-right: 8px;

    &:last-child {
        margin-right: 0;
    }
}
</style>