1

lzhe

2024-06-05 dcf9c9e0410fe1186239e3f8d6f7bdc789c08010

 src/views/console/product-process/process-route.vue

@@ -1,89 +1,80 @@
<template>
   <div class="processPage">
      <div class="roleContainer">
         <div>+新建工艺路线</div>
         <div class="addRoute" @click="addRoute">+新建工艺路线</div>
         <el-input v-model="keyword" size="small" prefix-icon="el-icon-search" placeholder="请输入名称" clearable @keyup.enter="searchBtn"></el-input>
         <ul class="left-ul">
            <li v-for="(item,index) in leftData" :class="{active: item.active}" @click="changeTabaleLi(index)">
               <span>【{{item.code}}】{{item.name}}</span>
               <div>{{item.name}}</div>
               <div>关联产品【{{item.productCode}}】{{item.productName}}</div>
               <div>{{item.description}}</div>
               <el-dropdown class="fix-btn">
                  <span class="el-dropdown-link">...</span>
                  <template #dropdown>
                  <el-dropdown-menu>
                     <el-dropdown-item @click="table_edit(item, index)">编辑</el-dropdown-item>
                     <el-dropdown-item>删除</el-dropdown-item>
                  </el-dropdown-menu>
                  </template>
               </el-dropdown>
            </li>
         </ul>
      </div>
      <div class="process-main-tabs">
         <div class="process-main-header">
            <div class="main-header-label">工艺路线</div>
            <div style="padding: 20px;border-bottom: 1px solid #dee;">
            <div class="main-header-label">工艺路线<span>{{productName}}</span></div>
            <div style="padding: 20px 20px 8px;border-bottom: 1px solid #dee;">
               <div class="main-info">
                  <div class="main-info-title">工艺路线版本</div>
                  <div class="info-top-title">工艺路线版本</div>
                  <div class="main-info-tooltip">
                     <div class="main-info-item"><span style="background-color: yellow"></span><span>未定版</span></div>
                     <div class="main-info-item"><span style="background-color: #f8ab00"></span><span>未定版</span></div>
                     <div class="main-info-item"><span style="background-color: #b7c9f3"></span><span>已定版</span></div>
                  </div>
               </div>
               <div>
                  <el-button type="primary" @click="addVis" disabled>添加新版本</el-button>
                  <div :class="{'btn-box':true, 'vistion-button': true, 'isBorder': item.isBorder}" v-for="(item,index) in detail.dtos" @click="changeDots(item,index)">
                     <span class="vistion-button-round"></span>
                     <el-tooltip trigger="click" class="detail-item" effect="dark" :content="vHtml" placement="bottom" raw-content>
                        <span class="vistion-button-name" @click="showDetail(item)">{{item.name}}</span>
                      </el-tooltip>
                     <el-icon class="vistion-button-icon"><DocumentCopy /></el-icon>
                     <el-icon class="vistion-button-icon" @click="delIcon(item)"><Delete /></el-icon>
                  </div>
                  <div class="btn-box most-vision" @click="changeV" v-if="detail.dtos.length!=0">{{changVTitle}}</div>
                  <el-button @click="addVision">+ 添加新版本</el-button>
               </div>
            </div>
         </div>
         <div>关联产线<span>-</span></div>
         <div class="correlation-product-line">关联产线<span>千文科技</span></div>
         <div class="process-main-content">
            <div class="main-content-left">
               <div class="main-info-title">工艺路线</div>
               <div>
                     <el-button type="primary">新增</el-button>
                     <el-button type="primary">定版</el-button>
                     <el-button disabled>并序</el-button>
               </div>
               <el-table ref="multipleTableRef0" :data="tableData" border style="width: 100%" class="multipleTableRef">
                  <el-table-column prop="name" label="工序顺序"></el-table-column>
                  <el-table-column prop="code" label="工序编号"></el-table-column>
                  <el-table-column prop="typeName" label="工序名称"></el-table-column>
                  <el-table-column fixed="right" label="操作" width="200px">
                     <template #default="scope">
                        <!-- <el-button text type="primary" size="small" @click="table_edit(scope.row, scope.$index)">编辑</el-button>
                        <el-button text type="primary" size="small" @click="table_edit(scope.row, scope.$index)">刷新</el-button>
                        <el-button text type="primary" size="small" @click="table_edit(scope.row, scope.$index)">删除</el-button> -->
                     </template>
                  </el-table-column>
               </el-table>
            </div>
            <div class="main-content-right">
               <div class="main-info-title">工序信息</div>
               <ul>
                  <li>工序编号<span>-</span></li>
                  <li>工序名称<span>-</span></li>
                  <li>工序顺序<span>-</span></li>
               </ul>
            </div>
            <!-- isCustomization 新建/步骤 -->
            <workmanship :isCustomization="true" :craftId="craftId"></workmanship>
         </div>
      </div>
      <!-- <el-dialog title="" v-model="visible" :width="360" class="visible-model">
           <el-form :model="routeForm" :rules="routeRules" ref="dialogForm" label-width="120px"
               label-position="center">
               <el-row>
                   <el-col :span="24">
                       <el-form-item label="工艺路线版本" prop="test">
                           <el-select v-model="routeForm.test" style="width: 100%" placeholder="请选择">
                        <el-option v-for="item in testList" :key="item.id" :label="item.title" :value="item.id"/>
                     </el-select>
                       </el-form-item>
                   </el-col>
               </el-row>
           </el-form>
           <template #footer>
               <el-button @click="visible = false">取消</el-button>
               <el-button type="primary" :loading="isSaveing" @click="routeSubmit">确定</el-button>
           </template>
       </el-dialog> -->
   </div>
   <save-dialog v-if="dialog.save" ref="saveDialog" @success="addRouteSuccess" @closed="dialog.save=false"></save-dialog>
