225 lines
6.2 KiB
Vue
225 lines
6.2 KiB
Vue
<template>
|
|
<el-container>
|
|
<el-header>
|
|
<div class="left-panel">
|
|
<!-- v-auth="'defect.create'" -->
|
|
<el-button type="primary" icon="el-icon-plus" @click="defectAdd" v-auth="'defect.create'"></el-button>
|
|
</div>
|
|
<div class="right-panel">
|
|
<el-input v-model="query.search" placeholder="名称" clearable @keyup.enter="handleQuery"></el-input>
|
|
<el-button type="primary" icon="el-icon-search" @click="handleQuery"></el-button>
|
|
</div>
|
|
</el-header>
|
|
<el-main class="nopadding">
|
|
<scTable ref="table" :apiObj="apiObj" row-key="id">
|
|
<el-table-column label="#" type="index"></el-table-column>
|
|
<el-table-column label="名称" prop="name"></el-table-column>
|
|
<el-table-column label="标识" prop="code"></el-table-column>
|
|
<el-table-column label="分类" prop="cate">
|
|
<template #default="scope">
|
|
<el-tag type="success">{{ scope.row.cate}}</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="不合格分类" prop="okcate">
|
|
<template #default="scope">
|
|
<el-tag :type="typeCpmpute(scope.row.okcate)" effect="plain">{{ okcate_[scope.row.okcate] }}</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="备注" prop="note"></el-table-column>
|
|
<el-table-column label="操作" fixed="right" align="center" width="140">
|
|
<template #default="scope">
|
|
<el-button link size="small" @click="defectEdit(scope.row, scope.$index)" v-auth="'role.update'" type="primary">编辑</el-button>
|
|
<el-divider direction="vertical"></el-divider>
|
|
<el-popconfirm title="确定删除吗？" @confirm="defectDel(scope.row, scope.$index)">
|
|
<template #reference>
|
|
<el-button link size="small" v-auth="'defect.delete'" type="danger">删除</el-button>
|
|
</template>
|
|
</el-popconfirm>
|
|
</template>
|
|
</el-table-column>
|
|
</scTable>
|
|
</el-main>
|
|
</el-container>
|
|
<el-dialog :title="titleMap[type]" v-model="limitedVisible" :width="600">
|
|
<el-form :model="addForm" :rules="rules" ref="addForm" label-width="90px" label-position="left">
|
|
<el-form-item label="名称" prop="name">
|
|
<el-input v-model="addForm.name" clearable></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="标识" prop="code">
|
|
<el-input v-model="addForm.code" clearable></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="分类" prop="cate">
|
|
<el-select style="width: 100%;"
|
|
v-model="addForm.cate"
|
|
placeholder="请选择">
|
|
<el-option v-for="item in cateOptions"
|
|
:key="item"
|
|
:label="item"
|
|
:value="item"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="不合格分类">
|
|
<el-select style="width: 100%;"
|
|
v-model="addForm.okcate"
|
|
placeholder="请选择">
|
|
<el-option v-for="item in options"
|
|
:key="item.id"
|
|
:label="item.label"
|
|
:value="item.id"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="备注">
|
|
<el-input v-model="addForm.note" clearable></el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
<template #footer>
|
|
<el-button @click="limitedVisible=false" >取 消</el-button>
|
|
<el-button v-if="type!=='show'" type="primary" :loading="isSaving" @click="submitHandle()">保 存</el-button>
|
|
</template>
|
|
</el-dialog>
|
|
</template>
|
|
<script>
|
|
const defaultForm = {
|
|
id:"",
|
|
name: "",
|
|
code: "",
|
|
cate: "尺寸",
|
|
note: "",
|
|
okcate:10,
|
|
};
|
|
export default {
|
|
name: 'dept',
|
|
data() {
|
|
return {
|
|
apiObj: this.$API.qm.defect.list,
|
|
query: {
|
|
search:''
|
|
},
|
|
isSaving: false,
|
|
limitedVisible : false,
|
|
type: "add",
|
|
titleMap: {
|
|
add: '新增',
|
|
edit: '编辑',
|
|
show: '查看'
|
|
},
|
|
options: [
|
|
{id:10,label: '合格'},
|
|
{id:20,label: 'B类合格'},
|
|
{id:30,label: '不合格'},
|
|
],
|
|
cateOptions: ['尺寸', '外观','内质'],
|
|
okcate_: {
|
|
10: '合格',
|
|
20: 'B类合格',
|
|
30: '不合格',
|
|
},
|
|
//表单数据
|
|
addForm: defaultForm,
|
|
//验证规则
|
|
rules: {
|
|
name: [
|
|
{required: true, message: '请输入名称'}
|
|
],
|
|
code: [
|
|
{required: true, message: '请输入标识'}
|
|
],
|
|
cate: [
|
|
{required: true, message: '请输入分类'}
|
|
],
|
|
},
|
|
}
|
|
},
|
|
methods: {
|
|
typeCpmpute(cate){
|
|
if(cate==10){
|
|
return 'success'
|
|
}else if(cate==20){
|
|
return 'warning'
|
|
}else if(cate==30){
|
|
return 'danger'
|
|
}
|
|
},
|
|
//添加
|
|
defectAdd(){
|
|
this.type = "add";
|
|
// 清空表单数据
|
|
this.addForm.id="";
|
|
this.addForm.name="";
|
|
this.addForm.code="";
|
|
this.addForm.note="";
|
|
this.addForm.cate="尺寸";
|
|
this.addForm.okcate=10;
|
|
this.limitedVisible = true;
|
|
// 清除验证状态
|
|
// this.$refs.addForm.clearValidate();
|
|
},
|
|
submitHandle(){
|
|
let that = this;
|
|
this.$refs.addForm.validate( (valid) => {
|
|
if (valid) {
|
|
this.isSaveing = true;
|
|
let res;
|
|
if(this.type==='add'){
|
|
this.$API.qm.defect.create.req(that.addForm).then(res=>{
|
|
this.isSaveing = false;
|
|
this.limitedVisible = false;
|
|
this.$refs.table.refresh();
|
|
}).catch(e=>{this.isSaveing = false;})
|
|
}else{
|
|
this.$API.qm.defect.update.req(that.addForm.id,that.addForm).then(res=>{
|
|
this.isSaveing = false;
|
|
this.limitedVisible = false;
|
|
this.$refs.table.refresh();
|
|
}).catch(e=>{this.isSaveing = false;})
|
|
}
|
|
}
|
|
})
|
|
},
|
|
|
|
//编辑
|
|
defectEdit(row){
|
|
this.type='edit';
|
|
this.addForm.id=row.id;
|
|
this.addForm.name=row.name;
|
|
this.addForm.code=row.code;
|
|
this.addForm.cate=row.cate;
|
|
this.addForm.note=row.note;
|
|
this.addForm.okcate=row.okcate;
|
|
this.limitedVisible = true;
|
|
},
|
|
|
|
//删除
|
|
async defectDel(row){
|
|
var id = row.id;
|
|
var res = await this.$API.qm.defect.delete.req(id);
|
|
if(res.err_msg){
|
|
this.$message.error(res.err_msg)
|
|
}else{
|
|
this.$refs.table.refresh();
|
|
this.$message.success("删除成功")
|
|
}
|
|
},
|
|
//表格选择后回调事件
|
|
selectionChange(selection){
|
|
this.selection = selection;
|
|
},
|
|
//搜索
|
|
handleQuery(){
|
|
this.$refs.table.queryData(this.query)
|
|
},
|
|
//本地更新数据
|
|
handleSaveSuccess(data, type){
|
|
if(type=='add'){
|
|
this.$refs.table.refresh()
|
|
}else if(type=='edit'){
|
|
this.$refs.table.refresh()
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped></style>
|