1.工艺路线备份

loulijun2021

2022-09-26 f8f4b4d42f1a6997a6e1a1d329f2296eb37a2a62

1.工艺路线备份

 src/views/bbgl/pzyc.vue

@@ -117,6 +117,8 @@
        },
        yAxis: {
          name: '数量',
          max: Math.ceil(Math.max(...this.echartsData.map(r => r.cont)) * 1.1), // 取数组里面最大的值乘1.1倍的整数的天花板
          interval: 1,
          nameTextStyle: {
            color: '#000',
            fontSize: 16,
@@ -177,13 +179,19 @@
          height: 15,
          start: 1,
          end: 35

        }
        ],
        series: [{
          name: '数量',
          type: 'bar',
          barWidth: '15%',
          label: {
            show: true,
            position: 'top',
            textStyle: {
              color: '#000'
            }
          },
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
@@ -245,30 +253,30 @@

      const myChart = echarts.init(document.getElementById('Echarts'))

      setInterval(function() {
        var dataLen = option.series[0].data.length

        // 取消之前高亮的图形
        myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: app.currentIndex
        })
        app.currentIndex = (app.currentIndex + 1) % dataLen
        // console.log(app.currentIndex);
        // 高亮当前图形
        myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: app.currentIndex
        })
        // 显示 tooltip
        myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: app.currentIndex
        })
      }, 1000)
      // setInterval(function() {
      //   var dataLen = option.series[0].data.length
      //
      //   // 取消之前高亮的图形
      //   myChart.dispatchAction({
      //     type: 'downplay',
      //     seriesIndex: 0,
      //     dataIndex: app.currentIndex
      //   })
      //   app.currentIndex = (app.currentIndex + 1) % dataLen
      //   // console.log(app.currentIndex);
      //   // 高亮当前图形
      //   myChart.dispatchAction({
      //     type: 'highlight',
      //     seriesIndex: 0,
      //     dataIndex: app.currentIndex
      //   })
      //   // 显示 tooltip
      //   myChart.dispatchAction({
      //     type: 'showTip',
      //     seriesIndex: 0,
      //     dataIndex: app.currentIndex
      //   })
      // }, 1000)

      if (option.textStyle == null) {
        option.textStyle = {

 src/views/scgl/sckbg.vue

@@ -606,6 +606,7 @@
            placeholder="请选择"
            :disabled="parseFloat(dialogForm.noputqty)===0||dialogForm.noputqty.trim()===''"
            multiple
            collapse-tags
          >
            <el-option
              v-for="item in badArr"
@@ -639,8 +640,10 @@
          <i class="el-icon-s-operation" style="color:#42b983;" /> 人员列表
          <el-button type="primary" style="margin: 10px 0" @click="userAdd">增行</el-button>
          <el-table
            ref="userTableDataRef"
            :data="userTableData"
            border
            class="tableFixed"
            :row-class-name="tableRowClassName"
            :header-cell-style="this.$headerCellStyle"
            :cell-style="this.$cellStyle"
@@ -821,6 +824,7 @@
            v-model="dialogForm.badcode"
            style="width: 200px;"
            multiple
            collapse-tags
            :disabled="parseFloat(dialogForm.noputqty)===0||dialogForm.noputqty.trim()===''"
            placeholder="请选择"
          >
@@ -1784,6 +1788,8 @@
      })

      this.ZZuserArr = [...this.ZZuserArr].filter(x => [...this.userTableData].every(y => y.usercode !== x.usercode))

      this.$refs.tableDataRef.doLayout()
    },
    // 用户添加
    userAdd() {

 src/views/zzmx/gylx_bak.vue

@@ -1,461 +1,751 @@
<template>
  <div>
    <div class="body" style="background-color: #ffffff;  padding: 20px 10px 0 20px;">
      <div style="margin-bottom: 20px;">
    <div class="body" :style="{height:mainHeight+'px'}">

      <div class="bodyTopButtonGroup">
        <el-button type="primary" icon="el-icon-circle-plus-outline" @click="add('add')">新增</el-button>
        <!--        <el-button type="primary" icon="el-icon-upload2" @click="upload">导入</el-button>-->
      </div>

      <div class="bodyTopFormGroup">
        <el-form
          ref="form"
          :model="form"
          label-width="80px"
          label-width="100px"
          inline
          style="display: flex;justify-content: space-between"
        >
          <div style="display: flex;justify-content: space-around;width: 85%">
            <el-form-item label="公益路线">
              <el-input v-model="form.gylx" placeholder="请输入" />
          <div class="elForm">
            <el-form-item label="工艺路线编码" style=" display: flex;">
              <el-input v-model="form.routecode" placeholder="请输入" style="width: 200px" />
            </el-form-item>
            <el-form-item label="物料编码">
              <el-input v-model="form.wlbm" placeholder="请输入" />
            <el-form-item label="工艺名称" style=" display: flex;">
              <el-input v-model="form.routename" placeholder="请输入" style="width: 200px" />
            </el-form-item>
            <el-form-item label="物料名称">
              <el-input v-model="form.wlmc" placeholder="请输入" />
            <el-form-item label="工艺描述" style=" display: flex;">
              <el-input v-model="form.description" placeholder="请输入" style="width: 200px" />
            </el-form-item>
            <el-form-item label="创建人员" style=" display: flex;">
              <el-input v-model="form.createuser" style="width: 200px" placeholder="请输入" />
            </el-form-item>
          </div>
          <div style="display: flex;">
          <div class="bodySearchReset">
            <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
            <el-button type="text" style="display: flex;align-items: start;padding-top: 10px;" @click="reset">重置
            </el-button>
            <el-button type="info" icon="el-icon-refresh" @click="reset">重置</el-button>
          </div>
        </el-form>
        <div style="display: flex;justify-content: space-between">

          <div style="display:flex;">
            <el-button type="primary" icon="el-icon-circle-plus-outline">新增</el-button>
            <el-button type="primary" icon="el-icon-delete">修改</el-button>
            <el-button type="primary" icon="el-icon-delete">删除</el-button>
            <el-button type="primary" icon="el-icon-upload2" @click="upLoad">导入</el-button>
            <el-button type="primary" icon="el-icon-download" @click="downLoad">导出</el-button>
          </div>

          <div style="display: flex;justify-content: end;margin-right: 20px">
            <el-button type="text" icon="el-icon-document">查看我的工作日志</el-button>
          </div>

        </div>
      </div>
      <div style="display: flex;width: 100%;">
        <div>
          <el-table
            :data="tableData1"
            style="width: 100%;border: 1px solid #eee"
            :header-cell-style="this.$headerCellStyle"
            :cell-style="this.$cellStyle"
          >
            <el-table-column type="selection">
              <!--              <template slot-scope="{row}">-->

              <!--                &lt;!&ndash;                {{ row.isSelect }}&ndash;&gt;-->

              <!--                &lt;!&ndash;                <el-radio :key="row.id" v-model="row.id" @change="radioValueChange($event)" />&ndash;&gt;-->
              <!--              </template>-->
            </el-table-column>
            <el-table-column label="工艺路线" prop="gylx" />
            <el-table-column label="物料编码" prop="wlbm" />
            <el-table-column label="物料名称" prop="wlmc" />
            <el-table-column label="物料规格" prop="wlgg" />
            <el-table-column label="结束装箱" prop="jszx">
              <template slot-scope="{row}">
                <div v-if="row.jszx==='1'">是</div>
                <div v-if="row.jszx==='0'">否</div>
              </template>
            </el-table-column>
          </el-table>
          <!--分页-->
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="form.pageNum"
            :limit.sync="form.pageSize"
            align="right"
            layout="prev, pager, next,sizes"
            popper-class="select_bottom"
            style="padding: 0;margin-top: 10px;"
      <div class="elTableDiv">
        <el-table
          ref="tableDataRef"
          class="tableFixed"
          :data="tableData"
          :height="tableHeight"
          border
          :row-class-name="tableRowClassName"
          :style="{width: 100+'%',height:tableHeight+'px',}"
          highlight-current-row
          :header-cell-style="this.$headerCellStyle"
          :cell-style="this.$cellStyle"
          @sort-change="sortChange"
        >
          <!--          <el-table-column-->
          <!--            type="selection"-->
          <!--            width="50"-->
          <!--          />-->
          <el-table-column
            prop="RowNum"
            width="50"
            label="序号"
            fixed
          />
        </div>
        <div style="margin:0 20px;width: 71%;">
          <el-table
            :data="tableData2"
            border
            height="500px"
            style="width: 100%;"
            :header-cell-style="this.$headerCellStyle"
            :cell-style="this.$cellStyle"
          <el-table-column
            prop="code"
            label="编码"
            sortable="custom"
          />
          <el-table-column
            prop="name"
            label="名称"
            sortable="custom"
          />
          <el-table-column
            prop="description"
            label="工艺路线描述"
            sortable="custom"
          >
            <el-table-column label="" prop="" type="index" />
            <el-table-column label="工序编码" prop="gxbm" />
            <el-table-column label="工序名称" prop="gxmc" />
            <el-table-column label="工序检验" prop="gxjy" />
            <el-table-column label="初始节拍" prop="csjp" />
            <el-table-column label="初始型腔数" prop="csxqs" />
            <el-table-column label="初始工价" prop="csgj">
              <template slot-scope="{row}">
                <div>{{ row.csgj }}元</div>
              </template>
            </el-table-column>
            <el-table-column label="编辑操作">
              <template slot-scope="{row}">
                <el-tooltip content="新增" placement="top">
                  <el-button type="text" icon="el-icon-circle-plus-outline" />
            <template slot-scope="{row}">
              <div v-if="row.description">{{ row.description }}</div>
              <div v-else>/</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="enable"
            label="使用状态"
            sortable="custom"
          >
            <template slot-scope="{row}">
              <div v-if="row.enable==='Y'">
                <svg-icon icon-class="circleYes" style="margin-right: 2px" />
                是
              </div>
              <div v-if="row.enable==='N'">
                <svg-icon icon-class="circleNo" style="margin-right: 2px" />
                否
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="lm_user"
            label="创建人员"
            sortable="custom"
          />
          <el-table-column
            prop="lm_date"
            label="创建时间"
            sortable="custom"
            width="160"
          />
          <el-table-column
            label="操作"
            width="120"
            fixed="right"
          >
            <template slot-scope="{row}">
              <div class="operationClass">
                <el-tooltip class="item" effect="dark" content="预览" placement="top">
                  <i
                    class="el-icon-view"
                    style="margin-right:15px;cursor: pointer;color:#42b983  "
                    @click="edit('edit',row)"
                  />
                </el-tooltip>
                <el-tooltip content="修改" placement="top">
                  <el-button type="text" icon="el-icon-edit" />
                <el-tooltip v-del-tab-index class="item" effect="dark" content="删除" placement="top">
                  <i class="el-icon-delete" @click="del(row)" />
                </el-tooltip>
                <el-tooltip content="删除" placement="top">
                  <el-button type="text" icon="el-icon-delete" />
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column label="关联工作站">
              <template slot-scope="{row}">
                <el-tooltip content="工作站" placement="top">
                  <el-button type="text" icon="el-icon-share" @click="shareClick(row)" />
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>

          <div style="height: 100px;border: 1px solid #eee; margin-top: 20px">
            <div style="margin: 20px;color:#42b983;">工艺路线</div>
            <div>
              <el-steps
                style="display:flex;
                margin-top: -25px;
                justify-content: center;"
                :space="400"
                :active="3"
                align-center
              >

                <el-step title="下料" />
                <el-step title="电化学" />
                <el-step title="清洗烘干" />
              </el-steps>
            </div>
          </div>
        </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-dialog
        title="关联工作站"
        :visible.sync="dialogVisible"
        width="50%"
        top="5vh"
        @closed="handleClose"
      >
        <el-divider />
        <div style="margin-bottom: 10px;">
          <i class="el-icon-s-comment" style="color:#42b983;" /> 工序名称：{{ dialogGxmc }}
        </div>
        <div>
          <!--        <template>-->
          <el-radio-group v-model="dialogRadioValue" @change="dialogRadioChange($event)">
            <el-radio
              v-for="item in dialogContentArr"
              :key="item.id"

              :label="item.name"
              border
              size="medium"
            />
            <!--            v-model="item.id"-->
          </el-radio-group>
          <!--        </template>-->
        </div>
        <div style="height: 350px;border: 1px solid #eee; margin-top: 20px;overflow-y:scroll">
          <el-tree
            ref="tree"
            style="margin-left: 10px;"
            :data="treeData"
            show-checkbox
            default-expand-all
            node-key="id"
            highlight-current
            @node-click="nodeClick"
          >
            <!--          :props="defaultProps"-->

            <div slot-scope="{node,data}" style="display: flex;justify-content: space-between;width: 80%;">
              <div>{{ node.label.split('&')[0] }}</div>
              <div>{{ node.label.split('&')[1] }}</div>
            </div>

          </el-tree>
        </div>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisibleCancel">取 消</el-button>
          <el-button type="primary" @click="dialogVisibleConfirm">确 定</el-button>
        </span>
      </el-dialog>
      <!--分页-->
      <pagination
        :total="total"
        :page.sync="form.page"
        :limit.sync="form.rows"
        align="right"
        layout="total,prev, pager, next,sizes"
        popper-class="select_bottom"
        @pagination="getRouteSearch"
      />
    </div>

    <el-dialog
      :title="operation==='add'?'新增':'预览'"
      :visible.sync="dialogVisible"
      width="1000px"
      :close-on-click-modal="false"
      :top="isIpad?'5vh':'15vh'"
      @closed="handleClose"
      @close="handleClose"
    >
      <el-form ref="dialogForm" style="height: 500px" :rules="dialogFormRules" :model="dialogForm" label-width="110px">
        <div style="display: flex">
          <el-form-item label="工艺路线编码" prop="code" style="margin-right: 20px">
            <el-input v-model="dialogForm.code" :disabled="operation!=='add'" style="width: 220px" />
          </el-form-item>
          <el-form-item label="工艺名称" prop="name">
            <el-input v-model="dialogForm.name" :disabled="operation==='edit'" style="width: 220px" />
          </el-form-item>
        </div>
        <div style="display: flex">
          <el-form-item prop="enable" label="使用状态" style="margin-right: 20px">
            <el-select
              v-model="dialogForm.enable"
              filterable
              :disabled="operation==='edit'"
              :popper-append-to-body="false"
              style="width: 220px"
              placeholder="请选择"
            >
              <el-option
                v-for="item in isEnableArr"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="工艺描述" prop="description">
            <el-input
              v-model="dialogForm.description"
              :disabled="operation==='edit'"
              type="textarea"
              style="width: 220px"
            />
          </el-form-item>
        </div>
        <el-form-item label="工艺设置" prop="Data" style="margin-top: 30px">
          <div class="settingDiv">
            <!--   实现工艺设置动态添加-->
            <div v-for="(tag,index) in dynamicTags" :key="tag.seq" style="display: flex;align-items: center">
              <div style="display: flex;align-items: center;position: relative;">
                <div
                  class="orderNumber"
                  :style="{
                    backgroundColor:index===0?'#f8f8fa':'#409EFF',
                    color:index===0?'#c6bbc4':'#FFFFFF',
                    border:index===0?'1px solid #c6bbc4':'1px solid #409EFF',
                    zIndex:tag.label===selectedName?0:2
                  }"
                >
                  {{ index + 1 }}
                </div>

                <!--                <el-tooltip-->
                <!--                  class="item"-->
                <!--                  effect="dark"-->
                <!--                  :content="tag.stepname"-->
                <!--                  placement="top"-->
                <!--                >-->
                <!--                  @close="handleTagClose(tag.stepname)"-->
                <!--                  :closable="index!==0"-->

                <el-tag
                  v-if="tag.stepname!==selectedName"
                  :disable-transitions="false"
                  class="elTag"
                  :effect="tag.effect"
                  @click="elTagClick(tag)"
                >
                  {{ tag.stepname }}
                  <i
                    v-if="tag.editDisabled&&operation!=='edit'"
                    class="el-icon-edit"
                    @click="tagEdit(tag)"
                  />
                </el-tag>
                <!--                </el-tooltip>-->

                <!--                left:tag.stepname===selectedName?'191px':'141px',-->
                <i
                  v-if="index!==0&&tag.editDisabled&&operation!=='edit'"
                  :style="{
                    top:tag.stepname===selectedName?'-2px':'-8px',
                  }"
                  class="el-icon-close"
                  @click="handleTagClose(tag)"
                />
                <el-autocomplete
                  v-if="tag.stepname===selectedName"
                  :ref="'saveTagInput'+tag.seq"
                  v-model="autocompleteValue"
                  class="input-new-tag"
                  size="small"
                  :fetch-suggestions="querySearch"
                  style="margin-left: 0;width: 150px;transform: translate(1)"
                  autofocus
                  :debounce="300"
                  :popper-append-to-body="false"
                  popper-class="autocompleteClass"
                  @select="handleSelect"
                  @keyup.enter.native="handleInputConfirm(tag)"
                />
                <!--        @blur="handleBlur2"-->
                <div
                  v-if="index!==dynamicTags.length-1"
                  style="width: 40px;height: 1px;border: 1px solid #42b983"
                />
              </div>
            </div>

            <el-button
              v-if="operation!=='edit'"
              type="success"
              :disabled="addDisabled"
              class="tagSuccess"
              size="small"
              icon="el-icon-plus"
              @click="showInput"
            />

          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <div class="footerButton">
          <el-button v-if="operation==='edit'" @click="dialogVisibleCancel">返 回</el-button>
          <el-button v-if="operation!=='edit'" @click="dialogVisibleCancel">取 消</el-button>
          <el-button v-if="operation!=='edit'" type="primary" @click="dialogVisibleConfirm">确 定</el-button>
        </div>
      </span>
    </el-dialog>
  </div>
