Explorar o código

服务发布界面增加校验和上传

yls hai 1 ano
pai
achega
8f0e6f8583

+ 1 - 1
src/service/servicePublish.js

@@ -54,4 +54,4 @@ export function ServicePublishStop(id, tDataItem) {
         method: "post",
         data: { id, tDataItem }
     })
-}
+}

+ 91 - 6
src/views/servicePublish/Detail.vue

@@ -34,7 +34,7 @@
             </el-select>
           </el-form-item>
           <el-form-item label="发布方式" prop="publishingMode" class="item-row">
-            <el-radio-group v-model="form.basicInfo.publishingMode">
+            <el-radio-group v-model="form.basicInfo.publishingMode" @click="showPictureWay(item)">
               <el-radio :label="0">在线发布</el-radio>
               <el-radio :label="1">服务注册</el-radio>
             </el-radio-group>
@@ -45,9 +45,28 @@
         </el-form>
         <span class="detail-part-title">服务信息</span>
         <el-form :model="form.extentInfo" :rules="formRules.extentInfo" label-position="top" ref="extentInfo" class="form-detail">
-          <el-form-item label="服务地址" prop="serviceRealUrl" class="item-row">
+          <el-form-item label="服务地址" prop="serviceRealUrl" class="item-row" v-if="showDetail">
             <el-input type="textarea" :rows="4" v-model="form.extentInfo.serviceAddress" placeholder="请输入服务地址"></el-input>
           </el-form-item>
+
+          <el-form-item label="配置文件" prop="publishingMode" class="item-row" v-if="showDetail2">
+            <el-radio-group v-model="form.extentInfo.serviceOption">
+              <el-radio :label="0">上传配图
+                  <el-upload
+                          ref="upload"
+                          class="upload-demo"
+                          :action="uploadState.uploadUrl"
+                          :on-change="handleChange"
+                          :on-success="handleSuccess"
+                  >
+                      <el-button class="btn-default">上传文件</el-button>
+                  </el-upload>
+              </el-radio>
+              <el-radio :label="1">在线配图
+                <el-button class="btn-default">配置</el-button>
+              </el-radio>
+            </el-radio-group>
+          </el-form-item>
         </el-form>
       </div>
     </div>
@@ -60,12 +79,19 @@ import { useRoute, useRouter } from 'vue-router'
 import {onBeforeMount} from "@vue/runtime-core";
 import {ServicePublishAdd, ServicePublishDetail, ServicePublishEdit} from "../../service/servicePublish";
 import {ElMessage} from "element-plus";
-import {select_test} from '../../utils/data/select-data';
 import createEnum from "../../utils/data/create-enum";
 
 const route = useRoute()
 const router = useRouter()
 
