Merge branch 'master' of http://119.91.43.128:3001/sheng/mes-ui-d2
This commit is contained in:
@@ -0,0 +1,294 @@
|
||||
<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>
|
||||
<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/material-category"
|
||||
:help-text="$t(ckey('help'))"
|
||||
auto-height
|
||||
@page-change="onPageChange"
|
||||
@selection-change="onSelect"
|
||||
/>
|
||||
|
||||
<page-dialog-form
|
||||
ref="dialogForm"
|
||||
:visible.sync="dialogVisible"
|
||||
:title="dialogTitle"
|
||||
:width="'35%'"
|
||||
:form-cols="formCols"
|
||||
: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 { confirmMixin } from '@/composables/useConfirmHandle'
|
||||
import {
|
||||
getMaterialCategoryList,
|
||||
createMaterialCategory,
|
||||
editMaterialCategory,
|
||||
deleteMaterialCategory
|
||||
} from '@/api/production-master-data/material-category'
|
||||
import PageTable from '@/components/page-table'
|
||||
import PageDialogForm from '@/components/page-dialog-form'
|
||||
|
||||
export default {
|
||||
name: 'production-master-data-material-category',
|
||||
components: { PageTable, PageDialogForm },
|
||||
mixins: [i18nMixin('page.production_master_data.material_model.material_category'), 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: '', remark: '' },
|
||||
rules: {
|
||||
code: [
|
||||
{ required: true, message: this.key('enter_code'), trigger: 'blur' },
|
||||
{ min: 1, max: 45, message: this.key('remark_length'), trigger: 'blur' }
|
||||
],
|
||||
name: [
|
||||
{ required: true, message: this.key('enter_name'), trigger: 'blur' },
|
||||
{ min: 1, max: 45, message: this.key('remark_length'), trigger: 'blur' }
|
||||
]
|
||||
},
|
||||
columns: [],
|
||||
toolbarButtons: [],
|
||||
rowButtons: [],
|
||||
formCols: [
|
||||
[
|
||||
{
|
||||
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: 'input',
|
||||
prop: 'remark',
|
||||
inputType: 'textarea',
|
||||
autosize: { minRows: 2, maxRows: 6 },
|
||||
label: this.key('remark'),
|
||||
placeholder: this.key('enter_remark'),
|
||||
clearable: true,
|
||||
style: { width: '90%' }
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
},
|
||||
created () {
|
||||
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: 'remark', label: this.key('remark') },
|
||||
{ prop: 'create_time', label: this.key('create_time'), minWidth: 160 },
|
||||
{ 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/matetial_model/matetial_category/create',
|
||||
onClick: this.openAdd
|
||||
}
|
||||
],
|
||||
row: [
|
||||
{
|
||||
key: 'edit',
|
||||
label: this.key('edit'),
|
||||
icon: 'el-icon-edit',
|
||||
auth: '/production_configuration/matetial_model/matetial_category/edit',
|
||||
onClick: this.openEdit
|
||||
},
|
||||
{
|
||||
key: 'delete',
|
||||
label: this.key('delete'),
|
||||
icon: 'el-icon-delete',
|
||||
color: 'danger',
|
||||
auth: '/production_configuration/matetial_model/matetial_category/delete',
|
||||
onClick: this.handleDelete
|
||||
}
|
||||
]
|
||||
}, this.$permission)
|
||||
this.toolbarButtons = btns.toolbarButtons
|
||||
this.rowButtons = btns.rowButtons
|
||||
this.fetchData()
|
||||
},
|
||||
methods: {
|
||||
async fetchData () {
|
||||
this.loading = true
|
||||
try {
|
||||
const res = await getMaterialCategoryList({
|
||||
...this.search,
|
||||
page_no: this.pagination.current,
|
||||
page_size: this.pagination.size
|
||||
})
|
||||
const list = Array.isArray(res) ? res : (res.data || [])
|
||||
const total = Array.isArray(res) ? res.length : (res.count || 0)
|
||||
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: '', 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,
|
||||
remark: row.remark || ''
|
||||
}
|
||||
this.dialogVisible = true
|
||||
},
|
||||
async onDialogSubmit () {
|
||||
this.submitting = true
|
||||
try {
|
||||
if (this.handleType === 'create') {
|
||||
await createMaterialCategory(this.formData)
|
||||
} else {
|
||||
await editMaterialCategory({ ...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')
|
||||
},
|
||||
() => deleteMaterialCategory({ id: [row.id] })
|
||||
)
|
||||
if (cancelled) 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()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.search-bar {
|
||||
padding: 10px 0;
|
||||
}
|
||||
/deep/ .el-form-item--mini.el-form-item {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,401 @@
|
||||
<template>
|
||||
<d2-container>
|
||||
<template #header>
|
||||
<div class="search-bar">
|
||||
<el-form :inline="true" size="mini">
|
||||
<el-form-item :label="$t(key('material_code'))">
|
||||
<el-input
|
||||
v-model="search.code"
|
||||
:placeholder="$t(key('enter_material_code'))"
|
||||
clearable
|
||||
style="width:200px"
|
||||
@keyup.enter.native="onSearch"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t(key('material_name'))">
|
||||
<el-input
|
||||
v-model="search.name"
|
||||
:placeholder="$t(key('enter_material_name'))"
|
||||
clearable
|
||||
style="width:200px"
|
||||
@keyup.enter.native="onSearch"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t(key('material_category'))">
|
||||
<el-select
|
||||
v-model="search.bom_source_category_id"
|
||||
:placeholder="$t(key('select_material_category'))"
|
||||
clearable
|
||||
filterable
|
||||
style="width:200px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in categoryOptions"
|
||||
: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/material-master"
|
||||
:help-text="$t(ckey('help'))"
|
||||
auto-height
|
||||
@page-change="onPageChange"
|
||||
@selection-change="onSelect"
|
||||
>
|
||||
<template #col-remark="{ row }">
|
||||
<el-popover
|
||||
v-if="row.remark && row.remark.length > 20"
|
||||
placement="top-start"
|
||||
width="300"
|
||||
trigger="hover"
|
||||
:content="row.remark"
|
||||
>
|
||||
<span slot="reference" style="cursor: pointer;">{{ row.remark.substr(0, 20) }}...</span>
|
||||
</el-popover>
|
||||
<span v-else>{{ row.remark }}</span>
|
||||
</template>
|
||||
</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 { confirmMixin } from '@/composables/useConfirmHandle'
|
||||
import {
|
||||
getMaterialMasterList,
|
||||
createMaterialMaster,
|
||||
editMaterialMaster,
|
||||
deleteMaterialMaster,
|
||||
batchDeleteMaterialMaster
|
||||
} from '@/api/production-master-data/material-master'
|
||||
import { getMaterialCategoryAll } from '@/api/production-master-data/material-category'
|
||||
import PageTable from '@/components/page-table'
|
||||
import PageDialogForm from '@/components/page-dialog-form'
|
||||
|
||||
export default {
|
||||
name: 'production-master-data-material-master',
|
||||
components: { PageTable, PageDialogForm },
|
||||
mixins: [i18nMixin('page.production_master_data.material_model.material_master'), confirmMixin],
|
||||
data () {
|
||||
return {
|
||||
loading: false,
|
||||
submitting: false,
|
||||
tableData: [],
|
||||
selectedRows: [],
|
||||
dialogVisible: false,
|
||||
dialogTitle: '',
|
||||
editId: '',
|
||||
handleType: 'create',
|
||||
search: { code: '', name: '', bom_source_category_id: '' },
|
||||
pagination: { current: 1, size: 10, total: 0 },
|
||||
categoryOptions: [],
|
||||
formData: { code: '', name: '', bom_source_category_id: '', unit_id: '', remark: '' },
|
||||
rules: {
|
||||
code: [
|
||||
{ required: true, message: this.key('enter_material_code'), trigger: 'blur' },
|
||||
{ min: 1, max: 100, message: this.key('remark_length'), trigger: 'blur' }
|
||||
],
|
||||
name: [
|
||||
{ required: true, message: this.key('enter_material_name'), trigger: 'blur' },
|
||||
{ min: 1, max: 100, message: this.key('remark_length'), trigger: 'blur' }
|
||||
],
|
||||
bom_source_category_id: [
|
||||
{ required: true, message: this.key('select_material_category'), trigger: 'change' }
|
||||
]
|
||||
},
|
||||
columns: [],
|
||||
toolbarButtons: [],
|
||||
rowButtons: [],
|
||||
// 表单基础结构，单位字段预留（待 unit 模块迁移后接入下拉数据源）
|
||||
baseFormCols: [
|
||||
[
|
||||
{
|
||||
type: 'input',
|
||||
prop: 'code',
|
||||
label: this.key('material_code'),
|
||||
placeholder: this.key('enter_material_code'),
|
||||
clearable: true,
|
||||
style: { width: '90%' }
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
type: 'input',
|
||||
prop: 'name',
|
||||
label: this.key('material_name'),
|
||||
placeholder: this.key('enter_material_name'),
|
||||
clearable: true,
|
||||
style: { width: '90%' }
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
type: 'select',
|
||||
prop: 'bom_source_category_id',
|
||||
label: this.key('material_category'),
|
||||
placeholder: this.key('select_material_category'),
|
||||
clearable: true,
|
||||
filterable: true,
|
||||
style: { width: '90%' },
|
||||
options: []
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
type: 'input',
|
||||
prop: 'unit_id',
|
||||
label: this.key('unit'),
|
||||
placeholder: this.key('select_unit'),
|
||||
clearable: true,
|
||||
style: { width: '90%' }
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
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: {
|
||||
// 类别下拉数据通过 computed 注入，避免 JSON.parse(JSON.stringify) 深拷贝
|
||||
dialogFormCols () {
|
||||
return this.baseFormCols.map(row => row.map(item => {
|
||||
if (item.prop === 'bom_source_category_id') {
|
||||
return { ...item, options: this.categoryOptions }
|
||||
}
|
||||
return item
|
||||
}))
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.initCategoryOptions()
|
||||
this.columns = useTableColumns([
|
||||
{ prop: 'sort', label: this.key('sort'), width: 80 },
|
||||
{ prop: 'code', label: this.key('material_code'), minWidth: 120 },
|
||||
{ prop: 'name', label: this.key('material_name'), minWidth: 140 },
|
||||
{ prop: 'bom_source_category_name', label: this.key('material_category'), minWidth: 120 },
|
||||
{ prop: 'unit_name', label: this.key('unit'), minWidth: 100 },
|
||||
{ prop: 'remark', label: this.key('remark'), minWidth: 160, slot: true },
|
||||
{ prop: 'username', label: this.key('create_user'), minWidth: 100 },
|
||||
{ prop: 'create_time', label: this.key('create_time'), minWidth: 160 },
|
||||
{ prop: '_actions', label: this.key('operation'), width: 180, fixed: 'right' }
|
||||
])
|
||||
const btns = useTableButtons({
|
||||
toolbar: [
|
||||
{
|
||||
key: 'add',
|
||||
label: this.key('add'),
|
||||
icon: 'el-icon-plus',
|
||||
type: 'primary',
|
||||
auth: '/production_configuration/matetial_model/matetial_management/create',
|
||||
onClick: this.openAdd
|
||||
},
|
||||
{
|
||||
key: 'batch_delete',
|
||||
label: this.key('batch_delete'),
|
||||
icon: 'el-icon-delete',
|
||||
color: 'danger',
|
||||
auth: '/system_settings/matetial_model/matetial_management/batch-delete',
|
||||
onClick: this.handleBatchDelete
|
||||
}
|
||||
],
|
||||
row: [
|
||||
{
|
||||
key: 'edit',
|
||||
label: this.key('edit'),
|
||||
icon: 'el-icon-edit',
|
||||
auth: '/production_configuration/matetial_model/matetial_management/edit',
|
||||
onClick: this.openEdit
|
||||
},
|
||||
{
|
||||
key: 'delete',
|
||||
label: this.key('delete'),
|
||||
icon: 'el-icon-delete',
|
||||
color: 'danger',
|
||||
auth: '/production_configuration/matetial_model/matetial_management/delete',
|
||||
onClick: this.handleDelete
|
||||
}
|
||||
]
|
||||
}, this.$permission)
|
||||
this.toolbarButtons = btns.toolbarButtons
|
||||
this.rowButtons = btns.rowButtons
|
||||
this.fetchData()
|
||||
},
|
||||
methods: {
|
||||
async initCategoryOptions () {
|
||||
try {
|
||||
const res = await getMaterialCategoryAll()
|
||||
const data = Array.isArray(res) ? res : (res.data || [])
|
||||
this.categoryOptions = data.map(item => ({ value: item.id, label: item.name }))
|
||||
} catch { /* 类别下拉加载失败时，下拉为空即可，不影响主流程 */ }
|
||||
},
|
||||
async fetchData () {
|
||||
this.loading = true
|
||||
try {
|
||||
const res = await getMaterialMasterList({
|
||||
...this.search,
|
||||
page_no: this.pagination.current,
|
||||
page_size: this.pagination.size
|
||||
})
|
||||
const list = Array.isArray(res) ? res : (res.data || [])
|
||||
const total = Array.isArray(res) ? res.length : (res.count || 0)
|
||||
this.tableData = list
|
||||
this.pagination.total = total
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
onSearch () {
|
||||
this.pagination.current = 1
|
||||
this.fetchData()
|
||||
},
|
||||
onReset () {
|
||||
this.search = { code: '', name: '', bom_source_category_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: '', bom_source_category_id: '', unit_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,
|
||||
bom_source_category_id: row.bom_source_category_id,
|
||||
unit_id: row.unit_id,
|
||||
remark: row.remark || ''
|
||||
}
|
||||
this.dialogVisible = true
|
||||
},
|
||||
async onDialogSubmit () {
|
||||
this.submitting = true
|
||||
try {
|
||||
if (this.handleType === 'create') {
|
||||
await createMaterialMaster(this.formData)
|
||||
} else {
|
||||
await editMaterialMaster({ ...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')
|
||||
},
|
||||
() => deleteMaterialMaster({ id: [row.id] })
|
||||
)
|
||||
if (cancelled) 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 handleBatchDelete () {
|
||||
if (this.selectedRows.length <= 0) {
|
||||
this.$message.error(this.$t(this.key('please_select_data')))
|
||||
return
|
||||
}
|
||||
const ids = this.selectedRows.map(item => item.id)
|
||||
const cancelled = await this.$confirmAction(
|
||||
{
|
||||
message: this.key('confirm_batch_delete'),
|
||||
title: this.key('tip')
|
||||
},
|
||||
() => batchDeleteMaterialMaster({ id: ids })
|
||||
)
|
||||
if (cancelled) return
|
||||
this.$message.success(this.$t(this.key('operation_success')))
|
||||
this.fetchData()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.search-bar {
|
||||
padding: 10px 0;
|
||||
}
|
||||
/deep/ .el-form-item--mini.el-form-item {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,288 @@
|
||||
<template>
|
||||
<d2-container>
|
||||
<template #header>
|
||||
<div class="search-bar">
|
||||
<el-form :inline="true" size="mini">
|
||||
<el-form-item :label="$t(key('unit_code'))">
|
||||
<el-input
|
||||
v-model="search.code"
|
||||
:placeholder="$t(key('enter_unit_code'))"
|
||||
clearable
|
||||
style="width:200px"
|
||||
@keyup.enter.native="onSearch"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t(key('unit_name'))">
|
||||
<el-input
|
||||
v-model="search.name"
|
||||
:placeholder="$t(key('enter_unit_name'))"
|
||||
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-text="$t(ckey('help'))"
|
||||
auto-height
|
||||
@page-change="onPageChange"
|
||||
/>
|
||||
|
||||
<page-dialog-form
|
||||
ref="dialogForm"
|
||||
:visible.sync="dialogVisible"
|
||||
:title="dialogTitle"
|
||||
:width="'35%'"
|
||||
:form-cols="formCols"
|
||||
: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 { confirmMixin } from '@/composables/useConfirmHandle'
|
||||
import {
|
||||
getUnitList,
|
||||
createUnit,
|
||||
editUnit,
|
||||
deleteUnit
|
||||
} from '@/api/production-master-data/material-unit'
|
||||
import PageTable from '@/components/page-table'
|
||||
import PageDialogForm from '@/components/page-dialog-form'
|
||||
|
||||
export default {
|
||||
name: 'production-master-data-material-unit',
|
||||
components: { PageTable, PageDialogForm },
|
||||
mixins: [i18nMixin('page.production_master_data.material_model.material_unit'), confirmMixin],
|
||||
data () {
|
||||
return {
|
||||
loading: false,
|
||||
submitting: false,
|
||||
tableData: [],
|
||||
dialogVisible: false,
|
||||
dialogTitle: '',
|
||||
editId: '',
|
||||
handleType: 'create',
|
||||
search: { code: '', name: '' },
|
||||
pagination: { current: 1, size: 10, total: 0 },
|
||||
formData: { code: '', name: '', remark: '' },
|
||||
rules: {
|
||||
code: [
|
||||
{ required: true, message: this.key('enter_unit_code'), trigger: 'blur' },
|
||||
{ min: 1, max: 100, message: this.key('length_1_100'), trigger: 'blur' }
|
||||
],
|
||||
name: [
|
||||
{ required: true, message: this.key('enter_unit_name'), trigger: 'blur' },
|
||||
{ min: 1, max: 100, message: this.key('length_1_100'), trigger: 'blur' }
|
||||
]
|
||||
},
|
||||
formCols: [
|
||||
[
|
||||
{
|
||||
type: 'input',
|
||||
prop: 'code',
|
||||
label: this.key('unit_code'),
|
||||
placeholder: this.key('enter_unit_code'),
|
||||
clearable: true,
|
||||
style: { width: '90%' }
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
type: 'input',
|
||||
prop: 'name',
|
||||
label: this.key('unit_name'),
|
||||
placeholder: this.key('enter_unit_name'),
|
||||
clearable: true,
|
||||
style: { width: '90%' }
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
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%' }
|
||||
}
|
||||
]
|
||||
],
|
||||
columns: [],
|
||||
toolbarButtons: [],
|
||||
rowButtons: []
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.columns = useTableColumns([
|
||||
{ prop: 'sort', label: this.key('sort'), width: 80 },
|
||||
{ prop: 'code', label: this.key('unit_code'), minWidth: 140 },
|
||||
{ prop: 'name', label: this.key('unit_name'), minWidth: 140 },
|
||||
{ prop: 'remark', label: this.key('remark'), minWidth: 200 },
|
||||
{ prop: 'create_time', label: this.key('create_time'), minWidth: 160 },
|
||||
{ prop: '_actions', label: this.key('operation'), width: 180, fixed: 'right' }
|
||||
])
|
||||
const btns = useTableButtons({
|
||||
toolbar: [
|
||||
{
|
||||
key: 'add',
|
||||
label: this.key('add'),
|
||||
icon: 'el-icon-plus',
|
||||
type: 'primary',
|
||||
auth: '/production_configuration/matetial_model/unit/create',
|
||||
onClick: this.openAdd
|
||||
}
|
||||
],
|
||||
row: [
|
||||
{
|
||||
key: 'edit',
|
||||
label: this.key('edit'),
|
||||
icon: 'el-icon-edit',
|
||||
auth: '/production_configuration/matetial_model/unit/edit',
|
||||
onClick: this.openEdit
|
||||
},
|
||||
{
|
||||
key: 'delete',
|
||||
label: this.key('delete'),
|
||||
icon: 'el-icon-delete',
|
||||
color: 'danger',
|
||||
auth: '/production_configuration/matetial_model/unit/delete',
|
||||
onClick: this.handleDelete
|
||||
}
|
||||
]
|
||||
}, this.$permission)
|
||||
this.toolbarButtons = btns.toolbarButtons
|
||||
this.rowButtons = btns.rowButtons
|
||||
this.fetchData()
|
||||
},
|
||||
methods: {
|
||||
async fetchData () {
|
||||
this.loading = true
|
||||
try {
|
||||
const res = await getUnitList({
|
||||
...this.search,
|
||||
page_no: this.pagination.current,
|
||||
page_size: this.pagination.size
|
||||
})
|
||||
const list = Array.isArray(res) ? res : (res.data || [])
|
||||
const total = Array.isArray(res) ? res.length : (res.count || 0)
|
||||
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()
|
||||
},
|
||||
resetForm () {
|
||||
this.formData = { code: '', name: '', 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,
|
||||
remark: row.remark || ''
|
||||
}
|
||||
this.dialogVisible = true
|
||||
},
|
||||
async onDialogSubmit () {
|
||||
this.submitting = true
|
||||
try {
|
||||
if (this.handleType === 'create') {
|
||||
await createUnit(this.formData)
|
||||
} else {
|
||||
await editUnit({ ...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')
|
||||
},
|
||||
() => deleteUnit({ id: [row.id] })
|
||||
)
|
||||
if (cancelled) 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()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.search-bar {
|
||||
padding: 10px 0;
|
||||
}
|
||||
/deep/ .el-form-item--mini.el-form-item {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,302 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
:title="title"
|
||||
:visible.sync="visible"
|
||||
:append-to-body="true"
|
||||
:close-on-click-modal="false"
|
||||
:before-close="handleClose"
|
||||
width="80%"
|
||||
>
|
||||
<div class="search-content">
|
||||
<el-card class="box-card">
|
||||
<el-form :inline="true" size="mini">
|
||||
<el-form-item :label="$t(key('name'))">
|
||||
<el-input
|
||||
v-model="searchForm.name"
|
||||
:placeholder="$t(key('enter_name'))"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t(key('param'))">
|
||||
<el-input
|
||||
v-model="searchForm.code"
|
||||
:placeholder="$t(key('enter_param'))"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="onSearch">
|
||||
{{ $t(key('query')) }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<el-table
|
||||
ref="table"
|
||||
:data="tableData"
|
||||
border
|
||||
:loading="loading"
|
||||
max-height="450"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column :label="$t(key('name'))" prop="name" width="200" show-overflow-tooltip />
|
||||
<el-table-column :label="$t(key('param'))" prop="code" width="150" show-overflow-tooltip />
|
||||
<el-table-column :label="$t(key('category'))" prop="field_type" width="120" />
|
||||
<el-table-column :label="$t(key('remark'))" prop="remark" show-overflow-tooltip />
|
||||
<el-table-column :label="$t(key('is_unique'))" width="100" align="center">
|
||||
<template slot-scope="{ row }">
|
||||
<el-tag v-if="row.is_only === 1" type="success" size="mini">{{ $t(key('yes')) }}</el-tag>
|
||||
<el-tag v-else type="info" size="mini">{{ $t(key('no')) }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="$t(key('is_upload'))" width="100" align="center">
|
||||
<template slot-scope="{ row }">
|
||||
<el-tag v-if="row.is_upload === 1" type="success" size="mini">{{ $t(key('yes')) }}</el-tag>
|
||||
<el-tag v-else type="info" size="mini">{{ $t(key('no')) }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="$t(key('operation'))" width="120" fixed="right">
|
||||
<template slot-scope="{ row }">
|
||||
<el-button type="text" size="mini" icon="el-icon-edit" @click="handleEdit(row)">
|
||||
{{ $t(key('edit')) }}
|
||||
</el-button>
|
||||
<el-button type="text" size="mini" icon="el-icon-delete" style="color: #F56C6C" @click="handleDelete(row)">
|
||||
{{ $t(key('delete')) }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<el-pagination
|
||||
:current-page="pagination.current"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="pagination.size"
|
||||
:total="pagination.total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" size="mini" @click="handleAdd">{{ $t(key('add_row')) }}</el-button>
|
||||
<el-button type="success" size="mini" icon="el-icon-download" @click="handleImport">{{ $t(key('import')) }}</el-button>
|
||||
<el-button size="mini" @click="handleClose">{{ $t(key('close')) }}</el-button>
|
||||
</div>
|
||||
|
||||
<el-dialog
|
||||
:title="dialogTitle"
|
||||
:visible.sync="innerVisible"
|
||||
append-to-body
|
||||
width="600px"
|
||||
:before-close="handleInnerClose"
|
||||
>
|
||||
<el-form ref="form" :model="formData" :rules="rules" label-width="100px">
|
||||
<el-form-item :label="$t(key('param'))" prop="code">
|
||||
<el-input v-model="formData.code" :placeholder="$t(key('enter_param'))" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t(key('name'))" prop="name">
|
||||
<el-input v-model="formData.name" :placeholder="$t(key('enter_name'))" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t(key('category'))" prop="field_type">
|
||||
<el-select v-model="formData.field_type" :placeholder="$t(key('select_type'))" style="width: 100%">
|
||||
<el-option label="FLOAT" value="FLOAT" />
|
||||
<el-option label="INT" value="INT" />
|
||||
<el-option label="VARCHAR" value="VARCHAR" />
|
||||
<el-option label="TEXT" value="TEXT" />
|
||||
<el-option label="TIMESTAMP" value="TIMESTAMP" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t(key('remark'))">
|
||||
<el-input v-model="formData.remark" type="textarea" :rows="2" :placeholder="$t(key('remark_required'))" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t(key('is_unique'))">
|
||||
<el-radio-group v-model="formData.is_only">
|
||||
<el-radio :label="1">{{ $t(key('yes')) }}</el-radio>
|
||||
<el-radio :label="0">{{ $t(key('no')) }}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t(key('is_upload'))">
|
||||
<el-radio-group v-model="formData.is_upload">
|
||||
<el-radio :label="1">{{ $t(key('yes')) }}</el-radio>
|
||||
<el-radio :label="0">{{ $t(key('no')) }}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer">
|
||||
<el-button @click="handleInnerClose">{{ $t(key('cancel')) }}</el-button>
|
||||
<el-button type="primary" @click="handleSubmit">{{ $t(key('confirm')) }}</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { i18nMixin } from '@/composables/useI18n'
|
||||
import {
|
||||
getOptionalParamsList,
|
||||
createOptionalParams,
|
||||
editOptionalParams,
|
||||
deleteOptionalParams
|
||||
} from '@/api/production-master-data/optional-params'
|
||||
|
||||
export default {
|
||||
name: 'ProcessStepResultParam',
|
||||
components: {},
|
||||
mixins: [i18nMixin('page.production_master_data.process_model.process_step')],
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
workingsubclass_id: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
loading: false,
|
||||
tableData: [],
|
||||
searchForm: { name: '', code: '' },
|
||||
pagination: { current: 1, size: 10, total: 0 },
|
||||
innerVisible: false,
|
||||
dialogTitle: '',
|
||||
formData: {
|
||||
id: '',
|
||||
code: '',
|
||||
name: '',
|
||||
field_type: '',
|
||||
remark: '',
|
||||
is_only: 0,
|
||||
is_upload: 0
|
||||
},
|
||||
rules: {
|
||||
code: [{ required: true, message: this.key('enter_param'), trigger: 'blur' }],
|
||||
name: [{ required: true, message: this.key('enter_name'), trigger: 'blur' }],
|
||||
field_type: [{ required: true, message: this.key('select_type'), trigger: 'change' }]
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
workingsubclass_id: {
|
||||
handler (val) {
|
||||
if (val) {
|
||||
this.fetchData()
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClose () {
|
||||
this.$emit('close')
|
||||
},
|
||||
handleInnerClose () {
|
||||
this.innerVisible = false
|
||||
this.$refs.form && this.$refs.form.resetFields()
|
||||
},
|
||||
onSearch () {
|
||||
this.pagination.current = 1
|
||||
this.fetchData()
|
||||
},
|
||||
fetchData () {
|
||||
if (!this.workingsubclass_id) return
|
||||
this.loading = true
|
||||
getOptionalParamsList({
|
||||
workingsubclass_id: this.workingsubclass_id,
|
||||
page_no: this.pagination.current,
|
||||
page_size: this.pagination.size,
|
||||
...this.searchForm
|
||||
}).then(res => {
|
||||
const list = Array.isArray(res) ? res : (res.data || [])
|
||||
const total = Array.isArray(res) ? res.length : (res.count || 0)
|
||||
this.tableData = list
|
||||
this.pagination.total = total
|
||||
}).finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
handleSizeChange (size) {
|
||||
this.pagination.size = size
|
||||
this.pagination.current = 1
|
||||
this.fetchData()
|
||||
},
|
||||
handleCurrentChange (current) {
|
||||
this.pagination.current = current
|
||||
this.fetchData()
|
||||
},
|
||||
handleAdd () {
|
||||
this.dialogTitle = this.key('add_row')
|
||||
this.formData = {
|
||||
id: '',
|
||||
code: '',
|
||||
name: '',
|
||||
field_type: '',
|
||||
remark: '',
|
||||
is_only: 0,
|
||||
is_upload: 0
|
||||
}
|
||||
this.innerVisible = true
|
||||
},
|
||||
handleEdit (row) {
|
||||
this.dialogTitle = this.key('edit')
|
||||
this.formData = {
|
||||
id: row.id,
|
||||
code: row.code,
|
||||
name: row.name,
|
||||
field_type: row.field_type,
|
||||
remark: row.remark || '',
|
||||
is_only: row.is_only || 0,
|
||||
is_upload: row.is_upload || 0
|
||||
}
|
||||
this.innerVisible = true
|
||||
},
|
||||
handleDelete (row) {
|
||||
this.$confirm(this.key('confirm_delete_data'), this.key('tips'), {
|
||||
confirmButtonText: this.key('confirm'),
|
||||
cancelButtonText: this.key('cancel'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
deleteOptionalParams({ workingsubclass_id: this.workingsubclass_id, id: row.id }).then(() => {
|
||||
this.$message.success(this.key('operation_success'))
|
||||
this.fetchData()
|
||||
})
|
||||
}).catch(() => {})
|
||||
},
|
||||
handleSubmit () {
|
||||
this.$refs.form.validate(valid => {
|
||||
if (!valid) return
|
||||
const action = this.formData.id ? editOptionalParams : createOptionalParams
|
||||
const data = { workingsubclass_id: this.workingsubclass_id, ...this.formData }
|
||||
if (this.formData.id) {
|
||||
delete data.id
|
||||
}
|
||||
action(data).then(() => {
|
||||
this.$message.success(this.key('operation_success'))
|
||||
this.innerVisible = false
|
||||
this.$refs.form.resetFields()
|
||||
this.fetchData()
|
||||
})
|
||||
})
|
||||
},
|
||||
handleImport () {
|
||||
this.$message.info(this.key('import_tip'))
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.search-content {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.box-card {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
:title="title"
|
||||
:visible.sync="visible"
|
||||
:append-to-body="true"
|
||||
:close-on-click-modal="false"
|
||||
:before-close="handleClose"
|
||||
:width="width"
|
||||
>
|
||||
<div class="setting-content">
|
||||
<el-alert
|
||||
:title="settingTip"
|
||||
type="info"
|
||||
:closable="false"
|
||||
show-icon
|
||||
/>
|
||||
<div class="setting-placeholder">
|
||||
<p>{{ $t(key('setting_placeholder')) }}</p>
|
||||
<el-tag type="warning">{{ type }}</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="handleClose">{{ $t(key('cancel')) }}</el-button>
|
||||
<el-button type="primary" @click="handleSubmit">{{ $t(key('confirm')) }}</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { i18nMixin } from '@/composables/useI18n'
|
||||
|
||||
export default {
|
||||
name: 'ProcessStepSettingDialog',
|
||||
mixins: [i18nMixin('page.production_master_data.process_model.process_step')],
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
code: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '50%'
|
||||
},
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
pluginData: {
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
settingTip () {
|
||||
return this.$t(this.key('setting_tip'))
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClose () {
|
||||
this.$emit('close')
|
||||
},
|
||||
handleSubmit () {
|
||||
this.$message.success(this.key('operation_success'))
|
||||
this.$emit('close')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.setting-content {
|
||||
padding: 10px 0;
|
||||
}
|
||||
.setting-placeholder {
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
padding: 40px 0;
|
||||
color: #909399;
|
||||
}
|
||||
.setting-placeholder p {
|
||||
margin-bottom: 15px;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,379 @@
|
||||
<template>
|
||||
<d2-container>
|
||||
<template #header>
|
||||
<div class="search-bar">
|
||||
<el-form :inline="true" size="mini">
|
||||
<el-form-item :label="$t(key('process_unit_code'))">
|
||||
<el-input
|
||||
v-model="search.code"
|
||||
:placeholder="$t(key('enter_process_unit_code'))"
|
||||
clearable
|
||||
style="width:200px"
|
||||
@keyup.enter.native="onSearch"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t(key('process_unit_name'))">
|
||||
<el-input
|
||||
v-model="search.name"
|
||||
:placeholder="$t(key('enter_process_unit_name'))"
|
||||
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/process-step"
|
||||
:help-text="$t(ckey('help'))"
|
||||
auto-height
|
||||
@page-change="onPageChange"
|
||||
@selection-change="onSelect"
|
||||
/>
|
||||
|
||||
<page-dialog-form
|
||||
ref="dialogForm"
|
||||
:visible.sync="dialogVisible"
|
||||
:title="dialogTitle"
|
||||
:width="'35%'"
|
||||
: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"
|
||||
/>
|
||||
|
||||
<technology-flow-model
|
||||
:visible.sync="settingVisible"
|
||||
:title="settingTitle"
|
||||
:type="settingType"
|
||||
:code="settingCode"
|
||||
:width="settingWidth"
|
||||
:plugin-data="settingPluginData"
|
||||
@close="settingVisible = false"
|
||||
@submit="handleSettingSubmit"
|
||||
/>
|
||||
|
||||
<result-param
|
||||
:visible.sync="resultVisible"
|
||||
:title="resultTitle"
|
||||
:workingsubclass-id="currentRowId"
|
||||
@close="resultVisible = false"
|
||||
/>
|
||||
</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 {
|
||||
getProcessStepList,
|
||||
createProcessStep,
|
||||
editProcessStep,
|
||||
deleteProcessStep
|
||||
} from '@/api/production-master-data/process-step'
|
||||
import PageTable from '@/components/page-table'
|
||||
import PageDialogForm from '@/components/page-dialog-form'
|
||||
import TechnologyFlowModel from './components/technology-flow-model.vue'
|
||||
import ResultParam from './components/result-param.vue'
|
||||
|
||||
export default {
|
||||
name: 'production-master-data-process-step',
|
||||
components: { PageTable, PageDialogForm, TechnologyFlowModel, ResultParam },
|
||||
mixins: [i18nMixin('page.production_master_data.process_model.process_step'), 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: '', device_category_id: '', remark: '' },
|
||||
settingVisible: false,
|
||||
settingTitle: '',
|
||||
settingType: '',
|
||||
settingCode: '',
|
||||
settingWidth: '50%',
|
||||
settingPluginData: '',
|
||||
resultVisible: false,
|
||||
resultTitle: '',
|
||||
currentRowId: '',
|
||||
rules: {
|
||||
code: [
|
||||
{ required: true, message: this.key('enter_process_unit_code'), trigger: 'blur' },
|
||||
{ min: 1, max: 100, message: this.key('length_1_100'), trigger: 'blur' }
|
||||
],
|
||||
name: [
|
||||
{ required: true, message: this.key('enter_process_unit_name'), trigger: 'blur' },
|
||||
{ min: 1, max: 100, message: this.key('length_1_100'), trigger: 'blur' }
|
||||
],
|
||||
device_category_id: [
|
||||
{ required: true, message: this.key('select_device_category'), trigger: 'change' }
|
||||
]
|
||||
},
|
||||
columns: [],
|
||||
toolbarButtons: [],
|
||||
rowButtons: [],
|
||||
formCols: [
|
||||
[
|
||||
{
|
||||
type: 'input',
|
||||
prop: 'code',
|
||||
label: this.key('process_unit_code'),
|
||||
placeholder: this.key('enter_process_unit_code'),
|
||||
clearable: true,
|
||||
disabled: false,
|
||||
style: { width: '90%' }
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
type: 'input',
|
||||
prop: 'name',
|
||||
label: this.key('process_unit_name'),
|
||||
placeholder: this.key('enter_process_unit_name'),
|
||||
clearable: true,
|
||||
style: { width: '90%' }
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
type: 'select',
|
||||
prop: 'device_category_id',
|
||||
label: this.key('device_category'),
|
||||
placeholder: this.key('select_device_category'),
|
||||
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('remark_required'),
|
||||
clearable: true,
|
||||
style: { width: '90%' }
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.columns = useTableColumns([
|
||||
{ prop: 'sort', label: this.key('sort'), width: 80 },
|
||||
{ prop: 'code', label: this.key('process_unit_code'), minWidth: 120 },
|
||||
{ prop: 'name', label: this.key('process_unit_name'), minWidth: 120 },
|
||||
{ prop: 'device_category_name', label: this.key('device_category'), 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/technology_model/technology_flow_workingsubclass/create',
|
||||
onClick: this.openAdd
|
||||
}
|
||||
],
|
||||
row: [
|
||||
{
|
||||
key: 'edit',
|
||||
label: this.key('edit'),
|
||||
icon: 'el-icon-edit',
|
||||
auth: '/production_configuration/technology_model/technology_flow_workingsubclass/edit',
|
||||
onClick: this.openEdit
|
||||
},
|
||||
{
|
||||
key: 'setting',
|
||||
label: this.key('preset_setting'),
|
||||
icon: 'el-icon-setting',
|
||||
color: 'warning',
|
||||
auth: '/production_configuration/technology_model/technology_flow_workingsubclass/setting',
|
||||
onClick: this.openSetting
|
||||
},
|
||||
{
|
||||
key: 'result',
|
||||
label: this.key('preset_result_param'),
|
||||
icon: 'el-icon-document',
|
||||
color: 'success',
|
||||
auth: '/production_configuration/technology_model/technology_flow_workingsubclass/result',
|
||||
onClick: this.openResult
|
||||
},
|
||||
{
|
||||
key: 'delete',
|
||||
label: this.key('delete'),
|
||||
icon: 'el-icon-delete',
|
||||
color: 'danger',
|
||||
auth: '/production_configuration/technology_model/technology_flow_workingsubclass/delete',
|
||||
onClick: this.handleDelete
|
||||
}
|
||||
]
|
||||
}, this.$permission)
|
||||
this.toolbarButtons = btns.toolbarButtons
|
||||
this.rowButtons = btns.rowButtons
|
||||
this.fetchData()
|
||||
},
|
||||
methods: {
|
||||
async fetchData () {
|
||||
this.loading = true
|
||||
try {
|
||||
const res = await getProcessStepList({
|
||||
...this.search,
|
||||
page_no: this.pagination.current,
|
||||
page_size: this.pagination.size
|
||||
})
|
||||
const list = Array.isArray(res) ? res : (res.data || [])
|
||||
const total = Array.isArray(res) ? res.length : (res.count || 0)
|
||||
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: '', device_category_id: '', remark: '' }
|
||||
this.editId = ''
|
||||
this.$nextTick(() => {
|
||||
this.formCols[0][0].disabled = false
|
||||
})
|
||||
},
|
||||
openAdd () {
|
||||
this.handleType = 'create'
|
||||
this.dialogTitle = this.key('add_process_unit')
|
||||
this.$nextTick(() => {
|
||||
this.$refs.dialogForm && this.$refs.dialogForm.reset()
|
||||
this.resetForm()
|
||||
this.dialogVisible = true
|
||||
})
|
||||
},
|
||||
openEdit (row) {
|
||||
this.handleType = 'edit'
|
||||
this.dialogTitle = this.key('edit_process_unit')
|
||||
this.editId = row.id
|
||||
this.formData = {
|
||||
code: row.code,
|
||||
name: row.name,
|
||||
device_category_id: row.device_category_id || '',
|
||||
remark: row.remark || ''
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this.formCols[0][0].disabled = true
|
||||
})
|
||||
this.dialogVisible = true
|
||||
},
|
||||
async onDialogSubmit () {
|
||||
this.submitting = true
|
||||
try {
|
||||
if (this.handleType === 'create') {
|
||||
await createProcessStep(this.formData)
|
||||
} else {
|
||||
await editProcessStep({ ...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_message'),
|
||||
title: this.key('tips')
|
||||
},
|
||||
() => deleteProcessStep({ id: [row.id] })
|
||||
)
|
||||
if (cancelled) 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()
|
||||
},
|
||||
openSetting (row) {
|
||||
this.currentRowId = row.id
|
||||
this.settingTitle = this.key('preset_setting')
|
||||
this.settingType = row.device_category_id || ''
|
||||
this.settingCode = row.code
|
||||
this.settingWidth = '60%'
|
||||
this.settingVisible = true
|
||||
},
|
||||
handleSettingSubmit (data) {
|
||||
this.$message.success(this.$t(this.key('operation_success')))
|
||||
this.settingVisible = false
|
||||
},
|
||||
openResult (row) {
|
||||
this.currentRowId = row.id
|
||||
this.resultTitle = this.key('preset_result_param')
|
||||
this.resultVisible = true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.search-bar {
|
||||
padding: 10px 0;
|
||||
}
|
||||
/deep/ .el-form-item--mini.el-form-item {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user