chengfei-test-system/src/views/modules/home/home.vue

<template>
  <div class="mainContentBox">
    <div class="content-head">
      <div class="head-box-all">
        <div class="box-all">
          <el-checkbox
            v-model="checkAll"
            :indeterminate="isIndeterminate"
            @change="handleCheckAllChange"
          >
          </el-checkbox>
          <span>显示全部</span>
        </div>
        <div class="box-num">{{ checkedCities.length }}</div>
        <div class="box-text">工程类型</div>
      </div>
      <div class="head-box-group">
        <el-checkbox-group
          v-model="checkedCities"
          @change="handleCheckedCitiesChange"
        >
          <div
            class="head-box-item"
            :class="[checkedCities.includes(city) ? 'active' : '']"
            v-for="city in cities"
            :key="city"
          >
            <el-checkbox label="" :value="city"></el-checkbox>
            <div class="name">射频类</div>
            <div class="num">99+</div>
          </div>
        </el-checkbox-group>
      </div>
    </div>
    <div class="content-body">
      <div class="cotent-btns">
        <div>工程列表</div>
        <div>
          <el-button type="primary" @click="showAddFun">
            <span class="add">+</span>
            新增工程
          </el-button>
          <el-button class="active">
            <i />
            按时间倒序
          </el-button>
          <el-button class="normal">
            <i />
            按创建人姓名
          </el-button>
        </div>
      </div>

      <div class="content-list">
        <div
          v-for="(item, index) in engineeringList"
          :key="index"
          class="content-list-item"
        >
          <div class="list-item-flex">
            <div class="list-itme-tit">{{ item.engineeringProductName }}</div>
            <div class="list-item-switch">
              <span class="item-gray">发布</span><el-switch v-model="value" />
            </div>
          </div>
          <div class="list-item-flex">
            <div>
              <span class="item-gray">工程类型：</span
              >{{ item.engineeringType }}
            </div>
            <div><span class="item-gray">版本：</span>1</div>
          </div>
          <div class="list-item-flex">
            <div>
              <span class="item-gray">开发人员：</span>{{ item.creator }}
            </div>
            <div>
              <span class="item-gray">更新时间：</span>{{ item.string }}<
            </div>
          </div>
          <div class="list-item-btns">
            <span @click="showDetailsFun(item)">
              <el-icon>
                <Edit />
              </el-icon>
            </span>
            <span>
              <el-icon>
                <DeleteFilled />
              </el-icon>
            </span>
            <span>
              <el-icon>
                <Tools />
              </el-icon>
            </span>
            <span>
              <el-icon>
                <CaretRight />
              </el-icon>
            </span>
          </div>
        </div>
      </div>
      <el-pagination
        class="content-pag"
        background
        layout="prev, pager, next"
        :page-size="9"
        :total="1000"
        @change="handleChange"
      />
    </div>
  </div>

  <AddComponent
    :show="showAdd"
    @handleCancel="showAdd = false"
    @save="saveFun"
  />

  <DetailsComponent :show="showDetails" @handleCancel="showDetails = false" />
</template>

<script lang="ts" setup>
import AddComponent from "./components/add.vue";
import DetailsComponent from "./components/details.vue";

import { ref } from "vue";

import type { CheckboxValueType } from "element-plus";

const checkAll = ref(false);
const isIndeterminate = ref(true);
const checkedCities = ref(["Shanghai", "Beijing"]);
const cities = [
  "Shanghai",
  "Beijing",
  "Guangzhou",
  "Shenzhen",
  "1",
  "2",
  "3",
  "4",
];

const handleCheckAllChange = (val: CheckboxValueType) => {
  checkedCities.value = val ? cities : [];
  isIndeterminate.value = false;
};
const handleCheckedCitiesChange = (value: CheckboxValueType[]) => {
  const checkedCount = value.length;
  checkAll.value = checkedCount === cities.length;
  isIndeterminate.value = checkedCount > 0 && checkedCount < cities.length;
};

const value = ref(true);

interface VersionItem {
  id: string; //	主键	string
  engineeringProductName: string; //	产品名称	string
  engineeringType: string; //	工程类型	string
  engineeringVersion: string; //	工程版本	string
  creator: string; //创建人	string 开发人员
  updated: string; //	修改时间	string(date-time)
  created: string; //	创建时间string(date-time)
  deleted: string; //	删除标识;0-未删除；1-已删除	integer(int32)
  deptId: string; //	部门ID	string
  orgId: string; //	组织ID	string
  updator: string; //	上次修改人	string
}

