1.在缓存模式下 页面切换会请求接口

小小儁爺

2024-12-30 ff2f7d7bad0132c130c305364a863ff446e926b2

 src/views/systemSetting/processSetting.vue

@@ -1,228 +1,233 @@
<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'

import { logout } from '@/api/user'



export default {

  name: 'ProcessSetting',

  data() {

    return {

      mainHeight: 0,

      route: false, // 工艺路线



      isOrder: true, // 是否按序生产

      device: true, // 设备

      tech: true, // 工艺

      workOrder: true, // 工单

      every: false, // 是否逐道打印

      last: false // 是否末道打印

    }

  },

  activated() {
  window.addEventListener('resize', this.getHeight)
  this.getHeight()
},
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.device = mesSetting.device

        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('保存成功！')



            setTimeout(() => {

              logout().then(res => {

                localStorage.removeItem('token')

                this.$router.push({ path: this.redirect || '/' })

              })

            }, 2000)

          }

        })

      }).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;

}



.el-icon-question {

  cursor: pointer;

}

</style>

<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'
import { logout } from '@/api/user'

export default {
  name: 'ProcessSetting',
  data() {
    return {
      mainHeight: 0,
      route: false, // 工艺路线

      isOrder: true, // 是否按序生产
      device: true, // 设备
      tech: true, // 工艺
      workOrder: true, // 工单
      every: false, // 是否逐道打印
      last: false // 是否末道打印
    }
  },
  activated() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()
    this.init()
  },
  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.device = mesSetting.device
        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('保存成功！')

            setTimeout(() => {
              logout().then(res => {
                localStorage.removeItem('token')
                this.$router.push({ path: this.redirect || '/' })
              })
            }, 2000)
          }
        })
      }).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;
}

.el-icon-question {
  cursor: pointer;
}
</style>