官网管理上传修改

src/router/index.js

@@ -144,7 +144,6 @@ const routes = [
         name: 'officialWebsiteBanner',
         component: () => import('../views/officialWebsite/banner.vue')
       },
-     // 官网修改
      {
       path: '/officialWebsiteCase',
       name: 'officialWebsiteCase',
@@ -157,6 +156,10 @@ const routes = [
       path: '/officialWebsiteProduct',
       name: 'officialWebsiteProduct',
       component: () => import('../views/officialWebsite/product.vue')
+    }, {
+      path: '/officialWebsiteDetail',
+      name: 'officialWebsiteDetail',
+      component: () => import('../views/officialWebsite/detail.vue')
     },
     ]
     }, 

src/views/index.vue

@@ -104,7 +104,7 @@ export default {
                 // { name: '设备菜单', router: '', routerList: [], img: require('../assets/image/header-img5.png') },
                 //systemManage systemManage
                 // manage
-                { name: '管理', router: 'manage', routerList: ['manage','dataDevice','deviceStatusSet','officialWebsiteBanner','officialWebsiteProduct','officialWebsiteCase','officialWebsiteNews','deviceSet','deviceInfoManage','weatherData','mobileControl','userInfoControl','deviceManage','videoManage'], img: require('../assets/image/header-img6.png') },
+                { name: '管理', router: 'manage', routerList: ['manage','dataDevice','deviceStatusSet','officialWebsiteBanner','officialWebsiteProduct','officialWebsiteCase','officialWebsiteDetail','officialWebsiteNews','deviceSet','deviceInfoManage','weatherData','mobileControl','userInfoControl','deviceManage','videoManage'], img: require('../assets/image/header-img6.png') },
 
                 { name: '大数据', router: 'largeScreen', routerList: ['largeScreen'], img: require('../assets/image/header-img8.png') }
             ],
@@ -139,6 +139,7 @@ export default {
 'userInfoControl',
 'officialWebsiteCase',
 'officialWebsiteNews',
+'officialWebsiteDetail',
 'officialWebsiteProduct',
 'deviceManage',
 'videoManage',
@@ -411,6 +412,7 @@ export default {
                      {deviceTypeName:'官网顶部轮播图管理',router:'officialWebsiteBanner',index:8},
                      {deviceTypeName:'官网产品管理',router:'officialWebsiteProduct',index:11},
                      {deviceTypeName:'官网案例管理',router:'officialWebsiteCase',index:9},
+                     {deviceTypeName:'官网公司简介',router:'officialWebsiteDetail',index:12},
                      {deviceTypeName:'官网新闻管理',router:'officialWebsiteNews',index:10},
                     // {deviceTypeName:'摄像头信息管理',router:'videoManage',index:8},
                 ] },

src/views/officialWebsite/banner.vue

