新增看板接口

gaoshp

2024-04-11 b734a2c20d48014ad238940bdeb41137273ef25e

新增看板接口

 src/api/model/setting.js

@@ -1,7 +1,7 @@
/*
 * @Date: 2024-04-07 21:49:32
 * @LastEditors: Sneed
 * @LastEditTime: 2024-04-10 21:04:50
 * @LastEditTime: 2024-04-11 21:26:14
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/api/model/setting.js
 */
import config from "@/config"
@@ -36,11 +36,36 @@
            return await http.delete(this.url,data,conf);
        }
    },
    getConList: {
        url: `${config.API_URL}/blade-system/interface-config/page`,
        name: "看板接口列表",
        get: async function(data){
            return await http.get(this.url,data,{params: data});
        }
    },
    interfaceConfig: {
        getConList: {
            url: `${config.API_URL}/blade-system/interface-config/page`,
            name: "看板接口列表",
            get: async function(data){
                return await http.get(this.url,data,{params: data});
            }
        },
        add: {
            url: `${config.API_URL}/blade-system/interface-config/insert`,
            name: "看板接口新增",
            post: async function(data){
                return await http.post(this.url,data,{params: data});
            }
        },
        update: {
            url: `${config.API_URL}/blade-system/interface-config/update`,
            name: "看板接口更新",
            post: async function(data){
                return await http.put(this.url,data,{params: data});
            }
        },
        del: {
            url: `${config.API_URL}/blade-system/interface-config/remove`,
            name: "分类维护新增",
            delete: async function(data,conf){
                return await http.delete(this.url,data,conf);
            }
        },
    }
    
	
}

 src/views/console/system/interfaceConfig.vue

@@ -1,7 +1,7 @@
<!--
 * @Date: 2024-04-09 22:18:47
 * @LastEditors: Sneed
 * @LastEditTime: 2024-04-10 21:11:42
 * @LastEditTime: 2024-04-11 21:34:08
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/console/system/interfaceConfig.vue
 * 看板接口
-->
@@ -10,20 +10,27 @@
        <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>
            <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>{{ ['POST',"PUT","GET"][scope.row.urlType] }}</span>
                        <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>{{ ['柱状折线图',"饼图","甘特图","表格","仪表盘"][scope.row.owningChart -1] }}</span>
                        <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">
@@ -41,51 +48,48 @@
                </el-table-column>
            </scTable>
        </el-main>
        <el-dialog v-model="dialogVisible" :title="dialogTitle" width="750" :before-close="handleClose">
        <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="12">
                        <el-form-item label="分类名称" prop="name">
                            <el-input style="width: 240px" v-model="row.name" placeholder="请输入分类名称"
                                clearable></el-input>
                    <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="parentId">
                            <el-select v-model="row.parentId" filterable placeholder="请选择上级分类" style="width: 240px">
                                <el-option v-for="item in options" :key="item.value" :label="item.label"
                                    :value="item.value" />
                        <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="icon">
                            <el-input @click="showIconDialog = true" style="width: 240px" v-model="row.icon"
                                placeholder="请选择分类图标" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="分类编号" prop="type">
                            <el-input style="width: 240px" v-model="row.type" placeholder="请输入分类编号"
                                clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="排列顺序" prop="orderNum">
                            <el-input-number style="width: 240px" default v-model="row.orderNum" :min="0"
                                placeholder="请输入排列顺序" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="状态" prop="status">
                            <el-radio-group style="width: 240px" v-model="row.status">
                                <el-radio v-for="item in statusList" :label="item.value" :key="item.value">{{ item.label
                                    }}</el-radio>
                            </el-radio-group>
                        <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>
                <el-main>
                    <el-table :data="tableData"
                        row-key="id" border
                        >
                    </el-table>
                </el-main>
            </el-container> -->
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
@@ -95,12 +99,6 @@
                </div>
            </template>
        </el-dialog>
        <el-dialog v-model="showIconDialog" title="分类图标" width="750">
            <div class="icons">
                <component @click="setIcon(item)" class="icon" v-for="item in icons" :is='item' :key="item"></component>
            </div>

        </el-dialog>
    </el-container>
</template>

@@ -108,32 +106,51 @@
export default {
    data() {
        return {
            apiObj: this.$API.setting.getConList,
            apiObj: this.$API.setting.interfaceConfig.getConList,
            selection: [],
            dialogVisible: false,
            urlName_like: '',
            row: {
                id: '',
                name: '',
                parentId: '',
                icon: '',
                type: '',
                orderNum: 0,
                status: 1,
                url: '',
                urlName: '',
                urlType: '',
                owningChart: '',
            },
            rules: {
                name: [
                    { required: true, message: '请输入分类名称' }
                url: [
                    { required: true, message: '请输入' }
                ],
                type: [
                    { required: true, message: '请输入分类编号' }
                ]
                urlName: [
                    { required: true, message: '请输入' }
                ],
                urlType: [
                    { required: true, message: '请输入' }
                ],
                owningChart: [
                    { required: true, message: '请输入' }
                ],
            },
            interface_url_type: [],
            interface_owning_chart: [],
            flow: [],
        }
    },
    created() {
        this.queryList()
        this.$API.system.dic.getDic.get({ code: 'interface_url_type' }).then(res => {
            this.interface_url_type = res.data
        })
        this.$API.system.dic.getDic.get({ code: 'interface_owning_chart' }).then(res => {
            this.interface_owning_chart = res.data
        })
        this.$API.system.dic.getDic.get({ code: 'flow' }).then(res => {
            this.flow = res.data
        })
    },
    methods: {
        query() {
            this.$refs.table.reload({ urlName_like: this.urlName_like })
        },
        add() {
            this?.$refs?.dialogForm?.resetFields()
            Object.keys(this.row).forEach(v => {
@@ -146,29 +163,20 @@
        save() {
            this.$refs.dialogForm.validate(async (valid) => {
                if (valid) {
                    let request = this.$API.setting.insert
                    let request = this.$API.setting.interfaceConfig.add
                    if (this?.row?.id) {
                        request = this.$API.setting.update
                        request = this.$API.setting.interfaceConfig.update
                    }
                    request.post(this.row).then(res => {
                        this.dialogVisible = false
                        this.queryList()
                        this.query()
                    })
                }
            })
        },
        del() {
            this.$API.setting.del.delete({}, { data: this.selection.map(v => v.id) }).then(res => {
                this.queryList()
            })
        },
        queryList() {
            this.$API.setting.getList.get().then(res => {
                this.tableData = res.data;
                this.options = res.data.map(item => ({
                    value: item.id,
                    label: item.name
                }))
            this.$API.setting.interfaceConfig.del.delete({}, { data: this.selection.map(v => v.id) }).then(res => {
                this.query()
            })
        },
        table_edit(row) {
@@ -178,19 +186,13 @@
            this.dialogVisible = true
        },
        table_del(row) {
            this.$API.setting.del.delete({}, { data: [row.id] }).then(res => {
                this.queryList()
            this.$API.setting.interfaceConfig.del.delete({}, { data: [row.id] }).then(res => {
                this.query()
            })
        },
        handleSelectionChange(selection) {
            console.log('>>>>>>')
            this.selection = selection;
        },
        setIcon(icon) {
            console.log('>>>>>>', icon)
            this.row.icon = icon
            this.showIconDialog = false
        }
    },
}
</script>