JG-ADMIN-TEMP/src/views/base/craftManagement/route/components/processComponent.vue

<template>
  <div
    class="mainContentBox"
    style="padding: 0; box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1)"
  >
    <div class="header">
      <div class="title">绑定工序</div>
      <el-space>
        <el-button :icon="Back" size="small" @click="back">返回</el-button>
        <el-button type="primary" :icon="Document" size="small" @click="save"
          >保存</el-button
        >
      </el-space>
    </div>
    <div class="types">
      <el-dropdown @command="handleCommand">
        <div class="typeBox addBtn">
          <el-icon class="icon"><CirclePlus /></el-icon>
          <div class="name">添加组件</div>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item
              v-for="(com, index) in comTypes"
              :key="index"
              :command="com"
            >
              {{ com.compentName }}</el-dropdown-item
            >
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <VueDraggable
        v-model="selectProComs"
        :animation="150"
        ghostClass="ghost"
        @update="onUpdate"
        style="display: flex"
      >
        <div
          class="typeContainer"
          v-for="(item, index) in selectProComs"
          :key="index"
          @click="clickToolCom(item, index)"
        >
          <div class="typeBox others" :class="getNameClass(index)">
            <svg-icon :icon-class="item.compentType" size="30" />
            <div class="name">{{ item.compentName }}</div>
          </div>
          <Delete class="delete" @click.stop="clickDelete(index)" />
        </div>
      </VueDraggable>
    </div>
    <div class="binContainer">
      <div v-if="isChanged || selectIndex === -1">
        <el-empty
          :image-size="200"
          description="请先保存组件，然后再进行操作"
        />
      </div>
      <div v-else>
        <div class="tipTitle">{{ tipTitle }}</div>
        <el-button
          type="primary"
          @click="creatNewData"
          style="margin-bottom: 15px"
          >新增</el-button
        >
        <el-button
          type="primary"
          @click="saveSortData"
          style="margin-bottom: 15px"
          >保存顺序</el-button
        >
        <BottomTable ref="bottomTableRef" :tableType="tableType" />
      </div>
    </div>
  </div>
</template>
<script setup>
import { Back, Document, CirclePlus, Delete } from "@element-plus/icons-vue";
import { VueDraggable } from "vue-draggable-plus";
import BottomTable from "@/views/base/craftManagement/route/components/bottomTable.vue";
import { comTypes } from "@/views/base/craftManagement/route/components/configs";
import { saveCompoents, getCompoentsList } from "@/api/craft/process/index";
import { useCommonStoreHook, useDictionaryStoreHook } from "@/store";
import {
  processesByRouteId,
  saveProcessInRoute,
} from "@/api/craft/route/index";

const router = useRouter();
const route = useRoute();

//组件是否已经改变，如果改变了需要点击保存，才能展示下面的table
const isChanged = ref(true);

const loadTopList = () => {
  getCompoentsList(route.params.id).then((res) => {
    selectProComs.value = res.data || [];
    selectIndex.value = -1;
    isChanged.value = false;
  });
};

onMounted(async () => {
  await loadTopList();
  isChanged.value = false;
});

// 顶部====================
const back = () => {};

const save = async () => {
  for (let i = 0; i < selectProComs.value.length; i++) {
    selectProComs.value[i].operationId = route.params.id;
    selectProComs.value[i].sortNum = i;
  }
  let p = {
    operationId: route.params.id,
    dtos: selectProComs.value,
  };
  let res = await saveCompoents(p);
  // Elmessage.success("保存成功");
  loadTopList();
};

// Tools顶部组件 ==================
// 已经存在的工序组件
const selectProComs = ref([]);
const selectIndex = ref(-1);
const currentCom = ref({});
const handleCommand = (itme) => {
  console.log(itme);
  selectProComs.value.push(itme);
  isChanged.value = true;
};

// 点击某一个改变下面的table
const clickToolCom = (com, index) => {
  selectIndex.value = index;
  currentCom.value = com;

  tableType.value = com.compentType;
};

const onUpdate = () => {
  console.log("update");
  isChanged.value = true;
};

const clickDelete = (index) => {
  selectProComs.value.splice(index, 1);
  selectIndex.value = -1;
  isChanged.value = true;
};

const getNameClass = (index) => {
  return index === selectIndex.value ? "selected" : "normal";
};

// 底部table ===============
const tipTitle = ref("编辑物料采集");
const bottomTableRef = ref({});
const tableType = ref("MARTERIAL");

const creatNewData = () => {
  bottomTableRef.value && bottomTableRef.value.startCreat();
};

const saveSortData = () => {
  bottomTableRef.value && bottomTableRef.value.saveSortData();
};
</script>

<style lang="scss" scoped>
.header {
  height: 50px;
  display: flex;
  background-color: #f5f7f9;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.types {
  width: 100%;
  height: 116px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding: 12px 20px;
  display: flex;
  .typeContainer {
  }
  .typeBox {
    height: 80px;
    width: 80px;
    border-radius: 4px 4px 4px 4px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .icon {
      height: 32px;
      width: 32px;
    }
    .name {
      width: 56px;
      height: 16px;
      font-weight: 500;
      font-size: 14px;
      line-height: 16px;
      text-align: center;
      font-style: normal;
      text-transform: none;
    }
  }

  .addBtn {
    border: 1px solid #0a59f7;
    color: #0a59f7;
  }
  .others {
    color: rgba(0, 0, 0, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.9);
    margin-left: 20px;
    position: relative;
  }
  .delete {
    //position: absolute;
    //bottom: -20px;
    //left: 0;
    margin-left: 50px;
    width: 1em;
    height: 1em;
    color: red;
    visibility: hidden;
  }
  .typeContainer:hover {
    .delete {
      visibility: visible;
    }
  }
  .normal {
    background: #ffffff;
    border: 1px solid rgba(35, 32, 50, 0.1);
  }
  .selected {
    background: rgba(10, 89, 247, 0.2);
    border: 1px solid #0a59f7;
  }
}

.title {
  line-height: 44px;
  color: #6f7991;
  font-size: 14px;
  font-weight: bold;
  text-align: left;
  margin-left: 20px;
}

.binContainer {
  height: calc(100vh - 165px);
  width: 100%;
  background-color: #f5f7f9;
  overflow-y: auto;
  background-color: white;
  //margin-top: 16px;
  //margin-left: 20px;
  padding: 16px 20px;
}
.tipTitle {
  width: 84px;
  height: 16px;
  font-weight: 500;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.9);
  line-height: 16px;
  text-align: left;
  font-style: normal;
  text-transform: none;
  margin-bottom: 16px;
}
</style>