</template>

<script>
   import saveDialog from './addRoute'
   import workmanship from './process-route/workmanship'  //工艺路线
   import * as ElementPlusIconsVue from '@element-plus/icons-vue'
   let icons = []
   for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
      icons.push(key)
   }
   export default {
      name: 'BOM',
      components: {},
      name: 'route',
      components: {...ElementPlusIconsVue,saveDialog,workmanship},
      data() {
         return {
            craftId: "",
            id: "",
            changVTitle: "更多版本...",
            isMore: true,
            productName: "",
            vHtml: '',
            detail: {dtos: [{name: "",isBorder: false}]},
            testList: [],
            routeForm: {
               test: ""
@@ -96,17 +87,81 @@
            visible: false,
            leftData: [],
            dialog: {
               save: false,
               permission: false
               save: false
            },
            info: {},
            tableData: []
            delIconId: ""
         }
      },
      mounted(){
         //this.getLeftTree();
         this.getLeftTree();
      },
      methods: {
         delIcon(item) {
            this.delIconId = item.id;
            var that = this;
            this.$confirm(`确认要删除此工艺版本吗?`, '', {
               type: 'warning'
            }).then(() => {
               this.$HTTP.delete("/api/blade-cps/production-craft-version/remove/"+that.delIconId).then(res=> {
                  if(res.code == 200) {
                     that.$message.success("操作成功");
                     that.getDetail();
                  }
               })
            }).catch(() => {

            })
         },
         changeDots(item,index) {
            this.detail.dtos.forEach(item=> {
               item.isBorder = false;
            })
            this.detail.dtos[index].isBorder = true;
            this.craftId = item.id;
         },
         addVision() {
            this.$router.push({path: `/console/product-process/process-route/add-craft-version`,query: {id:this.id,craftId:this.craftId}})
         },
         addRoute() {
            this.$router.push({path: `/console/product-process/process-route/add-craft`,query: {id:this.id}})
         },
         changeV() {
            this.isMore = !this.isMore;
            if(this.isMore) {
               this.changVTitle = "更多版本...";
            }else {
               this.changVTitle = "收起";
            }
         },
         showDetail(item) {
            this.$HTTP.get(`/api/blade-cps/production-craft-version/detail/${item.id}`).then(res=> {
               if(res.code == 200) {
                  this.vHtml = `<ul class='detailUl'>
                     <li><span class='detailStyle'>名称</span><span>${res.data.name}</span></li>
                     <li><span class='detailStyle'>关联产线</span><span>${res.data.groupName}</span></li>
                     <li><span class='detailStyle'>描述</span><span>${res.data.description}</span></li>
                     <li><span class='detailStyle'>创建人</span><span>${res.data.createUser}</span></li>
                     <li><span class='detailStyle'>创建时间</span><span>${res.data.createTime}</span></li>
                     <li><span class='detailStyle'>修改人</span><span>${res.data.updateUser}</span></li>
                     <li><span class='detailStyle'>修改时间</span><span>${res.data.updateTime}</span></li>
                  </ul>`
               }
            })
         },
         table_edit(row){
            this.$HTTP.get(`/api/blade-cps/craft-routing/not-band-craft?craftId=${row.id}`).then(res=> {
               if(res.code == 200) {
                  this.dialog.save = true;
                  this.$nextTick(() => {
                     this.$refs.saveDialog.open('edit').setData(row,res.data);
                  })
               }
            })
         },
         addRouteSuccess() {
            this.getLeftTree();
         },
         routeSubmit() {
            this.$refs.dialogForm.validate(async (valid) => {
               if (valid) {
@@ -126,9 +181,6 @@
            })
         },
         searchBtn() {},
         addVis() {
            this.visible = true;
         },
         changeTabaleLi(index) {
            this.leftData.forEach(item=> {
               item.active = false;
@@ -136,10 +188,34 @@
            this.leftData[index].active = true;
            this.info = this.leftData[index];
         },
         getDetail() {
            this.$HTTP.get(`/api/blade-cps/craft-routing/detail?id=${this.id}`).then(res=> {
               if(res.code == 200) {
                  if(res.data.dtos.length != 0) {
                     res.data.dtos.forEach(item=> {
                        item.isBorder = false;
                     })
                     res.data.dtos[0].isBorder = true;
                     this.craftId = res.data.dtos[0].id;
                  }
                  this.detail = res.data;
               }
            })
         },
         getLeftTree() {
            this.$HTTP.get("/api/blade-cps/product/tree").then(res=> {
            var params = [{
               key: "name_like",value: ""
            },{
               key: "0",value: ""
            }]
            this.$HTTP.post("/api/blade-cps/craft-routing/list",{params}).then(res=> {
               if(res.code == 200) {
                  this.leftData = res.data;
                  if(res.data) {
                     this.productName = res.data[0].name;
                     this.id = res.data[0].id;
                  }
                  this.getDetail();
               }
            })
         }
@@ -177,22 +253,42 @@
}
.left-ul {
   margin-top: 12px;
   padding-left:30px;
   padding-right:30px;
}
.left-ul li {
   padding: 6px 6px;
   padding-left:30px;
   padding-right:30px;
   padding-top: 8px;
   padding-bottom: 0px;
   list-style: none;
   cursor: pointer;
   margin-bottom: 6px;
   border: 1px solid #7ab3ee;
   width: 100%;
   position: relative;
}
.fix-btn {
   position: absolute;
   top: 8px;
   right: 2px;
   width: 30px;
   height: 20px;
   background-color: #ebeaea;
   text-align: center;
}
.el-dropdown-link {
   text-align: center;
    display: inline-block;
    width: 100%;
}
.left-ul .active {
   background-color: #7ab3ee;
   display: inline-block;
   width: 100%;
}
.left-ul li:hover {
   background-color: #eff4f9;
}
.left-ul li > div {
   margin-bottom: 12px;
   font-size: 14px;
}
.main-info {
   display: flex;
@@ -203,13 +299,22 @@
    text-align: left;
    color: #333;
    height: 52px;
   line-height: 52px;
   font-weight: bold;
    border-bottom: 1px solid #dee;
    padding: 0 16px;
}
.main-info-title {
   font-size: 14px;
    padding-left: 8px;
    border-left: 2px solid #7ab3ee;
.main-header-label span {
   margin-left: 12px;
}
.info-top-title {
   padding-left: 8px;
    border-left: 4px solid #86bffa;
    line-height: 18px;
    margin-bottom: 16px;
    font-weight: 700;
    font-size: 16px;
    color: #333;
}
.main-info-tooltip {
   display: flex;
@@ -225,36 +330,73 @@
    margin-right: 4px;
    display: inline-block;
}
.main-info-conent {
   display: flex;
    margin: 8px 0px 12px;
.addRoute {
   color: #409eff;
   padding: 12px 6px;
   font-size: 14px;
   cursor: pointer;
}
.main-info-conent > span {
.btn-box {
   display: inline-block;
}
.most-vision {
   border-bottom: 1px solid #86bffa;
   font-size: 14px;
   font-weight: 700;
   cursor: pointer;
   margin-right: 12px;
   margin-left: 6px;
}
.vistion-button {
   border: 1px solid #86bffa;
    padding: 8px 12px;
   margin-right: 6px;
   margin-bottom: 12px;
}
.vistion-button-name {
   vertical-align: middle;
   cursor: pointer;
}
.vistion-button-round {
   width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 4px;
    display: inline-block;
    background-color: #f8ab00;
   vertical-align: middle;
}
.vistion-button-icon {
   margin-left: 8px;
   font-size: 14px;
   vertical-align: middle;
   cursor: pointer;
}
.correlation-product-line {
   padding-top: 12px;
   padding-bottom: 12px;
   padding-left: 20px;
   font-size: 14px;
}
.main-info-conent > span span {
   margin-left:12px;
.correlation-product-line span {
   margin-left: 20px;
}
.process-main-content {
   display: flex;
.isBorder {
   border: 1px solid #0176f0;
}
.main-content-left {
   width: 70%;
}
.main-content-right {
   flex: 1;
}
.main-content-right ul {
   padding: 12px 30px;
}
.main-content-right ul li {
   width: 50%;
   float: left;
   list-style: none;
   margin-bottom:12px;
}
.main-content-right ul li span {
   margin-left:12px;
}
</style>
<style>
   .detailUl {
      padding:20px 6px 8px;
   }
   .detailUl li{
      list-style: none;
      margin-bottom: 8px;
   }
   .detailStyle {
      display: inline-block;
      width: 60px;
      text-align: right;
      margin-right:20px;
   }
</style>