1.项目整体样式的配置2.实现工艺设置动态添加的静态样式

loulijun2021

2022-06-25 e846eefa54a7a2274a34d43d4601e192a1ada3d9

 src/views/zzmx/gylx.vue

@@ -1,7 +1,7 @@
<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 style="padding: 10px 5px 0 0">
        <el-form
          ref="form"
          :model="form"
@@ -9,453 +9,521 @@
          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 style="display: flex;align-items: start;margin-top: 5px;z-index: 2">
            <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 show-overflow-tooltip label="物料编码" prop="wlbm" />
            <el-table-column show-overflow-tooltip 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;"
      <el-divider />
      <div style="margin-left: 10px;display: flex">
        <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>
      <el-divider />
      <div class="elTableDiv">
        <el-table
          :data="tableData"
          :height="tableHeight"
          border
          :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="序号"
          />
        </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
            prop="enable"
            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" />
                </el-tooltip>
                <el-tooltip content="修改" placement="top">
                  <el-button type="text" icon="el-icon-edit" />
                </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>
            <template slot-scope="{row}">
              <div v-if="row.enable==='Y'">是</div>
              <div v-if="row.enable==='N'">否</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="lm_user"
            label="创建人员"
            sortable="custom"
          />
          <el-table-column
            prop="lm_date"
            label="创建时间"
            sortable="custom"
          />
          <el-table-column
            label="操作"
          >
            <template slot-scope="{row}">
              <div class="operationClass">
                <!--                <el-button type="text" @click="edit('edit',row)">修改</el-button>-->
                <el-button type="text" @click="del(row.id)">删除</el-button>
              </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
        v-show="total>0"
        :total="total"
        :page.sync="form.page"
        :limit.sync="form.rows"
        align="right"
        layout="prev, pager, next,sizes"
        popper-class="select_bottom"
        @pagination="getRouteSearch"
      />
    </div>

    <el-dialog
      :title="operation==='add'?'新增':'修改'"
      :visible.sync="dialogVisible"
      width="80%"
      top="15vh"
      @closed="handleClose"
      @close="handleClose"
    >
      <el-form ref="dialogForm" :rules="dialogFormRules" :model="dialogForm" label-width="80px">
        <div style="display: flex">
          <el-form-item label="工艺编码" prop="OrgCode" style="margin-right: 20px">
            <el-input v-model="dialogForm.OrgCode" :disabled="operation!=='add'" style="width: 220px" />
          </el-form-item>
          <el-form-item label="工艺名称" prop="OrgName">
            <el-input v-model="dialogForm.OrgName" style="width: 220px" />
          </el-form-item>
        </div>
        <div style="display: flex">
          <el-form-item prop="SupUnit" label="使用状态" style="margin-right: 20px">
            <el-select
              v-model="dialogForm.isEnable"
              :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="OrgName">
            <el-input v-model="dialogForm.OrgName" type="textarea" style="width: 220px" />
          </el-form-item>
        </div>
        <el-form-item label="工艺设置" prop="OrgName">
          <div class="settingDiv">
            <!--   实现工艺设置动态添加-->
            <div v-for="(tag,index) in dynamicTags" :key="tag.id" style="display: flex;align-items: center">
              <div style="display: flex;align-items: center;position: relative">

                <el-tooltip class="item" effect="dark" :content="tag.label" placement="top">
                  <el-tag
                    v-if="flag||tag.label!==flagSelected"
                    :closable="index!==0"
                    :disable-transitions="false"
                    class="elTag"
                    :class="tagClass(tag.label)"
                    :effect="tag.effect"
                    @close="handleTagClose(tag.label)"
                    @click="elTagClick(tag)"
                  >
                    <!--                <div class="orderNumber">{{ index }}</div>-->
                    {{ tag.label }}
                    <i class="el-icon-edit" @click="tagEdit(tag)" />
                  </el-tag>
                </el-tooltip>
                <el-autocomplete
                  v-if="!flag&&tag.label===flagSelected"
                  :ref="'saveTagInput'+tag.id"
                  v-model="value"
                  class="input-new-tag"
                  size="small"
                  :fetch-suggestions="querySearch"
                  style="margin-left: 0;width: 200px;transform: translate(1)"
                  autofocus
                  @select="handleSelect"
                  @keyup.enter.native="handleInputConfirm2"
                />
                <!--        @blur="handleBlur2"-->
                <div v-if="index!==dynamicTags.length-1" style="width: 40px;height: 1px;border: 1px solid #42b983" />
              </div>
            </div>
            <!--            :disabled="addDisabled"-->
            <el-button
              type="success"
              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 @click="dialogVisibleCancel">取 消</el-button>
          <el-button type="primary" @click="dialogVisibleConfirm">确 定</el-button>
        </div>
      </span>
    </el-dialog>
  </div>
