klp-oa/klp-ui/src/views/wms/processSpec/index.vue

<template>
  <div class="spec-version-page" v-loading="pageLoading">
    <!-- 头部 -->
    <div class="page-header">
      <span class="page-title">规程版本管理</span>
      <el-button
        type="primary"
        size="small"
        icon="el-icon-plus"
        style="margin-left:auto"
        @click="openSpecDialog()"
      >新建规程</el-button>
    </div>

    <!-- 规程列表 -->
    <div class="section-wrapper">
      <div class="section-title">规程列表</div>
      <el-table
        :data="specList"
        size="small"
        highlight-current-row
        @row-click="onSpecRowClick"
        :row-class-name="tableRowClassName"
      >
        <el-table-column label="规程编码" prop="specCode" width="150" />
        <el-table-column label="规程名称" prop="specName" />
        <el-table-column label="创建时间" prop="createTime" width="180" />
        <el-table-column label="操作" align="right" width="180">
          <template slot-scope="{ row }">
            <el-button type="text" size="mini" @click.stop="openSpecDialog(row)">编辑</el-button>
            <el-button type="text" size="mini" class="btn-danger" @click.stop="removeSpec(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 版本列表 -->
    <div class="section-wrapper" v-if="currentSpec">
      <div class="section-title">
        版本列表 - {{ currentSpec.specName }}
        <el-button
          type="primary"
          size="mini"
          icon="el-icon-plus"
          @click="openVersionDialog()"
        >新建版本</el-button>
      </div>
      <el-table
        :data="versionList"
        size="small"
        highlight-current-row
        @row-click="onVersionRowClick"
      >
        <el-table-column label="版本号" prop="versionCode" />
        <el-table-column label="状态" prop="status" />
        <el-table-column label="创建时间" prop="createTime" />
        <el-table-column label="生效" align="center">
          <template slot-scope="{ row }">
            <el-switch
              :value="row.isActive === 1"
              active-color="#5F7BA0"
              @click.native.stop
              @change="handleActiveChange(row, $event)"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="right">
          <template slot-scope="{ row }">
            <el-button type="text" size="mini" @click.stop="openVersionDialog(row)">编辑</el-button>
            <el-button type="text" size="mini" class="btn-danger" @click.stop="removeVersion(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-empty v-if="!versionList.length && !versionLoading" description="暂无版本，请新建" style="padding:40px 0" />
    </div>
    <div v-else class="empty-hint">请选择一个规程查看其版本</div>

    <!-- 新建/编辑规程 -->
    <el-dialog :title="specTitle" :visible.sync="specOpen" width="500px" append-to-body @close="specForm = {}">
      <el-form ref="specFormRef" :model="specForm" :rules="specRules" label-width="88px" size="small">
        <el-form-item label="规程编码" prop="specCode">
          <el-input v-model="specForm.specCode" placeholder="请输入规程编码" maxlength="64" />
        </el-form-item>
        <el-form-item label="规程名称" prop="specName">
          <el-input v-model="specForm.specName" placeholder="请输入规程名称" maxlength="200" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="specForm.remark" type="textarea" rows="2" maxlength="500" show-word-limit />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button size="small" @click="specOpen = false">取消</el-button>
        <el-button size="small" type="primary" :loading="specSubmitLoading" @click="submitSpec">确定</el-button>
      </div>
    </el-dialog>

    <!-- 新建/编辑版本 -->
    <el-dialog :title="versionTitle" :visible.sync="versionOpen" width="500px" append-to-body @close="versionForm = {}">
      <el-form ref="versionFormRef" :model="versionForm" :rules="versionRules" label-width="88px" size="small">
        <el-form-item label="版本号" prop="versionCode">
          <el-input v-model="versionForm.versionCode" placeholder="如 V1.0" maxlength="64" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="versionForm.status" style="width:100%">
            <el-option v-for="s in statusOptions" :key="s" :label="s" :value="s" />
          </el-select>
        </el-form-item>
        <el-form-item label="保存后生效">
          <el-switch v-model="versionForm.isActive" :active-value="1" :inactive-value="0" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="versionForm.remark" type="textarea" rows="2" maxlength="500" show-word-limit />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button size="small" @click="versionOpen = false">取消</el-button>
        <el-button size="small" type="primary" :loading="versionSubmitLoading" @click="submitVersion">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listProcessSpec, getProcessSpec, addProcessSpec, updateProcessSpec, delProcessSpec } from '@/api/wms/processSpec'
