1.系统设置功能新增2.工艺路线功能新增

小小儁爺

2024-05-29 49bff115beb48d11667794775b925f233d9755c3

1.系统设置功能新增2.工艺路线功能新增

 src/api/basicSettings.js

@@ -413,3 +413,46 @@
    params: data
  })
}

// å·¥è‰ºè·¯çº¿ä¸‹æ‹‰
export function StepSelect() {
  return request({
    url: 'BasicSetting/StepSelect',
    method: 'get'
  })
}

// å·¥è‰ºè·¯çº¿æŸ¥è¯¢
export function RouteSearch(data) {
  return request({
    url: 'BasicSetting/RouteSearch',
    method: 'get',
    params: data
  })
}
// å·¥è‰ºè·¯çº¿é¢„览
export function ViewRoute(data) {
  return request({
    url: 'BasicSetting/ViewRoute',
    method: 'get',
    params: data
  })
}

// å·¥è‰ºè·¯çº¿æ–°å¢žç¼–辑
export function AddUpdateRoute(id, opertype, data) {
  return request({
    url: 'BasicSetting/AddUpdateRoute?id=' + id + '&opertype=' + opertype,
    method: 'post',
    data
  })
}

// å·¥è‰ºè·¯çº¿åˆ é™¤
export function DeleteRoute(data) {
  return request({
    url: 'BasicSetting/DeleteRoute',
    method: 'post',
    params: data
  })
}

 src/api/systemSetting.js

@@ -17,6 +17,7 @@
    data
  })
}

// ç¼–码规则删除
export function DeleteEncodingRules(data) {
  return request({
@@ -25,6 +26,7 @@
    params: data
  })
}

// ç¼–码规则获取可设置的功能菜单信息
export function CodeMenuSelect() {
  return request({
@@ -33,6 +35,7 @@

  })
}

// èŽ·å–规则生成的编码(每次获取最新)
export function NewEncodingRules(data) {
  return request({
@@ -41,6 +44,7 @@
    params: data
  })
}

// èŽ·å–规则生成的编码(每次获取最新)
export function OnlyEncodingRules(data) {
  return request({
@@ -58,6 +62,7 @@
    data
  })
}

// ç”Ÿæˆç‰©æ–™æ ‡ç­¾æ¡ç (每次获取最新,App可使用)
export function LabelBarCode(data) {
  return request({
@@ -66,3 +71,13 @@
    params: data
  })
}

// ç³»ç»Ÿè®¾ç½®,流程设置提交
export function SaveSystemProcConfig(data) {
  return request({
    url: 'SystemSetting/SaveSystemProcConfig',
    method: 'post',
    data
  })
}


 src/permission.js

@@ -42,6 +42,7 @@
          localStorage.setItem('username', jwt.username)
          localStorage.setItem('torg_name', jwt.storg_name)
          localStorage.setItem('torg_code', jwt.storg_code)
          localStorage.setItem('mesSetting', jwt.mesSetting)

          // æ‹‰å–菜单信息表
          const menu = await store.dispatch('user/getMenu')

 src/router/index.js

@@ -178,6 +178,19 @@
        code: '0113',
        component: () => import('@/views/basicSettings/cronTime'),
        meta: { code: '0113', title: '定时任务', icon: '', keepAlive: true }
      }, {
        path: 'processRoute',
        name: 'processRouteCancel',
        code: '0114',
        component: () => import('@/views/basicSettings/processRoute'),
        meta: { code: '0114', title: '工艺路线', icon: '', keepAlive: true }
      },
      {
        path: 'meterPrice',
        name: 'meterPriceCancel',
        code: '0115',
        component: () => import('@/views/basicSettings/meterPrice'),
        meta: { code: '0115', title: '节拍工价', icon: '', keepAlive: true }
      }

    ]
@@ -587,6 +600,13 @@
        code: '0803',
        component: () => import('@/views/systemSetting/dataImport'),
        meta: { code: '0803', title: '数据导入', icon: '', keepAlive: true }
      },
      {
        path: 'processSetting',
        name: 'processSettingCancel',
        code: '0804',
        component: () => import('@/views/systemSetting/processSetting'),
        meta: { code: '0804', title: '流转设置', icon: '', keepAlive: true }
      }
    ]
  }

 src/views/basicSettings/meterPrice.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,15 @@
<template>
  <div>
    èŠ‚拍工价
  </div>
</template>

<script>
export default {
  name: 'ProcessDefine'
}
</script>

<style scoped>

</style>

 src/views/basicSettings/powerDivider.vue

