sl-sfy-safety/src/views/page-config/ConfigEidt.vue

<template>
  <div style="position: relative">
    <div class="top-content">
      <div style="display: flex; position: relative">
        <img src="~@/assets/icons/back.png" alt="" @click="backPage" class="back-btn" />
        <el-select
          v-model="companySelet"
          class="m-2"
          placeholder="请选择相关公司"
          style="width: 216px"
          @change="changeCom"
        >
          <el-option
            v-for="item in companyList"
            :key="item.id"
            :label="item.value"
            :value="item.value"
          />
        </el-select>
        <div v-if="companySelet" style="display: flex; margin-top: 8px">
          <div class="label-workshop">选择标签:</div>
          <div>
            <el-radio-group v-model="label" size="10px" :border="true" style="display: flex">
              <el-radio-button
                v-for="item in labelList"
                :key="item.id"
                :label="item.id!"
                class="label-select"
                >{{ item.value }}</el-radio-button
              >
            </el-radio-group></div
          >
        </div>
        <el-upload
          ref="upload"
          class="upload-demo"
          :limit="1"
          :show-file-list="false"
          :on-exceed="handleExceed"
          :on-change="onSelectfile"
          :auto-upload="false"
          :before-upload="beforeAvatarUpload"
        >
          <template #trigger>
            <el-button :icon="Refresh" plain class="btn-top-refresh">替换照片</el-button>
          </template>
        </el-upload>
        <el-button v-if="saveSwitch" type="info" plain class="btn-top-save" @click="saveConfigPage"
          >保存为主页</el-button
        >
        <el-button v-else type="info" plain class="btn-top-save" @click="saveConfigMap"
          >保存为地图</el-button
        >
        <!-- <div>按钮</div> -->
      </div>
    </div>
    <div style="display: flex">
      <div class="workshop-content">
        <div class="workshop-title">车间列表</div>
        <el-input
          v-model="searchWorkshop"
          class="w-50 m-2"
          placeholder="请输入搜索内容"
          :suffix-icon="Search"
          style="width: 255px; margin-top: 11px"
        />
        <ul v-if="workshopList"
          ><li
            v-for="item in workshopList"
            :key="item.id"
            class="workshop-list"
            :class="{ 'active-workshop': activeId === item.id }"
            @click="configWorkshop(item)"
            ><el-icon><House /></el-icon
            ><div style="margin-left: 5px; margin-top: -4px">{{ item.value }}</div></li
          ></ul
        >
        <div v-else class="workshop-tip">提示：请先选择相应公司和照片</div>
      </div>
      <div>
        <div class="upload" :class="{ 'avatar-show': imageUrl }">
          <el-upload
            class="avatar-uploader"
            :auto-upload="false"
            :on-change="onSelectfile"
            :before-upload="beforeAvatarUpload"
          >
            <template #trigger>
              <img src="~@/assets/icons/upload.png" alt="" class="upload-pic" />
            </template>
          </el-upload>
          <!-- <div class="upload-tip">只支持.jpg格式</div> -->
        </div>

        <img v-if="imageUrl" :src="imageUrl" class="preview-image" />
        <!-- <div>222</div> -->
      </div></div
    >
    <el-tooltip
      class="box-item position-tooltip"
      effect="dark"
      content="显示侧边栏"
      offset="12"
      placement="left"
      @click="showEditConfig"
    >
      <div
        v-if="leftShow"
        class="circle-rectangle"
        :class="{ 'shape-shadow': shadow }"
        @mouseover="shadowAdd"
        @mouseout="shadowRemove"
        @click="dialogReopen"
      >
        <el-icon class="left-icon" size="16px"><ArrowLeftBold /></el-icon>
        <el-icon style="margin-top: 7px" size="16px"><ArrowLeftBold /></el-icon>
        <!-- <el-icon class="left-icon"><DArrowLeft /></el-icon> -->
      </div>
      <!-- <img src="~@/assets/icons/slide.png" alt="" class="dialog-btn" /> -->
    </el-tooltip>

    <ConfigDialog
      ref="configDrawer"
      :title="configTitle"
      @on-close="onClose"
      @save-config="saveConfig"
      class="drawer-position"
    />
    <ConfigFinish
      :visible="visibleResult"
      :status="configStatus"
      @on-close="closeResult"
      class="feedback-position"
    />
  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { Refresh, Search, ArrowLeftBold, House } from '@element-plus/icons-vue';
  import ConfigDialog from './component/ConfigDrawer.vue';
  import ConfigFinish from './component/ConfigFinish.vue';
  //   import { picList } from '../constant';
  import { labelList, companyList, workshopList } from './constant';
  import { ElMessage, genFileId } from 'element-plus';
  import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus';
  // import upload, { UploadRawFile, genFileId } from 'element-plus/es/components/upload';
  import { useRouter } from 'vue-router';
  const router = useRouter();

  // const props = defineProps<{
  //   pageShow: boolean;
  //   // workshopTemplateList: WorkshopModuleType[];
  // }>();

  //   const emit = defineEmits<{
  //     // (e: 'update:modelValue'): unknown;
  //     (e: 'onClose'): unknown;
  //   }>();

  const label = ref('');

  const companySelet = ref('');

  const searchWorkshop = ref('');

  const saveSwitch = ref<boolean>(true);

  const changeCom = () => {
    saveSwitch.value = true;
  };
  const configStatus = ref(true);
  // const replacePic = () => {};
  const saveConfigPage = () => {
    saveSwitch.value = false;
    // router.push('/page-config/config');
  };

  //总体的保存，将整个数据传过去
  const visibleResult = ref(false);
  const saveConfigMap = () => {
    //这里需要控制成功或者失败的弹出框
    visibleResult.value = true;
    //configStatus修改状态，决定成功还是失败
    // saveSwitch.value = true;
    // router.push('/page-config/config');
  };

  const imageUrl = ref('');
  const configDrawer = ref();

  const backPage = () => {
    router.push('/page-config/layout');
  };

  const beforeAvatarUpload = (rawFile) => {
    if (rawFile.type !== 'image/jpeg') {
      ElMessage.error('Avatar picture must be JPG format!');
      return false;
    }
    // else if (rawFile.size / 1024 / 1024 > 2) {
    //   ElMessage.error('Avatar picture size can not exceed 2MB!');
    //   return false;
    // }
    return true;
  };

  const onSelectfile = (uploadFile) => {
    imageUrl.value = URL.createObjectURL(uploadFile.raw!);
  };

  const upload = ref<UploadInstance>();
  const handleExceed: UploadProps['onExceed'] = (files) => {
    upload.value!.clearFiles();
    const file = files[0] as UploadRawFile;
    file.uid = genFileId();
    upload.value!.handleStart(file);
  };

  const activeId = ref();
  const configTitle = ref();
  const visibleDrawer = ref();
  //编辑车间
  const configWorkshop = (item) => {
    configDrawer.value.openDialog();
    visibleDrawer.value = true;
    configTitle.value = item.value;
    activeId.value = item.id;
  };

  const showEditConfig = () => {};
  // const label = ref('');

  const shadow = ref(false);
  const shadowAdd = () => {
    shadow.value = true;
  };
  const shadowRemove = () => {
    shadow.value = false;
  };

  const dialogReopen = () => {
    configDrawer.value.openDialog();
  };

  //左边的浮动按钮
  const leftShow = ref(false);
  const onClose = (val) => {
    leftShow.value = val;
  };

  //需要从子组件中获得当前保存的车间数据
  const saveConfig = (val) => {
    console.log(val);
  };

  const closeResult = () => {
    visibleResult.value = false;
  };