+
+
+
+const uploadState = reactive({
+    uploadUrl: 'http://10.81.74.131:8089/data-asset-manage-service/upload/imgUpload',
+    headers: { Authorization: "Bearer " },
+})
+
 const form = reactive({
   basicInfo: {
     serviceName: '',
@@ -75,9 +101,23 @@ const form = reactive({
     publishingMode: ''
   },
   extentInfo: {
-    serviceAddress: ''
+    serviceAddress: '',
+    file:''
   }
 })
+
+const fileUrl=ref(null);
+function handleClick() {
+            this.$refs.upload.submit();
+        }
+function handleChange(file) {
+            console.log(file)
+        }
+function  handleSuccess(res) {
+
+    fileUrl.value=res
+    console.log(fileUrl)
+}
 const select_serviceType = createEnum([
   {value: 0, label: '栅格切片'},
   {value: 1, label: '三维服务'},
@@ -101,10 +141,51 @@ const formRules = reactive({
   },
   extentInfo: {
     serviceAddress: { required: true, message: '请输入服务地址', trigger: 'blur' },
+    file: { required: true, message: '请选择服务图片', trigger: 'blur' },
   }
 })
+const showDetail = ref(false)
+const showDetail2 = ref(false)
+function showPictureWay(val) {
+  if (form.basicInfo.publishingMode === 1) {
+    showDetail.value = false;
+    showDetail2.value = true;
+  } else {
+    showDetail.value = true;
+    showDetail2.value = false;
+  }
+}
+function retuSucc(response, file, fileList) {
+  this.$emit("handleSearch")
+  if (response.code == '200') {
+    this.$notify.success({
+      title: '导入成功',
+      duration: 3000
+    });
+  }
+  if (response.code == '500') {
+    this.$notify.error({
+      title: '导入出现问题',
+      duration: 15000
+    });
+  }
+  if (response.code == '400') {
+    this.$notify.warning({
+      title: '导入成功',
+      duration: 10000
+    });
+  }
+}
+function fileProgress(event, file, fileList) {
+  this.$notify('文件正在上传解析');
+}
 
 
+function handleFileSuccess(res){
+    console.log(res)
+    this.$refs.upload.clearFiles();
+}
+
 function handleClose() {
   router.push({
     name: route.name.slice(0,-6)
@@ -112,9 +193,8 @@ function handleClose() {
 }
 const basicInfo = ref(null)
 const extentInfo = ref(null)
-
+// 整个提交表单
 function handleSave() {
-  console.log(basicInfo.value)
   Promise.all([basicInfo.value.validate(), extentInfo.value.validate()]).then(valid => {
     if(valid.findIndex(val => val===false)===-1) {
       // 校验通过
@@ -125,9 +205,14 @@ function handleSave() {
       for (const k in form.extentInfo) {
         pForm[k] = form.extentInfo[k]
       }
+
+      pForm.serviceOption=fileUrl.value;
+        console.log(pForm);
       if(route.params.type==='edit') {
         // 编辑
         pForm['id'] = route.params.id
+
+          // 只上传路径的接口
         ServicePublishEdit(pForm).then(res => {
           if(res.code=='200'&&res.msg==='修改成功') {
             ElMessage({type:'success', message: '修改成功'})

+ 23 - 65
src/views/servicePublish/Index.vue

@@ -13,9 +13,9 @@
             <span
                     class="table-column-state"
                     :class="{
-              'state-green':scope.row.stateName==='正在发布',
-              'state-gray':scope.row.stateName==='停止',
-              'state-red':scope.row.stateName==='发布异常'||scope.row.stateName==='运行异常',
+              'state-green':scope.row.stateName==='发布中'||scope.row.stateName==='发布成功'||scope.row.stateName==='服务运行中',
+              'state-gray':scope.row.stateName==='服务停止',
+              'state-red':scope.row.stateName==='发布失败'||scope.row.stateName==='服务运行异常',
               'state-blue':scope.row.stateName==='待发布',
             }">
                 {{ scope.row.stateName }}
@@ -88,23 +88,29 @@
     function getData() {
         ServicePublishList(currentPage.value, pageSize.value, quickSearch.value).then(res => {
             tableData.value = res.data.records
-            tableTotal.value = res.total
+            tableTotal.value = res.data.total
             for (let data of tableData.value) {
                 switch (data.state) {
                     case 1:
                         data.stateName = '待发布'
                         break
                     case 2:
-                        data.stateName = '正在发布'
+                        data.stateName = '发布'
                         break
                     case 3:
-                        data.stateName = '发布异常'
+                        data.stateName = '发布成功'
                         break
                     case 4:
-                        data.stateName = '停止'
+                        data.stateName = '发布失败'
                         break
                     case 5:
-                        data.stateName = '运行异常'
+                        data.stateName = '服务停止'
+                        break
+                    case 6:
+                        data.stateName = '服务运行中'
+                        break
+                    case 7:
+                        data.stateName = '服务运行异常'
                         break
                 }
                 switch (data.serviceType) {
@@ -175,72 +181,22 @@
 
     function toActivate(row) {
         ServicePublishStart(row.id).then(res => {
-            if (res.code == '200' && res.msg === '启动成功') {
+            if (res.code == '200' && res.data === '启动成功') {
                 ElMessage({type: 'success', message: '已启动'})
-                    getData(currentPage.value, pageSize.value)
+                getData()
             }
         })
-        // ElMessageBox.confirm(
-        //     '确认启用?',
-        //     '提示',
-        //     {
-        //         confirmButtonText: '确认',
-        //         cancelButtonText: '取消',
-        //         type: 'warning',
-        //     }
-        // )
-        //     .then(() => {
-        //         ServicePublishStart(row.id).then(res => {
-        //             if (res.code === 200) {
-        //                 ElMessage({
-        //                     type: 'success',
-        //                     message: '已启动',
-        //                 })
-        //                 this.getData()
-        //             }
-        //         })
-        //     })
-        //     .catch(() => {
-        //         ElMessage({
-        //             type: 'info',
-        //             message: '已取消',
-        //         })
-        //     })
+
     }
 
     const toStop = (row) => {
         ServicePublishStop(row.id).then(res => {
-            if (res.code == '200' && res.msg === '停止成功') {
+            console.log(res)
+            if (res.code == '200' && res.data === '停止成功') {
                 ElMessage({type: 'success', message: '已停止'})
-                    getData(currentPage.value, pageSize.value)
+                getData()
             }
         })
-        // ElMessageBox.confirm(
-        //     '确认停止?',
-        //     '提示',
-        //     {
-        //         confirmButtonText: '确认',
-        //         cancelButtonText: '取消',
-        //         type: 'warning',
-        //     }
-        // )
-        //     .then(() => {
-        //         ServicePublishStop(row.id).then(res => {
-        //             if (res.code === 200) {
-        //                 ElMessage({
-        //                     type: 'success',
-        //                     message: '已停止',
-        //                 })
-        //                 this.getData()
-        //             }
-        //         })
-        //     })
-        //     .catch(() => {
-        //         ElMessage({
-        //             type: 'info',
-        //             message: '已取消',
-        //         })
-        //     })
     }
 
     function toEdit(row) {
@@ -255,11 +211,13 @@
 
     function handleDelete(row) {
         ServicePublishDelete(row.id).then(res => {
-            if (res.code == '200' && res.msg === '删除成功') {
+            if (res.code == '200' && res.data === '删除成功') {
                 ElMessage({type: 'success', message: '已删除'})
                 if (currentPage.value !== 1 && tableData.value.length === 1) {
+                    console.log(1)
                     getData(currentPage.value - 1)
                 } else {
+                    console.log(2)
                     getData(currentPage.value)
                 }
             }