@@ -199,13 +199,20 @@ export default {
       }
     },
     changeAddModel() {
+        if(this.loading){
+           this.$message.error("图片还未上传成功，请耐心等待。");
+           return
+        }
+       if(!this.nowData.homepaeImage){
+           this.$message.error("图片还未上传。");
+           return
+         }
          this.Addloading = this.$loading({
         lock: true,
         text: "加载中",
         spinner: "el-icon-loading",
         background: "rgba(0, 0, 0, 0.7)",
       });
-     
       if (this.modelName == "编辑") {
          var data = { ...this.nowData,id:this.nowData.id.toString() };
         this.api.website_updateows(data).then((res) => {
@@ -221,6 +228,7 @@ export default {
         });
       } else {
          var data = { ...this.nowData};
+       
         this.api.website_addows(data).then((res) => {
           this.Addloading.close();
           if (res.data.code == 200) {
@@ -268,6 +276,9 @@ export default {
           } else {
              this.$message.error(res.data.msg);
           }
+        }).catch((err) => {
+          this.loading = false;
+          this.$message.error("插入图片失败");
         });
       };
       reader.readAsArrayBuffer(file);

src/views/officialWebsite/case.vue

@@ -209,15 +209,25 @@ detailedIntroductionTextEnTitle:'',
       }
     },
     changeAddModel() {
+    
+       if(this.loading){
+           this.$message.error("图片还未上传成功，请耐心等待。");
+           return
+        }
+          if(!this.nowData.detailedIntroductionImage){
+           this.$message.error("图片还未上传。");
+           return
+         }
             this.Addloading = this.$loading({
         lock: true,
         text: "加载中",
         spinner: "el-icon-loading",
         background: "rgba(0, 0, 0, 0.7)",
       });
-      
       if (this.modelName == "编辑") {
         var data = { ...this.nowData,id:this.nowData.id.toString() };
+       
+        
         this.api.website_updateops(data).then((res) => {
           this.Addloading.close();
           if (res.data.code == 200) {
@@ -278,6 +288,9 @@ detailedIntroductionTextEnTitle:'',
           } else {
              this.$message.error(res.data.msg);
           }
+        }).catch((err) => {
+          this.loading = false;
+          this.$message.error("插入图片失败");
         });
       };
       reader.readAsArrayBuffer(file);

src/views/officialWebsite/detail.vue

@@ -0,0 +1,299 @@
+<template>
+  <div class="videoManage manage-page">
+    <div class="flex-view flex-title">
+      <div class="table-title">官网公司简介</div>
+      <div class="table-title-btn blue" @click="openModel({}, 0)">
+        <img src="../../assets/manageImg/add-btn.png" alt="" />添加
+      </div>
+    </div>
+    <div class="table-view">
+      <el-table
+        :data="tableData"
+        :row-class-name="tableRowClassName"
+        height="620"
+        style="width: 100%"
+      >
+        <el-table-column prop="detailedIntroductionSort" label="排序">
+        </el-table-column>
+         <el-table-column prop="detailedIntroductionName" label="公司名称">
+        </el-table-column>
+           <el-table-column prop="detailedIntroductionEnName" label="公司英文名称">
+        </el-table-column>
+        <el-table-column label="操作">
+          <template slot-scope="scope">
+            <div class="table-flex">
+              <div class="table-operate blue" @click="openModel(scope.row, 1)">
+                <img src="../../assets/manageImg/table-edit.png" alt="" />编辑
+              </div>
+              <el-popconfirm
+                @confirm="confirmDel(scope.row)"
+                title="这一段内容确定删除吗？"
+                icon-color="red"
+              >
+                <div class="table-operate red" slot="reference">
+                  <img
+                    src="../../assets/manageImg/table-delete.png"
+                    alt=""
+                  />删除
+                </div>
+              </el-popconfirm>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <el-dialog
+      :close-on-click-modal="false"
+      title="提示"
+      top="5vh"
+      :visible.sync="addModel"
+      width="700px"
+      class="vrcode-model manage-model"
+      :append-to-body="true"
+    >
+      <div class="vrcode-model-title">
+        {{ modelName }}
+      </div>
+      <div class="vrcode-content " v-if="nowData">
+        <div class="manage-left">
+          <div class="manage-input">
+            <div class="input-title">公司名称</div>
+            <input
+              type="text"
+              v-model="nowData.detailedIntroductionName"
+              placeholder="请输入公司名称"
+            />
+          </div>
+          <div class="manage-input">
+            <div class="input-title">公司英文名称</div>
+            <input
+              type="text"
+              v-model="nowData.detailedIntroductionEnName"
+              placeholder="请输入公司英文名称"
+            />
+          </div>
+        
+          <div class="manage-input">
+            <div class="input-title">排序</div>
+            <input
+              type="number"
+              v-model="nowData.detailedIntroductionSort"
+              placeholder="请输入排序"
+            />
+             <div class="manage-textarea">
+               <div class="input-title">公司中文简介(以回车键换行)</div>
+               <textarea v-model="nowData.detailedIntroductionText" name="" id="" cols="30" rows="10"></textarea>
+          </div>
+            <div class="manage-textarea">
+               <div class="input-title">公司英文简介(以回车键换行)</div>
+               <textarea v-model="nowData.detailedIntroductionEnText" name="" id="" cols="30" rows="10"></textarea>
+          </div>
+ </div></div>
+        <div class="manage-right">
+          <div class="manage-input">
+            <div class="input-title">公司图片(图片大小不能超过2MB)</div>
+          </div>
+          <div class="manage-img" v-loading="loading">
+            <label for="sel-img">
+              <img
+                v-show="nowData.detailedIntroductionImage"
+                class=""
+                :src="nowData.detailedIntroductionImage"
+                alt="案例图片"
+              />
+              <img
+                class="upload-img"
+                v-show="!nowData.detailedIntroductionImage"
+                src="../../assets/img/upload-img.png"
+                alt=""
+              />
+            </label>
+            <input
+              ref="fileInput"
+              type="file"
+              :multiple="false"
+              id="sel-img"
+              accept="image/*"
+              @change="handleImageChange($event, 0)"
+            />
+          </div>
+      
+          
+        </div>
+      </div>
+   
+      <span slot="footer" class="dialog-footer">
+        <div class="vrcode-btn blue-btn w-100" @click="changeAddModel">
+          确定
+        </div>
+        <div class="vrcode-btn cancle-btn w-100" @click="addModel = false">
+          取消
+        </div>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      tableData: [],
+      addModel: false,
+      nowData: {
+        detailedIntroductionImage: "",
+        detailedIntroductionEnName: "",
+        detailedIntroductionEnText: "",
+        detailedIntroductionText: "",
+        detailedIntroductionName: "",
+        detailedIntroductionSort: "",
+        detailedIntroductionTextTitle:'',
+detailedIntroductionTextEnTitle:'',
+        type:4,
+      },
+      modelName: "添加",
+      typeSelList: [],
+      TypeSel: "",
+      selId: "",
+      loading: false,
+    };
+  },
+  mounted() {
+    this.dataInit();
+  },
+  methods: {
+    dataInit() {
+      this.api.website_getowpabyowpidMan().then((res) => {
+        if (res.data.code == 200) {
+          this.tableData = res.data.data.filter(item => item && item.type === 4);
+        }
+      });
+    },
+    openModel(item, type) {
+      if (type == 0) {
+        this.modelName = "添加";
+        this.addModel = true;
+        this.nowData = {
+          detailedIntroductionImage: "",
+        detailedIntroductionEnName: "",
+        detailedIntroductionEnText: "",
+        detailedIntroductionText: "",
+        detailedIntroductionName: "",
+        detailedIntroductionSort: "",
+        detailedIntroductionTextTitle:'',
+detailedIntroductionTextEnTitle:'',
+        type:4,
+        };
+      } else {
+        this.modelName = "编辑";
+        this.nowData = JSON.parse(JSON.stringify(item));
+        this.addModel = true;
+      }
+    },
+    changeAddModel() {
+        if(this.loading){
+           this.$message.error("图片还未上传成功，请耐心等待。");
+           return
+        }
+         if(!this.nowData.detailedIntroductionImage){
+           this.$message.error("图片还未上传。");
+           return
+         }
+          this.Addloading = this.$loading({
+        lock: true,
+        text: "加载中",
+        spinner: "el-icon-loading",
+        background: "rgba(0, 0, 0, 0.7)",
+      });
+      if (this.modelName == "编辑") {
+        var data = { ...this.nowData,id:this.nowData.id.toString() };
+        this.api.website_updateops(data).then((res) => {
+          this.Addloading.close();
+          if (res.data.code == 200) {
+            this.$message.success(res.data.msg);
+            this.dataInit();
+            this.addModel = false;
+          } else {
+            this.$message.error(res.data.msg);
+            this.addModel = false;
+          }
+        });
+      } else {
+        var data = { ...this.nowData };
+        this.api.website_addops(data).then((res) => {
+          this.Addloading.close();
+          if (res.data.code == 200) {
+            this.$message.success(res.data.msg);
+            this.dataInit();
+            this.addModel = false;
+          } else {
+            this.$message.error(res.data.msg);
+            this.addModel = false;
+          }
+        });
+      }
+    },
+    handleImageChange(event, type) {
+      this.loading = true;
+      if (event.target.files.length === 0) {
+        // 用户点击了取消
+        this.loading = false;
+        return;
+      }
+      const file = event.target.files[0];
+
+      const reader = new FileReader();
+      const maxSize = 2 * 1024 * 1024; // 2MB in bytes
+      if (file.size > maxSize) {
+        this.$message.error("图片大小不能超过2MB");
+        this.$refs.fileInput.value = "";
+         this.loading = false;
+        return;
+      }
+
+      reader.onload = (e) => {
+        const imageData = e.target.result;
+        const convertedFile = new File([imageData], file.name, {
+          type: file.type,
+        });
+        // 处理转换后的文件...
+
+        var data = { file: convertedFile };
+        this.api.websiteUploadImage(data).then((res) => {
+          this.loading = false;
+          if (res.data.code == 200) {
+            this.nowData.detailedIntroductionImage = res.data.msg;
+            this.$refs.fileInput.value = "";
+          } else {
+             this.$message.error(res.data.msg);
+          }
+        }).catch((err) => {
+          this.loading = false;
+          this.$message.error("插入图片失败");
+        });
+      };
+      reader.readAsArrayBuffer(file);
+    },
+
+    confirmDel(item) {
+      var data = { id: item.id.toString() };
+      this.api.website_delops(data).then((res) => {
+        if (res.data.code == 200) {
+          this.dataInit();
+          this.$message.success(res.data.msg);
+        } else {
+          this.$message.error(res.data.msg);
+        }
+      });
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if (rowIndex % 2 == 1) {
+        return "warning-row";
+      } else if (rowIndex % 2 == 0) {
+        return "success-row";
+      }
+      return "";
+    },
+  },
+};
+</script>
+<style lang="scss"></style>