@@ -288,6 +288,8 @@
            }
          })

          item.children.sort((a, b) => a.menu_seq - b.menu_seq)

          item.expanded = true
        }
      })

 src/views/basicSettings/processRoute.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,1122 @@
<template>
  <div>
    <div class="body" :style="{height:mainHeight+'px'}">

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

      <div class="bodyTopFormGroup">
        <el-form
          ref="form"
          :model="form"
          label-width="100px"
          inline
          style="display: flex;"
        >
          <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="工艺名称" style=" display: flex;">
              <el-input v-model="form.routename" placeholder="请输入" style="width: 200px" />
            </el-form-item>
            <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 class="bodySearchReset" :style="{marginLeft:$store.state.app.sidebar.opened? $store.state.settings.menuIsHorizontal?'15%':'3%':'10%'}">
            <el-button v-waves type="primary" icon="el-icon-search" @click="search">查询</el-button>
            <el-button v-waves type="info" icon="el-icon-refresh" @click="reset">重置</el-button>
          </div>
        </el-form>
        <div
          class="bodyTopFormExpand"
        />
      </div>

      <div class="elTableDiv">
        <!--        <TableColumnSettings-->
        <!--          :list1="tableColumnSettingsArray"-->
        <!--          @tableColumnUpdate="tableColumnUpdate"-->
        <!--        />-->
        <el-table
          ref="tableDataRef"
          :key="tableTimeStampKey"
          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
            v-for="item in tableColumnSettingsArray"
            v-if="item.show"
            :key="item.id"
            :sortable="item.sortable"
            :prop="item.prop"
            :min-width="item.minWidth"
            :label="item.label"
            :width="item.width"
            show-tooltip-when-overflow
            :fixed="item.fixed?(item.fixed==='left'?'left':'right'):false"
          >
            <template slot-scope="{row}">
              <div v-if="!row[item.prop]">/</div>
              <div v-else-if="item.prop==='enable'">
                <div v-if="row[item.prop]==='Y'">
                  <i class="el-icon-success" :style="{color:$store.state.settings.theme}" style="margin-right: 2px" />
                  æ˜¯
                </div>
                <div v-if="row[item.prop]==='N'">
                  <i class="el-icon-info" style="margin-right: 2px" />
                  å¦
                </div>
              </div>
              <div v-else>{{ row[item.prop] }}</div>
            </template>
          </el-table-column>

          <!--          <el-table-column-->
          <!--            type="selection"-->
          <!--            width="50"-->
          <!--          />-->
          <!--          <el-table-column-->
          <!--            prop="RowNum"-->
          <!--            width="50"-->
          <!--            label="序号"-->
          <!--            fixed-->
          <!--          />-->
          <!--          <el-table-column-->
          <!--            prop="code"-->
          <!--            label="编码"-->
          <!--            show-tooltip-when-overflow-->
          <!--            sortable="custom"-->
          <!--          />-->
          <!--          <el-table-column-->
          <!--            prop="name"-->
          <!--            show-tooltip-when-overflow-->
          <!--            label="名称"-->
          <!--            sortable="custom"-->
          <!--          />-->
          <!--          <el-table-column-->
          <!--            prop="description"-->
          <!--            label="工艺路线描述"-->
          <!--            sortable="custom"-->
          <!--            show-tooltip-when-overflow-->
          <!--          >-->
          <!--            <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"-->
          <!--            show-tooltip-when-overflow-->
          <!--            label="使用状态"-->
          <!--            sortable="custom"-->
          <!--          >-->
          <!--            <template slot-scope="{row}">-->
          <!--              <div v-if="row.enable==='Y'">-->
          <!--                <i class="el-icon-success" :style="{color:$store.state.settings.theme}" style="margin-right: 2px" />-->
          <!--                æ˜¯-->
          <!--              </div>-->
          <!--              <div v-if="row.enable==='N'">-->
          <!--                <i class="el-icon-info" style="margin-right: 2px" />-->
          <!--                å¦-->
          <!--              </div>-->
          <!--            </template>-->
          <!--          </el-table-column>-->
          <!--          <el-table-column-->
          <!--            prop="lm_user"-->
          <!--            show-tooltip-when-overflow-->
          <!--            label="创建人员"-->
          <!--            sortable="custom"-->
          <!--          />-->
          <!--          <el-table-column-->
          <!--            prop="lm_date"-->
          <!--            label="创建时间"-->
          <!--            show-tooltip-when-overflow-->
          <!--            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="{color:$store.state.settings.theme}"
                    style="margin-right:15px;cursor: pointer;"
                    @click="edit('edit',row)"
                  />
                </el-tooltip>
                <el-tooltip v-del-tab-index class="item" effect="dark" content="删除" placement="top">
                  <i :style="{color:$store.state.settings.theme}" class="el-icon-delete" style="margin-right:15px;" @click="del(row)" />
                </el-tooltip>
                <el-tooltip v-del-tab-index class="item" effect="dark" content="复制" placement="top">
                  <i :style="{color:$store.state.settings.theme}" class="el-icon-document-copy" style="cursor: pointer;color:#42b983" @click="copy('copy',row)" />
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!--分页-->
      <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
      v-el-drag-dialog
      :title="operation==='add'?'新增':(operation==='edit'?'预览':'复制')"
      :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==='edit'" 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>-->
                <!--                {{ tag.editDisabled }}-->
                <!--                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="val=>handleSelect(val,tag)"
                  @keyup.enter.native="handleInputConfirm(tag)"
                />
                <!--                @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'"
              v-waves
              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'" v-waves @click="dialogVisibleCancel">返 å›ž</el-button>
          <el-button v-if="operation!=='edit'" v-waves @click="dialogVisibleCancel">取 æ¶ˆ</el-button>
          <el-button
            v-if="operation!=='edit'"
            v-waves
            type="primary"
            :loading="$store.state.app.buttonIsDisabled"
            :disabled="$store.state.app.buttonIsDisabled"
            @click="dialogVisibleConfirm"
          >ç¡® å®š</el-button>
        </div>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { AddUpdateRoute, DeleteRoute, RouteSearch, StepSelect, ViewRoute } from '@/api/basicSettings'
