wms-vue/src/views/modules/automatedWarehouse/sopManagement.vue

<template>
  <div class="mod-config yzz">
    <!-- 查询表单 - rqrq -->
    <el-form :inline="true" label-position="top" style="margin-top: 1px; margin-left: 0px;">
      <!-- 三级级联选择：平台 -> 模块 -> 功能页面 - rqrq -->
      <el-form-item label="平台">
        <el-select
          v-model="queryData.platform"
          placeholder="请选择平台"
          style="width: 100px"
          @change="handlePlatformChange">
          <el-option
            v-for="item in platformOptions"
            :key="item"
            :label="item"
            :value="item">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="模块">
        <el-select
          v-model="queryData.moduleName"
          placeholder="请选择模块"
          style="width: 150px"
          :disabled="!queryData.platform"
          @change="handleModuleChange">
          <el-option
            v-for="item in moduleOptions"
            :key="item"
            :label="item"
            :value="item">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="功能页面">
        <el-select
          v-model="queryData.url"
          placeholder="请选择功能页面"
          style="width: 180px"
          :disabled="!queryData.moduleName"
          @change="handlePageChange">
          <el-option
            v-for="item in pageOptions"
            :key="item.url"
            :label="item.pageName"
            :value="item.url">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="错误信息">
        <el-input v-model="queryData.searchErrorMessage" style="width: 180px" placeholder="错误信息关键字" clearable></el-input>
      </el-form-item>

      <el-form-item label=" ">
        <el-button type="primary" @click="getDataList()">查询</el-button>
        <el-button @click="resetQuery()">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 当前选中页面信息 - rqrq -->
    <div v-if="false" class="url-info-card">
      <el-card shadow="never">
        <div slot="header" class="clearfix">
          <span>
            <el-tag :type="currentUrlConfig.platform === 'PC' ? 'primary' : 'success'" size="small" style="margin-right: 10px">
              {{ currentUrlConfig.platform }}
            </el-tag>
            <i class="el-icon-document"></i>
            {{ currentUrlConfig.moduleName }} - {{ currentUrlConfig.pageName }}
          </span>
        </div>
      </el-card>
    </div>

    <!-- 数据表格 - rqrq -->
    <el-table
      :data="dataList"
      :height="height"
      border
      highlight-current-row
      v-loading="dataListLoading"
      style="width: 100%;">

      <el-table-column prop="functionButton" label="功能/按钮" width="150" header-align="center" align="center">
        <template slot-scope="scope">
          <el-tag type="primary" size="small">{{ scope.row.functionButton }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="seqNo" label="序号" width="60" header-align="center" align="center"></el-table-column>

      <el-table-column prop="errorMessage" label="错误信息" min-width="300" header-align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span style="color: #F56C6C">{{ scope.row.errorMessage }}</span>
        </template>
      </el-table-column>

<!--      <el-table-column prop="errorType" label="类型" width="80" header-align="center" align="center">-->
<!--        <template slot-scope="scope">-->
<!--          <el-tag :type="scope.row.errorType === 'BACKEND' ? 'warning' : 'info'" size="mini">-->
<!--            {{ scope.row.errorType === 'BACKEND' ? '后端' : '前端' }}-->
<!--          </el-tag>-->
<!--        </template>-->
<!--      </el-table-column>-->

      <el-table-column prop="defaultSolution" label="默认处理方式" min-width="250" header-align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span style="color: #67C23A">{{ scope.row.defaultSolution || '-' }}</span>
        </template>
      </el-table-column>

      <el-table-column prop="userSolution" label="用户补充处理方式" min-width="250" header-align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span style="color: #409EFF">{{ scope.row.userSolution || '-' }}</span>
        </template>
      </el-table-column>

      <!-- 操作列 - rqrq -->
      <el-table-column header-align="center" align="center" fixed="right" width="100" label="操作">
        <template slot-scope="scope">
          <a type="text" @click="editSolution(scope.row)">编辑</a>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 - rqrq -->
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[20, 50, 100, 1000]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>

    <!-- 编辑处理方式弹窗 - rqrq -->
    <el-dialog
      title="编辑处理方式"
      :visible.sync="editDialogVisible"
      :close-on-click-modal="false"
      v-drag
      width="800px">

      <el-form :model="editForm" label-position="top" style="margin-top: 1px; margin-left: 0px;">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="功能/按钮">
              <el-input v-model="editForm.functionButton" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="错误类型">
              <el-input v-model="editForm.errorTypeText" readonly></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="错误信息">
              <el-input type="textarea" :rows="3" resize="none" v-model="editForm.errorMessage" readonly></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row style="margin-top: 52px">
          <el-col :span="24">
            <el-form-item label="默认处理方式">
              <el-input type="textarea" :rows="4" resize="none" v-model="editForm.defaultSolution" readonly></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row style="margin-top: 70px">
          <el-col :span="24">
            <el-form-item label="用户补充处理方式">
              <el-input type="textarea" :rows="4" resize="none" v-model="editForm.userSolution" placeholder="请输入用户补充处理方式"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer" style="margin-top: 70px">
        <el-button type="primary" @click="saveSolution" :disabled="saveLoading">
          {{ saveLoading ? '保存中...' : '保存' }}
        </el-button>
        <el-button @click="editDialogVisible = false" :disabled="saveLoading">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getPlatformList,
  getModuleListByPlatform,
  getPageListByPlatformAndModule,
  getErrorDetailList,
  updateErrorDetail
} from "@/api/sys/sop.js"

