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>
      <div class="processInfo">
        <span>工艺名称：{{ routeInfo?.processRouteName }}</span>
        <span>产品名称：{{ routeInfo?.prodtName }}</span>
        <span>产品型号: {{ routeInfo?.prodtModel }}</span>
      </div>
      <el-space>
        <el-button :icon="Back" size="small" @click="back">返回</el-button>
        <el-button
          :type="isChanged ? 'danger' : 'primary'"
          :icon="Document"
          size="small"
          @click="save"
          >保存</el-button
        >
      </el-space>
    </div>
    <div class="types">
      <el-dropdown @command="handleCommand" :hide-on-click="false">
        <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"
            >
              <div
                v-if="
                  prodtCode != '' ||
                  (prodtCode == '' && com.compentName != '物料采集')
                "
              >
                {{ com.compentName }}
              </div></el-dropdown-item
            >
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <VueDraggable
        v-model="selectProComs"
        :animation="150"
        :draggable="false"
        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 || isNoneedEdit">
        <el-empty :image-size="200" :description="getTipContent()" />
      </div>
      <div v-else-if="tipTitle !== '编辑工序表单'">
        <div class="tipTitle">{{ tipTitle }}</div>
        <el-tabs
          v-if="currentCom.compentType === 'wuliaocaiji'"
          v-model="materialType"
          type="card"
          @tab-change="materialTypeChange"
        >
          <el-tab-pane label="主料" name="1" />
          <el-tab-pane label="辅料" name="2" />
        </el-tabs>
        <el-button
          type="primary"
          @click="creatNewData"
          style="margin-bottom: 15px"
          >新增</el-button
        >
        <el-button
          type="primary"
          @click="bindCreate"
          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 v-else>
        <div class="tipTitle">{{ tipTitle }}</div>
        <SetExcel />
      </div>
    </div>
    <el-dialog
      v-model="dialog.visible"
      :title="dialog.title"
      width="900px"
      @close="dialog.visible = false"
      :destroy-on-close="true"
    >
      <el-container>
        <el-aside width="200px" style="overflow: hidden">
          <avue-tree
            :option="optionTree"
            :data="treeData"
            v-model="formTree"
            @node-click="nodeClick"
            @save="saveRow"
            @update="updateRow"
            @del="delRow"
          ></avue-tree>
        </el-aside>
        <el-main>
          <el-button
            type="primary"
            @click="creatGroupData"
            style="margin-bottom: 15px"
            >新增</el-button
          >
          <BottomTable
            ref="tableTreeRef"
            :tableType="tableType"
            :groupId="groupId"
            :isTree="'1'"
          />
        </el-main>
      </el-container>
    </el-dialog>
  </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 SetExcel from "./setExcel/index.vue";
import { comTypes } from "@/views/base/craftManagement/route/components/configs";
import {
  saveCompoents,
  getCompoentsList,
  treeDataList,
  treeDataSave,
  treeDataDel,
  treeDataUpdate,
} from "@/api/craft/process/index";
const formTree = ref(null);
import { useCommonStoreHook, useDictionaryStoreHook } from "@/store";
import {
  processesByRouteId,
  saveProcessInRoute,
} from "@/api/craft/route/index";

import { opExcelPage } from "@/api/craft/opExcel";
const prodtCode = ref("");
const routerId = ref("");
const router = useRouter();
const route = useRoute();
const dialog = reactive({
  title: "绑定双规格",
  visible: false,
});
const itemData = ref([]);
//组件是否已经改变，如果改变了需要点击保存，才能展示下面的table
const isChanged = ref(true);
const isNoneedEdit = ref(false); //有些组件是不需要编辑的，所以下面也不展示table
const loadTopList = () => {
  getCompoentsList(route.fullPath.split("/")[4]).then((res) => {
    selectProComs.value = res.data || [];
    selectIndex.value = -1;
    isChanged.value = false;
  });
};
const bindCreate = () => {
  treeDataList(treeParam.value).then((data) => {
    if (data.code === "200") {
      treeData.value = data.data;
    }
  });
  dialog.visible = true;
};
//查询工艺路线的一些信息
const routeInfo = ref();
const loadRouteInfo = async () => {
  const res = await processesByRouteId(route.fullPath.split("/")[6]);
  if (res.data) {
    routeInfo.value = res.data;
  }
};
//弹窗传递分组id
const groupId = ref(null);
const nodeClick = (data) => {
  groupId.value = data.id;
};
const treeSave = ref({});
const saveRow = (node, data, done, loading) => {
  console.log(data);
  treeSave.value.operationId = route.fullPath.split("/")[4];
  treeSave.value.label = data.label;
  treeSave.value.value = data.label;
  treeSave.value.materialType = materialType.value;
  treeDataSave(treeSave.value)
    .then((res) => {
      if (res.code === "200") {
        ElMessage.success("操作成功!");
        treeDataList(dataDetail.value).then((res) => {
          treeData.value = res.data;
        });
      }
    })
    .finally(done());
};