import { validateCode } from '@/utils/global'
import elDragDialog from '@/directive/el-drag-dialog'
import waves from '@/directive/waves'
import TableColumnSettings from '@/components/TableColumnSettings'

export default {
  name: 'GYLX',
  components: {
    Pagination, TableColumnSettings
  },
  directives: { elDragDialog, waves },
  data() {
    return {
      isIpad: false,
      mainHeight: 0,
      tableHeight: 0,
      form: {
        routecode: '', // å·¥è‰ºè·¯çº¿ç¼–码
        routename: '', // å·¥è‰ºè·¯çº¿åç§°
        description: '', // å·¥è‰ºè·¯çº¿æè¿°
        createuser: '', // åˆ›å»ºäººå‘˜
        prop: 'lm_date', // æŽ’序字段
        order: 'desc', // æŽ’序字段
        page: 1, // ç¬¬å‡ é¡µ
        rows: 20 // æ¯é¡µå¤šå°‘条
      },
      isEnableArr: [
        { label: '是', value: 'Y' },
        { label: '否', value: 'N' }
      ],
      total: 10,
      tableData: [],
      tableColumnSettingsArray: [
        { minWidth: 50, width: false, prop: 'id', label: 'id', id: 1, show: false, fixed: false, sortable: false }, // éšè—åˆ—  show: false隐藏，true显示
        { minWidth: 25, width: 50, prop: 'RowNum', label: '序号', id: 2, show: true, fixed: 'left', sortable: false }, // custom
        {
          minWidth: 110,
          width: false,
          prop: 'code',
          label: '编码',
          id: 3,
          show: true,
          fixed: false,
          sortable: true
        },
        {
          minWidth: 110,
          width: false,
          prop: 'name',
          label: '名称',
          id: 4,
          show: true,
          fixed: false,
          sortable: true
        },
        {
          minWidth: 330,
          width: false,
          prop: 'description',
          label: '工艺路线描述',
          id: 5,
          show: true,
          fixed: false,
          sortable: true
        },
        {
          minWidth: 110,
          width: false,
          prop: 'enable',
          label: '使用状态',
          id: 6,
          show: true,
          fixed: false,
          sortable: true
        },
        {
          minWidth: 110,
          width: false,
          prop: 'lm_user',
          label: '创建人员',
          id: 7,
          show: true,
          fixed: false,
          sortable: true
        },
        {
          minWidth: 160,
          width: false,
          prop: 'lm_date',
          label: '创建时间',
          id: 8,
          show: true,
          fixed: false,
          sortable: true
        }
      ],
      tableTimeStampKey: new Date().getTime(), // è¡¨æ ¼key
      dialogVisible: false,
      dialogForm: {
        id: '',
        code: '',
        name: '',
        enable: 'Y',
        description: '',
        Data: []
      },
      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' }
      ],
      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: {
    tableColumnUpdate(val, isCopyTrue) {
      if (isCopyTrue) {
        this.tableColumnSettingsArray = val
      }
      this.tableTimeStampKey = new Date().getTime()
      this.$refs.tableDataRef.doLayout()
    },
    // è¿œç¨‹æœç´¢
    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)
    },
    // è¿‡æ»¤
    createFilter(queryString) {
      return (res) => {
        return (res.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1)
      }
    },
    // å·¥è‰ºè®¾ç½® ä¸‹æ‹‰èŽ·å–所有
    async getStepSelectArr() {
      const { data: res } = await StepSelect()
      this.routeArr = res
    },
    // å¤„理下拉选择
    handleSelect(item, tag) {
      this.autocompleteValue = item.value
      this.$nextTick(_ => {
        this.$refs['saveTagInput' + this.mouseFocusPosition][0].focus()
        this.handleInputConfirm(tag)
      })
    },
    // è¾“入框确认事件
    handleInputConfirm(tag) {
      // 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('此工序已选，请选择其它工序！')
      }

      this.routeArr.forEach((item, index) => {
        if (this.autocompleteValue.trim() === item.stepname) {
          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) {
          item.stepname = this.autocompleteValue
          item.effect = 'dark'
        }
        item.editDisabled = true
      })
      this.clickSelected = this.dynamicTags.findIndex(i => i.effect === 'dark') + 1

      this.addDisabled = false
      this.editDisabled = true
      this.selectedName = ''
    },
    // tag点击修改按钮
    tagEdit(tag) {
      this.autocompleteValue = ''
      this.dynamicTags.forEach(item => {
        item.stepname = item.stepname.trim()
        item.editDisabled = false
        if (item.seq !== tag.seq) {
          item.effect = 'light'
        } else {
          item.effect = 'dark'
        }
      })

      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) {
      if (this.dynamicTags.every(i => i.editDisabled)) {
        this.clickSelected = tag.seq
        if (tag.effect === 'dark') {

        } else {
          this.dynamicTags.forEach(item => {
            item.effect = 'light'
          })
          if (tag.effect === 'light') {
            tag.effect = 'dark'
          } else if (tag.effect === 'dark') {
            tag.effect = 'light'
          }
        }
      }
    },
    // å¤„理tag关闭事件
    handleTagClose(tag) {
      // å½“选中的步骤被删除时
      if (tag.effect === 'dark') {
        this.clickSelected = this.dynamicTags.length - 1
      }
      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
      })

      // é‡æ–°æŽ’序
      this.dynamicTags.forEach((item, index) => {
        item.editDisabled = true
        item.seq = index + 1
        item.stepcode = ''
        item.effect = index === this.dynamicTags.length - 1 ? 'dark' : 'light'
      })
      this.addDisabled = false
    },
    // tag添加按钮
    showInput() {
      const seq = this.dynamicTags.findIndex(i => i.effect === 'dark') + 2

      // å…ˆå°†æ¯ä¸ªçš„tag标签颜色改为浅色
      this.dynamicTags.forEach(i => {
        i.effect = 'light'
      })

      this.autocompleteValue = ''
      this.addDisabled = true
      this.editDisabled = false

      this.dynamicTags.splice(this.clickSelected, 0, { editDisabled: true, seq: seq, stepname: '', effect: 'dark' })
      this.dynamicTags.forEach((item, index) => {
        item.seq = 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
      })
    },

    // èŽ·å–工艺路线列表清单
    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('已取消删除')
      })
    },
    // å¤åˆ¶æŒ‰é’®
    async copy(operation, row) {
      this.operation = operation
      this.dialogVisible = true

      await this.getStepSelectArr()
      const { data: res } = await ViewRoute({ routecode: row.code })
      // å¾…改
      this.dynamicTags = []
      this.routeSelectedArr = []
      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
        res[0].Data.forEach((item, index) => {
          this.dynamicTags.push(
            { seq: item.seq, stepname: item.stepname, stepcode: item.stepcode, editDisabled: true, effect: index === res[0].Data.length - 1 ? 'dark' : 'light' }
          )
          this.routeSelectedArr.push({
            stepcode: item.stepcode,
            stepname: item.stepname,
            value: item.stepname
          })
          this.routeArr = this.routeArr.filter(i => i.stepcode !== item.stepcode)
        })

        this.addDisabled = false
        this.clickSelected = this.dynamicTags.length
      })
    },
    // å¯¹è¯æ¡†å…³é—­äº‹ä»¶
    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('工艺设置第一项不能为空！')
      }
      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
        }
      })

      this.$refs.dialogForm.validate(valid => {
        if (valid) {
          this.$store.state.app.buttonIsDisabled = true
          const data = {
            code: this.dialogForm.code,
            name: this.dialogForm.name,
            enable: this.dialogForm.enable,
            description: this.dialogForm.description,
            Data: Data
          }

          AddUpdateRoute(this.dialogForm.id, this.operation === 'edit' ? 'Update' : 'Add', data).then(res => {
            if (res.code === '200') {
              this.dialogVisible = false
              this.$message.success(this.operation === 'add' ? '添加成功！' : '复制成功！')
              this.getRouteSearch()
              this.$store.state.app.buttonIsDisabled = false
            } else {
              this.$message.error(this.operation === 'add' ? '添加失败！' : '复制失败！')
            }
          })
        }
      })
    },
    // èŽ·å–页面高度
    getHeight() {
      this.$nextTick(() => {
        this.mainHeight = window.innerHeight - 85
        this.tableHeight = this.mainHeight - 195
        if (window.innerHeight < 769) {
          this.tableHeight = this.tableHeight - 40
        }
        this.isIpad = window.innerHeight < 769 && window.innerWidth < 1367
        this.$refs.tableDataRef.doLayout()
      })
    },
    tableRowClassName({ row, rowIndex }) {
      return 'custom-row'
    }
  }
}
</script>

