gaoshp
2024-11-19 f29900986f01cf5d39b5755cec674825cef27961
src/views/console/system/interfaceConfig.vue
@@ -1,85 +1,91 @@
<!--
 * @Date: 2024-04-09 22:18:47
 * @LastEditors: Sneed
 * @LastEditTime: 2024-04-11 21:34:08
 * @LastEditTime: 2024-04-13 22:11:37
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/console/system/interfaceConfig.vue
 * 看板接口
-->
<template>
    <el-container>
        <el-header style="justify-content: flex-start;">
            <el-button type="primary" plain @click="add">新增</el-button>
            <el-button @click="del" plain type="danger" :disabled="selection.length == 0">删除</el-button>
            <el-input clearable v-model="urlName_like" style="max-width: 200px;margin-left: auto;">
                <template #append>
                    <el-button @click="query" icon="el-icon-search" />
                </template>
            </el-input>
        </el-header>
        <el-main>
            <scTable ref="table" @selection-change="handleSelectionChange" row-key="id" border :params="params"
                :apiObj="apiObj" stripe>
                <el-table-column type="selection" width="55" />
                <el-table-column prop="url" label="接口地址" />
                <el-table-column prop="urlName" label="接口中文名" />
                <el-table-column prop="urlType" label="接口类型">
                    <template #default="scope">
                        <span>{{ interface_url_type?.find(v => v.dictKey == scope.row.urlType)?.dictValue }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="owningChart" label="图表类型">
                    <template #default="scope">
                        <span>{{ interface_owning_chart?.find(v => v.dictKey == scope.row.owningChart)?.dictValue
                            }}</span>
                    </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 title="确定删除吗?" @confirm="table_del(scope.row, scope.$index, '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-dialog v-model="dialogVisible" :title="dialogTitle" width="1000" :before-close="handleClose">
            <el-form :model="row" :rules="rules" ref="dialogForm" label-width="120px" label-position="center">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="接口地址" prop="url">
                            <el-input style="width: 100%" v-model="row.url" placeholder="请输入" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="接口中文名" prop="urlName">
                            <el-input style="width: 240px" v-model="row.urlName" placeholder="请输入" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="接口类型" prop="urlType">
                            <el-select v-model="row.urlType" placeholder="请选择" style="width: 240px">
                                <el-option v-for="item in interface_url_type" :key="item.value" :label="item.dictValue"
                                    :value="item.dictKey - 0" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="图表类型" prop="owningChart">
                            <el-select v-model="row.owningChart" placeholder="请选择" style="width: 240px">
                                <el-option v-for="item in interface_owning_chart" :key="item.value"
                                    :label="item.dictValue" :value="item.dictKey" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <!-- <el-container>
    <el-main>
        <el-card shadow="never">
            <el-container>
                <el-header style="justify-content: flex-start;">
                    <el-button type="primary" plain @click="add">新增</el-button>
                    <el-button @click="del" plain type="danger" :disabled="selection.length == 0">删除</el-button>
                    <el-input clearable v-model="urlName_like" style="max-width: 200px;margin-left: auto;">
                        <template #append>
                            <el-button @click="query" icon="el-icon-search" />
                        </template>
                    </el-input>
                </el-header>
                <el-main>
                    <scTable ref="table" @selection-change="handleSelectionChange" row-key="id" border :params="params"
                        :apiObj="apiObj" stripe>
                        <el-table-column type="selection" width="55" />
                        <el-table-column prop="url" label="接口地址" />
                        <el-table-column prop="urlName" label="接口中文名" />
                        <el-table-column prop="urlType" label="接口类型">
                            <template #default="scope">
                                <span>{{ interface_url_type?.find(v => v.dictKey == scope.row.urlType)?.dictValue
                                    }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="owningChart" label="图表类型">
                            <template #default="scope">
                                <span>{{ interface_owning_chart?.find(v => v.dictKey ==
                                    scope.row.owningChart)?.dictValue
                                    }}</span>
                            </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 title="确定删除吗?" @confirm="table_del(scope.row, scope.$index, '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-dialog v-model="dialogVisible" :title="dialogTitle" width="1000" :before-close="handleClose">
                    <el-form :model="row" :rules="rules" ref="dialogForm" label-width="120px" label-position="center">
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="接口地址" prop="url">
                                    <el-input style="width: 100%" v-model="row.url" placeholder="请输入"
                                        clearable></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="接口中文名" prop="urlName">
                                    <el-input style="width: 240px" v-model="row.urlName" placeholder="请输入"
                                        clearable></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="接口类型" prop="urlType">
                                    <el-select v-model="row.urlType" placeholder="请选择" style="width: 240px">
                                        <el-option v-for="item in interface_url_type" :key="item.value"
                                            :label="item.dictValue" :value="item.dictKey - 0" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="图表类型" prop="owningChart">
                                    <el-select v-model="row.owningChart" placeholder="请选择" style="width: 240px">
                                        <el-option v-for="item in interface_owning_chart" :key="item.value"
                                            :label="item.dictValue" :value="item.dictKey" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                    <!-- <el-container>
                <el-header>
                    <el-button plain type="primary">新建</el-button>
                </el-header>
@@ -90,16 +96,18 @@
                    </el-table>
                </el-main>
            </el-container> -->
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="save">
                        保存
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </el-container>
                    <template #footer>
                        <div class="dialog-footer">
                            <el-button @click="dialogVisible = false">取消</el-button>
                            <el-button type="primary" @click="save">
                                保存
                            </el-button>
                        </div>
                    </template>
                </el-dialog>
            </el-container>
        </el-card>
    </el-main>
</template>
<script>
@@ -156,7 +164,6 @@
            Object.keys(this.row).forEach(v => {
                this.row[v] = ''
            })
            this.row.orderNum = 0
            this.dialogTitle = '新增'
            this.dialogVisible = true
        },
@@ -182,7 +189,7 @@
        table_edit(row) {
            this.row = { ...row }
            console.log(this.row)
            this.dialogTitle = '新增'
            this.dialogTitle = '编辑'
            this.dialogVisible = true
        },
        table_del(row) {