添加服务镜像页面

.env.production

@@ -3,4 +3,4 @@ VITE_APP_TITLE = "星云平台"
 VITE_APP_PORT = 3002
 
 # 请求接口
-VITE_APP_BASE_URL = "lic"
+VITE_APP_BASE_URL = "Lic"

src/components/pagination/index.vue

+<template>
+    <div style="margin-top: 20px;">
+        <el-pagination v-model:currentPage="pageData.pageNo" v-model:page-size="pageData.pageSize"
+            :page-sizes="[10, 15, 20]" :small="pageData.small" :disabled="pageData.disabled"
+            :background="pageData.background" layout="->, total, sizes, prev, pager, next, jumper" :total="total"
+            @size-change="handleSizeChange" hide-on-single-page @current-change="handleCurrentChange" />
+    </div>
+</template>
+
+<script setup lang='ts'>
+
+let props = defineProps({
+    pageData: {
+        type: Object,
+        default: {
+            pageNo: {
+                type: Number,
+                default: 1
+            },
+            pageSize: {
+                type: Number,
+                default: 10
+            },
+            small: {
+                type: Boolean,
+                default: false
+            },
+            disabled: {
+                type: Boolean,
+                default: false
+            },
+            background: {
+                type: String || Boolean,
+                default: '' || false
+            }
+        }
+    },
+    total: {
+        type: Number,
+        default: 0
+    }
+})
+
+let emits = defineEmits(['sizeChange', 'currentChange'])
+
+// 新条数
+const handleSizeChange = (val: number) => {
+    emits('sizeChange', val)
+}
+
+// // 新页数
+const handleCurrentChange = (val: number) => {
+    emits('currentChange', val)
+}
+</script>
+ 
+<style lang = "scss" scoped>
+</style>
\ No newline at end of file

src/services/api/department/DeptModel.ts

-//查询列表的参数类型
-export interface ListParm{
-    searchName:string;
-}
-//返回值
-export interface DeptListRes{
-    list:any
-}
-
-//部门表格每行数据的格式
-export interface DeptModel {
-    id: number;
-    pid: number;
-    likeId: number;
-    parentName: string;
-    manager: string;
-    name: string;
-    deptCode: string;
-    deptAddress: string;
-    deptPhone: string;
-    orderNum: number;
-    open: boolean;
-    children: Array<DeptModel>
-}
-//表单提交的数据类型
-export interface AddDeptModel {
-    type: string;
-    id: string | number;
-    pid: string |number;
-    parentName: string;
-    manager: string;
-    deptAddress: string;
-    deptPhone: string;
-    name: string;
-    deptCode: string;
-    orderNum: string;
-}
-//上级部门树选中的数据
-export interface SelectNode{
-    id:string | number;
-    name:string;
-}
\ No newline at end of file

src/services/api/department/departmentAPI.ts

-import httpRequest from "@/services/common";
-import { urlConfig } from '@/services/config';
\ No newline at end of file

src/services/api/department/deptAPI.ts

-import httpRequest from "@/services/common";
-import { userUrlConfig, authUrlConfig } from '@/services/config'
-import { AddDeptModel, ListParm } from './DeptModel'
-enum Api {
-    getDeptList = '/api/department/list',
-    getParent = '/api/department/parent',
-    add = '/api/department',
-    edit = '/api/department',
-    delete = '/api/department'
-}
-//查询部门列表
-export const getDeptListApi = async (parms: ListParm) => {
-    return await httpRequest.get(Api.getDeptList, parms)
-}
-//查询上级部门树
-export const getDeptParentApi = async () => {
-    return await httpRequest.get(Api.getParent)
-}
-//新增
-export const addDeptApi = async (parms: AddDeptModel) => {
-    return await httpRequest.post(Api.add, parms)
-}
-//编辑
-export const editDeptApi = async (parms: AddDeptModel) => {
-    return await httpRequest.put(Api.edit, parms)
-}
-//删除
-export const deleteDeptApi = async (parms: any) => {
-    return await httpRequest.delete(Api.delete, parms)
-}