</script>

<style lang="scss" scoped>
  // .proCard {
  //   padding: 0px;
  // }
  .top-content {
    padding: 0px;
    background-color: white;
    position: relative;
  }

  .back-btn {
    width: 32px;
    height: 32px;
    margin-top: 7px;
    margin-right: 20px;
  }

  .btn-top-refresh {
    position: absolute;
    margin-top: 14px;
    right: 137px;
    // left: 1437px;
  }

  .btn-top-save {
    position: absolute;
    // margin-top: 8px;
    margin-top: 6px;
    right: 15px;
  }

  .label-workshop {
    font-size: 14px;
    font-weight: 400;
    margin-left: 36px;
    margin-top: 6px;
    margin-right: 16px;
  }

  .workshop-content {
    margin-top: 10px;
    background-color: white;
    // padding-left: 15px;
    // margin-left: 10px;
    margin-right: 10px;
    width: 271px;
    height: 800px;
    border: 1px solid #b3b3b3;
  }

  .workshop-title {
    font-size: 14px;
    margin-top: 25px;
    margin-left: 15px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.85);
  }

  // .label-select {
  // }
  // .el-radio-button__inner
  ::v-deep.el-radio-button {
    margin-right: 8px;
    box-shadow: none;
    border-radius: 4px !important;
    border: 1px solid #d9d9d9 !important;
  }
  .workshop-list {
    font-size: 14px;
    width: 211px;
    margin-top: 10px;
    margin-left: 15px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.85);
    cursor: pointer;
    display: flex;
  }

  .workshop-tip {
    margin-left: 15px;
    margin-top: 12px;
    font-size: 14px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.65);
  }

  .upload-pic {
    z-index: 99;
    width: 593px;
    height: 435px;
    // margin-left: ;
  }
  .active-workshop {
    background: rgba(24, 144, 255, 0.502);
  }

  .avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    width: 593px;
    height: 435px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    color: #8c939d;
    transition: var(--el-transition-duration-fast);
  }

  .avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
  }

  // .el-icon.avatar-uploader-icon {
  //   font-size: 28px;
  //   color: #8c939d;
  //   width: 178px;
  //   height: 178px;
  //   text-align: center;
  //   margin-top: -60px;
  // }

  .upload {
    position: absolute;
    left: 428px;
    top: 174px;
  }

  // .upload-tip {
  //   margin-top: 5px;
  //   font-size: 22px;
  //   font-weight: 350;
  //   color: #3d3d3d;
  //   opacity: 0.4;
  //   text-align: center;
  // }

  .uploader-text {
    margin-top: -60px;
    margin-left: 50px;
    font-size: 22px;
    font-weight: 350;
    color: #3d3d3d;
    opacity: 0.4;
  }

  // .preview-container {
  //   width: 178px;
  //   height: 178px;
  //   position: relative;
  // }

  .preview-image {
    min-width: 100%;
    min-height: 100%;
    object-fit: contain;
  }

  .avatar-show {
    display: none;
  }

  .drawer-position {
    position: absolute;
    right: 0px;
    // left: 1150px;
    top: 74px;
    z-index: 99;
    opacity: 1;
    background: #ffffff;
  }

  .dialog-btn {
    position: absolute;
    right: 0px;
    top: 66px;
  }

  .position-tooltip {
    margin-right: -10px;
  }

  .circle-rectangle {
    width: 40px;
    height: 30px;
    border-radius: 50% 0% 0% 50%;
    position: absolute;
    right: 0px;
    top: 66px;
    background-color: white;
    display: flex;
  }

  .shape-shadow {
    filter: drop-shadow(5px 5px 10px rgb(102, 100, 100));
  }
  .left-icon {
    margin-top: 7px;
    margin-left: 8px;
    margin-right: -7px;
  }

  .feedback-position {
    position: absolute;
    left: 460px;
    top: 150px;
    z-index: 9999;
  }
</style>