393 lines
13 KiB
Vue
393 lines
13 KiB
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>
|