</template>

<script>

import Pagination from '@/components/Pagination'
import { cellStyle } from '@/utils/global'
import { AddUpdateRoute, DeleteRoute, RouteSearch, StepSelect, ViewRoute } from '@/api/zzmx'
import { validateCode } from '@/utils/global'

export default {
  name: 'Gylx',
  name: 'GYLX',
  components: {
    Pagination
  },
  data() {
    return {
      isIpad: false,
      mainHeight: 0,
      tableHeight: 0,
      form: {
        pageNum: 1, // 第几页
        pageSize: 10, // 每页多少条
        gylx: '', // 公益路线
        wlbm: '', // 物料编码
        wlmc: ''// 物料名称
        routecode: '', // 工艺路线编码
        routename: '', // 工艺路线名称
        description: '', // 工艺路线描述
        createuser: '', // 创建人员
        prop: 'lm_date', // 排序字段
        order: 'desc', // 排序字段
        page: 1, // 第几页
        rows: 20 // 每页多少条
      },
      isEnableArr: [
        { label: '是', value: 'Y' },
        { label: '否', value: 'N' }
      ],
      total: 10,
      tableData1: [
        { id: 1, isSelect: false, gylx: 'R0145', wlbm: '1403-001-0001', wlmc: '圆钢F45MnVS20', wlgg: '20', jszx: '1' },
        { id: 2, isSelect: false, gylx: 'R0145', wlbm: '1403-001-0001', wlmc: '圆钢F45MnVS20', wlgg: '20', jszx: '1' },
        { id: 3, isSelect: false, gylx: 'R0145', wlbm: '1403-001-0001', wlmc: '圆钢F45MnVS20', wlgg: '20', jszx: '1' },
        { id: 4, isSelect: true, gylx: 'R0145', wlbm: '1403-001-0001', wlmc: '676端件', wlgg: '676', jszx: '1' },
        { id: 5, isSelect: false, gylx: 'R0145', wlbm: '1403-001-0001', wlmc: '676端件', wlgg: '676', jszx: '1' },
        { id: 6, isSelect: false, gylx: 'R0145', wlbm: '', wlmc: '', wlgg: '', jszx: '1' },
        { id: 7, isSelect: false, gylx: 'R0145', wlbm: '', wlmc: '', wlgg: '', jszx: '1' },
        { id: 8, isSelect: false, gylx: 'R0145', wlbm: '', wlmc: '', wlgg: '', jszx: '1' },
        { id: 9, isSelect: false, gylx: 'R0145', wlbm: '', wlmc: '', wlgg: '', jszx: '1' },
        { id: 10, isSelect: false, gylx: 'R0145', wlbm: '', wlmc: '', wlgg: '', jszx: '1' }
      ],
      radioValue: '',
      radioValueId: 0,
      tableData2: [
        { id: 1, gxbm: 'G0000', gxmc: '下料', gxjy: 'N', csjp: '10秒', csxqs: '1', csgj: '1' },
        { id: 2, gxbm: 'G0000', gxmc: '下料', gxjy: 'N', csjp: '10秒', csxqs: '1', csgj: '1' },
        { id: 3, gxbm: 'G0000', gxmc: '下料', gxjy: 'N', csjp: '10秒', csxqs: '1', csgj: '1' },
        { id: 4, gxbm: 'G0000', gxmc: '下料', gxjy: 'N', csjp: '10秒', csxqs: '1', csgj: '1' },
        { id: 5, gxbm: 'G0000', gxmc: '下料', gxjy: 'N', csjp: '10秒', csxqs: '1', csgj: '1' },
        { id: 6, gxbm: 'G0000', gxmc: '下料', gxjy: 'N', csjp: '10秒', csxqs: '1', csgj: '1' }
      ],
      tableData: [],
      dialogVisible: false,
      dialogGxmc: '',
      dialogContentArr: [
        { id: 1, name: '机加C41' },
        { id: 2, name: '机加C42' },
        { id: 3, name: '机加C43' },
        { id: 4, name: '机加C44' },
        { id: 5, name: '机加C45' },
        { id: 6, name: '机加C46' },
        { id: 8, name: '机加C47' },
        { id: 9, name: '机加C48' },
        { id: 10, name: '机加C49' },
        { id: 11, name: '机加C50' },
        { id: 12, name: '机加C51' },
        { id: 13, name: 'GP12外观包装C39' },
        { id: 14, name: 'Gp12外观检清洗烘干包装C40' },
        { id: 15, name: 'GP12外观包装C38' },
        { id: 16, name: 'GP12外观包装C37' },
        { id: 17, name: 'GP12外观包装C36' },
        { id: 18, name: '返回返修车间' },
        { id: 19, name: '设置休闲区' },
        { id: 20, name: '空压机房' }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      dialogForm: {
        id: '',
        code: '',
        name: '',
        enable: 'Y',
        description: '',
        Data: []
      },
      treeData: [
        {
          id: 1,
          label: '选择全部',
          children: [
            {
              id: 2,
              label: '二级 1-1',
              children: [{
                id: 3,
                label: '三级 1-1-1&LKFDL_SC-PC028'
              }, {
                id: 4,
                label: '三级 1-1-2&LKFDL_SC-PC029'

              }, {
                id: 5,
                label: '三级 1-1-1&LKFDL_SC-PC030'
              }, {
                id: 6,
                label: '三级 1-1-2&LKFDL_SC-PC031'

              }]
            },
            {
              id: 7,
              label: '二级 1-1',
              children: [{
                id: 8,
                label: '三级 2-1-1&LKFDL_SC-PC028'
              }, {
                id: 9,
                label: '三级 2-1-1&LKFDL_SC-PC029'

              }, {
                id: 10,
                label: '三级 2-1-1&LKFDL_SC-PC027'
              }, {
                id: 11,
                label: '三级 2-1-1&LKFDL_SC-PC026'

              }
              ]
            },
            {
              id: 12,
              label: '二级 1-1',
              children: [{
                id: 13,
                label: '三级 3-1-1&LKFDL_SC-PC023'
              }, {
                id: 14,
                label: '三级 3-1-1&LKFDL_SC-PC024'

              }, {
                id: 15,
                label: '三级 3-1-1&LKFDL_SC-PC025'
              }, {
                id: 16,
                label: '三级 3-1-1&LKFDL_SC-PC026'
              }
              ]
            }
          ]
        }

      dynamicTags: [// 工艺设置数组
        { editDisabled: true, stepcode: '', seq: 1, stepname: ' ', effect: 'light' }
        // { editDisabled: true, stepcode: 'Step02', seq: 2, stepname: '奶', effect: 'light' },
        // { editDisabled: true, stepcode: 'Step03', seq: 3, stepname: '大', effect: 'light' }
      ],
      dialogRadioValue: '',
      dialogRadioValueId: 0
      clickSelected: '', // 鼠标点击选中的值
      selectedName: '', // 选中的名称
      autocompleteValue: '', // 可搜索输入框中的值
      routeArr: [], // 工艺设置下拉所有值
      routeSelectedArr: [], // 工艺设置下拉已选的值
      addDisabled: true, // 添加按钮是否可点击
      editDisabled: true, // 修改按钮是否可点击
      mouseFocusPosition: 0, // 鼠标聚焦的位置
      operation: '',
      dialogFormRules: {
        code: [
          { required: true, validator: validateCode, trigger: ['blur', 'change'] }
        ],
        name: [
          { required: true, message: '请输入名称', trigger: ['blur', 'change'] }
        ],
        enable: [
          { required: true, message: '请选择使用状态', trigger: ['blur', 'change'] }
        ]
        // Data: [
        //   { required: true, message: '请设置工艺', trigger: ['blur', 'change'] }
        // ]
      }

    }
  },
  created() {

    this.getRouteSearch()
  },
  mounted() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()
  },
  methods: {
    // 导入
    upLoad() {
      // const isLt100M = param.file.size / 1024 / 1024 < 50
      // if (!isLt100M) {
      //   this.$message('请检查，上传文件大小不能超过50MB!')
      //   return
      // }
      // const formData = new FormData()
      // formData.append('file', param.file)
      // formData.append('formId', this.formId)
      //
      // this.loading = true
      // const _self = this
      // uploadTable(formData).then(res => {
      //   this.$message(res.data.message)
      //   param.data.fbsl = res.data.data.total
      //   _self.loading = false
      //   this.dataList = JSON.parse(JSON.stringify(this.dataList))
      // }).catch(() => {
      //   _self.loading = false
      // })
    // 远程搜索
    querySearch(queryString, cb) {
      const routeArr = this.routeArr
      routeArr.forEach(item => {
        item.value = item.stepname
      })
      const results = queryString ? routeArr.filter(this.createFilter(queryString)) : routeArr
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    // 导出
    async downLoad() {
      // const res = await downFile(row.id)
      // if (res) {
      //   // console.log(res)
      //   const fileName = row.filename
      //   // const fileName = '杭州市检察工作绩效评价（表一）' + '.xls'
      //   // let blob = new Blob([res], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'}) // xlsx
      //   // const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' }) // xls
      //   const blob = new Blob([res.data], { type: res.data.type }) // xls
      //   if ('download' in document.createElement('a')) { // 非IE下载
      //     const elink = document.createElement('a')
      //     elink.download = fileName
      //     elink.style.display = 'none'
      //     elink.href = URL.createObjectURL(blob)
      //     document.body.appendChild(elink)
      //     elink.click()
      //     URL.revokeObjectURL(elink.href) // 释放URL 对象
      //     document.body.removeChild(elink)
      //   } else { // IE10+下载
      //     navigator.msSaveBlob(blob, fileName)
      //   }
      // }
    // 过滤
    createFilter(queryString) {
      return (res) => {
        return (res.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1)
      }
    },
    radioValueChange(val) {
      console.log(val)
    // 工艺设置 下拉获取所有
    async getStepSelectArr() {
      const { data: res } = await StepSelect()
      this.routeArr = res
    },
    // 处理下拉选择
    handleSelect(item) {
      this.autocompleteValue = item.value
      this.$nextTick(_ => {
        this.$refs['saveTagInput' + this.mouseFocusPosition][0].focus()
      })
    },
    // 输入框确认事件
    handleInputConfirm(tag) {
      console.log(tag, 111)
      console.log(this.autocompleteValue, 2)
      // 1.选择内容不能为空
      if (this.autocompleteValue.trim().length < 1) {
        return this.$message.info('选择内容不能为空！')
      }
      // 2.输入框内容与下拉选项内容不匹配
      let flag = false
      this.routeArr.forEach(item => {
        if (item.stepname === this.autocompleteValue) {
          flag = true
        }
      })
      if (!flag) {
        return this.$message.info('输入框内容与下拉选项内容不匹配！')
      }

      // 3.输入框内容与已选内容相同时不能保存
      let flag2 = false
      this.dynamicTags.forEach(item => {
        if (item.stepname === this.autocompleteValue.trim()) {
          flag2 = true
        }
      })
      if (tag.stepname === this.autocompleteValue.trim()) {
        flag2 = false
      }
      if (flag2) {
        return this.$message.info('此工序已选，请选择其它工序！')
      }
      console.log(this.routeArr, 9)
      this.routeArr.forEach((item, index) => {
        if (this.autocompleteValue.trim() === item.stepname) {
          console.log(tag.stepname === item.stepname, 353535)
          this.routeSelectedArr.push({
            stepcode: item.stepcode,
            stepname: item.stepname,
            value: item.value
          })
          this.routeArr.splice(index, 1)
        }
      })

      // 将值替换到原tag位置上
      this.dynamicTags.forEach((item, index) => {
        if ((index + 1) === tag.seq) {
          console.log(tag)
          item.stepname = this.autocompleteValue
        }
        item.editDisabled = true
      })
      console.log(this.dynamicTags, 234)
      this.addDisabled = false
      this.editDisabled = true
      this.selectedName = ''
    },
    // tag点击修改按钮
    tagEdit(tag) {
      console.log(tag, 2)
      this.autocompleteValue = ''
      this.dynamicTags.forEach(item => {
        item.stepname = item.stepname.trim()
        if (item.seq !== tag.seq) {
          item.editDisabled = false
          // item.stepcode = this.routeArr.find(it=>it.stepcode=tag.stepcode).stepcode
          // return this.$message.info('请先填写或选择工艺！')
        }
      })

      // if (tag.stepname === '') {
      //   this.dynamicTags[0].stepcode=
      // }

      // if (tag.stepname.toString().length > 0 && tag.editDisabled) {
      if (tag.stepname !== '') {
        const routeSelectedArr = this.routeSelectedArr.find(item => item.stepname === tag.stepname)

        this.routeArr.push(
          {
            stepcode: routeSelectedArr.stepcode,
            stepname: routeSelectedArr.stepname,
            value: routeSelectedArr.value
          }
        )
      }
      // }

      this.addDisabled = true
      this.selectedName = tag.stepname
      this.autocompleteValue = tag.stepname
      this.$nextTick(_ => {
        this.$refs['saveTagInput' + tag.seq][0].focus()
      })
      this.mouseFocusPosition = tag.seq
    },
    // tag点击事件
    elTagClick(tag) {
      console.log(tag, 1)
      this.clickSelected = tag.seq
      if (tag.effect === 'dark') {
        tag.effect = 'light'
        this.clickSelected = ''
      } else {
        this.dynamicTags.forEach(item => {
          item.effect = 'light'
        })
        if (tag.effect === 'light') {
          tag.effect = 'dark'
        } else if (tag.effect === 'dark') {
          tag.effect = 'light'
        }
      }
      console.log(this.$el)
      // console.log(this.$el.style.color = 'red')
    },
    // 处理tag关闭事件
    handleTagClose(tag) {
      console.log(tag)

      // 当选中的步骤被删除时
      if (tag.seq === this.clickSelected) {
        this.clickSelected = ''
      }
      this.dynamicTags.forEach((item, index) => {
        if (item.seq === tag.seq) {
          this.dynamicTags.splice(index, 1)
        }
      })

      const routeSelectedArr = this.routeSelectedArr.find(item => item.stepname === tag.stepname)
      if (routeSelectedArr !== undefined) {
        this.routeArr.push(
          {
            stepcode: routeSelectedArr.stepcode,
            stepname: routeSelectedArr.stepname,
            value: routeSelectedArr.value
          }
        )
      }
      this.routeArr = this.routeArr.filter((currentValue, currentIndex, selfArr) => {
        return selfArr.findIndex(item => item.stepcode === currentValue.stepcode) === currentIndex
      })
      console.log(this.dynamicTags, 1)
      // 重新排序
      this.dynamicTags.forEach((item, index) => {
        item.editDisabled = true
        item.seq = index + 1
        // item.stepcode = 'Step' + ((index + 1).toString().length === 2 ? (index + 1) : '0' + (index + 1))
        item.stepcode = ''
      })
      if (this.clickSelected === '') {
        this.selectedName = ''
      }
      this.addDisabled = false
    },
    // tag添加按钮
    showInput() {
      this.autocompleteValue = ''
      this.addDisabled = true
      this.editDisabled = false
      let seq = 0
      // 1.第一种情况   当未选中情况下或者选中最后一个的情况下
      if (this.clickSelected === '' || this.clickSelected === this.dynamicTags.length) {
        seq = this.dynamicTags.length + 1
        this.dynamicTags.push(
          {
            editDisabled: true,
            seq: seq,
            stepname: '',
            effect: 'light',
            // stepcode: ('Step' + (seq.toString().length === 2 ? seq : '0' + seq))
            stepcode: ''
          }
        )
      } else {
        // 2.第二种情况   当选中某个tag   将在tag后面添加
        seq = this.clickSelected + 1
        this.dynamicTags.splice(this.clickSelected, 0, { editDisabled: true, seq: seq, stepname: '', effect: 'light' })
        this.dynamicTags.forEach((item, index) => {
          item.seq = index + 1
          // item.stepcode = 'Step' + ((index + 1).toString().length === 2 ? (index + 1) : '0' + (index + 1))
          item.stepcode = ''
        })
      }

      this.$nextTick(_ => {
        this.$refs['saveTagInput' + seq][0].focus()
      })

      this.mouseFocusPosition = seq

      this.dynamicTags.forEach((item, index) => {
        item.editDisabled = seq === index + 1
      })

      console.log(this.dynamicTags, 1)
    },

    // 对话框中查询id
    dialogRadioChange(val) {
      this.dialogContentArr.forEach(item => {
        if (item.name === val) {
          this.dialogRadioValueId = item.id
    // 获取工艺路线列表清单
    async getRouteSearch() {
      const res = await RouteSearch(this.form)
      this.tableData = res.data
      this.total = res.count
    },
    // 排序改变时
    sortChange({ column, prop, order }) {
      if (order === 'descending') {
        order = 'desc'
      } else if (order === 'ascending') {
        order = 'asc'
      } else {
        order = 'desc'
      }
      this.form.order = order
      this.form.prop = prop
      this.getRouteSearch()
    },
    // 查询
    search() {
      this.getRouteSearch()
    },
    upload() {

    },
    // 重置
    reset() {
      this.form.routecode = ''
      this.form.routename = ''
      this.form.description = ''
      this.form.createuser = ''
      this.getRouteSearch()
    },

    // 新增按钮
    add(operation) {
      this.operation = operation
      this.dialogVisible = true
      this.getStepSelectArr()
    },
    // 工艺路线预览
    async edit(operation, row) {
      this.operation = operation
      this.dialogVisible = true

      const { data: res } = await ViewRoute({ routecode: row.code })

      this.dynamicTags = []
      this.$nextTick(() => {
        this.dialogForm.code = res[0].code
        this.dialogForm.name = res[0].name
        this.dialogForm.enable = res[0].enable
        this.dialogForm.description = res[0].description
        // this.dialogForm.Data = row.description
        res[0].Data.forEach(item => {
          this.dynamicTags.push(
            { seq: item.seq, stepname: item.stepname, stepcode: item.stepcode, editDisabled: true, effect: 'light' }
          )
        })
      })
    },
    // 删除按钮
    async del(row) {
      this.$confirm('是否确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        DeleteRoute({ routecode: row.code }).then(res => {
          if (res.code === '200') {
            this.$message.success('删除成功!')
            if (this.form.page > 1 && this.tableData.length === 1) {
              this.form.page--
            }
            this.getRouteSearch()
          }
        })
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    // 对话框关闭事件
    handleClose() {
      this.dialogForm.code = ''
      this.dialogForm.name = ''
      this.dialogForm.enable = 'Y'
      this.dialogForm.description = ''
      this.dialogForm.Data = []

      this.dynamicTags = [
        { editDisabled: true, stepcode: '', seq: 1, stepname: ' ', effect: 'light' }
      ]
      this.addDisabled = true
      this.routeSelectedArr = []
      this.$refs.dialogForm.clearValidate()
    },
    // 对话框取消
    dialogVisibleCancel() {
      this.dialogVisible = false
    },
    // 对话框确认
    dialogVisibleConfirm() {
      if (this.dynamicTags[0].stepname.trim() === '') {
        return this.$message.info('工艺设置第一项不能为空！')
      }
      console.log(this.routeSelectedArr, 3666666)
      console.log(this.dynamicTags, 3)
      const Data = []
      this.dynamicTags.forEach(item => {
        Data.push({ seq: item.seq, stepcode: this.routeSelectedArr.find(it => it.stepname === item.stepname).stepcode, stepname: item.stepname })
      })

      Data.forEach(item => {
        if (item.stepname === this.routeSelectedArr.find(it => it.stepname === item.stepname).stepname) {
          item.stepcode = this.routeSelectedArr.find(it => it.stepname === item.stepname).stepcode
        }
      })
      console.log(Data, 32)
      this.$refs.dialogForm.validate(valid => {
        if (valid) {
          const data = {
            code: this.dialogForm.code,
            name: this.dialogForm.name,
            enable: this.dialogForm.enable,
            description: this.dialogForm.description,
            Data: Data
          }
          console.log(data, 2)
          AddUpdateRoute(this.dialogForm.id, this.operation === 'add' ? 'Add' : 'Update', data).then(res => {
            if (res.code === '200') {
              this.$message.success(this.operation === 'add' ? '添加成功！' : '修改成功！')
              this.dialogVisible = false
              this.getRouteSearch()
            } else {
              this.$message.error(this.operation === 'add' ? '添加失败！' : '修改失败！')
            }
          })
        }
      })
    },
    nodeClick(obj, node, data) {
      // console.log(obj, node, data)
    // 获取页面高度
    getHeight() {
      this.$nextTick(() => {
        this.mainHeight = window.innerHeight - 85
        this.tableHeight = this.mainHeight - 200
        if (window.innerHeight < 769) {
          this.tableHeight = this.tableHeight - 40
        }
        this.isIpad = window.innerHeight < 769 && window.innerWidth < 1367
        this.$refs.tableDataRef.doLayout()
      })
    },
    // 对话框确认按钮
    dialogVisibleConfirm() {
      // 得到的树形节点
      const treeIdArr = this.$refs.tree.getCheckedKeys()
      // 单选框id
      // this.dialogRadioValueId

      this.dialogVisible = false
    },
    // 关联工作站点击事件
    shareClick(row) {
      this.dialogVisible = true
      this.dialogGxmc = row.gxmc
    },
    // 对话框关闭之前处理
    handleClose() {
      this.dialogRadioValue = ''
      this.$refs.tree.setCheckedKeys([])
    },
    dialogVisibleCancel() {
      this.dialogVisible = false
      this.dialogRadioValue = ''
      this.$refs.tree.setCheckedKeys([])
    },
    // 重置事件
    reset() {
      this.form.gylx = ''
      this.form.wlbm = ''
      this.form.wlmc = ''
    },
    // // 处理表头单元格样式
    // headerCellStyle() {
    //   const option = {
    //     background: '#eee', padding: '5px 0'
    //   }
    //   return option
    // },
    // // 处理表头行样式
    // headerRowStyle() {
    //
    // },
    // // 处理表格单元格样式
    // cellStyle() {
    //   // return {padding: '5px 0'}
    //   return { padding: '0' }
    // },
    // 查询事件
    async search() {
      const data = this.form
      console.log(data)
      // const res=await xxx(data)
    tableRowClassName({ row, rowIndex }) {
      return 'custom-row'
    }
  }
}
@@ -463,64 +753,226 @@

<style lang="scss" scoped>
$main_color: #42b983;
::v-deep .el-button--primary {
  background-color: $main_color !important;
  height: 30px;

/*
实现工艺设置动态添加样式
*/

.orderNumber {
  margin-bottom: 31px;
  position: absolute;
  margin-left: -7px;
  z-index: 2;
  width: 16px;
  height: 16px !important;
  font-size: 12px;
  text-align: center;
  line-height: 15px;
  color: #FFFFFF;
  background-color: #409EFF;
  border-radius: 50%;
}

.el-icon-edit {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  padding: 3px 0 0 3px;
  margin-left: 5px;
  cursor: pointer;
  position: absolute;
  right: 3px;
  bottom: 8px;
}

.el-icon-edit:hover {
  background-color: #99a9bf;
  color: #FFFFFF;
}

.el-icon-close {
  position: absolute;
  top: -8px;
  z-index: 2;
  left: 141px;
  cursor: pointer;
  color: #FFFFFF;
  border-radius: 50%;
  background-color: #ff7474;
  padding: 1px 0 0 1px;
}

//.el-icon-close:hover {
//  background-color: #99a9bf;
//}

.el-tag--dark {
  background-color: $main_color;
  border-color: $main_color;
}

.tagSuccess {
  margin-left: 20px;
  width: 100px;
  height: 32px;
  display: flex;
  justify-content: center;
  color: $main_color;
}

::v-deep .el-button--success {
  width: 40px !important;
  background-color: #ecf5ff;
  border-radius: 0;
  color: $main_color;
}

::v-deep .el-button--success:disabled {
  background-color: #eeeeee;
  color: $main_color;
}

::v-deep .el-tag {
  //height: 30px;
  border-radius: 0;
  border: 1px solid $main_color;
}

::v-deep .el-input--small .el-input__inner {
  border-radius: 0;
}

.settingDiv {
  display: flex;
  width: 100%;
  padding-left: 7px;
  height: 56px;
  overflow-x: scroll;
  overflow-y: hidden;
  align-items: center;
  background: aliceblue;
}

.elTag {
  margin-left: 0;
  width: 150px;
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.autocompleteClass {
  .el-autocomplete-suggestion li {
    //color: red;
  }
}
</style>

<!--公共页面样式-->
<style lang="scss" scoped>
$main_color: #42b983;
.el-icon-share, .el-icon-delete, .el-icon-edit-outline {
  color: $main_color;
  cursor: pointer;
}

.el-icon-edit-outline {
  margin-right: 15px;
}

::v-deep .el-button--primary, .el-button--default, .el-button--info {
  height: 34px;
  display: flex;
  align-items: center;
  padding: 0 15px;
}

::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: $main_color !important;
::v-deep .el-button--primary {
  //background-color: $main_color !important;
}

::v-deep .el-button--text {
  color: $main_color;
  font-size: 14px;
::v-deep .el-button--default {
  background-color: #f8f8fa;
  border: none;
}

::v-deep .el-step__head.is-finish {
  color: $main_color;
  border-color: $main_color;;
::v-deep .el-input__inner {
  height: 34px;
  line-height: 34px;
  //color: #a7a7a7;
}

::v-deep .el-step__title.is-finish {
  color: $main_color;
::v-deep .el-dialog__body {
  padding: 20px 20px !important;
}

::v-deep .el-radio.is-bordered + .el-radio.is-bordered {
  margin: 10px 30px 0px 0;

::v-deep .dialogVisibleRoles .el-dialog__body {
  padding: 20px 20px !important;
}

::v-deep .el-icon-caret-right:before {
  content: '' !important;
::v-deep .importPickerClass .el-dialog__body {
  padding: 20px 20px !important;
}

::v-deep .el-radio__input.is-checked + .el-radio__label {
  color: $main_color;
::v-deep .el-dialog__footer {
  display: flex;
  justify-content: flex-end;
}

::v-deep .el-radio.is-bordered.is-checked {
  border-color: $main_color;
::v-deep .el-table .caret-wrapper {
  transform: scale(0.8);
}

::v-deep .el-radio__input.is-checked .el-radio__inner {
  border-color: $main_color;
  background: $main_color;
::v-deep .cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
  border-color: $main_color;
  background-color: $main_color;
::v-deep .el-table::before {
  height: 0;
}

::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  border-color: $main_color;
  background-color: $main_color;
::v-deep .el-table__body-wrapper {
  background-color: #f8f8fa;
}

/*::v-deep .el-divider--horizontal{*/
/*  margin:0 0 10px 0;*/
/*}*/
::v-deep .el-table__body .el-table__row.hover-row td {
  background-color: #eaecef;
}

::v-deep .el-form--inline .el-form-item__label {
  color: #a7a7a7;
}

.body ::v-deep .el-divider {
  border: 1px solid #eee;
  width: 99%;
  margin: 10px auto;
}

.body ::v-deep .el-form-item {
  margin-bottom: 0;
}

.userDialogVisible ::v-deep .el-form-item {
  margin-bottom: 0;
}

.tableFixed{
  ::v-deep .el-table__fixed-right{
    height: 100% !important;
  }
  ::v-deep .el-table__fixed{
    height: 100% !important;
  }
}

</style>
<style>

.el-table .custom-row {
  background: #f8f8fa;
}
</style>

 src/views/zzmx/jpgj.vue

@@ -136,6 +136,7 @@
            label="产品规格"
            min-width="110"
            sortable="custom"
            show-tooltip-when-overflow
          >
            <template slot-scope="{row}">
              <div v-if="row.partspec">{{ row.partspec }}</div>
@@ -153,6 +154,7 @@
            label="工艺路线"
            sortable="custom"
            min-width="120"
            show-tooltip-when-overflow
          />
          <el-table-column
            prop="stepname"
@@ -319,6 +321,8 @@
        </div>

        <el-table
          ref="eqpDialogArrRef"
          class="tableFixed"
          :data="eqpDialogArr"
          :height="tableHeight"
          :style="{width: 100+'%',height:tableHeight-50+'px',}"
@@ -674,6 +678,7 @@
      this.eqpDialogArr.forEach(item => {
        item.isVisible = 0
      })
      this.$refs.tableDataRef.doLayout()
    },
    // 保存行
    async saveRow(row) {