From d443433fa03a966b6674091bebe469b8c2483bb0 Mon Sep 17 00:00:00 2001
From: cloudroam <cloudroam>
Date: 星期五, 29 十一月 2024 16:51:39 +0800
Subject: [PATCH] fix:1129 端口调整成必填;增加区域的图片如果已经定义返回定义的图片

---
 src/components/add-area-item.vue |  145 ++++++++++++++++++++++++++++++++++++++---------
 1 files changed, 116 insertions(+), 29 deletions(-)

diff --git a/src/components/add-area-item.vue b/src/components/add-area-item.vue
index e579647..187fe7d 100644
--- a/src/components/add-area-item.vue
+++ b/src/components/add-area-item.vue
@@ -9,21 +9,28 @@
 
         <div class="flex m-t-2rem">
           <div class="label require">区域编号:</div>
-          <el-input v-model="areacode"></el-input>
+          <el-select v-model="areacode" placeholder="请选择区域编号" width="28rem" @change="handleAreaCodeChange">
+            <el-option
+                v-for="item in areaCodes"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id">
+            </el-option>
+          </el-select>
         </div>
         <div class="flex m-t-2rem">
-          <div class="label require">区域名称:</div>
+          <div class="label require">产线名称:</div>
           <el-input v-model="areaName"></el-input>
         </div>
         <div class="flex m-t-2rem">
           <div class="label require">布局数量:</div>
-          <el-input v-model="areaConfigNum"></el-input>
+          <el-input-number size="medium" v-model="areaConfigNum" :min="500" label="最小是500"></el-input-number>
         </div>
         <div class="flex m-t-2rem">
-          <div class="label require">首页背景:</div>
-          <el-upload
+          <div class="label require">产线背景:</div>
+          <el-upload v-if="open"
               class="upload-demo"
-              action="http://localhost:44311/home/UploadFile"
+              :action="getUploadAction()"
               :before-upload="beforeUpload"
               :on-preview="handlePreview"
               :on-remove="handleRemove"
@@ -39,9 +46,9 @@
         </div>
         <div class="flex m-t-2rem">
           <div class="label require">区域背景:</div>
-          <el-upload
+          <el-upload v-if="open"
               class="upload-demo"
-              action="http://localhost:44311/home/UploadFile"
+              :action="getUploadAction()"
               :before-upload="beforeUpload"
               :on-preview="handlePreview"
               :on-remove="handleRemove"
@@ -58,7 +65,7 @@
         <div class="m-t-2rem flex">
           <div style="text-align: center;" class="flex">
             <div class="equ-form-add-button-confirm" @click="submit">确认</div>
-            <div class="equ-form-add-button-cancel" @click="open = false">取消</div>
+            <div class="equ-form-add-button-cancel" @click="cancel">取消</div>
           </div>
 
         </div>
@@ -68,7 +75,9 @@
 </template>
 
 <script>