import {
  listProcessSpecVersion,
  addProcessSpecVersion,
  updateProcessSpecVersion,
  delProcessSpecVersion,
  activateProcessSpecVersion
} from '@/api/wms/processSpecVersion'

export default {
  name: 'SpecVersionManage',
  data() {
    return {
      pageLoading: false,
      specList: [],
      currentSpec: null,
      currentSpecId: null,
      versionList: [],
      versionLoading: false,
      statusOptions: ['DRAFT', 'PUBLISHED', 'OBSOLETE'],
      
      // 规程相关
      specOpen: false,
      specTitle: '',
      specSubmitLoading: false,
      specForm: {},
      specRules: {
        specCode: [{ required: true, message: '规程编码不能为空', trigger: 'blur' }],
        specName: [{ required: true, message: '规程名称不能为空', trigger: 'blur' }]
      },
      
      // 版本相关
      versionOpen: false,
      versionTitle: '',
      versionSubmitLoading: false,
      versionForm: {},
      versionRules: {
        versionCode: [{ required: true, message: '版本号不能为空', trigger: 'blur' }],
        status: [{ required: true, message: '状态不能为空', trigger: 'change' }]
      }
    }
  },
  created() {
    this.loadSpecs()
  },
  methods: {
    // 表格行样式
    tableRowClassName({ row }) {
      return row.specId === this.currentSpecId ? 'current-row' : ''
    },
    
    // 加载规程列表
    loadSpecs() {
      this.pageLoading = true
      listProcessSpec({ pageNum: 1, pageSize: 500 }).then(res => {
        this.specList = res.rows || []
        if (this.specList.length > 0 && !this.currentSpec) {
          this.selectSpec(this.specList[0])
        }
      }).catch(e => console.error(e)).finally(() => { this.pageLoading = false })
    },
    
    // 选择规程
    selectSpec(spec) {
      this.currentSpec = spec
      this.currentSpecId = spec.specId
      this.loadVersions()
    },
    
    // 点击规程行
    onSpecRowClick(row) {
      this.selectSpec(row)
    },
    
    // 加载版本列表
    loadVersions() {
      if (!this.currentSpecId) return
      this.versionLoading = true
      listProcessSpecVersion({ specId: this.currentSpecId, pageNum: 1, pageSize: 200 }).then(res => {
        this.versionList = res.rows || []
      }).catch(e => console.error(e)).finally(() => { this.versionLoading = false })
    },
    
    // 点击版本行
    onVersionRowClick(row) {
      this.goPlanSpec(row)
    },
    
    // 跳转到方案详情
    goPlanSpec(row) {
      const basePath = this.$route.path.replace(/\/[^/]*$/, '')
      console.log(basePath)
      this.$router.push({
        path: `/process/processSpec/planSpec`,
        query: { specId: this.currentSpecId, versionId: String(row.versionId), versionCode: row.versionCode }
      })
    },
    
    // 生效切换
    handleActiveChange(row, val) {
      if (!val) {
        this.$message.info('请激活其他版本来替换当前生效版本')
        return
      }
      this.$modal.confirm('确认将版本"' + row.versionCode + '"设为当前生效版本？').then(() => {
        return activateProcessSpecVersion(row.versionId)
      }).then(() => {
        this.$modal.msgSuccess('已生效')
        this.loadVersions()
      }).catch(() => {})
    },
    
    // 规程对话框
    openSpecDialog(row) {
      this.specForm = row
        ? { ...row }
        : { specCode: undefined, specName: undefined, remark: undefined }
      this.specTitle = row ? '编辑规程' : '新建规程'
      this.specOpen = true
      this.$nextTick(() => this.$refs.specFormRef && this.$refs.specFormRef.clearValidate())
    },
    
    // 提交规程
    submitSpec() {
      this.$refs.specFormRef.validate(ok => {
        if (!ok) return
        this.specSubmitLoading = true
        const req = this.specForm.specId ? updateProcessSpec(this.specForm) : addProcessSpec(this.specForm)
        req.then(() => {
          this.$modal.msgSuccess('保存成功')
          this.specOpen = false
          this.loadSpecs()
        }).catch(e => console.error(e)).finally(() => { this.specSubmitLoading = false })
      })
    },
    
    // 删除规程
    removeSpec(row) {
      this.$modal.confirm('确认删除规程"' + row.specName + '"？').then(() => {
        return delProcessSpec(row.specId)
      }).then(() => {
        this.$modal.msgSuccess('删除成功')
        if (this.currentSpecId === row.specId) {
          this.currentSpec = null
          this.currentSpecId = null
          this.versionList = []
        }
        this.loadSpecs()
      }).catch(() => {})
    },
    
    // 版本对话框
    openVersionDialog(row) {
      this.versionForm = row
        ? { ...row }
        : { specId: this.currentSpecId, versionCode: undefined, status: 'DRAFT', isActive: 0, remark: undefined }
      this.versionTitle = row ? '编辑版本' : '新建版本'
      this.versionOpen = true
      this.$nextTick(() => this.$refs.versionFormRef && this.$refs.versionFormRef.clearValidate())
    },
    
    // 提交版本
    submitVersion() {
      this.$refs.versionFormRef.validate(ok => {
        if (!ok) return
        this.versionSubmitLoading = true
        const req = this.versionForm.versionId
          ? updateProcessSpecVersion({ ...this.versionForm, specId: this.currentSpecId })
          : addProcessSpecVersion({ ...this.versionForm, specId: this.currentSpecId })
        req.then(() => {
          this.$modal.msgSuccess('保存成功')
          this.versionOpen = false
          this.loadVersions()
        }).catch(e => console.error(e)).finally(() => { this.versionSubmitLoading = false })
      })
    },
    
    // 删除版本
    removeVersion(row) {
      this.$modal.confirm('确认删除版本"' + row.versionCode + '"？').then(() => {
        return delProcessSpecVersion(row.versionId)
      }).then(() => {
        this.$modal.msgSuccess('删除成功')
        this.loadVersions()
      }).catch(() => {})
    }
  }
}
</script>

