V0.3

package-lock.json

@@ -8,6 +8,7 @@
       "name": "ipbs_v_server_web",
       "version": "0.0.0",
       "dependencies": {
+        "@element-plus/icons-vue": "^2.3.1",
         "axios": "^1.7.9",
         "element-plus": "^2.9.3",
         "nprogress": "^0.2.0",

src/components/Aside/UI_3.vue

@@ -5,9 +5,21 @@
         <el-button type="primary" @click.stop="UpData">
           刷新
         </el-button>
-        <el-button type="primary" @click.stop="UpLoad">
+        <el-button type="primary" @click.stop="CreateLoad">
-          上传新版本
+          创建新版本
         </el-button>
+        <el-select
+            v-model="DataDB.SelectType"
+            placeholder="Select"
+            style="width: 180px;margin-left: 10px;"
+        >
+          <el-option
+              v-for="item in TypeOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+          />
+        </el-select>
       </el-row>
     </el-scrollbar>
     <div style="margin-left: 1%;margin-top: 1%;">
@@ -23,11 +35,14 @@
             {{ Convert(scope.row.Size) }} MB
           </template>
         </el-table-column>
-        <el-table-column label="操作" align="center" width="200">
+        <el-table-column label="操作" align="center" width="280">
           <template #default="scope">
             <el-link type="primary" @click.stop="Download(scope.row.ID)">
               下载
             </el-link>
+            <el-link type="primary" @click.stop="UpLoad(scope.row)" style="margin-left: 10px;">
+              编辑升级包
+            </el-link>
             <el-link type="danger" @click.stop="Delete(scope.row.ID)" style="margin-left: 10px;">
               删除
             </el-link>
@@ -37,45 +52,210 @@
     </div>
   </el-scrollbar>
 
-  <el-dialog v-model="dialogTableVisible1" title="上传新版本" width="800">
+  <el-dialog
-    <el-upload
+      v-model="dialogTableVisible1"
-        v-model:file-list="DataDB.fileList"
+      title="创建新版本"
-        ref="UpLoadDemo"
+      width="800"
-        class="upload-demo"
+      draggable
-        drag
+  >
-        :action="Api.GetOHBSVUpload"
+    <el-form label-position="left" label-width="150">
-        multiple
+      <el-form-item label="名称">
-        limit="3"
+        <el-input v-model="FormData.Name" style="width: 450px;"/>
-        :on-success="BUpload"
+      </el-form-item>
-    >
+      <el-form-item label="版本号">
-      <el-icon class="el-icon--upload"><upload-filled /></el-icon>
+        <el-input v-model="FormData.Version" style="width: 450px;"/>
-      <div class="el-upload__text">
+      </el-form-item>
-        将文件放到这里或<em>点击上传</em>
+      <el-form-item label="升级包类型">
-      </div>
+        <el-select
-    </el-upload>
+            v-model="FormData.Type"
+            placeholder="Select"
+            style="width: 450px;"
+        >
+          <el-option
+              v-for="item in TypeOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="更新描述">
+        <el-input
+            v-model="FormData.Description"
+            style="width: 450px;"
+            type="textarea"
+            rows="5"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button
+          type="primary"
+          @click.stop="CreateLoadQX"
+          :disabled="upload"
+      >
+        取消
+      </el-button>
+      <el-button
+          type="primary"
+          @click.stop="CreateLoadQR"
+          v-loading="upload"
+      >
+        确定
+      </el-button>
+    </template>
+  </el-dialog>
+
+  <el-dialog
+      v-model="dialogTableVisible2"
+      title="编辑升级包"
+      width="800"
+      draggable
+      destroy-on-close
+      :before-close="beforeCloseDialog"
+  >
+    <el-form label-position="left" label-width="150">
+      <el-form-item label="名称">
+        <el-input v-model="FormData.Name" style="width: 450px;" :disabled="true"/>
+      </el-form-item>
+      <el-form-item label="版本号">
+        <el-input v-model="FormData.Version" style="width: 450px;" :disabled="true"/>
+      </el-form-item>
+      <el-form-item label="存储方式">
+        <el-select
+            v-model="FormData.LinkFlag"
+            placeholder="Select"
+            style="width: 450px;"
+        >
+          <el-option
+              v-for="item in TypeLink"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="选择文件" v-if="FormData.LinkFlag === 0">
+        <el-upload
+            v-model:file-list="DataDB.fileList"
+            ref="uploadRef"
+            :action="Api.GetOHBSVUpload + '?ID=' + FormData.ID"
+            :on-success="BUpload"
+            :on-error="EUpload"
+            :auto-upload="false"
+            @close="CloseDialog"
+        >
+          <el-button type="primary">
+            选择文件
+          </el-button>
+          <template #file="{ file }">
+            <el-row>
+              <el-col :span="16">
+                <div class="file-name-left">
+                  <el-tooltip :content="file.name" placement="top" :show-after="1000">
+                    <span class="TextOverflow">{{ file.name }}</span>
+                  </el-tooltip>
+                </div>
+              </el-col>
+              <el-col :span="8">
+                <el-row v-if="file.status === 'uploading'" class="progress-with-text">
+                  <el-progress
+                      :percentage="Math.round(file.percentage)"
+                      :show-text="false"
+                      style="width: 150px;margin-right: 40px;margin-top: -2px;"
+                  />
+                  <span style="margin-top: 1px;margin-right: 5px;">
+                    {{ file.percentage }}%
+                  </span>
+                </el-row>
+                <div v-else-if="file.status === 'success'" class="upload-success">
+                  <el-icon color="#67C23A" style="margin-right: 5px;"><Check /></el-icon>
+                </div>
+                <div v-else-if="file.status === 'fail'" class="upload-fail">
+                  <el-icon color="#F56C6C" style="margin-right: 5px;"><Close /></el-icon>
+                </div>
+              </el-col>
+            </el-row>
+          </template>
+        </el-upload>
+      </el-form-item>
+      <el-form-item label="文件链接" v-else-if="FormData.LinkFlag === 1">
+        <el-input v-model="FormData.Link" style="width: 450px;"/>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button
+          @click.stop="UpLoadQX"
+          :disabled="upload"
+      >
+        取消
+      </el-button>
+      <el-button
+          type="primary"
+          @click.stop="UpLoadQR"
+          v-loading="upload"
+      >
+        确定
+      </el-button>
+    </template>
   </el-dialog>
 </template>
 
 <script setup>
-import {onMounted, reactive, ref} from "vue";
+import {onBeforeMount, onMounted, reactive, ref} from "vue";
 import {Api, RequestPost, User} from "../JS/RequestAPI.js";
 import {ElMessage, ElMessageBox} from "element-plus";
 import {UploadFilled} from "@element-plus/icons-vue";
+
+const uploadRef = ref();
+
 onMounted(()=>{
   GetData();
 });
+onBeforeMount(()=>{
+
+});
+
 const dialogTableVisible1 = ref(false);
 const dialogTableVisible2 = ref(false);
-const UpLoadDemo = ref();
+const upload = ref(false);
 const UpLoadBin = ref();
+const TypeOptions = ref([
+  {
+    value: 0,
+    label: 'OpenHarmony_BS'
+  },
+  {
+    value: 1,
+    label: 'CS_Server'
+  },
+]);
+const TypeLink = ref([
+  {
+    value: 0,
+    label: '内部链接'
+  },
+  {
+    value: 1,
+    label: '外部链接'
+  },
+]);
+
 const DataDB = reactive({
   tableData:[],
   fileList:[],
+  SelectType:0,
 });
-const StaterDB = reactive({
+const FormData = reactive({
-  Ver:'',
+  ID:0,
-  URL:'',
+  Name: "",
+  Description: "",
+  Version: "",
+  Link: "",
+  Type: 0,
+  LinkFlag: 0,
 });
+
 function UpData(){
   GetData();
 }
@@ -127,15 +307,150 @@ function Delete(ID){
     })
   }).catch(() => {});
 }