-import {addAreaItemInfo} from "@/api/addareaitem";
+import {addAreaItemInfo, updateAreaModuleItem} from "@/api/addareaitem";
+import {getAreaCode} from "@/api/area";
+import service from '@/utils/request-api'
 
 export default {
   props: {
@@ -89,37 +98,73 @@
       editItemId: '',
       filename1: '',
       filename2: '',
+      areaCodes:[],
     };
   },
   mounted() {
+    this.getAreaCode();
   },
   methods: {
-      async submit() {
-
-        if (!this.uploadUrl || !this.areaBackGroudURL || !this.areacode || !this.areaConfigNum || !this.areacode) {
-          this.$message.warning("数据未填写完整");
-          return;
-        }
-        await this.$modal.confirm("确定新增区域吗?");
+    async submit() {
+      if (!this.uploadUrl || !this.areaBackGroudURL || !this.areacode || !this.areaConfigNum || !this.areacode) {
+        this.$message.warning("数据未填写完整");
+        return;
+      }
+      if (this.editItemId != null && this.editItemId != '') {
+        await this.$modal.confirm("确定要编辑区域吗?");
         var dto = {
-          xVal: this.menuPositionx,
-          yVal: this.menuPositiony,
+          id: this.editItemId,
           uRL: this.uploadUrl,
           areaBackGroudURL: this.areaBackGroudURL,
-          areaConfigNum : this.areaConfigNum,
+          areaConfigNum: this.areaConfigNum,
           areacode: this.areacode,
           tVal: this.areaName,
-          moduleName : this.filename1,
-          areaBackGroudName : this.filename2,
+          moduleName: this.filename1,
+          areaBackGroudName: this.filename2,
         };
-        const re = await addAreaItemInfo(dto);
+        const re = await updateAreaModuleItem(dto);
         if (re.isSuccess) {
           this.$emit('update-area-list'); // 触发自定义事件
-          this.$message.success("创建成功");
-          this.open = false;
+          this.editItemId = '';
+          this.$message.success("编辑成功");
+          //this.open = false;
+          this.cancel();
         }
-      },
+      } else {
+      await this.$modal.confirm("确定新增区域吗?");
+      var dto = {
+        xVal: this.menuPositionx,
+        yVal: this.menuPositiony,
+        uRL: this.uploadUrl,
+        areaBackGroudURL: this.areaBackGroudURL,
+        areaConfigNum: this.areaConfigNum,
+        areacode: this.areacode,
+        tVal: this.areaName,
+        moduleName: this.filename1,
+        areaBackGroudName: this.filename2,
+      };
+      const re = await addAreaItemInfo(dto);
+      if (re.isSuccess) {
+        this.$emit('update-area-list'); // 触发自定义事件
+        this.$message.success("创建成功");
+        //this.open = false;
+        this.cancel();
+      }
+    }
+  },
+    async cancel() {
+      this.editItemId = '';
+      this.areacode = '';
+      this.areaName = '';
+      this.areaConfigNum = '';
+      this.fileList = [];
+      this.fileList2 = [];
+      this.uploadUrl = '';
+      this.areaBackGroudURL = '';
+      this.open = false;
+    },
     openConfig() {
+      this.cancel();
       this.open = !this.open;
     },
     editConfig(editItem) {
@@ -136,9 +181,11 @@
         name : editItem.areaBackGroudName,
       }
       this.fileList[0] = fileInfo1;
-      this.fileList2[0].name = fileInfo2;
-
-      console.log( " this.fileList",this.fileList)
+      this.fileList2[0] = fileInfo2;
+      console.log("this.fileList[0]",this.fileList[0])
+      console.log("this.fileList2[0]",this.fileList2[0])
+      this.uploadUrl = editItem.imgSrc;
+      this.areaBackGroudURL = editItem.areaBackGroudURL;
     },
     handleRemove(file, fileList) {
       console.log(file, fileList);
@@ -159,6 +206,11 @@
     async beforeUpload(file) {
       return true;
     },
+    getUploadAction(){
+      this.baseURL = service.defaults.baseURL;
+      console.log("this.baseURL", this.baseURL)
+      return this.baseURL+"/home/UploadFile";
+    },
     handleSuccess(response, file, fileList) {
       // 在这里处理文件上传成功的逻辑,例如保存响应数据到组件的状态中。
       this.$message.success('文件上传成功');
@@ -166,6 +218,7 @@
       this.uploadUrl = response.result;
       this.filename1 = file.name;
       console.log('文件上传成功地址', this.uploadUrl);
+      console.log('file.name',  this.filename1);
     },
     handleError(err, file, fileList) {
       // 在这里处理文件上传失败的逻辑,例如显示错误消息。
@@ -180,6 +233,40 @@
       this.filename2 = file.name;
       console.log('文件上传成功地址', this.uploadUrl);
     },
+    getAreaCode(){
+      getAreaCode().then((res) => {
+        this.areaCodes = res.cabinetList || [];
+      });
+    },
+    handleAreaCodeChange(selectedAreaCode) {
+      const selectedArea = this.areaCodes.find(area => area.id === selectedAreaCode);
+      if (selectedArea && selectedArea.areaConfigNum !== undefined) {
+        this.areaConfigNum = selectedArea.areaConfigNum;
+      } else {
+        this.areaConfigNum = 500; // 使用默认值
+      }
+      if (selectedArea && selectedArea.areaBackGroudName !== undefined && selectedArea.areaBackGroudURL !== undefined) {
+        // 检查返回的数据是否为空
+        if (selectedArea.areaBackGroudName && selectedArea.areaBackGroudURL) {
+          var fileInfo2 = {
+            name: selectedArea.areaBackGroudName,
+          };
+          // 创建一个新的数组并替换旧的数组
+          this.fileList2 = [fileInfo2];
+          console.log("this.fileList2[0]", this.fileList2[0]);
+          this.areaBackGroudURL = selectedArea.areaBackGroudURL;
+        } else {
+          // 如果返回的数据为空,清空 fileList2
+          this.fileList2 = [];
+          console.log("No background info available");
+        }
+      } else {
+        // 如果 selectedArea 不存在或没有背景信息,清空 fileList2
+        this.fileList2 = [];
+        console.log("No background info available");
+      }
+    },
+
   },
   watch: {},
 };

--
Gitblit v1.9.3