const engineeringList = ref<VersionItem[]>([
  {
    id: "",
    engineeringProductName: "",
    engineeringType: "",
    engineeringVersion: "",
    creator: "",
    updated: "",
    created: "",
    deleted: "",
    deptId: "",
    orgId: "",
    updator: "",
  },
  {
    id: "",
    engineeringProductName: "",
    engineeringType: "",
    engineeringVersion: "",
    creator: "",
    updated: "",
    created: "",
    deleted: "",
    deptId: "",
    orgId: "",
    updator: "",
  },
  {
    id: "",
    engineeringProductName: "",
    engineeringType: "",
    engineeringVersion: "",
    creator: "",
    updated: "",
    created: "",
    deleted: "",
    deptId: "",
    orgId: "",
    updator: "",
  },
  {
    id: "",
    engineeringProductName: "",
    engineeringType: "",
    engineeringVersion: "",
    creator: "",
    updated: "",
    created: "",
    deleted: "",
    deptId: "",
    orgId: "",
    updator: "",
  },
]);

/**
 * 分页事件,每页9条
 */
const handleChange = (currentPage: number, pageSize: number) => {
  // console.log(currentPage);
  // console.log(pageSize);
};

/**
 * 显示新增弹框
 */
let showAdd = ref(false);
const showAddFun = () => {
  showAdd.value = true;
};

/**
 * 新增弹框返回的数据 请求完成后关闭弹框 showAdd.value = false;
 */
const saveFun = (item: VersionItem) => {
  console.log(item);
};

/**
 * 显示新增弹框
 */
let showDetails = ref(false);
const showDetailsFun = (item: any) => {
  console.log(item);
  showDetails.value = true;
};
</script>

<style scoped lang="scss">
.mainContentBox {
  position: absolute;
  width: 100%;

  .content-head {
    color: var(--hj-white-1);
    display: flex;
    height: 100px;
    background: var(--gray-bg-1);
    // width: 100%;
    // overflow: hidden;
    min-width: 0;

    .head-box-all {
      padding: 6px;
      box-sizing: border-box;
      border-radius: 4px 0 0 4px;
      width: 90px;
      height: 100px;
      background: linear-gradient(270deg, #3b7cff 0%, #8aa9ec 100%);
      color: var(--hj-white-1);
      font-size: var(--hj-fs-12);
      text-align: center;

      .box-all {
        color: var(--hj-white-1);
        font-size: var(--hj-fs-12);
      }

      .box-num {
        text-align: center;
        font-size: var(--hj-fs-24);
      }
    }

    .head-box-group {
      flex: 1;

      .el-checkbox-group {
        height: 100%;
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        display: flex;
        align-content: center;
        align-items: center;
        flex-direction: row;

        .head-box-item {
          position: relative;
          flex: 0 0 182px;
          font-size: var(--hj-fs-14);
          margin-top: 16px;
          padding: 6px;
          margin-left: 12px;
          height: 67px;
          border: 1px solid #afb9d0;
          border-radius: 4px 4px 4px 4px;

          text-align: center;
          .el-checkbox {
            position: absolute;
            left: 6px;
            top: 0;
          }

          .name {
            line-height: 16px;
            margin-top: 12px;
            font-size: var(--hj-fs-14);
            color: var(--fc-color-5);
          }

          .num {
            line-height: 26px;
            font-size: var(--hj-fs-20);
            font-weight: bold;
            color: var(--fc-color-7);
          }
          &.active {
            background: linear-gradient(90deg, #3cbaff 0%, #3b7cff 100%);
            .name {
              color: var(--hj-white-1);
            }
            .num {
              color: var(--hj-white-1);
            }
          }
        }
      }
    }
  }

  .content-body {
    .cotent-btns {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 26px;
      margin-bottom: 12px;

      .add {
        width: 12px;
        height: 12px;
        line-height: 12px;
        border-radius: 12px;
        text-align: center;
        background-color: #fff;
        color: #3b7cff;
        margin-right: 10px;
      }

      .active,
      .normal {
        i {
          width: 14px;
          height: 14px;
          border-radius: 14px;
          vertical-align: middle;
          margin-right: 10px;
        }
      }

      .active {
        border: 1px solid #1989fa;
        color: #1871f8;

        i {
          border: 4px solid #3b7cff;
        }
      }

      .normal {
        i {
          border: 1px solid #d5d8de;
        }
      }
    }
  }

  .content-list {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;

    .content-list-item {
      border: 1px solid #ccc;
      box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
      border-radius: 4px 4px 4px 4px;
      padding-top: 12px;
    }

    .list-item-flex {
      margin-bottom: 12px;
      padding: 0 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: var(--hj-fs-12);
      color: var(--fc-color-5);

      .list-itme-tit {
        font-size: var(--hj-fs-14);
        font-weight: bold;
      }
      .list-item-switch {
        .item-gray {
          line-height: 32px;
          margin-right: 4px;
        }
      }

      .item-gray {
        color: var(--fc-color-3);
      }
    }

    .list-item-btns {
      height: 37px;
      line-height: 37px;
      color: var(--fc-color-6);
      display: flex;
      justify-content: space-around;
      border-top: 1px solid rgba(175, 185, 208, 0.3);

      span {
        cursor: pointer;
      }
    }
  }
  .content-pag {
    float: right;
    margin-right: 20px;
    margin-top: 20px;
    padding-bottom: 30px;
  }
}
</style>