<style scoped>
.spec-version-page {
  padding: 16px 20px;
  min-height: 100%;
}

.page-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #ebeef5;
}

.page-title {
  font-size: 15px;
  font-weight: 600;
  color: #303133;
}

.section-wrapper {
  background: #fff;
  border-radius: 4px;
  padding: 12px;
  margin-bottom: 16px;
  border: 1px solid #ebeef5;
}

.section-title {
  font-size: 13px;
  font-weight: 600;
  color: #606266;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.empty-hint {
  text-align: center;
  padding: 60px 0;
  color: #909399;
  font-size: 14px;
}

.el-table {
  border-radius: 0;
}

::v-deep .el-table .current-row {
  background: #f0f7ff !important;
}

::v-deep .el-button--primary {
  color: #fff !important;
  background: #5F7BA0 !important;
  border-color: #5F7BA0 !important;
}
::v-deep .el-button--primary:hover,
::v-deep .el-button--primary:focus { background: #4d6a8e !important; border-color: #4d6a8e !important; }
::v-deep .el-button--primary:active { background: #4a6585 !important; border-color: #4a6585 !important; }
::v-deep .el-button--primary.is-disabled { opacity: .5; }

::v-deep .el-button:not(.el-button--primary):not(.el-button--text):not(.el-button--danger) {
  color: #606266 !important;
  background: #fff !important;
  border-color: #dcdfe6 !important;
}
::v-deep .el-button:not(.el-button--primary):not(.el-button--text):not(.el-button--danger):hover {
  color: #5F7BA0 !important;
  border-color: #5F7BA0 !important;
}

::v-deep .el-button--text { background: transparent !important; border-color: transparent !important; }
::v-deep .el-button--text.btn-danger { color: #f56c6c !important; }

.btn-danger { color: #f56c6c; }
</style>