fix:1129 端口调整成必填；增加区域的图片如果已经定义返回定义的图片

cloudroam

2024-11-29 d443433fa03a966b6674091bebe469b8c2483bb0

 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: {},
};