285 lines
10 KiB
Vue
285 lines
10 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('enter_code'))"
|
|
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('enter_name'))"
|
|
clearable
|
|
style="width:200px"
|
|
@keyup.enter.native="onSearch"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item :label="$t(key('area'))">
|
|
<el-select
|
|
v-model="search.area_id"
|
|
:placeholder="$t(key('select_area'))"
|
|
clearable
|
|
filterable
|
|
style="width:200px"
|
|
@change="onSearch"
|
|
>
|
|
<el-option
|
|
v-for="item in areaOptions"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
</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/production-line"
|
|
:help-text="$t(ckey('help'))"
|
|
auto-height
|
|
@page-change="onPageChange"
|
|
@selection-change="onSelect"
|
|
>
|
|
</page-table>
|
|
|
|
<page-dialog-form
|
|
ref="dialogForm"
|
|
:visible.sync="dialogVisible"
|
|
:title="dialogTitle"
|
|
:width="'35%'"
|
|
:form-cols="dialogFormCols"
|
|
:form-data="formData"
|
|
:rules="rules"
|
|
:label-width="'100px'"
|
|
: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 {
|
|
getProductionLineList,
|
|
createProductionLine,
|
|
editProductionLine,
|
|
deleteProductionLine,
|
|
exportProductionLineTask
|
|
} from '@/api/production-master-data/production-line'
|
|
import { getFactoryAreaALL } from '@/api/production-master-data/factory-area'
|
|
import PageTable from '@/components/page-table'
|
|
import PageDialogForm from '@/components/page-dialog-form'
|
|
|
|
export default {
|
|
name: 'production-master-data-production-line',
|
|
components: { PageTable, PageDialogForm },
|
|
mixins: [i18nMixin('page.production_master_data.factory_model.production_line')],
|
|
data () {
|
|
return {
|
|
loading: false,
|
|
submitting: false,
|
|
tableData: [],
|
|
selectedRows: [],
|
|
dialogVisible: false,
|
|
dialogTitle: '',
|
|
editId: '',
|
|
handleType: 'create',
|
|
search: { code: '', name: '', area_id: '' },
|
|
pagination: { current: 1, size: 10, total: 0 },
|
|
areaOptions: [],
|
|
formData: { code: '', name: '', area_id: '', remark: '' },
|
|
rules: {
|
|
code: [
|
|
{ required: true, message: this.key('enter_code'), trigger: 'blur' },
|
|
{ min: 1, max: 100, message: this.key('length_1_100'), trigger: 'blur' }
|
|
],
|
|
name: [
|
|
{ required: true, message: this.key('enter_name'), trigger: 'blur' },
|
|
{ min: 1, max: 100, message: this.key('length_1_100'), trigger: 'blur' }
|
|
],
|
|
area_id: [
|
|
{ required: true, message: this.key('select_area'), trigger: 'change' }
|
|
],
|
|
remark: [
|
|
{ max: 500, message: this.key('remark_max_500'), trigger: 'blur' }
|
|
]
|
|
},
|
|
columns: [],
|
|
toolbarButtons: [],
|
|
rowButtons: [],
|
|
baseFormCols: [
|
|
[{ type: 'input', prop: 'code', label: this.key('code'), placeholder: this.key('enter_code'), clearable: true, style: { width: '90%' } }],
|
|
[{ type: 'input', prop: 'name', label: this.key('name'), placeholder: this.key('enter_name'), clearable: true, style: { width: '90%' } }],
|
|
[{ type: 'select', prop: 'area_id', label: this.key('area'), placeholder: this.key('select_area'), clearable: true, filterable: true, style: { width: '90%' }, options: [] }],
|
|
[{ type: 'input', prop: 'remark', inputType: 'textarea', autosize: { minRows: 2, maxRows: 6 }, label: this.key('remark'), placeholder: this.key('enter_remark'), clearable: true, style: { width: '90%' } }]
|
|
]
|
|
}
|
|
},
|
|
computed: {
|
|
dialogFormCols () {
|
|
const cols = JSON.parse(JSON.stringify(this.baseFormCols))
|
|
cols[2][0].options = this.areaOptions
|
|
return cols
|
|
}
|
|
},
|
|
created () {
|
|
this.initAreaOptions()
|
|
this.columns = useTableColumns([
|
|
{ prop: 'sort', label: this.key('sort'), width: 80 },
|
|
{ prop: 'code', label: this.key('code'), minWidth: 120 },
|
|
{ prop: 'name', label: this.key('name'), minWidth: 120 },
|
|
{ prop: 'area_name', label: this.key('area_name'), minWidth: 120 },
|
|
{ prop: 'remark', label: this.key('remark') },
|
|
{ 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: '/production_configuration/factory_model/factory_line/create', onClick: this.openAdd },
|
|
{ key: 'export', label: this.key('export'), icon: 'el-icon-download', auth: '/production_configuration/factory_model/factory_line/export', onClick: this.handleExport }
|
|
],
|
|
row: [
|
|
{ key: 'edit', label: this.key('edit'), icon: 'el-icon-edit', auth: '/production_configuration/factory_model/factory_line/edit', onClick: this.openEdit },
|
|
{ key: 'delete', label: this.key('delete'), icon: 'el-icon-delete', color: 'danger', auth: '/production_configuration/factory_model/factory_line/delete', onClick: this.handleDelete }
|
|
]
|
|
}, this.$permission)
|
|
this.toolbarButtons = btns.toolbarButtons
|
|
this.rowButtons = btns.rowButtons
|
|
this.fetchData()
|
|
},
|
|
methods: {
|
|
normalizeResponse (res) {
|
|
const data = res && res.data !== undefined ? res.data : res
|
|
if (Array.isArray(data)) return { list: data, total: data.length }
|
|
if (data && Array.isArray(data.list)) return { list: data.list, total: Number(data.count || data.total || data.list.length) }
|
|
if (data && Array.isArray(data.data)) return { list: data.data, total: Number(data.count || data.total || data.data.length) }
|
|
if (data && data.data && Array.isArray(data.data.data)) return { list: data.data.data, total: Number(data.data.count || data.data.total || data.data.data.length) }
|
|
return { list: [], total: 0 }
|
|
},
|
|
async initAreaOptions () {
|
|
try {
|
|
const res = await getFactoryAreaALL()
|
|
const data = this.normalizeResponse(res).list
|
|
this.areaOptions = data.map(item => ({ value: item.area_id || item.id, label: item.name }))
|
|
} catch { /* 忽略加载失败 */ }
|
|
},
|
|
async fetchData () {
|
|
this.loading = true
|
|
try {
|
|
const res = await getProductionLineList({ ...this.search, page_no: this.pagination.current, page_size: this.pagination.size })
|
|
const data = this.normalizeResponse(res)
|
|
this.tableData = data.list
|
|
this.pagination.total = data.total
|
|
} finally {
|
|
this.loading = false
|
|
}
|
|
},
|
|
onSearch () {
|
|
this.pagination.current = 1
|
|
this.fetchData()
|
|
},
|
|
onReset () {
|
|
this.search = { code: '', name: '', area_id: '' }
|
|
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: '', area_id: '', remark: '' }
|
|
this.editId = ''
|
|
},
|
|
openAdd () {
|
|
this.handleType = 'create'
|
|
this.dialogTitle = this.key('add_title')
|
|
this.$nextTick(() => {
|
|
this.$refs.dialogForm && this.$refs.dialogForm.reset()
|
|
this.resetForm()
|
|
this.dialogVisible = true
|
|
})
|
|
},
|
|
openEdit (row) {
|
|
this.handleType = 'edit'
|
|
this.dialogTitle = this.key('edit_title')
|
|
this.editId = row.id
|
|
this.formData = { code: row.code, name: row.name, area_id: row.area_id, remark: row.remark || '' }
|
|
this.dialogVisible = true
|
|
},
|
|
async onDialogSubmit () {
|
|
this.submitting = true
|
|
try {
|
|
if (this.handleType === 'create') await createProductionLine(this.formData)
|
|
else await editProductionLine({ ...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 confirmAction (message, action) {
|
|
try {
|
|
await this.$confirm(this.$t(message), this.$t(this.key('tip')), { type: 'warning' })
|
|
} catch {
|
|
return false
|
|
}
|
|
await action()
|
|
return true
|
|
},
|
|
async handleDelete (row) {
|
|
const ok = await this.confirmAction(this.key('confirm_delete'), () => deleteProductionLine({ id: [row.id] }))
|
|
if (!ok) return
|
|
this.$message.success(this.$t(this.key('operation_success')))
|
|
this.pagination.current = Math.min(this.pagination.current, Math.ceil((this.pagination.total - 1) / this.pagination.size) || 1)
|
|
this.fetchData()
|
|
},
|
|
async handleExport () {
|
|
const ok = await this.confirmAction(this.key('confirm_export'), () => exportProductionLineTask({ ...this.search }))
|
|
if (ok) this.$message.success(this.$t(this.key('operation_success')))
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.search-bar { padding: 10px 0; }
|
|
/deep/ .el-form-item--mini.el-form-item { margin-bottom: 4px; }
|
|
</style>
|