</template>

<script>

import Pagination from '@/components/Pagination'
import { cellStyle } from '@/utils/global'
import { AddUpdateOrganization, DeleteOrganization, OrganizationSearch, PrentOrganization } from '@/api/jcsz'
import { getCookie } from '@/utils/auth'
import { RouteSearch } from '@/api/zzmx'

const SER_HZ = /^[\u4e00-\u9fa5]+$/
export default {
  name: 'Gylx',
  name: 'Zzjg',
  components: {
    Pagination
  },
  data() {
    return {
      form: {
        pageNum: 1, // 第几页
        pageSize: 10, // 每页多少条
        gylx: '', // 公益路线
        wlbm: '', // 物料编码
        wlmc: ''// 物料名称
      },
      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' }
      ],
      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'
      },
      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'
              }
              ]
            }
          ]
    const validateName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入编码'))
      } else {
        if (SER_HZ.test(value)) {
          return callback(new Error('编码不能为中文'))
        } else {
          callback()
        }

      }
    }
    const validateTypeCode = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请选择上级'))
      } else {
        callback()
      }
    }
    return {
      mainHeight: 0,
      tableHeight: 0,
      form: {
        routecode: '', // 工艺路线编码
        routename: '', // 工艺路线名称
        description: '', // 工艺路线描述
        createuser: '', // 创建人员
        prop: 'lm_date', // 排序字段
        order: 'desc', // 排序字段
        page: 1, // 第几页
        rows: 10 // 每页多少条
      },
      isEnableArr: [
        { label: '是', value: 'Y' },
        { label: '否', value: 'N' }
      ],
      dialogRadioValue: '',
      dialogRadioValueId: 0
      total: 10,
      tableData: [],
      dialogVisible: true,
      dialogForm: {
        OrgType: '',
        OrgCode: '',
        OrgName: '',
        SupUnit: ''// 上级单位
      },
      dynamicTags: [// 工艺设置数组
        { id: 1, label: '标签一', effect: 'light' },
        { id: 2, label: '标签二', effect: 'light' },
        { id: 3, label: '标签三', effect: 'light' }
      ],
      tagSelectedId: '', // tag选择中id
      flag: true,
      flagSelected: '', // 判断是否选中
      value: '',
      restaurants: [],
      addDisabled: false,

      operation: '',
      dialogFormRules: {
        OrgType: [
          { required: true, message: '请输入选择类型', trigger: ['blur', 'change'] }
        ],
        OrgCode: [
          { required: true, validator: validateName, trigger: ['blur', 'change'] }
        ],
        OrgName: [
          { required: true, message: '请输入名称', trigger: ['blur', 'change'] }
        ],
        SupUnit: [
          { required: true, validator: validateTypeCode, trigger: ['blur', 'change'] }
        ]
      }

    }
  },
  created() {

    this.getRouteSearch()
  },
  mounted() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()
    this.restaurants = this.loadAll()
  },
  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) {
      var restaurants = this.restaurants
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
      // 调用 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 (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
      }
    },
    loadAll() {
      return [
        { 'value': '三全鲜食（北新泾店）', 'address': '长宁区新渔路144号' },
        { 'value': 'Hot honey 首尔炸鸡（仙霞路）', 'address': '上海市长宁区淞虹路661号' },
        { 'value': '新旺角茶餐厅', 'address': '上海市普陀区真北路988号创邑金沙谷6号楼113' },
        { 'value': '泷千家(天山西路店)', 'address': '天山西路438号' },
        { 'value': '胖仙女纸杯蛋糕（上海凌空店）', 'address': '上海市长宁区金钟路968号1幢18号楼一层商铺18-101' },
        { 'value': '贡茶', 'address': '上海市长宁区金钟路633号' },
        { 'value': '豪大大香鸡排超级奶爸', 'address': '上海市嘉定区曹安公路曹安路1685号' },
        { 'value': '茶芝兰（奶茶，手抓饼）', 'address': '上海市普陀区同普路1435号' }
      ]
    },
    handleSelect(item) {
      console.log(item)
    },
    handleInputConfirm2() {
      console.log(this.flagSelect, 111)
      // this.dynamicTags.forEach((item,index) => {
      //   if (item === this.flagSelect) {
      //     console.log(item, 111)
      //     item = this.flagSelect
      //   }
      // }
      // })
      console.log(this.value)
      this.addDisabled = false
      this.flagSelect = ''
      this.value = ''
      this.flag = !this.flag
    },
    radioValueChange(val) {
      console.log(val)
    tagEdit(tag) {
      console.log(tag, 2)

      this.addDisabled = true
      this.flagSelected = tag.label
      this.value = tag.label
      this.flag = !this.flag
      this.$nextTick(_ => {
        this.$refs['saveTagInput' + tag.id][0].focus()
      })
    },
    elTagClick(tag) {
      console.log(tag, 1)

      this.tagSelectedId = tag.id
      if (tag.effect === 'dark') {
        tag.effect = 'light'
        this.tagSelectedId = ''
      } 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')
    },

    // 对话框中查询id
    dialogRadioChange(val) {
      this.dialogContentArr.forEach(item => {
        if (item.name === val) {
          this.dialogRadioValueId = item.id
    tagClass() {
      // this.tagSelect.style({ backgroundColor: 'red' })
      // return { backgroundColor: 'red' }
    },
    handleTagClose(tag) {
      // this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
      this.dynamicTags.forEach((item, index) => {
        if (item.label === tag) {
          console.log(item.label === tag)
          this.dynamicTags.splice(index, 1)
        }
      })
    },
    nodeClick(obj, node, data) {
      // console.log(obj, node, data)
    },
    // 对话框确认按钮
    dialogVisibleConfirm() {
      // 得到的树形节点
      const treeIdArr = this.$refs.tree.getCheckedKeys()
      // 单选框id
      // this.dialogRadioValueId

      this.dialogVisible = false
    showInput() {
      // this.inputVisible = true
      this.addDisabled = true
      if (this.tagSelectedId === '' || this.tagSelectedId === this.dynamicTags.length) {
        this.dynamicTags.push(
          { id: (this.dynamicTags.length + 1), label: '', effeft: 'light' }
        )
      } else {
        console.log(this.tagSelectedId, 31)
        this.dynamicTags.splice(this.tagSelectedId, 0, { id: this.dynamicTags.length + 1, label: '', effect: 'light' })
      }
      this.flag = !this.flag
      this.$nextTick(_ => {
        this.$refs['saveTagInput' + this.dynamicTags.length][0].focus()
      })
      // this.$nextTick(_ => {
      //   console.log(this.$refs['saveTagInput'], 321)
      //   this.$refs.saveTagInput.$refs.input.focus()
      // })
    },
    // 关联工作站点击事件
    shareClick(row) {
    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.OrgCode = ''
      this.form.OrgName = ''
      this.form.OrgType = ''
      this.form.UserName = ''
      this.getRouteSearch()
    },

    // 新增按钮
    add(operation) {
      this.operation = operation
      this.dialogVisible = true
      this.dialogGxmc = row.gxmc
    },
    // 对话框关闭之前处理
    // 修改按钮
    edit(operation, row) {
      this.operation = operation
      this.dialogVisible = true

      this.$nextTick(() => {
        this.dialogForm.OrgCode = row.org_code
        this.dialogForm.OrgName = row.org_name
        this.dialogForm.SupUnit = row.parent_id
      })
    },
    // 删除按钮
    async del(id) {
      this.$confirm('是否确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        DeleteOrganization({ orgid: id }).then(res => {
          if (res.code === '200') {
            this.$message.success('删除成功!')
            this.getRouteSearch()
          }
        })
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    // 对话框关闭事件
    handleClose() {
      this.dialogRadioValue = ''
      this.$refs.tree.setCheckedKeys([])
      this.dialogForm.OrgType = ''
      this.dialogForm.OrgCode = ''
      this.dialogForm.OrgName = ''
      this.dialogForm.SupUnit = ''
      this.$refs.dialogForm.clearValidate()
    },
    // 对话框取消
    dialogVisibleCancel() {
      this.dialogVisible = false
      this.dialogRadioValue = ''
      this.$refs.tree.setCheckedKeys([])
    },
    // 重置事件
    reset() {
      this.form.gylx = ''
      this.form.wlbm = ''
      this.form.wlmc = ''
    // 对话框确认
    dialogVisibleConfirm() {
      this.$refs.dialogForm.validate(valid => {
        if (valid) {
          const data = {
            OrganType: this.dialogFormOrgTypeSelected,
            OrganCode: this.dialogForm.OrgCode,
            OrganName: this.dialogForm.OrgName,
            SupUnit: this.dialogFormOrgTypeSelected === 'F' ? '0' : this.dialogForm.SupUnit,
            OperType: this.operation === 'add' ? 'Add' : 'Update',
            Operator: getCookie('admin')
          }
          // AddUpdateOrganization(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' ? '添加失败！' : '修改失败！')
          //   }
          // })
        }
      })
    },
    // // 处理表头单元格样式
    // 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)
    // 获取页面高度
    getHeight() {
      this.$nextTick(() => {
        this.mainHeight = window.innerHeight - 250
        this.tableHeight = this.mainHeight - 100
      })
    }
  }
}
@@ -468,40 +536,99 @@
  height: 30px;
  display: flex;
  align-items: center;
  border: 1px solid $main_color;
  padding: 0 20px;
}

::v-deep .el-button--info {
  height: 30px;
  display: flex;
  align-items: center;
  padding: 0 20px;
}

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

::v-deep .el-button--text {
  color: $main_color;
  font-size: 14px;
::v-deep .el-dialog__footer {
  display: flex;
  justify-content: flex-end;
}

::v-deep .el-step__head.is-finish {
  color: $main_color;
  border-color: $main_color;;
.footerButton {
  display: flex;
  justify-content: end;
}

::v-deep .el-step__title.is-finish {
  color: $main_color;
::v-deep .el-button--default {
  background-color: #ffffff !important;
  height: 30px;
  display: flex;
  align-items: center;
  padding: 0 20px;
}

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

::v-deep .el-button--default:hover {
  color: #606266;
}

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

::v-deep .el-radio__input.is-checked .el-radio__inner {
  background-color: $main_color;
  border-color: $main_color;
}

::v-deep .el-radio__input.is-checked + .el-radio__label {
  color: $main_color;
  color: $main_color !important;
}

::v-deep .el-radio.is-bordered.is-checked {
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
  border-color: $main_color;
  background-color: $main_color;
}

::v-deep .el-input__inner {
  height: 30px;
  line-height: 30px;
}

::v-deep .el-input__inner:focus {
  border-color: $main_color;
}

::v-deep .el-table .caret-wrapper {
  transform: scale(0.8);
}

::v-deep .cell {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

::v-deep .el-button--text {
  color: $main_color;
  font-size: 14px;
  cursor: pointer;
}

.operationClass {
  height: 23px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-icon-share {
  color: $main_color;
  cursor: pointer;
}

.el-checkbox.is-bordered.is-checked {
  border-color: $main_color;
}

@@ -510,17 +637,127 @@
  background: $main_color;
}

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

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

/*::v-deep .el-divider--horizontal{*/
/*  margin:0 0 10px 0;*/
/*}*/
::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {
  color: $main_color !important;
}

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

::v-deep .el-radio__input.is-checked + .el-radio__label {
  color: $main_color;
}

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

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

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

::v-deep .el-input__inner:focus {
  border-color: $main_color;
}

::v-deep .el-select .el-input__inner:focus {
  border-color: $main_color;
}

::v-deep .el-select-dropdown__item.selected {
  color: $main_color;
}

::v-deep .el-checkbox__inner:hover {
  border-color: $main_color;
}

::v-deep .el-textarea__inner:focus {
  border-color: $main_color;
}

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

.orderNumber{

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

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

.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-tag__close {
  padding: 1px 0 0 1px !important;
}
::v-deep .el-tag__close:hover {
  background-color: #99a9bf;
}

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

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

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

.settingDiv {
  display: flex;
  width: 100%;
  height: 40px;
  overflow-y: scroll;
  align-items: center;
}

.elTag {
  margin-left: 0;
  width: 100px;
  position: relative;
}

</style>