export default {
  data() {
    return {
      height: 200,
      dataListLoading: false,
      saveLoading: false,
      editDialogVisible: false,
      platformOptions: [],
      moduleOptions: [],
      pageOptions: [],
      currentUrlConfig: null,
      queryData: {
        platform: '',
        moduleName: '',
        url: '',
        searchErrorMessage: '',
        page: 1,
        limit: 20
      },
      editForm: {
        url: '',
        functionButton: '',
        seqNo: null,
        errorMessage: '',
        errorType: '',
        errorTypeText: '',
        defaultSolution: '',
        userSolution: ''
      },
      dataList: [],
      pageIndex: 1,
      pageSize: 20,
      totalPage: 0
    }
  },
  mounted() {
    // 使用nextTick确保DOM渲染完成后设置高度 - rqrq
    this.$nextTick(() => {
      this.height = window.innerHeight - 220
    })
    this.loadPlatformOptions()
  },
  methods: {
    // 加载平台列表，默认选中PC - rqrq
    loadPlatformOptions() {
      getPlatformList({}).then(({ data }) => {
        if (data && data.code == 0) {
          this.platformOptions = data.rows || []
          // 默认选中PC，如果没有PC则选中第一个 - rqrq
          if (this.platformOptions.includes('PC')) {
            this.queryData.platform = 'PC'
          } else if (this.platformOptions.length > 0) {
            this.queryData.platform = this.platformOptions[0]
          }
          // 加载模块列表
          if (this.queryData.platform) {
            this.loadModuleOptions(this.queryData.platform, true)
          }
        }
      })
    },
    // 加载模块列表 - rqrq
    loadModuleOptions(platform, selectFirst) {
      getModuleListByPlatform({ platform: platform }).then(({ data }) => {
        if (data && data.code == 0) {
          this.moduleOptions = data.rows || []
          // 默认选中第一个模块 - rqrq
          if (selectFirst && this.moduleOptions.length > 0) {
            this.queryData.moduleName = this.moduleOptions[0]
            this.loadPageOptions(platform, this.queryData.moduleName, true)
          }
        }
      })
    },
    // 加载功能页面列表 - rqrq
    loadPageOptions(platform, moduleName, selectFirst) {
      getPageListByPlatformAndModule({
        platform: platform,
        moduleName: moduleName
      }).then(({ data }) => {
        if (data && data.code == 0) {
          this.pageOptions = data.rows || []
          // 默认选中第一个功能页面 - rqrq
          if (selectFirst && this.pageOptions.length > 0) {
            this.queryData.url = this.pageOptions[0].url
            this.currentUrlConfig = this.pageOptions[0]
            this.getDataList()
          }
        }
      })
    },
    // 平台变化处理 - rqrq
    handlePlatformChange(platform) {
      this.queryData.moduleName = ''
      this.queryData.url = ''
      this.moduleOptions = []
      this.pageOptions = []
      this.currentUrlConfig = null
      this.dataList = []
      this.totalPage = 0
      if (platform) {
        // 加载模块列表并默认选中第一个 - rqrq
        this.loadModuleOptions(platform, true)
      }
    },
    // 模块变化处理 - rqrq
    handleModuleChange(moduleName) {
      this.queryData.url = ''
      this.pageOptions = []
      this.currentUrlConfig = null
      this.dataList = []
      this.totalPage = 0
      if (moduleName) {
        // 加载功能页面列表并默认选中第一个 - rqrq
        this.loadPageOptions(this.queryData.platform, moduleName, true)
      }
    },
    // 功能页面变化处理 - rqrq
    handlePageChange(url) {
      if (url) {
        this.currentUrlConfig = this.pageOptions.find(item => item.url === url)
        this.getDataList()
      } else {
        this.currentUrlConfig = null
        this.dataList = []
        this.totalPage = 0
      }
    },
    // 查询数据 - rqrq
    getDataList() {
      if (!this.queryData.url) {
        this.$message.warning('请先选择功能页面')
        return
      }
      this.dataListLoading = true
      this.queryData.page = this.pageIndex
      this.queryData.limit = this.pageSize
      getErrorDetailList(this.queryData).then(({ data }) => {
        this.dataListLoading = false
        if (data && data.code == 0) {
          this.dataList = data.rows || []
          this.totalPage = data.total || 0
        } else {
          this.dataList = []
          this.totalPage = 0
          this.$alert(data.msg || '查询失败', '错误', { confirmButtonText: '确定' })
        }
      }).catch(() => {
        this.dataListLoading = false
        this.$alert('查询失败', '错误', { confirmButtonText: '确定' })
      })
    },
    // 重置查询 - rqrq
    resetQuery() {
      this.queryData.searchErrorMessage = ''
      this.pageIndex = 1
      this.getDataList()
    },
    // 编辑处理方式 - rqrq
    editSolution(row) {
      this.editForm = {
        url: row.url,
        functionButton: row.functionButton,
        seqNo: row.seqNo,
        errorMessage: row.errorMessage,
        errorType: row.errorType,
        errorTypeText: row.errorType === 'BACKEND' ? '后端' : '前端',
        defaultSolution: row.defaultSolution || '',
        userSolution: row.userSolution || ''
      }
      this.editDialogVisible = true
    },
    // 保存处理方式 - rqrq
    saveSolution() {
      this.saveLoading = true
      const updateData = {
        url: this.editForm.url,
        functionButton: this.editForm.functionButton,
        seqNo: this.editForm.seqNo,
        defaultSolution: this.editForm.defaultSolution,
        userSolution: this.editForm.userSolution,
        errorMessage: this.editForm.errorMessage,
        errorType: this.editForm.errorType,
        isActive: 'Y'
      }
      updateErrorDetail(updateData).then(({ data }) => {
        if (data && data.code == 0) {
          this.$message.success('保存成功')
          this.editDialogVisible = false
          this.getDataList()
        } else {
          this.$alert(data.msg || '保存失败', '错误', { confirmButtonText: '确定' })
        }
      }).catch(() => {
        this.$alert('保存失败', '错误', { confirmButtonText: '确定' })
      }).finally(() => {
        this.saveLoading = false
      })
    },
    // 分页 - 每页条数变化 - rqrq
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 分页 - 当前页变化 - rqrq
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    }
  }
}
</script>

<style scoped>
.url-info-card {
  margin-bottom: 10px;
}
.url-info-card /deep/ .el-card__header {
  padding: 10px 15px;
  background-color: #f5f7fa;
}
.url-info-card /deep/ .el-card__body {
  display: none;
}
</style>