|
|
<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>
|
