组件维护

gaoshp

2024-04-13 d3990a37a0cdcbca0a5cf68f6faacc9e9143dec2

组件维护

 src/api/model/common.js

@@ -1,9 +1,15 @@
/*
 * @Date: 2024-03-23 09:49:06
 * @LastEditors: Sneed
 * @LastEditTime: 2024-04-13 20:14:23
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/api/model/common.js
 */
import config from "@/config"
import http from "@/utils/request"

export default {
    upload: {
        url: `${config.API_URL}/upload`,
        url: `${config.API_URL}/blade-visual/visual/put-file`,
        name: "文件上传",
        post: async function(data, config={}){
            return await http.post(this.url, data, config);

 src/api/model/setting.js

@@ -1,7 +1,7 @@
/*
 * @Date: 2024-04-07 21:49:32
 * @LastEditors: Sneed
 * @LastEditTime: 2024-04-11 22:03:49
 * @LastEditTime: 2024-04-13 21:05:15
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/api/model/setting.js
 */
import config from "@/config"
@@ -83,12 +83,24 @@
        },
        del: {
            url: `${config.API_URL}/blade-visual/visual-comp/remove`,
            name: "看板接口新增",
            name: "组件删除",
            delete: async function(data,conf){
                return await http.delete(this.url,data,conf);
            }
        },
    }
    
	
        add: {
            url: `${config.API_URL}/blade-visual/visual-comp/insert`,
            name: "组件新增",
            post: async function(data){
                return await http.post(this.url,data,{});
            }
        },
        update: {
            url: `${config.API_URL}/blade-visual/visual-comp/update`,
            name: "组件更新",
            post: async function(data,conf){
                return await http.put(this.url,data);
            }
        }
    },
}

 src/components/scUpload/index.vue

@@ -78,7 +78,7 @@
            disabled: { type: Boolean, default: false },
            round: { type: Boolean, default: false },
            onSuccess: { type: Function, default: () => { return true } },

            host: {type: String, default: ''},
            cropper: { type: Boolean, default: false },
            compress: {type: Number, default: 1},
            aspectRatio:  {type: Number, default: NaN}
@@ -116,7 +116,7 @@
                if(url){
                    this.file = {
                        status: "success",
                        url: url
                        url: `${this.host}${url}`
                    }
                }else{
                    this.file = null
@@ -198,7 +198,11 @@
            success(res, file){
                //释放内存删除blob
                URL.revokeObjectURL(file.tempFile)
                delete file.tempFile
                try {
                    delete file.tempFile
                } catch (error) {
					
                }
                var os = this.onSuccess(res, file)
                if(os!=undefined && os==false){
                    this.$nextTick(() => {

 src/config/upload.js

@@ -1,3 +1,9 @@
/*
 * @Date: 2024-03-23 09:49:06
 * @LastEditors: Sneed
 * @LastEditTime: 2024-04-13 20:20:48
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/config/upload.js
 */
import API from "@/api";

//上传配置
@@ -10,9 +16,9 @@
    parseData: function (res) {
        return {
            code: res.code,                //分析状态字段结构
            fileName: res.data.fileName,//分析文件名称
            src: res.data.src,            //分析图片远程地址结构
            msg: res.message            //分析描述字段结构
            fileName: res.data.name,//分析文件名称
            src: res.data.name,            //分析图片远程地址结构
            msg: res.msg            //分析描述字段结构
        }
    },
    apiObjFile: API.common.uploadFile,    //附件上传请求API对象

 src/views/console/system/vision-component-modify.vue

@@ -1,7 +1,7 @@
<!--
 * @Date: 2024-04-09 22:18:47
 * @LastEditors: Sneed
 * @LastEditTime: 2024-04-11 22:07:46
 * @LastEditTime: 2024-04-13 21:11:49
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/console/system/vision-component-modify.vue
-->
<template>
@@ -43,48 +43,37 @@
                </scTable>
            </el-main>
        </el-container>
        <el-dialog v-model="dialogVisible" :title="dialogTitle" width="1000" >
        <el-dialog v-model="dialogVisible" :title="dialogTitle" width="1000">
            <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-col :span="12">
                        <el-form-item label="组件名称" prop="name">
                            <el-input style="width: 100%" v-model="row.name" 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 label="分类名称" prop="typeName">
                            <el-tree-select v-model="row.typeName" :data="treeData" :props="defaultProps" @node-click="nodeClick"
                                style="width: 240px" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" :data-url="`${host}${row.url}`">
                        <el-form-item label="图片" prop="url">
                            <scUpload v-model="row.url" :host="host"></scUpload>
                        </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 label="排列顺序" prop="orderNum">
                            <el-input-number v-model="row.orderNum" :min="0" />
                        </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 :span="12" style="height: 300px;">
                        <el-card shadow="never" header="javascript Darcula主题">
                            <sc-code-editor v-model="row.component" mode="javascript" theme="darcula"></sc-code-editor>
                        </el-card>
                    </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>
@@ -98,7 +87,12 @@
</template>

<script>
import { defineAsyncComponent } from 'vue';
const scCodeEditor = defineAsyncComponent(() => import('@/components/scCodeEditor'));
export default {
    components: {
        scCodeEditor,
    },
    data() {
        return {
            defaultProps: {
@@ -115,7 +109,13 @@
            dialogVisible: false,
            dialogTitle: '新增',
            row: {

                id: '',
                type: '',
                typeName: '',
                name: '',
                url: '',
                orderNum: '',
                component: "",
            },
            rules: {
                url: [
@@ -142,7 +142,7 @@
        },
        getList() {
            this.$API.setting.component.getImgHost.get().then(res => {
                this.host = res.data + '/visual'
                this.host = res.data + '/visual/'
                this.$API.setting.getList.get().then(res => {
                    this.treeData = res.data
                })
@@ -164,18 +164,24 @@
            this.dialogVisible = true
        },
        del() {
            this.$API.setting.component.del({}, { data: this.selection.map(v => v.id) }).then(res => {
            this.$API.setting.component.del.delete({}, { data: this.selection.map(v => v.id) }).then(res => {
                this.query()
            })
        },
        save() {
            this.$refs.dialogForm.validate(async (valid) => {
                if (valid) {
                    let request = this.$API.setting.interfaceConfig.add
                    let request = this.$API.setting.component.add
                    let data = {
                            ...this.row
                        }
                    if (this?.row?.id) {
                        request = this.$API.setting.interfaceConfig.update
                        request = this.$API.setting.component.update
                    } else {
                       
                        delete data.id
                    }
                    request.post(this.row).then(res => {
                    request.post(data).then(res => {
                        this.dialogVisible = false
                        this.query()
                    })
@@ -183,13 +189,34 @@
            })
        },
        table_del(row) {
            this.$API.setting.component.del({}, { data: [row.id] }).then(res => {
            this.$API.setting.component.del.delete({}, { data: [row.id] }).then(res => {
                this.query()
            })
        }

        },
        table_edit(row) {
            this.row = row
            this.dialogVisible = true
            this.dialogTitle = '编辑'
        },
        nodeClick (node) {
            this.$nextTick(() => {
                console.log(node)
                if (node.hasChildren) return
                this.row.type = node.type
                this.row.typeName = node.name
                console.log(this.row)
            })
            
        },
        handleAvatarSuccess () {},
        beforeAvatarUpload () {},
    }
}
</script>

<style lang="scss" scoped></style>
<style lang="scss" scoped>
    .avatar {
        width: 200px;
        height:200px;
    }
</style>