WanZai_School/src/views/info/info.vue

<template>
  <div class="content-box">
    <div class="header">基本信息</div>

    <div class="scroll">
      <!-- 学校基本信息区域 -->
      <div class="title">
        <div class="title_text">学校基本信息</div>
        <el-button type="primary" v-if="showSchool" @click="saveSchool"
          >保存</el-button
        >
        <el-button type="primary" plain v-if="showSchool" @click="cancelSchool"
          >取消</el-button
        >

        <el-button type="primary" v-if="!showSchool" @click="editSchool"
          >修改</el-button
        >
      </div>
      <div class="info">
        学校编码：
        <span v-if="!showSchool">{{ schoolCode || "无" }}</span>
        <el-input
          v-if="showSchool"
          style="width: 150px"
          v-model="schoolCode"
          placeholder="请输入学校编码"
        />
      </div>
      <div class="info">
        学校名称：
        <span v-if="!showSchool">{{ schoolName || "无" }}</span>
        <el-input
          v-if="showSchool"
          style="width: 150px"
          v-model="schoolName"
          placeholder="请输入学校名称"
        />
      </div>
      <div class="info info2">
        <span class="info_key">校徽：</span>

        <el-upload
          class="avatar-uploader"
          action="#"
          :auto-upload="false"
          :on-change="handleChange"
          ref="upload"
          :limit="1"
          :on-exceed="handleExceed"
        >
          <el-button class="info_btn" type="primary" plain v-if="showSchool">
            点击上传
          </el-button>
        </el-upload>

        <img class="info_img" :src="schoolImg" fit="cover" />
        <div class="info_img" v-if="!schoolImg">暂无图片</div>
        <!-- <div class="icon_delete" v-if="showSchool" @click="handleDelete">
          <el-icon>
            <Delete />
          </el-icon>
        </div> -->
      </div>
      <div class="info info2">
        <span class="info_key">管理平台logo：</span>

        <el-upload
          class="avatar-uploader"
          action="#"
          :auto-upload="false"
          :on-change="handleChange2"
          ref="upload2"
          :limit="1"
          :on-exceed="handleExceed2"
        >
          <el-button class="info_btn" type="primary" plain v-if="showSchool">
            点击上传
          </el-button>
        </el-upload>

        <img class="info_img" :src="logoImg" fit="cover" />
        <div class="info_img" v-if="!logoImg">暂无图片</div>

        <!-- <div class="icon_delete" v-if="showSchool" @click="handleDelete">
          <el-icon>
            <Delete />
          </el-icon>
        </div> -->
      </div>
      <div class="info">在校学生人数：{{ studentCount }}</div>

      <!-- 公众号信息区域 -->
      <div class="title">
        <div class="title_text">公众号</div>
        <el-button type="primary" v-if="showApp" @click="saveApp"
          >保存</el-button
        >
        <el-button type="primary" plain v-if="showApp" @click="cancelApp"
          >取消</el-button
        >
        <el-button type="primary" v-if="!showApp" @click="editApp"
          >修改</el-button
        >
      </div>

      <div class="info">
        名称：
        <span v-if="!showApp">{{ appName || "无" }}</span>
        <el-input
          v-if="showApp"
          style="width: 200px"
          v-model="appName"
          placeholder="请输入公众号名称"
        />
      </div>
      <div class="info">
        APPID：
        <span v-if="!showApp">{{ appAppid || "无" }}</span>
        <el-input
          v-if="showApp"
          style="width: 200px"
          v-model="appAppid"
          placeholder="请输入APPID"
        />
      </div>
      <div class="info">
        原始ID： <span v-if="!showApp">{{ appOldId || "无" }}</span>
        <el-input
          v-if="showApp"
          style="width: 200px"
          v-model="appOldId"
          placeholder="请输入原始ID"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  ref,
  reactive,
  watch,
  nextTick,
  onBeforeMount,
  onUnmounted,
} from "vue";
import COS from "cos-js-sdk-v5";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox, genFileId } from "element-plus";
import { Camera } from "@element-plus/icons-vue";
import { dayjs } from "element-plus";
import lodash from "lodash";
import eds from "@/utils/eds.js";
import axios from "axios";
import { useStore } from "vuex";
const store = useStore();
const api = ref("");
const router = useRouter();

const infoId = ref(); // 基本信息id
// 学校编码
const schoolCode = ref(4851511515);

