<template>
|
<TableLayout v-permissions="['ext:materialext:query']">
|
<!-- 搜索表单 -->
|
<el-form ref="searchForm" slot="search-form" :model="searchForm" label-width="120px" label-suffix="：" inline>
|
<el-form-item label="组合名称" prop="unionName">
|
<el-input v-model="searchForm.unionName" placeholder="请输入组合名称" @keypress.enter.native="search"></el-input>
|
</el-form-item>
|
<el-form-item label="物料分类组合" prop="cumodelId">
|
<el-select v-model="searchForm.cumodelId" filterable clearable placeholder="请选择">
|
<el-option
|
v-for="(item, index) in types"
|
:key="index"
|
:label="item.combinationName"
|
:value="item.id">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="形成方式" prop="formation">
|
<el-select v-model="searchForm.formation" filterable clearable placeholder="请选择">
|
<el-option
|
v-for="(item, index) in accesses"
|
:key="index"
|
:label="item.name"
|
:value="item.id">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="状态" prop="status">
|
<el-select v-model="searchForm.status" filterable clearable placeholder="请选择">
|
<el-option
|
v-for="(item, index) in status"
|
:key="index"
|
:label="item.name"
|
:value="item.id">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<section>
|
<el-button type="primary" @click="search">搜索</el-button>
|
<el-button @click="reset">重置</el-button>
|
</section>
|
</el-form>
|
<!-- 表格和分页 -->
|
<template v-slot:table-wrap>
|
<ul class="toolbar" >
|
<li v-permissions="['ext:materialext:create']"><el-button type="primary" @click="$refs.operaMaterialExtWindow.open('新增物料')">新增物料</el-button></li>
|
<li v-permissions="['ext:materialext:exportExcel']">
|
<ImportButton
|
text="导入"
|
template-name="material_import_template.xlsx"
|
template-path="/template/material_import_template.xlsx"
|
action="/ext/materialExt/importmaterial"
|
@success="search"
|
/>
|
</li>
|
<!-- <li v-permissions="['ext:materialext:distributionMaterial']"><el-button type="primary" @click="distributionWithArray">分配</el-button></li> -->
|
<li><el-button type="primary" v-if="containPermissions(['ext:barcodeparamext:query'])" @click="printLabelWithArray" plain>打印标签</el-button></li>
|
<li v-permissions="['ext:materialext:delete']"><el-button type="danger" plain @click="unvalidWithArray">失效</el-button></li>
|
</ul>
|
<el-table
|
v-loading="isWorking.search"
|
:data="tableData.list"
|
stripe
|
border
|
@selection-change="handleSelectionChange"
|
>
|
<el-table-column type="selection" fixed="left" width="55"></el-table-column>
|
<el-table-column label="物料编码" min-width="160px">
|
<template slot-scope="{row}">
|
<el-button type="text" @click="showDetail(row)">
|
{{ row.code }}
|
</el-button>
|
</template>
|
</el-table-column>
|
<el-table-column prop="name" label="物料组合名称" show-overflow-tooltip min-width="100px">
|
<template slot-scope="{row}">
|
<span class="long-title-style" >{{ row.name + row.attr }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="umodelName" label="单位" min-width="50px"></el-table-column>
|
<el-table-column prop="unionCategoryName" label="物料分类" show-overflow-tooltip min-width="140px">
|
<template slot-scope="{row}">
|
<span class="long-title-style" >{{ row.unionCategoryName }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="形成方式"
|
min-width="60px"
|
>
|
<template slot-scope="{row}">
|
{{ row.formation == '0' ? '生产' : '采购' }}
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="状态"
|
min-width="60px"
|
>
|
<template slot-scope="{row}">
|
<el-tag v-if="row.status == '1'" type="success">有效</el-tag>
|
<el-tag v-if="row.status == '0'" type="danger">失效</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column prop="createTime" label="创建时间" min-width="140px"></el-table-column>
|
<el-table-column
|
label="操作"
|
min-width="180px"
|
fixed="right"
|
>
|
<template slot-scope="{row}">
|
<div v-if="row.status == '1'">
|
<el-button type="text" @click="$refs.operaMaterialExtWindow.open('编辑物料', row)" v-permissions="['ext:materialext:update']">编辑</el-button>
|
<!-- <el-button type="text" @click="distribution(row)" v-permissions="['ext:materialext:distributionMaterial']">分配</el-button> -->
|
<el-button type="text" v-if="containPermissions(['ext:barcodeparamext:query'])" @click="printLabel(row)">打印标签</el-button>
|
<span style="margin-left: 8px;" v-permissions="['ext:materialext:delete']">
|
<el-button type="text" @click="unvalid(row)">失效</el-button>
|
</span>
|
</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
<pagination
|
@size-change="handleSizeChange"
|
@current-change="handlePageChange"
|
:pagination="tableData.pagination"
|
></pagination>
|
</template>
|
|
<!-- 新建/修改 -->
|
<OperaMaterialExtWindow ref="operaMaterialExtWindow" @success="handlePageChange"/>
|
<OperaMaterialDistributionWindow ref="operaMaterialDistributionWindow" @success="handlePageChange"/>
|
<OperaMaterialDetailWindow ref="operaMaterialDetailWindow"/>
|
<QrCodeLabel ref="qrCodeLabel"></QrCodeLabel>
|
</TableLayout>
|
</template>
|
|
<script>
|
import BaseTable from '@/components/base/BaseTable'
|
import TableLayout from '@/layouts/TableLayout'
|
import Pagination from '@/components/common/Pagination'
|
import QrCodeLabel from '@/components/common/QrCodeLabel'
|
import ImportButton from '@/components/common/ImportButton'
|
import OperaMaterialExtWindow from '@/components/ext/OperaMaterialExtWindow'
|
import OperaMaterialDistributionWindow from '@/components/ext/OperaMaterialDistributionWindow'
|
import OperaMaterialDetailWindow from '@/components/ext/OperaMaterialDetailWindow'
|
import { getCategoryUnionListByOrg, updateMateriaStatus, materialExtById } from '@/api/ext/materialExt'
|
import { fetchList as getPrefix } from '@/api/ext/barcodeParamExt'
|
export default {
|
name: 'MaterialExt',
|
extends: BaseTable,
|
components: { TableLayout, Pagination, ImportButton, OperaMaterialExtWindow, OperaMaterialDistributionWindow, OperaMaterialDetailWindow, QrCodeLabel },
|
data () {
|
return {
|
// 搜索
|
searchForm: {
|
unionName: '', // 名称
|
// code: '',
|
cumodelId: '', // 物料分类组合
|
formation: '', // 形成方式
|
status: '' // 状态
|
},
|
accesses: [
|
// 形成方式 0生产、1.采购
|
{ name: '生产', id: '0' },
|
{ name: '采购', id: '1' }
|
],
|
types: [
|
{ name: '1', id: '1' },
|
{ name: '2', id: '2' },
|
{ name: '3', id: '3' }
|
],
|
status: [
|
{ name: '有效', id: '1' },
|
{ name: '失效', id: '0' }
|
],
|
// 临时数据
|
list: [
|
{ id: 'WL0001', name: '电解液1.0', unit: '个', type: '0', status: '1', createTime: '2022-02-22 15:33:00' }
|
],
|
printList: [],
|
prefix: ''
|
}
|
},
|
provide() {
|
return {
|
types: () => this.types
|
}
|
},
|
created () {
|
this.config({
|
module: '物料信息',
|
api: '/ext/materialExt',
|
'field.id': 'id',
|
'field.main': 'name',
|
sorts: [{ direction: 'DESC', property: 'CREATE_TIME' }]
|
})
|
this.search()
|
getCategoryUnionListByOrg()
|
.then(res => {
|
// console.log(res)
|
this.types = res
|
})
|
.catch(err => {
|
console.log(err)
|
})
|
getPrefix({
|
page: 1,
|
capacity: 1,
|
model: { type: 0, status: 1 }
|
})
|
.then(res => {
|
this.prefix = res.records[0].prefix
|
})
|
},
|
methods: {
|
unvalid (row) {
|
this.$confirm(`确认将 ${row.name}设置为失效吗?`, '提示', {
|
confirmButtonText: '失效',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
this.isWorking.delete = true
|
const query = '?status=0&ids=' + row.id
|
this.updateStatus(query)
|
}).catch(() => {})
|
},
|
printLabel (row) {
|
console.log('打印标签', row)
|
this.printList = [{
|
code: row.code,
|
title: row.name + row.attr,
|
content: row.code,
|
department: this.$store.state.userInfo.curComDepartment.name
|
}]
|
this.$refs.qrCodeLabel.open('打印标签', this.printList, this.prefix)
|
|
},
|
unvalidWithArray () {
|
if (this.tableData.selectedRows.length === 0) {
|
this.$tip.warning('请至少选择一条数据')
|
return
|
}
|
const ids = []
|
for (const item of this.tableData.selectedRows) {
|
ids.push(item.id)
|
}
|
this.$confirm(`确认将已选中的 ${this.tableData.selectedRows.length} 条物料设置为失效吗?`, '提示', {
|
confirmButtonText: '失效',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
this.isWorking.delete = true
|
const query = '?status=0&ids=' + ids.join(',')
|
this.updateStatus(query)
|
}).catch(() => {})
|
},
|
printLabelWithArray () {
|
if (this.tableData.selectedRows.length === 0) {
|
this.$tip.warning('请至少选择一条数据')
|
return
|
}
|
console.log(this.tableData.selectedRows)
|
this.printList = this.tableData.selectedRows.map((item) => {
|
return {
|
code: item.code,
|
title: item.name + item.attr,
|
content: item.code,
|
department: this.$store.state.userInfo.curComDepartment.name,
|
}
|
})
|
this.$refs.qrCodeLabel.open('打印标签', this.printList, this.prefix)
|
},
|
updateStatus (q) {
|
updateMateriaStatus(q)
|
.then(res => {
|
this.$message.success('成功')
|
this.search()
|
})
|
.catch(err => {
|
console.log(err)
|
this.$message.error(err)
|
})
|
},
|
distribution (row) {
|
this.$refs.operaMaterialDistributionWindow.open('分配', { materialIds: row.id })
|
},
|
distributionWithArray () {
|
if (this.tableData.selectedRows.length === 0) {
|
this.$tip.warning('请至少选择一条数据')
|
return
|
}
|
const ids = []
|
for (const item of this.tableData.selectedRows) {
|
ids.push(item.id)
|
}
|
this.$refs.operaMaterialDistributionWindow.open('分配', { materialIds: ids.join(',') })
|
},
|
// 显示详情
|
showDetail (row) {
|
// console.log('详情')
|
materialExtById(row.id)
|
.then(res => {
|
// console.log(res)
|
this.$refs.operaMaterialDetailWindow.open('物料详细', res)
|
})
|
.catch(err => {
|
console.log(err)
|
this.$message.error('获取详情失败')
|
})
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
::v-deep .cell {
|
justify-content: space-between;
|
}
|
</style>
|