-function UpLoad(){
+function CreateLoad(){
-  DataDB.fileList = [];
+  upload.value = false;
   dialogTableVisible1.value = true;
 }
+function CreateLoadQX(){
+  dialogTableVisible1.value = false;
+}
+function CreateLoadQR(){
+  RequestPost(Api.AddData,JSON.stringify({
+    User:User.User,
+    Pwd:User.Pwd,
+    Name:FormData.Name,
+    Description:FormData.Description,
+    Version:FormData.Version,
+    Type:FormData.Type,
+  }),(res)=>{
+    const data = res.data;
+    if(data.Code === 1){
+      ElMessage.success('创建成功');
+      dialogTableVisible1.value = false;
+      GetData();
+    }
+    else{
+      if(data.Code === 2){
+        ElMessage.error('权限认证失败');
+      }
+      else {
+        ElMessage.error('创建失败');
+      }
+    }
+  });
+}
+function UpLoad(Row){
+  try {
+    DataDB.fileList = [];
+    uploadRef.value.clearFiles();
+  }
+  catch (e){}
+  FormData.ID = Number(Row.ID);
+  FormData.Name = Row.Name;
+  FormData.Version = Row.Version;
+  dialogTableVisible2.value = true;
+  upload.value = false;
+}
+function UpLoadQX(){
+  dialogTableVisible2.value = false;
+}
+function UpLoadQR(){
+  upload.value = true;
+  uploadRef.value.submit();
+}
 function BUpload(){
+  dialogTableVisible2.value = false;
+  upload.value = false;
+  ElMessage.success('文件上传成功');
   GetData();
 }
+function EUpload(){
+  upload.value = false;
+  ElMessage.error('文件上传失败');
+}
+const beforeCloseDialog = (done) => {
+  // 判断是否有未保存的更改或其他条件
+  if (upload.value) {
+    ElMessageBox.confirm('还有未完成的操作，确定要关闭吗？', '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+    }).then(() => {
+      done(); // 确认后才关闭
+    }).catch(() => {
+      // 用户取消，不执行 done()，对话框保持打开
+    });
+  } else {
+    done(); // 直接关闭
+  }
+};
+function CloseDialog(){
+  try {
+    uploadRef.value.abort();
+  }
+  catch (e){}
+}
 </script>
 
 <style scoped>