<style lang="scss" scoped>
$main_color: #42b983;

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

.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-button--primary {
  //background-color: $main_color !important;
}

::v-deep .el-button--default {
  background-color: #f8f8fa;
  border: none;
}

::v-deep .el-input__inner {
  height: 34px;
  line-height: 34px;
  //color: #a7a7a7;
}

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

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

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

::v-deep .el-dialog__footer {
  display: flex;
  justify-content: flex-end;
}

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

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

::v-deep .el-table::before {
  height: 0;
}

::v-deep .el-table__body-wrapper {
  background-color: #f8f8fa;
}

::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/produce/stepReport.vue

@@ -339,6 +339,7 @@

    </div>

    <!--    å¼€æŠ¥å·¥ã€å¤–协、不良处理-->
    <el-dialog
      v-el-drag-dialog
      :title="dialogTitle"
@@ -792,6 +793,84 @@
      </span>
    </el-dialog>

    <!--    æµè½¬å°æ ‡ç­¾æ‰“印-->
    <!--打印预览页面  å°æ ‡ç­¾-->
    <el-dialog
      v-el-drag-dialog
      title="预览"
      :visible.sync="dialogVisible2"
      width="1140"
      top="10vh"
      :close-on-click-modal="false"
      @close="dialogVisible2Close"
    >
      <!-- è¦æ‰“印的区域 -->
      <div id="printMe2" style="padding: 30px;">
        <div
          style="display: flex;width: 280px;height: 150px;border: 1px solid #000;text-align: center;font-size: 10px;"
        >

          <div style="width: 90px;display: flex;flex-direction: column;border-right: 1px solid #000">
            <div
              style="display: flex;height: 90px;border-bottom:1px solid #000;
              justify-content: center;align-items: center;position: relative"
            >
              <div id="qrCode2" ref="qrCodeDiv2" style="overflow-y: hidden;height:60px;position: absolute;left: 14px;" />
            </div>
            <div
              style="display: flex;height: 30px;justify-content: flex-start;border-bottom:1px solid #000;align-items: center"
            >
              <div style="margin-left: 5px;width: 28px">数量:</div>
              {{ qrForm.startqty }}
            </div>
            <div style="display: flex;height: 30px;justify-content: flex-start;align-items: center">
              <div style="margin-left: 5px;width: 42px">处理人:</div>
              {{ qrForm.operator }}
            </div>
          </div>

          <div style="width:190px;display: flex;flex-direction: column">
            <div
              style="display: flex;height: 20%;border-bottom:1px solid #000;justify-content: flex-start;align-items: center;text-align: left"
            >
              <div style="width: 60px;margin-left: 5px;">工单编号:</div>
              <div>{{ qrForm.wo_code }}</div>
            </div>
            <div
              style="display: flex;height: 20%;border-bottom:1px solid #000;justify-content: flex-start;align-items: center ;text-align: left"
            >
              <div style="width: 60px;margin-left: 5px;">产品编码:</div>
              <div>{{ qrForm.partcode }}</div>
            </div>
            <div
              style="display: flex;height: 20%;border-bottom:1px solid #000 ;justify-content: flex-start;align-items: center;text-align: left"
            >
              <div style="width:60px;margin-left: 5px;">产品名称:</div>
              <div>{{ qrForm.partname }}</div>
            </div>
            <div
              style="display: flex;height: 20%;border-bottom:1px solid #000 ;justify-content: flex-start;align-items: center;text-align: left"
            >
              <div style="width:60px;margin-left: 5px;">{{ qrForm.nextstepname?'下道工序':'产品规格' }}:</div>
              <div>{{ qrForm.nextstepname?qrForm.nextstepname:qrForm.partspec?qrForm.partspec:'/' }}</div>
            </div>
            <div style="display: flex;height: 20%;justify-content: flex-start;align-items: center;text-align: left">
              <div style="width: 60px;margin-left: 5px;">处理时间:</div>
              <div>{{ qrForm.operatorTime }}</div>
            </div>

          </div>

        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <div class="footerButton">
          <el-button v-waves @click="dialogVisible2 = false">取 æ¶ˆ</el-button>
          <el-button v-waves v-print="printObj2" type="primary">ç¡® å®š</el-button>
        </div>
      </span>
    </el-dialog>

  </div>
