主页管理

src/views/page-config/PageConfig.vue

@@ -0,0 +1,14 @@
+<template>
+  <el-card :bordered="false" class="proCard" style="position: relative">
+    <PageMain :pageShow="pageShow" @on-close="pageShow = false" />
+    <ConfigEidt :pageShow="pageShow" />
+  </el-card>
+</template>
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import PageMain from './component/PageMain.vue';
+  import ConfigEidt from './component/ConfigEidt.vue';
+  const pageShow = ref<boolean>(true);
+</script>
+
+<style lang="scss" sctep></style>

src/views/page-config/component/ConfigEidt.vue

@@ -0,0 +1,226 @@
+<template>
+  <div v-if="!props.pageShow" style="position: relative"
+    ><div style="display: flex; position: relative">
+      <!-- <el-input
+        v-model="searchCom"
+        class="w-50 m-2"
+        placeholder="搜索公司主页"
+        :prefix-icon="Search"
+        style="width: 274px"
+      /> -->
+      <el-select v-model="companySelet" class="m-2" placeholder="搜索公司" style="width: 274px">
+        <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 style="font-size: 20px; margin-left: 29px; margin-right: 4px">选择标签</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-button type="info" :icon="Refresh" plain class="btn-top-refresh" @click="replacePic"
+        >替换照片</el-button
+      >
+      <el-button type="info" plain class="btn-top-save" @click="saveConfig">保存</el-button>
+      <!-- <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="搜索功能"
+          :prefix-icon="Search"
+          style="width: 255px; margin-top: 11px"
+        />
+        <ul
+          ><li v-for="item in workshopList" class="workshop-list">{{ item.value }}</li></ul
+        >
+      </div>
+      <div class="upload">
+        <el-upload
+          class="avatar-uploader"
+          :class="{ 'avatar-show': imageUrl }"
+          list-type="picture-card"
+          :auto-upload="false"
+          :on-change="handleAvatarSuccess"
+          :before-upload="beforeAvatarUpload"
+        >
+          <!-- <div class="el-upload__text"> Drop file here or </div> -->
+          <!-- <img v-if="imageUrl" :src="imageUrl" class="avatar" /> -->
+          <div>
+            <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
+            <div class="uploader-text">上传照片</div>
+          </div>
+          <!-- <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon> -->
+        </el-upload>
+        <div v-if="imageUrl" class="preview-container">
+          <img :src="imageUrl" class="preview-image" />
+        </div>
+        <div class="upload-tip">只支持.jpg格式</div>
+      </div></div
+    >
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { Refresh, Search, Delete, Plus } from '@element-plus/icons-vue';
+  import { picList } from '../constant';
+  import { labelList, companyList, workshopList } from '../constant';
+  import { ElMessage, UploadProps } from 'element-plus';
+
+  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 replacePic = () => {};
+  const saveConfig = () => {};
+
+  const imageUrl = ref('');
+
+  const beforeAvatarUpload: UploadProps['beforeUpload'] = (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 handleAvatarSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
+    imageUrl.value = URL.createObjectURL(uploadFile.raw!);
+  };
+
+  // const label = ref('');
+</script>
+
+<style lang="scss" sctep>
+  .btn-top-refresh {
+    position: absolute;
+    margin-top: 8px;
+    right: 130px;
+    // left: 1437px;
+  }
+
+  .btn-top-save {
+    position: absolute;
+    margin-top: 8px;
+    right: 46px;
+  }
+
+  .workshop-content {
+    margin-top: 34px;
+    margin-left: 10px;
+    width: 271px;
+    height: 660px;
+    border: 1px solid #b3b3b3;
+  }
+
+  .workshop-title {
+    font-size: 20px;
+    margin-top: 15px;
+    margin-left: 13px;
+    font-weight: 900;
+    color: #3d3d3d;
+    opacity: 0.4;
+  }
+
+  .workshop-list {
+    font-size: 20px;
+    margin-top: 15px;
+    margin-left: 13px;
+    font-weight: 350;
+    color: #3d3d3d;
+    opacity: 0.4;
+  }
+
+  .avatar-uploader .el-upload {
+    border: 1px dashed var(--el-border-color);
+    border-radius: 6px;
+    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: 635px;
+    top: 201px;
+  }
+
+  .upload-tip {
+    margin-top: 5px;
+    font-size: 22px;
+    font-weight: 350;
+    color: #3d3d3d;
+    opacity: 0.4;
+  }
+
+  .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 {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .avatar-show {
+    display: none;
+  }
+</style>

src/views/page-config/component/PageMain.vue

@@ -0,0 +1,149 @@
+<template>
+  <div v-if="props.pageShow"
+    ><div style="display: flex">
+      <el-input
+        v-model="searchCom"
+        class="w-50 m-2"
+        placeholder="搜索公司主页"
+        :prefix-icon="Search"
+        style="width: 274px"
+      />
+      <!-- <div style="display: flex">
+          <div>选择标签</div>
+          <div>
+            <el-radio-group
+              v-model="label"
+              size="10px"
+              :border="true"
+              style="display: flex; justify-content: space-between"
+            >
+              <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> -->
+    </div>
+    <div class="add-page-box">
+      <div class="add-box" @click="handleAddPage"
+        ><div
+          ><el-icon class="add-icon" size="44px"><Plus /></el-icon></div
+        ><div class="add-content">新建主页</div></div
+      >
+      <div
+        v-for="item in picList"
+        class="content-show"
+        @mouseover="showDeleteIcon(item)"
+        @mouseleave="hideDeleteIcon(item)"
+        ><img src="" alt="图片" class="content-pic" />
+        <div style="position: relative"
+          ><div class="pic-name">{{ item.name }}</div>
+          <el-icon v-show="item.id === IconId" @click="deleteItem(item)" class="del-icon"
+            ><Delete
+          /></el-icon>
+        </div> </div></div
+  ></div>
+</template>
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { Search, Plus, Delete } from '@element-plus/icons-vue';
+  import { picList } from '../constant';
+  // import { labelList } from './';
+
+  const props = defineProps<{
+    pageShow: boolean;
+    // workshopTemplateList: WorkshopModuleType[];
+  }>();
+
+  const emit = defineEmits<{
+    // (e: 'update:modelValue'): unknown;
+    (e: 'onClose'): unknown;
+  }>();
+
+  const searchCom = ref('');
+  // const pageAdd = ref<boolean>(true);
+  const handleAddPage = () => {
+    // pageAdd.value = false;
+    emit('onClose');
+  };
+
+  const IconId = ref('');
+  const showDeleteIcon = (item) => {
+    IconId.value = item.id;
+  };
+
+  const hideDeleteIcon = (_item) => {
+    IconId.value = '';
+  };
+
+  const deleteItem = (item) => {
+    // 处理删除逻辑
+    console.log(item);
+  };
+
+  // const label = ref('');
+</script>
+
+<style lang="scss" sctep>
+  .add-page-box {
+    padding-top: 62px;
+    padding-left: 32px;
+    display: flex;
+    height: 700px;
+  }
+
+  .add-box {
+    width: 217px;
+    height: 255px;
+    opacity: 1;
+    background: #f2f2f2;
+  }
+
+  .add-icon {
+    margin-left: 91px;
+    margin-top: 80px;
+  }
+
+  .add-content {
+    font-size: 20px;
+    margin-top: 10px;
+    text-align: center;
+  }
+
+  .config-box {
+    height: 700px;
+  }
+
+  .label-select {
+    margin-right: 17px;
+    border-radius: 4px;
+    // border: 1px solid rgba(0, 0, 0, 0.15);
+  }
+
+  .content-show {
+    // display: flex;
+    width: 331px;
+    height: 261px;
+    margin-left: 16px;
+  }
+
+  .content-pic {
+    width: 326px;
+    height: 224px;
+  }
+
+  .pic-name {
+    font-size: 20px;
+    text-align: center;
+  }
+
+  .del-icon {
+    position: absolute;
+    right: 23px;
+    bottom: 5px;
+  }
+</style>

src/views/page-config/constant.ts

@@ -0,0 +1,22 @@
+export const labelList = [
+  { id: 1, value: '标签1' },
+  { id: 2, value: '标签2' },
+  { id: 3, value: '标签3' },
+];
+
+export const picList = [
+  { id: '1', url: '11', name: '222' },
+  { id: '2', url: '11', name: '333' },
+];
+
+export const companyList = [
+  { id: 1, value: '商飞' },
+  { id: 2, value: '上飞厂' },
+  { id: 3, value: '客服' },
+];
+
+export const workshopList = [
+  { id: 1, value: '车间1' },
+  { id: 2, value: '车间2' },
+  { id: 3, value: '车间3' },
+];