+.TextOverflow{
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: inline-block;
+  width: 440px;
+}
+.TextOverflow:hover{
+  cursor: pointer;
+}
 
+.file-name-left {
+  text-align: left;
+  align-items: center;
+  justify-items: center;
+  display: flex;
+  margin-left: 10px;
+  font-size: 18px;
+  height: 35px;
+}
+.file-info-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+
+.file-status-right {
+  margin-left: 10px;
+  width: 100px;
+}
+
+.progress-with-text {
+  text-align: right;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  width: 100%;
+  height: 40px;
+}
+
+.progress-with-text ::v-deep(.el-progress-bar) {
+  flex: 1;
+}
+
+.progress-with-text ::v-deep(.el-progress__text) {
+  margin-left: 10px;
+  font-size: 12px;
+  color: #606266;
+  white-space: nowrap;
+  width: 100%;
+  height: 40px;
+}
+
+.upload-success, .upload-fail {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  width: 100%;
+  height: 40px;
+}
 </style>

src/components/JS/RequestAPI.js

@@ -15,6 +15,7 @@ export const Api = reactive({
     GetOHBSVData: ref(RootURL + '/UI_3/GetData'),
     GetOHBSVDownload: ref(RootURL + '/UI_3/Download'),
     GetOHBSVUpload: ref(RootURL + '/UI_3/Upload'),
+    AddData: ref(RootURL + '/UI_3/AddData'),
     GetOHBSVDelete: ref(RootURL + '/UI_3/DeleteData'),
 });
 export const User = reactive({

src/components/Main/Home.vue

@@ -14,7 +14,7 @@
       <span>BS更新服务</span>
     </el-menu-item>
     <el-menu-item index="/UI_3">
-      <span>OpenHarmony-BS更新服务</span>
+      <span>程序更新服务</span>
     </el-menu-item>
   </el-menu>
   <div style="height: calc(100vh - 80px)">