You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
304 lines
13 KiB
304 lines
13 KiB
<template>
|
|
<div class="customer-css">
|
|
<!-- 查询条件 -->
|
|
<el-form :inline="true" label-position="top" class="rs-search-form">
|
|
<el-form-item label="模板编码">
|
|
<el-input v-model="searchData.templateCode" style="width:150px" clearable @keyup.enter.native="getList" />
|
|
</el-form-item>
|
|
<el-form-item label="模板名称">
|
|
<el-input v-model="searchData.templateName" style="width:200px" clearable @keyup.enter.native="getList" />
|
|
</el-form-item>
|
|
<el-form-item label=" ">
|
|
<el-button type="primary" class="customer-bun-min" icon="el-icon-search" @click="getList">查询</el-button>
|
|
<el-button v-if="canEdit" type="success" class="customer-bun-min" icon="el-icon-plus" @click="openDialog()">新增</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
|
|
<!-- 模板列表 -->
|
|
<el-table :data="dataList" border highlight-current-row v-loading="loading" style="width:100%;margin-bottom:8px">
|
|
<el-table-column v-if="canEdit" label="操作" header-align="center" align="center" width="120">
|
|
<template slot-scope="scope">
|
|
<a class="customer-a" @click.stop="openDialog(scope.row)">编辑 |</a>
|
|
<a class="customer-a" @click.stop="removeRow(scope.row)">删除</a>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column type="index" label="#" width="50" align="center" />
|
|
<el-table-column prop="templateCode" label="模板编码" min-width="120" header-align="center" align="left" show-overflow-tooltip />
|
|
<el-table-column prop="templateName" label="模板名称" min-width="180" header-align="center" align="left" show-overflow-tooltip />
|
|
<el-table-column prop="remarks" label="备注" min-width="200" header-align="center" align="left" show-overflow-tooltip />
|
|
<el-table-column prop="status" label="状态" width="80" class-name="status-col" header-align="center" align="center">
|
|
<template slot-scope="scope">
|
|
<el-tag :type="scope.row.status === 'Y' ? 'success' : 'info'" size="mini">{{ scope.row.status === 'Y' ? '启用' : '停用' }}</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="createBy" label="创建者" width="110" header-align="center" align="left" />
|
|
<el-table-column prop="createDate" label="创建时间" width="150" header-align="center" align="center" />
|
|
</el-table>
|
|
|
|
<!-- 分页 -->
|
|
<el-pagination style="margin-top:0" @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
|
|
:current-page="pageIndex" :page-sizes="[20,50,100,200]" :page-size="pageSize" :total="totalPage"
|
|
layout="total, sizes, prev, pager, next, jumper" />
|
|
|
|
<!-- 新增/编辑 模板（含明细配置） -->
|
|
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="900px" top="6vh" :close-on-click-modal="false" v-drag>
|
|
<el-form :model="form" label-position="top" class="rs-form">
|
|
<el-row :gutter="20">
|
|
<el-col :span="8">
|
|
<el-form-item label="模板编码" :required="true">
|
|
<el-input v-model="form.templateCode" :disabled="editMode" maxlength="50" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="模板名称" :required="true">
|
|
<el-input v-model="form.templateName" maxlength="120" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="状态">
|
|
<el-select v-model="form.status" style="width:100%">
|
|
<el-option label="启用" value="Y" />
|
|
<el-option label="停用" value="N" />
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="20">
|
|
<el-col :span="24">
|
|
<el-form-item label="备注">
|
|
<el-input v-model="form.remarks" type="textarea" :rows="2" maxlength="500" show-word-limit />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
|
|
<div class="criteria-header">
|
|
<span>维修明细（模板包含的明细项）</span>
|
|
<el-button size="mini" type="primary" icon="el-icon-plus" @click="openPicker">添加明细</el-button>
|
|
</div>
|
|
<el-table :data="form.detailList" class="detail-table" size="mini" border max-height="300">
|
|
<el-table-column type="index" label="#" width="45" align="center" />
|
|
<el-table-column prop="skillCode" label="明细编码" width="130" header-align="center" align="left" show-overflow-tooltip />
|
|
<el-table-column prop="skillName" label="明细名称" min-width="180" header-align="center" align="left" show-overflow-tooltip />
|
|
<el-table-column prop="maxScore" label="满分" width="80" header-align="center" align="right" />
|
|
<el-table-column label="操作" width="80" align="center">
|
|
<template slot-scope="scope">
|
|
<el-button type="text" size="mini" @click="removeDetail(scope.$index)">移除</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button type="primary" :loading="submitLoading" @click="submitForm">保存</el-button>
|
|
<el-button @click="dialogVisible=false">取消</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
|
|
<!-- 从维修明细库选择 -->
|
|
<el-dialog title="选择维修明细" :visible.sync="pickerVisible" width="900px" top="8vh" :close-on-click-modal="false" append-to-body v-drag>
|
|
<el-form :inline="true" label-position="top">
|
|
<el-form-item label="明细名称">
|
|
<el-input v-model="pickerQuery.skillName" clearable style="width:180px" @keyup.enter.native="loadCandidates" />
|
|
</el-form-item>
|
|
<el-form-item label=" ">
|
|
<el-button type="primary" icon="el-icon-search" @click="loadCandidates">查询</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
<el-table ref="pickerTable" :data="candidateList" height="420" size="mini" border v-loading="pickerLoading" @selection-change="onPick">
|
|
<el-table-column type="selection" width="50" />
|
|
<el-table-column prop="skillCode" label="明细编码" width="130" header-align="center" align="left" />
|
|
<el-table-column prop="skillName" label="明细名称" min-width="180" header-align="center" align="left" show-overflow-tooltip />
|
|
<el-table-column prop="maxScore" label="满分" width="80" header-align="center" align="right" />
|
|
</el-table>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button type="primary" @click="confirmPick">确定添加</el-button>
|
|
<el-button @click="pickerVisible=false">取消</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
searchTemplateList,
|
|
createTemplate,
|
|
updateTemplate,
|
|
deleteTemplate,
|
|
getTemplateDetails
|
|
} from '@/api/repairSkill/repairSkillTemplate.js'
|
|
import { searchContentList } from '@/api/repairSkill/repairSkillContent.js'
|
|
|
|
export default {
|
|
name: 'RepairSkillTemplate',
|
|
data () {
|
|
return {
|
|
loading: false,
|
|
submitLoading: false,
|
|
dataList: [],
|
|
pageIndex: 1,
|
|
pageSize: 20,
|
|
totalPage: 0,
|
|
searchData: {
|
|
site: this.$store.state.user.site,
|
|
templateCode: '',
|
|
templateName: ''
|
|
},
|
|
dialogVisible: false,
|
|
dialogTitle: '新增维修技能模板',
|
|
editMode: false,
|
|
form: this.emptyForm(),
|
|
// 明细选择
|
|
pickerVisible: false,
|
|
pickerLoading: false,
|
|
candidateList: [],
|
|
picked: [],
|
|
pickerQuery: { skillName: '' }
|
|
}
|
|
},
|
|
computed: {
|
|
canEdit () {
|
|
// TODO 特殊权限：暂时放开，联调后恢复为 this.isAuth('repairSkill:template:edit')
|
|
return true
|
|
}
|
|
},
|
|
mounted () {
|
|
this.getList()
|
|
},
|
|
methods: {
|
|
emptyForm () {
|
|
return {
|
|
site: this.$store.state.user.site,
|
|
templateCode: '',
|
|
templateName: '',
|
|
remarks: '',
|
|
status: 'Y',
|
|
createBy: this.$store.state.user.name,
|
|
updateBy: '',
|
|
detailList: []
|
|
}
|
|
},
|
|
getList () {
|
|
this.loading = true
|
|
const params = { ...this.searchData, page: this.pageIndex, limit: this.pageSize }
|
|
searchTemplateList(params).then(({ data }) => {
|
|
if (data && (data.code === 0 || data.code === '0') && data.page) {
|
|
this.dataList = data.page.list || []
|
|
this.totalPage = data.page.totalCount || 0
|
|
} else {
|
|
this.dataList = []
|
|
this.totalPage = 0
|
|
}
|
|
}).catch(() => { this.dataList = []; this.totalPage = 0 })
|
|
.finally(() => { this.loading = false })
|
|
},
|
|
sizeChangeHandle (v) { this.pageSize = v; this.pageIndex = 1; this.getList() },
|
|
currentChangeHandle (v) { this.pageIndex = v; this.getList() },
|
|
openDialog (row) {
|
|
if (row) {
|
|
this.dialogTitle = '编辑维修技能模板'
|
|
this.editMode = true
|
|
this.form = { ...row, updateBy: this.$store.state.user.name, detailList: [] }
|
|
this.loadDetails(row.templateCode)
|
|
} else {
|
|
this.dialogTitle = '新增维修技能模板'
|
|
this.editMode = false
|
|
this.form = this.emptyForm()
|
|
}
|
|
this.dialogVisible = true
|
|
},
|
|
loadDetails (templateCode) {
|
|
getTemplateDetails({ templateCode, site: this.$store.state.user.site }).then(({ data }) => {
|
|
if (data && (data.code === 0 || data.code === '0')) {
|
|
this.form.detailList = data.obj || []
|
|
} else {
|
|
this.form.detailList = []
|
|
}
|
|
}).catch(() => { this.form.detailList = [] })
|
|
},
|
|
removeDetail (i) { this.form.detailList.splice(i, 1) },
|
|
|
|
// ===== 明细选择 =====
|
|
openPicker () {
|
|
this.pickerVisible = true
|
|
this.pickerQuery = { skillName: '' }
|
|
this.picked = []
|
|
this.loadCandidates()
|
|
},
|
|
loadCandidates () {
|
|
this.pickerLoading = true
|
|
const params = { site: this.$store.state.user.site, skillName: this.pickerQuery.skillName, status: 'Y', page: 1, limit: 1000 }
|
|
searchContentList(params).then(({ data }) => {
|
|
if (data && (data.code === 0 || data.code === '0') && data.page) {
|
|
const existing = new Set(this.form.detailList.map(d => d.skillContentId))
|
|
this.candidateList = (data.page.list || []).filter(s => !existing.has(s.skillCode))
|
|
} else {
|
|
this.candidateList = []
|
|
}
|
|
}).catch(() => { this.candidateList = [] })
|
|
.finally(() => { this.pickerLoading = false })
|
|
},
|
|
onPick (val) { this.picked = val },
|
|
confirmPick () {
|
|
if (!this.picked.length) { this.$message.warning('请选择明细'); return }
|
|
this.picked.forEach(p => {
|
|
this.form.detailList.push({
|
|
skillContentId: p.skillCode,
|
|
skillCode: p.skillCode,
|
|
skillName: p.skillName,
|
|
maxScore: p.maxScore
|
|
})
|
|
})
|
|
this.pickerVisible = false
|
|
},
|
|
|
|
validate () {
|
|
if (!this.form.templateCode) { this.$message.warning('模板编码不能为空'); return false }
|
|
if (!this.form.templateName) { this.$message.warning('模板名称不能为空'); return false }
|
|
if (!this.form.detailList.length) { this.$message.warning('请至少添加一条维修明细'); return false }
|
|
return true
|
|
},
|
|
submitForm () {
|
|
if (!this.validate()) return
|
|
this.submitLoading = true
|
|
const payload = { ...this.form, site: this.$store.state.user.site }
|
|
payload.detailList = (this.form.detailList || []).map((d, idx) => ({
|
|
skillContentId: d.skillContentId,
|
|
seq: d.seq != null ? d.seq : idx
|
|
}))
|
|
const api = this.editMode ? updateTemplate : createTemplate
|
|
api(payload).then(({ data }) => {
|
|
if (data && (data.code === 0 || data.code === '0')) {
|
|
this.$message.success('保存成功')
|
|
this.dialogVisible = false
|
|
this.getList()
|
|
} else {
|
|
this.$message.error((data && data.msg) || '保存失败')
|
|
}
|
|
}).catch(e => this.$message.error('保存失败: ' + e.message))
|
|
.finally(() => { this.submitLoading = false })
|
|
},
|
|
removeRow (row) {
|
|
this.$confirm('确认删除模板: ' + row.templateName + ' ?', '提示', { type: 'warning' }).then(() => {
|
|
deleteTemplate({ templateCode: row.templateCode, site: this.$store.state.user.site }).then(({ data }) => {
|
|
if (data && (data.code === 0 || data.code === '0')) {
|
|
this.$message.success('删除成功')
|
|
this.getList()
|
|
} else {
|
|
this.$message.error((data && data.msg) || '删除失败')
|
|
}
|
|
}).catch(e => this.$message.error('删除失败: ' + e.message))
|
|
}).catch(() => {})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.rs-search-form { margin-top: 0; }
|
|
.rs-form { margin-top: -5px; }
|
|
.criteria-header { display: flex; align-items: center; justify-content: space-between; font-weight: 600; padding: 6px; margin-top: 50px; background: #f5f7fa; border: 1px solid #ebeef5; border-bottom: none; }
|
|
.criteria-header button { margin-left: 8px; }
|
|
.detail-table /deep/ .cell { height: auto; line-height: 1.5; overflow: visible; }
|
|
/* 列表状态列：覆盖全局固定高度，避免 el-tag 被裁切 */
|
|
.el-table /deep/ .status-col .cell { height: auto; line-height: 1.5; overflow: visible; }
|
|
</style>
|