src/views/officialWebsite/new.vue

@@ -378,13 +378,20 @@ export default {
     },
 
     changeAddModel() {
+    if(this.loading){
+           this.$message.error("图片还未上传成功，请耐心等待。");
+           return
+        }
+   if(!this.nowData.detailedIntroductionImage){
+           this.$message.error("图片还未上传。");
+           return
+         }
               this.Addloading = this.$loading({
         lock: true,
         text: "加载中",
         spinner: "el-icon-loading",
         background: "rgba(0, 0, 0, 0.7)",
       });
-
       if (this.modelName == "编辑") {
         var data = { ...this.nowData, id: this.nowData.id.toString() };
         this.api.website_updateops(data).then((res) => {
@@ -447,6 +454,9 @@ export default {
           } else {
             this.$message.error(res.data.msg);
           }
+        }).catch((err) => {
+          this.loading = false;
+          this.$message.error("插入图片失败");
         });
       };
       reader.readAsArrayBuffer(file);

src/views/officialWebsite/product.vue

@@ -428,13 +428,20 @@ productId: "",
     },
     // 产品详情
     changeAddModel() {
+      if(this.loading){
+           this.$message.error("图片还未上传成功，请耐心等待。");
+           return
+        }
+   if(!this.nowData.detailedIntroductionImage){
+           this.$message.error("图片还未上传。");
+           return
+         }
             this.Addloading = this.$loading({
         lock: true,
         text: "加载中",
         spinner: "el-icon-loading",
         background: "rgba(0, 0, 0, 0.7)",
       });
-
       if (this.modelName == "编辑") {
         var data = { ...this.nowData, id: this.nowData.id.toString() };
         this.api.website_updateops(data).then((res) => {
@@ -465,13 +472,20 @@ productId: "",
     },
     // 产品列表
     changeAddModel1() {
+       if(this.loading){
+           this.$message.error("图片还未上传成功，请耐心等待。");
+           return
+        }
+   if(!this.nowData1.detailedIntroductionImage){
+           this.$message.error("图片还未上传。");
+           return
+         }
            this.Addloading = this.$loading({
         lock: true,
         text: "加载中",
         spinner: "el-icon-loading",
         background: "rgba(0, 0, 0, 0.7)",
       });
-
       if (this.modelName1 == "编辑") {
         var data = { ...this.nowData1, id: this.nowData1.id.toString() };
         this.api.website_updateowp(data).then((res) => {
@@ -515,6 +529,7 @@ productId: "",
       if (file.size > maxSize) {
         this.$message.error("图片大小不能超过2MB");
         this.$refs.fileInput.value = "";
+        this.loading = false
         return;
       }
 
@@ -534,6 +549,9 @@ productId: "",
           } else {
             this.$message.error(res.data.msg);
           }
+        }).catch((err) => {
+          this.loading = false;
+          this.$message.error("插入图片失败");
         });
       };
       reader.readAsArrayBuffer(file);
@@ -573,6 +591,9 @@ productId: "",
           } else {
             this.$message.error(res.data.msg);
           }
+        }).catch((err) => {
+          this.loading = false;
+          this.$message.error("插入图片失败");
         });
       };
       reader.readAsArrayBuffer(file);