const delRow = (data, done) => {
  ElMessageBox.confirm("此操作将永久删除此分组, 是否继续?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      treeDataDel(data.data).then((resouce) => {
        done();
        if (resouce.code === "200") {
          ElMessage.success("删除成功");
        } else {
          ElMessage.error(resouce.msg);
          treeDataList(dataDetail.value).then((res) => {
            treeData.value = res.data;
          });
        }
      });
    })
    .catch(() => {
      ElMessage.info("已取消删除");
    });
};
const dataDetail = ref({});
const updateRow = (node, data, done, loading) => {
  treeDataUpdate(data).then((resouce) => {
    done();
    if (resouce.code === "200") {
      ElMessage.success("修改成功");

      treeDataList(dataDetail.value).then((res) => {
        treeData.value = res.data;
      });
    } else {
      ElMessage.error(resouce.msg);
    }
  });
};
const optionTree = {
  formOption: {
    labelWidth: 100,
    column: [
      {
        label: "关联名称",
        prop: "label",
      },
    ],
  },
  props: {
    labelText: "标题",
    label: "label",
    value: "value",
    children: "children",
  },
};
const treeData = ref(null);
const treeParam = ref({});
treeParam.value.operationId = route.fullPath.split("/")[4];
onMounted(async () => {
  prodtCode.value = route.fullPath.split("/")[5];
  routerId.value = route.fullPath.split("/")[6];
  await loadTopList();
  loadRouteInfo();
  dataDetail.value.operationId = route.fullPath.split("/")[4];
  treeParam.value.materialType = "1";
  dataDetail.value.materialType = "1";
});

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

const save = async () => {
  selectProComs.value.forEach((item1) => {
    comTypes.find((item2) => {
      if (item2.compentName === item1.compentName) {
        item1.index = item2.index;
      }
    });
  });
  selectProComs.value = selectProComs.value.sort((a, b) => {
    return a.index - b.index;
  });

  for (let i = 0; i < selectProComs.value.length; i++) {
    selectProComs.value[i].operationId = route.fullPath.split("/")[4];
    selectProComs.value[i].sortNum = i;
  }
  let p = {
    operationId: route.fullPath.split("/")[4],
    dtos: selectProComs.value,
  };
  let { res, code } = await saveCompoents(p);
  if (code == "200") {
    ElMessage.success("保存成功");
  }
  loadTopList();
};

// Tools顶部组件 ==================
// 已经存在的工序组件
const selectProComs = ref([]);
const selectIndex = ref(-1);
const currentCom = ref({});
const handleCommand = (item) => {
  let status = true;
  for (let i = 0; i < selectProComs.value.length; i++) {
    if (selectProComs.value[i].compentName == item.compentName) {
      status = false;
    }
  }
  if (status == true) {
    selectProComs.value.push(item);
    isChanged.value = true;
    selectIndex.value = -1;
  } else {
    ElMessage.error("请勿重复添加");
  }
};

// 点击某一个改变下面的table
const clickToolCom = (com, index) => {
  // 如果上方组件更改了，提示先保存组件再操作
  if (isChanged.value) {
    ElMessage.warning("请先保存组件！！！");
    return;
  }
  tipTitle.value = "编辑" + com.compentName;
  selectIndex.value = index;
  currentCom.value = com;
  if (
    com.compentType === "jiluxiang" ||
    com.compentType === "mingpai" ||
    com.compentType === "duomeiticaiji" ||
    com.compentType === "tiaoshipipei" ||
    com.compentType === "jingu" ||
    com.compentType === "ceshishuju" ||
    com.compentType === "screwdriver" ||
    com.compentType === "gongxuwenjian" ||
    com.compentType === "shebeijilu"
  ) {
    isNoneedEdit.value = true;
  } else {
    tableType.value = com.compentType;
    isNoneedEdit.value = false;
  }
};

const onUpdate = () => {
  isChanged.value = true;
  selectIndex.value = -1;
};

const clickDelete = async (index) => {
  if (selectProComs.value[index].compentType === "operationExcel") {
    let operationId = route.fullPath.split("/")[4];
    let res = await opExcelPage(operationId);
    if (res.data.totalCount > 0) {
      ElMessage.error("请先删除工序表单数据！");
      return;
    }
  }
  selectProComs.value.splice(index, 1);
  selectIndex.value = -1;
  isChanged.value = true;
};

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

// 底部table ===============
let tipTitle = ref({});
const bottomTableRef = ref({});
const tableTreeRef = ref({});
const tableType = ref("MARTERIAL_BOM");

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

const creatGroupData = () => {
  tableTreeRef.value && tableTreeRef.value.groupCreat();
};
const saveSortData = () => {
  bottomTableRef.value && bottomTableRef.value.saveSortData();
};

const getTipContent = (itemValue) => {
  if (isNoneedEdit.value) {
    return "标准组件无需编辑";
  }
  if (selectIndex.value === -1 && isChanged.value) {
    return "请先保存组件，然后再进行操作";
  }

  return "请先选择组件";
};

// 无聊采集组件 主料和辅料
const materialType = ref("1");
const materialTypeChange = (val) => {
  materialType.value = val;
  dataDetail.value.materialType = val;
  treeParam.value.materialType = val;
  if (val === "1") {
    tableType.value = "wuliaocaiji";
  } else {
    tableType.value = "fuliaoCJ";
  }
};
</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,
.processInfo {
  line-height: 44px;
  color: #6f7991;
  font-size: 14px;
  font-weight: bold;
  text-align: left;
  margin-left: 20px;
}

.processInfo span {
  margin-left: 100px;
}

.processInfo {
  position: absolute;
  left: 5%;
}

.binContainer {
  height: calc(100vh - 280px);
  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;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>