// 学校名称
const schoolName = ref("万载县第三中学");
const studentCount=ref() // 学校学生

// 校徽图片地址
const schoolImg = ref();
const upload = ref();

// 管理平台logo图片地址
const logoImg = ref("");
const upload2 = ref();

// 公众号名称
const appName = ref("万载县第三中学");

// 公众号appid
const appAppid = ref("wxd87cbe1db0437303");

// 公众号原始id
const appOldId = ref("gh_aba119389adf");

// 学校基本信息展示编辑切换
const showSchool = ref(false);

// 公众号信息展示编辑切换
const showApp = ref(false);

// 基本信息数据
const getList = async () => {
  let data = {
    // managerId: sessionStorage.getItem("token"),
  };
  let res = await axios({
    method: "get",
    url: api.value + "/wanzai/api/smartSchool/querySmartSchool",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    // params: data,
  });
  // console.log(res,JSON.parse(eds.decryptDes(res.data.data)), "学校基本信息");
  if (res.data.code == 200) {
    schoolCode.value = JSON.parse(eds.decryptDes(res.data.data)).schoolCode;
    schoolImg.value = JSON.parse(eds.decryptDes(res.data.data)).schoolBadge;
    schoolName.value = JSON.parse(eds.decryptDes(res.data.data)).name;
    studentCount.value = JSON.parse(eds.decryptDes(res.data.data)).studentCount;
    logoImg.value = JSON.parse(eds.decryptDes(res.data.data)).logoImage;
    appName.value = JSON.parse(eds.decryptDes(res.data.data)).officialName;
    appAppid.value = JSON.parse(eds.decryptDes(res.data.data)).appid;
    appOldId.value = JSON.parse(eds.decryptDes(res.data.data)).originalId;
    infoId.value = JSON.parse(eds.decryptDes(res.data.data)).id;
  } else {
    // loading.value = false;
    if(res.data.message=='登录凭证已过期，请重新登录'){
      router.push({
        path: `/login`,
      });
    }
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};

// 学校信息修改按钮回调
const editSchool = () => {
  showSchool.value = true;
};

// 学校信息保存按钮回调
const saveSchool = async () => {
  let data = {
    id: infoId.value,
    schoolCode: schoolCode.value,
    name: schoolName.value,
    schoolBadge: schoolImg.value,
    logoImage: logoImg.value,
    officialName: appName.value,
    appid: appAppid.value,
    originalId: appOldId.value,
  };
  let res = await axios({
    method: "post",
    url: api.value + "/wanzai/api/smartSchool/updateSmartSchoolById",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    data: data,
  });
  console.log(res, "修改成功");
  if (res.data.code == 200) {
    showSchool.value = false;
    getList();
    ElMessage({
      type: "success",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};
// 学校信息取消按钮回调
const cancelSchool = () => {
  showSchool.value = false;
  getList();
};

// 公众号修改按钮回调
const editApp = () => {
  showApp.value = true;
};

// 公众号保存按钮回调
const saveApp = async () => {
  let data = {
    id: infoId.value,
    schoolCode: schoolCode.value,
    name: schoolName.value,
    schoolBadge: schoolImg.value,
    logoImage: logoImg.value,
    officialName: appName.value,
    appid: appAppid.value,
    originalId: appOldId.value,
  };
  let res = await axios({
    method: "post",
    url: api.value + "/wanzai/api/smartSchool/updateSmartSchoolById",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    data: data,
  });
  console.log(res, "修改成功");
  if (res.data.code == 200) {
    showApp.value = false;
    getList();
    ElMessage({
      type: "success",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};
// 公众号取消按钮回调
const cancelApp = () => {
  showApp.value = false;
  getList();
};

// 删除图标按钮回调
const handleDelete = () => {
  console.log("删除图片");
};

// 校徽图上传(------------------------------------------------------)
const handleChange = (file, fileLists) => {
  console.log(file, "file11111");
  if (file.raw.type == "image/jpeg" || file.raw.type == "image/png") {
    if (file.size / 1024 > 100) {
      ElMessage.error("图片的大小不能超过100Kb!");
    } else {
      if (file.raw) {
        const cos = new COS({
          SecretId: "AKIDCPVZdcWIxgHpy5FYxVyPiqkZGrhdXUBg",
          SecretKey: "NkyCN3cz97qKaeXLvHOGxOcdS8f184pL",
          SecurityToken: "1306339220",
          Bucket: "wanzai-1306339220",
          Region: "ap-shanghai",
        });
        const files = file.raw;
        console.log(files, "files文件");
        const key = file.name; // 设置上传到 COS 后的文件名
        cos.putObject(
          {
            Bucket: "wanzai-1306339220",
            Region: "ap-shanghai",
            Key: key,
            Body: files,
            onProgress: function (progressData) {
              console.log(JSON.stringify(progressData));
            },
          },
          function (err, data) {
            if (err) {
              console.error(err, "请求失败");
            } else {
              console.log(data, "请求成功");
              schoolImg.value = "https://" + data.Location;
              // 成功
            }
          }
        );
      }
    }
  } else {
    ElMessage.error("图片格式必须为JPG/PNG格式!");
  }
  // ruleForm.coverImg = file.url;
};
// 选中时自动替换上一个文件。
const handleExceed = (files) => {
  upload.value.clearFiles();
  const file = files[0];
  file.uid = genFileId();
  upload.value.handleStart(file);
};

// 管理平台logo图上传(------------------------------------------------------)
const handleChange2 = (file, fileLists) => {
  console.log(file, "file11111");
  if (file.raw.type == "image/jpeg" || file.raw.type == "image/png") {
    if (file.size / 1024 > 100) {
      ElMessage.error("图片的大小不能超过100Kb!");
    } else {
      if (file.raw) {
        const cos = new COS({
          SecretId: "AKIDCPVZdcWIxgHpy5FYxVyPiqkZGrhdXUBg",
          SecretKey: "NkyCN3cz97qKaeXLvHOGxOcdS8f184pL",
          SecurityToken: "1306339220",
          Bucket: "wanzai-1306339220",
          Region: "ap-shanghai",
        });
        const files = file.raw;
        console.log(files, "files文件");
        const key = file.name; // 设置上传到 COS 后的文件名
        cos.putObject(
          {
            Bucket: "wanzai-1306339220",
            Region: "ap-shanghai",
            Key: key,
            Body: files,
            onProgress: function (progressData) {
              console.log(JSON.stringify(progressData));
            },
          },
          function (err, data) {
            if (err) {
              console.error(err, "请求失败");
            } else {
              console.log(data, "请求成功");
              logoImg.value = "https://" + data.Location;
              // 成功
            }
          }
        );
      }
    }
  } else {
    ElMessage.error("图片格式必须为JPG/PNG格式!");
  }
  // ruleForm.coverImg = file.url;
};
// 选中时自动替换上一个文件。
const handleExceed2 = (files) => {
  upload.value.clearFiles();
  const file = files[0];
  file.uid = genFileId();
  upload.value.handleStart(file);
};

onBeforeMount(async () => {
  api.value = store.state.user.api;
  getList();
});
</script>

<style scoped lang="scss">
.content-box {
  min-width: 1000px;
  width: calc(100vw - 260px);
  height: calc(100vh - 105px);
  margin: 20px auto;
  background-color: #fff;
  box-shadow: 0px 3px 10px rgba(0, 97, 255, 0.2);

  .header {
    display: flex;
    align-items: center;
    padding-left: 32px;
    height: 60px;
    font-size: 18px;
    font-weight: bold;
    border-bottom: 1px solid #cccccc;
  }
  .scroll {
    height: calc(100% - 61px);
    overflow: auto;
    :deep(.el-upload-list) {
      display: none;
    }
  }
  .title {
    display: flex;
    align-items: center;
    padding-left: 32px;
    height: 70px;
    font-size: 20px;
    font-weight: bold;

    .title_text {
      margin-right: 24px;
    }
  }

  .info {
    display: flex;
    align-items: center;
    padding-left: 86px;
    min-height: 40px;

    .info_img {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 10px 0 26px 0;
      width: 96px;
      height: 96px;
      border-radius: 50%;
      background-color: #e5e5e5;
    }

    .info_key {
      align-self: flex-start;
      margin-top: 10px;
    }

    .info_btn {
      margin-top: 10px;
    }
  }

  .info2 {
    flex-wrap: wrap;
    width: 215px;

    .icon_delete {
      align-self: flex-end;
      margin-bottom: 26px;
      margin-left: 10px;
      cursor: pointer;
    }
  }
}
</style>