314 lines
9.0 KiB
Vue
314 lines
9.0 KiB
Vue
|
<template>
|
||
|
|
<d2-container>
|
||
|
|
<template #header>
|
||
|
|
<div class="search-bar">
|
||
|
|
<el-form :inline="true" size="mini">
|
||
|
|
<el-form-item :label="$t(key('code'))">
|
||
|
|
<el-input
|
||
|
|
v-model="search.code"
|
||
|
|
:placeholder="$t(key('please_enter'))"
|
||
|
|
clearable
|
||
|
|
style="width:200px"
|
||
|
|
@keyup.enter.native="onSearch"
|
||
|
|
/>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item :label="$t(key('name'))">
|
||
|
|
<el-input
|
||
|
|
v-model="search.name"
|
||
|
|
:placeholder="$t(key('please_enter'))"
|
||
|
|
clearable
|
||
|
|
style="width:200px"
|
||
|
|
@keyup.enter.native="onSearch"
|
||
|
|
/>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item>
|
||
|
|
<el-button type="primary" icon="el-icon-search" @click="onSearch">
|
||
|
|
{{ $t(key('search')) }}
|
||
|
|
</el-button>
|
||
|
|
<el-button icon="el-icon-refresh" @click="onReset">
|
||
|
|
{{ $t(key('reset')) }}
|
||
|
|
</el-button>
|
||
|
|
</el-form-item>
|
||
|
|
</el-form>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<page-table
|
||
|
|
ref="pageTable"
|
||
|
|
:columns="columns"
|
||
|
|
:data="tableData"
|
||
|
|
:loading="loading"
|
||
|
|
:toolbar-buttons="toolbarButtons"
|
||
|
|
:row-buttons="rowButtons"
|
||
|
|
:pagination="pagination"
|
||
|
|
help-url="/help/quality-management/aql-standards"
|
||
|
|
:help-text="$t(ckey('help'))"
|
||
|
|
auto-height
|
||
|
|
@page-change="onPageChange"
|
||
|
|
@selection-change="onSelect"
|
||
|
|
/>
|
||
|
|
|
||
|
|
<page-dialog-form
|
||
|
|
ref="dialogForm"
|
||
|
|
:visible.sync="dialogVisible"
|
||
|
|
:title="dialogTitle"
|
||
|
|
width="520px"
|
||
|
|
:form-cols="formCols"
|
||
|
|
:form-data="formData"
|
||
|
|
:rules="rules"
|
||
|
|
label-width="120px"
|
||
|
|
:submitting="submitting"
|
||
|
|
:confirm-text="key('confirm')"
|
||
|
|
:cancel-text="key('cancel')"
|
||
|
|
@submit="onDialogSubmit"
|
||
|
|
@close="onDialogClose"
|
||
|
|
/>
|
||
|
|
</d2-container>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { useTableColumns } from '@/composables/useTableColumns'
|
||
|
|
import { useTableButtons } from '@/composables/useTableButtons'
|
||
|
|
import { i18nMixin } from '@/composables/useI18n'
|
||
|
|
import { confirmMixin } from '@/composables/useConfirmHandle'
|
||
|
|
import {
|
||
|
|
fetchAqlStandardsList,
|
||
|
|
createAqlStandards,
|
||
|
|
editAqlStandards,
|
||
|
|
deleteAqlStandards
|
||
|
|
} from '@/api/quality-management/aql-standards'
|
||
|
|
import PageTable from '@/components/page-table'
|
||
|
|
import PageDialogForm from '@/components/page-dialog-form'
|
||
|
|
|
||
|
|
function readList (res) {
|
||
|
|
if (Array.isArray(res)) return { list: res, total: res.length }
|
||
|
|
const data = res && res.data ? res.data : res
|
||
|
|
if (Array.isArray(data)) return { list: data, total: data.length }
|
||
|
|
const list = (data && (data.list || data.rows || data.records || data.data)) || []
|
||
|
|
const total = data && (data.total || data.count || list.length)
|
||
|
|
return { list: Array.isArray(list) ? list : [], total: Number(total) || 0 }
|
||
|
|
}
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'quality-management-aql-standards',
|
||
|
|
components: { PageTable, PageDialogForm },
|
||
|
|
mixins: [i18nMixin('page.quality_management.aql_standards'), confirmMixin],
|
||
|
|
data () {
|
||
|
|
return {
|
||
|
|
loading: false,
|
||
|
|
submitting: false,
|
||
|
|
tableData: [],
|
||
|
|
selectedRows: [],
|
||
|
|
dialogVisible: false,
|
||
|
|
dialogTitle: '',
|
||
|
|
editId: '',
|
||
|
|
handleType: 'create',
|
||
|
|
search: {"code":"","name":""},
|
||
|
|
pagination: { current: 1, size: 10, total: 0 },
|
||
|
|
formData: {"code":"","name":"","aql_value":"","sampling_plan_id":"","note":""},
|
||
|
|
rules: {
|
||
|
|
code: [
|
||
|
|
{ required: true, message: this.key('required'), trigger: 'blur' }
|
||
|
|
],
|
||
|
|
name: [
|
||
|
|
{ required: true, message: this.key('required'), trigger: 'blur' }
|
||
|
|
]
|
||
|
|
},
|
||
|
|
columns: [],
|
||
|
|
toolbarButtons: [],
|
||
|
|
rowButtons: [],
|
||
|
|
formCols: [
|
||
|
|
[
|
||
|
|
{
|
||
|
|
type: 'input',
|
||
|
|
prop: 'code',
|
||
|
|
label: this.key('code'),
|
||
|
|
placeholder: this.key('please_enter'),
|
||
|
|
clearable: true,
|
||
|
|
style: { width: '90%' }
|
||
|
|
}
|
||
|
|
],
|
||
|
|
[
|
||
|
|
{
|
||
|
|
type: 'input',
|
||
|
|
prop: 'name',
|
||
|
|
label: this.key('name'),
|
||
|
|
placeholder: this.key('please_enter'),
|
||
|
|
clearable: true,
|
||
|
|
style: { width: '90%' }
|
||
|
|
}
|
||
|
|
],
|
||
|
|
[
|
||
|
|
{
|
||
|
|
type: 'input',
|
||
|
|
prop: 'aql_value',
|
||
|
|
label: this.key('aql_value'),
|
||
|
|
placeholder: this.key('please_enter'),
|
||
|
|
clearable: true,
|
||
|
|
style: { width: '90%' }
|
||
|
|
}
|
||
|
|
],
|
||
|
|
[
|
||
|
|
{
|
||
|
|
type: 'input',
|
||
|
|
prop: 'sampling_plan_id',
|
||
|
|
label: this.key('sampling_plan_id'),
|
||
|
|
placeholder: this.key('please_enter'),
|
||
|
|
clearable: true,
|
||
|
|
style: { width: '90%' }
|
||
|
|
}
|
||
|
|
],
|
||
|
|
[
|
||
|
|
{
|
||
|
|
type: 'input',
|
||
|
|
prop: 'note',
|
||
|
|
label: this.key('remark'),
|
||
|
|
placeholder: this.key('please_enter'),
|
||
|
|
clearable: true,
|
||
|
|
style: { width: '90%' }
|
||
|
|
}
|
||
|
|
]
|
||
|
|
]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created () {
|
||
|
|
this.columns = useTableColumns([
|
||
|
|
{ prop: 'code', label: this.key('code'), minWidth: 130 },
|
||
|
|
{ prop: 'name', label: this.key('name'), minWidth: 130 },
|
||
|
|
{ prop: 'aql_value', label: this.key('aql_value'), minWidth: 130 },
|
||
|
|
{ prop: 'sampling_plan_name', label: this.key('sampling_plan_name'), minWidth: 170 },
|
||
|
|
{ prop: 'note', label: this.key('remark'), minWidth: 130 },
|
||
|
|
{ prop: 'created_at', label: this.key('created_at'), minWidth: 130 },
|
||
|
|
{ prop: '_actions', label: this.key('operation'), width: 160, fixed: 'right' }
|
||
|
|
])
|
||
|
|
const btns = useTableButtons({
|
||
|
|
toolbar: [
|
||
|
|
{
|
||
|
|
key: 'add',
|
||
|
|
label: this.key('add'),
|
||
|
|
icon: 'el-icon-plus',
|
||
|
|
type: 'primary',
|
||
|
|
auth: '/quality_control/xqc/aql_config/create',
|
||
|
|
onClick: this.openAdd
|
||
|
|
}
|
||
|
|
],
|
||
|
|
row: [
|
||
|
|
{
|
||
|
|
key: 'edit',
|
||
|
|
label: this.key('edit'),
|
||
|
|
icon: 'el-icon-edit',
|
||
|
|
auth: '/quality_control/xqc/aql_config/edit',
|
||
|
|
onClick: this.openEdit
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: 'delete',
|
||
|
|
label: this.key('delete'),
|
||
|
|
icon: 'el-icon-delete',
|
||
|
|
color: 'danger',
|
||
|
|
auth: '/quality_control/xqc/aql_config/delete',
|
||
|
|
onClick: this.handleDelete
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}, this.$permission)
|
||
|
|
this.toolbarButtons = btns.toolbarButtons
|
||
|
|
this.rowButtons = btns.rowButtons
|
||
|
|
this.fetchData()
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
async fetchData () {
|
||
|
|
this.loading = true
|
||
|
|
try {
|
||
|
|
const params = {
|
||
|
|
...this.search,
|
||
|
|
page_no: this.pagination.current,
|
||
|
|
page_size: this.pagination.size,
|
||
|
|
page: this.pagination.current,
|
||
|
|
size: this.pagination.size
|
||
|
|
}
|
||
|
|
const res = await fetchAqlStandardsList(params)
|
||
|
|
const { list, total } = readList(res)
|
||
|
|
this.tableData = list
|
||
|
|
this.pagination.total = total
|
||
|
|
} finally {
|
||
|
|
this.loading = false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onSearch () {
|
||
|
|
this.pagination.current = 1
|
||
|
|
this.fetchData()
|
||
|
|
},
|
||
|
|
onReset () {
|
||
|
|
this.search = {"code":"","name":""}
|
||
|
|
this.pagination.current = 1
|
||
|
|
this.fetchData()
|
||
|
|
},
|
||
|
|
onPageChange (page) {
|
||
|
|
this.pagination.current = page.current
|
||
|
|
this.pagination.size = page.size
|
||
|
|
this.fetchData()
|
||
|
|
},
|
||
|
|
onSelect (rows) {
|
||
|
|
this.selectedRows = rows
|
||
|
|
},
|
||
|
|
resetForm () {
|
||
|
|
this.formData = {"code":"","name":"","aql_value":"","sampling_plan_id":"","note":""}
|
||
|
|
this.editId = ''
|
||
|
|
},
|
||
|
|
openAdd () {
|
||
|
|
this.handleType = 'create'
|
||
|
|
this.dialogTitle = this.key('add_title')
|
||
|
|
this.resetForm()
|
||
|
|
this.dialogVisible = true
|
||
|
|
},
|
||
|
|
openEdit (row) {
|
||
|
|
this.handleType = 'edit'
|
||
|
|
this.dialogTitle = this.key('edit_title')
|
||
|
|
this.editId = row.id
|
||
|
|
this.formData = { ...{"code":"","name":"","aql_value":"","sampling_plan_id":"","note":""}, ...row }
|
||
|
|
this.dialogVisible = true
|
||
|
|
},
|
||
|
|
async onDialogSubmit () {
|
||
|
|
this.submitting = true
|
||
|
|
try {
|
||
|
|
if (this.handleType === 'create') {
|
||
|
|
await createAqlStandards(this.formData)
|
||
|
|
} else {
|
||
|
|
await editAqlStandards({ ...this.formData, id: this.editId })
|
||
|
|
}
|
||
|
|
this.$message.success(this.$t(this.key('operation_success')))
|
||
|
|
this.dialogVisible = false
|
||
|
|
this.fetchData()
|
||
|
|
} finally {
|
||
|
|
this.submitting = false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onDialogClose () {
|
||
|
|
this.resetForm()
|
||
|
|
},
|
||
|
|
async handleDelete (row) {
|
||
|
|
const cancelled = await this.$confirmAction({
|
||
|
|
message: this.key('confirm_delete'),
|
||
|
|
title: this.key('tip')
|
||
|
|
}, () => deleteAqlStandards({ id: [row.id], ids: [row.id], inspection_order_no: row.inspection_order_no }))
|
||
|
|
if (cancelled) return
|
||
|
|
this.$message.success(this.$t(this.key('operation_success')))
|
||
|
|
this.fetchData()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.search-bar {
|
||
|
|
padding: 10px 0;
|
||
|
|
}
|
||
|
|
.spc-chart-panel {
|
||
|
|
height: 320px;
|
||
|
|
margin-bottom: 12px;
|
||
|
|
border: 1px solid #ebeef5;
|
||
|
|
}
|
||
|
|
/deep/ .el-form-item--mini.el-form-item {
|
||
|
|
margin-bottom: 4px;
|
||
|
|
}
|
||
|
|
</style>
|