src/services/api/imageService/index.ts

+import { request } from "../config";
+
+export const getImageService = (params: any) => {
+    return request({
+        url: '/api/service/image',
+        method: 'get',
+        params
+    })
+}
+export const addImageService = (data: any) => {
+    return request({
+        url: '/api/service/image',
+        method: 'post',
+        data
+    })
+}
+export const updateImageService = (data: any) => {
+    return request({
+        url: '/api/service/image',
+        method: 'put',
+        data
+    })
+}
+export const deleteImageService = (id: number) => {
+    return request({
+        url: '/api/service/image/' + id,
+        method: 'delete',
+    })
+}
+export const getImageVersion = (params: any) => {
+    return request({
+        url: '/api/service/image/version',
+        method: 'get',
+        params
+    })
+}
+export const addImageVersion = (data: any) => {
+    return request({
+        url: '/api/service/image/version',
+        method: 'post',
+        data
+    })
+}
+export const deleteImageVersion = (id: number) => {
+    return request({
+        url: '/api/service/image/version/' + id,
+        method: 'delete',
+    })
+}

src/services/api/licInformation/licInformation.ts

@@ -34,10 +34,10 @@ export const licInfoDelete = (id: number) => {
     })
 }
 // 文件创建
-export const licInfoFileCreate = (macAddress: string, effectiveTime: string, verificationInterval: number) => {
+export const licInfoFileCreate = (data: any) => {
     return request({
         url: '/api/lic/info/file/create',
         method: 'post',
-        data: { macAddress, effectiveTime, verificationInterval }
+        data
     })
 }

src/services/api/project/projectAPI.ts

-import httpRequest from "@/services/common";
-import { projectUrlConfig } from '@/services/config';
-
-//项目列表分页查询
-export const getProjectList = async (param:any) => {
-    return await httpRequest.list(projectUrlConfig['projectList'],param)
-}
-
-//添加项目
-export const addProject = async (param:any) => {
-    return await httpRequest.post(projectUrlConfig['addProject'],param)
-}
-
-//删除项目
-export const deleteProject = async (param:any) => {
-    return await httpRequest.post(projectUrlConfig['deleteProject'],param)
-}
-
-//编辑项目
-export const editProject = async (param:any) => {
-    return await httpRequest.put(projectUrlConfig['editProject'],param)
-}
\ No newline at end of file

src/services/business/login/useBaseLogin.ts

@@ -8,7 +8,7 @@ export default function useBaseLogin() {
     //表单绑定的数据
     const loginModel = reactive<LoginParm>({
         username: 'admin',
-        password: '123456',
+        password: 'QWER111.',
         code: ''
     })
     //表单验证规则

src/views/business/components/mirrorForm.vue

+<template>
+    <el-dialog v-model="props.mirrorDialog" :title="title" width="30%" :before-close="handleClose">
+        <el-form ref="formRef" :model="formData" label-width="100px" :rules="rules">
+            <el-form-item prop="name" label="镜像名">
+                <el-input v-model="formData.name" placeholder="请输入镜像名" @blur="handleBlur" />
+            </el-form-item>
+            <el-form-item prop="contextPath" label="服务路径">
+                <el-input v-model="formData.contextPath" placeholder="请输入服务路径" />
+            </el-form-item>
+            <el-form-item prop="version" label="版本">
+                <el-select v-model="formData.id" :disabled="!versionList" placeholder="请填写对应镜像名选择版本"
+                    @change="handleChange">
+                    <el-option v-for="item in versionList" :key="item.id" :label="item.version" :value="item.id" />
+                </el-select>
+            </el-form-item>
+        </el-form>
+
+        <template #footer>
+            <el-button @click="handleClose">取消</el-button>
+            <el-button type="primary" @click="onConfirm">确定</el-button>
+        </template>
+    </el-dialog>
+</template>
+
+<script setup lang='ts'>
+import { ref } from 'vue'
+import { getImageService, getImageVersion } from '@/services/api/imageService/index';
+
+const props = defineProps({
+    mirrorDialog: {
+        type: Boolean,
+        require: true
+    }
+})
+
+const emits = defineEmits(['update:mirrorDialog', 'mirrorData'])
+
+const formData = ref({
+    id: '',
+    name: '',
+    contextPath: '',
+    version: '',
+})
+
+const versionList = ref([]) as any
+
+const formRef = ref()
+const title = ref('新增服务镜像')
+
+const rules = ref({
+    name: [{ required: true, message: '请输入镜像名', trigger: 'blur' }],
+    // contextPath: [{ required: true, message: '请输入服务路径', trigger: 'blur' }],
+})
+
+const handleBlur = async () => {
+    if (formData.value.name) {
+        const res: any = await getImageService({ name: formData.value.name })
+        if (res.code === 200 && res.data.records.length !== 0) {
+            const imageId = res.data.records[0].id
+            const ver: any = await getImageVersion({ imageId })
+            console.log(ver);
+            if (ver.code === 200) versionList.value = ver.data
+        }
+    }
+}
+
+const handleChange = (e: any) => {
+    versionList.value.map((item: any) => {
+        if (item.id == e) {
+            formData.value.version = item.version
+        }
+    })
+}
+
+const handleClose = () => {
+    formRef.value?.resetFields()
+    formData.value = {
+        id: '',
+        name: '',
+        contextPath: '',
+        version: '',
+    }
+    emits('update:mirrorDialog', false)
+}
+
+const onConfirm = () => {
+    formRef.value?.validate((valid: Boolean, fields: any) => {
+        if (valid) {
+            emits('mirrorData', formData.value)
+        } else {
+            console.log('error submit!', fields)
+        }
+    })
+}
+
+defineExpose({
+    formData,
+    title
+})
+</script>
+ 
+<style lang = "scss" scoped>
+</style>
\ No newline at end of file

src/views/business/licInformation.vue

@@ -9,14 +9,40 @@
             </el-col>
         </el-row>
         <el-button type="primary" @click="addlicInfo" style="margin-bottom: 20px;">添加信息</el-button>
-        <el-table :data="licInfoTable.licInfoData" border style="width: 100%" v-loading="licInfoTable.loading">
-            <el-table-column prop="lqLicName" label="Lic名称" width="200" />
+        <el-table :data="licInfoTable.licInfoData" border style="width: 100%" row-key="id"
+            v-loading="licInfoTable.loading">
+            <el-table-column type="expand">
+                <template #default="scope">
+                    <div v-if="scope.row.dockerServices.length === 0">
+                        <el-empty description="暂无镜像" :image-size="100" />
+                    </div>
+                    <div v-else style="padding: 20px 40px;">
+                        <div style="display: flex; justify-content: space-between; margin-bottom: 20px;">
+                            <span style="font-size: 16px; font-weight: 700;">docker镜像</span>
+                            <el-button type="primary" size="small" @click="addMirror(scope.row)">添加镜像</el-button>
+                        </div>
+                        <el-table :data="scope.row.dockerServices" style="width: 100%">
+                            <el-table-column prop="name" label="镜像名" align="center" />
+                            <el-table-column prop="contextPath" label="服务路径" align="center" />
+                            <el-table-column prop="version" label="版本" align="center" />
+                            <el-table-column label="操作" width="200" align="center">
+                                <template #default="item">
+                                    <el-button size="small" type="danger"
+                                        @click="handleServiceDelete(scope.row, item.row.id)">删除
+                                    </el-button>
+                                </template>
+                            </el-table-column>
+                        </el-table>
+                    </div>
+                </template>
+            </el-table-column>
+            <el-table-column prop="lqLicName" label="项目名称" width="200" />
             <el-table-column prop="macAddress" label="MAC地址" width="200" />
             <el-table-column prop="effectiveTime" label="导入有效时间" />
             <el-table-column prop="fileEffectiveTime" label="文件有效时间" />
             <el-table-column prop="verificationInterval" label="验证间隔时间(s)" />
             <el-table-column prop="moduleVerification" label="模块验证" />
-            <el-table-column label="操作">
+            <el-table-column label="操作" width="200">
                 <template #default="scope">
                     <el-button size="small" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
                     <el-button size="small" type="danger" @click="handleDelete(scope.row.id)">删除
@@ -66,12 +92,15 @@
             </span>
         </template>
     </el-dialog>
+
+    <mirror-form ref="mirrorFormRef" v-model:mirror-dialog="mirrorDialog" @mirror-data="getMirrorData" />
 </template>
 
 <script setup lang="ts">
 import { ref, reactive } from 'vue'
 import { licInfoList, licInfoDelete, licInfoFileCreate, licInfoUpdate, licInfoCreate } from '@/services/api/licInformation/licInformation'
 import { ElMessageBox, ElMessage } from "element-plus";
+import mirrorForm from './components/mirrorForm.vue'
 
 const licInfoTable = reactive({
     licInfoData: [],
@@ -82,13 +111,16 @@ const licInfoTable = reactive({
 })
 
 const licInfoRef = ref()
+const mirrorFormRef = ref()
 
 const searchValue = ref()
+const mirrorDialog = ref()
 
 const licInfoForm = reactive<any>({
     dialogVisible: false,
     title: '新增',
     formLicInfo: {
+        dockerServices: [],
         macAddress: '',
         effectiveTime: '',
         fileEffectiveTime: '',
@@ -121,17 +153,11 @@ const search = () => {
 
 const addlicInfo = () => {
     licInfoForm.title = '新增'
-    licInfoForm.formLicInfo = {
-        macAddress: '',
-        effectiveTime: '',
-        fileEffectiveTime: '',
-        verificationInterval: '',
-        moduleVerification: '',
-        lqLicName: ''
-    }
     licInfoForm.dialogVisible = true
 }
 
+const mirrorRow = ref() as any
+
 const handleEdit = (data: any) => {
     licInfoForm.title = '编辑'
     licInfoForm.formLicInfo = data
@@ -160,7 +186,7 @@ const onConfirm = () => {
                         licInfoRef.value?.resetFields()
                         ElMessage({ type: "success", message: "添加成功！" });
                         licInfoForm.dialogVisible = false
-                    }// else ElMessage({ type: "error", message: "添加失败！" });
+                    }
                 })
             } else {
                 licInfoUpdate(licInfoForm.formLicInfo).then((res: any) => {
@@ -169,7 +195,7 @@ const onConfirm = () => {
                         licInfoRef.value?.resetFields()
                         ElMessage({ type: "success", message: "修改成功！" });
                         licInfoForm.dialogVisible = false
-                    } // else ElMessage({ type: "error", message: "修改失败！" });
+                    }
                 })
             }
         } else {
@@ -178,6 +204,23 @@ const onConfirm = () => {
     })
 
 }
+
+const addMirror = (row: any) => {
+    mirrorDialog.value = true
+    mirrorFormRef.value.title = '新增镜像'
+    mirrorRow.value = JSON.parse(JSON.stringify(row))
+}
+
+const getMirrorData = async (data: any) => {
+    mirrorRow.value.dockerServices.push(data)
+    const res: any = await licInfoUpdate(mirrorRow.value)
+    if (res.code === 200) {
+        ElMessage.success('添加成功')
+        initLicInfo(searchValue.value, licInfoTable.pageNo, licInfoTable.pageSize)
+        mirrorDialog.value = false
+    }
+}
+
 // 删除
 const handleDelete = (id: number) => {
     ElMessageBox.confirm("请确认删除?", "删除", {
@@ -204,16 +247,44 @@ const handleDelete = (id: number) => {
         });
 }
 
+const handleServiceDelete = (row: any, id: number) => {
+    ElMessageBox.confirm("请确认删除?", "删除", {
+        confirmButtonText: "确认",
+        cancelButtonText: "取消",
+        type: "warning",
+    })
+        .then(async () => {
+            let index;
+            row.dockerServices.map((item: any, i: number) => {
+                if (item.id === id) {
+                    index = i
+                }
+            })
+            row.dockerServices.splice(index, 1)
+            const res: any = await licInfoUpdate(row)
+            if (res.code === 200) {
+                ElMessage.success('添加成功')
+                initLicInfo(searchValue.value, licInfoTable.pageNo, licInfoTable.pageSize)
+                mirrorDialog.value = false
+            }
+        })
+        .catch(() => {
+            ElMessage({
+                type: "info",
+                message: "取消删除！",
+            });
+        });
+}
+
 // 导出
 const handleExport = (data: any) => {
-    console.log(data);
     ElMessageBox.confirm("确认导出文件?", "导出", {
         confirmButtonText: "确认",
         cancelButtonText: "取消",
         type: "warning",
     })
         .then(() => {
-            licInfoFileCreate(data.macAddress, data.effectiveTime, data.verificationInterval).then((res: any) => {
+            licInfoFileCreate(data).then((res: any) => {
                 const content = res;
                 const blob = new Blob([content])
                 const downloadElement = document.createElement('a')
@@ -241,6 +312,15 @@ const handleExport = (data: any) => {
 
 const handleClose = () => {
     licInfoRef.value?.resetFields()
+    licInfoForm.formLicInfo = {
+        dockerServices: [],
+        macAddress: '',
+        effectiveTime: '',
+        fileEffectiveTime: '',
+        verificationInterval: '',
+        moduleVerification: '',
+        lqLicName: ''
+    }
     licInfoForm.dialogVisible = false
 }
 
@@ -256,4 +336,22 @@ const initLicInfo = (macAddress?: string, pageNo?: number, pageSize?: number) =>
 }
 
 initLicInfo()
-</script>
+</script>
\ No newline at end of file
+
+<style lang="scss" scoped>
+:deep(.el-empty) {
+    padding: 0;
+}
+
+:deep(.el-descriptions__title) {
+    margin-left: 20px;
+}
+
+:deep(.el-descriptions__extra) {
+    margin-right: 20px;
+}
+
+:deep(.is-bordered-label) {
+    width: 100px;
+}
+</style>
\ No newline at end of file

src/views/imageService/components/imageServiceForm.vue

+<template>
+    <el-dialog v-model="props.imageServiceDialog" :title="title" width="30%" :before-close="handleClose">
+        <el-form ref="formRef" :model="formData" label-width="100px" :rules="rules">
+            <el-form-item prop="name" label="镜像名">
+                <el-input v-model="formData.name" placeholder="请输入镜像名" />
+            </el-form-item>
+            <el-form-item prop="contextPath" label="服务路径">
+                <el-input v-model="formData.contextPath" placeholder="请输入服务路径" />
+            </el-form-item>
+            <el-form-item prop="describe" label="描述">
+                <el-input v-model="formData.describe" placeholder="请输入描述" type="textarea" />
+            </el-form-item>
+        </el-form>
+
+        <template #footer>
+            <el-button @click="handleClose">取消</el-button>
+            <el-button type="primary" @click="onConfirm">确定</el-button>
+        </template>
+    </el-dialog>
+</template>
+
+<script setup lang='ts'>
+import { ref } from 'vue'
+import { ruleProps } from '../interface/index'
+
+const props = defineProps({
+    imageServiceDialog: {
+        type: Boolean,
+        require: true
+    }
+})
+
+const emits = defineEmits(['update:imageServiceDialog', 'imageServiceData'])
+
+const formData = ref<ruleProps>({
+    id: '',
+    name: '',
+    contextPath: '',
+    describe: '',
+})
+
+const formRef = ref()
+const title = ref('新增服务镜像')
+
+const rules = ref({
+    name: [{ required: true, message: '请输入镜像名', trigger: 'blur' }],
+    // contextPath: [{ required: true, message: '请输入服务路径', trigger: 'blur' }],
+})
+
+const handleClose = () => {
+    formRef.value?.resetFields()
+    formData.value = {
+        id: '',
+        name: '',
+        contextPath: '',
+        describe: '',
+    }
+    emits('update:imageServiceDialog', false)
+}
+
+const onConfirm = () => {
+    formRef.value?.validate((valid: Boolean, fields: any) => {
+        if (valid) {
+            emits('imageServiceData', formData.value)
+        } else {
+            console.log('error submit!', fields)
+        }
+    })
+}
+
+defineExpose({
+    formData,
+    title
+})
+</script>
+ 
+<style lang = "scss" scoped>
+</style>
\ No newline at end of file

src/views/imageService/components/imageServiceTable.vue

+<template>
+    <el-drawer v-model="props.imageVersionTableDialog" title="新增" size="30%" :before-close="handleClose">
+        <div v-loading="loading">
+            <div style="display: flex;margin-bottom: 10px; justify-content: flex-start; align-items: center;">
+                <el-input v-model="versionInput" placeholder="版本" clearable width="40%" />
+                <el-button type="primary" icon="plus" style="margin-left: 10px;" @click="addData">添加
+                </el-button>
+            </div>
+            <el-table :data="imageVersionData" border stripe>
+                <el-table-column v-for="(item, i ) in labelList" :key="i" :label="item.label" :prop="item.prop"
+                    align="center" />
+                <el-table-column label="操作" align="center" width="135" fixed="right">
+                    <template #default="scope">
+                        <el-button link type="danger" size="small" @click="deleteData(scope.row.id)">删除</el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+    </el-drawer>
+
+</template>
+
+<script setup lang='ts'>
+import { ref } from 'vue'
+import {
+    getImageVersion,
+    addImageVersion,
+    deleteImageVersion
+} from '@/services/api/imageService/index';
+import { ElMessage, ElMessageBox } from 'element-plus';
+
+const props = defineProps({
+    imageVersionTableDialog: {
+        type: Boolean,
+        require: true
+    },
+})
+
+const emits = defineEmits(['update:imageVersionTableDialog'])
+
+const labelList = [
+    { label: '版本', prop: 'version' }
+]
+const imageVersionId = ref()
+const imageVersionData = ref()
+const versionInput = ref()
+const loading = ref(true)
+
+
+const addData = async () => {
+    const data = {
+        imageId: imageVersionId.value,
+        version: versionInput.value
+    }
+    const res: any = await addImageVersion(data)
+    if (res.code === 200) {
+        ElMessage.success('添加成功')
+        versionInput.value = ''
+        initVersion(imageVersionId.value)
+    }
+}
+
+const deleteData = async (id: any) => {
+    ElMessageBox.confirm('确定删除吗？', '温馨提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+    }).then(async () => {
+        const res: any = await deleteImageVersion(id)
+        if (res.code === 200) {
+            ElMessage.success('删除成功')
+            initVersion(imageVersionId.value)
+        }
+    })
+}
+
+const handleClose = () => {
+    emits('update:imageVersionTableDialog', false)
+}
+
+const initVersion = async (id: number) => {
+    loading.value = true
+    const res: any = await getImageVersion({ imageId: id })
+    if (res.code === 200) {
+        imageVersionData.value = res.data
+        loading.value = false
+    }
+}
+
+defineExpose({
+    imageVersionId,
+    initVersion
+})
+</script>
+ 
+<style lang = "scss" scoped>
+:deep(.el-input--suffix) {
+    width: 40%;
+}
+</style>
\ No newline at end of file

src/views/imageService/index.vue

+<template>
+    <div class='app-container' v-loading="loading">
+        <el-button type="primary" icon="plus" style="margin-bottom: 10px;" @click="addData">
+            新增服务镜像</el-button>
+
+        <el-table :data="tableData" border stripe>
+            <el-table-column v-for="(item, i ) in labelList" :key="i" :label="item.label" :prop="item.prop"
+                align="center" />
+            <el-table-column label="操作" align="center" width="255" fixed="right">
+                <template #default="scope">
+                    <el-button link type="primary" size="small" @click="imageVersion(scope.row.id)">服务镜像版本
+                    </el-button>
+                    <el-divider direction="vertical" />
+                    <el-button link type="primary" size="small" @click="editData(scope.row)">编辑
+                    </el-button>
+                    <el-divider direction="vertical" />
+                    <el-button link type="danger" size="small" @click="deleteData(scope.row.id)">删除</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+        <pagination :page-data="listQuery" :total="listQuery.total" @size-change="sizeChange"
+            @current-change="currentChange" />
+    </div>
+    <image-service-form ref="imageServiceFormRef" v-model:image-service-dialog="imageServiceDialog"
+        @image-service-data="getImageServiceData" />
+    <image-service-table ref="imageVersionRef" v-model:image-version-table-dialog="imageVersionTableDialog" />
+</template>
+
+<script setup lang='ts'>
+import { ref, reactive } from 'vue'
+import { ruleProps } from './interface/index'
+import {
+    getImageService,
+    addImageService,
+    updateImageService,
+    deleteImageService
+} from '@/services/api/imageService/index';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import imageServiceForm from './components/imageServiceForm.vue';
+import imageServiceTable from './components/imageServiceTable.vue';
+import pagination from '@/components/pagination/index.vue'
+
+const labelList = [
+    { label: '镜像名', prop: 'name' },
+    { label: '服务路径', prop: 'contextPath' },
+    { label: '描述', prop: 'describe' },
+]
+const imageServiceDialog = ref(false)
+const imageVersionTableDialog = ref(false)
+const loading = ref(true)
+const imageServiceFormRef = ref()
+const imageVersionRef = ref()
+
+const tableData = ref<ruleProps[]>()
+const listQuery = reactive({
+    pageNo: 1,
+    pageSize: 10,
+    total: 0
+})
+
+// 每页新条数
+const sizeChange = (val: number) => {
+    listQuery.pageSize = val
+    init()
+}
+
+// 新页数
+const currentChange = (val: number) => {
+    listQuery.pageNo = val
+    init()
+}
+
+const imageVersion = (id: number) => {
+    imageVersionRef.value.imageVersionId = id
+    imageVersionRef.value.initVersion(id)
+    imageVersionTableDialog.value = true
+}
+
+const addData = () => {
+    imageServiceFormRef.value.title = '新增服务镜像';
+    imageServiceDialog.value = true;
+}
+
+const editData = (row: any) => {
+    imageServiceFormRef.value.formData = row
+    imageServiceFormRef.value.title = '编辑服务镜像'
+    imageServiceDialog.value = true
+}
+const deleteData = (id: number) => {
+    ElMessageBox.confirm('确定删除吗？', '温馨提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+    }).then(async () => {
+        const res: any = await deleteImageService(id)
+        if (res.code === 200) {
+            ElMessage.success('删除成功')
+            init()
+        }
+    })
+}
+
+const getImageServiceData = async (formData: ruleProps) => {
+    if (!formData.id) {
+        const res: any = await addImageService(formData)
+        if (res.code === 200) {
+            ElMessage.success('添加成功')
+            init()
+            imageServiceDialog.value = false
+        }
+    } else {
+        const res: any = await updateImageService(formData)
+        if (res.code === 200) {
+            ElMessage.success('修改成功')
+            imageServiceDialog.value = false
+            init()
+        }
+    }
+}
+
+const init = async () => {
+    loading.value = true
+    const res: any = await getImageService(listQuery)
+    if (res.code === 200) {
+        loading.value = false
+        tableData.value = res.data.records
+        listQuery.total = res.data.total
+    }
+}
+
+init()
+
+</script>
+ 
+<style lang = "scss" scoped>
+</style>
\ No newline at end of file

src/views/imageService/interface/index.ts

+export interface ruleProps {
+    id?: number | string,
+    contextPath: string
+    name: string
+    describe: string
+}
+
+export interface versionProps {
+    id?: number | string
+    imageId?: number | string
+    version: string
+}
\ No newline at end of file

vite.config.ts

@@ -85,7 +85,8 @@ export default ({ command, mode }) => {
                 // '/foo': '',
                 // 选项写法
                 "/lic": {
-                    target: 'http://192.168.0.37:8090/'
+                    // target: 'http://192.168.0.40:8090/'
+                    target: 'http://192.168.0.8:8090'
                     //  rewrite: (path) => path.replace(/^\/api/, '')
                 },
                 // 正则表达式写法