</template>

@@ -818,7 +897,8 @@
import { nanoid } from 'nanoid'
import { LabelBarCode } from '@/api/systemSetting'
import { getCookie } from '@/utils/auth'

import { handleDatetime2 } from '@/utils/global'
import QRCode from 'qrcodejs2'
export default {
  name: 'SCKBG',
  components: {
@@ -936,8 +1016,41 @@

      defectTableData: [],
      badTableData: [],
      workOrderCurrentValue: ''
      workOrderCurrentValue: '',

      dialogVisible2: false, //
      qrForm: { // æ‰“印内容
        qrvalue: '',
        startqty: '',
        wo_code: '',
        partcode: '',
        partname: '',
        partspec: '',
        nextstepname: '',
        operator: '', // æ“ä½œäºº
        operatorTime: ''// æ“ä½œæ—¶é—´
      },
      printObj2: {
        id: 'printMe2',
        popTitle: '打印模板',
        preview: false,
        extraHead: '<meta http-equiv="Content-Language" content="zh-cn"/>',
        closeCallback(vue) { // å…³é—­æ‰“印的回调事件（无法确定点击的是确认还是取消）
          console.log('11212', vue)
          // vue.dialogVisible = false
          vue.dialogVisible2 = false
          vue.dialogVisible = false
        },
        beforeOpenCallback(vue) {
          vue.printLoading = true
          console.log('打开之前')
        },
        openCallback(vue) {
          vue.printLoading = false
          console.log('执行了打印')
        }
      },
      xx: ''
    }
  },
  created() {
@@ -952,6 +1065,7 @@
    this.getAllSelectArr()
  },
  methods: {

    async getAllSelectArr() {
      const { data: res1 } = await GroupsPermissions()// ç­ç»„
      this.usergroupArr = res1
@@ -1284,6 +1398,12 @@
              await this.tabClick()
              this.$store.state.app.buttonIsDisabled = false
              this.dialogVisible = false

              // è‡ªåˆ¶æŠ¥å·¥æ‰“印标签口子已开好
              // if (JSON.parse(localStorage.getItem('mesSetting')).every) {
              //   this.dialogVisible2 = true
              //   this.ZZprint2(localStorage.getItem('username'))
              // }
            } else {
              this.$store.state.app.buttonIsDisabled = false
              this.$notify.error('报工失败！')
@@ -1419,6 +1539,51 @@
        }
      })
    },

    dialogVisible2Close() {
      this.qrForm.qrvalue = ''
      this.qrForm.startqty = ''
      this.qrForm.wo_code = ''
      this.qrForm.partcode = ''
      this.qrForm.partname = ''
      this.qrForm.partspec = ''
      this.qrForm.nextstepname = ''
      this.qrForm.operator = ''
      this.qrForm.operatorTime = ''
      // this.$refs.qrCodeDiv2 = ''
    },

    ZZprint2(username) {
      if (this.dialogForm.nextstepcode !== '') {
        this.qrForm.qrvalue = this.dialogForm.wo_code + ';' + this.dialogForm.nextstepcode
      } else {
        this.qrForm.qrvalue = this.dialogForm.inbarcode
      }

      this.qrForm.startqty = this.dialogForm.startqty
      this.qrForm.wo_code = this.dialogForm.wo_code
      this.qrForm.partcode = this.dialogForm.partnumber
      this.qrForm.partname = this.dialogForm.partname
      this.qrForm.nextstepname = this.dialogForm.nextstepname
      this.qrForm.operator = username
      this.qrForm.operatorTime = handleDatetime2(new Date())
      this.$nextTick(() => {
        this.bindQRCode(this.qrForm.qrvalue)
      })
    },
    // ç”ŸæˆäºŒç»´ç 
    bindQRCode(text) {
      new QRCode(this.$refs.qrCodeDiv2, {
        text: text,
        // width: 50,
        width: 60,
        // height: 50,
        height: 60,
        colorDark: '#000', // äºŒç»´ç é¢œè‰²
        colorLight: '#ffffff', // äºŒç»´ç èƒŒæ™¯è‰²
        correctLevel: QRCode.CorrectLevel.L// å®¹é”™çŽ‡ï¼ŒL/M/H
      })
    },
    // ç¼ºé™·æ–°å¢ž
    addDefect() {
      if (this.defectTableData.find(i => i.code.length === 0)) {

 src/views/qualityManager/processCheck.vue

@@ -172,7 +172,7 @@
                  <el-input
                    v-model="item.real_value"
                    size="mini"
                    oninput="value=value.replace(/[^0-9]/g,'')"
                    oninput="value=value.replace(/[^0-9.]/g,'')"
                    style="width: 100px;margin-left: 5px"
                    @input="val=>inputChange(val,item)"
                  />
@@ -367,7 +367,7 @@
      this.form.sampscare = res.chekstand[0].sampmethod === 'FIXED' ? res.chekstand[0].sampscare
        : res.labcont[0].good_qty * res.chekstand[0].sampscare / 100
      this.form.sampscare = this.form.sampscare <= this.form.good_qty ? this.form.sampscare : this.form.good_qty

      this.form.sampscare = Math.ceil(this.form.sampscare)// å‘上取整
      await this.getMesOrderStepCheckItemList()
    },
    async getMesOrderStepCheckItemList() {

 src/views/qualityManager/processCheckRecord.vue

@@ -170,7 +170,7 @@
      v-el-drag-dialog
      title="工序检验明细"
      :visible.sync="dialogVisible"
      width="900px"
      width="1100px"
      :close-on-click-modal="false"
      top="15vh"
      @closed="handleClose"
@@ -208,7 +208,7 @@
          <!--          />-->
          <el-table-column
            prop="checkitem_name"
            label="检验项目名称"
            label="检验项目"
            fixed
            show-tooltip-when-overflow
          />
@@ -260,11 +260,11 @@
            <template slot-scope="{row}">
              <div style="display: flex;align-items: center">
                <i
                  :class="row.check_result==='OK'?'el-icon-success':'el-icon-error'"
                  :style="{color:row.check_result==='OK'?$store.state.settings.theme:'red'}"
                  :class="row[(index + 1) + '/' + dialogTableNumberCol].split('_')[1]==='OK'?'el-icon-success':'el-icon-error'"
                  :style="{color:row[(index + 1) + '/' + dialogTableNumberCol].split('_')[1]==='OK'?$store.state.settings.theme:'red'}"
                  style="margin-right: 2px"
                />
                {{ row[(index + 1) + '/' + dialogTableNumberCol] }}
                {{ row[(index + 1) + '/' + dialogTableNumberCol].split('_')[0] }}
              </div>

              <!--            &lt;!&ndash;        ~当三个值都有    &ndash;&gt;-->

 src/views/systemSetting/processSetting.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,214 @@
<template>
  <div>
    <div class="body" style="padding-top: 10px;" :style="{height:mainHeight+'px'}">
      <el-card class="box-card" :style="{height:(mainHeight-20)+'px'}">
        <div slot="header" style="display: flex;justify-content: flex-end">
          <!--          <span>流程设置</span>-->
          <el-button type="primary" @click="save">保存</el-button>
        </div>
        <div class="main">
          <div class="block">
            <div class="block-title">工艺管理</div>
            <div class="block-content">
              <div class="font">
                <div>工艺路线:</div>
                <el-tooltip class="item" effect="dark" content="工单是否启用工艺路线生产" placement="top">
                  <i class="el-icon-question" />
                </el-tooltip>
                <el-switch
                  v-model="route"
                  style="margin-left: 10px;"
                />
              </div>

              <div class="font">
                <div>按序生产:</div>
                <el-tooltip class="item" effect="dark" content="工序是否有序生产" placement="top">
                  <i class="el-icon-question" />
                </el-tooltip>
                <el-switch
                  v-model="isOrder"
                  style="margin-left: 10px;"
                />
              </div>

            </div>
          </div>
          <div class="block">
            <div class="block-title">SOP管理</div>
            <div class="block-content">
              <div class="font">
                <div>设备SOP:</div>
                <el-tooltip class="item" effect="dark" content="是否启用设备SOP管理" placement="top">
                  <i class="el-icon-question" />
                </el-tooltip>
                <el-switch
                  v-model="device"
                  style="margin-left: 10px;"
                />
              </div>
              <div class="font">
                <div>工艺SOP:</div>
                <el-tooltip class="item" effect="dark" content="是否启用工艺SOP管理" placement="top">
                  <i class="el-icon-question" />
                </el-tooltip>
                <el-switch
                  v-model="tech"
                  style="margin-left: 10px;"
                />
              </div>
              <div class="font">
                <div>单据SOP:</div>
                <el-tooltip class="item" effect="dark" content="是否启用单据SOP管理" placement="top">
                  <i class="el-icon-question" />
                </el-tooltip>
                <el-switch
                  v-model="workOrder"
                  style="margin-left: 10px;"
                />
              </div>

            </div>
          </div>
          <div class="block">
            <div class="block-title">流转标签打印</div>
            <div class="block-content">
              <div class="font">
                <div>逐道打印:</div>
                <el-tooltip class="item" effect="dark" content="是否逐道打印" placement="top">
                  <i class="el-icon-question" />
                </el-tooltip>
                <el-switch
                  v-model="every"
                  style="margin-left: 10px;"
                  @change="everyChange"
                />
              </div>
              <div class="font">
                <div>末道打印:</div>
                <el-tooltip class="item" effect="dark" content="是否末道打印" placement="top">
                  <i class="el-icon-question" />
                </el-tooltip>
                <el-switch
                  v-model="last"
                  style="margin-left: 10px;"
                  :disabled="every"
                />
              </div>
            </div>
          </div>

        </div>
      </el-card>

    </div>
  </div>
</template>

<script>
import { SaveSystemProcConfig } from '@/api/systemSetting'

export default {
  name: 'ProcessSetting',
  data() {
    return {
      mainHeight: 0,
      route: false, // å·¥è‰ºè·¯çº¿

      isOrder: true, // æ˜¯å¦æŒ‰åºç”Ÿäº§
      device: true, // è®¾å¤‡
      tech: true, // å·¥è‰º
      workOrder: true, // å·¥å•
      every: false, // æ˜¯å¦é€é“打印
      last: false // æ˜¯å¦æœ«é“打印
    }
  },
  created() {
  },
  mounted() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()
    this.init()
  },
  methods: {
    init() {
      const mesSetting = JSON.parse(localStorage.getItem('mesSetting'))
      if (mesSetting) {
        this.route = mesSetting.route

        this.isOrder = mesSetting.isOrder
        this.tech = mesSetting.tech
        this.workOrder = mesSetting.workOrder
        this.every = mesSetting.every
        this.last = mesSetting.last
      }
    },
    save() {
      this.$confirm('是否确认保存?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const data = {
          route: this.route, // å·¥è‰ºè·¯çº¿

          isOrder: this.isOrder, // æ˜¯å¦æŒ‰åºç”Ÿäº§
          device: this.device, // è®¾å¤‡
          tech: this.tech, // å·¥è‰º
          workOrder: this.workOrder, // å·¥å•
          every: this.every, // æ˜¯å¦é€é“打印
          last: this.last // æ˜¯å¦æœ«é“打印
        }
        SaveSystemProcConfig({ mesSetting: data }).then(res => {
          if (res.code === '200') {
            localStorage.setItem('mesSetting', JSON.stringify(data))
            this.$notify.success('保存成功！')
          }
        })
      }).catch(() => {
        this.$notify.info('已取消保存！')
      })
    },
    everyChange(val) {
      if (val) {
        this.last = true
      }
    },

    // èŽ·å–页面高度
    getHeight() {
      this.$nextTick(() => {
        this.mainHeight = window.innerHeight - 85
      })
    }
  }
}
</script>

<style scoped>
.main{
  display: flex;
  flex-direction: column;
}
.block{
  height: 100px;
}
.block-title{

}
.block-content{
  padding: 20px;
  display: flex;
  align-items: center;

}

.font{
  color: #606266;
  font-size: 14px;
  display: flex;
  align-items: center;
  width: 200px;

}
</style>